From 31b616b239596c5d39be0668ba7f66aa5ef99ef7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 3 Nov 2020 16:28:05 +0100
Subject: [PATCH 001/258] Provide a X-Vial list in Chemotion Repository for the
 authorized users. - Fetch data from a collection(Repo: Open Data Collection)
 of Compound platform. - Use compound_open_data.yml as configuration file, put
 aurthized user id in allowed_uids.

---
 app/api/chemotion/public_api.rb               | 33 ++++++++++++--
 app/api/helpers/compound_helpers.rb           | 20 +++++++++
 .../components/common/RepoXvialButton.js      | 43 +++++++++++++++++--
 app/assets/javascripts/libHome/RepoCommon.js  |  2 +-
 app/assets/javascripts/libHome/RepoPubl.js    | 15 ++++++-
 .../libHome/RepoReactionDetails.js            |  2 +-
 app/assets/javascripts/libHome/RepoSample.js  |  5 ++-
 .../javascripts/libHome/RepoSampleDetails.js  |  4 +-
 app/assets/stylesheets/repo_home.scss         | 22 ++++++++--
 app/models/compound_open_data.rb              |  2 +
 .../molecule_guest_list_serializer.rb         |  6 ++-
 .../reaction_guest_list_serializer.rb         | 19 +++++++-
 config/compound_open_data.yml.example         |  5 +++
 config/deploy/server_chemotion_net.rb         |  2 +-
 config/initializers/compound_open_data.rb     | 18 ++++++++
 db/functions/com_xvial_v01.sql                | 15 +++++++
 ...170400_create_compound_open_data_locals.rb |  5 +++
 ...0201103124001_create_function_com_xvial.rb |  5 +++
 db/views/compound_open_data_locals_v01.sql    |  5 +++
 19 files changed, 205 insertions(+), 23 deletions(-)
 create mode 100644 app/api/helpers/compound_helpers.rb
 create mode 100644 app/models/compound_open_data.rb
 create mode 100644 config/compound_open_data.yml.example
 create mode 100644 config/initializers/compound_open_data.rb
 create mode 100644 db/functions/com_xvial_v01.sql
 create mode 100644 db/migrate/20201027170400_create_compound_open_data_locals.rb
 create mode 100644 db/migrate/20201103124001_create_function_com_xvial.rb
 create mode 100644 db/views/compound_open_data_locals_v01.sql

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index f6dfe35b0..a83d70095 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -3,7 +3,9 @@
 # rubocop: disable Metrics/ClassLength
 require 'open-uri'
 
+# Belong to Chemotion module
 module Chemotion
+  # API for Public data
   class PublicAPI < Grape::API
     include Grape::Kaminari
     helpers do
@@ -26,6 +28,7 @@ def send_notification(attachment, user, status, has_error = false)
         )
       end
     end
+    helpers CompoundHelpers
 
     namespace :public do
       get 'ping' do
@@ -404,9 +407,27 @@ def query_ontologies(name)
               group by m.id
             ) c on c.molecule_id = molecules.id
           SQL
-          paginate(Molecule.joins(sample_join).joins(xvial_count).order("s.max_published_at desc").select(
+          com_config = Rails.configuration.compound_opendata
+          xvial_com = <<~SQL
+            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+          SQL
+          if com_config.present?
+            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
+                          <<~SQL
+                            inner join (
+                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
+                              group by m.id
+                            ) cod on cod.molcule_id = molecules.id
+                          SQL
+                        else
+                          <<~SQL
+                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+                          SQL
+                        end
+          end
+          paginate(Molecule.joins(sample_join).joins(xvial_count).joins(xvial_com).order("s.max_published_at desc").select(
             <<~SQL
-              molecules.*, sample_svg_file, xvial_count
+              molecules.*, sample_svg_file, xvial_count, xvial_com
             SQL
           ))
         end
@@ -590,6 +611,7 @@ def query_ontologies(name)
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:products].each do |p|
             pub_product = p
+            p[:xvialCom] = build_xvial_com(p[:molecule]['inchikey'], current_user&.id)
             pub_product_tag = pub_product[:tag]['taggable_data']
             next if pub_product_tag.nil?
 
@@ -599,6 +621,7 @@ def query_ontologies(name)
             unless current_user.present? && User.reviewer_ids.include?(current_user.id)
               pub_product_tag['xvial']['num'] = 'x'
             end
+            p[:xvialCom][:hasSample] = true
           end
           entities[:publication]['review']['history'] = []
           entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
@@ -620,6 +643,7 @@ def query_ontologies(name)
         end
         get do
           molecule = Molecule.find(params[:id])
+          xvial_com = build_xvial_com(molecule.inchikey, current_user&.id)
           pub_id = Collection.public_collection_id
           if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
             adv = <<~SQL
@@ -685,12 +709,15 @@ def query_ontologies(name)
               sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
 
           end
+          x = published_samples.select { |s| s[:xvial].present? }
+          xvial_com[:hasSample] = x.length.positive?
           published_samples = published_samples.flatten.compact
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             published_samples: published_samples,
             isLogin: current_user.nil? ? false : true,
-            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false
+            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false,
+            xvialCom: xvial_com
           }
         end
       end
diff --git a/app/api/helpers/compound_helpers.rb b/app/api/helpers/compound_helpers.rb
new file mode 100644
index 000000000..4a1d4bd86
--- /dev/null
+++ b/app/api/helpers/compound_helpers.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# Compound data helper
+module CompoundHelpers
+  extend Grape::API::Helpers
+
+  def build_xvial_com(inchikey, uid)
+    xvial_com = { allowed: false, hasData: 0, data: [], hasSample: false }
+    com_config = Rails.configuration.compound_opendata
+    return xvial_com unless com_config.present? && inchikey.present? && uid.present?
+
+    xvial_com = CompoundOpenData.where('x_inchikey = ?', inchikey).order(x_created_at: :desc)
+    {
+      allowed: com_config.allowed_uids.include?(uid),
+      hasData: xvial_com.length.positive?,
+      data: com_config.allowed_uids.include?(uid) ? xvial_com : [],
+      hasSample: false
+    }
+  end
+end
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
index d084b035c..0463219cb 100644
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, Tooltip, FormControl } from 'react-bootstrap';
+import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
+import uuid from 'uuid';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import NotificationActions from '../actions/NotificationActions';
 
@@ -13,6 +14,40 @@ const registedCompoundTooltip = (
   </div>
 );
 
+const listCom = (xvialCom) => {
+  if (!xvialCom.allowed) return <br />;
+  const listComData = xvialCom.hasData ? (
+    xvialCom.data.map(x => (
+      <tr key={uuid.v4()}>
+        <td>{x.x_data.xid}</td>
+        <td>{x.x_data.provided_by}</td>
+        <td>{x.x_created_at}</td>
+        <td>{x.x_short_label}</td>
+        <td>{x.x_data.origin_id}</td>
+      </tr>
+    ))
+  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
+  return (
+    <div>
+      <h4><i>Reference (data from Compound platform)</i></h4>
+      <Table striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th>X-Vial</th>
+            <th>Provided by</th>
+            <th>Created at</th>
+            <th>Short label of Sample</th>
+            <th>Name of origin Sample</th>
+          </tr>
+        </thead>
+        <tbody>
+          {listComData}
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
 export default class RepoXvialButton extends React.Component {
   constructor(props) {
     super(props);
@@ -69,7 +104,7 @@ export default class RepoXvialButton extends React.Component {
   render() {
     const { dataModalShow, requestModalShow } = this.state;
     const {
-      isEditable, isLogin, data, allowRequest
+      isEditable, isLogin, data, allowRequest, xvialCom
     } = this.props;
     const hasData = !!(data && data !== '');
     const compoundLink = hasData ? (
@@ -78,11 +113,11 @@ export default class RepoXvialButton extends React.Component {
       </OverlayTrigger>
     ) : null;
     const dataModal = (
-      <Modal show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
+      <Modal bsSize="large" show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
         <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
         <Modal.Body>
           <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
-          <br />
+          {listCom(xvialCom)}
           <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
           <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
         </Modal.Body>
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 50e81f8cc..64e552248 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -970,7 +970,7 @@ class RenderAnalysisHeader extends Component {
               <span className="repo-pub-sample-header">
                 <span className="repo-pub-title"><IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" /></span>&nbsp;
                 <span className="repo-pub-title"><b>Product</b></span>&nbsp;
-                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} />
+                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} xvialCom={this.props.xvialCom} />
                 <RepoPublicComment isReviewer={this.props.isReviewer} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} userInfo={this.props.userInfo} pageType="reactions" pageId={this.props.reactionId} />&nbsp;
                 <RepoUserComment isLogin={this.props.isLogin} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} pageType="reactions" pageId={this.props.reactionId} />
                 <br /><br />
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 9bc89e80f..85ba92d52 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -19,6 +19,17 @@ import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
 import Formula from '../components/common/Formula';
 
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
 const svgTag = (path, klassName, isPubElement) => {
   const popHover = (
     <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
@@ -56,7 +67,7 @@ const renderReaction = (element, currentElement, isPubElement) => {
         </div>
       </td>
       <td>
-        {element.xvial_count && element.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null}
+        {xvialTag(element)}
       </td>
     </tr>
   );
@@ -306,7 +317,7 @@ export default class RepoPubl extends Component {
               {molecule.iupac_name}
               <span className="repo-pub-list-icons">
                 {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-                {molecule.xvial_count && molecule.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null }
+                {xvialTag(molecule)}
               </span>
             </h4>
           </div>
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index c6a53c14a..6e5aec189 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -314,7 +314,7 @@ export default class RepoReactionDetails extends Component {
       return <div />;
     }
     const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} /> : <span />;
+    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} /> : <span />;
     const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
     const analysesView = analyses.map((analysis) => {
       const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index 3ee525614..bcf06e1d3 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -76,8 +76,9 @@ export default class RepoSample extends Component {
   render() {
     const {
       sample, pubData, tagData, isPublished,
-      canComment, handleCommentBtn, isLogin, isReviewer
+      canComment, handleCommentBtn, isLogin, isReviewer, element
     } = this.props;
+    const { xvialCom } = element;
     const { expandSA } = this.state;
 
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
@@ -110,7 +111,7 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={sample.id} type="sample" /></span>&nbsp;
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
-          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} />
+          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
           {IconLicense(sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
index 5557d6c9a..51a8b1a04 100644
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -75,7 +75,7 @@ export default class RepoSampleDetails extends Component {
     }
 
     const {
-      molecule, isLogin, isReviewer
+      molecule, isLogin, isReviewer, xvialCom
     } = element;
 
     const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
@@ -158,7 +158,7 @@ export default class RepoSampleDetails extends Component {
               /> : ''
           }
           {canClose ? <ClosePanel element={sample} /> : ''}
-          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} />
+          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} xvialCom={xvialCom} />
           <div>
             {details}
           </div>
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index cf7edc2b3..8cbc491e7 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -77,17 +77,31 @@ $bs-successcolor: #5cb85c;
   }
 }
 
-.xvial-span {
-  display: flex;
+@mixin xvial-span-base {
   justify-content: center;
   font-size: 80%;
   width: 22px;
   height: 22px;
-  color: $bs-primarycolor;
   padding: 2px;
-  border: 2px solid $bs-primarycolor;
   border-radius: 3px;
   background-color: white;
+  color: orange; // $bs-defaultcolor;
+  border: 2px solid orange; // $bs-defaultcolor;
+}
+
+.xvial-span {
+  @include xvial-span-base;
+  display: none;
+}
+
+.xvial {
+  display: flex;
+  color: $bs-primarycolor;
+}
+
+.xvial-com {
+  display: flex;
+  border: 2px solid $bs-primarycolor;
 }
 
 .repo-registed-compound-desc {
diff --git a/app/models/compound_open_data.rb b/app/models/compound_open_data.rb
new file mode 100644
index 000000000..7d0e9fb37
--- /dev/null
+++ b/app/models/compound_open_data.rb
@@ -0,0 +1,2 @@
+class CompoundOpenData < ActiveRecord::Base
+end
diff --git a/app/serializers/molecule_guest_list_serializer.rb b/app/serializers/molecule_guest_list_serializer.rb
index 0a93309bf..21db5779b 100644
--- a/app/serializers/molecule_guest_list_serializer.rb
+++ b/app/serializers/molecule_guest_list_serializer.rb
@@ -1,4 +1,6 @@
+# frozen_string_literal: true
+
+# molecule list class for guest
 class MoleculeGuestListSerializer < ActiveModel::Serializer
-  attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-              :molecule_svg_file, :tag, :sample_svg_file, :xvial_count
+  attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular, :molecule_svg_file, :tag, :sample_svg_file, :xvial_count, :xvial_com
 end
diff --git a/app/serializers/reaction_guest_list_serializer.rb b/app/serializers/reaction_guest_list_serializer.rb
index 6ff67bc26..771e3e5f6 100644
--- a/app/serializers/reaction_guest_list_serializer.rb
+++ b/app/serializers/reaction_guest_list_serializer.rb
@@ -1,5 +1,8 @@
+# frozen_string_literal: true
+
+# reaction list class for guest
 class ReactionGuestListSerializer < ActiveModel::Serializer
-  attributes :id, :name, :reaction_svg_file, :tag, :xvial_count
+  attributes :id, :name, :reaction_svg_file, :tag, :xvial_count, :xvial_com
 
   def xvial_count
     xvial_count = <<~SQL
@@ -7,4 +10,18 @@ def xvial_count
     SQL
     ReactionsSample.joins(xvial_count).where(type: 'ReactionsProductSample', reaction_id: id).length
   end
+
+  def xvial_com
+    com_config = Rails.configuration.compound_opendata
+    return -1 unless com_config.present?
+
+    return -2 unless com_config.allowed_uids.include?(scope.current_user&.id)
+
+    xvial_com = <<~SQL
+      inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+      inner join molecules m on m.id = s.molecule_id
+      inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+    SQL
+    ReactionsSample.joins(xvial_com).where(type: 'ReactionsProductSample', reaction_id: id).length
+  end
 end
diff --git a/config/compound_open_data.yml.example b/config/compound_open_data.yml.example
new file mode 100644
index 000000000..40fe4e345
--- /dev/null
+++ b/config/compound_open_data.yml.example
@@ -0,0 +1,5 @@
+development:
+  :allowed_uids: [123,456]
+
+production:
+  :allowed_uids: [123,456]
diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
index db056ed32..227de1307 100644
--- a/config/deploy/server_chemotion_net.rb
+++ b/config/deploy/server_chemotion_net.rb
@@ -4,7 +4,7 @@
 set :repo_url, 'git@git.scc.kit.edu:ComPlat/chemotion_REPO.git'
 set :branch, 'server_chemotion_net'
 
-before 'deploy:migrate', 'deploy:backup'
+#before 'deploy:migrate', 'deploy:backup'
 
 server 'www.chemotion.net', user: user, roles: %w{app web db}
 
diff --git a/config/initializers/compound_open_data.rb b/config/initializers/compound_open_data.rb
new file mode 100644
index 000000000..dddac63d7
--- /dev/null
+++ b/config/initializers/compound_open_data.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+if File.exist? Rails.root.join('config', 'compound_open_data.yml')
+  compound_opendata = Rails.application.config_for :compound_open_data
+
+  Rails.application.configure do
+    config.compound_opendata = ActiveSupport::OrderedOptions.new
+    config.compound_opendata.allowed_uids = compound_opendata[:allowed_uids]
+    sql = ActiveRecord::Base.send(:sanitize_sql_array, ['select to_regclass(?)::text as table_name', 'compound_open_data'])
+    table_name = ActiveRecord::Base.connection.exec_query(sql).to_a[0]['table_name']
+    CompoundOpenData.table_name = table_name.present? ? table_name : 'compound_open_data_locals'
+  end
+else
+  CompoundOpenData.table_name = 'compound_open_data_locals'
+  Rails.application.configure do
+    config.compound_opendata = nil
+  end
+end
diff --git a/db/functions/com_xvial_v01.sql b/db/functions/com_xvial_v01.sql
new file mode 100644
index 000000000..d8707d121
--- /dev/null
+++ b/db/functions/com_xvial_v01.sql
@@ -0,0 +1,15 @@
+CREATE OR REPLACE FUNCTION public.com_xvial(p_allow boolean DEFAULT false)
+ RETURNS SETOF compound_open_data_locals
+ LANGUAGE plpgsql
+AS $function$
+begin
+	if p_allow IS false then
+		return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+	elsif EXISTS(select * from to_regclass('compound_open_data') where to_regclass is not null) then
+	   RETURN QUERY SELECT compound_open_data.* FROM compound_open_data;
+	else
+	   return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+    end if;
+END
+$function$
+;
diff --git a/db/migrate/20201027170400_create_compound_open_data_locals.rb b/db/migrate/20201027170400_create_compound_open_data_locals.rb
new file mode 100644
index 000000000..6763c60e3
--- /dev/null
+++ b/db/migrate/20201027170400_create_compound_open_data_locals.rb
@@ -0,0 +1,5 @@
+class CreateCompoundOpenDataLocals < ActiveRecord::Migration
+  def change
+    create_view :compound_open_data_locals
+  end
+end
diff --git a/db/migrate/20201103124001_create_function_com_xvial.rb b/db/migrate/20201103124001_create_function_com_xvial.rb
new file mode 100644
index 000000000..64e9ef495
--- /dev/null
+++ b/db/migrate/20201103124001_create_function_com_xvial.rb
@@ -0,0 +1,5 @@
+class CreateFunctionComXvial < ActiveRecord::Migration
+  def change
+    create_function :com_xvial
+  end
+end
diff --git a/db/views/compound_open_data_locals_v01.sql b/db/views/compound_open_data_locals_v01.sql
new file mode 100644
index 000000000..9204c07d2
--- /dev/null
+++ b/db/views/compound_open_data_locals_v01.sql
@@ -0,0 +1,5 @@
+SELECT c.* FROM (
+SELECT null::INTEGER as x_id, null::INTEGER as x_sample_id, null::jsonb as x_data, null::timestamp as x_created_at, null::timestamp as x_updated_at,
+ null::varchar as x_inchikey, null::varchar as x_sum_formular, null::varchar as x_cano_smiles, null::varchar as x_external_label, null::varchar as x_short_label,
+ null::varchar as x_name, null::jsonb as x_stereo
+) c WHERE c.x_id is not null

From ee52bf79573b284470df8ac4ca36063ba7b8bba1 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 20 Nov 2020 18:20:17 +0100
Subject: [PATCH 002/258] add xvial and type check

---
 app/api/chemotion/search_api.rb               | 24 ++++++++++++++++---
 .../components/common/RepoXvialButton.js      |  1 +
 .../reaction_guest_list_serializer.rb         |  2 +-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index d208de5e6..9ae96c416 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -199,11 +199,29 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
               group by m.id
             ) c on c.molecule_id = molecules.id
           SQL
-          molecules = paginate(Molecule.joins(:samples).joins(xvial_count).where("samples.id in (?)", samples).includes(:tag)).select(
+          com_config = Rails.configuration.compound_opendata
+          xvial_com = <<~SQL
+            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+          SQL
+          if com_config.present?
+            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
+                          <<~SQL
+                            inner join (
+                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
+                              group by m.id
+                            ) cod on cod.molcule_id = molecules.id
+                          SQL
+                        else
+                          <<~SQL
+                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+                          SQL
+                        end
+          end
+          molecules = paginate(Molecule.joins(:samples).joins(xvial_count).joins(xvial_com).where("samples.id in (?)", samples).includes(:tag)).select(
             <<~SQL
-            molecules.*, max(samples.sample_svg_file) sample_svg_file, xvial_count
+            molecules.*, max(samples.sample_svg_file) sample_svg_file, xvial_count, xvial_com
             SQL
-          ).group('molecules.id, xvial_count').uniq
+          ).group('molecules.id, xvial_count, xvial_com').uniq
           serialized_molecules = molecules.map { |m| MoleculeGuestListSerializer.new(m).serializable_hash }
           paginated_reaction_ids = Kaminari.paginate_array(reaction_ids).page(page).per(page_size)
           serialized_reactions = Reaction.find(paginated_reaction_ids).map do |reaction|
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
index 0463219cb..4dad172a6 100644
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -15,6 +15,7 @@ const registedCompoundTooltip = (
 );
 
 const listCom = (xvialCom) => {
+  if (typeof xvialCom === 'undefined') return <br />;
   if (!xvialCom.allowed) return <br />;
   const listComData = xvialCom.hasData ? (
     xvialCom.data.map(x => (
diff --git a/app/serializers/reaction_guest_list_serializer.rb b/app/serializers/reaction_guest_list_serializer.rb
index 771e3e5f6..14f4b7a6e 100644
--- a/app/serializers/reaction_guest_list_serializer.rb
+++ b/app/serializers/reaction_guest_list_serializer.rb
@@ -15,7 +15,7 @@ def xvial_com
     com_config = Rails.configuration.compound_opendata
     return -1 unless com_config.present?
 
-    return -2 unless com_config.allowed_uids.include?(scope.current_user&.id)
+    return -2 unless com_config.allowed_uids.include?(scope&.current_user&.id)
 
     xvial_com = <<~SQL
       inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null

From bf96a8d3fca65a42950275a03ae84c2b4ce5993c Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 20 Nov 2020 17:34:33 +0100
Subject: [PATCH 003/258] readonly for nmr

---
 app/packs/src/apps/mydb/elements/details/ViewSpectra.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 8b160e9db..ea04d557c 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -422,7 +422,7 @@ class ViewSpectra extends React.Component {
       JSON.stringify(selectedIntegration),
       JSON.stringify(selectedMutiplicity),
       predict,
-      handleSubmit,
+      sample.can_update === true ? handleSubmit : this.updateROPredict,
       keepPred,
       waveLengthStr,
       cyclicvolta,
@@ -565,7 +565,7 @@ class ViewSpectra extends React.Component {
     }
 
     if (baseOps.length === 0) {
-      baseOps = [{ name: '- -', value: this.predictOp }];
+      baseOps = [{ name: 'predict', value: this.predictOp }];
     }
 
     return baseOps;

From 1b71e0d640e92470934938e13b9c9615bff6b38c Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 3 Dec 2020 10:01:09 +0100
Subject: [PATCH 004/258] trim data from orcid

---
 app/models/user.rb | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/models/user.rb b/app/models/user.rb
index ea9ab3785..08ebad3f0 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -217,8 +217,9 @@ def orcid_checker
     return if orcid.nil?
 
     result = Chemotion::OrcidService.record_person(orcid)
-    oc_given_names = result&.person&.given_names
-    oc_family_name = result&.person&.family_name
+    oc_given_names = result&.person&.given_names&.strip
+    oc_family_name = result&.person&.family_name&.strip
+
     if result.nil?
       errors.add(:orcid, ' does not exist! Please check.')
     elsif oc_given_names&.casecmp(first_name) != 0 || oc_family_name&.casecmp(last_name) != 0

From 1f753c99e3754fb5ed3dce728476e5c3a2814541 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 2 Dec 2020 11:37:37 +0100
Subject: [PATCH 005/258] refresh embargo list

---
 .../components/actions/PublicActions.js           | 11 +++++++++++
 .../javascripts/components/stores/PublicStore.js  | 15 ++++++++++++++-
 app/assets/javascripts/libHome/RepoReview.js      |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
index da7feb71e..cd4540821 100644
--- a/app/assets/javascripts/components/actions/PublicActions.js
+++ b/app/assets/javascripts/components/actions/PublicActions.js
@@ -383,6 +383,17 @@ class PublicActions {
     }
   }
 
+  getEmbargoBundle() {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+
   publishedStatics() {
     return (dispatch) => {
       PublicFetcher.publishedStatics()
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
index 362820671..718450f9b 100644
--- a/app/assets/javascripts/components/stores/PublicStore.js
+++ b/app/assets/javascripts/components/stores/PublicStore.js
@@ -61,6 +61,7 @@ class PublicStore {
       handleEmbargoMove: PublicActions.moveEmbargo,
       handleEmbargoAssign: PublicActions.assignEmbargo,
       handleRefreshPubElements: PublicActions.refreshPubElements,
+      handleRefreshEmbargoBundles: PublicActions.getEmbargoBundle,
     });
   }
 
@@ -315,6 +316,18 @@ class PublicStore {
     }
   }
 
+  handleRefreshEmbargoBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push({ value: col.id, name: col.label, label: col.label });
+      });
+    }
+    this.setState({ bundles, current_user });
+  }
+
   handleDisplayEmbargoElement(result) {
     const publication = (result.element && result.element.publication) || {};
 
@@ -353,7 +366,7 @@ class PublicStore {
     } else {
       alert(result.message);
       // refresh embargo list
-      PublicActions.fetchEmbargoBundle();
+      PublicActions.getEmbargoBundle();
       // refresh element list
       PublicActions.getElements(
         this.selectType, this.selectState, this.searchType,
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/assets/javascripts/libHome/RepoReview.js
index 1a9784b1f..d860eb8fb 100644
--- a/app/assets/javascripts/libHome/RepoReview.js
+++ b/app/assets/javascripts/libHome/RepoReview.js
@@ -87,7 +87,7 @@ export default class RepoReview extends Component {
   componentDidMount() {
     PublicStore.listen(this.onChange);
     PublicActions.getElements.defer();
-    PublicActions.fetchEmbargoBundle();
+    PublicActions.getEmbargoBundle();
   }
 
   componentWillUnmount() {

From b6e4fd00e2ab7283a6c8875a6b3f945722ab1a96 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 2 Dec 2020 00:06:42 +0100
Subject: [PATCH 006/258] add a button to redirect from db view to publication
 view

---
 .../javascripts/components/PublishCommon.js   | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/assets/javascripts/components/PublishCommon.js
index 3dc367290..5a3fad528 100644
--- a/app/assets/javascripts/components/PublishCommon.js
+++ b/app/assets/javascripts/components/PublishCommon.js
@@ -240,39 +240,40 @@ const LabelPublication = ({ element }) => {
   const time = new Date(publication.published_at || publication.doi_reg_at);
   const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
   const contributor = publication.contributors && publication.contributors.name;
-  const publishedBy = publication.creators && publication.creators[0] && publication.creators[0].name;
-  const tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
+  const publishedBy = publication.creators && publication.creators[0] &&
+    publication.creators[0].name;
+  let tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
   const schemeOnly = (element && element.publication && element.publication.taggable_data &&
     element.publication.taggable_data.scheme_only === true) || false;
-  const pubDoi = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`
-
-
-  if (publication.published_at) {
+  let openUrl = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`;
+  let btnStyle = 'default';
+  if (!publication.published_at && element.publication) {
+    const pub = element.publication;
+    let pubCreatedAt = new Date(pub.created_at);
+    pubCreatedAt = `${pubCreatedAt.getDate()}-${pubCreatedAt.getMonth() + 1}-${pubCreatedAt.getFullYear()} `;
+    tooltipText = `Submitted by ${contributor == null ? publishedBy : contributor} on ${pubCreatedAt}`;
+    openUrl = `/pid/${element.publication.id}`;
+    btnStyle = 'success';
+  }
+  if (publication.published_at || element.publication) {
     return (
       <OverlayTrigger
         placement="bottom"
         overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
         onClick={e => e.stopPropagation()}
       >
-        <Button
-          bsSize="xsmall"
-          bsStyle="default"
-          style={labelStyle}
-          target="_blank"
-          href={pubDoi}
-        >
+        <Button bsSize="xsmall" bsStyle={btnStyle} style={labelStyle} onClick={() => { window.open(openUrl, '_blank'); }}>
           <i className="fa fa-newspaper-o" aria-hidden="true" />
         </Button>
       </OverlayTrigger>
     );
-  } else {
-    return (<span />);
   }
-}
+  return <span />;
+};
 
 LabelPublication.propTypes = {
   element: PropTypes.object,
-}
+};
 
 
 const ChemotionTag = ({ tagData, firstOnly = false }) => {

From a39e4f8466798b92613f76e2f841a17cfd4a9f8d Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 1 Dec 2020 16:44:41 +0100
Subject: [PATCH 007/258] export-sample-with-https-doi

---
 app/api/helpers/report_helpers.rb | 3 +++
 lib/export/export_table.rb        | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/api/helpers/report_helpers.rb b/app/api/helpers/report_helpers.rb
index d1b8be613..72649fa73 100644
--- a/app/api/helpers/report_helpers.rb
+++ b/app/api/helpers/report_helpers.rb
@@ -293,6 +293,7 @@ def build_sql_sample_sample(columns, c_id, ids, checkedAll = false)
       , s.stereo->>'abs' as "stereo_abs", s.stereo->>'rel' as "stereo_rel"
       , #{rest_of_selections}
       , ets.taggable_data#>>'{publication,doi}' as "doi"
+      , 'https://dx.doi.org/' || (ets.taggable_data#>>'{publication,doi}') as "url"
       from (#{s_subquery}) as s_dl
       inner join samples s on s_dl.s_id = s.id #{collection_join}
       left join molecules m on s.molecule_id = m.id
@@ -493,7 +494,9 @@ def build_sql_reaction_sample(columns, c_id, ids, checkedAll = false)
         when r_s.type = 'ReactionsSolventSample' then '3 solvent'
         when r_s.type = 'ReactionsProductSample' then '4 product' end as "type"
       , ets.taggable_data#>>'{publication,doi}' as "doi"
+      , 'https://dx.doi.org/' || (ets.taggable_data#>>'{publication,doi}') as "url"
       , etr.taggable_data#>>'{publication,doi}' as "r doi"
+      , 'https://dx.doi.org/' || (etr.taggable_data#>>'{publication,doi}') as "r url"
       from (
         select
           s.id as s_id
diff --git a/lib/export/export_table.rb b/lib/export/export_table.rb
index 94aea3814..b71601182 100644
--- a/lib/export/export_table.rb
+++ b/lib/export/export_table.rb
@@ -11,7 +11,7 @@ class ExportTable
       'real amount', 'real unit', 'description', 'purity', 'solvent', 'location',
       'secret', 'short label', 'density', 'melting pt', 'boiling pt', 'created_at',
       'updated_at', 'MW', 'user_labels', 'decoupled', 'molecular mass (decoupled)', 'sum formula (decoupled)',
-      'doi'
+      'doi', 'url'
     ].freeze
 
     # allowed sample/molecule headers for sample detail level 10
@@ -41,7 +41,7 @@ class ExportTable
     ].freeze
     # allowed reaction/reaction-sample headers for reaction detail level 10
     HEADERS_REACTION_10 = HEADERS_REACTION_0 + [
-      'r ref', 'r eq', 'r doi'
+      'r ref', 'r eq', 'r doi', 'r url'
     ].freeze
 
     HEADERS_ANALYSIS_0 = [].freeze

From 830468f538b5e69f4bd4248a258f1ac8409f5a79 Mon Sep 17 00:00:00 2001
From: "Chia-Lin.Lin" <chia-lin.lin@kit.edu>
Date: Mon, 30 Nov 2020 15:00:37 +0100
Subject: [PATCH 008/258] add loading module on publication search

---
 app/assets/javascripts/components/stores/LoadingStore.js | 4 ++++
 app/assets/javascripts/libHome/RepoPubl.js               | 2 ++
 app/packs/src/libHome/Home.js                            | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/app/assets/javascripts/components/stores/LoadingStore.js b/app/assets/javascripts/components/stores/LoadingStore.js
index e812f4a03..a24a27a80 100644
--- a/app/assets/javascripts/components/stores/LoadingStore.js
+++ b/app/assets/javascripts/components/stores/LoadingStore.js
@@ -37,6 +37,10 @@ class LoadingStore {
           RepositoryActions.reviewPublish,
           PublicActions.updateComment,
           PublicActions.reviewPublish,
+          PublicActions.getSearchReactions,
+          PublicActions.getSearchMolecules,
+          PublicActions.getReactions,
+          PublicActions.getMolecules,
         ],
     });
   }
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 85ba92d52..4a83caf6e 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -18,6 +18,7 @@ import PublicFetcher from '../components/fetchers/PublicFetcher';
 import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
 import Formula from '../components/common/Formula';
+import LoadingActions from '../components/actions/LoadingActions';
 
 const xvialTag = (element, hasXvial = null) => {
   const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
@@ -203,6 +204,7 @@ export default class RepoPubl extends Component {
       selection,
       ...ps
     };
+    LoadingActions.start();
     if (isSearch) {
       switch (this.state.listType) {
         case 'reaction':
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index b61b37034..58322f170 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -29,6 +29,7 @@ import RepoHowToEditor from './RepoHowToEditor';
 import PublicStore from '../components/stores/PublicStore';
 import RepoElementDetails from './RepoElementDetails';
 import NavFooter from './NavFooter';
+import LoadingModal from '../components/common/LoadingModal';
 
 const extraHomes = () => {
   const homes = [];
@@ -141,6 +142,7 @@ class Home extends Component {
             </div>
           )
         }
+        <LoadingModal />
       </div>
     );
   }

From dc5365224ed08d5f90a9c6db03fab1453db4aa4c Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 17 Mar 2021 19:16:59 +0100
Subject: [PATCH 009/258] collection label error

---
 app/api/entities/sample_entity.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/api/entities/sample_entity.rb b/app/api/entities/sample_entity.rb
index b9be7023a..3b6fefe99 100644
--- a/app/api/entities/sample_entity.rb
+++ b/app/api/entities/sample_entity.rb
@@ -90,7 +90,7 @@ def is_repo_public
       cols = object.tag&.taggable_data['collection_labels']&.select do |c|
         c['id'] == ENV['PUBLIC_COLL_ID']&.to_i || c['id'] == ENV['SCHEME_ONLY_REACTIONS_COLL_ID']&.to_i
       end
-      cols.length > 0
+      (cols && cols.length > 0) || false
     end
 
     private

From 959fbbe06f392cd44d8ddd2767833a1061fc5e27 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 24 Mar 2021 23:43:02 +0100
Subject: [PATCH 010/258] download analysis of publication without sign in

---
 app/api/chemotion/public_api.rb               | 57 +++++++++++++++++++
 .../components/fetchers/PublicFetcher.js      | 32 ++++++++++-
 app/assets/javascripts/libHome/RepoCommon.js  | 10 +++-
 .../libHome/RepoContainerDatasets.js          |  1 +
 .../javascripts/libHome/RepoElementDetails.js |  2 +-
 .../container/ContainerDatasetField.js        | 12 +++-
 6 files changed, 105 insertions(+), 9 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index a83d70095..4485d5cb3 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -722,6 +722,63 @@ def query_ontologies(name)
         end
       end
 
+      resource :download do
+        desc 'download publication file'
+        params do
+          requires :id, type: Integer, desc: 'Id'
+        end
+        resource :attachment do
+          desc 'download publication attachment'
+          after_validation do
+            @attachment = Attachment.find_by(id: params[:id])
+            error!('404 Attachment not found', 404) unless @attachment
+            @publication = @attachment&.container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
+          end
+          get do
+            content_type 'application/octet-stream'
+            header['Content-Disposition'] = "attachment; filename=#{@attachment.filename}"
+            env['api.format'] = :binary
+            @attachment.read_file
+          end
+        end
+        resource :dataset do
+          desc 'download publication dataset as zip'
+          after_validation do
+            @container = Container.find_by(id: params[:id])
+            error!('404 Dataset not found', 404) unless @container
+            @publication = @container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
+          end
+          get do
+            content_type 'application/zip, application/octet-stream'
+            filename = URI.escape("#{@container.parent&.name.gsub(/\s+/, '_')}-#{@container.name.gsub(/\s+/, '_')}.zip")
+            header['Content-Disposition'] = "attachment; filename=#{filename}"
+            env['api.format'] = :binary
+            zip_f = Zip::OutputStream.write_buffer do |zip|
+              @container.attachments.each do |att|
+                zip.put_next_entry att.filename
+                zip.write att.read_file
+              end
+              zip.put_next_entry 'dataset_description.txt'
+              zip.write <<~DESC
+                dataset name: #{@container.name}
+                instrument: #{@container.extended_metadata.fetch('instrument', nil)}
+                description:
+                #{@container.description}
+
+                Files:
+              DESC
+              @container.attachments.each do |att|
+                zip.write "#{att.filename} #{att.checksum}\n"
+              end
+            end
+            zip_f.rewind
+            zip_f.read
+          end
+        end
+      end
+
       resource :metadata do
         desc "metadata of publication"
         params do
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
index 56c71c556..881eb62bc 100644
--- a/app/assets/javascripts/components/fetchers/PublicFetcher.js
+++ b/app/assets/javascripts/components/fetchers/PublicFetcher.js
@@ -1,5 +1,5 @@
-import 'whatwg-fetch'
-import _ from 'lodash'
+import 'whatwg-fetch';
+import _ from 'lodash';
 import Molecule from '../models/Molecule';
 import Reaction from '../models/Reaction';
 
@@ -226,4 +226,32 @@ export default class PublicFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+
+  static downloadZip(id) {
+    let fileName = 'dataset.zip';
+    return fetch(`/api/v1/public/download/dataset?id=${id}`, {
+      credentials: 'same-origin', method: 'GET',
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition');
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          fileName = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
 }
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 64e552248..235aef37e 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1749,6 +1749,7 @@ class RenderPublishAnalysesPanel extends Component {
           <b>Datasets</b>
           <RepoContainerDatasets
             container={this.props.analysis}
+            isPublic={this.props.isPublic}
           />
         </div>
       </div>
@@ -1876,6 +1877,7 @@ class RenderPublishAnalyses extends Component {
               <b>Datasets</b>
               <RepoContainerDatasets
                 container={this.props.analysis}
+                isPublic={this.props.isPublic}
               />
             </Col>
           </Panel.Body>
@@ -1896,7 +1898,8 @@ RenderPublishAnalyses.propTypes = {
     affiliation_ids: PropTypes.arrayOf(PropTypes.array),
     affiliations: PropTypes.object,
     published_at: PropTypes.string,
-  }).isRequired
+  }).isRequired,
+  isPublic: PropTypes.bool.isRequired
 };
 
 class PublishAnalysesTag extends Component {
@@ -2132,7 +2135,7 @@ ReactionTlc.propTypes = {
   bodyAttrs: PropTypes.object
 };
 
-const DatasetDetail = ({ element }) => {
+const DatasetDetail = ({ isPublished, element }) => {
   const { molecule } = element;
   molecule.tag = {
     taggable_data: { pubchem_cid: molecule.pubchem_cid }
@@ -2149,6 +2152,7 @@ const DatasetDetail = ({ element }) => {
       elementType="Sample"
       license={element.license}
       publication={element.publication}
+      isPublic={isPublished}
     />
   );
 
@@ -2166,7 +2170,7 @@ const DatasetDetail = ({ element }) => {
 };
 
 DatasetDetail.propTypes = {
-  element: PropTypes.object.isRequired,
+  element: PropTypes.object.isRequired, isPublished: PropTypes.bool.isRequired
 };
 
 const ClosePanel = ({ element }) => (
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
index ba3cbe81c..09d3a3149 100644
--- a/app/assets/javascripts/libHome/RepoContainerDatasets.js
+++ b/app/assets/javascripts/libHome/RepoContainerDatasets.js
@@ -52,6 +52,7 @@ export default class RepoContainerDatasets extends Component {
                     dataset_container={datasetContainer}
                     handleModalOpen={() => this.handleModalOpen(datasetContainer)}
                     disabled
+                    isPublic={this.props.isPublic}
                   />
                 </ListGroupItem>
               );
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
index 5be544ef2..075330b3d 100644
--- a/app/assets/javascripts/libHome/RepoElementDetails.js
+++ b/app/assets/javascripts/libHome/RepoElementDetails.js
@@ -32,7 +32,7 @@ export default class RepoElementDetails extends Component {
       return <span />;
     }
     switch (elementType) {
-      case 'dataset': return <DatasetDetail element={currentElement} />;
+      case 'dataset': return <DatasetDetail isPublished element={currentElement} />;
       case 'molecule': return (
         <RepoSampleDetails
           isPublished
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index c8e5e86ef..f32827f47 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -7,6 +7,7 @@ import DragDropItemTypes from 'src/components/DragDropItemTypes';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import { absOlsTermId } from 'chem-generic-ui';
 import { GenericDSMisType } from 'src/apps/generic/Utils';
+import PublicFetcher from './fetchers/PublicFetcher';
 
 const dataTarget = {
   canDrop(props, monitor) {
@@ -83,8 +84,10 @@ class ContainerDatasetField extends Component {
   }
 
   render() {
-    const { connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind,
-      handleModalOpen, disabled } = this.props;
+    const {connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
+      handleModalOpen, disabled} = this.props;
+    const downloadClick = isPublic ? () => PublicFetcher.downloadZip(dataset_container.id) : () => AttachmentFetcher.downloadZip(dataset_container.id);
+
     if (dataset_container.is_deleted) {
       return (
         <div><strike>{dataset_container.name}</strike>
@@ -118,7 +121,7 @@ class ContainerDatasetField extends Component {
           <ButtonToolbar className="pull-right">
             {gds_download}
             <OverlayTrigger placement="top" overlay={<Tooltip id="download data">download data + metadata</Tooltip>}>
-              <Button bsSize="xsmall" bsStyle="info" onClick={() => AttachmentFetcher.downloadZip(dataset_container.id)}>
+              <Button bsSize="xsmall" bsStyle="info" onClick={downloadClick}>
                 <i className="fa fa-download"></i>
               </Button>
             </OverlayTrigger>
@@ -136,4 +139,7 @@ export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DA
 ContainerDatasetField.propTypes = {
   isOver: PropTypes.bool.isRequired,
   canDrop: PropTypes.bool.isRequired,
+  isPublic: PropTypes.bool,
 };
+
+ContainerDatasetField.defaultProps = { isPublic: false };

From f960b974db5d62372ab4fca61de1cf378193cf17 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 29 Mar 2021 15:40:58 +0200
Subject: [PATCH 011/258] view sprectra of products

---
 .../src/apps/mydb/elements/details/ViewSpectra.js     |  5 +++--
 .../src/components/managingActions/ManagingActions.js | 11 +++++------
 app/packs/src/stores/alt/stores/UIStore.js            |  6 +++---
 app/packs/src/utilities/routesUtils.js                |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index ea04d557c..5eee5eca9 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -194,13 +194,14 @@ class ViewSpectra extends React.Component {
     const sis = spcInfos.filter(x => x.idx === spcIdx);
     const si = sis.length > 0 ? sis[0] : spcInfos[0];
 
-    const ops = sample.analysesContainers().map((ae) => {
+    const opsTmp = sample.analysesContainers().map((ae) => {
       if (ae.id !== si.idAe) return null;
       return ae.children.map((ai) => {
         if (ai.id !== si.idAi) return null;
         return ai.extended_metadata.content.ops; // eslint-disable-line
       }).filter(r => r !== null);
-    }).filter(r => r !== null)[0][0];
+    }).filter(r => r !== null);
+    const ops = opsTmp && opsTmp[0] && opsTmp[0][0];
     return ops;
   }
 
diff --git a/app/packs/src/components/managingActions/ManagingActions.js b/app/packs/src/components/managingActions/ManagingActions.js
index 0343bb9fa..2a5cc14cc 100644
--- a/app/packs/src/components/managingActions/ManagingActions.js
+++ b/app/packs/src/components/managingActions/ManagingActions.js
@@ -139,12 +139,11 @@ export default class ManagingActions extends React.Component {
 
   collectionChanged(state) {
     const { currentCollection } = state;
-    if (typeof currentCollection === 'undefined' || currentCollection == null) {
-      return false;
-    }
-    const { id, is_sync_to_me } = currentCollection;
-    return this.state.currentCollection.id !== id ||
-      this.state.currentCollection.is_sync_to_me !== is_sync_to_me;
+    if (typeof this.state.currentCollection === 'undefined' || this.state.currentCollection == null
+    || typeof currentCollection === 'undefined' || currentCollection == null) return false;
+
+    return this.state.currentCollection.id !== currentCollection.id ||
+      this.state.currentCollection.is_sync_to_me !== currentCollection.is_sync_to_me;
   }
 
   checkUIState(state) {
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
index 9c20483da..ede7fe9a2 100644
--- a/app/packs/src/stores/alt/stores/UIStore.js
+++ b/app/packs/src/stores/alt/stores/UIStore.js
@@ -282,7 +282,7 @@ class UIStore {
 
   handleSelectCollection(collection, hasChanged = false) {
     const state = this.state;
-    const isSync = collection.is_sync_to_me ? true : false;
+    const isSync = collection && collection.is_sync_to_me ? true : false;
     const { filterCreatedAt, fromDate, toDate, productOnly } = state;
 
     if (!hasChanged) {
@@ -292,13 +292,13 @@ class UIStore {
       hasChanged = hasChanged || state.currentSearchSelection != null;
     }
 
-    if (collection['clearSearch']) {
+    if (collection && collection['clearSearch']){
       this.handleClearSearchSelection();
       hasChanged = true;
       collection['clearSearch'] = undefined;
     }
 
-    if (hasChanged && !collection.noFetch) {
+    if(hasChanged && collection && !collection.noFetch) {
       this.state.isSync = isSync;
       this.state.currentCollection = collection;
       const per_page = state.number_of_results;
diff --git a/app/packs/src/utilities/routesUtils.js b/app/packs/src/utilities/routesUtils.js
index 48ded1da4..7df91e801 100644
--- a/app/packs/src/utilities/routesUtils.js
+++ b/app/packs/src/utilities/routesUtils.js
@@ -26,7 +26,7 @@ const collectionShow = (e) => {
   }
 
   collectionPromise.then((result) => {
-    const collection = result.collection;
+    const collection = result && result.collection;
 
     if (currentSearchSelection) {
       UIActions.selectCollectionWithoutUpdating(collection);

From 78bb8cd66308841d1d09a75b7e1366936b04ba9e Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 29 Mar 2021 14:07:17 +0200
Subject: [PATCH 012/258] orig. is not required

---
 .../components/common/RepoSpectra.js          | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/components/common/RepoSpectra.js b/app/assets/javascripts/components/common/RepoSpectra.js
index 20da842fe..0922cbf56 100644
--- a/app/assets/javascripts/components/common/RepoSpectra.js
+++ b/app/assets/javascripts/components/common/RepoSpectra.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
-import { BuildSpcInfos, JcampIds } from '../utils/SpectraHelper';
+import { BuildSpcInfos } from '../utils/SpectraHelper';
 import SpectraActions from '../actions/SpectraActions';
 import ViewSpectra from '../ViewSpectra';
 import NotificationActions from '../actions/NotificationActions';
@@ -22,21 +22,15 @@ const RepoSpectraBtn = (props) => {
       SpectraActions.LoadSpectra.defer(spcInfos);
     }
   };
-  const jcampIds = JcampIds(analysis);
-  const hasJcamp = jcampIds.orig.length > 0;
   return (
     <span>
-      <OverlayTrigger
-        placement="top"
-        delayShow={500}
-        overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}
-      >
+      <OverlayTrigger placement="top" delayShow={500} overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}>
         <Button
           bsSize="xsmall"
           className="button-right"
           onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
           onClick={toggleSpectraModal}
-          disabled={!hasJcamp || !(spcInfos.length > 0)}
+          disabled={!(spcInfos.length > 0)}
         >
           <i className="fa fa-area-chart" aria-hidden="true" />
         </Button>
@@ -46,12 +40,7 @@ const RepoSpectraBtn = (props) => {
   );
 };
 
-RepoSpectraBtn.propTypes = {
-  element: PropTypes.object,
-  analysis: PropTypes.object,
-  isLogin: PropTypes.bool
-};
-
+RepoSpectraBtn.propTypes = { element: PropTypes.object, analysis: PropTypes.object, isLogin: PropTypes.bool };
 RepoSpectraBtn.defaultProps = { isLogin: false };
 
 export default RepoSpectraBtn;

From 654515d921191c854f2939ae68569040920cb899 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 31 Mar 2021 11:37:47 +0200
Subject: [PATCH 013/258] export embargo collections

---
 app/api/chemotion/collection_api.rb           | 24 ++++++---
 .../contextActions/ModalExportCollection.js   | 54 +++++++++++++++----
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index 33a686a29..a1fa7ab08 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -459,19 +459,18 @@ class CollectionAPI < Grape::API
       namespace :exports do
         desc "Create export job"
         params do
-          requires :collections, type: Array[Integer]
-          requires :format, type: Symbol, values: %i[json zip udm]
+          optional :collections, type: Array[Integer]
+          optional :sync_collections, type: Array[Integer]
+          requires :format, type: Symbol, values: [:json, :zip, :udm]
           requires :nested, type: Boolean
         end
 
         post do
-          collection_ids = params[:collections].uniq
+          collection_ids = params[:collections]&.uniq
+          sync_col_ids = params[:sync_collections]&.uniq
           nested = params[:nested] == true
 
-          if collection_ids.empty?
-            # no collection was given, export all collections for this user
-            collection_ids = Collection.belongs_to_or_shared_by(current_user.id, current_user.group_ids).pluck(:id)
-          else
+          if collection_ids.present?
             # check if the user is allowed to export these collections
             collection_ids.each do |collection_id|
               collection = Collection.belongs_to_or_shared_by(current_user.id, current_user.group_ids).find_by(id: collection_id)
@@ -482,7 +481,16 @@ class CollectionAPI < Grape::API
               error!('401 Unauthorized', 401) unless collection
             end
           end
-          ExportCollectionsJob.perform_now(collection_ids, params[:format].to_s, nested, current_user.id)
+
+          if sync_col_ids.present?
+            sync_col_ids.each do |sync_col_id|
+              sync_col = SyncCollectionsUser.find_by(id: sync_col_id, user_id: current_user.id)
+              col = Collection.find(sync_col.collection_id) if sync_col.present?
+              collection_ids << sync_col.collection_id if col.present? && col.parent.present? && ['My Published Elements', 'Embargoed Publications'].include?(col.parent&.label)
+            end
+          end
+
+          ExportCollectionsJob.perform_later(collection_ids, params[:format].to_s, nested, current_user.id) unless collection_ids.empty?
           status 204
         end
       end
diff --git a/app/packs/src/components/contextActions/ModalExportCollection.js b/app/packs/src/components/contextActions/ModalExportCollection.js
index b27198260..6b05cfdfd 100644
--- a/app/packs/src/components/contextActions/ModalExportCollection.js
+++ b/app/packs/src/components/contextActions/ModalExportCollection.js
@@ -13,7 +13,17 @@ export default class ModalExportCollection extends React.Component {
     // this.gatherCheckboxes(collecState.sharedRoots, checkboxes)
     // this.gatherCheckboxes(collecState.remoteRoots, checkboxes)
     collecState.lockedRoots = collecState.lockedRoots.filter(c => c.label !== 'All');
-    this.gatherCheckboxes(collecState.lockedRoots, checkboxes)
+
+    let embargoRoots = [];
+    // eslint-disable-next-line no-unused-expressions
+    collecState.syncInRoots && collecState.syncInRoots.forEach((root) => {
+      const cols = root.children.filter(c => c.label == 'My Published Elements' || c.label == 'Embargoed Publications');
+      embargoRoots = embargoRoots.concat(cols);
+    });
+
+    collecState.syncInRoots = embargoRoots;
+    this.gatherCheckboxes(collecState.lockedRoots, checkboxes);
+    this.gatherCheckboxes(collecState.syncInRoots, checkboxes, true);
 
     this.state = {
       processing: false,
@@ -21,6 +31,7 @@ export default class ModalExportCollection extends React.Component {
       // sharedRoots: collecState.sharedRoots,
       // remoteRoots: collecState.remoteRoots,
       lockedRoots: collecState.lockedRoots,
+      syncInRoots: collecState.syncInRoots,
       checkboxes: checkboxes
     }
 
@@ -29,10 +40,11 @@ export default class ModalExportCollection extends React.Component {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  gatherCheckboxes(roots, checkboxes) {
+  gatherCheckboxes(roots, checkboxes, isSync = false) {
     if (Array.isArray(roots) && roots.length > 0) {
       roots.map((root, index) => {
-        checkboxes[root.id] = false;
+        const rootId = isSync === true ? `S_${root.id}` : root.id;
+        checkboxes[rootId] = false;
         this.gatherCheckboxes(root.children, checkboxes)
       })
     }
@@ -72,12 +84,17 @@ export default class ModalExportCollection extends React.Component {
     this.setState({ processing: true });
 
     const collections = [];
+    const sync_collections = [];
     Object.keys(this.state.checkboxes).map((key) => {
-      if (this.state.checkboxes[key]) { collections.push(key); }
+      // eslint-disable-next-line no-restricted-globals
+      if (!isNaN(key) && this.state.checkboxes[key]) { collections.push(key); }
+      if (isNaN(key) && key.startsWith('S_') && this.state.checkboxes[key]) { sync_collections.push(key.substr(2)); }
     });
 
     const params = {
       collections,
+      sync_collections,
+      isSync: false,
       format: 'zip',
       nested: false
     };
@@ -115,6 +132,19 @@ export default class ModalExportCollection extends React.Component {
     }
   }
 
+  renderEmbargoCollections(label, key) {
+    let roots = this.state[key];
+
+    if (Array.isArray(roots) && roots.length > 0) {
+      return (
+        <div>
+          <h4>{label}</h4>
+          {this.renderUserSubtrees(roots, true)}
+        </div>
+      )
+    }
+  }
+
   renderSharedCollections(label, key) {
     let roots = this.state[key]
 
@@ -128,7 +158,7 @@ export default class ModalExportCollection extends React.Component {
     }
   }
 
-  renderUserSubtrees(roots) {
+  renderUserSubtrees(roots, isSync= false) {
     if (Array.isArray(roots) && roots.length > 0) {
 
       let nodes = roots.map((root, index) => {
@@ -145,7 +175,7 @@ export default class ModalExportCollection extends React.Component {
         return (
           <li key={index}>
             <h6>{label}</h6>
-            {this.renderSubtrees(root.children)}
+            {this.renderSubtrees(root.children, isSync)}
           </li>
         )
       })
@@ -158,16 +188,17 @@ export default class ModalExportCollection extends React.Component {
     }
   }
 
-  renderSubtrees(roots) {
+  renderSubtrees(roots, isSync=false) {
     if (Array.isArray(roots) && roots.length > 0) {
       let nodes = roots.map((root, index) => {
+        const rootId = isSync==true ? `S_${root.id}` : root.id;
         return (
           <li key={index}>
             <input className="common-checkbox" type="checkbox"
-              id={"export-collection-" + root.id}
-              value={root.id}
-              onChange={this.handleCheckboxChange}
-              checked={this.isChecked(root.id)} />
+                   id={"export-collection-" + root.id}
+                   value={rootId}
+                   onChange={this.handleCheckboxChange}
+                   checked={this.isChecked(rootId)} />
             <label className="g-marginLeft--10" htmlFor={"export-collection-" + root.id}>
               {root.label}
             </label>
@@ -224,6 +255,7 @@ export default class ModalExportCollection extends React.Component {
     return (
       <div className="export-collections-modal">
         {this.renderCollections('Global collections', 'lockedRoots')}
+        {this.renderEmbargoCollections('Embargo collections', 'syncInRoots')}
         {/* {this.renderCollections('My collections', 'unsharedRoots')} */}
         {/* {this.renderSharedCollections('My shared collections', 'sharedRoots')} */}
         {/* {this.renderSharedCollections('Shared with me', 'remoteRoots')} */}

From 58881dfcafb40f206e0b83b8d163aa426766e36b Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 1 Apr 2021 09:57:06 +0200
Subject: [PATCH 014/258] display 0 as empty

---
 app/assets/javascripts/libHome/RepoCommon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 235aef37e..8593bb0a7 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1253,7 +1253,7 @@ const ReactionTlc = ({
             </Row>
             <Row style={{ paddingBottom: '8px' }}>
               <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.rf_value || ''}</Col>
+              <Col sm={10} md={10} lg={10}>{reaction.rf_value && reaction.rf_value !== '0' ? reaction.rf_value : ''}</Col>
             </Row>
             <Row style={{ paddingBottom: '8px' }}>
               <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>

From c18112aa915fa2cc9b59b46219e84ba317d60ea2 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 7 Apr 2021 16:14:45 +0200
Subject: [PATCH 015/258] search embargo bundle number

---
 app/api/chemotion/search_api.rb               | 26 ++++++++++++++++++-
 app/api/chemotion/suggestion_api.rb           | 10 +++++--
 app/models/collection.rb                      | 11 ++++++++
 .../navigation/search/AutoCompleteInput.js    |  3 ++-
 .../components/navigation/search/Search.js    | 17 +++++++-----
 5 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 9ae96c416..45bcd4b6c 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -20,7 +20,7 @@ class SearchAPI < Grape::API
             # polymer_type
           #]
           optional :elementType, type: String, values: %w[
-            All Samples Reactions Wellplates Screens all samples reactions wellplates screens elements
+            All Samples Reactions Wellplates Screens all samples reactions wellplates screens elements embargo
           ]
           optional :molfile, type: String
           optional :search_type, type: String, values: %w[similar sub]
@@ -639,6 +639,30 @@ def elements_by_scope(scope, collection_id = @c_id)
           )
         end
       end
+
+      namespace :embargo do
+        desc "Return samples and reactions by embargo"
+        params do
+          use :search_params
+        end
+        post do
+          col_id = Collection.find_by(label: params[:selection][:name], is_synchronized: true)&.id
+
+          return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless col_id.present?
+
+          scope = Sample.by_collection_id(col_id)
+          return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless scope
+
+          return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless ElementsPolicy.new(current_user, scope).read?
+
+          elements_ids = elements_by_scope(scope, col_id)
+          serialization_by_elements_and_page(
+            elements_ids,
+            params[:page],
+            params[:molecule_sort]
+          )
+        end
+      end
     end
   end
 end
diff --git a/app/api/chemotion/suggestion_api.rb b/app/api/chemotion/suggestion_api.rb
index 3de666465..b0ab21e71 100644
--- a/app/api/chemotion/suggestion_api.rb
+++ b/app/api/chemotion/suggestion_api.rb
@@ -206,8 +206,14 @@ def search_possibilities_by_type_user_and_collection(type)
         end
         get do
           params[:element_type]
-          search_possibilities = search_possibilities_by_type_user_and_collection(params[:element_type])
-          { suggestions: search_possibilities_to_suggestions(search_possibilities) }
+          if params[:element_type] == 'embargo'
+            cols = Collection.all_embargos(current_user.id).where("label like '#{params[:query]}%'").order(:label)
+            suggestions = cols.map { |col| { name: col.label, search_by_method: 'embargo' } }
+            { suggestions: suggestions }
+          else
+            search_possibilities = search_possibilities_by_type_user_and_collection(params[:element_type])
+            { suggestions: search_possibilities_to_suggestions(search_possibilities) }
+          end
         end
       end
     end
diff --git a/app/models/collection.rb b/app/models/collection.rb
index 8623ecbea..c3d273542 100644
--- a/app/models/collection.rb
+++ b/app/models/collection.rb
@@ -186,4 +186,15 @@ def self.reject_shared(user_id, collection_id)
     Collection.where(id: collection_id, user_id: user_id, is_shared: true)
               .each(&:destroy)
   end
+
+  def self.all_embargos(user_id)
+    Collection.where(
+      <<~SQL
+        id in (
+          select c2.id from collections c2 where c2.ancestry in (select c.id::text from collections c where c.label = 'Published Elements') union
+          select co.id from collections co where co.ancestry in (select c.id::text from collections c, sync_collections_users scu
+          where c.label = 'Embargoed Publications' and scu.collection_id = c.id and scu.user_id = #{user_id}))
+      SQL
+    )
+  end
 end
diff --git a/app/packs/src/components/navigation/search/AutoCompleteInput.js b/app/packs/src/components/navigation/search/AutoCompleteInput.js
index b7a857535..390802e6a 100644
--- a/app/packs/src/components/navigation/search/AutoCompleteInput.js
+++ b/app/packs/src/components/navigation/search/AutoCompleteInput.js
@@ -297,7 +297,8 @@ export default class AutoCompleteInput extends React.Component {
       cas: { icon: 'icon-sample', label: 'cas' },
       requirements : {icon: 'icon-screen', label: 'Requirement'},
       conditions : {icon: 'icon-screen', label: 'Condition'},
-      element_short_label: {icon: 'icon-element', label: 'Element Short Label'}
+      element_short_label: {icon: 'icon-element', label: 'Element Short Label'},
+      embargo : {icon: 'fa fa-object-group', label: 'Embargo Bundle Number'}
     }
     if(suggestions) {
       return (
diff --git a/app/packs/src/components/navigation/search/Search.js b/app/packs/src/components/navigation/search/Search.js
index 526e5fdfe..a47f407d2 100644
--- a/app/packs/src/components/navigation/search/Search.js
+++ b/app/packs/src/components/navigation/search/Search.js
@@ -193,6 +193,12 @@ export default class Search extends React.Component {
         Advanced Search
       </MenuItem>
     );
+    menu.push(<MenuItem key="divider" divider />);
+    menu.push(
+      <MenuItem key="embargo" onSelect={() => this.handleElementSelection('embargo')}>
+        Embargo Bundle#
+      </MenuItem>
+    );
 
     menu.push(<MenuItem key="divider-generic" divider />);
 
@@ -273,18 +279,15 @@ export default class Search extends React.Component {
       }
     };
 
-    const searchIcon = (elementType) => {
-      if (elementType === 'all') return 'All';
-      if (['samples', 'reactions', 'screens', 'wellplates'].includes(elementType.toLowerCase())) return (<i className={`icon-${elementType.toLowerCase().slice(0, -1)}`} />);
-      if (this.state.genericEl) return (<i className={this.state.genericEl.icon_name} />);
-      return elementType;
-    }
+    let title = (<i className={`icon-${this.state.elementType.toLowerCase().slice(0, -1)}`} />);
+    if (this.state.elementType === 'all') title = 'All';
+    if (this.state.elementType === 'embargo') title = (<i className="fa fa-object-group" />);
 
     const innerDropdown = (
       <DropdownButton
         className={customClass}
         id="search-inner-dropdown"
-        title={searchIcon(this.state.elementType)}
+        title={title}
         style={{ width: '50px' }}
       >
         {this.renderMenuItems()}

From fa6f6ce80b07d2d67744f837f3416ff796ff8961 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 12 Apr 2021 11:45:29 +0200
Subject: [PATCH 016/258] display name on review page

---
 app/api/helpers/repository_helpers.rb         |   2 +-
 app/assets/javascripts/libHome/RepoCommon.js  | 100 ++++++++----------
 .../libHome/RepoReactionDetails.js            |   2 +-
 3 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index e5be04f9e..fe94421ab 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -39,7 +39,7 @@ def get_reaction_table(id)
       <<~SQL
       reactions_samples.id,
       molecules.iupac_name, molecules.sum_formular,
-      molecules.molecular_weight,
+      molecules.molecular_weight, samples.name,
       samples.real_amount_value, samples.real_amount_unit,
       samples.target_amount_value, samples.target_amount_unit,
       samples.purity, samples.density, samples.external_label,
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 8593bb0a7..04da4f54e 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -110,22 +110,20 @@ const AuthorTitle = (authorIds) => {
     return 'Author:';
   }
   return '';
-}
+};
 
 const NewsroomTemplate = {
   title: '', content: {}, article: []
 };
 
-const HomeFeature = (props) => {
-  return (
-    <div className="feature-block">
-      <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
-      <p>
-        {props.intro}
-      </p>
-    </div>
-  );
-};
+const HomeFeature = props => (
+  <div className="feature-block">
+    <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
+    <p>
+      {props.intro}
+    </p>
+  </div>
+);
 
 HomeFeature.propTypes = {
   fa: PropTypes.string.isRequired,
@@ -411,21 +409,19 @@ EmbargoCom.defaultProps = {
   cc0Deed: { consent1: false, consent2: false }
 };
 
-const PublishTypeAs = (props) => {
-  return (
-    <div style={{ display: 'inline' }}>
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
-        <i className="fa fa-question-circle" aria-hidden="true" />
-      </OverlayTrigger>&nbsp;
-      <DropdownButtonSelection
-        options={props.options}
-        selected={props.selected}
-        placeholder="Select publication type..."
-        onSelect={e => props.onChange(e)}
-      />
-    </div>
-  );
-};
+const PublishTypeAs = props => (
+  <div style={{ display: 'inline' }}>
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
+      <i className="fa fa-question-circle" aria-hidden="true" />
+    </OverlayTrigger>&nbsp;
+    <DropdownButtonSelection
+      options={props.options}
+      selected={props.selected}
+      placeholder="Select publication type..."
+      onSelect={e => props.onChange(e)}
+    />
+  </div>
+);
 
 PublishTypeAs.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string),
@@ -546,18 +542,16 @@ const DateFormatDMYTime = (dt) => {
   }
 };
 
-const EditorTips = () => {
-  return (
-    <ol>
-      {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
-      <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
-      <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
-    </ol>
-  );
-};
+const EditorTips = () => (
+  <ol>
+    {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
+    <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
+    <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
+  </ol>
+);
 
 const BackSoonPage = () => {
   return (
@@ -1046,7 +1040,7 @@ ToggleIndicator.defaultProps = {
 
 
 const ReactionTable = ({
-  reaction, toggle, show, bodyAttrs, isPublic = true
+  reaction, toggle, show, bodyAttrs, canComment, isPublic = true
 }) => {
   let schemes = [];
   let sumSolvents = 0.0;
@@ -1056,25 +1050,25 @@ const ReactionTable = ({
     reaction.publication.taggable_data.scheme_only === true) || false;
 
   if (isPublic) {
-    schemes = reaction.schemes;
+    ({ schemes } = reaction);
   } else {
     reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
+      const ns = new Sample(s);
       ns.mat_group = 'starting_materials';
       schemes.push(ns);
     });
     reaction.reactants.map((s) => {
-      const ns = new Sample(s)
+      const ns = new Sample(s);
       ns.mat_group = 'reactants';
       schemes.push(ns);
     });
     reaction.products.map((s) => {
-      const ns = new Sample(s)
+      const ns = new Sample(s);
       ns.mat_group = 'products';
       schemes.push(ns);
     });
     reaction.solvents.map((s) => {
-      const ns = new Sample(s)
+      const ns = new Sample(s);
       sumSolvents += ns.amount_l;
       ns.mat_group = 'solvents';
       schemes.push(ns);
@@ -1090,16 +1084,16 @@ const ReactionTable = ({
     switch (s.mat_group) {
       case 'products':
         if (schemeOnly === true) {
-          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`
+          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`;
         } else {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
         }
         break;
       case 'solvents':
         if (isPublic) {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
         } else {
-          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`
+          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`;
         }
         break;
       default:
@@ -1107,17 +1101,17 @@ const ReactionTable = ({
     }
     return (
       val
-    )
-  }
+    );
+  };
 
   const rows = (samples) => {
     let currentType = '';
-
     return (
       typeof samples !== 'undefined'
         ? samples.map((sample, i) => {
           const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
           let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          label = canComment ? (label || sample.name) : label;
           if (sample.mat_group === 'solvents') label = sample.external_label;
           let title = null;
           if (currentType !== sample.mat_group) {
@@ -1140,7 +1134,7 @@ const ReactionTable = ({
           );
         })
         : null
-    )
+    );
   };
 
   const table = dataRows => (
@@ -1174,7 +1168,7 @@ const ReactionTable = ({
       </Panel>
     </span>
   );
-}
+};
 
 const ReactionRinChiKey = ({
   reaction, toggle, show, bodyAttrs
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 6e5aec189..3e2fba1d6 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -251,6 +251,7 @@ export default class RepoReactionDetails extends Component {
                 show={showScheme}
                 isPublic
                 bodyAttrs={bodyAttrs}
+                canComment={canComment}
               />
             </Col>
           </Row>
@@ -392,7 +393,6 @@ export default class RepoReactionDetails extends Component {
       canClose,
     } = this.props;
     let { buttons } = this.props;
-
     if (typeof (reaction) === 'undefined' || !reaction) {
       return <div />;
     }

From 3323bc5f24c6da49923fbda77f00e2ff784ca7a8 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 8 Apr 2021 16:00:39 +0200
Subject: [PATCH 017/258] embargo in reaction list

---
 app/assets/javascripts/libHome/RepoPubl.js        | 3 ++-
 app/assets/stylesheets/repo_home.scss             | 2 +-
 app/serializers/reaction_guest_list_serializer.rb | 9 ++++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 4a83caf6e..f4987558a 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -19,6 +19,7 @@ import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
 import Formula from '../components/common/Formula';
 import LoadingActions from '../components/actions/LoadingActions';
+import { ElStateLabel } from './RepoCommon';
 
 const xvialTag = (element, hasXvial = null) => {
   const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
@@ -68,7 +69,7 @@ const renderReaction = (element, currentElement, isPubElement) => {
         </div>
       </td>
       <td>
-        {xvialTag(element)}
+        {xvialTag(element)}&nbsp;{ElStateLabel(element.embargo)}
       </td>
     </tr>
   );
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 8cbc491e7..1eb4a2dc8 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -100,7 +100,7 @@ $bs-successcolor: #5cb85c;
 }
 
 .xvial-com {
-  display: flex;
+  display: inline-flex;
   border: 2px solid $bs-primarycolor;
 }
 
diff --git a/app/serializers/reaction_guest_list_serializer.rb b/app/serializers/reaction_guest_list_serializer.rb
index 14f4b7a6e..7386e0df8 100644
--- a/app/serializers/reaction_guest_list_serializer.rb
+++ b/app/serializers/reaction_guest_list_serializer.rb
@@ -2,7 +2,7 @@
 
 # reaction list class for guest
 class ReactionGuestListSerializer < ActiveModel::Serializer
-  attributes :id, :name, :reaction_svg_file, :tag, :xvial_count, :xvial_com
+  attributes :id, :name, :reaction_svg_file, :tag, :xvial_count, :xvial_com, :embargo
 
   def xvial_count
     xvial_count = <<~SQL
@@ -24,4 +24,11 @@ def xvial_com
     SQL
     ReactionsSample.joins(xvial_com).where(type: 'ReactionsProductSample', reaction_id: id).length
   end
+
+  def embargo
+    embargo = <<~SQL
+      inner join collections_reactions cr on collections.id = cr.collection_id and cr.reaction_id = #{id}
+    SQL
+    Collection.joins(embargo).where("ancestry in (select c.id::text from collections c where c.label = 'Published Elements')")&.first&.label
+  end
 end

From 27d784176dfbd7848908a681260351196b86edd1 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 3 Dec 2020 15:18:50 +0100
Subject: [PATCH 018/258] search by authors or contributors

---
 app/api/chemotion/public_api.rb               |  6 +-
 app/api/chemotion/search_api.rb               | 67 ++++++++-----
 app/assets/stylesheets/common.scss            |  5 +
 .../src/components/navigation/Navigation.js   |  3 +-
 .../navigation/search/SearchFilter.js         | 93 ++++++++++++++++++-
 5 files changed, 145 insertions(+), 29 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 4485d5cb3..9f6bb1648 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -116,13 +116,13 @@ def query_ontologies(name)
         desc 'Find top 3 matched advanced values'
         params do
           requires :name, type: String, allow_blank: false, regexp: /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/
-          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Ontologies]
+          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Contributors Ontologies]
         end
         get do
           result = case params[:adv_type]
-                   when 'Authors'
+                   when 'Authors', 'Contributors'
                      query_authors(params[:name])
-                   when 'Ontologies'
+                    when 'Ontologies'
                      query_ontologies(params[:name])
                    else
                      []
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 45bcd4b6c..70f1ae5d8 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -395,33 +395,58 @@ def search_elements(c_id = @c_id, dl = @dl)
                   end
                 end
 
-        if search_method == 'advanced' && molecule_sort == false
-          arg_value_str = adv_params.first['value'].split(/(\r)?\n/).map(&:strip)
-                                    .select{ |s| !s.empty? }.join(',')
-          return scope.order(Arel.sql(
-            "position(','||(#{adv_params.first['field']['column']}::text)||',' in ','||(#{ActiveRecord::Base.connection.quote(arg_value_str)}::text)||',')"
-          ))
-        elsif search_method == 'advanced' && molecule_sort == true
-          return scope.order('samples.updated_at DESC')
-        elsif search_method != 'advanced' && molecule_sort == true
-          return scope.includes(:molecule)
-                      .joins(:molecule)
-                      .order(Arel.sql("LENGTH(SUBSTRING(molecules.sum_formular, 'C\\d+'))"))
-                      .order('molecules.sum_formular')
-        elsif search_by_method.start_with?("element_short_label_")
-          klass = Labimotion::ElementKlass.find_by(name: search_by_method.sub("element_short_label_",""))
-          return Labimotion::Element.by_collection_id(c_id).by_klass_id_short_label(klass.id, arg)
+        if ((c_id = Collection.public_collection_id) &&
+          (params[:selection] && params[:selection][:authors_params] && params[:selection][:authors_params][:type] && params[:selection][:authors_params][:value] && params[:selection][:authors_params][:value].length > 0))
+          if params[:selection][:authors_params][:type] == 'Authors'
+            adv_search = <<~SQL
+              INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
+              and author_id in ('#{params[:selection][:authors_params][:value].join("','")}')
+            SQL
+          elsif params[:selection][:authors_params][:type] == 'Contributors'
+            adv_search = <<~SQL
+              INNER JOIN publications pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
+              and published_by in ('#{params[:selection][:authors_params][:value].join("','")}')
+            SQL
+          end
         end
-        scope
+
+        if adv_params && adv_params.length > 0
+          if search_method == 'advanced' && molecule_sort == false
+            arg_value_str = adv_params.first['value'].split(/(\r)?\n|,/).map(&:strip)
+                                      .select{ |s| !s.empty? }.join(',')
+            return scope.order(
+              "position(','||(#{adv_params.first['field']['column']}::text)||',' in ','||(#{ActiveRecord::Base.connection.quote(arg_value_str)}::text)||',')"
+            )
+          elsif search_method == 'advanced' && molecule_sort == true
+            return scope.order('samples.updated_at DESC')
+          elsif search_method != 'advanced' && molecule_sort == true
+            return scope.includes(:molecule)
+                        .joins(:molecule)
+                        .order(
+                          "LENGTH(SUBSTRING(molecules.sum_formular, 'C\\d+'))"
+                        ).order('molecules.sum_formular')
+          end
+        end
+
+        return scope.joins(adv_search) unless adv_search.nil?
+        return scope
       end
 
       def elements_by_scope(scope, collection_id = @c_id)
         elements = {}
         user_samples = Sample.by_collection_id(collection_id)
-        user_reactions = Reaction.by_collection_id(collection_id)
-        user_wellplates = Wellplate.by_collection_id(collection_id)
-        user_screens = Screen.by_collection_id(collection_id)
-        user_elements = Labimotion::Element.by_collection_id(collection_id)
+          .includes(molecule: :tag)
+        user_reactions = Reaction.by_collection_id(collection_id).includes(
+          :literatures, :tag,
+          # reactions_starting_material_samples: :sample,
+          # reactions_solvent_samples: :sample,
+          # reactions_reactant_samples: :sample,
+          reactions_product_samples: :sample,
+        )
+        # user_wellplates = Wellplate.by_collection_id(collection_id).includes(
+        #   wells: :sample
+        # )
+        # user_screens = Screen.by_collection_id(collection_id)
 
         case scope&.first
         when Sample
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ad583b08b..d56150496 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -142,6 +142,11 @@ $color-required: #d9534f;
     margin-left: 5px;
   }
 
+  .field-select-full {
+    margin: 5px;
+    flex: 100%;
+  }
+
   .field-select {
     margin: 5px;
     flex: 0 0 205px;
diff --git a/app/packs/src/components/navigation/Navigation.js b/app/packs/src/components/navigation/Navigation.js
index 6e22c833d..8fb17468c 100644
--- a/app/packs/src/components/navigation/Navigation.js
+++ b/app/packs/src/components/navigation/Navigation.js
@@ -100,11 +100,12 @@ export default class Navigation extends React.Component {
     UIActions.updateModalProps(modalProps);
   }
 
-  advancedSearch(filters) {
+  advancedSearch(filters, authors) {
     const uiState = UIStore.getState();
     const selection = {
       elementType: 'all',
       advanced_params: filters,
+      authors_params: authors,
       search_by_method: 'advanced',
       page_size: uiState.number_of_results
     };
diff --git a/app/packs/src/components/navigation/search/SearchFilter.js b/app/packs/src/components/navigation/search/SearchFilter.js
index 236f5808e..8211efe63 100644
--- a/app/packs/src/components/navigation/search/SearchFilter.js
+++ b/app/packs/src/components/navigation/search/SearchFilter.js
@@ -1,7 +1,8 @@
 import React from 'react'
-import {Button, FormControl} from 'react-bootstrap'
+import {Button, FormControl, ButtonGroup, OverlayTrigger, Tooltip} from 'react-bootstrap'
 import Select from 'react-select'
 import UIActions from 'src/stores/alt/actions/UIActions';
+import PublicFetcher from '../fetchers/PublicFetcher';
 
 export default class SearchFilter extends React.Component {
   constructor(props) {
@@ -9,6 +10,8 @@ export default class SearchFilter extends React.Component {
 
     this.state = {
       showFilters: props.show,
+      advValue: null,
+      advType: 'Authors',
       filters: [
         {
           link: '',
@@ -78,6 +81,9 @@ export default class SearchFilter extends React.Component {
     this.showFilters = this.showFilters.bind(this)
     this.renderField = this.renderField.bind(this)
     this.handleUpdateFilters = this.handleUpdateFilters.bind(this)
+    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
+    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -94,6 +100,33 @@ export default class SearchFilter extends React.Component {
     this.setState({ showFilters: show })
   }
 
+  loadAdvValuesByName(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleSelectAdvType(val) {
+    if (val) { this.setState({ advType: val, advValue: null }); }
+  }
+
+  handleSelectAdvValue(val) {
+    if (val) {
+      this.setState({ advValue: val });
+    }
+  }
+
   handleUpdateFilters(idx, field, val) {
     const { filters } = this.state;
 
@@ -111,7 +144,7 @@ export default class SearchFilter extends React.Component {
   }
 
   search() {
-    let { filters } = this.state;
+    let { filters, advType, advValue } = this.state;
 
     // Remove invalid filter
     filters = filters.filter((f, id) => {
@@ -119,10 +152,10 @@ export default class SearchFilter extends React.Component {
         (id == 0 && f.field && f.value)
     })
 
+    const advValIds = (advValue && advValue.map(val => (val.value))) || null;
     this.setState({
       showFilters: false,
-      filters
-    }, this.props.searchFunc(filters))
+    }, this.props.searchFunc(filters, { type: advType, value: advValIds }));
   }
 
   renderField(val) {
@@ -170,6 +203,57 @@ export default class SearchFilter extends React.Component {
     return dynamicRow
   }
 
+
+  renderAdvancedSearch() {
+    const { showFilters, advType, advValue } = this.state;
+    if (showFilters === true) {
+      this.listAdvOptions = [
+        {
+          value: 'Authors',
+          label: 'by authors'
+        },
+        {
+          value: 'Contributors',
+          label: 'by contributors'
+        }
+      ];
+      return (
+        <div className="adv-search-row">
+          <span style={{ flex: '0 0 127px' }} />
+          <span className="match-select">
+            <Select
+              simpleValue
+              searchable={false}
+              options={this.listAdvOptions}
+              placeholder="Select search field"
+              clearable={false}
+              valueKey="value"
+              labelKey="label"
+              onChange={this.handleSelectAdvType}
+              defaultValue="Authors"
+              value={advType}
+              className="o-author"
+            />
+          </span>
+          <span className="field-select-full">
+            <Select.Async
+              multi
+              isLoading
+              backspaceRemoves
+              value={advValue}
+              valueKey="value"
+              labelKey="label"
+              loadOptions={this.loadAdvValuesByName}
+              onChange={this.handleSelectAdvValue}
+              className="o-name"
+            />
+          </span>
+        </div>
+      );
+    }
+    return (<div />);
+  }
+
   render() {
     let {showFilters, currentOption, filters} = this.state
     if (!showFilters) return (<span />)
@@ -198,6 +282,7 @@ export default class SearchFilter extends React.Component {
             />
           </div>
           {this.renderDynamicRow()}
+          {this.renderAdvancedSearch()}
         </div>
         <div className="footer">
           <Button bsStyle="primary" onClick={this.search}>

From 5eb2c49f125f91a1c088f42b0541bd8ddd0e84c5 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 15 Apr 2021 09:30:36 +0200
Subject: [PATCH 019/258] sanitize_sql

---
 app/api/chemotion/search_api.rb | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 70f1ae5d8..49fea3412 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -398,14 +398,17 @@ def search_elements(c_id = @c_id, dl = @dl)
         if ((c_id = Collection.public_collection_id) &&
           (params[:selection] && params[:selection][:authors_params] && params[:selection][:authors_params][:type] && params[:selection][:authors_params][:value] && params[:selection][:authors_params][:value].length > 0))
           if params[:selection][:authors_params][:type] == 'Authors'
+            author_sql = ActiveRecord::Base.send(:sanitize_sql_array, [" author_id in (?)", params[:selection][:authors_params][:value].join("','")])
+
             adv_search = <<~SQL
               INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
-              and author_id in ('#{params[:selection][:authors_params][:value].join("','")}')
+              and #{author_sql}
             SQL
           elsif params[:selection][:authors_params][:type] == 'Contributors'
+            contributor_sql = ActiveRecord::Base.send(:sanitize_sql_array, [" published_by in (?)", params[:selection][:authors_params][:value].join("','")])
             adv_search = <<~SQL
               INNER JOIN publications pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
-              and published_by in ('#{params[:selection][:authors_params][:value].join("','")}')
+              and #{contributor_sql}
             SQL
           end
         end

From a63b2ee85c821e5c38cfb2e47a9d158a7f751128 Mon Sep 17 00:00:00 2001
From: Lan Le <lan.le@kit.edu>
Date: Wed, 7 Apr 2021 14:16:12 +0000
Subject: [PATCH 020/258] allow users to edit spectra's content

update package

using chem-spectra-client version 0.10.11

update version of chem-spectra-client
---
 app/packs/src/apps/mydb/elements/details/ViewSpectra.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 5eee5eca9..0d20e7aec 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -56,6 +56,7 @@ class ViewSpectra extends React.Component {
     this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
     this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
     this.updateROPredict = this.updateROPredict.bind(this);
+    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
   }
 
   componentDidMount() {

From 14ad6050354d23f8b85427bfddee8f9979f8a1a4 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Fri, 14 May 2021 08:51:18 +0200
Subject: [PATCH 021/258] deploy config mod

---
 config/deploy.rb                      |  1 -
 config/deploy/server_chemotion_net.rb | 11 ++++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/config/deploy.rb b/config/deploy.rb
index 951d40abf..7072f3de8 100644
--- a/config/deploy.rb
+++ b/config/deploy.rb
@@ -71,7 +71,6 @@
 # set :keep_releases, 5
 
 
-
 namespace :git do
   task :update_repo_url do
     on roles(:all) do
diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
index 227de1307..aae24b732 100644
--- a/config/deploy/server_chemotion_net.rb
+++ b/config/deploy/server_chemotion_net.rb
@@ -7,6 +7,7 @@
 #before 'deploy:migrate', 'deploy:backup'
 
 server 'www.chemotion.net', user: user, roles: %w{app web db}
+#server '141.52.79.134', user: user, roles: %w{app web db}
 
 set :ssh_options, {
   forward_agent: false,
@@ -34,11 +35,11 @@
 #set :bundle_without, %w{}.join(' ')
 set :bundle_flags, '--frozen --deployment ' #--quiet
 
-set :slackistrano, {
-  klass: Slackistrano::SlackistranoCustomMessaging,
-  channel: '#cap_deploy',
-  webhook: 'https://hooks.slack.com/services/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'
-}
+#set :slackistrano, {
+#  klass: Slackistrano::SlackistranoCustomMessaging,
+#  channel: '#cap_deploy',
+#  webhook: 'https://hooks.slack.com/services/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'
+#}
 set :log_file, 'log/cap-server_complat-eln.log'
 set :slack_members, ['pi_r', 'nicole']
 

From 95af2e7dabdf5e91d55aba073dfcb497988a1db7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 14 May 2021 14:56:37 +0200
Subject: [PATCH 022/258] add xvial symlink

---
 config/deploy/server_chemotion_net.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
index aae24b732..230e924cb 100644
--- a/config/deploy/server_chemotion_net.rb
+++ b/config/deploy/server_chemotion_net.rb
@@ -18,6 +18,7 @@
 set :linked_files, fetch(:linked_files, []).push(
   '.ruby-version',
   '.ruby-gemset',
+  'config/compound_open_data.yml',
   'config/spectra.yml',
   'config/node_service.yml'
 )

From c446392fc2434222b736703948bda6f81e0d29f5 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Sat, 15 May 2021 07:43:09 +0200
Subject: [PATCH 023/258] minor upd  Gem.lock db/schema

---
 db/schema.rb | 328 +++++++++++++++++++--------------------------------
 1 file changed, 124 insertions(+), 204 deletions(-)

diff --git a/db/schema.rb b/db/schema.rb
index e5ca3fa0f..da12817e8 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -119,7 +119,6 @@
     t.datetime "updated_at", null: false
   end
 
-<<<<<<< HEAD
   create_table "chemicals", force: :cascade do |t|
     t.integer "sample_id"
     t.text "cas"
@@ -130,105 +129,6 @@
     t.string "source"
     t.integer "source_id"
     t.string "value", limit: 40
-=======
-  create_table "chemscanner_molecules", force: :cascade do |t|
-    t.integer  "scheme_id",                         null: false
-    t.integer  "external_id"
-    t.integer  "clone_from"
-    t.string   "mdl"
-    t.string   "cano_smiles"
-    t.string   "label"
-    t.string   "abbreviation"
-    t.string   "description"
-    t.jsonb    "aliases",           default: {}
-    t.jsonb    "details",           default: {}
-    t.jsonb    "extended_metadata", default: {}
-    t.boolean  "is_approved",       default: false
-    t.integer  "imported_id"
-    t.datetime "created_at",                        null: false
-    t.datetime "updated_at",                        null: false
-    t.datetime "deleted_at"
-    t.string   "inchistring"
-    t.string   "inchikey"
-  end
-
-  create_table "chemscanner_reaction_steps", force: :cascade do |t|
-    t.integer  "reaction_id",                       null: false
-    t.integer  "reaction_external_id",              null: false
-    t.integer  "reagent_ids",          default: [],              array: true
-    t.string   "reagent_smiles",       default: [],              array: true
-    t.integer  "step_number",                       null: false
-    t.string   "description"
-    t.string   "temperature"
-    t.string   "time"
-    t.datetime "created_at",                        null: false
-    t.datetime "updated_at",                        null: false
-    t.datetime "deleted_at"
-  end
-
-  create_table "chemscanner_reactions", force: :cascade do |t|
-    t.integer  "scheme_id",                         null: false
-    t.integer  "external_id",                       null: false
-    t.integer  "clone_from"
-    t.string   "description"
-    t.string   "temperature"
-    t.string   "time"
-    t.string   "status"
-    t.float    "yield"
-    t.jsonb    "details",           default: {}
-    t.jsonb    "extended_metadata", default: {}
-    t.boolean  "is_approved",       default: false
-    t.integer  "imported_id"
-    t.datetime "created_at",                        null: false
-    t.datetime "updated_at",                        null: false
-    t.datetime "deleted_at"
-  end
-
-  create_table "chemscanner_reactions_molecules", force: :cascade do |t|
-    t.integer  "reaction_id", null: false
-    t.integer  "molecule_id", null: false
-    t.string   "type",        null: false
-    t.datetime "created_at",  null: false
-    t.datetime "updated_at",  null: false
-    t.datetime "deleted_at"
-  end
-
-  create_table "chemscanner_schemes", force: :cascade do |t|
-    t.integer  "source_id",                         null: false
-    t.boolean  "is_approved",       default: false
-    t.jsonb    "extended_metadata", default: {}
-    t.integer  "index",             default: 0
-    t.string   "image_data",        default: ""
-    t.string   "version",           default: ""
-    t.integer  "created_by",                        null: false
-    t.datetime "created_at",                        null: false
-    t.datetime "updated_at",                        null: false
-    t.datetime "deleted_at"
-  end
-
-  create_table "chemscanner_source_hierarchies", id: false, force: :cascade do |t|
-    t.integer "ancestor_id",   null: false
-    t.integer "descendant_id", null: false
-    t.integer "generations",   null: false
-  end
-
-  add_index "chemscanner_source_hierarchies", ["ancestor_id", "descendant_id", "generations"], name: "chemscanner_source_anc_desc_idx", unique: true, using: :btree
-  add_index "chemscanner_source_hierarchies", ["descendant_id"], name: "chemscanner_source_desc_idx", using: :btree
-
-  create_table "chemscanner_sources", force: :cascade do |t|
-    t.integer  "parent_id"
-    t.integer  "file_id",                        null: false
-    t.jsonb    "extended_metadata", default: {}
-    t.integer  "created_by",                     null: false
-    t.datetime "created_at",                     null: false
-    t.datetime "updated_at",                     null: false
-  end
-
-  create_table "code_logs", id: :uuid, default: "uuid_generate_v4()", force: :cascade do |t|
-    t.string   "source"
-    t.integer  "source_id"
-    t.string   "value",      limit: 40
->>>>>>> REPO FACTOR
     t.datetime "deleted_at"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
@@ -937,7 +837,6 @@
     t.boolean "show_external_name", default: false
     t.integer "user_id", null: false
     t.datetime "deleted_at"
-<<<<<<< HEAD
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.jsonb "data", default: {}, null: false
@@ -965,57 +864,6 @@
     t.string "status"
     t.string "reaction_svg_file"
     t.string "solvent"
-=======
-    t.datetime "created_at",                         null: false
-    t.datetime "updated_at",                         null: false
-    t.jsonb    "data",               default: {},    null: false
-    t.integer  "curation",           default: 2
-  end
-
-  add_index "profiles", ["deleted_at"], name: "index_profiles_on_deleted_at", using: :btree
-  add_index "profiles", ["user_id"], name: "index_profiles_on_user_id", using: :btree
-
-  create_table "publications", force: :cascade do |t|
-    t.string   "state"
-    t.jsonb    "metadata",              default: {}
-    t.jsonb    "taggable_data",         default: {}
-    t.jsonb    "dois",                  default: {}
-    t.string   "element_type"
-    t.integer  "element_id"
-    t.integer  "doi_id"
-    t.datetime "created_at"
-    t.datetime "updated_at"
-    t.datetime "deleted_at"
-    t.string   "original_element_type"
-    t.integer  "original_element_id"
-    t.string   "ancestry"
-    t.text     "metadata_xml"
-    t.integer  "published_by"
-    t.datetime "published_at"
-    t.jsonb    "review"
-    t.datetime "accepted_at"
-  end
-
-  add_index "publications", ["ancestry"], name: "index_publications_on_ancestry", using: :btree
-
-  create_table "reactions", force: :cascade do |t|
-    t.string   "name"
-    t.datetime "created_at",                                                                   null: false
-    t.datetime "updated_at",                                                                   null: false
-    t.text     "description"
-    t.string   "timestamp_start"
-    t.string   "timestamp_stop"
-    t.text     "observation"
-    t.string   "purification",       default: [],                                                           array: true
-    t.string   "dangerous_products", default: [],                                                           array: true
-    t.string   "tlc_solvents"
-    t.text     "tlc_description"
-    t.string   "rf_value"
-    t.jsonb    "temperature",        default: {"data"=>[], "userText"=>"", "valueUnit"=>"°C"}
-    t.string   "status"
-    t.string   "reaction_svg_file"
-    t.string   "solvent"
->>>>>>> REPO FACTOR
     t.datetime "deleted_at"
     t.string "short_label"
     t.integer "created_by"
@@ -1047,7 +895,7 @@
     t.boolean  "waste",        default: false
     t.float    "coefficient",  default: 1.0
     t.float    "scheme_yield"
-    t.boolean  "show_label",  default: false, null: false
+    t.boolean  "show_label",   default: false, null: false
   end
 
   add_index "reactions_samples", ["reaction_id"], name: "index_reactions_samples_on_reaction_id", using: :btree
@@ -1523,14 +1371,9 @@
   add_foreign_key "dois", "molecules"
   add_foreign_key "literals", "literatures"
   add_foreign_key "report_templates", "attachments"
-<<<<<<< HEAD
   add_foreign_key "sample_tasks", "samples"
   add_foreign_key "sample_tasks", "users", column: "creator_id"
   create_function :collection_shared_names, sql_definition: <<-'SQL'
-=======
-
-  create_function :collection_shared_names, sql_definition: <<-SQL
->>>>>>> REPO FACTOR
       CREATE OR REPLACE FUNCTION public.collection_shared_names(user_id integer, collection_id integer)
        RETURNS json
        LANGUAGE sql
@@ -1609,9 +1452,87 @@
       	return in_message_id;
       end;$function$
   SQL
+<<<<<<< HEAD
 <<<<<<< HEAD
   create_function :generate_users_matrix, sql_definition: <<-'SQL'
 =======
+=======
+  create_function :group_user_ids, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.group_user_ids(group_id integer)
+       RETURNS TABLE(user_ids integer)
+       LANGUAGE sql
+      AS $function$
+             select id from users where type='Person' and id= $1
+             union
+             select user_id from users_groups where group_id = $1
+      $function$
+  SQL
+  create_function :pub_reactions_by_molecule, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.pub_reactions_by_molecule(collection_id integer, molecule_id integer)
+       RETURNS TABLE(reaction_ids integer)
+       LANGUAGE sql
+      AS $function$
+          (select r.id from collections c, collections_reactions cr, reactions r, reactions_samples rs, samples s,molecules m
+           where c.id=$1 and c.id = cr.collection_id and cr.reaction_id = r.id
+           and r.id = rs.reaction_id and rs.sample_id = s.id and rs.type in ('ReactionsProductSample')
+           and c.deleted_at is null and cr.deleted_at is null and r.deleted_at is null and rs.deleted_at is null and s.deleted_at is null and m.deleted_at is null
+           and s.molecule_id = m.id and m.id=$2)
+        $function$
+  SQL
+  create_function :shared_user_as_json, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
+       RETURNS json
+       LANGUAGE plpgsql
+      AS $function$
+         begin
+          if (in_user_id = in_current_user_id) then
+            return null;
+          else
+            return (select row_to_json(result) from (
+            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+            from users where id = $1
+            ) as result);
+          end if;
+          end;
+       $function$
+  SQL
+  create_function :user_as_json, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
+       RETURNS json
+       LANGUAGE sql
+      AS $function$
+         select row_to_json(result) from (
+           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+           from users where id = $1
+         ) as result
+       $function$
+  SQL
+  create_function :user_ids, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
+       RETURNS TABLE(user_ids integer)
+       LANGUAGE sql
+      AS $function$
+          select $1 as id
+          union
+          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
+         and users.type in ('Group') and users_groups.user_id = $1)
+        $function$
+  SQL
+  create_function :user_instrument, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
+       RETURNS TABLE(instrument text)
+       LANGUAGE sql
+      AS $function$
+             select distinct extended_metadata -> 'instrument' as instrument from containers c
+             where c.container_type='dataset' and c.id in
+             (select ch.descendant_id from containers sc,container_hierarchies ch, samples s, users u
+             where sc.containable_type in ('Sample','Reaction') and ch.ancestor_id=sc.id and sc.containable_id=s.id
+             and s.created_by = u.id and u.id = $1 and ch.generations=3 group by descendant_id)
+             and upper(extended_metadata -> 'instrument') like upper($2 || '%')
+             order by extended_metadata -> 'instrument' limit 10
+           $function$
+  SQL
+>>>>>>> minor upd  Gem.lock db/schema
   create_function :labels_by_user_sample, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.labels_by_user_sample(user_id integer, sample_id integer)
        RETURNS TABLE(labels text)
@@ -1627,7 +1548,6 @@
          ) and (ul.access_level = 1 or (ul.access_level = 0 and ul.user_id = $1)) order by title  ) uls
        $function$
   SQL
-
   create_function :generate_users_matrix, sql_definition: <<-SQL
 >>>>>>> REPO FACTOR
       CREATE OR REPLACE FUNCTION public.generate_users_matrix(in_user_ids integer[])
@@ -1739,6 +1659,7 @@
       end
       $function$
   SQL
+<<<<<<< HEAD
   create_function :user_as_json, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
        RETURNS json
@@ -1815,55 +1736,27 @@
   create_function :shared_user_as_json, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
        RETURNS json
+=======
+  create_function :com_xvial, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.com_xvial(p_allow boolean DEFAULT false)
+       RETURNS SETOF compound_open_data_locals
+>>>>>>> minor upd  Gem.lock db/schema
        LANGUAGE plpgsql
       AS $function$
-         begin
-          if (in_user_id = in_current_user_id) then
-            return null;
-          else
-            return (select row_to_json(result) from (
-            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-            from users where id = $1
-            ) as result);
+      begin
+      	if p_allow IS false then
+      		return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+      	elsif EXISTS(select * from to_regclass('compound_open_data') where to_regclass is not null) then
+      	   RETURN QUERY SELECT compound_open_data.* FROM compound_open_data;
+      	else
+      	   return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
           end if;
-          end;
-       $function$
-  SQL
-  create_function :user_as_json, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
-       RETURNS json
-       LANGUAGE sql
-      AS $function$
-         select row_to_json(result) from (
-           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-           from users where id = $1
-         ) as result
-       $function$
-  SQL
-  create_function :user_ids, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
-       RETURNS TABLE(user_ids integer)
-       LANGUAGE sql
-      AS $function$
-          select $1 as id
-          union
-          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
-         and users.type in ('Group') and users_groups.user_id = $1)
-        $function$
+      END
+      $function$
   SQL
-  create_function :user_instrument, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
-       RETURNS TABLE(instrument text)
-       LANGUAGE sql
-      AS $function$
-             select distinct extended_metadata -> 'instrument' as instrument from containers c
-             where c.container_type='dataset' and c.id in
-             (select ch.descendant_id from containers sc,container_hierarchies ch, samples s, users u
-             where sc.containable_type in ('Sample','Reaction') and ch.ancestor_id=sc.id and sc.containable_id=s.id
-             and s.created_by = u.id and u.id = $1 and ch.generations=3 group by descendant_id)
-             and upper(extended_metadata -> 'instrument') like upper($2 || '%')
-             order by extended_metadata -> 'instrument' limit 10
-           $function$
+
+  create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
+      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE PROCEDURE update_users_matrix()
   SQL
 
 >>>>>>> REPO FACTOR
@@ -2013,4 +1906,31 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
+  create_view "compound_open_data_locals", sql_definition: <<-SQL
+      SELECT c.x_id,
+      c.x_sample_id,
+      c.x_data,
+      c.x_created_at,
+      c.x_updated_at,
+      c.x_inchikey,
+      c.x_sum_formular,
+      c.x_cano_smiles,
+      c.x_external_label,
+      c.x_short_label,
+      c.x_name,
+      c.x_stereo
+     FROM ( SELECT NULL::integer AS x_id,
+              NULL::integer AS x_sample_id,
+              NULL::jsonb AS x_data,
+              NULL::timestamp without time zone AS x_created_at,
+              NULL::timestamp without time zone AS x_updated_at,
+              NULL::character varying AS x_inchikey,
+              NULL::character varying AS x_sum_formular,
+              NULL::character varying AS x_cano_smiles,
+              NULL::character varying AS x_external_label,
+              NULL::character varying AS x_short_label,
+              NULL::character varying AS x_name,
+              NULL::jsonb AS x_stereo) c
+    WHERE (c.x_id IS NOT NULL);
+  SQL
 end

From 7ba3d515efa022ad2b40ef0c1b8f7370d2c7b2ca Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Sat, 15 May 2021 07:45:49 +0200
Subject: [PATCH 024/258] add default profile

---
 config/profile_default.yml | 161 +++++++++++++++++++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 config/profile_default.yml

diff --git a/config/profile_default.yml b/config/profile_default.yml
new file mode 100644
index 000000000..a16a4ec3d
--- /dev/null
+++ b/config/profile_default.yml
@@ -0,0 +1,161 @@
+development:
+  :layout:
+    :layout:
+      :sample: 1
+      :reaction: 2
+#      :wellplate: 3
+#      :screen: 4
+#      :research_plan: 5
+    :layout_detail_research_plan:
+      :research_plan:
+        1
+      :analyses:
+        2
+      :literature:
+        3
+      :attachments:
+        4
+    :layout_detail_sample:
+      :properties:
+        1
+      :analyses:
+        2
+      :qc_curation:
+        3
+      :literature:
+        4
+      :results:
+        5
+    :layout_detail_reaction:
+      :scheme:
+        1
+      :properties:
+        2
+      :analyses:
+        3
+      :references:
+        4
+      :green_chemistry:
+        5
+    :layout_detail_wellplate:
+      :properties:
+        1
+      :analyses:
+        2
+      :designer:
+        3
+      :list:
+        4
+    :layout_detail_screen:
+      :properties:
+        1
+      :analyses:
+        2
+
+production:
+  :layout:
+    :layout:
+      :sample: 1
+      :reaction: 2
+#      :wellplate: 3
+#      :screen: 4
+#      :research_plan: 5
+    :layout_detail_research_plan:
+      :research_plan:
+        1
+      :analyses:
+        2
+      :literature:
+        3
+      :attachments:
+        4
+    :layout_detail_sample:
+      :properties:
+        1
+      :analyses:
+        2
+      :qc_curation:
+        3
+      :literature:
+        4
+      :results:
+        5
+    :layout_detail_reaction:
+      :scheme:
+        1
+      :properties:
+        2
+      :analyses:
+        3
+      :references:
+        4
+      :green_chemistry:
+        5
+    :layout_detail_wellplate:
+      :properties:
+        1
+      :analyses:
+        2
+      :designer:
+        3
+      :list:
+        4
+    :layout_detail_screen:
+      :properties:
+        1
+      :analyses:
+        2
+
+test:
+  :layout:
+    :layout:
+      :sample: 1
+      :reaction: 2
+#      :wellplate: 3
+#      :screen: 4
+#      :research_plan: 5
+    :layout_detail_research_plan:
+      :research_plan:
+        1
+      :analyses:
+        2
+      :literature:
+        3
+      :attachments:
+        4
+    :layout_detail_sample:
+      :properties:
+        1
+      :analyses:
+        2
+      :qc_curation:
+        3
+      :literature:
+        4
+      :results:
+        5
+    :layout_detail_reaction:
+      :scheme:
+        1
+      :properties:
+        2
+      :analyses:
+        3
+      :references:
+        4
+      :green_chemistry:
+        5
+    :layout_detail_wellplate:
+      :properties:
+        1
+      :analyses:
+        2
+      :designer:
+        3
+      :list:
+        4
+    :layout_detail_screen:
+      :properties:
+        1
+      :analyses:
+        2

From dd8d5874a1fd375f3cc3a96d290fdbf3a5db9cac Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Sat, 15 May 2021 07:59:51 +0200
Subject: [PATCH 025/258] FE fix after rebase

---
 app/packs/src/components/common/ImageModal.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 432be9ed2..03f122aaf 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -14,8 +14,6 @@ const defaultImageStyle = {
 };
 import UserStore from '../stores/UserStore';
 
-const defaultImageStyle = { style: { cursor: 'default' } };
-
 export default class ImageModal extends Component {
   constructor(props) {
     super(props);

From 8aae173653b41340b8d4cf5c86cfca20391b4673 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 23 Jun 2021 09:15:50 +0200
Subject: [PATCH 026/258] update style back to original setting

---
 app/assets/javascripts/components/common/RepoXvialButton.js | 6 +++---
 app/assets/javascripts/libHome/RepoCommon.js                | 4 +---
 app/assets/stylesheets/repo_home.scss                       | 6 ++++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
index 4dad172a6..fccda7102 100644
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -8,8 +8,8 @@ import NotificationActions from '../actions/NotificationActions';
 const registedCompoundTooltip = (
   <div className="repo-xvial-info">
     For availability please contact the Compound Platform team (<span className="env"><i className="fa fa-envelope-o" aria-hidden="true" /></span>). An explanation can be accessed via our Youtube channel&nbsp;
-    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>&nbsp;
-      or on our how-to pages
+    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>
+    &nbsp;or on our how-to pages
     <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
   </div>
 );
@@ -146,7 +146,7 @@ export default class RepoXvialButton extends React.Component {
       </OverlayTrigger>
     ) : null;
     const info = requestLink ? (
-      <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
+      <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
         <a rel="noopener noreferrer"><i className="fa fa-info-circle" aria-hidden="true" /></a>
       </OverlayTrigger>
     ) : null;
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 04da4f54e..9200a3888 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -872,8 +872,6 @@ class ClipboardCopyBtn extends Component {
   }
 }
 
-
-
 const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
   if (sample_svg_file && sample_svg_file != '') {
@@ -911,7 +909,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
             <div className="repo-registed-compound-desc">
               A physical sample of this molecule was registered to the Molecule Archive of the
               Compound Platform&nbsp;
-              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
+              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
                 <i className="fa fa-info-circle" aria-hidden="true" />
               </OverlayTrigger>
             </div> : null
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 1eb4a2dc8..8f2a9e3bf 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -652,3 +652,9 @@ $bs-successcolor: #5cb85c;
     opacity: 0;
   }
 }
+
+.bs_tooltip {
+  .tooltip-inner {
+    max-width: 200px;
+  }
+}

From bbd925063627c570bd313b49cdc4db3b1a248d93 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 23 Jun 2021 10:42:29 +0200
Subject: [PATCH 027/258] use 'mass spectrometry' and 'IR'

---
 .../src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js b/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
index f47782900..c4927bff5 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
@@ -37,13 +37,13 @@ const buildQcs = (sample, infer) => {
     const { ops } = content;
     const inferO = extractInfer(ai, files);
     const { type } = inferO;
-    if ((!type || type === 'ms') && (kind && kind.includes('(MS)'))) {
+    if ((!type || type === 'ms') && (kind && kind.includes('mass spectrometry'))) {
       msQc = Object.assign({}, msQc, inferO, { ops, exist: true, type: 'Mass' });
     } else if ((!type || type === 'nmr;13C;1d') && (kind && kind.includes('13C NMR'))) {
       cnmrQc = Object.assign({}, cnmrQc, inferO, { ops, exist: true, type: '13C NMR' });
     } else if ((!type || type === 'nmr;1H;1d') && (kind && kind.includes('1H NMR'))) {
       hnmrQc = Object.assign({}, hnmrQc, inferO, { ops, exist: true, type: '1H NMR' });
-    } else if ((!type || type === 'ir') && (kind && kind.includes('(IR)'))) {
+    } else if ((!type || type === 'ir') && (kind && kind.includes('IR'))) {
       irQc = Object.assign({}, irQc, inferO, { ops, exist: true, type: 'IR' });
     }
   });

From 2aa24890c6481d702062f673de4fe8da34eebf3a Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 14 Jul 2021 14:03:38 +0200
Subject: [PATCH 028/258] publication embargo search

---
 app/api/chemotion/public_api.rb               | 41 +++++++++++++++----
 app/api/chemotion/search_api.rb               |  2 +-
 app/assets/javascripts/libHome/RepoPubl.js    |  4 ++
 app/assets/javascripts/libHome/RepoSample.js  |  4 +-
 .../javascripts/libHome/RepoSampleDetails.js  |  1 +
 .../apps/mydb/elements/list/ElementsTable.js  | 21 ++++++++--
 6 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 9f6bb1648..15f8dae83 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -112,18 +112,28 @@ def query_ontologies(name)
               SQL
             ).uniq
           end
+          def query_embargo(name)
+            Collection.all_embargos(current_user.id).where("LOWER(label) ILIKE '#{ActiveRecord::Base.send(:sanitize_sql_like, params[:name])}%'").limit(10)
+            .select(
+              <<~SQL
+              id as key, label, label as name
+              SQL
+            )
+          end
         end
         desc 'Find top 3 matched advanced values'
         params do
-          requires :name, type: String, allow_blank: false, regexp: /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/
-          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Contributors Ontologies]
+          requires :name, type: String, allow_blank: false, regexp: /^[\w]+([\w -]*)*$/
+          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Contributors Ontologies Embargo]
         end
         get do
           result = case params[:adv_type]
                    when 'Authors', 'Contributors'
                      query_authors(params[:name])
-                    when 'Ontologies'
+                   when 'Ontologies'
                      query_ontologies(params[:name])
+                   when 'Embargo'
+                     query_embargo(params[:name])
                    else
                      []
                    end
@@ -362,7 +372,7 @@ def query_ontologies(name)
           optional :pages, type: Integer, desc: "pages"
           optional :per_page, type: Integer, desc: "per page"
           optional :adv_flag, type: Boolean, desc: 'advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
@@ -382,6 +392,12 @@ def query_ontologies(name)
                 INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' css.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_samples css on css.sample_id = samples.id and css.deleted_at ISNULL
+                and #{param_sql}
+              SQL
             end
           end
           sample_join = <<~SQL
@@ -440,7 +456,7 @@ def query_ontologies(name)
           optional :pages, type: Integer, desc: 'pages'
           optional :per_page, type: Integer, desc: 'per page'
           optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
           optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
         end
@@ -455,11 +471,16 @@ def query_ontologies(name)
                 and author_id in ('#{params[:adv_val].join("','")}')
               SQL
             when 'Ontologies'
-              str_term_id = params[:adv_val].split(',').map { |val| val}.to_s
               adv_search = <<~SQL
                 INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' cr.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_reactions cr on cr.reaction_id = reactions.id and cr.deleted_at is null
+                and #{param_sql}
+              SQL
             else
               adv_search = ' '
             end
@@ -638,7 +659,7 @@ def query_ontologies(name)
         params do
           requires :id, type: Integer, desc: "Molecule id"
           optional :adv_flag, type: Boolean, desc: "advanced search flag"
-          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         get do
@@ -705,8 +726,12 @@ def query_ontologies(name)
               next if info.empty?
               ana_infos[pp.element_id] = info['comment']
             end
+            em_sql = <<~SQL
+              inner join collections_samples cs on collections.id = cs.collection_id and cs.sample_id = #{s.id}
+            SQL
+            embargo = Collection.joins(em_sql).where("ancestry in (select c.id::text from collections c where c.label = 'Published Elements')")&.first&.label
             tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
-              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
+              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
 
           end
           x = published_samples.select { |s| s[:xvial].present? }
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 49fea3412..adc32c1bd 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -678,7 +678,7 @@ def elements_by_scope(scope, collection_id = @c_id)
 
           return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless col_id.present?
 
-          scope = Sample.by_collection_id(col_id)
+          scope = Sample.by_collection_id(col_id).where.not(short_label: %w[solvent reactant])
           return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless scope
 
           return serialization_by_elements_and_page({}, params[:page], params[:molecule_sort]) unless ElementsPolicy.new(current_user, scope).read?
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index f4987558a..3175d560d 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -506,6 +506,10 @@ export default class RepoPubl extends Component {
         {
           value: 'Ontologies',
           label: 'by analysis type'
+        },
+        {
+          value: 'Embargo',
+          label: 'by Embargo Bundle#'
         }
       ];
       return (
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index bcf06e1d3..006c0f5d6 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -16,6 +16,7 @@ import {
   RenderPublishAnalysesPanel,
   SidToPubChem,
   ToggleIndicator,
+  ElStateLabel
 } from './RepoCommon';
 import { AffiliationMap } from './RepoReviewCommon';
 import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
@@ -114,7 +115,8 @@ export default class RepoSample extends Component {
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
           {IconLicense(sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
-          <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />
+          <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+          {ElStateLabel(sample.embargo)}
         </span>
         <br />
         {iupacUserDefined}
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
index 51a8b1a04..212ff6d51 100644
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -111,6 +111,7 @@ export default class RepoSampleDetails extends Component {
         sid: s.sid,
         short_label: s.short_label || '',
         xvial: s.xvial,
+        embargo: s.embargo,
         pub_info: s.pub_info,
         ana_infos: s.ana_infos,
         affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTable.js b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
index 6e8fab8f0..b9bcf3b97 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTable.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
@@ -21,6 +21,7 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import ElementsTableGroupedEntries from 'src/apps/mydb/elements/list/ElementsTableGroupedEntries';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
+import { stopEvent } from './utils/DomHelper';
 
 export default class ElementsTable extends React.Component {
   constructor(props) {
@@ -77,13 +78,23 @@ export default class ElementsTable extends React.Component {
     }
   }
 
-  handleNumberOfResultsChange(event) {
+  handleNumberOfResultsChange(event, query=false) {
     const { value } = event.target;
     const { type } = this.props;
 
     if (parseInt(value, 10) > 0) {
       UIActions.changeNumberOfResultsShown(value);
-      ElementActions.refreshElements(type);
+      if (query === true) ElementActions.refreshElements(type);
+    }
+  }
+
+  handleKeyDown(event) {
+    switch (event.keyCode) {
+      case 13: // Enter
+        stopEvent(event);
+        break;
+      default:
+        break;
     }
   }
 
@@ -293,8 +304,10 @@ export default class ElementsTable extends React.Component {
               style={
                 { textAlign: 'center', zIndex: 0 }
               }
-              onChange={(event) => this.handleNumberOfResultsChange(event)}
-              value={ui.number_of_results ? ui.number_of_results : 0}
+              onChange={event => this.handleNumberOfResultsChange(event, false)}
+              onBlur={event => this.handleNumberOfResultsChange(event, true)}
+              onKeyDown={event => this.handleKeyDown(event)}
+              value={ui.number_of_results ? ui.number_of_results : 0} />
             />
           </InputGroup>
         </FormGroup>

From 0c65bd353cd622e6d36646bff2fe513d5eb662ae Mon Sep 17 00:00:00 2001
From: Lan Le <lan.le@kit.edu>
Date: Mon, 7 Jun 2021 14:59:31 +0200
Subject: [PATCH 029/258] make regenerate button for all unoriginal jdx files

---
 app/api/chemotion/attachment_api.rb           | 29 +++++++++++++++++++
 .../analysesTab/SampleDetailsContainersAux.js |  2 +-
 .../src/stores/alt/stores/SpectraStore.js     |  4 +--
 lib/chemotion/jcamp.rb                        | 10 +++----
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index e1dcb4daf..eddf12924 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -456,6 +456,35 @@ def remove_duplicated(att)
         { status: true }
       end
 
+      desc 'Regenerate edited spectra'
+      params do
+        requires :edited, type: Array[Integer]
+        optional :molfile, type: String
+      end
+      post 'regenerate_edited_spectrum' do
+        pm = to_rails_snake_case(params)
+        pm[:edited].each do |g_id|
+          att = Attachment.find(g_id)
+          next unless att
+          can_edit = writable?(att)
+          if can_edit
+            abs_path = att.abs_path
+            molfile = pm[:molfile]
+            result =  Tempfile.create('molfile') do |t_molfile|
+              t_molfile.write(molfile)
+              t_molfile.rewind
+              Chemotion::Jcamp::RegenerateJcamp.spectrum(
+                abs_path, t_molfile.path
+              )
+            end
+
+            att.file_data = result
+            att.rewrite_file_data!
+            { status: true }
+          end
+        end
+      end
+
       desc 'Save spectra to file'
       params do
         requires :attachment_id, type: Integer
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index a0d55fce6..60ce70ba8 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -95,7 +95,7 @@ const SpectraEditorBtn = ({
           <i className="fa fa-refresh" /> Reprocess
         </MenuItem>
         {
-          hasEditedJcamp ? 
+          hasEditedJcamp ?
             (<MenuItem
               id="regenerate-edited-spectra"
               key="regenerate-edited-spectra"
diff --git a/app/packs/src/stores/alt/stores/SpectraStore.js b/app/packs/src/stores/alt/stores/SpectraStore.js
index 45a286e7c..b2657281c 100644
--- a/app/packs/src/stores/alt/stores/SpectraStore.js
+++ b/app/packs/src/stores/alt/stores/SpectraStore.js
@@ -95,7 +95,7 @@ class SpectraStore {
     if (newArrSpcIdx.length <= 1) {
       newArrSpcIdx = [];
     }
-    
+
     this.setState({
       spcInfos: sortedSpcInfo,
       spcMetas,
@@ -207,7 +207,7 @@ class SpectraStore {
     });
   }
 
-  
+
 }
 
 export default alt.createStore(SpectraStore, 'SpectraStore');
diff --git a/lib/chemotion/jcamp.rb b/lib/chemotion/jcamp.rb
index d4020be6c..5178ecad4 100644
--- a/lib/chemotion/jcamp.rb
+++ b/lib/chemotion/jcamp.rb
@@ -180,7 +180,7 @@ def self.stub_peak_in_image(path)
         response = nil
         url = Rails.configuration.spectra.chemspectra.url
         api_endpoint = "#{url}/zip_image"
-        
+
         File.open(path, 'r') do |f|
           response = HTTParty.post(
             api_endpoint,
@@ -227,7 +227,7 @@ def self.stub_request(molfile, layout, peaks, shift, spectrum)
           response = nil
           url = Rails.configuration.spectra.chemspectra.url
           api_endpoint = "#{url}/predict/by_peaks_form"
-          
+
           File.open(molfile.path, 'r') do |file|
             body = build_body(file, layout, peaks, shift, spectrum)
             response = HTTParty.post(
@@ -295,7 +295,7 @@ def self.stub_request(molfile, spectrum)
           response = nil
           url = Rails.configuration.spectra.chemspectra.url
           api_endpoint = "#{url}/predict/ms"
-          
+
           File.open(molfile.path, 'r') do |f_molfile|
             File.open(spectrum.path, 'r') do |f_spectrum|
               body = build_body(f_molfile, f_spectrum)
@@ -342,7 +342,7 @@ def self.stub_http(
         response = nil
         url = Rails.configuration.spectra.chemspectra.url
         api_endpoint = "#{url}/zip_jcamp_n_img"
-        
+
         File.open(file_path, 'r') do |file|
           File.open(mol_path, 'r') do |molfile|
             body = build_body(file, molfile)
@@ -378,7 +378,7 @@ def self.convert_nmrium_data(path)
         response = nil
         url = Rails.configuration.spectra.chemspectra.url
         api_endpoint = "#{url}/nmrium"
-        
+
         File.open(path, 'r') do |f|
           response = HTTParty.post(
             api_endpoint,

From 99b6bae70f56ca33804123f04ce1e3fdcf2d714d Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 19 Jul 2021 20:40:21 +0200
Subject: [PATCH 030/258] regenerate for reviewer only

---
 .../mydb/elements/details/samples/SampleDetails.js    |  3 ++-
 .../samples/analysesTab/SampleDetailsContainers.js    |  9 ++++++---
 .../samples/analysesTab/SampleDetailsContainersAux.js | 11 ++++++-----
 .../samples/analysesTab/SampleDetailsContainersCom.js |  2 ++
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index f8bbe2a78..6a6b97b85 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1272,7 +1272,7 @@ export default class SampleDetails extends React.Component {
     )
   }
   sampleContainerTab(ind) {
-    const { sample } = this.state;
+    const { sample, currentUser } = this.state;
     const isPub = !!(sample.publication && sample.publication.published_at);
     return (
       <Tab eventKey={ind} title="Analyses" key={'Container' + sample.id.toString()}>
@@ -1284,6 +1284,7 @@ export default class SampleDetails extends React.Component {
             handleSubmit={this.handleSubmit}
             fromSample
             publish={isPub}
+            isReviewer={!!currentUser.is_reviewer}
           />
         </ListGroupItem>
       </Tab>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
index 83c9e3be9..c108e2593 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
@@ -241,6 +241,7 @@ export default class SampleDetailsContainers extends Component {
             addButton={this.addButton}
             toggleMode={this.toggleMode}
             publish={this.props.publish}
+            isReviewer={this.props.isReviewer || false}
           />
         );
       }
@@ -258,7 +259,7 @@ export default class SampleDetailsContainers extends Component {
             handleSampleChanged={handleSampleChanged}
             handleSubmit={handleSubmit}
           />
-          
+
         </div>
       );
     }
@@ -275,8 +276,10 @@ SampleDetailsContainers.propTypes = {
   sample: PropTypes.object.isRequired,
   handleSampleChanged: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  isReviewer: PropTypes.bool,
 };
 
 SampleDetailsContainers.defaultProps = {
-  readOnly: false
-};
+  readOnly: false,
+  isReviewer: false
+}
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 60ce70ba8..33e10b6d0 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -64,7 +64,7 @@ const qCheckMsg = (sample, container) => {
 const SpectraEditorBtn = ({
   sample, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
-  toggleNMRDisplayerModal, hasNMRium
+  toggleNMRDisplayerModal, hasNMRium, isReviewer
 }) => (
   <span>
     <OverlayTrigger
@@ -95,7 +95,7 @@ const SpectraEditorBtn = ({
           <i className="fa fa-refresh" /> Reprocess
         </MenuItem>
         {
-          hasEditedJcamp ?
+          hasEditedJcamp && isReviewer ?
             (<MenuItem
               id="regenerate-edited-spectra"
               key="regenerate-edited-spectra"
@@ -248,7 +248,7 @@ const HeaderDeleted = ({ container, handleUndo, mode }) => {
 const headerBtnGroup = (
   container, sample, mode, handleRemove, handleSubmit,
   toggleAddToReport, isDisabled, readOnly,
-  publish,
+  publish, isReviewer
 ) => {
   if (mode !== 'edit') {
     return null;
@@ -388,6 +388,7 @@ const headerBtnGroup = (
         confirmRegenerateEdited={confirmRegenerateEdited}
         toggleNMRDisplayerModal={toggleNMRDisplayerModal}
         hasNMRium={hasNMRium}
+        isReviewer={isReviewer}
       />
       <span
         className="button-right add-to-report"
@@ -402,7 +403,7 @@ const headerBtnGroup = (
 const HeaderNormal = ({
   sample, container, mode, readOnly, isDisabled, serial,
   handleRemove, handleSubmit, handleAccordionOpen, toggleAddToReport,
-  publish,
+  publish,isReviewer
 }) => {
   const clickToOpen = () => handleAccordionOpen(serial);
 
@@ -462,7 +463,7 @@ const HeaderNormal = ({
           headerBtnGroup(
             container, sample, mode, handleRemove, handleSubmit,
             toggleAddToReport, isDisabled, readOnly,
-            publish,
+            publish, isReviewer
           )
         }
         <div className="lower-text">
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js
index dceffb9b1..50cc37816 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js
@@ -105,6 +105,7 @@ function RndEdit({
   handleChange,
   handleUndo,
   publish,
+  isReviewer,
 }) {
   const headerDeletedFunc = (container) => (
     <HeaderDeleted container={container} handleUndo={handleUndo} mode={mode} />
@@ -124,6 +125,7 @@ function RndEdit({
       handleAccordionOpen={handleAccordionOpen}
       toggleAddToReport={toggleAddToReport}
       publish={publish}
+      isReviewer={isReviewer || false}
     />
   );
 

From 90cf380927163bf6dbd8565d46d4914a878451dc Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 4 Aug 2021 15:57:26 +0200
Subject: [PATCH 031/258] check and fix

---
 app/assets/javascripts/components/common/RepoPreviewImage.js | 2 +-
 app/assets/javascripts/libHome/RepoCommon.js                 | 2 +-
 app/packs/src/components/common/ImageModal.js                | 4 ++--
 app/packs/src/components/contextActions/ContextActions.js    | 4 ++--
 db/seeds/shared/report_templates.seed.rb                     | 4 +++-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/components/common/RepoPreviewImage.js b/app/assets/javascripts/components/common/RepoPreviewImage.js
index d307f349f..7827481ed 100644
--- a/app/assets/javascripts/components/common/RepoPreviewImage.js
+++ b/app/assets/javascripts/components/common/RepoPreviewImage.js
@@ -28,7 +28,7 @@ const RepoPreviewImage = (props) => {
       <ImageModal
         imageStyle={imageStyle}
         hasPop={hasPop}
-        preivewObject={{ src: previewImg }}
+        previewObject={{ src: previewImg }}
         popObject={{
           title, src: previewImg, fetchNeeded, fetchId, fetchFilename
         }}
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 9200a3888..bfee71729 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1780,7 +1780,7 @@ class RenderPublishAnalyses extends Component {
         <div className="preview">
           <ImageModal
             hasPop={hasPop}
-            preivewObject={{
+            previewObject={{
               src: previewImg
             }}
             popObject={{
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 03f122aaf..aecc5606b 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -81,7 +81,7 @@ export default class ImageModal extends Component {
   }
 
   handleImageError() {
-    this.setState({ fetchSrc: this.props.preivewObject.src });
+    this.setState({ fetchSrc: this.props.previewObject.src });
   }
 
   onDocumentLoadSuccess(numPages) {
@@ -145,7 +145,7 @@ export default class ImageModal extends Component {
       <div>
         <OverlayTrigger placement="top" overlay={<Tooltip id="id_enlarge_image">click to enlarge image</Tooltip>}>
           <div className="preview-table" onClick={this.handleModalShow}>
-            <img src={preivewObject.src} alt="" style={{ cursor: 'pointer', ...imageStyle }} />
+            <img src={previewObject.src} alt="" style={{ cursor: 'pointer', ...imageStyle }} />
           </div>
         </OverlayTrigger>
         <Modal show={this.state.showModal} onHide={this.handleModalClose} dialogClassName="noticeModal">
diff --git a/app/packs/src/components/contextActions/ContextActions.js b/app/packs/src/components/contextActions/ContextActions.js
index 26e850a04..b801e1892 100644
--- a/app/packs/src/components/contextActions/ContextActions.js
+++ b/app/packs/src/components/contextActions/ContextActions.js
@@ -70,9 +70,9 @@ export default class ContextActions extends React.Component {
         <ButtonGroup style={{ marginLeft: '10px' }}>
           <ScanCodeButton customClass={customClass} />
         </ButtonGroup>
-        <ButtonGroup style={{ marginLeft: '10px' }}>
+        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <InboxButton />
-        </ButtonGroup>
+        </ButtonGroup> */}
         <ButtonGroup style={{ marginLeft: '10px' }}>
           <SampleTaskNavigationElement />
         </ButtonGroup>
diff --git a/db/seeds/shared/report_templates.seed.rb b/db/seeds/shared/report_templates.seed.rb
index 7bbe25b6f..5d58faa09 100644
--- a/db/seeds/shared/report_templates.seed.rb
+++ b/db/seeds/shared/report_templates.seed.rb
@@ -7,7 +7,9 @@
   [ "Spectra.docx", "Supporting Information - Spectra", "spectrum" ],
   [ nil, "Supporting Information - Reaction List (.xlsx)", "rxn_list_xlsx" ],
   [ nil, "Supporting Information - Reaction List (.csv)", "rxn_list_csv" ],
-  [ "rxn_list.html.erb", "Supporting Information - Reaction List (.html)", "rxn_list_html" ]
+  [ "rxn_list.html.erb", "Supporting Information - Reaction List (.html)", "rxn_list_html" ],
+  [ nil, "Supporting Information - DOI List (.xlsx)", "doi_list_xlsx" ],
+
 ]
 
 def create_template(file_name, template_name, template_type)

From 8bd3b065fd60c56aaefd8e6ae10641f8639e4687 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 4 Aug 2021 16:02:57 +0200
Subject: [PATCH 032/258] smiles to SMILES

---
 app/assets/javascripts/libHome/RepoCommon.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index bfee71729..ee2eda8d3 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -900,9 +900,9 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
         <br />
-        <h5><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-        <h5><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-        <h5><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+        <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
+        <h5><b>InChi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+        <h5><b>InChiKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
         <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
         {
           hasXvial ?

From ba10339c72f050fbf137b5510ec02f0d78b3161f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 4 Aug 2021 16:19:59 +0200
Subject: [PATCH 033/258] add permission on repository_api reaction and sample

---
 app/api/chemotion/repository_api.rb | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index eb57933ce..31c8522d1 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -529,6 +529,10 @@ def update_tag_doi(element)
           requires :id, type: Integer, desc: "Reaction id"
           optional :is_public, type: Boolean, default: true
         end
+        after_validation do
+          @element_policy = ElementPolicy.new(current_user, Reaction.find(params[:id]))
+          error!('401 Unauthorized', 401) unless @element_policy.read?
+        end
         get do
           reaction = Reaction.where(id: params[:id])
           .select(
@@ -567,6 +571,10 @@ def update_tag_doi(element)
           requires :id, type: Integer, desc: "Sample id"
           optional :is_public, type: Boolean, default: true
         end
+        after_validation do
+          @element_policy = ElementPolicy.new(current_user, Sample.find(params[:id]))
+          error!('401 Unauthorized', 401) unless @element_policy.read?
+        end
         get do
           sample = Sample.where(id: params[:id])
           .includes(:molecule,:tag).last

From 4733cdb42e112e2ea7498b9e93247512e0eeaa74 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 5 Aug 2021 12:33:48 +0200
Subject: [PATCH 034/258] add validation

---
 app/api/chemotion/repository_api.rb | 326 +++++++++++++++-------------
 1 file changed, 177 insertions(+), 149 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 31c8522d1..94e6f1b48 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -1,5 +1,8 @@
+# frozen_string_literal: true
+
 require 'securerandom'
 module Chemotion
+  # Repository API
   class RepositoryAPI < Grape::API
     include Grape::Kaminari
     helpers ContainerHelpers
@@ -13,11 +16,10 @@ class RepositoryAPI < Grape::API
         def fetch_embargo_collection(cid)
           if (cid == 0)
             chemotion_user = User.chemotion_user
-            new_col_label = current_user.initials + '_' + Time.now.strftime("%Y-%m-%d")
-            col_check = Collection.where([" label like ? ", new_col_label+'%'])
-            new_col_label = new_col_label << '_' << (col_check&.length+1)&.to_s if col_check&.length > 0
-            new_embargo_col = Collection.create!(user: chemotion_user,
-            label: new_col_label, ancestry: current_user.publication_embargo_collection.id)
+            new_col_label = current_user.initials + '_' + Time.now.strftime('%Y-%m-%d')
+            col_check = Collection.where([' label like ? ', new_col_label + '%'])
+            new_col_label = new_col_label << '_' << (col_check&.length + 1)&.to_s if col_check&.length.positive?
+            new_embargo_col = Collection.create!(user: chemotion_user, label: new_col_label, ancestry: current_user.publication_embargo_collection.id)
             SyncCollectionsUser.find_or_create_by(user: current_user, shared_by_id: chemotion_user.id, collection_id: new_embargo_col.id,
             permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10,
             fake_ancestry: current_user.publication_embargo_collection.sync_collections_users.first.id.to_s)
@@ -62,20 +64,19 @@ def duplicate_analyses(new_element, analyses_arr, ik = nil)
             )
             # duplicate datasets and copy attachments
             ana.children.where(container_type: 'dataset').each do |ds|
-              new_dataset = new_ana.children.create(container_type: "dataset")
+              new_dataset = new_ana.children.create(container_type: 'dataset')
               ds.attachments.each do |att|
                 copied_att = att.copy(attachable_type: 'Container', attachable_id: new_dataset.id, transferred: true)
                 copied_att.save!
                 new_dataset.attachments << copied_att
 
                 # copy publication image file to public/images/publications/{attachment.id}/{attachment.filename}
-                if MimeMagic.by_path(copied_att.filename)&.type&.start_with?("image")
+                if MimeMagic.by_path(copied_att.filename)&.type&.start_with?('image')
                   file_path = File.join('public/images/publications/', copied_att.id.to_s, '/', copied_att.filename)
                   public_path = File.join('public/images/publications/', copied_att.id.to_s)
                   FileUtils.mkdir_p(public_path)
-                  File.write(file_path, copied_att.store.read_file.force_encoding("utf-8")) if copied_att.store.file_exist?
+                  File.write(file_path, copied_att.store.read_file.force_encoding('utf-8')) if copied_att.store.file_exist?
                 end
-
               end
 
               new_dataset.name = ds.name
@@ -95,7 +96,7 @@ def reviewer_collections
               permission_level: 3,
               sample_detail_level: 10,
               reaction_detail_level: 10,
-              label: "REVIEWING",
+              label: 'REVIEWING',
             )
           end
         end
@@ -108,7 +109,7 @@ def duplicate_sample(sample = @sample, analyses = @analyses, parent_publication_
           new_sample.collections << @embargo_collection unless @embargo_collection.nil?
           new_sample.save!
           unless @literals.nil?
-            lits = @literals&.select { |lit| lit['element_type'] == 'Sample' && lit['element_id'] == sample.id}
+            lits = @literals&.select { |lit| lit['element_type'] == 'Sample' && lit['element_id'] == sample.id }
             duplicate_literals(new_sample, lits)
           end
           duplicate_analyses(new_sample, analyses, new_sample.molecule.inchikey)
@@ -141,9 +142,10 @@ def duplicate_sample(sample = @sample, analyses = @analyses, parent_publication_
 
         def concat_author_ids(coauthors = params[:coauthors])
           coauthor_ids = coauthors.map do |coa|
-           val = coa.strip
-           next val.to_i if val =~ /^\d+$/
-           User.where(type: %w(Person Collaborator)).where.not(confirmed_at: nil).find_by(email: val)&.id if val =~ /^\S+@\S+$/
+            val = coa.strip
+            next val.to_i if val =~ /^\d+$/
+
+            User.where(type: %w(Person Collaborator)).where.not(confirmed_at: nil).find_by(email: val)&.id if val =~ /^\S+@\S+$/
           end.compact
           [current_user.id] + coauthor_ids
         end
@@ -164,7 +166,7 @@ def duplicate_reaction(reaction, analysis_set)
           #                                             solvents: solvents_in_svg,
           #                                             show_yield: true)
           # new_reaction.reaction_svg_file = composer.compose_reaction_svg_and_save(prefix: Time.now)
-          dir = File.join(Rails.root, 'public','images','reactions')
+          dir = File.join(Rails.root, 'public', 'images', 'reactions')
           rsf = reaction.reaction_svg_file
           path = File.join(dir, rsf)
           new_rsf = "#{Time.now.to_i}-#{rsf}"
@@ -172,7 +174,7 @@ def duplicate_reaction(reaction, analysis_set)
 
           new_reaction.save!
           unless @literals.nil?
-            lits = @literals&.select { |lit| lit['element_type'] == 'Reaction' && lit['element_id'] == reaction.id}
+            lits = @literals&.select { |lit| lit['element_type'] == 'Reaction' && lit['element_id'] == reaction.id }
             duplicate_literals(new_reaction, lits)
           end
           if File.exists? path
@@ -195,7 +197,7 @@ def duplicate_reaction(reaction, analysis_set)
           else
             # NB: the reaction has still no sample, so it cannot get a proper rinchi needed for the doi
             # => use the one from original reaction
-            d = Doi.create_for_element!(new_reaction, "reaction/" + reaction.products_short_rinchikey_trimmed)
+            d = Doi.create_for_element!(new_reaction, 'reaction/' + reaction.products_short_rinchikey_trimmed)
           end
 
           pub = Publication.create!(
@@ -212,10 +214,11 @@ def duplicate_reaction(reaction, analysis_set)
                 rinchi_long_key: princhi_long_key,
                 rinchi_short_key: princhi_short_key,
                 rinchi_web_key:  princhi_web_key
-              })
+              }
+            )
           )
 
-          duplicate_analyses(new_reaction, reaction_analysis_set, "reaction/" + reaction.products_short_rinchikey_trimmed)
+          duplicate_analyses(new_reaction, reaction_analysis_set, 'reaction/' + reaction.products_short_rinchikey_trimmed)
           reaction.reactions_samples.each  do |rs|
             new_rs = rs.dup
             sample = current_user.samples.find_by(id: rs.sample_id)
@@ -241,8 +244,8 @@ def duplicate_reaction(reaction, analysis_set)
 
         def create_publication_tag(contributor, author_ids, license)
           authors = User.where(type: %w(Person Collaborator), id: author_ids)
-                          .includes(:affiliations)
-                          .order("position(users.id::text in '#{author_ids}')")
+                        .includes(:affiliations)
+                        .order("position(users.id::text in '#{author_ids}')")
           affiliations = authors.map(&:current_affiliations)
           affiliations_output = {}
           affiliations.flatten.each do |aff|
@@ -266,7 +269,7 @@ def create_publication_tag(contributor, author_ids, license)
               'familyName' => contributor.last_name,
               'name' => contributor.name,
               'ORCID' => contributor.orcid,
-              'affiliations' => contributor.current_affiliations.map{ |aff| aff.output_full },
+              'affiliations' => contributor.current_affiliations.map(&:output_full),
               'id' => contributor.id
             },
             affiliations: affiliations_output,
@@ -291,14 +294,14 @@ def prepare_reaction_data
           pub
         end
 
-        def duplicate_literals(element,literals)
+        def duplicate_literals(element, literals)
           literals&.each do |lit|
             attributes = {
-             literature_id: lit.literature_id,
-             element_id: element.id,
-             element_type: lit.element_type,
-             category: 'detail',
-             user_id: lit.user_id
+              literature_id: lit.literature_id,
+              element_id: element.id,
+              element_type: lit.element_type,
+              category: 'detail',
+              user_id: lit.user_id
            }
            Literal.create(attributes)
           end
@@ -356,6 +359,7 @@ def update_tag_doi(element)
             if element&.class&.name == 'Reaction'
               element&.publication.children.each do |child|
                 next unless child&.element&.class&.name == 'Sample'
+
                 update_tag_doi(child.element)
               end
             end
@@ -365,38 +369,38 @@ def update_tag_doi(element)
 
       desc 'Get review list'
       params do
-        optional :type, type: String, desc: "Type"
-        optional :state, type: String, desc: "State"
+        optional :type, type: String, desc: 'Type'
+        optional :state, type: String, desc: 'State'
         optional :search_type, type: String, desc: 'search type', values: %w[All Name Embargo Submitter]
         optional :search_value, type: String, desc: 'search value'
-        optional :page, type: Integer, desc: "page"
-        optional :pages, type: Integer, desc: "pages"
-        optional :per_page, type: Integer, desc: "per page"
-
+        optional :page, type: Integer, desc: 'page'
+        optional :pages, type: Integer, desc: 'pages'
+        optional :per_page, type: Integer, desc: 'per page'
       end
       paginate per_page: 10, offset: 0, max_per_page: 100
       get 'list' do
-        type = (params[:type].blank? || params[:type] == 'All') ? ['Sample','Reaction'] : params[:type].chop!
+        type = (params[:type].blank? || params[:type] == 'All') ? ['Sample', 'Reaction'] : params[:type].chop!
         state = (params[:state].empty? || params[:state] == 'All') ? [Publication::STATE_PENDING, Publication::STATE_REVIEWED, Publication::STATE_ACCEPTED] : params[:state]
         pub_scope = if User.reviewer_ids.include?(current_user.id)
-                 Publication.where(state: state, ancestry: nil, element_type: type)
-               else
-                 Publication.where(state: state, ancestry: nil, element_type: type, published_by: current_user.id)
-               end
-        unless params[:search_value].blank? || params[:search_value].blank? || params[:search_value] == 'All'
+                      Publication.where(state: state, ancestry: nil, element_type: type)
+                    else
+                      Publication.where(state: state, ancestry: nil, element_type: type, published_by: current_user.id)
+                    end
+        unless params[:search_value].blank? || params[:search_value] == 'All'
           case params[:search_type]
           when 'Submitter'
             pub_scope = pub_scope.where(published_by: params[:search_value])
           when 'Embargo'
             embargo_search = <<~SQL
-            (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.collection_id = #{params[:search_value]}))
+            (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.collection_id = ?))
             or
-            (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.collection_id = #{params[:search_value]}))
+            (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.collection_id = ?))
             SQL
+            embargo_search = ActiveRecord::Base.send(:sanitize_sql_array, [embargo_search, params[:search_value], params[:search_value]])
             pub_scope = pub_scope.where(embargo_search)
           when 'Name'
-            r_name_sql = " r.short_label like '%#{params[:search_value]}%' "
-            s_name_sql = " s.short_label like '%#{params[:search_value]}%' "
+            r_name_sql = " r.short_label like '%#{ActiveRecord::Base.send(:sanitize_sql_like, params[:search_value])}%' "
+            s_name_sql = " s.short_label like '%#{ActiveRecord::Base.send(:sanitize_sql_like, params[:search_value])}%' "
             name_search = <<~SQL
             (element_type = 'Reaction' and element_id in (select id from reactions r where #{r_name_sql}))
             or
@@ -406,7 +410,7 @@ def update_tag_doi(element)
           end
         end
 
-        list = pub_scope.order("publications.updated_at desc")
+        list = pub_scope.order('publications.updated_at desc')
         elements = []
         paginate(list).each do |e|
           element_type = e.element&.class&.name
@@ -435,7 +439,7 @@ def update_tag_doi(element)
         else
           cols = Collection.where(ancestry: current_user.publication_embargo_collection.id).order('label ASC')
         end
-        { repository: cols, current_user: {id: current_user.id, type: current_user.type} }
+        { repository: cols, current_user: { id: current_user.id, type: current_user.type } }
       end
 
       namespace :assign_embargo do
@@ -445,8 +449,9 @@ def update_tag_doi(element)
           requires :element, type: Hash, desc: 'Element'
         end
         after_validation do
-          @p_element = params[:element]
-          @p_embargo = params[:new_embargo]
+          declared_params = declared(params, include_missing: false)
+          @p_element = declared_params[:element]
+          @p_embargo = declared_params[:new_embargo]
           pub = Publication.find_by(element_type: @p_element['type'].classify, element_id: @p_element['id'])
           error!('404 Publication not found', 404) unless pub
           error!("404 Publication state must be #{Publication::STATE_REVIEWED}", 404) unless pub.state == Publication::STATE_REVIEWED
@@ -476,35 +481,50 @@ def update_tag_doi(element)
       resource :compound do
         desc 'compound'
         params do
-          requires :id, type: Integer, desc: "Element id"
+          requires :id, type: Integer, desc: 'Element id'
           optional :data, type: String
         end
-        post 'request' do
-          PublicationMailer.mail_request_compound(current_user, params[:id], params[:data], 'request').deliver_now
-          PublicationMailer.mail_request_compound(current_user, params[:id], params[:data], 'confirmation').deliver_now
-        end
-        post 'update' do
-          pub = ElementTag.find_by(taggable_type: 'Sample', taggable_id: params[:id])
-          data = pub.taggable_data || {}
-          xvail = data['xvial'] || {}
-          xvail['num'] = params[:data]
-          xvail['username'] = current_user.name
-          xvail['userid'] = current_user.id
-          xvail['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
-          data['xvial'] = xvail
-          pub.update!(taggable_data: data)
+        resource :request do
+          post do
+            PublicationMailer.mail_request_compound(current_user, params[:id], params[:data], 'request').deliver_now
+            PublicationMailer.mail_request_compound(current_user, params[:id], params[:data], 'confirmation').deliver_now
+          end
+        end
+        resource :update do
+          after_validation do
+            @pub = ElementTag.find_by(taggable_type: 'Sample', taggable_id: params[:id])
+            error!('404 No data found', 404) unless @pub
+            element_policy = ElementPolicy.new(current_user, @pub.taggable)
+            error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
+          end
+          post do
+            data = @pub.taggable_data || {}
+            xvail = data['xvial'] || {}
+            xvail['num'] = params[:data]
+            xvail['username'] = current_user.name
+            xvail['userid'] = current_user.id
+            xvail['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
+            data['xvial'] = xvail
+            @pub.update!(taggable_data: data)
+          end
         end
       end
 
       resource :comment do
         desc 'User comment'
         params do
-          requires :id, type: Integer, desc: "Element id"
+          requires :id, type: Integer, desc: 'Element id'
           optional :type, type: String, values: %w[Reaction Sample Container]
-          requires :pageId, type: Integer, desc: "Page Element id"
+          requires :pageId, type: Integer, desc: 'Page Element id'
           optional :pageType, type: String, values: %w[reactions molecules]
           optional :comment, type: String
         end
+        after_validation do
+          @pub = Publication.find_by(element_type: params[:type], element_id: params[:id])
+          error!('404 No data found', 404) unless @pub
+          element_policy = ElementPolicy.new(current_user, @pub.element)
+          error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
+        end
         post 'user_comment' do
           PublicationMailer.mail_user_comment(current_user, params[:id], params[:type], params[:pageId], params[:pageType], params[:comment]).deliver_now
         end
@@ -512,10 +532,10 @@ def update_tag_doi(element)
           pub = Publication.find_by(element_type: params[:type], element_id: params[:id])
           review = pub.review || {}
           review_info = review['info'] || {}
-          review_info["comment"] = params[:comment]
-          review_info["timestamp"] = Time.now.strftime("%d-%m-%Y %H:%M:%S")
-          review_info["username"] = current_user.name
-          review_info["userid"] = current_user.id
+          review_info['comment'] = params[:comment]
+          review_info['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
+          review_info['username'] = current_user.name
+          review_info['userid'] = current_user.id
 
           review['info'] = review_info
           pub.update!(review: review)
@@ -524,14 +544,16 @@ def update_tag_doi(element)
 
       resource :reaction do
         helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized reaction"
+        desc 'Return PUBLISHED serialized reaction'
         params do
-          requires :id, type: Integer, desc: "Reaction id"
+          requires :id, type: Integer, desc: 'Reaction id'
           optional :is_public, type: Boolean, default: true
         end
         after_validation do
-          @element_policy = ElementPolicy.new(current_user, Reaction.find(params[:id]))
-          error!('401 Unauthorized', 401) unless @element_policy.read?
+          element = Reaction.find_by(id: params[:id])
+          error!('404 No data found', 404) unless element
+          element_policy = ElementPolicy.new(current_user, element)
+          error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
         end
         get do
           reaction = Reaction.where(id: params[:id])
@@ -547,7 +569,7 @@ def update_tag_doi(element)
           ).includes(container: :attachments).last
           literatures = get_literature(params[:id], 'Reaction', params[:is_public] ? 'public' : 'detail') || []
           reaction.products.each do |p|
-            literatures += get_literature(p.id,'Sample', params[:is_public]? 'public' : 'detail')
+            literatures += get_literature(p.id, 'Sample', params[:is_public] ? 'public' : 'detail')
           end
           schemeList = get_reaction_table(params[:id])
           publication = Publication.find_by(element_id: params[:id], element_type: 'Reaction')
@@ -566,14 +588,16 @@ def update_tag_doi(element)
 
       resource :sample do
         helpers RepositoryHelpers
-        desc "Return Review serialized Sample"
+        desc 'Return Review serialized Sample'
         params do
-          requires :id, type: Integer, desc: "Sample id"
+          requires :id, type: Integer, desc: 'Sample id'
           optional :is_public, type: Boolean, default: true
         end
         after_validation do
-          @element_policy = ElementPolicy.new(current_user, Sample.find(params[:id]))
-          error!('401 Unauthorized', 401) unless @element_policy.read?
+          element = Sample.find_by(id: params[:id])
+          error!('401 No data found', 401) unless element
+          element_policy = ElementPolicy.new(current_user, element)
+          error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
         end
         get do
           sample = Sample.where(id: params[:id])
@@ -582,7 +606,7 @@ def update_tag_doi(element)
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
           published_user = User.find(publication.published_by) unless publication.nil?
-          literatures = get_literature(params[:id], 'Sample', params[:is_public]? 'public' : 'detail')
+          literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: sample,
@@ -598,10 +622,10 @@ def update_tag_doi(element)
       end
 
       resource :metadata do
-        desc "metadata of publication"
+        desc 'metadata of publication'
         params do
-          requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction]
+          requires :id, type: Integer, desc: 'Id'
+          requires :type, type: String, desc: 'Type', values: %w[sample reaction]
         end
         after_validation do
           @root_publication = Publication.find_by(
@@ -616,7 +640,7 @@ def update_tag_doi(element)
           root_publication = @root_publication
           publications = [root_publication] + root_publication.descendants
           publications.each do |pub|
-            mt.push({element_type: pub.element_type, metadata_xml: pub.datacite_metadata_xml})
+            mt.push({ element_type: pub.element_type, metadata_xml: pub.datacite_metadata_xml })
           end
           { metadata: mt }
         end
@@ -625,11 +649,11 @@ def update_tag_doi(element)
           content_type('application/zip, application/octet-stream')
           root_publication = @root_publication
           publications = [root_publication] + root_publication.descendants
-          filename = URI.escape("metadata_#{root_publication.element_type}_#{root_publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.zip")
+          filename = URI.escape("metadata_#{root_publication.element_type}_#{root_publication.element_id}-#{Time.new.strftime('%Y%m%d%H%M%S')}.zip")
           header('Content-Disposition', "attachment; filename=\"#{filename}\"")
           zip = Zip::OutputStream.write_buffer do |zip|
             publications.each do |pub|
-              el_type = pub.element_type == "Container" ? "analysis" : pub.element_type.downcase
+              el_type = pub.element_type == 'Container' ? 'analysis' : pub.element_type.downcase
               zip.put_next_entry URI.escape("metadata_#{el_type}_#{pub.element_id}.xml")
               zip.write pub.datacite_metadata_xml
             end
@@ -642,8 +666,8 @@ def update_tag_doi(element)
         helpers do
           def query_submitter(element_type, state)
             if User.reviewer_ids.include?(current_user.id)
-              state_sql = (state == 'All' || state.empty?) ? " state in ('pending', 'reviewed', 'accepted')" : " state = '#{state}'"
-              type_sql = (element_type == 'All' || element_type.empty?) ? " element_type in ('Sample', 'Reaction')" : " element_type = '#{element_type.chop}'"
+              state_sql = (state == 'All' || state.empty?) ? " state in ('pending', 'reviewed', 'accepted')" : sanitize_sql([' state=? '], state)
+              type_sql = (element_type == 'All' || element_type.empty?) ? " element_type in ('Sample', 'Reaction')" : sanitize_sql([' element_type=? '], element_type.chop)
               search_scope = User.where(type: 'Person').where(
                 <<~SQL
                   users.id in (
@@ -702,18 +726,18 @@ def query_embargo
       namespace :reviewing do
         helpers do
           # TODO: mv to model
-          def save_comments(root, comment, action, his=true)
+          def save_comments(root, comment, action, his = true)
             review = root.review || {}
             review_history = review['history'] || []
             current = review_history.last
 
-            current["state"] = %w[accepted declined].include?(action) ? action : root.state
-            current["action"] = action unless action.nil?
-            current["username"] = current_user.name
-            current["userid"] = current_user.id
-            current["comment"] = comment unless comment.nil?
-            current["type"] = root.state == Publication::STATE_PENDING ? 'reviewed' : 'submit'
-            current["timestamp"] = Time.now.strftime("%d-%m-%Y %H:%M:%S")
+            current['state'] = %w[accepted declined].include?(action) ? action : root.state
+            current['action'] = action unless action.nil?
+            current['username'] = current_user.name
+            current['userid'] = current_user.id
+            current['comment'] = comment unless comment.nil?
+            current['type'] = root.state == Publication::STATE_PENDING ? 'reviewed' : 'submit'
+            current['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
 
             review_history[review_history.length - 1] = current
             if his  ## add next_node
@@ -732,9 +756,9 @@ def save_comment(root, comment)
             review_history = review['history'] || []
             current = review_history.last
             comments = current['comments'] || {}
-            comment[comment.keys[0]]["timestamp"] = Time.now.strftime("%d-%m-%Y %H:%M:%S") if comment.keys.length > 0
-            comment[comment.keys[0]]["username"] = current_user.name
-            comment[comment.keys[0]]["userid"] = current_user.id
+            comment[comment.keys[0]]['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S') if comment.keys.length > 0
+            comment[comment.keys[0]]['username'] = current_user.name
+            comment[comment.keys[0]]['userid'] = current_user.id
 
             current['comments'] = comments.deep_merge(comment || {})
             review['history'] = review_history
@@ -770,9 +794,9 @@ def accept_new_analysis(root, analysis, nil_analysis = true)
               aoids = atag&.delete('original_analysis_ids')
               ap.save! if aids || aoids
             end
-            analysis.children.where(container_type: "dataset").each do |ds|
+            analysis.children.where(container_type: 'dataset').each do |ds|
               ds.attachments.each do |att|
-                if MimeMagic.by_path(att.filename)&.type&.start_with?("image") && att.store.file_exist?
+                if MimeMagic.by_path(att.filename)&.type&.start_with?('image') && att.store.file_exist?
                   file_path = File.join('public/images/publications/', att.id.to_s, '/', att.filename)
                   public_path = File.join('public/images/publications/', att.id.to_s)
                   FileUtils.mkdir_p(public_path)
@@ -794,16 +818,16 @@ def element_submit(root)
               analyses_ids = root.element.analyses.pluck(:id)
               root.update!(taggable_data: root.taggable_data.merge(analysis_ids: analyses_ids))
               root.element.analyses.each do |sa|
-                accept_new_analysis(root,sa, Publication.find_by(element: sa).nil?)
+                accept_new_analysis(root, sa, Publication.find_by(element: sa).nil?)
               end
 
             when 'Reaction'
               root.element.products.each do |p|
-                Publication.find_by(element_type:'Sample', element_id: p.id)&.destroy! if p.analyses&.length == 0
+                Publication.find_by(element_type: 'Sample', element_id: p.id)&.destroy! if p.analyses&.length == 0
                 next if p.analyses&.length == 0
                 p.reserve_suffix
                 p.reserve_suffix_analyses(p.analyses)
-                prod_pub = Publication.find_by(element: p);
+                prod_pub = Publication.find_by(element: p)
                 if prod_pub.nil?
                   accept_new_sample(root, p)
                 else
@@ -825,7 +849,7 @@ def element_submit(root)
           def public_literature(root_publication)
             publications = [root_publication] + root_publication.descendants
             publications.each do |pub|
-              next unless pub.element_type=='Reaction' || pub.element_type =='Sample'
+              next unless pub.element_type == 'Reaction' || pub.element_type == 'Sample'
               literals = Literal.where(element_type: pub.element_type, element_id: pub.element_id)
               literals&.each { |l| l.update_columns(category: 'public') } unless literals.nil?
             end
@@ -833,10 +857,10 @@ def public_literature(root_publication)
 
         end
 
-        desc "process reviewed publication"
+        desc 'process reviewed publication'
         params do
-          requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction]
+          requires :id, type: Integer, desc: 'Id'
+          requires :type, type: String, desc: 'Type', values: %w[sample reaction]
           optional :comments, type: Hash
           optional :comment, type: String
         end
@@ -853,7 +877,7 @@ def public_literature(root_publication)
           save_comments(@root_publication, params[:comment], nil, false)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review["history"] }
+          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
         end
 
         post :comment do
@@ -867,10 +891,10 @@ def public_literature(root_publication)
           @root_publication.update_state(Publication::STATE_REVIEWED)
           @root_publication.process_element(Publication::STATE_REVIEWED)
           @root_publication.inform_users(Publication::STATE_REVIEWED)
-          #@root_publication.element
+          # @root_publication.element
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review["history"] }
+          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
         end
 
         post :submit do
@@ -881,7 +905,7 @@ def public_literature(root_publication)
           @root_publication.inform_users(Publication::STATE_PENDING)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review["history"] }
+          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
 
         end
 
@@ -897,7 +921,7 @@ def public_literature(root_publication)
 
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review["history"], message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
+          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'], message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
 
         end
         post :declined do
@@ -907,20 +931,20 @@ def public_literature(root_publication)
           @root_publication.inform_users(Publication::STATE_DECLINED, current_user.id)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review["history"] }
+          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
         end
       end
 
       namespace :publishSample do
-        desc "Publish Samples with chosen Dataset"
+        desc 'Publish Samples with chosen Dataset'
         params do
-          requires :sampleId, type: Integer, desc: "Sample Id"
-          requires :analysesIds, type: Array[Integer], desc: "Selected analyses ids"
-          optional :coauthors, type: Array[String], default: [], desc: "Co-author (User)"
-          optional :refs, type: Array[Integer], desc: "Selected references"
-          optional :embargo, type: Integer, desc: "Embargo collection"
-          requires :license, type: String, desc: "Creative Common License"
-          requires :addMe, type: Boolean, desc: "add me as author"
+          requires :sampleId, type: Integer, desc: 'Sample Id'
+          requires :analysesIds, type: Array[Integer], desc: 'Selected analyses ids'
+          optional :coauthors, type: Array[String], default: [], desc: 'Co-author (User)'
+          optional :refs, type: Array[Integer], desc: 'Selected references'
+          optional :embargo, type: Integer, desc: 'Embargo collection'
+          requires :license, type: String, desc: 'Creative Common License'
+          requires :addMe, type: Boolean, desc: 'add me as author'
         end
 
         after_validation do
@@ -964,21 +988,21 @@ def public_literature(root_publication)
 
       # desc: submit reaction data for publication
       namespace :publishReaction do
-        desc "Publish Reaction with chosen Dataset"
+        desc 'Publish Reaction with chosen Dataset'
         params do
-          requires :reactionId, type: Integer, desc: "Reaction Id"
-          requires :analysesIds, type: Array[Integer], desc: "Selected analyses ids"
-          optional :coauthors, type: Array[String], default: [], desc: "Co-author (User)"
-          optional :refs, type: Array[Integer], desc: "Selected references"
-          optional :embargo, type: Integer, desc: "Embargo collection"
-          requires :license, type: String, desc: "Creative Common License"
-          requires :addMe, type: Boolean, desc: "add me as author"
+          requires :reactionId, type: Integer, desc: 'Reaction Id'
+          requires :analysesIds, type: Array[Integer], desc: 'Selected analyses ids'
+          optional :coauthors, type: Array[String], default: [], desc: 'Co-author (User)'
+          optional :refs, type: Array[Integer], desc: 'Selected references'
+          optional :embargo, type: Integer, desc: 'Embargo collection'
+          requires :license, type: String, desc: 'Creative Common License'
+          requires :addMe, type: Boolean, desc: 'add me as author'
         end
 
         after_validation do
           @scheme_only = false
           @reaction = current_user.reactions.find_by(id: params[:reactionId])
-          error!('404 found no reaction to publish', 401) unless @reaction
+          error!('404 found no reaction to publish', 404) unless @reaction
           @analysis_set = @reaction.analyses.where(id: params[:analysesIds]) | Container.where(id: (@reaction.samples.map(&:analyses).flatten.map(&:id) & params[:analysesIds]))
           ols_validation(@analysis_set)
           if params[:addMe]
@@ -988,7 +1012,7 @@ def public_literature(root_publication)
           end
           error!('404 found no analysis to publish', 404) unless @analysis_set.present?
 
-          #error!('Reaction Publication not authorized', 401)
+          # error!('Reaction Publication not authorized', 401)
           @analysis_set_ids = @analysis_set.map(&:id)
           @literals = Literal.where(id: params[:refs]) unless params[:refs].nil? || params[:refs].empty?
         end
@@ -1042,10 +1066,14 @@ def public_literature(root_publication)
           end
         end
 
+        after_validation do
+          @pub = Publication.find_by(element_id: declared_params[:elementId], element_type: declared_params[:elementType], published_by: current_user.id)
+          error!('404 No publication found', 404) unless @pub
+        end
+
         post do
           declared_params = declared(params, include_missing: false)
 
-          pub = Publication.find_by(element_id: declared_params[:elementId], element_type: declared_params[:elementType])
           et = ElementTag.find_by(taggable_id: declared_params[:elementId], taggable_type: declared_params[:elementType])
           tagg_data = declared_params[:taggData] || {}
 
@@ -1053,7 +1081,7 @@ def public_literature(root_publication)
           tagg_data['affiliation_ids'] = tagg_data['creators']&.map { |cr| cr['affiliationIds'] }.flatten.uniq
           tagg_data['affiliations'] = tagg_data['affiliations']&.select { |k, _| tagg_data['affiliation_ids'].include?(k.to_i) }
 
-          pub_taggable_data = pub.taggable_data
+          pub_taggable_data = @pub.taggable_data
           pub_taggable_data = pub_taggable_data.deep_merge(tagg_data || {})
           pub.update(taggable_data: pub_taggable_data)
 
@@ -1082,24 +1110,24 @@ def public_literature(root_publication)
         after_validation do
           @reaction = current_user.reactions.find_by(id: params[:reactionId])
           @scheme_only = true
-          error!('404 found no reaction to publish', 401) unless @reaction
-          schemeYield = params[:products] && params[:products].map{|v| v.slice(:id, :_equivalent)}
-          @reaction.reactions_samples.select{|rs| rs.type == 'ReactionsProductSample'}.map do |p|
+          error!('404 found no reaction to publish', 404) unless @reaction
+          schemeYield = params[:products] && params[:products].map{ |v| v.slice(:id, :_equivalent) }
+          @reaction.reactions_samples.select{ |rs| rs.type == 'ReactionsProductSample' }.map do |p|
             py = schemeYield.select{ |o| o['id'] == p.sample_id }
             p.equivalent = py[0]['_equivalent'] if py && py.length > 0
             p.scheme_yield = py[0]['_equivalent'] if py && py.length > 0
           end
 
-          @reaction.reactions_samples.select{|rs| rs.type != 'ReactionsProductSample'}.map do |p|
+          @reaction.reactions_samples.select{ |rs| rs.type != 'ReactionsProductSample' }.map do |p|
             p.equivalent = 0
           end
           @reaction.name = ''
           @reaction.purification = '{}'
           @reaction.dangerous_products = '{}'
           unless params[:schemeDesc]
-            @reaction.description = {"ops"=>[{"insert"=>""}]}
+            @reaction.description = { "ops" => [{ "insert" => "" }] }
           end
-          @reaction.observation = {"ops"=>[{"insert"=>""}]}
+          @reaction.observation = { "ops" => [{ "insert" => "" }] }
           @reaction.tlc_solvents = ''
           @reaction.tlc_description = ''
           @reaction.rf_value = 0
@@ -1136,8 +1164,8 @@ def handle_embargo_collections(col)
             col.update_columns(ancestry: current_user.published_collection.id)
             sync_emb_col = col.sync_collections_users.where(user_id: current_user.id)&.first
             sync_published_col = SyncCollectionsUser.joins("INNER JOIN collections ON collections.id = sync_collections_users.collection_id ")
-            .where("collections.label='Published Elements'")
-            .where("sync_collections_users.user_id = #{current_user.id}").first
+                                                    .where("collections.label='Published Elements'")
+                                                    .where("sync_collections_users.user_id = #{current_user.id}").first
             sync_emb_col.update_columns(fake_ancestry: sync_published_col.id)
           end
 
@@ -1157,15 +1185,15 @@ def remove_embargo_collection(col)
            col.really_destroy!
           end
         end
-        desc "Generate account with chosen Embargo"
+        desc 'Generate account with chosen Embargo'
         params do
-          requires :collection_id, type: Integer, desc: "Embargo Collection Id"
+          requires :collection_id, type: Integer, desc: 'Embargo Collection Id'
         end
 
         after_validation do
           @embargo_collection = Collection.find(params[:collection_id])
           @sync_emb_col = @embargo_collection.sync_collections_users.where(user_id: current_user.id)&.first
-          error!('404 found no collection', 401) unless @sync_emb_col
+          error!('404 found no collection', 404) unless @sync_emb_col
         end
 
         get :list do
@@ -1197,8 +1225,8 @@ def remove_embargo_collection(col)
             name_abbreviation = "e#{SecureRandom.random_number(9999)}"
             email = "#{@embargo_collection.id}.#{name_abbreviation}@chemotion.net"
             pwd = Devise.friendly_token.first(8)
-            first_name = "External"
-            last_name = "Chemotion"
+            first_name = 'External'
+            last_name = 'Chemotion'
             type = 'Anonymous'
 
             params = { email: email, password: pwd, first_name: first_name, last_name: last_name, type: type, name_abbreviation: name_abbreviation, confirmed_at: Time.now }
@@ -1206,7 +1234,7 @@ def remove_embargo_collection(col)
             new_obj.profile.update!({data: {}})
             # sync collection with Anonymous user
             chemotion_user = User.chemotion_user
-            root_label = "with %s" %chemotion_user.name_abbreviation
+            root_label = 'with %s' %chemotion_user.name_abbreviation
             rc = Collection.find_or_create_by(user: new_obj, shared_by_id: chemotion_user.id, is_locked: true, is_shared: true, label: root_label)
 
             # Chemotion Collection
@@ -1246,7 +1274,7 @@ def remove_embargo_collection(col)
                 end
               when 'staging'
                 ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_later(@embargo_collection.id)
-                #ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
+                # ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
               else 'development'
               end
 
@@ -1276,7 +1304,7 @@ def remove_embargo_collection(col)
 
         post :move do
           begin
-            #@new_embargo = params[:new_embargo]
+            # @new_embargo = params[:new_embargo]
             @element = params[:element]
             @new_embargo_collection = fetch_embargo_collection(params[:new_embargo]&.to_i) if params[:new_embargo].present? && params[:new_embargo]&.to_i >= 0
             case @element['type']

From 24b9315e07c6769c669e85203ae514b404ba8256 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 6 Aug 2021 23:14:55 +0200
Subject: [PATCH 035/258] fix migration file for solvent

---
 .../20210527172347_add_solvent_to_samples.rb  | 13 +++--
 ...0617132532_change_data_type_for_solvent.rb | 53 ++++++++++---------
 .../20210806150600_fix_solvent_migration.rb   | 35 ++++++++++++
 3 files changed, 69 insertions(+), 32 deletions(-)
 create mode 100644 db/migrate/20210806150600_fix_solvent_migration.rb

diff --git a/db/migrate/20210527172347_add_solvent_to_samples.rb b/db/migrate/20210527172347_add_solvent_to_samples.rb
index 9e145deaa..6cc7e1541 100644
--- a/db/migrate/20210527172347_add_solvent_to_samples.rb
+++ b/db/migrate/20210527172347_add_solvent_to_samples.rb
@@ -1,12 +1,11 @@
 class AddSolventToSamples < ActiveRecord::Migration[4.2]
   def change
-    rename_column :samples, :solvent, :deprecated_solvent
-    add_column :samples, :solvent, :string
+    # rename_column :samples, :solvent, :deprecated_solvent
+    # add_column :samples, :solvent, :string
 
-    Sample.where(solvent: [nil, '']).where.not(deprecated_solvent: [nil, '']).find_each do |item|
-      solvent = Chemotion::SampleConst.solvents_smiles_options.find { |s| item.deprecated_solvent&.include?(s[:label]) }
-      new_sol = solvent ? [{ label: solvent[:value][:external_label], smiles: solvent[:value][:smiles], ratio: '1' }].to_json : nil
-      item.update_columns(solvent: new_sol)
-    end
+    # Sample.where(solvent: [nil, '']).where.not(deprecated_solvent: [nil, '']).find_each do |item|
+    #   solvent = Chemotion::SampleConst.solvents_smiles_options.find { |s| s[:label].include?(item.deprecated_solvent) }
+    #   item.update_columns(solvent: [{ label: solvent[:value][:external_label], smiles: solvent[:value][:smiles], ratio: '1' }].to_json)
+    # end
   end
 end
diff --git a/db/migrate/20210617132532_change_data_type_for_solvent.rb b/db/migrate/20210617132532_change_data_type_for_solvent.rb
index 28ef54c0c..d7ac926e1 100644
--- a/db/migrate/20210617132532_change_data_type_for_solvent.rb
+++ b/db/migrate/20210617132532_change_data_type_for_solvent.rb
@@ -1,30 +1,33 @@
 class ChangeDataTypeForSolvent < ActiveRecord::Migration[4.2]
   def change
-    rename_column :samples, :solvent, :solvent_old
-    add_column :samples, :solvent, :jsonb
-    Sample.reset_column_information
-    Sample.where(solvent: [nil, []]).where.not(solvent_old: [nil, '']).find_each do |sample|
-      solvent_string = sample.solvent_old
-      next if solvent_string.blank?
-      solvent_string.gsub(/nil/, 'null')
-                    .gsub(/=>/, ':')
-                    .gsub(/\\+/,'')
-                    .gsub(/"\{/,'{')
-                    .gsub(/\}"/,'}')
-                    .gsub(/\[\[+/, '[')
-                    .gsub(/\]\]+/, ']')
-                                
-      next if solvent_string == '[{}]'
- 
-      begin
-        solvent = JSON.parse(solvent_string) 
-        sample.update_columns(solvent: solvent) 
-      rescue JSON::ParserError, TypeError
-        File.write('failed_sample_solvent.log', "#{sample.id}: #{sample.solvent_old}\n", mode: 'a')
-      end
-    end
 
-    remove_column :samples, :solvent_old, :string
-    Sample.reset_column_information
+    # rename_column :samples, :solvent, :solvent_old
+    # add_column :samples, :solvent, :jsonb
+    # Sample.reset_column_information
+    # Sample.where(solvent: [nil, []]).where.not(solvent_old: [nil, '']).find_each do |sample|
+    #   solvent_string = sample.solvent_old
+    #   next if solvent_string.blank?
+    #   solvent_string.gsub(/nil/, 'null')
+    #                 .gsub(/=>/, ':')
+    #                 .gsub(/\\+/,'')
+    #                 .gsub(/"\{/,'{')
+    #                 .gsub(/\}"/,'}')
+    #                 .gsub(/\[\[+/, '[')
+    #                 .gsub(/\]\]+/, ']')
+
+    #   next if solvent_string == '[{}]'
+
+    #   begin
+    #     solvent = JSON.parse(solvent_string)
+    #     sample.update_columns(solvent: solvent)
+    #   rescue JSON::ParserError, TypeError
+    #     File.write('failed_sample_solvent.log', "#{sample.id}: #{sample.solvent_old}\n", mode: 'a')
+    #   end
+    # end
+
+    # remove_column :samples, :solvent_old, :string
+    # Sample.reset_column_information
+
+
   end
 end
diff --git a/db/migrate/20210806150600_fix_solvent_migration.rb b/db/migrate/20210806150600_fix_solvent_migration.rb
new file mode 100644
index 000000000..e83b23731
--- /dev/null
+++ b/db/migrate/20210806150600_fix_solvent_migration.rb
@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# Create fix solvent migration
+class FixSolventMigration < ActiveRecord::Migration
+  def change
+    solvent_list = {}
+    Sample.where.not(solvent: nil).find_each do |sample|
+      next if sample.solvent.blank?
+
+      solvent_list[sample.id] = sample.solvent
+    end
+
+    rename_column :samples, :solvent, :tmp_solvent
+    add_column :samples, :solvent, :jsonb
+
+    Sample.where.not(tmp_solvent: nil).find_each do |sample|
+      next if sample.tmp_solvent.blank?
+
+      solvent_string = Chemotion::SampleConst.solvents_smiles_options.find { |s| s[:label].include?(sample.tmp_solvent) }
+
+      if solvent_string.blank? || solvent_string[:value][:external_label].blank? || solvent_string[:value][:smiles].blank?
+        File.write('REPO_failed_sample_solvent.log', "#{sample.id}:#{sample.solvent_string}  (can not file mapping) \n", mode: 'a')
+      end
+      solvent_json = [{ label: sample.tmp_solvent, smiles: solvent_string[:value][:smiles], ratio: '1' }].to_json
+      begin
+        sample.update_columns(solvent: solvent_json)
+      rescue JSON::ParserError, TypeError
+        File.write('REPO_failed_sample_solvent.log', "#{sample.id}: #{sample.solvent_string}  (TypeError) \n", mode: 'a')
+      end
+    end
+    File.write('REPO_solvents.json', JSON.pretty_generate(solvent_list))
+
+    remove_column :samples, :tmp_solvent
+  end
+end

From 3fe0bc40357669d877cc08cf4d1e0b06ea2e12c3 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 29 Sep 2021 12:07:55 +0200
Subject: [PATCH 036/258] review reaction scheme

---
 app/api/chemotion/repository_api.rb           |  4 +--
 app/api/helpers/repository_helpers.rb         | 13 +++++-----
 app/assets/javascripts/libHome/RepoCommon.js  | 25 ++++++++++---------
 .../libHome/RepoReactionDetails.js            |  3 +++
 .../libHome/RepoReactionSchemeInfo.js         |  2 +-
 .../javascripts/libHome/RepoReviewDetails.js  |  1 +
 .../MoleculeModeratorComponent.js             |  4 +--
 7 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 94e6f1b48..887c1f5f3 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -666,8 +666,8 @@ def update_tag_doi(element)
         helpers do
           def query_submitter(element_type, state)
             if User.reviewer_ids.include?(current_user.id)
-              state_sql = (state == 'All' || state.empty?) ? " state in ('pending', 'reviewed', 'accepted')" : sanitize_sql([' state=? '], state)
-              type_sql = (element_type == 'All' || element_type.empty?) ? " element_type in ('Sample', 'Reaction')" : sanitize_sql([' element_type=? '], element_type.chop)
+              state_sql = (state == 'All' || state.empty?) ? " state in ('pending', 'reviewed', 'accepted')" : ActiveRecord::Base.send(:sanitize_sql_array, [' state=? ', state])
+              type_sql = (element_type == 'All' || element_type.empty?) ? " element_type in ('Sample', 'Reaction')" : ActiveRecord::Base.send(:sanitize_sql_array, [' element_type=? ', element_type.chop])
               search_scope = User.where(type: 'Person').where(
                 <<~SQL
                   users.id in (
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index fe94421ab..693fb943c 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -38,8 +38,9 @@ def get_reaction_table(id)
     .select(
       <<~SQL
       reactions_samples.id,
+      (select name from molecule_names mn where mn.id = samples.molecule_name_id) as molecule_name,
       molecules.iupac_name, molecules.sum_formular,
-      molecules.molecular_weight, samples.name,
+      molecules.molecular_weight, samples.name, samples.short_label,
       samples.real_amount_value, samples.real_amount_unit,
       samples.target_amount_value, samples.target_amount_unit,
       samples.purity, samples.density, samples.external_label,
@@ -64,10 +65,9 @@ def get_reaction_table(id)
     ).order('reactions_samples.position ASC').as_json
 
     schemeSorted = schemeAll.sort_by {|o| o['type_seq']}
-
     solvents_sum = schemeAll.select{ |d| d['mat_group'] === 'solvents'}.sum { |r|
-    value = r['real_amount_value'].nil? ? r['target_amount_value'].to_f : r['real_amount_value'].to_f
-    unit = r['real_amount_value'].nil? ? r['target_amount_unit'] : r['real_amount_unit']
+    value = (r['real_amount_value'].nil? || r['real_amount_value'].zero?) ? r['target_amount_value'].to_f : r['real_amount_value'].to_f
+    unit = (r['real_amount_value'].nil? || r['real_amount_value'].zero?) ? r['target_amount_unit'] : r['real_amount_unit']
 
     has_molarity = !r['molarity_value'].nil? && r['molarity_value'] > 0.0 && (r['density'] === 0.0) || false
     has_density = !r['density'].nil? && r['density'] > 0.0 && (r['molarity_value'] === 0.0) || false
@@ -85,9 +85,8 @@ def get_reaction_table(id)
     schemeList = []
     schemeList = schemeSorted.map do |r|
       scheme = {}
-      value = r['real_amount_value'].nil? ? r['target_amount_value'].to_f : r['real_amount_value'].to_f
-      unit = r['real_amount_value'].nil? ? r['target_amount_unit'] : r['real_amount_unit']
-
+      value = (r['real_amount_value'].nil? || r['real_amount_value'].zero?) ? r['target_amount_value'].to_f : r['real_amount_value'].to_f
+      unit = (r['real_amount_value'].nil? || r['real_amount_value'].zero?) ? r['target_amount_unit'] : r['real_amount_unit']
       has_molarity = !r['molarity_value'].nil? && r['molarity_value'] > 0.0 && (r['density'] === 0.0) || false
       has_density = !r['density'].nil? && r['density'] > 0.0 && (r['molarity_value'] === 0.0) || false
 
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index ee2eda8d3..4bb79525c 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -901,8 +901,8 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
         {nameOrFormula}
         <br />
         <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-        <h5><b>InChi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-        <h5><b>InChiKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+        <h5><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+        <h5><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
         <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
         {
           hasXvial ?
@@ -969,9 +969,9 @@ class RenderAnalysisHeader extends Component {
               </span>
               {nameOrFormula}
               {iupacUserDefined}
-              <h6><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
-              <h6><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
-              <h6><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
+              <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
+              <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
+              <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
               <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
               <h6><b>DOI: </b>
                 {
@@ -1038,7 +1038,7 @@ ToggleIndicator.defaultProps = {
 
 
 const ReactionTable = ({
-  reaction, toggle, show, bodyAttrs, canComment, isPublic = true
+  reaction, toggle, show, bodyAttrs, canComment, isPublic = true, isReview = false
 }) => {
   let schemes = [];
   let sumSolvents = 0.0;
@@ -1102,15 +1102,15 @@ const ReactionTable = ({
     );
   };
 
-  const rows = (samples) => {
+  const rows = (samples, isReview=false) => {
     let currentType = '';
     return (
       typeof samples !== 'undefined'
         ? samples.map((sample, i) => {
           const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          label = canComment ? (label || sample.name) : label;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
+          const rLabel = (sample.short_label || '').concat('   ', sample.name || '');
+          let label = isReview ? (<td style={{ width: '26%' }}>{rLabel}<br />{sample.molecule_name || sample.iupac_name || sample.sum_formular}</td>) : (<td style={{ width: '26%' }}>{sample.molecule_name || sample.iupac_name || sample.sum_formular}</td>);
+          if (sample.mat_group === 'solvents') label = (<td style={{ width: '26%' }}>{sample.external_label}</td>);
           let title = null;
           if (currentType !== sample.mat_group) {
             currentType = sample.mat_group;
@@ -1120,7 +1120,7 @@ const ReactionTable = ({
             <tbody key={i}>
               {title}
               <tr>
-                <td style={{ width: '26%' }}>{label}</td>
+                {label}
                 <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
                 <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
                 <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
@@ -1159,7 +1159,7 @@ const ReactionTable = ({
         <Panel.Collapse>
           <Panel.Body {...bodyAttrs} >
             <div>
-              {table(rows(schemes))}
+              {table(rows(schemes, isReview))}
             </div>
           </Panel.Body>
         </Panel.Collapse>
@@ -1576,6 +1576,7 @@ const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
               toggle={toggleScheme}
               show={showScheme}
               isPublic={isPublic}
+              isReview={false}
               bodyAttrs={bodyAttrs}
             />
           </Col>
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 3e2fba1d6..347d0dfbd 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -250,6 +250,7 @@ export default class RepoReactionDetails extends Component {
                 toggle={this.toggleScheme}
                 show={showScheme}
                 isPublic
+                isReview={this.props.isReview}
                 bodyAttrs={bodyAttrs}
                 canComment={canComment}
               />
@@ -528,6 +529,7 @@ RepoReactionDetails.propTypes = {
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
   isSubmitter: PropTypes.bool,
+  isReview: PropTypes.bool,
   history: PropTypes.array,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
@@ -538,6 +540,7 @@ RepoReactionDetails.defaultProps = {
   canComment: false,
   isSubmitter: false,
   reviewLevel: 0,
+  isReview: false,
   history: [],
   canClose: true,
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
index 9b3f0c298..e24481c5f 100644
--- a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
+++ b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import {
   Panel,
@@ -14,7 +15,6 @@ const RepoReactionSchemeInfo = (props) => {
     && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
   const descQV = contentlength > 0 ?
     (<span><b>Description:</b><QuillViewer value={content} /></span>) : null;
-
   return (
     <Panel style={{ marginBottom: '4px' }}>
       <Panel.Body style={{ paddingBottom: '1px' }}>
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
index c8b102166..d8e580d7b 100644
--- a/app/assets/javascripts/libHome/RepoReviewDetails.js
+++ b/app/assets/javascripts/libHome/RepoReviewDetails.js
@@ -41,6 +41,7 @@ export default class RepoReviewDetails extends Component {
             canComment
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
+            isReview={true}
             history={this.state.historyInfo ? this.state.historyInfo : []}
           />);
       case 'sample':
diff --git a/app/packs/src/apps/moleculeModerator/MoleculeModeratorComponent.js b/app/packs/src/apps/moleculeModerator/MoleculeModeratorComponent.js
index aebcf4e7e..b2c1e958a 100644
--- a/app/packs/src/apps/moleculeModerator/MoleculeModeratorComponent.js
+++ b/app/packs/src/apps/moleculeModerator/MoleculeModeratorComponent.js
@@ -262,10 +262,10 @@ export default class MoleculeModeratorComponent extends Component {
         <div className="container">
           <Panel>
             <Panel.Heading>
-              <b>InChiKey:</b>&nbsp;{this.props.molecule.inchikey}
+              <b>InChIKey:</b>&nbsp;{this.props.molecule.inchikey}
               &nbsp;(<b>Chemotion molecule id:</b>&nbsp;{this.props.molecule.id})
               <br />
-              <b>Canonical Smiles:</b>&nbsp;{this.props.molecule.cano_smiles}
+              <b>Canonical SMILES:</b>&nbsp;{this.props.molecule.cano_smiles}
             </Panel.Heading>
             <Panel.Body>
               <Row>

From a1ee48b49e20c99472e543df33e133cc843cf741 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 5 Oct 2021 16:51:07 +0200
Subject: [PATCH 037/258] fix duplicate function name from ELN rebase; publish
 reaction

---
 app/api/chemotion/public_api.rb               |  41 ++++++-
 .../reaction_publication_list_entity.rb       |  24 ++++
 app/api/helpers/repository_helpers.rb         |   2 +-
 app/assets/javascripts/libHome/RepoCommon.js  |  10 +-
 app/assets/javascripts/libHome/RepoPubl.js    |  28 ++---
 .../javascripts/libHome/RepoReactionList.js   | 103 ++++++++++++++++++
 app/assets/stylesheets/common.scss            |   4 +-
 app/assets/stylesheets/repo_home.scss         |  17 +++
 app/packs/src/components/common/ImageModal.js |  39 ++-----
 9 files changed, 207 insertions(+), 61 deletions(-)
 create mode 100644 app/api/entities/reaction_publication_list_entity.rb
 create mode 100644 app/assets/javascripts/libHome/RepoReactionList.js

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 15f8dae83..1612f02e8 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -461,8 +461,7 @@ def query_embargo(name)
           optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: ReactionGuestListSerializer do
-
+        get '/' do
           if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
             case params[:adv_type]
             when 'Authors'
@@ -488,11 +487,43 @@ def query_embargo(name)
             adv_search = ' '
           end
 
+          com_config = Rails.configuration.compound_opendata
+          embargo_sql = <<~SQL
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, publications.taggable_data, 
+            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
+            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
+            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
+          SQL
+
           if params[:scheme_only]
-            paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
           else
-            paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
+          end
+
+          entities = Entities::ReactionPublicationListEntity.represent(list, serializable: true)
+
+          ids = entities.map { |e| e[:id] }
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+          SQL
+          x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+            inner join molecules m on m.id = s.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:id])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
           end
+
+          entities
         end
       end
 
@@ -632,7 +663,7 @@ def query_embargo(name)
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:products].each do |p|
             pub_product = p
-            p[:xvialCom] = build_xvial_com(p[:molecule]['inchikey'], current_user&.id)
+            p[:xvialCom] = build_xvial_com(p[:molecule][:inchikey], current_user&.id)
             pub_product_tag = pub_product[:tag]['taggable_data']
             next if pub_product_tag.nil?
 
diff --git a/app/api/entities/reaction_publication_list_entity.rb b/app/api/entities/reaction_publication_list_entity.rb
new file mode 100644
index 000000000..dc0e1c0fd
--- /dev/null
+++ b/app/api/entities/reaction_publication_list_entity.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class ReactionPublicationListEntity < Grape::Entity
+    expose :id, :reaction_svg_file, :name
+
+    expose :embargo do |obj|
+      obj[:embargo]
+    end
+
+    expose :taggable_data do |obj|
+      obj[:taggable_data] || {}
+    end
+
+    expose :pub_id do |obj|
+      obj[:pub_id] || {}
+    end
+
+    expose :ana_cnt do |obj|
+      obj[:ana_cnt] || {}
+    end
+  end
+end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 693fb943c..479eaf3a7 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -38,7 +38,7 @@ def get_reaction_table(id)
     .select(
       <<~SQL
       reactions_samples.id,
-      (select name from molecule_names mn where mn.id = samples.molecule_name_id) as molecule_name,
+      (select name from molecule_names mn where mn.id = samples.molecule_name_id) as molecule_iupac_name,
       molecules.iupac_name, molecules.sum_formular,
       molecules.molecular_weight, samples.name, samples.short_label,
       samples.real_amount_value, samples.real_amount_unit,
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 4bb79525c..76966255d 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1102,15 +1102,16 @@ const ReactionTable = ({
     );
   };
 
-  const rows = (samples, isReview=false) => {
+  const rows = (samples, isReview = false) => {
     let currentType = '';
     return (
       typeof samples !== 'undefined'
         ? samples.map((sample, i) => {
           const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
           const rLabel = (sample.short_label || '').concat('   ', sample.name || '');
-          let label = isReview ? (<td style={{ width: '26%' }}>{rLabel}<br />{sample.molecule_name || sample.iupac_name || sample.sum_formular}</td>) : (<td style={{ width: '26%' }}>{sample.molecule_name || sample.iupac_name || sample.sum_formular}</td>);
-          if (sample.mat_group === 'solvents') label = (<td style={{ width: '26%' }}>{sample.external_label}</td>);
+          const useName = isPublic ? (sample.molecule_iupac_name || sample.iupac_name || sample.sum_formular) : (sample.molecule_iupac_name);
+          let label = isReview ? (<span>{rLabel}<br />{useName}</span>) : useName;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
           let title = null;
           if (currentType !== sample.mat_group) {
             currentType = sample.mat_group;
@@ -1120,7 +1121,7 @@ const ReactionTable = ({
             <tbody key={i}>
               {title}
               <tr>
-                {label}
+                <td style={{ width: '26%' }}>{label}</td>
                 <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
                 <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
                 <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
@@ -1134,7 +1135,6 @@ const ReactionTable = ({
         : null
     );
   };
-
   const table = dataRows => (
     <Table responsive>
       <thead>
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 3175d560d..4606c3f9a 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -19,7 +19,7 @@ import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
 import Formula from '../components/common/Formula';
 import LoadingActions from '../components/actions/LoadingActions';
-import { ElStateLabel } from './RepoCommon';
+import RepoReactionList from './RepoReactionList';
 
 const xvialTag = (element, hasXvial = null) => {
   const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
@@ -55,25 +55,9 @@ const pubchemTag = (molecule) => {
   return false;
 };
 
-const renderReaction = (element, currentElement, isPubElement) => {
-  const listClass = (currentElement !== null && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={`list-reaction-${element.type}-${element.id}`}
-      className={listClass}
-      onClick={() => PublicActions.displayReaction(element.id)}
-    >
-      <td style={{ position: 'relative' }}>
-        <div>
-          {svgTag(element.svgPath, 'reaction', isPubElement)}
-        </div>
-      </td>
-      <td>
-        {xvialTag(element)}&nbsp;{ElStateLabel(element.embargo)}
-      </td>
-    </tr>
-  );
-};
+const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
+  <RepoReactionList element={element} currentElement={currentElement} isPubElement={isPubElement} schemeOnly={schemeOnly} />
+);
 
 const hints = {
   reaction: {
@@ -709,6 +693,8 @@ export default class RepoPubl extends Component {
 
     const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
 
+    console.log(reactions);
+
     const elementList = () => {
       switch (listType) {
         case 'reaction':
@@ -716,7 +702,7 @@ export default class RepoPubl extends Component {
         case 'sample':
           return (molecules || []).map(m => this.renderMolecule(m, isPubElement));
         case 'scheme':
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));
         default:
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
       }
diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/assets/javascripts/libHome/RepoReactionList.js
new file mode 100644
index 000000000..a722f569b
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReactionList.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import PropTypes from 'prop-types';
+import { Popover, OverlayTrigger, Row, Col } from 'react-bootstrap';
+import { ElStateLabel } from './RepoCommon';
+import PublicActions from '../components/actions/PublicActions';
+
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
+const svgTag = (path, klassName, isPubElement) => {
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
+    </Popover>
+  );
+  return isPubElement ? (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={klassName} key={path} /></div>
+    </OverlayTrigger>
+  ) : <SVG src={path} className={klassName} key={path} />;
+};
+
+
+const infoTag = (reaction, schemeOnly) => {
+  const pubData = (reaction && reaction.pub_id) || '';
+  const taggData = (reaction && reaction.taggable_data) || {};
+
+  let authorInfo = '';
+  if (taggData && taggData.creators && taggData.creators.length > 0) {
+    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div>{taggData.creators[0] && taggData.creators[0].name}</div></div>);
+  } else if (taggData && taggData.contributors) {
+    authorInfo = (<div className="home_wrapper_item"><div>Contributor</div><div>{taggData.contributors.name}</div></div>);
+  } else {
+    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div /></div>);
+  }
+
+  return (
+    <div key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
+      <div className="home_wrapper_item">
+        <div>ID</div><div>{`CRR-${pubData}`}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Embargo Bundle</div><div>{ElStateLabel(reaction.embargo)}</div>
+      </div>
+      {authorInfo}
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div>{reaction.ana_cnt || 0}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>X-Vial</div><div>{xvialTag(reaction)}</div>
+      </div>
+    </div>
+  );
+}
+
+export default class RepoReactionList extends Component {
+  constructor(props) {
+      super(props);
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    const { element, currentElement, isPubElement, schemeOnly } = this.props;
+    const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
+    console.log(element.id);
+    return (
+      <Col md={isPubElement === true ? 12 : 6} style={{ border: '1px solid' }} key={`list-reaction-${element.id}`} className={listClass} onClick={() => PublicActions.displayReaction(element.id)} >
+        <Row key={`list-reaction-svg-${element.id}`} className={listClass}>
+          <Col md={12}>
+            {svgTag(element.svgPath, 'reaction', isPubElement)}
+          </Col>
+        </Row>
+        {infoTag(element, schemeOnly)}
+      </Col>
+    );
+  }
+}
+
+
+RepoReactionList.propTypes = {
+  element: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+  schemeOnly: PropTypes.bool
+}
+
+
+RepoReactionList.defaultProps = {
+  isPubElement: false,
+  schemeOnly: false,
+  currentElement: null
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d56150496..0459a79ae 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -264,11 +264,11 @@ $color-required: #d9534f;
 
 .list_focus_off {
   cursor: pointer;
-  background-color: #F5F5F5;
+  background-color: white;
 }
 .list_focus_on {
   cursor: pointer;
-  background-color: #d4edda !important;
+  background-color: white !important;
 }
 
 .feature {
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 8f2a9e3bf..ad955b7bd 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -658,3 +658,20 @@ $bs-successcolor: #5cb85c;
     max-width: 200px;
   }
 }
+
+.home_wrapper {
+  display: flex;
+  background-color: white;
+}
+
+.home_wrapper_item {
+  flex: 1 20%;
+  text-align: center;
+  margin: 10px;
+}
+
+.home_wrapper_item > div {
+  flex: 1 100%;
+  text-align: center;
+}
+
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index aecc5606b..6f2ba7203 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -1,3 +1,4 @@
+// PLEASE check carefully when performing ELN rebasing
 import React, { Component, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button } from 'react-bootstrap';
@@ -5,6 +6,7 @@ import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import { stopEvent } from 'src/utilities/DomHelper';
 import { Modal, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { Document, Page, pdfjs } from 'react-pdf';
+import UserStore from '../stores/UserStore';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 const defaultImageStyle = {
@@ -12,7 +14,6 @@ const defaultImageStyle = {
     cursor: 'default'
   }
 };
-import UserStore from '../stores/UserStore';
 
 export default class ImageModal extends Component {
   constructor(props) {
@@ -48,28 +49,6 @@ export default class ImageModal extends Component {
     }
   }
 
-  fetchImage() {
-    const { currentUser } = UserStore.getState();
-    if (!currentUser) {
-      const fileSrc = ['/images/publications', this.props.popObject.fetchId, this.props.popObject.fetchFilename].join('/');
-      this.setState({ fetchSrc: fileSrc });
-    } else {
-    AttachmentFetcher.fetchImageAttachment({ id: this.props.popObject.fetchId })
-      .then((result) => {
-        if (result.data != null) {
-          this.setState({ fetchSrc: result.data });
-          if (result.type === "application/pdf") {
-            this.setState({ isPdf: true });
-          }
-          else {
-            this.setState({ isPdf: false });
-          }
-        }
-      });
-
-    }
-  }
-
   handleModalClose(e) {
     stopEvent(e);
     this.setState({ showModal: false });
@@ -112,10 +91,16 @@ export default class ImageModal extends Component {
   }
 
   fetchImage() {
-    AttachmentFetcher.fetchImageAttachment({ id: this.props.popObject.fetchId })
-      .then((result) => {
-        if (result.data != null) { this.setState({ fetchSrc: result.data, isPdf: (result.type === 'application/pdf') }); }
-      });
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) {
+      const fileSrc = ['/images/publications', this.props.popObject.fetchId, this.props.popObject.fetchFilename].join('/');
+      this.setState({ fetchSrc: fileSrc });
+    } else {
+      AttachmentFetcher.fetchImageAttachment({ id: this.props.popObject.fetchId })
+        .then((result) => {
+          if (result.data != null) { this.setState({ fetchSrc: result.data, isPdf: (result.type === 'application/pdf') }); }
+        });
+    }
   }
 
   handleModalClose(e) {

From 56ac8602f28a669284e07be58fdf6f1d494379b8 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 15 Oct 2021 00:09:07 +0200
Subject: [PATCH 038/258] styling

---
 app/assets/javascripts/libHome/RepoPubl.js    |  7 +--
 .../javascripts/libHome/RepoReactionList.js   | 58 +++++++++++--------
 app/assets/stylesheets/common.scss            |  9 ---
 app/assets/stylesheets/repo_home.scss         | 32 +++++++++-
 4 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 4606c3f9a..68f386ec0 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -75,7 +75,7 @@ const hints = {
 };
 
 const overTip = tab => (
-  <Tooltip id="t_tip">
+  <Tooltip id="t_tip" className="left_tooltip bs_tooltip">
     <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;{hints[tab].content}
   </Tooltip>
 );
@@ -692,9 +692,6 @@ export default class RepoPubl extends Component {
     )));
 
     const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
-
-    console.log(reactions);
-
     const elementList = () => {
       switch (listType) {
         case 'reaction':
@@ -723,7 +720,7 @@ export default class RepoPubl extends Component {
             </Navbar.Form>
           </Navbar>
 
-          <div className={listClass} style={{ backgroundColor: '#f5f5f5' }} >
+          <div className={listClass} style={{ backgroundColor: '#efefef' }}>
             <Table className="sample-entries">
               <tbody>
                 {elementList()}
diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/assets/javascripts/libHome/RepoReactionList.js
index a722f569b..ebe23e4f1 100644
--- a/app/assets/javascripts/libHome/RepoReactionList.js
+++ b/app/assets/javascripts/libHome/RepoReactionList.js
@@ -1,7 +1,9 @@
+/* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
+import uuid from 'uuid';
 import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
-import { Popover, OverlayTrigger, Row, Col } from 'react-bootstrap';
+import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
 import { ElStateLabel } from './RepoCommon';
 import PublicActions from '../components/actions/PublicActions';
 
@@ -13,6 +15,7 @@ const xvialTag = (element, hasXvial = null) => {
   } else {
     hasXCom = (element.xvial_com > 0);
   }
+  if (!hasX && !hasXCom) return ('-');
   return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
 };
 
@@ -44,21 +47,27 @@ const infoTag = (reaction, schemeOnly) => {
   }
 
   return (
-    <div key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
-      <div className="home_wrapper_item">
-        <div>ID</div><div>{`CRR-${pubData}`}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Embargo Bundle</div><div>{ElStateLabel(reaction.embargo)}</div>
-      </div>
+    <Row key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div>{`CRR-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which has been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div>{reaction.embargo}</div>
+        </div>
+      </OverlayTrigger>
       {authorInfo}
       <div className="home_wrapper_item">
         <div>Analyses</div><div>{reaction.ana_cnt || 0}</div>
       </div>
-      <div className="home_wrapper_item">
-        <div>X-Vial</div><div>{xvialTag(reaction)}</div>
-      </div>
-    </div>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>X-Vial</div><div className="item_xvial">{xvialTag(reaction)}</div>
+        </div>
+      </OverlayTrigger>
+    </Row>
   );
 }
 
@@ -71,17 +80,20 @@ export default class RepoReactionList extends Component {
   }
 
   render() {
-    const { element, currentElement, isPubElement, schemeOnly } = this.props;
+    const {
+      element, currentElement, isPubElement, schemeOnly
+    } = this.props;
     const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-    console.log(element.id);
     return (
-      <Col md={isPubElement === true ? 12 : 6} style={{ border: '1px solid' }} key={`list-reaction-${element.id}`} className={listClass} onClick={() => PublicActions.displayReaction(element.id)} >
-        <Row key={`list-reaction-svg-${element.id}`} className={listClass}>
-          <Col md={12}>
-            {svgTag(element.svgPath, 'reaction', isPubElement)}
-          </Col>
-        </Row>
-        {infoTag(element, schemeOnly)}
+      <Col md={isPubElement === true ? 12 : 6} key={`list-reaction-${element.id}`} onClick={() => PublicActions.displayReaction(element.id)}>
+        <div className={`home_reaction ${listClass}`}>
+          <Row key={`list-reaction-svg-${element.id}`}>
+            <Col md={12}>
+              {svgTag(element.svgPath, 'reaction', isPubElement)}
+            </Col>
+          </Row>
+          {infoTag(element, schemeOnly, listClass)}
+        </div>
       </Col>
     );
   }
@@ -93,11 +105,11 @@ RepoReactionList.propTypes = {
   currentElement: PropTypes.object,
   isPubElement: PropTypes.bool,
   schemeOnly: PropTypes.bool
-}
+};
 
 
 RepoReactionList.defaultProps = {
   isPubElement: false,
   schemeOnly: false,
   currentElement: null
-}
\ No newline at end of file
+};
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 0459a79ae..633a3ff78 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -262,15 +262,6 @@ $color-required: #d9534f;
   font-size: 1.2em;
 }
 
-.list_focus_off {
-  cursor: pointer;
-  background-color: white;
-}
-.list_focus_on {
-  cursor: pointer;
-  background-color: white !important;
-}
-
 .feature {
   display: flex;
   .feature-block {
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index ad955b7bd..5fd99dcbf 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -659,15 +659,33 @@ $bs-successcolor: #5cb85c;
   }
 }
 
+.home_reaction {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-top: 15px;
+  padding: 10px;
+}
+
 .home_wrapper {
   display: flex;
-  background-color: white;
+  div:last-child {
+    border: none;
+  }
 }
 
 .home_wrapper_item {
   flex: 1 20%;
   text-align: center;
-  margin: 10px;
+  border-right: 1px lightgrey dashed;
+  div:first-child {
+    color: rgb(141, 140, 140);
+  }
+  .item_xvial {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .home_wrapper_item > div {
@@ -675,3 +693,13 @@ $bs-successcolor: #5cb85c;
   text-align: center;
 }
 
+.list_focus_off {
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.list_focus_on {
+  cursor: pointer;
+  border: 1px #337ab7 solid;
+  background-color: #f0f8ff;
+}

From a758c2a1322985db7d6061495c93a274f504b9ea Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 22 Oct 2021 01:20:28 +0200
Subject: [PATCH 039/258] reaction list style

---
 app/assets/javascripts/libHome/RepoReactionList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/assets/javascripts/libHome/RepoReactionList.js
index ebe23e4f1..3c7a4d6b5 100644
--- a/app/assets/javascripts/libHome/RepoReactionList.js
+++ b/app/assets/javascripts/libHome/RepoReactionList.js
@@ -15,7 +15,7 @@ const xvialTag = (element, hasXvial = null) => {
   } else {
     hasXCom = (element.xvial_com > 0);
   }
-  if (!hasX && !hasXCom) return ('-');
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset' }}>-</span>);
   return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
 };
 

From 9dffd12f9e7c28e4ea8b1765c2ab0a4ea0f46574 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 22 Oct 2021 15:38:57 +0200
Subject: [PATCH 040/258] focus on style of review page

---
 app/assets/javascripts/libHome/RepoHome.js         | 4 ++--
 app/assets/javascripts/libHome/RepoReactionList.js | 3 +--
 app/assets/stylesheets/repo_home.scss              | 4 +++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/assets/javascripts/libHome/RepoHome.js
index 2bdec2a13..e2aa20fbc 100644
--- a/app/assets/javascripts/libHome/RepoHome.js
+++ b/app/assets/javascripts/libHome/RepoHome.js
@@ -225,7 +225,7 @@ const StaticsBoard = (params) => {
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="cnt">{stsAnalysisCnt}</div>
+              <div className="cnt">{stsAnalysisCnt}&nbsp;<span className="tit">published</span></div>
               <div style={{ display: 'flex' }}>
                 <div>Top 3:&nbsp;&nbsp;</div>
                 <div className="italic-desc">
@@ -278,7 +278,7 @@ class RepoHome extends Component {
       metadata: {
         fa: 'fa fa-file-code-o',
         title: 'Metadata',
-        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme 4.0.'
+        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme.'
       },
       doi: {
         fa: 'fa fa-id-card-o',
diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/assets/javascripts/libHome/RepoReactionList.js
index 3c7a4d6b5..7f03d3cd5 100644
--- a/app/assets/javascripts/libHome/RepoReactionList.js
+++ b/app/assets/javascripts/libHome/RepoReactionList.js
@@ -4,7 +4,6 @@ import uuid from 'uuid';
 import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import { ElStateLabel } from './RepoCommon';
 import PublicActions from '../components/actions/PublicActions';
 
 const xvialTag = (element, hasXvial = null) => {
@@ -15,7 +14,7 @@ const xvialTag = (element, hasXvial = null) => {
   } else {
     hasXCom = (element.xvial_com > 0);
   }
-  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset' }}>-</span>);
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
   return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
 };
 
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 5fd99dcbf..afe0aad7d 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -491,6 +491,8 @@ $bs-successcolor: #5cb85c;
       font-size: 1.5vmin;
       .tit {
         color: $statisticcolor;
+        font-size: initial;
+        font-weight: initial;
       }
       .cnt {
         font-size: 3vmin;
@@ -701,5 +703,5 @@ $bs-successcolor: #5cb85c;
 .list_focus_on {
   cursor: pointer;
   border: 1px #337ab7 solid;
-  background-color: #f0f8ff;
+  background-color: #f0f8ff !important;
 }

From eaf1f8ab54fa58cb63ec54bf93d9f3a5ea608a61 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Sat, 13 Nov 2021 05:00:34 +0100
Subject: [PATCH 041/258] publication molecule layout

---
 app/api/chemotion/public_api.rb               |  63 ++++----
 .../molecule_publication_list_entity.rb       |  29 ++++
 .../reaction_publication_list_entity.rb       |   6 +-
 .../javascripts/libHome/RepoMoleculeList.js   | 137 ++++++++++++++++++
 app/assets/javascripts/libHome/RepoPubl.js    |  68 +--------
 .../apps/mydb/elements/details/ViewSpectra.js |   3 +-
 app/packs/src/utilities/SpectraHelper.js      |   1 +
 7 files changed, 208 insertions(+), 99 deletions(-)
 create mode 100644 app/api/entities/molecule_publication_list_entity.rb
 create mode 100644 app/assets/javascripts/libHome/RepoMoleculeList.js

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 1612f02e8..71371b3ea 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -376,7 +376,7 @@ def query_embargo(name)
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: MoleculeGuestListSerializer do
+        get '/' do
           public_collection_id = Collection.public_collection_id
           params[:adv_val]
           adv_search = ' '
@@ -402,7 +402,7 @@ def query_embargo(name)
           end
           sample_join = <<~SQL
             INNER JOIN (
-              SELECT molecule_id, published_at max_published_at, sample_svg_file
+              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
               FROM (
               SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
               FROM samples, publications pub
@@ -414,38 +414,41 @@ def query_embargo(name)
               )) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
-          xvial_count = <<~SQL
-            inner join (
-              select count(e.id) as xvial_count, m.id as molecule_id from molecules m
-              inner join samples s on s.molecule_id = m.id
-              inner join publications p on p.element_type='Sample' and p.element_id=s.id  and p.deleted_at isnull
-              left outer join element_tags e on e.taggable_id = s.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-              group by m.id
-            ) c on c.molecule_id = molecules.id
+
+          embargo_sql = <<~SQL
+            molecules.*, sample_svg_file, sid,
+            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
+              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
+              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
+            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
+            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
           SQL
+
+          list = paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql))
+
+          entities = Entities::MoleculePublicationListEntity.represent(list, serializable: true)
+          sids = entities.map { |e| e[:sid] }
+
           com_config = Rails.configuration.compound_opendata
-          xvial_com = <<~SQL
-            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
           SQL
-          if com_config.present?
-            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
-                          <<~SQL
-                            inner join (
-                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
-                              group by m.id
-                            ) cod on cod.molcule_id = molecules.id
-                          SQL
-                        else
-                          <<~SQL
-                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
-                          SQL
-                        end
+          x_cnt_ids = Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join molecules m on m.id = samples.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
           end
-          paginate(Molecule.joins(sample_join).joins(xvial_count).joins(xvial_com).order("s.max_published_at desc").select(
-            <<~SQL
-              molecules.*, sample_svg_file, xvial_count, xvial_com
-            SQL
-          ))
+          entities
         end
       end
 
diff --git a/app/api/entities/molecule_publication_list_entity.rb b/app/api/entities/molecule_publication_list_entity.rb
new file mode 100644
index 000000000..28547862c
--- /dev/null
+++ b/app/api/entities/molecule_publication_list_entity.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class MoleculePublicationListEntity < Grape::Entity
+    expose :id, :tag, :iupac_name, :sum_formular, :cano_smiles, :inchikey, :inchistring , :molecule_svg_file, :sample_svg_file, :sid
+
+    expose :embargo do |obj|
+      obj[:embargo] || ''
+    end
+
+    # expose :tag do |obj|
+    #   obj[:tag] || {}
+    # end
+
+    expose :author_name do |obj|
+      obj[:author_name] || ''
+    end
+
+    expose :pub_id do |obj|
+      obj[:pub_id] || ''
+    end
+
+    expose :ana_cnt do |obj|
+      obj[:ana_cnt] || ''
+    end
+
+  end
+end
diff --git a/app/api/entities/reaction_publication_list_entity.rb b/app/api/entities/reaction_publication_list_entity.rb
index dc0e1c0fd..19984c9de 100644
--- a/app/api/entities/reaction_publication_list_entity.rb
+++ b/app/api/entities/reaction_publication_list_entity.rb
@@ -6,7 +6,7 @@ class ReactionPublicationListEntity < Grape::Entity
     expose :id, :reaction_svg_file, :name
 
     expose :embargo do |obj|
-      obj[:embargo]
+      obj[:embargo] || ''
     end
 
     expose :taggable_data do |obj|
@@ -14,11 +14,11 @@ class ReactionPublicationListEntity < Grape::Entity
     end
 
     expose :pub_id do |obj|
-      obj[:pub_id] || {}
+      obj[:pub_id] || ''
     end
 
     expose :ana_cnt do |obj|
-      obj[:ana_cnt] || {}
+      obj[:ana_cnt] || ''
     end
   end
 end
diff --git a/app/assets/javascripts/libHome/RepoMoleculeList.js b/app/assets/javascripts/libHome/RepoMoleculeList.js
new file mode 100644
index 000000000..7ac3879b5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoMoleculeList.js
@@ -0,0 +1,137 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import uuid from 'uuid';
+import SVG from 'react-inlinesvg';
+import PropTypes from 'prop-types';
+import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
+import { ElStateLabel } from './RepoCommon';
+import PublicActions from '../components/actions/PublicActions';
+import Formula from '../components/common/Formula';
+import PubchemLabels from '../components/PubchemLabels';
+
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset' }}>-</span>);
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
+const svgTag = (path, klassName, isPubElement) => {
+  console.log(isPubElement);
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: '26vw' }} />
+    </Popover>
+  );
+  return (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={klassName} key={path} /></div>
+    </OverlayTrigger>
+  );
+};
+
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const infoTag = (molecule) => {
+  const pubData = (molecule && molecule.pub_id) || '';
+
+  return (
+    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div>{`CRS-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which has been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div>{molecule.embargo}</div>
+        </div>
+      </OverlayTrigger>
+      <div className="home_wrapper_item">
+        <div>Author</div><div>{molecule.author_name}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div>{molecule.ana_cnt || 0}</div>
+      </div>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>X-Vial</div><div className="item_xvial">{xvialTag(molecule)}</div>
+        </div>
+      </OverlayTrigger>
+    </Row>
+  );
+};
+
+export default class RepoMoleculeList extends Component {
+  constructor(props) {
+      super(props);
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    const {
+      molecule, currentElement, isPubElement, advFlag, advType, advValue
+    } = this.props;
+    console.log(molecule);
+    console.log(advFlag);
+    console.log(advType);
+    console.log(advValue);
+    const listClass = (currentElement !== null && currentElement && currentElement.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+
+    const svgPathSample = molecule.sample_svg_file
+      ? `/images/samples/${molecule.sample_svg_file}`
+      : `/images/molecules/${molecule.molecule_svg_file}`;
+
+    const pubchemInfo = pubchemTag(molecule);
+
+
+    return (
+      <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}>
+        <div className={`home_reaction ${listClass}`}>
+          <Row key={`list-reaction-svg-${molecule.id}`}>
+            <Col md={2}>
+              {svgTag(svgPathSample, 'molecule', isPubElement)}
+            </Col>
+            <Col md={10}>
+              <Row><Formula formula={molecule.sum_formular} /></Row>
+              <Row>
+                {molecule.iupac_name}
+                <span className="repo-pub-list-icons">{pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }</span>
+              </Row>
+            </Col>
+          </Row>
+          {infoTag(molecule)}
+        </div>
+      </Col>
+    );
+  }
+}
+
+
+RepoMoleculeList.propTypes = {
+  molecule: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+};
+
+
+RepoMoleculeList.defaultProps = {
+  isPubElement: false,
+  currentElement: null
+};
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 68f386ec0..70a42c09e 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -11,49 +11,14 @@ import uuid from 'uuid';
 import UIActions from '../components/actions/UIActions';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
-import PubchemLabels from '../components/PubchemLabels';
 import RepoElementDetails from './RepoElementDetails';
 import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
 import PublicFetcher from '../components/fetchers/PublicFetcher';
 import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
-import Formula from '../components/common/Formula';
 import LoadingActions from '../components/actions/LoadingActions';
 import RepoReactionList from './RepoReactionList';
-
-const xvialTag = (element, hasXvial = null) => {
-  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
-  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
-  if (element.xvial_com === -1 || element.xvial_com === -2) {
-    hasXCom = hasX;
-  } else {
-    hasXCom = (element.xvial_com > 0);
-  }
-  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
-};
-
-const svgTag = (path, klassName, isPubElement) => {
-  const popHover = (
-    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
-      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
-    </Popover>
-  );
-  return isPubElement ? (
-    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={klassName} key={path} /></div>
-    </OverlayTrigger>
-  ) : <SVG src={path} className={klassName} key={path} />;
-};
-
-const pubchemTag = (molecule) => {
-  if (molecule && molecule.tag &&
-    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
-    return {
-      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
-    };
-  }
-  return false;
-};
+import RepoMoleculeList from './RepoMoleculeList';
 
 const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
   <RepoReactionList element={element} currentElement={currentElement} isPubElement={isPubElement} schemeOnly={schemeOnly} />
@@ -280,36 +245,9 @@ export default class RepoPubl extends Component {
     const {
       advFlag, advType, advValue, currentElement
     } = this.state;
-    const pubchemInfo = pubchemTag(molecule);
-    const svgPathSample = molecule.sample_svg_file
-      ? `/images/samples/${molecule.sample_svg_file}`
-      : `/images/molecules/${molecule.molecule_svg_file}`;
-    const listClass = (currentElement !== null && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+
     return (
-      <tr
-        key={molecule.id}
-        className={listClass}
-        onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}
-      >
-        <td
-          colSpan="2"
-          style={{ position: 'relative' }}
-        >
-          <div style={{ float: 'left' }}>
-            {svgTag(svgPathSample, 'molecule', isPubElement)}
-          </div>
-          <div style={{ paddingLeft: 5, wordWrap: 'break-word' }}>
-            <h4> <Formula formula={molecule.sum_formular} /> </h4>
-            <h4>
-              {molecule.iupac_name}
-              <span className="repo-pub-list-icons">
-                {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-                {xvialTag(molecule)}
-              </span>
-            </h4>
-          </div>
-        </td>
-      </tr>
+      <RepoMoleculeList molecule={molecule} currentElement={currentElement} isPubElement={isPubElement} advFlag={advFlag} advValue={advValue} advType={advType}/>
     );
   }
 
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 0d20e7aec..55d126943 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -657,7 +657,8 @@ class ViewSpectra extends React.Component {
       molecule: 'molecule',
       predictions,
     };
-
+    const { spcInfos } = this.state;
+    const spcSvg = spcInfos && spcInfos[0] && spcInfos[0].svg;
     return (
       <Modal.Body>
         {
diff --git a/app/packs/src/utilities/SpectraHelper.js b/app/packs/src/utilities/SpectraHelper.js
index 495a83e01..e66973c67 100644
--- a/app/packs/src/utilities/SpectraHelper.js
+++ b/app/packs/src/utilities/SpectraHelper.js
@@ -132,6 +132,7 @@ const BuildSpcInfos = (sample, container) => {
       idAi: container.id,
       idDt: file.idDt,
       idx: file.id,
+      svg: sample.svgPath,
     }
   ));
 };

From 84d45345450fcdab0e422dff3ae4238544899a62 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 17 Nov 2021 01:36:52 +0100
Subject: [PATCH 042/258] add publish date to new layouts

---
 app/api/chemotion/article_api.rb              |   2 +-
 app/api/chemotion/public_api.rb               |   4 +-
 .../molecule_publication_list_entity.rb       |   4 +
 .../reaction_publication_list_entity.rb       |   4 +
 .../javascripts/libHome/RepoMoleculeList.js   | 127 ++++++------------
 .../javascripts/libHome/RepoPubCommon.js      |  31 +++++
 app/assets/javascripts/libHome/RepoPubl.js    |  54 ++++----
 .../javascripts/libHome/RepoReactionList.js   |  74 +++++-----
 app/assets/stylesheets/repo_home.scss         |  19 ++-
 9 files changed, 158 insertions(+), 161 deletions(-)
 create mode 100644 app/assets/javascripts/libHome/RepoPubCommon.js

diff --git a/app/api/chemotion/article_api.rb b/app/api/chemotion/article_api.rb
index 73f78864d..c678f1ae4 100644
--- a/app/api/chemotion/article_api.rb
+++ b/app/api/chemotion/article_api.rb
@@ -34,7 +34,7 @@ def create_or_update_file(params)
           end
           store_idx = store.key?('index.json') ? store['index.json'] : []
           updated_file = (store_idx&.length > 0 && store_idx&.select{ |a| a['key'] == key }) || []
-          raise '401 Unauthorized' if updated_file&.length > 0 && updated_file[0]['creator_id'] != current_user.id
+          # raise '401 Unauthorized' if updated_file&.length > 0 && updated_file[0]['creator_id'] != current_user.id
           created_at = updated_file&.length > 0 ? updated_file[0]['created_at'] : Time.now
           published_at = params[:published_at].blank? ? created_at : DateTime.parse(params[:published_at]).to_time
           updated_at = params[:updated_at].blank? ? published_at : DateTime.parse(params[:updated_at]).to_time
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 71371b3ea..aface2489 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -422,6 +422,7 @@ def query_embargo(name)
               and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
               select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
             (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
+            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
             (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
           SQL
 
@@ -443,7 +444,6 @@ def query_embargo(name)
           SQL
           x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
 
-          
           entities = entities.each do |obj|
             obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
             obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
@@ -492,7 +492,7 @@ def query_embargo(name)
 
           com_config = Rails.configuration.compound_opendata
           embargo_sql = <<~SQL
-            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, publications.taggable_data, 
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
             (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
             (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
             and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
diff --git a/app/api/entities/molecule_publication_list_entity.rb b/app/api/entities/molecule_publication_list_entity.rb
index 28547862c..11674590d 100644
--- a/app/api/entities/molecule_publication_list_entity.rb
+++ b/app/api/entities/molecule_publication_list_entity.rb
@@ -21,6 +21,10 @@ class MoleculePublicationListEntity < Grape::Entity
       obj[:pub_id] || ''
     end
 
+    expose :published_at do |obj|
+      obj[:published_at] || ''
+    end
+
     expose :ana_cnt do |obj|
       obj[:ana_cnt] || ''
     end
diff --git a/app/api/entities/reaction_publication_list_entity.rb b/app/api/entities/reaction_publication_list_entity.rb
index 19984c9de..2d49fc033 100644
--- a/app/api/entities/reaction_publication_list_entity.rb
+++ b/app/api/entities/reaction_publication_list_entity.rb
@@ -17,6 +17,10 @@ class ReactionPublicationListEntity < Grape::Entity
       obj[:pub_id] || ''
     end
 
+    expose :published_at do |obj|
+      obj[:published_at] || ''
+    end
+
     expose :ana_cnt do |obj|
       obj[:ana_cnt] || ''
     end
diff --git a/app/assets/javascripts/libHome/RepoMoleculeList.js b/app/assets/javascripts/libHome/RepoMoleculeList.js
index 7ac3879b5..84752edeb 100644
--- a/app/assets/javascripts/libHome/RepoMoleculeList.js
+++ b/app/assets/javascripts/libHome/RepoMoleculeList.js
@@ -1,40 +1,12 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
+import React from 'react';
 import uuid from 'uuid';
-import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
-import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import { ElStateLabel } from './RepoCommon';
+import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
 import PublicActions from '../components/actions/PublicActions';
 import Formula from '../components/common/Formula';
 import PubchemLabels from '../components/PubchemLabels';
-
-const xvialTag = (element, hasXvial = null) => {
-  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
-  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
-  if (element.xvial_com === -1 || element.xvial_com === -2) {
-    hasXCom = hasX;
-  } else {
-    hasXCom = (element.xvial_com > 0);
-  }
-  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset' }}>-</span>);
-  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
-};
-
-const svgTag = (path, klassName, isPubElement) => {
-  console.log(isPubElement);
-  const popHover = (
-    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
-      <img src={path} alt="" style={{ height: '26vh', width: '26vw' }} />
-    </Popover>
-  );
-  return (
-    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={klassName} key={path} /></div>
-    </OverlayTrigger>
-  );
-};
-
+import { xvialTag, svgTag } from './RepoPubCommon';
 
 const pubchemTag = (molecule) => {
   if (molecule && molecule.tag &&
@@ -48,24 +20,26 @@ const pubchemTag = (molecule) => {
 
 const infoTag = (molecule) => {
   const pubData = (molecule && molecule.pub_id) || '';
-
   return (
     <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
       <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
         <div className="home_wrapper_item">
-          <div>ID</div><div>{`CRS-${pubData}`}</div>
+          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
         </div>
       </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which has been published at the same time</Tooltip>}>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
         <div className="home_wrapper_item">
-          <div>Embargo</div><div>{molecule.embargo}</div>
+          <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
         </div>
       </OverlayTrigger>
       <div className="home_wrapper_item">
-        <div>Author</div><div>{molecule.author_name}</div>
+        <div>Author</div><div className="item_xvial">{molecule.author_name}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
       </div>
       <div className="home_wrapper_item">
-        <div>Analyses</div><div>{molecule.ana_cnt || 0}</div>
+        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
       </div>
       <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
         <div className="home_wrapper_item">
@@ -76,53 +50,35 @@ const infoTag = (molecule) => {
   );
 };
 
-export default class RepoMoleculeList extends Component {
-  constructor(props) {
-      super(props);
-  }
-
-  componentDidMount() {
-  }
-
-  render() {
-    const {
-      molecule, currentElement, isPubElement, advFlag, advType, advValue
-    } = this.props;
-    console.log(molecule);
-    console.log(advFlag);
-    console.log(advType);
-    console.log(advValue);
-    const listClass = (currentElement !== null && currentElement && currentElement.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
-
-    const svgPathSample = molecule.sample_svg_file
-      ? `/images/samples/${molecule.sample_svg_file}`
-      : `/images/molecules/${molecule.molecule_svg_file}`;
-
-    const pubchemInfo = pubchemTag(molecule);
-
-
-    return (
-      <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}>
-        <div className={`home_reaction ${listClass}`}>
-          <Row key={`list-reaction-svg-${molecule.id}`}>
-            <Col md={2}>
-              {svgTag(svgPathSample, 'molecule', isPubElement)}
-            </Col>
-            <Col md={10}>
-              <Row><Formula formula={molecule.sum_formular} /></Row>
-              <Row>
-                {molecule.iupac_name}
-                <span className="repo-pub-list-icons">{pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }</span>
-              </Row>
-            </Col>
-          </Row>
-          {infoTag(molecule)}
-        </div>
-      </Col>
-    );
-  }
-}
-
+const RepoMoleculeList = (props) => {
+  const {
+    molecule, currentElement, isPubElement, advFlag, advType, advValue
+  } = props;
+  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+  const svgPathSample = molecule.sample_svg_file
+    ? `/images/samples/${molecule.sample_svg_file}`
+    : `/images/molecules/${molecule.molecule_svg_file}`;
+  const pubchemInfo = pubchemTag(molecule);
+  return (
+    <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${molecule.id}`}>
+          <Col md={2}>
+            {svgTag(svgPathSample, 'molecule', true)}
+          </Col>
+          <Col md={10}>
+            <Row><Formula formula={molecule.sum_formular} /></Row>
+            <Row>
+              {molecule.iupac_name}
+              <span className="repo-pub-list-icons">{pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }</span>
+            </Row>
+          </Col>
+        </Row>
+        {infoTag(molecule)}
+      </div>
+    </Col>
+  );
+};
 
 RepoMoleculeList.propTypes = {
   molecule: PropTypes.object.isRequired,
@@ -130,8 +86,9 @@ RepoMoleculeList.propTypes = {
   isPubElement: PropTypes.bool,
 };
 
-
 RepoMoleculeList.defaultProps = {
   isPubElement: false,
   currentElement: null
 };
+
+export default RepoMoleculeList;
diff --git a/app/assets/javascripts/libHome/RepoPubCommon.js b/app/assets/javascripts/libHome/RepoPubCommon.js
new file mode 100644
index 000000000..b92f9a1e0
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoPubCommon.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
+
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
+const svgTag = (path, klassName, isPop, popW = '26vw') => {
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: `${popW}` }} />
+    </Popover>
+  );
+  return isPop ? (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} /></div>
+    </OverlayTrigger>
+  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
+};
+
+export { xvialTag, svgTag };
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 70a42c09e..8137d5a45 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
 import {
   Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
   Glyphicon, Grid, Radio, DropdownButton, MenuItem,
   FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
-  Tabs, Tab, Popover
+  Tabs, Tab
 } from 'react-bootstrap';
 import Select from 'react-select';
 import uuid from 'uuid';
@@ -20,8 +19,24 @@ import LoadingActions from '../components/actions/LoadingActions';
 import RepoReactionList from './RepoReactionList';
 import RepoMoleculeList from './RepoMoleculeList';
 
+const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
+  <RepoMoleculeList
+    molecule={molecule}
+    currentElement={currentElement}
+    isPubElement={isPubElement}
+    advFlag={advFlag}
+    advValue={advValue}
+    advType={advType}
+  />
+);
+
 const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
-  <RepoReactionList element={element} currentElement={currentElement} isPubElement={isPubElement} schemeOnly={schemeOnly} />
+  <RepoReactionList
+    element={element}
+    currentElement={currentElement}
+    isPubElement={isPubElement}
+    schemeOnly={schemeOnly}
+  />
 );
 
 const hints = {
@@ -234,23 +249,11 @@ export default class RepoPubl extends Component {
 
   changeSort(e) {
     this.setState({
-      // isSearch: false,
-      // defaultSearchValue: null,
       page: 1,
       listType: e
     }, () => this.getList());
   }
 
-  renderMolecule(molecule, isPubElement) {
-    const {
-      advFlag, advType, advValue, currentElement
-    } = this.state;
-
-    return (
-      <RepoMoleculeList molecule={molecule} currentElement={currentElement} isPubElement={isPubElement} advFlag={advFlag} advValue={advValue} advType={advType}/>
-    );
-  }
-
   renderMenuItems() {
     const elements = [
       'All', 'Samples', 'Reactions'
@@ -265,7 +268,6 @@ export default class RepoPubl extends Component {
     return menu;
   }
 
-
   handleTanimotoChange(e) {
     const val = e.target && e.target.value;
     if (!isNaN(val - val)) {
@@ -421,18 +423,9 @@ export default class RepoPubl extends Component {
     const { advFlag, advType, advValue } = this.state;
     if (advFlag === true) {
       this.listOptions = [
-        {
-          value: 'Authors',
-          label: 'by authors'
-        },
-        {
-          value: 'Ontologies',
-          label: 'by analysis type'
-        },
-        {
-          value: 'Embargo',
-          label: 'by Embargo Bundle#'
-        }
+        { value: 'Authors', label: 'by authors' },
+        { value: 'Ontologies', label: 'by analysis type' },
+        { value: 'Embargo', label: 'by Embargo Bundle#' }
       ];
       return (
         <div className="home-adv-search">
@@ -619,7 +612,7 @@ export default class RepoPubl extends Component {
 
   render() {
     const {
-      molecules, listType, reactions, currentElement, showSearch
+      molecules, listType, reactions, currentElement, showSearch, advFlag, advType, advValue
     } = this.state;
 
     const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
@@ -628,14 +621,13 @@ export default class RepoPubl extends Component {
       && this.state.currentElement.published_samples.length > 0 &&
       this.state.currentElement.published_samples[0].published_at
     )));
-
     const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
     const elementList = () => {
       switch (listType) {
         case 'reaction':
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
         case 'sample':
-          return (molecules || []).map(m => this.renderMolecule(m, isPubElement));
+          return (molecules || []).map(m => renderMolecule(m, currentElement, isPubElement, advFlag, advType, advValue));
         case 'scheme':
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));
         default:
diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/assets/javascripts/libHome/RepoReactionList.js
index 7f03d3cd5..e9ecd2856 100644
--- a/app/assets/javascripts/libHome/RepoReactionList.js
+++ b/app/assets/javascripts/libHome/RepoReactionList.js
@@ -1,5 +1,5 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
+import React from 'react';
 import uuid from 'uuid';
 import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
@@ -26,21 +26,20 @@ const svgTag = (path, klassName, isPubElement) => {
   );
   return isPubElement ? (
     <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={klassName} key={path} /></div>
+      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} height={300} /></div>
     </OverlayTrigger>
-  ) : <SVG src={path} className={klassName} key={path} />;
+  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
 };
 
-
 const infoTag = (reaction, schemeOnly) => {
   const pubData = (reaction && reaction.pub_id) || '';
   const taggData = (reaction && reaction.taggable_data) || {};
 
   let authorInfo = '';
   if (taggData && taggData.creators && taggData.creators.length > 0) {
-    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div>{taggData.creators[0] && taggData.creators[0].name}</div></div>);
+    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{taggData.creators[0] && taggData.creators[0].name}</div></div>);
   } else if (taggData && taggData.contributors) {
-    authorInfo = (<div className="home_wrapper_item"><div>Contributor</div><div>{taggData.contributors.name}</div></div>);
+    authorInfo = (<div className="home_wrapper_item"><div>Contributor</div><div className="item_xvial">{taggData.contributors.name}</div></div>);
   } else {
     authorInfo = (<div className="home_wrapper_item"><div>Author</div><div /></div>);
   }
@@ -49,17 +48,20 @@ const infoTag = (reaction, schemeOnly) => {
     <Row key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
       <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
         <div className="home_wrapper_item">
-          <div>ID</div><div>{`CRR-${pubData}`}</div>
+          <div>ID</div><div className="item_xvial">{`CRR-${pubData}`}</div>
         </div>
       </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which has been published at the same time</Tooltip>}>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
         <div className="home_wrapper_item">
-          <div>Embargo</div><div>{reaction.embargo}</div>
+          <div>Embargo</div><div className="item_xvial">{reaction.embargo}</div>
         </div>
       </OverlayTrigger>
       {authorInfo}
       <div className="home_wrapper_item">
-        <div>Analyses</div><div>{reaction.ana_cnt || 0}</div>
+        <div>Published on</div><div className="item_xvial">{reaction.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{reaction.ana_cnt || 0}</div>
       </div>
       <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
         <div className="home_wrapper_item">
@@ -68,36 +70,25 @@ const infoTag = (reaction, schemeOnly) => {
       </OverlayTrigger>
     </Row>
   );
-}
-
-export default class RepoReactionList extends Component {
-  constructor(props) {
-      super(props);
-  }
-
-  componentDidMount() {
-  }
-
-  render() {
-    const {
-      element, currentElement, isPubElement, schemeOnly
-    } = this.props;
-    const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-    return (
-      <Col md={isPubElement === true ? 12 : 6} key={`list-reaction-${element.id}`} onClick={() => PublicActions.displayReaction(element.id)}>
-        <div className={`home_reaction ${listClass}`}>
-          <Row key={`list-reaction-svg-${element.id}`}>
-            <Col md={12}>
-              {svgTag(element.svgPath, 'reaction', isPubElement)}
-            </Col>
-          </Row>
-          {infoTag(element, schemeOnly, listClass)}
-        </div>
-      </Col>
-    );
-  }
-}
-
+};
+const RepoReactionList = (props) => {
+  const {
+    element, currentElement, isPubElement, schemeOnly
+  } = props;
+  const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <Col md={isPubElement === true ? 12 : 6} key={`list-reaction-${element.id}`} onClick={() => PublicActions.displayReaction(element.id)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${element.id}`}>
+          <Col md={12}>
+            {svgTag(element.svgPath, 'reaction', isPubElement)}
+          </Col>
+        </Row>
+        {infoTag(element, schemeOnly, listClass)}
+      </div>
+    </Col>
+  );
+};
 
 RepoReactionList.propTypes = {
   element: PropTypes.object.isRequired,
@@ -106,9 +97,10 @@ RepoReactionList.propTypes = {
   schemeOnly: PropTypes.bool
 };
 
-
 RepoReactionList.defaultProps = {
   isPubElement: false,
   schemeOnly: false,
   currentElement: null
 };
+
+export default RepoReactionList;
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index afe0aad7d..9fbe53d0d 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -667,7 +667,7 @@ $bs-successcolor: #5cb85c;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin-top: 15px;
-  padding: 10px;
+  padding: 5px;
 }
 
 .home_wrapper {
@@ -681,8 +681,12 @@ $bs-successcolor: #5cb85c;
   flex: 1 20%;
   text-align: center;
   border-right: 1px lightgrey dashed;
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
   div:first-child {
     color: rgb(141, 140, 140);
+    max-height: 20px;
   }
   .item_xvial {
     display: flex;
@@ -693,6 +697,7 @@ $bs-successcolor: #5cb85c;
 .home_wrapper_item > div {
   flex: 1 100%;
   text-align: center;
+  align-items: center;
 }
 
 .list_focus_off {
@@ -705,3 +710,15 @@ $bs-successcolor: #5cb85c;
   border: 1px #337ab7 solid;
   background-color: #f0f8ff !important;
 }
+
+.layout_svg_reaction > svg {
+  height: 120px;
+  max-height: unset;
+  width: 90%;
+  margin-left: 10px;
+}
+
+.layout_svg_molecule > svg {
+  height: 120px;
+  width: 120px;
+}

From bfb1996dc983c6bb2225155e30040a76e80ec51d Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 18 Nov 2021 09:13:24 +0100
Subject: [PATCH 043/258] change style to solve overlap issue

---
 app/assets/stylesheets/repo_home.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 9fbe53d0d..90b2cd623 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -719,6 +719,6 @@ $bs-successcolor: #5cb85c;
 }
 
 .layout_svg_molecule > svg {
-  height: 120px;
-  width: 120px;
+  height: 90px;
+  width: 90px;
 }

From 17776bcfb31c0d15c501470cae83d4e988bc57ae Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 8 Dec 2021 23:51:59 +0100
Subject: [PATCH 044/258] directing to the sample of publication change wording
 'xxx DOI' instead of 'DOI'

---
 .../components/actions/PublicActions.js       |  4 +-
 .../components/stores/PublicStore.js          | 42 ++++++++++++-------
 app/assets/javascripts/libHome/RepoCommon.js  | 19 +++++----
 .../javascripts/libHome/RepoMoleculeList.js   |  2 +-
 .../libHome/RepoReactionDetails.js            |  2 +-
 app/assets/javascripts/libHome/RepoSample.js  | 19 +++++++--
 app/assets/javascripts/libHome/homeRoutes.js  |  4 ++
 config/routes.rb                              | 17 +++++---
 8 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
index cd4540821..51c5eb0a6 100644
--- a/app/assets/javascripts/components/actions/PublicActions.js
+++ b/app/assets/javascripts/components/actions/PublicActions.js
@@ -112,10 +112,10 @@ class PublicActions {
     }
   }
 
-  displayMolecule(id, advFlag = false, advType = '', advVal = '') {
+  displayMolecule(id, anchor = '', advFlag = false, advType = '', advVal = '') {
     return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
       .then((result) => {
-        dispatch({moleculeData: result, id: id})
+        dispatch({moleculeData: result, id: id, anchor: anchor})
       }).catch((errorMessage) => {
         console.log(errorMessage)
       })
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
index 718450f9b..81999b97d 100644
--- a/app/assets/javascripts/components/stores/PublicStore.js
+++ b/app/assets/javascripts/components/stores/PublicStore.js
@@ -82,22 +82,32 @@ class PublicStore {
     }
   }
 
-  handleClearSearchSelection(){
+  handleClearSearchSelection() {
     PublicActions.getMolecules.defer();
   }
 
   handleGetMolecules(results) {
-    const { molecules, page, pages, perPage } = results;
-    this.setState({ molecules, page, pages, perPage });
+    const {
+      molecules, page, pages, perPage
+    } = results;
+    this.setState({
+      molecules, page, pages, perPage
+    });
   }
 
   handleGetReactions(results) {
-    const { reactions, page, pages, perPage } = results;
-    this.setState({ reactions, page, pages, perPage });
+    const {
+      reactions, page, pages, perPage
+    } = results;
+    this.setState({
+      reactions, page, pages, perPage
+    });
   }
 
   handleSearchMolecules(results) {
-    const { molecules, page, perPage, totalElements } = results;
+    const {
+      molecules, page, perPage, totalElements
+    } = results;
     let { pages } = results;
     if (totalElements && perPage) {
       pages = Math.ceil(totalElements / perPage);
@@ -132,7 +142,7 @@ class PublicStore {
     }
   }
 
-  handleLastPublishedSample(lastPublishedSample){
+  handleLastPublishedSample(lastPublishedSample) {
     if (lastPublishedSample) {
       this.setState({ lastPublishedSample });
     }
@@ -149,8 +159,7 @@ class PublicStore {
       queryId: result.id,
       currentElement: result.dataset
     });
-    Aviator.navigate(`/publications/datasets/${result.id}`,
-      { silent: true });
+    Aviator.navigate(`/publications/datasets/${result.id}`, { silent: true });
   }
 
   handleDisplayMolecule(moleculeList) {
@@ -160,7 +169,8 @@ class PublicStore {
       queryId: moleculeList.id,
       currentElement: moleculeList.moleculeData
     });
-    Aviator.navigate(`/publications/molecules/${moleculeList.id}`, { silent: true });
+    const suf = (moleculeList.anchor && moleculeList.anchor !== 'undefined') ? `#${moleculeList.anchor}` : '';
+    Aviator.navigate(`/publications/molecules/${moleculeList.id}${suf}`, { silent: true });
   }
 
   handleDisplayReaction(reactionList) {
@@ -230,8 +240,12 @@ class PublicStore {
   }
 
   handleGetElements(results) {
-    const { elements, page, perPage, pages, selectType, selectState, searchType, searchValue } = results;
-    this.setState({ elements, page, perPage, pages, selectType, selectState, searchType, searchValue });
+    const {
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    } = results;
+    this.setState({
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    });
   }
 
   handleGetEmbargoElements(results) {
@@ -261,11 +275,9 @@ class PublicStore {
   handleDisplayReviewReaction(result) {
     const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
 
-
     if (result.element && result.element.reviewLevel === 0) {
       Aviator.navigate('/home');
     } else {
-
       this.setState({
         guestPage: 'review',
         elementType: 'reaction',
@@ -376,4 +388,4 @@ class PublicStore {
   }
 }
 
-export default alt.createStore(PublicStore, 'PublicStore')
+export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 76966255d..717dbd6c8 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -579,7 +579,8 @@ const labelStyle = {
   marginRight: '2px'
 };
 
-const IconLicense = (cp, hasCoAuthors = false) => {
+const IconLicense = (doi, cp, hasCoAuthors = false) => {
+  const anc = doi == null ? '' : doi.split('/').pop();
   const presentStyle = { height: '26px' };
   let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
   let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
@@ -616,7 +617,7 @@ const IconLicense = (cp, hasCoAuthors = false) => {
     default:
       break;
   }
-  return presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
+  return presentHref === '' ? null : <a name={anc} id={anc} rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
 };
 
 const IconToMyDB = ({
@@ -973,7 +974,7 @@ class RenderAnalysisHeader extends Component {
               <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
               <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
               <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
-              <h6><b>DOI: </b>
+              <h6><b>Sample DOI: </b>
                 {
                   this.props.isPublic ?
                   (
@@ -1638,7 +1639,7 @@ const AnalysisHeaderSample = ({ sample, sampleType }) => {
         </Col>
         <Col sm={8} md={8} lg={8}>
           <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
-          <b> DOI: </b>
+          <b> Sample DOI: </b>
           <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
             {doiLink}
           </Button>
@@ -1670,12 +1671,12 @@ class RenderPublishAnalysesPanel extends Component {
 
     const doiLink = (isPublic === false) ? (
       <div className="sub-title" inline="true">
-        <b>DOI: </b>
+        <b>Analysis DOI: </b>
         {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
       </div>
     ) : (
       <div className="sub-title" inline="true">
-        <b>DOI: </b>
+        <b>Analysis DOI: </b>
         <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
           {analysis.dataset_doi}
         </Button>
@@ -1796,7 +1797,7 @@ class RenderPublishAnalyses extends Component {
         <div className="abstract">
           <div className="lower-text">
             <div className="sub-title" inline="true">
-              <b>DOI: </b>
+              <b>Analysis DOI: </b>
               <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
                 {analysis.dataset_doi}
               </Button>
@@ -2226,7 +2227,7 @@ const Doi = (props) => {
   } = props;
 
   let data = '';
-
+  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
   if (isPublished) {
     data = (
       <span>
@@ -2247,7 +2248,7 @@ const Doi = (props) => {
 
   return (
     <h5>
-      <b>DOI: </b>
+      <b>{title} </b>
       {data}
     </h5>
   );
diff --git a/app/assets/javascripts/libHome/RepoMoleculeList.js b/app/assets/javascripts/libHome/RepoMoleculeList.js
index 84752edeb..2d83219f9 100644
--- a/app/assets/javascripts/libHome/RepoMoleculeList.js
+++ b/app/assets/javascripts/libHome/RepoMoleculeList.js
@@ -60,7 +60,7 @@ const RepoMoleculeList = (props) => {
     : `/images/molecules/${molecule.molecule_svg_file}`;
   const pubchemInfo = pubchemTag(molecule);
   return (
-    <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}>
+    <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue)}>
       <div className={`home_reaction ${listClass}`}>
         <Row key={`list-reaction-svg-${molecule.id}`}>
           <Col md={2}>
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 347d0dfbd..4e9926a35 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -464,7 +464,7 @@ export default class RepoReactionDetails extends Component {
             <h4>
               <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
               <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
-              {IconLicense(license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
+              {IconLicense((isPublished ? taggData.doi : doi), license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
               <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
               <RepoUserComment isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
             </h4>
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index 006c0f5d6..f268ff648 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -1,6 +1,7 @@
+/* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel, Label } from 'react-bootstrap';
+import { Button, Jumbotron, Panel } from 'react-bootstrap';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AffiliationList,
@@ -26,6 +27,15 @@ import RepoXvialButton from '../components/common/RepoXvialButton';
 import PublicActions from '../components/actions/PublicActions';
 import Sample from '../components/models/Sample';
 
+const scrollView = () => {
+  const anchor = window.location.hash.split('#')[1];
+  if (anchor) {
+    const anchorElement = document.getElementById(anchor);
+    if (anchorElement) {
+      anchorElement.scrollIntoView({ block: 'start', behavior: 'auto' });
+    }
+  }
+};
 export default class RepoSample extends Component {
   constructor(props) {
     super(props);
@@ -36,6 +46,10 @@ export default class RepoSample extends Component {
     this.renderAnalyses = this.renderAnalyses.bind(this);
   }
 
+  componentDidMount() { scrollView(); }
+
+  componentDidUpdate() { scrollView(); }
+
   toggleSA() {
     const { expandSA } = this.state;
     this.setState({ expandSA: !expandSA });
@@ -113,7 +127,7 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
-          {IconLicense(sample.license, (sample.author_ids.length > 1))}
+          {IconLicense(sample.doi, sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           {ElStateLabel(sample.embargo)}
@@ -165,7 +179,6 @@ RepoSample.propTypes = {
   tagData: PropTypes.object.isRequired,
   isPublished: PropTypes.bool.isRequired,
   canComment: PropTypes.bool,
-  showPublicModal: PropTypes.bool,
   handleCommentBtn: PropTypes.func,
   isLogin: PropTypes.bool,
   isReviewer: PropTypes.bool
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/assets/javascripts/libHome/homeRoutes.js
index 2e73d3f61..596111041 100644
--- a/app/assets/javascripts/libHome/homeRoutes.js
+++ b/app/assets/javascripts/libHome/homeRoutes.js
@@ -121,7 +121,11 @@ const routes = {
       show: function(e) {
         PublicActions.displayMolecule(e.params.moleculeId)
       },
+      tag: function (e) {
+        PublicActions.displayMolecule(e.params.moleculeId, e.params.suffix)
+      }
     },
+    '/:moleculeId/:suffix': 'tag',
     '/:moleculeId': 'show'
   },
 
diff --git a/config/routes.rb b/config/routes.rb
index 15344b511..fe9c5d7d1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -136,10 +136,9 @@
     element = doi.doiable
 
     element = element.root.containable if (element.class.name == 'Container' && suffix.start_with?("reaction"))
-
     case element.class.name
     when 'Sample'
-      url =  "#{url}molecules/#{element.molecule_id}"
+      url =  "#{url}molecules/#{element.molecule_id}/#{suffix}"
     when 'Reaction'
       url = "#{url}reactions/#{element.id}"
     when 'Container'
@@ -178,8 +177,14 @@
     "/home/publications/datasets/#{params[:id]}"
   }
 
-  get '/molecules/:id' => redirect { |params, request|
-    "/home/publications/molecules/#{params[:id]}"
+  get '/molecules/:id(/*suffix)(.:version)' => redirect { |params, request|
+    suffix = params[:suffix]
+    if suffix.blank?
+      "/home/publications/molecules/#{params[:id]}"
+    else
+      suffix.concat('.', params[:version]) if params[:version].present?
+      "/home/publications/molecules/#{params[:id]}/#{suffix}"
+    end
   }
 
   get '/reactions/:id' => redirect { |params, request|
@@ -188,7 +193,9 @@
 
   mount API => '/'
 
-  mount GrapeSwaggerRails::Engine => '/swagger'
+  if Rails.env.development?
+    mount GrapeSwaggerRails::Engine => '/swagger_doc'
+  end
 
   #root to: redirect('home')
   root to: 'pages#root_page' # , as: :unauthenticated_root

From 869169158244db5be2dae7e179c297bdd56c7662 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 9 Dec 2021 22:40:14 +0100
Subject: [PATCH 045/258] fix e.split on review page issue

---
 app/assets/javascripts/libHome/RepoCommon.js          | 2 +-
 app/assets/javascripts/libHome/RepoReactionDetails.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 717dbd6c8..3dbcd2e4b 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1845,7 +1845,7 @@ class RenderPublishAnalyses extends Component {
       <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
         <Panel.Heading style={{ border: 'unset' }}>
           <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            {IconLicense(this.props.license, (this.props.publication.author_ids.length > 1))}
+            {IconLicense(null, this.props.license, (this.props.publication.author_ids.length > 1))}
           </h4>
           <p>&nbsp;</p>
           <b>{kind}</b>&nbsp;
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 4e9926a35..423dc1351 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -464,7 +464,7 @@ export default class RepoReactionDetails extends Component {
             <h4>
               <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
               <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
-              {IconLicense((isPublished ? taggData.doi : doi), license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
+              {IconLicense((isPublished ? taggData.doi : doi.full_doi), license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
               <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
               <RepoUserComment isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
             </h4>

From c607450e99a1f12097b6571fcd257b5c2dfe9424 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 9 Dec 2021 23:02:17 +0100
Subject: [PATCH 046/258] fix e.split on review page issue

---
 app/assets/javascripts/libHome/RepoSample.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index f268ff648..c3533128c 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -127,7 +127,7 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
-          {IconLicense(sample.doi, sample.license, (sample.author_ids.length > 1))}
+          {IconLicense((isPublished ? sample.doi : sample.doi.full_doi), sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           {ElStateLabel(sample.embargo)}

From bccefa84e6deec1f1c2a7b4e4ce5d7f23bf169f6 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 13 Jan 2022 15:38:59 +0100
Subject: [PATCH 047/258] review submitter list issue

---
 app/api/chemotion/repository_api.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 887c1f5f3..b110ff41c 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -671,7 +671,7 @@ def query_submitter(element_type, state)
               search_scope = User.where(type: 'Person').where(
                 <<~SQL
                   users.id in (
-                    select published_by from publications pub where ancestry is null
+                    select published_by from publications pub where ancestry is null and deleted_at is null
                     and #{state_sql} and #{type_sql})
                 SQL
               )

From 8d0abd6ca2efe8ad4b333a16940dc4fbe47fea5f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 11 Jan 2022 07:58:13 +0100
Subject: [PATCH 048/258] publication author and the link

---
 app/api/chemotion/public_api.rb               |  2 +-
 app/api/chemotion/repository_api.rb           |  9 ++++--
 app/api/chemotion/sync_collection_api.rb      | 18 ++++++++++++
 .../common/RepoReviewAuthorsModal.js          |  2 +-
 app/assets/javascripts/libHome/RepoCommon.js  |  9 ++++--
 .../libHome/RepoReactionDetails.js            |  2 +-
 app/assets/javascripts/libHome/RepoSample.js  |  2 +-
 app/models/user.rb                            | 28 +++++++++++++++++++
 8 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index aface2489..90d1fe461 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -296,7 +296,7 @@ def query_embargo(name)
         pub_coll = Collection.public_collection
         if current_user
           coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
-          { id: coll.id, is_sync_to_me: true  }
+          { id: coll&.id, is_sync_to_me: true  }
         else
           { id: nil }
         end
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index b110ff41c..42468fdf5 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -1067,11 +1067,14 @@ def public_literature(root_publication)
         end
 
         after_validation do
-          @pub = Publication.find_by(element_id: declared_params[:elementId], element_type: declared_params[:elementType], published_by: current_user.id)
-          error!('404 No publication found', 404) unless @pub
+          unless User.reviewer_ids.include?(current_user.id)
+            @pub = Publication.find_by(element_id: params[:elementId], element_type: params[:elementType], published_by: current_user.id)
+            error!('404 No publication found', 404) unless @pub
+          end
         end
 
         post do
+          pub = Publication.find_by(element_id: params[:elementId], element_type: params[:elementType])
           declared_params = declared(params, include_missing: false)
 
           et = ElementTag.find_by(taggable_id: declared_params[:elementId], taggable_type: declared_params[:elementType])
@@ -1081,7 +1084,7 @@ def public_literature(root_publication)
           tagg_data['affiliation_ids'] = tagg_data['creators']&.map { |cr| cr['affiliationIds'] }.flatten.uniq
           tagg_data['affiliations'] = tagg_data['affiliations']&.select { |k, _| tagg_data['affiliation_ids'].include?(k.to_i) }
 
-          pub_taggable_data = @pub.taggable_data
+          pub_taggable_data = pub.taggable_data
           pub_taggable_data = pub_taggable_data.deep_merge(tagg_data || {})
           pub.update(taggable_data: pub_taggable_data)
 
diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index d6965b6fb..a70a837b7 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -21,6 +21,24 @@ class SyncCollectionAPI < Grape::API
         end
       end
 
+      namespace :publication do
+        desc "Return the 'All' collection of the current user"
+        get do
+          current_user.sync_published_collection
+        end
+      end
+
+      namespace :review do
+        desc "Return the 'All' collection of the current user"
+        get do
+          if User.reviewer_ids.include?(current_user.id)
+            current_user.sync_element_to_review_collection
+          else
+            current_user.sync_reviewing_collection
+          end
+        end
+      end
+
       namespace :take_ownership do
         desc 'Take ownership of collection with specified sync_collections_user id'
         params do
diff --git a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
index de5c60ff4..ad03c88c6 100644
--- a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
+++ b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
@@ -417,7 +417,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
     const taggData = this.state.taggData || this.props.taggData;
     const creators = taggData.creators || [];
 
-    if (this.props.isSubmitter != true || this.props.schemeOnly == true) {
+    if (this.props.schemeOnly === true) {
       return '';
     }
 
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 3dbcd2e4b..f7b8899b3 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -621,12 +621,13 @@ const IconLicense = (doi, cp, hasCoAuthors = false) => {
 };
 
 const IconToMyDB = ({
-  id, type, tooltipTitle = 'Link to My DB', isLogin = false
+  id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
 }) => {
+  const dt = isPublished ? 'publication' : 'review';
   if (isLogin) {
     return (
       <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">{tooltipTitle}</Tooltip>}>
-        <Button className="animation-ring" bsStyle="link" href={`/mydb/collection/all/${type}/${id}`} target="_blank">
+        <Button className="animation-ring" bsStyle="link" href={`/mydb/scollection/${dt}/${type}/${id}`} target="_blank">
           <i className={`icon-${type}`} />
         </Button>
       </OverlayTrigger>
@@ -640,11 +641,13 @@ IconToMyDB.propTypes = {
   type: PropTypes.string.isRequired,
   tooltipTitle: PropTypes.string,
   isLogin: PropTypes.bool,
+  isPublished: PropTypes.bool,
 };
 
 IconToMyDB.defaultProps = {
   tooltipTitle: 'Link to My DB',
-  isLogin: false
+  isLogin: false,
+  isPublished: true,
 };
 
 const SidToPubChem = ({ sid }) => {
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 423dc1351..bcbb7b6fa 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -462,7 +462,7 @@ export default class RepoReactionDetails extends Component {
             }
             {canClose ? <ClosePanel element={reaction} /> : ''}
             <h4>
-              <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
+              <IconToMyDB isLogin={idyLogin} isPublished={isPublished} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
               <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
               {IconLicense((isPublished ? taggData.doi : doi.full_doi), license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
               <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index c3533128c..0005ea54a 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -123,7 +123,7 @@ export default class RepoSample extends Component {
     return (
       <Jumbotron key={`sample-${sample.id}`}>
         <span className="repo-pub-sample-header">
-          <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={sample.id} type="sample" /></span>&nbsp;
+          <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} isPublished={isPublished} id={sample.id} type="sample" /></span>&nbsp;
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
diff --git a/app/models/user.rb b/app/models/user.rb
index 08ebad3f0..0abd48c0e 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -370,6 +370,27 @@ def reviewing_collection
       .where("collections.label = 'Reviewing'").first
   end
 
+  def sync_reviewing_collection
+    su_id = User.chemotion_user.id
+    SyncCollectionsUser.joins(
+      "INNER JOIN collections ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Reviewing'").first
+  end
+
+
+  def sync_element_to_review_collection
+    su_id = User.chemotion_user.id
+    SyncCollectionsUser.joins(
+      "INNER JOIN collections ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Element To Review'").first
+  end
+
   def published_collection
     su_id = User.chemotion_user.id
     Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
@@ -378,6 +399,13 @@ def published_collection
               .where("collections.label = 'Published Elements'").first
   end
 
+  def sync_published_collection
+    SyncCollectionsUser.joins("INNER JOIN collections on collections.id = sync_collections_users.collection_id")
+              .where("sync_collections_users.user_id = #{self.id}")
+              .where("collections.id = #{Collection.public_collection_id}").first
+
+  end
+
   def publication_embargo_collection
     su_id = User.chemotion_user.id
     Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")

From 74cdd7c1e3a4a106a0615da68132d2894961b337 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 4 Jan 2022 13:58:17 +0100
Subject: [PATCH 049/258] 1. unify the terminology: use Reference(s) 2. define
 citation type 3. publish references

---
 app/api/chemotion/literature_api.rb           |   4 +-
 app/api/chemotion/public_api.rb               |   3 +-
 app/api/chemotion/repository_api.rb           |   3 +-
 app/api/helpers/repository_helpers.rb         |   7 +-
 .../javascripts/components/CitationPanel.js   |  86 +++++++++
 .../javascripts/components/CitationType.js    |  27 +++
 .../components/PublishReactionModal.js        |  27 ++-
 .../components/PublishSampleModal.js          |  27 ++-
 .../components/TabLayoutContainer.js          |  81 +++++++++
 app/assets/javascripts/libHome/RepoCommon.js  | 172 +++++++++---------
 .../libHome/RepoReactionDetails.js            |  17 +-
 app/assets/javascripts/libHome/RepoSample.js  |   3 +-
 app/assets/stylesheets/repo_home.scss         |   8 +
 app/models/publication.rb                     |  24 ++-
 .../elements/details/LiteratureDetails.js     |   1 +
 .../literature/DetailsTabLiteratures.js       | 102 +++++++++++
 .../details/literature/LiteratureCommon.js    |   3 +-
 .../elements/details/samples/SampleDetails.js |  19 ++
 .../components/fetchers/LiteraturesFetcher.js |  26 ++-
 app/packs/src/models/Literature.js            |   1 +
 .../datacite_metadata_analysis.html.erb       |   4 +-
 .../datacite_metadata_container.html.erb      |   4 +-
 .../datacite_metadata_reaction.html.erb       |   9 +-
 ...acite_metadata_reaction_container.html.erb |   4 +-
 app/publish/datacite_metadata_sample.html.erb |   9 +-
 ...atacite_metadata_sample_container.html.erb |   4 +-
 26 files changed, 538 insertions(+), 137 deletions(-)
 create mode 100644 app/assets/javascripts/components/CitationPanel.js
 create mode 100644 app/assets/javascripts/components/CitationType.js
 create mode 100644 app/assets/javascripts/components/TabLayoutContainer.js

diff --git a/app/api/chemotion/literature_api.rb b/app/api/chemotion/literature_api.rb
index f206d4e8b..19031bbf4 100644
--- a/app/api/chemotion/literature_api.rb
+++ b/app/api/chemotion/literature_api.rb
@@ -35,7 +35,7 @@ def citation_for_elements(id = params[:element_id], type = @element_klass, cat =
             params[:element_id],
             [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id]
           ).presence
-          error!('401 Unauthorized', 401) unless allowed || @is_public
+          error!('401 Unauthorized', 401) unless allowed
           @cat = @is_public ? 'public' : 'detail'
         end
       end
@@ -51,7 +51,7 @@ def citation_for_elements(id = params[:element_id], type = @element_klass, cat =
         Literal.find(params[:id])&.update(litype: params[:litype])
 
         present(
-          citation_for_elements,
+          citation_for_elements(params[:element_id], @element_klass, @cat),
           with: Entities::LiteratureEntity,
           root: :literatures,
           with_element_count: false,
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 90d1fe461..7bc554690 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -740,7 +740,8 @@ def query_embargo(name)
               .select(
                 <<~SQL
                 literatures.*,
-                json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
+                json_object_agg(literals.id, literals.litype) as litype,
+                json_object_agg(literals.id, users.first_name || chr(32) || users.last_name) as ref_added_by
                 SQL
               ).group('literatures.id').as_json
             reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 42468fdf5..a3833e686 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -301,7 +301,8 @@ def duplicate_literals(element, literals)
               element_id: element.id,
               element_type: lit.element_type,
               category: 'detail',
-              user_id: lit.user_id
+              user_id: lit.user_id,
+              litype: lit.litype
            }
            Literal.create(attributes)
           end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 479eaf3a7..c5ed30c72 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -24,10 +24,11 @@ def get_literature(id, type, cat='public')
       .joins("inner join users on literals.user_id = users.id")
       .select(
         <<~SQL
-        literatures.* , literals.element_type,
-        json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
+        literatures.* , literals.element_type, literals.element_id,
+        json_object_agg(literals.id, literals.litype) as litype,
+        json_object_agg(literals.id, users.first_name || chr(32) || users.last_name) as ref_added_by
         SQL
-      ).group('literatures.id, literals.element_type').as_json
+      ).group('literatures.id, literals.element_type, literals.element_id').as_json
     literatures
   end
 
diff --git a/app/assets/javascripts/components/CitationPanel.js b/app/assets/javascripts/components/CitationPanel.js
new file mode 100644
index 000000000..4b980cca2
--- /dev/null
+++ b/app/assets/javascripts/components/CitationPanel.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Panel, ButtonGroup, Button, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
+import { Citation, literatureContent } from './LiteratureCommon';
+import { CitationType, CitationTypeMap, CitationTypeEOL } from './CitationType';
+
+const changeTypeBtn = (litype, updId, fn) => {
+  const cands = CitationType.filter(e => e !== litype);
+  const popover = (
+    <Popover id="popover-positioned-scrolling-left" title="Move to">
+      {
+        cands.map(e => <Button key={`btn_lit_${updId}`} bsSize="xsmall" onClick={() => fn(updId, e)}>{CitationTypeMap[e].short}</Button>)
+      }
+    </Popover>
+  );
+
+  return (
+    <OverlayTrigger animation placement="top" rootClose trigger="click" overlay={popover}>
+      <Button bsSize="sm" ><i className="fa fa-pencil" aria-hidden="true" /></Button>
+    </OverlayTrigger>
+  );
+};
+
+const buildRow = (title, fnDelete, sortedIds, rows, fnUpdate) => {
+  const unis = [...new Set(sortedIds)];
+  let cnt = 0;
+  let result = unis.map((id) => {
+    const citation = rows.get(id);
+    let { litype } = citation;
+    if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
+      litype = 'uncategorized';
+    }
+    if (litype !== title) {
+      return null;
+    }
+    const content = literatureContent(citation, true);
+    cnt += 1;
+    return (
+      <div key={`row-${id}-${citation.id}`} style={{ display: 'flex', flexWrap: 'wrap', paddingBottom: '5px' }}>
+        <div style={{ flexBasis: '86%', display: 'flex' }}>
+          <OverlayTrigger placement="top" overlay={<Tooltip id={`add-tip-${id}-${citation.id}`}>added by {citation.user_name}</Tooltip>}>
+            <span style={{ color: '#337ab7' }}>{cnt}.&nbsp;</span>
+          </OverlayTrigger>
+          <Citation literature={citation} />
+        </div>
+        <div style={{ marginLeft: 'auto' }}>
+          <ButtonGroup bsSize="small">
+            <OverlayTrigger placement="top" overlay={<Tooltip id="assign_button">copy to clipboard</Tooltip>}>
+              <Button active className="clipboardBtn" data-clipboard-text={content} >
+                <i className="fa fa-clipboard" aria-hidden="true" />
+              </Button>
+            </OverlayTrigger>
+            {changeTypeBtn(litype, id, fnUpdate)}
+            <Button bsStyle="danger"><i className="fa fa-trash-o" aria-hidden="true" onClick={() => fnDelete(citation)} /></Button>
+          </ButtonGroup>
+        </div>
+      </div>
+    );
+  });
+  result = result.filter(r => r);
+  return result;
+};
+
+const CitationPanel = (props) => {
+  const {
+    title, fnDelete, sortedIds, rows, fnUpdate
+  } = props;
+  let result = buildRow(title, fnDelete, sortedIds, rows, fnUpdate);
+  if (title === 'uncategorized' && result.length === 0) return null;
+  result = (result.length > 0) ? result : <span>(No Data)</span>;
+  return (
+    <Panel id={`_citation_panel_${title}`} defaultExpanded className="panel-cite">
+      <Panel.Heading>
+        <Panel.Title toggle>
+          &bull;&nbsp;{CitationTypeMap[title].def}
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Collapse>
+        <Panel.Body>
+          {result}
+        </Panel.Body>
+      </Panel.Collapse>
+    </Panel>
+  );
+};
+
+export default CitationPanel;
diff --git a/app/assets/javascripts/components/CitationType.js b/app/assets/javascripts/components/CitationType.js
new file mode 100644
index 000000000..f3af553cb
--- /dev/null
+++ b/app/assets/javascripts/components/CitationType.js
@@ -0,0 +1,27 @@
+const CitationTypeMap = {
+  citedOwn: {
+    def: 'cited own work - reference describing exactly this experiment/same authors',
+    short: 'cited own work',
+    datacite: ['IsCitedBy']
+  },
+  citedRef: {
+    def: 'cited reference - reference describing the experiment done by others',
+    short: 'cited reference',
+    dataCite: ['Continues']
+  },
+  referTo: {
+    def: 'referring to - reference similar experiments or related literature',
+    short: 'referring to',
+    dataCite: ['References']
+  },
+  uncategorized: {
+    def: 'uncategorized - no citation type has been set',
+    short: 'uncategorized',
+    dataCite: []
+  }
+};
+
+const CitationType = Object.keys(CitationTypeMap).filter(e => e !== 'uncategorized');
+const CitationTypeEOL = ['cited', 'citing', null, ''];
+
+export { CitationTypeMap, CitationType, CitationTypeEOL };
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/assets/javascripts/components/PublishReactionModal.js
index ff9723dde..4f9033c1e 100644
--- a/app/assets/javascripts/components/PublishReactionModal.js
+++ b/app/assets/javascripts/components/PublishReactionModal.js
@@ -27,6 +27,7 @@ import { groupByCitation, Citation } from '../components/LiteratureCommon';
 import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
 import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
 import { contentToText } from './utils/quillFormat';
+import { CitationTypeMap, CitationTypeEOL } from './CitationType';
 
 const AnalysisIdstoPublish = element => (
   element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
@@ -476,6 +477,12 @@ export default class PublishReactionModal extends Component {
         <tbody>
           {sids.map((id) => {
             const citation = rows.get(id);
+            let { litype } = citation;
+            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
+              litype = 'uncategorized';
+            }
+            const chkDisabled = litype === 'uncategorized';
+            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
             return (
               <tr key={id}>
                 <td className="padding-right" style={{ display: 'inline-flex;' }}>
@@ -485,14 +492,18 @@ export default class PublishReactionModal extends Component {
                 <td>
                   <OverlayTrigger
                     placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
                   >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
+                    <span>
+                      <Checkbox
+                        disabled={chkDisabled}
+                        checked={selectedRefs.includes(id)}
+                        onChange={() => { this.handleRefCheck(id); }}
+                      >
+                        <span>Add to publication</span><br />
+                        <span>({CitationTypeMap[litype].short})</span>
+                      </Checkbox>
+                    </span>
                   </OverlayTrigger>
                 </td>
               </tr>
@@ -806,7 +817,7 @@ export default class PublishReactionModal extends Component {
                 >
                   <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
                     <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
+                      <h4> Select References ({selectedRefs.length})</h4>
                     </Panel.Title>
                   </Panel.Heading>
                   <Panel.Body collapsible>
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/assets/javascripts/components/PublishSampleModal.js
index d4f8ea16a..0bc66ff37 100644
--- a/app/assets/javascripts/components/PublishSampleModal.js
+++ b/app/assets/javascripts/components/PublishSampleModal.js
@@ -20,6 +20,7 @@ import LoadingActions from './actions/LoadingActions';
 import SamplesFetcher from './fetchers/SamplesFetcher';
 import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
 import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import { CitationTypeMap, CitationTypeEOL } from './CitationType';
 
 export default class PublishSampleModal extends Component {
   constructor(props) {
@@ -330,6 +331,12 @@ export default class PublishSampleModal extends Component {
         <tbody>
           {sids.map((id) => {
             const citation = rows.get(id);
+            let { litype } = citation;
+            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
+              litype = 'uncategorized';
+            }
+            const chkDisabled = litype === 'uncategorized';
+            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
             return (
               <tr key={id}>
                 <td className="padding-right">
@@ -338,14 +345,18 @@ export default class PublishSampleModal extends Component {
                 <td>
                   <OverlayTrigger
                     placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
                   >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
+                    <span>
+                      <Checkbox
+                        disabled={chkDisabled}
+                        checked={selectedRefs.includes(id)}
+                        onChange={() => { this.handleRefCheck(id); }}
+                      >
+                        <span>Add to publication</span><br />
+                        <span>({CitationTypeMap[litype].short})</span>
+                      </Checkbox>
+                    </span>
                   </OverlayTrigger>
                 </td>
               </tr>
@@ -479,7 +490,7 @@ export default class PublishSampleModal extends Component {
                 <Panel eventKey="5">
                   <Panel.Heading>
                     <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
+                      <h4> Select References ({selectedRefs.length})</h4>
                     </Panel.Title>
                   </Panel.Heading>
                   <Panel.Body collapsible>
diff --git a/app/assets/javascripts/components/TabLayoutContainer.js b/app/assets/javascripts/components/TabLayoutContainer.js
new file mode 100644
index 000000000..cb442ac54
--- /dev/null
+++ b/app/assets/javascripts/components/TabLayoutContainer.js
@@ -0,0 +1,81 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+
+import ArrayUtils from './utils/ArrayUtils';
+import TabLayoutCell from './TabLayoutCell'
+
+export default class TabLayoutContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: Immutable.List(props.visible),
+      hidden: Immutable.List(props.hidden)
+    }
+
+    this.moveLayout = this.moveLayout.bind(this)
+  }
+
+  moveLayout(dragItem, hoverItem) {
+    let {visible, hidden} = this.state
+
+    if (!dragItem.isHidden && hoverItem.isHidden && visible.size == 1) return
+
+    if (dragItem.isHidden)
+      hidden = hidden.splice(dragItem.index, 1)
+    else if (visible.size > 1)
+      visible = visible.splice(dragItem.index, 1)
+
+    if (hoverItem.isHidden)
+      hidden = hidden.splice(hoverItem.index, 0, dragItem.cell)
+    else
+      visible = visible.splice(hoverItem.index, 0, dragItem.cell)
+
+    if (hidden.size == 0) {
+      hidden = ArrayUtils.pushUniq(hidden, "hidden")
+    } else if (hidden.size > 1) {
+      hidden = ArrayUtils.removeFromListByValue(hidden, "hidden")
+    }
+
+    this.setState({visible: visible, hidden: hidden})
+  }
+
+  render() {
+    const { visible, hidden } = this.state
+    const { isElementDetails, tabTitles } = this.props
+    let moveLayout = this.moveLayout
+
+    return (
+      <table className="layout-container">
+      <tbody><tr>
+        {visible.map(function(e, index) {
+          const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
+          return (<TabLayoutCell key={index + "_visible"} cell={e}
+                                 isHidden={false} index={index}
+                                 moveLayout={moveLayout}
+                                 title={tabTitles[e] || defTitle}
+                                 isElementDetails={isElementDetails}/>)
+        })}
+        {hidden.map(function(e, index) {
+          const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
+          return (<TabLayoutCell key={index + "_hidden"} cell={e}
+                                 isHidden={true} index={index}
+                                 moveLayout={moveLayout}
+                                 title={tabTitles[e] || defTitle}
+                                 isElementDetails={isElementDetails}/>)
+        })}
+      </tr></tbody>
+      </table>
+    )
+  }
+}
+
+TabLayoutContainer.propTypes = {
+  tabTitles: PropTypes.object,
+}
+
+TabLayoutContainer.defaultProps = {
+  tabTitles: {},
+}
+
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index f7b8899b3..a497a4c1f 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React, { Component } from 'react';
 import SVG from 'react-inlinesvg';
 import { replace } from 'lodash';
@@ -50,6 +51,7 @@ import RepoPublicComment from '../components/common/RepoPublicComment';
 import { previewContainerImage } from '../components/utils/imageHelper';
 import RepoXvialButton from '../components/common/RepoXvialButton';
 import RepoPreviewImage from '../components/common/RepoPreviewImage';
+import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
 
 const CollectionDesc = (props) => {
   let { label } = props;
@@ -929,88 +931,94 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   );
 };
 
-class RenderAnalysisHeader extends Component {
-  constructor(props) {
-    super();
-  }
-
-  render() {
-    const svgPath = `/images/samples/${this.props.element.sample_svg_file}`;
-    let doiLink = '';
-    const molecule = this.props.element.molecule || {};
-    if (this.props.isPublic) {
-      doiLink = this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.publication && this.props.element.tag.taggable_data.publication.doi;
-    } else {
-      doiLink = (this.props.element.doi && this.props.element.doi.full_doi) || '';
-    }
-    const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-      ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
-      : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
-
-    const iupacUserDefined = this.props.element.showed_name == (molecule.iupac_name)
-      ? <span />
-      : <h5><b>Name: </b> {this.props.element.showed_name} </h5>;
-
-    const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
-    const crsId = (this.props.element.publication && this.props.element.publication.id) || '';
-    const xvial = (this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.xvial && this.props.element.tag.taggable_data.xvial.num) || '';
-    return (
-      <div>
-        <div>
-          <br />
-          <Row style={rinchiStyle}>
-            <Col sm={6} md={6} lg={6}>
-              {resizableSvg(svgPath)}
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <span className="repo-pub-sample-header">
-                <span className="repo-pub-title"><IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" /></span>&nbsp;
-                <span className="repo-pub-title"><b>Product</b></span>&nbsp;
-                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} xvialCom={this.props.xvialCom} />
-                <RepoPublicComment isReviewer={this.props.isReviewer} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} userInfo={this.props.userInfo} pageType="reactions" pageId={this.props.reactionId} />&nbsp;
-                <RepoUserComment isLogin={this.props.isLogin} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} pageType="reactions" pageId={this.props.reactionId} />
-                <br /><br />
-              </span>
-              {nameOrFormula}
-              {iupacUserDefined}
-              <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
-              <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
-              <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
-              <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
-              <h6><b>Sample DOI: </b>
-                {
-                  this.props.isPublic ?
-                  (
-                    <span className="sub-title" inline="true">
-                      <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-                        {doiLink}
-                      </Button>
-                      <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                      <DownloadMetadataBtn type="sample" id={this.props.element.id} />
-                    </span>
-                  )
-                  :
-                  (
-                    <span className="sub-title" inline="true">
-                      {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                    </span>
-                  )
-                }
-              </h6>
-              <h6>
-                <b>ID: </b>
-                <Button key={`reaction-jumbtn-${this.props.element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
-                  CRS-{crsId}
-                </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
-              </h6>
-
-            </Col>
-          </Row>
-        </div>
-      </div>
-    );
+const RenderAnalysisHeader = (props) => {
+  const {
+    element, isPublic, isLogin, isReviewer, updateRepoXvial, xvialCom, userInfo, reactionId, literatures
+  } = props;
+  const svgPath = `/images/samples/${element.sample_svg_file}`;
+  let doiLink = '';
+  const molecule = element.molecule || {};
+  if (isPublic) {
+    doiLink = element.tag && element.tag.taggable_data && element.tag.taggable_data.publication && element.tag.taggable_data.publication.doi;
+  } else {
+    doiLink = (element.doi && element.doi.full_doi) || '';
   }
-}
+  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+    ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
+    : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
+
+  const iupacUserDefined = element.showed_name == (molecule.iupac_name)
+    ? <span />
+    : <h5><b>Name: </b> {element.showed_name} </h5>;
+
+  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
+  const crsId = (element.publication && element.publication.id) || '';
+  const xvial = (element.tag && element.tag.taggable_data && element.tag.taggable_data.xvial && element.tag.taggable_data.xvial.num) || '';
+  const references = literatures ? literatures.map(lit => (
+    <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+      <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
+      <Citation key={lit.id} literature={lit} />
+    </li>
+  )) : [];
+  return (
+    <div>
+      <br />
+      <Row style={rinchiStyle}>
+        <Col sm={6} md={6} lg={6}>
+          {resizableSvg(svgPath)}
+        </Col>
+        <Col sm={6} md={6} lg={6}>
+          <span className="repo-pub-sample-header">
+            <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={element.id} type="sample" /></span>&nbsp;
+            <span className="repo-pub-title"><b>Product</b></span>&nbsp;
+            <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={element.id} data={xvial} saveCallback={updateRepoXvial} xvialCom={xvialCom} />
+            <RepoPublicComment isReviewer={isReviewer} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} userInfo={userInfo} pageType="reactions" pageId={reactionId} />&nbsp;
+            <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
+            <br /><br />
+          </span>
+          {nameOrFormula}
+          {iupacUserDefined}
+          <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
+          <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
+          <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
+          <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
+          <h6><b>Sample DOI: </b>
+            {
+              isPublic ?
+              (
+                <span className="sub-title" inline="true">
+                  <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+                    {doiLink}
+                  </Button>
+                  <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                  <DownloadMetadataBtn type="sample" id={element.id} />
+                </span>
+              )
+              :
+              (
+                <span className="sub-title" inline="true">
+                  {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                </span>
+              )
+            }
+          </h6>
+          <h6>
+            <b>ID: </b>
+            <Button key={`reaction-jumbtn-${element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
+              CRS-{crsId}
+            </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
+          </h6>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          <h5><b>Reference{references.length > 1 ? 's' : null}: </b></h5>
+          <ul style={{ listStyle: 'none' }}>{references}</ul>
+        </Col>
+      </Row>
+    </div>
+  );
+};
 
 const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
   <span
@@ -2042,7 +2050,7 @@ class PublishAnalysesTag extends Component {
               <span style={{ float: 'left', marginRight: '5px' }}>
                 Content:
               </span>
-              <QuillViewer value={content}  />
+              <QuillViewer value={content} />
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index bcbb7b6fa..91a50dc25 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -305,10 +305,8 @@ export default class RepoReactionDetails extends Component {
     );
   }
 
-  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false, isReviewer = false) {
-    if (typeof (container) === 'undefined' || !container) {
-      return <span />;
-    }
+  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false, isReviewer = false, references = []) {
+    if (typeof (container) === 'undefined' || !container) return <span />;
 
     const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
     const show = this.state.showRA[idx];
@@ -316,7 +314,7 @@ export default class RepoReactionDetails extends Component {
       return <div />;
     }
     const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} /> : <span />;
+    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} literatures={references} /> : <span />;
     const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
     const analysesView = analyses.map((analysis) => {
       const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
@@ -372,13 +370,14 @@ export default class RepoReactionDetails extends Component {
     );
   }
 
-  renderProductAnalysisView(products, isLogin = false, isReviewer = false) {
+  renderProductAnalysisView(products, isLogin = false, isReviewer = false, references = []) {
     if (typeof (products) === 'undefined' || !products || products.length === 0) {
       return <span />;
     }
+    const prdReferences = (_sid, _references) => (_references ? _references.filter(r => r.element_type === 'Sample' && r.element_id === _sid) : []);
     return products.map((product, idx) => (
       <div key={`product-${product.id}`}>
-        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin, isReviewer)}
+        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin, isReviewer, prdReferences(product.id, references))}
       </div>
     ));
   }
@@ -407,7 +406,7 @@ export default class RepoReactionDetails extends Component {
     const { literatures } = reaction;
     const references = literatures ? literatures.map(lit => (
       <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
         <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
         <Citation key={lit.id} literature={lit} />
       </li>
@@ -490,7 +489,7 @@ export default class RepoReactionDetails extends Component {
               {this.reactionInfo(reaction)}
             </h5>
             {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction', null, -1, idyLogin, idyReview)}
-            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview)}
+            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview, literatures)}
           </Jumbotron>
         </div>
         {
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index 0005ea54a..55bc2bebd 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -97,10 +97,9 @@ export default class RepoSample extends Component {
     const { expandSA } = this.state;
 
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
-
     const references = sample.literatures ? sample.literatures.map(lit => (
       <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
         <Citation key={lit.id} literature={lit} />
       </li>
     )) : [];
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 90b2cd623..ec6f416e9 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -722,3 +722,11 @@ $bs-successcolor: #5cb85c;
   height: 90px;
   width: 90px;
 }
+.panel-cite {
+  border-color: white !important;
+  .panel-heading {
+    background-color: unset !important;
+    padding: unset !important;
+    border-color: white !important;
+  }
+}
\ No newline at end of file
diff --git a/app/models/publication.rb b/app/models/publication.rb
index c2e7235a8..b89771465 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -366,8 +366,8 @@ def rights_data
 
   def datacite_metadata_xml
     parent_element = parent&.element
-
-    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data)
+    literals = ActiveRecord::Base.connection.exec_query(literals_sql(element_id, element_type))
+    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals)
     erb_file = if element_type == 'Container'
                  "app/publish/datacite_metadata_#{parent_element.class.name.downcase}_#{element_type.downcase}.html.erb"
                else
@@ -586,6 +586,26 @@ def valid_transition(to_state)
     valid
   end
 
+  def literals_sql(e_id, e_type)
+    <<~SQL
+    select l.*,
+    case l.litype
+    when 'citedOwn' then 'IsCitedBy'
+    when 'citedRef' then 'Continues'
+    when 'referTo' then 'References'
+    end relationtype,
+    case
+    when nullif(l2.doi,'') is not null then 'DOI' || ' {|} ' || 'https://dx.doi.org/' || doi
+    when nullif(l2.isbn,'') is not null then 'ISBN' || ' {|} ' || isbn
+    when nullif(l2.url,'') is not null then 'URL' || ' {|} ' || url
+    end relatedIdentifiertype,
+    l2.title, l2.url, l2.refs, l2.doi, l2.isbn
+    from literals l
+    join literatures l2 on l.literature_id = l2.id
+    where l.element_id = #{e_id} and l.element_type = '#{e_type}' and l.litype in ('citedOwn', 'citedRef', 'referTo')
+    SQL
+  end
+
   def log_invalid_transition(to_state)
     logger("CANNOT TRANSITION from #{state} to #{to_state}")
   end
diff --git a/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js b/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
index 76af5c7e8..1f3428aea 100644
--- a/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
@@ -14,6 +14,7 @@ import {
   Tooltip
 } from 'react-bootstrap';
 import Immutable from 'immutable';
+import Cite from 'citation-js';
 import { uniqBy } from 'lodash';
 import {
   Citation,
diff --git a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
index 6dfbf47bc..176d0f40e 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
@@ -20,6 +20,8 @@ import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import CitationPanel from 'src/apps/mydb/elements/details/literature/CitationPanel';
 import { CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';
 
+import CitationTable from './CitationTable';
+
 const Cite = require('citation-js');
 require('@citation-js/plugin-isbn');
 
@@ -43,12 +45,99 @@ const warningNotification = (message) => ({
   uid: uuid.v4()
 });
 
+const clipboardTooltip = () => (
+  <Tooltip id="assign_button">copy to clipboard</Tooltip>
+);
+
+const CitationTable = ({ rows, sortedIds, userId, removeCitation }) => (
+  <Table>
+    <tbody>
+      {sortedIds.map((id, k, ids) => {
+        const citation = rows.get(id)
+        const prevCit = (k > 0) ? rows.get(ids[k-1]) : null
+        const sameRef = prevCit && prevCit.id === citation.id
+        const content = literatureContent(citation, true);
+        return sameRef ? (
+          <tr key={`header-${id}-${citation.id}`} className={`collapse literature_id_${citation.id}`}>
+            <td className="padding-right">
+              <CitationUserRow literature={citation} userId={userId} />
+            </td>
+            <td>
+              <Button
+                bsSize="small"
+                bsStyle="danger"
+                onClick={() => removeCitation(citation)}
+              >
+                <i className="fa fa-trash-o" />
+              </Button>
+            </td>
+          </tr>
+        ) : (
+          <tr key={id} className={``}>
+            <td className="padding-right">
+              <Citation literature={citation}/>
+            </td>
+            <td>
+              <Button
+                data-toggle="collapse"
+                data-target={`.literature_id_${citation.id}`}
+                bsSize="sm"
+              >
+                <Glyphicon
+                  glyph={   true  ? 'chevron-right' : 'chevron-down' }
+                  title="Collapse/Uncollapse"
+                  // onClick={() => this.collapseSample(sampleCollapseAll)}
+                  style={{
+                    // fontSize: '20px',
+                    cursor: 'pointer',
+                    color: '#337ab7',
+                    top: 0
+                  }}
+                />
+              </Button>
+              <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
+                <Button bsSize="small" active className="clipboardBtn" data-clipboard-text={content} >
+                  <i className="fa fa-clipboard" aria-hidden="true" />
+                </Button>
+              </OverlayTrigger>
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  </Table>
+);
+CitationTable.propTypes = {
+  rows: PropTypes.instanceOf(Immutable.Map),
+  sortedIds: PropTypes.array,
+  userId: PropTypes.number,
+  removeCitation: PropTypes.func
+};
+
+CitationTable.defaultProps = {
+  rows: new Immutable.Map(),
+  sortedIds: [],
+  userId: 0
+};
+
+const sameConseqLiteratureId = (citations, sortedIds, i) => {
+  if (i === 0) { return false; }
+  const a = citations.get(sortedIds[i])
+  const b = citations.get(sortedIds[i-1])
+  return (a.id === b.id)
+};
+
 const checkElementStatus = (element) => {
   const type = element.type.split('_').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
   if (element.isNew) {
     NotificationActions.add(notification(`Create ${type} first.`));
     return false;
   }
+  const isPub = !!(element.publication && element.publication.state === 'completed');
+  if (isPub) {
+    NotificationActions.add(notification('Already published. This data can not be changed.'));
+    return false;
+  }
   return true;
 };
 
@@ -119,6 +208,19 @@ export default class DetailsTabLiteratures extends Component {
       });
   }
 
+  handleTypeUpdate(updId, rType) {
+    const { element } = this.props;
+    if (!checkElementStatus(element)) { return; }
+    LoadingActions.start();
+    const params = {
+      element_id: element.id, element_type: element.type, id: updId, litype: rType
+    };
+    LiteraturesFetcher.updateReferenceType(params)
+      .then((literatures) => {
+        this.setState({ literatures, sortedIds: groupByCitation(literatures), sorting: 'literature_id' }, LoadingActions.stop());
+      });
+  }
+
   handleLiteratureRemove(literature) {
     const { element } = this.props;
     if (!checkElementStatus(element)) { return; }
diff --git a/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js b/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
index b028bce78..0fc8f8e34 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormControl, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Button, FormControl, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
 import uuid from 'uuid';
 import Literature from 'src/models/Literature';
 import { CitationType, CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';
+import Cite from 'citation-js';
 
 const RefByUserInfo = ({ info, litype }) => {
   if (typeof (info) === 'undefined' || !info || info.length === 0) {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 6a6b97b85..5870d5a4f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1291,12 +1291,31 @@ export default class SampleDetails extends React.Component {
     );
   }
 
+
   moleculeCreatorTooltip() {
     return (
       <Tooltip id="assign_button">create molecule</Tooltip>
     );
   }
 
+  sampleLiteratureTab() {
+    const { sample } = this.state;
+    if (!sample) { return null; }
+    return (
+      <Tab
+        eventKey={ind}
+        title="References"
+        key={`Literature_${sample.id}`}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }} >
+          <SampleDetailsLiteratures
+            element={sample}
+          />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
   moleculeCanoSmiles(sample) {
     if (this.state.smileReadonly && typeof (this.smilesInput) !== 'undefined'
       && this.smilesInput && typeof (sample.molecule_cano_smiles) !== 'undefined'
diff --git a/app/packs/src/components/fetchers/LiteraturesFetcher.js b/app/packs/src/components/fetchers/LiteraturesFetcher.js
index 73a2d1ddc..7ab0cdc05 100644
--- a/app/packs/src/components/fetchers/LiteraturesFetcher.js
+++ b/app/packs/src/components/fetchers/LiteraturesFetcher.js
@@ -41,14 +41,32 @@ export default class LiteraturesFetcher {
   static deleteElementReference(params) {
     const { element, literature } = params;
     const { type, id } = element;
-    const ref_id = literature.literal_id;
-    return fetch(`/api/v1/literatures?id=${ref_id}&element_type=${type}&element_id=${id}`, {
+    const refId = literature.literal_id;
+    return fetch(`/api/v1/literatures?id=${refId}&element_type=${type}&element_id=${id}`, {
       credentials: 'same-origin',
       method: 'delete',
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
       },
-    }).catch((errorMessage) => { console.log(errorMessage); });
+    }).then(response => response.json())
+      .then((json) => { if (json.error) { throw json; } })
+      .catch((errorMessage) => { throw errorMessage; });
+  }
+
+  static updateReferenceType(params) {
+    return fetch('/api/v1/literatures', {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then((json) => { if (json.error) { throw json; } return json.literatures; })
+      .then(literatures => literatures.map(lits => new Literature(lits)))
+      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
   }
 
   static fetchDOIMetadata(doi) {
diff --git a/app/packs/src/models/Literature.js b/app/packs/src/models/Literature.js
index 8d2165cbc..18b2984d2 100644
--- a/app/packs/src/models/Literature.js
+++ b/app/packs/src/models/Literature.js
@@ -1,4 +1,5 @@
 import Element from 'src/models/Element';
+import { CitationType } from '../CitationType';
 
 export default class Literature extends Element {
   static buildEmpty() {
diff --git a/app/publish/datacite_metadata_analysis.html.erb b/app/publish/datacite_metadata_analysis.html.erb
index d803626a7..eea171a19 100644
--- a/app/publish/datacite_metadata_analysis.html.erb
+++ b/app/publish/datacite_metadata_analysis.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:analysis][:DOI]}"%></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -66,6 +66,6 @@
     <%# <% publication.sample.citations.each do |c| %1> %>
     <%#   <relatedIdentifier relatedIdentifierType="DOI" relationType="IsSupplementTo"><%= c.doi %1></relatedIdentifier> %>
     <%# <% end %1> %>
-    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf"><%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
+    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
   </relatedIdentifiers>
 </resource>
diff --git a/app/publish/datacite_metadata_container.html.erb b/app/publish/datacite_metadata_container.html.erb
index cf1a863d8..31b3ad1c6 100644
--- a/app/publish/datacite_metadata_container.html.erb
+++ b/app/publish/datacite_metadata_container.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:analysis][:DOI]}"%></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -65,6 +65,6 @@
     <%# <% publication.sample.citations.each do |c| %1> %>
     <%#   <relatedIdentifier relatedIdentifierType="DOI" relationType="IsSupplementTo"><%= c.doi %1></relatedIdentifier> %>
     <%# <% end %1> %>
-    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf"><%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
+    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
   </relatedIdentifiers>
 </resource>
diff --git a/app/publish/datacite_metadata_reaction.html.erb b/app/publish/datacite_metadata_reaction.html.erb
index b24acfb80..e6c2e0a48 100644
--- a/app/publish/datacite_metadata_reaction.html.erb
+++ b/app/publish/datacite_metadata_reaction.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:reaction][:DOI]}" %></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:reaction][:DOI]}" %></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -62,10 +62,13 @@
 
   <relatedIdentifiers>
     <% dois[:analyses_dois].each do |_, ds| %>
-      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart"><%= "#{ds[:DOI]}" %></relatedIdentifier>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart">https://dx.doi.org/<%= "#{ds[:DOI]}" %></relatedIdentifier>
     <% end %>
     <% dois['samples'].each do |sid, doi| %>
-      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart"><%= "#{doi[:sample][:DOI]}" %></relatedIdentifier>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart">https://dx.doi.org/<%= "#{doi[:sample][:DOI]}" %></relatedIdentifier>
+    <% end %>
+    <% lits.each do |ref| %>
+      <relatedIdentifier relatedIdentifierType="<%=ref['relatedidentifiertype'].split(' {|} ').shift%>" relationType="<%=ref['relationtype']%>"><%=ref['relatedidentifiertype'].split(' {|} ').pop%></relatedIdentifier>
     <% end %>
   </relatedIdentifiers>
 </resource>
diff --git a/app/publish/datacite_metadata_reaction_container.html.erb b/app/publish/datacite_metadata_reaction_container.html.erb
index 78e04000d..01774d179 100644
--- a/app/publish/datacite_metadata_reaction_container.html.erb
+++ b/app/publish/datacite_metadata_reaction_container.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:analysis][:DOI]}"%></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -65,6 +65,6 @@
     <%# <% publication.sample.citations.each do |c| %1> %>
     <%#   <relatedIdentifier relatedIdentifierType="DOI" relationType="IsSupplementTo"><%= c.doi %1></relatedIdentifier> %>
     <%# <% end %1> %>
-    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf"><%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
+    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
   </relatedIdentifiers>
 </resource>
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index ec76ae79e..5e05ad91f 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:sample][:DOI]}" %></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:sample][:DOI]}" %></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -61,10 +61,13 @@
 
   <relatedIdentifiers>
     <% dois[:analyses_dois].each do |_, ds| %>
-      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart"><%= "#{ds[:DOI]}" %></relatedIdentifier>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart">https://dx.doi.org/<%= "#{ds[:DOI]}" %></relatedIdentifier>
     <% end %>
     <% if parent_element.presence %>
-      <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf"><%= "#{parent_element.full_doi}" %></relatedIdentifier>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{parent_element.full_doi}" %></relatedIdentifier>
+    <% end %>
+    <% lits.each do |ref| %>
+      <relatedIdentifier relatedIdentifierType="<%=ref['relatedidentifiertype'].split(' {|} ').shift%>" relationType="<%=ref['relationtype']%>"><%=ref['relatedidentifiertype'].split(' {|} ').pop%></relatedIdentifier>
     <% end %>
   </relatedIdentifiers>
 </resource>
diff --git a/app/publish/datacite_metadata_sample_container.html.erb b/app/publish/datacite_metadata_sample_container.html.erb
index b456b46ee..550c4ec9b 100644
--- a/app/publish/datacite_metadata_sample_container.html.erb
+++ b/app/publish/datacite_metadata_sample_container.html.erb
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
-  <identifier identifierType="DOI"><%= "#{dois[:analysis][:DOI]}"%></identifier>
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
     <creator>
@@ -65,6 +65,6 @@
     <%# <% publication.sample.citations.each do |c| %1> %>
     <%#   <relatedIdentifier relatedIdentifierType="DOI" relationType="IsSupplementTo"><%= c.doi %1></relatedIdentifier> %>
     <%# <% end %1> %>
-    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf"><%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
+    <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{dois[:parent_element][:DOI]}" %></relatedIdentifier>
   </relatedIdentifiers>
 </resource>

From 5df9ca91ad442c32d13a86d7412e4c267fe3e2aa Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 9 Feb 2022 10:18:36 +0100
Subject: [PATCH 050/258] move js file to packs

---
 Capfile                                       |   5 +-
 Gemfile                                       |   3 -
 Gemfile.lock                                  |  13 +-
 Gemfile.plugin                                |   2 +-
 app/api/api.rb                                |   2 +-
 app/api/chemotion/repository_api.rb           | 100 +------
 app/api/chemotion/search_api.rb               | 117 +++++---
 app/api/helpers/submission_helpers.rb         |  91 ++++++
 .../components/TabLayoutContainer.js          |  81 ------
 .../components/stores/LoadingStore.js         |  57 ----
 app/models/anonymous.rb                       |   4 +-
 app/models/chemscanner/molecule.rb            |   2 +-
 app/models/chemscanner/reaction.rb            |   2 +-
 app/models/chemscanner/reaction_step.rb       |   2 +-
 app/models/chemscanner/reactions_molecule.rb  |   2 +-
 app/models/chemscanner/scheme.rb              |   2 +-
 app/models/collaborator.rb                    |   4 +-
 app/models/compound_open_data.rb              |  20 +-
 app/models/doi.rb                             |   9 +-
 app/models/publication.rb                     |   3 +-
 app/models/publication_authors.rb             |   2 +-
 app/models/publication_ontologies.rb          |   2 +-
 app/models/reactions_product_sample.rb        |  22 +-
 app/models/report.rb                          |   2 +-
 app/models/sample.rb                          |   1 -
 app/models/users_collaborator.rb              |   2 +-
 app/packs/entrypoints/application.js          |   7 +
 .../src/apps/admin/TemplateManagement.js      |   2 +-
 .../apps/chemscanner/actions/ActionTypes.js   |  14 +
 .../elements/details/LiteratureDetails.js     |   1 -
 .../literature/DetailsTabLiteratures.js       |  71 -----
 .../details/reactions/ReactionDetails.js      |   1 +
 .../elements/details/samples/SampleDetails.js |  18 --
 .../details/samples/qcTab/utils/qcs.js        |   2 +-
 .../details/wellplates/designerTab/Well.js    |  34 +--
 .../src}/components/CitationPanel.js          |   3 +-
 .../src}/components/CitationType.js           |   0
 .../src}/components/PublishCommon.js          |   2 +-
 .../components/PublishReactionContainers.js   |   0
 .../src}/components/PublishReactionModal.js   |   0
 .../src}/components/PublishSampleModal.js     |   0
 .../components/ReactionDetailsRepoComment.js  |   0
 .../components/SampleDetailsRepoComment.js    |   0
 .../src}/components/actions/PublicActions.js  |   0
 .../components/actions/RepositoryActions.js   |   0
 .../chemscanner/actions/storedFileActions.js  |   0
 .../chemscanner/actions/uiActions.js          |   0
 .../components/ArchivedManagement.js          |   0
 .../components/ChemscannerImportModal.js      |   0
 .../chemscanner/components/EditMdlBtn.js      |   0
 .../chemscanner/components/EditableText.js    |   0
 .../components/FileItemActionsHeader.js       |   0
 .../components/FileItemActionsRenderer.js     |   0
 .../components/FileItemApproveFilter.js       |   0
 .../components/FileItemApproveRenderer.js     |   0
 .../components/FileItemFileNameFilter.js      |   0
 .../components/FileItemImportedFilter.js      |   0
 .../components/FileItemImportedRenderer.js    |   0
 .../components/FileItemInformationEditor.js   |   0
 .../components/FileItemInformationRenderer.js |   0
 .../components/FileItemVersionFilter.js       |   0
 .../chemscanner/components/FileStorage.js     |   0
 .../chemscanner/components/ImportModal.js     |   0
 .../components/fileStorageUtils.js            |   0
 .../containers/ArchivedManagementContainer.js |   0
 .../containers/FileStorageContainer.js        |   0
 .../containers/ImportModalContainer.js        |   0
 .../components/chemscanner/reactionUtils.js   |   0
 .../components/chemscanner/reducers/root.js   |   0
 .../chemscanner/reducers/schemes.js           |   0
 .../components/common/DeleteConfirmBtn.js     |   0
 .../common/DropdownButtonSelection.js         |   0
 .../src}/components/common/HelpInfo.js        |   0
 .../components/common/InputButtonField.js     |   0
 .../components/common/NewsPreviewModal.js     |   0
 .../src}/components/common/RepoColumnHis.js   |   0
 .../src}/components/common/RepoCommentBtn.js  |   0
 .../components/common/RepoCommentModal.js     |   0
 .../components/common/RepoMetadataModal.js    |   0
 .../components/common/RepoPreviewImage.js     |   0
 .../components/common/RepoPublicComment.js    |   0
 .../common/RepoReviewAuthorsModal.js          |   0
 .../components/common/RepoReviewHisColumns.js |   0
 .../src}/components/common/RepoReviewModal.js |   0
 .../components/common/RepoReviewTimeFormat.js |   0
 .../src}/components/common/RepoSpectra.js     |   0
 .../src}/components/common/RepoUserComment.js |   0
 .../src}/components/common/RepoXvialButton.js |   0
 .../src}/components/common/SelectionField.js  |   0
 .../components/contextActions/NoticeButton.js |  13 +-
 .../extra/AdvancedSearchXSearchParams.js      |   3 +
 .../extra/CollectionManagementXTabs.js        |   3 +
 .../extra/CollectionStoreXhandlers.js         |   3 +
 .../extra/CollectionStoreXlisteners.js        |   3 +
 .../components/extra/CollectionStoreXstate.js |   3 +
 .../components/extra/CollectionTreeXdiv.js    |   3 +
 .../components/extra/ElementStoreXhandlers.js |   3 +
 .../extra/ElementStoreXlisteners.js           |   3 +
 .../components/extra/ElementStoreXstate.js    |   3 +
 .../extra/ElementsTableEntriesXTdCont.js      |   3 +
 .../ElementsTableSampleEntriesXMolHeadCont.js |   3 +
 app/packs/src/components/extra/HomeXHome.js   |   3 +
 .../components/extra/ReactionDetailsXTabs.js  |   3 +
 .../components/extra/SampleDetailsXLabels.js  |   3 +
 .../components/extra/SampleDetailsXTabs.js    |   3 +
 .../src/components/extra/routesXroutes.js     |   3 +
 .../components/fetchers/ArticleFetcher.js     |   0
 .../src}/components/fetchers/PublicFetcher.js |   0
 .../components/fetchers/RepositoryFetcher.js  |   0
 .../src}/components/report/SectionDoiList.js  |   0
 ...esearchPlanDetailsFieldTableContextMenu.js |  70 +++++
 .../src}/components/stores/PublicStore.js     |   0
 .../structureEditor/StructureEditorModal.js   |  46 +--
 .../src}/components/users/AuthorModal.js      |   0
 .../utils/defaultAnalysisPublish.js           |   0
 .../src}/components/utils/helpDescs.js        |   0
 app/packs/src/fetchers/ScreensFetcher.js      |  20 +-
 .../src}/libHome/ContainerComponent.js        |   0
 .../src}/libHome/NavFooter.js                 |   0
 .../src}/libHome/Navigation.js                |   0
 .../src}/libHome/RepoAbout.js                 |   0
 .../src}/libHome/RepoCommon.js                |   0
 .../src}/libHome/RepoContact.js               |   0
 .../src}/libHome/RepoContainerDatasets.js     |   0
 .../src}/libHome/RepoDirective.js             |   0
 .../src}/libHome/RepoElementDetails.js        |   0
 .../src}/libHome/RepoEmbargo.js               |   0
 .../src}/libHome/RepoEmbargoDetails.js        |   0
 .../src}/libHome/RepoHome.js                  |   0
 .../src}/libHome/RepoHowTo.js                 |   0
 .../src}/libHome/RepoHowTo/EditorBtn.js       |   2 +-
 .../src}/libHome/RepoHowTo/EditorImage.js     |   0
 .../src}/libHome/RepoHowTo/EditorRichText.js  |   0
 .../src}/libHome/RepoHowTo/EditorStelle.js    |   0
 .../src}/libHome/RepoHowToDragSource.js       |   0
 .../src}/libHome/RepoHowToDropTarget.js       |   0
 .../src}/libHome/RepoHowToEditor.js           |   0
 .../src}/libHome/RepoHowToReader.js           |   0
 .../src}/libHome/RepoMoleculeList.js          |   0
 .../src}/libHome/RepoNewsEditor.js            |   0
 .../src}/libHome/RepoNewsReader.js            |   0
 .../src}/libHome/RepoNewsroom.js              |   0
 .../src}/libHome/RepoPubCommon.js             |   0
 .../src}/libHome/RepoPubl.js                  |   0
 .../src}/libHome/RepoReactionDetails.js       |   0
 .../src}/libHome/RepoReactionList.js          |   0
 .../src}/libHome/RepoReactionSchemeInfo.js    |   0
 .../src}/libHome/RepoReview.js                |   0
 .../src}/libHome/RepoReviewButtonBar.js       |   0
 .../src}/libHome/RepoReviewCommon.js          |   0
 .../src}/libHome/RepoReviewDetails.js         |   0
 .../src}/libHome/RepoSample.js                |   0
 .../src}/libHome/RepoSampleDetails.js         |   0
 .../src}/libHome/homeRoutes.js                |   0
 .../src/stores/alt/stores/LoadingStore.js     |   9 +
 app/packs/src/utilities/ElementUtils.js       |   2 +-
 app/views/pages/root_page.html.erb            |   6 +-
 config/deploy.rb                              |  16 +-
 config/profile_default.yml                    |   6 +-
 db/schema.rb                                  | 272 +++++++++++-------
 lib/reporter/docx/detail.rb                   |   4 +-
 yarn.lock                                     |  43 +++
 162 files changed, 672 insertions(+), 592 deletions(-)
 delete mode 100644 app/assets/javascripts/components/TabLayoutContainer.js
 delete mode 100644 app/assets/javascripts/components/stores/LoadingStore.js
 rename app/{assets/javascripts => packs/src}/components/CitationPanel.js (98%)
 rename app/{assets/javascripts => packs/src}/components/CitationType.js (100%)
 rename app/{assets/javascripts => packs/src}/components/PublishCommon.js (99%)
 rename app/{assets/javascripts => packs/src}/components/PublishReactionContainers.js (100%)
 rename app/{assets/javascripts => packs/src}/components/PublishReactionModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/PublishSampleModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/ReactionDetailsRepoComment.js (100%)
 rename app/{assets/javascripts => packs/src}/components/SampleDetailsRepoComment.js (100%)
 rename app/{assets/javascripts => packs/src}/components/actions/PublicActions.js (100%)
 rename app/{assets/javascripts => packs/src}/components/actions/RepositoryActions.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/actions/storedFileActions.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/actions/uiActions.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/ArchivedManagement.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/ChemscannerImportModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/EditMdlBtn.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/EditableText.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemActionsHeader.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemActionsRenderer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemApproveFilter.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemApproveRenderer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemFileNameFilter.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemImportedFilter.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemImportedRenderer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemInformationEditor.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemInformationRenderer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileItemVersionFilter.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/FileStorage.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/ImportModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/components/fileStorageUtils.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/containers/ArchivedManagementContainer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/containers/FileStorageContainer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/containers/ImportModalContainer.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/reactionUtils.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/reducers/root.js (100%)
 rename app/{assets/javascripts => packs/src}/components/chemscanner/reducers/schemes.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/DeleteConfirmBtn.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/DropdownButtonSelection.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/HelpInfo.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/InputButtonField.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/NewsPreviewModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoColumnHis.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoCommentBtn.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoCommentModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoMetadataModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoPreviewImage.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoPublicComment.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoReviewAuthorsModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoReviewHisColumns.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoReviewModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoReviewTimeFormat.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoSpectra.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoUserComment.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/RepoXvialButton.js (100%)
 rename app/{assets/javascripts => packs/src}/components/common/SelectionField.js (100%)
 create mode 100644 app/packs/src/components/extra/AdvancedSearchXSearchParams.js
 create mode 100644 app/packs/src/components/extra/CollectionManagementXTabs.js
 create mode 100644 app/packs/src/components/extra/CollectionStoreXhandlers.js
 create mode 100644 app/packs/src/components/extra/CollectionStoreXlisteners.js
 create mode 100644 app/packs/src/components/extra/CollectionStoreXstate.js
 create mode 100644 app/packs/src/components/extra/CollectionTreeXdiv.js
 create mode 100644 app/packs/src/components/extra/ElementStoreXhandlers.js
 create mode 100644 app/packs/src/components/extra/ElementStoreXlisteners.js
 create mode 100644 app/packs/src/components/extra/ElementStoreXstate.js
 create mode 100644 app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
 create mode 100644 app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
 create mode 100644 app/packs/src/components/extra/HomeXHome.js
 create mode 100644 app/packs/src/components/extra/ReactionDetailsXTabs.js
 create mode 100644 app/packs/src/components/extra/SampleDetailsXLabels.js
 create mode 100644 app/packs/src/components/extra/SampleDetailsXTabs.js
 create mode 100644 app/packs/src/components/extra/routesXroutes.js
 rename app/{assets/javascripts => packs/src}/components/fetchers/ArticleFetcher.js (100%)
 rename app/{assets/javascripts => packs/src}/components/fetchers/PublicFetcher.js (100%)
 rename app/{assets/javascripts => packs/src}/components/fetchers/RepositoryFetcher.js (100%)
 rename app/{assets/javascripts => packs/src}/components/report/SectionDoiList.js (100%)
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
 rename app/{assets/javascripts => packs/src}/components/stores/PublicStore.js (100%)
 rename app/{assets/javascripts => packs/src}/components/users/AuthorModal.js (100%)
 rename app/{assets/javascripts => packs/src}/components/utils/defaultAnalysisPublish.js (100%)
 rename app/{assets/javascripts => packs/src}/components/utils/helpDescs.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/ContainerComponent.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/NavFooter.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/Navigation.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoAbout.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoCommon.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoContact.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoContainerDatasets.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoDirective.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoElementDetails.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoEmbargo.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoEmbargoDetails.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHome.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowTo.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowTo/EditorBtn.js (98%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowTo/EditorImage.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowTo/EditorRichText.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowTo/EditorStelle.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowToDragSource.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowToDropTarget.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowToEditor.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoHowToReader.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoMoleculeList.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoNewsEditor.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoNewsReader.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoNewsroom.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoPubCommon.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoPubl.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReactionDetails.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReactionList.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReactionSchemeInfo.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReview.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReviewButtonBar.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReviewCommon.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoReviewDetails.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoSample.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/RepoSampleDetails.js (100%)
 rename app/{assets/javascripts => packs/src}/libHome/homeRoutes.js (100%)

diff --git a/Capfile b/Capfile
index 31a756efe..93b36de2c 100644
--- a/Capfile
+++ b/Capfile
@@ -3,10 +3,11 @@ require 'capistrano/setup'
 
 # Include default deployment tasks
 require 'capistrano/deploy'
+require 'capistrano/asdf'
 require "capistrano/scm/git"
 install_plugin Capistrano::SCM::Git
-require 'capistrano/rvm' # Ruby version manager
-require 'capistrano/nvm' # Node version manager
+# require 'capistrano/rvm' # Ruby version manager
+# require 'capistrano/nvm' # Node version manager
 require 'capistrano/bundler'
 require 'capistrano/rails/migrations'
 require 'capistrano/rails/assets'
diff --git a/Gemfile b/Gemfile
index dd27b89b6..f82ad443a 100644
--- a/Gemfile
+++ b/Gemfile
@@ -17,9 +17,6 @@ gem 'bootsnap'
 gem 'bootstrap-sass'
 gem 'charlock_holmes'
 
-# gem 'chem_scanner', git: 'git@git.scc.kit.edu:ComPlat/chem_scanner.git'
-gem 'chem_scanner', git: 'https://github.com/complat/chem_scanner.git'
-
 gem 'closure_tree'
 gem 'countries'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index f624499c6..45641941d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -20,17 +20,6 @@ GIT
       redcarpet (>= 3.4.0)
       rubyzip (>= 1.1)
 
-GIT
-  remote: https://github.com/complat/chem_scanner.git
-  revision: f98ed3304f5a5a91123e6f8f8cb58acc7d73ce9e
-  specs:
-    chem_scanner (0.1.3)
-      chronic_duration (>= 0.10)
-      nokogiri (>= 1.8)
-      rdkit_chem
-      ruby-geometry (>= 0.0.6)
-      ruby-ole (>= 1.2)
-
 GIT
   remote: https://github.com/complat/ketcher-rails.git
   revision: d4ae864a0e2d9e853eac8e4fc4ce7e3ab8174f80
@@ -1001,4 +990,4 @@ DEPENDENCIES
   yaml_db
 
 BUNDLED WITH
-   2.2.29
+   1.17.3
diff --git a/Gemfile.plugin b/Gemfile.plugin
index 1c4898411..3d89e5213 100644
--- a/Gemfile.plugin
+++ b/Gemfile.plugin
@@ -1 +1 @@
-gem 'nmr_sim', git: 'https://github.com/ComPlat/nmr_sim', ref: 'e2f91776aafd8eb1fa9d88c8ec2291b02201f222', group: [:plugins,:development,:production]
+# gem 'nmr_sim', git: 'https://github.com/ComPlat/nmr_sim', ref: 'e2f91776aafd8eb1fa9d88c8ec2291b02201f222', group: [:plugins,:development,:production]
diff --git a/app/api/api.rb b/app/api/api.rb
index 4f8018598..ed658ac90 100644
--- a/app/api/api.rb
+++ b/app/api/api.rb
@@ -127,7 +127,7 @@ def to_json_camel_case(val)
   }
   TARGET = Rails.env.production? ? 'https://www.chemotion-repository.net/' : 'http://localhost:3000/'
 
-  ELEMENTS = %w[research_plan screen wellplate reaction sample]
+  ELEMENTS = %w[research_plan reaction sample]
 
   TEXT_TEMPLATE = %w[SampleTextTemplate ReactionTextTemplate WellplateTextTemplate ScreenTextTemplate
                      ResearchPlanTextTemplate ReactionDescriptionTextTemplate ElementTextTemplate]
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index a3833e686..67ebc50ef 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -765,97 +765,6 @@ def save_comment(root, comment)
             review['history'] = review_history
             root.update!(review: review)
           end
-
-          def accept_new_sample(root, sample)
-            ap = Publication.create!(
-              state: Publication::STATE_PENDING,
-              element: sample,
-              doi: sample.doi,
-              published_by: root.published_by,
-              parent: root,
-              taggable_data: root.taggable_data
-            )
-            sample.analyses.each do |a|
-              accept_new_analysis(ap, a)
-            end
-          end
-
-          def accept_new_analysis(root, analysis, nil_analysis = true)
-            if nil_analysis
-              ap = Publication.create!(
-                state: Publication::STATE_PENDING,
-                element: analysis,
-                doi: analysis.doi,
-                published_by: root.published_by,
-                parent: root,
-                taggable_data: root.taggable_data
-              )
-              atag = ap.taggable_data
-              aids = atag&.delete('analysis_ids')
-              aoids = atag&.delete('original_analysis_ids')
-              ap.save! if aids || aoids
-            end
-            analysis.children.where(container_type: 'dataset').each do |ds|
-              ds.attachments.each do |att|
-                if MimeMagic.by_path(att.filename)&.type&.start_with?('image') && att.store.file_exist?
-                  file_path = File.join('public/images/publications/', att.id.to_s, '/', att.filename)
-                  public_path = File.join('public/images/publications/', att.id.to_s)
-                  FileUtils.mkdir_p(public_path)
-                  File.write(file_path, att.store.read_file.force_encoding("utf-8")) if att.store.file_exist?
-                end
-              end
-            end
-          end
-
-          def element_submit(root)
-            root.descendants.each { |np| np.destroy! if np.element.nil? }
-            root.element.reserve_suffix
-            root.element.reserve_suffix_analyses(root.element.analyses) if root.element.analyses&.length > 0
-            root.element.analyses&.each do |a|
-              accept_new_analysis(root, a, Publication.find_by(element: a).nil?)
-            end
-            case root.element_type
-            when 'Sample'
-              analyses_ids = root.element.analyses.pluck(:id)
-              root.update!(taggable_data: root.taggable_data.merge(analysis_ids: analyses_ids))
-              root.element.analyses.each do |sa|
-                accept_new_analysis(root, sa, Publication.find_by(element: sa).nil?)
-              end
-
-            when 'Reaction'
-              root.element.products.each do |p|
-                Publication.find_by(element_type: 'Sample', element_id: p.id)&.destroy! if p.analyses&.length == 0
-                next if p.analyses&.length == 0
-                p.reserve_suffix
-                p.reserve_suffix_analyses(p.analyses)
-                prod_pub = Publication.find_by(element: p)
-                if prod_pub.nil?
-                  accept_new_sample(root, p)
-                else
-                  p.analyses.each do |rpa|
-                    accept_new_analysis(prod_pub,rpa, Publication.find_by(element: rpa).nil?)
-                  end
-                end
-              end
-            end
-            root.reload
-            root.update_columns(doi_id: root.element.doi.id) unless root.doi_id == root.element.doi.id
-            root.descendants.each { |pub_a|
-              next if pub_a.element.nil?
-              pub_a.update_columns(doi_id: pub_a.element.doi.id) unless pub_a.doi_id == pub_a.element&.doi&.id
-            }
-            update_tag_doi(root.element)
-          end
-
-          def public_literature(root_publication)
-            publications = [root_publication] + root_publication.descendants
-            publications.each do |pub|
-              next unless pub.element_type == 'Reaction' || pub.element_type == 'Sample'
-              literals = Literal.where(element_type: pub.element_type, element_id: pub.element_id)
-              literals&.each { |l| l.update_columns(category: 'public') } unless literals.nil?
-            end
-          end
-
         end
 
         desc 'process reviewed publication'
@@ -1092,6 +1001,7 @@ def public_literature(root_publication)
           et_taggable_data = et.taggable_data
           pub_tag = et_taggable_data['publication']
           pub_tag.deep_merge(tagg_data || {})
+          et_taggable_data['publication'] = pub_tag
           et.update(taggable_data: et_taggable_data)
         end
       end
@@ -1188,6 +1098,7 @@ def remove_embargo_collection(col)
            col.sync_collections_users.destroy_all
            col.really_destroy!
           end
+
         end
         desc 'Generate account with chosen Embargo'
         params do
@@ -1262,6 +1173,7 @@ def remove_embargo_collection(col)
 
         post :release do
           begin
+
             pub_samples = Publication.where(ancestry: nil, element: @embargo_collection.samples).order(updated_at: :desc)
             pub_reactions = Publication.where(ancestry: nil, element: @embargo_collection.reactions).order(updated_at: :desc)
             pub_list = pub_samples + pub_reactions
@@ -1269,15 +1181,17 @@ def remove_embargo_collection(col)
             if check_state.present?
               { error: "Embargo #{@embargo_collection.label} release failed, because not all elements have been 'accepted'."}
             else
+              pub_list.each { |pub| element_submit(pub) }
+byebug
               remove_anonymous(@embargo_collection)
               handle_embargo_collections(@embargo_collection)
               case ENV['PUBLISH_MODE']
               when 'production'
                 if Rails.env.production?
-                  ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_later(@embargo_collection.id)
+                  ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
                 end
               when 'staging'
-                ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_later(@embargo_collection.id)
+                ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
                 # ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
               else 'development'
               end
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index adc32c1bd..29656bb25 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -190,57 +190,98 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
         wellplate_ids = elements.fetch(:wellplate_ids, [])
 
         if params[:is_public]
-          xvial_count = <<~SQL
-            inner join (
-              select count(e.id) as xvial_count, m.id as molecule_id from molecules m
-              inner join samples s on s.molecule_id = m.id
-              inner join publications p on p.element_type='Sample' and p.element_id=s.id  and p.deleted_at isnull
-              left outer join element_tags e on e.taggable_id = s.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-              group by m.id
-            ) c on c.molecule_id = molecules.id
-          SQL
           com_config = Rails.configuration.compound_opendata
-          xvial_com = <<~SQL
-            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+          sample_join = <<~SQL
+            INNER JOIN (
+              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
+              FROM (
+              SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
+              FROM samples, publications pub
+              WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+                and samples.id IN (#{samples.join(',')})) s where rownum = 1
+            ) s on s.molecule_id = molecules.id
+          SQL
+
+          embargo_sql = <<~SQL
+            molecules.*, sample_svg_file, sid,
+            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
+              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
+              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
+            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
+            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
+            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
+          SQL
+
+          ttl_mol = Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql)
+          slist = paginate(ttl_mol)
+          sentities = Entities::MoleculePublicationListEntity.represent(slist, serializable: true)
+#byebug
+          ssids = sentities.map { |e| e[:sid] }
+
+          xvial_count_ssql = <<~SQL
+            inner join element_tags e on e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
           SQL
-          if com_config.present?
-            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
-                          <<~SQL
-                            inner join (
-                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
-                              group by m.id
-                            ) cod on cod.molcule_id = molecules.id
-                          SQL
-                        else
-                          <<~SQL
-                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
-                          SQL
-                        end
+          x_cnt_sids = Sample.joins(xvial_count_ssql).where(id: ssids).distinct.pluck(:id) || []
+
+          xvial_com_ssql = <<~SQL
+            inner join molecules m on m.id = samples.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_sids = Sample.joins(xvial_com_ssql).where(id: ssids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          sentities = sentities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_sids.include?(obj[:sid])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_sids || []).include?(obj[:sid])
           end
-          molecules = paginate(Molecule.joins(:samples).joins(xvial_count).joins(xvial_com).where("samples.id in (?)", samples).includes(:tag)).select(
-            <<~SQL
-            molecules.*, max(samples.sample_svg_file) sample_svg_file, xvial_count, xvial_com
-            SQL
-          ).group('molecules.id, xvial_count, xvial_com').uniq
-          serialized_molecules = molecules.map { |m| MoleculeGuestListSerializer.new(m).serializable_hash }
-          paginated_reaction_ids = Kaminari.paginate_array(reaction_ids).page(page).per(page_size)
-          serialized_reactions = Reaction.find(paginated_reaction_ids).map do |reaction|
-            Entities::ReactionEntity.represent(reaction, displayed_in_list: true).serializable_hash
+
+          filter_reactions = Reaction.where("reactions.id in (?)", reactions)
+
+          embargo_rsql = <<~SQL
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
+            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
+            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
+            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
+          SQL
+
+          reaction_list = paginate(filter_reactions.joins(:publication).select(embargo_rsql).order('publications.published_at desc'))
+          reaction_entities = Entities::ReactionPublicationListEntity.represent(reaction_list, serializable: true)
+          reaction_ids = reaction_entities.map { |e| e[:id] }
+
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+          SQL
+          reaction_x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: reaction_ids).distinct.pluck(:reaction_id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+            inner join molecules m on m.id = s.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          reaction_x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: reaction_ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          reaction_entities = reaction_entities.each do |obj|
+            obj[:xvial_count] = 1 if reaction_x_cnt_ids.include?(obj[:id])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (reaction_x_com_ids || []).include?(obj[:id])
           end
+
+
           return {
             publicMolecules: {
-              molecules: serialized_molecules,
-              totalElements: molecules.size,
+              molecules: sentities,
+              totalElements: ttl_mol.size,
               page: page,
               perPage: page_size,
-              ids: molecules.pluck(:id)
+              ids: ssids
             },
             publicReactions: {
-              reactions: serialized_reactions,
+              reactions: reaction_entities,
               totalElements: reactions.size,
               page: page,
               perPage: page_size,
-              ids: filter_reactions.pluck(:id)
+              ids: reaction_ids
             }
           }
         end
diff --git a/app/api/helpers/submission_helpers.rb b/app/api/helpers/submission_helpers.rb
index 6062acfe6..8d52ca16c 100644
--- a/app/api/helpers/submission_helpers.rb
+++ b/app/api/helpers/submission_helpers.rb
@@ -20,4 +20,95 @@ def coauthor_validation(coauthors)
     end
     coauthor_ids
   end
+
+  def accept_new_sample(root, sample)
+    ap = Publication.create!(
+      state: Publication::STATE_PENDING,
+      element: sample,
+      doi: sample.doi,
+      published_by: root.published_by,
+      parent: root,
+      taggable_data: root.taggable_data
+    )
+    sample.analyses.each do |a|
+      accept_new_analysis(ap, a)
+    end
+  end
+
+  def accept_new_analysis(root, analysis, nil_analysis = true)
+    if nil_analysis
+      ap = Publication.create!(
+        state: Publication::STATE_PENDING,
+        element: analysis,
+        doi: analysis.doi,
+        published_by: root.published_by,
+        parent: root,
+        taggable_data: root.taggable_data
+      )
+      atag = ap.taggable_data
+      aids = atag&.delete('analysis_ids')
+      aoids = atag&.delete('original_analysis_ids')
+      ap.save! if aids || aoids
+    end
+    analysis.children.where(container_type: 'dataset').each do |ds|
+      ds.attachments.each do |att|
+        if MimeMagic.by_path(att.filename)&.type&.start_with?('image') && att.store.file_exist?
+          file_path = File.join('public/images/publications/', att.id.to_s, '/', att.filename)
+          public_path = File.join('public/images/publications/', att.id.to_s)
+          FileUtils.mkdir_p(public_path)
+          File.write(file_path, att.store.read_file.force_encoding("utf-8")) if att.store.file_exist?
+        end
+      end
+    end
+  end
+
+  def public_literature(root_publication)
+    publications = [root_publication] + root_publication.descendants
+    publications.each do |pub|
+      next unless pub.element_type == 'Reaction' || pub.element_type == 'Sample'
+      literals = Literal.where(element_type: pub.element_type, element_id: pub.element_id)
+      literals&.each { |l| l.update_columns(category: 'public') } unless literals.nil?
+    end
+  end
+
+  def element_submit(root)
+    root.descendants.each { |np| np.destroy! if np.element.nil? }
+    root.element.reserve_suffix
+    root.element.reserve_suffix_analyses(root.element.analyses) if root.element.analyses&.length > 0
+    root.element.analyses&.each do |a|
+      accept_new_analysis(root, a, Publication.find_by(element: a).nil?)
+    end
+    case root.element_type
+    when 'Sample'
+      analyses_ids = root.element.analyses.pluck(:id)
+      root.update!(taggable_data: root.taggable_data.merge(analysis_ids: analyses_ids))
+      root.element.analyses.each do |sa|
+        accept_new_analysis(root, sa, Publication.find_by(element: sa).nil?)
+      end
+
+    when 'Reaction'
+      root.element.products.each do |p|
+        Publication.find_by(element_type: 'Sample', element_id: p.id)&.destroy! if p.analyses&.length == 0
+        next if p.analyses&.length == 0
+        p.reserve_suffix
+        p.reserve_suffix_analyses(p.analyses)
+        prod_pub = Publication.find_by(element: p)
+        if prod_pub.nil?
+          accept_new_sample(root, p)
+        else
+          p.analyses.each do |rpa|
+            accept_new_analysis(prod_pub,rpa, Publication.find_by(element: rpa).nil?)
+          end
+        end
+      end
+    end
+    root.reload
+    root.update_columns(doi_id: root.element.doi.id) unless root.doi_id == root.element.doi.id
+    root.descendants.each { |pub_a|
+      next if pub_a.element.nil?
+      pub_a.update_columns(doi_id: pub_a.element.doi.id) unless pub_a.doi_id == pub_a.element&.doi&.id
+    }
+    update_tag_doi(root.element)
+  end
+
 end
diff --git a/app/assets/javascripts/components/TabLayoutContainer.js b/app/assets/javascripts/components/TabLayoutContainer.js
deleted file mode 100644
index cb442ac54..000000000
--- a/app/assets/javascripts/components/TabLayoutContainer.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import Immutable from 'immutable';
-
-import ArrayUtils from './utils/ArrayUtils';
-import TabLayoutCell from './TabLayoutCell'
-
-export default class TabLayoutContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      visible: Immutable.List(props.visible),
-      hidden: Immutable.List(props.hidden)
-    }
-
-    this.moveLayout = this.moveLayout.bind(this)
-  }
-
-  moveLayout(dragItem, hoverItem) {
-    let {visible, hidden} = this.state
-
-    if (!dragItem.isHidden && hoverItem.isHidden && visible.size == 1) return
-
-    if (dragItem.isHidden)
-      hidden = hidden.splice(dragItem.index, 1)
-    else if (visible.size > 1)
-      visible = visible.splice(dragItem.index, 1)
-
-    if (hoverItem.isHidden)
-      hidden = hidden.splice(hoverItem.index, 0, dragItem.cell)
-    else
-      visible = visible.splice(hoverItem.index, 0, dragItem.cell)
-
-    if (hidden.size == 0) {
-      hidden = ArrayUtils.pushUniq(hidden, "hidden")
-    } else if (hidden.size > 1) {
-      hidden = ArrayUtils.removeFromListByValue(hidden, "hidden")
-    }
-
-    this.setState({visible: visible, hidden: hidden})
-  }
-
-  render() {
-    const { visible, hidden } = this.state
-    const { isElementDetails, tabTitles } = this.props
-    let moveLayout = this.moveLayout
-
-    return (
-      <table className="layout-container">
-      <tbody><tr>
-        {visible.map(function(e, index) {
-          const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
-          return (<TabLayoutCell key={index + "_visible"} cell={e}
-                                 isHidden={false} index={index}
-                                 moveLayout={moveLayout}
-                                 title={tabTitles[e] || defTitle}
-                                 isElementDetails={isElementDetails}/>)
-        })}
-        {hidden.map(function(e, index) {
-          const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
-          return (<TabLayoutCell key={index + "_hidden"} cell={e}
-                                 isHidden={true} index={index}
-                                 moveLayout={moveLayout}
-                                 title={tabTitles[e] || defTitle}
-                                 isElementDetails={isElementDetails}/>)
-        })}
-      </tr></tbody>
-      </table>
-    )
-  }
-}
-
-TabLayoutContainer.propTypes = {
-  tabTitles: PropTypes.object,
-}
-
-TabLayoutContainer.defaultProps = {
-  tabTitles: {},
-}
-
diff --git a/app/assets/javascripts/components/stores/LoadingStore.js b/app/assets/javascripts/components/stores/LoadingStore.js
deleted file mode 100644
index a24a27a80..000000000
--- a/app/assets/javascripts/components/stores/LoadingStore.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import alt from '../alt';
-import LoadingActions from '../actions/LoadingActions';
-import ReportActions from '../actions/ReportActions';
-import ElementActions from '../actions/ElementActions';
-import InboxActions from '../actions/InboxActions';
-import PredictionActions from '../actions/PredictionActions';
-import RepositoryActions from '../actions/RepositoryActions';
-import PublicActions from '../actions/PublicActions';
-
-class LoadingStore {
-  constructor() {
-    this.loading = false;
-
-    this.bindListeners({
-      handleStart: LoadingActions.start,
-      handleStop:
-        [
-          LoadingActions.stop,
-          ReportActions.clone,
-          ReportActions.updateCheckedTags,
-          ReportActions.loadRreview,
-          ElementActions.createGenericEl,
-          ElementActions.updateGenericEl,
-          ElementActions.createSampleForReaction,
-          ElementActions.updateSampleForReaction,
-          ElementActions.updateSampleForWellplate,
-          ElementActions.createSample,
-          ElementActions.updateSample,
-          ElementActions.createReaction,
-          ElementActions.updateReaction,
-          ElementActions.createResearchPlan,
-          ElementActions.updateResearchPlan,
-          ElementActions.createWellplate,
-          ElementActions.updateWellplate,
-          InboxActions.fetchInbox,
-          PredictionActions.infer,
-          RepositoryActions.reviewPublish,
-          PublicActions.updateComment,
-          PublicActions.reviewPublish,
-          PublicActions.getSearchReactions,
-          PublicActions.getSearchMolecules,
-          PublicActions.getReactions,
-          PublicActions.getMolecules,
-        ],
-    });
-  }
-
-  handleStart() {
-    this.setState({ loading: true });
-  }
-
-  handleStop() {
-    this.setState({ loading: false });
-  }
-}
-
-export default alt.createStore(LoadingStore, 'LoadingStore');
diff --git a/app/models/anonymous.rb b/app/models/anonymous.rb
index e1aa78add..8fa637b07 100644
--- a/app/models/anonymous.rb
+++ b/app/models/anonymous.rb
@@ -20,7 +20,7 @@
 #  last_name              :string           not null
 #  deleted_at             :datetime
 #  counters               :hstore           not null
-#  name_abbreviation      :string(5)
+#  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
 #  layout                 :hstore           not null
@@ -33,12 +33,14 @@
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
+#  matrix                 :integer          default(0)
 #
 # Indexes
 #
 #  index_users_on_confirmation_token    (confirmation_token) UNIQUE
 #  index_users_on_deleted_at            (deleted_at)
 #  index_users_on_email                 (email) UNIQUE
+#  index_users_on_name_abbreviation     (name_abbreviation) UNIQUE WHERE (name_abbreviation IS NOT NULL)
 #  index_users_on_reset_password_token  (reset_password_token) UNIQUE
 #  index_users_on_unlock_token          (unlock_token) UNIQUE
 #
diff --git a/app/models/chemscanner/molecule.rb b/app/models/chemscanner/molecule.rb
index 497f586d7..779943a1c 100644
--- a/app/models/chemscanner/molecule.rb
+++ b/app/models/chemscanner/molecule.rb
@@ -27,7 +27,7 @@
 
 module Chemscanner
   # ChemScanner scanned molecule(s)
-  class Molecule < ActiveRecord::Base
+  class Molecule < ApplicationRecord
     acts_as_paranoid
 
     belongs_to :scheme, class_name: Scheme, foreign_key: :scheme_id
diff --git a/app/models/chemscanner/reaction.rb b/app/models/chemscanner/reaction.rb
index de8f433fd..c2440a2d1 100644
--- a/app/models/chemscanner/reaction.rb
+++ b/app/models/chemscanner/reaction.rb
@@ -25,7 +25,7 @@
 
 module Chemscanner
   # ChemScanner scanned reaction(s)
-  class Reaction < ActiveRecord::Base
+  class Reaction < ApplicationRecord
     acts_as_paranoid
 
     belongs_to :scheme, class_name: Scheme, foreign_key: :scheme_id
diff --git a/app/models/chemscanner/reaction_step.rb b/app/models/chemscanner/reaction_step.rb
index fa01a8651..6e027179c 100644
--- a/app/models/chemscanner/reaction_step.rb
+++ b/app/models/chemscanner/reaction_step.rb
@@ -22,7 +22,7 @@
 # ChemScanner scanned reaction(s)
 module Chemscanner
   # ChemScanner reaction steps
-  class ReactionStep < ActiveRecord::Base
+  class ReactionStep < ApplicationRecord
     acts_as_paranoid
 
     belongs_to :reaction, class_name: Reaction, foreign_key: :output_id
diff --git a/app/models/chemscanner/reactions_molecule.rb b/app/models/chemscanner/reactions_molecule.rb
index 4ebe4ea87..37e804a8b 100644
--- a/app/models/chemscanner/reactions_molecule.rb
+++ b/app/models/chemscanner/reactions_molecule.rb
@@ -16,7 +16,7 @@
 
 module Chemscanner
   # Chemscanner reaction molecule join table
-  class ReactionsMolecule < ActiveRecord::Base
+  class ReactionsMolecule < ApplicationRecord
     acts_as_paranoid
 
     belongs_to :reaction
diff --git a/app/models/chemscanner/scheme.rb b/app/models/chemscanner/scheme.rb
index 52a21d42b..92cc1d5f0 100644
--- a/app/models/chemscanner/scheme.rb
+++ b/app/models/chemscanner/scheme.rb
@@ -20,7 +20,7 @@
 
 module Chemscanner
   # Hold ChemScanner output information
-  class Scheme < ActiveRecord::Base
+  class Scheme < ApplicationRecord
     acts_as_paranoid
 
     belongs_to :creator, foreign_key: :created_by, class_name: User
diff --git a/app/models/collaborator.rb b/app/models/collaborator.rb
index 84888db07..30a2a19ec 100644
--- a/app/models/collaborator.rb
+++ b/app/models/collaborator.rb
@@ -20,7 +20,7 @@
 #  last_name              :string           not null
 #  deleted_at             :datetime
 #  counters               :hstore           not null
-#  name_abbreviation      :string(5)
+#  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
 #  layout                 :hstore           not null
@@ -33,12 +33,14 @@
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
+#  matrix                 :integer          default(0)
 #
 # Indexes
 #
 #  index_users_on_confirmation_token    (confirmation_token) UNIQUE
 #  index_users_on_deleted_at            (deleted_at)
 #  index_users_on_email                 (email) UNIQUE
+#  index_users_on_name_abbreviation     (name_abbreviation) UNIQUE WHERE (name_abbreviation IS NOT NULL)
 #  index_users_on_reset_password_token  (reset_password_token) UNIQUE
 #  index_users_on_unlock_token          (unlock_token) UNIQUE
 #
diff --git a/app/models/compound_open_data.rb b/app/models/compound_open_data.rb
index 7d0e9fb37..a03f8b5ce 100644
--- a/app/models/compound_open_data.rb
+++ b/app/models/compound_open_data.rb
@@ -1,2 +1,20 @@
-class CompoundOpenData < ActiveRecord::Base
+# == Schema Information
+#
+# Table name: compound_open_data_locals
+#
+#  x_id             :integer
+#  x_sample_id      :integer
+#  x_data           :jsonb
+#  x_created_at     :datetime
+#  x_updated_at     :datetime
+#  x_inchikey       :string
+#  x_sum_formular   :string
+#  x_cano_smiles    :string
+#  x_external_label :string
+#  x_short_label    :string
+#  x_name           :string
+#  x_stereo         :jsonb
+#
+
+class CompoundOpenData < ApplicationRecord
 end
diff --git a/app/models/doi.rb b/app/models/doi.rb
index 2717cb4c9..0a6debb78 100644
--- a/app/models/doi.rb
+++ b/app/models/doi.rb
@@ -28,12 +28,11 @@
 #  fk_rails_...  (molecule_id => molecules.id)
 #
 
-class Doi < ActiveRecord::Base
-
-  belongs_to :doiable, polymorphic: true
-  belongs_to :molecule
-  belongs_to :analysis, class_name: 'Container'
+class Doi < ApplicationRecord
 
+  belongs_to :doiable, polymorphic: true, optional: true
+  belongs_to :molecule, class_name: 'Molecule', optional: true
+  belongs_to :analysis, class_name: 'Container', optional: true
 
   before_save :align_suffix
 
diff --git a/app/models/publication.rb b/app/models/publication.rb
index b89771465..7c067a1b5 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -20,6 +20,7 @@
 #  published_by          :integer
 #  published_at          :datetime
 #  review                :jsonb
+#  accepted_at           :datetime
 #
 # Indexes
 #
@@ -41,7 +42,7 @@ def puttextcontent(content, remotefile, &block)
   acts_as_paranoid
   has_ancestry
   belongs_to :element, polymorphic: true
-  belongs_to :original_element, polymorphic: true
+  belongs_to :original_element, polymorphic: true, optional: true
   belongs_to :doi
 
   STATE_START = 'start'
diff --git a/app/models/publication_authors.rb b/app/models/publication_authors.rb
index 9f0c840a0..e7cdd72b8 100644
--- a/app/models/publication_authors.rb
+++ b/app/models/publication_authors.rb
@@ -10,5 +10,5 @@
 #  ancestry     :string
 #
 
-class PublicationAuthors < ActiveRecord::Base
+class PublicationAuthors < ApplicationRecord
 end
diff --git a/app/models/publication_ontologies.rb b/app/models/publication_ontologies.rb
index c11f0c176..d37396c64 100644
--- a/app/models/publication_ontologies.rb
+++ b/app/models/publication_ontologies.rb
@@ -11,5 +11,5 @@
 #  label        :text
 #
 
-class PublicationOntologies < ActiveRecord::Base
+class PublicationOntologies < ApplicationRecord
 end
diff --git a/app/models/reactions_product_sample.rb b/app/models/reactions_product_sample.rb
index 2f6556ddf..f74dbcce2 100644
--- a/app/models/reactions_product_sample.rb
+++ b/app/models/reactions_product_sample.rb
@@ -2,18 +2,18 @@
 #
 # Table name: reactions_samples
 #
-#  id          :integer          not null, primary key
-#  reaction_id :integer
-#  sample_id   :integer
-#  reference   :boolean
-#  equivalent  :float
-#  position    :integer
-#  type        :string
-#  deleted_at  :datetime
-#  waste       :boolean          default(FALSE)
-#  coefficient :float            default(1.0)
+#  id           :integer          not null, primary key
+#  reaction_id  :integer
+#  sample_id    :integer
+#  reference    :boolean
+#  equivalent   :float
+#  position     :integer
+#  type         :string
+#  deleted_at   :datetime
+#  waste        :boolean          default(FALSE)
+#  coefficient  :float            default(1.0)
 #  scheme_yield :float
-#  show_label  :boolean          default(FALSE), not null
+#  show_label   :boolean          default(FALSE), not null
 #
 # Indexes
 #
diff --git a/app/models/report.rb b/app/models/report.rb
index 14e8deba2..db856477d 100644
--- a/app/models/report.rb
+++ b/app/models/report.rb
@@ -20,7 +20,7 @@
 #  updated_at           :datetime         not null
 #  template             :string           default("standard")
 #  mol_serials          :text             default([])
-#  si_reaction_settings :text             default({"Name"=>true, "CAS"=>true, "Formula"=>true, "Smiles"=>true, "InCHI"=>true, "Molecular Mass"=>true, "Exact Mass"=>true, "EA"=>true})
+#  si_reaction_settings :text             default({:Name=>true, :CAS=>true, :Formula=>true, :Smiles=>true, :InCHI=>true, :"Molecular Mass"=>true, :"Exact Mass"=>true, :EA=>true})
 #  prd_atts             :text             default([])
 #  report_templates_id  :integer
 #
diff --git a/app/models/sample.rb b/app/models/sample.rb
index c55129f93..a5d4d3ddb 100644
--- a/app/models/sample.rb
+++ b/app/models/sample.rb
@@ -12,7 +12,6 @@
 #  molecule_id         :integer
 #  molfile             :binary
 #  purity              :float            default(1.0)
-#  deprecated_solvent  :string           default("")
 #  impurities          :string           default("")
 #  location            :string           default("")
 #  is_top_secret       :boolean          default(FALSE)
diff --git a/app/models/users_collaborator.rb b/app/models/users_collaborator.rb
index 5179992d6..7db9e81e2 100644
--- a/app/models/users_collaborator.rb
+++ b/app/models/users_collaborator.rb
@@ -7,5 +7,5 @@
 #  collaborator_id :integer
 #
 
-class UsersCollaborator < ActiveRecord::Base
+class UsersCollaborator < ApplicationRecord
 end
diff --git a/app/packs/entrypoints/application.js b/app/packs/entrypoints/application.js
index c8fe20f09..2e20a77f0 100644
--- a/app/packs/entrypoints/application.js
+++ b/app/packs/entrypoints/application.js
@@ -18,3 +18,10 @@ var GenericElementsAdmin = require('src/apps/generic/GenericElementsAdmin');
 var GenericSegmentsAdmin = require('src/apps/generic/GenericSegmentsAdmin');
 var GenericDatasetsAdmin = require('src/apps/generic/GenericDatasetsAdmin');
 var mydb = require('src/apps/mydb');
+
+// Fro REPO
+var RepoNewsEditor = require('./libHome/RepoNewsEditor');
+var RepoNewsReader = require('./libHome/RepoNewsReader');
+var RepoHowToEditor = require('./libHome/RepoHowToEditor');
+var RepoHowToReader = require('./libHome/RepoHowToReader');
+
diff --git a/app/packs/src/apps/admin/TemplateManagement.js b/app/packs/src/apps/admin/TemplateManagement.js
index 25bc494d3..b8bf02759 100644
--- a/app/packs/src/apps/admin/TemplateManagement.js
+++ b/app/packs/src/apps/admin/TemplateManagement.js
@@ -366,7 +366,7 @@ export default class TemplateManagement extends React.Component {
           {idx + 1}
         </td>
         <td width="30%"> {g.name} </td>
-        <td width="30%"> {this.state.reportTemplateTypes.find(({ value }) => value === g.report_type).label} </td>
+        <td width="30%"> {(this.state.reportTemplateTypes.find(({ value }) => value === g.report_type) || {}).label} </td>
         <td width="2%"> {g.id} </td>
         <td width="12%">
           <OverlayTrigger placement="bottom" overlay={editTooltip} >
diff --git a/app/packs/src/apps/chemscanner/actions/ActionTypes.js b/app/packs/src/apps/chemscanner/actions/ActionTypes.js
index b5624a5e6..6c7b36d10 100644
--- a/app/packs/src/apps/chemscanner/actions/ActionTypes.js
+++ b/app/packs/src/apps/chemscanner/actions/ActionTypes.js
@@ -63,3 +63,17 @@ export const TOGGLE_SCHEME_EXPAND = 'TOGGLE_SCHEME_EXPAND';
 export const SET_ARCHIVED_VALUE = 'SET_ARCHIVED_VALUE';
 
 export const DEFAULT = 'DEFAULT';
+
+export const REMOVE_FILE = 'REMOVE_FILE';
+
+export const REMOVE_MOLECULE = 'REMOVE_MOLECULE';
+export const REMOVE_REACTION = 'REMOVE_REACTION';
+
+export const TOGGLE_RESIN_IN_REACTION = 'TOGGLE_RESIN_IN_REACTION';
+export const TOGGLE_MOLECULE_RESIN = 'TOGGLE_MOLECULE_RESIN';
+
+export const TOGGLE_ABB_VIEW = 'TOGGLE_ABB_VIEW';
+
+export const ADD_REAGENTS_SMILES = 'ADD_REAGENTS_SMILES';
+
+export const DELETE_FILE = 'DELETE_FILE';
diff --git a/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js b/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
index 1f3428aea..76af5c7e8 100644
--- a/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/LiteratureDetails.js
@@ -14,7 +14,6 @@ import {
   Tooltip
 } from 'react-bootstrap';
 import Immutable from 'immutable';
-import Cite from 'citation-js';
 import { uniqBy } from 'lodash';
 import {
   Citation,
diff --git a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
index 176d0f40e..868865820 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
@@ -49,77 +49,6 @@ const clipboardTooltip = () => (
   <Tooltip id="assign_button">copy to clipboard</Tooltip>
 );
 
-const CitationTable = ({ rows, sortedIds, userId, removeCitation }) => (
-  <Table>
-    <tbody>
-      {sortedIds.map((id, k, ids) => {
-        const citation = rows.get(id)
-        const prevCit = (k > 0) ? rows.get(ids[k-1]) : null
-        const sameRef = prevCit && prevCit.id === citation.id
-        const content = literatureContent(citation, true);
-        return sameRef ? (
-          <tr key={`header-${id}-${citation.id}`} className={`collapse literature_id_${citation.id}`}>
-            <td className="padding-right">
-              <CitationUserRow literature={citation} userId={userId} />
-            </td>
-            <td>
-              <Button
-                bsSize="small"
-                bsStyle="danger"
-                onClick={() => removeCitation(citation)}
-              >
-                <i className="fa fa-trash-o" />
-              </Button>
-            </td>
-          </tr>
-        ) : (
-          <tr key={id} className={``}>
-            <td className="padding-right">
-              <Citation literature={citation}/>
-            </td>
-            <td>
-              <Button
-                data-toggle="collapse"
-                data-target={`.literature_id_${citation.id}`}
-                bsSize="sm"
-              >
-                <Glyphicon
-                  glyph={   true  ? 'chevron-right' : 'chevron-down' }
-                  title="Collapse/Uncollapse"
-                  // onClick={() => this.collapseSample(sampleCollapseAll)}
-                  style={{
-                    // fontSize: '20px',
-                    cursor: 'pointer',
-                    color: '#337ab7',
-                    top: 0
-                  }}
-                />
-              </Button>
-              <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
-                <Button bsSize="small" active className="clipboardBtn" data-clipboard-text={content} >
-                  <i className="fa fa-clipboard" aria-hidden="true" />
-                </Button>
-              </OverlayTrigger>
-            </td>
-          </tr>
-        );
-      })}
-    </tbody>
-  </Table>
-);
-CitationTable.propTypes = {
-  rows: PropTypes.instanceOf(Immutable.Map),
-  sortedIds: PropTypes.array,
-  userId: PropTypes.number,
-  removeCitation: PropTypes.func
-};
-
-CitationTable.defaultProps = {
-  rows: new Immutable.Map(),
-  sortedIds: [],
-  userId: 0
-};
-
 const sameConseqLiteratureId = (citations, sortedIds, i) => {
   if (i === 0) { return false; }
   const a = citations.get(sortedIds[i])
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 192a7c42c..00dd01d66 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -257,6 +257,7 @@ export default class ReactionDetails extends Component {
       const name = s.preferred_label;
       return name;
     }).filter(s => s);
+  }
 
   onUIStoreChange(state) {
     if (state.reaction.activeTab != this.state.activeTab) {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 5870d5a4f..f5537849f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1298,24 +1298,6 @@ export default class SampleDetails extends React.Component {
     );
   }
 
-  sampleLiteratureTab() {
-    const { sample } = this.state;
-    if (!sample) { return null; }
-    return (
-      <Tab
-        eventKey={ind}
-        title="References"
-        key={`Literature_${sample.id}`}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }} >
-          <SampleDetailsLiteratures
-            element={sample}
-          />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
   moleculeCanoSmiles(sample) {
     if (this.state.smileReadonly && typeof (this.smilesInput) !== 'undefined'
       && this.smilesInput && typeof (sample.molecule_cano_smiles) !== 'undefined'
diff --git a/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js b/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
index c4927bff5..948bae7b4 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/qcTab/utils/qcs.js
@@ -27,7 +27,7 @@ const extractInfer = (ai, files) => {
 };
 
 const buildQcs = (sample, infer) => {
-  const { files } = infer.result;
+  const { files } = infer.result || {};
   let irQc = {};
   let msQc = {};
   let hnmrQc = {};
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Well.js b/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Well.js
index c6d5f6df8..b10b159cd 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Well.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Well.js
@@ -4,37 +4,15 @@ import SVG from 'react-inlinesvg';
 
 export default class Well extends Component {
   render() {
-    const {sample, active, label} = this.props;
-    let displayLabel = '';
+    const {sample, active} = this.props;
 
     const className = (active) ? "well-molecule molecule-selected" : "well-molecule";
     if (sample) {
-      if (label) {
-        const labels = label.split(',');
-        if (labels.some(item => item === 'Molecular structure')){
-          return (
-            <div>
-              <SVG className={className} key={sample.id} src={sample.svgPath}/>
-            </div>
-          );
-        }
-        for (let i = 0; i < labels.length; i++) {
-          if (labels[i] == 'Name') {
-            displayLabel += sample.name + ', ';
-          } else if (labels[i] == 'External label') {
-            displayLabel += sample.external_label + ', ';
-          }
-        }
-        return (
-          <div>{displayLabel}</div>
-        );
-      } else {
-        return (
-          <div>
-            <SVG className={className} key={sample.id} src={sample.svgPath}/>
-          </div>
-        );
-      }
+      return (
+        <div>
+          <SVG className={className} key={sample.id} src={sample.svgPath}/>
+        </div>
+      );
     } else {
       return <div></div>
     }
diff --git a/app/assets/javascripts/components/CitationPanel.js b/app/packs/src/components/CitationPanel.js
similarity index 98%
rename from app/assets/javascripts/components/CitationPanel.js
rename to app/packs/src/components/CitationPanel.js
index 4b980cca2..07683ebd1 100644
--- a/app/assets/javascripts/components/CitationPanel.js
+++ b/app/packs/src/components/CitationPanel.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Panel, ButtonGroup, Button, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
+import { uniq } from 'lodash';
 import { Citation, literatureContent } from './LiteratureCommon';
 import { CitationType, CitationTypeMap, CitationTypeEOL } from './CitationType';
 
@@ -21,7 +22,7 @@ const changeTypeBtn = (litype, updId, fn) => {
 };
 
 const buildRow = (title, fnDelete, sortedIds, rows, fnUpdate) => {
-  const unis = [...new Set(sortedIds)];
+  const unis = uniq(sortedIds);
   let cnt = 0;
   let result = unis.map((id) => {
     const citation = rows.get(id);
diff --git a/app/assets/javascripts/components/CitationType.js b/app/packs/src/components/CitationType.js
similarity index 100%
rename from app/assets/javascripts/components/CitationType.js
rename to app/packs/src/components/CitationType.js
diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
similarity index 99%
rename from app/assets/javascripts/components/PublishCommon.js
rename to app/packs/src/components/PublishCommon.js
index 5a3fad528..35d40f055 100644
--- a/app/assets/javascripts/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -316,7 +316,7 @@ ChemotionTag.defaultProps = {
   tagData: {},
 };
 
-module.exports = {
+export {
   LabelPublication,
   PublishedTag,
   ChemotionTag,
diff --git a/app/assets/javascripts/components/PublishReactionContainers.js b/app/packs/src/components/PublishReactionContainers.js
similarity index 100%
rename from app/assets/javascripts/components/PublishReactionContainers.js
rename to app/packs/src/components/PublishReactionContainers.js
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
similarity index 100%
rename from app/assets/javascripts/components/PublishReactionModal.js
rename to app/packs/src/components/PublishReactionModal.js
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
similarity index 100%
rename from app/assets/javascripts/components/PublishSampleModal.js
rename to app/packs/src/components/PublishSampleModal.js
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
similarity index 100%
rename from app/assets/javascripts/components/ReactionDetailsRepoComment.js
rename to app/packs/src/components/ReactionDetailsRepoComment.js
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
similarity index 100%
rename from app/assets/javascripts/components/SampleDetailsRepoComment.js
rename to app/packs/src/components/SampleDetailsRepoComment.js
diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
similarity index 100%
rename from app/assets/javascripts/components/actions/PublicActions.js
rename to app/packs/src/components/actions/PublicActions.js
diff --git a/app/assets/javascripts/components/actions/RepositoryActions.js b/app/packs/src/components/actions/RepositoryActions.js
similarity index 100%
rename from app/assets/javascripts/components/actions/RepositoryActions.js
rename to app/packs/src/components/actions/RepositoryActions.js
diff --git a/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js b/app/packs/src/components/chemscanner/actions/storedFileActions.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
rename to app/packs/src/components/chemscanner/actions/storedFileActions.js
diff --git a/app/assets/javascripts/components/chemscanner/actions/uiActions.js b/app/packs/src/components/chemscanner/actions/uiActions.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/actions/uiActions.js
rename to app/packs/src/components/chemscanner/actions/uiActions.js
diff --git a/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js b/app/packs/src/components/chemscanner/components/ArchivedManagement.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
rename to app/packs/src/components/chemscanner/components/ArchivedManagement.js
diff --git a/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js b/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
rename to app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
diff --git a/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js b/app/packs/src/components/chemscanner/components/EditMdlBtn.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
rename to app/packs/src/components/chemscanner/components/EditMdlBtn.js
diff --git a/app/assets/javascripts/components/chemscanner/components/EditableText.js b/app/packs/src/components/chemscanner/components/EditableText.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/EditableText.js
rename to app/packs/src/components/chemscanner/components/EditableText.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js b/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
rename to app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js b/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
rename to app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js b/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
rename to app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js b/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
rename to app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js b/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
rename to app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js b/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
rename to app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js b/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
rename to app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js b/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
rename to app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js b/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
rename to app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js b/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
rename to app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
diff --git a/app/assets/javascripts/components/chemscanner/components/FileStorage.js b/app/packs/src/components/chemscanner/components/FileStorage.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/FileStorage.js
rename to app/packs/src/components/chemscanner/components/FileStorage.js
diff --git a/app/assets/javascripts/components/chemscanner/components/ImportModal.js b/app/packs/src/components/chemscanner/components/ImportModal.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/ImportModal.js
rename to app/packs/src/components/chemscanner/components/ImportModal.js
diff --git a/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js b/app/packs/src/components/chemscanner/components/fileStorageUtils.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
rename to app/packs/src/components/chemscanner/components/fileStorageUtils.js
diff --git a/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js b/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
rename to app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
diff --git a/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js b/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
rename to app/packs/src/components/chemscanner/containers/FileStorageContainer.js
diff --git a/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js b/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
rename to app/packs/src/components/chemscanner/containers/ImportModalContainer.js
diff --git a/app/assets/javascripts/components/chemscanner/reactionUtils.js b/app/packs/src/components/chemscanner/reactionUtils.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/reactionUtils.js
rename to app/packs/src/components/chemscanner/reactionUtils.js
diff --git a/app/assets/javascripts/components/chemscanner/reducers/root.js b/app/packs/src/components/chemscanner/reducers/root.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/reducers/root.js
rename to app/packs/src/components/chemscanner/reducers/root.js
diff --git a/app/assets/javascripts/components/chemscanner/reducers/schemes.js b/app/packs/src/components/chemscanner/reducers/schemes.js
similarity index 100%
rename from app/assets/javascripts/components/chemscanner/reducers/schemes.js
rename to app/packs/src/components/chemscanner/reducers/schemes.js
diff --git a/app/assets/javascripts/components/common/DeleteConfirmBtn.js b/app/packs/src/components/common/DeleteConfirmBtn.js
similarity index 100%
rename from app/assets/javascripts/components/common/DeleteConfirmBtn.js
rename to app/packs/src/components/common/DeleteConfirmBtn.js
diff --git a/app/assets/javascripts/components/common/DropdownButtonSelection.js b/app/packs/src/components/common/DropdownButtonSelection.js
similarity index 100%
rename from app/assets/javascripts/components/common/DropdownButtonSelection.js
rename to app/packs/src/components/common/DropdownButtonSelection.js
diff --git a/app/assets/javascripts/components/common/HelpInfo.js b/app/packs/src/components/common/HelpInfo.js
similarity index 100%
rename from app/assets/javascripts/components/common/HelpInfo.js
rename to app/packs/src/components/common/HelpInfo.js
diff --git a/app/assets/javascripts/components/common/InputButtonField.js b/app/packs/src/components/common/InputButtonField.js
similarity index 100%
rename from app/assets/javascripts/components/common/InputButtonField.js
rename to app/packs/src/components/common/InputButtonField.js
diff --git a/app/assets/javascripts/components/common/NewsPreviewModal.js b/app/packs/src/components/common/NewsPreviewModal.js
similarity index 100%
rename from app/assets/javascripts/components/common/NewsPreviewModal.js
rename to app/packs/src/components/common/NewsPreviewModal.js
diff --git a/app/assets/javascripts/components/common/RepoColumnHis.js b/app/packs/src/components/common/RepoColumnHis.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoColumnHis.js
rename to app/packs/src/components/common/RepoColumnHis.js
diff --git a/app/assets/javascripts/components/common/RepoCommentBtn.js b/app/packs/src/components/common/RepoCommentBtn.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoCommentBtn.js
rename to app/packs/src/components/common/RepoCommentBtn.js
diff --git a/app/assets/javascripts/components/common/RepoCommentModal.js b/app/packs/src/components/common/RepoCommentModal.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoCommentModal.js
rename to app/packs/src/components/common/RepoCommentModal.js
diff --git a/app/assets/javascripts/components/common/RepoMetadataModal.js b/app/packs/src/components/common/RepoMetadataModal.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoMetadataModal.js
rename to app/packs/src/components/common/RepoMetadataModal.js
diff --git a/app/assets/javascripts/components/common/RepoPreviewImage.js b/app/packs/src/components/common/RepoPreviewImage.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoPreviewImage.js
rename to app/packs/src/components/common/RepoPreviewImage.js
diff --git a/app/assets/javascripts/components/common/RepoPublicComment.js b/app/packs/src/components/common/RepoPublicComment.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoPublicComment.js
rename to app/packs/src/components/common/RepoPublicComment.js
diff --git a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
rename to app/packs/src/components/common/RepoReviewAuthorsModal.js
diff --git a/app/assets/javascripts/components/common/RepoReviewHisColumns.js b/app/packs/src/components/common/RepoReviewHisColumns.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoReviewHisColumns.js
rename to app/packs/src/components/common/RepoReviewHisColumns.js
diff --git a/app/assets/javascripts/components/common/RepoReviewModal.js b/app/packs/src/components/common/RepoReviewModal.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoReviewModal.js
rename to app/packs/src/components/common/RepoReviewModal.js
diff --git a/app/assets/javascripts/components/common/RepoReviewTimeFormat.js b/app/packs/src/components/common/RepoReviewTimeFormat.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoReviewTimeFormat.js
rename to app/packs/src/components/common/RepoReviewTimeFormat.js
diff --git a/app/assets/javascripts/components/common/RepoSpectra.js b/app/packs/src/components/common/RepoSpectra.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoSpectra.js
rename to app/packs/src/components/common/RepoSpectra.js
diff --git a/app/assets/javascripts/components/common/RepoUserComment.js b/app/packs/src/components/common/RepoUserComment.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoUserComment.js
rename to app/packs/src/components/common/RepoUserComment.js
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
similarity index 100%
rename from app/assets/javascripts/components/common/RepoXvialButton.js
rename to app/packs/src/components/common/RepoXvialButton.js
diff --git a/app/assets/javascripts/components/common/SelectionField.js b/app/packs/src/components/common/SelectionField.js
similarity index 100%
rename from app/assets/javascripts/components/common/SelectionField.js
rename to app/packs/src/components/common/SelectionField.js
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 6a3816634..a66af2fe2 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -122,12 +122,15 @@ const createUpgradeNotification = (serverVersion, localVersion) => {
     `Current version: ${serverVersion}`,
     '--------------------------',
   ].join('\n');
-  const contentJson = {
-    data: content,
-    url: '/about',
-    urlTitle: "Check what's new here",
+  const contentJson = { data: content };
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
   };
-  const infoTimeString = formatDate(new Date().toString());
+  const infoTimeString = new Date().toLocaleDateString('de-DE', options);
   const not = {
     id: -1,
     sender_name: 'System Administrator',
diff --git a/app/packs/src/components/extra/AdvancedSearchXSearchParams.js b/app/packs/src/components/extra/AdvancedSearchXSearchParams.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/AdvancedSearchXSearchParams.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionManagementXTabs.js b/app/packs/src/components/extra/CollectionManagementXTabs.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/CollectionManagementXTabs.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXhandlers.js b/app/packs/src/components/extra/CollectionStoreXhandlers.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/CollectionStoreXhandlers.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXlisteners.js b/app/packs/src/components/extra/CollectionStoreXlisteners.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/CollectionStoreXlisteners.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXstate.js b/app/packs/src/components/extra/CollectionStoreXstate.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/CollectionStoreXstate.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionTreeXdiv.js b/app/packs/src/components/extra/CollectionTreeXdiv.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/CollectionTreeXdiv.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXhandlers.js b/app/packs/src/components/extra/ElementStoreXhandlers.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ElementStoreXhandlers.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXlisteners.js b/app/packs/src/components/extra/ElementStoreXlisteners.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ElementStoreXlisteners.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXstate.js b/app/packs/src/components/extra/ElementStoreXstate.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ElementStoreXstate.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js b/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js b/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/HomeXHome.js b/app/packs/src/components/extra/HomeXHome.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/HomeXHome.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ReactionDetailsXTabs.js b/app/packs/src/components/extra/ReactionDetailsXTabs.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/ReactionDetailsXTabs.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/SampleDetailsXLabels.js b/app/packs/src/components/extra/SampleDetailsXLabels.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/SampleDetailsXLabels.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/SampleDetailsXTabs.js b/app/packs/src/components/extra/SampleDetailsXTabs.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/SampleDetailsXTabs.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/routesXroutes.js b/app/packs/src/components/extra/routesXroutes.js
new file mode 100644
index 000000000..985076263
--- /dev/null
+++ b/app/packs/src/components/extra/routesXroutes.js
@@ -0,0 +1,3 @@
+export default {
+  count : 0,
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/components/fetchers/ArticleFetcher.js b/app/packs/src/components/fetchers/ArticleFetcher.js
similarity index 100%
rename from app/assets/javascripts/components/fetchers/ArticleFetcher.js
rename to app/packs/src/components/fetchers/ArticleFetcher.js
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
similarity index 100%
rename from app/assets/javascripts/components/fetchers/PublicFetcher.js
rename to app/packs/src/components/fetchers/PublicFetcher.js
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
similarity index 100%
rename from app/assets/javascripts/components/fetchers/RepositoryFetcher.js
rename to app/packs/src/components/fetchers/RepositoryFetcher.js
diff --git a/app/assets/javascripts/components/report/SectionDoiList.js b/app/packs/src/components/report/SectionDoiList.js
similarity index 100%
rename from app/assets/javascripts/components/report/SectionDoiList.js
rename to app/packs/src/components/report/SectionDoiList.js
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
new file mode 100644
index 000000000..1c0e41a22
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
@@ -0,0 +1,70 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Menu } from 'react-data-grid-addons';
+
+const { ContextMenu, MenuItem } = Menu;
+
+class ResearchPlanDetailsFieldTableContextMenu extends Component {
+
+  render() {
+    const {
+      idx, id, rowIdx, onColumnInsertLeft, onColumnInsertRight, onColumnRename,
+      onColumnDelete, onRowInsertAbove, onRowInsertBelow, onRowDelete
+    } = this.props;
+
+    return (
+      <ContextMenu id={id}>
+        <MenuItem data={{ rowIdx, idx }} onClick={onColumnInsertLeft}>
+          Insert column left
+        </MenuItem>
+        <MenuItem data={{ rowIdx, idx }} onClick={onColumnInsertRight}>
+          Insert column right
+        </MenuItem>
+
+        <MenuItem divider />
+
+        <MenuItem data={{ rowIdx, idx }} onClick={onColumnRename}>
+          Rename column
+        </MenuItem>
+
+        <MenuItem divider />
+
+        <MenuItem data={{ rowIdx, idx }} onClick={onColumnDelete}>
+          Delete column
+        </MenuItem>
+
+        <MenuItem divider />
+
+        <MenuItem data={{ rowIdx, idx }} onClick={onRowInsertAbove}>
+          Insert row above
+        </MenuItem>
+        <MenuItem data={{ rowIdx, idx }} onClick={onRowInsertBelow}>
+          Insert row below
+        </MenuItem>
+
+        <MenuItem divider />
+
+        <MenuItem data={{ rowIdx, idx }} onClick={onRowDelete}>
+          Delete Row
+        </MenuItem>
+
+      </ContextMenu>
+    );
+  }
+}
+
+ResearchPlanDetailsFieldTableContextMenu.propTypes = {
+  idx: PropTypes.number,
+  id: PropTypes.string,
+  rowIdx: PropTypes.number,
+  onColumnInsertLeft: PropTypes.func,
+  onColumnInsertRight: PropTypes.func,
+  onColumnRename: PropTypes.func,
+  onColumnDelete: PropTypes.func,
+  onRowInsertAbove: PropTypes.func,
+  onRowInsertBelow: PropTypes.func,
+  onRowDelete: PropTypes.func
+};
+
+export default ResearchPlanDetailsFieldTableContextMenu;
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
similarity index 100%
rename from app/assets/javascripts/components/stores/PublicStore.js
rename to app/packs/src/components/stores/PublicStore.js
diff --git a/app/packs/src/components/structureEditor/StructureEditorModal.js b/app/packs/src/components/structureEditor/StructureEditorModal.js
index 306055d25..3968f8b9b 100644
--- a/app/packs/src/components/structureEditor/StructureEditorModal.js
+++ b/app/packs/src/components/structureEditor/StructureEditorModal.js
@@ -57,10 +57,12 @@ const WarningBox = ({ handleCancelBtn, hideWarning, show }) => (show ?
         <p>This sample has parents or descendants, and they will not be changed.</p>
         <p>Are you sure?</p>
         <br />
-        <Button bsStyle="danger" onClick={handleCancelBtn} className="g-marginLeft--10">
+        <Button bsStyle="danger" onClick={handleCancelBtn}
+          className="g-marginLeft--10">
           Cancel
         </Button>
-        <Button bsStyle="warning" onClick={hideWarning} className="g-marginLeft--10">
+        <Button bsStyle="warning" onClick={hideWarning}
+          className="g-marginLeft--10">
           Continue Editing
         </Button>
       </Panel.Body>
@@ -97,11 +99,10 @@ export default class StructureEditorModal extends React.Component {
     this.updateEditor = this.updateEditor.bind(this);
   }
 
-  componentDidMount() {
-    UserStore.listen(this.onChangeUser);
+    this.handleEditorSelection = this.handleEditorSelection.bind(this);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {
     this.setState({
       showModal: nextProps.showModal,
       molfile: nextProps.molfile
@@ -148,11 +149,11 @@ export default class StructureEditorModal extends React.Component {
 
   initializeEditor() {
     const { editor, molfile } = this.state;
-    if (editor) { editor.structureDef.molfile = molfile; }
+    editor.molfile = molfile;
   }
 
   handleEditorSelection(e) {
-    this.setState(prevState => ({ ...prevState, editor: this.editors[e.value] }));
+    this.setState(prevState => ({ ...prevState, editor: this.props.editors[e.value] }));
   }
 
   handleCancelBtn() {
@@ -211,9 +212,10 @@ export default class StructureEditorModal extends React.Component {
     const handleSaveBtn = !this.props.onSave ? null : this.handleSaveBtn.bind(this);
     const { cancelBtnText, submitBtnText } = this.props;
     const submitAddons = this.props.submitAddons ? this.props.submitAddons : '';
-    const { editor, showWarning, molfile } = this.state;
+    const { editor, showWarning } = this.state;
+
     const iframeHeight = showWarning ? '0px' : '730px';
-    const iframeStyle = showWarning ? { border: 'none' } : {};
+    const iframeStyle = showWarning ? { border: 'none' } : { };
     const buttonToolStyle = showWarning ? { marginTop: '20px', display: 'none' } : { marginTop: '20px' };
 
     let useEditor = (
@@ -259,12 +261,10 @@ export default class StructureEditorModal extends React.Component {
         >
           <Modal.Header closeButton>
             <Modal.Title>
-              <EditorList
-                value={editor.id}
-                fnChange={this.handleEditorSelection}
-                options={editorOptions}
+              <EditorSelector
+                value={editor}
+                updateEditorSelection={this.handleEditorSelection}
               />
-              {citeMarvin}
             </Modal.Title>
           </Modal.Header>
           <Modal.Body >
@@ -273,7 +273,17 @@ export default class StructureEditorModal extends React.Component {
               hideWarning={this.hideWarning.bind(this)}
               show={!!showWarning}
             />
-            {useEditor}
+            <div>
+              <iframe
+                id={editor.id}
+                src={editor.src}
+                title={`${editor.title}`}
+                height={iframeHeight}
+                width="100%"
+                style={iframeStyle}
+                ref={(f) => { this.ifr = f; }}
+              />
+            </div>
             <div style={buttonToolStyle}>
               <ButtonToolbar>
                 <Button bsStyle="warning" onClick={this.handleCancelBtn.bind(this)}>
@@ -295,6 +305,7 @@ export default class StructureEditorModal extends React.Component {
 }
 
 StructureEditorModal.propTypes = {
+  editors: PropTypes.objectOf(PropTypes.instanceOf(StructureEditor)),
   molfile: PropTypes.string,
   showModal: PropTypes.bool,
   hasChildren: PropTypes.bool,
@@ -306,12 +317,11 @@ StructureEditorModal.propTypes = {
 };
 
 StructureEditorModal.defaultProps = {
-  molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n',
+  editors: EditorList,
+  molfile: "\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n",
   showModal: false,
   hasChildren: false,
   hasParent: false,
-  onCancel: () => {},
-  onSave: () => {},
   submitBtnText: 'Save',
   cancelBtnText: 'Cancel',
 };
diff --git a/app/assets/javascripts/components/users/AuthorModal.js b/app/packs/src/components/users/AuthorModal.js
similarity index 100%
rename from app/assets/javascripts/components/users/AuthorModal.js
rename to app/packs/src/components/users/AuthorModal.js
diff --git a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js b/app/packs/src/components/utils/defaultAnalysisPublish.js
similarity index 100%
rename from app/assets/javascripts/components/utils/defaultAnalysisPublish.js
rename to app/packs/src/components/utils/defaultAnalysisPublish.js
diff --git a/app/assets/javascripts/components/utils/helpDescs.js b/app/packs/src/components/utils/helpDescs.js
similarity index 100%
rename from app/assets/javascripts/components/utils/helpDescs.js
rename to app/packs/src/components/utils/helpDescs.js
diff --git a/app/packs/src/fetchers/ScreensFetcher.js b/app/packs/src/fetchers/ScreensFetcher.js
index d636e2144..fef2521f8 100644
--- a/app/packs/src/fetchers/ScreensFetcher.js
+++ b/app/packs/src/fetchers/ScreensFetcher.js
@@ -34,13 +34,13 @@ export default class ScreensFetcher {
       credentials: 'same-origin',
       method: 'put',
       headers: {
-        Accept: 'application/json',
+        'Accept': 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(screen.serialize())
     }).then(response => response.json())
       .then(json => GenericElsFetcher.uploadGenericFiles(screen, json.screen.id, 'Screen')
-      .then(()=>BaseFetcher.updateAnnotationsInContainer(screen))  
+      .then(()=>BaseFetcher.updateAnnotationsInContainer(screen))
       .then(() => this.fetchById(json.screen.id))).catch((errorMessage) => {
           console.log(errorMessage);
         });
@@ -52,7 +52,7 @@ export default class ScreensFetcher {
         return promise();
       });
     }
-    return promise();
+
   }
 
   static create(screen) {
@@ -62,7 +62,7 @@ export default class ScreensFetcher {
       credentials: 'same-origin',
       method: 'post',
       headers: {
-        Accept: 'application/json',
+        'Accept': 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(screen.serialize())
@@ -72,14 +72,12 @@ export default class ScreensFetcher {
           console.log(errorMessage);
         });
 
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
+    if(files.length > 0){
+      return AttachmentFetcher.uploadFiles(files)().then(()=> promise());
+    }else{
+      return promise()
     }
-    return promise();
+
   }
 
   static addResearchPlan(screen_id, collection_id) {
diff --git a/app/assets/javascripts/libHome/ContainerComponent.js b/app/packs/src/libHome/ContainerComponent.js
similarity index 100%
rename from app/assets/javascripts/libHome/ContainerComponent.js
rename to app/packs/src/libHome/ContainerComponent.js
diff --git a/app/assets/javascripts/libHome/NavFooter.js b/app/packs/src/libHome/NavFooter.js
similarity index 100%
rename from app/assets/javascripts/libHome/NavFooter.js
rename to app/packs/src/libHome/NavFooter.js
diff --git a/app/assets/javascripts/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
similarity index 100%
rename from app/assets/javascripts/libHome/Navigation.js
rename to app/packs/src/libHome/Navigation.js
diff --git a/app/assets/javascripts/libHome/RepoAbout.js b/app/packs/src/libHome/RepoAbout.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoAbout.js
rename to app/packs/src/libHome/RepoAbout.js
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoCommon.js
rename to app/packs/src/libHome/RepoCommon.js
diff --git a/app/assets/javascripts/libHome/RepoContact.js b/app/packs/src/libHome/RepoContact.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoContact.js
rename to app/packs/src/libHome/RepoContact.js
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/packs/src/libHome/RepoContainerDatasets.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoContainerDatasets.js
rename to app/packs/src/libHome/RepoContainerDatasets.js
diff --git a/app/assets/javascripts/libHome/RepoDirective.js b/app/packs/src/libHome/RepoDirective.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoDirective.js
rename to app/packs/src/libHome/RepoDirective.js
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoElementDetails.js
rename to app/packs/src/libHome/RepoElementDetails.js
diff --git a/app/assets/javascripts/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoEmbargo.js
rename to app/packs/src/libHome/RepoEmbargo.js
diff --git a/app/assets/javascripts/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoEmbargoDetails.js
rename to app/packs/src/libHome/RepoEmbargoDetails.js
diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHome.js
rename to app/packs/src/libHome/RepoHome.js
diff --git a/app/assets/javascripts/libHome/RepoHowTo.js b/app/packs/src/libHome/RepoHowTo.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowTo.js
rename to app/packs/src/libHome/RepoHowTo.js
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js b/app/packs/src/libHome/RepoHowTo/EditorBtn.js
similarity index 98%
rename from app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
rename to app/packs/src/libHome/RepoHowTo/EditorBtn.js
index a503ce392..a89bd73ed 100644
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
+++ b/app/packs/src/libHome/RepoHowTo/EditorBtn.js
@@ -60,7 +60,7 @@ EditorBaseBtn.defaultProps = {
   onClick: null,
 };
 
-module.exports = {
+export {
   FaBtn,
   EditorBtn,
   EditorBaseBtn,
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js b/app/packs/src/libHome/RepoHowTo/EditorImage.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
rename to app/packs/src/libHome/RepoHowTo/EditorImage.js
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js b/app/packs/src/libHome/RepoHowTo/EditorRichText.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
rename to app/packs/src/libHome/RepoHowTo/EditorRichText.js
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js b/app/packs/src/libHome/RepoHowTo/EditorStelle.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
rename to app/packs/src/libHome/RepoHowTo/EditorStelle.js
diff --git a/app/assets/javascripts/libHome/RepoHowToDragSource.js b/app/packs/src/libHome/RepoHowToDragSource.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowToDragSource.js
rename to app/packs/src/libHome/RepoHowToDragSource.js
diff --git a/app/assets/javascripts/libHome/RepoHowToDropTarget.js b/app/packs/src/libHome/RepoHowToDropTarget.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowToDropTarget.js
rename to app/packs/src/libHome/RepoHowToDropTarget.js
diff --git a/app/assets/javascripts/libHome/RepoHowToEditor.js b/app/packs/src/libHome/RepoHowToEditor.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowToEditor.js
rename to app/packs/src/libHome/RepoHowToEditor.js
diff --git a/app/assets/javascripts/libHome/RepoHowToReader.js b/app/packs/src/libHome/RepoHowToReader.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoHowToReader.js
rename to app/packs/src/libHome/RepoHowToReader.js
diff --git a/app/assets/javascripts/libHome/RepoMoleculeList.js b/app/packs/src/libHome/RepoMoleculeList.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoMoleculeList.js
rename to app/packs/src/libHome/RepoMoleculeList.js
diff --git a/app/assets/javascripts/libHome/RepoNewsEditor.js b/app/packs/src/libHome/RepoNewsEditor.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoNewsEditor.js
rename to app/packs/src/libHome/RepoNewsEditor.js
diff --git a/app/assets/javascripts/libHome/RepoNewsReader.js b/app/packs/src/libHome/RepoNewsReader.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoNewsReader.js
rename to app/packs/src/libHome/RepoNewsReader.js
diff --git a/app/assets/javascripts/libHome/RepoNewsroom.js b/app/packs/src/libHome/RepoNewsroom.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoNewsroom.js
rename to app/packs/src/libHome/RepoNewsroom.js
diff --git a/app/assets/javascripts/libHome/RepoPubCommon.js b/app/packs/src/libHome/RepoPubCommon.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoPubCommon.js
rename to app/packs/src/libHome/RepoPubCommon.js
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoPubl.js
rename to app/packs/src/libHome/RepoPubl.js
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReactionDetails.js
rename to app/packs/src/libHome/RepoReactionDetails.js
diff --git a/app/assets/javascripts/libHome/RepoReactionList.js b/app/packs/src/libHome/RepoReactionList.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReactionList.js
rename to app/packs/src/libHome/RepoReactionList.js
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/packs/src/libHome/RepoReactionSchemeInfo.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
rename to app/packs/src/libHome/RepoReactionSchemeInfo.js
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReview.js
rename to app/packs/src/libHome/RepoReview.js
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReviewButtonBar.js
rename to app/packs/src/libHome/RepoReviewButtonBar.js
diff --git a/app/assets/javascripts/libHome/RepoReviewCommon.js b/app/packs/src/libHome/RepoReviewCommon.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReviewCommon.js
rename to app/packs/src/libHome/RepoReviewCommon.js
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoReviewDetails.js
rename to app/packs/src/libHome/RepoReviewDetails.js
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoSample.js
rename to app/packs/src/libHome/RepoSample.js
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
similarity index 100%
rename from app/assets/javascripts/libHome/RepoSampleDetails.js
rename to app/packs/src/libHome/RepoSampleDetails.js
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
similarity index 100%
rename from app/assets/javascripts/libHome/homeRoutes.js
rename to app/packs/src/libHome/homeRoutes.js
diff --git a/app/packs/src/stores/alt/stores/LoadingStore.js b/app/packs/src/stores/alt/stores/LoadingStore.js
index 1d1785202..9daf8d6a0 100644
--- a/app/packs/src/stores/alt/stores/LoadingStore.js
+++ b/app/packs/src/stores/alt/stores/LoadingStore.js
@@ -4,6 +4,8 @@ import ReportActions from 'src/stores/alt/actions/ReportActions';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 import PredictionActions from 'src/stores/alt/actions/PredictionActions';
+import RepositoryActions from '../actions/RepositoryActions';
+import PublicActions from '../actions/PublicActions';
 
 class LoadingStore {
   constructor() {
@@ -40,6 +42,13 @@ class LoadingStore {
           InboxActions.fetchInboxContainer,
           InboxActions.fetchInboxUnsorted,
           PredictionActions.infer,
+          RepositoryActions.reviewPublish,
+          PublicActions.updateComment,
+          PublicActions.reviewPublish,
+          PublicActions.getSearchReactions,
+          PublicActions.getSearchMolecules,
+          PublicActions.getReactions,
+          PublicActions.getMolecules,
         ],
       handleStartLoadingWithProgress: LoadingActions.startLoadingWithProgress,
       handleStopLoadingWithProgress: LoadingActions.stopLoadingWithProgress,
diff --git a/app/packs/src/utilities/ElementUtils.js b/app/packs/src/utilities/ElementUtils.js
index f8c9b2ea9..24ee2ac6b 100644
--- a/app/packs/src/utilities/ElementUtils.js
+++ b/app/packs/src/utilities/ElementUtils.js
@@ -536,7 +536,7 @@ const isNmrPass = (analysis, sample) => {
   return true;
 };
 
-module.exports = {
+export {
   rfValueFormat,
   hNmrCheckMsg,
   cNmrCheckMsg,
diff --git a/app/views/pages/root_page.html.erb b/app/views/pages/root_page.html.erb
index b49304cbd..d6c31ec85 100644
--- a/app/views/pages/root_page.html.erb
+++ b/app/views/pages/root_page.html.erb
@@ -23,7 +23,7 @@
         <li>
           <a href="http://www.dfg.de/" class="dfg_logo">
             Projects funded by
-            <%= image_tag "dfg_logo.png" %>
+            <%= image_tag "/images/dfg_logo.png" %>
           </a>
         </li>
       </ul>
@@ -34,13 +34,13 @@
 
 <div class="main-image">
    <p>
-     <%= image_tag "logo.png", id: 'logo-image' %> CHEMOTION
+     <%= image_tag "/images/logo.png", id: 'logo-image' %> CHEMOTION
   </p>
   <p>
      Electronic Laboratory Notebook & <br />
      Repository for Research Data
    </p>
-   <%= image_tag "molecule.png", id: 'molecule-image' %>
+   <%= image_tag "/images/molecule.png", id: 'molecule-image' %>
 </div>
 
 <br/>
diff --git a/config/deploy.rb b/config/deploy.rb
index 7072f3de8..e5a1ef0a8 100644
--- a/config/deploy.rb
+++ b/config/deploy.rb
@@ -14,11 +14,11 @@
 set :whenever_identifier, -> { "#{fetch(:application)}_#{fetch(:stage)}" }
 set :bundle_jobs, 4 # parallel bundler
 
-set :nvm_type, :user
-set :nvm_node, (File.exist?('.nvmrc') && File.read('.nvmrc').strip) || 'v14.20.0'
-set :npm_version, File.exist?('.npm-version') && File.read('.npm-version').strip || '7.11.1'
-set :nvm_map_bins, fetch(:nvm_map_bins, []).push('rake')
-set :nvm_map_bins, fetch(:nvm_map_bins, []).push('bundle')
+# set :nvm_type, :user
+# set :nvm_node, File.exist?('.nvmrc') && File.read('.nvmrc').strip || 'v14.16.0'
+# set :npm_version, File.exist?('.npm-version') && File.read('.npm-version').strip || '7.11.1'
+# set :nvm_map_bins, fetch(:nvm_map_bins, []).push('rake')
+# set :nvm_map_bins, fetch(:nvm_map_bins, []).push('bundle')
 # Default value for :format is :pretty
 # set :format, :pretty
 
@@ -204,13 +204,13 @@ def delayed_job_roles
   end
 end
 
-before 'nvm:validate', 'deploy:nvm_check'
+# before 'nvm:validate', 'deploy:nvm_check'
 
 ## Clear all npm packages
-after 'deploy:nvm_check', 'deploy:clear_node_module'
+# after 'deploy:nvm_check', 'deploy:clear_node_module'
 
 ## Install defined version of npm if not selected
-after 'nvm:validate', 'deploy:npm_install_npm'
+# after 'nvm:validate', 'deploy:npm_install_npm'
 
 # after 'deploy:compile_assets', 'deploy:webpk'
 
diff --git a/config/profile_default.yml b/config/profile_default.yml
index a16a4ec3d..e6c0b82af 100644
--- a/config/profile_default.yml
+++ b/config/profile_default.yml
@@ -5,7 +5,7 @@ development:
       :reaction: 2
 #      :wellplate: 3
 #      :screen: 4
-#      :research_plan: 5
+      :research_plan: 5
     :layout_detail_research_plan:
       :research_plan:
         1
@@ -59,7 +59,7 @@ production:
       :reaction: 2
 #      :wellplate: 3
 #      :screen: 4
-#      :research_plan: 5
+      :research_plan: 5
     :layout_detail_research_plan:
       :research_plan:
         1
@@ -113,7 +113,7 @@ test:
       :reaction: 2
 #      :wellplate: 3
 #      :screen: 4
-#      :research_plan: 5
+      :research_plan: 5
     :layout_detail_research_plan:
       :research_plan:
         1
diff --git a/db/schema.rb b/db/schema.rb
index da12817e8..b86a85f91 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -16,6 +16,7 @@
   enable_extension "hstore"
   enable_extension "pg_trgm"
   enable_extension "plpgsql"
+  enable_extension "postgres_fdw"
   enable_extension "uuid-ossp"
 
   create_table "affiliations", id: :serial, force: :cascade do |t|
@@ -389,6 +390,25 @@
     t.index ["device_id"], name: "index_device_metadata_on_device_id"
   end
 
+  create_table "dois", id: :serial, force: :cascade do |t|
+    t.integer "molecule_id"
+    t.string "inchikey"
+    t.integer "molecule_count"
+    t.integer "analysis_id"
+    t.string "analysis_type"
+    t.integer "analysis_count"
+    t.jsonb "metadata", default: {}
+    t.boolean "minted", default: false
+    t.datetime "minted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.integer "doiable_id"
+    t.string "doiable_type"
+    t.string "suffix"
+    t.index ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true
+    t.index ["suffix"], name: "index_dois_on_suffix", unique: true
+  end
+
   create_table "element_klasses", id: :serial, force: :cascade do |t|
     t.string "name"
     t.string "label"
@@ -430,31 +450,10 @@
     t.index ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id"
   end
 
-  add_index "element_klasses_revisions", ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id", using: :btree
-  create_table "dois", force: :cascade do |t|
-    t.integer  "molecule_id"
-    t.string   "inchikey"
-    t.integer  "molecule_count"
-    t.integer  "analysis_id"
-    t.string   "analysis_type"
-    t.integer  "analysis_count"
-    t.jsonb    "metadata",       default: {}
-    t.boolean  "minted",         default: false
-    t.datetime "minted_at"
-    t.datetime "created_at",                     null: false
-    t.datetime "updated_at",                     null: false
-    t.integer  "doiable_id"
-    t.string   "doiable_type"
-    t.string   "suffix"
-  end
-
-  add_index "dois", ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true, using: :btree
-  add_index "dois", ["suffix"], name: "index_dois_on_suffix", unique: true, using: :btree
-
-  create_table "element_tags", force: :cascade do |t|
-    t.string   "taggable_type"
-    t.integer  "taggable_id"
-    t.jsonb    "taggable_data"
+  create_table "element_tags", id: :serial, force: :cascade do |t|
+    t.string "taggable_type"
+    t.integer "taggable_id"
+    t.jsonb "taggable_data"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.index ["taggable_id"], name: "index_element_tags_on_taggable_id"
@@ -892,35 +891,33 @@
     t.integer "position"
     t.string "type"
     t.datetime "deleted_at"
-    t.boolean  "waste",        default: false
-    t.float    "coefficient",  default: 1.0
-    t.float    "scheme_yield"
-    t.boolean  "show_label",   default: false, null: false
-  end
-
-  add_index "reactions_samples", ["reaction_id"], name: "index_reactions_samples_on_reaction_id", using: :btree
-  add_index "reactions_samples", ["sample_id"], name: "index_reactions_samples_on_sample_id", using: :btree
-
-  create_table "report_templates", force: :cascade do |t|
-    t.string   "name",          null: false
-    t.string   "report_type",   null: false
-    t.datetime "created_at",    null: false
-    t.datetime "updated_at",    null: false
-    t.integer  "attachment_id"
-  end
-
-  add_index "report_templates", ["attachment_id"], name: "index_report_templates_on_attachment_id", using: :btree
-
-  create_table "reports", force: :cascade do |t|
-    t.integer  "author_id"
-    t.string   "file_name"
-    t.text     "file_description"
-    t.text     "configs"
-    t.text     "sample_settings"
-    t.text     "reaction_settings"
-    t.text     "objects"
-    t.string   "img_format"
-    t.string   "file_path"
+    t.boolean "waste", default: false
+    t.float "coefficient", default: 1.0
+    t.float "scheme_yield"
+    t.boolean "show_label", default: false, null: false
+    t.index ["reaction_id"], name: "index_reactions_samples_on_reaction_id"
+    t.index ["sample_id"], name: "index_reactions_samples_on_sample_id"
+  end
+
+  create_table "report_templates", id: :serial, force: :cascade do |t|
+    t.string "name", null: false
+    t.string "report_type", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.integer "attachment_id"
+    t.index ["attachment_id"], name: "index_report_templates_on_attachment_id"
+  end
+
+  create_table "reports", id: :serial, force: :cascade do |t|
+    t.integer "author_id"
+    t.string "file_name"
+    t.text "file_description"
+    t.text "configs"
+    t.text "sample_settings"
+    t.text "reaction_settings"
+    t.text "objects"
+    t.string "img_format"
+    t.string "file_path"
     t.datetime "generated_at"
     t.datetime "deleted_at"
     t.datetime "created_at", null: false
@@ -1054,7 +1051,6 @@
     t.integer "molecule_id"
     t.binary "molfile"
     t.float "purity", default: 1.0
-    t.string "deprecated_solvent", default: ""
     t.string "impurities", default: ""
     t.string "location", default: ""
     t.boolean "is_top_secret", default: false
@@ -1315,15 +1311,12 @@
     t.index ["user_id"], name: "index_users_admins_on_user_id"
   end
 
-  add_index "users_admins", ["admin_id"], name: "index_users_admins_on_admin_id", using: :btree
-  add_index "users_admins", ["user_id"], name: "index_users_admins_on_user_id", using: :btree
-
-  create_table "users_collaborators", force: :cascade do |t|
+  create_table "users_collaborators", id: :serial, force: :cascade do |t|
     t.integer "user_id"
     t.integer "collaborator_id"
   end
 
-  create_table "users_devices", force: :cascade do |t|
+  create_table "users_devices", id: :serial, force: :cascade do |t|
     t.integer "user_id"
     t.integer "device_id"
   end
@@ -1364,10 +1357,6 @@
     t.index ["wellplate_id"], name: "index_wells_on_wellplate_id"
   end
 
-  add_index "wells", ["deleted_at"], name: "index_wells_on_deleted_at", using: :btree
-  add_index "wells", ["sample_id"], name: "index_wells_on_sample_id", using: :btree
-  add_index "wells", ["wellplate_id"], name: "index_wells_on_wellplate_id", using: :btree
-
   add_foreign_key "dois", "molecules"
   add_foreign_key "literals", "literatures"
   add_foreign_key "report_templates", "attachments"
@@ -1453,10 +1442,48 @@
       end;$function$
   SQL
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   create_function :generate_users_matrix, sql_definition: <<-'SQL'
 =======
 =======
+=======
+  create_function :generate_users_matrix, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.generate_users_matrix(in_user_ids integer[])
+       RETURNS boolean
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	if in_user_ids is null then
+          update users u set matrix = (
+      	    select coalesce(sum(2^mx.id),0) from (
+      		    select distinct m1.* from matrices m1, users u1
+      				left join users_groups ug1 on ug1.user_id = u1.id
+      		      where u.id = u1.id and ((m1.enabled = true) or ((u1.id = any(m1.include_ids)) or (u1.id = ug1.user_id and ug1.group_id = any(m1.include_ids))))
+      	      except
+      		    select distinct m2.* from matrices m2, users u2
+      				left join users_groups ug2 on ug2.user_id = u2.id
+      		      where u.id = u2.id and ((u2.id = any(m2.exclude_ids)) or (u2.id = ug2.user_id and ug2.group_id = any(m2.exclude_ids)))
+      	    ) mx
+          );
+      	else
+      		  update users u set matrix = (
+      		  	select coalesce(sum(2^mx.id),0) from (
+      			   select distinct m1.* from matrices m1, users u1
+      				 left join users_groups ug1 on ug1.user_id = u1.id
+      			     where u.id = u1.id and ((m1.enabled = true) or ((u1.id = any(m1.include_ids)) or (u1.id = ug1.user_id and ug1.group_id = any(m1.include_ids))))
+      			   except
+      			   select distinct m2.* from matrices m2, users u2
+      				 left join users_groups ug2 on ug2.user_id = u2.id
+      			     where u.id = u2.id and ((u2.id = any(m2.exclude_ids)) or (u2.id = ug2.user_id and ug2.group_id = any(m2.exclude_ids)))
+      			  ) mx
+      		  ) where ((in_user_ids) @> array[u.id]) or (u.id in (select ug3.user_id from users_groups ug3 where (in_user_ids) @> array[ug3.group_id]));
+      	end if;
+        return true;
+      end
+      $function$
+  SQL
+>>>>>>> WIP
   create_function :group_user_ids, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.group_user_ids(group_id integer)
        RETURNS TABLE(user_ids integer)
@@ -1467,6 +1494,21 @@
              select user_id from users_groups where group_id = $1
       $function$
   SQL
+  create_function :labels_by_user_sample, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.labels_by_user_sample(user_id integer, sample_id integer)
+       RETURNS TABLE(labels text)
+       LANGUAGE sql
+      AS $function$
+         select string_agg(title::text, ', ') as labels from (select title from user_labels ul where ul.id in (
+           select d.list
+           from element_tags et, lateral (
+             select value::integer as list
+             from jsonb_array_elements_text(et.taggable_data  -> 'user_labels')
+           ) d
+           where et.taggable_id = $2 and et.taggable_type = 'Sample'
+         ) and (ul.access_level = 1 or (ul.access_level = 0 and ul.user_id = $1)) order by title  ) uls
+       $function$
+  SQL
   create_function :pub_reactions_by_molecule, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.pub_reactions_by_molecule(collection_id integer, molecule_id integer)
        RETURNS TABLE(reaction_ids integer)
@@ -1496,6 +1538,29 @@
           end;
        $function$
   SQL
+  create_function :update_users_matrix, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.update_users_matrix()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	if (TG_OP='INSERT') then
+          PERFORM generate_users_matrix(null);
+      	end if;
+
+      	if (TG_OP='UPDATE') then
+      	  if new.enabled <> old.enabled or new.deleted_at <> new.deleted_at then
+            PERFORM generate_users_matrix(null);
+      	  elsif new.include_ids <> old.include_ids then
+            PERFORM generate_users_matrix(new.include_ids || old.include_ids);
+          elsif new.exclude_ids <> old.exclude_ids then
+            PERFORM generate_users_matrix(new.exclude_ids || old.exclude_ids);
+      	  end if;
+      	end if;
+        return new;
+      end
+      $function$
+  SQL
   create_function :user_as_json, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
        RETURNS json
@@ -1532,22 +1597,24 @@
              order by extended_metadata -> 'instrument' limit 10
            $function$
   SQL
+<<<<<<< HEAD
 >>>>>>> minor upd  Gem.lock db/schema
   create_function :labels_by_user_sample, sql_definition: <<-SQL
       CREATE OR REPLACE FUNCTION public.labels_by_user_sample(user_id integer, sample_id integer)
        RETURNS TABLE(labels text)
+=======
+  create_function :literatures_by_element, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.literatures_by_element(element_type text, element_id integer)
+       RETURNS TABLE(literatures text)
+>>>>>>> WIP
        LANGUAGE sql
       AS $function$
-         select string_agg(title::text, ', ') as labels from (select title from user_labels ul where ul.id in (
-           select d.list
-           from element_tags et, lateral (
-             select value::integer as list
-             from jsonb_array_elements_text(et.taggable_data  -> 'user_labels')
-           ) d
-           where et.taggable_id = $2 and et.taggable_type = 'Sample'
-         ) and (ul.access_level = 1 or (ul.access_level = 0 and ul.user_id = $1)) order by title  ) uls
+         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
+         where l.literature_id = l2.id
+         and l.element_type = $1 and l.element_id = $2
        $function$
   SQL
+<<<<<<< HEAD
   create_function :generate_users_matrix, sql_definition: <<-SQL
 >>>>>>> REPO FACTOR
       CREATE OR REPLACE FUNCTION public.generate_users_matrix(in_user_ids integer[])
@@ -1754,12 +1821,44 @@
       END
       $function$
   SQL
+=======
+>>>>>>> WIP
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
-      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE PROCEDURE update_users_matrix()
+      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
   SQL
 
+<<<<<<< HEAD
 >>>>>>> REPO FACTOR
+=======
+  create_view "compound_open_data_locals", sql_definition: <<-SQL
+      SELECT c.x_id,
+      c.x_sample_id,
+      c.x_data,
+      c.x_created_at,
+      c.x_updated_at,
+      c.x_inchikey,
+      c.x_sum_formular,
+      c.x_cano_smiles,
+      c.x_external_label,
+      c.x_short_label,
+      c.x_name,
+      c.x_stereo
+     FROM ( SELECT NULL::integer AS x_id,
+              NULL::integer AS x_sample_id,
+              NULL::jsonb AS x_data,
+              NULL::timestamp without time zone AS x_created_at,
+              NULL::timestamp without time zone AS x_updated_at,
+              NULL::character varying AS x_inchikey,
+              NULL::character varying AS x_sum_formular,
+              NULL::character varying AS x_cano_smiles,
+              NULL::character varying AS x_external_label,
+              NULL::character varying AS x_short_label,
+              NULL::character varying AS x_name,
+              NULL::jsonb AS x_stereo) c
+    WHERE (c.x_id IS NOT NULL);
+  SQL
+>>>>>>> WIP
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
       lits.element_id,
@@ -1906,31 +2005,4 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
-  create_view "compound_open_data_locals", sql_definition: <<-SQL
-      SELECT c.x_id,
-      c.x_sample_id,
-      c.x_data,
-      c.x_created_at,
-      c.x_updated_at,
-      c.x_inchikey,
-      c.x_sum_formular,
-      c.x_cano_smiles,
-      c.x_external_label,
-      c.x_short_label,
-      c.x_name,
-      c.x_stereo
-     FROM ( SELECT NULL::integer AS x_id,
-              NULL::integer AS x_sample_id,
-              NULL::jsonb AS x_data,
-              NULL::timestamp without time zone AS x_created_at,
-              NULL::timestamp without time zone AS x_updated_at,
-              NULL::character varying AS x_inchikey,
-              NULL::character varying AS x_sum_formular,
-              NULL::character varying AS x_cano_smiles,
-              NULL::character varying AS x_external_label,
-              NULL::character varying AS x_short_label,
-              NULL::character varying AS x_name,
-              NULL::jsonb AS x_stereo) c
-    WHERE (c.x_id IS NOT NULL);
-  SQL
 end
diff --git a/lib/reporter/docx/detail.rb b/lib/reporter/docx/detail.rb
index f1a3afbec..b402d3df7 100644
--- a/lib/reporter/docx/detail.rb
+++ b/lib/reporter/docx/detail.rb
@@ -50,13 +50,13 @@ def merge_items_symbols(init, items, symbol)
         items.reduce(init) do |sum, i|
           ops = parse_ops(i)
           ops = rm_head_tail_space(ops)
-          return sum if ops.blank?
-
           sum + ops_tail_with_symbol(ops, symbol)
         end
       end
 
       def ops_tail_with_symbol(ops, symbol)
+        return [] if ops.blank?
+
         ops + [{ 'insert' => symbol }]
       end
 
diff --git a/yarn.lock b/yarn.lock
index e5031b949..aed686383 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4508,6 +4508,11 @@ ag-grid-react@^29.0.0:
   dependencies:
     prop-types "^15.8.1"
 
+agent-base@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
+  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
+
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -8977,6 +8982,14 @@ httpplease@^0.16.4:
     xmlhttprequest "*"
     xtend "~3.0.0"
 
+https-proxy-agent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
+  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
+  dependencies:
+    agent-base "5"
+    debug "4"
+
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz"
@@ -10465,6 +10478,11 @@ lodash-es@^4.17.15, lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
 lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -10808,6 +10826,13 @@ mime-types@^2.1.31, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
+mime-types@^2.1.25:
+  version "2.1.34"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
+  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
+  dependencies:
+    mime-db "1.51.0"
+
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
@@ -11970,6 +11995,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz"
@@ -12343,6 +12373,11 @@ railroad-diagrams@^1.0.0:
   resolved "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz"
   integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
 
+ramda@^0.26:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
 randexp@0.4.6:
   version "0.4.6"
   resolved "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz"
@@ -16093,6 +16128,14 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From 5553061e3e6516ee4fdaffeb570d49e0da812ea9 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 24 Feb 2022 10:23:02 +0100
Subject: [PATCH 051/258] migration file

---
 .../20170511144535_update_repository_user_layout_default.rb   | 2 +-
 db/migrate/20180822103306_create_table_dois.rb                | 4 ++--
 db/migrate/20180910075534_add_suffix_to_dois.rb               | 4 ++--
 db/migrate/20180910125250_migrate_dois.rb                     | 2 +-
 ...0181030141057_create_function_pub_reactions_by_molecule.rb | 2 +-
 db/migrate/20181218120106_create_table_publications.rb        | 2 +-
 .../20181218154642_add_original_element_to_publications.rb    | 2 +-
 db/migrate/20181219113234_add_ancestry_to_publications.rb     | 2 +-
 db/migrate/20181219163816_add_metadata_xml_to_publications.rb | 2 +-
 ...20181221153800_sync_collection_reaction_detail_level_10.rb | 2 +-
 db/migrate/20190103165000_datafix_publication_reactions.rb    | 2 +-
 db/migrate/20190206142000_publication_notification.rb         | 2 +-
 db/migrate/20190211180200_add_published_at_publications.rb    | 2 +-
 db/migrate/20190211180800_add_review_publications.rb          | 2 +-
 .../20190218122628_create_default_reviewing_collections.rb    | 2 +-
 db/migrate/20190219100200_published_at_publications_fix.rb    | 2 +-
 ...0306085000_create_default_element_to_review_collections.rb | 2 +-
 ...01141200_create_default_element_to_reviewed_collections.rb | 2 +-
 ...20190410130000_create_embargoed_publication_collections.rb | 2 +-
 db/migrate/20190424114744_add_chem_scanner_file.rb            | 2 +-
 .../20190528085434_create_chemscanner_source_hierarchies.rb   | 2 +-
 db/migrate/20190724105701_create_publication_authors.rb       | 2 +-
 db/migrate/20190724151800_default_ols_profile.rb              | 2 +-
 db/migrate/20190726102700_map_analysis_type.rb                | 2 +-
 db/migrate/20190726103900_map_profile_chmo_title.rb           | 2 +-
 db/migrate/20190729086889_create_publication_ontologies.rb    | 2 +-
 .../20191029132554_add_inchi_to_chemscanner_molecule.rb       | 2 +-
 db/migrate/20191030161832_create_publication_statics.rb       | 2 +-
 db/migrate/20191219000002_create_users_collaborators.rb       | 2 +-
 .../20200203000001_create_public_scheme_only_collection.rb    | 2 +-
 .../20200210000001_add_reactions_samples_scheme_yield.rb      | 2 +-
 db/migrate/20200420081847_add_chemscanner_notification.rb     | 2 +-
 db/migrate/20200729140000_update_sample_collection_tag.rb     | 2 +-
 db/migrate/20200803170002_tag_doi_reviewing.rb                | 4 ++--
 db/migrate/20201027170400_create_compound_open_data_locals.rb | 2 +-
 db/migrate/20201028120000_add_accepted_at.rb                  | 2 +-
 db/migrate/20201103124001_create_function_com_xvial.rb        | 2 +-
 db/migrate/20210806150600_fix_solvent_migration.rb            | 2 +-
 38 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/db/migrate/20170511144535_update_repository_user_layout_default.rb b/db/migrate/20170511144535_update_repository_user_layout_default.rb
index 79b8f0406..6274e6ccd 100644
--- a/db/migrate/20170511144535_update_repository_user_layout_default.rb
+++ b/db/migrate/20170511144535_update_repository_user_layout_default.rb
@@ -1,4 +1,4 @@
-class UpdateRepositoryUserLayoutDefault < ActiveRecord::Migration
+class UpdateRepositoryUserLayoutDefault < ActiveRecord::Migration[4.2]
   def change
     change_column :users, :layout, :hstore, default: {
       sample: 1,
diff --git a/db/migrate/20180822103306_create_table_dois.rb b/db/migrate/20180822103306_create_table_dois.rb
index 664115465..97b3fad37 100644
--- a/db/migrate/20180822103306_create_table_dois.rb
+++ b/db/migrate/20180822103306_create_table_dois.rb
@@ -1,11 +1,11 @@
-class CreateTableDois < ActiveRecord::Migration
+class CreateTableDois < ActiveRecord::Migration[4.2]
   def change
     create_table :dois do |t|
       t.integer :molecule_id
       t.string :inchikey
       t.integer :molecule_count
       t.integer :analysis_id
-      t.string :analysis_type 
+      t.string :analysis_type
       t.integer :analysis_count
       t.jsonb :metadata, default: {}
       t.boolean :minted, default: false
diff --git a/db/migrate/20180910075534_add_suffix_to_dois.rb b/db/migrate/20180910075534_add_suffix_to_dois.rb
index b611a4bf1..5401486db 100644
--- a/db/migrate/20180910075534_add_suffix_to_dois.rb
+++ b/db/migrate/20180910075534_add_suffix_to_dois.rb
@@ -1,7 +1,7 @@
-class AddSuffixToDois < ActiveRecord::Migration
+class AddSuffixToDois < ActiveRecord::Migration[4.2]
   def change
     add_column :dois, :suffix, :string
-    # remove_index(:dois, name: 'index_on_dois') if index_exists?(:dois, name: 'index_on_dois') 
+    # remove_index(:dois, name: 'index_on_dois') if index_exists?(:dois, name: 'index_on_dois')
     add_index(:dois, :suffix, unique: true)
   end
 end
diff --git a/db/migrate/20180910125250_migrate_dois.rb b/db/migrate/20180910125250_migrate_dois.rb
index 26a9c24fb..49eaba886 100644
--- a/db/migrate/20180910125250_migrate_dois.rb
+++ b/db/migrate/20180910125250_migrate_dois.rb
@@ -1,4 +1,4 @@
-class MigrateDois < ActiveRecord::Migration
+class MigrateDois < ActiveRecord::Migration[4.2]
   def change
     begin
     file = File.open("log/doi_seeding.log", "w")
diff --git a/db/migrate/20181030141057_create_function_pub_reactions_by_molecule.rb b/db/migrate/20181030141057_create_function_pub_reactions_by_molecule.rb
index 0da16408a..b8c3ab60b 100644
--- a/db/migrate/20181030141057_create_function_pub_reactions_by_molecule.rb
+++ b/db/migrate/20181030141057_create_function_pub_reactions_by_molecule.rb
@@ -1,4 +1,4 @@
-class CreateFunctionPubReactionsByMolecule < ActiveRecord::Migration
+class CreateFunctionPubReactionsByMolecule < ActiveRecord::Migration[4.2]
   def change
     create_function :pub_reactions_by_molecule
   end
diff --git a/db/migrate/20181218120106_create_table_publications.rb b/db/migrate/20181218120106_create_table_publications.rb
index 25a86cfe9..2e7c656b3 100644
--- a/db/migrate/20181218120106_create_table_publications.rb
+++ b/db/migrate/20181218120106_create_table_publications.rb
@@ -1,4 +1,4 @@
-class CreateTablePublications < ActiveRecord::Migration
+class CreateTablePublications < ActiveRecord::Migration[4.2]
   def change
     create_table :publications do |t|
       t.string :state
diff --git a/db/migrate/20181218154642_add_original_element_to_publications.rb b/db/migrate/20181218154642_add_original_element_to_publications.rb
index a3f7d1942..3a26f1bb7 100644
--- a/db/migrate/20181218154642_add_original_element_to_publications.rb
+++ b/db/migrate/20181218154642_add_original_element_to_publications.rb
@@ -1,4 +1,4 @@
-class AddOriginalElementToPublications < ActiveRecord::Migration
+class AddOriginalElementToPublications < ActiveRecord::Migration[4.2]
   def change
     add_column :publications, :original_element_type, :string
     add_column :publications, :original_element_id, :integer
diff --git a/db/migrate/20181219113234_add_ancestry_to_publications.rb b/db/migrate/20181219113234_add_ancestry_to_publications.rb
index 2a6b58a5c..4902a49c3 100644
--- a/db/migrate/20181219113234_add_ancestry_to_publications.rb
+++ b/db/migrate/20181219113234_add_ancestry_to_publications.rb
@@ -1,4 +1,4 @@
-class AddAncestryToPublications < ActiveRecord::Migration
+class AddAncestryToPublications < ActiveRecord::Migration[4.2]
   def change
     add_column :publications, :ancestry, :string
     add_index :publications, :ancestry
diff --git a/db/migrate/20181219163816_add_metadata_xml_to_publications.rb b/db/migrate/20181219163816_add_metadata_xml_to_publications.rb
index f62a6dcab..615557f11 100644
--- a/db/migrate/20181219163816_add_metadata_xml_to_publications.rb
+++ b/db/migrate/20181219163816_add_metadata_xml_to_publications.rb
@@ -1,4 +1,4 @@
-class AddMetadataXmlToPublications < ActiveRecord::Migration
+class AddMetadataXmlToPublications < ActiveRecord::Migration[4.2]
   def change
     add_column :publications, :metadata_xml, :text
   end
diff --git a/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb b/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
index b52b040cb..8edc29e52 100644
--- a/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
+++ b/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
@@ -1,4 +1,4 @@
-class SyncCollectionReactionDetailLevel10 < ActiveRecord::Migration
+class SyncCollectionReactionDetailLevel10 < ActiveRecord::Migration[4.2]
   def change
     SyncCollectionsUser.where(shared_by_id: User.chemotion_user.id).each{|s| s.update(reaction_detail_level: 10) }
   end
diff --git a/db/migrate/20190103165000_datafix_publication_reactions.rb b/db/migrate/20190103165000_datafix_publication_reactions.rb
index 5af0fc045..ea0b87c13 100644
--- a/db/migrate/20190103165000_datafix_publication_reactions.rb
+++ b/db/migrate/20190103165000_datafix_publication_reactions.rb
@@ -1,4 +1,4 @@
-class DatafixPublicationReactions < ActiveRecord::Migration
+class DatafixPublicationReactions < ActiveRecord::Migration[4.2]
   def change
     Collection.public_collection.reactions.each do |r|
       r.reload
diff --git a/db/migrate/20190206142000_publication_notification.rb b/db/migrate/20190206142000_publication_notification.rb
index f8f7d7b70..49863e1cd 100644
--- a/db/migrate/20190206142000_publication_notification.rb
+++ b/db/migrate/20190206142000_publication_notification.rb
@@ -1,4 +1,4 @@
-class PublicationNotification < ActiveRecord::Migration
+class PublicationNotification < ActiveRecord::Migration[4.2]
  def change
    channel = Channel.find_by(subject: Channel::PUBLICATION_REVIEW)
    channel.destroy if channel
diff --git a/db/migrate/20190211180200_add_published_at_publications.rb b/db/migrate/20190211180200_add_published_at_publications.rb
index 6a6371638..8789f2aaf 100644
--- a/db/migrate/20190211180200_add_published_at_publications.rb
+++ b/db/migrate/20190211180200_add_published_at_publications.rb
@@ -1,4 +1,4 @@
-class AddPublishedAtPublications < ActiveRecord::Migration
+class AddPublishedAtPublications < ActiveRecord::Migration[4.2]
 def change
   add_column :publications, :published_by, :integer
   add_column :publications, :published_at, :datetime
diff --git a/db/migrate/20190211180800_add_review_publications.rb b/db/migrate/20190211180800_add_review_publications.rb
index 483f0a2d7..cde2b4532 100644
--- a/db/migrate/20190211180800_add_review_publications.rb
+++ b/db/migrate/20190211180800_add_review_publications.rb
@@ -1,4 +1,4 @@
-class AddReviewPublications < ActiveRecord::Migration
+class AddReviewPublications < ActiveRecord::Migration[4.2]
  def change
    add_column :publications, :review, :jsonb
  end
diff --git a/db/migrate/20190218122628_create_default_reviewing_collections.rb b/db/migrate/20190218122628_create_default_reviewing_collections.rb
index 603adea9d..d4b89b573 100644
--- a/db/migrate/20190218122628_create_default_reviewing_collections.rb
+++ b/db/migrate/20190218122628_create_default_reviewing_collections.rb
@@ -1,4 +1,4 @@
-class CreateDefaultReviewingCollections < ActiveRecord::Migration
+class CreateDefaultReviewingCollections < ActiveRecord::Migration[4.2]
  def change
    chemotion_user = User.chemotion_user
   users = User.where(type: 'Person')
diff --git a/db/migrate/20190219100200_published_at_publications_fix.rb b/db/migrate/20190219100200_published_at_publications_fix.rb
index 1861586f6..fc82fceab 100644
--- a/db/migrate/20190219100200_published_at_publications_fix.rb
+++ b/db/migrate/20190219100200_published_at_publications_fix.rb
@@ -1,4 +1,4 @@
-class PublishedAtPublicationsFix < ActiveRecord::Migration
+class PublishedAtPublicationsFix < ActiveRecord::Migration[4.2]
 def change
   list = Publication.where(published_at: nil)
   list.each do |p|
diff --git a/db/migrate/20190306085000_create_default_element_to_review_collections.rb b/db/migrate/20190306085000_create_default_element_to_review_collections.rb
index 9115ab79f..43aeaa0a2 100644
--- a/db/migrate/20190306085000_create_default_element_to_review_collections.rb
+++ b/db/migrate/20190306085000_create_default_element_to_review_collections.rb
@@ -1,4 +1,4 @@
-class CreateDefaultElementToReviewCollections < ActiveRecord::Migration
+class CreateDefaultElementToReviewCollections < ActiveRecord::Migration[4.2]
  def change
    # Update the Reviewing Ancestry to is_locked = true
    reviewing_ancestry_col = Collection.find_by(id: 1198, label: 'Reviewing Publication from')
diff --git a/db/migrate/20190401141200_create_default_element_to_reviewed_collections.rb b/db/migrate/20190401141200_create_default_element_to_reviewed_collections.rb
index e3055a1f1..16839b900 100644
--- a/db/migrate/20190401141200_create_default_element_to_reviewed_collections.rb
+++ b/db/migrate/20190401141200_create_default_element_to_reviewed_collections.rb
@@ -1,4 +1,4 @@
-class CreateDefaultElementToReviewedCollections < ActiveRecord::Migration
+class CreateDefaultElementToReviewedCollections < ActiveRecord::Migration[4.2]
  def change
 
    chemotion_user = User.chemotion_user
diff --git a/db/migrate/20190410130000_create_embargoed_publication_collections.rb b/db/migrate/20190410130000_create_embargoed_publication_collections.rb
index 98eec6f22..988e2fd5b 100644
--- a/db/migrate/20190410130000_create_embargoed_publication_collections.rb
+++ b/db/migrate/20190410130000_create_embargoed_publication_collections.rb
@@ -1,4 +1,4 @@
-class CreateEmbargoedPublicationCollections < ActiveRecord::Migration
+class CreateEmbargoedPublicationCollections < ActiveRecord::Migration[4.2]
   def change
     chemotion_user = User.chemotion_user
     user_ids = User.where(type: 'Person').pluck(:id)
diff --git a/db/migrate/20190424114744_add_chem_scanner_file.rb b/db/migrate/20190424114744_add_chem_scanner_file.rb
index cf69b4479..2649f9a29 100644
--- a/db/migrate/20190424114744_add_chem_scanner_file.rb
+++ b/db/migrate/20190424114744_add_chem_scanner_file.rb
@@ -1,4 +1,4 @@
-class AddChemScannerFile < ActiveRecord::Migration
+class AddChemScannerFile < ActiveRecord::Migration[4.2]
   def change
     create_table :chemscanner_sources do |t|
       t.integer :parent_id
diff --git a/db/migrate/20190528085434_create_chemscanner_source_hierarchies.rb b/db/migrate/20190528085434_create_chemscanner_source_hierarchies.rb
index a3d46bc20..8ca9b0c03 100644
--- a/db/migrate/20190528085434_create_chemscanner_source_hierarchies.rb
+++ b/db/migrate/20190528085434_create_chemscanner_source_hierarchies.rb
@@ -1,4 +1,4 @@
-class CreateChemscannerSourceHierarchies < ActiveRecord::Migration
+class CreateChemscannerSourceHierarchies < ActiveRecord::Migration[4.2]
   def change
     create_table :chemscanner_source_hierarchies, id: false do |t|
       t.integer :ancestor_id, null: false
diff --git a/db/migrate/20190724105701_create_publication_authors.rb b/db/migrate/20190724105701_create_publication_authors.rb
index 1e6e3856c..9db619494 100644
--- a/db/migrate/20190724105701_create_publication_authors.rb
+++ b/db/migrate/20190724105701_create_publication_authors.rb
@@ -1,4 +1,4 @@
-class CreatePublicationAuthors < ActiveRecord::Migration
+class CreatePublicationAuthors < ActiveRecord::Migration[4.2]
   def change
     create_view :publication_authors
   end
diff --git a/db/migrate/20190724151800_default_ols_profile.rb b/db/migrate/20190724151800_default_ols_profile.rb
index 8ebb0be67..425ff5d53 100644
--- a/db/migrate/20190724151800_default_ols_profile.rb
+++ b/db/migrate/20190724151800_default_ols_profile.rb
@@ -1,4 +1,4 @@
-class DefaultOlsProfile < ActiveRecord::Migration
+class DefaultOlsProfile < ActiveRecord::Migration[4.2]
   def change
     file = Rails.public_path.join('ontologies','chmo.default.profile.json')
     result = JSON.parse(File.read(file, encoding:  'bom|utf-8')) if File.exist?(file)
diff --git a/db/migrate/20190726102700_map_analysis_type.rb b/db/migrate/20190726102700_map_analysis_type.rb
index 1759d0992..cc89d8a3d 100644
--- a/db/migrate/20190726102700_map_analysis_type.rb
+++ b/db/migrate/20190726102700_map_analysis_type.rb
@@ -1,4 +1,4 @@
-class MapAnalysisType < ActiveRecord::Migration
+class MapAnalysisType < ActiveRecord::Migration[4.2]
   CONV = [
     { kind: '1H NMR', ols: 'CHMO:0000593 | 1H nuclear magnetic resonance spectroscopy (1H NMR)' },
     { kind: '13C NMR', ols: 'CHMO:0000595 | 13C nuclear magnetic resonance spectroscopy (13C NMR)' },
diff --git a/db/migrate/20190726103900_map_profile_chmo_title.rb b/db/migrate/20190726103900_map_profile_chmo_title.rb
index 121769d40..5c1d14534 100644
--- a/db/migrate/20190726103900_map_profile_chmo_title.rb
+++ b/db/migrate/20190726103900_map_profile_chmo_title.rb
@@ -1,4 +1,4 @@
-class MapProfileChmoTitle < ActiveRecord::Migration
+class MapProfileChmoTitle < ActiveRecord::Migration[4.2]
   def change
     Person.find_each do |u|
       profile = u.profile
diff --git a/db/migrate/20190729086889_create_publication_ontologies.rb b/db/migrate/20190729086889_create_publication_ontologies.rb
index f129aab32..ce6fd8be5 100644
--- a/db/migrate/20190729086889_create_publication_ontologies.rb
+++ b/db/migrate/20190729086889_create_publication_ontologies.rb
@@ -1,4 +1,4 @@
-class CreatePublicationOntologies < ActiveRecord::Migration
+class CreatePublicationOntologies < ActiveRecord::Migration[4.2]
   def change
     create_view :publication_ontologies
   end
diff --git a/db/migrate/20191029132554_add_inchi_to_chemscanner_molecule.rb b/db/migrate/20191029132554_add_inchi_to_chemscanner_molecule.rb
index a080cc3ab..33f44730c 100644
--- a/db/migrate/20191029132554_add_inchi_to_chemscanner_molecule.rb
+++ b/db/migrate/20191029132554_add_inchi_to_chemscanner_molecule.rb
@@ -1,4 +1,4 @@
-class AddInchiToChemscannerMolecule < ActiveRecord::Migration
+class AddInchiToChemscannerMolecule < ActiveRecord::Migration[4.2]
   def change
     add_column :chemscanner_molecules, :inchistring, :string
     add_column :chemscanner_molecules, :inchikey, :string
diff --git a/db/migrate/20191030161832_create_publication_statics.rb b/db/migrate/20191030161832_create_publication_statics.rb
index 9fe62a21f..2c0667aca 100644
--- a/db/migrate/20191030161832_create_publication_statics.rb
+++ b/db/migrate/20191030161832_create_publication_statics.rb
@@ -1,4 +1,4 @@
-class CreatePublicationStatics < ActiveRecord::Migration
+class CreatePublicationStatics < ActiveRecord::Migration[4.2]
   def change
     create_view :publication_statics
   end
diff --git a/db/migrate/20191219000002_create_users_collaborators.rb b/db/migrate/20191219000002_create_users_collaborators.rb
index 7d4ea2577..435c6506f 100644
--- a/db/migrate/20191219000002_create_users_collaborators.rb
+++ b/db/migrate/20191219000002_create_users_collaborators.rb
@@ -1,4 +1,4 @@
-class CreateUsersCollaborators < ActiveRecord::Migration
+class CreateUsersCollaborators < ActiveRecord::Migration[4.2]
   def change
     create_table :users_collaborators do |t|
       t.integer :user_id
diff --git a/db/migrate/20200203000001_create_public_scheme_only_collection.rb b/db/migrate/20200203000001_create_public_scheme_only_collection.rb
index a0efd5214..42dfcc882 100644
--- a/db/migrate/20200203000001_create_public_scheme_only_collection.rb
+++ b/db/migrate/20200203000001_create_public_scheme_only_collection.rb
@@ -1,4 +1,4 @@
-class CreatePublicSchemeOnlyCollection < ActiveRecord::Migration
+class CreatePublicSchemeOnlyCollection < ActiveRecord::Migration[4.2]
   def change
     chemotion_user = User.chemotion_user
     public_scheme_reaction = Collection.scheme_only_reactions_collection || Collection.create(user: chemotion_user, label: 'Scheme-only reactions', is_shared: false, is_locked: false, is_synchronized: true)
diff --git a/db/migrate/20200210000001_add_reactions_samples_scheme_yield.rb b/db/migrate/20200210000001_add_reactions_samples_scheme_yield.rb
index 526a16692..e8b4394c9 100644
--- a/db/migrate/20200210000001_add_reactions_samples_scheme_yield.rb
+++ b/db/migrate/20200210000001_add_reactions_samples_scheme_yield.rb
@@ -1,4 +1,4 @@
-class AddReactionsSamplesSchemeYield < ActiveRecord::Migration
+class AddReactionsSamplesSchemeYield < ActiveRecord::Migration[4.2]
   def change
     add_column :reactions_samples, :scheme_yield, :float
   end
diff --git a/db/migrate/20200420081847_add_chemscanner_notification.rb b/db/migrate/20200420081847_add_chemscanner_notification.rb
index 4d6eb5fdd..adb5fc058 100644
--- a/db/migrate/20200420081847_add_chemscanner_notification.rb
+++ b/db/migrate/20200420081847_add_chemscanner_notification.rb
@@ -1,4 +1,4 @@
-class AddChemscannerNotification < ActiveRecord::Migration
+class AddChemscannerNotification < ActiveRecord::Migration[4.2]
   def change
     channel = Channel.find_by(subject: Channel::CHEMSCANNER_NOTIFICATION)
     return unless channel.nil?
diff --git a/db/migrate/20200729140000_update_sample_collection_tag.rb b/db/migrate/20200729140000_update_sample_collection_tag.rb
index 398a679e7..e343f9101 100644
--- a/db/migrate/20200729140000_update_sample_collection_tag.rb
+++ b/db/migrate/20200729140000_update_sample_collection_tag.rb
@@ -1,4 +1,4 @@
-class UpdateSampleCollectionTag < ActiveRecord::Migration
+class UpdateSampleCollectionTag < ActiveRecord::Migration[4.2]
   def change
     Sample.find_each do |s|
       s.update_tag!(collection_tag: true)
diff --git a/db/migrate/20200803170002_tag_doi_reviewing.rb b/db/migrate/20200803170002_tag_doi_reviewing.rb
index 172ecde7c..85989661c 100644
--- a/db/migrate/20200803170002_tag_doi_reviewing.rb
+++ b/db/migrate/20200803170002_tag_doi_reviewing.rb
@@ -1,4 +1,4 @@
-class TagDoiReviewing < ActiveRecord::Migration
+class TagDoiReviewing < ActiveRecord::Migration[4.2]
   def change
     mds = Datacite::Mds.new
 
@@ -10,7 +10,7 @@ def change
       tag_data['doi'] = "#{mds.doi_prefix}/#{element&.doi.suffix}"
       et.update!(
         taggable_data: (et.taggable_data || {}).merge(publication: tag_data)
-      )  
+      )
     end
     rescue Exception => e
   end
diff --git a/db/migrate/20201027170400_create_compound_open_data_locals.rb b/db/migrate/20201027170400_create_compound_open_data_locals.rb
index 6763c60e3..a4eb3ac53 100644
--- a/db/migrate/20201027170400_create_compound_open_data_locals.rb
+++ b/db/migrate/20201027170400_create_compound_open_data_locals.rb
@@ -1,4 +1,4 @@
-class CreateCompoundOpenDataLocals < ActiveRecord::Migration
+class CreateCompoundOpenDataLocals < ActiveRecord::Migration[4.2]
   def change
     create_view :compound_open_data_locals
   end
diff --git a/db/migrate/20201028120000_add_accepted_at.rb b/db/migrate/20201028120000_add_accepted_at.rb
index ec1eeef1e..261dc7d84 100644
--- a/db/migrate/20201028120000_add_accepted_at.rb
+++ b/db/migrate/20201028120000_add_accepted_at.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Add new column accepted_at to table: publications and data migration
-class AddAcceptedAt < ActiveRecord::Migration
+class AddAcceptedAt < ActiveRecord::Migration[4.2]
   def up
     add_column(:publications, :accepted_at, :datetime) unless column_exists? :publications, :accepted_at
 
diff --git a/db/migrate/20201103124001_create_function_com_xvial.rb b/db/migrate/20201103124001_create_function_com_xvial.rb
index 64e9ef495..97e893ae9 100644
--- a/db/migrate/20201103124001_create_function_com_xvial.rb
+++ b/db/migrate/20201103124001_create_function_com_xvial.rb
@@ -1,4 +1,4 @@
-class CreateFunctionComXvial < ActiveRecord::Migration
+class CreateFunctionComXvial < ActiveRecord::Migration[4.2]
   def change
     create_function :com_xvial
   end
diff --git a/db/migrate/20210806150600_fix_solvent_migration.rb b/db/migrate/20210806150600_fix_solvent_migration.rb
index e83b23731..f74ca4c7f 100644
--- a/db/migrate/20210806150600_fix_solvent_migration.rb
+++ b/db/migrate/20210806150600_fix_solvent_migration.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Create fix solvent migration
-class FixSolventMigration < ActiveRecord::Migration
+class FixSolventMigration < ActiveRecord::Migration[4.2]
   def change
     solvent_list = {}
     Sample.where.not(solvent: nil).find_each do |sample|

From 625bd93197286dde932b0de456d5c8f715648b4b Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 24 Feb 2022 20:02:09 +0100
Subject: [PATCH 052/258] rm chemscanner

---
 Gemfile.lock | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 45641941d..48df9f42f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -874,7 +874,6 @@ DEPENDENCIES
   capybara
   caxlsx
   charlock_holmes
-  chem_scanner!
   chronic
   closure_tree
   countries

From a197ee83730911b8613ad332c7e4b213469d7d68 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 24 Feb 2022 21:07:14 +0100
Subject: [PATCH 053/258] chemscanner

---
 app/api/chemotion/repository_api.rb     | 19 -------------------
 app/api/helpers/submission_helpers.rb   | 20 ++++++++++++++++++++
 app/models/chemscanner/molecule.rb      |  2 +-
 app/models/chemscanner/reaction.rb      | 12 ++++++------
 app/models/chemscanner/reaction_step.rb |  2 +-
 app/models/chemscanner/scheme.rb        |  8 ++++----
 app/models/chemscanner/source.rb        |  6 +++---
 7 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 67ebc50ef..1c466688c 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -348,24 +348,6 @@ def find_embargo_collection(root_publication)
           has_embargo_col && has_embargo_col.length > 0 ? has_embargo_col.first.label : ''
         end
 
-        def update_tag_doi(element)
-          unless element.nil? || element&.doi.nil? || element&.tag.nil?
-            mds = Datacite::Mds.new
-            et = element.tag
-            tag_data = (et.taggable_data && et.taggable_data['publication']) || {}
-            tag_data['doi'] = "#{mds.doi_prefix}/#{element&.doi.suffix}"
-            et.update!(
-              taggable_data: (et.taggable_data || {}).merge(publication: tag_data)
-            )
-            if element&.class&.name == 'Reaction'
-              element&.publication.children.each do |child|
-                next unless child&.element&.class&.name == 'Sample'
-
-                update_tag_doi(child.element)
-              end
-            end
-          end
-        end
       end
 
       desc 'Get review list'
@@ -1182,7 +1164,6 @@ def remove_embargo_collection(col)
               { error: "Embargo #{@embargo_collection.label} release failed, because not all elements have been 'accepted'."}
             else
               pub_list.each { |pub| element_submit(pub) }
-byebug
               remove_anonymous(@embargo_collection)
               handle_embargo_collections(@embargo_collection)
               case ENV['PUBLISH_MODE']
diff --git a/app/api/helpers/submission_helpers.rb b/app/api/helpers/submission_helpers.rb
index 8d52ca16c..ba400ce65 100644
--- a/app/api/helpers/submission_helpers.rb
+++ b/app/api/helpers/submission_helpers.rb
@@ -21,6 +21,26 @@ def coauthor_validation(coauthors)
     coauthor_ids
   end
 
+
+  def update_tag_doi(element)
+    unless element.nil? || element&.doi.nil? || element&.tag.nil?
+      mds = Datacite::Mds.new
+      et = element.tag
+      tag_data = (et.taggable_data && et.taggable_data['publication']) || {}
+      tag_data['doi'] = "#{mds.doi_prefix}/#{element&.doi.suffix}"
+      et.update!(
+        taggable_data: (et.taggable_data || {}).merge(publication: tag_data)
+      )
+      if element&.class&.name == 'Reaction'
+        element&.publication.children.each do |child|
+          next unless child&.element&.class&.name == 'Sample'
+
+          update_tag_doi(child.element)
+        end
+      end
+    end
+  end
+
   def accept_new_sample(root, sample)
     ap = Publication.create!(
       state: Publication::STATE_PENDING,
diff --git a/app/models/chemscanner/molecule.rb b/app/models/chemscanner/molecule.rb
index 779943a1c..8086b7805 100644
--- a/app/models/chemscanner/molecule.rb
+++ b/app/models/chemscanner/molecule.rb
@@ -30,7 +30,7 @@ module Chemscanner
   class Molecule < ApplicationRecord
     acts_as_paranoid
 
-    belongs_to :scheme, class_name: Scheme, foreign_key: :scheme_id
+    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
 
     has_many :reactions_molecules, dependent: :destroy
     has_many :reactions_reactant_molecules, dependent: :destroy
diff --git a/app/models/chemscanner/reaction.rb b/app/models/chemscanner/reaction.rb
index c2440a2d1..98d35b00f 100644
--- a/app/models/chemscanner/reaction.rb
+++ b/app/models/chemscanner/reaction.rb
@@ -28,33 +28,33 @@ module Chemscanner
   class Reaction < ApplicationRecord
     acts_as_paranoid
 
-    belongs_to :scheme, class_name: Scheme, foreign_key: :scheme_id
+    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
 
-    has_many :steps, class_name: ReactionStep, foreign_key: :reaction_id
+    has_many :steps, class_name: 'ReactionStep', foreign_key: :reaction_id
 
     has_many :reactions_molecules, dependent: :destroy
     has_many :molecules, through: :reactions_molecules, source: :molecule
 
     has_many :reactions_reactant_molecules,
-             class_name: ReactionsReactantMolecule,
+             class_name: 'ReactionsReactantMolecule',
              dependent: :destroy
     has_many :reactants,
              through: :reactions_reactant_molecules, source: :molecule
 
     has_many :reactions_reagent_molecules,
-             class_name: ReactionsReagentMolecule,
+             class_name: 'ReactionsReagentMolecule',
              dependent: :destroy
     has_many :reagents,
              through: :reactions_reagent_molecules, source: :molecule
 
     has_many :reactions_solvent_molecules,
-             class_name: ReactionsSolventMolecule,
+             class_name: 'ReactionsSolventMolecule',
              dependent: :destroy
     has_many :solvents,
              through: :reactions_solvent_molecules, source: :molecule
 
     has_many :reactions_product_molecules,
-             class_name: ReactionsProductMolecule,
+             class_name: 'ReactionsProductMolecule',
              dependent: :destroy
     has_many :products,
              through: :reactions_product_molecules,
diff --git a/app/models/chemscanner/reaction_step.rb b/app/models/chemscanner/reaction_step.rb
index 6e027179c..91c0e7f75 100644
--- a/app/models/chemscanner/reaction_step.rb
+++ b/app/models/chemscanner/reaction_step.rb
@@ -25,7 +25,7 @@ module Chemscanner
   class ReactionStep < ApplicationRecord
     acts_as_paranoid
 
-    belongs_to :reaction, class_name: Reaction, foreign_key: :output_id
+    belongs_to :reaction, class_name: 'Reaction', foreign_key: :output_id
 
     def assign_from_chemscanner(step)
       assign_attributes(
diff --git a/app/models/chemscanner/scheme.rb b/app/models/chemscanner/scheme.rb
index 92cc1d5f0..684cb6706 100644
--- a/app/models/chemscanner/scheme.rb
+++ b/app/models/chemscanner/scheme.rb
@@ -23,15 +23,15 @@ module Chemscanner
   class Scheme < ApplicationRecord
     acts_as_paranoid
 
-    belongs_to :creator, foreign_key: :created_by, class_name: User
-    belongs_to :source, foreign_key: :source_id, class_name: Chemscanner::Source
+    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
+    belongs_to :source, foreign_key: :source_id, class_name: 'Chemscanner::Source'
 
     has_many :reactions,
-             class_name: Reaction, foreign_key: :scheme_id,
+             class_name: 'Reaction', foreign_key: :scheme_id,
              dependent: :destroy
 
     has_many :molecules,
-             class_name: Molecule, foreign_key: :scheme_id,
+             class_name: 'Molecule', foreign_key: :scheme_id,
              dependent: :destroy
 
     accepts_nested_attributes_for :reactions, :molecules
diff --git a/app/models/chemscanner/source.rb b/app/models/chemscanner/source.rb
index 1a4c5d2ac..87fdff9dc 100644
--- a/app/models/chemscanner/source.rb
+++ b/app/models/chemscanner/source.rb
@@ -18,16 +18,16 @@
 module Chemscanner
   # Uploaded files for scanning
   class Source < ActiveRecord::Base
-    belongs_to :creator, foreign_key: :created_by, class_name: User
+    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
 
     belongs_to :file, -> { where attachable_type: 'ChemscannerSource' },
-               class_name: Attachment, foreign_key: :file_id,
+               class_name: 'Attachment', foreign_key: :file_id,
                foreign_type: :attachable_type
 
     # has_one :file, as: :attachable
 
     has_many :schemes,
-             foreign_key: :source_id, class_name: Scheme,
+             foreign_key: :source_id, class_name: 'Scheme',
              dependent: :destroy
 
     accepts_nested_attributes_for :schemes

From f00d154e6bcdffc4ecff9279264edf4b5a52a0cc Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Sat, 19 Mar 2022 12:54:04 +0100
Subject: [PATCH 054/258] submission validation and collection

---
 .../apps/mydb/collections/CollectionSubtree.js    | 15 +++++++++++----
 app/packs/src/components/CollectionTree.js        |  4 ++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/packs/src/apps/mydb/collections/CollectionSubtree.js b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
index 59b18ed7a..aa82675d3 100644
--- a/app/packs/src/apps/mydb/collections/CollectionSubtree.js
+++ b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
@@ -39,6 +39,7 @@ export default class CollectionSubtree extends React.Component {
 
     this.state = {
       isRemote: props.isRemote,
+      currentCollection: props.currentCollection,
       label: props.root.label,
       selected: false,
       root: props.root,
@@ -83,11 +84,13 @@ export default class CollectionSubtree extends React.Component {
       if (selectedCol) {
         this.setState({
           selected: true,
+          currentCollection: state.currentCollection,
           visible
         });
       } else {
         this.setState({
           selected: false,
+          currentCollection: state.currentCollection,
           visible
         });
       }
@@ -104,8 +107,12 @@ export default class CollectionSubtree extends React.Component {
     return (visibleRootsIds.indexOf(node.id) > -1)
   }
 
-  selectedCssClass() {
-    return (this.state.selected) ? "selected" : "";
+  selectedCssClass(currentCollection) {
+    const { root } = this.state;
+    if (this.state.selected || (currentCollection && currentCollection.id == root.id && currentCollection.is_synchronized == root.is_synchronized)) {
+      return 'selected';
+    }
+    return '';
   }
 
   children() {
@@ -234,7 +241,7 @@ export default class CollectionSubtree extends React.Component {
 
 
   render() {
-    const { root, visible } = this.state
+    const { root, visible, currentCollection } = this.state
     let { label } = this.state
 
     label = labeling(label);
@@ -252,7 +259,7 @@ export default class CollectionSubtree extends React.Component {
       <div className="tree-view" key={root.id}>
         {this.takeOwnershipButton()}
 
-        <div id={`tree-id-${root.label}`} className={"title " + this.selectedCssClass()}
+        <div id={`tree-id-${root.label}`} className={"title " + this.selectedCssClass(currentCollection)}
           onClick={this.handleClick}>
           {this.expandButton()}
           {this.synchronizedIcon()}
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
index 1b35de36d..fc01a506f 100644
--- a/app/packs/src/components/CollectionTree.js
+++ b/app/packs/src/components/CollectionTree.js
@@ -59,6 +59,7 @@ export default class CollectionTree extends React.Component {
 
   componentWillUnmount() {
     CollectionStore.unlisten(this.onChange);
+    UIStore.listen(this.onChange);
     InboxStore.unlisten(this.onChange);
   }
 
@@ -281,10 +282,13 @@ export default class CollectionTree extends React.Component {
   }
 
   subtrees(roots, label, isRemote, visible = true) {
+    const { currentCollection, isSync } = UIStore.getState();
+
     let subtrees = roots.map((root, index) => {
       return  <CollectionSubtree
                 root={root}
                 key={index}
+                currentCollection={currentCollection}
                 isRemote={isRemote}
               //  deSelectPublic={this.deSelectPublic}
               />

From f8d2619aa79a10ba0028509cd7b5cd89c870cdf7 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Sat, 19 Mar 2022 13:12:20 +0100
Subject: [PATCH 055/258] reference desc

---
 app/packs/src/components/PublishReactionModal.js | 6 +++---
 app/packs/src/components/PublishSampleModal.js   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 4f9033c1e..42f877063 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -470,8 +470,8 @@ export default class PublishReactionModal extends Component {
       <Table>
         <thead>
           <tr>
-            <th width="80%" />
-            <th width="20%" />
+            <th width="60%" />
+            <th width="40%" />
           </tr>
         </thead>
         <tbody>
@@ -501,7 +501,7 @@ export default class PublishReactionModal extends Component {
                         onChange={() => { this.handleRefCheck(id); }}
                       >
                         <span>Add to publication</span><br />
-                        <span>({CitationTypeMap[litype].short})</span>
+                        <span>({CitationTypeMap[litype].def})</span>
                       </Checkbox>
                     </span>
                   </OverlayTrigger>
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index 0bc66ff37..f8bd1a228 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -324,8 +324,8 @@ export default class PublishSampleModal extends Component {
       <Table>
         <thead>
           <tr>
-            <th width="80%" />
-            <th width="20%" />
+            <th width="60%" />
+            <th width="40%" />
           </tr>
         </thead>
         <tbody>
@@ -354,7 +354,7 @@ export default class PublishSampleModal extends Component {
                         onChange={() => { this.handleRefCheck(id); }}
                       >
                         <span>Add to publication</span><br />
-                        <span>({CitationTypeMap[litype].short})</span>
+                        <span>({CitationTypeMap[litype].def})</span>
                       </Checkbox>
                     </span>
                   </OverlayTrigger>

From 5336c122015c4d7f4172e49296258759934cb2fc Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 7 Apr 2022 16:29:02 +0200
Subject: [PATCH 056/258] rm dup. decoupled

---
 app/api/chemotion/repository_api.rb           |   2 +-
 app/models/anonymous.rb                       |   2 +
 app/models/collaborator.rb                    |   2 +
 .../elements/details/samples/SampleDetails.js |  75 +++-
 db/schema.rb                                  | 383 +-----------------
 5 files changed, 73 insertions(+), 391 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 1c466688c..8028c8305 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -779,7 +779,7 @@ def save_comment(root, comment)
 
         post :reviewed do
           save_comments(@root_publication, params[:comment], 'review')
-          element_submit(@root_publication)
+          # element_submit(@root_publication)
           @root_publication.update_state(Publication::STATE_REVIEWED)
           @root_publication.process_element(Publication::STATE_REVIEWED)
           @root_publication.inform_users(Publication::STATE_REVIEWED)
diff --git a/app/models/anonymous.rb b/app/models/anonymous.rb
index 8fa637b07..cb3c3f4bb 100644
--- a/app/models/anonymous.rb
+++ b/app/models/anonymous.rb
@@ -34,6 +34,8 @@
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
+#  omniauth_provider      :string
+#  omniauth_uid           :string
 #
 # Indexes
 #
diff --git a/app/models/collaborator.rb b/app/models/collaborator.rb
index 30a2a19ec..f5c78983b 100644
--- a/app/models/collaborator.rb
+++ b/app/models/collaborator.rb
@@ -34,6 +34,8 @@
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
+#  omniauth_provider      :string
+#  omniauth_uid           :string
 #
 # Indexes
 #
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index f5537849f..e83b2f60f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -578,14 +578,73 @@ export default class SampleDetails extends React.Component {
 
     const saveAndCloseBtn = belongToReaction && !sample.isNew ? this.saveBtn(sample, true) : null;
     return (
-      <ButtonToolbar>
-        <Button bsStyle="primary" onClick={() => DetailActions.close(sample)}>
-          Close
-        </Button>
-        {this.saveBtn(sample)}
-        {saveAndCloseBtn}
-        {downloadAnalysesBtn}
-      </ButtonToolbar>
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
+          <span><i className="icon-sample" />{sample.title()}</span>
+        </OverlayTrigger>
+        <ConfirmClose el={sample} />
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveCloseSample">Save and Close Sample</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit(true)}
+            style={{ display: saveBtnDisplay }}
+            disabled={!this.sampleIsValid() || !sample.can_update}
+          >
+            <i className="fa fa-floppy-o" />
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveSample">Save Sample</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit()}
+            style={{ display: saveBtnDisplay }}
+            disabled={!this.sampleIsValid() || !sample.can_update}
+          >
+            <i className="fa fa-floppy-o" />
+          </Button>
+        </OverlayTrigger>
+        {copyBtn}
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.props.toggleFullScreen()}
+          >
+            <i className="fa fa-expand" />
+          </Button>
+        </OverlayTrigger>
+        <PrintCodeButton element={sample} />
+        {sample.isNew ? <FastInput fnHandle={this.handleFastInput} /> : null}
+        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
+        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
+        {decoupleCb}
+        <div style={{ display: 'inline-block', marginLeft: '10px' }}>
+          <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+          {colLabel}
+          <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+          <PubchemLabels element={sample} />
+          <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
+          <PublishedTag element={sample} />
+          <LabelPublication element={sample} />
+          {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
+        </div>
+        <ShowUserLabels element={sample} />
+      </div>
     );
   }
 
diff --git a/db/schema.rb b/db/schema.rb
index b86a85f91..6ce4c0f71 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -16,7 +16,6 @@
   enable_extension "hstore"
   enable_extension "pg_trgm"
   enable_extension "plpgsql"
-  enable_extension "postgres_fdw"
   enable_extension "uuid-ossp"
 
   create_table "affiliations", id: :serial, force: :cascade do |t|
@@ -390,25 +389,6 @@
     t.index ["device_id"], name: "index_device_metadata_on_device_id"
   end
 
-  create_table "dois", id: :serial, force: :cascade do |t|
-    t.integer "molecule_id"
-    t.string "inchikey"
-    t.integer "molecule_count"
-    t.integer "analysis_id"
-    t.string "analysis_type"
-    t.integer "analysis_count"
-    t.jsonb "metadata", default: {}
-    t.boolean "minted", default: false
-    t.datetime "minted_at"
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
-    t.integer "doiable_id"
-    t.string "doiable_type"
-    t.string "suffix"
-    t.index ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true
-    t.index ["suffix"], name: "index_dois_on_suffix", unique: true
-  end
-
   create_table "element_klasses", id: :serial, force: :cascade do |t|
     t.string "name"
     t.string "label"
@@ -893,7 +873,6 @@
     t.datetime "deleted_at"
     t.boolean "waste", default: false
     t.float "coefficient", default: 1.0
-    t.float "scheme_yield"
     t.boolean "show_label", default: false, null: false
     t.index ["reaction_id"], name: "index_reactions_samples_on_reaction_id"
     t.index ["sample_id"], name: "index_reactions_samples_on_sample_id"
@@ -1051,6 +1030,7 @@
     t.integer "molecule_id"
     t.binary "molfile"
     t.float "purity", default: 1.0
+    t.string "deprecated_solvent", default: ""
     t.string "impurities", default: ""
     t.string "location", default: ""
     t.boolean "is_top_secret", default: false
@@ -1311,11 +1291,6 @@
     t.index ["user_id"], name: "index_users_admins_on_user_id"
   end
 
-  create_table "users_collaborators", id: :serial, force: :cascade do |t|
-    t.integer "user_id"
-    t.integer "collaborator_id"
-  end
-
   create_table "users_devices", id: :serial, force: :cascade do |t|
     t.integer "user_id"
     t.integer "device_id"
@@ -1357,7 +1332,6 @@
     t.index ["wellplate_id"], name: "index_wells_on_wellplate_id"
   end
 
-  add_foreign_key "dois", "molecules"
   add_foreign_key "literals", "literatures"
   add_foreign_key "report_templates", "attachments"
   add_foreign_key "sample_tasks", "samples"
@@ -1441,182 +1415,7 @@
       	return in_message_id;
       end;$function$
   SQL
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
   create_function :generate_users_matrix, sql_definition: <<-'SQL'
-=======
-=======
-=======
-  create_function :generate_users_matrix, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.generate_users_matrix(in_user_ids integer[])
-       RETURNS boolean
-       LANGUAGE plpgsql
-      AS $function$
-      begin
-      	if in_user_ids is null then
-          update users u set matrix = (
-      	    select coalesce(sum(2^mx.id),0) from (
-      		    select distinct m1.* from matrices m1, users u1
-      				left join users_groups ug1 on ug1.user_id = u1.id
-      		      where u.id = u1.id and ((m1.enabled = true) or ((u1.id = any(m1.include_ids)) or (u1.id = ug1.user_id and ug1.group_id = any(m1.include_ids))))
-      	      except
-      		    select distinct m2.* from matrices m2, users u2
-      				left join users_groups ug2 on ug2.user_id = u2.id
-      		      where u.id = u2.id and ((u2.id = any(m2.exclude_ids)) or (u2.id = ug2.user_id and ug2.group_id = any(m2.exclude_ids)))
-      	    ) mx
-          );
-      	else
-      		  update users u set matrix = (
-      		  	select coalesce(sum(2^mx.id),0) from (
-      			   select distinct m1.* from matrices m1, users u1
-      				 left join users_groups ug1 on ug1.user_id = u1.id
-      			     where u.id = u1.id and ((m1.enabled = true) or ((u1.id = any(m1.include_ids)) or (u1.id = ug1.user_id and ug1.group_id = any(m1.include_ids))))
-      			   except
-      			   select distinct m2.* from matrices m2, users u2
-      				 left join users_groups ug2 on ug2.user_id = u2.id
-      			     where u.id = u2.id and ((u2.id = any(m2.exclude_ids)) or (u2.id = ug2.user_id and ug2.group_id = any(m2.exclude_ids)))
-      			  ) mx
-      		  ) where ((in_user_ids) @> array[u.id]) or (u.id in (select ug3.user_id from users_groups ug3 where (in_user_ids) @> array[ug3.group_id]));
-      	end if;
-        return true;
-      end
-      $function$
-  SQL
->>>>>>> WIP
-  create_function :group_user_ids, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.group_user_ids(group_id integer)
-       RETURNS TABLE(user_ids integer)
-       LANGUAGE sql
-      AS $function$
-             select id from users where type='Person' and id= $1
-             union
-             select user_id from users_groups where group_id = $1
-      $function$
-  SQL
-  create_function :labels_by_user_sample, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.labels_by_user_sample(user_id integer, sample_id integer)
-       RETURNS TABLE(labels text)
-       LANGUAGE sql
-      AS $function$
-         select string_agg(title::text, ', ') as labels from (select title from user_labels ul where ul.id in (
-           select d.list
-           from element_tags et, lateral (
-             select value::integer as list
-             from jsonb_array_elements_text(et.taggable_data  -> 'user_labels')
-           ) d
-           where et.taggable_id = $2 and et.taggable_type = 'Sample'
-         ) and (ul.access_level = 1 or (ul.access_level = 0 and ul.user_id = $1)) order by title  ) uls
-       $function$
-  SQL
-  create_function :pub_reactions_by_molecule, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.pub_reactions_by_molecule(collection_id integer, molecule_id integer)
-       RETURNS TABLE(reaction_ids integer)
-       LANGUAGE sql
-      AS $function$
-          (select r.id from collections c, collections_reactions cr, reactions r, reactions_samples rs, samples s,molecules m
-           where c.id=$1 and c.id = cr.collection_id and cr.reaction_id = r.id
-           and r.id = rs.reaction_id and rs.sample_id = s.id and rs.type in ('ReactionsProductSample')
-           and c.deleted_at is null and cr.deleted_at is null and r.deleted_at is null and rs.deleted_at is null and s.deleted_at is null and m.deleted_at is null
-           and s.molecule_id = m.id and m.id=$2)
-        $function$
-  SQL
-  create_function :shared_user_as_json, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
-       RETURNS json
-       LANGUAGE plpgsql
-      AS $function$
-         begin
-          if (in_user_id = in_current_user_id) then
-            return null;
-          else
-            return (select row_to_json(result) from (
-            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-            from users where id = $1
-            ) as result);
-          end if;
-          end;
-       $function$
-  SQL
-  create_function :update_users_matrix, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.update_users_matrix()
-       RETURNS trigger
-       LANGUAGE plpgsql
-      AS $function$
-      begin
-      	if (TG_OP='INSERT') then
-          PERFORM generate_users_matrix(null);
-      	end if;
-
-      	if (TG_OP='UPDATE') then
-      	  if new.enabled <> old.enabled or new.deleted_at <> new.deleted_at then
-            PERFORM generate_users_matrix(null);
-      	  elsif new.include_ids <> old.include_ids then
-            PERFORM generate_users_matrix(new.include_ids || old.include_ids);
-          elsif new.exclude_ids <> old.exclude_ids then
-            PERFORM generate_users_matrix(new.exclude_ids || old.exclude_ids);
-      	  end if;
-      	end if;
-        return new;
-      end
-      $function$
-  SQL
-  create_function :user_as_json, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
-       RETURNS json
-       LANGUAGE sql
-      AS $function$
-         select row_to_json(result) from (
-           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-           from users where id = $1
-         ) as result
-       $function$
-  SQL
-  create_function :user_ids, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
-       RETURNS TABLE(user_ids integer)
-       LANGUAGE sql
-      AS $function$
-          select $1 as id
-          union
-          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
-         and users.type in ('Group') and users_groups.user_id = $1)
-        $function$
-  SQL
-  create_function :user_instrument, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
-       RETURNS TABLE(instrument text)
-       LANGUAGE sql
-      AS $function$
-             select distinct extended_metadata -> 'instrument' as instrument from containers c
-             where c.container_type='dataset' and c.id in
-             (select ch.descendant_id from containers sc,container_hierarchies ch, samples s, users u
-             where sc.containable_type in ('Sample','Reaction') and ch.ancestor_id=sc.id and sc.containable_id=s.id
-             and s.created_by = u.id and u.id = $1 and ch.generations=3 group by descendant_id)
-             and upper(extended_metadata -> 'instrument') like upper($2 || '%')
-             order by extended_metadata -> 'instrument' limit 10
-           $function$
-  SQL
-<<<<<<< HEAD
->>>>>>> minor upd  Gem.lock db/schema
-  create_function :labels_by_user_sample, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.labels_by_user_sample(user_id integer, sample_id integer)
-       RETURNS TABLE(labels text)
-=======
-  create_function :literatures_by_element, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.literatures_by_element(element_type text, element_id integer)
-       RETURNS TABLE(literatures text)
->>>>>>> WIP
-       LANGUAGE sql
-      AS $function$
-         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
-         where l.literature_id = l2.id
-         and l.element_type = $1 and l.element_id = $2
-       $function$
-  SQL
-<<<<<<< HEAD
-  create_function :generate_users_matrix, sql_definition: <<-SQL
->>>>>>> REPO FACTOR
       CREATE OR REPLACE FUNCTION public.generate_users_matrix(in_user_ids integer[])
        RETURNS boolean
        LANGUAGE plpgsql
@@ -1726,13 +1525,11 @@
       end
       $function$
   SQL
-<<<<<<< HEAD
   create_function :user_as_json, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
        RETURNS json
        LANGUAGE sql
       AS $function$
-<<<<<<< HEAD
              select row_to_json(result) from (
             	 select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
            	   from users where id = $1
@@ -1749,12 +1546,6 @@
              (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
              and users.type in ('Group') and users_groups.user_id = $1)
            $function$
-=======
-         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
-         where l.literature_id = l2.id
-         and l.element_type = $1 and l.element_id = $2
-       $function$
->>>>>>> REPO FACTOR
   SQL
   create_function :user_instrument, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
@@ -1776,89 +1567,6 @@
       CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
   SQL
 
-<<<<<<< HEAD
-=======
-  create_function :group_user_ids, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.group_user_ids(group_id integer)
-       RETURNS TABLE(user_ids integer)
-       LANGUAGE sql
-      AS $function$
-             select id from users where type='Person' and id= $1
-             union
-             select user_id from users_groups where group_id = $1
-      $function$
-  SQL
-  create_function :pub_reactions_by_molecule, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.pub_reactions_by_molecule(collection_id integer, molecule_id integer)
-       RETURNS TABLE(reaction_ids integer)
-       LANGUAGE sql
-      AS $function$
-          (select r.id from collections c, collections_reactions cr, reactions r, reactions_samples rs, samples s,molecules m
-           where c.id=$1 and c.id = cr.collection_id and cr.reaction_id = r.id
-           and r.id = rs.reaction_id and rs.sample_id = s.id and rs.type in ('ReactionsProductSample')
-           and c.deleted_at is null and cr.deleted_at is null and r.deleted_at is null and rs.deleted_at is null and s.deleted_at is null and m.deleted_at is null
-           and s.molecule_id = m.id and m.id=$2)
-        $function$
-  SQL
-  create_function :shared_user_as_json, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
-       RETURNS json
-=======
-  create_function :com_xvial, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.com_xvial(p_allow boolean DEFAULT false)
-       RETURNS SETOF compound_open_data_locals
->>>>>>> minor upd  Gem.lock db/schema
-       LANGUAGE plpgsql
-      AS $function$
-      begin
-      	if p_allow IS false then
-      		return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
-      	elsif EXISTS(select * from to_regclass('compound_open_data') where to_regclass is not null) then
-      	   RETURN QUERY SELECT compound_open_data.* FROM compound_open_data;
-      	else
-      	   return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
-          end if;
-      END
-      $function$
-  SQL
-=======
->>>>>>> WIP
-
-  create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
-      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
-  SQL
-
-<<<<<<< HEAD
->>>>>>> REPO FACTOR
-=======
-  create_view "compound_open_data_locals", sql_definition: <<-SQL
-      SELECT c.x_id,
-      c.x_sample_id,
-      c.x_data,
-      c.x_created_at,
-      c.x_updated_at,
-      c.x_inchikey,
-      c.x_sum_formular,
-      c.x_cano_smiles,
-      c.x_external_label,
-      c.x_short_label,
-      c.x_name,
-      c.x_stereo
-     FROM ( SELECT NULL::integer AS x_id,
-              NULL::integer AS x_sample_id,
-              NULL::jsonb AS x_data,
-              NULL::timestamp without time zone AS x_created_at,
-              NULL::timestamp without time zone AS x_updated_at,
-              NULL::character varying AS x_inchikey,
-              NULL::character varying AS x_sum_formular,
-              NULL::character varying AS x_cano_smiles,
-              NULL::character varying AS x_external_label,
-              NULL::character varying AS x_short_label,
-              NULL::character varying AS x_name,
-              NULL::jsonb AS x_stereo) c
-    WHERE (c.x_id IS NOT NULL);
-  SQL
->>>>>>> WIP
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
       lits.element_id,
@@ -1902,95 +1610,6 @@
       users
     WHERE ((channels.id = messages.channel_id) AND (messages.id = notifications.message_id) AND (users.id = messages.created_by));
   SQL
-<<<<<<< HEAD
-=======
-  create_view "publication_authors", sql_definition: <<-SQL
-      SELECT DISTINCT (jsonb_array_elements((publications.taggable_data -> 'creators'::text)) ->> 'id'::text) AS author_id,
-      publications.element_id,
-      publications.element_type,
-          CASE
-              WHEN ((publications.state)::text ~~ 'completed%'::text) THEN 'completed'::character varying
-              ELSE publications.state
-          END AS state,
-      publications.doi_id,
-      publications.ancestry
-     FROM publications
-    WHERE (publications.deleted_at IS NULL);
-  SQL
-  create_view "publication_ontologies", sql_definition: <<-SQL
-      SELECT root.element_type,
-      root.element_id,
-      sub.element_id AS container_id,
-      root.published_at,
-      (containers.extended_metadata -> 'kind'::text) AS ontologies,
-      btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 1)) AS term_id,
-      btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2)) AS label
-     FROM publications root,
-      publications sub,
-      containers
-    WHERE (((root.state)::text ~~ 'complete%'::text) AND ((root.element_type)::text = ANY (ARRAY[('Sample'::character varying)::text, ('Reaction'::character varying)::text])) AND ((sub.element_type)::text = 'Container'::text) AND (root.id = ANY ((string_to_array((sub.ancestry)::text, '/'::text))::integer[])) AND (root.deleted_at IS NULL) AND (sub.element_id = containers.id));
-  SQL
-  create_view "publication_statics", sql_definition: <<-SQL
-      SELECT 'sample'::text AS el_type,
-      'sample-embargo'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text = 'accepted'::text) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'sample'::text AS el_type,
-      'sample-review'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text = ANY (ARRAY[('pending'::character varying)::text, ('reviewed'::character varying)::text])) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'sample'::text AS el_type,
-      'sample'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'reaction'::text AS el_type,
-      'reaction-embargo'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text = 'accepted'::text) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'reaction'::text AS el_type,
-      'reaction-review'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text = ANY (ARRAY[('pending'::character varying)::text, ('reviewed'::character varying)::text])) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'reaction'::text AS el_type,
-      'reaction'::text AS ex_type,
-      count(publications.id) AS e_cnt
-     FROM publications
-    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
-  UNION
-   SELECT 'analysis'::text AS el_type,
-      summ.g_type AS ex_type,
-      sum(summ.c_num) AS e_cnt
-     FROM ( SELECT
-                  CASE
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%NMR%'::text) THEN 'NMR'::text
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%mass%'::text) THEN 'Mass'::text
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%DEPT%'::text) THEN 'DEPT'::text
-                      WHEN (((containers.extended_metadata -> 'kind'::text) ~~ '%X-ray%'::text) OR ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0000156%'::text)) THEN 'X-ray'::text
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0000630%'::text) THEN 'IR'::text
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0001007%'::text) THEN 'TLC'::text
-                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0001075%'::text) THEN 'EA'::text
-                      WHEN (split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2) <> ''::text) THEN btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2))
-                      ELSE (containers.extended_metadata -> 'kind'::text)
-                  END AS g_type,
-              count(containers.id) AS c_num
-             FROM containers
-            WHERE ((containers.id IN ( SELECT publications.element_id
-                     FROM publications
-                    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Container'::text) AND (publications.deleted_at IS NULL)))) AND ((containers.extended_metadata -> 'kind'::text) <> ''::text))
-            GROUP BY (containers.extended_metadata -> 'kind'::text)) summ
-    GROUP BY summ.g_type;
-  SQL
->>>>>>> REPO FACTOR
   create_view "v_samples_collections", sql_definition: <<-SQL
       SELECT cols.id AS cols_id,
       cols.user_id AS cols_user_id,

From 2789d46468c9001cbffb48fed4d6303730313310 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 7 Apr 2022 20:37:28 +0200
Subject: [PATCH 057/258] ref

---
 .../mydb/elements/details/literature/DetailsTabLiteratures.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
index 868865820..7aa4c62ba 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  ListGroup, ListGroupItem, Button, Row, Col
+  ListGroup, ListGroupItem, Button, Row, Col, Tooltip
 } from 'react-bootstrap';
 import uuid from 'uuid';
 import Immutable from 'immutable';

From f6e02fa331f61035f253889bfc9399a7da491637 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 25 Apr 2022 22:04:44 +0200
Subject: [PATCH 058/258] spectra 0.10.14-beta.0

---
 public/sprite.png | Bin 0 -> 113523 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/sprite.png

diff --git a/public/sprite.png b/public/sprite.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e11aefb630cd6c8fbc3157e75739a83d3db6ae4
GIT binary patch
literal 113523
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
TYf+{`;6p)9^<~*}<B$IXguxF0

literal 0
HcmV?d00001


From c36f3ca291ccc0bf08e8d46e0895bb7cdb3382dc Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 30 Mar 2022 13:21:52 +0200
Subject: [PATCH 059/258] Collection DOI

---
 app/api/chemotion/public_api.rb               | 202 +++++-----------
 app/api/chemotion/repository_api.rb           | 126 +++++-----
 app/api/entities/reaction_entity.rb           |   1 +
 app/api/helpers/embargo_helpers.rb            |  89 +++++++
 app/api/helpers/repository_helpers.rb         | 151 ++++++++++++
 app/jobs/chemotion_embargo_pubchem_job.rb     |   7 +-
 app/models/collection.rb                      |   2 +
 app/models/doi.rb                             |   2 +
 app/models/publication.rb                     |  26 +++
 app/models/publication_collections.rb         |  16 ++
 .../src/components/PublishReactionModal.js    |  21 +-
 .../src/components/PublishSampleModal.js      |  18 +-
 .../src/components/actions/PublicActions.js   |  32 ++-
 .../src/components/fetchers/PublicFetcher.js  |  21 ++
 .../components/fetchers/RepositoryFetcher.js  |  13 ++
 .../src/components/stores/PublicStore.js      |  35 +--
 app/packs/src/libHome/Home.js                 |   3 +
 app/packs/src/libHome/RepoCollection.js       | 220 ++++++++++++++++++
 .../src/libHome/RepoCollectionDetails.js      |  48 ++++
 app/packs/src/libHome/RepoCommon.js           |   4 +-
 app/packs/src/libHome/RepoEmbargo.js          | 212 ++++++++++++-----
 app/packs/src/libHome/RepoEmbargoModal.js     | 106 +++++++++
 app/packs/src/libHome/RepoReactionDetails.js  |  12 +
 app/packs/src/libHome/RepoSample.js           |  10 +
 app/packs/src/libHome/homeRoutes.js           |   9 +
 .../datacite_metadata_collection.html.erb     |  61 +++++
 .../reaction_public_list_serializer.rb        |  36 +++
 config/routes.rb                              |   6 +
 .../20220330103001_build_embargo_doi.rb       |  22 ++
 ...26080445_create_publication_collections.rb |   5 +
 db/schema.rb                                  |  22 ++
 db/views/publication_collections_v01.sql      |   3 +
 32 files changed, 1250 insertions(+), 291 deletions(-)
 create mode 100644 app/api/helpers/embargo_helpers.rb
 create mode 100644 app/models/publication_collections.rb
 create mode 100644 app/packs/src/libHome/RepoCollection.js
 create mode 100644 app/packs/src/libHome/RepoCollectionDetails.js
 create mode 100644 app/packs/src/libHome/RepoEmbargoModal.js
 create mode 100644 app/publish/datacite_metadata_collection.html.erb
 create mode 100644 app/serializers/reaction_public_list_serializer.rb
 create mode 100644 db/migrate/20220330103001_build_embargo_doi.rb
 create mode 100644 db/migrate/20220426080445_create_publication_collections.rb
 create mode 100644 db/views/publication_collections_v01.sql

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 7bc554690..21ac258aa 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -617,78 +617,81 @@ def query_embargo(name)
         end
       end
 
-      resource :reaction do
+      resource :embargo do
         helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized reaction"
+        desc "Return PUBLISHED serialized collection"
         params do
-          requires :id, type: Integer, desc: "Reaction id"
+          requires :id, type: Integer, desc: "collection id"
         end
         get do
-          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
-          return nil unless r.present?
+          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
+          { col: pub }
+        end
+      end
 
-          reaction = Reaction.where('id = ?', params[:id])
-          .select(
-            <<~SQL
-            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
-            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
-            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
-            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
-            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
-            reactions.duration
-            SQL
-          )
-          .includes(
-                container: :attachments
-          ).last
-          literatures = get_literature(params[:id],'Reaction') || []
-          reaction.products.each do |p|
-            literatures += get_literature(p.id,'Sample')
+      resource :col_list do
+        helpers RepositoryHelpers
+        get do
+          @embargo_collection = Collection.find(params[:collection_id])
+          anasql = <<~SQL
+            publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
+          SQL
+          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
+          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
+          list = sample_list + reaction_list
+          elements = []
+          list.each do |e|
+            element_type = e.element&.class&.name
+            u = User.find(e.published_by) unless e.published_by.nil?
+            svg_file = e.element.sample_svg_file if element_type == 'Sample'
+            title = e.element.short_label if element_type == 'Sample'
+
+            svg_file = e.element.reaction_svg_file if element_type == 'Reaction'
+            title = e.element.short_label if element_type == 'Reaction'
+
+            scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
+            elements.push(
+              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
+              published_by: u&.name, submit_at: e.updated_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
+            )
           end
+          { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
+        end
+      end
 
-          pub = Publication.find_by(element_type: 'Reaction', element_id: params[:id])
-          pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
-          infos = {}
-          ana_infos = {}
-          pd_infos = {}
-          pub.descendants.each do |pp|
-            review = pp.review || {}
-            info = review['info'] || {}
-            next if info.empty?
-            if pp.element_type == 'Sample'
-              pd_infos[pp.element_id] = info['comment']
-            else
-              ana_infos[pp.element_id] = info['comment']
-            end
+      resource :col_element do
+        helpers RepositoryHelpers
+        params do
+          requires :collection_id, type: Integer, desc: "collection id"
+          requires :el_id, type: Integer, desc: "element id"
+        end
+        get do
+          @embargo_collection = Collection.find(params[:collection_id])
+          if params[:el_type] == 'Reaction'
+            return get_pub_reaction(params[:el_id])
+          elsif params[:el_type] == 'Sample'
+            sample = Sample.find(params[:el_id])
+            return get_pub_molecule(sample.molecule_id)
           end
+        end
+      end
 
-          schemeList = get_reaction_table(params[:id])
-          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
-          entities[:products].each do |p|
-            pub_product = p
-            p[:xvialCom] = build_xvial_com(p[:molecule][:inchikey], current_user&.id)
-            pub_product_tag = pub_product[:tag]['taggable_data']
-            next if pub_product_tag.nil?
-
-            xvial = pub_product_tag['xvial'] && pub_product_tag['xvial']['num']
-            next unless xvial.present?
+      resource :reaction do
+        helpers RepositoryHelpers
+        desc "Return PUBLISHED serialized reaction"
+        params do
+          requires :id, type: Integer, desc: "Reaction id"
+        end
+        get do
+          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
+          return nil unless r.present?
 
-            unless current_user.present? && User.reviewer_ids.include?(current_user.id)
-              pub_product_tag['xvial']['num'] = 'x'
-            end
-            p[:xvialCom][:hasSample] = true
-          end
-          entities[:publication]['review']['history'] = []
-          entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
-          entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
-          entities[:isLogin] = current_user.present?
-          entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
-          entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
-          entities
+          return get_pub_reaction(params[:id])
         end
       end
 
       resource :molecule do
+        helpers RepositoryHelpers
         desc "Return serialized molecule with list of PUBLISHED dataset"
         params do
           requires :id, type: Integer, desc: "Molecule id"
@@ -697,88 +700,7 @@ def query_embargo(name)
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         get do
-          molecule = Molecule.find(params[:id])
-          xvial_com = build_xvial_com(molecule.inchikey, current_user&.id)
-          pub_id = Collection.public_collection_id
-          if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
-            adv = <<~SQL
-              INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
-              and rs.author_id in ('#{params[:adv_val].join("','")}')
-            SQL
-          else
-            adv = ''
-          end
-
-          pub_samples = Collection.public_collection.samples
-            .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
-            .where(
-              <<~SQL
-                samples.id in (
-                  SELECT samples.id FROM samples
-                  INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-                  INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                  #{adv}
-                )
-              SQL
-            )
-            .select(
-              <<~SQL
-              samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
-              SQL
-            )
-            .order('published_at desc')
-          published_samples = pub_samples.map do |s|
-            containers = Entities::ContainerEntity.represent(s.container)
-            tag = s.tag.taggable_data['publication']
-            #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
-            #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
-            #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
-            #aff = u.affiliations.first
-            next unless tag
-            literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
-              .joins("inner join users on literals.user_id = users.id")
-              .select(
-                <<~SQL
-                literatures.*,
-                json_object_agg(literals.id, literals.litype) as litype,
-                json_object_agg(literals.id, users.first_name || chr(32) || users.last_name) as ref_added_by
-                SQL
-              ).group('literatures.id').as_json
-            reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
-            pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
-            sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
-            xvial = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['num'] unless s.tag.taggable_data.nil?
-            if xvial.present?
-              unless current_user.present? && User.reviewer_ids.include?(current_user.id)
-                xvial = 'x'
-              end
-            end
-            pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
-            ana_infos = {}
-            pub.descendants.each do |pp|
-              review = pp.review || {}
-              info = review['info'] || {}
-              next if info.empty?
-              ana_infos[pp.element_id] = info['comment']
-            end
-            em_sql = <<~SQL
-              inner join collections_samples cs on collections.id = cs.collection_id and cs.sample_id = #{s.id}
-            SQL
-            embargo = Collection.joins(em_sql).where("ancestry in (select c.id::text from collections c where c.label = 'Published Elements')")&.first&.label
-            tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
-              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
-
-          end
-          x = published_samples.select { |s| s[:xvial].present? }
-          xvial_com[:hasSample] = x.length.positive?
-          published_samples = published_samples.flatten.compact
-          {
-            molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
-            published_samples: published_samples,
-            isLogin: current_user.nil? ? false : true,
-            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false,
-            xvialCom: xvial_com
-          }
+          get_pub_molecule(params[:id], params[:adv_flag], params[:adv_type], params[:adv_val])
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 8028c8305..50507b204 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -10,25 +10,10 @@ class RepositoryAPI < Grape::API
     helpers CollectionHelpers
     helpers SampleHelpers
     helpers SubmissionHelpers
+    helpers EmbargoHelpers
 
     namespace :repository do
       helpers do
-        def fetch_embargo_collection(cid)
-          if (cid == 0)
-            chemotion_user = User.chemotion_user
-            new_col_label = current_user.initials + '_' + Time.now.strftime('%Y-%m-%d')
-            col_check = Collection.where([' label like ? ', new_col_label + '%'])
-            new_col_label = new_col_label << '_' << (col_check&.length + 1)&.to_s if col_check&.length.positive?
-            new_embargo_col = Collection.create!(user: chemotion_user, label: new_col_label, ancestry: current_user.publication_embargo_collection.id)
-            SyncCollectionsUser.find_or_create_by(user: current_user, shared_by_id: chemotion_user.id, collection_id: new_embargo_col.id,
-            permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10,
-            fake_ancestry: current_user.publication_embargo_collection.sync_collections_users.first.id.to_s)
-            new_embargo_col
-          else
-            Collection.find(cid)
-          end
-        end
-
         def duplicate_analyses(new_element, analyses_arr, ik = nil)
           unless new_element.container
             Container.create_root_container(containable: new_element)
@@ -342,12 +327,6 @@ def add_submission_history(root)
           review['history'] = history
           root.update!(review: review)
         end
-
-        def find_embargo_collection(root_publication)
-          has_embargo_col = root_publication.element&.collections&.select { |c| c['ancestry'].to_i == User.find(root_publication.published_by).publication_embargo_collection.id }
-          has_embargo_col && has_embargo_col.length > 0 ? has_embargo_col.first.label : ''
-        end
-
       end
 
       desc 'Get review list'
@@ -417,12 +396,18 @@ def find_embargo_collection(root_publication)
 
       desc 'Get embargo list'
       get 'embargo_list' do
-        if (current_user.type == 'Anonymous')
-          cols = Collection.where(id: current_user.sync_in_collections_users.pluck(:collection_id)).where.not(label: 'chemotion').order('label ASC')
+        if User.reviewer_ids.include?(current_user.id)
+          es = Publication.where(element_type: 'Collection', state: 'pending').order("taggable_data->>'label' ASC")
         else
-          cols = Collection.where(ancestry: current_user.publication_embargo_collection.id).order('label ASC')
+          if (current_user.type == 'Anonymous')
+            cols = Collection.where(id: current_user.sync_in_collections_users.pluck(:collection_id)).where.not(label: 'chemotion')
+          else
+            cols = Collection.where(ancestry: current_user.publication_embargo_collection.id)
+          end
+          es = Publication.where(element_type: 'Collection', element_id: cols.pluck(:id)).order("taggable_data->>'label' ASC") unless cols.empty?
         end
-        { repository: cols, current_user: { id: current_user.id, type: current_user.type } }
+
+        { repository: es, current_user: { id: current_user.id, type: current_user.type } }
       end
 
       namespace :assign_embargo do
@@ -445,7 +430,7 @@ def find_embargo_collection(root_publication)
           end
         end
         post do
-          embargo_collection = fetch_embargo_collection(@p_embargo.to_i) if @p_embargo.to_i >= 0
+          embargo_collection = fetch_embargo_collection(@p_embargo.to_i. current_user) if @p_embargo.to_i >= 0
           case @p_element['type'].classify
           when 'Sample'
             CollectionsSample
@@ -583,13 +568,14 @@ def find_embargo_collection(root_publication)
           error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
         end
         get do
-          sample = Sample.where(id: params[:id])
-          .includes(:molecule,:tag).last
+          sample = Sample.where(id: params[:id]).includes(:molecule,:tag).last
           molecule = Molecule.find(sample.molecule_id) unless sample.nil?
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
+          # embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{sample.id}")&.first&.label
+
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: sample,
@@ -856,7 +842,7 @@ def save_comment(root, comment)
         post do
           @license = params[:license]
           @publication_tag = create_publication_tag(current_user, @author_ids, @license)
-          @embargo_collection = fetch_embargo_collection(params[:embargo]) if params[:embargo].present? && params[:embargo] >= 0
+          @embargo_collection = fetch_embargo_collection(params[:embargo], current_user) if params[:embargo].present? && params[:embargo] >= 0
           pub = prepare_sample_data
           pub.process_element
           update_tag_doi(pub.element)
@@ -912,7 +898,7 @@ def save_comment(root, comment)
         post do
           @license = params[:license]
           @publication_tag = create_publication_tag(current_user, @author_ids, @license)
-          @embargo_collection = fetch_embargo_collection(params[:embargo]) if params[:embargo].present? && params[:embargo] >= 0
+          @embargo_collection = fetch_embargo_collection(params[:embargo], current_user) if params[:embargo].present? && params[:embargo] >= 0
           pub = prepare_reaction_data
           pub.process_element
           update_tag_doi(pub.element)
@@ -1041,7 +1027,7 @@ def save_comment(root, comment)
         post do
           @license = params[:license]
           @publication_tag = create_publication_tag(current_user, @author_ids, @license)
-          @embargo_collection = fetch_embargo_collection(params[:embargo]) if params[:embargo].present? && params[:embargo] >= 0
+          @embargo_collection = fetch_embargo_collection(params[:embargo], current_user) if params[:embargo].present? && params[:embargo] >= 0
           pub = prepare_reaction_data
           pub.process_element
           pub.inform_users
@@ -1077,8 +1063,9 @@ def remove_anonymous(col)
           end
 
           def remove_embargo_collection(col)
-           col.sync_collections_users.destroy_all
-           col.really_destroy!
+            col&.publication.really_destroy!
+            col.sync_collections_users.destroy_all
+            col.really_destroy!
           end
 
         end
@@ -1088,9 +1075,12 @@ def remove_embargo_collection(col)
         end
 
         after_validation do
-          @embargo_collection = Collection.find(params[:collection_id])
-          @sync_emb_col = @embargo_collection.sync_collections_users.where(user_id: current_user.id)&.first
-          error!('404 found no collection', 404) unless @sync_emb_col
+          @embargo_collection = Collection.find_by(id: params[:collection_id])
+          error!('404 collection not found', 404) unless @embargo_collection
+          unless User.reviewer_ids.include?(current_user.id)
+            @sync_emb_col = @embargo_collection.sync_collections_users.where(user_id: current_user.id)&.first
+            error!('404 found no collection', 404) unless @sync_emb_col
+          end
         end
 
         get :list do
@@ -1155,32 +1145,45 @@ def remove_embargo_collection(col)
 
         post :release do
           begin
-
-            pub_samples = Publication.where(ancestry: nil, element: @embargo_collection.samples).order(updated_at: :desc)
-            pub_reactions = Publication.where(ancestry: nil, element: @embargo_collection.reactions).order(updated_at: :desc)
-            pub_list = pub_samples + pub_reactions
-            check_state = pub_list.select { |pub| pub.state != Publication::STATE_ACCEPTED }
-            if check_state.present?
-              { error: "Embargo #{@embargo_collection.label} release failed, because not all elements have been 'accepted'."}
+            col_pub = @embargo_collection.publication
+            if col_pub.nil? ||  col_pub.published_by != current_user.id
+              { error: "only the owner of embargo #{@embargo_collection.label} can perform the release."}
             else
-              pub_list.each { |pub| element_submit(pub) }
-              remove_anonymous(@embargo_collection)
-              handle_embargo_collections(@embargo_collection)
-              case ENV['PUBLISH_MODE']
-              when 'production'
-                if Rails.env.production?
-                  ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
+              col_pub.update(accepted_at: Time.now.utc)
+              refresh_embargo_metadata(params[:collection_id])
+              pub_samples = Publication.where(ancestry: nil, element: @embargo_collection.samples).order(updated_at: :desc)
+              pub_reactions = Publication.where(ancestry: nil, element: @embargo_collection.reactions).order(updated_at: :desc)
+              pub_list = pub_samples + pub_reactions
+
+              check_state = pub_list.select { |pub| pub.state != Publication::STATE_ACCEPTED }
+              if check_state.present?
+                { error: "Embargo #{@embargo_collection.label} release failed, because not all elements have been 'accepted'."}
+              else
+                scheme_only_list = pub_list.select { |pub| pub.taggable_data['scheme_only']  == true }
+                if pub_list.flatten.length == scheme_only_list.flatten.length
+                  col_pub.update(state: 'scheme_only')
+                else
+                  col_pub.update(state: 'accepted')
                 end
-              when 'staging'
-                ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
-                # ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
-              else 'development'
-              end
 
+                pub_list.each { |pub| element_submit(pub) }
+                remove_anonymous(@embargo_collection)
+                handle_embargo_collections(@embargo_collection)
+                case ENV['PUBLISH_MODE']
+                when 'production'
+                  if Rails.env.production?
+                    ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
+                  end
+                when 'staging'
+                  # ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
+                  ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
+                else 'development'
+                end
 
-              { message: "Embargo #{@embargo_collection.label} has been released" }
-            end
 
+                { message: "Embargo #{@embargo_collection.label} has been released" }
+              end
+            end
           rescue StandardError => e
             { error: e.message }
           end
@@ -1201,11 +1204,16 @@ def remove_embargo_collection(col)
           end
         end
 
+        post :refresh do
+          @id = params[:id]
+          refresh_embargo_metadata(params[:collection_id])
+        end
+
         post :move do
           begin
             # @new_embargo = params[:new_embargo]
             @element = params[:element]
-            @new_embargo_collection = fetch_embargo_collection(params[:new_embargo]&.to_i) if params[:new_embargo].present? && params[:new_embargo]&.to_i >= 0
+            @new_embargo_collection = fetch_embargo_collection(params[:new_embargo]&.to_i, current_user) if params[:new_embargo].present? && params[:new_embargo]&.to_i >= 0
             case @element['type']
             when 'Sample'
               CollectionsSample
diff --git a/app/api/entities/reaction_entity.rb b/app/api/entities/reaction_entity.rb
index 21385dc63..f31004246 100644
--- a/app/api/entities/reaction_entity.rb
+++ b/app/api/entities/reaction_entity.rb
@@ -18,6 +18,7 @@ class ReactionEntity < ApplicationEntity
       expose! :starting_materials,                                                      using: 'Entities::ReactionMaterialEntity'
       expose! :type
       expose :comment_count
+      expose! :embargo, if: -> (obj, opts) { obj.respond_to? :embargo}
 
     end
 
diff --git a/app/api/helpers/embargo_helpers.rb b/app/api/helpers/embargo_helpers.rb
new file mode 100644
index 000000000..8fbcb9c5d
--- /dev/null
+++ b/app/api/helpers/embargo_helpers.rb
@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+# A helper for submission
+module EmbargoHelpers
+  extend Grape::API::Helpers
+
+  def refresh_embargo_metadata(col_id)
+    pub = Publication.find_by(element_type: 'Collection', element_id: col_id)
+    col = pub&.element
+    if col.present?
+      ps = Publication.where(element_type: 'Sample', ancestry: nil, element_id: col.samples&.pluck(:id))
+      pr = Publication.where(element_type: 'Reaction', ancestry: nil, element_id: col.reactions&.pluck(:id))
+
+      creators = []
+      author_ids = []
+      affiliation_ids = []
+      contributors = {}
+      affiliations = []
+      eids = []
+      dois = []
+
+      (ps + pr)&.each do |pu|
+        if pu.taggable_data['scheme_only']  == true
+        else
+          eids.push(pu.id)
+          dois.push({ id: pu.id, element_type: pu.element_type, element_id: pu.element_id, doi: pu.doi.full_doi }) if pu.doi.present?
+          ctag = pu.taggable_data || {}
+          creators << ctag["creators"]
+          author_ids << ctag["author_ids"]
+          affiliation_ids << ctag["affiliation_ids"]
+          contributors = ctag["contributors"]
+        end
+      end
+      affiliations = Affiliation.where(id: affiliation_ids.flatten)
+      affiliations_output = {}
+      affiliations.each do |aff|
+        affiliations_output[aff.id] = aff.output_full
+      end
+
+      tag = pub.taggable_data || {}
+      tag["creators"] = creators.flatten.uniq
+      tag["author_ids"] = author_ids.flatten.uniq
+      tag["affiliation_ids"] = affiliation_ids.flatten.uniq
+      tag["contributors"] = contributors
+      tag["affiliations"] = affiliations_output
+      tag["eids"] = eids
+      tag["element_dois"] = dois
+      pub.update!(taggable_data: tag)
+      pub.persit_datacite_metadata_xml!
+      pub
+    end
+  end
+
+  def fetch_embargo_collection(cid, current_user)
+    if (cid == 0)
+      chemotion_user = User.chemotion_user
+      new_col_label = current_user.initials + '_' + Time.now.strftime('%Y-%m-%d')
+      col_check = Collection.where([' label like ? ', new_col_label + '%'])
+      new_col_label = new_col_label << '_' << (col_check&.length + 1)&.to_s if col_check&.length.positive?
+      new_embargo_col = Collection.create!(user: chemotion_user, label: new_col_label, ancestry: current_user.publication_embargo_collection.id)
+      SyncCollectionsUser.find_or_create_by(user: current_user, shared_by_id: chemotion_user.id, collection_id: new_embargo_col.id,
+      permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10,
+      fake_ancestry: current_user.publication_embargo_collection.sync_collections_users.first.id.to_s)
+      #embargo = Embargo.create!(name: new_embargo_col.label, collection_id: new_embargo_col.id, created_by: current_user.id)
+      d = Doi.create_for_element!(new_embargo_col)
+      Publication.create!(
+        state: Publication::STATE_PENDING,
+        element: new_embargo_col,
+        published_by: current_user.id,
+        doi: d,
+        taggable_data: { label: new_embargo_col.label, col_doi: d.full_doi }
+      )
+      new_embargo_col
+    else
+      Collection.find(cid)
+    end
+  end
+
+
+
+  def find_embargo_collection(root_publication)
+    has_embargo_col = root_publication.element&.collections&.select { |c| c['ancestry'].to_i == User.find(root_publication.published_by).publication_embargo_collection.id }
+    has_embargo_col && has_embargo_col.length > 0 ? has_embargo_col.first.label : ''
+  end
+
+  def create_embargo()
+  end
+
+end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index c5ed30c72..8082ac181 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -1,6 +1,157 @@
 module RepositoryHelpers
   extend Grape::API::Helpers
 
+  def get_pub_reaction(id)
+    reaction = Reaction.where('id = ?', id)
+    .select(
+      <<~SQL
+      reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
+      reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
+      reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
+      reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
+      (select label from publication_collections where (elobj ->> 'element_type')::text = 'Reaction' and (elobj ->> 'element_id')::integer = reactions.id) as embargo,
+      (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
+      reactions.duration
+      SQL
+    )
+    .includes(
+          container: :attachments
+    ).last
+    literatures = get_literature(reaction.id,'Reaction') || []
+    reaction.products.each do |p|
+      literatures += get_literature(p.id,'Sample')
+    end
+
+    pub = Publication.find_by(element_type: 'Reaction', element_id: reaction.id)
+    pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
+    infos = {}
+    ana_infos = {}
+    pd_infos = {}
+    pub.descendants.each do |pp|
+      review = pp.review || {}
+      info = review['info'] || {}
+      next if info.empty?
+      if pp.element_type == 'Sample'
+        pd_infos[pp.element_id] = info['comment']
+      else
+        ana_infos[pp.element_id] = info['comment']
+      end
+    end
+
+    schemeList = get_reaction_table(reaction.id)
+    entities = Entities::ReactionEntity.represent(reaction, serializable: true)
+    entities[:products].each do |p|
+      pub_product = p
+      p[:xvialCom] = build_xvial_com(p[:molecule][:inchikey], current_user&.id)
+      pub_product_tag = pub_product[:tag]['taggable_data']
+      next if pub_product_tag.nil?
+
+      xvial = pub_product_tag['xvial'] && pub_product_tag['xvial']['num']
+      next unless xvial.present?
+
+      unless current_user.present? && User.reviewer_ids.include?(current_user.id)
+        pub_product_tag['xvial']['num'] = 'x'
+      end
+      p[:xvialCom][:hasSample] = true
+    end
+    entities[:publication]['review']['history'] = []
+    entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
+    entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
+    entities[:isLogin] = current_user.present?
+    entities[:embargo] = reaction.embargo
+    entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
+    entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
+    entities[:elementType] = 'reaction'
+    entities
+  end
+
+  def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
+    molecule = Molecule.find(id)
+    xvial_com = build_xvial_com(molecule.inchikey, current_user&.id)
+    pub_id = Collection.public_collection_id
+    if adv_flag.present? && adv_flag == true && adv_type.present? && adv_type == 'Authors' && adv_val.present?
+      adv = <<~SQL
+        INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
+        and rs.author_id in ('#{adv_val.join("','")}')
+      SQL
+    else
+      adv = ''
+    end
+
+    pub_samples = Collection.public_collection.samples
+      .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
+      .where(
+        <<~SQL
+          samples.id in (
+            SELECT samples.id FROM samples
+            INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+            INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+            #{adv}
+          )
+        SQL
+      )
+      .select(
+        <<~SQL
+        samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
+        SQL
+      )
+      .order('published_at desc')
+    published_samples = pub_samples.map do |s|
+      containers = Entities::ContainerEntity.represent(s.container)
+      tag = s.tag.taggable_data['publication']
+      #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
+      #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
+      #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
+      #aff = u.affiliations.first
+      next unless tag
+      literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
+        .joins("inner join users on literals.user_id = users.id")
+        .select(
+          <<~SQL
+          literatures.*,
+          json_object_agg(literals.id, literals.litype) as litype,
+          json_object_agg(literals.id, users.first_name || chr(32) || users.last_name) as ref_added_by
+          SQL
+        ).group('literatures.id').as_json
+      reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
+      pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
+      sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
+      xvial = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['num'] unless s.tag.taggable_data.nil?
+      if xvial.present?
+        unless current_user.present? && User.reviewer_ids.include?(current_user.id)
+          xvial = 'x'
+        end
+      end
+      pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
+      ana_infos = {}
+      pub.descendants.each do |pp|
+        review = pp.review || {}
+        info = review['info'] || {}
+        next if info.empty?
+        ana_infos[pp.element_id] = info['comment']
+      end
+      # em_sql = <<~SQL
+      #   inner join collections_samples cs on collections.id = cs.collection_id and cs.sample_id = #{s.id}
+      # SQL
+      embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
+
+      tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
+        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
+
+    end
+    x = published_samples.select { |s| s[:xvial].present? }
+    xvial_com[:hasSample] = x.length.positive?
+    published_samples = published_samples.flatten.compact
+    {
+      molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
+      published_samples: published_samples,
+      isLogin: current_user.nil? ? false : true,
+      isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false,
+      xvialCom: xvial_com,
+      elementType: 'molecule'
+    }
+  end
+
   def check_repo_review_permission(element)
     return true if User.reviewer_ids&.include? current_user.id
     pub = Publication.find_by(element_id: element.id, element_type: element.class.name)
diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index b32c6d8dc..a26e72f19 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -8,7 +8,6 @@ def max_attempts
   def perform(embargo_col_id)
     @embargo_collection = Collection.find(embargo_col_id)
     @sync_emb_col = @embargo_collection.sync_collections_users&.first
-
     pub_samples = Publication.where(ancestry: nil, element: @embargo_collection.samples).order(updated_at: :desc)
     pub_reactions = Publication.where(ancestry: nil, element: @embargo_collection.reactions).order(updated_at: :desc)
     @pub_list = pub_samples + pub_reactions
@@ -39,6 +38,12 @@ def perform(embargo_col_id)
         pub.transition_from_completing_to_completed!
       end
     end
+    pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
+    if pub_col.present? && pub_col.state == 'accepted'
+      pub_col.update(state: 'dc_doi_registering')
+      pub_col.transition_from_doi_registering_to_registered!
+      pub_col.update(state: 'completed')
+    end
 
     begin
       send_pubchem
diff --git a/app/models/collection.rb b/app/models/collection.rb
index c3d273542..8b6a2fec5 100644
--- a/app/models/collection.rb
+++ b/app/models/collection.rb
@@ -34,6 +34,7 @@ class Collection < ApplicationRecord
   acts_as_paranoid
   belongs_to :user, optional: true
   has_ancestry
+  include Publishing
 
   has_many :collections_samples, dependent: :destroy
   has_many :collections_reactions, dependent: :destroy
@@ -53,6 +54,7 @@ class Collection < ApplicationRecord
   has_many :shared_users, through: :sync_collections_users, source: :user
 
   has_one :metadata
+  has_one :doi, as: :doiable
 
   # A collection is locked if it is not allowed to rename or rearrange it
   scope :unlocked, -> { where(is_locked: false) }
diff --git a/app/models/doi.rb b/app/models/doi.rb
index 0a6debb78..9844b4fea 100644
--- a/app/models/doi.rb
+++ b/app/models/doi.rb
@@ -101,6 +101,8 @@ def self.create_for_element!(element, ik = nil)
     ik ||= case klass
            when 'Sample'
              element.molecule.inchikey
+           when 'Collection'
+             "collection/" + element.label
            when 'Reaction'
              "reaction/" + element.products_short_rinchikey_trimmed
            end
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 7c067a1b5..884d5284a 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -259,6 +259,27 @@ def publication_logger
   def doi_bag
     d = doi
     case element_type
+    when 'Collection'
+      dois = {
+        collection: {
+          DOI: d.full_doi,
+          suffix: d.suffix,
+          inchikey: d.inchikey,
+          count: d.molecule_count
+        },
+        element_dois: {}
+      }
+      eids = taggable_data["eids"]
+      eids.each do |eid|
+        sp = Publication.find(eid)
+        sd = sp.doi
+        dois[:element_dois][sp.element_id.to_s] = {
+          DOI: sd.full_doi,
+          suffix: sd.suffix,
+          type: sd.analysis_type,
+          count: sd.analysis_count
+        }
+      end
     when 'Sample'
       dois = {
         sample: {
@@ -459,6 +480,11 @@ def transition_from_doi_registering_to_registered!
         doi: short_doi
       }
       element.update_publication_tag(tag_data)
+    when 'Collection'
+      tag_data = {
+        doi_reg_at: doi_date,
+        doi: short_doi
+      }
     end
 
     pd = taggable_data.merge(tag_data)
diff --git a/app/models/publication_collections.rb b/app/models/publication_collections.rb
new file mode 100644
index 000000000..11a87c7a6
--- /dev/null
+++ b/app/models/publication_collections.rb
@@ -0,0 +1,16 @@
+# == Schema Information
+#
+# Table name: publication_collections
+#
+#  id           :integer
+#  state        :string
+#  element_id   :integer
+#  label        :text
+#  doi          :text
+#  elobj        :jsonb
+#  doi_id       :integer
+#  published_by :integer
+#
+
+class PublicationCollections < ApplicationRecord
+end
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 42f877063..2e9815b6e 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -230,14 +230,8 @@ export default class PublishReactionModal extends Component {
 
   loadBundles() {
     RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
+      const cols = result.repository || [];
+      this.setState({ bundles: cols });
     });
   }
 
@@ -603,7 +597,7 @@ export default class PublishReactionModal extends Component {
   render() {
     const { show } = this.props;
     const {
-      reaction, selectedUsers, selectedRefs, publishType
+      reaction, selectedUsers, selectedRefs, publishType, bundles
     } = this.state;
 
     const isFullyPublish = publishType.selected === publishOptions.f;
@@ -698,6 +692,13 @@ export default class PublishReactionModal extends Component {
         onChange: this.handlePublishTypeChange
       };
 
+
+      const opts = [];
+      bundles.forEach((col) => {
+        const tag = col.taggable_data || {};
+        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
+      });
+
       return (
         <div>
           <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
@@ -723,7 +724,7 @@ export default class PublishReactionModal extends Component {
             }}
             >
               <EmbargoCom
-                opts={this.state.bundles}
+                opts={opts}
                 selectedValue={selectedEmbargo}
                 onEmbargoChange={this.handleEmbargoChange}
                 selectedLicense={selectedLicense}
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index f8bd1a228..9630a80c4 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -93,14 +93,8 @@ export default class PublishSampleModal extends Component {
 
   loadBundles() {
     RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
+      const cols = result.repository || [];
+      this.setState({ bundles: cols });
     });
   }
 
@@ -418,6 +412,7 @@ export default class PublishSampleModal extends Component {
 
   render() {
     const { show, onHide, sample } = this.props;
+    const { bundles } = this.state;
     const canPublish = this.validateSubmission(); // this.validateAnalyses();
     const {
       showPreview,
@@ -435,6 +430,11 @@ export default class PublishSampleModal extends Component {
     } = this.state;
 
     if (show) {
+      const opts = [];
+      bundles.forEach((col) => {
+        const tag = col.taggable_data || {};
+        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
+      });
       return (
         <div>
           <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
@@ -445,7 +445,7 @@ export default class PublishSampleModal extends Component {
             </Modal.Header>
             <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
               <EmbargoCom
-                opts={this.state.bundles}
+                opts={opts}
                 selectedValue={selectedEmbargo}
                 onEmbargoChange={this.handleEmbargoChange}
                 selectedLicense={selectedLicense}
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 51c5eb0a6..8c909ea7b 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -132,6 +132,25 @@ class PublicActions {
     }
   }
 
+  displayCollection(id) {
+    return (dispatch) => { PublicFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayEmbargo(id) {
+    return (dispatch) => { PublicFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
   articles() {
     return (dispatch) => {
       fetch('/newsroom/index.json',
@@ -374,7 +393,18 @@ class PublicActions {
 
   getEmbargoElements(id) {
     return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElements(id)
+      PublicFetcher.fetchEmbargoElements(id)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getEmbargoElement(cid, el) {
+    return (dispatch) => {
+      PublicFetcher.fetchEmbargoElement(cid, el)
       .then((result) => {
         dispatch(result)
       }).catch((errorMessage) => {
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 881eb62bc..a644c6d7d 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -153,6 +153,27 @@ export default class PublicFetcher {
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
+  static fetchEmbargoElements(id) {
+    const api = `/api/v1/public/col_list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElement(cid, el) {
+    const api = `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargo(id) {
+    const api = `/api/v1/public/embargo.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
   static queryPid(params) {
     const api = `/api/v1/public/pid/`
 
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index a20b9d02f..3c26ed88a 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -62,6 +62,19 @@ export default class RepositoryFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+  static refreshEmbargo(emb) {
+    const api = '/api/v1/repository/embargo/refresh';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id: emb.id, collection_id: emb.element_id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
 
   static assignEmbargo(embargoVal, element) {
     const api = '/api/v1/repository/assign_embargo';
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 81999b97d..9c7c2cef0 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -40,6 +40,7 @@ class PublicStore {
       handleDisplayDataset: PublicActions.displayDataset,
       handleDisplayMolecule: PublicActions.displayMolecule,
       handleDisplayReaction: PublicActions.displayReaction,
+      handleDisplayCollection: PublicActions.displayCollection,
       handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
       handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
       handleClose: PublicActions.close,
@@ -51,6 +52,7 @@ class PublicStore {
       handleDisplayHowTo: PublicActions.displayHowTo,
       handleGetElements: PublicActions.getElements,
       handleGetEmbargoElements: PublicActions.getEmbargoElements,
+      handleGetEmbargoElement: PublicActions.getEmbargoElement,
       handleDisplayReviewReaction: PublicActions.displayReviewReaction,
       handleDisplayReviewSample: PublicActions.displayReviewSample,
       handelReviewPublish: PublicActions.reviewPublish,
@@ -183,6 +185,16 @@ class PublicStore {
     Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
   }
 
+  handleDisplayCollection(collectionList) {
+    this.setState({
+      guestPage: 'collection',
+      elementType: 'collection',
+      queryId: collectionList.id,
+      selectEmbargo: collectionList.colData && collectionList.colData.col
+    });
+    Aviator.navigate(`/publications/collections/${collectionList.id}`, { silent: true });
+  }
+
   handleReceiveSearchresult(result) {
     this.setState({ ...result.publicMolecules });
   }
@@ -258,6 +270,10 @@ class PublicStore {
     });
   }
 
+  handleGetEmbargoElement(results) {
+    this.setState({ currentElement: results })
+  }
+
   handelUpdateComment(result) {
     this.setState({ historyInfo: result.history });
   }
@@ -311,21 +327,12 @@ class PublicStore {
   }
 
   handleFetchBundles(result) {
-    const cols = result.repository;
+    const bundles = result.repository || [];
+    // eslint-disable-next-line camelcase
     const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push({ value: col.id, name: col.label, label: col.label });
-      });
-      this.setState({
-        bundles, current_user, elements: [], currentElement: null
-      });
-    } else {
-      this.setState({
-        bundles: [], current_user, elements: [], currentElement: null
-      });
-    }
+    this.setState({
+      bundles, current_user, elements: [], currentElement: null
+    });
   }
 
   handleRefreshEmbargoBundles(result) {
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 58322f170..fcf9ce05d 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -13,6 +13,7 @@ import Navigation from './Navigation';
 import XHome from '../components/extra/HomeXHome';
 import Notifications from '../components/Notifications';
 import RepoEmbargo from './RepoEmbargo';
+import RepoCollection from './RepoCollection';
 import RepoHome from './RepoHome';
 import RepoPubl from './RepoPubl';
 import RepoReview from './RepoReview';
@@ -81,6 +82,8 @@ class Home extends Component {
         return <RepoPubl />;
       case 'review':
         return <RepoReview />;
+      case 'collection':
+        return <RepoCollection />;
       case 'embargo':
         return <RepoEmbargo />;
       case 'dataset':
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
new file mode 100644
index 000000000..c4a17aa33
--- /dev/null
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -0,0 +1,220 @@
+import React, { Component } from 'react';
+import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import uuid from 'uuid';
+import RepoCollectionDetails from './RepoCollectionDetails';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { MetadataModal, InfoModal } from './RepoEmbargoModal';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+
+const SvgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+const infoTag = (el, la) => {
+  let authorInfo = '';
+  authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{el.published_by}</div></div>);
+  return (
+    <Row key={`list-reaction-info-${el.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`${el.type === 'Reaction' ? 'CRR' : 'CRS'}-${el.pub_id}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div className="item_xvial">{la}</div>
+        </div>
+      </OverlayTrigger>
+      {authorInfo}
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{el.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{el.ana_cnt || 0}</div>
+      </div>
+    </Row>
+  );
+};
+
+const Elist = (cid, la, el, selectEmbargo = null, user = null, currentElement = null) => {
+  if (!el) {
+    return '';
+  }
+  let listClass;
+  if (el.type === 'Reaction') {
+    listClass = (currentElement !== null && currentElement.publication && currentElement.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
+  } else {
+    listClass = (currentElement !== null && currentElement.published_samples && currentElement.published_samples[0] && currentElement.published_samples[0].id === el.id) ? 'list_focus_on' : 'list_focus_off';
+  }
+  return (
+    <Col md={currentElement ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => PublicActions.getEmbargoElement(cid, el)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${el.id}`}>
+          <Col md={12}>
+            <SVG src={SvgPath(el.svg, el.type)} className="layout_svg_reaction" key={el.svg} height={300} />
+          </Col>
+        </Row>
+        {infoTag(el, la)}
+      </div>
+    </Col>
+  );
+
+};
+
+export default class RepoCollection extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      current_user: {},
+      currentElement: null,
+      selectEmbargo: null,
+      showInfoModal: false,
+      showMetadataModal: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleInfoShow = this.handleInfoShow.bind(this);
+    this.handleInfoClose = this.handleInfoClose.bind(this);
+    this.handleMetadataShow = this.handleMetadataShow.bind(this);
+    this.handleMetadataClose = this.handleMetadataClose.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    // this.setState(prevState => ({ ...prevState, ...state }));
+    if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {
+      this.setState({ selectEmbargo: state.selectEmbargo });
+
+      PublicFetcher.fetchEmbargoElements(state.selectEmbargo.element_id)
+        .then((result) => {
+          this.setState({ elements: result.elements });
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    }
+
+    if (state.currentElement !== this.state.currentElement) {
+      this.setState({ currentElement: state.currentElement });
+    }
+  }
+
+
+  handleInfoShow() {
+    this.setState({ showInfoModal: true });
+  }
+
+  handleInfoClose() {
+    this.setState({ showInfoModal: false });
+  }
+
+  handleMetadataShow() {
+    this.setState({ showMetadataModal: true });
+  }
+
+  handleMetadataClose() {
+    this.setState({ showMetadataModal: false });
+  }
+
+  renderSearch() {
+    const { selectEmbargo, elements } = this.state;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const doiaa = (selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.col_doi) || '';
+
+    const actionButtons =
+      (
+        <span style={{ float: 'right' }}>
+          <ButtonToolbar>
+            <Button
+              id="all-info-button"
+              disabled={selectEmbargo === null || (elements && elements.length === 0)}
+              onClick={() => this.handleMetadataShow()}
+            >
+              <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
+            </Button>
+            <Button
+              id="all-info-button"
+              disabled={selectEmbargo === null || (elements && elements.length === 0)}
+              onClick={() => this.handleInfoShow()}
+            >
+              <i className="fa fa-users" aria-hidden="true" />&nbsp;Info
+            </Button>
+          </ButtonToolbar>
+        </span>
+      );
+    const filterDropdown = (
+      <ButtonGroup>
+        {actionButtons}
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        <span><b>{la}&nbsp;</b></span>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      elements, currentElement, currentUser, showInfoModal, selectEmbargo, showMetadataModal
+    } = this.state;
+    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch()}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div className="public-list" style={{ backgroundColor: '#efefef' }}>
+            <Table className="sample-entries">
+              <tbody>
+                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, currentElement)) }
+              </tbody>
+            </Table>
+          </div>
+        </Col>
+        <Col
+          md={currentElement ? 8 : 0}
+        >
+          <div className="public-element">
+            <RepoCollectionDetails currentElement={currentElement} />
+          </div>
+          <InfoModal
+            key="info-modal"
+            showModal={showInfoModal}
+            selectEmbargo={selectEmbargo}
+            onCloseFn={this.handleInfoClose}
+          />
+          <MetadataModal
+            key="metadata-modal"
+            showModal={showMetadataModal}
+            label={la}
+            metadata={metadata}
+            onCloseFn={this.handleMetadataClose}
+            elementId={id}
+            elementType="Collection"
+          />
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
new file mode 100644
index 000000000..d36a0624b
--- /dev/null
+++ b/app/packs/src/libHome/RepoCollectionDetails.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoCollectionDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    const elementType = currentElement && currentElement.elementType;
+
+    switch (elementType) {
+      case 'reaction': return <RepoReactionDetails isPublished reaction={currentElement} />;
+      case 'molecule': return <RepoSampleDetails isPublished element={currentElement} />;
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>);
+  }
+}
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index a497a4c1f..e973083ec 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -479,7 +479,7 @@ const SvgPath = (svg, type) => {
   return 'images/wild_card/no_image_180.svg';
 };
 
-const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) => {
+const ElAspect = (e, onClick, user = null, owner, currentElement = null, onMoveClick) => {
   if (!e) {
     return '';
   }
@@ -502,7 +502,7 @@ const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) =
         </span>
         &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
         {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
-        &nbsp;{user !== null && user.type === 'Anonymous' ? '' : MoveEmbargoedBundle(e, onMoveClick)}
+        &nbsp;{user !== null && user.id != owner ? '' : MoveEmbargoedBundle(e, onMoveClick)}
         <div>
           <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
         </div>
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 7a5f934c7..6ff77b927 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, Label, ButtonGroup, Button, ButtonToolbar, Modal, Panel, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Select from 'react-select';
 import { findIndex, filter } from 'lodash';
 import RepoEmbargoDetails from './RepoEmbargoDetails';
@@ -7,12 +7,15 @@ import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
 import { ElAspect } from './RepoCommon';
 import { ConfirmModal } from '../components/common/ConfirmModal';
+import { MetadataModal, InfoModal } from './RepoEmbargoModal';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import { label } from 'react-dom-factories';
 
 const renderMenuItems = (bundles) => {
   if (bundles.length < 1) return <div />;
   const menu = bundles.map(bundle => (
-    <MenuItem key={bundle.value} eventKey={bundle.value}>
-      {bundle.label}
+    <MenuItem key={bundle.element_id} eventKey={bundle.element_id}>
+      {bundle.taggable_data && bundle.taggable_data.label}
     </MenuItem>
   ));
   return menu;
@@ -31,6 +34,8 @@ export default class RepoEmbargo extends Component {
       bundles: [],
       showConfirmModal: false,
       showMoveModal: false,
+      showInfoModal: false,
+      showMetadataModal: false,
     };
     this.onChange = this.onChange.bind(this);
     this.handleElementSelection = this.handleElementSelection.bind(this);
@@ -40,6 +45,10 @@ export default class RepoEmbargo extends Component {
     this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
     this.handleMoveShow = this.handleMoveShow.bind(this);
     this.handleMoveClose = this.handleMoveClose.bind(this);
+    this.handleInfoShow = this.handleInfoShow.bind(this);
+    this.handleInfoClose = this.handleInfoClose.bind(this);
+    this.handleMetadataShow = this.handleMetadataShow.bind(this);
+    this.handleMetadataClose = this.handleMetadataClose.bind(this);
     this.loadBundles = this.loadBundles.bind(this);
     this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
   }
@@ -56,9 +65,16 @@ export default class RepoEmbargo extends Component {
   onChange(state) {
     this.setState(prevState => ({ ...prevState, ...state }));
     if (this.state.selectEmbargo !== null) {
-      const vaildSelect = state.bundles.find(b => b.value === this.state.selectEmbargo.value);
+      const vaildSelect = state.bundles.find(b => b.element_id === this.state.selectEmbargo.element_id);
       if (typeof (vaildSelect) === 'undefined') {
         this.setState({ selectEmbargo: null });
+      } else {
+        RepositoryFetcher.refreshEmbargo(this.state.selectEmbargo || {})
+          .then((result) => {
+            if (!result.error) this.setState({ selectEmbargo: result });
+          }).catch((errorMessage) => {
+            console.log(errorMessage);
+          });
       }
     }
   }
@@ -79,6 +95,22 @@ export default class RepoEmbargo extends Component {
     this.setState({ showMoveModal: false, moveElement: {} });
   }
 
+  handleInfoShow() {
+    this.setState({ showInfoModal: true });
+  }
+
+  handleInfoClose() {
+    this.setState({ showInfoModal: false });
+  }
+
+  handleMetadataShow() {
+    this.setState({ showMetadataModal: true });
+  }
+
+  handleMetadataClose() {
+    this.setState({ showMetadataModal: false });
+  }
+
   handleEmbargoChange(selectedValue) {
     if (selectedValue) {
       this.setState({ newEmbargo: selectedValue });
@@ -87,40 +119,45 @@ export default class RepoEmbargo extends Component {
 
   handleElementSelection(eventKey, event) {
     const { bundles } = this.state;
-    const selectEmbargo = bundles.find(b => b.value === eventKey);
+    const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
     this.setState({ selectEmbargo });
-    PublicActions.getEmbargoElements(eventKey);
+    PublicActions.getEmbargoElements(eventKey.value);
   }
 
   handleEmbargoAccount() {
-    const { selectEmbargo } = this.state;
+    const { selectEmbargo, current_user } = this.state;
 
     if (selectEmbargo === null) {
       alert('Please select an embargo first!');
+    } else if (current_user.id !== selectEmbargo.published_by) {
+      alert('only the submitter can generate a temporary account!');
     } else {
-      PublicActions.generateEmbargoAccount(selectEmbargo.value);
-      alert(`A temporary account for [${selectEmbargo.label}] has been created. The details have been sent to you by e-mail.`);
+      PublicActions.generateEmbargoAccount(selectEmbargo.element_id);
+      alert(`A temporary account for [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been created. The details have been sent to you by e-mail.`);
     }
   }
 
   handleEmbargoRelease() {
-    const { selectEmbargo } = this.state;
-
+    const { selectEmbargo, current_user } = this.state;
     if (selectEmbargo === null) {
       alert('Please select an embargo first!');
+    } else if (current_user.id !== selectEmbargo.published_by) {
+      alert('only the submitter can perform the release!');
     } else {
-      PublicActions.releaseEmbargo(selectEmbargo.value);
-      alert(`The embargo on [${selectEmbargo.label}] has been released!`);
+      PublicActions.releaseEmbargo(selectEmbargo.element_id);
+      alert(`The embargo on [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been released!`);
     }
   }
 
   handleEmbargoDelete(shouldPerform) {
     if (shouldPerform) {
-      const { selectEmbargo } = this.state;
+      const { selectEmbargo, current_user } = this.state;
       if (selectEmbargo === null) {
         alert('Please select an embargo first!');
+      } else if (current_user.id !== selectEmbargo.published_by) {
+        alert('only the submitter can delete the release!');
       } else {
-        PublicActions.deleteEmbargo(selectEmbargo.value);
+        PublicActions.deleteEmbargo(selectEmbargo.element_id);
       }
     }
     this.setState({ showConfirmModal: false });
@@ -128,7 +165,7 @@ export default class RepoEmbargo extends Component {
 
   handleMoveEmbargo() {
     const { selectEmbargo, moveElement, newEmbargo } = this.state;
-    PublicActions.moveEmbargo(selectEmbargo.value, newEmbargo, moveElement);
+    PublicActions.moveEmbargo(selectEmbargo.element_id, newEmbargo, moveElement);
     this.setState({ showMoveModal: false });
   }
 
@@ -140,46 +177,86 @@ export default class RepoEmbargo extends Component {
     const { selectEmbargo, elements, current_user } = this.state;
     const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
     const customClass = '.btn-unified';
-    const actionButtons = current_user.type === 'Anonymous' ? <span /> :
+
+    const options = [];
+
+    bundles.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const filterDropdown = (
+      <div className="home-adv-search">
+        <Select
+          value={selectEmbargo && selectEmbargo.element_id}
+          onChange={e => this.handleElementSelection(e)}
+          options={options}
+          style={{ width: '180px' }}
+        />
+      <ButtonGroup>
+        <Button
+          id="all-info-button"
+          disabled={selectEmbargo === null || elements.length === 0}
+          onClick={() => this.handleMetadataShow()}
+        >
+          <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
+        </Button>
+        <Button
+          id="all-info-button"
+          disabled={selectEmbargo === null || elements.length === 0}
+          onClick={() => this.handleInfoShow()}
+        >
+          <i className="fa fa-users" aria-hidden="true" />&nbsp;Info
+        </Button>
+      </ButtonGroup>
+      </div>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  rendeActionBtn(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const customClass = '.btn-unified';
+
+    const actionButtons = (!selectEmbargo || !current_user || (current_user.id !== selectEmbargo.published_by)) ? <span /> :
       (
         <span>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length === 0}
-            onClick={() => this.handleEmbargoAccount()}
-          >
-            <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
-          </Button>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
-            onClick={() => this.handleEmbargoRelease()}
-          >
-            <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
-          </Button>
-          <Button
-            bsStyle="danger"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length !== 0}
-            onClick={() => this.onClickDelete()}
-          >
-            <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
-          </Button>
+          <ButtonToolbar>
+            <Button
+              bsStyle="primary"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || elements.length === 0}
+              onClick={() => this.handleEmbargoAccount()}
+            >
+              <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
+            </Button>
+            <Button
+              bsStyle="warning"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
+              onClick={() => this.handleEmbargoRelease()}
+            >
+              <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
+            </Button>
+            <Button
+              bsStyle="danger"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || elements.length !== 0}
+              onClick={() => this.onClickDelete()}
+            >
+              <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
+            </Button>
+          </ButtonToolbar>
         </span>
       );
     const filterDropdown = (
       <ButtonGroup>
-        <DropdownButton
-          className={customClass}
-          id="embargo-inner-dropdown"
-          title={selectEmbargo === null ? 'Embargo Bundle' : selectEmbargo.label}
-          style={{ width: '180px' }}
-          onSelect={this.handleElementSelection}
-        >
-          {renderMenuItems(bundles)}
-        </DropdownButton>
         {actionButtons}
       </ButtonGroup>
     );
@@ -195,10 +272,16 @@ export default class RepoEmbargo extends Component {
   // render modal
   renderMoveModal() {
     const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
-    const defaultBundles = [
+    const options = [
       { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
     ];
-    const allBundles = defaultBundles.concat(filter(bundles, b => b.name !== (selectEmbargo == null ? '' : selectEmbargo.name)));
+
+    bundles.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const allBundles = filter(options, b => b.value !== (selectEmbargo == null ? '' : selectEmbargo.element_id));
 
     return (
       <Modal
@@ -214,7 +297,7 @@ export default class RepoEmbargo extends Component {
             <Panel bsStyle="success">
               <Panel.Heading>
                 <Panel.Title>
-                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.label}] to :
+                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.taggable_data.label}] to :
                 </Panel.Title>
               </Panel.Heading>
               <Panel.Body>
@@ -240,8 +323,13 @@ export default class RepoEmbargo extends Component {
 
   render() {
     const {
-      elements, bundles, currentElement, currentUser, showConfirmModal
+      elements, bundles, currentElement, currentUser, showConfirmModal, showInfoModal, selectEmbargo, showMetadataModal
     } = this.state;
+    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
+    const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
+    const owner = (selectEmbargo && selectEmbargo.published_by) || 0;
+
     return (
       <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
         <Col md={currentElement ? 4 : 12} >
@@ -253,10 +341,11 @@ export default class RepoEmbargo extends Component {
             <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
               <Table striped className="review-entries">
                 <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, currentElement, this.handleMoveShow)) }
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, owner, currentElement, this.handleMoveShow)) }
                 </tbody>
               </Table>
             </div>
+            {this.rendeActionBtn(bundles)}
           </div>
           <ConfirmModal
             showModal={showConfirmModal}
@@ -271,6 +360,19 @@ export default class RepoEmbargo extends Component {
         >
           <RepoEmbargoDetails />
           { this.renderMoveModal() }
+          <InfoModal
+            showModal={showInfoModal}
+            selectEmbargo={selectEmbargo}
+            onCloseFn={this.handleInfoClose}
+          />
+          <MetadataModal
+            showModal={showMetadataModal}
+            label={la}
+            metadata={metadata}
+            onCloseFn={this.handleMetadataClose}
+            elementId={id}
+            elementType="Collection"
+          />
         </Col>
       </Row>
     );
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
new file mode 100644
index 000000000..c0e051b4d
--- /dev/null
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Label, Modal, ButtonToolbar } from 'react-bootstrap';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import {
+  AffiliationList,
+  AuthorList,
+  ChemotionId,
+  CommentBtn,
+  ContributorInfo,
+  DateInfo,
+  Doi,
+  IconLicense,
+  IconToMyDB,
+  RenderPublishAnalysesPanel,
+  SidToPubChem,
+  ToggleIndicator,
+  ElStateLabel
+} from './RepoCommon';
+import { AffiliationMap } from './RepoReviewCommon';
+
+const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {
+  return (
+    <div>
+      <Modal
+        show={showModal}
+        onHide={onCloseFn}
+        dialogClassName="news-preview-dialog"
+      >
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div><h4><Label>{label}</Label></h4></div>
+          <div style={{ maxHeight: '50vh', overflow: 'auto', whiteSpace: 'pre', backgroundColor: 'black', color: 'white', fontFamily: 'monospace' }}>
+            {metadata}
+          </div>
+          <br />
+          <ButtonToolbar>
+            <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
+            <Button bsStyle="primary" onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}> Download</Button>
+          </ButtonToolbar>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+MetadataModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired
+};
+
+const ElementDoi = (edois, isPublished) => {
+  if (edois == null || typeof edois === 'undefined' || edois.length === 0) {
+    return (<div />);
+  }
+  const dois = edois.map(edoi => {
+    return (<div><Doi type={edoi.element_type} id={edoi.element_id} doi={edoi.doi || ''} isPublished={isPublished} /></div>)
+  });
+
+  return (
+    <div>
+      {dois}
+    </div>
+  )
+}
+
+const InfoModal = ({ showModal, selectEmbargo, onCloseFn }) => {
+  const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};
+  const affiliationMap = AffiliationMap(tag.affiliation_ids);
+  const doi = tag.col_doi || '';
+  const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+  const isPublished = true;
+  const author_ids = tag.author_ids || [];
+  const id = (selectEmbargo && selectEmbargo.elementId) || 0;
+  return (
+    <div>
+      <Modal
+        show={showModal}
+        onHide={onCloseFn}
+        dialogClassName="news-preview-dialog"
+      >
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div><h4><Label>{la}</Label></h4></div>
+          <div>
+            <ContributorInfo contributor={tag.contributors} />
+            <h5>
+              <b>Author{author_ids.length > 1 ? 's' : ''}: </b>
+              <AuthorList creators={tag.creators} affiliationMap={affiliationMap} />
+            </h5>
+            <AffiliationList
+              affiliations={tag.affiliations}
+              affiliationMap={affiliationMap}
+            />
+            <Doi type="collection" id={id} doi={doi} isPublished={isPublished} />
+            {ElementDoi(tag.element_dois, isPublished)}
+          </div>
+          <br />
+          <ButtonToolbar>
+            <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
+          </ButtonToolbar>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+export { MetadataModal, InfoModal };
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 91a50dc25..272dacbe2 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -3,6 +3,7 @@ import {
   Panel,
   Row,
   Col,
+  Button,
   Jumbotron,
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
@@ -442,6 +443,16 @@ export default class RepoReactionDetails extends Component {
     const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
     const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
 
+    let embargo = (<span />);
+    if (reaction.embargo) {
+      embargo = (
+        <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${reaction.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+          <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
+        </Button>
+      );
+    }
+
+
     return (
       <div style={{ border: 'none' }}>
         <div >
@@ -479,6 +490,7 @@ export default class RepoReactionDetails extends Component {
             />
             {showDOI}
             <ChemotionId id={pubData.id} type="reaction" />
+            {embargo}
             <h5>
               <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
               <b>Reference{references.length > 1 ? 's' : null}: </b>
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 55bc2bebd..293954f25 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -119,6 +119,15 @@ export default class RepoSample extends Component {
       : <h5><b>Name: </b> {sample.showed_name} </h5>;
     const userInfo = sample.pub_info || '';
     const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
+    let embargo = (<span />);
+    if (sample.embargo) {
+      embargo = (
+        <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+          <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
+        </Button>
+      );
+    }
+
     return (
       <Jumbotron key={`sample-${sample.id}`}>
         <span className="repo-pub-sample-header">
@@ -151,6 +160,7 @@ export default class RepoSample extends Component {
             </Button>
           ))}
         </h5>
+        {embargo}
         <h5>
           <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
           <b>Reference{references.length > 1 ? 's' : null}: </b>
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 596111041..3773d6f3c 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -138,6 +138,15 @@ const routes = {
     '/:reactionId': 'show'
   },
 
+  '/collection': {
+    target: {
+      show: function(e) {
+        PublicActions.displayCollection(e.params.collectionId)
+      },
+    },
+    '/:collectionId': 'show'
+  },
+
   '/pid': {
     target: {
       show: function(e) {
diff --git a/app/publish/datacite_metadata_collection.html.erb b/app/publish/datacite_metadata_collection.html.erb
new file mode 100644
index 000000000..d70212d20
--- /dev/null
+++ b/app/publish/datacite_metadata_collection.html.erb
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+  <identifier identifierType="DOI">https://dx.doi.org/<%= "#{pub_tag['col_doi']}" %></identifier>
+  <creators>
+    <% pub_tag['creators'].each do |creator| %>
+    <creator>
+      <creatorName nameType="Personal"><%= creator['familyName'] %>, <%= creator['givenName'] %></creatorName>
+      <givenName><%= creator['givenName'] %></givenName>
+      <familyName><%= creator['familyName'] %></familyName>
+      <% if creator['ORCID'].present? %>
+      <nameIdentifier schemeURI="https://orcid.org/" nameIdentifierScheme="ORCID"><%=creator['ORCID']%></nameIdentifier>
+      <% end %>
+      <% if (aff_ids = creator['affiliationIds']).present? then aff_ids.each do |aff_id| %>
+      <affiliation><%=pub_tag['affiliations'][aff_id.to_s]%></affiliation>
+      <% end %>
+      <% end %>
+    </creator>
+    <% end %>
+  </creators>
+  <titles>
+    <title xml:lang="en-US"><%= pub_tag['label'] %></title>
+  </titles>
+  <publisher>chemotion.net</publisher>
+  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <% if pub_tag['contributors'].present? %>
+  <contributors>
+    <contributor contributorType="Researcher">
+      <contributorName><%= pub_tag['contributors']['familyName'] %>, <%= pub_tag['contributors']['givenName'] %></contributorName>
+      <givenName><%= pub_tag['contributors']['givenName'] %></givenName>
+      <familyName><%= pub_tag['contributors']['familyName'] %></familyName>
+      <% if pub_tag['contributors']['ORCID'].present? %>
+      <nameIdentifier schemeURI="https://orcid.org/" nameIdentifierScheme="ORCID"><%=pub_tag['contributors']['ORCID']%></nameIdentifier>
+      <% end %>
+      <% if pub_tag['contributors'] && pub_tag['contributors']['affiliations'].present? then pub_tag['contributors']['affiliations'].each do |aff| %>
+      <affiliation><%= aff %></affiliation>
+      <% end %>
+      <% end %>
+    </contributor>
+  </contributors>
+  <% end %>
+  <dates>
+    <date dateType="Submitted"><%= pub.created_at %></date>
+    <date dateType="Accepted"><%= pub.accepted_at %></date>
+  </dates>
+  <subjects>
+    <subject>Chemistry</subject>
+  </subjects>
+  <language>en</language>
+  <resourceType resourceTypeGeneral="Collection">Collection</resourceType>
+  <version>1</version>
+  <descriptions>
+    <description xml:lang="en-US" descriptionType="Abstract">
+      This contains experimental data from a collection (<%= pub_tag['label'] %>)
+    </description>
+  </descriptions>
+  <relatedIdentifiers>
+    <% dois[:element_dois].each do |_, ds| %>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart">https://dx.doi.org/<%= "#{ds[:DOI]}" %></relatedIdentifier>
+    <% end %>
+  </relatedIdentifiers>
+</resource>
diff --git a/app/serializers/reaction_public_list_serializer.rb b/app/serializers/reaction_public_list_serializer.rb
new file mode 100644
index 000000000..7ac3ebc3b
--- /dev/null
+++ b/app/serializers/reaction_public_list_serializer.rb
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# reaction list class for guest
+class ReactionPublicListSerializer < ActiveModel::Serializer
+  attributes :id, :name, :reaction_svg_file, :xvial_count, :xvial_com, :embargo, :publication
+
+  def xvial_count
+    return 1
+    xvial_count = <<~SQL
+      inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+    SQL
+    ReactionsSample.joins(xvial_count).where(type: 'ReactionsProductSample', reaction_id: id).length
+  end
+
+  def xvial_com
+    com_config = Rails.configuration.compound_opendata
+    return -1 unless com_config.present?
+
+    return -2 unless com_config.allowed_uids.include?(scope&.current_user&.id)
+    return -2
+    xvial_com = <<~SQL
+      inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+      inner join molecules m on m.id = s.molecule_id
+      inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+    SQL
+    ReactionsSample.joins(xvial_com).where(type: 'ReactionsProductSample', reaction_id: id).length
+  end
+
+  def embargo
+    return ''
+    embargo = <<~SQL
+      inner join collections_reactions cr on collections.id = cr.collection_id and cr.reaction_id = #{id}
+    SQL
+    Collection.joins(embargo).where("ancestry in (select c.id::text from collections c where c.label = 'Published Elements')")&.first&.label
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index fe9c5d7d1..fcadaaa1d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -143,6 +143,8 @@
       url = "#{url}reactions/#{element.id}"
     when 'Container'
       url =  "#{url}datasets/#{element.id}"
+    when 'Collection'
+      url = "#{url}collections/#{element.id}"
     end
     url
   }
@@ -187,6 +189,10 @@
     end
   }
 
+  get '/collections/:id' => redirect { |params, request|
+    "/home/collection/#{params[:id]}"
+  }
+
   get '/reactions/:id' => redirect { |params, request|
     "/home/publications/reactions/#{params[:id]}"
   }
diff --git a/db/migrate/20220330103001_build_embargo_doi.rb b/db/migrate/20220330103001_build_embargo_doi.rb
new file mode 100644
index 000000000..6a3123656
--- /dev/null
+++ b/db/migrate/20220330103001_build_embargo_doi.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Create generic elements
+class BuildEmbargoDoi < ActiveRecord::Migration[5.2]
+  def change
+    su_id = User.chemotion_user.id
+    acols = Collection.joins("INNER JOIN collections acol ON acol.id = collections.ancestry::int").where("acol.label = 'Embargoed Publications'")
+    acols.each do |col|
+      if Publication.where("taggable_data->>'label' = '" + col.label + "'").length == 0
+        d = Doi.create_for_element!(col)
+        Publication.create!(
+          state: Publication::STATE_PENDING,
+          element: col,
+          created_at: col.created_at,
+          published_by: col.sync_collections_users&.first&.user_id || 0,
+          doi: d,
+          taggable_data: { label: col.label, col_doi: d.full_doi }
+        )
+      end
+    end
+  end
+end
diff --git a/db/migrate/20220426080445_create_publication_collections.rb b/db/migrate/20220426080445_create_publication_collections.rb
new file mode 100644
index 000000000..d7e1979f7
--- /dev/null
+++ b/db/migrate/20220426080445_create_publication_collections.rb
@@ -0,0 +1,5 @@
+class CreatePublicationCollections < ActiveRecord::Migration[5.2]
+  def change
+    create_view :publication_collections
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 6ce4c0f71..8f0061b1d 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1561,6 +1561,16 @@
              order by extended_metadata -> 'instrument' limit 10
            $function$
   SQL
+  create_function :literatures_by_element, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.literatures_by_element(element_type text, element_id integer)
+       RETURNS TABLE(literatures text)
+       LANGUAGE sql
+      AS $function$
+         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
+         where l.literature_id = l2.id
+         and l.element_type = $1 and l.element_id = $2
+       $function$
+  SQL
 
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
@@ -1624,4 +1634,16 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
+  create_view "publication_collections", sql_definition: <<-SQL
+      SELECT p.id,
+      p.state,
+      p.element_id,
+      (p.taggable_data ->> 'label'::text) AS label,
+      (p.taggable_data ->> 'col_doi'::text) AS doi,
+      jsonb_array_elements((p.taggable_data -> 'element_dois'::text)) AS elobj,
+      p.doi_id,
+      p.published_by
+     FROM publications p
+    WHERE ((p.deleted_at IS NULL) AND ((p.element_type)::text = 'Collection'::text));
+  SQL
 end
diff --git a/db/views/publication_collections_v01.sql b/db/views/publication_collections_v01.sql
new file mode 100644
index 000000000..9960b7397
--- /dev/null
+++ b/db/views/publication_collections_v01.sql
@@ -0,0 +1,3 @@
+select id, state, element_id, taggable_data->>'label' as label, taggable_data->>'col_doi' as doi,
+jsonb_array_elements(taggable_data ->'element_dois') as elobj, doi_id, published_by
+from publications p where deleted_at isnull and element_type = 'Collection'

From 36e3eed2812cba78d1883acca80794c97172eee5 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 17 May 2022 00:32:34 +0200
Subject: [PATCH 060/258] Collection DOI

---
 app/api/chemotion/public_api.rb              |  2 +-
 app/api/helpers/repository_helpers.rb        |  5 ---
 app/jobs/chemotion_embargo_pubchem_job.rb    | 26 ++++++++++---
 app/models/container.rb                      |  2 +-
 app/models/publication.rb                    |  2 +-
 app/packs/src/libHome/ContainerComponent.js  |  4 +-
 app/packs/src/libHome/NavFooter.js           |  1 -
 app/packs/src/libHome/NavHead.js             |  1 -
 app/packs/src/libHome/Navigation.js          |  8 +---
 app/packs/src/libHome/RepoCollection.js      |  8 ++--
 app/packs/src/libHome/RepoCommon.js          | 11 ++++--
 app/packs/src/libHome/RepoEmbargo.js         | 13 ++-----
 app/packs/src/libHome/RepoEmbargoModal.js    | 40 +++++++++++++-------
 app/packs/src/libHome/RepoReactionDetails.js |  9 +++--
 app/packs/src/libHome/RepoSample.js          |  9 +++--
 15 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 21ac258aa..23dfe050d 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -765,7 +765,7 @@ def query_embargo(name)
         desc "metadata of publication"
         params do
           requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction container]
+          requires :type, type: String, desc: "Type", values: %w[sample reaction container collection]
         end
         after_validation do
           @publication = Publication.find_by(
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 8082ac181..8948b0de8 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -130,14 +130,9 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
         next if info.empty?
         ana_infos[pp.element_id] = info['comment']
       end
-      # em_sql = <<~SQL
-      #   inner join collections_samples cs on collections.id = cs.collection_id and cs.sample_id = #{s.id}
-      # SQL
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
-
       tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
         sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
-
     end
     x = published_samples.select { |s| s[:xvial].present? }
     xvial_com[:hasSample] = x.length.positive?
diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index a26e72f19..84f252068 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -38,12 +38,6 @@ def perform(embargo_col_id)
         pub.transition_from_completing_to_completed!
       end
     end
-    pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
-    if pub_col.present? && pub_col.state == 'accepted'
-      pub_col.update(state: 'dc_doi_registering')
-      pub_col.transition_from_doi_registering_to_registered!
-      pub_col.update(state: 'completed')
-    end
 
     begin
       send_pubchem
@@ -69,6 +63,26 @@ def perform(embargo_col_id)
       PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
       raise e
     end
+
+    begin
+      pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
+      if pub_col.present? && pub_col.state == 'accepted'
+        pub_col.transition_from_start_to_metadata_uploading!
+        pub_col.transition_from_metadata_uploading_to_uploaded!
+        pub_col.transition_from_metadata_uploaded_to_doi_registering!
+        pub_col.transition_from_doi_registering_to_registered!
+        pub_col.transition_from_doi_registered_to_completing!
+        pub_col.transition_from_completing_to_completed!
+      end
+    rescue StandardError => e
+      Delayed::Worker.logger.error <<~TXT
+      ---------  #{self.class.name} send collection DOI error ------------
+        Error Message:  #{e}
+      --------------------------------------------------------------------
+      TXT
+      raise e
+    end
+
   end
 
   def remove_publish_pending
diff --git a/app/models/container.rb b/app/models/container.rb
index 28113784f..e11295e96 100644
--- a/app/models/container.rb
+++ b/app/models/container.rb
@@ -106,7 +106,7 @@ def unassociate_doi(d = self.doi)
 
   def check_doi
     # unassoicate doi if type has changed
-    if (d = self.doi) && self.container_type == 'analysis'
+    if (d = self.doi) && self.container_type == 'analysis' && self.publication&.state != 'completed'
       if self.extended_metadata['kind']&.delete(' ') != d.analysis_type
         unassociate_doi(d)
       end
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 884d5284a..e6570bd0d 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -533,7 +533,7 @@ def transition_from_completing_to_completed!
     return unless valid_transition(STATE_COMPLETED)
     pd = {}
     time = DateTime.now
-    if element_type != 'Container'
+    if element_type != 'Container' && element_type != 'Collection'
       creator_ids = taggable_data['author_ids']
       su_id = User.chemotion_user.id
 
diff --git a/app/packs/src/libHome/ContainerComponent.js b/app/packs/src/libHome/ContainerComponent.js
index 0c19871fd..423da5e6a 100644
--- a/app/packs/src/libHome/ContainerComponent.js
+++ b/app/packs/src/libHome/ContainerComponent.js
@@ -1,5 +1,5 @@
-import React, {Component} from 'react';
-import {Col, FormControl,FormGroup, ControlLabel} from 'react-bootstrap';
+import React, { Component } from 'react';
+import { Col, FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
 import Select from 'react-select'
 import ContainerDatasets from '../components/ContainerDatasets';
 import QuillViewer from '../components/QuillViewer'
diff --git a/app/packs/src/libHome/NavFooter.js b/app/packs/src/libHome/NavFooter.js
index a1e4c8073..77d7acdcf 100644
--- a/app/packs/src/libHome/NavFooter.js
+++ b/app/packs/src/libHome/NavFooter.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Nav, NavItem } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
 
 const NavFooter = () => {
   return (
diff --git a/app/packs/src/libHome/NavHead.js b/app/packs/src/libHome/NavHead.js
index eaf9cb46e..b36f5007a 100644
--- a/app/packs/src/libHome/NavHead.js
+++ b/app/packs/src/libHome/NavHead.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions'
 
 const Title = <span><img alt="chemotion-" src="/images/repo/logo.png" style={{ width: '20%' }} /> Repository</span>
 
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 09fbcc1bf..2ae4e531d 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -1,18 +1,12 @@
 import React from 'react';
-import { Nav, Navbar, NavItem, Label } from 'react-bootstrap';
+import { Nav, Navbar, NavItem } from 'react-bootstrap';
 import UserAuth from '../components/UserAuth';
-import ManagingActions from '../components/managing_actions/ManagingActions';
-import ContextActions from '../components/contextActions/ContextActions';
 import UserStore from '../components/stores/UserStore';
 import UIStore from '../components/stores/UIStore';
 import UserActions from '../components/actions/UserActions';
-import UIActions from '../components/actions/UIActions';
-import ElementActions from '../components/actions/ElementActions';
 import NavNewSession from './NavNewSession';
 import NavHead from './NavHead';
 import DocumentHelper from '../components/utils/DocumentHelper';
-import NavigationModal from '../components/NavigationModal';
-import PublicActions from '../components/actions/PublicActions';
 
 export default class Navigation extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index c4a17aa33..b9102c782 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -133,7 +133,6 @@ export default class RepoCollection extends Component {
   renderSearch() {
     const { selectEmbargo, elements } = this.state;
     const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
-    const doiaa = (selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.col_doi) || '';
 
     const actionButtons =
       (
@@ -151,7 +150,10 @@ export default class RepoCollection extends Component {
               disabled={selectEmbargo === null || (elements && elements.length === 0)}
               onClick={() => this.handleInfoShow()}
             >
-              <i className="fa fa-users" aria-hidden="true" />&nbsp;Info
+              <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
+            </Button>
+            <Button href="/home/publications" target="_blank">
+              back to all publications
             </Button>
           </ButtonToolbar>
         </span>
@@ -164,7 +166,7 @@ export default class RepoCollection extends Component {
 
     return (
       <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        <span><b>{la}&nbsp;</b></span>
+        <span><b>The data on this page refers to the data collection: &nbsp;{la}&nbsp;</b></span>
         {filterDropdown}
       </div>
     );
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index e973083ec..bdf705b86 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -24,7 +24,7 @@ import Clipboard from 'clipboard';
 import moment from 'moment';
 import Select from 'react-select';
 import uuid from 'uuid';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
 import ContainerComponent from './ContainerComponent';
 import Formula from '../components/common/Formula';
 import HelpInfo from '../components/common/HelpInfo';
@@ -238,7 +238,7 @@ const isNmrPass = (analysis, sample) => {
 };
 
 const DownloadMetadataBtn = (l) => {
-  const contentUrl = `/api/v1/public/metadata/download?type=${l.type}&id=${l.id}`;
+  const contentUrl = `/api/v1/public/metadata/download?type=${l.type.toLowerCase()}&id=${l.id}`;
   return (
     <OverlayTrigger
       placement="bottom"
@@ -860,10 +860,14 @@ class ClipboardCopyLink extends Component {
 
 class ClipboardCopyBtn extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.clipboard = new Clipboard('.clipboardBtn');
   }
 
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
   render() {
     return (
       <OverlayTrigger
@@ -2236,7 +2240,6 @@ const Doi = (props) => {
   const {
     type, id, doi, isPublished
   } = props;
-
   let data = '';
   const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
   if (isPublished) {
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 6ff77b927..1170b0693 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, Label, ButtonGroup, Button, ButtonToolbar, Modal, Panel, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Table, Col, Row, Navbar, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
 import Select from 'react-select';
-import { findIndex, filter } from 'lodash';
+import { filter } from 'lodash';
 import RepoEmbargoDetails from './RepoEmbargoDetails';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
@@ -9,7 +9,6 @@ import { ElAspect } from './RepoCommon';
 import { ConfirmModal } from '../components/common/ConfirmModal';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
 import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import { label } from 'react-dom-factories';
 
 const renderMenuItems = (bundles) => {
   if (bundles.length < 1) return <div />;
@@ -176,8 +175,6 @@ export default class RepoEmbargo extends Component {
   renderSearch(bundles) {
     const { selectEmbargo, elements, current_user } = this.state;
     const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const customClass = '.btn-unified';
-
     const options = [];
 
     bundles.forEach((col) => {
@@ -206,7 +203,7 @@ export default class RepoEmbargo extends Component {
           disabled={selectEmbargo === null || elements.length === 0}
           onClick={() => this.handleInfoShow()}
         >
-          <i className="fa fa-users" aria-hidden="true" />&nbsp;Info
+          <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
         </Button>
       </ButtonGroup>
       </div>
@@ -222,8 +219,6 @@ export default class RepoEmbargo extends Component {
   rendeActionBtn(bundles) {
     const { selectEmbargo, elements, current_user } = this.state;
     const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const customClass = '.btn-unified';
-
     const actionButtons = (!selectEmbargo || !current_user || (current_user.id !== selectEmbargo.published_by)) ? <span /> :
       (
         <span>
@@ -326,7 +321,7 @@ export default class RepoEmbargo extends Component {
       elements, bundles, currentElement, currentUser, showConfirmModal, showInfoModal, selectEmbargo, showMetadataModal
     } = this.state;
     const id = (selectEmbargo && selectEmbargo.element_id) || 0;
-    const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
     const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
     const owner = (selectEmbargo && selectEmbargo.published_by) || 0;
 
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index c0e051b4d..116e609b5 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -1,25 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Label, Modal, ButtonToolbar } from 'react-bootstrap';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import Utils from '../components/utils/Functions';
 import {
   AffiliationList,
   AuthorList,
-  ChemotionId,
-  CommentBtn,
   ContributorInfo,
-  DateInfo,
-  Doi,
-  IconLicense,
-  IconToMyDB,
-  RenderPublishAnalysesPanel,
-  SidToPubChem,
-  ToggleIndicator,
-  ElStateLabel
+  DownloadMetadataBtn
 } from './RepoCommon';
 import { AffiliationMap } from './RepoReviewCommon';
 
+const Doi = (props) => {
+  const {
+    type, id, doi
+  } = props;
+
+  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
+  const data = (
+    <span>
+      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
+        {doi}
+      </Button>
+      <DownloadMetadataBtn type={type} id={id} />
+    </span>
+  );
+  return (
+    <h5>
+      <b>{title} </b>
+      {data}
+    </h5>
+  );
+};
+
 const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {
+  const contentUrl = `/api/v1/public/metadata/download?type=${elementType.toLowerCase()}&id=${elementId}`;
   return (
     <div>
       <Modal
@@ -35,7 +49,7 @@ const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, eleme
           <br />
           <ButtonToolbar>
             <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
-            <Button bsStyle="primary" onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}> Download</Button>
+            <Button bsStyle="primary" onClick={() => Utils.downloadFile({ contents: contentUrl })}> Download</Button>
           </ButtonToolbar>
         </Modal.Body>
       </Modal>
@@ -70,7 +84,7 @@ const InfoModal = ({ showModal, selectEmbargo, onCloseFn }) => {
   const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
   const isPublished = true;
   const author_ids = tag.author_ids || [];
-  const id = (selectEmbargo && selectEmbargo.elementId) || 0;
+  const id = (selectEmbargo && selectEmbargo.element_id) || 0;
   return (
     <div>
       <Modal
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 272dacbe2..856ff2a05 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -446,9 +446,12 @@ export default class RepoReactionDetails extends Component {
     let embargo = (<span />);
     if (reaction.embargo) {
       embargo = (
-        <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${reaction.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
-          <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
-        </Button>
+        <span>
+          <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
+          <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${reaction.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+            <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
+          </Button>
+        </span>
       );
     }
 
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 293954f25..0938cf337 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -122,9 +122,12 @@ export default class RepoSample extends Component {
     let embargo = (<span />);
     if (sample.embargo) {
       embargo = (
-        <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
-          <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
-        </Button>
+        <span>
+          <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
+          <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+            <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
+          </Button>
+        </span>
       );
     }
 

From ef18f791262ec50641266459ba2869b815b39408 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 31 May 2022 14:35:24 +0200
Subject: [PATCH 061/258] Resolve "upgrade datacite schema"

---
 app/models/publication.rb                            | 12 +++++++++++-
 app/publish/datacite_metadata_analysis.html.erb      |  2 +-
 app/publish/datacite_metadata_collection.html.erb    |  2 +-
 app/publish/datacite_metadata_container.html.erb     |  2 +-
 app/publish/datacite_metadata_reaction.html.erb      |  5 ++++-
 .../datacite_metadata_reaction_container.html.erb    |  2 +-
 app/publish/datacite_metadata_sample.html.erb        |  5 ++++-
 .../datacite_metadata_sample_container.html.erb      |  2 +-
 8 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/models/publication.rb b/app/models/publication.rb
index e6570bd0d..46a91d65d 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -387,9 +387,19 @@ def rights_data
   end
 
   def datacite_metadata_xml
+    if parent.nil? && %w[Sample Reaction].include?(element_type)
+      coly = element.collections.where(
+        <<~SQL
+          collections.id in (select element_id from publications pub where element_type = 'Collection' and element_id = collections.id)
+        SQL
+      ).last
+      cdoi = coly.publication&.doi&.full_doi if coly.present?
+    end
+
     parent_element = parent&.element
     literals = ActiveRecord::Base.connection.exec_query(literals_sql(element_id, element_type))
-    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals)
+    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals, col_doi: cdoi)
+
     erb_file = if element_type == 'Container'
                  "app/publish/datacite_metadata_#{parent_element.class.name.downcase}_#{element_type.downcase}.html.erb"
                else
diff --git a/app/publish/datacite_metadata_analysis.html.erb b/app/publish/datacite_metadata_analysis.html.erb
index eea171a19..8cb238c85 100644
--- a/app/publish/datacite_metadata_analysis.html.erb
+++ b/app/publish/datacite_metadata_analysis.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
diff --git a/app/publish/datacite_metadata_collection.html.erb b/app/publish/datacite_metadata_collection.html.erb
index d70212d20..17738072d 100644
--- a/app/publish/datacite_metadata_collection.html.erb
+++ b/app/publish/datacite_metadata_collection.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{pub_tag['col_doi']}" %></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
diff --git a/app/publish/datacite_metadata_container.html.erb b/app/publish/datacite_metadata_container.html.erb
index 31b3ad1c6..bf12d32a6 100644
--- a/app/publish/datacite_metadata_container.html.erb
+++ b/app/publish/datacite_metadata_container.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
diff --git a/app/publish/datacite_metadata_reaction.html.erb b/app/publish/datacite_metadata_reaction.html.erb
index e6c2e0a48..c9ca6eab3 100644
--- a/app/publish/datacite_metadata_reaction.html.erb
+++ b/app/publish/datacite_metadata_reaction.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:reaction][:DOI]}" %></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
@@ -67,6 +67,9 @@
     <% dois['samples'].each do |sid, doi| %>
       <relatedIdentifier relatedIdentifierType="DOI" relationType="HasPart">https://dx.doi.org/<%= "#{doi[:sample][:DOI]}" %></relatedIdentifier>
     <% end %>
+    <% if col_doi.presence %>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{col_doi}" %></relatedIdentifier>
+    <% end %>
     <% lits.each do |ref| %>
       <relatedIdentifier relatedIdentifierType="<%=ref['relatedidentifiertype'].split(' {|} ').shift%>" relationType="<%=ref['relationtype']%>"><%=ref['relatedidentifiertype'].split(' {|} ').pop%></relatedIdentifier>
     <% end %>
diff --git a/app/publish/datacite_metadata_reaction_container.html.erb b/app/publish/datacite_metadata_reaction_container.html.erb
index 01774d179..40c97f262 100644
--- a/app/publish/datacite_metadata_reaction_container.html.erb
+++ b/app/publish/datacite_metadata_reaction_container.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index 5e05ad91f..1ff40951a 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:sample][:DOI]}" %></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>
@@ -66,6 +66,9 @@
     <% if parent_element.presence %>
       <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{parent_element.full_doi}" %></relatedIdentifier>
     <% end %>
+    <% if col_doi.presence %>
+      <relatedIdentifier relatedIdentifierType="DOI" relationType="IsPartOf">https://dx.doi.org/<%= "#{col_doi}" %></relatedIdentifier>
+    <% end %>
     <% lits.each do |ref| %>
       <relatedIdentifier relatedIdentifierType="<%=ref['relatedidentifiertype'].split(' {|} ').shift%>" relationType="<%=ref['relationtype']%>"><%=ref['relatedidentifiertype'].split(' {|} ').pop%></relatedIdentifier>
     <% end %>
diff --git a/app/publish/datacite_metadata_sample_container.html.erb b/app/publish/datacite_metadata_sample_container.html.erb
index 550c4ec9b..04199251f 100644
--- a/app/publish/datacite_metadata_sample_container.html.erb
+++ b/app/publish/datacite_metadata_sample_container.html.erb
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.3/metadata.xsd">
+<resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://datacite.org/schema/kernel-4" xsi:schemaLocation="http://datacite.org/schema/kernel-4 http://schema.datacite.org/meta/kernel-4.4/metadata.xsd">
   <identifier identifierType="DOI">https://dx.doi.org/<%= "#{dois[:analysis][:DOI]}"%></identifier>
   <creators>
     <% pub_tag['creators'].each do |creator| %>

From 311ff69119d8aab48dd6e1fac19ae111c2492028 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 24 Jun 2022 11:27:17 +0200
Subject: [PATCH 062/258] nmrshiftdb solvent

---
 app/api/chemotion/repository_api.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 50507b204..25a8134ca 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -354,9 +354,9 @@ def add_submission_history(root)
             pub_scope = pub_scope.where(published_by: params[:search_value])
           when 'Embargo'
             embargo_search = <<~SQL
-            (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.collection_id = ?))
+            (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.deleted_at is null and cr.collection_id = ?))
             or
-            (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.collection_id = ?))
+            (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.deleted_at is null and cs.collection_id = ?))
             SQL
             embargo_search = ActiveRecord::Base.send(:sanitize_sql_array, [embargo_search, params[:search_value], params[:search_value]])
             pub_scope = pub_scope.where(embargo_search)

From b94b3c601c3c22932d09edf8686f151bd7b55fe4 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 30 Jun 2022 00:09:02 +0200
Subject: [PATCH 063/258] add 'copy to clipboard' on collection doi

---
 app/packs/src/libHome/RepoEmbargoModal.js | 33 +++++++++--------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index 116e609b5..1a17ddf76 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Label, Modal, ButtonToolbar } from 'react-bootstrap';
+import { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Utils from '../components/utils/Functions';
 import {
   AffiliationList,
@@ -11,17 +11,17 @@ import {
 import { AffiliationMap } from './RepoReviewCommon';
 
 const Doi = (props) => {
-  const {
-    type, id, doi
-  } = props;
-
+  const { type, id, doi } = props;
   const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
   const data = (
     <span>
-      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
-        {doi}
-      </Button>
+      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>{doi}</Button>
       <DownloadMetadataBtn type={type} id={id} />
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_clipboard">copy to clipboard</Tooltip>}>
+        <Button onClick={() => { navigator.clipboard.writeText(`https://dx.doi.org/${doi}`); }} bsSize="xsmall" >
+          <i className="fa fa-clipboard" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
     </span>
   );
   return (
@@ -63,19 +63,10 @@ MetadataModal.propTypes = {
 };
 
 const ElementDoi = (edois, isPublished) => {
-  if (edois == null || typeof edois === 'undefined' || edois.length === 0) {
-    return (<div />);
-  }
-  const dois = edois.map(edoi => {
-    return (<div><Doi type={edoi.element_type} id={edoi.element_id} doi={edoi.doi || ''} isPublished={isPublished} /></div>)
-  });
-
-  return (
-    <div>
-      {dois}
-    </div>
-  )
-}
+  if (edois == null || typeof edois === 'undefined' || edois.length === 0) { return (<div />); }
+  const dois = edois.map(edoi => (<div key={`${edoi.element_type}_${edoi.element_id}`}><Doi type={edoi.element_type} id={edoi.element_id} doi={edoi.doi || ''} isPublished={isPublished} /></div>));
+  return (<div>{dois}</div>);
+};
 
 const InfoModal = ({ showModal, selectEmbargo, onCloseFn }) => {
   const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};

From 809a36b3e058891149f48bf3a5f9246315441942 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Sun, 10 Jul 2022 12:43:05 +0200
Subject: [PATCH 064/258] assign to embargo

---
 app/api/chemotion/repository_api.rb            |  4 ++--
 app/packs/src/components/stores/PublicStore.js |  4 ++--
 app/packs/src/libHome/RepoReview.js            | 17 ++++++++++++++---
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 25a8134ca..ee02b175a 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -430,7 +430,7 @@ def add_submission_history(root)
           end
         end
         post do
-          embargo_collection = fetch_embargo_collection(@p_embargo.to_i. current_user) if @p_embargo.to_i >= 0
+          embargo_collection = fetch_embargo_collection(@p_embargo.to_i, current_user) if @p_embargo.to_i >= 0
           case @p_element['type'].classify
           when 'Sample'
             CollectionsSample
@@ -1229,7 +1229,7 @@ def remove_embargo_collection(col)
             end.create_in_collection(@element['id'], [@new_embargo_collection.id])
 
             { col_id: @embargo_collection.id,
-              new_embargo: @new_embargo_collection,
+              new_embargo: @new_embargo_collection.publication,
               is_new_embargo: params[:new_embargo]&.to_i == 0,
               message: "#{@element['type']} [#{@element['title']}] has been moved from Embargo Bundle [#{@embargo_collection.label}] to Embargo Bundle [#{@new_embargo_collection.label}]" }
           rescue StandardError => e
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 9c7c2cef0..43910dfd8 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -341,7 +341,7 @@ class PublicStore {
     const bundles = [];
     if (cols && cols.length > 0) {
       cols.forEach((col) => {
-        bundles.push({ value: col.id, name: col.label, label: col.label });
+        bundles.push(col);
       });
     }
     this.setState({ bundles, current_user });
@@ -373,7 +373,7 @@ class PublicStore {
   handleEmbargoMove(results) {
     const { col_id, is_new_embargo, new_embargo, message } = results.result;
     if (is_new_embargo === true) {
-      this.bundles.push({value: new_embargo.id, name: new_embargo.label, label: new_embargo.label });
+      this.bundles.push(new_embargo);
     }
     alert(message);
     PublicActions.getEmbargoElements(col_id);
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index d860eb8fb..0ac5209d8 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import SVG from 'react-inlinesvg';
 import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import Select from 'react-select';
+import { filter } from 'lodash';
 import RepoReviewDetails from './RepoReviewDetails';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
@@ -371,9 +372,19 @@ export default class RepoReview extends Component {
   }
 
   renderEmabrgoModal() {
-    const { showEmbargoModal, bundles, selectedElement } = this.state;
-    const defaultBundles = [{ value: '0', name: 'new', label: '--Create a new Embargo Bundle--' }];
-    const allBundles = defaultBundles.concat(bundles);
+    const { showEmbargoModal, bundles, selectedElement, selectedEmbargo } = this.state;
+
+    const options = [
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+
+    bundles.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const allBundles = filter(options, b => b.value !== (selectedEmbargo == null ? '' : selectedEmbargo.element_id));
+
     const element = selectedElement || {};
     return (
       <Modal backdrop="static" show={showEmbargoModal}>

From 1fe8fa523489c929b0ceb7aa5bdada1e30ec41d8 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 13 Jul 2022 23:25:57 +0200
Subject: [PATCH 065/258] Resolve "publish when segment exist"

---
 app/api/chemotion/repository_api.rb                 |  2 ++
 app/packs/src/components/generic/SegmentDetails.js  |  2 +-
 db/functions/set_segment_klasses_identifier_v01.sql |  8 ++++++++
 .../20220712100000_add_segment_klass_identifier.rb  | 13 +++++++++++++
 ...reate_function_set_segment_klasses_identifier.rb |  5 +++++
 ...create_trigger_set_segment_klasses_identifier.rb |  5 +++++
 db/triggers/set_segment_klasses_identifier_v01.sql  |  3 +++
 7 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 db/functions/set_segment_klasses_identifier_v01.sql
 create mode 100644 db/migrate/20220712100000_add_segment_klass_identifier.rb
 create mode 100644 db/migrate/20220713115744_create_function_set_segment_klasses_identifier.rb
 create mode 100644 db/migrate/20220713115805_create_trigger_set_segment_klasses_identifier.rb
 create mode 100644 db/triggers/set_segment_klasses_identifier_v01.sql

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index ee02b175a..aea8fba33 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -93,6 +93,7 @@ def duplicate_sample(sample = @sample, analyses = @analyses, parent_publication_
           new_sample.collections << Collection.element_to_review_collection
           new_sample.collections << @embargo_collection unless @embargo_collection.nil?
           new_sample.save!
+          new_sample.save_segments(segments: sample.segments, current_user_id: current_user.id) if sample.segments
           unless @literals.nil?
             lits = @literals&.select { |lit| lit['element_type'] == 'Sample' && lit['element_id'] == sample.id }
             duplicate_literals(new_sample, lits)
@@ -158,6 +159,7 @@ def duplicate_reaction(reaction, analysis_set)
           dest = File.join(dir, new_rsf)
 
           new_reaction.save!
+          new_reaction.save_segments(segments: reaction.segments, current_user_id: current_user.id)
           unless @literals.nil?
             lits = @literals&.select { |lit| lit['element_type'] == 'Reaction' && lit['element_id'] == reaction.id }
             duplicate_literals(new_reaction, lits)
diff --git a/app/packs/src/components/generic/SegmentDetails.js b/app/packs/src/components/generic/SegmentDetails.js
index e75caca92..37c063ffc 100644
--- a/app/packs/src/components/generic/SegmentDetails.js
+++ b/app/packs/src/components/generic/SegmentDetails.js
@@ -35,7 +35,7 @@ const addSegmentTabs = (element, onChange, contentMap) => {
     if (idx < 0 && !klass.is_active) return;
     let segment = {};
     if (idx > -1) {
-      segment = element.segments[idx];
+      segment = new Segment(element.segments[idx]); // element.segments[idx];
     } else {
       segment = Segment.buildEmpty(cloneDeep(klass));
     }
diff --git a/db/functions/set_segment_klasses_identifier_v01.sql b/db/functions/set_segment_klasses_identifier_v01.sql
new file mode 100644
index 000000000..57cab0cee
--- /dev/null
+++ b/db/functions/set_segment_klasses_identifier_v01.sql
@@ -0,0 +1,8 @@
+create or replace function set_segment_klasses_identifier()
+returns trigger as
+$FUNC$
+begin
+	update segment_klasses set identifier = gen_random_uuid() where identifier is null;
+  return new;
+end
+$FUNC$ language plpgsql;
diff --git a/db/migrate/20220712100000_add_segment_klass_identifier.rb b/db/migrate/20220712100000_add_segment_klass_identifier.rb
new file mode 100644
index 000000000..76b880ad5
--- /dev/null
+++ b/db/migrate/20220712100000_add_segment_klass_identifier.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# Add column identifier into segment_klasses
+class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
+  def self.up
+    execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
+    add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
+  end
+
+  def self.down
+    remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
+  end
+end
diff --git a/db/migrate/20220713115744_create_function_set_segment_klasses_identifier.rb b/db/migrate/20220713115744_create_function_set_segment_klasses_identifier.rb
new file mode 100644
index 000000000..1a7cfc4f8
--- /dev/null
+++ b/db/migrate/20220713115744_create_function_set_segment_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateFunctionSetSegmentKlassesIdentifier < ActiveRecord::Migration[5.2]
+  def change
+    create_function :set_segment_klasses_identifier
+  end
+end
diff --git a/db/migrate/20220713115805_create_trigger_set_segment_klasses_identifier.rb b/db/migrate/20220713115805_create_trigger_set_segment_klasses_identifier.rb
new file mode 100644
index 000000000..5353e67a9
--- /dev/null
+++ b/db/migrate/20220713115805_create_trigger_set_segment_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateTriggerSetSegmentKlassesIdentifier < ActiveRecord::Migration[5.2]
+  def change
+    create_trigger :set_segment_klasses_identifier, on: :segment_klasses
+  end
+end
diff --git a/db/triggers/set_segment_klasses_identifier_v01.sql b/db/triggers/set_segment_klasses_identifier_v01.sql
new file mode 100644
index 000000000..f28be4654
--- /dev/null
+++ b/db/triggers/set_segment_klasses_identifier_v01.sql
@@ -0,0 +1,3 @@
+create trigger set_segment_klasses_identifier
+    after insert on segment_klasses
+    for each statement execute function set_segment_klasses_identifier();

From 471ce287b22635221d1dcd0d0d09b211fa91e4da Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 14 Jul 2022 11:44:45 +0200
Subject: [PATCH 066/258] default segment of reaction, segment for publication

---
 .../details/reactions/ReactionDetails.js      |  23 +-
 .../src/components/generic/GenericElCommon.js | 402 ++++++++++++++++++
 .../src/components/generic/SegmentDetails.js  |   2 +-
 3 files changed, 422 insertions(+), 5 deletions(-)
 create mode 100644 app/packs/src/components/generic/GenericElCommon.js

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 00dd01d66..d8847b8c1 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -646,21 +646,36 @@ export default class ReactionDetails extends Component {
 
 
     addSegmentTabs(reaction, this.handleSegmentsChange, tabContentsMap);
-
+    const stb = [];
     const tabContents = [];
     visible.forEach((value) => {
       const tabContent = tabContentsMap[value];
       if (tabContent) { tabContents.push(tabContent); }
+      stb.push(value);
+    });
+
+    let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+    segmentKlasses =
+      segmentKlasses.filter(s => s.element_klass && s.element_klass.name === reaction.type);
+    segmentKlasses.forEach((klass) => {
+      const visIdx = visible.indexOf(klass.label);
+      const idx = findIndex(reaction.segments, o => o.segment_klass_id === klass.id);
+      if (visIdx < 0 && idx > -1) {
+        const tabContent = tabContentsMap[klass.label];
+        if (tabContent) { tabContents.push(tabContent); }
+        stb.push(klass.label);
+      }
     });
 
     const { showPublishReactionModal } = this.state;
-    const submitLabel = (reaction && reaction.isNew) ? "Create" : "Save";
+    const submitLabel = (reaction && reaction.isNew) ? 'Create' : 'Save';
     const exportButton = (reaction && reaction.isNew) ? null : <ExportSamplesBtn type="reaction" id={reaction.id} />;
 
-    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
+    const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
+      this.state.activeTab) || visible[0];
     const panelStylePre = reaction.isPendingToSave ? 'info' : 'primary';
     const publication = reaction.tag && reaction.tag.taggable_data &&
-      reaction.tag.taggable_data.publication
+      reaction.tag.taggable_data.publication;
     const panelStyle = publication ? 'success' : panelStylePre;
 
     const validateObjs = reaction.validates && reaction.validates.filter(v => v.value === false);
diff --git a/app/packs/src/components/generic/GenericElCommon.js b/app/packs/src/components/generic/GenericElCommon.js
new file mode 100644
index 000000000..306f269a2
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElCommon.js
@@ -0,0 +1,402 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Col, PanelGroup, Row } from 'react-bootstrap';
+import { sortBy, findIndex } from 'lodash';
+import uuid from 'uuid';
+import { genUnits, unitConversion } from '../../admin/generic/Utils';
+import Attachment from '../models/Attachment';
+import {
+  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
+  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
+  GenPropertiesTextArea, GenPropertiesUpload, GenDummy, GenTextFormula, GenPropertiesTable
+} from './GenericPropertiesFields';
+
+const UploadInputChange = (properties, event, field, layer) => {
+  const files = [];
+  const fieldObj = properties.layers[`${layer}`].fields.find(e => e.field === field) || {};
+  const value = fieldObj.value || {};
+  switch (event.action) {
+    case 'l': {
+      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
+      const label = event && event.val && event.val.target && event.val.target.value;
+      if (value.files[valIdx] && label) value.files[valIdx].label = label;
+      break;
+    }
+    case 'f': {
+      (event.val || []).forEach((file) => {
+        const uid = uuid.v4();
+        if (typeof value.files === 'undefined' || value.files === null) value.files = [];
+        value.files.push({ uid, filename: file.name });
+        files.push({ uid, filename: file.name, file: Attachment.fromFile(file) });
+      });
+      break;
+    }
+    case 'd': {
+      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
+      if (valIdx >= 0 && value.files && value.files.length > 0) value.files.splice(valIdx, 1);
+      return [value, files, event.uid];
+    }
+    default:
+      console.log(event);
+  }
+  return [value, files];
+};
+
+
+const ShowProperties = (fObj, layers) => {
+  let showField = true;
+  if (fObj && fObj.cond_fields && fObj.cond_fields.length > 0) {
+    showField = false;
+    for (let i = 0; i < fObj.cond_fields.length; i += 1) {
+      const cond = fObj.cond_fields[i] || {};
+      const { layer, field, value } = cond;
+      if (field && field !== '') {
+        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field) || {};
+        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
+        (['true', 'yes', 't', '1'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) !== 'undefined' && fd.value === true)))) {
+          showField = true;
+          break;
+        } else if (['text', 'select'].includes(fd && fd.type) && (typeof (fd && fd.value) !== 'undefined' && ((fd && fd.value) || '').trim() == (value || '').trim())) {
+          showField = true;
+          break;
+        }
+      }
+    }
+  }
+  return showField;
+};
+
+const GenProperties = (opt) => {
+  const fieldProps = { ...opt, dndItems: [] };
+  const type = fieldProps.type.split('_');
+  if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text';
+
+  switch (type[0]) {
+    case 'checkbox':
+      return GenPropertiesCheckbox(fieldProps);
+    case 'formula-field':
+      return GenPropertiesCalculate(fieldProps);
+    case 'select':
+      return GenPropertiesSelect(fieldProps);
+    case 'drag':
+      fieldProps.dndItems = [...fieldProps.dndItems, type[1]];
+      return GenPropertiesDrop(fieldProps);
+    case 'integer':
+      return GenPropertiesNumber(fieldProps);
+    case 'system-defined':
+      return GenPropertiesSystemDefined(fieldProps);
+    case 'input-group':
+      return GenPropertiesInputGroup(fieldProps);
+    case 'textarea':
+      return GenPropertiesTextArea(fieldProps);
+    case 'upload':
+      return GenPropertiesUpload(fieldProps);
+    case 'dummy':
+      return GenDummy();
+    case 'table':
+      return GenPropertiesTable(fieldProps);
+    case 'text-formula':
+      return GenTextFormula(fieldProps);
+    default:
+      return GenPropertiesText(fieldProps);
+  }
+};
+
+const GenPropertiesSearch = opt => GenProperties({ ...opt, isSearchCriteria: true });
+
+class GenPropertiesLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubChange = this.handleSubChange.bind(this);
+  }
+
+  handleChange(e, f, k, t) {
+    this.props.onChange(e, f, k, t);
+  }
+
+  handleSubChange(e, id, f, valueOnly = false) {
+    const sub = f.sub_fields.find(m => m.id === id);
+    if (!valueOnly) {
+      if (e.type === 'system-defined') {
+        const units = genUnits(e.option_layers);
+        let uIdx = units.findIndex(u => u.key === e.value_system);
+        if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+        sub.value_system = units.length > 0 ? units[uIdx].key : '';
+        sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
+      } else {
+        sub.value = e.target.value;
+      }
+    }
+    const { layer } = this.props;
+    const obj = { f, sub };
+    this.props.onSubChange(layer.key, obj, valueOnly);
+  }
+
+  handleClick(keyLayer, obj, val) {
+    const units = genUnits(obj.option_layers);
+    let uIdx = units.findIndex(e => e.key === val);
+    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+    const update = obj;
+    update.value_system = units.length > 0 ? units[uIdx].key : '';
+    this.props.onClick(keyLayer, update);
+  }
+
+  views() {
+    const {
+      layer, selectOptions, id, layers, canUpdate
+    } = this.props;
+    const { cols, fields, key } = layer;
+    const perRow = cols || 1;
+    const col = Math.floor(12 / perRow);
+    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
+    const vs = [];
+    let op = [];
+    let newRow = 0;
+    let rowId = 1;
+    (fields || []).forEach((f, i) => {
+      if (ShowProperties(f, layers)) {
+        const unit = genUnits(f.option_layers)[0] || {};
+        const tabCol = (f.cols || 1) * 1;
+        const rCol = (f.type === 'table') ? (12 / (tabCol || 1)) : col;
+        newRow = (f.type === 'table') ? newRow += (perRow / (tabCol || 1)) : newRow += 1;
+
+        if (newRow > perRow) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+          newRow = (f.type === 'table') ? newRow = (perRow / (tabCol || 1)) : newRow = 1;
+        }
+        const eachCol = (
+          <Col key={`prop_${key}_${f.priority}_${f.field}`} md={rCol} lg={rCol} className={f.type === 'table' ? '' : klaz}>
+            <GenProperties
+              key={`${id}_${layer}_${f.field}_GenPropertiesLayer`}
+              layers={layers}
+              id={id}
+              layer={layer}
+              f_obj={f}
+              label={f.label}
+              value={f.value || ''}
+              description={f.description || ''}
+              type={f.type || 'text'}
+              field={f.field || 'field'}
+              formula={f.formula || ''}
+              options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
+              onChange={event => this.handleChange(event, f.field, key, f.type)}
+              onSubChange={this.handleSubChange}
+              isEditable
+              readOnly={!canUpdate || false}
+              isRequired={f.required || false}
+              placeholder={f.placeholder || ''}
+              option_layers={f.option_layers}
+              value_system={f.value_system || unit.key}
+              onClick={() => this.handleClick(key, f, (f.value_system || unit.key))}
+            />
+          </Col>
+        );
+        op.push(eachCol);
+        if (newRow % perRow === 0) newRow = 0;
+        if ((newRow === 0) || (fields.length === (i + 1))) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+        }
+      } else if (fields.length === (i + 1)) {
+        vs.push(<Row key={rowId}>{op}</Row>);
+        rowId += 1;
+        op = [];
+      }
+    });
+    return vs;
+  }
+
+  render() {
+    let bs = this.props.layer.color ? this.props.layer.color : 'default';
+    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
+    if (bs === 'none') bs = 'default';
+    const cl = this.props.layer.style ? this.props.layer.style : 'panel_generic_heading';
+    const panelHeader = this.props.layer.label === '' ? (<span />) : (
+      <Panel.Heading className={cl} >
+        <Panel.Title toggle>{this.props.layer.label}</Panel.Title>
+      </Panel.Heading>
+    );
+    return (
+      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
+        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
+          {panelHeader}
+          <Panel.Collapse>
+            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </PanelGroup>
+    );
+  }
+}
+
+GenPropertiesLayer.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  layer: PropTypes.object,
+  selectOptions: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onSubChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  layers: PropTypes.object.isRequired,
+  canUpdate: PropTypes.object
+};
+
+GenPropertiesLayer.defaultProps = {
+  id: 0, selectOptions: {}, onClick: () => {}, canUpdate: true
+};
+
+class GenPropertiesLayerSearchCriteria extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubChange = this.handleSubChange.bind(this);
+  }
+
+  handleChange(e, f, k, t) {
+    this.props.onChange(e, f, k, t);
+  }
+
+  handleSubChange(e, id, f) {
+    const sub = f.sub_fields.find(m => m.id === id);
+    if (e.type === 'system-defined') {
+      const units = genUnits(e.option_layers);
+      let uIdx = units.findIndex(u => u.key === e.value_system);
+      if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+      sub.value_system = units.length > 0 ? units[uIdx].key : '';
+      sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
+    } else {
+      sub.value = e.target.value;
+    }
+    const { layer } = this.props;
+    const obj = { f, sub };
+    this.props.onSubChange(layer.key, obj);
+  }
+
+  views() {
+    const { layer, selectOptions, layers } = this.props;
+    const { cols, fields, key } = layer;
+    const perRow = cols || 1;
+    const col = Math.floor(12 / perRow);
+    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
+    const vs = [];
+    let op = [];
+    (fields || []).forEach((f, i) => {
+      const unit = genUnits(f.option_layers)[0] || {};
+      const eCol = (
+        <Col key={`prop_${key}_${f.priority}_${f.field}`} md={col} lg={col} className={klaz}>
+          <GenPropertiesSearch
+            f_obj={f}
+            label={f.label}
+            value={f.value || ''}
+            type={f.type || 'text'}
+            field={f.field || 'field'}
+            options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
+            onChange={event => this.handleChange(event, f.field, key, f.type)}
+            onSubChange={this.handleSubChange}
+            option_layers={f.option_layers}
+            value_system={f.value_system || unit.key}
+            isEditable
+            readOnly={false}
+            isRequired={false}
+            layers={layers}
+          />
+        </Col>
+      );
+      op.push(eCol);
+      if (((i + 1) % perRow === 0) || (fields.length === (i + 1))) {
+        vs.push(<Row key={`prop_row_${key}_${f.priority}_${f.field}`}>{op}</Row>);
+        op = [];
+      }
+    });
+    return vs;
+  }
+
+  render() {
+    return (
+      <Panel className="panel_generic_properties" defaultExpanded>
+        <Panel.Heading><Panel.Title toggle>{this.props.layer.label}</Panel.Title></Panel.Heading>
+        <Panel.Collapse><Panel.Body>{this.views()}</Panel.Body></Panel.Collapse>
+      </Panel>
+    );
+  }
+}
+
+GenPropertiesLayerSearchCriteria.propTypes = {
+  layer: PropTypes.object,
+  selectOptions: PropTypes.object,
+  onSubChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  layers: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+GenPropertiesLayerSearchCriteria.defaultProps = {
+  selectOptions: {}
+};
+
+const LayersLayout = (layers, options, funcChange, funcSubChange = () => {}, funcClick = () => {}, layout = [], id = 0, canUpdate = false) => {
+  const sortedLayers = sortBy(layers, l => l.position) || [];
+  sortedLayers.forEach((layer) => {
+    if (typeof layer.cond_fields === 'undefined' || layer.cond_fields == null || layer.cond_fields.length === 0) {
+      const ig = (
+        <GenPropertiesLayer
+          id={id}
+          key={layer.key}
+          layer={layer}
+          onChange={funcChange}
+          onSubChange={funcSubChange}
+          selectOptions={options}
+          onClick={funcClick}
+          layers={layers}
+          canUpdate={canUpdate}
+        />
+      );
+      layout.push(ig);
+    } else if (layer.cond_fields && layer.cond_fields.length > 0) {
+      let showLayer = false;
+
+      for (let i = 0; i < layer.cond_fields.length; i += 1) {
+        const cond = layer.cond_fields[i] || {};
+        const fd = ((layers[cond.layer] || {}).fields || []).find(f => f.field === cond.field) || {};
+        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((cond.value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
+        (['true', 'yes', 't', '1'].includes((cond.value || '').trim().toLowerCase()) && (typeof fd.value !== 'undefined' && fd.value === true)))) {
+          showLayer = true;
+          break;
+        } else if (['text', 'select'].includes(fd.type) && (typeof (fd && fd.value) !== 'undefined' && (fd.value || '').trim() == (cond.value || '').trim())) {
+          showLayer = true;
+          break;
+        }
+      }
+
+      if (showLayer === true) {
+        const igs = (
+          <GenPropertiesLayer
+            id={id}
+            key={layer.key}
+            layer={layer}
+            onChange={funcChange}
+            onSubChange={funcSubChange}
+            selectOptions={options}
+            onClick={funcClick}
+            layers={layers}
+            canUpdate={canUpdate}
+          />
+        );
+        layout.push(igs);
+      }
+    }
+  });
+
+  return layout;
+};
+
+export {
+  LayersLayout,
+  GenProperties,
+  UploadInputChange,
+  GenPropertiesLayer,
+  GenPropertiesLayerSearchCriteria,
+};
diff --git a/app/packs/src/components/generic/SegmentDetails.js b/app/packs/src/components/generic/SegmentDetails.js
index 37c063ffc..045fddaac 100644
--- a/app/packs/src/components/generic/SegmentDetails.js
+++ b/app/packs/src/components/generic/SegmentDetails.js
@@ -35,7 +35,7 @@ const addSegmentTabs = (element, onChange, contentMap) => {
     if (idx < 0 && !klass.is_active) return;
     let segment = {};
     if (idx > -1) {
-      segment = new Segment(element.segments[idx]); // element.segments[idx];
+      segment = new Segment(element.segments[idx]);
     } else {
       segment = Segment.buildEmpty(cloneDeep(klass));
     }

From f8ce8a17b765a2a837e9a95bdae163a7ea11f193 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 14 Jul 2022 11:31:57 +0200
Subject: [PATCH 067/258] att permission for seg

---
 app/api/chemotion/attachment_api.rb | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index eddf12924..95356bb5d 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -107,6 +107,13 @@ def remove_duplicated(att)
                           (ElementPolicy.new(current_user, element).read? &&
                           ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
             end
+
+            if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
+              element = Segment.find(@attachment.attachable_id)&.element
+              can_dwnld = element.is_a?(User) && (element == current_user) ||
+                          ElementPolicy.new(current_user, element).read? &&
+                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?
+            end
           end
           error!('401 Unauthorized', 401) unless can_dwnld
         end

From 38d693b84aaf46a283075839e12bf90182205178 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 19 Jul 2022 14:48:10 +0200
Subject: [PATCH 068/258] oai metadata

---
 app/models/publication.rb                     | 10 ++++++++--
 ...00_add_oai_metadata_xml_to_publications.rb | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb

diff --git a/app/models/publication.rb b/app/models/publication.rb
index 46a91d65d..496d326b5 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -21,6 +21,7 @@
 #  published_at          :datetime
 #  review                :jsonb
 #  accepted_at           :datetime
+#  oai_metadata_xml      :text
 #
 # Indexes
 #
@@ -399,7 +400,6 @@ def datacite_metadata_xml
     parent_element = parent&.element
     literals = ActiveRecord::Base.connection.exec_query(literals_sql(element_id, element_type))
     metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals, col_doi: cdoi)
-
     erb_file = if element_type == 'Container'
                  "app/publish/datacite_metadata_#{parent_element.class.name.downcase}_#{element_type.downcase}.html.erb"
                else
@@ -414,7 +414,13 @@ def datacite_metadata_xml
 
   def persit_datacite_metadata_xml!
     mt = datacite_metadata_xml
-    self.update!(metadata_xml: mt)
+    self.update!(metadata_xml: mt, oai_metadata_xml: mt)
+    mt
+  end
+
+  def persit_oai_metadata_xml!
+    mt = datacite_metadata_xml
+    self.update!(oai_metadata_xml: mt)
     mt
   end
 
diff --git a/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb b/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb
new file mode 100644
index 000000000..5e8b11df3
--- /dev/null
+++ b/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb
@@ -0,0 +1,19 @@
+class AddOaiMetadataXmlToPublications < ActiveRecord::Migration[5.2]
+  def self.up
+    add_column :publications, :oai_metadata_xml, :text
+
+    err_msg = {}
+    Publication.where(state: ['completed', 'completed ver_20190116155110']).find_each do |pub|
+      begin
+        pub.persit_oai_metadata_xml!
+      rescue StandardError => e
+        err_msg[pub.id] = e.message
+      end
+    end
+    File.write("json_export_oai_metadata_error_#{Time.now.to_i}.json", err_msg.to_json)
+  end
+
+  def self.down
+    remove_column :publications, :oai_metadata_xml if column_exists? :publications, :oai_metadata_xml
+  end
+end

From dcfef11a24a9917eec16c68943965c00f37c03c7 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 19 Jul 2022 22:05:12 +0200
Subject: [PATCH 069/258] submission date

---
 app/api/chemotion/public_api.rb       | 24 +++++++++++++++++++++---
 app/api/chemotion/repository_api.rb   |  4 ++--
 app/assets/stylesheets/repo_home.scss | 12 +++++++++++-
 app/packs/src/libHome/RepoCommon.js   |  6 ++++--
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 23dfe050d..117221dbf 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -629,10 +629,19 @@ def query_embargo(name)
         end
       end
 
+
       resource :col_list do
         helpers RepositoryHelpers
-        get do
+        after_validation do
           @embargo_collection = Collection.find(params[:collection_id])
+          pub = @embargo_collection.publication
+          error!('401 Unauthorized', 401) if pub.nil?
+
+          if pub.state != 'completed'
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id)
+          end
+        end
+        get do
           anasql = <<~SQL
             publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
           SQL
@@ -652,7 +661,7 @@ def query_embargo(name)
             scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
             elements.push(
               id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
-              published_by: u&.name, submit_at: e.updated_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
+              published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
             )
           end
           { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
@@ -665,8 +674,17 @@ def query_embargo(name)
           requires :collection_id, type: Integer, desc: "collection id"
           requires :el_id, type: Integer, desc: "element id"
         end
-        get do
+        after_validation do
           @embargo_collection = Collection.find(params[:collection_id])
+          pub = @embargo_collection.publication
+          error!('401 Unauthorized', 401) if pub.nil?
+
+          if pub.state != 'completed'
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id)
+          end
+
+        end
+        get do
           if params[:el_type] == 'Reaction'
             return get_pub_reaction(params[:el_id])
           elsif params[:el_type] == 'Sample'
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index aea8fba33..0b6f5f2de 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -390,7 +390,7 @@ def add_submission_history(root)
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
           elements.push(
             id: e.element_id, svg: svg_file, type: element_type, title: title,
-            published_by: u&.name, submitter_id: u&.id, submit_at: e.updated_at, state: e.state, embargo: find_embargo_collection(e), scheme_only: scheme_only
+            published_by: u&.name, submitter_id: u&.id, submit_at: e.created_at, state: e.state, embargo: find_embargo_collection(e), scheme_only: scheme_only
           )
         end
         { elements: elements }
@@ -1102,7 +1102,7 @@ def remove_embargo_collection(col)
             scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
             elements.push(
               id: e.element_id, svg: svg_file, type: element_type, title: title,
-              published_by: u&.name, submit_at: e.updated_at, state: e.state, scheme_only: scheme_only
+              published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only
             )
           end
           { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user.id, type: current_user.type } }
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index ec6f416e9..0fb3a0f82 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -729,4 +729,14 @@ $bs-successcolor: #5cb85c;
     padding: unset !important;
     border-color: white !important;
   }
-}
\ No newline at end of file
+}
+
+.date_info {
+  display: inline-flex;
+  flex-direction: column;
+  margin-right: 8px;
+  .updated {
+    font-size: 0.6em;
+    text-align: right;
+  }
+}
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index bdf705b86..bc4c276d5 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -2292,9 +2292,11 @@ const DateInfo = (props) => {
     return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
   }
 
-  time = new Date(pubData && pubData.updated_at);
+  time = new Date(pubData && pubData.created_at);
   formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  return (<span><b>Submitted on </b> <i>{formattedTime}</i></span>);
+  const uTime = new Date(pubData && pubData.updated_at);
+  const formattedUTime = `${uTime.getDate()}-${uTime.getMonth() + 1}-${uTime.getFullYear()} ${uTime.getHours()}:${uTime.getMinutes()} `;
+  return (<div className="date_info"><div><b>Submitted on </b> <i>{formattedTime}</i></div><div className="updated">Updated on {formattedUTime}</div></div>);
 };
 
 DateInfo.propTypes = {

From 369af52830b67011fcbfa351200935a987c9d6d5 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 19 Jul 2022 22:52:38 +0200
Subject: [PATCH 070/258] update

---
 ...20718000000_add_oai_metadata_xml_to_publications.rb | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb b/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb
index 5e8b11df3..682361de5 100644
--- a/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb
+++ b/db/migrate/20220718000000_add_oai_metadata_xml_to_publications.rb
@@ -1,16 +1,6 @@
 class AddOaiMetadataXmlToPublications < ActiveRecord::Migration[5.2]
   def self.up
     add_column :publications, :oai_metadata_xml, :text
-
-    err_msg = {}
-    Publication.where(state: ['completed', 'completed ver_20190116155110']).find_each do |pub|
-      begin
-        pub.persit_oai_metadata_xml!
-      rescue StandardError => e
-        err_msg[pub.id] = e.message
-      end
-    end
-    File.write("json_export_oai_metadata_error_#{Time.now.to_i}.json", err_msg.to_json)
   end
 
   def self.down

From 0c4f50f328f6f803b45826b9e95374869c43de85 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 25 Jul 2022 10:21:27 +0200
Subject: [PATCH 071/258] wip

---
 app/api/chemotion/attachment_api.rb           |  6 ++--
 app/api/chemotion/repository_api.rb           |  5 ++-
 .../molecule_publication_list_entity.rb       |  1 +
 app/api/helpers/repository_helpers.rb         |  4 ++-
 .../src/components/actions/PublicActions.js   | 29 +++++++++++++++++
 .../src/components/generic/GenericElCommon.js |  4 +--
 .../src/components/stores/PublicStore.js      |  9 ++++--
 app/packs/src/libHome/RepoCommon.js           | 15 +++++----
 app/packs/src/libHome/RepoPubl.js             |  1 +
 app/packs/src/libHome/RepoReactionDetails.js  |  6 ++--
 app/packs/src/libHome/RepoReview.js           |  1 +
 app/packs/src/libHome/RepoSample.js           | 15 ++++++---
 app/packs/src/libHome/RepoSampleDetails.js    |  3 +-
 app/packs/src/libHome/RepoSegment.js          | 32 +++++++++++++++++++
 14 files changed, 109 insertions(+), 22 deletions(-)
 create mode 100644 app/packs/src/libHome/RepoSegment.js

diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index 95356bb5d..f56f25d84 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -110,9 +110,9 @@ def remove_duplicated(att)
 
             if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
               element = Segment.find(@attachment.attachable_id)&.element
-              can_dwnld = element.is_a?(User) && (element == current_user) ||
-                          ElementPolicy.new(current_user, element).read? &&
-                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?
+              can_dwnld = @attachment.created_for == current_user.id ||
+                          (ElementPolicy.new(current_user, element).read? &&
+                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
             end
           end
           error!('401 Unauthorized', 401) unless can_dwnld
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 0b6f5f2de..f305a52c3 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -547,6 +547,7 @@ def add_submission_history(root)
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
+          entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
           {
             reaction: entities,
             isSubmitter: publication.published_by == current_user.id,
@@ -571,6 +572,8 @@ def add_submission_history(root)
         end
         get do
           sample = Sample.where(id: params[:id]).includes(:molecule,:tag).last
+          review_sample = {**sample.serializable_hash.deep_symbolize_keys}
+          review_sample[:segments] = sample.segments.present? ? Entities::SegmentEntity.represent(sample.segments) : []
           molecule = Molecule.find(sample.molecule_id) unless sample.nil?
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
@@ -580,7 +583,7 @@ def add_submission_history(root)
 
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
-            sample: sample,
+            sample: review_sample,
             publication: publication,
             literatures: literatures,
             analyses: containers,
diff --git a/app/api/entities/molecule_publication_list_entity.rb b/app/api/entities/molecule_publication_list_entity.rb
index 11674590d..a4d6f6af0 100644
--- a/app/api/entities/molecule_publication_list_entity.rb
+++ b/app/api/entities/molecule_publication_list_entity.rb
@@ -4,6 +4,7 @@
 module Entities
   class MoleculePublicationListEntity < Grape::Entity
     expose :id, :tag, :iupac_name, :sum_formular, :cano_smiles, :inchikey, :inchistring , :molecule_svg_file, :sample_svg_file, :sid
+    # expose :segments, using: Entities::SegmentEntity
 
     expose :embargo do |obj|
       obj[:embargo] || ''
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 8948b0de8..3dee34817 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -62,6 +62,7 @@ def get_pub_reaction(id)
     entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
     entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
     entities[:elementType] = 'reaction'
+    entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
     entities
   end
 
@@ -131,8 +132,9 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
         ana_infos[pp.element_id] = info['comment']
       end
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
+      segments = Entities::SegmentEntity.represent(s.segments)
       tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
-        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
+        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
     x = published_samples.select { |s| s[:xvial].present? }
     xvial_com[:hasSample] = x.length.positive?
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 8c909ea7b..fca0db577 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -2,6 +2,7 @@ import alt from '../alt'
 import PublicFetcher from '../fetchers/PublicFetcher'
 import NotificationActions from './NotificationActions';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import SearchFetcher from '../fetchers/SearchFetcher';
 
 class PublicActions {
 
@@ -445,6 +446,34 @@ class PublicActions {
         });
     };
   }
+
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+  fetchBasedOnSearchSelectionAndCollection(params) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+    return (dispatch) => {
+      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
+        .then((result) => {
+          dispatch(result);
+          NotificationActions.removeByUid(uid);
+        }).catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
 }
 
 export default alt.createActions(PublicActions)
diff --git a/app/packs/src/components/generic/GenericElCommon.js b/app/packs/src/components/generic/GenericElCommon.js
index 306f269a2..c1dfab5fe 100644
--- a/app/packs/src/components/generic/GenericElCommon.js
+++ b/app/packs/src/components/generic/GenericElCommon.js
@@ -243,7 +243,7 @@ GenPropertiesLayer.propTypes = {
   onSubChange: PropTypes.func.isRequired,
   onClick: PropTypes.func,
   layers: PropTypes.object.isRequired,
-  canUpdate: PropTypes.object
+  canUpdate: PropTypes.bool
 };
 
 GenPropertiesLayer.defaultProps = {
@@ -398,5 +398,5 @@ export {
   GenProperties,
   UploadInputChange,
   GenPropertiesLayer,
-  GenPropertiesLayerSearchCriteria,
+  GenPropertiesLayerSearchCriteria
 };
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 43910dfd8..81d1a96af 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -1,7 +1,7 @@
 import Aviator from 'aviator';
 import alt from '../alt';
 import PublicActions from '../actions/PublicActions';
-import SearchActions from '../actions/ElementActions';
+import ElementActions from '../actions/ElementActions';
 import UIActions from '../actions/UIActions';
 
 class PublicStore {
@@ -41,7 +41,7 @@ class PublicStore {
       handleDisplayMolecule: PublicActions.displayMolecule,
       handleDisplayReaction: PublicActions.displayReaction,
       handleDisplayCollection: PublicActions.displayCollection,
-      handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
+      handleReceiveSearchresult: PublicActions.fetchBasedOnSearchSelectionAndCollection,
       handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
       handleClose: PublicActions.close,
       handleArticles: PublicActions.articles,
@@ -64,6 +64,7 @@ class PublicStore {
       handleEmbargoAssign: PublicActions.assignEmbargo,
       handleRefreshPubElements: PublicActions.refreshPubElements,
       handleRefreshEmbargoBundles: PublicActions.getEmbargoBundle,
+      handleUnitsSystem: PublicActions.fetchUnitsSystem,
     });
   }
 
@@ -393,6 +394,10 @@ class PublicStore {
       );
     }
   }
+
+  handleUnitsSystem(result) {
+    this.setState({ unitsSystem: result });
+  }
 }
 
 export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index bc4c276d5..05dd5005d 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -52,6 +52,7 @@ import { previewContainerImage } from '../components/utils/imageHelper';
 import RepoXvialButton from '../components/common/RepoXvialButton';
 import RepoPreviewImage from '../components/common/RepoPreviewImage';
 import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
+import RepoSegment from './RepoSegment';
 
 const CollectionDesc = (props) => {
   let { label } = props;
@@ -1018,6 +1019,7 @@ const RenderAnalysisHeader = (props) => {
         <Col sm={12} md={12} lg={12}>
           <h5><b>Reference{references.length > 1 ? 's' : null}: </b></h5>
           <ul style={{ listStyle: 'none' }}>{references}</ul>
+          <RepoSegment segments={element.segments} />
         </Col>
       </Row>
     </div>
@@ -1033,11 +1035,12 @@ const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
       color: 'white',
       fontSize: 'smaller',
       fontWeight: 'bold',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      borderRadius: 'unset'
     }}
     onClick={onClick}
   >
-    {name} &nbsp;<i className={`glyphicon ${indicatorStyle}`} />
+    {name} &nbsp;<i className={`fa fa-caret-${indicatorStyle}`} aria-hidden="true" />
   </span>
 );
 
@@ -1058,7 +1061,7 @@ const ReactionTable = ({
 }) => {
   let schemes = [];
   let sumSolvents = 0.0;
-  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  const showIndicator = (show) ? 'down' : 'right';
 
   const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
     reaction.publication.taggable_data.scheme_only === true) || false;
@@ -1187,7 +1190,7 @@ const ReactionTable = ({
 const ReactionRinChiKey = ({
   reaction, toggle, show, bodyAttrs
 }) => {
-  const showIndicatorRinchi = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  const showIndicatorRinchi = (show) ? 'down' : 'right';
   return (
     <span>
       <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
@@ -1220,7 +1223,7 @@ const ReactionRinChiKey = ({
 const ReactionProperties = ({
   reaction, toggle, show, bodyAttrs
 }) => {
-  const showIndicatorProp = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  const showIndicatorProp = (show) ? 'down' : 'right';
   return (
     <span>
       <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
@@ -1248,7 +1251,7 @@ const ReactionProperties = ({
 const ReactionTlc = ({
   reaction, toggle, show, bodyAttrs
 }) => {
-  const showIndicatorTlc = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  const showIndicatorTlc = (show) ? 'down' : 'right';
   return (
     <span>
       <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 8137d5a45..82ea1ab50 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -113,6 +113,7 @@ export default class RepoPubl extends Component {
     PublicActions.selectPublicCollection.defer();
     PublicStore.listen(this.onChange);
     PublicActions.getReactions.defer();
+    PublicActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 856ff2a05..b583084c3 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -43,6 +43,7 @@ import RepoReviewModal from '../components/common/RepoReviewModal';
 import RepoUserComment from '../components/common/RepoUserComment';
 import RepoPublicComment from '../components/common/RepoPublicComment';
 import Sample from '../components/models/Sample';
+import RepoSegment from './RepoSegment';
 
 export default class RepoReactionDetails extends Component {
   constructor(props) {
@@ -310,7 +311,7 @@ export default class RepoReactionDetails extends Component {
     if (typeof (container) === 'undefined' || !container) return <span />;
 
     const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
-    const show = this.state.showRA[idx];
+    const show = this.state.showRA[idx] || true;
     if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
       return <div />;
     }
@@ -355,6 +356,7 @@ export default class RepoReactionDetails extends Component {
         >
           Analyses &nbsp;
           <i className={`glyphicon ${show}`} />
+          <i className={`fa fa-caret-${show ? 'down' : 'right'}`} />
         </span>
         <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
           {AnalysesTypeJoinLabel(analyses, type)}
@@ -455,7 +457,6 @@ export default class RepoReactionDetails extends Component {
       );
     }
 
-
     return (
       <div style={{ border: 'none' }}>
         <div >
@@ -503,6 +504,7 @@ export default class RepoReactionDetails extends Component {
             <h5>
               {this.reactionInfo(reaction)}
             </h5>
+            <RepoSegment segments={reaction.segments} />
             {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction', null, -1, idyLogin, idyReview)}
             {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview, literatures)}
           </Jumbotron>
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 0ac5209d8..2c4fa55eb 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -89,6 +89,7 @@ export default class RepoReview extends Component {
     PublicStore.listen(this.onChange);
     PublicActions.getElements.defer();
     PublicActions.getEmbargoBundle();
+    PublicActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 0938cf337..d006114b1 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel } from 'react-bootstrap';
+import { Button, Jumbotron, Panel, Tabs, Tab } from 'react-bootstrap';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AffiliationList,
@@ -26,6 +26,7 @@ import RepoPublicComment from '../components/common/RepoPublicComment';
 import RepoXvialButton from '../components/common/RepoXvialButton';
 import PublicActions from '../components/actions/PublicActions';
 import Sample from '../components/models/Sample';
+import RepoSegment from './RepoSegment';
 
 const scrollView = () => {
   const anchor = window.location.hash.split('#')[1];
@@ -40,9 +41,10 @@ export default class RepoSample extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      expandSA: true,
+      expandSA: true, expandSG: ''
     };
     this.toggleSA = this.toggleSA.bind(this);
+    this.toggleSG = this.toggleSG.bind(this);
     this.renderAnalyses = this.renderAnalyses.bind(this);
   }
 
@@ -55,6 +57,10 @@ export default class RepoSample extends Component {
     this.setState({ expandSA: !expandSA });
   }
 
+  toggleSG(sg) {
+    this.setState({ expandSG: sg.uuid });
+  }
+
   updateRepoXvial(elementId) {
     PublicActions.displayMolecule(elementId);
     PublicActions.refreshPubElements('Molecules');
@@ -94,7 +100,7 @@ export default class RepoSample extends Component {
       canComment, handleCommentBtn, isLogin, isReviewer, element
     } = this.props;
     const { xvialCom } = element;
-    const { expandSA } = this.state;
+    const { expandSA, expandSG } = this.state;
 
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
     const references = sample.literatures ? sample.literatures.map(lit => (
@@ -169,7 +175,8 @@ export default class RepoSample extends Component {
           <b>Reference{references.length > 1 ? 's' : null}: </b>
           <ul style={{ listStyle: 'none' }}>{references}</ul>
         </h5>
-        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'} />
+        <RepoSegment segments={sample.segments} />
+        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'down' : 'right'} />
         <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
           {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
         </span>
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 212ff6d51..73764eba5 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -126,7 +126,8 @@ export default class RepoSampleDetails extends Component {
         showed_name: s.showed_name,
         molecule_iupac: molecule.iupac_name || [],
         molecule_id: molecule.id,
-        analyses: s.analyses || element.analyses || []
+        analyses: s.analyses || element.analyses || [],
+        segments: s.segments || []
       };
 
       return (
diff --git a/app/packs/src/libHome/RepoSegment.js b/app/packs/src/libHome/RepoSegment.js
new file mode 100644
index 000000000..6842f7aec
--- /dev/null
+++ b/app/packs/src/libHome/RepoSegment.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { LayerPlain } from 'chem-generic-ui-viewer';
+import { ToggleIndicator } from './RepoCommon';
+
+const listSegment = (props) => {
+  const [toggle, setToggle] = useState(true);
+  return (
+    <span key={`_repo_sample_sg.id_${props.id}`}>
+      <ToggleIndicator onClick={() => setToggle(!toggle)} name={props.klass_label} indicatorStyle={toggle ? 'down' : 'right'} />
+      {
+        toggle ?
+          <LayerPlain
+            layers={props.properties.layers}
+            options={props.properties.select_options || {}}
+            id={props.idx}
+          /> : <div />
+      }
+    </span>
+  );
+};
+
+const RepoSegment = (props) => {
+  const { segments } = props;
+  if (segments.length < 1) return null;
+  return <div className="generic_segments_repo">{segments.map((s, idx) => listSegment({ ...s, idx }))}</div>;
+};
+
+RepoSegment.propTypes = { segments: PropTypes.oneOfType([PropTypes.array]) };
+RepoSegment.defaultProps = { segments: [] };
+
+export default RepoSegment;

From 11074584bfa3555480573906918a1915a57f9702 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 1 Aug 2022 12:47:12 +0200
Subject: [PATCH 072/258] option to skip yield validation

---
 .gitignore                                    |  3 +
 app/api/chemotion/public_api.rb               | 68 +++++++++++++------
 app/api/entities/generic_entity.rb            | 52 ++++++++++++++
 app/api/entities/generic_public_entity.rb     | 16 +++++
 app/api/helpers/public_helpers.rb             | 31 +++++++++
 app/helpers/application_helper.rb             | 20 ++++++
 .../details/reactions/ReactionDetails.js      |  4 --
 app/packs/src/components/PublishCommon.js     |  2 +-
 .../src/components/PublishReactionModal.js    | 54 +++++++++------
 lib/svg/reaction_composer.rb                  |  2 +-
 10 files changed, 205 insertions(+), 47 deletions(-)
 create mode 100644 app/api/entities/generic_entity.rb
 create mode 100644 app/api/entities/generic_public_entity.rb
 create mode 100644 app/api/helpers/public_helpers.rb

diff --git a/.gitignore b/.gitignore
index 5bb8d55ae..535d83579 100644
--- a/.gitignore
+++ b/.gitignore
@@ -120,6 +120,9 @@
 !/public/json/pictograms.json
 
 
+/public/jsmol/*
+!/public/jsmol/.keep
+
 /public/zip/*
 !/public/zip/.keep
 
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 117221dbf..2be46f8be 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -8,33 +8,35 @@ module Chemotion
   # API for Public data
   class PublicAPI < Grape::API
     include Grape::Kaminari
-    helpers do
-      def send_notification(attachment, user, status, has_error = false)
-        data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
-        level = 'success'
-        if has_error
-          data_args['comment'] = ' an error has occurred, the file is not changed.'
-          level = 'error'
-        elsif status == 4
-          data_args['comment'] = ' file has not changed.'
-          level = 'info'
-        elsif @status == 7
-          data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
-          level = 'error'
-        end
-        Message.create_msg_notification(
-          channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
-          data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
-        )
-      end
-    end
+    # helpers do
+    #   def send_notification(attachment, user, status, has_error = false)
+    #     data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
+    #     level = 'success'
+    #     if has_error
+    #       data_args['comment'] = ' an error has occurred, the file is not changed.'
+    #       level = 'error'
+    #     elsif status == 4
+    #       data_args['comment'] = ' file has not changed.'
+    #       level = 'info'
+    #     elsif @status == 7
+    #       data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
+    #       level = 'error'
+    #     end
+    #     message = Message.create_msg_notification(
+    #       channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
+    #       data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
+    #     )
+    #   end
+    # end
     helpers CompoundHelpers
+    helpers PublicHelpers
 
     namespace :public do
       get 'ping' do
         status 204
       end
 
+
       namespace :token do
         desc 'Generate Token'
         params do
@@ -49,6 +51,32 @@ def send_notification(attachment, user, status, has_error = false)
         end
       end
 
+      namespace :generic_templates do
+        desc "get active generic templates"
+        params do
+          requires :klass, type: String, desc: 'Klass', values: %w[Element Segment Dataset]
+        end
+        get do
+          list = "#{params[:klass]}Klass".constantize.where(is_active: true).where.not(released_at: nil).select { |s| s["is_generic"].blank? }
+          entities = Entities::GenericPublicEntity.represent(list)
+          # entities.length > 1 ? de_encode_json(entities) : []
+        end
+      end
+
+      namespace :element_klasses_name do
+        desc "get klasses"
+        params do
+          requires :username, type: String, desc: 'Username'
+          requires :password, type: String, desc: 'Password'
+        end
+        post do
+          token = Usecases::Public::BuildToken.execute!(params)
+          error!('401 Unauthorized', 401) if token.blank?
+
+          { token: token }
+        end
+      end
+
 
       namespace :omniauth_providers do
         desc 'get omniauth providers'
diff --git a/app/api/entities/generic_entity.rb b/app/api/entities/generic_entity.rb
new file mode 100644
index 000000000..4d7193e20
--- /dev/null
+++ b/app/api/entities/generic_entity.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class GenericEntity < Grape::Entity
+    expose :id, :is_active, :label, :desc, :place, :released_at
+
+    expose :element_klass_id do |obj|
+      obj[:element_klass_id] || 0
+    end
+
+    expose :klass_name do |obj|
+      obj[:name] || ''
+    end
+
+    expose :ols_term_id do |obj|
+      obj[:ols_term_id] || ''
+    end
+
+    expose :icon_name do |obj|
+      obj[:icon_name] || ''
+    end
+
+    expose :klass_prefix do |obj|
+      obj[:klass_prefix] || ''
+    end
+
+    expose :is_generic do |obj|
+      obj[:is_generic] || true
+    end
+
+    expose :uuid do |obj|
+      obj[:uuid] || ''
+    end
+
+    expose :properties_release do |obj|
+      obj[:properties_release] || {}
+    end
+
+    expose :element_klass do |obj|
+      if obj[:element_klass_id]
+        Entities::GenericEntity.represent(obj.element_klass)
+      else
+        {}
+      end
+    end
+
+    expose :identifier do |obj|
+      obj[:identifier] || ''
+    end
+  end
+end
diff --git a/app/api/entities/generic_public_entity.rb b/app/api/entities/generic_public_entity.rb
new file mode 100644
index 000000000..d2bde0e2c
--- /dev/null
+++ b/app/api/entities/generic_public_entity.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class GenericPublicEntity < GenericEntity
+    unexpose :id
+    unexpose :is_active
+    unexpose :place
+    unexpose :element_klass_id
+    unexpose :ols_term_id
+    unexpose :is_generic
+    unexpose :uuid
+    unexpose :properties_release
+    unexpose :element_klass
+  end
+end
diff --git a/app/api/helpers/public_helpers.rb b/app/api/helpers/public_helpers.rb
new file mode 100644
index 000000000..93bcdaf3e
--- /dev/null
+++ b/app/api/helpers/public_helpers.rb
@@ -0,0 +1,31 @@
+module PublicHelpers
+  extend Grape::API::Helpers
+  include ApplicationHelper
+
+  def send_notification(attachment, user, status, has_error = false)
+    data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
+    level = 'success'
+    if has_error
+      data_args['comment'] = ' an error has occurred, the file is not changed.'
+      level = 'error'
+    elsif status == 4
+      data_args['comment'] = ' file has not changed.'
+      level = 'info'
+    elsif @status == 7
+      data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
+      level = 'error'
+    end
+    message = Message.create_msg_notification(
+      channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
+      data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
+    )
+  end
+
+  def de_encode_json(json, key = '', iv = '', encode = true)
+    if encode
+      encode_json(json)
+    else
+      decode_json(json, key, iv)
+    end
+  end
+end
\ No newline at end of file
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index f7bc874a5..f621c3ef1 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -28,4 +28,24 @@ def markdown(text)
     @markdown ||= Redcarpet::Markdown.new(renderer, extensions)
     @markdown.render(text).html_safe
   end
+
+  def encode_json(json)
+    cipher = OpenSSL::Cipher.new('rc4')
+    cipher.encrypt
+    key = cipher.random_key
+    iv = cipher.random_iv
+    encrypted = cipher.update(json.to_json) + cipher.final
+    encoded = Base64.encode64(encrypted)
+    [encoded, key.unpack("H*"), iv.unpack("H*")]
+  end
+
+  def decode_json(json, key, iv)
+    data = Base64.decode64(json)
+    cipher = OpenSSL::Cipher.new('rc4')
+    cipher.decrypt
+    cipher.key = key.pack("H*")
+    cipher.iv = iv.pack("H*")
+    data = cipher.update(data) + cipher.final
+    JSON.parse(data)
+  end
 end
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index d8847b8c1..17118350b 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -200,9 +200,6 @@ export default class ReactionDetails extends Component {
         validates.push({ name: 'product', value: false, message: 'Product is missing' });
       }
       products.forEach((pt) => {
-        if (!pt.amount || !pt.amount.value) {
-          validates.push({ name: 'product-amount', value: false, message: `${pt.molecule_iupac_name}: amount is 0` });
-        }
         if (pt.analysisArray().length > 0) {
           hasAnalyses = true;
         }
@@ -215,7 +212,6 @@ export default class ReactionDetails extends Component {
         validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
       }
     }
-    validates = validates.concat(validateYield(reaction));
     if (validates.length > 0) {
       reaction.validates = validates;
       this.setState({ reaction });
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index 35d40f055..7d5191d0b 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -39,7 +39,7 @@ const validateYield = (reaction) => {
   const products = reaction.products || [];
   products.forEach((product) => {
     const val = ((product.equivalent || 0) * 100).toFixed(0);
-    if (val === '0') result.push({ name: 'product-yield', value: false, message: `${product.molecule_iupac_name}: yield is 0` });
+    if (val === '0') result.push({ name: 'product-yield', value: false, message: `[Product] ${product.molecule_iupac_name}: yield is 0` });
   });
   if (result.length !== 0 && result.length === products.length) return result;
   return [];
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 2e9815b6e..294eef52d 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -71,6 +71,7 @@ export default class PublishReactionModal extends Component {
       cc0Consent: { consent1: false, consent2: false },
       bundles: [],
       noSolvent: false,
+      noAmountYield: false,
       schemeDesc: true,
       publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
     };
@@ -79,7 +80,6 @@ export default class PublishReactionModal extends Component {
     this.handlePublishReaction = this.handlePublishReaction.bind(this);
     this.handleReserveDois = this.handleReserveDois.bind(this);
     this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
     this.loadUserByName = this.loadUserByName.bind(this);
     this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
     this.toggleScheme = this.toggleScheme.bind(this);
@@ -93,6 +93,7 @@ export default class PublishReactionModal extends Component {
     this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
     this.handleLicenseChange = this.handleLicenseChange.bind(this);
     this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
+    this.handleNoAmountYieldCheck = this.handleNoAmountYieldCheck.bind(this);
     this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
     this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
     this.handleYieldChange = this.handleYieldChange.bind(this);
@@ -228,6 +229,10 @@ export default class PublishReactionModal extends Component {
     this.setState({ noSolvent: !this.state.noSolvent });
   }
 
+  handleNoAmountYieldCheck() {
+    this.setState({ noAmountYield: !this.state.noAmountYield });
+  }
+
   loadBundles() {
     RepositoryFetcher.fetchEmbargoCollections().then((result) => {
       const cols = result.repository || [];
@@ -246,11 +251,7 @@ export default class PublishReactionModal extends Component {
 
   loadMyCollaborations() {
     UsersFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
+      .then((result) => { this.setState({ collaborations: result.authors }); });
   }
 
   contributor() {
@@ -259,7 +260,7 @@ export default class PublishReactionModal extends Component {
     const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
       <div>  -{currentUser.current_affiliations[k]}</div>
     ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br /> {aff} </div>);
   }
 
   loadUserByName(input) {
@@ -281,10 +282,6 @@ export default class PublishReactionModal extends Component {
       });
   }
 
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
   handleAnalysesChecked(analysis, elementType) {
     const { reaction } = this.state;
 
@@ -338,7 +335,9 @@ export default class PublishReactionModal extends Component {
   }
 
   handlePublishReaction() {
-    const { selectedLicense, cc0Consent, publishType, selectedUsers} = this.state;
+    const {
+      selectedLicense, cc0Consent, publishType, selectedUsers
+    } = this.state;
     const authorCount = selectedUsers && selectedUsers.length;
 
     if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
@@ -419,7 +418,7 @@ export default class PublishReactionModal extends Component {
       const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
         <div>  -{af.department}, {af.organization}, {af.country}</div>
       ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>);
     });
 
     return (
@@ -575,14 +574,16 @@ export default class PublishReactionModal extends Component {
 
       (reaction.starting_materials || []).forEach((st) => {
         if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      (reaction.products || []).forEach((prod) => {
-        if (!prod.amount || !prod.amount.value) {
-          validates.push({ name: 'product-amount', value: false, message: `${prod.molecule_iupac_name}: amount is 0` });
+          validates.push({ name: 'starting_materials-amount', value: false, message: `[Starting material] ${st.molecule_iupac_name}: amount is 0` });
         }
       });
+      if (!this.state.noAmountYield) {
+        (reaction.products || []).forEach((prod) => {
+          if (!prod.amount || !prod.amount.value) {
+            validates.push({ name: 'product-amount', value: false, message: `[Product] ${prod.molecule_iupac_name}: amount is 0` });
+          }
+        });
+      }
     } else {
       const hasDuration =
         !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
@@ -590,7 +591,7 @@ export default class PublishReactionModal extends Component {
       const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
       validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
     }
-    validates = validates.concat(validateYield(reaction));
+    validates = this.state.noAmountYield ? validates : validates.concat(validateYield(reaction));
     return validates;
   }
 
@@ -771,6 +772,13 @@ export default class PublishReactionModal extends Component {
               >
                 <span>This reaction has no solvents</span>
               </Checkbox>
+              <Checkbox
+                onChange={() => { this.handleNoAmountYieldCheck(); }}
+                checked={this.state.noAmountYield}
+                className={`display-${isFullyPublish}`}
+              >
+                <span>Skip amount and yield validation (the product has no amount and yield)</span>
+              </Checkbox>
               <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
                 <Panel
                   eventKey="2"
@@ -792,7 +800,11 @@ export default class PublishReactionModal extends Component {
                       </Row>
                       <Row>
                         <Col md={12}>
-                          <PanelGroup accordion id={`panelgroup_ds_${reaction.id}`} defaultActiveKey={0}>
+                          <PanelGroup
+                            accordion
+                            id={`panelgroup_ds_${reaction.id}`}
+                            defaultActiveKey={0}
+                          >
                             {flatten(analysesView)}
                           </PanelGroup>
                         </Col>
diff --git a/lib/svg/reaction_composer.rb b/lib/svg/reaction_composer.rb
index 9a1b051b9..b91bfb595 100644
--- a/lib/svg/reaction_composer.rb
+++ b/lib/svg/reaction_composer.rb
@@ -528,7 +528,7 @@ def compose_material_group(material_group, **options)
           x_shift = group_width + 10 - vb[0]
           y_shift = (y_center - vb[3] / 2).round
           yield_svg = ''
-          yield_svg += compose_yield_svg(yield_amount, (vb[2] / 2).round, ((@max_height_for_products + vb[3]) / 2).round) if yield_amount
+          yield_svg += compose_yield_svg(yield_amount, (vb[2] / 2).round, ((@max_height_for_products + vb[3]) / 2).round) if yield_amount && yield_amount > 0
           group_width += vb[2] + 10
           svg['width'] = "#{vb[2]}px;"
           svg['height'] = "#{vb[3]}px;"

From ec179811d2d598ce5d0baafc2b9e498fa787b1cb Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 31 Aug 2022 11:12:10 +0200
Subject: [PATCH 073/258] how-to link and quill-viewer styling

---
 app/assets/stylesheets/home.scss      | 4 ++++
 app/assets/stylesheets/repo_home.scss | 7 +++++++
 app/packs/src/libHome/Navigation.js   | 2 +-
 app/packs/src/libHome/RepoCommon.js   | 9 ++++++---
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
index bed8fd23c..929dd9802 100644
--- a/app/assets/stylesheets/home.scss
+++ b/app/assets/stylesheets/home.scss
@@ -25,6 +25,10 @@
   font-size: small;
 }
 
+.expand-p .ql-editor > p {
+  margin-bottom: unset;
+}
+
 iframe#home-tos {
   width: 100%;
   min-height: 80vh;
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 0fb3a0f82..d7b2460ac 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -740,3 +740,10 @@ $bs-successcolor: #5cb85c;
     text-align: right;
   }
 }
+
+.repo-quill-viewer {
+  .ql-editor {
+    cursor: inherit;
+    padding: unset;
+  }
+}
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 2ae4e531d..6b3b3c753 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -118,7 +118,7 @@ export default class Navigation extends React.Component {
             }
             {
               true ?
-                <NavItem eventKey={5} onClick={() => Aviator.navigate('/home/howto')} className="white-nav-item">
+                <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/chemotionsaurus/docs/repo/videos_repo" className="white-nav-item">
                   How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
                 </NavItem> : null
             }
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 05dd5005d..d19975ac1 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-multi-comp */
 import React, { Component } from 'react';
 import SVG from 'react-inlinesvg';
@@ -1744,9 +1745,11 @@ class RenderPublishAnalysesPanel extends Component {
             {crdLink}
           </div>
           <div className="desc small-p expand-p">
-            <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content} />
-            </ClipboardCopyLink>
+            <OverlayTrigger placement="bottom" overlay={<Tooltip id="_tip_dataset_quill_viewer">copy to clipboard</Tooltip>}>
+              <div className="repo-quill-viewer" tabIndex={0} role="button" onClick={() => { navigator.clipboard.writeText(contentToText(content)); }}>
+                <QuillViewer value={content} />
+              </div>
+            </OverlayTrigger>
           </div>
         </div>
       </div>

From 905dbb6438c82d1f1763d6968f259302e6791fd7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 31 Aug 2022 16:14:35 +0200
Subject: [PATCH 074/258] 1. add a button to copy collection DOI 2. add a
 checkbox confirmation to ensure that people that add data without an embargo
 know that the data is published as soon as review is completed

---
 app/assets/stylesheets/repo_home.scss         | 15 +++++----
 app/models/publication.rb                     |  4 +--
 .../src/components/PublishReactionModal.js    | 24 ++++++++++++--
 .../src/components/PublishSampleModal.js      | 30 +++++++++++++----
 .../src/components/stores/PublicStore.js      |  8 +++--
 app/packs/src/components/users/AuthorModal.js |  8 -----
 app/packs/src/libHome/Home.js                 |  4 +--
 app/packs/src/libHome/RepoCommon.js           |  4 +--
 app/packs/src/libHome/RepoEmbargo.js          |  4 +--
 app/packs/src/libHome/RepoHome.js             | 33 +++++++++++++++----
 app/packs/src/libHome/RepoPubl.js             |  6 ++--
 app/packs/src/libHome/RepoReactionDetails.js  |  3 ++
 app/packs/src/libHome/RepoSample.js           |  6 ++--
 app/packs/src/libHome/homeRoutes.js           |  3 +-
 14 files changed, 105 insertions(+), 47 deletions(-)

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index d7b2460ac..c5ab15fe5 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -437,11 +437,11 @@ $bs-successcolor: #5cb85c;
       align-items: center;
       flex: 1;
       .heading {
-        font-size: 1.8vmax;
-        // font-weight: bolder;
+        font-size: xx-large;
+        font-weight: bold;
       }
       .list {
-        font-size: 1vmax;
+        font-size: larger;
       }
     }
     .row .even {
@@ -479,7 +479,7 @@ $bs-successcolor: #5cb85c;
         font-size: 5vmin;
       }
       .tit {
-        font-size: 1.8vmin;
+        font-size: large;
       }
       .i-ext {
         font-size: 4vmin;
@@ -488,14 +488,15 @@ $bs-successcolor: #5cb85c;
     }
     .dtl .rr {
       text-align: left;
-      font-size: 1.5vmin;
       .tit {
-        color: $statisticcolor;
         font-size: initial;
         font-weight: initial;
+        button {
+          padding: 0px;
+        }
       }
       .cnt {
-        font-size: 3vmin;
+        font-size: xx-large;
         font-weight: bolder;
       }
       .italic-desc {
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 496d326b5..39d1da55c 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -420,14 +420,14 @@ def persit_datacite_metadata_xml!
 
   def persit_oai_metadata_xml!
     mt = datacite_metadata_xml
-    self.update!(oai_metadata_xml: mt)
+    self.update_columns(oai_metadata_xml: mt)
     mt
   end
 
   def transition_from_start_to_metadata_uploading!
     return unless valid_transition(STATE_DC_METADATA_UPLOADING)
     mt = datacite_metadata_xml
-    self.update!(metadata_xml: mt, state: STATE_DC_METADATA_UPLOADING)
+    self.update!(metadata_xml: mt, oai_metadata_xml: mt, state: STATE_DC_METADATA_UPLOADING)
   end
 
   def transition_from_metadata_uploading_to_uploaded!
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 294eef52d..714f85ff2 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -72,6 +72,7 @@ export default class PublishReactionModal extends Component {
       bundles: [],
       noSolvent: false,
       noAmountYield: false,
+      noEmbargo: false,
       schemeDesc: true,
       publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
     };
@@ -229,6 +230,10 @@ export default class PublishReactionModal extends Component {
     this.setState({ noSolvent: !this.state.noSolvent });
   }
 
+  handleNoEmbargoCheck() {
+    this.setState({ noEmbargo: !this.state.noEmbargo });
+  }
+
   handleNoAmountYieldCheck() {
     this.setState({ noAmountYield: !this.state.noAmountYield });
   }
@@ -553,9 +558,10 @@ export default class PublishReactionModal extends Component {
   }
 
   validatePub(isFullyPublish = true) {
-    const { reaction } = this.state;
+    const { reaction, noEmbargo, selectedEmbargo } = this.state;
     let validates = [];
     if (isFullyPublish) {
+      validates.push({ name: 'embargo', value: selectedEmbargo !== '-1' || (selectedEmbargo === '-1' && noEmbargo), message: 'No embargo bundle' });
       validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
       const hasDuration =
         !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
@@ -685,7 +691,7 @@ export default class PublishReactionModal extends Component {
       });
 
       const {
-        selectedEmbargo, selectedLicense, cc0Consent
+        selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
       } = this.state;
 
       const publishTypeAs = {
@@ -700,6 +706,19 @@ export default class PublishReactionModal extends Component {
         opts.push({ value: col.element_id, name: tag.label, label: tag.label });
       });
 
+      const awareEmbargo = selectedEmbargo === '-1' ? (
+        <Checkbox
+          onChange={() => { this.handleNoEmbargoCheck(); }}
+          checked={noEmbargo}
+          className={`display-${isFullyPublish}`}
+        >
+          <span>
+            I know that the data that is submitted without the selection of an embargo
+            bundle will be published immediately after a successful review.
+          </span>
+        </Checkbox>
+      ) : <div />;
+
       return (
         <div>
           <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
@@ -779,6 +798,7 @@ export default class PublishReactionModal extends Component {
               >
                 <span>Skip amount and yield validation (the product has no amount and yield)</span>
               </Checkbox>
+              {awareEmbargo}
               <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
                 <Panel
                   eventKey="2"
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index 9630a80c4..988c07854 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Panel, PanelGroup, Modal, Table,
   ListGroupItem, ListGroup, Button, Checkbox,
-  Popover, OverlayTrigger, Tooltip
+  OverlayTrigger, Tooltip
 } from 'react-bootstrap';
 import Select from 'react-select';
 import Immutable from 'immutable';
@@ -15,7 +15,7 @@ import UserStore from './stores/UserStore';
 import UsersFetcher from './fetchers/UsersFetcher';
 import RepositoryActions from './actions/RepositoryActions';
 import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import { MoleculeInfo, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
+import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
 import LoadingActions from './actions/LoadingActions';
 import SamplesFetcher from './fetchers/SamplesFetcher';
 import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
@@ -41,7 +41,8 @@ export default class PublishSampleModal extends Component {
       selectedEmbargo: '-1',
       selectedLicense: 'CC BY-SA',
       cc0Consent: { consent1: false, consent2: false },
-      bundles: []
+      bundles: [],
+      noEmbargo: false
     };
     this.onUserChange = this.onUserChange.bind(this);
     this.handleSampleChanged = this.handleSampleChanged.bind(this);
@@ -157,9 +158,9 @@ export default class PublishSampleModal extends Component {
 
   // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
   validateSubmission() {
-    const { sample } = this.state;
+    const { sample, selectedEmbargo, noEmbargo } = this.state;
+    if (selectedEmbargo === '-1' && !noEmbargo) return false;
     const analyses = sample.analysisArray();
-
     if (!this.validateAnalyses()) {
       return false;
     }
@@ -410,6 +411,10 @@ export default class PublishSampleModal extends Component {
     this.setState({ cc0Consent });
   }
 
+  handleNoEmbargoCheck() {
+    this.setState({ noEmbargo: !this.state.noEmbargo });
+  }
+
   render() {
     const { show, onHide, sample } = this.props;
     const { bundles } = this.state;
@@ -426,9 +431,21 @@ export default class PublishSampleModal extends Component {
     const { molecule } = sample;
 
     const {
-      selectedEmbargo, selectedLicense, cc0Consent
+      selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
     } = this.state;
 
+    const awareEmbargo = selectedEmbargo === '-1' ? (
+      <Checkbox
+        onChange={() => { this.handleNoEmbargoCheck(); }}
+        checked={noEmbargo}
+      >
+        <span>
+          I know that the data that is submitted without the selection of an embargo
+          bundle will be published immediately after a successful review.
+        </span>
+      </Checkbox>
+    ) : <div />;
+
     if (show) {
       const opts = [];
       bundles.forEach((col) => {
@@ -458,6 +475,7 @@ export default class PublishSampleModal extends Component {
                   <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
                 </Panel.Body>
               </Panel>
+              {awareEmbargo}
               <PanelGroup accordion id="publish-sample-config">
                 <Panel
                   eventKey="2"
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 81d1a96af..6598da99d 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -94,7 +94,7 @@ class PublicStore {
       molecules, page, pages, perPage
     } = results;
     this.setState({
-      molecules, page, pages, perPage
+      molecules, page, pages, perPage, listType: 'sample', guestPage: 'publications'
     });
   }
 
@@ -102,8 +102,9 @@ class PublicStore {
     const {
       reactions, page, pages, perPage
     } = results;
+    const listType = reactions[0].taggable_data.scheme_only ? 'scheme' : 'reaction';
     this.setState({
-      reactions, page, pages, perPage
+      reactions, page, pages, perPage, listType, guestPage: 'publications'
     });
   }
 
@@ -152,7 +153,8 @@ class PublicStore {
   }
 
   handleOpenRepositoryPage(page) {
-    this.setState({ guestPage: page, currentElement: null });
+    const pageType = page.split('=');
+    this.setState({ guestPage: pageType[0], currentElement: null, listType: pageType[1] });
   }
 
   handleDisplayDataset(result) {
diff --git a/app/packs/src/components/users/AuthorModal.js b/app/packs/src/components/users/AuthorModal.js
index 968fdaa1c..ce8c4f744 100644
--- a/app/packs/src/components/users/AuthorModal.js
+++ b/app/packs/src/components/users/AuthorModal.js
@@ -234,14 +234,6 @@ export default class AuthorModal extends Component {
       return false;
     }
 
-    const orcidRegex = /^([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})$/;
-
-    const isValid = orcidRegex.test(fields.orcid.trim());
-    if (!isValid) {
-      alert('Not a valid ORCID');
-      return false;
-    }
-
     UsersFetcher.fetchandAddCollaboratorByOrcid(fields.orcid)
       .then((result) => {
         if (result.error) {
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index fcf9ce05d..1461cdf79 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -56,7 +56,7 @@ class Home extends Component {
 
   onChange(publicState) {
     if (this.state.guestPage !== publicState.guestPage) {
-      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage }));
+      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
     }
   }
 
@@ -79,7 +79,7 @@ class Home extends Component {
       case 'contact':
         return <RepoContact />;
       case 'publications':
-        return <RepoPubl />;
+        return <RepoPubl listType={this.state.listType || ''} />;
       case 'review':
         return <RepoReview />;
       case 'collection':
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index d19975ac1..827138806 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -874,7 +874,7 @@ class ClipboardCopyBtn extends Component {
     return (
       <OverlayTrigger
         placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+        overlay={<Tooltip id="copy_clipboard">{this.props.tooltip || 'copy to clipboard'}</Tooltip>}
       >
         <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
           <i className="fa fa-clipboard" />
@@ -2261,7 +2261,7 @@ const Doi = (props) => {
   } else {
     data = (
       <span>
-        {doi.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi.full_doi}`} />
+        {doi?.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi?.full_doi}`} />
       </span>
     );
   }
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 1170b0693..35281370d 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -193,14 +193,14 @@ export default class RepoEmbargo extends Component {
       <ButtonGroup>
         <Button
           id="all-info-button"
-          disabled={selectEmbargo === null || elements.length === 0}
+          disabled={selectEmbargo === null || elements?.length === 0}
           onClick={() => this.handleMetadataShow()}
         >
           <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
         </Button>
         <Button
           id="all-info-button"
-          disabled={selectEmbargo === null || elements.length === 0}
+          disabled={selectEmbargo === null || elements?.length === 0}
           onClick={() => this.handleInfoShow()}
         >
           <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index e2aa20fbc..c281c71ea 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Label, Col, Row, Carousel, Thumbnail } from 'react-bootstrap';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
@@ -181,19 +181,30 @@ const StaticsBoard = (params) => {
     const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
     const stsAnalysisCnt = stsAnalysisSort
       .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-
+    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
+    const pubPage = { sample: 'publications=sample', reaction: 'publications=reaction' };
     return (
       <Row className="repo-statistic">
         <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rl">
-              <i className="icon-sample" />
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                  <i className="icon-sample" />
+                </Button>
+              </OverlayTrigger>
               <div className="tit">Samples</div>
             </Row>
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="tit">published</div>
+              <div className="tit">
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
               <div className="cnt">{stsSample.e_cnt}</div>
               <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
               <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
@@ -203,13 +214,23 @@ const StaticsBoard = (params) => {
         <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rl">
-              <i className="icon-reaction" />
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                  <i className="icon-reaction" />
+                </Button>
+              </OverlayTrigger>
               <div className="tit">Reactions</div>
             </Row>
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="tit">published</div>
+              <div className="tit">
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
               <div className="cnt">{stsReaction.e_cnt}</div>
               <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
               <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 82ea1ab50..007bf7b93 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -72,7 +72,6 @@ const TabTip = props => (
 export default class RepoPubl extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       // ...PublicStore.getState(),
       page: 1,
@@ -85,7 +84,7 @@ export default class RepoPubl extends Component {
       queryMolfile: null,
       searchType: 'similar',
       tanimotoThreshold: 0.7,
-      listType: 'reaction',
+      listType: props.listType || 'reaction',
       advFlag: false,
       advType: 'Authors',
       advValue: [],
@@ -112,7 +111,7 @@ export default class RepoPubl extends Component {
   componentDidMount() {
     PublicActions.selectPublicCollection.defer();
     PublicStore.listen(this.onChange);
-    PublicActions.getReactions.defer();
+    // PublicActions.getReactions.defer();
     PublicActions.fetchUnitsSystem.defer();
   }
 
@@ -615,7 +614,6 @@ export default class RepoPubl extends Component {
     const {
       molecules, listType, reactions, currentElement, showSearch, advFlag, advType, advValue
     } = this.state;
-
     const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
       this.state.currentElement.publication.published_at) || (
       this.state.currentElement && this.state.currentElement.published_samples
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index b583084c3..99b3dad0c 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -18,6 +18,7 @@ import {
   ClosePanel,
   CommentBtn,
   ContributorInfo,
+  ClipboardCopyBtn,
   DateInfo,
   Doi,
   ReactionTable,
@@ -446,6 +447,7 @@ export default class RepoReactionDetails extends Component {
     const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
 
     let embargo = (<span />);
+    const colDoiPrefix = isPublished ? taggData.doi?.split('/')[0] : doi?.full_doi?.split('/')[0];
     if (reaction.embargo) {
       embargo = (
         <span>
@@ -453,6 +455,7 @@ export default class RepoReactionDetails extends Component {
           <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${reaction.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
             <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
           </Button>
+          <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`} tooltip="retrieve and copy collection DOI" />
         </span>
       );
     }
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index d006114b1..f69ec9a79 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel, Tabs, Tab } from 'react-bootstrap';
+import { Button, Jumbotron, Panel } from 'react-bootstrap';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AffiliationList,
@@ -10,6 +10,7 @@ import {
   ChemotionId,
   CommentBtn,
   ContributorInfo,
+  ClipboardCopyBtn,
   DateInfo,
   Doi,
   IconLicense,
@@ -133,6 +134,7 @@ export default class RepoSample extends Component {
           <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
             <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
           </Button>
+          <ClipboardCopyBtn text={sample.embargo} />
         </span>
       );
     }
@@ -144,7 +146,7 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
-          {IconLicense((isPublished ? sample.doi : sample.doi.full_doi), sample.license, (sample.author_ids.length > 1))}
+          {IconLicense((isPublished ? sample.doi : sample.doi?.full_doi), sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           {ElStateLabel(sample.embargo)}
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 3773d6f3c..ad71a48b5 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -29,7 +29,8 @@ const routes = {
   '/publications': {
     target: {
       show: function(e) {
-        PublicActions.openRepositoryPage("publications")
+        PublicActions.getReactions.defer();
+        PublicActions.openRepositoryPage("publications=reaction")
       },
     },
     '/': 'show'

From 6b95abab24fd2b14c7678a8c2629abbaa2fc66d1 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 20 Oct 2022 14:09:01 +0200
Subject: [PATCH 075/258] review comment

---
 app/api/chemotion/public_api.rb               | 11 ++-
 app/api/chemotion/repository_api.rb           | 39 +++++++---
 app/assets/stylesheets/repo_home.scss         | 15 ++--
 app/models/collection.rb                      | 24 ++++--
 .../components/ReactionDetailsRepoComment.js  | 16 ++--
 .../components/SampleDetailsRepoComment.js    | 10 ++-
 .../src/components/actions/PublicActions.js   |  6 +-
 .../src/components/common/RepoCommentBtn.js   | 12 +--
 .../src/components/common/RepoCommentModal.js | 13 ++--
 .../src/components/common/RepoReviewModal.js  | 75 ++++++++++++++++---
 .../src/components/fetchers/PublicFetcher.js  |  2 +-
 .../components/fetchers/RepositoryFetcher.js  |  4 +-
 .../src/components/stores/PublicStore.js      | 19 ++---
 app/packs/src/libHome/RepoCommon.js           | 14 +++-
 app/packs/src/libHome/RepoElementDetails.js   |  4 +-
 app/packs/src/libHome/RepoReactionDetails.js  | 30 +++++---
 .../src/libHome/RepoReactionSchemeInfo.js     |  2 -
 app/packs/src/libHome/RepoReviewButtonBar.js  |  6 +-
 app/packs/src/libHome/RepoReviewDetails.js    | 13 +++-
 app/packs/src/libHome/RepoSampleDetails.js    | 27 +++++--
 20 files changed, 228 insertions(+), 114 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 2be46f8be..92f2b9fe9 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -115,7 +115,7 @@ class PublicAPI < Grape::API
         end
       end
 
-      namespace :find_adv_valuess do
+      namespace :find_adv_values do
         helpers do
           def query_authors(name)
             result = User.where(type: %w(Person Group Collaborator)).where(
@@ -138,10 +138,10 @@ def query_ontologies(name)
               <<~SQL
               term_id as key, label, label as name
               SQL
-            ).uniq
+            ).distinct
           end
           def query_embargo(name)
-            Collection.all_embargos(current_user.id).where("LOWER(label) ILIKE '#{ActiveRecord::Base.send(:sanitize_sql_like, params[:name])}%'").limit(10)
+            Collection.all_embargos(current_user&.id).where("LOWER(label) ILIKE '#{ActiveRecord::Base.send(:sanitize_sql_like, params[:name])}%'").limit(10)
             .select(
               <<~SQL
               id as key, label, label as name
@@ -517,12 +517,11 @@ def query_embargo(name)
           else
             adv_search = ' '
           end
-
           com_config = Rails.configuration.compound_opendata
           embargo_sql = <<~SQL
             reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
             (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
-            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
+            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id and cr.deleted_at is null
             and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
             select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
           SQL
@@ -666,7 +665,7 @@ def query_embargo(name)
           error!('401 Unauthorized', 401) if pub.nil?
 
           if pub.state != 'completed'
-            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id)
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id || current_user.type == 'Anonymous')
           end
         end
         get do
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index f305a52c3..564d98a82 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -543,6 +543,7 @@ def add_submission_history(root)
           end
           schemeList = get_reaction_table(params[:id])
           publication = Publication.find_by(element_id: params[:id], element_type: 'Reaction')
+          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
           published_user = User.find(publication.published_by) unless publication.nil?
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
@@ -577,6 +578,7 @@ def add_submission_history(root)
           molecule = Molecule.find(sample.molecule_id) unless sample.nil?
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
+          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
           # embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{sample.id}")&.first&.label
@@ -700,7 +702,7 @@ def query_embargo
       namespace :reviewing do
         helpers do
           # TODO: mv to model
-          def save_comments(root, comment, action, his = true)
+          def save_comments(root, comment, checklist, reviewComments, action, his = true)
             review = root.review || {}
             review_history = review['history'] || []
             current = review_history.last
@@ -721,6 +723,14 @@ def save_comments(root, comment, action, his = true)
               review['history'] = review_history
             end
 
+            if checklist&.length.positive?
+              revst = review['checklist'] || {}
+              checklist.each { |k, v|
+                revst[k] = v['status'] == true ? { status: v['status'], user: current_user.name, updated_at: Time.now.strftime('%d-%m-%Y %H:%M:%S') } : { status: false } unless revst[k] && revst[k]['status'] == v['status']
+              }
+              review['checklist'] = revst
+            end
+            review['reviewComments'] = reviewComments if reviewComments.present?
             root.update!(review: review)
           end
 
@@ -746,6 +756,7 @@ def save_comment(root, comment)
           requires :type, type: String, desc: 'Type', values: %w[sample reaction]
           optional :comments, type: Hash
           optional :comment, type: String
+          optional :checklist, type: Hash
         end
 
         after_validation do
@@ -757,19 +768,21 @@ def save_comment(root, comment)
         end
 
         post :comments do
-          save_comments(@root_publication, params[:comment], nil, false)
+          save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], nil, false)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
+          { "#{params[:type]}": element, review: his || @root_publication.review }
         end
 
         post :comment do
           save_comment(@root_publication, params[:comments]) unless params[:comments].nil?
-          @root_publication.review
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
+          { review: his || @root_publication.review }
         end
 
         post :reviewed do
-          save_comments(@root_publication, params[:comment], 'review')
+          save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'review')
           # element_submit(@root_publication)
           @root_publication.update_state(Publication::STATE_REVIEWED)
           @root_publication.process_element(Publication::STATE_REVIEWED)
@@ -777,23 +790,24 @@ def save_comment(root, comment)
           # @root_publication.element
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
+          { "#{params[:type]}": element, review: @root_publication.review }
         end
 
         post :submit do
-          save_comments(@root_publication, params[:comment], 'revision')
+          save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'revision')
           element_submit(@root_publication)
           @root_publication.update_state(Publication::STATE_PENDING)
           @root_publication.process_element(Publication::STATE_PENDING)
           @root_publication.inform_users(Publication::STATE_PENDING)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
+          { "#{params[:type]}": element, review: his || @root_publication.review }
 
         end
 
         post :accepted do
-          save_comments(@root_publication, params[:comment], 'accepted', false)
+          save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'accepted', false)
           element_submit(@root_publication)
           public_literature(@root_publication)
           # element_accepted(@root_publication)
@@ -804,17 +818,18 @@ def save_comment(root, comment)
 
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'], message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
+          { "#{params[:type]}": element, review: @root_publication.review, message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
 
         end
         post :declined do
-          save_comments(@root_publication, params[:comment], 'declined', false)
+          save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'declined', false)
           @root_publication.update_state('declined')
           @root_publication.process_element('declined')
           @root_publication.inform_users(Publication::STATE_DECLINED, current_user.id)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, history: @root_publication.review && @root_publication.review['history'] }
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
+          { "#{params[:type]}": element, review: his || @root_publication.review }
         end
       end
 
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index c5ab15fe5..1928ade70 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -437,11 +437,11 @@ $bs-successcolor: #5cb85c;
       align-items: center;
       flex: 1;
       .heading {
-        font-size: xx-large;
-        font-weight: bold;
+        font-size: 1.8vmax;
+        // font-weight: bold;
       }
       .list {
-        font-size: larger;
+        font-size: 1vmax;
       }
     }
     .row .even {
@@ -479,7 +479,7 @@ $bs-successcolor: #5cb85c;
         font-size: 5vmin;
       }
       .tit {
-        font-size: large;
+        font-size: 1.8vmin;
       }
       .i-ext {
         font-size: 4vmin;
@@ -488,15 +488,14 @@ $bs-successcolor: #5cb85c;
     }
     .dtl .rr {
       text-align: left;
+      font-size: 1.5vmin;
       .tit {
+        color: $statisticcolor;
         font-size: initial;
         font-weight: initial;
-        button {
-          padding: 0px;
-        }
       }
       .cnt {
-        font-size: xx-large;
+        font-size: 3vmin;
         font-weight: bolder;
       }
       .italic-desc {
diff --git a/app/models/collection.rb b/app/models/collection.rb
index 8b6a2fec5..4fa0c0293 100644
--- a/app/models/collection.rb
+++ b/app/models/collection.rb
@@ -190,13 +190,21 @@ def self.reject_shared(user_id, collection_id)
   end
 
   def self.all_embargos(user_id)
-    Collection.where(
-      <<~SQL
-        id in (
-          select c2.id from collections c2 where c2.ancestry in (select c.id::text from collections c where c.label = 'Published Elements') union
-          select co.id from collections co where co.ancestry in (select c.id::text from collections c, sync_collections_users scu
-          where c.label = 'Embargoed Publications' and scu.collection_id = c.id and scu.user_id = #{user_id}))
-      SQL
-    )
+    if user_id.nil?
+        Collection.where(
+          <<~SQL
+            id in (select c2.id from collections c2 where c2.ancestry in (select c.id::text from collections c where c.label = 'Published Elements'))
+          SQL
+        )
+      else
+        Collection.where(
+          <<~SQL
+            id in (
+              select c2.id from collections c2 where c2.ancestry in (select c.id::text from collections c where c.label = 'Published Elements') union
+              select co.id from collections co where co.ancestry in (select c.id::text from collections c, sync_collections_users scu
+              where c.label = 'Embargoed Publications' and scu.collection_id = c.id and scu.user_id = #{user_id}))
+          SQL
+        )
+      end
   end
 end
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index d9f3b94a7..0e782d8e6 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -13,6 +13,7 @@ export default class ReactionDetailsRepoComment extends Component {
       reviewLevel: 0,
     };
     this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
@@ -21,21 +22,19 @@ export default class ReactionDetailsRepoComment extends Component {
     RepositoryFetcher.fetchReaction(this.props.reactionId, false)
       .then((data) => {
         LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewReaction
         if (data.reaction && data.reaction.reviewLevel === 0) {
           //console.log(data);
         } else {
-          let history = [];
-
+          let review = {};
           if (data.reaction && data.reaction.publication) {
             const { publication } = data.reaction;
-            history = (publication.review && publication.review.history) || [];
+            review = publication.review || {};
           }
           this.setState({
             reaction: data.reaction,
             reviewLevel: data.reviewLevel,
             isSubmitter: data.isSubmitter || false,
-            historyInfo: history,
+            review,
           });
         }
       }).catch((errorMessage) => {
@@ -52,6 +51,10 @@ export default class ReactionDetailsRepoComment extends Component {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
+  handleReviewUpdate(review) {
+    this.setState({ review });
+  }
+
   render() {
     const { reaction } = this.state;
     return reaction && reaction.publication ?
@@ -61,7 +64,8 @@ export default class ReactionDetailsRepoComment extends Component {
           canComment
           reviewLevel={this.state.reviewLevel}
           isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
+          onReviewUpdate={this.handleReviewUpdate}
+          review={this.state.review || {}}
           canClose={false}
           buttons={['Comments']}
         />) : <div>No Publication found</div>;
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
index 91d0a3dec..4d4c8a4c9 100644
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ b/app/packs/src/components/SampleDetailsRepoComment.js
@@ -15,6 +15,7 @@ export default class SampleDetailsRepoComment extends Component {
       isSubmitter: false,
     };
     this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
@@ -30,7 +31,7 @@ export default class SampleDetailsRepoComment extends Component {
           const publication = data.publication || {};
           this.setState({
             element: data,
-            historyInfo: (publication.review && publication.review.history) || [],
+            review: publication?.review || {},
             reviewLevel: data.reviewLevel,
             isSubmitter: data.isSubmitter || false
           });
@@ -49,6 +50,10 @@ export default class SampleDetailsRepoComment extends Component {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
+  handleReviewUpdate(review) {
+    this.setState({ review });
+  }
+
   render() {
     const { element } = this.state;
     return element && element.sample && element.publication ?
@@ -58,7 +63,8 @@ export default class SampleDetailsRepoComment extends Component {
           canComment
           reviewLevel={this.state.reviewLevel}
           isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : {}}
+          onReviewUpdate={this.handleReviewUpdate}
+          review={this.state.review || {}}
           canClose={false}
           buttons={['Comments']}
         />) : <div>No Publication found</div>;
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index fca0db577..aebc2a653 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -306,10 +306,10 @@ class PublicActions {
     }
   }
 
-  reviewPublish(id, type, comment, action) {
-    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action)
+  reviewPublish(id, type, comment, action, checklist, reviewComments) {
+    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
       .then((result) => {
-        dispatch({ id :id, element: result[`${type}`], type: type, history: result.history, comment: comment, action: action })
+        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action })
       }).catch((errorMessage) => {
         console.log(errorMessage);
       });};
diff --git a/app/packs/src/components/common/RepoCommentBtn.js b/app/packs/src/components/common/RepoCommentBtn.js
index 1f6ebe838..da5bf306e 100644
--- a/app/packs/src/components/common/RepoCommentBtn.js
+++ b/app/packs/src/components/common/RepoCommentBtn.js
@@ -5,16 +5,16 @@ import { CommentComponent } from '../../libHome/RepoReviewCommon';
 
 const RepoCommentBtn = (props) => {
   const {
-    field, orgInfo, onShow, reviewLevel, history
+    field, orgInfo, onShow, reviewLevel, review, isSubmitter
   } = props;
 
+  const history = review?.history || [];
   const current = (history && history.slice(-1).pop()) || {};
-//  const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
 
   const hasComment = (current.comments && field in current.comments) || false;
   const comment = CommentComponent(field, history) || '';
 
-  const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
+  const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (isSubmitter === true && current.state === 'reviewed')) || false;
 
   if (isEditable === false) {
     return <span>{comment}</span>;
@@ -36,9 +36,10 @@ const RepoCommentBtn = (props) => {
 
 RepoCommentBtn.propTypes = {
   onShow: PropTypes.func.isRequired,
-  history: PropTypes.array,
+  review: PropTypes.object,
   comments: PropTypes.object,
   field: PropTypes.string,
+  isSubmitter: PropTypes.bool,
   orgInfo: PropTypes.string,
   state: PropTypes.string,
   reviewLevel: PropTypes.number,
@@ -46,8 +47,9 @@ RepoCommentBtn.propTypes = {
 };
 
 RepoCommentBtn.defaultProps = {
-  history: [],
+  review: {},
   comments: null,
+  isSubmitter: false,
   field: '',
   orgInfo: '',
   state: '',
diff --git a/app/packs/src/components/common/RepoCommentModal.js b/app/packs/src/components/common/RepoCommentModal.js
index 471accef7..e1b7c5ea3 100644
--- a/app/packs/src/components/common/RepoCommentModal.js
+++ b/app/packs/src/components/common/RepoCommentModal.js
@@ -8,10 +8,11 @@ export default class RepoCommentModal extends React.Component {
   render() {
     const {
       elementId, elementType, show, onHide, onUpdate, field, orgInfo,
-      history, textAreaAttrs, reviewLevel
+      review, textAreaAttrs, reviewLevel, isSubmitter
     } = this.props;
 
-    const current = (history && history.length > 0 && history.slice(-1).pop()) || {};
+    const history = review?.history || [];
+    const current = (history.length > 0 && history.slice(-1).pop()) || {};
     const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
 
     const defaultAttrs = {
@@ -20,7 +21,7 @@ export default class RepoCommentModal extends React.Component {
       }
     };
 
-    const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
+    const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (isSubmitter === true && current.state === 'reviewed')) || false;
     if (show) {
       return (
         <div>
@@ -75,8 +76,9 @@ RepoCommentModal.propTypes = {
   elementId: PropTypes.number.isRequired,
   elementType: PropTypes.string.isRequired,
   show: PropTypes.bool,
+  isSubmitter: PropTypes.bool,
   field: PropTypes.string,
-  history: PropTypes.array,
+  review: PropTypes.object,
   orgInfo: PropTypes.string,
   reviewLevel: PropTypes.number,
   onUpdate: PropTypes.func.isRequired,
@@ -85,8 +87,9 @@ RepoCommentModal.propTypes = {
 
 RepoCommentModal.defaultProps = {
   show: false,
-  history: [],
+  review: {},
   reviewLevel: 0,
+  isSubmitter: false,
   field: '',
   orgInfo: '',
 };
diff --git a/app/packs/src/components/common/RepoReviewModal.js b/app/packs/src/components/common/RepoReviewModal.js
index 74fe9aa33..5f2e1085f 100644
--- a/app/packs/src/components/common/RepoReviewModal.js
+++ b/app/packs/src/components/common/RepoReviewModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl, OverlayTrigger, Table, Tooltip } from 'react-bootstrap';
+import { Modal, Button, ButtonToolbar, FormControl, OverlayTrigger, Table, Tooltip, Checkbox, Row, Col } from 'react-bootstrap';
 import uuid from 'uuid';
 import { isEmpty } from 'lodash';
 import RepoReviewHisColumns from './RepoReviewHisColumns';
@@ -23,14 +23,58 @@ export default class RepoReviewModal extends React.Component {
     }
   }
 
+  handleToggleReviewStatus(e, col) {
+    const { review } = this.props;
+    const checklist = review.checklist || {};
+    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
+    checklist[col].status = e.target.checked;
+    review.checklist = checklist;
+    this.props.onUpdate(review);
+  }
+
+
+  renderReviewNotes() {
+    const { review, reviewLevel } = this.props;
+    const checklist = review?.checklist || {};
+    const reviewComments = review?.reviewComments || '';
+    if (reviewLevel !== 3) return (<div />);
+
+    let dtbl = '', ddes = '', dafm = '', dact = '', dohd = '';
+    if (checklist?.tbl?.status === true && checklist?.tbl?.user) dtbl = ` - by ${checklist?.tbl?.user} on ${checklist?.tbl?.updated_at} `;
+    if (checklist?.des?.status === true && checklist?.des?.user) ddes = ` - by ${checklist?.des?.user} on ${checklist?.des?.updated_at} `;
+    if (checklist?.afm?.status === true && checklist?.afm?.user) dafm = ` - by ${checklist?.afm?.user} on ${checklist?.afm?.updated_at} `;
+    if (checklist?.act?.status === true && checklist?.act?.user) dact = ` - by ${checklist?.act?.user} on ${checklist?.act?.updated_at} `;
+    if (checklist?.ohd?.status === true && checklist?.ohd?.user) dohd = ` - by ${checklist?.ohd?.user} on ${checklist?.ohd?.updated_at} `;
+
+    return (
+      <div style={{ padding: '10px 0px' }}>
+        <Col lg={4} md={4} sm={12} style={{ padding: '0px' }}>
+          <b>Review Status Information (reviewer only)</b>
+          <Checkbox checked={checklist?.tbl?.status} onChange={e => this.handleToggleReviewStatus(e, 'tbl')}>table values {dtbl}</Checkbox>
+          <Checkbox checked={checklist?.des?.status} onChange={e => this.handleToggleReviewStatus(e, 'des')}>description {ddes}</Checkbox>
+          <Checkbox checked={checklist?.afm?.status} onChange={e => this.handleToggleReviewStatus(e, 'afm')}>analysis format {dafm}</Checkbox>
+          <Checkbox checked={checklist?.act?.status} onChange={e => this.handleToggleReviewStatus(e, 'act')}>analysis content {dact}</Checkbox>
+          <Checkbox checked={checklist?.ohd?.status} onChange={e => this.handleToggleReviewStatus(e, 'ohd')}>on hold {dohd}</Checkbox>
+        </Col>
+        <Col lg={8} md={8} sm={12} style={{ padding: '0px' }}>
+          <b>Reviewer notes (reviewer only)</b>
+          <FormControl
+            componentClass="textarea"
+            style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
+            defaultValue={reviewComments || ''}
+            inputRef={(m) => { this.privateReviewInput = m; }}
+          />
+        </Col>
+      </div>);
+  }
+
   renderComments() {
     const { idxDetail } = this.state;
-    const { reviewLevel, history } = this.props;
+    const { reviewLevel, review } = this.props;
+    const history = review?.history || [];
 
     const curObj = (history && history.length > 0 && history.slice(-1).pop()) || {};
 
-    //const isEditable = ((reviewLevel === 3 && curObj.state === 'pending') || (reviewLevel === 2 && curObj.state === 'reviewed')) || false;
-
     let historyTbl = null;
 
     if (history && history.length > 0) {
@@ -56,6 +100,7 @@ export default class RepoReviewModal extends React.Component {
       ));
     }
 
+
     return (
       <div>
         <div >
@@ -81,17 +126,18 @@ export default class RepoReviewModal extends React.Component {
           defaultValue={curObj.comment || ''}
           inputRef={(m) => { this.summaryInput = m; }}
         />
+        {this.renderReviewNotes()}
       </div>
     );
   }
 
   render() {
     const {
-      show, elementId, action, onSubmit, onHide, reviewLevel, history
+      show, elementId, action, onSubmit, onHide, reviewLevel, review, isSubmitter
     } = this.props;
-
-    const currComment = (history && history.length > 0 && history.slice(-1).pop()) || {}
-    const isEditable = ((reviewLevel === 3 && currComment.state === 'pending') || (reviewLevel === 2 && currComment.state === 'reviewed')) || false;
+    const history = review?.history || [];
+    const currComment = (history.length > 0 && history.slice(-1).pop()) || {};
+    const isEditable = ((reviewLevel === 3 && currComment.state === 'pending') || (isSubmitter === true && currComment.state === 'reviewed')) || false;
 
     let title = action;
     if (reviewLevel === 2 && action === 'Decline') {
@@ -133,8 +179,10 @@ export default class RepoReviewModal extends React.Component {
                   onClick={() =>
                     onSubmit(
                       elementId,
-                      this.summaryInput.value,
-                      action
+                      this.summaryInput?.value,
+                      action,
+                      this.props.review?.checklist || {},
+                      this.privateReviewInput?.value,
                     )
                   }
                 > {title}
@@ -153,14 +201,17 @@ RepoReviewModal.propTypes = {
   elementId: PropTypes.number.isRequired,
   action: PropTypes.string.isRequired,
   show: PropTypes.bool.isRequired,
-  history: PropTypes.array,
+  review: PropTypes.object,
+  isSubmitter: PropTypes.bool,
   reviewLevel: PropTypes.number,
   onSubmit: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
   onHide: PropTypes.func.isRequired
 };
 
 RepoReviewModal.defaultProps = {
   show: false,
+  isSubmitter: false,
   reviewLevel: 0,
-  history: []
+  review: {}
 };
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index a644c6d7d..66ec57a57 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -40,7 +40,7 @@ export default class PublicFetcher {
   }
 
   static fetchAdvancedValues(advType, name) {
-    return fetch(`/api/v1/public/find_adv_valuess.json?name=${name}&adv_type=${advType}`, {
+    return fetch(`/api/v1/public/find_adv_values.json?name=${name}&adv_type=${advType}`, {
       credentials: 'same-origin'
     }).then(response => response.json())
       .then(json => json)
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index 3c26ed88a..7b300137b 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -333,7 +333,7 @@ export default class RepositoryFetcher {
         console.log(errorMessage);
       });
   }
-  static repoReviewPublish(id, type, comment, action) {
+  static repoReviewPublish(id, type, comment, action, checklist = {}, reviewComments) {
     let api = '';
     if (action === 'Comments') {
       api = '/api/v1/repository/reviewing/comments';
@@ -357,7 +357,7 @@ export default class RepositoryFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        id, type, comment
+        id, type, comment, checklist, reviewComments
       })
     }).then(response => response.json())
       .catch((errorMessage) => {
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 6598da99d..51f85ca87 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -102,7 +102,7 @@ class PublicStore {
     const {
       reactions, page, pages, perPage
     } = results;
-    const listType = reactions[0].taggable_data.scheme_only ? 'scheme' : 'reaction';
+    const listType = (reactions && reactions[0] && reactions[0].taggable_data.scheme_only ? 'scheme' : 'reaction') || 'reaction';
     this.setState({
       reactions, page, pages, perPage, listType, guestPage: 'publications'
     });
@@ -278,22 +278,17 @@ class PublicStore {
   }
 
   handelUpdateComment(result) {
-    this.setState({ historyInfo: result.history });
+    this.setState({ review: result.review });
   }
 
   handelReviewPublish(results) {
-    const his = results.history;
-
-    this.setState({
-      historyInfo: his,
-    });
-
+    // const { history, checklist, reviewComments } = results.review;
+    this.setState({ review: results.review });
     PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
   }
 
   handleDisplayReviewReaction(result) {
     const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-
     if (result.element && result.element.reviewLevel === 0) {
       Aviator.navigate('/home');
     } else {
@@ -302,7 +297,7 @@ class PublicStore {
         elementType: 'reaction',
         queryId: result.id,
         currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
+        review: publication?.review || {},
         reviewLevel: result.element.reviewLevel,
         isSubmitter: (result.element && result.element.isSubmitter) || false
       });
@@ -321,7 +316,7 @@ class PublicStore {
         elementType: 'sample',
         queryId: result.id,
         currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
+        review: publication?.review || {},
         isSubmitter: (result.element && result.element.isSubmitter) || false,
         reviewLevel: result.element && result.element.reviewLevel,
       });
@@ -362,7 +357,7 @@ class PublicStore {
         elementType,
         queryId: result.id,
         currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
+        review: publication?.review || {},
         reviewLevel: result.element.reviewLevel
       });
       Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 827138806..7fc3736c5 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -2213,9 +2213,10 @@ const CommentBtn = (props) => {
   const {
     canComment,
     reviewLevel,
+    isSubmitter,
     onShow,
     field,
-    history,
+    review,
     orgInfo
   } = props;
 
@@ -2224,7 +2225,8 @@ const CommentBtn = (props) => {
     <span>
       <RepoCommentBtn
         field={field}
-        history={history}
+        review={review}
+        isSubmitter={isSubmitter}
         orgInfo={orgInfo}
         reviewLevel={reviewLevel}
         onShow={() => onShow(true, field, orgInfo)}
@@ -2235,13 +2237,19 @@ const CommentBtn = (props) => {
 
 CommentBtn.propTypes = {
   canComment: PropTypes.bool.isRequired,
-  history: PropTypes.array.isRequired,
+  review: PropTypes.object.isRequired,
+  isSubmitter: PropTypes.bool,
   reviewLevel: PropTypes.number.isRequired,
   onShow: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
   orgInfo: PropTypes.string.isRequired
 };
 
+CommentBtn.defaultProps = {
+  isSubmitter: false
+};
+
+
 const Doi = (props) => {
   const {
     type, id, doi, isPublished
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
index 075330b3d..acc1c76c9 100644
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ b/app/packs/src/libHome/RepoElementDetails.js
@@ -39,7 +39,7 @@ export default class RepoElementDetails extends Component {
           element={currentElement}
           reviewLevel={this.state.reviewLevel}
           isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
+          review={this.state.review || {}}
         />);
       case 'reaction': return (
         <RepoReactionDetails
@@ -47,7 +47,7 @@ export default class RepoElementDetails extends Component {
           reaction={currentElement}
           reviewLevel={this.state.reviewLevel}
           isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
+          review={this.state.review || {}}
         />);
       default: return <span />;
     }
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 99b3dad0c..eecf615fe 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -72,6 +72,7 @@ export default class RepoReactionDetails extends Component {
     this.handleToggle = this.handleToggle.bind(this);
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
     this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
     this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
@@ -131,12 +132,16 @@ export default class RepoReactionDetails extends Component {
     this.setState({ showReviewModal, btnAction });
   }
 
-  handleSubmitReview(elementId, comments, comment, action) {
+  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'reaction', comments, comment, action);
+    PublicActions.reviewPublish(elementId, 'reaction', comment, action, checklist, reviewComments);
     this.setState({ showReviewModal: false });
   }
 
+  handleReviewUpdate(review) {
+    this.props.onReviewUpdate(review);
+  }
+
   handleCommentBtn(show, field, orgInfo) {
     this.setState({
       showCommentModal: show,
@@ -170,7 +175,7 @@ export default class RepoReactionDetails extends Component {
     const {
       canComment,
       reviewLevel,
-      history
+      review
     } = this.props;
 
     const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
@@ -217,7 +222,6 @@ export default class RepoReactionDetails extends Component {
             bodyAttrs={bodyAttrs}
             onToggle={this.handleToggle}
             reviewLevel={reviewLevel}
-            history={history}
             onComment={this.handleCommentBtn}
             propInfo={properties}
             canComment={canComment}
@@ -393,7 +397,7 @@ export default class RepoReactionDetails extends Component {
       canComment,
       reviewLevel,
       isSubmitter,
-      history,
+      review,
       canClose,
     } = this.props;
     let { buttons } = this.props;
@@ -459,7 +463,6 @@ export default class RepoReactionDetails extends Component {
         </span>
       );
     }
-
     return (
       <div style={{ border: 'none' }}>
         <div >
@@ -474,7 +477,7 @@ export default class RepoReactionDetails extends Component {
                   isSubmitter={isSubmitter}
                   taggData={taggData}
                   schemeOnly={schemeOnly}
-                  currComment={(history && history.length > 0 && history.slice(-1).pop()) || {}}
+                  currComment={(review?.history && review?.history.length > 0 && review?.history.slice(-1).pop()) || {}}
                 /> : ''
             }
             {canClose ? <ClosePanel element={reaction} /> : ''}
@@ -521,7 +524,8 @@ export default class RepoReactionDetails extends Component {
                 elementType="reaction"
                 field={this.state.commentField}
                 orgInfo={this.state.originInfo}
-                history={this.props.history}
+                review={this.props.review}
+                isSubmitter={isSubmitter}
                 reviewLevel={reviewLevel}
                 onUpdate={this.handleSubmitComment}
                 onHide={() => this.setState({ showCommentModal: false })}
@@ -531,8 +535,10 @@ export default class RepoReactionDetails extends Component {
                 elementId={reaction.id}
                 action={this.state.btnAction}
                 reviewLevel={reviewLevel}
-                history={history}
+                isSubmitter={isSubmitter}
+                review={this.props.review}
                 onSubmit={this.handleSubmitReview}
+                onUpdate={this.handleReviewUpdate}
                 onHide={() => this.setState({ showReviewModal: false })}
               />
             </div>
@@ -549,9 +555,10 @@ RepoReactionDetails.propTypes = {
   reviewLevel: PropTypes.number,
   isSubmitter: PropTypes.bool,
   isReview: PropTypes.bool,
-  history: PropTypes.array,
+  review: PropTypes.object,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
+  onReviewUpdate: PropTypes.func,
 };
 
 RepoReactionDetails.defaultProps = {
@@ -560,7 +567,8 @@ RepoReactionDetails.defaultProps = {
   isSubmitter: false,
   reviewLevel: 0,
   isReview: false,
-  history: [],
+  review: {},
   canClose: true,
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  onReviewUpdate: () => {},
 };
diff --git a/app/packs/src/libHome/RepoReactionSchemeInfo.js b/app/packs/src/libHome/RepoReactionSchemeInfo.js
index e24481c5f..e4810b36e 100644
--- a/app/packs/src/libHome/RepoReactionSchemeInfo.js
+++ b/app/packs/src/libHome/RepoReactionSchemeInfo.js
@@ -67,13 +67,11 @@ RepoReactionSchemeInfo.propTypes = {
   onToggle: PropTypes.func.isRequired,
   reviewLevel: PropTypes.number,
   propInfo: PropTypes.string,
-  history: PropTypes.array,
   onComment: PropTypes.func,
   canComment: PropTypes.bool,
 };
 
 RepoReactionSchemeInfo.defaultProps = {
-  history: [],
   reviewLevel: 0,
   propInfo: '',
   onComment: () => {},
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
index 6ec0afdc8..7d9fba3a2 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import RepoMetadataModal from '../components/common/RepoMetadataModal';
 import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
 
-const showButton = (btn, func, reviewLevel, pubState) => {
+const showButton = (btn, func, reviewLevel, pubState, isSubmitter) => {
   let title = btn;
   let btnBsStyle = '';
   let btnIcon = '';
@@ -44,7 +44,7 @@ const showButton = (btn, func, reviewLevel, pubState) => {
     default:
       break;
   }
-  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (reviewLevel === 2 && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
+  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (isSubmitter === true && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
     <OverlayTrigger
       key={`ot_${title}`}
       placement="top"
@@ -88,7 +88,7 @@ const RepoReviewButtonBar = props =>
       }
       {
         props.buttons.filter(b => b !== 'Comments').map(b =>
-          showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state))
+          showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state, props.isSubmitter))
       }
       <RepoMetadataModal
         elementId={props.element.id}
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
index d8e580d7b..db5524e7c 100644
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ b/app/packs/src/libHome/RepoReviewDetails.js
@@ -8,12 +8,13 @@ export default class RepoReviewDetails extends Component {
     super(props);
     this.state = {
       element: props.element,
-      history: [],
+      review: {},
       reviewLevel: 0,
       isSubmitter: false
     };
 
     this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
@@ -28,6 +29,10 @@ export default class RepoReviewDetails extends Component {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
+  handleReviewUpdate(review) {
+    this.setState({ review });
+  }
+
   switchTypeRender() {
     const { currentElement, elementType } = this.state;
     if (typeof (currentElement) === 'undefined' || !currentElement) {
@@ -42,7 +47,8 @@ export default class RepoReviewDetails extends Component {
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
             isReview={true}
-            history={this.state.historyInfo ? this.state.historyInfo : []}
+            onReviewUpdate={this.handleReviewUpdate}
+            review={this.state.review}
           />);
       case 'sample':
         return (
@@ -51,7 +57,8 @@ export default class RepoReviewDetails extends Component {
             canComment
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
-            history={this.state.historyInfo ? this.state.historyInfo : []}
+            onReviewUpdate={this.handleReviewUpdate}
+            review={this.state.review}
           />);
       default: return <span />;
     }
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 73764eba5..9befa9f92 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -24,6 +24,7 @@ export default class RepoSampleDetails extends Component {
     };
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
     this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
     this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
@@ -32,12 +33,16 @@ export default class RepoSampleDetails extends Component {
     this.setState({ showReviewModal, btnAction });
   }
 
-  handleSubmitReview(elementId, comment, action) {
+  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'sample', comment, action);
+    PublicActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
     this.setState({ showReviewModal: false });
   }
 
+  handleReviewUpdate(review) {
+    this.props.onReviewUpdate(review);
+  }
+
   handleCommentBtn(show, field, orgInfo) {
     this.setState({
       showCommentModal: show,
@@ -65,11 +70,12 @@ export default class RepoSampleDetails extends Component {
       canComment,
       reviewLevel,
       isSubmitter,
-      history,
+      review,
       canClose,
-      buttons
+      buttons,
     } = this.props;
 
+    const history = review?.history || [];
     if (typeof (element) === 'undefined' || !element) {
       return <div />;
     }
@@ -173,8 +179,9 @@ export default class RepoSampleDetails extends Component {
                   elementType="Sample"
                   field={this.state.commentField}
                   orgInfo={this.state.originInfo}
+                  isSubmitter={isSubmitter}
                   reviewLevel={reviewLevel}
-                  history={history}
+                  review={review || {}}
                   onUpdate={this.handleSubmitComment}
                   onHide={() => this.setState({ showCommentModal: false })}
                 />
@@ -182,9 +189,11 @@ export default class RepoSampleDetails extends Component {
                   show={this.state.showReviewModal}
                   elementId={sample.id}
                   action={this.state.btnAction}
+                  isSubmitter={isSubmitter}
                   reviewLevel={reviewLevel}
-                  history={history}
+                  review={review || {}}
                   onSubmit={this.handleSubmitReview}
+                  onUpdate={this.handleReviewUpdate}
                   onHide={() => this.setState({ showReviewModal: false })}
                 />
               </div> : ''
@@ -202,9 +211,10 @@ RepoSampleDetails.propTypes = {
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
   isSubmitter: PropTypes.bool,
-  history: PropTypes.array,
+  review: PropTypes.object,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
+  onReviewUpdate: PropTypes.func,
 };
 
 RepoSampleDetails.defaultProps = {
@@ -212,7 +222,8 @@ RepoSampleDetails.defaultProps = {
   canComment: false,
   reviewLevel: 0,
   isSubmitter: false,
-  history: [],
+  review: {},
   canClose: true,
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  onReviewUpdate: () => {},
 };

From b5aee6f5398ae567b3393ed2dd67e2fad69c53ec Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 26 Oct 2022 15:53:01 +0200
Subject: [PATCH 076/258] the focus is on the selected record in the list when
 redirecting from a DOI

---
 app/assets/stylesheets/repo_home.scss         |  3 ++
 .../src/components/actions/PublicActions.js   | 10 +++---
 .../src/components/fetchers/PublicFetcher.js  |  3 +-
 .../src/components/stores/PublicStore.js      | 21 ++++++++----
 app/packs/src/libHome/RepoHome.js             | 10 ++++--
 app/packs/src/libHome/RepoNavListTypes.js     |  6 ++++
 app/packs/src/libHome/RepoPubl.js             | 34 ++++++++++---------
 app/packs/src/libHome/homeRoutes.js           |  7 ++--
 8 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 app/packs/src/libHome/RepoNavListTypes.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 1928ade70..602130e2e 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -493,6 +493,9 @@ $bs-successcolor: #5cb85c;
         color: $statisticcolor;
         font-size: initial;
         font-weight: initial;
+        button {
+          padding: unset;
+        }
       }
       .cnt {
         font-size: 3vmin;
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index aebc2a653..af37f7244 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -1,11 +1,11 @@
-import alt from '../alt'
-import PublicFetcher from '../fetchers/PublicFetcher'
+import alt from '../alt';
+import PublicFetcher from '../fetchers/PublicFetcher';
 import NotificationActions from './NotificationActions';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import SearchFetcher from '../fetchers/SearchFetcher';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 class PublicActions {
-
   refreshPubElements(type) {
     return type;
   }
@@ -113,10 +113,10 @@ class PublicActions {
     }
   }
 
-  displayMolecule(id, anchor = '', advFlag = false, advType = '', advVal = '') {
+  displayMolecule(id, anchor = '', advFlag = false, advType = '', advVal = '', listType = RepoNavListTypes.SAMPLE) {
     return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
       .then((result) => {
-        dispatch({moleculeData: result, id: id, anchor: anchor})
+        dispatch({moleculeData: result, id: id, anchor: anchor, listType})
       }).catch((errorMessage) => {
         console.log(errorMessage)
       })
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 66ec57a57..09c66d5f1 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -17,7 +17,8 @@ export default class PublicFetcher {
         molecules: json.molecules.map(m => new Molecule(m)),
         page: parseInt(response.headers.get('X-Page')),
         pages: parseInt(response.headers.get('X-Total-Pages')),
-        perPage: parseInt(response.headers.get('X-Per-Page'))
+        perPage: parseInt(response.headers.get('X-Per-Page')),
+        listType: params.listType
       }))).catch((errorMessage) => { console.log(errorMessage); });
   }
 
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 51f85ca87..243e00727 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -3,6 +3,7 @@ import alt from '../alt';
 import PublicActions from '../actions/PublicActions';
 import ElementActions from '../actions/ElementActions';
 import UIActions from '../actions/UIActions';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 class PublicStore {
   constructor() {
@@ -91,10 +92,10 @@ class PublicStore {
 
   handleGetMolecules(results) {
     const {
-      molecules, page, pages, perPage
+      molecules, page, pages, perPage, listType
     } = results;
     this.setState({
-      molecules, page, pages, perPage, listType: 'sample', guestPage: 'publications'
+      molecules, page, pages, perPage, listType, guestPage: 'publications'
     });
   }
 
@@ -168,23 +169,31 @@ class PublicStore {
   }
 
   handleDisplayMolecule(moleculeList) {
+    let cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
+    if (this.molecules.length > 0) cb = () => {};
     this.setState({
       guestPage: 'publications',
       elementType: 'molecule',
       queryId: moleculeList.id,
-      currentElement: moleculeList.moleculeData
-    });
+      currentElement: moleculeList.moleculeData,
+      listType: moleculeList.listType
+    }, cb());
     const suf = (moleculeList.anchor && moleculeList.anchor !== 'undefined') ? `#${moleculeList.anchor}` : '';
     Aviator.navigate(`/publications/molecules/${moleculeList.id}${suf}`, { silent: true });
   }
 
   handleDisplayReaction(reactionList) {
+    const listType = reactionList.reactionData.publication.taggable_data.scheme_only ?
+      RepoNavListTypes.SCHEME : RepoNavListTypes.REACTION;
+    let cb = () => PublicActions.getReactions();
+    if (this.reactions.length > 0) cb = () => {};
     this.setState({
       guestPage: 'publications',
       elementType: 'reaction',
       queryId: reactionList.id,
-      currentElement: reactionList.reactionData
-    });
+      currentElement: reactionList.reactionData,
+      listType
+    }, cb());
     Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
   }
 
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index c281c71ea..6d4da3d21 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -4,6 +4,7 @@ import SVG from 'react-inlinesvg';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
 import { HomeFeature } from './RepoCommon';
+import RepoNavListTypes from './RepoNavListTypes';
 
 const PartnersInfo = (info) => {
   const { header, img, content } = info;
@@ -182,14 +183,17 @@ const StaticsBoard = (params) => {
     const stsAnalysisCnt = stsAnalysisSort
       .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
     const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = { sample: 'publications=sample', reaction: 'publications=reaction' };
+    const pubPage = {
+      sample: `publications=${RepoNavListTypes.SAMPLE}`,
+      reaction: `publications=${RepoNavListTypes.REACTION}`
+    };
     return (
       <Row className="repo-statistic">
         <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rl">
               <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: RepoNavListTypes.SAMPLE }); }}>
                   <i className="icon-sample" />
                 </Button>
               </OverlayTrigger>
@@ -200,7 +204,7 @@ const StaticsBoard = (params) => {
             <Row className="rr">
               <div className="tit">
                 <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: RepoNavListTypes.SAMPLE }); }}>
                     published
                   </Button>
                 </OverlayTrigger>
diff --git a/app/packs/src/libHome/RepoNavListTypes.js b/app/packs/src/libHome/RepoNavListTypes.js
new file mode 100644
index 000000000..9e766f5e7
--- /dev/null
+++ b/app/packs/src/libHome/RepoNavListTypes.js
@@ -0,0 +1,6 @@
+export default Object.freeze({
+  MOLECULE_ARCHIVE: 'moleculeArchive',
+  REACTION: 'reaction',
+  SAMPLE: 'sample',
+  SCHEME: 'scheme'
+});
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 007bf7b93..691bc1784 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -18,6 +18,7 @@ import StructureEditorModal from '../components/structure_editor/StructureEditor
 import LoadingActions from '../components/actions/LoadingActions';
 import RepoReactionList from './RepoReactionList';
 import RepoMoleculeList from './RepoMoleculeList';
+import RepoNavListTypes from './RepoNavListTypes';
 
 const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
   <RepoMoleculeList
@@ -84,7 +85,7 @@ export default class RepoPubl extends Component {
       queryMolfile: null,
       searchType: 'similar',
       tanimotoThreshold: 0.7,
-      listType: props.listType || 'reaction',
+      listType: props.listType || RepoNavListTypes.REACTION,
       advFlag: false,
       advType: 'Authors',
       advValue: [],
@@ -157,7 +158,7 @@ export default class RepoPubl extends Component {
       advFlag, advType, advValue,
       isSearch,
       selectType, selection,
-      page, perPage,
+      page, perPage, listType
     } = this.state;
     let params = {
       advFlag,
@@ -167,18 +168,19 @@ export default class RepoPubl extends Component {
       page,
       perPage,
       selection,
+      listType,
       ...ps
     };
     LoadingActions.start();
     if (isSearch) {
-      switch (this.state.listType) {
-        case 'reaction':
+      switch (listType) {
+        case RepoNavListTypes.REACTION:
           PublicActions.getSearchReactions(params);
           break;
-        case 'sample':
+        case RepoNavListTypes.SAMPLE:
           PublicActions.getSearchMolecules(params);
           break;
-        case 'scheme':
+        case RepoNavListTypes.SCHEME:
           params = { ...params, collectionId: 'schemeOnly' };
           PublicActions.getSearchReactions(params);
           break;
@@ -186,15 +188,15 @@ export default class RepoPubl extends Component {
       }
       return;
     }
-    switch (this.state.listType) {
-      case 'reaction':
+    switch (listType) {
+      case RepoNavListTypes.REACTION:
         params = { ...params, schemeOnly: false };
         PublicActions.getReactions(params);
         break;
-      case 'sample':
+      case RepoNavListTypes.SAMPLE:
         PublicActions.getMolecules(params);
         break;
-      case 'scheme':
+      case RepoNavListTypes.SCHEME:
         params = { ...params, schemeOnly: true };
         PublicActions.getReactions(params);
         break;
@@ -386,9 +388,9 @@ export default class RepoPubl extends Component {
         onSelect={this.changeSort}
         id="element-list-type"
       >
-        <Tab eventKey="reaction" title={<TabTip tab="reaction" />} />
-        <Tab eventKey="sample" title={<TabTip tab="sample" />} />
-        <Tab eventKey="scheme" title={<TabTip tab="scheme" />} />
+        <Tab eventKey={RepoNavListTypes.REACTION} title={<TabTip tab={RepoNavListTypes.REACTION} />} />
+        <Tab eventKey={RepoNavListTypes.SAMPLE} title={<TabTip tab={RepoNavListTypes.SAMPLE} />} />
+        <Tab eventKey={RepoNavListTypes.SCHEME} title={<TabTip tab={RepoNavListTypes.SCHEME} />} />
       </Tabs>
     );
   }
@@ -623,11 +625,11 @@ export default class RepoPubl extends Component {
     const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
     const elementList = () => {
       switch (listType) {
-        case 'reaction':
+        case RepoNavListTypes.REACTION:
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-        case 'sample':
+        case RepoNavListTypes.SAMPLE:
           return (molecules || []).map(m => renderMolecule(m, currentElement, isPubElement, advFlag, advType, advValue));
-        case 'scheme':
+        case RepoNavListTypes.SCHEME:
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));
         default:
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index ad71a48b5..40e1092ee 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -1,5 +1,6 @@
-import PublicActions from '../components/actions/PublicActions'
-import PublicFetcher from '../components/fetchers/PublicFetcher'
+import PublicActions from '../components/actions/PublicActions';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+import RepoNavListTypes from './RepoNavListTypes';
 
 const routes = {
   '/': 'root',
@@ -30,7 +31,7 @@ const routes = {
     target: {
       show: function(e) {
         PublicActions.getReactions.defer();
-        PublicActions.openRepositoryPage("publications=reaction")
+        PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.REACTION}`)
       },
     },
     '/': 'show'

From 261d98c21868f3e184dfa0f22445b2a280596809 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 27 Oct 2022 12:55:30 +0200
Subject: [PATCH 077/258] switch tab after searching by inchi

---
 app/api/helpers/collection_helpers.rb              | 2 +-
 app/packs/src/components/fetchers/PublicFetcher.js | 6 ++++--
 app/packs/src/components/stores/PublicStore.js     | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/api/helpers/collection_helpers.rb b/app/api/helpers/collection_helpers.rb
index f111ab7ec..c624788b0 100644
--- a/app/api/helpers/collection_helpers.rb
+++ b/app/api/helpers/collection_helpers.rb
@@ -111,7 +111,7 @@ def set_var(c_id = params[:collection_id], is_sync = params[:is_sync])
     end
     @c = Collection.find_by(id: @c_id)
     cu_id = current_user&.id
-    @is_owned = cu_id && ((@c.user_id == cu_id && !@c.is_shared) || @c.shared_by_id == cu_id)
+    @is_owned = cu_id && ((@c&.user_id == cu_id && !@c&.is_shared) || @c&.shared_by_id == cu_id)
 
     @dl ||= {
       permission_level: 10,
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 09c66d5f1..263ec21c0 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -77,7 +77,8 @@ export default class PublicFetcher {
         molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
         page: json.publicMolecules.page,
         totalElements: json.publicMolecules.totalElements,
-        perPage: json.publicMolecules.perPage
+        perPage: json.publicMolecules.perPage,
+        listType: params.listType
       })).catch((errorMessage) => { console.log(errorMessage); });
   }
 
@@ -110,7 +111,8 @@ export default class PublicFetcher {
         reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
         page: json.publicReactions.page,
         totalElements: json.publicReactions.totalElements,
-        perPage: json.publicReactions.perPage
+        perPage: json.publicReactions.perPage,
+        listType: params.listType
       })).catch((errorMessage) => { console.log(errorMessage); });
   }
 
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 243e00727..741cd43c8 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -111,27 +111,27 @@ class PublicStore {
 
   handleSearchMolecules(results) {
     const {
-      molecules, page, perPage, totalElements
+      molecules, page, perPage, totalElements, listType
     } = results;
     let { pages } = results;
     if (totalElements && perPage) {
       pages = Math.ceil(totalElements / perPage);
     }
     this.setState({
-      molecules, page, pages, perPage
+      molecules, page, pages, perPage, listType
     });
   }
 
   handleSearchReactions(results) {
     const {
-      reactions, page, perPage, totalElements
+      reactions, page, perPage, totalElements, listType
     } = results;
     let { pages } = results;
     if (totalElements && perPage) {
       pages = Math.ceil(totalElements / perPage);
     }
     this.setState({
-      reactions, page, pages, perPage
+      reactions, page, pages, perPage, listType
     });
   }
 

From 089060fcf22c8bf09c0f69cbcdeb51d65f1f626a Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 27 Oct 2022 15:20:14 +0200
Subject: [PATCH 078/258] review comment r

---
 app/api/chemotion/repository_api.rb           |   4 +-
 app/packs/src/apps/mydb/App.js                |  55 ++++-
 .../src/components/PublishReactionModal.js    |   4 +-
 .../src/components/PublishSampleModal.js      |   4 +-
 .../components/ReactionDetailsRepoComment.js  |  34 +--
 .../components/SampleDetailsRepoComment.js    |  27 +--
 .../src/components/actions/EmbargoActions.js  | 131 +++++++++++
 .../src/components/actions/PublicActions.js   | 181 ++-------------
 .../src/components/actions/ReviewActions.js   |  89 +++++++
 .../src/components/common/RepoColumnHis.js    | 108 ---------
 .../src/components/common/RepoCommentBtn.js   |  60 -----
 .../src/components/common/RepoCommentModal.js |  95 --------
 .../common/RepoReviewAuthorsModal.js          |   6 +-
 .../components/common/RepoReviewHisColumns.js |  51 ----
 .../src/components/common/RepoReviewModal.js  | 217 ------------------
 .../components/common/RepoReviewTimeFormat.js |  24 --
 .../src/components/fetchers/EmbargoFetcher.js | 126 ++++++++++
 .../src/components/fetchers/PublicFetcher.js  |  21 --
 .../components/fetchers/RepositoryFetcher.js  | 109 ---------
 .../src/components/fetchers/ReviewFetcher.js  |   4 +
 .../src/components/stores/EmbargoStore.js     | 121 ++++++++++
 .../src/components/stores/PublicStore.js      | 168 ++------------
 .../src/components/stores/ReviewStore.js      | 124 ++++++++++
 app/packs/src/libHome/RepoCollection.js       |  43 ++--
 .../src/libHome/RepoCollectionDetails.js      |  16 +-
 app/packs/src/libHome/RepoCommon.js           |  36 ++-
 app/packs/src/libHome/RepoEmbargo.js          | 112 ++++-----
 app/packs/src/libHome/RepoEmbargoDetails.js   |  29 ++-
 app/packs/src/libHome/RepoEmbargoModal.js     |   2 +-
 app/packs/src/libHome/RepoReactionDetails.js  |  34 +--
 app/packs/src/libHome/RepoReview.js           | 158 +++++++++----
 app/packs/src/libHome/RepoReviewCommon.js     |   2 +-
 app/packs/src/libHome/RepoReviewDetails.js    |  15 +-
 app/packs/src/libHome/RepoSample.js           |   2 +-
 app/packs/src/libHome/RepoSampleDetails.js    |  32 +--
 app/packs/src/libHome/homeRoutes.js           |   9 +-
 .../src/stores/alt/stores/LoadingStore.js     |   7 +-
 package.json                                  |   3 +
 yarn.lock                                     | 148 +++++++++++-
 39 files changed, 1149 insertions(+), 1262 deletions(-)
 create mode 100644 app/packs/src/components/actions/EmbargoActions.js
 create mode 100644 app/packs/src/components/actions/ReviewActions.js
 delete mode 100644 app/packs/src/components/common/RepoColumnHis.js
 delete mode 100644 app/packs/src/components/common/RepoCommentBtn.js
 delete mode 100644 app/packs/src/components/common/RepoCommentModal.js
 delete mode 100644 app/packs/src/components/common/RepoReviewHisColumns.js
 delete mode 100644 app/packs/src/components/common/RepoReviewModal.js
 delete mode 100644 app/packs/src/components/common/RepoReviewTimeFormat.js
 create mode 100644 app/packs/src/components/fetchers/EmbargoFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReviewFetcher.js
 create mode 100644 app/packs/src/components/stores/EmbargoStore.js
 create mode 100644 app/packs/src/components/stores/ReviewStore.js

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 564d98a82..b35d5eaed 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -386,10 +386,10 @@ def add_submission_history(root)
 
           svg_file = e.element.sample_svg_file if element_type == 'Sample'
           title = e.element.short_label if element_type == 'Sample'
-
+          checklist = e.review['checklist'] if User.reviewer_ids.include?(current_user&.id)
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
           elements.push(
-            id: e.element_id, svg: svg_file, type: element_type, title: title,
+            id: e.element_id, svg: svg_file, type: element_type, title: title, checklist: checklist || {}, isReviewer: User.reviewer_ids.include?(current_user&.id) || false,
             published_by: u&.name, submitter_id: u&.id, submit_at: e.created_at, state: e.state, embargo: find_embargo_collection(e), scheme_only: scheme_only
           )
         end
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index ddc5f5b25..2dc12a69a 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -15,6 +15,14 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import UserActions from 'src/stores/alt/actions/UserActions';
 import Calendar from 'src/components/calendar/Calendar';
 import SampleTaskInbox from 'src/components/sampleTaskInbox/SampleTaskInbox';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import Aviator from 'aviator';
+import { RepoReviewModal } from 'repo-review-ui';
+import alt from './alt';
+import initRoutes from './routes';
+import ReviewActions from './actions/ReviewActions';
+import ReviewStore from './stores/ReviewStore';
 
 class App extends Component {
   constructor(_props) {
@@ -30,10 +38,15 @@ class App extends Component {
     this.handleUiStoreChange = this.handleUiStoreChange.bind(this);
     this.documentKeyDown = this.documentKeyDown.bind(this);
     this.toggleCollectionTree = this.toggleCollectionTree.bind(this);
+    this.handleReviewStoreChange = this.handleReviewStoreChange.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+
   }
 
   componentDidMount() {
-    UIStore.listen(this.handleUiStoreChange);
+    UIStore.listen(this.handleReviewStoreChange);
+    ReviewStore.listen(this.handleReviewStoreChange);
     UserActions.fetchOlsRxno();
     UserActions.fetchOlsChmo();
     UserActions.fetchProfile();
@@ -67,6 +80,24 @@ class App extends Component {
       this.setState({ showGenericWorkflow: state.showGenericWorkflow, propGenericWorkflow: state.propGenericWorkflow });
     }
   }
+  handleReviewStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
+    // LoadingActions.start();
+    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleReviewUpdate(e, col, rr) {
+    const { review } = this.state;
+    const checklist = rr.checklist || {};
+    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
+    checklist[col].status = e.target.checked;
+    review.checklist = checklist;
+    ReviewActions.updateReview(review);
+  }
 
   documentKeyDown(event) {
     // Only trigger arrow and Enter keys ON BODY
@@ -125,6 +156,27 @@ class App extends Component {
     );
   }
 
+  renderReviewModal() {
+    const { showReviewModal, reviewLevel, isSubmitter, review, currentElement, elementType, btnAction } = this.state;
+    const rrr = {};
+    console.log(this.state);
+    rrr.reviewLevel = reviewLevel;
+    rrr.isSubmitter = isSubmitter;
+    rrr.review = review;
+    rrr.btnAction = btnAction;
+    rrr.elementType = elementType;
+    rrr.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
+    console.log(rrr);
+    return (
+      <RepoReviewModal
+        show={showReviewModal}
+        data={rrr}
+        onSubmit={this.handleSubmitReview}
+        onUpdate={this.handleReviewUpdate}
+        onHide={() => this.setState({ showReviewModal: false })}
+      />
+    );
+  }
   render() {
     const { showCollectionTree, showGenericWorkflow, propGenericWorkflow } = this.state;
     return (
@@ -149,6 +201,7 @@ class App extends Component {
         />
         <InboxModal showCollectionTree={showCollectionTree} />
         <Calendar />
+        {this.renderReviewModal()}
       </Grid>
     );
   }
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 714f85ff2..eb9848a26 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -25,7 +25,7 @@ import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnal
 import LoadingActions from './actions/LoadingActions';
 import { groupByCitation, Citation } from '../components/LiteratureCommon';
 import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 import { contentToText } from './utils/quillFormat';
 import { CitationTypeMap, CitationTypeEOL } from './CitationType';
 
@@ -239,7 +239,7 @@ export default class PublishReactionModal extends Component {
   }
 
   loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+    EmbargoFetcher.fetchEmbargoCollections().then((result) => {
       const cols = result.repository || [];
       this.setState({ bundles: cols });
     });
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index 988c07854..d594058bb 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -19,7 +19,7 @@ import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '.
 import LoadingActions from './actions/LoadingActions';
 import SamplesFetcher from './fetchers/SamplesFetcher';
 import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import EmbargoFetcher from './fetchers/EmbargoFetcher';
 import { CitationTypeMap, CitationTypeEOL } from './CitationType';
 
 export default class PublishSampleModal extends Component {
@@ -93,7 +93,7 @@ export default class PublishSampleModal extends Component {
   }
 
   loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+    EmbargoFetcher.fetchEmbargoCollections().then((result) => {
       const cols = result.repository || [];
       this.setState({ bundles: cols });
     });
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index 0e782d8e6..3ba355c9f 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import RepositoryFetcher from './fetchers/RepositoryFetcher';
 import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
+import ReviewStore from '../components/stores/ReviewStore';
+import ReviewActions from '../components/actions/ReviewActions';
 import RepoReactionDetails from '../libHome/RepoReactionDetails';
 
 export default class ReactionDetailsRepoComment extends Component {
@@ -10,44 +11,23 @@ export default class ReactionDetailsRepoComment extends Component {
     super(props);
     this.state = {
       reaction: null,
-      reviewLevel: 0,
+      reviewLevel: 0
     };
     this.onStoreChange = this.onStoreChange.bind(this);
     this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    RepositoryFetcher.fetchReaction(this.props.reactionId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        if (data.reaction && data.reaction.reviewLevel === 0) {
-          //console.log(data);
-        } else {
-          let review = {};
-          if (data.reaction && data.reaction.publication) {
-            const { publication } = data.reaction;
-            review = publication.review || {};
-          }
-          this.setState({
-            reaction: data.reaction,
-            reviewLevel: data.reviewLevel,
-            isSubmitter: data.isSubmitter || false,
-            review,
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`ReactionDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
+    ReviewStore.listen(this.onStoreChange);
+    ReviewActions.displayReviewReaction(this.props.reactionId);
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
+    ReviewStore.unlisten(this.onStoreChange);
   }
 
   onStoreChange(state) {
+    console.log(state);
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
index 4d4c8a4c9..69ebd7300 100644
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ b/app/packs/src/components/SampleDetailsRepoComment.js
@@ -2,8 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import RepositoryFetcher from './fetchers/RepositoryFetcher';
 import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
+import ReviewStore from '../components/stores/ReviewStore';
 import RepoSampleDetails from '../libHome/RepoSampleDetails';
+import ReviewActions from './actions/ReviewActions';
 
 export default class SampleDetailsRepoComment extends Component {
   constructor(props) {
@@ -19,31 +20,13 @@ export default class SampleDetailsRepoComment extends Component {
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
+    ReviewStore.listen(this.onStoreChange);
     LoadingActions.start();
-    RepositoryFetcher.fetchSample(this.props.sampleId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewSample
-        if (data.sample && data.reviewLevel === 0) {
-          console.log(data);
-        } else {
-          const publication = data.publication || {};
-          this.setState({
-            element: data,
-            review: publication?.review || {},
-            reviewLevel: data.reviewLevel,
-            isSubmitter: data.isSubmitter || false
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`SampleDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
+    ReviewActions.fetchSample(this.props.sampleId);
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
+    ReviewStore.unlisten(this.onStoreChange);
   }
 
   onStoreChange(state) {
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/components/actions/EmbargoActions.js
new file mode 100644
index 000000000..97874b522
--- /dev/null
+++ b/app/packs/src/components/actions/EmbargoActions.js
@@ -0,0 +1,131 @@
+import alt from '../alt';
+import EmbargoFetcher from '../fetchers/EmbargoFetcher';
+
+class EmbargoActions {
+
+  displayEmbargo(id) {
+    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+
+  getEmbargoElements(id) {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoElements(id)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getEmbargoElement(cid, el) {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoElement(cid, el)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+
+
+  moveEmbargo(id, newEmbargo, element) {
+    return (dispatch) => {
+      EmbargoFetcher.moveEmbargo(id, newEmbargo, element)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  assignEmbargo(newEmbargo, element) {
+    return (dispatch) => {
+      EmbargoFetcher.assignEmbargo(newEmbargo, element)
+        .then((result) => {
+          dispatch(result)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  fetchEmbargoBundle() {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+
+  displayReviewEmbargo(type, id) {
+    return (dispatch) => {
+      EmbargoFetcher.repoFetchEmbargoElement(type, id)
+      .then((result) => {
+        dispatch({ id, element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  releaseEmbargo(id) {
+    return (dispatch) => {
+      EmbargoFetcher.releaseEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  deleteEmbargo(id) {
+    return (dispatch) => {
+      EmbargoFetcher.deleteEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+
+  generateEmbargoAccount(id) {
+    return (dispatch) => {
+      EmbargoFetcher.generateEmbargoAccount(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  getEmbargoBundle() {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+}
+
+export default alt.createActions(EmbargoActions);
\ No newline at end of file
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index af37f7244..3e4f4c9ff 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -2,6 +2,7 @@ import alt from '../alt';
 import PublicFetcher from '../fetchers/PublicFetcher';
 import NotificationActions from './NotificationActions';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import EmbargoFetcher from '../fetchers/EmbargoFetcher';
 import SearchFetcher from '../fetchers/SearchFetcher';
 import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
@@ -14,6 +15,16 @@ class PublicActions {
     return { deleteEl }
   }
 
+  displayCollection(id) {
+    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
   getMolecules(pageParams={}) {
     return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
       .then((result) => {
@@ -133,25 +144,6 @@ class PublicActions {
     }
   }
 
-  displayCollection(id) {
-    return (dispatch) => { PublicFetcher.fetchEmbargo(id)
-      .then((result) => {
-        dispatch({colData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayEmbargo(id) {
-    return (dispatch) => { PublicFetcher.fetchEmbargo(id)
-      .then((result) => {
-        dispatch({colData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
   articles() {
     return (dispatch) => {
       fetch('/newsroom/index.json',
@@ -286,145 +278,6 @@ class PublicActions {
     }
   }
 
-  displayReviewReaction(id) {
-    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewSample(id) {
-    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  reviewPublish(id, type, comment, action, checklist, reviewComments) {
-    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
-      .then((result) => {
-        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  displayReviewEmbargo(type, id) {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElement(type, id)
-      .then((result) => {
-        dispatch({ id, element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  generateEmbargoAccount(id) {
-    return (dispatch) => {
-      RepositoryFetcher.generateEmbargoAccount(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  fetchEmbargoBundle() {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-
-  releaseEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.releaseEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  deleteEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.deleteEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  moveEmbargo(id, newEmbargo, element) {
-    return (dispatch) => {
-      RepositoryFetcher.moveEmbargo(id, newEmbargo, element)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  assignEmbargo(newEmbargo, element) {
-    return (dispatch) => {
-      RepositoryFetcher.assignEmbargo(newEmbargo, element)
-        .then((result) => {
-          dispatch(result)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  getEmbargoElements(id) {
-    return (dispatch) => {
-      PublicFetcher.fetchEmbargoElements(id)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getEmbargoElement(cid, el) {
-    return (dispatch) => {
-      PublicFetcher.fetchEmbargoElement(cid, el)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getEmbargoBundle() {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-
   publishedStatics() {
     return (dispatch) => {
       PublicFetcher.publishedStatics()
@@ -436,17 +289,11 @@ class PublicActions {
     }
   }
 
-  updateComment(id, type, comments) {
-    return (dispatch) => {
-      RepositoryFetcher.updateComment(id, type, comments)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
+  handleReviewModal(show) {
+    return show;
   }
 
+
   fetchUnitsSystem() {
     return (dispatch) => { fetch('/units_system/units_system.json', {
         credentials: 'same-origin',
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
new file mode 100644
index 000000000..2428f210d
--- /dev/null
+++ b/app/packs/src/components/actions/ReviewActions.js
@@ -0,0 +1,89 @@
+import alt from '../alt';
+import ReviewFetcher from '../fetchers/ReviewFetcher';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+class ReviewActions {
+  handleReviewModal(show, action) {
+    return { show, action };
+  }
+
+  updateReview(review) {
+    return review;
+  }
+
+  fetchSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(`SampleDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+    }
+  }
+
+  displayReviewReaction(id) {
+    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  reviewPublish(id, type, comment, action, checklist, reviewComments) {
+    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
+      .then((result) => {
+        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+
+  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
+    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+
+  updateComment(id, type, comments) {
+    return (dispatch) => {
+      RepositoryFetcher.updateComment(id, type, comments)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+}
+export default alt.createActions(ReviewActions);
diff --git a/app/packs/src/components/common/RepoColumnHis.js b/app/packs/src/components/common/RepoColumnHis.js
deleted file mode 100644
index cf87cbb9d..000000000
--- a/app/packs/src/components/common/RepoColumnHis.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-const showInfoTip = <Tooltip id="col_showinfo_tooltip">show Information</Tooltip>;
-const hideInfoTip = <Tooltip id="col_hideinfo_tooltip">hide Information</Tooltip>;
-
-
-export default class RepoColumnHis extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showInfo: false
-    }
-  }
-
-
-  render() {
-    const { history, field } = this.props;
-    const { showInfo } = this.state;
-    const columnHis = history.filter(h => h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-    if (columnHis && columnHis.length > 0) {
-      if (showInfo == true) {
-        return (
-          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-            <thead>
-              <tr>
-                <th width="30%">
-                  <div className="title" style={{ backgroundColor: 'white' }} onClick={() => this.setState({ showInfo: !showInfo })} >
-                    <OverlayTrigger placement="top" overlay={hideInfoTip}>
-                      <i className="fa fa-minus-square-o" />
-                    </OverlayTrigger>
-                    &nbsp;&nbsp; Information
-                  </div>
-                </th>
-                <th width="15%">Date</th>
-                <th width="45%">Comment</th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                columnHis.map((info) => {
-                  return (
-                    <tr>
-                      <td width="30%">{info.comments[`${field}`].origInfo}</td>
-                      <td width="15%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
-                      <td width="45%">{info.comments[`${field}`].comment}</td>
-                      <td width="10%">{info.comments[`${field}`].username}</td>
-                    </tr>
-                  );
-                })
-              }
-            </tbody>
-          </Table>
-        );
-      } else {
-        return (
-          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-            <thead>
-              <tr>
-                <th width="15%">
-                  <div
-                    className="title"
-                    style={{ backgroundColor: 'white' }}
-                    onClick={() => this.setState({ showInfo: !showInfo })}
-                  >
-                    <OverlayTrigger placement="top" overlay={showInfoTip}>
-                      <i className="fa fa-plus-square-o" />
-                    </OverlayTrigger>
-                    &nbsp;&nbsp; Date
-                  </div>
-                </th>
-                <th width="45%"></th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                columnHis.map((info) => {
-                  return (
-                    <tr>
-                      <td width="20%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
-                      <td width="60%">{info.comments[`${field}`].comment}</td>
-                      <td width="10%">{info.comments[`${field}`].username}</td>
-                    </tr>
-                  );
-                })
-              }
-            </tbody>
-          </Table>
-        );
-      }
-    }
-    return <span />;
-  };
-}
-
-RepoColumnHis.propTypes = {
-  field: PropTypes.string.isRequired,
-  history: PropTypes.array
-};
-
-RepoColumnHis.defaultProps = {
-  history: []
-};
diff --git a/app/packs/src/components/common/RepoCommentBtn.js b/app/packs/src/components/common/RepoCommentBtn.js
deleted file mode 100644
index da5bf306e..000000000
--- a/app/packs/src/components/common/RepoCommentBtn.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { CommentComponent } from '../../libHome/RepoReviewCommon';
-
-const RepoCommentBtn = (props) => {
-  const {
-    field, orgInfo, onShow, reviewLevel, review, isSubmitter
-  } = props;
-
-  const history = review?.history || [];
-  const current = (history && history.slice(-1).pop()) || {};
-
-  const hasComment = (current.comments && field in current.comments) || false;
-  const comment = CommentComponent(field, history) || '';
-
-  const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (isSubmitter === true && current.state === 'reviewed')) || false;
-
-  if (isEditable === false) {
-    return <span>{comment}</span>;
-  }
-
-  return (
-    <span>
-      <Button
-        bsStyle={hasComment ? 'success' : 'default'}
-        bsSize="xsmall"
-        onClick={() => onShow(true, field, orgInfo)}
-      >
-        <i className="fa fa-comment" />
-      </Button>
-      {comment}
-    </span>
-  );
-};
-
-RepoCommentBtn.propTypes = {
-  onShow: PropTypes.func.isRequired,
-  review: PropTypes.object,
-  comments: PropTypes.object,
-  field: PropTypes.string,
-  isSubmitter: PropTypes.bool,
-  orgInfo: PropTypes.string,
-  state: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  textAreaAttr: PropTypes.object
-};
-
-RepoCommentBtn.defaultProps = {
-  review: {},
-  comments: null,
-  isSubmitter: false,
-  field: '',
-  orgInfo: '',
-  state: '',
-  reviewLevel: 0,
-  submitter: ''
-};
-
-export default RepoCommentBtn;
diff --git a/app/packs/src/components/common/RepoCommentModal.js b/app/packs/src/components/common/RepoCommentModal.js
deleted file mode 100644
index e1b7c5ea3..000000000
--- a/app/packs/src/components/common/RepoCommentModal.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl } from 'react-bootstrap';
-import Draggable from 'react-draggable';
-import RepoColumnHis from './RepoColumnHis';
-
-export default class RepoCommentModal extends React.Component {
-  render() {
-    const {
-      elementId, elementType, show, onHide, onUpdate, field, orgInfo,
-      review, textAreaAttrs, reviewLevel, isSubmitter
-    } = this.props;
-
-    const history = review?.history || [];
-    const current = (history.length > 0 && history.slice(-1).pop()) || {};
-    const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
-
-    const defaultAttrs = {
-      style: {
-        height: '100px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (isSubmitter === true && current.state === 'reviewed')) || false;
-    if (show) {
-      return (
-        <div>
-          <Draggable>
-            <Modal
-              show
-              onHide={() => onHide(false, field)}
-              bsSize="large"
-              backdrop="static"
-            >
-              <Modal.Header closeButton>
-                <Modal.Title>
-                  Comment on: {field}
-                </Modal.Title>
-              </Modal.Header>
-              <Modal.Body>
-                <RepoColumnHis history={history} field={field} />
-                <br />
-                {orgInfo}
-                <br />
-                <FormControl
-                  componentClass="textarea"
-                  {...textAreaAttrs || defaultAttrs}
-                  defaultValue={comment || ''}
-                  inputRef={(m) => { this.commentInput = m; }}
-                />
-                <ButtonToolbar>
-                  <Button
-                    onClick={() => onHide(false)}
-                  > Close
-                  </Button>
-                  <Button
-                    bsStyle="primary"
-                    disabled={!isEditable}
-                    onClick={() =>
-                      onUpdate(elementId, elementType, field, this.commentInput.value, orgInfo, true)}
-                  >
-                    Update
-                  </Button>
-                </ButtonToolbar>
-              </Modal.Body>
-            </Modal>
-          </Draggable>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoCommentModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired,
-  show: PropTypes.bool,
-  isSubmitter: PropTypes.bool,
-  field: PropTypes.string,
-  review: PropTypes.object,
-  orgInfo: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  onUpdate: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoCommentModal.defaultProps = {
-  show: false,
-  review: {},
-  reviewLevel: 0,
-  isSubmitter: false,
-  field: '',
-  orgInfo: '',
-};
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
index ad03c88c6..85ccf97cd 100644
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ b/app/packs/src/components/common/RepoReviewAuthorsModal.js
@@ -9,7 +9,7 @@ import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import UsersFetcher from '../fetchers/UsersFetcher';
 import SelectionField from '../common/SelectionField';
 import PublicFetcher from '../fetchers/PublicFetcher';
-import PublicActions from '../actions/PublicActions';
+import ReviewActions from '../actions/ReviewActions';
 import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
 
 const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
@@ -249,9 +249,9 @@ export default class RepoReviewAuthorsModal extends React.Component {
           alert(result.error);
         } else {
           if (element.elementType === 'Reaction') {
-            PublicActions.displayReviewReaction(element.id);
+            ReviewActions.displayReviewReaction(element.id);
           } else {
-            PublicActions.displayReviewSample(element.id);
+            ReviewActions.displayReviewSample(element.id);
           }
 
           this.setState({ taggData: null, modalShow: false });
diff --git a/app/packs/src/components/common/RepoReviewHisColumns.js b/app/packs/src/components/common/RepoReviewHisColumns.js
deleted file mode 100644
index 2fa3ec4cb..000000000
--- a/app/packs/src/components/common/RepoReviewHisColumns.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { Table } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-const RepoReviewHisColumns = (props) => {
-  const { comments } = props;
-
-  if (comments && Object.keys(comments).length > 0) {
-    return (
-      <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-        <thead>
-          <tr>
-            <th width="10%">Column</th>
-            <th width="20%">Information</th>
-            <th width="10%">Date</th>
-            <th width="50%">Comment</th>
-            <th width="10%">From User</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            Object.keys(comments).map((key) => {
-              const info = comments[key];
-              return (
-                <tr key={key}>
-                  <td width="10%">{key}</td>
-                  <td width="20%">{info.origInfo}</td>
-                  <td width="10%">{RepoReviewTimeFormat(info.timestamp)}</td>
-                  <td width="50%">{info.comment}</td>
-                  <td width="10%">{info.username}</td>
-                </tr>
-              );
-            })
-          }
-        </tbody>
-      </Table>
-    );
-  }
-  return <span />;
-};
-
-RepoReviewHisColumns.propTypes = {
-  comments: PropTypes.object,
-};
-
-RepoReviewHisColumns.defaultProps = {
-  comments: {}
-};
-
-export default RepoReviewHisColumns;
diff --git a/app/packs/src/components/common/RepoReviewModal.js b/app/packs/src/components/common/RepoReviewModal.js
deleted file mode 100644
index 5f2e1085f..000000000
--- a/app/packs/src/components/common/RepoReviewModal.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl, OverlayTrigger, Table, Tooltip, Checkbox, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import { isEmpty } from 'lodash';
-import RepoReviewHisColumns from './RepoReviewHisColumns';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-export default class RepoReviewModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      idxDetail: -1
-    };
-    this.clickDetail = this.clickDetail.bind(this);
-  }
-
-  clickDetail(idxDetail) {
-    if (this.state.idxDetail == idxDetail) {
-      this.setState({ idxDetail: -1 });
-    } else {
-      this.setState({ idxDetail });
-    }
-  }
-
-  handleToggleReviewStatus(e, col) {
-    const { review } = this.props;
-    const checklist = review.checklist || {};
-    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
-    checklist[col].status = e.target.checked;
-    review.checklist = checklist;
-    this.props.onUpdate(review);
-  }
-
-
-  renderReviewNotes() {
-    const { review, reviewLevel } = this.props;
-    const checklist = review?.checklist || {};
-    const reviewComments = review?.reviewComments || '';
-    if (reviewLevel !== 3) return (<div />);
-
-    let dtbl = '', ddes = '', dafm = '', dact = '', dohd = '';
-    if (checklist?.tbl?.status === true && checklist?.tbl?.user) dtbl = ` - by ${checklist?.tbl?.user} on ${checklist?.tbl?.updated_at} `;
-    if (checklist?.des?.status === true && checklist?.des?.user) ddes = ` - by ${checklist?.des?.user} on ${checklist?.des?.updated_at} `;
-    if (checklist?.afm?.status === true && checklist?.afm?.user) dafm = ` - by ${checklist?.afm?.user} on ${checklist?.afm?.updated_at} `;
-    if (checklist?.act?.status === true && checklist?.act?.user) dact = ` - by ${checklist?.act?.user} on ${checklist?.act?.updated_at} `;
-    if (checklist?.ohd?.status === true && checklist?.ohd?.user) dohd = ` - by ${checklist?.ohd?.user} on ${checklist?.ohd?.updated_at} `;
-
-    return (
-      <div style={{ padding: '10px 0px' }}>
-        <Col lg={4} md={4} sm={12} style={{ padding: '0px' }}>
-          <b>Review Status Information (reviewer only)</b>
-          <Checkbox checked={checklist?.tbl?.status} onChange={e => this.handleToggleReviewStatus(e, 'tbl')}>table values {dtbl}</Checkbox>
-          <Checkbox checked={checklist?.des?.status} onChange={e => this.handleToggleReviewStatus(e, 'des')}>description {ddes}</Checkbox>
-          <Checkbox checked={checklist?.afm?.status} onChange={e => this.handleToggleReviewStatus(e, 'afm')}>analysis format {dafm}</Checkbox>
-          <Checkbox checked={checklist?.act?.status} onChange={e => this.handleToggleReviewStatus(e, 'act')}>analysis content {dact}</Checkbox>
-          <Checkbox checked={checklist?.ohd?.status} onChange={e => this.handleToggleReviewStatus(e, 'ohd')}>on hold {dohd}</Checkbox>
-        </Col>
-        <Col lg={8} md={8} sm={12} style={{ padding: '0px' }}>
-          <b>Reviewer notes (reviewer only)</b>
-          <FormControl
-            componentClass="textarea"
-            style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
-            defaultValue={reviewComments || ''}
-            inputRef={(m) => { this.privateReviewInput = m; }}
-          />
-        </Col>
-      </div>);
-  }
-
-  renderComments() {
-    const { idxDetail } = this.state;
-    const { reviewLevel, review } = this.props;
-    const history = review?.history || [];
-
-    const curObj = (history && history.length > 0 && history.slice(-1).pop()) || {};
-
-    let historyTbl = null;
-
-    if (history && history.length > 0) {
-      historyTbl = history.map((his, idx) => (
-        <tbody key={uuid.v4()}>
-          <tr>
-            <td style={{ width: '5%' }}>{idx + 1}</td>
-            <td style={{ width: '5%' }}>
-              <OverlayTrigger placement="top" overlay={<Tooltip id="comment_tooltip">view columns&#39; comments</Tooltip>}>
-                <Button style={{ display: his.comments && isEmpty(his.comments) === false ? '' : 'none' }} bsSize="xsmall" onClick={() => this.clickDetail(idx)}><i className="fa fa-list" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </td>
-            <td style={{ width: '10%' }}>{his.action}</td>
-            <td style={{ width: '12%' }}>{RepoReviewTimeFormat(his.timestamp)}</td>
-            <td style={{ width: '48%' }}>{his.comment}</td>
-            <td style={{ width: '10%' }}>{his.username}</td>
-          </tr>
-          {
-            (idxDetail === idx && his.comments && isEmpty(his.comments) === false) ?
-            (<tr><td colSpan={6} style={{ width: '100%' }}><RepoReviewHisColumns comments={his.comments} /></td></tr>) : null
-          }
-        </tbody>
-      ));
-    }
-
-
-    return (
-      <div>
-        <div >
-          <Table striped bordered>
-            <thead>
-              <tr>
-                <th width="5%">#</th>
-                <th width="5%">Detail</th>
-                <th width="10%">Action</th>
-                <th width="12%">Date</th>
-                <th width="48%">Comment</th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            {historyTbl}
-          </Table>
-        </div>
-        <br />
-        Summary
-        <FormControl
-          componentClass="textarea"
-          style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
-          defaultValue={curObj.comment || ''}
-          inputRef={(m) => { this.summaryInput = m; }}
-        />
-        {this.renderReviewNotes()}
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      show, elementId, action, onSubmit, onHide, reviewLevel, review, isSubmitter
-    } = this.props;
-    const history = review?.history || [];
-    const currComment = (history.length > 0 && history.slice(-1).pop()) || {};
-    const isEditable = ((reviewLevel === 3 && currComment.state === 'pending') || (isSubmitter === true && currComment.state === 'reviewed')) || false;
-
-    let title = action;
-    if (reviewLevel === 2 && action === 'Decline') {
-      title = 'Withdraw';
-    } else if (reviewLevel === 3 && action === 'Decline') {
-      title = 'Reject';
-    }
-
-    if (show) {
-      return (
-        <div>
-          <Modal
-            show
-            dialogClassName="structure-editor-modal"
-            onHide={() => onHide(false)}
-            bsSize="large"
-            backdrop="static"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                {title}
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <div id="div-modal-body" style={{ height: 'calc(100vh - 300px)', maxHeight: 'calc(100vh - 300px)', overflow: 'auto' }}>
-                {this.renderComments()}
-
-              </div>
-              <br />
-              <ButtonToolbar>
-                <Button
-                  bsStyle="warning"
-                  onClick={() => onHide(false)}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  disabled={!isEditable}
-                  onClick={() =>
-                    onSubmit(
-                      elementId,
-                      this.summaryInput?.value,
-                      action,
-                      this.props.review?.checklist || {},
-                      this.privateReviewInput?.value,
-                    )
-                  }
-                > {title}
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoReviewModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  action: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-  review: PropTypes.object,
-  isSubmitter: PropTypes.bool,
-  reviewLevel: PropTypes.number,
-  onSubmit: PropTypes.func.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoReviewModal.defaultProps = {
-  show: false,
-  isSubmitter: false,
-  reviewLevel: 0,
-  review: {}
-};
diff --git a/app/packs/src/components/common/RepoReviewTimeFormat.js b/app/packs/src/components/common/RepoReviewTimeFormat.js
deleted file mode 100644
index 9b0937446..000000000
--- a/app/packs/src/components/common/RepoReviewTimeFormat.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-
-const RepoReviewTimeFormat = (timeField) => {
-  if (timeField == null || typeof timeField === 'undefined' || timeField === '') {
-    return '';
-  }
-  let newTimeObj = null;
-  if (moment(timeField, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-    newTimeObj = moment(timeField, 'DD-MM-YYYY HH:mm:ss');
-    return moment(newTimeObj).format('DD-MM-YYYY HH:mm');
-  }
-  return timeField;
-};
-
-RepoReviewTimeFormat.propTypes = {
-  timeField: PropTypes.func.isRequired
-};
-
-RepoReviewTimeFormat.defaultProps = {
-  timeField: null
-};
-
-export default RepoReviewTimeFormat;
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
new file mode 100644
index 000000000..bf5201ed1
--- /dev/null
+++ b/app/packs/src/components/fetchers/EmbargoFetcher.js
@@ -0,0 +1,126 @@
+import 'whatwg-fetch';
+
+export default class EmbargoFetcher {
+
+  static fetchEmbargoElements(id) {
+    const api = `/api/v1/public/col_list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElement(cid, el) {
+    const api = `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargo(id) {
+    const api = `/api/v1/public/embargo.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static deleteEmbargo(id) {
+    const api = '/api/v1/repository/embargo/delete';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static moveEmbargo(id, newEmbargo, element) {
+    const api = '/api/v1/repository/embargo/move';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static refreshEmbargo(emb) {
+    const api = '/api/v1/repository/embargo/refresh';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id: emb.id, collection_id: emb.element_id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static assignEmbargo(embargoVal, element) {
+    const api = '/api/v1/repository/assign_embargo';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ new_embargo: embargoVal, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static releaseEmbargo(id) {
+    const api = '/api/v1/repository/embargo/release';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static generateEmbargoAccount(id) {
+    const api = '/api/v1/repository/embargo/account';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static repoFetchEmbargoElements(id) {
+    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static repoFetchEmbargoElement(type, id) {
+    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoCollections() {
+    const api = '/api/v1/repository/embargo_list.json';
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
\ No newline at end of file
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 263ec21c0..3b9eafc1e 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -156,27 +156,6 @@ export default class PublicFetcher {
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  static fetchEmbargoElements(id) {
-    const api = `/api/v1/public/col_list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElement(cid, el) {
-    const api = `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargo(id) {
-    const api = `/api/v1/public/embargo.json?id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
   static queryPid(params) {
     const api = `/api/v1/public/pid/`
 
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index 7b300137b..c17be5fcb 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -10,82 +10,6 @@ const AnalysisIdstoPublish = element => (
 );
 
 export default class RepositoryFetcher {
-  static generateEmbargoAccount(id) {
-    const api = '/api/v1/repository/embargo/account';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static releaseEmbargo(id) {
-    const api = '/api/v1/repository/embargo/release';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static deleteEmbargo(id) {
-    const api = '/api/v1/repository/embargo/delete';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static moveEmbargo(id, newEmbargo, element) {
-    const api = '/api/v1/repository/embargo/move';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static refreshEmbargo(emb) {
-    const api = '/api/v1/repository/embargo/refresh';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id: emb.id, collection_id: emb.element_id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static assignEmbargo(embargoVal, element) {
-    const api = '/api/v1/repository/assign_embargo';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ new_embargo: embargoVal, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
 
   static reviewPublish(element) {
     const { id, type } = element;
@@ -251,19 +175,7 @@ export default class RepositoryFetcher {
     });
   }
 
-  static fetchEmbargoCollections() {
-    const api = '/api/v1/repository/embargo_list.json';
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
 
-  static fetchEmbargoElements(id) {
-    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
 
   static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
     const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
@@ -283,12 +195,6 @@ export default class RepositoryFetcher {
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  static fetchEmbargoElement(type, id) {
-    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
 
   static fetchReaction(id, isPublic) {
     const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
@@ -319,20 +225,6 @@ export default class RepositoryFetcher {
       });
   }
 
-  static updateComment(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
   static repoReviewPublish(id, type, comment, action, checklist = {}, reviewComments) {
     let api = '';
     if (action === 'Comments') {
@@ -418,7 +310,6 @@ export default class RepositoryFetcher {
       });
   }
 
-
   static updateComment(id, type, comments) {
     return fetch('/api/v1/repository/reviewing/comment', {
       credentials: 'same-origin',
diff --git a/app/packs/src/components/fetchers/ReviewFetcher.js b/app/packs/src/components/fetchers/ReviewFetcher.js
new file mode 100644
index 000000000..8fcb2a7d3
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReviewFetcher.js
@@ -0,0 +1,4 @@
+import 'whatwg-fetch';
+
+export default class ReviewFetcher {
+};
\ No newline at end of file
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
new file mode 100644
index 000000000..30a5495b4
--- /dev/null
+++ b/app/packs/src/components/stores/EmbargoStore.js
@@ -0,0 +1,121 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import EmbargoActions from '../actions/EmbargoActions';
+import ElementActions from '../actions/ElementActions';
+import UIActions from '../actions/UIActions';
+
+class EmbargoStore {
+  constructor() {
+    this.selectEmbargoId;
+    this.bundles = [];
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.element = null;
+    // this.elements = [];
+
+
+    this.bindListeners({
+      handleEmbargoMove: EmbargoActions.moveEmbargo,
+      handleEmbargoAssign: EmbargoActions.assignEmbargo,
+      handleEmbargoRelease: [EmbargoActions.releaseEmbargo, EmbargoActions.deleteEmbargo],
+      handleFetchBundles: EmbargoActions.fetchEmbargoBundle,
+      handledisplayEmbargo: EmbargoActions.displayEmbargo,
+      handleRefreshEmbargoBundles: EmbargoActions.getEmbargoBundle,
+      handleDisplayEmbargoElement: EmbargoActions.displayReviewEmbargo,
+      handleGetEmbargoElements: EmbargoActions.getEmbargoElements,
+      handleGetEmbargoElement: EmbargoActions.getEmbargoElement,
+    });
+  }
+
+  handleDisplayEmbargoElement(result) {
+    const publication = result?.element?.publication || {};
+
+    if (result?.element?.reviewLevel === 0) {
+      Aviator.navigate('/home/');
+    } else {
+      const elementType = (result.element.sample ? 'sample' : 'reaction');
+      this.setState({
+        guestPage: 'embargo',
+        elementType,
+        queryId: result.id,
+        currentElement: result.element,
+        review: publication?.review || {},
+        reviewLevel: result.element.reviewLevel
+      });
+      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
+    }
+  }
+
+  handledisplayEmbargo(results) {
+    console.log(results);
+  }
+
+  handleGetEmbargoElement(results) {
+    this.setState({ element: results })
+  }
+
+
+  handleEmbargoRelease(result) {
+    EmbargoActions.fetchEmbargoBundle();
+  }
+
+  handleEmbargoAssign(result) {
+    if (result.error) {
+      alert(result.error);
+    } else {
+      alert(result.message);
+      // refresh embargo list
+      EmbargoActions.getEmbargoBundle();
+      // refresh element list
+      PublicActions.getElements(
+        this.selectType, this.selectState, this.searchType,
+        this.searchValue, this.page, this.perPage
+      );
+    }
+  }
+
+  handleEmbargoMove(results) {
+    const { col_id, is_new_embargo, new_embargo, message } = results.result;
+    if (is_new_embargo === true) {
+      this.bundles.push(new_embargo);
+    }
+    alert(message);
+    EmbargoActions.getEmbargoElements(col_id);
+  }
+
+
+  handleRefreshEmbargoBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push(col);
+      });
+    }
+    this.setState({ bundles, current_user });
+  }
+  handleFetchBundles(result) {
+    const bundles = result.repository || [];
+    // eslint-disable-next-line camelcase
+    const { current_user } = result;
+    this.setState({
+      bundles, current_user, elements: [], element: null
+    });
+  }
+
+  handleGetEmbargoElements(results) {
+    console.log(results);
+    const { elements, current_user, embargo_id } = results;
+    this.setState({
+      selectEmbargoId: embargo_id,
+      elements,
+      element: null,
+      currentUser: current_user
+    });
+  }
+}
+
+export default alt.createStore(EmbargoStore, 'EmbargoStore');
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 741cd43c8..eb0848033 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -16,7 +16,6 @@ class PublicStore {
     this.selectState;
     this.searchType;
     this.searchValue;
-    this.selectEmbargoId;
     this.publishedStatics = [];
     this.lastPublished;
     this.lastPublishedSample;
@@ -28,6 +27,8 @@ class PublicStore {
     this.howto = {};
     this.howtos = [];
     this.bundles = [];
+    this.showReviewModal = false;
+    this.reviewData = {};
 
     this.bindListeners({
       handleGetMolecules: PublicActions.getMolecules,
@@ -41,7 +42,6 @@ class PublicStore {
       handleDisplayDataset: PublicActions.displayDataset,
       handleDisplayMolecule: PublicActions.displayMolecule,
       handleDisplayReaction: PublicActions.displayReaction,
-      handleDisplayCollection: PublicActions.displayCollection,
       handleReceiveSearchresult: PublicActions.fetchBasedOnSearchSelectionAndCollection,
       handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
       handleClose: PublicActions.close,
@@ -52,20 +52,9 @@ class PublicStore {
       handleEditHowTo: PublicActions.editHowTo,
       handleDisplayHowTo: PublicActions.displayHowTo,
       handleGetElements: PublicActions.getElements,
-      handleGetEmbargoElements: PublicActions.getEmbargoElements,
-      handleGetEmbargoElement: PublicActions.getEmbargoElement,
-      handleDisplayReviewReaction: PublicActions.displayReviewReaction,
-      handleDisplayReviewSample: PublicActions.displayReviewSample,
-      handelReviewPublish: PublicActions.reviewPublish,
-      handelUpdateComment: PublicActions.updateComment,
-      handleFetchBundles: PublicActions.fetchEmbargoBundle,
-      handleDisplayEmbargoElement: PublicActions.displayReviewEmbargo,
-      handleEmbargoRelease: [PublicActions.releaseEmbargo, PublicActions.deleteEmbargo],
-      handleEmbargoMove: PublicActions.moveEmbargo,
-      handleEmbargoAssign: PublicActions.assignEmbargo,
       handleRefreshPubElements: PublicActions.refreshPubElements,
-      handleRefreshEmbargoBundles: PublicActions.getEmbargoBundle,
-      handleUnitsSystem: PublicActions.fetchUnitsSystem,
+      handleDisplayCollection: PublicActions.displayCollection,
+
     });
   }
 
@@ -197,15 +186,7 @@ class PublicStore {
     Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
   }
 
-  handleDisplayCollection(collectionList) {
-    this.setState({
-      guestPage: 'collection',
-      elementType: 'collection',
-      queryId: collectionList.id,
-      selectEmbargo: collectionList.colData && collectionList.colData.col
-    });
-    Aviator.navigate(`/publications/collections/${collectionList.id}`, { silent: true });
-  }
+
 
   handleReceiveSearchresult(result) {
     this.setState({ ...result.publicMolecules });
@@ -263,143 +244,28 @@ class PublicStore {
     });
   }
 
-  handleGetElements(results) {
-    const {
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
-    } = results;
-    this.setState({
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
-    });
-  }
 
-  handleGetEmbargoElements(results) {
-    const { elements, current_user, embargo_id } = results;
+  handleDisplayCollection(collectionList) {
+    // console.log(collectionList.colData && collectionList.colData.col);
     this.setState({
-      selectEmbargoId: embargo_id,
-      elements,
-      currentElement: null,
-      currentUser: current_user
+      guestPage: 'collection',
+      elementType: 'collection',
+      queryId: collectionList.id,
+      selectEmbargo: collectionList.colData && collectionList.colData.col
     });
+    Aviator.navigate(`/publications/collections/${collectionList.id}`, { silent: true });
   }
 
-  handleGetEmbargoElement(results) {
-    this.setState({ currentElement: results })
-  }
-
-  handelUpdateComment(result) {
-    this.setState({ review: result.review });
-  }
-
-  handelReviewPublish(results) {
-    // const { history, checklist, reviewComments } = results.review;
-    this.setState({ review: results.review });
-    PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
-  }
-
-  handleDisplayReviewReaction(result) {
-    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({
-        guestPage: 'review',
-        elementType: 'reaction',
-        queryId: result.id,
-        currentElement: result.element,
-        review: publication?.review || {},
-        reviewLevel: result.element.reviewLevel,
-        isSubmitter: (result.element && result.element.isSubmitter) || false
-      });
-      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
-    }
-  }
-
-  handleDisplayReviewSample(result) {
-    const publication = (result.element && result.element.publication) || {};
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({
-        guestPage: 'review',
-        elementType: 'sample',
-        queryId: result.id,
-        currentElement: result.element,
-        review: publication?.review || {},
-        isSubmitter: (result.element && result.element.isSubmitter) || false,
-        reviewLevel: result.element && result.element.reviewLevel,
-      });
-      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
-    }
-  }
 
-  handleFetchBundles(result) {
-    const bundles = result.repository || [];
-    // eslint-disable-next-line camelcase
-    const { current_user } = result;
+  handleGetElements(results) {
+    const {
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    } = results;
     this.setState({
-      bundles, current_user, elements: [], currentElement: null
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
     });
   }
 
-  handleRefreshEmbargoBundles(result) {
-    const cols = result.repository;
-    const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push(col);
-      });
-    }
-    this.setState({ bundles, current_user });
-  }
-
-  handleDisplayEmbargoElement(result) {
-    const publication = (result.element && result.element.publication) || {};
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home/');
-    } else {
-      const elementType = (result.element.sample ? 'sample' : 'reaction');
-      this.setState({
-        guestPage: 'embargo',
-        elementType,
-        queryId: result.id,
-        currentElement: result.element,
-        review: publication?.review || {},
-        reviewLevel: result.element.reviewLevel
-      });
-      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
-    }
-  }
-
-  handleEmbargoRelease(result) {
-    PublicActions.fetchEmbargoBundle();
-  }
-
-  handleEmbargoMove(results) {
-    const { col_id, is_new_embargo, new_embargo, message } = results.result;
-    if (is_new_embargo === true) {
-      this.bundles.push(new_embargo);
-    }
-    alert(message);
-    PublicActions.getEmbargoElements(col_id);
-  }
-
-  handleEmbargoAssign(result) {
-    if (result.error) {
-      alert(result.error);
-    } else {
-      alert(result.message);
-      // refresh embargo list
-      PublicActions.getEmbargoBundle();
-      // refresh element list
-      PublicActions.getElements(
-        this.selectType, this.selectState, this.searchType,
-        this.searchValue, this.page, this.perPage
-      );
-    }
-  }
 
   handleUnitsSystem(result) {
     this.setState({ unitsSystem: result });
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
new file mode 100644
index 000000000..84d1ee40b
--- /dev/null
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -0,0 +1,124 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import ReviewActions from '../actions/ReviewActions';
+import ElementActions from '../actions/ElementActions';
+import UIActions from '../actions/UIActions';
+
+class ReviewStore {
+  constructor() {
+    this.showReviewModal = false;
+    this.reviewData = {};
+    this.btnAction = '';
+    //this.bundles = [];
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.currentElement = null;
+    this.review = {};
+
+    this.bindListeners({
+      handleReviewModal: ReviewActions.handleReviewModal,
+      handleDisplayReviewReaction: ReviewActions.displayReviewReaction,
+      handleDisplayReviewSample: ReviewActions.displayReviewSample,
+      handelReviewPublish: ReviewActions.reviewPublish,
+      handleGetElements: ReviewActions.getElements,
+      handelUpdateComment: ReviewActions.updateComment,
+      handleUnitsSystem: ReviewActions.fetchUnitsSystem,
+      handleReviewUpdate: ReviewActions.updateReview,
+      handleFetchSample: ReviewActions.fetchSample,
+    });
+  }
+
+  handleUnitsSystem(result) {
+    this.setState({ unitsSystem: result });
+  }
+
+
+  handleReviewUpdate(review) {
+    this.setState({ review: review });
+  }
+
+  handleFetchSample(data) {
+    if (data.sample && data.reviewLevel === 0) {
+    } else {
+      this.setState({
+        currentElement: data || {},
+        element: data || {},
+        elementType: 'sample',
+        reviewLevel: data?.reviewLevel || 0,
+        isSubmitter: data?.isSubmitter || false,
+        review: data?.publication?.review || {},
+      });
+    }
+  }
+
+
+  handleGetElements(results) {
+    const {
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    } = results;
+    this.setState({
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue, showReviewModal: false
+    });
+  }
+
+  handleReviewModal(result) {
+    this.setState({ showReviewModal: result.show, btnAction: result.action });
+  }
+
+  handelUpdateComment(result) {
+    this.setState({ review: result.review, showReviewModal: false });
+  }
+
+  handelReviewPublish(results) {
+    // const { history, checklist, reviewComments } = results.review;
+    this.setState({ review: results.review, showReviewModal: false });
+    ReviewActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
+  }
+
+  handleDisplayReviewReaction(result) {
+    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({
+        guestPage: 'review',
+        elementType: 'reaction',
+        queryId: result?.id || 0,
+        reaction: result?.element?.reaction || {},
+        currentElement: result?.element || {},
+        showReviewModal: false,
+        review: publication?.review || {},
+        reviewLevel: result?.element?.reviewLevel || 0,
+        isSubmitter: result?.element?.isSubmitter || false
+      });
+      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
+    }
+  }
+
+  handleDisplayReviewSample(result) {
+    const publication = (result.element && result.element.publication) || {};
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({
+        guestPage: 'review',
+        elementType: 'sample',
+        queryId: result.id || 0,
+        currentElement: result?.element || {},
+        showReviewModal: false,
+        review: publication?.review || {},
+        isSubmitter: result?.element?.isSubmitter || false,
+        reviewLevel: result?.element?.reviewLevel || 0,
+      });
+      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
+    }
+  }
+
+
+};
+
+
+export default alt.createStore(ReviewStore, 'ReviewStore');
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index b9102c782..270204aec 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -3,10 +3,11 @@ import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTri
 import SVG from 'react-inlinesvg';
 import uuid from 'uuid';
 import RepoCollectionDetails from './RepoCollectionDetails';
-import PublicActions from '../components/actions/PublicActions';
+import EmbargoActions from '../components/actions/EmbargoActions';
+import EmbargoStore from '../components/stores/EmbargoStore';
 import PublicStore from '../components/stores/PublicStore';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 
 const SvgPath = (svg, type) => {
   if (svg && svg !== '***') {
@@ -44,18 +45,18 @@ const infoTag = (el, la) => {
   );
 };
 
-const Elist = (cid, la, el, selectEmbargo = null, user = null, currentElement = null) => {
+const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null) => {
   if (!el) {
     return '';
   }
   let listClass;
   if (el.type === 'Reaction') {
-    listClass = (currentElement !== null && currentElement.publication && currentElement.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
+    listClass = (element !== null && element.publication && element.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
   } else {
-    listClass = (currentElement !== null && currentElement.published_samples && currentElement.published_samples[0] && currentElement.published_samples[0].id === el.id) ? 'list_focus_on' : 'list_focus_off';
+    listClass = (element !== null && element.published_samples && element.published_samples[0] && element.published_samples[0].id === el.id) ? 'list_focus_on' : 'list_focus_off';
   }
   return (
-    <Col md={currentElement ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => PublicActions.getEmbargoElement(cid, el)}>
+    <Col md={element ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => EmbargoActions.getEmbargoElement(cid, el)}>
       <div className={`home_reaction ${listClass}`}>
         <Row key={`list-reaction-svg-${el.id}`}>
           <Col md={12}>
@@ -75,7 +76,7 @@ export default class RepoCollection extends Component {
     this.state = {
       elements: [],
       current_user: {},
-      currentElement: null,
+      element: null,
       selectEmbargo: null,
       showInfoModal: false,
       showMetadataModal: false,
@@ -88,32 +89,30 @@ export default class RepoCollection extends Component {
   }
 
   componentDidMount() {
+    EmbargoStore.listen(this.onChange);
     PublicStore.listen(this.onChange);
   }
 
   componentWillUnmount() {
+    EmbargoStore.unlisten(this.onChange);
     PublicStore.unlisten(this.onChange);
   }
 
   onChange(state) {
+    if (state.elements && state.elements != this.state.elements) {
+      this.setState({ elements: state.elements });
+    }
     // this.setState(prevState => ({ ...prevState, ...state }));
     if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {
       this.setState({ selectEmbargo: state.selectEmbargo });
-
-      PublicFetcher.fetchEmbargoElements(state.selectEmbargo.element_id)
-        .then((result) => {
-          this.setState({ elements: result.elements });
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
+      EmbargoActions.getEmbargoElements(state.selectEmbargo.element_id);
     }
 
-    if (state.currentElement !== this.state.currentElement) {
-      this.setState({ currentElement: state.currentElement });
+    if (state.element !== this.state.element) {
+      this.setState({ element: state.element });
     }
   }
 
-
   handleInfoShow() {
     this.setState({ showInfoModal: true });
   }
@@ -174,14 +173,14 @@ export default class RepoCollection extends Component {
 
   render() {
     const {
-      elements, currentElement, currentUser, showInfoModal, selectEmbargo, showMetadataModal
+      elements, element, currentUser, showInfoModal, selectEmbargo, showMetadataModal
     } = this.state;
     const id = (selectEmbargo && selectEmbargo.element_id) || 0;
     const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
     const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
     return (
       <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
+        <Col md={element ? 4 : 12} >
           <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
             {this.renderSearch()}
             <div style={{ clear: 'both' }} />
@@ -189,16 +188,16 @@ export default class RepoCollection extends Component {
           <div className="public-list" style={{ backgroundColor: '#efefef' }}>
             <Table className="sample-entries">
               <tbody>
-                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, currentElement)) }
+                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element)) }
               </tbody>
             </Table>
           </div>
         </Col>
         <Col
-          md={currentElement ? 8 : 0}
+          md={element ? 8 : 0}
         >
           <div className="public-element">
-            <RepoCollectionDetails currentElement={currentElement} />
+            <RepoCollectionDetails element={element} />
           </div>
           <InfoModal
             key="info-modal"
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
index d36a0624b..4acc3319d 100644
--- a/app/packs/src/libHome/RepoCollectionDetails.js
+++ b/app/packs/src/libHome/RepoCollectionDetails.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
+import EmbargoStore from '../components/stores/EmbargoStore';
 import RepoReactionDetails from './RepoReactionDetails';
 import RepoSampleDetails from './RepoSampleDetails';
 
@@ -13,11 +13,11 @@ export default class RepoCollectionDetails extends Component {
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
+    EmbargoStore.listen(this.onStoreChange);
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
+    EmbargoStore.unlisten(this.onStoreChange);
   }
 
   onStoreChange(state) {
@@ -25,16 +25,16 @@ export default class RepoCollectionDetails extends Component {
   }
 
   switchTypeRender() {
-    const { currentElement } = this.state;
+    const { element } = this.state;
 
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
+    if (typeof (element) === 'undefined' || !element) {
       return <span />;
     }
-    const elementType = currentElement && currentElement.elementType;
+    const elementType = element && element.elementType;
 
     switch (elementType) {
-      case 'reaction': return <RepoReactionDetails isPublished reaction={currentElement} />;
-      case 'molecule': return <RepoSampleDetails isPublished element={currentElement} />;
+      case 'reaction': return <RepoReactionDetails isPublished reaction={element} />;
+      case 'molecule': return <RepoSampleDetails isPublished element={element} />;
       default: return <span />;
     }
   }
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 7fc3736c5..ed0397c12 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -26,6 +26,7 @@ import moment from 'moment';
 import Select from 'react-select';
 import uuid from 'uuid';
 import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
+import { RepoCommentBtn } from 'repo-review-ui';
 import ContainerComponent from './ContainerComponent';
 import Formula from '../components/common/Formula';
 import HelpInfo from '../components/common/HelpInfo';
@@ -46,7 +47,6 @@ import DropdownButtonSelection from '../components/common/DropdownButtonSelectio
 import InputButtonField from '../components/common/InputButtonField';
 import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import PublicActions from '../components/actions/PublicActions';
-import RepoCommentBtn from '../components/common/RepoCommentBtn';
 import RepoUserComment from '../components/common/RepoUserComment';
 import RepoPublicComment from '../components/common/RepoPublicComment';
 import { previewContainerImage } from '../components/utils/imageHelper';
@@ -654,6 +654,39 @@ IconToMyDB.defaultProps = {
   isPublished: true,
 };
 
+
+const ChecklistPanel = ({
+  checklist, isReviewer
+}) => {
+  const dtbl = checklist?.tbl?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'blue' }} />) : (<i className="fa fa-square-o" style={{ color: 'blue' }} />);
+  const ddes = checklist?.des?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'orange' }} />) : (<i className="fa fa-square-o" style={{ color: 'orange' }} />);
+  const dafm = checklist?.afm?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'green' }} />) : (<i className="fa fa-square-o" style={{ color: 'green' }} />);
+  const dact = checklist?.act?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'purple' }} />) : (<i className="fa fa-square-o" style={{ color: 'purple' }} />);
+  const dohd = checklist?.ohd?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
+  if (isReviewer === true) {
+    return (
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">table values</Tooltip>}>{dtbl}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">description</Tooltip>}>{ddes}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis format</Tooltip>}>{dafm}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis content</Tooltip>}>{dact}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">on hold</Tooltip>}>{dohd}</OverlayTrigger>&nbsp;
+      </div>
+    );
+  }
+  return (<div />);
+};
+
+ChecklistPanel.propTypes = {
+  checklist: PropTypes.object,
+  isReviewer: PropTypes.bool,
+};
+
+ChecklistPanel.defaultProps = {
+  checklist: {},
+  isReviewer: false
+};
+
 const SidToPubChem = ({ sid }) => {
   let labelStyle = {
     // display: 'inline-block',
@@ -2348,6 +2381,7 @@ export {
   EmbargoCom,
   IconLicense,
   IconToMyDB,
+  ChecklistPanel,
   isNmrPass,
   isDatasetPass,
   HomeFeature,
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 35281370d..752108619 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -3,12 +3,13 @@ import { Table, Col, Row, Navbar, MenuItem, ButtonGroup, Button, ButtonToolbar,
 import Select from 'react-select';
 import { filter } from 'lodash';
 import RepoEmbargoDetails from './RepoEmbargoDetails';
-import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
+import EmbargoActions from '../components/actions/EmbargoActions';
+import EmbargoStore from '../components/stores/EmbargoStore';
 import { ElAspect } from './RepoCommon';
 import { ConfirmModal } from '../components/common/ConfirmModal';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 
 const renderMenuItems = (bundles) => {
   if (bundles.length < 1) return <div />;
@@ -54,11 +55,13 @@ export default class RepoEmbargo extends Component {
 
   componentDidMount() {
     PublicStore.listen(this.onChange);
+    EmbargoStore.listen(this.onChange);
     this.loadBundles();
   }
 
   componentWillUnmount() {
     PublicStore.unlisten(this.onChange);
+    EmbargoStore.unlisten(this.onChange);
   }
 
   onChange(state) {
@@ -68,7 +71,7 @@ export default class RepoEmbargo extends Component {
       if (typeof (vaildSelect) === 'undefined') {
         this.setState({ selectEmbargo: null });
       } else {
-        RepositoryFetcher.refreshEmbargo(this.state.selectEmbargo || {})
+        EmbargoFetcher.refreshEmbargo(this.state.selectEmbargo || {})
           .then((result) => {
             if (!result.error) this.setState({ selectEmbargo: result });
           }).catch((errorMessage) => {
@@ -120,7 +123,7 @@ export default class RepoEmbargo extends Component {
     const { bundles } = this.state;
     const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
     this.setState({ selectEmbargo });
-    PublicActions.getEmbargoElements(eventKey.value);
+    EmbargoActions.getEmbargoElements(eventKey.value);
   }
 
   handleEmbargoAccount() {
@@ -131,7 +134,7 @@ export default class RepoEmbargo extends Component {
     } else if (current_user.id !== selectEmbargo.published_by) {
       alert('only the submitter can generate a temporary account!');
     } else {
-      PublicActions.generateEmbargoAccount(selectEmbargo.element_id);
+      EmbargoActions.generateEmbargoAccount(selectEmbargo.element_id);
       alert(`A temporary account for [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been created. The details have been sent to you by e-mail.`);
     }
   }
@@ -143,7 +146,7 @@ export default class RepoEmbargo extends Component {
     } else if (current_user.id !== selectEmbargo.published_by) {
       alert('only the submitter can perform the release!');
     } else {
-      PublicActions.releaseEmbargo(selectEmbargo.element_id);
+      EmbargoActions.releaseEmbargo(selectEmbargo.element_id);
       alert(`The embargo on [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been released!`);
     }
   }
@@ -156,7 +159,7 @@ export default class RepoEmbargo extends Component {
       } else if (current_user.id !== selectEmbargo.published_by) {
         alert('only the submitter can delete the release!');
       } else {
-        PublicActions.deleteEmbargo(selectEmbargo.element_id);
+        EmbargoActions.deleteEmbargo(selectEmbargo.element_id);
       }
     }
     this.setState({ showConfirmModal: false });
@@ -164,57 +167,14 @@ export default class RepoEmbargo extends Component {
 
   handleMoveEmbargo() {
     const { selectEmbargo, moveElement, newEmbargo } = this.state;
-    PublicActions.moveEmbargo(selectEmbargo.element_id, newEmbargo, moveElement);
+    EmbargoActions.moveEmbargo(selectEmbargo.element_id, newEmbargo, moveElement);
     this.setState({ showMoveModal: false });
   }
 
   loadBundles() {
-    PublicActions.fetchEmbargoBundle();
+    EmbargoActions.fetchEmbargoBundle();
   }
 
-  renderSearch(bundles) {
-    const { selectEmbargo, elements, current_user } = this.state;
-    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const options = [];
-
-    bundles.forEach((col) => {
-      const tag = col.taggable_data || {};
-      options.push({ value: col.element_id, name: tag.label, label: tag.label });
-    });
-
-    const filterDropdown = (
-      <div className="home-adv-search">
-        <Select
-          value={selectEmbargo && selectEmbargo.element_id}
-          onChange={e => this.handleElementSelection(e)}
-          options={options}
-          style={{ width: '180px' }}
-        />
-      <ButtonGroup>
-        <Button
-          id="all-info-button"
-          disabled={selectEmbargo === null || elements?.length === 0}
-          onClick={() => this.handleMetadataShow()}
-        >
-          <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
-        </Button>
-        <Button
-          id="all-info-button"
-          disabled={selectEmbargo === null || elements?.length === 0}
-          onClick={() => this.handleInfoShow()}
-        >
-          <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
-        </Button>
-      </ButtonGroup>
-      </div>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
 
   rendeActionBtn(bundles) {
     const { selectEmbargo, elements, current_user } = this.state;
@@ -263,6 +223,50 @@ export default class RepoEmbargo extends Component {
     );
   }
 
+  renderSearch(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const options = [];
+
+    bundles?.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const filterDropdown = (
+      <div className="home-adv-search">
+        <Select
+          value={selectEmbargo && selectEmbargo.element_id}
+          onChange={e => this.handleElementSelection(e)}
+          options={options}
+          style={{ width: '180px' }}
+        />
+        <ButtonGroup>
+          <Button
+            id="all-info-button"
+            disabled={selectEmbargo === null || elements?.length === 0}
+            onClick={() => this.handleMetadataShow()}
+          >
+            <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
+          </Button>
+          <Button
+            id="all-info-button"
+            disabled={selectEmbargo === null || elements?.length === 0}
+            onClick={() => this.handleInfoShow()}
+          >
+            <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
+          </Button>
+        </ButtonGroup>
+      </div>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
 
   // render modal
   renderMoveModal() {
@@ -271,7 +275,7 @@ export default class RepoEmbargo extends Component {
       { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
     ];
 
-    bundles.forEach((col) => {
+    bundles?.forEach((col) => {
       const tag = col.taggable_data || {};
       options.push({ value: col.element_id, name: tag.label, label: tag.label });
     });
@@ -336,7 +340,7 @@ export default class RepoEmbargo extends Component {
             <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
               <Table striped className="review-entries">
                 <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, owner, currentElement, this.handleMoveShow)) }
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, EmbargoActions.displayReviewEmbargo, currentUser, owner, currentElement, this.handleMoveShow)) }
                 </tbody>
               </Table>
             </div>
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
index 89d33cae8..10f579beb 100644
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ b/app/packs/src/libHome/RepoEmbargoDetails.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PublicStore from '../components/stores/PublicStore';
+import EmbargoStore from '../components/stores/EmbargoStore';
+import ReviewStore from '../components/stores/ReviewStore';
 import RepoReactionDetails from './RepoReactionDetails';
 import RepoSampleDetails from './RepoSampleDetails';
 
@@ -15,10 +17,14 @@ export default class RepoEmbargoDetails extends Component {
 
   componentDidMount() {
     PublicStore.listen(this.onStoreChange);
+    EmbargoStore.listen(this.onStoreChange);
+    // ReviewStore.listen(this.onStoreChange);
   }
 
   componentWillUnmount() {
     PublicStore.unlisten(this.onStoreChange);
+    EmbargoStore.listen(this.onStoreChange);
+    // ReviewStore.listen(this.onStoreChange);
   }
 
   onStoreChange(state) {
@@ -32,8 +38,27 @@ export default class RepoEmbargoDetails extends Component {
       return <span />;
     }
     switch (elementType) {
-      case 'reaction': return <RepoReactionDetails reaction={currentElement.reaction} />;
-      case 'sample': return <RepoSampleDetails element={currentElement} />;
+      case 'reaction':
+        return (
+          <RepoReactionDetails
+            reaction={currentElement.reaction}
+            canComment
+            reviewLevel={this.state.reviewLevel}
+            isSubmitter={this.state.isSubmitter}
+            btnAction={this.state.btnAction}
+            isReview={false}
+            review={this.state.review}
+          />);
+      case 'sample':
+        return (
+          <RepoSampleDetails
+            element={currentElement}
+            canComment
+            btnAction={this.state.btnAction}
+            reviewLevel={this.state.reviewLevel}
+            isSubmitter={this.state.isSubmitter}
+            review={this.state.review}
+          />);
       default: return <span />;
     }
   }
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index 1a17ddf76..71e6c0a0f 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { AffiliationMap } from 'repo-review-ui';
 import Utils from '../components/utils/Functions';
 import {
   AffiliationList,
@@ -8,7 +9,6 @@ import {
   ContributorInfo,
   DownloadMetadataBtn
 } from './RepoCommon';
-import { AffiliationMap } from './RepoReviewCommon';
 
 const Doi = (props) => {
   const { type, id, doi } = props;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index eecf615fe..c9c88241b 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -8,6 +8,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { head, filter } from 'lodash';
+import { RepoCommentModal } from 'repo-review-ui';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AuthorList,
@@ -35,12 +36,11 @@ import {
 } from './RepoCommon';
 import LoadingActions from '../components/actions/LoadingActions';
 import PublicActions from '../components/actions/PublicActions';
+import ReviewActions from '../components/actions/ReviewActions';
 import QuillViewer from '../components/QuillViewer';
 import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
 import RepoUserComment from '../components/common/RepoUserComment';
 import RepoPublicComment from '../components/common/RepoPublicComment';
 import Sample from '../components/models/Sample';
@@ -56,8 +56,8 @@ export default class RepoReactionDetails extends Component {
       showTlc: true,
       showSA: true,
       showRA: {},
-      showReviewModal: false,
-      btnAction: '',
+      // showReviewModal: false,
+      // btnAction: '',
       showCommentModal: false,
       commentField: '',
       originInfo: ''
@@ -72,7 +72,6 @@ export default class RepoReactionDetails extends Component {
     this.handleToggle = this.handleToggle.bind(this);
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
     this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
     this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
@@ -129,17 +128,13 @@ export default class RepoReactionDetails extends Component {
   }
 
   handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
+    ReviewActions.handleReviewModal(showReviewModal, btnAction);
   }
 
   handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'reaction', comment, action, checklist, reviewComments);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleReviewUpdate(review) {
-    this.props.onReviewUpdate(review);
+    ReviewActions.reviewPublish(elementId, 'reaction', comment, action, checklist, reviewComments);
+    // this.setState({ showReviewModal: false });
   }
 
   handleCommentBtn(show, field, orgInfo) {
@@ -159,7 +154,7 @@ export default class RepoReactionDetails extends Component {
     cinfo[field].comment = comment;
     cinfo[field].origInfo = origInfo;
 
-    PublicActions.updateComment(elementId, elementType, cinfo);
+    ReviewActions.updateComment(elementId, elementType, cinfo);
     this.setState({ showCommentModal: false });
   }
 
@@ -530,17 +525,6 @@ export default class RepoReactionDetails extends Component {
                 onUpdate={this.handleSubmitComment}
                 onHide={() => this.setState({ showCommentModal: false })}
               />
-              <RepoReviewModal
-                show={this.state.showReviewModal}
-                elementId={reaction.id}
-                action={this.state.btnAction}
-                reviewLevel={reviewLevel}
-                isSubmitter={isSubmitter}
-                review={this.props.review}
-                onSubmit={this.handleSubmitReview}
-                onUpdate={this.handleReviewUpdate}
-                onHide={() => this.setState({ showReviewModal: false })}
-              />
             </div>
           ) : ''
         }
@@ -553,6 +537,7 @@ RepoReactionDetails.propTypes = {
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
+  btnAction: PropTypes.string,
   isSubmitter: PropTypes.bool,
   isReview: PropTypes.bool,
   review: PropTypes.object,
@@ -565,6 +550,7 @@ RepoReactionDetails.defaultProps = {
   isPublished: false,
   canComment: false,
   isSubmitter: false,
+  btnAction: '',
   reviewLevel: 0,
   isReview: false,
   review: {},
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 2c4fa55eb..09272529d 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -3,12 +3,18 @@ import SVG from 'react-inlinesvg';
 import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import Select from 'react-select';
 import { filter } from 'lodash';
+import { RepoReviewModal } from 'repo-review-ui';
 import RepoReviewDetails from './RepoReviewDetails';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
+import ReviewActions from '../components/actions/ReviewActions';
+import EmbargoActions from '../components/actions/EmbargoActions';
+import ReviewStore from '../components/stores/ReviewStore';
+import EmbargoStore from '../components/stores/EmbargoStore';
 import UserStore from '../components/stores/UserStore';
 import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import { SvgPath, ElStateLabel, ElSubmitTime, SchemeWord } from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+
+import { SvgPath, ElStateLabel, ElSubmitTime, SchemeWord, ChecklistPanel } from './RepoCommon';
+// import RepoReviewModal from '../components/common/RepoReviewModal';
 
 const renderElement = (e, currentElement, embargoBtn) => {
   if (e.type === 'Reaction') {
@@ -18,7 +24,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
       <tr
         key={e.id}
         className={listClass}
-        onClick={() => PublicActions.displayReviewReaction(e.id)}
+        onClick={() => ReviewActions.displayReviewReaction(e.id)}
       >
         <td style={{ position: 'relative' }} >
           <span className="review_element_label">
@@ -29,6 +35,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
           &nbsp;{embargoBtn}
           <div>
             <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+            <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} />
           </div>
         </td>
       </tr>
@@ -39,7 +46,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
     <tr
       key={e.id}
       className={listClass}
-      onClick={() => PublicActions.displayReviewSample(e.id)}
+      onClick={() => ReviewActions.displayReviewSample(e.id)}
     >
       <td style={{ position: 'relative' }}>
         <span className="review_element_label">
@@ -50,6 +57,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
         &nbsp;{embargoBtn}
         <div>
           <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+          <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} />
         </div>
       </td>
     </tr>
@@ -66,12 +74,15 @@ export default class RepoReview extends Component {
       perPage: 10,
       elements: [],
       currentElement: null,
+      showReviewModal: false,
+      reviewData: {},
       selectType: 'All',
       searchType: 'All',
       searchValue: '',
       listTypeOptions: [],
       selectState: defaultState,
       bundles: [],
+      btnAction: '',
       showEmbargoModal: false,
       selectedElement: null,
       selectedEmbargo: null
@@ -83,30 +94,49 @@ export default class RepoReview extends Component {
     this.handleSearchNameInput = this.handleSearchNameInput.bind(this);
     this.onEmbargoBtnClick = this.onEmbargoBtnClick.bind(this);
     this.onEmbargoBtnSave = this.onEmbargoBtnSave.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.getElements.defer();
-    PublicActions.getEmbargoBundle();
-    PublicActions.fetchUnitsSystem.defer();
+    ReviewStore.listen(this.onChange);
+    EmbargoStore.listen(this.onChange);
+    ReviewActions.getElements.defer();
+    EmbargoActions.getEmbargoBundle();
+    ReviewActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
+    ReviewStore.unlisten(this.onChange);
+    EmbargoStore.unlisten(this.onChange);
   }
 
   onChange(state) {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
+  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
+    LoadingActions.start();
+    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
+    this.props.onHide(false);
+  }
+
+  handleReviewUpdate(e, col, rr) {
+    const { review } = this.state;
+    const checklist = rr.checklist || {};
+    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
+    checklist[col].status = e.target.checked;
+    review.checklist = checklist;
+    ReviewActions.updateReview(review);
+  }
+
   onPerPageChange(e) {
     const {
       page, selectType, selectState, searchType, searchValue
     } = this.state;
     const perPage = e.target.value;
     this.setState({ perPage });
-    PublicActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
+    ReviewActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
   }
 
   onPaginationSelect(eventKey) {
@@ -114,7 +144,7 @@ export default class RepoReview extends Component {
       pages, perPage, selectType, selectState, searchType, searchValue
     } = this.state;
     if (eventKey > 0 && eventKey <= pages) {
-      PublicActions.getElements(
+      ReviewActions.getElements(
         selectType, selectState, searchType, searchValue,
         eventKey, perPage
       );
@@ -133,7 +163,7 @@ export default class RepoReview extends Component {
     if (selectedEmbargo === null) {
       return alert('Please select an embargo first!');
     }
-    PublicActions.assignEmbargo(selectedEmbargo.value, selectedElement);
+    EmbargoActions.assignEmbargo(selectedEmbargo.value, selectedElement);
     this.onEmbargoBtnClick(e, element);
     return true;
   }
@@ -196,12 +226,12 @@ export default class RepoReview extends Component {
         const options = res && res.result && res.result
           .map(u => ({ value: u.key, name: u.name, label: u.label }));
         this.setState({ listTypeOptions: options });
-        PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
+        ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
       }).catch((errorMessage) => {
         console.log(errorMessage);
       });
     } else {
-      PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
+      ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
     }
   }
 
@@ -218,7 +248,7 @@ export default class RepoReview extends Component {
     } = this.state;
     if (val) {
       this.setState({ page: 1, searchValue: val });
-      PublicActions.getElements(selectType, selectState, searchType, val, 1, perPage);
+      ReviewActions.getElements(selectType, selectState, searchType, val, 1, perPage);
     }
   }
 
@@ -226,10 +256,10 @@ export default class RepoReview extends Component {
     const { perPage, searchType, searchValue } = this.state;
     if (t === 'type') {
       this.setState({ selectType: event });
-      PublicActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
+      ReviewActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
     } else if (t === 'state') {
       this.setState({ selectState: event });
-      PublicActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
+      ReviewActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
     }
   }
 
@@ -239,7 +269,7 @@ export default class RepoReview extends Component {
     } = this.state;
     switch (event.keyCode) {
       case 13: // Enter
-        PublicActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
+        ReviewActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
         event.preventDefault();
         break;
       default:
@@ -393,7 +423,7 @@ export default class RepoReview extends Component {
         <Modal.Body>
           <Panel bsStyle="success">
             <Panel.Heading>
-              <Panel.Title>Move {element.type} [{element.title}] to :</Panel.Title>
+              <Panel.Title>Movee {element.type} [{element.title}] to :</Panel.Title>
             </Panel.Heading>
             <Panel.Body>
               <Select
@@ -414,6 +444,39 @@ export default class RepoReview extends Component {
     );
   }
 
+
+  renderReviewModal() {
+    const { showReviewModal, reviewData, reviewLevel, isSubmitter, review, currentElement, elementType, btnAction } = this.state;
+    const rrr = {};
+    rrr['reviewLevel'] = reviewLevel;
+    rrr['isSubmitter'] = isSubmitter;
+    rrr['review'] = review;
+    rrr['btnAction'] = btnAction;
+    rrr['elementType'] = elementType;
+    if (elementType === 'sample') {
+      rrr['elementId'] = currentElement?.sample?.id;
+    } else {
+      rrr['elementId'] = currentElement?.reaction?.id;
+    }
+
+    return (
+      <RepoReviewModal
+        show={showReviewModal}
+        data={rrr}
+        onSubmit={this.handleSubmitReview}
+        onUpdate={this.handleReviewUpdate}
+        // elementId={sample.id}
+        // action={this.state.btnAction}
+        // isSubmitter={isSubmitter}
+        // reviewLevel={reviewLevel}
+        // review={review || {}}
+        // onSubmit={this.handleSubmitReview}
+        // onUpdate={this.handleReviewUpdate}
+        onHide={() => this.setState({ showReviewModal: false })}
+      />
+    );
+  }
+
   render() {
     const { elements, currentElement } = this.state;
     const { currentUser } = UserStore.getState();
@@ -428,33 +491,36 @@ export default class RepoReview extends Component {
       return null;
     };
     return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch()}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement, embargoBtn(r))) }
-                </tbody>
-              </Table>
-            </div>
-            <div className="list-container-bottom">
-              <Row>
-                <Col sm={8}>{this.pagination()}</Col>
-                <Col sm={4}>{this.perPageInput()}</Col>
-              </Row>
+      <div>
+        <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+          <Col md={currentElement ? 4 : 12} >
+            <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+              {this.renderSearch()}
+              <div style={{ clear: 'both' }} />
+            </Navbar>
+            <div>
+              <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+                <Table striped className="review-entries">
+                  <tbody striped="true" bordered="true" hover="true">
+                    {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement, embargoBtn(r))) }
+                  </tbody>
+                </Table>
+              </div>
+              <div className="list-container-bottom">
+                <Row>
+                  <Col sm={8}>{this.pagination()}</Col>
+                  <Col sm={4}>{this.perPageInput()}</Col>
+                </Row>
+              </div>
             </div>
-          </div>
-        </Col>
-        <Col className="review-element" md={currentElement ? 8 : 0}>
-          <RepoReviewDetails />
-          {this.renderEmabrgoModal()}
-        </Col>
-      </Row>
+          </Col>
+          <Col className="review-element" md={currentElement ? 8 : 0}>
+            <RepoReviewDetails />
+            {this.renderEmabrgoModal()}
+          </Col>
+        </Row>
+        {this.renderReviewModal()}
+      </div>
     );
   }
 }
diff --git a/app/packs/src/libHome/RepoReviewCommon.js b/app/packs/src/libHome/RepoReviewCommon.js
index 5f1ae4436..34f6e5e81 100644
--- a/app/packs/src/libHome/RepoReviewCommon.js
+++ b/app/packs/src/libHome/RepoReviewCommon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Alert } from 'react-bootstrap';
 import { startsWith } from 'lodash';
 import moment from 'moment';
-import RepoReviewTimeFormat from '../components/common/RepoReviewTimeFormat';
+import { RepoReviewTimeFormat } from 'repo-review-ui';
 
 const AffiliationMap = (affiliationIds) => {
   const aId = [].concat.apply([], affiliationIds);
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
index db5524e7c..a46f8416e 100644
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ b/app/packs/src/libHome/RepoReviewDetails.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
+import ReviewStore from '../components/stores/ReviewStore';
 import RepoReactionDetails from './RepoReactionDetails';
 import RepoSampleDetails from './RepoSampleDetails';
 
@@ -9,29 +9,26 @@ export default class RepoReviewDetails extends Component {
     this.state = {
       element: props.element,
       review: {},
+      btnAction: '',
       reviewLevel: 0,
       isSubmitter: false
     };
 
     this.onStoreChange = this.onStoreChange.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
+    ReviewStore.listen(this.onStoreChange);
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
+    ReviewStore.unlisten(this.onStoreChange);
   }
 
   onStoreChange(state) {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
-  handleReviewUpdate(review) {
-    this.setState({ review });
-  }
 
   switchTypeRender() {
     const { currentElement, elementType } = this.state;
@@ -46,8 +43,8 @@ export default class RepoReviewDetails extends Component {
             canComment
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
+            btnAction={this.state.btnAction}
             isReview={true}
-            onReviewUpdate={this.handleReviewUpdate}
             review={this.state.review}
           />);
       case 'sample':
@@ -55,9 +52,9 @@ export default class RepoReviewDetails extends Component {
           <RepoSampleDetails
             element={currentElement}
             canComment
+            btnAction={this.state.btnAction}
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
-            onReviewUpdate={this.handleReviewUpdate}
             review={this.state.review}
           />);
       default: return <span />;
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index f69ec9a79..5842db067 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Jumbotron, Panel } from 'react-bootstrap';
+import { AffiliationMap } from 'repo-review-ui';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AffiliationList,
@@ -20,7 +21,6 @@ import {
   ToggleIndicator,
   ElStateLabel
 } from './RepoCommon';
-import { AffiliationMap } from './RepoReviewCommon';
 import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoUserComment from '../components/common/RepoUserComment';
 import RepoPublicComment from '../components/common/RepoPublicComment';
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 9befa9f92..8d7e64bdb 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
 import { Panel } from 'react-bootstrap';
 import PropTypes from 'prop-types';
+import { RepoCommentModal } from 'repo-review-ui';
 import {
   ClosePanel,
   MoleculeInfo,
 } from './RepoCommon';
 import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
+import ReviewActions from '../components/actions/ReviewActions';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
 import RepoSample from './RepoSample';
 
 export default class RepoSampleDetails extends Component {
@@ -17,30 +16,24 @@ export default class RepoSampleDetails extends Component {
     super(props);
     this.state = {
       showReviewModal: false,
-      btnAction: '',
       showCommentModal: false,
       commentField: '',
       originInfo: '',
     };
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
     this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
     this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
 
   handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
+    ReviewActions.handleReviewModal(showReviewModal, btnAction);
   }
 
   handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleReviewUpdate(review) {
-    this.props.onReviewUpdate(review);
+    ReviewActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
+    // this.setState({ showReviewModal: false });
   }
 
   handleCommentBtn(show, field, orgInfo) {
@@ -59,7 +52,7 @@ export default class RepoSampleDetails extends Component {
     }
     cinfo[field].comment = comment;
     cinfo[field].origInfo = origInfo;
-    PublicActions.updateComment(elementId, elementType, cinfo);
+    ReviewActions.updateComment(elementId, elementType, cinfo);
     this.setState({ showCommentModal: false });
   }
 
@@ -185,17 +178,6 @@ export default class RepoSampleDetails extends Component {
                   onUpdate={this.handleSubmitComment}
                   onHide={() => this.setState({ showCommentModal: false })}
                 />
-                <RepoReviewModal
-                  show={this.state.showReviewModal}
-                  elementId={sample.id}
-                  action={this.state.btnAction}
-                  isSubmitter={isSubmitter}
-                  reviewLevel={reviewLevel}
-                  review={review || {}}
-                  onSubmit={this.handleSubmitReview}
-                  onUpdate={this.handleReviewUpdate}
-                  onHide={() => this.setState({ showReviewModal: false })}
-                />
               </div> : ''
           }
 
@@ -210,6 +192,7 @@ RepoSampleDetails.propTypes = {
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
+  btnAction: PropTypes.string,
   isSubmitter: PropTypes.bool,
   review: PropTypes.object,
   canClose: PropTypes.bool,
@@ -220,6 +203,7 @@ RepoSampleDetails.propTypes = {
 RepoSampleDetails.defaultProps = {
   isPublished: false,
   canComment: false,
+  btnAction: '',
   reviewLevel: 0,
   isSubmitter: false,
   review: {},
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 40e1092ee..6d4bf6942 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -1,6 +1,9 @@
 import PublicActions from '../components/actions/PublicActions';
 import PublicFetcher from '../components/fetchers/PublicFetcher';
 import RepoNavListTypes from './RepoNavListTypes';
+import ReviewActions from '../components/actions/ReviewActions';
+import EmbargoActions from '../components/actions/EmbargoActions';
+
 
 const routes = {
   '/': 'root',
@@ -185,7 +188,7 @@ const routes = {
   '/review_reaction': {
     target: {
       show: function(e) {
-        PublicActions.displayReviewReaction(e.params.reactionId)
+        ReviewActions.displayReviewReaction(e.params.reactionId)
       },
     },
     '/:reactionId': 'show'
@@ -194,7 +197,7 @@ const routes = {
   '/review_sample': {
     target: {
       show: function(e) {
-        PublicActions.displayReviewSample(e.params.sampleId)
+        ReviewActions.displayReviewSample(e.params.sampleId)
       },
     },
     '/:sampleId': 'show'
@@ -206,7 +209,7 @@ const routes = {
         PublicActions.openRepositoryPage("embargo");
       },
       show: function (e) {
-        PublicActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
+        EmbargoActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
       },
     },
     '/': 'list',
diff --git a/app/packs/src/stores/alt/stores/LoadingStore.js b/app/packs/src/stores/alt/stores/LoadingStore.js
index 9daf8d6a0..1a26a6718 100644
--- a/app/packs/src/stores/alt/stores/LoadingStore.js
+++ b/app/packs/src/stores/alt/stores/LoadingStore.js
@@ -6,6 +6,7 @@ import InboxActions from 'src/stores/alt/actions/InboxActions';
 import PredictionActions from 'src/stores/alt/actions/PredictionActions';
 import RepositoryActions from '../actions/RepositoryActions';
 import PublicActions from '../actions/PublicActions';
+import ReviewActions from '../actions/ReviewActions';
 
 class LoadingStore {
   constructor() {
@@ -43,8 +44,10 @@ class LoadingStore {
           InboxActions.fetchInboxUnsorted,
           PredictionActions.infer,
           RepositoryActions.reviewPublish,
-          PublicActions.updateComment,
-          PublicActions.reviewPublish,
+          ReviewActions.updateComment,
+          ReviewActions.reviewPublish,
+          ReviewActions.fetchSample,
+          ReviewActions.displayReviewReaction,
           PublicActions.getSearchReactions,
           PublicActions.getSearchMolecules,
           PublicActions.getReactions,
diff --git a/package.json b/package.json
index cd41be9fc..41b3657b1 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "react-dnd-html5-backend": "^14.0.3",
     "react-dom": "^17.0.2",
     "react-dom-factories": "^1.0.0",
+    "react-drag-resize": "^0.1.4",
     "react-draggable": "^4.4.3",
     "react-dropzone": "^3.6.0",
     "react-flow-renderer": "^10.3.17",
@@ -86,6 +87,7 @@
     "react-input-autosize": "1.1.0",
     "react-json-editor-ajrm": "^2.5.10",
     "react-markdown": "^6.0.2",
+    "react-modal-resizable-draggable": "^0.1.6",
     "react-notification-system": "^0.2.7",
     "react-papaparse": "^3.17.2",
     "react-pdf": "^5.3.0-beta",
@@ -105,6 +107,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
+    "repo-review-ui": "^0.0.5",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",
diff --git a/yarn.lock b/yarn.lock
index aed686383..53e783e90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -968,6 +968,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
+"@babel/plugin-syntax-jsx@^7.17.12":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -2378,6 +2385,42 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
+"@emotion/babel-plugin@^11.10.0":
+  version "11.10.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
+  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/babel-plugin@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
+  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -2586,6 +2629,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
   integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
 
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
@@ -4508,6 +4561,13 @@ ag-grid-react@^29.0.0:
   dependencies:
     prop-types "^15.8.1"
 
+ag-grid-react@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
+  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
+  dependencies:
+    prop-types "^15.8.1"
+
 agent-base@5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
@@ -9349,6 +9409,13 @@ is-core-module@^2.9.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz"
@@ -13032,7 +13099,7 @@ react-dom-factories@^1.0.0:
   resolved "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz"
   integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA=
 
-react-dom@^17.0.2:
+react-dom@^17.0.1, react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -13041,6 +13108,22 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-drag-resize@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/react-drag-resize/-/react-drag-resize-0.1.4.tgz#e760d8b860f358e8c85fde970831af00d4fcaf7e"
+  integrity sha512-YNX9LCQIM7BVYghyhmWZ80GOizKHW1mHQCtnks61fHmXg/nNi4i7w37oKI4eLP9BkRS+CfJv68lkCEtK5KJPyw==
+  dependencies:
+    lodash.isequal "^4.5.0"
+    react-draggable "^2.2.6"
+    react-resizable-box "^2.0.4"
+
+react-draggable@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-2.2.6.tgz#3a806e10f2da6babfea4136be6510e89b0d76901"
+  integrity sha512-QWsjxOlKUB+81+f2AKfoleKT6jBm4xloQbA149JDUECCUoDEdTo6ha9C0y84MTiq7m5TmhJ3G2PK2gPTCDxXeQ==
+  dependencies:
+    classnames "^2.2.5"
+
 react-draggable@^4.4.3:
   version "4.4.4"
   resolved "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz"
@@ -13110,6 +13193,11 @@ react-html-id@^0.1.5:
   resolved "https://registry.npmjs.org/react-html-id/-/react-html-id-0.1.5.tgz"
   integrity sha512-8MvS/oeD7EE9jlIM/iNc2HtyN5mzFLK9DHGThuucxJYnGVYfOR1ZVRkE5znJmKbj8PMDXnrnozjDdHcSQJO3LA==
 
+react-icons@^4.2.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397"
+  integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==
+
 react-inlinesvg@0.8.4:
   version "0.8.4"
   resolved "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-0.8.4.tgz"
@@ -13193,6 +13281,17 @@ react-markdown@^6.0.2:
     unist-util-visit "^2.0.0"
     vfile "^4.0.0"
 
+react-modal-resizable-draggable@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/react-modal-resizable-draggable/-/react-modal-resizable-draggable-0.1.6.tgz#59bb687b6d63344c52cf10a8a3b2c1155ed04e3f"
+  integrity sha512-xNpmEE47WtlCQpFOiqcyZ/3e/PzPO7iIMoKHugNLWm53U1y4OCRwlOqSX7IzdjceE8bEnLmf5vJDt/pNJf/+HA==
+  dependencies:
+    react "^17.0.0"
+    react-dom "^17.0.1"
+    react-icons "^4.2.0"
+    react-motion "^0.5.2"
+    react-transition-group "^4.4.1"
+
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz"
@@ -13393,6 +13492,32 @@ react-select@5.4.0:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
+react-select@5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.2.tgz#3d5edf0a60f1276fd5f29f9f90a305f0a25a5189"
+  integrity sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+
+react-select@5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.4.0.tgz#81f6ac73906126706f104751ee14437bd16798f4"
+  integrity sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+
 react-select@^1.0.0-rc.2:
   version "1.3.0"
   resolved "https://registry.npmjs.org/react-select/-/react-select-1.3.0.tgz"
@@ -13524,6 +13649,16 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-transition-group@^4.4.1:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-treeview@0.4.7:
   version "0.4.7"
   resolved "https://registry.npmjs.org/react-treeview/-/react-treeview-0.4.7.tgz"
@@ -13584,7 +13719,7 @@ react-vis@1.9.3:
     prop-types "^15.5.8"
     react-motion "^0.5.2"
 
-react@^17.0.2:
+react@^17.0.0, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -14030,6 +14165,15 @@ resolve@^1.19.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.19.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"

From 1ca83cc2cb498718982f1b673a088808dac822c2 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 19 Oct 2022 10:05:39 +0200
Subject: [PATCH 079/258] added molecule archive

---
 app/assets/stylesheets/repo_home.scss         | 184 ++++++++++++++++--
 app/packs/src/libHome/Home.js                 |   2 +
 app/packs/src/libHome/Navigation.js           |   5 +-
 app/packs/src/libHome/RepoCardIntro.js        |  44 +++++
 app/packs/src/libHome/RepoCardIntro1.js       |  44 +++++
 .../src/libHome/RepoCardLatestPublish.js      |  79 ++++++++
 .../src/libHome/RepoCardMoleculeArchive.js    |  64 ++++++
 .../src/libHome/RepoCardMoleculeArchive1.js   |  53 +++++
 app/packs/src/libHome/RepoCardStaticsBoard.js | 114 +++++++++++
 .../src/libHome/RepoCardStaticsBoard1.js      | 111 +++++++++++
 app/packs/src/libHome/RepoHome.js             | 113 ++++++++---
 app/packs/src/libHome/RepoMoleculeArchive.js  | 103 ++++++++++
 app/packs/src/libHome/RepoPubl.js             |  32 +++
 app/packs/src/libHome/homeRoutes.js           |   9 +
 package.json                                  |   1 +
 15 files changed, 921 insertions(+), 37 deletions(-)
 create mode 100644 app/packs/src/libHome/RepoCardIntro.js
 create mode 100644 app/packs/src/libHome/RepoCardIntro1.js
 create mode 100644 app/packs/src/libHome/RepoCardLatestPublish.js
 create mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive.js
 create mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive1.js
 create mode 100644 app/packs/src/libHome/RepoCardStaticsBoard.js
 create mode 100644 app/packs/src/libHome/RepoCardStaticsBoard1.js
 create mode 100644 app/packs/src/libHome/RepoMoleculeArchive.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 602130e2e..69786f389 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -123,18 +123,23 @@ $bs-successcolor: #5cb85c;
   background-color: #f5f5f5;
   // border: 1px solid #e3e3e3;
   border-radius: 6px;
-   height: 50vh;//auto; //calc(80vh - 190px);
+  height: 40vh;//auto; //calc(80vh - 190px);
   // overflow-x: auto;
-  padding: 20px;
+  padding: 10px 0px;
 
 }
 
 .card-well-competition {
   @extend .card-well;
-  padding: 20px 15px;
+  // padding: 20px 15px;
   display: flex;
+  margin: 70px 10px 10px 0px;
+  // border: thin solid $statisticcolor;
+  border: 1px solid #e7e7e7;
+  border-radius: 0px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
   .carl-spt{
-    background-color: white;
+    // background-color: white;
     flex: 1;
     display: flex;
     .carousel-inner .active.left { top: 0%; }
@@ -203,6 +208,7 @@ $bs-successcolor: #5cb85c;
 
   .carousel-control.left, .carousel-control.right {
     background-image: none !important;
+    color: #e7e7e7;
   }
 
   .italic-desc {
@@ -216,8 +222,8 @@ $bs-successcolor: #5cb85c;
 }
 
 .icon-chemotion {
-  margin: 30px;
-  width: 90%;
+  // margin: 30px;
+  width: 100%;
 }
 
 .visibility-impact {
@@ -225,6 +231,28 @@ $bs-successcolor: #5cb85c;
   width: 300px !important;
 }
 
+.icon-molecule-archive {
+  margin: 10px;
+  // width: 40%;
+  background-color: rgb(12, 61, 118);
+}
+
+.icon-molecule-archive2 {
+  // margin: 10px;
+  width: 3vw;
+  height: auto;
+  //
+  // fill in div
+  // min-width: 100%;
+  // min-height: 100%;
+  // width: auto;
+  // height: auto;
+  // fix size
+  // width: 90px;
+  // height: 90px;
+  background-color: rgb(12, 61, 118);
+}
+
 .chem-finder {
   left: 10%;
   top: 10px;
@@ -427,8 +455,71 @@ $bs-successcolor: #5cb85c;
   border-radius: 6px;
 }
 
+.repo-welcome {
+  max-width: 2000px;
+  margin: auto !important;
+  > div:not(:last-child) {
+    background-color: $topbgcolor;
+    > h2 { text-align: center; }
+  }
+}
+
+.repo-molecule-archive {
+  @extend .card-well;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
+  border-radius: 0px;
+  > div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  > div:nth-child(2) {
+    background-color: white;
+    padding: 10px;
+    border: 1px solid $statisticcolor;
+    border-bottom-width: 6px;
+  }
+  > div:not(:last-child) {
+    // flex-wrap: wrap;
+    flex: 1;
+    justify-content: center;
+    div {
+      width: 100%;
+      .rl {
+        text-align: center;
+        font-size: 2rem;
+        font-weight: bold;
+      }
+      .rr {
+        button {
+          padding: unset;
+        }
+        .cnt {
+          font-size: 2.5rem;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  > div:last-child {
+    flex: 2;
+    div:first-child {
+      display: flex;
+      justify-content: center;
+    }
+    div:last-child {
+      font-size: 1.5rem;
+      display: block;
+    }
+  }
+}
+
 .repo-intro {
   display: flex;
+  align-items: center;
+  justify-content: center;
   .container {
     display: flex;
     flex-direction: column;
@@ -447,14 +538,39 @@ $bs-successcolor: #5cb85c;
     .row .even {
       flex: 1;
     }
+    .row .even .row {
+      // border: 1px solid lightgrey;
+      border: 1px solid #e7e7e7;
+      // box-shadow: 10px 5px 5px grey;
+      background-color: #e7e7e7;
+      h2 {
+        font-weight: bolder;
+        text-align: center;
+      }
+      .info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        .cnt {
+          font-size: 180%;
+        }
+      }
+    }
   }
 }
 
 .repo-statistic {
   @extend .card-well;
-  display: flex;
-  flex-direction: column;
+  // display: flex;
+  // flex-direction: column;
   padding-bottom: 10px;
+  > div {
+    flex: 1;
+    h3 {
+      text-align: center;
+    }
+  }
   .elem-info {
     border-bottom-width: 6px;
     padding: unset;
@@ -463,13 +579,15 @@ $bs-successcolor: #5cb85c;
     display: flex;
     align-items: center;
     flex: 1;
+    border-radius: 0px;
     .dtl {
       background-color: unset;
       color: unset;
       border: none;
       text-align: center;
-      padding-left: unset;
-      padding-right: unset;
+      // padding-left: unset;
+      // padding-right: unset;
+      padding: 0px;
     }
     .dtl .rl {
       line-height: normal;
@@ -503,6 +621,7 @@ $bs-successcolor: #5cb85c;
       }
       .italic-desc {
         font-style: italic;
+        font-size: 90%;
       }
     }
   }
@@ -664,15 +783,48 @@ $bs-successcolor: #5cb85c;
   }
 }
 
-.home_reaction {
+@mixin home-list-layout {
   background-color: white;
-  border-radius: 8px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin-top: 15px;
   padding: 5px;
 }
 
+.home_reaction {
+  @include home-list-layout;
+  border-radius: 8px;
+}
+
+.home_archive {
+  @include home-list-layout;
+  display: inline-flex;
+  width: 100%;
+  .svg_border {
+    border-right: 1px lightgrey solid;
+  }
+  .content {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    .info {
+      max-height: 100%;
+      height: 100%;
+      .border {
+        display: flex;
+        padding: 0px 15px 5px 15px;
+        .dl {
+          font-weight: bold;
+          width: 20%;
+          padding-right: 4px;
+        }
+        .dr {
+          width: 80%;
+        }
+      }
+    }
+  }
+}
+
 .home_wrapper {
   display: flex;
   div:last-child {
@@ -725,6 +877,12 @@ $bs-successcolor: #5cb85c;
   height: 90px;
   width: 90px;
 }
+
+.archive_svg_molecule > svg {
+  height: 140px;
+  width: 140px;
+}
+
 .panel-cite {
   border-color: white !important;
   .panel-heading {
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 1461cdf79..3c69c43f0 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -62,6 +62,8 @@ class Home extends Component {
 
   renderGuestPage() {
     switch (this.state.guestPage) {
+      case 'moleculeArchive':
+        return <RepoPubl listType="moleculeArchive" />;
       case 'newseditor':
         return <RepoNewsEditor />;
       case 'newsreader':
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 6b3b3c753..075d6d232 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -98,7 +98,10 @@ export default class Navigation extends React.Component {
               </NavItem>
               : null }
             <NavItem eventKey={2} onClick={() => Aviator.navigate('/home/publications')} className="white-nav-item" >
-              Publications
+              Data publications
+            </NavItem>
+            <NavItem eventKey={7} onClick={() => Aviator.navigate('/home/moleculeArchive')} className="white-nav-item" >
+              Molecule Archive
             </NavItem>
             { currentUser ?
               <NavItem eventKey={3} onClick={() => Aviator.navigate('/home/review')} className="white-nav-item" >
diff --git a/app/packs/src/libHome/RepoCardIntro.js b/app/packs/src/libHome/RepoCardIntro.js
new file mode 100644
index 000000000..b41eeef04
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardIntro.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoCardLatestPublish from './RepoCardLatestPublish';
+
+const RepoCardIntro = ({ lastPublished }) => (
+  <div className="container">
+    <Row>
+      <Col md={6} sm={12} className="even">
+        <img
+          className="icon-chemotion"
+          src="/images/repo/Chemotion-V1.png"
+          key="chemotion_full"
+          alt="Chemotion Repository"
+        />
+      </Col>
+      <Col md={6} sm={12} className="even">
+        <RepoCardLatestPublish lastPublished={lastPublished} />
+      </Col>
+    </Row>
+    <Row>
+      <Col lg={12} md={12} sm={12}>
+        <ul className="list">
+          <li>
+            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
+          </li>
+          <li>
+            Automated registration at various scientific data providers
+          </li>
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
+          </li>
+        </ul>
+      </Col>
+    </Row>
+  </div>
+);
+
+export default RepoCardIntro;
diff --git a/app/packs/src/libHome/RepoCardIntro1.js b/app/packs/src/libHome/RepoCardIntro1.js
new file mode 100644
index 000000000..489b1f186
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardIntro1.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoCardLatestPublish from './RepoCardLatestPublish';
+
+const RepoCardIntro1 = ({ lastPublished }) => (
+  <div className="repo-intro" style={{ flexDirection: 'column' }}>
+    <Row style={{ display: 'flex', alignItems: 'center' }}>
+      <Col lg={6} md={6} sm={12}>
+        <img
+          className="icon-chemotion"
+          src="/images/repo/Chemotion-V1.png"
+          key="chemotion_full"
+          alt="Chemotion Repository"
+        />
+      </Col>
+      <Col lg={6} md={6} sm={12}>
+        <RepoCardLatestPublish lastPublished={lastPublished} />
+      </Col>
+    </Row>
+    <Row style={{ fontSize: '120%' }}>
+      <Col lg={12} md={12} sm={12}>
+        <ul className="list">
+          <li>
+            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
+          </li>
+          <li>
+            Automated registration at various scientific data providers
+          </li>
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
+          </li>
+        </ul>
+      </Col>
+    </Row>
+  </div>
+);
+
+export default RepoCardIntro1;
diff --git a/app/packs/src/libHome/RepoCardLatestPublish.js b/app/packs/src/libHome/RepoCardLatestPublish.js
new file mode 100644
index 000000000..21d7aa14c
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardLatestPublish.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import PublicActions from '../components/actions/PublicActions';
+
+const timeInterval = (date) => {
+  if (!date) { return null; }
+  switch (typeof date) {
+    case 'number':
+      break;
+    case 'string':
+      date = +new Date(date);
+      break;
+    case 'object':
+      if (date.constructor === Date) date = date.getTime();
+      break;
+    default:
+      date = +new Date();
+  }
+  let seconds = Math.floor((new Date() - date) / 1000);
+  let intrvlTypes = [
+    [31536000, 'year', 'a'],
+    [2592000, 'month', 'a'],
+    [604800, 'week', 'a'],
+    [86400, 'day', 'a'],
+    [3600, 'hour', 'an'],
+    [60, 'minute', 'a'],
+    [1, 'second', 'a'],
+  ]
+  let intrvlCount = 0
+  let intrvlType = intrvlTypes.find((e) => {
+    intrvlCount = Math.floor(seconds / e[0])
+    return intrvlCount >= 1
+  })
+  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
+};
+
+const RepoCardLatestPublish = ({ lastPublished }) => {
+  if (lastPublished) {
+    const { sample, reaction } = lastPublished;
+    const svgPathSample = sample.sample_svg_file
+      ? `/images/samples/${sample.sample_svg_file}`
+      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
+    const pubTagSample = sample.tag || {};
+    const svgPathReaction = reaction
+      ? `/images/reactions/${reaction.reaction_svg_file}`
+      : '/images/no_image_180.svg';
+    const pubTagReaction = reaction.tag || {};
+    return (
+      <div className="card-well-competition">
+        <Carousel className="carl-spt" indicators={false} interval={6000}>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
+                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
+                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardLatestPublish;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
new file mode 100644
index 000000000..e4e62539a
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+
+const RepoCardMoleculeArchive = () => {
+  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
+  return (
+    <div>
+    <Row className="repo-statistic" style={{ justifyContent: 'center' }}>
+      <Col lg={12} md={12} sm={12}>
+        <Col lg={12} md={12} sm={12} style={{ textAlign: 'center', fontSize: '24px', margin: '20px' }}>
+          archive for materials
+        </Col>
+      </Col>
+      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info" style={{ flex: 'unset' }}>
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <Row className="rl">
+            <OverlayTrigger placement="top" overlay={tooltipView}>
+              <Button className="animation-ring" bsStyle="link">
+                <i className="icon-sample" />
+              </Button>
+            </OverlayTrigger>
+            <div className="tit">Samples</div>
+          </Row>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <Row className="rr">
+            <div className="tit">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button bsStyle="link">
+                  published
+                </Button>
+              </OverlayTrigger>
+            </div>
+            <div className="cnt">
+              <CountUp end={1680} />
+            </div>
+            <div className="italic-desc">Compounds</div>
+          </Row>
+        </Col>
+      </Col>
+      <Col lg={12} md={12} sm={12}>
+        <Col lg={4} md={4} sm={4} style={{ display: 'flex', justifyContent: 'center' }}>
+          <img
+            className="icon-molecule-archive2"
+            src="/images/repo/molecule-archive-logo-weiss.svg"
+            key="chemotion_full"
+            alt="Molecule Archive"
+          />
+        </Col>
+        <Col lg={8} md={8} sm={8} style={{ fontSize: '1.5rem' }}>
+          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
+        </Col>
+      </Col>
+    </Row>
+    </div>
+  );
+};
+
+export default RepoCardMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive1.js b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
new file mode 100644
index 000000000..db37aea03
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+// import Aviator from 'aviator';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+
+const RepoCardMoleculeArchive1 = () => {
+  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
+  return (
+    <Row className="repo-statistic">
+      <Col lg={12} md={12} sm={12}>
+        <h3>archive for materials</h3>
+      </Col>
+      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <Row className="rl">
+            <OverlayTrigger placement="top" overlay={tooltipView}>
+              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
+                <i className="icon-sample" />
+              </Button>
+            </OverlayTrigger>
+            <div className="tit">Samples</div>
+          </Row>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <div className="rr">
+            <div className="cnt">
+              <CountUp end={1680} />
+            </div>
+            <div className="italic-desc">Compounds</div>
+          </div>
+        </Col>
+      </Col>
+      <Col lg={12} md={12} sm={12}>
+        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
+          <img
+            className="icon-molecule-archive2"
+            src="/images/repo/molecule-archive-logo-weiss.svg"
+            key="chemotion_full"
+            alt="Molecule Archive"
+          />
+        </Col>
+        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
+          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
+        </Col>
+      </Col>
+    </Row>
+  );
+};
+
+export default RepoCardMoleculeArchive1;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/libHome/RepoCardStaticsBoard.js
new file mode 100644
index 000000000..2681e921a
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardStaticsBoard.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+
+const RepoCardStaticsBoard = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
+    const pubPage = { sample: 'publications=sample', reaction: 'publications=reaction' };
+    return (
+      <Row className="repo-statistic">
+        <Col lg={12} md={12} sm={12}>
+          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                  <i className="icon-sample" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Samples</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="tit">
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />
+              </div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                  <i className="icon-reaction" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="tit">
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />
+              </div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="fa fa-area-chart i-ext" aria-hidden />
+              <div className="tit">Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
+              <div style={{ display: 'flex' }}>
+                <div>Top 3:&nbsp;&nbsp;</div>
+                <div className="italic-desc">
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
+                  <br />
+                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
+                  <br />
+                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardStaticsBoard;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard1.js b/app/packs/src/libHome/RepoCardStaticsBoard1.js
new file mode 100644
index 000000000..75dabf684
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardStaticsBoard1.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const RepoCardStaticsBoard1 = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
+    const pubPage = { sample: `publications=${RepoNavListTypes.SAMPLE}`, reaction: `publications=${RepoNavListTypes.REACTION}` };
+    return (
+      <Row className="repo-statistic">
+        <Col lg={12} md={12} sm={12}>
+          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                  <i className="icon-sample" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Samples</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                  <i className="icon-reaction" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="fa fa-area-chart i-ext" aria-hidden />
+              <div className="tit">Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
+              <div style={{ display: 'flex' }}>
+                <div>Top 3:&nbsp;&nbsp;</div>
+                <div className="italic-desc">
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
+                  <br />
+                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
+                  <br />
+                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardStaticsBoard1;
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index 6d4da3d21..9d2d717a6 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -1,9 +1,16 @@
 import React, { Component } from 'react';
 import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
 import { HomeFeature } from './RepoCommon';
+import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
+import RepoCardIntro from './RepoCardIntro';
+import RepoCardStaticsBoard from './RepoCardStaticsBoard';
+import RepoCardIntro1 from './RepoCardIntro1';
+import RepoCardStaticsBoard1 from './RepoCardStaticsBoard1';
+import RepoCardMoleculeArchive1 from './RepoCardMoleculeArchive1';
 import RepoNavListTypes from './RepoNavListTypes';
 
 const PartnersInfo = (info) => {
@@ -133,25 +140,40 @@ const CardIntro = () => (
   <div className="container">
     <Row>
       <Col md={6} sm={12} className="even">
-        <img
-          className="icon-chemotion"
-          src="/images/repo/chemotion_full.svg"
-          key="chemotion_full"
-          alt="icon"
-        />
+        {/* <Row> */}
+          {/* <Col md={12} sm={12}> */}
+            <img
+              className="icon-chemotion"
+              src="/images/repo/Chemotion-V1.png"
+              key="chemotion_full"
+              alt="Chemotion Repository"
+            />
+          {/* </Col> */}
+        {/* <Row>
+          <Col md={8} sm={12}>
+            <div className="info">
+              <div className="cnt"><CountUp end={1680} /></div>
+              <div>Published compounds</div>
+            </div>
+          </Col>
+          <Col md={4} sm={12}>
+            <img
+              className="icon-molecule-archive"
+              src="/images/molecule-archive-logo-weiss.svg"
+              key="chemotion_full"
+              alt="Molecule Archive"
+            />
+          </Col>
+        </Row> */}
       </Col>
       <Col md={6} sm={12} className="even">
         <div className="heading">
           Repository for molecules, reactions and research data
         </div>
-      </Col>
-    </Row>
-    <Row>
-      <Col md={12} sm={12}>
-        <div className="heading">Visibility and Impact</div>
+        {/* <div className="heading">Visibility and Impact</div> */}
         <ul className="list">
           <li>
-            Publish your structures, attach your characterization data, and make them citable via DOI
+            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
           </li>
           <li>
             Automated registration at various scientific data providers
@@ -159,9 +181,13 @@ const CardIntro = () => (
           <li>
             Long-term archival - from scientists for scientists
           </li>
-          <li>
+          {/* <li>
             <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
             <i>&nbsp;Now, publish your Reactions</i>
+          </li> */}
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
           </li>
         </ul>
       </Col>
@@ -209,7 +235,9 @@ const StaticsBoard = (params) => {
                   </Button>
                 </OverlayTrigger>
               </div>
-              <div className="cnt">{stsSample.e_cnt}</div>
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />
+              </div>
               <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
               <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
             </Row>
@@ -235,7 +263,9 @@ const StaticsBoard = (params) => {
                   </Button>
                 </OverlayTrigger>
               </div>
-              <div className="cnt">{stsReaction.e_cnt}</div>
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />
+              </div>
               <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
               <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
             </Row>
@@ -250,7 +280,7 @@ const StaticsBoard = (params) => {
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="cnt">{stsAnalysisCnt}&nbsp;<span className="tit">published</span></div>
+              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
               <div style={{ display: 'flex' }}>
                 <div>Top 3:&nbsp;&nbsp;</div>
                 <div className="italic-desc">
@@ -264,6 +294,26 @@ const StaticsBoard = (params) => {
             </Row>
           </Col>
         </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <img
+                className="icon-molecule-archive2"
+                src="/images/molecule-archive-logo-weiss.svg"
+                key="chemotion_full"
+                alt="Molecule Archive"
+              />
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={1680} />
+              </div>
+              <div className="italic-desc">Published compounds</div>
+            </Row>
+          </Col>
+        </Col>
       </Row>
     );
   }
@@ -353,19 +403,36 @@ class RepoHome extends Component {
     };
 
     return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={12}>
-          <Row className="repo-top-row">
+      <Row className="repo-welcome">
+        <Col md={12} sm={12}>
+          <h2>Repository for samples, reactions and related research data</h2>
+        </Col>
+        <Col md={12} sm={12}>
+          {/* <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}> */}
+          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <Col md={3} sm={12}>
-              <CardLatestPublish lastPublished={this.state.lastPublished} />
+              <RepoCardMoleculeArchive1 />
+            </Col>
+            <Col md={6} sm={12}>
+              <RepoCardIntro1 lastPublished={this.state.lastPublished} />
+            </Col>
+            <Col md={3} sm={12}>
+              <RepoCardStaticsBoard1 publishedStatics={this.state.publishedStatics} />
+            </Col>
+          </div>
+        </Col>
+        <Col md={12} sm={12}>
+          {/* <Row className="repo-top">
+            <Col md={3} sm={12}>
+              <RepoCardMoleculeArchive />
             </Col>
             <Col md={6} sm={12} className="repo-intro">
-              <CardIntro />
+              <RepoCardIntro lastPublished={this.state.lastPublished} />
             </Col>
             <Col md={3} sm={12}>
-              <StaticsBoard publishedStatics={this.state.publishedStatics} />
+              <RepoCardStaticsBoard publishedStatics={this.state.publishedStatics} />
             </Col>
-          </Row>
+          </Row> */}
           <Row>
             <Col md={2} sm={12}>&nbsp;</Col>
             <Col md={8} sm={12}>
diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/libHome/RepoMoleculeArchive.js
new file mode 100644
index 000000000..c98b892ad
--- /dev/null
+++ b/app/packs/src/libHome/RepoMoleculeArchive.js
@@ -0,0 +1,103 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import uuid from 'uuid';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import PublicActions from '../components/actions/PublicActions';
+import Formula from '../components/common/Formula';
+import PubchemLabels from '../components/PubchemLabels';
+import { xvialTag, svgTag } from './RepoPubCommon';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const infoTag = (molecule) => {
+  const pubData = (molecule && molecule.pub_id) || '';
+  return (
+    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <div className="home_wrapper_item">
+        <div>Provided by</div><div className="item_xvial">{molecule.author_name}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
+      </div>
+    </Row>
+  );
+};
+
+const RepoMoleculeArchive = (props) => {
+  const {
+    molecule, currentElement, isPubElement, advFlag, advType, advValue
+  } = props;
+  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+  const svgPathSample = molecule.sample_svg_file
+    ? `/images/samples/${molecule.sample_svg_file}`
+    : `/images/molecules/${molecule.molecule_svg_file}`;
+  const pubchemInfo = pubchemTag(molecule);
+
+  return (
+    <Col xs={12} sm={12} md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue, RepoNavListTypes.MOLECULE_ARCHIVE)}>
+      <div className={`home_archive ${listClass}`}>
+        <div className="svg_border">
+          <SVG src={svgPathSample} className="archive_svg_molecule" key={svgPathSample} />
+        </div>
+        <div className="content">
+          <div className="info">
+            <div className="border">
+              <div className="dl">
+                Formula
+              </div>
+              <div className="dr"><Formula formula={molecule.sum_formular} />
+                {' '}
+                <span className="repo-pub-list-icons">
+                  {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
+                </span>
+              </div>
+            </div>
+            <div className="border">
+              <div className="dl">Affiliation</div>
+              <div className="dr">Institute of Nanotechnology (INT), Karlsruhe Institute of Technology, Germany </div>
+            </div>
+            <div className="border">
+              <div className="dl">Group</div>
+              <div className="dr"> </div>
+            </div>
+          </div>
+          <div>
+            {infoTag(molecule)}
+          </div>
+        </div>
+      </div>
+    </Col>
+  );
+};
+
+RepoMoleculeArchive.propTypes = {
+  molecule: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+};
+
+RepoMoleculeArchive.defaultProps = {
+  isPubElement: false,
+  currentElement: null
+};
+
+export default RepoMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 691bc1784..dbf2e2e3c 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -18,8 +18,21 @@ import StructureEditorModal from '../components/structure_editor/StructureEditor
 import LoadingActions from '../components/actions/LoadingActions';
 import RepoReactionList from './RepoReactionList';
 import RepoMoleculeList from './RepoMoleculeList';
+import RepoMoleculeArchive from './RepoMoleculeArchive';
 import RepoNavListTypes from './RepoNavListTypes';
 
+const renderMoleculeArchive =
+  (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
+    <RepoMoleculeArchive
+      molecule={molecule}
+      currentElement={currentElement}
+      isPubElement={isPubElement}
+      advFlag={advFlag}
+      advValue={advValue}
+      advType={advType}
+    />
+  );
+
 const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
   <RepoMoleculeList
     molecule={molecule}
@@ -52,6 +65,10 @@ const hints = {
   scheme: {
     title: 'Scheme-only reactions',
     content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
+  },
+  moleculeArchive: {
+    title: 'Physcial samples',
+    content: 'A physical sample was registered to the Molecule Archive of the Compound Platform and can be requested from there.'
   }
 };
 
@@ -177,6 +194,7 @@ export default class RepoPubl extends Component {
         case RepoNavListTypes.REACTION:
           PublicActions.getSearchReactions(params);
           break;
+        case RepoNavListTypes.MOLECULE_ARCHIVE:
         case RepoNavListTypes.SAMPLE:
           PublicActions.getSearchMolecules(params);
           break;
@@ -193,6 +211,7 @@ export default class RepoPubl extends Component {
         params = { ...params, schemeOnly: false };
         PublicActions.getReactions(params);
         break;
+      case RepoNavListTypes.MOLECULE_ARCHIVE:
       case RepoNavListTypes.SAMPLE:
         PublicActions.getMolecules(params);
         break;
@@ -382,6 +401,17 @@ export default class RepoPubl extends Component {
 
   renderSwitch() {
     const { listType } = this.state;
+    if (listType === RepoNavListTypes.MOLECULE_ARCHIVE) {
+      return (
+        <Tabs
+          activeKey={listType}
+          onSelect={this.changeSort}
+          id="element-list-type"
+        >
+          <Tab eventKey={RepoNavListTypes.MOLECULE_ARCHIVE} title={<TabTip tab="moleculeArchive" />} />
+        </Tabs>
+      );
+    }
     return (
       <Tabs
         activeKey={listType}
@@ -625,6 +655,8 @@ export default class RepoPubl extends Component {
     const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
     const elementList = () => {
       switch (listType) {
+        case RepoNavListTypes.MOLECULE_ARCHIVE:
+          return (molecules || []).map(m => renderMoleculeArchive(m, currentElement, isPubElement, advFlag, advType, advValue));
         case RepoNavListTypes.REACTION:
           return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
         case RepoNavListTypes.SAMPLE:
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 6d4bf6942..6f3580932 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -39,6 +39,15 @@ const routes = {
     },
     '/': 'show'
   },
+  '/moleculeArchive': {
+    target: {
+      show: function(e) {
+        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE });
+        PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)
+      },
+    },
+    '/': 'show'
+  },
   '/review': {
     target: {
       show: function(e) {
diff --git a/package.json b/package.json
index 41b3657b1..63c2771a4 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "react-color": "^2.17.3",
     "react-contextmenu": "^2.14.0",
     "react-cookie": "^0.4.8",
+    "react-countup": "^6.3.2",
     "react-datepicker": "~1.4.1",
     "react-datetime-picker": "^4.1.1",
     "react-dnd": "^14.0.3",

From 3cf66e2dc876040124f56b1e1740bc66d5a691c1 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 28 Oct 2022 14:03:53 +0200
Subject: [PATCH 080/258]  add xvial filter

---
 app/api/chemotion/public_api.rb               | 19 +++++++++++--------
 app/api/helpers/compound_helpers.rb           |  8 ++++++++
 .../src/components/fetchers/PublicFetcher.js  |  6 ++++--
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 92f2b9fe9..ee163cd32 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -394,20 +394,22 @@ def query_embargo(name)
       end
 
       resource :molecules do
-        desc "Return PUBLIC serialized molecules"
+        desc 'Return PUBLIC serialized molecules'
         params do
-          optional :page, type: Integer, desc: "page"
-          optional :pages, type: Integer, desc: "pages"
-          optional :per_page, type: Integer, desc: "per page"
+          optional :page, type: Integer, desc: 'page'
+          optional :pages, type: Integer, desc: 'pages'
+          optional :per_page, type: Integer, desc: 'per page'
           optional :adv_flag, type: Boolean, desc: 'advanced search?'
           optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+          optional :req_xvial, type: Boolean, default: false, desc: 'xvial is required or not'
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
         get '/' do
           public_collection_id = Collection.public_collection_id
           params[:adv_val]
           adv_search = ' '
+          req_xvial = params[:req_xvial]
           if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
             case params[:adv_type]
             when 'Authors'
@@ -439,10 +441,11 @@ def query_embargo(name)
                 SELECT samples.id FROM samples
                 INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
                 #{adv_search}
+                #{add_xvial_sql(req_xvial)}
               )) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
-
+# byebug
           embargo_sql = <<~SQL
             molecules.*, sample_svg_file, sid,
             (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
@@ -460,11 +463,11 @@ def query_embargo(name)
           sids = entities.map { |e| e[:sid] }
 
           com_config = Rails.configuration.compound_opendata
-
+# byebug
           xvial_count_sql = <<~SQL
-            inner join element_tags e on e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+            inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
           SQL
-          x_cnt_ids = Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || []
+          x_cnt_ids = req_xvial ? sids.uniq : (Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || [])
 
           xvial_com_sql = <<~SQL
             inner join molecules m on m.id = samples.molecule_id
diff --git a/app/api/helpers/compound_helpers.rb b/app/api/helpers/compound_helpers.rb
index 4a1d4bd86..0e177b1cc 100644
--- a/app/api/helpers/compound_helpers.rb
+++ b/app/api/helpers/compound_helpers.rb
@@ -17,4 +17,12 @@ def build_xvial_com(inchikey, uid)
       hasSample: false
     }
   end
+
+  def add_xvial_sql(req_xvial = false)
+    xvial_count_sql = <<~SQL
+      inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+    SQL
+    xvial_count_sql = '' unless req_xvial
+    xvial_count_sql
+  end
 end
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 3b9eafc1e..ad20d487c 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -2,6 +2,7 @@ import 'whatwg-fetch';
 import _ from 'lodash';
 import Molecule from '../models/Molecule';
 import Reaction from '../models/Reaction';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 export default class PublicFetcher {
   static fetchPublicMolecules(params = {}) {
@@ -10,7 +11,8 @@ export default class PublicFetcher {
     const advFlag = params.advFlag || false;
     const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
     const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+    const listType = params.listType || RepoNavListTypes.SAMPLE;
+    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&req_xvial=${listType === RepoNavListTypes.MOLECULE_ARCHIVE}`;
 
     return fetch(api, { credentials: 'same-origin' })
       .then(response => response.json().then(json => ({
@@ -18,7 +20,7 @@ export default class PublicFetcher {
         page: parseInt(response.headers.get('X-Page')),
         pages: parseInt(response.headers.get('X-Total-Pages')),
         perPage: parseInt(response.headers.get('X-Per-Page')),
-        listType: params.listType
+        listType
       }))).catch((errorMessage) => { console.log(errorMessage); });
   }
 

From 4f2681ac377f863518f1df19f4f8874d09d23dd7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 4 Nov 2022 14:13:35 +0100
Subject: [PATCH 081/258] add xdata to the list

---
 app/api/chemotion/public_api.rb               |  20 +-
 app/api/helpers/compound_helpers.rb           |  39 ++-
 app/api/helpers/public_helpers.rb             |  11 +-
 app/assets/stylesheets/repo_home.scss         |  59 +++-
 .../src/components/common/RepoXvialButton.js  |   6 +-
 .../src/components/fetchers/PublicFetcher.js  |   1 +
 .../src/components/stores/PublicStore.js      |   3 +-
 app/packs/src/libHome/RepoCardIntro.js        |  53 ++-
 app/packs/src/libHome/RepoCardIntro1.js       |  44 ---
 .../src/libHome/RepoCardLatestPublish.js      |  25 +-
 .../src/libHome/RepoCardMoleculeArchive.js    |  36 +-
 .../src/libHome/RepoCardMoleculeArchive1.js   |  53 ---
 app/packs/src/libHome/RepoCardStaticsBoard.js |  29 +-
 .../src/libHome/RepoCardStaticsBoard1.js      | 111 ------
 app/packs/src/libHome/RepoElementDetails.js   |   4 +-
 app/packs/src/libHome/RepoHome.js             | 317 ++----------------
 app/packs/src/libHome/RepoMoleculeArchive.js  |  13 +-
 app/packs/src/libHome/RepoSample.js           |   5 +-
 app/packs/src/libHome/homeRoutes.js           |   6 +-
 19 files changed, 204 insertions(+), 631 deletions(-)
 delete mode 100644 app/packs/src/libHome/RepoCardIntro1.js
 delete mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive1.js
 delete mode 100644 app/packs/src/libHome/RepoCardStaticsBoard1.js

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index ee163cd32..d06e6e6ad 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -441,11 +441,11 @@ def query_embargo(name)
                 SELECT samples.id FROM samples
                 INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
                 #{adv_search}
-                #{add_xvial_sql(req_xvial)}
+                #{join_xvial_sql(req_xvial)}
               )) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
-# byebug
+
           embargo_sql = <<~SQL
             molecules.*, sample_svg_file, sid,
             (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
@@ -463,21 +463,17 @@ def query_embargo(name)
           sids = entities.map { |e| e[:sid] }
 
           com_config = Rails.configuration.compound_opendata
-# byebug
           xvial_count_sql = <<~SQL
             inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
           SQL
           x_cnt_ids = req_xvial ? sids.uniq : (Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || [])
-
-          xvial_com_sql = <<~SQL
-            inner join molecules m on m.id = samples.molecule_id
-            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
-          SQL
+          xvial_com_sql = get_xvial_sql(req_xvial)
           x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
 
           entities = entities.each do |obj|
             obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
             obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
+            obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], req_xvial)
           end
           entities
         end
@@ -740,11 +736,11 @@ def query_embargo(name)
 
       resource :molecule do
         helpers RepositoryHelpers
-        desc "Return serialized molecule with list of PUBLISHED dataset"
+        desc 'Return serialized molecule with list of PUBLISHED dataset'
         params do
-          requires :id, type: Integer, desc: "Molecule id"
-          optional :adv_flag, type: Boolean, desc: "advanced search flag"
-          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies Embargo]
+          requires :id, type: Integer, desc: 'Molecule id'
+          optional :adv_flag, type: Boolean, desc: 'advanced search flag'
+          optional :adv_type, type: String, desc: 'advanced search type', allow_blank: true, values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         get do
diff --git a/app/api/helpers/compound_helpers.rb b/app/api/helpers/compound_helpers.rb
index 0e177b1cc..29bbf9c38 100644
--- a/app/api/helpers/compound_helpers.rb
+++ b/app/api/helpers/compound_helpers.rb
@@ -18,11 +18,46 @@ def build_xvial_com(inchikey, uid)
     }
   end
 
-  def add_xvial_sql(req_xvial = false)
+  def join_xvial_sql(req_xvial = false, link = 'samples')
     xvial_count_sql = <<~SQL
-      inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+      inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = #{link}.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
     SQL
     xvial_count_sql = '' unless req_xvial
     xvial_count_sql
   end
+
+  def get_xvial_sql(req_xvial = false, link = 'samples')
+    xvial_com_sql = <<~SQL
+      inner join molecules m on m.id = samples.molecule_id
+      inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+    SQL
+    if req_xvial
+      xvial_com_sql = <<~SQL
+        inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = #{link}.id
+        inner join com_xvial(true) a on a.x_data ->> 'xid' = e.taggable_data -> 'xvial' ->> 'num'
+      SQL
+    end
+    xvial_com_sql
+  end
+
+  def get_xdata(inchikey, sid, req_xvial = false)
+    return [] unless req_xvial
+
+    com_config = Rails.configuration.compound_opendata
+    return [] unless com_config.present? && inchikey.present?
+
+    # data = CompoundOpenData.where('x_inchikey = ?', inchikey).order(x_created_at: :desc).pluck :x_data
+
+    xvial_com_sql = <<~SQL
+      inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = #{sid}
+    SQL
+
+    # data = CompoundOpenData.joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
+    data = CompoundOpenData.where("compound_open_data.x_data ->> 'xid' = e.taggable_data -> 'xvial' ->> 'num'").joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
+
+    x_data = data.map do |obj|
+      { affiliation: obj['affiliation'], provided_by: obj['provided_by'], group: obj['group'] }
+    end
+    x_data
+  end
 end
diff --git a/app/api/helpers/public_helpers.rb b/app/api/helpers/public_helpers.rb
index 93bcdaf3e..4f2602824 100644
--- a/app/api/helpers/public_helpers.rb
+++ b/app/api/helpers/public_helpers.rb
@@ -1,3 +1,6 @@
+# frozen_string_literal: true
+
+# Helper for public API
 module PublicHelpers
   extend Grape::API::Helpers
   include ApplicationHelper
@@ -15,17 +18,17 @@ def send_notification(attachment, user, status, has_error = false)
       data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
       level = 'error'
     end
-    message = Message.create_msg_notification(
+    Message.create_msg_notification(
       channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
       data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
     )
   end
 
-  def de_encode_json(json, key = '', iv = '', encode = true)
+  def de_encode_json(json, key = '', viv = '', encode = true)
     if encode
       encode_json(json)
     else
-      decode_json(json, key, iv)
+      decode_json(json, key, viv)
     end
   end
-end
\ No newline at end of file
+end
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 69786f389..d35261ca0 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -123,21 +123,50 @@ $bs-successcolor: #5cb85c;
   background-color: #f5f5f5;
   // border: 1px solid #e3e3e3;
   border-radius: 6px;
-  height: 40vh;//auto; //calc(80vh - 190px);
+  height: 36vh;//auto; //calc(80vh - 190px);
   // overflow-x: auto;
   padding: 10px 0px;
 
 }
 
+.card-nfdi4chem {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  // box-shadow: -6px 6px 6px 2px rgba(0, 0, 0, 0.3);
+  // border: 1px solid #e7e7e7;
+  > h3 {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 0px 10px;
+  }
+  > h4 {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 0px 10px;
+  }
+}
+
+.card-latest {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  // box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.3);
+}
+
 .card-well-competition {
   @extend .card-well;
   // padding: 20px 15px;
   display: flex;
-  margin: 70px 10px 10px 0px;
+  // margin: 70px 10px 10px 0px;
+  margin: 40px 20px 20px 20px;
   // border: thin solid $statisticcolor;
-  border: 1px solid #e7e7e7;
+  // border: 1px solid #e7e7e7;
   border-radius: 0px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+  // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
   .carl-spt{
     // background-color: white;
     flex: 1;
@@ -223,7 +252,11 @@ $bs-successcolor: #5cb85c;
 
 .icon-chemotion {
   // margin: 30px;
-  width: 100%;
+  width: 20%;
+}
+
+.icon-nfdi4chem {
+  width: 80% !important;
 }
 
 .visibility-impact {
@@ -458,7 +491,7 @@ $bs-successcolor: #5cb85c;
 .repo-welcome {
   max-width: 2000px;
   margin: auto !important;
-  > div:not(:last-child) {
+  > div:nth-child(2) {
     background-color: $topbgcolor;
     > h2 { text-align: center; }
   }
@@ -518,8 +551,22 @@ $bs-successcolor: #5cb85c;
 
 .repo-intro {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  h1 {
+    text-align: center;
+  }
+  .row-bottom {
+    display: flex;
+    align-items: center;
+    div:first-child {
+      padding-right: unset;
+    }
+    div:last-child {
+      padding-left: unset;
+    }
+  }
   .container {
     display: flex;
     flex-direction: column;
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
index fccda7102..15b1785c3 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -14,12 +14,12 @@ const registedCompoundTooltip = (
   </div>
 );
 
-const listCom = (xvialCom) => {
+const listCom = (xvialCom, data = '') => {
   if (typeof xvialCom === 'undefined') return <br />;
   if (!xvialCom.allowed) return <br />;
   const listComData = xvialCom.hasData ? (
     xvialCom.data.map(x => (
-      <tr key={uuid.v4()}>
+      <tr key={uuid.v4()} style={x.x_data.xid === data && data !== '' ? { color: '#337ab7' } : { color: 'black' }}>
         <td>{x.x_data.xid}</td>
         <td>{x.x_data.provided_by}</td>
         <td>{x.x_created_at}</td>
@@ -118,7 +118,7 @@ export default class RepoXvialButton extends React.Component {
         <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
         <Modal.Body>
           <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
-          {listCom(xvialCom)}
+          {listCom(xvialCom, data)}
           <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
           <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
         </Modal.Body>
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index ad20d487c..e3857ca18 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -6,6 +6,7 @@ import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 export default class PublicFetcher {
   static fetchPublicMolecules(params = {}) {
+    console.log(params);
     const page = params.page || 1;
     const perPage = params.perPage || 10;
     const advFlag = params.advFlag || false;
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index eb0848033..47336a448 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -59,7 +59,8 @@ class PublicStore {
   }
 
   handleRefreshPubElements(type) {
-    PublicActions[`get${type}`]({ page: this.page, perPage: this.perPage });
+    const pageType = type.split('=');
+    PublicActions[`get${pageType[0]}`]({ page: this.page, perPage: this.perPage, listType: pageType[1] });
   }
 
   handleClose({ deleteEl }) {
diff --git a/app/packs/src/libHome/RepoCardIntro.js b/app/packs/src/libHome/RepoCardIntro.js
index b41eeef04..53a81cd3f 100644
--- a/app/packs/src/libHome/RepoCardIntro.js
+++ b/app/packs/src/libHome/RepoCardIntro.js
@@ -1,41 +1,30 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
+import React from 'react';
+import { Col, Row } from 'react-bootstrap';
 import RepoCardLatestPublish from './RepoCardLatestPublish';
 
 const RepoCardIntro = ({ lastPublished }) => (
-  <div className="container">
+  <div className="repo-intro">
     <Row>
-      <Col md={6} sm={12} className="even">
-        <img
-          className="icon-chemotion"
-          src="/images/repo/Chemotion-V1.png"
-          key="chemotion_full"
-          alt="Chemotion Repository"
-        />
-      </Col>
-      <Col md={6} sm={12} className="even">
-        <RepoCardLatestPublish lastPublished={lastPublished} />
+      <Col lg={12} md={12} sm={12}>
+        <h1>Repository for samples, reactions and related research data</h1>
       </Col>
     </Row>
-    <Row>
-      <Col lg={12} md={12} sm={12}>
-        <ul className="list">
-          <li>
-            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
-          </li>
-        </ul>
+    <Row className="row-bottom">
+      <Col lg={4} md={4} sm={12}>
+        <div className="card-well-competition card-nfdi4chem">
+          <h4>
+            this repository is part of the strategy of
+          </h4>
+          <img
+            className="icon-nfdi4chem"
+            src="/images/repo/NFDI4Chem_logo.svg"
+            key="NFDI4Chem"
+            alt="NFDI4Chem"
+          />
+        </div>
+      </Col>
+      <Col lg={8} md={8} sm={12}>
+        <RepoCardLatestPublish lastPublished={lastPublished} />
       </Col>
     </Row>
   </div>
diff --git a/app/packs/src/libHome/RepoCardIntro1.js b/app/packs/src/libHome/RepoCardIntro1.js
deleted file mode 100644
index 489b1f186..000000000
--- a/app/packs/src/libHome/RepoCardIntro1.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoCardLatestPublish from './RepoCardLatestPublish';
-
-const RepoCardIntro1 = ({ lastPublished }) => (
-  <div className="repo-intro" style={{ flexDirection: 'column' }}>
-    <Row style={{ display: 'flex', alignItems: 'center' }}>
-      <Col lg={6} md={6} sm={12}>
-        <img
-          className="icon-chemotion"
-          src="/images/repo/Chemotion-V1.png"
-          key="chemotion_full"
-          alt="Chemotion Repository"
-        />
-      </Col>
-      <Col lg={6} md={6} sm={12}>
-        <RepoCardLatestPublish lastPublished={lastPublished} />
-      </Col>
-    </Row>
-    <Row style={{ fontSize: '120%' }}>
-      <Col lg={12} md={12} sm={12}>
-        <ul className="list">
-          <li>
-            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
-          </li>
-        </ul>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default RepoCardIntro1;
diff --git a/app/packs/src/libHome/RepoCardLatestPublish.js b/app/packs/src/libHome/RepoCardLatestPublish.js
index 21d7aa14c..486606373 100644
--- a/app/packs/src/libHome/RepoCardLatestPublish.js
+++ b/app/packs/src/libHome/RepoCardLatestPublish.js
@@ -1,9 +1,10 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import React from 'react';
+import { Carousel } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
 import PublicActions from '../components/actions/PublicActions';
 
-const timeInterval = (date) => {
+const timeInterval = (_date) => {
+  let date = _date;
   if (!date) { return null; }
   switch (typeof date) {
     case 'number':
@@ -17,8 +18,8 @@ const timeInterval = (date) => {
     default:
       date = +new Date();
   }
-  let seconds = Math.floor((new Date() - date) / 1000);
-  let intrvlTypes = [
+  const seconds = Math.floor((new Date() - date) / 1000);
+  const intrvlTypes = [
     [31536000, 'year', 'a'],
     [2592000, 'month', 'a'],
     [604800, 'week', 'a'],
@@ -26,12 +27,12 @@ const timeInterval = (date) => {
     [3600, 'hour', 'an'],
     [60, 'minute', 'a'],
     [1, 'second', 'a'],
-  ]
-  let intrvlCount = 0
-  let intrvlType = intrvlTypes.find((e) => {
-    intrvlCount = Math.floor(seconds / e[0])
-    return intrvlCount >= 1
-  })
+  ];
+  let intrvlCount = 0;
+  const intrvlType = intrvlTypes.find((e) => {
+    intrvlCount = Math.floor(seconds / e[0]);
+    return intrvlCount >= 1;
+  });
   return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
 };
 
@@ -47,7 +48,7 @@ const RepoCardLatestPublish = ({ lastPublished }) => {
       : '/images/no_image_180.svg';
     const pubTagReaction = reaction.tag || {};
     return (
-      <div className="card-well-competition">
+      <div className="card-well-competition card-latest">
         <Carousel className="carl-spt" indicators={false} interval={6000}>
           <Carousel.Item className="carl-spt-item">
             <div className="img">
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
index e4e62539a..7474015b6 100644
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -1,26 +1,20 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
+import React from 'react';
+import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
+// import Aviator from 'aviator';
 
 const RepoCardMoleculeArchive = () => {
   const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
   return (
-    <div>
-    <Row className="repo-statistic" style={{ justifyContent: 'center' }}>
+    <Row className="repo-statistic">
       <Col lg={12} md={12} sm={12}>
-        <Col lg={12} md={12} sm={12} style={{ textAlign: 'center', fontSize: '24px', margin: '20px' }}>
-          archive for materials
-        </Col>
+        <h3>archive for materials</h3>
       </Col>
-      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info" style={{ flex: 'unset' }}>
+      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
         <Col lg={12} md={12} sm={12} className="panel-heading dtl">
           <Row className="rl">
             <OverlayTrigger placement="top" overlay={tooltipView}>
-              <Button className="animation-ring" bsStyle="link">
+              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
                 <i className="icon-sample" />
               </Button>
             </OverlayTrigger>
@@ -28,23 +22,16 @@ const RepoCardMoleculeArchive = () => {
           </Row>
         </Col>
         <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <Row className="rr">
-            <div className="tit">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button bsStyle="link">
-                  published
-                </Button>
-              </OverlayTrigger>
-            </div>
+          <div className="rr">
             <div className="cnt">
               <CountUp end={1680} />
             </div>
             <div className="italic-desc">Compounds</div>
-          </Row>
+          </div>
         </Col>
       </Col>
       <Col lg={12} md={12} sm={12}>
-        <Col lg={4} md={4} sm={4} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
           <img
             className="icon-molecule-archive2"
             src="/images/repo/molecule-archive-logo-weiss.svg"
@@ -52,12 +39,11 @@ const RepoCardMoleculeArchive = () => {
             alt="Molecule Archive"
           />
         </Col>
-        <Col lg={8} md={8} sm={8} style={{ fontSize: '1.5rem' }}>
+        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
           find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
         </Col>
       </Col>
     </Row>
-    </div>
   );
 };
 
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive1.js b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
deleted file mode 100644
index db37aea03..000000000
--- a/app/packs/src/libHome/RepoCardMoleculeArchive1.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-// import Aviator from 'aviator';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-
-const RepoCardMoleculeArchive1 = () => {
-  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
-  return (
-    <Row className="repo-statistic">
-      <Col lg={12} md={12} sm={12}>
-        <h3>archive for materials</h3>
-      </Col>
-      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <Row className="rl">
-            <OverlayTrigger placement="top" overlay={tooltipView}>
-              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
-                <i className="icon-sample" />
-              </Button>
-            </OverlayTrigger>
-            <div className="tit">Samples</div>
-          </Row>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <div className="rr">
-            <div className="cnt">
-              <CountUp end={1680} />
-            </div>
-            <div className="italic-desc">Compounds</div>
-          </div>
-        </Col>
-      </Col>
-      <Col lg={12} md={12} sm={12}>
-        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
-          <img
-            className="icon-molecule-archive2"
-            src="/images/repo/molecule-archive-logo-weiss.svg"
-            key="chemotion_full"
-            alt="Molecule Archive"
-          />
-        </Col>
-        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
-          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
-        </Col>
-      </Col>
-    </Row>
-  );
-};
-
-export default RepoCardMoleculeArchive1;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/libHome/RepoCardStaticsBoard.js
index 2681e921a..708d97d56 100644
--- a/app/packs/src/libHome/RepoCardStaticsBoard.js
+++ b/app/packs/src/libHome/RepoCardStaticsBoard.js
@@ -1,10 +1,8 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
+import React from 'react';
+import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import CountUp from 'react-countup';
 import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
+import RepoNavListTypes from './RepoNavListTypes';
 
 const RepoCardStaticsBoard = (params) => {
   const { publishedStatics } = params;
@@ -20,7 +18,10 @@ const RepoCardStaticsBoard = (params) => {
     const stsAnalysisCnt = stsAnalysisSort
       .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
     const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = { sample: 'publications=sample', reaction: 'publications=reaction' };
+    const pubPage = {
+      sample: `publications=${RepoNavListTypes.SAMPLE}`,
+      reaction: `publications=${RepoNavListTypes.REACTION}`
+    };
     return (
       <Row className="repo-statistic">
         <Col lg={12} md={12} sm={12}>
@@ -30,7 +31,7 @@ const RepoCardStaticsBoard = (params) => {
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rl">
               <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
                   <i className="icon-sample" />
                 </Button>
               </OverlayTrigger>
@@ -39,16 +40,14 @@ const RepoCardStaticsBoard = (params) => {
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="tit">
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />{' '}
                 <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules(); }}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
                     published
                   </Button>
                 </OverlayTrigger>
               </div>
-              <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />
-              </div>
               <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
               <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
             </Row>
@@ -67,16 +66,14 @@ const RepoCardStaticsBoard = (params) => {
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="tit">
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />{' '}
                 <OverlayTrigger placement="top" overlay={tooltipView}>
                   <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
                     published
                   </Button>
                 </OverlayTrigger>
               </div>
-              <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />
-              </div>
               <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
               <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
             </Row>
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard1.js b/app/packs/src/libHome/RepoCardStaticsBoard1.js
deleted file mode 100644
index 75dabf684..000000000
--- a/app/packs/src/libHome/RepoCardStaticsBoard1.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoNavListTypes from './RepoNavListTypes';
-
-const RepoCardStaticsBoard1 = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = { sample: `publications=${RepoNavListTypes.SAMPLE}`, reaction: `publications=${RepoNavListTypes.REACTION}` };
-    return (
-      <Row className="repo-statistic">
-        <Col lg={12} md={12} sm={12}>
-          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                  <i className="icon-sample" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Samples</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                  <i className="icon-reaction" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="fa fa-area-chart i-ext" aria-hidden />
-              <div className="tit">Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
-              <div style={{ display: 'flex' }}>
-                <div>Top 3:&nbsp;&nbsp;</div>
-                <div className="italic-desc">
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
-                  <br />
-                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
-                  <br />
-                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
-                </div>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
-export default RepoCardStaticsBoard1;
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
index acc1c76c9..187fe41f7 100644
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ b/app/packs/src/libHome/RepoElementDetails.js
@@ -26,8 +26,7 @@ export default class RepoElementDetails extends Component {
   }
 
   switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
+    const { currentElement, elementType, listType } = this.state;
     if (typeof (currentElement) === 'undefined' || !currentElement) {
       return <span />;
     }
@@ -40,6 +39,7 @@ export default class RepoElementDetails extends Component {
           reviewLevel={this.state.reviewLevel}
           isSubmitter={this.state.isSubmitter}
           review={this.state.review || {}}
+          listType={listType}
         />);
       case 'reaction': return (
         <RepoReactionDetails
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index 9d2d717a6..353125983 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -1,17 +1,11 @@
 import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
+import { Col, Row, Thumbnail } from 'react-bootstrap';
 import PublicActions from '../components/actions/PublicActions';
 import PublicStore from '../components/stores/PublicStore';
 import { HomeFeature } from './RepoCommon';
-import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
-import RepoCardIntro from './RepoCardIntro';
 import RepoCardStaticsBoard from './RepoCardStaticsBoard';
-import RepoCardIntro1 from './RepoCardIntro1';
-import RepoCardStaticsBoard1 from './RepoCardStaticsBoard1';
-import RepoCardMoleculeArchive1 from './RepoCardMoleculeArchive1';
-import RepoNavListTypes from './RepoNavListTypes';
+import RepoCardIntro from './RepoCardIntro';
+import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
 
 const PartnersInfo = (info) => {
   const { header, img, content } = info;
@@ -63,266 +57,9 @@ const Infos = [
   }
 ];
 
-const timeInterval = (date) => {
-  if (!date) { return null; }
-  switch (typeof date) {
-    case 'number':
-      break;
-    case 'string':
-      date = +new Date(date);
-      break;
-    case 'object':
-      if (date.constructor === Date) date = date.getTime();
-      break;
-    default:
-      date = +new Date();
-  }
-  let seconds = Math.floor((new Date() - date) / 1000);
-  let intrvlTypes = [
-    [31536000, 'year', 'a'],
-    [2592000, 'month', 'a'],
-    [604800, 'week', 'a'],
-    [86400, 'day', 'a'],
-    [3600, 'hour', 'an'],
-    [60, 'minute', 'a'],
-    [1, 'second', 'a'],
-  ]
-  let intrvlCount = 0
-  let intrvlType = intrvlTypes.find((e) => {
-    intrvlCount = Math.floor(seconds / e[0])
-    return intrvlCount >= 1
-  })
-  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
-}
-
-const CardLatestPublish = ({ lastPublished }) => {
-  if (lastPublished) {
-    const { sample, reaction } = lastPublished;
-    const svgPathSample = sample.sample_svg_file
-      ? `/images/samples/${sample.sample_svg_file}`
-      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
-    const pubTagSample = sample.tag || {};
-    const svgPathReaction = reaction
-      ? `/images/reactions/${reaction.reaction_svg_file}`
-      : '/images/no_image_180.svg';
-    const pubTagReaction = reaction.tag || {};
-    return (
-      <div className="card-well-competition">
-        <Carousel className="carl-spt" indicators={false} interval={6000}>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
-                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
-                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-        </Carousel>
-      </div>
-    );
-  }
-  return <div />;
-};
-
-const CardIntro = () => (
-  <div className="container">
-    <Row>
-      <Col md={6} sm={12} className="even">
-        {/* <Row> */}
-          {/* <Col md={12} sm={12}> */}
-            <img
-              className="icon-chemotion"
-              src="/images/repo/Chemotion-V1.png"
-              key="chemotion_full"
-              alt="Chemotion Repository"
-            />
-          {/* </Col> */}
-        {/* <Row>
-          <Col md={8} sm={12}>
-            <div className="info">
-              <div className="cnt"><CountUp end={1680} /></div>
-              <div>Published compounds</div>
-            </div>
-          </Col>
-          <Col md={4} sm={12}>
-            <img
-              className="icon-molecule-archive"
-              src="/images/molecule-archive-logo-weiss.svg"
-              key="chemotion_full"
-              alt="Molecule Archive"
-            />
-          </Col>
-        </Row> */}
-      </Col>
-      <Col md={6} sm={12} className="even">
-        <div className="heading">
-          Repository for molecules, reactions and research data
-        </div>
-        {/* <div className="heading">Visibility and Impact</div> */}
-        <ul className="list">
-          <li>
-            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            Long-term archival - from scientists for scientists
-          </li>
-          {/* <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Now, publish your Reactions</i>
-          </li> */}
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
-          </li>
-        </ul>
-      </Col>
-    </Row>
-  </div>
-);
-
-const StaticsBoard = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = {
-      sample: `publications=${RepoNavListTypes.SAMPLE}`,
-      reaction: `publications=${RepoNavListTypes.REACTION}`
-    };
-    return (
-      <Row className="repo-statistic">
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: RepoNavListTypes.SAMPLE }); }}>
-                  <i className="icon-sample" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Samples</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="tit">
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: RepoNavListTypes.SAMPLE }); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />
-              </div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                  <i className="icon-reaction" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="tit">
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />
-              </div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="fa fa-area-chart i-ext" aria-hidden />
-              <div className="tit">Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
-              <div style={{ display: 'flex' }}>
-                <div>Top 3:&nbsp;&nbsp;</div>
-                <div className="italic-desc">
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
-                  <br />
-                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
-                  <br />
-                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
-                </div>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <img
-                className="icon-molecule-archive2"
-                src="/images/molecule-archive-logo-weiss.svg"
-                key="chemotion_full"
-                alt="Molecule Archive"
-              />
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={1680} />
-              </div>
-              <div className="italic-desc">Published compounds</div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
 class RepoHome extends Component {
   constructor(props) {
-    super()
+    super();
     this.state = {
     };
     this.onChange = this.onChange.bind(this);
@@ -375,11 +112,11 @@ class RepoHome extends Component {
       //   title: 'Usage',
       //   intro: 'Assess your research data and track the published research data......'
       // },
-      // oai: {
-      //   fa: 'fa fa-tasks',
-      //   title: 'OAI Provider',
-      //   intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
-      // },
+      oai: {
+        fa: 'fa fa-tasks',
+        title: 'OAI Provider',
+        intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
+      },
       dataQuality: {
         fa: 'fa fa-diamond',
         title: 'Data Quality',
@@ -404,35 +141,28 @@ class RepoHome extends Component {
 
     return (
       <Row className="repo-welcome">
-        <Col md={12} sm={12}>
-          <h2>Repository for samples, reactions and related research data</h2>
+        <Col lg={12} md={12} sm={12} style={{ display: 'flex', justifyContent: 'center' }}>
+          <img
+            className="icon-chemotion"
+            src="/images/repo/Chemotion-V1.png"
+            key="chemotion_full"
+            alt="Chemotion Repository"
+          />
         </Col>
         <Col md={12} sm={12}>
-          {/* <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}> */}
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <Col md={3} sm={12}>
-              <RepoCardMoleculeArchive1 />
+              <RepoCardMoleculeArchive />
             </Col>
             <Col md={6} sm={12}>
-              <RepoCardIntro1 lastPublished={this.state.lastPublished} />
+              <RepoCardIntro lastPublished={this.state.lastPublished} />
             </Col>
             <Col md={3} sm={12}>
-              <RepoCardStaticsBoard1 publishedStatics={this.state.publishedStatics} />
+              <RepoCardStaticsBoard publishedStatics={this.state.publishedStatics} />
             </Col>
           </div>
         </Col>
         <Col md={12} sm={12}>
-          {/* <Row className="repo-top">
-            <Col md={3} sm={12}>
-              <RepoCardMoleculeArchive />
-            </Col>
-            <Col md={6} sm={12} className="repo-intro">
-              <RepoCardIntro lastPublished={this.state.lastPublished} />
-            </Col>
-            <Col md={3} sm={12}>
-              <RepoCardStaticsBoard publishedStatics={this.state.publishedStatics} />
-            </Col>
-          </Row> */}
           <Row>
             <Col md={2} sm={12}>&nbsp;</Col>
             <Col md={8} sm={12}>
@@ -468,17 +198,14 @@ class RepoHome extends Component {
                 </Col>
               </Row>
               <Row className="feature">
-                <Col md={2} sm={12}>
-                  <div />
-                </Col>
                 <Col md={4} sm={12}>
                   <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
                 </Col>
                 <Col md={4} sm={12}>
-                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
+                  <HomeFeature fa={features.oai.fa} title={features.oai.title} intro={features.oai.intro} />
                 </Col>
-                <Col md={2} sm={12}>
-                  <div />
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
                 </Col>
               </Row>
             </Col>
diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/libHome/RepoMoleculeArchive.js
index c98b892ad..ce648d8cf 100644
--- a/app/packs/src/libHome/RepoMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoMoleculeArchive.js
@@ -7,7 +7,6 @@ import SVG from 'react-inlinesvg';
 import PublicActions from '../components/actions/PublicActions';
 import Formula from '../components/common/Formula';
 import PubchemLabels from '../components/PubchemLabels';
-import { xvialTag, svgTag } from './RepoPubCommon';
 import RepoNavListTypes from './RepoNavListTypes';
 
 const pubchemTag = (molecule) => {
@@ -30,10 +29,7 @@ const infoTag = (molecule) => {
         </div>
       </OverlayTrigger>
       <div className="home_wrapper_item">
-        <div>Provided by</div><div className="item_xvial">{molecule.author_name}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
+        <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
       </div>
       <div className="home_wrapper_item">
         <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
@@ -51,7 +47,6 @@ const RepoMoleculeArchive = (props) => {
     ? `/images/samples/${molecule.sample_svg_file}`
     : `/images/molecules/${molecule.molecule_svg_file}`;
   const pubchemInfo = pubchemTag(molecule);
-
   return (
     <Col xs={12} sm={12} md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue, RepoNavListTypes.MOLECULE_ARCHIVE)}>
       <div className={`home_archive ${listClass}`}>
@@ -72,12 +67,12 @@ const RepoMoleculeArchive = (props) => {
               </div>
             </div>
             <div className="border">
-              <div className="dl">Affiliation</div>
-              <div className="dr">Institute of Nanotechnology (INT), Karlsruhe Institute of Technology, Germany </div>
+              <div className="dl">Provided by</div>
+              <div className="dr">{molecule.xvial_archive[0]?.provided_by}</div>
             </div>
             <div className="border">
               <div className="dl">Group</div>
-              <div className="dr"> </div>
+              <div className="dr">{molecule.xvial_archive[0]?.group}</div>
             </div>
           </div>
           <div>
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 5842db067..a82c9aef0 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -63,8 +63,9 @@ export default class RepoSample extends Component {
   }
 
   updateRepoXvial(elementId) {
-    PublicActions.displayMolecule(elementId);
-    PublicActions.refreshPubElements('Molecules');
+    const { listType } = this.props;
+    PublicActions.displayMolecule(elementId, '', false, '', '', listType);
+    PublicActions.refreshPubElements(`Molecules=${listType}`);
   }
 
   renderAnalyses(analyses) {
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 6f3580932..b94bfb8e5 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -3,7 +3,7 @@ import PublicFetcher from '../components/fetchers/PublicFetcher';
 import RepoNavListTypes from './RepoNavListTypes';
 import ReviewActions from '../components/actions/ReviewActions';
 import EmbargoActions from '../components/actions/EmbargoActions';
-
+import LoadingActions from '../components/actions/LoadingActions';
 
 const routes = {
   '/': 'root',
@@ -33,6 +33,7 @@ const routes = {
   '/publications': {
     target: {
       show: function(e) {
+        LoadingActions.start();
         PublicActions.getReactions.defer();
         PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.REACTION}`)
       },
@@ -42,7 +43,8 @@ const routes = {
   '/moleculeArchive': {
     target: {
       show: function(e) {
-        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE });
+        LoadingActions.start();
+        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }).defer();
         PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)
       },
     },

From 3bddad9edbb12198d117e4fd143faa562594ce0e Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 16 Nov 2022 12:15:39 +0100
Subject: [PATCH 082/258] count of compound

---
 app/api/chemotion/repository_api.rb           |  2 +-
 app/api/helpers/compound_helpers.rb           |  3 -
 app/assets/stylesheets/repo_home.scss         | 63 ++-----------------
 .../src/components/fetchers/PublicFetcher.js  |  2 -
 .../src/components/stores/ReviewStore.js      |  8 +++
 .../src/libHome/RepoCardMoleculeArchive.js    |  9 ++-
 app/packs/src/libHome/RepoHome.js             |  2 +-
 app/packs/src/libHome/homeRoutes.js           |  2 +-
 ...update_publication_statics_to_version_2.rb |  5 ++
 db/views/publication_statics_v02.sql          | 37 +++++++++++
 10 files changed, 64 insertions(+), 69 deletions(-)
 create mode 100644 db/migrate/20221116105903_update_publication_statics_to_version_2.rb
 create mode 100644 db/views/publication_statics_v02.sql

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index b35d5eaed..49c8f4f26 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -723,7 +723,7 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review['history'] = review_history
             end
 
-            if checklist&.length.positive?
+            if checklist&.length&.positive?
               revst = review['checklist'] || {}
               checklist.each { |k, v|
                 revst[k] = v['status'] == true ? { status: v['status'], user: current_user.name, updated_at: Time.now.strftime('%d-%m-%Y %H:%M:%S') } : { status: false } unless revst[k] && revst[k]['status'] == v['status']
diff --git a/app/api/helpers/compound_helpers.rb b/app/api/helpers/compound_helpers.rb
index 29bbf9c38..2805ee65c 100644
--- a/app/api/helpers/compound_helpers.rb
+++ b/app/api/helpers/compound_helpers.rb
@@ -46,13 +46,10 @@ def get_xdata(inchikey, sid, req_xvial = false)
     com_config = Rails.configuration.compound_opendata
     return [] unless com_config.present? && inchikey.present?
 
-    # data = CompoundOpenData.where('x_inchikey = ?', inchikey).order(x_created_at: :desc).pluck :x_data
-
     xvial_com_sql = <<~SQL
       inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = #{sid}
     SQL
 
-    # data = CompoundOpenData.joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
     data = CompoundOpenData.where("compound_open_data.x_data ->> 'xid' = e.taggable_data -> 'xvial' ->> 'num'").joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
 
     x_data = data.map do |obj|
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index d35261ca0..b7677e9f0 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -115,16 +115,12 @@ $bs-successcolor: #5cb85c;
    display: block;
    max-width: 1200px;
    margin: auto;
-  // height: calc(100vh - 80px);
-  // overflow-y: scroll;
 }
 
 .card-well {
   background-color: #f5f5f5;
-  // border: 1px solid #e3e3e3;
   border-radius: 6px;
   height: 36vh;//auto; //calc(80vh - 190px);
-  // overflow-x: auto;
   padding: 10px 0px;
 
 }
@@ -134,9 +130,6 @@ $bs-successcolor: #5cb85c;
   justify-content: center;
   align-items: center;
   background-color: white;
-  // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  // box-shadow: -6px 6px 6px 2px rgba(0, 0, 0, 0.3);
-  // border: 1px solid #e7e7e7;
   > h3 {
     text-align: center;
     margin-bottom: 30px;
@@ -154,38 +147,25 @@ $bs-successcolor: #5cb85c;
   justify-content: center;
   align-items: center;
   background-color: white;
-  // box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.3);
 }
 
 .card-well-competition {
   @extend .card-well;
-  // padding: 20px 15px;
   display: flex;
-  // margin: 70px 10px 10px 0px;
   margin: 40px 20px 20px 20px;
-  // border: thin solid $statisticcolor;
-  // border: 1px solid #e7e7e7;
   border-radius: 0px;
-  // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
   .carl-spt{
-    // background-color: white;
     flex: 1;
     display: flex;
     .carousel-inner .active.left { top: 0%; }
     .carousel-inner .next        { top: 0%; }
     .carousel-inner .prev        { top: 0%; }
-    // .carousel-inner .item.active {
-    //   display: flex;
-    //   align-items: center;
-    // }
   }
 
   .carl-spt-item {
     text-align: center;
     height: 100%;
     width: 100%;
-    // display: flex;
-    // align-items: center;
     a {
       cursor: pointer;
       display: flex;
@@ -198,7 +178,7 @@ $bs-successcolor: #5cb85c;
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
+    width: 480px;
     height: 100%;
   }
 
@@ -251,7 +231,6 @@ $bs-successcolor: #5cb85c;
 }
 
 .icon-chemotion {
-  // margin: 30px;
   width: 20%;
 }
 
@@ -266,23 +245,12 @@ $bs-successcolor: #5cb85c;
 
 .icon-molecule-archive {
   margin: 10px;
-  // width: 40%;
   background-color: rgb(12, 61, 118);
 }
 
 .icon-molecule-archive2 {
-  // margin: 10px;
   width: 3vw;
   height: auto;
-  //
-  // fill in div
-  // min-width: 100%;
-  // min-height: 100%;
-  // width: auto;
-  // height: auto;
-  // fix size
-  // width: 90px;
-  // height: 90px;
   background-color: rgb(12, 61, 118);
 }
 
@@ -305,12 +273,9 @@ $bs-successcolor: #5cb85c;
 
 .card-partners {
   background-color: #f5f5f5;
-  // height: calc(50vh - 134px);
   .partner-heading {
     background-color: #f5f5f5;
-    // border: 1px solid #e3e3e3;
      border-radius: 6px;
-    // height: 80px;
     margin: 20px 5px 0;
     padding: 5px;
     text-align: center;
@@ -325,11 +290,8 @@ $bs-successcolor: #5cb85c;
 
   .partners-info {
     height: 250px;
-    // height: auto;
-    // width: 250px;
     position: relative;
     display: table-cell;
-    // display: inline-flex;
     margin: 5px;
     border: 0px;
     background-color: #f5f5f5;
@@ -341,8 +303,6 @@ $bs-successcolor: #5cb85c;
       max-width: 90%;
       opacity: 1.0;
       z-index: 1;
-      // position: absolute;
-      // top: 0%;
     }
 
     &:hover img {
@@ -369,11 +329,8 @@ $bs-successcolor: #5cb85c;
   }
 }
 
-
 .repo-about {
   display: block;
-  // height: calc(100vh - 80px);
-  // overflow-y: scroll;
 }
 
 .card-icons {
@@ -398,10 +355,8 @@ $bs-successcolor: #5cb85c;
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
   border-radius: 6px;
-  //overflow: auto;
   padding: 30px;
   text-align: center;
-  // height: 80vh;
 }
 
 .panel-analyses-public {
@@ -411,7 +366,7 @@ $bs-successcolor: #5cb85c;
 .carl-sample svg {
   max-width: 100%;
   max-height: 500px;
-  height: 300px;
+  height: 220px;
   width: 100%;
 }
 
@@ -515,7 +470,6 @@ $bs-successcolor: #5cb85c;
     border-bottom-width: 6px;
   }
   > div:not(:last-child) {
-    // flex-wrap: wrap;
     flex: 1;
     justify-content: center;
     div {
@@ -576,7 +530,6 @@ $bs-successcolor: #5cb85c;
       flex: 1;
       .heading {
         font-size: 1.8vmax;
-        // font-weight: bold;
       }
       .list {
         font-size: 1vmax;
@@ -586,9 +539,7 @@ $bs-successcolor: #5cb85c;
       flex: 1;
     }
     .row .even .row {
-      // border: 1px solid lightgrey;
       border: 1px solid #e7e7e7;
-      // box-shadow: 10px 5px 5px grey;
       background-color: #e7e7e7;
       h2 {
         font-weight: bolder;
@@ -609,8 +560,6 @@ $bs-successcolor: #5cb85c;
 
 .repo-statistic {
   @extend .card-well;
-  // display: flex;
-  // flex-direction: column;
   padding-bottom: 10px;
   > div {
     flex: 1;
@@ -632,8 +581,6 @@ $bs-successcolor: #5cb85c;
       color: unset;
       border: none;
       text-align: center;
-      // padding-left: unset;
-      // padding-right: unset;
       padding: 0px;
     }
     .dtl .rl {
@@ -782,7 +729,6 @@ $bs-successcolor: #5cb85c;
   color: $bs-primarycolor;
 }
 
-/* animation-ring */
 .wrap-ring {
   font-size: 1.6em;
 }
@@ -861,11 +807,10 @@ $bs-successcolor: #5cb85c;
         padding: 0px 15px 5px 15px;
         .dl {
           font-weight: bold;
-          width: 20%;
-          padding-right: 4px;
+          width: 25%;
         }
         .dr {
-          width: 80%;
+          width: 75%;
         }
       }
     }
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index e3857ca18..a21464274 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -6,7 +6,6 @@ import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 export default class PublicFetcher {
   static fetchPublicMolecules(params = {}) {
-    console.log(params);
     const page = params.page || 1;
     const perPage = params.perPage || 10;
     const advFlag = params.advFlag || false;
@@ -14,7 +13,6 @@ export default class PublicFetcher {
     const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
     const listType = params.listType || RepoNavListTypes.SAMPLE;
     const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&req_xvial=${listType === RepoNavListTypes.MOLECULE_ARCHIVE}`;
-
     return fetch(api, { credentials: 'same-origin' })
       .then(response => response.json().then(json => ({
         molecules: json.molecules.map(m => new Molecule(m)),
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index 84d1ee40b..e4c2e9317 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -1,6 +1,7 @@
 import Aviator from 'aviator';
 import alt from '../alt';
 import ReviewActions from '../actions/ReviewActions';
+import PublicActions from '../actions/PublicActions';
 import ElementActions from '../actions/ElementActions';
 import UIActions from '../actions/UIActions';
 
@@ -27,6 +28,13 @@ class ReviewStore {
       handleUnitsSystem: ReviewActions.fetchUnitsSystem,
       handleReviewUpdate: ReviewActions.updateReview,
       handleFetchSample: ReviewActions.fetchSample,
+      handleClose: PublicActions.close,
+    });
+  }
+
+  handleClose({ deleteEl }) {
+    this.setState({
+      currentElement: null
     });
   }
 
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
index 7474015b6..4796f49fb 100644
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -3,7 +3,12 @@ import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import CountUp from 'react-countup';
 // import Aviator from 'aviator';
 
-const RepoCardMoleculeArchive = () => {
+const RepoCardMoleculeArchive = (params) => {
+  const { publishedStatics } = params;
+  let count = 0;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    count = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'xvial'))?.e_cnt || 0;
+  }
   const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
   return (
     <Row className="repo-statistic">
@@ -24,7 +29,7 @@ const RepoCardMoleculeArchive = () => {
         <Col lg={12} md={12} sm={12} className="panel-heading dtl">
           <div className="rr">
             <div className="cnt">
-              <CountUp end={1680} />
+              <CountUp end={count} />
             </div>
             <div className="italic-desc">Compounds</div>
           </div>
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index 353125983..db15c8c37 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -152,7 +152,7 @@ class RepoHome extends Component {
         <Col md={12} sm={12}>
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <Col md={3} sm={12}>
-              <RepoCardMoleculeArchive />
+              <RepoCardMoleculeArchive publishedStatics={this.state.publishedStatics} />
             </Col>
             <Col md={6} sm={12}>
               <RepoCardIntro lastPublished={this.state.lastPublished} />
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index b94bfb8e5..b97ede818 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -44,7 +44,7 @@ const routes = {
     target: {
       show: function(e) {
         LoadingActions.start();
-        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }).defer();
+        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }); // .defer();
         PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)
       },
     },
diff --git a/db/migrate/20221116105903_update_publication_statics_to_version_2.rb b/db/migrate/20221116105903_update_publication_statics_to_version_2.rb
new file mode 100644
index 000000000..59f525b4a
--- /dev/null
+++ b/db/migrate/20221116105903_update_publication_statics_to_version_2.rb
@@ -0,0 +1,5 @@
+class UpdatePublicationStaticsToVersion2 < ActiveRecord::Migration[5.2]
+  def change
+    update_view :publication_statics, version: 2, revert_to_version: 1
+  end
+end
diff --git a/db/views/publication_statics_v02.sql b/db/views/publication_statics_v02.sql
new file mode 100644
index 000000000..fe18464bb
--- /dev/null
+++ b/db/views/publication_statics_v02.sql
@@ -0,0 +1,37 @@
+select 'sample' as el_type, 'sample-embargo' as ex_type, count(id) as e_cnt from publications where state in ('accepted') and element_type = 'Sample' and deleted_at is null
+union
+select 'sample' as el_type, 'sample-review' as ex_type, count(id) as e_cnt from publications where state in ('pending','reviewed') and element_type = 'Sample' and deleted_at is null
+union
+select 'sample' as el_type, 'sample' as ex_type, count(id) as e_cnt from publications where state like 'completed%' and element_type = 'Sample' and deleted_at is null
+union
+select 'sample'::text AS el_type, 'xvial'::text AS ex_type, count(publications.id) AS e_cnt from publications
+  join element_tags et on et.taggable_type = 'Sample' and (et.taggable_data -> 'xvial' is not null and et.taggable_data -> 'xvial' ->> 'num' != '')
+  and et.taggable_id = publications.element_id
+  where publications.state::text ~~ 'completed%'::text AND publications.element_type::text = 'Sample'::text AND publications.deleted_at IS null
+UNION
+select 'reaction' as el_type, 'reaction-embargo' as ex_type, count(id) as e_cnt from publications where state in ('accepted') and element_type = 'Reaction' and deleted_at is null
+union
+select 'reaction' as el_type, 'reaction-review' as ex_type, count(id) as e_cnt from publications where state in ('pending','reviewed') and element_type = 'Reaction' and deleted_at is null
+union
+select 'reaction' as el_type, 'reaction' as ex_type, count(id) as e_cnt from publications where state like 'completed%' and element_type = 'Reaction' and deleted_at is null
+union
+select 'analysis' as el_type, summ.g_type as ex_type, sum(summ.c_num) as e_cnt from
+(
+select
+  case
+    when (extended_metadata->'kind') like '%NMR%' then 'NMR'
+    when (extended_metadata->'kind') like '%mass%' then 'Mass'
+    when (extended_metadata->'kind') like '%DEPT%' then 'DEPT'
+    when ((extended_metadata->'kind') like '%X-ray%' or (extended_metadata->'kind') like '%CHMO:0000156%') then 'X-ray'
+    when (extended_metadata->'kind') like '%CHMO:0000630%' then 'IR'
+    when (extended_metadata->'kind') like '%CHMO:0001007%' then 'TLC'
+    when (extended_metadata->'kind') like '%CHMO:0001075%' then 'EA'
+    when (SPLIT_PART((extended_metadata->'kind'),'|',2) <> '') then TRIM(SPLIT_PART((extended_metadata->'kind'),'|',2))
+    else (extended_metadata->'kind')
+  end g_type, count(id) as c_num
+from containers
+where id in (select element_id from publications
+where state like 'completed%' and element_type = 'Container' and deleted_at is null) and extended_metadata->'kind' <> ''
+group by (extended_metadata->'kind')
+) summ
+group by summ.g_type

From 8e1b733323d9b8116a35b6b6223309f3252dba26 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 17 Nov 2022 10:59:19 +0100
Subject: [PATCH 083/258] publication element index

---
 db/migrate/20221117100000_publications_element_index.rb | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 db/migrate/20221117100000_publications_element_index.rb

diff --git a/db/migrate/20221117100000_publications_element_index.rb b/db/migrate/20221117100000_publications_element_index.rb
new file mode 100644
index 000000000..0f22c4c05
--- /dev/null
+++ b/db/migrate/20221117100000_publications_element_index.rb
@@ -0,0 +1,5 @@
+class PublicationsElementIndex < ActiveRecord::Migration[5.2]
+  def change
+    add_index :publications, [:element_type, :element_id, :deleted_at], name: 'publications_element_idx'
+  end
+end

From a5c80deb313b551e7ec590d44e6bf6b0900511c1 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 18 Nov 2022 19:45:28 +0100
Subject: [PATCH 084/258] import collection

---
 .../contextActions/ExportImportButton.js      | 67 +++----------------
 lib/import/import_collections.rb              | 41 +++++++-----
 2 files changed, 36 insertions(+), 72 deletions(-)

diff --git a/app/packs/src/components/contextActions/ExportImportButton.js b/app/packs/src/components/contextActions/ExportImportButton.js
index 813b1fb53..18b1766b7 100644
--- a/app/packs/src/components/contextActions/ExportImportButton.js
+++ b/app/packs/src/components/contextActions/ExportImportButton.js
@@ -31,62 +31,17 @@ function ExportImportButton({ isDisabled, updateModalProps, customClass }) {
       >
         Publish current collection via RADAR
       </MenuItem>
-    </>
-  ) : <span />;
-
-  return (
-    <Dropdown id="export-dropdown">
-      <Dropdown.Toggle className={customClass}>
-        <Glyphicon glyph="import" />
-        <Glyphicon glyph="export" />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        <MenuItem
-          onSelect={() => exportFunction(updateModalProps)}
-          title="Export to spreadsheet"
-        >
-          Export samples from selection
-        </MenuItem>
-        <MenuItem
-          onSelect={() => exportReactionFunction(updateModalProps)}
-          title="Export reaction smiles to csv"
-        >
-          Export reactions from selection
-        </MenuItem>
-        <MenuItem divider />
-        <MenuItem
-          onSelect={() => importSampleFunction(updateModalProps, false)}
-          disabled={isDisabled}
-          title="Import from spreadsheet or sdf"
-        >
-          Import samples to collection
-        </MenuItem>
-        <MenuItem
-          onSelect={() => importSampleFunction(updateModalProps, true)}
-          disabled={isDisabled}
-          title="Import chemicals from spreadsheet"
-        >
-          Import chemicals to collection
-        </MenuItem>
-        <MenuItem divider />
-        <MenuItem
-          onSelect={() => exportCollectionFunction(updateModalProps)}
-          title="Export as ZIP archive"
-        >
-          Export collections
-        </MenuItem>
-        <MenuItem
-          onSelect={() => importCollectionFunction(updateModalProps)}
-          title="Import collections from ZIP archive"
-        >
-          Import collections
-        </MenuItem>
-
-        {showRadar}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-}
+      <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
+        title='Import collections from ZIP archive'>
+        Import collections
+      </MenuItem>
+      {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
+      {/*   title='Import from Docs'> */}
+      {/*   Import elements from Docs */}
+      {/* </MenuItem> */}
+    </Dropdown.Menu>
+  </Dropdown>
+);
 
 ExportImportButton.propTypes = {
   isDisabled: PropTypes.bool,
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 4813b1f33..bb0c95b50 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -143,25 +143,34 @@ def import_annotation(zip_file, entry, attachment)
     end
 
     def import_collections
+      # collection = Collection.find(@col_id)
+      collection = Collection.find_or_create_by(user_id: @current_user_id, label: 'Imported Data', is_locked: true, position: 3)
+
+      @uuid = nil
+
       @data.fetch('Collection', {}).each do |uuid, fields|
-        # create the collection
-        collection = Collection.create!(fields.slice(
-          'label',
-          'sample_detail_level',
-          'reaction_detail_level',
-          'wellplate_detail_level',
-          'screen_detail_level',
-          'researchplan_detail_level',
-          'created_at',
-          'updated_at',
-        ).merge(
-          user_id: @current_user_id,
-          parent: fetch_ancestry('Collection', fields.fetch('ancestry')),
-        ))
+        @uuid = uuid
+      end
 
+      # @data.fetch('Collection', {}).each do |uuid, fields|
+      #   # create the collection
+      #   collection = Collection.create!(fields.slice(
+      #     'label',
+      #     'sample_detail_level',
+      #     'reaction_detail_level',
+      #     'wellplate_detail_level',
+      #     'screen_detail_level',
+      #     'researchplan_detail_level',
+      #     'created_at',
+      #     'updated_at'
+      #   ).merge(
+      #     user_id: @current_user_id,
+      #     parent: fetch_ancestry('Collection', fields.fetch('ancestry'))
+      #   ))
         # add collection to @instances map
-        update_instances!(uuid, collection)
-      end
+      # update_instances!(uuid, collection)
+      # end
+      update_instances!(@uuid, collection)
     end
 
     def gate_collection

From 5f5bd19fd3c2814025ae7ae61c7a6870292adf99 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 30 Nov 2022 10:04:24 +0100
Subject: [PATCH 085/258] embargo author

---
 app/api/chemotion/repository_api.rb           | 19 ++++---
 app/api/helpers/embargo_helpers.rb            | 11 +++-
 app/packs/src/apps/mydb/App.js                |  2 -
 .../src/components/PublishReactionModal.js    |  2 +-
 .../src/components/PublishSampleModal.js      |  2 +-
 .../common/RepoReviewAuthorsModal.js          | 50 ++++++++-----------
 .../src/components/fetchers/EmbargoFetcher.js | 14 +++++-
 .../src/components/stores/EmbargoStore.js     |  1 -
 .../src/components/stores/PublicStore.js      |  3 +-
 app/packs/src/libHome/RepoCollection.js       |  1 +
 app/packs/src/libHome/RepoEmbargo.js          | 22 +++++++-
 app/packs/src/libHome/RepoEmbargoModal.js     |  2 +-
 12 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 49c8f4f26..e22c77542 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -397,8 +397,12 @@ def add_submission_history(root)
       end
 
       desc 'Get embargo list'
-      get 'embargo_list' do
-        if User.reviewer_ids.include?(current_user.id)
+      post 'embargo_list' do
+        params do
+          optional :is_submit, type: Boolean, default: false, desc: 'Publication submission'
+        end
+
+        if User.reviewer_ids.include?(current_user.id) && params[:is_submit] == false
           es = Publication.where(element_type: 'Collection', state: 'pending').order("taggable_data->>'label' ASC")
         else
           if (current_user.type == 'Anonymous')
@@ -972,23 +976,24 @@ def save_comment(root, comment)
         end
 
         post do
+
           pub = Publication.find_by(element_id: params[:elementId], element_type: params[:elementType])
           declared_params = declared(params, include_missing: false)
 
-          et = ElementTag.find_by(taggable_id: declared_params[:elementId], taggable_type: declared_params[:elementType])
+          et = ElementTag.find_or_create_by(taggable_id: declared_params[:elementId], taggable_type: declared_params[:elementType])
           tagg_data = declared_params[:taggData] || {}
 
           tagg_data['author_ids'] = tagg_data['creators']&.map { |cr| cr['id'] }
           tagg_data['affiliation_ids'] = tagg_data['creators']&.map { |cr| cr['affiliationIds'] }.flatten.uniq
           tagg_data['affiliations'] = tagg_data['affiliations']&.select { |k, _| tagg_data['affiliation_ids'].include?(k.to_i) }
 
-          pub_taggable_data = pub.taggable_data
+          pub_taggable_data = pub.taggable_data || {}
           pub_taggable_data = pub_taggable_data.deep_merge(tagg_data || {})
           pub.update(taggable_data: pub_taggable_data)
 
-          et_taggable_data = et.taggable_data
-          pub_tag = et_taggable_data['publication']
-          pub_tag.deep_merge(tagg_data || {})
+          et_taggable_data = et.taggable_data || {}
+          pub_tag = et_taggable_data['publication'] || {}
+          pub_tag = pub_tag.deep_merge(tagg_data || {})
           et_taggable_data['publication'] = pub_tag
           et.update(taggable_data: et_taggable_data)
         end
diff --git a/app/api/helpers/embargo_helpers.rb b/app/api/helpers/embargo_helpers.rb
index 8fbcb9c5d..8c5145701 100644
--- a/app/api/helpers/embargo_helpers.rb
+++ b/app/api/helpers/embargo_helpers.rb
@@ -20,7 +20,7 @@ def refresh_embargo_metadata(col_id)
       dois = []
 
       (ps + pr)&.each do |pu|
-        if pu.taggable_data['scheme_only']  == true
+        if pu.taggable_data['scheme_only'] == true
         else
           eids.push(pu.id)
           dois.push({ id: pu.id, element_type: pu.element_type, element_id: pu.element_id, doi: pu.doi.full_doi }) if pu.doi.present?
@@ -31,6 +31,15 @@ def refresh_embargo_metadata(col_id)
           contributors = ctag["contributors"]
         end
       end
+
+      et = ElementTag.find_or_create_by(taggable_id: col_id, taggable_type: 'Collection')
+      et_taggable_data = et.taggable_data || {}
+      if et_taggable_data['publication'].present?
+        creators << et_taggable_data['publication']["creators"] if et_taggable_data['publication']["creators"] .present?
+        author_ids << et_taggable_data['publication']["author_ids"] if et_taggable_data['publication']["author_ids"] .present?
+        affiliation_ids << et_taggable_data['publication']["affiliation_ids"] if et_taggable_data['publication']["affiliation_ids"] .present?
+      end
+
       affiliations = Affiliation.where(id: affiliation_ids.flatten)
       affiliations_output = {}
       affiliations.each do |aff|
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 2dc12a69a..9078f5b05 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -159,14 +159,12 @@ class App extends Component {
   renderReviewModal() {
     const { showReviewModal, reviewLevel, isSubmitter, review, currentElement, elementType, btnAction } = this.state;
     const rrr = {};
-    console.log(this.state);
     rrr.reviewLevel = reviewLevel;
     rrr.isSubmitter = isSubmitter;
     rrr.review = review;
     rrr.btnAction = btnAction;
     rrr.elementType = elementType;
     rrr.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
-    console.log(rrr);
     return (
       <RepoReviewModal
         show={showReviewModal}
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index eb9848a26..87e35df8f 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -239,7 +239,7 @@ export default class PublishReactionModal extends Component {
   }
 
   loadBundles() {
-    EmbargoFetcher.fetchEmbargoCollections().then((result) => {
+    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
       const cols = result.repository || [];
       this.setState({ bundles: cols });
     });
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index d594058bb..27a4b530d 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -93,7 +93,7 @@ export default class PublishSampleModal extends Component {
   }
 
   loadBundles() {
-    EmbargoFetcher.fetchEmbargoCollections().then((result) => {
+    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
       const cols = result.repository || [];
       this.setState({ bundles: cols });
     });
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
index 85ccf97cd..d5048b1b0 100644
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ b/app/packs/src/components/common/RepoReviewAuthorsModal.js
@@ -243,17 +243,16 @@ export default class RepoReviewAuthorsModal extends React.Component {
       return true;
     }
 
-    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.id, elementType: element.elementType })
+    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.element_id || element.id, elementType: element.element_type || element.elementType })
       .then((result) => {
         if (result.error) {
           alert(result.error);
         } else {
           if (element.elementType === 'Reaction') {
             ReviewActions.displayReviewReaction(element.id);
-          } else {
+          } else if (element.elementType === 'Sample') {
             ReviewActions.displayReviewSample(element.id);
           }
-
           this.setState({ taggData: null, modalShow: false });
         }
       });
@@ -332,7 +331,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
   contributor() {
     const taggData = this.state.taggData || this.props.taggData;
-    const contributors = taggData.contributors || {};
+    const contributors = taggData?.contributors || {};
 
     const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
     const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
@@ -349,9 +348,9 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
   selectUsers() {
     const { selectedAuthors, collaborations } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const creators = taggData.creators || [];
-    const author_ids = taggData.author_ids || [];
+    const taggData = this.state.taggData || this.props.taggData || {};
+    const creators = taggData?.creators || [];
+    const author_ids = taggData?.author_ids || [];
 
     const affiliations = taggData.affiliations || [];
     let defaultSelectedAuthors = [];
@@ -414,9 +413,9 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
   render() {
     const { modalShow, countries, organizations, departments, fields } = this.state;
+    const { element, disabled } = this.props;
     const taggData = this.state.taggData || this.props.taggData;
-    const creators = taggData.creators || [];
-
+    const creators = taggData?.creators || [];
     if (this.props.schemeOnly === true) {
       return '';
     }
@@ -443,20 +442,14 @@ export default class RepoReviewAuthorsModal extends React.Component {
       </tbody>
     ));
 
+    let btn = (<Button style={{ marginLeft: '5px' }} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-users" />&nbsp;Publication Authors</Button>);
+    if (element?.element_type === 'Collection' || disabled === true) {
+      btn = (<Button disabled={disabled} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-plus" />&nbsp;Add Authors</Button>);
+    }
+
     return (
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}
-        >
-          <Button
-            onClick={() => this.setState({ modalShow: true })}
-            style={{ marginLeft: '5px' }}
-          >
-            <i className="fa fa-users" />&nbsp;
-            Publication Authors
-          </Button>
-        </OverlayTrigger>
+      <span>
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}>{btn}</OverlayTrigger>
         <Modal
           show={modalShow}
           onHide={this.handleClose}
@@ -506,25 +499,22 @@ export default class RepoReviewAuthorsModal extends React.Component {
             </ButtonToolbar>
           </Modal.Body>
         </Modal>
-      </div>
+      </span>
     );
   }
 }
 
 RepoReviewAuthorsModal.propTypes = {
-  element: PropTypes.shape({
-    id: PropTypes.number,
-    elementType: PropTypes.string
-  }).isRequired,
+  element: PropTypes.object.isRequired,
   isSubmitter: PropTypes.bool,
+  disabled: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   taggData: PropTypes.object.isRequired,
 };
 
-
-
 RepoReviewAuthorsModal.defaultProps = {
   isSubmitter: false,
   schemeOnly: false,
+  disabled: false,
   taggData: {}
-};
\ No newline at end of file
+};
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
index bf5201ed1..7afcf2c2d 100644
--- a/app/packs/src/components/fetchers/EmbargoFetcher.js
+++ b/app/packs/src/components/fetchers/EmbargoFetcher.js
@@ -117,9 +117,19 @@ export default class EmbargoFetcher {
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  static fetchEmbargoCollections() {
+  static fetchEmbargoCollections(isSubmit = false) {
     const api = '/api/v1/repository/embargo_list.json';
-    return fetch(api, { credentials: 'same-origin' })
+    return fetch(api, {
+      method: 'post',
+      credentials: 'same-origin',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        is_submit: isSubmit
+      })
+    })
       .then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
index 30a5495b4..f9c8e4225 100644
--- a/app/packs/src/components/stores/EmbargoStore.js
+++ b/app/packs/src/components/stores/EmbargoStore.js
@@ -107,7 +107,6 @@ class EmbargoStore {
   }
 
   handleGetEmbargoElements(results) {
-    console.log(results);
     const { elements, current_user, embargo_id } = results;
     this.setState({
       selectEmbargoId: embargo_id,
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 47336a448..a2c406f60 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -26,7 +26,7 @@ class PublicStore {
     this.articles = [];
     this.howto = {};
     this.howtos = [];
-    this.bundles = [];
+    // this.bundles = [];
     this.showReviewModal = false;
     this.reviewData = {};
 
@@ -72,6 +72,7 @@ class PublicStore {
     } else if (this.guestPage === 'review') {
       Aviator.navigate('/review', { silent: true });
     } else {
+      console.log('else..........');
       Aviator.navigate('/publications', { silent: true });
     }
   }
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index 270204aec..4894ed1a5 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -204,6 +204,7 @@ export default class RepoCollection extends Component {
             showModal={showInfoModal}
             selectEmbargo={selectEmbargo}
             onCloseFn={this.handleInfoClose}
+            editable={true}
           />
           <MetadataModal
             key="metadata-modal"
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 752108619..73b4f2723 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -9,6 +9,7 @@ import EmbargoStore from '../components/stores/EmbargoStore';
 import { ElAspect } from './RepoCommon';
 import { ConfirmModal } from '../components/common/ConfirmModal';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
+import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 
 const renderMenuItems = (bundles) => {
@@ -35,6 +36,7 @@ export default class RepoEmbargo extends Component {
       showConfirmModal: false,
       showMoveModal: false,
       showInfoModal: false,
+      showAuthorModal: false,
       showMetadataModal: false,
     };
     this.onChange = this.onChange.bind(this);
@@ -47,6 +49,8 @@ export default class RepoEmbargo extends Component {
     this.handleMoveClose = this.handleMoveClose.bind(this);
     this.handleInfoShow = this.handleInfoShow.bind(this);
     this.handleInfoClose = this.handleInfoClose.bind(this);
+    this.handleAuthorShow = this.handleAuthorShow.bind(this);
+    this.handleAuthorClose = this.handleAuthorClose.bind(this);
     this.handleMetadataShow = this.handleMetadataShow.bind(this);
     this.handleMetadataClose = this.handleMetadataClose.bind(this);
     this.loadBundles = this.loadBundles.bind(this);
@@ -67,7 +71,7 @@ export default class RepoEmbargo extends Component {
   onChange(state) {
     this.setState(prevState => ({ ...prevState, ...state }));
     if (this.state.selectEmbargo !== null) {
-      const vaildSelect = state.bundles.find(b => b.element_id === this.state.selectEmbargo.element_id);
+      const vaildSelect = this.state.bundles.find(b => b.element_id === this.state.selectEmbargo.element_id);
       if (typeof (vaildSelect) === 'undefined') {
         this.setState({ selectEmbargo: null });
       } else {
@@ -105,6 +109,14 @@ export default class RepoEmbargo extends Component {
     this.setState({ showInfoModal: false });
   }
 
+  handleAuthorShow() {
+    this.setState({ showAuthorModal: true });
+  }
+
+  handleAuthorClose() {
+    this.setState({ showAuthorModal: false });
+  }
+
   handleMetadataShow() {
     this.setState({ showMetadataModal: true });
   }
@@ -256,6 +268,13 @@ export default class RepoEmbargo extends Component {
           >
             <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
           </Button>
+          <RepoReviewAuthorsModal
+            element={selectEmbargo}
+            disabled={selectEmbargo === null || elements?.length === 0}
+            schemeOnly={false}
+            taggData={selectEmbargo?.taggable_data}
+          />
+
         </ButtonGroup>
       </div>
     );
@@ -359,6 +378,7 @@ export default class RepoEmbargo extends Component {
         >
           <RepoEmbargoDetails />
           { this.renderMoveModal() }
+
           <InfoModal
             showModal={showInfoModal}
             selectEmbargo={selectEmbargo}
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index 71e6c0a0f..8b18d7e87 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -68,7 +68,7 @@ const ElementDoi = (edois, isPublished) => {
   return (<div>{dois}</div>);
 };
 
-const InfoModal = ({ showModal, selectEmbargo, onCloseFn }) => {
+const InfoModal = ({ showModal, selectEmbargo, onCloseFn, editable=false }) => {
   const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};
   const affiliationMap = AffiliationMap(tag.affiliation_ids);
   const doi = tag.col_doi || '';

From 9ed4e19ccca24a68da2560eab45c9fffe68dfaef Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 4 Jan 2023 10:25:10 +0100
Subject: [PATCH 086/258] new content of project description of about

---
 app/packs/src/libHome/RepoAbout.js | 68 +++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/app/packs/src/libHome/RepoAbout.js b/app/packs/src/libHome/RepoAbout.js
index 056e1a8b3..e2ecd63cb 100644
--- a/app/packs/src/libHome/RepoAbout.js
+++ b/app/packs/src/libHome/RepoAbout.js
@@ -49,35 +49,53 @@ const CardAbout = () =>
     <div>
       <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
       <br />
-      <h1>Brief project description</h1>
+      <h2>Project description and mission</h2>
       <div style={{ textAlign: 'justify' }}>
-        <p>This project aims for the development of a freely available
-          infrastructure for research data management through the development
-          of two independent IT systems namely an electronic laboratory notebook
-          (ELN) and a chemistry web repository. With the tools that will be
-          established by our project group it will be possible to integrate
-          modern web-techniques into the routine work of academic researchers,
-           thereby increasing the amount of available data and improving the
-           quality of the information obtained and published.
+        <p>
+          The repository Chemotion was developed as a freely available infrastructure for the
+          publication of research data in order to increase the amount of available data and
+          to improve the quality of the information obtained and published.
+        </p>
+        <p>
+          The aim of Chemotion repository is to make a substantial contribution to securing
+          research results in a cost-efficient and simple manner, to support scientists, in
+          particular chemists, in their efforts to generate FAIR data and to increase the
+          visibility of research data in the domain of chemistry.
         </p>
-        <p>The aim of this project is to make a substantial contribution to
-          securing research results in a cost-effective and simple manner,
-          and to optimally network in particular chemists (initially with each
-            other and in a second step with other disciplines). The new model
-             provides a combination of recording and documentation as well as
-             publication and storage of data sets.
+        <p>
+          Free access to and free use of scientific data is one principle of this project
+          allowing and promoting collaborative work and scientific exchange among scientists.
+          We think that openly available data is the prerequisite for better science in terms
+          of more efficient and sustainable work but also with respect to a faster progress of
+          science in general.
         </p>
-        <p>The necessary IT structures for modern documentation of
-          research data are developed within the scope of this project,
-          will be summarized in an electronic laboratory notebook (ELN) and will
-           be provided and distributed as OPEN SOURCE. The ELN will be completed
-           by the establishment and hosting of the web-repository, for which a
-           direct connection to the ELN enables a fast and easy transfer of
-           selected research information.
+        <p>
+          To date, a lot of research data in chemistry is not made available due to technical
+          limitations and missing infrastructure. Chemotion repository can be used to overcome
+          these limitations - providing an option for the chemistry community to collect and
+          share data on chemical reactions and analytical data of chemical compounds. The
+          repository can be used to build data collections as an alternative to commercial
+          databases.
         </p>
-        <p>Free access and free use by academic researchers is
-          one principle of this project allowing and promoting collaborative
-          work and scientific exchange among scientists.
+        <p>
+          The mission of Chemotion repository is supported by its host institution KIT and
+          the science data center MoMaF as well as the National Research Data Infrastructure
+          NFDI4Chem.
+        </p>
+      </div>
+      <br />
+      <h2>Chemotion repository and related projects</h2>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          Chemotion repository is one of several projects that are built to support research
+          data management in chemistry.
+          It can be used as stand alone software for the publication of research data or it
+          can be used in combination with chemotion ELN (electronic lab notebook), an open source
+          software for the documentation of research data. Both system are being developed on the
+          same technological level which allows a combination of recording and documentation as
+          well as publication and storage of data sets. The ELN enables a fast and easy transfer
+          of selected research data to the repository as a requirement for efficient strategies
+          for the publication of research data.
         </p>
       </div>
       <br />

From 4b848630dccf2458f0240833db8c7e01897bece8 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 5 Jan 2023 11:50:04 +0100
Subject: [PATCH 087/258] update copyright statement

---
 app/packs/src/libHome/RepoAbout.js | 39 ++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/packs/src/libHome/RepoAbout.js b/app/packs/src/libHome/RepoAbout.js
index e2ecd63cb..3c0b7c04c 100644
--- a/app/packs/src/libHome/RepoAbout.js
+++ b/app/packs/src/libHome/RepoAbout.js
@@ -133,28 +133,41 @@ const CardAbout = () =>
       <h3>Copyright Notices</h3>
       <div style={{ textAlign: 'justify' }}>
         <p>
-          During the submission process, the submitter of a publication can choose,
-          between several CC licenses, which license to apply to the submitted work.
-          As the result, the content of this repository database
-          (including the submitted publication files) can be partly licensed under:
+          Unless otherwise stated, <i>chemotion-repository</i> and/or its contributors own
+          the intellectual property rights in the website and material on the website.
+          Subject to the license below, all these intellectual property rights are reserved.
+          <br />
+          Each content contributed and published by a user can be made available under one of
+          the following licenses that the contributing user has chosen during the publication
+          process:
         </p>
         <ul>
           <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">
-              <img src="/images/creative_common/cc-by-sa.svg" alt="cc-by-sa-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution-ShareAlike 4.0 International License (default),
+            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg" style={{ borderStyle: 'none' }} alt="CC BY SA" />{' '}
+              Creative Commons Attribution-ShareAlike 4.0 International License
+            </a>
           </li>
           <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
-              <img src="/images/creative_common/cc-by.svg" alt="cc-by-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution 4.0 International License, and
+            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by/4.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg" style={{ borderStyle: 'none' }} alt="CC BY" />{' '}
+              Creative Commons Attribution 4.0
+            </a>
           </li>
           <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
-              <img src="/images/creative_common/cc-zero.svg" alt="cc-zero" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Universal License
+            <a rel="license noopener noreferrer external" target="_blank" href="http://creativecommons.org/publicdomain/zero/1.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg" style={{ borderStyle: 'none' }} alt="CC0" />{' '}
+              CC0 1.0 Universal
+            </a>
           </li>
         </ul>
+        <p>
+          The contributing user may select the type of license during the publication process or
+          choose not to apply any license.
+          Contributors should be aware that some research data is not suitable for a licensing
+          option as it may be in the public domain. Public domain data should be added without a
+          license if this is apparent.
+        </p>
         <p>
           The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
           The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.

From 44f01fb2dfc9b85e68be25ef72fe7681c83ef52b Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 9 Jan 2023 07:40:25 +0100
Subject: [PATCH 088/258] linting

---
 app/packs/src/libHome/RepoDirective.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/libHome/RepoDirective.js b/app/packs/src/libHome/RepoDirective.js
index 8712595b1..de44abfb5 100644
--- a/app/packs/src/libHome/RepoDirective.js
+++ b/app/packs/src/libHome/RepoDirective.js
@@ -38,4 +38,4 @@ export default class RepoDirective extends React.Component {
       </Row>
     );
   }
-};
+}

From b1f8894481277ac6e04612305aa15ecb964a7612 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 4 Jan 2023 08:57:51 +0100
Subject: [PATCH 089/258] landing page updates: 1. the word 'published' next to
 the analyses (right side) should be given in black. 2. add a published link
 to the samples (left side) 3. in reaction table - space in header between
 name and unit - unit in squared brackets - ml should be mL - switch from g to
 mg as unit - bring yield in the sub header of the table

---
 app/assets/stylesheets/repo_home.scss         |  5 ++---
 .../src/libHome/RepoCardMoleculeArchive.js    |  9 +++++++--
 app/packs/src/libHome/RepoCommon.js           | 19 ++++++++++---------
 app/packs/src/libHome/RepoPubl.js             |  1 +
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index b7677e9f0..e7f605f1f 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -602,9 +602,8 @@ $bs-successcolor: #5cb85c;
       text-align: left;
       font-size: 1.5vmin;
       .tit {
-        color: $statisticcolor;
-        font-size: initial;
-        font-weight: initial;
+        font-size: 14px;
+        font-weight: 400;
         button {
           padding: unset;
         }
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
index 4796f49fb..4c9be0e6e 100644
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import CountUp from 'react-countup';
-// import Aviator from 'aviator';
+import Aviator from 'aviator';
 
 const RepoCardMoleculeArchive = (params) => {
   const { publishedStatics } = params;
@@ -29,7 +29,12 @@ const RepoCardMoleculeArchive = (params) => {
         <Col lg={12} md={12} sm={12} className="panel-heading dtl">
           <div className="rr">
             <div className="cnt">
-              <CountUp end={count} />
+              <CountUp end={count} />{' '}
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
+                  published
+                </Button>
+              </OverlayTrigger>
             </div>
             <div className="italic-desc">Compounds</div>
           </div>
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index ed0397c12..bf0e55468 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-multi-comp */
 import React, { Component } from 'react';
@@ -1168,7 +1169,7 @@ const ReactionTable = ({
           let title = null;
           if (currentType !== sample.mat_group) {
             currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+            title = (currentType === 'products') ? (<tr><td colSpan="6"><b>{matType}</b></td><td style={{ fontWeight: 'bold', textAlign: 'center' }}>Yield</td></tr>) : (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
           }
           return (
             <tbody key={i}>
@@ -1177,7 +1178,7 @@ const ReactionTable = ({
                 <td style={{ width: '26%' }}>{label}</td>
                 <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
                 <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1000, 3)}</td>
                 <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
                 <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
                 <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
@@ -1195,10 +1196,10 @@ const ReactionTable = ({
           <th>IUPAC</th>
           <th>Formula</th>
           <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+          <th style={{ textAlign: 'center' }}>Amount [mg]</th>
+          <th style={{ textAlign: 'center' }}>Volume [mL]</th>
+          <th style={{ textAlign: 'center' }}>Amount [mmol]</th>
+          <th style={{ textAlign: 'center' }}>Equiv</th>
         </tr>
       </thead>
       {dataRows}
@@ -1252,7 +1253,7 @@ const ReactionRinChiKey = ({
       </Panel>
     </span>
   );
-}
+};
 
 const ReactionProperties = ({
   reaction, toggle, show, bodyAttrs
@@ -1280,7 +1281,7 @@ const ReactionProperties = ({
       </Panel>
     </span>
   );
-}
+};
 
 const ReactionTlc = ({
   reaction, toggle, show, bodyAttrs
@@ -1313,7 +1314,7 @@ const ReactionTlc = ({
       </Panel>
     </span>
   );
-}
+};
 
 const InputFieldYield = (props) => {
   return (
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index dbf2e2e3c..8d4a84a08 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -24,6 +24,7 @@ import RepoNavListTypes from './RepoNavListTypes';
 const renderMoleculeArchive =
   (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
     <RepoMoleculeArchive
+      key={molecule.id}
       molecule={molecule}
       currentElement={currentElement}
       isPubElement={isPubElement}

From 5f2696085b954ea84bd691935ed8535907c43d52 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 2 Jan 2023 10:37:35 +0100
Subject: [PATCH 090/258] rename terms of service to directive

---
 app/packs/src/libHome/NavFooter.js | 2 +-
 app/packs/src/libHome/NavHead.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/libHome/NavFooter.js b/app/packs/src/libHome/NavFooter.js
index 77d7acdcf..cf200e9c2 100644
--- a/app/packs/src/libHome/NavFooter.js
+++ b/app/packs/src/libHome/NavFooter.js
@@ -14,7 +14,7 @@ const NavFooter = () => {
         About
       </NavItem>
       <NavItem eventKey="24" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/directive')} >
-        Terms of service
+        Directive
       </NavItem>
     </Nav>
   );
diff --git a/app/packs/src/libHome/NavHead.js b/app/packs/src/libHome/NavHead.js
index b36f5007a..fce7395e5 100644
--- a/app/packs/src/libHome/NavHead.js
+++ b/app/packs/src/libHome/NavHead.js
@@ -18,7 +18,7 @@ const NavHead = () => {
           About
         </MenuItem>
         <MenuItem eventKey="24" href="/home/directive">
-          Terms of service
+          Directive
         </MenuItem>
       </NavDropdown>
     </Navbar.Brand>

From cfacf0073b49a045d183943053635fac4a76146a Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 2 Feb 2023 09:43:25 +0100
Subject: [PATCH 091/258] fix dataset doi cannot be resolved issue

---
 .../src/components/stores/PublicStore.js      |  7 +++---
 app/packs/src/libHome/Home.js                 | 22 ++++++++-----------
 app/packs/src/libHome/RepoElementDetails.js   |  3 ++-
 app/packs/src/libHome/RepoPubl.js             |  7 ++----
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index a2c406f60..289919fa5 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -72,7 +72,6 @@ class PublicStore {
     } else if (this.guestPage === 'review') {
       Aviator.navigate('/review', { silent: true });
     } else {
-      console.log('else..........');
       Aviator.navigate('/publications', { silent: true });
     }
   }
@@ -146,12 +145,14 @@ class PublicStore {
 
   handleOpenRepositoryPage(page) {
     const pageType = page.split('=');
-    this.setState({ guestPage: pageType[0], currentElement: null, listType: pageType[1] });
+    this.setState({
+      guestPage: pageType[0], currentElement: null, listType: pageType[1], elementType: null
+    });
   }
 
   handleDisplayDataset(result) {
     this.setState({
-      guestPage: 'publications',
+      guestPage: 'dataset',
       elementType: 'dataset',
       queryId: result.id,
       currentElement: result.dataset
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 3c69c43f0..ce5fc9d7d 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
 import { Grid, Row } from 'react-bootstrap';
 import Aviator from 'aviator';
 
-import WelcomeMessage from '../components/WelcomeMessage';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
+import WelcomeMessage from '../components/WelcomeMessage';
 
 import initPublicRoutes from './homeRoutes';
 
@@ -28,6 +28,7 @@ import RepoHowToReader from './RepoHowToReader';
 import RepoHowToEditor from './RepoHowToEditor';
 
 import PublicStore from '../components/stores/PublicStore';
+import ReviewStore from '../components/stores/ReviewStore';
 import RepoElementDetails from './RepoElementDetails';
 import NavFooter from './NavFooter';
 import LoadingModal from '../components/common/LoadingModal';
@@ -52,12 +53,16 @@ class Home extends Component {
 
   componentDidMount() {
     PublicStore.listen(this.onChange);
+    ReviewStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+    ReviewStore.unlisten(this.onChange);
   }
 
   onChange(publicState) {
-    if (this.state.guestPage !== publicState.guestPage) {
-      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
-    }
+    this.setState(prevState => ({ ...prevState, ...publicState }));
   }
 
   renderGuestPage() {
@@ -105,21 +110,13 @@ class Home extends Component {
   renderNavFooter() {
     switch (this.state.guestPage) {
       case 'publications':
-        return <span />;
       case 'review':
-        return <span />;
       case 'embargo':
-        return <span />;
       case 'newseditor':
-        return <span />;
       case 'newsreader':
-        return <span />;
       case 'newsroom':
-        return <span />;
       case 'howtoeditor':
-        return <span />;
       case 'howtoreader':
-        return <span />;
       case 'howto':
         return <span />;
       default:
@@ -154,7 +151,6 @@ class Home extends Component {
 }
 
 const HomeWithDnD = DragDropContext(HTML5Backend)(Home);
-// $(document).ready(function() {
 document.addEventListener('DOMContentLoaded', () => {
   const domElement = document.getElementById('Home');
   if (domElement) {
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
index 187fe41f7..3b9030b77 100644
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ b/app/packs/src/libHome/RepoElementDetails.js
@@ -8,7 +8,8 @@ export default class RepoElementDetails extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentElement: {}
+      currentElement: PublicStore.getState().currentElement,
+      elementType: PublicStore.getState().elementType
     };
     this.onStoreChange = this.onStoreChange.bind(this);
   }
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 8d4a84a08..27858137d 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -671,7 +671,7 @@ export default class RepoPubl extends Component {
 
     return (
       <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={isPubElement === true ? 4 : 12} >
+        <Col md={isPubElement === true ? 4 : 12}>
           <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
             <Navbar.Form pullLeft>
               {this.renderSearch()}
@@ -698,10 +698,7 @@ export default class RepoPubl extends Component {
             </Row>
           </div>
         </Col>
-        <Col
-          md={isPubElement === true}
-          // style={this.state.currentElement ? {} : { display: 'none' }}
-        >
+        <Col md={isPubElement === true ? 8 : 0}>
           <div className="public-element">
             <RepoElementDetails />
           </div>

From 1711436c0cbff79720562171aa215a04b35fb3b5 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 2 Feb 2023 15:15:00 +0100
Subject: [PATCH 092/258] add embargo link on review and copy function

---
 app/api/chemotion/repository_api.rb | 3 ++-
 app/packs/src/libHome/RepoSample.js | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index e22c77542..70422e3a8 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -553,6 +553,7 @@ def add_submission_history(root)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
           entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
+          entities[:embargo] = find_embargo_collection(publication)
           {
             reaction: entities,
             isSubmitter: publication.published_by == current_user.id,
@@ -586,7 +587,7 @@ def add_submission_history(root)
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
           # embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{sample.id}")&.first&.label
-
+          review_sample[:embargo] = find_embargo_collection(publication)
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: review_sample,
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index a82c9aef0..7b91a1054 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -128,6 +128,9 @@ export default class RepoSample extends Component {
     const userInfo = sample.pub_info || '';
     const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
     let embargo = (<span />);
+    let colDoiPrefix = (sample?.doi || '');
+    colDoiPrefix = typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
+    colDoiPrefix = colDoiPrefix.split('/')[0];
     if (sample.embargo) {
       embargo = (
         <span>
@@ -135,7 +138,7 @@ export default class RepoSample extends Component {
           <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
             <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
           </Button>
-          <ClipboardCopyBtn text={sample.embargo} />
+          <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`} tooltip="retrieve and copy collection DOI" />
         </span>
       );
     }

From 417e8e506a6de5901035d2dcf036ad3783e3c077 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 7 Feb 2023 18:01:07 +0100
Subject: [PATCH 093/258] fix routing

---
 app/api/chemotion/public_api.rb               |  8 +-
 app/api/chemotion/repository_api.rb           | 12 ++-
 app/api/helpers/embargo_helpers.rb            |  2 +-
 .../src/components/actions/EmbargoActions.js  |  2 -
 .../common/RepoReviewAuthorsModal.js          |  3 +-
 .../src/components/stores/EmbargoStore.js     | 22 ++---
 app/packs/src/components/stores/RStore.js     | 34 +++++++
 .../src/components/stores/ReviewStore.js      | 32 ++++++-
 app/packs/src/libHome/Home.js                 | 11 ++-
 app/packs/src/libHome/RepoEmbargo.js          | 94 ++++++++++++++-----
 app/packs/src/libHome/RepoEmbargoDetails.js   | 11 +--
 app/packs/src/libHome/RepoReactionDetails.js  |  3 +-
 app/packs/src/libHome/RepoReview.js           |  5 +-
 app/packs/src/libHome/RepoSample.js           |  3 +-
 14 files changed, 176 insertions(+), 66 deletions(-)
 create mode 100644 app/packs/src/components/stores/RStore.js

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index d06e6e6ad..aaf35bc67 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -660,10 +660,10 @@ def query_embargo(name)
         helpers RepositoryHelpers
         after_validation do
           @embargo_collection = Collection.find(params[:collection_id])
-          pub = @embargo_collection.publication
-          error!('401 Unauthorized', 401) if pub.nil?
+          @pub = @embargo_collection.publication
+          error!('401 Unauthorized', 401) if @pub.nil?
 
-          if pub.state != 'completed'
+          if @pub.state != 'completed'
             error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id || current_user.type == 'Anonymous')
           end
         end
@@ -690,7 +690,7 @@ def query_embargo(name)
               published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
             )
           end
-          { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
+          { elements: elements, embargo: @pub, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 70422e3a8..d2e571101 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -390,7 +390,7 @@ def add_submission_history(root)
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
           elements.push(
             id: e.element_id, svg: svg_file, type: element_type, title: title, checklist: checklist || {}, isReviewer: User.reviewer_ids.include?(current_user&.id) || false,
-            published_by: u&.name, submitter_id: u&.id, submit_at: e.created_at, state: e.state, embargo: find_embargo_collection(e), scheme_only: scheme_only
+            published_by: u&.name, submitter_id: u&.id, submit_at: e.created_at, state: e.state, embargo: find_embargo_collection(e).label, scheme_only: scheme_only
           )
         end
         { elements: elements }
@@ -553,11 +553,14 @@ def add_submission_history(root)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
           entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
-          entities[:embargo] = find_embargo_collection(publication)
+          embargo = find_embargo_collection(publication)
+          entities[:embargo] = embargo.label
+          entities[:embargoId] = embargo.id
           {
             reaction: entities,
             isSubmitter: publication.published_by == current_user.id,
             reviewLevel: repo_review_level(params[:id], 'Reaction'),
+            selectEmbargo: Publication.find_by(element_type: 'Collection', element_id: embargo&.id),
             pub_name: published_user&.name || ''
           }
         end
@@ -587,13 +590,16 @@ def add_submission_history(root)
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
           # embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{sample.id}")&.first&.label
-          review_sample[:embargo] = find_embargo_collection(publication)
+          embargo = find_embargo_collection(publication)
+          review_sample[:embargo] = embargo&.label
+          review_sample[:embargoId] = embargo&.id
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: review_sample,
             publication: publication,
             literatures: literatures,
             analyses: containers,
+            selectEmbargo: Publication.find_by(element_type: 'Collection', element_id: embargo&.id),
             doi: Entities::DoiEntity.represent(sample.doi, serializable: true),
             pub_name: published_user&.name,
             isSubmitter: publication.published_by == current_user.id,
diff --git a/app/api/helpers/embargo_helpers.rb b/app/api/helpers/embargo_helpers.rb
index 8c5145701..8f387823d 100644
--- a/app/api/helpers/embargo_helpers.rb
+++ b/app/api/helpers/embargo_helpers.rb
@@ -89,7 +89,7 @@ def fetch_embargo_collection(cid, current_user)
 
   def find_embargo_collection(root_publication)
     has_embargo_col = root_publication.element&.collections&.select { |c| c['ancestry'].to_i == User.find(root_publication.published_by).publication_embargo_collection.id }
-    has_embargo_col && has_embargo_col.length > 0 ? has_embargo_col.first.label : ''
+    has_embargo_col && has_embargo_col.length > 0 ? has_embargo_col.first : OpenStruct.new(label: '')
   end
 
   def create_embargo()
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/components/actions/EmbargoActions.js
index 97874b522..1d8cfe0c9 100644
--- a/app/packs/src/components/actions/EmbargoActions.js
+++ b/app/packs/src/components/actions/EmbargoActions.js
@@ -36,8 +36,6 @@ class EmbargoActions {
     }
   }
 
-
-
   moveEmbargo(id, newEmbargo, element) {
     return (dispatch) => {
       EmbargoFetcher.moveEmbargo(id, newEmbargo, element)
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
index d5048b1b0..d2f9d4c5c 100644
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ b/app/packs/src/components/common/RepoReviewAuthorsModal.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Checkbox, Table } from 'react-bootstrap';
@@ -505,7 +506,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
 }
 
 RepoReviewAuthorsModal.propTypes = {
-  element: PropTypes.object.isRequired,
+  element: PropTypes.object,
   isSubmitter: PropTypes.bool,
   disabled: PropTypes.bool,
   schemeOnly: PropTypes.bool,
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
index f9c8e4225..7d6893ab2 100644
--- a/app/packs/src/components/stores/EmbargoStore.js
+++ b/app/packs/src/components/stores/EmbargoStore.js
@@ -1,8 +1,7 @@
 import Aviator from 'aviator';
 import alt from '../alt';
 import EmbargoActions from '../actions/EmbargoActions';
-import ElementActions from '../actions/ElementActions';
-import UIActions from '../actions/UIActions';
+import PublicActions from '../actions/PublicActions';
 
 class EmbargoStore {
   constructor() {
@@ -15,28 +14,30 @@ class EmbargoStore {
     this.element = null;
     // this.elements = [];
 
-
     this.bindListeners({
       handleEmbargoMove: EmbargoActions.moveEmbargo,
       handleEmbargoAssign: EmbargoActions.assignEmbargo,
       handleEmbargoRelease: [EmbargoActions.releaseEmbargo, EmbargoActions.deleteEmbargo],
       handleFetchBundles: EmbargoActions.fetchEmbargoBundle,
-      handledisplayEmbargo: EmbargoActions.displayEmbargo,
-      handleRefreshEmbargoBundles: EmbargoActions.getEmbargoBundle,
       handleDisplayEmbargoElement: EmbargoActions.displayReviewEmbargo,
       handleGetEmbargoElements: EmbargoActions.getEmbargoElements,
       handleGetEmbargoElement: EmbargoActions.getEmbargoElement,
+      handleClose: PublicActions.close,
     });
   }
 
+  handleClose({ deleteEl }) {
+    this.setState({ currentElement: null });
+  }
+
   handleDisplayEmbargoElement(result) {
     const publication = result?.element?.publication || {};
-
     if (result?.element?.reviewLevel === 0) {
       Aviator.navigate('/home/');
     } else {
       const elementType = (result.element.sample ? 'sample' : 'reaction');
       this.setState({
+        selectEmbargo: result.element.selectEmbargo,
         guestPage: 'embargo',
         elementType,
         queryId: result.id,
@@ -48,10 +49,6 @@ class EmbargoStore {
     }
   }
 
-  handledisplayEmbargo(results) {
-    console.log(results);
-  }
-
   handleGetEmbargoElement(results) {
     this.setState({ element: results })
   }
@@ -102,14 +99,15 @@ class EmbargoStore {
     // eslint-disable-next-line camelcase
     const { current_user } = result;
     this.setState({
-      bundles, current_user, elements: [], element: null
+      guestPage: 'embargo', bundles, current_user, elements: [], element: null
     });
   }
 
   handleGetEmbargoElements(results) {
-    const { elements, current_user, embargo_id } = results;
+    const { elements, current_user, embargo_id, embargo } = results;
     this.setState({
       selectEmbargoId: embargo_id,
+      selectEmbargo: embargo,
       elements,
       element: null,
       currentUser: current_user
diff --git a/app/packs/src/components/stores/RStore.js b/app/packs/src/components/stores/RStore.js
new file mode 100644
index 000000000..f8ca841ff
--- /dev/null
+++ b/app/packs/src/components/stores/RStore.js
@@ -0,0 +1,34 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import ReviewActions from '../actions/ReviewActions';
+import EmbargoActions from '../actions/EmbargoActions';
+
+class RStore {
+  constructor() {
+    this.bindListeners({
+      navigateReview: [ReviewActions.displayReviewSample, ReviewActions.displayReviewReaction],
+      navigateEmbargoReview: [EmbargoActions.displayReviewEmbargo],
+    });
+  }
+
+  navigate(page, result) {
+    const elementType = (result.element.sample ? 'sample' : 'reaction');
+    const subPage = page === 'embargo' ? elementType : `review_${elementType}`;
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({ guestPage: page });
+      Aviator.navigate(`/${page}/${subPage}/${result.id}`, { silent: true });
+    }
+  }
+
+  navigateEmbargoReview(result) {
+    this.navigate('embargo', result);
+  }
+
+  navigateReview(result) {
+    this.navigate('review', result);
+  }
+}
+
+export default alt.createStore(RStore, 'RStore');
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index e4c2e9317..4d14f4c72 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -2,8 +2,7 @@ import Aviator from 'aviator';
 import alt from '../alt';
 import ReviewActions from '../actions/ReviewActions';
 import PublicActions from '../actions/PublicActions';
-import ElementActions from '../actions/ElementActions';
-import UIActions from '../actions/UIActions';
+import EmbargoActions from '../actions/EmbargoActions';
 
 class ReviewStore {
   constructor() {
@@ -29,6 +28,8 @@ class ReviewStore {
       handleReviewUpdate: ReviewActions.updateReview,
       handleFetchSample: ReviewActions.fetchSample,
       handleClose: PublicActions.close,
+      handleRefreshEmbargoBundles: EmbargoActions.getEmbargoBundle,
+      handleEmbargoAssign: EmbargoActions.assignEmbargo,
     });
   }
 
@@ -38,6 +39,33 @@ class ReviewStore {
     });
   }
 
+  handleEmbargoAssign(result) {
+    if (result.error) {
+      alert(result.error);
+    } else {
+      alert(result.message);
+      // refresh embargo list
+      EmbargoActions.getEmbargoBundle();
+      // refresh element list
+      PublicActions.getElements(
+        this.selectType, this.selectState, this.searchType,
+        this.searchValue, this.page, this.perPage
+      );
+    }
+  }
+
+  handleRefreshEmbargoBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push(col);
+      });
+    }
+    this.setState({ bundles, current_user });
+  }
+
   handleUnitsSystem(result) {
     this.setState({ unitsSystem: result });
   }
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index ce5fc9d7d..131a826fd 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -28,7 +28,7 @@ import RepoHowToReader from './RepoHowToReader';
 import RepoHowToEditor from './RepoHowToEditor';
 
 import PublicStore from '../components/stores/PublicStore';
-import ReviewStore from '../components/stores/ReviewStore';
+import RStore from '../components/stores/RStore';
 import RepoElementDetails from './RepoElementDetails';
 import NavFooter from './NavFooter';
 import LoadingModal from '../components/common/LoadingModal';
@@ -53,16 +53,19 @@ class Home extends Component {
 
   componentDidMount() {
     PublicStore.listen(this.onChange);
-    ReviewStore.listen(this.onChange);
+    RStore.listen(this.onChange);
   }
 
   componentWillUnmount() {
     PublicStore.unlisten(this.onChange);
-    ReviewStore.unlisten(this.onChange);
+    RStore.unlisten(this.onChange);
   }
 
   onChange(publicState) {
-    this.setState(prevState => ({ ...prevState, ...publicState }));
+    if ((publicState.guestPage && publicState.guestPage !== this.state.guestPage)
+    || (publicState.listType && publicState.listType !== this.state.listType)) {
+      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
+    }
   }
 
   renderGuestPage() {
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 73b4f2723..212dd55ba 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -3,7 +3,6 @@ import { Table, Col, Row, Navbar, MenuItem, ButtonGroup, Button, ButtonToolbar,
 import Select from 'react-select';
 import { filter } from 'lodash';
 import RepoEmbargoDetails from './RepoEmbargoDetails';
-import PublicStore from '../components/stores/PublicStore';
 import EmbargoActions from '../components/actions/EmbargoActions';
 import EmbargoStore from '../components/stores/EmbargoStore';
 import { ElAspect } from './RepoCommon';
@@ -53,31 +52,84 @@ export default class RepoEmbargo extends Component {
     this.handleAuthorClose = this.handleAuthorClose.bind(this);
     this.handleMetadataShow = this.handleMetadataShow.bind(this);
     this.handleMetadataClose = this.handleMetadataClose.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
     this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onChange);
     EmbargoStore.listen(this.onChange);
-    this.loadBundles();
+    EmbargoActions.fetchEmbargoBundle();
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
     EmbargoStore.unlisten(this.onChange);
   }
 
   onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-    if (this.state.selectEmbargo !== null) {
-      const vaildSelect = this.state.bundles.find(b => b.element_id === this.state.selectEmbargo.element_id);
-      if (typeof (vaildSelect) === 'undefined') {
-        this.setState({ selectEmbargo: null });
+    let { selectEmbargo, elements, current_user, currentElement, bundles } = this.state;
+    // console.log(currentElement);
+    if (state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id) {
+      ({ selectEmbargo } = state);
+    }
+    if (state.elements) { ({ elements } = state); }
+    if (state.current_user) { ({ current_user } = state); }
+    if (!state.currentElement && !this.state.currentElement) {
+      // console.log('111');
+      currentElement = null;
+    } else {
+      // console.log(JSON.stringify(state.currentElement));
+      ({ currentElement } = state);
+    }
+    if (state.bundles) { ({ bundles } = state); }
+    console.log('onChange====================');
+    // console.log(state.selectEmbargo);
+    // console.log(state.selectEmbargo?.id);
+    console.log('1');
+    console.log(selectEmbargo?.id !== this.state.selectEmbargo?.id);
+
+    console.log(selectEmbargo?.id);
+    console.log(state.selectEmbargo?.id);
+    console.log(this.state.selectEmbargo?.id);
+    // console.log((state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id));
+    console.log('2');
+    console.log(state.elements?.length);
+    console.log(this.state.elements?.length);
+    // console.log((elements?.length !== this.state.elements?.length));
+    console.log(JSON.stringify(elements) !== JSON.stringify(this.state.elements));
+    console.log('3');
+    console.log((current_user?.id !== this.state.current_user?.id));
+    console.log('4');
+    console.log((currentElement !== this.state.currentElement));
+    // console.log(currentElement);
+    // console.log(state.currentElement);
+    // console.log(this.state.currentElement);
+    console.log('5');
+    // console.log(bundles);
+    // console.log(state.bundles);
+    // console.log(this.state.bundles);
+    console.log((bundles !== this.state.bundles));
+
+    // if (!currentElement) {
+    //   console.log('no currentElement');
+    //   this.setState(currentElement);
+    // } else
+    if ((selectEmbargo?.id !== this.state.selectEmbargo?.id)
+      || (JSON.stringify(elements) !== JSON.stringify(this.state.elements))
+      || (current_user?.id !== this.state.current_user?.id)
+      || (currentElement !== this.state.currentElement)
+      || (bundles !== this.state.bundles)) {
+      console.log('update state');
+      const validSelect = bundles?.find(b => b.element_id === selectEmbargo?.element_id);
+      // console.log(validSelect);
+      if (typeof (validSelect) === 'undefined') {
+        console.log('no selected embargo');
+        this.setState(prevState => ({ ...prevState, selectEmbargo: null, elements, current_user, currentElement, bundles }));
       } else {
-        EmbargoFetcher.refreshEmbargo(this.state.selectEmbargo || {})
+        EmbargoFetcher.refreshEmbargo(selectEmbargo || {})
           .then((result) => {
-            if (!result.error) this.setState({ selectEmbargo: result });
+            console.log('refreshEmbargo');
+            // console.log(JSON.stringify(currentElement))
+            console.log(result);
+            if (!result.error) this.setState(prevState => ({ ...prevState, selectEmbargo: result, elements, current_user, currentElement, bundles }), EmbargoActions.getEmbargoElements(selectEmbargo.element_id));
           }).catch((errorMessage) => {
             console.log(errorMessage);
           });
@@ -132,10 +184,11 @@ export default class RepoEmbargo extends Component {
   }
 
   handleElementSelection(eventKey, event) {
-    const { bundles } = this.state;
-    const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
-    this.setState({ selectEmbargo });
-    EmbargoActions.getEmbargoElements(eventKey.value);
+    if (eventKey) {
+      const { bundles } = this.state;
+      const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
+      this.setState({ selectEmbargo }, EmbargoActions.getEmbargoElements(eventKey.value));
+    }
   }
 
   handleEmbargoAccount() {
@@ -183,10 +236,6 @@ export default class RepoEmbargo extends Component {
     this.setState({ showMoveModal: false });
   }
 
-  loadBundles() {
-    EmbargoActions.fetchEmbargoBundle();
-  }
-
 
   rendeActionBtn(bundles) {
     const { selectEmbargo, elements, current_user } = this.state;
@@ -239,7 +288,6 @@ export default class RepoEmbargo extends Component {
     const { selectEmbargo, elements, current_user } = this.state;
     const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
     const options = [];
-
     bundles?.forEach((col) => {
       const tag = col.taggable_data || {};
       options.push({ value: col.element_id, name: tag.label, label: tag.label });
@@ -252,6 +300,7 @@ export default class RepoEmbargo extends Component {
           onChange={e => this.handleElementSelection(e)}
           options={options}
           style={{ width: '180px' }}
+          clearable={false}
         />
         <ButtonGroup>
           <Button
@@ -347,7 +396,6 @@ export default class RepoEmbargo extends Component {
     const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
     const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
     const owner = (selectEmbargo && selectEmbargo.published_by) || 0;
-
     return (
       <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
         <Col md={currentElement ? 4 : 12} >
@@ -376,7 +424,7 @@ export default class RepoEmbargo extends Component {
           className="review-element"
           md={currentElement ? 8 : 0}
         >
-          <RepoEmbargoDetails />
+          <RepoEmbargoDetails currentElement={currentElement} />
           { this.renderMoveModal() }
 
           <InfoModal
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
index 10f579beb..ee00a0466 100644
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ b/app/packs/src/libHome/RepoEmbargoDetails.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
 import EmbargoStore from '../components/stores/EmbargoStore';
-import ReviewStore from '../components/stores/ReviewStore';
 import RepoReactionDetails from './RepoReactionDetails';
 import RepoSampleDetails from './RepoSampleDetails';
 
@@ -16,15 +14,11 @@ export default class RepoEmbargoDetails extends Component {
   }
 
   componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
     EmbargoStore.listen(this.onStoreChange);
-    // ReviewStore.listen(this.onStoreChange);
   }
 
   componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-    EmbargoStore.listen(this.onStoreChange);
-    // ReviewStore.listen(this.onStoreChange);
+    EmbargoStore.unlisten(this.onStoreChange);
   }
 
   onStoreChange(state) {
@@ -32,7 +26,8 @@ export default class RepoEmbargoDetails extends Component {
   }
 
   switchTypeRender() {
-    const { currentElement, elementType } = this.state;
+    const { elementType } = this.state;
+    const { currentElement } = this.props;
 
     if (typeof (currentElement) === 'undefined' || !currentElement) {
       return <span />;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index c9c88241b..e21a1deba 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -448,10 +448,11 @@ export default class RepoReactionDetails extends Component {
     let embargo = (<span />);
     const colDoiPrefix = isPublished ? taggData.doi?.split('/')[0] : doi?.full_doi?.split('/')[0];
     if (reaction.embargo) {
+      const embargoLink = isPublished ? `/inchikey/collection/${reaction.embargo}` : `/embargo/reaction/${reaction.id}`;
       embargo = (
         <span>
           <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
-          <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${reaction.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+          <Button key="embargo-link-btn" bsStyle="link" href={embargoLink} target="_blank" style={{ padding: '0px 0px' }}>
             <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
           </Button>
           <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`} tooltip="retrieve and copy collection DOI" />
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 09272529d..3278e3cdf 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -8,7 +8,6 @@ import RepoReviewDetails from './RepoReviewDetails';
 import ReviewActions from '../components/actions/ReviewActions';
 import EmbargoActions from '../components/actions/EmbargoActions';
 import ReviewStore from '../components/stores/ReviewStore';
-import EmbargoStore from '../components/stores/EmbargoStore';
 import UserStore from '../components/stores/UserStore';
 import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
 import LoadingActions from '../components/actions/LoadingActions';
@@ -100,15 +99,13 @@ export default class RepoReview extends Component {
 
   componentDidMount() {
     ReviewStore.listen(this.onChange);
-    EmbargoStore.listen(this.onChange);
     ReviewActions.getElements.defer();
-    EmbargoActions.getEmbargoBundle();
+    EmbargoActions.getEmbargoBundle(); // added to ReviewStore
     ReviewActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
     ReviewStore.unlisten(this.onChange);
-    EmbargoStore.unlisten(this.onChange);
   }
 
   onChange(state) {
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 7b91a1054..583b5c166 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -132,10 +132,11 @@ export default class RepoSample extends Component {
     colDoiPrefix = typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
     colDoiPrefix = colDoiPrefix.split('/')[0];
     if (sample.embargo) {
+      const embargoLink = isPublished ? `/inchikey/collection/${sample.embargo}` : `/embargo/sample/${sample.id}`;
       embargo = (
         <span>
           <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
-          <Button key="embargo-link-btn" bsStyle="link" href={`/inchikey/collection/${sample.embargo}`} target="_blank" style={{ padding: '0px 0px' }}>
+          <Button key="embargo-link-btn" bsStyle="link" href={embargoLink} target="_blank" style={{ padding: '0px 0px' }}>
             <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
           </Button>
           <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`} tooltip="retrieve and copy collection DOI" />

From ece9e7424431cd954349b384305f5a8c85d63bc8 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 7 Feb 2023 21:02:36 +0100
Subject: [PATCH 094/258] fix collection routing and info modal

---
 app/api/chemotion/public_api.rb               |  2 +-
 .../src/components/fetchers/EmbargoFetcher.js | 24 +++-----
 .../src/components/stores/PublicStore.js      |  1 -
 .../src/components/stores/ReviewStore.js      |  2 +-
 app/packs/src/libHome/RepoCollection.js       | 54 ++++++++++++------
 .../src/libHome/RepoCollectionDetails.js      | 17 +-----
 app/packs/src/libHome/RepoEmbargo.js          | 10 ----
 app/packs/src/libHome/RepoEmbargoModal.js     | 55 +++++++++----------
 8 files changed, 75 insertions(+), 90 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index aaf35bc67..1b12469d7 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -664,7 +664,7 @@ def query_embargo(name)
           error!('401 Unauthorized', 401) if @pub.nil?
 
           if @pub.state != 'completed'
-            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id || current_user.type == 'Anonymous')
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || @pub.published_by == current_user.id || current_user.type == 'Anonymous')
           end
         end
         get do
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
index 7afcf2c2d..f74ffe9ae 100644
--- a/app/packs/src/components/fetchers/EmbargoFetcher.js
+++ b/app/packs/src/components/fetchers/EmbargoFetcher.js
@@ -1,7 +1,6 @@
 import 'whatwg-fetch';
 
 export default class EmbargoFetcher {
-
   static fetchEmbargoElements(id) {
     const api = `/api/v1/public/col_list.json?collection_id=${id}`;
     return fetch(api, { credentials: 'same-origin' })
@@ -10,7 +9,8 @@ export default class EmbargoFetcher {
   }
 
   static fetchEmbargoElement(cid, el) {
-    const api = `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
+    const api =
+      `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
     return fetch(api, { credentials: 'same-origin' })
       .then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
@@ -23,7 +23,6 @@ export default class EmbargoFetcher {
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
-
   static deleteEmbargo(id) {
     const api = '/api/v1/repository/embargo/delete';
     return fetch(api, {
@@ -37,6 +36,7 @@ export default class EmbargoFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+
   static moveEmbargo(id, newEmbargo, element) {
     const api = '/api/v1/repository/embargo/move';
     return fetch(api, {
@@ -50,6 +50,7 @@ export default class EmbargoFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+
   static refreshEmbargo(emb) {
     const api = '/api/v1/repository/embargo/refresh';
     return fetch(api, {
@@ -80,10 +81,7 @@ export default class EmbargoFetcher {
     return fetch(api, {
       credentials: 'same-origin',
       method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
       body: JSON.stringify({ collection_id: id })
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
@@ -94,10 +92,7 @@ export default class EmbargoFetcher {
     return fetch(api, {
       credentials: 'same-origin',
       method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
       body: JSON.stringify({ collection_id: id })
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
@@ -122,10 +117,7 @@ export default class EmbargoFetcher {
     return fetch(api, {
       method: 'post',
       credentials: 'same-origin',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
       body: JSON.stringify({
         is_submit: isSubmit
       })
@@ -133,4 +125,4 @@ export default class EmbargoFetcher {
       .then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
-}
\ No newline at end of file
+}
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 289919fa5..2eae0b91d 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -249,7 +249,6 @@ class PublicStore {
 
 
   handleDisplayCollection(collectionList) {
-    // console.log(collectionList.colData && collectionList.colData.col);
     this.setState({
       guestPage: 'collection',
       elementType: 'collection',
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index 4d14f4c72..65938bd48 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -47,7 +47,7 @@ class ReviewStore {
       // refresh embargo list
       EmbargoActions.getEmbargoBundle();
       // refresh element list
-      PublicActions.getElements(
+      ReviewActions.getElements(
         this.selectType, this.selectState, this.searchType,
         this.searchValue, this.page, this.perPage
       );
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index 4894ed1a5..1e8e35dbf 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -3,8 +3,6 @@ import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTri
 import SVG from 'react-inlinesvg';
 import uuid from 'uuid';
 import RepoCollectionDetails from './RepoCollectionDetails';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import EmbargoStore from '../components/stores/EmbargoStore';
 import PublicStore from '../components/stores/PublicStore';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
@@ -45,18 +43,18 @@ const infoTag = (el, la) => {
   );
 };
 
-const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null) => {
+const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null, fetchEmbargoElement = () => {}) => {
   if (!el) {
     return '';
   }
   let listClass;
   if (el.type === 'Reaction') {
-    listClass = (element !== null && element.publication && element.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
+    listClass = (element?.publication && element.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
   } else {
-    listClass = (element !== null && element.published_samples && element.published_samples[0] && element.published_samples[0].id === el.id) ? 'list_focus_on' : 'list_focus_off';
+    listClass = (element?.published_samples && element.published_samples[0] && element.published_samples[0].sample_id === el.id) ? 'list_focus_on' : 'list_focus_off';
   }
   return (
-    <Col md={element ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => EmbargoActions.getEmbargoElement(cid, el)}>
+    <Col md={element ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => fetchEmbargoElement(cid, el)}>
       <div className={`home_reaction ${listClass}`}>
         <Row key={`list-reaction-svg-${el.id}`}>
           <Col md={12}>
@@ -67,7 +65,6 @@ const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null) =
       </div>
     </Col>
   );
-
 };
 
 export default class RepoCollection extends Component {
@@ -75,7 +72,6 @@ export default class RepoCollection extends Component {
     super(props);
     this.state = {
       elements: [],
-      current_user: {},
       element: null,
       selectEmbargo: null,
       showInfoModal: false,
@@ -86,15 +82,15 @@ export default class RepoCollection extends Component {
     this.handleInfoClose = this.handleInfoClose.bind(this);
     this.handleMetadataShow = this.handleMetadataShow.bind(this);
     this.handleMetadataClose = this.handleMetadataClose.bind(this);
+    this.fetchEmbargoElement = this.fetchEmbargoElement.bind(this);
+    this.fetchEmbargoElements = this.fetchEmbargoElements.bind(this);
   }
 
   componentDidMount() {
-    EmbargoStore.listen(this.onChange);
     PublicStore.listen(this.onChange);
   }
 
   componentWillUnmount() {
-    EmbargoStore.unlisten(this.onChange);
     PublicStore.unlisten(this.onChange);
   }
 
@@ -102,10 +98,9 @@ export default class RepoCollection extends Component {
     if (state.elements && state.elements != this.state.elements) {
       this.setState({ elements: state.elements });
     }
-    // this.setState(prevState => ({ ...prevState, ...state }));
     if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {
       this.setState({ selectEmbargo: state.selectEmbargo });
-      EmbargoActions.getEmbargoElements(state.selectEmbargo.element_id);
+      this.fetchEmbargoElements(state.selectEmbargo.element_id);
     }
 
     if (state.element !== this.state.element) {
@@ -113,6 +108,33 @@ export default class RepoCollection extends Component {
     }
   }
 
+  fetchEmbargoElements(embargoId) {
+    EmbargoFetcher.fetchEmbargoElements(embargoId)
+      .then((result) => {
+        if (!result.error) {
+          const {
+            elements, current_user, embargo
+          } = result;
+          this.setState({
+            selectEmbargo: embargo,
+            elements,
+            currentUser: current_user
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  fetchEmbargoElement(cid, el) {
+    EmbargoFetcher.fetchEmbargoElement(cid, el)
+      .then((result) => {
+        if (!result.error) { this.setState({ element: result }); }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
   handleInfoShow() {
     this.setState({ showInfoModal: true });
   }
@@ -188,14 +210,12 @@ export default class RepoCollection extends Component {
           <div className="public-list" style={{ backgroundColor: '#efefef' }}>
             <Table className="sample-entries">
               <tbody>
-                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element)) }
+                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element, this.fetchEmbargoElement)) }
               </tbody>
             </Table>
           </div>
         </Col>
-        <Col
-          md={element ? 8 : 0}
-        >
+        <Col md={element ? 8 : 0}>
           <div className="public-element">
             <RepoCollectionDetails element={element} />
           </div>
@@ -204,7 +224,7 @@ export default class RepoCollection extends Component {
             showModal={showInfoModal}
             selectEmbargo={selectEmbargo}
             onCloseFn={this.handleInfoClose}
-            editable={true}
+            editable
           />
           <MetadataModal
             key="metadata-modal"
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
index 4acc3319d..87dd30f2d 100644
--- a/app/packs/src/libHome/RepoCollectionDetails.js
+++ b/app/packs/src/libHome/RepoCollectionDetails.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import EmbargoStore from '../components/stores/EmbargoStore';
 import RepoReactionDetails from './RepoReactionDetails';
 import RepoSampleDetails from './RepoSampleDetails';
 
@@ -9,24 +8,10 @@ export default class RepoCollectionDetails extends Component {
     this.state = {
       element: props.element
     };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    EmbargoStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    EmbargoStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
   }
 
   switchTypeRender() {
-    const { element } = this.state;
-
+    const { element } = this.props;
     if (typeof (element) === 'undefined' || !element) {
       return <span />;
     }
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 212dd55ba..57c177230 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -11,16 +11,6 @@ import { MetadataModal, InfoModal } from './RepoEmbargoModal';
 import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 
-const renderMenuItems = (bundles) => {
-  if (bundles.length < 1) return <div />;
-  const menu = bundles.map(bundle => (
-    <MenuItem key={bundle.element_id} eventKey={bundle.element_id}>
-      {bundle.taggable_data && bundle.taggable_data.label}
-    </MenuItem>
-  ));
-  return menu;
-};
-
 export default class RepoEmbargo extends Component {
   constructor(props) {
     super(props);
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index 8b18d7e87..c25ad2e27 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -77,34 +77,33 @@ const InfoModal = ({ showModal, selectEmbargo, onCloseFn, editable=false }) => {
   const author_ids = tag.author_ids || [];
   const id = (selectEmbargo && selectEmbargo.element_id) || 0;
   return (
-    <div>
-      <Modal
-        show={showModal}
-        onHide={onCloseFn}
-        dialogClassName="news-preview-dialog"
-      >
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div><h4><Label>{la}</Label></h4></div>
-          <div>
-            <ContributorInfo contributor={tag.contributors} />
-            <h5>
-              <b>Author{author_ids.length > 1 ? 's' : ''}: </b>
-              <AuthorList creators={tag.creators} affiliationMap={affiliationMap} />
-            </h5>
-            <AffiliationList
-              affiliations={tag.affiliations}
-              affiliationMap={affiliationMap}
-            />
-            <Doi type="collection" id={id} doi={doi} isPublished={isPublished} />
-            {ElementDoi(tag.element_dois, isPublished)}
-          </div>
-          <br />
-          <ButtonToolbar>
-            <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
-          </ButtonToolbar>
-        </Modal.Body>
-      </Modal>
-    </div>
+    <Modal show={showModal} onHide={onCloseFn} bsSize="large">
+      <Modal.Header closeButton>
+        <Modal.Title>
+          <h4><Label>{la}</Label></h4>
+          <ContributorInfo contributor={tag.contributors} />
+          <h5>
+            <b>Author{author_ids.length > 1 ? 's' : ''}: </b>
+            <AuthorList creators={tag.creators} affiliationMap={affiliationMap} />
+          </h5>
+          <AffiliationList
+            affiliations={tag.affiliations}
+            affiliationMap={affiliationMap}
+          />
+          <Doi type="collection" id={id} doi={doi} isPublished={isPublished} />
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body style={{ height: '50vh', overflow: 'auto' }}>
+        <div>
+          {ElementDoi(tag.element_dois, isPublished)}
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonToolbar>
+          <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
+        </ButtonToolbar>
+      </Modal.Footer>
+    </Modal>
   );
 };
 

From 82e35cb10cfc2f2361b8738612401e98bcec9326 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 7 Feb 2023 21:29:39 +0100
Subject: [PATCH 095/258] fix based on feedback

---
 app/api/chemotion/repository_api.rb  |  4 +-
 app/packs/src/libHome/RepoEmbargo.js | 57 ++--------------------------
 2 files changed, 5 insertions(+), 56 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index d2e571101..35ce5de19 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -554,8 +554,8 @@ def add_submission_history(root)
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
           entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
           embargo = find_embargo_collection(publication)
-          entities[:embargo] = embargo.label
-          entities[:embargoId] = embargo.id
+          entities[:embargo] = embargo&.label
+          entities[:embargoId] = embargo&.id
           {
             reaction: entities,
             isSubmitter: publication.published_by == current_user.id,
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
index 57c177230..56af4c12e 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
+import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
 import Select from 'react-select';
 import { filter } from 'lodash';
 import RepoEmbargoDetails from './RepoEmbargoDetails';
@@ -56,69 +56,28 @@ export default class RepoEmbargo extends Component {
 
   onChange(state) {
     let { selectEmbargo, elements, current_user, currentElement, bundles } = this.state;
-    // console.log(currentElement);
     if (state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id) {
       ({ selectEmbargo } = state);
     }
     if (state.elements) { ({ elements } = state); }
     if (state.current_user) { ({ current_user } = state); }
     if (!state.currentElement && !this.state.currentElement) {
-      // console.log('111');
       currentElement = null;
     } else {
-      // console.log(JSON.stringify(state.currentElement));
       ({ currentElement } = state);
     }
     if (state.bundles) { ({ bundles } = state); }
-    console.log('onChange====================');
-    // console.log(state.selectEmbargo);
-    // console.log(state.selectEmbargo?.id);
-    console.log('1');
-    console.log(selectEmbargo?.id !== this.state.selectEmbargo?.id);
-
-    console.log(selectEmbargo?.id);
-    console.log(state.selectEmbargo?.id);
-    console.log(this.state.selectEmbargo?.id);
-    // console.log((state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id));
-    console.log('2');
-    console.log(state.elements?.length);
-    console.log(this.state.elements?.length);
-    // console.log((elements?.length !== this.state.elements?.length));
-    console.log(JSON.stringify(elements) !== JSON.stringify(this.state.elements));
-    console.log('3');
-    console.log((current_user?.id !== this.state.current_user?.id));
-    console.log('4');
-    console.log((currentElement !== this.state.currentElement));
-    // console.log(currentElement);
-    // console.log(state.currentElement);
-    // console.log(this.state.currentElement);
-    console.log('5');
-    // console.log(bundles);
-    // console.log(state.bundles);
-    // console.log(this.state.bundles);
-    console.log((bundles !== this.state.bundles));
-
-    // if (!currentElement) {
-    //   console.log('no currentElement');
-    //   this.setState(currentElement);
-    // } else
     if ((selectEmbargo?.id !== this.state.selectEmbargo?.id)
       || (JSON.stringify(elements) !== JSON.stringify(this.state.elements))
       || (current_user?.id !== this.state.current_user?.id)
       || (currentElement !== this.state.currentElement)
       || (bundles !== this.state.bundles)) {
-      console.log('update state');
       const validSelect = bundles?.find(b => b.element_id === selectEmbargo?.element_id);
-      // console.log(validSelect);
       if (typeof (validSelect) === 'undefined') {
-        console.log('no selected embargo');
         this.setState(prevState => ({ ...prevState, selectEmbargo: null, elements, current_user, currentElement, bundles }));
       } else {
         EmbargoFetcher.refreshEmbargo(selectEmbargo || {})
           .then((result) => {
-            console.log('refreshEmbargo');
-            // console.log(JSON.stringify(currentElement))
-            console.log(result);
             if (!result.error) this.setState(prevState => ({ ...prevState, selectEmbargo: result, elements, current_user, currentElement, bundles }), EmbargoActions.getEmbargoElements(selectEmbargo.element_id));
           }).catch((errorMessage) => {
             console.log(errorMessage);
@@ -131,12 +90,8 @@ export default class RepoEmbargo extends Component {
     this.setState({ showConfirmModal: true });
   }
 
-
   handleMoveShow(element) {
-    this.setState({
-      showMoveModal: true,
-      moveElement: element
-    });
+    this.setState({ showMoveModal: true, moveElement: element });
   }
 
   handleMoveClose() {
@@ -226,7 +181,6 @@ export default class RepoEmbargo extends Component {
     this.setState({ showMoveModal: false });
   }
 
-
   rendeActionBtn(bundles) {
     const { selectEmbargo, elements, current_user } = this.state;
     const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
@@ -325,8 +279,6 @@ export default class RepoEmbargo extends Component {
     );
   }
 
-
-  // render modal
   renderMoveModal() {
     const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
     const options = [
@@ -410,10 +362,7 @@ export default class RepoEmbargo extends Component {
             onClick={this.handleEmbargoDelete}
           />
         </Col>
-        <Col
-          className="review-element"
-          md={currentElement ? 8 : 0}
-        >
+        <Col className="review-element" md={currentElement ? 8 : 0}>
           <RepoEmbargoDetails currentElement={currentElement} />
           { this.renderMoveModal() }
 

From 19d55a1456856a84203d8d3133f0ee838bf0077d Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 8 Feb 2023 00:13:31 +0100
Subject: [PATCH 096/258] workaround for react-svg-file-zoom-pan-latest library
 issue

---
 app/api/chemotion/collection_api.rb            |  2 +-
 app/jobs/chemotion_repo_reviewing_job.rb       |  7 +++++++
 app/packs/src/libHome/RepoCollectionDetails.js | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index a1fa7ab08..488db1a60 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -486,7 +486,7 @@ class CollectionAPI < Grape::API
             sync_col_ids.each do |sync_col_id|
               sync_col = SyncCollectionsUser.find_by(id: sync_col_id, user_id: current_user.id)
               col = Collection.find(sync_col.collection_id) if sync_col.present?
-              collection_ids << sync_col.collection_id if col.present? && col.parent.present? && ['My Published Elements', 'Embargoed Publications'].include?(col.parent&.label)
+              collection_ids << sync_col.collection_id if col.present? && col.parent.present? && ['My Published Elements', 'Published Elements', 'Embargoed Publications'].include?(col.parent&.label)
             end
           end
 
diff --git a/app/jobs/chemotion_repo_reviewing_job.rb b/app/jobs/chemotion_repo_reviewing_job.rb
index ad8a0085b..174ab0bef 100644
--- a/app/jobs/chemotion_repo_reviewing_job.rb
+++ b/app/jobs/chemotion_repo_reviewing_job.rb
@@ -84,6 +84,13 @@ def mail_users
     else
       return
     end
+  rescue StandardError => e
+    Delayed::Worker.logger.error <<~TXT
+      ---------  #{self.class.name}  mail_users error ------------
+        Error Message:  #{e}
+      --------------------------------------------------------------------
+    TXT
+
   end
 
   # NB: NOT USED?
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
index 87dd30f2d..85eeb1168 100644
--- a/app/packs/src/libHome/RepoCollectionDetails.js
+++ b/app/packs/src/libHome/RepoCollectionDetails.js
@@ -8,6 +8,24 @@ export default class RepoCollectionDetails extends Component {
     this.state = {
       element: props.element
     };
+    this.loadSVG = this.loadSVG.bind(this);
+  }
+
+  componentDidMount() {
+    const { element } = this.state;
+    if (element) {
+      this.loadSVG(element);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.element !== prevProps.element) {
+      this.loadSVG(this.props.element);
+    }
+  }
+
+  loadSVG(element) {
+    this.setState({ element });
   }
 
   switchTypeRender() {

From faf5f3fbf9c9535262432bb4db81087263a86604 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 8 Feb 2023 11:07:22 +0100
Subject: [PATCH 097/258] chem converter

---
 app/api/helpers/submission_helpers.rb         |  2 +-
 .../components/fetchers/GenericBaseFetcher.js | 65 +++++++++++++++++++
 app/packs/src/fetchers/ConverterFetcher.js    |  2 +
 config/initializers/converter.rb              |  1 +
 package.json                                  |  1 +
 yarn.lock                                     | 23 +++++++
 6 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 app/packs/src/components/fetchers/GenericBaseFetcher.js

diff --git a/app/api/helpers/submission_helpers.rb b/app/api/helpers/submission_helpers.rb
index ba400ce65..b3ffb52ac 100644
--- a/app/api/helpers/submission_helpers.rb
+++ b/app/api/helpers/submission_helpers.rb
@@ -45,7 +45,7 @@ def accept_new_sample(root, sample)
     ap = Publication.create!(
       state: Publication::STATE_PENDING,
       element: sample,
-      doi: sample.doi,
+      doi: sample&.doi,
       published_by: root.published_by,
       parent: root,
       taggable_data: root.taggable_data
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
new file mode 100644
index 000000000..8d07f4ae4
--- /dev/null
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -0,0 +1,65 @@
+import 'whatwg-fetch';
+
+export default class GenericBaseFetcher {
+  static exec(path, method) {
+    return fetch(`/api/v1/${path}`, { credentials: 'same-origin', method })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static execData(params, path, method = 'POST') {
+    console.log(`/api/v1/${path}`);
+    return fetch(`/api/v1/${path}`, {
+      credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deActivateKlass(params) {
+    return fetch('/api/v1/generic_elements/de_activate_klass', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deleteKlass(params) {
+    return fetch(`/api/v1/generic_elements/delete_klass/${params.id}`, {
+      credentials: 'same-origin', method: 'DELETE', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deleteKlassRevision(params) {
+    return fetch('/api/v1/generic_elements/delete_klass_revision', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchKlassRevisions(id, klass) {
+    return fetch(`/api/v1/generic_elements/klass_revisions.json?id=${id}&klass=${klass}`, { credentials: 'same-origin' })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static fetchUnitsSystem() {
+    return fetch('/units_system/units_system.json', { credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' } })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static updateTemplate(params) {
+    return fetch('/api/v1/generic_elements/update_template', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/fetchers/ConverterFetcher.js b/app/packs/src/fetchers/ConverterFetcher.js
index a9a94428b..a7097aa62 100644
--- a/app/packs/src/fetchers/ConverterFetcher.js
+++ b/app/packs/src/fetchers/ConverterFetcher.js
@@ -1,5 +1,7 @@
 import 'whatwg-fetch';
 
+const converter_app_url = '/api/v1/converter';
+
 export default class ConverterFetcher {
   static deleteProfile(profile) {
     const requestOptions = { method: 'DELETE' };
diff --git a/config/initializers/converter.rb b/config/initializers/converter.rb
index 5d676e7e7..3f5a8ac88 100644
--- a/config/initializers/converter.rb
+++ b/config/initializers/converter.rb
@@ -10,5 +10,6 @@
     config.converter.secret_key = converter_config[:secret_key]
     config.converter.timeout = converter_config[:timeout]
     config.converter.ext = converter_config[:ext]
+    config.converter.jdx_format = converter_config[:jdx_format]
   end
 end
diff --git a/package.json b/package.json
index 63c2771a4..fff24b053 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "aviator": "v0.6.1",
     "base-64": "^0.1.0",
     "chem-generic-ui": "^1.0.10",
+    "chem-generic-ui-viewer": "~0.0.4",
     "chemotion-converter-client": "0.5.0",
     "citation-js": "0.6.8",
     "classnames": "^2.2.5",
diff --git a/yarn.lock b/yarn.lock
index 53e783e90..e77116145 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6177,6 +6177,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+countup.js@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-2.3.2.tgz#9a91d95780be1c908d1e6feb548625f353f57988"
+  integrity sha512-dQ7F/CmKGjaO6cDfhtEXwsKVlXIpJ89dFs8PvkaZH9jBVJ2Z8GU4iwG/qP7MgY8qwr+1skbwR6qecWWQLUzB8Q==
+
 crc-32@~1.2.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.1.tgz"
@@ -7897,6 +7902,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
@@ -9943,6 +9953,11 @@ jquery@^3.4.0:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity "sha1-I+0v/tihngSIFPEzkaGa/NuhYOY= sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg=="
 
+jquery@^3.4.0:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
+  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -13050,6 +13065,14 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.2"
     react-popper "^2.3.0"
 
+react-countup@^6.3.2:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.4.0.tgz#f18d24e40c37c465b29353172cc8b3b5e82f3241"
+  integrity sha512-7vvz0IIcDwWdd1JDzDB3z+9wSWL5Cf7pqwMPUXnIe66M3UXZyMWrvTp1p96wpPgg8/v4Gvf8YLvJoO+34G0GMA==
+  dependencies:
+    "@rollup/plugin-babel" "^6.0.2"
+    countup.js "^2.3.2"
+
 react-datepicker@~1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.4.1.tgz"

From ed5862997ac0cef82f37ed24a08f08bbd0359ed9 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 12 Feb 2023 16:20:27 +0100
Subject: [PATCH 098/258] fixed: redirect to the latest published element
 successfully, but no details shown

---
 app/packs/src/components/stores/PublicStore.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 2eae0b91d..854685fa9 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -1,7 +1,6 @@
 import Aviator from 'aviator';
 import alt from '../alt';
 import PublicActions from '../actions/PublicActions';
-import ElementActions from '../actions/ElementActions';
 import UIActions from '../actions/UIActions';
 import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
@@ -161,8 +160,7 @@ class PublicStore {
   }
 
   handleDisplayMolecule(moleculeList) {
-    let cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
-    if (this.molecules.length > 0) cb = () => {};
+    const cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
     this.setState({
       guestPage: 'publications',
       elementType: 'molecule',
@@ -177,8 +175,7 @@ class PublicStore {
   handleDisplayReaction(reactionList) {
     const listType = reactionList.reactionData.publication.taggable_data.scheme_only ?
       RepoNavListTypes.SCHEME : RepoNavListTypes.REACTION;
-    let cb = () => PublicActions.getReactions();
-    if (this.reactions.length > 0) cb = () => {};
+    const cb = () => PublicActions.getReactions();
     this.setState({
       guestPage: 'publications',
       elementType: 'reaction',
@@ -189,8 +186,6 @@ class PublicStore {
     Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
   }
 
-
-
   handleReceiveSearchresult(result) {
     this.setState({ ...result.publicMolecules });
   }

From 54cb453de329530b6de8ac075f679c87707bf3d8 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 14 Feb 2023 15:48:48 +0100
Subject: [PATCH 099/258] review comment fix

---
 app/api/helpers/submission_helpers.rb        | 30 ++++++++++----------
 app/packs/src/libHome/RepoReviewButtonBar.js |  2 +-
 package.json                                 |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/api/helpers/submission_helpers.rb b/app/api/helpers/submission_helpers.rb
index b3ffb52ac..6563327c2 100644
--- a/app/api/helpers/submission_helpers.rb
+++ b/app/api/helpers/submission_helpers.rb
@@ -14,9 +14,9 @@ def coauthor_validation(coauthors)
     coauthor_ids = []
     coauthors.each do |coa|
       val = coa.strip
-      p = User.where(type: %w[Person Collaborator]).where.not(confirmed_at: nil).where('id = ? or email = ?', val.to_i, val.to_s).first
-      error!('invalid co-author: ' + val.to_s, 404) if p.nil?
-      coauthor_ids << p.id
+      usr = User.where(type: %w[Person Collaborator]).where.not(confirmed_at: nil).where('id = ? or email = ?', val.to_i, val.to_s).first
+      error!('invalid co-author: ' + val.to_s, 404) if usr.nil?
+      coauthor_ids << usr.id
     end
     coauthor_ids
   end
@@ -42,7 +42,7 @@ def update_tag_doi(element)
   end
 
   def accept_new_sample(root, sample)
-    ap = Publication.create!(
+    pub_s = Publication.create!(
       state: Publication::STATE_PENDING,
       element: sample,
       doi: sample&.doi,
@@ -50,8 +50,8 @@ def accept_new_sample(root, sample)
       parent: root,
       taggable_data: root.taggable_data
     )
-    sample.analyses.each do |a|
-      accept_new_analysis(ap, a)
+    sample.analyses.each do |sa|
+      accept_new_analysis(pub_s, sa)
     end
   end
 
@@ -107,17 +107,17 @@ def element_submit(root)
       end
 
     when 'Reaction'
-      root.element.products.each do |p|
-        Publication.find_by(element_type: 'Sample', element_id: p.id)&.destroy! if p.analyses&.length == 0
-        next if p.analyses&.length == 0
-        p.reserve_suffix
-        p.reserve_suffix_analyses(p.analyses)
-        prod_pub = Publication.find_by(element: p)
+      root.element.products.each do |pd|
+        Publication.find_by(element_type: 'Sample', element_id: pd.id)&.destroy! if pd.analyses&.length == 0
+        next if pd.analyses&.length == 0
+        pd.reserve_suffix
+        pd.reserve_suffix_analyses(pd.analyses)
+        prod_pub = Publication.find_by(element: pd)
         if prod_pub.nil?
-          accept_new_sample(root, p)
+          accept_new_sample(root, pd)
         else
-          p.analyses.each do |rpa|
-            accept_new_analysis(prod_pub,rpa, Publication.find_by(element: rpa).nil?)
+          pd.analyses.each do |rpa|
+            accept_new_analysis(prod_pub, rpa, Publication.find_by(element: rpa).nil?)
           end
         end
       end
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
index 7d9fba3a2..5a54e05f0 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -123,4 +123,4 @@ RepoReviewButtonBar.defaultProps = {
   taggData: {}
 };
 
-export default RepoReviewButtonBar;
\ No newline at end of file
+export default RepoReviewButtonBar;
diff --git a/package.json b/package.json
index fff24b053..e64986f12 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.5",
+    "repo-review-ui": "^0.0.6",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",

From f6b0c372eccb91bf79f08b23efdef67c4e41b427 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 15 Feb 2023 17:10:44 +0100
Subject: [PATCH 100/258] hide info when inchikey is dummy

---
 app/packs/src/libHome/RepoCommon.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index bf0e55468..18053105d 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -56,6 +56,8 @@ import RepoPreviewImage from '../components/common/RepoPreviewImage';
 import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoSegment from './RepoSegment';
 
+const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
+
 const CollectionDesc = (props) => {
   let { label } = props;
   if (typeof label !== 'string') return null;
@@ -946,10 +948,12 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
         <br />
-        <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-        <h5><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-        <h5><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
-        <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
+        <span style={hideInfo(molecule)}>
+          <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
+          <h5><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+          <h5><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+          <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
+        </span>
         {
           hasXvial ?
             <div className="repo-registed-compound-desc">
@@ -1016,12 +1020,14 @@ const RenderAnalysisHeader = (props) => {
             <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
             <br /><br />
           </span>
-          {nameOrFormula}
-          {iupacUserDefined}
-          <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
-          <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
-          <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
-          <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
+          <span style={hideInfo(molecule)}>
+            {nameOrFormula}
+            {iupacUserDefined}
+            <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
+            <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
+            <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
+            <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
+          </span>
           <h6><b>Sample DOI: </b>
             {
               isPublic ?

From e0fd782e5ca3f9a16d9e514ff39ee5895978fb75 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 16 Feb 2023 11:04:48 +0100
Subject: [PATCH 101/258] embargo btns

---
 app/models/concerns/reaction_rinchi.rb        | 27 ++++++++++++++-----
 app/packs/src/libHome/RepoEmbargoDetails.js   |  2 ++
 app/packs/src/libHome/RepoReactionDetails.js  |  4 +++
 app/packs/src/libHome/RepoReviewButtonBar.js  |  6 +++--
 app/packs/src/libHome/RepoSampleDetails.js    |  4 +++
 app/publish/datacite_metadata_sample.html.erb |  2 +-
 6 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/app/models/concerns/reaction_rinchi.rb b/app/models/concerns/reaction_rinchi.rb
index 4452da863..5cc3a8406 100644
--- a/app/models/concerns/reaction_rinchi.rb
+++ b/app/models/concerns/reaction_rinchi.rb
@@ -66,12 +66,25 @@ def products_rinchis
     Rinchi.convert(rcts, prds, agts)
   end
 
-   def products_short_rinchikey
-     _, _, result, _ = products_rinchis
-     result
-   end
+  def no_structure_rinchis
+    prds = Rinchi::MolVect.new
+    mols_prds = []
+    mols_prds.push(no_structure)
+    mols_prds.each { |prd| prds.push(prd) }
+    Rinchi.convert(Rinchi::MolVect.new, prds, Rinchi::MolVect.new)
+  end
 
-   def products_short_rinchikey_trimmed
-     products_short_rinchikey.sub(/Short-RInChIKey=/, '')
-   end
+  def products_short_rinchikey
+    _, _, result, _ = products_rinchis
+    result
+  end
+
+  def products_short_rinchikey_trimmed
+    if products_short_rinchikey.blank?
+      _, _, result, _ = no_structure_rinchis
+      result&.sub(/Short-RInChIKey=/, '')
+    else
+      products_short_rinchikey.sub(/Short-RInChIKey=/, '')
+    end
+  end
 end
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
index ee00a0466..92f82e61d 100644
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ b/app/packs/src/libHome/RepoEmbargoDetails.js
@@ -40,6 +40,7 @@ export default class RepoEmbargoDetails extends Component {
             canComment
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
+            showComment={false}
             btnAction={this.state.btnAction}
             isReview={false}
             review={this.state.review}
@@ -52,6 +53,7 @@ export default class RepoEmbargoDetails extends Component {
             btnAction={this.state.btnAction}
             reviewLevel={this.state.reviewLevel}
             isSubmitter={this.state.isSubmitter}
+            showComment={false}
             review={this.state.review}
           />);
       default: return <span />;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index e21a1deba..7b28cbd04 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -392,6 +392,7 @@ export default class RepoReactionDetails extends Component {
       canComment,
       reviewLevel,
       isSubmitter,
+      showComment,
       review,
       canClose,
     } = this.props;
@@ -471,6 +472,7 @@ export default class RepoReactionDetails extends Component {
                   buttonFunc={this.handleReviewBtn}
                   reviewLevel={reviewLevel}
                   isSubmitter={isSubmitter}
+                  showComment={showComment}
                   taggData={taggData}
                   schemeOnly={schemeOnly}
                   currComment={(review?.history && review?.history.length > 0 && review?.history.slice(-1).pop()) || {}}
@@ -540,6 +542,7 @@ RepoReactionDetails.propTypes = {
   reviewLevel: PropTypes.number,
   btnAction: PropTypes.string,
   isSubmitter: PropTypes.bool,
+  showComment: PropTypes.bool,
   isReview: PropTypes.bool,
   review: PropTypes.object,
   canClose: PropTypes.bool,
@@ -551,6 +554,7 @@ RepoReactionDetails.defaultProps = {
   isPublished: false,
   canComment: false,
   isSubmitter: false,
+  showComment: true,
   btnAction: '',
   reviewLevel: 0,
   isReview: false,
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
index 5a54e05f0..b0060dbb2 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -83,11 +83,11 @@ const RepoReviewButtonBar = props =>
   (
     <ButtonToolbar>
       {
-        props.buttons.filter(b => b === 'Comments').map(b =>
+        props.showComment === true && props.buttons.filter(b => b === 'Comments').map(b =>
           showCommentButton(b, props.buttonFunc, (props.currComment)))
       }
       {
-        props.buttons.filter(b => b !== 'Comments').map(b =>
+        props.showComment === true && props.buttons.filter(b => b !== 'Comments').map(b =>
           showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state, props.isSubmitter))
       }
       <RepoMetadataModal
@@ -106,6 +106,7 @@ RepoReviewButtonBar.propTypes = {
   buttons: PropTypes.arrayOf(PropTypes.string),
   buttonFunc: PropTypes.func,
   reviewLevel: PropTypes.number,
+  showComment: PropTypes.bool,
   isSubmitter: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   currComment: PropTypes.object,
@@ -118,6 +119,7 @@ RepoReviewButtonBar.defaultProps = {
   buttonFunc: () => { },
   reviewLevel: 0,
   isSubmitter: false,
+  showComment: true,
   schemeOnly: false,
   currComment: {},
   taggData: {}
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 8d7e64bdb..20f4cfac7 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -63,6 +63,7 @@ export default class RepoSampleDetails extends Component {
       canComment,
       reviewLevel,
       isSubmitter,
+      showComment,
       review,
       canClose,
       buttons,
@@ -153,6 +154,7 @@ export default class RepoSampleDetails extends Component {
                 buttonFunc={this.handleReviewBtn}
                 reviewLevel={reviewLevel}
                 isSubmitter={isSubmitter}
+                showComment={showComment}
                 currComment={(history && history.slice(-1).pop()) || {}}
                 buttons={buttons}
                 taggData={tagData}
@@ -194,6 +196,7 @@ RepoSampleDetails.propTypes = {
   reviewLevel: PropTypes.number,
   btnAction: PropTypes.string,
   isSubmitter: PropTypes.bool,
+  showComment: PropTypes.bool,
   review: PropTypes.object,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
@@ -206,6 +209,7 @@ RepoSampleDetails.defaultProps = {
   btnAction: '',
   reviewLevel: 0,
   isSubmitter: false,
+  showComment: true,
   review: {},
   canClose: true,
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index 1ff40951a..bfbabeaa8 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -18,7 +18,7 @@
     <% end %>
   </creators>
   <titles>
-    <title xml:lang="en-US"><%= element.molecule_name.name %></title>
+    <title xml:lang="en-US"><%= element.molecule_name&.name %></title>
     <title titleType="AlternativeTitle"><%= element.molecule.inchistring %></title>
   </titles>
   <publisher>chemotion.net</publisher>

From d8c7bde4d665cb193329f6e08dec2ae9862a873c Mon Sep 17 00:00:00 2001
From: "pierre.tremouilhac" <pierre.tremouilhac@kit.edu>
Date: Mon, 20 Feb 2023 07:29:35 +0100
Subject: [PATCH 102/258] Update Navigation.js

---
 app/packs/src/libHome/Navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 075d6d232..0ba775d63 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -121,7 +121,7 @@ export default class Navigation extends React.Component {
             }
             {
               true ?
-                <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/chemotionsaurus/docs/repo/videos_repo" className="white-nav-item">
+                <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/docs/repo/" className="white-nav-item">
                   How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
                 </NavItem> : null
             }

From cf584dd085a85e909179c7f9fa9cc0744bd84b8e Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 17 Feb 2023 12:26:09 +0100
Subject: [PATCH 103/258] converter for user

---
 .../src/admin/converter/ConverterAdmin.js     | 422 ++++++++++++++++++
 app/packs/src/apps/admin/AdminHome.js         |   8 +-
 .../src/apps/converter/ConverterAdmin.js      |  11 +
 .../src/components/navigation/UserAuth.js     |   6 +-
 config/routes.rb                              |   2 +-
 5 files changed, 443 insertions(+), 6 deletions(-)
 create mode 100644 app/packs/src/admin/converter/ConverterAdmin.js

diff --git a/app/packs/src/admin/converter/ConverterAdmin.js b/app/packs/src/admin/converter/ConverterAdmin.js
new file mode 100644
index 000000000..249f6b134
--- /dev/null
+++ b/app/packs/src/admin/converter/ConverterAdmin.js
@@ -0,0 +1,422 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button } from 'react-bootstrap';
+import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-client';
+import ConverterApi from 'src/fetchers/ConverterFetcher';
+import GenericDSsFetcher from 'src/fetchers/GenericDSsFetcher';
+
+<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
+class ConverterAdmin extends Component {
+=======
+import ConverterApi from '../../components/fetchers/ConverterFetcher';
+import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
+
+class ConverterAdmin extends Component {
+
+>>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'list',
+      client: null,
+      selectedFile: null,
+      profiles: [],
+      options: [],
+      datasets: [],
+      profile: null,
+      error: false,
+      errorMessage: '',
+      isLoading: false,
+      createdModal: false,
+      deleteModal: false
+    };
+
+    this.showCreateView = this.showCreateView.bind(this);
+    this.showUpdateView = this.showUpdateView.bind(this);
+    this.showImportView = this.showImportView.bind(this);
+
+    this.showCreatedModal = this.showCreatedModal.bind(this);
+    this.hideCreatedModal = this.hideCreatedModal.bind(this);
+
+    this.showDeleteModal = this.showDeleteModal.bind(this);
+    this.hideDeleteModal = this.hideDeleteModal.bind(this);
+
+    this.updateProfile = this.updateProfile.bind(this);
+    this.storeProfile = this.storeProfile.bind(this);
+    this.deleteProfile = this.deleteProfile.bind(this);
+    this.downloadProfile = this.downloadProfile.bind(this);
+
+    this.updateFile = this.updateFile.bind(this);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.importFile = this.importFile.bind(this);
+
+    this.dispatchView = this.dispatchView.bind(this);
+  }
+
+  componentDidMount() {
+    Promise.all([
+      ConverterApi.fetchProfiles(),
+      GenericDSsFetcher.listDatasetKlass(),
+      ConverterApi.fetchOptions()
+    ]).then((responses) => {
+      const [profiles, klass, options] = responses;
+      const datasets = klass?.klass?.map((kl) => {
+        const pr = kl.properties_release;
+        pr.name = kl.label;
+        pr.ols = kl.ols_term_id;
+        return pr;
+      }) || [];
+
+      console.log(options?.client);
+      this.setState({
+<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
+        // eslint-disable-next-line max-len
+=======
+>>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
+        profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
+      });
+    });
+  }
+
+  showImportView() {
+    this.setState({
+      status: 'import',
+      profile: null
+    });
+  }
+
+  showCreateView() {
+    this.setState({
+      status: 'upload',
+      profile: null
+    });
+  }
+
+  showUpdateView(profile) {
+    this.setState({
+      status: 'update',
+      profile: { ...profile },
+      error: false,
+      errorMessage: ''
+    });
+  }
+
+  showCreatedModal() {
+    this.setState({
+      createdModal: true
+    });
+  }
+
+  hideCreatedModal() {
+    this.setState({
+      createdModal: false
+    });
+  }
+
+  showDeleteModal(profile) {
+    this.setState({
+      deleteModal: true,
+      profile: { ...profile },
+    });
+  }
+
+  hideDeleteModal() {
+    this.setState({
+      deleteModal: false,
+      profile: null
+    });
+  }
+
+  updateProfile(profile) {
+    this.setState({ profile });
+  }
+
+  storeProfile() {
+    const { status, profile } = this.state;
+
+    // remove show flag
+    if (Array.isArray(profile.identifiers)) {
+      profile.identifiers.forEach((identifier) => {
+        // eslint-disable-next-line no-param-reassign
+        delete identifier.show;
+      });
+    }
+
+    if (status === 'create') {
+      ConverterApi.createProfile(profile)
+        .then((response) => {
+          const profiles = [...this.state.profiles];
+          profiles.push(response);
+          this.setState({
+            status: 'list',
+            profiles,
+            profile: null
+          }, this.showCreatedModal());
+        });
+    } else if (status === 'update') {
+      ConverterApi.updateProfile(profile)
+        .then((response) => {
+          const profiles = [...this.state.profiles]
+          const index = profiles.findIndex((p) => (p.id === response.id));
+          profiles[index] = response;
+          this.setState({
+            status: 'list',
+            profiles,
+            profile: null
+          });
+        });
+    }
+  }
+
+  deleteProfile() {
+    ConverterApi.deleteProfile(this.state.profile)
+      .then(() => {
+        const profiles = [...this.state.profiles]
+        const index = profiles.findIndex(p => (p.id == this.state.profile.id))
+        profiles.splice(index, 1)
+        this.setState({
+          status: 'list',
+          profiles: profiles,
+          profile: null
+        }, this.hideDeleteModal())
+      }
+    )
+  }
+
+  downloadProfile(profile) {
+    const a = document.createElement('a')
+    a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(profile, null, 2))
+    a.download = profile.id + '.json'
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  updateFile(event) {
+    this.setState({
+      selectedFile: event.target.files[0],
+      loaded: 0,
+      isLoading: false,
+      error: false,
+      errorMessage: ''
+    })
+  }
+
+  uploadFile() {
+    const { selectedFile } = this.state
+
+    this.setState({
+      isLoading: true
+    })
+
+    ConverterApi.fetchTables(selectedFile)
+      .then(data => {
+        if (data) {
+          const profile = {
+            title: '',
+            description: '',
+            tables: [],
+            identifiers: [],
+            data: data,
+          }
+
+          this.setState({
+            status: 'create',
+            profile: profile,
+            selectedFile: null,
+            isLoading: false,
+            error: false,
+            errorMessage: ''
+          })
+        }
+      })
+      .catch(error => {
+        if (error.status === 413) {
+          this.setState({
+            error: true,
+            errorMessage: 'The uploaded file is too large.',
+            isLoading: false
+          })
+        } else {
+          error.text().then(errorMessage => {
+            this.setState({
+              error: true,
+              errorMessage: JSON.parse(errorMessage).error,
+              isLoading: false
+            })
+          })
+        }
+      })
+  }
+
+  importFile() {
+    const { selectedFile } = this.state
+
+    this.setState({
+      isLoading: true
+    })
+
+    const createProfile = e => {
+      const fileProfile = JSON.parse(e.target.result)
+
+      ConverterApi.createProfile(fileProfile)
+        .then(profile => {
+          const profiles = [...this.state.profiles]
+          profiles.push(profile)
+          this.setState({
+            status: 'list',
+            profiles: profiles,
+            profile: null
+          }, this.showCreatedModal())
+        })
+        .catch(errors => {
+          this.setState({
+            error: true,
+            errorMessage: Object.values(errors).join(', '),
+            isLoading: false
+          })
+        })
+    }
+
+    const reader = new FileReader()
+    reader.readAsText(selectedFile)
+    reader.onload = createProfile.bind(this)
+  }
+
+  dispatchView() {
+    if (this.state.status === 'list') {
+      return (
+        <ProfileList
+          profiles={this.state.profiles}
+          isAdmin={this.state.client !== null}
+          updateProfile={this.showUpdateView}
+          deleteProfile={this.showDeleteModal}
+          downloadProfile={this.downloadProfile}
+        />
+      )
+    } else if (this.state.status == 'import') {
+      return (
+        <FileUploadForm
+          onFileChangeHandler={this.updateFile}
+          onSubmitFileHandler={this.importFile}
+          errorMessage={this.state.errorMessage}
+          error={this.state.error}
+          isLoading={this.state.isLoading}
+          disabled={this.state.selectedFile === null}
+        />
+      )
+    } else if (this.state.status == 'upload') {
+      return (
+        <FileUploadForm
+          onFileChangeHandler={this.updateFile}
+          onSubmitFileHandler={this.uploadFile}
+          errorMessage={this.state.errorMessage}
+          error={this.state.error}
+          isLoading={this.state.isLoading}
+          disabled={this.state.selectedFile === null}
+        />
+      );
+    } else {
+      return (
+        <ProfileForm
+          status={this.state.status}
+          profile={this.state.profile}
+          options={this.state.options}
+          datasets={this.state.datasets}
+          updateProfile={this.updateProfile}
+          storeProfile={this.storeProfile}
+        />
+      )
+    }
+  }
+
+  render() {
+    return (
+      <div className={['create', 'update'].includes(this.state.status) ? 'container-fluid' : 'container'}>
+        <header>
+          <nav aria-label="breadcrumb">
+            {this.state.status == 'list' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item active" aria-current="page">Chemotion file converter admin</li>
+              </ol>
+            }
+            {['upload', 'create'].includes(this.state.status) &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Create Profile'}</li>
+              </ol>
+            }
+            {this.state.status == 'update' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Edit Profile: ' + this.state.title}</li>
+              </ol>
+            }
+            {this.state.status == 'import' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Import Profile'}</li>
+              </ol>
+            }
+          </nav>
+
+          <div>
+            {this.state.status == "list" && this.state.client !== null &&
+              <div className="pull-right">
+                <button type="button" onClick={this.showImportView} className="btn btn-success mr-10">
+                  Import profile
+                </button>
+                <button type="button" onClick={this.showCreateView} className="btn btn-primary">
+                  Create new profile
+                </button>
+              </div>
+            }
+
+            <h2>
+              {this.state.status == 'list' && 'Profiles List' }
+              {['upload', 'create'].includes(this.state.status) && 'Create Profile'}
+              {this.state.status == 'update' && 'Edit Profile'}
+              {this.state.status == 'import' && 'Import Profile'}
+            </h2>
+          </div>
+        </header>
+
+        <main>
+          {this.dispatchView()}
+        </main>
+        <div>
+          <a href="/">Back to MyDB</a>
+        </div>
+
+        <Modal show={this.state.createdModal}>
+          <Modal.Header>
+            <Modal.Title>Profile successfully created!</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Footer>
+            <Button bsStyle="primary" onClick={this.hideCreatedModal}>Great!</Button>
+          </Modal.Footer>
+        </Modal>
+
+        <Modal show={this.state.deleteModal}>
+          <Modal.Header>
+            <Modal.Title>Do you really want to delete this profile?</Modal.Title>
+          </Modal.Header>
+          <Modal.Footer>
+            <Button bsStyle="default" onClick={this.hideDeleteModal}>Cancel</Button>
+            <Button bsStyle="danger" onClick={this.deleteProfile}>Delete profile</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    )
+  }
+
+}
+
+export default ConverterAdmin;
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('ConverterAdmin');
+  if (domElement) ReactDOM.render(<ConverterAdmin />, domElement);
+});
diff --git a/app/packs/src/apps/admin/AdminHome.js b/app/packs/src/apps/admin/AdminHome.js
index 80ddfaa8e..c3efc455a 100644
--- a/app/packs/src/apps/admin/AdminHome.js
+++ b/app/packs/src/apps/admin/AdminHome.js
@@ -12,7 +12,13 @@ import NovncSettings from 'src/apps/admin/NovncSettings';
 import MatrixManagement from 'src/apps/admin/MatrixManagement';
 import TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer';
 import DelayedJobs from 'src/apps/admin/DelayedJobs';
-// import TemplateManagement from 'src/apps/admin/TemplateManagement';
+
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import GenericElementAdmin from './GenericElementAdmin';
+import SegmentElementAdmin from './SegmentElementAdmin';
+import DatasetElementAdmin from './DatasetElementAdmin';
+import TemplateManagement from './TemplateManagement';
 
 class AdminHome extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/apps/converter/ConverterAdmin.js b/app/packs/src/apps/converter/ConverterAdmin.js
index af8bea3cc..249f6b134 100644
--- a/app/packs/src/apps/converter/ConverterAdmin.js
+++ b/app/packs/src/apps/converter/ConverterAdmin.js
@@ -5,7 +5,15 @@ import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-cl
 import ConverterApi from 'src/fetchers/ConverterFetcher';
 import GenericDSsFetcher from 'src/fetchers/GenericDSsFetcher';
 
+<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
 class ConverterAdmin extends Component {
+=======
+import ConverterApi from '../../components/fetchers/ConverterFetcher';
+import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
+
+class ConverterAdmin extends Component {
+
+>>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
   constructor(props) {
     super(props);
     this.state = {
@@ -61,7 +69,10 @@ class ConverterAdmin extends Component {
 
       console.log(options?.client);
       this.setState({
+<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
         // eslint-disable-next-line max-len
+=======
+>>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
         profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
       });
     });
diff --git a/app/packs/src/components/navigation/UserAuth.js b/app/packs/src/components/navigation/UserAuth.js
index ed07e285c..86eab2228 100644
--- a/app/packs/src/components/navigation/UserAuth.js
+++ b/app/packs/src/components/navigation/UserAuth.js
@@ -707,10 +707,8 @@ export default class UserAuth extends Component {
             {/* <MenuItem onClick={this.handleShow}>My Groups</MenuItem> */}
             {/* <MenuItem onClick={this.handleSubscriptionShow}>My Subscriptions</MenuItem>
                 Disable for now as there is no subsciption channel yet (Paggy) */}
-            {converterBtn}
-            <MenuItem eventKey="7" href="/command_n_control">
-              My Devices
-            </MenuItem>
+            <MenuItem eventKey="12" href="/converter_admin" >Converter Profile</MenuItem>
+            {/* <MenuItem eventKey="7" href="/command_n_control" >My Devices</MenuItem> */}
             {this.state.currentUser.molecule_editor ? moderatorLink : null}
             <MenuItem eventKey="8" href="/generic_elements_admin">Generic Designer</MenuItem>
             {
diff --git a/config/routes.rb b/config/routes.rb
index fcadaaa1d..5203f5047 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -62,7 +62,7 @@
     get 'pages/tokens', to: 'pages#tokens'
   end
 
-  get 'home/*any', to: 'pages#home'
+  # get 'home/*any', to: 'pages#home'
   get 'home', to: 'pages#home'
 
   # Standalone page for ChemScanner

From 8775c7a23e4d28437a0738fa530a63d9bb7d8a2e Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 23 Feb 2023 12:12:40 +0100
Subject: [PATCH 104/258] converter config file

---
 config/deploy/server_chemotion_net.rb | 1 +
 config/routes.rb                      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
index 230e924cb..00f3148cc 100644
--- a/config/deploy/server_chemotion_net.rb
+++ b/config/deploy/server_chemotion_net.rb
@@ -20,6 +20,7 @@
   '.ruby-gemset',
   'config/compound_open_data.yml',
   'config/spectra.yml',
+  'config/converter.yml',
   'config/node_service.yml'
 )
 set :linked_dirs, fetch(:linked_dirs, []).push(
diff --git a/config/routes.rb b/config/routes.rb
index 5203f5047..fcadaaa1d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -62,7 +62,7 @@
     get 'pages/tokens', to: 'pages#tokens'
   end
 
-  # get 'home/*any', to: 'pages#home'
+  get 'home/*any', to: 'pages#home'
   get 'home', to: 'pages#home'
 
   # Standalone page for ChemScanner

From d2308064ca134626855ea0cfb9c682fc7a685acb Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 2 Mar 2023 14:34:09 +0100
Subject: [PATCH 105/258] embargo email issue

---
 app/jobs/chemotion_embargo_pubchem_job.rb | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index 84f252068..936bfef20 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -48,20 +48,7 @@ def perform(embargo_col_id)
       --------------------------------------------------------------------
       TXT
       PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[send_pubchem]" + e.to_s).deliver_now
-      raise e
-    end
-
-    begin
-      remove_publish_pending
-      send_email
-    rescue StandardError => e
-      Delayed::Worker.logger.error <<~TXT
-        --------- ChemotionEmbargoPubchemJob remove_publish_pending or send_message error ------------
-        Error Message:  #{e}
-        ----------------------------------------------------------------------------------------------
-      TXT
-      PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
-      raise e
+      # raise e
     end
 
     begin
@@ -83,6 +70,19 @@ def perform(embargo_col_id)
       raise e
     end
 
+    begin
+      remove_publish_pending
+      send_email
+    rescue StandardError => e
+      Delayed::Worker.logger.error <<~TXT
+        --------- ChemotionEmbargoPubchemJob remove_publish_pending or send_message error ------------
+        Error Message:  #{e}
+        ----------------------------------------------------------------------------------------------
+      TXT
+      PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
+      # raise e
+    end
+
   end
 
   def remove_publish_pending
@@ -150,7 +150,7 @@ def send_email
     Message.create_msg_notification(
       channel_subject: Channel::PUBLICATION_REVIEW,
       message_from: @sync_emb_col.user_id,
-      data_args: {subject: "Congratulations! Embargo Collection #{@embargo_collection.label} released and published"}
+      data_args: { subject: "Congratulations! Embargo Collection #{@embargo_collection.label} released and published" }
     )
   end
 end

From a89a20b86d7f7e5b619f91c06052d790110f3c84 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 2 Mar 2023 17:30:35 +0100
Subject: [PATCH 106/258] upgrade chemspectra

---
 app/models/concerns/attachment_jcamp_aasm.rb  |   4 +
 .../apps/mydb/elements/details/ViewSpectra.js |   8 +-
 yarn.lock                                     | 453 +++++++++++++++++-
 3 files changed, 460 insertions(+), 5 deletions(-)

diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index e5406cb39..b5760eb54 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -74,6 +74,10 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
       end
 
+      event :set_csv do
+        transitions from: %i[idle peaked non_jcamp], to: :csv
+      end
+
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 55d126943..f9b0fa521 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -56,7 +56,7 @@ class ViewSpectra extends React.Component {
     this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
     this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
     this.updateROPredict = this.updateROPredict.bind(this);
-    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
+    this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
   }
 
   componentDidMount() {
@@ -723,6 +723,12 @@ class ViewSpectra extends React.Component {
             maxTagCount={1}
             onChange={onSelectChange}
           />
+          <TreeSelect
+            treeData={options}
+            value={isShowMultiSelect ? arrSpcIdx : idx}
+            treeCheckable={isShowMultiSelect}
+            style={{ width: 500 }}
+            onChange={onSelectChange} />
         </div>
         <Button
           bsStyle="danger"
diff --git a/yarn.lock b/yarn.lock
index e77116145..5a95d9b3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2980,6 +2980,15 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@material-ui/utils@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
+  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mdi/js@^4.7.95":
   version "4.9.95"
   resolved "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz"
@@ -4139,6 +4148,16 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.25"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
+  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-slick@^0.23.4":
   version "0.23.8"
   resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.8.tgz"
@@ -5034,6 +5053,20 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -5123,7 +5156,22 @@ babel-plugin-polyfill-regenerator@^0.5.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
+
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
@@ -5133,6 +5181,227 @@ babel-plugin-syntax-object-rest-spread@^6.8.0:
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
+
+babel-plugin-transform-async-to-generator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
+  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
+  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
+  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
+  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
+  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
+  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -5141,7 +5410,109 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-plugin-transform-react-display-name@^6.23.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
+  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
+  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-source@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
+  dependencies:
+    babel-helper-builder-react-jsx "^6.24.1"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
+  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^3.2.6"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
+babel-preset-flow@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
+  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-react@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.23.0"
+    babel-plugin-transform-react-jsx "^6.24.1"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+    babel-preset-flow "^6.23.0"
+
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -5149,6 +5520,47 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -6981,7 +7393,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7166,6 +7578,11 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -13672,7 +14089,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.4.0, react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -13932,6 +14349,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -13942,6 +14364,15 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -14002,6 +14433,15 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -15190,6 +15630,11 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"

From e5d78844a014031f5aa3d9a0a5521e01384948ab Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 6 Mar 2023 21:38:32 +0100
Subject: [PATCH 107/258] Resolve "porting the 3d viewer"

---
 app/assets/stylesheets/repo_home.scss         |  22 ++++
 .../elements/details/samples/SampleDetails.js |   1 +
 .../analysesTab/SampleDetailsContainersAux.js |   5 +
 app/packs/src/libHome/RepoCommon.js           |  15 ++-
 app/packs/src/libHome/RepoMolViewerBtn.js     |  52 ++++++++
 app/packs/src/libHome/RepoMolViewerListBtn.js |  81 ++++++++++++
 .../src/libHome/RepoMolViewerListModal.js     | 117 ++++++++++++++++++
 app/packs/src/libHome/RepoMolViewerModal.js   |  38 ++++++
 app/serializers/molecule_guest_serializer.rb  |   2 +-
 package.json                                  |   1 +
 yarn.lock                                     |  22 ++++
 11 files changed, 350 insertions(+), 6 deletions(-)
 create mode 100644 app/packs/src/libHome/RepoMolViewerBtn.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerListBtn.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerListModal.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerModal.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index e7f605f1f..501641608 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -7,6 +7,28 @@ $bs-infocolor: #5bc0de;
 $bs-warningcolor: #f0ad4e;
 $bs-successcolor: #5cb85c;
 
+@mixin viewer-modal {
+  height: 95%;
+  top: 52% !important;
+  margin: unset !important;
+}
+
+.file-viewer-modal {
+  @include viewer-modal;
+  width: 98vw !important;
+  .modal-content {
+    height: 95%;
+  }
+}
+
+.structure-viewer-modal {
+  @include viewer-modal;
+  width: 60vw !important;
+  .modal-content {
+    height: calc(100% - 60px);
+  }
+}
+
 .repo-xvial-info {
   .env {
     padding: 0px 2px 0px 2px;
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index e83b2f60f..ae2676a62 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -87,6 +87,7 @@ import {
   validateMolecule,
 } from './PublishCommon';
 import SampleDetailsRepoComment from './SampleDetailsRepoComment';
+import RepoMolViewerBtn from '../libHome/RepoMolViewerBtn';
 
 const MWPrecision = 6;
 
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 33e10b6d0..631dd938d 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -21,6 +21,8 @@ import { previewContainerImage } from 'src/utilities/imageHelper';
 import { PublishedTag } from './PublishCommon';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 
+import RepoMolViewerListBtn from '../libHome/RepoMolViewerListBtn';
+
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
     &nbsp;
@@ -390,6 +392,9 @@ const headerBtnGroup = (
         hasNMRium={hasNMRium}
         isReviewer={isReviewer}
       />
+      <span className="button-right">
+        <RepoMolViewerListBtn el={sample} container={container} isPublic={false} />
+      </span>
       <span
         className="button-right add-to-report"
         onClick={stopBubble}
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 18053105d..8854c00c0 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -55,6 +55,8 @@ import RepoXvialButton from '../components/common/RepoXvialButton';
 import RepoPreviewImage from '../components/common/RepoPreviewImage';
 import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoSegment from './RepoSegment';
+import RepoMolViewerBtn from './RepoMolViewerBtn';
+import RepoMolViewerListBtn from './RepoMolViewerListBtn';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -89,8 +91,11 @@ const CollectionDesc = (props) => {
   );
 };
 
-const resizableSvg = path => (
-  <div className="preview-table" style={{ cursor: 'row-resize' }}><SvgFileZoomPan svgPath={path} duration={300} resize /></div>
+const resizableSvg = (path, extra = null) => (
+  <div className="preview-table" style={{ cursor: 'row-resize' }}>
+    {extra}
+    <SvgFileZoomPan svgPath={path} duration={300} resize />
+  </div>
 );
 
 const ChemotionId = props => (
@@ -943,7 +948,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   return (
     <Row>
       <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath)}
+        {resizableSvg(svgPath, <RepoMolViewerBtn isPublic fileContent={molecule.molfile} />)}
       </Col>
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
@@ -1009,7 +1014,7 @@ const RenderAnalysisHeader = (props) => {
       <br />
       <Row style={rinchiStyle}>
         <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath)}
+          {resizableSvg(svgPath, <RepoMolViewerBtn isPublic fileContent={element.molfile} />)}
         </Col>
         <Col sm={6} md={6} lg={6}>
           <span className="repo-pub-sample-header">
@@ -1777,7 +1782,7 @@ class RenderPublishAnalysesPanel extends Component {
         <div className="abstract">
           <div className="lower-text">
             <div className="sub-title">
-              <b>{kind}</b>&nbsp;
+              <b>{kind}</b>&nbsp;<RepoMolViewerListBtn el={element} container={analysis} isPublic={isPublic} />
               <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
               <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
             </div>
diff --git a/app/packs/src/libHome/RepoMolViewerBtn.js b/app/packs/src/libHome/RepoMolViewerBtn.js
new file mode 100644
index 000000000..e4654361b
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerBtn.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+import RepoMolViewerModal from './RepoMolViewerModal';
+
+const viewButtonTip = _short => <Tooltip id={uuid.v4()}>{_short}</Tooltip>;
+
+export default class RepoMolViewerBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { show: false };
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    const { show } = this.state;
+    this.setState({ show: !show });
+  }
+
+  render() {
+    const { fileContent, isPublic } = this.props;
+    const { show } = this.state;
+
+    const tooltip = viewButtonTip('Click to see structure in Viewer');
+
+    return (
+      <>
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <Button className="button-right" bsSize="xsmall" bsStyle="info" onClick={e => this.handleModalOpen(e, true)}>
+            <i className="fa fa-cube" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+        {
+          show ?
+            <RepoMolViewerModal
+              fileContent={fileContent}
+              handleModalOpen={e => this.handleModalOpen(e, false)}
+              show={show}
+              isPublic={isPublic}
+            /> : null
+        }
+      </>
+    );
+  }
+}
+
+RepoMolViewerBtn.propTypes = {
+  fileContent: PropTypes.string.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerListBtn.js b/app/packs/src/libHome/RepoMolViewerListBtn.js
new file mode 100644
index 000000000..d2931ecf3
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerListBtn.js
@@ -0,0 +1,81 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { filter } from 'lodash';
+import RepoMolViewerListModal from './RepoMolViewerListModal';
+import ArrayUtils from '../components/utils/ArrayUtils';
+
+export default class RepoMolViewerListBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { openModal: false };
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+    this.renderBtn = this.renderBtn.bind(this);
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    const { openModal } = this.state;
+    this.setState({ openModal: !openModal });
+  }
+
+  renderBtn(disabled) {
+    const btnStyle = disabled ? 'default' : 'info';
+    const tipDesc = disabled ? ' (Nothing to view)' : '';
+    const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
+    const className = this.props.isPublic ? '' : '';
+    return (
+      <OverlayTrigger
+        placement="top"
+        delayShow={500}
+        overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
+      >
+        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick}>
+          <i className="fa fa-cube" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  render() {
+    const { el, container, isPublic } = this.props;
+    const { openModal } = this.state;
+    if (!el) return null;
+
+    if (container?.children?.length < 1) { return this.renderBtn(true); }
+
+    let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+
+    datasetContainer = datasetContainer.map((dc) => {
+      const ds = Object.assign({}, dc);
+      const { attachments } = ds;
+      ds.attachments = attachments.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment.filename?.match(/\.([^.]+)$/)[1].toLowerCase()));
+      if (ds.attachments.length > 0) return ds;
+      return null;
+    });
+
+    datasetContainer = datasetContainer.filter(dc => dc !== null);
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+
+    return (
+      <>
+        {this.renderBtn(false)}
+        <RepoMolViewerListModal
+          handleModalOpen={this.handleModalOpen}
+          show={openModal}
+          title={el.short_label}
+          datasetContainer={datasetContainer}
+          isPublic={isPublic}
+        />
+      </>
+    );
+  }
+}
+
+RepoMolViewerListBtn.propTypes = {
+  el: PropTypes.object.isRequired,
+  container: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerListModal.js b/app/packs/src/libHome/RepoMolViewerListModal.js
new file mode 100644
index 000000000..62680753b
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerListModal.js
@@ -0,0 +1,117 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+
+export default class RepoMolViewerListModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: null,
+      activeKey: 1
+    };
+
+    this.list = this.list.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleFile = this.handleFile.bind(this);
+  }
+
+  handleSelect(e, activeKey) {
+    e.stopPropagation();
+    this.setState({ activeKey });
+  }
+
+  handleFile(e, attachment, ds) {
+    e.stopPropagation();
+    this.setState({ selected: { ...attachment, dsName: ds.name } });
+  }
+
+  list() {
+    const { datasetContainer } = this.props;
+    const { selected, activeKey } = this.state;
+    const defaultActiveKey = datasetContainer[0].id;
+    return (
+      <PanelGroup
+        accordion
+        id="accordion-controlled-example"
+        defaultActiveKey={defaultActiveKey}
+        style={{ width: '100%', height: 'calc(100vh - 200px)', overflow: 'auto' }}
+      >
+        {
+          datasetContainer.map((ds) => {
+            const { attachments } = ds;
+            return (
+              <Panel key={ds.id} eventKey={ds.id} onClick={e => this.handleSelect(e, ds.id)}>
+                <Panel.Heading>
+                  <Panel.Title toggle>{`Dataset: ${ds.name}`}</Panel.Title>
+                </Panel.Heading>
+                <Panel.Body style={{ padding: '0px' }} collapsible>
+                  <Nav bsStyle="pills" stacked activeKey={activeKey}>
+                    {
+                      attachments.map(attachment => (
+                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => this.handleFile(e, attachment, ds)}>
+                          <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
+                        </NavItem>
+                      ))
+                    }
+                  </Nav>
+                </Panel.Body>
+              </Panel>
+            );
+          })
+        }
+      </PanelGroup>
+    );
+  }
+
+  handleModal(e) {
+    if (e) e.stopPropagation();
+    const { handleModalOpen } = this.props;
+    handleModalOpen();
+  }
+
+  render() {
+    const {
+      show, isPublic, datasetContainer
+    } = this.props;
+    let { selected } = this.state;
+    if (!selected) {
+      const ds = datasetContainer[0];
+      const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
+      selected = { ...file, dsName: ds.name };
+    }
+
+    const filePath = isPublic ?
+      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
+      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
+
+    if (show) {
+      return (
+        <Modal backdrop="static" animation dialogClassName="file-viewer-modal" show={show} onHide={e => this.handleModal(e)}>
+          <Modal.Header onClick={e => e.stopPropagation()} closeButton>
+            <Modal.Title>Dataset: {selected.dsName} / File: {selected?.filename}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body onClick={e => e.stopPropagation()}>
+            <Col md={2} sm={2} lg={2}>
+              {this.list()}
+            </Col>
+            <Col md={10} sm={10} lg={10}>
+              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
+                <ReactNglViewer fileName={selected?.filename} filePath={filePath} />
+              </div>
+            </Col>
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return <span />;
+  }
+}
+
+RepoMolViewerListModal.propTypes = {
+  datasetContainer: PropTypes.array.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+  show: PropTypes.bool.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerModal.js b/app/packs/src/libHome/RepoMolViewerModal.js
new file mode 100644
index 000000000..165c3d2eb
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerModal.js
@@ -0,0 +1,38 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+
+const RepoMolViewerModal = (props) => {
+  const {
+    fileContent, show, title, handleModalOpen
+  } = props;
+  const filePath = new Blob([fileContent], { type: 'text/plain' });
+  if (show) {
+    return (
+      <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={() => handleModalOpen(false)}>
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
+            <ReactNglViewer fileName={`${title}.mol`} filePath={filePath} />
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+  return <span />;
+};
+
+RepoMolViewerModal.propTypes = {
+  fileContent: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+  title: PropTypes.string,
+};
+
+RepoMolViewerModal.defaultProps = { title: 'Structure Viewer' };
+
+export default RepoMolViewerModal;
diff --git a/app/serializers/molecule_guest_serializer.rb b/app/serializers/molecule_guest_serializer.rb
index 981e8430c..e847a219e 100644
--- a/app/serializers/molecule_guest_serializer.rb
+++ b/app/serializers/molecule_guest_serializer.rb
@@ -1,4 +1,4 @@
 class MoleculeGuestSerializer < ActiveModel::Serializer
   attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight
+    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight, :molfile
 end
diff --git a/package.json b/package.json
index e64986f12..fa3c391c2 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "react-json-editor-ajrm": "^2.5.10",
     "react-markdown": "^6.0.2",
     "react-modal-resizable-draggable": "^0.1.6",
+    "react-nglviewer": "^0.5.0",
     "react-notification-system": "^0.2.7",
     "react-papaparse": "^3.17.2",
     "react-pdf": "^5.3.0-beta",
diff --git a/yarn.lock b/yarn.lock
index 5a95d9b3e..f780bf50d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6070,6 +6070,11 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chroma-js@^1.3.7:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
+  integrity sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz"
@@ -12679,6 +12684,11 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise-polyfill@^8.0.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz"
@@ -13741,6 +13751,13 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
+react-nglviewer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.5.0.tgz#920f3332d56aa4ed002978fefc83974d6fe232ec"
+  integrity sha512-6zAJY2uJ6TcyFICdaLkKC0Q+2vq/nlsuNFF4yEJosIt1qz8FF8b+GLmQcEvYRHGK7mhMO91rBX2j8qA0rrTz/w==
+  dependencies:
+    ngl "^2.1.0"
+
 react-notification-system@^0.2.17, react-notification-system@^0.2.7:
   version "0.2.17"
   resolved "https://registry.npmjs.org/react-notification-system/-/react-notification-system-0.2.17.tgz"
@@ -15214,6 +15231,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+sprintf-js@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
+  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"

From c2c37534b04390908cd8cf89497f314a921610cc Mon Sep 17 00:00:00 2001
From: "pei-chi.huang" <pei-chi.huang@kit.edu>
Date: Mon, 6 Mar 2023 22:01:02 +0100
Subject: [PATCH 108/258] Revert "Merge branch '520-upgrade-chemspectra' into
 'server_chemotion_net-5'"

This reverts merge request !471
---
 app/api/chemotion/chem_spectra_api.rb         |   2 -
 app/models/concerns/attachment_jcamp_aasm.rb  |   6 +-
 .../apps/mydb/elements/details/ViewSpectra.js |  25 +-
 .../src/stores/alt/stores/SpectraStore.js     |  12 +-
 lib/chemotion/jcamp.rb                        |   1 -
 yarn.lock                                     | 648 +-----------------
 6 files changed, 31 insertions(+), 663 deletions(-)

diff --git a/app/api/chemotion/chem_spectra_api.rb b/app/api/chemotion/chem_spectra_api.rb
index ac1d5437a..2be835c67 100644
--- a/app/api/chemotion/chem_spectra_api.rb
+++ b/app/api/chemotion/chem_spectra_api.rb
@@ -111,8 +111,6 @@ def raw_file(att)
           optional :predict, type: String
           optional :molfile
           optional :waveLength, type: String
-          optional :cyclicvolta, type: String
-          optional :curveIdx, type: Integer
         end
         post 'save' do
           env['api.format'] = :binary
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index b5760eb54..c983a71c2 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -74,10 +74,6 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
       end
 
-      event :set_csv do
-        transitions from: %i[idle peaked non_jcamp], to: :csv
-      end
-
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
@@ -302,7 +298,7 @@ def edit_process(is_regen, orig_params)
     end
 
     set_backup
-    delete_tmps(tmp_files_to_be_deleted)
+    delete_tmps([tmp_jcamp, tmp_img])
     delete_related_imgs(img_att)
     delete_related_edit_peak(jcamp_att)
     jcamp_att
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index f9b0fa521..708cb4287 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -4,7 +4,6 @@ import { SpectraEditor, FN } from '@complat/react-spectra-editor';
 import { Modal, Well, Button } from 'react-bootstrap';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
-import TreeSelect from 'antd/lib/tree-select';
 
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import SpectraActions from 'src/stores/alt/actions/SpectraActions';
@@ -56,7 +55,7 @@ class ViewSpectra extends React.Component {
     this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
     this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
     this.updateROPredict = this.updateROPredict.bind(this);
-    this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
+    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
   }
 
   componentDidMount() {
@@ -335,7 +334,7 @@ class ViewSpectra extends React.Component {
 
   writeCommon({
     peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
-    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt
+    keepPred, isIntensity, multiplicity, integration,
   }, isMpy = false) {
     const { sample, handleSampleChanged } = this.props;
     const si = this.getSpcInfo();
@@ -373,7 +372,7 @@ class ViewSpectra extends React.Component {
 
     const cb = () => (
       this.saveOp({
-        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt
+        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity,
       })
     );
     handleSampleChanged(sample, cb);
@@ -405,7 +404,6 @@ class ViewSpectra extends React.Component {
     const peaksStr = FN.toPeakStr(fPeaks);
     const predict = JSON.stringify(rmRefreshed(analysis));
     const waveLengthStr = JSON.stringify(waveLength);
-    const cyclicvolta = JSON.stringify(cyclicvoltaSt);
 
     const { shifts } = shift;
     const selectedShift = shifts[curveIdx];
@@ -463,10 +461,10 @@ class ViewSpectra extends React.Component {
   }
 
   saveCloseOp({
-    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength
   }) {
     this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength
     });
     this.closeOp();
   }
@@ -624,7 +622,7 @@ class ViewSpectra extends React.Component {
     );
   }
 
-  renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles) {
+  renderSpectraEditor(jcamp, predictions) {
     const { sample } = this.props;
     const {
       entity, isExist,
@@ -649,7 +647,7 @@ class ViewSpectra extends React.Component {
     }
 
     const others = this.buildOthers();
-    const operations = this.buildOpsByLayout(currEntity);
+    const operations = this.buildOpsByLayout(entity);
     const descriptions = this.getQDescVal();
     const forecast = {
       btnCb: this.predictOp,
@@ -683,7 +681,7 @@ class ViewSpectra extends React.Component {
   }
 
   renderTitle(idx) {
-    const { spcInfos, arrSpcIdx } = this.state;
+    const { spcInfos } = this.state;
     const si = this.getSpcInfo();
     if (!si) return null;
     const modalTitle = si ? `Spectra Editor - ${si.title}` : '';
@@ -709,8 +707,8 @@ class ViewSpectra extends React.Component {
         </span>
         <div style={{ display: 'inline-flex', margin: '0 0 0 100px' }}>
           <Select
-            options={dsOptions}
-            value={si.idDt}
+            options={options}
+            value={idx}
             clearable={false}
             style={{ width: 200 }}
             onChange={(e) => this.onDSSelectChange(e)}
@@ -728,7 +726,8 @@ class ViewSpectra extends React.Component {
             value={isShowMultiSelect ? arrSpcIdx : idx}
             treeCheckable={isShowMultiSelect}
             style={{ width: 500 }}
-            onChange={onSelectChange} />
+            onChange={onSelectChange}
+          />
         </div>
         <Button
           bsStyle="danger"
diff --git a/app/packs/src/stores/alt/stores/SpectraStore.js b/app/packs/src/stores/alt/stores/SpectraStore.js
index b2657281c..2247f6171 100644
--- a/app/packs/src/stores/alt/stores/SpectraStore.js
+++ b/app/packs/src/stores/alt/stores/SpectraStore.js
@@ -14,7 +14,6 @@ class SpectraStore {
     this.spcMetas = [];
     this.spcInfos = [];
     this.spcIdx = 0;
-    this.arrSpcIdx = [];
     this.showModal = false;
     this.fetched = false;
     this.writing = false;
@@ -113,23 +112,19 @@ class SpectraStore {
     const fetchedIdx = fsm.idx;
     const prevIdx = spcInfo.idx;
     const fsi = Object.assign({}, spcInfo, { idx: fetchedIdx }); //  shortcut
-    const { spcInfos, spcMetas, arrSpcIdx } = this;
+    const { spcInfos, spcMetas } = this;
     const newSpcInfos = spcInfos.map(si => (
       si.idx === prevIdx ? fsi : si
     )).filter(r => r !== null);
     const newSpcMetas = spcMetas.map(sm => (
       sm.idx === prevIdx ? fsm : sm
     )).filter(r => r !== null);
-    const newArrSpcIdx = arrSpcIdx.map(spci => (
-      spci === prevIdx ? fetchedIdx : spci
-    )).filter(r => r !== null);
     this.setState({
       spcInfos: newSpcInfos,
       spcMetas: newSpcMetas,
       fetched: true,
       spcIdx: fetchedIdx,
       others: [],
-      arrSpcIdx: newArrSpcIdx,
     });
   }
 
@@ -168,9 +163,8 @@ class SpectraStore {
     this.replacePredictions(targetPreds);
   }
 
-  handleSelectIdx(payload) {
-    const { spcIdx, arrSpcIdx } = payload;
-    this.setState({ spcIdx, arrSpcIdx, others: [] });
+  handleSelectIdx(spcIdx) {
+    this.setState({ spcIdx, others: [] });
   }
 
   replacePredictions(predictions) {
diff --git a/lib/chemotion/jcamp.rb b/lib/chemotion/jcamp.rb
index 5178ecad4..9b45292d0 100644
--- a/lib/chemotion/jcamp.rb
+++ b/lib/chemotion/jcamp.rb
@@ -57,7 +57,6 @@ def self.extract_zip(rsp_io)
             data = entry.get_input_stream.read.force_encoding('UTF-8')
             if %w[png].include?(ext)
               tmp_img = generate_tmp_file(data, ext)
-              arr_img.push(tmp_img)
             elsif %w[dx jdx jcamp mzml raw cdf zip].include?(ext.downcase)
               tmp_jcamp = generate_tmp_file(data, ext)
               arr_jcamp.push(tmp_jcamp)
diff --git a/yarn.lock b/yarn.lock
index f780bf50d..c8b07fa14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2310,9 +2310,14 @@
   resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.1.tgz#0fe8eb7008eabaebf3997ef3f11f0e1dcbb59206"
   integrity sha512-EnL9Y6rAzJwxk++npnUEOEzKsPNHRXBy0jbWA1MFFc3CYdLyh2tHFHUhwDWp+c9teQic2h/bhGEmz8fNe/thUA==
   dependencies:
+    "@material-ui/core" "^3.9.3"
+    "@material-ui/icons" "^3.0.2"
+    "@mdi/js" "^4.7.95"
+    "@mdi/react" "^1.2.1"
     babel-plugin-transform-object-rest-spread "^6.26.0"
     d3 "6.7.0"
     regenerator-transform "^0.13.3"
+    reselect "^4.0.0"
 
 "@cypress/request@^2.88.10":
   version "2.88.10"
@@ -2474,7 +2479,7 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
+"@emotion/hash@0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
@@ -2980,15 +2985,6 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
 "@mdi/js@^4.7.95":
   version "4.9.95"
   resolved "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz"
@@ -4148,16 +4144,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.25"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
-  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-slick@^0.23.4":
   version "0.23.8"
   resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.8.tgz"
@@ -4165,7 +4151,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0":
+"@types/react-transition-group@^4.4.0":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
   integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
@@ -5053,20 +5039,6 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-check-es2015-constants@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
-  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -5156,252 +5128,16 @@ babel-plugin-polyfill-regenerator@^0.5.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.0"
 
-babel-plugin-syntax-async-functions@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
-  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
-
-babel-plugin-syntax-exponentiation-operator@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
-  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
-
-babel-plugin-syntax-flow@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
-  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
-
-babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
 
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
-babel-plugin-syntax-trailing-function-commas@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
-  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
-
-babel-plugin-transform-async-to-generator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
-  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
-  dependencies:
-    babel-helper-remap-async-to-generator "^6.24.1"
-    babel-plugin-syntax-async-functions "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-arrow-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
-  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
-  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoping@^6.23.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
-  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-plugin-transform-es2015-classes@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
-  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
-  dependencies:
-    babel-helper-define-map "^6.24.1"
-    babel-helper-function-name "^6.24.1"
-    babel-helper-optimise-call-expression "^6.24.1"
-    babel-helper-replace-supers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-computed-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
-  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-destructuring@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
-  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
-  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-for-of@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
-  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-function-name@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
-  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
-  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
-  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
-  dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
-  version "6.26.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
-  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
-babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
-  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
-  dependencies:
-    babel-helper-hoist-variables "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-umd@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
-  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
-  dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-object-super@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
-  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
-  dependencies:
-    babel-helper-replace-supers "^6.24.1"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-parameters@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
-  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
-  dependencies:
-    babel-helper-call-delegate "^6.24.1"
-    babel-helper-get-function-arity "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
-  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-spread@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
-  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-sticky-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
-  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-template-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
-  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
-  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-unicode-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
-  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    regexpu-core "^2.0.0"
-
-babel-plugin-transform-exponentiation-operator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
-  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
-  dependencies:
-    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
-    babel-plugin-syntax-exponentiation-operator "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-flow-strip-types@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
-  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
-  dependencies:
-    babel-plugin-syntax-flow "^6.18.0"
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -5410,109 +5146,7 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-plugin-transform-react-display-name@^6.23.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
-  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-self@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
-  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-source@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
-  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
-  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
-  dependencies:
-    babel-helper-builder-react-jsx "^6.24.1"
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-regenerator@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
-  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
-  dependencies:
-    regenerator-transform "^0.10.0"
-
-babel-plugin-transform-strict-mode@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
-  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-preset-env@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
-  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.22.0"
-    babel-plugin-syntax-trailing-function-commas "^6.22.0"
-    babel-plugin-transform-async-to-generator "^6.22.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.23.0"
-    babel-plugin-transform-es2015-classes "^6.23.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
-    babel-plugin-transform-es2015-destructuring "^6.23.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
-    babel-plugin-transform-es2015-for-of "^6.23.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
-    babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.22.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-umd "^6.23.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.23.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
-    babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
-    babel-plugin-transform-es2015-template-literals "^6.22.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-exponentiation-operator "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
-    browserslist "^3.2.6"
-    invariant "^2.2.2"
-    semver "^5.3.0"
-
-babel-preset-flow@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
-  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
-  dependencies:
-    babel-plugin-transform-flow-strip-types "^6.22.0"
-
-babel-preset-react@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
-  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.3.13"
-    babel-plugin-transform-react-display-name "^6.23.0"
-    babel-plugin-transform-react-jsx "^6.24.1"
-    babel-plugin-transform-react-jsx-self "^6.22.0"
-    babel-plugin-transform-react-jsx-source "^6.22.0"
-    babel-preset-flow "^6.23.0"
-
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -5520,47 +5154,6 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.24.1, babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.24.1, babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -6755,23 +6348,11 @@ d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   resolved "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
-d3-array@2, d3-array@^2.3.0, d3-array@^2.5.0:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
-  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
-  dependencies:
-    internmap "^1.0.0"
-
 d3-axis@1:
   version "1.0.12"
   resolved "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz"
   integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
 
-d3-axis@2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.1.0.tgz#978db534092711117d032fad5d733d206307f6a0"
-  integrity sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw==
-
 d3-brush@1:
   version "1.1.6"
   resolved "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz"
@@ -6813,13 +6394,6 @@ d3-chord@1:
     d3-array "1"
     d3-path "1"
 
-d3-chord@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-2.0.0.tgz#32491b5665391180560f738e5c1ccd1e3c47ebae"
-  integrity sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==
-  dependencies:
-    d3-path "1 - 2"
-
 d3-collection@1, d3-collection@^1.0.3, d3-collection@^1.0.4:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz"
@@ -6830,11 +6404,6 @@ d3-color@1, d3-color@^1.0.3:
   resolved "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz"
   integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
 
-"d3-color@1 - 2", d3-color@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
-  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
-
 "d3-color@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
@@ -6847,30 +6416,11 @@ d3-contour@1, d3-contour@^1.1.0:
   dependencies:
     d3-array "^1.1.1"
 
-d3-contour@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-2.0.0.tgz#80ee834988563e3bea9d99ddde72c0f8c089ea40"
-  integrity sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==
-  dependencies:
-    d3-array "2"
-
-d3-delaunay@5:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
-  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
-  dependencies:
-    delaunator "4"
-
 d3-dispatch@1:
   version "1.0.6"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz"
   integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
 
-"d3-dispatch@1 - 2", d3-dispatch@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
-  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
-
 "d3-dispatch@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
@@ -6909,25 +6459,11 @@ d3-dsv@1:
     iconv-lite "0.4"
     rw "1"
 
-"d3-dsv@1 - 2", d3-dsv@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-2.0.0.tgz#b37b194b6df42da513a120d913ad1be22b5fe7c5"
-  integrity sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==
-  dependencies:
-    commander "2"
-    iconv-lite "0.4"
-    rw "1"
-
 d3-ease@1:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz"
   integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
 
-"d3-ease@1 - 2", d3-ease@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
-  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
-
 "d3-ease@1 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
@@ -6940,13 +6476,6 @@ d3-fetch@1:
   dependencies:
     d3-dsv "1"
 
-d3-fetch@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-2.0.0.tgz#ecd7ef2128d9847a3b41b548fec80918d645c064"
-  integrity sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==
-  dependencies:
-    d3-dsv "1 - 2"
-
 d3-force@1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz"
@@ -6957,25 +6486,11 @@ d3-force@1:
     d3-quadtree "1"
     d3-timer "1"
 
-d3-force@2:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.1.1.tgz#f20ccbf1e6c9e80add1926f09b51f686a8bc0937"
-  integrity sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==
-  dependencies:
-    d3-dispatch "1 - 2"
-    d3-quadtree "1 - 2"
-    d3-timer "1 - 2"
-
 d3-format@1, d3-format@^1.2.0:
   version "1.4.5"
   resolved "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
-"d3-format@1 - 2", d3-format@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
-  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
-
 d3-geo@1, d3-geo@^1.6.4:
   version "1.12.1"
   resolved "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz"
@@ -6983,23 +6498,11 @@ d3-geo@1, d3-geo@^1.6.4:
   dependencies:
     d3-array "1"
 
-d3-geo@2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-2.0.2.tgz#c065c1b71fe8c5f1be657e5f43d9bdd010383c40"
-  integrity sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==
-  dependencies:
-    d3-array "^2.5.0"
-
 d3-hierarchy@1, d3-hierarchy@^1.1.4:
   version "1.1.9"
   resolved "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz"
   integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
 
-d3-hierarchy@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz#dab88a58ca3e7a1bc6cab390e89667fcc6d20218"
-  integrity sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==
-
 d3-interpolate@1, d3-interpolate@^1.1.4:
   version "1.4.0"
   resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz"
@@ -7007,13 +6510,6 @@ d3-interpolate@1, d3-interpolate@^1.1.4:
   dependencies:
     d3-color "1"
 
-"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@2:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
-  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
-  dependencies:
-    d3-color "1 - 2"
-
 "d3-interpolate@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz"
@@ -7026,41 +6522,21 @@ d3-path@1:
   resolved "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz"
   integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
 
-"d3-path@1 - 2", d3-path@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
-  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
-
 d3-polygon@1:
   version "1.0.6"
   resolved "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz"
   integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
 
-d3-polygon@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-2.0.0.tgz#13608ef042fbec625ba1598327564f03c0396d8e"
-  integrity sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==
-
 d3-quadtree@1:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz"
   integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
 
-"d3-quadtree@1 - 2", d3-quadtree@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz#edbad045cef88701f6fee3aee8e93fb332d30f9d"
-  integrity sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==
-
 d3-random@1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz"
   integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==
 
-d3-random@2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-2.2.2.tgz#5eebd209ef4e45a2b362b019c1fb21c2c98cbb6e"
-  integrity sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==
-
 d3-sankey@^0.7.1:
   version "0.7.1"
   resolved "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.7.1.tgz"
@@ -7078,14 +6554,6 @@ d3-scale-chromatic@1:
     d3-color "1"
     d3-interpolate "1"
 
-d3-scale-chromatic@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
-  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
-  dependencies:
-    d3-color "1 - 2"
-    d3-interpolate "1 - 2"
-
 d3-scale@2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz"
@@ -7098,17 +6566,6 @@ d3-scale@2:
     d3-time "1"
     d3-time-format "2"
 
-d3-scale@3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
-  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
-  dependencies:
-    d3-array "^2.3.0"
-    d3-format "1 - 2"
-    d3-interpolate "1.2.0 - 2"
-    d3-time "^2.1.1"
-    d3-time-format "2 - 3"
-
 d3-scale@^1.0.5:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz"
@@ -7144,13 +6601,6 @@ d3-shape@1, d3-shape@^1.1.0, d3-shape@^1.2.0:
   dependencies:
     d3-path "1"
 
-d3-shape@2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
-  integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
-  dependencies:
-    d3-path "1 - 2"
-
 d3-time-format@2:
   version "2.3.0"
   resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz"
@@ -7158,35 +6608,16 @@ d3-time-format@2:
   dependencies:
     d3-time "1"
 
-"d3-time-format@2 - 3", d3-time-format@3:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
-  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
-  dependencies:
-    d3-time "1 - 2"
-
 d3-time@1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
-"d3-time@1 - 2", d3-time@2, d3-time@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
-  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
-  dependencies:
-    d3-array "2"
-
 d3-timer@1:
   version "1.0.10"
   resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz"
   integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
 
-"d3-timer@1 - 2", d3-timer@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
-  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
-
 "d3-timer@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz"
@@ -7250,17 +6681,6 @@ d3-zoom@1:
     d3-selection "1"
     d3-transition "1"
 
-d3-zoom@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-2.0.0.tgz#f04d0afd05518becce879d04709c47ecd93fba54"
-  integrity sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==
-  dependencies:
-    d3-dispatch "1 - 2"
-    d3-drag "2"
-    d3-interpolate "1 - 2"
-    d3-selection "2"
-    d3-transition "2"
-
 d3-zoom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
@@ -7398,7 +6818,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7583,11 +7003,6 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -12358,7 +11773,7 @@ papaparse@^5.3.1:
   resolved "https://registry.npmjs.org/papaparse/-/papaparse-5.3.1.tgz"
   integrity sha512-Dbt2yjLJrCwH2sRqKFFJaN5XgIASO9YOFeFP8rIBRG2Ain8mqk5r1M6DkfvqEVozVcz3r3HaUGw253hA1nLIcA==
 
-parchment@^1.1.2, parchment@^1.1.4:
+parchment@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz"
   integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
@@ -12565,11 +11980,6 @@ pnp-webpack-plugin@^1.7.0:
   dependencies:
     ts-pnp "^1.1.6"
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 popper.js@^1.14.1, popper.js@^1.16.0:
   version "1.16.1"
   resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz"
@@ -12858,7 +12268,7 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.3.7:
+quill@^1.2.6, quill@^1.3.7:
   version "1.3.7"
   resolved "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
@@ -14106,7 +13516,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.0, react-transition-group@^4.4.1:
+react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -14366,11 +13776,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -14381,15 +13786,6 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
-regenerator-transform@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
-  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
-  dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
-    private "^0.1.6"
-
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -14450,15 +13846,6 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
-  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
-
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -15635,7 +15022,7 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -15652,11 +15039,6 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"

From 4c655868dd5981e56876070f441d208c9715a916 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 2 Mar 2023 17:30:35 +0100
Subject: [PATCH 109/258] upgrade chemspectra

---
 app/api/chemotion/chem_spectra_api.rb         |   2 +
 app/models/concerns/attachment_jcamp_aasm.rb  |   4 +
 .../apps/mydb/elements/details/ViewSpectra.js |  28 +-
 .../src/stores/alt/stores/SpectraStore.js     |  12 +-
 lib/chemotion/jcamp.rb                        |   1 +
 yarn.lock                                     | 648 +++++++++++++++++-
 6 files changed, 667 insertions(+), 28 deletions(-)

diff --git a/app/api/chemotion/chem_spectra_api.rb b/app/api/chemotion/chem_spectra_api.rb
index 2be835c67..ac1d5437a 100644
--- a/app/api/chemotion/chem_spectra_api.rb
+++ b/app/api/chemotion/chem_spectra_api.rb
@@ -111,6 +111,8 @@ def raw_file(att)
           optional :predict, type: String
           optional :molfile
           optional :waveLength, type: String
+          optional :cyclicvolta, type: String
+          optional :curveIdx, type: Integer
         end
         post 'save' do
           env['api.format'] = :binary
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index c983a71c2..d6f2f081d 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -74,6 +74,10 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
       end
 
+      event :set_csv do
+        transitions from: %i[idle peaked non_jcamp], to: :csv
+      end
+
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 708cb4287..c2939f794 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -4,6 +4,7 @@ import { SpectraEditor, FN } from '@complat/react-spectra-editor';
 import { Modal, Well, Button } from 'react-bootstrap';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
+import TreeSelect from 'antd/lib/tree-select';
 
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import SpectraActions from 'src/stores/alt/actions/SpectraActions';
@@ -55,7 +56,7 @@ class ViewSpectra extends React.Component {
     this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
     this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
     this.updateROPredict = this.updateROPredict.bind(this);
-    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
+    this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
   }
 
   componentDidMount() {
@@ -334,7 +335,7 @@ class ViewSpectra extends React.Component {
 
   writeCommon({
     peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
-    keepPred, isIntensity, multiplicity, integration,
+    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt
   }, isMpy = false) {
     const { sample, handleSampleChanged } = this.props;
     const si = this.getSpcInfo();
@@ -372,7 +373,7 @@ class ViewSpectra extends React.Component {
 
     const cb = () => (
       this.saveOp({
-        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity,
+        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt
       })
     );
     handleSampleChanged(sample, cb);
@@ -404,6 +405,7 @@ class ViewSpectra extends React.Component {
     const peaksStr = FN.toPeakStr(fPeaks);
     const predict = JSON.stringify(rmRefreshed(analysis));
     const waveLengthStr = JSON.stringify(waveLength);
+    const cyclicvolta = JSON.stringify(cyclicvoltaSt);
 
     const { shifts } = shift;
     const selectedShift = shifts[curveIdx];
@@ -461,10 +463,10 @@ class ViewSpectra extends React.Component {
   }
 
   saveCloseOp({
-    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength
+    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
   }) {
     this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
     });
     this.closeOp();
   }
@@ -622,7 +624,7 @@ class ViewSpectra extends React.Component {
     );
   }
 
-  renderSpectraEditor(jcamp, predictions) {
+  renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles) {
     const { sample } = this.props;
     const {
       entity, isExist,
@@ -647,7 +649,7 @@ class ViewSpectra extends React.Component {
     }
 
     const others = this.buildOthers();
-    const operations = this.buildOpsByLayout(entity);
+    const operations = this.buildOpsByLayout(currEntity);
     const descriptions = this.getQDescVal();
     const forecast = {
       btnCb: this.predictOp,
@@ -681,7 +683,7 @@ class ViewSpectra extends React.Component {
   }
 
   renderTitle(idx) {
-    const { spcInfos } = this.state;
+    const { spcInfos, arrSpcIdx } = this.state;
     const si = this.getSpcInfo();
     if (!si) return null;
     const modalTitle = si ? `Spectra Editor - ${si.title}` : '';
@@ -707,8 +709,8 @@ class ViewSpectra extends React.Component {
         </span>
         <div style={{ display: 'inline-flex', margin: '0 0 0 100px' }}>
           <Select
-            options={options}
-            value={idx}
+            options={dsOptions}
+            value={si.idDt}
             clearable={false}
             style={{ width: 200 }}
             onChange={(e) => this.onDSSelectChange(e)}
@@ -728,6 +730,12 @@ class ViewSpectra extends React.Component {
             style={{ width: 500 }}
             onChange={onSelectChange}
           />
+          <TreeSelect
+            treeData={options}
+            value={isShowMultiSelect ? arrSpcIdx : idx}
+            treeCheckable={isShowMultiSelect}
+            style={{ width: 500 }}
+            onChange={onSelectChange} />
         </div>
         <Button
           bsStyle="danger"
diff --git a/app/packs/src/stores/alt/stores/SpectraStore.js b/app/packs/src/stores/alt/stores/SpectraStore.js
index 2247f6171..b2657281c 100644
--- a/app/packs/src/stores/alt/stores/SpectraStore.js
+++ b/app/packs/src/stores/alt/stores/SpectraStore.js
@@ -14,6 +14,7 @@ class SpectraStore {
     this.spcMetas = [];
     this.spcInfos = [];
     this.spcIdx = 0;
+    this.arrSpcIdx = [];
     this.showModal = false;
     this.fetched = false;
     this.writing = false;
@@ -112,19 +113,23 @@ class SpectraStore {
     const fetchedIdx = fsm.idx;
     const prevIdx = spcInfo.idx;
     const fsi = Object.assign({}, spcInfo, { idx: fetchedIdx }); //  shortcut
-    const { spcInfos, spcMetas } = this;
+    const { spcInfos, spcMetas, arrSpcIdx } = this;
     const newSpcInfos = spcInfos.map(si => (
       si.idx === prevIdx ? fsi : si
     )).filter(r => r !== null);
     const newSpcMetas = spcMetas.map(sm => (
       sm.idx === prevIdx ? fsm : sm
     )).filter(r => r !== null);
+    const newArrSpcIdx = arrSpcIdx.map(spci => (
+      spci === prevIdx ? fetchedIdx : spci
+    )).filter(r => r !== null);
     this.setState({
       spcInfos: newSpcInfos,
       spcMetas: newSpcMetas,
       fetched: true,
       spcIdx: fetchedIdx,
       others: [],
+      arrSpcIdx: newArrSpcIdx,
     });
   }
 
@@ -163,8 +168,9 @@ class SpectraStore {
     this.replacePredictions(targetPreds);
   }
 
-  handleSelectIdx(spcIdx) {
-    this.setState({ spcIdx, others: [] });
+  handleSelectIdx(payload) {
+    const { spcIdx, arrSpcIdx } = payload;
+    this.setState({ spcIdx, arrSpcIdx, others: [] });
   }
 
   replacePredictions(predictions) {
diff --git a/lib/chemotion/jcamp.rb b/lib/chemotion/jcamp.rb
index 9b45292d0..5178ecad4 100644
--- a/lib/chemotion/jcamp.rb
+++ b/lib/chemotion/jcamp.rb
@@ -57,6 +57,7 @@ def self.extract_zip(rsp_io)
             data = entry.get_input_stream.read.force_encoding('UTF-8')
             if %w[png].include?(ext)
               tmp_img = generate_tmp_file(data, ext)
+              arr_img.push(tmp_img)
             elsif %w[dx jdx jcamp mzml raw cdf zip].include?(ext.downcase)
               tmp_jcamp = generate_tmp_file(data, ext)
               arr_jcamp.push(tmp_jcamp)
diff --git a/yarn.lock b/yarn.lock
index c8b07fa14..f780bf50d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2310,14 +2310,9 @@
   resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.1.tgz#0fe8eb7008eabaebf3997ef3f11f0e1dcbb59206"
   integrity sha512-EnL9Y6rAzJwxk++npnUEOEzKsPNHRXBy0jbWA1MFFc3CYdLyh2tHFHUhwDWp+c9teQic2h/bhGEmz8fNe/thUA==
   dependencies:
-    "@material-ui/core" "^3.9.3"
-    "@material-ui/icons" "^3.0.2"
-    "@mdi/js" "^4.7.95"
-    "@mdi/react" "^1.2.1"
     babel-plugin-transform-object-rest-spread "^6.26.0"
     d3 "6.7.0"
     regenerator-transform "^0.13.3"
-    reselect "^4.0.0"
 
 "@cypress/request@^2.88.10":
   version "2.88.10"
@@ -2479,7 +2474,7 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/hash@0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
@@ -2985,6 +2980,15 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@material-ui/utils@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
+  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mdi/js@^4.7.95":
   version "4.9.95"
   resolved "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz"
@@ -4144,6 +4148,16 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.25"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
+  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-slick@^0.23.4":
   version "0.23.8"
   resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.8.tgz"
@@ -4151,7 +4165,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.0":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
   integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
@@ -5039,6 +5053,20 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -5128,16 +5156,252 @@ babel-plugin-polyfill-regenerator@^0.5.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
+
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
 
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
+
+babel-plugin-transform-async-to-generator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
+  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
+  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
+  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
+  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
+  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
+  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -5146,7 +5410,109 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-plugin-transform-react-display-name@^6.23.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
+  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
+  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-source@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
+  dependencies:
+    babel-helper-builder-react-jsx "^6.24.1"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
+  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^3.2.6"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
+babel-preset-flow@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
+  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-react@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.23.0"
+    babel-plugin-transform-react-jsx "^6.24.1"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+    babel-preset-flow "^6.23.0"
+
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -5154,6 +5520,47 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -6348,11 +6755,23 @@ d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   resolved "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
+d3-array@2, d3-array@^2.3.0, d3-array@^2.5.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
 d3-axis@1:
   version "1.0.12"
   resolved "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz"
   integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
 
+d3-axis@2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.1.0.tgz#978db534092711117d032fad5d733d206307f6a0"
+  integrity sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw==
+
 d3-brush@1:
   version "1.1.6"
   resolved "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz"
@@ -6394,6 +6813,13 @@ d3-chord@1:
     d3-array "1"
     d3-path "1"
 
+d3-chord@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-2.0.0.tgz#32491b5665391180560f738e5c1ccd1e3c47ebae"
+  integrity sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==
+  dependencies:
+    d3-path "1 - 2"
+
 d3-collection@1, d3-collection@^1.0.3, d3-collection@^1.0.4:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz"
@@ -6404,6 +6830,11 @@ d3-color@1, d3-color@^1.0.3:
   resolved "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz"
   integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
 
+"d3-color@1 - 2", d3-color@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
 "d3-color@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
@@ -6416,11 +6847,30 @@ d3-contour@1, d3-contour@^1.1.0:
   dependencies:
     d3-array "^1.1.1"
 
+d3-contour@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-2.0.0.tgz#80ee834988563e3bea9d99ddde72c0f8c089ea40"
+  integrity sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==
+  dependencies:
+    d3-array "2"
+
+d3-delaunay@5:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
+  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
+  dependencies:
+    delaunator "4"
+
 d3-dispatch@1:
   version "1.0.6"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz"
   integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
 
+"d3-dispatch@1 - 2", d3-dispatch@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
+  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+
 "d3-dispatch@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
@@ -6459,11 +6909,25 @@ d3-dsv@1:
     iconv-lite "0.4"
     rw "1"
 
+"d3-dsv@1 - 2", d3-dsv@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-2.0.0.tgz#b37b194b6df42da513a120d913ad1be22b5fe7c5"
+  integrity sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
 d3-ease@1:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz"
   integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
 
+"d3-ease@1 - 2", d3-ease@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
+  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
+
 "d3-ease@1 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
@@ -6476,6 +6940,13 @@ d3-fetch@1:
   dependencies:
     d3-dsv "1"
 
+d3-fetch@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-2.0.0.tgz#ecd7ef2128d9847a3b41b548fec80918d645c064"
+  integrity sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==
+  dependencies:
+    d3-dsv "1 - 2"
+
 d3-force@1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz"
@@ -6486,11 +6957,25 @@ d3-force@1:
     d3-quadtree "1"
     d3-timer "1"
 
+d3-force@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.1.1.tgz#f20ccbf1e6c9e80add1926f09b51f686a8bc0937"
+  integrity sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-quadtree "1 - 2"
+    d3-timer "1 - 2"
+
 d3-format@1, d3-format@^1.2.0:
   version "1.4.5"
   resolved "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
+"d3-format@1 - 2", d3-format@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
 d3-geo@1, d3-geo@^1.6.4:
   version "1.12.1"
   resolved "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz"
@@ -6498,11 +6983,23 @@ d3-geo@1, d3-geo@^1.6.4:
   dependencies:
     d3-array "1"
 
+d3-geo@2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-2.0.2.tgz#c065c1b71fe8c5f1be657e5f43d9bdd010383c40"
+  integrity sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==
+  dependencies:
+    d3-array "^2.5.0"
+
 d3-hierarchy@1, d3-hierarchy@^1.1.4:
   version "1.1.9"
   resolved "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz"
   integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
 
+d3-hierarchy@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz#dab88a58ca3e7a1bc6cab390e89667fcc6d20218"
+  integrity sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==
+
 d3-interpolate@1, d3-interpolate@^1.1.4:
   version "1.4.0"
   resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz"
@@ -6510,6 +7007,13 @@ d3-interpolate@1, d3-interpolate@^1.1.4:
   dependencies:
     d3-color "1"
 
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
 "d3-interpolate@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz"
@@ -6522,21 +7026,41 @@ d3-path@1:
   resolved "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz"
   integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
 
+"d3-path@1 - 2", d3-path@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
+  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
+
 d3-polygon@1:
   version "1.0.6"
   resolved "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz"
   integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
 
+d3-polygon@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-2.0.0.tgz#13608ef042fbec625ba1598327564f03c0396d8e"
+  integrity sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==
+
 d3-quadtree@1:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz"
   integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
 
+"d3-quadtree@1 - 2", d3-quadtree@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz#edbad045cef88701f6fee3aee8e93fb332d30f9d"
+  integrity sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==
+
 d3-random@1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz"
   integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==
 
+d3-random@2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-2.2.2.tgz#5eebd209ef4e45a2b362b019c1fb21c2c98cbb6e"
+  integrity sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==
+
 d3-sankey@^0.7.1:
   version "0.7.1"
   resolved "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.7.1.tgz"
@@ -6554,6 +7078,14 @@ d3-scale-chromatic@1:
     d3-color "1"
     d3-interpolate "1"
 
+d3-scale-chromatic@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
+  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+  dependencies:
+    d3-color "1 - 2"
+    d3-interpolate "1 - 2"
+
 d3-scale@2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz"
@@ -6566,6 +7098,17 @@ d3-scale@2:
     d3-time "1"
     d3-time-format "2"
 
+d3-scale@3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
+  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "^2.1.1"
+    d3-time-format "2 - 3"
+
 d3-scale@^1.0.5:
   version "1.0.7"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz"
@@ -6601,6 +7144,13 @@ d3-shape@1, d3-shape@^1.1.0, d3-shape@^1.2.0:
   dependencies:
     d3-path "1"
 
+d3-shape@2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
+  integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
+  dependencies:
+    d3-path "1 - 2"
+
 d3-time-format@2:
   version "2.3.0"
   resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz"
@@ -6608,16 +7158,35 @@ d3-time-format@2:
   dependencies:
     d3-time "1"
 
+"d3-time-format@2 - 3", d3-time-format@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
 d3-time@1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
+"d3-time@1 - 2", d3-time@2, d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+  dependencies:
+    d3-array "2"
+
 d3-timer@1:
   version "1.0.10"
   resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz"
   integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
 
+"d3-timer@1 - 2", d3-timer@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
+  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+
 "d3-timer@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz"
@@ -6681,6 +7250,17 @@ d3-zoom@1:
     d3-selection "1"
     d3-transition "1"
 
+d3-zoom@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-2.0.0.tgz#f04d0afd05518becce879d04709c47ecd93fba54"
+  integrity sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-drag "2"
+    d3-interpolate "1 - 2"
+    d3-selection "2"
+    d3-transition "2"
+
 d3-zoom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
@@ -6818,7 +7398,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7003,6 +7583,11 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -11773,7 +12358,7 @@ papaparse@^5.3.1:
   resolved "https://registry.npmjs.org/papaparse/-/papaparse-5.3.1.tgz"
   integrity sha512-Dbt2yjLJrCwH2sRqKFFJaN5XgIASO9YOFeFP8rIBRG2Ain8mqk5r1M6DkfvqEVozVcz3r3HaUGw253hA1nLIcA==
 
-parchment@^1.1.4:
+parchment@^1.1.2, parchment@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz"
   integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
@@ -11980,6 +12565,11 @@ pnp-webpack-plugin@^1.7.0:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 popper.js@^1.14.1, popper.js@^1.16.0:
   version "1.16.1"
   resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz"
@@ -12268,7 +12858,7 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.2.6, quill@^1.3.7:
+quill@^1.3.7:
   version "1.3.7"
   resolved "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
@@ -13516,7 +14106,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.4.0, react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -13776,6 +14366,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -13786,6 +14381,15 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -13846,6 +14450,15 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -15022,7 +15635,7 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
-tiny-warning@^1.0.0:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -15039,6 +15652,11 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"

From cbff9382c658bfb5bb6b71c4566bbb2b18649a85 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 6 Mar 2023 22:47:26 +0100
Subject: [PATCH 110/258] embargo job fix

---
 app/jobs/chemotion_embargo_pubchem_job.rb | 27 ++++++++++++-----------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index 936bfef20..adc05be8d 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -39,18 +39,6 @@ def perform(embargo_col_id)
       end
     end
 
-    begin
-      send_pubchem
-    rescue StandardError => e
-      Delayed::Worker.logger.error <<~TXT
-      ---------  #{self.class.name} send_pubchem error ------------
-        Error Message:  #{e}
-      --------------------------------------------------------------------
-      TXT
-      PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[send_pubchem]" + e.to_s).deliver_now
-      # raise e
-    end
-
     begin
       pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
       if pub_col.present? && pub_col.state == 'accepted'
@@ -67,6 +55,19 @@ def perform(embargo_col_id)
         Error Message:  #{e}
       --------------------------------------------------------------------
       TXT
+      PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[publish collection DOI]" + e.to_s).deliver_now
+      raise e
+    end
+
+    begin
+      send_pubchem
+    rescue StandardError => e
+      Delayed::Worker.logger.error <<~TXT
+      ---------  #{self.class.name} send_pubchem error ------------
+        Error Message:  #{e}
+      --------------------------------------------------------------------
+      TXT
+      PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[send_pubchem]" + e.to_s).deliver_now
       raise e
     end
 
@@ -80,7 +81,7 @@ def perform(embargo_col_id)
         ----------------------------------------------------------------------------------------------
       TXT
       PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
-      # raise e
+      raise e
     end
 
   end

From 3af15b841105e8398db6d93f3e445d42c70968a8 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 6 Mar 2023 23:04:52 +0100
Subject: [PATCH 111/258] disable 3d molecule

---
 .../src/apps/mydb/elements/details/samples/SampleDetails.js   | 1 -
 app/packs/src/libHome/RepoCommon.js                           | 4 ++--
 app/serializers/molecule_guest_serializer.rb                  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index ae2676a62..e83b2f60f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -87,7 +87,6 @@ import {
   validateMolecule,
 } from './PublishCommon';
 import SampleDetailsRepoComment from './SampleDetailsRepoComment';
-import RepoMolViewerBtn from '../libHome/RepoMolViewerBtn';
 
 const MWPrecision = 6;
 
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 8854c00c0..9102f12d3 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -948,7 +948,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   return (
     <Row>
       <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath, <RepoMolViewerBtn isPublic fileContent={molecule.molfile} />)}
+        {resizableSvg(svgPath)}
       </Col>
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
@@ -1014,7 +1014,7 @@ const RenderAnalysisHeader = (props) => {
       <br />
       <Row style={rinchiStyle}>
         <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath, <RepoMolViewerBtn isPublic fileContent={element.molfile} />)}
+          {resizableSvg(svgPath)}
         </Col>
         <Col sm={6} md={6} lg={6}>
           <span className="repo-pub-sample-header">
diff --git a/app/serializers/molecule_guest_serializer.rb b/app/serializers/molecule_guest_serializer.rb
index e847a219e..981e8430c 100644
--- a/app/serializers/molecule_guest_serializer.rb
+++ b/app/serializers/molecule_guest_serializer.rb
@@ -1,4 +1,4 @@
 class MoleculeGuestSerializer < ActiveModel::Serializer
   attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight, :molfile
+    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight
 end

From 1d4a2eb049e90ae932dc10bf7f8e672d18cd6800 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 6 Mar 2023 23:49:36 +0100
Subject: [PATCH 112/258] publication page issue

---
 app/packs/src/components/stores/PublicStore.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 854685fa9..34cbe97a4 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -160,7 +160,13 @@ class PublicStore {
   }
 
   handleDisplayMolecule(moleculeList) {
-    const cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
+    let cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
+
+    if (this.molecules.length > 0) {
+      cb = () => {};
+      this.setState({ molecules: this.molecules });
+    }
+
     this.setState({
       guestPage: 'publications',
       elementType: 'molecule',
@@ -175,7 +181,12 @@ class PublicStore {
   handleDisplayReaction(reactionList) {
     const listType = reactionList.reactionData.publication.taggable_data.scheme_only ?
       RepoNavListTypes.SCHEME : RepoNavListTypes.REACTION;
-    const cb = () => PublicActions.getReactions();
+    let cb = () => PublicActions.getReactions();
+
+    if (this.reactions.length > 0) {
+      cb = () => {};
+      this.setState({ reactions: this.reactions });
+    }
     this.setState({
       guestPage: 'publications',
       elementType: 'reaction',

From 5aa684594a92bfcdfc6541bdcbc811d024a95213 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 17 Mar 2023 11:53:28 +0100
Subject: [PATCH 113/258] review bugfix

---
 app/packs/src/libHome/RepoReview.js | 2 +-
 package.json                        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 3278e3cdf..9a468e152 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -115,7 +115,7 @@ export default class RepoReview extends Component {
   handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
     LoadingActions.start();
     ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
-    this.props.onHide(false);
+    // this.props.onHide(false);
   }
 
   handleReviewUpdate(e, col, rr) {
diff --git a/package.json b/package.json
index fa3c391c2..fc1d00cfa 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.6",
+    "repo-review-ui": "^0.0.7",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",

From 4f77dee94d197dd349f52d7c154027e30d43fffe Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 22 Mar 2023 09:17:24 +0100
Subject: [PATCH 114/258] fix file ext issue

---
 app/packs/src/libHome/RepoMolViewerListBtn.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/libHome/RepoMolViewerListBtn.js b/app/packs/src/libHome/RepoMolViewerListBtn.js
index d2931ecf3..bc36b689a 100644
--- a/app/packs/src/libHome/RepoMolViewerListBtn.js
+++ b/app/packs/src/libHome/RepoMolViewerListBtn.js
@@ -48,10 +48,10 @@ export default class RepoMolViewerListBtn extends Component {
     let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
     if (datasetContainer?.length < 1) { return this.renderBtn(true); }
 
-    datasetContainer = datasetContainer.map((dc) => {
+    datasetContainer = datasetContainer?.map((dc) => {
       const ds = Object.assign({}, dc);
       const { attachments } = ds;
-      ds.attachments = attachments.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment.filename?.match(/\.([^.]+)$/)[1].toLowerCase()));
+      ds.attachments = attachments?.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment?.filename?.match(/\.([^.]+)$/) && attachment?.filename?.match(/\.([^.]+)$/)[1]?.toLowerCase()));
       if (ds.attachments.length > 0) return ds;
       return null;
     });

From 96c187eb85d2f05666db7edb4809f49b52e78562 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 22 Mar 2023 16:04:41 +0100
Subject: [PATCH 115/258] resourceTypeGeneral sample

---
 app/jobs/send_welcome_email_job.rb            | 6 ++++--
 app/mailers/welcome_mailer.rb                 | 4 ++--
 app/publish/datacite_metadata_sample.html.erb | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/jobs/send_welcome_email_job.rb b/app/jobs/send_welcome_email_job.rb
index 64e097025..19d8b0dfc 100644
--- a/app/jobs/send_welcome_email_job.rb
+++ b/app/jobs/send_welcome_email_job.rb
@@ -1,8 +1,10 @@
 class SendWelcomeEmailJob < ApplicationJob
- 
+
   queue_as :send_welcome_email
-  
+
   def perform(user_id)
     WelcomeMailer.mail_welcome_message(user_id).deliver_now
+  rescue StandardError => e
+    Rails.logger.error e
   end
 end
\ No newline at end of file
diff --git a/app/mailers/welcome_mailer.rb b/app/mailers/welcome_mailer.rb
index 1ce907b69..bf779c652 100644
--- a/app/mailers/welcome_mailer.rb
+++ b/app/mailers/welcome_mailer.rb
@@ -11,8 +11,8 @@ def markdown(text)
   def mail_welcome_message(user_id)
     @user = User.find(user_id)
     @message = File.read("#{Rails.root}/public/welcome-message.md")
-    @output = markdown(@message);
+    @output = markdown(@message)
 
-    mail(to: @user.email, subject: "[ELN] Welcome to Chemotion.")
+    mail(to: @user.email, subject: "Welcome to Chemotion Repository.")
   end
 end
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index bfbabeaa8..4bf9e5971 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -47,7 +47,7 @@
     <subject>Chemistry</subject>
   </subjects>
   <language>en</language>
-  <resourceType resourceTypeGeneral="Dataset">Molecule</resourceType>
+  <resourceType resourceTypeGeneral="Dataset">Sample</resourceType>
   <version>1</version>
   <descriptions>
     <description xml:lang="en-US" descriptionType="Abstract">

From 8810e063a1c9e00c25947e49c85e0d15e5b36f8d Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 30 Mar 2023 12:23:44 +0200
Subject: [PATCH 116/258] add example text on request form

---
 app/packs/src/components/common/RepoXvialButton.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
index 15b1785c3..086d5e4c1 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -128,8 +128,17 @@ export default class RepoXvialButton extends React.Component {
       <Modal show={requestModalShow} onHide={() => this.closeModal()} backdrop="static">
         <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
         <Modal.Body>
-          <FormControl style={{ height: '400px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} />
+          <FormControl style={{ height: '300px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email." />
           <br />
+          <p style={{ fontSize: '11px', fontStyle: 'italic' }}>
+            <b>Data privacy statement</b> This contact form can be used to get in contact to the team of
+            the molecule archive. The information that you enter into the form is sent - along
+            with the email address that you entered with the registration to chemotion
+            repository - to the management team of the compound platform only. The data is not
+            stored, the information is available per email only. People in the management team
+            handle your request as confidential information. No other services or third
+            parties are included.
+          </p>
           <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
           <Button bsStyle="primary" onClick={() => this.request()}>Send request to the Compound-Platform</Button>
         </Modal.Body>

From 85c196c7261275ff023635367442888dbd8c9339 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 2 Apr 2023 23:44:48 +0200
Subject: [PATCH 117/258] increase font size

---
 app/packs/src/components/common/RepoXvialButton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
index 086d5e4c1..aa3b48125 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -130,10 +130,10 @@ export default class RepoXvialButton extends React.Component {
         <Modal.Body>
           <FormControl style={{ height: '300px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email." />
           <br />
-          <p style={{ fontSize: '11px', fontStyle: 'italic' }}>
+          <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
             <b>Data privacy statement</b> This contact form can be used to get in contact to the team of
             the molecule archive. The information that you enter into the form is sent - along
-            with the email address that you entered with the registration to chemotion
+            with the email address and your name that you entered with the registration to chemotion
             repository - to the management team of the compound platform only. The data is not
             stored, the information is available per email only. People in the management team
             handle your request as confidential information. No other services or third

From 66a3ca64838e56333cb7537925bb87b764f0be4b Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 4 Apr 2023 15:57:23 +0200
Subject: [PATCH 118/258] fix how to

---
 app/packs/src/libHome/Navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 0ba775d63..c4a5b0bdb 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -121,7 +121,7 @@ export default class Navigation extends React.Component {
             }
             {
               true ?
-                <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/docs/repo/" className="white-nav-item">
+                <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/docs/repo" className="white-nav-item">
                   How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
                 </NavItem> : null
             }

From 8e6ba08e0170abc026d24d2ad88be7ba1b24539f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 14 Apr 2023 09:56:55 +0200
Subject: [PATCH 119/258] ketcher backend

---
 app/api/chemotion/molecule_api.rb     | 4 +++-
 app/models/reaction.rb                | 4 +++-
 config/deploy/server_chemotion_net.rb | 1 +
 lib/svg/processor.rb                  | 2 ++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/molecule_api.rb b/app/api/chemotion/molecule_api.rb
index a1f11be5b..b052257a4 100644
--- a/app/api/chemotion/molecule_api.rb
+++ b/app/api/chemotion/molecule_api.rb
@@ -32,7 +32,6 @@ class MoleculeAPI < Grape::API
         post do
           smiles = params[:smiles]
           svg = params[:svg_file]
-
           babel_info = OpenBabelService.molecule_info_from_structure(smiles, 'smi')
           inchikey = babel_info[:inchikey]
           return {} if inchikey.blank?
@@ -78,6 +77,9 @@ class MoleculeAPI < Grape::API
               else
                 FileUtils.cp(svg_file_src, svg_process[:svg_file_path])
               end
+            else
+              svg = Molecule.svg_reprocess(svg, molecule.molfile)
+              svg_process = SVG::Processor.new.structure_svg('ketcher', svg, svg_digest, true)
             end
           end
           molecule.attributes.merge(temp_svg: File.exist?(svg_process[:svg_file_path]) && svg_process[:svg_file_name], ob_log: babel_info[:ob_log])
diff --git a/app/models/reaction.rb b/app/models/reaction.rb
index aec92de5f..1b34be977 100644
--- a/app/models/reaction.rb
+++ b/app/models/reaction.rb
@@ -222,7 +222,9 @@ def update_svg_file!
         collection = public_send(resource).includes(sample: :molecule)
         paths[prop] = collection.map do |reactions_sample|
           sample = reactions_sample.sample
-          params = [ sample.get_svg_path ]
+          params = [
+            svg_path(sample&.sample_svg_file, sample&.molecule&.molecule_svg_file)
+          ]
           params[0] = sample.svg_text_path if reactions_sample.show_label
           params.append(yield_amount(sample.id)) if prop == :products
           params
diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
index 00f3148cc..5605490e5 100644
--- a/config/deploy/server_chemotion_net.rb
+++ b/config/deploy/server_chemotion_net.rb
@@ -19,6 +19,7 @@
   '.ruby-version',
   '.ruby-gemset',
   'config/compound_open_data.yml',
+  'config/ketcher_service.yml',
   'config/spectra.yml',
   'config/converter.yml',
   'config/node_service.yml'
diff --git a/lib/svg/processor.rb b/lib/svg/processor.rb
index 6729d44e4..d5f7e5fb7 100644
--- a/lib/svg/processor.rb
+++ b/lib/svg/processor.rb
@@ -12,6 +12,8 @@ def structure_svg(editor, svg, hexdigest, is_centered = false)
                     Chemotion::MarvinjsSvgProcessor.new(svg)
                   when /chemdraw/i
                     Chemotion::ChemdrawSvgProcessor.new(svg)
+                  when /ketcher2/i
+                    Chemotion::MarvinjsSvgProcessor.new(svg)
                   when /ketcher/i
                     Ketcherails::SVGProcessor.new(svg)
                   else

From 07e0ac847af7961c0f4fa75bb0d5ae4ba8e638d5 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 6 Apr 2023 13:58:45 +0200
Subject: [PATCH 120/258] metadata description of sample publication

---
 app/models/publication.rb                     | 24 +++++++++++--
 .../datacite_metadata_analysis.html.erb       |  2 +-
 .../datacite_metadata_collection.html.erb     |  2 +-
 .../datacite_metadata_container.html.erb      |  2 +-
 .../datacite_metadata_reaction.html.erb       |  2 +-
 ...acite_metadata_reaction_container.html.erb |  2 +-
 app/publish/datacite_metadata_sample.html.erb | 35 ++++++++++++++++---
 ...atacite_metadata_sample_container.html.erb |  2 +-
 8 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/app/models/publication.rb b/app/models/publication.rb
index 39d1da55c..6d3e014d9 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -396,10 +396,9 @@ def datacite_metadata_xml
       ).last
       cdoi = coly.publication&.doi&.full_doi if coly.present?
     end
-
     parent_element = parent&.element
     literals = ActiveRecord::Base.connection.exec_query(literals_sql(element_id, element_type))
-    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals, col_doi: cdoi)
+    metadata_obj = OpenStruct.new(pub: self, element: element, pub_tag: taggable_data, dois: doi_bag, parent_element: parent_element.presence, rights: rights_data, lits: literals, col_doi: cdoi, cust_sample: cust_sample)
     erb_file = if element_type == 'Container'
                  "app/publish/datacite_metadata_#{parent_element.class.name.downcase}_#{element_type.downcase}.html.erb"
                else
@@ -649,6 +648,27 @@ def literals_sql(e_id, e_type)
     SQL
   end
 
+  def cust_sample
+    if element_type == 'Sample'
+      desc_type = "#{element.decoupled ? 'de' : ''}coupled_sample#{element.molecule_inchikey == 'DUMMY' ? '' : '_structure'}"
+      melting_point = range_to_s(element.melting_point)
+      boiling_point = range_to_s(element.boiling_point)
+      { type: desc_type, melting_point: melting_point, boiling_point: boiling_point }
+    else
+      {}
+    end
+  end
+
+  def range_to_s(val)
+    if val.begin == -Float::INFINITY && val.end == Float::INFINITY
+      ''
+    else
+      start = val.begin == -Float::INFINITY ? '' : val.begin.to_f
+      finish = val.end == Float::INFINITY ? '' : val.end.to_f
+      "#{start}#{start == '' || finish == '' ? '' : ' - '}#{finish}"
+    end
+  end
+
   def log_invalid_transition(to_state)
     logger("CANNOT TRANSITION from #{state} to #{to_state}")
   end
diff --git a/app/publish/datacite_metadata_analysis.html.erb b/app/publish/datacite_metadata_analysis.html.erb
index 8cb238c85..00960a47b 100644
--- a/app/publish/datacite_metadata_analysis.html.erb
+++ b/app/publish/datacite_metadata_analysis.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= (element.extended_metadata['kind'] || '').split('|').pop %> (<%= parent_element.molecule.iupac_name %>)</title>
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
diff --git a/app/publish/datacite_metadata_collection.html.erb b/app/publish/datacite_metadata_collection.html.erb
index 17738072d..f38567624 100644
--- a/app/publish/datacite_metadata_collection.html.erb
+++ b/app/publish/datacite_metadata_collection.html.erb
@@ -20,7 +20,7 @@
   <titles>
     <title xml:lang="en-US"><%= pub_tag['label'] %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
diff --git a/app/publish/datacite_metadata_container.html.erb b/app/publish/datacite_metadata_container.html.erb
index bf12d32a6..d548abde4 100644
--- a/app/publish/datacite_metadata_container.html.erb
+++ b/app/publish/datacite_metadata_container.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= (element.extended_metadata['kind'] || '').split('|').pop %> (<%= parent_element.molecule.iupac_name %>)</title>
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %>)</title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
diff --git a/app/publish/datacite_metadata_reaction.html.erb b/app/publish/datacite_metadata_reaction.html.erb
index c9ca6eab3..23e199dea 100644
--- a/app/publish/datacite_metadata_reaction.html.erb
+++ b/app/publish/datacite_metadata_reaction.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= element.products_short_rinchikey %></title>
     <title titleType="AlternativeTitle"><%= element.rinchi_short_key %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
diff --git a/app/publish/datacite_metadata_reaction_container.html.erb b/app/publish/datacite_metadata_reaction_container.html.erb
index 40c97f262..21a0248dd 100644
--- a/app/publish/datacite_metadata_reaction_container.html.erb
+++ b/app/publish/datacite_metadata_reaction_container.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= (element.extended_metadata['kind'] || '').split('|').pop %></title>
     <title titleType="AlternativeTitle"><%= parent_element.doi.inchikey %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index 4bf9e5971..b0d4e1422 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= element.molecule_name&.name %></title>
     <title titleType="AlternativeTitle"><%= element.molecule.inchistring %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
@@ -51,11 +51,38 @@
   <version>1</version>
   <descriptions>
     <description xml:lang="en-US" descriptionType="Abstract">
-      This dataset contains experimental data from a sample (<%= element.molecule.iupac_name.present? ? "#{element.molecule.iupac_name}, " : '' %><%= element.molecule.inchistring %>).<br />
-      The datasets from the following experiments are available:<br />
+      <% if cust_sample[:type] == 'coupled_sample_structure' %>
+      This is a physical chemical entity[CHEBI_24431] associated with a molecule[CHEBI_25367].
+      The molecule[CHEBI_25367] can be described by the following molecule identifiers [data_0982]:
+      InChI[data_1197]: <%= "#{element.molecule_inchistring}" %>, by the chemical name[data_0997]: <%= "#{element.showed_name}" %>, and by the canonical SMILES[data_2301]: <%= "#{element.molecule_cano_smiles}" %>.
+      <% elsif cust_sample[:type] == 'decoupled_sample_structure' %>
+      This is a physical chemical entity[CHEBI_24431] associated with a molecule[CHEBI_25367], while the molecule[CHEBI_25367] is only part of the composition and does not describe the chemical entity[CHEBI_24431] sufficiently.
+      The molecule[CHEBI_25367] can be described by the following molecule identifiers [data_0982]:
+      InChI[data_1197]: <%= "#{element.molecule_inchistring}" %>, by the chemical name[data_0997]: <%= "#{element.showed_name}" %>, and by the canonical SMILES[data_2301]: <%= "#{element.molecule_cano_smiles}" %>.
+      <% elsif cust_sample[:type] == 'decoupled_sample' %>
+      This is a physical chemical entity[CHEBI_24431] which was not directly associated with a molecule[CHEBI_25367].
+      The physical chemical entity[CHEBI_24431] can be described by the chemical formula [data_0846]: <%= "#{element.sum_formula}" %>, and the molecular mass[data_0844]: <%= "#{element.molecular_mass}" %>.
+      <% end %>
+      The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES[data_2301]: <%= element.molecule_cano_smiles %>
+      The physical chemical entity[CHEBI_24431] has the Sample ID [data_3273] as registered in the research data repository chemotion (www.chemotion-repository.net, https://doi.org/10.25504/FAIRsharing.iagXcR): CRS-<%= "#{pub.id}" %>
+
+      The physical chemical entity[CHEBI_24431] can be described by the physical descriptors [CHEMINF_000025]:
+      Melting point descriptor[CHEMINF_000256]: <%= cust_sample[:melting_point] %>
+      Boiling point descriptor[CHEMINF_000257]: <%= cust_sample[:boiling_point] %>
+      Refractive index descriptor[CHEMINF_000253]:
+
+      The physical chemical entity[CHEBI_24431] can be further described by the following assays[OBI:0000070][CHMO:0001133]:
       <% element.analyses.each do |analysis| %>
-      <%= (analysis.extended_metadata['kind'] || '').split('|').pop %><br />
+        <%= (analysis.extended_metadata['kind'] || '') %>
       <% end %>
+      The physical chemical entity[CHEBI_24431] was deposited to the Molecule Archive of the Karlsruhe Insitute of Technology (KIT) with the following Sample ID[data_3273]: CRS-<%= "#{pub.id}" %>
+
+      Used ontologies:
+      EDAM - Bioscientific data analysis ontology
+      CHEBI - Chemical Entities of Biological Interest
+      CHEMINF - chemical information ontology (information entities about chemical entities)
+      CHMO - Chemical Methods Ontology
+      OBI - Ontology for Biomedical Investigations
     </description>
   </descriptions>
 
diff --git a/app/publish/datacite_metadata_sample_container.html.erb b/app/publish/datacite_metadata_sample_container.html.erb
index 04199251f..39d0d1288 100644
--- a/app/publish/datacite_metadata_sample_container.html.erb
+++ b/app/publish/datacite_metadata_sample_container.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= (element.extended_metadata['kind'] || '').split('|').pop %> (<%= parent_element.molecule.iupac_name %>)</title>
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %></title>
   </titles>
-  <publisher>chemotion.net</publisher>
+  <publisher>chemotion-repository</publisher>
   <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>

From a8469eefc0c5aebc279fda4115524147259c4df1 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 4 May 2023 14:59:04 +0200
Subject: [PATCH 121/258] sample representation on landing page

---
 app/assets/stylesheets/repo_home.scss         |  41 +++++
 app/packs/src/components/chemrepo/DateInfo.js |  36 ++++
 .../src/components/chemrepo/LicenseIcon.js    |  52 ++++++
 .../components/chemrepo/MoleculeArchive.js    |  37 ++++
 .../components/chemrepo/PublicCommentModal.js | 140 +++++++++++++++
 .../src/components/chemrepo/PublicSample.js   |  70 ++++++++
 .../components/chemrepo/UserCommentModal.js   |  88 ++++++++++
 .../src/components/chemrepo/date-utils.js     |  27 +++
 .../src/components/chemrepo/ma/MAComs.js      |  23 +++
 .../src/components/chemrepo/ma/MAModals.js    | 161 ++++++++++++++++++
 app/packs/src/libHome/RepoCommon.js           |  86 +---------
 app/packs/src/libHome/RepoReactionDetails.js  |  22 ++-
 app/packs/src/libHome/RepoSample.js           |  99 +++++------
 app/packs/src/libHome/RepoSampleDetails.js    |   1 +
 14 files changed, 742 insertions(+), 141 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/DateInfo.js
 create mode 100644 app/packs/src/components/chemrepo/LicenseIcon.js
 create mode 100644 app/packs/src/components/chemrepo/MoleculeArchive.js
 create mode 100644 app/packs/src/components/chemrepo/PublicCommentModal.js
 create mode 100644 app/packs/src/components/chemrepo/PublicSample.js
 create mode 100644 app/packs/src/components/chemrepo/UserCommentModal.js
 create mode 100644 app/packs/src/components/chemrepo/date-utils.js
 create mode 100644 app/packs/src/components/chemrepo/ma/MAComs.js
 create mode 100644 app/packs/src/components/chemrepo/ma/MAModals.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 501641608..b9e64b09d 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -60,6 +60,9 @@ $bs-successcolor: #5cb85c;
   .repo-pub-title {
     font-size: 150%;
   }
+  .repo-public-user-comment {
+    margin-left: auto;
+  }
 }
 
 .repo-pub-list-icons {
@@ -921,3 +924,41 @@ $bs-successcolor: #5cb85c;
     padding: unset;
   }
 }
+
+.repo-ma-panel {
+  span {
+    display: flex;
+    justify-content: center;
+    margin-right: 4px;
+  }
+  a {
+    @include xvial-elem-base;
+    cursor: pointer;
+    background-color: white;
+    padding: 0px 6px;
+  }
+  span i {
+    @include xvial-elem-base;
+  }
+}
+
+.repo-public-sample-info {
+  h5 {
+    margin-top: 4px;
+    margin-bottom: unset;
+    display: flex;
+    align-items: center;
+  }
+  h5 .btn-link {
+    padding: unset;
+  }
+}
+
+.repo-public-sample-rel {
+  button {
+    padding: 0px 0px;
+  }
+  button i {
+    font-size: 1.5em;
+  }
+}
diff --git a/app/packs/src/components/chemrepo/DateInfo.js b/app/packs/src/components/chemrepo/DateInfo.js
new file mode 100644
index 000000000..a48130dca
--- /dev/null
+++ b/app/packs/src/components/chemrepo/DateInfo.js
@@ -0,0 +1,36 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DateInfo = (props) => {
+  const {
+    isPublished, preText, pubData, tagData
+  } = props;
+
+  const getTimeString = date => (date ? `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}` : '');
+  const getFormattedTime = date => (date ? `${getTimeString(date)} ${date.getHours()}:${date.getMinutes()}` : '');
+
+  const publishedTime = tagData?.published_at || tagData?.doi_reg_at;
+  const publishedDate = new Date(publishedTime);
+  const formattedPublishedDate = getTimeString(publishedDate);
+
+  const submittedDate = new Date(pubData?.created_at);
+  const formattedSubmittedDate = getTimeString(submittedDate);
+
+  const updatedDate = new Date(pubData?.updated_at);
+  const formattedUpdatedDate = getFormattedTime(updatedDate);
+
+  if (isPublished) {
+    return (<span><b>{preText} Published on </b> <i>{formattedPublishedDate}</i></span>);
+  }
+  return (<div className="date_info"><div><b>{preText} Submitted on </b> <i>{formattedSubmittedDate}</i></div><div className="updated">Updated on {formattedUpdatedDate}</div></div>);
+};
+
+DateInfo.propTypes = {
+  isPublished: PropTypes.bool.isRequired,
+  preText: PropTypes.string.isRequired,
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+};
+
+export default DateInfo;
diff --git a/app/packs/src/components/chemrepo/LicenseIcon.js b/app/packs/src/components/chemrepo/LicenseIcon.js
new file mode 100644
index 000000000..b64770919
--- /dev/null
+++ b/app/packs/src/components/chemrepo/LicenseIcon.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LicenseIcon = (props) => {
+  const { doi, license, hasCoAuthors = false } = props;
+  const anc = doi.split('/').pop();
+  const presentStyle = { height: '26px' };
+  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+  let presentPath = '/images/creative_common/cc-by-sa.svg';
+  const cc0Alt = [
+    'To the extent possible under law, the',
+    (hasCoAuthors ? 'persons' : 'person'),
+    'who associated CC0 with this work',
+    (hasCoAuthors ? 'have' : 'has'),
+    'waived all copyright and related or neighboring rights to this work.'
+  ].join(' ');
+
+  switch (license) {
+    case 'CC BY-SA':
+      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by-sa.svg';
+      break;
+    case 'CC BY':
+      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by.svg';
+      break;
+    case 'CC0':
+      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
+      presentAlt = cc0Alt;
+      presentPath = '/images/creative_common/cc-zero.svg';
+      break;
+    case 'No License':
+      presentHref = '';
+      presentAlt = 'No License';
+      presentPath = '';
+      break;
+    default:
+      break;
+  }
+  return presentHref === '' ? null : <a className="repo-public-user-comment" name={anc} id={anc} rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
+};
+
+LicenseIcon.propTypes = {
+  doi: PropTypes.string, hasCoAuthors: PropTypes.bool, license: PropTypes.string
+};
+
+LicenseIcon.defaultProps = { doi: '', hasCoAuthors: false, license: '' };
+
+export default LicenseIcon;
diff --git a/app/packs/src/components/chemrepo/MoleculeArchive.js b/app/packs/src/components/chemrepo/MoleculeArchive.js
new file mode 100644
index 000000000..fbb544cd8
--- /dev/null
+++ b/app/packs/src/components/chemrepo/MoleculeArchive.js
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Panel } from 'react-bootstrap';
+import { ToggleIndicator } from '../../libHome/RepoCommon';
+import { MARegisteredTooltip } from './ma/MAComs';
+import { MADataModal, MARequestModal } from './ma/MAModals';
+
+const MAPanel = (_props) => {
+  const {
+    allowRequest, elementId, isEditable, isLogin, data, saveCallback, xvialCom
+  } = _props;
+  const [expanded, setExpanded] = useState(true);
+
+  const hasData = !!(data && data !== '');
+  if (!isLogin && !hasData) return null;
+  if (isLogin && !hasData && !isEditable) return null;
+  const information = allowRequest && hasData ? <MARegisteredTooltip /> : null;
+
+  return (
+    <>
+      <span className="repo-pub-sample-header repo-ma-panel">
+        <ToggleIndicator onClick={() => setExpanded(!expanded)} name="Material" indicatorStyle={expanded ? 'down' : 'right'} />
+        {information}
+        <MADataModal isEditable={isEditable} data={data} elementId={elementId} saveCallback={saveCallback} xvialCom={xvialCom} />
+      </span>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-ma-panel" expanded={expanded} defaultExpanded={expanded} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+            <b>Sample Registration Number in Molecule Archive</b> <br />
+            <b>Request a sample:</b> <MARequestModal allowRequest={allowRequest} data={data} elementId={elementId} isLogin={isLogin} />
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </>
+  );
+};
+
+export default MAPanel;
diff --git a/app/packs/src/components/chemrepo/PublicCommentModal.js b/app/packs/src/components/chemrepo/PublicCommentModal.js
new file mode 100644
index 000000000..f1c146d63
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicCommentModal.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import PublicActions from '../actions/PublicActions';
+
+export default class PublicCommentModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false
+    };
+    this.updateComment = this.updateComment.bind(this);
+  }
+
+  updateComment() {
+    const {
+      id, type, pageType, pageId
+    } = this.props;
+    RepositoryFetcher.reviewerComment(id, type, this.commentInput.value)
+      .then(() => {
+        this.setState({ modalShow: false });
+        if (pageType === 'reactions') {
+          PublicActions.displayReaction(pageId || id);
+        } else {
+          PublicActions.displayMolecule(pageId);
+        }
+      });
+  }
+
+  render() {
+    const { modalShow } = this.state;
+    const { isReviewer, userInfo, title } = this.props;
+    const defaultAttrs = {
+      style: {
+        height: '400px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    let btnTbl = (<span />);
+    let commentModal = (<span />);
+    const style = {
+      height: '20px', width: '20px', borderRadius: '50%', border: '1px'
+    };
+    const hasComment = userInfo !== '';
+
+    if (hasComment === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data</Tooltip>}>
+          <Button bsSize="xsmall" bsStyle="warning" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    } else if (hasComment === false && isReviewer === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data (edit)</Tooltip>}>
+          <Button bsSize="xsmall" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    }
+
+    if (isReviewer === true) {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <FormControl
+              componentClass="textarea"
+              defaultValue={userInfo || ''}
+              {...defaultAttrs}
+              inputRef={(m) => { this.commentInput = m; }}
+            />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => this.updateComment()}
+              > Update
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      );
+    } else {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto', whiteSpace: 'pre-wrap' }}>
+            {userInfo}
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return (
+      <>{btnTbl}{commentModal}</>
+    );
+  }
+}
+
+PublicCommentModal.propTypes = {
+  id: PropTypes.number.isRequired,
+  userInfo: PropTypes.string,
+  isReviewer: PropTypes.bool,
+  type: PropTypes.string,
+  pageId: PropTypes.number,
+  pageType: PropTypes.string,
+  title: PropTypes.string
+};
+
+PublicCommentModal.defaultProps = {
+  isReviewer: false,
+  type: '',
+  pageId: null,
+  pageType: 'reactions',
+  userInfo: '',
+  title: ''
+};
diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
new file mode 100644
index 000000000..e6e678c93
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { Citation, literatureContent, RefByUserInfo } from '../LiteratureCommon';
+import { ChemotionId, CommentBtn, Doi } from '../../libHome/RepoCommon';
+
+const PublicSample = (_props) => {
+  const {
+    canComment, embargo, handleAnalysesLink, handleCommentBtn, handleMaterialLink, isPublished, element, sample, pubData
+  } = _props;
+
+  const analyses = sample?.analyses?.children?.[0]?.children ?? [];
+  const references = sample.literatures ? sample.literatures.map(lit => (
+    <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
+      <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
+      <Citation key={lit.id} literature={lit} />
+    </li>
+  )) : [];
+
+  let sampleTypeDescription = 'Consists of molecule with defined structure';
+  if (sample.decoupled && element.molecule.inchikey === 'DUMMY') {
+    sampleTypeDescription = 'Includes only undefined structural components';
+  } else if (sample.decoupled && element.molecule.inchikey !== 'DUMMY') {
+    sampleTypeDescription = 'Includes a fragment with defined structure';
+  }
+
+  const referencesText = canComment && sample.literatures
+    ? sample.literatures.map(lit => literatureContent(lit, true)).join('')
+    : '';
+
+  const reactionLink = sample.reaction_ids?.length > 0 ? (
+    <Button id="public-sample-reaction-link" bsStyle="link" onClick={() => { window.location = `/home/publications/reactions/${sample.reaction_ids[0]}`; }}>
+      Is Product of a reaction <i className="icon-reaction" />
+    </Button>
+  ) : null;
+
+
+  const analyticalLink = analyses.length > 0 ? (
+    <Button id="public-sample-analytical-link" bsStyle="link" onClick={handleAnalysesLink}>
+      has analytical data
+    </Button>
+  ) : null;
+
+  const hasData = !!(sample.xvial && sample.xvial !== '');
+  const materialLink = hasData ? (
+    <Button id="public-sample-material-link" bsStyle="link" onClick={handleMaterialLink}>
+      has a record as physically available material
+    </Button>
+  ) : null;
+
+  return (
+    <div className="repo-public-sample-info">
+      <b>Sample type: </b>{sampleTypeDescription}
+      <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
+      <ChemotionId id={pubData.id} type="sample" />
+      {embargo}
+      <h5>
+        <b>Relations of this sample: </b> {reactionLink}, {analyticalLink}, {materialLink}
+      </h5>
+      <h5>
+        <span>
+          <b>Reference{references.length > 1 ? 's' : null} in the Literature: </b>
+          <CommentBtn {..._props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
+          <div><div>{references}</div></div>
+        </span>
+      </h5>
+    </div>
+  );
+};
+
+export default PublicSample;
diff --git a/app/packs/src/components/chemrepo/UserCommentModal.js b/app/packs/src/components/chemrepo/UserCommentModal.js
new file mode 100644
index 000000000..65afc05b7
--- /dev/null
+++ b/app/packs/src/components/chemrepo/UserCommentModal.js
@@ -0,0 +1,88 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+const UserCommentModal = (props) => {
+  const {
+    id, isLogin, title, type, pageType, pageId
+  } = props;
+  const [modalShow, setModalShow] = useState(false);
+  const commentInputRef = useRef(null);
+
+  const sendEmail = () => {
+    RepositoryFetcher.userComment(id, type, pageId || id, pageType, commentInputRef.current.value)
+      .then(() => setModalShow(false));
+  };
+
+  const defaultAttrs = {
+    style: {
+      height: '400px', overflow: 'auto', whiteSpace: 'pre'
+    }
+  };
+
+  if (isLogin) {
+    return (
+      <>
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
+          <Button bsSize="xsmall" onClick={() => setModalShow(true)}>
+            <i className="fa fa-envelope-o" />
+          </Button>
+        </OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={() => setModalShow(false)}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Comments for the reviewers
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            {title}
+            <FormControl
+              componentClass="textarea"
+              {...defaultAttrs}
+              inputRef={commentInputRef}
+            />
+            <br />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => setModalShow(false)}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={sendEmail}
+              > Send to Chemotion Reviewers
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </>
+    );
+  }
+
+  return null;
+};
+
+UserCommentModal.propTypes = {
+  id: PropTypes.number.isRequired,
+  isLogin: PropTypes.bool,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  pageType: PropTypes.string,
+  pageId: PropTypes.number
+};
+
+UserCommentModal.defaultProps = {
+  isLogin: false,
+  type: '',
+  title: '',
+  pageType: 'reactions',
+  pageId: null
+};
+
+export default UserCommentModal;
diff --git a/app/packs/src/components/chemrepo/date-utils.js b/app/packs/src/components/chemrepo/date-utils.js
new file mode 100644
index 000000000..10786fdeb
--- /dev/null
+++ b/app/packs/src/components/chemrepo/date-utils.js
@@ -0,0 +1,27 @@
+import moment from 'moment';
+
+export const formatDateDMYTime = (params) => {
+  const dateTime = new Date(params);
+  const options = {
+    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
+  };
+  return dateTime.toLocaleDateString('en-GB', options);
+};
+
+export const formatDateYMDLong = (dt) => {
+  if (dt == null || typeof dt === 'undefined') return '';
+  try {
+    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
+    if (m.isValid()) {
+      return dt;
+    }
+    const dtJSON = new Date(dt).toJSON();
+    const dtISO = new Date(Date.parse(dt)).toISOString();
+    if (dtISO === dtJSON) {
+      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
+    }
+    return '';
+  } catch (e) {
+    return '';
+  }
+};
diff --git a/app/packs/src/components/chemrepo/ma/MAComs.js b/app/packs/src/components/chemrepo/ma/MAComs.js
new file mode 100644
index 000000000..cde2b6cff
--- /dev/null
+++ b/app/packs/src/components/chemrepo/ma/MAComs.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+export const MALinkButton = () => (
+  <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip_ma_link">Go to Molecule Archive</Tooltip>}>
+    <Button bsStyle="link" bsSize="xsmall" onClick={() => { window.open('https://compound-platform.eu/home', '_blank'); }}>has a record as physically available material</Button>
+  </OverlayTrigger>
+);
+
+const registedCompoundTooltip = (
+  <div className="repo-xvial-info">
+    For availability please use the below (<span className="env"><i className="fa fa-envelope-o" aria-hidden="true" /></span>) to contact the Compound Platform team. An explanation can be accessed via our Youtube channel&nbsp;
+    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>
+    &nbsp;or on our how-to pages
+    <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
+  </div>
+);
+
+export const MARegisteredTooltip = () => (
+  <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
+    <a rel="noopener noreferrer"><i className="fa fa-info-circle" aria-hidden="true" /></a>
+  </OverlayTrigger>
+);
diff --git a/app/packs/src/components/chemrepo/ma/MAModals.js b/app/packs/src/components/chemrepo/ma/MAModals.js
new file mode 100644
index 000000000..e54b27058
--- /dev/null
+++ b/app/packs/src/components/chemrepo/ma/MAModals.js
@@ -0,0 +1,161 @@
+/* eslint-disable react/forbid-prop-types */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
+import uuid from 'uuid';
+import NotificationActions from '../../actions/NotificationActions';
+import RepositoryFetcher from '../../fetchers/RepositoryFetcher';
+
+export const listCom = (xvialCom, data = '') => {
+  if (typeof xvialCom === 'undefined') return <br />;
+  if (!xvialCom.allowed) return <br />;
+  const listComData = xvialCom.hasData ? (
+    xvialCom.data.map(x => (
+      <tr key={uuid.v4()} style={x.x_data.xid === data && data !== '' ? { color: '#337ab7' } : { color: 'black' }}>
+        <td>{x.x_data.xid}</td>
+        <td>{x.x_data.provided_by}</td>
+        <td>{x.x_created_at}</td>
+        <td>{x.x_short_label}</td>
+        <td>{x.x_data.origin_id}</td>
+      </tr>
+    ))
+  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
+  return (
+    <div>
+      <h4><i>Reference (data from Compound platform)</i></h4>
+      <Table striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th>X-Vial</th>
+            <th>Provided by</th>
+            <th>Created at</th>
+            <th>Short label of Sample</th>
+            <th>Name of origin Sample</th>
+          </tr>
+        </thead>
+        <tbody>
+          {listComData}
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
+export const MARequestModal = (props) => {
+  const {
+    allowRequest, elementId, isLogin, data
+  } = props;
+  const [requestModalShow, setRequestModalShow] = useState(false);
+  const [rInput, setRInput] = useState(null);
+  const hasData = !!(data && data !== '');
+
+  if (!(allowRequest && hasData)) return null;
+
+  const checkRequest = () => {
+    if (isLogin) {
+      setRequestModalShow(true);
+    } else {
+      NotificationActions.add({
+        title: 'Request to the Compound-Platform.eu',
+        message: 'Please log in to send the request.',
+        level: 'warning',
+        position: 'tc'
+      });
+    }
+  };
+
+  const request = () => {
+    RepositoryFetcher.compound(elementId, rInput.value, 'request')
+      .then(() => {
+        setRequestModalShow(false);
+        NotificationActions.add({
+          title: 'Request to the Compound-Platform.eu',
+          message: 'Your request has been emailed to the Compound-Platform',
+          level: 'info',
+          position: 'tc'
+        });
+      });
+  };
+
+  return (
+    <>
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}>
+        <a onClick={() => checkRequest()} rel="noopener noreferrer"><i className="fa fa-envelope-o" /></a>
+      </OverlayTrigger>
+      <Modal show={requestModalShow} onHide={() => setRequestModalShow(false)} backdrop="static">
+        <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
+        <Modal.Body>
+          <FormControl style={{ height: '300px' }} componentClass="textarea" inputRef={(m) => { setRInput(m); }} placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email." />
+          <br />
+          <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
+            <b>Data privacy statement</b> This contact form can be used to get in contact to the team of
+            the molecule archive. The information that you enter into the form is sent - along
+            with the email address and your name that you entered with the registration to chemotion
+            repository - to the management team of the compound platform only. The data is not
+            stored, the information is available per email only. People in the management team
+            handle your request as confidential information. No other services or third
+            parties are included.
+          </p>
+          <Button bsStyle="warning" onClick={() => setRequestModalShow(false)}>Close</Button>&nbsp;
+          <Button bsStyle="primary" onClick={() => request()}>Send request to the Compound-Platform</Button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+
+MARequestModal.propTypes = {
+  allowRequest: PropTypes.bool,
+  data: PropTypes.string,
+  elementId: PropTypes.number.isRequired,
+  isLogin: PropTypes.bool,
+};
+
+MARequestModal.defaultProps = { allowRequest: false, data: null, isLogin: false };
+
+export const MADataModal = (props) => {
+  const {
+    data, elementId, isEditable, saveCallback, xvialCom
+  } = props;
+  const [dataModalShow, setDataModalShow] = useState(false);
+  const [xInput, setXInput] = useState(data || '');
+
+  if (!isEditable) return null;
+
+  const save = () => {
+    RepositoryFetcher.compound(elementId, xInput.value, 'update')
+      .then(() => {
+        setDataModalShow(false);
+        saveCallback(elementId, xInput.value);
+      });
+  };
+
+  return (
+    <>
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>}>
+        <a onClick={() => setDataModalShow(true)} rel="noopener noreferrer"><i className="fa fa-pencil" /></a>
+      </OverlayTrigger>
+      <Modal bsSize="large" show={dataModalShow} onHide={() => setDataModalShow(false)} backdrop="static">
+        <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
+        <Modal.Body>
+          <FormControl type="text" defaultValue={data} inputRef={(m) => { setXInput(m); }} />
+          {listCom(xvialCom, data)}
+          <Button bsStyle="warning" onClick={() => setDataModalShow(false)}>Close</Button>&nbsp;
+          <Button bsStyle="primary" onClick={() => save()}>Save</Button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+MADataModal.propTypes = {
+  data: PropTypes.string,
+  elementId: PropTypes.number.isRequired,
+  isEditable: PropTypes.bool.isRequired,
+  saveCallback: PropTypes.func,
+  xvialCom: PropTypes.object.isRequired,
+};
+
+MADataModal.defaultProps = { data: null, saveCallback: () => {} };
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 9102f12d3..f0cf7c1b5 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -100,7 +100,7 @@ const resizableSvg = (path, extra = null) => (
 
 const ChemotionId = props => (
   <h5>
-    <b>ID: </b>
+    <b>{props.type?.replace(/^\w/, c => c.toUpperCase())} ID: </b>
     <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
       {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
     </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
@@ -591,47 +591,6 @@ const labelStyle = {
   marginRight: '2px'
 };
 
-const IconLicense = (doi, cp, hasCoAuthors = false) => {
-  const anc = doi == null ? '' : doi.split('/').pop();
-  const presentStyle = { height: '26px' };
-  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-  let presentPath = '/images/creative_common/cc-by-sa.svg';
-  const cc0Alt = [
-    'To the extent possible under law, the',
-    (hasCoAuthors ? 'persons' : 'person'),
-    'who associated CC0 with this work',
-    (hasCoAuthors ? 'have' : 'has'),
-    'waived all copyright and related or neighboring rights to this work.'
-  ].join(' ');
-
-  switch (cp) {
-    case 'CC BY-SA':
-      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by-sa.svg';
-      break;
-    case 'CC BY':
-      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by.svg';
-      break;
-    case 'CC0':
-      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
-      presentAlt = cc0Alt;
-      presentPath = '/images/creative_common/cc-zero.svg';
-      break;
-    case 'No License':
-      presentHref = '';
-      presentAlt = 'No License';
-      presentPath = '';
-      break;
-    default:
-      break;
-  }
-  return presentHref === '' ? null : <a name={anc} id={anc} rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
-};
-
 const IconToMyDB = ({
   id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
 }) => {
@@ -1054,7 +1013,7 @@ const RenderAnalysisHeader = (props) => {
             }
           </h6>
           <h6>
-            <b>ID: </b>
+            <b>Sample ID: </b>
             <Button key={`reaction-jumbtn-${element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
               CRS-{crsId}
             </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
@@ -1063,7 +1022,7 @@ const RenderAnalysisHeader = (props) => {
       </Row>
       <Row>
         <Col sm={12} md={12} lg={12}>
-          <h5><b>Reference{references.length > 1 ? 's' : null}: </b></h5>
+          <h5><b>Reference{references.length > 1 ? 's' : null} in the Literature: </b></h5>
           <ul style={{ listStyle: 'none' }}>{references}</ul>
           <RepoSegment segments={element.segments} />
         </Col>
@@ -1752,7 +1711,7 @@ class RenderPublishAnalysesPanel extends Component {
     const insText = instrumentText(analysis);
     const crdLink = (isPublic === false) ? (
       <div className="sub-title" inline="true">
-        <b>ID: </b>
+        <b>Reaction ID: </b>
         <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
           CRD-{analysis.pub_id}
         </Button>
@@ -1761,8 +1720,8 @@ class RenderPublishAnalysesPanel extends Component {
 
       </div >
     ) : (
-      <div className = "sub-title" inline = "true">
-        <b>ID: </b>
+      <div className="sub-title" inline="true">
+        <b>Reaction ID: </b>
         <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
           CRD-{analysis.pub_id}
         </Button>
@@ -1871,7 +1830,7 @@ class RenderPublishAnalyses extends Component {
               <DownloadMetadataBtn type="container" id={analysis.id} />
             </div>
             <div className="sub-title" inline="true">
-              <b>ID: </b>
+              <b>Reaction ID: </b>
               <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
                 CRD-{ analysis.pub_id }
               </Button>
@@ -1911,7 +1870,7 @@ class RenderPublishAnalyses extends Component {
       <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
         <Panel.Heading style={{ border: 'unset' }}>
           <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            {IconLicense(null, this.props.license, (this.props.publication.author_ids.length > 1))}
+            {LicenseIcon(null, this.props.license, (this.props.publication.author_ids.length > 1))}
           </h4>
           <p>&nbsp;</p>
           <b>{kind}</b>&nbsp;
@@ -2337,33 +2296,6 @@ Doi.propTypes = {
   isPublished: PropTypes.bool.isRequired,
 };
 
-const DateInfo = (props) => {
-  const {
-    pubData, tagData, isPublished
-  } = props;
-
-  let time = '';
-  let formattedTime = '';
-
-  if (isPublished) {
-    time = new Date(tagData && (tagData.published_at || tagData.doi_reg_at));
-    formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
-  }
-
-  time = new Date(pubData && pubData.created_at);
-  formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const uTime = new Date(pubData && pubData.updated_at);
-  const formattedUTime = `${uTime.getDate()}-${uTime.getMonth() + 1}-${uTime.getFullYear()} ${uTime.getHours()}:${uTime.getMinutes()} `;
-  return (<div className="date_info"><div><b>Submitted on </b> <i>{formattedTime}</i></div><div className="updated">Updated on {formattedUTime}</div></div>);
-};
-
-DateInfo.propTypes = {
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
 export {
   AnalysisHeaderSample,
   AnalysesTypeJoinLabel,
@@ -2381,7 +2313,6 @@ export {
   DateFormatYMDLong,
   DateFormatDMYTime,
   DatasetDetail,
-  DateInfo,
   Doi,
   DownloadDOICsv,
   DownloadMetadataBtn,
@@ -2391,7 +2322,6 @@ export {
   ElSubmitTime,
   ElAspect,
   EmbargoCom,
-  IconLicense,
   IconToMyDB,
   ChecklistPanel,
   isNmrPass,
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 7b28cbd04..33702e0b5 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -20,7 +20,6 @@ import {
   CommentBtn,
   ContributorInfo,
   ClipboardCopyBtn,
-  DateInfo,
   Doi,
   ReactionTable,
   ReactionRinChiKey,
@@ -28,7 +27,6 @@ import {
   ReactionTlc,
   RenderAnalysisHeader,
   RenderPublishAnalysesPanel,
-  IconLicense,
   IconToMyDB,
   AnalysesTypeJoinLabel,
   SchemeWord,
@@ -37,12 +35,14 @@ import {
 import LoadingActions from '../components/actions/LoadingActions';
 import PublicActions from '../components/actions/PublicActions';
 import ReviewActions from '../components/actions/ReviewActions';
+import DateInfo from '../components/chemrepo/DateInfo';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
+import UserCommentModal from '../components/chemrepo/UserCommentModal';
 import QuillViewer from '../components/QuillViewer';
 import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
 import Sample from '../components/models/Sample';
 import RepoSegment from './RepoSegment';
 
@@ -481,10 +481,14 @@ export default class RepoReactionDetails extends Component {
             {canClose ? <ClosePanel element={reaction} /> : ''}
             <h4>
               <IconToMyDB isLogin={idyLogin} isPublished={isPublished} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
-              <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
-              {IconLicense((isPublished ? taggData.doi : doi.full_doi), license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
-              <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
-              <RepoUserComment isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
+              <DateInfo isPublished={isPublished} preText="Reaction" pubData={pubData} tagData={taggData} />&nbsp;
+              <LicenseIcon
+                doi={(isPublished ? taggData.doi : doi.full_doi)}
+                license={license}
+                hasCoAuthors={(taggData.author_ids && (taggData.author_ids.length > 1))}
+              />
+              <PublicCommentModal isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
+              <UserCommentModal isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
             </h4>
             <br />
             <ContributorInfo contributor={taggData.contributors} showHelp={schemeOnly} />
@@ -501,7 +505,7 @@ export default class RepoReactionDetails extends Component {
             {embargo}
             <h5>
               <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
-              <b>Reference{references.length > 1 ? 's' : null}: </b>
+              <b>Reference{references.length > 1 ? 's' : null} in the Literature: </b>
               <ul style={{ listStyle: 'none' }}>{references}</ul>
             </h5>
             <br />
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 583b5c166..710f1c7da 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -8,22 +8,21 @@ import {
   AffiliationList,
   AnalysesTypeJoinLabel,
   AuthorList,
-  ChemotionId,
   CommentBtn,
   ContributorInfo,
   ClipboardCopyBtn,
-  DateInfo,
-  Doi,
-  IconLicense,
   IconToMyDB,
   RenderPublishAnalysesPanel,
   SidToPubChem,
   ToggleIndicator,
   ElStateLabel
 } from './RepoCommon';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
+import DateInfo from '../components/chemrepo/DateInfo';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import MAPanel from '../components/chemrepo/MoleculeArchive';
+import PublicSample from '../components/chemrepo/PublicSample';
+import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
+import UserCommentModal from '../components/chemrepo/UserCommentModal';
 import RepoXvialButton from '../components/common/RepoXvialButton';
 import PublicActions from '../components/actions/PublicActions';
 import Sample from '../components/models/Sample';
@@ -44,8 +43,11 @@ export default class RepoSample extends Component {
     this.state = {
       expandSA: true, expandSG: ''
     };
+    this.panelRef = React.createRef();
+    this.materialRef = React.createRef();
+    this.handleAnalysesLink = this.handleAnalysesLink.bind(this);
+    this.handleMaterialLink = this.handleMaterialLink.bind(this);
     this.toggleSA = this.toggleSA.bind(this);
-    this.toggleSG = this.toggleSG.bind(this);
     this.renderAnalyses = this.renderAnalyses.bind(this);
   }
 
@@ -53,15 +55,19 @@ export default class RepoSample extends Component {
 
   componentDidUpdate() { scrollView(); }
 
+  handleAnalysesLink() {
+    this.panelRef.current.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  handleMaterialLink() {
+    this.materialRef.current.scrollIntoView({ behavior: 'smooth' });
+  }
+
   toggleSA() {
     const { expandSA } = this.state;
     this.setState({ expandSA: !expandSA });
   }
 
-  toggleSG(sg) {
-    this.setState({ expandSG: sg.uuid });
-  }
-
   updateRepoXvial(elementId) {
     const { listType } = this.props;
     PublicActions.displayMolecule(elementId, '', false, '', '', listType);
@@ -99,35 +105,19 @@ export default class RepoSample extends Component {
   render() {
     const {
       sample, pubData, tagData, isPublished,
-      canComment, handleCommentBtn, isLogin, isReviewer, element
+      isLogin, isReviewer, element
     } = this.props;
     const { xvialCom } = element;
-    const { expandSA, expandSG } = this.state;
-
+    const { expandSA } = this.state;
+// console.log(this.props);
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
-    const references = sample.literatures ? sample.literatures.map(lit => (
-      <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
-
-    const refArray = [];
-    let referencesText = '';
-    if (canComment && sample.literatures) {
-      sample.literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
 
     const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
       ? <span />
       : <h5><b>Name: </b> {sample.showed_name} </h5>;
     const userInfo = sample.pub_info || '';
     const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
-    let embargo = (<span />);
+    let embargo = null;
     let colDoiPrefix = (sample?.doi || '');
     colDoiPrefix = typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
     colDoiPrefix = colDoiPrefix.split('/')[0];
@@ -148,12 +138,13 @@ export default class RepoSample extends Component {
       <Jumbotron key={`sample-${sample.id}`}>
         <span className="repo-pub-sample-header">
           <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} isPublished={isPublished} id={sample.id} type="sample" /></span>&nbsp;
-          <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
+          <span className="repo-pub-title"><DateInfo isPublished={isPublished} preText="Sample" pubData={pubData} tagData={tagData} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
           <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
-          {IconLicense((isPublished ? sample.doi : sample.doi?.full_doi), sample.license, (sample.author_ids.length > 1))}
-          <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
-          <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+          <span className="repo-public-user-comment">
+            <PublicCommentModal isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+            <UserCommentModal isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+          </span>
           {ElStateLabel(sample.embargo)}
         </span>
         <br />
@@ -167,25 +158,25 @@ export default class RepoSample extends Component {
           affiliations={sample.affiliations}
           affiliationMap={affiliationMap}
         />
-        <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
-        <ChemotionId id={pubData.id} type="sample" />
-        <h5>
-          {sample.reaction_ids.map(rid => (
-            <Button key={`reaction-link-btn-${rid}`} bsStyle="link" style={{ padding: '0px 0px' }} onClick={() => { window.location = `/home/publications/reactions/${rid}`; }}>
-              <i className="icon-reaction" style={{ fontSize: '1.5em' }} />{'Product of reaction'}
-            </Button>
-          ))}
-        </h5>
-        {embargo}
-        <h5>
-          <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
-          <b>Reference{references.length > 1 ? 's' : null}: </b>
-          <ul style={{ listStyle: 'none' }}>{references}</ul>
-        </h5>
+        <br />
+        <PublicSample {...this.props} embargo={embargo} handleAnalysesLink={this.handleAnalysesLink} handleMaterialLink={this.handleMaterialLink} />
+        <br />
+        <div ref={this.materialRef}>
+          <MAPanel isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />&nbsp;
+        </div>
         <RepoSegment segments={sample.segments} />
-        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'down' : 'right'} />
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-          {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
+        <span className="repo-pub-sample-header">
+          <div ref={this.panelRef}>
+            <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'down' : 'right'} />
+          </div>
+          <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+            {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
+          </span>
+          <LicenseIcon
+            doi={(isPublished ? sample.doi : sample.doi?.full_doi)}
+            license={sample.license}
+            hasCoAuthors={(sample.author_ids.length > 1)}
+          />
         </span>
         <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
           <Panel.Collapse>
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 20f4cfac7..aca9f1ab1 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -108,6 +108,7 @@ export default class RepoSampleDetails extends Component {
       }
       const el = {
         id: s.id || s.sample_id,
+        decoupled: s.decoupled,
         sid: s.sid,
         short_label: s.short_label || '',
         xvial: s.xvial,

From 046dc2adf5d3c7b7a4c62b146c5e0b63979fa39f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 12 Apr 2023 09:44:10 +0200
Subject: [PATCH 122/258] shibboleth and group leader review

---
 app/api/api.rb                                |   1 +
 app/api/chemotion/collaboration_api.rb        | 276 ++++++++++
 app/api/chemotion/repository_api.rb           | 228 +++++----
 app/api/chemotion/user_api.rb                 | 251 ----------
 app/api/helpers/repository_helpers.rb         |  11 +
 app/api/helpers/submission_helpers.rb         |   2 +-
 app/assets/stylesheets/home.scss              |  10 -
 app/assets/stylesheets/omniauth.scss          |   5 +-
 app/controllers/users/omniauth_controller.rb  |   2 +-
 app/models/admin.rb                           |   5 +-
 app/models/anonymous.rb                       |   3 +-
 app/models/collaborator.rb                    |   3 +-
 app/models/compound_open_data.rb              |   1 +
 app/models/concerns/attachment_jcamp_aasm.rb  |   8 +
 app/models/device.rb                          |   5 +-
 app/models/group.rb                           |   5 +-
 app/models/person.rb                          |   5 +-
 app/models/publication.rb                     |  38 +-
 app/models/user.rb                            |  26 +-
 app/packs/src/apps/mydb/App.js                |   5 +-
 .../apps/mydb/elements/details/ViewSpectra.js |  10 +-
 .../analysesTab/SampleDetailsContainers.js    |   1 -
 .../analysesTab/SampleDetailsContainersAux.js |  10 +
 app/packs/src/components/NMRiumDisplayer.js   | 472 ++++++++++++++++++
 .../src/components/PublishReactionModal.js    |  62 ++-
 .../src/components/PublishSampleModal.js      |  62 ++-
 .../components/ReactionDetailsRepoComment.js  |   6 +-
 .../components/SampleDetailsRepoComment.js    |   8 +-
 .../common/RepoReviewAuthorsModal.js          |   9 +-
 .../fetchers/CollaboratorFetcher.js           | 128 +++++
 .../components/fetchers/RepositoryFetcher.js  |  11 +-
 app/packs/src/components/sso/LoginOptions.js  |  62 +++
 .../src/components/stores/EmbargoStore.js     |   5 +-
 app/packs/src/components/stores/RStore.js     |   2 +-
 .../src/components/stores/ReviewStore.js      |  15 +-
 app/packs/src/components/users/AuthorModal.js | 122 +++--
 app/packs/src/fetchers/UsersFetcher.js        | 124 -----
 app/packs/src/libHome/Navigation.js           |  12 +-
 app/packs/src/libHome/RepoCommon.js           |  30 +-
 app/packs/src/libHome/RepoElementDetails.js   |   6 +-
 app/packs/src/libHome/RepoEmbargoDetails.js   |   6 +-
 app/packs/src/libHome/RepoReactionDetails.js  |  25 +-
 .../src/libHome/RepoReactionSchemeInfo.js     |   4 +-
 app/packs/src/libHome/RepoReview.js           |  16 +-
 app/packs/src/libHome/RepoReviewButtonBar.js  |  26 +-
 app/packs/src/libHome/RepoReviewDetails.js    |   9 +-
 app/packs/src/libHome/RepoSampleDetails.js    |  24 +-
 .../src/stores/alt/actions/UserActions.js     |   1 +
 .../src/stores/alt/stores/SpectraStore.js     |   1 -
 app/publish/datacite_metadata_sample.html.erb |  17 +-
 app/views/pages/settings.haml                 |   5 +-
 app/views/users/registrations/edit.html.haml  |   1 -
 config/initializers/swagger.rb                |   2 +-
 config/routes.rb                              |   6 +-
 db/migrate/20230404112233_orcid_migration.rb  |  15 +
 db/schema.rb                                  |  26 +-
 lib/chemotion/orcid_service.rb                |   6 +-
 package.json                                  |   2 +-
 yarn.lock                                     |   2 +-
 59 files changed, 1537 insertions(+), 704 deletions(-)
 create mode 100644 app/api/chemotion/collaboration_api.rb
 create mode 100644 app/packs/src/components/NMRiumDisplayer.js
 create mode 100644 app/packs/src/components/fetchers/CollaboratorFetcher.js
 create mode 100644 app/packs/src/components/sso/LoginOptions.js
 create mode 100644 db/migrate/20230404112233_orcid_migration.rb

diff --git a/app/api/api.rb b/app/api/api.rb
index ed658ac90..01066d3d3 100644
--- a/app/api/api.rb
+++ b/app/api/api.rb
@@ -188,6 +188,7 @@ def to_json_camel_case(val)
   mount Labimotion::LabimotionHubAPI
   mount Chemotion::RepositoryAPI
   mount Chemotion::ArticleAPI
+  mount Chemotion::CollaborationAPI
 
   add_swagger_documentation(info: {
     "title": "Chemotion Repository",
diff --git a/app/api/chemotion/collaboration_api.rb b/app/api/chemotion/collaboration_api.rb
new file mode 100644
index 000000000..7f49c4444
--- /dev/null
+++ b/app/api/chemotion/collaboration_api.rb
@@ -0,0 +1,276 @@
+# frozen_string_literal: true
+
+module Chemotion
+  class CollaborationAPI < Grape::API
+    resource :collaborators do
+      helpers do
+        def format_date(obj)
+          return nil if obj.nil? || obj['year'].nil?
+
+          Date.new(obj['year']&.to_i, obj['month']&.to_i || 1, obj['day']&.to_i || 1)
+        end
+
+        def process_orcid_affiliation(user, emps)
+          return if emps.nil?
+
+          emps = [emps] unless emps.is_a?(Array)
+          emps.each do |emp|
+            next if emp.nil?
+
+            org = emp['employment_summary']['organization']['name']
+            c_code = emp['employment_summary']['organization']['address']['country']
+            dep = emp['employment_summary']['department_name']
+            country = ISO3166::Country.translations[c_code]
+            from = format_date(emp['employment_summary']['start_date'])
+            to = format_date(emp['employment_summary']['end_date'])
+            aff = Affiliation.find_or_create_by(country: country, organization: org, department: dep)
+            UserAffiliation.create(user_id: user.id, affiliation_id: aff.id, from: from, to: to)
+          end
+        end
+      end
+
+      namespace :list do
+        desc 'fetch collaborators of current user'
+        get do
+          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+          data = User.where(id: ids)
+          present data, with: Entities::CollaboratorEntity, root: 'authors'
+        end
+      end
+
+      namespace :orcid do
+        desc 'fetch collaborators by orcid'
+        params do
+          requires :orcid, type: String
+        end
+        get do
+          erro_msg = nil
+          collaborator = User.where(type: %w[Person Collaborator]).where(["providers->>'orcid' = ?", params[:orcid]]).order('type desc').first
+
+          if collaborator.nil?
+            result = Chemotion::OrcidService.record_person(params[:orcid])
+            ## byebug ### PAGGY
+            if result.nil?
+              erro_msg = 'ORCID does not exist! Please check.'
+            elsif result.person&.family_name.nil?
+              erro_msg = 'Last name can not be blank!'
+            else
+              attributes = {}
+              attributes[:first_name] = result&.person&.given_names
+              attributes[:last_name] = result.person&.family_name
+              attributes[:type] = 'User'
+              attributes[:confirmed_at] = DateTime.now
+              attributes[:name_abbreviation] = "c#{SecureRandom.random_number(9999)}"
+              attributes[:password] = Devise.friendly_token.first(8)
+        #      attributes[:email] = "#{current_user.name_abbreviation}.#{attributes[:name_abbreviation]}@chemotion.net"
+              attributes[:email] = result.person&.email
+
+              if result.person&.email.present?
+                collaborator = User.where(email: result.person&.email).first
+              end
+              if collaborator.nil?
+                collaborator = User.new(attributes)
+                emps = Chemotion::OrcidService.record_employments(params[:orcid])
+                emps = [emps] unless emps.is_a?(Array)
+                if emps.present? && emp = emps&.first
+                  org = emp['employment_summary']['organization']['name']
+                  c_code = emp['employment_summary']['organization']['address']['country']
+                  dep = emp['employment_summary']['department_name']
+                  country = ISO3166::Country.translations[c_code]
+                  from = format_date(emp['employment_summary']['start_date'])
+                  to = format_date(emp['employment_summary']['end_date'])
+                  aff = Affiliation.new(country: country, organization: org, department: dep)
+                  collaborator.affiliations = [aff]
+                end
+              end
+            end
+          elsif collaborator.id == current_user.id
+            erro_msg = 'Can not add yourself as a collaborator'
+          else
+            has_col = UsersCollaborator.where(user_id: current_user.id, collaborator_id: collaborator.id)
+            if has_col.empty?
+              UsersCollaborator.create(user_id: current_user.id, collaborator_id: collaborator.id)
+            else
+              erro_msg = 'Collaborator is existed!'
+            end
+          end
+
+          if erro_msg.nil?
+            # ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+            # data = User.where(id: ids)
+            # present data, with: Entities::CollaboratorEntity, root: 'authors'
+            present collaborator, with: Entities::CollaboratorEntity, root: 'users'
+          else
+            { error: true, message: erro_msg }
+          end
+        end
+      end
+
+      namespace :user do
+        desc 'fetch collaborators of current user'
+        params do
+          optional :name, type: String
+          optional :first, type: String
+          optional :email, type: String
+        end
+        get do
+          scope = User.where.not(confirmed_at: nil).where(type: 'Person')
+          scope = scope.where([" LOWER(first_name) LIKE ? ",'%'+params[:first].downcase+'%']) if params[:first].present?
+          scope = scope.where([" LOWER(last_name) LIKE ? ",'%'+params[:name].downcase+'%']) if params[:name].present?
+          scope = scope.where([" LOWER(email) LIKE ? ",'%'+params[:email].downcase+'%']) if params[:email].present?
+          present scope.limit(5), with: Entities::CollaboratorEntity, root: 'users'
+        end
+      end
+
+      namespace :add do
+        desc 'add user to my collabration'
+        params do
+          requires :id, type: Integer
+        end
+        post do
+          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: params[:id] })
+          user = User.find(params[:id])
+          present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+
+      namespace :add_aff do
+        desc 'add user to my collabration'
+        params do
+          requires :id, type: Integer
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          collaborator = User.find(params[:id])
+          aff = [Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])]
+          collaborator.affiliations << aff unless aff.nil?
+          present collaborator, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+
+      namespace :find_add_aff do
+        desc 'add user to my collabration'
+        params do
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          aff = Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])
+          { id: aff.id, aff_output: aff.output_full }
+        end
+      end
+
+      namespace :delete do
+        desc 'remove user from my collabration'
+        params do
+          requires :id, type: Integer
+        end
+        post do
+          uc = UsersCollaborator.find_by(user_id: current_user.id, collaborator_id: params[:id])
+          uc.delete
+          #present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+
+      namespace :delete_aff do
+        desc 'remove affilication from my collabration'
+        params do
+          requires :user_id, type: Integer
+          requires :aff_id, type: Integer
+        end
+        post do
+          ua = UserAffiliation.find_by(user_id: params[:user_id], affiliation_id: params[:aff_id])
+          ua.destroy!
+
+          user = User.find(params[:user_id])
+          present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+
+      namespace :refresh_orcid_aff do
+        desc 'refresh affilication from orcid'
+        params do
+          requires :user_id, type: Integer
+        end
+        post do
+          user = User.find_by(id: params[:user_id])
+          if user.type != 'Collaborator' || user.orcid.nil?
+            { error: true, message: 'Unable to refresh the affilication from this ORCID!' }
+          else
+            emps = Chemotion::OrcidService.record_employments(user.orcid)
+            if emps.nil?
+              { error: true, message: 'Unable to fetch the affilication from this ORCID!' }
+            else
+              uas = UserAffiliation.where(user_id: user.id)
+              uas.each do |ua|
+                next if ua.nil?
+
+                ua.destroy!
+              end
+              process_orcid_affiliation(user, emps)
+              ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+              data = User.where(id: ids)
+              present data, with: Entities::CollaboratorEntity, root: 'authors'
+            end
+          end
+        end
+      end
+
+      namespace :load_orcid do
+        desc 'refresh affilication from orcid'
+        params do
+          requires :ids, type: Array[Integer]
+        end
+        post do
+          orcids = User.where(id: params[:ids]).map { |user| { id: user.id, orcid: user.orcid } }
+          { orcids: orcids.reject { |oo| oo[:orcid].nil? } }
+        end
+      end
+
+      namespace :create do
+        get_name_abbr = Proc.new do |first_name, last_name, cnt|
+          name_abbr = "#{first_name.first.capitalize}#{last_name.first.capitalize}#{cnt}"
+          if User.find_by(name_abbreviation: name_abbr).nil?
+            name_abbr
+          else
+            get_name_abbr.call(first_name, last_name, cnt+1)
+          end
+        end
+
+        desc 'create and add user to my collabration'
+        params do
+          requires :lastName, type: String
+          requires :firstName, type: String
+          requires :email, type: String
+          optional :orcid, type: String
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          attributes = {} #declared(params, include_missing: false)
+          attributes[:first_name] = params[:firstName]
+          attributes[:last_name] = params[:lastName]
+          attributes[:type] = 'Person'
+          attributes[:confirmed_at] = DateTime.now
+          attributes[:name_abbreviation] = get_name_abbr.call(params[:firstName], params[:lastName], 1)
+          attributes[:password] = Devise.friendly_token.first(8)
+          attributes[:email] = params[:email]
+          attributes[:providers] = { orcid: params[:orcid] }
+          new_user = User.create!(attributes)
+          new_user.profile.update!({data: {}})
+          new_user.affiliations = [Affiliation.find_or_create_by(country: params[:country],
+            organization: params[:organization], department: params[:department])]
+
+          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: new_user.id })
+          present new_user, with: Entities::CollaboratorEntity, root: 'user'
+        rescue StandardError => e
+          { error: true, message: e.message }
+        end
+      end
+    end
+  end
+end
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 35ce5de19..fde159372 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -21,7 +21,7 @@ def duplicate_analyses(new_element, analyses_arr, ik = nil)
           end
           analyses = Container.analyses_container(new_element.container.id).first
           parent_publication = new_element.publication
-          analyses_arr && analyses_arr.each do |ana|
+          analyses_arr&.each do |ana|
             new_ana = analyses.children.create(
               name: ana.name,
               container_type: ana.container_type,
@@ -81,7 +81,7 @@ def reviewer_collections
               permission_level: 3,
               sample_detail_level: 10,
               reaction_detail_level: 10,
-              label: 'REVIEWING',
+              label: 'REVIEWING'
             )
           end
         end
@@ -200,7 +200,7 @@ def duplicate_reaction(reaction, analysis_set)
                 rinchi_string: princhi_string,
                 rinchi_long_key: princhi_long_key,
                 rinchi_short_key: princhi_short_key,
-                rinchi_web_key:  princhi_web_key
+                rinchi_web_key: princhi_web_key
               }
             )
           )
@@ -230,7 +230,7 @@ def duplicate_reaction(reaction, analysis_set)
         end
 
         def create_publication_tag(contributor, author_ids, license)
-          authors = User.where(type: %w(Person Collaborator), id: author_ids)
+          authors = User.where(type: %w[Person Collaborator], id: author_ids)
                         .includes(:affiliations)
                         .order("position(users.id::text in '#{author_ids}')")
           affiliations = authors.map(&:current_affiliations)
@@ -241,7 +241,7 @@ def create_publication_tag(contributor, author_ids, license)
           {
             published_by: author_ids[0],
             author_ids: author_ids,
-            creators: authors.map { |author|
+            creators: authors.map do |author|
               {
                 'givenName' => author.first_name,
                 'familyName' => author.last_name,
@@ -250,7 +250,7 @@ def create_publication_tag(contributor, author_ids, license)
                 'affiliationIds' => author.current_affiliations.map(&:id),
                 'id' => author.id
               }
-            },
+            end,
             contributors: {
               'givenName' => contributor.first_name,
               'familyName' => contributor.last_name,
@@ -290,8 +290,8 @@ def duplicate_literals(element, literals)
               category: 'detail',
               user_id: lit.user_id,
               litype: lit.litype
-           }
-           Literal.create(attributes)
+            }
+            Literal.create(attributes)
           end
         end
 
@@ -325,8 +325,8 @@ def add_submission_history(root)
             state: 'pending'
           }
           history << current_node
-
           review['history'] = history
+          review['reviewers'] = @group_reviewers if @group_reviewers.present?
           root.update!(review: review)
         end
       end
@@ -343,12 +343,12 @@ def add_submission_history(root)
       end
       paginate per_page: 10, offset: 0, max_per_page: 100
       get 'list' do
-        type = (params[:type].blank? || params[:type] == 'All') ? ['Sample', 'Reaction'] : params[:type].chop!
-        state = (params[:state].empty? || params[:state] == 'All') ? [Publication::STATE_PENDING, Publication::STATE_REVIEWED, Publication::STATE_ACCEPTED] : params[:state]
+        type = params[:type].blank? || params[:type] == 'All' ? %w[Sample Reaction] : params[:type].chop!
+        state = params[:state].empty? || params[:state] == 'All' ? [Publication::STATE_PENDING, Publication::STATE_REVIEWED, Publication::STATE_ACCEPTED] : params[:state]
         pub_scope = if User.reviewer_ids.include?(current_user.id)
                       Publication.where(state: state, ancestry: nil, element_type: type)
                     else
-                      Publication.where(state: state, ancestry: nil, element_type: type, published_by: current_user.id)
+                      Publication.where(state: state, ancestry: nil, element_type: type).where("published_by = ? OR (review -> 'reviewers')::jsonb @> '?'", current_user.id, current_user.id)
                     end
         unless params[:search_value].blank? || params[:search_value] == 'All'
           case params[:search_type]
@@ -356,9 +356,9 @@ def add_submission_history(root)
             pub_scope = pub_scope.where(published_by: params[:search_value])
           when 'Embargo'
             embargo_search = <<~SQL
-            (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.deleted_at is null and cr.collection_id = ?))
-            or
-            (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.deleted_at is null and cs.collection_id = ?))
+              (element_type = 'Reaction' and element_id in (select reaction_id from collections_reactions cr where cr.deleted_at is null and cr.collection_id = ?))
+              or
+              (element_type = 'Sample' and element_id in (select sample_id from collections_samples cs where cs.deleted_at is null and cs.collection_id = ?))
             SQL
             embargo_search = ActiveRecord::Base.send(:sanitize_sql_array, [embargo_search, params[:search_value], params[:search_value]])
             pub_scope = pub_scope.where(embargo_search)
@@ -366,9 +366,9 @@ def add_submission_history(root)
             r_name_sql = " r.short_label like '%#{ActiveRecord::Base.send(:sanitize_sql_like, params[:search_value])}%' "
             s_name_sql = " s.short_label like '%#{ActiveRecord::Base.send(:sanitize_sql_like, params[:search_value])}%' "
             name_search = <<~SQL
-            (element_type = 'Reaction' and element_id in (select id from reactions r where #{r_name_sql}))
-            or
-            (element_type = 'Sample' and element_id in (select id from samples s where #{s_name_sql}))
+              (element_type = 'Reaction' and element_id in (select id from reactions r where #{r_name_sql}))
+              or
+              (element_type = 'Sample' and element_id in (select id from samples s where #{s_name_sql}))
             SQL
             pub_scope = pub_scope.where(name_search)
           end
@@ -388,8 +388,11 @@ def add_submission_history(root)
           title = e.element.short_label if element_type == 'Sample'
           checklist = e.review['checklist'] if User.reviewer_ids.include?(current_user&.id)
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
+
+          review_info = repo_review_info(e, current_user&.id, true)
+
           elements.push(
-            id: e.element_id, svg: svg_file, type: element_type, title: title, checklist: checklist || {}, isReviewer: User.reviewer_ids.include?(current_user&.id) || false,
+            id: e.element_id, svg: svg_file, type: element_type, title: title, checklist: checklist || {}, review_info: review_info, isReviewer: User.reviewer_ids.include?(current_user&.id) || false,
             published_by: u&.name, submitter_id: u&.id, submit_at: e.created_at, state: e.state, embargo: find_embargo_collection(e).label, scheme_only: scheme_only
           )
         end
@@ -397,6 +400,7 @@ def add_submission_history(root)
       end
 
       desc 'Get embargo list'
+      helpers RepositoryHelpers
       post 'embargo_list' do
         params do
           optional :is_submit, type: Boolean, default: false, desc: 'Publication submission'
@@ -405,11 +409,11 @@ def add_submission_history(root)
         if User.reviewer_ids.include?(current_user.id) && params[:is_submit] == false
           es = Publication.where(element_type: 'Collection', state: 'pending').order("taggable_data->>'label' ASC")
         else
-          if (current_user.type == 'Anonymous')
-            cols = Collection.where(id: current_user.sync_in_collections_users.pluck(:collection_id)).where.not(label: 'chemotion')
-          else
-            cols = Collection.where(ancestry: current_user.publication_embargo_collection.id)
-          end
+          cols = if current_user.type == 'Anonymous'
+                   Collection.where(id: current_user.sync_in_collections_users.pluck(:collection_id)).where.not(label: 'chemotion')
+                 else
+                   Collection.where(ancestry: current_user.publication_embargo_collection.id)
+                 end
           es = Publication.where(element_type: 'Collection', element_id: cols.pluck(:id)).order("taggable_data->>'label' ASC") unless cols.empty?
         end
 
@@ -531,23 +535,24 @@ def add_submission_history(root)
         end
         get do
           reaction = Reaction.where(id: params[:id])
-          .select(
-            <<~SQL
-            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
-            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
-            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
-            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
-            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
-            reactions.duration
-            SQL
-          ).includes(container: :attachments).last
+                             .select(
+                               <<~SQL
+                                 reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
+                                 reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
+                                 reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
+                                 reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
+                                 (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
+                                 reactions.duration
+                               SQL
+                             ).includes(container: :attachments).last
           literatures = get_literature(params[:id], 'Reaction', params[:is_public] ? 'public' : 'detail') || []
           reaction.products.each do |p|
             literatures += get_literature(p.id, 'Sample', params[:is_public] ? 'public' : 'detail')
           end
           schemeList = get_reaction_table(params[:id])
           publication = Publication.find_by(element_id: params[:id], element_type: 'Reaction')
-          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
+          review_info = repo_review_info(publication, current_user&.id, false)
+          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id) || (publication.review.dig('reviewers')&.include?(current_user&.id))
           published_user = User.find(publication.published_by) unless publication.nil?
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
@@ -558,13 +563,12 @@ def add_submission_history(root)
           entities[:embargoId] = embargo&.id
           {
             reaction: entities,
-            isSubmitter: publication.published_by == current_user.id,
-            reviewLevel: repo_review_level(params[:id], 'Reaction'),
             selectEmbargo: Publication.find_by(element_type: 'Collection', element_id: embargo&.id),
-            pub_name: published_user&.name || ''
+            pub_name: published_user&.name || '',
+            review_info: review_info
           }
         end
-    end
+      end
 
       resource :sample do
         helpers RepositoryHelpers
@@ -580,12 +584,15 @@ def add_submission_history(root)
           error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
         end
         get do
-          sample = Sample.where(id: params[:id]).includes(:molecule,:tag).last
-          review_sample = {**sample.serializable_hash.deep_symbolize_keys}
+          sample = Sample.where(id: params[:id]).includes(:molecule, :tag).last
+          review_sample = { **sample.serializable_hash.deep_symbolize_keys }
           review_sample[:segments] = sample.segments.present? ? Entities::SegmentEntity.represent(sample.segments) : []
           molecule = Molecule.find(sample.molecule_id) unless sample.nil?
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
+          review_info = repo_review_info(publication, current_user&.id, false)
+          # preapproved = publication.review.dig('checklist', 'glr', 'status') == true
+          # is_leader = publication.review.dig('reviewers')&.include?(current_user&.id)
           publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
@@ -593,6 +600,7 @@ def add_submission_history(root)
           embargo = find_embargo_collection(publication)
           review_sample[:embargo] = embargo&.label
           review_sample[:embargoId] = embargo&.id
+
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: review_sample,
@@ -602,8 +610,7 @@ def add_submission_history(root)
             selectEmbargo: Publication.find_by(element_type: 'Collection', element_id: embargo&.id),
             doi: Entities::DoiEntity.represent(sample.doi, serializable: true),
             pub_name: published_user&.name,
-            isSubmitter: publication.published_by == current_user.id,
-            reviewLevel: repo_review_level(params[:id], 'Sample')
+            review_info: review_info
           }
         end
       end
@@ -620,14 +627,14 @@ def add_submission_history(root)
             element_id: params['id']
           ).root
           error!('404 Publication not found', 404) unless @root_publication
-          error!('401 Unauthorized', 401) unless (User.reviewer_ids.include?(current_user.id) || @root_publication.published_by == current_user.id)
+          error!('401 Unauthorized', 401) unless User.reviewer_ids.include?(current_user.id) || @root_publication.published_by == current_user.id || @root_publication.review['reviewers'].include?(current_user.id)
         end
         post :preview do
           mt = []
           root_publication = @root_publication
           publications = [root_publication] + root_publication.descendants
           publications.each do |pub|
-            mt.push({ element_type: pub.element_type, metadata_xml: pub.datacite_metadata_xml })
+            mt.push(element_type: pub.element_type, metadata_xml: pub.datacite_metadata_xml)
           end
           { metadata: mt }
         end
@@ -653,8 +660,8 @@ def add_submission_history(root)
         helpers do
           def query_submitter(element_type, state)
             if User.reviewer_ids.include?(current_user.id)
-              state_sql = (state == 'All' || state.empty?) ? " state in ('pending', 'reviewed', 'accepted')" : ActiveRecord::Base.send(:sanitize_sql_array, [' state=? ', state])
-              type_sql = (element_type == 'All' || element_type.empty?) ? " element_type in ('Sample', 'Reaction')" : ActiveRecord::Base.send(:sanitize_sql_array, [' element_type=? ', element_type.chop])
+              state_sql = state == 'All' || state.empty? ? " state in ('pending', 'reviewed', 'accepted')" : ActiveRecord::Base.send(:sanitize_sql_array, [' state=? ', state])
+              type_sql = element_type == 'All' || element_type.empty? ? " element_type in ('Sample', 'Reaction')" : ActiveRecord::Base.send(:sanitize_sql_array, [' element_type=? ', element_type.chop])
               search_scope = User.where(type: 'Person').where(
                 <<~SQL
                   users.id in (
@@ -662,33 +669,33 @@ def query_submitter(element_type, state)
                     and #{state_sql} and #{type_sql})
                 SQL
               )
-              .order('first_name ASC')
+                                 .order('first_name ASC')
             else
               search_scope = User.where(id: current_user.id)
             end
             result = search_scope.select(
               <<~SQL
-              id as key, first_name, last_name, first_name || chr(32) || last_name as name, first_name || chr(32) || last_name || chr(32) || '(' || name_abbreviation || ')' as label
+                id as key, first_name, last_name, first_name || chr(32) || last_name as name, first_name || chr(32) || last_name || chr(32) || '(' || name_abbreviation || ')' as label
               SQL
             )
           end
 
           def query_embargo
-            if User.reviewer_ids.include?(current_user.id)
-              search_scope = Collection.where(
-                <<~SQL
-                ancestry::integer in (select id from collections cx where label = 'Embargoed Publications')
-                SQL
-              )
-            else
-              search_scope = Collection.where(ancestry: current_user.publication_embargo_collection.id)
-            end
+            search_scope = if User.reviewer_ids.include?(current_user.id)
+                             Collection.where(
+                               <<~SQL
+                                 ancestry::integer in (select id from collections cx where label = 'Embargoed Publications')
+                               SQL
+                             )
+                           else
+                             Collection.where(ancestry: current_user.publication_embargo_collection.id)
+                           end
             result = search_scope.select(
               <<~SQL
                 id as key, label as name, label as label
               SQL
             )
-            .order('label ASC')
+                                 .order('label ASC')
           end
         end
         desc 'Find matched review values'
@@ -699,12 +706,12 @@ def query_embargo
         end
         get do
           result = case params[:type]
-          when 'Submitter'
-            query_submitter(params[:element_type], params[:state])
-          when 'Embargo'
-            query_embargo()
-          else
-            []
+                   when 'Submitter'
+                     query_submitter(params[:element_type], params[:state])
+                   when 'Embargo'
+                     query_embargo
+                   else
+                     []
           end
           { result: result }
         end
@@ -712,7 +719,26 @@ def query_embargo
 
       namespace :reviewing do
         helpers do
-          # TODO: mv to model
+          def approve_comments(root, comment, _checklist, _reviewComments, _action, _his = true)
+            review = root.review || {}
+            review_history = review['history'] || []
+            current = review_history.last
+            current['username'] = current_user.name
+            current['userid'] = current_user.id
+            current['action'] = 'pre-approved'
+            current['comment'] = comment unless comment.nil?
+            current['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
+            review_history[review_history.length - 1] = current
+            next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
+            review_history << next_node
+            review['history'] = review_history
+            revst = review['checklist'] || {}
+            revst['glr'] = { status: true, user: current_user.name, updated_at: Time.now.strftime('%d-%m-%Y %H:%M:%S') }
+            review['checklist'] = revst
+
+            root.update!(review: review)
+          end
+
           def save_comments(root, comment, checklist, reviewComments, action, his = true)
             review = root.review || {}
             review_history = review['history'] || []
@@ -727,7 +753,7 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
             current['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
 
             review_history[review_history.length - 1] = current
-            if his  ## add next_node
+            if his ## add next_node
               next_node = { action: 'revising', type: 'submit', state: 'reviewed' } if root.state == Publication::STATE_PENDING
               next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' } if root.state == Publication::STATE_REVIEWED
               review_history << next_node
@@ -736,9 +762,9 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
 
             if checklist&.length&.positive?
               revst = review['checklist'] || {}
-              checklist.each { |k, v|
+              checklist.each do |k, v|
                 revst[k] = v['status'] == true ? { status: v['status'], user: current_user.name, updated_at: Time.now.strftime('%d-%m-%Y %H:%M:%S') } : { status: false } unless revst[k] && revst[k]['status'] == v['status']
-              }
+              end
               review['checklist'] = revst
             end
             review['reviewComments'] = reviewComments if reviewComments.present?
@@ -751,7 +777,7 @@ def save_comment(root, comment)
             review_history = review['history'] || []
             current = review_history.last
             comments = current['comments'] || {}
-            comment[comment.keys[0]]['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S') if comment.keys.length > 0
+            comment[comment.keys[0]]['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S') unless comment.keys.empty?
             comment[comment.keys[0]]['username'] = current_user.name
             comment[comment.keys[0]]['userid'] = current_user.id
 
@@ -775,7 +801,7 @@ def save_comment(root, comment)
             element_type: params['type'].classify,
             element_id: params['id']
           ).root
-          error!('401 Unauthorized', 401) unless ((User.reviewer_ids.include?(current_user.id) && @root_publication.state == Publication::STATE_PENDING) || (@root_publication.published_by == current_user.id && @root_publication.state == Publication::STATE_REVIEWED ))
+          error!('401 Unauthorized', 401) unless (User.reviewer_ids.include?(current_user.id) && @root_publication.state == Publication::STATE_PENDING) || (@root_publication.review.dig('reviewers')&.include?(current_user&.id)) || (@root_publication.published_by == current_user.id && @root_publication.state == Publication::STATE_REVIEWED)
         end
 
         post :comments do
@@ -814,7 +840,10 @@ def save_comment(root, comment)
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
           his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
           { "#{params[:type]}": element, review: his || @root_publication.review }
+        end
 
+        post :approved do
+          approve_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'approved', false)
         end
 
         post :accepted do
@@ -830,7 +859,6 @@ def save_comment(root, comment)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
           { "#{params[:type]}": element, review: @root_publication.review, message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
-
         end
         post :declined do
           save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'declined', false)
@@ -850,6 +878,7 @@ def save_comment(root, comment)
           requires :sampleId, type: Integer, desc: 'Sample Id'
           requires :analysesIds, type: Array[Integer], desc: 'Selected analyses ids'
           optional :coauthors, type: Array[String], default: [], desc: 'Co-author (User)'
+          optional :reviewers, type: Array[String], default: [], desc: 'reviewers (User)'
           optional :refs, type: Array[Integer], desc: 'Selected references'
           optional :embargo, type: Integer, desc: 'Embargo collection'
           requires :license, type: String, desc: 'Creative Common License'
@@ -858,16 +887,17 @@ def save_comment(root, comment)
 
         after_validation do
           @sample = current_user.samples.find_by(id: params[:sampleId])
-          @analyses = @sample && @sample.analyses.where(id: params[:analysesIds])
+          @analyses = @sample&.analyses&.where(id: params[:analysesIds])
           @literals = Literal.where(id: params[:refs]) unless params[:refs].nil? || params[:refs].empty?
           ols_validation(@analyses)
-          if params[:addMe]
-            @author_ids = [current_user.id] + coauthor_validation(params[:coauthors])
-          else
-            @author_ids = coauthor_validation(params[:coauthors])
-          end
+          @author_ids = if params[:addMe]
+                          [current_user.id] + coauthor_validation(params[:coauthors])
+                        else
+                          coauthor_validation(params[:coauthors])
+                        end
           error!('401 Unauthorized', 401) unless @sample
           error!('404 analyses not found', 404) if @analyses.empty?
+          @group_reviewers = coauthor_validation(params[:reviewers])
         end
 
         post do
@@ -902,6 +932,7 @@ def save_comment(root, comment)
           requires :reactionId, type: Integer, desc: 'Reaction Id'
           requires :analysesIds, type: Array[Integer], desc: 'Selected analyses ids'
           optional :coauthors, type: Array[String], default: [], desc: 'Co-author (User)'
+          optional :reviewers, type: Array[String], default: [], desc: 'reviewers (User)'
           optional :refs, type: Array[Integer], desc: 'Selected references'
           optional :embargo, type: Integer, desc: 'Embargo collection'
           requires :license, type: String, desc: 'Creative Common License'
@@ -914,13 +945,14 @@ def save_comment(root, comment)
           error!('404 found no reaction to publish', 404) unless @reaction
           @analysis_set = @reaction.analyses.where(id: params[:analysesIds]) | Container.where(id: (@reaction.samples.map(&:analyses).flatten.map(&:id) & params[:analysesIds]))
           ols_validation(@analysis_set)
-          if params[:addMe]
-            @author_ids = [current_user.id] + coauthor_validation(params[:coauthors])
-          else
-            @author_ids = coauthor_validation(params[:coauthors])
-          end
+          @author_ids = if params[:addMe]
+                          [current_user.id] + coauthor_validation(params[:coauthors])
+                        else
+                          coauthor_validation(params[:coauthors])
+                        end
           error!('404 found no analysis to publish', 404) unless @analysis_set.present?
 
+          @group_reviewers = coauthor_validation(params[:reviewers])
           # error!('Reaction Publication not authorized', 401)
           @analysis_set_ids = @analysis_set.map(&:id)
           @literals = Literal.where(id: params[:refs]) unless params[:refs].nil? || params[:refs].empty?
@@ -943,7 +975,7 @@ def save_comment(root, comment)
         end
 
         put :dois do
-          reaction_products = @reaction.products.select { |s| s.analyses.select { |a| a.id.in?@analysis_set_ids }.count > 0 }
+          reaction_products = @reaction.products.select { |s| s.analyses.select { |a| a.id.in? @analysis_set_ids }.count > 0 }
           @reaction.reserve_suffix
           reaction_products.each do |p|
             d = p.reserve_suffix
@@ -983,7 +1015,6 @@ def save_comment(root, comment)
         end
 
         post do
-
           pub = Publication.find_by(element_id: params[:elementId], element_type: params[:elementType])
           declared_params = declared(params, include_missing: false)
 
@@ -1025,11 +1056,11 @@ def save_comment(root, comment)
           @reaction = current_user.reactions.find_by(id: params[:reactionId])
           @scheme_only = true
           error!('404 found no reaction to publish', 404) unless @reaction
-          schemeYield = params[:products] && params[:products].map{ |v| v.slice(:id, :_equivalent) }
-          @reaction.reactions_samples.select{ |rs| rs.type == 'ReactionsProductSample' }.map do |p|
-            py = schemeYield.select{ |o| o['id'] == p.sample_id }
-            p.equivalent = py[0]['_equivalent'] if py && py.length > 0
-            p.scheme_yield = py[0]['_equivalent'] if py && py.length > 0
+          schemeYield = params[:products]&.map { |v| v.slice(:id, :_equivalent) }
+          @reaction.reactions_samples.select { |rs| rs.type == 'ReactionsProductSample' }.map do |p|
+            py = schemeYield.select { |o| o['id'] == p.sample_id }
+            p.equivalent = py[0]['_equivalent'] if py && !py.empty?
+            p.scheme_yield = py[0]['_equivalent'] if py && !py.empty?
           end
 
           @reaction.reactions_samples.select{ |rs| rs.type != 'ReactionsProductSample' }.map do |p|
@@ -1038,10 +1069,8 @@ def save_comment(root, comment)
           @reaction.name = ''
           @reaction.purification = '{}'
           @reaction.dangerous_products = '{}'
-          unless params[:schemeDesc]
-            @reaction.description = { "ops" => [{ "insert" => "" }] }
-          end
-          @reaction.observation = { "ops" => [{ "insert" => "" }] }
+          @reaction.description = { 'ops' => [{ 'insert' => '' }] } unless params[:schemeDesc]
+          @reaction.observation = { 'ops' => [{ 'insert' => '' }] }
           @reaction.tlc_solvents = ''
           @reaction.tlc_description = ''
           @reaction.rf_value = 0
@@ -1049,11 +1078,11 @@ def save_comment(root, comment)
           @reaction.role = ''
           @reaction.temperature = params[:temperature]
           @reaction.duration = "#{params[:duration][:dispValue]} #{params[:duration][:dispUnit]}" unless params[:duration].nil?
-          if params[:addMe]
-            @author_ids = [current_user.id] + coauthor_validation(params[:coauthors])
-          else
-            @author_ids = coauthor_validation(params[:coauthors])
-          end
+          @author_ids = if params[:addMe]
+                          [current_user.id] + coauthor_validation(params[:coauthors])
+                        else
+                          coauthor_validation(params[:coauthors])
+                        end
         end
 
         post do
@@ -1099,7 +1128,6 @@ def remove_embargo_collection(col)
             col.sync_collections_users.destroy_all
             col.really_destroy!
           end
-
         end
         desc 'Generate account with chosen Embargo'
         params do
diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index e71dd41f5..6828f4df8 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -105,257 +105,6 @@ class UserAPI < Grape::API
       end
     end
 
-    resource :collaborators do
-      helpers do
-        def format_date(obj)
-          return nil if obj.nil? || obj['year'].nil?
-
-          Date.new(obj['year']&.to_i, obj['month']&.to_i || 1, obj['day']&.to_i || 1)
-        end
-
-        def process_orcid_affiliation(user, emps)
-          return if emps.nil?
-
-          emps = [emps] unless emps.is_a?(Array)
-          emps.each do |emp|
-            next if emp.nil?
-
-            org = emp['employment_summary']['organization']['name']
-            c_code = emp['employment_summary']['organization']['address']['country']
-            dep = emp['employment_summary']['department_name']
-            country = ISO3166::Country.translations[c_code]
-            from = format_date(emp['employment_summary']['start_date'])
-            to = format_date(emp['employment_summary']['end_date'])
-            aff = Affiliation.find_or_create_by(country: country, organization: org, department: dep)
-            UserAffiliation.create(user_id: user.id, affiliation_id: aff.id, from: from, to: to)
-          end
-        end
-      end
-
-      namespace :list do
-        desc 'fetch collaborators of current user'
-        get do
-          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
-          data = User.where(id: ids)
-          present data, with: Entities::CollaboratorEntity, root: 'authors'
-        end
-      end
-
-      namespace :orcid do
-        desc 'fetch collaborators by orcid'
-        params do
-          requires :orcid, type: String
-        end
-        get do
-          erro_msg = nil
-          sql_str = ["id in (select user_id from profiles p where p.data->>'ORCID' = ?) ", params[:orcid]]
-          collaborator = User.where(type: %w[Person Collaborator]).where(sql_str).order('type desc')&.first
-
-          if collaborator.nil?
-            result = Chemotion::OrcidService.record_person(params[:orcid])
-
-            if result.nil?
-              erro_msg = 'ORCID does not exist! Please check.'
-            elsif result.person&.family_name.nil?
-              erro_msg = 'Last name can not be blank!'
-            else
-              attributes = {}
-              attributes[:first_name] = result&.person&.given_names
-              attributes[:last_name] = result.person&.family_name
-              attributes[:type] = 'Collaborator'
-              attributes[:confirmed_at] = DateTime.now
-              attributes[:name_abbreviation] = "c#{SecureRandom.random_number(9999)}"
-              attributes[:password] = Devise.friendly_token.first(8)
-              attributes[:email] = "#{current_user.name_abbreviation}.#{attributes[:name_abbreviation]}@chemotion.net"
-              new_collaborator = User.create!(attributes)
-              new_collaborator.profile.update!(data: { "ORCID": params[:orcid] })
-              UsersCollaborator.create(user_id: current_user.id, collaborator_id: new_collaborator.id)
-              emps = Chemotion::OrcidService.record_employments(params[:orcid])
-              process_orcid_affiliation(new_collaborator, emps)
-            end
-          elsif collaborator.id == current_user.id
-            erro_msg = 'Can not add yourself as a collaborator'
-          else
-            has_col = UsersCollaborator.where(user_id: current_user.id, collaborator_id: collaborator.id)
-            if has_col.empty?
-              UsersCollaborator.create(user_id: current_user.id, collaborator_id: collaborator.id)
-            else
-              erro_msg = 'Collaborator is existed!'
-            end
-          end
-
-          if erro_msg.nil?
-            ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
-            data = User.where(id: ids)
-            present data, with: Entities::CollaboratorEntity, root: 'authors'
-          else
-            { error: true, message: erro_msg }
-          end
-        end
-      end
-
-      namespace :user do
-        desc 'fetch collaborators of current user'
-        params do
-          optional :name, type: String
-          optional :first, type: String
-        end
-        get do
-          sql_str = []
-          if params[:name].present? && params[:first].present?
-            sql_str = [" LOWER(last_name) like ? and LOWER(first_name) like ? ",'%'+params[:name].downcase+'%','%'+params[:first].downcase+'%']
-          end
-          if !params[:name].present? && params[:first].present?
-            sql_str = [" LOWER(first_name) LIKE ? ",'%'+params[:first].downcase+'%']
-          end
-          if params[:name].present? && !params[:first].present?
-            sql_str = [" LOWER(last_name) LIKE ? ",'%'+params[:name].downcase+'%']
-          end
-
-          extr_sql = "(type='Person' or (type='Collaborator' and id in (select user_id from profiles where cast(data->>'ORCID' as text) is not null)))"
-          data = User.where.not(confirmed_at: nil).where(sql_str).where(extr_sql)
-          present data, with: Entities::CollaboratorEntity, root: 'users'
-        end
-      end
-
-      namespace :add do
-        desc 'add user to my collabration'
-        params do
-          requires :id, type: Integer
-        end
-        post do
-          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: params[:id] })
-          user = User.find(params[:id])
-          present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :add_aff do
-        desc 'add user to my collabration'
-        params do
-          requires :id, type: Integer
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          collaborator = User.find(params[:id])
-          aff = [Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])]
-          collaborator.affiliations << aff unless aff.nil?
-          present collaborator, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :find_add_aff do
-        desc 'add user to my collabration'
-        params do
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          aff = Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])
-          { id: aff.id, aff_output: aff.output_full }
-        end
-      end
-
-      namespace :delete do
-        desc 'remove user from my collabration'
-        params do
-          requires :id, type: Integer
-        end
-        post do
-          uc = UsersCollaborator.find_by(user_id: current_user.id, collaborator_id: params[:id])
-          uc.delete
-          #present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :delete_aff do
-        desc 'remove affilication from my collabration'
-        params do
-          requires :user_id, type: Integer
-          requires :aff_id, type: Integer
-        end
-        post do
-          ua = UserAffiliation.find_by(user_id: params[:user_id], affiliation_id: params[:aff_id])
-          ua.destroy!
-
-          user = User.find(params[:user_id])
-          present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :refresh_orcid_aff do
-        desc 'refresh affilication from orcid'
-        params do
-          requires :user_id, type: Integer
-        end
-        post do
-          user = User.find_by(id: params[:user_id])
-          if user.type != 'Collaborator' || user.orcid.nil?
-            { error: true, message: 'Unable to refresh the affilication from this ORCID!' }
-          else
-            emps = Chemotion::OrcidService.record_employments(user.orcid)
-            if emps.nil?
-              { error: true, message: 'Unable to fetch the affilication from this ORCID!' }
-            else
-              uas = UserAffiliation.where(user_id: user.id)
-              uas.each do |ua|
-                next if ua.nil?
-
-                ua.destroy!
-              end
-              process_orcid_affiliation(user, emps)
-              ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
-              data = User.where(id: ids)
-              present data, with: Entities::CollaboratorEntity, root: 'authors'
-            end
-          end
-        end
-      end
-
-      namespace :load_orcid do
-        desc 'refresh affilication from orcid'
-        params do
-          requires :ids, type: Array[Integer]
-        end
-        post do
-          orcids = User.where(id: params[:ids]).map { |user| { id: user.id, orcid: user.orcid } }
-          { orcids: orcids.reject { |oo| oo[:orcid].nil? } }
-        end
-      end
-
-      namespace :create do
-        desc 'create and add user to my collabration'
-        params do
-          requires :lastName, type: String
-          requires :firstName, type: String
-          optional :email, type: String
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          attributes = {} #declared(params, include_missing: false)
-          attributes[:first_name] = params[:firstName]
-          attributes[:last_name] = params[:lastName]
-          attributes[:type] = 'Collaborator'
-          attributes[:confirmed_at] = DateTime.now
-          attributes[:name_abbreviation] = "c#{SecureRandom.random_number(9999)}"
-          attributes[:password] = Devise.friendly_token.first(8)
-          attributes[:email] = "#{current_user.name_abbreviation}.#{attributes[:name_abbreviation]}@chemotion.net"
-          new_user = User.create!(attributes)
-          new_user.profile.update!({data: {}})
-          new_user.affiliations = [Affiliation.find_or_create_by(country: params[:country],
-            organization: params[:organization], department: params[:department])]
-
-          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: new_user.id })
-          present new_user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-    end
-
     resource :groups do
       rescue_from ActiveRecord::RecordInvalid do |error|
         message = error.record.errors.messages.map do |attr, msg|
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 3dee34817..c431042bf 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -157,6 +157,17 @@ def check_repo_review_permission(element)
     return false
   end
 
+  def repo_review_info(pub, user_id, lst)
+    {
+      submitter: pub.published_by == user_id,
+      reviewer: User.reviewer_ids.include?(user_id) || false,
+      groupleader: pub.review.dig('reviewers')&.include?(user_id),
+      leaders: User.where(id: pub.review.dig('reviewers'))&.map{ |u| u.name },
+      preapproved: pub.review.dig('checklist', 'glr', 'status') == true,
+      review_level: repo_review_level(pub.element_id, pub.element_type)
+    }
+  end
+
   def repo_review_level(id, type)
     return 3 if User.reviewer_ids&.include? current_user.id
     pub = Publication.find_by(element_id: id, element_type: type.classify)
diff --git a/app/api/helpers/submission_helpers.rb b/app/api/helpers/submission_helpers.rb
index 6563327c2..c5dc2842b 100644
--- a/app/api/helpers/submission_helpers.rb
+++ b/app/api/helpers/submission_helpers.rb
@@ -12,7 +12,7 @@ def ols_validation(analyses)
 
   def coauthor_validation(coauthors)
     coauthor_ids = []
-    coauthors.each do |coa|
+    coauthors&.each do |coa|
       val = coa.strip
       usr = User.where(type: %w[Person Collaborator]).where.not(confirmed_at: nil).where('id = ? or email = ?', val.to_i, val.to_s).first
       error!('invalid co-author: ' + val.to_s, 404) if usr.nil?
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
index 929dd9802..a2932d222 100644
--- a/app/assets/stylesheets/home.scss
+++ b/app/assets/stylesheets/home.scss
@@ -1,13 +1,3 @@
-.omniauth-navitem {
-    padding-left: 24px;
-
-    img {
-        position: absolute;
-        top: 6;
-        left: -15px;
-        height: 24px;
-    }
-}
 .div-table {
   display: table;
   border-spacing: 10px;
diff --git a/app/assets/stylesheets/omniauth.scss b/app/assets/stylesheets/omniauth.scss
index 02511e0bf..5fef986bf 100644
--- a/app/assets/stylesheets/omniauth.scss
+++ b/app/assets/stylesheets/omniauth.scss
@@ -1,5 +1,8 @@
 .omniauth-btn {
-    width: 18vh;
+  width: 20vh;
+  text-align: left;
+  img {
+    position: absolute;
     text-align: left;
     img {
       position: absolute;
diff --git a/app/controllers/users/omniauth_controller.rb b/app/controllers/users/omniauth_controller.rb
index 290a330a0..26daf43b0 100644
--- a/app/controllers/users/omniauth_controller.rb
+++ b/app/controllers/users/omniauth_controller.rb
@@ -92,4 +92,4 @@ def auth_handler
       end
     end
   end
-end
+end
\ No newline at end of file
diff --git a/app/models/admin.rb b/app/models/admin.rb
index 84e417447..53d0a2ea8 100644
--- a/app/models/admin.rb
+++ b/app/models/admin.rb
@@ -25,19 +25,18 @@
 #  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
+#  layout                 :hstore           not null
 #  confirmation_token     :string
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  layout                 :hstore           not null
 #  selected_device_id     :integer
 #  failed_attempts        :integer          default(0), not null
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/anonymous.rb b/app/models/anonymous.rb
index cb3c3f4bb..ccf775591 100644
--- a/app/models/anonymous.rb
+++ b/app/models/anonymous.rb
@@ -34,8 +34,7 @@
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/collaborator.rb b/app/models/collaborator.rb
index f5c78983b..7b6626dfa 100644
--- a/app/models/collaborator.rb
+++ b/app/models/collaborator.rb
@@ -34,8 +34,7 @@
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/compound_open_data.rb b/app/models/compound_open_data.rb
index a03f8b5ce..1a5074375 100644
--- a/app/models/compound_open_data.rb
+++ b/app/models/compound_open_data.rb
@@ -17,4 +17,5 @@
 #
 
 class CompoundOpenData < ApplicationRecord
+  default_scope { order(x_created_at: :desc) }
 end
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index d6f2f081d..78a3665b8 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -78,6 +78,10 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked non_jcamp], to: :csv
       end
 
+      event :set_nmrium do
+        transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
+      end
+
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
@@ -201,6 +205,10 @@ def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
     generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
   end
 
+  def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
+    generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
+  end
+
   def build_params(params = {})
     _, extname = extension_parts
     params[:mass] = 0.0
diff --git a/app/models/device.rb b/app/models/device.rb
index fe09f938f..301bd21da 100644
--- a/app/models/device.rb
+++ b/app/models/device.rb
@@ -23,19 +23,18 @@
 #  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
+#  layout                 :hstore           not null
 #  confirmation_token     :string
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  layout                 :hstore           not null
 #  selected_device_id     :integer
 #  failed_attempts        :integer          default(0), not null
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/group.rb b/app/models/group.rb
index 07ed20677..2d307e4b8 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -23,19 +23,18 @@
 #  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
+#  layout                 :hstore           not null
 #  confirmation_token     :string
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  layout                 :hstore           not null
 #  selected_device_id     :integer
 #  failed_attempts        :integer          default(0), not null
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/person.rb b/app/models/person.rb
index 84427b6be..ccc2bfc7d 100644
--- a/app/models/person.rb
+++ b/app/models/person.rb
@@ -23,19 +23,18 @@
 #  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
+#  layout                 :hstore           not null
 #  confirmation_token     :string
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  layout                 :hstore           not null
 #  selected_device_id     :integer
 #  failed_attempts        :integer          default(0), not null
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 6d3e014d9..146027db3 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -26,6 +26,7 @@
 # Indexes
 #
 #  index_publications_on_ancestry  (ancestry)
+#  publications_element_idx        (element_type,element_id,deleted_at)
 #
 
 class Publication < ActiveRecord::Base
@@ -94,13 +95,17 @@ def process_element(new_state = state)
     case new_state
     when Publication::STATE_PENDING
       move_to_pending_collection
+      group_review_collection
     when Publication::STATE_REVIEWED
       move_to_review_collection
+      group_review_collection
     when Publication::STATE_ACCEPTED
       move_to_accepted_collection
+      group_review_collection
     when Publication::STATE_DECLINED
       declined_reverse_original_element
       declined_move_collections
+      group_review_collection
     end
   end
 
@@ -195,6 +200,27 @@ def declined_reverse_original_element
     declined_reverse_original_reaction_elements
   end
 
+  def group_review_collection
+    pub_user = User.find(published_by)
+    return false unless pub_user && element
+
+    group_reviewers = review['reviewers']
+    reviewers = User.where(id: group_reviewers) if group_reviewers.present?
+    return false if reviewers&.empty?
+
+    reviewers&.each do |user|
+      ## user = User.find(gl_id)
+      col = user.find_or_create_grouplead_collection
+      case element_type
+      when 'Sample'
+        CollectionsSample
+      when 'Reaction'
+        CollectionsReaction
+      end.create_in_collection([element.id], [col.id])
+    end
+
+  end
+
   def declined_reverse_original_reaction_elements
     element_type == 'Reaction' && original_element&.samples&.each do |s|
       spp = s.tag&.taggable_data&.delete('publish_pending')
@@ -648,12 +674,20 @@ def literals_sql(e_id, e_type)
     SQL
   end
 
+  def get_xvial(xvial)
+    com_config = Rails.configuration.compound_opendata
+    return nil unless com_config.present? && xvial.present?
+
+    CompoundOpenData.where("x_data ->> 'xid' = ?", xvial)
+  end
+
   def cust_sample
     if element_type == 'Sample'
       desc_type = "#{element.decoupled ? 'de' : ''}coupled_sample#{element.molecule_inchikey == 'DUMMY' ? '' : '_structure'}"
       melting_point = range_to_s(element.melting_point)
       boiling_point = range_to_s(element.boiling_point)
-      { type: desc_type, melting_point: melting_point, boiling_point: boiling_point }
+
+      { type: desc_type, melting_point: melting_point, boiling_point: boiling_point, x_id: get_xvial(element.tag&.taggable_data&.dig('xvial','num'))&.first&.x_short_label  }
     else
       {}
     end
@@ -665,7 +699,7 @@ def range_to_s(val)
     else
       start = val.begin == -Float::INFINITY ? '' : val.begin.to_f
       finish = val.end == Float::INFINITY ? '' : val.end.to_f
-      "#{start}#{start == '' || finish == '' ? '' : ' - '}#{finish}"
+      "#{start}#{start == '' || finish == '' ? '' : ' - '}#{finish} (°C)"
     end
   end
 
diff --git a/app/models/user.rb b/app/models/user.rb
index 0abd48c0e..c730fe476 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -25,19 +25,18 @@
 #  name_abbreviation      :string(12)
 #  type                   :string           default("Person")
 #  reaction_name_prefix   :string(3)        default("R")
+#  layout                 :hstore           not null
 #  confirmation_token     :string
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  layout                 :hstore           not null
 #  selected_device_id     :integer
 #  failed_attempts        :integer          default(0), not null
 #  unlock_token           :string
 #  locked_at              :datetime
 #  account_active         :boolean
 #  matrix                 :integer          default(0)
-#  omniauth_provider      :string
-#  omniauth_uid           :string
+#  providers              :jsonb
 #
 # Indexes
 #
@@ -240,7 +239,8 @@ def mail_checker
   end
 
   def orcid
-    profile&.data&.fetch('ORCID', nil)
+    providers&.fetch('orcid', nil)
+    # profile&.data&.fetch('ORCID', nil)
   end
 
   def owns_collections?(collections)
@@ -391,6 +391,24 @@ def sync_element_to_review_collection
       .where("collections.label = 'Element To Review'").first
   end
 
+  def find_or_create_grouplead_collection
+    chemotion_user = User.chemotion_user
+    sys_review_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Group Lead Review from', is_locked: true, is_shared: false)
+    sys_review_collection = Collection.create(user: chemotion_user, label: 'Group Lead Review', ancestry: "#{sys_review_from.id}")
+
+    col_attributes = {
+      user: self,
+      shared_by_id: chemotion_user.id,
+      is_locked: true,
+      is_shared: true
+    }
+
+    rc = Collection.find_by(col_attributes)
+    SyncCollectionsUser.find_or_create_by(user: self, shared_by_id: chemotion_user.id, collection_id: sys_review_collection.id,
+      permission_level: 3, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
+    sys_review_collection
+  end
+
   def published_collection
     su_id = User.chemotion_user.id
     Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 9078f5b05..acc912e87 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -157,10 +157,9 @@ class App extends Component {
   }
 
   renderReviewModal() {
-    const { showReviewModal, reviewLevel, isSubmitter, review, currentElement, elementType, btnAction } = this.state;
+    const { showReviewModal, review_info, review, currentElement, elementType, btnAction } = this.state;
     const rrr = {};
-    rrr.reviewLevel = reviewLevel;
-    rrr.isSubmitter = isSubmitter;
+    rrr.review_info = review_info;
     rrr.review = review;
     rrr.btnAction = btnAction;
     rrr.elementType = elementType;
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index c2939f794..88560c139 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -195,14 +195,13 @@ class ViewSpectra extends React.Component {
     const sis = spcInfos.filter(x => x.idx === spcIdx);
     const si = sis.length > 0 ? sis[0] : spcInfos[0];
 
-    const opsTmp = sample.analysesContainers().map((ae) => {
+    const ops = sample.analysesContainers().map((ae) => {
       if (ae.id !== si.idAe) return null;
       return ae.children.map((ai) => {
         if (ai.id !== si.idAi) return null;
         return ai.extended_metadata.content.ops; // eslint-disable-line
       }).filter(r => r !== null);
-    }).filter(r => r !== null);
-    const ops = opsTmp && opsTmp[0] && opsTmp[0][0];
+    }).filter(r => r !== null)[0][0];
     return ops;
   }
 
@@ -566,6 +565,7 @@ class ViewSpectra extends React.Component {
       ];
     }
 
+    // TO BE CHECKED
     if (baseOps.length === 0) {
       baseOps = [{ name: 'predict', value: this.predictOp }];
     }
@@ -657,8 +657,7 @@ class ViewSpectra extends React.Component {
       molecule: 'molecule',
       predictions,
     };
-    const { spcInfos } = this.state;
-    const spcSvg = spcInfos && spcInfos[0] && spcInfos[0].svg;
+
     return (
       <Modal.Body>
         {
@@ -735,6 +734,7 @@ class ViewSpectra extends React.Component {
             value={isShowMultiSelect ? arrSpcIdx : idx}
             treeCheckable={isShowMultiSelect}
             style={{ width: 500 }}
+            maxTagCount={1}
             onChange={onSelectChange} />
         </div>
         <Button
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
index c108e2593..c6b1487c2 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js
@@ -259,7 +259,6 @@ export default class SampleDetailsContainers extends Component {
             handleSampleChanged={handleSampleChanged}
             handleSubmit={handleSubmit}
           />
-
         </div>
       );
     }
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 631dd938d..e0a91132a 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -63,6 +63,13 @@ const qCheckMsg = (sample, container) => {
   return '';
 };
 
+const isNMRKind = (container) => {
+  if (container.extended_metadata.kind) {
+    return container.extended_metadata.kind.includes('NMR');
+  }
+  return false;
+}
+
 const SpectraEditorBtn = ({
   sample, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
@@ -391,6 +398,9 @@ const headerBtnGroup = (
         toggleNMRDisplayerModal={toggleNMRDisplayerModal}
         hasNMRium={hasNMRium}
         isReviewer={isReviewer}
+        confirmRegenerateEdited={confirmRegenerateEdited}
+        toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+        hasNMRium={hasNMRium}
       />
       <span className="button-right">
         <RepoMolViewerListBtn el={sample} container={container} isPublic={false} />
diff --git a/app/packs/src/components/NMRiumDisplayer.js b/app/packs/src/components/NMRiumDisplayer.js
new file mode 100644
index 000000000..e9419754c
--- /dev/null
+++ b/app/packs/src/components/NMRiumDisplayer.js
@@ -0,0 +1,472 @@
+import React from 'react';
+import base64 from 'base-64';
+import { Modal, Button } from 'react-bootstrap';
+import { FN } from '@complat/react-spectra-editor';
+import SpectraStore from './stores/SpectraStore';
+import SpectraActions from './actions/SpectraActions';
+import LoadingActions from './actions/LoadingActions';
+import UIFetcher from './fetchers/UIFetcher';
+import { parseBase64ToArrayBuffer } from './utils/FetcherHelper';
+import Attachment from './models/Attachment';
+import { SpectraOps } from './utils/quillToolbarSymbol';
+
+export default class NMRiumDisplayer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...SpectraStore.getState(),
+      nmriumData: null,
+    };
+
+    this.iframeRef = React.createRef();
+
+    this.onChange = this.onChange.bind(this);
+    this.receiveMessage = this.receiveMessage.bind(this);
+    this.handleNMRDisplayerLoaded = this.handleNMRDisplayerLoaded.bind(this);
+    this.sendJcampDataToNMRDisplayer = this.sendJcampDataToNMRDisplayer.bind(this);
+    this.loadNMRDisplayerHostInfo = this.loadNMRDisplayerHostInfo.bind(this);
+    this.requestDataToBeSaved = this.requestDataToBeSaved.bind(this);
+    this.requestPreviewImage = this.requestPreviewImage.bind(this);
+    this.savingNMRiumWrapperData = this.savingNMRiumWrapperData.bind(this);
+    this.saveOp = this.saveOp.bind(this);
+
+    this.findDisplayingSpectra = this.findDisplayingSpectra.bind(this);
+    this.findDisplayingSpectrumID = this.findDisplayingSpectrumID.bind(this);
+    this.buildPeaksBody = this.buildPeaksBody.bind(this);
+    this.readNMRiumData = this.readNMRiumData.bind(this);
+
+    this.loadNMRDisplayerHostInfo();
+  }
+
+  componentDidMount() {
+    SpectraStore.listen(this.onChange);
+
+    window.addEventListener('message', this.receiveMessage);
+  }
+
+  componentWillUnmount() {
+    SpectraStore.unlisten(this.onChange);
+  }
+
+  handleNMRDisplayerLoaded() {
+    const isIframeLoaded = true;
+    this.setState({
+      isIframeLoaded,
+    }, () => {
+      this.sendJcampDataToNMRDisplayer();
+    });
+  }
+
+  onChange(newState) {
+    const origState = this.state;
+    this.setState({ ...origState, ...newState });
+    this.sendJcampDataToNMRDisplayer();
+  }
+
+  getSpcInfo() {
+    const { spcInfos, spcIdx } = this.state;
+    const sis = spcInfos.filter((x) => x.idx === spcIdx);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+    return si;
+  }
+
+  loadNMRDisplayerHostInfo() {
+    UIFetcher.fetchNMRDisplayerHost().then((response) => {
+      const { protocol, host, port } = response;
+      let nmriumOrigin = `${protocol}://${host}`;
+      let nmriumWrapperHost = `${protocol}://${host}`;
+      if (port) {
+        nmriumOrigin = `${nmriumOrigin}:${port}`;
+        nmriumWrapperHost = `${nmriumWrapperHost}:${port}`;
+      }
+      this.setState({ nmriumWrapperHost, nmriumOrigin });
+    });
+  }
+
+  receiveMessage(event) {
+    const { nmriumWrapperHost, nmriumOrigin } = this.state;
+    if (nmriumWrapperHost === undefined || nmriumWrapperHost === '') {
+      return;
+    }
+
+    if (event.origin === nmriumOrigin && event.data) {
+      const eventData = event.data;
+      const eventDataType = eventData.type;
+
+      if (eventDataType === 'nmr-wrapper:data-change') {
+
+        const nmrWrapperActionType = eventData.data.actionType;
+        if (nmrWrapperActionType !== '') {
+          const nmriumData = eventData.data.data;
+          const { version } = nmriumData;
+          if (version > 3) {
+            this.setState({ nmriumData: nmriumData.data });
+          }
+          else {
+            this.setState({ nmriumData });
+          }
+        }
+      } else if (eventDataType === 'nmr-wrapper:action-response') {
+        const nmrWrapperDataType = eventData.data.type;
+        if (nmrWrapperDataType === 'exportSpectraViewerAsBlob') {
+          const blobData = eventData.data.data.blob;
+          this.savingNMRiumWrapperData(blobData);
+        }
+      }
+    }
+  }
+
+  requestDataToBeSaved() {
+    this.requestPreviewImage();
+  }
+
+  requestPreviewImage() {
+    const iframeCurrent = this.iframeRef.current;
+    if (!iframeCurrent) {
+      return;
+    }
+    const { contentWindow } = iframeCurrent;
+    const dataToBeSent = {
+      type: 'exportSpectraViewerAsBlob',
+    };
+    contentWindow.postMessage({ type: 'nmr-wrapper:action-request', data: dataToBeSent }, '*');
+  }
+
+  sendJcampDataToNMRDisplayer() {
+    LoadingActions.start.defer();
+    const { fetchedFiles, isIframeLoaded, spcInfos } = this.state;
+    if (isIframeLoaded && fetchedFiles && fetchedFiles.files && fetchedFiles.files.length > 0) {
+      LoadingActions.stop.defer();
+
+      const listFileContents = fetchedFiles.files;
+      if (this.iframeRef.current
+        && listFileContents.length > 0
+        && listFileContents.length === spcInfos.length) {
+        const dataToBeSent = this.buildDataToBeSent(listFileContents, spcInfos);
+        const { contentWindow } = this.iframeRef.current;
+        if (contentWindow) {
+          contentWindow.postMessage({ type: 'nmr-wrapper:load', data: dataToBeSent }, '*');
+        }
+      }
+    } else {
+      LoadingActions.stop.defer();
+    }
+  }
+
+  buildDataToBeSent(files, spectraInfos) {
+    const { sample } = this.props;
+    const nmriumData = this.readNMRiumData(files, spectraInfos);
+    if (nmriumData) {
+      const data = { data: nmriumData, type: 'nmrium' };
+      return data;
+    }
+
+    const data = { data: [], type: 'file' };
+    for (let index = 0; index < files.length; index += 1) {
+      const fileToBeShowed = files[index].file;
+      const bufferData = parseBase64ToArrayBuffer(fileToBeShowed);
+      const spcInfo = spectraInfos[index];
+      const fileName = spcInfo.label;
+      const blobToBeSent = new Blob([bufferData]);
+      const dataItem = new File([blobToBeSent], fileName);
+      data.data.push(dataItem);
+    }
+    if (sample) {
+      const { molfile } = sample;
+      const fileName =`${sample.id}.mol`;
+      const blobToBeSent = new Blob([molfile]);
+      const dataItem = new File([blobToBeSent], fileName);
+      data.data.push(dataItem);
+    }
+    return data;
+  }
+
+  readNMRiumData(files, spectraInfos) {
+    const arrNMRiumSpecs = spectraInfos.filter((spc) => spc.label.includes('.nmrium'));
+    if (!arrNMRiumSpecs || arrNMRiumSpecs.length === 0) {
+      return false;
+    }
+
+    const nmriumSpec = arrNMRiumSpecs[0];
+
+    const arrNMRiumFiles = files.filter((file) => file.id === nmriumSpec.idx);
+    if (!arrNMRiumFiles || arrNMRiumFiles.length === 0) {
+      return false;
+    }
+
+    const nmriumDataEncoded = arrNMRiumFiles[0].file;
+    const decodedData = base64.decode(nmriumDataEncoded);
+    const nmriumData = JSON.parse(decodedData);
+    return nmriumData;
+  }
+
+  savingNMRiumWrapperData(imageBlobData = false) {
+    const { nmriumData } = this.state;
+    if (nmriumData === null || !imageBlobData) {
+      return;
+    }
+
+    const specInfo = this.getSpcInfo();
+    if (!specInfo) {
+      return;
+    }
+
+    const { label } = specInfo;
+    const specLabelParts = label.split('.');
+    const fileNameWithoutExt = specLabelParts[0];
+
+    const imageAttachment = this.prepareImageAttachment(imageBlobData, fileNameWithoutExt);
+    const nmriumAttachment = this.prepareNMRiunDataAttachment(nmriumData, fileNameWithoutExt);
+    const listFileNameToBeDeleted = [imageAttachment.filename, nmriumAttachment.filename];
+    const datasetToBeUpdated = this.prepareDatasets(listFileNameToBeDeleted);
+    if (!datasetToBeUpdated) {
+      return;
+    }
+
+    this.prepareAnalysisMetadata(nmriumData);
+
+    const { sample, handleSampleChanged } = this.props;
+
+    datasetToBeUpdated.attachments.push(imageAttachment);
+    datasetToBeUpdated.attachments.push(nmriumAttachment);
+
+    const cb = () => (
+      this.saveOp()
+    );
+    handleSampleChanged(sample, cb);
+  }
+
+  prepareDatasets(fileNameToBeDeleted = []) {
+    const specInfo = this.getSpcInfo();
+    const { sample } = this.props;
+
+    const datasetContainers = sample.datasetContainers();
+    const listDatasetFiltered = datasetContainers.filter((e) => specInfo.idDt === e.id);
+    if (listDatasetFiltered.length === 0) {
+      return false;
+    }
+
+    const datasetToBeUpdated = listDatasetFiltered[0];
+    const datasetAttachments = datasetToBeUpdated.attachments;
+    datasetAttachments.forEach((att) => {
+      if (fileNameToBeDeleted.includes(att.filename)) {
+        att.is_deleted = true;
+      }
+    });
+    datasetToBeUpdated.attachments = datasetAttachments;
+    return datasetToBeUpdated;
+  }
+
+  prepareNMRiunDataAttachment(nmriumData, fileNameNoExt) {
+    const spaceIndent = 0;
+    const dataAsJson = JSON.stringify(
+      nmriumData,
+      (key, value) => (ArrayBuffer.isView(value) ? Array.from(value) : value),
+      spaceIndent,
+    );
+    const blobData = new Blob([dataAsJson], { type: 'text/plain' });
+    const fileName = `${fileNameNoExt}.nmrium`;
+    blobData.name = fileName;
+    const dataAttachment = Attachment.fromFile(blobData);
+    return dataAttachment;
+  }
+
+  prepareImageAttachment(blobData, fileNameNoExt) {
+    const fileName = `${fileNameNoExt}.svg`;
+    const blobDataToBeSaved = blobData;
+    blobDataToBeSaved.name = fileName;
+    const imageAttachment = Attachment.fromFile(blobDataToBeSaved);
+    imageAttachment.thumb = true;
+    return imageAttachment;
+  }
+
+  prepareAnalysisMetadata(nmriumData) {
+    const buildPeaksBodyObject = this.buildPeaksBody(nmriumData);
+    const { peaksBody, layout } = buildPeaksBodyObject;
+
+    if (peaksBody === '' || layout === '') {
+      return '';
+    }
+
+    const layoutOpsObj = SpectraOps[layout];
+
+    if (!layoutOpsObj) {
+      return '';
+    }
+
+    const { sample } = this.props;
+    const specInfo = this.getSpcInfo();
+
+    const analysesContainers = sample.analysesContainers();
+
+    const ops = [
+      ...layoutOpsObj.head(''),
+      { insert: peaksBody },
+      ...layoutOpsObj.tail(),
+    ];
+    analysesContainers.forEach((analyses) => {
+      if (analyses.id !== specInfo.idAe) return;
+      analyses.children.forEach((ai) => {
+        if (ai.id !== specInfo.idAi) return;
+        ai.extended_metadata.content.ops = [ // eslint-disable-line
+          ...ai.extended_metadata.content.ops,
+          ...ops,
+        ];
+      });
+    });
+  }
+
+  buildPeaksBody(nmriumData) {
+    const displayingSpectra = this.findDisplayingSpectra(nmriumData);
+    if (displayingSpectra.length <= 0) {
+      return { peaksBody: '', layout: '' };
+    }
+
+    const firstSpectrum = displayingSpectra[0];
+    const { info } = firstSpectrum;
+    if (info) {
+      const { dimension } = info;
+      if (dimension === 2) {
+        return { peaksBody: '', layout: '' };
+      }
+    }
+
+    const firstSpectrumPeaks = firstSpectrum.peaks;
+    const { values } = firstSpectrumPeaks;
+    const peaks = values;
+    const layout = firstSpectrum.nucleus;
+    const shift = { enable: false, peak: false, ref: { label: false, name: '---', value: 0 } };
+    const decimal = 2;
+    const peaksBody = FN.peaksBody({
+      peaks, layout, decimal, shift
+    });
+    return { peaksBody, layout };
+  }
+
+  findDisplayingSpectra(nmriumData) {
+    const { spectra, correlations } = nmriumData;
+    const displayingSpectrumID = this.findDisplayingSpectrumID(correlations);
+    if (displayingSpectrumID) {
+      const displayingSpectra = spectra.filter((spectrum) => {
+        const { id } = spectrum;
+        return id === displayingSpectrumID;
+      });
+      return displayingSpectra;
+    }
+
+    const nonFIDSpectra = spectra.filter((spectrum) => {
+      const { info } = spectrum;
+      const { isFid } = info;
+      return isFid === false;
+    });
+    return nonFIDSpectra;
+  }
+
+  findDisplayingSpectrumID(correlations) {
+    if (!correlations) {
+      return false;
+    }
+
+    try {
+      const { values } = correlations;
+      if (values.length > 0) {
+        const firstValue = values[0];
+        const { link } = firstValue;
+        if (link.length > 0) {
+          const firstLink = link[0];
+          const { experimentID } = firstLink;
+          return experimentID;
+        }
+      }
+      return false;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  saveOp() {
+    SpectraActions.ToggleModalNMRDisplayer.defer();
+    const { handleSubmit } = this.props;
+    handleSubmit()
+  }
+
+  renderNMRium(nmriumWrapperHost) {
+    return (
+      <Modal.Body>
+        <iframe
+          id="nmrium_wrapper"
+          className="spectra-editor"
+          src={nmriumWrapperHost}
+          allowFullScreen
+          ref={this.iframeRef}
+          onLoad={this.handleNMRDisplayerLoaded}
+        />
+      </Modal.Body>
+    );
+  }
+
+  renderModalTitle() {
+    const { nmriumData } = this.state;
+    let hasSpectra = false;
+    if (nmriumData && nmriumData.spectra.length > 0) {
+      hasSpectra = true;
+    }
+
+    return (
+      <Modal.Header>
+        <Button
+          bsStyle="danger"
+          bsSize="small"
+          className="button-right"
+          onClick={() => {
+            SpectraActions.ToggleModalNMRDisplayer.defer();
+          }}
+        >
+          <span>
+            <i className="fa fa-times" />
+            {' '}
+            Close without Save
+          </span>
+        </Button>
+        {
+          hasSpectra ?
+          (
+            <Button
+              bsStyle="success"
+              bsSize="small"
+              className="button-right"
+              onClick={() => {
+                this.requestDataToBeSaved()
+              }}
+            >
+              <span>
+                <i className="fa fa-floppy-o" />
+                {' '}
+                Close with Save
+              </span>
+            </Button>
+          ) : null
+        }
+      </Modal.Header>
+    );
+  }
+
+  render() {
+    const { showModalNMRDisplayer, nmriumWrapperHost } = this.state;
+
+    return (
+      <div className="spectra-editor">
+        <Modal
+          show={showModalNMRDisplayer}
+          dialogClassName="spectra-editor-dialog"
+          animation
+          onHide={this.closeOp}
+        >
+          {this.renderModalTitle()}
+          {this.renderNMRium(nmriumWrapperHost)}
+        </Modal>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index 87e35df8f..b65e01315 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -25,6 +25,7 @@ import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnal
 import LoadingActions from './actions/LoadingActions';
 import { groupByCitation, Citation } from '../components/LiteratureCommon';
 import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
+import CollaboratorFetcher from '../components/fetchers/CollaboratorFetcher';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
 import { contentToText } from './utils/quillFormat';
 import { CitationTypeMap, CitationTypeEOL } from './CitationType';
@@ -56,6 +57,8 @@ export default class PublishReactionModal extends Component {
     this.state = {
       reaction,
       selectedUsers: [],
+      selectedReviewers: [],
+      showSelectionReviewer: false,
       collaborations: [],
       showPreview: false,
       showScheme: false,
@@ -81,6 +84,7 @@ export default class PublishReactionModal extends Component {
     this.handlePublishReaction = this.handlePublishReaction.bind(this);
     this.handleReserveDois = this.handleReserveDois.bind(this);
     this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
     this.loadUserByName = this.loadUserByName.bind(this);
     this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
     this.toggleScheme = this.toggleScheme.bind(this);
@@ -255,7 +259,7 @@ export default class PublishReactionModal extends Component {
   }
 
   loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
+    CollaboratorFetcher.fetchMyCollaborations()
       .then((result) => { this.setState({ collaborations: result.authors }); });
   }
 
@@ -268,6 +272,10 @@ export default class PublishReactionModal extends Component {
     return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br /> {aff} </div>);
   }
 
+  handleSelectReviewer(val) {
+    if (val) { this.setState({ selectedReviewers: val }); }
+  }
+
   loadUserByName(input) {
     if (!input) {
       return Promise.resolve({ options: [] });
@@ -375,6 +383,7 @@ export default class PublishReactionModal extends Component {
       isFullyPublish,
       reaction: this.state.reaction,
       coauthors: this.state.selectedUsers.map(u => u.value),
+      reviewers: this.state.selectedReviewers.map(u => u.value),
       refs: this.state.selectedRefs,
       embargo: this.state.selectedEmbargo,
       license: this.state.selectedLicense,
@@ -452,6 +461,45 @@ export default class PublishReactionModal extends Component {
     );
   }
 
+  addReviewers() {
+    const { selectedReviewers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+
+    return (
+      <div >
+        <h5><b>Additional Reviewers:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select reviewers from my collaboration"
+          backspaceRemoves
+          value={selectedReviewers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectReviewer}
+        />
+        <div>
+          {reviewerInfo}
+        </div>
+      </div>
+    );
+  }
+
   toggleDiv(key) {
     if (key) {
       this.setState((previousState) => {
@@ -604,7 +652,7 @@ export default class PublishReactionModal extends Component {
   render() {
     const { show } = this.props;
     const {
-      reaction, selectedUsers, selectedRefs, publishType, bundles
+      reaction, selectedUsers, selectedReviewers, selectedRefs, publishType, bundles
     } = this.state;
 
     const isFullyPublish = publishType.selected === publishOptions.f;
@@ -857,6 +905,16 @@ export default class PublishReactionModal extends Component {
                     {this.selectReferences()}
                   </Panel.Body>
                 </Panel>
+                <Panel eventKey="6">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.addReviewers()}
+                  </Panel.Body>
+                </Panel>
               </PanelGroup>
             </Modal.Body>
             <Modal.Footer style={{ padding: '6px' }}>
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index 27a4b530d..e26cfadd6 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -18,6 +18,7 @@ import { groupByCitation, Citation } from '../components/LiteratureCommon';
 import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
 import LoadingActions from './actions/LoadingActions';
 import SamplesFetcher from './fetchers/SamplesFetcher';
+import CollaboratorFetcher from './fetchers/CollaboratorFetcher';
 import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
 import EmbargoFetcher from './fetchers/EmbargoFetcher';
 import { CitationTypeMap, CitationTypeEOL } from './CitationType';
@@ -30,12 +31,14 @@ export default class PublishSampleModal extends Component {
     this.state = {
       sample,
       selectedUsers: [],
+      selectedReviewers: [],
       showSelectionUser: false,
       showSelectionAnalysis: false,
       showPreview: false,
       currentUser,
       selectedRefs: [],
       collaborations: [],
+      showSelectionReviewer: false,
       literatures: new Immutable.Map(),
       sortedIds: [],
       selectedEmbargo: '-1',
@@ -49,6 +52,7 @@ export default class PublishSampleModal extends Component {
     this.handlePublishSample = this.handlePublishSample.bind(this);
     this.handleReserveDois = this.handleReserveDois.bind(this);
     this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
     this.promptTextCreator = this.promptTextCreator.bind(this);
     this.loadUserByName = this.loadUserByName.bind(this);
     this.loadReferences = this.loadReferences.bind(this);
@@ -100,7 +104,7 @@ export default class PublishSampleModal extends Component {
   }
 
   loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
+    CollaboratorFetcher.fetchMyCollaborations()
     .then((result) => {
       this.setState({
         collaborations: result.authors
@@ -121,6 +125,10 @@ export default class PublishSampleModal extends Component {
     if (val) { this.setState({ selectedUsers: val }); }
   }
 
+  handleSelectReviewer(val) {
+    if (val) { this.setState({ selectedReviewers: val }); }
+  }
+
   loadUserByName(input) {
     if (!input) {
       return Promise.resolve({ options: [] });
@@ -184,6 +192,7 @@ export default class PublishSampleModal extends Component {
   handlePublishSample() {
     const { selectedLicense, cc0Consent } = this.state;
     const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
+    // const reviewerCount = this.state.selectedReviewers && this.state.selectedReviewers.length;
     const plural = authorCount > 0 ? 's' : '';
 
     if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
@@ -226,6 +235,7 @@ export default class PublishSampleModal extends Component {
       // sample: this.state.sample,
       sample,
       coauthors: this.state.selectedUsers.map(u => u.value),
+      reviewers: this.state.selectedReviewers.map(u => u.value),
       refs: this.state.selectedRefs,
       embargo: this.state.selectedEmbargo,
       license: this.state.selectedLicense,
@@ -313,6 +323,45 @@ export default class PublishSampleModal extends Component {
     );
   }
 
+  addReviewers() {
+    const { selectedReviewers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+
+    return (
+      <div >
+        <h5><b>Additional Reviewers:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select reviewers from my collaboration"
+          backspaceRemoves
+          value={selectedReviewers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectReviewer}
+        />
+        <div>
+          {reviewerInfo}
+        </div>
+      </div>
+    );
+  }
+
   citationTable(rows, sortedIds, selectedRefs) {
     const sids = sortedUniq(sortedIds);
     return (
@@ -422,6 +471,7 @@ export default class PublishSampleModal extends Component {
     const {
       showPreview,
       selectedUsers,
+      selectedReviewers,
       selectedRefs
     } = this.state;
     const analyses = sample.analysisArray();
@@ -515,6 +565,16 @@ export default class PublishSampleModal extends Component {
                     {this.selectReferences()}
                   </Panel.Body>
                 </Panel>
+                <Panel eventKey="6">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.addReviewers()}
+                  </Panel.Body>
+                </Panel>
               </PanelGroup>
               {showPreview ? null : null}
             </Modal.Body>
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index 3ba355c9f..7112eafe1 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -10,8 +10,7 @@ export default class ReactionDetailsRepoComment extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      reaction: null,
-      reviewLevel: 0
+      reaction: null
     };
     this.onStoreChange = this.onStoreChange.bind(this);
     this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
@@ -42,8 +41,7 @@ export default class ReactionDetailsRepoComment extends Component {
         <RepoReactionDetails
           reaction={reaction}
           canComment
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
+          review_info={review_info}
           onReviewUpdate={this.handleReviewUpdate}
           review={this.state.review || {}}
           canClose={false}
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
index 69ebd7300..b70cc6d64 100644
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ b/app/packs/src/components/SampleDetailsRepoComment.js
@@ -12,8 +12,7 @@ export default class SampleDetailsRepoComment extends Component {
 
     this.state = {
       element: null,
-      reviewLevel: 0,
-      isSubmitter: false,
+      review_info: {}
     };
     this.onStoreChange = this.onStoreChange.bind(this);
     this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
@@ -38,14 +37,13 @@ export default class SampleDetailsRepoComment extends Component {
   }
 
   render() {
-    const { element } = this.state;
+    const { element, review_info } = this.state;
     return element && element.sample && element.publication ?
       (
         <RepoSampleDetails
           element={element}
           canComment
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
+          review_info={review_info}
           onReviewUpdate={this.handleReviewUpdate}
           review={this.state.review || {}}
           canClose={false}
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
index d2f9d4c5c..6389f2285 100644
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ b/app/packs/src/components/common/RepoReviewAuthorsModal.js
@@ -10,6 +10,7 @@ import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import UsersFetcher from '../fetchers/UsersFetcher';
 import SelectionField from '../common/SelectionField';
 import PublicFetcher from '../fetchers/PublicFetcher';
+import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
 import ReviewActions from '../actions/ReviewActions';
 import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
 
@@ -266,7 +267,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
     let ids = [];
     ids.push(contributors.id);
     ids = ids.concat(author_ids);
-    UsersFetcher.loadOrcidByUserId({ ids }).then((result) => {
+    CollaboratorFetcher.loadOrcidByUserId({ ids }).then((result) => {
       const orcids = result.orcids || [];
       const cx = findIndex(orcids, o => o.id === contributors.id);
       if (cx > -1) {
@@ -312,7 +313,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
   }
 
   loadCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
+    CollaboratorFetcher.fetchMyCollaborations()
       .then((result) => {
         this.setState({
           collaborations: result.authors
@@ -507,14 +508,14 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
 RepoReviewAuthorsModal.propTypes = {
   element: PropTypes.object,
-  isSubmitter: PropTypes.bool,
+  review_info: PropTypes.object,
   disabled: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   taggData: PropTypes.object.isRequired,
 };
 
 RepoReviewAuthorsModal.defaultProps = {
-  isSubmitter: false,
+  review_info: {},
   schemeOnly: false,
   disabled: false,
   taggData: {}
diff --git a/app/packs/src/components/fetchers/CollaboratorFetcher.js b/app/packs/src/components/fetchers/CollaboratorFetcher.js
new file mode 100644
index 000000000..a3a417960
--- /dev/null
+++ b/app/packs/src/components/fetchers/CollaboratorFetcher.js
@@ -0,0 +1,128 @@
+import 'whatwg-fetch';
+
+export default class CollaboratorFetcher {
+
+  static fetchMyCollaborations() {
+    return fetch('/api/v1/collaborators/list', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static AddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/add', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createAddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/create', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static addCollaboratorAff(params = {}) {
+    return fetch('/api/v1/collaborators/add_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteCollaboration(params) {
+    return fetch('/api/v1/collaborators/delete', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteCollaboratorAff(params) {
+    return fetch('/api/v1/collaborators/delete_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static refreshOrcidAff(params) {
+    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static loadOrcidByUserId(params) {
+    return fetch('/api/v1/collaborators/load_orcid', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUsersByNameFirst(name, first, email) {
+    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}&email=${email}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchandAddCollaboratorByOrcid(orcid) {
+    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index c17be5fcb..ea7a1557f 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -40,7 +40,7 @@ export default class RepositoryFetcher {
   }
 
   static publishSample(params, option = null) {
-    const { sample, coauthors, refs, embargo, license, addMe } = params;
+    const { sample, coauthors, reviewers, refs, embargo, license, addMe } = params;
     const analysesIds = AnalysisIdstoPublish(sample);
     return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
       credentials: 'same-origin',
@@ -53,6 +53,7 @@ export default class RepositoryFetcher {
         sampleId: sample.id,
         analysesIds,
         coauthors,
+        reviewers,
         refs,
         embargo,
         license,
@@ -85,7 +86,7 @@ export default class RepositoryFetcher {
 
   static publishReactionScheme(params) {
     const {
-      reaction, coauthors, embargo, license, addMe, schemeDesc
+      reaction, coauthors, reviewers, embargo, license, addMe, schemeDesc
     } = params;
     return fetch('/api/v1/repository/publishReactionScheme', {
       credentials: 'same-origin',
@@ -101,6 +102,7 @@ export default class RepositoryFetcher {
         products: reaction.products,
         schemeDesc,
         coauthors,
+        reviewers,
         embargo,
         license,
         addMe
@@ -128,7 +130,7 @@ export default class RepositoryFetcher {
   }
 
   static publishReaction(params, option = null) {
-    const { reaction, coauthors, refs, embargo, license, isFullyPublish, addMe } = params;
+    const { reaction, coauthors, reviewers, refs, embargo, license, isFullyPublish, addMe } = params;
     if (!isFullyPublish) return this.publishReactionScheme(params);
     const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
       AnalysisIdstoPublish(reaction)
@@ -144,6 +146,7 @@ export default class RepositoryFetcher {
         reactionId: reaction.id,
         analysesIds,
         coauthors,
+        reviewers,
         refs,
         embargo,
         license,
@@ -231,6 +234,8 @@ export default class RepositoryFetcher {
       api = '/api/v1/repository/reviewing/comments';
     } else if (action === 'Accept') {
       api = '/api/v1/repository/reviewing/accepted';
+    } else if (action === 'Approve') {
+      api = '/api/v1/repository/reviewing/approved';
     } else if (action === 'Review') {
       api = '/api/v1/repository/reviewing/reviewed';
     } else if (action === 'Submit') {
diff --git a/app/packs/src/components/sso/LoginOptions.js b/app/packs/src/components/sso/LoginOptions.js
new file mode 100644
index 000000000..1f512866d
--- /dev/null
+++ b/app/packs/src/components/sso/LoginOptions.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {
+  Row,
+  Col,
+  Grid,
+  Button
+} from 'react-bootstrap';
+import uuid from 'uuid';
+import UserStore from '../stores/UserStore';
+import UserActions from '../actions/UserActions';
+
+export default class LoginOptions extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      omniauthProviders: []
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchOmniauthProviders();
+  }
+
+  onChange(state) {
+    const { omniauthProviders } = this.state;
+    if (state?.omniauthProviders !== omniauthProviders) {
+      this.setState({
+        omniauthProviders: state.omniauthProviders
+      });
+    }
+  }
+
+  render() {
+    const { omniauthProviders } = this.state;
+    const keys = Object.keys(omniauthProviders);
+    if (keys.length === 0) return (<span />);
+    const items = keys.map((key) => (
+      <Col key={uuid.v1()} md={12 / keys.length} className="login-options">
+        <Button href={`/users/auth/${key}`}>
+          Login with &nbsp;
+          <img src={`/images/providers/${omniauthProviders[key].icon}`} className="kit-logo" alt={key} title={key} />
+        </Button>
+      </Col>
+    ));
+
+    return (
+      <Grid>
+        <Row>
+          {items}
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('LoginOptions');
+  if (domElement) { ReactDOM.render(<LoginOptions />, domElement); }
+});
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
index 7d6893ab2..3a9c3490e 100644
--- a/app/packs/src/components/stores/EmbargoStore.js
+++ b/app/packs/src/components/stores/EmbargoStore.js
@@ -11,6 +11,7 @@ class EmbargoStore {
     this.selectState;
     this.searchType;
     this.searchValue;
+    this.review_info == {};
     this.element = null;
     // this.elements = [];
 
@@ -32,7 +33,7 @@ class EmbargoStore {
 
   handleDisplayEmbargoElement(result) {
     const publication = result?.element?.publication || {};
-    if (result?.element?.reviewLevel === 0) {
+    if (result?.element?.review_info?.review_level === 0) {
       Aviator.navigate('/home/');
     } else {
       const elementType = (result.element.sample ? 'sample' : 'reaction');
@@ -43,7 +44,7 @@ class EmbargoStore {
         queryId: result.id,
         currentElement: result.element,
         review: publication?.review || {},
-        reviewLevel: result.element.reviewLevel
+        review_info: result.element?.review_info
       });
       Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
     }
diff --git a/app/packs/src/components/stores/RStore.js b/app/packs/src/components/stores/RStore.js
index f8ca841ff..976eedd00 100644
--- a/app/packs/src/components/stores/RStore.js
+++ b/app/packs/src/components/stores/RStore.js
@@ -14,7 +14,7 @@ class RStore {
   navigate(page, result) {
     const elementType = (result.element.sample ? 'sample' : 'reaction');
     const subPage = page === 'embargo' ? elementType : `review_${elementType}`;
-    if (result.element && result.element.reviewLevel === 0) {
+    if (result.element && result.element?.review_info?.review_level === 0) {
       Aviator.navigate('/home');
     } else {
       this.setState({ guestPage: page });
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index 65938bd48..f471415e2 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -76,14 +76,13 @@ class ReviewStore {
   }
 
   handleFetchSample(data) {
-    if (data.sample && data.reviewLevel === 0) {
+    if (data.sample && data?.review_info?.review_level === 0) {
     } else {
       this.setState({
         currentElement: data || {},
         element: data || {},
         elementType: 'sample',
-        reviewLevel: data?.reviewLevel || 0,
-        isSubmitter: data?.isSubmitter || false,
+        review_info: data?.review_info || {},
         review: data?.publication?.review || {},
       });
     }
@@ -115,7 +114,7 @@ class ReviewStore {
 
   handleDisplayReviewReaction(result) {
     const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-    if (result.element && result.element.reviewLevel === 0) {
+    if (result.element && result.element?.review_info?.review_level === 0) {
       Aviator.navigate('/home');
     } else {
       this.setState({
@@ -126,8 +125,7 @@ class ReviewStore {
         currentElement: result?.element || {},
         showReviewModal: false,
         review: publication?.review || {},
-        reviewLevel: result?.element?.reviewLevel || 0,
-        isSubmitter: result?.element?.isSubmitter || false
+        review_info: result?.element?.review_info || {},
       });
       Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
     }
@@ -136,7 +134,7 @@ class ReviewStore {
   handleDisplayReviewSample(result) {
     const publication = (result.element && result.element.publication) || {};
 
-    if (result.element && result.element.reviewLevel === 0) {
+    if (result.element && result.element?.review_info?.review_level === 0) {
       Aviator.navigate('/home');
     } else {
       this.setState({
@@ -146,8 +144,7 @@ class ReviewStore {
         currentElement: result?.element || {},
         showReviewModal: false,
         review: publication?.review || {},
-        isSubmitter: result?.element?.isSubmitter || false,
-        reviewLevel: result?.element?.reviewLevel || 0,
+        review_info: result?.element?.review_info || {},
       });
       Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
     }
diff --git a/app/packs/src/components/users/AuthorModal.js b/app/packs/src/components/users/AuthorModal.js
index ce8c4f744..ff4d1d320 100644
--- a/app/packs/src/components/users/AuthorModal.js
+++ b/app/packs/src/components/users/AuthorModal.js
@@ -4,12 +4,12 @@ import { Row, Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, F
 import { findIndex, filter } from 'lodash';
 import uuid from 'uuid';
 import Select from 'react-select';
-import UsersFetcher from '../fetchers/UsersFetcher';
+import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
 import PublicFetcher from '../fetchers/PublicFetcher';
 import SelectionField from '../common/SelectionField';
 import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
 
-const sortList = data => data.sort((a, b) => a.name.localeCompare(b.name));
+const sortList = data => data?.sort((a, b) => a?.name?.localeCompare(b.name));
 const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
 const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation</Tooltip>;
 const refreshOrcidTooltip = <Tooltip id="rmAff_tooltip">Refresh affiliations from ORCID</Tooltip>;
@@ -88,7 +88,7 @@ export default class AuthorModal extends Component {
   }
 
   componentDidMount() {
-    UsersFetcher.fetchMyCollaborations()
+    CollaboratorFetcher.fetchMyCollaborations()
       .then((result) => {
         if (result.authors && result.authors.length > 0) {
           this.setState({ authors: sortList(result.authors) });
@@ -123,7 +123,7 @@ export default class AuthorModal extends Component {
     const params = {
       id: g.id, department, organization, country
     };
-    UsersFetcher.addCollaboratorAff(params)
+    CollaboratorFetcher.addCollaboratorAff(params)
       .then((result) => {
         if (result.error) {
           alert(result.error);
@@ -141,7 +141,7 @@ export default class AuthorModal extends Component {
   onDeleteAff(a, g) {
     const { authors } = this.state;
     const params = { user_id: g.id, aff_id: a.id };
-    UsersFetcher.deleteCollaboratorAff(params)
+    CollaboratorFetcher.deleteCollaboratorAff(params)
       .then((result) => {
         if (result.error) {
           alert(result.error);
@@ -155,7 +155,7 @@ export default class AuthorModal extends Component {
 
   onRefreshOrcidAff(g) {
     const params = { user_id: g.id };
-    UsersFetcher.refreshOrcidAff(params)
+    CollaboratorFetcher.refreshOrcidAff(params)
       .then((result) => {
         if (result.error) {
           alert(result.message);
@@ -181,6 +181,9 @@ export default class AuthorModal extends Component {
       case 'lastName':
         fields.lastName = ev.currentTarget.value;
         break;
+      case 'email':
+        fields.email = ev.currentTarget.value;
+        break;
       case 'orcid':
         fields.orcid = ev.currentTarget.value;
         break;
@@ -208,11 +211,12 @@ export default class AuthorModal extends Component {
   findUsers() {
     const { fields } = this.state;
     if ((!fields.firstName || fields.firstName.trim() === '') && (!fields.lastName || fields.lastName.trim() === '')
+    && (!fields.email || fields.email.trim() === '')
     && (!fields.orcid || fields.orcid.trim() === '')) {
-      alert('Please input First Name or Last Name');
+      alert('Please input Email or first name or last name');
       return false;
     }
-    UsersFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '')
+    CollaboratorFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '', fields.email || '')
       .then((result) => {
         if (result.users && result.users.length > 0) {
           this.setState({
@@ -228,29 +232,61 @@ export default class AuthorModal extends Component {
   }
 
   findOrcid() {
-    const { fields } = this.state;
+    const { fields, departments, organizations } = this.state;
     if (!fields.orcid || fields.orcid.trim() === '') {
       alert('Please input ORCID');
       return false;
     }
 
-    UsersFetcher.fetchandAddCollaboratorByOrcid(fields.orcid)
+    CollaboratorFetcher.fetchandAddCollaboratorByOrcid(fields.orcid)
       .then((result) => {
         if (result.error) {
           alert(`[${fields.orcid.trim()}] \n ${result.message}`);
           return false;
         }
 
-        this.setState({
-          authors: sortList(result.authors), users: [], fields: {}, showNewUser: false
-        });
+        if (result.users) {
+          const user = result.users || {};
+          if (user.id !== null) {
+            const users = [];
+            users.push(result.users);
+            this.setState({
+              users,
+              showNewUser: false,
+              fields: {}
+            });
+          } else {
+            fields.firstName = user.first_name;
+            fields.lastName = user.last_name;
+            fields.email = user.email;
+            const aff = (user.affiliations && user.affiliations[0]) || {};
+
+            fields.country = aff.country;
+            if (typeof (organizations.find(x => x.value === aff.organization)) === 'undefined') {
+              organizations.push({ label: aff.organization, value: aff.organization });
+            }
+            fields.organization = aff.organization;
+            if (typeof (departments.find(x => x.value === aff.department)) === 'undefined') {
+              departments.push({ label: aff.department, value: aff.department });
+            }
+            fields.department = aff.department;
+
+            this.setState({
+              showNewUser: true,
+              fields,
+              departments
+            });
+          }
+        } else {
+          this.setState({ showNewUser: true, users: [] });
+        }
       });
     return true;
   }
 
   handleAddUser(u) {
     const { authors } = this.state;
-    UsersFetcher.AddMyCollaboration({ id: u.id })
+    CollaboratorFetcher.AddMyCollaboration({ id: u.id })
       .then((result) => {
         authors.push(result.user);
         this.setState({
@@ -262,7 +298,18 @@ export default class AuthorModal extends Component {
   createAdd() {
     const { fields, authors } = this.state;
 
+
+    const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+    if (!fields.email?.match(validRegex)) {
+      alert(`Invalid Email Address [${fields.email}]`);
+      return false;
+    }
+
     const nilFields = [];
+    if (!fields.email || fields.email.trim() === '') {
+      nilFields.push('Email');
+    }
     if (!fields.firstName || fields.firstName.trim() === '') {
       nilFields.push('First Name');
     }
@@ -283,10 +330,10 @@ export default class AuthorModal extends Component {
       return false;
     }
 
-    UsersFetcher.createAddMyCollaboration(fields)
+    CollaboratorFetcher.createAddMyCollaboration(fields)
       .then((result) => {
         if (result.error) {
-          alert(result.error);
+          alert(result.message);
         } else {
           authors.push(result.user);
           this.setState({
@@ -299,7 +346,7 @@ export default class AuthorModal extends Component {
 
   handleDeleteCollaborator(c) {
     const { authors } = this.state;
-    UsersFetcher.deleteCollaboration({ id: c.id })
+    CollaboratorFetcher.deleteCollaboration({ id: c.id })
       .then((result) => {
         if (result.error) {
           alert(result.error);
@@ -330,6 +377,7 @@ export default class AuthorModal extends Component {
             &nbsp;
           </td>
           <td>{g.name}</td>
+          <td>{g.email}</td>
           <td>{g.orcid}</td>
           <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].department : ''}</td>
           <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].organization : ''}</td>
@@ -338,10 +386,10 @@ export default class AuthorModal extends Component {
       </tbody>
     ));
     let tbody = '';
-    if (Object.keys(authors).length <= 0) {
+    if (authors && Object.keys(authors).length <= 0) {
       tbody = '';
     } else {
-      tbody = authors.map(g => (
+      tbody = authors?.map(g => (
         <tbody key={`tbody_${g.id}`}>
           <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
             <td>
@@ -352,6 +400,7 @@ export default class AuthorModal extends Component {
               &nbsp;
             </td>
             <td>{g.name}</td>
+            <td>{g.email}</td>
             <td>{g.orcid} {refreshAffByOrcid(g, this.onRefreshOrcidAff)}</td>
             <td>
               <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
@@ -368,7 +417,7 @@ export default class AuthorModal extends Component {
                           <td width="30%">
                             <SelectionField
                               options={this.state.departments}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || ''}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || 'a'}
                               field={`${g.id}@line_department`}
                               placeholder="e.g. Institute of Organic Chemistry"
                               onChange={this.handleInputChange}
@@ -378,7 +427,7 @@ export default class AuthorModal extends Component {
                           <td width="40%">
                             <SelectionField
                               options={this.state.organizations}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || ''}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || 'b'}
                               field={`${g.id}@line_organization`}
                               placeholder="e.g. Karlsruhe Institute of Technology"
                               onChange={this.handleInputChange}
@@ -493,7 +542,7 @@ export default class AuthorModal extends Component {
                     onChange={e => this.handleInputChange('orcid', e)}
                   />
                   <InputGroup.Button>
-                    <Button bsStyle="success" onClick={() => this.findOrcid()}><i className="fa fa-search" aria-hidden="true" />&nbsp;Find and save to collaboration by ORCID</Button>
+                    <Button bsStyle="success" onClick={() => this.findOrcid()}><i className="fa fa-search" aria-hidden="true" />&nbsp;Find by ORCID</Button>
                   </InputGroup.Button>
                 </InputGroup>
               </FormGroup>
@@ -504,6 +553,13 @@ export default class AuthorModal extends Component {
               <Form>
                 <FormGroup controlId="formInlineFirstName">
                   <InputGroup>
+                  <InputGroup.Addon>Email</InputGroup.Addon>
+                    <FormControl
+                      type="text"
+                      placeholder="eg: AK"
+                      value={this.state.fields.email || ''}
+                      onChange={e => this.handleInputChange('email', e)}
+                    />
                     <InputGroup.Addon>First Name</InputGroup.Addon>
                     <FormControl
                       type="text"
@@ -519,11 +575,11 @@ export default class AuthorModal extends Component {
                       onChange={e => this.handleInputChange('lastName', e)}
                     />
                     <InputGroup.Button>
-                      <Button bsStyle="success" onClick={() => this.findUsers()}>
-                        <i className="fa fa-search" aria-hidden="true" />&nbsp;
-                        Find by Name
-                      </Button>
-                    </InputGroup.Button>
+                        <Button bsStyle="success" onClick={() => this.findUsers()}>
+                          <i className="fa fa-search" aria-hidden="true" />&nbsp;
+                          Find
+                        </Button>
+                      </InputGroup.Button>
                   </InputGroup>
                 </FormGroup>
               </Form>
@@ -563,9 +619,10 @@ export default class AuthorModal extends Component {
                     <tr style={{ backgroundColor: '#ddd' }}>
                       <th width="10%">Action</th>
                       <th width="10%">Name</th>
+                      <th width="10%">Email</th>
                       <th width="10%">ORCID</th>
                       <th width="20%">Department</th>
-                      <th width="25%">Organization</th>
+                      <th width="15%">Organization</th>
                       <th width="15%">Country</th>
                     </tr>
                   </thead>
@@ -585,14 +642,15 @@ export default class AuthorModal extends Component {
                     <tr style={{ backgroundColor: '#ddd' }}>
                       <th width="5%">Action</th>
                       <th width="10%">Name</th>
+                      <th width="10%">Email</th>
                       <th width="15%">ORCID</th>
-                      <th width="70%">
+                      <th width="60%">
                         <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
                           <tbody>
                             <tr>
-                              <td style={{ padding: 'unset' }} width="30%">Department</td>
-                              <td style={{ padding: 'unset' }} width="40%">Organization</td>
-                              <td style={{ padding: 'unset' }} width="20%">Country</td>
+                              <td style={{ padding: 'unset' }} width="20%">Department</td>
+                              <td style={{ padding: 'unset' }} width="15%">Organization</td>
+                              <td style={{ padding: 'unset' }} width="15%">Country</td>
                               <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
                             </tr>
                           </tbody>
diff --git a/app/packs/src/fetchers/UsersFetcher.js b/app/packs/src/fetchers/UsersFetcher.js
index dc00177f1..348cf0db7 100644
--- a/app/packs/src/fetchers/UsersFetcher.js
+++ b/app/packs/src/fetchers/UsersFetcher.js
@@ -224,130 +224,6 @@ export default class UsersFetcher {
     });
   }
 
-  static fetchMyCollaborations() {
-    return fetch('/api/v1/collaborators/list', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static AddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/add', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createAddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/create', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static addCollaboratorAff(params = {}) {
-    return fetch('/api/v1/collaborators/add_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteCollaboration(params) {
-    return fetch('/api/v1/collaborators/delete', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteCollaboratorAff(params) {
-    return fetch('/api/v1/collaborators/delete_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static refreshOrcidAff(params) {
-    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static loadOrcidByUserId(params) {
-    return fetch('/api/v1/collaborators/load_orcid', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUsersByNameFirst(name, first) {
-    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchandAddCollaboratorByOrcid(orcid) {
-    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
   static scifinderCredential() {
     const promise = fetch('/api/v1/users/scifinder', {
       credentials: 'same-origin',
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index c4a5b0bdb..9fa405c92 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -30,6 +30,7 @@ export default class Navigation extends React.Component {
     UIStore.listen(this.onUIChange);
     UserStore.listen(this.onChange);
     UserActions.fetchCurrentUser();
+    UserActions.fetchOmniauthProviders();
   }
 
   componentWillUnmount() {
@@ -41,6 +42,13 @@ export default class Navigation extends React.Component {
     const newId = state.currentUser ? state.currentUser.id : null;
     const oldId = this.state.currentUser ? this.state.currentUser.id : null;
     if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
+
+
+    if (state.omniauthProviders !== this.state.omniauthProviders) {
+      this.setState({
+        omniauthProviders: state.omniauthProviders
+      });
+    }
   }
 
   onUIChange(state) {
@@ -71,13 +79,13 @@ export default class Navigation extends React.Component {
   }
 
   render() {
-    const { modalProps, currentUser } = this.state;
+    const { modalProps, currentUser, omniauthProviders } = this.state;
 
     let userBar = (<span />);
     if (currentUser) {
       userBar = (<UserAuth />);
     } else {
-      userBar = (<NavNewSession authenticityToken={this.token()} />);
+      userBar = (<NavNewSession authenticityToken={this.token()} omniauthProviders={omniauthProviders} />);
     }
     // const logo = <img height={50} alt="Chemotion-Repository" src="/images/repo/chemotion_full.svg"/>
     return (
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index f0cf7c1b5..23ec21b85 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -623,21 +623,28 @@ IconToMyDB.defaultProps = {
 
 
 const ChecklistPanel = ({
-  checklist, isReviewer
+  checklist, isReviewer, review_info
 }) => {
-  const dtbl = checklist?.tbl?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'blue' }} />) : (<i className="fa fa-square-o" style={{ color: 'blue' }} />);
-  const ddes = checklist?.des?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'orange' }} />) : (<i className="fa fa-square-o" style={{ color: 'orange' }} />);
-  const dafm = checklist?.afm?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'green' }} />) : (<i className="fa fa-square-o" style={{ color: 'green' }} />);
-  const dact = checklist?.act?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'purple' }} />) : (<i className="fa fa-square-o" style={{ color: 'purple' }} />);
-  const dohd = checklist?.ohd?.status === true? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
+  const dglr = checklist?.glr?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'brown' }} />) : (<i className="fa fa-square-o" style={{ color: 'brown' }} />);
+  const dtbl = checklist?.tbl?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'blue' }} />) : (<i className="fa fa-square-o" style={{ color: 'blue' }} />);
+  const ddes = checklist?.des?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'orange' }} />) : (<i className="fa fa-square-o" style={{ color: 'orange' }} />);
+  const dafm = checklist?.afm?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'green' }} />) : (<i className="fa fa-square-o" style={{ color: 'green' }} />);
+  const dact = checklist?.act?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'purple' }} />) : (<i className="fa fa-square-o" style={{ color: 'purple' }} />);
+  const dohd = checklist?.ohd?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
+
+
   if (isReviewer === true) {
+    const leaders = review_info?.leaders?.length > 0 ? `additional reviewer(s): ${review_info?.leaders?.join(', ')}` : '';
+    const isGL = review_info?.leaders?.length > 0 ? (<OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">group leader review</Tooltip>}>{dglr}</OverlayTrigger>) : '';
     return (
       <div>
+        {isGL}&nbsp;
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">table values</Tooltip>}>{dtbl}</OverlayTrigger>&nbsp;
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">description</Tooltip>}>{ddes}</OverlayTrigger>&nbsp;
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis format</Tooltip>}>{dafm}</OverlayTrigger>&nbsp;
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis content</Tooltip>}>{dact}</OverlayTrigger>&nbsp;
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">on hold</Tooltip>}>{dohd}</OverlayTrigger>&nbsp;
+        &nbsp;{leaders}
       </div>
     );
   }
@@ -2216,8 +2223,7 @@ ClosePanel.propTypes = {
 const CommentBtn = (props) => {
   const {
     canComment,
-    reviewLevel,
-    isSubmitter,
+    review_info,
     onShow,
     field,
     review,
@@ -2230,9 +2236,8 @@ const CommentBtn = (props) => {
       <RepoCommentBtn
         field={field}
         review={review}
-        isSubmitter={isSubmitter}
+        review_info={review_info}
         orgInfo={orgInfo}
-        reviewLevel={reviewLevel}
         onShow={() => onShow(true, field, orgInfo)}
       />&nbsp;
     </span>
@@ -2242,15 +2247,14 @@ const CommentBtn = (props) => {
 CommentBtn.propTypes = {
   canComment: PropTypes.bool.isRequired,
   review: PropTypes.object.isRequired,
-  isSubmitter: PropTypes.bool,
-  reviewLevel: PropTypes.number.isRequired,
+  review_info: PropTypes.object,
   onShow: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
   orgInfo: PropTypes.string.isRequired
 };
 
 CommentBtn.defaultProps = {
-  isSubmitter: false
+  review_info: {}
 };
 
 
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
index 3b9030b77..63b7d16d8 100644
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ b/app/packs/src/libHome/RepoElementDetails.js
@@ -37,8 +37,7 @@ export default class RepoElementDetails extends Component {
         <RepoSampleDetails
           isPublished
           element={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
+          review_info={this.state.review_info}
           review={this.state.review || {}}
           listType={listType}
         />);
@@ -46,8 +45,7 @@ export default class RepoElementDetails extends Component {
         <RepoReactionDetails
           isPublished
           reaction={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
+          review_info={this.state.review_info}
           review={this.state.review || {}}
         />);
       default: return <span />;
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
index 92f82e61d..f5205fce2 100644
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ b/app/packs/src/libHome/RepoEmbargoDetails.js
@@ -38,8 +38,7 @@ export default class RepoEmbargoDetails extends Component {
           <RepoReactionDetails
             reaction={currentElement.reaction}
             canComment
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
+            review_info={this.state.review_info}
             showComment={false}
             btnAction={this.state.btnAction}
             isReview={false}
@@ -51,8 +50,7 @@ export default class RepoEmbargoDetails extends Component {
             element={currentElement}
             canComment
             btnAction={this.state.btnAction}
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
+            review_info={this.state.review_info}
             showComment={false}
             review={this.state.review}
           />);
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 33702e0b5..f045aae73 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -169,7 +169,7 @@ export default class RepoReactionDetails extends Component {
     } = this.state;
     const {
       canComment,
-      reviewLevel,
+      review_info,
       review
     } = this.props;
 
@@ -216,7 +216,7 @@ export default class RepoReactionDetails extends Component {
             showProp={showProp}
             bodyAttrs={bodyAttrs}
             onToggle={this.handleToggle}
-            reviewLevel={reviewLevel}
+            review_info={review_info}
             onComment={this.handleCommentBtn}
             propInfo={properties}
             canComment={canComment}
@@ -390,8 +390,7 @@ export default class RepoReactionDetails extends Component {
       reaction,
       isPublished,
       canComment,
-      reviewLevel,
-      isSubmitter,
+      review_info,
       showComment,
       review,
       canClose,
@@ -442,6 +441,12 @@ export default class RepoReactionDetails extends Component {
       buttons = ['Decline', 'Comments', 'Accept'];
       showDOI = '';
     }
+
+
+    if (review_info?.groupleader === true && review_info?.preapproved !== true) {
+      buttons = ['Comments', 'Review', 'Approve'];
+    }
+
     const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
     const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
     const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
@@ -470,8 +475,7 @@ export default class RepoReactionDetails extends Component {
                   element={{ id: reaction.id, elementType: 'Reaction' }}
                   buttons={buttons}
                   buttonFunc={this.handleReviewBtn}
-                  reviewLevel={reviewLevel}
-                  isSubmitter={isSubmitter}
+                  review_info={review_info}
                   showComment={showComment}
                   taggData={taggData}
                   schemeOnly={schemeOnly}
@@ -527,8 +531,7 @@ export default class RepoReactionDetails extends Component {
                 field={this.state.commentField}
                 orgInfo={this.state.originInfo}
                 review={this.props.review}
-                isSubmitter={isSubmitter}
-                reviewLevel={reviewLevel}
+                review_info={review_info}
                 onUpdate={this.handleSubmitComment}
                 onHide={() => this.setState({ showCommentModal: false })}
               />
@@ -543,9 +546,8 @@ RepoReactionDetails.propTypes = {
   reaction: PropTypes.object.isRequired,
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
   btnAction: PropTypes.string,
-  isSubmitter: PropTypes.bool,
+  review_info: PropTypes.object,
   showComment: PropTypes.bool,
   isReview: PropTypes.bool,
   review: PropTypes.object,
@@ -557,10 +559,9 @@ RepoReactionDetails.propTypes = {
 RepoReactionDetails.defaultProps = {
   isPublished: false,
   canComment: false,
-  isSubmitter: false,
+  review_info: {},
   showComment: true,
   btnAction: '',
-  reviewLevel: 0,
   isReview: false,
   review: {},
   canClose: true,
diff --git a/app/packs/src/libHome/RepoReactionSchemeInfo.js b/app/packs/src/libHome/RepoReactionSchemeInfo.js
index e4810b36e..1cd458041 100644
--- a/app/packs/src/libHome/RepoReactionSchemeInfo.js
+++ b/app/packs/src/libHome/RepoReactionSchemeInfo.js
@@ -65,14 +65,14 @@ RepoReactionSchemeInfo.propTypes = {
   showProp: PropTypes.bool.isRequired,
   bodyAttrs: PropTypes.object.isRequired,
   onToggle: PropTypes.func.isRequired,
-  reviewLevel: PropTypes.number,
+  review_info: PropTypes.object,
   propInfo: PropTypes.string,
   onComment: PropTypes.func,
   canComment: PropTypes.bool,
 };
 
 RepoReactionSchemeInfo.defaultProps = {
-  reviewLevel: 0,
+  review_info: 0,
   propInfo: '',
   onComment: () => {},
   canComment: false
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 9a468e152..f168c18fd 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -34,7 +34,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
           &nbsp;{embargoBtn}
           <div>
             <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-            <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} />
+            <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}}  />
           </div>
         </td>
       </tr>
@@ -56,7 +56,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
         &nbsp;{embargoBtn}
         <div>
           <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-          <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} />
+          <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}} />
         </div>
       </td>
     </tr>
@@ -443,10 +443,9 @@ export default class RepoReview extends Component {
 
 
   renderReviewModal() {
-    const { showReviewModal, reviewData, reviewLevel, isSubmitter, review, currentElement, elementType, btnAction } = this.state;
+    const { showReviewModal, reviewData, review_info, review, currentElement, elementType, btnAction } = this.state;
     const rrr = {};
-    rrr['reviewLevel'] = reviewLevel;
-    rrr['isSubmitter'] = isSubmitter;
+    rrr['review_info'] = review_info;
     rrr['review'] = review;
     rrr['btnAction'] = btnAction;
     rrr['elementType'] = elementType;
@@ -462,13 +461,6 @@ export default class RepoReview extends Component {
         data={rrr}
         onSubmit={this.handleSubmitReview}
         onUpdate={this.handleReviewUpdate}
-        // elementId={sample.id}
-        // action={this.state.btnAction}
-        // isSubmitter={isSubmitter}
-        // reviewLevel={reviewLevel}
-        // review={review || {}}
-        // onSubmit={this.handleSubmitReview}
-        // onUpdate={this.handleReviewUpdate}
         onHide={() => this.setState({ showReviewModal: false })}
       />
     );
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
index b0060dbb2..45130c03b 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -9,17 +9,23 @@ import PropTypes from 'prop-types';
 import RepoMetadataModal from '../components/common/RepoMetadataModal';
 import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
 
-const showButton = (btn, func, reviewLevel, pubState, isSubmitter) => {
+const showButton = (btn, func, pubState, review_info) => {
   let title = btn;
   let btnBsStyle = '';
   let btnIcon = '';
   let btnTooltip = '';
+
   switch (btn) {
     case 'Accept':
       btnBsStyle = 'primary';
       btnIcon = 'fa fa-paper-plane';
       btnTooltip = 'Accept publication';
       break;
+    case 'Approve':
+      btnBsStyle = 'primary';
+      btnIcon = 'fa fa-paper-plane';
+      btnTooltip = 'Accept publication by group leader';
+      break;
     case 'Review':
       btnBsStyle = 'info';
       btnIcon = 'fa fa-exchange';
@@ -33,10 +39,10 @@ const showButton = (btn, func, reviewLevel, pubState, isSubmitter) => {
     case 'Decline':
       btnBsStyle = 'default';
       btnIcon = 'fa fa-eject';
-      if (reviewLevel === 2) {
+      if (review_info?.review_level === 2) {
         btnTooltip = 'Withdraw publication';
         title = 'Withdraw';
-      } else if (reviewLevel === 3) {
+      } else if (review_info?.review_level === 3) {
         btnTooltip = 'Reject publication';
         title = 'Reject';
       }
@@ -44,7 +50,9 @@ const showButton = (btn, func, reviewLevel, pubState, isSubmitter) => {
     default:
       break;
   }
-  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (isSubmitter === true && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
+  return ((review_info?.review_level === 3 && pubState === 'pending' && btn !== 'Submit') ||
+  (pubState === 'pending' && btn !== 'Submit' && review_info?.preapproved !== true && btn !== 'Accept' && btn !== 'Decline' && review_info?.groupleader === true) ||
+  (review_info?.submitter === true && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
     <OverlayTrigger
       key={`ot_${title}`}
       placement="top"
@@ -88,13 +96,13 @@ const RepoReviewButtonBar = props =>
       }
       {
         props.showComment === true && props.buttons.filter(b => b !== 'Comments').map(b =>
-          showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state, props.isSubmitter))
+          showButton(b, props.buttonFunc, props.currComment.state, props.review_info))
       }
       <RepoMetadataModal
         elementId={props.element.id}
         elementType={props.element.elementType.toLowerCase()}
       />
-      <RepoReviewAuthorsModal element={props.element} isSubmitter={props.isSubmitter} schemeOnly={props.schemeOnly} taggData={props.taggData} />
+      <RepoReviewAuthorsModal element={props.element} review_info={props.review_info} schemeOnly={props.schemeOnly} taggData={props.taggData} />
     </ButtonToolbar>
   );
 
@@ -105,9 +113,8 @@ RepoReviewButtonBar.propTypes = {
   }).isRequired,
   buttons: PropTypes.arrayOf(PropTypes.string),
   buttonFunc: PropTypes.func,
-  reviewLevel: PropTypes.number,
+  review_info: PropTypes.object,
   showComment: PropTypes.bool,
-  isSubmitter: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   currComment: PropTypes.object,
   taggData: PropTypes.object
@@ -117,8 +124,7 @@ RepoReviewButtonBar.propTypes = {
 RepoReviewButtonBar.defaultProps = {
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
   buttonFunc: () => { },
-  reviewLevel: 0,
-  isSubmitter: false,
+  review_info: {},
   showComment: true,
   schemeOnly: false,
   currComment: {},
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
index a46f8416e..efafcd440 100644
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ b/app/packs/src/libHome/RepoReviewDetails.js
@@ -10,8 +10,7 @@ export default class RepoReviewDetails extends Component {
       element: props.element,
       review: {},
       btnAction: '',
-      reviewLevel: 0,
-      isSubmitter: false
+      review_info: {},
     };
 
     this.onStoreChange = this.onStoreChange.bind(this);
@@ -41,8 +40,7 @@ export default class RepoReviewDetails extends Component {
           <RepoReactionDetails
             reaction={currentElement.reaction}
             canComment
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
+            review_info={this.state.review_info}
             btnAction={this.state.btnAction}
             isReview={true}
             review={this.state.review}
@@ -53,8 +51,7 @@ export default class RepoReviewDetails extends Component {
             element={currentElement}
             canComment
             btnAction={this.state.btnAction}
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
+            review_info={this.state.review_info}
             review={this.state.review}
           />);
       default: return <span />;
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index aca9f1ab1..c5234508e 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -61,18 +61,22 @@ export default class RepoSampleDetails extends Component {
       element,
       isPublished,
       canComment,
-      reviewLevel,
-      isSubmitter,
+      review_info,
       showComment,
       review,
       canClose,
-      buttons,
     } = this.props;
 
+    let { buttons } = this.props;
+
+
     const history = review?.history || [];
     if (typeof (element) === 'undefined' || !element) {
       return <div />;
     }
+    if (review_info?.groupleader === true && review_info?.preapproved !== true) {
+      buttons = ['Comments', 'Review', 'Approve'];
+    }
 
     const {
       molecule, isLogin, isReviewer, xvialCom
@@ -95,7 +99,7 @@ export default class RepoSampleDetails extends Component {
       pubData = element.publication;
     }
 
-    tagData = (pubData.taggable_data) || {};
+    tagData = (pubData?.taggable_data) || {};
     const details = (samples || []).map((s) => {
       if (isPublished) {
         pubData = {
@@ -153,8 +157,7 @@ export default class RepoSampleDetails extends Component {
               <RepoReviewButtonBar
                 element={{ id: sample.id, elementType: 'Sample' }}
                 buttonFunc={this.handleReviewBtn}
-                reviewLevel={reviewLevel}
-                isSubmitter={isSubmitter}
+                review_info={review_info}
                 showComment={showComment}
                 currComment={(history && history.slice(-1).pop()) || {}}
                 buttons={buttons}
@@ -175,8 +178,7 @@ export default class RepoSampleDetails extends Component {
                   elementType="Sample"
                   field={this.state.commentField}
                   orgInfo={this.state.originInfo}
-                  isSubmitter={isSubmitter}
-                  reviewLevel={reviewLevel}
+                  review_info={review_info}
                   review={review || {}}
                   onUpdate={this.handleSubmitComment}
                   onHide={() => this.setState({ showCommentModal: false })}
@@ -194,9 +196,8 @@ RepoSampleDetails.propTypes = {
   element: PropTypes.object.isRequired,
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
   btnAction: PropTypes.string,
-  isSubmitter: PropTypes.bool,
+  review_info: PropTypes.object,
   showComment: PropTypes.bool,
   review: PropTypes.object,
   canClose: PropTypes.bool,
@@ -208,8 +209,7 @@ RepoSampleDetails.defaultProps = {
   isPublished: false,
   canComment: false,
   btnAction: '',
-  reviewLevel: 0,
-  isSubmitter: false,
+  review_info: {},
   showComment: true,
   review: {},
   canClose: true,
diff --git a/app/packs/src/stores/alt/actions/UserActions.js b/app/packs/src/stores/alt/actions/UserActions.js
index f3cf81265..c501b79a5 100644
--- a/app/packs/src/stores/alt/actions/UserActions.js
+++ b/app/packs/src/stores/alt/actions/UserActions.js
@@ -62,6 +62,7 @@ class UserActions {
       Aviator.navigate('/', { silent: true });
       location.href = '/';
       location.reload();
+      // location = '/home';
     });
   }
 
diff --git a/app/packs/src/stores/alt/stores/SpectraStore.js b/app/packs/src/stores/alt/stores/SpectraStore.js
index b2657281c..6192f558e 100644
--- a/app/packs/src/stores/alt/stores/SpectraStore.js
+++ b/app/packs/src/stores/alt/stores/SpectraStore.js
@@ -95,7 +95,6 @@ class SpectraStore {
     if (newArrSpcIdx.length <= 1) {
       newArrSpcIdx = [];
     }
-
     this.setState({
       spcInfos: sortedSpcInfo,
       spcMetas,
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index b0d4e1422..1f488844f 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -53,18 +53,18 @@
     <description xml:lang="en-US" descriptionType="Abstract">
       <% if cust_sample[:type] == 'coupled_sample_structure' %>
       This is a physical chemical entity[CHEBI_24431] associated with a molecule[CHEBI_25367].
-      The molecule[CHEBI_25367] can be described by the following molecule identifiers [data_0982]:
-      InChI[data_1197]: <%= "#{element.molecule_inchistring}" %>, by the chemical name[data_0997]: <%= "#{element.showed_name}" %>, and by the canonical SMILES[data_2301]: <%= "#{element.molecule_cano_smiles}" %>.
+      The molecule[CHEBI_25367] can be described by the following structural desciptors[cheminf_000085]:
+      InChI descriptor[cheminf_000113]: <%= "#{element.molecule_inchistring}" %>, and canonical SMILES descriptor[cheminf_000007]: <%= "#{element.molecule_cano_smiles}" %>, and by the IUPAC name[cheminf_000107]: <%= "#{element.molecule_iupac_name}" %>.
       <% elsif cust_sample[:type] == 'decoupled_sample_structure' %>
       This is a physical chemical entity[CHEBI_24431] associated with a molecule[CHEBI_25367], while the molecule[CHEBI_25367] is only part of the composition and does not describe the chemical entity[CHEBI_24431] sufficiently.
-      The molecule[CHEBI_25367] can be described by the following molecule identifiers [data_0982]:
-      InChI[data_1197]: <%= "#{element.molecule_inchistring}" %>, by the chemical name[data_0997]: <%= "#{element.showed_name}" %>, and by the canonical SMILES[data_2301]: <%= "#{element.molecule_cano_smiles}" %>.
+      The molecule[CHEBI_25367] can be described by the following structural desciptors[cheminf_000085]:
+      InChI descriptor[cheminf_000113]: <%= "#{element.molecule_inchistring}" %>, and canonical SMILES descriptor[cheminf_000007]: <%= "#{element.molecule_cano_smiles}" %>, and by the IUPAC name[cheminf_000107]: <%= "#{element.molecule_iupac_name}" %>.
       <% elsif cust_sample[:type] == 'decoupled_sample' %>
       This is a physical chemical entity[CHEBI_24431] which was not directly associated with a molecule[CHEBI_25367].
-      The physical chemical entity[CHEBI_24431] can be described by the chemical formula [data_0846]: <%= "#{element.sum_formula}" %>, and the molecular mass[data_0844]: <%= "#{element.molecular_mass}" %>.
+      The physical chemical entity[CHEBI_24431] can be described by the molecular mass[data_0844]: <%= "#{element.molecular_mass}" %>.
       <% end %>
-      The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES[data_2301]: <%= element.molecule_cano_smiles %>
-      The physical chemical entity[CHEBI_24431] has the Sample ID [data_3273] as registered in the research data repository chemotion (www.chemotion-repository.net, https://doi.org/10.25504/FAIRsharing.iagXcR): CRS-<%= "#{pub.id}" %>
+      The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES descriptor[cheminf_000007]: <%= element.molecule_cano_smiles %>
+      The physical chemical entity[CHEBI_24431] has the following Sample ID as registered in the research data repository chemotion (www.chemotion-repository.net, https://doi.org/10.25504/FAIRsharing.iagXcR): CRS-<%= "#{pub.id}" %>
 
       The physical chemical entity[CHEBI_24431] can be described by the physical descriptors [CHEMINF_000025]:
       Melting point descriptor[CHEMINF_000256]: <%= cust_sample[:melting_point] %>
@@ -75,10 +75,9 @@
       <% element.analyses.each do |analysis| %>
         <%= (analysis.extended_metadata['kind'] || '') %>
       <% end %>
-      The physical chemical entity[CHEBI_24431] was deposited to the Molecule Archive of the Karlsruhe Insitute of Technology (KIT) with the following Sample ID[data_3273]: CRS-<%= "#{pub.id}" %>
+      The physical chemical entity[CHEBI_24431] was deposited to the Molecule Archive of the Karlsruhe Insitute of Technology (KIT) with the following Sample ID: <%= cust_sample[:x_id] %>
 
       Used ontologies:
-      EDAM - Bioscientific data analysis ontology
       CHEBI - Chemical Entities of Biological Interest
       CHEMINF - chemical information ontology (information entities about chemical entities)
       CHMO - Chemical Methods Ontology
diff --git a/app/views/pages/settings.haml b/app/views/pages/settings.haml
index 180f9dd6a..9bd6f3876 100644
--- a/app/views/pages/settings.haml
+++ b/app/views/pages/settings.haml
@@ -17,13 +17,12 @@
             = f.label 'my-orcid', 'My ORCID', class: 'control-label col-sm-2'
             .col-sm-3
               = text_field_tag :data_orcid,
-                                current_user.profile.data['ORCID'],
+                                current_user.providers && current_user.providers['orcid'],
                                 maxlength: 19,
+                                readonly: true,
                                 class: 'form-control',
                                 id: 'txt-orcid',
                                 placeholder: 'e.g. 0000-0002-1234-5678'
-            .col-sm-1
-              = f.submit "Update ORCID", class: "btn btn-primary"
 
   .panel.panel-default
     .panel-heading
diff --git a/app/views/users/registrations/edit.html.haml b/app/views/users/registrations/edit.html.haml
index 735ddb683..0c7bc495d 100644
--- a/app/views/users/registrations/edit.html.haml
+++ b/app/views/users/registrations/edit.html.haml
@@ -30,6 +30,5 @@
   %p
     Unhappy? #{button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger'}
 
-  %br/
   %br/
   = link_to "Back", "/pages"
diff --git a/config/initializers/swagger.rb b/config/initializers/swagger.rb
index c7ff9663b..809418551 100644
--- a/config/initializers/swagger.rb
+++ b/config/initializers/swagger.rb
@@ -1,5 +1,5 @@
 GrapeSwaggerRails.options.before_action do
-  GrapeSwaggerRails.options.app_url = request.protocol + request.host_with_port
+  GrapeSwaggerRails.options.app_url = 'https://' + request.host_with_port
 end
 
 GrapeSwaggerRails.options.url = Rails.env.development? ? '/api/v1/swagger_doc' : '/swagger_doc.json'
diff --git a/config/routes.rb b/config/routes.rb
index fcadaaa1d..146a084bf 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -199,9 +199,9 @@
 
   mount API => '/'
 
-  if Rails.env.development?
-    mount GrapeSwaggerRails::Engine => '/swagger_doc'
-  end
+  # if Rails.env.development?
+  mount GrapeSwaggerRails::Engine => '/swagger_doc'
+  # end
 
   #root to: redirect('home')
   root to: 'pages#root_page' # , as: :unauthenticated_root
diff --git a/db/migrate/20230404112233_orcid_migration.rb b/db/migrate/20230404112233_orcid_migration.rb
new file mode 100644
index 000000000..3ecbe1a8f
--- /dev/null
+++ b/db/migrate/20230404112233_orcid_migration.rb
@@ -0,0 +1,15 @@
+class OrcidMigration < ActiveRecord::Migration[5.2]
+  def change
+    User.all.find_each(batch_size: 50) do |user|
+      profile = user.profile
+      data = profile.data
+      providers = user.providers || {}
+
+      if data && data['ORCID'].present?
+        providers['orcid'] = data['ORCID']
+        user.providers = providers
+        user.save!
+      end
+    end
+  end
+end
\ No newline at end of file
diff --git a/db/schema.rb b/db/schema.rb
index 8f0061b1d..a1bf47b67 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -15,6 +15,7 @@
   # These are extensions that must be enabled in order to support this database
   enable_extension "hstore"
   enable_extension "pg_trgm"
+  enable_extension "pgcrypto"
   enable_extension "plpgsql"
   enable_extension "uuid-ossp"
 
@@ -1561,21 +1562,14 @@
              order by extended_metadata -> 'instrument' limit 10
            $function$
   SQL
-  create_function :literatures_by_element, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.literatures_by_element(element_type text, element_id integer)
-       RETURNS TABLE(literatures text)
-       LANGUAGE sql
-      AS $function$
-         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
-         where l.literature_id = l2.id
-         and l.element_type = $1 and l.element_id = $2
-       $function$
-  SQL
 
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
       CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
   SQL
+  create_trigger :set_segment_klasses_identifier, sql_definition: <<-SQL
+      CREATE TRIGGER set_segment_klasses_identifier AFTER INSERT ON public.segment_klasses FOR EACH STATEMENT EXECUTE FUNCTION set_segment_klasses_identifier()
+  SQL
 
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
@@ -1634,16 +1628,4 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
-  create_view "publication_collections", sql_definition: <<-SQL
-      SELECT p.id,
-      p.state,
-      p.element_id,
-      (p.taggable_data ->> 'label'::text) AS label,
-      (p.taggable_data ->> 'col_doi'::text) AS doi,
-      jsonb_array_elements((p.taggable_data -> 'element_dois'::text)) AS elobj,
-      p.doi_id,
-      p.published_by
-     FROM publications p
-    WHERE ((p.deleted_at IS NULL) AND ((p.element_type)::text = 'Collection'::text));
-  SQL
 end
diff --git a/lib/chemotion/orcid_service.rb b/lib/chemotion/orcid_service.rb
index 9678d85f1..a05d7d16c 100644
--- a/lib/chemotion/orcid_service.rb
+++ b/lib/chemotion/orcid_service.rb
@@ -10,10 +10,10 @@ def self.record_person(orcid)
 
       record = Nokogiri::XML(record).to_xml
       record = Hash.from_xml(record).as_json
-      person = record['person']
       person = OpenStruct.new(
-        given_names: person['name']['given_names'],
-        family_name: person['name']['family_name']
+        given_names: record.dig('person', 'name', 'given_names'),
+        family_name: record.dig('person', 'name', 'family_name'),
+        email: record.dig('person', 'emails', 'email', 'email')
       )
       result = OpenStruct.new(person: person)
       result
diff --git a/package.json b/package.json
index fc1d00cfa..5bbac2316 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.7",
+    "repo-review-ui": "^0.0.8",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",
diff --git a/yarn.lock b/yarn.lock
index f780bf50d..000019946 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6783,7 +6783,7 @@ d3-brush@1:
     d3-selection "1"
     d3-transition "1"
 
-d3-brush@2:
+d3-brush@2, d3-brush@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
   integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==

From 8bd9dbbe65237adef059c6437632ef49ab0c0c98 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 8 May 2023 23:14:30 +0200
Subject: [PATCH 123/258] Resolve "molecular mass descriptor in sample
 metadata"

---
 .../src/components/chemrepo/PublicSample.js   | 30 ++++++++++++-------
 app/packs/src/libHome/RepoSample.js           |  3 +-
 app/publish/datacite_metadata_sample.html.erb |  2 +-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
index e6e678c93..a462ea987 100644
--- a/app/packs/src/components/chemrepo/PublicSample.js
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -28,23 +28,32 @@ const PublicSample = (_props) => {
     : '';
 
   const reactionLink = sample.reaction_ids?.length > 0 ? (
-    <Button id="public-sample-reaction-link" bsStyle="link" onClick={() => { window.location = `/home/publications/reactions/${sample.reaction_ids[0]}`; }}>
-      Is Product of a reaction <i className="icon-reaction" />
-    </Button>
+    <>
+      &nbsp;
+      <Button id="public-sample-reaction-link" bsStyle="link" onClick={() => { window.location = `/home/publications/reactions/${sample.reaction_ids[0]}`; }}>
+        Is Product of a reaction <i className="icon-reaction" />
+      </Button>
+    </>
   ) : null;
 
 
   const analyticalLink = analyses.length > 0 ? (
-    <Button id="public-sample-analytical-link" bsStyle="link" onClick={handleAnalysesLink}>
-      has analytical data
-    </Button>
+    <>
+      {reactionLink ? ',' : ''}&nbsp;&nbsp;
+      <Button id="public-sample-analytical-link" bsStyle="link" onClick={handleAnalysesLink}>
+        has analytical data
+      </Button>
+    </>
   ) : null;
 
   const hasData = !!(sample.xvial && sample.xvial !== '');
   const materialLink = hasData ? (
-    <Button id="public-sample-material-link" bsStyle="link" onClick={handleMaterialLink}>
-      has a record as physically available material
-    </Button>
+    <>
+      {analyticalLink ? ',' : ''}&nbsp;&nbsp;
+      <Button id="public-sample-material-link" bsStyle="link" onClick={handleMaterialLink}>
+        has a record as physically available material
+      </Button>
+    </>
   ) : null;
 
   return (
@@ -54,8 +63,9 @@ const PublicSample = (_props) => {
       <ChemotionId id={pubData.id} type="sample" />
       {embargo}
       <h5>
-        <b>Relations of this sample: </b> {reactionLink}, {analyticalLink}, {materialLink}
+        <b>Relations of this sample: </b>{reactionLink}{analyticalLink}{materialLink}
       </h5>
+      <br />
       <h5>
         <span>
           <b>Reference{references.length > 1 ? 's' : null} in the Literature: </b>
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 710f1c7da..34ebb50c3 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -140,7 +140,6 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} isPublished={isPublished} id={sample.id} type="sample" /></span>&nbsp;
           <span className="repo-pub-title"><DateInfo isPublished={isPublished} preText="Sample" pubData={pubData} tagData={tagData} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
-          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
           <span className="repo-public-user-comment">
             <PublicCommentModal isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
             <UserCommentModal isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
@@ -160,7 +159,7 @@ export default class RepoSample extends Component {
         />
         <br />
         <PublicSample {...this.props} embargo={embargo} handleAnalysesLink={this.handleAnalysesLink} handleMaterialLink={this.handleMaterialLink} />
-        <br />
+        <br /><br />
         <div ref={this.materialRef}>
           <MAPanel isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />&nbsp;
         </div>
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index 1f488844f..e3463750c 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -61,7 +61,7 @@
       InChI descriptor[cheminf_000113]: <%= "#{element.molecule_inchistring}" %>, and canonical SMILES descriptor[cheminf_000007]: <%= "#{element.molecule_cano_smiles}" %>, and by the IUPAC name[cheminf_000107]: <%= "#{element.molecule_iupac_name}" %>.
       <% elsif cust_sample[:type] == 'decoupled_sample' %>
       This is a physical chemical entity[CHEBI_24431] which was not directly associated with a molecule[CHEBI_25367].
-      The physical chemical entity[CHEBI_24431] can be described by the molecular mass[data_0844]: <%= "#{element.molecular_mass}" %>.
+      The physical chemical entity[CHEBI_24431] can be described by the molecular mass descriptor [cheminf_000088]: <%= "#{element.molecular_mass}" %>.
       <% end %>
       The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES descriptor[cheminf_000007]: <%= element.molecule_cano_smiles %>
       The physical chemical entity[CHEBI_24431] has the following Sample ID as registered in the research data repository chemotion (www.chemotion-repository.net, https://doi.org/10.25504/FAIRsharing.iagXcR): CRS-<%= "#{pub.id}" %>

From b3edbae2c0a05dbd47d0f7086d92115aaf7a624f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 8 May 2023 23:12:35 +0200
Subject: [PATCH 124/258] review notification

---
 app/jobs/chemotion_repo_publishing_job.rb |  6 ++-
 app/jobs/chemotion_repo_reviewing_job.rb  | 50 +++--------------------
 app/mailers/publication_mailer.rb         | 16 ++++++--
 app/models/publication.rb                 |  8 +++-
 app/models/user.rb                        |  2 +-
 5 files changed, 32 insertions(+), 50 deletions(-)

diff --git a/app/jobs/chemotion_repo_publishing_job.rb b/app/jobs/chemotion_repo_publishing_job.rb
index b33d6f71c..e8c52d468 100644
--- a/app/jobs/chemotion_repo_publishing_job.rb
+++ b/app/jobs/chemotion_repo_publishing_job.rb
@@ -137,9 +137,13 @@ def completed
     if ENV['PUBLISH_MODE'] == 'production'
       PublicationMailer.mail_publish_approval(@publication.id).deliver_now
     end
+    submitter = @publication.published_by || @publication.taggable_data['creators']&.first&.dig('id')
+    sgl = @publication.review.dig('reviewers').nil? ? submitter : @publication.review.dig('reviewers') + [submitter]
+
     Message.create_msg_notification(
       channel_subject: Channel::PUBLICATION_REVIEW,
-      message_from: @publication.published_by || @publication.taggable_data['creators']&.first&.dig('id'),
+      message_from: submitter,
+      message_to: sgl,
       data_args: {subject: "Congratulations! Chemotion Repository: #{@publication.doi.suffix} published"}
     )
   rescue StandardError => e
diff --git a/app/jobs/chemotion_repo_reviewing_job.rb b/app/jobs/chemotion_repo_reviewing_job.rb
index 174ab0bef..6db229813 100644
--- a/app/jobs/chemotion_repo_reviewing_job.rb
+++ b/app/jobs/chemotion_repo_reviewing_job.rb
@@ -21,31 +21,18 @@ def perform(id, action, current_user_id = 0)
   end
 
   private
-
-  # NB: Moved to model
-  # def process_element
-  #   case publication.state
-  #   when Publication::STATE_PENDING
-  #     publication.move_to_pending_collection
-  #   when Publication::STATE_REVIEWED
-  #     publication.move_to_review_collection
-  #   when Publication::STATE_ACCEPTED
-  #     publication.move_to_accepted_collection
-  #   when Publication::STATE_DECLINED
-  #     publication.declined_reverse_original_element
-  #     publication.declined_move_collections
-  #   end
-  # end
-
   def notify_users
+    submitter = publication.published_by || publication.taggable_data['creators']&.first&.dig('id')
+
     args = {
       channel_subject: Channel::PUBLICATION_REVIEW,
-      message_from: publication.published_by || publication.taggable_data['creators']&.first&.dig('id')
+      message_from: submitter
     }
+    sgl = publication.review.dig('reviewers').nil? ? submitter : publication.review.dig('reviewers') + [submitter]
 
     case publication.state
     when Publication::STATE_PENDING
-      args[:message_to] = User.reviewer_ids
+      args[:message_to] = User.reviewer_ids + (publication.review.dig('reviewers') || [])
       args[:data_args] = {
         subject: "Chemotion Repository: Review Request for #{publication.doi.suffix}"
       }
@@ -58,6 +45,7 @@ def notify_users
         subject: "Chemotion Repository: Publication Accepted. for #{publication.doi.suffix}  \n Once the embargo is released, this submission will be published."
       }
     when Publication::STATE_DECLINED
+      args[:message_to] = sgl
       title = publication.published_by == @current_user_id ? 'withdrawn' : 'rejected'
       args[:data_args] = {
         subject: "Chemotion Repository: Publication #{title}. for #{publication.doi.suffix}."
@@ -92,30 +80,4 @@ def mail_users
     TXT
 
   end
-
-  # NB: NOT USED?
-  # NB: Moved to model
-  # def release_original_element
-  #   ot = publication.original_element&.tag&.taggable_data&.delete("publish_#{publication.element_type.downcase}")
-  #   publication.original_element.tag.save! unless ot.nil?
-  #
-  #   case publication.element_type
-  #   when 'Sample'
-  #     clear_orig_analyses(publication.original_element)
-  #   when 'Reaction'
-  #     clear_orig_analyses(publication.original_element)
-  #     publication.original_element&.samples&.each do |s|
-  #       t = s.tag&.taggable_data&.delete('publish_sample')
-  #       s.tag.save! unless t.nil?
-  #       clear_orig_analyses(s)
-  #     end
-  #   end
-  # end
-
-  # def clear_orig_analyses(element)
-  #   element&.analyses&.each do |a|
-  #     t = a.tag&.taggable_data&.delete('publish_analysis')
-  #     a.tag.save! unless t.nil?
-  #   end
-  # end
 end
diff --git a/app/mailers/publication_mailer.rb b/app/mailers/publication_mailer.rb
index 00880c4b2..ce73a9917 100644
--- a/app/mailers/publication_mailer.rb
+++ b/app/mailers/publication_mailer.rb
@@ -95,6 +95,15 @@ def reviewers
     []
   end
 
+  def group_leaders
+    reviewers = @publication.review.dig('reviewers')
+    if reviewers.nil?
+      []
+    else
+      Person.where(id: reviewers).pluck(:email)
+    end
+  end
+
   def init_params(publication_id,current_user_id=0)
     @publication = Publication.find(publication_id)
     @doi = @publication.doi
@@ -151,10 +160,11 @@ def mail_reviewed_request(publication_id)
   def mail_reviewing_request(publication_id)
     init_params(publication_id)
     #reviewing_notify
-    return unless reviewers.present?
+    # return unless reviewers.present?
+    return if @publication.review.dig('reviewers').nil? || @publication.review.dig('history').length > 2
 
     mail(
-      to: reviewers,
+      to: group_leaders,
       subject: subject('Pending for publication. Review Request')
     ) do |format|
       format.html
@@ -207,7 +217,7 @@ def mail_publish_embargo_release(embargo_col_id)
     #approved_notify
     mail(
       to: @creator.email,
-      bcc: reviewers,
+      bcc: group_leaders,
       subject: "Chemotion Repository: Embargo collection: #{@embargo_collection.label} released",
     ) do |format|
       format.html
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 146027db3..043a8fc53 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -596,8 +596,14 @@ def transition_from_completing_to_completed!
       else
         published_collection_ids = my_published_collection_ids + [Collection.public_collection_id]
       end
-
       collections_klass = "Collections#{element_type}".constantize
+      if element_type == 'Sample'
+        gl_col_ids = collections_klass.joins(:collection).where(sample_id: element_id).where("collections.label = 'Group Lead Review'").pluck :collection_id
+      end
+      if element_type == 'Reaction'
+        gl_col_ids = collections_klass.joins(:collection).where(reaction_id: element_id).where("collections.label = 'Group Lead Review'").pluck :collection_id
+      end
+      collections_klass.remove_in_collection([element_id], gl_col_ids ) if gl_col_ids.present?
       collections_klass.remove_in_collection([element_id], pending_collection_ids)
       collections_klass.remove_in_collection([element_id], Collection.element_to_review_collection.pluck(:id))
       collections_klass.create_in_collection([element_id], published_collection_ids)
diff --git a/app/models/user.rb b/app/models/user.rb
index c730fe476..53b6d9919 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -394,7 +394,7 @@ def sync_element_to_review_collection
   def find_or_create_grouplead_collection
     chemotion_user = User.chemotion_user
     sys_review_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Group Lead Review from', is_locked: true, is_shared: false)
-    sys_review_collection = Collection.create(user: chemotion_user, label: 'Group Lead Review', ancestry: "#{sys_review_from.id}")
+    sys_review_collection = Collection.find_or_create_by(user: chemotion_user, label: 'Group Lead Review', ancestry: "#{sys_review_from.id}", shared_by_id: id)
 
     col_attributes = {
       user: self,

From d94fe35eb911d4f7bc5b9304fb5dabf71356f783 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 9 May 2023 23:08:13 +0200
Subject: [PATCH 125/258] group default value

---
 app/packs/src/libHome/RepoMoleculeArchive.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/libHome/RepoMoleculeArchive.js
index ce648d8cf..4feba19f4 100644
--- a/app/packs/src/libHome/RepoMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoMoleculeArchive.js
@@ -72,7 +72,7 @@ const RepoMoleculeArchive = (props) => {
             </div>
             <div className="border">
               <div className="dl">Group</div>
-              <div className="dr">{molecule.xvial_archive[0]?.group}</div>
+              <div className="dr">{molecule.xvial_archive[0]?.group || 'Stefan Bräse Group'}</div>
             </div>
           </div>
           <div>

From 254040b8f26a459b07d4c33e02c00b7427897a41 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 9 May 2023 23:09:35 +0200
Subject: [PATCH 126/258] rm review notification

---
 app/api/chemotion/message_api.rb                        | 2 +-
 app/jobs/chemotion_repo_publishing_job.rb               | 3 +--
 app/jobs/chemotion_repo_reviewing_job.rb                | 2 +-
 app/packs/src/components/Notifications.js               | 3 ++-
 app/packs/src/components/contextActions/NoticeButton.js | 4 +++-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/api/chemotion/message_api.rb b/app/api/chemotion/message_api.rb
index eb20f51eb..653209ac6 100644
--- a/app/api/chemotion/message_api.rb
+++ b/app/api/chemotion/message_api.rb
@@ -16,7 +16,7 @@ class MessageAPI < Grape::API
         requires :is_ack, type: Integer, desc: 'whether messages are acknowledged or not'
       end
       get 'list' do
-        messages = NotifyMessage.where(receiver_id: current_user.id)
+        messages = NotifyMessage.where(receiver_id: current_user.id).limit(100)
         messages = messages.where(is_ack: params[:is_ack]) if params[:is_ack] < 9
         message_list = present(messages, with: Entities::MessageEntity, root: 'messages')
         message_list[:version] = ENV['VERSION_ASSETS'] if ENV['VERSION_ASSETS']
diff --git a/app/jobs/chemotion_repo_publishing_job.rb b/app/jobs/chemotion_repo_publishing_job.rb
index e8c52d468..68e25dda3 100644
--- a/app/jobs/chemotion_repo_publishing_job.rb
+++ b/app/jobs/chemotion_repo_publishing_job.rb
@@ -138,8 +138,7 @@ def completed
       PublicationMailer.mail_publish_approval(@publication.id).deliver_now
     end
     submitter = @publication.published_by || @publication.taggable_data['creators']&.first&.dig('id')
-    sgl = @publication.review.dig('reviewers').nil? ? submitter : @publication.review.dig('reviewers') + [submitter]
-
+    sgl = @publication.review.dig('reviewers').nil? ? [submitter] : @publication.review.dig('reviewers') + [submitter]
     Message.create_msg_notification(
       channel_subject: Channel::PUBLICATION_REVIEW,
       message_from: submitter,
diff --git a/app/jobs/chemotion_repo_reviewing_job.rb b/app/jobs/chemotion_repo_reviewing_job.rb
index 6db229813..ec9423cd6 100644
--- a/app/jobs/chemotion_repo_reviewing_job.rb
+++ b/app/jobs/chemotion_repo_reviewing_job.rb
@@ -28,7 +28,7 @@ def notify_users
       channel_subject: Channel::PUBLICATION_REVIEW,
       message_from: submitter
     }
-    sgl = publication.review.dig('reviewers').nil? ? submitter : publication.review.dig('reviewers') + [submitter]
+    sgl = publication.review.dig('reviewers').nil? ? [submitter] : publication.review.dig('reviewers') + [submitter]
 
     case publication.state
     when Publication::STATE_PENDING
diff --git a/app/packs/src/components/Notifications.js b/app/packs/src/components/Notifications.js
index 7c08cfce4..a5239a509 100644
--- a/app/packs/src/components/Notifications.js
+++ b/app/packs/src/components/Notifications.js
@@ -4,6 +4,7 @@ import connectToStores from 'alt-utils/lib/connectToStores';
 
 import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 import NotificationStore from 'src/stores/alt/stores/NotificationStore';
+import uuid from 'uuid';
 
 class Notifications extends Component {
   componentDidMount() {
@@ -13,7 +14,7 @@ class Notifications extends Component {
   render() {
     return (
       <div>
-        <NotificationSystem ref={(notification) => { this.notificationSystem = notification; }} />
+        <NotificationSystem key={uuid.v4()} ref={(notification) => { this.notificationSystem = notification; }} />
       </div>
     );
   }
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index a66af2fe2..4a773a276 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -74,9 +74,11 @@ const handleNotification = (nots, act, needCallback = true) => {
           CollectionActions.fetchRemoteCollectionRoots();
           break;
         case 'CollectionActions.fetchSyncInCollectionRoots':
+          CollectionActions.fetchSyncInCollectionRoots();
+          break;
         case 'Repository_ReviewRequest':
         case 'Repository_Published':
-          CollectionActions.fetchSyncInCollectionRoots();
+          // CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'InboxActions.fetchInbox':
           InboxActions.fetchInbox({ currentPage, itemsPerPage });

From fc1766789b85d00fa31f5078b8c49487b8ebe63d Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 10 May 2023 13:39:28 +0200
Subject: [PATCH 127/258] fix White Screen when clicking on Analysis DOI

---
 app/packs/src/libHome/RepoCommon.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 23ec21b85..af7d26256 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -57,6 +57,7 @@ import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoSegment from './RepoSegment';
 import RepoMolViewerBtn from './RepoMolViewerBtn';
 import RepoMolViewerListBtn from './RepoMolViewerListBtn';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 

From bd0d7c38c5cea0e4d77d0fe093bc7df43c94c27b Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 10 May 2023 13:58:32 +0200
Subject: [PATCH 128/258] fix white page while doi is null

---
 app/packs/src/components/chemrepo/LicenseIcon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/components/chemrepo/LicenseIcon.js b/app/packs/src/components/chemrepo/LicenseIcon.js
index b64770919..93cb21f9b 100644
--- a/app/packs/src/components/chemrepo/LicenseIcon.js
+++ b/app/packs/src/components/chemrepo/LicenseIcon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const LicenseIcon = (props) => {
   const { doi, license, hasCoAuthors = false } = props;
-  const anc = doi.split('/').pop();
+  const anc = doi?.split('/').pop() || '';
   const presentStyle = { height: '26px' };
   let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
   let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';

From da43e36feb604303f85f4652bf7fb9e62c649441 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 10 May 2023 14:13:28 +0200
Subject: [PATCH 129/258] fix the incorrect license icon usage

---
 app/packs/src/libHome/RepoCommon.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index af7d26256..aaba9ebc4 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -1878,7 +1878,10 @@ class RenderPublishAnalyses extends Component {
       <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
         <Panel.Heading style={{ border: 'unset' }}>
           <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            {LicenseIcon(null, this.props.license, (this.props.publication.author_ids.length > 1))}
+            <LicenseIcon
+              license={this.props.license}
+              hasCoAuthors={(this.props.publication.author_ids.length > 1)}
+            />
           </h4>
           <p>&nbsp;</p>
           <b>{kind}</b>&nbsp;

From 307f8fd452e2be40c646c25d354de47916478e0a Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 12 May 2023 09:46:37 +0200
Subject: [PATCH 130/258] msg fix

---
 app/api/chemotion/repository_api.rb   |  2 --
 app/api/helpers/repository_helpers.rb | 12 ++++++------
 app/mailers/publication_mailer.rb     |  4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index fde159372..3edaabf04 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -591,8 +591,6 @@ def add_submission_history(root)
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
           review_info = repo_review_info(publication, current_user&.id, false)
-          # preapproved = publication.review.dig('checklist', 'glr', 'status') == true
-          # is_leader = publication.review.dig('reviewers')&.include?(current_user&.id)
           publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index c431042bf..3e40ee46f 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -159,12 +159,12 @@ def check_repo_review_permission(element)
 
   def repo_review_info(pub, user_id, lst)
     {
-      submitter: pub.published_by == user_id,
-      reviewer: User.reviewer_ids.include?(user_id) || false,
-      groupleader: pub.review.dig('reviewers')&.include?(user_id),
-      leaders: User.where(id: pub.review.dig('reviewers'))&.map{ |u| u.name },
-      preapproved: pub.review.dig('checklist', 'glr', 'status') == true,
-      review_level: repo_review_level(pub.element_id, pub.element_type)
+      submitter: pub&.published_by == user_id || false,
+      reviewer: User.reviewer_ids&.include?(user_id) || false,
+      groupleader: pub&.review&.dig('reviewers')&.include?(user_id),
+      leaders: User.where(id: pub&.review&.dig('reviewers'))&.map{ |u| u.name },
+      preapproved: pub&.review&.dig('checklist', 'glr', 'status') == true,
+      review_level: repo_review_level(pub&.element_id, pub&.element_type)
     }
   end
 
diff --git a/app/mailers/publication_mailer.rb b/app/mailers/publication_mailer.rb
index ce73a9917..d0d9ac39c 100644
--- a/app/mailers/publication_mailer.rb
+++ b/app/mailers/publication_mailer.rb
@@ -96,7 +96,7 @@ def reviewers
   end
 
   def group_leaders
-    reviewers = @publication.review.dig('reviewers')
+    reviewers = @publication&.review&.dig('reviewers')
     if reviewers.nil?
       []
     else
@@ -217,7 +217,7 @@ def mail_publish_embargo_release(embargo_col_id)
     #approved_notify
     mail(
       to: @creator.email,
-      bcc: group_leaders,
+      bcc: reviewers,
       subject: "Chemotion Repository: Embargo collection: #{@embargo_collection.label} released",
     ) do |format|
       format.html

From 727188e9f6314f19f387f8ecfbfa3251b3575911 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 16 May 2023 10:05:10 +0200
Subject: [PATCH 131/258] user reivew and svg fix

---
 app/packs/src/components/ReactionDetailsRepoComment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index 7112eafe1..0b0569622 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -35,7 +35,7 @@ export default class ReactionDetailsRepoComment extends Component {
   }
 
   render() {
-    const { reaction } = this.state;
+    const { reaction, review_info } = this.state;
     return reaction && reaction.publication ?
       (
         <RepoReactionDetails

From 37e6ca0d1f01e03ace9864bdbc47d76a305b8f13 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 16 May 2023 10:17:14 +0200
Subject: [PATCH 132/258] remove log

---
 app/packs/src/components/ReactionDetailsRepoComment.js         | 1 -
 .../src/components/managingActions/ManagingModalSharing.js     | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index 0b0569622..cc218ffaa 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -26,7 +26,6 @@ export default class ReactionDetailsRepoComment extends Component {
   }
 
   onStoreChange(state) {
-    console.log(state);
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
diff --git a/app/packs/src/components/managingActions/ManagingModalSharing.js b/app/packs/src/components/managingActions/ManagingModalSharing.js
index 74f206366..725906b7a 100644
--- a/app/packs/src/components/managingActions/ManagingModalSharing.js
+++ b/app/packs/src/components/managingActions/ManagingModalSharing.js
@@ -130,7 +130,6 @@ export default class ManagingModalSharing extends React.Component {
       };
     });
 
-    console.log(filterParams);
     return filterParams;
   }
 
@@ -179,8 +178,6 @@ export default class ManagingModalSharing extends React.Component {
         collection_id: collectionId
       };
     });
-    console.log(filterParams);
-
     return filterParams;
   }
 

From e2d8392ef0256ab182b397a46bc5f7e43e79be8a Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 19 May 2023 17:44:04 +0200
Subject: [PATCH 133/258] group lead review update

---
 app/api/chemotion/repository_api.rb | 11 ++++++-----
 app/packs/src/libHome/RepoCommon.js |  2 +-
 package.json                        |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 3edaabf04..c82f2d921 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -386,10 +386,10 @@ def add_submission_history(root)
 
           svg_file = e.element.sample_svg_file if element_type == 'Sample'
           title = e.element.short_label if element_type == 'Sample'
-          checklist = e.review['checklist'] if User.reviewer_ids.include?(current_user&.id)
+          review_info = repo_review_info(e, current_user&.id, true)
+          checklist = e.review['checklist'] if User.reviewer_ids.include?(current_user&.id) || review_info[:groupleader] == true
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
 
-          review_info = repo_review_info(e, current_user&.id, true)
 
           elements.push(
             id: e.element_id, svg: svg_file, type: element_type, title: title, checklist: checklist || {}, review_info: review_info, isReviewer: User.reviewer_ids.include?(current_user&.id) || false,
@@ -552,7 +552,7 @@ def add_submission_history(root)
           schemeList = get_reaction_table(params[:id])
           publication = Publication.find_by(element_id: params[:id], element_type: 'Reaction')
           review_info = repo_review_info(publication, current_user&.id, false)
-          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id) || (publication.review.dig('reviewers')&.include?(current_user&.id))
+          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id) || review_info[:groupleader] == true
           published_user = User.find(publication.published_by) unless publication.nil?
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
@@ -591,7 +591,9 @@ def add_submission_history(root)
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
           review_info = repo_review_info(publication, current_user&.id, false)
-          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id)
+          # preapproved = publication.review.dig('checklist', 'glr', 'status') == true
+          # is_leader = publication.review.dig('reviewers')&.include?(current_user&.id)
+          publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id) || review_info[:groupleader] == true
           published_user = User.find(publication.published_by) unless publication.nil?
           literatures = get_literature(params[:id], 'Sample', params[:is_public] ? 'public' : 'detail')
           # embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{sample.id}")&.first&.label
@@ -757,7 +759,6 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review_history << next_node
               review['history'] = review_history
             end
-
             if checklist&.length&.positive?
               revst = review['checklist'] || {}
               checklist.each do |k, v|
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index aaba9ebc4..e4297e947 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -634,7 +634,7 @@ const ChecklistPanel = ({
   const dohd = checklist?.ohd?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
 
 
-  if (isReviewer === true) {
+  if (isReviewer === true || review_info?.groupleader == true) {
     const leaders = review_info?.leaders?.length > 0 ? `additional reviewer(s): ${review_info?.leaders?.join(', ')}` : '';
     const isGL = review_info?.leaders?.length > 0 ? (<OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">group leader review</Tooltip>}>{dglr}</OverlayTrigger>) : '';
     return (
diff --git a/package.json b/package.json
index 5bbac2316..8d3bb1688 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.8",
+    "repo-review-ui": "^0.0.9",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",

From 322e5a4c547bf19c2003c8e2e66859304bd2ea54 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 23 May 2023 10:46:47 +0200
Subject: [PATCH 134/258] increase font size and add space

---
 app/assets/stylesheets/repo_home.scss | 1 -
 app/packs/src/libHome/RepoCommon.js   | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index b9e64b09d..6226a6229 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -131,7 +131,6 @@ $bs-successcolor: #5cb85c;
 
 .repo-registed-compound-desc {
   color: $bs-primarycolor;
-  font-size: 80%;
   font-style: italic;
   i { color: black; cursor: pointer; }
 }
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index e4297e947..bce163fc1 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -101,7 +101,7 @@ const resizableSvg = (path, extra = null) => (
 
 const ChemotionId = props => (
   <h5>
-    <b>{props.type?.replace(/^\w/, c => c.toUpperCase())} ID: </b>
+    <b>{props.type?.replace(/^\w/, c => c.toUpperCase())} ID:&nbsp;</b>
     <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
       {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
     </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
@@ -2288,7 +2288,7 @@ const Doi = (props) => {
 
   return (
     <h5>
-      <b>{title} </b>
+      <b>{title}&nbsp;</b>
       {data}
     </h5>
   );

From 6f855a88bdca51412fc8075569df20f00a9df158 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 23 May 2023 14:15:14 +0200
Subject: [PATCH 135/258] add comp-number to published sample page

---
 .../components/chemrepo/MoleculeArchive.js    |  8 ++++++-
 .../src/components/chemrepo/ma/MAModals.js    | 22 +++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/packs/src/components/chemrepo/MoleculeArchive.js b/app/packs/src/components/chemrepo/MoleculeArchive.js
index fbb544cd8..eb63a09b5 100644
--- a/app/packs/src/components/chemrepo/MoleculeArchive.js
+++ b/app/packs/src/components/chemrepo/MoleculeArchive.js
@@ -4,6 +4,12 @@ import { ToggleIndicator } from '../../libHome/RepoCommon';
 import { MARegisteredTooltip } from './ma/MAComs';
 import { MADataModal, MARequestModal } from './ma/MAModals';
 
+const CompNumber = (xvialCom, data = '') => {
+  if (!xvialCom || typeof xvialCom === 'undefined' || !xvialCom.allowed || !xvialCom.hasData || data === '') return null;
+  const match = xvialCom.data.find(x => x.x_data.xid === data);
+  return match ? <span>:&nbsp;{match.x_short_label}</span> : null;
+};
+
 const MAPanel = (_props) => {
   const {
     allowRequest, elementId, isEditable, isLogin, data, saveCallback, xvialCom
@@ -25,7 +31,7 @@ const MAPanel = (_props) => {
       <Panel style={{ border: 'none' }} id="collapsible-panel-ma-panel" expanded={expanded} defaultExpanded={expanded} onToggle={() => { }}>
         <Panel.Collapse>
           <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-            <b>Sample Registration Number in Molecule Archive</b> <br />
+            <b>Sample Registration Number in Molecule Archive</b>{CompNumber(xvialCom, data)} <br />
             <b>Request a sample:</b> <MARequestModal allowRequest={allowRequest} data={data} elementId={elementId} isLogin={isLogin} />
           </Panel.Body>
         </Panel.Collapse>
diff --git a/app/packs/src/components/chemrepo/ma/MAModals.js b/app/packs/src/components/chemrepo/ma/MAModals.js
index e54b27058..d90c2f23e 100644
--- a/app/packs/src/components/chemrepo/ma/MAModals.js
+++ b/app/packs/src/components/chemrepo/ma/MAModals.js
@@ -1,10 +1,10 @@
 /* eslint-disable react/forbid-prop-types */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
 import uuid from 'uuid';
-import NotificationActions from '../../actions/NotificationActions';
+import NotificationSystem from 'react-notification-system';
 import RepositoryFetcher from '../../fetchers/RepositoryFetcher';
 
 export const listCom = (xvialCom, data = '') => {
@@ -48,6 +48,7 @@ export const MARequestModal = (props) => {
   } = props;
   const [requestModalShow, setRequestModalShow] = useState(false);
   const [rInput, setRInput] = useState(null);
+  const notificationSystem = useRef(null);
   const hasData = !!(data && data !== '');
 
   if (!(allowRequest && hasData)) return null;
@@ -56,11 +57,9 @@ export const MARequestModal = (props) => {
     if (isLogin) {
       setRequestModalShow(true);
     } else {
-      NotificationActions.add({
-        title: 'Request to the Compound-Platform.eu',
-        message: 'Please log in to send the request.',
-        level: 'warning',
-        position: 'tc'
+      const notification = notificationSystem.current;
+      notification.addNotification({
+        title: 'Request to the Compound-Platform.eu', message: 'Please log in to send the request.', level: 'warning', position: 'tc'
       });
     }
   };
@@ -69,11 +68,9 @@ export const MARequestModal = (props) => {
     RepositoryFetcher.compound(elementId, rInput.value, 'request')
       .then(() => {
         setRequestModalShow(false);
-        NotificationActions.add({
-          title: 'Request to the Compound-Platform.eu',
-          message: 'Your request has been emailed to the Compound-Platform',
-          level: 'info',
-          position: 'tc'
+        const notification = notificationSystem.current;
+        notification.addNotification({
+          title: 'Request to the Compound-Platform.eu', message: 'Your request has been emailed to the Compound-Platform.', level: 'info', position: 'tc'
         });
       });
   };
@@ -101,6 +98,7 @@ export const MARequestModal = (props) => {
           <Button bsStyle="primary" onClick={() => request()}>Send request to the Compound-Platform</Button>
         </Modal.Body>
       </Modal>
+      <NotificationSystem ref={notificationSystem} />
     </>
   );
 };

From b10e35f77ec140e6e56883070d2c47a956674644 Mon Sep 17 00:00:00 2001
From: "pei-chi.huang" <pei-chi.huang@kit.edu>
Date: Tue, 23 May 2023 15:57:18 +0200
Subject: [PATCH 136/258] Resolve "review ui reload issue"

---
 app/api/chemotion/repository_api.rb           | 21 +++++++++++++------
 .../src/components/actions/ReviewActions.js   |  2 +-
 .../src/components/stores/ReviewStore.js      |  3 ++-
 app/packs/src/libHome/RepoPubl.js             |  2 +-
 app/packs/src/libHome/RepoReviewButtonBar.js  |  2 +-
 package.json                                  |  2 +-
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index c82f2d921..a333287d1 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -807,8 +807,9 @@ def save_comment(root, comment)
           save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], nil, false)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
-          { "#{params[:type]}": element, review: his || @root_publication.review }
+          review_info = repo_review_info(@root_publication, current_user&.id, false)
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
+          { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
         end
 
         post :comment do
@@ -826,7 +827,8 @@ def save_comment(root, comment)
           # @root_publication.element
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, review: @root_publication.review }
+          review_info = repo_review_info(@root_publication, current_user&.id, false)
+          { "#{params[:type]}": element, review: @root_publication.review, review_info: review_info }
         end
 
         post :submit do
@@ -837,12 +839,18 @@ def save_comment(root, comment)
           @root_publication.inform_users(Publication::STATE_PENDING)
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
-          { "#{params[:type]}": element, review: his || @root_publication.review }
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
+          review_info = repo_review_info(@root_publication, current_user&.id, false)
+          { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
         end
 
         post :approved do
           approve_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'approved', false)
+          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
+          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
+          review_info = repo_review_info(@root_publication, current_user&.id, false)
+          { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
         end
 
         post :accepted do
@@ -857,7 +865,8 @@ def save_comment(root, comment)
 
           element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
           element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
-          { "#{params[:type]}": element, review: @root_publication.review, message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off' }
+          review_info = repo_review_info(@root_publication, current_user&.id, false)
+          { "#{params[:type]}": element, review: @root_publication.review, message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off', review_info: review_info }
         end
         post :declined do
           save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'declined', false)
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
index 2428f210d..27fa68c62 100644
--- a/app/packs/src/components/actions/ReviewActions.js
+++ b/app/packs/src/components/actions/ReviewActions.js
@@ -45,7 +45,7 @@ class ReviewActions {
   reviewPublish(id, type, comment, action, checklist, reviewComments) {
     return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
       .then((result) => {
-        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action })
+        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action, review_info: result.review_info })
       }).catch((errorMessage) => {
         console.log(errorMessage);
       });};
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index f471415e2..6ceb589b1 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -16,6 +16,7 @@ class ReviewStore {
     this.searchValue;
     this.currentElement = null;
     this.review = {};
+    this.review_info = {}
 
     this.bindListeners({
       handleReviewModal: ReviewActions.handleReviewModal,
@@ -108,7 +109,7 @@ class ReviewStore {
 
   handelReviewPublish(results) {
     // const { history, checklist, reviewComments } = results.review;
-    this.setState({ review: results.review, showReviewModal: false });
+    this.setState({ review: results.review, showReviewModal: false, review_info: results.review_info });
     ReviewActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
   }
 
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 27858137d..f88bfa304 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -68,7 +68,7 @@ const hints = {
     content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
   },
   moleculeArchive: {
-    title: 'Physcial samples',
+    title: 'Physical samples',
     content: 'A physical sample was registered to the Molecule Archive of the Compound Platform and can be requested from there.'
   }
 };
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
index 45130c03b..136bb8b59 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -29,7 +29,7 @@ const showButton = (btn, func, pubState, review_info) => {
     case 'Review':
       btnBsStyle = 'info';
       btnIcon = 'fa fa-exchange';
-      btnTooltip = 'Review publication, modification required for submittor';
+      btnTooltip = 'Review publication, modification required for submitter';
       break;
     case 'Submit':
       btnBsStyle = 'info';
diff --git a/package.json b/package.json
index 8d3bb1688..2685dcb78 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.9",
+    "repo-review-ui": "^0.0.10",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",

From 0ba35b1a98cb447a776dc00411d46b266402febf Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 24 May 2023 10:15:27 +0200
Subject: [PATCH 137/258] Resolve "compounds visibility"

---
 .../src/components/chemrepo/ma/MAGrid.js      |  67 ++++
 .../src/components/chemrepo/ma/MAModals.js    | 214 ++++++++-----
 .../src/components/common/RepoXvialButton.js  | 286 ++++++++++++------
 app/packs/src/libHome/RepoSample.js           | 197 +++++++++---
 4 files changed, 560 insertions(+), 204 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/ma/MAGrid.js

diff --git a/app/packs/src/components/chemrepo/ma/MAGrid.js b/app/packs/src/components/chemrepo/ma/MAGrid.js
new file mode 100644
index 000000000..b161fb2b6
--- /dev/null
+++ b/app/packs/src/components/chemrepo/ma/MAGrid.js
@@ -0,0 +1,67 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+const MAGrid = (props) => {
+  const { xvialCompounds, data, fnSelect } = props;
+  const [rowData] = useState(xvialCompounds.data || []);
+
+  const columnDefs = [
+    { headerName: 'X-Vial', field: 'x_data.xid' },
+    { headerName: 'Provided by', field: 'x_data.provided_by' },
+    {
+      headerName: 'Group',
+      field: 'x_data.group',
+      valueGetter: 'data.x_data.group || "Stefan Bräse Group"',
+    },
+    { headerName: 'Short label of Sample', field: 'x_short_label' },
+    { headerName: 'Created at', field: 'x_created_at' },
+  ];
+
+  const getRowStyle = (params) => {
+    if (params.data.x_data.xid === data && data !== '') {
+      return { background: '#d1e7dd', color: '#0f5132' };
+    }
+    return null;
+  };
+
+  const handleRowSelection = (event) => {
+    const selectedRows = event.api.getSelectedRows();
+    if (selectedRows.length > 0) {
+      const selectedRow = selectedRows[0];
+      fnSelect(selectedRow.x_data.xid);
+    }
+  };
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div
+        style={{ width: '100%', height: '100%' }}
+        className="ag-theme-balham"
+      >
+        <AgGridReact
+          columnDefs={columnDefs}
+          defaultColDef={{
+            suppressMovable: true,
+            resizable: true,
+            sortable: true,
+          }}
+          domLayout="autoHeight"
+          getRowStyle={getRowStyle}
+          onSelectionChanged={handleRowSelection}
+          rowSelection="single"
+          rowData={rowData}
+        />
+      </div>
+    </div>
+  );
+};
+
+MAGrid.propTypes = {
+  xvialCompounds: PropTypes.object.isRequired,
+  data: PropTypes.string.isRequired,
+  fnSelect: PropTypes.func.isRequired,
+};
+
+export default MAGrid;
diff --git a/app/packs/src/components/chemrepo/ma/MAModals.js b/app/packs/src/components/chemrepo/ma/MAModals.js
index d90c2f23e..615f10650 100644
--- a/app/packs/src/components/chemrepo/ma/MAModals.js
+++ b/app/packs/src/components/chemrepo/ma/MAModals.js
@@ -1,51 +1,33 @@
 /* eslint-disable react/forbid-prop-types */
 
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
-import uuid from 'uuid';
+import {
+  Modal,
+  Button,
+  OverlayTrigger,
+  Tooltip,
+  FormControl,
+} from 'react-bootstrap';
 import NotificationSystem from 'react-notification-system';
 import RepositoryFetcher from '../../fetchers/RepositoryFetcher';
+import MAGrid from './MAGrid';
 
-export const listCom = (xvialCom, data = '') => {
-  if (typeof xvialCom === 'undefined') return <br />;
-  if (!xvialCom.allowed) return <br />;
-  const listComData = xvialCom.hasData ? (
-    xvialCom.data.map(x => (
-      <tr key={uuid.v4()} style={x.x_data.xid === data && data !== '' ? { color: '#337ab7' } : { color: 'black' }}>
-        <td>{x.x_data.xid}</td>
-        <td>{x.x_data.provided_by}</td>
-        <td>{x.x_created_at}</td>
-        <td>{x.x_short_label}</td>
-        <td>{x.x_data.origin_id}</td>
-      </tr>
-    ))
-  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
+export const CompoundList = (xvialCom, data = '', selectXvial) => {
+  if (typeof xvialCom === 'undefined' || !xvialCom.allowed) return <br />;
+  if (!xvialCom.hasData) return <div>No Data found in Compound platform.</div>;
   return (
     <div>
-      <h4><i>Reference (data from Compound platform)</i></h4>
-      <Table striped bordered condensed hover>
-        <thead>
-          <tr>
-            <th>X-Vial</th>
-            <th>Provided by</th>
-            <th>Created at</th>
-            <th>Short label of Sample</th>
-            <th>Name of origin Sample</th>
-          </tr>
-        </thead>
-        <tbody>
-          {listComData}
-        </tbody>
-      </Table>
+      <h4>
+        <i>Reference (data from Compound platform)</i>
+      </h4>
+      <MAGrid xvialCompounds={xvialCom} data={data} fnSelect={selectXvial} />
     </div>
   );
 };
 
 export const MARequestModal = (props) => {
-  const {
-    allowRequest, elementId, isLogin, data
-  } = props;
+  const { allowRequest, elementId, isLogin, data } = props;
   const [requestModalShow, setRequestModalShow] = useState(false);
   const [rInput, setRInput] = useState(null);
   const notificationSystem = useRef(null);
@@ -59,43 +41,72 @@ export const MARequestModal = (props) => {
     } else {
       const notification = notificationSystem.current;
       notification.addNotification({
-        title: 'Request to the Compound-Platform.eu', message: 'Please log in to send the request.', level: 'warning', position: 'tc'
+        title: 'Request to the Compound-Platform.eu',
+        message: 'Please log in to send the request.',
+        level: 'warning',
+        position: 'tc',
       });
     }
   };
 
   const request = () => {
-    RepositoryFetcher.compound(elementId, rInput.value, 'request')
-      .then(() => {
-        setRequestModalShow(false);
-        const notification = notificationSystem.current;
-        notification.addNotification({
-          title: 'Request to the Compound-Platform.eu', message: 'Your request has been emailed to the Compound-Platform.', level: 'info', position: 'tc'
-        });
+    RepositoryFetcher.compound(elementId, rInput.value, 'request').then(() => {
+      setRequestModalShow(false);
+      const notification = notificationSystem.current;
+      notification.addNotification({
+        title: 'Request to the Compound-Platform.eu',
+        message: 'Your request has been emailed to the Compound-Platform.',
+        level: 'info',
+        position: 'tc',
       });
+    });
   };
 
   return (
     <>
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}>
-        <a onClick={() => checkRequest()} rel="noopener noreferrer"><i className="fa fa-envelope-o" /></a>
+      <OverlayTrigger
+        placement="top"
+        overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}
+      >
+        <a onClick={() => checkRequest()} rel="noopener noreferrer">
+          <i className="fa fa-envelope-o" />
+        </a>
       </OverlayTrigger>
-      <Modal show={requestModalShow} onHide={() => setRequestModalShow(false)} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
+      <Modal
+        show={requestModalShow}
+        onHide={() => setRequestModalShow(false)}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Request compound</Modal.Title>
+        </Modal.Header>
         <Modal.Body>
-          <FormControl style={{ height: '300px' }} componentClass="textarea" inputRef={(m) => { setRInput(m); }} placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email." />
+          <FormControl
+            style={{ height: '300px' }}
+            componentClass="textarea"
+            inputRef={(m) => {
+              setRInput(m);
+            }}
+            placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email."
+          />
           <br />
           <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
-            <b>Data privacy statement</b> This contact form can be used to get in contact to the team of
-            the molecule archive. The information that you enter into the form is sent - along
-            with the email address and your name that you entered with the registration to chemotion
-            repository - to the management team of the compound platform only. The data is not
-            stored, the information is available per email only. People in the management team
-            handle your request as confidential information. No other services or third
-            parties are included.
+            <b>Data privacy statement</b> This contact form can be used to get
+            in contact to the team of the molecule archive. The information that
+            you enter into the form is sent - along with the email address and
+            your name that you entered with the registration to chemotion
+            repository - to the management team of the compound platform only.
+            The data is not stored, the information is available per email only.
+            People in the management team handle your request as confidential
+            information. No other services or third parties are included.
           </p>
-          <Button bsStyle="warning" onClick={() => setRequestModalShow(false)}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => request()}>Send request to the Compound-Platform</Button>
+          <Button bsStyle="warning" onClick={() => setRequestModalShow(false)}>
+            Close
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => request()}>
+            Send request to the Compound-Platform
+          </Button>
         </Modal.Body>
       </Modal>
       <NotificationSystem ref={notificationSystem} />
@@ -103,7 +114,6 @@ export const MARequestModal = (props) => {
   );
 };
 
-
 MARequestModal.propTypes = {
   allowRequest: PropTypes.bool,
   data: PropTypes.string,
@@ -111,37 +121,89 @@ MARequestModal.propTypes = {
   isLogin: PropTypes.bool,
 };
 
-MARequestModal.defaultProps = { allowRequest: false, data: null, isLogin: false };
+MARequestModal.defaultProps = {
+  allowRequest: false,
+  data: null,
+  isLogin: false,
+};
 
 export const MADataModal = (props) => {
-  const {
-    data, elementId, isEditable, saveCallback, xvialCom
-  } = props;
+  const { data, elementId, isEditable, saveCallback, xvialCom } = props;
   const [dataModalShow, setDataModalShow] = useState(false);
-  const [xInput, setXInput] = useState(data || '');
+  const [newData, setNewData] = useState(data);
 
   if (!isEditable) return null;
 
+  useEffect(() => {
+    setNewData(data);
+  }, [dataModalShow, data]);
+
+  const selectXvial = (xid) => {
+    setNewData(xid);
+  };
+
   const save = () => {
-    RepositoryFetcher.compound(elementId, xInput.value, 'update')
-      .then(() => {
-        setDataModalShow(false);
-        saveCallback(elementId, xInput.value);
-      });
+    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
+      setDataModalShow(false);
+      saveCallback(elementId, newData);
+    });
+  };
+
+  const remove = () => {
+    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
+      setDataModalShow(false);
+      saveCallback(elementId, '');
+    });
   };
 
   return (
     <>
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>}>
-        <a onClick={() => setDataModalShow(true)} rel="noopener noreferrer"><i className="fa fa-pencil" /></a>
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          <Tooltip id="tt_xvial">Click to input Compound X-Vial number</Tooltip>
+        }
+      >
+        <a onClick={() => setDataModalShow(true)} rel="noopener noreferrer">
+          <i className="fa fa-pencil" />
+        </a>
       </OverlayTrigger>
-      <Modal bsSize="large" show={dataModalShow} onHide={() => setDataModalShow(false)} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
+      <Modal
+        bsSize="large"
+        show={dataModalShow}
+        onHide={() => setDataModalShow(false)}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Compound X-Vial number</Modal.Title>
+        </Modal.Header>
         <Modal.Body>
-          <FormControl type="text" defaultValue={data} inputRef={(m) => { setXInput(m); }} />
-          {listCom(xvialCom, data)}
-          <Button bsStyle="warning" onClick={() => setDataModalShow(false)}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => save()}>Save</Button>
+          <FormControl type="text" value={newData} readOnly />
+          {CompoundList(xvialCom, newData, selectXvial)}
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; The currently stored data:{' '}
+            <span style={{ background: '#d1e7dd', color: '#0f5132' }}>
+              highlighted with a color
+            </span>
+            .
+          </div>
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; Click on a row to select the X-Vial. Remember to press the
+            &#39;Save&#39; button if you wish to save the selection.
+          </div>
+          <Button bsStyle="warning" onClick={() => setDataModalShow(false)}>
+            Cancel
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => save()}>
+            Save
+          </Button>
+          &nbsp;
+          <Button bsStyle="danger" onClick={() => remove()}>
+            Remove X-Vial
+          </Button>
         </Modal.Body>
       </Modal>
     </>
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
index aa3b48125..46d94dede 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -1,65 +1,70 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
-import uuid from 'uuid';
+import {
+  Modal,
+  Button,
+  OverlayTrigger,
+  Tooltip,
+  FormControl,
+} from 'react-bootstrap';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import NotificationActions from '../actions/NotificationActions';
+import { CompoundList } from '../chemrepo/ma/MAModals';
 
 const registedCompoundTooltip = (
   <div className="repo-xvial-info">
-    For availability please contact the Compound Platform team (<span className="env"><i className="fa fa-envelope-o" aria-hidden="true" /></span>). An explanation can be accessed via our Youtube channel&nbsp;
-    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>
+    For availability please contact the Compound Platform team (
+    <span className="env">
+      <i className="fa fa-envelope-o" aria-hidden="true" />
+    </span>
+    ). An explanation can be accessed via our Youtube channel&nbsp;
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"
+    >
+      <i className="fa fa-youtube-play youtube" />
+    </a>
     &nbsp;or on our how-to pages
-    <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"
+    >
+      <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
+    </a>
   </div>
 );
 
-const listCom = (xvialCom, data = '') => {
-  if (typeof xvialCom === 'undefined') return <br />;
-  if (!xvialCom.allowed) return <br />;
-  const listComData = xvialCom.hasData ? (
-    xvialCom.data.map(x => (
-      <tr key={uuid.v4()} style={x.x_data.xid === data && data !== '' ? { color: '#337ab7' } : { color: 'black' }}>
-        <td>{x.x_data.xid}</td>
-        <td>{x.x_data.provided_by}</td>
-        <td>{x.x_created_at}</td>
-        <td>{x.x_short_label}</td>
-        <td>{x.x_data.origin_id}</td>
-      </tr>
-    ))
-  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
-  return (
-    <div>
-      <h4><i>Reference (data from Compound platform)</i></h4>
-      <Table striped bordered condensed hover>
-        <thead>
-          <tr>
-            <th>X-Vial</th>
-            <th>Provided by</th>
-            <th>Created at</th>
-            <th>Short label of Sample</th>
-            <th>Name of origin Sample</th>
-          </tr>
-        </thead>
-        <tbody>
-          {listComData}
-        </tbody>
-      </Table>
-    </div>
-  );
-};
-
 export default class RepoXvialButton extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       dataModalShow: false,
-      requestModalShow: false
+      requestModalShow: false,
+      newData: props.data,
     };
     this.save = this.save.bind(this);
+    this.remove = this.remove.bind(this);
     this.request = this.request.bind(this);
     this.closeModal = this.closeModal.bind(this);
     this.checkRequest = this.checkRequest.bind(this);
+    this.selectXvial = this.selectXvial.bind(this);
+    this.setNewData = this.setNewData.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.data !== prevProps.data) {
+      this.setNewData(this.props.data);
+    }
+  }
+
+  setNewData(newData) {
+    this.setState({ newData });
+  }
+
+  selectXvial(xid) {
+    this.setNewData(xid);
   }
 
   checkRequest() {
@@ -70,100 +75,205 @@ export default class RepoXvialButton extends React.Component {
         title: 'Request to the Compound-Platform.eu',
         message: 'Please log in to send the request.',
         level: 'warning',
-        position: 'tc'
+        position: 'tc',
       });
     }
   }
 
   save() {
+    const { newData } = this.state;
     const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, this.xInput.value, 'update')
-      .then(() => {
-        this.closeModal();
-        saveCallback(elementId, this.xInput.value);
-      });
+    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
+      this.closeModal();
+      saveCallback(elementId, newData);
+    });
+  }
+
+  remove() {
+    const { elementId, saveCallback } = this.props;
+    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
+      this.closeModal();
+      saveCallback(elementId, '');
+    });
   }
 
   request() {
     const { elementId } = this.props;
-    RepositoryFetcher.compound(elementId, this.rInput.value, 'request')
-      .then(() => {
+    RepositoryFetcher.compound(elementId, this.rInput.value, 'request').then(
+      () => {
         this.closeModal();
         NotificationActions.add({
           title: 'Request to the Compound-Platform.eu',
           message: 'Your request has been emailed to the Compound-Platform',
           level: 'info',
-          position: 'tc'
+          position: 'tc',
         });
-      });
+      }
+    );
   }
 
   closeModal() {
-    this.setState({ dataModalShow: false, requestModalShow: false });
+    this.setState({
+      dataModalShow: false,
+      requestModalShow: false,
+      newData: this.props.data,
+    });
   }
 
   render() {
-    const { dataModalShow, requestModalShow } = this.state;
-    const {
-      isEditable, isLogin, data, allowRequest, xvialCom
-    } = this.props;
+    const { dataModalShow, requestModalShow, newData } = this.state;
+    const { isEditable, isLogin, data, allowRequest, xvialCom } = this.props;
     const hasData = !!(data && data !== '');
     const compoundLink = hasData ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}>
-        <Button bsStyle="link" bsSize="xsmall" onClick={() => { window.open('https://compound-platform.eu/home', '_blank'); }}>X-Vial: Sample available</Button>
+      <OverlayTrigger
+        placement="top"
+        overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}
+      >
+        <Button
+          bsStyle="link"
+          bsSize="xsmall"
+          onClick={() => {
+            window.open('https://compound-platform.eu/home', '_blank');
+          }}
+        >
+          X-Vial: Sample available
+        </Button>
       </OverlayTrigger>
     ) : null;
     const dataModal = (
-      <Modal bsSize="large" show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
+      <Modal
+        bsSize="large"
+        show={dataModalShow}
+        onHide={() => this.closeModal()}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Compound X-vial number</Modal.Title>
+        </Modal.Header>
         <Modal.Body>
-          <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
-          {listCom(xvialCom, data)}
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
+          <FormControl type="text" value={newData} readOnly />
+          {CompoundList(xvialCom, newData, this.selectXvial)}
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; The currently stored data:{' '}
+            <span style={{ background: '#d1e7dd', color: '#0f5132' }}>
+              highlighted with a color
+            </span>
+            .
+          </div>
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; Click on a row to select the X-Vial. Remember to press the
+            &#39;Save&#39; button if you wish to save the selection.
+          </div>
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>
+            Cancel
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => this.save()}>
+            Save
+          </Button>
+          &nbsp;
+          <Button bsStyle="danger" onClick={() => this.remove()}>
+            Remove X-Vial
+          </Button>
         </Modal.Body>
       </Modal>
     );
     const requestModal = (
-      <Modal show={requestModalShow} onHide={() => this.closeModal()} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
+      <Modal
+        show={requestModalShow}
+        onHide={() => this.closeModal()}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Request compound</Modal.Title>
+        </Modal.Header>
         <Modal.Body>
-          <FormControl style={{ height: '300px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email." />
+          <FormControl
+            style={{ height: '300px' }}
+            componentClass="textarea"
+            inputRef={(m) => {
+              this.rInput = m;
+            }}
+            placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email."
+          />
           <br />
           <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
-            <b>Data privacy statement</b> This contact form can be used to get in contact to the team of
-            the molecule archive. The information that you enter into the form is sent - along
-            with the email address and your name that you entered with the registration to chemotion
-            repository - to the management team of the compound platform only. The data is not
-            stored, the information is available per email only. People in the management team
-            handle your request as confidential information. No other services or third
-            parties are included.
+            <b>Data privacy statement</b> This contact form can be used to get
+            in contact to the team of the molecule archive. The information that
+            you enter into the form is sent - along with the email address and
+            your name that you entered with the registration to chemotion
+            repository - to the management team of the compound platform only.
+            The data is not stored, the information is available per email only.
+            People in the management team handle your request as confidential
+            information. No other services or third parties are included.
           </p>
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => this.request()}>Send request to the Compound-Platform</Button>
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>
+            Close
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => this.request()}>
+            Send request to the Compound-Platform
+          </Button>
         </Modal.Body>
       </Modal>
     );
     const editLink = isEditable ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>}>
-        <a onClick={() => this.setState({ dataModalShow: true })} rel="noopener noreferrer"><i className="fa fa-pencil" /></a>
-      </OverlayTrigger>
-    ) : null;
-    const requestLink = allowRequest && hasData ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}>
-        <a onClick={() => this.checkRequest()} rel="noopener noreferrer"><i className="fa fa-envelope-o" /></a>
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          <Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>
+        }
+      >
+        <a
+          onClick={() => this.setState({ dataModalShow: true })}
+          rel="noopener noreferrer"
+        >
+          <i className="fa fa-pencil" />
+        </a>
       </OverlayTrigger>
     ) : null;
+    const requestLink =
+      allowRequest && hasData ? (
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}
+        >
+          <a onClick={() => this.checkRequest()} rel="noopener noreferrer">
+            <i className="fa fa-envelope-o" />
+          </a>
+        </OverlayTrigger>
+      ) : null;
     const info = requestLink ? (
-      <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
-        <a rel="noopener noreferrer"><i className="fa fa-info-circle" aria-hidden="true" /></a>
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement="top"
+        overlay={
+          <Tooltip
+            id="registed_compound_tooltip"
+            className="left_tooltip bs_tooltip"
+          >
+            {registedCompoundTooltip}
+          </Tooltip>
+        }
+      >
+        <a rel="noopener noreferrer">
+          <i className="fa fa-info-circle" aria-hidden="true" />
+        </a>
       </OverlayTrigger>
     ) : null;
     if (!isLogin) {
       if (compoundLink) {
         return (
           <span className="xvial-pub-elem">
-            <span><i className="icon-xvial" aria-hidden="true" />{compoundLink}{requestLink}{info}</span>
+            <span>
+              <i className="icon-xvial" aria-hidden="true" />
+              {compoundLink}
+              {requestLink}
+              {info}
+            </span>
           </span>
         );
       }
@@ -205,7 +315,7 @@ RepoXvialButton.propTypes = {
   isLogin: PropTypes.bool,
   allowRequest: PropTypes.bool,
   data: PropTypes.string,
-  saveCallback: PropTypes.func
+  saveCallback: PropTypes.func,
 };
 
 RepoXvialButton.defaultProps = {
@@ -213,5 +323,5 @@ RepoXvialButton.defaultProps = {
   isLogin: false,
   allowRequest: false,
   data: null,
-  saveCallback: () => {}
+  saveCallback: () => {},
 };
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 34ebb50c3..86b3c94e9 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -15,7 +15,7 @@ import {
   RenderPublishAnalysesPanel,
   SidToPubChem,
   ToggleIndicator,
-  ElStateLabel
+  ElStateLabel,
 } from './RepoCommon';
 import DateInfo from '../components/chemrepo/DateInfo';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
@@ -23,7 +23,6 @@ import MAPanel from '../components/chemrepo/MoleculeArchive';
 import PublicSample from '../components/chemrepo/PublicSample';
 import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
 import UserCommentModal from '../components/chemrepo/UserCommentModal';
-import RepoXvialButton from '../components/common/RepoXvialButton';
 import PublicActions from '../components/actions/PublicActions';
 import Sample from '../components/models/Sample';
 import RepoSegment from './RepoSegment';
@@ -41,7 +40,8 @@ export default class RepoSample extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      expandSA: true, expandSG: ''
+      expandSA: true,
+      expandSG: '',
     };
     this.panelRef = React.createRef();
     this.materialRef = React.createRef();
@@ -51,9 +51,13 @@ export default class RepoSample extends Component {
     this.renderAnalyses = this.renderAnalyses.bind(this);
   }
 
-  componentDidMount() { scrollView(); }
+  componentDidMount() {
+    scrollView();
+  }
 
-  componentDidUpdate() { scrollView(); }
+  componentDidUpdate() {
+    scrollView();
+  }
 
   handleAnalysesLink() {
     this.panelRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -80,11 +84,20 @@ export default class RepoSample extends Component {
     specSample.container = sample.analyses;
     const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
     return orderAnalyses.map((analysis) => {
-      const userInfo = (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
-      const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+      const userInfo =
+        (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
+      const kind = (analysis.extended_metadata['kind'] || '')
+        .split('|')
+        .pop()
+        .trim();
       return (
         <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.props.handleCommentBtn} />
+          <CommentBtn
+            {...this.props}
+            field={`Analysis_${analysis.id}`}
+            orgInfo={kind}
+            onShow={this.props.handleCommentBtn}
+          />
           <RenderPublishAnalysesPanel
             key={analysis.id}
             userInfo={userInfo}
@@ -104,32 +117,62 @@ export default class RepoSample extends Component {
 
   render() {
     const {
-      sample, pubData, tagData, isPublished,
-      isLogin, isReviewer, element
+      sample,
+      pubData,
+      tagData,
+      isPublished,
+      isLogin,
+      isReviewer,
+      element,
     } = this.props;
     const { xvialCom } = element;
     const { expandSA } = this.state;
-// console.log(this.props);
+    // console.log(this.props);
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
 
-    const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
-      ? <span />
-      : <h5><b>Name: </b> {sample.showed_name} </h5>;
+    const iupacUserDefined =
+      sample.showed_name == sample.molecule_iupac ||
+      sample.showed_name == null ? (
+        <span />
+      ) : (
+        <h5>
+          <b>Name: </b> {sample.showed_name}{' '}
+        </h5>
+      );
     const userInfo = sample.pub_info || '';
-    const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
+    const analyses =
+      (sample.analyses &&
+        sample.analyses.children &&
+        sample.analyses.children.length > 0 &&
+        sample.analyses.children[0].children) ||
+      [];
     let embargo = null;
-    let colDoiPrefix = (sample?.doi || '');
-    colDoiPrefix = typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
+    let colDoiPrefix = sample?.doi || '';
+    colDoiPrefix =
+      typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
     colDoiPrefix = colDoiPrefix.split('/')[0];
     if (sample.embargo) {
-      const embargoLink = isPublished ? `/inchikey/collection/${sample.embargo}` : `/embargo/sample/${sample.id}`;
+      const embargoLink = isPublished
+        ? `/inchikey/collection/${sample.embargo}`
+        : `/embargo/sample/${sample.id}`;
       embargo = (
         <span>
-          <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
-          <Button key="embargo-link-btn" bsStyle="link" href={embargoLink} target="_blank" style={{ padding: '0px 0px' }}>
-            <i className="fa fa-database" />&nbsp;&nbsp;{sample.embargo}
+          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
+          &nbsp;
+          <Button
+            key="embargo-link-btn"
+            bsStyle="link"
+            href={embargoLink}
+            target="_blank"
+            style={{ padding: '0px 0px' }}
+          >
+            <i className="fa fa-database" />
+            &nbsp;&nbsp;{sample.embargo}
           </Button>
-          <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`} tooltip="retrieve and copy collection DOI" />
+          <ClipboardCopyBtn
+            text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`}
+            tooltip="retrieve and copy collection DOI"
+          />
         </span>
       );
     }
@@ -137,12 +180,46 @@ export default class RepoSample extends Component {
     return (
       <Jumbotron key={`sample-${sample.id}`}>
         <span className="repo-pub-sample-header">
-          <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} isPublished={isPublished} id={sample.id} type="sample" /></span>&nbsp;
-          <span className="repo-pub-title"><DateInfo isPublished={isPublished} preText="Sample" pubData={pubData} tagData={tagData} /></span>&nbsp;
-          <SidToPubChem sid={sample.sid} />&nbsp;
+          <span className="repo-pub-title">
+            <IconToMyDB
+              isLogin={isLogin}
+              isPublished={isPublished}
+              id={sample.id}
+              type="sample"
+            />
+          </span>
+          &nbsp;
+          <span className="repo-pub-title">
+            <DateInfo
+              isPublished={isPublished}
+              preText="Sample"
+              pubData={pubData}
+              tagData={tagData}
+            />
+          </span>
+          &nbsp;
+          <SidToPubChem sid={sample.sid} />
+          &nbsp;
           <span className="repo-public-user-comment">
-            <PublicCommentModal isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
-            <UserCommentModal isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+            <PublicCommentModal
+              isReviewer={isReviewer}
+              id={sample.id}
+              type="Sample"
+              title={sample.showed_name}
+              userInfo={userInfo}
+              pageType="molecules"
+              pageId={sample.molecule_id}
+            />
+            &nbsp;
+            <UserCommentModal
+              isLogin={isLogin}
+              id={sample.id}
+              type="Sample"
+              title={sample.showed_name}
+              pageType="molecules"
+              pageId={sample.molecule_id}
+            />
+            &nbsp;
           </span>
           {ElStateLabel(sample.embargo)}
         </span>
@@ -151,35 +228,75 @@ export default class RepoSample extends Component {
         <ContributorInfo contributor={sample.contributors} />
         <h5>
           <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
-          <AuthorList creators={sample.creators} affiliationMap={affiliationMap} />
+          <AuthorList
+            creators={sample.creators}
+            affiliationMap={affiliationMap}
+          />
         </h5>
         <AffiliationList
           affiliations={sample.affiliations}
           affiliationMap={affiliationMap}
         />
         <br />
-        <PublicSample {...this.props} embargo={embargo} handleAnalysesLink={this.handleAnalysesLink} handleMaterialLink={this.handleMaterialLink} />
-        <br /><br />
+        <PublicSample
+          {...this.props}
+          embargo={embargo}
+          handleAnalysesLink={this.handleAnalysesLink}
+          handleMaterialLink={this.handleMaterialLink}
+        />
+        <br />
+        <br />
         <div ref={this.materialRef}>
-          <MAPanel isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />&nbsp;
+          <MAPanel
+            isEditable={isReviewer}
+            isLogin={isLogin}
+            allowRequest
+            elementId={sample.id}
+            data={sample.xvial}
+            saveCallback={() => this.updateRepoXvial(sample.molecule_id)}
+            xvialCom={xvialCom}
+          />
+          &nbsp;
         </div>
         <RepoSegment segments={sample.segments} />
         <span className="repo-pub-sample-header">
           <div ref={this.panelRef}>
-            <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'down' : 'right'} />
+            <ToggleIndicator
+              onClick={this.toggleSA}
+              name="Analyses"
+              indicatorStyle={expandSA ? 'down' : 'right'}
+            />
           </div>
-          <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-            {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
+          <span
+            className="label"
+            style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
+          >
+            {AnalysesTypeJoinLabel(
+              ArrayUtils.sortArrByIndex(analyses),
+              'Sample'
+            )}
           </span>
           <LicenseIcon
-            doi={(isPublished ? sample.doi : sample.doi?.full_doi)}
+            doi={isPublished ? sample.doi : sample.doi?.full_doi}
             license={sample.license}
-            hasCoAuthors={(sample.author_ids.length > 1)}
+            hasCoAuthors={sample.author_ids.length > 1}
           />
         </span>
-        <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
+        <Panel
+          style={{ border: 'none' }}
+          id="collapsible-panel-sample-analyses"
+          expanded={expandSA}
+          defaultExpanded={expandSA}
+          onToggle={() => {}}
+        >
           <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+            <Panel.Body
+              style={{
+                fontSize: '90%',
+                backgroundColor: '#f5f5f5',
+                padding: '4',
+              }}
+            >
               {this.renderAnalyses(analyses)}
             </Panel.Body>
           </Panel.Collapse>
@@ -197,12 +314,12 @@ RepoSample.propTypes = {
   canComment: PropTypes.bool,
   handleCommentBtn: PropTypes.func,
   isLogin: PropTypes.bool,
-  isReviewer: PropTypes.bool
+  isReviewer: PropTypes.bool,
 };
 
 RepoSample.defaultProps = {
   canComment: false,
   isLogin: false,
   isReviewer: false,
-  handleCommentBtn: () => { },
+  handleCommentBtn: () => {},
 };

From 70cde4f2994e528b85bf1cf37ccf358b42951938 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 24 May 2023 15:02:06 +0200
Subject: [PATCH 138/258] anchor on publication page

---
 .../src/components/chemrepo/LicenseIcon.js    |  39 +-
 .../src/components/chemrepo/PublicAnchor.js   |  16 +
 app/packs/src/libHome/RepoReactionDetails.js  | 482 +++++++++++++-----
 app/packs/src/libHome/RepoSample.js           |  10 +-
 4 files changed, 401 insertions(+), 146 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/PublicAnchor.js

diff --git a/app/packs/src/components/chemrepo/LicenseIcon.js b/app/packs/src/components/chemrepo/LicenseIcon.js
index 93cb21f9b..8bf2f439f 100644
--- a/app/packs/src/components/chemrepo/LicenseIcon.js
+++ b/app/packs/src/components/chemrepo/LicenseIcon.js
@@ -2,29 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const LicenseIcon = (props) => {
-  const { doi, license, hasCoAuthors = false } = props;
-  const anc = doi?.split('/').pop() || '';
+  const { license, hasCoAuthors = false } = props;
   const presentStyle = { height: '26px' };
   let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+  let presentAlt =
+    'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
   let presentPath = '/images/creative_common/cc-by-sa.svg';
   const cc0Alt = [
     'To the extent possible under law, the',
-    (hasCoAuthors ? 'persons' : 'person'),
+    hasCoAuthors ? 'persons' : 'person',
     'who associated CC0 with this work',
-    (hasCoAuthors ? 'have' : 'has'),
-    'waived all copyright and related or neighboring rights to this work.'
+    hasCoAuthors ? 'have' : 'has',
+    'waived all copyright and related or neighboring rights to this work.',
   ].join(' ');
 
   switch (license) {
     case 'CC BY-SA':
       presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+      presentAlt =
+        'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
       presentPath = '/images/creative_common/cc-by-sa.svg';
       break;
     case 'CC BY':
       presentHref = 'http://creativecommons.org/licenses/by/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
+      presentAlt =
+        'This work is licensed under a Creative Commons Attribution 4.0 International License.';
       presentPath = '/images/creative_common/cc-by.svg';
       break;
     case 'CC0':
@@ -40,13 +42,28 @@ const LicenseIcon = (props) => {
     default:
       break;
   }
-  return presentHref === '' ? null : <a className="repo-public-user-comment" name={anc} id={anc} rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
+  return presentHref === '' ? null : (
+    <a
+      className="repo-public-user-comment"
+      rel="noreferrer noopener"
+      target="_blank"
+      href={presentHref}
+    >
+      <img
+        src={presentPath}
+        style={presentStyle}
+        alt={presentAlt}
+        title={presentAlt}
+      />
+    </a>
+  );
 };
 
 LicenseIcon.propTypes = {
-  doi: PropTypes.string, hasCoAuthors: PropTypes.bool, license: PropTypes.string
+  hasCoAuthors: PropTypes.bool,
+  license: PropTypes.string,
 };
 
-LicenseIcon.defaultProps = { doi: '', hasCoAuthors: false, license: '' };
+LicenseIcon.defaultProps = { hasCoAuthors: false, license: '' };
 
 export default LicenseIcon;
diff --git a/app/packs/src/components/chemrepo/PublicAnchor.js b/app/packs/src/components/chemrepo/PublicAnchor.js
new file mode 100644
index 000000000..d5d231e6c
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicAnchor.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PublicAnchor = (props) => {
+  const { doi, isPublished } = props;
+  if (!isPublished || typeof doi !== 'string') return null;
+  const anchorId = doi?.split('/').pop() || '';
+  return <span id={anchorId}></span>;
+};
+
+PublicAnchor.propTypes = {
+  doi: PropTypes.string.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export default PublicAnchor;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index f045aae73..40c0e1938 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -1,11 +1,5 @@
 import React, { Component } from 'react';
-import {
-  Panel,
-  Row,
-  Col,
-  Button,
-  Jumbotron,
-} from 'react-bootstrap';
+import { Panel, Row, Col, Button, Jumbotron } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { head, filter } from 'lodash';
 import { RepoCommentModal } from 'repo-review-ui';
@@ -30,17 +24,22 @@ import {
   IconToMyDB,
   AnalysesTypeJoinLabel,
   SchemeWord,
-  resizableSvg
+  resizableSvg,
 } from './RepoCommon';
 import LoadingActions from '../components/actions/LoadingActions';
 import PublicActions from '../components/actions/PublicActions';
 import ReviewActions from '../components/actions/ReviewActions';
 import DateInfo from '../components/chemrepo/DateInfo';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import PublicAnchor from '../components/chemrepo/PublicAnchor';
 import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
 import UserCommentModal from '../components/chemrepo/UserCommentModal';
 import QuillViewer from '../components/QuillViewer';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
+import {
+  Citation,
+  literatureContent,
+  RefByUserInfo,
+} from '../components/LiteratureCommon';
 import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
 import Sample from '../components/models/Sample';
@@ -60,7 +59,7 @@ export default class RepoReactionDetails extends Component {
       // btnAction: '',
       showCommentModal: false,
       commentField: '',
-      originInfo: ''
+      originInfo: '',
     };
 
     this.toggleScheme = this.toggleScheme.bind(this);
@@ -133,7 +132,14 @@ export default class RepoReactionDetails extends Component {
 
   handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
-    ReviewActions.reviewPublish(elementId, 'reaction', comment, action, checklist, reviewComments);
+    ReviewActions.reviewPublish(
+      elementId,
+      'reaction',
+      comment,
+      action,
+      checklist,
+      reviewComments
+    );
     // this.setState({ showReviewModal: false });
   }
 
@@ -141,14 +147,14 @@ export default class RepoReactionDetails extends Component {
     this.setState({
       showCommentModal: show,
       commentField: field,
-      originInfo: orgInfo
+      originInfo: orgInfo,
     });
   }
 
   handleSubmitComment(elementId, elementType, field, comment, origInfo) {
     LoadingActions.start();
     const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
+    if (typeof cinfo[field] === 'undefined') {
       cinfo[field] = {};
     }
     cinfo[field].comment = comment;
@@ -164,47 +170,61 @@ export default class RepoReactionDetails extends Component {
   }
 
   reactionInfo(reaction) {
-    const {
-      showScheme, showRinchi, showProp, showTlc
-    } = this.state;
-    const {
-      canComment,
-      review_info,
-      review
-    } = this.props;
+    const { showScheme, showRinchi, showProp, showTlc } = this.state;
+    const { canComment, review_info, review } = this.props;
 
     const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
     const content = reaction.description;
     const additionInfo = reaction.observation;
 
-    const descContent = (content && content.ops && content.ops.length > 0
-      && content.ops[0].insert) ? content.ops[0].insert.trim() : '';
+    const descContent =
+      content && content.ops && content.ops.length > 0 && content.ops[0].insert
+        ? content.ops[0].insert.trim()
+        : '';
     let descQV = (
-      <span><b>Description:</b><QuillViewer value={content} preview />
-      </span>);
+      <span>
+        <b>Description:</b>
+        <QuillViewer value={content} preview />
+      </span>
+    );
     if (descContent === '') descQV = '';
 
-    const addinfoContent = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 &&
-      additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim() : '';
+    const addinfoContent =
+      additionInfo &&
+      additionInfo.ops &&
+      additionInfo.ops.length > 0 &&
+      additionInfo.ops[0].insert
+        ? additionInfo.ops[0].insert.trim()
+        : '';
     let addQV = (
-      <span><b>Additional information for publication and purification details:</b>
+      <span>
+        <b>Additional information for publication and purification details:</b>
         <QuillViewer value={additionInfo} preview />
-      </span>);
+      </span>
+    );
     if (addinfoContent === '') addQV = '';
 
-    const temperature = reaction.temperature ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : '';
+    const temperature = reaction.temperature
+      ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}`
+      : '';
     const duration = CalcDuration(reaction);
     const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
-    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${reaction.rf_value || ''}]; TLC-Description: [${reaction.tlc_description || ''}]`;
+    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${
+      reaction.rf_value || ''
+    }]; TLC-Description: [${reaction.tlc_description || ''}]`;
 
     const bodyAttrs = {
       style: {
         fontSize: '90%',
-        paddingBottom: 'unset'
-      }
+        paddingBottom: 'unset',
+      },
     };
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
+    const schemeOnly =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data &&
+        reaction.publication.taggable_data.scheme_only === true) ||
+      false;
     if (schemeOnly) {
       if (canComment) {
         return (
@@ -246,7 +266,12 @@ export default class RepoReactionDetails extends Component {
           </Row>
           <Row>
             <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={this.handleCommentBtn} />
+              <CommentBtn
+                {...this.props}
+                field="Reaction Table"
+                orgInfo="<Reaction Table>"
+                onShow={this.handleCommentBtn}
+              />
               <ReactionTable
                 reaction={reaction}
                 toggle={this.toggleScheme}
@@ -261,11 +286,21 @@ export default class RepoReactionDetails extends Component {
           <Row>
             <Col sm={12} md={12} lg={12}>
               <div className="desc small-p">
-                <CommentBtn {...this.props} field="Description" orgInfo={descContent} onShow={this.handleCommentBtn} />
+                <CommentBtn
+                  {...this.props}
+                  field="Description"
+                  orgInfo={descContent}
+                  onShow={this.handleCommentBtn}
+                />
                 {descQV}
               </div>
               <div className="desc small-p">
-                <CommentBtn {...this.props} field="Additional information" orgInfo={addinfoContent} onShow={this.handleCommentBtn} />
+                <CommentBtn
+                  {...this.props}
+                  field="Additional information"
+                  orgInfo={addinfoContent}
+                  onShow={this.handleCommentBtn}
+                />
                 {addQV}
               </div>
             </Col>
@@ -282,7 +317,12 @@ export default class RepoReactionDetails extends Component {
           </Row>
           <Row>
             <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Properties" orgInfo={properties} onShow={this.handleCommentBtn} />
+              <CommentBtn
+                {...this.props}
+                field="Properties"
+                orgInfo={properties}
+                onShow={this.handleCommentBtn}
+              />
               <ReactionProperties
                 reaction={reaction}
                 toggle={this.toggleProp}
@@ -293,7 +333,12 @@ export default class RepoReactionDetails extends Component {
           </Row>
           <Row>
             <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="TLC-Control" orgInfo={tlc} onShow={this.handleCommentBtn} />
+              <CommentBtn
+                {...this.props}
+                field="TLC-Control"
+                orgInfo={tlc}
+                onShow={this.handleCommentBtn}
+              />
               <ReactionTlc
                 reaction={reaction}
                 toggle={this.toggleTlc}
@@ -307,23 +352,69 @@ export default class RepoReactionDetails extends Component {
     );
   }
 
-  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false, isReviewer = false, references = []) {
-    if (typeof (container) === 'undefined' || !container) return <span />;
-
-    const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
+  renderAnalysisView(
+    container,
+    type,
+    product = null,
+    idx = -1,
+    isLogin = false,
+    isReviewer = false,
+    references = []
+  ) {
+    if (typeof container === 'undefined' || !container) return <span />;
+
+    const analyses = ArrayUtils.sortArrByIndex(
+      head(filter(container.children, (o) => o.container_type === 'analyses'))
+        .children
+    );
     const show = this.state.showRA[idx] || true;
-    if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
+    if (typeof analyses === 'undefined' || !analyses || analyses.length === 0) {
       return <div />;
     }
-    const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} literatures={references} /> : <span />;
-    const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
+    const pdInfos =
+      (this.props.reaction.infos &&
+        this.props.reaction.infos.pd_infos &&
+        this.props.reaction.infos.pd_infos[product && product.id]) ||
+      '';
+    const productHeader =
+      typeof product !== 'undefined' && product ? (
+        <RenderAnalysisHeader
+          key={`reaction-product-header-${product.id}`}
+          reactionId={this.props.reaction.id}
+          element={product}
+          isPublic={this.props.isPublished}
+          isLogin={isLogin}
+          isReviewer={isReviewer}
+          userInfo={pdInfos}
+          updateRepoXvial={() => this.updateRepoXvial()}
+          xvialCom={product.xvialCom}
+          literatures={references}
+        />
+      ) : (
+        <span />
+      );
+    const specSample =
+      type === 'Sample' && typeof product !== 'undefined' && product
+        ? new Sample(product)
+        : null;
     const analysesView = analyses.map((analysis) => {
-      const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
-      const anaInfo = (this.props.reaction.infos && this.props.reaction.infos.ana_infos && this.props.reaction.infos.ana_infos[analysis.id]) || '';
+      const kind =
+        analysis.extended_metadata &&
+        analysis.extended_metadata.kind &&
+        analysis.extended_metadata['kind'].split('|').pop().trim();
+      const anaInfo =
+        (this.props.reaction.infos &&
+          this.props.reaction.infos.ana_infos &&
+          this.props.reaction.infos.ana_infos[analysis.id]) ||
+        '';
       return (
         <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.handleCommentBtn} />
+          <CommentBtn
+            {...this.props}
+            field={`Analysis_${analysis.id}`}
+            orgInfo={kind}
+            onShow={this.handleCommentBtn}
+          />
           <RenderPublishAnalysesPanel
             key={`${type}_${analysis.id}`}
             userInfo={anaInfo}
@@ -350,7 +441,7 @@ export default class RepoReactionDetails extends Component {
             color: 'white',
             fontSize: 'smaller',
             fontWeight: 'bold',
-            cursor: 'pointer'
+            cursor: 'pointer',
           }}
           onClick={() => this.toggleRA(idx)}
         >
@@ -358,12 +449,27 @@ export default class RepoReactionDetails extends Component {
           <i className={`glyphicon ${show}`} />
           <i className={`fa fa-caret-${show ? 'down' : 'right'}`} />
         </span>
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+        <span
+          className="label"
+          style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
+        >
           {AnalysesTypeJoinLabel(analyses, type)}
         </span>
-        <Panel style={{ border: 'none' }} id={`collapsible_${type}_analyses`} expanded={show} defaultExpanded onToggle={() => { }}>
+        <Panel
+          style={{ border: 'none' }}
+          id={`collapsible_${type}_analyses`}
+          expanded={show}
+          defaultExpanded
+          onToggle={() => {}}
+        >
           <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+            <Panel.Body
+              style={{
+                fontSize: '90%',
+                backgroundColor: '#f5f5f5',
+                padding: '4',
+              }}
+            >
               {productHeader}
               {analysesView}
             </Panel.Body>
@@ -373,14 +479,32 @@ export default class RepoReactionDetails extends Component {
     );
   }
 
-  renderProductAnalysisView(products, isLogin = false, isReviewer = false, references = []) {
-    if (typeof (products) === 'undefined' || !products || products.length === 0) {
+  renderProductAnalysisView(
+    products,
+    isLogin = false,
+    isReviewer = false,
+    references = []
+  ) {
+    if (typeof products === 'undefined' || !products || products.length === 0) {
       return <span />;
     }
-    const prdReferences = (_sid, _references) => (_references ? _references.filter(r => r.element_type === 'Sample' && r.element_id === _sid) : []);
+    const prdReferences = (_sid, _references) =>
+      _references
+        ? _references.filter(
+            (r) => r.element_type === 'Sample' && r.element_id === _sid
+          )
+        : [];
     return products.map((product, idx) => (
       <div key={`product-${product.id}`}>
-        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin, isReviewer, prdReferences(product.id, references))}
+        {this.renderAnalysisView(
+          product.container,
+          'Sample',
+          product,
+          idx,
+          isLogin,
+          isReviewer,
+          prdReferences(product.id, references)
+        )}
       </div>
     ));
   }
@@ -396,24 +520,32 @@ export default class RepoReactionDetails extends Component {
       canClose,
     } = this.props;
     let { buttons } = this.props;
-    if (typeof (reaction) === 'undefined' || !reaction) {
+    if (typeof reaction === 'undefined' || !reaction) {
       return <div />;
     }
 
-    const taggData = (reaction && reaction.publication && reaction.publication.taggable_data) || {};
+    const taggData =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data) ||
+      {};
     const pubData = (reaction && reaction.publication) || {};
     const doi = (reaction && reaction.doi) || {};
 
     const aId = [].concat.apply([], taggData.affiliation_ids);
     const affiliationMap = {};
     const { literatures } = reaction;
-    const references = literatures ? literatures.map(lit => (
-      <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
-        <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
+    const references = literatures
+      ? literatures.map((lit) => (
+          <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+            <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />
+            &nbsp;
+            <i className={`icon-${lit.element_type.toLowerCase()}`} />
+            &nbsp;
+            <Citation key={lit.id} literature={lit} />
+          </li>
+        ))
+      : [];
     const refArray = [];
     let referencesText = '';
     if (literatures) {
@@ -433,72 +565,140 @@ export default class RepoReactionDetails extends Component {
     });
     const license = taggData.license || 'CC BY-SA';
 
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-
-    let showDOI = <Doi type="reaction" id={reaction.id} doi={isPublished ? taggData.doi : doi} isPublished={isPublished} />;
+    const schemeOnly =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data &&
+        reaction.publication.taggable_data.scheme_only === true) ||
+      false;
+
+    let showDOI = (
+      <Doi
+        type="reaction"
+        id={reaction.id}
+        doi={isPublished ? taggData.doi : doi}
+        isPublished={isPublished}
+      />
+    );
     if (schemeOnly) {
       buttons = ['Decline', 'Comments', 'Accept'];
       showDOI = '';
     }
 
-
-    if (review_info?.groupleader === true && review_info?.preapproved !== true) {
+    if (
+      review_info?.groupleader === true &&
+      review_info?.preapproved !== true
+    ) {
       buttons = ['Comments', 'Review', 'Approve'];
     }
 
-    const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
-    const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
+    const idyLogin =
+      typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
+    const idyReview =
+      typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
     const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
 
-    let embargo = (<span />);
-    const colDoiPrefix = isPublished ? taggData.doi?.split('/')[0] : doi?.full_doi?.split('/')[0];
+    let embargo = <span />;
+    const colDoiPrefix = isPublished
+      ? taggData.doi?.split('/')[0]
+      : doi?.full_doi?.split('/')[0];
     if (reaction.embargo) {
-      const embargoLink = isPublished ? `/inchikey/collection/${reaction.embargo}` : `/embargo/reaction/${reaction.id}`;
+      const embargoLink = isPublished
+        ? `/inchikey/collection/${reaction.embargo}`
+        : `/embargo/reaction/${reaction.id}`;
       embargo = (
         <span>
-          <b>Access to the DOI and metadata for the whole data collection: </b> &nbsp;
-          <Button key="embargo-link-btn" bsStyle="link" href={embargoLink} target="_blank" style={{ padding: '0px 0px' }}>
-            <i className="fa fa-database" />&nbsp;&nbsp;{reaction.embargo}
+          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
+          &nbsp;
+          <Button
+            key="embargo-link-btn"
+            bsStyle="link"
+            href={embargoLink}
+            target="_blank"
+            style={{ padding: '0px 0px' }}
+          >
+            <i className="fa fa-database" />
+            &nbsp;&nbsp;{reaction.embargo}
           </Button>
-          <ClipboardCopyBtn text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`} tooltip="retrieve and copy collection DOI" />
+          <ClipboardCopyBtn
+            text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`}
+            tooltip="retrieve and copy collection DOI"
+          />
         </span>
       );
     }
     return (
       <div style={{ border: 'none' }}>
-        <div >
+        <div>
           <Jumbotron key={`reaction-${reaction.id}`}>
-            {
-              canComment ?
-                <RepoReviewButtonBar
-                  element={{ id: reaction.id, elementType: 'Reaction' }}
-                  buttons={buttons}
-                  buttonFunc={this.handleReviewBtn}
-                  review_info={review_info}
-                  showComment={showComment}
-                  taggData={taggData}
-                  schemeOnly={schemeOnly}
-                  currComment={(review?.history && review?.history.length > 0 && review?.history.slice(-1).pop()) || {}}
-                /> : ''
-            }
+            <PublicAnchor doi={taggData.doi} isPublished={isPublished} />
+            {canComment ? (
+              <RepoReviewButtonBar
+                element={{ id: reaction.id, elementType: 'Reaction' }}
+                buttons={buttons}
+                buttonFunc={this.handleReviewBtn}
+                review_info={review_info}
+                showComment={showComment}
+                taggData={taggData}
+                schemeOnly={schemeOnly}
+                currComment={
+                  (review?.history &&
+                    review?.history.length > 0 &&
+                    review?.history.slice(-1).pop()) ||
+                  {}
+                }
+              />
+            ) : (
+              ''
+            )}
             {canClose ? <ClosePanel element={reaction} /> : ''}
             <h4>
-              <IconToMyDB isLogin={idyLogin} isPublished={isPublished} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
-              <DateInfo isPublished={isPublished} preText="Reaction" pubData={pubData} tagData={taggData} />&nbsp;
+              <IconToMyDB
+                isLogin={idyLogin}
+                isPublished={isPublished}
+                id={reaction.id}
+                type="reaction"
+              />
+              {schemeOnly ? <SchemeWord /> : ''}&nbsp;
+              <DateInfo
+                isPublished={isPublished}
+                preText="Reaction"
+                pubData={pubData}
+                tagData={taggData}
+              />
+              &nbsp;
               <LicenseIcon
-                doi={(isPublished ? taggData.doi : doi.full_doi)}
                 license={license}
-                hasCoAuthors={(taggData.author_ids && (taggData.author_ids.length > 1))}
+                hasCoAuthors={
+                  taggData.author_ids && taggData.author_ids.length > 1
+                }
+              />
+              <PublicCommentModal
+                isReviewer={idyReview}
+                id={reaction.id}
+                type="Reaction"
+                title={`Reaction, CRR-${pubData.id}`}
+                userInfo={userInfo}
+              />
+              &nbsp;
+              <UserCommentModal
+                isLogin={idyLogin}
+                id={reaction.id}
+                type="Reaction"
+                title={`Reaction, CRR-${pubData.id}`}
               />
-              <PublicCommentModal isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
-              <UserCommentModal isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
             </h4>
             <br />
-            <ContributorInfo contributor={taggData.contributors} showHelp={schemeOnly} />
+            <ContributorInfo
+              contributor={taggData.contributors}
+              showHelp={schemeOnly}
+            />
             <h5>
               <b>{AuthorTitle(taggData.author_ids)} </b>
-              <AuthorList creators={taggData.creators} affiliationMap={affiliationMap} />
+              <AuthorList
+                creators={taggData.creators}
+                affiliationMap={affiliationMap}
+              />
             </h5>
             <AffiliationList
               affiliations={taggData.affiliations}
@@ -508,37 +708,59 @@ export default class RepoReactionDetails extends Component {
             <ChemotionId id={pubData.id} type="reaction" />
             {embargo}
             <h5>
-              <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
-              <b>Reference{references.length > 1 ? 's' : null} in the Literature: </b>
+              <CommentBtn
+                {...this.props}
+                field="Reference"
+                orgInfo={referencesText}
+                onShow={this.handleCommentBtn}
+              />
+              <b>
+                Reference{references.length > 1 ? 's' : null} in the Literature:{' '}
+              </b>
               <ul style={{ listStyle: 'none' }}>{references}</ul>
             </h5>
             <br />
-            <h5>
-              {this.reactionInfo(reaction)}
-            </h5>
+            <h5>{this.reactionInfo(reaction)}</h5>
             <RepoSegment segments={reaction.segments} />
-            {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction', null, -1, idyLogin, idyReview)}
-            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview, literatures)}
+            {schemeOnly
+              ? ''
+              : this.renderAnalysisView(
+                  reaction.container,
+                  'Reaction',
+                  null,
+                  -1,
+                  idyLogin,
+                  idyReview
+                )}
+            {schemeOnly
+              ? ''
+              : this.renderProductAnalysisView(
+                  reaction.products,
+                  idyLogin,
+                  idyReview,
+                  literatures
+                )}
           </Jumbotron>
         </div>
-        {
-          canComment ? (
-            <div>
-              <RepoCommentModal
-                show={this.state.showCommentModal}
-                elementId={reaction.id}
-                elementType="reaction"
-                field={this.state.commentField}
-                orgInfo={this.state.originInfo}
-                review={this.props.review}
-                review_info={review_info}
-                onUpdate={this.handleSubmitComment}
-                onHide={() => this.setState({ showCommentModal: false })}
-              />
-            </div>
-          ) : ''
-        }
-      </div>);
+        {canComment ? (
+          <div>
+            <RepoCommentModal
+              show={this.state.showCommentModal}
+              elementId={reaction.id}
+              elementType="reaction"
+              field={this.state.commentField}
+              orgInfo={this.state.originInfo}
+              review={this.props.review}
+              review_info={review_info}
+              onUpdate={this.handleSubmitComment}
+              onHide={() => this.setState({ showCommentModal: false })}
+            />
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    );
   }
 }
 
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 86b3c94e9..45739c2f3 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -20,12 +20,13 @@ import {
 import DateInfo from '../components/chemrepo/DateInfo';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import MAPanel from '../components/chemrepo/MoleculeArchive';
+import PublicActions from '../components/actions/PublicActions';
+import PublicAnchor from '../components/chemrepo/PublicAnchor';
 import PublicSample from '../components/chemrepo/PublicSample';
 import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
-import UserCommentModal from '../components/chemrepo/UserCommentModal';
-import PublicActions from '../components/actions/PublicActions';
-import Sample from '../components/models/Sample';
 import RepoSegment from './RepoSegment';
+import Sample from '../components/models/Sample';
+import UserCommentModal from '../components/chemrepo/UserCommentModal';
 
 const scrollView = () => {
   const anchor = window.location.hash.split('#')[1];
@@ -127,7 +128,6 @@ export default class RepoSample extends Component {
     } = this.props;
     const { xvialCom } = element;
     const { expandSA } = this.state;
-    // console.log(this.props);
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
 
     const iupacUserDefined =
@@ -179,6 +179,7 @@ export default class RepoSample extends Component {
 
     return (
       <Jumbotron key={`sample-${sample.id}`}>
+        <PublicAnchor doi={sample.doi} isPublished={isPublished} />
         <span className="repo-pub-sample-header">
           <span className="repo-pub-title">
             <IconToMyDB
@@ -277,7 +278,6 @@ export default class RepoSample extends Component {
             )}
           </span>
           <LicenseIcon
-            doi={isPublished ? sample.doi : sample.doi?.full_doi}
             license={sample.license}
             hasCoAuthors={sample.author_ids.length > 1}
           />

From 27853b6d6f477360d8ba72719a9d139351a66167 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 24 May 2023 19:39:16 +0200
Subject: [PATCH 139/258] add solvent to sample metadata

---
 app/publish/datacite_metadata_sample.html.erb | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index e3463750c..b52d11fbe 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -63,7 +63,10 @@
       This is a physical chemical entity[CHEBI_24431] which was not directly associated with a molecule[CHEBI_25367].
       The physical chemical entity[CHEBI_24431] can be described by the molecular mass descriptor [cheminf_000088]: <%= "#{element.molecular_mass}" %>.
       <% end %>
-      The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES descriptor[cheminf_000007]: <%= element.molecule_cano_smiles %>
+      The physical chemical entity[CHEBI_24431] has a component solvent[CHEBI_46787] which is described by the canonical SMILES descriptor[cheminf_000007]:
+      <% element.solvent&.each do |solvent| %>
+        <%= solvent['smiles'] %>
+      <% end %>
       The physical chemical entity[CHEBI_24431] has the following Sample ID as registered in the research data repository chemotion (www.chemotion-repository.net, https://doi.org/10.25504/FAIRsharing.iagXcR): CRS-<%= "#{pub.id}" %>
 
       The physical chemical entity[CHEBI_24431] can be described by the physical descriptors [CHEMINF_000025]:
@@ -72,7 +75,7 @@
       Refractive index descriptor[CHEMINF_000253]:
 
       The physical chemical entity[CHEBI_24431] can be further described by the following assays[OBI:0000070][CHMO:0001133]:
-      <% element.analyses.each do |analysis| %>
+      <% element.analyses&.each do |analysis| %>
         <%= (analysis.extended_metadata['kind'] || '') %>
       <% end %>
       The physical chemical entity[CHEBI_24431] was deposited to the Molecule Archive of the Karlsruhe Insitute of Technology (KIT) with the following Sample ID: <%= cust_sample[:x_id] %>

From 8ca56fe409ae98cbc7d39c542570ccabeda32747 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 24 May 2023 20:30:16 +0200
Subject: [PATCH 140/258] published year

---
 app/publish/datacite_metadata_analysis.html.erb           | 2 +-
 app/publish/datacite_metadata_collection.html.erb         | 2 +-
 app/publish/datacite_metadata_container.html.erb          | 2 +-
 app/publish/datacite_metadata_reaction.html.erb           | 2 +-
 app/publish/datacite_metadata_reaction_container.html.erb | 2 +-
 app/publish/datacite_metadata_sample.html.erb             | 2 +-
 app/publish/datacite_metadata_sample_container.html.erb   | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/publish/datacite_metadata_analysis.html.erb b/app/publish/datacite_metadata_analysis.html.erb
index 00960a47b..052d86df2 100644
--- a/app/publish/datacite_metadata_analysis.html.erb
+++ b/app/publish/datacite_metadata_analysis.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_collection.html.erb b/app/publish/datacite_metadata_collection.html.erb
index f38567624..92e267f15 100644
--- a/app/publish/datacite_metadata_collection.html.erb
+++ b/app/publish/datacite_metadata_collection.html.erb
@@ -21,7 +21,7 @@
     <title xml:lang="en-US"><%= pub_tag['label'] %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_container.html.erb b/app/publish/datacite_metadata_container.html.erb
index d548abde4..8bf750d46 100644
--- a/app/publish/datacite_metadata_container.html.erb
+++ b/app/publish/datacite_metadata_container.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %>)</title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_reaction.html.erb b/app/publish/datacite_metadata_reaction.html.erb
index 23e199dea..7e587128d 100644
--- a/app/publish/datacite_metadata_reaction.html.erb
+++ b/app/publish/datacite_metadata_reaction.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= element.rinchi_short_key %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_reaction_container.html.erb b/app/publish/datacite_metadata_reaction_container.html.erb
index 21a0248dd..beed4af00 100644
--- a/app/publish/datacite_metadata_reaction_container.html.erb
+++ b/app/publish/datacite_metadata_reaction_container.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= parent_element.doi.inchikey %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_sample.html.erb b/app/publish/datacite_metadata_sample.html.erb
index b52d11fbe..f26983ad2 100644
--- a/app/publish/datacite_metadata_sample.html.erb
+++ b/app/publish/datacite_metadata_sample.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= element.molecule.inchistring %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">
diff --git a/app/publish/datacite_metadata_sample_container.html.erb b/app/publish/datacite_metadata_sample_container.html.erb
index 39d0d1288..6ea0510e8 100644
--- a/app/publish/datacite_metadata_sample_container.html.erb
+++ b/app/publish/datacite_metadata_sample_container.html.erb
@@ -22,7 +22,7 @@
     <title titleType="AlternativeTitle"><%= parent_element.molecule.inchistring %></title>
   </titles>
   <publisher>chemotion-repository</publisher>
-  <publicationYear><%= Time.now.strftime("%Y") %></publicationYear>
+  <publicationYear><%= pub.published_at&.strftime("%Y") || Time.now.strftime("%Y") %></publicationYear>
   <% if pub_tag['contributors'].present? %>
   <contributors>
     <contributor contributorType="Researcher">

From 673e9ccd045426a22ad0dfff4eef6c7e5d707c49 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 24 May 2023 16:52:55 +0200
Subject: [PATCH 141/258] linked-data

---
 app/api/chemotion/public_api.rb        |  16 ++
 app/models/concerns/metadata_jsonld.rb | 230 +++++++++++++++++++++++++
 app/models/publication.rb              |   2 +-
 app/packs/src/libHome/RepoCommon.js    |  27 +++
 4 files changed, 274 insertions(+), 1 deletion(-)
 create mode 100644 app/models/concerns/metadata_jsonld.rb

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 1b12469d7..aa20f7e46 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -827,6 +827,22 @@ def query_embargo(name)
           env['api.format'] = :binary
           @publication.metadata_xml
         end
+
+        desc "Download JSON-Link Data"
+        get :download_json do
+          el_type = params['type'] == "container" ? "analysis" : params['type']
+          filename = URI.escape("JSON-LD_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.json")
+          content_type('application/json')
+          header['Content-Disposition'] = "attachment; filename=" + filename
+          env['api.format'] = :binary
+          if el_type == "sample"
+            @publication.json_ld_sample
+          elsif el_type == "reaction"
+            @publication.json_ld_reaction
+          elsif el_type == "analysis"
+            @publication.json_ld_container
+          end
+        end
       end
 
       resource :published_statics do
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
new file mode 100644
index 000000000..47cf53ae3
--- /dev/null
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -0,0 +1,230 @@
+# frozen_string_literal: true
+require 'json'
+require 'open-uri'
+require 'nokogiri'
+
+module MetadataJsonld
+  extend ActiveSupport::Concern
+
+  def json_ld_sample(pub = self)
+    # metadata_xml
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'ChemicalSubstance'
+    json['@id'] = "https://doi.org/#{pub.doi.full_doi}"
+    json['identifier'] = "CRS-#{pub.id}"
+    json['url'] = "https://www.chemotion-repository.net/inchikey/#{pub.doi.suffix}"
+    json['name'] = pub.element.molecule_name&.name
+    json['alternateName'] = pub.element.molecule.inchistring
+    # json['image'] = element.sample_svg_file
+    json['image'] = 'https://www.chemotion-repository.net/images/samples/' + pub.element.sample_svg_file
+    json['description'] = json_ld_description(pub.element.description)
+    #json['author'] = json_ld_authors(pub.taggable_data)
+    json['hasBioChemEntityPart'] = json_ld_moelcule_entity(pub)
+    json['subjectOf'] = json_ld_subjectOf(pub)
+    #json_object = JSON.parse(json)
+    #JSON.pretty_generate(json_object)
+    json
+    # formatted_json = JSON.pretty_generate(json)
+    # formatted_json
+  end
+
+
+  def json_ld_reaction
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'CreativeWork'
+    json['@id'] = "https://doi.org/#{doi.full_doi}"
+    json['identifier'] = "CRR-#{id}"
+    json['url'] = "https://www.chemotion-repository.net/inchikey/#{doi.suffix}"
+    json['additionalType'] = 'Reaction'
+    json['name'] = element.rinchi_short_key
+    json['creator'] = json_ld_authors(taggable_data)
+    json['description'] = json_ld_description(element.description)
+    json['license'] = rights_data[:rightsURI]
+    json['datePublished'] = published_at&.strftime('%Y-%m-%d')
+    json['dateCreated'] = created_at&.strftime('%Y-%m-%d')
+    json['publisher'] = json_ld_publisher
+    json['provider'] = json_ld_publisher
+    json['keywords'] = 'chemical reaction: structures conditions'
+    json['citation'] = json_ld_citations(element.literatures, element.id)
+    json['subjectOf'] = json_ld_reaction_has_part
+    json
+  end
+
+  def json_ld_embargo
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'Study'
+    # json['startDate'] = embargo_start_date&.strftime('%Y-%m-%d')
+    json
+  end
+
+  def json_ld_lab_protocol
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'LabProtocol'
+    json['@id'] = "https://doi.org/#{doi.full_doi}"
+    json
+  end
+
+  def json_ld_reaction_has_part
+    json = []
+    children&.each do |pub|
+      json.push(json_ld_sample(pub)) if pub.element_type == 'Sample'
+      json.push(json_ld_analysis(pub)) if pub.element_type == 'Container'
+    end
+    json
+  end
+
+  def json_ld_reaction_has_part_product
+  end
+
+  def json_ld_description(desc)
+    REXML::Text.new(Nokogiri::HTML( Chemotion::QuillToHtml.new.convert(desc.to_json)).text, false, nil, false).to_s
+    #persit_datacite_metadata_xml! unless metadata_xml.present?
+    #xml_data = Nokogiri::XML(metadata_xml)
+    #desc = xml_data.search('description')&.text&.strip
+    #desc
+  end
+
+  def json_ld_container
+    json_ld_analysis
+  end
+
+
+  def json_ld_subjectOf(pub = self)
+    arr = []
+    arr.push(json_ld_creative_work(pub))
+    pub.children&.each do |ana|
+      arr.push(json_ld_analysis(ana))
+    end
+    arr
+  end
+
+  def json_ld_analysis(pub = self)
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'Dataset'
+    json['@id'] = "https://doi.org/#{pub.doi.full_doi}"
+    json['identifier'] = "CRD-#{pub.id}"
+    json['url'] = "https://www.chemotion-repository.net/inchikey/#{pub.doi.suffix}"
+    json['name'] = pub.element.extended_metadata['kind'] || ''
+    json['creator'] = json_ld_authors(pub.taggable_data)
+    json['description'] = json_ld_analysis_description(pub)
+    json
+  end
+
+  def json_ld_analysis_description(pub)
+    #xml_data = Nokogiri::XML(metadata_xml)
+    #desc = xml_data.search('description')&.text&.strip
+    #desc
+    element = pub.element
+    kind = 'dataset for ' + (element.extended_metadata['kind'] || '')&.split('|').pop + '\n'
+    desc = element.extended_metadata['description'] || '' + '\n'
+    content = REXML::Text.new(Nokogiri::HTML( Chemotion::QuillToHtml.new.convert(element.extended_metadata['content'] || '')).text, false, nil, false).to_s
+
+    kind + desc + content
+  end
+
+  def json_ld_creative_work(pub = self)
+    json = {}
+    json['@type'] = 'CreativeWork'
+    json['@id'] = "https://doi.org/#{doi.full_doi}"
+    json['publisher'] = json_ld_publisher
+
+    json['dateCreated'] = pub.published_at&.strftime('%Y-%m-%d')
+    json['datePublished'] = pub.published_at&.strftime('%Y-%m-%d')
+    json['creator'] = json_ld_authors(pub.taggable_data)
+    json['contributor'] = json_ld_contributor(pub.taggable_data["contributors"])
+    json['citation'] = json_ld_citations(pub.element.literatures, pub.element.id)
+    json
+  end
+
+  def json_ld_citations(literatures, id)
+    json = []
+    literatures.each do |lit|
+      json.push(json_ld_citation(lit, id))
+    end
+    json
+  end
+
+  def json_ld_citation(lit, id)
+    json = {}
+    json['@type'] = 'CreativeWork'
+    bib = lit[:refs] && lit[:refs]['bibtex']
+    bb = DataCite::LiteraturePaser.parse_bibtex!(bib, id)
+    bb = DataCite::LiteraturePaser.get_metadata(bb, lit[:doi], id) unless bb.class == BibTeX::Entry
+    dc_lit = DataCite::LiteraturePaser.report_hash(lit, bb) if bb.class == BibTeX::Entry
+    json['name'] = dc_lit[:title]
+    json['author'] = dc_lit[:author]
+    json['url'] = dc_lit[:url]
+    json
+  end
+
+  def json_ld_publisher
+    json = {}
+    json['@type'] = 'Organization'
+    json['name'] = 'chemotion-repository'
+    json
+  end
+
+
+  def json_ld_authors(taggable_data)
+    creators = taggable_data["creators"] || []
+    arr = []
+    creators.each do |author|
+      user = User.find(author["id"])
+      json = {}
+      json['@type'] = 'Person'
+      json['name'] = author['name']
+      json['email'] = user&.email
+      json['familyName'] = author["familyName"]
+      json['givenName'] = author["givenName"]
+      json['affiliation'] = json_ld_affiliation(author['affiliationIds']&.first, taggable_data)
+      arr.push(json)
+    end
+    arr
+  end
+
+  def json_ld_contributor(contributor)
+    user = User.find(contributor["id"])
+    json = {}
+    json['@type'] = 'Person'
+    json['name'] = contributor['name']
+    json['email'] = user&.email
+    json['familyName'] = contributor["familyName"]
+    json['givenName'] = contributor["givenName"]
+    # json['affiliation'] = json_ld_affiliation(author['affiliationIds']&.first)
+    json
+  end
+
+  def json_ld_affiliation(aff_id, taggable_data)
+    json = {}
+    json['@type'] = 'Organization'
+    json['name'] = taggable_data['affiliations'][aff_id.to_s]
+    json
+  end
+
+  def json_ld_molecular_weight(mol)
+    json ={}
+    json['@type'] = 'QuantitativeValue'
+    json['value'] = mol.molecular_weight
+    json['unitCode'] = 'g/mol'
+    json
+  end
+
+  def json_ld_moelcule_entity(pub = self)
+    mol = pub.element.molecule
+    json = {}
+    json['@type'] = 'MolecularEntity'
+    json['smiles'] = mol.cano_smiles
+    json['inChIKey'] = mol.inchikey
+    json['inChI'] = mol.inchistring
+    json['name'] = pub.element.molecule_name&.name
+    json['molecularFormula'] = mol.sum_formular
+    json['molecularWeight'] = json_ld_molecular_weight(mol)
+    json['iupacName'] = mol.iupac_name
+    json
+  end
+end
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 043a8fc53..0a877dc6b 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -28,7 +28,6 @@
 #  index_publications_on_ancestry  (ancestry)
 #  publications_element_idx        (element_type,element_id,deleted_at)
 #
-
 class Publication < ActiveRecord::Base
   class Net::FTP
     def puttextcontent(content, remotefile, &block)
@@ -42,6 +41,7 @@ def puttextcontent(content, remotefile, &block)
   end
 
   acts_as_paranoid
+  include MetadataJsonld
   has_ancestry
   belongs_to :element, polymorphic: true
   belongs_to :original_element, polymorphic: true, optional: true
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index bce163fc1..2378f7c8c 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -267,6 +267,27 @@ const DownloadMetadataBtn = (l) => {
   );
 };
 
+
+const DownloadJsonBtn = (l) => {
+  const contentUrl = `/api/v1/public/metadata/download_json?type=${l.type.toLowerCase()}&id=${l.id}`;
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download JSON-LD</Tooltip>}
+    >
+      <Button
+        style={{ backgroundColor: 'grey', color:'white', marginLeft: '5px' }}
+        bsSize="xsmall"
+        onClick={() => Utils.downloadFile({
+          contents: contentUrl
+        })}
+      >
+        JSON-LD
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
 const DownloadDOICsv = (e, a) => {
   const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
   const dois = [];
@@ -1010,6 +1031,7 @@ const RenderAnalysisHeader = (props) => {
                   </Button>
                   <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
                   <DownloadMetadataBtn type="sample" id={element.id} />
+                  <DownloadJsonBtn type="sample" id={element.id} />
                 </span>
               )
               :
@@ -1676,6 +1698,7 @@ const AnalysisHeaderSample = ({ sample, sampleType }) => {
           </Button>
           <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
           <DownloadMetadataBtn type="sample" id={sample.id} />
+          <DownloadJsonBtn type="sample" id={sample.id} />
         </Col>
       </Row>
     </div>
@@ -1713,6 +1736,7 @@ class RenderPublishAnalysesPanel extends Component {
         </Button>
         <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
         <DownloadMetadataBtn type="container" id={analysis.id} />
+        <DownloadJsonBtn type="container" id={analysis.id} />
       </div>
     );
 
@@ -1836,6 +1860,7 @@ class RenderPublishAnalyses extends Component {
               </Button>
               <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
               <DownloadMetadataBtn type="container" id={analysis.id} />
+              <DownloadJsonBtn type="container" id={analysis.id} />
             </div>
             <div className="sub-title" inline="true">
               <b>Reaction ID: </b>
@@ -2276,6 +2301,7 @@ const Doi = (props) => {
         </Button>
         <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
         <DownloadMetadataBtn type={type} id={id} />
+        <DownloadJsonBtn type={type} id={id} />
       </span>
     );
   } else {
@@ -2324,6 +2350,7 @@ export {
   Doi,
   DownloadDOICsv,
   DownloadMetadataBtn,
+  DownloadJsonBtn,
   EditorTips,
   ElementIcon,
   ElStateLabel,

From 453ebbbaf8386ffc70c2c2e35e33e41cd88e65ec Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 26 May 2023 10:56:57 +0200
Subject: [PATCH 142/258] add original id to compound list

---
 app/packs/src/components/chemrepo/ma/MAGrid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/chemrepo/ma/MAGrid.js b/app/packs/src/components/chemrepo/ma/MAGrid.js
index b161fb2b6..51e2377b6 100644
--- a/app/packs/src/components/chemrepo/ma/MAGrid.js
+++ b/app/packs/src/components/chemrepo/ma/MAGrid.js
@@ -8,7 +8,8 @@ const MAGrid = (props) => {
   const [rowData] = useState(xvialCompounds.data || []);
 
   const columnDefs = [
-    { headerName: 'X-Vial', field: 'x_data.xid' },
+    { headerName: 'X-Vial', field: 'x_data.xid', width: 100 },
+    { headerName: 'Name of origin Sample', field: 'x_data.origin_id' },
     { headerName: 'Provided by', field: 'x_data.provided_by' },
     {
       headerName: 'Group',
@@ -16,7 +17,6 @@ const MAGrid = (props) => {
       valueGetter: 'data.x_data.group || "Stefan Bräse Group"',
     },
     { headerName: 'Short label of Sample', field: 'x_short_label' },
-    { headerName: 'Created at', field: 'x_created_at' },
   ];
 
   const getRowStyle = (params) => {

From fe34ca8fbc2b83373a525fb48d07a81283b5d4a4 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 2 Jun 2023 09:20:00 +0200
Subject: [PATCH 143/258] linked data api

---
 app/api/chemotion/public_api.rb        | 61 ++++++++++++-----
 app/models/concerns/metadata_jsonld.rb | 91 +++++++++++++++++++-------
 config/initializers/swagger.rb         |  6 +-
 3 files changed, 115 insertions(+), 43 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index aa20f7e46..0b3aef58d 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -806,22 +806,54 @@ def query_embargo(name)
       end
 
       resource :metadata do
+        desc "batch download metadata"
+        params do
+          requires :type, type: String, desc: 'Type', values: %w[Sample Reaction Container Collection]
+          requires :offset, type: Integer, desc: 'Offset', default: 0
+          requires :limit, type: Integer, desc: 'Limit', default: 100
+          optional :date_from, type: String, desc: 'Published date from'
+          optional :date_to, type: String, desc: 'Published date to'
+        end
+        get :publications do
+          service_url = Rails.env.production? ? 'https://www.chemotion-repository.net' : 'http://localhost:3000'
+          api_url = '/api/v1/public/metadata/download_json?inchikey='
+
+          result = declared(params, include_missing: false)
+          list = []
+          limit = params[:limit] - params[:offset] > 1000 ? params[:offset] + 1000 : params[:limit]
+          scope = Publication.where(element_type: params[:type])
+          scope = scope.where('published_at >= ?', params[:date_from]) if params[:date_from].present?
+          scope = scope.where('published_at <= ?', params[:date_to]) if params[:date_to].present?
+          publications = scope.order(:published_at).offset(params[:offset]).limit(limit)
+          publications.map do |publication|
+            inchikey = publication&.doi&.suffix
+            list.push("#{service_url}#{api_url}#{inchikey}") if inchikey.present?
+          end
+          result[:publications] = list
+          result[:limit] = limit
+          result
+        end
+
         desc "metadata of publication"
         params do
-          requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction container collection]
+          optional :id, type: Integer, desc: "Id"
+          optional :type, type: String, desc: "Type", values: %w[sample reaction container collection]
+          optional :inchikey, type: String, desc: "inchikey"
         end
         after_validation do
-          @publication = Publication.find_by(
-            element_type: params['type'].classify,
-            element_id: params['id']
-          )
-          error!('404 Publication not found', 404) unless @publication && @publication.state.include?("completed")
+          @type = params['type']&.classify
+          @publication = Publication.find_by(element_type: @type, element_id: params['id'], state: 'completed') if params['id'].present?
+          if params['inchikey'].present? && @publication.nil?
+            doi = Doi.find_by(suffix: params['inchikey'])
+            @publication = Publication.find_by(doi_id: doi.id, state: 'completed') if doi.present?
+            @type = @publication&.element_type
+          end
+          @type = @type == "Container" ? "Analysis" : @type
+          error!('404 Publication not found', 404) unless @publication.present?
         end
         desc "Download metadata_xml"
         get :download do
-          el_type = params['type'] == "container" ? "analysis" : params['type']
-          filename = URI.escape("metadata_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
+          filename = URI.escape("metadata_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
           content_type('application/octet-stream')
           header['Content-Disposition'] = "attachment; filename=" + filename
           env['api.format'] = :binary
@@ -830,18 +862,11 @@ def query_embargo(name)
 
         desc "Download JSON-Link Data"
         get :download_json do
-          el_type = params['type'] == "container" ? "analysis" : params['type']
-          filename = URI.escape("JSON-LD_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.json")
+          filename = URI.escape("JSON-LD_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.json")
           content_type('application/json')
           header['Content-Disposition'] = "attachment; filename=" + filename
           env['api.format'] = :binary
-          if el_type == "sample"
-            @publication.json_ld_sample
-          elsif el_type == "reaction"
-            @publication.json_ld_reaction
-          elsif el_type == "analysis"
-            @publication.json_ld_container
-          end
+          @publication.json_ld
         end
       end
 
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 47cf53ae3..4602f8cff 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -6,6 +6,64 @@
 module MetadataJsonld
   extend ActiveSupport::Concern
 
+  def json_ld
+    if element_type == 'Sample'
+      json_ld_sample_root
+    elsif element_type == 'Reaction'
+      json_ld_reaction
+    elsif element_type == 'Container'
+      json_ld_container
+    end
+  end
+
+  def json_ld_sample_root(pub = self)
+    json = json_ld_study
+    json['about'] = [json_ld_sample]
+    json
+  end
+
+  def json_ld_study(pub = self)
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'Study'
+    json['@id'] = "https://doi.org/#{doi.full_doi}"
+    json['dct:conformsTo'] = {
+      "@id": 'https://bioschemas.org/profiles/Study/0.3-DRAFT',
+      "@type": 'CreativeWork'
+    }
+    json['publisher'] = json_ld_publisher
+    json['dateCreated'] = pub.published_at&.strftime('%Y-%m-%d')
+    json['datePublished'] = pub.published_at&.strftime('%Y-%m-%d')
+    json['author'] = json_ld_authors(pub.taggable_data)
+    json['contributor'] = json_ld_contributor(pub.taggable_data["contributors"])
+    json['citation'] = json_ld_citations(pub.element.literatures, pub.element.id)
+    json['includedInDataCatalog'] = json_ld_data_catalog(pub)
+    json
+  end
+
+  def json_ld_data_catalog(pub = self)
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'DataCatalog'
+    json['@id'] = 'https://www.chemotion-repository.net'
+    json['dct:conformsTo'] = {
+      "@id": 'https://bioschemas.org/profiles/DataCatalog/0.3-RELEASE-2019_07_01',
+      "@type": 'CreativeWork'
+    }
+    json['description'] = 'Chemotion Repository'
+    json['name'] = 'Chemotion Repository'
+    json['url'] = 'https://www.chemotion-repository.net'
+    json
+
+  end
+
+  def conforms_to
+    {
+      "@id": "https://bioschemas.org/profiles/Study/0.3-DRAFT",
+      "@type": "CreativeWork"
+    }
+  end
+
   def json_ld_sample(pub = self)
     # metadata_xml
     json = {}
@@ -17,7 +75,7 @@ def json_ld_sample(pub = self)
     json['name'] = pub.element.molecule_name&.name
     json['alternateName'] = pub.element.molecule.inchistring
     # json['image'] = element.sample_svg_file
-    json['image'] = 'https://www.chemotion-repository.net/images/samples/' + pub.element.sample_svg_file
+    json['image'] = 'https://www.chemotion-repository.net/images/samples/' + pub.element.sample_svg_file  if pub&.element&.sample_svg_file.present?
     json['description'] = json_ld_description(pub.element.description)
     #json['author'] = json_ld_authors(pub.taggable_data)
     json['hasBioChemEntityPart'] = json_ld_moelcule_entity(pub)
@@ -33,13 +91,13 @@ def json_ld_sample(pub = self)
   def json_ld_reaction
     json = {}
     json['@context'] = 'https://schema.org'
-    json['@type'] = 'CreativeWork'
+    json['@type'] = 'Study'
     json['@id'] = "https://doi.org/#{doi.full_doi}"
     json['identifier'] = "CRR-#{id}"
     json['url'] = "https://www.chemotion-repository.net/inchikey/#{doi.suffix}"
     json['additionalType'] = 'Reaction'
     json['name'] = element.rinchi_short_key
-    json['creator'] = json_ld_authors(taggable_data)
+    json['author'] = json_ld_authors(taggable_data)
     json['description'] = json_ld_description(element.description)
     json['license'] = rights_data[:rightsURI]
     json['datePublished'] = published_at&.strftime('%Y-%m-%d')
@@ -95,7 +153,7 @@ def json_ld_container
 
   def json_ld_subjectOf(pub = self)
     arr = []
-    arr.push(json_ld_creative_work(pub))
+    # arr.push(json_ld_creative_work(pub))
     pub.children&.each do |ana|
       arr.push(json_ld_analysis(ana))
     end
@@ -109,8 +167,8 @@ def json_ld_analysis(pub = self)
     json['@id'] = "https://doi.org/#{pub.doi.full_doi}"
     json['identifier'] = "CRD-#{pub.id}"
     json['url'] = "https://www.chemotion-repository.net/inchikey/#{pub.doi.suffix}"
-    json['name'] = pub.element.extended_metadata['kind'] || ''
-    json['creator'] = json_ld_authors(pub.taggable_data)
+    json['name'] = pub.element.extended_metadata['kind'] || '' if pub&.element&.extended_metadata.present?
+    json['author'] = json_ld_authors(pub.taggable_data)
     json['description'] = json_ld_analysis_description(pub)
     json
   end
@@ -127,19 +185,6 @@ def json_ld_analysis_description(pub)
     kind + desc + content
   end
 
-  def json_ld_creative_work(pub = self)
-    json = {}
-    json['@type'] = 'CreativeWork'
-    json['@id'] = "https://doi.org/#{doi.full_doi}"
-    json['publisher'] = json_ld_publisher
-
-    json['dateCreated'] = pub.published_at&.strftime('%Y-%m-%d')
-    json['datePublished'] = pub.published_at&.strftime('%Y-%m-%d')
-    json['creator'] = json_ld_authors(pub.taggable_data)
-    json['contributor'] = json_ld_contributor(pub.taggable_data["contributors"])
-    json['citation'] = json_ld_citations(pub.element.literatures, pub.element.id)
-    json
-  end
 
   def json_ld_citations(literatures, id)
     json = []
@@ -174,11 +219,10 @@ def json_ld_authors(taggable_data)
     creators = taggable_data["creators"] || []
     arr = []
     creators.each do |author|
-      user = User.find(author["id"])
       json = {}
       json['@type'] = 'Person'
       json['name'] = author['name']
-      json['email'] = user&.email
+      json['identifier'] = author['ORCID'] if author['ORCID'].present?
       json['familyName'] = author["familyName"]
       json['givenName'] = author["givenName"]
       json['affiliation'] = json_ld_affiliation(author['affiliationIds']&.first, taggable_data)
@@ -188,11 +232,12 @@ def json_ld_authors(taggable_data)
   end
 
   def json_ld_contributor(contributor)
-    user = User.find(contributor["id"])
+    return {} unless contributor.present?
+
     json = {}
     json['@type'] = 'Person'
     json['name'] = contributor['name']
-    json['email'] = user&.email
+    json['identifier'] = contributor['ORCID'] if contributor['ORCID'].present?
     json['familyName'] = contributor["familyName"]
     json['givenName'] = contributor["givenName"]
     # json['affiliation'] = json_ld_affiliation(author['affiliationIds']&.first)
diff --git a/config/initializers/swagger.rb b/config/initializers/swagger.rb
index 809418551..38a7a4733 100644
--- a/config/initializers/swagger.rb
+++ b/config/initializers/swagger.rb
@@ -1,7 +1,9 @@
 GrapeSwaggerRails.options.before_action do
-  GrapeSwaggerRails.options.app_url = 'https://' + request.host_with_port
+  data_url = Rails.env.development? ? 'http://' : 'https://'
+  GrapeSwaggerRails.options.app_url = "#{data_url}#{request.host_with_port}"
 end
 
-GrapeSwaggerRails.options.url = Rails.env.development? ? '/api/v1/swagger_doc' : '/swagger_doc.json'
+GrapeSwaggerRails.options.url = '/swagger_doc.json'
+# GrapeSwaggerRails.options.url = Rails.env.development? ? '/api/v1/swagger_doc' : '/swagger_doc.json'
 GrapeSwaggerRails.options.app_url  = "#{ENV['APPLICATION_URL']}"
 

From 001eea487df078d4153420ad86ec6973858e5b35 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 5 Aug 2022 09:30:56 +0200
Subject: [PATCH 144/258] gate transfer

---
 app/api/chemotion/gate_api.rb                 | 72 ++++++++++++++++
 app/api/chemotion/public_api.rb               | 12 ---
 app/api/chemotion/repository_api.rb           |  7 +-
 .../details/reactions/ReactionDetails.js      |  2 +
 .../elements/details/samples/SampleDetails.js |  2 +
 app/packs/src/components/PublishCommon.js     | 25 ++++++
 .../components/contextActions/NoticeButton.js |  1 -
 .../components/fetchers/GenericBaseFetcher.js |  1 -
 app/packs/src/libHome/RepoCommon.js           | 18 ++--
 ...0712100000_add_segment_klass_identifier.rb |  3 +
 lib/export/export_collections.rb              | 82 +++++++++++++++++++
 lib/import/import_collections.rb              | 21 ++++-
 12 files changed, 218 insertions(+), 28 deletions(-)

diff --git a/app/api/chemotion/gate_api.rb b/app/api/chemotion/gate_api.rb
index a1ca39f88..ad8cdd1f2 100644
--- a/app/api/chemotion/gate_api.rb
+++ b/app/api/chemotion/gate_api.rb
@@ -158,6 +158,78 @@ def self.parsed?(value)
         end
       end
 
+
+      desc <<~DESC
+        receive sample and reaction data from a remote eln and import them into a designated
+        collection according to JWT info. (authentication through JWT)
+      DESC
+      namespace :receiving_zip do
+        params do
+          requires :data, type: File
+        end
+
+        before do
+          http_token = if request.headers['Authorization'].present?
+                         request.headers['Authorization'].split(' ').last
+                       end
+          error!('Unauthorized', 401) unless http_token
+          secret = Rails.application.secrets.secret_key_base
+          begin
+            @auth_token = HashWithIndifferentAccess.new(
+              JWT.decode(http_token, secret)[0]
+            )
+          rescue JWT::VerificationError, JWT::DecodeError, JWT::ExpiredSignature => e
+            error!("#{e}", 401)
+          end
+          @user = Person.find_by(email: @auth_token[:iss])
+          error!('Unauthorized', 401) unless @user
+          @collection = Collection.find_by(
+            id: @auth_token[:collection], user_id: @user.id, is_shared: false
+          )
+          error!('Unauthorized access to collection', 401) unless @collection
+
+          @origin = @auth_token["origin"]
+        end
+
+        post do
+          db_file = params[:data]&.fetch('tempfile', nil)
+          # file = params[:file]
+          tempfile = db_file
+          att = Attachment.new(
+            filename: params[:data][:filename],
+            key: File.basename(tempfile.path),
+            file_path: tempfile,
+            created_by: @user.id,
+            created_for: @user.id,
+            content_type: 'application/zip'
+          )
+          begin
+            att.save!
+          ensure
+            tempfile.close
+            tempfile.unlink
+          end
+
+          begin
+            import = Import::ImportCollections.new(att, @user.id, true, @collection.id, @origin)
+            import.extract
+            import.import!
+          rescue => e
+            Delayed::Worker.logger.error e
+            Message.create_msg_notification(
+              channel_subject: Channel::COLLECTION_ZIP_FAIL,
+              message_from: @user_id,
+              data_args: { col_labels: '', operation: 'import' },
+              autoDismiss: 5
+            )
+            @success = false
+          ensure
+            att&.destroy!
+          end
+          status(200)
+        end
+      end
+
       namespace :register_gate do
         params do
           requires :collection_id, type: Integer, desc: 'Collection id'
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 0b3aef58d..74b90fec2 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -91,18 +91,6 @@ class PublicAPI < Grape::API
         end
       end
 
-      namespace :search do
-        params do
-          requires :inchikey, type: String, desc: 'inchikey'
-        end
-        post do
-          molecule = Molecule.joins("inner join samples on molecules.id = samples.molecule_id and samples.deleted_at is null")
-                             .joins("inner join publications on samples.id = publications.element_id and  publications.state like '%completed%' and publications.element_type = 'Sample'")
-                             .find_by(inchikey: params[:inchikey])
-          { molecule_id: molecule&.id }
-        end
-      end
-
       namespace :article_init do
         get do
           { is_article_editor: current_user&.is_article_editor || false }
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index a333287d1..68c8ff508 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -93,7 +93,7 @@ def duplicate_sample(sample = @sample, analyses = @analyses, parent_publication_
           new_sample.collections << Collection.element_to_review_collection
           new_sample.collections << @embargo_collection unless @embargo_collection.nil?
           new_sample.save!
-          new_sample.save_segments(segments: sample.segments, current_user_id: current_user.id) if sample.segments
+          new_sample.copy_segments(segments: sample.segments, current_user_id: current_user.id) if sample.segments
           unless @literals.nil?
             lits = @literals&.select { |lit| lit['element_type'] == 'Sample' && lit['element_id'] == sample.id }
             duplicate_literals(new_sample, lits)
@@ -159,7 +159,7 @@ def duplicate_reaction(reaction, analysis_set)
           dest = File.join(dir, new_rsf)
 
           new_reaction.save!
-          new_reaction.save_segments(segments: reaction.segments, current_user_id: current_user.id)
+          new_reaction.copy_segments(segments: reaction.segments, current_user_id: current_user.id)
           unless @literals.nil?
             lits = @literals&.select { |lit| lit['element_type'] == 'Reaction' && lit['element_id'] == reaction.id }
             duplicate_literals(new_reaction, lits)
@@ -1240,10 +1240,9 @@ def remove_embargo_collection(col)
                 case ENV['PUBLISH_MODE']
                 when 'production'
                   if Rails.env.production?
-                    ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
+                    ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_later(@embargo_collection.id)
                   end
                 when 'staging'
-                  # ChemotionEmbargoPubchemJob.set(queue: "publishing_embargo_#{@embargo_collection.id}").perform_now(@embargo_collection.id)
                   ChemotionEmbargoPubchemJob.perform_now(@embargo_collection.id)
                 else 'development'
                 end
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 17118350b..3de35f2c2 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -47,6 +47,7 @@ import RepositoryActions from './actions/RepositoryActions';
 import PublishReactionModal from './PublishReactionModal';
 import {
   PublishedTag,
+  OrigElnTag,
   LabelPublication,
   PublishBtnReaction,
   ReviewPublishBtn,
@@ -512,6 +513,7 @@ export default class ReactionDetails extends Component {
         />
         <ReviewPublishBtn element={reaction} showComment={this.handleCommentScreen} validation={this.handleValidation} />
         <div style={{ display: "inline-block", marginLeft: "10px" }}>
+          <OrigElnTag element={reaction} />
           <PublishedTag element={reaction} />
           <LabelPublication element={reaction} />
         </div>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index e83b2f60f..2642234ce 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -81,6 +81,7 @@ import PublishSampleModal from './PublishSampleModal';
 import RepoXvialButton from './common/RepoXvialButton';
 import {
   PublishedTag,
+  OrigElnTag,
   LabelPublication,
   PublishBtn,
   ReviewPublishBtn,
@@ -639,6 +640,7 @@ export default class SampleDetails extends React.Component {
           <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
           <PubchemLabels element={sample} />
           <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
+          <OrigElnTag element={sample} />
           <PublishedTag element={sample} />
           <LabelPublication element={sample} />
           {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index 7d5191d0b..efbb3d015 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -181,6 +181,30 @@ const ReviewPublishBtn = ({ element, showComment, validation }) => {
   )
 };
 
+const OrigElnTag = ({ element }) => {
+  const tag = (element && element.tag) || {};
+  const tagData = (tag && tag.taggable_data) || {};
+  const elnInfo = (tagData && tagData.eln_info) || {};
+  if (Object.keys(elnInfo).length === 0) return <div />;
+
+  const tip = `go to original ELN: ${elnInfo.short_label}`;
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="data public">{tip}</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        style={labelStyle}
+        href={`${elnInfo.origin}mydb/collection/all/${element.type}/${elnInfo.id}`}
+        target="_blank"
+      >
+        <i className="fa fa-link" aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
 
 const PublishedTag = ({ element }) => {
   const tag = (element && element.tag) || {};
@@ -318,6 +342,7 @@ ChemotionTag.defaultProps = {
 
 export {
   LabelPublication,
+  OrigElnTag,
   PublishedTag,
   ChemotionTag,
   PublishBtn,
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 4a773a276..978b3e4ea 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -60,7 +60,6 @@ const handleNotification = (nots, act, needCallback = true) => {
               const params = { ids: [] };
               params.ids[0] = n.id;
               MessagesFetcher.acknowledgedMessage(params);
-              // .then((result) => { console.log(JSON.stringify(result)); });
             }
           },
         },
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
index 8d07f4ae4..f59f0f92d 100644
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -9,7 +9,6 @@ export default class GenericBaseFetcher {
   }
 
   static execData(params, path, method = 'POST') {
-    console.log(`/api/v1/${path}`);
     return fetch(`/api/v1/${path}`, {
       credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
     }).then(response => response.json()).then(json => json).catch((errorMessage) => {
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 2378f7c8c..96cf73339 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -172,17 +172,17 @@ const LicenseLegalCode = (cp) => {
 
 const nmrMsg = (sample, container) => {
   if (sample.molecule && container.extended_metadata &&
-    (typeof container.extended_metadata.kind === 'undefined' ||
-      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
+    (typeof container.extended_metadata?.kind === 'undefined' ||
+      (container.extended_metadata?.kind?.split('|')[0].trim() !== chmoConversions.nmr_1h?.termId && container.extended_metadata.kind?.split('|')[0].trim() !== chmoConversions.nmr_13c?.termId)
     )) {
     return '';
   }
   const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
 
-  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+  if (container.extended_metadata.kind?.split('|')[0].trim() === chmoConversions.nmr_1h?.termId) {
     const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
     return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
-  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+  } else if (container.extended_metadata?.kind?.split('|')[0].trim() === chmoConversions.nmr_13c?.termId) {
     const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
     return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
   }
@@ -196,9 +196,9 @@ const isFileTypePass = (analysisType, attachments) => {
   let files = [];
   switch (analysisType) {
     case '1H NMR':
-    case chmoConversions.nmr_1h.termId:
+    case chmoConversions.nmr_1h?.termId:
     case '13C NMR':
-    case chmoConversions.nmr_13c.termId:
+    case chmoConversions.nmr_13c?.termId:
     case '15N NMR':
     case 'NMR':
     case 'IR':
@@ -239,10 +239,10 @@ const isDatasetPass = (analysis) => {
 const isNmrPass = (analysis, sample) => {
   const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
   const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h?.termId && nmrType !== chmoConversions.nmr_13c?.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h?.termId) {
     return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c?.termId) {
     return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
   }
   return true;
diff --git a/db/migrate/20220712100000_add_segment_klass_identifier.rb b/db/migrate/20220712100000_add_segment_klass_identifier.rb
index 76b880ad5..bfec90a9e 100644
--- a/db/migrate/20220712100000_add_segment_klass_identifier.rb
+++ b/db/migrate/20220712100000_add_segment_klass_identifier.rb
@@ -5,9 +5,12 @@ class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
   def self.up
     execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
     add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
+    add_column :segment_klasses, :sync_time, :datetime unless column_exists? :segment_klasses, :sync_time
+    SegmentKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
   end
 
   def self.down
     remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
+    remove_column :segment_klasses, :sync_time if column_exists? :segment_klasses, :sync_time
   end
 end
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index 2a3448798..e5ef39e9c 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -159,6 +159,7 @@ def fetch_samples(collection)
                     'molecule_id' => 'Molecule',
                     'user_id' => 'User',
         })
+
         fetch_many(sample.residues, {
                      'sample_id' => 'Sample',
         })
@@ -345,6 +346,33 @@ def fetch_containers(containable)
     end
     # rubocop:enable Metrics/MethodLength
 
+    def fetch_element_klasses
+      klasses = ElementKlass.where(is_active: true, is_generic: false)
+      fetch_many(klasses, {'created_by' => 'User'})
+    end
+
+    def fetch_segment_klasses
+      klasses = SegmentKlass.where(is_active: true)
+      fetch_many(klasses, {'created_by' => 'User'})
+    end
+
+    def fetch_segments(element)
+      element_type = element.class.name
+      segments = Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
+      segments.each do |segment|
+        segment = fetch_properties(segment)
+        fetch_one(segment.segment_klass.element_klass)
+        fetch_one(segment.segment_klass, {
+          'element_klass_id' => 'ElementKlass'
+        })
+        fetch_one(segment, {
+          'element_id' => segment.element_type,
+          'segment_klass_id' => 'SegmentKlass',
+          'created_by' => 'User'
+        })
+      end
+    end
+
     def fetch_literals(element)
       element_type = element.class.name
 
@@ -360,6 +388,60 @@ def fetch_literals(element)
       end
     end
 
+    def fetch_properties(instance)
+      properties = instance.properties
+      properties['layers'].keys.each do |key|
+        layer = properties['layers'][key]
+
+        # field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }  -- TODO for elements
+        # field_elements = layer['fields'].select { |ss| ss['type'] == 'drag_element' }  -- TODO for elements
+
+        field_molecules = layer['fields'].select { |ss| ss['type'] == 'drag_molecule' }
+        field_molecules.each do |field|
+          idx = properties['layers'][key]['fields'].index(field)
+          id = field["value"] && field["value"]["el_id"] unless idx.nil?
+          mol = Molecule.find(id) unless id.nil?
+          properties['layers'][key]['fields'][idx]['value']['el_id'] = fetch_one(mol) unless mol.nil?
+        end
+
+        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
+        field_uploads.each do |upload|
+          idx = properties['layers'][key]['fields'].index(upload)
+          files = upload["value"] && upload["value"]["files"]
+          files&.each_with_index do |fi, fdx|
+            att = Attachment.find(fi['aid'])
+            @attachments += [att]
+            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Segment'}) unless att.nil?
+          end
+        end
+
+        field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+        field_tables&.each do |field|
+          next unless field['sub_values'].present? && field['sub_fields'].present?
+          # field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }  -- not available yet
+          # field_table_uploads = field['sub_fields'].select { |ss| ss['type'] == 'upload' }       -- not available yet
+          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+          if field_table_molecules.present?
+            col_ids = field_table_molecules.map { |x| x.values[0] }
+            col_ids.each do |col_id|
+              field['sub_values'].each do |sub_value|
+                next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+                svalue = sub_value[col_id]['value']
+                next unless svalue['el_id'].present? && svalue['el_inchikey'].present?
+
+                tmol = Molecule.find_by(id: svalue['el_id'])
+                sub_value[col_id]['value']['el_id'] = fetch_one(tmol) unless tmol.nil?
+              end
+            end
+          end
+        end
+
+      end
+      instance.properties = properties
+      instance
+    end
+
     def fetch_many(instances, foreign_keys = {})
       instances.each do |instance|
         fetch_one(instance, foreign_keys)
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index bb0c95b50..5b0d0c97c 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -237,7 +237,6 @@ def import_samples
           'is_top_secret',
           'dry_solvent',
           'external_label',
-          'short_label',
           'real_amount_value',
           'real_amount_unit',
           'imported_readout',
@@ -263,6 +262,7 @@ def import_samples
           molecule_id: molecule&.id,
         ))
 
+
         solvent_value = fields.slice('solvent')['solvent']
         if solvent_value.is_a? String
           solvent = Chemotion::SampleConst.solvents_smiles_options.find { |s| s[:label].include?(solvent_value) }
@@ -346,6 +346,19 @@ def import_reactions
             'Collection', 'CollectionsReaction', 'reaction_id', 'collection_id', uuid
           ),
         ))
+        # keep orig eln info
+        if @gt == true
+          et = reaction.tag
+          eln_info = {
+            id: fields["id"],
+            short_label: fields["short_label"],
+            origin: @origin
+          }
+          et.update!(
+            taggable_data: (et.taggable_data || {}).merge(eln_info: eln_info)
+          )
+
+        end
 
         # add reaction to the @instances map
         update_instances!(uuid, reaction)
@@ -383,6 +396,12 @@ def import_reactions_samples
             sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id')),
           ))
 
+          if reactions_sample.type == 'ReactionsProductSample'
+            onm = reactions_sample.reaction.tag&.taggable_data&.dig('eln_info', 'short_label')
+            nnm = reactions_sample.reaction.short_label
+            reactions_sample.sample.update!(name:reactions_sample.sample.name.sub!(onm, nnm)) if onm.present? && nnm.present?
+          end
+
           # add reactions_sample to the @instances map
           update_instances!(uuid, reactions_sample)
         end

From fdc0c07761d0c1206644ad2fc19dc93c78ece968 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 16 Jun 2023 10:07:56 +0200
Subject: [PATCH 145/258] revise readme file

---
 README.md | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 243f5472b..3739e61e4 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,13 @@
-# Chemotion REPOSITORY
+# Chemotion Repository [![DOI](https://zenodo.org/badge/DOI/10.5281/zenodo.3755759.svg)](https://doi.org/10.5281/zenodo.3755759)
 
-A repository for chemists based on chemotion ELN !
-
----
-
-**⸢ [Installation] ⸥ ⸢ [Documentation] ⸥ ⸢ [Changelog] ⸥**
+Empowering chemists with a comprehensive solution for storing, managing, and analyzing samples, reactions, and research data.
 
 ---
 
 ## License
 
-Chemotion_REPOSITORY for Chemists.
-
-Copyright (C) 2015-current  Nicole Jung (nicole.jung(at)kit.edu) of the Karlsruhe Institute of Technology.
+**Copyright © `2015` - `2023` [Nicole Jung]** <br>
+of the **[Karlsruhe Institute of Technology]**.
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -28,14 +23,21 @@ Copyright (C) 2015-current  Nicole Jung (nicole.jung(at)kit.edu) of the Karlsruh
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
-![Badge CI]
-
 ---
 
 ## Acknowledgments
 
+This project has been funded by the **[DFG]**.
+
+[![DFG Logo]][DFG]
+
 ## User Documentation
 
-see online ![docs](https://www.chemotion.net/chemotionsaurus/docs/eln/about)
+see online **⸢ [Documentation] ⸥**
 
-[INSTALL]: INSTALL.md
+<!----------------------------------------------------------------------------->
+[Documentation]: https://www.chemotion.net/docs/repo/
+[DFG]: https://www.dfg.de/en/
+[DFG Logo]: https://www.dfg.de/zentralablage/bilder/service/logos_corporate_design/logo_negativ_267.png
+[Nicole Jung]: mailto:nicole.jung@kit.edu
+[Karlsruhe Institute of Technology]: https://www.kit.edu/english/

From 5099d455eea4ddf8cc2385fe5c5e96378d45b398 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 16 Jun 2023 11:56:22 +0200
Subject: [PATCH 146/258] use ISO date format for publication data

---
 app/packs/src/components/PublishCommon.js       | 16 +++-------------
 app/packs/src/components/chemrepo/DateInfo.js   | 17 +++++------------
 app/packs/src/components/chemrepo/date-utils.js |  4 ++++
 app/packs/src/libHome/RepoCollection.js         |  3 ++-
 app/packs/src/libHome/RepoCommon.js             | 17 +++++------------
 app/packs/src/libHome/RepoMoleculeList.js       |  3 ++-
 app/packs/src/libHome/RepoReactionList.js       |  3 ++-
 app/packs/src/libHome/RepoReview.js             |  8 ++++----
 8 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index efbb3d015..190da3db9 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -10,6 +10,7 @@ import Sample from './models/Sample';
 import { sampleShowOrNew, reactionShow } from './routesUtils';
 import Reaction from './models/Reaction';
 import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
+import { getFormattedISODate } from './chemrepo/date-utils';
 
 const labelStyle = {
   display: 'inline-block',
@@ -261,12 +262,10 @@ const LabelPublication = ({ element }) => {
 
   if (!publication) { return null; }
 
-  const time = new Date(publication.published_at || publication.doi_reg_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
   const contributor = publication.contributors && publication.contributors.name;
   const publishedBy = publication.creators && publication.creators[0] &&
     publication.creators[0].name;
-  let tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
+  let tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${getFormattedISODate(publication.published_at || publication.doi_reg_at)}`;
   const schemeOnly = (element && element.publication && element.publication.taggable_data &&
     element.publication.taggable_data.scheme_only === true) || false;
   let openUrl = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`;
@@ -305,34 +304,25 @@ const ChemotionTag = ({ tagData, firstOnly = false }) => {
   if (!chemotionTag) { return null; }
   const { chemotion_first, last_published_at, doi } = chemotionTag;
   if (firstOnly && !chemotion_first) { return null; }
-  const time = new Date(chemotion_first || last_published_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const formattedTime = getFormattedISODate(chemotion_first || last_published_at);
   const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
     : `Last published on ${formattedTime}`;
   const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
 
-
   return (
     <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
       <a
         style={labelStyle}
-        // bsSize="xsmall"
-        // bsStyle="default"
         target="_blank"
         href={`https://dx.doi.org/${doi}`}
       >
         <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
         {first}
-        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
       </a>
-
-
-
     </OverlayTrigger>
   );
 };
 
-
 ChemotionTag.propTypes = {
   tagData: PropTypes.object,
 };
diff --git a/app/packs/src/components/chemrepo/DateInfo.js b/app/packs/src/components/chemrepo/DateInfo.js
index a48130dca..49e3365a0 100644
--- a/app/packs/src/components/chemrepo/DateInfo.js
+++ b/app/packs/src/components/chemrepo/DateInfo.js
@@ -1,24 +1,17 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getFormattedISODate, getFormattedTime } from './date-utils';
 
 const DateInfo = (props) => {
   const {
     isPublished, preText, pubData, tagData
   } = props;
 
-  const getTimeString = date => (date ? `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}` : '');
-  const getFormattedTime = date => (date ? `${getTimeString(date)} ${date.getHours()}:${date.getMinutes()}` : '');
-
-  const publishedTime = tagData?.published_at || tagData?.doi_reg_at;
-  const publishedDate = new Date(publishedTime);
-  const formattedPublishedDate = getTimeString(publishedDate);
-
-  const submittedDate = new Date(pubData?.created_at);
-  const formattedSubmittedDate = getTimeString(submittedDate);
-
-  const updatedDate = new Date(pubData?.updated_at);
-  const formattedUpdatedDate = getFormattedTime(updatedDate);
+  const formattedPublishedDate =
+  getFormattedISODate((tagData?.published_at || tagData?.doi_reg_at));
+  const formattedSubmittedDate = getFormattedISODate(pubData?.created_at);
+  const formattedUpdatedDate = getFormattedTime(pubData?.updated_at);
 
   if (isPublished) {
     return (<span><b>{preText} Published on </b> <i>{formattedPublishedDate}</i></span>);
diff --git a/app/packs/src/components/chemrepo/date-utils.js b/app/packs/src/components/chemrepo/date-utils.js
index 10786fdeb..ec51bd2ab 100644
--- a/app/packs/src/components/chemrepo/date-utils.js
+++ b/app/packs/src/components/chemrepo/date-utils.js
@@ -25,3 +25,7 @@ export const formatDateYMDLong = (dt) => {
     return '';
   }
 };
+
+export const getFormattedISODate = date => (date ? moment(date).format('YYYY-MM-DD') : '');
+export const getFormattedTime = date => (date ? moment(date).format('HH:mm') : '');
+export const getFormattedISODateTime = date => (date ? moment(date).format('YYYY-MM-DD HH:mm') : '');
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index 1e8e35dbf..432f5bfc8 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -6,6 +6,7 @@ import RepoCollectionDetails from './RepoCollectionDetails';
 import PublicStore from '../components/stores/PublicStore';
 import { MetadataModal, InfoModal } from './RepoEmbargoModal';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
+import { getFormattedISODate } from '../components/chemrepo/date-utils';
 
 const SvgPath = (svg, type) => {
   if (svg && svg !== '***') {
@@ -34,7 +35,7 @@ const infoTag = (el, la) => {
       </OverlayTrigger>
       {authorInfo}
       <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{el.published_at}</div>
+        <div>Published on</div><div className="item_xvial">{getFormattedISODate(el.published_at)}</div>
       </div>
       <div className="home_wrapper_item">
         <div>Analyses</div><div className="item_xvial">{el.ana_cnt || 0}</div>
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 96cf73339..12fe13a3a 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -58,6 +58,7 @@ import RepoSegment from './RepoSegment';
 import RepoMolViewerBtn from './RepoMolViewerBtn';
 import RepoMolViewerListBtn from './RepoMolViewerListBtn';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -496,11 +497,6 @@ const MoveEmbargoedBundle = (element, onMoveClick) => {
   );
 };
 
-const ElSubmitTime = (submitAt) => {
-  const time = new Date(submitAt);
-  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
-};
-
 const SvgPath = (svg, type) => {
   if (svg && svg !== '***') {
     if (type === 'Reaction') {
@@ -533,7 +529,7 @@ const ElAspect = (e, onClick, user = null, owner, currentElement = null, onMoveC
           <i className={`icon-${e.type.toLowerCase()}`} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
         </span>
         &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
+        {getFormattedISODateTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
         &nbsp;{user !== null && user.id != owner ? '' : MoveEmbargoedBundle(e, onMoveClick)}
         <div>
           <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
@@ -1882,7 +1878,7 @@ class RenderPublishAnalyses extends Component {
   }
 
   render() {
-    const { analysis, expanded, elementType } = this.props;
+    const { analysis, expanded, elementType, publication } = this.props;
     const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
     const AffiliationMap = (affiliationIds) => {
       const aId = affiliationIds.length > 0 ? ([].concat.apply(...affiliationIds)) : [];
@@ -1896,13 +1892,11 @@ class RenderPublishAnalyses extends Component {
       });
       return affiliationMap;
     };
-    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids || []);
-    const time = new Date(this.props.publication && this.props.publication.published_at);
-    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    const affiliationMap = AffiliationMap(publication.affiliation_ids || []);
     return (
       <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
         <Panel.Heading style={{ border: 'unset' }}>
-          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
+          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{getFormattedISODate(publication.published_at)}</i>
             <LicenseIcon
               license={this.props.license}
               hasCoAuthors={(this.props.publication.author_ids.length > 1)}
@@ -2354,7 +2348,6 @@ export {
   EditorTips,
   ElementIcon,
   ElStateLabel,
-  ElSubmitTime,
   ElAspect,
   EmbargoCom,
   IconToMyDB,
diff --git a/app/packs/src/libHome/RepoMoleculeList.js b/app/packs/src/libHome/RepoMoleculeList.js
index 2d83219f9..bea4fff74 100644
--- a/app/packs/src/libHome/RepoMoleculeList.js
+++ b/app/packs/src/libHome/RepoMoleculeList.js
@@ -7,6 +7,7 @@ import PublicActions from '../components/actions/PublicActions';
 import Formula from '../components/common/Formula';
 import PubchemLabels from '../components/PubchemLabels';
 import { xvialTag, svgTag } from './RepoPubCommon';
+import { getFormattedISODate } from '../components/chemrepo/date-utils';
 
 const pubchemTag = (molecule) => {
   if (molecule && molecule.tag &&
@@ -36,7 +37,7 @@ const infoTag = (molecule) => {
         <div>Author</div><div className="item_xvial">{molecule.author_name}</div>
       </div>
       <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
+        <div>Published on</div><div className="item_xvial">{getFormattedISODate(molecule.published_at)}</div>
       </div>
       <div className="home_wrapper_item">
         <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
diff --git a/app/packs/src/libHome/RepoReactionList.js b/app/packs/src/libHome/RepoReactionList.js
index e9ecd2856..71157dd8b 100644
--- a/app/packs/src/libHome/RepoReactionList.js
+++ b/app/packs/src/libHome/RepoReactionList.js
@@ -5,6 +5,7 @@ import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
 import PublicActions from '../components/actions/PublicActions';
+import { getFormattedISODate } from '../components/chemrepo/date-utils';
 
 const xvialTag = (element, hasXvial = null) => {
   const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
@@ -58,7 +59,7 @@ const infoTag = (reaction, schemeOnly) => {
       </OverlayTrigger>
       {authorInfo}
       <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{reaction.published_at}</div>
+        <div>Published on</div><div className="item_xvial">{getFormattedISODate(reaction.published_at)}</div>
       </div>
       <div className="home_wrapper_item">
         <div>Analyses</div><div className="item_xvial">{reaction.ana_cnt || 0}</div>
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index f168c18fd..e0b8fcff4 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -11,8 +11,8 @@ import ReviewStore from '../components/stores/ReviewStore';
 import UserStore from '../components/stores/UserStore';
 import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
 import LoadingActions from '../components/actions/LoadingActions';
-
-import { SvgPath, ElStateLabel, ElSubmitTime, SchemeWord, ChecklistPanel } from './RepoCommon';
+import { getFormattedISODateTime } from '../components/chemrepo/date-utils';
+import { SvgPath, ElStateLabel, SchemeWord, ChecklistPanel } from './RepoCommon';
 // import RepoReviewModal from '../components/common/RepoReviewModal';
 
 const renderElement = (e, currentElement, embargoBtn) => {
@@ -30,7 +30,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
             <i className="icon-reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
           </span>
           &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+          {getFormattedISODateTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
           &nbsp;{embargoBtn}
           <div>
             <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
@@ -52,7 +52,7 @@ const renderElement = (e, currentElement, embargoBtn) => {
           <i className="icon-sample" />&nbsp;{e.title}
         </span>
         &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+        {getFormattedISODateTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
         &nbsp;{embargoBtn}
         <div>
           <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />

From edd9457dbf202b4b41c93b290a9775f5a037a5e5 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 19 Jun 2023 16:14:39 +0200
Subject: [PATCH 147/258] correct the date format at back end

---
 app/api/chemotion/public_api.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 74b90fec2..8b31931f6 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -441,7 +441,7 @@ def query_embargo(name)
               and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
               select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
             (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
-            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
+            (select to_char(published_at, 'YYYY-MM-DD') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
             (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
           SQL
 
@@ -506,7 +506,7 @@ def query_embargo(name)
           end
           com_config = Rails.configuration.compound_opendata
           embargo_sql = <<~SQL
-            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'YYYY-MM-DD') as published_at, publications.taggable_data,
             (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
             (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id and cr.deleted_at is null
             and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (

From e716d3100f1084b4df50ba0a2b465f2bf4822a4b Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 25 Jun 2023 23:57:08 +0200
Subject: [PATCH 148/258] lock element after submit

---
 app/assets/stylesheets/repo_home.scss         | 71 +++++++++++++------
 .../mydb/elements/details/ElementDetails.js   |  7 +-
 .../details/reactions/ReactionDetails.js      | 39 ++++++++--
 .../elements/details/samples/SampleDetails.js | 48 ++++++++++---
 .../analysesTab/SampleDetailsContainersAux.js |  1 -
 .../samples/propertiesTab/SampleForm.js       | 32 +++++----
 app/packs/src/components/PublishCommon.js     | 56 ++++++---------
 .../src/components/chemrepo/UnsealButton.js   | 46 ++++++++++++
 .../components/chemrepo/publication-utils.js  | 11 +++
 app/packs/src/components/common/uis.js        | 10 ++-
 app/packs/src/models/LiteratureMap.js         |  5 +-
 11 files changed, 232 insertions(+), 94 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/UnsealButton.js
 create mode 100644 app/packs/src/components/chemrepo/publication-utils.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 6226a6229..44420cfd8 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -132,21 +132,23 @@ $bs-successcolor: #5cb85c;
 .repo-registed-compound-desc {
   color: $bs-primarycolor;
   font-style: italic;
-  i { color: black; cursor: pointer; }
+  i {
+    color: black;
+    cursor: pointer;
+  }
 }
 
 .repo-home {
-   display: block;
-   max-width: 1200px;
-   margin: auto;
+  display: block;
+  max-width: 1200px;
+  margin: auto;
 }
 
 .card-well {
   background-color: #f5f5f5;
   border-radius: 6px;
-  height: 36vh;//auto; //calc(80vh - 190px);
+  height: 36vh; //auto; //calc(80vh - 190px);
   padding: 10px 0px;
-
 }
 
 .card-nfdi4chem {
@@ -178,12 +180,18 @@ $bs-successcolor: #5cb85c;
   display: flex;
   margin: 40px 20px 20px 20px;
   border-radius: 0px;
-  .carl-spt{
+  .carl-spt {
     flex: 1;
     display: flex;
-    .carousel-inner .active.left { top: 0%; }
-    .carousel-inner .next        { top: 0%; }
-    .carousel-inner .prev        { top: 0%; }
+    .carousel-inner .active.left {
+      top: 0%;
+    }
+    .carousel-inner .next {
+      top: 0%;
+    }
+    .carousel-inner .prev {
+      top: 0%;
+    }
   }
 
   .carl-spt-item {
@@ -239,7 +247,8 @@ $bs-successcolor: #5cb85c;
     text-shadow: none;
   }
 
-  .carousel-control.left, .carousel-control.right {
+  .carousel-control.left,
+  .carousel-control.right {
     background-image: none !important;
     color: #e7e7e7;
   }
@@ -299,7 +308,7 @@ $bs-successcolor: #5cb85c;
   background-color: #f5f5f5;
   .partner-heading {
     background-color: #f5f5f5;
-     border-radius: 6px;
+    border-radius: 6px;
     margin: 20px 5px 0;
     padding: 5px;
     text-align: center;
@@ -308,7 +317,7 @@ $bs-successcolor: #5cb85c;
   .partner-row {
     display: flex;
     justify-content: center;
-     overflow-x: auto;
+    overflow-x: auto;
     padding-top: 30px;
   }
 
@@ -325,7 +334,7 @@ $bs-successcolor: #5cb85c;
       margin: auto;
       max-height: 90%;
       max-width: 90%;
-      opacity: 1.0;
+      opacity: 1;
       z-index: 1;
     }
 
@@ -334,17 +343,17 @@ $bs-successcolor: #5cb85c;
     }
 
     &:hover {
-      border:2px solid #ddd;
+      border: 2px solid #ddd;
     }
 
     &:hover .info {
-      opacity: 1.0;
+      opacity: 1;
     }
 
     .info {
       top: 0%;
       left: 0%;
-      opacity: 0.0;
+      opacity: 0;
       position: absolute;
       padding: 5px;
       margin: 5px;
@@ -360,7 +369,7 @@ $bs-successcolor: #5cb85c;
 .card-icons {
   div {
     height: 100px;
-    position:relative;
+    position: relative;
   }
 
   img {
@@ -472,7 +481,9 @@ $bs-successcolor: #5cb85c;
   margin: auto !important;
   > div:nth-child(2) {
     background-color: $topbgcolor;
-    > h2 { text-align: center; }
+    > h2 {
+      text-align: center;
+    }
   }
 }
 
@@ -726,18 +737,24 @@ $bs-successcolor: #5cb85c;
 }
 
 .btn-xvial-none {
-  i { color: unset; }
+  i {
+    color: unset;
+  }
 }
 
 .btn-xvial-data {
   display: flex;
-  i { color: $bs-primarycolor; }
+  i {
+    color: $bs-primarycolor;
+  }
   span {
     border: 1px solid $bs-primarycolor;
     background-color: white;
     color: $bs-primarycolor;
     border-radius: 3px;
-    .base { @include btn-xvial-base; }
+    .base {
+      @include btn-xvial-base;
+    }
   }
 }
 
@@ -961,3 +978,13 @@ $bs-successcolor: #5cb85c;
     font-size: 1.5em;
   }
 }
+
+.repo-btn-success span {
+  background-color: $bs-successcolor !important;
+  color: white !important;
+}
+
+.repo-btn-success span:hover {
+  background-color: #19b5fe !important;
+  color: black !important;
+}
diff --git a/app/packs/src/apps/mydb/elements/details/ElementDetails.js b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
index 3e331d015..ab7206250 100644
--- a/app/packs/src/apps/mydb/elements/details/ElementDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
@@ -19,6 +19,8 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import WellplateDetails from 'src/apps/mydb/elements/details/wellplates/WellplateDetails';
 import { Tabs, Tab, Label, Button } from 'react-bootstrap';
 
+import { getPublicationId } from './chemrepo/publication-utils';
+
 const tabInfoHash = {
   metadata: {
     title: 'Metadata',
@@ -160,7 +162,10 @@ export default class ElementDetails extends Component {
     }
   }
 
-  content(el) {
+  content(_el) {
+    const el = _el;
+    el.sealed = getPublicationId(el) ? true : false;
+
     if (el && el.klassType === 'GenericEl' && el.type != null) {
       return <GenericElDetails genericEl={el} toggleFullScreen={this.toggleFullScreen} />;
     }
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 3de35f2c2..c8fa4cea9 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -95,6 +95,18 @@ export default class ReactionDetails extends Component {
     this.handleValidation = this.handleValidation.bind(this);
     this.handleResetValidation = this.handleResetValidation.bind(this);
     this.handleModalAnalysesCheck = this.handleModalAnalysesCheck.bind(this);
+    this.unseal = this.unseal.bind(this);
+    if (!reaction.reaction_svg_file) {
+      this.updateReactionSvg();
+    }
+  }
+
+  onUIStoreChange(state) {
+    if (state.reaction.activeTab != this.state.activeTab){
+      this.setState({
+        activeTab: state.reaction.activeTab
+      })
+    }
   }
 
   componentDidMount() {
@@ -129,6 +141,7 @@ export default class ReactionDetails extends Component {
     const nextVisible = nextState.visible;
     const { reaction, activeTab, visible } = this.state;
     return (
+      nextState.sealed !== reaction.sealed ||
       nextReaction.can_publish !== reaction.can_publish ||
       nextReaction.can_update !== reaction.can_update ||
       nextReaction.id !== reaction.id ||
@@ -160,6 +173,12 @@ export default class ReactionDetails extends Component {
     this.forceUpdate();
   }
 
+  unseal() {
+    const { reaction } = this.state;
+    reaction.sealed = false;
+    this.setState({ reaction });
+  }
+
   handleModalAnalysesCheck(reaction) {
     this.setState({ reaction });
   }
@@ -446,19 +465,27 @@ export default class ReactionDetails extends Component {
             bsSize="xsmall"
             className="button-right"
             onClick={() => this.handleSubmit(true)}
-            disabled={!permitOn(reaction) || !this.reactionIsValid() || reaction.isNew}
+            disabled={
+              !permitOn(reaction) || !this.reactionIsValid() || reaction.isNew
+            }
             style={{ display: hasChanged }}
           >
             <i className="fa fa-floppy-o" />
             <i className="fa fa-times" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom"
-          overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right"
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
             onClick={() => this.handleSubmit()}
             disabled={!permitOn(reaction) || !this.reactionIsValid()}
-            style={{ display: hasChanged }} >
+            style={{ display: hasChanged }}
+          >
             <i className="fa fa-floppy-o "></i>
           </Button>
         </OverlayTrigger>
@@ -514,7 +541,7 @@ export default class ReactionDetails extends Component {
         <ReviewPublishBtn element={reaction} showComment={this.handleCommentScreen} validation={this.handleValidation} />
         <div style={{ display: "inline-block", marginLeft: "10px" }}>
           <OrigElnTag element={reaction} />
-          <PublishedTag element={reaction} />
+          <PublishedTag element={reaction} fnUnseal={this.unseal} />
           <LabelPublication element={reaction} />
         </div>
       </div>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 2642234ce..027534d41 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -88,6 +88,7 @@ import {
   validateMolecule,
 } from './PublishCommon';
 import SampleDetailsRepoComment from './SampleDetailsRepoComment';
+import { permitOn } from './common/uis';
 
 const MWPrecision = 6;
 
@@ -184,6 +185,7 @@ export default class SampleDetails extends React.Component {
     this.handleResetValidation = this.handleResetValidation.bind(this);
     this.handleAssociateClick = this.handleAssociateClick.bind(this);
     this.handleRepoXvial = this.handleRepoXvial.bind(this);
+    this.unseal = this.unseal.bind(this);
   }
 
   componentDidMount() {
@@ -487,6 +489,13 @@ export default class SampleDetails extends React.Component {
     this.setState({ sample });
   }
 
+  unseal() {
+    console.log('unseal');
+    const { sample } = this.state;
+    sample.sealed = false;
+    this.setState({ sample });
+  }
+
   handleElementalSectionToggle() {
     this.setState({
       showElementalComposition: !this.state.showElementalComposition
@@ -577,7 +586,18 @@ export default class SampleDetails extends React.Component {
       </Button>
     );
 
-    const saveAndCloseBtn = belongToReaction && !sample.isNew ? this.saveBtn(sample, true) : null;
+    const decoupleCb =
+    permitOn(sample) && this.enableSampleDecoupled ? (
+        <Checkbox
+          className="sample-header-decouple"
+          checked={sample.decoupled}
+          onChange={(e) => this.decoupleChanged(e)}
+        >
+          Decoupled
+        </Checkbox>
+      ) : null;
+
+    const isPub = !!((sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.publication && sample.tag.taggable_data.publication.published_at));
     return (
       <div>
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
@@ -594,7 +614,7 @@ export default class SampleDetails extends React.Component {
             className="button-right"
             onClick={() => this.handleSubmit(true)}
             style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !sample.can_update}
+            disabled={!this.sampleIsValid() || !permitOn(sample)}
           >
             <i className="fa fa-floppy-o" />
             <i className="fa fa-times" />
@@ -610,7 +630,7 @@ export default class SampleDetails extends React.Component {
             className="button-right"
             onClick={() => this.handleSubmit()}
             style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !sample.can_update}
+            disabled={!this.sampleIsValid() || !permitOn(sample)}
           >
             <i className="fa fa-floppy-o" />
           </Button>
@@ -641,7 +661,7 @@ export default class SampleDetails extends React.Component {
           <PubchemLabels element={sample} />
           <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
           <OrigElnTag element={sample} />
-          <PublishedTag element={sample} />
+          <PublishedTag element={sample} fnUnseal={this.unseal} />
           <LabelPublication element={sample} />
           {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
         </div>
@@ -1595,10 +1615,21 @@ export default class SampleDetails extends React.Component {
     }
   }
 
-  showStructureEditor() {
-    this.setState({
-      showStructureEditor: true
-    });
+  saveBtn(sample, closeView = false) {
+    let submitLabel = sample && sample.isNew ? 'Create' : 'Save';
+    const isDisabled = !permitOn(sample);
+    if (closeView) submitLabel += ' and close';
+
+    return (
+      <Button
+        id="submit-sample-btn"
+        bsStyle="warning"
+        onClick={() => this.handleSubmit(closeView)}
+        disabled={!this.sampleIsValid() || isDisabled}
+      >
+        {submitLabel}
+      </Button>
+    );
   }
 
   hideStructureEditor() {
@@ -1662,7 +1693,6 @@ export default class SampleDetails extends React.Component {
           dialogClassName="importChemDrawModal"
           onHide={this.handleMolfileClose}
         >
-
           <Modal.Header closeButton>
             <Modal.Title>Molfile</Modal.Title>
           </Modal.Header>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index e0a91132a..7e05c2354 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -18,7 +18,6 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import { chmoConversions } from 'src/components/OlsComponent';
 import { previewContainerImage } from 'src/utilities/imageHelper';
 
-import { PublishedTag } from './PublishCommon';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 
 import RepoMolViewerListBtn from '../libHome/RepoMolViewerListBtn';
diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
index 35ff5a028..5d4d38c8f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -16,6 +16,10 @@ import SampleDetailsSolvents from 'src/apps/mydb/elements/details/samples/proper
 import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
 import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 
+// For REPO
+import { permitOn } from './common/uis';
+
+
 export default class SampleForm extends React.Component {
   constructor(props) {
     super(props);
@@ -109,7 +113,7 @@ export default class SampleForm extends React.Component {
   // Input components of sample details should be disabled if detail level
   // does not allow to read their content
   topSecretCheckbox(sample) {
-    if (sample.can_update) {
+    if (permitOn(sample)) {
       return (
         <Checkbox
           inputRef={(ref) => { this.topSecretInput = ref; }}
@@ -140,7 +144,7 @@ export default class SampleForm extends React.Component {
   }
 
   decoupledCheckbox(sample) {
-    if (sample.can_update) {
+    if (permitOn(sample)) {
       return (
         <Checkbox
           inputRef={(ref) => { this.decoupledInput = ref; }}
@@ -210,7 +214,7 @@ export default class SampleForm extends React.Component {
         <Select
           name="stereoAbs"
           clearable={false}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
           options={absOptions}
           onChange={this.updateStereoAbs}
           value={value}
@@ -244,7 +248,7 @@ export default class SampleForm extends React.Component {
         <Select
           name="stereoRel"
           clearable={false}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
           options={relOptions}
           onChange={this.updateStereoRel}
           value={value}
@@ -268,7 +272,7 @@ export default class SampleForm extends React.Component {
           <Select.Creatable
             name="moleculeName"
             multi={false}
-            disabled={!sample.can_update}
+            disabled={!permitOn(sample)}
             options={moleculeNames}
             onOpen={onOpenMolName}
             onChange={this.updateMolName}
@@ -278,7 +282,7 @@ export default class SampleForm extends React.Component {
             clearable={false}
           />
           <InputGroup.Button>
-            {this.structureEditorButton(!sample.can_update)}
+            {this.structureEditorButton(!permitOn(sample))}
           </InputGroup.Button>
         </InputGroup>
       </FormGroup>
@@ -351,8 +355,8 @@ export default class SampleForm extends React.Component {
           type="text"
           value={(/^xref_/.test(field) ? sample.xref[field.split('xref_')[1]] : sample[field]) || ''}
           onChange={(e) => { this.handleFieldChanged(field, e.target.value); }}
-          disabled={disabled || !sample.can_update}
-          readOnly={disabled || !sample.can_update}
+          disabled={disabled || !permitOn(sample)}
+          readOnly={disabled || !permitOn(sample)}
         />
       </FormGroup>
     );
@@ -385,8 +389,8 @@ export default class SampleForm extends React.Component {
         multi={false}
         options={solventOptions}
         value={sample.solvent}
-        disabled={!sample.can_update}
-        onChange={(e) => this.handleFieldChanged('solvent', e)}
+        disabled={!permitOn(sample)}
+        onChange={e => this.handleFieldChanged('solvent', e)}
       />
     );
   }
@@ -529,7 +533,7 @@ export default class SampleForm extends React.Component {
 
   sampleAmount(sample) {
     const content = [];
-    const isDisabled = !sample.can_update;
+    const isDisabled = !permitOn(sample);
     const volumeBlocked = !sample.has_density && !sample.has_molarity;
 
     if (sample.isMethodDisabled('amount_value') === false) {
@@ -602,7 +606,7 @@ export default class SampleForm extends React.Component {
           value={sample.description || ''}
           onChange={(e) => this.handleFieldChanged('description', e.target.value)}
           rows={2}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
         />
       </FormGroup>
     );
@@ -681,7 +685,7 @@ export default class SampleForm extends React.Component {
   render() {
     const sample = this.props.sample || {};
     const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
-    const isDisabled = !sample.can_update;
+    const isDisabled = !permitOn(sample);
     const polyDisabled = isPolymer || isDisabled;
     const molarityBlocked = isDisabled ? true : this.state.molarityBlocked;
     const densityBlocked = isDisabled ? true : !molarityBlocked;
@@ -825,7 +829,7 @@ export default class SampleForm extends React.Component {
           </tr>
           <tr>
             <td colSpan="4">
-              <PrivateNoteElement element={sample} disabled={!sample.can_update} />
+              <PrivateNoteElement element={sample} disabled={!permitOn(sample)} />
             </td>
           </tr>
           {this.props.customizableField()}
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index 190da3db9..c68084c46 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  Tooltip,
-  OverlayTrigger,
-} from 'react-bootstrap';
+import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import Aviator from 'aviator';
 import Sample from './models/Sample';
@@ -11,6 +7,8 @@ import { sampleShowOrNew, reactionShow } from './routesUtils';
 import Reaction from './models/Reaction';
 import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
 import { getFormattedISODate } from './chemrepo/date-utils';
+import { getElementType, getPublicationId } from './chemrepo/publication-utils';
+import UnsealBtn from './chemrepo/UnsealButton';
 
 const labelStyle = {
   display: 'inline-block',
@@ -207,34 +205,19 @@ const OrigElnTag = ({ element }) => {
   );
 };
 
-const PublishedTag = ({ element }) => {
+const PublishedTag = ({ element, fnUnseal }) => {
   const tag = (element && element.tag) || {};
   const tagData = (tag && tag.taggable_data) || {};
-  const tagType = tag.taggable_type;
-  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
-  let tip = '';
-  let publishedId;
-  switch (tagType) {
-    case 'Reaction':
-      publishedId = tagData.public_reaction;
-      if (isPending) {
-        tip = 'Reaction is being reviewed';
-      } else {
-        tip = 'Reaction has been published';
-      }
-      break;
-
-    default:
-      publishedId = tagData.public_sample;
-      if (isPending) {
-        tip = 'Sample is being reviewed';
-      } else {
-        tip = 'Sample has been published';
-      }
-      break;
-  }
-  return (
-    publishedId ? (
+  const tagType = getElementType(element) || '';
+  const isPending =
+    (tagData && tagData.publish_pending && tagData.publish_pending === true) ||
+    false;
+  const tip = isPending
+    ? `${tagType} is being reviewed`
+    : `${tagType} has been published`;
+  const publishedId = getPublicationId(element);
+  return publishedId ? (
+    <ButtonGroup bsSize="xsmall">
       <OverlayTrigger
         placement="bottom"
         overlay={<Tooltip id="data public">{tip}</Tooltip>}
@@ -242,18 +225,19 @@ const PublishedTag = ({ element }) => {
         <Button
           bsSize="xsmall"
           bsStyle={isPending ? 'warning' : 'danger'}
-          style={labelStyle}
-          onClick={event => handleClick(event, publishedId, tagType)}
+          onClick={(event) => handleClick(event, publishedId, tagType)}
         >
           <i className="fa fa-newspaper-o" aria-hidden="true" />
         </Button>
       </OverlayTrigger>
-    ) : null
-  );
+      {fnUnseal ? <UnsealBtn element={element} fnUnseal={fnUnseal} /> : null}
+    </ButtonGroup>
+  ) : null;
 };
 
 PublishedTag.propTypes = {
   element: PropTypes.object,
+  fnUnseal: PropTypes.func,
 };
 
 const LabelPublication = ({ element }) => {
@@ -339,5 +323,5 @@ export {
   PublishBtnReaction,
   ReviewPublishBtn,
   validateMolecule,
-  validateYield
+  validateYield,
 };
diff --git a/app/packs/src/components/chemrepo/UnsealButton.js b/app/packs/src/components/chemrepo/UnsealButton.js
new file mode 100644
index 000000000..391359ae6
--- /dev/null
+++ b/app/packs/src/components/chemrepo/UnsealButton.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { permitOn } from '../common/uis';
+import { getElementType } from './publication-utils';
+
+const UnsealBtn = (props) => {
+  const { element, fnUnseal } = props;
+  if (!element) return null;
+
+  return !permitOn(element) ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={
+        <Tooltip
+          id="_tooltip_unseal_button"
+          className="left_tooltip bs_tooltip"
+        >
+          {`This ${getElementType(
+            element
+          )} has been submitted and is currently locked for
+          modifications. You can 'Unseal' it for editing.`}
+        </Tooltip>
+      }
+    >
+      <div style={{ display: 'inline-block' }}>
+        <div onClick={fnUnseal}>
+          <span className="collection-label repo-btn-success" key={element.id}>
+            <Label>
+              <i className="fa fa-unlock" aria-hidden="true" />
+            </Label>
+          </span>
+        </div>
+      </div>
+    </OverlayTrigger>
+  ) : null;
+};
+
+UnsealBtn.propTypes = {
+  element: PropTypes.object.isRequired,
+  fnUnseal: PropTypes.func,
+};
+
+UnsealBtn.defaultProps = { fnUnseal: () => {} };
+
+export default UnsealBtn;
diff --git a/app/packs/src/components/chemrepo/publication-utils.js b/app/packs/src/components/chemrepo/publication-utils.js
new file mode 100644
index 000000000..6698cab70
--- /dev/null
+++ b/app/packs/src/components/chemrepo/publication-utils.js
@@ -0,0 +1,11 @@
+export const getElementType = (element) => {
+  return element?.tag?.taggable_type;
+};
+
+export const getPublicationId = (element) => {
+  const tag = element?.tag || {};
+  const tagData = tag.taggable_data || {};
+  const tagType = getElementType(element) || '';
+  const publishedId = tagData[`public_${tagType.toLowerCase()}`];
+  return publishedId;
+};
diff --git a/app/packs/src/components/common/uis.js b/app/packs/src/components/common/uis.js
index bb3bbb3b2..ccf98a244 100644
--- a/app/packs/src/components/common/uis.js
+++ b/app/packs/src/components/common/uis.js
@@ -1,3 +1,7 @@
-const permitWrite = element => !!element.can_update;
-export const permitCls = element => (permitWrite(element) ? '' : 'permission-r');
-export const permitOn = element => permitWrite(element);
+const permitWrite = (element) => {
+  if (!!element.can_update && !element.sealed) return true;
+  return false;
+};
+export const permitCls = (element) =>
+  permitWrite(element) ? '' : 'permission-r';
+export const permitOn = (element) => permitWrite(element);
diff --git a/app/packs/src/models/LiteratureMap.js b/app/packs/src/models/LiteratureMap.js
index eea0561a2..e98345332 100644
--- a/app/packs/src/models/LiteratureMap.js
+++ b/app/packs/src/models/LiteratureMap.js
@@ -36,8 +36,9 @@ export default class LiteratureMap {
   }
 
   checksum(fieldsToOmit = []) {
-    return sha256(JSON.stringify(_.omit(_.omit(this,
-      ['_checksum', ...fieldsToOmit],
+    return sha256(JSON.stringify(_.omit(_.omit(
+      this,
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'seal', ...fieldsToOmit],
     ), _.isEmpty)));
   }
 

From 4032eca78b7589ad85817a97464e9be0c5525c66 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 27 Jun 2023 09:52:38 +0200
Subject: [PATCH 149/258] Resolve "physical properties"

---
 app/api/helpers/repository_helpers.rb         |  2 +-
 .../src/components/chemrepo/PublicSample.js   |  7 +++++
 .../components/chemrepo/publication-utils.js  |  9 ++++--
 .../src/components/chemrepo/range-utils.js    | 18 +++++++++++
 app/packs/src/libHome/RepoCommon.js           | 31 ++++++-------------
 app/packs/src/libHome/RepoReactionDetails.js  |  4 +--
 app/packs/src/libHome/RepoSample.js           |  1 -
 app/packs/src/libHome/RepoSampleDetails.js    |  4 ++-
 app/packs/src/models/LiteratureMap.js         |  2 +-
 9 files changed, 47 insertions(+), 31 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/range-utils.js

diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 3e40ee46f..dd6b513e6 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -133,7 +133,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       end
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
       segments = Entities::SegmentEntity.represent(s.segments)
-      tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
+      tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
         sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
     x = published_samples.select { |s| s[:xvial].present? }
diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
index a462ea987..b515932ad 100644
--- a/app/packs/src/components/chemrepo/PublicSample.js
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 import { Citation, literatureContent, RefByUserInfo } from '../LiteratureCommon';
 import { ChemotionId, CommentBtn, Doi } from '../../libHome/RepoCommon';
+import getFormattedRange from './range-utils';
 
 const PublicSample = (_props) => {
   const {
@@ -73,6 +74,12 @@ const PublicSample = (_props) => {
           <div><div>{references}</div></div>
         </span>
       </h5>
+      <br />
+      <div>
+        <b>Physical Properties:</b>
+        <div>Melting point: {getFormattedRange(sample.melting_point)}</div>
+        <div>Boiling point: {getFormattedRange(sample.boiling_point)}</div>
+      </div>
     </div>
   );
 };
diff --git a/app/packs/src/components/chemrepo/publication-utils.js b/app/packs/src/components/chemrepo/publication-utils.js
index 6698cab70..3c1ccafcd 100644
--- a/app/packs/src/components/chemrepo/publication-utils.js
+++ b/app/packs/src/components/chemrepo/publication-utils.js
@@ -1,6 +1,4 @@
-export const getElementType = (element) => {
-  return element?.tag?.taggable_type;
-};
+export const getElementType = element => element?.tag?.taggable_type;
 
 export const getPublicationId = (element) => {
   const tag = element?.tag || {};
@@ -9,3 +7,8 @@ export const getPublicationId = (element) => {
   const publishedId = tagData[`public_${tagType.toLowerCase()}`];
   return publishedId;
 };
+
+export const getAuthorLabel = (authorIds) => {
+  if (!authorIds) return '';
+  return authorIds.length > 1 ? 'Authors:' : 'Author:';
+};
diff --git a/app/packs/src/components/chemrepo/range-utils.js b/app/packs/src/components/chemrepo/range-utils.js
new file mode 100644
index 000000000..b4f3e7f4f
--- /dev/null
+++ b/app/packs/src/components/chemrepo/range-utils.js
@@ -0,0 +1,18 @@
+const getFormattedRange = (data) => {
+  if (!data || data === '-Infinity...Infinity') {
+    return '';
+  }
+  const rangeRegex = /^([^.\s]+(?:\.[^.\s]+)?)\.{2,3}([^.\s]+(?:\.[^.\s]+)?)$/;
+  if (rangeRegex.test(data)) {
+    const [, startValue, endValue] = data.match(rangeRegex);
+    if (startValue === endValue || endValue === 'Infinity') {
+      return startValue;
+    } else if (startValue === '-Infinity') {
+      return endValue;
+    }
+    return `${startValue} - ${endValue}`;
+  }
+  return data;
+};
+
+export default getFormattedRange;
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 12fe13a3a..37968a503 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -59,6 +59,7 @@ import RepoMolViewerBtn from './RepoMolViewerBtn';
 import RepoMolViewerListBtn from './RepoMolViewerListBtn';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
+import getFormattedRange from '../components/chemrepo/range-utils';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -116,16 +117,6 @@ ChemotionId.propTypes = {
 const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
 
 
-const AuthorTitle = (authorIds) => {
-  if (authorIds && authorIds.length > 1) {
-    return 'Authors:';
-  }
-  if (authorIds && authorIds.length === 1) {
-    return 'Author:';
-  }
-  return '';
-};
-
 const NewsroomTemplate = {
   title: '', content: {}, article: []
 };
@@ -599,16 +590,6 @@ const BackSoonPage = () => {
   );
 };
 
-const ShowIndicator = (show) => {
-  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-};
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '2px',
-  marginRight: '2px'
-};
-
 const IconToMyDB = ({
   id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
 }) => {
@@ -1053,6 +1034,14 @@ const RenderAnalysisHeader = (props) => {
           <RepoSegment segments={element.segments} />
         </Col>
       </Row>
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          <h5><b>Physical Properties:</b></h5>
+          <div>Melting point: {getFormattedRange(element.melting_point)}</div>
+          <div>Boiling point: {getFormattedRange(element.boiling_point)}</div>
+        </Col>
+      </Row>
+      < br/>
     </div>
   );
 };
@@ -2329,7 +2318,6 @@ export {
   AnalysesTypeJoinLabel,
   AffiliationList,
   AuthorList,
-  AuthorTitle,
   BackSoonPage,
   CalcDuration,
   ChemotionId,
@@ -2372,7 +2360,6 @@ export {
   SchemeWord,
   SidToPubChem,
   OrcidIcon,
-  ShowIndicator,
   SvgPath,
   ToggleIndicator,
   CollectionDesc
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 40c0e1938..f471669d8 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -6,7 +6,6 @@ import { RepoCommentModal } from 'repo-review-ui';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AuthorList,
-  AuthorTitle,
   AffiliationList,
   CalcDuration,
   ChemotionId,
@@ -44,6 +43,7 @@ import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
 import Sample from '../components/models/Sample';
 import RepoSegment from './RepoSegment';
+import { getAuthorLabel } from '../components/chemrepo/publication-utils';
 
 export default class RepoReactionDetails extends Component {
   constructor(props) {
@@ -694,7 +694,7 @@ export default class RepoReactionDetails extends Component {
               showHelp={schemeOnly}
             />
             <h5>
-              <b>{AuthorTitle(taggData.author_ids)} </b>
+              <b>{getAuthorLabel(taggData.author_ids)} </b>
               <AuthorList
                 creators={taggData.creators}
                 affiliationMap={affiliationMap}
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 45739c2f3..4e742f032 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -246,7 +246,6 @@ export default class RepoSample extends Component {
           handleMaterialLink={this.handleMaterialLink}
         />
         <br />
-        <br />
         <div ref={this.materialRef}>
           <MAPanel
             isEditable={isReviewer}
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index c5234508e..ecc036a22 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -132,7 +132,9 @@ export default class RepoSampleDetails extends Component {
         molecule_iupac: molecule.iupac_name || [],
         molecule_id: molecule.id,
         analyses: s.analyses || element.analyses || [],
-        segments: s.segments || []
+        segments: s.segments || [],
+        boiling_point: s.boiling_point || '',
+        melting_point: s.melting_point || '',
       };
 
       return (
diff --git a/app/packs/src/models/LiteratureMap.js b/app/packs/src/models/LiteratureMap.js
index e98345332..116073ebd 100644
--- a/app/packs/src/models/LiteratureMap.js
+++ b/app/packs/src/models/LiteratureMap.js
@@ -38,7 +38,7 @@ export default class LiteratureMap {
   checksum(fieldsToOmit = []) {
     return sha256(JSON.stringify(_.omit(_.omit(
       this,
-      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'seal', ...fieldsToOmit],
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'sealed', ...fieldsToOmit],
     ), _.isEmpty)));
   }
 

From d7aefcb64061c295875918d720f0d79678ec80b1 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 26 Jun 2023 23:52:40 +0200
Subject: [PATCH 150/258] set license to CC BY as default

---
 app/packs/src/components/PublishReactionModal.js | 2 +-
 app/packs/src/components/PublishSampleModal.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index b65e01315..d5e18578f 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -70,7 +70,7 @@ export default class PublishReactionModal extends Component {
       literatures: new Immutable.Map(),
       sortedIds: [],
       selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
+      selectedLicense: 'CC BY',
       cc0Consent: { consent1: false, consent2: false },
       bundles: [],
       noSolvent: false,
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
index e26cfadd6..81a43e6d9 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -42,7 +42,7 @@ export default class PublishSampleModal extends Component {
       literatures: new Immutable.Map(),
       sortedIds: [],
       selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
+      selectedLicense: 'CC BY',
       cc0Consent: { consent1: false, consent2: false },
       bundles: [],
       noEmbargo: false

From cc591b406fa32e2b5705a3bfd39219f3654f7d7b Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 26 Jun 2023 13:02:10 +0200
Subject: [PATCH 151/258] creation date of import

---
 app/api/chemotion/gate_api.rb    |  2 +-
 lib/import/import_collections.rb | 22 ++--------------------
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/app/api/chemotion/gate_api.rb b/app/api/chemotion/gate_api.rb
index ad8cdd1f2..906697f1a 100644
--- a/app/api/chemotion/gate_api.rb
+++ b/app/api/chemotion/gate_api.rb
@@ -218,7 +218,7 @@ def self.parsed?(value)
             Delayed::Worker.logger.error e
             Message.create_msg_notification(
               channel_subject: Channel::COLLECTION_ZIP_FAIL,
-              message_from: @user_id,
+              message_from: @user&.id,
               data_args: { col_labels: '', operation: 'import' },
               autoDismiss: 5
             )
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 5b0d0c97c..1606986b4 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -244,8 +244,6 @@ def import_samples
           'density',
           'xref',
           'stereo',
-          'created_at',
-          'updated_at',
           'decoupled',
           'molecular_mass',
           'sum_formula',
@@ -304,8 +302,6 @@ def import_residues
         residue = Residue.create!(fields.slice(
           'residue_type',
           'custom_info',
-          'created_at',
-          'updated_at',
         ).merge(
           sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id')),
         ))
@@ -338,8 +334,6 @@ def import_reactions
           'rxno',
           'origin',
           'duration',
-          'created_at',
-          'updated_at',
         ).merge(
           created_by: @current_user_id,
           collections: fetch_many(
@@ -449,8 +443,6 @@ def import_wells
           'label',
           'color_code',
           'additive',
-          'created_at',
-          'updated_at',
         ).merge(
           wellplate: @instances.fetch('Wellplate').fetch(fields.fetch('wellplate_id')),
           sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id'), nil),
@@ -472,8 +464,6 @@ def import_screens
           'collaborator',
           'conditions',
           'requirements',
-          'created_at',
-          'updated_at',
         ).merge(
           collections: fetch_many(
             'Collection', 'CollectionsScreen', 'screen_id', 'collection_id', uuid
@@ -499,8 +489,6 @@ def import_research_plans
           'name',
           'description',
           'body',
-          'created_at',
-          'updated_at',
         ).merge(
           created_by: @current_user_id,
           collections: fetch_many(
@@ -537,8 +525,6 @@ def import_containers
                                                 'container_type',
                                                 'description',
                                                 'extended_metadata',
-                                                'created_at',
-                                                'updated_at',
                                               ))
         end
         # in any case, add container to the @instances map
@@ -610,9 +596,7 @@ def import_literals
                                             'title',
                                             'url',
                                             'refs',
-                                            'doi',
-                                            'created_at',
-                                            'updated_at',
+                                            'doi'
                                           ))
 
           # add literature to the @instances map
@@ -623,9 +607,7 @@ def import_literals
         literal = Literal.create!(
           fields.slice(
             'element_type',
-            'category',
-            'created_at',
-            'updated_at',
+            'category'
           ).merge(
             user_id: @current_user_id,
             element: element,

From 1b19e20d3e50ccf79bb28be5eb7546ee8cc4d40b Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 6 Jun 2023 11:31:54 +0200
Subject: [PATCH 152/258] fixed blank page issue on molecule archive after
 searching

---
 app/api/chemotion/search_api.rb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 29656bb25..72d61500b 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -8,6 +8,7 @@ class SearchAPI < Grape::API
 
     # TODO implement search cache?
     helpers CollectionHelpers
+    helpers CompoundHelpers
     helpers do
       params :search_params do
         optional :page, type: Integer
@@ -216,7 +217,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
           ttl_mol = Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql)
           slist = paginate(ttl_mol)
           sentities = Entities::MoleculePublicationListEntity.represent(slist, serializable: true)
-#byebug
+
           ssids = sentities.map { |e| e[:sid] }
 
           xvial_count_ssql = <<~SQL
@@ -233,6 +234,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
           sentities = sentities.each do |obj|
             obj[:xvial_count] = 1 if x_cnt_sids.include?(obj[:sid])
             obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_sids || []).include?(obj[:sid])
+            obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], true)
           end
 
           filter_reactions = Reaction.where("reactions.id in (?)", reactions)

From b70434906418691d0840b2003e3d4fb426bd7947 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 27 Jun 2023 23:39:31 +0200
Subject: [PATCH 153/258] introduce linked data component

---
 app/api/chemotion/public_api.rb               |  5 ++++
 app/models/concerns/metadata_jsonld.rb        |  6 ++--
 app/packs/src/components/chemrepo/LdData.js   | 22 ++++++++++++++
 .../src/components/fetchers/PublicFetcher.js  |  8 +++++
 app/packs/src/libHome/RepoCommon.js           | 30 +++++++++++--------
 5 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/LdData.js

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 8b31931f6..f87396810 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -856,6 +856,11 @@ def query_embargo(name)
           env['api.format'] = :binary
           @publication.json_ld
         end
+
+        desc "Get JSON-Link Data"
+        get :jsonld do
+          @publication.json_ld
+        end
       end
 
       resource :published_statics do
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 4602f8cff..1cc8dba33 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -201,9 +201,9 @@ def json_ld_citation(lit, id)
     bb = DataCite::LiteraturePaser.parse_bibtex!(bib, id)
     bb = DataCite::LiteraturePaser.get_metadata(bb, lit[:doi], id) unless bb.class == BibTeX::Entry
     dc_lit = DataCite::LiteraturePaser.report_hash(lit, bb) if bb.class == BibTeX::Entry
-    json['name'] = dc_lit[:title]
-    json['author'] = dc_lit[:author]
-    json['url'] = dc_lit[:url]
+    json['name'] = dc_lit[:title] unless dc_lit.blank?
+    json['author'] = dc_lit[:author] unless dc_lit.blank?
+    json['url'] = dc_lit[:url] unless dc_lit.blank?
     json
   end
 
diff --git a/app/packs/src/components/chemrepo/LdData.js b/app/packs/src/components/chemrepo/LdData.js
new file mode 100644
index 000000000..90f62e847
--- /dev/null
+++ b/app/packs/src/components/chemrepo/LdData.js
@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import PublicFetcher from '../fetchers/PublicFetcher';
+
+const LdData = ({ type, id }) => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    PublicFetcher.getLD(type, id).then((result) => {
+      setData(result);
+    });
+  }, []);
+
+  return (
+    <>
+      { data ? <script type="application/ld+json">{JSON.stringify(data)}</script> : null }
+    </>
+  );
+};
+
+LdData.propTypes = { type: PropTypes.string.isRequired, id: PropTypes.number.isRequired };
+export default LdData;
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index a21464274..9ea56846d 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -258,4 +258,12 @@ export default class PublicFetcher {
       console.log(errorMessage);
     });
   }
+
+  static getLD(type, id) {
+    const api = `/api/v1/public/metadata/jsonld?type=${type}&id=${id}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
 }
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 37968a503..198192054 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -60,6 +60,7 @@ import RepoMolViewerListBtn from './RepoMolViewerListBtn';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
 import getFormattedRange from '../components/chemrepo/range-utils';
+import LdData from '../components/chemrepo/LdData';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -263,20 +264,23 @@ const DownloadMetadataBtn = (l) => {
 const DownloadJsonBtn = (l) => {
   const contentUrl = `/api/v1/public/metadata/download_json?type=${l.type.toLowerCase()}&id=${l.id}`;
   return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download JSON-LD</Tooltip>}
-    >
-      <Button
-        style={{ backgroundColor: 'grey', color:'white', marginLeft: '5px' }}
-        bsSize="xsmall"
-        onClick={() => Utils.downloadFile({
-          contents: contentUrl
-        })}
+    <>
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download JSON-LD</Tooltip>}
       >
-        JSON-LD
-      </Button>
-    </OverlayTrigger>
+        <Button
+          style={{ backgroundColor: 'grey', color:'white', marginLeft: '5px' }}
+          bsSize="xsmall"
+          onClick={() => Utils.downloadFile({
+            contents: contentUrl
+          })}
+        >
+          JSON-LD
+        </Button>
+      </OverlayTrigger>
+      <LdData type={l.type.toLowerCase()} id={l.id} />
+    </>
   );
 };
 

From 5bd1310c0cdf6468dfec3acd65576c114bffa1a3 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 28 Jun 2023 00:04:55 +0200
Subject: [PATCH 154/258] add info to lock element function

---
 .../src/components/chemrepo/UnsealButton.js   | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/packs/src/components/chemrepo/UnsealButton.js b/app/packs/src/components/chemrepo/UnsealButton.js
index 391359ae6..d9cc92f42 100644
--- a/app/packs/src/components/chemrepo/UnsealButton.js
+++ b/app/packs/src/components/chemrepo/UnsealButton.js
@@ -1,6 +1,7 @@
+/* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { permitOn } from '../common/uis';
 import { getElementType } from './publication-utils';
 
@@ -9,30 +10,27 @@ const UnsealBtn = (props) => {
   if (!element) return null;
 
   return !permitOn(element) ? (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={
-        <Tooltip
-          id="_tooltip_unseal_button"
-          className="left_tooltip bs_tooltip"
-        >
-          {`This ${getElementType(
-            element
-          )} has been submitted and is currently locked for
-          modifications. You can 'Unseal' it for editing.`}
-        </Tooltip>
-      }
-    >
-      <div style={{ display: 'inline-block' }}>
-        <div onClick={fnUnseal}>
-          <span className="collection-label repo-btn-success" key={element.id}>
-            <Label>
-              <i className="fa fa-unlock" aria-hidden="true" />
-            </Label>
-          </span>
-        </div>
-      </div>
-    </OverlayTrigger>
+    <>
+      <OverlayTrigger
+        placement="bottom"
+        overlay={
+          <Tooltip
+            id="_tooltip_unseal_button"
+            className="left_tooltip bs_tooltip"
+          >
+            {`This ${getElementType(
+              element
+            )} has been submitted and is currently locked for
+          modifications. Click to 'Unseal' it for editing.`}
+          </Tooltip>
+        }
+      >
+        <Button bsSize="xsmall" bsStyle="success" onClick={fnUnseal}>
+          <i className="fa fa-lock" aria-hidden="true" />
+          &nbsp; Locked
+        </Button>
+      </OverlayTrigger>
+    </>
   ) : null;
 };
 

From afd939fa544dda0602565ade4b6afce91ae66b5e Mon Sep 17 00:00:00 2001
From: NRayya <82588017+NRayya@users.noreply.github.com>
Date: Sat, 24 Jun 2023 19:14:48 +0200
Subject: [PATCH 155/258] expand dataCatalog schema

---
 app/models/concerns/metadata_jsonld.rb | 83 ++++++++++++++++++++++++--
 1 file changed, 79 insertions(+), 4 deletions(-)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 1cc8dba33..a9400ad0a 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -13,7 +13,7 @@ def json_ld
       json_ld_reaction
     elsif element_type == 'Container'
       json_ld_container
-    end
+    end 
   end
 
   def json_ld_sample_root(pub = self)
@@ -47,16 +47,91 @@ def json_ld_data_catalog(pub = self)
     json['@type'] = 'DataCatalog'
     json['@id'] = 'https://www.chemotion-repository.net'
     json['dct:conformsTo'] = {
-      "@id": 'https://bioschemas.org/profiles/DataCatalog/0.3-RELEASE-2019_07_01',
-      "@type": 'CreativeWork'
+      "@type": 'CreativeWork',
+      "@id": 'https://schema.org/DataCatalog'
     }
-    json['description'] = 'Chemotion Repository'
+    json['description'] = 'Repository for samples, reactions and related research data.'
+    json['keywords'] = data_catalog_keywords
     json['name'] = 'Chemotion Repository'
+    json['provider'] = data_catalog_provider
     json['url'] = 'https://www.chemotion-repository.net'
+    json['license'] = 'https://www.gnu.org/licenses/agpl-3.0.en.html'
+    json['contributor'] = data_catalog_contributors
+    json['isAccessibleForFree'] = true
+    json['measurementTechnique'] = ['https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000591', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000470', 'http://purl.obolibrary.org/obo/CHMO_0000630', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/OBI_0000011']
+    json
+  end
+
+  def json_ld_defined_term_set(name,url)
+    {
+      json = {}
+      json['@type'] = "DefinedTermSet"
+      json['name'] = name
+      json['url'] = url
+      json
+    }
+  end
+
+  def json_ld_defined_term(name, alternate_name ,url,defined_term_set, id)
+    {
+      json = {}
+      json['@type'] = "DefinedTerm"
+      json['name'] = name
+      json['alternateName'] = alternate_name
+      json['url'] = url
+      json['inDefinedTermSet'] = defined_term_set
+      json['@id'] = id
+      json
+    }
+  end
+
+  def json_ld_person(id, given_name, family_name)
+  {
+    json = {}
+    json['@type'] = "Person"
+    json['givenName'] = given_name
+    json['familyName'] = family_name
+    json['@id'] = id
     json
+  }
+
+  def data_catalog_keywords
+    sio = json_ld_defined_term_set('Semanticscience Integrated Ontology', 'https://raw.githubusercontent.com/micheldumontier/semanticscience/master/ontology/sio/release/sio-release.owl')
+    ncit = json_ld_defined_term_set('NCI Thesaurus OBO Edition', 'http://purl.obolibrary.org/obo/ncit/releases/2022-08-19/ncit.owl')
+    chmo = json_ld_defined_term_set('Chemical Methods Ontology', 'http://purl.obolibrary.org/obo/chmo/releases/2022-04-19/chmo.owl')
+
+    sample = json_ld_defined_term('sample', null, 'http://semanticscience.org/resource/SIO_001050', sio, 'SIO:001050')
+    reaction = json_ld_defined_term('chemical reaction', null, 'http://semanticscience.org/resource/SIO_010345', sio, 'SIO:010345')
+    analytical_chemistry = json_ld_defined_term('Analytical Chemistry',['Chemistry, Analytical'], 'http://purl.obolibrary.org/obo/NCIT_C16415', ncit, 'NCIT:C16415')
+    nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000591', chmo, 'CHMO:0000591')
+    ms = json_ld_defined_term('mass spectrometry', ['MS'], 'http://purl.obolibrary.org/obo/CHMO_0000470', chmo, 'CHMO:0000470')
+    ir = json_ld_defined_term('infrared absorption spectroscopy',['infrared (IR) spectroscopy, IR, infra-red absorption spectroscopy, IR spectroscopy, IR absorption spectroscopy, infrared spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000630', chmo, 'CHMO:0000630')
 
+    arr = [sample, reaction, analytical_chemistry, nmr, ms, ir]
+    arr
+  end
+
+  def data_catalog_contributors
+    an = json_ld_person('0000-0002-1692-6778', 'An', 'Nguyen')
+    chia_lin = json_ld_person('0000-0002-9772-0455', 'Chia-Lin', 'Lin')
+    felix = json_ld_person('0000-0002-5035-7978', 'Felix', 'Bach')
+    nicole = json_ld_person('0000-0001-9513-2468', 'Nicole', 'Jung')
+    pei_chi = json_ld_person('0000-0002-9976-4507', 'Pei-Chi', 'Huang')
+    pierre = json_ld_person('0000-0002-0487-3947', 'Pierre', 'Tremouilhac')
+    stefan = json_ld_person('0000-0003-4845-3191', 'Stefan', 'Braese')
+    yu_chieh = json_ld_person('0000-0002-4261-9886', 'Yu-Chieh', 'Huang')
+    
+    arr = [an, chia_lin, felix, nicole, pei_chi, pierre, stefan, yu_chieh]
+    arr
   end
 
+  def data_catalog_provider
+    {
+      "@type": "Organization"
+      "name": "Karlsruhe Institute of Technology (KIT)"
+      "url": "https://www.kit.edu/"
+    }
+  
   def conforms_to
     {
       "@id": "https://bioschemas.org/profiles/Study/0.3-DRAFT",

From fbfe087f363368ca25a20a15627398ed184cc245 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 30 Jun 2023 15:56:29 +0200
Subject: [PATCH 156/258] correct dataCatalog syntax error

---
 app/models/concerns/metadata_jsonld.rb | 52 ++++++++++++--------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index a9400ad0a..c5b03a5b2 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -13,7 +13,7 @@ def json_ld
       json_ld_reaction
     elsif element_type == 'Container'
       json_ld_container
-    end 
+    end
   end
 
   def json_ld_sample_root(pub = self)
@@ -63,37 +63,32 @@ def json_ld_data_catalog(pub = self)
   end
 
   def json_ld_defined_term_set(name,url)
-    {
-      json = {}
-      json['@type'] = "DefinedTermSet"
-      json['name'] = name
-      json['url'] = url
-      json
-    }
+    json = {}
+    json['@type'] = 'DefinedTermSet'
+    json['name'] = name
+    json['url'] = url
+    json
   end
 
   def json_ld_defined_term(name, alternate_name ,url,defined_term_set, id)
-    {
-      json = {}
-      json['@type'] = "DefinedTerm"
-      json['name'] = name
-      json['alternateName'] = alternate_name
-      json['url'] = url
-      json['inDefinedTermSet'] = defined_term_set
-      json['@id'] = id
-      json
-    }
+    json = {}
+    json['@type'] = 'DefinedTerm'
+    json['name'] = name
+    json['alternateName'] = alternate_name
+    json['url'] = url
+    json['inDefinedTermSet'] = defined_term_set
+    json['@id'] = id
+    json
   end
 
   def json_ld_person(id, given_name, family_name)
-  {
     json = {}
-    json['@type'] = "Person"
+    json['@type'] = 'Person'
     json['givenName'] = given_name
     json['familyName'] = family_name
     json['@id'] = id
     json
-  }
+  end
 
   def data_catalog_keywords
     sio = json_ld_defined_term_set('Semanticscience Integrated Ontology', 'https://raw.githubusercontent.com/micheldumontier/semanticscience/master/ontology/sio/release/sio-release.owl')
@@ -120,22 +115,23 @@ def data_catalog_contributors
     pierre = json_ld_person('0000-0002-0487-3947', 'Pierre', 'Tremouilhac')
     stefan = json_ld_person('0000-0003-4845-3191', 'Stefan', 'Braese')
     yu_chieh = json_ld_person('0000-0002-4261-9886', 'Yu-Chieh', 'Huang')
-    
+
     arr = [an, chia_lin, felix, nicole, pei_chi, pierre, stefan, yu_chieh]
     arr
   end
 
   def data_catalog_provider
     {
-      "@type": "Organization"
-      "name": "Karlsruhe Institute of Technology (KIT)"
-      "url": "https://www.kit.edu/"
+      "@type": 'Organization',
+      "name": 'Karlsruhe Institute of Technology (KIT)',
+      "url": 'https://www.kit.edu/'
     }
-  
+  end
+
   def conforms_to
     {
-      "@id": "https://bioschemas.org/profiles/Study/0.3-DRAFT",
-      "@type": "CreativeWork"
+      "@id": 'https://bioschemas.org/profiles/Study/0.3-DRAFT',
+      "@type": 'CreativeWork'
     }
   end
 

From 23c505ed8361dbe9d8f67f8ccc00c6adcde500f7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 30 Jun 2023 17:03:49 +0200
Subject: [PATCH 157/258] fix data catalog syntax error and add styling

---
 app/models/concerns/metadata_jsonld.rb                   | 6 +++---
 .../apps/mydb/elements/details/samples/SampleDetails.js  | 2 +-
 app/packs/src/components/PublishCommon.js                | 2 +-
 app/packs/src/components/chemrepo/range-utils.js         | 9 +++++----
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index c5b03a5b2..75edc581e 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -70,7 +70,7 @@ def json_ld_defined_term_set(name,url)
     json
   end
 
-  def json_ld_defined_term(name, alternate_name ,url,defined_term_set, id)
+  def json_ld_defined_term(name, alternate_name, url, defined_term_set, id)
     json = {}
     json['@type'] = 'DefinedTerm'
     json['name'] = name
@@ -95,8 +95,8 @@ def data_catalog_keywords
     ncit = json_ld_defined_term_set('NCI Thesaurus OBO Edition', 'http://purl.obolibrary.org/obo/ncit/releases/2022-08-19/ncit.owl')
     chmo = json_ld_defined_term_set('Chemical Methods Ontology', 'http://purl.obolibrary.org/obo/chmo/releases/2022-04-19/chmo.owl')
 
-    sample = json_ld_defined_term('sample', null, 'http://semanticscience.org/resource/SIO_001050', sio, 'SIO:001050')
-    reaction = json_ld_defined_term('chemical reaction', null, 'http://semanticscience.org/resource/SIO_010345', sio, 'SIO:010345')
+    sample = json_ld_defined_term('sample', nil, 'http://semanticscience.org/resource/SIO_001050', sio, 'SIO:001050')
+    reaction = json_ld_defined_term('chemical reaction', nil, 'http://semanticscience.org/resource/SIO_010345', sio, 'SIO:010345')
     analytical_chemistry = json_ld_defined_term('Analytical Chemistry',['Chemistry, Analytical'], 'http://purl.obolibrary.org/obo/NCIT_C16415', ncit, 'NCIT:C16415')
     nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000591', chmo, 'CHMO:0000591')
     ms = json_ld_defined_term('mass spectrometry', ['MS'], 'http://purl.obolibrary.org/obo/CHMO_0000470', chmo, 'CHMO:0000470')
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 027534d41..d02465b12 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -76,6 +76,7 @@ import CommentActions from 'src/stores/alt/actions/CommentActions';
 import CommentModal from 'src/components/common/CommentModal';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
+// For REPO
 import RepositoryActions from './actions/RepositoryActions';
 import PublishSampleModal from './PublishSampleModal';
 import RepoXvialButton from './common/RepoXvialButton';
@@ -659,7 +660,6 @@ export default class SampleDetails extends React.Component {
           {colLabel}
           <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
           <PubchemLabels element={sample} />
-          <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
           <OrigElnTag element={sample} />
           <PublishedTag element={sample} fnUnseal={this.unseal} />
           <LabelPublication element={sample} />
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index c68084c46..4f89b09c9 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -184,7 +184,7 @@ const OrigElnTag = ({ element }) => {
   const tag = (element && element.tag) || {};
   const tagData = (tag && tag.taggable_data) || {};
   const elnInfo = (tagData && tagData.eln_info) || {};
-  if (Object.keys(elnInfo).length === 0) return <div />;
+  if (Object.keys(elnInfo).length === 0) return null;
 
   const tip = `go to original ELN: ${elnInfo.short_label}`;
 
diff --git a/app/packs/src/components/chemrepo/range-utils.js b/app/packs/src/components/chemrepo/range-utils.js
index b4f3e7f4f..e771fe497 100644
--- a/app/packs/src/components/chemrepo/range-utils.js
+++ b/app/packs/src/components/chemrepo/range-utils.js
@@ -2,17 +2,18 @@ const getFormattedRange = (data) => {
   if (!data || data === '-Infinity...Infinity') {
     return '';
   }
+  const result = _result => `${_result} °C`;
   const rangeRegex = /^([^.\s]+(?:\.[^.\s]+)?)\.{2,3}([^.\s]+(?:\.[^.\s]+)?)$/;
   if (rangeRegex.test(data)) {
     const [, startValue, endValue] = data.match(rangeRegex);
     if (startValue === endValue || endValue === 'Infinity') {
-      return startValue;
+      return result(startValue);
     } else if (startValue === '-Infinity') {
-      return endValue;
+      return result(endValue);
     }
-    return `${startValue} - ${endValue}`;
+    return result(`${startValue} - ${endValue}`);
   }
-  return data;
+  return result(data);
 };
 
 export default getFormattedRange;

From cac3746229e6783819bd3d4279c49c0cb11ff2eb Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 3 Jul 2023 13:59:33 +0200
Subject: [PATCH 158/258] compounds for public

---
 app/api/chemotion/repository_api.rb           | 14 +++++++------
 app/api/helpers/repository_helpers.rb         |  3 ++-
 .../components/chemrepo/MoleculeArchive.js    | 10 ++--------
 .../src/components/chemrepo/ma/MAGrid.js      |  5 +++--
 .../src/components/chemrepo/ma/MAModals.js    | 14 +++++++------
 .../src/components/common/RepoXvialButton.js  | 20 ++++++++++---------
 .../components/fetchers/RepositoryFetcher.js  |  2 +-
 app/packs/src/libHome/RepoSample.js           |  1 +
 app/packs/src/libHome/RepoSampleDetails.js    |  1 +
 9 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 68c8ff508..34f0f709f 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -461,6 +461,7 @@ def add_submission_history(root)
         params do
           requires :id, type: Integer, desc: 'Element id'
           optional :data, type: String
+          optional :xcomp, type: String
         end
         resource :request do
           post do
@@ -477,12 +478,13 @@ def add_submission_history(root)
           end
           post do
             data = @pub.taggable_data || {}
-            xvail = data['xvial'] || {}
-            xvail['num'] = params[:data]
-            xvail['username'] = current_user.name
-            xvail['userid'] = current_user.id
-            xvail['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
-            data['xvial'] = xvail
+            xvial = data['xvial'] || {}
+            xvial['num'] = params[:data]
+            xvial['comp_num'] = params[:xcomp]
+            xvial['username'] = current_user.name
+            xvial['userid'] = current_user.id
+            xvial['timestamp'] = Time.now.strftime('%d-%m-%Y %H:%M:%S')
+            data['xvial'] = xvial
             @pub.update!(taggable_data: data)
           end
         end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index dd6b513e6..17dc387db 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -123,6 +123,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
           xvial = 'x'
         end
       end
+      comp_num = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['comp_num'] unless s.tag.taggable_data.nil?
       pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
       ana_infos = {}
       pub.descendants.each do |pp|
@@ -134,7 +135,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
       segments = Entities::SegmentEntity.represent(s.segments)
       tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
-        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
+        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, comp_num: comp_num, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
     x = published_samples.select { |s| s[:xvial].present? }
     xvial_com[:hasSample] = x.length.positive?
diff --git a/app/packs/src/components/chemrepo/MoleculeArchive.js b/app/packs/src/components/chemrepo/MoleculeArchive.js
index eb63a09b5..db0c0b218 100644
--- a/app/packs/src/components/chemrepo/MoleculeArchive.js
+++ b/app/packs/src/components/chemrepo/MoleculeArchive.js
@@ -4,15 +4,9 @@ import { ToggleIndicator } from '../../libHome/RepoCommon';
 import { MARegisteredTooltip } from './ma/MAComs';
 import { MADataModal, MARequestModal } from './ma/MAModals';
 
-const CompNumber = (xvialCom, data = '') => {
-  if (!xvialCom || typeof xvialCom === 'undefined' || !xvialCom.allowed || !xvialCom.hasData || data === '') return null;
-  const match = xvialCom.data.find(x => x.x_data.xid === data);
-  return match ? <span>:&nbsp;{match.x_short_label}</span> : null;
-};
-
 const MAPanel = (_props) => {
   const {
-    allowRequest, elementId, isEditable, isLogin, data, saveCallback, xvialCom
+    allowRequest, compNum, elementId, isEditable, isLogin, data, saveCallback, xvialCom
   } = _props;
   const [expanded, setExpanded] = useState(true);
 
@@ -31,7 +25,7 @@ const MAPanel = (_props) => {
       <Panel style={{ border: 'none' }} id="collapsible-panel-ma-panel" expanded={expanded} defaultExpanded={expanded} onToggle={() => { }}>
         <Panel.Collapse>
           <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-            <b>Sample Registration Number in Molecule Archive</b>{CompNumber(xvialCom, data)} <br />
+            <b>Sample Registration Number in Molecule Archive:</b> {compNum} <br />
             <b>Request a sample:</b> <MARequestModal allowRequest={allowRequest} data={data} elementId={elementId} isLogin={isLogin} />
           </Panel.Body>
         </Panel.Collapse>
diff --git a/app/packs/src/components/chemrepo/ma/MAGrid.js b/app/packs/src/components/chemrepo/ma/MAGrid.js
index 51e2377b6..5c7d0a156 100644
--- a/app/packs/src/components/chemrepo/ma/MAGrid.js
+++ b/app/packs/src/components/chemrepo/ma/MAGrid.js
@@ -30,7 +30,7 @@ const MAGrid = (props) => {
     const selectedRows = event.api.getSelectedRows();
     if (selectedRows.length > 0) {
       const selectedRow = selectedRows[0];
-      fnSelect(selectedRow.x_data.xid);
+      fnSelect(selectedRow.x_data.xid, selectedRow.x_short_label);
     }
   };
 
@@ -60,8 +60,9 @@ const MAGrid = (props) => {
 
 MAGrid.propTypes = {
   xvialCompounds: PropTypes.object.isRequired,
-  data: PropTypes.string.isRequired,
+  data: PropTypes.string,
   fnSelect: PropTypes.func.isRequired,
 };
 
+MAGrid.defaultProps = { data: null };
 export default MAGrid;
diff --git a/app/packs/src/components/chemrepo/ma/MAModals.js b/app/packs/src/components/chemrepo/ma/MAModals.js
index 615f10650..c7af96224 100644
--- a/app/packs/src/components/chemrepo/ma/MAModals.js
+++ b/app/packs/src/components/chemrepo/ma/MAModals.js
@@ -50,7 +50,7 @@ export const MARequestModal = (props) => {
   };
 
   const request = () => {
-    RepositoryFetcher.compound(elementId, rInput.value, 'request').then(() => {
+    RepositoryFetcher.compound(elementId, { xid: rInput.value }, 'request').then(() => {
       setRequestModalShow(false);
       const notification = notificationSystem.current;
       notification.addNotification({
@@ -131,6 +131,7 @@ export const MADataModal = (props) => {
   const { data, elementId, isEditable, saveCallback, xvialCom } = props;
   const [dataModalShow, setDataModalShow] = useState(false);
   const [newData, setNewData] = useState(data);
+  const [newComp, setNewComp] = useState(null);
 
   if (!isEditable) return null;
 
@@ -138,19 +139,20 @@ export const MADataModal = (props) => {
     setNewData(data);
   }, [dataModalShow, data]);
 
-  const selectXvial = (xid) => {
+  const selectXvial = (xid, xcomp) => {
     setNewData(xid);
+    setNewComp(xcomp);
   };
 
   const save = () => {
-    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
+    RepositoryFetcher.compound(elementId, { xid: newData, xcomp: newComp }, 'update').then(() => {
       setDataModalShow(false);
       saveCallback(elementId, newData);
     });
   };
 
   const remove = () => {
-    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
+    RepositoryFetcher.compound(elementId, {}, 'update').then(() => {
       setDataModalShow(false);
       saveCallback(elementId, '');
     });
@@ -178,7 +180,7 @@ export const MADataModal = (props) => {
           <Modal.Title>Compound X-Vial number</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <FormControl type="text" value={newData} readOnly />
+          <FormControl type="text" defaultValue={newData} readOnly />
           {CompoundList(xvialCom, newData, selectXvial)}
           <div>
             <i className="fa fa-info-circle" aria-hidden="true" />
@@ -218,4 +220,4 @@ MADataModal.propTypes = {
   xvialCom: PropTypes.object.isRequired,
 };
 
-MADataModal.defaultProps = { data: null, saveCallback: () => {} };
+MADataModal.defaultProps = { data: null, saveCallback: () => { } };
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
index 46d94dede..2cb5790fe 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -43,6 +43,7 @@ export default class RepoXvialButton extends React.Component {
       dataModalShow: false,
       requestModalShow: false,
       newData: props.data,
+      newComp: null,
     };
     this.save = this.save.bind(this);
     this.remove = this.remove.bind(this);
@@ -59,12 +60,12 @@ export default class RepoXvialButton extends React.Component {
     }
   }
 
-  setNewData(newData) {
-    this.setState({ newData });
+  setNewData(newData, newComp = null) {
+    this.setState({ newData, newComp });
   }
 
-  selectXvial(xid) {
-    this.setNewData(xid);
+  selectXvial(xid, xcomp) {
+    this.setNewData(xid, xcomp);
   }
 
   checkRequest() {
@@ -81,9 +82,9 @@ export default class RepoXvialButton extends React.Component {
   }
 
   save() {
-    const { newData } = this.state;
+    const { newData, newComp } = this.state;
     const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
+    RepositoryFetcher.compound(elementId, { xid: newData, xcomp: newComp }, 'update').then(() => {
       this.closeModal();
       saveCallback(elementId, newData);
     });
@@ -91,7 +92,7 @@ export default class RepoXvialButton extends React.Component {
 
   remove() {
     const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
+    RepositoryFetcher.compound(elementId, {}, 'update').then(() => {
       this.closeModal();
       saveCallback(elementId, '');
     });
@@ -99,7 +100,7 @@ export default class RepoXvialButton extends React.Component {
 
   request() {
     const { elementId } = this.props;
-    RepositoryFetcher.compound(elementId, this.rInput.value, 'request').then(
+    RepositoryFetcher.compound(elementId, { xid: this.rInput.value }, 'request').then(
       () => {
         this.closeModal();
         NotificationActions.add({
@@ -117,6 +118,7 @@ export default class RepoXvialButton extends React.Component {
       dataModalShow: false,
       requestModalShow: false,
       newData: this.props.data,
+      newComp: null,
     });
   }
 
@@ -323,5 +325,5 @@ RepoXvialButton.defaultProps = {
   isLogin: false,
   allowRequest: false,
   data: null,
-  saveCallback: () => {},
+  saveCallback: () => { },
 };
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index ea7a1557f..649c27fe9 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -377,7 +377,7 @@ export default class RepositoryFetcher {
       credentials: 'same-origin',
       method: 'POST',
       headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, data })
+      body: JSON.stringify({ id, data: data?.xid, xcomp: data?.xcomp })
     }).then(response => response.json())
       .catch((errorMessage) => {
         console.log(errorMessage);
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 4e742f032..7468bdea4 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -248,6 +248,7 @@ export default class RepoSample extends Component {
         <br />
         <div ref={this.materialRef}>
           <MAPanel
+            compNum={sample.comp_num}
             isEditable={isReviewer}
             isLogin={isLogin}
             allowRequest
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index ecc036a22..7a28e6c3d 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -115,6 +115,7 @@ export default class RepoSampleDetails extends Component {
         decoupled: s.decoupled,
         sid: s.sid,
         short_label: s.short_label || '',
+        comp_num: s.comp_num || '',
         xvial: s.xvial,
         embargo: s.embargo,
         pub_info: s.pub_info,

From dfde4aa58aee26ce7993b819479602acbcc4e7bb Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 3 Jul 2023 12:47:09 +0200
Subject: [PATCH 159/258] enable oo

---
 .../wellplates/attachmentsTab/WellplateDetailsAttachments.js    | 2 +-
 config/routes.rb                                                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
index 9ea6c177e..fa344b177 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
@@ -79,7 +79,7 @@ export default class WellplateDetailsAttachments extends Component {
     EditorFetcher.startEditing({ attachment_id: attachment.id })
       .then((result) => {
         if (result.token) {
-          const url = `/editor?id=${attachment.id}&docType=${docType}&fileType=${fileType}&title=${attachment.filename}&key=${result.token}`;
+          const url = `/editor?id=${attachment.id}&docType=${docType}&fileType=${fileType}&title=${attachment.filename}&key=${result.token}&only_office_token=${result.only_office_token}`;
           window.open(url, '_blank');
 
           attachment.aasm_state = 'oo_editing';
diff --git a/config/routes.rb b/config/routes.rb
index 146a084bf..d5cf0a9e7 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -67,7 +67,7 @@
 
   # Standalone page for ChemScanner
   # get 'chemscanner', to: 'pages#chemscanner'
-  # get 'editor',      to: 'pages#editor'
+  get 'editor',      to: 'pages#editor'
 
   # Standalone page for ChemSpectra
 #  get 'chemspectra', to: 'pages#chemspectra'

From c5903e8ad93c291a593370cca5b0d94b16304fd4 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 4 Jul 2023 16:06:30 +0200
Subject: [PATCH 160/258] add license to linked data

---
 app/models/concerns/metadata_jsonld.rb | 33 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 75edc581e..b38776de0 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -51,14 +51,14 @@ def json_ld_data_catalog(pub = self)
       "@id": 'https://schema.org/DataCatalog'
     }
     json['description'] = 'Repository for samples, reactions and related research data.'
-    json['keywords'] = data_catalog_keywords
+    json['keywords'] = data_catalog_keywords(pub)
     json['name'] = 'Chemotion Repository'
     json['provider'] = data_catalog_provider
     json['url'] = 'https://www.chemotion-repository.net'
     json['license'] = 'https://www.gnu.org/licenses/agpl-3.0.en.html'
     json['contributor'] = data_catalog_contributors
     json['isAccessibleForFree'] = true
-    json['measurementTechnique'] = ['https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000591', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000470', 'http://purl.obolibrary.org/obo/CHMO_0000630', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/OBI_0000011']
+    # json['measurementTechnique'] = ['https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000591', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/CHMO_0000470', 'http://purl.obolibrary.org/obo/CHMO_0000630', 'https://ontobee.org/ontology/CHMO?iri=http://purl.obolibrary.org/obo/OBI_0000011']
     json
   end
 
@@ -90,7 +90,7 @@ def json_ld_person(id, given_name, family_name)
     json
   end
 
-  def data_catalog_keywords
+  def data_catalog_keywords(pub = self)
     sio = json_ld_defined_term_set('Semanticscience Integrated Ontology', 'https://raw.githubusercontent.com/micheldumontier/semanticscience/master/ontology/sio/release/sio-release.owl')
     ncit = json_ld_defined_term_set('NCI Thesaurus OBO Edition', 'http://purl.obolibrary.org/obo/ncit/releases/2022-08-19/ncit.owl')
     chmo = json_ld_defined_term_set('Chemical Methods Ontology', 'http://purl.obolibrary.org/obo/chmo/releases/2022-04-19/chmo.owl')
@@ -98,11 +98,12 @@ def data_catalog_keywords
     sample = json_ld_defined_term('sample', nil, 'http://semanticscience.org/resource/SIO_001050', sio, 'SIO:001050')
     reaction = json_ld_defined_term('chemical reaction', nil, 'http://semanticscience.org/resource/SIO_010345', sio, 'SIO:010345')
     analytical_chemistry = json_ld_defined_term('Analytical Chemistry',['Chemistry, Analytical'], 'http://purl.obolibrary.org/obo/NCIT_C16415', ncit, 'NCIT:C16415')
-    nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000591', chmo, 'CHMO:0000591')
-    ms = json_ld_defined_term('mass spectrometry', ['MS'], 'http://purl.obolibrary.org/obo/CHMO_0000470', chmo, 'CHMO:0000470')
-    ir = json_ld_defined_term('infrared absorption spectroscopy',['infrared (IR) spectroscopy, IR, infra-red absorption spectroscopy, IR spectroscopy, IR absorption spectroscopy, infrared spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000630', chmo, 'CHMO:0000630')
 
-    arr = [sample, reaction, analytical_chemistry, nmr, ms, ir]
+#    nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000591', chmo, 'CHMO:0000591')
+#    ms = json_ld_defined_term('mass spectrometry', ['MS'], 'http://purl.obolibrary.org/obo/CHMO_0000470', chmo, 'CHMO:0000470')
+#    ir = json_ld_defined_term('infrared absorption spectroscopy',['infrared (IR) spectroscopy, IR, infra-red absorption spectroscopy, IR spectroscopy, IR absorption spectroscopy, infrared spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000630', chmo, 'CHMO:0000630')
+
+    arr = [sample, reaction, analytical_chemistry]
     arr
   end
 
@@ -168,7 +169,9 @@ def json_ld_reaction
     json['url'] = "https://www.chemotion-repository.net/inchikey/#{doi.suffix}"
     json['additionalType'] = 'Reaction'
     json['name'] = element.rinchi_short_key
-    json['author'] = json_ld_authors(taggable_data)
+    json['creator'] = json_ld_authors(taggable_data)
+    json['author'] = json['creator']
+
     json['description'] = json_ld_description(element.description)
     json['license'] = rights_data[:rightsURI]
     json['datePublished'] = published_at&.strftime('%Y-%m-%d')
@@ -201,7 +204,7 @@ def json_ld_reaction_has_part
     json = []
     children&.each do |pub|
       json.push(json_ld_sample(pub)) if pub.element_type == 'Sample'
-      json.push(json_ld_analysis(pub)) if pub.element_type == 'Container'
+      json.push(json_ld_analysis(pub, false)) if pub.element_type == 'Container'
     end
     json
   end
@@ -218,7 +221,7 @@ def json_ld_description(desc)
   end
 
   def json_ld_container
-    json_ld_analysis
+    json_ld_analysis(self, true)
   end
 
 
@@ -226,21 +229,25 @@ def json_ld_subjectOf(pub = self)
     arr = []
     # arr.push(json_ld_creative_work(pub))
     pub.children&.each do |ana|
-      arr.push(json_ld_analysis(ana))
+      arr.push(json_ld_analysis(ana, false))
     end
     arr
   end
 
-  def json_ld_analysis(pub = self)
+  def json_ld_analysis(pub = self, root = true)
     json = {}
     json['@context'] = 'https://schema.org'
     json['@type'] = 'Dataset'
     json['@id'] = "https://doi.org/#{pub.doi.full_doi}"
     json['identifier'] = "CRD-#{pub.id}"
     json['url'] = "https://www.chemotion-repository.net/inchikey/#{pub.doi.suffix}"
+    json['publisher'] = json_ld_publisher
+    json['license'] = pub.rights_data[:rightsURI]
     json['name'] = pub.element.extended_metadata['kind'] || '' if pub&.element&.extended_metadata.present?
-    json['author'] = json_ld_authors(pub.taggable_data)
+    json['creator'] = json_ld_authors(pub.taggable_data)
+    json['author'] = json['creator']
     json['description'] = json_ld_analysis_description(pub)
+    json['includedInDataCatalog'] = json_ld_data_catalog(pub) if root == true
     json
   end
 

From ad208aefaea6b976f09549b1b43a73cca785fe26 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 5 Jul 2023 13:43:15 +0200
Subject: [PATCH 161/258] rm confirmsto

---
 app/models/concerns/metadata_jsonld.rb        | 6 ++----
 app/packs/src/components/chemrepo/DateInfo.js | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index b38776de0..d471008a7 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -7,6 +7,8 @@ module MetadataJsonld
   extend ActiveSupport::Concern
 
   def json_ld
+    return {} if state != 'completed'
+
     if element_type == 'Sample'
       json_ld_sample_root
     elsif element_type == 'Reaction'
@@ -46,10 +48,6 @@ def json_ld_data_catalog(pub = self)
     json['@context'] = 'https://schema.org'
     json['@type'] = 'DataCatalog'
     json['@id'] = 'https://www.chemotion-repository.net'
-    json['dct:conformsTo'] = {
-      "@type": 'CreativeWork',
-      "@id": 'https://schema.org/DataCatalog'
-    }
     json['description'] = 'Repository for samples, reactions and related research data.'
     json['keywords'] = data_catalog_keywords(pub)
     json['name'] = 'Chemotion Repository'
diff --git a/app/packs/src/components/chemrepo/DateInfo.js b/app/packs/src/components/chemrepo/DateInfo.js
index 49e3365a0..acf3fdfdf 100644
--- a/app/packs/src/components/chemrepo/DateInfo.js
+++ b/app/packs/src/components/chemrepo/DateInfo.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getFormattedISODate, getFormattedTime } from './date-utils';
+import { getFormattedISODate, getFormattedISODateTime } from './date-utils';
 
 const DateInfo = (props) => {
   const {
@@ -11,7 +11,7 @@ const DateInfo = (props) => {
   const formattedPublishedDate =
   getFormattedISODate((tagData?.published_at || tagData?.doi_reg_at));
   const formattedSubmittedDate = getFormattedISODate(pubData?.created_at);
-  const formattedUpdatedDate = getFormattedTime(pubData?.updated_at);
+  const formattedUpdatedDate = getFormattedISODateTime(pubData?.updated_at);
 
   if (isPublished) {
     return (<span><b>{preText} Published on </b> <i>{formattedPublishedDate}</i></span>);

From 4b828767b570bd6d3e252b42d3f8dd93fbf5f369 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 11 Jul 2023 11:49:37 +0200
Subject: [PATCH 162/258] add logo

---
 app/models/concerns/metadata_jsonld.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index d471008a7..508a0bb1e 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -287,6 +287,8 @@ def json_ld_publisher
     json = {}
     json['@type'] = 'Organization'
     json['name'] = 'chemotion-repository'
+    json['logo'] = 'https://www.chemotion-repository.net/images/repo/Chemotion-V1.png'
+    json['url'] = 'https://www.chemotion-repository.net'
     json
   end
 

From 805b6e9bd41a9a8da51ad042cbc7aa09822efd72 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 16 Jul 2023 20:47:41 +0200
Subject: [PATCH 163/258] Resolve "molecule viewer"

---
 app/api/chemotion/public_api.rb               |  23 +++-
 app/api/chemotion/ui_api.rb                   |   1 +
 app/api/helpers/public_helpers.rb             |  11 ++
 app/assets/stylesheets/structure_viewer.scss  |  37 +++++
 app/models/matrice.rb                         |   6 +
 .../elements/details/samples/SampleDetails.js |  10 +-
 .../analysesTab/SampleDetailsContainersAux.js |   9 +-
 .../src/components/actions/PublicActions.js   |   8 ++
 .../src/components/fetchers/PublicFetcher.js  |  32 +++++
 .../src/components/stores/PublicStore.js      |   5 +
 app/packs/src/components/viewer/MolViewer.js  |  75 +++++++++++
 .../src/components/viewer/MolViewerBtn.js     |  56 ++++++++
 .../src/components/viewer/MolViewerListBtn.js |  94 +++++++++++++
 .../components/viewer/MolViewerListModal.js   | 127 ++++++++++++++++++
 .../src/components/viewer/MolViewerModal.js   |  86 ++++++++++++
 app/packs/src/libHome/Home.js                 |   3 +
 app/packs/src/libHome/RepoCommon.js           |  11 +-
 app/serializers/molecule_guest_serializer.rb  |   2 +-
 config/initializers/molecule_viewer.rb        |  23 ++++
 .../20230323160712_matrice_molecule_viewer.rb |  11 ++
 20 files changed, 619 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/structure_viewer.scss
 create mode 100644 app/packs/src/components/viewer/MolViewer.js
 create mode 100644 app/packs/src/components/viewer/MolViewerBtn.js
 create mode 100644 app/packs/src/components/viewer/MolViewerListBtn.js
 create mode 100644 app/packs/src/components/viewer/MolViewerListModal.js
 create mode 100644 app/packs/src/components/viewer/MolViewerModal.js
 create mode 100644 config/initializers/molecule_viewer.rb
 create mode 100644 db/migrate/20230323160712_matrice_molecule_viewer.rb

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index f87396810..a5231fd55 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -36,7 +36,6 @@ class PublicAPI < Grape::API
         status 204
       end
 
-
       namespace :token do
         desc 'Generate Token'
         params do
@@ -51,6 +50,16 @@ class PublicAPI < Grape::API
         end
       end
 
+
+      desc 'Public initialization'
+      params do
+      end
+      get 'initialize' do
+        {
+          molecule_viewer: Rails.configuration.molecule_viewer_config
+        }
+      end
+
       namespace :generic_templates do
         desc "get active generic templates"
         params do
@@ -869,6 +878,18 @@ def query_embargo(name)
           ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
         end
       end
+
+      resource :service do
+        desc 'convert molfile to 3d'
+        params do
+          requires :molfile, type: String, desc: 'Molecule molfile'
+        end
+        post :convert do
+          convert_to_3d(params[:molfile])
+        rescue StandardError => e
+          return { msg: { level: 'error', message: e } }
+        end
+      end
     end
 
     namespace :upload do
diff --git a/app/api/chemotion/ui_api.rb b/app/api/chemotion/ui_api.rb
index 5e0a3a270..791235976 100644
--- a/app/api/chemotion/ui_api.rb
+++ b/app/api/chemotion/ui_api.rb
@@ -24,6 +24,7 @@ class UiAPI < Grape::API
           has_sfn: sfn_config.present? && current_user.matrix_check_by_name('scifinderN'),
           has_converter: converter_config.present?,
           has_radar: radar_config.present?,
+          molecule_viewer: Rails.configuration.molecule_viewer_config
         }
       end
     end
diff --git a/app/api/helpers/public_helpers.rb b/app/api/helpers/public_helpers.rb
index 4f2602824..ba2fa57a7 100644
--- a/app/api/helpers/public_helpers.rb
+++ b/app/api/helpers/public_helpers.rb
@@ -31,4 +31,15 @@ def de_encode_json(json, key = '', viv = '', encode = true)
       decode_json(json, key, viv)
     end
   end
+
+  def convert_to_3d(molfile)
+    molecule_viewer = Rails.configuration.molecule_viewer_config || {}
+    if molecule_viewer.blank? || molecule_viewer.converter_endpoint.blank?
+      { molfile: molfile }
+    else
+      options = { timeout: 10, body: { mol: molfile }.to_json, headers: { 'Content-Type' => 'application/json' } }
+      response = HTTParty.post(molecule_viewer.converter_endpoint, options)
+      response.code == 200 ? { molfile: response.parsed_response } : { molfile: molfile }
+    end
+  end
 end
diff --git a/app/assets/stylesheets/structure_viewer.scss b/app/assets/stylesheets/structure_viewer.scss
new file mode 100644
index 000000000..17f431f69
--- /dev/null
+++ b/app/assets/stylesheets/structure_viewer.scss
@@ -0,0 +1,37 @@
+@mixin viewer-modal {
+  height: 95%;
+  top: 52% !important;
+  margin: unset !important;
+}
+
+.file-viewer-modal {
+  @include viewer-modal;
+  width: 98vw !important;
+  .modal-content {
+    height: 95%;
+  }
+}
+
+.structure-viewer-modal {
+  @include viewer-modal;
+  width: 60vw !important;
+  .modal-content {
+    height: calc(100% - 60px);
+  }
+}
+
+.structure-frame-container {
+  position: relative;
+  height: calc(100vh - 180px);
+  overflow: hidden;
+  max-width: 100%;
+  // padding-top: 56.25%;
+  .frame-div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
diff --git a/app/models/matrice.rb b/app/models/matrice.rb
index dbc539857..0df707304 100644
--- a/app/models/matrice.rb
+++ b/app/models/matrice.rb
@@ -21,6 +21,8 @@ class Matrice < ApplicationRecord
   acts_as_paranoid
   after_create :gen_json
 
+  after_update :reload_initializer, if: -> { (saved_change_to_configs? || saved_change_to_enabled?) && name == 'moleculeViewer' }
+
   def self.gen_matrices_json
     mx = pluck(:name, :id).to_h || {}
   rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
@@ -42,4 +44,8 @@ def self.extra_rules
   def gen_json
     Matrice.gen_matrices_json
   end
+
+  def reload_initializer
+    load Rails.root.join('config/initializers/molecule_viewer.rb') if Rails.application.initialized?
+  end
 end
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index d02465b12..9b7a9fe7b 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -129,6 +129,7 @@ export default class SampleDetails extends React.Component {
       sample: props.sample,
       reaction: null,
       materialGroup: null,
+      moleculeViewer: UIStore.getState().moleculeViewer,
       showStructureEditor: false,
       loadingMolecule: false,
       showElementalComposition: false,
@@ -158,6 +159,7 @@ export default class SampleDetails extends React.Component {
     this.enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
     this.enableSampleDecoupled = MatrixCheck(currentUser.matrix, 'sampleDecoupled');
     this.enableNmrSim = MatrixCheck(currentUser.matrix, 'nmrSim');
+    this.enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
 
     this.onUIStoreChange = this.onUIStoreChange.bind(this);
     this.clipboard = new Clipboard('.clipboardBtn');
@@ -1737,7 +1739,7 @@ export default class SampleDetails extends React.Component {
 
   render() {
     const sample = this.state.sample || {};
-    const { visible } = this.state;
+    const { moleculeViewer, visible } = this.state;
     const tabContentsMap = {
       properties: this.samplePropertiesTab('properties'),
       analyses: this.sampleContainerTab('analyses'),
@@ -1892,6 +1894,12 @@ export default class SampleDetails extends React.Component {
                   onTabPositionChanged={this.onTabPositionChanged}
                   addInventoryTab={sample.inventory_sample}
                 />
+              <MolViewerBtn
+                config={moleculeViewer}
+                disabled={sample.isNew || !this.enableMoleculeViewer}
+                fileContent={sample.molfile}
+                isPublic={false}
+              />
                 {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
                 <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
                   {tabContents}
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 7e05c2354..4db08c3eb 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -17,10 +17,10 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import { chmoConversions } from 'src/components/OlsComponent';
 import { previewContainerImage } from 'src/utilities/imageHelper';
+import MolViewerListBtn from './viewer/MolViewerListBtn';
 
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-
-import RepoMolViewerListBtn from '../libHome/RepoMolViewerListBtn';
+import MatrixCheck from './common/MatrixCheck';
 
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
@@ -369,6 +369,9 @@ const headerBtnGroup = (
   const { chmos } = UserStore.getState();
   const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
 
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  const enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
+
   return (
     <div className="upper-btn">
       <Button
@@ -402,7 +405,7 @@ const headerBtnGroup = (
         hasNMRium={hasNMRium}
       />
       <span className="button-right">
-        <RepoMolViewerListBtn el={sample} container={container} isPublic={false} />
+        <MolViewerListBtn el={sample} container={container} isPublic={false} config={UIStore.getState().moleculeViewer} disabled={!enableMoleculeViewer} />
       </span>
       <span
         className="button-right add-to-report"
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 3e4f4c9ff..431aef0b4 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -7,6 +7,14 @@ import SearchFetcher from '../fetchers/SearchFetcher';
 import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 class PublicActions {
+  initialize() {
+    return (dispatch) => {
+      PublicFetcher.initialize()
+        .then(json => dispatch(json))
+        .catch(err => console.log(err));
+    };
+  }
+
   refreshPubElements(type) {
     return type;
   }
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index 9ea56846d..d05961e38 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -1,10 +1,21 @@
 import 'whatwg-fetch';
 import _ from 'lodash';
+import { camelizeKeys } from 'humps';
 import Molecule from '../models/Molecule';
 import Reaction from '../models/Reaction';
 import RepoNavListTypes from '../../libHome/RepoNavListTypes';
 
 export default class PublicFetcher {
+  static initialize() {
+    const promise = fetch('/api/v1/public/initialize', {
+      credentials: 'same-origin',
+    }).then(response => response.json())
+      .then(json => camelizeKeys(json))
+      .catch(err => console.log(err)); // eslint-disable-line
+
+    return promise;
+  }
+
   static fetchPublicMolecules(params = {}) {
     const page = params.page || 1;
     const perPage = params.perPage || 10;
@@ -266,4 +277,25 @@ export default class PublicFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+
+  static convertMolfile(params) {
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => {
+      abortController.abort();
+    }, 5000); // 5 seconds timeout
+
+    return fetch('/api/v1/public/service/convert', {
+      signal: abortController.signal, // pass the signal to the fetch function
+      credentials: 'same-origin',
+      method: 'post',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ molfile: params.data.mol })
+    }).then((response) => {
+      clearTimeout(timeoutId);
+      return response.json();
+    }).then(json => new Blob([json.molfile], { type: 'text/plain' })).catch((errorMessage) => {
+      clearTimeout(timeoutId);
+      throw new Error(errorMessage);
+    });
+  }
 }
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 34cbe97a4..f2bea5130 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -30,6 +30,7 @@ class PublicStore {
     this.reviewData = {};
 
     this.bindListeners({
+      handleInitialize: PublicActions.initialize,
       handleGetMolecules: PublicActions.getMolecules,
       handleGetReactions: PublicActions.getReactions,
       handleSearchMolecules: PublicActions.getSearchMolecules,
@@ -57,6 +58,10 @@ class PublicStore {
     });
   }
 
+  handleInitialize(result) {
+    this.setState(result);
+  }
+
   handleRefreshPubElements(type) {
     const pageType = type.split('=');
     PublicActions[`get${pageType[0]}`]({ page: this.page, perPage: this.perPage, listType: pageType[1] });
diff --git a/app/packs/src/components/viewer/MolViewer.js b/app/packs/src/components/viewer/MolViewer.js
new file mode 100644
index 000000000..9cdd0a081
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewer.js
@@ -0,0 +1,75 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+
+const urlRegex = /^(https?:\/\/)?(((([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]))|(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}))(:(\d{1,5}))?(\/[\w\.-]*)*(\/)?(\?[^\s]*)?$/;
+const isValidUrl = url => urlRegex.test(url);
+
+const MolViewer = (props) => {
+  const {
+    endpoint, molContent
+  } = props;
+  const [serviceReady, setServiceReady] = useState(false);
+  const ifRef = useRef();
+  const ifRefCurrent = ifRef.current;
+
+  const discoverService = (event) => {
+    const { type, data } = event.data;
+    // TODO: add a timeout to avoid infinite loop
+    // TODO: make the type as configurable
+    if (type === 'molviewer:state' && data?.state === 'ready') {
+      setServiceReady(true);
+    }
+  };
+
+  const postIt = () => {
+    if (ifRefCurrent) {
+      const { contentWindow } = ifRefCurrent;
+      if (contentWindow) {
+        molContent.text().then((text) => {
+          const messageData = { payload: text };
+          // TODO: add a timeout to avoid infinite loop
+          // TODO: make the type as configurable
+          contentWindow.postMessage({ type: 'kit:request-view', data: messageData }, '*');
+        });
+      }
+    }
+  };
+
+  if (!isValidUrl(endpoint)) {
+    return <Alert bsStyle="danger">This service is not ready. Please contact your system administrator.</Alert>;
+  }
+
+  useEffect(() => {
+    if (isValidUrl(endpoint)) {
+      window.addEventListener('message', discoverService);
+      return () => {
+        window.removeEventListener('message', discoverService);
+      };
+    }
+    return null;
+  }, []);
+
+  useEffect(() => {
+    if (serviceReady) postIt();
+  }, [serviceReady, molContent]);
+
+  return (
+    <>
+      {
+        serviceReady ? null : <Alert bsStyle="danger">This service is offline. Please contact your system administrator.</Alert>
+      }
+      <div className="structure-frame-container">
+        <iframe id="iframe_jsmol" ref={ifRef} src={endpoint} title="JSmol Web" className="frame-div" />
+      </div>
+    </>
+  );
+};
+
+MolViewer.propTypes = {
+  endpoint: PropTypes.string.isRequired,
+  molContent: PropTypes.object.isRequired
+};
+
+export default MolViewer;
diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
new file mode 100644
index 000000000..c5ebaf024
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -0,0 +1,56 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import MolViewerModal from './MolViewerModal';
+
+export default class MolViewerBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { show: false, molFile: props.fileContent };
+    this.updateState = this.updateState.bind(this);
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+  }
+
+  updateState(params) {
+    this.setState({ ...params });
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    this.setState({ show: !this.state.show });
+  }
+
+  render() {
+    const { config, disabled, isPublic } = this.props;
+    const { molFile, show } = this.state;
+    if (isPublic && !config.featureEnabled) return null;
+
+    return (
+      <>
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip_molviewer" style={{ pointerEvents: 'none' }}>Click to see structure in Viewer</Tooltip>}>
+          <Button className="button-right" bsSize="xsmall" bsStyle="info" disabled={disabled} onClick={e => this.handleModalOpen(e)}>
+            <i className="fa fa-cube" aria-hidden="true" />{' '}Viewer
+          </Button>
+        </OverlayTrigger>
+        {
+          show ?
+            <MolViewerModal
+              config={config}
+              fileContent={molFile}
+              handleModalOpen={e => this.handleModalOpen(e)}
+              isPublic={isPublic}
+              show={show}
+            /> : null
+        }
+      </>
+    );
+  }
+}
+
+MolViewerBtn.propTypes = {
+  config: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  fileContent: PropTypes.string.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
new file mode 100644
index 000000000..44a28740e
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -0,0 +1,94 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { filter } from 'lodash';
+import UserStore from '../stores/UserStore';
+import MatrixCheck from '../common/MatrixCheck';
+import MolViewerListModal from './MolViewerListModal';
+import ArrayUtils from '../../components/utils/ArrayUtils';
+
+export default class MolViewerListBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { openModal: false };
+
+    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+    this.enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
+
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+    this.renderBtn = this.renderBtn.bind(this);
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    this.setState({ openModal: !this.state.openModal });
+  }
+
+  renderBtn(disabled) {
+    const btnStyle = disabled ? 'default' : 'info';
+    const tipDesc = disabled ? ' (Nothing to view)' : '';
+    const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
+    const className = this.props.isPublic ? '' : '';
+    return (
+      <OverlayTrigger
+        placement="top"
+        delayShow={500}
+        overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
+      >
+        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick} disabled={this.props.disabled}>
+          <i className="fa fa-cube" aria-hidden="true" />{' '}Viewer
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  render() {
+    const {
+      config, container, el, isPublic
+    } = this.props;
+    const { openModal } = this.state;
+    if (!el) return null;
+    if (isPublic && !config.featureEnabled) return null;
+
+    if (container?.children?.length < 1) { return this.renderBtn(true); }
+
+    let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+
+    datasetContainer = datasetContainer.map((dc) => {
+      const ds = Object.assign({}, dc);
+      const { attachments } = ds;
+      ds.attachments = attachments.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment.filename?.match(/\.([^.]+)$/)[1].toLowerCase()));
+      if (ds.attachments.length > 0) return ds;
+      return null;
+    });
+
+    datasetContainer = datasetContainer.filter(dc => dc !== null);
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+    return (
+      <>
+        {this.renderBtn(false)}
+        {
+          openModal ?
+            <MolViewerListModal
+              config={config}
+              handleModalOpen={e => this.handleModalOpen(e)}
+              show={openModal}
+              title={el.short_label}
+              datasetContainer={datasetContainer}
+              isPublic={isPublic}
+            /> : null
+        }
+      </>
+    );
+  }
+}
+
+MolViewerListBtn.propTypes = {
+  config: PropTypes.object.isRequired,
+  container: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  el: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/components/viewer/MolViewerListModal.js b/app/packs/src/components/viewer/MolViewerListModal.js
new file mode 100644
index 000000000..a26274bed
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewerListModal.js
@@ -0,0 +1,127 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+import MolViewer from './MolViewer';
+
+const MolViewerListModal = (props) => {
+  const {
+    config, datasetContainer, handleModalOpen, isPublic, show
+  } = props;
+
+  const [activeKey, setActiveKey] = useState(1);
+  const [newContent, setNewContent] = useState(null);
+  const [selected, setSelected] = useState(() => {
+    const ds = datasetContainer[0];
+    const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
+    return { ...file, dsName: ds.name };
+  });
+  const [switchViewer, setSwitchViewer] = useState(config.viewerEndpoint ? 'jsmol' : 'ngl');
+
+  const handleFile = (e, attachment, ds) => {
+    e.stopPropagation();
+    setSelected({ ...attachment, dsName: ds.name });
+  };
+
+  const handleSelect = (e, key) => {
+    e.stopPropagation();
+    setActiveKey(key);
+  };
+
+  const list = () => {
+    const defaultActiveKey = datasetContainer[0].id;
+    return (
+      <PanelGroup
+        accordion
+        id="accordion-controlled-example"
+        defaultActiveKey={defaultActiveKey}
+        style={{ width: '100%', height: 'calc(100vh - 200px)', overflow: 'auto' }}
+      >
+        {
+          datasetContainer.map((ds) => {
+            const { attachments } = ds;
+            return (
+              <Panel key={ds.id} eventKey={ds.id} onClick={e => handleSelect(e, ds.id)}>
+                <Panel.Heading>
+                  <Panel.Title toggle>{`Dataset: ${ds.name}`}</Panel.Title>
+                </Panel.Heading>
+                <Panel.Body style={{ padding: '0px' }} collapsible>
+                  <Nav bsStyle="pills" stacked activeKey={activeKey}>
+                    {
+                      attachments.map(attachment => (
+                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => handleFile(e, attachment, ds)}>
+                          <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
+                        </NavItem>
+                      ))
+                    }
+                  </Nav>
+                </Panel.Body>
+              </Panel>
+            );
+          })
+        }
+      </PanelGroup>
+    );
+  };
+
+  const updateNewContent = (data) => {
+    setNewContent(new Blob([data], { type: 'text/plain' }));
+  };
+
+  const convertMolfile = () => {
+    const filePath = isPublic ?
+      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
+      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
+
+    return fetch(filePath).then(response => response.blob()).catch((error) => {
+      console.log(error);
+    });
+  };
+
+  useEffect(() => {
+    convertMolfile().then((result) => {
+      updateNewContent(result);
+    });
+  }, [selected]);
+
+  if (show) {
+    let modalBody = <Alert bsStyle="danger">This service is offline. Please contact your system administrator.</Alert>;
+    if (newContent) {
+      const viewer = switchViewer === 'ngl' ? <ReactNglViewer fileName={selected?.filename} filePath={newContent} /> : <MolViewer endpoint={config.viewerEndpoint} molContent={newContent} />;
+      modalBody = <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div>;
+    }
+    return (
+      <Modal backdrop="static" animation dialogClassName="file-viewer-modal" show={show} onHide={handleModalOpen}>
+        <Modal.Header onClick={e => e.stopPropagation()} closeButton>
+          <Modal.Title>
+            Dataset: {selected.dsName} / File: {selected?.filename}
+            <ButtonGroup bsSize="xsmall" className="button-right">
+              <Button active={switchViewer === 'jsmol'} onClick={() => setSwitchViewer('jsmol')} disabled={!config.viewerEndpoint}>JSmol Viewer</Button>
+              <Button active={switchViewer === 'ngl'} onClick={() => setSwitchViewer('ngl')}>NGL Viewer</Button>
+            </ButtonGroup>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body onClick={e => e.stopPropagation()}>
+          <Col md={2} sm={2} lg={2}>
+            {list()}
+          </Col>
+          <Col md={10} sm={10} lg={10}>
+            {modalBody}
+          </Col>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+  return <span />;
+};
+
+MolViewerListModal.propTypes = {
+  config: PropTypes.object.isRequired,
+  datasetContainer: PropTypes.array.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+  show: PropTypes.bool.isRequired,
+};
+
+export default MolViewerListModal;
diff --git a/app/packs/src/components/viewer/MolViewerModal.js b/app/packs/src/components/viewer/MolViewerModal.js
new file mode 100644
index 000000000..dd6b65099
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewerModal.js
@@ -0,0 +1,86 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonGroup, Modal, ProgressBar } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import MolViewer from './MolViewer';
+
+const MolViewerModal = (props) => {
+  const {
+    config, fileContent, show, title, handleModalOpen
+  } = props;
+
+  const [newContent, setNewContent] = useState(fileContent);
+  const [progress, setProgress] = useState(null);
+  const [switchViewer, setSwitchViewer] = useState(config.viewerEndpoint ? 'jsmol' : 'ngl');
+
+  const updateNewContent = (data) => {
+    setNewContent(new Blob([data], { type: 'text/plain' }));
+  };
+
+  const convertMolfile = () => {
+    const intervalId = setInterval(() => {
+      setProgress((preProgress) => {
+        if (preProgress >= 90) {
+          clearInterval(intervalId);
+          return 100;
+        }
+        return preProgress + 10;
+      });
+    }, 1000);
+
+    const params = {
+      data: { mol: fileContent },
+    };
+    PublicFetcher.convertMolfile(params).then((result) => {
+      updateNewContent(result);
+    }).catch(() => {
+      updateNewContent(fileContent);
+    }).finally(() => {
+      setProgress(100);
+      clearInterval(intervalId);
+    });
+  };
+
+  useEffect(() => {
+    setProgress(0);
+    convertMolfile();
+  }, []);
+
+  if (show) {
+    const viewer = switchViewer === 'ngl' ? <ReactNglViewer fileName={`${title}.mol`} filePath={newContent} /> : <MolViewer endpoint={config.viewerEndpoint} molContent={newContent} />;
+    return (
+      <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={handleModalOpen}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            {title}
+            <ButtonGroup bsSize="xsmall" className="button-right">
+              <Button active={switchViewer === 'jsmol'} onClick={() => setSwitchViewer('jsmol')} disabled={!config.viewerEndpoint}>JSmol Viewer</Button>
+              <Button active={switchViewer === 'ngl'} onClick={() => setSwitchViewer('ngl')}>NGL Viewer</Button>
+            </ButtonGroup>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {
+            (progress >= 100) ?
+              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div> : <ProgressBar active now={progress} label={`${progress}%`} />
+          }
+        </Modal.Body>
+      </Modal>
+    );
+  }
+  return <span />;
+};
+
+MolViewerModal.propTypes = {
+  config: PropTypes.object.isRequired,
+  fileContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  show: PropTypes.bool.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+  title: PropTypes.string,
+};
+
+MolViewerModal.defaultProps = { title: 'Structure Viewer' };
+
+export default MolViewerModal;
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 131a826fd..dcd98cfa5 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -33,6 +33,8 @@ import RepoElementDetails from './RepoElementDetails';
 import NavFooter from './NavFooter';
 import LoadingModal from '../components/common/LoadingModal';
 
+import PublicActions from '../components/actions/PublicActions';
+
 const extraHomes = () => {
   const homes = [];
   const count = XHome.count || 0;
@@ -54,6 +56,7 @@ class Home extends Component {
   componentDidMount() {
     PublicStore.listen(this.onChange);
     RStore.listen(this.onChange);
+    PublicActions.initialize.defer();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 198192054..332c7dd62 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -55,12 +55,13 @@ import RepoXvialButton from '../components/common/RepoXvialButton';
 import RepoPreviewImage from '../components/common/RepoPreviewImage';
 import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
 import RepoSegment from './RepoSegment';
-import RepoMolViewerBtn from './RepoMolViewerBtn';
-import RepoMolViewerListBtn from './RepoMolViewerListBtn';
+import MolViewerBtn from '../components/viewer/MolViewerBtn';
+import MolViewerListBtn from '../components/viewer/MolViewerListBtn';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
 import getFormattedRange from '../components/chemrepo/range-utils';
 import LdData from '../components/chemrepo/LdData';
+import PublicStore from '../components/stores/PublicStore';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -917,7 +918,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   return (
     <Row>
       <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath)}
+        {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={molecule.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} config={PublicStore.getState().moleculeViewer} disabled={false} />)}
       </Col>
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
@@ -983,7 +984,7 @@ const RenderAnalysisHeader = (props) => {
       <br />
       <Row style={rinchiStyle}>
         <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath)}
+          {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={element.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} config={PublicStore.getState().moleculeViewer} disabled={false} />)}
         </Col>
         <Col sm={6} md={6} lg={6}>
           <span className="repo-pub-sample-header">
@@ -1762,7 +1763,7 @@ class RenderPublishAnalysesPanel extends Component {
         <div className="abstract">
           <div className="lower-text">
             <div className="sub-title">
-              <b>{kind}</b>&nbsp;<RepoMolViewerListBtn el={element} container={analysis} isPublic={isPublic} />
+              <b>{kind}</b>&nbsp;<MolViewerListBtn el={element} container={analysis} isPublic={isPublic} config={PublicStore.getState().moleculeViewer} disabled={false} />
               <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
               <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
             </div>
diff --git a/app/serializers/molecule_guest_serializer.rb b/app/serializers/molecule_guest_serializer.rb
index 981e8430c..e847a219e 100644
--- a/app/serializers/molecule_guest_serializer.rb
+++ b/app/serializers/molecule_guest_serializer.rb
@@ -1,4 +1,4 @@
 class MoleculeGuestSerializer < ActiveModel::Serializer
   attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight
+    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight, :molfile
 end
diff --git a/config/initializers/molecule_viewer.rb b/config/initializers/molecule_viewer.rb
new file mode 100644
index 000000000..8b4c7a3d7
--- /dev/null
+++ b/config/initializers/molecule_viewer.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+def fetch_molecule_viewer_config
+  molecule_viewer_config = { 'feature' => { 'enabled' => false } }
+  begin
+    if ActiveRecord::Base.connection.table_exists?('matrices')
+      molecule_viewer = Matrice.find_by(name: 'moleculeViewer')
+      molecule_viewer_config = molecule_viewer_config.merge((molecule_viewer&.configs || {}))
+      molecule_viewer_config = molecule_viewer_config.merge({ 'feature' => { 'enabled' => (molecule_viewer&.enabled || false) }})
+    end
+  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
+    Rails.logger.error("Error fetching molecule viewer config: #{e.message}")
+  end
+  ActiveSupport::OrderedOptions.new.tap do |config|
+    config.feature_enabled = molecule_viewer_config['feature']['enabled'] || false
+    config.viewer_endpoint = molecule_viewer_config['viewer_endpoint']
+    config.converter_endpoint = molecule_viewer_config['converter_endpoint']
+  end
+end
+
+Rails.application.configure do
+  config.molecule_viewer_config = fetch_molecule_viewer_config
+end
diff --git a/db/migrate/20230323160712_matrice_molecule_viewer.rb b/db/migrate/20230323160712_matrice_molecule_viewer.rb
new file mode 100644
index 000000000..50ee88665
--- /dev/null
+++ b/db/migrate/20230323160712_matrice_molecule_viewer.rb
@@ -0,0 +1,11 @@
+class MatriceMoleculeViewer < ActiveRecord::Migration[5.2]
+  def change
+    Matrice.create(
+      name: 'moleculeViewer',
+      enabled: false,
+      label: 'moleculeViewer',
+      include_ids: [],
+      exclude_ids: []
+    ) if Matrice.find_by(name: 'moleculeViewer').nil?
+  end
+end

From 56c964bee9fcbc8e9114e48872d930a43e0d3968 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 16 Jul 2023 23:26:06 +0200
Subject: [PATCH 164/258] fixed the issue that different molecule shows the
 same in the viewer

---
 app/packs/src/components/viewer/MolViewerBtn.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
index c5ebaf024..3646d6ad0 100644
--- a/app/packs/src/components/viewer/MolViewerBtn.js
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -7,23 +7,20 @@ import MolViewerModal from './MolViewerModal';
 export default class MolViewerBtn extends Component {
   constructor(props) {
     super(props);
-    this.state = { show: false, molFile: props.fileContent };
-    this.updateState = this.updateState.bind(this);
+    this.state = { show: false };
     this.handleModalOpen = this.handleModalOpen.bind(this);
   }
 
-  updateState(params) {
-    this.setState({ ...params });
-  }
-
   handleModalOpen(e) {
     if (e) { e.stopPropagation(); }
     this.setState({ show: !this.state.show });
   }
 
   render() {
-    const { config, disabled, isPublic } = this.props;
-    const { molFile, show } = this.state;
+    const {
+      config, disabled, fileContent, isPublic
+    } = this.props;
+    const { show } = this.state;
     if (isPublic && !config.featureEnabled) return null;
 
     return (
@@ -37,7 +34,7 @@ export default class MolViewerBtn extends Component {
           show ?
             <MolViewerModal
               config={config}
-              fileContent={molFile}
+              fileContent={fileContent}
               handleModalOpen={e => this.handleModalOpen(e)}
               isPublic={isPublic}
               show={show}

From a78cb1424a08b7663d3c92bd7c7ed1acdc85f7cc Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 17 Jul 2023 09:35:57 +0200
Subject: [PATCH 165/258] code simplification

---
 .../elements/details/samples/SampleDetails.js |   2 +-
 .../analysesTab/SampleDetailsContainersAux.js |   4 +-
 .../src/components/chemrepo/SvgViewPan.js     |  11 ++
 app/packs/src/components/viewer/MolViewer.js  |  18 +--
 .../src/components/viewer/MolViewerListBtn.js |   6 -
 .../components/viewer/MolViewerListModal.js   |  42 +++++--
 .../src/components/viewer/MolViewerModal.js   |  29 ++++-
 .../src/components/viewer/MolViewerSet.js     |   5 +
 app/packs/src/libHome/RepoMolViewerBtn.js     |  52 --------
 app/packs/src/libHome/RepoMolViewerListBtn.js |  81 ------------
 .../src/libHome/RepoMolViewerListModal.js     | 117 ------------------
 app/packs/src/libHome/RepoMolViewerModal.js   |  38 ------
 app/packs/src/libHome/RepoReactionDetails.js  |   2 +-
 config/initializers/molecule_viewer.rb        |   4 +-
 package.json                                  |   2 +-
 yarn.lock                                     |  10 +-
 16 files changed, 90 insertions(+), 333 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/SvgViewPan.js
 create mode 100644 app/packs/src/components/viewer/MolViewerSet.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerBtn.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerListBtn.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerListModal.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerModal.js

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 9b7a9fe7b..e095b0625 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -159,7 +159,7 @@ export default class SampleDetails extends React.Component {
     this.enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
     this.enableSampleDecoupled = MatrixCheck(currentUser.matrix, 'sampleDecoupled');
     this.enableNmrSim = MatrixCheck(currentUser.matrix, 'nmrSim');
-    this.enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
+    this.enableMoleculeViewer = MatrixCheck(currentUser.matrix, MolViewerSet.PK);
 
     this.onUIStoreChange = this.onUIStoreChange.bind(this);
     this.clipboard = new Clipboard('.clipboardBtn');
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 4db08c3eb..d1e5022b1 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -18,7 +18,7 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import { chmoConversions } from 'src/components/OlsComponent';
 import { previewContainerImage } from 'src/utilities/imageHelper';
 import MolViewerListBtn from './viewer/MolViewerListBtn';
-
+import MolViewerSet from './viewer/MolViewerSet';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 import MatrixCheck from './common/MatrixCheck';
 
@@ -370,7 +370,7 @@ const headerBtnGroup = (
   const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
 
   const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  const enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
+  const enableMoleculeViewer = MatrixCheck(currentUser.matrix, MolViewerSet.PK);
 
   return (
     <div className="upper-btn">
diff --git a/app/packs/src/components/chemrepo/SvgViewPan.js b/app/packs/src/components/chemrepo/SvgViewPan.js
new file mode 100644
index 000000000..12b998234
--- /dev/null
+++ b/app/packs/src/components/chemrepo/SvgViewPan.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
+
+const SvgViewPan = (path, extra = null) => (
+  <div className="preview-table" style={{ cursor: 'row-resize' }}>
+    {extra}
+    <SvgFileZoomPan svgPath={path} duration={300} resize />
+  </div>
+);
+
+export default SvgViewPan;
diff --git a/app/packs/src/components/viewer/MolViewer.js b/app/packs/src/components/viewer/MolViewer.js
index 9cdd0a081..6eb418be5 100644
--- a/app/packs/src/components/viewer/MolViewer.js
+++ b/app/packs/src/components/viewer/MolViewer.js
@@ -3,12 +3,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from 'react-bootstrap';
 
-const urlRegex = /^(https?:\/\/)?(((([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]))|(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}))(:(\d{1,5}))?(\/[\w\.-]*)*(\/)?(\?[^\s]*)?$/;
-const isValidUrl = url => urlRegex.test(url);
-
 const MolViewer = (props) => {
   const {
-    endpoint, molContent
+    cliendId, endpoint, molContent
   } = props;
   const [serviceReady, setServiceReady] = useState(false);
   const ifRef = useRef();
@@ -16,8 +13,6 @@ const MolViewer = (props) => {
 
   const discoverService = (event) => {
     const { type, data } = event.data;
-    // TODO: add a timeout to avoid infinite loop
-    // TODO: make the type as configurable
     if (type === 'molviewer:state' && data?.state === 'ready') {
       setServiceReady(true);
     }
@@ -29,20 +24,18 @@ const MolViewer = (props) => {
       if (contentWindow) {
         molContent.text().then((text) => {
           const messageData = { payload: text };
-          // TODO: add a timeout to avoid infinite loop
-          // TODO: make the type as configurable
-          contentWindow.postMessage({ type: 'kit:request-view', data: messageData }, '*');
+          contentWindow.postMessage({ type: `${cliendId}:request-view`, data: messageData }, '*');
         });
       }
     }
   };
 
-  if (!isValidUrl(endpoint)) {
+  if (!endpoint) {
     return <Alert bsStyle="danger">This service is not ready. Please contact your system administrator.</Alert>;
   }
 
   useEffect(() => {
-    if (isValidUrl(endpoint)) {
+    if (endpoint) {
       window.addEventListener('message', discoverService);
       return () => {
         window.removeEventListener('message', discoverService);
@@ -68,8 +61,9 @@ const MolViewer = (props) => {
 };
 
 MolViewer.propTypes = {
+  cliendId: PropTypes.string.isRequired,
   endpoint: PropTypes.string.isRequired,
-  molContent: PropTypes.object.isRequired
+  molContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
 };
 
 export default MolViewer;
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index 44a28740e..6d8380990 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -3,8 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { filter } from 'lodash';
-import UserStore from '../stores/UserStore';
-import MatrixCheck from '../common/MatrixCheck';
 import MolViewerListModal from './MolViewerListModal';
 import ArrayUtils from '../../components/utils/ArrayUtils';
 
@@ -12,10 +10,6 @@ export default class MolViewerListBtn extends Component {
   constructor(props) {
     super(props);
     this.state = { openModal: false };
-
-    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-    this.enableMoleculeViewer = MatrixCheck(currentUser.matrix, 'moleculeViewer');
-
     this.handleModalOpen = this.handleModalOpen.bind(this);
     this.renderBtn = this.renderBtn.bind(this);
   }
diff --git a/app/packs/src/components/viewer/MolViewerListModal.js b/app/packs/src/components/viewer/MolViewerListModal.js
index a26274bed..e7d93c825 100644
--- a/app/packs/src/components/viewer/MolViewerListModal.js
+++ b/app/packs/src/components/viewer/MolViewerListModal.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
 import { ReactNglViewer } from 'react-nglviewer';
 import MolViewer from './MolViewer';
+import MolViewerSet from './MolViewerSet';
 
 const MolViewerListModal = (props) => {
   const {
@@ -17,7 +18,8 @@ const MolViewerListModal = (props) => {
     const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
     return { ...file, dsName: ds.name };
   });
-  const [switchViewer, setSwitchViewer] = useState(config.viewerEndpoint ? 'jsmol' : 'ngl');
+  const [switchViewer, setSwitchViewer] =
+    useState(config.viewerEndpoint ? MolViewerSet.JSMOL : MolViewerSet.NGL);
 
   const handleFile = (e, attachment, ds) => {
     e.stopPropagation();
@@ -50,7 +52,12 @@ const MolViewerListModal = (props) => {
                   <Nav bsStyle="pills" stacked activeKey={activeKey}>
                     {
                       attachments.map(attachment => (
-                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => handleFile(e, attachment, ds)}>
+                        <NavItem
+                          key={attachment.id}
+                          eventKey={attachment.id}
+                          active={attachment.id === selected?.id}
+                          onClick={e => handleFile(e, attachment, ds)}
+                        >
                           <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
                         </NavItem>
                       ))
@@ -88,7 +95,13 @@ const MolViewerListModal = (props) => {
   if (show) {
     let modalBody = <Alert bsStyle="danger">This service is offline. Please contact your system administrator.</Alert>;
     if (newContent) {
-      const viewer = switchViewer === 'ngl' ? <ReactNglViewer fileName={selected?.filename} filePath={newContent} /> : <MolViewer endpoint={config.viewerEndpoint} molContent={newContent} />;
+      const viewer = switchViewer === MolViewerSet.NGL ?
+        <ReactNglViewer fileName={selected?.filename} filePath={newContent} /> :
+        (<MolViewer
+          cliendId={config.viewerClientId}
+          endpoint={config.viewerEndpoint}
+          molContent={newContent}
+        />);
       modalBody = <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div>;
     }
     return (
@@ -97,18 +110,25 @@ const MolViewerListModal = (props) => {
           <Modal.Title>
             Dataset: {selected.dsName} / File: {selected?.filename}
             <ButtonGroup bsSize="xsmall" className="button-right">
-              <Button active={switchViewer === 'jsmol'} onClick={() => setSwitchViewer('jsmol')} disabled={!config.viewerEndpoint}>JSmol Viewer</Button>
-              <Button active={switchViewer === 'ngl'} onClick={() => setSwitchViewer('ngl')}>NGL Viewer</Button>
+              <Button
+                active={switchViewer === MolViewerSet.JSMOL}
+                onClick={() => setSwitchViewer(MolViewerSet.JSMOL)}
+                disabled={!config.viewerEndpoint}
+              >
+                JSmol Viewer
+              </Button>
+              <Button
+                active={switchViewer === MolViewerSet.NGL}
+                onClick={() => setSwitchViewer(MolViewerSet.NGL)}
+              >
+                NGL Viewer
+              </Button>
             </ButtonGroup>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body onClick={e => e.stopPropagation()}>
-          <Col md={2} sm={2} lg={2}>
-            {list()}
-          </Col>
-          <Col md={10} sm={10} lg={10}>
-            {modalBody}
-          </Col>
+          <Col md={2} sm={2} lg={2}>{list()}</Col>
+          <Col md={10} sm={10} lg={10}>{modalBody}</Col>
         </Modal.Body>
       </Modal>
     );
diff --git a/app/packs/src/components/viewer/MolViewerModal.js b/app/packs/src/components/viewer/MolViewerModal.js
index dd6b65099..3e23f8ada 100644
--- a/app/packs/src/components/viewer/MolViewerModal.js
+++ b/app/packs/src/components/viewer/MolViewerModal.js
@@ -5,6 +5,7 @@ import { Button, ButtonGroup, Modal, ProgressBar } from 'react-bootstrap';
 import { ReactNglViewer } from 'react-nglviewer';
 import PublicFetcher from '../fetchers/PublicFetcher';
 import MolViewer from './MolViewer';
+import MolViewerSet from './MolViewerSet';
 
 const MolViewerModal = (props) => {
   const {
@@ -13,7 +14,8 @@ const MolViewerModal = (props) => {
 
   const [newContent, setNewContent] = useState(fileContent);
   const [progress, setProgress] = useState(null);
-  const [switchViewer, setSwitchViewer] = useState(config.viewerEndpoint ? 'jsmol' : 'ngl');
+  const [switchViewer, setSwitchViewer] =
+    useState(config.viewerEndpoint ? MolViewerSet.JSMOL : MolViewerSet.NGL);
 
   const updateNewContent = (data) => {
     setNewContent(new Blob([data], { type: 'text/plain' }));
@@ -49,15 +51,32 @@ const MolViewerModal = (props) => {
   }, []);
 
   if (show) {
-    const viewer = switchViewer === 'ngl' ? <ReactNglViewer fileName={`${title}.mol`} filePath={newContent} /> : <MolViewer endpoint={config.viewerEndpoint} molContent={newContent} />;
+    const viewer = switchViewer === MolViewerSet.NGL ?
+      <ReactNglViewer fileName={`${title}.mol`} filePath={newContent} /> :
+      (<MolViewer
+        cliendId={config.viewerClientId}
+        endpoint={config.viewerEndpoint}
+        molContent={newContent}
+      />);
     return (
       <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={handleModalOpen}>
         <Modal.Header closeButton>
           <Modal.Title>
             {title}
             <ButtonGroup bsSize="xsmall" className="button-right">
-              <Button active={switchViewer === 'jsmol'} onClick={() => setSwitchViewer('jsmol')} disabled={!config.viewerEndpoint}>JSmol Viewer</Button>
-              <Button active={switchViewer === 'ngl'} onClick={() => setSwitchViewer('ngl')}>NGL Viewer</Button>
+              <Button
+                active={switchViewer === MolViewerSet.JSMOL}
+                onClick={() => setSwitchViewer(MolViewerSet.JSMOL)}
+                disabled={!config.viewerEndpoint}
+              >
+                JSmol Viewer
+              </Button>
+              <Button
+                active={switchViewer === MolViewerSet.NGL}
+                onClick={() => setSwitchViewer(MolViewerSet.NGL)}
+              >
+                NGL Viewer
+              </Button>
             </ButtonGroup>
           </Modal.Title>
         </Modal.Header>
@@ -76,8 +95,8 @@ const MolViewerModal = (props) => {
 MolViewerModal.propTypes = {
   config: PropTypes.object.isRequired,
   fileContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  show: PropTypes.bool.isRequired,
   handleModalOpen: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
   title: PropTypes.string,
 };
 
diff --git a/app/packs/src/components/viewer/MolViewerSet.js b/app/packs/src/components/viewer/MolViewerSet.js
new file mode 100644
index 000000000..6140bd2c6
--- /dev/null
+++ b/app/packs/src/components/viewer/MolViewerSet.js
@@ -0,0 +1,5 @@
+export default Object.freeze({
+  PK: 'moleculeViewer',
+  JSMOL: 'jsmol',
+  NGL: 'ngl',
+});
diff --git a/app/packs/src/libHome/RepoMolViewerBtn.js b/app/packs/src/libHome/RepoMolViewerBtn.js
deleted file mode 100644
index e4654361b..000000000
--- a/app/packs/src/libHome/RepoMolViewerBtn.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import uuid from 'uuid';
-import RepoMolViewerModal from './RepoMolViewerModal';
-
-const viewButtonTip = _short => <Tooltip id={uuid.v4()}>{_short}</Tooltip>;
-
-export default class RepoMolViewerBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { show: false };
-    this.handleModalOpen = this.handleModalOpen.bind(this);
-  }
-
-  handleModalOpen(e) {
-    if (e) { e.stopPropagation(); }
-    const { show } = this.state;
-    this.setState({ show: !show });
-  }
-
-  render() {
-    const { fileContent, isPublic } = this.props;
-    const { show } = this.state;
-
-    const tooltip = viewButtonTip('Click to see structure in Viewer');
-
-    return (
-      <>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button className="button-right" bsSize="xsmall" bsStyle="info" onClick={e => this.handleModalOpen(e, true)}>
-            <i className="fa fa-cube" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-        {
-          show ?
-            <RepoMolViewerModal
-              fileContent={fileContent}
-              handleModalOpen={e => this.handleModalOpen(e, false)}
-              show={show}
-              isPublic={isPublic}
-            /> : null
-        }
-      </>
-    );
-  }
-}
-
-RepoMolViewerBtn.propTypes = {
-  fileContent: PropTypes.string.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerListBtn.js b/app/packs/src/libHome/RepoMolViewerListBtn.js
deleted file mode 100644
index bc36b689a..000000000
--- a/app/packs/src/libHome/RepoMolViewerListBtn.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { filter } from 'lodash';
-import RepoMolViewerListModal from './RepoMolViewerListModal';
-import ArrayUtils from '../components/utils/ArrayUtils';
-
-export default class RepoMolViewerListBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { openModal: false };
-    this.handleModalOpen = this.handleModalOpen.bind(this);
-    this.renderBtn = this.renderBtn.bind(this);
-  }
-
-  handleModalOpen(e) {
-    if (e) { e.stopPropagation(); }
-    const { openModal } = this.state;
-    this.setState({ openModal: !openModal });
-  }
-
-  renderBtn(disabled) {
-    const btnStyle = disabled ? 'default' : 'info';
-    const tipDesc = disabled ? ' (Nothing to view)' : '';
-    const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
-    const className = this.props.isPublic ? '' : '';
-    return (
-      <OverlayTrigger
-        placement="top"
-        delayShow={500}
-        overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
-      >
-        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick}>
-          <i className="fa fa-cube" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  render() {
-    const { el, container, isPublic } = this.props;
-    const { openModal } = this.state;
-    if (!el) return null;
-
-    if (container?.children?.length < 1) { return this.renderBtn(true); }
-
-    let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
-    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
-
-    datasetContainer = datasetContainer?.map((dc) => {
-      const ds = Object.assign({}, dc);
-      const { attachments } = ds;
-      ds.attachments = attachments?.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment?.filename?.match(/\.([^.]+)$/) && attachment?.filename?.match(/\.([^.]+)$/)[1]?.toLowerCase()));
-      if (ds.attachments.length > 0) return ds;
-      return null;
-    });
-
-    datasetContainer = datasetContainer.filter(dc => dc !== null);
-    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
-
-    return (
-      <>
-        {this.renderBtn(false)}
-        <RepoMolViewerListModal
-          handleModalOpen={this.handleModalOpen}
-          show={openModal}
-          title={el.short_label}
-          datasetContainer={datasetContainer}
-          isPublic={isPublic}
-        />
-      </>
-    );
-  }
-}
-
-RepoMolViewerListBtn.propTypes = {
-  el: PropTypes.object.isRequired,
-  container: PropTypes.object.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerListModal.js b/app/packs/src/libHome/RepoMolViewerListModal.js
deleted file mode 100644
index 62680753b..000000000
--- a/app/packs/src/libHome/RepoMolViewerListModal.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
-
-export default class RepoMolViewerListModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: null,
-      activeKey: 1
-    };
-
-    this.list = this.list.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleFile = this.handleFile.bind(this);
-  }
-
-  handleSelect(e, activeKey) {
-    e.stopPropagation();
-    this.setState({ activeKey });
-  }
-
-  handleFile(e, attachment, ds) {
-    e.stopPropagation();
-    this.setState({ selected: { ...attachment, dsName: ds.name } });
-  }
-
-  list() {
-    const { datasetContainer } = this.props;
-    const { selected, activeKey } = this.state;
-    const defaultActiveKey = datasetContainer[0].id;
-    return (
-      <PanelGroup
-        accordion
-        id="accordion-controlled-example"
-        defaultActiveKey={defaultActiveKey}
-        style={{ width: '100%', height: 'calc(100vh - 200px)', overflow: 'auto' }}
-      >
-        {
-          datasetContainer.map((ds) => {
-            const { attachments } = ds;
-            return (
-              <Panel key={ds.id} eventKey={ds.id} onClick={e => this.handleSelect(e, ds.id)}>
-                <Panel.Heading>
-                  <Panel.Title toggle>{`Dataset: ${ds.name}`}</Panel.Title>
-                </Panel.Heading>
-                <Panel.Body style={{ padding: '0px' }} collapsible>
-                  <Nav bsStyle="pills" stacked activeKey={activeKey}>
-                    {
-                      attachments.map(attachment => (
-                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => this.handleFile(e, attachment, ds)}>
-                          <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
-                        </NavItem>
-                      ))
-                    }
-                  </Nav>
-                </Panel.Body>
-              </Panel>
-            );
-          })
-        }
-      </PanelGroup>
-    );
-  }
-
-  handleModal(e) {
-    if (e) e.stopPropagation();
-    const { handleModalOpen } = this.props;
-    handleModalOpen();
-  }
-
-  render() {
-    const {
-      show, isPublic, datasetContainer
-    } = this.props;
-    let { selected } = this.state;
-    if (!selected) {
-      const ds = datasetContainer[0];
-      const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
-      selected = { ...file, dsName: ds.name };
-    }
-
-    const filePath = isPublic ?
-      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
-      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
-
-    if (show) {
-      return (
-        <Modal backdrop="static" animation dialogClassName="file-viewer-modal" show={show} onHide={e => this.handleModal(e)}>
-          <Modal.Header onClick={e => e.stopPropagation()} closeButton>
-            <Modal.Title>Dataset: {selected.dsName} / File: {selected?.filename}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body onClick={e => e.stopPropagation()}>
-            <Col md={2} sm={2} lg={2}>
-              {this.list()}
-            </Col>
-            <Col md={10} sm={10} lg={10}>
-              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
-                <ReactNglViewer fileName={selected?.filename} filePath={filePath} />
-              </div>
-            </Col>
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return <span />;
-  }
-}
-
-RepoMolViewerListModal.propTypes = {
-  datasetContainer: PropTypes.array.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-  show: PropTypes.bool.isRequired,
-  handleModalOpen: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerModal.js b/app/packs/src/libHome/RepoMolViewerModal.js
deleted file mode 100644
index 165c3d2eb..000000000
--- a/app/packs/src/libHome/RepoMolViewerModal.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
-
-const RepoMolViewerModal = (props) => {
-  const {
-    fileContent, show, title, handleModalOpen
-  } = props;
-  const filePath = new Blob([fileContent], { type: 'text/plain' });
-  if (show) {
-    return (
-      <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={() => handleModalOpen(false)}>
-        <Modal.Header closeButton>
-          <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
-            <ReactNglViewer fileName={`${title}.mol`} filePath={filePath} />
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-  return <span />;
-};
-
-RepoMolViewerModal.propTypes = {
-  fileContent: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-  handleModalOpen: PropTypes.func.isRequired,
-  title: PropTypes.string,
-};
-
-RepoMolViewerModal.defaultProps = { title: 'Structure Viewer' };
-
-export default RepoMolViewerModal;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index f471669d8..5fec07ed3 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -631,7 +631,7 @@ export default class RepoReactionDetails extends Component {
       <div style={{ border: 'none' }}>
         <div>
           <Jumbotron key={`reaction-${reaction.id}`}>
-            <PublicAnchor doi={taggData.doi} isPublished={isPublished} />
+            <PublicAnchor doi={isPublished ? taggData.doi : doi?.full_doi} isPublished={isPublished} />
             {canComment ? (
               <RepoReviewButtonBar
                 element={{ id: reaction.id, elementType: 'Reaction' }}
diff --git a/config/initializers/molecule_viewer.rb b/config/initializers/molecule_viewer.rb
index 8b4c7a3d7..5d271a482 100644
--- a/config/initializers/molecule_viewer.rb
+++ b/config/initializers/molecule_viewer.rb
@@ -12,9 +12,11 @@ def fetch_molecule_viewer_config
     Rails.logger.error("Error fetching molecule viewer config: #{e.message}")
   end
   ActiveSupport::OrderedOptions.new.tap do |config|
+    config.chembox_client_id = molecule_viewer_config['chembox_client_id']
+    config.chembox_endpoint = molecule_viewer_config['chembox_endpoint']
     config.feature_enabled = molecule_viewer_config['feature']['enabled'] || false
+    config.viewer_client_id = molecule_viewer_config['viewer_client_id']
     config.viewer_endpoint = molecule_viewer_config['viewer_endpoint']
-    config.converter_endpoint = molecule_viewer_config['converter_endpoint']
   end
 end
 
diff --git a/package.json b/package.json
index 2685dcb78..a70e76742 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "react-json-editor-ajrm": "^2.5.10",
     "react-markdown": "^6.0.2",
     "react-modal-resizable-draggable": "^0.1.6",
-    "react-nglviewer": "^0.5.0",
+    "react-nglviewer": "^0.6.0",
     "react-notification-system": "^0.2.7",
     "react-papaparse": "^3.17.2",
     "react-pdf": "^5.3.0-beta",
diff --git a/yarn.lock b/yarn.lock
index 000019946..3bd94c7ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13751,12 +13751,12 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-nglviewer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.5.0.tgz#920f3332d56aa4ed002978fefc83974d6fe232ec"
-  integrity sha512-6zAJY2uJ6TcyFICdaLkKC0Q+2vq/nlsuNFF4yEJosIt1qz8FF8b+GLmQcEvYRHGK7mhMO91rBX2j8qA0rrTz/w==
+react-nglviewer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.6.0.tgz#dfb3987c7f565e1abc05997613d6271c5aefed10"
+  integrity sha512-7d0DdCGriGhl/OAAM/0L1DFPa9R4BfoN520NKjL/B254lOT76c/8Lx9lrzf0HNBeYGz+/UAov0tEUPdmk0KjZw==
   dependencies:
-    ngl "^2.1.0"
+    ngl "^2.1.1"
 
 react-notification-system@^0.2.17, react-notification-system@^0.2.7:
   version "0.2.17"

From 6fbaf4c65ed5631bfff1491cfa8303be902bed8e Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Mon, 17 Jul 2023 21:30:41 +0200
Subject: [PATCH 166/258] compare view gets blank page

---
 .../elements/details/samples/SampleDetails.js | 62 +++++++++----------
 .../analysesTab/SampleDetailsContainersAux.js |  2 +-
 .../components/ReactionDetailsRepoComment.js  |  2 -
 .../components/SampleDetailsRepoComment.js    |  1 -
 .../src/components/viewer/MolViewerBtn.js     |  6 +-
 .../src/components/viewer/MolViewerListBtn.js |  6 +-
 .../components/viewer/MolViewerListModal.js   | 41 ++++++++++--
 app/packs/src/libHome/RepoCommon.js           |  6 +-
 8 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index e095b0625..eed6e19bc 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -129,7 +129,6 @@ export default class SampleDetails extends React.Component {
       sample: props.sample,
       reaction: null,
       materialGroup: null,
-      moleculeViewer: UIStore.getState().moleculeViewer,
       showStructureEditor: false,
       loadingMolecule: false,
       showElementalComposition: false,
@@ -493,7 +492,6 @@ export default class SampleDetails extends React.Component {
   }
 
   unseal() {
-    console.log('unseal');
     const { sample } = this.state;
     sample.sealed = false;
     this.setState({ sample });
@@ -1739,7 +1737,7 @@ export default class SampleDetails extends React.Component {
 
   render() {
     const sample = this.state.sample || {};
-    const { moleculeViewer, visible } = this.state;
+    const { visible } = this.state;
     const tabContentsMap = {
       properties: this.samplePropertiesTab('properties'),
       analyses: this.sampleContainerTab('analyses'),
@@ -1885,36 +1883,34 @@ export default class SampleDetails extends React.Component {
         <Panel.Body>
           <Row><Col md={this.props.fullScreen && this.state.commentScreen ? 6 : 12}>
             <div className={this.props.fullScreen ? 'full' : 'base'}>
-              {this.sampleInfo(sample)}
-              <ListGroup>
-                <ElementDetailSortTab
-                  type="sample"
-                  availableTabs={Object.keys(tabContentsMap)}
-                  tabTitles={tabTitlesMap}
-                  onTabPositionChanged={this.onTabPositionChanged}
-                  addInventoryTab={sample.inventory_sample}
-                />
-              <MolViewerBtn
-                config={moleculeViewer}
-                disabled={sample.isNew || !this.enableMoleculeViewer}
-                fileContent={sample.molfile}
-                isPublic={false}
-              />
-                {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
-                <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
-                  {tabContents}
-                </Tabs>
-              <PublishSampleModal
-                show={showPublishSampleModal}
-                sample={sample}
-                onHide={() => this.showPublishSampleModal(false)}
-                onPublishRefreshClose={this.forcePublishRefreshClose}
-              />
-              </ListGroup>
-              {this.sampleFooter()}
-              {this.structureEditorModal(sample)}
-              {this.renderMolfileModal()}
-              <CommentModal element={sample} />
+          {this.sampleInfo(sample)}
+          <ListGroup>
+            <ElementDetailSortTab
+              type="sample"
+              availableTabs={Object.keys(tabContentsMap)}
+              tabTitles={tabTitlesMap}
+              onTabPositionChanged={this.onTabPositionChanged}
+            />
+            <MolViewerBtn
+              disabled={sample.isNew || !this.enableMoleculeViewer}
+              fileContent={sample.molfile}
+              isPublic={false}
+            />
+            {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
+            <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
+              {tabContents}
+            </Tabs>
+          <PublishSampleModal
+            show={showPublishSampleModal}
+            sample={sample}
+            onHide={() => this.showPublishSampleModal(false)}
+            onPublishRefreshClose={this.forcePublishRefreshClose}
+          />
+          </ListGroup>
+          {this.sampleFooter()}
+          {this.structureEditorModal(sample)}
+          {this.renderMolfileModal()}
+          <CommentModal element={sample} />
             </div>
           </Col>
             {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index d1e5022b1..0090f66c3 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -405,7 +405,7 @@ const headerBtnGroup = (
         hasNMRium={hasNMRium}
       />
       <span className="button-right">
-        <MolViewerListBtn el={sample} container={container} isPublic={false} config={UIStore.getState().moleculeViewer} disabled={!enableMoleculeViewer} />
+        <MolViewerListBtn el={sample} container={container} isPublic={false} disabled={!enableMoleculeViewer} />
       </span>
       <span
         className="button-right add-to-report"
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
index cc218ffaa..a33b5dd54 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
 import ReviewStore from '../components/stores/ReviewStore';
 import ReviewActions from '../components/actions/ReviewActions';
 import RepoReactionDetails from '../libHome/RepoReactionDetails';
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
index b70cc6d64..56b638d02 100644
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ b/app/packs/src/components/SampleDetailsRepoComment.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
 import LoadingActions from './actions/LoadingActions';
 import ReviewStore from '../components/stores/ReviewStore';
 import RepoSampleDetails from '../libHome/RepoSampleDetails';
diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
index 3646d6ad0..78bff4c2a 100644
--- a/app/packs/src/components/viewer/MolViewerBtn.js
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import MolViewerModal from './MolViewerModal';
+import PublicStore from '../stores/PublicStore';
+import UIStore from '../stores/UIStore';
 
 export default class MolViewerBtn extends Component {
   constructor(props) {
@@ -18,8 +20,9 @@ export default class MolViewerBtn extends Component {
 
   render() {
     const {
-      config, disabled, fileContent, isPublic
+      disabled, fileContent, isPublic
     } = this.props;
+    const config = UIStore.getState().moleculeViewer || PublicStore.getState().moleculeViewer;
     const { show } = this.state;
     if (isPublic && !config.featureEnabled) return null;
 
@@ -46,7 +49,6 @@ export default class MolViewerBtn extends Component {
 }
 
 MolViewerBtn.propTypes = {
-  config: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
   fileContent: PropTypes.string.isRequired,
   isPublic: PropTypes.bool.isRequired,
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index 6d8380990..44e7ffb5e 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -5,6 +5,8 @@ import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { filter } from 'lodash';
 import MolViewerListModal from './MolViewerListModal';
 import ArrayUtils from '../../components/utils/ArrayUtils';
+import PublicStore from '../stores/PublicStore';
+import UIStore from '../stores/UIStore';
 
 export default class MolViewerListBtn extends Component {
   constructor(props) {
@@ -39,9 +41,10 @@ export default class MolViewerListBtn extends Component {
 
   render() {
     const {
-      config, container, el, isPublic
+      container, el, isPublic
     } = this.props;
     const { openModal } = this.state;
+    const config = UIStore.getState().moleculeViewer || PublicStore.getState().moleculeViewer;
     if (!el) return null;
     if (isPublic && !config.featureEnabled) return null;
 
@@ -80,7 +83,6 @@ export default class MolViewerListBtn extends Component {
 }
 
 MolViewerListBtn.propTypes = {
-  config: PropTypes.object.isRequired,
   container: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
   el: PropTypes.object.isRequired,
diff --git a/app/packs/src/components/viewer/MolViewerListModal.js b/app/packs/src/components/viewer/MolViewerListModal.js
index e7d93c825..b211ad5b4 100644
--- a/app/packs/src/components/viewer/MolViewerListModal.js
+++ b/app/packs/src/components/viewer/MolViewerListModal.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
+import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, ProgressBar, Nav, NavItem } from 'react-bootstrap';
 import { ReactNglViewer } from 'react-nglviewer';
 import MolViewer from './MolViewer';
 import MolViewerSet from './MolViewerSet';
@@ -13,6 +13,7 @@ const MolViewerListModal = (props) => {
 
   const [activeKey, setActiveKey] = useState(1);
   const [newContent, setNewContent] = useState(null);
+  const [progress, setProgress] = useState(0);
   const [selected, setSelected] = useState(() => {
     const ds = datasetContainer[0];
     const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
@@ -81,9 +82,36 @@ const MolViewerListModal = (props) => {
       `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
       : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
 
-    return fetch(filePath).then(response => response.blob()).catch((error) => {
-      console.log(error);
-    });
+    return fetch(filePath)
+      .then((response) => {
+        if (!response.ok) {
+          return null;
+        }
+        const contentLength = response.headers.get('Content-Length');
+        const totalSize = parseInt(contentLength, 10);
+        let downloadedSize = 0;
+
+        const reader = response.body.getReader();
+        const chunks = [];
+
+        const pump = () => reader.read().then(({ done, value }) => {
+          if (done) {
+            return new Blob(chunks);
+          }
+
+          downloadedSize += value.byteLength;
+          const progressPercentage = (downloadedSize / totalSize) * 100;
+          setProgress(progressPercentage);
+
+          chunks.push(value);
+          return pump();
+        });
+
+        return pump();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   useEffect(() => {
@@ -127,7 +155,10 @@ const MolViewerListModal = (props) => {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body onClick={e => e.stopPropagation()}>
-          <Col md={2} sm={2} lg={2}>{list()}</Col>
+          <Col md={2} sm={2} lg={2}>
+            { (progress >= 100) ? null : <ProgressBar active now={progress} label="downloading..." /> }
+            {list()}
+          </Col>
           <Col md={10} sm={10} lg={10}>{modalBody}</Col>
         </Modal.Body>
       </Modal>
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 332c7dd62..7261071a7 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -918,7 +918,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   return (
     <Row>
       <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={molecule.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} config={PublicStore.getState().moleculeViewer} disabled={false} />)}
+        {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={molecule.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} />)}
       </Col>
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
@@ -984,7 +984,7 @@ const RenderAnalysisHeader = (props) => {
       <br />
       <Row style={rinchiStyle}>
         <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={element.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} config={PublicStore.getState().moleculeViewer} disabled={false} />)}
+          {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={element.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} />)}
         </Col>
         <Col sm={6} md={6} lg={6}>
           <span className="repo-pub-sample-header">
@@ -1763,7 +1763,7 @@ class RenderPublishAnalysesPanel extends Component {
         <div className="abstract">
           <div className="lower-text">
             <div className="sub-title">
-              <b>{kind}</b>&nbsp;<MolViewerListBtn el={element} container={analysis} isPublic={isPublic} config={PublicStore.getState().moleculeViewer} disabled={false} />
+              <b>{kind}</b>&nbsp;<MolViewerListBtn el={element} container={analysis} isPublic={isPublic} disabled={false} />
               <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
               <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
             </div>

From 1b51641330e47ffa204bb24be8a62e54562420ed Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 18 Jul 2023 10:06:03 +0200
Subject: [PATCH 167/258] fix chembox endpoint

---
 app/api/helpers/public_helpers.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/api/helpers/public_helpers.rb b/app/api/helpers/public_helpers.rb
index ba2fa57a7..e15bade9c 100644
--- a/app/api/helpers/public_helpers.rb
+++ b/app/api/helpers/public_helpers.rb
@@ -34,11 +34,11 @@ def de_encode_json(json, key = '', viv = '', encode = true)
 
   def convert_to_3d(molfile)
     molecule_viewer = Rails.configuration.molecule_viewer_config || {}
-    if molecule_viewer.blank? || molecule_viewer.converter_endpoint.blank?
+    if molecule_viewer.blank? || molecule_viewer.chembox_endpoint.blank?
       { molfile: molfile }
     else
       options = { timeout: 10, body: { mol: molfile }.to_json, headers: { 'Content-Type' => 'application/json' } }
-      response = HTTParty.post(molecule_viewer.converter_endpoint, options)
+      response = HTTParty.post(molecule_viewer.chembox_endpoint, options)
       response.code == 200 ? { molfile: response.parsed_response } : { molfile: molfile }
     end
   end

From bca26e526b4589f6b96ed9e5a92323d8bf482ff4 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 30 Jul 2023 01:28:24 +0200
Subject: [PATCH 168/258] embargo accepted

---
 app/api/chemotion/sync_collection_api.rb      |  3 ++-
 app/packs/src/components/CollectionTree.js    |  3 ++-
 .../20230727222288_accepted_ancestry.rb       | 25 +++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 db/migrate/20230727222288_accepted_ancestry.rb

diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index a70a837b7..f61cbd19c 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -67,7 +67,7 @@ class SyncCollectionAPI < Grape::API
       handle_review = proc do |collections|
         cols = []
         collections.each do |col|
-          unless col['label'] == 'Reviewing' || col['label'] == 'Pending Publications' || col['label'] == 'Element To Review' || col['label'] == 'Reviewed'
+          unless col['label'] == 'Reviewing' || col['label'] == 'Pending Publications' || col['label'] == 'Element To Review' || col['label'] == 'Reviewed' || col['label'] == 'Embargo Accepted'
             cols.push(col)
             next
           end
@@ -102,6 +102,7 @@ class SyncCollectionAPI < Grape::API
         collections.each do |obj|
           root_ancestries.push(obj['ancestry'])
         end
+
         root_ancestries.map!(&:to_i)
         col_tree = Collection.remote(current_user.id).where(id: root_ancestries)
                              .where([' user_id in (select user_ids(?))', current_user.id]).order('shared_by_id')
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
index fc01a506f..4350fd7bf 100644
--- a/app/packs/src/components/CollectionTree.js
+++ b/app/packs/src/components/CollectionTree.js
@@ -245,7 +245,8 @@ export default class CollectionTree extends React.Component {
         else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
         else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
         else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
-        else if (e.label === 'Embargoed Publications') {orderedRoots[7] = e  }
+        else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }
+        else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e  }
         else {orderedRoots[idx+10] = e  }
       })
     }
diff --git a/db/migrate/20230727222288_accepted_ancestry.rb b/db/migrate/20230727222288_accepted_ancestry.rb
new file mode 100644
index 000000000..651a55883
--- /dev/null
+++ b/db/migrate/20230727222288_accepted_ancestry.rb
@@ -0,0 +1,25 @@
+class AcceptedAncestry < ActiveRecord::Migration[5.2]
+  def change
+    chemotion_user = User.chemotion_user
+    reviewer_ids = User.reviewer_ids
+    sys_accept_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted from', is_locked: true, is_shared: false)
+
+    embargo_accepted_collection = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted', is_synchronized: true)
+    embargo_accepted_collection.update!(ancestry: "#{sys_accept_from.id}")
+
+    reviewer_ids.each do |rid|
+      u = User.find(rid)
+      col_attributes = {
+        user: u,
+        shared_by_id: chemotion_user.id,
+        is_locked: true,
+        is_shared: true
+      }
+
+      rc = Collection.find_or_create_by(col_attributes)
+      sync = SyncCollectionsUser.find_or_create_by(user: u, shared_by_id: chemotion_user.id, collection_id: embargo_accepted_collection.id)
+      sync.update!(fake_ancestry: rc.id.to_s)
+
+    end
+  end
+end

From d372ed226148e9d40b0fe3a9673b0568b6decc15 Mon Sep 17 00:00:00 2001
From: Claire <chia-lin.lin@kit.edu>
Date: Sun, 30 Jul 2023 01:23:06 +0200
Subject: [PATCH 169/258] LabIMotion

---
 app/api/api.rb                                |   7 +
 app/api/chemotion/attachment_api.rb           |  17 +-
 app/api/chemotion/collection_api.rb           |  24 +-
 app/api/chemotion/converter_api.rb            |  66 --
 app/api/chemotion/public_api.rb               |  13 +-
 app/api/chemotion/repository_api.rb           |  10 +-
 app/api/entities/container_entity.rb          |  14 +-
 app/api/entities/generic_entity.rb            |  52 -
 app/api/entities/generic_public_entity.rb     |  16 -
 app/api/helpers/repository_helpers.rb         |   4 +-
 app/assets/stylesheets/flow-default.scss      | 157 ++++
 app/assets/stylesheets/flow.scss              | 142 +++
 app/assets/stylesheets/generic_designer.scss  |   9 +
 app/assets/stylesheets/repo_home.scss         |  97 ++
 app/models/concerns/tagging.rb                |   2 +-
 app/packs/src/admin/GenericAdminModal.js      |  50 +
 app/packs/src/apps/mydb/App.js                |   1 +
 .../apps/mydb/elements/details/ViewSpectra.js |   2 +-
 .../src/components/ElementsTableEntries.js    |   2 +
 app/packs/src/components/Notifications.js     |   2 +-
 .../src/components/common/CollectionSelect.js |   1 -
 .../components/container/ContainerDataset.js  |   9 +
 .../container/ContainerDatasetField.js        |   2 +
 .../components/contextActions/NoticeButton.js |   2 +-
 .../components/fetchers/GenericBaseFetcher.js |   7 +
 .../components/fetchers/GenericSgsFetcher.js  |  33 +
 .../src/components/generic/FlowViewerBtn.js   |  16 +
 .../components/generic/GenericDSDetails.js    |   2 +-
 .../src/components/generic/GenericElCommon.js | 402 --------
 .../components/generic/GenericElCriteria.js   |   2 +-
 .../components/generic/GenericElDetails.js    |   2 +
 .../src/components/generic/SegmentDetails.js  |   2 +-
 .../components/generic/SpectraEditorBtn.js    |  71 ++
 .../components/navigation/search/Search.js    | 147 ++-
 .../src/components/search/SampleCriteria.js   | 169 ++++
 .../components/search/SampleFormCriteria.js   | 114 +++
 app/packs/src/fetchers/UsersFetcher.js        |   9 +
 app/packs/src/generic/GenericAdminNav.js      |  39 +
 app/packs/src/generic/GenericDatasetsAdmin.js | 690 ++++++++++++++
 app/packs/src/generic/GenericElementsAdmin.js | 888 ++++++++++++++++++
 app/packs/src/generic/GenericSegmentsAdmin.js | 853 +++++++++++++++++
 app/packs/src/generic/Preview.js              | 168 ++++
 app/packs/src/generic/Utils.js                | 117 +++
 app/packs/src/libHome/Home.js                 |   3 +
 app/packs/src/libHome/Navigation.js           |  11 +-
 app/packs/src/libHome/RepoGenericHub.js       | 196 ++++
 app/packs/src/libHome/RepoGenericHubDesc.js   |  83 ++
 app/packs/src/libHome/homeRoutes.js           |   8 +
 app/packs/src/models/GenericEl.js             |  48 +
 app/packs/src/models/Reaction.js              |  19 +
 app/packs/src/models/Sample.js                |  17 +
 app/packs/src/stores/alt/stores/UIStore.js    |   4 +-
 app/views/pages/gda.haml                      |   2 +-
 app/views/pages/gea.haml                      |   2 +-
 app/views/pages/gsa.haml                      |   2 +-
 config/routes.rb                              |   4 +-
 .../set_dataset_klasses_identifier_v01.sql    |   8 +
 .../set_element_klasses_identifier_v01.sql    |   8 +
 ...014_generic_elements_revision_migration.rb |   2 +-
 ...000_generic_segments_revision_migration.rb |   4 +-
 ...0210621145002_generic_datasets_revision.rb |   2 +-
 ...000_generic_datasets_revision_migration.rb |   2 +-
 ...0712100000_add_segment_klass_identifier.rb |  16 -
 ...0712100002_add_segment_klass_identifier.rb |  34 +
 .../20230714100002_add_generic_updated_by.rb  |  46 +
 ...function_set_element_klasses_identifier.rb |   5 +
 ..._trigger_set_element_klasses_identifier.rb |   5 +
 ...function_set_dataset_klasses_identifier.rb |   5 +
 ..._trigger_set_dataset_klasses_identifier.rb |   5 +
 db/schema.rb                                  |  23 +-
 .../set_dataset_klasses_identifier_v01.sql    |   3 +
 .../set_element_klasses_identifier_v01.sql    |   3 +
 lib/export/export_collections.rb              |  15 +-
 yarn.lock                                     |  29 +
 74 files changed, 4404 insertions(+), 642 deletions(-)
 delete mode 100644 app/api/chemotion/converter_api.rb
 delete mode 100644 app/api/entities/generic_entity.rb
 delete mode 100644 app/api/entities/generic_public_entity.rb
 create mode 100644 app/assets/stylesheets/flow-default.scss
 create mode 100644 app/assets/stylesheets/flow.scss
 create mode 100644 app/assets/stylesheets/generic_designer.scss
 create mode 100644 app/packs/src/admin/GenericAdminModal.js
 create mode 100644 app/packs/src/components/fetchers/GenericSgsFetcher.js
 create mode 100644 app/packs/src/components/generic/FlowViewerBtn.js
 delete mode 100644 app/packs/src/components/generic/GenericElCommon.js
 create mode 100644 app/packs/src/components/generic/SpectraEditorBtn.js
 create mode 100644 app/packs/src/components/search/SampleCriteria.js
 create mode 100644 app/packs/src/components/search/SampleFormCriteria.js
 create mode 100644 app/packs/src/generic/GenericAdminNav.js
 create mode 100644 app/packs/src/generic/GenericDatasetsAdmin.js
 create mode 100644 app/packs/src/generic/GenericElementsAdmin.js
 create mode 100644 app/packs/src/generic/GenericSegmentsAdmin.js
 create mode 100644 app/packs/src/generic/Preview.js
 create mode 100644 app/packs/src/generic/Utils.js
 create mode 100644 app/packs/src/libHome/RepoGenericHub.js
 create mode 100644 app/packs/src/libHome/RepoGenericHubDesc.js
 create mode 100644 db/functions/set_dataset_klasses_identifier_v01.sql
 create mode 100644 db/functions/set_element_klasses_identifier_v01.sql
 delete mode 100644 db/migrate/20220712100000_add_segment_klass_identifier.rb
 create mode 100644 db/migrate/20220712100002_add_segment_klass_identifier.rb
 create mode 100644 db/migrate/20230714100002_add_generic_updated_by.rb
 create mode 100644 db/migrate/20230801142753_create_function_set_element_klasses_identifier.rb
 create mode 100644 db/migrate/20230801142841_create_trigger_set_element_klasses_identifier.rb
 create mode 100644 db/migrate/20230801142852_create_function_set_dataset_klasses_identifier.rb
 create mode 100644 db/migrate/20230801142924_create_trigger_set_dataset_klasses_identifier.rb
 create mode 100644 db/triggers/set_dataset_klasses_identifier_v01.sql
 create mode 100644 db/triggers/set_element_klasses_identifier_v01.sql

diff --git a/app/api/api.rb b/app/api/api.rb
index 01066d3d3..e7920ef2a 100644
--- a/app/api/api.rb
+++ b/app/api/api.rb
@@ -61,6 +61,7 @@ def authenticate!
     def is_public_request?
       request.path.start_with?(
         '/api/v1/public/',
+        '/api/v1/labimotion_hub/',
         '/api/v1/public_chemscanner/',
         '/api/v1/chemspectra/',
         '/api/v1/ketcher/layout',
@@ -186,9 +187,15 @@ def to_json_camel_case(val)
   mount Labimotion::GenericDatasetAPI
   mount Labimotion::SegmentAPI
   mount Labimotion::LabimotionHubAPI
+  mount Labimotion::GenericElementAPI
+  mount Labimotion::GenericDatasetAPI
+  mount Labimotion::SegmentAPI
+
+  ## For REPO
   mount Chemotion::RepositoryAPI
   mount Chemotion::ArticleAPI
   mount Chemotion::CollaborationAPI
+  mount Labimotion::LabimotionHubAPI
 
   add_swagger_documentation(info: {
     "title": "Chemotion Repository",
diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index f56f25d84..f8a7fcb59 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -75,6 +75,21 @@ def remove_duplicated(att)
       end
     end
 
+    resource :export_ds do
+      desc "Download the dataset attachment file"
+      get 'dataset/:container_id' do
+        env['api.format'] = :binary
+        export = Labimotion::ExportDataset.new
+        export.export(params[:container_id])
+        export.spectra(params[:container_id])
+        content_type('application/vnd.ms-excel')
+        ds_filename = export.res_name(params[:container_id])
+        filename = URI.escape(ds_filename)
+        header('Content-Disposition', "attachment; filename=\"#{filename}\"")
+        export.read
+      end
+    end
+
     resource :attachments do
       before do
         @attachment = Attachment.find_by(id: params[:attachment_id])
@@ -109,7 +124,7 @@ def remove_duplicated(att)
             end
 
             if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
-              element = Segment.find(@attachment.attachable_id)&.element
+              element = Labimotion::Segment.find(@attachment.attachable_id)&.element
               can_dwnld = @attachment.created_for == current_user.id ||
                           (ElementPolicy.new(current_user, element).read? &&
                           ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index 488db1a60..ffe0e5c27 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -387,7 +387,6 @@ class CollectionAPI < Grape::API
             ui_state[:checkedIds] = ui_state[:checkedIds].presence || ui_state[:included_ids]
             ui_state[:uncheckedIds] = ui_state[:uncheckedIds].presence || ui_state[:excluded_ids]
             next unless ui_state[:checkedAll] || ui_state[:checkedIds].present?
-
             ids = Labimotion::Element.by_collection_id(from_collection.id).by_ui_state(ui_state).pluck(:id)
             Labimotion::CollectionsElement.create_in_collection(ids, to_collection_id, klass.name)
           end
@@ -490,7 +489,17 @@ class CollectionAPI < Grape::API
             end
           end
 
-          ExportCollectionsJob.perform_later(collection_ids, params[:format].to_s, nested, current_user.id) unless collection_ids.empty?
+          case ENV['PUBLISH_MODE']
+          when 'production'
+            if Rails.env.production?
+              ExportCollectionsJob.perform_later(collection_ids, params[:format].to_s, nested, current_user.id) unless collection_ids.empty?
+            end
+          when 'staging'
+            ExportCollectionsJob.perform_now(collection_ids, params[:format].to_s, nested, current_user.id) unless collection_ids.empty?
+          else 'development'
+          end
+
+
           status 204
         end
       end
@@ -519,7 +528,16 @@ class CollectionAPI < Grape::API
               tempfile.unlink
             end
             # run the asyncronous import job and return its id to the client
-            ImportCollectionsJob.perform_now(att, current_user.id)
+
+            case ENV['PUBLISH_MODE']
+            when 'production'
+              if Rails.env.production?
+                ImportCollectionsJob.perform_later(att, current_user.id)
+              end
+            when 'staging'
+              ImportCollectionsJob.perform_now(att, current_user.id)
+            else 'development'
+            end
             status 204
           end
         end
diff --git a/app/api/chemotion/converter_api.rb b/app/api/chemotion/converter_api.rb
deleted file mode 100644
index fd1a8b66e..000000000
--- a/app/api/chemotion/converter_api.rb
+++ /dev/null
@@ -1,66 +0,0 @@
-# frozen_string_literal: true
-
-module Chemotion
-  class ConverterAPI < Grape::API
-    helpers do
-      def available?
-        @conf = Rails.configuration.try(:converter).try(:url)
-        @profile = Rails.configuration.try(:converter).try(:profile)
-        error!(406) unless @conf && @profile
-      end
-    end
-
-    resource :converter do # rubocop:disable Metrics/BlockLength
-      before do
-        available?
-      end
-      resource :profiles do
-        desc 'fetch profiles'
-        get do
-          profiles = Analyses::Converter.fetch_profiles
-          { profiles: profiles, client: @profile }
-        end
-        desc 'create profile'
-        post do
-          Analyses::Converter.create_profile(params)
-        end
-        desc 'update profile'
-        route_param :id do
-          put do
-            Analyses::Converter.update_profile(params)
-          end
-        end
-        desc 'delete profile'
-        route_param :id do
-          delete do
-            id = params[:id]
-            Analyses::Converter.delete_profile(id)
-          end
-        end
-      end
-
-      resource :options do
-        before do
-          error!(401) unless current_user.profile.data['converter_admin'] == true # rubocop:disable Lint/SafeNavigationChain
-        end
-        desc 'fetch options'
-        get do
-          options = Analyses::Converter.fetch_options
-          { options: options, client: @profile }
-        end
-      end
-
-      resource :tables do
-        before do
-          error!(401) unless current_user.profile&.data['converter_admin'] == true # rubocop:disable Lint/SafeNavigationChain
-        end
-        desc 'create tables'
-        post do
-          res = Analyses::Converter.create_tables(params[:file][0]['tempfile']) unless params[:file].empty?
-          res['metadata']['file_name'] = params[:file][0]['filename']
-          res
-        end
-      end
-    end
-  end
-end
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index a5231fd55..04af2ff24 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -66,8 +66,8 @@ class PublicAPI < Grape::API
           requires :klass, type: String, desc: 'Klass', values: %w[Element Segment Dataset]
         end
         get do
-          list = "#{params[:klass]}Klass".constantize.where(is_active: true).where.not(released_at: nil).select { |s| s["is_generic"].blank? }
-          entities = Entities::GenericPublicEntity.represent(list)
+          list = "Labimotion::#{params[:klass]}Klass".constantize.where(is_active: true).where.not(released_at: nil).select { |s| s["is_generic"].blank? }
+          entities = Labimotion::GenericPublicEntity.represent(list)
           # entities.length > 1 ? de_encode_json(entities) : []
         end
       end
@@ -78,11 +78,10 @@ class PublicAPI < Grape::API
           requires :username, type: String, desc: 'Username'
           requires :password, type: String, desc: 'Password'
         end
-        post do
-          token = Usecases::Public::BuildToken.execute!(params)
-          error!('401 Unauthorized', 401) if token.blank?
-
-          { token: token }
+        get do
+          list = Labimotion::ElementKlass.where(is_active: true) if params[:generic_only].present? && params[:generic_only] == true
+          list = Labimotion::ElementKlass.where(is_active: true) unless params[:generic_only].present? && params[:generic_only] == true
+          list.pluck(:name)
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 34f0f709f..a5dbe4c94 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -67,6 +67,12 @@ def duplicate_analyses(new_element, analyses_arr, ik = nil)
               new_dataset.name = ds.name
               new_dataset.extended_metadata = ds.extended_metadata
               new_dataset.save!
+
+              if ds.dataset.present?
+                new_dataset.dataset = ds.dataset.dup
+                new_dataset.dataset.uuid = SecureRandom.uuid
+                new_dataset.dataset.save!
+              end
             end
           end
         end
@@ -559,7 +565,7 @@ def add_submission_history(root)
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
-          entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
+          entities[:segments] = Labimotion::SegmentEntity.represent(reaction.segments)
           embargo = find_embargo_collection(publication)
           entities[:embargo] = embargo&.label
           entities[:embargoId] = embargo&.id
@@ -588,7 +594,7 @@ def add_submission_history(root)
         get do
           sample = Sample.where(id: params[:id]).includes(:molecule, :tag).last
           review_sample = { **sample.serializable_hash.deep_symbolize_keys }
-          review_sample[:segments] = sample.segments.present? ? Entities::SegmentEntity.represent(sample.segments) : []
+          review_sample[:segments] = sample.segments.present? ? Labimotion::SegmentEntity.represent(sample.segments) : []
           molecule = Molecule.find(sample.molecule_id) unless sample.nil?
           containers = Entities::ContainerEntity.represent(sample.container)
           publication = Publication.find_by(element_id: params[:id], element_type: 'Sample')
diff --git a/app/api/entities/container_entity.rb b/app/api/entities/container_entity.rb
index d364ce486..646625aa5 100644
--- a/app/api/entities/container_entity.rb
+++ b/app/api/entities/container_entity.rb
@@ -52,12 +52,14 @@ def extended_metadata
 
     private
 
-    # The frontend assumes the analysis (no other container types) to have a preview image.
-    # Technically the images are attached to the analysis' dataset children though.
-    # Therefore we have to collect all eligible images from the dataset children and display the newest
-    # thumbnail available.
-    def preview_img
-      return unless object.container_type == 'analysis'
+    def preview_img(container_ids, attachments)
+      attachments = attachments.select do |a|
+        a.thumb == true && a.attachable_type == 'Container' && container_ids.include?(a.attachable_id)
+      end
+
+      image_atts = attachments.select do |a_img|
+        a_img&.content_type&.match(Regexp.union(%w[jpg jpeg png tiff]))
+      end
 
       attachments_with_thumbnail = Attachment.where(
         thumb: true,
diff --git a/app/api/entities/generic_entity.rb b/app/api/entities/generic_entity.rb
deleted file mode 100644
index 4d7193e20..000000000
--- a/app/api/entities/generic_entity.rb
+++ /dev/null
@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  class GenericEntity < Grape::Entity
-    expose :id, :is_active, :label, :desc, :place, :released_at
-
-    expose :element_klass_id do |obj|
-      obj[:element_klass_id] || 0
-    end
-
-    expose :klass_name do |obj|
-      obj[:name] || ''
-    end
-
-    expose :ols_term_id do |obj|
-      obj[:ols_term_id] || ''
-    end
-
-    expose :icon_name do |obj|
-      obj[:icon_name] || ''
-    end
-
-    expose :klass_prefix do |obj|
-      obj[:klass_prefix] || ''
-    end
-
-    expose :is_generic do |obj|
-      obj[:is_generic] || true
-    end
-
-    expose :uuid do |obj|
-      obj[:uuid] || ''
-    end
-
-    expose :properties_release do |obj|
-      obj[:properties_release] || {}
-    end
-
-    expose :element_klass do |obj|
-      if obj[:element_klass_id]
-        Entities::GenericEntity.represent(obj.element_klass)
-      else
-        {}
-      end
-    end
-
-    expose :identifier do |obj|
-      obj[:identifier] || ''
-    end
-  end
-end
diff --git a/app/api/entities/generic_public_entity.rb b/app/api/entities/generic_public_entity.rb
deleted file mode 100644
index d2bde0e2c..000000000
--- a/app/api/entities/generic_public_entity.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  class GenericPublicEntity < GenericEntity
-    unexpose :id
-    unexpose :is_active
-    unexpose :place
-    unexpose :element_klass_id
-    unexpose :ols_term_id
-    unexpose :is_generic
-    unexpose :uuid
-    unexpose :properties_release
-    unexpose :element_klass
-  end
-end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index 17dc387db..de7333a8b 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -62,7 +62,7 @@ def get_pub_reaction(id)
     entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
     entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
     entities[:elementType] = 'reaction'
-    entities[:segments] = Entities::SegmentEntity.represent(reaction.segments)
+    entities[:segments] = Labimotion::SegmentEntity.represent(reaction.segments)
     entities
   end
 
@@ -133,7 +133,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
         ana_infos[pp.element_id] = info['comment']
       end
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
-      segments = Entities::SegmentEntity.represent(s.segments)
+      segments = Labimotion::SegmentEntity.represent(s.segments)
       tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
         sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, comp_num: comp_num, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
diff --git a/app/assets/stylesheets/flow-default.scss b/app/assets/stylesheets/flow-default.scss
new file mode 100644
index 000000000..73384c776
--- /dev/null
+++ b/app/assets/stylesheets/flow-default.scss
@@ -0,0 +1,157 @@
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.react-flow__edge {
+  &.selected {
+    .react-flow__edge-path {
+      stroke: #555;
+    }
+  }
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+}
+
+.react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge-text {
+  font-size: 10px;
+}
+
+.react-flow__edge-textbg {
+  fill: white;
+}
+
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__node {
+  cursor: grab;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.react-flow__node-default.selectable,
+.react-flow__node-input.selectable,
+.react-flow__node-output.selectable {
+  &:hover {
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.react-flow__node-input {
+  background: #fff;
+  border-color: #0041d0;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #0041d0;
+  }
+
+  .react-flow__handle {
+    background: #0041d0;
+  }
+}
+
+.react-flow__node-default {
+  background: #fff;
+  border-color: #1a192b;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+
+  .react-flow__handle {
+    background: #1a192b;
+  }
+}
+
+.react-flow__node-output {
+  background: #fff;
+  border-color: #ff0072;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #ff0072;
+  }
+
+  .react-flow__handle {
+    background: #ff0072;
+  }
+}
+
+.react-flow__nodesselection-rect {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.react-flow__handle {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #555;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}
+
+.react-flow__minimap {
+  background-color: #fff;
+}
+
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    svg {
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/flow.scss b/app/assets/stylesheets/flow.scss
new file mode 100644
index 000000000..e3930c6a7
--- /dev/null
+++ b/app/assets/stylesheets/flow.scss
@@ -0,0 +1,142 @@
+/* index css */
+
+.overview-example__add {
+  display: none;
+}
+
+.react-flow__node a {
+  font-weight: 700;
+  color: #111;
+}
+
+.react-flow__node.dark-node {
+  background: #0041d0;
+  color: #f8f8f8;
+}
+
+.react-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
+.react-flow__node-selectorNode {
+  font-size: 12px;
+  background: #f0f2f3;
+  border: 1px solid 555;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.react-flow__node-selectorNode .react-flow__handle {
+  border-color: #f0f2f3;
+}
+
+@media screen and (min-width: 768px) {
+  .overview-example__add {
+    display: block;
+  }
+}
+
+/* DnDFlow css */
+
+.dndflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.dndflow aside {
+  overflow: auto;
+  flex-grow: 1;
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #eee;
+}
+
+.dndflow aside > * {
+  margin-bottom: 10px;
+  cursor: grab;
+}
+
+.dndflow aside .description {
+  margin-bottom: 10px;
+}
+
+.dndflow .reactflow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .dndflow {
+    flex-direction: row;
+  }
+
+  .dndflow aside {
+    width: 20%;
+    max-width: 180px;
+  }
+}
+
+/* Provider css */
+
+.providerflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.providerflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.providerflow aside .description {
+  margin-bottom: 10px;
+}
+
+.providerflow aside .title {
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.providerflow aside .transform {
+  margin-bottom: 20px;
+}
+
+.providerflow .reactflow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+.providerflow .selectall {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .providerflow {
+    flex-direction: row;
+  }
+
+  .providerflow aside {
+    width: 20%;
+    max-width: 250px;
+  }
+}
+
+/* save buttons */
+
+.save__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.save__controls button {
+  margin-left: 5px;
+}
diff --git a/app/assets/stylesheets/generic_designer.scss b/app/assets/stylesheets/generic_designer.scss
new file mode 100644
index 000000000..8689ae4c2
--- /dev/null
+++ b/app/assets/stylesheets/generic_designer.scss
@@ -0,0 +1,9 @@
+.generic-designer-container {
+  width: 90vw;
+  margin: auto;
+  .main-content {
+    top: 60px;
+    position: absolute;
+    width: 90%;
+  }
+}
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 44420cfd8..524fed522 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -988,3 +988,100 @@ $bs-successcolor: #5cb85c;
   background-color: #19b5fe !important;
   color: black !important;
 }
+
+.repo-generic-hub-btn {
+  a {
+    padding-top: 8px !important;
+    padding-bottom: 0px !important;
+  }
+}
+
+.repo-generic-hub-layout {
+  position: relative;
+
+  .repo-generic-hub-inner {
+    display: flex;
+    align-items: stretch;
+    height: calc(100vh - 120px);
+
+    .expand-button {
+      border-radius: 0px;
+    }
+
+    .content {
+      background-color: #efefef;
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .btn-group{
+        display: inline-flex !important;
+        .btn {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+@mixin button-look {
+  background-color: white;
+  padding: 6px;
+  border: 1px solid #ccc;
+}
+
+.repo-generic-hub-desc {
+  margin: 20px 40px;
+  // width: 100%;
+  .contact {
+    float: right;
+    .btn {
+      padding: 10px;
+      color: #0b57d0;
+      font-weight: bold;
+    }
+  }
+  .start {
+    @include button-look;
+  }
+  .download {
+    @include button-look;
+    border-radius: 6px;
+  }
+}
+
+.white-nav-item {
+  a {
+    padding: 15px 15px 10px 0px !important;
+  }
+}
+
+.white-nav-item:hover {
+  text-decoration: underline;
+  text-decoration-color: lightgray;
+  text-decoration-style: solid;
+  text-decoration-thickness: 4px;
+  text-underline-offset: 20%;
+}
+
+.hub-menu {
+  color: white !important;
+  background-color: #6c757d !important;
+  border: 1px solid #6c757d !important;
+  border-radius: 0px !important;
+}
+
+.hub-menu:hover {
+  background-color: #ddd !important;
+  color: #6c757d !important;
+}
+
+.hub-menu:focus {
+  background-color: #ddd !important;
+  color: #6c757d !important;
+}
+
+.hub-menu:active {
+  background-color: #ddd !important;
+  color: #6c757d !important;
+}
diff --git a/app/models/concerns/tagging.rb b/app/models/concerns/tagging.rb
index bc51871a2..699e811da 100644
--- a/app/models/concerns/tagging.rb
+++ b/app/models/concerns/tagging.rb
@@ -9,7 +9,7 @@ module Tagging
   end
 
   def update_tag
-    klass = self.class.name
+    klass = self.class.name.split('::').last
     case klass
     when 'ReactionsProductSample', 'ReactionsStartingMaterialSample',
       'ReactionsSolventSample', 'ReactionsReactantSample'
diff --git a/app/packs/src/admin/GenericAdminModal.js b/app/packs/src/admin/GenericAdminModal.js
new file mode 100644
index 000000000..c4473696d
--- /dev/null
+++ b/app/packs/src/admin/GenericAdminModal.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+
+export default class GenericAdminModal extends Component {
+  constructor(props) {
+    super(props);
+    this.handleAuthAdmin = this.handleAuthAdmin.bind(this);
+  }
+
+  handleAuthAdmin(user, type, value) {
+    const { fnCb } = this.props;
+    const params = {
+      user_id: user.id,
+      auth_generic_admin: { }
+    };
+    params.auth_generic_admin[type] = !value;
+    AdminFetcher.updateAccount(params)
+      .then(() => fnCb(user));
+  }
+
+  render() {
+    const { user, fnShowModal } = this.props;
+    const { elements, segments, datasets } = (user.generic_admin || {});
+    return (
+      <Modal show onHide={() => fnShowModal(false)}>
+        <Modal.Header closeButton>
+          <Modal.Title>{`Grant/Revoke Generic Admin (user: ${user.name})`}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Button bsSize="sm" bsStyle={elements ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'elements', elements)}>{elements ? 'Revoke' : 'Grant'} Generic Elements</Button>&nbsp;
+          <Button bsSize="sm" bsStyle={segments ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'segments', segments)}>{segments ? 'Revoke' : 'Grant'} Generic Segments</Button>&nbsp;
+          <Button bsSize="sm" bsStyle={datasets ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'datasets', datasets)}>{datasets ? 'Revoke' : 'Grant'} Generic Datasets</Button>
+          <ul>
+            <li>Currently {elements ? '' : 'NOT'} acting as the administrator of the Generc Elements</li>
+            <li>Currently {segments ? '' : 'NOT'} acting as the administrator of the Generc Segments</li>
+            <li>Currently {datasets ? '' : 'NOT'} acting as the administrator of the Generc Datasets</li>
+          </ul>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+GenericAdminModal.propTypes = {
+  user: PropTypes.object.isRequired, fnShowModal: PropTypes.func.isRequired, fnCb: PropTypes.func
+};
+GenericAdminModal.defaultProps = { fnCb: () => {} };
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index acc912e87..780a8aac2 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -19,6 +19,7 @@ import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import Aviator from 'aviator';
 import { RepoReviewModal } from 'repo-review-ui';
+import { FlowViewerModal } from 'chem-generic-ui';
 import alt from './alt';
 import initRoutes from './routes';
 import ReviewActions from './actions/ReviewActions';
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 88560c139..4c28e4c9c 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -201,7 +201,7 @@ class ViewSpectra extends React.Component {
         if (ai.id !== si.idAi) return null;
         return ai.extended_metadata.content.ops; // eslint-disable-line
       }).filter(r => r !== null);
-    }).filter(r => r !== null)[0][0];
+    }).filter(r => r !== null)?.[0]?.[0];
     return ops;
   }
 
diff --git a/app/packs/src/components/ElementsTableEntries.js b/app/packs/src/components/ElementsTableEntries.js
index f466a56ac..4db3e7454 100644
--- a/app/packs/src/components/ElementsTableEntries.js
+++ b/app/packs/src/components/ElementsTableEntries.js
@@ -155,6 +155,8 @@ export default class ElementsTableEntries extends Component {
       sourceType = DragDropItemTypes.REACTION;
     } else if (isDropForGP) {
       sourceType = DragDropItemTypes.GENERALPROCEDURE;
+    } else {
+      sourceType = DragDropItemTypes.ELEMENT;
     }
     return sourceType;
   }
diff --git a/app/packs/src/components/Notifications.js b/app/packs/src/components/Notifications.js
index a5239a509..9cdf1f3ca 100644
--- a/app/packs/src/components/Notifications.js
+++ b/app/packs/src/components/Notifications.js
@@ -14,7 +14,7 @@ class Notifications extends Component {
   render() {
     return (
       <div>
-        <NotificationSystem key={uuid.v4()} ref={(notification) => { this.notificationSystem = notification; }} />
+        <NotificationSystem ref={(notification) => { this.notificationSystem = notification; }} />
       </div>
     );
   }
diff --git a/app/packs/src/components/common/CollectionSelect.js b/app/packs/src/components/common/CollectionSelect.js
index 59adebd05..bdb708ffe 100644
--- a/app/packs/src/components/common/CollectionSelect.js
+++ b/app/packs/src/components/common/CollectionSelect.js
@@ -52,7 +52,6 @@ export default class CollectionSelect extends React.Component {
   ColOptions() {
     const { unsharedRoots } = this.state;
 
-    console.log(unsharedRoots);
     const cAllTree = [];
     this.makeTree(cAllTree, unsharedRoots || [], 0);
 
diff --git a/app/packs/src/components/container/ContainerDataset.js b/app/packs/src/components/container/ContainerDataset.js
index 4b5b7abc5..cdfc51633 100644
--- a/app/packs/src/components/container/ContainerDataset.js
+++ b/app/packs/src/components/container/ContainerDataset.js
@@ -452,6 +452,7 @@ export default class ContainerDataset extends Component {
         marginLeft: 17,
       },
     };
+
     const termId = absOlsTermId(kind);
     const klasses =
       (UserStore.getState() && UserStore.getState().dsKlasses) || [];
@@ -562,6 +563,14 @@ export default class ContainerDataset extends Component {
             onChange={this.handleDSChange}
           />
         </Col>
+        <Col md={12}>
+          <GenericDSDetails
+            genericDS={genericDS}
+            klass={klass}
+            kind={kind}
+            onChange={this.handleDSChange}
+          />
+        </Col>
       </Row>
     );
   }
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index f32827f47..5aab082f0 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -7,6 +7,8 @@ import DragDropItemTypes from 'src/components/DragDropItemTypes';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import { absOlsTermId } from 'chem-generic-ui';
 import { GenericDSMisType } from 'src/apps/generic/Utils';
+
+// For REPO
 import PublicFetcher from './fetchers/PublicFetcher';
 
 const dataTarget = {
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 978b3e4ea..71d940d57 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -196,7 +196,7 @@ export default class NoticeButton extends React.Component {
         nextState.localVersion.indexOf('.js')
       );
       if (serverVer !== localVer) {
-        createUpgradeNotification(serverVer, localVer);
+        // createUpgradeNotification(serverVer, localVer);
       }
     }
 
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
index f59f0f92d..026118056 100644
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -1,6 +1,13 @@
 import 'whatwg-fetch';
 
 export default class GenericBaseFetcher {
+  static open(path, method) {
+    return fetch(`/api/v1/labimotion_hub/${path}`, { credentials: 'same-origin', method })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
   static exec(path, method) {
     return fetch(`/api/v1/${path}`, { credentials: 'same-origin', method })
       .then(response => response.json()).then(json => json).catch((errorMessage) => {
diff --git a/app/packs/src/components/fetchers/GenericSgsFetcher.js b/app/packs/src/components/fetchers/GenericSgsFetcher.js
new file mode 100644
index 000000000..956eb81a9
--- /dev/null
+++ b/app/packs/src/components/fetchers/GenericSgsFetcher.js
@@ -0,0 +1,33 @@
+import GenericBaseFetcher from './GenericBaseFetcher';
+
+export default class GenericSgsFetcher extends GenericBaseFetcher {
+  static open(path, method) { return super.open(path, method); }
+  static exec(path, method) { return super.exec(`segments/${path}`, method); }
+  static execData(params, path) { return super.execData(params, `segments/${path}`); }
+
+  static fetchKlassOpen() {
+    return this.open('/list?klass=Segment', 'GET');
+  }
+
+  static createSegmentKlass(params) {
+    return this.execData(params, 'create_segment_klass');
+  }
+
+  static fetchKlass(elementName = null) {
+    const api = (elementName == null) ? 'klasses.json' : `klasses.json?element=${elementName}`;
+    return this.exec(api, 'GET');
+  }
+
+  static listSegmentKlass(params = {}) {
+    const api = params.is_active === undefined ? 'list_segment_klass.json' : `list_segment_klass.json?is_active=${params.is_active}`;
+    return this.exec(api, 'GET');
+  }
+
+  static updateSegmentKlass(params) {
+    return this.execData(params, 'update_segment_klass');
+  }
+
+  static updateSegmentTemplate(params) {
+    return super.updateTemplate({ ...params, klass: 'SegmentKlass' }, 'update_segment_template');
+  }
+}
diff --git a/app/packs/src/components/generic/FlowViewerBtn.js b/app/packs/src/components/generic/FlowViewerBtn.js
new file mode 100644
index 000000000..d5745d542
--- /dev/null
+++ b/app/packs/src/components/generic/FlowViewerBtn.js
@@ -0,0 +1,16 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { renderFlowModal } from '../../generic/Utils';
+
+const FlowViewerBtn = props => (
+  <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()}>click to view defined workflow</Tooltip>}>
+    <Button onClick={() => renderFlowModal(props.generic, true)} bsSize="xsmall" bsStyle="primary"><i className="fa fa-sitemap" aria-hidden="true" />{' '}Workflow</Button>
+  </OverlayTrigger>
+);
+
+FlowViewerBtn.propTypes = { generic: PropTypes.object.isRequired };
+
+export default FlowViewerBtn;
diff --git a/app/packs/src/components/generic/GenericDSDetails.js b/app/packs/src/components/generic/GenericDSDetails.js
index 269e6fb1d..da1bcb7f3 100644
--- a/app/packs/src/components/generic/GenericDSDetails.js
+++ b/app/packs/src/components/generic/GenericDSDetails.js
@@ -51,7 +51,7 @@ class GenericDSDetails extends Component {
       Object.keys(genericDS).length !== 0
     ) {
       return (
-        <Panel className="panel-detail generic-ds-panel"> 
+        <Panel className="panel-detail generic-ds-panel">
           <Panel.Body>
             {this.elementalPropertiesItem(genericDS)}
             <span className="g-ds-note label">
diff --git a/app/packs/src/components/generic/GenericElCommon.js b/app/packs/src/components/generic/GenericElCommon.js
deleted file mode 100644
index c1dfab5fe..000000000
--- a/app/packs/src/components/generic/GenericElCommon.js
+++ /dev/null
@@ -1,402 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Col, PanelGroup, Row } from 'react-bootstrap';
-import { sortBy, findIndex } from 'lodash';
-import uuid from 'uuid';
-import { genUnits, unitConversion } from '../../admin/generic/Utils';
-import Attachment from '../models/Attachment';
-import {
-  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
-  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
-  GenPropertiesTextArea, GenPropertiesUpload, GenDummy, GenTextFormula, GenPropertiesTable
-} from './GenericPropertiesFields';
-
-const UploadInputChange = (properties, event, field, layer) => {
-  const files = [];
-  const fieldObj = properties.layers[`${layer}`].fields.find(e => e.field === field) || {};
-  const value = fieldObj.value || {};
-  switch (event.action) {
-    case 'l': {
-      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
-      const label = event && event.val && event.val.target && event.val.target.value;
-      if (value.files[valIdx] && label) value.files[valIdx].label = label;
-      break;
-    }
-    case 'f': {
-      (event.val || []).forEach((file) => {
-        const uid = uuid.v4();
-        if (typeof value.files === 'undefined' || value.files === null) value.files = [];
-        value.files.push({ uid, filename: file.name });
-        files.push({ uid, filename: file.name, file: Attachment.fromFile(file) });
-      });
-      break;
-    }
-    case 'd': {
-      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
-      if (valIdx >= 0 && value.files && value.files.length > 0) value.files.splice(valIdx, 1);
-      return [value, files, event.uid];
-    }
-    default:
-      console.log(event);
-  }
-  return [value, files];
-};
-
-
-const ShowProperties = (fObj, layers) => {
-  let showField = true;
-  if (fObj && fObj.cond_fields && fObj.cond_fields.length > 0) {
-    showField = false;
-    for (let i = 0; i < fObj.cond_fields.length; i += 1) {
-      const cond = fObj.cond_fields[i] || {};
-      const { layer, field, value } = cond;
-      if (field && field !== '') {
-        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field) || {};
-        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
-        (['true', 'yes', 't', '1'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) !== 'undefined' && fd.value === true)))) {
-          showField = true;
-          break;
-        } else if (['text', 'select'].includes(fd && fd.type) && (typeof (fd && fd.value) !== 'undefined' && ((fd && fd.value) || '').trim() == (value || '').trim())) {
-          showField = true;
-          break;
-        }
-      }
-    }
-  }
-  return showField;
-};
-
-const GenProperties = (opt) => {
-  const fieldProps = { ...opt, dndItems: [] };
-  const type = fieldProps.type.split('_');
-  if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text';
-
-  switch (type[0]) {
-    case 'checkbox':
-      return GenPropertiesCheckbox(fieldProps);
-    case 'formula-field':
-      return GenPropertiesCalculate(fieldProps);
-    case 'select':
-      return GenPropertiesSelect(fieldProps);
-    case 'drag':
-      fieldProps.dndItems = [...fieldProps.dndItems, type[1]];
-      return GenPropertiesDrop(fieldProps);
-    case 'integer':
-      return GenPropertiesNumber(fieldProps);
-    case 'system-defined':
-      return GenPropertiesSystemDefined(fieldProps);
-    case 'input-group':
-      return GenPropertiesInputGroup(fieldProps);
-    case 'textarea':
-      return GenPropertiesTextArea(fieldProps);
-    case 'upload':
-      return GenPropertiesUpload(fieldProps);
-    case 'dummy':
-      return GenDummy();
-    case 'table':
-      return GenPropertiesTable(fieldProps);
-    case 'text-formula':
-      return GenTextFormula(fieldProps);
-    default:
-      return GenPropertiesText(fieldProps);
-  }
-};
-
-const GenPropertiesSearch = opt => GenProperties({ ...opt, isSearchCriteria: true });
-
-class GenPropertiesLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSubChange = this.handleSubChange.bind(this);
-  }
-
-  handleChange(e, f, k, t) {
-    this.props.onChange(e, f, k, t);
-  }
-
-  handleSubChange(e, id, f, valueOnly = false) {
-    const sub = f.sub_fields.find(m => m.id === id);
-    if (!valueOnly) {
-      if (e.type === 'system-defined') {
-        const units = genUnits(e.option_layers);
-        let uIdx = units.findIndex(u => u.key === e.value_system);
-        if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-        sub.value_system = units.length > 0 ? units[uIdx].key : '';
-        sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
-      } else {
-        sub.value = e.target.value;
-      }
-    }
-    const { layer } = this.props;
-    const obj = { f, sub };
-    this.props.onSubChange(layer.key, obj, valueOnly);
-  }
-
-  handleClick(keyLayer, obj, val) {
-    const units = genUnits(obj.option_layers);
-    let uIdx = units.findIndex(e => e.key === val);
-    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-    const update = obj;
-    update.value_system = units.length > 0 ? units[uIdx].key : '';
-    this.props.onClick(keyLayer, update);
-  }
-
-  views() {
-    const {
-      layer, selectOptions, id, layers, canUpdate
-    } = this.props;
-    const { cols, fields, key } = layer;
-    const perRow = cols || 1;
-    const col = Math.floor(12 / perRow);
-    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
-    const vs = [];
-    let op = [];
-    let newRow = 0;
-    let rowId = 1;
-    (fields || []).forEach((f, i) => {
-      if (ShowProperties(f, layers)) {
-        const unit = genUnits(f.option_layers)[0] || {};
-        const tabCol = (f.cols || 1) * 1;
-        const rCol = (f.type === 'table') ? (12 / (tabCol || 1)) : col;
-        newRow = (f.type === 'table') ? newRow += (perRow / (tabCol || 1)) : newRow += 1;
-
-        if (newRow > perRow) {
-          vs.push(<Row key={rowId}>{op}</Row>);
-          rowId += 1;
-          op = [];
-          newRow = (f.type === 'table') ? newRow = (perRow / (tabCol || 1)) : newRow = 1;
-        }
-        const eachCol = (
-          <Col key={`prop_${key}_${f.priority}_${f.field}`} md={rCol} lg={rCol} className={f.type === 'table' ? '' : klaz}>
-            <GenProperties
-              key={`${id}_${layer}_${f.field}_GenPropertiesLayer`}
-              layers={layers}
-              id={id}
-              layer={layer}
-              f_obj={f}
-              label={f.label}
-              value={f.value || ''}
-              description={f.description || ''}
-              type={f.type || 'text'}
-              field={f.field || 'field'}
-              formula={f.formula || ''}
-              options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
-              onChange={event => this.handleChange(event, f.field, key, f.type)}
-              onSubChange={this.handleSubChange}
-              isEditable
-              readOnly={!canUpdate || false}
-              isRequired={f.required || false}
-              placeholder={f.placeholder || ''}
-              option_layers={f.option_layers}
-              value_system={f.value_system || unit.key}
-              onClick={() => this.handleClick(key, f, (f.value_system || unit.key))}
-            />
-          </Col>
-        );
-        op.push(eachCol);
-        if (newRow % perRow === 0) newRow = 0;
-        if ((newRow === 0) || (fields.length === (i + 1))) {
-          vs.push(<Row key={rowId}>{op}</Row>);
-          rowId += 1;
-          op = [];
-        }
-      } else if (fields.length === (i + 1)) {
-        vs.push(<Row key={rowId}>{op}</Row>);
-        rowId += 1;
-        op = [];
-      }
-    });
-    return vs;
-  }
-
-  render() {
-    let bs = this.props.layer.color ? this.props.layer.color : 'default';
-    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
-    if (bs === 'none') bs = 'default';
-    const cl = this.props.layer.style ? this.props.layer.style : 'panel_generic_heading';
-    const panelHeader = this.props.layer.label === '' ? (<span />) : (
-      <Panel.Heading className={cl} >
-        <Panel.Title toggle>{this.props.layer.label}</Panel.Title>
-      </Panel.Heading>
-    );
-    return (
-      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
-        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
-          {panelHeader}
-          <Panel.Collapse>
-            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </PanelGroup>
-    );
-  }
-}
-
-GenPropertiesLayer.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  layer: PropTypes.object,
-  selectOptions: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onSubChange: PropTypes.func.isRequired,
-  onClick: PropTypes.func,
-  layers: PropTypes.object.isRequired,
-  canUpdate: PropTypes.bool
-};
-
-GenPropertiesLayer.defaultProps = {
-  id: 0, selectOptions: {}, onClick: () => {}, canUpdate: true
-};
-
-class GenPropertiesLayerSearchCriteria extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSubChange = this.handleSubChange.bind(this);
-  }
-
-  handleChange(e, f, k, t) {
-    this.props.onChange(e, f, k, t);
-  }
-
-  handleSubChange(e, id, f) {
-    const sub = f.sub_fields.find(m => m.id === id);
-    if (e.type === 'system-defined') {
-      const units = genUnits(e.option_layers);
-      let uIdx = units.findIndex(u => u.key === e.value_system);
-      if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-      sub.value_system = units.length > 0 ? units[uIdx].key : '';
-      sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
-    } else {
-      sub.value = e.target.value;
-    }
-    const { layer } = this.props;
-    const obj = { f, sub };
-    this.props.onSubChange(layer.key, obj);
-  }
-
-  views() {
-    const { layer, selectOptions, layers } = this.props;
-    const { cols, fields, key } = layer;
-    const perRow = cols || 1;
-    const col = Math.floor(12 / perRow);
-    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
-    const vs = [];
-    let op = [];
-    (fields || []).forEach((f, i) => {
-      const unit = genUnits(f.option_layers)[0] || {};
-      const eCol = (
-        <Col key={`prop_${key}_${f.priority}_${f.field}`} md={col} lg={col} className={klaz}>
-          <GenPropertiesSearch
-            f_obj={f}
-            label={f.label}
-            value={f.value || ''}
-            type={f.type || 'text'}
-            field={f.field || 'field'}
-            options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
-            onChange={event => this.handleChange(event, f.field, key, f.type)}
-            onSubChange={this.handleSubChange}
-            option_layers={f.option_layers}
-            value_system={f.value_system || unit.key}
-            isEditable
-            readOnly={false}
-            isRequired={false}
-            layers={layers}
-          />
-        </Col>
-      );
-      op.push(eCol);
-      if (((i + 1) % perRow === 0) || (fields.length === (i + 1))) {
-        vs.push(<Row key={`prop_row_${key}_${f.priority}_${f.field}`}>{op}</Row>);
-        op = [];
-      }
-    });
-    return vs;
-  }
-
-  render() {
-    return (
-      <Panel className="panel_generic_properties" defaultExpanded>
-        <Panel.Heading><Panel.Title toggle>{this.props.layer.label}</Panel.Title></Panel.Heading>
-        <Panel.Collapse><Panel.Body>{this.views()}</Panel.Body></Panel.Collapse>
-      </Panel>
-    );
-  }
-}
-
-GenPropertiesLayerSearchCriteria.propTypes = {
-  layer: PropTypes.object,
-  selectOptions: PropTypes.object,
-  onSubChange: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  layers: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-GenPropertiesLayerSearchCriteria.defaultProps = {
-  selectOptions: {}
-};
-
-const LayersLayout = (layers, options, funcChange, funcSubChange = () => {}, funcClick = () => {}, layout = [], id = 0, canUpdate = false) => {
-  const sortedLayers = sortBy(layers, l => l.position) || [];
-  sortedLayers.forEach((layer) => {
-    if (typeof layer.cond_fields === 'undefined' || layer.cond_fields == null || layer.cond_fields.length === 0) {
-      const ig = (
-        <GenPropertiesLayer
-          id={id}
-          key={layer.key}
-          layer={layer}
-          onChange={funcChange}
-          onSubChange={funcSubChange}
-          selectOptions={options}
-          onClick={funcClick}
-          layers={layers}
-          canUpdate={canUpdate}
-        />
-      );
-      layout.push(ig);
-    } else if (layer.cond_fields && layer.cond_fields.length > 0) {
-      let showLayer = false;
-
-      for (let i = 0; i < layer.cond_fields.length; i += 1) {
-        const cond = layer.cond_fields[i] || {};
-        const fd = ((layers[cond.layer] || {}).fields || []).find(f => f.field === cond.field) || {};
-        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((cond.value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
-        (['true', 'yes', 't', '1'].includes((cond.value || '').trim().toLowerCase()) && (typeof fd.value !== 'undefined' && fd.value === true)))) {
-          showLayer = true;
-          break;
-        } else if (['text', 'select'].includes(fd.type) && (typeof (fd && fd.value) !== 'undefined' && (fd.value || '').trim() == (cond.value || '').trim())) {
-          showLayer = true;
-          break;
-        }
-      }
-
-      if (showLayer === true) {
-        const igs = (
-          <GenPropertiesLayer
-            id={id}
-            key={layer.key}
-            layer={layer}
-            onChange={funcChange}
-            onSubChange={funcSubChange}
-            selectOptions={options}
-            onClick={funcClick}
-            layers={layers}
-            canUpdate={canUpdate}
-          />
-        );
-        layout.push(igs);
-      }
-    }
-  });
-
-  return layout;
-};
-
-export {
-  LayersLayout,
-  GenProperties,
-  UploadInputChange,
-  GenPropertiesLayer,
-  GenPropertiesLayerSearchCriteria
-};
diff --git a/app/packs/src/components/generic/GenericElCriteria.js b/app/packs/src/components/generic/GenericElCriteria.js
index 3b622b6cd..ba56d364c 100644
--- a/app/packs/src/components/generic/GenericElCriteria.js
+++ b/app/packs/src/components/generic/GenericElCriteria.js
@@ -62,7 +62,7 @@ export default class GenericElCriteria extends Component {
     super(props);
     this.state = {
       genericEl: props.genericEl,
-      segments: segmentsByKlass(props.genericEl.name),
+      segments: segmentsByKlass(props.genericEl?.name)
     };
     this.onChange = this.onChange.bind(this);
     this.onSearch = this.onSearch.bind(this);
diff --git a/app/packs/src/components/generic/GenericElDetails.js b/app/packs/src/components/generic/GenericElDetails.js
index 02bc62d0b..1344b7fa2 100644
--- a/app/packs/src/components/generic/GenericElDetails.js
+++ b/app/packs/src/components/generic/GenericElDetails.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable camelcase */
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable no-restricted-globals */
 /* eslint-disable camelcase */
diff --git a/app/packs/src/components/generic/SegmentDetails.js b/app/packs/src/components/generic/SegmentDetails.js
index 045fddaac..e75caca92 100644
--- a/app/packs/src/components/generic/SegmentDetails.js
+++ b/app/packs/src/components/generic/SegmentDetails.js
@@ -35,7 +35,7 @@ const addSegmentTabs = (element, onChange, contentMap) => {
     if (idx < 0 && !klass.is_active) return;
     let segment = {};
     if (idx > -1) {
-      segment = new Segment(element.segments[idx]);
+      segment = element.segments[idx];
     } else {
       segment = Segment.buildEmpty(cloneDeep(klass));
     }
diff --git a/app/packs/src/components/generic/SpectraEditorBtn.js b/app/packs/src/components/generic/SpectraEditorBtn.js
new file mode 100644
index 000000000..93e0e1cf7
--- /dev/null
+++ b/app/packs/src/components/generic/SpectraEditorBtn.js
@@ -0,0 +1,71 @@
+/* eslint-disable react/forbid-prop-types */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { Tooltip, Button, OverlayTrigger, SplitButton, ButtonGroup, MenuItem } from 'react-bootstrap';
+
+const SpectraEditorBtn = ({
+  element, spcInfo, hasJcamp, hasChemSpectra,
+  toggleSpectraModal, confirmRegenerate,
+}) => (
+  <OverlayTrigger
+    placement="bottom"
+    delayShow={500}
+    overlay={<Tooltip id="spectra">Spectra Editor {spcInfo.length > 0 ? ': Reprocess' : ''}</Tooltip>}
+  >{spcInfo.length > 0 ? (
+    <ButtonGroup className="button-right">
+      <SplitButton
+        id="spectra-editor-split-button"
+        pullRight
+        bsStyle="info"
+        bsSize="xsmall"
+        title={<i className="fa fa-area-chart" />}
+        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+        onClick={toggleSpectraModal}
+        disabled={!(spcInfo.length > 0) || !hasChemSpectra}
+      >
+        <MenuItem
+          id="regenerate-spectra"
+          key={uuid.v4()}
+          onSelect={(eventKey, event) => {
+            event.stopPropagation();
+            confirmRegenerate(event);
+          }}
+          disabled={!hasJcamp || !element.can_update}
+        >
+          <i className="fa fa-refresh" aria-hidden="true" /> Reprocess
+        </MenuItem>
+      </SplitButton>
+    </ButtonGroup>
+  ) : (
+    <Button
+      bsStyle="warning"
+      bsSize="xsmall"
+      className="button-right"
+      onClick={confirmRegenerate}
+      disabled={false}
+    >
+      <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
+    </Button>
+    )}
+  </OverlayTrigger>
+);
+
+SpectraEditorBtn.propTypes = {
+  element: PropTypes.object,
+  hasJcamp: PropTypes.bool,
+  spcInfo: PropTypes.array,
+  hasChemSpectra: PropTypes.bool,
+  toggleSpectraModal: PropTypes.func.isRequired,
+  confirmRegenerate: PropTypes.func.isRequired,
+};
+
+SpectraEditorBtn.defaultProps = {
+  hasJcamp: false,
+  spcInfo: [],
+  element: {},
+  hasChemSpectra: false,
+};
+
+export default SpectraEditorBtn;
diff --git a/app/packs/src/components/navigation/search/Search.js b/app/packs/src/components/navigation/search/Search.js
index a47f407d2..e7496687e 100644
--- a/app/packs/src/components/navigation/search/Search.js
+++ b/app/packs/src/components/navigation/search/Search.js
@@ -26,12 +26,15 @@ export default class Search extends React.Component {
       searchType: 'sub',
       tanimotoThreshold: 0.7,
       showGenericElCriteria: false,
-      genericEl: null
+      genericEl: null,
+      sample: {},
+      segments: []
     };
     this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
     this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
     this.hideGenericElCriteria = this.hideGenericElCriteria.bind(this);
     this.genericElSearch = this.genericElSearch.bind(this);
+    this.sampleSearch = this.sampleSearch.bind(this);
   }
 
   handleSelectionChange(selection) {
@@ -87,16 +90,19 @@ export default class Search extends React.Component {
     const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
     const { genericEl } = this.state;
 
+    const segSearch = (genericEl.segments || []).map(segment => ({ id: segment.id, searchProperties: segment.search_properties }));
 
     const selection = {
       elementType: this.state.elementType,
       searchName: genericEl.search_name,
+      genericKlassId: genericEl.id,
       searchShowLabel: genericEl.search_short_label,
       genericElName: genericEl.name,
       genericKlassId: genericEl.id,
       search_by_method: genericEl.name,
       genericElProperties: genericEl.properties,
       searchProperties: genericEl.search_properties,
+      segSearchProperties: segSearch,
       page_size: uiState.number_of_results
     };
 
@@ -110,6 +116,35 @@ export default class Search extends React.Component {
     this.setState({ showGenericElCriteria: false });
   }
 
+  sampleSearch() {
+    const uiState = UIStore.getState();
+    const { currentCollection } = uiState;
+    const collectionId = currentCollection ? currentCollection.id : null;
+    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
+    const { sample } = this.state;
+
+    console.log(sample);
+    console.log(sample && sample.name);
+
+    const segSearch = ((sample && sample.segments) || []).map(segment => ({ id: segment.id, searchProperties: segment.search_properties }));
+    delete sample.segments;
+
+    const selection = {
+      elementType: 'samples',
+      searchProperties: sample,
+      segSearchProperties: segSearch,
+      page_size: uiState.number_of_results
+    };
+
+    UIActions.setSearchSelection(selection);
+    ElementActions.fetchBasedOnSearchSelectionAndCollection({
+      selection,
+      collectionId,
+      isSync,
+    });
+    this.setState({ showGenericElCriteria: false, elementType: 'samples' });
+  }
+
   handleClearSearchSelection() {
     const { currentCollection, isSync } = UIStore.getState();
     this.setState({ elementType: 'all' })
@@ -143,6 +178,9 @@ export default class Search extends React.Component {
     if (event.startsWith('elements-')) {
       this.showGenericElCriteria();
       this.setState({ elementType: 'elements', genericEl: element });
+    } else if (event === 'SampleAdvanced') {
+      this.showGenericElCriteria();
+      this.setState({ elementType: 'sample' });
     } else {
       this.setState({ elementType: event });
     }
@@ -193,6 +231,7 @@ export default class Search extends React.Component {
         Advanced Search
       </MenuItem>
     );
+
     menu.push(<MenuItem key="divider" divider />);
     menu.push(
       <MenuItem key="embargo" onSelect={() => this.handleElementSelection('embargo')}>
@@ -218,7 +257,7 @@ export default class Search extends React.Component {
   render() {
     const { profile } = UserStore.getState();
     // const { customClass } = (profile && profile.data) || {};
-    const customClass = '.btn-unified'
+    const customClass = '.btn-unified';
 
     const buttonAfter = (
       <ButtonGroup>
@@ -232,38 +271,40 @@ export default class Search extends React.Component {
     );
 
     const submitAddons = (
-      <Grid><Row>
-        <Col sm={6} md={4}>
-          <Form inline>
+      <Grid>
+        <Row>
+          <Col sm={6} md={4}>
+            <Form inline>
+              <Radio
+                ref={(input) => { this.searchSimilarRadio = input; }}
+                value="similar"
+                checked={this.state.searchType === 'similar'}
+                onChange={e => this.handleSearchTypeChange(e)}
+              >
+                &nbsp; Similarity Search &nbsp;
+              </Radio>
+              &nbsp;&nbsp;
+              <FormControl
+                style={{ width: '40%' }}
+                type="text"
+                value={this.state.tanimotoThreshold}
+                ref={(input) => { this.searchTanimotoInput = input; }}
+                onChange={e => this.handleTanimotoChange(e)}
+              />
+            </Form>
+          </Col>
+          <Col sm={4} md={2}>
             <Radio
-              ref={(input) => { this.searchSimilarRadio = input; }}
-              value="similar"
-              checked={this.state.searchType === 'similar'}
+              ref={(input) => { this.searchSubstructureRadio = input; }}
+              value="sub"
+              checked={this.state.searchType === 'sub'}
               onChange={e => this.handleSearchTypeChange(e)}
             >
-              &nbsp; Similarity Search &nbsp;
+              Substructure Search
             </Radio>
-            &nbsp;&nbsp;
-            <FormControl
-              style={{ width: '40%' }}
-              type="text"
-              value={this.state.tanimotoThreshold}
-              ref={(input) => { this.searchTanimotoInput = input; }}
-              onChange={e => this.handleTanimotoChange(e)}
-            />
-          </Form>
-        </Col>
-        <Col sm={4} md={2}>
-          <Radio
-            ref={(input) => { this.searchSubstructureRadio = input; }}
-            value="sub"
-            checked={this.state.searchType === 'sub'}
-            onChange={e => this.handleSearchTypeChange(e)}
-          >
-            Substructure Search
-          </Radio>
-        </Col>
-      </Row></Grid>
+          </Col>
+        </Row>
+      </Grid>
     );
 
     const inputAttributes = {
@@ -279,28 +320,52 @@ export default class Search extends React.Component {
       }
     };
 
-    let title = (<i className={`icon-${this.state.elementType.toLowerCase().slice(0, -1)}`} />);
-    if (this.state.elementType === 'all') title = 'All';
-    if (this.state.elementType === 'embargo') title = (<i className="fa fa-object-group" />);
+    const searchIcon = (elementType) => {
+      if (elementType === 'all') return 'All';
+      // console.log(elementType);
+      if (this.state.elementType === 'embargo') return (<i className="fa fa-object-group" />);
+      if (['samples', 'reactions', 'screens', 'wellplates'].includes(elementType.toLowerCase())) return (<i className={`icon-${elementType.toLowerCase().slice(0, -1)}`} />);
+      if (this.state.genericEl) return (<i className={this.state.genericEl.icon_name} />);
+      return elementType;
+    }
 
     const innerDropdown = (
       <DropdownButton
         className={customClass}
         id="search-inner-dropdown"
-        title={title}
+        title={searchIcon(this.state.elementType)}
         style={{ width: '50px' }}
       >
         {this.renderMenuItems()}
       </DropdownButton>
     );
 
-    const mofProps = {
-      show: this.state.showGenericElCriteria,
-      type: this.state.elementType,
-      component: <GenericElCriteria genericEl={clsInputGroup(this.state.genericEl)} onHide={this.hideGenericElCriteria} onSearch={this.genericElSearch} />,
-      title: `Please input your search criteria for ${this.state.elementType}`,
-      onHide: this.hideGenericElCriteria
-    };
+    let mofProps = {};
+
+    if (this.state.showGenericElCriteria === true) {
+      switch (this.state.elementType) {
+        case 'elements':
+          mofProps = {
+            show: this.state.showGenericElCriteria,
+            type: this.state.elementType,
+            component: <GenericElCriteria genericEl={clsInputGroup(this.state.genericEl)} onHide={this.hideGenericElCriteria} onSearch={this.genericElSearch} />,
+            title: `Please input your search criteria for ${this.state.elementType}`,
+            onHide: this.hideGenericElCriteria
+          };
+          break;
+        case 'sample':
+          mofProps = {
+            show: this.state.showGenericElCriteria,
+            type: this.state.elementType,
+            component: <SampleCriteria sample={this.state.sample} onHide={this.hideGenericElCriteria} onSearch={this.sampleSearch} />,
+            title: `Please input your search criteria for ${this.state.elementType}`,
+            onHide: this.hideGenericElCriteria
+          };
+          break;
+        default:
+          break;
+      }
+    }
 
     return (
       <div className="chemotion-search">
diff --git a/app/packs/src/components/search/SampleCriteria.js b/app/packs/src/components/search/SampleCriteria.js
new file mode 100644
index 000000000..da55633b3
--- /dev/null
+++ b/app/packs/src/components/search/SampleCriteria.js
@@ -0,0 +1,169 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Row, Col } from 'react-bootstrap';
+import { findIndex } from 'lodash';
+import { GenFormGroup, GenFormGroupCb, GenFormGroupSel, SegmentCriteria } from 'chem-generic-ui';
+import { segmentsByKlass } from '../../generic/Utils';
+
+const buildCriteria = (props) => {
+  const { sample } = props;
+  const { propTx, propCk, stereo } = sample;
+  // if (!sample) return (<span />);
+  const layout = [];
+  const colNum = 3;
+
+  const absOptions =  [
+    { label: 'any', value: 'any' },
+    { label: 'rac', value: 'rac' },
+    { label: 'meso', value: 'meso' },
+    { label: '(S)', value: '(S)' },
+    { label: '(R)', value: '(R)' },
+    { label: '(Sp)', value: '(Sp)' },
+    { label: '(Rp)', value: '(Rp)' },
+    { label: '(Sa)', value: '(Sa)' },
+    { label: '(Ra)', value: '(Ra)' },
+  ];
+
+  const relOptions = [
+    { label: 'any', value: 'any' },
+    { label: 'syn', value: 'syn' },
+    { label: 'anti', value: 'anti' },
+    { label: 'p-geminal', value: 'p-geminal' },
+    { label: 'p-ortho', value: 'p-ortho' },
+    { label: 'p-meta', value: 'p-meta' },
+    { label: 'p-para', value: 'p-para' },
+    { label: 'cis', value: 'cis' },
+    { label: 'trans', value: 'trans' },
+    { label: 'fac', value: 'fac' },
+    { label: 'mer', value: 'mer' },
+  ];
+
+  const la = (
+    <div>
+      <Row key="criteria_init">
+        <Col md={colNum}><GenFormGroup label="Name" value={propTx && propTx.name} onChange={e => props.onChange(e, 'name', 'propTx')} /></Col>
+        <Col md={colNum}><GenFormGroup label="External label" value={propTx && propTx.external_label} onChange={e => props.onChange(e, 'external_label', 'propTx')} /></Col>
+        <Col md={colNum}><GenFormGroup label="Short Label" value={propTx && propTx.short_label} onChange={e => props.onChange(e, 'short_label', 'propTx')} /></Col>
+        <Col md={colNum}><GenFormGroup label="Location" value={propTx && propTx.location} onChange={e => props.onChange(e, 'location', 'propTx')} /></Col>
+        <Col md={colNum}><GenFormGroupSel label="Stereo Abs" value={stereo && stereo.abs} options={absOptions} onChange={e => props.onChange(e, 'abs', 'stereo')} /></Col>
+        <Col md={colNum}><GenFormGroupSel label="Stereo Rel" value={stereo && stereo.rel} options={relOptions} onChange={e => props.onChange(e, 'rel', 'stereo')} /></Col>
+        <Col md={colNum}><GenFormGroupCb label="Top Secret" value={propCk && propCk.is_top_secret} onChange={e => props.onChange(e, 'is_top_secret', 'propCk')} /></Col>
+        <Col md={colNum}><GenFormGroupCb label="Decoupled" value={propCk && propCk.decoupled} onChange={e => props.onChange(e, 'decoupled', 'propCk')} /></Col>
+      </Row>
+    </div>
+  );
+
+  layout.push(la);
+
+  return (
+    <div style={{ margin: '15px' }}>{layout}</div>
+  );
+};
+
+export default class SampleCriteria extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sample: props.sample,
+      segments: segmentsByKlass('sample')
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.onSegmentChange = this.onSegmentChange.bind(this);
+  }
+
+  onChange(e, field, type) {
+    const { sample } = this.state;
+    switch (type) {
+      case 'propTx':
+        if (!sample.propTx) sample.propTx = {};
+        sample.propTx[field] = e.target && e.target.value;
+        break;
+      case 'select':
+        if (!sample.propTx) sample.propTx = {};
+        sample.propTx[field] = e ? e.value : null;
+        break;
+      case 'stereo':
+        if (!sample.stereo) sample.stereo = {};
+        console.log(e);
+        console.log(e.value);
+        sample.stereo[field] = e ? e.value : '';
+        break;
+      case 'propCk':
+        if (!sample.propCk) sample.propCk = {};
+        sample.propCk[field] = e.target && e.target.checked;
+        break;
+      default:
+        break;
+    }
+    this.setState({ sample });
+  }
+
+  onSegmentChange(sg) {
+    const { segments } = this.state;
+    const idx = findIndex(segments, o => o.id === sg.id);
+    segments.splice(idx, 1, sg);
+    this.setState({ segments });
+  }
+
+  onSearch() {
+    const { sample, segments } = this.state;
+    sample.segments = segments;
+    this.props.onSearch(sample);
+  }
+
+  render() {
+    const { sample, segments } = this.state;
+    const layout = [];
+
+    const title = (
+      <Row key="criteria_init">
+        <Col md={12} style={{ fontWeight: 'bold', fontStyle: 'italic', fontSize: 'x-large' }}>
+          Segments
+        </Col>
+      </Row>
+    );
+
+    (segments || []).forEach((seg) => {
+      const igs = (
+        <SegmentCriteria
+          segment={seg}
+          onChange={this.onSegmentChange}
+        />
+      );
+      layout.push(igs);
+    });
+
+    return (
+      <div className="search_criteria_mof">
+        <div className="modal_body">
+          {buildCriteria({ sample, onChange: this.onChange })}
+          {title}
+          {layout}
+        </div>
+        <div className="btn_footer">
+          <Button bsStyle="warning" onClick={this.props.onHide}>
+            Close
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={this.onSearch}>
+            Search
+          </Button>&nbsp;
+        </div>
+      </div >
+    );
+  }
+}
+
+SampleCriteria.propTypes = {
+  sample: PropTypes.object,
+  onHide: PropTypes.func,
+  onSearch: PropTypes.func,
+};
+
+SampleCriteria.defaultProps = {
+  sample: {},
+  onHide: () => { },
+  onSearch: () => { }
+};
diff --git a/app/packs/src/components/search/SampleFormCriteria.js b/app/packs/src/components/search/SampleFormCriteria.js
new file mode 100644
index 000000000..737b77e0b
--- /dev/null
+++ b/app/packs/src/components/search/SampleFormCriteria.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, Checkbox, FormGroup, FormControl, InputGroup, ControlLabel,
+  Table, Glyphicon, Tabs, Tab, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import Select from 'react-select';
+// import DetailActions from '../actions/DetailActions';
+// import NumeralInputWithUnitsCompo from '../NumeralInputWithUnitsCompo';
+// import TextRangeWithAddon from '../TextRangeWithAddon';
+// import PrivateNoteElement from '../PrivateNoteElement';
+
+export default class SampleFormCriteria extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  stereoAbsInput() {
+    const { sample } = this.props;
+
+    const absOptions = [
+      { label: 'any', value: 'any' },
+      { label: 'rac', value: 'rac' },
+      { label: 'meso', value: 'meso' },
+      { label: '(S)', value: '(S)' },
+      { label: '(R)', value: '(R)' },
+      { label: '(Sp)', value: '(Sp)' },
+      { label: '(Rp)', value: '(Rp)' },
+      { label: '(Sa)', value: '(Sa)' },
+      { label: '(Ra)', value: '(Ra)' },
+    ];
+
+    const value = sample.stereo ? sample.stereo.abs : 'any';
+
+    return (
+      <FormGroup style={{ width: '50%', paddingRight: '10px' }}>
+        <ControlLabel>Stereo Abs</ControlLabel>
+        <Select
+          name="stereoAbs"
+          clearable={false}
+          disabled={!sample.can_update}
+          options={absOptions}
+          onChange={this.updateStereoAbs}
+          value={value}
+        />
+      </FormGroup>
+    );
+  }
+
+  stereoRelInput() {
+    const { sample, onChange } = this.props;
+
+    const relOptions = [
+      { label: 'any', value: 'any' },
+      { label: 'syn', value: 'syn' },
+      { label: 'anti', value: 'anti' },
+      { label: 'p-geminal', value: 'p-geminal' },
+      { label: 'p-ortho', value: 'p-ortho' },
+      { label: 'p-meta', value: 'p-meta' },
+      { label: 'p-para', value: 'p-para' },
+      { label: 'cis', value: 'cis' },
+      { label: 'trans', value: 'trans' },
+      { label: 'fac', value: 'fac' },
+      { label: 'mer', value: 'mer' },
+    ];
+
+    const value = sample.stereo ? sample.stereo.rel : 'any';
+
+    return (
+      <FormGroup style={{ width: '50%' }}>
+        <ControlLabel>Stereo Rel</ControlLabel>
+        <Select
+          name="stereoRel"
+          clearable={false}
+          disabled={!sample.can_update}
+          options={relOptions}
+          onChange={this.updateStereoRel}
+          value={value}
+        />
+      </FormGroup>
+    );
+  }
+
+  render() {
+    return (
+      <Table responsive className="sample-form">
+        <tbody>
+          <tr>
+            <td colSpan="4">
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div style={{ width: '70%', display: 'flex' }}>
+                  {this.stereoAbsInput()}
+                  {this.stereoRelInput()}
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+
+}
+
+SampleFormCriteria.propTypes = {
+  sample: PropTypes.object,
+  parent: PropTypes.object,
+  customizableField: PropTypes.func.isRequired,
+  enableSampleDecoupled: PropTypes.bool,
+  decoupleMolecule: PropTypes.func.isRequired
+};
+
+SampleFormCriteria.defaultProps = { enableSampleDecoupled: false };
diff --git a/app/packs/src/fetchers/UsersFetcher.js b/app/packs/src/fetchers/UsersFetcher.js
index 348cf0db7..e14a9e181 100644
--- a/app/packs/src/fetchers/UsersFetcher.js
+++ b/app/packs/src/fetchers/UsersFetcher.js
@@ -221,7 +221,16 @@ export default class UsersFetcher {
     const promise = fetch('/api/v1/users/update_counter', {
       credentials: 'same-origin',
       method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
     });
+
+    return promise;
   }
 
   static scifinderCredential() {
diff --git a/app/packs/src/generic/GenericAdminNav.js b/app/packs/src/generic/GenericAdminNav.js
new file mode 100644
index 000000000..471265892
--- /dev/null
+++ b/app/packs/src/generic/GenericAdminNav.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Navbar } from 'react-bootstrap';
+
+const navs = (text, type) => ((text === type) ?
+  <Navbar.Text key={type}><b><a href={`/${type.split(/(?=[A-Z])/).join('_').toLowerCase()}_admin`}>{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a></b></Navbar.Text> :
+  <Navbar.Text key={type}><a href={`/${type.split(/(?=[A-Z])/).join('_').toLowerCase()}_admin`}>{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a></Navbar.Text>);
+
+const GenericAdminNav = (props) => {
+  const { userName, text } = props;
+  return (
+    <Navbar fixedTop>
+      <Navbar.Header>
+        <Navbar.Brand><a href="/">Back to MyDB</a></Navbar.Brand>
+        <Navbar.Toggle />
+      </Navbar.Header>
+      <Navbar.Collapse>
+        {['GenericElements', 'GenericSegments', 'GenericDatasets'].map(e => navs(text, e))}
+        <Navbar.Text pullRight>Login as: {userName}</Navbar.Text>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+};
+
+GenericAdminNav.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };
+GenericAdminNav.defaultProps = { userName: '' };
+
+const GenericAdminUnauth = props => (
+  <div style={{ width: '90vw', margin: 'auto' }}>
+    <GenericAdminNav {...props} />
+    <hr />
+    <div style={{ marginTop: '60px', textAlign: 'center' }}><h3>Unauthorized!</h3></div>
+  </div>
+);
+
+GenericAdminUnauth.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };
+GenericAdminUnauth.defaultProps = { userName: '' };
+
+export { GenericAdminNav, GenericAdminUnauth };
diff --git a/app/packs/src/generic/GenericDatasetsAdmin.js b/app/packs/src/generic/GenericDatasetsAdmin.js
new file mode 100644
index 000000000..67fd42f65
--- /dev/null
+++ b/app/packs/src/generic/GenericDatasetsAdmin.js
@@ -0,0 +1,690 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy, orderBy } from 'lodash';
+import { GenGridDs, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, LayerAttrEditModal, LayerAttrNewModal, GenericDummy, reUnit, UploadModal } from 'chem-generic-ui';
+import LoadingModal from '../components/common/LoadingModal';
+import Notifications from '../components/Notifications';
+import GenericDSsFetcher from '../components/fetchers/GenericDSsFetcher';
+import UsersFetcher from '../components/fetchers/UsersFetcher';
+import LoadingActions from '../components/actions/LoadingActions';
+import Preview from './Preview';
+import { validateLayerInput, validateSelectList, notification } from './Utils';
+import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
+
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+export default class GenericDatasetsAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      newFieldKey: '',
+      layerKey: '',
+      selectOptions: [],
+      unitsSystem: {},
+      show: { tab: '', modal: '' },
+      propTabKey: 1,
+      revisions: [],
+      user: {}
+    };
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.updSubField = this.updSubField.bind(this);
+    this.updLayerSubField = this.updLayerSubField.bind(this);
+    this.handleShowState = this.handleShowState.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleDeActive = this.handleDeActive.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.onUpdElement = this.onUpdElement.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchConfigs();
+    UsersFetcher.fetchCurrentUser().then((result) => {
+      if (!result.error) {
+        this.setState({ user: result.user });
+      }
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onUpdElement(generic) {
+    this.setState({ element: generic });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldSubFieldChange(lk, f, cb) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobj = (fields || []).find(o => o.field === f.field);
+      if (Object.keys(fobj).length > 0) {
+        const idx = (fields || []).findIndex(o => o.field === f.field);
+        fields.splice(idx, 1, f);
+        element.properties_template.layers[lk].fields = fields;
+        this.setState({ element }, cb);
+      }
+    }
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+    let fobj = null;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobjs = filter(fields, o => o.field === fe);
+      if (fobjs && fobjs.length > 0) {
+        fobj = fobjs[0];
+      }
+    }
+
+    if (layer != null && fobj != null) {
+      switch (fc) {
+        case 'required':
+        case 'hasOwnRow':
+        case 'canAdjust':
+          fobj[`${fc}`] = !orig;
+          break;
+        default:
+          fobj[`${fc}`] = value;
+          break;
+      }
+      const idx = findIndex(fields, o => o.field === fe);
+      fields.splice(idx, 1, fobj);
+      element.properties_template.layers[lk].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
+
+  fetchConfigs() {
+    GenericDSsFetcher.fetchUnitsSystem()
+      .then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  fetchElements() {
+    GenericDSsFetcher.listDatasetKlass()
+      .then((result) => { this.setState({ elements: result.klass }); });
+  }
+
+  handleDeActive(e) {
+    const act = e.is_active ? 'De-activate' : 'Activate';
+    GenericDSsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'DatasetKlass' })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `${act} Dataset fail`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `${act} Dataset successfully`, lvl: 'info', msg: `${e.label} is ${act.toLowerCase()} now` });
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  updSubField(layerKey, field, cb) {
+    this.onFieldSubFieldChange(layerKey, field, cb);
+  }
+
+  updLayerSubField(layerKey, layer) {
+    const { element } = this.state;
+    element.properties_template.layers[`${layerKey}`] = layer;
+    this.setState({ element });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+  editLayer(e) {
+    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name!' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key, newOptionKey, selectOptions) {
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const { element } = this.state;
+    element.properties_template.select_options[key].options = selectOptions;
+    this.onUpdElement(element);
+  }
+
+  handleShowState(att, val, cb = () => {}) {
+    this.setState({ show: this.getShowState(att, val) }, cb);
+  }
+  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      GenericDSsFetcher.fetchKlassRevisions(element.id, 'DatasetKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    GenericDSsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'DatasetKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  handleAddSelect(selectName, newSelectOptions) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      element.properties_template.select_options = newSelectOptions;
+      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, selectOptions });
+    }
+  }
+
+  handleCreateLayer(_layer) {
+    console.log('_layer', _layer)
+    const layer = _layer;
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    layer.timeRecord = '';
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates, 'upd')) return;
+    const { element } = this.state;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    layer = { ...layer, ...updates };
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ show: this.getShowState('modal', ''), element });
+  }
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, selectOptions, show: this.getShowState('tab', 'PropModal') });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    console.log('properties', properties);
+    if (valid === false) {
+      this.closeModal();
+      notification({
+        title: `Upload Template for Dataset [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message
+      });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, show: this.getShowState('modal', '') });
+      console.log('element', element);
+      notification({ title: `Upload template to Dataset [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = false;
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    sortedLayers.map((e, ix) => {
+      e.position = (ix + 1) * 10;
+      return e;
+    });
+    element.properties_template.layers = orgLayerObject(sortedLayers);
+    element.is_release = isRelease;
+    GenericDSsFetcher.updateDatasetTemplate(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Update Dataset: [${element.label}] template fail`, lvl: 'error', msg: result.error });
+        } else {
+          if (isRelease === true) {
+            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
+          } else {
+            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved successfully' });
+          }
+          this.fetchElements();
+          this.setState({ element: result }, () => LoadingActions.stop());
+        }
+      }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const { options } = element.properties_template.select_options[delRoot];
+      if (options && options.length > 0) {
+        const idx = findIndex(options, o => o.key === delKey);
+        options.splice(idx, 1);
+      }
+    } else if (delStr === 'Layer') {
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    }
+    this.setState({ element });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    return (
+      <SelectOptionLayer
+        generic={element}
+        fnChange={this.onUpdElement}
+        fnAddSelect={this.handleAddSelect}
+        fnAddOption={this.newOption}
+      />
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          genericType="Dataset"
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          select_options={selectOptions}
+          onDrop={() => {}}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onFieldSubFieldChange={this.onFieldSubFieldChange}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnCond}
+                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse><Panel.Body>{fields}</Panel.Body></Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderPropPanel() {
+    const {
+      element, show, revisions, propTabKey
+    } = this.state;
+    const showPropModal = show.tab === 'PropModal';
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="datasets-prop-tabs" onSelect={this.propTabSelect} style={{ width: '100%' }}>
+          <Tab eventKey={1} title="Template">
+            <Panel show={showPropModal.toString()}>
+              <Panel.Heading>
+                <b>{`Template of Dataset [${element.label}]`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Upload template" tip="Upload Dataset template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}>{this.renderProperties()}</Col>
+                  <Col sm={4}>{this.renderSelectOptions()}</Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+
+      );
+    }
+    return (<div />);
+  }
+
+  renderGrid() {
+    const { elements } = this.state;
+    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
+    return (<GenGridDs
+      gridData={els}
+      fnCopyKlass={this.copyKlass}
+      fnDeActivateKlass={this.handleDeActive}
+      fnEditKlass={this.editKlass}
+      fnShowProp={this.handlePropShow}
+    />);
+  }
+
+  render() {
+    const { element, layerKey, user } = this.state;
+    if (!user.generic_admin?.datasets) {
+      return <GenericAdminUnauth userName={user.name} text="GenericDatasets" />;
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
+
+    return (
+      <div className="generic-designer-container">
+        <GenericAdminNav userName={user.name} text="GenericDatasets" />
+        <hr />
+        <div className="main-content">
+          <h3>Generic Datasets Designer</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+            { this.renderGrid() }
+            { this.renderPropPanel() }
+          </div>
+          <LayerAttrNewModal
+            showModal={this.state.show.modal === 'NewLayer'}
+            fnClose={this.closeModal}
+            fnCreate={this.handleCreateLayer}
+          />
+          <LayerAttrEditModal
+            showModal={this.state.show.modal === 'EditLayer'}
+            layer={layer}
+            fnClose={this.closeModal}
+            fnUpdate={this.handleUpdateLayer}
+          />
+          <FieldCondEditModal
+            showModal={this.state.show.modal === 'FieldCond'}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.closeModal}
+          />
+          <UploadModal
+            content="Generic Datasets"
+            klass="DatasetKlass"
+            showModal={this.state.show.modal === 'Upload'}
+            fnClose={this.closeModal}
+            fnUpload={this.handleUploadTemplate}
+          />
+        </div>
+        <Notifications />
+        <LoadingModal />
+      </div>
+    );
+  }
+}
+
+const GenericDatasetsAdminDnD = DragDropContext(HTML5Backend)(GenericDatasetsAdmin);
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('GenericDatasetsAdmin');
+  if (domElement) ReactDOM.render(<GenericDatasetsAdminDnD />, domElement);
+});
diff --git a/app/packs/src/generic/GenericElementsAdmin.js b/app/packs/src/generic/GenericElementsAdmin.js
new file mode 100644
index 000000000..e37cdadc3
--- /dev/null
+++ b/app/packs/src/generic/GenericElementsAdmin.js
@@ -0,0 +1,888 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy, orderBy } from 'lodash';
+
+import { GenGridEl, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, WorkflowModal, LayerAttrEditModal, LayerAttrNewModal, UploadModal, AttrCopyModal, AttrNewModal, AttrEditModal, GenericDummy, reUnit } from 'chem-generic-ui';
+import LoadingModal from '../components/common/LoadingModal';
+import Notifications from '../components/Notifications';
+import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
+import UsersFetcher from '../components/fetchers/UsersFetcher';
+import LoadingActions from '../components/actions/LoadingActions';
+import Preview from './Preview';
+
+import { validateLayerInput, validateSelectList, notification, validateLayerUpdation, validateLayerDeletion } from './Utils';
+import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
+
+const validateKlass = klass => (/\b[a-z]{3,5}\b/g.test(klass));
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+const validateInput = (element) => {
+  if (element.name === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element.' });
+    return false;
+  }
+  if (element.klass_prefix === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Prefix.' });
+    return false;
+  }
+  if (element.label === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element Label.' });
+    return false;
+  }
+  if (element.icon_name === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Icon.' });
+    return false;
+  }
+  return true;
+};
+
+export default class GenericElementsAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      newFieldKey: '',
+      layerKey: '',
+      fieldObj: {},
+      selectOptions: [],
+      unitsSystem: {},
+      show: { tab: '', modal: '' },
+      propTabKey: 1,
+      revisions: [],
+      user: {}
+    };
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.fetchElements = this.fetchElements.bind(this);
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    // this.addLayer = this.addLayer.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    // this.newKlass = this.newKlass.bind(this);
+    this.editKlass = this.editKlass.bind(this);
+    this.copyKlass = this.copyKlass.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.updSubField = this.updSubField.bind(this);
+    this.updLayerSubField = this.updLayerSubField.bind(this);
+    this.handleShowState = this.handleShowState.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleCreateKlass = this.handleCreateKlass.bind(this);
+    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
+    this.handleActivateKlass = this.handleActivateKlass.bind(this);
+    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.handleUploadShow = this.handleUploadShow.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+    this.saveFlow = this.saveFlow.bind(this);
+    this.onUpdElement = this.onUpdElement.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchConfigs();
+    UsersFetcher.fetchCurrentUser().then((result) => {
+      if (!result.error) {
+        this.setState({ user: result.user });
+      }
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onUpdElement(generic) {
+    this.setState({ element: generic });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    if (!field && layer && layer.wf) {
+      notification({ title: `Layer [${lk}]`, lvl: 'warning', msg: 'Layer Restriction can not be set on workflow layer!' });
+    } else {
+      this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
+    }
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldSubFieldChange(lk, f, cb) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobj = (fields || []).find(o => o.field === f.field);
+      if (Object.keys(fobj).length > 0) {
+        const idx = (fields || []).findIndex(o => o.field === f.field);
+        fields.splice(idx, 1, f);
+        element.properties_template.layers[lk].fields = fields;
+        this.setState({ element }, cb);
+      }
+    }
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    if (typeof layer === 'undefined' || layer == null) return;
+
+    const { fields } = layer;
+
+    if (fields == null || fields.length === 0) return;
+
+    const fobj = fields.find(e => e.field === fe);
+    if (Object.keys(fobj).length === 0) return;
+
+    switch (fc) {
+      case 'required':
+      case 'hasOwnRow':
+      case 'canAdjust':
+        fobj[`${fc}`] = !orig;
+        break;
+      default:
+        fobj[`${fc}`] = value;
+        break;
+    }
+    const idx = findIndex(fields, o => o.field === fe);
+    fields.splice(idx, 1, fobj);
+    element.properties_template.layers[lk].fields = fields;
+    this.setState({ element });
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  updSubField(layerKey, field, cb) {
+    this.onFieldSubFieldChange(layerKey, field, cb);
+  }
+
+  updLayerSubField(layerKey, layer) {
+    const { element } = this.state;
+    element.properties_template.layers[`${layerKey}`] = layer;
+    this.setState({ element });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+  editLayer(e) {
+    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
+  }
+
+  newKlass() {
+    this.setState({ show: 'NewKlass' });
+  }
+
+  editKlass(element) {
+    this.setState({ show: this.getShowState('modal', 'EditKlass'), element });
+  }
+
+  copyKlass(element) {
+    this.setState({ show: this.getShowState('modal', 'CopyKlass'), element });
+  }
+
+  handleUploadShow() {
+    this.setState({ show: 'Upload' });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key, newOptionKey, selectOptions) {
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const { element } = this.state;
+    element.properties_template.select_options[key].options = selectOptions;
+    this.onUpdElement(element);
+  }
+
+  handleShowState(att, val, cb = () => {}) {
+    this.setState({ show: this.getShowState(att, val) }, cb);
+  }
+  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
+
+  handleAddSelect(selectName, newSelectOptions) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      element.properties_template.select_options = newSelectOptions;
+      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, selectOptions });
+    }
+  }
+
+  handleCreateLayer(_layer) {
+    const layer = _layer;
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    layer.position = (!layer.position && sortedLayers.length < 1) ?
+      100 : parseInt((sortedLayers.slice(-1)[0] || { position: 100 }).position, 10) + 10;
+    layer.timeRecord = '';
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates, 'upd')) return;
+    const { element } = this.state;
+    if (!validateLayerUpdation(element, updates)) return;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    let msg = 'The updates of this layer is kept in the workspace temporarily. Please remember to press Save when you finish the editing.';
+    layer = { ...layer, ...updates };
+    // reset cond_fields of fields is the layer is workflow
+    if (layer.wf) {
+      msg = `${msg} For a Workflow layer, the Field Restrict Setting is only applicable on its own layer.`;
+      (layer.fields || []).map((f) => {
+        const newF = f;
+        if (newF.cond_fields && newF.cond_fields.length > 0) {
+          newF.cond_fields = f.cond_fields.filter(o => o.layer === layer.key);
+          if (newF.cond_fields.length < 1) delete newF.cond_fields;
+        }
+        return newF;
+      });
+    }
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    layer.position = layer.position ?
+      parseInt(layer.position, 10) : parseInt(sortedLayers.slice(-1)[0].position, 10) + 10;
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg });
+    this.setState({ show: this.getShowState('modal', ''), element });
+  }
+
+  handleCreateKlass(element) {
+    if (!validateInput(element)) return;
+    if (!validateKlass(element.name)) {
+      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is invalid, please try a different one.' });
+      return;
+    }
+    const { elements } = this.state;
+    const existKlass = elements.filter(el => el.name === element.name);
+    if (existKlass.length > 0) {
+      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is already taken. Please choose another one.' });
+      return;
+    }
+    GenericElsFetcher.createElementKlass(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Created successfully' });
+          this.closeModal(this.fetchElements);
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleUpdateKlass(element, updates) {
+    const inputs = { ...element, ...updates };
+    if (!validateInput(inputs)) return;
+    GenericElsFetcher.updateElementKlass(inputs)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Element [${inputs.name}]`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Element [${inputs.name}]`, lvl: 'info', msg: 'Updated successfully' });
+          this.closeModal(this.fetchElements);
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleActivateKlass(e) {
+    const act = e.is_active ? 'De-activate' : 'Activate';
+    GenericElsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'ElementKlass' })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `${act} Element failed`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `${act} Element [${result.name}] successfully`, lvl: 'info', msg: `Element is ${act.toLowerCase()} now` });
+          this.closeModal(this.fetchElements);
+        }
+      });
+  }
+
+  handleDeleteKlass(element) {
+    GenericElsFetcher.deleteKlass({ id: element.id, klass: 'ElementKlass' })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
+          this.closeModal(this.fetchElements);
+          this.handleShowState('tab', '');
+        }
+      });
+  }
+
+  fetchConfigs() {
+    GenericElsFetcher.fetchUnitsSystem()
+      .then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      GenericElsFetcher.fetchKlassRevisions(element.id, 'ElementKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    GenericElsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'ElementKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  saveFlow(params) {
+    const { flowObject } = params;
+    const { element } = this.state;
+    LoadingActions.start();
+    element.properties_template.flow = flowObject;
+    element.is_release = false;
+    GenericElsFetcher.updateGElTemplates(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Update Element [${element.name}] template`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
+          this.fetchElements();
+          this.setState({ element: result, show: this.getShowState('modal', '') }, () => LoadingActions.stop());
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({
+        element, selectOptions, show: this.getShowState('tab', 'PropModal'), propTabKey: 1
+      });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    if (valid === false) {
+      this.closeModal();
+      notification({ title: `Upload template for Element [${element.name}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, show: this.getShowState('modal', '') });
+      notification({ title: `Upload template to Element [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  fetchElements() {
+    GenericElsFetcher.fetchElementKlasses()
+      .then((result) => {
+        if (typeof result !== 'undefined' && typeof result.klass !== 'undefined') {
+          this.setState({ elements: result.klass?.filter(k => k.is_generic) });
+        }
+      });
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = ['integer', 'text'].includes(fd.type) ? fd.required : false;
+        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
+        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].wf_position = 0;
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    sortedLayers.map((e, ix) => {
+      e.position = (ix + 1) * 10;
+      return e;
+    });
+    element.properties_template.layers = orgLayerObject(sortedLayers);
+    element.is_release = isRelease;
+    GenericElsFetcher.updateGElTemplates(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Update Element [${element.name}] template`, lvl: 'error', msg: result.error });
+        } else {
+          if (isRelease === true) {
+            notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
+          } else {
+            notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
+          }
+          this.fetchElements();
+          this.setState({ element: result }, () => LoadingActions.stop());
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const { options } = element.properties_template.select_options[delRoot];
+      if (options && options.length > 0) {
+        const idx = findIndex(options, o => o.key === delKey);
+        options.splice(idx, 1);
+      }
+    } else if (delStr === 'Layer') {
+      if (!validateLayerDeletion(element, delKey)) return;
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    }
+    this.setState({ element });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    return (
+      <SelectOptionLayer
+        generic={element}
+        fnChange={this.onUpdElement}
+        fnAddSelect={this.handleAddSelect}
+        fnAddOption={this.newOption}
+      />
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          layer={layer}
+          select_options={selectOptions}
+          onDrop={e => this.onFieldDrop(e)}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onFieldSubFieldChange={this.onFieldSubFieldChange}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+              {
+                layer.wf ? <span>&nbsp;<Badge className="bg-bs-warning">workflow</Badge></span> : null
+              }
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnCond}
+                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
+              {fields}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderPropPanel() {
+    const {
+      element, show, revisions, propTabKey
+    } = this.state;
+    const showPropModal = show.tab === 'PropModal';
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="elements-prop-tabs" onSelect={this.propTabSelect}>
+          <Tab eventKey={1} title="Template">
+            <Panel>
+              <Panel.Heading>
+                <b>{`Template of Element [${element.name}]`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Upload template" tip="Upload Element template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
+                  <GenButtonTooltip txt="Workflow" tip="Design workflow" fnClick={() => this.handleShowState('modal', 'Workflow')} fa="fa-sitemap" place="top" />&nbsp;
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}> {this.renderProperties()} </Col>
+                  <Col sm={4}> {this.renderSelectOptions()} </Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+      );
+    }
+    return (<div />);
+  }
+
+  renderGrid() {
+    const { elements } = this.state;
+    const els = orderBy(elements, ['is_active', 'name', 'klass_prefix'], ['desc', 'asc', 'asc']);
+    return (<GenGridEl
+      gridData={els}
+      fnCopyKlass={this.copyKlass}
+      fnDeActivateKlass={this.handleActivateKlass}
+      fnEditKlass={this.editKlass}
+      fnShowProp={this.handlePropShow}
+    />);
+  }
+
+  render() {
+    const { element, layerKey, user } = this.state;
+    if (!user.generic_admin?.elements) {
+      return <GenericAdminUnauth userName={user.name} text="GenericElements" />;
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+
+    const layers = (element && element.properties_template
+      && element.properties_template.layers) || {};
+    const sortedLayers = layer.wf ?
+      (sortBy(layers, l => l.position) || []).filter(l => l.key === layer.key) :
+      (sortBy(layers, l => l.position) || []);
+    return (
+      <div className="generic-designer-container">
+        <GenericAdminNav userName={user.name} text="GenericElements" />
+        <div className="main-content">
+          <h3>Generic Elements Designer</h3>
+          <Button bsStyle="primary" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewKlass')}>
+            New Element&nbsp;<i className="fa fa-plus" aria-hidden="true" />
+          </Button>
+          { this.renderGrid() }
+          { this.renderPropPanel() }
+          <LayerAttrNewModal
+            showModal={this.state.show.modal === 'NewLayer'}
+            fnClose={this.closeModal}
+            fnCreate={this.handleCreateLayer}
+            isAttrOnWF
+          />
+          <LayerAttrEditModal
+            showModal={this.state.show.modal === 'EditLayer'}
+            layer={layer}
+            fnClose={this.closeModal}
+            fnUpdate={this.handleUpdateLayer}
+            isAttrOnWF
+          />
+          <AttrNewModal
+            content="Element"
+            showModal={this.state.show.modal === 'NewKlass'}
+            fnClose={this.closeModal}
+            fnCreate={this.handleCreateKlass}
+          />
+          <AttrEditModal
+            content="Element"
+            showModal={this.state.show.modal === 'EditKlass'}
+            element={this.state.element}
+            fnClose={this.closeModal}
+            fnDelete={this.handleDeleteKlass}
+            fnActivate={this.handleActivateKlass}
+            fnUpdate={this.handleUpdateKlass}
+          />
+          <FieldCondEditModal
+            showModal={this.state.show.modal === 'FieldCond'}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.closeModal}
+          />
+          <AttrCopyModal
+            content="Element"
+            showModal={this.state.show.modal === 'CopyKlass'}
+            element={this.state.element}
+            fnClose={this.closeModal}
+            fnCopy={this.handleCreateKlass}
+          />
+          <UploadModal
+            content="Generic Elements"
+            klass="ElementKlass"
+            showModal={this.state.show.modal === 'Upload'}
+            fnClose={this.closeModal}
+            fnUpload={this.handleUploadTemplate}
+          />
+          <WorkflowModal
+            show={this.state.show.modal === 'Workflow'}
+            element={this.state.element}
+            fnClose={this.closeModal}
+            fnSaveFlow={this.saveFlow}
+          />
+        </div>
+        <Notifications />
+        <LoadingModal />
+      </div>
+    );
+  }
+}
+
+const GenericElementsAdminDnD = DragDropContext(HTML5Backend)(GenericElementsAdmin);
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('GenericElementsAdmin');
+  if (domElement) ReactDOM.render(<GenericElementsAdminDnD />, domElement);
+});
diff --git a/app/packs/src/generic/GenericSegmentsAdmin.js b/app/packs/src/generic/GenericSegmentsAdmin.js
new file mode 100644
index 000000000..855af76ea
--- /dev/null
+++ b/app/packs/src/generic/GenericSegmentsAdmin.js
@@ -0,0 +1,853 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy, orderBy } from 'lodash';
+import { GenGridSg, GenButtonTooltip, SelectOptionLayer, ElementField, AttrNewModal, AttrEditModal, AttrCopyModal, FieldCondEditModal, LayerAttrEditModal, UploadModal, LayerAttrNewModal, WorkflowModal, reUnit, GenericDummy, orgLayerObject } from 'chem-generic-ui';
+import Notifications from '../components/Notifications';
+import LoadingModal from '../components/common/LoadingModal';
+import UsersFetcher from '../components/fetchers/UsersFetcher';
+import GenericSgsFetcher from '../components/fetchers/GenericSgsFetcher';
+import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
+import LoadingActions from '../components/actions/LoadingActions';
+import { validateLayerInput, validateSelectList, notification, validateLayerUpdation, validateLayerDeletion } from './Utils';
+import Preview from './Preview';
+import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
+
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+const validateInput = (element) => {
+  if (element.klass_element === '') {
+    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please select Element.' });
+    return false;
+  }
+  if (element.label === '') {
+    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please input Segment Label.' });
+    return false;
+  }
+  return true;
+};
+
+export default class GenericSegmentsAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      klasses: [],
+      newFieldKey: '',
+      layerKey: '',
+      selectOptions: [],
+      unitsSystem: {},
+      show: { tab: '', modal: '' },
+      propTabKey: 1,
+      revisions: [],
+      user: {}
+    };
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.fetchElements = this.fetchElements.bind(this);
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    this.editKlass = this.editKlass.bind(this);
+    this.copyKlass = this.copyKlass.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.updSubField = this.updSubField.bind(this);
+    this.updLayerSubField = this.updLayerSubField.bind(this);
+    this.handleShowState = this.handleShowState.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleCreateKlass = this.handleCreateKlass.bind(this);
+    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
+    this.handleActivateKlass = this.handleActivateKlass.bind(this);
+    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+    this.saveFlow = this.saveFlow.bind(this);
+    this.onUpdElement = this.onUpdElement.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchElementKlasses();
+    this.fetchConfigs();
+    UsersFetcher.fetchCurrentUser().then((result) => {
+      if (!result.error) {
+        this.setState({ user: result.user });
+      }
+    }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onUpdElement(generic) {
+    this.setState({ element: generic });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldSubFieldChange(lk, f, cb) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobj = (fields || []).find(o => o.field === f.field);
+      if (Object.keys(fobj).length > 0) {
+        const idx = (fields || []).findIndex(o => o.field === f.field);
+        fields.splice(idx, 1, f);
+        element.properties_template.layers[lk].fields = fields;
+        this.setState({ element }, cb);
+      }
+    }
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+
+    if (typeof layer === 'undefined' || layer == null) return;
+
+    const { fields } = layer;
+
+    if (fields == null || fields.length === 0) return;
+
+    const fobj = fields.find(e => e.field === fe);
+    if (Object.keys(fobj).length === 0) return;
+
+    switch (fc) {
+      case 'required':
+      case 'hasOwnRow':
+      case 'canAdjust':
+        fobj[`${fc}`] = !orig;
+        break;
+      default:
+        fobj[`${fc}`] = value;
+        break;
+    }
+
+    const idx = findIndex(fields, o => o.field === fe);
+    fields.splice(idx, 1, fobj);
+    element.properties_template.layers[lk].fields = fields;
+    this.setState({ element });
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      GenericSgsFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    GenericSgsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'SegmentKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  updSubField(layerKey, field, cb) {
+    this.onFieldSubFieldChange(layerKey, field, cb);
+  }
+
+  updLayerSubField(layerKey, layer) {
+    const { element } = this.state;
+    element.properties_template.layers[`${layerKey}`] = layer;
+    this.setState({ element });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+  editLayer(e) {
+    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
+  }
+
+  editKlass(element) {
+    this.setState({ show: this.getShowState('modal', 'EditKlass'), element });
+  }
+
+  copyKlass(element) {
+    this.setState({ show: this.getShowState('modal', 'CopyKlass'), element });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key, newOptionKey, selectOptions) {
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const { element } = this.state;
+    element.properties_template.select_options[key].options = selectOptions;
+    this.onUpdElement(element);
+  }
+
+  handleShowState(att, val, cb = () => {}) {
+    this.setState({ show: this.getShowState(att, val) }, cb);
+  }
+  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
+
+  handleAddSelect(selectName, newSelectOptions) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      element.properties_template.select_options = newSelectOptions;
+      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, selectOptions });
+    }
+  }
+
+  handleCreateLayer(_layer) {
+    const layer = _layer;
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    layer.position = (!layer.position && sortedLayers.length < 1) ?
+      100 : parseInt((sortedLayers.slice(-1)[0] || { position: 100 }).position, 10) + 10;
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates, 'upd')) return;
+    const { element } = this.state;
+    if (!validateLayerUpdation(element, updates)) return;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    layer = { ...layer, ...updates };
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    layer.position = layer.position ?
+      parseInt(layer.position, 10) : parseInt(sortedLayers.slice(-1)[0].position, 10) + 10;
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ show: this.getShowState('modal', ''), element });
+  }
+
+  handleCreateKlass(element) {
+    if (!validateInput(element)) return;
+    GenericSgsFetcher.createSegmentKlass(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Create Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: 'Create Segment successfully', lvl: 'info', msg: 'Created successfully' });
+          this.closeModal(this.fetchElements);
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleUpdateKlass(element, updates) {
+    const inputs = { ...element, ...updates };
+    if (!validateInput(inputs)) return;
+    GenericSgsFetcher.updateSegmentKlass(inputs)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: 'Update Segment successfully', lvl: 'info', msg: 'Updated successfully' });
+          this.closeModal(this.fetchElements);
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleActivateKlass(e) {
+    const act = e.is_active ? 'De-activate' : 'Activate';
+    GenericSgsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'SegmentKlass' })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `${act} Segment fail`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `${act} Segment successfully`, lvl: 'info', msg: `Segment is ${act.toLowerCase()} now` });
+          this.closeModal(this.fetchElements);
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleDeleteKlass(element) {
+    GenericSgsFetcher.deleteKlass({ id: element.id, klass: 'SegmentKlass' })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Delete Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Segment [${element.label}]`, lvl: 'info', msg: 'Deleted successfully' });
+          this.closeModal(this.fetchElements);
+          this.handleShowState('tab', '');
+        }
+      });
+  }
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({
+        element, selectOptions, show: this.getShowState('tab', 'PropModal'), propTabKey: 1
+      });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    if (valid === false) {
+      this.closeModal();
+      notification({
+        title: `Upload Template for Segment [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message
+      });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, show: this.getShowState('modal', '') });
+      notification({ title: `Upload template to Segment [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  fetchConfigs() {
+    GenericSgsFetcher.fetchUnitsSystem()
+      .then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  fetchElements() {
+    GenericSgsFetcher.listSegmentKlass()
+      .then((result) => { this.setState({ elements: result.klass }); });
+  }
+
+  fetchElementKlasses() {
+    GenericElsFetcher.fetchElementKlasses()
+      .then((result) => {
+        const klasses = result?.klass?.sort((a, b) => a.place - b.place) || [];
+        this.setState({ klasses });
+      });
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = false;
+        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
+        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].wf_position = 0;
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
+    sortedLayers.map((e, ix) => {
+      e.position = (ix + 1) * 10;
+      return e;
+    });
+    element.properties_template.layers = orgLayerObject(sortedLayers);
+    element.is_release = isRelease;
+    GenericSgsFetcher.updateSegmentTemplate(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Update Segment template fail', lvl: 'error', msg: result.error });
+        } else {
+          if (isRelease === true) {
+            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved adn Released successfully' });
+          } else {
+            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved successfully' });
+          }
+          this.fetchElements();
+          this.setState({ element: result });
+        }
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const { options } = element.properties_template.select_options[delRoot];
+      if (options && options.length > 0) {
+        const idx = findIndex(options, o => o.key === delKey);
+        options.splice(idx, 1);
+      }
+    } else if (delStr === 'Layer') {
+      if (!validateLayerDeletion(element, delKey)) return;
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    }
+    this.setState({ element });
+  }
+
+  saveFlow(params) {
+    const { flowObject } = params;
+    const { element } = this.state;
+    LoadingActions.start();
+    element.properties_template.flow = flowObject;
+    element.is_release = false;
+    GenericSgsFetcher.updateSegmentTemplate(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Update Segment [${element.name}] template`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Update Segment [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
+          this.fetchElements();
+          this.setState({ element: result, show: this.getShowState('modal', '') }, () => LoadingActions.stop());
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    return (
+      <SelectOptionLayer
+        generic={element}
+        fnChange={this.onUpdElement}
+        fnAddSelect={this.handleAddSelect}
+        fnAddOption={this.newOption}
+      />
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          genericType="Segment"
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          select_options={selectOptions}
+          onDrop={e => this.onFieldDrop(e)}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onFieldSubFieldChange={this.onFieldSubFieldChange}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+      // disable for now
+      const btnWF = null;
+      // const btnWF = layer.wf ? <GenButtonTooltip tip="used in workflow" fnClick={() => {}} element={{ }} fa="fa-sitemap" place="top" size="sm" /> : null;
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+              {
+                layer.wf ? <span>&nbsp;<Badge className="bg-bs-warning">workflow</Badge></span> : null
+              }
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnWF}
+                    {btnCond}
+                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
+              {fields}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderPropPanel() {
+    const {
+      element, show, revisions, propTabKey
+    } = this.state;
+    const showPropModal = show.tab === 'PropModal';
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="segments-prop-tabs" onSelect={this.propTabSelect}>
+          <Tab eventKey={1} title="Template">
+            <Panel show={showPropModal.toString()}>
+              <Panel.Heading>
+                <b>{`Template of Segment [${element.label}]: ${element.desc}`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <GenButtonTooltip txt="Upload template" tip="Upload Segment template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
+                  <GenButtonTooltip txt="Workflow" tip="Design workflow" fnClick={() => this.handleShowState('modal', 'Workflow')} fa="fa-sitemap" place="top" />&nbsp;
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}>{this.renderProperties()}</Col>
+                  <Col sm={4}>{this.renderSelectOptions()}</Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+      );
+    }
+    return (<div />);
+  }
+
+  renderGrid() {
+    const { elements } = this.state;
+    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
+    return (<GenGridSg
+      gridData={els}
+      fnCopyKlass={this.copyKlass}
+      fnDeActivateKlass={this.handleActivateKlass}
+      fnEditKlass={this.editKlass}
+      fnShowProp={this.handlePropShow}
+    />);
+  }
+
+  render() {
+    const { element, layerKey, user } = this.state;
+    if (!user.generic_admin?.segments) {
+      return <GenericAdminUnauth userName={user.name} text="GenericSegments" />;
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+
+    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
+
+    return (
+      <div className="generic-designer-container">
+        <GenericAdminNav userName={user.name} text="GenericSegments" />
+        <div className="main-content">
+          <h3>Generic Segments Designer</h3>
+          <Button bsStyle="primary" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewKlass')}>
+            New Segment&nbsp;<i className="fa fa-plus" aria-hidden="true" />
+          </Button>
+          { this.renderGrid() }
+          { this.renderPropPanel() }
+          <LayerAttrNewModal
+            showModal={this.state.show.modal === 'NewLayer'}
+            fnClose={this.closeModal}
+            fnCreate={this.handleCreateLayer}
+            isAttrOnWF
+          />
+          <LayerAttrEditModal
+            showModal={this.state.show.modal === 'EditLayer'}
+            layer={layer}
+            fnClose={this.closeModal}
+            fnUpdate={this.handleUpdateLayer}
+            isAttrOnWF
+          />
+          <AttrNewModal
+            content="Segment"
+            showModal={this.state.show.modal === 'NewKlass'}
+            klasses={this.state.klasses}
+            fnClose={this.closeModal}
+            fnCreate={this.handleCreateKlass}
+          />
+          <AttrEditModal
+            content="Segment"
+            showModal={this.state.show.modal === 'EditKlass'}
+            element={this.state.element}
+            klasses={this.state.klasses}
+            fnClose={this.closeModal}
+            fnDelete={this.handleDeleteKlass}
+            fnActivate={this.handleActivateKlass}
+            fnUpdate={this.handleUpdateKlass}
+          />
+          <FieldCondEditModal
+            showModal={this.state.show.modal === 'FieldCond'}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.closeModal}
+          />
+          <AttrCopyModal
+            content="Segment"
+            showModal={this.state.show.modal === 'CopyKlass'}
+            element={this.state.element}
+            klasses={this.state.klasses}
+            fnClose={this.closeModal}
+            fnCopy={this.handleCreateKlass}
+          />
+          <UploadModal
+            content="Generic Segments"
+            klass="SegmentKlass"
+            showModal={this.state.show.modal === 'Upload'}
+            fnClose={this.closeModal}
+            fnUpload={this.handleUploadTemplate}
+          />
+          <WorkflowModal
+            show={this.state.show.modal === 'Workflow'}
+            element={this.state.element}
+            fnClose={this.closeModal}
+            fnSaveFlow={this.saveFlow}
+          />
+        </div>
+        <Notifications />
+        <LoadingModal />
+      </div>
+    );
+  }
+}
+
+const GenericSegmentsAdminDnD = DragDropContext(HTML5Backend)(GenericSegmentsAdmin);
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('GenericSegmentsAdmin');
+  if (domElement) ReactDOM.render(<GenericSegmentsAdminDnD />, domElement);
+});
diff --git a/app/packs/src/generic/Preview.js b/app/packs/src/generic/Preview.js
new file mode 100644
index 000000000..71a9436c0
--- /dev/null
+++ b/app/packs/src/generic/Preview.js
@@ -0,0 +1,168 @@
+/* eslint-disable camelcase */
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Badge, Col } from 'react-bootstrap';
+import { cloneDeep } from 'lodash';
+import { GenInterface, GenButtonConfirm, GenButtonTooltip } from 'chem-generic-ui';
+import LoadingActions from '../components/actions/LoadingActions';
+import Utils from '../components/utils/Functions';
+
+export default class Preview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { revisions: [], compareUUID: 'current', fullScreen: false };
+    this.compare = this.compare.bind(this);
+    this.setRevision = this.setRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.handleChanged = this.handleChanged.bind(this);
+    this.dlRevision = this.dlRevision.bind(this);
+    this.setScreen = this.setScreen.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.revisions) {
+      this.setRevision(cloneDeep(this.props.revisions));
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.revisions !== prevProps.revisions) {
+      this.setRevision(cloneDeep(this.props.revisions));
+    }
+  }
+
+  setRevision(revisions) {
+    this.setState({ revisions });
+  }
+
+  setScreen(fullScreen) {
+    this.setState({ fullScreen });
+  }
+
+  compare(params) {
+    LoadingActions.start();
+    this.setState(
+      { revisions: cloneDeep(this.props.revisions), compareUUID: params.uuid },
+      LoadingActions.stop()
+    );
+  }
+
+  delRevision(params) {
+    this.props.fnDelete(params);
+  }
+
+  retriveRevision(params) {
+    const { fnRetrive, src } = this.props;
+    LoadingActions.start();
+    const deep = cloneDeep(this.props.revisions.find(r => r.id === params.id));
+    fnRetrive(deep[src], () => LoadingActions.stop());
+  }
+
+  dlRevision(params) {
+    const { element, revisions } = this.props;
+    LoadingActions.start();
+    const revision = revisions.find(r => r.id === params.id);
+    const props = revision.properties_release;
+    props.klass = revision.properties_release.klass;
+    props.released_at = revision.released_at || '';
+    const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(revision.properties_release))}`;
+    Utils.downloadFile({ contents: href, name: `${props.klass}_${element.label}_${revision.uuid}.json` });
+    LoadingActions.stop();
+  }
+
+  handleChanged(el) {
+    const { compareUUID, revisions } = this.state;
+    const { src } = this.props;
+    let selected = (revisions || []).find(r => r.uuid === compareUUID);
+    if (selected && selected[src]) {
+      selected = el;
+      this.setRevision(revisions);
+    }
+  }
+
+  render() {
+    const { compareUUID, revisions, fullScreen } = this.state;
+    if (revisions.length < 1) return null;
+    const { src, canDL } = this.props;
+    const t = (v, idx) => {
+      const s = v.uuid === compareUUID ? 'generic_block_select' : '';
+      const ver = v.released_at ? `version: ${v.uuid}` : 'version:';
+      let at = v.released_at ? `released at: ${v.released_at} (UTC)` : '(Work In Progress)';
+      if (src === 'properties') {
+        at = `saved at: ${v.released_at} (UTC)`;
+      }
+
+      const del = (v.released_at && idx > 1) ? <GenButtonConfirm msg="Delete this version permanently?" fnClick={this.delRevision} fnParams={{ id: v.id }} bs="default" place="top" /> : null;
+      const ret = v.released_at ? <GenButtonConfirm msg="Retrieve this version?" fnClick={this.retriveRevision} fnParams={{ id: v.id }} fa="fa-reply" bs="default" place="top" /> : null;
+      const dl = canDL ? <GenButtonTooltip tip="Download this version" fnClick={this.dlRevision} element={{ id: v.id }} fa="fa-download" place="top" bs="default" /> : null;
+      return (
+        <div className={`generic_version_block ${s}`} key={v.uuid}>
+          <div><div style={{ width: '100%' }}>{ver}</div><div style={{ fontSize: '0.8rem' }}>#{(idx + 1)}</div></div>
+          <div>
+            <div style={{ width: '100%' }}>{at}</div>
+            {del}
+            {dl}
+            {ret}
+            <GenButtonTooltip tip="Preview this version" fnClick={this.compare} element={{ uuid: v.uuid }} fa="fa-clock-o" place="top" bs="default" />
+          </div>
+        </div>
+      );
+    };
+    const options = [];
+    const selected = (revisions || []).find(r => r.uuid === compareUUID) || {};
+    const selectOptions = (selected && selected[src] && selected[src].select_options) || {};
+
+    if (selected.name) {
+      options.push({
+        generic: selected, type: 'text', isEditable: true, isRequire: false, field: 'name'
+      });
+    }
+
+    selected[src] = selected[src] || {};
+    selected[src].layers = selected[src].layers || {};
+    if (src === 'properties') {
+      selected.properties_release = { select_options: selectOptions };
+    } else { selected.properties = selected.properties_release; }
+
+    const layersLayout = (
+      <GenInterface
+        generic={selected || {}}
+        fnChange={this.handleChanged}
+        extLayers={options}
+        genId={selected.uuid || 0}
+        isPreview
+        isActiveWF={false}
+      />
+    );
+
+    const his = fullScreen ? null : (<Col md={4}>{revisions.map((r, idx) => (t(r, idx)))}</Col>);
+    const contentCol = fullScreen ? 12 : 8;
+    const screenFa = fullScreen ? 'compress' : 'expand';
+    return (
+      <div>
+        {his}
+        <Col md={contentCol}>
+          <div style={{ margin: '10px 0px' }}>
+            <div style={{ float: 'right' }}><GenButtonTooltip tip={screenFa} fnClick={this.setScreen} element={!this.state.fullScreen} fa={`fa-${screenFa}`} place="left" bs="default" /></div>
+            <Badge style={{ backgroundColor: '#ffc107', color: 'black' }}><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Sketch Map, the data input here will not be saved.</Badge>
+          </div>
+          <div style={{ width: '100%', minHeight: '50vh' }}>{layersLayout}</div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+Preview.propTypes = {
+  revisions: PropTypes.array,
+  fnRetrive: PropTypes.func,
+  fnDelete: PropTypes.func,
+  canDL: PropTypes.bool,
+  src: PropTypes.oneOf(['properties_release', 'properties'])
+};
+
+Preview.defaultProps = {
+  revisions: [], fnRetrive: () => {}, fnDelete: () => {}, src: 'properties_release', canDL: false
+};
diff --git a/app/packs/src/generic/Utils.js b/app/packs/src/generic/Utils.js
new file mode 100644
index 000000000..51fb88fd0
--- /dev/null
+++ b/app/packs/src/generic/Utils.js
@@ -0,0 +1,117 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+import { filter, cloneDeep } from 'lodash';
+import { isLayerInWF } from 'chem-generic-ui';
+import NotificationActions from '../components/actions/NotificationActions';
+import UserStore from '../components/stores/UserStore';
+import UIActions from '../components/actions/UIActions';
+import MatrixCheck from '../components/common/MatrixCheck';
+
+const notification = props =>
+  (
+    NotificationActions.add({
+      title: props.title,
+      message: props.msg,
+      level: props.lvl,
+      position: 'tc',
+      dismissible: 'button',
+      autoDismiss: props.autoDismiss || 5,
+      uid: props.uid || uuid.v4()
+    })
+  );
+
+const validateLayerInput = (layer, act = 'new') => {
+  if (layer.key === '') {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'Please input Name.' });
+    return false;
+  }
+  if (act === 'new' && !(/^[a-z][a-z_]+[a-z]$/g.test(layer.key))) {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+    return false;
+  }
+  if (parseInt((layer.cols || 1), 10) < 1) {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'The minimun of Column per Row is 1, please input a different one.' });
+    return false;
+  }
+  return true;
+};
+
+const validateSelectList = (selectName, element) => {
+  if (selectName === '') {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'Please input Name.' });
+    return false;
+  }
+  if (!(/^[a-z][a-z_]+[a-z]$/g.test(selectName))) {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+    return false;
+  }
+  if (element.properties_template.select_options[`${selectName}`]) {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This name of Select List is already taken. Please choose another one.' });
+    return false;
+  }
+  return true;
+};
+
+const GenericDSMisType = () => {
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  if (MatrixCheck(currentUser.matrix, 'genericDataset')) {
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Type (Chemical Methods Ontology) has been changed. <br />Please review this Dataset content.</Tooltip>}>
+        <span style={{ color: 'red' }}><i className="fa fa-exclamation-triangle" />&nbsp;</span>
+      </OverlayTrigger>
+    );
+  }
+  return null;
+};
+
+const validateLayerDeletion = (_element, _delKey) => {
+  if (isLayerInWF(_element, _delKey)) {
+    notification({ title: `Layer [${_delKey}]`, lvl: 'warning', msg: `This layer [${_delKey}] can not be removed because it is currently used in workflow.` });
+    return false;
+  }
+  return true;
+};
+
+const validateLayerUpdation = (_element, _updates) => {
+  const { key, wf } = _updates;
+  if (isLayerInWF(_element, key)) {
+    if (!wf) {
+      notification({ title: `Layer [${key}]`, lvl: 'warning', msg: `Can not change the attribute 'used in Workflow?' because this layer [${key}] is currently used in workflow.` });
+      return false;
+    }
+  }
+  const { layers } = _element.properties_template;
+  if (wf && layers[key] && (layers[key].cond_fields || []).length > 0) {
+    notification({ title: `Layer [${key}]`, lvl: 'warning', msg: 'Can not use in Workflow because the Layer Restriction has been set.' });
+    return false;
+  }
+  return true;
+};
+
+const renderFlowModal = (generic, isToggle) => {
+  const segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+  let shortLabel = generic.short_label;
+  if (!shortLabel) {
+    shortLabel = segmentKlasses.filter(s => s.id === generic.segment_klass_id);
+    shortLabel = shortLabel.length > 0 ? shortLabel[0].label : '';
+  }
+  const params = {
+    properties_release: cloneDeep(generic.properties_release) || {},
+    properties: cloneDeep(generic.properties) || {},
+    shortLabel,
+    toggle: isToggle
+  };
+  UIActions.rerenderGenericWorkflow(params);
+};
+
+const segmentsByKlass = (name) => {
+  const allSegments = UserStore.getState().segmentKlasses || [];
+  return filter(allSegments, se => (se.element_klass && se.element_klass.name) === name);
+};
+
+export {
+  GenericDSMisType, validateLayerInput, validateSelectList, notification,
+  validateLayerUpdation, validateLayerDeletion, renderFlowModal, segmentsByKlass
+};
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index dcd98cfa5..84ba0d5e8 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -34,6 +34,7 @@ import NavFooter from './NavFooter';
 import LoadingModal from '../components/common/LoadingModal';
 
 import PublicActions from '../components/actions/PublicActions';
+import RepoGenericHub from './RepoGenericHub';
 
 const extraHomes = () => {
   const homes = [];
@@ -73,6 +74,8 @@ class Home extends Component {
 
   renderGuestPage() {
     switch (this.state.guestPage) {
+      case 'genericHub':
+        return <RepoGenericHub />;
       case 'moleculeArchive':
         return <RepoPubl listType="moleculeArchive" />;
       case 'newseditor':
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 9fa405c92..7d34849db 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, Navbar, NavItem } from 'react-bootstrap';
+import { Button, Nav, Navbar, NavItem, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import UserAuth from '../components/UserAuth';
 import UserStore from '../components/stores/UserStore';
 import UIStore from '../components/stores/UIStore';
@@ -124,15 +124,20 @@ export default class Navigation extends React.Component {
             {
               true ?
                 <NavItem eventKey={4} onClick={() => Aviator.navigate('/home/newsroom')} className="white-nav-item">
-                  Newsroom&nbsp;<i className="fa fa-bullhorn" aria-hidden="true" />
+                  <i className="fa fa-bullhorn" aria-hidden="true" />&nbsp;Newsroom
                 </NavItem> : null
             }
             {
               true ?
                 <NavItem eventKey={5} target="_blank" href="https://www.chemotion.net/docs/repo" className="white-nav-item">
-                  How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
+                  <i className="fa fa-question-circle" aria-hidden="true" />&nbsp;How-To
                 </NavItem> : null
             }
+            <NavItem eventKey={8} onClick={() => Aviator.navigate('/home/genericHub')} className="repo-generic-hub-btn">
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="_tooltip_labimotion_hub">LabIMotion Template Hub</Tooltip>}>
+                <Button><i className="fa fa-empire" aria-hidden="true" />{' '}LabIMotion</Button>
+              </OverlayTrigger>
+            </NavItem>
           </Nav>
         </Navbar.Collapse>
       </Navbar>
diff --git a/app/packs/src/libHome/RepoGenericHub.js b/app/packs/src/libHome/RepoGenericHub.js
new file mode 100644
index 000000000..d13e3fd98
--- /dev/null
+++ b/app/packs/src/libHome/RepoGenericHub.js
@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import { Button, ButtonGroup, Col, Row } from 'react-bootstrap';
+import { GenGridBase } from 'chem-generic-ui';
+import GenericBaseFetcher from '../components/fetchers/GenericBaseFetcher';
+import Utils from '../components/utils/Functions';
+import RepoGenericHubDesc from './RepoGenericHubDesc';
+
+const getCurrentDateTimeString = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Month is zero-based, so we add 1 and pad with leading zero if needed.
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
+};
+
+const downloadFile = (data, filename) => {
+  const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data))}`;
+  Utils.downloadFile({ contents: href, name: `${filename}_${getCurrentDateTimeString()}.json` });
+};
+
+const capitalizeFirstLetter = str => str.replace(/^[a-z]/, match => match.toUpperCase());
+
+const RepoGenericHub = () => {
+  const [expanded, setExpanded] = useState(false);
+  const [state, setState] = useState({
+    menuSelected: '',
+    gridData: [],
+  });
+
+  const { menuSelected, gridData } = state;
+
+  const TemplateRenderer = (params) => {
+    const {
+      node, downloadName
+    } = params;
+    const onShow = () => {
+      node.setSelected(true, true);
+      downloadFile(
+        node.data.properties_release || {}
+        , `${downloadName}_${node.data.label || ''}_${node.data.identifier || ''}`
+      );
+    };
+
+    return (
+      <span>
+        <Button onClick={onShow}><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</Button>
+      </span>
+    );
+  };
+
+  const BelongsToRenderer = (params) => {
+    const { data } = params;
+    return (
+      <>
+        {data.element_klass?.label}
+        &nbsp;
+        <i className={data.element_klass?.icon_name} aria-hidden="true" />
+      </>
+    );
+  };
+
+  const IconRenderer = (params) => {
+    const { value, iconStyle } = params;
+    return <i className={value} aria-hidden="true" style={iconStyle || { color: 'black' }} />;
+  };
+
+  const elColumnDefs = [
+    {
+      field: 'name',
+      minWidth: 170,
+    },
+    { headerName: 'Prefix', field: 'klass_prefix' },
+    { headerName: 'Element label', field: 'label' },
+    {
+      headerName: 'Icon',
+      field: 'icon_name',
+      minWidth: 50,
+      width: 50,
+      sortable: false,
+      filter: false,
+      cellRenderer: IconRenderer,
+    },
+    { headerName: 'Description', field: 'desc' },
+    { headerName: 'Released at', field: 'released_at' },
+    {
+      headerName: 'Template',
+      cellRenderer: TemplateRenderer,
+      cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },
+      sortable: false,
+      filter: false,
+    },
+  ];
+
+  const sgColumnDefs = [
+    { headerName: 'Segment label', field: 'label' },
+    { headerName: 'Description', field: 'desc' },
+    {
+      headerName: 'Belongs to',
+      field: 'element_klass.name',
+      minWidth: 50,
+      cellRenderer: BelongsToRenderer,
+    },
+    { headerName: 'Released at', field: 'released_at' },
+    {
+      headerName: 'Template',
+      cellRenderer: TemplateRenderer,
+      cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },
+      sortable: false,
+      filter: false,
+    },
+  ];
+
+  const dsColumnDefs = [
+    {
+      hide: true,
+      headerName: '#',
+      valueFormatter: params => `${parseInt(params.node.id, 10) + 1}`,
+      sortable: false,
+    },
+    {
+      headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,
+    },
+    { headerName: 'Released at', field: 'released_at' },
+    {
+      headerName: 'Template',
+      cellRenderer: TemplateRenderer,
+      cellRendererParams: { downloadName: `Generic ${capitalizeFirstLetter(menuSelected)} Template` },
+      sortable: false,
+      filter: false,
+    },
+  ];
+
+
+  const columnDefs = {
+    element: elColumnDefs,
+    segment: sgColumnDefs,
+    dataset: dsColumnDefs,
+  };
+
+  const clickExpand = () => {
+    setExpanded(!expanded);
+  };
+
+  const clickMenu = (e, type) => {
+    e.stopPropagation();
+    GenericBaseFetcher.open(`/list?klass=${capitalizeFirstLetter(type)}&with_props=true`, 'GET')
+      .then((result) => {
+        setState({ ...state, menuSelected: type, gridData: result.list });
+      })
+      .catch((error) => {
+        console.error('Error fetching dataset klasses:', error);
+        setState({ ...state, menuSelected: type, gridData: [] });
+      });
+  };
+
+  return (
+    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+      <Col md={12}>
+        <div className="repo-generic-hub-layout">
+          <div className="repo-generic-hub-inner">
+            <Button onClick={clickExpand} className="expand-button">
+              <i
+                className={`fa fa-caret-${expanded ? 'right' : 'left'}`}
+                aria-hidden="true"
+              />
+            </Button>
+            <div className="content">
+              {!expanded && <RepoGenericHubDesc />}
+              {expanded && (
+                <ButtonGroup>
+                  <Button className="hub-menu" active={menuSelected === 'element'} onClick={e => clickMenu(e, 'element')}>Generic Element Template</Button>
+                  <Button className="hub-menu" active={menuSelected === 'segment'} onClick={e => clickMenu(e, 'segment')}>Generic Segment Template</Button>
+                  <Button className="hub-menu" active={menuSelected === 'dataset'} onClick={e => clickMenu(e, 'dataset')}>Generic Dataset Template</Button>
+                </ButtonGroup>
+              )}
+              {
+                expanded && menuSelected && (
+                  <div style={{ flex: '1', margin: '0px 15px 15px 15px' }}>
+                    <h3>{menuSelected ? `Generic ${capitalizeFirstLetter(menuSelected)} Template` : ''}</h3>
+                    <GenGridBase gridColumn={columnDefs[menuSelected]} gridData={gridData} />
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default RepoGenericHub;
diff --git a/app/packs/src/libHome/RepoGenericHubDesc.js b/app/packs/src/libHome/RepoGenericHubDesc.js
new file mode 100644
index 000000000..e8d56a128
--- /dev/null
+++ b/app/packs/src/libHome/RepoGenericHubDesc.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { GenGridBase } from 'chem-generic-ui';
+
+const ContactEmail = () => {
+  const email = 'chemotion-labimotion@lists.kit.edu';
+  const handleSendEmail = () => {
+    window.location.href = `mailto:${email}`;
+  };
+
+  return (
+    <Button bsSize="small" onClick={handleSendEmail}>
+      <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Send feedback about LabIMotion
+    </Button>
+  );
+};
+
+const gridData = [
+  {
+    desc: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
+    label: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
+    released_at: '2021-08-06T21:25:08.057Z',
+    properties_release: { }
+  },
+  {
+    desc: 'cyclic voltammetry (CV)',
+    label: 'cyclic voltammetry (CV)',
+    released_at: '2021-08-08T20:26:08.088Z',
+    properties_release: { }
+  }
+];
+
+const RepoGenericHubDesc = () => {
+  const TemplateRenderer = () => (
+    <span>
+      <Button style={{ cursor: 'auto' }}><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</Button>
+    </span>
+  );
+
+  const dsColumnDefs = [
+    {
+      hide: true,
+      headerName: '#',
+      valueFormatter: params => `${parseInt(params.node.id, 10) + 1}`,
+      sortable: false,
+    },
+    {
+      headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,
+    },
+    { headerName: 'Released at', field: 'released_at' },
+    {
+      headerName: 'Template',
+      cellRenderer: TemplateRenderer,
+      sortable: false,
+      filter: false,
+    },
+  ];
+
+  return (
+    <div className="repo-generic-hub-desc">
+      <h1>LabIMotion Template Hub<span className="contact"><ContactEmail /></span></h1>
+      <h3>
+        Welcome to the <b>LabIMotion Template Hub</b>, a platform for sharing new elements, segments, and datasets templates.
+      </h3>
+      <h3>Getting Started</h3>
+      <h5>
+        To begin exploring the templates, simply click on the <span className="start"><i className="fa fa-caret-left" aria-hidden="true" /></span> on the left-hand side.
+      </h5>
+      <h3>Quick Look User Interface</h3>
+      <h5>
+        <p>The templates are displayed in a grid layout. You can </p>
+        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;sort the grid by clicking on the column headers. </p>
+        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;filter the grid by clicking on the filter icon <i className="fa fa-bars" aria-hidden="true" /> located at the right of the column headers. </p>
+        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;download a specific template by clicking on the button <span className="download"><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</span>. </p>
+      </h5>
+      <div style={{ height: '200px' }}>
+        <GenGridBase gridColumn={dsColumnDefs} gridData={gridData} />
+      </div>
+    </div>
+  );
+};
+
+export default RepoGenericHubDesc;
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index b97ede818..82778c517 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -40,6 +40,14 @@ const routes = {
     },
     '/': 'show'
   },
+  '/genericHub': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage('genericHub')
+      },
+    },
+    '/': 'show'
+  },
   '/moleculeArchive': {
     target: {
       show: function(e) {
diff --git a/app/packs/src/models/GenericEl.js b/app/packs/src/models/GenericEl.js
index e55151ede..700899431 100644
--- a/app/packs/src/models/GenericEl.js
+++ b/app/packs/src/models/GenericEl.js
@@ -76,6 +76,38 @@ export default class GenericEl extends Element {
     return target;
   }
 
+  analysesContainers() {
+    if (this.container.children.length === 0) {
+      const analyses = Container.buildEmpty();
+      analyses.container_type = 'analyses';
+      this.container.children.push(analyses);
+    }
+    return this.container
+      .children
+      .filter(el => ~el.container_type.indexOf('analyses'));
+  }
+
+
+  analysisContainers() {
+    let target = [];
+    this.analysesContainers().forEach((aec) => {
+      const aics = aec.children
+        .filter(el => ~el.container_type.indexOf('analysis'));
+      target = [...target, ...aics];
+    });
+    return target;
+  }
+
+  datasetContainers() {
+    let target = [];
+    this.analysisContainers().forEach((aic) => {
+      const dts = aic.children
+        .filter(el => ~el.container_type.indexOf('dataset'));
+      target = [...target, ...dts];
+    });
+    return target;
+  }
+
   static buildNewShortLabel(klass) {
     const { currentUser } = UserStore.getState();
     if (!currentUser) {
@@ -96,6 +128,22 @@ export default class GenericEl extends Element {
     return copy;
   }
 
+  static clearProperties(props) {
+    Object.keys(props.layers).forEach((key) => {
+      const newLayer = props.layers[key] || {};
+      newLayer.ai = [];
+      (newLayer.fields || []).forEach((f, idx) => {
+        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
+          newLayer.fields[idx].value = null;
+        }
+        if (f && (f.type === 'table')) {
+          newLayer.fields[idx].sub_values = [];
+        }
+      });
+    });
+    return props;
+  }
+
   static copyFromCollectionId(element, collection_id) {
     const target = Object.assign({}, element.properties);
     const params = {
diff --git a/app/packs/src/models/Reaction.js b/app/packs/src/models/Reaction.js
index 631c8a536..ba497691d 100644
--- a/app/packs/src/models/Reaction.js
+++ b/app/packs/src/models/Reaction.js
@@ -1,6 +1,7 @@
 import {
   isEmpty,
   round,
+  cloneDeep
 } from 'lodash';
 import Delta from 'quill-delta';
 import moment from 'moment';
@@ -511,6 +512,23 @@ export default class Reaction extends Element {
     return copy;
   }
 
+
+  static clearProperties(props) {
+    Object.keys(props.layers).forEach((key) => {
+      const newLayer = props.layers[key] || {};
+      newLayer.ai = [];
+      (newLayer.fields || []).forEach((f, idx) => {
+        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
+          newLayer.fields[idx].value = null;
+        }
+        if (f && (f.type === 'table')) {
+          newLayer.fields[idx].sub_values = [];
+        }
+      });
+    });
+    return props;
+  }
+
   static copyFromReactionAndCollectionId(reaction, collection_id) {
     const target = Segment.buildCopy(reaction.segments);
     const params = {
@@ -518,6 +536,7 @@ export default class Reaction extends Element {
       role: 'parts',
       segments: target,
       timestamp_start: '',
+      segments: target,
       timestamp_stop: '',
       publication: {},
       rf_value: 0.00,
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index aab6b6ec9..27eaae651 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -43,6 +43,23 @@ export default class Sample extends Element {
     this.melting_point = null;
   }
 
+
+  static clearProperties(props) {
+    Object.keys(props.layers).forEach((key) => {
+      const newLayer = props.layers[key] || {};
+      newLayer.ai = [];
+      (newLayer.fields || []).forEach((f, idx) => {
+        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
+          newLayer.fields[idx].value = null;
+        }
+        if (f && (f.type === 'table')) {
+          newLayer.fields[idx].sub_values = [];
+        }
+      });
+    });
+    return props;
+  }
+
   static copyFromSampleAndCollectionId(sample, collection_id, structure_only = false, keepResidueInfo = false, keepExternalLabel = true) {
     const newSample = sample.buildCopy();
     newSample.collection_id = collection_id;
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
index ede7fe9a2..da185fc59 100644
--- a/app/packs/src/stores/alt/stores/UIStore.js
+++ b/app/packs/src/stores/alt/stores/UIStore.js
@@ -108,6 +108,9 @@ class UIStore {
       handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
       handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
       handleSelectPublicCollection: PublicActions.selectPublicCollection,
+      handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
+      handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
+
     });
   }
 
@@ -126,7 +129,6 @@ class UIStore {
     });
   }
 
-
   handleRerenderGenericWorkflow(params) {
     this.state.propGenericWorkflow = params;
     if (params.toggle) { this.state.showGenericWorkflow = !this.state.showGenericWorkflow; }
diff --git a/app/views/pages/gda.haml b/app/views/pages/gda.haml
index 11462fa33..b09167e3c 100644
--- a/app/views/pages/gda.haml
+++ b/app/views/pages/gda.haml
@@ -1 +1 @@
-#GenericDatasetsAdmin
\ No newline at end of file
+#GenericDatasetsAdmin
diff --git a/app/views/pages/gea.haml b/app/views/pages/gea.haml
index f8ee2036b..a9ac98b77 100644
--- a/app/views/pages/gea.haml
+++ b/app/views/pages/gea.haml
@@ -1 +1 @@
-#GenericElementsAdmin
\ No newline at end of file
+#GenericElementsAdmin
diff --git a/app/views/pages/gsa.haml b/app/views/pages/gsa.haml
index 8b4a9c6d5..2dba822c3 100644
--- a/app/views/pages/gsa.haml
+++ b/app/views/pages/gsa.haml
@@ -1 +1 @@
-#GenericSegmentsAdmin
\ No newline at end of file
+#GenericSegmentsAdmin
diff --git a/config/routes.rb b/config/routes.rb
index d5cf0a9e7..46bed3a38 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -45,7 +45,6 @@
     get 'pages/affiliations', to: 'pages#affiliations'
     patch 'pages/create_affiliation', to: 'pages#create_affiliation'
     patch 'pages/update_affiliations', to: 'pages#update_affiliations'
-
     # get 'command_n_control', to: 'pages#cnc'
     get 'mydb/*any', to: 'pages#mydb'
     get 'mydb', to: 'pages#mydb'
@@ -60,6 +59,9 @@
     get 'home/embargo', to: 'pages#home'
     get 'home/embargo/*review_element', to: 'pages#home'
     get 'pages/tokens', to: 'pages#tokens'
+    get 'generic_elements_admin', to: 'pages#gea'
+    get 'generic_segments_admin', to: 'pages#gsa'
+    get 'generic_datasets_admin', to: 'pages#gda'
   end
 
   get 'home/*any', to: 'pages#home'
diff --git a/db/functions/set_dataset_klasses_identifier_v01.sql b/db/functions/set_dataset_klasses_identifier_v01.sql
new file mode 100644
index 000000000..742541f3f
--- /dev/null
+++ b/db/functions/set_dataset_klasses_identifier_v01.sql
@@ -0,0 +1,8 @@
+create or replace function set_dataset_klasses_identifier()
+returns trigger as
+$FUNC$
+begin
+	update dataset_klasses set identifier = gen_random_uuid() where identifier is null;
+  return new;
+end
+$FUNC$ language plpgsql;
diff --git a/db/functions/set_element_klasses_identifier_v01.sql b/db/functions/set_element_klasses_identifier_v01.sql
new file mode 100644
index 000000000..0c7e565c6
--- /dev/null
+++ b/db/functions/set_element_klasses_identifier_v01.sql
@@ -0,0 +1,8 @@
+create or replace function set_element_klasses_identifier()
+returns trigger as
+$FUNC$
+begin
+	update element_klasses set identifier = gen_random_uuid() where identifier is null;
+  return new;
+end
+$FUNC$ language plpgsql;
diff --git a/db/migrate/20210610105014_generic_elements_revision_migration.rb b/db/migrate/20210610105014_generic_elements_revision_migration.rb
index a68d53a47..2db7f4d15 100644
--- a/db/migrate/20210610105014_generic_elements_revision_migration.rb
+++ b/db/migrate/20210610105014_generic_elements_revision_migration.rb
@@ -40,7 +40,7 @@ def self.up
       Labimotion::ElementKlassesRevision.create(attributes)
     end
 
-    Element.find_each do |el|
+    Labimotion::Element.find_each do |el|
       klass = ElementKlass.find_by(id: el.element_klass_id)
       if klass.nil?
         el.destroy!
diff --git a/db/migrate/20210614115000_generic_segments_revision_migration.rb b/db/migrate/20210614115000_generic_segments_revision_migration.rb
index 7ae3f5b7e..78e55596c 100644
--- a/db/migrate/20210614115000_generic_segments_revision_migration.rb
+++ b/db/migrate/20210614115000_generic_segments_revision_migration.rb
@@ -37,7 +37,7 @@ def self.up
         properties_release: klass.properties_template,
         released_at: klass.released_at
       }
-      SegmentKlassesRevision.create(attributes)
+      Labimotion::SegmentKlassesRevision.create(attributes)
     end
 
     Segment.find_each do |el|
@@ -69,7 +69,7 @@ def self.up
         deleted_at: el.deleted_at,
         properties: el.properties
       }
-      SegmentsRevision.create(attributes)
+      Labimotion::SegmentsRevision.create(attributes)
     end
   end
 
diff --git a/db/migrate/20210621145002_generic_datasets_revision.rb b/db/migrate/20210621145002_generic_datasets_revision.rb
index 38a934373..f8bc34667 100644
--- a/db/migrate/20210621145002_generic_datasets_revision.rb
+++ b/db/migrate/20210621145002_generic_datasets_revision.rb
@@ -2,7 +2,7 @@
 
 # Create generic dataset revision
 class GenericDatasetsRevision < ActiveRecord::Migration[4.2]
-  class DatasetKlass < ActiveRecord::Base
+  class Labimotion::DatasetKlass < ActiveRecord::Base
   end
   def self.up
     add_column :dataset_klasses, :uuid, :string, null: true unless column_exists? :dataset_klasses, :uuid
diff --git a/db/migrate/20210621155000_generic_datasets_revision_migration.rb b/db/migrate/20210621155000_generic_datasets_revision_migration.rb
index bebe6d4c1..39aa23e9d 100644
--- a/db/migrate/20210621155000_generic_datasets_revision_migration.rb
+++ b/db/migrate/20210621155000_generic_datasets_revision_migration.rb
@@ -8,7 +8,7 @@ def self.up
       properties = klass.properties_template || { uuid: uuid, layers: {}, select_options: {} }
       properties['uuid'] = uuid
       properties['eln'] = Chemotion::Application.config.version
-      properties['klass'] = 'DatasetKlass'
+      properties['klass'] = 'Labimotion::DatasetKlass'
       select_options = properties['select_options']
       select_options&.map { |k, v| select_options[k] = { desc: k, options: v } }
       properties['select_options'] = select_options || {}
diff --git a/db/migrate/20220712100000_add_segment_klass_identifier.rb b/db/migrate/20220712100000_add_segment_klass_identifier.rb
deleted file mode 100644
index bfec90a9e..000000000
--- a/db/migrate/20220712100000_add_segment_klass_identifier.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-# Add column identifier into segment_klasses
-class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
-  def self.up
-    execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
-    add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
-    add_column :segment_klasses, :sync_time, :datetime unless column_exists? :segment_klasses, :sync_time
-    SegmentKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
-  end
-
-  def self.down
-    remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
-    remove_column :segment_klasses, :sync_time if column_exists? :segment_klasses, :sync_time
-  end
-end
diff --git a/db/migrate/20220712100002_add_segment_klass_identifier.rb b/db/migrate/20220712100002_add_segment_klass_identifier.rb
new file mode 100644
index 000000000..e99cf5cae
--- /dev/null
+++ b/db/migrate/20220712100002_add_segment_klass_identifier.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Add column identifier into segment_klasses
+class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
+  def self.up
+    execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
+    add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
+    add_column :segment_klasses, :sync_time, :datetime unless column_exists? :segment_klasses, :sync_time
+    add_column :segment_klasses, :metadata, :jsonb, default: {} unless column_exists? :segment_klasses, :metadata
+    Labimotion::SegmentKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
+
+    add_column :dataset_klasses, :identifier, :string unless column_exists? :dataset_klasses, :identifier
+    add_column :dataset_klasses, :sync_time, :datetime unless column_exists? :dataset_klasses, :sync_time
+    add_column :dataset_klasses, :metadata, :jsonb, default: {} unless column_exists? :dataset_klasses, :metadata
+    Labimotion::DatasetKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
+
+    add_column :element_klasses, :identifier, :string unless column_exists? :element_klasses, :identifier
+    add_column :element_klasses, :sync_time, :datetime unless column_exists? :element_klasses, :sync_time
+    add_column :element_klasses, :metadata, :jsonb, default: {} unless column_exists? :element_klasses, :metadata
+    Labimotion::DatasetKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
+  end
+
+  def self.down
+    remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
+    remove_column :segment_klasses, :sync_time if column_exists? :segment_klasses, :sync_time
+    remove_column :segment_klasses, :metadata if column_exists? :segment_klasses, :metadata
+    remove_column :dataset_klasses, :identifier if column_exists? :dataset_klasses, :identifier
+    remove_column :dataset_klasses, :sync_time if column_exists? :dataset_klasses, :sync_time
+    remove_column :dataset_klasses, :metadata if column_exists? :dataset_klasses, :metadata
+    remove_column :element_klasses, :identifier if column_exists? :element_klasses, :identifier
+    remove_column :element_klasses, :sync_time if column_exists? :element_klasses, :sync_time
+    remove_column :element_klasses, :metadata if column_exists? :element_klasses, :metadata
+  end
+end
diff --git a/db/migrate/20230714100002_add_generic_updated_by.rb b/db/migrate/20230714100002_add_generic_updated_by.rb
new file mode 100644
index 000000000..4b03e978a
--- /dev/null
+++ b/db/migrate/20230714100002_add_generic_updated_by.rb
@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+# Add column identifier into segment_klasses
+class AddGenericUpdatedBy < ActiveRecord::Migration[5.2]
+  def self.up
+    add_column :segment_klasses, :updated_by, :integer unless column_exists? :segment_klasses, :updated_by
+    add_column :segment_klasses, :released_by, :integer unless column_exists? :segment_klasses, :released_by
+    add_column :segment_klasses, :sync_by, :integer unless column_exists? :segment_klasses, :sync_by
+    add_column :segment_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :segment_klasses, :admin_ids
+    add_column :segment_klasses, :user_ids, :jsonb, default: {} unless column_exists? :segment_klasses, :user_ids
+
+    add_column :dataset_klasses, :updated_by, :integer unless column_exists? :dataset_klasses, :updated_by
+    add_column :dataset_klasses, :released_by, :integer unless column_exists? :dataset_klasses, :released_by
+    add_column :dataset_klasses, :sync_by, :integer unless column_exists? :dataset_klasses, :sync_by
+    add_column :dataset_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :dataset_klasses, :admin_ids
+    add_column :dataset_klasses, :user_ids, :jsonb, default: {} unless column_exists? :dataset_klasses, :user_ids
+
+    add_column :element_klasses, :updated_by, :integer unless column_exists? :element_klasses, :updated_by
+    add_column :element_klasses, :released_by, :integer unless column_exists? :element_klasses, :released_by
+    add_column :element_klasses, :sync_by, :integer unless column_exists? :element_klasses, :sync_by
+    add_column :element_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :element_klasses, :admin_ids
+    add_column :element_klasses, :user_ids, :jsonb, default: {} unless column_exists? :element_klasses, :user_ids
+
+  end
+
+  def self.down
+    remove_column :segment_klasses, :updated_by if column_exists? :segment_klasses, :updated_by
+    remove_column :segment_klasses, :released_by if column_exists? :segment_klasses, :released_by
+    remove_column :segment_klasses, :sync_by if column_exists? :segment_klasses, :sync_by
+    remove_column :segment_klasses, :admin_ids if column_exists? :segment_klasses, :admin_ids
+    remove_column :segment_klasses, :user_ids if column_exists? :segment_klasses, :user_ids
+
+    remove_column :dataset_klasses, :updated_by if column_exists? :dataset_klasses, :updated_by
+    remove_column :dataset_klasses, :released_by if column_exists? :dataset_klasses, :released_by
+    remove_column :dataset_klasses, :sync_by if column_exists? :dataset_klasses, :sync_by
+    remove_column :dataset_klasses, :admin_ids if column_exists? :dataset_klasses, :admin_ids
+    remove_column :dataset_klasses, :user_ids if column_exists? :dataset_klasses, :user_ids
+
+    remove_column :element_klasses, :updated_by if column_exists? :element_klasses, :updated_by
+    remove_column :element_klasses, :released_by if column_exists? :element_klasses, :released_by
+    remove_column :element_klasses, :sync_by if column_exists? :element_klasses, :sync_by
+    remove_column :element_klasses, :admin_ids if column_exists? :element_klasses, :admin_ids
+    remove_column :element_klasses, :user_ids if column_exists? :element_klasses, :user_ids
+
+  end
+end
diff --git a/db/migrate/20230801142753_create_function_set_element_klasses_identifier.rb b/db/migrate/20230801142753_create_function_set_element_klasses_identifier.rb
new file mode 100644
index 000000000..9d207df0a
--- /dev/null
+++ b/db/migrate/20230801142753_create_function_set_element_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateFunctionSetElementKlassesIdentifier < ActiveRecord::Migration[5.0]
+  def change
+    create_function :set_element_klasses_identifier
+  end
+end
diff --git a/db/migrate/20230801142841_create_trigger_set_element_klasses_identifier.rb b/db/migrate/20230801142841_create_trigger_set_element_klasses_identifier.rb
new file mode 100644
index 000000000..28e906f93
--- /dev/null
+++ b/db/migrate/20230801142841_create_trigger_set_element_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateTriggerSetElementKlassesIdentifier < ActiveRecord::Migration[5.0]
+  def change
+    create_trigger :set_element_klasses_identifier, on: :element_klasses
+  end
+end
diff --git a/db/migrate/20230801142852_create_function_set_dataset_klasses_identifier.rb b/db/migrate/20230801142852_create_function_set_dataset_klasses_identifier.rb
new file mode 100644
index 000000000..c0a282bd7
--- /dev/null
+++ b/db/migrate/20230801142852_create_function_set_dataset_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateFunctionSetDatasetKlassesIdentifier < ActiveRecord::Migration[5.0]
+  def change
+    create_function :set_dataset_klasses_identifier
+  end
+end
diff --git a/db/migrate/20230801142924_create_trigger_set_dataset_klasses_identifier.rb b/db/migrate/20230801142924_create_trigger_set_dataset_klasses_identifier.rb
new file mode 100644
index 000000000..f2d4f2651
--- /dev/null
+++ b/db/migrate/20230801142924_create_trigger_set_dataset_klasses_identifier.rb
@@ -0,0 +1,5 @@
+class CreateTriggerSetDatasetKlassesIdentifier < ActiveRecord::Migration[5.0]
+  def change
+    create_trigger :set_dataset_klasses_identifier, on: :dataset_klasses
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index a1bf47b67..a31421885 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1562,7 +1562,28 @@
              order by extended_metadata -> 'instrument' limit 10
            $function$
   SQL
-
+  create_function :set_element_klasses_identifier, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.set_element_klasses_identifier()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	update element_klasses set identifier = gen_random_uuid() where identifier is null;
+        return new;
+      end
+      $function$
+  SQL
+  create_function :set_dataset_klasses_identifier, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.set_dataset_klasses_identifier()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	update dataset_klasses set identifier = gen_random_uuid() where identifier is null;
+        return new;
+      end
+      $function$
+  SQL
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
       CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
diff --git a/db/triggers/set_dataset_klasses_identifier_v01.sql b/db/triggers/set_dataset_klasses_identifier_v01.sql
new file mode 100644
index 000000000..0d4937091
--- /dev/null
+++ b/db/triggers/set_dataset_klasses_identifier_v01.sql
@@ -0,0 +1,3 @@
+create trigger set_dataset_klasses_identifier
+    after insert on dataset_klasses
+    for each statement execute function set_dataset_klasses_identifier();
diff --git a/db/triggers/set_element_klasses_identifier_v01.sql b/db/triggers/set_element_klasses_identifier_v01.sql
new file mode 100644
index 000000000..49c2b3807
--- /dev/null
+++ b/db/triggers/set_element_klasses_identifier_v01.sql
@@ -0,0 +1,3 @@
+create trigger set_element_klasses_identifier
+    after insert on element_klasses
+    for each statement execute function set_element_klasses_identifier();
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index e5ef39e9c..5f68d8ade 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -347,27 +347,30 @@ def fetch_containers(containable)
     # rubocop:enable Metrics/MethodLength
 
     def fetch_element_klasses
-      klasses = ElementKlass.where(is_active: true, is_generic: false)
+      klasses = Labimotion::ElementKlass.where(is_active: true, is_generic: false)
       fetch_many(klasses, {'created_by' => 'User'})
     end
 
     def fetch_segment_klasses
-      klasses = SegmentKlass.where(is_active: true)
+      klasses = Labimotion::SegmentKlass.where(is_active: true)
       fetch_many(klasses, {'created_by' => 'User'})
     end
 
     def fetch_segments(element)
       element_type = element.class.name
-      segments = Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
+#byebug
+      segments = Labimotion::Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
       segments.each do |segment|
+#byebug
         segment = fetch_properties(segment)
         fetch_one(segment.segment_klass.element_klass)
+#byebug
         fetch_one(segment.segment_klass, {
-          'element_klass_id' => 'ElementKlass'
+          'element_klass_id' => 'Labimotion::ElementKlass'
         })
         fetch_one(segment, {
           'element_id' => segment.element_type,
-          'segment_klass_id' => 'SegmentKlass',
+          'segment_klass_id' => 'Labimotion::SegmentKlass',
           'created_by' => 'User'
         })
       end
@@ -411,7 +414,7 @@ def fetch_properties(instance)
           files&.each_with_index do |fi, fdx|
             att = Attachment.find(fi['aid'])
             @attachments += [att]
-            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Segment'}) unless att.nil?
+            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Labimotion::Segment'}) unless att.nil?
           end
         end
 
diff --git a/yarn.lock b/yarn.lock
index 3bd94c7ee..27b01c218 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3318,6 +3318,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@popperjs/core@^2.9.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rails/ujs@^6.1.3-1":
   version "6.1.4"
   resolved "https://registry.npmjs.org/@rails/ujs/-/ujs-6.1.4.tgz"
@@ -4587,6 +4592,13 @@ ag-grid-react@^27.3.0:
   dependencies:
     prop-types "^15.8.1"
 
+ag-grid-react@^28.2.1:
+  version "28.2.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.1.tgz#c38585b8f165a5cf9343eab6994c06855f5b2caf"
+  integrity sha512-3vbw+B77uWwAyiOJxQA5U+PQFRCCccUx7L5PIwrnA4Y7c1yAu8sB65hAZdBc9kuW26iltwv7asq0UzP7UAQUpg==
+  dependencies:
+    prop-types "^15.8.1"
+
 agent-base@5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
@@ -11586,6 +11598,11 @@ moment@2.x, moment@^2.24.0, moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 moo@^0.5.0, moo@^0.5.1:
   version "0.5.1"
   resolved "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz"
@@ -13500,6 +13517,18 @@ react-countup@^6.3.2:
     "@rollup/plugin-babel" "^6.0.2"
     countup.js "^2.3.2"
 
+react-datepicker@^4.8.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.15.0.tgz#489834773fbcf87852273b4642f0c5bd3811cef7"
+  integrity sha512-kysEqVv6wRQkmAyn0wJi4Xx+JjBPBtXWfQSfh6sR3wdzZX1/LjYTPmaurnVI6ao177ecompg8ze7NCgtEGW78A==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    classnames "^2.2.6"
+    date-fns "^2.24.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.12.2"
+    react-popper "^2.3.0"
+
 react-datepicker@~1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.4.1.tgz"

From b3f8cb29c2e0e8a2849cd9fb53c5635b140fc17e Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 2 Aug 2023 00:20:20 +0200
Subject: [PATCH 170/258] cap deploy

---
 config/deploy.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/deploy.rb b/config/deploy.rb
index e5a1ef0a8..a64aacfc5 100644
--- a/config/deploy.rb
+++ b/config/deploy.rb
@@ -60,7 +60,7 @@
 
 set :default_env, fetch(:default_env, {}).merge({
 #  'WEBPACKER_PRECOMPILE' => 'false',
-  'NODE_OPTIONS' => '"--max-old-space-size=3072"'
+  'NODE_OPTIONS' => '"--max-old-space-size=4096"'
 })
 
 

From 4a310c40a660cbcd8078113acbd5d246235c9421 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 3 Aug 2023 14:40:17 +0200
Subject: [PATCH 171/258] add contact block on mydb page

---
 app/assets/stylesheets/repo_home.scss         | 12 ++++++++++
 app/packs/src/apps/mydb/App.js                |  8 +++++++
 .../components/chemrepo/core/ContactEmail.js  | 24 +++++++++++++++++++
 app/packs/src/libHome/RepoGenericHubDesc.js   | 16 ++-----------
 4 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/core/ContactEmail.js

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 524fed522..d03507d4f 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -1085,3 +1085,15 @@ $bs-successcolor: #5cb85c;
   background-color: #ddd !important;
   color: #6c757d !important;
 }
+
+.news-box {
+  font-size: 12px;
+  padding: 8px;
+  border: 2px solid #eaf0f6;
+  background-color: #f9fcff;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  margin-top: 8px;
+}
\ No newline at end of file
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 780a8aac2..9622440e1 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -24,6 +24,8 @@ import alt from './alt';
 import initRoutes from './routes';
 import ReviewActions from './actions/ReviewActions';
 import ReviewStore from './stores/ReviewStore';
+import ProgressModal from './common/ProgressModal';
+import ContactEmail from './chemrepo/core/ContactEmail';
 
 class App extends Component {
   constructor(_props) {
@@ -144,6 +146,12 @@ class App extends Component {
     return (
       <Col className="small-col collec-tree">
         <CollectionTree />
+        <div className="news-box">
+          <p>New to the Repository? Explore our <a href="https://chemotion.net/docs/repo/settings_preparation" target="_blank" rel="noreferrer">Preparation</a> & <a href="https://chemotion.net/docs/repo/workflow" target="_blank" rel="noreferrer">Workflow</a> </p>
+          <p>Guidelines: Discover <a href="https://chemotion.net/docs/repo/details_standards/reactions" target="_blank" rel="noreferrer">Details and Standards</a></p>
+          <p>Learn More: Visit <a href="https://chemotion.net/docs/repo/references" target="_blank" rel="noreferrer">here</a></p>
+          <ContactEmail />
+        </div>
       </Col>
     );
   }
diff --git a/app/packs/src/components/chemrepo/core/ContactEmail.js b/app/packs/src/components/chemrepo/core/ContactEmail.js
new file mode 100644
index 000000000..8e4a76992
--- /dev/null
+++ b/app/packs/src/components/chemrepo/core/ContactEmail.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+const ContactEmail = (props) => {
+  const handleSendEmail = () => {
+    window.location.href = `mailto:${props.email}`;
+  };
+
+  return (
+    <Button bsSize="small" onClick={handleSendEmail}>
+      <i className="fa fa-envelope-o" aria-hidden="true" />{` ${props.label}`}
+    </Button>
+  );
+};
+
+ContactEmail.propTypes = {
+  label: PropTypes.string,
+  email: PropTypes.string,
+};
+
+ContactEmail.defaultProps = { label: 'Contact Us', email: 'chemotion-repository@lists.kit.edu' };
+
+export default ContactEmail;
diff --git a/app/packs/src/libHome/RepoGenericHubDesc.js b/app/packs/src/libHome/RepoGenericHubDesc.js
index e8d56a128..0a1721077 100644
--- a/app/packs/src/libHome/RepoGenericHubDesc.js
+++ b/app/packs/src/libHome/RepoGenericHubDesc.js
@@ -1,19 +1,7 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
 import { GenGridBase } from 'chem-generic-ui';
-
-const ContactEmail = () => {
-  const email = 'chemotion-labimotion@lists.kit.edu';
-  const handleSendEmail = () => {
-    window.location.href = `mailto:${email}`;
-  };
-
-  return (
-    <Button bsSize="small" onClick={handleSendEmail}>
-      <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Send feedback about LabIMotion
-    </Button>
-  );
-};
+import ContactEmail from '../components/chemrepo/core/ContactEmail';
 
 const gridData = [
   {
@@ -58,7 +46,7 @@ const RepoGenericHubDesc = () => {
 
   return (
     <div className="repo-generic-hub-desc">
-      <h1>LabIMotion Template Hub<span className="contact"><ContactEmail /></span></h1>
+      <h1>LabIMotion Template Hub<span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span></h1>
       <h3>
         Welcome to the <b>LabIMotion Template Hub</b>, a platform for sharing new elements, segments, and datasets templates.
       </h3>

From bddbd55768ec59bad015cad8611f6d78c441cfbe Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 4 Aug 2023 12:30:40 +0200
Subject: [PATCH 172/258] con state

---
 app/api/chemotion/search_api.rb           |  2 +-
 app/api/entities/klass_revision_entity.rb | 20 -----
 app/models/user.rb                        |  1 +
 lib/export/export_collections.rb          | 90 +----------------------
 lib/import/import_collections.rb          |  1 +
 5 files changed, 6 insertions(+), 108 deletions(-)
 delete mode 100644 app/api/entities/klass_revision_entity.rb

diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 72d61500b..77c38667e 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -367,7 +367,6 @@ def search_elements(c_id = @c_id, dl = @dl)
         dl_s = dl[:sample_detail_level] || 0
 
         search_method = 'chemotion_id' if arg&.match(/(CRR|CRS|CRD)-\d+/)
-
         scope = case search_method
                 when 'polymer_type'
                   if dl_s > 0
@@ -493,6 +492,7 @@ def elements_by_scope(scope, collection_id = @c_id)
         #   wells: :sample
         # )
         # user_screens = Screen.by_collection_id(collection_id)
+        user_elements = Labimotion::Element.by_collection_id(collection_id)
 
         case scope&.first
         when Sample
diff --git a/app/api/entities/klass_revision_entity.rb b/app/api/entities/klass_revision_entity.rb
deleted file mode 100644
index 8024b651b..000000000
--- a/app/api/entities/klass_revision_entity.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # KlassRevisionEntity
-  class KlassRevisionEntity < Grape::Entity
-    expose :id, :uuid, :properties_release, :released_at
-
-    expose :klass_id do |object|
-      klass_id = object.element_klass_id if object.respond_to? :element_klass_id
-      klass_id = object.segment_klass_id if object.respond_to? :segment_klass_id
-      klass_id = object.dataset_klass_id if object.respond_to? :dataset_klass_id
-      klass_id
-    end
-
-    def released_at
-      object.released_at&.strftime('%d.%m.%Y, %H:%M')
-    end
-  end
-end
-
diff --git a/app/models/user.rb b/app/models/user.rb
index 53b6d9919..dda6945bc 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -357,6 +357,7 @@ def pending_collection
       "sync_collections_users.collection_id = collections.id")
       .where("sync_collections_users.shared_by_id = #{su_id}")
       .where("sync_collections_users.user_id = #{self.id}")
+      .where("sync_collections_users.permission_level = 0 and sync_collections_users.fake_ancestry is not null")
       .where("collections.label = 'Pending Publications'").first
   end
 
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index 5f68d8ade..e2577a51d 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -66,7 +66,7 @@ def to_file
           zipping.put_next_entry 'schema.json'
           zipping.write schema_json
           description += "#{schema_json_checksum} schema.json\n"
-          # write all attachemnts into an attachments directory
+          # write all attachments into an attachments directory
           @attachments.each do |attachment|
             attachment_path = File.join('attachments', "#{attachment.identifier}#{File.extname(attachment.filename)}")
             next if attachment.attachment_attacher.file.blank?
@@ -163,7 +163,6 @@ def fetch_samples(collection)
         fetch_many(sample.residues, {
                      'sample_id' => 'Sample',
         })
-
         segment, @attachments = Labimotion::Export.fetch_segments(sample, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
@@ -202,6 +201,8 @@ def fetch_reactions(collection)
                        'sample_id' => 'Sample',
                      })
         end
+        segment, @attachments = Labimotion::Export.fetch_segments(reaction, @attachments, &method(:fetch_one))
+        @segments += segment if segment.present?
 
         segment, @attachments = Labimotion::Export.fetch_segments(reaction, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
@@ -300,7 +301,6 @@ def fetch_research_plans(collection)
     # rubocop:disable Metrics/MethodLength
     def fetch_containers(containable)
       containable_type = containable.class.name
-
       # fetch root container
       root_container = containable.container
       fetch_one(containable.container, {
@@ -346,36 +346,6 @@ def fetch_containers(containable)
     end
     # rubocop:enable Metrics/MethodLength
 
-    def fetch_element_klasses
-      klasses = Labimotion::ElementKlass.where(is_active: true, is_generic: false)
-      fetch_many(klasses, {'created_by' => 'User'})
-    end
-
-    def fetch_segment_klasses
-      klasses = Labimotion::SegmentKlass.where(is_active: true)
-      fetch_many(klasses, {'created_by' => 'User'})
-    end
-
-    def fetch_segments(element)
-      element_type = element.class.name
-#byebug
-      segments = Labimotion::Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
-      segments.each do |segment|
-#byebug
-        segment = fetch_properties(segment)
-        fetch_one(segment.segment_klass.element_klass)
-#byebug
-        fetch_one(segment.segment_klass, {
-          'element_klass_id' => 'Labimotion::ElementKlass'
-        })
-        fetch_one(segment, {
-          'element_id' => segment.element_type,
-          'segment_klass_id' => 'Labimotion::SegmentKlass',
-          'created_by' => 'User'
-        })
-      end
-    end
-
     def fetch_literals(element)
       element_type = element.class.name
 
@@ -391,60 +361,6 @@ def fetch_literals(element)
       end
     end
 
-    def fetch_properties(instance)
-      properties = instance.properties
-      properties['layers'].keys.each do |key|
-        layer = properties['layers'][key]
-
-        # field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }  -- TODO for elements
-        # field_elements = layer['fields'].select { |ss| ss['type'] == 'drag_element' }  -- TODO for elements
-
-        field_molecules = layer['fields'].select { |ss| ss['type'] == 'drag_molecule' }
-        field_molecules.each do |field|
-          idx = properties['layers'][key]['fields'].index(field)
-          id = field["value"] && field["value"]["el_id"] unless idx.nil?
-          mol = Molecule.find(id) unless id.nil?
-          properties['layers'][key]['fields'][idx]['value']['el_id'] = fetch_one(mol) unless mol.nil?
-        end
-
-        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
-        field_uploads.each do |upload|
-          idx = properties['layers'][key]['fields'].index(upload)
-          files = upload["value"] && upload["value"]["files"]
-          files&.each_with_index do |fi, fdx|
-            att = Attachment.find(fi['aid'])
-            @attachments += [att]
-            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Labimotion::Segment'}) unless att.nil?
-          end
-        end
-
-        field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-        field_tables&.each do |field|
-          next unless field['sub_values'].present? && field['sub_fields'].present?
-          # field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }  -- not available yet
-          # field_table_uploads = field['sub_fields'].select { |ss| ss['type'] == 'upload' }       -- not available yet
-          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-          if field_table_molecules.present?
-            col_ids = field_table_molecules.map { |x| x.values[0] }
-            col_ids.each do |col_id|
-              field['sub_values'].each do |sub_value|
-                next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-                svalue = sub_value[col_id]['value']
-                next unless svalue['el_id'].present? && svalue['el_inchikey'].present?
-
-                tmol = Molecule.find_by(id: svalue['el_id'])
-                sub_value[col_id]['value']['el_id'] = fetch_one(tmol) unless tmol.nil?
-              end
-            end
-          end
-        end
-
-      end
-      instance.properties = properties
-      instance
-    end
-
     def fetch_many(instances, foreign_keys = {})
       instances.each do |instance|
         fetch_one(instance, foreign_keys)
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 1606986b4..62970ae15 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -101,6 +101,7 @@ def import
         import_segments
         import_datasets
         import_attachments
+        import_datasets
         import_literals
       end
     end

From 57449bb1f8df8b0de70b0cc6cc1f705dc8a44faf Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 8 Aug 2023 00:09:18 +0200
Subject: [PATCH 173/258] fix the unit cannot display issue

---
 app/packs/src/apps/admin/AdminNavigation.js         |  1 -
 app/packs/src/apps/mydb/App.js                      |  1 -
 app/packs/src/components/actions/PublicActions.js   | 11 -----------
 app/packs/src/components/actions/ReviewActions.js   | 13 +------------
 .../src/components/fetchers/GenericBaseFetcher.js   |  7 -------
 app/packs/src/components/stores/PublicStore.js      |  5 -----
 app/packs/src/components/stores/ReviewStore.js      |  6 ------
 app/packs/src/generic/GenericAdminNav.js            |  2 +-
 app/packs/src/generic/GenericDatasetsAdmin.js       | 13 ++-----------
 app/packs/src/generic/GenericElementsAdmin.js       | 11 ++---------
 app/packs/src/generic/GenericSegmentsAdmin.js       | 11 ++---------
 app/packs/src/libHome/RepoPubl.js                   |  1 -
 app/packs/src/libHome/RepoReview.js                 |  1 -
 app/packs/src/stores/alt/stores/UserStore.js        |  6 ------
 14 files changed, 8 insertions(+), 81 deletions(-)

diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index 099bdc1ce..73f177e6c 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -22,7 +22,6 @@ export default class AdminNavigation extends React.Component {
   componentDidMount() {
     UserStore.listen(this.onChange);
     UserActions.fetchCurrentUser();
-    UserActions.fetchUnitsSystem();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 9622440e1..c5735f266 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -57,7 +57,6 @@ class App extends Component {
     UserActions.fetchGenericEls();
     UserActions.fetchSegmentKlasses();
     UserActions.fetchDatasetKlasses();
-    UserActions.fetchUnitsSystem();
     UserActions.fetchEditors();
     UIActions.initialize.defer();
     document.addEventListener('keydown', this.documentKeyDown);
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 431aef0b4..1f0db4aaf 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -302,17 +302,6 @@ class PublicActions {
   }
 
 
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
   fetchBasedOnSearchSelectionAndCollection(params) {
     let uid;
     NotificationActions.add({
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
index 27fa68c62..19813721e 100644
--- a/app/packs/src/components/actions/ReviewActions.js
+++ b/app/packs/src/components/actions/ReviewActions.js
@@ -73,17 +73,6 @@ class ReviewActions {
         });
     };
   }
-
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
 }
+
 export default alt.createActions(ReviewActions);
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
index 026118056..56dac03db 100644
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -54,13 +54,6 @@ export default class GenericBaseFetcher {
       });
   }
 
-  static fetchUnitsSystem() {
-    return fetch('/units_system/units_system.json', { credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' } })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
   static updateTemplate(params) {
     return fetch('/api/v1/generic_elements/update_template', {
       credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index f2bea5130..92f078690 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -278,11 +278,6 @@ class PublicStore {
       elements, page, perPage, pages, selectType, selectState, searchType, searchValue
     });
   }
-
-
-  handleUnitsSystem(result) {
-    this.setState({ unitsSystem: result });
-  }
 }
 
 export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index 6ceb589b1..9780e9e63 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -25,7 +25,6 @@ class ReviewStore {
       handelReviewPublish: ReviewActions.reviewPublish,
       handleGetElements: ReviewActions.getElements,
       handelUpdateComment: ReviewActions.updateComment,
-      handleUnitsSystem: ReviewActions.fetchUnitsSystem,
       handleReviewUpdate: ReviewActions.updateReview,
       handleFetchSample: ReviewActions.fetchSample,
       handleClose: PublicActions.close,
@@ -67,11 +66,6 @@ class ReviewStore {
     this.setState({ bundles, current_user });
   }
 
-  handleUnitsSystem(result) {
-    this.setState({ unitsSystem: result });
-  }
-
-
   handleReviewUpdate(review) {
     this.setState({ review: review });
   }
diff --git a/app/packs/src/generic/GenericAdminNav.js b/app/packs/src/generic/GenericAdminNav.js
index 471265892..8d9db805c 100644
--- a/app/packs/src/generic/GenericAdminNav.js
+++ b/app/packs/src/generic/GenericAdminNav.js
@@ -11,7 +11,7 @@ const GenericAdminNav = (props) => {
   return (
     <Navbar fixedTop>
       <Navbar.Header>
-        <Navbar.Brand><a href="/">Back to MyDB</a></Navbar.Brand>
+        <Navbar.Brand><a href="/mydb">Back to MyDB</a></Navbar.Brand>
         <Navbar.Toggle />
       </Navbar.Header>
       <Navbar.Collapse>
diff --git a/app/packs/src/generic/GenericDatasetsAdmin.js b/app/packs/src/generic/GenericDatasetsAdmin.js
index 67fd42f65..e5e63baae 100644
--- a/app/packs/src/generic/GenericDatasetsAdmin.js
+++ b/app/packs/src/generic/GenericDatasetsAdmin.js
@@ -6,7 +6,7 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import uuid from 'uuid';
 import Clipboard from 'clipboard';
 import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import { GenGridDs, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, LayerAttrEditModal, LayerAttrNewModal, GenericDummy, reUnit, UploadModal } from 'chem-generic-ui';
+import { GenGridDs, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, LayerAttrEditModal, LayerAttrNewModal, GenericDummy, reUnit, UploadModal, si } from 'chem-generic-ui';
 import LoadingModal from '../components/common/LoadingModal';
 import Notifications from '../components/Notifications';
 import GenericDSsFetcher from '../components/fetchers/GenericDSsFetcher';
@@ -26,7 +26,7 @@ export default class GenericDatasetsAdmin extends React.Component {
       newFieldKey: '',
       layerKey: '',
       selectOptions: [],
-      unitsSystem: {},
+      unitsSystem: si,
       show: { tab: '', modal: '' },
       propTabKey: 1,
       revisions: [],
@@ -52,7 +52,6 @@ export default class GenericDatasetsAdmin extends React.Component {
     this.onFieldInputChange = this.onFieldInputChange.bind(this);
     this.onShowFieldCond = this.onShowFieldCond.bind(this);
     this.handleCond = this.handleCond.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
     this.handleDeActive = this.handleDeActive.bind(this);
     this.propTabSelect = this.propTabSelect.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -65,7 +64,6 @@ export default class GenericDatasetsAdmin extends React.Component {
 
   componentDidMount() {
     this.fetchElements();
-    this.fetchConfigs();
     UsersFetcher.fetchCurrentUser().then((result) => {
       if (!result.error) {
         this.setState({ user: result.user });
@@ -203,11 +201,6 @@ export default class GenericDatasetsAdmin extends React.Component {
 
   getShowState(att, val) { return { ...this.state.show, [att]: val }; }
 
-  fetchConfigs() {
-    GenericDSsFetcher.fetchUnitsSystem()
-      .then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
   fetchElements() {
     GenericDSsFetcher.listDatasetKlass()
       .then((result) => { this.setState({ elements: result.klass }); });
@@ -332,7 +325,6 @@ export default class GenericDatasetsAdmin extends React.Component {
   }
 
   handleCreateLayer(_layer) {
-    console.log('_layer', _layer)
     const layer = _layer;
     if (!validateLayerInput(layer)) return;
     const { element } = this.state;
@@ -367,7 +359,6 @@ export default class GenericDatasetsAdmin extends React.Component {
 
   handleUploadTemplate(properties, message, valid) {
     const { element } = this.state;
-    console.log('properties', properties);
     if (valid === false) {
       this.closeModal();
       notification({
diff --git a/app/packs/src/generic/GenericElementsAdmin.js b/app/packs/src/generic/GenericElementsAdmin.js
index e37cdadc3..9c94ab1d8 100644
--- a/app/packs/src/generic/GenericElementsAdmin.js
+++ b/app/packs/src/generic/GenericElementsAdmin.js
@@ -7,7 +7,7 @@ import uuid from 'uuid';
 import Clipboard from 'clipboard';
 import { findIndex, filter, sortBy, orderBy } from 'lodash';
 
-import { GenGridEl, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, WorkflowModal, LayerAttrEditModal, LayerAttrNewModal, UploadModal, AttrCopyModal, AttrNewModal, AttrEditModal, GenericDummy, reUnit } from 'chem-generic-ui';
+import { GenGridEl, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, WorkflowModal, LayerAttrEditModal, LayerAttrNewModal, UploadModal, AttrCopyModal, AttrNewModal, AttrEditModal, GenericDummy, reUnit, si } from 'chem-generic-ui';
 import LoadingModal from '../components/common/LoadingModal';
 import Notifications from '../components/Notifications';
 import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
@@ -50,7 +50,7 @@ export default class GenericElementsAdmin extends React.Component {
       layerKey: '',
       fieldObj: {},
       selectOptions: [],
-      unitsSystem: {},
+      unitsSystem: si,
       show: { tab: '', modal: '' },
       propTabKey: 1,
       revisions: [],
@@ -83,7 +83,6 @@ export default class GenericElementsAdmin extends React.Component {
     this.onFieldMove = this.onFieldMove.bind(this);
     this.onShowFieldCond = this.onShowFieldCond.bind(this);
     this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
     this.handleCond = this.handleCond.bind(this);
     this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -99,7 +98,6 @@ export default class GenericElementsAdmin extends React.Component {
 
   componentDidMount() {
     this.fetchElements();
-    this.fetchConfigs();
     UsersFetcher.fetchCurrentUser().then((result) => {
       if (!result.error) {
         this.setState({ user: result.user });
@@ -448,11 +446,6 @@ export default class GenericElementsAdmin extends React.Component {
       });
   }
 
-  fetchConfigs() {
-    GenericElsFetcher.fetchUnitsSystem()
-      .then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
   fetchRevisions() {
     const { element } = this.state;
     if (element && element.id) {
diff --git a/app/packs/src/generic/GenericSegmentsAdmin.js b/app/packs/src/generic/GenericSegmentsAdmin.js
index 855af76ea..624f5eca1 100644
--- a/app/packs/src/generic/GenericSegmentsAdmin.js
+++ b/app/packs/src/generic/GenericSegmentsAdmin.js
@@ -6,7 +6,7 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import uuid from 'uuid';
 import Clipboard from 'clipboard';
 import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import { GenGridSg, GenButtonTooltip, SelectOptionLayer, ElementField, AttrNewModal, AttrEditModal, AttrCopyModal, FieldCondEditModal, LayerAttrEditModal, UploadModal, LayerAttrNewModal, WorkflowModal, reUnit, GenericDummy, orgLayerObject } from 'chem-generic-ui';
+import { GenGridSg, GenButtonTooltip, SelectOptionLayer, ElementField, AttrNewModal, AttrEditModal, AttrCopyModal, FieldCondEditModal, LayerAttrEditModal, UploadModal, LayerAttrNewModal, WorkflowModal, reUnit, GenericDummy, orgLayerObject, si } from 'chem-generic-ui';
 import Notifications from '../components/Notifications';
 import LoadingModal from '../components/common/LoadingModal';
 import UsersFetcher from '../components/fetchers/UsersFetcher';
@@ -40,7 +40,7 @@ export default class GenericSegmentsAdmin extends React.Component {
       newFieldKey: '',
       layerKey: '',
       selectOptions: [],
-      unitsSystem: {},
+      unitsSystem: si,
       show: { tab: '', modal: '' },
       propTabKey: 1,
       revisions: [],
@@ -72,7 +72,6 @@ export default class GenericSegmentsAdmin extends React.Component {
     this.onFieldMove = this.onFieldMove.bind(this);
     this.onShowFieldCond = this.onShowFieldCond.bind(this);
     this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
     this.handleCond = this.handleCond.bind(this);
     this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -88,7 +87,6 @@ export default class GenericSegmentsAdmin extends React.Component {
   componentDidMount() {
     this.fetchElements();
     this.fetchElementKlasses();
-    this.fetchConfigs();
     UsersFetcher.fetchCurrentUser().then((result) => {
       if (!result.error) {
         this.setState({ user: result.user });
@@ -457,11 +455,6 @@ export default class GenericSegmentsAdmin extends React.Component {
     }
   }
 
-  fetchConfigs() {
-    GenericSgsFetcher.fetchUnitsSystem()
-      .then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
   fetchElements() {
     GenericSgsFetcher.listSegmentKlass()
       .then((result) => { this.setState({ elements: result.klass }); });
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index f88bfa304..230da7ca4 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -131,7 +131,6 @@ export default class RepoPubl extends Component {
     PublicActions.selectPublicCollection.defer();
     PublicStore.listen(this.onChange);
     // PublicActions.getReactions.defer();
-    PublicActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index e0b8fcff4..5e9c7e47a 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -101,7 +101,6 @@ export default class RepoReview extends Component {
     ReviewStore.listen(this.onChange);
     ReviewActions.getElements.defer();
     EmbargoActions.getEmbargoBundle(); // added to ReviewStore
-    ReviewActions.fetchUnitsSystem.defer();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/stores/alt/stores/UserStore.js b/app/packs/src/stores/alt/stores/UserStore.js
index 0703d19a2..efb3c317b 100644
--- a/app/packs/src/stores/alt/stores/UserStore.js
+++ b/app/packs/src/stores/alt/stores/UserStore.js
@@ -17,7 +17,6 @@ class UserStore {
       genericEls: [],
       segmentKlasses: [],
       dsKlasses: [],
-      unitsSystem: {},
       matriceConfigs: [],
       omniauthProviders: []
     };
@@ -35,7 +34,6 @@ class UserStore {
       handleFetchNoVNCDevices: UserActions.fetchNoVNCDevices,
       handleSegementKlasses: UserActions.fetchSegmentKlasses,
       handleDatasetKlasses: UserActions.fetchDatasetKlasses,
-      handleUnitsSystem: UserActions.fetchUnitsSystem,
       handleOmniauthProviders: UserActions.fetchOmniauthProviders
     });
   }
@@ -104,10 +102,6 @@ class UserStore {
     this.state.dsKlasses = result.klass;
   }
 
-  handleUnitsSystem(result) {
-    this.state.unitsSystem = result;
-  }
-
   handleOmniauthProviders(result) {
     this.state.omniauthProviders = result.omniauth_providers;
     this.state.extraRules = result.extra_rules;

From 8a78c2eea239915518090f04741bec7797f29347 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Sun, 13 Aug 2023 20:40:05 +0200
Subject: [PATCH 174/258] upgrade review functionality

---
 app/api/chemotion/attachment_api.rb           |  8 +++
 app/api/chemotion/repository_api.rb           |  6 ++
 app/packs/src/apps/mydb/App.js                | 54 ++++++++++++++---
 .../src/components/actions/PublicActions.js   |  3 +
 .../src/components/actions/ReviewActions.js   |  4 +-
 .../src/components/chemrepo/PublicSample.js   |  5 ++
 .../components/contextActions/CreateButton.js | 30 ++++------
 .../src/components/stores/PublicStore.js      |  1 +
 .../src/components/stores/ReviewStore.js      | 20 +++++--
 app/packs/src/fetchers/UsersFetcher.js        |  2 +-
 app/packs/src/libHome/RepoReactionDetails.js  | 57 +-----------------
 app/packs/src/libHome/RepoReview.js           | 59 ++++++++++++++++---
 app/packs/src/libHome/RepoSampleDetails.js    | 34 +++--------
 lib/export/export_collections.rb              |  1 +
 package.json                                  |  2 +-
 15 files changed, 164 insertions(+), 122 deletions(-)

diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index f8a7fcb59..b42c9d2f6 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -76,6 +76,14 @@ def remove_duplicated(att)
     end
 
     resource :export_ds do
+      before do
+        @container = Container.find_by(id: params[:container_id])
+        element = @container.root.containable
+        can_read = ElementPolicy.new(current_user, element).read?
+        can_dwnld = can_read &&
+                    ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?
+        error!('401 Unauthorized', 401) unless can_dwnld
+      end
       desc "Download the dataset attachment file"
       get 'dataset/:container_id' do
         env['api.format'] = :binary
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index a5dbe4c94..cff58bfda 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -766,6 +766,12 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' } if root.state == Publication::STATE_REVIEWED
               review_history << next_node
               review['history'] = review_history
+            else
+              if comment.present? && root.state == Publication::STATE_PENDING
+                next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
+                review_history << next_node
+                review['history'] = review_history
+              end
             end
             if checklist&.length&.positive?
               revst = review['checklist'] || {}
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index c5735f266..619fac309 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -18,7 +18,7 @@ import SampleTaskInbox from 'src/components/sampleTaskInbox/SampleTaskInbox';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import Aviator from 'aviator';
-import { RepoReviewModal } from 'repo-review-ui';
+import { RepoReviewModal, RepoCommentModal } from 'repo-review-ui';
 import { FlowViewerModal } from 'chem-generic-ui';
 import alt from './alt';
 import initRoutes from './routes';
@@ -92,6 +92,16 @@ class App extends Component {
     this.setState({ showReviewModal: false });
   }
 
+  handleCommentUpdate(elementId, elementType, field, commentInput, origInfo) {
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = commentInput;
+    cinfo[field].origInfo = origInfo;
+    ReviewActions.updateComment(elementId, elementType, cinfo);
+  }
+
   handleReviewUpdate(e, col, rr) {
     const { review } = this.state;
     const checklist = rr.checklist || {};
@@ -166,22 +176,49 @@ class App extends Component {
 
   renderReviewModal() {
     const { showReviewModal, review_info, review, currentElement, elementType, btnAction } = this.state;
-    const rrr = {};
-    rrr.review_info = review_info;
-    rrr.review = review;
-    rrr.btnAction = btnAction;
-    rrr.elementType = elementType;
-    rrr.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
+    const obj = {};
+    obj.review_info = review_info;
+    obj.review = review;
+    obj.btnAction = btnAction;
+    obj.elementType = elementType;
+    obj.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
     return (
       <RepoReviewModal
         show={showReviewModal}
-        data={rrr}
+        data={obj}
         onSubmit={this.handleSubmitReview}
         onUpdate={this.handleReviewUpdate}
         onHide={() => this.setState({ showReviewModal: false })}
       />
     );
   }
+
+
+  renderCommentModal() {
+    const { showCommentModal, review_info, review, currentElement, elementType, btnAction, field, orgInfo } = this.state;
+    const obj = {};
+    obj['review_info'] = review_info;
+    obj['field'] = field;
+    obj['orgInfo'] = orgInfo;
+    obj['review'] = review;
+    obj['btnAction'] = btnAction;
+    obj['elementType'] = elementType;
+    if (elementType === 'sample') {
+      obj['elementId'] = currentElement?.sample?.id;
+    } else {
+      obj['elementId'] = currentElement?.reaction?.id;
+    }
+
+    return (
+      <RepoCommentModal
+        show={showCommentModal}
+        data={obj}
+        onUpdate={this.handleCommentUpdate}
+        onHide={() => this.setState({ showCommentModal: false })}
+      />
+    );
+  }
+
   render() {
     const { showCollectionTree, showGenericWorkflow, propGenericWorkflow } = this.state;
     return (
@@ -207,6 +244,7 @@ class App extends Component {
         <InboxModal showCollectionTree={showCollectionTree} />
         <Calendar />
         {this.renderReviewModal()}
+        {this.renderCommentModal()}
       </Grid>
     );
   }
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 1f0db4aaf..62d764698 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -300,6 +300,9 @@ class PublicActions {
   handleReviewModal(show) {
     return show;
   }
+  handleCommentModal(show) {
+    return show;
+  }
 
 
   fetchBasedOnSearchSelectionAndCollection(params) {
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
index 19813721e..694590191 100644
--- a/app/packs/src/components/actions/ReviewActions.js
+++ b/app/packs/src/components/actions/ReviewActions.js
@@ -6,7 +6,9 @@ class ReviewActions {
   handleReviewModal(show, action) {
     return { show, action };
   }
-
+  handleCommentModal(show, action, field, orgInfo) {
+    return { show, action, field, orgInfo };
+  }
   updateReview(review) {
     return review;
   }
diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
index b515932ad..8dd0d1c39 100644
--- a/app/packs/src/components/chemrepo/PublicSample.js
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -28,6 +28,10 @@ const PublicSample = (_props) => {
     ? sample.literatures.map(lit => literatureContent(lit, true)).join('')
     : '';
 
+  const referencesPhysicalProp = canComment && (sample.melting_point || sample.boiling_point)
+  ? `Melting point:[${getFormattedRange(sample.melting_point)}]; Boiling point:[${getFormattedRange(sample.boiling_point)}]`
+  : '';
+
   const reactionLink = sample.reaction_ids?.length > 0 ? (
     <>
       &nbsp;
@@ -77,6 +81,7 @@ const PublicSample = (_props) => {
       <br />
       <div>
         <b>Physical Properties:</b>
+        <CommentBtn {..._props} field="Physical Properties" orgInfo={referencesPhysicalProp} onShow={handleCommentBtn} />
         <div>Melting point: {getFormattedRange(sample.melting_point)}</div>
         <div>Boiling point: {getFormattedRange(sample.boiling_point)}</div>
       </div>
diff --git a/app/packs/src/components/contextActions/CreateButton.js b/app/packs/src/components/contextActions/CreateButton.js
index 2d2ff1797..41cd50eee 100644
--- a/app/packs/src/components/contextActions/CreateButton.js
+++ b/app/packs/src/components/contextActions/CreateButton.js
@@ -45,8 +45,7 @@ export default class CreateButton extends React.Component {
         sampleCount: 0,
         wellplateCount: 0
       }
-    }
-
+    };
     this.createBtn = this.createBtn.bind(this);
     this.onChange = this.onChange.bind(this);
   }
@@ -264,11 +263,11 @@ export default class CreateButton extends React.Component {
     const { layout } = this.state;
     const type = UserStore.getState().currentType;
     const elements = [
-      { name: 'sample', label: 'Sample' },
-      { name: 'reaction', label: 'Reaction' },
-      { name: 'wellplate', label: 'Wellplate' },
-      { name: 'screen', label: 'Screen' },
-      { name: 'research_plan', label: 'Research Plan' }
+      { name: 'sample', label: 'Sample', isDefault: true },
+      { name: 'reaction', label: 'Reaction', isDefault: true },
+      // { name: 'wellplate', label: 'Wellplate', isDefault: true },
+      // { name: 'screen', label: 'Screen', isDefault: true },
+      { name: 'research_plan', label: 'Research Plan', isDefault: true }
     ];
     let genericEls = [];
     const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
@@ -294,15 +293,10 @@ export default class CreateButton extends React.Component {
           disabled={isDisabled}
           onClick={() => this.createElementOfType(type)}
         >
-          {this.createWellplateModal()}
-
-          <MenuItem id="create-sample-button" onSelect={() => this.createElementOfType('sample')}>Create Sample</MenuItem>
-          <MenuItem id="create-reaction-button" onSelect={() => this.createElementOfType('reaction')}>Create Reaction</MenuItem>
-          {/* <MenuItem onSelect={() => this.createElementOfType('wellplate')}>Create Wellplate</MenuItem>
-          <MenuItem onSelect={() => this.createElementOfType('screen')}>Create Screen</MenuItem>
-          <MenuItem onSelect={() => this.createElementOfType('research_plan')}>Create Research Plan</MenuItem>
-          <MenuItem divider />
-          <MenuItem onSelect={() => this.createWellplateFromSamples()}>Create Wellplate from Samples</MenuItem>
+          {/* {this.createWellplateModal()} */}
+          {itemTables}
+          {/* <MenuItem divider /> */}
+          {/* <MenuItem onSelect={() => this.createWellplateFromSamples()}>Create Wellplate from Samples</MenuItem>
           <MenuItem onSelect={() => this.createScreenFromWellplates()}>Create Screen from Wellplates</MenuItem> */}
           <MenuItem divider />
           <MenuItem onSelect={() => this.copySample()} disabled={this.isCopySampleDisabled()}>Copy Sample</MenuItem>
@@ -311,12 +305,12 @@ export default class CreateButton extends React.Component {
             disabled={this.noSampleSelected() || this.isAllCollection()}>
             Split Sample
           </MenuItem>
-          <MenuItem
+          {/* <MenuItem
             onSelect={() => this.splitSelectionAsSubwellplates()}
             disabled={this.noWellplateSelected() || this.isAllCollection()}
           >
             Split Wellplate
-          </MenuItem>
+          </MenuItem> */}
         </SplitButton>
       </div>
     )
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 92f078690..b68728aa0 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -27,6 +27,7 @@ class PublicStore {
     this.howtos = [];
     // this.bundles = [];
     this.showReviewModal = false;
+    this.showCommendModal = false;
     this.reviewData = {};
 
     this.bindListeners({
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
index 9780e9e63..9f64566af 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -7,8 +7,11 @@ import EmbargoActions from '../actions/EmbargoActions';
 class ReviewStore {
   constructor() {
     this.showReviewModal = false;
+    this.showCommendModal = false;
     this.reviewData = {};
     this.btnAction = '';
+    this.field = '';
+    this.orgInfo = '';
     //this.bundles = [];
     this.selectType;
     this.selectState;
@@ -20,6 +23,7 @@ class ReviewStore {
 
     this.bindListeners({
       handleReviewModal: ReviewActions.handleReviewModal,
+      handleCommentModal: ReviewActions.handleCommentModal,
       handleDisplayReviewReaction: ReviewActions.displayReviewReaction,
       handleDisplayReviewSample: ReviewActions.displayReviewSample,
       handelReviewPublish: ReviewActions.reviewPublish,
@@ -35,7 +39,7 @@ class ReviewStore {
 
   handleClose({ deleteEl }) {
     this.setState({
-      currentElement: null
+      currentElement: null, showReviewModal: false, showCommentModal: false
     });
   }
 
@@ -89,21 +93,25 @@ class ReviewStore {
       elements, page, perPage, pages, selectType, selectState, searchType, searchValue
     } = results;
     this.setState({
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue, showReviewModal: false
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue, showReviewModal: false, showCommentModal: false
     });
   }
 
   handleReviewModal(result) {
-    this.setState({ showReviewModal: result.show, btnAction: result.action });
+    this.setState({ showReviewModal: result.show, showCommentModal: false, btnAction: result.action });
+  }
+
+  handleCommentModal(result) {
+    this.setState({ showCommentModal: result.show, showReviewModal: false, btnAction: result.action, field: result.field, orgInfo: result.orgInfo });
   }
 
   handelUpdateComment(result) {
-    this.setState({ review: result.review, showReviewModal: false });
+    this.setState({ review: result.review, showReviewModal: false, showCommentModal: false });
   }
 
   handelReviewPublish(results) {
     // const { history, checklist, reviewComments } = results.review;
-    this.setState({ review: results.review, showReviewModal: false, review_info: results.review_info });
+    this.setState({ review: results.review, showReviewModal: false, showCommentModal: false,  review_info: results.review_info });
     ReviewActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
   }
 
@@ -119,6 +127,7 @@ class ReviewStore {
         reaction: result?.element?.reaction || {},
         currentElement: result?.element || {},
         showReviewModal: false,
+        showCommentModal: false,
         review: publication?.review || {},
         review_info: result?.element?.review_info || {},
       });
@@ -138,6 +147,7 @@ class ReviewStore {
         queryId: result.id || 0,
         currentElement: result?.element || {},
         showReviewModal: false,
+        showCommentModal: false,
         review: publication?.review || {},
         review_info: result?.element?.review_info || {},
       });
diff --git a/app/packs/src/fetchers/UsersFetcher.js b/app/packs/src/fetchers/UsersFetcher.js
index e14a9e181..98c088af8 100644
--- a/app/packs/src/fetchers/UsersFetcher.js
+++ b/app/packs/src/fetchers/UsersFetcher.js
@@ -51,7 +51,7 @@ export default class UsersFetcher {
       credentials: 'same-origin'
     })
       .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
+        // console.log(errorMessage);
       });
 
     return promise;
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 5fec07ed3..732d3d6dc 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { Panel, Row, Col, Button, Jumbotron } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { head, filter } from 'lodash';
-import { RepoCommentModal } from 'repo-review-ui';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AuthorList,
@@ -57,7 +56,7 @@ export default class RepoReactionDetails extends Component {
       showRA: {},
       // showReviewModal: false,
       // btnAction: '',
-      showCommentModal: false,
+      // showCommentModal: false,
       commentField: '',
       originInfo: '',
     };
@@ -70,9 +69,7 @@ export default class RepoReactionDetails extends Component {
     this.toggleRA = this.toggleRA.bind(this);
     this.handleToggle = this.handleToggle.bind(this);
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
 
   toggleScheme() {
@@ -129,39 +126,8 @@ export default class RepoReactionDetails extends Component {
   handleReviewBtn(showReviewModal, btnAction) {
     ReviewActions.handleReviewModal(showReviewModal, btnAction);
   }
-
-  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
-    LoadingActions.start();
-    ReviewActions.reviewPublish(
-      elementId,
-      'reaction',
-      comment,
-      action,
-      checklist,
-      reviewComments
-    );
-    // this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo,
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof cinfo[field] === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-
-    ReviewActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
+  handleCommentBtn(showCommentModal, commentField, originInfo) {
+    ReviewActions.handleCommentModal(showCommentModal, 'Comment', commentField, originInfo);
   }
 
   updateRepoXvial() {
@@ -742,23 +708,6 @@ export default class RepoReactionDetails extends Component {
                 )}
           </Jumbotron>
         </div>
-        {canComment ? (
-          <div>
-            <RepoCommentModal
-              show={this.state.showCommentModal}
-              elementId={reaction.id}
-              elementType="reaction"
-              field={this.state.commentField}
-              orgInfo={this.state.originInfo}
-              review={this.props.review}
-              review_info={review_info}
-              onUpdate={this.handleSubmitComment}
-              onHide={() => this.setState({ showCommentModal: false })}
-            />
-          </div>
-        ) : (
-          ''
-        )}
       </div>
     );
   }
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index 5e9c7e47a..ce895a05b 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -3,7 +3,7 @@ import SVG from 'react-inlinesvg';
 import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import Select from 'react-select';
 import { filter } from 'lodash';
-import { RepoReviewModal } from 'repo-review-ui';
+import { RepoReviewModal, RepoCommentModal } from 'repo-review-ui';
 import RepoReviewDetails from './RepoReviewDetails';
 import ReviewActions from '../components/actions/ReviewActions';
 import EmbargoActions from '../components/actions/EmbargoActions';
@@ -74,6 +74,7 @@ export default class RepoReview extends Component {
       elements: [],
       currentElement: null,
       showReviewModal: false,
+      showCommentModal: false,
       reviewData: {},
       selectType: 'All',
       searchType: 'All',
@@ -82,6 +83,8 @@ export default class RepoReview extends Component {
       selectState: defaultState,
       bundles: [],
       btnAction: '',
+      field: '',
+      orgInfo: '',
       showEmbargoModal: false,
       selectedElement: null,
       selectedEmbargo: null
@@ -95,6 +98,7 @@ export default class RepoReview extends Component {
     this.onEmbargoBtnSave = this.onEmbargoBtnSave.bind(this);
     this.handleSubmitReview = this.handleSubmitReview.bind(this);
     this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+    this.handleCommentUpdate = this.handleCommentUpdate.bind(this);
   }
 
   componentDidMount() {
@@ -126,6 +130,17 @@ export default class RepoReview extends Component {
     ReviewActions.updateReview(review);
   }
 
+  handleCommentUpdate(elementId, elementType, field, commentInput, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = commentInput;
+    cinfo[field].origInfo = origInfo;
+    ReviewActions.updateComment(elementId, elementType, cinfo);
+  }
+
   onPerPageChange(e) {
     const {
       page, selectType, selectState, searchType, searchValue
@@ -443,21 +458,21 @@ export default class RepoReview extends Component {
 
   renderReviewModal() {
     const { showReviewModal, reviewData, review_info, review, currentElement, elementType, btnAction } = this.state;
-    const rrr = {};
-    rrr['review_info'] = review_info;
-    rrr['review'] = review;
-    rrr['btnAction'] = btnAction;
-    rrr['elementType'] = elementType;
+    const obj = {};
+    obj['review_info'] = review_info;
+    obj['review'] = review;
+    obj['btnAction'] = btnAction;
+    obj['elementType'] = elementType;
     if (elementType === 'sample') {
-      rrr['elementId'] = currentElement?.sample?.id;
+      obj['elementId'] = currentElement?.sample?.id;
     } else {
-      rrr['elementId'] = currentElement?.reaction?.id;
+      obj['elementId'] = currentElement?.reaction?.id;
     }
 
     return (
       <RepoReviewModal
         show={showReviewModal}
-        data={rrr}
+        data={obj}
         onSubmit={this.handleSubmitReview}
         onUpdate={this.handleReviewUpdate}
         onHide={() => this.setState({ showReviewModal: false })}
@@ -465,6 +480,31 @@ export default class RepoReview extends Component {
     );
   }
 
+  renderCommentModal() {
+    const { showCommentModal, review_info, review, currentElement, elementType, btnAction, field, orgInfo } = this.state;
+    const obj = {};
+    obj['review_info'] = review_info;
+    obj['field'] = field;
+    obj['orgInfo'] = orgInfo;
+    obj['review'] = review;
+    obj['btnAction'] = btnAction;
+    obj['elementType'] = elementType;
+    if (elementType === 'sample') {
+      obj['elementId'] = currentElement?.sample?.id;
+    } else {
+      obj['elementId'] = currentElement?.reaction?.id;
+    }
+
+    return (
+      <RepoCommentModal
+        show={showCommentModal}
+        data={obj}
+        onUpdate={this.handleCommentUpdate}
+        onHide={() => this.setState({ showCommentModal: false })}
+      />
+    );
+  }
+
   render() {
     const { elements, currentElement } = this.state;
     const { currentUser } = UserStore.getState();
@@ -508,6 +548,7 @@ export default class RepoReview extends Component {
           </Col>
         </Row>
         {this.renderReviewModal()}
+        {this.renderCommentModal()}
       </div>
     );
   }
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 7a28e6c3d..36a3fab8e 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Panel } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import { RepoCommentModal } from 'repo-review-ui';
 import {
   ClosePanel,
   MoleculeInfo,
@@ -21,40 +20,25 @@ export default class RepoSampleDetails extends Component {
       originInfo: '',
     };
     this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
     this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    // this.handleSubmitComment = this.handleSubmitComment.bind(this);
   }
 
   handleReviewBtn(showReviewModal, btnAction) {
     ReviewActions.handleReviewModal(showReviewModal, btnAction);
   }
 
+//  this.handleCommentBtn(this.state.showCommentModal, this.state.commentField, this.state.originInfo)}
+
+  handleCommentBtn(showCommentModal, commentField, originInfo) {
+    ReviewActions.handleCommentModal(showCommentModal, 'Comment', commentField, originInfo);
+  }
   handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
     LoadingActions.start();
     ReviewActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
-    // this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
   }
 
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-    ReviewActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
 
   render() {
     const {
@@ -172,7 +156,7 @@ export default class RepoSampleDetails extends Component {
           <div>
             {details}
           </div>
-          {
+          {/* {
             canComment ?
               <div>
                 <RepoCommentModal
@@ -187,7 +171,7 @@ export default class RepoSampleDetails extends Component {
                   onHide={() => this.setState({ showCommentModal: false })}
                 />
               </div> : ''
-          }
+          } */}
 
         </Panel.Body>
       </Panel>
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index e2577a51d..e282527da 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -201,6 +201,7 @@ def fetch_reactions(collection)
                        'sample_id' => 'Sample',
                      })
         end
+
         segment, @attachments = Labimotion::Export.fetch_segments(reaction, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
diff --git a/package.json b/package.json
index a70e76742..7b8bf8243 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.10",
+    "repo-review-ui": "^0.0.11",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",

From 8c3c2e8fc84ef1e1f2864f83311eb9c435704887 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Thu, 17 Aug 2023 10:21:40 +0200
Subject: [PATCH 175/258] labimotion hub list

---
 app/packs/src/components/fetchers/GenericSgsFetcher.js | 2 +-
 app/packs/src/libHome/RepoGenericHub.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/fetchers/GenericSgsFetcher.js b/app/packs/src/components/fetchers/GenericSgsFetcher.js
index 956eb81a9..2bb6496ac 100644
--- a/app/packs/src/components/fetchers/GenericSgsFetcher.js
+++ b/app/packs/src/components/fetchers/GenericSgsFetcher.js
@@ -6,7 +6,7 @@ export default class GenericSgsFetcher extends GenericBaseFetcher {
   static execData(params, path) { return super.execData(params, `segments/${path}`); }
 
   static fetchKlassOpen() {
-    return this.open('/list?klass=Segment', 'GET');
+    return this.open('/list?klass=SegmentKlass', 'GET');
   }
 
   static createSegmentKlass(params) {
diff --git a/app/packs/src/libHome/RepoGenericHub.js b/app/packs/src/libHome/RepoGenericHub.js
index d13e3fd98..9ed383ff2 100644
--- a/app/packs/src/libHome/RepoGenericHub.js
+++ b/app/packs/src/libHome/RepoGenericHub.js
@@ -147,7 +147,7 @@ const RepoGenericHub = () => {
 
   const clickMenu = (e, type) => {
     e.stopPropagation();
-    GenericBaseFetcher.open(`/list?klass=${capitalizeFirstLetter(type)}&with_props=true`, 'GET')
+    GenericBaseFetcher.open(`/list?klass=${capitalizeFirstLetter(type)}Klass&with_props=true`, 'GET')
       .then((result) => {
         setState({ ...state, menuSelected: type, gridData: result.list });
       })

From 9eb37306d6979d16d7bf10daf15cddb646eae754 Mon Sep 17 00:00:00 2001
From: Pei-Chi Huang <pei-chi.huang@kit.edu>
Date: Tue, 29 Aug 2023 15:14:17 +0000
Subject: [PATCH 176/258] Resolve "designer versioning"

---
 .../src/components/CollectionTabsHelper.js    |   60 +
 .../src/components/generic/FlowViewerBtn.js   |   16 -
 .../components/generic/SpectraEditorBtn.js    |   71 --
 .../navigation/search/AutoCompleteInput.js    |    2 +-
 app/packs/src/components/utils/textHelper.js  |    8 +
 app/packs/src/generic/GenericAdminNav.js      |   49 +-
 app/packs/src/generic/GenericDatasetsAdmin.js |  738 +++---------
 app/packs/src/generic/GenericElementsAdmin.js | 1004 +++++------------
 app/packs/src/generic/GenericSegmentsAdmin.js |  948 ++++------------
 app/packs/src/generic/Preview.js              |  168 ---
 app/packs/src/generic/Utils.js                |  203 ++--
 app/packs/src/libHome/Home.js                 |   12 +-
 app/packs/src/libHome/RepoGenericHub.js       |   14 +-
 app/packs/src/libHome/RepoGenericHubDesc.js   |    3 +
 app/packs/src/libHome/RepoPubl.js             |   11 +-
 .../src/stores/alt/stores/CollectionStore.js  |    2 +-
 app/packs/src/utilities/ElementUtils.js       |    3 +-
 config/profile_default.yml                    |   65 +-
 .../20230714100002_add_generic_updated_by.rb  |   46 -
 db/migrate/20230829100000_create_hub_logs.rb  |   18 +
 db/schema.rb                                  |   31 +-
 package.json                                  |    2 +-
 yarn.lock                                     |  101 ++
 23 files changed, 1047 insertions(+), 2528 deletions(-)
 create mode 100644 app/packs/src/components/CollectionTabsHelper.js
 delete mode 100644 app/packs/src/components/generic/FlowViewerBtn.js
 delete mode 100644 app/packs/src/components/generic/SpectraEditorBtn.js
 create mode 100644 app/packs/src/components/utils/textHelper.js
 delete mode 100644 app/packs/src/generic/Preview.js
 delete mode 100644 db/migrate/20230714100002_add_generic_updated_by.rb
 create mode 100644 db/migrate/20230829100000_create_hub_logs.rb

diff --git a/app/packs/src/components/CollectionTabsHelper.js b/app/packs/src/components/CollectionTabsHelper.js
new file mode 100644
index 000000000..83e623899
--- /dev/null
+++ b/app/packs/src/components/CollectionTabsHelper.js
@@ -0,0 +1,60 @@
+import Immutable from 'immutable';
+import { getElementSegments } from './utils/ElementUtils';
+
+const getVisibilityList = (layout, availableTabs, addInventoryTab) => {
+  const layoutKeys = Object.keys(layout);
+
+  if (addInventoryTab) {
+    layout.inventory = layoutKeys.length + 1;
+  }
+  const enabled = availableTabs.filter(val => layoutKeys.includes(val));
+  const leftover = availableTabs.filter(val => !layoutKeys.includes(val));
+  const visible = [];
+  let hidden = [];
+
+  enabled.forEach((key) => {
+    const order = layout[key];
+    if (order < 0) { hidden[Math.abs(order)] = key; }
+    if (order > 0) { visible[order] = key; }
+  });
+
+  leftover.forEach(key => hidden.push(key));
+
+  let first = null;
+  if (visible.length === 0) {
+    first = hidden.filter(n => n !== undefined)[0];
+    if (first) {
+      visible.push(first);
+    }
+  }
+  hidden = hidden.filter(n => n);
+  if (hidden.length === 0) {
+    hidden.push('hidden');
+  }
+  return {
+    visible: Immutable.List(visible.filter(n => n !== undefined)),
+    hidden: Immutable.List(hidden.filter(n => (n !== undefined && n !== first)))
+  };
+};
+
+const getArrayFromLayout = (layout, element, addInventoryTab, availableTabs = null ) => {
+  let layoutKeys = Object.keys(layout);
+  let segmentAvailableTabs = getElementSegments(element, layoutKeys);
+  availableTabs = [...availableTabs, ...segmentAvailableTabs];
+  return getVisibilityList(layout, availableTabs, addInventoryTab);
+};
+
+const filterTabLayout = (layoutState) => {
+  const { visible, hidden } = layoutState;
+  const layout = {};
+
+  visible.forEach((value, index) => {
+    layout[value] = (index + 1);
+  });
+  hidden.filter(val => val !== 'hidden').forEach((value, index) => {
+    layout[value] = (-index - 1);
+  });
+  return layout;
+};
+
+export { getArrayFromLayout, filterTabLayout };
diff --git a/app/packs/src/components/generic/FlowViewerBtn.js b/app/packs/src/components/generic/FlowViewerBtn.js
deleted file mode 100644
index d5745d542..000000000
--- a/app/packs/src/components/generic/FlowViewerBtn.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { renderFlowModal } from '../../generic/Utils';
-
-const FlowViewerBtn = props => (
-  <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()}>click to view defined workflow</Tooltip>}>
-    <Button onClick={() => renderFlowModal(props.generic, true)} bsSize="xsmall" bsStyle="primary"><i className="fa fa-sitemap" aria-hidden="true" />{' '}Workflow</Button>
-  </OverlayTrigger>
-);
-
-FlowViewerBtn.propTypes = { generic: PropTypes.object.isRequired };
-
-export default FlowViewerBtn;
diff --git a/app/packs/src/components/generic/SpectraEditorBtn.js b/app/packs/src/components/generic/SpectraEditorBtn.js
deleted file mode 100644
index 93e0e1cf7..000000000
--- a/app/packs/src/components/generic/SpectraEditorBtn.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { Tooltip, Button, OverlayTrigger, SplitButton, ButtonGroup, MenuItem } from 'react-bootstrap';
-
-const SpectraEditorBtn = ({
-  element, spcInfo, hasJcamp, hasChemSpectra,
-  toggleSpectraModal, confirmRegenerate,
-}) => (
-  <OverlayTrigger
-    placement="bottom"
-    delayShow={500}
-    overlay={<Tooltip id="spectra">Spectra Editor {spcInfo.length > 0 ? ': Reprocess' : ''}</Tooltip>}
-  >{spcInfo.length > 0 ? (
-    <ButtonGroup className="button-right">
-      <SplitButton
-        id="spectra-editor-split-button"
-        pullRight
-        bsStyle="info"
-        bsSize="xsmall"
-        title={<i className="fa fa-area-chart" />}
-        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-        onClick={toggleSpectraModal}
-        disabled={!(spcInfo.length > 0) || !hasChemSpectra}
-      >
-        <MenuItem
-          id="regenerate-spectra"
-          key={uuid.v4()}
-          onSelect={(eventKey, event) => {
-            event.stopPropagation();
-            confirmRegenerate(event);
-          }}
-          disabled={!hasJcamp || !element.can_update}
-        >
-          <i className="fa fa-refresh" aria-hidden="true" /> Reprocess
-        </MenuItem>
-      </SplitButton>
-    </ButtonGroup>
-  ) : (
-    <Button
-      bsStyle="warning"
-      bsSize="xsmall"
-      className="button-right"
-      onClick={confirmRegenerate}
-      disabled={false}
-    >
-      <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
-    </Button>
-    )}
-  </OverlayTrigger>
-);
-
-SpectraEditorBtn.propTypes = {
-  element: PropTypes.object,
-  hasJcamp: PropTypes.bool,
-  spcInfo: PropTypes.array,
-  hasChemSpectra: PropTypes.bool,
-  toggleSpectraModal: PropTypes.func.isRequired,
-  confirmRegenerate: PropTypes.func.isRequired,
-};
-
-SpectraEditorBtn.defaultProps = {
-  hasJcamp: false,
-  spcInfo: [],
-  element: {},
-  hasChemSpectra: false,
-};
-
-export default SpectraEditorBtn;
diff --git a/app/packs/src/components/navigation/search/AutoCompleteInput.js b/app/packs/src/components/navigation/search/AutoCompleteInput.js
index 390802e6a..455bcb4a9 100644
--- a/app/packs/src/components/navigation/search/AutoCompleteInput.js
+++ b/app/packs/src/components/navigation/search/AutoCompleteInput.js
@@ -129,7 +129,7 @@ export default class AutoCompleteInput extends React.Component {
     let debounced = debounce(this.props.suggestions, 200)
     debounced(value).then(result => {
       let newState = {}
-      if(result.length > 0) {
+      if(result?.length > 0) {
         newState.suggestions = result
         newState.showSuggestions = show
       } else {
diff --git a/app/packs/src/components/utils/textHelper.js b/app/packs/src/components/utils/textHelper.js
new file mode 100644
index 000000000..990c7d4c6
--- /dev/null
+++ b/app/packs/src/components/utils/textHelper.js
@@ -0,0 +1,8 @@
+// replace _ with space and capitalize first letter of each word
+const capitalizeWords = (string) => (string || '')
+  .replace(/_+/, ' ')
+  .replace(/\s+/g, ' ')
+  .trim()
+  .replace(/\b\w/g, (m) => m.toUpperCase());
+
+export default capitalizeWords;
diff --git a/app/packs/src/generic/GenericAdminNav.js b/app/packs/src/generic/GenericAdminNav.js
index 8d9db805c..2f70d30b4 100644
--- a/app/packs/src/generic/GenericAdminNav.js
+++ b/app/packs/src/generic/GenericAdminNav.js
@@ -2,38 +2,69 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Navbar } from 'react-bootstrap';
 
-const navs = (text, type) => ((text === type) ?
-  <Navbar.Text key={type}><b><a href={`/${type.split(/(?=[A-Z])/).join('_').toLowerCase()}_admin`}>{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a></b></Navbar.Text> :
-  <Navbar.Text key={type}><a href={`/${type.split(/(?=[A-Z])/).join('_').toLowerCase()}_admin`}>{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a></Navbar.Text>);
+const navs = (text, type) =>
+  text === type ? (
+    <Navbar.Text key={type}>
+      <b>
+        <a
+          href={`/${type
+            .split(/(?=[A-Z])/)
+            .join('_')
+            .toLowerCase()}_admin`}
+        >{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a>
+      </b>
+    </Navbar.Text>
+  ) : (
+    <Navbar.Text key={type}>
+      <a
+        href={`/${type
+          .split(/(?=[A-Z])/)
+          .join('_')
+          .toLowerCase()}_admin`}
+      >{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a>
+    </Navbar.Text>
+  );
 
-const GenericAdminNav = (props) => {
+const GenericAdminNav = props => {
   const { userName, text } = props;
   return (
     <Navbar fixedTop>
       <Navbar.Header>
-        <Navbar.Brand><a href="/mydb">Back to MyDB</a></Navbar.Brand>
+        <Navbar.Brand>
+          <a href="/mydb">Back to MyDB</a>
+        </Navbar.Brand>
         <Navbar.Toggle />
       </Navbar.Header>
       <Navbar.Collapse>
-        {['GenericElements', 'GenericSegments', 'GenericDatasets'].map(e => navs(text, e))}
+        {['GenericElements', 'GenericSegments', 'GenericDatasets'].map(e =>
+          navs(text, e)
+        )}
         <Navbar.Text pullRight>Login as: {userName}</Navbar.Text>
       </Navbar.Collapse>
     </Navbar>
   );
 };
 
-GenericAdminNav.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };
+GenericAdminNav.propTypes = {
+  userName: PropTypes.string,
+  text: PropTypes.string.isRequired,
+};
 GenericAdminNav.defaultProps = { userName: '' };
 
 const GenericAdminUnauth = props => (
   <div style={{ width: '90vw', margin: 'auto' }}>
     <GenericAdminNav {...props} />
     <hr />
-    <div style={{ marginTop: '60px', textAlign: 'center' }}><h3>Unauthorized!</h3></div>
+    <div style={{ marginTop: '60px', textAlign: 'center' }}>
+      <h3>Unauthorized!</h3>
+    </div>
   </div>
 );
 
-GenericAdminUnauth.propTypes = { userName: PropTypes.string, text: PropTypes.string.isRequired };
+GenericAdminUnauth.propTypes = {
+  userName: PropTypes.string,
+  text: PropTypes.string.isRequired,
+};
 GenericAdminUnauth.defaultProps = { userName: '' };
 
 export { GenericAdminNav, GenericAdminUnauth };
diff --git a/app/packs/src/generic/GenericDatasetsAdmin.js b/app/packs/src/generic/GenericDatasetsAdmin.js
index e5e63baae..0527a3270 100644
--- a/app/packs/src/generic/GenericDatasetsAdmin.js
+++ b/app/packs/src/generic/GenericDatasetsAdmin.js
@@ -1,671 +1,218 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import { GenGridDs, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, LayerAttrEditModal, LayerAttrNewModal, GenericDummy, reUnit, UploadModal, si } from 'chem-generic-ui';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { orderBy } from 'lodash';
+import { Constants, Designer } from 'chem-generic-ui';
 import LoadingModal from '../components/common/LoadingModal';
 import Notifications from '../components/Notifications';
 import GenericDSsFetcher from '../components/fetchers/GenericDSsFetcher';
 import UsersFetcher from '../components/fetchers/UsersFetcher';
 import LoadingActions from '../components/actions/LoadingActions';
-import Preview from './Preview';
-import { validateLayerInput, validateSelectList, notification } from './Utils';
+import { notification, submit } from './Utils';
 import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
 
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
 export default class GenericDatasetsAdmin extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       elements: [],
-      element: {},
-      newFieldKey: '',
-      layerKey: '',
-      selectOptions: [],
-      unitsSystem: si,
       show: { tab: '', modal: '' },
-      propTabKey: 1,
       revisions: [],
-      user: {}
+      repoData: [],
+      user: {},
     };
-
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.updSubField = this.updSubField.bind(this);
-    this.updLayerSubField = this.updLayerSubField.bind(this);
     this.handleShowState = this.handleShowState.bind(this);
     this.closeModal = this.closeModal.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.handleDeActive = this.handleDeActive.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
+    this.handleActivateKlass = this.handleActivateKlass.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
     this.delRevision = this.delRevision.bind(this);
     this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.onUpdElement = this.onUpdElement.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+    this.handleCreateRepo = this.handleCreateRepo.bind(this);
+    this.handleShowRepo = this.handleShowRepo.bind(this);
   }
 
   componentDidMount() {
     this.fetchElements();
-    UsersFetcher.fetchCurrentUser().then((result) => {
-      if (!result.error) {
-        this.setState({ user: result.user });
-      }
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onUpdElement(generic) {
-    this.setState({ element: generic });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
-  }
-
-  onFieldSubFieldChange(lk, f, cb) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobj = (fields || []).find(o => o.field === f.field);
-      if (Object.keys(fobj).length > 0) {
-        const idx = (fields || []).findIndex(o => o.field === f.field);
-        fields.splice(idx, 1, f);
-        element.properties_template.layers[lk].fields = fields;
-        this.setState({ element }, cb);
-      }
-    }
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-    let fobj = null;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobjs = filter(fields, o => o.field === fe);
-      if (fobjs && fobjs.length > 0) {
-        fobj = fobjs[0];
-      }
-    }
-
-    if (layer != null && fobj != null) {
-      switch (fc) {
-        case 'required':
-        case 'hasOwnRow':
-        case 'canAdjust':
-          fobj[`${fc}`] = !orig;
-          break;
-        default:
-          fobj[`${fc}`] = value;
-          break;
-      }
-      const idx = findIndex(fields, o => o.field === fe);
-      fields.splice(idx, 1, fobj);
-      element.properties_template.layers[lk].fields = fields;
-      this.setState({ element });
-    }
+    UsersFetcher.fetchCurrentUser()
+      .then(result => {
+        if (!result.error) {
+          this.setState({ user: result.user });
+        }
+      })
+      .catch(errorMessage => {
+        console.log(errorMessage);
+      });
   }
 
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
+  getShowState(att, val) {
+    return { ...this.state.show, [att]: val };
   }
 
-  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
-
   fetchElements() {
-    GenericDSsFetcher.listDatasetKlass()
-      .then((result) => { this.setState({ elements: result.klass }); });
+    GenericDSsFetcher.listDatasetKlass().then(result => {
+      this.setState({ elements: result.klass });
+    });
   }
 
-  handleDeActive(e) {
+  handleActivateKlass(e) {
     const act = e.is_active ? 'De-activate' : 'Activate';
-    GenericDSsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'DatasetKlass' })
-      .then((result) => {
+    GenericDSsFetcher.deActivateKlass({
+      id: e.id,
+      is_active: !e.is_active,
+      klass: 'DatasetKlass',
+    })
+      .then(result => {
         if (result.error) {
-          notification({ title: `${act} Dataset fail`, lvl: 'error', msg: result.error });
+          notification({
+            title: `${act} Dataset fail`,
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: `${act} Dataset successfully`, lvl: 'info', msg: `${e.label} is ${act.toLowerCase()} now` });
-          this.fetchElements();
+          notification({
+            title: `${act} Dataset successfully`,
+            lvl: 'info',
+            msg: `${e.label} is ${act.toLowerCase()} now`,
+          });
+          this.closeModal(this.fetchElements);
+          // this.fetchElements();
         }
-      }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  updSubField(layerKey, field, cb) {
-    this.onFieldSubFieldChange(layerKey, field, cb);
-  }
-
-  updLayerSubField(layerKey, layer) {
-    const { element } = this.state;
-    element.properties_template.layers[`${layerKey}`] = layer;
-    this.setState({ element });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-  editLayer(e) {
-    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
-  }
-
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name!' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
-  }
-
-  newOption(key, newOptionKey, selectOptions) {
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const { element } = this.state;
-    element.properties_template.select_options[key].options = selectOptions;
-    this.onUpdElement(element);
+      })
+      .catch(errorMessage => {
+        console.log(errorMessage);
+      });
   }
 
   handleShowState(att, val, cb = () => {}) {
     this.setState({ show: this.getShowState(att, val) }, cb);
   }
-  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
 
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
-      GenericDSsFetcher.fetchKlassRevisions(element.id, 'DatasetKlass')
-        .then((result) => {
+  closeModal(cb = () => {}) {
+    this.handleShowState('modal', '', cb);
+  }
+
+  fetchRevisions(_element) {
+    const element = _element;
+    if (element?.id) {
+      GenericDSsFetcher.fetchKlassRevisions(element.id, 'DatasetKlass').then(
+        result => {
           let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          curr = Object.assign(
+            {},
+            { properties_release: curr },
+            { uuid: 'current' }
+          );
           const revisions = [].concat(curr, result.revisions);
           this.setState({ revisions });
-        });
-    }
-  }
-
-  delRevision(params) {
-    const { element } = this.state;
-    GenericDSsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'DatasetKlass' })
-      .then((response) => {
-        if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
-        } else {
-          this.fetchRevisions();
         }
-      });
-  }
-
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  handleAddSelect(selectName, newSelectOptions) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      element.properties_template.select_options = newSelectOptions;
-      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, selectOptions });
-    }
-  }
-
-  handleCreateLayer(_layer) {
-    const layer = _layer;
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
-      return;
-    }
-    layer.timeRecord = '';
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
-  }
-
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates, 'upd')) return;
-    const { element } = this.state;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    layer = { ...layer, ...updates };
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ show: this.getShowState('modal', ''), element });
-  }
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, selectOptions, show: this.getShowState('tab', 'PropModal') });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.closeModal();
-      notification({
-        title: `Upload Template for Dataset [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message
-      });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, show: this.getShowState('modal', '') });
-      console.log('element', element);
-      notification({ title: `Upload template to Dataset [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+      );
     }
   }
 
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = false;
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    sortedLayers.map((e, ix) => {
-      e.position = (ix + 1) * 10;
-      return e;
+  delRevision(params) {
+    const { id, data, uuid } = params;
+    GenericDSsFetcher.deleteKlassRevision({
+      id: id,
+      klass_id: data?.id,
+      klass: 'DatasetKlass',
+    }).then(response => {
+      if (response.error) {
+        notification({
+          title: 'Delete Revision',
+          lvl: 'error',
+          msg: response.error,
+        });
+      } else {
+        this.fetchRevisions(data);
+        notification({
+          title: `Revision [${uuid}] deleted successfully`,
+          lvl: 'info',
+          msg: 'Deleted successfully',
+        });
+      }
     });
-    element.properties_template.layers = orgLayerObject(sortedLayers);
-    element.is_release = isRelease;
-    GenericDSsFetcher.updateDatasetTemplate(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Update Dataset: [${element.label}] template fail`, lvl: 'error', msg: result.error });
-        } else {
-          if (isRelease === true) {
-            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
-          } else {
-            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved successfully' });
-          }
-          this.fetchElements();
-          this.setState({ element: result }, () => LoadingActions.stop());
-        }
-      }).catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const { options } = element.properties_template.select_options[delRoot];
-      if (options && options.length > 0) {
-        const idx = findIndex(options, o => o.key === delKey);
-        options.splice(idx, 1);
+  handleShowRepo() {
+    LoadingActions.start();
+    GenericDSsFetcher.fetchRepo().then(result => {
+      if (result.error) {
+        notification({
+          title: 'Cannot connect to Chemotion Repository',
+          lvl: 'error',
+          msg: result.error,
+        });
+        LoadingActions.stop();
+      } else {
+        this.setState(
+          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
+          () => LoadingActions.stop()
+        );
       }
-    } else if (delStr === 'Layer') {
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    }
-    this.setState({ element });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
-    } else {
-      msg = `remove ???: ${delStr}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderSelectOptions() {
-    const { element } = this.state;
-    return (
-      <SelectOptionLayer
-        generic={element}
-        fnChange={this.onUpdElement}
-        fnAddSelect={this.handleAddSelect}
-        fnAddOption={this.newOption}
-      />
-    );
-  }
 
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          genericType="Dataset"
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          select_options={selectOptions}
-          onDrop={() => {}}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onFieldSubFieldChange={this.onFieldSubFieldChange}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnCond}
-                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse><Panel.Body>{fields}</Panel.Body></Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
     });
+  }
 
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
+  handleCreateRepo(element) {
+    GenericDSsFetcher.createRepo({ identifier: element['identifier'] }).then(
+      result => {
+        this.setState({ elements: result?.klass || this.state.elements });
+      }
     );
+    this.closeModal();
   }
 
-  renderPropPanel() {
-    const {
-      element, show, revisions, propTabKey
-    } = this.state;
-    const showPropModal = show.tab === 'PropModal';
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="datasets-prop-tabs" onSelect={this.propTabSelect} style={{ width: '100%' }}>
-          <Tab eventKey={1} title="Template">
-            <Panel show={showPropModal.toString()}>
-              <Panel.Heading>
-                <b>{`Template of Dataset [${element.label}]`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Upload template" tip="Upload Dataset template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}>{this.renderProperties()}</Col>
-                  <Col sm={4}>{this.renderSelectOptions()}</Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-
-      );
+  async handleSubmit(_element, _release = 'draft') {
+    const [element, release] = [_element, _release];
+    element.release = release;
+    LoadingActions.start();
+    const result = await submit(GenericDSsFetcher, { update: Constants.GENERIC_TYPES.DATASET, element, release });
+    if (result.isSuccess) {
+      notification(result);
+      this.fetchElements();
+      this.setState({ element: result.response }, () => LoadingActions.stop());
+    } else {
+      notification(result);
     }
-    return (<div />);
+    LoadingActions.stop();
   }
 
   renderGrid() {
     const { elements } = this.state;
     const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
-    return (<GenGridDs
-      gridData={els}
-      fnCopyKlass={this.copyKlass}
-      fnDeActivateKlass={this.handleDeActive}
-      fnEditKlass={this.editKlass}
-      fnShowProp={this.handlePropShow}
-    />);
+    return (
+      <Designer
+        fnCopy={() => {}}
+        fnCreate={() => {}}
+        fnSubmit={this.handleSubmit}
+        fnActive={this.handleActivateKlass}
+        fnDerive={() => {}}
+        fnUpdate={() => {}}
+        preview={{
+          fnDelRevisions: this.delRevision,
+          fnRevisions: this.fetchRevisions,
+          revisions: this.state.revisions,
+        }}
+        genericType="Dataset"
+        gridData={els}
+      />
+    );
   }
 
   render() {
-    const { element, layerKey, user } = this.state;
+    const { user } = this.state;
     if (!user.generic_admin?.datasets) {
       return <GenericAdminUnauth userName={user.name} text="GenericDatasets" />;
     }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
-    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
 
     return (
-      <div className="generic-designer-container">
+      <div style={{ width: '90vw', margin: 'auto' }}>
         <GenericAdminNav userName={user.name} text="GenericDatasets" />
         <hr />
-        <div className="main-content">
+        <div style={{ marginTop: '60px' }}>
           <h3>Generic Datasets Designer</h3>
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
-            { this.renderGrid() }
-            { this.renderPropPanel() }
-          </div>
-          <LayerAttrNewModal
-            showModal={this.state.show.modal === 'NewLayer'}
-            fnClose={this.closeModal}
-            fnCreate={this.handleCreateLayer}
-          />
-          <LayerAttrEditModal
-            showModal={this.state.show.modal === 'EditLayer'}
-            layer={layer}
-            fnClose={this.closeModal}
-            fnUpdate={this.handleUpdateLayer}
-          />
-          <FieldCondEditModal
-            showModal={this.state.show.modal === 'FieldCond'}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.closeModal}
-          />
-          <UploadModal
-            content="Generic Datasets"
-            klass="DatasetKlass"
-            showModal={this.state.show.modal === 'Upload'}
-            fnClose={this.closeModal}
-            fnUpload={this.handleUploadTemplate}
-          />
+          {this.renderGrid()}
         </div>
         <Notifications />
         <LoadingModal />
@@ -674,8 +221,13 @@ export default class GenericDatasetsAdmin extends React.Component {
   }
 }
 
-const GenericDatasetsAdminDnD = DragDropContext(HTML5Backend)(GenericDatasetsAdmin);
 document.addEventListener('DOMContentLoaded', () => {
   const domElement = document.getElementById('GenericDatasetsAdmin');
-  if (domElement) ReactDOM.render(<GenericDatasetsAdminDnD />, domElement);
+  if (domElement)
+    ReactDOM.render(
+      <DndProvider backend={HTML5Backend}>
+        <GenericDatasetsAdmin />
+      </DndProvider>,
+      domElement
+    );
 });
diff --git a/app/packs/src/generic/GenericElementsAdmin.js b/app/packs/src/generic/GenericElementsAdmin.js
index 9c94ab1d8..4a421f8e4 100644
--- a/app/packs/src/generic/GenericElementsAdmin.js
+++ b/app/packs/src/generic/GenericElementsAdmin.js
@@ -1,40 +1,49 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-
-import { GenGridEl, GenButtonTooltip, SelectOptionLayer, ElementField, FieldCondEditModal, orgLayerObject, WorkflowModal, LayerAttrEditModal, LayerAttrNewModal, UploadModal, AttrCopyModal, AttrNewModal, AttrEditModal, GenericDummy, reUnit, si } from 'chem-generic-ui';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { orderBy } from 'lodash';
+import { Constants, Designer } from 'chem-generic-ui';
 import LoadingModal from '../components/common/LoadingModal';
 import Notifications from '../components/Notifications';
 import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
 import UsersFetcher from '../components/fetchers/UsersFetcher';
 import LoadingActions from '../components/actions/LoadingActions';
-import Preview from './Preview';
-
-import { validateLayerInput, validateSelectList, notification, validateLayerUpdation, validateLayerDeletion } from './Utils';
+import { notification, submit } from './Utils';
 import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
 
-const validateKlass = klass => (/\b[a-z]{3,5}\b/g.test(klass));
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-const validateInput = (element) => {
+const validateKlass = klass => /\b[a-z]{3,5}\b/g.test(klass);
+const validateInput = element => {
   if (element.name === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element.' });
+    notification({
+      title: `Element [${element.name}]`,
+      lvl: 'error',
+      msg: 'Please input Element.',
+    });
     return false;
   }
   if (element.klass_prefix === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Prefix.' });
+    notification({
+      title: `Element [${element.name}]`,
+      lvl: 'error',
+      msg: 'Please input Prefix.',
+    });
     return false;
   }
   if (element.label === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element Label.' });
+    notification({
+      title: `Element [${element.name}]`,
+      lvl: 'error',
+      msg: 'Please input Element Label.',
+    });
     return false;
   }
   if (element.icon_name === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Icon.' });
+    notification({
+      title: `Element [${element.name}]`,
+      lvl: 'error',
+      msg: 'Please input Icon.',
+    });
     return false;
   }
   return true;
@@ -46,826 +55,346 @@ export default class GenericElementsAdmin extends React.Component {
     this.state = {
       elements: [],
       element: {},
-      newFieldKey: '',
-      layerKey: '',
-      fieldObj: {},
-      selectOptions: [],
-      unitsSystem: si,
       show: { tab: '', modal: '' },
-      propTabKey: 1,
       revisions: [],
-      user: {}
+      repoData: [],
+      user: {},
     };
-    this.clipboard = new Clipboard('.clipboardBtn');
+
     this.fetchElements = this.fetchElements.bind(this);
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    // this.addLayer = this.addLayer.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    // this.newKlass = this.newKlass.bind(this);
-    this.editKlass = this.editKlass.bind(this);
-    this.copyKlass = this.copyKlass.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.updSubField = this.updSubField.bind(this);
-    this.updLayerSubField = this.updLayerSubField.bind(this);
     this.handleShowState = this.handleShowState.bind(this);
     this.closeModal = this.closeModal.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
     this.handleCreateKlass = this.handleCreateKlass.bind(this);
     this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
     this.handleActivateKlass = this.handleActivateKlass.bind(this);
     this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
     this.delRevision = this.delRevision.bind(this);
     this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleUploadShow = this.handleUploadShow.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-    this.saveFlow = this.saveFlow.bind(this);
-    this.onUpdElement = this.onUpdElement.bind(this);
+    this.handleCreateRepo = this.handleCreateRepo.bind(this);
+    this.handleShowRepo = this.handleShowRepo.bind(this);
   }
 
   componentDidMount() {
     this.fetchElements();
-    UsersFetcher.fetchCurrentUser().then((result) => {
-      if (!result.error) {
-        this.setState({ user: result.user });
-      }
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onUpdElement(generic) {
-    this.setState({ element: generic });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    if (!field && layer && layer.wf) {
-      notification({ title: `Layer [${lk}]`, lvl: 'warning', msg: 'Layer Restriction can not be set on workflow layer!' });
-    } else {
-      this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
-    }
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
+    UsersFetcher.fetchCurrentUser()
+      .then(result => {
+        if (!result.error) {
+          this.setState({ user: result.user });
+        }
+      })
+      .catch(errorMessage => {
+        console.log(errorMessage);
+      });
   }
 
-  onFieldSubFieldChange(lk, f, cb) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobj = (fields || []).find(o => o.field === f.field);
-      if (Object.keys(fobj).length > 0) {
-        const idx = (fields || []).findIndex(o => o.field === f.field);
-        fields.splice(idx, 1, f);
-        element.properties_template.layers[lk].fields = fields;
-        this.setState({ element }, cb);
+  handleShowRepo() {
+    LoadingActions.start();
+    GenericElsFetcher.fetchRepo().then(result => {
+      if (result.error) {
+        notification({
+          title: 'Cannot connect to Chemotion Repository',
+          lvl: 'error',
+          msg: result.error,
+        });
+        LoadingActions.stop();
+      } else {
+        this.setState(
+          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
+          () => LoadingActions.stop()
+        );
       }
-    }
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    if (typeof layer === 'undefined' || layer == null) return;
-
-    const { fields } = layer;
-
-    if (fields == null || fields.length === 0) return;
-
-    const fobj = fields.find(e => e.field === fe);
-    if (Object.keys(fobj).length === 0) return;
-
-    switch (fc) {
-      case 'required':
-      case 'hasOwnRow':
-      case 'canAdjust':
-        fobj[`${fc}`] = !orig;
-        break;
-      default:
-        fobj[`${fc}`] = value;
-        break;
-    }
-    const idx = findIndex(fields, o => o.field === fe);
-    fields.splice(idx, 1, fobj);
-    element.properties_template.layers[lk].fields = fields;
-    this.setState({ element });
-  }
-
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
-  }
-
-  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
-
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
-  }
-
-  updSubField(layerKey, field, cb) {
-    this.onFieldSubFieldChange(layerKey, field, cb);
-  }
-
-  updLayerSubField(layerKey, layer) {
-    const { element } = this.state;
-    element.properties_template.layers[`${layerKey}`] = layer;
-    this.setState({ element });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-  editLayer(e) {
-    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
-  }
-
-  newKlass() {
-    this.setState({ show: 'NewKlass' });
-  }
-
-  editKlass(element) {
-    this.setState({ show: this.getShowState('modal', 'EditKlass'), element });
-  }
-
-  copyKlass(element) {
-    this.setState({ show: this.getShowState('modal', 'CopyKlass'), element });
-  }
-
-  handleUploadShow() {
-    this.setState({ show: 'Upload' });
+    });
   }
 
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
+  handleCreateRepo(element) {
+    GenericElsFetcher.createRepo({ identifier: element['identifier'] }).then(
+      result => {
+        this.setState({ elements: result?.klass || this.state.elements });
+      }
+    );
+    this.closeModal();
   }
 
-  newOption(key, newOptionKey, selectOptions) {
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const { element } = this.state;
-    element.properties_template.select_options[key].options = selectOptions;
-    this.onUpdElement(element);
+  getShowState(att, val) {
+    return { ...this.state.show, [att]: val };
   }
 
   handleShowState(att, val, cb = () => {}) {
     this.setState({ show: this.getShowState(att, val) }, cb);
   }
-  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
 
-  handleAddSelect(selectName, newSelectOptions) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      element.properties_template.select_options = newSelectOptions;
-      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, selectOptions });
-    }
+  closeModal(cb = () => {}) {
+    this.handleShowState('modal', '', cb);
   }
 
-  handleCreateLayer(_layer) {
-    const layer = _layer;
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+  handleCreateKlass(_response) {
+    const { element, notify } = _response;
+    if (!notify.isSuccess) {
+      notification(notify);
       return;
     }
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    layer.position = (!layer.position && sortedLayers.length < 1) ?
-      100 : parseInt((sortedLayers.slice(-1)[0] || { position: 100 }).position, 10) + 10;
-    layer.timeRecord = '';
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
-  }
-
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates, 'upd')) return;
-    const { element } = this.state;
-    if (!validateLayerUpdation(element, updates)) return;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    let msg = 'The updates of this layer is kept in the workspace temporarily. Please remember to press Save when you finish the editing.';
-    layer = { ...layer, ...updates };
-    // reset cond_fields of fields is the layer is workflow
-    if (layer.wf) {
-      msg = `${msg} For a Workflow layer, the Field Restrict Setting is only applicable on its own layer.`;
-      (layer.fields || []).map((f) => {
-        const newF = f;
-        if (newF.cond_fields && newF.cond_fields.length > 0) {
-          newF.cond_fields = f.cond_fields.filter(o => o.layer === layer.key);
-          if (newF.cond_fields.length < 1) delete newF.cond_fields;
-        }
-        return newF;
-      });
-    }
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    layer.position = layer.position ?
-      parseInt(layer.position, 10) : parseInt(sortedLayers.slice(-1)[0].position, 10) + 10;
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg });
-    this.setState({ show: this.getShowState('modal', ''), element });
-  }
-
-  handleCreateKlass(element) {
+    element.is_generic = true;
     if (!validateInput(element)) return;
     if (!validateKlass(element.name)) {
-      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is invalid, please try a different one.' });
+      notification({
+        title: `Element [${element.name}]`,
+        lvl: 'error',
+        msg: 'This Element is invalid, please try a different one.',
+      });
       return;
     }
     const { elements } = this.state;
     const existKlass = elements.filter(el => el.name === element.name);
     if (existKlass.length > 0) {
-      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is already taken. Please choose another one.' });
+      notification({
+        title: `Element [${element.name}]`,
+        lvl: 'error',
+        msg: 'This Element is already taken. Please choose another one.',
+      });
       return;
     }
+    LoadingActions.start();
     GenericElsFetcher.createElementKlass(element)
-      .then((result) => {
+      .then(result => {
         if (result.error) {
-          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
+          notification({
+            title: `Element [${element.name}]`,
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Created successfully' });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: `Element [${element.name}]`,
+            lvl: 'info',
+            msg: 'Created successfully',
+          });
+          this.fetchElements();
         }
-      }).catch((errorMessage) => {
+      })
+      .catch(errorMessage => {
         console.log(errorMessage);
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
-  handleUpdateKlass(element, updates) {
-    const inputs = { ...element, ...updates };
-    if (!validateInput(inputs)) return;
+  handleUpdateKlass(_response) {
+    const { element, notify } = _response;
+    if (!notify.isSuccess) {
+      notification(notify);
+      return;
+    }
+    const inputs = element;
+    if (!validateInput(element)) return;
+    LoadingActions.start();
     GenericElsFetcher.updateElementKlass(inputs)
-      .then((result) => {
+      .then(result => {
         if (result.error) {
-          notification({ title: `Element [${inputs.name}]`, lvl: 'error', msg: result.error });
+          notification({
+            title: `Element [${inputs.name}]`,
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: `Element [${inputs.name}]`, lvl: 'info', msg: 'Updated successfully' });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: `Element [${inputs.name}]`,
+            lvl: 'info',
+            msg: 'Updated successfully',
+          });
+          this.fetchElements();
         }
-      }).catch((errorMessage) => {
+      })
+      .catch(errorMessage => {
         console.log(errorMessage);
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
   handleActivateKlass(e) {
     const act = e.is_active ? 'De-activate' : 'Activate';
-    GenericElsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'ElementKlass' })
-      .then((result) => {
+    LoadingActions.start();
+    GenericElsFetcher.deActivateKlass({
+      id: e.id,
+      is_active: !e.is_active,
+      klass: 'ElementKlass',
+    })
+      .then(result => {
         if (result.error) {
-          notification({ title: `${act} Element failed`, lvl: 'error', msg: result.error });
+          notification({
+            title: `${act} Element failed`,
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: `${act} Element [${result.name}] successfully`, lvl: 'info', msg: `Element is ${act.toLowerCase()} now` });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: `${act} Element [${result.name}] successfully`,
+            lvl: 'info',
+            msg: `Element is ${act.toLowerCase()} now`,
+          });
+          this.fetchElements();
         }
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
   handleDeleteKlass(element) {
-    GenericElsFetcher.deleteKlass({ id: element.id, klass: 'ElementKlass' })
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
-          this.closeModal(this.fetchElements);
-          this.handleShowState('tab', '');
-        }
+    if (element.is_active) {
+      notification({
+        title: 'Delete failed',
+        lvl: 'error',
+        msg: `You cannot delete an active element [${element.name}]. Please make it [inactive] first.`,
       });
+      return;
+    }
+    const confirmed = confirm('Are you sure you want to delete this record?');
+    if (confirmed) {
+      GenericElsFetcher.deleteKlass({
+        id: element.id,
+        klass: 'ElementKlass',
+      })
+        .then(result => {
+          if (result.error) {
+            notification({
+              title: `Element [${element.name}]`,
+              lvl: 'error',
+              msg: result.error,
+            });
+          } else {
+            notification({
+              title: `Element [${element.name}]`,
+              lvl: 'info',
+              msg: 'Deleted successfully',
+            });
+            this.fetchElements();
+          }
+        })
+        .finally(() => {
+          LoadingActions.stop();
+        });
+    }
   }
 
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
-      GenericElsFetcher.fetchKlassRevisions(element.id, 'ElementKlass')
-        .then((result) => {
+  fetchRevisions(_element) {
+    const element = _element;
+    if (element?.id) {
+      GenericElsFetcher.fetchKlassRevisions(element.id, 'ElementKlass').then(
+        result => {
           let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          curr = Object.assign(
+            {},
+            { properties_release: curr },
+            { uuid: 'current' }
+          );
           const revisions = [].concat(curr, result.revisions);
           this.setState({ revisions });
-        });
+        }
+      );
     }
   }
 
   delRevision(params) {
-    const { element } = this.state;
-    GenericElsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'ElementKlass' })
-      .then((response) => {
-        if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
-        } else {
-          this.fetchRevisions();
-        }
-      });
-  }
-
-  saveFlow(params) {
-    const { flowObject } = params;
-    const { element } = this.state;
+    const { id, data, uuid } = params;
     LoadingActions.start();
-    element.properties_template.flow = flowObject;
-    element.is_release = false;
-    GenericElsFetcher.updateGElTemplates(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Update Element [${element.name}] template`, lvl: 'error', msg: result.error });
+    GenericElsFetcher.deleteKlassRevision({
+      id: id,
+      klass_id: data?.id,
+      klass: 'ElementKlass',
+    })
+      .then(response => {
+        if (response.error) {
+          notification({
+            title: 'Delete Revision',
+            lvl: 'error',
+            msg: response.error,
+          });
         } else {
-          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
-          this.fetchElements();
-          this.setState({ element: result, show: this.getShowState('modal', '') }, () => LoadingActions.stop());
+          this.fetchRevisions(data);
+          notification({
+            title: `Revision [${uuid}] deleted successfully`,
+            lvl: 'info',
+            msg: 'Deleted successfully',
+          });
         }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({
-        element, selectOptions, show: this.getShowState('tab', 'PropModal'), propTabKey: 1
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.closeModal();
-      notification({ title: `Upload template for Element [${element.name}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, show: this.getShowState('modal', '') });
-      notification({ title: `Upload template to Element [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
-    }
   }
 
   fetchElements() {
-    GenericElsFetcher.fetchElementKlasses()
-      .then((result) => {
-        if (typeof result !== 'undefined' && typeof result.klass !== 'undefined') {
-          this.setState({ elements: result.klass?.filter(k => k.is_generic) });
-        }
-      });
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = ['integer', 'text'].includes(fd.type) ? fd.required : false;
-        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
-        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].wf_position = 0;
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    sortedLayers.map((e, ix) => {
-      e.position = (ix + 1) * 10;
-      return e;
+    GenericElsFetcher.fetchElementKlasses().then(result => {
+      if (
+        typeof result !== 'undefined' &&
+        typeof result.klass !== 'undefined' &&
+        result?.klass?.length > 0
+      )
+        this.setState(
+          { elements: result.klass.filter(k => k.is_generic) },
+          () => LoadingActions.stop()
+        );
     });
-    element.properties_template.layers = orgLayerObject(sortedLayers);
-    element.is_release = isRelease;
-    GenericElsFetcher.updateGElTemplates(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Update Element [${element.name}] template`, lvl: 'error', msg: result.error });
-        } else {
-          if (isRelease === true) {
-            notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
-          } else {
-            notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
-          }
-          this.fetchElements();
-          this.setState({ element: result }, () => LoadingActions.stop());
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
   }
 
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const { options } = element.properties_template.select_options[delRoot];
-      if (options && options.length > 0) {
-        const idx = findIndex(options, o => o.key === delKey);
-        options.splice(idx, 1);
-      }
-    } else if (delStr === 'Layer') {
-      if (!validateLayerDeletion(element, delKey)) return;
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    }
-    this.setState({ element });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+  async handleSubmit(_element, _release = 'draft') {
+    const [element, release] = [_element, _release];
+    element.release = release;
+    LoadingActions.start();
+    const result = await submit(GenericElsFetcher, { update: Constants.GENERIC_TYPES.ELEMENT, element, release });
+    if (result.isSuccess) {
+      notification(result);
+      this.fetchElements();
+      this.setState({ element: result.response }, () => LoadingActions.stop());
     } else {
-      msg = `remove ???: ${delStr}`;
+      notification(result);
     }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
+    LoadingActions.stop();
   }
 
-  renderSelectOptions() {
-    const { element } = this.state;
-    return (
-      <SelectOptionLayer
-        generic={element}
-        fnChange={this.onUpdElement}
-        fnAddSelect={this.handleAddSelect}
-        fnAddOption={this.newOption}
-      />
+  renderGrid() {
+    const { elements } = this.state;
+    const els = orderBy(
+      elements,
+      ['is_active', 'name', 'klass_prefix'],
+      ['desc', 'asc', 'asc']
     );
-  }
-
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          layer={layer}
-          select_options={selectOptions}
-          onDrop={e => this.onFieldDrop(e)}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onFieldSubFieldChange={this.onFieldSubFieldChange}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-              {
-                layer.wf ? <span>&nbsp;<Badge className="bg-bs-warning">workflow</Badge></span> : null
-              }
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnCond}
-                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
-              {fields}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
-    });
-
     return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
+      <Designer
+        fnCopy={this.handleCreateKlass}
+        fnCreate={this.handleCreateKlass}
+        fnSubmit={this.handleSubmit}
+        fnActive={this.handleActivateKlass}
+        fnDelete={this.handleDeleteKlass}
+        fnUpdate={this.handleUpdateKlass}
+        preview={{
+          fnDelRevisions: this.delRevision,
+          fnRevisions: this.fetchRevisions,
+          revisions: this.state.revisions,
+        }}
+        genericType="Element"
+        gridData={els}
+      />
     );
   }
 
-  renderPropPanel() {
-    const {
-      element, show, revisions, propTabKey
-    } = this.state;
-    const showPropModal = show.tab === 'PropModal';
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="elements-prop-tabs" onSelect={this.propTabSelect}>
-          <Tab eventKey={1} title="Template">
-            <Panel>
-              <Panel.Heading>
-                <b>{`Template of Element [${element.name}]`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Upload template" tip="Upload Element template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
-                  <GenButtonTooltip txt="Workflow" tip="Design workflow" fnClick={() => this.handleShowState('modal', 'Workflow')} fa="fa-sitemap" place="top" />&nbsp;
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}> {this.renderProperties()} </Col>
-                  <Col sm={4}> {this.renderSelectOptions()} </Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-      );
-    }
-    return (<div />);
-  }
-
-  renderGrid() {
-    const { elements } = this.state;
-    const els = orderBy(elements, ['is_active', 'name', 'klass_prefix'], ['desc', 'asc', 'asc']);
-    return (<GenGridEl
-      gridData={els}
-      fnCopyKlass={this.copyKlass}
-      fnDeActivateKlass={this.handleActivateKlass}
-      fnEditKlass={this.editKlass}
-      fnShowProp={this.handlePropShow}
-    />);
-  }
-
   render() {
-    const { element, layerKey, user } = this.state;
+    const { user } = this.state;
     if (!user.generic_admin?.elements) {
       return <GenericAdminUnauth userName={user.name} text="GenericElements" />;
     }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
 
-    const layers = (element && element.properties_template
-      && element.properties_template.layers) || {};
-    const sortedLayers = layer.wf ?
-      (sortBy(layers, l => l.position) || []).filter(l => l.key === layer.key) :
-      (sortBy(layers, l => l.position) || []);
     return (
-      <div className="generic-designer-container">
+      <div style={{ width: '90vw', margin: 'auto' }}>
         <GenericAdminNav userName={user.name} text="GenericElements" />
-        <div className="main-content">
+        <hr />
+        <div style={{ marginTop: '60px' }}>
           <h3>Generic Elements Designer</h3>
-          <Button bsStyle="primary" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewKlass')}>
-            New Element&nbsp;<i className="fa fa-plus" aria-hidden="true" />
-          </Button>
-          { this.renderGrid() }
-          { this.renderPropPanel() }
-          <LayerAttrNewModal
-            showModal={this.state.show.modal === 'NewLayer'}
-            fnClose={this.closeModal}
-            fnCreate={this.handleCreateLayer}
-            isAttrOnWF
-          />
-          <LayerAttrEditModal
-            showModal={this.state.show.modal === 'EditLayer'}
-            layer={layer}
-            fnClose={this.closeModal}
-            fnUpdate={this.handleUpdateLayer}
-            isAttrOnWF
-          />
-          <AttrNewModal
-            content="Element"
-            showModal={this.state.show.modal === 'NewKlass'}
-            fnClose={this.closeModal}
-            fnCreate={this.handleCreateKlass}
-          />
-          <AttrEditModal
-            content="Element"
-            showModal={this.state.show.modal === 'EditKlass'}
-            element={this.state.element}
-            fnClose={this.closeModal}
-            fnDelete={this.handleDeleteKlass}
-            fnActivate={this.handleActivateKlass}
-            fnUpdate={this.handleUpdateKlass}
-          />
-          <FieldCondEditModal
-            showModal={this.state.show.modal === 'FieldCond'}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.closeModal}
-          />
-          <AttrCopyModal
-            content="Element"
-            showModal={this.state.show.modal === 'CopyKlass'}
-            element={this.state.element}
-            fnClose={this.closeModal}
-            fnCopy={this.handleCreateKlass}
-          />
-          <UploadModal
-            content="Generic Elements"
-            klass="ElementKlass"
-            showModal={this.state.show.modal === 'Upload'}
-            fnClose={this.closeModal}
-            fnUpload={this.handleUploadTemplate}
-          />
-          <WorkflowModal
-            show={this.state.show.modal === 'Workflow'}
-            element={this.state.element}
-            fnClose={this.closeModal}
-            fnSaveFlow={this.saveFlow}
-          />
+          {this.renderGrid()}
         </div>
         <Notifications />
         <LoadingModal />
@@ -874,8 +403,13 @@ export default class GenericElementsAdmin extends React.Component {
   }
 }
 
-const GenericElementsAdminDnD = DragDropContext(HTML5Backend)(GenericElementsAdmin);
 document.addEventListener('DOMContentLoaded', () => {
   const domElement = document.getElementById('GenericElementsAdmin');
-  if (domElement) ReactDOM.render(<GenericElementsAdminDnD />, domElement);
+  if (domElement)
+    ReactDOM.render(
+      <DndProvider backend={HTML5Backend}>
+        <GenericElementsAdmin />
+      </DndProvider>,
+      domElement
+    );
 });
diff --git a/app/packs/src/generic/GenericSegmentsAdmin.js b/app/packs/src/generic/GenericSegmentsAdmin.js
index 624f5eca1..c9589f844 100644
--- a/app/packs/src/generic/GenericSegmentsAdmin.js
+++ b/app/packs/src/generic/GenericSegmentsAdmin.js
@@ -1,30 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Panel, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import { GenGridSg, GenButtonTooltip, SelectOptionLayer, ElementField, AttrNewModal, AttrEditModal, AttrCopyModal, FieldCondEditModal, LayerAttrEditModal, UploadModal, LayerAttrNewModal, WorkflowModal, reUnit, GenericDummy, orgLayerObject, si } from 'chem-generic-ui';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { orderBy } from 'lodash';
+import { Constants, Designer } from 'chem-generic-ui';
 import Notifications from '../components/Notifications';
 import LoadingModal from '../components/common/LoadingModal';
 import UsersFetcher from '../components/fetchers/UsersFetcher';
 import GenericSgsFetcher from '../components/fetchers/GenericSgsFetcher';
 import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
 import LoadingActions from '../components/actions/LoadingActions';
-import { validateLayerInput, validateSelectList, notification, validateLayerUpdation, validateLayerDeletion } from './Utils';
-import Preview from './Preview';
+import { notification, submit } from './Utils';
 import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
 
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-const validateInput = (element) => {
+const validateInput = element => {
   if (element.klass_element === '') {
-    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please select Element.' });
+    notification({
+      title: 'Create Segment Error',
+      lvl: 'error',
+      msg: 'Please select Element.',
+    });
     return false;
   }
   if (element.label === '') {
-    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please input Segment Label.' });
+    notification({
+      title: 'Create Segment Error',
+      lvl: 'error',
+      msg: 'Please input Segment Label.',
+    });
     return false;
   }
   return true;
@@ -35,802 +38,330 @@ export default class GenericSegmentsAdmin extends React.Component {
     super(props);
     this.state = {
       elements: [],
-      element: {},
       klasses: [],
-      newFieldKey: '',
-      layerKey: '',
-      selectOptions: [],
-      unitsSystem: si,
       show: { tab: '', modal: '' },
       propTabKey: 1,
       revisions: [],
-      user: {}
+      repoData: [],
+      user: {},
     };
 
-    this.clipboard = new Clipboard('.clipboardBtn');
     this.fetchElements = this.fetchElements.bind(this);
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    this.editKlass = this.editKlass.bind(this);
-    this.copyKlass = this.copyKlass.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.updSubField = this.updSubField.bind(this);
-    this.updLayerSubField = this.updLayerSubField.bind(this);
     this.handleShowState = this.handleShowState.bind(this);
     this.closeModal = this.closeModal.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
     this.handleCreateKlass = this.handleCreateKlass.bind(this);
     this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
     this.handleActivateKlass = this.handleActivateKlass.bind(this);
     this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
     this.delRevision = this.delRevision.bind(this);
     this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-    this.saveFlow = this.saveFlow.bind(this);
-    this.onUpdElement = this.onUpdElement.bind(this);
+    this.handleCreateRepo = this.handleCreateRepo.bind(this);
+    this.handleShowRepo = this.handleShowRepo.bind(this);
+    this.fetchElementKlasses = this.fetchElementKlasses.bind(this);
   }
 
   componentDidMount() {
     this.fetchElements();
     this.fetchElementKlasses();
-    UsersFetcher.fetchCurrentUser().then((result) => {
-      if (!result.error) {
-        this.setState({ user: result.user });
-      }
-    }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onUpdElement(generic) {
-    this.setState({ element: generic });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    this.setState({ show: this.getShowState('modal', 'FieldCond'), fieldObj: field, layerKey: lk });
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
-  }
-
-  onFieldSubFieldChange(lk, f, cb) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobj = (fields || []).find(o => o.field === f.field);
-      if (Object.keys(fobj).length > 0) {
-        const idx = (fields || []).findIndex(o => o.field === f.field);
-        fields.splice(idx, 1, f);
-        element.properties_template.layers[lk].fields = fields;
-        this.setState({ element }, cb);
-      }
-    }
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-
-    if (typeof layer === 'undefined' || layer == null) return;
-
-    const { fields } = layer;
-
-    if (fields == null || fields.length === 0) return;
-
-    const fobj = fields.find(e => e.field === fe);
-    if (Object.keys(fobj).length === 0) return;
-
-    switch (fc) {
-      case 'required':
-      case 'hasOwnRow':
-      case 'canAdjust':
-        fobj[`${fc}`] = !orig;
-        break;
-      default:
-        fobj[`${fc}`] = value;
-        break;
-    }
-
-    const idx = findIndex(fields, o => o.field === fe);
-    fields.splice(idx, 1, fobj);
-    element.properties_template.layers[lk].fields = fields;
-    this.setState({ element });
-  }
-
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
+    UsersFetcher.fetchCurrentUser()
+      .then(result => {
+        if (!result.error) {
+          this.setState({ user: result.user });
+        }
+      })
+      .catch(errorMessage => {
+        console.log(errorMessage);
+      });
   }
 
-  getShowState(att, val) { return { ...this.state.show, [att]: val }; }
-
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
+  getShowState(att, val) {
+    return { ...this.state.show, [att]: val };
   }
 
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
+  fetchRevisions(_element) {
+    const element = _element;
+    if (element?.id) {
+      LoadingActions.start();
       GenericSgsFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
-        .then((result) => {
+        .then(result => {
           let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          curr = Object.assign(
+            {},
+            { properties_release: curr },
+            { uuid: 'current' }
+          );
           const revisions = [].concat(curr, result.revisions);
           this.setState({ revisions });
+        })
+        .finally(() => {
+          LoadingActions.stop();
         });
     }
   }
 
   delRevision(params) {
-    const { element } = this.state;
-    GenericSgsFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'SegmentKlass' })
-      .then((response) => {
+    const { id, data, uuid } = params;
+    LoadingActions.start();
+    GenericSgsFetcher.deleteKlassRevision({
+      id: id,
+      klass_id: data?.id,
+      klass: 'SegmentKlass',
+    })
+      .then(response => {
         if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+          notification({
+            title: 'Delete Revision',
+            lvl: 'error',
+            msg: response.error,
+          });
         } else {
-          this.fetchRevisions();
+          this.fetchRevisions(data);
+          notification({
+            title: `Revision [${uuid}] deleted successfully`,
+            lvl: 'info',
+            msg: 'Deleted successfully',
+          });
         }
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  updSubField(layerKey, field, cb) {
-    this.onFieldSubFieldChange(layerKey, field, cb);
-  }
-
-  updLayerSubField(layerKey, layer) {
-    const { element } = this.state;
-    element.properties_template.layers[`${layerKey}`] = layer;
-    this.setState({ element });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-  editLayer(e) {
-    this.setState({ show: this.getShowState('modal', 'EditLayer'), layerKey: e.layerKey });
-  }
-
-  editKlass(element) {
-    this.setState({ show: this.getShowState('modal', 'EditKlass'), element });
-  }
-
-  copyKlass(element) {
-    this.setState({ show: this.getShowState('modal', 'CopyKlass'), element });
-  }
-
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
-  }
-
-  newOption(key, newOptionKey, selectOptions) {
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    if (selectOptions.filter(x => x.key === newOptionKey).length > 1) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const { element } = this.state;
-    element.properties_template.select_options[key].options = selectOptions;
-    this.onUpdElement(element);
-  }
-
   handleShowState(att, val, cb = () => {}) {
     this.setState({ show: this.getShowState(att, val) }, cb);
   }
-  closeModal(cb = () => {}) { this.handleShowState('modal', '', cb); }
-
-  handleAddSelect(selectName, newSelectOptions) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      element.properties_template.select_options = newSelectOptions;
-      const selectOptions = Object.keys(newSelectOptions).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, selectOptions });
-    }
+  closeModal(cb = () => {}) {
+    this.handleShowState('modal', '', cb);
   }
 
-  handleCreateLayer(_layer) {
-    const layer = _layer;
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
-      return;
-    }
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    layer.position = (!layer.position && sortedLayers.length < 1) ?
-      100 : parseInt((sortedLayers.slice(-1)[0] || { position: 100 }).position, 10) + 10;
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ show: this.getShowState('modal', ''), element, layerKey: layer.key });
+  handleShowRepo() {
+    LoadingActions.start();
+    GenericSgsFetcher.fetchRepo().then(result => {
+      if (result.error) {
+        notification({
+          title: 'Cannot connect to Chemotion Repository',
+          lvl: 'error',
+          msg: result.error,
+        });
+        LoadingActions.stop();
+      } else {
+        this.setState(
+          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
+          () => LoadingActions.stop()
+        );
+      }
+    });
   }
 
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates, 'upd')) return;
-    const { element } = this.state;
-    if (!validateLayerUpdation(element, updates)) return;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    layer = { ...layer, ...updates };
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    layer.position = layer.position ?
-      parseInt(layer.position, 10) : parseInt(sortedLayers.slice(-1)[0].position, 10) + 10;
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ show: this.getShowState('modal', ''), element });
+  handleCreateRepo(element) {
+    GenericSgsFetcher.createRepo({ identifier: element['identifier'] }).then(
+      result => {
+        this.setState({ elements: result?.klass || this.state.elements });
+      }
+    );
+    this.closeModal(this.fetchElements);
   }
 
-  handleCreateKlass(element) {
+  handleCreateKlass(_response) {
+    const { element, notify } = _response;
+    if (!notify.isSuccess) {
+      notification(notify);
+      return;
+    }
     if (!validateInput(element)) return;
-    GenericSgsFetcher.createSegmentKlass(element)
-      .then((result) => {
+    GenericSgsFetcher.createKlass(element)
+      .then(result => {
         if (result.error) {
-          notification({ title: 'Create Segment fail', lvl: 'error', msg: result.error });
+          notification({
+            title: 'Create Segment fail',
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: 'Create Segment successfully', lvl: 'info', msg: 'Created successfully' });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: 'Create Segment successfully',
+            lvl: 'info',
+            msg: 'Created successfully',
+          });
+          this.fetchElements();
         }
-      }).catch((errorMessage) => {
+      })
+      .catch(errorMessage => {
         console.log(errorMessage);
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
-  handleUpdateKlass(element, updates) {
-    const inputs = { ...element, ...updates };
+  handleUpdateKlass(_response) {
+    const { element, notify } = _response;
+    if (!notify.isSuccess) {
+      notification(notify);
+      return;
+    }
+    const inputs = element;
     if (!validateInput(inputs)) return;
     GenericSgsFetcher.updateSegmentKlass(inputs)
-      .then((result) => {
+      .then(result => {
         if (result.error) {
-          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
+          notification({
+            title: 'Update Segment fail',
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: 'Update Segment successfully', lvl: 'info', msg: 'Updated successfully' });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: 'Update Segment successfully',
+            lvl: 'info',
+            msg: 'Updated successfully',
+          });
+          this.fetchElements();
         }
-      }).catch((errorMessage) => {
+      })
+      .catch(errorMessage => {
         console.log(errorMessage);
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
   handleActivateKlass(e) {
     const act = e.is_active ? 'De-activate' : 'Activate';
-    GenericSgsFetcher.deActivateKlass({ id: e.id, is_active: !e.is_active, klass: 'SegmentKlass' })
-      .then((result) => {
+    GenericSgsFetcher.deActivateKlass({
+      id: e.id,
+      is_active: !e.is_active,
+      klass: 'SegmentKlass',
+    })
+      .then(result => {
         if (result.error) {
-          notification({ title: `${act} Segment fail`, lvl: 'error', msg: result.error });
+          notification({
+            title: `${act} Segment fail`,
+            lvl: 'error',
+            msg: result.error,
+          });
         } else {
-          notification({ title: `${act} Segment successfully`, lvl: 'info', msg: `Segment is ${act.toLowerCase()} now` });
-          this.closeModal(this.fetchElements);
+          notification({
+            title: `${act} Segment successfully`,
+            lvl: 'info',
+            msg: `Segment is ${act.toLowerCase()} now`,
+          });
+          this.fetchElements();
         }
-      }).catch((errorMessage) => {
+      })
+      .catch(errorMessage => {
         console.log(errorMessage);
+      })
+      .finally(() => {
+        LoadingActions.stop();
       });
   }
 
   handleDeleteKlass(element) {
-    GenericSgsFetcher.deleteKlass({ id: element.id, klass: 'SegmentKlass' })
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Delete Segment fail', lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Segment [${element.label}]`, lvl: 'info', msg: 'Deleted successfully' });
-          this.closeModal(this.fetchElements);
-          this.handleShowState('tab', '');
-        }
-      });
-  }
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({
-        element, selectOptions, show: this.getShowState('tab', 'PropModal'), propTabKey: 1
-      });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.closeModal();
+    if (element.is_active) {
       notification({
-        title: `Upload Template for Segment [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message
+        title: 'Delete Segment fail',
+        lvl: 'error',
+        msg: `You cannot delete an active segment [${element.label}]. Please make it [inactive] first.`,
       });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, show: this.getShowState('modal', '') });
-      notification({ title: `Upload template to Segment [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+      return;
+    }
+    const confirmed = confirm('Are you sure you want to delete this record?');
+    if (confirmed) {
+      GenericSgsFetcher.deleteKlass({
+        id: element.id,
+        klass: 'SegmentKlass',
+      })
+        .then(result => {
+          if (result.error) {
+            notification({
+              title: 'Delete Segment fail',
+              lvl: 'error',
+              msg: result.error,
+            });
+          } else {
+            notification({
+              title: `Segment [${element.label}]`,
+              lvl: 'info',
+              msg: 'Deleted successfully',
+            });
+            this.fetchElements();
+            this.handleShowState('tab', '');
+          }
+        })
+        .finally(() => {
+          LoadingActions.stop();
+        });
     }
   }
 
   fetchElements() {
-    GenericSgsFetcher.listSegmentKlass()
-      .then((result) => { this.setState({ elements: result.klass }); });
+    GenericSgsFetcher.listSegmentKlass().then(result => {
+      this.setState({ elements: result.klass }, () => LoadingActions.stop());
+    });
   }
 
   fetchElementKlasses() {
-    GenericElsFetcher.fetchElementKlasses()
-      .then((result) => {
-        const klasses = result?.klass?.sort((a, b) => a.place - b.place) || [];
-        this.setState({ klasses });
-      });
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = false;
-        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
-        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].wf_position = 0;
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-    const sortedLayers = sortBy(element.properties_template.layers, ['position']);
-    sortedLayers.map((e, ix) => {
-      e.position = (ix + 1) * 10;
-      return e;
+    GenericElsFetcher.fetchElementKlasses().then(result => {
+      const klasses = result?.klass?.sort((a, b) => a.place - b.place) || [];
+      this.setState({ klasses });
     });
-    element.properties_template.layers = orgLayerObject(sortedLayers);
-    element.is_release = isRelease;
-    GenericSgsFetcher.updateSegmentTemplate(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Update Segment template fail', lvl: 'error', msg: result.error });
-        } else {
-          if (isRelease === true) {
-            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved adn Released successfully' });
-          } else {
-            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved successfully' });
-          }
-          this.fetchElements();
-          this.setState({ element: result });
-        }
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
   }
 
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const { options } = element.properties_template.select_options[delRoot];
-      if (options && options.length > 0) {
-        const idx = findIndex(options, o => o.key === delKey);
-        options.splice(idx, 1);
-      }
-    } else if (delStr === 'Layer') {
-      if (!validateLayerDeletion(element, delKey)) return;
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    }
-    this.setState({ element });
-  }
-
-  saveFlow(params) {
-    const { flowObject } = params;
-    const { element } = this.state;
+  async handleSubmit(_element, _release = 'draft') {
+    const [element, release] = [_element, _release];
+    element.release = release;
     LoadingActions.start();
-    element.properties_template.flow = flowObject;
-    element.is_release = false;
-    GenericSgsFetcher.updateSegmentTemplate(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Update Segment [${element.name}] template`, lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Update Segment [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
-          this.fetchElements();
-          this.setState({ element: result, show: this.getShowState('modal', '') }, () => LoadingActions.stop());
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    const result = await submit(GenericSgsFetcher, { update: Constants.GENERIC_TYPES.SEGMENT, element, release });
+    if (result.isSuccess) {
+      notification(result);
+      this.fetchElements();
+      this.setState({ element: result.response }, () => LoadingActions.stop());
     } else {
-      msg = `remove ???: ${delStr}`;
+      notification(result);
     }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderSelectOptions() {
-    const { element } = this.state;
-    return (
-      <SelectOptionLayer
-        generic={element}
-        fnChange={this.onUpdElement}
-        fnAddSelect={this.handleAddSelect}
-        fnAddOption={this.newOption}
-      />
-    );
-  }
-
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          genericType="Segment"
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          select_options={selectOptions}
-          onDrop={e => this.onFieldDrop(e)}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onFieldSubFieldChange={this.onFieldSubFieldChange}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<GenButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-      // disable for now
-      const btnWF = null;
-      // const btnWF = layer.wf ? <GenButtonTooltip tip="used in workflow" fnClick={() => {}} element={{ }} fa="fa-sitemap" place="top" size="sm" /> : null;
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-              {
-                layer.wf ? <span>&nbsp;<Badge className="bg-bs-warning">workflow</Badge></span> : null
-              }
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnWF}
-                    {btnCond}
-                    <GenButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <GenButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <GenButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
-              {fields}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewLayer')}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderPropPanel() {
-    const {
-      element, show, revisions, propTabKey
-    } = this.state;
-    const showPropModal = show.tab === 'PropModal';
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="segments-prop-tabs" onSelect={this.propTabSelect}>
-          <Tab eventKey={1} title="Template">
-            <Panel show={showPropModal.toString()}>
-              <Panel.Heading>
-                <b>{`Template of Segment [${element.label}]: ${element.desc}`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <GenButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <GenButtonTooltip txt="Upload template" tip="Upload Segment template in JSON format" fnClick={() => this.handleShowState('modal', 'Upload')} place="top" fa="fa-upload" />&nbsp;
-                  <GenButtonTooltip txt="Workflow" tip="Design workflow" fnClick={() => this.handleShowState('modal', 'Workflow')} fa="fa-sitemap" place="top" />&nbsp;
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}>{this.renderProperties()}</Col>
-                  <Col sm={4}>{this.renderSelectOptions()}</Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-      );
-    }
-    return (<div />);
+    LoadingActions.stop();
   }
 
   renderGrid() {
     const { elements } = this.state;
     const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
-    return (<GenGridSg
-      gridData={els}
-      fnCopyKlass={this.copyKlass}
-      fnDeActivateKlass={this.handleActivateKlass}
-      fnEditKlass={this.editKlass}
-      fnShowProp={this.handlePropShow}
-    />);
+
+    return (
+      <Designer
+        fnCopy={this.handleCreateKlass}
+        fnCreate={this.handleCreateKlass}
+        fnSubmit={this.handleSubmit}
+        fnActive={this.handleActivateKlass}
+        fnDelete={this.handleDeleteKlass}
+        fnUpdate={this.handleUpdateKlass}
+        genericType="Segment"
+        gridData={els}
+        klasses={this.state.klasses}
+        preview={{
+          fnDelRevisions: this.delRevision,
+          fnRevisions: this.fetchRevisions,
+          revisions: this.state.revisions,
+        }}
+      />
+    );
   }
 
   render() {
-    const { element, layerKey, user } = this.state;
+    const { user } = this.state;
     if (!user.generic_admin?.segments) {
       return <GenericAdminUnauth userName={user.name} text="GenericSegments" />;
     }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
-
-    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
     return (
-      <div className="generic-designer-container">
+      <div style={{ width: '90vw', margin: 'auto' }}>
         <GenericAdminNav userName={user.name} text="GenericSegments" />
-        <div className="main-content">
+        <hr />
+        <div style={{ marginTop: '60px' }}>
           <h3>Generic Segments Designer</h3>
-          <Button bsStyle="primary" bsSize="xs" onClick={() => this.handleShowState('modal', 'NewKlass')}>
-            New Segment&nbsp;<i className="fa fa-plus" aria-hidden="true" />
-          </Button>
-          { this.renderGrid() }
-          { this.renderPropPanel() }
-          <LayerAttrNewModal
-            showModal={this.state.show.modal === 'NewLayer'}
-            fnClose={this.closeModal}
-            fnCreate={this.handleCreateLayer}
-            isAttrOnWF
-          />
-          <LayerAttrEditModal
-            showModal={this.state.show.modal === 'EditLayer'}
-            layer={layer}
-            fnClose={this.closeModal}
-            fnUpdate={this.handleUpdateLayer}
-            isAttrOnWF
-          />
-          <AttrNewModal
-            content="Segment"
-            showModal={this.state.show.modal === 'NewKlass'}
-            klasses={this.state.klasses}
-            fnClose={this.closeModal}
-            fnCreate={this.handleCreateKlass}
-          />
-          <AttrEditModal
-            content="Segment"
-            showModal={this.state.show.modal === 'EditKlass'}
-            element={this.state.element}
-            klasses={this.state.klasses}
-            fnClose={this.closeModal}
-            fnDelete={this.handleDeleteKlass}
-            fnActivate={this.handleActivateKlass}
-            fnUpdate={this.handleUpdateKlass}
-          />
-          <FieldCondEditModal
-            showModal={this.state.show.modal === 'FieldCond'}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.closeModal}
-          />
-          <AttrCopyModal
-            content="Segment"
-            showModal={this.state.show.modal === 'CopyKlass'}
-            element={this.state.element}
-            klasses={this.state.klasses}
-            fnClose={this.closeModal}
-            fnCopy={this.handleCreateKlass}
-          />
-          <UploadModal
-            content="Generic Segments"
-            klass="SegmentKlass"
-            showModal={this.state.show.modal === 'Upload'}
-            fnClose={this.closeModal}
-            fnUpload={this.handleUploadTemplate}
-          />
-          <WorkflowModal
-            show={this.state.show.modal === 'Workflow'}
-            element={this.state.element}
-            fnClose={this.closeModal}
-            fnSaveFlow={this.saveFlow}
-          />
+          {this.renderGrid()}
         </div>
         <Notifications />
         <LoadingModal />
@@ -839,8 +370,13 @@ export default class GenericSegmentsAdmin extends React.Component {
   }
 }
 
-const GenericSegmentsAdminDnD = DragDropContext(HTML5Backend)(GenericSegmentsAdmin);
 document.addEventListener('DOMContentLoaded', () => {
   const domElement = document.getElementById('GenericSegmentsAdmin');
-  if (domElement) ReactDOM.render(<GenericSegmentsAdminDnD />, domElement);
+  if (domElement)
+    ReactDOM.render(
+      <DndProvider backend={HTML5Backend}>
+        <GenericSegmentsAdmin />
+      </DndProvider>,
+      domElement
+    );
 });
diff --git a/app/packs/src/generic/Preview.js b/app/packs/src/generic/Preview.js
deleted file mode 100644
index 71a9436c0..000000000
--- a/app/packs/src/generic/Preview.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/* eslint-disable camelcase */
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Badge, Col } from 'react-bootstrap';
-import { cloneDeep } from 'lodash';
-import { GenInterface, GenButtonConfirm, GenButtonTooltip } from 'chem-generic-ui';
-import LoadingActions from '../components/actions/LoadingActions';
-import Utils from '../components/utils/Functions';
-
-export default class Preview extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { revisions: [], compareUUID: 'current', fullScreen: false };
-    this.compare = this.compare.bind(this);
-    this.setRevision = this.setRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.handleChanged = this.handleChanged.bind(this);
-    this.dlRevision = this.dlRevision.bind(this);
-    this.setScreen = this.setScreen.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.props.revisions) {
-      this.setRevision(cloneDeep(this.props.revisions));
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.revisions !== prevProps.revisions) {
-      this.setRevision(cloneDeep(this.props.revisions));
-    }
-  }
-
-  setRevision(revisions) {
-    this.setState({ revisions });
-  }
-
-  setScreen(fullScreen) {
-    this.setState({ fullScreen });
-  }
-
-  compare(params) {
-    LoadingActions.start();
-    this.setState(
-      { revisions: cloneDeep(this.props.revisions), compareUUID: params.uuid },
-      LoadingActions.stop()
-    );
-  }
-
-  delRevision(params) {
-    this.props.fnDelete(params);
-  }
-
-  retriveRevision(params) {
-    const { fnRetrive, src } = this.props;
-    LoadingActions.start();
-    const deep = cloneDeep(this.props.revisions.find(r => r.id === params.id));
-    fnRetrive(deep[src], () => LoadingActions.stop());
-  }
-
-  dlRevision(params) {
-    const { element, revisions } = this.props;
-    LoadingActions.start();
-    const revision = revisions.find(r => r.id === params.id);
-    const props = revision.properties_release;
-    props.klass = revision.properties_release.klass;
-    props.released_at = revision.released_at || '';
-    const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(revision.properties_release))}`;
-    Utils.downloadFile({ contents: href, name: `${props.klass}_${element.label}_${revision.uuid}.json` });
-    LoadingActions.stop();
-  }
-
-  handleChanged(el) {
-    const { compareUUID, revisions } = this.state;
-    const { src } = this.props;
-    let selected = (revisions || []).find(r => r.uuid === compareUUID);
-    if (selected && selected[src]) {
-      selected = el;
-      this.setRevision(revisions);
-    }
-  }
-
-  render() {
-    const { compareUUID, revisions, fullScreen } = this.state;
-    if (revisions.length < 1) return null;
-    const { src, canDL } = this.props;
-    const t = (v, idx) => {
-      const s = v.uuid === compareUUID ? 'generic_block_select' : '';
-      const ver = v.released_at ? `version: ${v.uuid}` : 'version:';
-      let at = v.released_at ? `released at: ${v.released_at} (UTC)` : '(Work In Progress)';
-      if (src === 'properties') {
-        at = `saved at: ${v.released_at} (UTC)`;
-      }
-
-      const del = (v.released_at && idx > 1) ? <GenButtonConfirm msg="Delete this version permanently?" fnClick={this.delRevision} fnParams={{ id: v.id }} bs="default" place="top" /> : null;
-      const ret = v.released_at ? <GenButtonConfirm msg="Retrieve this version?" fnClick={this.retriveRevision} fnParams={{ id: v.id }} fa="fa-reply" bs="default" place="top" /> : null;
-      const dl = canDL ? <GenButtonTooltip tip="Download this version" fnClick={this.dlRevision} element={{ id: v.id }} fa="fa-download" place="top" bs="default" /> : null;
-      return (
-        <div className={`generic_version_block ${s}`} key={v.uuid}>
-          <div><div style={{ width: '100%' }}>{ver}</div><div style={{ fontSize: '0.8rem' }}>#{(idx + 1)}</div></div>
-          <div>
-            <div style={{ width: '100%' }}>{at}</div>
-            {del}
-            {dl}
-            {ret}
-            <GenButtonTooltip tip="Preview this version" fnClick={this.compare} element={{ uuid: v.uuid }} fa="fa-clock-o" place="top" bs="default" />
-          </div>
-        </div>
-      );
-    };
-    const options = [];
-    const selected = (revisions || []).find(r => r.uuid === compareUUID) || {};
-    const selectOptions = (selected && selected[src] && selected[src].select_options) || {};
-
-    if (selected.name) {
-      options.push({
-        generic: selected, type: 'text', isEditable: true, isRequire: false, field: 'name'
-      });
-    }
-
-    selected[src] = selected[src] || {};
-    selected[src].layers = selected[src].layers || {};
-    if (src === 'properties') {
-      selected.properties_release = { select_options: selectOptions };
-    } else { selected.properties = selected.properties_release; }
-
-    const layersLayout = (
-      <GenInterface
-        generic={selected || {}}
-        fnChange={this.handleChanged}
-        extLayers={options}
-        genId={selected.uuid || 0}
-        isPreview
-        isActiveWF={false}
-      />
-    );
-
-    const his = fullScreen ? null : (<Col md={4}>{revisions.map((r, idx) => (t(r, idx)))}</Col>);
-    const contentCol = fullScreen ? 12 : 8;
-    const screenFa = fullScreen ? 'compress' : 'expand';
-    return (
-      <div>
-        {his}
-        <Col md={contentCol}>
-          <div style={{ margin: '10px 0px' }}>
-            <div style={{ float: 'right' }}><GenButtonTooltip tip={screenFa} fnClick={this.setScreen} element={!this.state.fullScreen} fa={`fa-${screenFa}`} place="left" bs="default" /></div>
-            <Badge style={{ backgroundColor: '#ffc107', color: 'black' }}><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Sketch Map, the data input here will not be saved.</Badge>
-          </div>
-          <div style={{ width: '100%', minHeight: '50vh' }}>{layersLayout}</div>
-        </Col>
-      </div>
-    );
-  }
-}
-
-Preview.propTypes = {
-  revisions: PropTypes.array,
-  fnRetrive: PropTypes.func,
-  fnDelete: PropTypes.func,
-  canDL: PropTypes.bool,
-  src: PropTypes.oneOf(['properties_release', 'properties'])
-};
-
-Preview.defaultProps = {
-  revisions: [], fnRetrive: () => {}, fnDelete: () => {}, src: 'properties_release', canDL: false
-};
diff --git a/app/packs/src/generic/Utils.js b/app/packs/src/generic/Utils.js
index 51fb88fd0..bce950000 100644
--- a/app/packs/src/generic/Utils.js
+++ b/app/packs/src/generic/Utils.js
@@ -1,99 +1,62 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import uuid from 'uuid';
 import { filter, cloneDeep } from 'lodash';
-import { isLayerInWF } from 'chem-generic-ui';
+import { Constants } from 'chem-generic-ui';
 import NotificationActions from '../components/actions/NotificationActions';
 import UserStore from '../components/stores/UserStore';
 import UIActions from '../components/actions/UIActions';
 import MatrixCheck from '../components/common/MatrixCheck';
+import elklasses from 'klasses.json';
 
-const notification = props =>
-  (
-    NotificationActions.add({
-      title: props.title,
-      message: props.msg,
-      level: props.lvl,
-      position: 'tc',
-      dismissible: 'button',
-      autoDismiss: props.autoDismiss || 5,
-      uid: props.uid || uuid.v4()
-    })
-  );
-
-const validateLayerInput = (layer, act = 'new') => {
-  if (layer.key === '') {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'Please input Name.' });
-    return false;
-  }
-  if (act === 'new' && !(/^[a-z][a-z_]+[a-z]$/g.test(layer.key))) {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
-    return false;
-  }
-  if (parseInt((layer.cols || 1), 10) < 1) {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'The minimun of Column per Row is 1, please input a different one.' });
-    return false;
-  }
-  return true;
-};
+export const ALL_TYPES = [
+  Constants.GENERIC_TYPES.ELEMENT,
+  Constants.GENERIC_TYPES.SEGMENT,
+  Constants.GENERIC_TYPES.DATASET,
+];
 
-const validateSelectList = (selectName, element) => {
-  if (selectName === '') {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'Please input Name.' });
-    return false;
-  }
-  if (!(/^[a-z][a-z_]+[a-z]$/g.test(selectName))) {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
-    return false;
-  }
-  if (element.properties_template.select_options[`${selectName}`]) {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This name of Select List is already taken. Please choose another one.' });
-    return false;
-  }
-  return true;
-};
+export const notification = props =>
+  NotificationActions.add({
+    title: props.title,
+    message: props.msg,
+    level: props.lvl,
+    position: 'tc',
+    dismissible: 'button',
+    autoDismiss: props.autoDismiss || 5,
+    uid: props.uid || uuid.v4(),
+  });
 
-const GenericDSMisType = () => {
-  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  if (MatrixCheck(currentUser.matrix, 'genericDataset')) {
+export const GenericDSMisType = () => {
+  const currentUser =
+    (UserStore.getState() && UserStore.getState().currentUser) || {};
+  if (MatrixCheck(currentUser.matrix, `generic${Constants.GENERIC_TYPES.DATASET}`)) {
     return (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Type (Chemical Methods Ontology) has been changed. <br />Please review this Dataset content.</Tooltip>}>
-        <span style={{ color: 'red' }}><i className="fa fa-exclamation-triangle" />&nbsp;</span>
+      <OverlayTrigger
+        delayShow={500}
+        placement="top"
+        overlay={
+          <Tooltip id="tooltip">
+            Type (Chemical Methods Ontology) has been changed. <br />
+            Please review this Dataset content.
+          </Tooltip>
+        }
+      >
+        <span style={{ color: 'red' }}>
+          <i className="fa fa-exclamation-triangle" />
+          &nbsp;
+        </span>
       </OverlayTrigger>
     );
   }
   return null;
 };
 
-const validateLayerDeletion = (_element, _delKey) => {
-  if (isLayerInWF(_element, _delKey)) {
-    notification({ title: `Layer [${_delKey}]`, lvl: 'warning', msg: `This layer [${_delKey}] can not be removed because it is currently used in workflow.` });
-    return false;
-  }
-  return true;
-};
-
-const validateLayerUpdation = (_element, _updates) => {
-  const { key, wf } = _updates;
-  if (isLayerInWF(_element, key)) {
-    if (!wf) {
-      notification({ title: `Layer [${key}]`, lvl: 'warning', msg: `Can not change the attribute 'used in Workflow?' because this layer [${key}] is currently used in workflow.` });
-      return false;
-    }
-  }
-  const { layers } = _element.properties_template;
-  if (wf && layers[key] && (layers[key].cond_fields || []).length > 0) {
-    notification({ title: `Layer [${key}]`, lvl: 'warning', msg: 'Can not use in Workflow because the Layer Restriction has been set.' });
-    return false;
-  }
-  return true;
-};
-
-const renderFlowModal = (generic, isToggle) => {
-  const segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+export const renderFlowModal = (generic, isToggle) => {
   let shortLabel = generic.short_label;
   if (!shortLabel) {
+    const segmentKlasses =
+      (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
     shortLabel = segmentKlasses.filter(s => s.id === generic.segment_klass_id);
     shortLabel = shortLabel.length > 0 ? shortLabel[0].label : '';
   }
@@ -101,17 +64,93 @@ const renderFlowModal = (generic, isToggle) => {
     properties_release: cloneDeep(generic.properties_release) || {},
     properties: cloneDeep(generic.properties) || {},
     shortLabel,
-    toggle: isToggle
+    toggle: isToggle,
   };
   UIActions.rerenderGenericWorkflow(params);
 };
 
-const segmentsByKlass = (name) => {
+export const segmentsByKlass = name => {
   const allSegments = UserStore.getState().segmentKlasses || [];
-  return filter(allSegments, se => (se.element_klass && se.element_klass.name) === name);
+  return filter(
+    allSegments,
+    se => (se.element_klass && se.element_klass.name) === name
+  );
+};
+
+export const elementNames = (all = true, generics = null) => {
+  const elnElements = all
+    ? ['sample', 'reaction', 'screen', 'wellplate', 'research_plan']
+    : [];
+  try {
+    if (generics?.length > 0)
+      return elnElements.concat(generics?.map(el => el.name));
+    // const { klasses } = UIStore.getState();
+    // if (typeof klasses !== 'undefined' && klasses?.length > 0) return elnElements.concat(klasses);
+    if (elklasses?.length > 0) return elnElements.concat(elklasses);
+    return elnElements;
+  } catch (error) {
+    console.error('Can not get Element Names:', error);
+    return elnElements;
+  }
+};
+
+export const FlowViewerBtn = props => {
+  const { generic } = props;
+  const propertiesRelease = generic.properties_release || {};
+
+  if (Object.keys(propertiesRelease || {}).length < 1) return null;
+
+  const hasFlow =
+    (Object.keys(propertiesRelease.flow || {}).length > 0 &&
+      propertiesRelease.flow?.elements?.length > 2) ||
+    false;
+  const hasFlowObject =
+    (Object.keys(propertiesRelease.flowObject || {}).length > 0 &&
+      propertiesRelease.flowObject?.nodes?.length > 2) ||
+    false;
+
+  if (!hasFlow && !hasFlowObject) return null;
+
+  return (
+    <OverlayTrigger
+      delayShow={500}
+      placement="top"
+      overlay={<Tooltip id={uuid.v4()}>click to view defined workflow</Tooltip>}
+    >
+      <Button
+        onClick={() => renderFlowModal(generic, true)}
+        bsSize="xsmall"
+        bsStyle="primary"
+      >
+        <i className="fa fa-sitemap" aria-hidden="true" /> Workflow
+      </Button>
+    </OverlayTrigger>
+  );
 };
 
-export {
-  GenericDSMisType, validateLayerInput, validateSelectList, notification,
-  validateLayerUpdation, validateLayerDeletion, renderFlowModal, segmentsByKlass
+export const submit = async (_action, _params) => {
+  const [action, params] = [_action, _params];
+  let result = {
+    title: 'Update template fail',
+    lvl: 'error',
+    msg: `Update ${params.update} template fail`,
+    isSuccess: false,
+  };
+  try {
+    const response = await action[`update${params.update}Template`](params.element);
+    if (!response.error) {
+      result = {
+        title: `Update ${params.update} [${params.element.label}] template`,
+        lvl: 'info',
+        msg: `Saved successfully (${params.release})`,
+        isSuccess: true,
+        response,
+      };
+    } else {
+      result = { ...result, msg: response.error };
+    }
+  } catch (errorMessage) {
+    result = { ...result, msg: errorMessage };
+  }
+  return result;
 };
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 84ba0d5e8..3746e744d 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import { Grid, Row } from 'react-bootstrap';
 import Aviator from 'aviator';
 
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import WelcomeMessage from '../components/WelcomeMessage';
 
 import initPublicRoutes from './homeRoutes';
@@ -159,11 +159,15 @@ class Home extends Component {
   }
 }
 
-const HomeWithDnD = DragDropContext(HTML5Backend)(Home);
 document.addEventListener('DOMContentLoaded', () => {
   const domElement = document.getElementById('Home');
   if (domElement) {
-    ReactDOM.render(<HomeWithDnD />, domElement);
+    ReactDOM.render(
+      <DndProvider backend={HTML5Backend}>
+        <Home />
+      </DndProvider>,
+      domElement
+    );
     initPublicRoutes();
     Aviator.dispatch();
   }
diff --git a/app/packs/src/libHome/RepoGenericHub.js b/app/packs/src/libHome/RepoGenericHub.js
index 9ed383ff2..db083483c 100644
--- a/app/packs/src/libHome/RepoGenericHub.js
+++ b/app/packs/src/libHome/RepoGenericHub.js
@@ -73,19 +73,21 @@ const RepoGenericHub = () => {
       field: 'name',
       minWidth: 170,
     },
-    { headerName: 'Prefix', field: 'klass_prefix' },
+    { headerName: 'Prefix', width: 80, minWidth: 80, field: 'klass_prefix' },
     { headerName: 'Element label', field: 'label' },
     {
       headerName: 'Icon',
       field: 'icon_name',
-      minWidth: 50,
-      width: 50,
+      minWidth: 80,
+      width: 80,
       sortable: false,
       filter: false,
       cellRenderer: IconRenderer,
     },
     { headerName: 'Description', field: 'desc' },
+    { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },
     { headerName: 'Released at', field: 'released_at' },
+    { headerName: 'Id', field: 'uuid' },
     {
       headerName: 'Template',
       cellRenderer: TemplateRenderer,
@@ -101,10 +103,12 @@ const RepoGenericHub = () => {
     {
       headerName: 'Belongs to',
       field: 'element_klass.name',
-      minWidth: 50,
+      minWidth: 80,
       cellRenderer: BelongsToRenderer,
     },
+    { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },
     { headerName: 'Released at', field: 'released_at' },
+    { headerName: 'Id', field: 'uuid' },
     {
       headerName: 'Template',
       cellRenderer: TemplateRenderer,
@@ -124,7 +128,9 @@ const RepoGenericHub = () => {
     {
       headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,
     },
+    { headerName: 'Version', width: 80, minWidth: 80, field: 'version' },
     { headerName: 'Released at', field: 'released_at' },
+    { headerName: 'Id', field: 'uuid' },
     {
       headerName: 'Template',
       cellRenderer: TemplateRenderer,
diff --git a/app/packs/src/libHome/RepoGenericHubDesc.js b/app/packs/src/libHome/RepoGenericHubDesc.js
index 0a1721077..15068a2a5 100644
--- a/app/packs/src/libHome/RepoGenericHubDesc.js
+++ b/app/packs/src/libHome/RepoGenericHubDesc.js
@@ -7,12 +7,14 @@ const gridData = [
   {
     desc: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
     label: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
+    version: '2.6',
     released_at: '2021-08-06T21:25:08.057Z',
     properties_release: { }
   },
   {
     desc: 'cyclic voltammetry (CV)',
     label: 'cyclic voltammetry (CV)',
+    version: '1.0',
     released_at: '2021-08-08T20:26:08.088Z',
     properties_release: { }
   }
@@ -35,6 +37,7 @@ const RepoGenericHubDesc = () => {
     {
       headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,
     },
+    { headerName: 'Version', field: 'version' },
     { headerName: 'Released at', field: 'released_at' },
     {
       headerName: 'Template',
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index 230da7ca4..dc1c72f3e 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -257,12 +257,11 @@ export default class RepoPubl extends Component {
     }
     return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
       .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
+        options: res.result?.map(u => ({
+          value: u.key,
+          name: u.name,
+          label: u.label
+        }))
       })).catch((errorMessage) => {
         console.log(errorMessage);
       });
diff --git a/app/packs/src/stores/alt/stores/CollectionStore.js b/app/packs/src/stores/alt/stores/CollectionStore.js
index 1fb4b77cc..e943ae5ee 100644
--- a/app/packs/src/stores/alt/stores/CollectionStore.js
+++ b/app/packs/src/stores/alt/stores/CollectionStore.js
@@ -53,7 +53,7 @@ class CollectionStore {
   }
 
   handleFetchSharedCollectionRoots(results) {
-    this.state.sharedRoots = results.collections;
+    this.state.sharedRoots = results?.collections;
   }
 
   handleFetchRemoteCollectionRoots(results) {
diff --git a/app/packs/src/utilities/ElementUtils.js b/app/packs/src/utilities/ElementUtils.js
index 24ee2ac6b..bd216b585 100644
--- a/app/packs/src/utilities/ElementUtils.js
+++ b/app/packs/src/utilities/ElementUtils.js
@@ -465,7 +465,6 @@ const instrumentText = (analysis) => {
   return ` Instrument: ${ttlIns.length}/${analysis.children.length}`;
 };
 
-
 const getElementSegments = (elementName, tabs) => {
   let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
   const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
@@ -476,7 +475,6 @@ const getElementSegments = (elementName, tabs) => {
   return _.uniq(tabs.concat(labels));
 }
 
-
 // the requirements for file types as given
 const isFileTypePass = (analysisType, attachments) => {
   const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
@@ -558,4 +556,5 @@ export {
   getElementSegments,
   isNmrPass,
   isDatasetPass,
+  getElementSegments,
 };
diff --git a/config/profile_default.yml b/config/profile_default.yml
index e6c0b82af..5a538c6c0 100644
--- a/config/profile_default.yml
+++ b/config/profile_default.yml
@@ -11,7 +11,7 @@ development:
         1
       :analyses:
         2
-      :literature:
+      :references:
         3
       :attachments:
         4
@@ -22,7 +22,7 @@ development:
         2
       :qc_curation:
         3
-      :literature:
+      :references:
         4
       :results:
         5
@@ -35,8 +35,6 @@ development:
         3
       :references:
         4
-      :green_chemistry:
-        5
     :layout_detail_wellplate:
       :properties:
         1
@@ -65,61 +63,7 @@ production:
         1
       :analyses:
         2
-      :literature:
-        3
-      :attachments:
-        4
-    :layout_detail_sample:
-      :properties:
-        1
-      :analyses:
-        2
-      :qc_curation:
-        3
-      :literature:
-        4
-      :results:
-        5
-    :layout_detail_reaction:
-      :scheme:
-        1
-      :properties:
-        2
-      :analyses:
-        3
       :references:
-        4
-      :green_chemistry:
-        5
-    :layout_detail_wellplate:
-      :properties:
-        1
-      :analyses:
-        2
-      :designer:
-        3
-      :list:
-        4
-    :layout_detail_screen:
-      :properties:
-        1
-      :analyses:
-        2
-
-test:
-  :layout:
-    :layout:
-      :sample: 1
-      :reaction: 2
-#      :wellplate: 3
-#      :screen: 4
-      :research_plan: 5
-    :layout_detail_research_plan:
-      :research_plan:
-        1
-      :analyses:
-        2
-      :literature:
         3
       :attachments:
         4
@@ -130,7 +74,7 @@ test:
         2
       :qc_curation:
         3
-      :literature:
+      :references:
         4
       :results:
         5
@@ -143,8 +87,7 @@ test:
         3
       :references:
         4
-      :green_chemistry:
-        5
+
     :layout_detail_wellplate:
       :properties:
         1
diff --git a/db/migrate/20230714100002_add_generic_updated_by.rb b/db/migrate/20230714100002_add_generic_updated_by.rb
deleted file mode 100644
index 4b03e978a..000000000
--- a/db/migrate/20230714100002_add_generic_updated_by.rb
+++ /dev/null
@@ -1,46 +0,0 @@
-# frozen_string_literal: true
-
-# Add column identifier into segment_klasses
-class AddGenericUpdatedBy < ActiveRecord::Migration[5.2]
-  def self.up
-    add_column :segment_klasses, :updated_by, :integer unless column_exists? :segment_klasses, :updated_by
-    add_column :segment_klasses, :released_by, :integer unless column_exists? :segment_klasses, :released_by
-    add_column :segment_klasses, :sync_by, :integer unless column_exists? :segment_klasses, :sync_by
-    add_column :segment_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :segment_klasses, :admin_ids
-    add_column :segment_klasses, :user_ids, :jsonb, default: {} unless column_exists? :segment_klasses, :user_ids
-
-    add_column :dataset_klasses, :updated_by, :integer unless column_exists? :dataset_klasses, :updated_by
-    add_column :dataset_klasses, :released_by, :integer unless column_exists? :dataset_klasses, :released_by
-    add_column :dataset_klasses, :sync_by, :integer unless column_exists? :dataset_klasses, :sync_by
-    add_column :dataset_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :dataset_klasses, :admin_ids
-    add_column :dataset_klasses, :user_ids, :jsonb, default: {} unless column_exists? :dataset_klasses, :user_ids
-
-    add_column :element_klasses, :updated_by, :integer unless column_exists? :element_klasses, :updated_by
-    add_column :element_klasses, :released_by, :integer unless column_exists? :element_klasses, :released_by
-    add_column :element_klasses, :sync_by, :integer unless column_exists? :element_klasses, :sync_by
-    add_column :element_klasses, :admin_ids, :jsonb, default: {} unless column_exists? :element_klasses, :admin_ids
-    add_column :element_klasses, :user_ids, :jsonb, default: {} unless column_exists? :element_klasses, :user_ids
-
-  end
-
-  def self.down
-    remove_column :segment_klasses, :updated_by if column_exists? :segment_klasses, :updated_by
-    remove_column :segment_klasses, :released_by if column_exists? :segment_klasses, :released_by
-    remove_column :segment_klasses, :sync_by if column_exists? :segment_klasses, :sync_by
-    remove_column :segment_klasses, :admin_ids if column_exists? :segment_klasses, :admin_ids
-    remove_column :segment_klasses, :user_ids if column_exists? :segment_klasses, :user_ids
-
-    remove_column :dataset_klasses, :updated_by if column_exists? :dataset_klasses, :updated_by
-    remove_column :dataset_klasses, :released_by if column_exists? :dataset_klasses, :released_by
-    remove_column :dataset_klasses, :sync_by if column_exists? :dataset_klasses, :sync_by
-    remove_column :dataset_klasses, :admin_ids if column_exists? :dataset_klasses, :admin_ids
-    remove_column :dataset_klasses, :user_ids if column_exists? :dataset_klasses, :user_ids
-
-    remove_column :element_klasses, :updated_by if column_exists? :element_klasses, :updated_by
-    remove_column :element_klasses, :released_by if column_exists? :element_klasses, :released_by
-    remove_column :element_klasses, :sync_by if column_exists? :element_klasses, :sync_by
-    remove_column :element_klasses, :admin_ids if column_exists? :element_klasses, :admin_ids
-    remove_column :element_klasses, :user_ids if column_exists? :element_klasses, :user_ids
-
-  end
-end
diff --git a/db/migrate/20230829100000_create_hub_logs.rb b/db/migrate/20230829100000_create_hub_logs.rb
new file mode 100644
index 000000000..2ff585562
--- /dev/null
+++ b/db/migrate/20230829100000_create_hub_logs.rb
@@ -0,0 +1,18 @@
+class CreateHubLogs < ActiveRecord::Migration[5.0]
+  def self.up
+    unless table_exists? :hub_logs
+      create_table :hub_logs do |t|
+        t.string :klass_type
+        t.string :klass_id
+        t.string :origin
+        t.string :uuid
+        t.string :version
+        t.datetime :created_at
+      end
+      end
+  end
+
+  def self.down
+    drop_table :hub_logs if table_exists? :hub_logs
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index a31421885..e0b47a1b4 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -540,6 +540,15 @@
     t.time "deleted_at"
   end
 
+  create_table "hub_logs", id: :serial, force: :cascade do |t|
+    t.string "klass_type"
+    t.string "klass_id"
+    t.string "origin"
+    t.string "uuid"
+    t.string "version"
+    t.datetime "created_at"
+  end
+
   create_table "ketcherails_amino_acids", id: :serial, force: :cascade do |t|
     t.integer "moderated_by"
     t.integer "suggested_by"
@@ -1562,28 +1571,6 @@
              order by extended_metadata -> 'instrument' limit 10
            $function$
   SQL
-  create_function :set_element_klasses_identifier, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.set_element_klasses_identifier()
-       RETURNS trigger
-       LANGUAGE plpgsql
-      AS $function$
-      begin
-      	update element_klasses set identifier = gen_random_uuid() where identifier is null;
-        return new;
-      end
-      $function$
-  SQL
-  create_function :set_dataset_klasses_identifier, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.set_dataset_klasses_identifier()
-       RETURNS trigger
-       LANGUAGE plpgsql
-      AS $function$
-      begin
-      	update dataset_klasses set identifier = gen_random_uuid() where identifier is null;
-        return new;
-      end
-      $function$
-  SQL
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
       CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
diff --git a/package.json b/package.json
index 7b8bf8243..f8f7f162f 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "redux": "^4.1.0",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.0.0",
-    "repo-review-ui": "^0.0.11",
+    "repo-review-ui": "^0.0.14",
     "sha256": "^0.2.0",
     "spark-md5": "^3.0.1",
     "svgedit": "^7.3.0",
diff --git a/yarn.lock b/yarn.lock
index 27b01c218..bc3f2f80d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3430,6 +3430,87 @@
     classcat "^5.0.3"
     zustand "^4.3.1"
 
+"@react-dnd/asap@^4.0.0":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.1.tgz#5291850a6b58ce6f2da25352a64f1b0674871aab"
+  integrity sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==
+
+"@react-dnd/invariant@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
+  integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
+
+"@react-dnd/shallowequal@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
+  integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
+
+"@reactflow/background@11.2.8":
+  version "11.2.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.2.8.tgz#aa83f87b7d65442b52732f0a04d9da981f978265"
+  integrity sha512-5o41N2LygiNC2/Pk8Ak2rIJjXbKHfQ23/Y9LFsnAlufqwdzFqKA8txExpsMoPVHHlbAdA/xpQaMuoChGPqmyDw==
+  dependencies:
+    "@reactflow/core" "11.8.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/controls@11.1.19":
+  version "11.1.19"
+  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.1.19.tgz#a8bc4b4eafc10d5d230db5286753e867bcf35e5b"
+  integrity sha512-Vo0LFfAYjiSRMLEII/aeBo+1MT2a0Yc7iLVnkuRTLzChC0EX+A2Fa+JlzeOEYKxXlN4qcDxckRNGR7092v1HOQ==
+  dependencies:
+    "@reactflow/core" "11.8.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/core@11.8.3":
+  version "11.8.3"
+  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.8.3.tgz#03ffeb06fbc141b8f786cb4ac8169f8a51a5f00e"
+  integrity sha512-y6DN8Wy4V4KQBGHFqlj9zWRjLJU6CgdnVwWaEA/PdDg/YUkFBMpZnXqTs60czinoA2rAcvsz50syLTPsj5e+Wg==
+  dependencies:
+    "@types/d3" "^7.4.0"
+    "@types/d3-drag" "^3.0.1"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/minimap@11.6.3":
+  version "11.6.3"
+  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.6.3.tgz#1cfddd87e9afd23ad704167988c66bd683ffc5d2"
+  integrity sha512-PSA28dk09RnBHOA1zb45fjQXz3UozSJZmsIpgq49O3trfVFlSgRapxNdGsughWLs7/emg2M5jmi6Vc+ejcfjvQ==
+  dependencies:
+    "@reactflow/core" "11.8.3"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-resizer@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.1.5.tgz#f4033946ccc9cc8f47a94ed93f10a32befd546f1"
+  integrity sha512-z/hJlsptd2vTx13wKouqvN/Kln08qbkA+YTJLohc2aJ6rx3oGn9yX4E4IqNxhA7zNqYEdrnc1JTEA//ifh9z3w==
+  dependencies:
+    "@reactflow/core" "11.8.3"
+    classcat "^5.0.4"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-toolbar@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.2.7.tgz#cf6639945dc42b42416f293d6132e1187bca3424"
+  integrity sha512-vs+Wg1tjy3SuD7eoeTqEtscBfE9RY+APqC28urVvftkrtsN7KlnoQjqDG6aE45jWP4z+8bvFizRWjAhxysNLkg==
+  dependencies:
+    "@reactflow/core" "11.8.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz"
@@ -3759,6 +3840,13 @@
   dependencies:
     "@types/d3-selection" "*"
 
+"@types/d3-drag@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.3.tgz#829a58420d8818be65a005795068964ff80a387b"
+  integrity sha512-82AuQMpBQjuXeIX4tjCYfWjpm3g7aGCfx6dFlxX2JlRaiME/QWcHzBsINl7gbHCODA2anPYlL31/Trj/UnjK9A==
+  dependencies:
+    "@types/d3-selection" "*"
+
 "@types/d3-dsv@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311"
@@ -3842,6 +3930,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.3.tgz#57be7da68e7d9c9b29efefd8ea5a9ef1171e42ba"
   integrity sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==
 
+"@types/d3-selection@^3.0.3":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.6.tgz#c35b5320188e921d10f77f50198705a14b8aecf6"
+  integrity sha512-2ACr96USZVjXR9KMD9IWi1Epo4rSDKnUtYn6q2SPhYxykvXTw9vR77lkFNruXVg4i1tzQtBxeDMx0oNvJWbF1w==
+
 "@types/d3-shape@*":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.0.tgz#1d87a6ddcf28285ef1e5c278ca4bdbc0658f3505"
@@ -8941,6 +9034,14 @@ generic-ui-core@^1.0.0:
     chem-units "^0.0.5"
     lodash "^4.17.21"
 
+generic-ui-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/generic-ui-core/-/generic-ui-core-1.0.0.tgz#cdd40d15f398731ba9dc6b92840051985eee0a56"
+  integrity sha512-i2BwJHB4i3IcgJnLtKLEKuzOXdWG4Bht93gv+Olz5NsIXn2u19zKPPrqbRj3xGsq1s0Ek++VjPXvTJdsGBRteQ==
+  dependencies:
+    chem-units "^0.0.5"
+    lodash "^4.17.21"
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"

From d22ba93388c44d040ec4112ac7a57c9047b08c88 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 29 Aug 2023 17:32:42 +0200
Subject: [PATCH 177/258] add fetchKlass

---
 app/packs/src/fetchers/GenericElsFetcher.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/packs/src/fetchers/GenericElsFetcher.js b/app/packs/src/fetchers/GenericElsFetcher.js
index 6c8b92b3e..f10bb58be 100644
--- a/app/packs/src/fetchers/GenericElsFetcher.js
+++ b/app/packs/src/fetchers/GenericElsFetcher.js
@@ -13,6 +13,10 @@ export default class GenericElsFetcher extends GenericBaseFetcher {
     return super.execData(params, `generic_elements/${path}`);
   }
 
+  static fetchKlassOpen() {
+    return this.open('/list?klass=ElementKlass', 'GET');
+  }
+
   static fetchByCollectionId(id, queryParams = {}, isSync = false) {
     return BaseFetcher.fetchByCollectionId(
       id,

From 4deeffbc9b606ef02758ee57896fb0a17d7fea40 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 30 Aug 2023 10:39:00 +0200
Subject: [PATCH 178/258] table select of viewer

---
 yarn.lock | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index bc3f2f80d..04bece248 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4678,13 +4678,6 @@ ag-grid-react@^29.0.0:
   dependencies:
     prop-types "^15.8.1"
 
-ag-grid-react@^27.3.0:
-  version "27.3.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
-  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
-  dependencies:
-    prop-types "^15.8.1"
-
 ag-grid-react@^28.2.1:
   version "28.2.1"
   resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.1.tgz#c38585b8f165a5cf9343eab6994c06855f5b2caf"
@@ -6138,6 +6131,11 @@ chem-generic-ui@^1.0.10:
     reactflow "^11.7.2"
     uuid "^9.0.0"
 
+chem-units@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/chem-units/-/chem-units-0.0.4.tgz#4c24d87607b16e8d1236b6f65dd8a6b7797a6345"
+  integrity sha512-lk85nyb0KGm+q2H5FQ3aRN2oubwiAj+s9dWpu2GngMvWX3I6wiszS1CJQNOJRZ150KWfhUatgECetxGTWiIFBw==
+
 chem-units@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/chem-units/-/chem-units-0.0.5.tgz#b5621a6c132ee58e7c0d7999c88ccd63a128498a"

From dce5bbccff80569c9e33a77a61068ebb668efdd2 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 30 Aug 2023 11:00:11 +0200
Subject: [PATCH 179/258] move klasses.json

---
 app/packs/src/apps/mydb/routes.js                               | 1 -
 app/packs/src/components/managingActions/ManagingActions.js     | 1 -
 .../src/components/managingActions/ManagingModalSharing.js      | 1 -
 app/packs/src/generic/Utils.js                                  | 2 +-
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/packs/src/apps/mydb/routes.js b/app/packs/src/apps/mydb/routes.js
index 4105a914f..93e87d334 100644
--- a/app/packs/src/apps/mydb/routes.js
+++ b/app/packs/src/apps/mydb/routes.js
@@ -112,7 +112,6 @@ elementNames(false).forEach((klass) => {
   routes[`/${klass}`] = item;
 });
 
-
 export default function() {
   Aviator.root = '/mydb';
   Aviator.pushStateEnabled = true;
diff --git a/app/packs/src/components/managingActions/ManagingActions.js b/app/packs/src/components/managingActions/ManagingActions.js
index 2a5cc14cc..00368cf00 100644
--- a/app/packs/src/components/managingActions/ManagingActions.js
+++ b/app/packs/src/components/managingActions/ManagingActions.js
@@ -54,7 +54,6 @@ const upState = (state) => {
       uncheckedIds: state[`${klass}`] ? state[`${klass}`].uncheckedIds : List(),
     };
   });
-  //  }
 
   return (stateObj);
 };
diff --git a/app/packs/src/components/managingActions/ManagingModalSharing.js b/app/packs/src/components/managingActions/ManagingModalSharing.js
index 725906b7a..e9a114dbb 100644
--- a/app/packs/src/components/managingActions/ManagingModalSharing.js
+++ b/app/packs/src/components/managingActions/ManagingModalSharing.js
@@ -79,7 +79,6 @@ export default class ManagingModalSharing extends React.Component {
       });
     }
 
-
     return isSampleSelectionEmpty && isReactionSelectionEmpty &&
       isWellplateSelectionEmpty && isScreenSelectionEmpty &&
       isElementSelectionEmpty;
diff --git a/app/packs/src/generic/Utils.js b/app/packs/src/generic/Utils.js
index bce950000..379094ce2 100644
--- a/app/packs/src/generic/Utils.js
+++ b/app/packs/src/generic/Utils.js
@@ -8,7 +8,7 @@ import NotificationActions from '../components/actions/NotificationActions';
 import UserStore from '../components/stores/UserStore';
 import UIActions from '../components/actions/UIActions';
 import MatrixCheck from '../components/common/MatrixCheck';
-import elklasses from 'klasses.json';
+import elklasses from '../../klasses.json';
 
 export const ALL_TYPES = [
   Constants.GENERIC_TYPES.ELEMENT,

From 5459600c2f6a228c5bafed6bcae1b25a92fe11b5 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 30 Aug 2023 13:52:14 +0200
Subject: [PATCH 180/258] new comment for grouplead

---
 app/api/chemotion/repository_api.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index cff58bfda..08b2003f0 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -767,7 +767,8 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review_history << next_node
               review['history'] = review_history
             else
-              if comment.present? && root.state == Publication::STATE_PENDING
+              is_leader = review.dig('reviewers')&.include?(current_user&.id)
+              if root.state == Publication::STATE_PENDING && (comment.present? || is_leader)
                 next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
                 review_history << next_node
                 review['history'] = review_history

From f021b7e2b2e95c4d4564bbf77e91a2f5c6b2f4d9 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Fri, 1 Sep 2023 13:44:24 +0000
Subject: [PATCH 181/258] Resolve "add nfdi4chem award"

---
 app/assets/stylesheets/repo_home.scss            | 11 ++++++++++-
 app/packs/src/libHome/RepoCardMoleculeArchive.js |  2 +-
 app/packs/src/libHome/RepoHome.js                |  7 +++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index d03507d4f..8fd6b9fa9 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -1096,4 +1096,13 @@ $bs-successcolor: #5cb85c;
   align-items: stretch;
   justify-content: center;
   margin-top: 8px;
-}
\ No newline at end of file
+}
+
+.repo-nfdi-award {
+  display: inline-flex;;
+  align-items: center;
+  justify-content: center;
+  > img {
+    width: 80%;
+  }
+}
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
index 4c9be0e6e..136d356c3 100644
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -11,7 +11,7 @@ const RepoCardMoleculeArchive = (params) => {
   }
   const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
   return (
-    <Row className="repo-statistic">
+    <Row className="repo-statistic" style={{ height: 'unset', paddingBottom: '0px' }}>
       <Col lg={12} md={12} sm={12}>
         <h3>archive for materials</h3>
       </Col>
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index db15c8c37..5535a047e 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -153,6 +153,13 @@ class RepoHome extends Component {
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <Col md={3} sm={12}>
               <RepoCardMoleculeArchive publishedStatics={this.state.publishedStatics} />
+              <a className="repo-nfdi-award" href="https://www.nfdi4chem.de/fair4chem-award/" target="_blank" rel="noreferrer">
+                <img
+                  src="/images/repo/fair4chem_chemotion_2024_EN.jpg"
+                  alt="FAIR4Chem Award"
+                  title="FAIR4Chem Award"
+                />
+              </a>
             </Col>
             <Col md={6} sm={12}>
               <RepoCardIntro lastPublished={this.state.lastPublished} />

From 1e5b86f1043d04f170af5cbbda8d20ec92d2f679 Mon Sep 17 00:00:00 2001
From: Pei-Chi Huang <pei-chi.huang@kit.edu>
Date: Fri, 1 Sep 2023 13:53:59 +0000
Subject: [PATCH 182/258] Resolve "global user label"

---
 app/api/chemotion/repository_api.rb           |  4 ++-
 app/api/entities/sample_entity.rb             |  8 +++++
 app/api/helpers/compound_helpers.rb           |  2 +-
 app/api/helpers/repository_helpers.rb         |  7 +++-
 app/assets/stylesheets/repo-labels.scss       |  9 ++++++
 app/models/user_label.rb                      |  9 +++++-
 app/packs/src/components/UserLabels.js        | 31 ++++++++++++++----
 .../src/components/chemrepo/PublicLabels.js   | 32 +++++++++++++++++++
 app/packs/src/libHome/RepoCommon.js           |  6 ++--
 app/packs/src/libHome/RepoSample.js           |  2 ++
 app/packs/src/libHome/RepoSampleDetails.js    |  4 +--
 11 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/stylesheets/repo-labels.scss
 create mode 100644 app/packs/src/components/chemrepo/PublicLabels.js

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 08b2003f0..ad90a34b9 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -608,10 +608,12 @@ def add_submission_history(root)
           embargo = find_embargo_collection(publication)
           review_sample[:embargo] = embargo&.label
           review_sample[:embargoId] = embargo&.id
-
+          label_ids = sample.tag.taggable_data['user_labels'] || [] unless sample.tag.taggable_data.nil?
+          user_labels = UserLabel.public_labels(label_ids) unless label_ids.nil?
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             sample: review_sample,
+            labels: user_labels,
             publication: publication,
             literatures: literatures,
             analyses: containers,
diff --git a/app/api/entities/sample_entity.rb b/app/api/entities/sample_entity.rb
index 3b6fefe99..879e0648f 100644
--- a/app/api/entities/sample_entity.rb
+++ b/app/api/entities/sample_entity.rb
@@ -82,6 +82,14 @@ class SampleEntity < ApplicationEntity
     expose_timestamps
 
     expose :is_repo_public
+    expose :labels
+
+    def labels
+      return [] if object.tag&.taggable_data&.nil?
+
+      label_ids = object.tag.taggable_data['user_labels'] || []
+      UserLabel.public_labels(label_ids) || []
+    end
 
     # expose :molecule, using: Entities::MoleculeEntity
     # expose :container, using: Entities::ContainerEntity
diff --git a/app/api/helpers/compound_helpers.rb b/app/api/helpers/compound_helpers.rb
index 2805ee65c..7c2c10a08 100644
--- a/app/api/helpers/compound_helpers.rb
+++ b/app/api/helpers/compound_helpers.rb
@@ -50,7 +50,7 @@ def get_xdata(inchikey, sid, req_xvial = false)
       inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = #{sid}
     SQL
 
-    data = CompoundOpenData.where("compound_open_data.x_data ->> 'xid' = e.taggable_data -> 'xvial' ->> 'num'").joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
+    data = CompoundOpenData.where("x_data ->> 'xid' = e.taggable_data -> 'xvial' ->> 'num'").joins(xvial_com_sql).order(x_created_at: :desc).pluck :x_data
 
     x_data = data.map do |obj|
       { affiliation: obj['affiliation'], provided_by: obj['provided_by'], group: obj['group'] }
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index de7333a8b..ba951aa96 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -41,6 +41,8 @@ def get_pub_reaction(id)
     schemeList = get_reaction_table(reaction.id)
     entities = Entities::ReactionEntity.represent(reaction, serializable: true)
     entities[:products].each do |p|
+      label_ids = p[:tag]['taggable_data']['user_labels'] || [] unless p[:tag]['taggable_data'].nil?
+      p[:labels] = UserLabel.public_labels(label_ids) unless label_ids.nil?
       pub_product = p
       p[:xvialCom] = build_xvial_com(p[:molecule][:inchikey], current_user&.id)
       pub_product_tag = pub_product[:tag]['taggable_data']
@@ -117,6 +119,8 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
       pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
       sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
+      label_ids = s.tag.taggable_data['user_labels'] || [] unless s.tag.taggable_data.nil?
+      user_labels = UserLabel.public_labels(label_ids) unless label_ids.nil?
       xvial = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['num'] unless s.tag.taggable_data.nil?
       if xvial.present?
         unless current_user.present? && User.reviewer_ids.include?(current_user.id)
@@ -135,7 +139,8 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
       segments = Labimotion::SegmentEntity.represent(s.segments)
       tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
-        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, comp_num: comp_num, embargo: embargo, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
+        sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, comp_num: comp_num, embargo: embargo, labels: user_labels,
+        showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
     x = published_samples.select { |s| s[:xvial].present? }
     xvial_com[:hasSample] = x.length.positive?
diff --git a/app/assets/stylesheets/repo-labels.scss b/app/assets/stylesheets/repo-labels.scss
new file mode 100644
index 000000000..01bd8872c
--- /dev/null
+++ b/app/assets/stylesheets/repo-labels.scss
@@ -0,0 +1,9 @@
+.repo-public-labels {
+  display: inline-block;
+  margin-right: 2px;
+  .badge {
+    color: white;
+    border: thin solid white;
+    border-radius: 10px;
+  }
+}
diff --git a/app/models/user_label.rb b/app/models/user_label.rb
index a4dde27c9..7d4841f92 100644
--- a/app/models/user_label.rb
+++ b/app/models/user_label.rb
@@ -15,5 +15,12 @@
 #
 
 class UserLabel < ApplicationRecord
-    acts_as_paranoid
+  acts_as_paranoid
+
+  def self.public_labels(label_ids)
+    return [] if label_ids.blank?
+    labels = UserLabel.where(id: label_ids, access_level: [1,2])
+    .order('access_level desc, position, title')
+    labels&.map{|l| {title: l.title, description: l.description, color: l.color} } ||[]
+  end
 end
diff --git a/app/packs/src/components/UserLabels.js b/app/packs/src/components/UserLabels.js
index 16ee10be7..277ef1cdb 100644
--- a/app/packs/src/components/UserLabels.js
+++ b/app/packs/src/components/UserLabels.js
@@ -29,6 +29,7 @@ class UserLabelModal extends Component {
     this.handleEditLabelClick = this.handleEditLabelClick.bind(this);
   }
 
+
   componentDidMount() {
     UserStore.listen(this.onChange);
   }
@@ -42,7 +43,7 @@ class UserLabelModal extends Component {
     const list = (labels || []).filter(r => (r.access_level === 2 || r.user_id === (currentUser && currentUser.id))) || [];
 
     this.setState({
-      labels: list
+      labels: list,
     });
   }
 
@@ -67,7 +68,7 @@ class UserLabelModal extends Component {
 
   handleAcessChange(val, e) {
     const { label } = this.state;
-    label.access_level = (val === true || val === 1) ? 1 : 0;
+    label.access_level = e?.value || 0;
     this.setState({
       label
     });
@@ -95,7 +96,7 @@ class UserLabelModal extends Component {
       UsersFetcher.updateUserLabel({
         id: label.id,
         title: label.title,
-        access_level: (label.access_level === true || label.access_level === 1) ? 1 : 0,
+        access_level: label.access_level || 0,
         description: label.description,
         color: label.color
       }).then(() => {
@@ -145,6 +146,9 @@ class UserLabelModal extends Component {
         default:
           accessLabel = '';
       }
+      const currentUser = UserStore.getState()?.currentUser;
+      const isReviewer = (currentUser?.is_reviewer) || false;
+
       return (
         <tr key={`row_${g.id}`}>
           <td md={3}><Badge style={badgeStyle}>{g.title}</Badge></td>
@@ -152,7 +156,7 @@ class UserLabelModal extends Component {
           <td md={3}>{g.description}</td>
           <td md={3}>{g.color}</td>
           <td md={3}>
-            <Button bsSize="xsmall" disabled={g.access_level === 2} bsStyle={g.access_level === 2 ? 'default' : 'success'} onClick={e => this.handleEditLabelClick(e, g)}>
+            <Button bsSize="xsmall" disabled={g.access_level === 2 && !isReviewer} bsStyle={g.access_level === 2 && !isReviewer ? 'default' : 'success'} onClick={e => this.handleEditLabelClick(e, g)}>
               {g.access_level === 2 ? 'Global' : 'Edit'}
             </Button>
           </td>
@@ -202,6 +206,17 @@ class UserLabelModal extends Component {
     const bcStyle = {
       backgroundColor: label.color || this.state.defaultColor
     };
+    const accessList = [
+      { label: 'Private - Exclusive access for you', value: 0 },
+      { label: 'Public - Shareable before publication, Visible to all after', value: 1 }
+    ];
+
+    const currentUser = UserStore.getState()?.currentUser;
+    const isReviewer = (currentUser?.is_reviewer) || false;
+
+    if (isReviewer) {
+      accessList.unshift({ label: 'Global - Open to everyone', value: 2 });
+    }
 
     return (
       <Form horizontal>
@@ -210,10 +225,12 @@ class UserLabelModal extends Component {
             Public?
           </Col>
           <Col sm={10}>
-            <Checkbox
-              inputRef={(m) => { this.accessLevelInput = m; }}
-              checked={label.access_level === 1}
+            <Select
+              name="stereoAbs"
+              clearable={false}
+              options={accessList}
               onChange={e => this.handleAcessChange(!label.access_level, e)}
+              value={label.access_level}
             />
           </Col>
         </FormGroup>
diff --git a/app/packs/src/components/chemrepo/PublicLabels.js b/app/packs/src/components/chemrepo/PublicLabels.js
new file mode 100644
index 000000000..3839d6967
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicLabels.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+
+const PublicLabels = (_labels) => {
+  if (!_labels || !Array.isArray(_labels) || _labels.length < 1) return null;
+
+  const renderTooltip = (description, title) => (
+    <Tooltip id="tooltip">
+      {description || title}
+    </Tooltip>
+  );
+
+  const output = _labels.map(_label => (
+    <OverlayTrigger
+      key={uuid.v4()}
+      placement="top"
+      overlay={renderTooltip(_label.description, _label.title)}
+    >
+      <Badge style={{ backgroundColor: _label.color }}>
+        {_label.title}
+      </Badge>
+    </OverlayTrigger >
+  ));
+  return (
+    <div className="repo-public-labels">
+      {output}
+    </div>
+  );
+};
+
+export default PublicLabels;
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 7261071a7..9ec1e009d 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -62,6 +62,7 @@ import { getFormattedISODate, getFormattedISODateTime } from '../components/chem
 import getFormattedRange from '../components/chemrepo/range-utils';
 import LdData from '../components/chemrepo/LdData';
 import PublicStore from '../components/stores/PublicStore';
+import PublicLabels from '../components/chemrepo/PublicLabels';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -995,14 +996,15 @@ const RenderAnalysisHeader = (props) => {
             <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
             <br /><br />
           </span>
-          <span style={hideInfo(molecule)}>
+          {PublicLabels(element.labels)}
+          <div style={hideInfo(molecule)}>
             {nameOrFormula}
             {iupacUserDefined}
             <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
             <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
             <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
             <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
-          </span>
+          </div>
           <h6><b>Sample DOI: </b>
             {
               isPublic ?
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 7468bdea4..8ebb1b070 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -27,6 +27,7 @@ import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
 import RepoSegment from './RepoSegment';
 import Sample from '../components/models/Sample';
 import UserCommentModal from '../components/chemrepo/UserCommentModal';
+import PublicLabels from '../components/chemrepo/PublicLabels';
 
 const scrollView = () => {
   const anchor = window.location.hash.split('#')[1];
@@ -202,6 +203,7 @@ export default class RepoSample extends Component {
           <SidToPubChem sid={sample.sid} />
           &nbsp;
           <span className="repo-public-user-comment">
+            {PublicLabels(sample.labels)}
             <PublicCommentModal
               isReviewer={isReviewer}
               id={sample.id}
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index 36a3fab8e..991a5184b 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -53,7 +53,6 @@ export default class RepoSampleDetails extends Component {
 
     let { buttons } = this.props;
 
-
     const history = review?.history || [];
     if (typeof (element) === 'undefined' || !element) {
       return <div />;
@@ -63,7 +62,7 @@ export default class RepoSampleDetails extends Component {
     }
 
     const {
-      molecule, isLogin, isReviewer, xvialCom
+      molecule, isLogin, isReviewer, xvialCom, labels
     } = element;
 
     const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
@@ -120,6 +119,7 @@ export default class RepoSampleDetails extends Component {
         segments: s.segments || [],
         boiling_point: s.boiling_point || '',
         melting_point: s.melting_point || '',
+        labels: (isPublished ? s.labels : labels) || [],
       };
 
       return (

From 966258565586a4951c34255c70d83854080f82f1 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 1 Sep 2023 14:47:48 +0200
Subject: [PATCH 183/258] copy element segments check

---
 app/packs/src/models/GenericEl.js | 16 ----------------
 app/packs/src/models/Reaction.js  | 16 ----------------
 app/packs/src/models/Sample.js    | 16 ----------------
 3 files changed, 48 deletions(-)

diff --git a/app/packs/src/models/GenericEl.js b/app/packs/src/models/GenericEl.js
index 700899431..04e2a235b 100644
--- a/app/packs/src/models/GenericEl.js
+++ b/app/packs/src/models/GenericEl.js
@@ -128,22 +128,6 @@ export default class GenericEl extends Element {
     return copy;
   }
 
-  static clearProperties(props) {
-    Object.keys(props.layers).forEach((key) => {
-      const newLayer = props.layers[key] || {};
-      newLayer.ai = [];
-      (newLayer.fields || []).forEach((f, idx) => {
-        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
-          newLayer.fields[idx].value = null;
-        }
-        if (f && (f.type === 'table')) {
-          newLayer.fields[idx].sub_values = [];
-        }
-      });
-    });
-    return props;
-  }
-
   static copyFromCollectionId(element, collection_id) {
     const target = Object.assign({}, element.properties);
     const params = {
diff --git a/app/packs/src/models/Reaction.js b/app/packs/src/models/Reaction.js
index ba497691d..e1ab17919 100644
--- a/app/packs/src/models/Reaction.js
+++ b/app/packs/src/models/Reaction.js
@@ -513,22 +513,6 @@ export default class Reaction extends Element {
   }
 
 
-  static clearProperties(props) {
-    Object.keys(props.layers).forEach((key) => {
-      const newLayer = props.layers[key] || {};
-      newLayer.ai = [];
-      (newLayer.fields || []).forEach((f, idx) => {
-        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
-          newLayer.fields[idx].value = null;
-        }
-        if (f && (f.type === 'table')) {
-          newLayer.fields[idx].sub_values = [];
-        }
-      });
-    });
-    return props;
-  }
-
   static copyFromReactionAndCollectionId(reaction, collection_id) {
     const target = Segment.buildCopy(reaction.segments);
     const params = {
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index 27eaae651..e51916bef 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -44,22 +44,6 @@ export default class Sample extends Element {
   }
 
 
-  static clearProperties(props) {
-    Object.keys(props.layers).forEach((key) => {
-      const newLayer = props.layers[key] || {};
-      newLayer.ai = [];
-      (newLayer.fields || []).forEach((f, idx) => {
-        if (f && (f.type === 'drag_sample' || f.type === 'drag_element' || f.type === 'upload')) {
-          newLayer.fields[idx].value = null;
-        }
-        if (f && (f.type === 'table')) {
-          newLayer.fields[idx].sub_values = [];
-        }
-      });
-    });
-    return props;
-  }
-
   static copyFromSampleAndCollectionId(sample, collection_id, structure_only = false, keepResidueInfo = false, keepExternalLabel = true) {
     const newSample = sample.buildCopy();
     newSample.collection_id = collection_id;

From 21e2abfac4217ea33861be37963a7eb35669bb37 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 1 Sep 2023 16:16:12 +0200
Subject: [PATCH 184/258] spectra duplicate issue

---
 app/api/chemotion/attachment_api.rb | 37 +++++++++++++++++++----------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index b42c9d2f6..1cfebaa75 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -44,6 +44,13 @@ def remove_duplicated(att)
 
         old_att&.destroy
       end
+
+      def remove_duplicated(att)
+        old_att = Attachment.find_by(filename: att.filename, attachable_id: att.attachable_id)
+        return unless old_att.id != att.id
+
+        old_att&.destroy
+      end
     end
 
     rescue_from ActiveRecord::RecordNotFound do |_error|
@@ -497,21 +504,25 @@ def remove_duplicated(att)
           att = Attachment.find(g_id)
           next unless att
           can_edit = writable?(att)
-          if can_edit
-            abs_path = att.abs_path
-            molfile = pm[:molfile]
-            result =  Tempfile.create('molfile') do |t_molfile|
-              t_molfile.write(molfile)
-              t_molfile.rewind
-              Chemotion::Jcamp::RegenerateJcamp.spectrum(
-                abs_path, t_molfile.path
-              )
-            end
 
-            att.file_data = result
-            att.rewrite_file_data!
-            { status: true }
+          next unless writable?(att)
+
+          remove_duplicated(att)
+
+          abs_path = att.abs_path
+          molfile = pm[:molfile]
+          result =  Tempfile.create('molfile') do |t_molfile|
+            t_molfile.write(molfile)
+            t_molfile.rewind
+            Chemotion::Jcamp::RegenerateJcamp.spectrum(
+              abs_path, t_molfile.path
+            )
           end
+
+          att.file_data = result
+          att.rewrite_file_data!
+          { status: true }
+
         end
       end
 

From 0e603a017e5f1ca020729f842574013cfb915d9c Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 5 Sep 2023 01:15:13 +0200
Subject: [PATCH 185/258] define unit is not working

---
 app/api/chemotion/public_api.rb       | 2 +-
 app/assets/stylesheets/repo_home.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 04af2ff24..43c1b0511 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -682,7 +682,7 @@ def query_embargo(name)
 
             scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
             elements.push(
-              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
+              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%Y-%m-%d'),
               published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
             )
           end
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 8fd6b9fa9..a4a857bb9 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -1058,7 +1058,7 @@ $bs-successcolor: #5cb85c;
 
 .white-nav-item:hover {
   text-decoration: underline;
-  text-decoration-color: lightgray;
+  text-decoration-color: #2e6da4;
   text-decoration-style: solid;
   text-decoration-thickness: 4px;
   text-underline-offset: 20%;

From f69c8d8f50e5f75d842e7fb1f54211b48a3a1727 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Tue, 5 Sep 2023 09:08:06 +0000
Subject: [PATCH 186/258] Resolve "make properties invisible"

---
 app/assets/stylesheets/repo-reaction.scss     | 13 +++
 .../chemrepo/PublicReactionProperties.js      | 67 ++++++++++++++
 .../components/chemrepo/PublicReactionTlc.js  | 74 ++++++++++++++++
 app/packs/src/libHome/RepoCommon.js           | 88 ++-----------------
 app/packs/src/libHome/RepoReactionDetails.js  | 15 ++--
 5 files changed, 167 insertions(+), 90 deletions(-)
 create mode 100644 app/assets/stylesheets/repo-reaction.scss
 create mode 100644 app/packs/src/components/chemrepo/PublicReactionProperties.js
 create mode 100644 app/packs/src/components/chemrepo/PublicReactionTlc.js

diff --git a/app/assets/stylesheets/repo-reaction.scss b/app/assets/stylesheets/repo-reaction.scss
new file mode 100644
index 000000000..4cdc99118
--- /dev/null
+++ b/app/assets/stylesheets/repo-reaction.scss
@@ -0,0 +1,13 @@
+.public-data-section {
+  border: none !important;
+  .panel-body {
+    font-size: 90%;
+    padding-bottom: unset;
+    .row {
+      padding-bottom: 8px;
+      div .description {
+        white-space: pre;
+      }
+    }
+  }
+}
diff --git a/app/packs/src/components/chemrepo/PublicReactionProperties.js b/app/packs/src/components/chemrepo/PublicReactionProperties.js
new file mode 100644
index 000000000..0d18f8210
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicReactionProperties.js
@@ -0,0 +1,67 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, Panel, Row } from 'react-bootstrap';
+import { CalcDuration, ToggleIndicator } from '../../libHome/RepoCommon';
+
+const PublicReactionProperties = ({
+  reaction, toggle, show, isPublished
+}) => {
+  if (!reaction) return null;
+  const { status, temperature } = reaction;
+  const reactionStatus = status?.trim() || '';
+  const reactionTemperature = (temperature || {}).userText || '';
+  const reactionDuration = CalcDuration(reaction);
+  if (
+    isPublished &&
+    !reactionStatus &&
+    !reactionTemperature &&
+    !reactionDuration
+  ) { return null; }
+  return (
+    <span>
+      <ToggleIndicator
+        onClick={toggle}
+        name="Properties"
+        indicatorStyle={show ? 'down' : 'right'}
+      />
+      <Panel
+        className="public-data-section"
+        id="collapsible-panel-properties"
+        expanded={show}
+        defaultExpanded={show}
+        onToggle={() => {}}
+      >
+        <Panel.Collapse>
+          <Panel.Body>
+            <Row>
+              <Col sm={4} md={4} lg={4}>
+                <b>Status: </b>
+                {reactionStatus}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Temperature: </b>
+                {temperature?.userText !== ''
+                  ? `${temperature.userText} ${temperature.valueUnit}`
+                  : ''}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Duration: </b>
+                {reactionDuration}
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+PublicReactionProperties.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export default PublicReactionProperties;
diff --git a/app/packs/src/components/chemrepo/PublicReactionTlc.js b/app/packs/src/components/chemrepo/PublicReactionTlc.js
new file mode 100644
index 000000000..63bb5c6eb
--- /dev/null
+++ b/app/packs/src/components/chemrepo/PublicReactionTlc.js
@@ -0,0 +1,74 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, Panel, Row } from 'react-bootstrap';
+import { ToggleIndicator } from '../../libHome/RepoCommon';
+
+const PublicReactionTlc = ({
+  reaction, toggle, show, isPublished
+}) => {
+  if (!reaction) return null;
+  let {
+    tlc_description: tlcDescription,
+    tlc_solvents: tlcSolvents,
+    rf_value: rfValue,
+  } = reaction;
+  tlcDescription = tlcDescription || '';
+  tlcSolvents = tlcSolvents || '';
+  rfValue = rfValue && rfValue !== '0' ? rfValue : '';
+  if (isPublished && !tlcDescription && !tlcSolvents && !rfValue) return null;
+  return (
+    <span>
+      <ToggleIndicator
+        onClick={toggle}
+        name="TLC-Control"
+        indicatorStyle={show ? 'down' : 'right'}
+      />
+      <Panel
+        className="public-data-section"
+        id="collapsible-panel-tlc"
+        expanded={show}
+        defaultExpanded={show}
+        onToggle={() => {}}
+      >
+        <Panel.Collapse>
+          <Panel.Body>
+            <Row>
+              <Col sm={2} md={2} lg={2}>
+                <b>Solvents (parts)</b>
+              </Col>
+              <Col sm={10} md={10} lg={10}>
+                {tlcSolvents}
+              </Col>
+            </Row>
+            <Row>
+              <Col sm={2} md={2} lg={2}>
+                <b>Rf-Value</b>
+              </Col>
+              <Col sm={10} md={10} lg={10}>
+                {rfValue}
+              </Col>
+            </Row>
+            <Row>
+              <Col sm={2} md={2} lg={2}>
+                <b>TLC-Description</b>
+              </Col>
+              <Col sm={10} md={10} lg={10}>
+                <div>{tlcDescription}</div>
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+PublicReactionTlc.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export default PublicReactionTlc;
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 9ec1e009d..7ce4dc17b 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -61,8 +61,9 @@ import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
 import getFormattedRange from '../components/chemrepo/range-utils';
 import LdData from '../components/chemrepo/LdData';
-import PublicStore from '../components/stores/PublicStore';
 import PublicLabels from '../components/chemrepo/PublicLabels';
+import PublicReactionTlc from '../components/chemrepo/PublicReactionTlc';
+import PublicReactionProperties from '../components/chemrepo/PublicReactionProperties';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
@@ -1247,67 +1248,6 @@ const ReactionRinChiKey = ({
   );
 };
 
-const ReactionProperties = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorProp = (show) ? 'down' : 'right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status: </b>{reaction.status}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Duration: </b>{CalcDuration(reaction)}
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionTlc = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorTlc = (show) ? 'down' : 'right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.rf_value && reaction.rf_value !== '0' ? reaction.rf_value : ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
-              <Col sm={10} md={10} lg={10}>
-                <div style={{ whiteSpace: 'pre' }}>
-                  {reaction.tlc_description || ''}
-                </div>
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
 const InputFieldYield = (props) => {
   return (
     <FormGroup>
@@ -1649,21 +1589,21 @@ const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
         </Row>
         <Row>
           <Col sm={12} md={12} lg={12}>
-            <ReactionProperties
+            <PublicReactionProperties
               reaction={reaction}
               toggle={toggleProp}
               show={showProp}
-              bodyAttrs={bodyAttrs}
+              isPublished={false}
             />
           </Col>
         </Row>
         <Row>
           <Col sm={12} md={12} lg={12}>
-            <ReactionTlc
+            <PublicReactionTlc
               reaction={reaction}
               toggle={toggleTlc}
               show={showTlc}
-              bodyAttrs={bodyAttrs}
+              isPublished={false}
             />
           </Col>
         </Row>
@@ -2166,20 +2106,6 @@ ReactionRinChiKey.propTypes = {
   bodyAttrs: PropTypes.object
 };
 
-ReactionProperties.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionTlc.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
 const DatasetDetail = ({ isPublished, element }) => {
   const { molecule } = element;
   molecule.tag = {
@@ -2358,8 +2284,6 @@ export {
   ReactionInfo,
   ReactionTable,
   ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
   RenderAnalysisHeader,
   RenderPublishAnalyses,
   RenderPublishAnalysesPanel,
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 732d3d6dc..e9da3bc30 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -15,8 +15,6 @@ import {
   Doi,
   ReactionTable,
   ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
   RenderAnalysisHeader,
   RenderPublishAnalysesPanel,
   IconToMyDB,
@@ -24,13 +22,14 @@ import {
   SchemeWord,
   resizableSvg,
 } from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
 import PublicActions from '../components/actions/PublicActions';
 import ReviewActions from '../components/actions/ReviewActions';
 import DateInfo from '../components/chemrepo/DateInfo';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import PublicAnchor from '../components/chemrepo/PublicAnchor';
 import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
+import PublicReactionTlc from '../components/chemrepo/PublicReactionTlc';
+import PublicReactionProperties from '../components/chemrepo/PublicReactionProperties';
 import UserCommentModal from '../components/chemrepo/UserCommentModal';
 import QuillViewer from '../components/QuillViewer';
 import {
@@ -137,7 +136,7 @@ export default class RepoReactionDetails extends Component {
 
   reactionInfo(reaction) {
     const { showScheme, showRinchi, showProp, showTlc } = this.state;
-    const { canComment, review_info, review } = this.props;
+    const { canComment, review_info, review, isPublished } = this.props;
 
     const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
     const content = reaction.description;
@@ -289,11 +288,11 @@ export default class RepoReactionDetails extends Component {
                 orgInfo={properties}
                 onShow={this.handleCommentBtn}
               />
-              <ReactionProperties
+              <PublicReactionProperties
                 reaction={reaction}
                 toggle={this.toggleProp}
                 show={showProp}
-                bodyAttrs={bodyAttrs}
+                isPublished={isPublished}
               />
             </Col>
           </Row>
@@ -305,11 +304,11 @@ export default class RepoReactionDetails extends Component {
                 orgInfo={tlc}
                 onShow={this.handleCommentBtn}
               />
-              <ReactionTlc
+              <PublicReactionTlc
                 reaction={reaction}
                 toggle={this.toggleTlc}
                 show={showTlc}
-                bodyAttrs={bodyAttrs}
+                isPublished={isPublished}
               />
             </Col>
           </Row>

From 554d3c653cd9b6ec08d209f854a06e86aee618ed Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 5 Sep 2023 15:39:13 +0200
Subject: [PATCH 187/258] leave a comment function

---
 app/packs/src/components/chemrepo/UserCommentModal.js | 5 +++--
 app/packs/src/components/common/RepoUserComment.js    | 5 +++--
 app/packs/src/libHome/RepoCommon.js                   | 4 ++--
 app/packs/src/libHome/RepoReactionDetails.js          | 1 +
 app/packs/src/libHome/RepoSample.js                   | 1 +
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/packs/src/components/chemrepo/UserCommentModal.js b/app/packs/src/components/chemrepo/UserCommentModal.js
index 65afc05b7..7d6acab4b 100644
--- a/app/packs/src/components/chemrepo/UserCommentModal.js
+++ b/app/packs/src/components/chemrepo/UserCommentModal.js
@@ -5,7 +5,7 @@ import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 
 const UserCommentModal = (props) => {
   const {
-    id, isLogin, title, type, pageType, pageId
+    id, isLogin, isPublished, title, type, pageType, pageId
   } = props;
   const [modalShow, setModalShow] = useState(false);
   const commentInputRef = useRef(null);
@@ -21,7 +21,7 @@ const UserCommentModal = (props) => {
     }
   };
 
-  if (isLogin) {
+  if (isPublished && isLogin) {
     return (
       <>
         <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
@@ -71,6 +71,7 @@ const UserCommentModal = (props) => {
 UserCommentModal.propTypes = {
   id: PropTypes.number.isRequired,
   isLogin: PropTypes.bool,
+  isPublished: PropTypes.bool.isRequired,
   type: PropTypes.string,
   title: PropTypes.string,
   pageType: PropTypes.string,
diff --git a/app/packs/src/components/common/RepoUserComment.js b/app/packs/src/components/common/RepoUserComment.js
index a1f14dd38..cdacbfa22 100644
--- a/app/packs/src/components/common/RepoUserComment.js
+++ b/app/packs/src/components/common/RepoUserComment.js
@@ -22,14 +22,14 @@ export default class RepoUserComment extends React.Component {
 
   render() {
     const { modalShow } = this.state;
-    const { id, isLogin, title } = this.props;
+    const { id, isLogin, isPublished, title } = this.props;
     const defaultAttrs = {
       style: {
         height: '400px', overflow: 'auto', whiteSpace: 'pre'
       }
     };
 
-    if (isLogin) {
+    if (isPublished && isLogin) {
       return (
         <span>
           <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
@@ -79,6 +79,7 @@ export default class RepoUserComment extends React.Component {
 RepoUserComment.propTypes = {
   id: PropTypes.number.isRequired,
   isLogin: PropTypes.bool,
+  isPublished: PropTypes.bool.isRequired,
   type: PropTypes.string,
   title: PropTypes.string,
   pageType: PropTypes.string,
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 7ce4dc17b..2101fe0f6 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -994,7 +994,7 @@ const RenderAnalysisHeader = (props) => {
             <span className="repo-pub-title"><b>Product</b></span>&nbsp;
             <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={element.id} data={xvial} saveCallback={updateRepoXvial} xvialCom={xvialCom} />
             <RepoPublicComment isReviewer={isReviewer} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} userInfo={userInfo} pageType="reactions" pageId={reactionId} />&nbsp;
-            <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
+            <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} isPublished={isPublic} />
             <br /><br />
           </span>
           {PublicLabels(element.labels)}
@@ -1707,7 +1707,7 @@ class RenderPublishAnalysesPanel extends Component {
             <div className="sub-title">
               <b>{kind}</b>&nbsp;<MolViewerListBtn el={element} container={analysis} isPublic={isPublic} disabled={false} />
               <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
-              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
+              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} isPublished={isPublic} />
             </div>
             {doiLink}
             {crdLink}
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index e9da3bc30..cf36e34c6 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -647,6 +647,7 @@ export default class RepoReactionDetails extends Component {
               />
               &nbsp;
               <UserCommentModal
+                isPublished={isPublished}
                 isLogin={idyLogin}
                 id={reaction.id}
                 type="Reaction"
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 8ebb1b070..ac5b74b0e 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -215,6 +215,7 @@ export default class RepoSample extends Component {
             />
             &nbsp;
             <UserCommentModal
+              isPublished={isPublished}
               isLogin={isLogin}
               id={sample.id}
               type="Sample"

From 2f0b31e6aa4b05d798d8791be47c30ad74c4ba2a Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Sun, 17 Sep 2023 20:29:40 +0000
Subject: [PATCH 188/258] Resolve "make properties invisible on publication
 page"

---
 app/api/chemotion/repository_api.rb           |  2 +-
 app/packs/src/apps/admin/AdminNavigation.js   | 16 ++++++-
 .../src/apps/commandAndControl/Navigation.js  | 15 +++++-
 .../details/reactions/ReactionDetails.js      | 12 -----
 .../ReactionDetailsMainProperties.js          |  2 +-
 .../schemeTab/ReactionDetailsDuration.js      |  2 +-
 .../schemeTab/ReactionDetailsScheme.js        |  2 +-
 .../src/components/PublishReactionModal.js    | 32 +++----------
 .../chemrepo/PublicReactionProperties.js      |  6 ++-
 .../src/components/chemrepo/PublicSample.js   | 27 +++++++----
 .../components/chemrepo/SubmissionCheck.js    | 46 +++++++++++++++++++
 .../components/chemrepo/publication-utils.js  |  9 ++++
 .../src/components/viewer/MolViewerBtn.js     |  2 +-
 .../src/components/viewer/MolViewerListBtn.js |  2 +-
 app/packs/src/libHome/Home.js                 |  2 +-
 app/packs/src/libHome/RepoCommon.js           | 23 ++++++----
 app/packs/src/libHome/RepoReactionDetails.js  | 10 +++-
 yarn.lock                                     |  5 --
 18 files changed, 140 insertions(+), 75 deletions(-)
 create mode 100644 app/packs/src/components/chemrepo/SubmissionCheck.js

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index ad90a34b9..79944ec08 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -393,7 +393,7 @@ def add_submission_history(root)
           svg_file = e.element.sample_svg_file if element_type == 'Sample'
           title = e.element.short_label if element_type == 'Sample'
           review_info = repo_review_info(e, current_user&.id, true)
-          checklist = e.review['checklist'] if User.reviewer_ids.include?(current_user&.id) || review_info[:groupleader] == true
+          checklist = e.review && e.review['checklist'] if User.reviewer_ids.include?(current_user&.id) || review_info[:groupleader] == true
           scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
 
 
diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index 73f177e6c..68a90e29e 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -7,7 +7,21 @@ import UserActions from 'src/stores/alt/actions/UserActions';
 
 import NavNewSession from 'src/components/navigation/NavNewSession';
 import DocumentHelper from 'src/utilities/DocumentHelper';
-import NavHead from 'src/components/navigation/NavHead';
+
+// import NavNewSession from '../libHome/NavNewSession';
+// import DocumentHelper from '../components/utils/DocumentHelper';
+
+const NavHead = () => (
+  <Navbar.Brand>
+    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
+      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
+      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
+      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
+    </NavDropdown>
+  </Navbar.Brand>
+);
 
 export default class AdminNavigation extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/apps/commandAndControl/Navigation.js b/app/packs/src/apps/commandAndControl/Navigation.js
index fbf126773..5cfa39253 100644
--- a/app/packs/src/apps/commandAndControl/Navigation.js
+++ b/app/packs/src/apps/commandAndControl/Navigation.js
@@ -5,9 +5,22 @@ import UserAuth from 'src/components/navigation/UserAuth';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import UserActions from 'src/stores/alt/actions/UserActions';
 
+// import NavNewSession from '../libHome/NavNewSession';
+// import DocumentHelper from '../components/utils/DocumentHelper';
 import NavNewSession from 'src/components/navigation/NavNewSession';
 import DocumentHelper from 'src/utilities/DocumentHelper';
-import NavHead from 'src/components/navigation/NavHead';
+
+const NavHead = () => (
+  <Navbar.Brand>
+    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
+      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
+      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
+      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
+    </NavDropdown>
+  </Navbar.Brand>
+);
 
 export default class Navigation extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index c8fa4cea9..951ec43e8 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -191,18 +191,6 @@ export default class ReactionDetails extends Component {
     if ((reaction.rxno || '') === '' && schemeOnly === false) {
       validates.push({ name: 'reaction_type', value: false, message: 'Reaction Type is missing.' });
     }
-    const duration = (reaction.duration || '').split(' ').shift();
-    if (duration === '' || (duration === reaction.duration)) {
-      validates.push({ name: 'duration', value: false, message: 'No duration' });
-    }
-    const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-    if (!hasTemperature) {
-      validates.push({ name: 'temperature', value: false, message: 'Temperature is missing' });
-    }
-    const desc = contentToText(reaction.description).trim() || '';
-    if (desc === '' && schemeOnly === false) {
-      validates.push({ name: 'description', value: false, message: 'Description is missing' });
-    }
 
     if (schemeOnly === false) {
       let hasAnalyses = (reaction.container.children.filter(c => c.container_type === 'analyses')[0].children.length > 0);
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
index c173e6797..3d2dd5b8e 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
@@ -133,7 +133,7 @@ export default class ReactionDetailsMainProperties extends Component {
           </Col>
           <Col md={3}>
             <FormGroup>
-              {reaction.is_published ? <ControlLabel>Temperature</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Temperature</ControlLabel>} source="requiredField" />}
+              {reaction.is_published ? <ControlLabel>Temperature</ControlLabel> : <HelpInfo optionalElement={<ControlLabel>Temperature</ControlLabel>} source="requiredField" />}
               <InputGroup>
                 <InputGroup.Button>
                   <OverlayTrigger placement="bottom" overlay={temperatureTooltip}>
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
index 7537d208b..8db338ca6 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
@@ -105,7 +105,7 @@ export default class ReactionDetailsDuration extends Component {
         </Col>
         <Col md={3} sm={6}>
           <FormGroup>
-            {reaction.is_published ? <ControlLabel>Duration</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Duration</ControlLabel>} source="requiredField" />}
+            {reaction.is_published ? <ControlLabel>Duration</ControlLabel> : <HelpInfo optionalElement={<ControlLabel>Duration</ControlLabel>} source="requiredField" />}
             <InputGroup>
               <FormControl type="text" value={durationCalc || ''} disabled placeholder="Duration" />
               <InputGroup.Button>
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
index 27a5bf9bd..7538534a6 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
@@ -967,7 +967,7 @@ export default class ReactionDetailsScheme extends Component {
             <Row>
               <Col md={12}>
                 <FormGroup>
-                  {reaction.is_published ? <ControlLabel>Description</ControlLabel> : <span><HelpInfo optionalElement={<ControlLabel className="field_required">Description</ControlLabel>} source="requiredField" />&nbsp;<HelpInfo source="description" place="right" /></span>}
+                  {reaction.is_published ? <ControlLabel>Description</ControlLabel> : <span><HelpInfo optionalElement={<ControlLabel>Description</ControlLabel>} source="requiredField" />&nbsp;<HelpInfo source="description" place="right" /></span>}
                   <div className="quill-resize">
                     {
                       permitOn(reaction) ?
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
index d5e18578f..c884a1a70 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -27,8 +27,8 @@ import { groupByCitation, Citation } from '../components/LiteratureCommon';
 import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
 import CollaboratorFetcher from '../components/fetchers/CollaboratorFetcher';
 import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-import { contentToText } from './utils/quillFormat';
 import { CitationTypeMap, CitationTypeEOL } from './CitationType';
+import SubmissionCheck from './chemrepo/SubmissionCheck';
 
 const AnalysisIdstoPublish = element => (
   element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
@@ -611,13 +611,6 @@ export default class PublishReactionModal extends Component {
     if (isFullyPublish) {
       validates.push({ name: 'embargo', value: selectedEmbargo !== '-1' || (selectedEmbargo === '-1' && noEmbargo), message: 'No embargo bundle' });
       validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-      const desc = contentToText(reaction.description).trim() || '';
-      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
       const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
       validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
       const hasSv =
@@ -638,12 +631,6 @@ export default class PublishReactionModal extends Component {
           }
         });
       }
-    } else {
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
     }
     validates = this.state.noAmountYield ? validates : validates.concat(validateYield(reaction));
     return validates;
@@ -659,8 +646,6 @@ export default class PublishReactionModal extends Component {
     const canPublish = isFullyPublish ? this.validateAnalyses() : true;
     const validateInfo = this.validatePub(isFullyPublish);
     const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
-    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
-    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
     const validated = !!(validateObjs && validateObjs.length === 0);
 
     let selectedAnalysesCount = (this.state.reaction.analyses || [])
@@ -769,7 +754,7 @@ export default class PublishReactionModal extends Component {
 
       return (
         <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
+          <Modal dialogClassName="structure-viewer-modal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
             <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
               <Grid style={{ width: '100%' }}>
                 <Col sm={6} lg={6}>
@@ -800,14 +785,6 @@ export default class PublishReactionModal extends Component {
                 onCC0ConsentChange={this.handleCC0ConsentChange}
                 cc0Deed={cc0Consent}
               />
-              <FormGroup>
-                <Col md={12} sm={12}>
-                  <div style={{
-                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
-                }}>{validateMsg}
-                  </div>
-                </Col>
-              </FormGroup>
               <div className={`display-${isFullyPublish}`}>
                 <ReactionInfo
                   reaction={reaction}
@@ -832,6 +809,10 @@ export default class PublishReactionModal extends Component {
                   onUnitChange={this.handleUnitChange}
                 />
               </div>
+              <div style={{ margin: '5px 0px' }}>
+                <SubmissionCheck validates={validateInfo} />
+              </div>
+              {awareEmbargo}
               <Checkbox
                 onChange={() => { this.handleNoSolventCheck(); }}
                 checked={this.state.noSolvent}
@@ -846,7 +827,6 @@ export default class PublishReactionModal extends Component {
               >
                 <span>Skip amount and yield validation (the product has no amount and yield)</span>
               </Checkbox>
-              {awareEmbargo}
               <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
                 <Panel
                   eventKey="2"
diff --git a/app/packs/src/components/chemrepo/PublicReactionProperties.js b/app/packs/src/components/chemrepo/PublicReactionProperties.js
index 0d18f8210..88fba195f 100644
--- a/app/packs/src/components/chemrepo/PublicReactionProperties.js
+++ b/app/packs/src/components/chemrepo/PublicReactionProperties.js
@@ -40,13 +40,15 @@ const PublicReactionProperties = ({
                 {reactionStatus}
               </Col>
               <Col sm={4} md={4} lg={4}>
-                <b>Temperature: </b>
+                {isPublished && !reactionTemperature ? '' : (<b>Temperature: </b>)}
                 {temperature?.userText !== ''
                   ? `${temperature.userText} ${temperature.valueUnit}`
                   : ''}
               </Col>
               <Col sm={4} md={4} lg={4}>
-                <b>Duration: </b>
+                {isPublished && !reactionDuration ? '' : (
+                  <b>Duration: </b>
+                )}
                 {reactionDuration}
               </Col>
             </Row>
diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
index 8dd0d1c39..b9bae3f3f 100644
--- a/app/packs/src/components/chemrepo/PublicSample.js
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 import { Citation, literatureContent, RefByUserInfo } from '../LiteratureCommon';
 import { ChemotionId, CommentBtn, Doi } from '../../libHome/RepoCommon';
-import getFormattedRange from './range-utils';
+import { formatPhysicalProps } from './publication-utils';
 
 const PublicSample = (_props) => {
   const {
@@ -28,8 +28,9 @@ const PublicSample = (_props) => {
     ? sample.literatures.map(lit => literatureContent(lit, true)).join('')
     : '';
 
-  const referencesPhysicalProp = canComment && (sample.melting_point || sample.boiling_point)
-  ? `Melting point:[${getFormattedRange(sample.melting_point)}]; Boiling point:[${getFormattedRange(sample.boiling_point)}]`
+  const { meltingPoint, boilingPoint, showPhysicalProps } = formatPhysicalProps(sample);
+  const referencesPhysicalProp = canComment && (!!meltingPoint || !!boilingPoint)
+  ? `Melting point:[${meltingPoint}]; Boiling point:[${boilingPoint}]`
   : '';
 
   const reactionLink = sample.reaction_ids?.length > 0 ? (
@@ -78,13 +79,19 @@ const PublicSample = (_props) => {
           <div><div>{references}</div></div>
         </span>
       </h5>
-      <br />
-      <div>
-        <b>Physical Properties:</b>
-        <CommentBtn {..._props} field="Physical Properties" orgInfo={referencesPhysicalProp} onShow={handleCommentBtn} />
-        <div>Melting point: {getFormattedRange(sample.melting_point)}</div>
-        <div>Boiling point: {getFormattedRange(sample.boiling_point)}</div>
-      </div>
+      {
+        (!isPublished || showPhysicalProps) && (
+          <>
+          <br />
+          <div>
+            <b>Physical Properties:</b>
+            <CommentBtn {..._props} field="Physical Properties" orgInfo={referencesPhysicalProp} onShow={handleCommentBtn} />
+            <div>Melting point: {meltingPoint}</div>
+            <div>Boiling point: {boilingPoint}</div>
+          </div>
+          </>
+        )
+      }
     </div>
   );
 };
diff --git a/app/packs/src/components/chemrepo/SubmissionCheck.js b/app/packs/src/components/chemrepo/SubmissionCheck.js
new file mode 100644
index 000000000..bbf962d97
--- /dev/null
+++ b/app/packs/src/components/chemrepo/SubmissionCheck.js
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+const SubmissionCheck = (props) => {
+  const { validates } = props;
+  if (!validates) return null;
+
+  let failure = validates.filter(v => !v.value);
+  if (!failure || failure.length < 1) return null;
+
+  const [show, setShow] = useState(true);
+
+  if (!show) {
+    return (
+      <Button className="btn-unified" bsSize="small" style={{ width: '100%' }} onClick={() => setShow(true)}>Show Submission Data Check Result</Button>
+    );
+  }
+
+  const style = { true: { color: 'green' }, false: { color: 'red' }, default: { color: 'black' } };
+  failure = failure.filter(v => !v.value).map(v =>
+    (<div key={`_submission_validate_${v.name}`} style={style[v.value]}><i className={`fa fa-${v.value ? 'check' : 'times'}-circle-o`} aria-hidden="true" />&nbsp;{v.message}</div>));
+  const result = (
+    <div
+      className="news-box"
+      style={{
+        width: '100%', fontSize: 'unset', margin: 'unset', borderRadius: '5px'
+      }}
+    >
+      <h4>Submission Data Check Result</h4>
+      {failure}
+    </div>
+  );
+
+  return result;
+};
+
+SubmissionCheck.propTypes = {
+  validates: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string,
+    message: PropTypes.string,
+  })).isRequired,
+};
+
+export default SubmissionCheck;
diff --git a/app/packs/src/components/chemrepo/publication-utils.js b/app/packs/src/components/chemrepo/publication-utils.js
index 3c1ccafcd..89b259751 100644
--- a/app/packs/src/components/chemrepo/publication-utils.js
+++ b/app/packs/src/components/chemrepo/publication-utils.js
@@ -1,3 +1,5 @@
+import getFormattedRange from './range-utils';
+
 export const getElementType = element => element?.tag?.taggable_type;
 
 export const getPublicationId = (element) => {
@@ -12,3 +14,10 @@ export const getAuthorLabel = (authorIds) => {
   if (!authorIds) return '';
   return authorIds.length > 1 ? 'Authors:' : 'Author:';
 };
+
+export const formatPhysicalProps = (element) => {
+  const meltingPoint = getFormattedRange(element.melting_point);
+  const boilingPoint = getFormattedRange(element.boiling_point);
+  const showPhysicalProps = (!!meltingPoint || !!boilingPoint);
+  return { meltingPoint, boilingPoint, showPhysicalProps };
+};
diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
index 78bff4c2a..f79aeac3c 100644
--- a/app/packs/src/components/viewer/MolViewerBtn.js
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -24,7 +24,7 @@ export default class MolViewerBtn extends Component {
     } = this.props;
     const config = UIStore.getState().moleculeViewer || PublicStore.getState().moleculeViewer;
     const { show } = this.state;
-    if (isPublic && !config.featureEnabled) return null;
+    if (isPublic && !config?.featureEnabled) return null;
 
     return (
       <>
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index 44e7ffb5e..3602d3447 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -46,7 +46,7 @@ export default class MolViewerListBtn extends Component {
     const { openModal } = this.state;
     const config = UIStore.getState().moleculeViewer || PublicStore.getState().moleculeViewer;
     if (!el) return null;
-    if (isPublic && !config.featureEnabled) return null;
+    if (isPublic && !config?.featureEnabled) return null;
 
     if (container?.children?.length < 1) { return this.renderBtn(true); }
 
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 3746e744d..c7be2d1a1 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -57,7 +57,7 @@ class Home extends Component {
   componentDidMount() {
     PublicStore.listen(this.onChange);
     RStore.listen(this.onChange);
-    PublicActions.initialize.defer();
+    PublicActions.initialize();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 2101fe0f6..4008f9d5e 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -59,7 +59,7 @@ import MolViewerBtn from '../components/viewer/MolViewerBtn';
 import MolViewerListBtn from '../components/viewer/MolViewerListBtn';
 import LicenseIcon from '../components/chemrepo/LicenseIcon';
 import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
-import getFormattedRange from '../components/chemrepo/range-utils';
+import { formatPhysicalProps } from '../components/chemrepo/publication-utils';
 import LdData from '../components/chemrepo/LdData';
 import PublicLabels from '../components/chemrepo/PublicLabels';
 import PublicReactionTlc from '../components/chemrepo/PublicReactionTlc';
@@ -981,6 +981,7 @@ const RenderAnalysisHeader = (props) => {
       <Citation key={lit.id} literature={lit} />
     </li>
   )) : [];
+  const { meltingPoint, boilingPoint, showPhysicalProps } = formatPhysicalProps(element);
   return (
     <div>
       <br />
@@ -1042,14 +1043,18 @@ const RenderAnalysisHeader = (props) => {
           <RepoSegment segments={element.segments} />
         </Col>
       </Row>
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          <h5><b>Physical Properties:</b></h5>
-          <div>Melting point: {getFormattedRange(element.melting_point)}</div>
-          <div>Boiling point: {getFormattedRange(element.boiling_point)}</div>
-        </Col>
-      </Row>
-      < br/>
+      {
+        (!isPublic || showPhysicalProps) && (
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <h5><b>Physical Properties:</b></h5>
+              <div>Melting point: {meltingPoint}</div>
+              <div>Boiling point: {boilingPoint}</div>
+            </Col>
+          </Row>
+        )
+      }
+      <br />
     </div>
   );
 };
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index cf36e34c6..b0bfeaac3 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -152,7 +152,10 @@ export default class RepoReactionDetails extends Component {
         <QuillViewer value={content} preview />
       </span>
     );
-    if (descContent === '') descQV = '';
+    if (descContent === '') {
+      if (isPublished) descQV = '';
+      else descQV = <span><b>Description:</b><br /><br /></span>;
+    }
 
     const addinfoContent =
       additionInfo &&
@@ -167,7 +170,10 @@ export default class RepoReactionDetails extends Component {
         <QuillViewer value={additionInfo} preview />
       </span>
     );
-    if (addinfoContent === '') addQV = '';
+    if (addinfoContent === '') {
+      if (isPublished) addQV = '';
+      else addQV = <span><b>Additional information for publication and purification details:</b><br /><br /></span>;
+    }
 
     const temperature = reaction.temperature
       ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}`
diff --git a/yarn.lock b/yarn.lock
index 04bece248..e14fbc4e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6131,11 +6131,6 @@ chem-generic-ui@^1.0.10:
     reactflow "^11.7.2"
     uuid "^9.0.0"
 
-chem-units@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/chem-units/-/chem-units-0.0.4.tgz#4c24d87607b16e8d1236b6f65dd8a6b7797a6345"
-  integrity sha512-lk85nyb0KGm+q2H5FQ3aRN2oubwiAj+s9dWpu2GngMvWX3I6wiszS1CJQNOJRZ150KWfhUatgECetxGTWiIFBw==
-
 chem-units@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/chem-units/-/chem-units-0.0.5.tgz#b5621a6c132ee58e7c0d7999c88ccd63a128498a"

From 6b735b3eac09eaca67bb96189582fc9d305e15db Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Thu, 19 Oct 2023 12:42:26 +0000
Subject: [PATCH 189/258] Resolve "generic dataset of publication page"

---
 app/api/chemotion/repository_api.rb           |  4 +-
 .../components/container/ContainerDataset.js  |  1 +
 .../container/ContainerDatasetModal.js        |  1 +
 .../components/generic/GenericDSDetails.js    | 80 +++++++++----------
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 79944ec08..bbd78a995 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -769,8 +769,8 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review_history << next_node
               review['history'] = review_history
             else
-              is_leader = review.dig('reviewers')&.include?(current_user&.id)
-              if root.state == Publication::STATE_PENDING && (comment.present? || is_leader)
+              # is_leader = review.dig('reviewers')&.include?(current_user&.id)
+              if root.state == Publication::STATE_PENDING # && (comment.present? || is_leader)
                 next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
                 review_history << next_node
                 review['history'] = review_history
diff --git a/app/packs/src/components/container/ContainerDataset.js b/app/packs/src/components/container/ContainerDataset.js
index cdfc51633..0730c8272 100644
--- a/app/packs/src/components/container/ContainerDataset.js
+++ b/app/packs/src/components/container/ContainerDataset.js
@@ -569,6 +569,7 @@ export default class ContainerDataset extends Component {
             klass={klass}
             kind={kind}
             onChange={this.handleDSChange}
+            readOnly={readOnly || disabled}
           />
         </Col>
       </Row>
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
index bbd6703aa..967c8aec9 100644
--- a/app/packs/src/components/container/ContainerDatasetModal.js
+++ b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -35,6 +35,7 @@ export default class ContainerDatasetModal extends Component {
             <ContainerDataset
               ref={this.datasetInput}
               readOnly={readOnly}
+              disabled={disabled}
               dataset_container={dataset_container}
               kind={kind}
               onModalHide={() => onHide()}
diff --git a/app/packs/src/components/generic/GenericDSDetails.js b/app/packs/src/components/generic/GenericDSDetails.js
index da1bcb7f3..2db6b8686 100644
--- a/app/packs/src/components/generic/GenericDSDetails.js
+++ b/app/packs/src/components/generic/GenericDSDetails.js
@@ -1,15 +1,28 @@
-/* eslint-disable no-restricted-globals */
 /* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { GenInterface, GenButtonReload, absOlsTermLabel } from 'chem-generic-ui';
+import { LayerPlain } from 'chem-generic-ui-viewer';
 import { Panel, ButtonToolbar } from 'react-bootstrap';
-import {
-  GenInterface,
-  GenButtonReload,
-  absOlsTermLabel,
-} from 'chem-generic-ui';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import MatrixCheck from 'src/components/common/MatrixCheck';
+
+const elementalPropertiesItem = (genericDS, onChange, readOnly = false) => {
+  const { properties } = genericDS;
+  const layersLayout = readOnly ?
+    (<LayerPlain
+      layers={properties.layers}
+      options={properties.select_options || {}}
+      id={properties.uuid}
+    />) : (
+      <GenInterface
+        generic={genericDS}
+        fnChange={onChange}
+        isPreview={false}
+        isActiveWF={false}
+        fnNavi={() => {}}
+      />
+    );
+  return (<div style={{ margin: '5px' }}>{layersLayout}</div>);
+};
 
 class GenericDSDetails extends Component {
   constructor(props) {
@@ -28,46 +41,30 @@ class GenericDSDetails extends Component {
     onChange(genericDS);
   }
 
-  elementalPropertiesItem(genericDS) {
-    const { onChange } = this.props;
-    const layersLayout = (
-      <GenInterface
-        generic={genericDS}
-        fnChange={onChange}
-        isPreview={false}
-        isActiveWF={false}
-        fnNavi={() => {}}
-      />
-    );
-    return <div style={{ margin: '5px' }}>{layersLayout}</div>;
-  }
-
   render() {
-    const { genericDS, kind, klass } = this.props;
-    const currentUser =
-      (UserStore.getState() && UserStore.getState().currentUser) || {};
-    if (
-      MatrixCheck(currentUser.matrix, 'genericDataset') &&
-      Object.keys(genericDS).length !== 0
-    ) {
+    const {
+      genericDS, kind, klass, onChange, readOnly
+    } = this.props;
+    if (Object.keys(genericDS).length !== 0) {
       return (
         <Panel className="panel-detail generic-ds-panel">
           <Panel.Body>
-            {this.elementalPropertiesItem(genericDS)}
+            {elementalPropertiesItem(genericDS, onChange, readOnly)}
             <span className="g-ds-note label">
-              <span className="g-ds-title">Note</span>
-              <br />
-              Selected analysis type: {absOlsTermLabel(kind)}
-              <br />
+              <span className="g-ds-title">Note</span><br />
+              {readOnly ? null : (<>Selected analysis type: {absOlsTermLabel(kind)}<br /></>)}
               Content is designed for: {genericDS.klass_label}
             </span>
-            <ButtonToolbar className="pull-right">
-              <GenButtonReload
-                klass={klass}
-                generic={genericDS}
-                fnReload={this.handleReload}
-              />
-            </ButtonToolbar>
+            {readOnly ?
+              null : (
+                <ButtonToolbar className="pull-right">
+                  <GenButtonReload
+                    klass={klass}
+                    generic={genericDS}
+                    fnReload={this.handleReload}
+                  />
+                </ButtonToolbar>
+              )}
           </Panel.Body>
         </Panel>
       );
@@ -81,6 +78,7 @@ GenericDSDetails.propTypes = {
   genericDS: PropTypes.object,
   klass: PropTypes.object,
   onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool.isRequired,
 };
 GenericDSDetails.defaultProps = { kind: '', genericDS: {}, klass: {} };
 

From c8c50a59f1f3768afc467ba3e263fb2cc4e191f8 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 19 Oct 2023 09:26:19 +0200
Subject: [PATCH 190/258] fix the issue that occurs when there is no file
 extension in the filename

---
 app/packs/src/components/viewer/MolViewerListBtn.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index 3602d3447..3bb592442 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -56,7 +56,7 @@ export default class MolViewerListBtn extends Component {
     datasetContainer = datasetContainer.map((dc) => {
       const ds = Object.assign({}, dc);
       const { attachments } = ds;
-      ds.attachments = attachments.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment.filename?.match(/\.([^.]+)$/)[1].toLowerCase()));
+      ds.attachments = attachments.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment.filename?.match(/\.([^.]+)$/)?.[1]?.toLowerCase()));
       if (ds.attachments.length > 0) return ds;
       return null;
     });

From 0122e3bdf8e80b80d0fd59781260c1d0bb61b5b6 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Tue, 24 Oct 2023 10:56:04 +0000
Subject: [PATCH 191/258] Resolve "reviewers introduction"

---
 .gitignore                                    |  3 +
 app/assets/stylesheets/repo_home.scss         | 23 ++++-
 .../src/components/fetchers/PublicFetcher.js  | 12 +++
 .../src/libHome/RepoCardMoleculeArchive.js    |  3 +-
 .../src/libHome/RepoCardReviewerIntro.js      | 94 +++++++++++++++++++
 app/packs/src/libHome/RepoCardStaticsBoard.js |  7 +-
 app/packs/src/libHome/RepoCommon.js           |  3 +-
 app/packs/src/libHome/RepoGenericHub.js       | 30 +++---
 app/packs/src/libHome/RepoGenericHubDesc.js   | 86 ++++-------------
 app/packs/src/libHome/RepoHome.js             | 47 ++++++++--
 package.json                                  |  1 -
 yarn.lock                                     | 18 ----
 12 files changed, 205 insertions(+), 122 deletions(-)
 create mode 100644 app/packs/src/libHome/RepoCardReviewerIntro.js

diff --git a/.gitignore b/.gitignore
index 535d83579..7ba61bf3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -94,6 +94,9 @@
 !/public/images/ghs/
 !/public/images/creative_common/
 
+/public/intro/*
+!/public/intro/.keep
+
 /public/editors/*
 !/public/editors/.keep
 /public/favicon.ico
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index a4a857bb9..f70e15f22 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -264,7 +264,7 @@ $bs-successcolor: #5cb85c;
 }
 
 .icon-chemotion {
-  width: 20%;
+  width: 15%;
 }
 
 .icon-nfdi4chem {
@@ -304,6 +304,25 @@ $bs-successcolor: #5cb85c;
   background-color: #efefef;
 }
 
+.reviewers-intro {
+  background-color: aliceblue;
+}
+
+.card-reviewers {
+  img {
+    max-height: 250px;
+    max-width: 200px;
+  }
+  h3, h4 {
+    font-weight: bolder;
+    min-height: 40px;
+  }
+  .description {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+}
+
 .card-partners {
   background-color: #f5f5f5;
   .partner-heading {
@@ -595,6 +614,7 @@ $bs-successcolor: #5cb85c;
 
 .repo-statistic {
   @extend .card-well;
+  background-color: unset;
   padding-bottom: 10px;
   > div {
     flex: 1;
@@ -1014,6 +1034,7 @@ $bs-successcolor: #5cb85c;
       height: 100%;
       display: flex;
       flex-direction: column;
+      overflow: auto;
       .btn-group{
         display: inline-flex !important;
         .btn {
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
index d05961e38..6075b46da 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -298,4 +298,16 @@ export default class PublicFetcher {
       throw new Error(errorMessage);
     });
   }
+
+  static reviewers() {
+    const promise = fetch('/intro/reviewers.json', {
+      cache: 'no-store',
+      credentials: 'same-origin',
+      headers: { 'cache-control': 'no-cache' }
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
 }
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
index 136d356c3..c9fd72547 100644
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import CountUp from 'react-countup';
 import Aviator from 'aviator';
 
 const RepoCardMoleculeArchive = (params) => {
@@ -29,7 +28,7 @@ const RepoCardMoleculeArchive = (params) => {
         <Col lg={12} md={12} sm={12} className="panel-heading dtl">
           <div className="rr">
             <div className="cnt">
-              <CountUp end={count} />{' '}
+              {count}{' '}
               <OverlayTrigger placement="top" overlay={tooltipView}>
                 <Button bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
                   published
diff --git a/app/packs/src/libHome/RepoCardReviewerIntro.js b/app/packs/src/libHome/RepoCardReviewerIntro.js
new file mode 100644
index 000000000..60723b1ef
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardReviewerIntro.js
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Col, Row } from 'react-bootstrap';
+import uuid from 'uuid';
+import ContactEmail from '../components/chemrepo/core/ContactEmail';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+
+const ReviewerCard = ({
+  name, photo, tel, email
+}) => (
+  <div className="card-reviewers">
+    <img src={`/images/reviewers/${photo}?random=${uuid.v4()}`} alt={photo} />
+    <h4>{name}</h4>
+    <p>Tel.: {tel}</p>
+    <ContactEmail email={email} label={name} />
+    <br /><br /><br /><br />
+  </div>
+);
+
+ReviewerCard.propTypes = {
+  name: PropTypes.string.isRequired,
+  photo: PropTypes.string.isRequired,
+  tel: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+};
+
+export const ReviewGuidelines = () => (
+  <Row>
+    <Col md={12} sm={12}>
+      <div className="card-reviewers">
+        <h3>Chemotion Repository Review Guidelines</h3>
+        <p className="description">
+          The Chemotion Repository is a curated repository. The submitted entries are curated with respect to formal aspects and feedback is given referring to possible questions or errors. This effort is done to ensure a high quality of the submitted data and to provide data according to community standards. The most important formatting requirements and other hints that can help users to pass the curation easily are described in detail in the documentation, e.g. here (and following pages): <a href="https://www.chemotion.net/docs/repo/details_standards/characterization" target="_blank" rel="noreferrer">Chemotion Repository &gt; Details and Standards</a>
+        </p>
+        <p className="description">
+          The reviewers involved in the curation are volunteers that support the idea of collecting open data. They do their best to guide and support users. All reviewers confirmed to work according to ethical standards. This means in detail that reviewers declare that they will thoroughly review all submissions for publication to the best of their knowledge and ability. They pledge to treat all content confidentially and to not disclose any information, whether personal or factual, to third parties during the review process. They will assess all submissions neutrally, impartially, and by the same criteria. If a conflict of interest arises, they will decline the review of the submission and transfer it to another reviewer for evaluation.
+        </p>
+        <p className="description">
+          Please don&#39;t hesitate to contact the reviewers assigned to your submissions if there are any questions. Please use the option to answer per feedback note to the reviewers. We are glad for all comments and explanations - if there are things to be discussed.
+        </p>
+      </div>
+    </Col>
+  </Row>
+);
+
+const RepoCardReviewers = () => {
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    PublicFetcher.reviewers().then((json) => {
+      setData(json);
+    }).catch(err => console.log('error while loading reviewers, message =', err));
+  }, []);
+
+  if (data.length < 1) return null;
+
+  const cards = data.map(item =>
+    (<Col key={item.id} lg={3} md={6} sm={12}><ReviewerCard {...item} /></Col>));
+
+  return (
+    <>
+      <Row>
+        <Col md={12} sm={12}><div className="home-title"><span>The Reviewers</span></div></Col>
+      </Row>
+      <Row>
+        <Col md={0} sm={12}>&nbsp;</Col>
+        <Col md={12} sm={12}>{cards}</Col>
+        <Col md={0} sm={12}>&nbsp;</Col>
+      </Row>
+    </>
+  );
+};
+
+export const RepoCardReviewerIntro = () => (
+  <Row className="reviewers-intro">
+    <Col lg={12} md={12} sm={12}>
+      <ReviewGuidelines />
+      <RepoCardReviewers />
+    </Col>
+  </Row>
+);
+
+export const RepoCardReviewerIntroBtn = (props) => {
+  const { onClick, show } = props;
+  return (
+    <Button style={{ backgroundColor: '#efefef', color: 'black', flex: 'auto' }} bsSize="small" onClick={onClick}>
+      Chemotion Repository Review Guidelines<br />
+      <i style={{ color: 'black' }} className={`fa fa-caret-${show ? 'up' : 'down'}`} aria-hidden="true" />
+    </Button>);
+};
+
+RepoCardReviewerIntroBtn.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/libHome/RepoCardStaticsBoard.js
index 708d97d56..01dfcd032 100644
--- a/app/packs/src/libHome/RepoCardStaticsBoard.js
+++ b/app/packs/src/libHome/RepoCardStaticsBoard.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import CountUp from 'react-countup';
 import PublicActions from '../components/actions/PublicActions';
 import RepoNavListTypes from './RepoNavListTypes';
 
@@ -41,7 +40,7 @@ const RepoCardStaticsBoard = (params) => {
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
               <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />{' '}
+                {stsSample.e_cnt}{' '}
                 <OverlayTrigger placement="top" overlay={tooltipView}>
                   <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
                     published
@@ -67,7 +66,7 @@ const RepoCardStaticsBoard = (params) => {
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
               <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />{' '}
+                {stsReaction.e_cnt}{' '}
                 <OverlayTrigger placement="top" overlay={tooltipView}>
                   <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
                     published
@@ -88,7 +87,7 @@ const RepoCardStaticsBoard = (params) => {
           </Col>
           <Col lg={12} md={12} sm={12} className="panel-heading dtl">
             <Row className="rr">
-              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
+              <div className="cnt">{stsAnalysisCnt}&nbsp;<span className="tit">published</span></div>
               <div style={{ display: 'flex' }}>
                 <div>Top 3:&nbsp;&nbsp;</div>
                 <div className="italic-desc">
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 4008f9d5e..c83253426 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -126,11 +126,12 @@ const NewsroomTemplate = {
 };
 
 const HomeFeature = props => (
-  <div className="feature-block">
+  <div className="feature-block" style={props.extraStyle}>
     <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
     <p>
       {props.intro}
     </p>
+    {props.extra}
   </div>
 );
 
diff --git a/app/packs/src/libHome/RepoGenericHub.js b/app/packs/src/libHome/RepoGenericHub.js
index db083483c..3837e0c0c 100644
--- a/app/packs/src/libHome/RepoGenericHub.js
+++ b/app/packs/src/libHome/RepoGenericHub.js
@@ -164,30 +164,24 @@ const RepoGenericHub = () => {
   };
 
   return (
-    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-      <Col md={12}>
+    <Row className="repo-welcome">
+      <Col lg={12} md={12} sm={12}>
         <div className="repo-generic-hub-layout">
           <div className="repo-generic-hub-inner">
-            <Button onClick={clickExpand} className="expand-button">
-              <i
-                className={`fa fa-caret-${expanded ? 'right' : 'left'}`}
-                aria-hidden="true"
-              />
-            </Button>
             <div className="content">
-              {!expanded && <RepoGenericHubDesc />}
-              {expanded && (
-                <ButtonGroup>
-                  <Button className="hub-menu" active={menuSelected === 'element'} onClick={e => clickMenu(e, 'element')}>Generic Element Template</Button>
-                  <Button className="hub-menu" active={menuSelected === 'segment'} onClick={e => clickMenu(e, 'segment')}>Generic Segment Template</Button>
-                  <Button className="hub-menu" active={menuSelected === 'dataset'} onClick={e => clickMenu(e, 'dataset')}>Generic Dataset Template</Button>
-                </ButtonGroup>
-              )}
+              <RepoGenericHubDesc />
+              <ButtonGroup>
+                <Button className="hub-menu" active={menuSelected === 'element'} onClick={e => clickMenu(e, 'element')}>Generic Element Template</Button>
+                <Button className="hub-menu" active={menuSelected === 'segment'} onClick={e => clickMenu(e, 'segment')}>Generic Segment Template</Button>
+                <Button className="hub-menu" active={menuSelected === 'dataset'} onClick={e => clickMenu(e, 'dataset')}>Generic Dataset Template</Button>
+              </ButtonGroup>
               {
-                expanded && menuSelected && (
+                menuSelected && (
                   <div style={{ flex: '1', margin: '0px 15px 15px 15px' }}>
                     <h3>{menuSelected ? `Generic ${capitalizeFirstLetter(menuSelected)} Template` : ''}</h3>
-                    <GenGridBase gridColumn={columnDefs[menuSelected]} gridData={gridData} />
+                    <div>
+                      <GenGridBase gridColumn={columnDefs[menuSelected]} gridData={gridData} />
+                    </div>
                   </div>
                 )
               }
diff --git a/app/packs/src/libHome/RepoGenericHubDesc.js b/app/packs/src/libHome/RepoGenericHubDesc.js
index 15068a2a5..672b89896 100644
--- a/app/packs/src/libHome/RepoGenericHubDesc.js
+++ b/app/packs/src/libHome/RepoGenericHubDesc.js
@@ -1,74 +1,22 @@
 import React from 'react';
-import { Button } from 'react-bootstrap';
-import { GenGridBase } from 'chem-generic-ui';
 import ContactEmail from '../components/chemrepo/core/ContactEmail';
 
-const gridData = [
-  {
-    desc: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
-    label: '1H nuclear magnetic resonance spectroscopy (1H NMR)',
-    version: '2.6',
-    released_at: '2021-08-06T21:25:08.057Z',
-    properties_release: { }
-  },
-  {
-    desc: 'cyclic voltammetry (CV)',
-    label: 'cyclic voltammetry (CV)',
-    version: '1.0',
-    released_at: '2021-08-08T20:26:08.088Z',
-    properties_release: { }
-  }
-];
-
-const RepoGenericHubDesc = () => {
-  const TemplateRenderer = () => (
-    <span>
-      <Button style={{ cursor: 'auto' }}><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</Button>
-    </span>
-  );
-
-  const dsColumnDefs = [
-    {
-      hide: true,
-      headerName: '#',
-      valueFormatter: params => `${parseInt(params.node.id, 10) + 1}`,
-      sortable: false,
-    },
-    {
-      headerName: 'Chemical Methods Ontology', field: 'label', minWidth: 350,
-    },
-    { headerName: 'Version', field: 'version' },
-    { headerName: 'Released at', field: 'released_at' },
-    {
-      headerName: 'Template',
-      cellRenderer: TemplateRenderer,
-      sortable: false,
-      filter: false,
-    },
-  ];
-
-  return (
-    <div className="repo-generic-hub-desc">
-      <h1>LabIMotion Template Hub<span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span></h1>
-      <h3>
-        Welcome to the <b>LabIMotion Template Hub</b>, a platform for sharing new elements, segments, and datasets templates.
-      </h3>
-      <h3>Getting Started</h3>
-      <h5>
-        To begin exploring the templates, simply click on the <span className="start"><i className="fa fa-caret-left" aria-hidden="true" /></span> on the left-hand side.
-      </h5>
-      <h3>Quick Look User Interface</h3>
-      <h5>
-        <p>The templates are displayed in a grid layout. You can </p>
-        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;sort the grid by clicking on the column headers. </p>
-        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;filter the grid by clicking on the filter icon <i className="fa fa-bars" aria-hidden="true" /> located at the right of the column headers. </p>
-        <p><i className="fa fa-check" aria-hidden="true" />&nbsp;download a specific template by clicking on the button <span className="download"><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</span>. </p>
-      </h5>
-      <div style={{ height: '200px' }}>
-        <GenGridBase gridColumn={dsColumnDefs} gridData={gridData} />
-      </div>
-    </div>
-  );
-};
+const RepoGenericHubDesc = () => (
+  <div className="repo-generic-hub-desc">
+    <h1>LabIMotion Template Hub<span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span></h1>
+    <h3>
+      Welcome to the <b>LabIMotion Template Hub</b>, your platform for sharing new elements, segments, and datasets templates.
+    </h3>
+    <br />
+    <h3>Getting Started: Selecting a Template</h3>
+    <p>The templates are conveniently displayed in a grid layout. You can: </p>
+    <h5>
+      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Sort</b> the grid by clicking on the column headers. </p>
+      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Filter</b> the grid by clicking on the filter icon <span className="download"><i className="fa fa-bars" aria-hidden="true" /></span> located at the right of the column headers. </p>
+      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Download</b> a specific template by clicking on the button <span className="download"><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</span>. </p>
+    </h5>
+    <h3>Now, let&apos;s get started. Choose the template you need and begin the download process.</h3>
+  </div>
+);
 
 export default RepoGenericHubDesc;
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
index 5535a047e..796c03881 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/libHome/RepoHome.js
@@ -6,6 +6,7 @@ import { HomeFeature } from './RepoCommon';
 import RepoCardStaticsBoard from './RepoCardStaticsBoard';
 import RepoCardIntro from './RepoCardIntro';
 import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
+import { RepoCardReviewerIntro, RepoCardReviewerIntroBtn, ReviewGuidelines } from './RepoCardReviewerIntro';
 
 const PartnersInfo = (info) => {
   const { header, img, content } = info;
@@ -58,11 +59,11 @@ const Infos = [
 ];
 
 class RepoHome extends Component {
-  constructor(props) {
+  constructor() {
     super();
-    this.state = {
-    };
+    this.state = { showReviewers: false };
     this.onChange = this.onChange.bind(this);
+    this.onShow = this.onShow.bind(this);
   }
 
   componentDidMount() {
@@ -85,6 +86,13 @@ class RepoHome extends Component {
     }
   }
 
+  onShow() {
+    this.setState(prevState => ({
+      ...prevState,
+      showReviewers: !prevState.showReviewers
+    }));
+  }
+
   render() {
     const features = {
       metadata: {
@@ -123,7 +131,7 @@ class RepoHome extends Component {
         intro: 'Release your research data and pass an internal review that ensures data quality.'
       },
       peer: {
-        fa: 'fa fa-external-link',
+        fa: 'fa fa-users',
         title: 'Peer review',
         intro: 'Before publication, you can share your data with external reviewers or the publishers.'
       },
@@ -135,7 +143,12 @@ class RepoHome extends Component {
       api: {
         fa: 'fa fa-connectdevelop',
         title: 'APIs',
-        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
+        intro: 'With Chemotion APIs, transfer data easily from your ELN to the Chemotion repository.'
+      },
+      labimotion: {
+        fa: 'fa fa-empire',
+        title: 'Extensive Customization',
+        intro: 'With LabIMotion: Tailor your modules or benefit from the availability of new elements, sections, and dataset templates that can be tailored to meet scientists\' specific requirements.'
       }
     };
 
@@ -171,8 +184,7 @@ class RepoHome extends Component {
         </Col>
         <Col md={12} sm={12}>
           <Row>
-            <Col md={2} sm={12}>&nbsp;</Col>
-            <Col md={8} sm={12}>
+            <Col md={12} sm={12}>
               <Row>
                 <Col md={12} sm={12}>
                   <div className="home-title">
@@ -182,6 +194,25 @@ class RepoHome extends Component {
                   </div>
                 </Col>
               </Row>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={2} sm={12}>&nbsp;</Col>
+            <Col md={8} sm={12}>
+              <Row className="feature">
+                <Col md={4} sm={12}>&nbsp;</Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature
+                    extraStyle={{ display: 'flex', flexWrap: 'wrap' }}
+                    fa={features.peer.fa}
+                    title={features.peer.title}
+                    intro={features.peer.intro}
+                    extra={<RepoCardReviewerIntroBtn show={this.state.showReviewers} onClick={() => this.onShow()} />}
+                  />
+                </Col>
+                <Col md={4} sm={12}>&nbsp;</Col>
+              </Row>
+              { this.state.showReviewers && <RepoCardReviewerIntro />}
               <Row className="feature">
                 <Col md={4} sm={12}>
                   <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
@@ -206,7 +237,7 @@ class RepoHome extends Component {
               </Row>
               <Row className="feature">
                 <Col md={4} sm={12}>
-                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
+                  <HomeFeature fa={features.labimotion.fa} title={features.labimotion.title} intro={features.labimotion.intro} />
                 </Col>
                 <Col md={4} sm={12}>
                   <HomeFeature fa={features.oai.fa} title={features.oai.title} intro={features.oai.intro} />
diff --git a/package.json b/package.json
index f8f7f162f..b44c40276 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
     "react-color": "^2.17.3",
     "react-contextmenu": "^2.14.0",
     "react-cookie": "^0.4.8",
-    "react-countup": "^6.3.2",
     "react-datepicker": "~1.4.1",
     "react-datetime-picker": "^4.1.1",
     "react-dnd": "^14.0.3",
diff --git a/yarn.lock b/yarn.lock
index e14fbc4e6..6500b53bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6692,11 +6692,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-countup.js@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-2.3.2.tgz#9a91d95780be1c908d1e6feb548625f353f57988"
-  integrity sha512-dQ7F/CmKGjaO6cDfhtEXwsKVlXIpJ89dFs8PvkaZH9jBVJ2Z8GU4iwG/qP7MgY8qwr+1skbwR6qecWWQLUzB8Q==
-
 crc-32@~1.2.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.1.tgz"
@@ -8422,11 +8417,6 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
@@ -13603,14 +13593,6 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.2"
     react-popper "^2.3.0"
 
-react-countup@^6.3.2:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.4.0.tgz#f18d24e40c37c465b29353172cc8b3b5e82f3241"
-  integrity sha512-7vvz0IIcDwWdd1JDzDB3z+9wSWL5Cf7pqwMPUXnIe66M3UXZyMWrvTp1p96wpPgg8/v4Gvf8YLvJoO+34G0GMA==
-  dependencies:
-    "@rollup/plugin-babel" "^6.0.2"
-    countup.js "^2.3.2"
-
 react-datepicker@^4.8.0:
   version "4.15.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.15.0.tgz#489834773fbcf87852273b4642f0c5bd3811cef7"

From 663d9cb5b1b46142d43e2e5ae9a33ef624888210 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 24 Oct 2023 13:20:35 +0200
Subject: [PATCH 192/258] fix the unique key of child issue

---
 app/packs/src/libHome/RepoPubl.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
index dc1c72f3e..40ced4395 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -36,6 +36,7 @@ const renderMoleculeArchive =
 
 const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
   <RepoMoleculeList
+    key={molecule.id}
     molecule={molecule}
     currentElement={currentElement}
     isPubElement={isPubElement}
@@ -47,6 +48,7 @@ const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType
 
 const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
   <RepoReactionList
+    key={element.id}
     element={element}
     currentElement={currentElement}
     isPubElement={isPubElement}

From 0f9b899e365bf6058864dddbc603675558261212 Mon Sep 17 00:00:00 2001
From: Pei-Chi Huang <pei-chi.huang@kit.edu>
Date: Tue, 24 Oct 2023 13:10:08 +0000
Subject: [PATCH 193/258] Resolve "option to add all samples"

---
 app/api/chemotion/public_api.rb        |  3 +-
 app/models/concerns/metadata_jsonld.rb | 51 +++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 43c1b0511..87dca13e6 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -835,6 +835,7 @@ def query_embargo(name)
           optional :id, type: Integer, desc: "Id"
           optional :type, type: String, desc: "Type", values: %w[sample reaction container collection]
           optional :inchikey, type: String, desc: "inchikey"
+          optional :all, type: Boolean, desc: 'with all samples', default: false
         end
         after_validation do
           @type = params['type']&.classify
@@ -862,7 +863,7 @@ def query_embargo(name)
           content_type('application/json')
           header['Content-Disposition'] = "attachment; filename=" + filename
           env['api.format'] = :binary
-          @publication.json_ld
+          @publication.json_ld(params['all'])
         end
 
         desc "Get JSON-Link Data"
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 508a0bb1e..b6f306ead 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -6,13 +6,14 @@
 module MetadataJsonld
   extend ActiveSupport::Concern
 
-  def json_ld
+  def json_ld(all = false)
+    all = true if all == 'true'
     return {} if state != 'completed'
 
     if element_type == 'Sample'
       json_ld_sample_root
     elsif element_type == 'Reaction'
-      json_ld_reaction
+      json_ld_reaction(all)
     elsif element_type == 'Container'
       json_ld_container
     end
@@ -148,7 +149,7 @@ def json_ld_sample(pub = self)
     json['image'] = 'https://www.chemotion-repository.net/images/samples/' + pub.element.sample_svg_file  if pub&.element&.sample_svg_file.present?
     json['description'] = json_ld_description(pub.element.description)
     #json['author'] = json_ld_authors(pub.taggable_data)
-    json['hasBioChemEntityPart'] = json_ld_moelcule_entity(pub)
+    json['hasBioChemEntityPart'] = json_ld_moelcule_entity(pub.element)
     json['subjectOf'] = json_ld_subjectOf(pub)
     #json_object = JSON.parse(json)
     #JSON.pretty_generate(json_object)
@@ -157,8 +158,7 @@ def json_ld_sample(pub = self)
     # formatted_json
   end
 
-
-  def json_ld_reaction
+  def json_ld_reaction(all = false)
     json = {}
     json['@context'] = 'https://schema.org'
     json['@type'] = 'Study'
@@ -178,7 +178,7 @@ def json_ld_reaction
     json['provider'] = json_ld_publisher
     json['keywords'] = 'chemical reaction: structures conditions'
     json['citation'] = json_ld_citations(element.literatures, element.id)
-    json['subjectOf'] = json_ld_reaction_has_part
+    json['subjectOf'] = json_ld_reaction_has_part(all)
     json
   end
 
@@ -198,12 +198,20 @@ def json_ld_lab_protocol
     json
   end
 
-  def json_ld_reaction_has_part
+  def json_ld_reaction_has_part(all = false)
     json = []
     children&.each do |pub|
       json.push(json_ld_sample(pub)) if pub.element_type == 'Sample'
       json.push(json_ld_analysis(pub, false)) if pub.element_type == 'Container'
     end
+    if all == true
+      element&.samples&.each do |sample|
+        next if sample.publication.present? || !sample.collections&.pluck(:id).include?(Collection.public_collection&.id)
+
+        json.push(json_ld_sample_el(sample))
+      end
+    end
+
     json
   end
 
@@ -337,17 +345,40 @@ def json_ld_molecular_weight(mol)
     json
   end
 
-  def json_ld_moelcule_entity(pub = self)
-    mol = pub.element.molecule
+  def json_ld_moelcule_entity(element)
+    mol = element.molecule
     json = {}
     json['@type'] = 'MolecularEntity'
     json['smiles'] = mol.cano_smiles
     json['inChIKey'] = mol.inchikey
     json['inChI'] = mol.inchistring
-    json['name'] = pub.element.molecule_name&.name
+    json['name'] = element.molecule_name&.name
     json['molecularFormula'] = mol.sum_formular
     json['molecularWeight'] = json_ld_molecular_weight(mol)
     json['iupacName'] = mol.iupac_name
     json
   end
+
+  def json_ld_sample_el(sample)
+
+    # metadata_xml
+    json = {}
+    json['@context'] = 'https://schema.org'
+    json['@type'] = 'ChemicalSubstance'
+    json['@id'] = sample.id
+    json['identifier'] = sample.id
+    json['name'] = sample.molecule_name&.name
+    json['alternateName'] = sample.molecule.inchistring
+    # json['image'] = element.sample_svg_file
+    json['image'] = 'https://www.chemotion-repository.net/images/samples/' + sample.sample_svg_file  if sample&.sample_svg_file.present?
+    json['description'] = json_ld_description(sample.description)
+    #json['author'] = json_ld_authors(pub.taggable_data)
+    json['hasBioChemEntityPart'] = json_ld_moelcule_entity(sample)
+    ## json['subjectOf'] = json_ld_subjectOf(pub)
+    #json_object = JSON.parse(json)
+    #JSON.pretty_generate(json_object)
+    json
+    # formatted_json = JSON.pretty_generate(json)
+    # formatted_json
+  end
 end

From 6c5cd79c4d7f6ce75c0c1c1e9a90a6c5be3fc0f7 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 25 Oct 2023 16:27:21 +0200
Subject: [PATCH 194/258] suggestion for labimotion

---
 app/api/chemotion/suggestion_api.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/api/chemotion/suggestion_api.rb b/app/api/chemotion/suggestion_api.rb
index b0ab21e71..06b18b92a 100644
--- a/app/api/chemotion/suggestion_api.rb
+++ b/app/api/chemotion/suggestion_api.rb
@@ -143,7 +143,7 @@ def search_possibilities_by_type_user_and_collection(type)
             end
           end
           chemotion_id = pids || []
-          element_short_label = dl_e.positive? && search_by_element_short_label.call(Labimotion::Element, qry) || []
+          element_short_label = dl_e&.positive? && search_by_element_short_label.call(Labimotion::Element, qry) || []
           sample_name = dl_s.positive? && search_by_field.call(Sample, :name, qry) || []
           sample_short_label = dl_s.positive? && search_by_field.call(Sample, :short_label, qry) || []
           sample_external_label = dl_s > -1 && search_by_field.call(Sample, :external_label, qry) || []

From 9ed2a9f8ef214d83c216da575c5bae7765be4b7e Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Fri, 27 Oct 2023 15:55:52 +0200
Subject: [PATCH 195/258] params for JSON-LD

---
 app/api/chemotion/public_api.rb        |  12 +--
 app/models/concerns/metadata_jsonld.rb |  51 +++++------
 lib/metadata/jsonldllm.rb              | 112 +++++++++++++++++++++++++
 3 files changed, 137 insertions(+), 38 deletions(-)
 create mode 100644 lib/metadata/jsonldllm.rb

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 87dca13e6..a1a026db9 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -646,7 +646,7 @@ def query_embargo(name)
           requires :id, type: Integer, desc: "collection id"
         end
         get do
-          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
+          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id], state: 'completed')
           { col: pub }
         end
       end
@@ -667,8 +667,8 @@ def query_embargo(name)
           anasql = <<~SQL
             publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
           SQL
-          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
-          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
+          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples, state: 'completed').select(anasql).order(updated_at: :desc)
+          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions, state: 'completed').select(anasql).order(updated_at: :desc)
           list = sample_list + reaction_list
           elements = []
           list.each do |e|
@@ -817,7 +817,7 @@ def query_embargo(name)
           result = declared(params, include_missing: false)
           list = []
           limit = params[:limit] - params[:offset] > 1000 ? params[:offset] + 1000 : params[:limit]
-          scope = Publication.where(element_type: params[:type])
+          scope = Publication.where(element_type: params[:type], state: 'completed')
           scope = scope.where('published_at >= ?', params[:date_from]) if params[:date_from].present?
           scope = scope.where('published_at <= ?', params[:date_to]) if params[:date_to].present?
           publications = scope.order(:published_at).offset(params[:offset]).limit(limit)
@@ -835,7 +835,7 @@ def query_embargo(name)
           optional :id, type: Integer, desc: "Id"
           optional :type, type: String, desc: "Type", values: %w[sample reaction container collection]
           optional :inchikey, type: String, desc: "inchikey"
-          optional :all, type: Boolean, desc: 'with all samples', default: false
+          optional :extension, type: String, desc: 'JSON-LD extension option', values: %w[LLM]
         end
         after_validation do
           @type = params['type']&.classify
@@ -863,7 +863,7 @@ def query_embargo(name)
           content_type('application/json')
           header['Content-Disposition'] = "attachment; filename=" + filename
           env['api.format'] = :binary
-          @publication.json_ld(params['all'])
+          @publication.json_ld(params['extension'])
         end
 
         desc "Get JSON-Link Data"
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index b6f306ead..3a0c68aaf 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -6,14 +6,13 @@
 module MetadataJsonld
   extend ActiveSupport::Concern
 
-  def json_ld(all = false)
-    all = true if all == 'true'
+  def json_ld(ext = nil)
     return {} if state != 'completed'
 
     if element_type == 'Sample'
       json_ld_sample_root
     elsif element_type == 'Reaction'
-      json_ld_reaction(all)
+      json_ld_reaction(ext)
     elsif element_type == 'Container'
       json_ld_container
     end
@@ -135,7 +134,7 @@ def conforms_to
     }
   end
 
-  def json_ld_sample(pub = self)
+  def json_ld_sample(pub = self, ext = nil)
     # metadata_xml
     json = {}
     json['@context'] = 'https://schema.org'
@@ -153,12 +152,18 @@ def json_ld_sample(pub = self)
     json['subjectOf'] = json_ld_subjectOf(pub)
     #json_object = JSON.parse(json)
     #JSON.pretty_generate(json_object)
+
+    if ext == 'LLM'
+      reaction = element_type == 'Reaction' ? element : nil
+      json = Metadata::Jsonldllm.sample_ext(json, pub&.element, reaction)
+    end
+
     json
     # formatted_json = JSON.pretty_generate(json)
     # formatted_json
   end
 
-  def json_ld_reaction(all = false)
+  def json_ld_reaction(ext = nil)
     json = {}
     json['@context'] = 'https://schema.org'
     json['@type'] = 'Study'
@@ -178,7 +183,11 @@ def json_ld_reaction(all = false)
     json['provider'] = json_ld_publisher
     json['keywords'] = 'chemical reaction: structures conditions'
     json['citation'] = json_ld_citations(element.literatures, element.id)
-    json['subjectOf'] = json_ld_reaction_has_part(all)
+    json['subjectOf'] = json_ld_reaction_has_part(ext)
+
+    if ext == 'LLM'
+      json = Metadata::Jsonldllm.reaction_ext(json, element)
+    end
     json
   end
 
@@ -198,17 +207,17 @@ def json_ld_lab_protocol
     json
   end
 
-  def json_ld_reaction_has_part(all = false)
+  def json_ld_reaction_has_part(ext = nil)
     json = []
     children&.each do |pub|
-      json.push(json_ld_sample(pub)) if pub.element_type == 'Sample'
+      json.push(json_ld_sample(pub, ext)) if pub.element_type == 'Sample'
       json.push(json_ld_analysis(pub, false)) if pub.element_type == 'Container'
     end
-    if all == true
+    if ext == 'LLM' && element&.samples.present?
       element&.samples&.each do |sample|
         next if sample.publication.present? || !sample.collections&.pluck(:id).include?(Collection.public_collection&.id)
 
-        json.push(json_ld_sample_el(sample))
+        json.push(Metadata::Jsonldllm.all_samples(element, sample))
       end
     end
 
@@ -359,26 +368,4 @@ def json_ld_moelcule_entity(element)
     json
   end
 
-  def json_ld_sample_el(sample)
-
-    # metadata_xml
-    json = {}
-    json['@context'] = 'https://schema.org'
-    json['@type'] = 'ChemicalSubstance'
-    json['@id'] = sample.id
-    json['identifier'] = sample.id
-    json['name'] = sample.molecule_name&.name
-    json['alternateName'] = sample.molecule.inchistring
-    # json['image'] = element.sample_svg_file
-    json['image'] = 'https://www.chemotion-repository.net/images/samples/' + sample.sample_svg_file  if sample&.sample_svg_file.present?
-    json['description'] = json_ld_description(sample.description)
-    #json['author'] = json_ld_authors(pub.taggable_data)
-    json['hasBioChemEntityPart'] = json_ld_moelcule_entity(sample)
-    ## json['subjectOf'] = json_ld_subjectOf(pub)
-    #json_object = JSON.parse(json)
-    #JSON.pretty_generate(json_object)
-    json
-    # formatted_json = JSON.pretty_generate(json)
-    # formatted_json
-  end
 end
diff --git a/lib/metadata/jsonldllm.rb b/lib/metadata/jsonldllm.rb
new file mode 100644
index 000000000..c023be5af
--- /dev/null
+++ b/lib/metadata/jsonldllm.rb
@@ -0,0 +1,112 @@
+require 'json'
+require 'open-uri'
+require 'nokogiri'
+
+module Metadata
+  class Jsonldllm
+
+    def self.reaction_ext(json, reaction)
+      json['rfValue'] = reaction.rf_value
+      json['tlcSolvents'] = reaction.tlc_solvents
+      json['tlcDesc'] = reaction.tlc_description
+      json['temperature'] = reaction.temperature
+      json['duration'] = reaction.duration
+      json['reactionStatus'] = reaction.status
+      json['reactionType'] = reaction.rxno
+      # if reaction.segments.present?
+      #   seglist= reaction.segments.map do |segment|
+      #     klass = SegmentKlass.find_by(id: segment.segment_klass_id)
+      #     data = {}
+      #     { klass.label: data }
+      #   end
+      #   json['segments'] = seglist
+      # end
+      json
+    end
+
+
+    def self.sample_ext(json, sample, reaction)
+      value = sample.real_amount_value.nil? ||sample.real_amount_value.zero? ? sample.target_amount_value : sample.real_amount_value
+      unit = sample.real_amount_value.nil? ||sample.real_amount_value.zero? ? sample.target_amount_unit : sample.real_amount_unit
+      has_molarity = !sample.molarity_value.nil? && sample.molarity_value > 0.0 && (sample.density === 0.0) || false
+      has_density = !sample.density.nil? && sample.density > 0.0 && (sample.molarity_value === 0.0) || false
+
+      molarity = sample.molarity_value && sample.molarity_value.to_f || 1.0
+      density = sample.density && sample.density.to_f || 1.0
+      purity = sample.purity && sample.purity.to_f || 1.0
+      molecular_weight = sample.molecule.molecular_weight && sample.molecule.molecular_weight.to_f || 1.0
+
+      json['amount_g'] = unit === 'g'? value : unit === 'mg'? value.to_f / 1000.0 : unit === 'mol' ?  (value / purity) * molecular_weight : unit === 'l' && !has_molarity && !has_density ? 0 : has_molarity ? value * molarity * molecular_weight : value * density * 1000
+      json['amount_l'] = unit === 'l'? value : !has_molarity && !has_density ? 0 : has_molarity ? (json['amount_g'].to_f * purity) / (molarity * molecular_weight) : has_density ? json['amount_g'].to_f / (density * 1000) : 0
+      json['amount_mol'] = unit === 'mol'? value : has_molarity ? json['amount_l'] * molarity : json['amount_g'].to_f * purity / molecular_weight
+      json['molarity'] = molarity
+      json['density'] = density
+
+      json['amount_mg'] = json['amount_g'] * 1000
+      json['amount_ml'] = json['amount_l'] * 1000
+      json['amount_mmol'] = json['amount_mol'] * 1000
+
+      return json if reaction.nil?
+
+      rs = ReactionsSample.find_by(reaction_id: reaction.id, sample_id: sample.id)
+      return json if rs.nil?
+
+      json['rs_type'] = rs.type
+      json['equiv'] = rs.equivalent&.to_f&.round(2) unless rs.type == 'ReactionsSolventSample'
+      json
+    end
+
+    def self.all_samples(reaction, sample)
+
+      # metadata_xml
+      json = {}
+      json['@context'] = 'https://schema.org'
+      json['@type'] = 'ChemicalSubstance'
+      json['@id'] = sample.id
+      json['identifier'] = sample.id
+      json['name'] = sample.molecule_name&.name
+      json['alternateName'] = sample.molecule.inchistring
+      # json['image'] = element.sample_svg_file
+      json['image'] = 'https://www.chemotion-repository.net/images/samples/' + sample.sample_svg_file  if sample&.sample_svg_file.present?
+      json['description'] = Metadata::Jsonldllm.json_ld_description(sample.description)
+      #json['author'] = json_ld_authors(pub.taggable_data)
+      json['hasBioChemEntityPart'] = Metadata::Jsonldllm.json_ld_moelcule_entity(sample)
+      json = Metadata::Jsonldllm.sample_ext(json, sample, reaction)
+      json
+      # formatted_json = JSON.pretty_generate(json)
+      # formatted_json
+    end
+
+
+    def self.json_ld_description(desc)
+      REXML::Text.new(Nokogiri::HTML( Chemotion::QuillToHtml.new.convert(desc.to_json)).text, false, nil, false).to_s
+      #persit_datacite_metadata_xml! unless metadata_xml.present?
+      #xml_data = Nokogiri::XML(metadata_xml)
+      #desc = xml_data.search('description')&.text&.strip
+      #desc
+    end
+
+    def self.json_ld_moelcule_entity(element)
+      mol = element.molecule
+      json = {}
+      json['@type'] = 'MolecularEntity'
+      json['smiles'] = mol.cano_smiles
+      json['inChIKey'] = mol.inchikey
+      json['inChI'] = mol.inchistring
+      json['name'] = element.molecule_name&.name
+      json['molecularFormula'] = mol.sum_formular
+      json['molecularWeight'] = Metadata::Jsonldllm.json_ld_molecular_weight(mol)
+      json['iupacName'] = mol.iupac_name
+      json
+    end
+
+    def self.json_ld_molecular_weight(mol)
+      json ={}
+      json['@type'] = 'QuantitativeValue'
+      json['value'] = mol.molecular_weight
+      json['unitCode'] = 'g/mol'
+      json
+    end
+
+  end
+end

From b5e7d50073a3cff3cd48065d0f73a0c4c2f6d119 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Sun, 29 Oct 2023 22:43:46 +0100
Subject: [PATCH 196/258] update review guidelines

---
 app/packs/src/libHome/RepoCardReviewerIntro.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/libHome/RepoCardReviewerIntro.js b/app/packs/src/libHome/RepoCardReviewerIntro.js
index 60723b1ef..74fa41fb4 100644
--- a/app/packs/src/libHome/RepoCardReviewerIntro.js
+++ b/app/packs/src/libHome/RepoCardReviewerIntro.js
@@ -30,13 +30,13 @@ export const ReviewGuidelines = () => (
       <div className="card-reviewers">
         <h3>Chemotion Repository Review Guidelines</h3>
         <p className="description">
-          The Chemotion Repository is a curated repository. The submitted entries are curated with respect to formal aspects and feedback is given referring to possible questions or errors. This effort is done to ensure a high quality of the submitted data and to provide data according to community standards. The most important formatting requirements and other hints that can help users to pass the curation easily are described in detail in the documentation, e.g. here (and following pages): <a href="https://www.chemotion.net/docs/repo/details_standards/characterization" target="_blank" rel="noreferrer">Chemotion Repository &gt; Details and Standards</a>
+          The Chemotion Repository is a curated repository. The submitted entries are curated with respect to formal aspects and feedback is given referring to possible questions or errors. This effort is done to ensure a high quality of the submitted data and to provide data according to community standards. The most important formatting requirements and other hints that can help users to pass the curation easily are described in detail in the documentation, e.g. here (and following pages): <a href="https://chemotion.net/docs/repo/details_standards" target="_blank" rel="noreferrer">Chemotion Repository &gt; Details and Standards</a>
         </p>
         <p className="description">
           The reviewers involved in the curation are volunteers that support the idea of collecting open data. They do their best to guide and support users. All reviewers confirmed to work according to ethical standards. This means in detail that reviewers declare that they will thoroughly review all submissions for publication to the best of their knowledge and ability. They pledge to treat all content confidentially and to not disclose any information, whether personal or factual, to third parties during the review process. They will assess all submissions neutrally, impartially, and by the same criteria. If a conflict of interest arises, they will decline the review of the submission and transfer it to another reviewer for evaluation.
         </p>
         <p className="description">
-          Please don&#39;t hesitate to contact the reviewers assigned to your submissions if there are any questions. Please use the option to answer per feedback note to the reviewers. We are glad for all comments and explanations - if there are things to be discussed.
+          Please don&#39;t hesitate to contact the reviewers assigned to your submissions if there are any questions. Please use the option to answer per feedback note, we are glad for all comments and explanations.
         </p>
       </div>
     </Col>

From 20fb19988a8b225404b498ca98b88f2253fdfbbf Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Thu, 2 Nov 2023 21:39:48 +0100
Subject: [PATCH 197/258] review embargo list

---
 app/api/chemotion/public_api.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index a1a026db9..0e7cb6c10 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -667,8 +667,8 @@ def query_embargo(name)
           anasql = <<~SQL
             publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
           SQL
-          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples, state: 'completed').select(anasql).order(updated_at: :desc)
-          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions, state: 'completed').select(anasql).order(updated_at: :desc)
+          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
+          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
           list = sample_list + reaction_list
           elements = []
           list.each do |e|

From 61ba62648a7648fcceecf504ff74ebf75b025648 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Tue, 7 Nov 2023 09:34:24 +0100
Subject: [PATCH 198/258] upgrade nmrium

---
 .../analysesTab/SampleDetailsContainersAux.js |   7 -
 app/packs/src/components/NMRiumDisplayer.js   |  43 +++--
 .../src/stores/alt/stores/SpectraStore.js     |   1 +
 yarn.lock                                     | 157 +++++++++++++++++-
 4 files changed, 185 insertions(+), 23 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 0090f66c3..16fc69d80 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -62,13 +62,6 @@ const qCheckMsg = (sample, container) => {
   return '';
 };
 
-const isNMRKind = (container) => {
-  if (container.extended_metadata.kind) {
-    return container.extended_metadata.kind.includes('NMR');
-  }
-  return false;
-}
-
 const SpectraEditorBtn = ({
   sample, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
diff --git a/app/packs/src/components/NMRiumDisplayer.js b/app/packs/src/components/NMRiumDisplayer.js
index e9419754c..3fbd41e9f 100644
--- a/app/packs/src/components/NMRiumDisplayer.js
+++ b/app/packs/src/components/NMRiumDisplayer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import base64 from 'base-64';
 import { Modal, Button } from 'react-bootstrap';
-import { FN } from '@complat/react-spectra-editor';
+
 import SpectraStore from './stores/SpectraStore';
 import SpectraActions from './actions/SpectraActions';
 import LoadingActions from './actions/LoadingActions';
@@ -9,6 +9,7 @@ import UIFetcher from './fetchers/UIFetcher';
 import { parseBase64ToArrayBuffer } from './utils/FetcherHelper';
 import Attachment from './models/Attachment';
 import { SpectraOps } from './utils/quillToolbarSymbol';
+// import { FN } from '@complat/react-spectra-editor';
 
 export default class NMRiumDisplayer extends React.Component {
   constructor(props) {
@@ -17,6 +18,7 @@ export default class NMRiumDisplayer extends React.Component {
     this.state = {
       ...SpectraStore.getState(),
       nmriumData: null,
+      is2D: false,
     };
 
     this.iframeRef = React.createRef();
@@ -90,6 +92,11 @@ export default class NMRiumDisplayer extends React.Component {
       return;
     }
 
+    const is2DNMR = (data) => {
+      const spectra = data?.spectra || [];
+      return spectra.some((spc) => spc.info?.dimension === 2);
+    };
+
     if (event.origin === nmriumOrigin && event.data) {
       const eventData = event.data;
       const eventDataType = eventData.type;
@@ -174,10 +181,12 @@ export default class NMRiumDisplayer extends React.Component {
     }
     if (sample) {
       const { molfile } = sample;
-      const fileName =`${sample.id}.mol`;
-      const blobToBeSent = new Blob([molfile]);
-      const dataItem = new File([blobToBeSent], fileName);
-      data.data.push(dataItem);
+      if (molfile) {
+        const fileName = `${sample.id}.mol`;
+        const blobToBeSent = new Blob([molfile]);
+        const dataItem = new File([blobToBeSent], fileName);
+        data.data.push(dataItem);
+      }
     }
     return data;
   }
@@ -202,7 +211,7 @@ export default class NMRiumDisplayer extends React.Component {
   }
 
   savingNMRiumWrapperData(imageBlobData = false) {
-    const { nmriumData } = this.state;
+    const { nmriumData, is2D } = this.state;
     if (nmriumData === null || !imageBlobData) {
       return;
     }
@@ -224,7 +233,9 @@ export default class NMRiumDisplayer extends React.Component {
       return;
     }
 
-    this.prepareAnalysisMetadata(nmriumData);
+    if (!is2D) {
+      this.prepareAnalysisMetadata(nmriumData);
+    }
 
     const { sample, handleSampleChanged } = this.props;
 
@@ -322,14 +333,15 @@ export default class NMRiumDisplayer extends React.Component {
     if (displayingSpectra.length <= 0) {
       return { peaksBody: '', layout: '' };
     }
-
     const firstSpectrum = displayingSpectra[0];
+    let layout = firstSpectrum.nucleus;
     const { info } = firstSpectrum;
     if (info) {
-      const { dimension } = info;
+      const { dimension, nucleus } = info;
       if (dimension === 2) {
         return { peaksBody: '', layout: '' };
       }
+      layout = nucleus;
     }
 
     const firstSpectrumPeaks = firstSpectrum.peaks;
@@ -388,7 +400,7 @@ export default class NMRiumDisplayer extends React.Component {
   saveOp() {
     SpectraActions.ToggleModalNMRDisplayer.defer();
     const { handleSubmit } = this.props;
-    handleSubmit()
+    handleSubmit();
   }
 
   renderNMRium(nmriumWrapperHost) {
@@ -409,8 +421,13 @@ export default class NMRiumDisplayer extends React.Component {
   renderModalTitle() {
     const { nmriumData } = this.state;
     let hasSpectra = false;
-    if (nmriumData && nmriumData.spectra.length > 0) {
-      hasSpectra = true;
+    if (nmriumData) {
+      const { version } = nmriumData;
+      if (version > 3) {
+        hasSpectra = nmriumData.data.spectra.length > 0;
+      } else {
+        hasSpectra = nmriumData.spectra.length > 0;
+      }
     }
 
     return (
@@ -437,7 +454,7 @@ export default class NMRiumDisplayer extends React.Component {
               bsSize="small"
               className="button-right"
               onClick={() => {
-                this.requestDataToBeSaved()
+                this.requestDataToBeSaved();
               }}
             >
               <span>
diff --git a/app/packs/src/stores/alt/stores/SpectraStore.js b/app/packs/src/stores/alt/stores/SpectraStore.js
index 6192f558e..b2657281c 100644
--- a/app/packs/src/stores/alt/stores/SpectraStore.js
+++ b/app/packs/src/stores/alt/stores/SpectraStore.js
@@ -95,6 +95,7 @@ class SpectraStore {
     if (newArrSpcIdx.length <= 1) {
       newArrSpcIdx = [];
     }
+
     this.setState({
       spcInfos: sortedSpcInfo,
       spcMetas,
diff --git a/yarn.lock b/yarn.lock
index 6500b53bc..ddfaa9fc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2421,6 +2421,23 @@
     source-map "^0.5.7"
     stylis "4.1.3"
 
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -2639,6 +2656,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
   integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
 
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
@@ -3113,6 +3135,120 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/base@5.0.0-beta.23":
+  version "5.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.23.tgz#dd10dfc609d8937749521f940965f757fa3c0f2c"
+  integrity sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@floating-ui/react-dom" "^2.0.2"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.17"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.14.17":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.17.tgz#68ec40ea00832fb685f09bd493648b1f68f5baf4"
+  integrity sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==
+
+"@mui/icons-material@^5.14.9":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.16.tgz#bd394183b0cfb068d4fa48292cd8d329be8d6b16"
+  integrity sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
+"@mui/material@^5.14.10":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.17.tgz#8e11098e52965be3e9ed117d6c107bbe511fac46"
+  integrity sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/base" "5.0.0-beta.23"
+    "@mui/core-downloads-tracker" "^5.14.17"
+    "@mui/system" "^5.14.17"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.17"
+    "@types/react-transition-group" "^4.4.8"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.14.17":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.17.tgz#2fdf9d7df54dcb27e8ae7e00f440eb8310376ec3"
+  integrity sha512-u4zxsCm9xmQrlhVPug+Ccrtsjv7o2+rehvrgHoh0siSguvVgVQq5O3Hh10+tp/KWQo2JR4/nCEwquSXgITS1+g==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/utils" "^5.14.17"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.14.17":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.17.tgz#7f79d863604076db5278bd38a2eeac44cd2ed336"
+  integrity sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/styles@^5.14.10":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.17.tgz#441afdd9425b4aad3dea727b0067d367a41f4b58"
+  integrity sha512-CsftJtCxF3ABigNXikmBJEsI6XQDmeTQNmjaA6wbjYA+29xPMUEQD4Coe+VXGkcc2jrE6Vy8qZ3ytO8QaM9KAw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@emotion/hash" "^0.9.1"
+    "@mui/private-theming" "^5.14.17"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.17"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.10.0"
+    jss-plugin-camel-case "^10.10.0"
+    jss-plugin-default-unit "^10.10.0"
+    jss-plugin-global "^10.10.0"
+    jss-plugin-nested "^10.10.0"
+    jss-plugin-props-sort "^10.10.0"
+    jss-plugin-rule-value-function "^10.10.0"
+    jss-plugin-vendor-prefixer "^10.10.0"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.14.17":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.17.tgz#3e212d1e699d4c777bbe5c6584ae129b1ef7d8bc"
+  integrity sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/private-theming" "^5.14.17"
+    "@mui/styled-engine" "^5.14.17"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.17"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.8":
+  version "7.2.8"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.8.tgz#2ed4402f104d65fcd4f460ca358654c8935e2285"
+  integrity sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==
+
+"@mui/utils@^5.14.17":
+  version "5.14.17"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.17.tgz#8e2e7ca58865119eec8c6bdb359f539c25aaf576"
+  integrity sha512-yxnWgSS4J6DMFPw2Dof85yBkG02VTbEiqsikymMsnZnXDurtVGTIhlNuV24GTmFTuJMzEyTTU9UF+O7zaL8LEQ==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@types/prop-types" "^15.7.9"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@novnc/novnc@^1.2.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.3.0.tgz"
@@ -3318,7 +3454,7 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@popperjs/core@^2.9.2":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -4191,6 +4327,11 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
+"@types/prop-types@^15.7.9":
+  version "15.7.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
+  integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
+
 "@types/quill@^1.3.10":
   version "1.3.10"
   resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613"
@@ -6788,6 +6929,11 @@ csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 cwise-compiler@^1.1.2:
   version "1.1.3"
   resolved "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz"
@@ -14211,7 +14357,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.0, react-transition-group@^4.4.1:
+react-transition-group@^4.4.0, react-transition-group@^4.4.1, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -14495,6 +14641,11 @@ regenerator-transform@^0.10.0:
     babel-types "^6.19.0"
     private "^0.1.6"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -15740,7 +15891,7 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

From f80d042a9e31ca6d8136af20aabd0008784abb23 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 7 Nov 2023 14:39:03 +0100
Subject: [PATCH 199/258] fix the invalid date format issue

---
 app/packs/src/components/chemrepo/date-utils.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/packs/src/components/chemrepo/date-utils.js b/app/packs/src/components/chemrepo/date-utils.js
index ec51bd2ab..03c1a96ad 100644
--- a/app/packs/src/components/chemrepo/date-utils.js
+++ b/app/packs/src/components/chemrepo/date-utils.js
@@ -26,6 +26,17 @@ export const formatDateYMDLong = (dt) => {
   }
 };
 
-export const getFormattedISODate = date => (date ? moment(date).format('YYYY-MM-DD') : '');
 export const getFormattedTime = date => (date ? moment(date).format('HH:mm') : '');
 export const getFormattedISODateTime = date => (date ? moment(date).format('YYYY-MM-DD HH:mm') : '');
+export const getFormattedISODate = (date) => {
+  if (date == null || typeof date === 'undefined') return '';
+  try {
+    const m = moment(date, 'YYYY-MM-DD');
+    if (m.isValid()) {
+      return m.format('YYYY-MM-DD');
+    }
+    return '';
+  } catch (e) {
+    return '';
+  }
+};

From 065584c5ed2cb83b7642ae1a4b82e3f3c34e67e5 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Tue, 7 Nov 2023 23:22:28 +0000
Subject: [PATCH 200/258] Resolve "search tool on publication page"

---
 Gemfile.lock                                  |    5 +-
 app/api/api.rb                                |    3 +-
 app/api/chemotion/collection_api.rb           |    4 +-
 app/api/chemotion/public_api.rb               |   58 +-
 app/api/chemotion/repository_api.rb           |   51 +-
 app/api/entities/container_entity.rb          |   14 +-
 app/api/entities/inbox_entity.rb              |   11 +-
 app/api/entities/repo_reaction_entity.rb      |   22 +
 app/api/helpers/repository_helpers.rb         |    6 +-
 app/assets/stylesheets/common.scss            |    3 +
 app/assets/stylesheets/omniauth.scss          |    1 +
 app/assets/stylesheets/repo_home.scss         |   25 +-
 app/models/chemscanner/molecule.rb            |  112 --
 app/models/chemscanner/reaction.rb            |  113 --
 app/models/chemscanner/reaction_step.rb       |   38 -
 app/models/chemscanner/reactions_molecule.rb  |   37 -
 .../chemscanner/reactions_product_molecule.rb |   22 -
 .../reactions_reactant_molecule.rb            |   22 -
 .../chemscanner/reactions_reagent_molecule.rb |   22 -
 .../chemscanner/reactions_solvent_molecule.rb |   22 -
 app/models/chemscanner/scheme.rb              |   87 --
 app/models/chemscanner/source.rb              |  138 --
 app/models/concerns/metadata_jsonld.rb        |    2 +-
 app/models/concerns/publishing.rb             |    2 +-
 app/models/container.rb                       |    3 +-
 app/models/reaction.rb                        |    4 +-
 app/models/user.rb                            |    8 +-
 app/packs/entrypoints/application.js          |   10 +-
 app/packs/src/admin/GenericAdminModal.js      |    2 +-
 .../src/admin/converter/ConverterAdmin.js     |  422 -------
 app/packs/src/apps/admin/AdminHome.js         |    6 -
 app/packs/src/apps/admin/AdminNavigation.js   |    3 -
 .../apps/chemscanner/actions/fileActions.js   |  138 +-
 .../components/AbbreviationManagement.js      |   78 +-
 .../components/CopyClipboardBtn.js            |   11 +-
 .../apps/chemscanner/components/DeleteBtn.js  |   10 +-
 .../apps/chemscanner/components/HeaderMenu.js |  206 +--
 .../chemscanner/components/HelpPopover.js     |   28 +-
 .../chemscanner/components/MainContent.js     |  206 +--
 .../components/MoleculeDescription.js         |   77 +-
 .../chemscanner/components/MoleculeDetails.js |    4 +-
 .../components/PreviewFileZoomPan.js          |   54 +-
 .../components/ReactionDescription.js         |  107 +-
 .../chemscanner/components/ReactionDetails.js |   15 +-
 .../src/apps/chemscanner/components/Root.js   |   43 +-
 .../components/ScannedMolecules.js            |  132 +-
 .../components/ScannedReactions.js            |  189 +--
 .../apps/chemscanner/components/SelectBtn.js  |    7 +-
 .../containers/AbbreviationContainer.js       |   14 +-
 .../containers/HeaderMenuContainer.js         |   71 +-
 .../containers/MainContentContainer.js        |   33 +-
 .../chemscanner/containers/RootContainer.js   |    3 -
 .../containers/ScannedItemsContainer.js       |   61 +-
 .../src/apps/chemscanner/middleware/api.js    |   26 +-
 .../apps/chemscanner/middleware/chemdraw.js   |   17 +-
 .../apps/chemscanner/reducers/molecules.js    |  284 +----
 .../apps/chemscanner/reducers/reactions.js    |  345 ++---
 app/packs/src/apps/chemscanner/reducers/ui.js |   65 +-
 .../apps/chemscanner/store/configureStore.js  |   14 +-
 app/packs/src/apps/chemscanner/utils.js       |  102 +-
 .../src/apps/commandAndControl/Navigation.js  |    2 -
 .../src/apps/converter/ConverterAdmin.js      |   11 -
 app/packs/src/apps/home/Home.js               |  156 ++-
 app/packs/src/apps/mydb/App.js                |   13 +-
 .../mydb/collections/CollectionSubtree.js     |    2 +-
 .../apps/mydb/collections/CollectionTree.js   |   67 +-
 .../elements/details/ElementDetailSortTab.js  |    2 +-
 .../mydb/elements/details/ElementDetails.js   |    2 +-
 .../literature/DetailsTabLiteratures.js       |    2 +-
 .../details/literature/LiteratureCommon.js    |    2 +-
 .../details/reactions/ReactionDetails.js      |   19 +-
 .../ReactionDetailsMainProperties.js          |    2 +-
 .../ReactionDetailsProperties.js              |    2 +-
 .../reactions/schemeTab/MaterialGroup.js      |    2 +-
 .../schemeTab/ReactionDetailsDuration.js      |    2 +-
 .../schemeTab/ReactionDetailsPurification.js  |    2 +-
 .../schemeTab/ReactionDetailsScheme.js        |    2 +-
 .../mydb/elements/details/reports/Previews.js |    2 +-
 .../elements/details/samples/SampleDetails.js |  128 +-
 .../analysesTab/SampleDetailsContainersAux.js |    8 +-
 .../samples/propertiesTab/SampleForm.js       |    2 +-
 .../apps/mydb/elements/list/ElementsTable.js  |   10 +-
 .../elements/list/ElementsTableEntries.js     |   13 +
 .../list/ElementsTableSampleEntries.js        |    2 +-
 app/packs/src/apps/mydb/routes.js             |    1 -
 app/packs/src/components/CitationPanel.js     |    4 +-
 .../src/components/CollectionTabsHelper.js    |   60 -
 app/packs/src/components/CollectionTree.js    |  423 -------
 .../src/components/ElementsTableEntries.js    |  398 ------
 app/packs/src/components/NMRiumDisplayer.js   |  489 -------
 app/packs/src/components/UserInfos.js         |    2 +-
 .../components/actions/CollectionActions.js   |    0
 app/packs/src/components/chemrepo/DateInfo.js |    2 +-
 app/packs/src/components/chemrepo/LdData.js   |    2 +-
 .../components/chemrepo/MoleculeArchive.js    |    6 +-
 .../components/chemrepo/PublicCommentModal.js |    4 +-
 .../chemrepo/PublicReactionProperties.js      |    2 +-
 .../components/chemrepo/PublicReactionTlc.js  |    2 +-
 .../src/components/chemrepo/PublicSample.js   |    6 +-
 .../{ => chemrepo}/PublishCommon.js           |   18 +-
 .../PublishReactionContainers.js              |    6 +-
 .../{ => chemrepo}/PublishReactionModal.js    |   46 +-
 .../{ => chemrepo}/PublishSampleModal.js      |   26 +-
 .../ReactionDetailsRepoComment.js             |    6 +-
 .../SampleDetailsRepoComment.js               |    8 +-
 .../src/components/chemrepo/UnsealButton.js   |    4 +-
 .../components/chemrepo/UserCommentModal.js   |    2 +-
 .../common/RepoMetadataModal.js               |    2 +-
 .../{ => chemrepo}/common/RepoPreviewImage.js |    4 +-
 .../common/RepoPublicComment.js               |    4 +-
 .../common/RepoReviewAuthorsModal.js          |   16 +-
 .../{ => chemrepo}/common/RepoSpectra.js      |    8 +-
 .../{ => chemrepo}/common/RepoUserComment.js  |    2 +-
 .../{ => chemrepo}/common/RepoXvialButton.js  |    6 +-
 .../src/components/chemrepo/format-utils.js   |    2 +
 .../src/components/chemrepo/ma/MAModals.js    |    4 +-
 .../components/chemrepo/publication-utils.js  |    2 +-
 .../chemrepo/search/PublicSearchIcons.js      |  234 ++++
 .../chemscanner/actions/storedFileActions.js  |  315 -----
 .../chemscanner/actions/uiActions.js          |   25 -
 .../components/ArchivedManagement.js          |  142 ---
 .../components/ChemscannerImportModal.js      |  132 --
 .../chemscanner/components/EditMdlBtn.js      |   53 -
 .../chemscanner/components/EditableText.js    |   61 -
 .../components/FileItemActionsHeader.js       |  141 ---
 .../components/FileItemActionsRenderer.js     |  260 ----
 .../components/FileItemApproveFilter.js       |   97 --
 .../components/FileItemApproveRenderer.js     |   57 -
 .../components/FileItemFileNameFilter.js      |  127 --
 .../components/FileItemImportedFilter.js      |   98 --
 .../components/FileItemImportedRenderer.js    |   30 -
 .../components/FileItemInformationEditor.js   |  269 ----
 .../components/FileItemInformationRenderer.js |  120 --
 .../components/FileItemVersionFilter.js       |   71 --
 .../chemscanner/components/FileStorage.js     |  351 ------
 .../chemscanner/components/ImportModal.js     |  116 --
 .../components/fileStorageUtils.js            |  302 -----
 .../containers/ArchivedManagementContainer.js |   61 -
 .../containers/FileStorageContainer.js        |  230 ----
 .../containers/ImportModalContainer.js        |   38 -
 .../components/chemscanner/reactionUtils.js   |   41 -
 .../components/chemscanner/reducers/index.js  |   17 -
 .../components/chemscanner/reducers/root.js   |   17 -
 .../chemscanner/reducers/schemes.js           |  176 ---
 app/packs/src/components/common/HelpInfo.js   |    2 +-
 app/packs/src/components/common/ImageModal.js |    5 +-
 .../src/components/common/NewsPreviewModal.js |    2 +-
 .../components/container/ContainerDataset.js  |    3 -
 .../container/ContainerDatasetField.js        |    2 +-
 .../contextActions/ContextActions.js          |    8 +-
 .../components/contextActions/CreateButton.js |   14 +-
 .../contextActions/ExportImportButton.js      |   67 +-
 .../contextActions/ReportUtilButton.js        |    4 +-
 .../components/fetchers/GenericBaseFetcher.js |   64 -
 .../components/fetchers/GenericSgsFetcher.js  |   33 -
 .../metadata/MetadataAlternateIdentifiers.js  |    2 +-
 .../components/metadata/MetadataContainer.js  |   20 +-
 .../metadata/MetadataContributors.js          |    2 +-
 .../components/metadata/MetadataCreators.js   |    2 +-
 .../metadata/MetadataFundingReferences.js     |    2 +-
 .../metadata/MetadataRelatedIdentifiers.js    |    2 +-
 .../src/components/navigation/Navigation.js   |    2 +-
 .../src/components/navigation/RepoNavHead.js  |   31 +
 .../src/components/navigation/UserAuth.js     |    4 +-
 .../navigation/search/SearchFilter.js         |    2 +-
 .../src/components/report/SectionDoiList.js   |    8 +-
 .../src/components/search/SampleCriteria.js   |    3 +-
 .../components/search/SampleFormCriteria.js   |    4 -
 app/packs/src/components/sso/LoginOptions.js  |   62 -
 .../structureEditor/StructureEditorModal.js   |   46 +-
 app/packs/src/components/users/AuthorModal.js |   14 +-
 .../utils/defaultAnalysisPublish.js           |    2 +-
 .../src/components/viewer/MolViewerBtn.js     |    6 +-
 .../src/components/viewer/MolViewerListBtn.js |    8 +-
 .../components/viewer/MolViewerListModal.js   |    4 +-
 .../src/components/viewer/MolViewerModal.js   |    6 +-
 app/packs/src/fetchers/GenericBaseFetcher.js  |    8 +
 app/packs/src/fetchers/LiteraturesFetcher.js  |    4 +-
 app/packs/src/fetchers/ReactionsFetcher.js    |    4 +-
 app/packs/src/fetchers/SamplesFetcher.js      |    5 +-
 app/packs/src/generic/GenericAdminNav.js      |   70 --
 app/packs/src/generic/GenericDatasetsAdmin.js |  233 ----
 app/packs/src/generic/GenericElementsAdmin.js |  415 ------
 app/packs/src/generic/GenericSegmentsAdmin.js |  382 ------
 app/packs/src/generic/Utils.js                |  156 ---
 app/packs/src/libHome/ContainerComponent.js   |    8 +-
 app/packs/src/libHome/Home.js                 |  174 ---
 app/packs/src/libHome/Navigation.js           |   14 +-
 .../src/libHome/RepoHowTo/EditorRichText.js   |    2 +-
 .../src/libHome/RepoHowTo/EditorStelle.js     |   10 +-
 app/packs/src/libHome/homeRoutes.js           |   20 +-
 app/packs/src/models/Element.js               |    2 +-
 app/packs/src/models/Literature.js            |    2 +-
 .../fetchers/ArticleFetcher.js                |    0
 .../fetchers/CollaboratorFetcher.js           |    0
 .../fetchers/EmbargoFetcher.js                |    0
 .../src/repo/fetchers/GenericSgsFetcher.js    |   56 +
 .../fetchers/LiteraturesFetcher.js            |   62 +-
 .../fetchers/PublicFetcher.js                 |    6 +-
 .../fetchers/RepositoryFetcher.js             |    6 +-
 .../fetchers/ReviewFetcher.js                 |    0
 app/packs/src/repoHome/NavHead.js             |   28 +
 .../src/{libHome => repoHome}/RepoAbout.js    |    0
 .../{libHome => repoHome}/RepoCardIntro.js    |    2 +-
 .../RepoCardLatestPublish.js                  |    2 +-
 .../RepoCardMoleculeArchive.js                |    0
 .../RepoCardReviewerIntro.js                  |    4 +-
 .../RepoCardStaticsBoard.js                   |    4 +-
 .../{libHome => repoHome}/RepoCollection.js   |   10 +-
 .../RepoCollectionDetails.js                  |    4 +-
 .../src/{libHome => repoHome}/RepoCommon.js   |   72 +-
 .../src/{libHome => repoHome}/RepoContact.js  |    0
 .../RepoContainerDatasets.js                  |    4 +-
 .../{libHome => repoHome}/RepoDirective.js    |    0
 .../RepoElementDetails.js                     |    8 +-
 .../src/{libHome => repoHome}/RepoEmbargo.js  |   16 +-
 .../RepoEmbargoDetails.js                     |    6 +-
 .../{libHome => repoHome}/RepoEmbargoModal.js |    4 +-
 .../{libHome => repoHome}/RepoGenericHub.js   |   18 +-
 .../RepoGenericHubDesc.js                     |   13 +-
 .../src/{libHome => repoHome}/RepoHome.js     |   25 +-
 .../src/{libHome => repoHome}/RepoHowTo.js    |    8 +-
 .../RepoHowToDragSource.js                    |    2 +-
 .../RepoHowToDropTarget.js                    |    2 +-
 .../{libHome => repoHome}/RepoHowToEditor.js  |   18 +-
 .../{libHome => repoHome}/RepoHowToReader.js  |    6 +-
 .../RepoMoleculeArchive.js                    |    8 +-
 .../{libHome => repoHome}/RepoMoleculeList.js |   10 +-
 .../{libHome => repoHome}/RepoNavListTypes.js |    0
 .../{libHome => repoHome}/RepoNewsEditor.js   |   18 +-
 .../{libHome => repoHome}/RepoNewsReader.js   |    6 +-
 .../src/{libHome => repoHome}/RepoNewsroom.js |    8 +-
 .../{libHome => repoHome}/RepoPubCommon.js    |    0
 .../src/{libHome => repoHome}/RepoPubl.js     |  205 ++-
 .../RepoReactionDetails.js                    |   36 +-
 .../{libHome => repoHome}/RepoReactionList.js |    4 +-
 .../RepoReactionSchemeInfo.js                 |    9 +-
 .../src/{libHome => repoHome}/RepoReview.js   |   18 +-
 .../RepoReviewButtonBar.js                    |    4 +-
 .../{libHome => repoHome}/RepoReviewCommon.js |    0
 .../RepoReviewDetails.js                      |    6 +-
 .../src/{libHome => repoHome}/RepoSample.js   |   36 +-
 .../RepoSampleDetails.js                      |   12 +-
 .../src/{libHome => repoHome}/RepoSegment.js  |    2 +-
 .../src/stores/alt/actions/SpectraActions.js  |    2 -
 .../src/stores/alt/actions/UserActions.js     |    1 -
 .../alt/repo}/actions/EmbargoActions.js       |    6 +-
 .../alt/repo}/actions/PublicActions.js        |   22 +-
 .../alt/repo}/actions/RepositoryActions.js    |    7 +-
 .../alt/repo}/actions/ReviewActions.js        |    5 +-
 .../alt/repo}/stores/EmbargoStore.js          |    6 +-
 .../alt/repo}/stores/PublicStore.js           |   32 +-
 .../alt/repo}/stores/RStore.js                |    6 +-
 .../alt/repo}/stores/ReviewStore.js           |   18 +-
 .../src/stores/alt/stores/ElementStore.js     |    2 +-
 .../src/stores/alt/stores/LoadingStore.js     |   15 +-
 .../src/stores/alt/stores/ReportStore.js      |    5 +-
 app/packs/src/stores/alt/stores/UIStore.js    |    2 +-
 .../src/utilities/CollectionTabsHelper.js     |    2 +-
 app/packs/src/utilities/ElementUtils.js       |    7 +-
 app/serializers/sample_policy_serializable.rb |   31 -
 app/serializers/sample_serializer.rb          |  111 --
 app/usecases/reactions/update_materials.rb    |    1 +
 config/compound_open_data.yml.example         |    5 -
 config/initializers/compound_open_data.rb     |   14 +-
 config/initializers/molecule_viewer.rb        |   24 +-
 db/migrate/20180910125250_migrate_dois.rb     |   91 +-
 ...ange_function_pub_reactions_by_molecule.rb |    2 +-
 ...ync_collection_reaction_detail_level_10.rb |    4 +-
 ...103165000_datafix_publication_reactions.rb |    8 +-
 ...e_default_element_to_review_collections.rb |    4 +-
 ...01_create_public_scheme_only_collection.rb |   25 +-
 ...0210621145002_generic_datasets_revision.rb |    2 +-
 .../20220330103001_build_embargo_doi.rb       |   28 +-
 ...0712100010_add_segment_klass_identifier.rb |   23 -
 db/migrate/20230404112233_orcid_migration.rb  |    8 +-
 .../20230727222288_accepted_ancestry.rb       |   35 +-
 db/schema.rb                                  |  492 ++++++--
 lib/data_cite/literature_paser.rb             |    2 +-
 package.json                                  |    2 +
 spec/javascripts/common/common.spec.js        |    2 +-
 spec/javascripts/utils/quillFormat.spec.js    |    2 +-
 yarn.lock                                     | 1119 ++++-------------
 283 files changed, 3043 insertions(+), 11064 deletions(-)
 create mode 100644 app/api/entities/repo_reaction_entity.rb
 delete mode 100644 app/models/chemscanner/molecule.rb
 delete mode 100644 app/models/chemscanner/reaction.rb
 delete mode 100644 app/models/chemscanner/reaction_step.rb
 delete mode 100644 app/models/chemscanner/reactions_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_product_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_reactant_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_reagent_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_solvent_molecule.rb
 delete mode 100644 app/models/chemscanner/scheme.rb
 delete mode 100644 app/models/chemscanner/source.rb
 delete mode 100644 app/packs/src/admin/converter/ConverterAdmin.js
 delete mode 100644 app/packs/src/components/CollectionTabsHelper.js
 delete mode 100644 app/packs/src/components/CollectionTree.js
 delete mode 100644 app/packs/src/components/ElementsTableEntries.js
 delete mode 100644 app/packs/src/components/NMRiumDisplayer.js
 delete mode 100644 app/packs/src/components/actions/CollectionActions.js
 rename app/packs/src/components/{ => chemrepo}/PublishCommon.js (95%)
 rename app/packs/src/components/{ => chemrepo}/PublishReactionContainers.js (96%)
 rename app/packs/src/components/{ => chemrepo}/PublishReactionModal.js (96%)
 rename app/packs/src/components/{ => chemrepo}/PublishSampleModal.js (95%)
 rename app/packs/src/components/{ => chemrepo}/ReactionDetailsRepoComment.js (86%)
 rename app/packs/src/components/{ => chemrepo}/SampleDetailsRepoComment.js (82%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoMetadataModal.js (97%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoPreviewImage.js (90%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoPublicComment.js (96%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoReviewAuthorsModal.js (97%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoSpectra.js (84%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoUserComment.js (97%)
 rename app/packs/src/components/{ => chemrepo}/common/RepoXvialButton.js (97%)
 create mode 100644 app/packs/src/components/chemrepo/format-utils.js
 create mode 100644 app/packs/src/components/chemrepo/search/PublicSearchIcons.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/storedFileActions.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/uiActions.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ArchivedManagement.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
 delete mode 100644 app/packs/src/components/chemscanner/components/EditMdlBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/EditableText.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileStorage.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ImportModal.js
 delete mode 100644 app/packs/src/components/chemscanner/components/fileStorageUtils.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/FileStorageContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/ImportModalContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/reactionUtils.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/index.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/root.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/schemes.js
 delete mode 100644 app/packs/src/components/fetchers/GenericBaseFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/GenericSgsFetcher.js
 create mode 100644 app/packs/src/components/navigation/RepoNavHead.js
 delete mode 100644 app/packs/src/components/sso/LoginOptions.js
 delete mode 100644 app/packs/src/generic/GenericAdminNav.js
 delete mode 100644 app/packs/src/generic/GenericDatasetsAdmin.js
 delete mode 100644 app/packs/src/generic/GenericElementsAdmin.js
 delete mode 100644 app/packs/src/generic/GenericSegmentsAdmin.js
 delete mode 100644 app/packs/src/generic/Utils.js
 delete mode 100644 app/packs/src/libHome/Home.js
 rename app/packs/src/{components => repo}/fetchers/ArticleFetcher.js (100%)
 rename app/packs/src/{components => repo}/fetchers/CollaboratorFetcher.js (100%)
 rename app/packs/src/{components => repo}/fetchers/EmbargoFetcher.js (100%)
 create mode 100644 app/packs/src/repo/fetchers/GenericSgsFetcher.js
 rename app/packs/src/{components => repo}/fetchers/LiteraturesFetcher.js (61%)
 rename app/packs/src/{components => repo}/fetchers/PublicFetcher.js (98%)
 rename app/packs/src/{components => repo}/fetchers/RepositoryFetcher.js (98%)
 rename app/packs/src/{components => repo}/fetchers/ReviewFetcher.js (100%)
 create mode 100644 app/packs/src/repoHome/NavHead.js
 rename app/packs/src/{libHome => repoHome}/RepoAbout.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoCardIntro.js (92%)
 rename app/packs/src/{libHome => repoHome}/RepoCardLatestPublish.js (97%)
 rename app/packs/src/{libHome => repoHome}/RepoCardMoleculeArchive.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoCardReviewerIntro.js (96%)
 rename app/packs/src/{libHome => repoHome}/RepoCardStaticsBoard.js (97%)
 rename app/packs/src/{libHome => repoHome}/RepoCollection.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoCollectionDetails.js (89%)
 rename app/packs/src/{libHome => repoHome}/RepoCommon.js (96%)
 rename app/packs/src/{libHome => repoHome}/RepoContact.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoContainerDatasets.js (92%)
 rename app/packs/src/{libHome => repoHome}/RepoDirective.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoElementDetails.js (85%)
 rename app/packs/src/{libHome => repoHome}/RepoEmbargo.js (96%)
 rename app/packs/src/{libHome => repoHome}/RepoEmbargoDetails.js (88%)
 rename app/packs/src/{libHome => repoHome}/RepoEmbargoModal.js (98%)
 rename app/packs/src/{libHome => repoHome}/RepoGenericHub.js (92%)
 rename app/packs/src/{libHome => repoHome}/RepoGenericHubDesc.js (67%)
 rename app/packs/src/{libHome => repoHome}/RepoHome.js (91%)
 rename app/packs/src/{libHome => repoHome}/RepoHowTo.js (94%)
 rename app/packs/src/{libHome => repoHome}/RepoHowToDragSource.js (90%)
 rename app/packs/src/{libHome => repoHome}/RepoHowToDropTarget.js (94%)
 rename app/packs/src/{libHome => repoHome}/RepoHowToEditor.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoHowToReader.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoMoleculeArchive.js (93%)
 rename app/packs/src/{libHome => repoHome}/RepoMoleculeList.js (91%)
 rename app/packs/src/{libHome => repoHome}/RepoNavListTypes.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoNewsEditor.js (96%)
 rename app/packs/src/{libHome => repoHome}/RepoNewsReader.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoNewsroom.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoPubCommon.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoPubl.js (80%)
 rename app/packs/src/{libHome => repoHome}/RepoReactionDetails.js (94%)
 rename app/packs/src/{libHome => repoHome}/RepoReactionList.js (97%)
 rename app/packs/src/{libHome => repoHome}/RepoReactionSchemeInfo.js (93%)
 rename app/packs/src/{libHome => repoHome}/RepoReview.js (96%)
 rename app/packs/src/{libHome => repoHome}/RepoReviewButtonBar.js (95%)
 rename app/packs/src/{libHome => repoHome}/RepoReviewCommon.js (100%)
 rename app/packs/src/{libHome => repoHome}/RepoReviewDetails.js (88%)
 rename app/packs/src/{libHome => repoHome}/RepoSample.js (89%)
 rename app/packs/src/{libHome => repoHome}/RepoSampleDetails.js (94%)
 rename app/packs/src/{libHome => repoHome}/RepoSegment.js (94%)
 rename app/packs/src/{components => stores/alt/repo}/actions/EmbargoActions.js (94%)
 rename app/packs/src/{components => stores/alt/repo}/actions/PublicActions.js (93%)
 rename app/packs/src/{components => stores/alt/repo}/actions/RepositoryActions.js (91%)
 rename app/packs/src/{components => stores/alt/repo}/actions/ReviewActions.js (93%)
 rename app/packs/src/{components => stores/alt/repo}/stores/EmbargoStore.js (94%)
 rename app/packs/src/{components => stores/alt/repo}/stores/PublicStore.js (88%)
 rename app/packs/src/{components => stores/alt/repo}/stores/RStore.js (83%)
 rename app/packs/src/{components => stores/alt/repo}/stores/ReviewStore.js (89%)
 delete mode 100644 app/serializers/sample_policy_serializable.rb
 delete mode 100644 app/serializers/sample_serializer.rb
 delete mode 100644 config/compound_open_data.yml.example
 delete mode 100644 db/migrate/20220712100010_add_segment_klass_identifier.rb

diff --git a/Gemfile.lock b/Gemfile.lock
index 48df9f42f..867854265 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -259,8 +259,6 @@ GEM
     charlock_holmes (0.7.7)
     childprocess (4.1.0)
     chronic (0.10.2)
-    chronic_duration (0.10.6)
-      numerizer (~> 0.1.1)
     chunky_png (1.4.0)
     climate_control (0.2.0)
     closure_tree (7.4.0)
@@ -509,7 +507,6 @@ GEM
     nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    numerizer (0.1.1)
     oauth2 (2.0.9)
       faraday (>= 0.17.3, < 3.0)
       jwt (>= 1.0, < 3.0)
@@ -989,4 +986,4 @@ DEPENDENCIES
   yaml_db
 
 BUNDLED WITH
-   1.17.3
+   2.2.29
diff --git a/app/api/api.rb b/app/api/api.rb
index e7920ef2a..9690dab41 100644
--- a/app/api/api.rb
+++ b/app/api/api.rb
@@ -61,7 +61,7 @@ def authenticate!
     def is_public_request?
       request.path.start_with?(
         '/api/v1/public/',
-        '/api/v1/labimotion_hub/',
+        '/api/v1/labimotion_hub/',            ### TODO: Paggy
         '/api/v1/public_chemscanner/',
         '/api/v1/chemspectra/',
         '/api/v1/ketcher/layout',
@@ -195,7 +195,6 @@ def to_json_camel_case(val)
   mount Chemotion::RepositoryAPI
   mount Chemotion::ArticleAPI
   mount Chemotion::CollaborationAPI
-  mount Labimotion::LabimotionHubAPI
 
   add_swagger_documentation(info: {
     "title": "Chemotion Repository",
diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index ffe0e5c27..b522ce267 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -91,8 +91,8 @@ class CollectionAPI < Grape::API
 
       desc "Return all locked and unshared serialized collection roots of current user"
       get :locked do
-        roots = current_user.type == 'Anonymous' ? [] : current_user.collections.includes(:shared_users).locked.unshared.roots.order(label: :asc)
-        present roots, with: Entities::CollectionEntity, root: :collections
+        cols = current_user.type == 'Anonymous' ? [] : current_user.collections.includes(:shared_users).locked.unshared.roots.order(label: :asc)
+        present cols, with: Entities::CollectionEntity, root: :collections
       end
 
       get_child = Proc.new do |children, collects|
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 0e7cb6c10..20babc182 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -8,26 +8,26 @@ module Chemotion
   # API for Public data
   class PublicAPI < Grape::API
     include Grape::Kaminari
-    # helpers do
-    #   def send_notification(attachment, user, status, has_error = false)
-    #     data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
-    #     level = 'success'
-    #     if has_error
-    #       data_args['comment'] = ' an error has occurred, the file is not changed.'
-    #       level = 'error'
-    #     elsif status == 4
-    #       data_args['comment'] = ' file has not changed.'
-    #       level = 'info'
-    #     elsif @status == 7
-    #       data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
-    #       level = 'error'
-    #     end
-    #     message = Message.create_msg_notification(
-    #       channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
-    #       data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
-    #     )
-    #   end
-    # end
+    helpers do
+      def send_notification(attachment, user, status, has_error = false)
+        data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
+        level = 'success'
+        if has_error
+          data_args['comment'] = ' an error has occurred, the file is not changed.'
+          level = 'error'
+        elsif status == 4
+          data_args['comment'] = ' file has not changed.'
+          level = 'info'
+        elsif @status == 7
+          data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
+          level = 'error'
+        end
+        message = Message.create_msg_notification(
+          channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
+          data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
+        )
+      end
+    end
     helpers CompoundHelpers
     helpers PublicHelpers
 
@@ -289,17 +289,17 @@ def query_embargo(name)
 
         desc 'Return all countries available'
         get 'countries' do
-          ISO3166::Country.all_translated
+          { affiliations: ISO3166::Country.all_translated }
         end
 
         desc "Return all current organizations"
         get "organizations" do
-          Affiliation.where.not(organization: ENV['BLIST_ORGANIZATIONS']).pluck("DISTINCT organization")
+          { affiliations: Affiliation.where.not(organization: ENV['BLIST_ORGANIZATIONS']).pluck("DISTINCT organization")}
         end
 
         desc "Return all current departments"
         get "departments" do
-          Affiliation.where.not(department:  ENV['BLIST_DEPARTMENTS']).pluck("DISTINCT trim(department)")
+          { affiliations: Affiliation.where.not(department:  ENV['BLIST_DEPARTMENTS']).pluck('DISTINCT department')}
         end
 
         # desc "Return all current groups"
@@ -319,7 +319,7 @@ def query_embargo(name)
       get 'collection' do
         pub_coll = Collection.public_collection
         if current_user
-          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
+          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll&.id)
           { id: coll&.id, is_sync_to_me: true  }
         else
           { id: nil }
@@ -374,11 +374,11 @@ def query_embargo(name)
           return "/molecules/#{molecule.id.to_s}" if type.empty?
 
           version = params[:version] ? params[:version] : ""
-          analyses = Collection.public_collection.samples
+          analyses = Collection.public_collection&.samples
             .where("samples.molecule_id = ?", molecule.id.to_s)
             .map(&:analyses).flatten
 
-          analyses_filtered = analyses.select { |a|
+          analyses_filtered = analyses&.select { |a|
             em = a.extended_metadata
             check = em['kind'].to_s.gsub(/\s/, '') == type
             check = check && (em['analysis_version'] || '1') == version unless version.empty?
@@ -471,7 +471,7 @@ def query_embargo(name)
             obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
             obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], req_xvial)
           end
-          entities
+          { molecules: entities }
         end
       end
 
@@ -548,7 +548,7 @@ def query_embargo(name)
             obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
           end
 
-          entities
+          { reactions: entities }
         end
       end
 
@@ -875,7 +875,7 @@ def query_embargo(name)
       resource :published_statics do
         desc 'Return PUBLIC statics'
         get do
-          ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
+          { published_statics: ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps') }
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index bbd78a995..c2edd2ea3 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -238,7 +238,7 @@ def duplicate_reaction(reaction, analysis_set)
         def create_publication_tag(contributor, author_ids, license)
           authors = User.where(type: %w[Person Collaborator], id: author_ids)
                         .includes(:affiliations)
-                        .order("position(users.id::text in '#{author_ids}')")
+                        .order(Arel.sql("position(users.id::text in '#{author_ids}')"))
           affiliations = authors.map(&:current_affiliations)
           affiliations_output = {}
           affiliations.flatten.each do |aff|
@@ -413,7 +413,7 @@ def add_submission_history(root)
         end
 
         if User.reviewer_ids.include?(current_user.id) && params[:is_submit] == false
-          es = Publication.where(element_type: 'Collection', state: 'pending').order("taggable_data->>'label' ASC")
+          es = Publication.where(element_type: 'Collection', state: 'pending').order(Arel.sql("taggable_data->>'label' ASC"))
         else
           cols = if current_user.type == 'Anonymous'
                    Collection.where(id: current_user.sync_in_collections_users.pluck(:collection_id)).where.not(label: 'chemotion')
@@ -538,8 +538,12 @@ def add_submission_history(root)
         after_validation do
           element = Reaction.find_by(id: params[:id])
           error!('404 No data found', 404) unless element
+
           element_policy = ElementPolicy.new(current_user, element)
           error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
+
+          pub = Publication.find_by(element_type: 'Reaction', element_id: params[:id])
+          error!('401 Unauthorized', 401) if (params[:is_public] == false && pub.state == 'completed')
         end
         get do
           reaction = Reaction.where(id: params[:id])
@@ -562,7 +566,7 @@ def add_submission_history(root)
           review_info = repo_review_info(publication, current_user&.id, false)
           publication.review&.slice!('history') unless User.reviewer_ids.include?(current_user.id) || review_info[:groupleader] == true
           published_user = User.find(publication.published_by) unless publication.nil?
-          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
+          entities = Entities::RepoReactionEntity.represent(reaction, serializable: true)
           entities[:literatures] = literatures unless entities.nil? || literatures.blank?
           entities[:schemes] = schemeList unless entities.nil? || schemeList.blank?
           entities[:segments] = Labimotion::SegmentEntity.represent(reaction.segments)
@@ -588,8 +592,12 @@ def add_submission_history(root)
         after_validation do
           element = Sample.find_by(id: params[:id])
           error!('401 No data found', 401) unless element
+
           element_policy = ElementPolicy.new(current_user, element)
           error!('401 Unauthorized', 401) unless element_policy.read? || User.reviewer_ids.include?(current_user.id)
+
+          pub = Publication.find_by(element_type: 'Sample', element_id: params[:id])
+          error!('401 Unauthorized', 401) if (params[:is_public] == false && pub.state == 'completed')
         end
         get do
           sample = Sample.where(id: params[:id]).includes(:molecule, :tag).last
@@ -822,8 +830,9 @@ def save_comment(root, comment)
 
         post :comments do
           save_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], nil, false)
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
+
           review_info = repo_review_info(@root_publication, current_user&.id, false)
           his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
           { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
@@ -842,8 +851,8 @@ def save_comment(root, comment)
           @root_publication.process_element(Publication::STATE_REVIEWED)
           @root_publication.inform_users(Publication::STATE_REVIEWED)
           # @root_publication.element
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
           review_info = repo_review_info(@root_publication, current_user&.id, false)
           { "#{params[:type]}": element, review: @root_publication.review, review_info: review_info }
         end
@@ -854,8 +863,8 @@ def save_comment(root, comment)
           @root_publication.update_state(Publication::STATE_PENDING)
           @root_publication.process_element(Publication::STATE_PENDING)
           @root_publication.inform_users(Publication::STATE_PENDING)
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
           his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
           review_info = repo_review_info(@root_publication, current_user&.id, false)
           { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
@@ -863,8 +872,8 @@ def save_comment(root, comment)
 
         post :approved do
           approve_comments(@root_publication, params[:comment], params[:checklist], params[:reviewComments], 'approved', false)
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
           his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id) || @root_publication.review.dig('reviewers')&.include?(current_user.id)
           review_info = repo_review_info(@root_publication, current_user&.id, false)
           { "#{params[:type]}": element, review: his || @root_publication.review, review_info: review_info }
@@ -880,8 +889,8 @@ def save_comment(root, comment)
           @root_publication.process_element(Publication::STATE_ACCEPTED)
           @root_publication.inform_users(Publication::STATE_ACCEPTED)
 
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
           review_info = repo_review_info(@root_publication, current_user&.id, false)
           { "#{params[:type]}": element, review: @root_publication.review, message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off', review_info: review_info }
         end
@@ -890,8 +899,8 @@ def save_comment(root, comment)
           @root_publication.update_state('declined')
           @root_publication.process_element('declined')
           @root_publication.inform_users(Publication::STATE_DECLINED, current_user.id)
-          element = ReactionSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'reaction'
-          element = SampleSerializer.new(@root_publication.element).serializable_hash.deep_symbolize_keys if params[:type] == 'sample'
+          element = Entities::ReactionEntity.represent(@root_publication.element) if params[:type] == 'reaction'
+          element = Entities::SampleEntity.represent(@root_publication.element) if params[:type] == 'sample'
           his = @root_publication.review&.slice('history') unless User.reviewer_ids.include?(current_user.id)
           { "#{params[:type]}": element, review: his || @root_publication.review }
         end
@@ -935,8 +944,9 @@ def save_comment(root, comment)
           pub.inform_users
 
           @sample.reload
+          detail_levels = ElementDetailLevelCalculator.new(user: current_user, element: @sample).detail_levels
           {
-            sample: SampleSerializer.new(@sample).serializable_hash.deep_symbolize_keys,
+            sample: Entities::SampleEntity.represent(@sample, detail_levels: detail_levels),
             message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off'
           }
         end
@@ -946,7 +956,8 @@ def save_comment(root, comment)
           @sample.reserve_suffix_analyses(@analyses)
           @sample.reload
           @sample.tag_reserved_suffix(@analyses)
-          { sample: SampleSerializer.new(@sample).serializable_hash.deep_symbolize_keys }
+          ## { sample: SampleSerializer.new(@sample).serializable_hash.deep_symbolize_keys }
+          present @samples, with: Entities::SampleEntity, root: :sample
         end
       end
 
@@ -994,7 +1005,7 @@ def save_comment(root, comment)
 
           @reaction.reload
           {
-            reaction: ReactionSerializer.new(@reaction).serializable_hash.deep_symbolize_keys,
+            reaction: Entities::ReactionEntity.represent(@reaction, serializable: true),
             message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off'
           }
         end
@@ -1014,7 +1025,7 @@ def save_comment(root, comment)
           @reaction.tag_reserved_suffix(@analysis_set)
           @reaction.reload
           {
-            reaction: ReactionSerializer.new(@reaction).serializable_hash.deep_symbolize_keys,
+            reaction: Entities::ReactionEntity.represent(@reaction, serializable: true),
             message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off'
           }
         end
@@ -1120,7 +1131,7 @@ def save_comment(root, comment)
 
           @reaction.reload
           {
-            reaction: ReactionSerializer.new(@reaction).serializable_hash.deep_symbolize_keys,
+            reaction: Entities::ReactionEntity.represent(@reaction, serializable: true),
             message: ENV['PUBLISH_MODE'] ? "publication on: #{ENV['PUBLISH_MODE']}" : 'publication off'
           }
         end
diff --git a/app/api/entities/container_entity.rb b/app/api/entities/container_entity.rb
index 646625aa5..d364ce486 100644
--- a/app/api/entities/container_entity.rb
+++ b/app/api/entities/container_entity.rb
@@ -52,14 +52,12 @@ def extended_metadata
 
     private
 
-    def preview_img(container_ids, attachments)
-      attachments = attachments.select do |a|
-        a.thumb == true && a.attachable_type == 'Container' && container_ids.include?(a.attachable_id)
-      end
-
-      image_atts = attachments.select do |a_img|
-        a_img&.content_type&.match(Regexp.union(%w[jpg jpeg png tiff]))
-      end
+    # The frontend assumes the analysis (no other container types) to have a preview image.
+    # Technically the images are attached to the analysis' dataset children though.
+    # Therefore we have to collect all eligible images from the dataset children and display the newest
+    # thumbnail available.
+    def preview_img
+      return unless object.container_type == 'analysis'
 
       attachments_with_thumbnail = Attachment.where(
         thumb: true,
diff --git a/app/api/entities/inbox_entity.rb b/app/api/entities/inbox_entity.rb
index 0ed8a8bbe..d50e2f68c 100644
--- a/app/api/entities/inbox_entity.rb
+++ b/app/api/entities/inbox_entity.rb
@@ -63,11 +63,12 @@ def all_descendants_attachments
     end
 
     def inbox_count
-      inbox_obj = options[:root_container] ? object : object.parent
-      Container.where(id: inbox_obj.descendant_ids)
-               .joins(children: :attachments)
-               .count('attachments.id') +
-        unlinked_attachments.size.to_i
+      # inbox_obj = options[:root_container] ? object : object.parent
+      # Container.where(id: inbox_obj.descendant_ids)
+      #          .joins(children: :attachments)
+      #          .count('attachments.id') +
+      #   unlinked_attachments.size.to_i
+      0
     end
   end
 end
diff --git a/app/api/entities/repo_reaction_entity.rb b/app/api/entities/repo_reaction_entity.rb
new file mode 100644
index 000000000..1b88632db
--- /dev/null
+++ b/app/api/entities/repo_reaction_entity.rb
@@ -0,0 +1,22 @@
+module Entities
+  class RepoReactionEntity < Grape::Entity
+    expose :id, documentation: { type: "Integer", desc: "Reaction's unique id"}
+    expose :name, :short_label, :description, :publication, :reaction_svg_file,
+    :rinchi_long_key, :rinchi_short_key, :rinchi_string
+    expose :rinchi_web_key, if: -> (obj, opts) { obj.respond_to? :rinchi_web_key}
+    # expose :analysis_samples_reactions, if: -> (obj, opts) { obj.respond_to? :analysis_samples_reactions}
+    expose :container, using: Entities::ContainerEntity
+    expose :products, using: Entities::SampleEntity
+    expose :doi, using: Entities::DoiEntity
+    expose :status, if: -> (obj, opts) { obj.respond_to? :status}
+    expose :tlc_description, if: -> (obj, opts) { obj.respond_to? :tlc_description}
+    expose :tlc_solvents, if: -> (obj, opts) { obj.respond_to? :tlc_solvents}
+    expose :temperature, if: -> (obj, opts) { obj.respond_to? :temperature}
+    expose :timestamp_start, if: -> (obj, opts) { obj.respond_to? :timestamp_start}
+    expose :timestamp_stop, if: -> (obj, opts) { obj.respond_to? :timestamp_stop}
+    expose :observation, if: -> (obj, opts) { obj.respond_to? :observation}
+    expose :rf_value, if: -> (obj, opts) { obj.respond_to? :rf_value}
+    expose :embargo, if: -> (obj, opts) { obj.respond_to? :embargo}
+    expose :duration
+  end
+end
diff --git a/app/api/helpers/repository_helpers.rb b/app/api/helpers/repository_helpers.rb
index ba951aa96..e6169a459 100644
--- a/app/api/helpers/repository_helpers.rb
+++ b/app/api/helpers/repository_helpers.rb
@@ -39,7 +39,7 @@ def get_pub_reaction(id)
     end
 
     schemeList = get_reaction_table(reaction.id)
-    entities = Entities::ReactionEntity.represent(reaction, serializable: true)
+    entities = Entities::RepoReactionEntity.represent(reaction, serializable: true)
     entities[:products].each do |p|
       label_ids = p[:tag]['taggable_data']['user_labels'] || [] unless p[:tag]['taggable_data'].nil?
       p[:labels] = UserLabel.public_labels(label_ids) unless label_ids.nil?
@@ -100,7 +100,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       )
       .order('published_at desc')
     published_samples = pub_samples.map do |s|
-      containers = Entities::ContainerEntity.represent(s.container)
+      container = Entities::ContainerEntity.represent(s.container)
       tag = s.tag.taggable_data['publication']
       #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
       #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
@@ -138,7 +138,7 @@ def get_pub_molecule(id, adv_flag=nil, adv_type=nil, adv_val=nil)
       end
       embargo = PublicationCollections.where("(elobj ->> 'element_type')::text = 'Sample' and (elobj ->> 'element_id')::integer = #{s.id}")&.first&.label
       segments = Labimotion::SegmentEntity.represent(s.segments)
-      tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
+      tag.merge(container: container, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label, melting_point: s.melting_point, boiling_point: s.boiling_point,
         sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, comp_num: comp_num, embargo: embargo, labels: user_labels,
         showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info, segments: segments)
     end
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 633a3ff78..e7d9c07bb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -436,6 +436,9 @@ $color-required: #d9534f;
   align-items: center;
   b {
     float: right;
+  }
+}
+
 .home-title {
   font-size: x-large;
   font-weight: bolder;
diff --git a/app/assets/stylesheets/omniauth.scss b/app/assets/stylesheets/omniauth.scss
index 5fef986bf..7f5c7cfe5 100644
--- a/app/assets/stylesheets/omniauth.scss
+++ b/app/assets/stylesheets/omniauth.scss
@@ -11,6 +11,7 @@
       width: auto;
     }
   }
+}
 
   .login-options {
     display: flex;
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index f70e15f22..9208fe724 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -450,9 +450,25 @@ $bs-successcolor: #5cb85c;
   }
 }
 
+.search-keyword {
+  display: inline-flex;
+  flex: 1;
+  .well {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 5px;
+    justify-content: center;
+    background-color: unset;
+    .form-group {
+      margin-bottom: unset;
+    }
+  }
+}
+
 .home-adv-search {
   display: flex;
   align-items: center;
+  width: 100%;
   div {
     .o-author {
       min-width: 120px;
@@ -1118,12 +1134,3 @@ $bs-successcolor: #5cb85c;
   justify-content: center;
   margin-top: 8px;
 }
-
-.repo-nfdi-award {
-  display: inline-flex;;
-  align-items: center;
-  justify-content: center;
-  > img {
-    width: 80%;
-  }
-}
diff --git a/app/models/chemscanner/molecule.rb b/app/models/chemscanner/molecule.rb
deleted file mode 100644
index 8086b7805..000000000
--- a/app/models/chemscanner/molecule.rb
+++ /dev/null
@@ -1,112 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_molecules
-#
-#  id                :integer          not null, primary key
-#  scheme_id         :integer          not null
-#  external_id       :integer
-#  clone_from        :integer
-#  mdl               :string
-#  cano_smiles       :string
-#  label             :string
-#  abbreviation      :string
-#  description       :string
-#  aliases           :jsonb
-#  details           :jsonb
-#  extended_metadata :jsonb
-#  is_approved       :boolean          default(FALSE)
-#  imported_id       :integer
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#  inchistring       :string
-#  inchikey          :string
-#
-
-module Chemscanner
-  # ChemScanner scanned molecule(s)
-  class Molecule < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
-
-    has_many :reactions_molecules, dependent: :destroy
-    has_many :reactions_reactant_molecules, dependent: :destroy
-    has_many :reactions_reagent_molecules, dependent: :destroy
-    has_many :reactions_product_molecules, dependent: :destroy
-
-    has_many :reactions, through: :reactions_molecules
-    has_many :reactions_as_reactant, through: :reactions_reactant_molecules, source: :reaction
-    has_many :reactions_as_reagent, through: :reactions_reagnet_molecules, source: :reaction
-    has_many :reactions_as_product, through: :reactions_product_molecules, source: :reaction
-
-    # rubocop:disable AbcSize
-    def assign_from_chemscanner(molecule)
-      aliases = molecule.atom_map.each_with_object({}) do |(_, atom), hash|
-        next hash unless atom.is_alias && !atom.alias_text.empty?
-
-        hash[atom.get_idx] = atom.alias_text
-      end
-
-      inchi, inchikey = Chemotion::OpenBabelService.inchi_info_from_molfile(molecule.mdl)
-
-      assign_attributes(
-        external_id: molecule.id,
-        mdl: molecule.mdl,
-        cano_smiles: molecule.cano_smiles,
-        clone_from: molecule.clone_from,
-        abbreviation: molecule.abbreviation,
-        inchistring: inchi,
-        inchikey: inchikey,
-        label: molecule.label,
-        description: molecule.text,
-        details: molecule.details.to_hash.to_json,
-        aliases: aliases.to_json
-      )
-    end
-    # rubocop:enable AbcSize
-
-    def set_polymer(atom_idx)
-      mdl_lines = mdl.split("\n")
-      end_line_idx = mdl_lines.find_index { |l| l == 'M  END' }
-      return false if end_line_idx.nil?
-
-      ext_data = extended_metadata
-
-      polymers = ext_data['polymer'] || []
-      if polymers.include?(atom_idx)
-        polymers.delete_if { |idx| idx == atom_idx }
-      else
-        polymers.push(atom_idx)
-      end
-
-      has_polymer = !polymers.empty?
-      ext_data['polymer'] = polymers
-
-      rgp_line_idx = mdl_lines.find_index { |l| l.match(/^M  RGP/) }
-      mdl_lines.delete_at(rgp_line_idx) unless rgp_line_idx.nil?
-      if has_polymer
-        rgp_info = polymers.map { |idx| "#{idx + 1}   1" }.join('   ')
-        rgp_line = "M  RGP  #{polymers.count}   #{rgp_info}"
-
-        mdl_lines.insert(end_line_idx, rgp_line)
-      end
-
-      polymer_line_idx = mdl_lines.find_index { |l| l == '> <PolymersList>' }
-      unless polymer_line_idx.nil?
-        mdl_lines.delete_at(polymer_line_idx + 1)
-        mdl_lines.delete_at(polymer_line_idx)
-      end
-
-      if has_polymer
-        mdl_lines.insert(end_line_idx + 2, polymers.join(' '))
-        mdl_lines.insert(end_line_idx + 2, '> <PolymersList>')
-      end
-      mdl_lines.push('$$$$') if mdl_lines.last.strip != '$$$$'
-
-      update(extended_metadata: ext_data, mdl: mdl_lines.join("\n"))
-    end
-  end
-end
diff --git a/app/models/chemscanner/reaction.rb b/app/models/chemscanner/reaction.rb
deleted file mode 100644
index 98d35b00f..000000000
--- a/app/models/chemscanner/reaction.rb
+++ /dev/null
@@ -1,113 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions
-#
-#  id                :integer          not null, primary key
-#  scheme_id         :integer          not null
-#  external_id       :integer          not null
-#  clone_from        :integer
-#  description       :string
-#  temperature       :string
-#  time              :string
-#  status            :string
-#  yield             :float
-#  details           :jsonb
-#  extended_metadata :jsonb
-#  is_approved       :boolean          default(FALSE)
-#  imported_id       :integer
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#
-
-
-module Chemscanner
-  # ChemScanner scanned reaction(s)
-  class Reaction < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
-
-    has_many :steps, class_name: 'ReactionStep', foreign_key: :reaction_id
-
-    has_many :reactions_molecules, dependent: :destroy
-    has_many :molecules, through: :reactions_molecules, source: :molecule
-
-    has_many :reactions_reactant_molecules,
-             class_name: 'ReactionsReactantMolecule',
-             dependent: :destroy
-    has_many :reactants,
-             through: :reactions_reactant_molecules, source: :molecule
-
-    has_many :reactions_reagent_molecules,
-             class_name: 'ReactionsReagentMolecule',
-             dependent: :destroy
-    has_many :reagents,
-             through: :reactions_reagent_molecules, source: :molecule
-
-    has_many :reactions_solvent_molecules,
-             class_name: 'ReactionsSolventMolecule',
-             dependent: :destroy
-    has_many :solvents,
-             through: :reactions_solvent_molecules, source: :molecule
-
-    has_many :reactions_product_molecules,
-             class_name: 'ReactionsProductMolecule',
-             dependent: :destroy
-    has_many :products,
-             through: :reactions_product_molecules,
-             source: :molecule
-
-    def assign_from_chemscanner(reaction)
-      assign_attributes(
-        external_id: reaction.arrow_id,
-        clone_from: reaction.clone_from,
-        description: reaction.description,
-        temperature: reaction.temperature,
-        time: reaction.time,
-        status: reaction.status,
-        yield: reaction.yield,
-        details: reaction.details.to_h.to_json
-      )
-    end
-
-    def remove_reagent_smiles(smiles)
-      to_remove = reagents.select { |m| smiles.include?(m.cano_smiles) }
-      ids = to_remove.map(&:id)
-      to_remove.each(&:destroy)
-
-      save!
-      ids
-    end
-
-    def add_reagent_smiles(smiles)
-      max_id = (reactants + reagents + products).map(&:external_id).max
-
-      added = []
-      smiles.each do |s|
-        rw_mol = RDKitChem::RWMol.mol_from_smiles(s)
-
-        m = Molecule.create(
-          cano_smiles: s,
-          scheme_id: scheme_id,
-          mdl: rw_mol.mol_to_mol_block(true, -1, false),
-          external_id: max_id += 1
-        )
-
-        rm = ReactionsMolecule.create(
-          type: 'Chemscanner::ReactionsReagentMolecule',
-          reaction_id: id,
-          molecule_id: m.id
-        )
-        reactions_reagent_molecules << rm
-        added.push(m)
-      end
-
-      save!
-
-      added
-    end
-  end
-end
diff --git a/app/models/chemscanner/reaction_step.rb b/app/models/chemscanner/reaction_step.rb
deleted file mode 100644
index 91c0e7f75..000000000
--- a/app/models/chemscanner/reaction_step.rb
+++ /dev/null
@@ -1,38 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reaction_steps
-#
-#  id                   :integer          not null, primary key
-#  reaction_id          :integer          not null
-#  reaction_external_id :integer          not null
-#  reagent_ids          :integer          default([]), is an Array
-#  reagent_smiles       :string           default([]), is an Array
-#  step_number          :integer          not null
-#  description          :string
-#  temperature          :string
-#  time                 :string
-#  created_at           :datetime         not null
-#  updated_at           :datetime         not null
-#  deleted_at           :datetime
-#
-
-
-# ChemScanner scanned reaction(s)
-module Chemscanner
-  # ChemScanner reaction steps
-  class ReactionStep < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :reaction, class_name: 'Reaction', foreign_key: :output_id
-
-    def assign_from_chemscanner(step)
-      assign_attributes(
-        description: step.description,
-        temperature: step.temperature,
-        time: step.time
-      )
-    end
-  end
-end
diff --git a/app/models/chemscanner/reactions_molecule.rb b/app/models/chemscanner/reactions_molecule.rb
deleted file mode 100644
index 37e804a8b..000000000
--- a/app/models/chemscanner/reactions_molecule.rb
+++ /dev/null
@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  # Chemscanner reaction molecule join table
-  class ReactionsMolecule < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :reaction
-    belongs_to :molecule
-  end
-
-  class ReactionsReactantMolecule < ReactionsMolecule
-  end
-
-  class ReactionsReagentMolecule < ReactionsMolecule
-  end
-
-  class ReactionsSolventMolecule < ReactionsMolecule
-  end
-
-  class ReactionsProductMolecule < ReactionsMolecule
-  end
-end
diff --git a/app/models/chemscanner/reactions_product_molecule.rb b/app/models/chemscanner/reactions_product_molecule.rb
deleted file mode 100644
index 4f8277bbf..000000000
--- a/app/models/chemscanner/reactions_product_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsProductMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_reactant_molecule.rb b/app/models/chemscanner/reactions_reactant_molecule.rb
deleted file mode 100644
index 1b14aaf1c..000000000
--- a/app/models/chemscanner/reactions_reactant_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsReactantMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_reagent_molecule.rb b/app/models/chemscanner/reactions_reagent_molecule.rb
deleted file mode 100644
index a27ade2fa..000000000
--- a/app/models/chemscanner/reactions_reagent_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsReagentMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_solvent_molecule.rb b/app/models/chemscanner/reactions_solvent_molecule.rb
deleted file mode 100644
index 8823e496b..000000000
--- a/app/models/chemscanner/reactions_solvent_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsSolventMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/scheme.rb b/app/models/chemscanner/scheme.rb
deleted file mode 100644
index 684cb6706..000000000
--- a/app/models/chemscanner/scheme.rb
+++ /dev/null
@@ -1,87 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_schemes
-#
-#  id                :integer          not null, primary key
-#  source_id         :integer          not null
-#  is_approved       :boolean          default(FALSE)
-#  extended_metadata :jsonb
-#  index             :integer          default(0)
-#  image_data        :string           default("")
-#  version           :string           default("")
-#  created_by        :integer          not null
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#
-
-
-module Chemscanner
-  # Hold ChemScanner output information
-  class Scheme < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
-    belongs_to :source, foreign_key: :source_id, class_name: 'Chemscanner::Source'
-
-    has_many :reactions,
-             class_name: 'Reaction', foreign_key: :scheme_id,
-             dependent: :destroy
-
-    has_many :molecules,
-             class_name: 'Molecule', foreign_key: :scheme_id,
-             dependent: :destroy
-
-    accepts_nested_attributes_for :reactions, :molecules
-
-    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
-
-    def file_uuid
-      source.file_uuid
-    end
-
-    def empty?
-      reactions.empty? && molecules.empty?
-    end
-
-    def add_doi(doi)
-      return if doi.empty?
-
-      ext_data = extended_metadata
-      return if ext_data.key?(:doi)
-
-      update!(extended_metadata: ext_data.merge(doi: doi.strip))
-    end
-
-    def destroy_version(version)
-      destroy if self.version == version
-    end
-
-    def approve(val)
-      reactions.update_all(is_approved: val)
-      molecules.update_all(is_approved: val)
-
-      {
-        scheme_ids: [id],
-        reaction_ids: reactions.map(&:id),
-        molecule_ids: molecules.map(&:id)
-      }
-    end
-
-    class << self
-      def save_png(png_list)
-        png_list.each do |file_info|
-          id = file_info['id']
-          scheme = find(id)
-          next if scheme.nil?
-
-          scheme.image_data = file_info['imageData']
-          scheme.save!
-        end
-      end
-      # handle_asynchronously :save_png
-    end
-  end
-end
diff --git a/app/models/chemscanner/source.rb b/app/models/chemscanner/source.rb
deleted file mode 100644
index 87fdff9dc..000000000
--- a/app/models/chemscanner/source.rb
+++ /dev/null
@@ -1,138 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_sources
-#
-#  id                :integer          not null, primary key
-#  parent_id         :integer
-#  file_id           :integer          not null
-#  extended_metadata :jsonb
-#  created_by        :integer          not null
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#
-
-
-# Storing uploaded file for ChemScanner processing
-module Chemscanner
-  # Uploaded files for scanning
-  class Source < ActiveRecord::Base
-    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
-
-    belongs_to :file, -> { where attachable_type: 'ChemscannerSource' },
-               class_name: 'Attachment', foreign_key: :file_id,
-               foreign_type: :attachable_type
-
-    # has_one :file, as: :attachable
-
-    has_many :schemes,
-             foreign_key: :source_id, class_name: 'Scheme',
-             dependent: :destroy
-
-    accepts_nested_attributes_for :schemes
-
-    has_many :reactions, through: :schemes
-    has_many :molecules, through: :schemes
-
-    has_closure_tree dependent: :destroy
-
-    # _ct from closure_tree gem
-    scope :full_tree, -> { _ct.default_tree_scope(all) }
-
-    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
-
-    MIME_TYPE = {
-      cdx: 'chemical/cdx',
-      cdxml: 'text/xml',
-      xml: 'text/xml',
-      doc: 'application/msword',
-      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      json: 'application/json'
-    }.freeze
-
-    def file_uuid
-      file.identifier
-    end
-
-    def scan
-      filename = file.filename
-      extn = File.extname(filename).downcase
-
-      func_name = "#{extn[1..-1]}_process".to_sym
-      return unless Chemscanner::Process.respond_to?(func_name)
-
-      Chemscanner::Process.send(func_name, self)
-    end
-
-    def create_child(child_path)
-      user_id = created_by
-      source = self.class.new(created_by: user_id)
-      ext = File.extname(child_path)
-      basename = File.basename(child_path)
-
-      source.build_file(
-        filename: basename,
-        file_path: child_path,
-        identifier: SecureRandom.uuid,
-        created_by: user_id,
-        created_for: user_id,
-        attachable_type: 'ChemscannerSource',
-        content_type: MIME_TYPE[ext.to_sym]
-      )
-      source.parent = self
-      children << source
-
-      source
-    end
-
-    def approve(val)
-      reactions.update_all(is_approved: val)
-      molecules.update_all(is_approved: val)
-
-      file_ids = [id]
-      scheme_ids = schemes.map(&:id)
-      reaction_ids = reactions.map(&:id)
-      molecule_ids = molecules.map(&:id)
-
-      children.each do |child|
-        info = child.approve(val)
-
-        file_ids.concat(info[:file_ids] || [])
-        scheme_ids.concat(info[:scheme_ids] || [])
-        reaction_ids.concat(info[:reaction_ids] || [])
-        molecule_ids.concat(info[:molecule_ids] || [])
-      end
-
-      {
-        file_ids: file_ids,
-        scheme_ids: scheme_ids,
-        reaction_ids: reaction_ids,
-        molecule_ids: molecule_ids
-      }
-    end
-
-    class << self
-      def create_from_uploaded_file(file, uid, user)
-        user_id = user.nil? ? nil : user.id
-        temp_file = file['tempfile']
-        file_path = temp_file.to_path
-        extn = File.extname(file_path)[1..-1]
-
-        source = Source.new(created_by: user_id)
-
-        source.build_file(
-          filename: file['filename'],
-          file_path: file_path,
-          identifier: uid,
-          created_by: user_id,
-          created_for: user_id,
-          attachable_type: 'ChemscannerSource',
-          content_type: MIME_TYPE[extn.to_sym] || ''
-        )
-
-        source
-      end
-    end
-  end
-end
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 3a0c68aaf..664e91eaf 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -273,7 +273,7 @@ def json_ld_analysis_description(pub)
     element = pub.element
     kind = 'dataset for ' + (element.extended_metadata['kind'] || '')&.split('|').pop + '\n'
     desc = element.extended_metadata['description'] || '' + '\n'
-    content = REXML::Text.new(Nokogiri::HTML( Chemotion::QuillToHtml.new.convert(element.extended_metadata['content'] || '')).text, false, nil, false).to_s
+    content = element.extended_metadata['content'].nil? ? '' : REXML::Text.new(Nokogiri::HTML( Chemotion::QuillToHtml.new.convert(element.extended_metadata['content'])).text, false, nil, false).to_s
 
     kind + desc + content
   end
diff --git a/app/models/concerns/publishing.rb b/app/models/concerns/publishing.rb
index 71f11bc50..08fb165d4 100644
--- a/app/models/concerns/publishing.rb
+++ b/app/models/concerns/publishing.rb
@@ -72,7 +72,7 @@ def generate_doi(version)
     def create_publication_tag(contributor, author_ids, license)
       authors = User.where(id: author_ids, type: %w(Person Collaborator))
                       .includes(:affiliations)
-                      .order("position(users.id::text in '#{author_ids}')")
+                      .order(Arel.sql("position(users.id::text in '#{author_ids}')"))
       affiliations = authors.map(&:current_affiliations)
       affiliations_output = {}
       affiliations.flatten.each do |aff|
diff --git a/app/models/container.rb b/app/models/container.rb
index e11295e96..57829a84d 100644
--- a/app/models/container.rb
+++ b/app/models/container.rb
@@ -33,7 +33,8 @@ class Container < ApplicationRecord
   before_destroy :delete_attachment
   before_destroy :destroy_datasetable
 
-  has_closure_tree order: "extended_metadata->'index' asc"
+  ## has_closure_tree order: "extended_metadata->'index' asc"  ## TODO: Paggy
+  has_closure_tree
 
   scope :analyses_for_root, ->(root_id) {
     where(container_type: 'analysis').joins(
diff --git a/app/models/reaction.rb b/app/models/reaction.rb
index 1b34be977..aec92de5f 100644
--- a/app/models/reaction.rb
+++ b/app/models/reaction.rb
@@ -222,9 +222,7 @@ def update_svg_file!
         collection = public_send(resource).includes(sample: :molecule)
         paths[prop] = collection.map do |reactions_sample|
           sample = reactions_sample.sample
-          params = [
-            svg_path(sample&.sample_svg_file, sample&.molecule&.molecule_svg_file)
-          ]
+          params = [ sample.get_svg_path ]
           params[0] = sample.svg_text_path if reactions_sample.show_label
           params.append(yield_amount(sample.id)) if prop == :products
           params
diff --git a/app/models/user.rb b/app/models/user.rb
index dda6945bc..9f5e83fb7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -579,10 +579,10 @@ def create_chemotion_public_collection
     Collection.find_or_create_by(user: self, label: 'ELN Gate', is_locked: true, position: 1)
     Collection.find_or_create_by(user: self, label: 'My Data', is_locked: true, position: 2)
 
-    sys_published_by = Collection.find_or_create_by(user_id: chemotion_user, label: 'Published by')
-    sys_pending_from = Collection.find_or_create_by(user_id: chemotion_user, label: 'Pending Publication from')
-    sys_reviewing_from = Collection.find_or_create_by(user_id: chemotion_user, label: 'Reviewing Publication from')
-    sys_ready_publish_from = Collection.find_or_create_by(user_id: chemotion_user, label: 'Embargoed Publications from')
+    sys_published_by = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Published by')
+    sys_pending_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Pending Publication from')
+    sys_reviewing_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Reviewing Publication from')
+    sys_ready_publish_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargoed Publications from')
 
     sys_reviewing_collection = self.reviewing_collection || Collection.create(user: chemotion_user, label: 'Reviewing', ancestry: "#{sys_reviewing_from.id}")
     sys_pending_collection = self.pending_collection || Collection.create(user: chemotion_user, label: 'Pending Publications', ancestry: "#{sys_pending_from.id}")
diff --git a/app/packs/entrypoints/application.js b/app/packs/entrypoints/application.js
index 2e20a77f0..66ad2cc3c 100644
--- a/app/packs/entrypoints/application.js
+++ b/app/packs/entrypoints/application.js
@@ -1,7 +1,7 @@
 // see https://github.com/rackt/react-router/issues/1067
 
 var React = require('react');
-var Home = require('src/apps/home');
+var Home = require('src/apps/home/Home');
 var CnC = require('src/apps/commandAndControl');
 var AdminHome = require('src/apps/admin');
 var ChemScanner = require('src/apps/chemscanner/');
@@ -20,8 +20,8 @@ var GenericDatasetsAdmin = require('src/apps/generic/GenericDatasetsAdmin');
 var mydb = require('src/apps/mydb');
 
 // Fro REPO
-var RepoNewsEditor = require('./libHome/RepoNewsEditor');
-var RepoNewsReader = require('./libHome/RepoNewsReader');
-var RepoHowToEditor = require('./libHome/RepoHowToEditor');
-var RepoHowToReader = require('./libHome/RepoHowToReader');
+var RepoNewsEditor = require('src/repoHome/RepoNewsEditor');
+var RepoNewsReader = require('src/repoHome/RepoNewsReader');
+var RepoHowToEditor = require('src/repoHome/RepoHowToEditor');
+var RepoHowToReader = require('src/repoHome/RepoHowToReader');
 
diff --git a/app/packs/src/admin/GenericAdminModal.js b/app/packs/src/admin/GenericAdminModal.js
index c4473696d..7612aac14 100644
--- a/app/packs/src/admin/GenericAdminModal.js
+++ b/app/packs/src/admin/GenericAdminModal.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal } from 'react-bootstrap';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
+import AdminFetcher from 'src/fetchers/AdminFetcher';
 
 export default class GenericAdminModal extends Component {
   constructor(props) {
diff --git a/app/packs/src/admin/converter/ConverterAdmin.js b/app/packs/src/admin/converter/ConverterAdmin.js
deleted file mode 100644
index 249f6b134..000000000
--- a/app/packs/src/admin/converter/ConverterAdmin.js
+++ /dev/null
@@ -1,422 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, Button } from 'react-bootstrap';
-import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-client';
-import ConverterApi from 'src/fetchers/ConverterFetcher';
-import GenericDSsFetcher from 'src/fetchers/GenericDSsFetcher';
-
-<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
-class ConverterAdmin extends Component {
-=======
-import ConverterApi from '../../components/fetchers/ConverterFetcher';
-import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
-
-class ConverterAdmin extends Component {
-
->>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: 'list',
-      client: null,
-      selectedFile: null,
-      profiles: [],
-      options: [],
-      datasets: [],
-      profile: null,
-      error: false,
-      errorMessage: '',
-      isLoading: false,
-      createdModal: false,
-      deleteModal: false
-    };
-
-    this.showCreateView = this.showCreateView.bind(this);
-    this.showUpdateView = this.showUpdateView.bind(this);
-    this.showImportView = this.showImportView.bind(this);
-
-    this.showCreatedModal = this.showCreatedModal.bind(this);
-    this.hideCreatedModal = this.hideCreatedModal.bind(this);
-
-    this.showDeleteModal = this.showDeleteModal.bind(this);
-    this.hideDeleteModal = this.hideDeleteModal.bind(this);
-
-    this.updateProfile = this.updateProfile.bind(this);
-    this.storeProfile = this.storeProfile.bind(this);
-    this.deleteProfile = this.deleteProfile.bind(this);
-    this.downloadProfile = this.downloadProfile.bind(this);
-
-    this.updateFile = this.updateFile.bind(this);
-    this.uploadFile = this.uploadFile.bind(this);
-    this.importFile = this.importFile.bind(this);
-
-    this.dispatchView = this.dispatchView.bind(this);
-  }
-
-  componentDidMount() {
-    Promise.all([
-      ConverterApi.fetchProfiles(),
-      GenericDSsFetcher.listDatasetKlass(),
-      ConverterApi.fetchOptions()
-    ]).then((responses) => {
-      const [profiles, klass, options] = responses;
-      const datasets = klass?.klass?.map((kl) => {
-        const pr = kl.properties_release;
-        pr.name = kl.label;
-        pr.ols = kl.ols_term_id;
-        return pr;
-      }) || [];
-
-      console.log(options?.client);
-      this.setState({
-<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
-        // eslint-disable-next-line max-len
-=======
->>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
-        profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
-      });
-    });
-  }
-
-  showImportView() {
-    this.setState({
-      status: 'import',
-      profile: null
-    });
-  }
-
-  showCreateView() {
-    this.setState({
-      status: 'upload',
-      profile: null
-    });
-  }
-
-  showUpdateView(profile) {
-    this.setState({
-      status: 'update',
-      profile: { ...profile },
-      error: false,
-      errorMessage: ''
-    });
-  }
-
-  showCreatedModal() {
-    this.setState({
-      createdModal: true
-    });
-  }
-
-  hideCreatedModal() {
-    this.setState({
-      createdModal: false
-    });
-  }
-
-  showDeleteModal(profile) {
-    this.setState({
-      deleteModal: true,
-      profile: { ...profile },
-    });
-  }
-
-  hideDeleteModal() {
-    this.setState({
-      deleteModal: false,
-      profile: null
-    });
-  }
-
-  updateProfile(profile) {
-    this.setState({ profile });
-  }
-
-  storeProfile() {
-    const { status, profile } = this.state;
-
-    // remove show flag
-    if (Array.isArray(profile.identifiers)) {
-      profile.identifiers.forEach((identifier) => {
-        // eslint-disable-next-line no-param-reassign
-        delete identifier.show;
-      });
-    }
-
-    if (status === 'create') {
-      ConverterApi.createProfile(profile)
-        .then((response) => {
-          const profiles = [...this.state.profiles];
-          profiles.push(response);
-          this.setState({
-            status: 'list',
-            profiles,
-            profile: null
-          }, this.showCreatedModal());
-        });
-    } else if (status === 'update') {
-      ConverterApi.updateProfile(profile)
-        .then((response) => {
-          const profiles = [...this.state.profiles]
-          const index = profiles.findIndex((p) => (p.id === response.id));
-          profiles[index] = response;
-          this.setState({
-            status: 'list',
-            profiles,
-            profile: null
-          });
-        });
-    }
-  }
-
-  deleteProfile() {
-    ConverterApi.deleteProfile(this.state.profile)
-      .then(() => {
-        const profiles = [...this.state.profiles]
-        const index = profiles.findIndex(p => (p.id == this.state.profile.id))
-        profiles.splice(index, 1)
-        this.setState({
-          status: 'list',
-          profiles: profiles,
-          profile: null
-        }, this.hideDeleteModal())
-      }
-    )
-  }
-
-  downloadProfile(profile) {
-    const a = document.createElement('a')
-    a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(profile, null, 2))
-    a.download = profile.id + '.json'
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-
-  updateFile(event) {
-    this.setState({
-      selectedFile: event.target.files[0],
-      loaded: 0,
-      isLoading: false,
-      error: false,
-      errorMessage: ''
-    })
-  }
-
-  uploadFile() {
-    const { selectedFile } = this.state
-
-    this.setState({
-      isLoading: true
-    })
-
-    ConverterApi.fetchTables(selectedFile)
-      .then(data => {
-        if (data) {
-          const profile = {
-            title: '',
-            description: '',
-            tables: [],
-            identifiers: [],
-            data: data,
-          }
-
-          this.setState({
-            status: 'create',
-            profile: profile,
-            selectedFile: null,
-            isLoading: false,
-            error: false,
-            errorMessage: ''
-          })
-        }
-      })
-      .catch(error => {
-        if (error.status === 413) {
-          this.setState({
-            error: true,
-            errorMessage: 'The uploaded file is too large.',
-            isLoading: false
-          })
-        } else {
-          error.text().then(errorMessage => {
-            this.setState({
-              error: true,
-              errorMessage: JSON.parse(errorMessage).error,
-              isLoading: false
-            })
-          })
-        }
-      })
-  }
-
-  importFile() {
-    const { selectedFile } = this.state
-
-    this.setState({
-      isLoading: true
-    })
-
-    const createProfile = e => {
-      const fileProfile = JSON.parse(e.target.result)
-
-      ConverterApi.createProfile(fileProfile)
-        .then(profile => {
-          const profiles = [...this.state.profiles]
-          profiles.push(profile)
-          this.setState({
-            status: 'list',
-            profiles: profiles,
-            profile: null
-          }, this.showCreatedModal())
-        })
-        .catch(errors => {
-          this.setState({
-            error: true,
-            errorMessage: Object.values(errors).join(', '),
-            isLoading: false
-          })
-        })
-    }
-
-    const reader = new FileReader()
-    reader.readAsText(selectedFile)
-    reader.onload = createProfile.bind(this)
-  }
-
-  dispatchView() {
-    if (this.state.status === 'list') {
-      return (
-        <ProfileList
-          profiles={this.state.profiles}
-          isAdmin={this.state.client !== null}
-          updateProfile={this.showUpdateView}
-          deleteProfile={this.showDeleteModal}
-          downloadProfile={this.downloadProfile}
-        />
-      )
-    } else if (this.state.status == 'import') {
-      return (
-        <FileUploadForm
-          onFileChangeHandler={this.updateFile}
-          onSubmitFileHandler={this.importFile}
-          errorMessage={this.state.errorMessage}
-          error={this.state.error}
-          isLoading={this.state.isLoading}
-          disabled={this.state.selectedFile === null}
-        />
-      )
-    } else if (this.state.status == 'upload') {
-      return (
-        <FileUploadForm
-          onFileChangeHandler={this.updateFile}
-          onSubmitFileHandler={this.uploadFile}
-          errorMessage={this.state.errorMessage}
-          error={this.state.error}
-          isLoading={this.state.isLoading}
-          disabled={this.state.selectedFile === null}
-        />
-      );
-    } else {
-      return (
-        <ProfileForm
-          status={this.state.status}
-          profile={this.state.profile}
-          options={this.state.options}
-          datasets={this.state.datasets}
-          updateProfile={this.updateProfile}
-          storeProfile={this.storeProfile}
-        />
-      )
-    }
-  }
-
-  render() {
-    return (
-      <div className={['create', 'update'].includes(this.state.status) ? 'container-fluid' : 'container'}>
-        <header>
-          <nav aria-label="breadcrumb">
-            {this.state.status == 'list' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item active" aria-current="page">Chemotion file converter admin</li>
-              </ol>
-            }
-            {['upload', 'create'].includes(this.state.status) &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Create Profile'}</li>
-              </ol>
-            }
-            {this.state.status == 'update' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Edit Profile: ' + this.state.title}</li>
-              </ol>
-            }
-            {this.state.status == 'import' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Import Profile'}</li>
-              </ol>
-            }
-          </nav>
-
-          <div>
-            {this.state.status == "list" && this.state.client !== null &&
-              <div className="pull-right">
-                <button type="button" onClick={this.showImportView} className="btn btn-success mr-10">
-                  Import profile
-                </button>
-                <button type="button" onClick={this.showCreateView} className="btn btn-primary">
-                  Create new profile
-                </button>
-              </div>
-            }
-
-            <h2>
-              {this.state.status == 'list' && 'Profiles List' }
-              {['upload', 'create'].includes(this.state.status) && 'Create Profile'}
-              {this.state.status == 'update' && 'Edit Profile'}
-              {this.state.status == 'import' && 'Import Profile'}
-            </h2>
-          </div>
-        </header>
-
-        <main>
-          {this.dispatchView()}
-        </main>
-        <div>
-          <a href="/">Back to MyDB</a>
-        </div>
-
-        <Modal show={this.state.createdModal}>
-          <Modal.Header>
-            <Modal.Title>Profile successfully created!</Modal.Title>
-          </Modal.Header>
-
-          <Modal.Footer>
-            <Button bsStyle="primary" onClick={this.hideCreatedModal}>Great!</Button>
-          </Modal.Footer>
-        </Modal>
-
-        <Modal show={this.state.deleteModal}>
-          <Modal.Header>
-            <Modal.Title>Do you really want to delete this profile?</Modal.Title>
-          </Modal.Header>
-          <Modal.Footer>
-            <Button bsStyle="default" onClick={this.hideDeleteModal}>Cancel</Button>
-            <Button bsStyle="danger" onClick={this.deleteProfile}>Delete profile</Button>
-          </Modal.Footer>
-        </Modal>
-      </div>
-    )
-  }
-
-}
-
-export default ConverterAdmin;
-
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('ConverterAdmin');
-  if (domElement) ReactDOM.render(<ConverterAdmin />, domElement);
-});
diff --git a/app/packs/src/apps/admin/AdminHome.js b/app/packs/src/apps/admin/AdminHome.js
index c3efc455a..29ac4bf09 100644
--- a/app/packs/src/apps/admin/AdminHome.js
+++ b/app/packs/src/apps/admin/AdminHome.js
@@ -13,12 +13,6 @@ import MatrixManagement from 'src/apps/admin/MatrixManagement';
 import TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer';
 import DelayedJobs from 'src/apps/admin/DelayedJobs';
 
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import GenericElementAdmin from './GenericElementAdmin';
-import SegmentElementAdmin from './SegmentElementAdmin';
-import DatasetElementAdmin from './DatasetElementAdmin';
-import TemplateManagement from './TemplateManagement';
 
 class AdminHome extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index 68a90e29e..512be2031 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -8,9 +8,6 @@ import UserActions from 'src/stores/alt/actions/UserActions';
 import NavNewSession from 'src/components/navigation/NavNewSession';
 import DocumentHelper from 'src/utilities/DocumentHelper';
 
-// import NavNewSession from '../libHome/NavNewSession';
-// import DocumentHelper from '../components/utils/DocumentHelper';
-
 const NavHead = () => (
   <Navbar.Brand>
     <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
diff --git a/app/packs/src/apps/chemscanner/actions/fileActions.js b/app/packs/src/apps/chemscanner/actions/fileActions.js
index 02316efaf..0aaddf9d1 100644
--- a/app/packs/src/apps/chemscanner/actions/fileActions.js
+++ b/app/packs/src/apps/chemscanner/actions/fileActions.js
@@ -1,57 +1,71 @@
-import { fromJS } from 'immutable';
+/* eslint-disable no-prototype-builtins */
+
+import { Map, List, fromJS } from 'immutable';
 import uuid from 'uuid';
 
 import * as types from 'src/apps/chemscanner/actions/ActionTypes';
 import { CALL_API } from 'src/apps/chemscanner/middleware/api';
 
-import { isPngImage, isSvgImage } from '../utils';
-
-export const scanFileNormalizer = (res, store) => {
-  const { schemes } = res;
-  if (!schemes) return fromJS(res);
+const scanFileNormalizer = (res, store, type) => {
+  const { embedded } = res;
+  if (!embedded || embedded.constructor !== Array) return res;
 
+  let files = List();
+  let scannedItems = List();
   const cddInstance = store.getState().get('chemdrawInstance');
-  if (!cddInstance) return fromJS(res);
-
-  schemes.filter(s => s.imageData).forEach((scheme) => {
-    const { imageData } = scheme;
-    const isPng = isPngImage(imageData);
-    const isSvg = isSvgImage(imageData);
-
-    if (isPng || isSvg) {
-      const type = isPng ? 'image/png' : 'image/svg+xml';
-
-      const blob = new Blob([imageData], { type });
-      /* eslint-disable-next-line no-param-reassign */
-      scheme.imageData = window.URL.createObjectURL(blob);
-
-      /* eslint-disable-next-line no-param-reassign */
-      scheme.isSaved = true;
-
-      return;
-    }
-
-    const cdxmlRegex = new RegExp('<?xml.*');
-
-    if (cdxmlRegex.test(scheme.imageData)) {
-      cddInstance.loadCDXML(imageData);
-    } else {
-      cddInstance.loadB64CDX(imageData);
-    }
+  const display = type === types.SCAN_FILE_FOR_MOLECULES ? 'molecules' : 'reactions';
+
+  embedded.forEach((file) => {
+    let fileInfo = Map({ name: file.name, uid: file.uid });
+    let cds = List();
+    let fileItems = List();
+    const fileUid = file.uid;
+
+    (file.cds || []).forEach((cd) => {
+      let cdItems = List();
+
+      cd.info.forEach((item) => {
+        let immuItem = fromJS(item);
+        immuItem = immuItem.set('fileUid', fileUid);
+        immuItem = immuItem.set('cdUid', cd.cdUid);
+
+        cdItems = cdItems.push(immuItem);
+      });
+
+      const cdInfo = { cdUid: cd.cdUid };
+      cdInfo[display] = cdItems.map(item => item.get('id'));
+      fileItems = fileItems.concat(cdItems);
+
+      if (cd.hasOwnProperty('svg')) cdInfo.svg = cd.svg;
+      if (cddInstance) {
+        if (cd.hasOwnProperty('b64cdx')) {
+          cddInstance.loadB64CDX(cd.b64cdx);
+          const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
+          cdInfo.b64png = `data:image/png;base64,${b64png}`;
+          cddInstance.clear();
+        }
+        if (cd.hasOwnProperty('cdxml')) {
+          cddInstance.loadCDXML(cd.cdxml);
+          const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
+          cdInfo.b64png = `data:image/png;base64,${b64png}`;
+          cddInstance.clear();
+        }
+      }
 
-    const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
-    const pngb64 = `data:image/png;base64,${b64png}`;
-    cddInstance.clear();
+      cds = cds.push(Map(cdInfo));
+    });
 
-    /* eslint-disable-next-line no-param-reassign */
-    scheme.pictureData = pngb64;
+    fileInfo = fileInfo.set('cds', cds);
+    fileInfo = fileInfo.set('display', display);
 
-    const blob = new Blob([pngb64], { type: 'image/png' });
-    /* eslint-disable-next-line no-param-reassign */
-    scheme.imageData = window.URL.createObjectURL(blob);
+    files = files.push(fileInfo);
+    scannedItems = scannedItems.concat(fileItems);
   });
 
-  return fromJS(res);
+  return Map({
+    files,
+    [display]: scannedItems
+  });
 };
 
 export const scanFile = (files, getMol) => (dispatch) => {
@@ -63,7 +77,7 @@ export const scanFile = (files, getMol) => (dispatch) => {
   return dispatch({
     type: actionType,
     [CALL_API]: {
-      endpoint: '/api/v1/public_chemscanner/upload',
+      endpoint: '/api/v1/chemscanner/embedded/upload',
       normalizer: scanFileNormalizer,
       options: {
         credentials: 'same-origin',
@@ -74,40 +88,4 @@ export const scanFile = (files, getMol) => (dispatch) => {
   });
 };
 
-export const updateReagents = (reactionId, updateInfo) => dispatch => (
-  dispatch({
-    type: types.UPDATE_REAGENTS_SMILES,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner/reagent_smiles',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ reactionId, updateInfo })
-      }
-    },
-  })
-);
-
-export const saveImage = imageList => dispatch => (
-  dispatch({
-    type: types.SAVE_PNG,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/save_png',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ image_list: imageList })
-      }
-    },
-  })
-);
-
-export const removeFile = fileUid => ({ type: types.HIDE_FILE, fileUid });
+export const removeFile = fileUid => ({ type: types.REMOVE_FILE, fileUid });
diff --git a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
index f0f61d012..9ad56d4a7 100644
--- a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
+++ b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
@@ -7,6 +7,34 @@ import {
   Form, FormGroup, FormControl,
 } from 'react-bootstrap';
 
+function ManagementTable({
+  columnDefs, defaultColDef, data, style, onGridReady
+}) {
+  return (
+    <div className="ag-theme-balham" style={style}>
+      <AgGridReact
+        floatingFilter
+        enableColResize
+        pagination
+        suppressHorizontalScroll
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef || {}}
+        rowData={data}
+        onGridReady={onGridReady}
+        domLayout="autoHeight"
+      />
+    </div>
+  );
+}
+
+ManagementTable.propTypes = {
+  columnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultColDef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  style: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onGridReady: PropTypes.func.isRequired,
+};
+
 export default class AbbreviationManagement extends React.Component {
   constructor() {
     super();
@@ -39,22 +67,10 @@ export default class AbbreviationManagement extends React.Component {
       abbColumnDefs, superatomColumnDefs, abbreviations, superatoms,
       defaultColDef, newAbb, changeTypeCreate
     } = this.props;
-
     const newText = newAbb ? 'Abbreviation' : 'Superatom';
 
-    const abbreviationStyle = {
-      width: '70%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-    const superatomStyle = {
-      width: '30%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-
     return (
-      <div style={{ marginTop: '20px' }}>
+      <div>
         <div className="chemscanner-abb-view-header">
           <Form inline style={{ marginRight: '20px' }}>
             <FormGroup controlId="formInlineName" style={{ marginRight: '20px' }}>
@@ -106,28 +122,20 @@ export default class AbbreviationManagement extends React.Component {
         </div>
         <br />
         <div className="abbreviation-management">
-          <div className="ag-theme-balham" style={abbreviationStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={abbColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={abbreviations}
-              onGridReady={this.onAbbGridReady}
-            />
-          </div>
-          <div className="ag-theme-balham" style={superatomStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={superatomColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={superatoms}
-              onGridReady={this.onSuperatomGridReady}
-            />
-          </div>
+          <ManagementTable
+            columnDefs={abbColumnDefs}
+            defaultColDef={defaultColDef}
+            data={abbreviations}
+            style={{ width: '70%', marginRight: '5px' }}
+            onGridReady={this.onAbbGridReady}
+          />
+          <ManagementTable
+            columnDefs={superatomColumnDefs}
+            defaultColDef={defaultColDef}
+            data={superatoms}
+            style={{ width: '30%', marginLeft: '5px' }}
+            onGridReady={this.onSuperatomGridReady}
+          />
         </div>
       </div>
     );
diff --git a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
index f7490dddc..095c2f9eb 100644
--- a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
+++ b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
@@ -29,21 +29,18 @@ export default class CopyClipboardBtn extends React.Component {
   }
 
   render() {
-    const {
-      smi, mdl, inchi, inchiKey
-    } = this.props;
+    const { smi, mdl } = this.props;
     const clipboardIcon = (<i className="fa fa-clipboard" />);
 
     return (
       <DropdownButton
+        pullRight
         title={clipboardIcon}
-        className="clipboard-btn left-btn btn btn-xs"
+        className="clipboard-btn right-btn btn btn-xs"
         id={this.ddId}
       >
         <MenuItem eventKey="1" data-clipboard-text={smi}>SMILES</MenuItem>
         <MenuItem eventKey="2" data-clipboard-text={mdl}>Molfile</MenuItem>
-        <MenuItem eventKey="3" data-clipboard-text={inchi}>InChI</MenuItem>
-        <MenuItem eventKey="4" data-clipboard-text={inchiKey}>InChIKey</MenuItem>
       </DropdownButton>
     );
   }
@@ -52,8 +49,6 @@ export default class CopyClipboardBtn extends React.Component {
 CopyClipboardBtn.propTypes = {
   smi: PropTypes.string.isRequired,
   mdl: PropTypes.string.isRequired,
-  inchi: PropTypes.string.isRequired,
-  inchiKey: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   identifier: PropTypes.object.isRequired,
   container: PropTypes.instanceOf(Element)
diff --git a/app/packs/src/apps/chemscanner/components/DeleteBtn.js b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
index d1a23b213..933cd242d 100644
--- a/app/packs/src/apps/chemscanner/components/DeleteBtn.js
+++ b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
@@ -15,12 +15,9 @@ export default class DeleteBtn extends React.Component {
   }
 
   render() {
-    const { pullLeft } = this.props;
-    const className = pullLeft ? 'left-btn' : 'right-btn';
-
     return (
       <button
-        className={`${className} btn btn-xs`}
+        className="right-btn btn btn-xs"
         onClick={this.onClick}
       >
         <i className="fa fa-times" />
@@ -31,10 +28,5 @@ export default class DeleteBtn extends React.Component {
 
 DeleteBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
-  pullLeft: PropTypes.bool,
   param: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
 };
-
-DeleteBtn.defaultProps = {
-  pullLeft: false,
-};
diff --git a/app/packs/src/apps/chemscanner/components/HeaderMenu.js b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
index 0984c6f3c..65035c675 100644
--- a/app/packs/src/apps/chemscanner/components/HeaderMenu.js
+++ b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
@@ -1,4 +1,4 @@
-import { List } from 'immutable';
+import { Map, List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import 'whatwg-fetch';
@@ -35,17 +35,11 @@ import HelpPopover from 'src/apps/chemscanner/components/HelpPopover';
 import NotificationContainer from 'src/apps/chemscanner/containers/NotificationContainer';
 
 import {
-  extractMoleculeFromGroup,
+  extractReaction,
   generateExcelMoleculeRow,
   generateExcelReactionRow
 } from 'src/apps/chemscanner/utils';
 
-import {
-  getSchemeMolecules,
-  getReactionReagents,
-  getReactionGroups
-} from '../reactionUtils';
-
 const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
 
 const allReagents = Object.assign(
@@ -72,65 +66,15 @@ export default class HeaderMenu extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      disabled: true,
-      selectedReactionId: 0,
-      selectedSolvents: [],
-      selectedReagents: []
-    };
-
     this.clickUploadMolecule = this.clickUploadMolecule.bind(this);
     this.clickUploadReaction = this.clickUploadReaction.bind(this);
 
     this.scanFilesForMolecules = this.scanFilesForMolecules.bind(this);
     this.scanFilesForReactions = this.scanFilesForReactions.bind(this);
-    this.updateReagents = this.updateReagents.bind(this);
+    this.addReagents = this.addReagents.bind(this);
 
     this.exportCml = this.exportCml.bind(this);
     this.exportExcel = this.exportExcel.bind(this);
-
-    this.changeScannedFileView = this.changeScannedFileView.bind(this);
-    this.changeAbbreviationView = this.changeAbbreviationView.bind(this);
-    this.changeFileStorageView = this.changeFileStorageView.bind(this);
-    this.changeArchivedManagementView = this.changeArchivedManagementView.bind(this);
-
-    this.solventValues = Object.keys(solvents).map(k => solvents[k]);
-    this.allReagentValues = Object.keys(allReagents).map(k => allReagents[k]);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { reactions, molecules } = nextProps;
-
-    let rId = this.state.selectedReactionId;
-    const selectedR = reactions.filter(r => r.get('selected'));
-    const disabled = selectedR.size !== 1 || !selectedR.get(0).get('id');
-
-    const selectedReagents = [];
-    const selectedSolvents = [];
-
-    if (!disabled && selectedR.size === 1) {
-      const reaction = selectedR.get(0);
-      rId = reaction.get('id');
-      const reactionMolecules = getSchemeMolecules(reaction, molecules);
-      const reagents = getReactionReagents(reaction, reactionMolecules);
-
-      reagents.forEach((m) => {
-        const canoSmiles = m.get('canoSmiles');
-
-        if (this.solventValues.includes(canoSmiles)) {
-          selectedSolvents.push(canoSmiles);
-        } else if (this.allReagentValues.includes(canoSmiles)) {
-          selectedReagents.push(canoSmiles);
-        }
-      });
-    }
-
-    this.setState({
-      selectedReactionId: rId,
-      selectedSolvents,
-      selectedReagents,
-      disabled
-    });
   }
 
   exportCml() {
@@ -139,34 +83,24 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
+      selectedR = reactions;
+      selectedM = molecules;
     }
 
-    const simpleReactions = selectedR.map((r) => {
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(r, molecules);
-
-      return {
-        id: r.get('id'),
-        reactants: extractMoleculeFromGroup(reactants.toJS()),
-        reagents: extractMoleculeFromGroup(reagents.toJS()),
-        solvents: extractMoleculeFromGroup(solvents.toJS()),
-        products: extractMoleculeFromGroup(products.toJS()),
-        yield: r.get('yield') || '',
-        time: r.get('time') || '',
-        temperature: r.get('temperature') || '',
-        description: r.get('description') || ''
-      };
-    });
+    const simpleReactions = selectedR.toJS().map(r => ({
+      ...extractReaction(r),
+      yield: r.yield || '',
+      time: r.time || '',
+      temperature: r.temperature || '',
+      description: r.description || ''
+    }));
 
     const simpleMolecules = selectedM.toJS().map(m => ({
       id: m.id,
       mdl: m.mdl,
     }));
 
-    fetch('/api/v1/public_chemscanner/export/cml', {
+    fetch('/api/v1/chemscanner/export/cml', {
       credentials: 'same-origin',
       headers: {
         Accept: 'application/json',
@@ -201,8 +135,8 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
+      selectedR = reactions;
+      selectedM = molecules;
     }
 
     const wb = {};
@@ -213,26 +147,14 @@ export default class HeaderMenu extends Component {
     const moleculeRows = selectedM.toJS().reduce((rows, mol) => {
       rows.push(generateExcelMoleculeRow(mol));
       return rows;
-    }, [['Smiles', 'MDL', 'InChI', 'InChIKey', 'Description']]);
+    }, [['Smiles', 'MDL', 'Description']]);
     const moleculeWs = XLSX.utils.aoa_to_sheet(moleculeRows);
     wb.SheetNames.push(moleculeSheet);
     wb.Sheets[moleculeSheet] = moleculeWs;
 
     const reactionSheet = 'Reactions';
-    const reactionRows = selectedR.reduce((rows, immuReaction) => {
-      const reaction = immuReaction.toJS();
-
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(immuReaction, molecules);
-
-      reaction.reactants = reactants;
-      reaction.reagents = reagents;
-      reaction.solvents = solvents;
-      reaction.products = products;
-
+    const reactionRows = selectedR.toJS().reduce((rows, reaction) => {
       rows.push(generateExcelReactionRow(reaction));
-
       return rows;
     }, [[
       'ReactionSmiles', 'Temperature', 'Yield', 'Time',
@@ -279,19 +201,9 @@ export default class HeaderMenu extends Component {
     this.reactionInput.value = '';
   }
 
-  updateReagents({ value, type }) {
-    const { updateReagents } = this.props;
-    const { selectedReactionId } = this.state;
-
-    const newSmiles = value.split(',');
-    const selectedType = `selected${type[0].toUpperCase()}${type.substring(1)}`;
-    const selectedSmiles = this.state[selectedType];
-
-    const removedSmiles = selectedSmiles.filter(smi => !newSmiles.includes(smi));
-    const addedSmiles = newSmiles.filter(smi => !selectedSmiles.includes(smi));
-
-    const updateInfo = { add: addedSmiles, remove: removedSmiles };
-    updateReagents(selectedReactionId, updateInfo);
+  addReagents({ value, type }) {
+    const { addSmi, reactions } = this.props;
+    addSmi(reactions, value, type);
   }
 
   clickUploadMolecule() {
@@ -304,27 +216,24 @@ export default class HeaderMenu extends Component {
     document.getElementById('chemscanner-scan-file-dd').click();
   }
 
-  changeScannedFileView() {
-    this.props.changeScannedFileView();
-  }
-
-  changeAbbreviationView() {
-    this.props.changeAbbreviationView();
-  }
-
-  changeFileStorageView() {
-    this.props.changeFileStorageView();
-  }
-
-  changeArchivedManagementView() {
-    this.props.changeArchivedManagementView();
-  }
-
   render() {
-    const { cleanUp } = this.props;
-    const { disabled, selectedReagents, selectedSolvents } = this.state;
+    const {
+      ui, reactions, cleanUp, toggleAbbView,
+    } = this.props;
+
+    const isAbb = ui.get('abbView');
+    const switchText = isAbb ? 'Extracted Items' : 'Abbreviation Management';
+    // const partition = partitionSolventsReagents(value);
+    const selectedR = reactions.filter(r => r.get('selected'));
+    const disabled = selectedR.size === 0;
+    const selectedReagents = (
+      disabled ? [] : (selectedR.getIn([0, 'addedReagentsSmi']) || List()).toArray()
+    );
+    const selectedSolvents = (
+      disabled ? [] : (selectedR.getIn([0, 'addedSolventsSmi']) || List()).toArray()
+    );
 
-    const helpPopover = <HelpPopover style={{ maxWidth: '800px' }} />;
+    const helpPopover = <HelpPopover />;
 
     return (
       <div className="chemscanner-menu">
@@ -375,52 +284,29 @@ export default class HeaderMenu extends Component {
             obj={solvents}
             type="solvents"
             value={selectedSolvents}
-            onSelect={this.updateReagents}
+            onSelect={this.addReagents}
           />
         </div>
         <div style={{ width: '200px' }}>
           <SmiSelect
             disabled={disabled}
             obj={allReagents}
-            onSelect={this.updateReagents}
+            onSelect={this.addReagents}
             value={selectedReagents}
             type="reagents"
             optionHeight={80}
           />
         </div>
-        <ButtonGroup style={{ marginRight: '5px' }}>
+        <ButtonGroup>
           <DropdownButton title="Export" id="chemscanner-export-dd">
             <MenuItem eventKey="1" onSelect={this.exportCml}>CML</MenuItem>
             <MenuItem eventKey="2" onSelect={this.exportExcel}>Excel</MenuItem>
           </DropdownButton>
         </ButtonGroup>
+        &nbsp;
+        &nbsp;
         <ButtonGroup>
-          <DropdownButton title="View" id="chemscanner-export-dd">
-            <MenuItem
-              eventKey="1"
-              onSelect={this.changeScannedFileView}
-            >
-              Scanned Files
-            </MenuItem>
-            <MenuItem
-              eventKey="2"
-              onSelect={this.changeAbbreviationView}
-            >
-              Abbreviation/Superatom
-            </MenuItem>
-            <MenuItem
-              eventKey="3"
-              onSelect={this.changeFileStorageView}
-            >
-              File Storage
-            </MenuItem>
-            <MenuItem
-              eventKey="4"
-              onSelect={this.changeArchivedManagementView}
-            >
-              Archived Management
-            </MenuItem>
-          </DropdownButton>
+          <Button onClick={toggleAbbView}>{switchText}</Button>
         </ButtonGroup>
       </div>
     );
@@ -428,14 +314,12 @@ export default class HeaderMenu extends Component {
 }
 
 HeaderMenu.propTypes = {
+  ui: PropTypes.instanceOf(Map).isRequired,
   reactions: PropTypes.instanceOf(List).isRequired,
   molecules: PropTypes.instanceOf(List).isRequired,
   scanFile: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,
   cleanUp: PropTypes.func.isRequired,
-  changeScannedFileView: PropTypes.func.isRequired,
-  changeAbbreviationView: PropTypes.func.isRequired,
-  changeFileStorageView: PropTypes.func.isRequired,
-  changeArchivedManagementView: PropTypes.func.isRequired,
-  updateReagents: PropTypes.func.isRequired,
+  toggleAbbView: PropTypes.func.isRequired,
+  addSmi: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/HelpPopover.js b/app/packs/src/apps/chemscanner/components/HelpPopover.js
index 2075d9746..dbc28a5b9 100644
--- a/app/packs/src/apps/chemscanner/components/HelpPopover.js
+++ b/app/packs/src/apps/chemscanner/components/HelpPopover.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Popover } from 'react-bootstrap';
 
 const HelpPopover = props => (
-  <Popover id="chemscanner-help-popover" title="How to Use" {...props} >
+  <Popover id="popover-positioned-bottom" title="How to Use" {...props}>
     <strong>Scan File</strong>
     <p>
       Retrieve reaction(s)/molecule(s) from file(s).
@@ -13,31 +13,19 @@ const HelpPopover = props => (
       Clean up molecule(s) structure.
       All structures will be cleaned up if no molecule(s)/reaction(s) are selected.
     </p>
-    <strong>Export</strong>
+    <strong>Add solvents/reagents</strong>
     <p>
-      Export selected elements to CML or Excel.
-      All elements will be exported if none are selected.
+      Solvents/Reagents from the list will be added to the selected reaction(s).
     </p>
-    <strong>Add solvents/reagents <i><b>(Only for logged-in users)</b></i></strong>
+    <strong>Abbreviation Management</strong>
     <p>
-      Solvents/Reagents from the list will be added to the selected reaction(s).
+      Management UI for abbreviations and superatoms
     </p>
-    <strong>View</strong>
+    <strong>Export</strong>
     <p>
-      Switching View between abbreviations/superatoms management,
-      uploaded file storage management and scanned elements.
+      Export selected elements to CML or Excel.
+      All elements will be exported if none are selected.
     </p>
-    <ul>
-      <li><b>Scanned Files:</b> View scanned molecules/reactions</li>
-      <li>
-        <b>Abbreviation/Superatom:</b> Abbreviations and superatoms management.
-        <b> Only logged-in users can edit</b>
-      </li>
-      <li>
-        <b>File Storage:</b> Uploaded files, scanned files management.
-        <b> Only for logged-in users</b>
-      </li>
-    </ul>
   </Popover>
 );
 
diff --git a/app/packs/src/apps/chemscanner/components/MainContent.js b/app/packs/src/apps/chemscanner/components/MainContent.js
index 3b063b55e..448794f93 100644
--- a/app/packs/src/apps/chemscanner/components/MainContent.js
+++ b/app/packs/src/apps/chemscanner/components/MainContent.js
@@ -2,102 +2,17 @@ import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {
-  Badge,
   PanelGroup,
   Panel
 } from 'react-bootstrap';
 
 import PreviewFileZoomPan from 'src/apps/chemscanner/components/PreviewFileZoomPan';
 import ScannedItemsContainer from 'src/apps/chemscanner/containers/ScannedItemsContainer';
-import StructureEditorModal from '../../structure_editor/StructureEditorModal';
 
 import DeleteBtn from 'src/apps/chemscanner/components/DeleteBtn';
 
-const groupListByVersion = (list) => {
-  const hash = {};
-
-  list.forEach((el) => {
-    const version = el.get('version');
-    const val = hash[version] || [];
-    val.push(el);
-    hash[version] = val;
-  });
-
-  return Object.keys(hash).map(k => hash[k]);
-};
-
-const FileContent = ({ schemes, modal }) => (
-  <React.Fragment>
-    {schemes.map((scheme) => {
-      const uid = scheme.get('fileUuid');
-      const idx = scheme.get('index');
-      const imageURL = scheme.get('imageData');
-
-      const display = scheme.get('display');
-      if (!display) return <span key={`${uid}-${idx}`} />;
-
-      const objectQuery = display.substring(0, display.length - 1);
-      const extIds = scheme.get(`${objectQuery}ExtIds`).filter(i => i);
-
-      return (
-        <div key={`${uid}-${idx}`} id={`chemscanner-content-file-${uid}-${idx}`}>
-          <PreviewFileZoomPan
-            imageURL={imageURL}
-            duration={200}
-          />
-          <ScannedItemsContainer
-            schemeIdx={idx}
-            fileUid={uid}
-            extIds={extIds}
-            display={display}
-            modal={modal}
-          />
-        </div>
-      );
-    })}
-  </React.Fragment>
-);
-
-FileContent.propTypes = {
-  schemes: PropTypes.instanceOf(Array).isRequired,
-  modal: PropTypes.string.isRequired,
-};
-
 const MainContent = (props) => {
-  const {
-    files, schemes, reactions, molecules, modal, removeFile,
-    editingMoleculeId, saveMoleculeMdl, closeEditorModal
-  } = props;
-
-  const displayFile = files.filter((file) => {
-    const uid = file.get('uuid');
-
-    const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
-    const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
-
-    return fileReactions.size > 0 || fileMolecules.size > 0;
-  });
-
-  let mdl;
-  let showStructureEditor = !!editingMoleculeId;
-  if (showStructureEditor) {
-    const mIdx = molecules.findIndex(m => m.get('id') === editingMoleculeId);
-    if (mIdx === -1) {
-      showStructureEditor = false;
-    } else {
-      mdl = molecules.get(mIdx).get('mdl');
-    }
-  }
-  const structureEditor = (
-    <StructureEditorModal
-      showModal={showStructureEditor}
-      onSave={saveMoleculeMdl}
-      onCancel={closeEditorModal}
-      molfile={mdl}
-    />
-  );
-
-  if (displayFile.size === 0) return (<div>{structureEditor}</div>);
+  const { files, modal, removeFile } = props;
 
   return (
     <PanelGroup
@@ -105,65 +20,66 @@ const MainContent = (props) => {
       className="chemscanner-files-list"
       id="chemscanner-files-list"
     >
-      {displayFile.map((file, index) => {
-        const name = file.get('fileName');
-        const uid = file.get('uuid');
-
-        const fileSchemes = schemes.filter(s => s.get('fileUuid') === uid)
-                                   .filter(s => s.get('display'));
-        const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
-        const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
-
-        if (fileReactions.size === 0 && fileMolecules.size === 0) {
-          return <span key={uid} />;
-        }
-
-        const schemesByVersion = groupListByVersion(fileSchemes);
+      {files.map((file, index) => {
+        const display = file.get('display');
+        const uid = file.get('uid');
+        const name = file.get('name');
 
         return (
-          <React.Fragment key={uid}>
-            {schemesByVersion.map(schemesArr => (
-              <Panel
-                key={`${uid}-${schemesArr[0].get('version')}`}
-                eventKey={index}
-                defaultExpanded
-              >
-                {structureEditor}
-                <Panel.Heading
-                  style={{
-                    position: 'sticky',
-                    top: '0px',
-                    zIndex: 2,
-                    border: '1px solid #ddd',
-                    borderTopLeftRadius: '0px',
-                    borderTopRightRadius: '0px'
-                  }}
-                >
-                  <Panel.Title toggle>
-                    <Badge
-                      style={{ marginRight: '10px', marginTop: '-3px' }}
-                    >
-                      {schemesArr[0].get('version')}
-                    </Badge>
-                    {name}
-                    {
-                      <DeleteBtn
-                        param={{ fileUid: uid }}
-                        onClick={removeFile}
-                      />
-                    }
-                  </Panel.Title>
-                </Panel.Heading>
-                <Panel.Body collapsible>
-                  <FileContent
-                    file={file}
-                    schemes={schemesArr}
-                    modal={modal}
+          <Panel
+            key={uid}
+            eventKey={index}
+            defaultExpanded
+          >
+            <Panel.Heading
+              style={{
+                position: 'sticky',
+                top: '0px',
+                zIndex: 2,
+                border: '1px solid #ddd',
+                borderTopLeftRadius: '0px',
+                borderTopRightRadius: '0px'
+              }}
+            >
+              <Panel.Title toggle>
+                {name}
+                {
+                  <DeleteBtn
+                    param={{ fileUid: uid }}
+                    onClick={removeFile}
                   />
-                </Panel.Body>
-              </Panel>
-            ))}
-          </React.Fragment>
+                }
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Collapse>
+              <Panel.Body>
+                <div id={`chemscanner-content-file-${uid}`}>
+                  {file.get('cds').map((cd) => {
+                    const cdUid = cd.get('cdUid');
+                    const csContent = `chemscanner-content-${uid}-${cdUid}`;
+                    const imgContent = cd.get('b64png') || cd.get('svg');
+
+                    return (
+                      <div key={csContent} id={csContent}>
+                        <PreviewFileZoomPan
+                          content={imgContent}
+                          duration={200}
+                        />
+                        <ScannedItemsContainer
+                          fileUid={uid}
+                          cdUid={cdUid}
+                          itemIds={cd.get(display)}
+                          display={display}
+                          listId={csContent}
+                          modal={modal}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </Panel.Body>
+            </Panel.Collapse>
+          </Panel>
         );
       })}
     </PanelGroup>
@@ -172,12 +88,6 @@ const MainContent = (props) => {
 
 MainContent.propTypes = {
   files: PropTypes.instanceOf(Immutable.List).isRequired,
-  schemes: PropTypes.instanceOf(Immutable.List).isRequired,
-  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
-  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
-  editingMoleculeId: PropTypes.number.isRequired,
-  saveMoleculeMdl: PropTypes.func.isRequired,
-  closeEditorModal: PropTypes.func.isRequired,
   modal: PropTypes.string.isRequired,
   removeFile: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/MoleculeDescription.js b/app/packs/src/apps/chemscanner/components/MoleculeDescription.js
index 79f2bc5ba..92df8e23f 100644
--- a/app/packs/src/apps/chemscanner/components/MoleculeDescription.js
+++ b/app/packs/src/apps/chemscanner/components/MoleculeDescription.js
@@ -3,9 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Label, Button } from 'react-bootstrap';
 
-import EditableText from './EditableText';
-
-class PolymerLabel extends React.Component {
+class ResinLabel extends React.Component {
   constructor() {
     super();
 
@@ -13,19 +11,21 @@ class PolymerLabel extends React.Component {
   }
 
   onClickLabel() {
-    const { onClick, atomId } = this.props;
-    onClick(atomId);
+    const {
+      onClick, moleculeId, atomId
+    } = this.props;
+    onClick(moleculeId, atomId);
   }
 
   render() {
-    const { label, isPolymer } = this.props;
+    const { label, resin } = this.props;
     if (!label) return <span />;
 
     return (
       <Button
         bsSize="xsmall"
         onClick={this.onClickLabel}
-        bsStyle={isPolymer ? 'info' : 'default'}
+        bsStyle={resin ? 'info' : 'default'}
       >
         {label}
       </Button>
@@ -33,59 +33,45 @@ class PolymerLabel extends React.Component {
   }
 }
 
-PolymerLabel.propTypes = {
+ResinLabel.propTypes = {
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   atomId: PropTypes.number.isRequired,
-  isPolymer: PropTypes.bool
+  moleculeId: PropTypes.number.isRequired,
+  resin: PropTypes.bool
 };
 
-PolymerLabel.defaultProps = {
-  isPolymer: false
+ResinLabel.defaultProps = {
+  resin: false
 };
 
-function MoleculeDescription({
-  molecule, label, toggleAliasPolymer, updateMoleculeField
-}) {
+function MoleculeDescription({ molecule, label, toggleResin }) {
   const description = {
+    text: molecule.get('description'),
     label: molecule.get('label'),
-    description: molecule.get('description'),
-  };
-  const mId = molecule.get('id');
-
-  const setPolymer = (atomIdx) => {
-    if (!mId) return;
-
-    toggleAliasPolymer(mId, atomIdx);
   };
 
   Object.keys(description).forEach((k) => {
     const value = description[k];
     if (!value) delete description[k];
   });
+  const aliases = molecule.get('alias').toArray().map(alias => alias.toObject());
 
-  const aliases = molecule.get('aliases').toJS();
-  const polymers = (
-    molecule.get('extendedMetadata').get('polymer') || Immutable.List()
-  ).toJS();
-
-  const descLength = Object.keys(description).length;
-  const aliasesLength = Object.keys(aliases).length;
-  if (descLength === 0 && aliasesLength === 0) return <span />;
+  if (Object.keys(description).length === 0 && aliases.length === 0) return <span />;
 
   let aliasList = <span />;
-  const aliasesKeys = Object.keys(aliases);
-  if (aliasesKeys.length > 0) {
+  if (aliases.length > 0) {
     aliasList = (
       <li key="alias">
         <b>alias: </b>
-        {aliasesKeys.map(k => (
-          <PolymerLabel
-            key={k}
-            label={aliases[k]}
-            onClick={setPolymer}
-            atomId={parseInt(k, 10)}
-            isPolymer={polymers.includes(parseInt(k, 10))}
+        {aliases.map(alias => (
+          <ResinLabel
+            key={alias.id}
+            label={alias.text}
+            onClick={toggleResin}
+            atomId={alias.id}
+            moleculeId={molecule.get('id')}
+            resin={alias.resin}
           />
         ))}
       </li>
@@ -96,17 +82,13 @@ function MoleculeDescription({
   if (label) moleculeLabel = <Label>{label}</Label>;
 
   return (
-    <div style={{ maxWidth: '30%' }}>
+    <div>
       {moleculeLabel}
       <ul>
         {Object.keys(description).map(k => (
           <li key={k}>
-            <EditableText
-              field={k}
-              value={description[k].toString()}
-              id={molecule.get('id')}
-              onFinishUpdate={updateMoleculeField}
-            />
+            <b>{`${k}: `}</b>
+            {description[k]}
           </li>
         ))}
         {aliasList}
@@ -117,8 +99,7 @@ function MoleculeDescription({
 
 MoleculeDescription.propTypes = {
   molecule: PropTypes.instanceOf(Immutable.Map).isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateMoleculeField: PropTypes.func.isRequired,
+  toggleResin: PropTypes.func.isRequired,
   label: PropTypes.string
 };
 
diff --git a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
index eec1cf5c5..c41fc9647 100644
--- a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
+++ b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
@@ -20,10 +20,8 @@ export default class MoleculeDetails extends React.Component {
 
   render() {
     const { molecule } = this.props;
-    let details = molecule.get('details');
-    if (!details) return <span />;
+    const details = molecule.get('details').toJS();
 
-    details = details.toJS();
     const detailsList = Object.keys(details).filter(k => details[k]).map(k => (
       <li key={k}> <b>{`${pascalize(k)}: `}</b> {details[k]} </li>
     ));
diff --git a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
index c359f7fe8..5ef6660d0 100644
--- a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
+++ b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
@@ -13,55 +13,26 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   constructor() {
     super();
 
-    this.state = {
-      type: '',
-      imageContent: ''
-    };
-
     this.setPreviewRef = (el) => {
       this.previewDiv = el;
     };
 
     this.isSvg = true;
     this.centeringImage = this.centeringImage.bind(this);
-    this.displayURL = this.displayURL.bind(this);
   }
 
   componentDidMount() {
-    // setTimeout(this.centeringImage, 300);
-
-    const { imageURL } = this.props;
-    this.displayURL(imageURL);
-  }
-
-  componentWillReceiveProps(newProps) {
-    const { imageURL } = newProps;
-    this.displayURL(imageURL);
+    setTimeout(this.centeringImage, 200);
   }
 
   componentDidUpdate() {
-    setTimeout(this.centeringImage, 300);
-  }
-
-  displayURL(url) {
-    fetch(url).then(r => r.blob()).then((blob) => {
-      const myReader = new FileReader();
-      const { type } = blob;
-
-      myReader.onload = () => {
-        this.setState({ imageContent: myReader.result, type }, this.centeringImage);
-      };
-
-      myReader.readAsText(blob);
-    });
+    setTimeout(this.centeringImage, 200);
   }
 
   centeringImage() {
     const svgEl = this.previewDiv.querySelector('#svg-file-container');
     const imgSelector = this.isSvg ? 'g > svg' : '#png-img-svg';
     const imgEl = svgEl.querySelector(imgSelector);
-    if (!imgEl) return;
-
     const svgWidth = Math.floor(svgEl.getBoundingClientRect().width);
 
     let imgWidth;
@@ -103,28 +74,24 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   }
 
   render() {
-    const { duration } = this.props;
-    const { imageContent, type } = this.state;
+    const { content, duration } = this.props;
+    if (!content) return <span />;
 
-    if (imageContent.length === 0 || type.length === 0) return <span />;
-
-    let svg = imageContent;
-
-    if (type === 'image/png') {
+    let svg = content;
+    if (content.startsWith('data:image/png;base64')) {
       this.isSvg = false;
-
       svg = `
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <image id="png-img-svg" xlink:href="${imageContent}" width="100%" height="100%" />
+          <image id="png-img-svg" xlink:href="${content}" width="100%" height="100%" />
         </svg>
       `;
     } else {
-      svg = imageContent;
+      svg = content;
     }
 
     let dummyImg = (<span />);
     if (!this.isSvg) {
-      dummyImg = (<img id="dummy-img" alt="" src={imageContent} />);
+      dummyImg = (<img id="dummy-img" alt="" src={content} />);
     }
 
     return (
@@ -145,10 +112,11 @@ export default class PreviewFileZoomPan extends React.PureComponent {
 }
 
 PreviewFileZoomPan.propTypes = {
-  imageURL: PropTypes.string.isRequired,
+  content: PropTypes.string,
   duration: PropTypes.number,
 };
 
 PreviewFileZoomPan.defaultProps = {
+  content: '',
   duration: 200,
 };
diff --git a/app/packs/src/apps/chemscanner/components/ReactionDescription.js b/app/packs/src/apps/chemscanner/components/ReactionDescription.js
index 385fbaf3d..e4f7b9bfc 100644
--- a/app/packs/src/apps/chemscanner/components/ReactionDescription.js
+++ b/app/packs/src/apps/chemscanner/components/ReactionDescription.js
@@ -4,28 +4,21 @@ import PropTypes from 'prop-types';
 import { Label } from 'react-bootstrap';
 
 import MoleculeDescription from 'src/apps/chemscanner/components/MoleculeDescription';
-import EditableText from './EditableText';
 
 export default class ReactionDescription extends React.Component {
   constructor(props) {
     super(props);
 
-    this.updateReactionField = this.updateReactionField.bind(this);
-    this.updateMoleculeField = this.updateMoleculeField.bind(this);
+    this.toggleResin = this.toggleResin.bind(this);
   }
 
-  updateReactionField(id, field, value) {
-    this.props.updateItemField(id, 'reactions', field, value);
-  }
-
-  updateMoleculeField(id, field, value) {
-    this.props.updateItemField(id, 'molecules', field, value);
+  toggleResin(molId, atomId) {
+    const { reaction, toggleResin } = this.props;
+    toggleResin(reaction.get('id'), molId, atomId);
   }
 
   render() {
-    const {
-      reaction, reactants, reagents, solvents, products, toggleAliasPolymer
-    } = this.props;
+    const { reaction } = this.props;
 
     const rDesc = {
       description: reaction.get('description'),
@@ -54,11 +47,11 @@ export default class ReactionDescription extends React.Component {
     const statusLabel = <Label bsStyle={statusClass}>{status}</Label>;
 
     const steps = reaction.get('steps').toJS();
-    const rId = reaction.get('externalId');
+    const rId = reaction.get('id');
 
     return (
-      <React.Fragment>
-        <div style={{ maxWidth: '30%' }}>
+      <div className="scanned-reaction-desc">
+        <div>
           <Label>reaction</Label>
           <ul>
             <li key="scanned-reaction-status">
@@ -67,58 +60,15 @@ export default class ReactionDescription extends React.Component {
             </li>
             {Object.keys(rDesc).map(k => (
               <li key={k}>
-                <EditableText
-                  field={k}
-                  value={rDesc[k].toString()}
-                  id={reaction.get('id')}
-                  onFinishUpdate={this.updateReactionField}
-                />
+                <b>{`${k}: `}</b>
+                {rDesc[k]}
               </li>
             ))}
           </ul>
         </div>
-        {reactants.map((m, idx) => (
-          <MoleculeDescription
-            key={`reactant_${m.get('externalId')}`}
-            label={`Reactant ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {reagents.filter(m => m.get('externalId')).map((m, idx) => (
-          <MoleculeDescription
-            key={`reagent_${m.get('externalId')}`}
-            label={`Reagent ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {solvents.filter(m => m.get('externalId')).map((m, idx) => (
-          <MoleculeDescription
-            key={`solvent_${m.get('externalId')}`}
-            label={`Solvent ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {products.map((m, idx) => (
-          <MoleculeDescription
-            key={`product_${m.get('externalId')}`}
-            label={`Product ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
         {steps.map(step => (
-          <div
-            key={`reaction-${rId}-${step.stepNumber}`}
-            style={{ maxWidth: '40%' }}
-          >
-            <Label bsStyle="info">step {step.stepNumber}</Label>
+          <div key={`reaction-${rId}-${step.number}`}>
+            <Label bsStyle="info">step {step.number}</Label>
             <ul>
               {
                 ['description', 'temperature', 'time'].map((prop) => {
@@ -128,12 +78,8 @@ export default class ReactionDescription extends React.Component {
 
                   return (
                     <li key={key}>
-                      <EditableText
-                        field={prop}
-                        value={val}
-                        id={reaction.get('id')}
-                        onFinishUpdate={this.updateReactionField}
-                      />
+                      <b>{prop}: </b>
+                      {val}
                     </li>
                   );
                 })
@@ -141,25 +87,30 @@ export default class ReactionDescription extends React.Component {
               <li key={`reaction-${rId}-step-${step.number}-reagents`}>
                 <b>reagents: </b>
                 <ul>
-                  {step.reagentSmiles.map(x => (
-                    <li key={`${rId}-${step.number}-${x}`}>{x}</li>
-                  ))}
+                  {step.reagents.map(x => <li key={`${rId}-${step.number}-${x}`}>{x}</li>)}
                 </ul>
               </li>
             </ul>
           </div>
         ))}
-      </React.Fragment>
+        {['reactants', 'reagents', 'products'].reduce((arr, group) => {
+          const groupMol = reaction.get(group);
+          return arr.concat(groupMol.map((m, idx) => (
+            <MoleculeDescription
+              key={m.get('id')}
+              label={`${group.slice(0, -1)} ${idx + 1}`}
+              molecule={m}
+              toggleResin={this.toggleResin}
+            />
+          )));
+        }, [])}
+      </div>
     );
   }
 }
 
 ReactionDescription.propTypes = {
   reaction: PropTypes.instanceOf(Immutable.Map).isRequired,
-  reactants: PropTypes.instanceOf(Immutable.List).isRequired,
-  reagents: PropTypes.instanceOf(Immutable.List).isRequired,
-  solvents: PropTypes.instanceOf(Immutable.List).isRequired,
-  products: PropTypes.instanceOf(Immutable.List).isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
+  toggleResin: PropTypes.func.isRequired,
 };
+
diff --git a/app/packs/src/apps/chemscanner/components/ReactionDetails.js b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
index 2bc9a3cd3..1cea69f01 100644
--- a/app/packs/src/apps/chemscanner/components/ReactionDetails.js
+++ b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
@@ -41,19 +41,14 @@ export default class ReactionDetails extends React.Component {
       return acc.concat(keyList);
     }, []);
 
-    const detailsList = [
-      'reactants', 'reagents', 'solvents', 'products'
-    ].reduce((acc, group) => {
-      const groupMol = this.props[group];
+    const detailsList = ['reactants', 'reagents', 'products'].reduce((acc, group) => {
+      const groupMol = reaction.get(group);
       if (!groupMol || groupMol.size === 0) return acc;
 
       const keyList = groupMol.reduce((mAcc, m, idx) => {
-        let mDetails = m.get('details');
-        if (!mDetails) return mAcc;
-
-        mDetails = mDetails.toJS();
-        const mDetailEls = Object.keys(mDetails).filter(k => mDetails[k]).map(k => (
-          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetails[k]} </li>
+        const mDetail = m.get('details').toJS();
+        const mDetailEls = Object.keys(mDetail).filter(k => mDetail[k]).map(k => (
+          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetail[k]} </li>
         ));
         if (mDetailEls.length === 0) return mAcc;
 
diff --git a/app/packs/src/apps/chemscanner/components/Root.js b/app/packs/src/apps/chemscanner/components/Root.js
index 4b67e9393..11a0288ce 100644
--- a/app/packs/src/apps/chemscanner/components/Root.js
+++ b/app/packs/src/apps/chemscanner/components/Root.js
@@ -8,24 +8,12 @@ import AbbreviationContainer from 'src/apps/chemscanner/containers/AbbreviationC
 import HeaderMenuContainer from 'src/apps/chemscanner/containers/HeaderMenuContainer';
 import MainContentContainer from 'src/apps/chemscanner/containers/MainContentContainer';
 import LoadingModalContainer from 'src/apps/chemscanner/containers/LoadingModalContainer';
-import AbbreviationContainer from '../containers/AbbreviationContainer';
-
-import ArchivedManagementContainer from '../containers/ArchivedManagementContainer';
-import ImportModalContainer from '../containers/ImportModalContainer';
-import FileStorageContainer from '../containers/FileStorageContainer';
-
-import * as types from '../actions/ActionTypes';
 
 class Root extends Component {
   componentDidMount() {
-    const {
-      isScriptLoaded, isScriptLoadSucceed, attachEditor,
-      getCurrentVersion
-    } = this.props;
-
-    getCurrentVersion();
-
+    const { isScriptLoaded, isScriptLoadSucceed, attachEditor } = this.props;
     const check = isScriptLoaded && isScriptLoadSucceed;
+
     if (!check) return;
 
     attachEditor('chemscanner-cdjs-container');
@@ -46,25 +34,7 @@ class Root extends Component {
 
   render() {
     const { modal, ui } = this.props;
-    const view = ui.get('view');
-
-    let viewContainer = <span />;
-    switch (view) {
-      case types.VIEW_SCANNED_FILES:
-        viewContainer = <MainContentContainer modal={modal} />;
-        break;
-      case types.VIEW_ABBREVIATION:
-        viewContainer = <AbbreviationContainer />;
-        break;
-      case types.VIEW_FILE_STORAGE:
-        viewContainer = <FileStorageContainer />;
-        break;
-      case types.VIEW_ARCHIVED_MANAGEMENT:
-        viewContainer = <ArchivedManagementContainer />;
-        break;
-      default:
-        break;
-    }
+    const abbView = ui.get('abbView') || false;
 
     return (
       <Grid fluid className="chemscanner-grid">
@@ -84,7 +54,6 @@ class Root extends Component {
         </Row>
         <Row>
           <LoadingModalContainer />
-          <ImportModalContainer />
         </Row>
       </Grid>
     );
@@ -96,7 +65,6 @@ Root.propTypes = {
   isScriptLoaded: PropTypes.bool.isRequired,
   isScriptLoadSucceed: PropTypes.bool.isRequired,
   attachEditor: PropTypes.func.isRequired,
-  getCurrentVersion: PropTypes.func.isRequired,
   modal: PropTypes.string
 };
 
@@ -104,7 +72,6 @@ Root.defaultProps = {
   modal: ''
 };
 
-const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
-// const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
-
+// const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
+const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
 export default scriptLoader(scriptUrl)(Root);
diff --git a/app/packs/src/apps/chemscanner/components/ScannedMolecules.js b/app/packs/src/apps/chemscanner/components/ScannedMolecules.js
index c2560412f..4c4375e62 100644
--- a/app/packs/src/apps/chemscanner/components/ScannedMolecules.js
+++ b/app/packs/src/apps/chemscanner/components/ScannedMolecules.js
@@ -10,15 +10,23 @@ import CopyClipboardBtn from 'src/apps/chemscanner/components/CopyClipboardBtn';
 import EditCommentBtn from 'src/apps/chemscanner/components/EditCommentBtn';
 import MoleculeDescription from 'src/apps/chemscanner/components/MoleculeDescription';
 import MoleculeDetails from 'src/apps/chemscanner/components/MoleculeDetails';
-import EditMdlBtn from './EditMdlBtn';
-
-import { sortMoleculesByClone } from '../utils';
 
 const renderSvg = (svg) => {
-  const newSvg = svg.replace(/height="[^"]+"/, '').replace(/width="[^"]+"/, 'width="100%"');
-  return newSvg.replace(/height='[^']+'/, '').replace(/width='[^']+'/, 'width="100%"');
+  let newSvg = svg.replace(/<rect.*\/>/, '');
+  const viewBox = svg.match(/viewBox="(.*)"/)[1];
+  newSvg = newSvg.replace(/<svg.*viewBox.*>/, '');
+  newSvg = newSvg.replace(/<\/svg><\/svg>/, '</svg>');
+  const svgDOM = new DOMParser().parseFromString(newSvg, 'image/svg+xml');
+  const editedSvg = svgDOM.documentElement;
+  editedSvg.removeAttribute('width');
+  editedSvg.removeAttribute('height');
+  editedSvg.setAttribute('viewBox', viewBox);
+  editedSvg.setAttribute('width', '100%');
+  return editedSvg.outerHTML;
 };
 
+// const mapListMdl = arr => arr.map(m => `$MOL\n${m.get('mdl')}`).join('\n');
+
 export default class ScannedMolecules extends React.Component {
   constructor(props) {
     super(props);
@@ -26,107 +34,72 @@ export default class ScannedMolecules extends React.Component {
     this.editComment = this.editComment.bind(this);
     this.removeItem = this.removeItem.bind(this);
     this.selectItem = this.selectItem.bind(this);
-    this.updateMoleculeField = this.updateMoleculeField.bind(this);
+    this.toggleResin = this.toggleResin.bind(this);
+  }
+
+  toggleResin(molId, atomId) {
+    const { fileUid, cdUid, toggleResin } = this.props;
+    toggleResin('molecules', fileUid, cdUid, null, molId, atomId);
   }
 
   selectItem(id) {
-    const { fileUid, schemeIdx, selectItem } = this.props;
-    selectItem('molecules', fileUid, schemeIdx, id);
+    const { fileUid, cdUid, selectItem } = this.props;
+    selectItem('molecules', fileUid, cdUid, id);
   }
 
   removeItem({ id }) {
-    const { fileUid, schemeIdx, removeItem } = this.props;
-    removeItem('molecules', fileUid, schemeIdx, id);
+    const { fileUid, cdUid, removeItem } = this.props;
+    removeItem('molecules', fileUid, cdUid, id);
   }
 
-  editComment(schemeIdx, id, comment) {
+  editComment(cdUid, id, comment) {
     const { fileUid, editComment } = this.props;
-    editComment('molecules', fileUid, schemeIdx, id, comment);
-  }
-
-  updateMoleculeField(id, field, value) {
-    this.props.updateItemField(id, 'molecules', field, value);
+    editComment('molecules', fileUid, cdUid, id, comment);
   }
 
   render() {
     const {
-      fileUid, schemeIdx, extIds, modal, molecules,
-      toggleAliasPolymer, editMoleculeMdl
+      listId, itemIds, modal, cdUid, fileUid, molecules
     } = this.props;
 
-    const externalIds = extIds.filter(id => id);
-    const moleculeList = molecules.filter(m => (
-      m.get('fileUuid') === fileUid &&
-        m.get('schemeIdx') === schemeIdx &&
-        !m.get('abbreviation') &&
-        externalIds.includes(m.get('externalId'))
+    const moleculeList = molecules.filter(r => (
+      itemIds.includes(r.get('id'))
     ));
     if (moleculeList.length === 0) return <span />;
 
     const container = document.getElementById(modal);
 
-    const sortedMoleculeList = sortMoleculesByClone(moleculeList);
-
     return (
-      <ListGroup>
-        {sortedMoleculeList.map((molecule, idx) => {
-          const id = molecule.get('externalId');
-          const mId = molecule.get('id');
+      <ListGroup id={listId}>
+        {moleculeList.map((molecule) => {
+          const id = molecule.get('id');
           const selected = molecule.get('selected') || false;
           const className = `scanned-item ${selected ? 'selected-item' : ''}`;
 
-          let childrenStyle = {};
-          const cloneFrom = molecule.get('cloneFrom');
-          if (cloneFrom && idx > 0) {
-            const prevMolecule = sortedMoleculeList.get(idx - 1);
-            const prevExtId = prevMolecule.get('externalId');
-            const prevCloneFrom = prevMolecule.get('cloneFrom');
-
-            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
-              childrenStyle = {
-                marginLeft: '20px', border: '2px dashed #1d5e83'
-              };
-            }
-          }
-
-          const mdlOptions = [{ title: 'Molecule', value: mId }];
-
           return (
-            <ListGroupItem
-              key={`${fileUid}-${id}`}
-              className={className}
-              style={childrenStyle}
-            >
-              <DeleteBtn pullLeft param={{ id }} onClick={this.removeItem} />
+            <ListGroupItem key={`${listId}-${id}`} className={className}>
+              <DeleteBtn
+                param={{ id }}
+                onClick={this.removeItem}
+              />
               <CopyClipboardBtn
-                identifier={{ fileUid, id }}
-                smi={molecule.get('canoSmiles')}
+                identifier={{ fileUid, cdUid, id }}
+                smi={molecule.get('smi')}
                 mdl={molecule.get('mdl')}
-                inchi={molecule.get('inchistring') || ''}
-                inchiKey={molecule.get('inchikey') || ''}
                 container={container}
               />
-              <EditMdlBtn
-                openKetcher={editMoleculeMdl}
-                options={mdlOptions}
-                identifier={mId}
-              />
-              <SelectBtn
+              <EditCommentBtn
+                onChangeComment={this.editComment}
+                comment={molecule.get('comment') || ''}
+                cdUid={cdUid}
                 itemId={id}
-                selected={selected}
-                schemeIdx={schemeIdx}
-                onClick={this.selectItem}
               />
-              <div className="scanned-molecule-desc">
-                <div>
-                  <SvgFileZoomPan svg={renderSvg(molecule.get('svg'))} duration={200} />
-                </div>
-                <MoleculeDescription
-                  molecule={molecule}
-                  toggleAliasPolymer={toggleAliasPolymer}
-                  updateMoleculeField={this.updateMoleculeField}
-                />
-              </div>
+              <SelectBtn itemId={id} selected={selected} onClick={this.selectItem} />
+              <SvgFileZoomPan svg={renderSvg(molecule.get('svg'))} duration={200} />
+              <MoleculeDescription
+                molecule={molecule}
+                toggleResin={this.toggleResin}
+              />
               <MoleculeDetails molecule={molecule} />
             </ListGroupItem>
           );
@@ -139,13 +112,12 @@ export default class ScannedMolecules extends React.Component {
 ScannedMolecules.propTypes = {
   modal: PropTypes.string.isRequired,
   fileUid: PropTypes.string.isRequired,
-  schemeIdx: PropTypes.number.isRequired,
-  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
+  cdUid: PropTypes.string.isRequired,
+  listId: PropTypes.string.isRequired,
+  itemIds: PropTypes.instanceOf(Immutable.List).isRequired,
   molecules: PropTypes.instanceOf(Immutable.List).isRequired,
   removeItem: PropTypes.func.isRequired,
   selectItem: PropTypes.func.isRequired,
   editComment: PropTypes.func.isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
-  editMoleculeMdl: PropTypes.func.isRequired,
+  toggleResin: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/ScannedReactions.js b/app/packs/src/apps/chemscanner/components/ScannedReactions.js
index 6e40b5355..6924ad0b5 100644
--- a/app/packs/src/apps/chemscanner/components/ScannedReactions.js
+++ b/app/packs/src/apps/chemscanner/components/ScannedReactions.js
@@ -8,176 +8,113 @@ import DeleteBtn from 'src/apps/chemscanner/components/DeleteBtn';
 import SelectBtn from 'src/apps/chemscanner/components/SelectBtn';
 import CopyClipboardBtn from 'src/apps/chemscanner/components/CopyClipboardBtn';
 import EditCommentBtn from 'src/apps/chemscanner/components/EditCommentBtn';
-import EditMdlBtn from './EditMdlBtn';
 import ReactionDescription from 'src/apps/chemscanner/components/ReactionDescription';
 import ReactionDetails from 'src/apps/chemscanner/components/ReactionDetails';
 
-
-import { getReactionGroups } from '../reactionUtils';
+const renderSvg = (svg) => {
+  let newSvg = svg.replace(/<rect.*\/>/, '');
+  const viewBox = svg.match(/viewBox="(.*)"/)[1];
+  newSvg = newSvg.replace(/<svg.*viewBox.*>/, '');
+  newSvg = newSvg.replace(/<\/svg><\/svg>/, '</svg>');
+  const svgDOM = new DOMParser().parseFromString(newSvg, 'image/svg+xml');
+  const editedSvg = svgDOM.documentElement;
+  editedSvg.removeAttribute('width');
+  editedSvg.removeAttribute('height');
+  editedSvg.setAttribute('viewBox', viewBox);
+  editedSvg.setAttribute('width', '100%');
+  return editedSvg.outerHTML;
+};
 
 const mapListMdl = arr => arr.map(m => `$MOL\n${m.get('mdl')}`).join('\n');
 
-const getMdlOptions = (groups, name) => (
-  groups.reduce((arr, m, idx) => (
-    arr.concat([{ title: `${name} ${idx + 1}`, value: m.get('id') }])
-  ), [])
-);
-
 export default class ScannedReactions extends React.Component {
   constructor(props) {
     super(props);
 
+    this.editComment = this.editComment.bind(this);
     this.removeItem = this.removeItem.bind(this);
     this.selectItem = this.selectItem.bind(this);
+    this.toggleResin = this.toggleResin.bind(this);
+  }
+
+  toggleResin(rId, molId, atomId) {
+    const { fileUid, cdUid, toggleResin } = this.props;
+    toggleResin('reactions', fileUid, cdUid, rId, molId, atomId);
   }
 
   selectItem(id) {
-    const { fileUid, schemeIdx, selectItem } = this.props;
-    selectItem('reactions', fileUid, schemeIdx, id);
+    const { fileUid, cdUid, selectItem } = this.props;
+    selectItem('reactions', fileUid, cdUid, id);
   }
 
   removeItem({ id }) {
-    const { fileUid, schemeIdx, removeItem } = this.props;
-    removeItem('reactions', fileUid, schemeIdx, id);
+    const { fileUid, cdUid, removeItem } = this.props;
+    removeItem('reactions', fileUid, cdUid, id);
   }
 
-  editComment(id, comment) {
-    const { fileUid, schemeIdx, editComment } = this.props;
-    editComment('reactions', fileUid, schemeIdx, id, comment);
+  editComment(cdUid, id, comment) {
+    const { fileUid, editComment } = this.props;
+    editComment('reactions', fileUid, cdUid, id, comment);
   }
 
   render() {
     const {
-      fileUid, schemeIdx, extIds, modal, reactions, molecules,
-      updateItemField, toggleAliasPolymer, editMoleculeMdl
+      listId, itemIds, modal, cdUid, fileUid, reactions
     } = this.props;
 
-    const displayReactions = reactions.filter(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('schemeIdx') === schemeIdx &&
-        extIds.includes(r.get('externalId'))
+    const reactionList = reactions.filter(r => (
+      itemIds.includes(r.get('id')) &&
+      r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
     ));
-
-    if (displayReactions.length === 0) return <span />;
+    if (reactionList.length === 0) return <span />;
 
     const container = document.getElementById(modal);
 
     return (
       <ListGroup>
-        {displayReactions.map((reaction, idx) => {
-          const {
-            reactants, reagents, solvents, products
-          } = getReactionGroups(reaction, molecules);
-
-          const listInchi = [reactants, reagents, solvents, products].reduce((arr, group) => (
-            arr.concat(group.map(m => m.get('inchistring')).toArray())
-          ), []).join('\n');
-
-          const listInchiKey = [reactants, reagents, solvents, products].reduce((arr, group) => (
-            arr.concat(group.map(m => m.get('inchikey')).toArray())
-          ), []).join('\n');
-
-          const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
-          const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
-          const reagentSmiles = reagents.concat(solvents).map(m => (
-            m.get('canoSmiles')
-          )).join('.');
-
-          const reactionSmiles = [
-            reactantSmiles,
-            reagentSmiles,
-            productSmiles,
-          ].join('>');
-
-          const rId = reaction.get('externalId');
-          const reactantSize = reactants.size + reagents.size;
-
+        {reactionList.map((reaction) => {
+          const reactants = reaction.get('reactants');
+          const reagents = reaction.get('reagents');
+          const allReagents = reagents.concat(reaction.get('abbreviations') || []);
+          const products = reaction.get('products');
+          const rId = reaction.get('id');
+          const reactantSize = reactants.size + allReagents.size;
           const listMDL = [
             mapListMdl(reactants),
-            mapListMdl(reagents),
-            mapListMdl(solvents),
+            mapListMdl(allReagents),
             mapListMdl(products)
           ].join('\n');
-
-          let editMdlOptions = [];
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(reactants, 'Reactant'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(reagents, 'Reagent'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(solvents, 'Solvent'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(products, 'Product'));
-
           const rxn = `$RXN\n\n\n\n  ${reactantSize} ${products.size}\n${listMDL}`;
           const selected = reaction.get('selected') || false;
-          const selectedClassName = selected ? 'selected-item' : '';
-
-          const rSvg = reaction.get('svg');
-          const viewBox = rSvg.match(/viewBox="(.*)"/)[1];
-          let svgDivStyle = {};
-          if (viewBox) {
-            const svgWidth = parseInt(viewBox.split(' ')[2], 10) || -1;
-            if (svgWidth > 0) svgDivStyle = { width: (svgWidth * (2 / 3)) };
-          }
-
-          let childrenStyle = {};
-          const cloneFrom = reaction.get('cloneFrom');
-          if (cloneFrom && idx > 0) {
-            const prevReaction = displayReactions.get(idx - 1);
-            const prevExtId = prevReaction.get('externalId');
-            const prevCloneFrom = prevReaction.get('cloneFrom');
-
-            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
-              childrenStyle = {
-                marginLeft: '20px', border: '2px dashed #1d5e83'
-              };
-            }
-          }
+          const className = `scanned-item ${selected ? 'selected-item' : ''}`;
 
           return (
-            <ListGroupItem
-              key={`${fileUid}-${rId}`}
-              className={`scanned-item ${selectedClassName}`}
-              style={childrenStyle}
-            >
-              <DeleteBtn param={{ id: rId }} onClick={this.removeItem} pullLeft />
+            <ListGroupItem key={`${listId}-${rId}`} className={className}>
+              <DeleteBtn
+                param={{ id: rId }}
+                onClick={this.removeItem}
+              />
               <CopyClipboardBtn
-                identifier={{ fileUid, id: rId }}
-                smi={reactionSmiles}
+                identifier={{ fileUid, cdUid, id: rId }}
+                smi={reaction.get('smi')}
                 mdl={rxn}
-                inchi={listInchi}
-                inchiKey={listInchiKey}
                 container={container}
               />
-              <EditMdlBtn
-                openKetcher={editMoleculeMdl}
-                options={editMdlOptions}
-                identifier={reaction.get('id')}
-              />
-              <SelectBtn
+              <EditCommentBtn
+                onChangeComment={this.editComment}
+                comment={reaction.get('comment') || ''}
+                cdUid={cdUid}
                 itemId={rId}
-                schemeIdx={schemeIdx}
-                selected={selected}
-                onClick={this.selectItem}
               />
-              <div className="scanned-reaction-desc">
-                <div style={svgDivStyle}>
-                  <SvgFileZoomPan svg={rSvg} duration={200} />
-                </div>
+              <SelectBtn itemId={rId} selected={selected} onClick={this.selectItem} />
+              <div style={{ display: 'inline-flex' }}>
                 <ReactionDescription
                   reaction={reaction}
-                  reactants={reactants}
-                  reagents={reagents}
-                  solvents={solvents}
-                  products={products}
-                  toggleAliasPolymer={toggleAliasPolymer}
-                  updateItemField={updateItemField}
+                  toggleResin={this.toggleResin}
                 />
+                <SvgFileZoomPan svg={renderSvg(reaction.get('svg'))} duration={200} />
               </div>
-              <ReactionDetails
-                reaction={reaction}
-                reactants={reactants}
-                reagents={reagents}
-                solvents={solvents}
-                products={products}
-              />
+              <ReactionDetails reaction={reaction} />
             </ListGroupItem>
           );
         })}
@@ -187,16 +124,14 @@ export default class ScannedReactions extends React.Component {
 }
 
 ScannedReactions.propTypes = {
-  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
-  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
-  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
-  schemeIdx: PropTypes.number.isRequired,
   modal: PropTypes.string.isRequired,
   fileUid: PropTypes.string.isRequired,
+  cdUid: PropTypes.string.isRequired,
+  listId: PropTypes.string.isRequired,
+  itemIds: PropTypes.instanceOf(Immutable.List).isRequired,
+  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
   removeItem: PropTypes.func.isRequired,
   selectItem: PropTypes.func.isRequired,
   editComment: PropTypes.func.isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
-  editMoleculeMdl: PropTypes.func.isRequired,
+  toggleResin: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/SelectBtn.js b/app/packs/src/apps/chemscanner/components/SelectBtn.js
index 4d31c68d9..82c7279eb 100644
--- a/app/packs/src/apps/chemscanner/components/SelectBtn.js
+++ b/app/packs/src/apps/chemscanner/components/SelectBtn.js
@@ -8,7 +8,9 @@ export default class SelectBtn extends React.Component {
   }
 
   onClick() {
-    const { itemId, onClick } = this.props;
+    const {
+      itemId, onClick
+    } = this.props;
     onClick(itemId);
   }
 
@@ -18,7 +20,7 @@ export default class SelectBtn extends React.Component {
 
     return (
       <button
-        className="left-btn btn btn-xs"
+        className="right-btn btn btn-xs"
         onClick={this.onClick}
       >
         <i className={`fa ${className}`} />
@@ -30,6 +32,5 @@ export default class SelectBtn extends React.Component {
 SelectBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
   itemId: PropTypes.number.isRequired,
-  schemeIdx: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired
 };
diff --git a/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js b/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
index ab4d100da..60658ee35 100644
--- a/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+// import { connect } from 'react-redux';
 import { Button } from 'react-bootstrap';
 import 'whatwg-fetch';
 
@@ -23,8 +24,7 @@ function RemoveRowBtn({ onClick, node }) {
 
 RemoveRowBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 export default class AbbreviationManagementContainer extends React.Component {
@@ -44,7 +44,7 @@ export default class AbbreviationManagementContainer extends React.Component {
   }
 
   componentDidMount() {
-    fetch('/api/v1/public_chemscanner/abbreviations/all', {
+    fetch('/api/v1/chemscanner/abbreviations/all', {
       credentials: 'same-origin',
       headers: {
         Accept: 'application/json',
@@ -156,7 +156,8 @@ export default class AbbreviationManagementContainer extends React.Component {
     const deleteCol = {
       headerName: '',
       field: 'type',
-      filter: false,
+      editable: false,
+      suppressFilter: true,
       cellRendererFramework: RemoveRowBtn,
       cellRendererParams: {
         onClick: this.removeRow
@@ -171,13 +172,12 @@ export default class AbbreviationManagementContainer extends React.Component {
     ];
 
     const superatomColumnDefs = [
-      { ...deleteCol, width: 40, filter: false },
+      { ...deleteCol, width: 40 },
       { headerName: 'Superatom', field: 'abb', width: 120 },
       { headerName: 'SMILES', field: 'smi' },
     ];
     const defaultColDef = {
-      filter: true,
-      resizable: true,
+      enableValue: true
     };
 
     return (
diff --git a/app/packs/src/apps/chemscanner/containers/HeaderMenuContainer.js b/app/packs/src/apps/chemscanner/containers/HeaderMenuContainer.js
index b861241e8..6a66ba9f3 100644
--- a/app/packs/src/apps/chemscanner/containers/HeaderMenuContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/HeaderMenuContainer.js
@@ -1,19 +1,18 @@
+import { pascalize } from 'humps';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { scanFile, updateReagents } from 'src/apps/chemscanner/actions/fileActions';
+import { scanFile } from 'src/apps/chemscanner/actions/fileActions';
 import * as types from 'src/apps/chemscanner/actions/ActionTypes';
 import HeaderMenu from 'src/apps/chemscanner/components/HeaderMenu';
 import { CALL_API } from 'src/apps/chemscanner/middleware/api';
 
 import { extractReaction } from 'src/apps/chemscanner/utils';
-import { saveImage } from '../actions/storedFileActions';
-import { changeView } from '../actions/uiActions';
-import * as types from '../actions/ActionTypes';
 
 const HeaderMenuContainer = props => <HeaderMenu {...props} />;
 
 const mapStateToProps = state => ({
+  ui: state.get('ui'),
   reactions: state.get('reactions'),
   molecules: state.get('molecules'),
 });
@@ -21,32 +20,9 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   scanFile: (files, getMol) => {
     dispatch({ type: types.SET_LOADING });
-
-    return dispatch(scanFile(files, getMol)).then((action) => {
-      dispatch({ type: types.UNSET_LOADING });
-
-      const scannedSchemes = action.response.get('schemes');
-      if (!scannedSchemes || scannedSchemes.size === 0) return;
-
-      const imageList = scannedSchemes.reduce((arr, scheme) => {
-        const imageData = scheme.get('pictureData');
-        if (!imageData) return arr;
-
-        const id = scheme.get('id');
-        if (imageData.length === 0 || !id) return arr;
-
-        const isSaved = scheme.get('isSaved') || false;
-        if (isSaved) return arr;
-
-        const uuid = scheme.get('uuid');
-        arr.push({ id, fileUuid: uuid, imageData });
-        return arr;
-      }, []);
-
-      if (imageList.length === 0) return;
-
-      saveImage(imageList);
-    });
+    dispatch(scanFile(files, getMol)).then(() => dispatch({
+      type: types.UNSET_LOADING
+    }));
   },
   cleanUp: () => (
     new Promise((resolve) => {
@@ -63,14 +39,35 @@ const mapDispatchToProps = dispatch => ({
   }),
   resetNotification: () => dispatch({ type: types.RESET_NOTIFICATION }),
   toggleAbbView: () => dispatch({ type: types.TOGGLE_ABB_VIEW }),
-  changeScannedFileView: () => dispatch(changeView(types.VIEW_SCANNED_FILES)),
-  changeAbbreviationView: () => dispatch(changeView(types.VIEW_ABBREVIATION)),
-  changeFileStorageView: () => dispatch(changeView(types.VIEW_FILE_STORAGE)),
-  changeArchivedManagementView: () => dispatch(changeView(types.VIEW_ARCHIVED_MANAGEMENT)),
-  updateReagents: (reactionId, updateInfo) => {
-    if (reactionId === 0) return;
+  addSmi: (reactions, smi, smiType) => {
+    const type = `added${pascalize(smiType)}Smi`;
+    const smiArr = smi.split(',');
+
+    let selectedReactions = reactions.filter(r => r.get('selected'));
+    if (selectedReactions.size === 0) selectedReactions = reactions;
 
-    dispatch(updateReagents(reactionId, updateInfo));
+    const reactionArray = selectedReactions.toJS().map((r) => {
+      r[type] = smiArr;
+      return extractReaction(r);
+    });
+
+    dispatch({
+      [CALL_API]: {
+        endpoint: '/api/v1/chemscanner/svg/mdl',
+        options: {
+          credentials: 'same-origin',
+          method: 'post',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ molecules: [], reactions: reactionArray })
+        }
+      },
+      type: types.ADD_REAGENTS_SMILES,
+      smiType: type,
+      smi
+    });
   }
 });
 
diff --git a/app/packs/src/apps/chemscanner/containers/MainContentContainer.js b/app/packs/src/apps/chemscanner/containers/MainContentContainer.js
index 18b8f4920..2820f2bba 100644
--- a/app/packs/src/apps/chemscanner/containers/MainContentContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/MainContentContainer.js
@@ -5,48 +5,17 @@ import MainContent from 'src/apps/chemscanner/components/MainContent';
 
 import { removeFile } from 'src/apps/chemscanner/actions/fileActions';
 
-import * as types from '../actions/ActionTypes';
-
-import { updateItemField, fetchSvg } from '../actions/storedFileActions';
-
 const MainContentContainer = props => <MainContent {...props} />;
 
 const mapStateToProps = state => ({
   files: state.get('files'),
-  schemes: state.get('schemes'),
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-  editingMoleculeId: state.get('ui').get('editingMoleculeId'),
 });
 
 const mapDispatchToProps = dispatch => ({
-  dispatch,
-  removeFile: ({ fileUid }) => dispatch(removeFile(fileUid)),
-  closeEditorModal: () => dispatch({
-    type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0
-  }),
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  saveMoleculeMdl: (mdl) => {
-    const { dispatch } = dispatchProps;
-    const id = stateProps.editingMoleculeId;
-
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateItemField(id, 'molecules', 'mdl', mdl)).then(() => {
-      dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0 });
-    }).then(() => dispatch(fetchSvg([id]))).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
+  removeFile: ({ fileUid }) => dispatch(removeFile(fileUid))
 });
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-  mergeProps
 )(MainContentContainer);
diff --git a/app/packs/src/apps/chemscanner/containers/RootContainer.js b/app/packs/src/apps/chemscanner/containers/RootContainer.js
index 1287422a2..a1b693dd3 100644
--- a/app/packs/src/apps/chemscanner/containers/RootContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/RootContainer.js
@@ -3,8 +3,6 @@ import { connect } from 'react-redux';
 
 import Root from 'src/apps/chemscanner/components/Root';
 import setCddInstance from 'src/apps/chemscanner/actions/chemdrawInstanceActions';
-import Root from '../components/Root';
-import { getCurrentVersion } from '../actions/uiActions';
 
 const RootContainer = props => <Root {...props} />;
 
@@ -31,7 +29,6 @@ const mapDispatchToProps = dispatch => ({
     // eslint-disable-next-line no-undef
     perkinelmer.ChemdrawWebManager.attach(config);
   },
-  getCurrentVersion: () => dispatch(getCurrentVersion()),
 });
 
 export default connect(
diff --git a/app/packs/src/apps/chemscanner/containers/ScannedItemsContainer.js b/app/packs/src/apps/chemscanner/containers/ScannedItemsContainer.js
index 6b639db59..24502010a 100644
--- a/app/packs/src/apps/chemscanner/containers/ScannedItemsContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/ScannedItemsContainer.js
@@ -4,8 +4,6 @@ import { connect } from 'react-redux';
 
 import ScannedMolecules from 'src/apps/chemscanner/components/ScannedMolecules';
 import ScannedReactions from 'src/apps/chemscanner/components/ScannedReactions';
-import * as types from '../actions/ActionTypes';
-
 
 import {
   removeMolecule,
@@ -18,62 +16,49 @@ import {
   toggleMoleculeResin
 } from 'src/apps/chemscanner/actions/scannedItemActions';
 
-import { updateItemField, toggleAliasPolymer } from '../actions/storedFileActions';
-
 const ScannedItemsContainer = (props) => {
   const { display } = props;
+  if (display === 'molecules') {
+    return <ScannedMolecules {...props} />;
+  } else if (display === 'reactions') {
+    return <ScannedReactions {...props} />;
+  }
 
-  if (display === 'molecules') return <ScannedMolecules {...props} />;
-  if (display !== 'reactions') return <span />;
-
-  return <ScannedReactions {...props} />;
+  return <span />;
 };
 
-const mapStateToProps = state => ({
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
+const mapStateToProps = (state, ownProps) => ({
+  [ownProps.display]: state.get(ownProps.display)
 });
 
 const mapDispatchToProps = dispatch => ({
-  editComment: (itemType, fileUid, schemeIdx, id, comment) => {
+  editComment: (itemType, fileUid, cdUid, id, comment) => {
     if (itemType === 'molecules') {
-      dispatch(editMoleculeComment(id, fileUid, schemeIdx, comment));
+      dispatch(editMoleculeComment(id, fileUid, cdUid, comment));
     } else if (itemType === 'reactions') {
-      dispatch(editReactionComment(id, fileUid, schemeIdx, comment));
+      dispatch(editReactionComment(id, fileUid, cdUid, comment));
     }
   },
-  removeItem: (itemType, fileUid, schemeIdx, id) => {
+  removeItem: (itemType, fileUid, cdUid, id) => {
     if (itemType === 'molecules') {
-      dispatch(removeMolecule(id, fileUid, schemeIdx));
+      dispatch(removeMolecule(id, fileUid, cdUid));
     } else if (itemType === 'reactions') {
-      dispatch(removeReaction(id, fileUid, schemeIdx));
+      dispatch(removeReaction(id, fileUid, cdUid));
     }
   },
-  selectItem: (itemType, fileUid, schemeIdx, id) => {
+  selectItem: (itemType, fileUid, cdUid, id, comment) => {
     if (itemType === 'molecules') {
-      dispatch(selectMolecule(id, fileUid, schemeIdx));
+      dispatch(selectMolecule(id, fileUid, cdUid, comment));
     } else if (itemType === 'reactions') {
-      dispatch(selectReaction(id, fileUid, schemeIdx));
+      dispatch(selectReaction(id, fileUid, cdUid, comment));
     }
   },
-  updateItemField: (id, type, field, value) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateItemField(id, type, field, value)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  toggleAliasPolymer: (moleculeId, atomIdx) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(toggleAliasPolymer(moleculeId, atomIdx)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  editMoleculeMdl: (moleculeId) => {
-    if (!moleculeId) return;
-
-    dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId });
+  toggleResin: (itemType, fileUid, cdUid, rId, molId, atomId) => {
+    if (itemType === 'molecules') {
+      dispatch(toggleMoleculeResin(fileUid, cdUid, molId, atomId));
+    } else if (itemType === 'reactions') {
+      dispatch(toggleResinInReaction(fileUid, cdUid, rId, molId, atomId));
+    }
   }
 });
 
diff --git a/app/packs/src/apps/chemscanner/middleware/api.js b/app/packs/src/apps/chemscanner/middleware/api.js
index 3582f5b24..20a171b1c 100644
--- a/app/packs/src/apps/chemscanner/middleware/api.js
+++ b/app/packs/src/apps/chemscanner/middleware/api.js
@@ -1,21 +1,19 @@
 import 'whatwg-fetch';
+
 import { camelizeKeys } from 'humps';
 
 export const CALL_API = 'Call API';
 
 const callApi = (endpoint, options = {}) => (
-  fetch(endpoint, options).then((response) => {
-    if (!response.ok) return Promise.reject(response);
-
-    const contentType = response.headers.get('content-type');
-    const jsonType = contentType.indexOf('application/json') !== -1;
-
-    if (jsonType) {
-      return response.json().then(json => camelizeKeys(json));
-    }
-
-    return response;
-  })
+  fetch(endpoint, options).then(response => (
+    response.json().then((json) => {
+      if (!response.ok) {
+        return Promise.reject(json);
+      }
+
+      return camelizeKeys(json);
+    })
+  ))
 );
 
 export default store => next => (action) => {
@@ -29,7 +27,9 @@ export default store => next => (action) => {
   if (typeof endpoint !== 'string') {
     throw new Error('Specify a string endpoint URL.');
   }
-  if (!normalizer) normalizer = res => res;
+  if (!normalizer) {
+    normalizer = res => res;
+  }
 
   return callApi(endpoint, options).then(response => next({
     response: normalizer(response, store, action.type),
diff --git a/app/packs/src/apps/chemscanner/middleware/chemdraw.js b/app/packs/src/apps/chemscanner/middleware/chemdraw.js
index ee861f41b..11981c52b 100644
--- a/app/packs/src/apps/chemscanner/middleware/chemdraw.js
+++ b/app/packs/src/apps/chemscanner/middleware/chemdraw.js
@@ -11,17 +11,10 @@ const cleanUpPromise = (cddInstance, mdl) => {
   });
 
   return loadPromise.then(() => {
-    const version = cddInstance.getVersion().split('.')[0];
-
-    if (version === '18') {
-      cddInstance.g.instanceHub.chemDraw.handleCommand('selectAll');
-      cddInstance.g.instanceHub.chemDraw.handleCommand('cleanStructure');
-    } else {
-      const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
-      const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
-      selectAll.handleCommand();
-      clean.handleCommand();
-    }
+    const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
+    const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
+    selectAll.handleCommand();
+    clean.handleCommand();
 
     return new Promise(resolve => cddInstance.getMOL(mol => resolve(mol)));
   });
@@ -103,7 +96,7 @@ export default store => next => (action) => {
     return next({
       type,
       [CALL_API]: {
-        endpoint: '/api/v1/public_chemscanner/svg/mdl',
+        endpoint: '/api/v1/chemscanner/svg/mdl',
         options: {
           credentials: 'same-origin',
           method: 'post',
diff --git a/app/packs/src/apps/chemscanner/reducers/molecules.js b/app/packs/src/apps/chemscanner/reducers/molecules.js
index df19143ae..6a53ffdef 100644
--- a/app/packs/src/apps/chemscanner/reducers/molecules.js
+++ b/app/packs/src/apps/chemscanner/reducers/molecules.js
@@ -1,235 +1,67 @@
-import { List, fromJS } from 'immutable';
+import { List } from 'immutable';
 
 import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-import { createReducer } from '../utils';
 
-const molecules = createReducer(List(), {
-  [types.CLEAN_UP]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
+export default function molecules(state = List(), action) {
+  switch (action.type) {
+    case types.CLEAN_UP: {
+      const { response } = action;
+      if (!response) return state;
 
-    const cleanedMolecules = response.molecules;
-    if (!cleanedMolecules || cleanedMolecules.length === 0) return state;
+      const cleanedMolecules = response.molecules;
+      if (!cleanedMolecules || cleanedMolecules.length === 0) return state;
 
-    return state.withMutations((mapState) => {
-      cleanedMolecules.forEach((cm) => {
-        const mIndex = mapState.findIndex(m => m.get('id') === cm.id);
-        mapState.update(mIndex, m => m.mergeDeep(cm));
+      return state.withMutations((mapState) => {
+        cleanedMolecules.forEach((cm) => {
+          const mIndex = mapState.findIndex(m => m.get('id') === cm.id);
+          mapState.update(mIndex, m => m.mergeDeep(cm));
+        });
       });
-    });
-  },
-  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const { reaction } = response;
-
-    const addedMolecules = response.molecules || [];
-    let newState = state.concat(fromJS(addedMolecules));
-
-    const { removedIds } = reaction;
-    newState = newState.filter(m => !removedIds.includes(m.get('id')));
-
-    return newState;
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstMolecule = state.get(0);
-    if (firstMolecule.get('id')) return state;
-
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state.filterNot(m => m.get('fileUid') === fileUid);
-    if (ids.length > 0) {
-      newState = newState.filterNot(m => ids.includes(m.get('schemeId')));
     }
+    case types.REMOVE_FILE: {
+      const { fileUid } = action;
+      return state.filterNot(r => r.get('fileUid') === fileUid);
+    }
+    case types.REMOVE_MOLECULE: {
+      const { id } = action;
+      return state.filterNot(m => m.get('id') === id);
+    }
+    case types.SCAN_FILE_FOR_MOLECULES: {
+      const { response } = action;
+      if (!response) return state;
 
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstMolecule = state.get(0);
-    if (firstMolecule.get('id')) return state;
-
-    const ids = action.ids || [];
-    return state.filterNot(m => ids.includes(m.get('schemeId')));
-  },
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const fileUid = action.response;
-    return state.filterNot(m => m.get('uid') === fileUid);
-  },
-  [types.HIDE_MOLECULE]: (state, action) => {
-    const { fileUid, schemeIdx, id } = action;
-    return state.filterNot(m => (
-      m.get('externalId') === id &&
-        m.get('schemeIdx') === schemeIdx &&
-        m.get('fileUuid') === fileUid
-    ));
-  },
-  [types.SCAN_FILE_FOR_MOLECULES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const scannedMolecules = response.get('molecules');
-    if (!scannedMolecules) return state;
-
-    let newState = state;
-    scannedMolecules.forEach((molecule) => {
-      const idx = newState.findIndex(sm => sm.get('id') === molecule.get('id'));
-      if (idx < 0) {
-        newState = newState.push(molecule);
-      } else {
-        newState = newState.update(idx, m => m.merge(molecule));
-      }
-    });
-
-    return newState;
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.SELECT_MOLECULE]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    const mIndex = state.findIndex(m => (
-      m.get('externalId') === id &&
-        m.get('fileUuid') === fileUid &&
-        m.get('schemeIdx') === schemeIdx
-    ));
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, (m) => {
-      const selected = m.get('selected') || false;
-      return m.set('selected', !selected);
-    });
-  },
-  [types.TOGGLE_MOLECULE_RESIN]: (state, action) => {
-    const {
-      fileUid, cdUid, molId, atomId
-    } = action;
-    const mIndex = state.findIndex(m => (
-      m.get('id') === molId && m.get('fileUid') === fileUid && m.get('cdUid') === cdUid
-    ));
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, m => m.updateIn(['alias'], (aliases) => {
-      const index = aliases.findIndex(alias => alias.get('id') === atomId);
-      return aliases.update(index, (alias) => {
-        const resin = alias.get('resin') || false;
-        return alias.set('resin', !resin);
+      return state.concat(response.get('molecules') || []);
+    }
+    case types.SELECT_MOLECULE: {
+      const { id, fileUid, cdUid } = action;
+      const mIndex = state.findIndex(m => (
+        m.get('id') === id && m.get('fileUid') === fileUid && m.get('cdUid') === cdUid
+      ));
+      if (mIndex < 0) return state;
+
+      return state.update(mIndex, (m) => {
+        const selected = m.get('selected') || false;
+        return m.set('selected', !selected);
       });
-    }));
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedMolecules = response.molecules;
-    if (!storedMolecules) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newMolecules = storedMolecules.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newMolecules));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('molecules');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((m) => {
-      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
-
-      return m;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('molecules');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((m) => {
-      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
-
-      return m;
-    });
-  },
-  [types.UPDATE_ITEM_FIELD]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const {
-      id, type, field, value
-    } = JSON.parse(action['Call API'].options.body);
-    if (type !== 'molecules') return state;
-
-    const mIndex = state.findIndex(m => m.get('id') === id);
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, m => m.set(field, value));
-  },
-  [types.TOGGLE_ALIAS_POLYMER]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const request = JSON.parse(action['Call API'].options.body);
-    const { moleculeId, atomIdx } = request;
-
-    const idx = state.findIndex(m => m.get('id') === moleculeId);
-    if (idx < 0) return state;
-
-    return state.update(idx, (m) => {
-      let extData = m.get('extendedMetadata');
-
-      let polymers = extData.get('polymer') || List();
-      if (polymers.includes(atomIdx)) {
-        polymers = polymers.filter(x => x === atomIdx.toString());
-      } else {
-        polymers = polymers.push(atomIdx);
-      }
-
-      extData = extData.set('polymer', polymers);
-      return m.set('extendedMetadata', extData);
-    });
-  },
-  [types.FETCH_SVG]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    let newState = state;
-
-    response.molecules.forEach((molecule) => {
-      const mIndex = newState.findIndex(m => m.get('id') === molecule.id);
-      if (mIndex < 0) return;
-
-      newState = newState.update(mIndex, m => m.set('svg', molecule.svg));
-    });
-
-    return newState;
-  },
-});
-
-export default molecules;
+    }
+    case types.TOGGLE_MOLECULE_RESIN: {
+      const {
+        fileUid, cdUid, molId, atomId
+      } = action;
+      const mIndex = state.findIndex(m => (
+        m.get('id') === molId && m.get('fileUid') === fileUid && m.get('cdUid') === cdUid
+      ));
+      if (mIndex < 0) return state;
+
+      return state.update(mIndex, m => m.updateIn(['alias'], (aliases) => {
+        const index = aliases.findIndex(alias => alias.get('id') === atomId);
+        return aliases.update(index, (alias) => {
+          const resin = alias.get('resin') || false;
+          return alias.set('resin', !resin);
+        });
+      }));
+    }
+    default:
+      return state;
+  }
+}
diff --git a/app/packs/src/apps/chemscanner/reducers/reactions.js b/app/packs/src/apps/chemscanner/reducers/reactions.js
index fc09f1757..1d2f67461 100644
--- a/app/packs/src/apps/chemscanner/reducers/reactions.js
+++ b/app/packs/src/apps/chemscanner/reducers/reactions.js
@@ -1,240 +1,121 @@
-import { List, fromJS } from 'immutable';
+import { List } from 'immutable';
 
 import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-import { createReducer } from '../utils';
 
-const reactions = createReducer(List(), {
-  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
-    const { response } = action;
-    const { reaction } = response;
-    if (!reaction) return state;
-
-    const { id, svg, reagentExternalIds } = reaction;
-
-    const rIndex = state.findIndex(r => r.get('id') === id);
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => (
-      r.set('svg', svg).set('reagentExtIds', fromJS(reagentExternalIds))
-    ));
-  },
-  [types.CLEAN_UP]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const cleanedReactions = response.reactions;
-    if (!cleanedReactions || cleanedReactions.length === 0) return state;
-
-    return state.withMutations((mapState) => {
-      cleanedReactions.forEach((cr) => {
-        const rIndex = mapState.findIndex(r => r.get('id') === cr.id);
-        mapState.update(rIndex, (r) => {
-          let newR = r.set('svg', cr.svg);
-          ['reactants', 'reagents', 'products'].forEach((group) => {
-            const molGroup = newR.get(group);
-            cr[group].forEach((cm) => {
-              const mIdx = molGroup.findIndex(mm => mm.get('id') === cm.id);
-              newR = newR.updateIn([group, mIdx], m => m.mergeDeep(cm));
+export default function reactions(state = List(), action) {
+  switch (action.type) {
+    case types.ADD_REAGENTS_SMILES: {
+      const { response, smiType, smi } = action;
+      const editedReactions = response.reactions;
+      if (!editedReactions) return state;
+
+      const listSmi = List(smi.split(','));
+      return state.withMutations((mapState) => {
+        editedReactions.forEach((edited) => {
+          const rIndex = mapState.findIndex(r => r.get('id') === edited.id);
+          mapState.update(rIndex, r => r.withMutations(mr => (
+            mr.set('svg', edited.svg).set(smiType, listSmi)
+          )));
+        });
+      });
+    }
+    case types.CLEAN_UP: {
+      const { response } = action;
+      if (!response) return state;
+
+      const cleanedReactions = response.reactions;
+      if (!cleanedReactions || cleanedReactions.length === 0) return state;
+
+      return state.withMutations((mapState) => {
+        cleanedReactions.forEach((cr) => {
+          const rIndex = mapState.findIndex(r => r.get('id') === cr.id);
+          mapState.update(rIndex, (r) => {
+            let newR = r.set('svg', cr.svg);
+            ['reactants', 'reagents', 'products'].forEach((group) => {
+              const molGroup = newR.get(group);
+              cr[group].forEach((cm) => {
+                const mIdx = molGroup.findIndex(mm => mm.get('id') === cm.id);
+                newR = newR.updateIn([group, mIdx], m => m.mergeDeep(cm));
+              });
             });
-          });
 
-          return newR;
+            return newR;
+          });
         });
       });
-    });
-  },
-  [types.EDIT_REACTION_COMMENT]: (state, action) => {
-    const {
-      id, fileUid, cdUid, comment
-    } = action;
-    const rIndex = state.findIndex(r => (
-      r.get('fileUid') === fileUid && r.get('cdUid') === cdUid && r.get('id') === id
-    ));
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => r.set('comment', comment));
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstReaction = state.get(0);
-    if (firstReaction.get('id')) return state;
-
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state.filterNot(r => r.get('fileUid') === fileUid);
-    newState = newState.filterNot(r => ids.includes(r.get('schemeId')));
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstReaction = state.get(0);
-    if (firstReaction.get('id')) return state;
-
-    const ids = action.ids || [];
-    return state.filterNot(r => ids.includes(r.get('schemeId')));
-  },
-  [types.DELETE_FILE]: (state, action) => {
-    const fileUid = action.response;
-    return state.filterNot(m => m.get('uid') === fileUid);
-  },
-  [types.HIDE_REACTION]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    return state.filterNot(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('externalId') === id &&
-        r.get('schemeIdx') === schemeIdx
-    ));
-  },
-  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('reactions') || []);
-  },
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const scannedReactions = response.get('reactions');
-    if (!scannedReactions) return state;
-
-    let newState = state;
-    scannedReactions.forEach((reaction) => {
-      const idx = newState.findIndex(sr => sr.get('id') === reaction.get('id'));
-      if (idx < 0) {
-        newState = newState.push(reaction);
-      } else {
-        newState = newState.update(idx, r => r.merge(reaction));
-      }
-    });
-
-    return newState;
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('reactions') || []);
-  },
-  [types.SELECT_REACTION]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    const rIndex = state.findIndex(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('schemeIdx') === schemeIdx &&
-        r.get('externalId') === id
-    ));
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, (r) => {
-      const selected = r.get('selected') || false;
-      return r.set('selected', !selected);
-    });
-  },
-  [types.TOGGLE_RESIN_IN_REACTION]: (state, action) => {
-    const {
-      fileUid, cdUid, rId, molId, atomId
-    } = action;
-
-    const rIndex = state.findIndex(r => (
-      r.get('id') === rId && r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
-    ));
-    if (rIndex < 0) return state;
-
-    const findMol = (reaction, mId) => {
-      const rGroup = ['reactants', 'reagents', 'products'];
-      return rGroup.reduce((map, group) => {
-        const idx = reaction.get(group).findIndex(m => m.get('id') === mId);
-        if (idx < 0) return map;
-
-        return { [group]: idx };
-      }, {});
-    };
-
-    const molPos = findMol(state.get(rIndex), molId);
-    const group = Object.keys(molPos)[0];
-    const groupIdx = molPos[group];
-
-    return state.update(rIndex, r => r.updateIn([group, groupIdx, 'alias'], (aliases) => {
-      const index = aliases.findIndex(alias => alias.get('id') === atomId);
-      return aliases.update(index, (alias) => {
-        const resin = alias.get('resin') || false;
-        return alias.set('resin', !resin);
+    }
+    case types.EDIT_REACTION_COMMENT: {
+      const {
+        id, fileUid, cdUid, comment
+      } = action;
+      const rIndex = state.findIndex(r => (
+        r.get('fileUid') === fileUid && r.get('cdUid') === cdUid && r.get('id') === id
+      ));
+      if (rIndex < 0) return state;
+
+      return state.update(rIndex, r => r.set('comment', comment));
+    }
+    case types.REMOVE_FILE: {
+      const { fileUid } = action;
+      return state.filterNot(r => r.get('fileUid') === fileUid);
+    }
+    case types.REMOVE_REACTION: {
+      const { id, fileUid, cdUid } = action;
+      return state.filterNot(r => (
+        r.get('id') === id && r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
+      ));
+    }
+    case types.SCAN_FILE_FOR_REACTIONS: {
+      const { response } = action;
+      if (!response) return state;
+
+      return state.concat(response.get('reactions') || []);
+    }
+    case types.SELECT_REACTION: {
+      const { id, fileUid, cdUid } = action;
+      const rIndex = state.findIndex(r => (
+        r.get('fileUid') === fileUid && r.get('cdUid') === cdUid && r.get('id') === id
+      ));
+      if (rIndex < 0) return state;
+
+      return state.update(rIndex, (r) => {
+        const selected = r.get('selected') || false;
+        return r.set('selected', !selected);
       });
-    }));
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedReactions = response.reactions;
-    if (!storedReactions) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newReactions = storedReactions.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newReactions));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('reactions');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((r) => {
-      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
-
-      return r;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('reactions');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((r) => {
-      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
-
-      return r;
-    });
-  },
-  [types.UPDATE_ITEM_FIELD]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const {
-      id, type, field, value
-    } = JSON.parse(action['Call API'].options.body);
-    if (type !== 'reactions') return state;
-
-    const rIndex = state.findIndex(r => r.get('id') === id);
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => r.set(field, value));
-  },
-  [types.FETCH_SVG]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    let newState = state;
-
-    response.reactions.forEach((reaction) => {
-      const rIndex = newState.findIndex(r => r.get('id') === reaction.id);
-      if (rIndex < 0) return;
-
-      newState = newState.update(rIndex, r => r.set('svg', reaction.svg));
-    });
-
-    return newState;
-  },
-});
-
-export default reactions;
+    }
+    case types.TOGGLE_RESIN_IN_REACTION: {
+      const {
+        fileUid, cdUid, rId, molId, atomId
+      } = action;
+
+      const rIndex = state.findIndex(r => (
+        r.get('id') === rId && r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
+      ));
+      if (rIndex < 0) return state;
+
+      const findMol = (reaction, mId) => {
+        const rGroup = ['reactants', 'reagents', 'products'];
+        return rGroup.reduce((map, group) => {
+          const idx = reaction.get(group).findIndex(m => m.get('id') === mId);
+          if (idx < 0) return map;
+
+          return { [group]: idx };
+        }, {});
+      };
+
+      const molPos = findMol(state.get(rIndex), molId);
+      const group = Object.keys(molPos)[0];
+      const groupIdx = molPos[group];
+
+      return state.update(rIndex, r => r.updateIn([group, groupIdx, 'alias'], (aliases) => {
+        const index = aliases.findIndex(alias => alias.get('id') === atomId);
+        return aliases.update(index, (alias) => {
+          const resin = alias.get('resin') || false;
+          return alias.set('resin', !resin);
+        });
+      }));
+    }
+    default:
+      return state;
+  }
+}
diff --git a/app/packs/src/apps/chemscanner/reducers/ui.js b/app/packs/src/apps/chemscanner/reducers/ui.js
index e47966a45..9efa889c7 100644
--- a/app/packs/src/apps/chemscanner/reducers/ui.js
+++ b/app/packs/src/apps/chemscanner/reducers/ui.js
@@ -1,48 +1,31 @@
-import { Map, fromJS } from 'immutable';
+import { Map } from 'immutable';
 import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-import { createReducer } from '../utils';
 
 const defaultState = Map({
-  view: types.VIEW_SCANNED_FILES,
+  abbView: false,
   loading: false,
-  import: false,
-  reloadGrid: false,
-  version: '',
-  allVersion: [],
-  selected: [],
-  editingMoleculeId: 0,
-  notification: ''
+  notification: '',
 });
 
-const ui = createReducer(defaultState, {
-  [types.CHANGE_VIEW]: (state, action) => state.set('view', action.view),
-  [types.GET_CURRENT_VERSION]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const { version, listVersion } = action.response;
-    let newState = state;
-
-    if (version) newState = newState.set('version', version);
-    if (listVersion) {
-      newState = newState.set('allVersion', fromJS(listVersion));
-      newState = newState.set('view', types.VIEW_FILE_STORAGE);
+export default function images(state = defaultState, action) {
+  switch (action.type) {
+    case types.TOGGLE_ABB_VIEW: {
+      const abbView = state.get('abbView');
+      return state.set('abbView', !abbView);
     }
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: state => state.set('reloadGrid', true),
-  [types.SET_LOADING]: state => state.set('loading', true),
-  [types.UNSET_LOADING]: state => state.set('loading', false),
-  [types.SET_IMPORT]: (state, action) => (
-    state.set('import', true).set('selected', action.data)
-  ),
-  [types.UNSET_IMPORT]: state => state.set('import', false),
-  [types.SET_NOTIFICATION]: (state, action) => state.set('notification', action.notification),
-  [types.RESET_NOTIFICATION]: state => state.set('notification', ''),
-  [types.SET_EDITING_MOLECULE_ID]: (state, action) => (
-    state.set('editingMoleculeId', action.moleculeId || 0)
-  ),
-});
-
-export default ui;
+    case types.SET_LOADING: {
+      return state.set('loading', true);
+    }
+    case types.UNSET_LOADING: {
+      return state.set('loading', false);
+    }
+    case types.SET_NOTIFICATION: {
+      return state.set('notification', action.notification);
+    }
+    case types.RESET_NOTIFICATION: {
+      return state.set('notification', '');
+    }
+    default:
+      return state;
+  }
+}
diff --git a/app/packs/src/apps/chemscanner/store/configureStore.js b/app/packs/src/apps/chemscanner/store/configureStore.js
index 288013572..1cecdf8aa 100644
--- a/app/packs/src/apps/chemscanner/store/configureStore.js
+++ b/app/packs/src/apps/chemscanner/store/configureStore.js
@@ -5,10 +5,14 @@ import api from 'src/apps/chemscanner/middleware/api';
 import chemdraw from 'src/apps/chemscanner/middleware/chemdraw';
 import rootReducer from 'src/apps/chemscanner/reducers/index';
 
-const configureStore = preloadedState => createStore(
-  rootReducer,
-  preloadedState,
-  applyMiddleware(thunk, chemdraw, api)
-);
+const configureStore = (preloadedState) => {
+  const store = createStore(
+    rootReducer,
+    preloadedState,
+    applyMiddleware(thunk, chemdraw, api)
+  );
+
+  return store;
+};
 
 export default configureStore;
diff --git a/app/packs/src/apps/chemscanner/utils.js b/app/packs/src/apps/chemscanner/utils.js
index 27d67029b..dd4efec2e 100644
--- a/app/packs/src/apps/chemscanner/utils.js
+++ b/app/packs/src/apps/chemscanner/utils.js
@@ -1,27 +1,13 @@
-/* eslint-disable no-prototype-builtins */
-import { fromJS } from 'immutable';
-
 export const generateExcelReactionRow = (reaction) => {
-  const {
-    reactants, reagents, solvents, products
-  } = reaction;
-
-  const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
-  const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
-
-  const reagentSmiles = reagents.concat(solvents).map(m => (
-    m.get('canoSmiles')
-  )).join('.');
+  const reactionSmiles = reaction.smi.split('>').map(smis => smis.split('.'));
+  reactionSmiles[1] = reactionSmiles[1].concat(
+    reaction.addedReagentsSmi || [],
+    reaction.addedSolventsSmi || []
+  );
 
-  const reactionSmiles = [
-    reactantSmiles,
-    reagentSmiles,
-    productSmiles,
-  ].join('>');
-
-  const reactantsSdf = reactants.map(m => m.get('mdl')).join('\n$$$$\n');
-  const reagentsSdf = reagents.map(m => m.get('mdl')).join('\n$$$$\n');
-  const productsSdf = products.map(m => m.get('mdl')).join('\n$$$$\n');
+  const reactantsSdf = reaction.reactants.map(m => m.mdl).join('\n$$$$\n');
+  const reagentsSdf = reaction.reagents.map(m => m.mdl).join('\n$$$$\n');
+  const productsSdf = reaction.products.map(m => m.mdl).join('\n$$$$\n');
 
   const assembleDesc = (arr, m, idx) => {
     if (!m.description) return arr;
@@ -32,8 +18,8 @@ export const generateExcelReactionRow = (reaction) => {
     ]);
   };
 
-  const reactantsDesc = reactants.reduce(assembleDesc, []).join('\n');
-  const productsDesc = products.reduce(assembleDesc, []).join('\n');
+  const reactantsDesc = reaction.reactants.reduce(assembleDesc, []).join('\n');
+  const productsDesc = reaction.products.reduce(assembleDesc, []).join('\n');
 
   const reactionSteps = reaction.steps.reduce((arr, step) => {
     const lines = ['description', 'temperature', 'time'].reduce((lineArr, prop) => {
@@ -45,13 +31,13 @@ export const generateExcelReactionRow = (reaction) => {
     }, []);
 
     lines.unshift(`step ${step.number}`);
-    lines.push(`  reagents: ${step.reagentSmiles.join(',')}`);
+    lines.push(`  reagents: ${step.reagents.join(',')}`);
 
     return arr.concat(lines);
   }, []).join('\n');
 
   return [
-    reactionSmiles,
+    reactionSmiles.map(smis => smis.join('.')).join('>'),
     reaction.temperature,
     reaction.yield,
     reaction.time,
@@ -68,12 +54,10 @@ export const generateExcelReactionRow = (reaction) => {
 export const generateExcelMoleculeRow = mol => ([
   mol.smi,
   mol.mdl,
-  mol.inchistring,
-  mol.inchikey,
   mol.description
 ]);
 
-export const extractMoleculeFromGroup = molGroup => molGroup.map(m => ({
+const extractMoleculeFromGroup = molGroup => molGroup.map(m => ({
   id: m.id,
   mdl: m.mdl,
   description: m.description,
@@ -100,63 +84,3 @@ export const extractReactionFromId = (reactions, rid) => {
   return extractReaction(reaction);
 };
 
-export const createReducer = (initialState, handlers) => (
-  function reducer(state = initialState, action) {
-    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.type](state, action);
-    }
-
-    return state;
-  }
-);
-
-export const sortMoleculesByClone = (molecules) => {
-  const cloneMap = {};
-  const cloneCountMap = {};
-
-  const rootMolecules = [];
-  const childrenMolecules = [];
-
-  molecules.forEach((m, idx) => {
-    const cloneFrom = m.get('cloneFrom');
-
-    if (cloneFrom) {
-      cloneMap[idx] = cloneFrom;
-      const count = cloneCountMap[cloneFrom] || 0;
-      cloneCountMap[cloneFrom] = count + 1;
-      childrenMolecules.push(m);
-    } else {
-      rootMolecules.push(m);
-    }
-  });
-
-  const newMolecules = new Array(molecules.size).fill(0);
-
-  let pos = 0;
-  const positionMap = {};
-  rootMolecules.forEach((m) => {
-    const extId = m.get('externalId');
-    newMolecules[pos] = m;
-    positionMap[extId] = pos;
-    pos += (cloneCountMap[extId] || 0) + 1;
-  });
-
-  const positionCountMap = {};
-  childrenMolecules.forEach((m) => {
-    const cloneFrom = m.get('cloneFrom');
-    pos = positionCountMap[cloneFrom] || 0;
-    newMolecules[positionMap[cloneFrom] + pos + 1] = m;
-    positionCountMap[cloneFrom] = pos + 1;
-  });
-
-  return fromJS(newMolecules);
-};
-
-export const isPngImage = (imageData) => {
-  const pngB64Begin = 'data:image/png;base64';
-  return RegExp(`${pngB64Begin},.*`).test(imageData);
-};
-
-export const isSvgImage = imageData => (
-  RegExp('.*<svg').test(imageData.slice(0, 200))
-);
diff --git a/app/packs/src/apps/commandAndControl/Navigation.js b/app/packs/src/apps/commandAndControl/Navigation.js
index 5cfa39253..34bd9a259 100644
--- a/app/packs/src/apps/commandAndControl/Navigation.js
+++ b/app/packs/src/apps/commandAndControl/Navigation.js
@@ -5,8 +5,6 @@ import UserAuth from 'src/components/navigation/UserAuth';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import UserActions from 'src/stores/alt/actions/UserActions';
 
-// import NavNewSession from '../libHome/NavNewSession';
-// import DocumentHelper from '../components/utils/DocumentHelper';
 import NavNewSession from 'src/components/navigation/NavNewSession';
 import DocumentHelper from 'src/utilities/DocumentHelper';
 
diff --git a/app/packs/src/apps/converter/ConverterAdmin.js b/app/packs/src/apps/converter/ConverterAdmin.js
index 249f6b134..af8bea3cc 100644
--- a/app/packs/src/apps/converter/ConverterAdmin.js
+++ b/app/packs/src/apps/converter/ConverterAdmin.js
@@ -5,15 +5,7 @@ import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-cl
 import ConverterApi from 'src/fetchers/ConverterFetcher';
 import GenericDSsFetcher from 'src/fetchers/GenericDSsFetcher';
 
-<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
 class ConverterAdmin extends Component {
-=======
-import ConverterApi from '../../components/fetchers/ConverterFetcher';
-import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
-
-class ConverterAdmin extends Component {
-
->>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
   constructor(props) {
     super(props);
     this.state = {
@@ -69,10 +61,7 @@ class ConverterAdmin extends Component {
 
       console.log(options?.client);
       this.setState({
-<<<<<<< HEAD:app/packs/src/apps/converter/ConverterAdmin.js
         // eslint-disable-next-line max-len
-=======
->>>>>>> converter for user:app/packs/src/admin/converter/ConverterAdmin.js
         profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
       });
     });
diff --git a/app/packs/src/apps/home/Home.js b/app/packs/src/apps/home/Home.js
index 8e433e005..2fb6e3e21 100644
--- a/app/packs/src/apps/home/Home.js
+++ b/app/packs/src/apps/home/Home.js
@@ -1,28 +1,162 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import { Grid, Row } from 'react-bootstrap';
+import Aviator from 'aviator';
+
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import initPublicRoutes from 'src/libHome/homeRoutes';
+
+import Navigation from 'src/libHome/Navigation';
+import Notifications from 'src/components/Notifications';
+import RepoEmbargo from 'src/repoHome/RepoEmbargo';
+import RepoCollection from 'src/repoHome/RepoCollection';
+import RepoHome from 'src/repoHome/RepoHome';
+import RepoPubl from 'src/repoHome/RepoPubl';
+import RepoReview from 'src/repoHome/RepoReview';
+import RepoAbout from 'src/repoHome/RepoAbout';
+import RepoContact from 'src/repoHome/RepoContact';
+import RepoDirective from 'src/repoHome/RepoDirective';
+import RepoNewsroom from 'src/repoHome/RepoNewsroom';
+import RepoNewsReader from 'src/repoHome/RepoNewsReader';
+import RepoNewsEditor from 'src/repoHome/RepoNewsEditor';
+import RepoHowTo from 'src/repoHome/RepoHowTo';
+import RepoHowToReader from 'src/repoHome/RepoHowToReader';
+import RepoHowToEditor from 'src/repoHome/RepoHowToEditor';
+
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import RStore from 'src/stores/alt/repo/stores/RStore';
+import RepoElementDetails from 'src/repoHome/RepoElementDetails';
+import NavFooter from 'src/libHome/NavFooter';
+import LoadingModal from 'src/apps/chemscanner/components/LoadingModal';
+
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import RepoGenericHub from 'src/repoHome/RepoGenericHub';
 
-import Navigation from 'src/components/navigation/Navigation'
-import WelcomeMessage from 'src/apps/home/WelcomeMessage';
 
 class Home extends Component {
   constructor(props) {
     super();
+    this.state = {
+      guestPage: null
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    RStore.listen(this.onChange);
+    PublicActions.initialize();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+    RStore.unlisten(this.onChange);
+  }
+
+  onChange(publicState) {
+    if ((publicState.guestPage && publicState.guestPage !== this.state.guestPage)
+    || (publicState.listType && publicState.listType !== this.state.listType)
+    || (publicState.searchOptions)) {
+      this.setState(prevState => ({
+        ...prevState, guestPage: publicState.guestPage, listType: publicState.listType
+      }));
+    }
+  }
+
+  renderGuestPage() {
+    switch (this.state.guestPage) {
+      case 'genericHub':
+        return <RepoGenericHub />;
+      case 'moleculeArchive':
+        return <RepoPubl listType="moleculeArchive" />;
+      case 'newseditor':
+        return <RepoNewsEditor />;
+      case 'newsreader':
+        return <RepoNewsReader />;
+      case 'newsroom':
+        return <RepoNewsroom />;
+      case 'howtoeditor':
+        return <RepoHowToEditor />;
+      case 'howtoreader':
+        return <RepoHowToReader />;
+      case 'howto':
+        return <RepoHowTo />;
+      case 'about':
+        return <RepoAbout />;
+      case 'contact':
+        return <RepoContact />;
+      case 'publications':
+        return <RepoPubl listType={this.state.listType || ''} />;
+      case 'review':
+        return <RepoReview />;
+      case 'collection':
+        return <RepoCollection />;
+      case 'embargo':
+        return <RepoEmbargo />;
+      case 'dataset':
+      case 'molecule':
+        return <RepoElementDetails />;
+      case 'home':
+        return <RepoHome />;
+      case 'welcome':
+        return <RepoHome />;
+      case 'directive':
+        return <RepoDirective />;
+      default:
+        return <RepoHome />;
+    }
+  }
+
+  renderNavFooter() {
+    switch (this.state.guestPage) {
+      case 'publications':
+      case 'review':
+      case 'embargo':
+      case 'newseditor':
+      case 'newsreader':
+      case 'newsroom':
+      case 'howtoeditor':
+      case 'howtoreader':
+      case 'howto':
+        return <span />;
+      default:
+        return <NavFooter />;
+    }
   }
 
   render() {
     return (
       <div>
-        <Grid fluid>
-          <Row className="card-navigation">
-            <Navigation isHidden />
-          </Row>
-          <Row className="card-content">
-            <WelcomeMessage />
-          </Row>
-        </Grid>
+        <div>
+          <Grid fluid>
+            <Row className="card-navigation">
+              <Navigation />
+              <Notifications />
+            </Row>
+            <Row style={{ margin: '10px' }}>
+              {this.renderGuestPage()}
+            </Row>
+          </Grid>
+          {this.renderNavFooter()}
+        </div>
+        <LoadingModal />
       </div>
     );
   }
 }
 
-export default Home;
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('Home');
+  if (domElement) {
+    ReactDOM.render(
+      <DndProvider backend={HTML5Backend}>
+        <Home />
+      </DndProvider>,
+      domElement
+    );
+    initPublicRoutes();
+    Aviator.dispatch();
+  }
+});
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 619fac309..2e298b34f 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -15,17 +15,10 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import UserActions from 'src/stores/alt/actions/UserActions';
 import Calendar from 'src/components/calendar/Calendar';
 import SampleTaskInbox from 'src/components/sampleTaskInbox/SampleTaskInbox';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import Aviator from 'aviator';
 import { RepoReviewModal, RepoCommentModal } from 'repo-review-ui';
-import { FlowViewerModal } from 'chem-generic-ui';
-import alt from './alt';
-import initRoutes from './routes';
-import ReviewActions from './actions/ReviewActions';
-import ReviewStore from './stores/ReviewStore';
-import ProgressModal from './common/ProgressModal';
-import ContactEmail from './chemrepo/core/ContactEmail';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';
+import ContactEmail from 'src/components/chemrepo/core/ContactEmail';
 
 class App extends Component {
   constructor(_props) {
diff --git a/app/packs/src/apps/mydb/collections/CollectionSubtree.js b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
index aa82675d3..6c1150b03 100644
--- a/app/packs/src/apps/mydb/collections/CollectionSubtree.js
+++ b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
@@ -9,7 +9,7 @@ import CollectionActions from 'src/stores/alt/actions/CollectionActions';
 import UserInfos from 'src/apps/mydb/collections/UserInfos';
 import GatePushBtn from 'src/components/common/GatePushBtn';
 import { collectionShow, scollectionShow } from 'src/utilities/routesUtils';
-import { CollectionDesc } from '../libHome/RepoCommon';
+import { CollectionDesc } from 'src/repoHome/RepoCommon';
 
 const labeling = (label) => {
   if (typeof (label) === 'string' && (label.startsWith('Reviewing') || label.startsWith('Element To Review') || label.startsWith('Reviewed'))) {
diff --git a/app/packs/src/apps/mydb/collections/CollectionTree.js b/app/packs/src/apps/mydb/collections/CollectionTree.js
index a8fb7f02a..8c73ad695 100644
--- a/app/packs/src/apps/mydb/collections/CollectionTree.js
+++ b/app/packs/src/apps/mydb/collections/CollectionTree.js
@@ -260,6 +260,60 @@ export default class CollectionTree extends React.Component {
     }
   }
 
+  // For Repository
+  publicRoots(roots, preservePublic) {
+    let newRoots =[]
+    roots.forEach((root) => {
+      if(preservePublic) {
+        if (root.is_public) newRoots.push(root)
+      } else {
+        if (!root.is_public) newRoots.push(root)
+      }
+    })
+
+    return newRoots
+  }
+
+
+  // For Repository
+  publicSubtrees() {
+    let {syncInRoots, syncChemotionVisible} = this.state
+    syncInRoots = this.removeOrphanRoots(syncInRoots)
+    syncInRoots = this.publicRoots(syncInRoots, true)
+
+    let orderedRoots = []
+    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
+      syncInRoots[0].children.map((e,idx) => {
+        if (e.label.match(/hemotion/) ) {
+          orderedRoots[0] = e;
+          orderedRoots[0].label = 'Chemotion';
+        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
+          orderedRoots[1] = e;
+        } else if (e.label.match(/Published Elements/)) {
+          orderedRoots[2] = e
+          orderedRoots[2].label = 'My Published Elements'
+        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
+        else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }
+        else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e  }
+        else {orderedRoots[idx+10] = e  }
+      })
+    }
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div className={"title title-public " } style={{backgroundColor:'white'}}
+        >
+        </div>
+      </div>
+    )
+
+    return this.subtrees(orderedRoots, subTreeLabels,
+                         true, syncChemotionVisible)
+  }
+
   render() {
     const { ownCollectionVisible } = this.state;
 
@@ -268,22 +322,25 @@ export default class CollectionTree extends React.Component {
     return (
       <div>
         <div className="tree-view">
-          {this.collectionManagementButton()}
+        <div className="tree-wrapper">
+            {this.publicSubtrees()}
+          </div>
+
           <OverlayTrigger placement="top" delayShow={1000} overlay={colVisibleTooltip}>
             <div
               className="title"
               style={{ backgroundColor: 'white' }}
               onClick={() => this.handleSectionToggle('ownCollectionVisible')}
             >
-              <i className="fa fa-list" /> &nbsp;&nbsp; Collections
+              <i className="fa fa-list" /> &nbsp;&nbsp; My Collections
             </div>
           </OverlayTrigger>
         </div>
         <div className="tree-wrapper" style={{ display: ownCollectionDisplay }}>
           {this.lockedSubtrees()}
-          {this.unsharedSubtrees()}
+          {/* {this.unsharedSubtrees()} */}
         </div>
-        <div className="tree-wrapper">
+        {/* <div className="tree-wrapper">
           {this.sharedSubtrees()}
         </div>
         <div className="tree-wrapper">
@@ -291,7 +348,7 @@ export default class CollectionTree extends React.Component {
         </div>
         <div className="tree-wrapper">
           {this.remoteSyncInSubtrees()}
-        </div>
+        </div> */}
       </div>
     );
   }
diff --git a/app/packs/src/apps/mydb/elements/details/ElementDetailSortTab.js b/app/packs/src/apps/mydb/elements/details/ElementDetailSortTab.js
index 0651d50ed..be7cfac23 100644
--- a/app/packs/src/apps/mydb/elements/details/ElementDetailSortTab.js
+++ b/app/packs/src/apps/mydb/elements/details/ElementDetailSortTab.js
@@ -11,7 +11,7 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import UserActions from 'src/stores/alt/actions/UserActions';
 import TabLayoutContainer from 'src/apps/mydb/elements/tabLayout/TabLayoutContainer';
 import UIStore from 'src/stores/alt/stores/UIStore';
-import CollectionActions from '../../../../stores/alt/actions/CollectionActions';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
 import { filterTabLayout, getArrayFromLayout } from 'src/utilities/CollectionTabsHelper';
 
 const getNodeText = (node) => {
diff --git a/app/packs/src/apps/mydb/elements/details/ElementDetails.js b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
index ab7206250..f4b56f460 100644
--- a/app/packs/src/apps/mydb/elements/details/ElementDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
@@ -19,7 +19,7 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import WellplateDetails from 'src/apps/mydb/elements/details/wellplates/WellplateDetails';
 import { Tabs, Tab, Label, Button } from 'react-bootstrap';
 
-import { getPublicationId } from './chemrepo/publication-utils';
+import { getPublicationId } from 'src/components/chemrepo/publication-utils';
 
 const tabInfoHash = {
   metadata: {
diff --git a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
index 7aa4c62ba..d0521bb86 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
@@ -20,7 +20,7 @@ import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import CitationPanel from 'src/apps/mydb/elements/details/literature/CitationPanel';
 import { CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';
 
-import CitationTable from './CitationTable';
+// import CitationTable from 'src/apps/mydb/elements/details/reactions/analysesTab/CitationTable';
 
 const Cite = require('citation-js');
 require('@citation-js/plugin-isbn');
diff --git a/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js b/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
index 0fc8f8e34..b4c0b8fc6 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/LiteratureCommon.js
@@ -28,7 +28,7 @@ const RefByUserInfo = ({ info, litype }) => {
 };
 
 
-const Cite = require('citation-js');
+// const Cite = require('citation-js');
 
 const LiteralType = ({ val, handleInputChange, disabled = false }) => (
   <FormControl
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 951ec43e8..b5d961f5f 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -21,6 +21,7 @@ import ReactionDetailsProperties from 'src/apps/mydb/elements/details/reactions/
 import GreenChemistry from 'src/apps/mydb/elements/details/reactions/greenChemistryTab/GreenChemistry';
 import Utils from 'src/utilities/Functions';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import UserStore from 'src/stores/alt/stores/UserStore';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import { setReactionByType } from 'src/apps/mydb/elements/details/reactions/ReactionDetailsShare';
@@ -43,8 +44,8 @@ import CommentModal from 'src/components/common/CommentModal';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
 // For REPO
-import RepositoryActions from './actions/RepositoryActions';
-import PublishReactionModal from './PublishReactionModal';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+import PublishReactionModal from 'src/components/chemrepo/PublishReactionModal';
 import {
   PublishedTag,
   OrigElnTag,
@@ -53,10 +54,10 @@ import {
   ReviewPublishBtn,
   validateMolecule,
   validateYield
-} from './PublishCommon';
-import ReactionDetailsRepoComment from './ReactionDetailsRepoComment';
-import { contentToText } from './utils/quillFormat';
-import HelpInfo from './common/HelpInfo';
+} from 'src/components/chemrepo/PublishCommon';
+import ReactionDetailsRepoComment from 'src/components/chemrepo/ReactionDetailsRepoComment';
+import { contentToText } from 'src/utilities/quillFormat';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 export default class ReactionDetails extends Component {
   constructor(props) {
@@ -415,7 +416,7 @@ export default class ReactionDetails extends Component {
   }
 
   reactionHeader(reaction) {
-    const hasChanged = reaction.changed ? '' : 'none';
+    let hasChanged = reaction.changed ? '' : 'none';
     const titleTooltip = formatTimeStampsOfElement(reaction || {});
 
     const { currentCollection } = UIStore.getState();
@@ -630,7 +631,6 @@ export default class ReactionDetails extends Component {
           {this.productData(reaction)}
         </Tab>
       ),
-/*
       green_chemistry: (
         <Tab eventKey="green_chemistry" title="Green Chemistry" key={`green_chem_${reaction.id}`}>
           {
@@ -650,7 +650,6 @@ export default class ReactionDetails extends Component {
           />
         </Tab>
       )
-*/
     };
 
     const tabTitlesMap = {
@@ -667,6 +666,7 @@ export default class ReactionDetails extends Component {
       stb.push(value);
     });
 
+    // For REPO
     let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
     segmentKlasses =
       segmentKlasses.filter(s => s.element_klass && s.element_klass.name === reaction.type);
@@ -680,6 +680,7 @@ export default class ReactionDetails extends Component {
       }
     });
 
+
     const { showPublishReactionModal } = this.state;
     const submitLabel = (reaction && reaction.isNew) ? 'Create' : 'Save';
     const exportButton = (reaction && reaction.isNew) ? null : <ExportSamplesBtn type="reaction" id={reaction.id} />;
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
index 3d2dd5b8e..280009069 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
@@ -21,7 +21,7 @@ import EditableTable from 'src/components/lineChart/EditableTable';
 import { permitOn } from 'src/components/common/uis';
 
 // For REPO
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 export default class ReactionDetailsMainProperties extends Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js b/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
index 293511cec..fce129f6f 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
@@ -13,7 +13,7 @@ import StringTag from 'src/apps/mydb/elements/details/reactions/propertiesTab/St
 import { solventsTL } from 'src/utilities/reactionPredefined';
 import OlsTreeSelect from 'src/components/OlsComponent';
 import { permitOn } from 'src/components/common/uis';
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 export default class ReactionDetailsProperties extends Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
index 423fc3881..816980598 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
@@ -12,7 +12,7 @@ import { defaultMultiSolventsSmilesOptions } from 'src/components/staticDropdown
 import { ionic_liquids } from 'src/components/staticDropdownOptions/ionic_liquids';
 import { reagents_kombi } from 'src/components/staticDropdownOptions/reagents_kombi';
 import { permitOn } from 'src/components/common/uis';
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 const MaterialGroup = ({
   materials, materialGroup, deleteMaterial, onChange,
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
index 8db338ca6..1dc47c873 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
@@ -7,7 +7,7 @@ import {
 import 'moment-precise-range-plugin';
 import Clipboard from 'clipboard';
 import { permitOn } from 'src/components/common/uis';
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 export default class ReactionDetailsDuration extends Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
index 6336feeac..3e4c4edb8 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
@@ -11,7 +11,7 @@ import Sample from 'src/models/Sample';
 import { observationPurification, solventsTL } from 'src/utilities/reactionPredefined';
 import { permitOn } from 'src/components/common/uis';
 import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 function dummy() { return true; }
 
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
index 7538534a6..5ee6f11fb 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
@@ -27,7 +27,7 @@ import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 import TextTemplateStore from 'src/stores/alt/stores/TextTemplateStore';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 
-import HelpInfo from '../components/common/HelpInfo';
+import HelpInfo from 'src/components/common/HelpInfo';
 
 export default class ReactionDetailsScheme extends Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reports/Previews.js b/app/packs/src/apps/mydb/elements/details/reports/Previews.js
index 4e869cb02..f919cb924 100644
--- a/app/packs/src/apps/mydb/elements/details/reports/Previews.js
+++ b/app/packs/src/apps/mydb/elements/details/reports/Previews.js
@@ -6,7 +6,7 @@ import SectionSiSynthesis from 'src/apps/mydb/elements/details/reports/SectionSi
 import SectionSpectrum from 'src/apps/mydb/elements/details/reports/SectionSpectrum';
 import SectionReactionList from 'src/apps/mydb/elements/details/reports/SectionReactionList';
 import SectionSiSynthesisStdRxn from 'src/apps/mydb/elements/details/reports/SectionSiSynthesisStdRxn';
-import SectionDoiList from './SectionDoiList';
+import SectionDoiList from 'src/components/report/SectionDoiList';
 
 const objToKeyValPairs = (obj = []) => (
   obj.reduce((ob, { text, checked }) => {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index eed6e19bc..29c17079a 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -77,9 +77,11 @@ import CommentModal from 'src/components/common/CommentModal';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
 // For REPO
-import RepositoryActions from './actions/RepositoryActions';
-import PublishSampleModal from './PublishSampleModal';
-import RepoXvialButton from './common/RepoXvialButton';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+import PublishSampleModal from 'src/components/chemrepo/PublishSampleModal';
+import MolViewerBtn from 'src/components/viewer/MolViewerBtn';
+import MolViewerSet from 'src/components/viewer/MolViewerSet';
+// import RepoXvialButton from 'src/components/chemrepo/common/RepoXvialButton';
 import {
   PublishedTag,
   OrigElnTag,
@@ -87,9 +89,9 @@ import {
   PublishBtn,
   ReviewPublishBtn,
   validateMolecule,
-} from './PublishCommon';
-import SampleDetailsRepoComment from './SampleDetailsRepoComment';
-import { permitOn } from './common/uis';
+} from 'src/components/chemrepo/PublishCommon';
+import SampleDetailsRepoComment from 'src/components/chemrepo/SampleDetailsRepoComment';
+import { permitOn } from 'src/components/common/uis';
 
 const MWPrecision = 6;
 
@@ -571,6 +573,7 @@ export default class SampleDetails extends React.Component {
     }
   }
 
+
   sampleFooter() {
     const { sample, startExport } = this.state;
     const belongToReaction = sample.belongTo && sample.belongTo.type === 'reaction';
@@ -587,86 +590,16 @@ export default class SampleDetails extends React.Component {
       </Button>
     );
 
-    const decoupleCb =
-    permitOn(sample) && this.enableSampleDecoupled ? (
-        <Checkbox
-          className="sample-header-decouple"
-          checked={sample.decoupled}
-          onChange={(e) => this.decoupleChanged(e)}
-        >
-          Decoupled
-        </Checkbox>
-      ) : null;
-
-    const isPub = !!((sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.publication && sample.tag.taggable_data.publication.published_at));
+    const saveAndCloseBtn = belongToReaction && !sample.isNew ? this.saveBtn(sample, true) : null;
     return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
-          <span><i className="icon-sample" />{sample.title()}</span>
-        </OverlayTrigger>
-        <ConfirmClose el={sample} />
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveCloseSample">Save and Close Sample</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit(true)}
-            style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !permitOn(sample)}
-          >
-            <i className="fa fa-floppy-o" />
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveSample">Save Sample</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit()}
-            style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !permitOn(sample)}
-          >
-            <i className="fa fa-floppy-o" />
-          </Button>
-        </OverlayTrigger>
-        {copyBtn}
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
-        >
-          <Button
-            bsStyle="info"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.props.toggleFullScreen()}
-          >
-            <i className="fa fa-expand" />
-          </Button>
-        </OverlayTrigger>
-        <PrintCodeButton element={sample} />
-        {sample.isNew ? <FastInput fnHandle={this.handleFastInput} /> : null}
-        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
-        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
-        {decoupleCb}
-        <div style={{ display: 'inline-block', marginLeft: '10px' }}>
-          <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-          {colLabel}
-          <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
-          <PubchemLabels element={sample} />
-          <OrigElnTag element={sample} />
-          <PublishedTag element={sample} fnUnseal={this.unseal} />
-          <LabelPublication element={sample} />
-          {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
-        </div>
-        <ShowUserLabels element={sample} />
-      </div>
+      <ButtonToolbar>
+        <Button bsStyle="primary" onClick={() => DetailActions.close(sample)}>
+          Close
+        </Button>
+        {this.saveBtn(sample)}
+        {saveAndCloseBtn}
+        {downloadAnalysesBtn}
+      </ButtonToolbar>
     );
   }
 
@@ -1239,11 +1172,22 @@ export default class SampleDetails extends React.Component {
             </Button>
           </OverlayTrigger>
           <PrintCodeButton element={sample} />
+          <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
+          <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
           {sample.isNew
             ? null
             : <OpenCalendarButton isPanelHeader eventableId={sample.id} eventableType="Sample" />}
           {inventorySample}
           {decoupleCb}
+          <div style={{ display: 'inline-block', marginLeft: '10px' }}>
+            <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+            {colLabel}
+            <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+            <PubchemLabels element={sample} />
+            <OrigElnTag element={sample} />
+            <PublishedTag element={sample} fnUnseal={this.unseal} />
+            <LabelPublication element={sample} />
+          </div>
         </div>
         <ShowUserLabels element={sample} />
       </div>
@@ -1770,20 +1714,6 @@ export default class SampleDetails extends React.Component {
 
     let { showPublishSampleModal } = this.state
 
-    for (let j = 0; j < XTabs.count; j += 1) {
-      if (XTabs[`on${j}`](sample)) {
-        const NoName = XTabs[`content${j}`];
-        tabContentsMap[`xtab_${j}`] = (
-          <Tab eventKey={`xtab_${j}`} key={`xtab_${j}`} title={XTabs[`title${j}`]} >
-            <ListGroupItem style={{ paddingBottom: 20 }} >
-              <NoName sample={sample} />
-            </ListGroupItem>
-          </Tab>
-        );
-        tabTitlesMap[`xtab_${j}`] = XTabs[`title${j}`];
-      }
-    }
-
     addSegmentTabs(sample, this.handleSegmentsChange, tabContentsMap);
     const stb = [];
     const tabContents = [];
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 16fc69d80..85b71df82 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -17,10 +17,10 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import { chmoConversions } from 'src/components/OlsComponent';
 import { previewContainerImage } from 'src/utilities/imageHelper';
-import MolViewerListBtn from './viewer/MolViewerListBtn';
-import MolViewerSet from './viewer/MolViewerSet';
-import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-import MatrixCheck from './common/MatrixCheck';
+import MolViewerListBtn from 'src/components/viewer/MolViewerListBtn';
+import MolViewerSet from 'src/components/viewer/MolViewerSet';
+import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
+import MatrixCheck from 'src/components/common/MatrixCheck';
 
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
index 5d4d38c8f..e2bb1e11e 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -17,7 +17,7 @@ import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElemen
 import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 
 // For REPO
-import { permitOn } from './common/uis';
+import { permitOn } from 'src/components/common/uis';
 
 
 export default class SampleForm extends React.Component {
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTable.js b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
index b9bcf3b97..38f5a4163 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTable.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
@@ -21,7 +21,7 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import ElementsTableGroupedEntries from 'src/apps/mydb/elements/list/ElementsTableGroupedEntries';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
-import { stopEvent } from './utils/DomHelper';
+import { stopEvent } from 'src/utilities/DomHelper';
 
 export default class ElementsTable extends React.Component {
   constructor(props) {
@@ -304,10 +304,10 @@ export default class ElementsTable extends React.Component {
               style={
                 { textAlign: 'center', zIndex: 0 }
               }
-              onChange={event => this.handleNumberOfResultsChange(event, false)}
-              onBlur={event => this.handleNumberOfResultsChange(event, true)}
-              onKeyDown={event => this.handleKeyDown(event)}
-              value={ui.number_of_results ? ui.number_of_results : 0} />
+              onChange={(event) => this.handleNumberOfResultsChange(event, false)}
+              onBlur={(event) => this.handleNumberOfResultsChange(event, true)}
+              onKeyDown={(event) => this.handleKeyDown(event)}
+              value={ui.number_of_results ? ui.number_of_results : 0}
             />
           </InputGroup>
         </FormGroup>
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableEntries.js
index 7a252eba8..2b301663d 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableEntries.js
@@ -21,6 +21,9 @@ import CommentIcon from 'src/components/comments/CommentIcon';
 import PropTypes from 'prop-types';
 import Aviator from 'aviator';
 
+// for REPO
+import { PublishedTag } from 'src/components/chemrepo/PublishCommon';
+
 export function reactionRole(element) {
   let tooltip = null;
   if (element.type === 'reaction') {
@@ -157,6 +160,15 @@ function topSecretIcon(element) {
   return null;
 }
 
+const reactionPublished = (element) => {
+  if (element.type === 'reaction') {
+    return (
+      <PublishedTag element={element} />
+    );
+  }
+  return (<span />);
+};
+
 export default class ElementsTableEntries extends Component {
   constructor(props) {
     super(props);
@@ -402,6 +414,7 @@ export default class ElementsTableEntries extends Component {
                     {reactionVariations(element)}
                     <br />
                     {sampleMoleculeName}
+                    {reactionPublished(element)}
                     <CommentIcon commentCount={element.comment_count} />
                     <ElementCollectionLabels element={element} key={element.id} />
                     {sampleAnalysesLabels(element)}
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
index f97c9885f..2c41d4255 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -26,7 +26,7 @@ import SvgWithPopover from 'src/components/common/SvgWithPopover';
 import { ShowUserLabels } from 'src/components/UserLabels';
 import CommentIcon from 'src/components/comments/CommentIcon';
 
-import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
+import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';
 
 const buildFlattenSampleIds = (displayedMoleculeGroup) => {
   let flatIndex = 0;
diff --git a/app/packs/src/apps/mydb/routes.js b/app/packs/src/apps/mydb/routes.js
index 93e87d334..d5dab1471 100644
--- a/app/packs/src/apps/mydb/routes.js
+++ b/app/packs/src/apps/mydb/routes.js
@@ -1,7 +1,6 @@
 import * as routesUtils from 'src/utilities/routesUtils';
 import { elementNames } from 'src/apps/generic/Utils';
 
-
 const routes = {
   '/': 'root',
   target: {
diff --git a/app/packs/src/components/CitationPanel.js b/app/packs/src/components/CitationPanel.js
index 07683ebd1..5e7f34317 100644
--- a/app/packs/src/components/CitationPanel.js
+++ b/app/packs/src/components/CitationPanel.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Panel, ButtonGroup, Button, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
 import { uniq } from 'lodash';
-import { Citation, literatureContent } from './LiteratureCommon';
-import { CitationType, CitationTypeMap, CitationTypeEOL } from './CitationType';
+import { Citation, literatureContent } from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import { CitationType, CitationTypeMap, CitationTypeEOL } from 'src/components/CitationType';
 
 const changeTypeBtn = (litype, updId, fn) => {
   const cands = CitationType.filter(e => e !== litype);
diff --git a/app/packs/src/components/CollectionTabsHelper.js b/app/packs/src/components/CollectionTabsHelper.js
deleted file mode 100644
index 83e623899..000000000
--- a/app/packs/src/components/CollectionTabsHelper.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Immutable from 'immutable';
-import { getElementSegments } from './utils/ElementUtils';
-
-const getVisibilityList = (layout, availableTabs, addInventoryTab) => {
-  const layoutKeys = Object.keys(layout);
-
-  if (addInventoryTab) {
-    layout.inventory = layoutKeys.length + 1;
-  }
-  const enabled = availableTabs.filter(val => layoutKeys.includes(val));
-  const leftover = availableTabs.filter(val => !layoutKeys.includes(val));
-  const visible = [];
-  let hidden = [];
-
-  enabled.forEach((key) => {
-    const order = layout[key];
-    if (order < 0) { hidden[Math.abs(order)] = key; }
-    if (order > 0) { visible[order] = key; }
-  });
-
-  leftover.forEach(key => hidden.push(key));
-
-  let first = null;
-  if (visible.length === 0) {
-    first = hidden.filter(n => n !== undefined)[0];
-    if (first) {
-      visible.push(first);
-    }
-  }
-  hidden = hidden.filter(n => n);
-  if (hidden.length === 0) {
-    hidden.push('hidden');
-  }
-  return {
-    visible: Immutable.List(visible.filter(n => n !== undefined)),
-    hidden: Immutable.List(hidden.filter(n => (n !== undefined && n !== first)))
-  };
-};
-
-const getArrayFromLayout = (layout, element, addInventoryTab, availableTabs = null ) => {
-  let layoutKeys = Object.keys(layout);
-  let segmentAvailableTabs = getElementSegments(element, layoutKeys);
-  availableTabs = [...availableTabs, ...segmentAvailableTabs];
-  return getVisibilityList(layout, availableTabs, addInventoryTab);
-};
-
-const filterTabLayout = (layoutState) => {
-  const { visible, hidden } = layoutState;
-  const layout = {};
-
-  visible.forEach((value, index) => {
-    layout[value] = (index + 1);
-  });
-  hidden.filter(val => val !== 'hidden').forEach((value, index) => {
-    layout[value] = (-index - 1);
-  });
-  return layout;
-};
-
-export { getArrayFromLayout, filterTabLayout };
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
deleted file mode 100644
index 4350fd7bf..000000000
--- a/app/packs/src/components/CollectionTree.js
+++ /dev/null
@@ -1,423 +0,0 @@
-import React from 'react';
-import { Button, OverlayTrigger, Badge, Glyphicon, Tooltip } from 'react-bootstrap';
-import update from 'immutability-helper';
-import CollectionStore from './stores/CollectionStore';
-import CollectionActions from './actions/CollectionActions';
-import CollectionSubtree from './CollectionSubtree';
-import UIActions from './actions/UIActions';
-import InboxActions from './actions/InboxActions';
-import LoadingActions from './actions/LoadingActions';
-import UIStore from './stores/UIStore';
-import ElementStore from './stores/ElementStore';
-import InboxStore from './stores/InboxStore';
-import Xdiv from './extra/CollectionTreeXdiv';
-import UserInfos from './UserInfos';
-
-import DeviceBox from './inbox/DeviceBox';
-import UnsortedBox from './inbox/UnsortedBox';
-
-const colVisibleTooltip = <Tooltip id="col_visible_tooltip">Toggle My Collections</Tooltip>;
-
-export default class CollectionTree extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const collecState = CollectionStore.getState();
-    const inboxState = InboxStore.getState();
-
-    this.state = {
-      unsharedRoots: collecState.unsharedRoots,
-      sharedRoots: collecState.sharedRoots,
-      remoteRoots: collecState.remoteRoots,
-      lockedRoots: collecState.lockedRoots,
-      syncInRoots: collecState.syncInRoots,
-      ownCollectionVisible: true,
-      sharedWithCollectionVisible: false,
-      sharedToCollectionVisible: false,
-      syncCollectionVisible: false,
-      inbox: inboxState.inbox,
-      numberOfAttachments: inboxState.numberOfAttachments,
-      inboxVisible: false,
-      syncChemotionVisible: true,
-    }
-
-    this.onChange = this.onChange.bind(this);
-    this.onClickInbox = this.onClickInbox.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onChange);
-    InboxStore.listen(this.onChange);
-    //CollectionActions.fetchGenericEls();
-    CollectionActions.fetchLockedCollectionRoots();
-    // CollectionActions.fetchUnsharedCollectionRoots();
-    CollectionActions.fetchSharedCollectionRoots();
-    CollectionActions.fetchRemoteCollectionRoots();
-    CollectionActions.fetchSyncInCollectionRoots();
-    InboxActions.fetchInboxCount();
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onChange);
-    UIStore.listen(this.onChange);
-    InboxStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(state);
-  }
-
-  onClickInbox() {
-    const { inboxVisible, inbox } = this.state;
-    this.setState({ inboxVisible: !inboxVisible });
-    if (!inbox.children) {
-      LoadingActions.start();
-      InboxActions.fetchInbox();
-    }
-  }
-
-  refreshInbox() {
-    LoadingActions.start();
-    InboxActions.fetchInbox();
-  }
-
-  lockedSubtrees() {
-    const roots = this.state.lockedRoots;
-
-    return this.subtrees(roots, null, false);
-  }
-
-  removeOrphanRoots(roots) {
-    let newRoots =[]
-    roots.forEach((root) => {
-      if (root.children.length > 0) newRoots.push(root)
-    })
-
-    return newRoots;
-  }
-
-  publicRoots(roots, preservePublic) {
-    let newRoots =[]
-    roots.forEach((root) => {
-      if(preservePublic) {
-        if (root.is_public) newRoots.push(root)
-      } else {
-        if (!root.is_public) newRoots.push(root)
-      }
-    })
-
-    return newRoots
-  }
-
-  unsharedSubtrees() {
-    let roots = this.state.unsharedRoots;
-    // roots = roots.filter(function(item) { return !item.isNew})
-
-    // return this.subtrees(roots, null, false);
-    return null
-  }
-
-  sharedSubtrees() {
-    let {sharedRoots, sharedToCollectionVisible} = this.state
-    sharedRoots = this.removeOrphanRoots(sharedRoots)
-
-    let labelledRoots = sharedRoots.map(e => {
-      return update(e, {label: {$set:
-        <span>{this.labelRoot('shared_to', e)}</span>
-      }})
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div className="title" style={{backgroundColor:'white'}}
-             onClick={() => this.setState({sharedToCollectionVisible: !sharedToCollectionVisible})}>
-          <i className="fa fa-share-alt share-icon" />&nbsp;&nbsp;
-          My shared collections
-        </div>
-      </div>
-    )
-    return this.subtrees(labelledRoots, subTreeLabels,
-                         false, sharedToCollectionVisible)
-  }
-
-  remoteSubtrees() {
-    let {remoteRoots, sharedWithCollectionVisible} = this.state
-    remoteRoots = this.removeOrphanRoots(remoteRoots)
-
-    let labelledRoots = remoteRoots.map(e => {
-      return update(e, {label: {$set:
-        <span>
-          {this.labelRoot('shared_by',e)}
-          {' '}
-          {this.labelRoot('shared_to',e)}
-        </span>
-      }})
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div id="shared-home-link" className="title" style={{backgroundColor:'white'}}
-             onClick={() => this.setState({sharedWithCollectionVisible: !sharedWithCollectionVisible})}>
-          <i className="fa fa-share-alt share-icon"/>
-          &nbsp;&nbsp;
-          Shared with me &nbsp;
-        </div>
-      </div>
-    )
-
-    return this.subtrees(labelledRoots, subTreeLabels,
-                         false, sharedWithCollectionVisible)
-  }
-
-
-  inboxSubtrees() {
-    const { inbox } = this.state;
-
-    let boxes = '';
-    if (inbox.children) {
-      inbox.children.sort((a, b) => {
-        if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
-      });
-      boxes = inbox.children.map((deviceBox) => {
-        return (
-          <DeviceBox key={`box_${deviceBox.id}`} device_box={deviceBox} />
-        );
-      });
-    }
-
-    return (
-      <div className="tree-view">
-        {boxes}
-        {inbox.unlinked_attachments
-          ? <UnsortedBox key="unsorted_box" unsorted_box={inbox.unlinked_attachments} />
-          : ''
-        }
-      </div>
-    );
-  }
-
-  remoteSyncInSubtrees() {
-    let {syncInRoots, syncCollectionVisible} = this.state
-    syncInRoots = this.removeOrphanRoots(syncInRoots)
-    syncInRoots = this.publicRoots(syncInRoots, false)
-
-    let labelledRoots = syncInRoots.map(e => {
-      return update(e, {label: {$set:
-        <span>
-          {this.labelRoot('shared_by', e)}
-          {' '}
-          {this.labelRoot('shared_to', e)}
-        </span>
-      }})
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div id="synchron-home-link" className="title" style={{backgroundColor:'white'}}
-             onClick={() => this.setState({syncCollectionVisible: !syncCollectionVisible})}>
-          <i className="fa fa-share-alt"/>&nbsp;&nbsp;
-          Synchronized with me &nbsp;
-        </div>
-      </div>
-    )
-
-    return this.subtrees(labelledRoots, subTreeLabels,
-                         false, syncCollectionVisible)
-  }
-
-  publicSubtrees() {
-    let {syncInRoots, syncChemotionVisible} = this.state
-    syncInRoots = this.removeOrphanRoots(syncInRoots)
-    syncInRoots = this.publicRoots(syncInRoots, true)
-
-    let orderedRoots = []
-    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
-      syncInRoots[0].children.map((e,idx) => {
-        if (e.label.match(/hemotion/) ) {
-          orderedRoots[0] = e;
-          orderedRoots[0].label = 'Chemotion';
-        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
-          orderedRoots[1] = e;
-        } else if (e.label.match(/Published Elements/)) {
-          orderedRoots[2] = e
-          orderedRoots[2].label = 'My Published Elements'
-        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
-        else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }
-        else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e  }
-        else {orderedRoots[idx+10] = e  }
-      })
-    }
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div className={"title title-public " } style={{backgroundColor:'white'}}
-              // onClick={() => this.setState({syncChemotionVisible: !syncChemotionVisible})}
-        >
-        </div>
-      </div>
-    )
-
-    return this.subtrees(orderedRoots, subTreeLabels,
-                         true, syncChemotionVisible)
-  }
-
-  labelRoot(sharedToOrBy, rootCollection) {
-    let shared = rootCollection[sharedToOrBy]
-    if (!shared) return <span />
-
-    return(
-      <OverlayTrigger placement="bottom" overlay={UserInfos({users:[shared]})}>
-        <span>
-          &nbsp; {sharedToOrBy == 'shared_to' ? 'with' : 'by'}
-          &nbsp; {shared.initials}
-        </span>
-      </OverlayTrigger>
-    )
-  }
-
-  convertToSlug(name) {
-    return name.toLowerCase()
-  }
-
-  subtrees(roots, label, isRemote, visible = true) {
-    const { currentCollection, isSync } = UIStore.getState();
-
-    let subtrees = roots.map((root, index) => {
-      return  <CollectionSubtree
-                root={root}
-                key={index}
-                currentCollection={currentCollection}
-                isRemote={isRemote}
-              //  deSelectPublic={this.deSelectPublic}
-              />
-    })
-
-    let subtreesVisible = visible ? "" : "none"
-    return (
-      <div>
-        {label}
-        <div style={{display: subtreesVisible}}>
-          {subtrees}
-        </div>
-      </div>
-    )
-  }
-
-  collectionManagementButton() {
-    return (
-      <div className="take-ownership-btn" style={{ display: 'none' }} >
-        <Button id="col-mgnt-btn" bsSize="xsmall" bsStyle="danger"
-                onClick={() => this.handleCollectionManagementToggle()}>
-          <i className="fa fa-cog"></i>
-        </Button>
-      </div>
-    )
-  }
-
-  handleCollectionManagementToggle() {
-    UIActions.toggleCollectionManagement();
-    const {showCollectionManagement, currentCollection,isSync} = UIStore.getState();
-    if(showCollectionManagement) {
-      Aviator.navigate('/collection/management');
-    } else {
-      if( currentCollection == null || currentCollection.label == 'All' ) {
-        Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`);
-      } else {
-        Aviator.navigate(isSync
-          ? `/scollection/${currentCollection.id}/${this.urlForCurrentElement()}`
-          : `/collection/${currentCollection.id}/${this.urlForCurrentElement()}`);
-      }
-    }
-  }
-
-  urlForCurrentElement() {
-    const {currentElement} = ElementStore.getState();
-    if(currentElement) {
-      if(currentElement.isNew) {
-        return `${currentElement.type}/new`;
-      }
-      else{
-        return `${currentElement.type}/${currentElement.id}`;
-      }
-    }
-    else {
-      return '';
-    }
-  }
-
-  render() {
-    let {ownCollectionVisible, inboxVisible, inbox} = this.state
-    let extraDiv = [];
-    for (let j=0;j < Xdiv.count;j++){
-      let NoName = Xdiv["content"+j];
-      extraDiv.push(<NoName key={"Xdiv"+j} />);
-    }
-
-    const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';
-    const inboxDisplay = inboxVisible ? '' : 'none';
-
-    const myCollections = this.state.lockedRoots && this.state.lockedRoots.length > 0 ? (
-        <div className="tree-view">
-          {this.collectionManagementButton()}
-          <OverlayTrigger
-            placement="top"
-            delayShow={1000}
-            overlay={colVisibleTooltip}
-          >
-            <div
-              className="title"
-              style={{ backgroundColor: 'white' }}
-              onClick={() => this.setState({ownCollectionVisible: !ownCollectionVisible})}
-            >
-              <i className="fa fa-list" /> &nbsp;&nbsp; My Collections
-            </div>
-          </OverlayTrigger>
-        </div>
-    ) : <div />
-
-    return (
-      <div>
-        <div className="tree-wrapper">
-          {this.publicSubtrees()}
-        </div>
-        {myCollections}
-        <div className="tree-wrapper" style={{display: ownCollectionDisplay}}>
-          {this.lockedSubtrees()}
-          {this.unsharedSubtrees()}
-        </div>
-        <div className="tree-wrapper" style={{ display: 'none' }} >
-          {this.sharedSubtrees()}
-        </div>
-        <div className="tree-wrapper" style={{ display: 'none' }} >
-          {this.remoteSubtrees()}
-        </div>
-        <div className="tree-wrapper" style={{ display: 'none' }} >
-          {this.remoteSyncInSubtrees()}
-        </div>
-        {extraDiv.map((e)=>{return e})}
-        <div className="tree-view" style={{ display: 'none' }} >
-          <div className="title" style={{ backgroundColor: 'white' }}>
-            <i className="fa fa-inbox" onClick={() => this.onClickInbox()}> &nbsp; Inbox &nbsp;</i>
-            {
-              this.state.numberOfAttachments > 0 ? <Badge> {this.state.numberOfAttachments} </Badge> : ''
-            }
-            &nbsp;<Glyphicon bsSize="small" glyph="refresh" onClick={() => this.refreshInbox()} />
-            <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullInbox">Show larger Inbox</Tooltip>}>
-              <Button style={{ position: 'absolute', right: 0 }} bsSize="xsmall" onClick={InboxActions.toggleInboxModal}>
-                <i className="fa fa-expand" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-
-          </div>
-
-        </div>
-        <div className="tree-wrapper" style={{ display: inboxDisplay }}>
-          { this.inboxSubtrees() }
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementsTableEntries.js b/app/packs/src/components/ElementsTableEntries.js
deleted file mode 100644
index 4db3e7454..000000000
--- a/app/packs/src/components/ElementsTableEntries.js
+++ /dev/null
@@ -1,398 +0,0 @@
-import React, {Component} from 'react';
-import SVG from 'react-inlinesvg';
-import { Tooltip, OverlayTrigger, Table, Popover } from 'react-bootstrap';
-import { filter } from 'lodash';
-import ElementContainer from './ElementContainer'
-import ElementCheckbox from './ElementCheckbox';
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ElementAnalysesLabels from './ElementAnalysesLabels';
-import ArrayUtils from './utils/ArrayUtils';
-
-import UIStore from './stores/UIStore';
-import ElementStore from './stores/ElementStore';
-import KeyboardStore from './stores/KeyboardStore';
-
-import DragDropItemTypes from './DragDropItemTypes';
-import classnames from 'classnames';
-import XTdCont from './extra/ElementsTableEntriesXTdCont';
-import { elementShowOrNew } from './routesUtils';
-import SvgWithPopover from './common/SvgWithPopover';
-import UserStore from './stores/UserStore';
-import { PublishedTag } from './PublishCommon';
-
-const reactionPublished = (element) => {
-  if (element.type === 'reaction') {
-    return (
-      <PublishedTag element={element} />
-    );
-  }
-  return (<span />);
-};
-
-
-export default class ElementsTableEntries extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      keyboardElementIndex: null
-    }
-
-    this.entriesOnKeyDown = this.entriesOnKeyDown.bind(this)
-  }
-
-  componentDidMount() {
-    KeyboardStore.listen(this.entriesOnKeyDown)
-  }
-
-  componentWillUnmount() {
-    KeyboardStore.unlisten(this.entriesOnKeyDown)
-  }
-
-  entriesOnKeyDown(state) {
-    let context = state.context
-    const {elements} = this.props;
-
-    if (elements[0] == null || context != elements[0].type)
-      return false
-
-    let documentKeyDownCode = state.documentKeyDownCode
-    let {keyboardElementIndex} = this.state
-
-    switch(documentKeyDownCode) {
-      case 13: // Enter
-      case 39: // Right
-        if (keyboardElementIndex != null && elements[keyboardElementIndex] != null) {
-          this.showDetails(elements[keyboardElementIndex])
-        }
-        break
-
-      case 38: // Up
-        if (keyboardElementIndex > 0) {
-          keyboardElementIndex--
-        } else {
-          keyboardElementIndex = 0
-        }
-        break
-      case 40: // Down
-        if (keyboardElementIndex == null) {
-          keyboardElementIndex = 0
-        } else if (keyboardElementIndex < elements.length - 1){
-          keyboardElementIndex++
-        }
-
-        break
-    }
-    this.setState({keyboardElementIndex})
-  }
-
-  isElementChecked(element) {
-    let {checkedIds, uncheckedIds, checkedAll} = this.props.ui;
-    return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))
-      || ArrayUtils.isValInArray(checkedIds || [], element.id);
-  }
-
-  isElementSelected(element) {
-    const {currentElement} = this.props;
-    return (currentElement && currentElement.id == element.id);
-  }
-
-  isCurrEleDropType(type) {
-    const { currentElement } = ElementStore.getState();
-    const targets = {
-      sample: ['reaction', 'wellplate'],
-      reaction: ['research_plan'],
-      wellplate: ['screen'],
-      generalProcedure: ['reaction'],
-    };
-    return type && currentElement && targets[type].includes(currentElement.type)
-  }
-
-  showDetails(element) {
-    const { currentCollection, isSync } = UIStore.getState();
-    const { id, type } = element;
-    const uri = isSync
-      ? `/scollection/${currentCollection.id}/${type}/${id}`
-      : `/collection/${currentCollection.id}/${type}/${id}`;
-    Aviator.navigate(uri, { silent: true });
-    const e = { type, params: { collectionID: currentCollection.id } };
-    e.params[`${type}ID`] = id;
-
-    const genericEls = (UserStore.getState() && UserStore.getState().genericEls) || [];
-    if (genericEls.find(el => el.name == type)) {
-      e.klassType = 'GenericEl';
-    }
-
-    elementShowOrNew(e)
-  }
-
-  dragHandle(element) {
-    const sourceType = this.dropSourceType(element);
-    return (
-      <ElementContainer
-        key={element.id}
-        sourceType={sourceType}
-        element={element}
-      />
-    );
-  }
-
-  dropSourceType(el) {
-    let sourceType = '';
-    const isDropForSample =
-      el.type === 'sample' && this.isCurrEleDropType('sample');
-    const isDropForWellPlate =
-      el.type === 'wellplate' && this.isCurrEleDropType('wellplate');
-    const isDropForResearchPlan =
-      el.type === 'reaction' && this.isCurrEleDropType('reaction');
-    const isDropForGP = el.type === 'reaction' && el.role === 'gp' &&
-      this.isCurrEleDropType('generalProcedure');
-
-    if (isDropForSample) {
-      sourceType = DragDropItemTypes.SAMPLE;
-    } else if (isDropForWellPlate) {
-      sourceType = DragDropItemTypes.WELLPLATE;
-    } else if (isDropForResearchPlan) {
-      sourceType = DragDropItemTypes.REACTION;
-    } else if (isDropForGP) {
-      sourceType = DragDropItemTypes.GENERALPROCEDURE;
-    } else {
-      sourceType = DragDropItemTypes.ELEMENT;
-    }
-    return sourceType;
-  }
-
-  topSecretIcon(element) {
-    if (element.type == 'sample' && element.is_top_secret == true) {
-      const tooltip = (<Tooltip id="top_secret_icon">Top secret</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <i className="fa fa-user-secret"></i>
-        </OverlayTrigger>
-      )
-    }
-  }
-
-  previewColumn(element) {
-    const {ui} = this.props;
-    const classNames = classnames(
-      {
-        'molecule': element.type == 'sample'
-      },
-      {
-        'reaction': element.type == 'reaction'
-      },
-      {
-        'molecule-selected': element.type == 'sample' && this.isElementSelected(element)
-      },
-      {
-        'reaction': element.type == 'reaction' && this.isElementSelected(element)
-      },
-      {
-        'research_plan': element.type == 'research_plan'
-      }
-    );
-
-    let svgContainerStyle = {
-      verticalAlign: 'middle',
-      textAlign: 'center',
-      cursor: 'pointer'
-    };
-    let tdExtraContents = [];
-    for (let j=0;j < XTdCont.count;j++){
-      let NoName = XTdCont["content"+j];
-      tdExtraContents.push(<NoName element={element}/>);
-    }
-
-    const {showPreviews} = UIStore.getState();
-    const clickToShowDetails = e => this.showDetails(element);
-    if (showPreviews && (element.type == 'reaction')) {
-      return (
-        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-          <SVG src={element.svgPath} className={classNames} key={element.svgPath}/>
-          {tdExtraContents.map((e)=>{return e;})}
-        </td>
-      );
-    } else if (element.type === 'research_plan') {
-      if (element.thumb_svg !== 'not available') {
-        return (
-          <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-            <img src={`data:image/png;base64,${element.thumb_svg}`} alt="" style={{ cursor: 'pointer' }} />
-            {tdExtraContents.map((e) => { return e; })}
-          </td>
-        );
-      }
-      return (
-        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-          {tdExtraContents.map((e) => { return e; })}
-        </td>
-      );
-    }
-    return <td style={{display:'none', cursor: 'pointer'}} onClick={e => this.showDetails(element)}/>;
-  }
-
-  dragColumn(element) {
-    const {showDragColumn} = this.props;
-    if(showDragColumn) {
-      return (
-        <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
-          {this.dragHandle(element)}
-        </td>
-      );
-    } else {
-     return <td style={{display:'none'}}></td>;
-    }
-  }
-
-  reactionStatus(element) {
-    if (element.type === 'reaction' && element.status) {
-      const tooltip = (
-        <Tooltip id={`reaction_${element.status}`}>
-          {element.status} Reaction
-        </Tooltip>
-      );
-
-      let icon = null;
-      switch (element.status) {
-        case 'Planned':
-          icon = <i className="fa fa-clock-o c-bs-warning" />;
-          break;
-        case 'Running':
-          icon = (
-            <span
-              style={{ width: '12px', height: '14px', lineHeight: '14px' }}
-              className="fa fa-stack"
-            >
-              <i className="fa fa-stack-1x fa-hourglass-1 running-1 c-bs-warning" />
-              <i className="fa fa-stack-1x fa-hourglass-2 running-2 c-bs-warning" />
-              <i className="fa fa-stack-1x fa-hourglass-3 running-3 c-bs-warning" />
-            </span>
-          );
-          break;
-        case 'Done':
-          icon = <i className="fa fa-hourglass-3 c-bs-primary" />;
-          break;
-        case 'Analyses Pending':
-          icon = <i className="fa fa-ellipsis-h c-bs-primary" />;
-          break;
-        case 'Successful':
-          icon = <i className="fa fa-check-circle-o c-bs-success" />;
-          break;
-        case 'Not Successful':
-          icon = <i className="fa fa-times-circle-o c-bs-danger" />;
-          break;
-        default:
-          break;
-      }
-
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <div>{icon}</div>
-        </OverlayTrigger>
-      );
-    }
-  }
-
-  reactionRole(element) {
-    let tooltip = null;
-    if (element.type == 'reaction') {
-      switch (element.role) {
-        case "gp":
-          tooltip = <Tooltip id="roleTp">General Procedure</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-home c-bs-primary"/>
-            </OverlayTrigger>
-          )
-          break;
-        case "parts":
-          tooltip = <Tooltip id="roleTp">Parts of General Procedure</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-bookmark c-bs-success"/>
-            </OverlayTrigger>
-          )
-          break;
-        case "single":
-          tooltip = <Tooltip id="roleTp">Single</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-asterisk c-bs-danger"/>
-            </OverlayTrigger>
-          )
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  sampleAnalysesLabels(element) {
-    if (element.type == 'sample') {
-      return (
-        <ElementAnalysesLabels element={element} key={element.id+"_analyses"}/>
-      )
-    }
-  }
-
-  render() {
-    const {elements} = this.props;
-    let {keyboardElementIndex} = this.state
-
-    return (
-      <Table className="elements" bordered hover style={{borderTop: 0}}>
-        <tbody>
-        {elements.map((element, index) => {
-          const sampleMoleculeName = (element.type == 'sample') ? element.molecule.iupac_name: '';
-          let style = {};
-          if (this.isElementSelected(element) ||
-             (keyboardElementIndex != null && keyboardElementIndex == index)) {
-            style = {
-            color: '#000',
-            background: '#ddd',
-            border: '4px solid #337ab7'
-            }
-          }
-
-          return (
-            <tr key={index} style={style}>
-              <td width="30px">
-                <ElementCheckbox element={element} key={element.id} checked={this.isElementChecked(element)}/><br/>
-              </td>
-              <td onClick={e => this.showDetails(element)} style={{ cursor: 'pointer' }} width={element.type === 'research_plan' ? '280px': 'unset'}>
-                <div>
-                  {
-                      <SvgWithPopover
-                        hasPop={['reaction'].includes(element.type)}
-                        previewObject={{
-                          txtOnly: element.title(),
-                          isSVG: true,
-                          src: element.svgPath
-                        }}
-                        popObject={{
-                          title: (element.type === 'reaction' && element.short_label) || '',
-                          src: element.svgPath,
-                          height: '26vh',
-                          width: '52vw' }}
-                      />
-                  }
-                  {this.reactionStatus(element)}
-                  {' '}
-                  {this.reactionRole(element)}
-                  <br />
-                  {sampleMoleculeName}
-                  {reactionPublished(element)}
-                  <ElementCollectionLabels element={element} key={element.id}/>
-                  {this.sampleAnalysesLabels(element)}
-                  {this.topSecretIcon(element)}
-                </div>
-              </td>
-              {this.previewColumn(element)}
-              {this.dragColumn(element)}
-            </tr>
-          )
-        })}
-        </tbody>
-      </Table>
-    );
-  }
-}
diff --git a/app/packs/src/components/NMRiumDisplayer.js b/app/packs/src/components/NMRiumDisplayer.js
deleted file mode 100644
index 3fbd41e9f..000000000
--- a/app/packs/src/components/NMRiumDisplayer.js
+++ /dev/null
@@ -1,489 +0,0 @@
-import React from 'react';
-import base64 from 'base-64';
-import { Modal, Button } from 'react-bootstrap';
-
-import SpectraStore from './stores/SpectraStore';
-import SpectraActions from './actions/SpectraActions';
-import LoadingActions from './actions/LoadingActions';
-import UIFetcher from './fetchers/UIFetcher';
-import { parseBase64ToArrayBuffer } from './utils/FetcherHelper';
-import Attachment from './models/Attachment';
-import { SpectraOps } from './utils/quillToolbarSymbol';
-// import { FN } from '@complat/react-spectra-editor';
-
-export default class NMRiumDisplayer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...SpectraStore.getState(),
-      nmriumData: null,
-      is2D: false,
-    };
-
-    this.iframeRef = React.createRef();
-
-    this.onChange = this.onChange.bind(this);
-    this.receiveMessage = this.receiveMessage.bind(this);
-    this.handleNMRDisplayerLoaded = this.handleNMRDisplayerLoaded.bind(this);
-    this.sendJcampDataToNMRDisplayer = this.sendJcampDataToNMRDisplayer.bind(this);
-    this.loadNMRDisplayerHostInfo = this.loadNMRDisplayerHostInfo.bind(this);
-    this.requestDataToBeSaved = this.requestDataToBeSaved.bind(this);
-    this.requestPreviewImage = this.requestPreviewImage.bind(this);
-    this.savingNMRiumWrapperData = this.savingNMRiumWrapperData.bind(this);
-    this.saveOp = this.saveOp.bind(this);
-
-    this.findDisplayingSpectra = this.findDisplayingSpectra.bind(this);
-    this.findDisplayingSpectrumID = this.findDisplayingSpectrumID.bind(this);
-    this.buildPeaksBody = this.buildPeaksBody.bind(this);
-    this.readNMRiumData = this.readNMRiumData.bind(this);
-
-    this.loadNMRDisplayerHostInfo();
-  }
-
-  componentDidMount() {
-    SpectraStore.listen(this.onChange);
-
-    window.addEventListener('message', this.receiveMessage);
-  }
-
-  componentWillUnmount() {
-    SpectraStore.unlisten(this.onChange);
-  }
-
-  handleNMRDisplayerLoaded() {
-    const isIframeLoaded = true;
-    this.setState({
-      isIframeLoaded,
-    }, () => {
-      this.sendJcampDataToNMRDisplayer();
-    });
-  }
-
-  onChange(newState) {
-    const origState = this.state;
-    this.setState({ ...origState, ...newState });
-    this.sendJcampDataToNMRDisplayer();
-  }
-
-  getSpcInfo() {
-    const { spcInfos, spcIdx } = this.state;
-    const sis = spcInfos.filter((x) => x.idx === spcIdx);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-    return si;
-  }
-
-  loadNMRDisplayerHostInfo() {
-    UIFetcher.fetchNMRDisplayerHost().then((response) => {
-      const { protocol, host, port } = response;
-      let nmriumOrigin = `${protocol}://${host}`;
-      let nmriumWrapperHost = `${protocol}://${host}`;
-      if (port) {
-        nmriumOrigin = `${nmriumOrigin}:${port}`;
-        nmriumWrapperHost = `${nmriumWrapperHost}:${port}`;
-      }
-      this.setState({ nmriumWrapperHost, nmriumOrigin });
-    });
-  }
-
-  receiveMessage(event) {
-    const { nmriumWrapperHost, nmriumOrigin } = this.state;
-    if (nmriumWrapperHost === undefined || nmriumWrapperHost === '') {
-      return;
-    }
-
-    const is2DNMR = (data) => {
-      const spectra = data?.spectra || [];
-      return spectra.some((spc) => spc.info?.dimension === 2);
-    };
-
-    if (event.origin === nmriumOrigin && event.data) {
-      const eventData = event.data;
-      const eventDataType = eventData.type;
-
-      if (eventDataType === 'nmr-wrapper:data-change') {
-
-        const nmrWrapperActionType = eventData.data.actionType;
-        if (nmrWrapperActionType !== '') {
-          const nmriumData = eventData.data.data;
-          const { version } = nmriumData;
-          if (version > 3) {
-            this.setState({ nmriumData: nmriumData.data });
-          }
-          else {
-            this.setState({ nmriumData });
-          }
-        }
-      } else if (eventDataType === 'nmr-wrapper:action-response') {
-        const nmrWrapperDataType = eventData.data.type;
-        if (nmrWrapperDataType === 'exportSpectraViewerAsBlob') {
-          const blobData = eventData.data.data.blob;
-          this.savingNMRiumWrapperData(blobData);
-        }
-      }
-    }
-  }
-
-  requestDataToBeSaved() {
-    this.requestPreviewImage();
-  }
-
-  requestPreviewImage() {
-    const iframeCurrent = this.iframeRef.current;
-    if (!iframeCurrent) {
-      return;
-    }
-    const { contentWindow } = iframeCurrent;
-    const dataToBeSent = {
-      type: 'exportSpectraViewerAsBlob',
-    };
-    contentWindow.postMessage({ type: 'nmr-wrapper:action-request', data: dataToBeSent }, '*');
-  }
-
-  sendJcampDataToNMRDisplayer() {
-    LoadingActions.start.defer();
-    const { fetchedFiles, isIframeLoaded, spcInfos } = this.state;
-    if (isIframeLoaded && fetchedFiles && fetchedFiles.files && fetchedFiles.files.length > 0) {
-      LoadingActions.stop.defer();
-
-      const listFileContents = fetchedFiles.files;
-      if (this.iframeRef.current
-        && listFileContents.length > 0
-        && listFileContents.length === spcInfos.length) {
-        const dataToBeSent = this.buildDataToBeSent(listFileContents, spcInfos);
-        const { contentWindow } = this.iframeRef.current;
-        if (contentWindow) {
-          contentWindow.postMessage({ type: 'nmr-wrapper:load', data: dataToBeSent }, '*');
-        }
-      }
-    } else {
-      LoadingActions.stop.defer();
-    }
-  }
-
-  buildDataToBeSent(files, spectraInfos) {
-    const { sample } = this.props;
-    const nmriumData = this.readNMRiumData(files, spectraInfos);
-    if (nmriumData) {
-      const data = { data: nmriumData, type: 'nmrium' };
-      return data;
-    }
-
-    const data = { data: [], type: 'file' };
-    for (let index = 0; index < files.length; index += 1) {
-      const fileToBeShowed = files[index].file;
-      const bufferData = parseBase64ToArrayBuffer(fileToBeShowed);
-      const spcInfo = spectraInfos[index];
-      const fileName = spcInfo.label;
-      const blobToBeSent = new Blob([bufferData]);
-      const dataItem = new File([blobToBeSent], fileName);
-      data.data.push(dataItem);
-    }
-    if (sample) {
-      const { molfile } = sample;
-      if (molfile) {
-        const fileName = `${sample.id}.mol`;
-        const blobToBeSent = new Blob([molfile]);
-        const dataItem = new File([blobToBeSent], fileName);
-        data.data.push(dataItem);
-      }
-    }
-    return data;
-  }
-
-  readNMRiumData(files, spectraInfos) {
-    const arrNMRiumSpecs = spectraInfos.filter((spc) => spc.label.includes('.nmrium'));
-    if (!arrNMRiumSpecs || arrNMRiumSpecs.length === 0) {
-      return false;
-    }
-
-    const nmriumSpec = arrNMRiumSpecs[0];
-
-    const arrNMRiumFiles = files.filter((file) => file.id === nmriumSpec.idx);
-    if (!arrNMRiumFiles || arrNMRiumFiles.length === 0) {
-      return false;
-    }
-
-    const nmriumDataEncoded = arrNMRiumFiles[0].file;
-    const decodedData = base64.decode(nmriumDataEncoded);
-    const nmriumData = JSON.parse(decodedData);
-    return nmriumData;
-  }
-
-  savingNMRiumWrapperData(imageBlobData = false) {
-    const { nmriumData, is2D } = this.state;
-    if (nmriumData === null || !imageBlobData) {
-      return;
-    }
-
-    const specInfo = this.getSpcInfo();
-    if (!specInfo) {
-      return;
-    }
-
-    const { label } = specInfo;
-    const specLabelParts = label.split('.');
-    const fileNameWithoutExt = specLabelParts[0];
-
-    const imageAttachment = this.prepareImageAttachment(imageBlobData, fileNameWithoutExt);
-    const nmriumAttachment = this.prepareNMRiunDataAttachment(nmriumData, fileNameWithoutExt);
-    const listFileNameToBeDeleted = [imageAttachment.filename, nmriumAttachment.filename];
-    const datasetToBeUpdated = this.prepareDatasets(listFileNameToBeDeleted);
-    if (!datasetToBeUpdated) {
-      return;
-    }
-
-    if (!is2D) {
-      this.prepareAnalysisMetadata(nmriumData);
-    }
-
-    const { sample, handleSampleChanged } = this.props;
-
-    datasetToBeUpdated.attachments.push(imageAttachment);
-    datasetToBeUpdated.attachments.push(nmriumAttachment);
-
-    const cb = () => (
-      this.saveOp()
-    );
-    handleSampleChanged(sample, cb);
-  }
-
-  prepareDatasets(fileNameToBeDeleted = []) {
-    const specInfo = this.getSpcInfo();
-    const { sample } = this.props;
-
-    const datasetContainers = sample.datasetContainers();
-    const listDatasetFiltered = datasetContainers.filter((e) => specInfo.idDt === e.id);
-    if (listDatasetFiltered.length === 0) {
-      return false;
-    }
-
-    const datasetToBeUpdated = listDatasetFiltered[0];
-    const datasetAttachments = datasetToBeUpdated.attachments;
-    datasetAttachments.forEach((att) => {
-      if (fileNameToBeDeleted.includes(att.filename)) {
-        att.is_deleted = true;
-      }
-    });
-    datasetToBeUpdated.attachments = datasetAttachments;
-    return datasetToBeUpdated;
-  }
-
-  prepareNMRiunDataAttachment(nmriumData, fileNameNoExt) {
-    const spaceIndent = 0;
-    const dataAsJson = JSON.stringify(
-      nmriumData,
-      (key, value) => (ArrayBuffer.isView(value) ? Array.from(value) : value),
-      spaceIndent,
-    );
-    const blobData = new Blob([dataAsJson], { type: 'text/plain' });
-    const fileName = `${fileNameNoExt}.nmrium`;
-    blobData.name = fileName;
-    const dataAttachment = Attachment.fromFile(blobData);
-    return dataAttachment;
-  }
-
-  prepareImageAttachment(blobData, fileNameNoExt) {
-    const fileName = `${fileNameNoExt}.svg`;
-    const blobDataToBeSaved = blobData;
-    blobDataToBeSaved.name = fileName;
-    const imageAttachment = Attachment.fromFile(blobDataToBeSaved);
-    imageAttachment.thumb = true;
-    return imageAttachment;
-  }
-
-  prepareAnalysisMetadata(nmriumData) {
-    const buildPeaksBodyObject = this.buildPeaksBody(nmriumData);
-    const { peaksBody, layout } = buildPeaksBodyObject;
-
-    if (peaksBody === '' || layout === '') {
-      return '';
-    }
-
-    const layoutOpsObj = SpectraOps[layout];
-
-    if (!layoutOpsObj) {
-      return '';
-    }
-
-    const { sample } = this.props;
-    const specInfo = this.getSpcInfo();
-
-    const analysesContainers = sample.analysesContainers();
-
-    const ops = [
-      ...layoutOpsObj.head(''),
-      { insert: peaksBody },
-      ...layoutOpsObj.tail(),
-    ];
-    analysesContainers.forEach((analyses) => {
-      if (analyses.id !== specInfo.idAe) return;
-      analyses.children.forEach((ai) => {
-        if (ai.id !== specInfo.idAi) return;
-        ai.extended_metadata.content.ops = [ // eslint-disable-line
-          ...ai.extended_metadata.content.ops,
-          ...ops,
-        ];
-      });
-    });
-  }
-
-  buildPeaksBody(nmriumData) {
-    const displayingSpectra = this.findDisplayingSpectra(nmriumData);
-    if (displayingSpectra.length <= 0) {
-      return { peaksBody: '', layout: '' };
-    }
-    const firstSpectrum = displayingSpectra[0];
-    let layout = firstSpectrum.nucleus;
-    const { info } = firstSpectrum;
-    if (info) {
-      const { dimension, nucleus } = info;
-      if (dimension === 2) {
-        return { peaksBody: '', layout: '' };
-      }
-      layout = nucleus;
-    }
-
-    const firstSpectrumPeaks = firstSpectrum.peaks;
-    const { values } = firstSpectrumPeaks;
-    const peaks = values;
-    const layout = firstSpectrum.nucleus;
-    const shift = { enable: false, peak: false, ref: { label: false, name: '---', value: 0 } };
-    const decimal = 2;
-    const peaksBody = FN.peaksBody({
-      peaks, layout, decimal, shift
-    });
-    return { peaksBody, layout };
-  }
-
-  findDisplayingSpectra(nmriumData) {
-    const { spectra, correlations } = nmriumData;
-    const displayingSpectrumID = this.findDisplayingSpectrumID(correlations);
-    if (displayingSpectrumID) {
-      const displayingSpectra = spectra.filter((spectrum) => {
-        const { id } = spectrum;
-        return id === displayingSpectrumID;
-      });
-      return displayingSpectra;
-    }
-
-    const nonFIDSpectra = spectra.filter((spectrum) => {
-      const { info } = spectrum;
-      const { isFid } = info;
-      return isFid === false;
-    });
-    return nonFIDSpectra;
-  }
-
-  findDisplayingSpectrumID(correlations) {
-    if (!correlations) {
-      return false;
-    }
-
-    try {
-      const { values } = correlations;
-      if (values.length > 0) {
-        const firstValue = values[0];
-        const { link } = firstValue;
-        if (link.length > 0) {
-          const firstLink = link[0];
-          const { experimentID } = firstLink;
-          return experimentID;
-        }
-      }
-      return false;
-    } catch (error) {
-      return false;
-    }
-  }
-
-  saveOp() {
-    SpectraActions.ToggleModalNMRDisplayer.defer();
-    const { handleSubmit } = this.props;
-    handleSubmit();
-  }
-
-  renderNMRium(nmriumWrapperHost) {
-    return (
-      <Modal.Body>
-        <iframe
-          id="nmrium_wrapper"
-          className="spectra-editor"
-          src={nmriumWrapperHost}
-          allowFullScreen
-          ref={this.iframeRef}
-          onLoad={this.handleNMRDisplayerLoaded}
-        />
-      </Modal.Body>
-    );
-  }
-
-  renderModalTitle() {
-    const { nmriumData } = this.state;
-    let hasSpectra = false;
-    if (nmriumData) {
-      const { version } = nmriumData;
-      if (version > 3) {
-        hasSpectra = nmriumData.data.spectra.length > 0;
-      } else {
-        hasSpectra = nmriumData.spectra.length > 0;
-      }
-    }
-
-    return (
-      <Modal.Header>
-        <Button
-          bsStyle="danger"
-          bsSize="small"
-          className="button-right"
-          onClick={() => {
-            SpectraActions.ToggleModalNMRDisplayer.defer();
-          }}
-        >
-          <span>
-            <i className="fa fa-times" />
-            {' '}
-            Close without Save
-          </span>
-        </Button>
-        {
-          hasSpectra ?
-          (
-            <Button
-              bsStyle="success"
-              bsSize="small"
-              className="button-right"
-              onClick={() => {
-                this.requestDataToBeSaved();
-              }}
-            >
-              <span>
-                <i className="fa fa-floppy-o" />
-                {' '}
-                Close with Save
-              </span>
-            </Button>
-          ) : null
-        }
-      </Modal.Header>
-    );
-  }
-
-  render() {
-    const { showModalNMRDisplayer, nmriumWrapperHost } = this.state;
-
-    return (
-      <div className="spectra-editor">
-        <Modal
-          show={showModalNMRDisplayer}
-          dialogClassName="spectra-editor-dialog"
-          animation
-          onHide={this.closeOp}
-        >
-          {this.renderModalTitle()}
-          {this.renderNMRium(nmriumWrapperHost)}
-        </Modal>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/UserInfos.js b/app/packs/src/components/UserInfos.js
index 26d196c35..19077f877 100644
--- a/app/packs/src/components/UserInfos.js
+++ b/app/packs/src/components/UserInfos.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Tooltip} from 'react-bootstrap';
-import UserInfoIcon from './UserInfoIcon';
+import UserInfoIcon from 'src/apps/mydb/collections/UserInfoIcon';
 
 const UserInfos = ({users}) => {
   let tipUsers = users.map((user,ind)=>{
diff --git a/app/packs/src/components/actions/CollectionActions.js b/app/packs/src/components/actions/CollectionActions.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/packs/src/components/chemrepo/DateInfo.js b/app/packs/src/components/chemrepo/DateInfo.js
index acf3fdfdf..ee9b18d65 100644
--- a/app/packs/src/components/chemrepo/DateInfo.js
+++ b/app/packs/src/components/chemrepo/DateInfo.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getFormattedISODate, getFormattedISODateTime } from './date-utils';
+import { getFormattedISODate, getFormattedISODateTime } from 'src/components/chemrepo/date-utils';
 
 const DateInfo = (props) => {
   const {
diff --git a/app/packs/src/components/chemrepo/LdData.js b/app/packs/src/components/chemrepo/LdData.js
index 90f62e847..5245bcde7 100644
--- a/app/packs/src/components/chemrepo/LdData.js
+++ b/app/packs/src/components/chemrepo/LdData.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import PublicFetcher from '../fetchers/PublicFetcher';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
 
 const LdData = ({ type, id }) => {
   const [data, setData] = useState(null);
diff --git a/app/packs/src/components/chemrepo/MoleculeArchive.js b/app/packs/src/components/chemrepo/MoleculeArchive.js
index db0c0b218..68a1f4844 100644
--- a/app/packs/src/components/chemrepo/MoleculeArchive.js
+++ b/app/packs/src/components/chemrepo/MoleculeArchive.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Panel } from 'react-bootstrap';
-import { ToggleIndicator } from '../../libHome/RepoCommon';
-import { MARegisteredTooltip } from './ma/MAComs';
-import { MADataModal, MARequestModal } from './ma/MAModals';
+import { ToggleIndicator } from 'src/repoHome/RepoCommon';
+import { MARegisteredTooltip } from 'src/components/chemrepo/ma/MAComs';
+import { MADataModal, MARequestModal } from 'src/components/chemrepo/ma/MAModals';
 
 const MAPanel = (_props) => {
   const {
diff --git a/app/packs/src/components/chemrepo/PublicCommentModal.js b/app/packs/src/components/chemrepo/PublicCommentModal.js
index f1c146d63..a7a4030c5 100644
--- a/app/packs/src/components/chemrepo/PublicCommentModal.js
+++ b/app/packs/src/components/chemrepo/PublicCommentModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import PublicActions from '../actions/PublicActions';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 
 export default class PublicCommentModal extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/chemrepo/PublicReactionProperties.js b/app/packs/src/components/chemrepo/PublicReactionProperties.js
index 88fba195f..9ae1733c7 100644
--- a/app/packs/src/components/chemrepo/PublicReactionProperties.js
+++ b/app/packs/src/components/chemrepo/PublicReactionProperties.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col, Panel, Row } from 'react-bootstrap';
-import { CalcDuration, ToggleIndicator } from '../../libHome/RepoCommon';
+import { CalcDuration, ToggleIndicator } from 'src/repoHome/RepoCommon';
 
 const PublicReactionProperties = ({
   reaction, toggle, show, isPublished
diff --git a/app/packs/src/components/chemrepo/PublicReactionTlc.js b/app/packs/src/components/chemrepo/PublicReactionTlc.js
index 63bb5c6eb..da3575324 100644
--- a/app/packs/src/components/chemrepo/PublicReactionTlc.js
+++ b/app/packs/src/components/chemrepo/PublicReactionTlc.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col, Panel, Row } from 'react-bootstrap';
-import { ToggleIndicator } from '../../libHome/RepoCommon';
+import { ToggleIndicator } from 'src/repoHome/RepoCommon';
 
 const PublicReactionTlc = ({
   reaction, toggle, show, isPublished
diff --git a/app/packs/src/components/chemrepo/PublicSample.js b/app/packs/src/components/chemrepo/PublicSample.js
index b9bae3f3f..49d22a750 100644
--- a/app/packs/src/components/chemrepo/PublicSample.js
+++ b/app/packs/src/components/chemrepo/PublicSample.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import { Citation, literatureContent, RefByUserInfo } from '../LiteratureCommon';
-import { ChemotionId, CommentBtn, Doi } from '../../libHome/RepoCommon';
-import { formatPhysicalProps } from './publication-utils';
+import { Citation, literatureContent, RefByUserInfo } from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import { ChemotionId, CommentBtn, Doi } from 'src/repoHome/RepoCommon';
+import { formatPhysicalProps } from 'src/components/chemrepo/publication-utils';
 
 const PublicSample = (_props) => {
   const {
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/chemrepo/PublishCommon.js
similarity index 95%
rename from app/packs/src/components/PublishCommon.js
rename to app/packs/src/components/chemrepo/PublishCommon.js
index 4f89b09c9..ac9756e70 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/chemrepo/PublishCommon.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import Aviator from 'aviator';
-import Sample from './models/Sample';
-import { sampleShowOrNew, reactionShow } from './routesUtils';
-import Reaction from './models/Reaction';
-import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
-import { getFormattedISODate } from './chemrepo/date-utils';
-import { getElementType, getPublicationId } from './chemrepo/publication-utils';
-import UnsealBtn from './chemrepo/UnsealButton';
+import Sample from 'src/models/Sample';
+//import { sampleShowOrNew, reactionShow } from 'src/utilities/routesUtils'; // TODO: Paggy
+import Reaction from 'src/models/Reaction';
+import { isNmrPass, isDatasetPass } from 'src/utilities/ElementUtils';
+import { getFormattedISODate } from 'src/components/chemrepo/date-utils';
+import { getElementType, getPublicationId } from 'src/components/chemrepo/publication-utils';
+import UnsealBtn from 'src/components/chemrepo/UnsealButton';
 
 const labelStyle = {
   display: 'inline-block',
@@ -24,12 +24,12 @@ const handleClick = (e, id, clickType) => {
   switch (clickType) {
     case 'Reaction':
       Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
-      reactionShow({ params: { reactionID: id } });
+      // reactionShow({ params: { reactionID: id } });   // TODO: Paggy
       break;
 
     default:
       Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
-      sampleShowOrNew({ params: { sampleID: id } });
+      // sampleShowOrNew({ params: { sampleID: id } });   // TODO: Paggy
       break;
   }
 };
diff --git a/app/packs/src/components/PublishReactionContainers.js b/app/packs/src/components/chemrepo/PublishReactionContainers.js
similarity index 96%
rename from app/packs/src/components/PublishReactionContainers.js
rename to app/packs/src/components/chemrepo/PublishReactionContainers.js
index 3746a575c..a145711f0 100644
--- a/app/packs/src/components/PublishReactionContainers.js
+++ b/app/packs/src/components/chemrepo/PublishReactionContainers.js
@@ -5,9 +5,9 @@ import {
   Panel,
   Button,
 } from 'react-bootstrap';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton';
-import Reaction from './models/Reaction';
+import ContainerComponent from 'src/libHome/ContainerComponent';
+import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import Reaction from 'src/models/Reaction';
 
 export default class PublishReactionContainers extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/chemrepo/PublishReactionModal.js
similarity index 96%
rename from app/packs/src/components/PublishReactionModal.js
rename to app/packs/src/components/chemrepo/PublishReactionModal.js
index c884a1a70..6d10bf221 100644
--- a/app/packs/src/components/PublishReactionModal.js
+++ b/app/packs/src/components/chemrepo/PublishReactionModal.js
@@ -15,20 +15,30 @@ import {
 import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
 import Select from 'react-select';
 import Immutable from 'immutable';
-import { validateYield } from './PublishCommon';
-import Reaction from './models/Reaction';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import ReactionsFetcher from './fetchers/ReactionsFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, isNmrPass, isDatasetPass, PublishTypeAs, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
-import CollaboratorFetcher from '../components/fetchers/CollaboratorFetcher';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-import { CitationTypeMap, CitationTypeEOL } from './CitationType';
-import SubmissionCheck from './chemrepo/SubmissionCheck';
+import { validateYield } from 'src/components/chemrepo/PublishCommon';
+import Reaction from 'src/models/Reaction';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import ReactionsFetcher from 'src/fetchers/ReactionsFetcher';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+import {
+  ReactionInfo,
+  ReactionSchemeOnlyInfo,
+  AnalysisHeaderSample,
+  PublishAnalysesTag,
+  EmbargoCom,
+  isNmrPass,
+  isDatasetPass,
+  PublishTypeAs,
+  OrcidIcon
+} from 'src/repoHome/RepoCommon';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import { groupByCitation, Citation } from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import LiteraturesFetcher from 'src/fetchers/LiteraturesFetcher';
+import CollaboratorFetcher from 'src/repo/fetchers/CollaboratorFetcher';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
+import { CitationTypeMap, CitationTypeEOL } from 'src/components/CitationType';
+import SubmissionCheck from 'src/components/chemrepo/SubmissionCheck';
 
 const AnalysisIdstoPublish = element => (
   element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
@@ -80,6 +90,8 @@ export default class PublishReactionModal extends Component {
       publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
     };
 
+    props.reaction.convertDurationDisplay();
+
     this.onUserChange = this.onUserChange.bind(this);
     this.handlePublishReaction = this.handlePublishReaction.bind(this);
     this.handleReserveDois = this.handleReserveDois.bind(this);
@@ -111,7 +123,11 @@ export default class PublishReactionModal extends Component {
     this.loadBundles();
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.reaction) { return; }
+    nextProps.reaction.convertDurationDisplay();
+
     this.loadReferences();
     this.loadMyCollaborations();
     this.setState({
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/chemrepo/PublishSampleModal.js
similarity index 95%
rename from app/packs/src/components/PublishSampleModal.js
rename to app/packs/src/components/chemrepo/PublishSampleModal.js
index 81a43e6d9..b43f28746 100644
--- a/app/packs/src/components/PublishSampleModal.js
+++ b/app/packs/src/components/chemrepo/PublishSampleModal.js
@@ -9,19 +9,19 @@ import Select from 'react-select';
 import Immutable from 'immutable';
 import { sortedUniq } from 'lodash';
 
-import Sample from './models/Sample';
-import SampleDetailsContainers from './SampleDetailsContainers';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import SamplesFetcher from './fetchers/SamplesFetcher';
-import CollaboratorFetcher from './fetchers/CollaboratorFetcher';
-import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import EmbargoFetcher from './fetchers/EmbargoFetcher';
-import { CitationTypeMap, CitationTypeEOL } from './CitationType';
+import Sample from 'src/models/Sample';
+import SampleDetailsContainers from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+import { groupByCitation, Citation } from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from 'src/repoHome/RepoCommon';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import SamplesFetcher from 'src/fetchers/SamplesFetcher';
+import CollaboratorFetcher from 'src/repo/fetchers/CollaboratorFetcher';
+import LiteraturesFetcher from 'src/fetchers/LiteraturesFetcher';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
+import { CitationTypeMap, CitationTypeEOL } from 'src/components/CitationType';
 
 export default class PublishSampleModal extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/chemrepo/ReactionDetailsRepoComment.js
similarity index 86%
rename from app/packs/src/components/ReactionDetailsRepoComment.js
rename to app/packs/src/components/chemrepo/ReactionDetailsRepoComment.js
index a33b5dd54..7b2a3fc14 100644
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ b/app/packs/src/components/chemrepo/ReactionDetailsRepoComment.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ReviewStore from '../components/stores/ReviewStore';
-import ReviewActions from '../components/actions/ReviewActions';
-import RepoReactionDetails from '../libHome/RepoReactionDetails';
+import ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import RepoReactionDetails from 'src/repoHome/RepoReactionDetails';
 
 export default class ReactionDetailsRepoComment extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/chemrepo/SampleDetailsRepoComment.js
similarity index 82%
rename from app/packs/src/components/SampleDetailsRepoComment.js
rename to app/packs/src/components/chemrepo/SampleDetailsRepoComment.js
index 56b638d02..01b9d4275 100644
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ b/app/packs/src/components/chemrepo/SampleDetailsRepoComment.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import LoadingActions from './actions/LoadingActions';
-import ReviewStore from '../components/stores/ReviewStore';
-import RepoSampleDetails from '../libHome/RepoSampleDetails';
-import ReviewActions from './actions/ReviewActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';
+import RepoSampleDetails from 'src/repoHome/RepoSampleDetails';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
 
 export default class SampleDetailsRepoComment extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/chemrepo/UnsealButton.js b/app/packs/src/components/chemrepo/UnsealButton.js
index d9cc92f42..3804cfe9f 100644
--- a/app/packs/src/components/chemrepo/UnsealButton.js
+++ b/app/packs/src/components/chemrepo/UnsealButton.js
@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { permitOn } from '../common/uis';
-import { getElementType } from './publication-utils';
+import { permitOn } from 'src/components/common/uis';
+import { getElementType } from 'src/components/chemrepo/publication-utils';
 
 const UnsealBtn = (props) => {
   const { element, fnUnseal } = props;
diff --git a/app/packs/src/components/chemrepo/UserCommentModal.js b/app/packs/src/components/chemrepo/UserCommentModal.js
index 7d6acab4b..1a947c23e 100644
--- a/app/packs/src/components/chemrepo/UserCommentModal.js
+++ b/app/packs/src/components/chemrepo/UserCommentModal.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
 
 const UserCommentModal = (props) => {
   const {
diff --git a/app/packs/src/components/common/RepoMetadataModal.js b/app/packs/src/components/chemrepo/common/RepoMetadataModal.js
similarity index 97%
rename from app/packs/src/components/common/RepoMetadataModal.js
rename to app/packs/src/components/chemrepo/common/RepoMetadataModal.js
index 7defa8a65..d0ecddaf1 100644
--- a/app/packs/src/components/common/RepoMetadataModal.js
+++ b/app/packs/src/components/chemrepo/common/RepoMetadataModal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
 
 export default class RepoMetadataModal extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/common/RepoPreviewImage.js b/app/packs/src/components/chemrepo/common/RepoPreviewImage.js
similarity index 90%
rename from app/packs/src/components/common/RepoPreviewImage.js
rename to app/packs/src/components/chemrepo/common/RepoPreviewImage.js
index 7827481ed..b4675075c 100644
--- a/app/packs/src/components/common/RepoPreviewImage.js
+++ b/app/packs/src/components/chemrepo/common/RepoPreviewImage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ImageModal from './ImageModal';
-import RepoSpectraBtn from './RepoSpectra';
+import ImageModal from 'src/components/common/ImageModal';
+import RepoSpectraBtn from 'src/components/chemrepo/common/RepoSpectra';
 
 const RepoPreviewImage = (props) => {
   const {
diff --git a/app/packs/src/components/common/RepoPublicComment.js b/app/packs/src/components/chemrepo/common/RepoPublicComment.js
similarity index 96%
rename from app/packs/src/components/common/RepoPublicComment.js
rename to app/packs/src/components/chemrepo/common/RepoPublicComment.js
index 7753daeb4..ea33f4369 100644
--- a/app/packs/src/components/common/RepoPublicComment.js
+++ b/app/packs/src/components/chemrepo/common/RepoPublicComment.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import PublicActions from '../actions/PublicActions';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 
 export default class RepoPublicComment extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/chemrepo/common/RepoReviewAuthorsModal.js
similarity index 97%
rename from app/packs/src/components/common/RepoReviewAuthorsModal.js
rename to app/packs/src/components/chemrepo/common/RepoReviewAuthorsModal.js
index 6389f2285..198dfe781 100644
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ b/app/packs/src/components/chemrepo/common/RepoReviewAuthorsModal.js
@@ -5,14 +5,14 @@ import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Chec
 import Select from 'react-select';
 import uuid from 'uuid';
 import { findIndex, filter, uniq, flattenDeep } from 'lodash';
-import { OrcidIcon } from '../../libHome/RepoCommon';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import SelectionField from '../common/SelectionField';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
-import ReviewActions from '../actions/ReviewActions';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+import { OrcidIcon } from 'src/repoHome/RepoCommon';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import SelectionField from 'src/components/common/SelectionField';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import CollaboratorFetcher from 'src/repo/fetchers/CollaboratorFetcher';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import DeleteConfirmBtn from 'src/components/common/DeleteConfirmBtn';
 
 const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
 const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation from this Publication</Tooltip>;
diff --git a/app/packs/src/components/common/RepoSpectra.js b/app/packs/src/components/chemrepo/common/RepoSpectra.js
similarity index 84%
rename from app/packs/src/components/common/RepoSpectra.js
rename to app/packs/src/components/chemrepo/common/RepoSpectra.js
index 0922cbf56..761d0fe88 100644
--- a/app/packs/src/components/common/RepoSpectra.js
+++ b/app/packs/src/components/chemrepo/common/RepoSpectra.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
-import { BuildSpcInfos } from '../utils/SpectraHelper';
-import SpectraActions from '../actions/SpectraActions';
-import ViewSpectra from '../ViewSpectra';
-import NotificationActions from '../actions/NotificationActions';
+import { BuildSpcInfos } from 'src/utilities/SpectraHelper';
+import SpectraActions from 'src/stores/alt/actions/SpectraActions';
+import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 
 const RepoSpectraBtn = (props) => {
   const { element, analysis } = props;
diff --git a/app/packs/src/components/common/RepoUserComment.js b/app/packs/src/components/chemrepo/common/RepoUserComment.js
similarity index 97%
rename from app/packs/src/components/common/RepoUserComment.js
rename to app/packs/src/components/chemrepo/common/RepoUserComment.js
index cdacbfa22..e5f5afe0e 100644
--- a/app/packs/src/components/common/RepoUserComment.js
+++ b/app/packs/src/components/chemrepo/common/RepoUserComment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
 
 export default class RepoUserComment extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/chemrepo/common/RepoXvialButton.js
similarity index 97%
rename from app/packs/src/components/common/RepoXvialButton.js
rename to app/packs/src/components/chemrepo/common/RepoXvialButton.js
index 2cb5790fe..5f284aaef 100644
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ b/app/packs/src/components/chemrepo/common/RepoXvialButton.js
@@ -7,9 +7,9 @@ import {
   Tooltip,
   FormControl,
 } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import NotificationActions from '../actions/NotificationActions';
-import { CompoundList } from '../chemrepo/ma/MAModals';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import { CompoundList } from 'src/components/chemrepo/ma/MAModals';
 
 const registedCompoundTooltip = (
   <div className="repo-xvial-info">
diff --git a/app/packs/src/components/chemrepo/format-utils.js b/app/packs/src/components/chemrepo/format-utils.js
new file mode 100644
index 000000000..a8b22f677
--- /dev/null
+++ b/app/packs/src/components/chemrepo/format-utils.js
@@ -0,0 +1,2 @@
+const capitalizeFirstLetter = str => str.replace(/^[a-z]/, match => match.toUpperCase());
+export default capitalizeFirstLetter;
diff --git a/app/packs/src/components/chemrepo/ma/MAModals.js b/app/packs/src/components/chemrepo/ma/MAModals.js
index c7af96224..5503b2722 100644
--- a/app/packs/src/components/chemrepo/ma/MAModals.js
+++ b/app/packs/src/components/chemrepo/ma/MAModals.js
@@ -10,8 +10,8 @@ import {
   FormControl,
 } from 'react-bootstrap';
 import NotificationSystem from 'react-notification-system';
-import RepositoryFetcher from '../../fetchers/RepositoryFetcher';
-import MAGrid from './MAGrid';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import MAGrid from 'src/components/chemrepo/ma/MAGrid';
 
 export const CompoundList = (xvialCom, data = '', selectXvial) => {
   if (typeof xvialCom === 'undefined' || !xvialCom.allowed) return <br />;
diff --git a/app/packs/src/components/chemrepo/publication-utils.js b/app/packs/src/components/chemrepo/publication-utils.js
index 89b259751..c08a2b072 100644
--- a/app/packs/src/components/chemrepo/publication-utils.js
+++ b/app/packs/src/components/chemrepo/publication-utils.js
@@ -1,4 +1,4 @@
-import getFormattedRange from './range-utils';
+import getFormattedRange from 'src/components/chemrepo/range-utils';
 
 export const getElementType = element => element?.tag?.taggable_type;
 
diff --git a/app/packs/src/components/chemrepo/search/PublicSearchIcons.js b/app/packs/src/components/chemrepo/search/PublicSearchIcons.js
new file mode 100644
index 000000000..9189e0824
--- /dev/null
+++ b/app/packs/src/components/chemrepo/search/PublicSearchIcons.js
@@ -0,0 +1,234 @@
+import React, { useRef, useState } from 'react';
+import { Row, Col, Radio, Well, Button, FormGroup } from 'react-bootstrap';
+import AsyncSelect from 'react-select5/async';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import capitalizeFirstLetter from 'src/components/chemrepo/format-utils';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
+import SuggestionsFetcher from 'src/fetchers/SuggestionsFetcher';
+
+const constructHolder = (searchBy, searchIn) => {
+  const holder = { authors: "author's name", ontologies: 'chemical methods ontology (1H NMR, mass spectrometry, ...)', sample: 'IUPAC, InChI, SMILES, ...' };
+  return `Enter ${holder[searchBy]} to find information from ${searchIn === 'dataPublications' ? 'Data Publications' : 'Molecule Archive'}`;
+};
+
+const searchIcon = {
+  chemotion_id: { icon: 'icon-sample', label: 'Chemotion Id' },
+  sample_name: { icon: 'icon-sample', label: 'Sample Name' },
+  sample_short_label: { icon: 'icon-sample', label: 'Sample Short Label' },
+  sample_external_label: { icon: 'icon-sample', label: 'Sample External Label' },
+  polymer_type: { icon: 'icon-polymer', label: 'Polymer' },
+  reaction_name: { icon: 'icon-reaction', label: 'Reaction name' },
+  reaction_status: { icon: 'icon-reaction', label: 'Reaction status' },
+  reaction_short_label: { icon: 'icon-reaction', label: 'Reaction label' },
+  reaction_rinchi_string: { icon: 'icon-reaction', label: 'Reaction RInChI' },
+  wellplate_name: { icon: 'icon-wellplate', label: 'Wellplate' },
+  screen_name: { icon: 'icon-screen', label: 'Screen' },
+  iupac_name: { icon: 'icon-sample', label: 'Molecule' },
+  inchistring: { icon: 'icon-sample', label: 'InChI' },
+  inchikey: { icon: 'icon-sample', label: 'InChIKey' },
+  cano_smiles: { icon: 'icon-sample', label: 'Canonical Smiles' },
+  sum_formula: { icon: 'icon-sample', label: 'Sum Formula' },
+  requirements: { icon: 'icon-screen', label: 'Requirement' },
+  conditions: { icon: 'icon-screen', label: 'Condition' },
+  element_short_label: { icon: 'icon-element', label: 'Element Short Label' },
+  embargo: { icon: 'fa fa-object-group', label: 'Embargo Bundle Number' },
+  authors: { icon: 'fa fa-user', label: 'Author' },
+  ontologies: { icon: 'fa fa-area-chart', label: 'Ontology' }
+};
+
+const getLabelIcon = (key, label) => {
+  if (searchIcon[key]) {
+    return <>{label}&nbsp;(<i className={searchIcon[key].icon} aria-hidden="true" />&nbsp;{searchIcon[key].label})</>;
+  }
+  return <>{label}</>;
+};
+
+const updateLabel = (_searchBy, _label, _method) => {
+  switch (_searchBy) {
+    case 'authors':
+    case 'ontologies':
+      return getLabelIcon(_searchBy, _label);
+    case 'sample':
+      return getLabelIcon(_method, _label);
+    default:
+      return <>{_label}</>;
+  }
+};
+
+const constructParams = (searchBy, searchIn, searchValue, searchOptions = []) => ({
+  page: 1,
+  perPage: 10,
+  advFlag: true,
+  advType: searchBy,
+  advValue: [searchValue],
+  schemeOnly: false,
+  searchIn,
+  searchOptions
+});
+
+const constructSearchParams = (input, options = []) => {
+  const selection = options.filter(o => o.original.value === input.value);
+  return {
+    advFlag: true,
+    elementType: 'all',
+    page: 1,
+    perPage: 10,
+    selection: selection[0].original,
+    isSearch: true,
+  };
+};
+
+const PublicSearchIcons = () => {
+  const [searchBy, setSearchBy] = useState('authors');
+  const [searchIn, setSearchIn] = useState('dataPublications');
+  const [searchValue, setSearchValue] = useState(null);
+  const [searchOptions, setSearchOptions] = useState([]);
+  const asyncRef = useRef(null);
+
+  const loadOptions = (input) => {
+    if (!input || input.length < 3) {
+      setSearchOptions([]);
+      return Promise.resolve([]);
+    }
+    if (searchBy === 'sample') {
+      return SuggestionsFetcher.fetchSuggestionsForCurrentUser('all', input, 'public')
+        .then((res) => {
+          const result = res.map((u, index) => ({
+            original: { ...u, value: `suggestion_${index}` },
+            value: `suggestion_${index}`,
+            name: u.name,
+            label: updateLabel(searchBy, u.name, u.search_by_method)
+          }));
+          setSearchOptions(result);
+          return result;
+        })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    }
+    return PublicFetcher.fetchAdvancedValues(capitalizeFirstLetter(searchBy), input)
+      .then((res) => {
+        const result = res.result.map(u => ({
+          original: u, value: u.key, name: u.name, label: updateLabel(searchBy, u.label, searchBy)
+        }));
+        setSearchOptions(result);
+        return result;
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  };
+
+  // search by authors, ontologies, reaction, sample
+  const onChangeSearchBy = (e) => {
+    setSearchBy(e.target.value);
+  };
+
+  // search in publications, moleculeArchive
+  const onChangeSearchIn = (e) => {
+    setSearchIn(e.target.value);
+  };
+
+  const onChangeSearchValue = (_value) => {
+    const pageParams = constructParams(capitalizeFirstLetter(searchBy), searchIn, _value, searchOptions);
+    if (_value) {
+      if (searchIn === 'dataPublications') {
+        if (['authors', 'ontologies'].includes(searchBy)) {
+          PublicActions.getReactions(pageParams);
+          PublicActions.publicSearch.defer(pageParams);
+        } else {
+          const maParams = constructSearchParams(_value, searchOptions);
+          PublicActions.getSearchReactions(maParams);
+          PublicActions.publicSearch.defer({
+            ...maParams, listType: RepoNavListTypes.REACTION, searchOptions: [], defaultSearchValue: _value.name
+          });
+        }
+        PublicActions.openRepositoryPage.defer(`publications=${RepoNavListTypes.REACTION}`);
+      } else {
+        if (['authors', 'ontologies'].includes(searchBy)) {
+          PublicActions.getMolecules({ ...pageParams, listType: RepoNavListTypes.MOLECULE_ARCHIVE });
+          PublicActions.publicSearch.defer(pageParams);
+        } else {
+          const maParams = constructSearchParams(_value, searchOptions);
+          PublicActions.getSearchMolecules({ ...maParams, listType: RepoNavListTypes.MOLECULE_ARCHIVE });
+          PublicActions.publicSearch.defer({
+            ...maParams, listType: RepoNavListTypes.MOLECULE_ARCHIVE, searchOptions: [], defaultSearchValue: _value.name
+          });
+        }
+        PublicActions.openRepositoryPage.defer(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`);
+      }
+    }
+    setSearchValue(_value);
+  };
+
+  const onDrawStructure = () => {
+    const listType = searchIn === 'dataPublications' ? RepoNavListTypes.REACTION : RepoNavListTypes.MOLECULE_ARCHIVE;
+    PublicActions.openRepositoryPage(`publications=${listType}`);
+    PublicActions.setSearchParams.defer({
+      showStructureEditor: true, advFlag: true, advType: 'Authors', advValue: [], page: 1, searchOptions: []
+    });
+  };
+
+  return (
+    <Row style={{ width: '100%' }}>
+      <Col md={12} sm={12} xs={12}>
+        <Row>
+          <Col md={2} smHidden xsHidden>&nbsp;</Col>
+          <Col md={8} sm={12} xs={12} className="search-keyword">
+            <Well bsSize="small">
+              <span>Search by</span>
+              &nbsp;&nbsp;
+              <FormGroup>
+                <Radio name="radioSearchBy" value="authors" checked={searchBy === 'authors'} inline onChange={onChangeSearchBy}>
+                  <i className="fa fa-user" aria-hidden="true" />&nbsp;Author
+                </Radio>{' '}
+                <Radio name="radioSearchBy" value="ontologies" checked={searchBy === 'ontologies'} inline onChange={onChangeSearchBy}>
+                  <i className="fa fa-area-chart" aria-hidden="true" />&nbsp;Ontology
+                </Radio>{' '}
+                <Radio name="radioSearchBy" value="sample" checked={searchBy === 'sample'} inline onChange={onChangeSearchBy}>
+                  <i className="icon-sample" />&nbsp;Substance
+                </Radio>&nbsp;&nbsp;or&nbsp;&nbsp;<Button bsSize="small" onClick={onDrawStructure}><i className="fa fa-paint-brush" aria-hidden="true" />&nbsp;Draw Structure</Button>
+              </FormGroup>
+            </Well>
+            &nbsp;&nbsp;
+            <Well bsSize="small">
+              <span>in</span>
+              &nbsp;&nbsp;
+              <FormGroup>
+                <Radio name="radioSearchIn" value="dataPublications" checked={searchIn === 'dataPublications'} inline onChange={onChangeSearchIn}>
+                  Data Publications
+                </Radio>{' '}
+                <Radio name="radioSearchIn" value="moleculeArchive" checked={searchIn === 'moleculeArchive'} inline onChange={onChangeSearchIn}>
+                  Molecule Archive
+                </Radio>
+              </FormGroup>
+            </Well>
+          </Col>
+          <Col md={2} smHidden xsHidden>&nbsp;</Col>
+        </Row>
+        <Row style={{ marginBottom: '10px' }}>
+          <Col md={2}>&nbsp;</Col>
+          <Col md={8}>
+            <AsyncSelect
+              placeholder={constructHolder(searchBy, searchIn)}
+              backspaceRemoves
+              isClearable
+              valueKey="value"
+              labelKey="label"
+              ref={asyncRef}
+              loadOptions={loadOptions}
+              onChange={onChangeSearchValue}
+              styles={{
+                container: baseStyles => ({
+                  ...baseStyles,
+                  width: '100%',
+                }),
+              }}
+            />
+            <span style={{ fontSize: '12px', fontStyle: 'italic' }}>Explore using the author&apos;s name, chemical methods ontology, IUPAC, InChI, SMILES..., or even draw a structure to search the Chemotion Repository.</span>
+          </Col>
+          <Col md={2}>&nbsp;</Col>
+        </Row>
+      </Col>
+    </Row>
+  );
+};
+
+export default PublicSearchIcons;
diff --git a/app/packs/src/components/chemscanner/actions/storedFileActions.js b/app/packs/src/components/chemscanner/actions/storedFileActions.js
deleted file mode 100644
index 4e6c48631..000000000
--- a/app/packs/src/components/chemscanner/actions/storedFileActions.js
+++ /dev/null
@@ -1,315 +0,0 @@
-import uuid from 'uuid';
-
-import * as types from './ActionTypes';
-import { scanFileNormalizer } from './fileActions';
-import { CALL_API } from '../middleware/api';
-
-export const retrieveStoredFiles = () => dispatch => (
-  dispatch({
-    type: types.RETRIEVE_STORED_FILES,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/all',
-      options: {
-        credentials: 'same-origin',
-        method: 'post'
-      }
-    }
-  })
-);
-
-export const getScannedOutputs = (ids, type, display) => dispatch => (
-  dispatch({
-    type: types.GET_SCANNED_OUTPUT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/get_outputs',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, display })
-      },
-    }
-  })
-);
-
-export const hideItems = (ids, type) => dispatch => (
-  dispatch({ type: types[`HIDE_${type.toLocaleUpperCase()}`], ids })
-);
-
-export const approveItems = (ids, type, val) => dispatch => (
-  dispatch({
-    type: types[`APPROVE_${type.toLocaleUpperCase()}`],
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/approve',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, val })
-      },
-    }
-  })
-);
-
-export const rescanFiles = ids => dispatch => (
-  dispatch({
-    type: types.RESCAN_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/rescan',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids })
-      },
-    }
-  })
-);
-
-export const deleteItems = (ids, type, itemVersion) => dispatch => (
-  dispatch({
-    type: types.DELETE_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/delete',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, version: itemVersion || '' })
-      },
-    }
-  })
-);
-
-export const downloadFile = id => dispatch => (
-  dispatch({
-    type: types.DOWNLOAD_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/download/',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const uploadToStore = files => (dispatch) => {
-  const data = new FormData();
-  for (let i = 0; i < files.length; i += 1) data.append(uuid.v4(), files[i]);
-
-  return dispatch({
-    type: types.UPLOAD_TO_STORE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/upload',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data
-      }
-    }
-  });
-};
-
-export const saveImage = imageList => (
-  fetch('/api/v1/chemscanner_storage/save_png', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ image_list: imageList })
-  })
-);
-
-export const fetchPreview = id => (
-  fetch('/api/v1/chemscanner_storage/scheme_image', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ id })
-  }).then(res => res.json())
-);
-
-export const getPreview = id => dispatch => (
-  dispatch({
-    type: types.GET_SCHEME_PREVIEW,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/scheme_image',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const updateMetadata = (id, type, extendedMetadata) => dispatch => (
-  dispatch({
-    type: types.UPDATE_METADATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_metadata',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id, type, data: extendedMetadata })
-      },
-    }
-  })
-);
-
-export const importData = (data, collection, maintainShortLabel) => dispatch => (
-  dispatch({
-    type: types.IMPORT_DATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/import',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ data, collection, maintainShortLabel })
-      }
-    }
-  })
-);
-
-export const updateItemField = (id, type, field, value) => dispatch => (
-  dispatch({
-    type: types.UPDATE_ITEM_FIELD,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_output',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id, type, field, value
-        })
-      }
-    }
-  })
-);
-
-export const toggleAliasPolymer = (moleculeId, atomIdx) => dispatch => (
-  dispatch({
-    type: types.TOGGLE_ALIAS_POLYMER,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/toggle_polymer',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeId, atomIdx })
-      }
-    }
-  })
-);
-
-export const fetchSvg = (moleculeIds, reactionIds) => dispatch => (
-  dispatch({
-    type: types.FETCH_SVG,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/fetch_svg',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeIds, reactionIds })
-      }
-    }
-  })
-);
-
-export const beilsteinExport = ids => (
-  fetch('/api/v1/chemscanner_storage/beilstein_export', {
-    credentials: 'same-origin',
-    method: 'post',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ ids })
-  })
-);
-
-export const setArchivedValue = (ids, value) => dispatch => (
-  dispatch({
-    type: types.SET_ARCHIVED_VALUE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_archived',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, value })
-      },
-    }
-  })
-);
-
-export const setExpand = (id, type, value) => dispatch => (
-  dispatch({
-    type: types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`] || types.DEFAULT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_expanded',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ type, id, value })
-      },
-    }
-  })
-);
diff --git a/app/packs/src/components/chemscanner/actions/uiActions.js b/app/packs/src/components/chemscanner/actions/uiActions.js
deleted file mode 100644
index 2ea85cbfc..000000000
--- a/app/packs/src/components/chemscanner/actions/uiActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-
-import * as types from './ActionTypes';
-import { CALL_API } from '../middleware/api';
-
-export const changeView = view => dispatch => (
-  dispatch({ type: types.CHANGE_VIEW, view })
-);
-
-export const getCurrentVersion = () => dispatch => (
-  dispatch({
-    type: types.GET_CURRENT_VERSION,
-    [CALL_API]: {
-      endpoint: '/api/v1/public_chemscanner/ui/version',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-      },
-    }
-  })
-);
diff --git a/app/packs/src/components/chemscanner/components/ArchivedManagement.js b/app/packs/src/components/chemscanner/components/ArchivedManagement.js
deleted file mode 100644
index 40e021cd4..000000000
--- a/app/packs/src/components/chemscanner/components/ArchivedManagement.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-export default class ArchivedManagement extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-
-    this.activedColumnDefs = [
-      {
-        headerName: 'Actived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-    this.archivedColumnDefs = [
-      {
-        headerName: 'Archived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-
-    this.onActivedGridReady = this.onActivedGridReady.bind(this);
-    this.onArchivedGridReady = this.onArchivedGridReady.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.setActived = this.setActived.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.activedGridApi && this.activedGridColumnApi) {
-      this.activedGridColumnApi.autoSizeColumns();
-    }
-
-    if (this.archivedGridApi && this.archivedGridColumnApi) {
-      this.archivedGridColumnApi.autoSizeColumns();
-    }
-  }
-
-  onActivedGridReady(params) {
-    this.activedGridApi = params.api;
-    this.activedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  onArchivedGridReady(params) {
-    this.archivedGridApi = params.api;
-    this.archivedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  setArchived() {
-    if (!this.activedGridApi) return;
-
-    const fileIds = this.activedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  setActived() {
-    if (!this.archivedGridApi) return;
-
-    const fileIds = this.archivedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  render() {
-    const { archivedFiles, activedFiles } = this.props;
-    const gridStyle = {
-      height: 'calc(100vh - 100px)', flex: 1
-    };
-    const buttonStyle = {
-      width: '33px',
-      margin: '5px',
-      textAlign: 'center',
-      alignSelf: 'center',
-      color: 'rgba(0, 0, 0, 0.54)'
-    };
-
-    return (
-      <div style={{ display: 'flex', margin: '10px' }}>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="activedFilesGrid"
-            columnDefs={this.activedColumnDefs}
-            rowData={activedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onActivedGridReady}
-          />
-        </div>
-        <div style={buttonStyle}>
-          <button className="btn btn-xs" onClick={this.setArchived}>
-            <i className="fa fa-arrow-circle-right fa-2x" />
-          </button>
-          &nbsp; &nbsp;
-          <button className="btn btn-xs" onClick={this.setActived}>
-            <i className="fa fa-arrow-circle-left fa-2x" />
-          </button>
-        </div>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="archivedFilesGrid"
-            columnDefs={this.archivedColumnDefs}
-            rowData={archivedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onArchivedGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-ArchivedManagement.propTypes = {
-  archivedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  activedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js b/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
deleted file mode 100644
index 9ce6f25b5..000000000
--- a/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel, Checkbox,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ChemscannerImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      maintainShortLabel: true,
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.toggleMaintainShortLabel = this.toggleMaintainShortLabel.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel, maintainShortLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection, maintainShortLabel);
-  }
-
-  toggleMaintainShortLabel() {
-    this.setState({ maintainShortLabel: !this.state.maintainShortLabel });
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const {
-      options, newLabel, selected, maintainShortLabel
-    } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-          <FormGroup>
-            <Checkbox
-              checked={maintainShortLabel}
-              onChange={this.toggleMaintainShortLabel}
-            >
-              Maintain reaction short label
-            </Checkbox>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ChemscannerImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ChemscannerImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/packs/src/components/chemscanner/components/EditMdlBtn.js b/app/packs/src/components/chemscanner/components/EditMdlBtn.js
deleted file mode 100644
index 57801b00f..000000000
--- a/app/packs/src/components/chemscanner/components/EditMdlBtn.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-
-export default class EditMdlBtn extends React.Component {
-  constructor() {
-    super();
-
-    this.onSelect = this.onSelect.bind(this);
-  }
-
-  onSelect(id) {
-    this.props.openKetcher(id);
-  }
-
-  render() {
-    const { options, identifier } = this.props;
-
-    if (options.length === 0 || !identifier) return <span />;
-
-    const icon = (<i className="fa fa-pencil" />);
-    const ddId = `dropdown-edit-mdl-${identifier}`;
-
-    return (
-      <DropdownButton
-        id={ddId}
-        title={icon}
-        className="clipboard-btn left-btn btn btn-xs"
-      >
-        {options.map(option => (
-          <MenuItem
-            key={option.value}
-            eventKey={option.value}
-            onSelect={this.onSelect}
-          >
-            {option.title}
-          </MenuItem>
-        ))}
-      </DropdownButton>
-    );
-  }
-}
-
-EditMdlBtn.propTypes = {
-  identifier: PropTypes.number,
-  openKetcher: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.object),
-};
-
-EditMdlBtn.defaultProps = {
-  options: [],
-  identifier: 0,
-};
diff --git a/app/packs/src/components/chemscanner/components/EditableText.js b/app/packs/src/components/chemscanner/components/EditableText.js
deleted file mode 100644
index 5e3afafcd..000000000
--- a/app/packs/src/components/chemscanner/components/EditableText.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class EditableText extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { editing: false };
-
-    this.handleDoubleClick = this.handleDoubleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-
-  handleBlur(e) {
-    const { id, field, onFinishUpdate } = this.props;
-    if (!id) return;
-
-    const newValue = e.target.value;
-    this.setState({ editing: false }, onFinishUpdate(id, field, newValue));
-  }
-
-  handleDoubleClick() {
-    if (!this.props.id) return;
-
-    this.setState({ editing: true });
-  }
-
-  render() {
-    const { field, value } = this.props;
-    const { editing } = this.state;
-
-    let cellContent = value;
-    if (editing) {
-      cellContent = (
-        <input
-          style={{ width: '100%' }}
-          defaultValue={value}
-          onBlur={this.handleBlur}
-        />
-      );
-    }
-
-    return (
-      <div onDoubleClick={this.handleDoubleClick}>
-        <b>{field}: </b>
-        {cellContent}
-      </div>
-    );
-  }
-}
-
-EditableText.propTypes = {
-  id: PropTypes.number,
-  field: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onFinishUpdate: PropTypes.func.isRequired
-};
-
-EditableText.defaultProps = {
-  id: 0,
-};
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js b/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
deleted file mode 100644
index bfc38d30f..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-function FileItemActionsHeader({
-  deleteItems, beilsteinExport, openImportModal,
-  rescanFiles, uploadInput, showSelectedItems,
-  setArchived, unsetArchived
-}) {
-  if (!uploadInput) return <span />;
-
-  const uploadTooltip = <Tooltip id="cs-show-files">Upload</Tooltip>;
-  const openUpload = () => uploadInput.current.click();
-
-  const rescanTooltip = <Tooltip id="cs-rescan-files">Rescan Files</Tooltip>;
-  const deleteTooltip = <Tooltip id="cs-rescan-files">Delete Items</Tooltip>;
-
-  const dropdownTitle = <i className="fa fa-eye" />;
-  const exportTitle = <i className="fa fa-cloud-upload" />;
-
-  const toggleArchiveTitle = <i className="fa fa-archive" />;
-
-  return (
-    <div>
-      <OverlayTrigger placement="top" overlay={deleteTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          style={{ float: 'right' }}
-          onClick={deleteItems}
-        >
-          <i className="fa fa-trash" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={dropdownTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={() => showSelectedItems('reactions')}
-          >
-            Show Reactions
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={() => showSelectedItems('molecules')}
-          >
-            Show Molecules
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={exportTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={openImportModal}
-          >
-            Import to ELN
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={beilsteinExport}
-          >
-            Beilstein export
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <OverlayTrigger placement="top" overlay={rescanTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="primary"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={rescanFiles}
-        >
-          <i className="fa fa-refresh" />
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={uploadTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="success"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={openUpload}
-        >
-          <i className="fa fa-plus-circle" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-toggle-archive-dropdown"
-          title={toggleArchiveTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={setArchived}
-          >
-            Set archive
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={unsetArchived}
-          >
-            Unset archive
-          </MenuItem>
-        </DropdownButton>
-      </div>
-    </div>
-  );
-}
-
-FileItemActionsHeader.propTypes = {
-  uploadInput: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  rescanFiles: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  showSelectedItems: PropTypes.func.isRequired,
-  setArchived: PropTypes.func.isRequired,
-  unsetArchived: PropTypes.func.isRequired,
-};
-
-FileItemActionsHeader.defaultProps = {
-  uploadInput: null
-};
-
-export default FileItemActionsHeader;
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js b/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
deleted file mode 100644
index 1221dba3b..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-const DeleteBtn = ({ deleteItems }) => {
-  const deleteTooltip = <Tooltip id="cs-delete-item">Delete</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={deleteTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        style={{ float: 'right', marginLeft: '5px' }}
-        onClick={deleteItems}
-      >
-        <i className="fa fa-trash" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DeleteBtn.propTypes = {
-  deleteItems: PropTypes.func.isRequired,
-};
-
-const DownloadBtn = ({ data, downloadFile }) => {
-  const { type } = data;
-
-  let visibility = '';
-  if (type !== 'File') visibility = 'hidden';
-
-  const style = {
-    float: 'right',
-    marginLeft: '5px',
-    visibility,
-    width: '35px'
-  };
-
-  const tooltipId = `cs-download-${type}-${data.id}-tooltip`;
-  const downloadTooltip = <Tooltip id={tooltipId}>Download</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={downloadTooltip}>
-      <Button
-        bsSize="xsmall"
-        style={style}
-        onClick={downloadFile}
-      >
-        <i className="fa fa-download" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DownloadBtn.propTypes = {
-  downloadFile: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const ShowHideBtn = ({
-  data, showReactions, showMolecules, hideItems
-}) => {
-  const { type, id, schemeCount } = data;
-  const children = data.children || [];
-
-  if (type === 'File') {
-    const noScheme = !schemeCount;
-    const hasNestedFile = children.length === 0 || (
-      children.length > 0 && children[0].type !== 'File'
-    );
-
-    if (noScheme && hasNestedFile) return <span />;
-  }
-
-  let tooltip;
-  let button;
-
-  if (data.show) {
-    button = (
-      <Button
-        bsSize="xsmall"
-        bsStyle="warning"
-        style={{ float: 'right', marginLeft: '5px', width: '35px' }}
-        onClick={hideItems}
-      >
-        <i className="fa fa-eye-slash" />
-      </Button>
-    );
-
-    tooltip = <Tooltip id="cs-hide-file">Hide</Tooltip>;
-  } else {
-    const ddId = `cs-show-${type}-${id}-dropdown`;
-
-    const title = <i className="fa fa-eye" />;
-
-    button = (
-      <div style={{ float: 'right', marginLeft: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id={ddId}
-          title={title}
-        >
-          <MenuItem eventKey="1" onClick={showReactions}>Show Reactions</MenuItem>
-          <MenuItem eventKey="2" onClick={showMolecules}>Show Molecules</MenuItem>
-        </DropdownButton>
-      </div>
-    );
-
-    tooltip = <Tooltip id="cs-show-file">Show</Tooltip>;
-  }
-
-  return (
-    <OverlayTrigger placement="top" overlay={tooltip}>
-      {button}
-    </OverlayTrigger>
-  );
-};
-
-ShowHideBtn.propTypes = {
-  showReactions: PropTypes.func.isRequired,
-  showMolecules: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const RescanBtn = ({ data, rescanFiles }) => {
-  const { type, parentId } = data;
-  let visibility = '';
-  if (type !== 'File' || parentId) visibility = 'hidden';
-
-  const rescanTooltip = <Tooltip id="cs-rescan-file">Rescan File</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={rescanTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="primary"
-        style={{ float: 'right', marginLeft: '5px', visibility }}
-        onClick={rescanFiles}
-      >
-        <i className="fa fa-refresh" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-RescanBtn.propTypes = {
-  rescanFiles: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-};
-
-class FileItemsActionsRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.showReactions = this.showReactions.bind(this);
-    this.showMolecules = this.showMolecules.bind(this);
-    this.hideItems = this.hideItems.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.downloadFile = this.downloadFile.bind(this);
-  }
-
-  rescanFiles() {
-    const { rescanFiles, data } = this.props;
-
-    rescanFiles([data.id]);
-  }
-
-  showReactions() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'reactions');
-  }
-
-  showMolecules() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'molecules');
-  }
-
-  hideItems() {
-    const { hideItems, data } = this.props;
-    const { id, type } = data;
-
-    hideItems([id], type);
-  }
-
-  deleteItems() {
-    const { deleteItems, data } = this.props;
-    const { id, type, version } = data;
-
-    deleteItems([id], type, version);
-  }
-
-  downloadFile() {
-    const { downloadFile, data } = this.props;
-    const { id } = data;
-
-    downloadFile(id).then(res => (
-      res.response.blob()
-    )).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = data.fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    });
-  }
-
-  render() {
-    const { version, data } = this.props;
-    const { type } = data;
-
-    if (type.startsWith('Item')) return <span />;
-
-    return (
-      <div style={{ marginTop: '1px' }}>
-        <DeleteBtn deleteItems={this.deleteItems} data={data} />
-        <ShowHideBtn
-          showReactions={this.showReactions}
-          showMolecules={this.showMolecules}
-          hideItems={this.hideItems}
-          data={data}
-        />
-        <DownloadBtn downloadFile={this.downloadFile} data={data} />
-        <RescanBtn
-          rescanFiles={this.rescanFiles}
-          version={version}
-          data={data}
-        />
-      </div>
-    );
-  }
-}
-
-FileItemsActionsRenderer.propTypes = {
-  version: PropTypes.string.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemsActionsRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js b/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
deleted file mode 100644
index b9f18c544..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isApproved: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isApproved } = this.state;
-    let newValue;
-    if (isApproved === null) {
-      newValue = true;
-    } else if (isApproved) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isApproved: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isApproved === this.state.isApproved;
-  }
-
-  isFilterActive() {
-    return this.state.isApproved !== null;
-  }
-
-  render() {
-    const { isApproved } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-    if (isApproved === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isApproved) {
-      tooltipText = 'Show Approved';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Approved';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-approve--filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemApproveFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemApproveFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js b/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
deleted file mode 100644
index 2d19ad634..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.approveItem = this.approveItem.bind(this);
-  }
-
-  approveItem() {
-    const { approveItems, data } = this.props;
-    const { type, id, isApproved } = data;
-
-    const val = !(isApproved || false);
-    approveItems([id], type, val);
-  }
-
-  render() {
-    const { data } = this.props;
-    const { type, id, isApproved } = data;
-
-    if (type.startsWith('Item')) return <span />;
-    if (type === 'File' && !data.children) return <span />;
-
-    const tooltipId = `cs-approve-${type}-${id}-tooltip`;
-    const tooltip = <Tooltip id={tooltipId}>Approve</Tooltip>;
-
-    let bsStyle;
-    let icon;
-    if (isApproved) {
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      bsStyle = 'default';
-      icon = 'check-circle-o';
-    }
-
-    return (
-      <div style={{ marginTop: '-2px', paddingLeft: '15px' }}>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button bsSize="xsmall" bsStyle={bsStyle} onClick={this.approveItem}>
-            <i className={`fa fa-${icon}`} />
-          </Button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-}
-
-FileItemApproveRenderer.propTypes = {
-  approveItems: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemApproveRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js b/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
deleted file mode 100644
index 57be6256e..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Form, ControlLabel, Button } from 'react-bootstrap';
-
-import _ from 'lodash';
-
-class FileItemFileNameFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '', showArchived: false };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.toggleArchived = this.toggleArchived.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    const { text, showArchived } = this.state;
-    return { text, showArchived };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    const showArchived = model ? model.showArchived : false;
-
-    this.setState({ text, showArchived });
-  }
-
-  toggleArchived() {
-    this.setState({ showArchived: !this.state.showArchived }, this.debouncedChangedCallback);
-  }
-
-  doesFilterPass(params) {
-    const { text, showArchived } = this.state;
-
-    let iter = params.node;
-    while (iter.level > 0) iter = iter.parent;
-
-    const { fileName, extendedMetadata } = iter.data;
-    const passText = fileName.includes(text);
-    let { archived } = extendedMetadata;
-    if (archived == null) archived = false;
-
-    // If showArchived, check passText
-    if (showArchived) return passText;
-
-    // Otherwise, archived items will not passed
-    return passText && !archived;
-  }
-
-  isFilterActive() { return true; }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    const { showArchived } = this.state;
-
-    let textArchive;
-    let icon;
-    if (showArchived) {
-      textArchive = 'Hide';
-      icon = (
-        <span className="fa-stack" style={{ fontSize: '0.63em' }}>
-          <i className="fa fa-archive fa-stack-1x" />
-          <i className="fa fa-ban fa-stack-2x text-danger" />
-        </span>
-      );
-    } else {
-      textArchive = 'Show';
-      icon = (<i className="fa fa-archive" />);
-    }
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper file-filter" style={{ margin: '4px 4px 1px 4px' }}>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '30px' }}>
-                  File Name
-                </ControlLabel>
-                <input
-                  ref={this.inputRef}
-                  value={this.state.text}
-                  onChange={this.onChange}
-                  style={{ width: '65%' }}
-                  className="ag-filter-filter"
-                  placeholder="Filter ..."
-                />
-              </Form>
-            </div>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '5px', width: '89px' }}>
-                  {textArchive} Archived
-                </ControlLabel>
-                <Button bsSize="xsmall" onClick={this.toggleArchived}>
-                  {icon}
-                </Button>
-              </Form>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemFileNameFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemFileNameFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js b/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
deleted file mode 100644
index 510a003ab..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemImportedFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isImported: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isImported } = this.state;
-    let newValue;
-    if (isImported === null) {
-      newValue = true;
-    } else if (isImported) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isImported: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isImported === this.state.isImported;
-  }
-
-  isFilterActive() {
-    return this.state.isImported !== null;
-  }
-
-  render() {
-    const { isImported } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-
-    if (isImported === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isImported) {
-      tooltipText = 'Show Transferred';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Transferred';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-imported-filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemImportedFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemImportedFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js b/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
deleted file mode 100644
index f69f379b7..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const FileItemImportedRenderer = ({ data }) => {
-  const { type, isImported } = data;
-  if (type.endsWith('Summary')) return <span />;
-
-  let style;
-  let icon;
-
-  if (isImported) {
-    style = { color: '#5cb85c' };
-    icon = 'check-circle';
-  } else {
-    style = {};
-    icon = 'check-circle-o';
-  }
-
-  return (
-    <div style={{ paddingLeft: '30px' }}>
-      <i style={style} className={`fa fa-${icon}`} />
-    </div>
-  );
-};
-
-FileItemImportedRenderer.propTypes = {
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemImportedRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js b/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
deleted file mode 100644
index 89a766149..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ControlLabel, FormControl, Panel, Radio } from 'react-bootstrap';
-
-import PreviewFileZoomPan from './PreviewFileZoomPan';
-
-const PreviewEditor = ({ imageData, fileName }) => {
-  if (!imageData) return <span />;
-
-  return (
-    <Panel style={{ marginBottom: '0px', minHeight: '400px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <PreviewFileZoomPan
-          imageURL={imageData}
-          duration={200}
-        />
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-PreviewEditor.propTypes = {
-  imageData: PropTypes.string,
-  fileName: PropTypes.string.isRequired,
-};
-
-PreviewEditor.defaultProps = {
-  imageData: '',
-};
-
-const InfoEditor = ({ fileName, data }) => {
-  const {
-    domain, type, format, doi
-  } = data;
-
-  return (
-    <Panel style={{ marginBottom: '0px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <table className="cs-extended-metadata-table">
-          <tbody>
-            <tr>
-              <td style={{ width: '55px' }}>
-                <ControlLabel>Domain</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="organic"
-                  defaultChecked={domain === 'organic'}
-                >
-                  Organic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="inorganic"
-                  defaultChecked={domain === 'inorganic'}
-                >
-                  Inorganic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="solidPhase"
-                  defaultChecked={domain === 'solidPhase'}
-                >
-                  Solid Phase
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="heteroCyclic"
-                  defaultChecked={domain === 'heteroCyclic'}
-                >
-                  Hetero cyclic
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Type</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="published"
-                  defaultChecked={type === 'published'}
-                >
-                  Published
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="unpublished"
-                  defaultChecked={type === 'unpublished'}
-                >
-                  Never published
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Format</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="supportingInformation"
-                  defaultChecked={format === 'supportingInformation'}
-                >
-                  Supporting Information
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="manuscript"
-                  defaultChecked={format === 'manuscript'}
-                >
-                  Manuscript
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="review"
-                  defaultChecked={format === 'review'}
-                >
-                  Review
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="report"
-                  defaultChecked={format === 'report'}
-                >
-                  Report
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>DOI</ControlLabel>
-              </td>
-              <td colSpan={4}>
-                <FormControl
-                  type="text"
-                  id="doi_info"
-                  defaultValue={doi || ''}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-InfoEditor.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  fileName: PropTypes.string.isRequired,
-};
-
-class FileItemInformationEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.containerRef = React.createRef();
-
-    this.focus = this.focus.bind(this);
-  }
-
-  componentDidMount() {
-    this.focus();
-  }
-
-  componentDidUpdate() {
-    this.focus();
-  }
-
-  componentWillUnmount() {
-    const { type, data } = this.props;
-
-    const extData = data.extendedMetadata || {};
-
-    let query = 'input[name="domainGroup"]:checked';
-    const domain = this.containerRef.current.querySelector(query);
-    if (domain) {
-      extData.domain = domain.value;
-    } else {
-      delete extData.domain;
-    }
-
-    query = 'input[name="typeGroup"]:checked';
-    const typeInfo = this.containerRef.current.querySelector(query);
-    if (typeInfo) {
-      extData.type = typeInfo.value;
-    } else {
-      delete extData.type;
-    }
-
-    query = 'input[name="formatGroup"]:checked';
-    const format = this.containerRef.current.querySelector(query);
-    if (format) {
-      extData.format = format.value;
-    } else {
-      delete extData.format;
-    }
-
-    const doi = this.containerRef.current.querySelector('#doi_info');
-    if (doi) {
-      extData.doi = doi.value;
-    } else {
-      delete extData.doi;
-    }
-
-    data.extendedMetadata = extData;
-    this.props.doneEditing(type, data);
-  }
-
-  getValue() {
-    return this.props.data.type;
-  }
-
-  focus() {
-    if (this.containerRef.current) this.containerRef.current.focus();
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  isPopup() {
-    return true;
-  }
-
-  render() {
-    const { data, type } = this.props;
-    const { fileName, imageData, extendedMetadata } = data;
-
-    let editor = <span />;
-    if (type === 'preview') {
-      editor = <PreviewEditor imageData={imageData} fileName={fileName} />;
-    } else if (type === 'info') {
-      editor = <InfoEditor data={extendedMetadata} fileName={fileName} />;
-    }
-
-    return (
-      <div ref={this.containerRef}>
-        {editor}
-      </div>
-    );
-  }
-}
-
-FileItemInformationEditor.propTypes = {
-  type: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  doneEditing: PropTypes.func.isRequired
-};
-
-export default FileItemInformationEditor;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js b/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
deleted file mode 100644
index dac058d0e..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
-
-class FileItemInformationRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.getPreview = this.getPreview.bind(this);
-
-    this.setPreviewEdit = this.setPreviewEdit.bind(this);
-    this.setInfoEdit = this.setInfoEdit.bind(this);
-  }
-
-  getPreview() {
-    const { getPreview, node } = this.props;
-    const { id, type, schemeId } = node.data;
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    getPreview(itemId);
-  }
-
-  setPreviewEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const {
-      id, type, schemeId, imageData
-    } = node.data;
-
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    const shouldFetch = !imageData;
-    setEdit(rowIndex, itemId, shouldFetch, 'preview');
-  }
-
-  setInfoEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const { id } = node.data;
-    if (!id) return;
-
-    setEdit(rowIndex, id, false, 'info');
-  }
-
-  render() {
-    const { node } = this.props;
-    const { extendedMetadata, type, schemeCount } = node.data;
-
-    let previewOverlayBtn = <span />;
-
-    if (type === 'Scheme' || (type === 'File' && schemeCount === 1)) {
-      previewOverlayBtn = (
-        <Button
-          bsSize="xsmall"
-          onClick={this.setPreviewEdit}
-          style={{ marginRight: '5px', width: '25px' }}
-        >
-          <i className="fa fa-picture-o" />
-        </Button>
-      );
-    }
-
-    let extendedInfo = <span />;
-    if (type === 'File' && node.data.children) {
-      extendedInfo = (
-        <Button
-          bsSize="xsmall"
-          bsStyle="info"
-          style={{ marginRight: '5px', width: '25px' }}
-          onClick={this.setInfoEdit}
-        >
-          <i className="fa fa-info-circle" />
-        </Button>
-      );
-    }
-
-    let warningOverlay = <span />;
-    if (extendedMetadata) {
-      const { warnings } = extendedMetadata;
-
-      if (warnings && warnings.length > 0) {
-        const popoverId = `${node.data.id}-${type}-warning-popover`;
-        const warningPopover = (
-          <Popover id={popoverId}>
-            <ul>
-              {/* eslint-disable-next-line react/no-array-index-key */}
-              {warnings.map((w, idx) => <li key={idx}>{w}</li>)}
-            </ul>
-          </Popover>
-        );
-
-        warningOverlay = (
-          <OverlayTrigger trigger="click" placement="left" overlay={warningPopover}>
-            <Button bsSize="xsmall" bsStyle="warning" style={{ width: '25px' }}>
-              <i className="fa fa-exclamation-circle" />
-            </Button>
-          </OverlayTrigger>
-        );
-      }
-    }
-
-    return (
-      <div style={{ marginTop: '-2px' }}>
-        {previewOverlayBtn}
-        {warningOverlay}
-        {extendedInfo}
-      </div>
-    );
-  }
-}
-
-FileItemInformationRenderer.propTypes = {
-  getPreview: PropTypes.func.isRequired,
-  setEdit: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-  rowIndex: PropTypes.number.isRequired
-};
-
-export default FileItemInformationRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js b/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
deleted file mode 100644
index a110ffb7a..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import _ from 'lodash';
-
-class FileItemVersionFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '' };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.node.data.version === this.state.text;
-  }
-
-  isFilterActive() {
-    return this.state.text;
-  }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <input
-              ref={this.inputRef}
-              value={this.state.text}
-              onChange={this.onChange}
-              className="ag-filter-filter"
-              placeholder="Filter ..."
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemVersionFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemVersionFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileStorage.js b/app/packs/src/components/chemscanner/components/FileStorage.js
deleted file mode 100644
index fe15715ad..000000000
--- a/app/packs/src/components/chemscanner/components/FileStorage.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-import FileItemActionsHeader from './FileItemActionsHeader';
-
-import FileItemActionsRenderer from './FileItemActionsRenderer';
-import FileItemApproveRenderer from './FileItemApproveRenderer';
-import FileItemImportedRenderer from './FileItemImportedRenderer';
-import FileItemInformationRenderer from './FileItemInformationRenderer';
-
-import FileItemApproveFilter from './FileItemApproveFilter';
-import FileItemImportedFilter from './FileItemImportedFilter';
-import FileItemVersionFilter from './FileItemVersionFilter';
-import FileItemFileNameFilter from './FileItemFileNameFilter';
-
-import FileItemInformationEditor from './FileItemInformationEditor';
-
-import {
-  buildRowData,
-  versionGetter,
-  fileNameGetter,
-  getNodeChildDetails,
-} from './fileStorageUtils';
-
-export default class FileStorage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      editing: false,
-      editingType: null,
-      rowIndex: -1,
-    };
-
-    this.uploadInput = React.createRef();
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.beilsteinExport = this.beilsteinExport.bind(this);
-    this.showSelectedItems = this.showSelectedItems.bind(this);
-    this.openImportModal = this.openImportModal.bind(this);
-
-    this.setInformationEditing = this.setInformationEditing.bind(this);
-    this.doneEditing = this.doneEditing.bind(this);
-    this.toggleExpand = this.toggleExpand.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.unsetArchived = this.unsetArchived.bind(this);
-
-    this.columnDefs = [
-      {
-        headerName: 'File',
-        field: 'file',
-        filterFramework: FileItemFileNameFilter,
-        width: 250,
-        valueGetter: fileNameGetter,
-        headerCheckboxSelection: true,
-        headerCheckboxSelectionFilteredOnly: true,
-        cellRenderer: 'agGroupCellRenderer',
-        cellRendererParams: {
-          suppressCount: true,
-          checkbox: params => ['File', 'Scheme'].includes(params.data.type),
-        }
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-      {
-        headerName: 'Version',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemVersionFilter,
-        valueGetter: versionGetter,
-      },
-      {
-        headerName: 'Approved',
-        width: 100,
-        suppressSizeToFit: true,
-        filterFramework: FileItemApproveFilter,
-        cellRendererFramework: FileItemApproveRenderer,
-        cellRendererParams: { approveItems: props.approveItems },
-        field: 'isApproved'
-      },
-      {
-        headerName: 'Transferred',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemImportedFilter,
-        cellRendererFramework: FileItemImportedRenderer,
-        field: 'isImported'
-      },
-      {
-        headerName: 'Information',
-        field: 'information',
-        width: 115,
-        suppressSizeToFit: true,
-        cellRendererFramework: FileItemInformationRenderer,
-        editable: true,
-        cellEditorFramework: FileItemInformationEditor,
-        cellEditorParams: () => ({
-          type: this.state.editingType,
-          doneEditing: this.doneEditing,
-        }),
-        cellRendererParams: {
-          getPreview: props.getPreview,
-          setEdit: this.setInformationEditing,
-        },
-      },
-      {
-        headerName: '',
-        field: '',
-        width: 250,
-        filter: false,
-        headerClass: 'chemscanner-filestorage-action-header',
-        headerComponentFramework: FileItemActionsHeader,
-        headerComponentParams: {
-          uploadInput: this.uploadInput,
-          rescanFiles: this.rescanFiles,
-          deleteItems: this.deleteItems,
-          beilsteinExport: this.beilsteinExport,
-          showSelectedItems: this.showSelectedItems,
-          openImportModal: this.openImportModal,
-          setArchived: this.setArchived,
-          unsetArchived: this.unsetArchived
-        },
-        cellClass: 'chemscanner-filestorage-action-row',
-        cellRendererFramework: FileItemActionsRenderer,
-        cellRendererParams: {
-          version: props.version,
-          showItems: props.showItems,
-          rescanFiles: props.rescanFiles,
-          hideItems: props.hideItems,
-          downloadFile: props.downloadFile,
-          deleteItems: props.deleteItems
-        },
-      }
-    ];
-  }
-
-  componentDidUpdate() {
-    if (!this.gridApi || !this.gridColumnApi) return;
-
-    this.gridApi.sizeColumnsToFit();
-
-    const { rowIndex, editing } = this.state;
-    if (!editing) return;
-
-    this.gridApi.startEditingCell({ rowIndex, colKey: 'information' });
-  }
-
-  onGridReady(params) {
-    this.gridApi = params.api;
-    this.gridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-
-    // Must get the filter in order to trigger the filterChangedCallback
-    const fileFilter = this.gridApi.getFilterInstance('file');
-    if (!fileFilter) return;
-    this.gridApi.onFilterChanged();
-  }
-
-  setInformationEditing(rowIndex, itemId, shouldFetch, type) {
-    if (!this.gridApi) return;
-
-    const getPreview = () => this.props.getPreview(itemId);
-
-    if (shouldFetch) {
-      this.setState({ editing: true, editingType: type, rowIndex }, getPreview);
-    } else {
-      this.setState({ editing: true, editingType: type, rowIndex });
-    }
-  }
-
-  setArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  unsetArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  rescanFiles() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.rescanFiles(fileIds);
-  }
-
-  deleteItems() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    ['File', 'Scheme'].forEach((type) => {
-      const selectedItems = selected.filter(i => i.type === type);
-
-      const versionMap = {};
-      selectedItems.forEach((item) => {
-        const { id } = item;
-        const version = item.version || '';
-        const arr = versionMap[version];
-
-        if (arr) {
-          arr.push(id);
-        } else {
-          versionMap[version] = [id];
-        }
-      });
-
-      Object.keys(versionMap).forEach((version) => {
-        const ids = versionMap[version];
-        if (ids.length === 0) return;
-
-        this.props.deleteItems(ids, type, version);
-      });
-    });
-  }
-
-  beilsteinExport() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const selectedItems = selected.filter(i => i.type === 'File' && !i.parentId);
-
-    this.props.beilsteinExport(selectedItems.map(s => s.id));
-  }
-
-  showSelectedItems(showType) {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const ids = [];
-    selected.forEach((item) => {
-      const { type, schemeId, id } = item;
-      if (type === 'File' && schemeId) {
-        ids.push(item.schemeId);
-      } else if (type === 'Scheme') {
-        ids.push(id);
-      }
-    });
-
-    this.props.showItems(ids, 'Scheme', showType);
-  }
-
-  openImportModal() {
-    if (!this.gridApi) return;
-
-    const selectedRows = this.gridApi.getSelectedRows();
-    const files = selectedRows.filter(r => r.type === 'File');
-    const schemes = selectedRows.filter(r => r.type === 'Scheme');
-
-    this.props.openImportModal(files.concat(schemes));
-  }
-
-  doneEditing(editingType, data) {
-    if (editingType !== 'info') return;
-
-    const { id, type, extendedMetadata } = data;
-
-    this.setState({
-      editing: false, editingType: null, rowIndex: -1
-    }, () => this.props.updateMetadata(id, type, extendedMetadata));
-  }
-
-  toggleExpand(e) {
-    this.props.toggleExpand(e.data);
-  }
-
-  render() {
-    const {
-      files, schemes, reactions, molecules, uploadToStore
-    } = this.props;
-
-    const rowData = buildRowData(files, schemes, reactions, molecules);
-
-    const uploadFileToStore = (e) => {
-      uploadToStore(e.target.files);
-      this.uploadInput.current.value = '';
-    };
-
-    return (
-      <div style={{ margin: '20px 15px 0px 10px' }}>
-        <input
-          type="file"
-          multiple="multiple"
-          style={{ display: 'none' }}
-          ref={this.uploadInput}
-          onChange={uploadFileToStore}
-        />
-        <div className="ag-theme-balham" style={{ height: 'calc(100vh - 120px)' }}>
-          <AgGridReact
-            id="fileStorageGrid"
-            columnDefs={this.columnDefs}
-            rowData={rowData}
-            enableGroupEdit
-            groupSelectsFiltered
-            onRowGroupOpened={this.toggleExpand}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            suppressRowClickSelection
-            getNodeChildDetails={getNodeChildDetails}
-            onGridReady={this.onGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-FileStorage.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-  reactions: PropTypes.instanceOf(List).isRequired,
-  molecules: PropTypes.instanceOf(List).isRequired,
-  version: PropTypes.string,
-  approveItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  getPreview: PropTypes.func.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  updateMetadata: PropTypes.func.isRequired,
-  uploadToStore: PropTypes.func.isRequired,
-  toggleExpand: PropTypes.func.isRequired,
-};
-
-FileStorage.defaultProps = {
-  version: ''
-};
diff --git a/app/packs/src/components/chemscanner/components/ImportModal.js b/app/packs/src/components/chemscanner/components/ImportModal.js
deleted file mode 100644
index 02afc7054..000000000
--- a/app/packs/src/components/chemscanner/components/ImportModal.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection);
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const { options, newLabel, selected } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/packs/src/components/chemscanner/components/fileStorageUtils.js b/app/packs/src/components/chemscanner/components/fileStorageUtils.js
deleted file mode 100644
index ead4d38f2..000000000
--- a/app/packs/src/components/chemscanner/components/fileStorageUtils.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import { List, Map } from 'immutable';
-
-const selectFileChildren = (rowNode) => {
-  const { data, selected } = rowNode;
-
-  const isFileSelected = data.type === 'File';
-  if (!isFileSelected) return;
-
-  const { childrenAfterGroup } = rowNode;
-  if (!childrenAfterGroup) return;
-
-  const childrenSchemes = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'Scheme'
-  ));
-  const childrenFiles = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'File'
-  ));
-
-  childrenSchemes.forEach(node => node.setSelected(selected));
-  childrenFiles.forEach((node) => {
-    node.setSelected(selected);
-    selectFileChildren(node);
-  });
-};
-
-export const onRowSelected = (event) => {
-  selectFileChildren(event.node);
-};
-
-export const versionGetter = n => (n.data.type === 'Item' ? '' : n.data.version);
-export const fileNameGetter = n => (n.data[`${n.data.type.toLowerCase()}Name`]);
-
-export const getNodeChildDetails = (rowItem) => {
-  const { children, fileName, type } = rowItem;
-  if (!children || children.length === 0) return null;
-
-  let { expanded } = rowItem;
-  if (expanded == null) expanded = !(type === 'ItemSummary');
-
-  return {
-    group: true,
-    expanded,
-    children,
-    key: fileName
-  };
-};
-
-const addChildren = (file, child) => {
-  const children = file.children || [];
-  children.push(child);
-
-  // eslint-disable-next-line no-param-reassign
-  file.children = children;
-};
-
-const buildFileTree = (files) => {
-  const fileMap = {};
-  const jsFiles = [];
-
-  files.forEach((immuFile) => {
-    const file = immuFile.toJS();
-    file.type = 'File';
-
-    const extMData = file.extendedMetadata;
-    let expanded;
-    // eslint-disable-next-line prefer-destructuring
-    if (extMData) expanded = extMData.expanded;
-    if (expanded == null) expanded = true;
-    file.expanded = expanded;
-
-    const { id } = file;
-    fileMap[id] = file;
-
-    jsFiles.push(file);
-  });
-
-  jsFiles.forEach((file) => {
-    const { parentId } = file;
-    if (!parentId) return;
-
-    const parent = fileMap[parentId];
-    if (parent.display && !file.display) {
-      /* eslint-disable no-param-reassign */
-      file.display = parent.display;
-      file.show = parent.show;
-
-      const { expanded } = parent;
-      if (expanded != null) file.expanded = expanded;
-      /* eslint-enable no-param-reassign */
-    }
-
-    addChildren(parent, file);
-  });
-
-  const fileTree = Object.keys(fileMap).sort((a, b) => b - a).reduce((arr, fileId) => {
-    const file = fileMap[fileId];
-    const { parentId } = file;
-    if (parentId) return arr;
-
-    arr.push(file);
-    return arr;
-  }, []);
-
-  return { fileTree, fileMap };
-};
-
-const buildFileSchemeTree = (fileTree, fileMap, schemes, reactions, molecules) => {
-  const schemeArr = [];
-
-  schemes.forEach((immuScheme) => {
-    const scheme = immuScheme.toJS();
-
-    const extMData = immuScheme.get('extendedMetadata');
-    let expanded;
-    if (extMData) expanded = extMData.get('expanded');
-    if (expanded == null) expanded = true;
-    scheme.expanded = expanded;
-
-    schemeArr.push(scheme);
-
-    const { version, imageData } = scheme;
-    scheme.type = 'Scheme';
-
-    const file = fileMap[scheme.sourceId];
-    if (!file) return;
-
-    const { fileName } = file;
-
-    const noFileSchemes = schemes.filter(s => s.get('sourceId') === file.id).size;
-    file.schemeCount = noFileSchemes;
-    file.version = version;
-
-    let leaf = file;
-    if (noFileSchemes > 1) {
-      scheme.schemeName = `Scheme ${scheme.index + 1}`;
-      scheme.fileName = fileName;
-      addChildren(file, scheme);
-      leaf = scheme;
-    } else if (noFileSchemes === 1) {
-      file.schemeId = scheme.id;
-      file.schemeExtendedMetadata = scheme.extendedMetadata;
-      file.imageData = imageData;
-
-      if (scheme.show) file.show = true;
-    }
-
-    const type = 'Item';
-    const schemeMolecules = molecules.filter(m => m.get('schemeId') === scheme.id);
-    const schemeReactions = reactions.filter(r => r.get('schemeId') === scheme.id);
-
-    const approvedReactions = schemeReactions.filter(r => r.get('isApproved'));
-    const approvedMolecules = schemeMolecules.filter(m => m.get('isApproved'));
-    if (approvedReactions.size === schemeReactions.size &&
-        approvedMolecules.size === schemeMolecules.size) {
-      scheme.isApproved = true;
-    } else {
-      scheme.isApproved = false;
-    }
-
-    const importedReactions = schemeReactions.filter(r => r.get('importedId'));
-    const importedMolecules = schemeMolecules.filter(m => m.get('importedId'));
-    if (importedReactions.size === schemeReactions.size &&
-        importedMolecules.size === schemeMolecules.size) {
-      scheme.isImported = true;
-    } else {
-      scheme.isImported = false;
-    }
-
-    let moleculesWarnings = [];
-    const moleculeArr = [];
-    schemeMolecules.forEach((m) => {
-      const moleculeRow = {
-        id: m.get('id'),
-        type,
-        itemType: 'Molecule',
-        fileName,
-        isApproved: m.get('isApproved'),
-        isImported: !!m.get('importedId'),
-        itemName: `Molecule ${m.get('id')}`,
-      };
-
-      const extData = (m.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const mWarnings = warnings.map(w => `Molecule ${m.get('id')}: ${w}`);
-        moleculesWarnings = moleculesWarnings.concat(mWarnings);
-
-        moleculeRow.extendedMetadata = { warnings };
-      }
-
-      moleculeArr.push(moleculeRow);
-    });
-
-    const moleculeSummary = {
-      fileName,
-      itemsummaryName: `Molecules: ${scheme.moleculeCount}`,
-      type: 'ItemSummary',
-      itemType: 'Molecule',
-      version
-    };
-    if (moleculesWarnings.length > 0) {
-      moleculeSummary.extendedMetadata = { warnings: moleculesWarnings };
-    }
-    if (moleculeArr.length > 0) moleculeSummary.children = moleculeArr;
-    addChildren(leaf, moleculeSummary);
-
-    let reactionsWarnings = [];
-    const reactionArr = [];
-    schemeReactions.forEach((r) => {
-      const reactionRow = {
-        type,
-        id: r.get('id'),
-        itemType: 'Reaction',
-        fileName,
-        isApproved: r.get('isApproved'),
-        itemName: `Reaction ${r.get('id')}`,
-        isImported: !!r.get('importedId'),
-      };
-
-      const extData = (r.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const rWarnings = warnings.map(w => `Reaction ${r.get('id')}: ${w}`);
-        reactionsWarnings = reactionsWarnings.concat(rWarnings);
-
-        reactionRow.extendedMetadata = { warnings };
-      }
-
-      reactionArr.push(reactionRow);
-    });
-
-    const reactionSummary = {
-      fileName,
-      itemsummaryName: `Reactions: ${scheme.reactionCount}`,
-      type: 'ItemSummary',
-      itemType: 'Reaction',
-      version
-    };
-    if (reactionsWarnings.length > 0) {
-      reactionSummary.extendedMetadata = { warnings: reactionsWarnings };
-    }
-    if (reactionArr.length > 0) reactionSummary.children = reactionArr;
-    addChildren(leaf, reactionSummary);
-  });
-
-  return schemeArr;
-};
-
-export const buildRowData = (files, schemes, reactions, molecules) => {
-  const { fileTree, fileMap } = buildFileTree(files);
-  const schemeArr = buildFileSchemeTree(fileTree, fileMap, schemes, reactions, molecules);
-
-  // Dectect file approve
-  Object.values(fileMap).forEach((file) => {
-    const fileSchemes = schemeArr.filter(s => s.sourceId === file.id);
-
-    const numApprovedSchemes = fileSchemes.filter(s => s.isApproved).length;
-    if (fileSchemes.length === numApprovedSchemes && numApprovedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedSchemes = fileSchemes.filter(s => s.isImported).length;
-    if (fileSchemes.length === numImportedSchemes && numImportedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  Object.values(fileMap).forEach((file) => {
-    const { children } = file;
-    if (!children || children.length === 0) return;
-
-    if (children[0].type !== 'File') return;
-
-    const numApprovedChildren = children.filter(f => f.isApproved).length;
-    if (children.length === numApprovedChildren && numApprovedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedChildren = children.filter(f => f.isImported).length;
-    if (children.length === numImportedChildren && numImportedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  return fileTree;
-};
diff --git a/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js b/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
deleted file mode 100644
index b90e67d8e..000000000
--- a/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { setArchivedValue } from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import ArchivedManagement from '../components/ArchivedManagement';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-function ArchivedManagementContainer(props) {
-  const { files } = props;
-  const setArchivedValueFunc = props.setArchivedValue;
-
-  const archivedFiles = [];
-  const activedFiles = [];
-
-  files.forEach((f) => {
-    const file = f.toJS();
-    const { archived } = file.extendedMetadata;
-
-    if (archived == null || archived === false) {
-      activedFiles.push(file);
-    } else {
-      archivedFiles.push(file);
-    }
-  });
-
-  return (
-    <ArchivedManagement
-      archivedFiles={archivedFiles}
-      activedFiles={activedFiles}
-      setArchivedValue={setArchivedValueFunc}
-    />
-  );
-}
-
-ArchivedManagementContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ArchivedManagementContainer);
diff --git a/app/packs/src/components/chemscanner/containers/FileStorageContainer.js b/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
deleted file mode 100644
index bc26ca3a3..000000000
--- a/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import base64 from 'base-64';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import {
-  deleteItems,
-  beilsteinExport,
-  downloadFile,
-  getScannedOutputs,
-  hideItems,
-  approveItems,
-  retrieveStoredFiles,
-  rescanFiles,
-  saveImage,
-  uploadToStore,
-  fetchPreview,
-  updateMetadata,
-  setArchivedValue,
-  setExpand,
-  // updatePreview
-} from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import FileStorage from '../components/FileStorage';
-
-import { isPngImage, isSvgImage } from '../utils';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-  schemes: state.get('schemes'),
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-  ui: state.get('ui'),
-  cddInstance: state.get('chemdrawInstance'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  dispatch,
-  retrieveStoredFiles: () => dispatch(retrieveStoredFiles()),
-  uploadToStore: (files) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(uploadToStore(files)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  rescanFiles: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(rescanFiles(ids)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  showItems: (ids, type, display) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(getScannedOutputs(ids, type, display)).then((action) => {
-      const scannedSchemes = action.response.get('schemes');
-      if (!scannedSchemes || scannedSchemes.size === 0) {
-        dispatch({ type: types.UNSET_LOADING });
-        return;
-      }
-
-      const imageList = scannedSchemes.reduce((arr, scheme) => {
-        const imageData = scheme.get('pictureData') || '';
-        const id = scheme.get('id');
-        if (imageData.length === 0 || !id) return arr;
-
-        const isSaved = scheme.get('isSaved') || false;
-        if (isSaved) return arr;
-
-        const uuid = scheme.get('uuid');
-        arr.push({ id, fileUuid: uuid, imageData });
-        return arr;
-      }, []);
-
-      if (imageList.length > 0) {
-        saveImage(imageList);
-      }
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  hideItems: (ids, type) => dispatch(hideItems(ids, type)),
-  downloadFile: id => dispatch(downloadFile(id)),
-  toggleExpand: (data) => {
-    const { id, type } = data;
-    const value = !data.expanded;
-
-    const actionType = types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`];
-    if (actionType) dispatch(setExpand(id, type, value));
-
-    return null;
-  },
-  openImportModal: data => dispatch({ type: types.SET_IMPORT, data }),
-  deleteItems: (ids, type, version) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(deleteItems(ids, type, version)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  beilsteinExport: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return beilsteinExport(ids).then(res => res.json()).then((res) => {
-      const listFiles = res.files || [];
-
-      listFiles.forEach((file) => {
-        const raw = base64.decode(file.b64 || '');
-        const { length } = raw;
-        const ab = new ArrayBuffer(length);
-        const ia = new Uint8Array(ab);
-        for (let i = 0; i < length; i += 1) ia[i] = raw.charCodeAt(i);
-        const blob = new Blob([ab], { type: 'application/zip' });
-
-        const a = document.createElement('a');
-        a.style = 'display: none';
-        document.body.appendChild(a);
-        const url = window.URL.createObjectURL(blob);
-        a.href = url;
-        a.download = file.name;
-        a.click();
-        window.URL.revokeObjectURL(url);
-      });
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  approveItems: (ids, type, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(approveItems(ids, type, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  updateMetadata: (id, type, extendedMetadata) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateMetadata(id, type, extendedMetadata)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  getPreview: (id) => {
-    const { dispatch } = dispatchProps;
-    dispatch({ type: types.SET_LOADING });
-
-    return fetchPreview(id).then((res) => {
-      let imageData = res.image_data;
-      if (!imageData) return dispatch({ type: types.UNSET_LOADING });
-
-      const isPng = isPngImage(imageData);
-      const isSvg = isSvgImage(imageData);
-
-      let type = isPng ? 'image/png' : 'image/svg+xml';
-      if (!isPng && !isSvg) {
-        type = 'image/png';
-        const { cddInstance } = stateProps;
-
-        if (RegExp('<?xml.*').test(imageData)) {
-          cddInstance.loadCDXML(imageData);
-        } else {
-          cddInstance.loadB64CDX(imageData);
-        }
-
-        const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
-        imageData = `data:image/png;base64,${b64png}`;
-        cddInstance.clear();
-
-        saveImage([{ id, imageData }]);
-      }
-
-      const blob = new Blob([imageData], { type });
-      const objUrl = window.URL.createObjectURL(blob);
-
-      dispatch({ type: types.GET_SCHEME_PREVIEW, imageData: objUrl, id });
-
-      return dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-class FileStorageContainer extends React.Component {
-  componentDidMount() {
-    this.props.retrieveStoredFiles();
-  }
-
-  render() {
-    const { files, schemes, ui } = this.props;
-    const version = ui.get('version');
-    const reload = ui.get('reloadGrid');
-
-    return (
-      <FileStorage
-        {...this.props}
-        files={files}
-        schemes={schemes}
-        version={version}
-        reload={reload}
-      />
-    );
-  }
-}
-
-FileStorageContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(FileStorageContainer);
diff --git a/app/packs/src/components/chemscanner/containers/ImportModalContainer.js b/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
deleted file mode 100644
index 697c963fb..000000000
--- a/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import * as types from '../actions/ActionTypes';
-
-import { importData } from '../actions/storedFileActions';
-import ImportModal from '../components/ChemscannerImportModal';
-
-const ImportModalContainer = props => <ImportModal {...props} />;
-
-const fetchCollections = () => (
-  fetch('/api/v1/collections/all_as_tree', {
-    credentials: 'same-origin',
-    method: 'GET',
-  }).then(res => res.json())
-);
-
-const mapStateToProps = state => ({
-  show: state.get('ui').get('import'),
-  selectedItems: state.get('ui').get('selected'),
-  fetchCollections,
-});
-
-const mapDispatchToProps = dispatch => ({
-  closeModal: () => dispatch({ type: types.UNSET_IMPORT }),
-  importData: (data, collection, maintainShortLabel) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(importData(data, collection, maintainShortLabel)).then(() => (
-      dispatch({ type: types.UNSET_LOADING })
-    ));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ImportModalContainer);
diff --git a/app/packs/src/components/chemscanner/reactionUtils.js b/app/packs/src/components/chemscanner/reactionUtils.js
deleted file mode 100644
index bf940d5cc..000000000
--- a/app/packs/src/components/chemscanner/reactionUtils.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const getSchemeMolecules = (reaction, molecules) => {
-  const fileUid = reaction.get('fileUuid');
-  const schemeIdx = reaction.get('schemeIdx');
-
-  return molecules.filter(m => (
-    m.get('schemeIdx') === schemeIdx && m.get('fileUuid') === fileUid
-  ));
-};
-
-export const getReactionReactants = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reactantExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionReagents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reagentExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionSolvents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('solventExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionProducts = (reaction, reactionMolecules) => {
-  const ids = reaction.get('productExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionGroups = (reaction, molecules) => {
-  const reactionMolecules = getSchemeMolecules(reaction, molecules);
-
-  const reactants = getReactionReactants(reaction, reactionMolecules);
-  const reagents = getReactionReagents(reaction, reactionMolecules);
-  const solvents = getReactionSolvents(reaction, reactionMolecules);
-  const products = getReactionProducts(reaction, reactionMolecules);
-
-  return {
-    reactants, reagents, solvents, products
-  };
-};
diff --git a/app/packs/src/components/chemscanner/reducers/index.js b/app/packs/src/components/chemscanner/reducers/index.js
deleted file mode 100644
index 2423aadc7..000000000
--- a/app/packs/src/components/chemscanner/reducers/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import files from './files';
-import schemes from './schemes';
-import reactions from './reactions';
-import molecules from './molecules';
-import chemdrawInstance from './chemdrawInstance';
-import ui from './ui';
-
-export default combineReducers({
-  ui,
-  chemdrawInstance,
-  files,
-  schemes,
-  reactions,
-  molecules,
-});
diff --git a/app/packs/src/components/chemscanner/reducers/root.js b/app/packs/src/components/chemscanner/reducers/root.js
deleted file mode 100644
index 2423aadc7..000000000
--- a/app/packs/src/components/chemscanner/reducers/root.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import files from './files';
-import schemes from './schemes';
-import reactions from './reactions';
-import molecules from './molecules';
-import chemdrawInstance from './chemdrawInstance';
-import ui from './ui';
-
-export default combineReducers({
-  ui,
-  chemdrawInstance,
-  files,
-  schemes,
-  reactions,
-  molecules,
-});
diff --git a/app/packs/src/components/chemscanner/reducers/schemes.js b/app/packs/src/components/chemscanner/reducers/schemes.js
deleted file mode 100644
index 506578089..000000000
--- a/app/packs/src/components/chemscanner/reducers/schemes.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { List, Map, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const addSchemes = (state, action) => {
-  const { response } = action;
-  if (!response) return state;
-
-  let outputSchemes = response.get('schemes') || List();
-  if (outputSchemes.size === 0) return state;
-
-  outputSchemes = outputSchemes.map(s => s.delete('pictureData'));
-
-  return state.concat(outputSchemes);
-};
-
-const revokeImageData = (scheme) => {
-  const imageData = scheme.get('imageData');
-  if (!imageData || !imageData.startsWith('blob:')) return;
-
-  window.URL.revokeObjectURL(imageData);
-};
-
-const schemes = createReducer(List(), {
-  [types.SCAN_FILE_FOR_MOLECULES]: addSchemes,
-  [types.SCAN_FILE_FOR_REACTIONS]: addSchemes,
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const outputSchemes = response.get('schemes') || [];
-    let newState = state;
-
-    outputSchemes.forEach((scheme) => {
-      const idx = newState.findIndex(s => s.get('id') === scheme.get('id'));
-      if (idx < 0) return;
-
-      const newScheme = scheme.delete('pictureData').set('show', true);
-      newState = newState.update(idx, s => s.merge(newScheme));
-    });
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedSchemes = response.schemes;
-    if (!storedSchemes) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newSchemes = storedSchemes.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newSchemes));
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const newSchemes = response.get('schemes');
-    if (!newSchemes || newSchemes.size === 0) return state;
-
-    return state.concat(newSchemes);
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state;
-    if (fileUid) {
-      const deleteIdx = [];
-      newState = state.map((s, idx) => {
-        if (s.get('fileUuid') === fileUid) {
-          deleteIdx.push(idx);
-          return s.set('display', '').set('show', false);
-        }
-
-        return s;
-      });
-
-      // Delete if not logged-in user
-      const firstScheme = newState.get(0);
-      if (firstScheme && !firstScheme.get('id')) {
-        deleteIdx.reverse().forEach((idx) => {
-          const s = newState.get(idx);
-          revokeImageData(s);
-          newState = newState.delete(idx);
-        });
-      }
-    }
-
-    if (ids.length > 0) {
-      newState = state.map((s) => {
-        const check = (
-          ids.includes(s.get('sourceId')) || ids.includes(s.get('id'))
-        );
-        if (check) return s.set('display', '').set('show', false);
-
-        return s;
-      });
-    }
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    const ids = action.ids || [];
-
-    return state.map(s => (
-      ids.includes(s.get('id')) ? s.set('display', '').set('show', false) : s
-    ));
-  },
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const source = action.response.get('source') || [];
-    const scheme = action.response.get('scheme') || [];
-    if (!source && !scheme) return state;
-
-    state.filter(s => source.includes(s.get('sourceId'))).forEach(s => revokeImageData(s));
-    state.filter(s => scheme.includes(s.get('id'))).forEach(s => revokeImageData(s));
-
-    const newState = state.filterNot(s => source.includes(s.get('sourceId')));
-    return newState.filterNot(s => scheme.includes(s.get('id')));
-  },
-  [types.GET_SCHEME_PREVIEW]: (state, action) => {
-    const { id, imageData } = action;
-    const idx = state.findIndex(s => s.get('id') === id);
-
-    return state.update(idx, s => s.set('imageData', imageData));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.TOGGLE_SCHEME_EXPAND]: (state, action) => {
-    const { id } = action;
-    if (!id) return state;
-
-    const idx = state.findIndex(s => s.get('id') === id);
-    if (idx < 0) return state;
-
-    return state.update(idx, (s) => {
-      const expanded = s.get('expanded') || false;
-
-      let metadata = s.get('extendedMetadata') || Map();
-      metadata = metadata.set('expanded', !expanded);
-
-      return s.set('extendedMetadata', metadata).set('expanded', !expanded);
-    });
-  }
-});
-
-export default schemes;
diff --git a/app/packs/src/components/common/HelpInfo.js b/app/packs/src/components/common/HelpInfo.js
index 373fcb985..68ed7235c 100644
--- a/app/packs/src/components/common/HelpInfo.js
+++ b/app/packs/src/components/common/HelpInfo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import helpDescs from '../utils/helpDescs';
+import helpDescs from 'src/components/utils/helpDescs';
 
 const HelpInfo = props => (
   helpDescs[props.source] !== undefined ?
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 6f2ba7203..2f19c0174 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -1,12 +1,11 @@
 // PLEASE check carefully when performing ELN rebasing
 import React, { Component, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button } from 'react-bootstrap';
+import { Modal, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import { stopEvent } from 'src/utilities/DomHelper';
-import { Modal, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { Document, Page, pdfjs } from 'react-pdf';
-import UserStore from '../stores/UserStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 const defaultImageStyle = {
diff --git a/app/packs/src/components/common/NewsPreviewModal.js b/app/packs/src/components/common/NewsPreviewModal.js
index e7be6488c..815f0fe45 100644
--- a/app/packs/src/components/common/NewsPreviewModal.js
+++ b/app/packs/src/components/common/NewsPreviewModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Panel, Modal } from 'react-bootstrap';
-import QuillViewer from '../../components/QuillViewer';
+import QuillViewer from 'src/components/QuillViewer';
 
 const NewsPreviewModal = ({ showModal, article, onClick }) => {
   return (
diff --git a/app/packs/src/components/container/ContainerDataset.js b/app/packs/src/components/container/ContainerDataset.js
index 0730c8272..f9adf1c8f 100644
--- a/app/packs/src/components/container/ContainerDataset.js
+++ b/app/packs/src/components/container/ContainerDataset.js
@@ -30,9 +30,6 @@ import HyperLinksSection from 'src/components/common/HyperLinksSection';
 import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
 import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
 
-import { absOlsTermId } from '../admin/generic/Utils';
-import Container from './models/Container';
-
 export default class ContainerDataset extends Component {
   constructor(props) {
     super();
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index 5aab082f0..1472c6ba3 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -9,7 +9,7 @@ import { absOlsTermId } from 'chem-generic-ui';
 import { GenericDSMisType } from 'src/apps/generic/Utils';
 
 // For REPO
-import PublicFetcher from './fetchers/PublicFetcher';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
 
 const dataTarget = {
   canDrop(props, monitor) {
diff --git a/app/packs/src/components/contextActions/ContextActions.js b/app/packs/src/components/contextActions/ContextActions.js
index b801e1892..efa1e7108 100644
--- a/app/packs/src/components/contextActions/ContextActions.js
+++ b/app/packs/src/components/contextActions/ContextActions.js
@@ -67,15 +67,15 @@ export default class ContextActions extends React.Component {
         <ButtonGroup style={{ marginLeft: '10px' }}>
           <CreateButton isDisabled={this.isCreateDisabled()} customClass={customClass} />
         </ButtonGroup>
-        <ButtonGroup style={{ marginLeft: '10px' }}>
+        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <ScanCodeButton customClass={customClass} />
-        </ButtonGroup>
+        </ButtonGroup> */}
         {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <InboxButton />
         </ButtonGroup> */}
-        <ButtonGroup style={{ marginLeft: '10px' }}>
+        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <SampleTaskNavigationElement />
-        </ButtonGroup>
+        </ButtonGroup> */}
         <ButtonGroup style={{ marginLeft: '20px' }}>
           <NoticeButton />
         </ButtonGroup>
diff --git a/app/packs/src/components/contextActions/CreateButton.js b/app/packs/src/components/contextActions/CreateButton.js
index 41cd50eee..f2676129f 100644
--- a/app/packs/src/components/contextActions/CreateButton.js
+++ b/app/packs/src/components/contextActions/CreateButton.js
@@ -263,11 +263,11 @@ export default class CreateButton extends React.Component {
     const { layout } = this.state;
     const type = UserStore.getState().currentType;
     const elements = [
-      { name: 'sample', label: 'Sample', isDefault: true },
-      { name: 'reaction', label: 'Reaction', isDefault: true },
-      // { name: 'wellplate', label: 'Wellplate', isDefault: true },
-      // { name: 'screen', label: 'Screen', isDefault: true },
-      { name: 'research_plan', label: 'Research Plan', isDefault: true }
+      { name: 'sample', label: 'Sample' },
+      { name: 'reaction', label: 'Reaction' },
+      { name: 'wellplate', label: 'Wellplate' },
+      { name: 'screen', label: 'Screen' },
+      { name: 'research_plan', label: 'Research Plan' }
     ];
     let genericEls = [];
     const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
@@ -295,8 +295,8 @@ export default class CreateButton extends React.Component {
         >
           {/* {this.createWellplateModal()} */}
           {itemTables}
-          {/* <MenuItem divider /> */}
-          {/* <MenuItem onSelect={() => this.createWellplateFromSamples()}>Create Wellplate from Samples</MenuItem>
+          {/* <MenuItem divider />
+          <MenuItem onSelect={() => this.createWellplateFromSamples()}>Create Wellplate from Samples</MenuItem>
           <MenuItem onSelect={() => this.createScreenFromWellplates()}>Create Screen from Wellplates</MenuItem> */}
           <MenuItem divider />
           <MenuItem onSelect={() => this.copySample()} disabled={this.isCopySampleDisabled()}>Copy Sample</MenuItem>
diff --git a/app/packs/src/components/contextActions/ExportImportButton.js b/app/packs/src/components/contextActions/ExportImportButton.js
index 18b1766b7..813b1fb53 100644
--- a/app/packs/src/components/contextActions/ExportImportButton.js
+++ b/app/packs/src/components/contextActions/ExportImportButton.js
@@ -31,17 +31,62 @@ function ExportImportButton({ isDisabled, updateModalProps, customClass }) {
       >
         Publish current collection via RADAR
       </MenuItem>
-      <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
-        title='Import collections from ZIP archive'>
-        Import collections
-      </MenuItem>
-      {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
-      {/*   title='Import from Docs'> */}
-      {/*   Import elements from Docs */}
-      {/* </MenuItem> */}
-    </Dropdown.Menu>
-  </Dropdown>
-);
+    </>
+  ) : <span />;
+
+  return (
+    <Dropdown id="export-dropdown">
+      <Dropdown.Toggle className={customClass}>
+        <Glyphicon glyph="import" />
+        <Glyphicon glyph="export" />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <MenuItem
+          onSelect={() => exportFunction(updateModalProps)}
+          title="Export to spreadsheet"
+        >
+          Export samples from selection
+        </MenuItem>
+        <MenuItem
+          onSelect={() => exportReactionFunction(updateModalProps)}
+          title="Export reaction smiles to csv"
+        >
+          Export reactions from selection
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem
+          onSelect={() => importSampleFunction(updateModalProps, false)}
+          disabled={isDisabled}
+          title="Import from spreadsheet or sdf"
+        >
+          Import samples to collection
+        </MenuItem>
+        <MenuItem
+          onSelect={() => importSampleFunction(updateModalProps, true)}
+          disabled={isDisabled}
+          title="Import chemicals from spreadsheet"
+        >
+          Import chemicals to collection
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem
+          onSelect={() => exportCollectionFunction(updateModalProps)}
+          title="Export as ZIP archive"
+        >
+          Export collections
+        </MenuItem>
+        <MenuItem
+          onSelect={() => importCollectionFunction(updateModalProps)}
+          title="Import collections from ZIP archive"
+        >
+          Import collections
+        </MenuItem>
+
+        {showRadar}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
 
 ExportImportButton.propTypes = {
   isDisabled: PropTypes.bool,
diff --git a/app/packs/src/components/contextActions/ReportUtilButton.js b/app/packs/src/components/contextActions/ReportUtilButton.js
index bcf844f42..7ed171495 100644
--- a/app/packs/src/components/contextActions/ReportUtilButton.js
+++ b/app/packs/src/components/contextActions/ReportUtilButton.js
@@ -76,8 +76,8 @@ const ReportUtilButton = ({ customClass, isDisabled=false  }) => {
         <MenuItem onSelect={ElementActions.showLiteratureDetail} title="Reference Manager">
           Reference Manager
         </MenuItem>
-        {graph}
-        {task}
+        {/* {graph}
+        {task} */}
         {divider}
         {predDiv}
       </Dropdown.Menu>
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
deleted file mode 100644
index 56dac03db..000000000
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import 'whatwg-fetch';
-
-export default class GenericBaseFetcher {
-  static open(path, method) {
-    return fetch(`/api/v1/labimotion_hub/${path}`, { credentials: 'same-origin', method })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static exec(path, method) {
-    return fetch(`/api/v1/${path}`, { credentials: 'same-origin', method })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static execData(params, path, method = 'POST') {
-    return fetch(`/api/v1/${path}`, {
-      credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deActivateKlass(params) {
-    return fetch('/api/v1/generic_elements/de_activate_klass', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deleteKlass(params) {
-    return fetch(`/api/v1/generic_elements/delete_klass/${params.id}`, {
-      credentials: 'same-origin', method: 'DELETE', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deleteKlassRevision(params) {
-    return fetch('/api/v1/generic_elements/delete_klass_revision', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchKlassRevisions(id, klass) {
-    return fetch(`/api/v1/generic_elements/klass_revisions.json?id=${id}&klass=${klass}`, { credentials: 'same-origin' })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static updateTemplate(params) {
-    return fetch('/api/v1/generic_elements/update_template', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/GenericSgsFetcher.js b/app/packs/src/components/fetchers/GenericSgsFetcher.js
deleted file mode 100644
index 2bb6496ac..000000000
--- a/app/packs/src/components/fetchers/GenericSgsFetcher.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import GenericBaseFetcher from './GenericBaseFetcher';
-
-export default class GenericSgsFetcher extends GenericBaseFetcher {
-  static open(path, method) { return super.open(path, method); }
-  static exec(path, method) { return super.exec(`segments/${path}`, method); }
-  static execData(params, path) { return super.execData(params, `segments/${path}`); }
-
-  static fetchKlassOpen() {
-    return this.open('/list?klass=SegmentKlass', 'GET');
-  }
-
-  static createSegmentKlass(params) {
-    return this.execData(params, 'create_segment_klass');
-  }
-
-  static fetchKlass(elementName = null) {
-    const api = (elementName == null) ? 'klasses.json' : `klasses.json?element=${elementName}`;
-    return this.exec(api, 'GET');
-  }
-
-  static listSegmentKlass(params = {}) {
-    const api = params.is_active === undefined ? 'list_segment_klass.json' : `list_segment_klass.json?is_active=${params.is_active}`;
-    return this.exec(api, 'GET');
-  }
-
-  static updateSegmentKlass(params) {
-    return this.execData(params, 'update_segment_klass');
-  }
-
-  static updateSegmentTemplate(params) {
-    return super.updateTemplate({ ...params, klass: 'SegmentKlass' }, 'update_segment_template');
-  }
-}
diff --git a/app/packs/src/components/metadata/MetadataAlternateIdentifiers.js b/app/packs/src/components/metadata/MetadataAlternateIdentifiers.js
index ad481115e..aa3ea70d6 100644
--- a/app/packs/src/components/metadata/MetadataAlternateIdentifiers.js
+++ b/app/packs/src/components/metadata/MetadataAlternateIdentifiers.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
-import MetadataAlternateIdentifier from './MetadataAlternateIdentifier'
+import MetadataAlternateIdentifier from 'src/components/metadata/MetadataAlternateIdentifier'
 
 const MetadataAlternateIdentifiers = ({ metadata, onAdd, onChange, onRemove }) => {
   return (
diff --git a/app/packs/src/components/metadata/MetadataContainer.js b/app/packs/src/components/metadata/MetadataContainer.js
index 2580cf30c..28ac9068c 100644
--- a/app/packs/src/components/metadata/MetadataContainer.js
+++ b/app/packs/src/components/metadata/MetadataContainer.js
@@ -4,18 +4,18 @@ import { Panel, Tabs, Tab } from 'react-bootstrap';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import Metadata from 'src/models/Metadata';
 import UIStore from 'src/stores/alt/stores/UIStore';
-import DetailActions from 'src/stores/alt/actions/DetailActions'
-import ElementActions from 'src/stores/alt/actions/ElementActions'
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 
-import MetadataHeader from './MetadataHeader'
-import MetadataGeneral from './MetadataGeneral'
-import MetadataCreators from './MetadataCreators'
-import MetadataContributors from './MetadataContributors'
-import MetadataAlternateIdentifiers from './MetadataAlternateIdentifiers'
-import MetadataRelatedIdentifiers from './MetadataRelatedIdentifiers'
-import MetadataRightsList from './MetadataRightsList'
-import MetadataFundingReferences from './MetadataFundingReferences'
+import MetadataHeader from 'src/components/metadata/MetadataHeader'
+import MetadataGeneral from 'src/components/metadata/MetadataGeneral'
+import MetadataCreators from 'src/components/metadata/MetadataCreators'
+import MetadataContributors from 'src/components/metadata/MetadataContributors'
+import MetadataAlternateIdentifiers from 'src/components/metadata/MetadataAlternateIdentifiers'
+import MetadataRelatedIdentifiers from 'src/components/metadata/MetadataRelatedIdentifiers'
+import MetadataRightsList from 'src/components/metadata/MetadataRightsList'
+import MetadataFundingReferences from 'src/components/metadata/MetadataFundingReferences'
 
 export default class MetadataContainer extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/metadata/MetadataContributors.js b/app/packs/src/components/metadata/MetadataContributors.js
index 7f8d71933..41b289ea9 100644
--- a/app/packs/src/components/metadata/MetadataContributors.js
+++ b/app/packs/src/components/metadata/MetadataContributors.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
-import MetadataContributor from './MetadataContributor';
+import MetadataContributor from 'src/components/metadata/MetadataContributor';
 
 const MetadataContributors = ({ metadata, onAdd, onChange, onRemove }) => (
   <div>
diff --git a/app/packs/src/components/metadata/MetadataCreators.js b/app/packs/src/components/metadata/MetadataCreators.js
index a563ca73f..5af4e9d4e 100644
--- a/app/packs/src/components/metadata/MetadataCreators.js
+++ b/app/packs/src/components/metadata/MetadataCreators.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
-import MetadataCreator from './MetadataCreator';
+import MetadataCreator from 'src/components/metadata/MetadataCreator';
 
 const MetadataCreators = ({ metadata, onAdd, onChange, onRemove }) => (
   <div>
diff --git a/app/packs/src/components/metadata/MetadataFundingReferences.js b/app/packs/src/components/metadata/MetadataFundingReferences.js
index 57b8ff2aa..d0c5ded69 100644
--- a/app/packs/src/components/metadata/MetadataFundingReferences.js
+++ b/app/packs/src/components/metadata/MetadataFundingReferences.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
-import MetadataFundingReference from './MetadataFundingReference'
+import MetadataFundingReference from 'src/components/metadata/MetadataFundingReference'
 
 const MetadataFundingReferences = ({ metadata, onAdd, onChange, onRemove }) => {
   return (
diff --git a/app/packs/src/components/metadata/MetadataRelatedIdentifiers.js b/app/packs/src/components/metadata/MetadataRelatedIdentifiers.js
index d885c99e5..6a2cc81c9 100644
--- a/app/packs/src/components/metadata/MetadataRelatedIdentifiers.js
+++ b/app/packs/src/components/metadata/MetadataRelatedIdentifiers.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
-import MetadataRelatedIdentifier from './MetadataRelatedIdentifier'
+import MetadataRelatedIdentifier from 'src/components/metadata/MetadataRelatedIdentifier'
 
 const MetadataRelatedIdentifiers = ({ metadata, onAdd, onChange, onRemove }) => {
   return (
diff --git a/app/packs/src/components/navigation/Navigation.js b/app/packs/src/components/navigation/Navigation.js
index 8fb17468c..1a2b30a4f 100644
--- a/app/packs/src/components/navigation/Navigation.js
+++ b/app/packs/src/components/navigation/Navigation.js
@@ -10,7 +10,7 @@ import UserActions from 'src/stores/alt/actions/UserActions';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import NavNewSession from 'src/components/navigation/NavNewSession'
-import NavHead from 'src/components/navigation/NavHead'
+import NavHead from 'src/components/navigation/RepoNavHead';
 import DocumentHelper from 'src/utilities/DocumentHelper';
 import NavigationModal from 'src/components/navigation/NavigationModal';
 import SearchFilter from 'src/components/navigation/search/SearchFilter.js'
diff --git a/app/packs/src/components/navigation/RepoNavHead.js b/app/packs/src/components/navigation/RepoNavHead.js
new file mode 100644
index 000000000..55449ffe5
--- /dev/null
+++ b/app/packs/src/components/navigation/RepoNavHead.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';
+
+const Title = <span><img alt="chemotion-" src="/images/repo/logo.png" style={{ width: '20%' }} /> Repository</span>
+
+function NavHead() {
+  const isOnMydb = window.location.href.match(/\/mydb/);
+  return (
+    <Navbar.Brand>
+      <NavDropdown title={Title} className="navig-brand navig-smaller-font" id="bg-nested-dropdown-brand">
+        <MenuItem eventKey="21" href="/home/welcome/">
+          Home
+        </MenuItem>
+        <MenuItem eventKey="22" href="/home/publications">
+          Publications
+        </MenuItem>
+        <MenuItem eventKey="23" href="/home/about">
+          About
+        </MenuItem>
+        <MenuItem eventKey="24" href="/home/directive">
+          Directive
+        </MenuItem>
+      </NavDropdown>
+    </Navbar.Brand>
+  );
+}
+
+NavHead.propTypes = {
+};
+
+export default NavHead;
diff --git a/app/packs/src/components/navigation/UserAuth.js b/app/packs/src/components/navigation/UserAuth.js
index 86eab2228..bdeb3accb 100644
--- a/app/packs/src/components/navigation/UserAuth.js
+++ b/app/packs/src/components/navigation/UserAuth.js
@@ -31,8 +31,8 @@ import MatrixCheck from 'src/components/common/MatrixCheck';
 import GroupElement from 'src/components/navigation/GroupElement';
 import { formatDate } from 'src/utilities/timezoneHelper';
 
-import Functions from './utils/Functions';
-import AuthorModal from './users/AuthorModal';
+import Functions from 'src/utilities/Functions';
+import AuthorModal from 'src/components/users/AuthorModal';
 
 export default class UserAuth extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/navigation/search/SearchFilter.js b/app/packs/src/components/navigation/search/SearchFilter.js
index 8211efe63..2944f71bb 100644
--- a/app/packs/src/components/navigation/search/SearchFilter.js
+++ b/app/packs/src/components/navigation/search/SearchFilter.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {Button, FormControl, ButtonGroup, OverlayTrigger, Tooltip} from 'react-bootstrap'
 import Select from 'react-select'
 import UIActions from 'src/stores/alt/actions/UIActions';
-import PublicFetcher from '../fetchers/PublicFetcher';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
 
 export default class SearchFilter extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/report/SectionDoiList.js b/app/packs/src/components/report/SectionDoiList.js
index 283a60f82..e278b9d22 100644
--- a/app/packs/src/components/report/SectionDoiList.js
+++ b/app/packs/src/components/report/SectionDoiList.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import SVG from 'react-inlinesvg';
 import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import ReportActions from '../actions/ReportActions';
-import ReportStore from '../stores/ReportStore';
-import { UserSerial } from '../utils/ReportHelper';
-import ReportsFetcher from '../fetchers/ReportsFetcher';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import ReportStore from 'src/stores/alt/stores/ReportStore';
+import { UserSerial } from 'src/utilities/ReportHelper';
+import ReportsFetcher from 'src/fetchers/ReportsFetcher';
 
 
 const svgPath = (svg, type) => {
diff --git a/app/packs/src/components/search/SampleCriteria.js b/app/packs/src/components/search/SampleCriteria.js
index da55633b3..42d74969b 100644
--- a/app/packs/src/components/search/SampleCriteria.js
+++ b/app/packs/src/components/search/SampleCriteria.js
@@ -3,8 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Row, Col } from 'react-bootstrap';
 import { findIndex } from 'lodash';
-import { GenFormGroup, GenFormGroupCb, GenFormGroupSel, SegmentCriteria } from 'chem-generic-ui';
-import { segmentsByKlass } from '../../generic/Utils';
+import { GenFormGroup, GenFormGroupCb, GenFormGroupSel, SegmentCriteria, segmentsByKlass } from 'chem-generic-ui';
 
 const buildCriteria = (props) => {
   const { sample } = props;
diff --git a/app/packs/src/components/search/SampleFormCriteria.js b/app/packs/src/components/search/SampleFormCriteria.js
index 737b77e0b..5073bcfe4 100644
--- a/app/packs/src/components/search/SampleFormCriteria.js
+++ b/app/packs/src/components/search/SampleFormCriteria.js
@@ -5,10 +5,6 @@ import {
   Table, Glyphicon, Tabs, Tab, OverlayTrigger, Tooltip
 } from 'react-bootstrap';
 import Select from 'react-select';
-// import DetailActions from '../actions/DetailActions';
-// import NumeralInputWithUnitsCompo from '../NumeralInputWithUnitsCompo';
-// import TextRangeWithAddon from '../TextRangeWithAddon';
-// import PrivateNoteElement from '../PrivateNoteElement';
 
 export default class SampleFormCriteria extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/components/sso/LoginOptions.js b/app/packs/src/components/sso/LoginOptions.js
deleted file mode 100644
index 1f512866d..000000000
--- a/app/packs/src/components/sso/LoginOptions.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import {
-  Row,
-  Col,
-  Grid,
-  Button
-} from 'react-bootstrap';
-import uuid from 'uuid';
-import UserStore from '../stores/UserStore';
-import UserActions from '../actions/UserActions';
-
-export default class LoginOptions extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      omniauthProviders: []
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchOmniauthProviders();
-  }
-
-  onChange(state) {
-    const { omniauthProviders } = this.state;
-    if (state?.omniauthProviders !== omniauthProviders) {
-      this.setState({
-        omniauthProviders: state.omniauthProviders
-      });
-    }
-  }
-
-  render() {
-    const { omniauthProviders } = this.state;
-    const keys = Object.keys(omniauthProviders);
-    if (keys.length === 0) return (<span />);
-    const items = keys.map((key) => (
-      <Col key={uuid.v1()} md={12 / keys.length} className="login-options">
-        <Button href={`/users/auth/${key}`}>
-          Login with &nbsp;
-          <img src={`/images/providers/${omniauthProviders[key].icon}`} className="kit-logo" alt={key} title={key} />
-        </Button>
-      </Col>
-    ));
-
-    return (
-      <Grid>
-        <Row>
-          {items}
-        </Row>
-      </Grid>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('LoginOptions');
-  if (domElement) { ReactDOM.render(<LoginOptions />, domElement); }
-});
diff --git a/app/packs/src/components/structureEditor/StructureEditorModal.js b/app/packs/src/components/structureEditor/StructureEditorModal.js
index 3968f8b9b..306055d25 100644
--- a/app/packs/src/components/structureEditor/StructureEditorModal.js
+++ b/app/packs/src/components/structureEditor/StructureEditorModal.js
@@ -57,12 +57,10 @@ const WarningBox = ({ handleCancelBtn, hideWarning, show }) => (show ?
         <p>This sample has parents or descendants, and they will not be changed.</p>
         <p>Are you sure?</p>
         <br />
-        <Button bsStyle="danger" onClick={handleCancelBtn}
-          className="g-marginLeft--10">
+        <Button bsStyle="danger" onClick={handleCancelBtn} className="g-marginLeft--10">
           Cancel
         </Button>
-        <Button bsStyle="warning" onClick={hideWarning}
-          className="g-marginLeft--10">
+        <Button bsStyle="warning" onClick={hideWarning} className="g-marginLeft--10">
           Continue Editing
         </Button>
       </Panel.Body>
@@ -99,10 +97,11 @@ export default class StructureEditorModal extends React.Component {
     this.updateEditor = this.updateEditor.bind(this);
   }
 
-    this.handleEditorSelection = this.handleEditorSelection.bind(this);
+  componentDidMount() {
+    UserStore.listen(this.onChangeUser);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       showModal: nextProps.showModal,
       molfile: nextProps.molfile
@@ -149,11 +148,11 @@ export default class StructureEditorModal extends React.Component {
 
   initializeEditor() {
     const { editor, molfile } = this.state;
-    editor.molfile = molfile;
+    if (editor) { editor.structureDef.molfile = molfile; }
   }
 
   handleEditorSelection(e) {
-    this.setState(prevState => ({ ...prevState, editor: this.props.editors[e.value] }));
+    this.setState(prevState => ({ ...prevState, editor: this.editors[e.value] }));
   }
 
   handleCancelBtn() {
@@ -212,10 +211,9 @@ export default class StructureEditorModal extends React.Component {
     const handleSaveBtn = !this.props.onSave ? null : this.handleSaveBtn.bind(this);
     const { cancelBtnText, submitBtnText } = this.props;
     const submitAddons = this.props.submitAddons ? this.props.submitAddons : '';
-    const { editor, showWarning } = this.state;
-
+    const { editor, showWarning, molfile } = this.state;
     const iframeHeight = showWarning ? '0px' : '730px';
-    const iframeStyle = showWarning ? { border: 'none' } : { };
+    const iframeStyle = showWarning ? { border: 'none' } : {};
     const buttonToolStyle = showWarning ? { marginTop: '20px', display: 'none' } : { marginTop: '20px' };
 
     let useEditor = (
@@ -261,10 +259,12 @@ export default class StructureEditorModal extends React.Component {
         >
           <Modal.Header closeButton>
             <Modal.Title>
-              <EditorSelector
-                value={editor}
-                updateEditorSelection={this.handleEditorSelection}
+              <EditorList
+                value={editor.id}
+                fnChange={this.handleEditorSelection}
+                options={editorOptions}
               />
+              {citeMarvin}
             </Modal.Title>
           </Modal.Header>
           <Modal.Body >
@@ -273,17 +273,7 @@ export default class StructureEditorModal extends React.Component {
               hideWarning={this.hideWarning.bind(this)}
               show={!!showWarning}
             />
-            <div>
-              <iframe
-                id={editor.id}
-                src={editor.src}
-                title={`${editor.title}`}
-                height={iframeHeight}
-                width="100%"
-                style={iframeStyle}
-                ref={(f) => { this.ifr = f; }}
-              />
-            </div>
+            {useEditor}
             <div style={buttonToolStyle}>
               <ButtonToolbar>
                 <Button bsStyle="warning" onClick={this.handleCancelBtn.bind(this)}>
@@ -305,7 +295,6 @@ export default class StructureEditorModal extends React.Component {
 }
 
 StructureEditorModal.propTypes = {
-  editors: PropTypes.objectOf(PropTypes.instanceOf(StructureEditor)),
   molfile: PropTypes.string,
   showModal: PropTypes.bool,
   hasChildren: PropTypes.bool,
@@ -317,11 +306,12 @@ StructureEditorModal.propTypes = {
 };
 
 StructureEditorModal.defaultProps = {
-  editors: EditorList,
-  molfile: "\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n",
+  molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n',
   showModal: false,
   hasChildren: false,
   hasParent: false,
+  onCancel: () => {},
+  onSave: () => {},
   submitBtnText: 'Save',
   cancelBtnText: 'Cancel',
 };
diff --git a/app/packs/src/components/users/AuthorModal.js b/app/packs/src/components/users/AuthorModal.js
index ff4d1d320..cc890915b 100644
--- a/app/packs/src/components/users/AuthorModal.js
+++ b/app/packs/src/components/users/AuthorModal.js
@@ -4,10 +4,10 @@ import { Row, Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, F
 import { findIndex, filter } from 'lodash';
 import uuid from 'uuid';
 import Select from 'react-select';
-import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import SelectionField from '../common/SelectionField';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+import CollaboratorFetcher from 'src/repo/fetchers/CollaboratorFetcher';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import SelectionField from 'src/components/common/SelectionField';
+import DeleteConfirmBtn from 'src/components/common/DeleteConfirmBtn';
 
 const sortList = data => data?.sort((a, b) => a?.name?.localeCompare(b.name));
 const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
@@ -99,17 +99,17 @@ export default class AuthorModal extends Component {
         }
       });
     PublicFetcher.affiliations('countries').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+      const affOption = result.affiliations?.map(a => ({ label: a, value: a }))
         .filter(a => a.value && a.value.length > 1);
       this.setState({ countries: affOption });
     });
     PublicFetcher.affiliations('organizations').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+      const affOption = result.affiliations?.map(a => ({ label: a, value: a }))
         .filter(a => a.value && a.value.length > 1);
       this.setState({ organizations: affOption });
     });
     PublicFetcher.affiliations('departments').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+      const affOption = result.affiliations?.map(a => ({ label: a, value: a }))
         .filter(a => a.value && a.value.length > 1);
       this.setState({ departments: affOption });
     });
diff --git a/app/packs/src/components/utils/defaultAnalysisPublish.js b/app/packs/src/components/utils/defaultAnalysisPublish.js
index 759167573..17a31c4c4 100644
--- a/app/packs/src/components/utils/defaultAnalysisPublish.js
+++ b/app/packs/src/components/utils/defaultAnalysisPublish.js
@@ -1,4 +1,4 @@
-import { isNmrPass, isDatasetPass } from '../../libHome/RepoCommon';
+import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
 
 const applyPublish = (el) => {
   const ext = [];
diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
index f79aeac3c..81d7ce268 100644
--- a/app/packs/src/components/viewer/MolViewerBtn.js
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -2,9 +2,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import MolViewerModal from './MolViewerModal';
-import PublicStore from '../stores/PublicStore';
-import UIStore from '../stores/UIStore';
+import MolViewerModal from 'src/components/viewer/MolViewerModal';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import UIStore from 'src/stores/alt/stores/UIStore';
 
 export default class MolViewerBtn extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index 3bb592442..ada3f6c84 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -3,10 +3,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { filter } from 'lodash';
-import MolViewerListModal from './MolViewerListModal';
-import ArrayUtils from '../../components/utils/ArrayUtils';
-import PublicStore from '../stores/PublicStore';
-import UIStore from '../stores/UIStore';
+import MolViewerListModal from 'src/components/viewer/MolViewerListModal';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import UIStore from 'src/stores/alt/stores/UIStore';
 
 export default class MolViewerListBtn extends Component {
   constructor(props) {
diff --git a/app/packs/src/components/viewer/MolViewerListModal.js b/app/packs/src/components/viewer/MolViewerListModal.js
index b211ad5b4..0eb43f328 100644
--- a/app/packs/src/components/viewer/MolViewerListModal.js
+++ b/app/packs/src/components/viewer/MolViewerListModal.js
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, ProgressBar, Nav, NavItem } from 'react-bootstrap';
 import { ReactNglViewer } from 'react-nglviewer';
-import MolViewer from './MolViewer';
-import MolViewerSet from './MolViewerSet';
+import MolViewer from 'src/components/viewer/MolViewer';
+import MolViewerSet from 'src/components/viewer/MolViewerSet';
 
 const MolViewerListModal = (props) => {
   const {
diff --git a/app/packs/src/components/viewer/MolViewerModal.js b/app/packs/src/components/viewer/MolViewerModal.js
index 3e23f8ada..9f3ddb899 100644
--- a/app/packs/src/components/viewer/MolViewerModal.js
+++ b/app/packs/src/components/viewer/MolViewerModal.js
@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, ButtonGroup, Modal, ProgressBar } from 'react-bootstrap';
 import { ReactNglViewer } from 'react-nglviewer';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import MolViewer from './MolViewer';
-import MolViewerSet from './MolViewerSet';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import MolViewer from 'src/components/viewer/MolViewer';
+import MolViewerSet from 'src/components/viewer/MolViewerSet';
 
 const MolViewerModal = (props) => {
   const {
diff --git a/app/packs/src/fetchers/GenericBaseFetcher.js b/app/packs/src/fetchers/GenericBaseFetcher.js
index aab9f665b..9a682bab0 100644
--- a/app/packs/src/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/fetchers/GenericBaseFetcher.js
@@ -119,4 +119,12 @@ export default class GenericBaseFetcher {
         console.log(errorMessage);
       });
   }
+
+  // For REPO
+  static open(path, method) {
+    return fetch(`/api/v1/labimotion_hub/${path}`, { credentials: 'same-origin', method })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
 }
diff --git a/app/packs/src/fetchers/LiteraturesFetcher.js b/app/packs/src/fetchers/LiteraturesFetcher.js
index 722139739..616778b6f 100644
--- a/app/packs/src/fetchers/LiteraturesFetcher.js
+++ b/app/packs/src/fetchers/LiteraturesFetcher.js
@@ -3,12 +3,12 @@ import Immutable from 'immutable';
 import Literature from 'src/models/Literature';
 
 export default class LiteraturesFetcher {
-  static fetchElementReferences(element) {
+  static fetchElementReferences(element, is_all = false) {
     if (!element || element.isNew) {
       return Promise.resolve(Immutable.List());
     }
     const { type, id } = element;
-    return fetch(`/api/v1/literatures?element_type=${type}&element_id=${id}`, {
+    return fetch(`/api/v1/literatures?element_type=${type}&element_id=${id}&is_all=${is_all}`, {
       credentials: 'same-origin'
     }).then((response) => response.json())
       .then((json) => json.literatures)
diff --git a/app/packs/src/fetchers/ReactionsFetcher.js b/app/packs/src/fetchers/ReactionsFetcher.js
index 94409a9a9..36dc2572b 100644
--- a/app/packs/src/fetchers/ReactionsFetcher.js
+++ b/app/packs/src/fetchers/ReactionsFetcher.js
@@ -6,8 +6,8 @@ import Reaction from 'src/models/Reaction';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import Literature from 'src/models/Literature';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
-import UIStore from '../stores/UIStore';
-import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import defaultAnalysisPublish from 'src/components/utils/defaultAnalysisPublish';
 
 // TODO: Extract common base functionality into BaseFetcher
 export default class ReactionsFetcher {
diff --git a/app/packs/src/fetchers/SamplesFetcher.js b/app/packs/src/fetchers/SamplesFetcher.js
index 55cc736f0..d5d13dfb8 100644
--- a/app/packs/src/fetchers/SamplesFetcher.js
+++ b/app/packs/src/fetchers/SamplesFetcher.js
@@ -5,8 +5,7 @@ import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import BaseFetcher from 'src/fetchers/BaseFetcher';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
-import Container from '../models/Container';
-import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
+import defaultAnalysisPublish from 'src/components/utils/defaultAnalysisPublish';
 
 export default class SamplesFetcher {
   static fetchSamplesByUIStateAndLimit(params) {
@@ -70,7 +69,7 @@ export default class SamplesFetcher {
     ).then((response) => response.json()).catch(errorMessage => console.log(errorMessage))
   }
 
-  static update(sample) {
+  static update(s) {
     const sample = defaultAnalysisPublish(s);
     const files = AttachmentFetcher.getFileListfrom(sample.container);
     const promise = () => fetch(`/api/v1/samples/${sample.id}`, {
diff --git a/app/packs/src/generic/GenericAdminNav.js b/app/packs/src/generic/GenericAdminNav.js
deleted file mode 100644
index 2f70d30b4..000000000
--- a/app/packs/src/generic/GenericAdminNav.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Navbar } from 'react-bootstrap';
-
-const navs = (text, type) =>
-  text === type ? (
-    <Navbar.Text key={type}>
-      <b>
-        <a
-          href={`/${type
-            .split(/(?=[A-Z])/)
-            .join('_')
-            .toLowerCase()}_admin`}
-        >{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a>
-      </b>
-    </Navbar.Text>
-  ) : (
-    <Navbar.Text key={type}>
-      <a
-        href={`/${type
-          .split(/(?=[A-Z])/)
-          .join('_')
-          .toLowerCase()}_admin`}
-      >{`${type.split(/(?=[A-Z])/).join(' ')} Designer`}</a>
-    </Navbar.Text>
-  );
-
-const GenericAdminNav = props => {
-  const { userName, text } = props;
-  return (
-    <Navbar fixedTop>
-      <Navbar.Header>
-        <Navbar.Brand>
-          <a href="/mydb">Back to MyDB</a>
-        </Navbar.Brand>
-        <Navbar.Toggle />
-      </Navbar.Header>
-      <Navbar.Collapse>
-        {['GenericElements', 'GenericSegments', 'GenericDatasets'].map(e =>
-          navs(text, e)
-        )}
-        <Navbar.Text pullRight>Login as: {userName}</Navbar.Text>
-      </Navbar.Collapse>
-    </Navbar>
-  );
-};
-
-GenericAdminNav.propTypes = {
-  userName: PropTypes.string,
-  text: PropTypes.string.isRequired,
-};
-GenericAdminNav.defaultProps = { userName: '' };
-
-const GenericAdminUnauth = props => (
-  <div style={{ width: '90vw', margin: 'auto' }}>
-    <GenericAdminNav {...props} />
-    <hr />
-    <div style={{ marginTop: '60px', textAlign: 'center' }}>
-      <h3>Unauthorized!</h3>
-    </div>
-  </div>
-);
-
-GenericAdminUnauth.propTypes = {
-  userName: PropTypes.string,
-  text: PropTypes.string.isRequired,
-};
-GenericAdminUnauth.defaultProps = { userName: '' };
-
-export { GenericAdminNav, GenericAdminUnauth };
diff --git a/app/packs/src/generic/GenericDatasetsAdmin.js b/app/packs/src/generic/GenericDatasetsAdmin.js
deleted file mode 100644
index 0527a3270..000000000
--- a/app/packs/src/generic/GenericDatasetsAdmin.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { orderBy } from 'lodash';
-import { Constants, Designer } from 'chem-generic-ui';
-import LoadingModal from '../components/common/LoadingModal';
-import Notifications from '../components/Notifications';
-import GenericDSsFetcher from '../components/fetchers/GenericDSsFetcher';
-import UsersFetcher from '../components/fetchers/UsersFetcher';
-import LoadingActions from '../components/actions/LoadingActions';
-import { notification, submit } from './Utils';
-import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
-
-export default class GenericDatasetsAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      show: { tab: '', modal: '' },
-      revisions: [],
-      repoData: [],
-      user: {},
-    };
-    this.handleShowState = this.handleShowState.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.handleActivateKlass = this.handleActivateKlass.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleCreateRepo = this.handleCreateRepo.bind(this);
-    this.handleShowRepo = this.handleShowRepo.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    UsersFetcher.fetchCurrentUser()
-      .then(result => {
-        if (!result.error) {
-          this.setState({ user: result.user });
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      });
-  }
-
-  getShowState(att, val) {
-    return { ...this.state.show, [att]: val };
-  }
-
-  fetchElements() {
-    GenericDSsFetcher.listDatasetKlass().then(result => {
-      this.setState({ elements: result.klass });
-    });
-  }
-
-  handleActivateKlass(e) {
-    const act = e.is_active ? 'De-activate' : 'Activate';
-    GenericDSsFetcher.deActivateKlass({
-      id: e.id,
-      is_active: !e.is_active,
-      klass: 'DatasetKlass',
-    })
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: `${act} Dataset fail`,
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: `${act} Dataset successfully`,
-            lvl: 'info',
-            msg: `${e.label} is ${act.toLowerCase()} now`,
-          });
-          this.closeModal(this.fetchElements);
-          // this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleShowState(att, val, cb = () => {}) {
-    this.setState({ show: this.getShowState(att, val) }, cb);
-  }
-
-  closeModal(cb = () => {}) {
-    this.handleShowState('modal', '', cb);
-  }
-
-  fetchRevisions(_element) {
-    const element = _element;
-    if (element?.id) {
-      GenericDSsFetcher.fetchKlassRevisions(element.id, 'DatasetKlass').then(
-        result => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign(
-            {},
-            { properties_release: curr },
-            { uuid: 'current' }
-          );
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        }
-      );
-    }
-  }
-
-  delRevision(params) {
-    const { id, data, uuid } = params;
-    GenericDSsFetcher.deleteKlassRevision({
-      id: id,
-      klass_id: data?.id,
-      klass: 'DatasetKlass',
-    }).then(response => {
-      if (response.error) {
-        notification({
-          title: 'Delete Revision',
-          lvl: 'error',
-          msg: response.error,
-        });
-      } else {
-        this.fetchRevisions(data);
-        notification({
-          title: `Revision [${uuid}] deleted successfully`,
-          lvl: 'info',
-          msg: 'Deleted successfully',
-        });
-      }
-    });
-  }
-
-  handleShowRepo() {
-    LoadingActions.start();
-    GenericDSsFetcher.fetchRepo().then(result => {
-      if (result.error) {
-        notification({
-          title: 'Cannot connect to Chemotion Repository',
-          lvl: 'error',
-          msg: result.error,
-        });
-        LoadingActions.stop();
-      } else {
-        this.setState(
-          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
-          () => LoadingActions.stop()
-        );
-      }
-
-    });
-  }
-
-  handleCreateRepo(element) {
-    GenericDSsFetcher.createRepo({ identifier: element['identifier'] }).then(
-      result => {
-        this.setState({ elements: result?.klass || this.state.elements });
-      }
-    );
-    this.closeModal();
-  }
-
-  async handleSubmit(_element, _release = 'draft') {
-    const [element, release] = [_element, _release];
-    element.release = release;
-    LoadingActions.start();
-    const result = await submit(GenericDSsFetcher, { update: Constants.GENERIC_TYPES.DATASET, element, release });
-    if (result.isSuccess) {
-      notification(result);
-      this.fetchElements();
-      this.setState({ element: result.response }, () => LoadingActions.stop());
-    } else {
-      notification(result);
-    }
-    LoadingActions.stop();
-  }
-
-  renderGrid() {
-    const { elements } = this.state;
-    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
-    return (
-      <Designer
-        fnCopy={() => {}}
-        fnCreate={() => {}}
-        fnSubmit={this.handleSubmit}
-        fnActive={this.handleActivateKlass}
-        fnDerive={() => {}}
-        fnUpdate={() => {}}
-        preview={{
-          fnDelRevisions: this.delRevision,
-          fnRevisions: this.fetchRevisions,
-          revisions: this.state.revisions,
-        }}
-        genericType="Dataset"
-        gridData={els}
-      />
-    );
-  }
-
-  render() {
-    const { user } = this.state;
-    if (!user.generic_admin?.datasets) {
-      return <GenericAdminUnauth userName={user.name} text="GenericDatasets" />;
-    }
-
-    return (
-      <div style={{ width: '90vw', margin: 'auto' }}>
-        <GenericAdminNav userName={user.name} text="GenericDatasets" />
-        <hr />
-        <div style={{ marginTop: '60px' }}>
-          <h3>Generic Datasets Designer</h3>
-          {this.renderGrid()}
-        </div>
-        <Notifications />
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('GenericDatasetsAdmin');
-  if (domElement)
-    ReactDOM.render(
-      <DndProvider backend={HTML5Backend}>
-        <GenericDatasetsAdmin />
-      </DndProvider>,
-      domElement
-    );
-});
diff --git a/app/packs/src/generic/GenericElementsAdmin.js b/app/packs/src/generic/GenericElementsAdmin.js
deleted file mode 100644
index 4a421f8e4..000000000
--- a/app/packs/src/generic/GenericElementsAdmin.js
+++ /dev/null
@@ -1,415 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { orderBy } from 'lodash';
-import { Constants, Designer } from 'chem-generic-ui';
-import LoadingModal from '../components/common/LoadingModal';
-import Notifications from '../components/Notifications';
-import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
-import UsersFetcher from '../components/fetchers/UsersFetcher';
-import LoadingActions from '../components/actions/LoadingActions';
-import { notification, submit } from './Utils';
-import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
-
-const validateKlass = klass => /\b[a-z]{3,5}\b/g.test(klass);
-const validateInput = element => {
-  if (element.name === '') {
-    notification({
-      title: `Element [${element.name}]`,
-      lvl: 'error',
-      msg: 'Please input Element.',
-    });
-    return false;
-  }
-  if (element.klass_prefix === '') {
-    notification({
-      title: `Element [${element.name}]`,
-      lvl: 'error',
-      msg: 'Please input Prefix.',
-    });
-    return false;
-  }
-  if (element.label === '') {
-    notification({
-      title: `Element [${element.name}]`,
-      lvl: 'error',
-      msg: 'Please input Element Label.',
-    });
-    return false;
-  }
-  if (element.icon_name === '') {
-    notification({
-      title: `Element [${element.name}]`,
-      lvl: 'error',
-      msg: 'Please input Icon.',
-    });
-    return false;
-  }
-  return true;
-};
-
-export default class GenericElementsAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      element: {},
-      show: { tab: '', modal: '' },
-      revisions: [],
-      repoData: [],
-      user: {},
-    };
-
-    this.fetchElements = this.fetchElements.bind(this);
-    this.handleShowState = this.handleShowState.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.handleCreateKlass = this.handleCreateKlass.bind(this);
-    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
-    this.handleActivateKlass = this.handleActivateKlass.bind(this);
-    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleCreateRepo = this.handleCreateRepo.bind(this);
-    this.handleShowRepo = this.handleShowRepo.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    UsersFetcher.fetchCurrentUser()
-      .then(result => {
-        if (!result.error) {
-          this.setState({ user: result.user });
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleShowRepo() {
-    LoadingActions.start();
-    GenericElsFetcher.fetchRepo().then(result => {
-      if (result.error) {
-        notification({
-          title: 'Cannot connect to Chemotion Repository',
-          lvl: 'error',
-          msg: result.error,
-        });
-        LoadingActions.stop();
-      } else {
-        this.setState(
-          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
-          () => LoadingActions.stop()
-        );
-      }
-    });
-  }
-
-  handleCreateRepo(element) {
-    GenericElsFetcher.createRepo({ identifier: element['identifier'] }).then(
-      result => {
-        this.setState({ elements: result?.klass || this.state.elements });
-      }
-    );
-    this.closeModal();
-  }
-
-  getShowState(att, val) {
-    return { ...this.state.show, [att]: val };
-  }
-
-  handleShowState(att, val, cb = () => {}) {
-    this.setState({ show: this.getShowState(att, val) }, cb);
-  }
-
-  closeModal(cb = () => {}) {
-    this.handleShowState('modal', '', cb);
-  }
-
-  handleCreateKlass(_response) {
-    const { element, notify } = _response;
-    if (!notify.isSuccess) {
-      notification(notify);
-      return;
-    }
-    element.is_generic = true;
-    if (!validateInput(element)) return;
-    if (!validateKlass(element.name)) {
-      notification({
-        title: `Element [${element.name}]`,
-        lvl: 'error',
-        msg: 'This Element is invalid, please try a different one.',
-      });
-      return;
-    }
-    const { elements } = this.state;
-    const existKlass = elements.filter(el => el.name === element.name);
-    if (existKlass.length > 0) {
-      notification({
-        title: `Element [${element.name}]`,
-        lvl: 'error',
-        msg: 'This Element is already taken. Please choose another one.',
-      });
-      return;
-    }
-    LoadingActions.start();
-    GenericElsFetcher.createElementKlass(element)
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: `Element [${element.name}]`,
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: `Element [${element.name}]`,
-            lvl: 'info',
-            msg: 'Created successfully',
-          });
-          this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleUpdateKlass(_response) {
-    const { element, notify } = _response;
-    if (!notify.isSuccess) {
-      notification(notify);
-      return;
-    }
-    const inputs = element;
-    if (!validateInput(element)) return;
-    LoadingActions.start();
-    GenericElsFetcher.updateElementKlass(inputs)
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: `Element [${inputs.name}]`,
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: `Element [${inputs.name}]`,
-            lvl: 'info',
-            msg: 'Updated successfully',
-          });
-          this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleActivateKlass(e) {
-    const act = e.is_active ? 'De-activate' : 'Activate';
-    LoadingActions.start();
-    GenericElsFetcher.deActivateKlass({
-      id: e.id,
-      is_active: !e.is_active,
-      klass: 'ElementKlass',
-    })
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: `${act} Element failed`,
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: `${act} Element [${result.name}] successfully`,
-            lvl: 'info',
-            msg: `Element is ${act.toLowerCase()} now`,
-          });
-          this.fetchElements();
-        }
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleDeleteKlass(element) {
-    if (element.is_active) {
-      notification({
-        title: 'Delete failed',
-        lvl: 'error',
-        msg: `You cannot delete an active element [${element.name}]. Please make it [inactive] first.`,
-      });
-      return;
-    }
-    const confirmed = confirm('Are you sure you want to delete this record?');
-    if (confirmed) {
-      GenericElsFetcher.deleteKlass({
-        id: element.id,
-        klass: 'ElementKlass',
-      })
-        .then(result => {
-          if (result.error) {
-            notification({
-              title: `Element [${element.name}]`,
-              lvl: 'error',
-              msg: result.error,
-            });
-          } else {
-            notification({
-              title: `Element [${element.name}]`,
-              lvl: 'info',
-              msg: 'Deleted successfully',
-            });
-            this.fetchElements();
-          }
-        })
-        .finally(() => {
-          LoadingActions.stop();
-        });
-    }
-  }
-
-  fetchRevisions(_element) {
-    const element = _element;
-    if (element?.id) {
-      GenericElsFetcher.fetchKlassRevisions(element.id, 'ElementKlass').then(
-        result => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign(
-            {},
-            { properties_release: curr },
-            { uuid: 'current' }
-          );
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        }
-      );
-    }
-  }
-
-  delRevision(params) {
-    const { id, data, uuid } = params;
-    LoadingActions.start();
-    GenericElsFetcher.deleteKlassRevision({
-      id: id,
-      klass_id: data?.id,
-      klass: 'ElementKlass',
-    })
-      .then(response => {
-        if (response.error) {
-          notification({
-            title: 'Delete Revision',
-            lvl: 'error',
-            msg: response.error,
-          });
-        } else {
-          this.fetchRevisions(data);
-          notification({
-            title: `Revision [${uuid}] deleted successfully`,
-            lvl: 'info',
-            msg: 'Deleted successfully',
-          });
-        }
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  fetchElements() {
-    GenericElsFetcher.fetchElementKlasses().then(result => {
-      if (
-        typeof result !== 'undefined' &&
-        typeof result.klass !== 'undefined' &&
-        result?.klass?.length > 0
-      )
-        this.setState(
-          { elements: result.klass.filter(k => k.is_generic) },
-          () => LoadingActions.stop()
-        );
-    });
-  }
-
-  async handleSubmit(_element, _release = 'draft') {
-    const [element, release] = [_element, _release];
-    element.release = release;
-    LoadingActions.start();
-    const result = await submit(GenericElsFetcher, { update: Constants.GENERIC_TYPES.ELEMENT, element, release });
-    if (result.isSuccess) {
-      notification(result);
-      this.fetchElements();
-      this.setState({ element: result.response }, () => LoadingActions.stop());
-    } else {
-      notification(result);
-    }
-    LoadingActions.stop();
-  }
-
-  renderGrid() {
-    const { elements } = this.state;
-    const els = orderBy(
-      elements,
-      ['is_active', 'name', 'klass_prefix'],
-      ['desc', 'asc', 'asc']
-    );
-    return (
-      <Designer
-        fnCopy={this.handleCreateKlass}
-        fnCreate={this.handleCreateKlass}
-        fnSubmit={this.handleSubmit}
-        fnActive={this.handleActivateKlass}
-        fnDelete={this.handleDeleteKlass}
-        fnUpdate={this.handleUpdateKlass}
-        preview={{
-          fnDelRevisions: this.delRevision,
-          fnRevisions: this.fetchRevisions,
-          revisions: this.state.revisions,
-        }}
-        genericType="Element"
-        gridData={els}
-      />
-    );
-  }
-
-  render() {
-    const { user } = this.state;
-    if (!user.generic_admin?.elements) {
-      return <GenericAdminUnauth userName={user.name} text="GenericElements" />;
-    }
-
-    return (
-      <div style={{ width: '90vw', margin: 'auto' }}>
-        <GenericAdminNav userName={user.name} text="GenericElements" />
-        <hr />
-        <div style={{ marginTop: '60px' }}>
-          <h3>Generic Elements Designer</h3>
-          {this.renderGrid()}
-        </div>
-        <Notifications />
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('GenericElementsAdmin');
-  if (domElement)
-    ReactDOM.render(
-      <DndProvider backend={HTML5Backend}>
-        <GenericElementsAdmin />
-      </DndProvider>,
-      domElement
-    );
-});
diff --git a/app/packs/src/generic/GenericSegmentsAdmin.js b/app/packs/src/generic/GenericSegmentsAdmin.js
deleted file mode 100644
index c9589f844..000000000
--- a/app/packs/src/generic/GenericSegmentsAdmin.js
+++ /dev/null
@@ -1,382 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { orderBy } from 'lodash';
-import { Constants, Designer } from 'chem-generic-ui';
-import Notifications from '../components/Notifications';
-import LoadingModal from '../components/common/LoadingModal';
-import UsersFetcher from '../components/fetchers/UsersFetcher';
-import GenericSgsFetcher from '../components/fetchers/GenericSgsFetcher';
-import GenericElsFetcher from '../components/fetchers/GenericElsFetcher';
-import LoadingActions from '../components/actions/LoadingActions';
-import { notification, submit } from './Utils';
-import { GenericAdminNav, GenericAdminUnauth } from './GenericAdminNav';
-
-const validateInput = element => {
-  if (element.klass_element === '') {
-    notification({
-      title: 'Create Segment Error',
-      lvl: 'error',
-      msg: 'Please select Element.',
-    });
-    return false;
-  }
-  if (element.label === '') {
-    notification({
-      title: 'Create Segment Error',
-      lvl: 'error',
-      msg: 'Please input Segment Label.',
-    });
-    return false;
-  }
-  return true;
-};
-
-export default class GenericSegmentsAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      klasses: [],
-      show: { tab: '', modal: '' },
-      propTabKey: 1,
-      revisions: [],
-      repoData: [],
-      user: {},
-    };
-
-    this.fetchElements = this.fetchElements.bind(this);
-    this.handleShowState = this.handleShowState.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.handleCreateKlass = this.handleCreateKlass.bind(this);
-    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
-    this.handleActivateKlass = this.handleActivateKlass.bind(this);
-    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleCreateRepo = this.handleCreateRepo.bind(this);
-    this.handleShowRepo = this.handleShowRepo.bind(this);
-    this.fetchElementKlasses = this.fetchElementKlasses.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    this.fetchElementKlasses();
-    UsersFetcher.fetchCurrentUser()
-      .then(result => {
-        if (!result.error) {
-          this.setState({ user: result.user });
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      });
-  }
-
-  getShowState(att, val) {
-    return { ...this.state.show, [att]: val };
-  }
-
-  fetchRevisions(_element) {
-    const element = _element;
-    if (element?.id) {
-      LoadingActions.start();
-      GenericSgsFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
-        .then(result => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign(
-            {},
-            { properties_release: curr },
-            { uuid: 'current' }
-          );
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        })
-        .finally(() => {
-          LoadingActions.stop();
-        });
-    }
-  }
-
-  delRevision(params) {
-    const { id, data, uuid } = params;
-    LoadingActions.start();
-    GenericSgsFetcher.deleteKlassRevision({
-      id: id,
-      klass_id: data?.id,
-      klass: 'SegmentKlass',
-    })
-      .then(response => {
-        if (response.error) {
-          notification({
-            title: 'Delete Revision',
-            lvl: 'error',
-            msg: response.error,
-          });
-        } else {
-          this.fetchRevisions(data);
-          notification({
-            title: `Revision [${uuid}] deleted successfully`,
-            lvl: 'info',
-            msg: 'Deleted successfully',
-          });
-        }
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleShowState(att, val, cb = () => {}) {
-    this.setState({ show: this.getShowState(att, val) }, cb);
-  }
-  closeModal(cb = () => {}) {
-    this.handleShowState('modal', '', cb);
-  }
-
-  handleShowRepo() {
-    LoadingActions.start();
-    GenericSgsFetcher.fetchRepo().then(result => {
-      if (result.error) {
-        notification({
-          title: 'Cannot connect to Chemotion Repository',
-          lvl: 'error',
-          msg: result.error,
-        });
-        LoadingActions.stop();
-      } else {
-        this.setState(
-          { repoData: result, show: this.getShowState('modal', 'NewRepo') },
-          () => LoadingActions.stop()
-        );
-      }
-    });
-  }
-
-  handleCreateRepo(element) {
-    GenericSgsFetcher.createRepo({ identifier: element['identifier'] }).then(
-      result => {
-        this.setState({ elements: result?.klass || this.state.elements });
-      }
-    );
-    this.closeModal(this.fetchElements);
-  }
-
-  handleCreateKlass(_response) {
-    const { element, notify } = _response;
-    if (!notify.isSuccess) {
-      notification(notify);
-      return;
-    }
-    if (!validateInput(element)) return;
-    GenericSgsFetcher.createKlass(element)
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: 'Create Segment fail',
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: 'Create Segment successfully',
-            lvl: 'info',
-            msg: 'Created successfully',
-          });
-          this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleUpdateKlass(_response) {
-    const { element, notify } = _response;
-    if (!notify.isSuccess) {
-      notification(notify);
-      return;
-    }
-    const inputs = element;
-    if (!validateInput(inputs)) return;
-    GenericSgsFetcher.updateSegmentKlass(inputs)
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: 'Update Segment fail',
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: 'Update Segment successfully',
-            lvl: 'info',
-            msg: 'Updated successfully',
-          });
-          this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleActivateKlass(e) {
-    const act = e.is_active ? 'De-activate' : 'Activate';
-    GenericSgsFetcher.deActivateKlass({
-      id: e.id,
-      is_active: !e.is_active,
-      klass: 'SegmentKlass',
-    })
-      .then(result => {
-        if (result.error) {
-          notification({
-            title: `${act} Segment fail`,
-            lvl: 'error',
-            msg: result.error,
-          });
-        } else {
-          notification({
-            title: `${act} Segment successfully`,
-            lvl: 'info',
-            msg: `Segment is ${act.toLowerCase()} now`,
-          });
-          this.fetchElements();
-        }
-      })
-      .catch(errorMessage => {
-        console.log(errorMessage);
-      })
-      .finally(() => {
-        LoadingActions.stop();
-      });
-  }
-
-  handleDeleteKlass(element) {
-    if (element.is_active) {
-      notification({
-        title: 'Delete Segment fail',
-        lvl: 'error',
-        msg: `You cannot delete an active segment [${element.label}]. Please make it [inactive] first.`,
-      });
-      return;
-    }
-    const confirmed = confirm('Are you sure you want to delete this record?');
-    if (confirmed) {
-      GenericSgsFetcher.deleteKlass({
-        id: element.id,
-        klass: 'SegmentKlass',
-      })
-        .then(result => {
-          if (result.error) {
-            notification({
-              title: 'Delete Segment fail',
-              lvl: 'error',
-              msg: result.error,
-            });
-          } else {
-            notification({
-              title: `Segment [${element.label}]`,
-              lvl: 'info',
-              msg: 'Deleted successfully',
-            });
-            this.fetchElements();
-            this.handleShowState('tab', '');
-          }
-        })
-        .finally(() => {
-          LoadingActions.stop();
-        });
-    }
-  }
-
-  fetchElements() {
-    GenericSgsFetcher.listSegmentKlass().then(result => {
-      this.setState({ elements: result.klass }, () => LoadingActions.stop());
-    });
-  }
-
-  fetchElementKlasses() {
-    GenericElsFetcher.fetchElementKlasses().then(result => {
-      const klasses = result?.klass?.sort((a, b) => a.place - b.place) || [];
-      this.setState({ klasses });
-    });
-  }
-
-  async handleSubmit(_element, _release = 'draft') {
-    const [element, release] = [_element, _release];
-    element.release = release;
-    LoadingActions.start();
-    const result = await submit(GenericSgsFetcher, { update: Constants.GENERIC_TYPES.SEGMENT, element, release });
-    if (result.isSuccess) {
-      notification(result);
-      this.fetchElements();
-      this.setState({ element: result.response }, () => LoadingActions.stop());
-    } else {
-      notification(result);
-    }
-    LoadingActions.stop();
-  }
-
-  renderGrid() {
-    const { elements } = this.state;
-    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
-
-    return (
-      <Designer
-        fnCopy={this.handleCreateKlass}
-        fnCreate={this.handleCreateKlass}
-        fnSubmit={this.handleSubmit}
-        fnActive={this.handleActivateKlass}
-        fnDelete={this.handleDeleteKlass}
-        fnUpdate={this.handleUpdateKlass}
-        genericType="Segment"
-        gridData={els}
-        klasses={this.state.klasses}
-        preview={{
-          fnDelRevisions: this.delRevision,
-          fnRevisions: this.fetchRevisions,
-          revisions: this.state.revisions,
-        }}
-      />
-    );
-  }
-
-  render() {
-    const { user } = this.state;
-    if (!user.generic_admin?.segments) {
-      return <GenericAdminUnauth userName={user.name} text="GenericSegments" />;
-    }
-    return (
-      <div style={{ width: '90vw', margin: 'auto' }}>
-        <GenericAdminNav userName={user.name} text="GenericSegments" />
-        <hr />
-        <div style={{ marginTop: '60px' }}>
-          <h3>Generic Segments Designer</h3>
-          {this.renderGrid()}
-        </div>
-        <Notifications />
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('GenericSegmentsAdmin');
-  if (domElement)
-    ReactDOM.render(
-      <DndProvider backend={HTML5Backend}>
-        <GenericSegmentsAdmin />
-      </DndProvider>,
-      domElement
-    );
-});
diff --git a/app/packs/src/generic/Utils.js b/app/packs/src/generic/Utils.js
deleted file mode 100644
index 379094ce2..000000000
--- a/app/packs/src/generic/Utils.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import uuid from 'uuid';
-import { filter, cloneDeep } from 'lodash';
-import { Constants } from 'chem-generic-ui';
-import NotificationActions from '../components/actions/NotificationActions';
-import UserStore from '../components/stores/UserStore';
-import UIActions from '../components/actions/UIActions';
-import MatrixCheck from '../components/common/MatrixCheck';
-import elklasses from '../../klasses.json';
-
-export const ALL_TYPES = [
-  Constants.GENERIC_TYPES.ELEMENT,
-  Constants.GENERIC_TYPES.SEGMENT,
-  Constants.GENERIC_TYPES.DATASET,
-];
-
-export const notification = props =>
-  NotificationActions.add({
-    title: props.title,
-    message: props.msg,
-    level: props.lvl,
-    position: 'tc',
-    dismissible: 'button',
-    autoDismiss: props.autoDismiss || 5,
-    uid: props.uid || uuid.v4(),
-  });
-
-export const GenericDSMisType = () => {
-  const currentUser =
-    (UserStore.getState() && UserStore.getState().currentUser) || {};
-  if (MatrixCheck(currentUser.matrix, `generic${Constants.GENERIC_TYPES.DATASET}`)) {
-    return (
-      <OverlayTrigger
-        delayShow={500}
-        placement="top"
-        overlay={
-          <Tooltip id="tooltip">
-            Type (Chemical Methods Ontology) has been changed. <br />
-            Please review this Dataset content.
-          </Tooltip>
-        }
-      >
-        <span style={{ color: 'red' }}>
-          <i className="fa fa-exclamation-triangle" />
-          &nbsp;
-        </span>
-      </OverlayTrigger>
-    );
-  }
-  return null;
-};
-
-export const renderFlowModal = (generic, isToggle) => {
-  let shortLabel = generic.short_label;
-  if (!shortLabel) {
-    const segmentKlasses =
-      (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
-    shortLabel = segmentKlasses.filter(s => s.id === generic.segment_klass_id);
-    shortLabel = shortLabel.length > 0 ? shortLabel[0].label : '';
-  }
-  const params = {
-    properties_release: cloneDeep(generic.properties_release) || {},
-    properties: cloneDeep(generic.properties) || {},
-    shortLabel,
-    toggle: isToggle,
-  };
-  UIActions.rerenderGenericWorkflow(params);
-};
-
-export const segmentsByKlass = name => {
-  const allSegments = UserStore.getState().segmentKlasses || [];
-  return filter(
-    allSegments,
-    se => (se.element_klass && se.element_klass.name) === name
-  );
-};
-
-export const elementNames = (all = true, generics = null) => {
-  const elnElements = all
-    ? ['sample', 'reaction', 'screen', 'wellplate', 'research_plan']
-    : [];
-  try {
-    if (generics?.length > 0)
-      return elnElements.concat(generics?.map(el => el.name));
-    // const { klasses } = UIStore.getState();
-    // if (typeof klasses !== 'undefined' && klasses?.length > 0) return elnElements.concat(klasses);
-    if (elklasses?.length > 0) return elnElements.concat(elklasses);
-    return elnElements;
-  } catch (error) {
-    console.error('Can not get Element Names:', error);
-    return elnElements;
-  }
-};
-
-export const FlowViewerBtn = props => {
-  const { generic } = props;
-  const propertiesRelease = generic.properties_release || {};
-
-  if (Object.keys(propertiesRelease || {}).length < 1) return null;
-
-  const hasFlow =
-    (Object.keys(propertiesRelease.flow || {}).length > 0 &&
-      propertiesRelease.flow?.elements?.length > 2) ||
-    false;
-  const hasFlowObject =
-    (Object.keys(propertiesRelease.flowObject || {}).length > 0 &&
-      propertiesRelease.flowObject?.nodes?.length > 2) ||
-    false;
-
-  if (!hasFlow && !hasFlowObject) return null;
-
-  return (
-    <OverlayTrigger
-      delayShow={500}
-      placement="top"
-      overlay={<Tooltip id={uuid.v4()}>click to view defined workflow</Tooltip>}
-    >
-      <Button
-        onClick={() => renderFlowModal(generic, true)}
-        bsSize="xsmall"
-        bsStyle="primary"
-      >
-        <i className="fa fa-sitemap" aria-hidden="true" /> Workflow
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-export const submit = async (_action, _params) => {
-  const [action, params] = [_action, _params];
-  let result = {
-    title: 'Update template fail',
-    lvl: 'error',
-    msg: `Update ${params.update} template fail`,
-    isSuccess: false,
-  };
-  try {
-    const response = await action[`update${params.update}Template`](params.element);
-    if (!response.error) {
-      result = {
-        title: `Update ${params.update} [${params.element.label}] template`,
-        lvl: 'info',
-        msg: `Saved successfully (${params.release})`,
-        isSuccess: true,
-        response,
-      };
-    } else {
-      result = { ...result, msg: response.error };
-    }
-  } catch (errorMessage) {
-    result = { ...result, msg: errorMessage };
-  }
-  return result;
-};
diff --git a/app/packs/src/libHome/ContainerComponent.js b/app/packs/src/libHome/ContainerComponent.js
index 423da5e6a..872af0b26 100644
--- a/app/packs/src/libHome/ContainerComponent.js
+++ b/app/packs/src/libHome/ContainerComponent.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { Col, FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
 import Select from 'react-select'
-import ContainerDatasets from '../components/ContainerDatasets';
-import QuillViewer from '../components/QuillViewer'
+import ContainerDatasets from 'src/components/container/ContainerDatasets';
+import QuillViewer from 'src/components/QuillViewer';
 
-import {sampleAnalysesContentSymbol} from '../components/utils/quillToolbarSymbol'
-import {confirmOptions} from '../components/staticDropdownOptions/options';
+import { sampleAnalysesContentSymbol } from 'src/utilities/quillToolbarSymbol';
+import { confirmOptions } from 'src/components/staticDropdownOptions/options';
 
 export default class ContainerComponent extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
deleted file mode 100644
index c7be2d1a1..000000000
--- a/app/packs/src/libHome/Home.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Grid, Row } from 'react-bootstrap';
-import Aviator from 'aviator';
-
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import WelcomeMessage from '../components/WelcomeMessage';
-
-import initPublicRoutes from './homeRoutes';
-
-import Navigation from './Navigation';
-import XHome from '../components/extra/HomeXHome';
-import Notifications from '../components/Notifications';
-import RepoEmbargo from './RepoEmbargo';
-import RepoCollection from './RepoCollection';
-import RepoHome from './RepoHome';
-import RepoPubl from './RepoPubl';
-import RepoReview from './RepoReview';
-import RepoAbout from './RepoAbout';
-import RepoContact from './RepoContact';
-import RepoDirective from './RepoDirective';
-import RepoNewsroom from './RepoNewsroom';
-import RepoNewsReader from './RepoNewsReader';
-import RepoNewsEditor from './RepoNewsEditor';
-import RepoHowTo from './RepoHowTo';
-import RepoHowToReader from './RepoHowToReader';
-import RepoHowToEditor from './RepoHowToEditor';
-
-import PublicStore from '../components/stores/PublicStore';
-import RStore from '../components/stores/RStore';
-import RepoElementDetails from './RepoElementDetails';
-import NavFooter from './NavFooter';
-import LoadingModal from '../components/common/LoadingModal';
-
-import PublicActions from '../components/actions/PublicActions';
-import RepoGenericHub from './RepoGenericHub';
-
-const extraHomes = () => {
-  const homes = [];
-  const count = XHome.count || 0;
-  for (let j = 0; j < count; j += 1) {
-    homes.push(XHome[`content${j}`]);
-  }
-  return homes;
-};
-
-class Home extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      guestPage: null
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    RStore.listen(this.onChange);
-    PublicActions.initialize();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-    RStore.unlisten(this.onChange);
-  }
-
-  onChange(publicState) {
-    if ((publicState.guestPage && publicState.guestPage !== this.state.guestPage)
-    || (publicState.listType && publicState.listType !== this.state.listType)) {
-      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
-    }
-  }
-
-  renderGuestPage() {
-    switch (this.state.guestPage) {
-      case 'genericHub':
-        return <RepoGenericHub />;
-      case 'moleculeArchive':
-        return <RepoPubl listType="moleculeArchive" />;
-      case 'newseditor':
-        return <RepoNewsEditor />;
-      case 'newsreader':
-        return <RepoNewsReader />;
-      case 'newsroom':
-        return <RepoNewsroom />;
-      case 'howtoeditor':
-        return <RepoHowToEditor />;
-      case 'howtoreader':
-        return <RepoHowToReader />;
-      case 'howto':
-        return <RepoHowTo />;
-      case 'about':
-        return <RepoAbout />;
-      case 'contact':
-        return <RepoContact />;
-      case 'publications':
-        return <RepoPubl listType={this.state.listType || ''} />;
-      case 'review':
-        return <RepoReview />;
-      case 'collection':
-        return <RepoCollection />;
-      case 'embargo':
-        return <RepoEmbargo />;
-      case 'dataset':
-      case 'molecule':
-        return <RepoElementDetails />;
-      case 'home':
-        return <RepoHome />;
-      case 'welcome':
-        return <RepoHome />;
-      case 'directive':
-        return <RepoDirective />;
-      default:
-        return <RepoHome />;
-    }
-  }
-
-  renderNavFooter() {
-    switch (this.state.guestPage) {
-      case 'publications':
-      case 'review':
-      case 'embargo':
-      case 'newseditor':
-      case 'newsreader':
-      case 'newsroom':
-      case 'howtoeditor':
-      case 'howtoreader':
-      case 'howto':
-        return <span />;
-      default:
-        return <NavFooter />;
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        { XHome.count && XHome.count > 0
-          ? extraHomes().map((Annex, i) => <Annex key={`Annex_${i}`} />)
-          : (
-            <div>
-              <Grid fluid>
-                <Row className="card-navigation">
-                  <Navigation />
-                  <Notifications />
-                </Row>
-                <Row style={{ margin: '10px' }}>
-                  {this.renderGuestPage()}
-                </Row>
-              </Grid>
-              {this.renderNavFooter()}
-            </div>
-          )
-        }
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('Home');
-  if (domElement) {
-    ReactDOM.render(
-      <DndProvider backend={HTML5Backend}>
-        <Home />
-      </DndProvider>,
-      domElement
-    );
-    initPublicRoutes();
-    Aviator.dispatch();
-  }
-});
diff --git a/app/packs/src/libHome/Navigation.js b/app/packs/src/libHome/Navigation.js
index 7d34849db..968f7ad60 100644
--- a/app/packs/src/libHome/Navigation.js
+++ b/app/packs/src/libHome/Navigation.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Button, Nav, Navbar, NavItem, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import UserAuth from '../components/UserAuth';
-import UserStore from '../components/stores/UserStore';
-import UIStore from '../components/stores/UIStore';
-import UserActions from '../components/actions/UserActions';
-import NavNewSession from './NavNewSession';
-import NavHead from './NavHead';
-import DocumentHelper from '../components/utils/DocumentHelper';
+import UserAuth from 'src/components/navigation/UserAuth';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import NavNewSession from 'src/components/navigation/NavNewSession';
+import NavHead from 'src/repoHome/NavHead';
+import DocumentHelper from 'src/utilities/DocumentHelper';
 
 export default class Navigation extends React.Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoHowTo/EditorRichText.js b/app/packs/src/libHome/RepoHowTo/EditorRichText.js
index d3c05b6c5..d67000676 100644
--- a/app/packs/src/libHome/RepoHowTo/EditorRichText.js
+++ b/app/packs/src/libHome/RepoHowTo/EditorRichText.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import QuillEditor from '../../components/QuillEditor';
+import QuillEditor from 'src/components/QuillEditor';
 
 export default class EditorRichText extends Component {
   handleChange(e) {
diff --git a/app/packs/src/libHome/RepoHowTo/EditorStelle.js b/app/packs/src/libHome/RepoHowTo/EditorStelle.js
index 1af6593d7..3101cd3ab 100644
--- a/app/packs/src/libHome/RepoHowTo/EditorStelle.js
+++ b/app/packs/src/libHome/RepoHowTo/EditorStelle.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col } from 'react-bootstrap';
-import RepoHowToDragSource from '../RepoHowToDragSource';
-import RepoHowToDropTarget from '../RepoHowToDropTarget';
-import EditorRichText from '../RepoHowTo/EditorRichText';
-import EditorImage from '../RepoHowTo/EditorImage';
-import { FaBtn } from './EditorBtn';
+import RepoHowToDragSource from 'src/repoHome/RepoHowToDragSource';
+import RepoHowToDropTarget from 'src/repoHome/RepoHowToDropTarget';
+import EditorRichText from 'src/libHome/RepoHowTo/EditorRichText';
+import EditorImage from 'src/libHome/RepoHowTo/EditorImage';
+import { FaBtn } from 'src/libHome/RepoHowTo/EditorBtn';
 
 export default class EditorStelle extends Component {
   handleChange(t, e) {
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 82778c517..07dff3ff2 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -1,9 +1,9 @@
-import PublicActions from '../components/actions/PublicActions';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
-import RepoNavListTypes from './RepoNavListTypes';
-import ReviewActions from '../components/actions/ReviewActions';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 
 const routes = {
   '/': 'root',
@@ -34,11 +34,14 @@ const routes = {
     target: {
       show: function(e) {
         LoadingActions.start();
+        PublicActions.setSearchParams({
+          advType: 'Authors', advValue: [], page: 1, searchOptions: []
+        });
         PublicActions.getReactions.defer();
         PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.REACTION}`)
       },
     },
-    '/': 'show'
+    '/': 'show',
   },
   '/genericHub': {
     target: {
@@ -52,6 +55,9 @@ const routes = {
     target: {
       show: function(e) {
         LoadingActions.start();
+        PublicActions.setSearchParams({
+          advType: 'Authors', advValue: [], page: 1, searchOptions: []
+        });
         PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE }); // .defer();
         PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)
       },
diff --git a/app/packs/src/models/Element.js b/app/packs/src/models/Element.js
index e6b1c9f34..08b24ae6f 100644
--- a/app/packs/src/models/Element.js
+++ b/app/packs/src/models/Element.js
@@ -32,7 +32,7 @@ export default class Element {
     }
     return sha256(JSON.stringify(_.omit(_.omit(
       tThis,
-      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'research_plans', ...fieldsToOmit],
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'research_plans', 'sealed', ...fieldsToOmit],
     ), _.isEmpty)));
   }
 
diff --git a/app/packs/src/models/Literature.js b/app/packs/src/models/Literature.js
index 18b2984d2..f731b742f 100644
--- a/app/packs/src/models/Literature.js
+++ b/app/packs/src/models/Literature.js
@@ -1,5 +1,5 @@
 import Element from 'src/models/Element';
-import { CitationType } from '../CitationType';
+import { CitationType } from 'src/components/CitationType';
 
 export default class Literature extends Element {
   static buildEmpty() {
diff --git a/app/packs/src/components/fetchers/ArticleFetcher.js b/app/packs/src/repo/fetchers/ArticleFetcher.js
similarity index 100%
rename from app/packs/src/components/fetchers/ArticleFetcher.js
rename to app/packs/src/repo/fetchers/ArticleFetcher.js
diff --git a/app/packs/src/components/fetchers/CollaboratorFetcher.js b/app/packs/src/repo/fetchers/CollaboratorFetcher.js
similarity index 100%
rename from app/packs/src/components/fetchers/CollaboratorFetcher.js
rename to app/packs/src/repo/fetchers/CollaboratorFetcher.js
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/repo/fetchers/EmbargoFetcher.js
similarity index 100%
rename from app/packs/src/components/fetchers/EmbargoFetcher.js
rename to app/packs/src/repo/fetchers/EmbargoFetcher.js
diff --git a/app/packs/src/repo/fetchers/GenericSgsFetcher.js b/app/packs/src/repo/fetchers/GenericSgsFetcher.js
new file mode 100644
index 000000000..a331afa99
--- /dev/null
+++ b/app/packs/src/repo/fetchers/GenericSgsFetcher.js
@@ -0,0 +1,56 @@
+import GenericBaseFetcher from 'src/fetchers/GenericBaseFetcher';
+
+export default class GenericSgsFetcher extends GenericBaseFetcher {
+  static exec(path, method) {
+    return super.exec(`segments/${path}`, method);
+  }
+
+  static execData(params, path) {
+    return super.execData(params, `segments/${path}`);
+  }
+
+  static fetchRepo() {
+    return this.exec('fetch_repo', 'GET');
+  }
+
+  static createRepo(params) {
+    return this.execData(params, 'create_repo_klass');
+  }
+
+  static createKlass(params) {
+    return this.execData(params, 'create_segment_klass');
+  }
+
+  static fetchKlass(elementName = null) {
+    const api = elementName == null
+      ? 'klasses.json'
+      : `klasses.json?element=${elementName}`;
+    return this.exec(api, 'GET');
+  }
+
+  static fetchRepoKlassList() {
+    return this.exec('fetch_repo_generic_template_list', 'GET');
+  }
+
+  static listSegmentKlass(params = {}) {
+    const api = params.is_active === undefined
+      ? 'list_segment_klass.json'
+      : `list_segment_klass.json?is_active=${params.is_active}`;
+    return this.exec(api, 'GET');
+  }
+
+  static syncTemplate(params) {
+    return this.execData(params, 'fetch_repo_generic_template');
+  }
+
+  static updateSegmentKlass(params) {
+    return this.execData(params, 'update_segment_klass');
+  }
+
+  static updateSegmentTemplate(params) {
+    return super.updateTemplate(
+      { ...params, klass: 'SegmentKlass' },
+      'update_segment_template'
+    );
+  }
+}
diff --git a/app/packs/src/components/fetchers/LiteraturesFetcher.js b/app/packs/src/repo/fetchers/LiteraturesFetcher.js
similarity index 61%
rename from app/packs/src/components/fetchers/LiteraturesFetcher.js
rename to app/packs/src/repo/fetchers/LiteraturesFetcher.js
index 7ab0cdc05..616778b6f 100644
--- a/app/packs/src/components/fetchers/LiteraturesFetcher.js
+++ b/app/packs/src/repo/fetchers/LiteraturesFetcher.js
@@ -1,19 +1,19 @@
 import 'whatwg-fetch';
 import Immutable from 'immutable';
-import Literature from '../models/Literature';
+import Literature from 'src/models/Literature';
 
 export default class LiteraturesFetcher {
   static fetchElementReferences(element, is_all = false) {
     if (!element || element.isNew) {
-      return Promise.resolve(Immutable.List())
+      return Promise.resolve(Immutable.List());
     }
     const { type, id } = element;
     return fetch(`/api/v1/literatures?element_type=${type}&element_id=${id}&is_all=${is_all}`, {
       credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json.literatures)
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
-      .then(literatures => literatures.map(literature => new Literature(literature)))
+    }).then((response) => response.json())
+      .then((json) => json.literatures)
+      .then((literatures) => literatures.map((literature) => new Literature(literature)))
+      .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
@@ -21,7 +21,7 @@ export default class LiteraturesFetcher {
     const { element, literature } = params;
     const { type, id } = element;
     if (!element || element.isNew) {
-      return Promise.resolve(Immutable.List())
+      return Promise.resolve(Immutable.List());
     }
     return fetch('/api/v1/literatures', {
       credentials: 'same-origin',
@@ -31,10 +31,10 @@ export default class LiteraturesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({ element_type: type, element_id: id, ref: literature })
-    }).then(response => response.json())
+    }).then((response) => response.json())
       .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then(literatures => literatures.map(lits => new Literature(lits)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then((literatures) => literatures.map((lits) => new Literature(lits)))
+      .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
       .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
   }
 
@@ -42,13 +42,23 @@ export default class LiteraturesFetcher {
     const { element, literature } = params;
     const { type, id } = element;
     const refId = literature.literal_id;
-    return fetch(`/api/v1/literatures?id=${refId}&element_type=${type}&element_id=${id}`, {
+
+    const urlParams = new URLSearchParams({
+      id: refId,
+      element_type: type,
+      element_id: id
+    });
+
+    const requestParams = {
       credentials: 'same-origin',
       method: 'delete',
       headers: {
         Accept: 'application/json',
       },
-    }).then(response => response.json())
+    };
+
+    return fetch(`/api/v1/literatures?${urlParams}`, requestParams)
+      .then((response) => (response.status === 200 ? {} : response.json()))
       .then((json) => { if (json.error) { throw json; } })
       .catch((errorMessage) => { throw errorMessage; });
   }
@@ -62,24 +72,24 @@ export default class LiteraturesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(params)
-    }).then(response => response.json())
+    }).then((response) => response.json())
       .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then(literatures => literatures.map(lits => new Literature(lits)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then((literatures) => literatures.map((lits) => new Literature(lits)))
+      .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
       .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
   }
 
   static fetchDOIMetadata(doi) {
     return fetch(`/api/v1/literatures/doi/metadata?doi=${encodeURIComponent(doi)}`, {
       credentials: 'same-origin',
-    }).then(response => response.json())
+    }).then((response) => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
   static fetchReferencesByCollection(params) {
     return fetch(`/api/v1/literatures/collection?id=${params.id}&is_sync_to_me=${params.is_sync_to_me || false}`, {
       credentials: 'same-origin',
-    }).then(response => response.json())
+    }).then((response) => response.json())
       .then((json) => {
         const {
           collectionRefs,
@@ -88,27 +98,27 @@ export default class LiteraturesFetcher {
           researchPlanRefs,
         } = json;
         return {
-          collectionRefs: Immutable.List(collectionRefs.map(lit => new Literature(lit))),
-          sampleRefs: Immutable.List(sampleRefs.map(lit => new Literature(lit))),
-          reactionRefs: Immutable.List(reactionRefs.map(lit => new Literature(lit))),
-          researchPlanRefs: Immutable.List(researchPlanRefs.map(lit => new Literature(lit))),
+          collectionRefs: Immutable.List(collectionRefs.map((lit) => new Literature(lit))),
+          sampleRefs: Immutable.List(sampleRefs.map((lit) => new Literature(lit))),
+          reactionRefs: Immutable.List(reactionRefs.map((lit) => new Literature(lit))),
+          researchPlanRefs: Immutable.List(researchPlanRefs.map((lit) => new Literature(lit))),
         };
       })
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
   static postReferencesByUIState(params, method = 'post') {
-    return fetch(`/api/v1/literatures/ui_state`, {
+    return fetch('/api/v1/literatures/ui_state', {
       credentials: 'same-origin',
       method,
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json.selectedRefs.map(lit => new Literature(lit)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+    }).then((response) => response.json())
+      .then((json) => json.selectedRefs.map((lit) => new Literature(lit)))
+      .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 }
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/repo/fetchers/PublicFetcher.js
similarity index 98%
rename from app/packs/src/components/fetchers/PublicFetcher.js
rename to app/packs/src/repo/fetchers/PublicFetcher.js
index 6075b46da..6a989754f 100644
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ b/app/packs/src/repo/fetchers/PublicFetcher.js
@@ -1,9 +1,9 @@
 import 'whatwg-fetch';
 import _ from 'lodash';
 import { camelizeKeys } from 'humps';
-import Molecule from '../models/Molecule';
-import Reaction from '../models/Reaction';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+import Molecule from 'src/models/Molecule';
+import Reaction from 'src/models/Reaction';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
 
 export default class PublicFetcher {
   static initialize() {
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/repo/fetchers/RepositoryFetcher.js
similarity index 98%
rename from app/packs/src/components/fetchers/RepositoryFetcher.js
rename to app/packs/src/repo/fetchers/RepositoryFetcher.js
index 649c27fe9..dc54d62f9 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/repo/fetchers/RepositoryFetcher.js
@@ -1,7 +1,7 @@
 import 'whatwg-fetch';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import NotificationActions from '../actions/NotificationActions';
+import Sample from 'src/models/Sample';
+import Reaction from 'src/models/Reaction';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 
 const AnalysisIdstoPublish = element => (
   element.analysisArray()
diff --git a/app/packs/src/components/fetchers/ReviewFetcher.js b/app/packs/src/repo/fetchers/ReviewFetcher.js
similarity index 100%
rename from app/packs/src/components/fetchers/ReviewFetcher.js
rename to app/packs/src/repo/fetchers/ReviewFetcher.js
diff --git a/app/packs/src/repoHome/NavHead.js b/app/packs/src/repoHome/NavHead.js
new file mode 100644
index 000000000..fce7395e5
--- /dev/null
+++ b/app/packs/src/repoHome/NavHead.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';
+
+const Title = <span><img alt="chemotion-" src="/images/repo/logo.png" style={{ width: '20%' }} /> Repository</span>
+
+const NavHead = () => {
+  const isHome = window.location.href.match(/\/home/)
+  return(
+    <Navbar.Brand>
+      <NavDropdown title={Title} className="navig-brand navig-smaller-font" id="bg-nested-dropdown-brand">
+        <MenuItem eventKey="21" href="/home/welcome/">
+          Home
+        </MenuItem>
+        <MenuItem eventKey="22" href="/home/publications">
+          Publications
+        </MenuItem>
+        <MenuItem eventKey="23" href="/home/about">
+          About
+        </MenuItem>
+        <MenuItem eventKey="24" href="/home/directive">
+          Directive
+        </MenuItem>
+      </NavDropdown>
+    </Navbar.Brand>
+  )
+}
+
+export default NavHead;
diff --git a/app/packs/src/libHome/RepoAbout.js b/app/packs/src/repoHome/RepoAbout.js
similarity index 100%
rename from app/packs/src/libHome/RepoAbout.js
rename to app/packs/src/repoHome/RepoAbout.js
diff --git a/app/packs/src/libHome/RepoCardIntro.js b/app/packs/src/repoHome/RepoCardIntro.js
similarity index 92%
rename from app/packs/src/libHome/RepoCardIntro.js
rename to app/packs/src/repoHome/RepoCardIntro.js
index 53a81cd3f..d22111a22 100644
--- a/app/packs/src/libHome/RepoCardIntro.js
+++ b/app/packs/src/repoHome/RepoCardIntro.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
-import RepoCardLatestPublish from './RepoCardLatestPublish';
+import RepoCardLatestPublish from 'src/repoHome/RepoCardLatestPublish';
 
 const RepoCardIntro = ({ lastPublished }) => (
   <div className="repo-intro">
diff --git a/app/packs/src/libHome/RepoCardLatestPublish.js b/app/packs/src/repoHome/RepoCardLatestPublish.js
similarity index 97%
rename from app/packs/src/libHome/RepoCardLatestPublish.js
rename to app/packs/src/repoHome/RepoCardLatestPublish.js
index 486606373..ebba04631 100644
--- a/app/packs/src/libHome/RepoCardLatestPublish.js
+++ b/app/packs/src/repoHome/RepoCardLatestPublish.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Carousel } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
-import PublicActions from '../components/actions/PublicActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 
 const timeInterval = (_date) => {
   let date = _date;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/repoHome/RepoCardMoleculeArchive.js
similarity index 100%
rename from app/packs/src/libHome/RepoCardMoleculeArchive.js
rename to app/packs/src/repoHome/RepoCardMoleculeArchive.js
diff --git a/app/packs/src/libHome/RepoCardReviewerIntro.js b/app/packs/src/repoHome/RepoCardReviewerIntro.js
similarity index 96%
rename from app/packs/src/libHome/RepoCardReviewerIntro.js
rename to app/packs/src/repoHome/RepoCardReviewerIntro.js
index 74fa41fb4..275926dea 100644
--- a/app/packs/src/libHome/RepoCardReviewerIntro.js
+++ b/app/packs/src/repoHome/RepoCardReviewerIntro.js
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Col, Row } from 'react-bootstrap';
 import uuid from 'uuid';
-import ContactEmail from '../components/chemrepo/core/ContactEmail';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
+import ContactEmail from 'src/components/chemrepo/core/ContactEmail';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
 
 const ReviewerCard = ({
   name, photo, tel, email
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/repoHome/RepoCardStaticsBoard.js
similarity index 97%
rename from app/packs/src/libHome/RepoCardStaticsBoard.js
rename to app/packs/src/repoHome/RepoCardStaticsBoard.js
index 01dfcd032..1bd32bafa 100644
--- a/app/packs/src/libHome/RepoCardStaticsBoard.js
+++ b/app/packs/src/repoHome/RepoCardStaticsBoard.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import RepoNavListTypes from './RepoNavListTypes';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
 
 const RepoCardStaticsBoard = (params) => {
   const { publishedStatics } = params;
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/repoHome/RepoCollection.js
similarity index 95%
rename from app/packs/src/libHome/RepoCollection.js
rename to app/packs/src/repoHome/RepoCollection.js
index 432f5bfc8..8d3f5e15a 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/repoHome/RepoCollection.js
@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
 import uuid from 'uuid';
-import RepoCollectionDetails from './RepoCollectionDetails';
-import PublicStore from '../components/stores/PublicStore';
-import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-import { getFormattedISODate } from '../components/chemrepo/date-utils';
+import RepoCollectionDetails from 'src/repoHome/RepoCollectionDetails';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import { MetadataModal, InfoModal } from 'src/repoHome/RepoEmbargoModal';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
+import { getFormattedISODate } from 'src/components/chemrepo/date-utils';
 
 const SvgPath = (svg, type) => {
   if (svg && svg !== '***') {
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/repoHome/RepoCollectionDetails.js
similarity index 89%
rename from app/packs/src/libHome/RepoCollectionDetails.js
rename to app/packs/src/repoHome/RepoCollectionDetails.js
index 85eeb1168..b16411df7 100644
--- a/app/packs/src/libHome/RepoCollectionDetails.js
+++ b/app/packs/src/repoHome/RepoCollectionDetails.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
+import RepoReactionDetails from 'src/repoHome/RepoReactionDetails';
+import RepoSampleDetails from 'src/repoHome/RepoSampleDetails';
 
 export default class RepoCollectionDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/repoHome/RepoCommon.js
similarity index 96%
rename from app/packs/src/libHome/RepoCommon.js
rename to app/packs/src/repoHome/RepoCommon.js
index c83253426..7ea61372b 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/repoHome/RepoCommon.js
@@ -28,42 +28,42 @@ import Select from 'react-select';
 import uuid from 'uuid';
 import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
 import { RepoCommentBtn } from 'repo-review-ui';
-import ContainerComponent from './ContainerComponent';
-import Formula from '../components/common/Formula';
-import HelpInfo from '../components/common/HelpInfo';
-import PubchemLabels from '../components/PubchemLabels';
-import QuillViewer from '../components/QuillViewer';
-import { ChemotionTag } from '../components/PublishCommon';
-import Sample from '../components/models/Sample';
-import Reaction from '../components/models/Reaction';
-import PrintCodeButton from '../components/common/PrintCodeButton';
-import { stopBubble } from '../components/utils/DomHelper';
-import RepoContainerDatasets from './RepoContainerDatasets';
-import ImageModal from '../components/common/ImageModal';
-import Utils from '../components/utils/Functions';
-import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from '../components/utils/ElementUtils';
-import { contentToText } from '../components/utils/quillFormat';
-import { chmoConversions } from '../components/OlsComponent';
-import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
-import InputButtonField from '../components/common/InputButtonField';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import PublicActions from '../components/actions/PublicActions';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
-import { previewContainerImage } from '../components/utils/imageHelper';
-import RepoXvialButton from '../components/common/RepoXvialButton';
-import RepoPreviewImage from '../components/common/RepoPreviewImage';
-import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoSegment from './RepoSegment';
-import MolViewerBtn from '../components/viewer/MolViewerBtn';
-import MolViewerListBtn from '../components/viewer/MolViewerListBtn';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-import { getFormattedISODate, getFormattedISODateTime } from '../components/chemrepo/date-utils';
-import { formatPhysicalProps } from '../components/chemrepo/publication-utils';
-import LdData from '../components/chemrepo/LdData';
-import PublicLabels from '../components/chemrepo/PublicLabels';
-import PublicReactionTlc from '../components/chemrepo/PublicReactionTlc';
-import PublicReactionProperties from '../components/chemrepo/PublicReactionProperties';
+import ContainerComponent from 'src/libHome/ContainerComponent';
+import Formula from 'src/components/common/Formula';
+import HelpInfo from 'src/components/common/HelpInfo';
+import PubchemLabels from 'src/components/pubchem/PubchemLabels';
+import QuillViewer from 'src/components/QuillViewer';
+import { ChemotionTag } from 'src/components/chemrepo/PublishCommon'; // TODO: Paggy
+import Sample from 'src/models/Sample';
+import Reaction from 'src/models/Reaction';
+import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import { stopBubble } from 'src/utilities/DomHelper';
+import RepoContainerDatasets from 'src/repoHome/RepoContainerDatasets';
+import ImageModal from 'src/components/common/ImageModal';
+import Utils from 'src/utilities/Functions';
+import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from 'src/utilities/ElementUtils';
+import { contentToText } from 'src/utilities/quillFormat';
+import { chmoConversions } from 'src/components/OlsComponent';
+import DropdownButtonSelection from 'src/components/common/DropdownButtonSelection';
+import InputButtonField from 'src/components/common/InputButtonField';
+import RepoReactionSchemeInfo from 'src/repoHome/RepoReactionSchemeInfo';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import RepoUserComment from 'src/components/chemrepo/common/RepoUserComment';
+import RepoPublicComment from 'src/components/chemrepo/common/RepoPublicComment';
+import { previewContainerImage } from 'src/utilities/imageHelper';
+import RepoXvialButton from 'src/components/chemrepo/common/RepoXvialButton';
+import RepoPreviewImage from 'src/components/chemrepo/common/RepoPreviewImage';
+import { Citation, RefByUserInfo } from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import RepoSegment from 'src/repoHome/RepoSegment';
+import MolViewerBtn from 'src/components/viewer/MolViewerBtn';
+import MolViewerListBtn from 'src/components/viewer/MolViewerListBtn';
+import LicenseIcon from 'src/components/chemrepo/LicenseIcon';
+import { getFormattedISODate, getFormattedISODateTime } from 'src/components/chemrepo/date-utils';
+import { formatPhysicalProps } from 'src/components/chemrepo/publication-utils';
+import LdData from 'src/components/chemrepo/LdData';
+import PublicLabels from 'src/components/chemrepo/PublicLabels';
+import PublicReactionTlc from 'src/components/chemrepo/PublicReactionTlc';
+import PublicReactionProperties from 'src/components/chemrepo/PublicReactionProperties';
 
 const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
 
diff --git a/app/packs/src/libHome/RepoContact.js b/app/packs/src/repoHome/RepoContact.js
similarity index 100%
rename from app/packs/src/libHome/RepoContact.js
rename to app/packs/src/repoHome/RepoContact.js
diff --git a/app/packs/src/libHome/RepoContainerDatasets.js b/app/packs/src/repoHome/RepoContainerDatasets.js
similarity index 92%
rename from app/packs/src/libHome/RepoContainerDatasets.js
rename to app/packs/src/repoHome/RepoContainerDatasets.js
index 09d3a3149..266136f3f 100644
--- a/app/packs/src/libHome/RepoContainerDatasets.js
+++ b/app/packs/src/repoHome/RepoContainerDatasets.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
-import ContainerDatasetModal from '../components/ContainerDatasetModal';
-import ContainerDatasetField from '../components/ContainerDatasetField';
+import ContainerDatasetModal from 'src/components/container/ContainerDatasetModal';
+import ContainerDatasetField from 'src/components/container/ContainerDatasetField';
 
 export default class RepoContainerDatasets extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoDirective.js b/app/packs/src/repoHome/RepoDirective.js
similarity index 100%
rename from app/packs/src/libHome/RepoDirective.js
rename to app/packs/src/repoHome/RepoDirective.js
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/repoHome/RepoElementDetails.js
similarity index 85%
rename from app/packs/src/libHome/RepoElementDetails.js
rename to app/packs/src/repoHome/RepoElementDetails.js
index 63b7d16d8..28c4fc371 100644
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ b/app/packs/src/repoHome/RepoElementDetails.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import { DatasetDetail } from './RepoCommon';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import { DatasetDetail } from 'src/repoHome/RepoCommon';
+import RepoReactionDetails from 'src/repoHome/RepoReactionDetails';
+import RepoSampleDetails from 'src/repoHome/RepoSampleDetails';
 
 export default class RepoElementDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/repoHome/RepoEmbargo.js
similarity index 96%
rename from app/packs/src/libHome/RepoEmbargo.js
rename to app/packs/src/repoHome/RepoEmbargo.js
index 56af4c12e..27503ff5a 100644
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ b/app/packs/src/repoHome/RepoEmbargo.js
@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
 import Select from 'react-select';
 import { filter } from 'lodash';
-import RepoEmbargoDetails from './RepoEmbargoDetails';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import EmbargoStore from '../components/stores/EmbargoStore';
-import { ElAspect } from './RepoCommon';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
+import RepoEmbargoDetails from 'src/repoHome/RepoEmbargoDetails';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
+import EmbargoStore from 'src/stores/alt/repo/stores/EmbargoStore';
+import { ElAspect } from 'src/repoHome/RepoCommon';
+import { ConfirmModal } from 'src/components/common/ConfirmModal';
+import { MetadataModal, InfoModal } from 'src/repoHome/RepoEmbargoModal';
+import RepoReviewAuthorsModal from 'src/components/chemrepo/common/RepoReviewAuthorsModal';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
 
 export default class RepoEmbargo extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/repoHome/RepoEmbargoDetails.js
similarity index 88%
rename from app/packs/src/libHome/RepoEmbargoDetails.js
rename to app/packs/src/repoHome/RepoEmbargoDetails.js
index f5205fce2..d6bf831fb 100644
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ b/app/packs/src/repoHome/RepoEmbargoDetails.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import EmbargoStore from '../components/stores/EmbargoStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
+import EmbargoStore from 'src/stores/alt/repo/stores/EmbargoStore';
+import RepoReactionDetails from 'src/repoHome/RepoReactionDetails';
+import RepoSampleDetails from 'src/repoHome/RepoSampleDetails';
 
 export default class RepoEmbargoDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/repoHome/RepoEmbargoModal.js
similarity index 98%
rename from app/packs/src/libHome/RepoEmbargoModal.js
rename to app/packs/src/repoHome/RepoEmbargoModal.js
index c25ad2e27..27d2fd0eb 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/repoHome/RepoEmbargoModal.js
@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { AffiliationMap } from 'repo-review-ui';
-import Utils from '../components/utils/Functions';
+import Utils from 'src/utilities/Functions';
 import {
   AffiliationList,
   AuthorList,
   ContributorInfo,
   DownloadMetadataBtn
-} from './RepoCommon';
+} from 'src/repoHome/RepoCommon';
 
 const Doi = (props) => {
   const { type, id, doi } = props;
diff --git a/app/packs/src/libHome/RepoGenericHub.js b/app/packs/src/repoHome/RepoGenericHub.js
similarity index 92%
rename from app/packs/src/libHome/RepoGenericHub.js
rename to app/packs/src/repoHome/RepoGenericHub.js
index 3837e0c0c..56672f52e 100644
--- a/app/packs/src/libHome/RepoGenericHub.js
+++ b/app/packs/src/repoHome/RepoGenericHub.js
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { Button, ButtonGroup, Col, Row } from 'react-bootstrap';
 import { GenGridBase } from 'chem-generic-ui';
-import GenericBaseFetcher from '../components/fetchers/GenericBaseFetcher';
-import Utils from '../components/utils/Functions';
-import RepoGenericHubDesc from './RepoGenericHubDesc';
+import GenericBaseFetcher from 'src/fetchers/GenericBaseFetcher';
+import Utils from 'src/utilities/Functions';
+import RepoGenericHubDesc from 'src/repoHome/RepoGenericHubDesc';
+import capitalizeFirstLetter from 'src/components/chemrepo/format-utils';
 
 const getCurrentDateTimeString = () => {
   const now = new Date();
@@ -22,10 +23,7 @@ const downloadFile = (data, filename) => {
   Utils.downloadFile({ contents: href, name: `${filename}_${getCurrentDateTimeString()}.json` });
 };
 
-const capitalizeFirstLetter = str => str.replace(/^[a-z]/, match => match.toUpperCase());
-
 const RepoGenericHub = () => {
-  const [expanded, setExpanded] = useState(false);
   const [state, setState] = useState({
     menuSelected: '',
     gridData: [],
@@ -147,15 +145,11 @@ const RepoGenericHub = () => {
     dataset: dsColumnDefs,
   };
 
-  const clickExpand = () => {
-    setExpanded(!expanded);
-  };
-
   const clickMenu = (e, type) => {
     e.stopPropagation();
-    GenericBaseFetcher.open(`/list?klass=${capitalizeFirstLetter(type)}Klass&with_props=true`, 'GET')
+    GenericBaseFetcher.open(`list?klass=${capitalizeFirstLetter(type)}Klass&with_props=true`, 'GET')
       .then((result) => {
-        setState({ ...state, menuSelected: type, gridData: result.list });
+        setState({ ...state, menuSelected: type, gridData: result });
       })
       .catch((error) => {
         console.error('Error fetching dataset klasses:', error);
diff --git a/app/packs/src/libHome/RepoGenericHubDesc.js b/app/packs/src/repoHome/RepoGenericHubDesc.js
similarity index 67%
rename from app/packs/src/libHome/RepoGenericHubDesc.js
rename to app/packs/src/repoHome/RepoGenericHubDesc.js
index 672b89896..181d7880f 100644
--- a/app/packs/src/libHome/RepoGenericHubDesc.js
+++ b/app/packs/src/repoHome/RepoGenericHubDesc.js
@@ -1,9 +1,18 @@
 import React from 'react';
-import ContactEmail from '../components/chemrepo/core/ContactEmail';
+import { Button } from 'react-bootstrap';
+import ContactEmail from 'src/components/chemrepo/core/ContactEmail';
 
 const RepoGenericHubDesc = () => (
   <div className="repo-generic-hub-desc">
-    <h1>LabIMotion Template Hub<span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span></h1>
+    <h1>
+      LabIMotion Template Hub
+      <span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span>
+      <span className="contact">
+        <Button bsSize="small" onClick={() => { window.open('https://www.chemotion.net/docs/labimotion', '_blank'); }}>
+          <i className="fa fa-book" aria-hidden="true" />&nbsp;LabIMotion Docs
+        </Button>
+      </span>
+    </h1>
     <h3>
       Welcome to the <b>LabIMotion Template Hub</b>, your platform for sharing new elements, segments, and datasets templates.
     </h3>
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/repoHome/RepoHome.js
similarity index 91%
rename from app/packs/src/libHome/RepoHome.js
rename to app/packs/src/repoHome/RepoHome.js
index 796c03881..b1a24e878 100644
--- a/app/packs/src/libHome/RepoHome.js
+++ b/app/packs/src/repoHome/RepoHome.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { Col, Row, Thumbnail } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoCardStaticsBoard from './RepoCardStaticsBoard';
-import RepoCardIntro from './RepoCardIntro';
-import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
-import { RepoCardReviewerIntro, RepoCardReviewerIntroBtn, ReviewGuidelines } from './RepoCardReviewerIntro';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import { HomeFeature } from 'src/repoHome/RepoCommon';
+import RepoCardStaticsBoard from 'src/repoHome/RepoCardStaticsBoard';
+import RepoCardIntro from 'src/repoHome/RepoCardIntro';
+import RepoCardMoleculeArchive from 'src/repoHome/RepoCardMoleculeArchive';
+import { RepoCardReviewerIntro, RepoCardReviewerIntroBtn } from 'src/repoHome/RepoCardReviewerIntro';
+import PublicSearchIcons from 'src/components/chemrepo/search/PublicSearchIcons';
 
 const PartnersInfo = (info) => {
   const { header, img, content } = info;
@@ -154,25 +155,19 @@ class RepoHome extends Component {
 
     return (
       <Row className="repo-welcome">
-        <Col lg={12} md={12} sm={12} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Col lg={12} md={12} sm={12} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
           <img
             className="icon-chemotion"
             src="/images/repo/Chemotion-V1.png"
             key="chemotion_full"
             alt="Chemotion Repository"
           />
+          <PublicSearchIcons />
         </Col>
         <Col md={12} sm={12}>
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <Col md={3} sm={12}>
               <RepoCardMoleculeArchive publishedStatics={this.state.publishedStatics} />
-              <a className="repo-nfdi-award" href="https://www.nfdi4chem.de/fair4chem-award/" target="_blank" rel="noreferrer">
-                <img
-                  src="/images/repo/fair4chem_chemotion_2024_EN.jpg"
-                  alt="FAIR4Chem Award"
-                  title="FAIR4Chem Award"
-                />
-              </a>
             </Col>
             <Col md={6} sm={12}>
               <RepoCardIntro lastPublished={this.state.lastPublished} />
diff --git a/app/packs/src/libHome/RepoHowTo.js b/app/packs/src/repoHome/RepoHowTo.js
similarity index 94%
rename from app/packs/src/libHome/RepoHowTo.js
rename to app/packs/src/repoHome/RepoHowTo.js
index 00c109964..d82e03596 100644
--- a/app/packs/src/libHome/RepoHowTo.js
+++ b/app/packs/src/repoHome/RepoHowTo.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { orderBy } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from 'src/repoHome/RepoCommon';
 
 const renderEditRead = (article, isEditor) => {
   if (isEditor === true) {
diff --git a/app/packs/src/libHome/RepoHowToDragSource.js b/app/packs/src/repoHome/RepoHowToDragSource.js
similarity index 90%
rename from app/packs/src/libHome/RepoHowToDragSource.js
rename to app/packs/src/repoHome/RepoHowToDragSource.js
index 0873b66a2..530d49f7a 100644
--- a/app/packs/src/libHome/RepoHowToDragSource.js
+++ b/app/packs/src/repoHome/RepoHowToDragSource.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DragSource } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
 
 const listSource = {
   beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
diff --git a/app/packs/src/libHome/RepoHowToDropTarget.js b/app/packs/src/repoHome/RepoHowToDropTarget.js
similarity index 94%
rename from app/packs/src/libHome/RepoHowToDropTarget.js
rename to app/packs/src/repoHome/RepoHowToDropTarget.js
index 09efb95a6..0f305e017 100644
--- a/app/packs/src/libHome/RepoHowToDropTarget.js
+++ b/app/packs/src/repoHome/RepoHowToDropTarget.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
 
 const stelleTarget = {
   drop(targetProps, monitor) {
diff --git a/app/packs/src/libHome/RepoHowToEditor.js b/app/packs/src/repoHome/RepoHowToEditor.js
similarity index 95%
rename from app/packs/src/libHome/RepoHowToEditor.js
rename to app/packs/src/repoHome/RepoHowToEditor.js
index 7feca87b5..4cb77b28e 100644
--- a/app/packs/src/libHome/RepoHowToEditor.js
+++ b/app/packs/src/repoHome/RepoHowToEditor.js
@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
 import Dropzone from 'react-dropzone';
 import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
+import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
+import NewsPreviewModal from 'src/components/common/NewsPreviewModal';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import { ConfirmModal } from 'src/components/common/ConfirmModal';
+import Attachment from 'src/models/Attachment';
+import { EditorTips, DateFormatDMYTime } from 'src/repoHome/RepoCommon';
+import { contentToText } from 'src/utilities/quillFormat';
+import { EditorBtn, EditorBaseBtn } from 'src/libHome/RepoHowTo/EditorBtn';
+import EditorStelle from 'src/libHome/RepoHowTo/EditorStelle';
 
 const extractIntro = (article) => {
   const result = article.filter(a => a.art === 'txt');
diff --git a/app/packs/src/libHome/RepoHowToReader.js b/app/packs/src/repoHome/RepoHowToReader.js
similarity index 95%
rename from app/packs/src/libHome/RepoHowToReader.js
rename to app/packs/src/repoHome/RepoHowToReader.js
index 4728c4c69..53a49d92d 100644
--- a/app/packs/src/libHome/RepoHowToReader.js
+++ b/app/packs/src/repoHome/RepoHowToReader.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { Panel, Row, Col } from 'react-bootstrap';
 import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import QuillViewer from 'src/components/QuillViewer';
+import { DateFormatYMDLong } from 'src/repoHome/RepoCommon';
 
 export default class RepoHowToReader extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/repoHome/RepoMoleculeArchive.js
similarity index 93%
rename from app/packs/src/libHome/RepoMoleculeArchive.js
rename to app/packs/src/repoHome/RepoMoleculeArchive.js
index 4feba19f4..c854c6850 100644
--- a/app/packs/src/libHome/RepoMoleculeArchive.js
+++ b/app/packs/src/repoHome/RepoMoleculeArchive.js
@@ -4,10 +4,10 @@ import uuid from 'uuid';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
 import SVG from 'react-inlinesvg';
-import PublicActions from '../components/actions/PublicActions';
-import Formula from '../components/common/Formula';
-import PubchemLabels from '../components/PubchemLabels';
-import RepoNavListTypes from './RepoNavListTypes';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import Formula from 'src/components/common/Formula';
+import PubchemLabels from 'src/components/pubchem/PubchemLabels';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
 
 const pubchemTag = (molecule) => {
   if (molecule && molecule.tag &&
diff --git a/app/packs/src/libHome/RepoMoleculeList.js b/app/packs/src/repoHome/RepoMoleculeList.js
similarity index 91%
rename from app/packs/src/libHome/RepoMoleculeList.js
rename to app/packs/src/repoHome/RepoMoleculeList.js
index bea4fff74..bec13f2d7 100644
--- a/app/packs/src/libHome/RepoMoleculeList.js
+++ b/app/packs/src/repoHome/RepoMoleculeList.js
@@ -3,11 +3,11 @@ import React from 'react';
 import uuid from 'uuid';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import Formula from '../components/common/Formula';
-import PubchemLabels from '../components/PubchemLabels';
-import { xvialTag, svgTag } from './RepoPubCommon';
-import { getFormattedISODate } from '../components/chemrepo/date-utils';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import Formula from 'src/components/common/Formula';
+import PubchemLabels from 'src/components/pubchem/PubchemLabels';
+import { xvialTag, svgTag } from 'src/repoHome/RepoPubCommon';
+import { getFormattedISODate } from 'src/components/chemrepo/date-utils';
 
 const pubchemTag = (molecule) => {
   if (molecule && molecule.tag &&
diff --git a/app/packs/src/libHome/RepoNavListTypes.js b/app/packs/src/repoHome/RepoNavListTypes.js
similarity index 100%
rename from app/packs/src/libHome/RepoNavListTypes.js
rename to app/packs/src/repoHome/RepoNavListTypes.js
diff --git a/app/packs/src/libHome/RepoNewsEditor.js b/app/packs/src/repoHome/RepoNewsEditor.js
similarity index 96%
rename from app/packs/src/libHome/RepoNewsEditor.js
rename to app/packs/src/repoHome/RepoNewsEditor.js
index 99218a3f8..77f83ea6f 100644
--- a/app/packs/src/libHome/RepoNewsEditor.js
+++ b/app/packs/src/repoHome/RepoNewsEditor.js
@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
 import Dropzone from 'react-dropzone';
 import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
+import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
+import NewsPreviewModal from 'src/components/common/NewsPreviewModal';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import { ConfirmModal } from 'src/components/common/ConfirmModal';
+import Attachment from 'src/models/Attachment';
+import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from 'src/repoHome/RepoCommon';
+import { contentToText } from 'src/utilities/quillFormat';
+import { EditorBtn, EditorBaseBtn } from 'src/libHome/RepoHowTo/EditorBtn';
+import EditorStelle from 'src/libHome/RepoHowTo/EditorStelle';
 
 const extractIntro = (article) => {
   const result = article.filter(a => a.art === 'txt');
diff --git a/app/packs/src/libHome/RepoNewsReader.js b/app/packs/src/repoHome/RepoNewsReader.js
similarity index 95%
rename from app/packs/src/libHome/RepoNewsReader.js
rename to app/packs/src/repoHome/RepoNewsReader.js
index 0e83e02d7..894c44272 100644
--- a/app/packs/src/libHome/RepoNewsReader.js
+++ b/app/packs/src/repoHome/RepoNewsReader.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { Panel, Row, Col } from 'react-bootstrap';
 import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import QuillViewer from 'src/components/QuillViewer';
+import { DateFormatYMDLong } from 'src/repoHome/RepoCommon';
 
 export default class RepoNewsReader extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoNewsroom.js b/app/packs/src/repoHome/RepoNewsroom.js
similarity index 95%
rename from app/packs/src/libHome/RepoNewsroom.js
rename to app/packs/src/repoHome/RepoNewsroom.js
index 19e9f6020..4d3275cc7 100644
--- a/app/packs/src/libHome/RepoNewsroom.js
+++ b/app/packs/src/repoHome/RepoNewsroom.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { orderBy, slice } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from 'src/repoHome/RepoCommon';
 
 const renderEditRead = (article, isEditor) => {
   if (isEditor === true) {
diff --git a/app/packs/src/libHome/RepoPubCommon.js b/app/packs/src/repoHome/RepoPubCommon.js
similarity index 100%
rename from app/packs/src/libHome/RepoPubCommon.js
rename to app/packs/src/repoHome/RepoPubCommon.js
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/repoHome/RepoPubl.js
similarity index 80%
rename from app/packs/src/libHome/RepoPubl.js
rename to app/packs/src/repoHome/RepoPubl.js
index 40ced4395..906313fab 100644
--- a/app/packs/src/libHome/RepoPubl.js
+++ b/app/packs/src/repoHome/RepoPubl.js
@@ -1,25 +1,27 @@
 import React, { Component } from 'react';
 import {
   Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
-  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
+  Grid, Radio, DropdownButton, MenuItem,
   FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
   Tabs, Tab
 } from 'react-bootstrap';
 import Select from 'react-select';
+import AsyncSelect from 'react-select5/async';
 import uuid from 'uuid';
-import UIActions from '../components/actions/UIActions';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoElementDetails from './RepoElementDetails';
-import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
-import AutoCompleteInput from '../components/search/AutoCompleteInput';
-import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
-import LoadingActions from '../components/actions/LoadingActions';
-import RepoReactionList from './RepoReactionList';
-import RepoMoleculeList from './RepoMoleculeList';
-import RepoMoleculeArchive from './RepoMoleculeArchive';
-import RepoNavListTypes from './RepoNavListTypes';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
+import RepoElementDetails from 'src/repoHome/RepoElementDetails';
+import SuggestionsFetcher from 'src/fetchers/SuggestionsFetcher';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import AutoCompleteInput from 'src/components/navigation/search/AutoCompleteInput';
+import StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import RepoReactionList from 'src/repoHome/RepoReactionList';
+import RepoMoleculeList from 'src/repoHome/RepoMoleculeList';
+import RepoMoleculeArchive from 'src/repoHome/RepoMoleculeArchive';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
+import capitalizeFirstLetter from 'src/components/chemrepo/format-utils';
 
 const renderMoleculeArchive =
   (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
@@ -90,6 +92,10 @@ const TabTip = props => (
   </OverlayTrigger>
 );
 
+const handleSelectAdvType = (val) => {
+  if (val) PublicActions.setSearchParams({ advFlag: true, advType: val, advValue: null });
+};
+
 export default class RepoPubl extends Component {
   constructor(props) {
     super(props);
@@ -111,7 +117,7 @@ export default class RepoPubl extends Component {
       advValue: [],
       selectUsers: [],
       key: uuid.v4(),
-      showSearch: false
+      showSearch: false,
     };
 
     this.onChange = this.onChange.bind(this);
@@ -123,7 +129,6 @@ export default class RepoPubl extends Component {
     this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
     this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
     this.advSearchClick = this.advSearchClick.bind(this);
-    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
     this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
     this.handleElementSelection = this.handleElementSelection.bind(this);
     this.handleShowSearch = this.handleShowSearch.bind(this);
@@ -132,7 +137,6 @@ export default class RepoPubl extends Component {
   componentDidMount() {
     PublicActions.selectPublicCollection.defer();
     PublicStore.listen(this.onChange);
-    // PublicActions.getReactions.defer();
   }
 
   componentWillUnmount() {
@@ -140,7 +144,10 @@ export default class RepoPubl extends Component {
   }
 
   onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
+    const { searchOptions, advFlag } = state;
+    this.setState(prevState => ({
+      ...prevState, ...state, searchOptions: searchOptions || [], showSearch: (advFlag || false)
+    }));
   }
 
   handleSearchTypeChange(e) {
@@ -153,23 +160,31 @@ export default class RepoPubl extends Component {
   }
 
   showStructureEditor() {
-    this.setState({ showStructureEditor: true });
+    this.setState(
+      { showStructureEditor: true },
+      () => PublicActions.setSearchParams({ showStructureEditor: true, advFlag: true })
+    );
   }
 
   hideStructureEditor() {
-    this.setState({ showStructureEditor: false });
+    this.setState(
+      { showStructureEditor: false },
+      () => {
+        PublicActions.setSearchParams({ showStructureEditor: false });
+        LoadingActions.stop();
+      }
+    );
   }
 
   showAdvancedSearch() {
     this.setState({ advFlag: true });
   }
 
-  handleSelectAdvType(val) {
-    if (val) { this.setState({ advType: val, advValue: null }); }
-  }
-
   onPerPageChange(e) {
-    this.setState({ perPage: e.target.value }, () => this.getList());
+    this.setState({ perPage: e.target.value }, () => {
+      PublicActions.setSearchParams({ perPage: e.target.value });
+      this.getList();
+    });
   }
 
   getList(ps = {}) {
@@ -236,7 +251,18 @@ export default class RepoPubl extends Component {
       isSearch: false,
       key: uuid.v4(),
       page: 1
-    }, () => this.getList());
+    }, () => {
+      PublicActions.setSearchParams({
+        defaultSearchValue: null,
+        searchType: 'similar',
+        tanimotoThreshold: 0.7,
+        queryMolfile: null,
+        isSearch: false,
+        key: uuid.v4(),
+        page: 1
+      });
+      this.getList();
+    });
   }
 
   handleElementSelection(event) {
@@ -245,26 +271,35 @@ export default class RepoPubl extends Component {
 
   handleShowSearch() {
     const { showSearch, advFlag } = this.state;
-    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
+    PublicActions.setSearchParams({
+      showSearch: !showSearch, advFlag: !advFlag
+    });
   }
 
   closeAdvancedSearch() {
-    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
+    this.setState({
+      advType: 'Authors', advValue: [], page: 1, searchOptions: []
+    }, () => {
+      PublicActions.setSearchParams({
+        advType: 'Authors', advValue: [], page: 1, searchOptions: []
+      });
+      this.getList();
+    });
   }
 
 
   loadAdvValuesByName(input) {
     if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
+      this.setState({ searchOptions: [] });
+      return Promise.resolve([]);
     }
-    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
-      .then(res => ({
-        options: res.result?.map(u => ({
-          value: u.key,
-          name: u.name,
-          label: u.label
-        }))
-      })).catch((errorMessage) => {
+    return PublicFetcher.fetchAdvancedValues(capitalizeFirstLetter(this.state.advType), input)
+      .then((res) => {
+        const result = res.result.map(u => ({ value: u.key, name: u.name, label: u.label }))
+        this.setState({ searchOptions: result });
+        return result;
+      })
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
@@ -302,7 +337,14 @@ export default class RepoPubl extends Component {
       isSearch: true,
       selection,
       page: 1
-    }, () => this.getList());
+    }, () => {
+      PublicActions.setSearchParams({
+        isSearch: true,
+        selection,
+        page: 1,
+      });
+      this.getList();
+    });
   }
 
   structureSearch(molfile) {
@@ -325,7 +367,17 @@ export default class RepoPubl extends Component {
         defaultSearchValue: 'structure',
         queryMolfile: molfile
       },
-      () => this.getList()
+      () => {
+        PublicActions.setSearchParams({
+          isSearch: true,
+          selection,
+          page: 1,
+          defaultSearchValue: 'structure',
+          queryMolfile: molfile,
+          showStructureEditor: false
+        });
+        this.getList();
+      }
     );
   }
 
@@ -399,7 +451,6 @@ export default class RepoPubl extends Component {
     return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
   }
 
-
   renderSwitch() {
     const { listType } = this.state;
     if (listType === RepoNavListTypes.MOLECULE_ARCHIVE) {
@@ -426,35 +477,35 @@ export default class RepoPubl extends Component {
     );
   }
 
-  renderSelectValues() {
-    const { advValue } = this.state;
-    return (
-      <Select.Async
-        multi
-        isLoading
-        backspaceRemoves
-        value={advValue}
-        valueKey="value"
-        labelKey="label"
-        loadOptions={this.loadAdvValuesByName}
-        onChange={this.handleSelectAdvValue}
-      />
-    );
-  }
-
   handleSelectAdvValue(val) {
-    if (val) {
-      this.setState({ advValue: val });
+    if (val && val.length > 0) {
+      this.setState({ advValue: val }, () => {
+        PublicActions.setSearchParams({ advValue: val });
+      });
+    } else {
+      this.setState({ advValue: [], searchOptions: [] }, () => {
+        PublicActions.setSearchParams({ advValue: [], searchOptions: [] });
+      });
     }
   }
 
   advSearchClick() {
-    this.setState({ page: 1 }, () => this.getList());
+    const {
+      advType, advValue, searchOptions = []
+    } = this.state;
+    this.setState({ page: 1 }, () => {
+      PublicActions.setSearchParams({
+        advFlag: true, advType: advType || 'Authors', advValue, searchOptions, page: 1
+      });
+      this.getList();
+    });
   }
 
   renderAdvancedSearch() {
-    const { advFlag, advType, advValue } = this.state;
-    if (advFlag === true) {
+    const {
+      advFlag, advType, advValue, searchOptions = []
+    } = this.state;
+    if (advFlag) {
       this.listOptions = [
         { value: 'Authors', label: 'by authors' },
         { value: 'Ontologies', label: 'by analysis type' },
@@ -471,23 +522,41 @@ export default class RepoPubl extends Component {
               clearable={false}
               valueKey="value"
               labelKey="label"
-              onChange={this.handleSelectAdvType}
+              onChange={handleSelectAdvType}
               defaultValue="Authors"
               value={advType}
               className="o-author"
             />
           </div>
           <div>
-            <Select.Async
-              multi
-              isLoading
-              backspaceRemoves
+            <AsyncSelect
+              isMulti
+              backspaceRemovesValue
               value={advValue}
               valueKey="value"
               labelKey="label"
+              defaultOptions={searchOptions}
               loadOptions={this.loadAdvValuesByName}
               onChange={this.handleSelectAdvValue}
-              className="o-name"
+              styles={{
+                control: base => ({
+                  ...base,
+                  height: '36px',
+                  minHeight: '36px',
+                  minWidth: '200px',
+                  borderRadius: 'unset',
+                  border: '1px solid #ccc',
+                }),
+                multiValue: styles => ({
+                  ...styles,
+                  backgroundColor: '#00b8d91a',
+                  opacity: '0.8',
+                }),
+                multiValueLabel: styles => ({
+                  ...styles,
+                  color: '#0052CC',
+                }),
+              }}
             />
           </div>
           <div className="btns-grp">
@@ -521,7 +590,7 @@ export default class RepoPubl extends Component {
       <ButtonGroup className="home-search">
         <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
           <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
-            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
+            <i className="fa fa-paint-brush" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
         <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/repoHome/RepoReactionDetails.js
similarity index 94%
rename from app/packs/src/libHome/RepoReactionDetails.js
rename to app/packs/src/repoHome/RepoReactionDetails.js
index b0bfeaac3..294c879b3 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/repoHome/RepoReactionDetails.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Panel, Row, Col, Button, Jumbotron } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { head, filter } from 'lodash';
-import ArrayUtils from '../components/utils/ArrayUtils';
+import ArrayUtils from 'src/utilities/ArrayUtils';
 import {
   AuthorList,
   AffiliationList,
@@ -21,27 +21,27 @@ import {
   AnalysesTypeJoinLabel,
   SchemeWord,
   resizableSvg,
-} from './RepoCommon';
-import PublicActions from '../components/actions/PublicActions';
-import ReviewActions from '../components/actions/ReviewActions';
-import DateInfo from '../components/chemrepo/DateInfo';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-import PublicAnchor from '../components/chemrepo/PublicAnchor';
-import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
-import PublicReactionTlc from '../components/chemrepo/PublicReactionTlc';
-import PublicReactionProperties from '../components/chemrepo/PublicReactionProperties';
-import UserCommentModal from '../components/chemrepo/UserCommentModal';
-import QuillViewer from '../components/QuillViewer';
+} from 'src/repoHome/RepoCommon';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import DateInfo from 'src/components/chemrepo/DateInfo';
+import LicenseIcon from 'src/components/chemrepo/LicenseIcon';
+import PublicAnchor from 'src/components/chemrepo/PublicAnchor';
+import PublicCommentModal from 'src/components/chemrepo/PublicCommentModal';
+import PublicReactionTlc from 'src/components/chemrepo/PublicReactionTlc';
+import PublicReactionProperties from 'src/components/chemrepo/PublicReactionProperties';
+import UserCommentModal from 'src/components/chemrepo/UserCommentModal';
+import QuillViewer from 'src/components/QuillViewer';
 import {
   Citation,
   literatureContent,
   RefByUserInfo,
-} from '../components/LiteratureCommon';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import Sample from '../components/models/Sample';
-import RepoSegment from './RepoSegment';
-import { getAuthorLabel } from '../components/chemrepo/publication-utils';
+} from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import RepoReactionSchemeInfo from 'src/repoHome/RepoReactionSchemeInfo';
+import RepoReviewButtonBar from 'src/repoHome/RepoReviewButtonBar';
+import Sample from 'src/models/Sample';
+import RepoSegment from 'src/repoHome/RepoSegment';
+import { getAuthorLabel } from 'src/components/chemrepo/publication-utils';
 
 export default class RepoReactionDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoReactionList.js b/app/packs/src/repoHome/RepoReactionList.js
similarity index 97%
rename from app/packs/src/libHome/RepoReactionList.js
rename to app/packs/src/repoHome/RepoReactionList.js
index 71157dd8b..70edef3af 100644
--- a/app/packs/src/libHome/RepoReactionList.js
+++ b/app/packs/src/repoHome/RepoReactionList.js
@@ -4,8 +4,8 @@ import uuid from 'uuid';
 import SVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import { getFormattedISODate } from '../components/chemrepo/date-utils';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import { getFormattedISODate } from 'src/components/chemrepo/date-utils';
 
 const xvialTag = (element, hasXvial = null) => {
   const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
diff --git a/app/packs/src/libHome/RepoReactionSchemeInfo.js b/app/packs/src/repoHome/RepoReactionSchemeInfo.js
similarity index 93%
rename from app/packs/src/libHome/RepoReactionSchemeInfo.js
rename to app/packs/src/repoHome/RepoReactionSchemeInfo.js
index 1cd458041..ba240c608 100644
--- a/app/packs/src/libHome/RepoReactionSchemeInfo.js
+++ b/app/packs/src/repoHome/RepoReactionSchemeInfo.js
@@ -6,8 +6,13 @@ import {
   Col
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import { CommentBtn, ReactionTable, ReactionRinChiKey, resizableSvg } from './RepoCommon';
-import QuillViewer from '../components/QuillViewer';
+import {
+  CommentBtn,
+  ReactionTable,
+  ReactionRinChiKey,
+  resizableSvg
+} from 'src/repoHome/RepoCommon';
+import QuillViewer from 'src/components/QuillViewer';
 
 const RepoReactionSchemeInfo = (props) => {
   const content = props.reaction.description;
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/repoHome/RepoReview.js
similarity index 96%
rename from app/packs/src/libHome/RepoReview.js
rename to app/packs/src/repoHome/RepoReview.js
index ce895a05b..30f23de0a 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/repoHome/RepoReview.js
@@ -4,15 +4,15 @@ import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Paginat
 import Select from 'react-select';
 import { filter } from 'lodash';
 import { RepoReviewModal, RepoCommentModal } from 'repo-review-ui';
-import RepoReviewDetails from './RepoReviewDetails';
-import ReviewActions from '../components/actions/ReviewActions';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import ReviewStore from '../components/stores/ReviewStore';
-import UserStore from '../components/stores/UserStore';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import LoadingActions from '../components/actions/LoadingActions';
-import { getFormattedISODateTime } from '../components/chemrepo/date-utils';
-import { SvgPath, ElStateLabel, SchemeWord, ChecklistPanel } from './RepoCommon';
+import RepoReviewDetails from 'src/repoHome/RepoReviewDetails';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
+import ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import { getFormattedISODateTime } from 'src/components/chemrepo/date-utils';
+import { SvgPath, ElStateLabel, SchemeWord, ChecklistPanel } from 'src/repoHome/RepoCommon';
 // import RepoReviewModal from '../components/common/RepoReviewModal';
 
 const renderElement = (e, currentElement, embargoBtn) => {
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/repoHome/RepoReviewButtonBar.js
similarity index 95%
rename from app/packs/src/libHome/RepoReviewButtonBar.js
rename to app/packs/src/repoHome/RepoReviewButtonBar.js
index 136bb8b59..0400cd668 100644
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ b/app/packs/src/repoHome/RepoReviewButtonBar.js
@@ -6,8 +6,8 @@ import {
   Tooltip
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import RepoMetadataModal from '../components/common/RepoMetadataModal';
-import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
+import RepoMetadataModal from 'src/components/chemrepo/common/RepoMetadataModal';
+import RepoReviewAuthorsModal from 'src/components/chemrepo/common/RepoReviewAuthorsModal';
 
 const showButton = (btn, func, pubState, review_info) => {
   let title = btn;
diff --git a/app/packs/src/libHome/RepoReviewCommon.js b/app/packs/src/repoHome/RepoReviewCommon.js
similarity index 100%
rename from app/packs/src/libHome/RepoReviewCommon.js
rename to app/packs/src/repoHome/RepoReviewCommon.js
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/repoHome/RepoReviewDetails.js
similarity index 88%
rename from app/packs/src/libHome/RepoReviewDetails.js
rename to app/packs/src/repoHome/RepoReviewDetails.js
index efafcd440..f2bb6a03b 100644
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ b/app/packs/src/repoHome/RepoReviewDetails.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import ReviewStore from '../components/stores/ReviewStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
+import ReviewStore from 'src/stores/alt/repo/stores/ReviewStore';
+import RepoReactionDetails from 'src/repoHome/RepoReactionDetails';
+import RepoSampleDetails from 'src/repoHome/RepoSampleDetails';
 
 export default class RepoReviewDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/repoHome/RepoSample.js
similarity index 89%
rename from app/packs/src/libHome/RepoSample.js
rename to app/packs/src/repoHome/RepoSample.js
index ac5b74b0e..739901ab8 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/repoHome/RepoSample.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Jumbotron, Panel } from 'react-bootstrap';
 import { AffiliationMap } from 'repo-review-ui';
-import ArrayUtils from '../components/utils/ArrayUtils';
+import ArrayUtils from 'src/utilities/ArrayUtils';
 import {
   AffiliationList,
   AnalysesTypeJoinLabel,
@@ -16,18 +16,18 @@ import {
   SidToPubChem,
   ToggleIndicator,
   ElStateLabel,
-} from './RepoCommon';
-import DateInfo from '../components/chemrepo/DateInfo';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-import MAPanel from '../components/chemrepo/MoleculeArchive';
-import PublicActions from '../components/actions/PublicActions';
-import PublicAnchor from '../components/chemrepo/PublicAnchor';
-import PublicSample from '../components/chemrepo/PublicSample';
-import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
-import RepoSegment from './RepoSegment';
-import Sample from '../components/models/Sample';
-import UserCommentModal from '../components/chemrepo/UserCommentModal';
-import PublicLabels from '../components/chemrepo/PublicLabels';
+} from 'src/repoHome/RepoCommon';
+import DateInfo from 'src/components/chemrepo/DateInfo';
+import LicenseIcon from 'src/components/chemrepo/LicenseIcon';
+import MAPanel from 'src/components/chemrepo/MoleculeArchive';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import PublicAnchor from 'src/components/chemrepo/PublicAnchor';
+import PublicSample from 'src/components/chemrepo/PublicSample';
+import PublicCommentModal from 'src/components/chemrepo/PublicCommentModal';
+import RepoSegment from 'src/repoHome/RepoSegment';
+import Sample from 'src/models/Sample';
+import UserCommentModal from 'src/components/chemrepo/UserCommentModal';
+import PublicLabels from 'src/components/chemrepo/PublicLabels';
 
 const scrollView = () => {
   const anchor = window.location.hash.split('#')[1];
@@ -83,7 +83,7 @@ export default class RepoSample extends Component {
   renderAnalyses(analyses) {
     const { sample } = this.props;
     const specSample = new Sample(sample);
-    specSample.container = sample.analyses;
+    // specSample.container = sample.analyses;
     const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
     return orderAnalyses.map((analysis) => {
       const userInfo =
@@ -141,12 +141,8 @@ export default class RepoSample extends Component {
         </h5>
       );
     const userInfo = sample.pub_info || '';
-    const analyses =
-      (sample.analyses &&
-        sample.analyses.children &&
-        sample.analyses.children.length > 0 &&
-        sample.analyses.children[0].children) ||
-      [];
+    const analysesContainer = sample.container.children?.find((container) => container?.container_type === 'analyses');
+    const analyses = analysesContainer?.children?.filter((container) => container?.container_type === 'analysis') || [];
     let embargo = null;
     let colDoiPrefix = sample?.doi || '';
     colDoiPrefix =
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/repoHome/RepoSampleDetails.js
similarity index 94%
rename from app/packs/src/libHome/RepoSampleDetails.js
rename to app/packs/src/repoHome/RepoSampleDetails.js
index 991a5184b..f9fbe8b4e 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/repoHome/RepoSampleDetails.js
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import {
   ClosePanel,
   MoleculeInfo,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import ReviewActions from '../components/actions/ReviewActions';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoSample from './RepoSample';
+} from 'src/repoHome/RepoCommon';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import RepoReviewButtonBar from 'src/repoHome/RepoReviewButtonBar';
+import RepoSample from 'src/repoHome/RepoSample';
 
 export default class RepoSampleDetails extends Component {
   constructor(props) {
@@ -115,7 +115,7 @@ export default class RepoSampleDetails extends Component {
         showed_name: s.showed_name,
         molecule_iupac: molecule.iupac_name || [],
         molecule_id: molecule.id,
-        analyses: s.analyses || element.analyses || [],
+        container: s.container || element.container || {},
         segments: s.segments || [],
         boiling_point: s.boiling_point || '',
         melting_point: s.melting_point || '',
diff --git a/app/packs/src/libHome/RepoSegment.js b/app/packs/src/repoHome/RepoSegment.js
similarity index 94%
rename from app/packs/src/libHome/RepoSegment.js
rename to app/packs/src/repoHome/RepoSegment.js
index 6842f7aec..ce5650e86 100644
--- a/app/packs/src/libHome/RepoSegment.js
+++ b/app/packs/src/repoHome/RepoSegment.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { LayerPlain } from 'chem-generic-ui-viewer';
-import { ToggleIndicator } from './RepoCommon';
+import { ToggleIndicator } from 'src/repoHome/RepoCommon';
 
 const listSegment = (props) => {
   const [toggle, setToggle] = useState(true);
diff --git a/app/packs/src/stores/alt/actions/SpectraActions.js b/app/packs/src/stores/alt/actions/SpectraActions.js
index a260266de..6d7aa0265 100644
--- a/app/packs/src/stores/alt/actions/SpectraActions.js
+++ b/app/packs/src/stores/alt/actions/SpectraActions.js
@@ -1,7 +1,5 @@
 import alt from 'src/stores/alt/alt';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
-import base64 from 'base-64';
-import ElementActions from '../actions/ElementActions';
 
 class SpectraActions {
   ToggleModal() {
diff --git a/app/packs/src/stores/alt/actions/UserActions.js b/app/packs/src/stores/alt/actions/UserActions.js
index c501b79a5..d6caae929 100644
--- a/app/packs/src/stores/alt/actions/UserActions.js
+++ b/app/packs/src/stores/alt/actions/UserActions.js
@@ -3,7 +3,6 @@ import UsersFetcher from 'src/fetchers/UsersFetcher';
 import GenericSgsFetcher from 'src/fetchers/GenericSgsFetcher';
 import GenericDSsFetcher from 'src/fetchers/GenericDSsFetcher';
 import Aviator from 'aviator';
-import SegmentsFetcher from '../fetchers/SegmentsFetcher';
 import DocumentHelper from 'src/utilities/DocumentHelper';
 
 class UserActions {
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/stores/alt/repo/actions/EmbargoActions.js
similarity index 94%
rename from app/packs/src/components/actions/EmbargoActions.js
rename to app/packs/src/stores/alt/repo/actions/EmbargoActions.js
index 1d8cfe0c9..a2c5b23b9 100644
--- a/app/packs/src/components/actions/EmbargoActions.js
+++ b/app/packs/src/stores/alt/repo/actions/EmbargoActions.js
@@ -1,5 +1,5 @@
-import alt from '../alt';
-import EmbargoFetcher from '../fetchers/EmbargoFetcher';
+import alt from 'src/stores/alt/alt';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
 
 class EmbargoActions {
 
@@ -126,4 +126,4 @@ class EmbargoActions {
   }
 }
 
-export default alt.createActions(EmbargoActions);
\ No newline at end of file
+export default alt.createActions(EmbargoActions);
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/stores/alt/repo/actions/PublicActions.js
similarity index 93%
rename from app/packs/src/components/actions/PublicActions.js
rename to app/packs/src/stores/alt/repo/actions/PublicActions.js
index 62d764698..a0a295dda 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/stores/alt/repo/actions/PublicActions.js
@@ -1,10 +1,10 @@
-import alt from '../alt';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import NotificationActions from './NotificationActions';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import EmbargoFetcher from '../fetchers/EmbargoFetcher';
-import SearchFetcher from '../fetchers/SearchFetcher';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+import alt from 'src/stores/alt/alt';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
+import EmbargoFetcher from 'src/repo/fetchers/EmbargoFetcher';
+import SearchFetcher from 'src/fetchers/SearchFetcher';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
 
 class PublicActions {
   initialize() {
@@ -321,6 +321,14 @@ class PublicActions {
         }).catch((errorMessage) => { console.log(errorMessage); });
     };
   }
+
+  publicSearch(params) {
+    return params;
+  }
+
+  setSearchParams(params) {
+    return params;
+  }
 }
 
 export default alt.createActions(PublicActions)
diff --git a/app/packs/src/components/actions/RepositoryActions.js b/app/packs/src/stores/alt/repo/actions/RepositoryActions.js
similarity index 91%
rename from app/packs/src/components/actions/RepositoryActions.js
rename to app/packs/src/stores/alt/repo/actions/RepositoryActions.js
index 80dd4d530..ccdef7edc 100644
--- a/app/packs/src/components/actions/RepositoryActions.js
+++ b/app/packs/src/stores/alt/repo/actions/RepositoryActions.js
@@ -1,7 +1,6 @@
-import alt from '../alt';
-
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
+/* eslint-disable class-methods-use-this */
+import alt from 'src/stores/alt/alt';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
 
 class RepositoryActions {
   publishSample(params, closeView = false) {
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/stores/alt/repo/actions/ReviewActions.js
similarity index 93%
rename from app/packs/src/components/actions/ReviewActions.js
rename to app/packs/src/stores/alt/repo/actions/ReviewActions.js
index 694590191..693411103 100644
--- a/app/packs/src/components/actions/ReviewActions.js
+++ b/app/packs/src/stores/alt/repo/actions/ReviewActions.js
@@ -1,6 +1,5 @@
-import alt from '../alt';
-import ReviewFetcher from '../fetchers/ReviewFetcher';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import alt from 'src/stores/alt/alt';
+import RepositoryFetcher from 'src/repo/fetchers/RepositoryFetcher';
 
 class ReviewActions {
   handleReviewModal(show, action) {
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/stores/alt/repo/stores/EmbargoStore.js
similarity index 94%
rename from app/packs/src/components/stores/EmbargoStore.js
rename to app/packs/src/stores/alt/repo/stores/EmbargoStore.js
index 3a9c3490e..67cf041b8 100644
--- a/app/packs/src/components/stores/EmbargoStore.js
+++ b/app/packs/src/stores/alt/repo/stores/EmbargoStore.js
@@ -1,7 +1,7 @@
 import Aviator from 'aviator';
-import alt from '../alt';
-import EmbargoActions from '../actions/EmbargoActions';
-import PublicActions from '../actions/PublicActions';
+import alt from 'src/stores/alt/alt';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 
 class EmbargoStore {
   constructor() {
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/stores/alt/repo/stores/PublicStore.js
similarity index 88%
rename from app/packs/src/components/stores/PublicStore.js
rename to app/packs/src/stores/alt/repo/stores/PublicStore.js
index b68728aa0..21092fffe 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/stores/alt/repo/stores/PublicStore.js
@@ -1,8 +1,8 @@
 import Aviator from 'aviator';
-import alt from '../alt';
-import PublicActions from '../actions/PublicActions';
-import UIActions from '../actions/UIActions';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+import alt from 'src/stores/alt/alt';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import RepoNavListTypes from 'src/repoHome/RepoNavListTypes';
 
 class PublicStore {
   constructor() {
@@ -55,7 +55,8 @@ class PublicStore {
       handleGetElements: PublicActions.getElements,
       handleRefreshPubElements: PublicActions.refreshPubElements,
       handleDisplayCollection: PublicActions.displayCollection,
-
+      handlePublicSearch: PublicActions.publicSearch,
+      handleSetSearchParams: PublicActions.setSearchParams,
     });
   }
 
@@ -130,6 +131,23 @@ class PublicStore {
     });
   }
 
+  handlePublicSearch(results) {
+    this.setState({
+      guestPage: 'publications',
+      listType: results.listType || 'reaction',
+      currentElement: null,
+      elementType: null,
+      searchOptions: results.searchOptions,
+      advType: results.advType || 'Authors',
+      advFlag: results.advFlag || true,
+      advValue: results.advValue || [],
+      defaultSearchValue: results.defaultSearchValue || '',
+      isSearch: results.isSearch || false,
+      selection: results.selection || {},
+    });
+    Aviator.navigate('/publications', { silent: true });
+  }
+
   handlePublishedStatics(publishedStatics) {
     if (publishedStatics) {
       this.setState({ publishedStatics });
@@ -279,6 +297,10 @@ class PublicStore {
       elements, page, perPage, pages, selectType, selectState, searchType, searchValue
     });
   }
+
+  handleSetSearchParams(params) {
+    this.setState(params);
+  }
 }
 
 export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/packs/src/components/stores/RStore.js b/app/packs/src/stores/alt/repo/stores/RStore.js
similarity index 83%
rename from app/packs/src/components/stores/RStore.js
rename to app/packs/src/stores/alt/repo/stores/RStore.js
index 976eedd00..a07996506 100644
--- a/app/packs/src/components/stores/RStore.js
+++ b/app/packs/src/stores/alt/repo/stores/RStore.js
@@ -1,7 +1,7 @@
 import Aviator from 'aviator';
-import alt from '../alt';
-import ReviewActions from '../actions/ReviewActions';
-import EmbargoActions from '../actions/EmbargoActions';
+import alt from 'src/stores/alt/alt';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
 
 class RStore {
   constructor() {
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/stores/alt/repo/stores/ReviewStore.js
similarity index 89%
rename from app/packs/src/components/stores/ReviewStore.js
rename to app/packs/src/stores/alt/repo/stores/ReviewStore.js
index 9f64566af..6cae15339 100644
--- a/app/packs/src/components/stores/ReviewStore.js
+++ b/app/packs/src/stores/alt/repo/stores/ReviewStore.js
@@ -1,8 +1,8 @@
 import Aviator from 'aviator';
-import alt from '../alt';
-import ReviewActions from '../actions/ReviewActions';
-import PublicActions from '../actions/PublicActions';
-import EmbargoActions from '../actions/EmbargoActions';
+import alt from 'src/stores/alt/alt';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
+import EmbargoActions from 'src/stores/alt/repo/actions/EmbargoActions';
 
 class ReviewStore {
   constructor() {
@@ -117,8 +117,8 @@ class ReviewStore {
 
   handleDisplayReviewReaction(result) {
     const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-    if (result.element && result.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home');
+    if (result.element?.review_info == null || result.element?.review_info?.review_level === 0) {
+      //Aviator.navigate('/home');
     } else {
       this.setState({
         guestPage: 'review',
@@ -136,10 +136,10 @@ class ReviewStore {
   }
 
   handleDisplayReviewSample(result) {
-    const publication = (result.element && result.element.publication) || {};
+    const publication = result?.element?.publication || {};
 
-    if (result.element && result.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home');
+    if (result.element?.review_info == null || result.element?.review_info?.review_level === 0) {
+      //Aviator.navigate('/home');
     } else {
       this.setState({
         guestPage: 'review',
diff --git a/app/packs/src/stores/alt/stores/ElementStore.js b/app/packs/src/stores/alt/stores/ElementStore.js
index 361117c57..13d977210 100644
--- a/app/packs/src/stores/alt/stores/ElementStore.js
+++ b/app/packs/src/stores/alt/stores/ElementStore.js
@@ -40,7 +40,7 @@ import GenericEl from 'src/models/GenericEl';
 
 import MessagesFetcher from 'src/fetchers/MessagesFetcher';
 
-import RepositoryActions from '../actions/RepositoryActions';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
 
 
 const fetchOls = (elementType) => {
diff --git a/app/packs/src/stores/alt/stores/LoadingStore.js b/app/packs/src/stores/alt/stores/LoadingStore.js
index 1a26a6718..b81fcf11d 100644
--- a/app/packs/src/stores/alt/stores/LoadingStore.js
+++ b/app/packs/src/stores/alt/stores/LoadingStore.js
@@ -4,9 +4,9 @@ import ReportActions from 'src/stores/alt/actions/ReportActions';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 import PredictionActions from 'src/stores/alt/actions/PredictionActions';
-import RepositoryActions from '../actions/RepositoryActions';
-import PublicActions from '../actions/PublicActions';
-import ReviewActions from '../actions/ReviewActions';
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+import ReviewActions from 'src/stores/alt/repo/actions/ReviewActions';
 
 class LoadingStore {
   constructor() {
@@ -14,7 +14,7 @@ class LoadingStore {
     this.state = { filePool: [] };
 
     this.bindListeners({
-      handleStart: LoadingActions.start,
+      handleStart: [LoadingActions.start, PublicActions.openRepositoryPage],
       handleStop:
         [
           LoadingActions.stop,
@@ -59,8 +59,11 @@ class LoadingStore {
     });
   }
 
-  handleStart() {
-    this.setState({ loading: true });
+  handleStart(page = '') {
+    const regex = /^$|\bpublications/i;
+    if (!page || regex.test(page)) {
+      this.setState({ loading: true });
+    }
   }
 
   handleStop() {
diff --git a/app/packs/src/stores/alt/stores/ReportStore.js b/app/packs/src/stores/alt/stores/ReportStore.js
index f78b58ac7..e09c64496 100644
--- a/app/packs/src/stores/alt/stores/ReportStore.js
+++ b/app/packs/src/stores/alt/stores/ReportStore.js
@@ -509,10 +509,7 @@ class ReportStore {
         reactionIds: [...tmpRDTags, ...tmpRSTags]
       };
     }
-    dTags = {
-      sampleIds: [...new Set(dTags.sampleIds)],
-      reactionIds: [...new Set(dTags.reactionIds)]
-    };
+    dTags = { sampleIds: Array.from(new Set(dTags.sampleIds)), reactionIds: Array.from(new Set(dTags.reactionIds)) };
     sTags = { sampleIds: [], reactionIds: [] };
     const newObjs = UpdateSelectedObjs(sTags, currentObjs, dTags, currentObjs);
     const finalObjs = this.orderObjsForTemplate(this.template, newObjs);
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
index da185fc59..fd25308b4 100644
--- a/app/packs/src/stores/alt/stores/UIStore.js
+++ b/app/packs/src/stores/alt/stores/UIStore.js
@@ -6,7 +6,7 @@ import ElementActions from 'src/stores/alt/actions/ElementActions';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import ArrayUtils from 'src/utilities/ArrayUtils';
-import PublicActions from '../actions/PublicActions';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 
 class UIStore {
   constructor() {
diff --git a/app/packs/src/utilities/CollectionTabsHelper.js b/app/packs/src/utilities/CollectionTabsHelper.js
index f734b7f0c..6ab577416 100644
--- a/app/packs/src/utilities/CollectionTabsHelper.js
+++ b/app/packs/src/utilities/CollectionTabsHelper.js
@@ -1,4 +1,4 @@
-import { getElementSegments } from './ElementUtils';
+import { getElementSegments } from 'src/utilities/ElementUtils';
 import Immutable from 'immutable';
 
 const getVisibilityList = (layout, availableTabs, addInventoryTab) => {
diff --git a/app/packs/src/utilities/ElementUtils.js b/app/packs/src/utilities/ElementUtils.js
index bd216b585..07f1c72b2 100644
--- a/app/packs/src/utilities/ElementUtils.js
+++ b/app/packs/src/utilities/ElementUtils.js
@@ -5,10 +5,10 @@ import { searchAndReplace } from 'src/utilities/markdownUtils';
 import MatrixCheck from 'src/components/common/MatrixCheck';
 
 import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from '../stores/alt/stores/UserStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
 
-import { contentToText } from './quillFormat';
-import { chmoConversions } from '../OlsComponent';
+import { contentToText } from 'src/utilities/quillFormat';
+import { chmoConversions } from 'src/components/OlsComponent';
 
 
 const rfValueFormat = (input) => {
@@ -556,5 +556,4 @@ export {
   getElementSegments,
   isNmrPass,
   isDatasetPass,
-  getElementSegments,
 };
diff --git a/app/serializers/sample_policy_serializable.rb b/app/serializers/sample_policy_serializable.rb
deleted file mode 100644
index 0d3c6fea4..000000000
--- a/app/serializers/sample_policy_serializable.rb
+++ /dev/null
@@ -1,31 +0,0 @@
-module SamplePolicySerializable
-  extend ActiveSupport::Concern
-
-  included do
-    alias_method :original_initialize, :initialize
-
-    def initialize(element, options={})
-      original_initialize(element)
-      @element = element
-      @policy = options.class == Hash && options[:policy]
-    end
-
-    def can_update
-      @policy && @policy.try(:update?)
-    end
-
-    def can_copy
-      @policy && @policy.try(:copy?)
-    end
-
-    def can_publish
-      cp = @policy && @policy.try(:destroy?)
-      # return false if !%w[Sample Reaction].include?(@element.class.name)      ####
-      # || (@element.class.name == 'Sample' && @element.reactions&.length > 0)  ####
-
-      pub = Publication.find_by(element: @element)
-      return cp if pub.nil? || pub&.state == 'reviewed'
-      false
-    end
-  end
-end
diff --git a/app/serializers/sample_serializer.rb b/app/serializers/sample_serializer.rb
deleted file mode 100644
index 9f96d6777..000000000
--- a/app/serializers/sample_serializer.rb
+++ /dev/null
@@ -1,111 +0,0 @@
-class SampleSerializer < ActiveModel::Serializer
-  attributes *DetailLevels::Sample.new.base_attributes
-
-  has_one :molecule, :serializer => MoleculeListSerializer
-  has_one :container, :serializer => ContainerSerializer
-  has_one :tag
-
-  has_many :residues, serializer: ResidueSerializer
-  has_many :elemental_compositions, serializer: ElementalCompositionSerializer
-  has_many :segments
-
-  def is_repo_public
-    cols = object.tag&.taggable_data['collection_labels']&.select do |c|
-      c['id'] == ENV['PUBLIC_COLL_ID']&.to_i || c['id'] == ENV['SCHEME_ONLY_REACTIONS_COLL_ID']&.to_i
-    end
-    cols.present? && cols.length.positive?
-  end
-
-  def code_log
-    CodeLogSerializer.new(object.code_log).serializable_hash
-  end
-
-  def created_at
-    object.created_at.strftime("%d.%m.%Y, %H:%M")
-  end
-
-  def type
-    'sample'
-  end
-
-  def _contains_residues
-    object.residues.any?
-  end
-
-  def molecule_svg
-    molecule.molecule_svg_file
-  end
-
-  def is_restricted
-    false
-  end
-
-  def children_count
-    unless object.new_record?
-      object.children.count.to_i
-    end
-  end
-
-  def parent_id
-    object.parent.id if object.parent
-  end
-
-  def pubchem_tag
-    unless molecule
-      nil
-    else
-      molecule.tag ? molecule.tag.taggable_data : nil
-    end
-  end
-
-  def can_update
-    false
-  end
-
-  def can_copy
-    false
-  end
-
-  def can_publish
-    false
-  end
-
-  class Level0 < ActiveModel::Serializer
-    include SamplePolicySerializable
-    include SampleLevelSerializable
-    define_restricted_methods_for_level(0)
-
-    def molecule
-      {
-        molecular_weight: object.molecule.try(:molecular_weight),
-        exact_molecular_weight: object.molecule.try(:exact_molecular_weight),
-      }
-    end
-  end
-
-  class Level1 < ActiveModel::Serializer
-    include SamplePolicySerializable
-    include SampleLevelSerializable
-    define_restricted_methods_for_level(1)
-  end
-
-  class Level2 < ActiveModel::Serializer
-    include SamplePolicySerializable
-    include SampleLevelSerializable
-    define_restricted_methods_for_level(2)
-
-    def analyses
-      object.analyses.map {|x| x['datasets'] = {:datasets => []}}
-    end
-  end
-
-  class Level3 < ActiveModel::Serializer
-    include SamplePolicySerializable
-    include SampleLevelSerializable
-    define_restricted_methods_for_level(3)
-  end
-end
-
-class SampleSerializer::Level10 < SampleSerializer
-  include SamplePolicySerializable
-end
diff --git a/app/usecases/reactions/update_materials.rb b/app/usecases/reactions/update_materials.rb
index 7b544d8b1..3507287bb 100644
--- a/app/usecases/reactions/update_materials.rb
+++ b/app/usecases/reactions/update_materials.rb
@@ -126,6 +126,7 @@ def create_new_sample(sample, fixed_label)
         container_info = attributes[:container]
         attributes.delete(:container)
         attributes.delete(:segments)
+        attributes.delete(:is_repo_public)
         new_sample = Sample.new(
           attributes
         )
diff --git a/config/compound_open_data.yml.example b/config/compound_open_data.yml.example
deleted file mode 100644
index 40fe4e345..000000000
--- a/config/compound_open_data.yml.example
+++ /dev/null
@@ -1,5 +0,0 @@
-development:
-  :allowed_uids: [123,456]
-
-production:
-  :allowed_uids: [123,456]
diff --git a/config/initializers/compound_open_data.rb b/config/initializers/compound_open_data.rb
index dddac63d7..6c8d0f994 100644
--- a/config/initializers/compound_open_data.rb
+++ b/config/initializers/compound_open_data.rb
@@ -3,12 +3,14 @@
 if File.exist? Rails.root.join('config', 'compound_open_data.yml')
   compound_opendata = Rails.application.config_for :compound_open_data
 
-  Rails.application.configure do
-    config.compound_opendata = ActiveSupport::OrderedOptions.new
-    config.compound_opendata.allowed_uids = compound_opendata[:allowed_uids]
-    sql = ActiveRecord::Base.send(:sanitize_sql_array, ['select to_regclass(?)::text as table_name', 'compound_open_data'])
-    table_name = ActiveRecord::Base.connection.exec_query(sql).to_a[0]['table_name']
-    CompoundOpenData.table_name = table_name.present? ? table_name : 'compound_open_data_locals'
+  ActiveSupport.on_load(:active_record) do
+    Rails.application.configure do
+      config.compound_opendata = ActiveSupport::OrderedOptions.new
+      config.compound_opendata.allowed_uids = compound_opendata[:allowed_uids]
+      sql = ActiveRecord::Base.send(:sanitize_sql_array, ['select to_regclass(?)::text as table_name', 'compound_open_data'])
+      table_name = ActiveRecord::Base.connection.exec_query(sql).to_a[0]['table_name']
+      CompoundOpenData.table_name = table_name.present? ? table_name : 'compound_open_data_locals'
+    end
   end
 else
   CompoundOpenData.table_name = 'compound_open_data_locals'
diff --git a/config/initializers/molecule_viewer.rb b/config/initializers/molecule_viewer.rb
index 5d271a482..cf25a9beb 100644
--- a/config/initializers/molecule_viewer.rb
+++ b/config/initializers/molecule_viewer.rb
@@ -2,15 +2,15 @@
 
 def fetch_molecule_viewer_config
   molecule_viewer_config = { 'feature' => { 'enabled' => false } }
-  begin
-    if ActiveRecord::Base.connection.table_exists?('matrices')
-      molecule_viewer = Matrice.find_by(name: 'moleculeViewer')
-      molecule_viewer_config = molecule_viewer_config.merge((molecule_viewer&.configs || {}))
-      molecule_viewer_config = molecule_viewer_config.merge({ 'feature' => { 'enabled' => (molecule_viewer&.enabled || false) }})
-    end
-  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
-    Rails.logger.error("Error fetching molecule viewer config: #{e.message}")
-  end
+#  begin
+#    if ActiveRecord::Base.connection.table_exists?('matrices')
+#      molecule_viewer = Matrice.find_by(name: 'moleculeViewer')
+#      molecule_viewer_config = molecule_viewer_config.merge((molecule_viewer&.configs || {}))
+#      molecule_viewer_config = molecule_viewer_config.merge({ 'feature' => { 'enabled' => (molecule_viewer&.enabled || false) }})
+#    end
+#  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
+#    Rails.logger.error("Error fetching molecule viewer config: #{e.message}")
+#  end
   ActiveSupport::OrderedOptions.new.tap do |config|
     config.chembox_client_id = molecule_viewer_config['chembox_client_id']
     config.chembox_endpoint = molecule_viewer_config['chembox_endpoint']
@@ -20,6 +20,8 @@ def fetch_molecule_viewer_config
   end
 end
 
-Rails.application.configure do
-  config.molecule_viewer_config = fetch_molecule_viewer_config
+ActiveSupport.on_load(:active_record) do
+  Rails.application.configure do
+    config.molecule_viewer_config = fetch_molecule_viewer_config
+  end
 end
diff --git a/db/migrate/20180910125250_migrate_dois.rb b/db/migrate/20180910125250_migrate_dois.rb
index 49eaba886..aeece702a 100644
--- a/db/migrate/20180910125250_migrate_dois.rb
+++ b/db/migrate/20180910125250_migrate_dois.rb
@@ -4,63 +4,68 @@ def change
     file = File.open("log/doi_seeding.log", "w")
     file.write('==================')
     file.write(Time.now)
-    Collection.public_collection.samples.order(id: :asc).each do |s|
-      message = "sample(#{s.id}) "
-      t = s.tag.taggable_data['publication']
-      unless t
-        ActiveRecord::Base.logger.error(message + 'no publication tag')
-        file.write(message + 'no publication tag' + "\n")
-        next
-      end
 
-      td = t['doi']
-      sd = Doi.send(:split_doi, td)
-      if (ed = Doi.find_by(suffix: sd[:suffix]))
-        el = ed.doiable
-        if el && el != s
-          message_2 = message + "doi(#{sd[:suffix]}) attributed to another element #{el.class.name} #{el.id}"
-          ActiveRecord::Base.logger.error message_2
-          file.write message_2 + "\n"
-        else
-          ed.update(doiable: s)
-        end
-      else
-        Doi.create(suffix: sd[:suffix], doiable: s)
-      end
-    end
-
-    Collection.public_collection.samples.find_each do |s|
-      mess = "sample(#{s.id}) "
-      s.analyses.each do |a|
-        message = mess + "analysis(#{a.id}) "
-        t = a.tag && a.tag.taggable_data && a.tag.taggable_data['publication']
+    # checks if the database is set up, otherwise Collection.public_collection will crash
+    unless User.chemotion_user.nil?
+      Collection.public_collection.samples.order(id: :asc).each do |s|
+        message = "sample(#{s.id}) "
+        t = s.tag.taggable_data['publication']
         unless t
           ActiveRecord::Base.logger.error(message + 'no publication tag')
-          file.write message + 'no publication tag' + "\n"
-          next
-        end
-        td = t['analysis_doi']
-        unless td
-          ActiveRecord::Base.logger.error(message + 'no analysis doi')
-          file.write message + 'no analysis doi' + "\n"
+          file.write(message + 'no publication tag' + "\n")
           next
         end
+
+        td = t['doi']
         sd = Doi.send(:split_doi, td)
         if (ed = Doi.find_by(suffix: sd[:suffix]))
           el = ed.doiable
-          if el && el != a
-            re = el.root_element
-            message2 = message + "doi(#{sd[:suffix]}) attributed to another element #{re.class.name}(#{re.id}) #{el.class.name}(#{el.id})"
-            ActiveRecord::Base.logger.error message2
-            file.write message2 + "\n"
+          if el && el != s
+            message_2 = message + "doi(#{sd[:suffix]}) attributed to another element #{el.class.name} #{el.id}"
+            ActiveRecord::Base.logger.error message_2
+            file.write message_2 + "\n"
           else
-            ed.update(doiable: a)
+            ed.update(doiable: s)
           end
         else
-          Doi.create(suffix: sd[:suffix], doiable: a)
+          Doi.create(suffix: sd[:suffix], doiable: s)
+        end
+      end
+
+      Collection.public_collection.samples.find_each do |s|
+        mess = "sample(#{s.id}) "
+        s.analyses.each do |a|
+          message = mess + "analysis(#{a.id}) "
+          t = a.tag && a.tag.taggable_data && a.tag.taggable_data['publication']
+          unless t
+            ActiveRecord::Base.logger.error(message + 'no publication tag')
+            file.write message + 'no publication tag' + "\n"
+            next
+          end
+          td = t['analysis_doi']
+          unless td
+            ActiveRecord::Base.logger.error(message + 'no analysis doi')
+            file.write message + 'no analysis doi' + "\n"
+            next
+          end
+          sd = Doi.send(:split_doi, td)
+          if (ed = Doi.find_by(suffix: sd[:suffix]))
+            el = ed.doiable
+            if el && el != a
+              re = el.root_element
+              message2 = message + "doi(#{sd[:suffix]}) attributed to another element #{re.class.name}(#{re.id}) #{el.class.name}(#{el.id})"
+              ActiveRecord::Base.logger.error message2
+              file.write message2 + "\n"
+            else
+              ed.update(doiable: a)
+            end
+          else
+            Doi.create(suffix: sd[:suffix], doiable: a)
+          end
         end
       end
     end
+
     ensure
       file.close unless file.nil?
     end
diff --git a/db/migrate/20181218084857_change_function_pub_reactions_by_molecule.rb b/db/migrate/20181218084857_change_function_pub_reactions_by_molecule.rb
index 26dc462a9..713282b07 100644
--- a/db/migrate/20181218084857_change_function_pub_reactions_by_molecule.rb
+++ b/db/migrate/20181218084857_change_function_pub_reactions_by_molecule.rb
@@ -1,4 +1,4 @@
-class ChangeFunctionPubReactionsByMolecule < ActiveRecord::Migration
+class ChangeFunctionPubReactionsByMolecule < ActiveRecord::Migration[4.2]
   def change
     create_function :pub_reactions_by_molecule
   end
diff --git a/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb b/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
index 8edc29e52..172ec830a 100644
--- a/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
+++ b/db/migrate/20181221153800_sync_collection_reaction_detail_level_10.rb
@@ -1,5 +1,7 @@
 class SyncCollectionReactionDetailLevel10 < ActiveRecord::Migration[4.2]
   def change
-    SyncCollectionsUser.where(shared_by_id: User.chemotion_user.id).each{|s| s.update(reaction_detail_level: 10) }
+    unless User.chemotion_user.nil?
+      SyncCollectionsUser.where(shared_by_id: User.chemotion_user.id).each{|s| s.update(reaction_detail_level: 10) }
+    end
   end
 end
diff --git a/db/migrate/20190103165000_datafix_publication_reactions.rb b/db/migrate/20190103165000_datafix_publication_reactions.rb
index ea0b87c13..880fa9cce 100644
--- a/db/migrate/20190103165000_datafix_publication_reactions.rb
+++ b/db/migrate/20190103165000_datafix_publication_reactions.rb
@@ -1,8 +1,10 @@
 class DatafixPublicationReactions < ActiveRecord::Migration[4.2]
   def change
-    Collection.public_collection.reactions.each do |r|
-      r.reload
-      r.save!
+    unless User.chemotion_user.nil?
+      Collection.public_collection.reactions.each do |r|
+        r.reload
+        r.save!
+      end
     end
   end
 end
diff --git a/db/migrate/20190306085000_create_default_element_to_review_collections.rb b/db/migrate/20190306085000_create_default_element_to_review_collections.rb
index 43aeaa0a2..9021ce902 100644
--- a/db/migrate/20190306085000_create_default_element_to_review_collections.rb
+++ b/db/migrate/20190306085000_create_default_element_to_review_collections.rb
@@ -2,7 +2,9 @@ class CreateDefaultElementToReviewCollections < ActiveRecord::Migration[4.2]
  def change
    # Update the Reviewing Ancestry to is_locked = true
    reviewing_ancestry_col = Collection.find_by(id: 1198, label: 'Reviewing Publication from')
-   reviewing_ancestry_col.update_columns(is_locked: true)
+   unless reviewing_ancestry_col.nil?
+    reviewing_ancestry_col.update_columns(is_locked: true)
+  end
 
 
    chemotion_user = User.chemotion_user
diff --git a/db/migrate/20200203000001_create_public_scheme_only_collection.rb b/db/migrate/20200203000001_create_public_scheme_only_collection.rb
index 42dfcc882..5a909b7d3 100644
--- a/db/migrate/20200203000001_create_public_scheme_only_collection.rb
+++ b/db/migrate/20200203000001_create_public_scheme_only_collection.rb
@@ -1,19 +1,20 @@
 class CreatePublicSchemeOnlyCollection < ActiveRecord::Migration[4.2]
   def change
     chemotion_user = User.chemotion_user
-    public_scheme_reaction = Collection.scheme_only_reactions_collection || Collection.create(user: chemotion_user, label: 'Scheme-only reactions', is_shared: false, is_locked: false, is_synchronized: true)
+    unless chemotion_user.nil?
+      public_scheme_reaction = Collection.scheme_only_reactions_collection || Collection.create(user: chemotion_user, label: 'Scheme-only reactions', is_shared: false, is_locked: false, is_synchronized: true)
+      users = User.where(type: 'Person')
+      users.each do |u|
+        root_collection_attributes = {
+          user: u,
+          shared_by_id: chemotion_user.id,
+          is_locked: true,
+          is_shared: true
+        }
 
-    users = User.where(type: 'Person')
-    users.each do |u|
-      root_collection_attributes = {
-        user: u,
-        shared_by_id: chemotion_user.id,
-        is_locked: true,
-        is_shared: true
-      }
-
-      rc = Collection.find_by(root_collection_attributes)
-      SyncCollectionsUser.find_or_create_by(user: u, shared_by_id: chemotion_user.id, collection_id: public_scheme_reaction.id, permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
+        rc = Collection.find_by(root_collection_attributes)
+        SyncCollectionsUser.find_or_create_by(user: u, shared_by_id: chemotion_user.id, collection_id: public_scheme_reaction.id, permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
+      end
     end
   end
 end
diff --git a/db/migrate/20210621145002_generic_datasets_revision.rb b/db/migrate/20210621145002_generic_datasets_revision.rb
index f8bc34667..38a934373 100644
--- a/db/migrate/20210621145002_generic_datasets_revision.rb
+++ b/db/migrate/20210621145002_generic_datasets_revision.rb
@@ -2,7 +2,7 @@
 
 # Create generic dataset revision
 class GenericDatasetsRevision < ActiveRecord::Migration[4.2]
-  class Labimotion::DatasetKlass < ActiveRecord::Base
+  class DatasetKlass < ActiveRecord::Base
   end
   def self.up
     add_column :dataset_klasses, :uuid, :string, null: true unless column_exists? :dataset_klasses, :uuid
diff --git a/db/migrate/20220330103001_build_embargo_doi.rb b/db/migrate/20220330103001_build_embargo_doi.rb
index 6a3123656..de5c69906 100644
--- a/db/migrate/20220330103001_build_embargo_doi.rb
+++ b/db/migrate/20220330103001_build_embargo_doi.rb
@@ -3,19 +3,21 @@
 # Create generic elements
 class BuildEmbargoDoi < ActiveRecord::Migration[5.2]
   def change
-    su_id = User.chemotion_user.id
-    acols = Collection.joins("INNER JOIN collections acol ON acol.id = collections.ancestry::int").where("acol.label = 'Embargoed Publications'")
-    acols.each do |col|
-      if Publication.where("taggable_data->>'label' = '" + col.label + "'").length == 0
-        d = Doi.create_for_element!(col)
-        Publication.create!(
-          state: Publication::STATE_PENDING,
-          element: col,
-          created_at: col.created_at,
-          published_by: col.sync_collections_users&.first&.user_id || 0,
-          doi: d,
-          taggable_data: { label: col.label, col_doi: d.full_doi }
-        )
+    unless User.chemotion_user.nil?
+      su_id = User.chemotion_user.id
+      acols = Collection.joins("INNER JOIN collections acol ON acol.id = collections.ancestry::int").where("acol.label = 'Embargoed Publications'")
+      acols.each do |col|
+        if Publication.where("taggable_data->>'label' = '" + col.label + "'").length == 0
+          d = Doi.create_for_element!(col)
+          Publication.create!(
+            state: Publication::STATE_PENDING,
+            element: col,
+            created_at: col.created_at,
+            published_by: col.sync_collections_users&.first&.user_id || 0,
+            doi: d,
+            taggable_data: { label: col.label, col_doi: d.full_doi }
+          )
+        end
       end
     end
   end
diff --git a/db/migrate/20220712100010_add_segment_klass_identifier.rb b/db/migrate/20220712100010_add_segment_klass_identifier.rb
deleted file mode 100644
index 292d06b0e..000000000
--- a/db/migrate/20220712100010_add_segment_klass_identifier.rb
+++ /dev/null
@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-# Add column identifier into segment_klasses
-class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
-  def self.up
-    execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
-    add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
-    add_column :segment_klasses, :sync_time, :datetime unless column_exists? :segment_klasses, :sync_time
-    add_column :dataset_klasses, :identifier, :string unless column_exists? :dataset_klasses, :identifier
-    add_column :dataset_klasses, :sync_time, :datetime unless column_exists? :dataset_klasses, :sync_time
-    add_column :element_klasses, :identifier, :string unless column_exists? :element_klasses, :identifier
-    add_column :element_klasses, :sync_time, :datetime unless column_exists? :element_klasses, :sync_time
-  end
-
-  def self.down
-    remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
-    remove_column :segment_klasses, :sync_time if column_exists? :segment_klasses, :sync_time
-    remove_column :dataset_klasses, :identifier if column_exists? :dataset_klasses, :identifier
-    remove_column :dataset_klasses, :sync_time if column_exists? :dataset_klasses, :sync_time
-    remove_column :element_klasses, :identifier if column_exists? :element_klasses, :identifier
-    remove_column :element_klasses, :sync_time if column_exists? :element_klasses, :sync_time
-  end
-end
diff --git a/db/migrate/20230404112233_orcid_migration.rb b/db/migrate/20230404112233_orcid_migration.rb
index 3ecbe1a8f..c83e3763d 100644
--- a/db/migrate/20230404112233_orcid_migration.rb
+++ b/db/migrate/20230404112233_orcid_migration.rb
@@ -1,9 +1,9 @@
 class OrcidMigration < ActiveRecord::Migration[5.2]
   def change
     User.all.find_each(batch_size: 50) do |user|
-      profile = user.profile
-      data = profile.data
-      providers = user.providers || {}
+      profile = user&.profile
+      data = profile&.data
+      providers = user&.providers || {}
 
       if data && data['ORCID'].present?
         providers['orcid'] = data['ORCID']
@@ -12,4 +12,4 @@ def change
       end
     end
   end
-end
\ No newline at end of file
+end
diff --git a/db/migrate/20230727222288_accepted_ancestry.rb b/db/migrate/20230727222288_accepted_ancestry.rb
index 651a55883..f008d09d5 100644
--- a/db/migrate/20230727222288_accepted_ancestry.rb
+++ b/db/migrate/20230727222288_accepted_ancestry.rb
@@ -1,25 +1,26 @@
 class AcceptedAncestry < ActiveRecord::Migration[5.2]
   def change
-    chemotion_user = User.chemotion_user
-    reviewer_ids = User.reviewer_ids
-    sys_accept_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted from', is_locked: true, is_shared: false)
+    unless User.chemotion_user.nil?
+      chemotion_user = User.chemotion_user
+      reviewer_ids = User.reviewer_ids
+      sys_accept_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted from', is_locked: true, is_shared: false)
 
-    embargo_accepted_collection = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted', is_synchronized: true)
-    embargo_accepted_collection.update!(ancestry: "#{sys_accept_from.id}")
+      embargo_accepted_collection = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Embargo Accepted', is_synchronized: true)
+      embargo_accepted_collection.update!(ancestry: "#{sys_accept_from.id}")
 
-    reviewer_ids.each do |rid|
-      u = User.find(rid)
-      col_attributes = {
-        user: u,
-        shared_by_id: chemotion_user.id,
-        is_locked: true,
-        is_shared: true
-      }
-
-      rc = Collection.find_or_create_by(col_attributes)
-      sync = SyncCollectionsUser.find_or_create_by(user: u, shared_by_id: chemotion_user.id, collection_id: embargo_accepted_collection.id)
-      sync.update!(fake_ancestry: rc.id.to_s)
+      reviewer_ids.each do |rid|
+        u = User.find(rid)
+        col_attributes = {
+          user: u,
+          shared_by_id: chemotion_user.id,
+          is_locked: true,
+          is_shared: true
+        }
 
+        rc = Collection.find_or_create_by(col_attributes)
+        sync = SyncCollectionsUser.find_or_create_by(user: u, shared_by_id: chemotion_user.id, collection_id: embargo_accepted_collection.id)
+        sync.update!(fake_ancestry: rc.id.to_s)
+      end
     end
   end
 end
diff --git a/db/schema.rb b/db/schema.rb
index e0b47a1b4..eb60dca4f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,13 +10,14 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2023_08_10_100000) do
+ActiveRecord::Schema.define(version: 2023_08_29_100000) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "hstore"
   enable_extension "pg_trgm"
   enable_extension "pgcrypto"
   enable_extension "plpgsql"
+  enable_extension "postgres_fdw"
   enable_extension "uuid-ossp"
 
   create_table "affiliations", id: :serial, force: :cascade do |t|
@@ -70,8 +71,8 @@
     t.string "attachable_type"
     t.string "aasm_state"
     t.bigint "filesize"
-    t.jsonb "attachment_data"
     t.integer "con_state"
+    t.jsonb "attachment_data"
     t.index ["attachable_type", "attachable_id"], name: "index_attachments_on_attachable_type_and_attachable_id"
     t.index ["identifier"], name: "index_attachments_on_identifier", unique: true
   end
@@ -80,8 +81,8 @@
     t.string "token", null: false
     t.integer "user_id"
     t.inet "ip"
-    t.string "fqdn"
     t.string "role"
+    t.string "fqdn"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.index ["user_id"], name: "index_authentication_keys_on_user_id"
@@ -126,6 +127,98 @@
     t.jsonb "chemical_data"
   end
 
+  create_table "chemscanner_molecules", id: :serial, force: :cascade do |t|
+    t.integer "scheme_id", null: false
+    t.integer "external_id"
+    t.integer "clone_from"
+    t.string "mdl"
+    t.string "cano_smiles"
+    t.string "label"
+    t.string "abbreviation"
+    t.string "description"
+    t.jsonb "aliases", default: {}
+    t.jsonb "details", default: {}
+    t.jsonb "extended_metadata", default: {}
+    t.boolean "is_approved", default: false
+    t.integer "imported_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "deleted_at"
+    t.string "inchistring"
+    t.string "inchikey"
+  end
+
+  create_table "chemscanner_reaction_steps", id: :serial, force: :cascade do |t|
+    t.integer "reaction_id", null: false
+    t.integer "reaction_external_id", null: false
+    t.integer "reagent_ids", default: [], array: true
+    t.string "reagent_smiles", default: [], array: true
+    t.integer "step_number", null: false
+    t.string "description"
+    t.string "temperature"
+    t.string "time"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "deleted_at"
+  end
+
+  create_table "chemscanner_reactions", id: :serial, force: :cascade do |t|
+    t.integer "scheme_id", null: false
+    t.integer "external_id", null: false
+    t.integer "clone_from"
+    t.string "description"
+    t.string "temperature"
+    t.string "time"
+    t.string "status"
+    t.float "yield"
+    t.jsonb "details", default: {}
+    t.jsonb "extended_metadata", default: {}
+    t.boolean "is_approved", default: false
+    t.integer "imported_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "deleted_at"
+  end
+
+  create_table "chemscanner_reactions_molecules", id: :serial, force: :cascade do |t|
+    t.integer "reaction_id", null: false
+    t.integer "molecule_id", null: false
+    t.string "type", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "deleted_at"
+  end
+
+  create_table "chemscanner_schemes", id: :serial, force: :cascade do |t|
+    t.integer "source_id", null: false
+    t.boolean "is_approved", default: false
+    t.jsonb "extended_metadata", default: {}
+    t.integer "index", default: 0
+    t.string "image_data", default: ""
+    t.string "version", default: ""
+    t.integer "created_by", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.datetime "deleted_at"
+  end
+
+  create_table "chemscanner_source_hierarchies", id: false, force: :cascade do |t|
+    t.integer "ancestor_id", null: false
+    t.integer "descendant_id", null: false
+    t.integer "generations", null: false
+    t.index ["ancestor_id", "descendant_id", "generations"], name: "chemscanner_source_anc_desc_idx", unique: true
+    t.index ["descendant_id"], name: "chemscanner_source_desc_idx"
+  end
+
+  create_table "chemscanner_sources", id: :serial, force: :cascade do |t|
+    t.integer "parent_id"
+    t.integer "file_id", null: false
+    t.jsonb "extended_metadata", default: {}
+    t.integer "created_by", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
   create_table "code_logs", id: :uuid, default: -> { "uuid_generate_v4()" }, force: :cascade do |t|
     t.string "source"
     t.integer "source_id"
@@ -164,8 +257,8 @@
   create_table "collections_elements", id: :serial, force: :cascade do |t|
     t.integer "collection_id"
     t.integer "element_id"
-    t.datetime "deleted_at"
     t.string "element_type"
+    t.datetime "deleted_at"
     t.index ["collection_id"], name: "index_collections_elements_on_collection_id"
     t.index ["deleted_at"], name: "index_collections_elements_on_deleted_at"
     t.index ["element_id", "collection_id"], name: "index_collections_elements_on_element_id_and_collection_id", unique: true
@@ -298,6 +391,7 @@
     t.datetime "released_at"
     t.string "identifier"
     t.datetime "sync_time"
+    t.jsonb "metadata", default: {}
     t.integer "updated_by"
     t.integer "released_by"
     t.integer "sync_by"
@@ -390,25 +484,45 @@
     t.index ["device_id"], name: "index_device_metadata_on_device_id"
   end
 
+  create_table "dois", id: :serial, force: :cascade do |t|
+    t.integer "molecule_id"
+    t.string "inchikey"
+    t.integer "molecule_count"
+    t.integer "analysis_id"
+    t.string "analysis_type"
+    t.integer "analysis_count"
+    t.jsonb "metadata", default: {}
+    t.boolean "minted", default: false
+    t.datetime "minted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.integer "doiable_id"
+    t.string "doiable_type"
+    t.string "suffix"
+    t.index ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true
+    t.index ["suffix"], name: "index_dois_on_suffix", unique: true
+  end
+
   create_table "element_klasses", id: :serial, force: :cascade do |t|
     t.string "name"
     t.string "label"
     t.string "desc"
     t.string "icon_name"
+    t.boolean "is_active", default: true, null: false
+    t.string "klass_prefix", default: "E", null: false
+    t.boolean "is_generic", default: true, null: false
+    t.integer "place", default: 100, null: false
     t.jsonb "properties_template"
     t.integer "created_by"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.datetime "deleted_at"
-    t.boolean "is_active", default: true, null: false
-    t.string "klass_prefix", default: "E", null: false
-    t.boolean "is_generic", default: true, null: false
-    t.integer "place", default: 100, null: false
     t.string "uuid"
     t.jsonb "properties_release", default: {}
     t.datetime "released_at"
     t.string "identifier"
     t.datetime "sync_time"
+    t.jsonb "metadata", default: {}
     t.integer "updated_by"
     t.integer "released_by"
     t.integer "sync_by"
@@ -453,12 +567,12 @@
   create_table "elements", id: :serial, force: :cascade do |t|
     t.string "name"
     t.integer "element_klass_id"
+    t.string "short_label"
     t.jsonb "properties"
     t.integer "created_by"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.datetime "deleted_at"
-    t.string "short_label"
     t.string "uuid"
     t.string "klass_uuid"
     t.jsonb "properties_release"
@@ -836,6 +950,30 @@
     t.index ["user_id"], name: "index_profiles_on_user_id"
   end
 
+  create_table "publications", id: :serial, force: :cascade do |t|
+    t.string "state"
+    t.jsonb "metadata", default: {}
+    t.jsonb "taggable_data", default: {}
+    t.jsonb "dois", default: {}
+    t.string "element_type"
+    t.integer "element_id"
+    t.integer "doi_id"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+    t.datetime "deleted_at"
+    t.string "original_element_type"
+    t.integer "original_element_id"
+    t.string "ancestry"
+    t.text "metadata_xml"
+    t.integer "published_by"
+    t.datetime "published_at"
+    t.jsonb "review"
+    t.datetime "accepted_at"
+    t.text "oai_metadata_xml"
+    t.index ["ancestry"], name: "index_publications_on_ancestry"
+    t.index ["element_type", "element_id", "deleted_at"], name: "publications_element_idx"
+  end
+
   create_table "reactions", id: :serial, force: :cascade do |t|
     t.string "name"
     t.datetime "created_at", null: false
@@ -883,6 +1021,7 @@
     t.datetime "deleted_at"
     t.boolean "waste", default: false
     t.float "coefficient", default: 1.0
+    t.float "scheme_yield"
     t.boolean "show_label", default: false, null: false
     t.index ["reaction_id"], name: "index_reactions_samples_on_reaction_id"
     t.index ["sample_id"], name: "index_reactions_samples_on_sample_id"
@@ -989,8 +1128,8 @@
   end
 
   create_table "research_plans_screens", force: :cascade do |t|
-    t.integer "screen_id"
-    t.integer "research_plan_id"
+    t.bigint "screen_id", null: false
+    t.bigint "research_plan_id", null: false
     t.datetime "created_at"
     t.datetime "updated_at"
     t.datetime "deleted_at"
@@ -999,8 +1138,8 @@
   end
 
   create_table "research_plans_wellplates", force: :cascade do |t|
-    t.integer "research_plan_id"
-    t.integer "wellplate_id"
+    t.bigint "research_plan_id", null: false
+    t.bigint "wellplate_id", null: false
     t.datetime "created_at"
     t.datetime "updated_at"
     t.datetime "deleted_at"
@@ -1040,7 +1179,6 @@
     t.integer "molecule_id"
     t.binary "molfile"
     t.float "purity", default: 1.0
-    t.string "deprecated_solvent", default: ""
     t.string "impurities", default: ""
     t.string "location", default: ""
     t.boolean "is_top_secret", default: false
@@ -1065,7 +1203,6 @@
     t.integer "molecule_name_id"
     t.string "molfile_version", limit: 20
     t.jsonb "stereo"
-    t.string "mol_rdkit"
     t.string "metrics", default: "mmm"
     t.boolean "decoupled", default: false, null: false
     t.float "molecular_mass"
@@ -1140,6 +1277,7 @@
     t.datetime "released_at"
     t.string "identifier"
     t.datetime "sync_time"
+    t.jsonb "metadata", default: {}
     t.integer "updated_by"
     t.integer "released_by"
     t.integer "sync_by"
@@ -1301,6 +1439,11 @@
     t.index ["user_id"], name: "index_users_admins_on_user_id"
   end
 
+  create_table "users_collaborators", id: :serial, force: :cascade do |t|
+    t.integer "user_id"
+    t.integer "collaborator_id"
+  end
+
   create_table "users_devices", id: :serial, force: :cascade do |t|
     t.integer "user_id"
     t.integer "device_id"
@@ -1342,6 +1485,7 @@
     t.index ["wellplate_id"], name: "index_wells_on_wellplate_id"
   end
 
+  add_foreign_key "dois", "molecules"
   add_foreign_key "literals", "literatures"
   add_foreign_key "report_templates", "attachments"
   add_foreign_key "sample_tasks", "samples"
@@ -1351,48 +1495,64 @@
        RETURNS json
        LANGUAGE sql
       AS $function$
-           select array_to_json(array_agg(row_to_json(result))) from (
-           SELECT sync_collections_users.id, users.type,users.first_name || chr(32) || users.last_name as name,sync_collections_users.permission_level,
-           sync_collections_users.reaction_detail_level,sync_collections_users.sample_detail_level,sync_collections_users.screen_detail_level,sync_collections_users.wellplate_detail_level
-           FROM sync_collections_users
-           INNER JOIN users ON users.id = sync_collections_users.user_id AND users.deleted_at IS NULL
-           WHERE sync_collections_users.shared_by_id = $1 and sync_collections_users.collection_id = $2
-           group by  sync_collections_users.id,users.type,users.name_abbreviation,users.first_name,users.last_name,sync_collections_users.permission_level
-           ) as result
-           $function$
+       select array_to_json(array_agg(row_to_json(result))) from (
+       SELECT sync_collections_users.id, users.type,users.first_name || chr(32) || users.last_name as name,sync_collections_users.permission_level,
+       sync_collections_users.reaction_detail_level,sync_collections_users.sample_detail_level,sync_collections_users.screen_detail_level,sync_collections_users.wellplate_detail_level
+       FROM sync_collections_users
+       INNER JOIN users ON users.id = sync_collections_users.user_id AND users.deleted_at IS NULL
+       WHERE sync_collections_users.shared_by_id = $1 and sync_collections_users.collection_id = $2
+       group by  sync_collections_users.id,users.type,users.name_abbreviation,users.first_name,users.last_name,sync_collections_users.permission_level
+       ) as result
+       $function$
+  SQL
+  create_function :com_xvial, sql_definition: <<-'SQL'
+      CREATE OR REPLACE FUNCTION public.com_xvial(p_allow boolean DEFAULT false)
+       RETURNS SETOF compound_open_data_locals
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	if p_allow IS false then
+      		return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+      	elsif EXISTS(select * from to_regclass('compound_open_data') where to_regclass is not null) then
+      	   RETURN QUERY SELECT compound_open_data.* FROM compound_open_data;
+      	else
+      	   return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+          end if;
+      END
+      $function$
   SQL
   create_function :detail_level_for_sample, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.detail_level_for_sample(in_user_id integer, in_sample_id integer)
        RETURNS TABLE(detail_level_sample integer, detail_level_wellplate integer)
        LANGUAGE plpgsql
       AS $function$
-          declare
-          	i_detail_level_wellplate integer default 0;
-          	i_detail_level_sample integer default 0;
-          begin
-          	select max(all_cols.sample_detail_level), max(all_cols.wellplate_detail_level)
-          	into i_detail_level_sample, i_detail_level_wellplate
-          	from
-          	(
-          		select v_sams_cols.cols_sample_detail_level sample_detail_level, v_sams_cols.cols_wellplate_detail_level wellplate_detail_level
-          			from v_samples_collections v_sams_cols
-          			where v_sams_cols.sams_id = in_sample_id
-          			and v_sams_cols.cols_user_id in (select user_ids(in_user_id))
-          		union
-          		select sync_cols.sample_detail_level sample_detail_level, sync_cols.wellplate_detail_level wellplate_detail_level
-          			from sync_collections_users sync_cols
-          			inner join collections cols on cols.id = sync_cols.collection_id and cols.deleted_at is null
-          			where sync_cols.collection_id in
-          			(
-          				select v_sams_cols.cols_id
-          				from v_samples_collections v_sams_cols
-          				where v_sams_cols.sams_id = in_sample_id
-          			)
-          			and sync_cols.user_id in (select user_ids(in_user_id))
-          	) all_cols;
-
-              return query select coalesce(i_detail_level_sample,0) detail_level_sample, coalesce(i_detail_level_wellplate,0) detail_level_wellplate;
-          end;$function$
+      declare
+        i_detail_level_wellplate integer default 0;
+        i_detail_level_sample integer default 0;
+      begin
+        select max(all_cols.sample_detail_level), max(all_cols.wellplate_detail_level)
+        into i_detail_level_sample, i_detail_level_wellplate
+        from
+        (
+          select v_sams_cols.cols_sample_detail_level sample_detail_level, v_sams_cols.cols_wellplate_detail_level wellplate_detail_level
+            from v_samples_collections v_sams_cols
+            where v_sams_cols.sams_id = in_sample_id
+            and v_sams_cols.cols_user_id in (select user_ids(in_user_id))
+          union
+          select sync_cols.sample_detail_level sample_detail_level, sync_cols.wellplate_detail_level wellplate_detail_level
+            from sync_collections_users sync_cols
+            inner join collections cols on cols.id = sync_cols.collection_id and cols.deleted_at is null
+            where sync_cols.collection_id in
+            (
+              select v_sams_cols.cols_id
+              from v_samples_collections v_sams_cols
+              where v_sams_cols.sams_id = in_sample_id
+            )
+            and sync_cols.user_id in (select user_ids(in_user_id))
+        ) all_cols;
+
+          return query select coalesce(i_detail_level_sample,0) detail_level_sample, coalesce(i_detail_level_wellplate,0) detail_level_wellplate;
+      end;$function$
   SQL
   create_function :generate_notifications, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.generate_notifications(in_channel_id integer, in_message_id integer, in_user_id integer, in_user_ids integer[])
@@ -1490,27 +1650,72 @@
        RETURNS TABLE(literatures text)
        LANGUAGE sql
       AS $function$
-         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
-         where l.literature_id = l2.id
+         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2 
+         where l.literature_id = l2.id 
          and l.element_type = $1 and l.element_id = $2
        $function$
   SQL
+  create_function :pub_reactions_by_molecule, sql_definition: <<-'SQL'
+      CREATE OR REPLACE FUNCTION public.pub_reactions_by_molecule(collection_id integer, molecule_id integer)
+       RETURNS TABLE(reaction_ids integer)
+       LANGUAGE sql
+      AS $function$
+          (select r.id from collections c, collections_reactions cr, reactions r, reactions_samples rs, samples s,molecules m
+           where c.id=$1 and c.id = cr.collection_id and cr.reaction_id = r.id
+           and r.id = rs.reaction_id and rs.sample_id = s.id and rs.type in ('ReactionsProductSample')
+           and c.deleted_at is null and cr.deleted_at is null and r.deleted_at is null and rs.deleted_at is null and s.deleted_at is null and m.deleted_at is null
+           and s.molecule_id = m.id and m.id=$2)
+        $function$
+  SQL
+  create_function :set_dataset_klasses_identifier, sql_definition: <<-'SQL'
+      CREATE OR REPLACE FUNCTION public.set_dataset_klasses_identifier()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	update dataset_klasses set identifier = gen_random_uuid() where identifier is null;
+        return new;
+      end
+      $function$
+  SQL
+  create_function :set_element_klasses_identifier, sql_definition: <<-'SQL'
+      CREATE OR REPLACE FUNCTION public.set_element_klasses_identifier()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	update element_klasses set identifier = gen_random_uuid() where identifier is null;
+        return new;
+      end
+      $function$
+  SQL
+  create_function :set_segment_klasses_identifier, sql_definition: <<-'SQL'
+      CREATE OR REPLACE FUNCTION public.set_segment_klasses_identifier()
+       RETURNS trigger
+       LANGUAGE plpgsql
+      AS $function$
+      begin
+      	update segment_klasses set identifier = gen_random_uuid() where identifier is null;
+        return new;
+      end
+      $function$
+  SQL
   create_function :shared_user_as_json, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
        RETURNS json
        LANGUAGE plpgsql
       AS $function$
-             begin
-             	if (in_user_id = in_current_user_id) then
-             		return null;
-             	else
-             		return (select row_to_json(result) from (
-             		select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-             		from users where id = $1
-             		) as result);
-             	end if;
-              end;
-           $function$
+         begin
+          if (in_user_id = in_current_user_id) then
+            return null;
+          else
+            return (select row_to_json(result) from (
+            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+            from users where id = $1
+            ) as result);
+          end if;
+          end;
+       $function$
   SQL
   create_function :update_users_matrix, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.update_users_matrix()
@@ -1540,22 +1745,22 @@
        RETURNS json
        LANGUAGE sql
       AS $function$
-             select row_to_json(result) from (
-            	 select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-           	   from users where id = $1
-         	   ) as result
-           $function$
+         select row_to_json(result) from (
+           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+           from users where id = $1
+         ) as result
+       $function$
   SQL
   create_function :user_ids, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
        RETURNS TABLE(user_ids integer)
        LANGUAGE sql
       AS $function$
-             select $1 as id
-             union
-             (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
-             and users.type in ('Group') and users_groups.user_id = $1)
-           $function$
+          select $1 as id
+          union
+          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
+         and users.type in ('Group') and users_groups.user_id = $1)
+        $function$
   SQL
   create_function :user_instrument, sql_definition: <<-'SQL'
       CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
@@ -1572,6 +1777,13 @@
            $function$
   SQL
 
+
+  create_trigger :set_dataset_klasses_identifier, sql_definition: <<-SQL
+      CREATE TRIGGER set_dataset_klasses_identifier AFTER INSERT ON public.dataset_klasses FOR EACH STATEMENT EXECUTE FUNCTION set_dataset_klasses_identifier()
+  SQL
+  create_trigger :set_element_klasses_identifier, sql_definition: <<-SQL
+      CREATE TRIGGER set_element_klasses_identifier AFTER INSERT ON public.element_klasses FOR EACH STATEMENT EXECUTE FUNCTION set_element_klasses_identifier()
+  SQL
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
       CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
   SQL
@@ -1579,6 +1791,33 @@
       CREATE TRIGGER set_segment_klasses_identifier AFTER INSERT ON public.segment_klasses FOR EACH STATEMENT EXECUTE FUNCTION set_segment_klasses_identifier()
   SQL
 
+  create_view "compound_open_data_locals", sql_definition: <<-SQL
+      SELECT c.x_id,
+      c.x_sample_id,
+      c.x_data,
+      c.x_created_at,
+      c.x_updated_at,
+      c.x_inchikey,
+      c.x_sum_formular,
+      c.x_cano_smiles,
+      c.x_external_label,
+      c.x_short_label,
+      c.x_name,
+      c.x_stereo
+     FROM ( SELECT NULL::integer AS x_id,
+              NULL::integer AS x_sample_id,
+              NULL::jsonb AS x_data,
+              NULL::timestamp without time zone AS x_created_at,
+              NULL::timestamp without time zone AS x_updated_at,
+              NULL::character varying AS x_inchikey,
+              NULL::character varying AS x_sum_formular,
+              NULL::character varying AS x_cano_smiles,
+              NULL::character varying AS x_external_label,
+              NULL::character varying AS x_short_label,
+              NULL::character varying AS x_name,
+              NULL::jsonb AS x_stereo) c
+    WHERE (c.x_id IS NOT NULL);
+  SQL
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
       lits.element_id,
@@ -1622,6 +1861,111 @@
       users
     WHERE ((channels.id = messages.channel_id) AND (messages.id = notifications.message_id) AND (users.id = messages.created_by));
   SQL
+  create_view "publication_authors", sql_definition: <<-SQL
+      SELECT DISTINCT (jsonb_array_elements((publications.taggable_data -> 'creators'::text)) ->> 'id'::text) AS author_id,
+      publications.element_id,
+      publications.element_type,
+          CASE
+              WHEN ((publications.state)::text ~~ 'completed%'::text) THEN 'completed'::character varying
+              ELSE publications.state
+          END AS state,
+      publications.doi_id,
+      publications.ancestry
+     FROM publications
+    WHERE (publications.deleted_at IS NULL);
+  SQL
+  create_view "publication_collections", sql_definition: <<-SQL
+      SELECT p.id,
+      p.state,
+      p.element_id,
+      (p.taggable_data ->> 'label'::text) AS label,
+      (p.taggable_data ->> 'col_doi'::text) AS doi,
+      jsonb_array_elements((p.taggable_data -> 'element_dois'::text)) AS elobj,
+      p.doi_id,
+      p.published_by
+     FROM publications p
+    WHERE ((p.deleted_at IS NULL) AND ((p.element_type)::text = 'Collection'::text));
+  SQL
+  create_view "publication_ontologies", sql_definition: <<-SQL
+      SELECT root.element_type,
+      root.element_id,
+      sub.element_id AS container_id,
+      root.published_at,
+      (containers.extended_metadata -> 'kind'::text) AS ontologies,
+      btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 1)) AS term_id,
+      btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2)) AS label
+     FROM publications root,
+      publications sub,
+      containers
+    WHERE (((root.state)::text ~~ 'complete%'::text) AND ((root.element_type)::text = ANY (ARRAY[('Sample'::character varying)::text, ('Reaction'::character varying)::text])) AND ((sub.element_type)::text = 'Container'::text) AND (root.id = ANY ((string_to_array((sub.ancestry)::text, '/'::text))::integer[])) AND (root.deleted_at IS NULL) AND (sub.element_id = containers.id));
+  SQL
+  create_view "publication_statics", sql_definition: <<-SQL
+      SELECT 'sample'::text AS el_type,
+      'sample-embargo'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text = 'accepted'::text) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'sample'::text AS el_type,
+      'sample-review'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text = ANY (ARRAY[('pending'::character varying)::text, ('reviewed'::character varying)::text])) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'sample'::text AS el_type,
+      'sample'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'sample'::text AS el_type,
+      'xvial'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM (publications
+       JOIN element_tags et ON ((((et.taggable_type)::text = 'Sample'::text) AND (((et.taggable_data -> 'xvial'::text) IS NOT NULL) AND (((et.taggable_data -> 'xvial'::text) ->> 'num'::text) <> ''::text)) AND (et.taggable_id = publications.element_id))))
+    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Sample'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'reaction'::text AS el_type,
+      'reaction-embargo'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text = 'accepted'::text) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'reaction'::text AS el_type,
+      'reaction-review'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text = ANY (ARRAY[('pending'::character varying)::text, ('reviewed'::character varying)::text])) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'reaction'::text AS el_type,
+      'reaction'::text AS ex_type,
+      count(publications.id) AS e_cnt
+     FROM publications
+    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Reaction'::text) AND (publications.deleted_at IS NULL))
+  UNION
+   SELECT 'analysis'::text AS el_type,
+      summ.g_type AS ex_type,
+      sum(summ.c_num) AS e_cnt
+     FROM ( SELECT
+                  CASE
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%NMR%'::text) THEN 'NMR'::text
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%mass%'::text) THEN 'Mass'::text
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%DEPT%'::text) THEN 'DEPT'::text
+                      WHEN (((containers.extended_metadata -> 'kind'::text) ~~ '%X-ray%'::text) OR ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0000156%'::text)) THEN 'X-ray'::text
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0000630%'::text) THEN 'IR'::text
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0001007%'::text) THEN 'TLC'::text
+                      WHEN ((containers.extended_metadata -> 'kind'::text) ~~ '%CHMO:0001075%'::text) THEN 'EA'::text
+                      WHEN (split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2) <> ''::text) THEN btrim(split_part((containers.extended_metadata -> 'kind'::text), '|'::text, 2))
+                      ELSE (containers.extended_metadata -> 'kind'::text)
+                  END AS g_type,
+              count(containers.id) AS c_num
+             FROM containers
+            WHERE ((containers.id IN ( SELECT publications.element_id
+                     FROM publications
+                    WHERE (((publications.state)::text ~~ 'completed%'::text) AND ((publications.element_type)::text = 'Container'::text) AND (publications.deleted_at IS NULL)))) AND ((containers.extended_metadata -> 'kind'::text) <> ''::text))
+            GROUP BY (containers.extended_metadata -> 'kind'::text)) summ
+    GROUP BY summ.g_type;
+  SQL
   create_view "v_samples_collections", sql_definition: <<-SQL
       SELECT cols.id AS cols_id,
       cols.user_id AS cols_user_id,
diff --git a/lib/data_cite/literature_paser.rb b/lib/data_cite/literature_paser.rb
index e67b9ba82..2bc964991 100644
--- a/lib/data_cite/literature_paser.rb
+++ b/lib/data_cite/literature_paser.rb
@@ -54,7 +54,7 @@ def self.excel_string(lit, bib)
     def self.report_hash(lit, bib)
       url = LiteraturePaser.doi_url(lit[:id], lit[:url], lit[:doi], bib)
       { title: lit[:title], url: url, doi: lit[:doi], year: bib['year']&.to_s, issn: bib['issn']&.to_s,
-        author: bib['author']&.to_s }
+        author: bib['author']&.to_s&.force_encoding('UTF-8') }
     rescue StandardError => e
       { title: lit[:title], url: url, doi: lit[:doi], year: bib['year']&.to_s, issn: bib['issn']&.to_s,
         author: bib['author']&.to_s&.dup&.force_encoding('UTF-8') }
diff --git a/package.json b/package.json
index b44c40276..bd2d4cd7f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "deep-equal": "1.0.1",
     "es6-promise-debounce": "^1.0.1",
     "factory-bot": "^6.3.1",
+    "html-to-react": "1.4.1",
     "html2pdf.js": "^0.10.1",
     "humps": "^2.0.1",
     "immutability-helper": "^2.8.1",
@@ -97,6 +98,7 @@
     "react-redux": "^7.2.4",
     "react-select": "npm:react-select@1.1.0",
     "react-select3": "npm:react-select@^3.1.1",
+    "react-select5": "npm:react-select@^5.7.0",
     "react-stickydiv": "^3.4.19",
     "react-svg-file-zoom-pan": "0.1.5",
     "react-svg-file-zoom-pan-latest": "npm:@complat/react-svg-file-zoom-pan@1.1.2",
diff --git a/spec/javascripts/common/common.spec.js b/spec/javascripts/common/common.spec.js
index 2fbd8a5e6..5fd77b3d8 100644
--- a/spec/javascripts/common/common.spec.js
+++ b/spec/javascripts/common/common.spec.js
@@ -3,7 +3,7 @@ import expect from 'expect';
 import Enzyme, { shallow } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-import SpinnerPencilIcon from '../../../app/packs/src/components/common/SpinnerPencilIcon';
+import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
diff --git a/spec/javascripts/utils/quillFormat.spec.js b/spec/javascripts/utils/quillFormat.spec.js
index 718896ced..0b182b2dd 100644
--- a/spec/javascripts/utils/quillFormat.spec.js
+++ b/spec/javascripts/utils/quillFormat.spec.js
@@ -1,5 +1,5 @@
 import expect from 'expect';
-import { keepSupSub } from '../../../app/packs/src/utilities/quillFormat';
+import { keepSupSub } from 'src/utilities/quillFormat';
 
 describe('keepSupSub', () => {
   it('does nothing special if empty ops', () => {
diff --git a/yarn.lock b/yarn.lock
index ddfaa9fc5..92c6cfe25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -968,13 +968,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-syntax-jsx@^7.17.12":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -2046,10 +2039,10 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.22.15":
-  version "7.23.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
-  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+"@babel/runtime@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -2385,59 +2378,6 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/babel-plugin@^11.10.0":
-  version "11.10.2"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
-  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.0"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.0.13"
-
-"@emotion/babel-plugin@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
-  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.1"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.1.3"
-
-"@emotion/babel-plugin@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
-  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.1"
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/serialize" "^1.1.2"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.2.0"
-
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -2646,21 +2586,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
   integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
 
-"@emotion/unitless@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
-  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
-  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
-
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
@@ -2713,7 +2638,7 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.5.1":
+"@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
   integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
@@ -3002,15 +2927,6 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
 "@mdi/js@^4.7.95":
   version "4.9.95"
   resolved "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz"
@@ -3021,120 +2937,6 @@
   resolved "https://registry.npmjs.org/@mdi/react/-/react-1.5.0.tgz"
   integrity sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w==
 
-"@mui/base@5.0.0-beta.16":
-  version "5.0.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.16.tgz#5869b8cc83ea5da0083bb11790bda007c2384564"
-  integrity sha512-OYxhC81c9bO0wobGcM8rrY5bRwpCXAI21BL0P2wz/2vTv4ek7ALz9+U5M8wgdmtRNUhmCmAB4L2WRwFRf5Cd8Q==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@floating-ui/react-dom" "^2.0.2"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.10"
-    "@popperjs/core" "^2.11.8"
-    clsx "^2.0.0"
-    prop-types "^15.8.1"
-
-"@mui/core-downloads-tracker@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.10.tgz#32a8581be98344bbda5ed31fc7b41788bd2e3bc5"
-  integrity sha512-kPHu/NhZq1k+vSZR5wq3AyUfD4bnfWAeuKpps0+8PS7ZHQ2Lyv1cXJh+PlFdCIOa0PK98rk3JPwMzS8BMhdHwQ==
-
-"@mui/icons-material@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.9.tgz#433cf03c214ce38e1b7a6f684769491fd99c5ef5"
-  integrity sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-
-"@mui/material@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.10.tgz#b8c6ba17c25c0df54053cb0f1bb35083bc91dace"
-  integrity sha512-ejFMppnO+lzBXpzju+N4SSz0Mhmi5sihXUGcr5FxpgB6bfUP0Lpe32O0Sw/3s8xlmLEvG1fqVT0rRyAVMlCA+A==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/base" "5.0.0-beta.16"
-    "@mui/core-downloads-tracker" "^5.14.10"
-    "@mui/system" "^5.14.10"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.10"
-    "@types/react-transition-group" "^4.4.6"
-    clsx "^2.0.0"
-    csstype "^3.1.2"
-    prop-types "^15.8.1"
-    react-is "^18.2.0"
-    react-transition-group "^4.4.5"
-
-"@mui/private-theming@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.10.tgz#42b176b27435931aff40d50833413d10150ac007"
-  integrity sha512-f67xOj3H06wWDT9xBg7hVL/HSKNF+HG1Kx0Pm23skkbEqD2Ef2Lif64e5nPdmWVv+7cISCYtSuE2aeuzrZe78w==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/utils" "^5.14.10"
-    prop-types "^15.8.1"
-
-"@mui/styled-engine@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.10.tgz#2ec443031e48425cd6fda63be498cfa262c1d3a0"
-  integrity sha512-EJckxmQHrsBvDbFu1trJkvjNw/1R7jfNarnqPSnL+jEQawCkQIqVELWLrlOa611TFtxSJGkdUfCFXeJC203HVg==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@emotion/cache" "^11.11.0"
-    csstype "^3.1.2"
-    prop-types "^15.8.1"
-
-"@mui/styles@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.10.tgz#1a6236c76eb30aa1467ea267b3934caf2930833a"
-  integrity sha512-aR+mH8R6WiPZLGjCh7pVEXopIdSbKzBXZc2TTysuNHDgLZB8RLmns5kmMw6sjUBpaJBcuGLZQHoVyq/JAhRqLg==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@emotion/hash" "^0.9.1"
-    "@mui/private-theming" "^5.14.10"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.10"
-    clsx "^2.0.0"
-    csstype "^3.1.2"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.10.0"
-    jss-plugin-camel-case "^10.10.0"
-    jss-plugin-default-unit "^10.10.0"
-    jss-plugin-global "^10.10.0"
-    jss-plugin-nested "^10.10.0"
-    jss-plugin-props-sort "^10.10.0"
-    jss-plugin-rule-value-function "^10.10.0"
-    jss-plugin-vendor-prefixer "^10.10.0"
-    prop-types "^15.8.1"
-
-"@mui/system@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.10.tgz#b125f8370c1c92af04f1839c40e034d4edc4ad29"
-  integrity sha512-QQmtTG/R4gjmLiL5ECQ7kRxLKDm8aKKD7seGZfbINtRVJDyFhKChA1a+K2bfqIAaBo1EMDv+6FWNT1Q5cRKjFA==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@mui/private-theming" "^5.14.10"
-    "@mui/styled-engine" "^5.14.10"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.10"
-    clsx "^2.0.0"
-    csstype "^3.1.2"
-    prop-types "^15.8.1"
-
-"@mui/types@^7.2.4":
-  version "7.2.4"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
-  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
-
-"@mui/utils@^5.14.10":
-  version "5.14.10"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.10.tgz#4b0a2a26f1ee12323010daa9d7aecf3384acfc3c"
-  integrity sha512-Rn+vYQX7FxkcW0riDX/clNUwKuOJFH45HiULxwmpgnzQoQr3A0lb+QYwaZ+FAkZrR7qLoHKmLQlcItu6LT0y/Q==
-  dependencies:
-    "@babel/runtime" "^7.22.15"
-    "@types/prop-types" "^15.7.5"
-    prop-types "^15.8.1"
-    react-is "^18.2.0"
-
 "@mui/base@5.0.0-beta.23":
   version "5.0.0-beta.23"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.23.tgz#dd10dfc609d8937749521f940965f757fa3c0f2c"
@@ -3454,11 +3256,6 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@rails/ujs@^6.1.3-1":
   version "6.1.4"
   resolved "https://registry.npmjs.org/@rails/ujs/-/ujs-6.1.4.tgz"
@@ -3566,87 +3363,6 @@
     classcat "^5.0.3"
     zustand "^4.3.1"
 
-"@react-dnd/asap@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.1.tgz#5291850a6b58ce6f2da25352a64f1b0674871aab"
-  integrity sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==
-
-"@react-dnd/invariant@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
-  integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
-
-"@react-dnd/shallowequal@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
-  integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
-
-"@reactflow/background@11.2.8":
-  version "11.2.8"
-  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.2.8.tgz#aa83f87b7d65442b52732f0a04d9da981f978265"
-  integrity sha512-5o41N2LygiNC2/Pk8Ak2rIJjXbKHfQ23/Y9LFsnAlufqwdzFqKA8txExpsMoPVHHlbAdA/xpQaMuoChGPqmyDw==
-  dependencies:
-    "@reactflow/core" "11.8.3"
-    classcat "^5.0.3"
-    zustand "^4.4.1"
-
-"@reactflow/controls@11.1.19":
-  version "11.1.19"
-  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.1.19.tgz#a8bc4b4eafc10d5d230db5286753e867bcf35e5b"
-  integrity sha512-Vo0LFfAYjiSRMLEII/aeBo+1MT2a0Yc7iLVnkuRTLzChC0EX+A2Fa+JlzeOEYKxXlN4qcDxckRNGR7092v1HOQ==
-  dependencies:
-    "@reactflow/core" "11.8.3"
-    classcat "^5.0.3"
-    zustand "^4.4.1"
-
-"@reactflow/core@11.8.3":
-  version "11.8.3"
-  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.8.3.tgz#03ffeb06fbc141b8f786cb4ac8169f8a51a5f00e"
-  integrity sha512-y6DN8Wy4V4KQBGHFqlj9zWRjLJU6CgdnVwWaEA/PdDg/YUkFBMpZnXqTs60czinoA2rAcvsz50syLTPsj5e+Wg==
-  dependencies:
-    "@types/d3" "^7.4.0"
-    "@types/d3-drag" "^3.0.1"
-    "@types/d3-selection" "^3.0.3"
-    "@types/d3-zoom" "^3.0.1"
-    classcat "^5.0.3"
-    d3-drag "^3.0.0"
-    d3-selection "^3.0.0"
-    d3-zoom "^3.0.0"
-    zustand "^4.4.1"
-
-"@reactflow/minimap@11.6.3":
-  version "11.6.3"
-  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.6.3.tgz#1cfddd87e9afd23ad704167988c66bd683ffc5d2"
-  integrity sha512-PSA28dk09RnBHOA1zb45fjQXz3UozSJZmsIpgq49O3trfVFlSgRapxNdGsughWLs7/emg2M5jmi6Vc+ejcfjvQ==
-  dependencies:
-    "@reactflow/core" "11.8.3"
-    "@types/d3-selection" "^3.0.3"
-    "@types/d3-zoom" "^3.0.1"
-    classcat "^5.0.3"
-    d3-selection "^3.0.0"
-    d3-zoom "^3.0.0"
-    zustand "^4.4.1"
-
-"@reactflow/node-resizer@2.1.5":
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.1.5.tgz#f4033946ccc9cc8f47a94ed93f10a32befd546f1"
-  integrity sha512-z/hJlsptd2vTx13wKouqvN/Kln08qbkA+YTJLohc2aJ6rx3oGn9yX4E4IqNxhA7zNqYEdrnc1JTEA//ifh9z3w==
-  dependencies:
-    "@reactflow/core" "11.8.3"
-    classcat "^5.0.4"
-    d3-drag "^3.0.0"
-    d3-selection "^3.0.0"
-    zustand "^4.4.1"
-
-"@reactflow/node-toolbar@1.2.7":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.2.7.tgz#cf6639945dc42b42416f293d6132e1187bca3424"
-  integrity sha512-vs+Wg1tjy3SuD7eoeTqEtscBfE9RY+APqC28urVvftkrtsN7KlnoQjqDG6aE45jWP4z+8bvFizRWjAhxysNLkg==
-  dependencies:
-    "@reactflow/core" "11.8.3"
-    classcat "^5.0.3"
-    zustand "^4.4.1"
-
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz"
@@ -3969,7 +3685,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz#a1b18ae5fa055a6734cb3bd3cbc6260ef19676e3"
   integrity sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==
 
-"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
+"@types/d3-drag@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
   integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
@@ -4061,7 +3777,7 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
+"@types/d3-selection@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.3.tgz#57be7da68e7d9c9b29efefd8ea5a9ef1171e42ba"
   integrity sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==
@@ -4280,6 +3996,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/mime-types@^2.1.0":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.4.tgz#93a1933e24fed4fb9e4adc5963a63efcbb3317a2"
+  integrity sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -4317,21 +4038,16 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/prop-types@^15.7.5":
-  version "15.7.7"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.7.tgz#f9361f7b87fd5d8188b2c998db0a1f47e9fb391a"
-  integrity sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==
+"@types/prop-types@^15.7.9":
+  version "15.7.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
+  integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
 
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
-"@types/prop-types@^15.7.9":
-  version "15.7.9"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
-  integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
-
 "@types/quill@^1.3.10":
   version "1.3.10"
   resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613"
@@ -4377,16 +4093,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.22"
-  resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.22.tgz"
-  integrity sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-redux@^7.1.20":
   version "7.1.25"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
@@ -4411,10 +4117,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+"@types/react-transition-group@^4.4.8":
+  version "4.4.9"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
+  integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==
   dependencies:
     "@types/react" "*"
 
@@ -4795,6 +4501,11 @@ adler-32@~1.3.0:
   dependencies:
     printj "~1.2.2"
 
+ag-grid-community@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-27.3.0.tgz#b1e94a58026aaf2f0cd7920e35833325b5e762c7"
+  integrity sha512-R5oZMXEHXnOLrmhn91J8lR0bv6IAnRcU6maO+wKLMJxffRWaAYFAuw1jt7bdmcKCv8c65F6LEBx4ykSOALa9vA==
+
 ag-grid-community@^28.2.1:
   version "28.2.1"
   resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.2.1.tgz#50778cb2254ee79497222781909d8364007dd91e"
@@ -4805,6 +4516,13 @@ ag-grid-community@^29.0.0:
   resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-29.3.5.tgz#16897896d10fa3ecac79279aad50d3aaa17c5f33"
   integrity sha512-LxUo21f2/CH31ACEs1C7Q/ggGGI1fQPSTB4aY5OThmM+lBkygZ7QszBE8jpfgWOIjvjdtcdIeQbmbjkHeMsA7A==
 
+ag-grid-react@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
+  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
+  dependencies:
+    prop-types "^15.8.1"
+
 ag-grid-react@^28.2.1:
   version "28.2.1"
   resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.1.tgz#c38585b8f165a5cf9343eab6994c06855f5b2caf"
@@ -4819,13 +4537,6 @@ ag-grid-react@^29.0.0:
   dependencies:
     prop-types "^15.8.1"
 
-ag-grid-react@^28.2.1:
-  version "28.2.1"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.1.tgz#c38585b8f165a5cf9343eab6994c06855f5b2caf"
-  integrity sha512-3vbw+B77uWwAyiOJxQA5U+PQFRCCccUx7L5PIwrnA4Y7c1yAu8sB65hAZdBc9kuW26iltwv7asq0UzP7UAQUpg==
-  dependencies:
-    prop-types "^15.8.1"
-
 agent-base@5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
@@ -5213,6 +4924,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 async-validator@~1.11.3:
   version "1.11.5"
   resolved "https://registry.npmjs.org/async-validator/-/async-validator-1.11.5.tgz"
@@ -5292,20 +5008,6 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-check-es2015-constants@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
-  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -5395,22 +5097,7 @@ babel-plugin-polyfill-regenerator@^0.5.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.0"
 
-babel-plugin-syntax-async-functions@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
-  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
-
-babel-plugin-syntax-exponentiation-operator@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
-  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
-
-babel-plugin-syntax-flow@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
-  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
-
-babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
@@ -5420,227 +5107,6 @@ babel-plugin-syntax-object-rest-spread@^6.8.0:
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
-babel-plugin-syntax-trailing-function-commas@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
-  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
-
-babel-plugin-transform-async-to-generator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
-  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
-  dependencies:
-    babel-helper-remap-async-to-generator "^6.24.1"
-    babel-plugin-syntax-async-functions "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-arrow-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
-  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
-  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoping@^6.23.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
-  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-plugin-transform-es2015-classes@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
-  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
-  dependencies:
-    babel-helper-define-map "^6.24.1"
-    babel-helper-function-name "^6.24.1"
-    babel-helper-optimise-call-expression "^6.24.1"
-    babel-helper-replace-supers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-computed-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
-  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-destructuring@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
-  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
-  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-for-of@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
-  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-function-name@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
-  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
-  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
-  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
-  dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
-  version "6.26.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
-  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
-babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
-  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
-  dependencies:
-    babel-helper-hoist-variables "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-umd@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
-  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
-  dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-object-super@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
-  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
-  dependencies:
-    babel-helper-replace-supers "^6.24.1"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-parameters@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
-  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
-  dependencies:
-    babel-helper-call-delegate "^6.24.1"
-    babel-helper-get-function-arity "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
-  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-spread@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
-  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-sticky-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
-  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-template-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
-  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
-  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-unicode-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
-  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    regexpu-core "^2.0.0"
-
-babel-plugin-transform-exponentiation-operator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
-  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
-  dependencies:
-    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
-    babel-plugin-syntax-exponentiation-operator "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-flow-strip-types@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
-  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
-  dependencies:
-    babel-plugin-syntax-flow "^6.18.0"
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -5649,109 +5115,7 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-plugin-transform-react-display-name@^6.23.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
-  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-self@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
-  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-source@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
-  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
-  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
-  dependencies:
-    babel-helper-builder-react-jsx "^6.24.1"
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-regenerator@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
-  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
-  dependencies:
-    regenerator-transform "^0.10.0"
-
-babel-plugin-transform-strict-mode@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
-  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-preset-env@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
-  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.22.0"
-    babel-plugin-syntax-trailing-function-commas "^6.22.0"
-    babel-plugin-transform-async-to-generator "^6.22.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.23.0"
-    babel-plugin-transform-es2015-classes "^6.23.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
-    babel-plugin-transform-es2015-destructuring "^6.23.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
-    babel-plugin-transform-es2015-for-of "^6.23.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
-    babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.22.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-umd "^6.23.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.23.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
-    babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
-    babel-plugin-transform-es2015-template-literals "^6.22.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-exponentiation-operator "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
-    browserslist "^3.2.6"
-    invariant "^2.2.2"
-    semver "^5.3.0"
-
-babel-preset-flow@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
-  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
-  dependencies:
-    babel-plugin-transform-flow-strip-types "^6.22.0"
-
-babel-preset-react@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
-  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.3.13"
-    babel-plugin-transform-react-display-name "^6.23.0"
-    babel-plugin-transform-react-jsx "^6.24.1"
-    babel-plugin-transform-react-jsx-self "^6.22.0"
-    babel-plugin-transform-react-jsx-source "^6.22.0"
-    babel-preset-flow "^6.23.0"
-
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -5759,47 +5123,6 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.24.1, babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.24.1, babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -6245,6 +5568,27 @@ cheerio@^1.0.0-rc.3:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
+chem-generic-ui-viewer@~0.0.4:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/chem-generic-ui-viewer/-/chem-generic-ui-viewer-0.0.8.tgz#0a84df55a0967ff3953bec121bca638871c41a59"
+  integrity sha512-unrH4weuNB0Att0KA6X77jjegOny9kodDdIt/XM9GxAC10zJitpd31742/JU0ajUUPHQOjHJZSmAaclcd2QP0Q==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^6.1.2"
+    "@fortawesome/free-regular-svg-icons" "^6.1.2"
+    "@fortawesome/free-solid-svg-icons" "^6.1.2"
+    "@fortawesome/react-fontawesome" "^0.2.0"
+    ag-grid-community "^27.3.0"
+    ag-grid-react "^27.3.0"
+    lodash "^4.17.21"
+    numeral "^2.0.6"
+    prop-types "^15.8.1"
+    react-redux "^7.2.4"
+    react-select "5.2.2"
+    redux "^4.1.0"
+    redux-immutable "^4.0.0"
+    redux-thunk "^2.0.0"
+    uuid "^8.3.2"
+
 chem-generic-ui@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/chem-generic-ui/-/chem-generic-ui-1.0.10.tgz#c2f1735eae0a480f8dcebeaf72b21e77a7c79fdf"
@@ -6678,6 +6022,16 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
+concat-stream@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 confusing-browser-globals@^1.0.10:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
@@ -6929,11 +6283,6 @@ csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-csstype@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-
 cwise-compiler@^1.1.2:
   version "1.1.3"
   resolved "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz"
@@ -7022,7 +6371,7 @@ d3-brush@1:
     d3-selection "1"
     d3-transition "1"
 
-d3-brush@2, d3-brush@2.1.0:
+d3-brush@2:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
   integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
@@ -7637,7 +6986,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7822,11 +7171,6 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -8008,6 +7352,13 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@^3.0, domhandler@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a"
+  integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz"
@@ -8020,9 +7371,9 @@ dompurify@^2.2.0:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.1.tgz#f9cb1a275fde9af6f2d0a2644ef648dd6847b631"
   integrity sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==
 
-domutils@^2.5.2, domutils@^2.7.0, domutils@^2.8.0:
+domutils@^2.0.0, domutils@^2.5.2, domutils@^2.7.0, domutils@^2.8.0:
   version "2.8.0"
-  resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
   dependencies:
     dom-serializer "^1.0.1"
@@ -8757,6 +8108,16 @@ extract-zip@2.0.1:
   optionalDependencies:
     "@types/yauzl" "^2.9.1"
 
+extract-zip@^1.6.6:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
+  dependencies:
+    concat-stream "^1.6.2"
+    debug "^2.6.9"
+    mkdirp "^0.5.4"
+    yauzl "^2.10.0"
+
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz"
@@ -9163,14 +8524,6 @@ generic-ui-core@^1.0.0:
     chem-units "^0.0.5"
     lodash "^4.17.21"
 
-generic-ui-core@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/generic-ui-core/-/generic-ui-core-1.0.0.tgz#cdd40d15f398731ba9dc6b92840051985eee0a56"
-  integrity sha512-i2BwJHB4i3IcgJnLtKLEKuzOXdWG4Bht93gv+Olz5NsIXn2u19zKPPrqbRj3xGsq1s0Ek++VjPXvTJdsGBRteQ==
-  dependencies:
-    chem-units "^0.0.5"
-    lodash "^4.17.21"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -9588,6 +8941,16 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-to-react@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.1.tgz#64f67657c6335056866e334c097556f25894dd47"
+  integrity sha512-Ys2gGxF8LBF9bD8tbnsU0xgEDOTC3Sy81mtpIH/61hSqGE1l4QetnN1yv0oAK/PuvwABmiNS+ggqvuzo+GfoiA==
+  dependencies:
+    domhandler "^3.0"
+    htmlparser2 "^4.0"
+    lodash.camelcase "^4.3.0"
+    ramda "^0.26"
+
 html2canvas@1.4.1, html2canvas@^1.0.0, html2canvas@^1.0.0-rc.5:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
@@ -9605,6 +8968,16 @@ html2pdf.js@^0.10.1:
     html2canvas "^1.0.0"
     jspdf "^2.3.1"
 
+htmlparser2@^4.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78"
+  integrity sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+    domutils "^2.0.0"
+    entities "^2.0.0"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -10076,13 +9449,6 @@ is-core-module@^2.2.0, is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
-  dependencies:
-    has "^1.0.3"
-
 is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -10612,11 +9978,6 @@ jpeg-js@^0.4.1:
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
   integrity "sha1-qfHG8fnw+oDNs0hO2WNQVNKJNqo= sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="
 
-jquery@^3.4.0:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
-  integrity "sha1-I+0v/tihngSIFPEzkaGa/NuhYOY= sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg=="
-
 jquery@^3.4.0:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
@@ -11227,7 +10588,7 @@ lodash-es@^4.17.15, lodash-es@^4.17.21:
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
 lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
   version "4.0.8"
@@ -11558,7 +10919,7 @@ mime-db@1.52.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.0.1, mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.0.1, mime-types@^2.1.12, mime-types@^2.1.25, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.34"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz"
   integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
@@ -11572,18 +10933,16 @@ mime-types@^2.1.31, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
-mime-types@^2.1.25:
-  version "2.1.34"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
-  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
-  dependencies:
-    mime-db "1.51.0"
-
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^2.0.3:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
+  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
@@ -11737,6 +11096,13 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
+mkdirp@^0.5.4:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
 mkdirp@^0.5.5:
   version "0.5.5"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz"
@@ -11823,12 +11189,7 @@ moment-timezone@^0.5.40:
   dependencies:
     moment "^2.29.4"
 
-moment@2.x, moment@^2.24.0, moment@^2.29.4:
-  version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
-  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
-
-moment@^2.29.4:
+moment@2.x, moment@^2.22.2, moment@^2.24.0, moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -11944,6 +11305,16 @@ neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+ngl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ngl/-/ngl-2.2.0.tgz#170cbfb1997c9a05b8d42c7be11d388da9c55631"
+  integrity sha512-aPJb1zFHzHBZl8u1Dl82LiyuulEzSEzMwdpuugyCHxQ09KuXxlIQD5JJo3dKUbMyU5yqtiOScVWLmu6/Uw27RQ==
+  dependencies:
+    chroma-js "^1.3.7"
+    signals "^1.0.0"
+    sprintf-js "^1.1.2"
+    three "^0.118.0"
+
 nise@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.4.tgz#491ce7e7307d4ec546f5a659b2efe94a18b4bbc0"
@@ -12741,11 +12112,6 @@ pdfjs-dist@2.12.313:
   resolved "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz"
   integrity sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==
 
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-  integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -12916,6 +12282,11 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
+progress@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise-all-reject-late@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz"
@@ -12931,11 +12302,6 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-promise-polyfill@^8.0.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
-  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
-
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz"
@@ -13003,6 +12369,11 @@ proxy-from-env@1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
   integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==
 
+proxy-from-env@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz"
@@ -13031,6 +12402,22 @@ punycode@^2.3.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+puppeteer@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-2.1.1.tgz#ccde47c2a688f131883b50f2d697bd25189da27e"
+  integrity sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==
+  dependencies:
+    "@types/mime-types" "^2.1.0"
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^4.0.0"
+    mime "^2.0.3"
+    mime-types "^2.1.25"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
 qr.js@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz"
@@ -13739,18 +13126,6 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.2"
     react-popper "^2.3.0"
 
-react-datepicker@^4.8.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.15.0.tgz#489834773fbcf87852273b4642f0c5bd3811cef7"
-  integrity sha512-kysEqVv6wRQkmAyn0wJi4Xx+JjBPBtXWfQSfh6sR3wdzZX1/LjYTPmaurnVI6ao177ecompg8ze7NCgtEGW78A==
-  dependencies:
-    "@popperjs/core" "^2.9.2"
-    classnames "^2.2.6"
-    date-fns "^2.24.0"
-    prop-types "^15.7.2"
-    react-onclickoutside "^6.12.2"
-    react-popper "^2.3.0"
-
 react-datepicker@~1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.4.1.tgz"
@@ -14160,6 +13535,11 @@ react-refresh@^0.12.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.12.0.tgz#28ac0a2c30ef2bb3433d5fd0621e69a6d774c3a4"
   integrity sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==
 
+react-resizable-box@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-resizable-box/-/react-resizable-box-2.1.0.tgz#8bba081b5adbe2af0be4768c4f1de6a84a423aad"
+  integrity sha512-0U3kQfVyKnxCPdu/QWC4n/W8DvJmy+EGdq2lBSq2KvEnzhC1E0d/whZCz7PQ/Lq20RdPbHvn5/A2BtQgwcyCFg==
+
 "react-select3@npm:react-select@^3.1.1":
   version "3.2.0"
   resolved "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz"
@@ -14174,31 +13554,20 @@ react-refresh@^0.12.0:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
-react-select@5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.2.tgz#3d5edf0a60f1276fd5f29f9f90a305f0a25a5189"
-  integrity sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.1.1"
-    "@types/react-transition-group" "^4.4.0"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-transition-group "^4.3.0"
-
-react-select@5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.4.0.tgz#81f6ac73906126706f104751ee14437bd16798f4"
-  integrity sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==
+"react-select5@npm:react-select@^5.7.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
   dependencies:
     "@babel/runtime" "^7.12.0"
     "@emotion/cache" "^11.4.0"
     "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
     "@types/react-transition-group" "^4.4.0"
-    memoize-one "^5.0.0"
+    memoize-one "^6.0.0"
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
 
 react-select@5.2.2:
   version "5.2.2"
@@ -14337,7 +13706,7 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-transition-group@^4.3.0, react-transition-group@^4.4.0:
+react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -14347,16 +13716,6 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-transition-group@^4.4.0, react-transition-group@^4.4.1, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -14497,6 +13856,19 @@ readable-stream@^2.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^2.2.2:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.0.6, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
@@ -14588,6 +13960,13 @@ redux@^4.0.0, redux@^4.0.4, redux@^4.1.0, redux@^4.1.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -14617,11 +13996,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -14632,20 +14006,6 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
-regenerator-transform@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
-  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
-  dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
-    private "^0.1.6"
-
-regenerator-runtime@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
-  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
-
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -14706,15 +14066,6 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
-  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
-
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -14798,6 +14149,28 @@ replace-in-file@^6.3.5:
     glob "^7.2.0"
     yargs "^17.2.1"
 
+repo-review-ui@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/repo-review-ui/-/repo-review-ui-0.0.14.tgz#88c432d632e5d4bc92db5f23a0c2c4df61c5de9d"
+  integrity sha512-lt6NtIiJYgdwFYjOGuQ0ITcxXdc6FqmlKGRc/+MYlIGDfsuACaYko7rJ5GuA4oNTv4PtcjTa4JpFiUewLd0yPg==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^6.1.2"
+    "@fortawesome/free-regular-svg-icons" "^6.1.2"
+    "@fortawesome/free-solid-svg-icons" "^6.1.2"
+    "@fortawesome/react-fontawesome" "^0.2.0"
+    lodash "^4.17.21"
+    moment "^2.22.2"
+    moment-precise-range-plugin "^1.2.4"
+    numeral "^2.0.6"
+    prop-types "^15.8.1"
+    react-draggable "^4.4.5"
+    react-redux "^7.2.4"
+    react-select "5.4.0"
+    redux "^4.2.0"
+    redux-immutable "^4.0.0"
+    redux-thunk "^2.0.0"
+    uuid "^3.3.2"
+
 request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
@@ -14901,15 +14274,6 @@ resolve@^1.19.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.19.0:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -14951,6 +14315,13 @@ rgbcolor@^1.0.1:
   resolved "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz"
   integrity sha1-1lBezbMEplldom+ktDMHMGd1lF0=
 
+rimraf@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -15247,6 +14618,11 @@ signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signals@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/signals/-/signals-1.0.0.tgz#65f0c1599352b35372ecaae5a250e6107376ed69"
+  integrity sha512-dE3lBiqgrgIvpGHYBy6/kiYKfh0HXRmbg0ocakBKiOefbal6ZeTtNlQlxsu9ADkNzv5OmRwRKu+IaTPSqJdZDg==
+
 sinon@^15.2.0:
   version "15.2.0"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-15.2.0.tgz#5e44d4bc5a9b5d993871137fd3560bebfac27565"
@@ -15861,6 +15237,11 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+three@^0.118.0:
+  version "0.118.3"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.118.3.tgz#c0bf8c10a68155478f12f4ccac2ff979526a4a0a"
+  integrity sha512-ijECXrNzDkHieoeh2H69kgawTGH8DiamhR4uBN8jEM7VHSKvfTdEvOoHsA8Aq7dh7PHAxhlqBsN5arBI3KixSw==
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
@@ -15891,7 +15272,7 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
-tiny-warning@^1.0.2:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -15908,11 +15289,6 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -16094,6 +15470,11 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
 typescript-compare@^0.0.2:
   version "0.0.2"
   resolved "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz"
@@ -16358,6 +15739,11 @@ urllite@~0.5.0:
   dependencies:
     xtend "~4.0.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@@ -16856,6 +16242,13 @@ write-file-atomic@^4.0.0, write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+ws@^6.1.0:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
+  dependencies:
+    async-limiter "~1.0.0"
+
 ws@^8.13.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
@@ -17010,14 +16403,6 @@ yarn@^1.22.19:
   resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
   integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
 
-yauzl@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
-  integrity sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==
-  dependencies:
-    buffer-crc32 "~0.2.3"
-    fd-slicer "~1.1.0"
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 6db5ff36808f37eb2db8815c35295a85ba9f45bb Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Fri, 1 Dec 2023 11:33:43 +0000
Subject: [PATCH 201/258] Resolve "new 3d for cif"

---
 .gitignore                                    |   3 +-
 app/api/chemotion/public_api.rb               |   2 +-
 app/api/chemotion/repository_api.rb           |   2 +-
 app/api/chemotion/ui_api.rb                   |   2 +-
 app/api/helpers/public_helpers.rb             |   6 +-
 app/controllers/pages_controller.rb           |   2 +
 app/models/matrice.rb                         |  11 +-
 .../elements/details/samples/SampleDetails.js |   1 +
 app/packs/src/components/viewer/MolViewer.js  |  69 ------
 .../src/components/viewer/MolViewerBtn.js     |   5 +-
 .../src/components/viewer/MolViewerListBtn.js |   5 +-
 .../components/viewer/MolViewerListModal.js   |  96 ++------
 .../src/components/viewer/MolViewerModal.js   |  52 ++--
 .../src/repo/fetchers/GenericSgsFetcher.js    |  56 -----
 app/packs/src/repo/fetchers/PublicFetcher.js  |   2 +-
 app/packs/src/repoHome/RepoCommon.js          |   4 +-
 app/views/pages/jsmol.html.erb                |   0
 config/initializers/molecule_viewer.rb        |  27 ---
 config/routes.rb                              |   1 +
 package.json                                  |   2 +-
 package_postinstall.sh                        |   8 +-
 yarn.lock                                     | 224 +++++++++++++++---
 22 files changed, 250 insertions(+), 330 deletions(-)
 delete mode 100644 app/packs/src/components/viewer/MolViewer.js
 delete mode 100644 app/packs/src/repo/fetchers/GenericSgsFetcher.js
 create mode 100644 app/views/pages/jsmol.html.erb
 delete mode 100644 config/initializers/molecule_viewer.rb

diff --git a/.gitignore b/.gitignore
index 7ba61bf3e..875903d63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -96,7 +96,8 @@
 
 /public/intro/*
 !/public/intro/.keep
-
+/public/jsmol/*
+!/public/jsmol/.keep
 /public/editors/*
 !/public/editors/.keep
 /public/favicon.ico
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 20babc182..36901147b 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -56,7 +56,7 @@ def send_notification(attachment, user, status, has_error = false)
       end
       get 'initialize' do
         {
-          molecule_viewer: Rails.configuration.molecule_viewer_config
+          molecule_viewer: Matrice.molecule_viewer
         }
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index c2edd2ea3..417803588 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -778,7 +778,7 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review['history'] = review_history
             else
               # is_leader = review.dig('reviewers')&.include?(current_user&.id)
-              if root.state == Publication::STATE_PENDING # && (comment.present? || is_leader)
+              if root.state == Publication::STATE_PENDING && action == Publication::STATE_REVIEWED # && (comment.present? || is_leader)
                 next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
                 review_history << next_node
                 review['history'] = review_history
diff --git a/app/api/chemotion/ui_api.rb b/app/api/chemotion/ui_api.rb
index 791235976..beade54d3 100644
--- a/app/api/chemotion/ui_api.rb
+++ b/app/api/chemotion/ui_api.rb
@@ -24,7 +24,7 @@ class UiAPI < Grape::API
           has_sfn: sfn_config.present? && current_user.matrix_check_by_name('scifinderN'),
           has_converter: converter_config.present?,
           has_radar: radar_config.present?,
-          molecule_viewer: Rails.configuration.molecule_viewer_config
+          molecule_viewer: Matrice.molecule_viewer,
         }
       end
     end
diff --git a/app/api/helpers/public_helpers.rb b/app/api/helpers/public_helpers.rb
index e15bade9c..3312931db 100644
--- a/app/api/helpers/public_helpers.rb
+++ b/app/api/helpers/public_helpers.rb
@@ -33,12 +33,12 @@ def de_encode_json(json, key = '', viv = '', encode = true)
   end
 
   def convert_to_3d(molfile)
-    molecule_viewer = Rails.configuration.molecule_viewer_config || {}
-    if molecule_viewer.blank? || molecule_viewer.chembox_endpoint.blank?
+    molecule_viewer = Matrice.molecule_viewer
+    if molecule_viewer.blank? || molecule_viewer[:chembox_endpoint].blank?
       { molfile: molfile }
     else
       options = { timeout: 10, body: { mol: molfile }.to_json, headers: { 'Content-Type' => 'application/json' } }
-      response = HTTParty.post(molecule_viewer.chembox_endpoint, options)
+      response = HTTParty.post(molecule_viewer[:chembox_endpoint], options)
       response.code == 200 ? { molfile: response.parsed_response } : { molfile: molfile }
     end
   end
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index 12cea4dc9..dd338d5fb 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -19,6 +19,8 @@ def mydb; end
 
   def editor; end
 
+  def jsmol; end
+
   def sfn_cb
     code = params[:code]
     sf_verifer = request.env.dig('action_dispatch.request.unsigned_session_cookie', 'omniauth.pkce.verifier')
diff --git a/app/models/matrice.rb b/app/models/matrice.rb
index 0df707304..8d3fc820d 100644
--- a/app/models/matrice.rb
+++ b/app/models/matrice.rb
@@ -21,8 +21,6 @@ class Matrice < ApplicationRecord
   acts_as_paranoid
   after_create :gen_json
 
-  after_update :reload_initializer, if: -> { (saved_change_to_configs? || saved_change_to_enabled?) && name == 'moleculeViewer' }
-
   def self.gen_matrices_json
     mx = pluck(:name, :id).to_h || {}
   rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
@@ -39,13 +37,14 @@ def self.extra_rules
     configs.dig('extra_rules', 'enable') == true ? configs['extra_rules'] : {}
   end
 
+  def self.molecule_viewer
+    rec = find_by(name: 'moleculeViewer')
+    { feature_enabled: rec&.enabled || false }.merge(rec&.configs || {}).deep_symbolize_keys
+  end
+
   private
 
   def gen_json
     Matrice.gen_matrices_json
   end
-
-  def reload_initializer
-    load Rails.root.join('config/initializers/molecule_viewer.rb') if Rails.application.initialized?
-  end
 end
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 29c17079a..dbdc15696 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1825,6 +1825,7 @@ export default class SampleDetails extends React.Component {
               disabled={sample.isNew || !this.enableMoleculeViewer}
               fileContent={sample.molfile}
               isPublic={false}
+              viewType={`mol_${sample.id}`}
             />
             {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
             <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
diff --git a/app/packs/src/components/viewer/MolViewer.js b/app/packs/src/components/viewer/MolViewer.js
deleted file mode 100644
index 6eb418be5..000000000
--- a/app/packs/src/components/viewer/MolViewer.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-
-const MolViewer = (props) => {
-  const {
-    cliendId, endpoint, molContent
-  } = props;
-  const [serviceReady, setServiceReady] = useState(false);
-  const ifRef = useRef();
-  const ifRefCurrent = ifRef.current;
-
-  const discoverService = (event) => {
-    const { type, data } = event.data;
-    if (type === 'molviewer:state' && data?.state === 'ready') {
-      setServiceReady(true);
-    }
-  };
-
-  const postIt = () => {
-    if (ifRefCurrent) {
-      const { contentWindow } = ifRefCurrent;
-      if (contentWindow) {
-        molContent.text().then((text) => {
-          const messageData = { payload: text };
-          contentWindow.postMessage({ type: `${cliendId}:request-view`, data: messageData }, '*');
-        });
-      }
-    }
-  };
-
-  if (!endpoint) {
-    return <Alert bsStyle="danger">This service is not ready. Please contact your system administrator.</Alert>;
-  }
-
-  useEffect(() => {
-    if (endpoint) {
-      window.addEventListener('message', discoverService);
-      return () => {
-        window.removeEventListener('message', discoverService);
-      };
-    }
-    return null;
-  }, []);
-
-  useEffect(() => {
-    if (serviceReady) postIt();
-  }, [serviceReady, molContent]);
-
-  return (
-    <>
-      {
-        serviceReady ? null : <Alert bsStyle="danger">This service is offline. Please contact your system administrator.</Alert>
-      }
-      <div className="structure-frame-container">
-        <iframe id="iframe_jsmol" ref={ifRef} src={endpoint} title="JSmol Web" className="frame-div" />
-      </div>
-    </>
-  );
-};
-
-MolViewer.propTypes = {
-  cliendId: PropTypes.string.isRequired,
-  endpoint: PropTypes.string.isRequired,
-  molContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
-};
-
-export default MolViewer;
diff --git a/app/packs/src/components/viewer/MolViewerBtn.js b/app/packs/src/components/viewer/MolViewerBtn.js
index 81d7ce268..0fafd155d 100644
--- a/app/packs/src/components/viewer/MolViewerBtn.js
+++ b/app/packs/src/components/viewer/MolViewerBtn.js
@@ -20,7 +20,7 @@ export default class MolViewerBtn extends Component {
 
   render() {
     const {
-      disabled, fileContent, isPublic
+      disabled, fileContent, isPublic, viewType
     } = this.props;
     const config = UIStore.getState().moleculeViewer || PublicStore.getState().moleculeViewer;
     const { show } = this.state;
@@ -36,11 +36,11 @@ export default class MolViewerBtn extends Component {
         {
           show ?
             <MolViewerModal
-              config={config}
               fileContent={fileContent}
               handleModalOpen={e => this.handleModalOpen(e)}
               isPublic={isPublic}
               show={show}
+              viewType={viewType}
             /> : null
         }
       </>
@@ -52,4 +52,5 @@ MolViewerBtn.propTypes = {
   disabled: PropTypes.bool.isRequired,
   fileContent: PropTypes.string.isRequired,
   isPublic: PropTypes.bool.isRequired,
+  viewType: PropTypes.string.isRequired,
 };
diff --git a/app/packs/src/components/viewer/MolViewerListBtn.js b/app/packs/src/components/viewer/MolViewerListBtn.js
index ada3f6c84..fc1e50112 100644
--- a/app/packs/src/components/viewer/MolViewerListBtn.js
+++ b/app/packs/src/components/viewer/MolViewerListBtn.js
@@ -25,14 +25,14 @@ export default class MolViewerListBtn extends Component {
     const btnStyle = disabled ? 'default' : 'info';
     const tipDesc = disabled ? ' (Nothing to view)' : '';
     const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
-    const className = this.props.isPublic ? '' : '';
+
     return (
       <OverlayTrigger
         placement="top"
         delayShow={500}
         overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
       >
-        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick} disabled={this.props.disabled}>
+        <Button bsSize="xs" bsStyle={btnStyle} onClick={onClick} disabled={this.props.disabled}>
           <i className="fa fa-cube" aria-hidden="true" />{' '}Viewer
         </Button>
       </OverlayTrigger>
@@ -69,7 +69,6 @@ export default class MolViewerListBtn extends Component {
         {
           openModal ?
             <MolViewerListModal
-              config={config}
               handleModalOpen={e => this.handleModalOpen(e)}
               show={openModal}
               title={el.short_label}
diff --git a/app/packs/src/components/viewer/MolViewerListModal.js b/app/packs/src/components/viewer/MolViewerListModal.js
index 0eb43f328..d1f795d32 100644
--- a/app/packs/src/components/viewer/MolViewerListModal.js
+++ b/app/packs/src/components/viewer/MolViewerListModal.js
@@ -1,26 +1,21 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, ButtonGroup, Col, Modal, PanelGroup, Panel, ProgressBar, Nav, NavItem } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
-import MolViewer from 'src/components/viewer/MolViewer';
-import MolViewerSet from 'src/components/viewer/MolViewerSet';
+import { Alert, Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
+import { MolViewer } from 'react-molviewer';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 
 const MolViewerListModal = (props) => {
   const {
-    config, datasetContainer, handleModalOpen, isPublic, show
+    datasetContainer, handleModalOpen, isPublic, show
   } = props;
 
   const [activeKey, setActiveKey] = useState(1);
-  const [newContent, setNewContent] = useState(null);
-  const [progress, setProgress] = useState(0);
   const [selected, setSelected] = useState(() => {
     const ds = datasetContainer[0];
     const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
     return { ...file, dsName: ds.name };
   });
-  const [switchViewer, setSwitchViewer] =
-    useState(config.viewerEndpoint ? MolViewerSet.JSMOL : MolViewerSet.NGL);
 
   const handleFile = (e, attachment, ds) => {
     e.stopPropagation();
@@ -73,63 +68,17 @@ const MolViewerListModal = (props) => {
     );
   };
 
-  const updateNewContent = (data) => {
-    setNewContent(new Blob([data], { type: 'text/plain' }));
-  };
-
-  const convertMolfile = () => {
-    const filePath = isPublic ?
-      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
-      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
-
-    return fetch(filePath)
-      .then((response) => {
-        if (!response.ok) {
-          return null;
-        }
-        const contentLength = response.headers.get('Content-Length');
-        const totalSize = parseInt(contentLength, 10);
-        let downloadedSize = 0;
-
-        const reader = response.body.getReader();
-        const chunks = [];
-
-        const pump = () => reader.read().then(({ done, value }) => {
-          if (done) {
-            return new Blob(chunks);
-          }
-
-          downloadedSize += value.byteLength;
-          const progressPercentage = (downloadedSize / totalSize) * 100;
-          setProgress(progressPercentage);
-
-          chunks.push(value);
-          return pump();
-        });
-
-        return pump();
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  useEffect(() => {
-    convertMolfile().then((result) => {
-      updateNewContent(result);
-    });
-  }, [selected]);
-
   if (show) {
     let modalBody = <Alert bsStyle="danger">This service is offline. Please contact your system administrator.</Alert>;
-    if (newContent) {
-      const viewer = switchViewer === MolViewerSet.NGL ?
-        <ReactNglViewer fileName={selected?.filename} filePath={newContent} /> :
-        (<MolViewer
-          cliendId={config.viewerClientId}
-          endpoint={config.viewerEndpoint}
-          molContent={newContent}
-        />);
+    if (selected?.id) {
+      const viewer = (<MolViewer
+        molContent={isPublic
+          ? `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
+          : `${window.location.origin}/api/v1/attachments/${selected?.id}`}
+        viewType={`file_${selected?.id}`}
+        fnInit={() => LoadingActions.start()}
+        fnCb={() => LoadingActions.stop()}
+      />);
       modalBody = <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div>;
     }
     return (
@@ -137,26 +86,10 @@ const MolViewerListModal = (props) => {
         <Modal.Header onClick={e => e.stopPropagation()} closeButton>
           <Modal.Title>
             Dataset: {selected.dsName} / File: {selected?.filename}
-            <ButtonGroup bsSize="xsmall" className="button-right">
-              <Button
-                active={switchViewer === MolViewerSet.JSMOL}
-                onClick={() => setSwitchViewer(MolViewerSet.JSMOL)}
-                disabled={!config.viewerEndpoint}
-              >
-                JSmol Viewer
-              </Button>
-              <Button
-                active={switchViewer === MolViewerSet.NGL}
-                onClick={() => setSwitchViewer(MolViewerSet.NGL)}
-              >
-                NGL Viewer
-              </Button>
-            </ButtonGroup>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body onClick={e => e.stopPropagation()}>
           <Col md={2} sm={2} lg={2}>
-            { (progress >= 100) ? null : <ProgressBar active now={progress} label="downloading..." /> }
             {list()}
           </Col>
           <Col md={10} sm={10} lg={10}>{modalBody}</Col>
@@ -168,7 +101,6 @@ const MolViewerListModal = (props) => {
 };
 
 MolViewerListModal.propTypes = {
-  config: PropTypes.object.isRequired,
   datasetContainer: PropTypes.array.isRequired,
   handleModalOpen: PropTypes.func.isRequired,
   isPublic: PropTypes.bool.isRequired,
diff --git a/app/packs/src/components/viewer/MolViewerModal.js b/app/packs/src/components/viewer/MolViewerModal.js
index 9f3ddb899..c48b99198 100644
--- a/app/packs/src/components/viewer/MolViewerModal.js
+++ b/app/packs/src/components/viewer/MolViewerModal.js
@@ -1,21 +1,18 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Modal, ProgressBar } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
+import { Modal, ProgressBar } from 'react-bootstrap';
+import { MolViewer } from 'react-molviewer';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
-import MolViewer from 'src/components/viewer/MolViewer';
-import MolViewerSet from 'src/components/viewer/MolViewerSet';
 
 const MolViewerModal = (props) => {
   const {
-    config, fileContent, show, title, handleModalOpen
+    fileContent, title, handleModalOpen, viewType, show
   } = props;
 
   const [newContent, setNewContent] = useState(fileContent);
-  const [progress, setProgress] = useState(null);
-  const [switchViewer, setSwitchViewer] =
-    useState(config.viewerEndpoint ? MolViewerSet.JSMOL : MolViewerSet.NGL);
+  const [progress, setProgress] = useState(0);
 
   const updateNewContent = (data) => {
     setNewContent(new Blob([data], { type: 'text/plain' }));
@@ -31,7 +28,6 @@ const MolViewerModal = (props) => {
         return preProgress + 10;
       });
     }, 1000);
-
     const params = {
       data: { mol: fileContent },
     };
@@ -46,44 +42,30 @@ const MolViewerModal = (props) => {
   };
 
   useEffect(() => {
-    setProgress(0);
     convertMolfile();
+    setProgress(0);
   }, []);
 
   if (show) {
-    const viewer = switchViewer === MolViewerSet.NGL ?
-      <ReactNglViewer fileName={`${title}.mol`} filePath={newContent} /> :
-      (<MolViewer
-        cliendId={config.viewerClientId}
-        endpoint={config.viewerEndpoint}
-        molContent={newContent}
-      />);
+    const viewer = (<MolViewer
+      molContent={newContent}
+      viewType={viewType}
+      fnInit={() => LoadingActions.start()}
+      fnCb={() => LoadingActions.stop()}
+    />);
     return (
       <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={handleModalOpen}>
         <Modal.Header closeButton>
           <Modal.Title>
             {title}
-            <ButtonGroup bsSize="xsmall" className="button-right">
-              <Button
-                active={switchViewer === MolViewerSet.JSMOL}
-                onClick={() => setSwitchViewer(MolViewerSet.JSMOL)}
-                disabled={!config.viewerEndpoint}
-              >
-                JSmol Viewer
-              </Button>
-              <Button
-                active={switchViewer === MolViewerSet.NGL}
-                onClick={() => setSwitchViewer(MolViewerSet.NGL)}
-              >
-                NGL Viewer
-              </Button>
-            </ButtonGroup>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
           {
-            (progress >= 100) ?
-              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div> : <ProgressBar active now={progress} label={`${progress}%`} />
+            progress >= 100 ?
+              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>{viewer}</div>
+              :
+              <ProgressBar active now={progress} label="processing" />
           }
         </Modal.Body>
       </Modal>
@@ -93,11 +75,11 @@ const MolViewerModal = (props) => {
 };
 
 MolViewerModal.propTypes = {
-  config: PropTypes.object.isRequired,
   fileContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   handleModalOpen: PropTypes.func.isRequired,
   show: PropTypes.bool.isRequired,
   title: PropTypes.string,
+  viewType: PropTypes.string.isRequired,
 };
 
 MolViewerModal.defaultProps = { title: 'Structure Viewer' };
diff --git a/app/packs/src/repo/fetchers/GenericSgsFetcher.js b/app/packs/src/repo/fetchers/GenericSgsFetcher.js
deleted file mode 100644
index a331afa99..000000000
--- a/app/packs/src/repo/fetchers/GenericSgsFetcher.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import GenericBaseFetcher from 'src/fetchers/GenericBaseFetcher';
-
-export default class GenericSgsFetcher extends GenericBaseFetcher {
-  static exec(path, method) {
-    return super.exec(`segments/${path}`, method);
-  }
-
-  static execData(params, path) {
-    return super.execData(params, `segments/${path}`);
-  }
-
-  static fetchRepo() {
-    return this.exec('fetch_repo', 'GET');
-  }
-
-  static createRepo(params) {
-    return this.execData(params, 'create_repo_klass');
-  }
-
-  static createKlass(params) {
-    return this.execData(params, 'create_segment_klass');
-  }
-
-  static fetchKlass(elementName = null) {
-    const api = elementName == null
-      ? 'klasses.json'
-      : `klasses.json?element=${elementName}`;
-    return this.exec(api, 'GET');
-  }
-
-  static fetchRepoKlassList() {
-    return this.exec('fetch_repo_generic_template_list', 'GET');
-  }
-
-  static listSegmentKlass(params = {}) {
-    const api = params.is_active === undefined
-      ? 'list_segment_klass.json'
-      : `list_segment_klass.json?is_active=${params.is_active}`;
-    return this.exec(api, 'GET');
-  }
-
-  static syncTemplate(params) {
-    return this.execData(params, 'fetch_repo_generic_template');
-  }
-
-  static updateSegmentKlass(params) {
-    return this.execData(params, 'update_segment_klass');
-  }
-
-  static updateSegmentTemplate(params) {
-    return super.updateTemplate(
-      { ...params, klass: 'SegmentKlass' },
-      'update_segment_template'
-    );
-  }
-}
diff --git a/app/packs/src/repo/fetchers/PublicFetcher.js b/app/packs/src/repo/fetchers/PublicFetcher.js
index 6a989754f..29cb80c8e 100644
--- a/app/packs/src/repo/fetchers/PublicFetcher.js
+++ b/app/packs/src/repo/fetchers/PublicFetcher.js
@@ -282,7 +282,7 @@ export default class PublicFetcher {
     const abortController = new AbortController();
     const timeoutId = setTimeout(() => {
       abortController.abort();
-    }, 5000); // 5 seconds timeout
+    }, 10000); // 10 seconds timeout
 
     return fetch('/api/v1/public/service/convert', {
       signal: abortController.signal, // pass the signal to the fetch function
diff --git a/app/packs/src/repoHome/RepoCommon.js b/app/packs/src/repoHome/RepoCommon.js
index 7ea61372b..1e76370fd 100644
--- a/app/packs/src/repoHome/RepoCommon.js
+++ b/app/packs/src/repoHome/RepoCommon.js
@@ -921,7 +921,7 @@ const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
   return (
     <Row>
       <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={molecule.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} />)}
+        {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={molecule.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} viewType={`mol_mol_${molecule.id}`} />)}
       </Col>
       <Col sm={8} md={8} lg={8}>
         {nameOrFormula}
@@ -988,7 +988,7 @@ const RenderAnalysisHeader = (props) => {
       <br />
       <Row style={rinchiStyle}>
         <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={element.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} />)}
+          {resizableSvg(svgPath, <MolViewerBtn isPublic fileContent={element.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n'} disabled={false} viewType={`mol_el_${element.id}`} />)}
         </Col>
         <Col sm={6} md={6} lg={6}>
           <span className="repo-pub-sample-header">
diff --git a/app/views/pages/jsmol.html.erb b/app/views/pages/jsmol.html.erb
new file mode 100644
index 000000000..e69de29bb
diff --git a/config/initializers/molecule_viewer.rb b/config/initializers/molecule_viewer.rb
deleted file mode 100644
index cf25a9beb..000000000
--- a/config/initializers/molecule_viewer.rb
+++ /dev/null
@@ -1,27 +0,0 @@
-# frozen_string_literal: true
-
-def fetch_molecule_viewer_config
-  molecule_viewer_config = { 'feature' => { 'enabled' => false } }
-#  begin
-#    if ActiveRecord::Base.connection.table_exists?('matrices')
-#      molecule_viewer = Matrice.find_by(name: 'moleculeViewer')
-#      molecule_viewer_config = molecule_viewer_config.merge((molecule_viewer&.configs || {}))
-#      molecule_viewer_config = molecule_viewer_config.merge({ 'feature' => { 'enabled' => (molecule_viewer&.enabled || false) }})
-#    end
-#  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
-#    Rails.logger.error("Error fetching molecule viewer config: #{e.message}")
-#  end
-  ActiveSupport::OrderedOptions.new.tap do |config|
-    config.chembox_client_id = molecule_viewer_config['chembox_client_id']
-    config.chembox_endpoint = molecule_viewer_config['chembox_endpoint']
-    config.feature_enabled = molecule_viewer_config['feature']['enabled'] || false
-    config.viewer_client_id = molecule_viewer_config['viewer_client_id']
-    config.viewer_endpoint = molecule_viewer_config['viewer_endpoint']
-  end
-end
-
-ActiveSupport.on_load(:active_record) do
-  Rails.application.configure do
-    config.molecule_viewer_config = fetch_molecule_viewer_config
-  end
-end
diff --git a/config/routes.rb b/config/routes.rb
index 46bed3a38..76f1992fb 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -86,6 +86,7 @@
 
   get 'home', to: 'pages#home'
   # get 'home', to: 'pages#home'
+  get 'jsmol', to: 'pages#jsmol'
   get 'directive', to: 'pages#directive'
   get 'welcome', to: 'pages#home'
   get 'about', to: 'pages#about'
diff --git a/package.json b/package.json
index bd2d4cd7f..7da05d0b7 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "react-json-editor-ajrm": "^2.5.10",
     "react-markdown": "^6.0.2",
     "react-modal-resizable-draggable": "^0.1.6",
-    "react-nglviewer": "^0.6.0",
+    "react-molviewer": "^1.0.0",
     "react-notification-system": "^0.2.7",
     "react-papaparse": "^3.17.2",
     "react-pdf": "^5.3.0-beta",
diff --git a/package_postinstall.sh b/package_postinstall.sh
index ca1bf6298..fd525085e 100755
--- a/package_postinstall.sh
+++ b/package_postinstall.sh
@@ -8,7 +8,6 @@ set -euo pipefail
 src5=$(node -e 'console.log(require.resolve("ag-grid-community/styles/ag-grid.css"))')
 src6=$(node -e 'console.log(require.resolve("ag-grid-community/styles/ag-grid-no-native-widgets.css"))')
 
-
 YEL='\033[0;33m'
 NOC='\033[0m'
 yellow() {
@@ -32,3 +31,10 @@ node_modules_folder="$(node -e 'const p = require.resolve("@svgedit/svgcanvas");
 rm -f ./public/svgedit && ln -s "$node_modules_folder"/svgedit/dist/editor ./public/svgedit
 
 yellow "Finished adding symbolic link to svg editor in public folder"
+
+
+# move molviewer to public folder
+yellow "Adding symbolic link to jsmol in public folder"
+node_modules_folder="$(node -e 'const p = require.resolve("react"); console.log(p.slice(0, p.indexOf("react")))')"
+rm -rf ./public/jsmol && ln -s "$node_modules_folder"/react-molviewer/dist/jsmol ./public/jsmol
+yellow "Finished adding symbolic link to jsmol in public folder"
diff --git a/yarn.lock b/yarn.lock
index 92c6cfe25..36f77e8c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3407,6 +3407,11 @@
   resolved "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
+"@remix-run/router@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.0.tgz#7e29c4ee85176d9c08cb0f4456bff74d092c5065"
+  integrity sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==
+
 "@restart/hooks@^0.4.7":
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.9.tgz#ad858fb39d99e252cccce19416adc18fc3f18fcb"
@@ -5221,6 +5226,24 @@ body-parser@1.19.2:
     raw-body "2.4.3"
     type-is "~1.6.18"
 
+body-parser@1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
+  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.1"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
 bonjour-service@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.11.tgz#5418e5c1ac91c89a406f853a942e7892829c0d89"
@@ -5653,11 +5676,6 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chroma-js@^1.3.7:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
-  integrity sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==
-
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz"
@@ -6091,6 +6109,11 @@ cookie@0.4.2:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
 cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz"
@@ -7186,6 +7209,11 @@ delegates@^1.0.0:
   resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
   integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 depd@^1.1.2, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
@@ -7196,6 +7224,11 @@ dequal@^2.0.2:
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz"
@@ -8063,6 +8096,43 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+express@^4.18.2:
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
+  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.1"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.5.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.2.0"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.11.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz"
@@ -8262,6 +8332,19 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz"
@@ -9009,6 +9092,17 @@ http-errors@1.8.1:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.1"
 
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
 http-errors@~1.6.2:
   version "1.6.3"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz"
@@ -11305,16 +11399,6 @@ neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-ngl@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ngl/-/ngl-2.2.0.tgz#170cbfb1997c9a05b8d42c7be11d388da9c55631"
-  integrity sha512-aPJb1zFHzHBZl8u1Dl82LiyuulEzSEzMwdpuugyCHxQ09KuXxlIQD5JJo3dKUbMyU5yqtiOScVWLmu6/Uw27RQ==
-  dependencies:
-    chroma-js "^1.3.7"
-    signals "^1.0.0"
-    sprintf-js "^1.1.2"
-    three "^0.118.0"
-
 nise@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.4.tgz#491ce7e7307d4ec546f5a659b2efe94a18b4bbc0"
@@ -11796,6 +11880,13 @@ omit.js@^1.0.2:
   dependencies:
     babel-runtime "^6.23.0"
 
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz"
@@ -12435,6 +12526,13 @@ qrcode.react@^0.6.1:
   dependencies:
     qr.js "0.0.0"
 
+qs@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@6.9.7:
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
@@ -12551,6 +12649,16 @@ raw-body@2.4.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 raw-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz"
@@ -13368,6 +13476,19 @@ react-modal-resizable-draggable@^0.1.6:
     react-motion "^0.5.2"
     react-transition-group "^4.4.1"
 
+react-molviewer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-molviewer/-/react-molviewer-1.0.0.tgz#08e1ae5919849541cb4c5e61d3886c9fefd6eccc"
+  integrity sha512-sHWjtTm//nOf5nUtGJz4JL7heyYg1Cbwf8ittbpTCHruysQb6FTAfCNpPKp//6czg7KJK134QkZNal33MZQ9Dg==
+  dependencies:
+    express "^4.18.2"
+    numeral "^2.0.6"
+    prop-types "^15.8.1"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    react-router-dom "^6.14.1"
+    uuid "^9.0.0"
+
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz"
@@ -13377,13 +13498,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-nglviewer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.6.0.tgz#dfb3987c7f565e1abc05997613d6271c5aefed10"
-  integrity sha512-7d0DdCGriGhl/OAAM/0L1DFPa9R4BfoN520NKjL/B254lOT76c/8Lx9lrzf0HNBeYGz+/UAov0tEUPdmk0KjZw==
-  dependencies:
-    ngl "^2.1.1"
-
 react-notification-system@^0.2.17, react-notification-system@^0.2.7:
   version "0.2.17"
   resolved "https://registry.npmjs.org/react-notification-system/-/react-notification-system-0.2.17.tgz"
@@ -13540,6 +13654,21 @@ react-resizable-box@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-resizable-box/-/react-resizable-box-2.1.0.tgz#8bba081b5adbe2af0be4768c4f1de6a84a423aad"
   integrity sha512-0U3kQfVyKnxCPdu/QWC4n/W8DvJmy+EGdq2lBSq2KvEnzhC1E0d/whZCz7PQ/Lq20RdPbHvn5/A2BtQgwcyCFg==
 
+react-router-dom@^6.14.1:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.0.tgz#7b9527a1e29c7fb90736a5f89d54ca01f40e264b"
+  integrity sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+    react-router "6.20.0"
+
+react-router@6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.0.tgz#4275a3567ecc55f7703073158048db10096bb539"
+  integrity sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+
 "react-select3@npm:react-select@^3.1.1":
   version "3.2.0"
   resolved "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz"
@@ -14502,6 +14631,25 @@ send@0.17.2:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
 serialize-javascript@6.0.0, serialize-javascript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz"
@@ -14532,6 +14680,16 @@ serve-static@1.14.2:
     parseurl "~1.3.3"
     send "0.17.2"
 
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.18.0"
+
 set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
@@ -14559,7 +14717,7 @@ setprototypeof@1.1.0:
 
 setprototypeof@1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
 sha256@^0.2.0:
@@ -14618,11 +14776,6 @@ signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-signals@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/signals/-/signals-1.0.0.tgz#65f0c1599352b35372ecaae5a250e6107376ed69"
-  integrity sha512-dE3lBiqgrgIvpGHYBy6/kiYKfh0HXRmbg0ocakBKiOefbal6ZeTtNlQlxsu9ADkNzv5OmRwRKu+IaTPSqJdZDg==
-
 sinon@^15.2.0:
   version "15.2.0"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-15.2.0.tgz#5e44d4bc5a9b5d993871137fd3560bebfac27565"
@@ -14863,11 +15016,6 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-sprintf-js@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
-  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
@@ -14941,6 +15089,11 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
@@ -15237,11 +15390,6 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-three@^0.118.0:
-  version "0.118.3"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.118.3.tgz#c0bf8c10a68155478f12f4ccac2ff979526a4a0a"
-  integrity sha512-ijECXrNzDkHieoeh2H69kgawTGH8DiamhR4uBN8jEM7VHSKvfTdEvOoHsA8Aq7dh7PHAxhlqBsN5arBI3KixSw==
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"

From 4981bf14f159390519a26b762761a93c29e373d2 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 3 Jan 2024 10:56:40 +0100
Subject: [PATCH 202/258] do not show the image for publications where no
 preview available

---
 app/packs/src/components/common/ImageModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 2f19c0174..4f49c3afb 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -122,7 +122,7 @@ export default class ImageModal extends Component {
     } = this.props;
     const { pageIndex, numOfPages } = this.state;
     if (!hasPop) {
-      return (<div className="preview-table"><img src={previewObject.src} alt="" style={{ cursor: 'default', ...imageStyle }} /></div>);
+      return (<div className="preview-table"><img src={previewObject.src} alt="" {...imageStyle || defaultImageStyle} /></div>);
     }
 
     return (

From 3d120e466b1c259b9a7f286e7fc89534482dcf49 Mon Sep 17 00:00:00 2001
From: Pei-Chi Huang <pei-chi.huang@kit.edu>
Date: Wed, 3 Jan 2024 12:05:17 +0000
Subject: [PATCH 203/258] analysis definedTerms submission - user labels and
 elemental composition

---
 app/api/chemotion/repository_api.rb    | 27 +++++++++++++++
 app/models/concerns/metadata_jsonld.rb | 48 +++++++++++++++++++-------
 lib/import/import_collections.rb       | 16 +++++++--
 lib/ontologies/tib_service.rb          | 22 ++++++++++++
 4 files changed, 97 insertions(+), 16 deletions(-)
 create mode 100644 lib/ontologies/tib_service.rb

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 417803588..85b48fd08 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -100,6 +100,9 @@ def duplicate_sample(sample = @sample, analyses = @analyses, parent_publication_
           new_sample.collections << @embargo_collection unless @embargo_collection.nil?
           new_sample.save!
           new_sample.copy_segments(segments: sample.segments, current_user_id: current_user.id) if sample.segments
+          duplicate_residues(new_sample, sample) if sample.residues
+          duplicate_elemental_compositions(new_sample, sample) if sample.elemental_compositions
+          duplicate_user_labels(new_sample, sample) ## if sample.tag.taggable_data['user_labels']
           unless @literals.nil?
             lits = @literals&.select { |lit| lit['element_type'] == 'Sample' && lit['element_id'] == sample.id }
             duplicate_literals(new_sample, lits)
@@ -287,6 +290,30 @@ def prepare_reaction_data
           pub
         end
 
+        def duplicate_user_labels(newSample, originalSample)
+          user_labels = originalSample.tag&.taggable_data.dig('user_labels')
+          return if user_labels.nil?
+
+          tag = newSample.tag
+          taggable_data = tag.taggable_data || {}
+          taggable_data['user_labels'] = user_labels
+          tag.update!(taggable_data: taggable_data)
+        end
+
+        def duplicate_elemental_compositions(newSample, originalSample)
+          originalSample&.elemental_compositions&.each do |ec|
+            newComposition = ElementalComposition.find_or_create_by(sample_id: newSample.id, composition_type: ec.composition_type)
+            newComposition.update_columns(data: ec.data, loading: ec.loading)
+          end
+        end
+
+        def duplicate_residues(newSample, originalSample)
+          originalSample&.residues&.each do |res|
+            newRes = Residue.find_or_create_by(sample_id: newSample.id, residue_type: res.residue_type)
+            newRes.update_columns(custom_info: res.custom_info)
+          end
+        end
+
         def duplicate_literals(element, literals)
           literals&.each do |lit|
             attributes = {
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 664e91eaf..4c2f5abe3 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -60,11 +60,12 @@ def json_ld_data_catalog(pub = self)
     json
   end
 
-  def json_ld_defined_term_set(name,url)
+  def json_ld_defined_term_set(name, url, id=nil)
     json = {}
     json['@type'] = 'DefinedTermSet'
-    json['name'] = name
-    json['url'] = url
+    json['@id'] = id if id.present?
+    json['name'] = name if name.present?
+    ## json['url'] = url if url.present?
     json
   end
 
@@ -72,8 +73,8 @@ def json_ld_defined_term(name, alternate_name, url, defined_term_set, id)
     json = {}
     json['@type'] = 'DefinedTerm'
     json['name'] = name
-    json['alternateName'] = alternate_name
-    json['url'] = url
+    json['alternateName'] = alternate_name if alternate_name.present?
+    json['url'] = url if url.present?
     json['inDefinedTermSet'] = defined_term_set
     json['@id'] = id
     json
@@ -89,17 +90,19 @@ def json_ld_person(id, given_name, family_name)
   end
 
   def data_catalog_keywords(pub = self)
-    sio = json_ld_defined_term_set('Semanticscience Integrated Ontology', 'https://raw.githubusercontent.com/micheldumontier/semanticscience/master/ontology/sio/release/sio-release.owl')
-    ncit = json_ld_defined_term_set('NCI Thesaurus OBO Edition', 'http://purl.obolibrary.org/obo/ncit/releases/2022-08-19/ncit.owl')
-    chmo = json_ld_defined_term_set('Chemical Methods Ontology', 'http://purl.obolibrary.org/obo/chmo/releases/2022-04-19/chmo.owl')
+    sio = json_ld_defined_term_set('Semanticscience Integrated Ontology', nil, 'http://semanticscience.org/ontology/sio.owl')
+    ncit = json_ld_defined_term_set('NCI Thesaurus OBO Edition', nil, 'http://purl.obolibrary.org/obo/ncit.owl')
+    chmo = json_ld_defined_term_set('Chemical Methods Ontology', nil, 'http://purl.obolibrary.org/obo/chmo.owl')
+
+##    def json_ld_defined_term(name, alternate_name, url, defined_term_set, id)
 
-    sample = json_ld_defined_term('sample', nil, 'http://semanticscience.org/resource/SIO_001050', sio, 'SIO:001050')
-    reaction = json_ld_defined_term('chemical reaction', nil, 'http://semanticscience.org/resource/SIO_010345', sio, 'SIO:010345')
-    analytical_chemistry = json_ld_defined_term('Analytical Chemistry',['Chemistry, Analytical'], 'http://purl.obolibrary.org/obo/NCIT_C16415', ncit, 'NCIT:C16415')
+    sample = json_ld_defined_term('sample', nil, nil, sio, 'http://semanticscience.org/resource/SIO_001050')
+    reaction = json_ld_defined_term('chemical reaction', nil, nil, sio, 'http://semanticscience.org/resource/SIO_010345')
+    analytical_chemistry = json_ld_defined_term('Analytical Chemistry',['Chemistry, Analytical'], nil, ncit, 'http://purl.obolibrary.org/obo/NCIT_C16415')
 
-#    nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000591', chmo, 'CHMO:0000591')
+#    nmr = json_ld_defined_term('nuclear magnetic resonance spectroscopy', ['NMR', 'NMR spectroscopy', 'nuclear magnetic resonance (NMR) spectroscopy'], nil, chmo, 'http://purl.obolibrary.org/obo/CHMO_0000591')
 #    ms = json_ld_defined_term('mass spectrometry', ['MS'], 'http://purl.obolibrary.org/obo/CHMO_0000470', chmo, 'CHMO:0000470')
-#    ir = json_ld_defined_term('infrared absorption spectroscopy',['infrared (IR) spectroscopy, IR, infra-red absorption spectroscopy, IR spectroscopy, IR absorption spectroscopy, infrared spectroscopy'], 'http://purl.obolibrary.org/obo/CHMO_0000630', chmo, 'CHMO:0000630')
+#    ir = json_ld_defined_term('infrared absorption spectroscopy',['infrared (IR) spectroscopy, IR, infra-red absorption spectroscopy, IR spectroscopy, IR absorption spectroscopy, infrared spectroscopy'], nil, chmo, 'http://purl.obolibrary.org/obo/CHMO_0000630')
 
     arr = [sample, reaction, analytical_chemistry]
     arr
@@ -259,6 +262,8 @@ def json_ld_analysis(pub = self, root = true)
     json['publisher'] = json_ld_publisher
     json['license'] = pub.rights_data[:rightsURI]
     json['name'] = pub.element.extended_metadata['kind'] || '' if pub&.element&.extended_metadata.present?
+    measureInfo = json_ld_measurement_technique(pub) if pub&.element&.extended_metadata.present?
+    json['measurementTechnique'] = measureInfo if measureInfo.present?
     json['creator'] = json_ld_authors(pub.taggable_data)
     json['author'] = json['creator']
     json['description'] = json_ld_analysis_description(pub)
@@ -266,6 +271,23 @@ def json_ld_analysis(pub = self, root = true)
     json
   end
 
+  def json_ld_measurement_technique(pub = self)
+    json = {}
+    term_id = pub.element.extended_metadata['kind']&.split('|')&.first&.strip
+    res = Ontologies::TibService.load_term_info('CHMO', term_id)
+    data = (res.ok? && res.dig('_embedded', 'terms').length > 0 && res.dig('_embedded', 'terms').first) || {}
+    return {} if data.blank?
+
+    json['@type'] = 'DefinedTerm'
+    json['@id'] = data['iri'] if data['iri'].present?
+    json['termCode'] = data['obo_id'] if data['obo_id'].present?
+    json['name'] = data['label'] if data['label'].present?
+    json['alternateName'] = data['synonyms'] if data['synonyms'].present?
+    json['url'] = "https://terminology.nfdi4chem.de/ts/ontologies/" + data['ontology_name'] + "/terms?iri=" + data['iri'] if data['ontology_name'] && data['iri'].present?
+    json['inDefinedTermSet'] = json_ld_defined_term_set(data['ontology_name'], nil, data['ontology_iri'])
+    json
+  end
+
   def json_ld_analysis_description(pub)
     #xml_data = Nokogiri::XML(metadata_xml)
     #desc = xml_data.search('description')&.text&.strip
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 62970ae15..8a56a72d9 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -89,6 +89,7 @@ def import
         import_collections if @gt == false
         import_samples
         import_residues
+        ## import_elemental_compositions if @gt == true
         import_reactions
         import_reactions_samples
  #       import_elements if @gt == false
@@ -299,19 +300,28 @@ def import_samples
 
     def import_residues
       @data.fetch('Residue', {}).each do |uuid, fields|
-        # create the sample
         residue = Residue.create!(fields.slice(
           'residue_type',
           'custom_info',
         ).merge(
           sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id')),
         ))
-
-        # add reaction to the @instances map
         update_instances!(uuid, residue)
       end
     end
 
+    def import_elemental_compositions
+      @data.fetch('ElementalComposition', {}).each do |uuid, fields|
+        ec = ElementalComposition.find_or_create_by!(fields.slice(
+          'composition_type',
+        ).merge(
+          sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id'))
+        ))
+        ec.update_columns(fields.slice('data', 'loading'))
+        update_instances!(uuid, ec)
+      end
+    end
+
     def import_reactions
       @data.fetch('Reaction', {}).each do |uuid, fields|
         # create the sample
diff --git a/lib/ontologies/tib_service.rb b/lib/ontologies/tib_service.rb
new file mode 100644
index 000000000..c255917ed
--- /dev/null
+++ b/lib/ontologies/tib_service.rb
@@ -0,0 +1,22 @@
+module Ontologies
+  module TibService
+    include HTTParty
+    ONTOLOGY_API = 'service.tib.eu/ts4tib/api/'
+
+    def self.http_s
+      "https://" # Rails.env.test? && "http://" || "https://"
+    end
+
+    def self.options
+      { :timeout => 10, :headers => {'Content-Type' => 'text/json'}  }
+    end
+
+    def self.load_term_info(schema, term_id)
+      link = http_s + ONTOLOGY_API + '/ontologies/' + schema + '/terms?obo_id=' + term_id
+      response = HTTParty.get(link, options)
+    rescue StandardError => e
+      Rails.logger.error ["API call", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
+      nil
+    end
+  end
+end

From 61fd144ea73ceaf1d2130f7ce67a663f6acaba0f Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 3 Jan 2024 13:34:16 +0100
Subject: [PATCH 204/258] upgrade lib

---
 package.json |  2 +-
 yarn.lock    | 29 +++++++----------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 7da05d0b7..20f578f5b 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "aviator": "v0.6.1",
     "base-64": "^0.1.0",
     "chem-generic-ui": "^1.0.10",
-    "chem-generic-ui-viewer": "~0.0.4",
+    "chem-generic-ui-viewer": "^1.0.2",
     "chemotion-converter-client": "0.5.0",
     "citation-js": "0.6.8",
     "classnames": "^2.2.5",
diff --git a/yarn.lock b/yarn.lock
index 36f77e8c2..10b1ceb1f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4506,11 +4506,6 @@ adler-32@~1.3.0:
   dependencies:
     printj "~1.2.2"
 
-ag-grid-community@^27.3.0:
-  version "27.3.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-27.3.0.tgz#b1e94a58026aaf2f0cd7920e35833325b5e762c7"
-  integrity sha512-R5oZMXEHXnOLrmhn91J8lR0bv6IAnRcU6maO+wKLMJxffRWaAYFAuw1jt7bdmcKCv8c65F6LEBx4ykSOALa9vA==
-
 ag-grid-community@^28.2.1:
   version "28.2.1"
   resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.2.1.tgz#50778cb2254ee79497222781909d8364007dd91e"
@@ -4521,13 +4516,6 @@ ag-grid-community@^29.0.0:
   resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-29.3.5.tgz#16897896d10fa3ecac79279aad50d3aaa17c5f33"
   integrity sha512-LxUo21f2/CH31ACEs1C7Q/ggGGI1fQPSTB4aY5OThmM+lBkygZ7QszBE8jpfgWOIjvjdtcdIeQbmbjkHeMsA7A==
 
-ag-grid-react@^27.3.0:
-  version "27.3.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
-  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
-  dependencies:
-    prop-types "^15.8.1"
-
 ag-grid-react@^28.2.1:
   version "28.2.1"
   resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.1.tgz#c38585b8f165a5cf9343eab6994c06855f5b2caf"
@@ -5591,25 +5579,22 @@ cheerio@^1.0.0-rc.3:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
-chem-generic-ui-viewer@~0.0.4:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/chem-generic-ui-viewer/-/chem-generic-ui-viewer-0.0.8.tgz#0a84df55a0967ff3953bec121bca638871c41a59"
-  integrity sha512-unrH4weuNB0Att0KA6X77jjegOny9kodDdIt/XM9GxAC10zJitpd31742/JU0ajUUPHQOjHJZSmAaclcd2QP0Q==
+chem-generic-ui-viewer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/chem-generic-ui-viewer/-/chem-generic-ui-viewer-1.0.2.tgz#769e0af781b6ee0cd113cdf5b0e690ac835a3835"
+  integrity sha512-lKQF5jPtAdAYs5Q4Q8vvdhuTd3IP7HB77QOisuR8DT/ufPkmKPK+K3Mv7qrWAB6p8qB91eg9dVZCtCpB8WgDgw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.1.2"
     "@fortawesome/free-regular-svg-icons" "^6.1.2"
     "@fortawesome/free-solid-svg-icons" "^6.1.2"
     "@fortawesome/react-fontawesome" "^0.2.0"
-    ag-grid-community "^27.3.0"
-    ag-grid-react "^27.3.0"
+    chem-units "^0.0.5"
     lodash "^4.17.21"
     numeral "^2.0.6"
     prop-types "^15.8.1"
-    react-redux "^7.2.4"
+    react "^17.0.2"
+    react-dom "^17.0.2"
     react-select "5.2.2"
-    redux "^4.1.0"
-    redux-immutable "^4.0.0"
-    redux-thunk "^2.0.0"
     uuid "^8.3.2"
 
 chem-generic-ui@^1.0.10:

From ab8617deffa6c376503aad3b866eb44a7a395b92 Mon Sep 17 00:00:00 2001
From: f-idiris <112618970+f-idiris@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:28:20 +0100
Subject: [PATCH 205/258] feat: report peaks from XRD (#1614)

---
 .../apps/mydb/elements/details/ViewSpectra.js | 21 ++++++++++++++-----
 app/packs/src/utilities/quillToolbarSymbol.js |  7 +++++++
 package.json                                  |  2 +-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 4c28e4c9c..c75acee04 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -207,7 +207,7 @@ class ViewSpectra extends React.Component {
 
   formatPks({
     peaks, shift, layout, isAscend, decimal, body,
-    isIntensity, integration, curveSt
+    isIntensity, integration, curveSt, waveLength
   }) {
     const layoutOpsObj = SpectraOps[layout];
     if (!layoutOpsObj) {
@@ -228,6 +228,7 @@ class ViewSpectra extends React.Component {
     const { jcamp } = this.getContent();
     const { entity } = FN.buildData(jcamp);
     const { features } = entity;
+    const { temperature } = entity;
     const { observeFrequency } = Array.isArray(features)
       ? features[0]
       : (features.editPeak || features.autoPeak);
@@ -239,7 +240,16 @@ class ViewSpectra extends React.Component {
       : (features.editPeak || features.autoPeak);
     const boundary = { maxY, minY };
     const mBody = body || FN.peaksBody({
-      peaks, layout, decimal, shift, isAscend, isIntensity, boundary, integration: selectedIntegration
+      peaks,
+      layout,
+      decimal,
+      shift,
+      isAscend,
+      isIntensity,
+      boundary,
+      integration: selectedIntegration,
+      waveLength,
+      temperature
     });
 
     const { label, value, name } = selectedShift.ref;
@@ -334,7 +344,7 @@ class ViewSpectra extends React.Component {
 
   writeCommon({
     peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
-    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt
+    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt, waveLength
   }, isMpy = false) {
     const { sample, handleSampleChanged } = this.props;
     const si = this.getSpcInfo();
@@ -355,7 +365,8 @@ class ViewSpectra extends React.Component {
         body,
         isIntensity,
         integration,
-        curveSt
+        curveSt,
+        waveLength
       });
     }
 
@@ -372,7 +383,7 @@ class ViewSpectra extends React.Component {
 
     const cb = () => (
       this.saveOp({
-        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt
+        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt, waveLength
       })
     );
     handleSampleChanged(sample, cb);
diff --git a/app/packs/src/utilities/quillToolbarSymbol.js b/app/packs/src/utilities/quillToolbarSymbol.js
index 2009de98f..9d1de5a5a 100644
--- a/app/packs/src/utilities/quillToolbarSymbol.js
+++ b/app/packs/src/utilities/quillToolbarSymbol.js
@@ -380,6 +380,12 @@ const opsEmmissionHead = () => (
   ]
 );
 
+const opsXRDHead = () => (
+  [
+    { insert: 'XRD ' },
+  ]
+);
+
 const opsCommonHead = () => (
   []
 );
@@ -400,6 +406,7 @@ const SpectraOps = {
   Emissions: { head: opsEmmissionHead, tail: opsCommonTail },
   'DLS ACF': { head: opsCommonHead, tail: opsCommonTail },
   'DLS intensity': { head: opsDLSIntensityHead, tail: opsCommonTail },
+  'X-RAY DIFFRACTION': { head: opsXRDHead, tail: opsCommonHead }
 };
 
 const reactionAnalysesMacros = {
diff --git a/package.json b/package.json
index 20f578f5b..cb9bc20f6 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
     "@complat/chem-spectra-client": "1.0.0-rc18",
-    "@complat/react-spectra-editor": "1.0.0-rc18",
+    "@complat/react-spectra-editor": "1.0.0-rc19",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",

From ee4d105dd95f7f97367e812f5404a2ab6d61a0d4 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Tue, 14 Nov 2023 12:29:32 +0100
Subject: [PATCH 206/258] feat(spectra): update chemspectra backend to read
 some jcamp v6 (#1603)

Co-authored-by: Lan Le <lan.le@kit.edu>
---
 .service-dependencies | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.service-dependencies b/.service-dependencies
index cdd29a8ea..121cdf7a7 100644
--- a/.service-dependencies
+++ b/.service-dependencies
@@ -1,5 +1,5 @@
 #syntax=v1
 CONVERTER=ComPlat/chemotion-converter-app@v1.1.0
 KETCHER=ptrxyz/chemotion-ketchersvc@main
-SPECTRA=ComPlat/chem-spectra-app@0.13.5
+SPECTRA=ComPlat/chem-spectra-app@0.14.0
 NMRIUMWRAPPER=NFDI4Chem/nmrium-react-wrapper@v0.4.0

From ecccbd05bacf4e290ec037a5e9dacd625d0b5efc Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Thu, 16 Nov 2023 06:40:34 +0100
Subject: [PATCH 207/258] feat: display mail collector address as info in the
 Inbox (#1529)

send mail collector address to client if mail collector is configured

(the last registered alias over the ui api)

add info button for collecting file per email in inbox modal

click to copy collector address  to clipboard

---------

Co-authored-by: nh9378 <basha.adam@kit.edu>
---
 app/api/chemotion/ui_api.rb                 |  5 +++
 app/packs/src/apps/mydb/inbox/InboxModal.js | 48 ++++++++++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/app/api/chemotion/ui_api.rb b/app/api/chemotion/ui_api.rb
index beade54d3..50bc5ad1e 100644
--- a/app/api/chemotion/ui_api.rb
+++ b/app/api/chemotion/ui_api.rb
@@ -14,6 +14,10 @@ class UiAPI < Grape::API
         sfn_config = Rails.configuration.try(:sfn_config).try(:provider)
         converter_config = Rails.configuration.try(:converter).try(:url)
         radar_config = Rails.configuration.try(:radar).try(:url)
+        collector_config = Rails.configuration.try(:datacollectors)
+        collector_address = collector_config.present? && (
+          collector_config.dig(:mailcollector, :aliases, -1) || collector_config.dig(:mailcollector, :mail_address)
+        )
 
         {
           has_chem_spectra: has_chem_spectra,
@@ -25,6 +29,7 @@ class UiAPI < Grape::API
           has_converter: converter_config.present?,
           has_radar: radar_config.present?,
           molecule_viewer: Matrice.molecule_viewer,
+          collector_address: collector_address.presence,
         }
       end
     end
diff --git a/app/packs/src/apps/mydb/inbox/InboxModal.js b/app/packs/src/apps/mydb/inbox/InboxModal.js
index 7aa399420..95d614409 100644
--- a/app/packs/src/apps/mydb/inbox/InboxModal.js
+++ b/app/packs/src/apps/mydb/inbox/InboxModal.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import Draggable from 'react-draggable';
 import {
-  Badge, Button, Panel, Glyphicon, Pagination
+  Badge, Button, Panel, Glyphicon, Pagination, OverlayTrigger, Tooltip
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import InboxStore from 'src/stores/alt/stores/InboxStore';
+import UIStore from 'src/stores/alt/stores/UIStore';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 
 import DeviceBox from 'src/apps/mydb/inbox/DeviceBox';
 import UnsortedBox from 'src/apps/mydb/inbox/UnsortedBox';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 export default class InboxModal extends React.Component {
   constructor(props) {
@@ -30,6 +32,7 @@ export default class InboxModal extends React.Component {
     };
 
     this.onChange = this.onChange.bind(this);
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
     this.onClickInbox = this.onClickInbox.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleMouseMove = this.handleMouseMove.bind(this);
@@ -38,6 +41,7 @@ export default class InboxModal extends React.Component {
 
   componentDidMount() {
     InboxStore.listen(this.onChange);
+    UIStore.listen(this.onUIStoreChange);
     InboxActions.fetchInboxCount();
   }
 
@@ -58,6 +62,13 @@ export default class InboxModal extends React.Component {
     this.setState({ visible: state.inboxModalVisible });
   }
 
+  onUIStoreChange(state) {
+    const { collectorAddress } = state;
+    if (collectorAddress !== this.state.collectorAddress) {
+      this.setState({ collectorAddress });
+    }
+  }
+
   onClickInbox() {
     const {
       inboxVisible, inbox, currentPage, itemsPerPage
@@ -184,9 +195,41 @@ export default class InboxModal extends React.Component {
     );
   }
 
+  infoMessage() {
+    const { collectorAddress } = this.state;
+    return (
+      <Tooltip id="assignButton">
+        You can send yourself files to your inbox by emailing them from your registered email to the following email address:
+        { ' ' }
+        {collectorAddress}
+        { ' ' }
+        . Click to copy the address to your clipboard.
+      </Tooltip>
+    );
+  }
+
+  collectorAddressInfoButton() {
+    const { collectorAddress } = this.state;
+
+    return (
+      <CopyToClipboard text={collectorAddress}>
+        <OverlayTrigger placement="top" overlay={this.infoMessage()}>
+          <Button
+            bsSize="xsmall"
+            className="btn btn-circle btn-sm btn-info button-right"
+          >
+            <Glyphicon glyph="info-sign" />
+          </Button>
+        </OverlayTrigger>
+      </CopyToClipboard>
+    );
+  }
+
   render() {
     const { showCollectionTree } = this.props;
-    const { visible, inboxVisible, numberOfAttachments } = this.state;
+    const {
+      visible, inboxVisible, numberOfAttachments, collectorAddress
+    } = this.state;
 
     const panelClass = showCollectionTree ? 'small-col col-md-6' : 'small-col col-md-5';
     const inboxDisplay = inboxVisible ? '' : 'none';
@@ -240,6 +283,7 @@ export default class InboxModal extends React.Component {
                 >
                   <Glyphicon bsSize="small" glyph="refresh" />
                 </Button>
+                {collectorAddress ? this.collectorAddressInfoButton() : null}
               </Panel.Heading>
               <Panel.Body>
                 <div>

From cf1e61a84a979a4d398a8d3c49cb3b06773b4143 Mon Sep 17 00:00:00 2001
From: Pei Chi Huang <pei-chi.huang@kit.edu>
Date: Thu, 16 Nov 2023 06:41:31 +0100
Subject: [PATCH 208/258] feat: drag samples and elements to segment (#1623)

---
 Gemfile                                       |  2 +-
 Gemfile.lock                                  |  4 +-
 app/models/concerns/element_codes.rb          |  7 +-
 .../components/generic/GenericContainer.js    |  2 +-
 .../components/generic/GenericElDetails.js    | 10 +--
 .../src/components/navigation/UserAuth.js     |  8 ---
 .../components/navigation/search/Search.js    |  3 +-
 app/policies/element_policy.rb                |  2 +-
 package.json                                  |  2 +-
 yarn.lock                                     | 65 +++++++++++++++----
 10 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/Gemfile b/Gemfile
index f82ad443a..f9b62eaa9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -58,7 +58,7 @@ gem 'kaminari'
 gem 'kaminari-grape'
 gem 'ketcherails', git: 'https://github.com/complat/ketcher-rails.git', branch: 'upgrade-to-rails-6'
 
-gem 'labimotion', '1.0.18'
+gem 'labimotion', '1.0.19'
 
 gem 'mimemagic', '0.3.10'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 867854265..0e2827b03 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -446,7 +446,7 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    labimotion (1.0.18)
+    labimotion (1.0.19)
       rails (~> 6.1.7)
     latex-decode (0.4.0)
     launchy (2.5.0)
@@ -911,7 +911,7 @@ DEPENDENCIES
   kaminari
   kaminari-grape
   ketcherails!
-  labimotion (= 1.0.18)
+  labimotion (= 1.0.19)
   launchy
   listen
   memory_profiler
diff --git a/app/models/concerns/element_codes.rb b/app/models/concerns/element_codes.rb
index 2e7aab6fc..3ceda5f43 100644
--- a/app/models/concerns/element_codes.rb
+++ b/app/models/concerns/element_codes.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ElementCodes
   extend ActiveSupport::Concern
 
@@ -8,8 +10,9 @@ module ElementCodes
     def source_class() @source_class||=self.class.name.demodulize.underscore end
 
     def code_logs
-       CodeLog.where(source: source_class).
-         where(source_id: id).order(created_at: 'DESC')
+      return [] if source_class == 'container' && containable_type == 'Labimotion::Element'
+
+      CodeLog.where(source: source_class).where(source_id: id).order(created_at: 'DESC')
     end
 
     def code_log() code_logs.first end
diff --git a/app/packs/src/components/generic/GenericContainer.js b/app/packs/src/components/generic/GenericContainer.js
index dccacc193..0821e3eb7 100644
--- a/app/packs/src/components/generic/GenericContainer.js
+++ b/app/packs/src/components/generic/GenericContainer.js
@@ -33,7 +33,7 @@ const headerBtnGroup = (props) => {
   const { hasChemSpectra } = UIStore.getState();
   const toggleSpectraModal = (e) => {
     SpectraActions.ToggleModal();
-    SpectraActions.LoadSpectra.defer(spcInfo);
+    SpectraActions.LoadSpectra.defer(spcInfos);
   };
   return (
     <div className="upper-btn">
diff --git a/app/packs/src/components/generic/GenericElDetails.js b/app/packs/src/components/generic/GenericElDetails.js
index 1344b7fa2..f5e3b9346 100644
--- a/app/packs/src/components/generic/GenericElDetails.js
+++ b/app/packs/src/components/generic/GenericElDetails.js
@@ -358,7 +358,7 @@ export default class GenericElDetails extends Component {
       genericEl.can_copy && !genericEl.isNew ? (
         <CopyElementModal element={genericEl} defCol={defCol} />
       ) : null;
-    const saveBtnDisplay = genericEl.changed ? '' : 'none';
+    const saveBtnDisplay = genericEl.changed && genericEl.can_update ? '' : 'none';
     const datetp = `Created at: ${genericEl.created_at} \n Updated at: ${genericEl.updated_at}`;
     return (
       <div>
@@ -410,12 +410,8 @@ export default class GenericElDetails extends Component {
   render() {
     const { genericEl } = this.state;
     const submitLabel = genericEl && genericEl.isNew ? 'Create' : 'Save';
-    const saveBtnDisplay =
-      (genericEl && genericEl.isNew) ||
-      (genericEl && genericEl.changed) ||
-      false
-        ? { display: '' }
-        : { display: 'none' };
+    // eslint-disable-next-line max-len
+    const saveBtnDisplay = (genericEl?.isNew || (genericEl?.can_update && genericEl?.changed)) ? { display: '' } : { display: 'none' };
 
     let tabContents = [
       i => this.propertiesTab(i),
diff --git a/app/packs/src/components/navigation/UserAuth.js b/app/packs/src/components/navigation/UserAuth.js
index bdeb3accb..280ee90e2 100644
--- a/app/packs/src/components/navigation/UserAuth.js
+++ b/app/packs/src/components/navigation/UserAuth.js
@@ -670,14 +670,6 @@ export default class UserAuth extends Component {
     if (MatrixCheck(this.state.currentUser.matrix, 'userLabel')) {
       userLabel = <MenuItem onClick={this.handleLabelShow}>My Labels</MenuItem>;
     }
-    let converterBtn = <span />;
-    if (UIStore.getState().hasConverter === true) {
-      converterBtn = (
-        <MenuItem eventKey="12" href="/converter_admin">
-          Converter Profile
-        </MenuItem>
-      );
-    }
 
     return (
       <div>
diff --git a/app/packs/src/components/navigation/search/Search.js b/app/packs/src/components/navigation/search/Search.js
index e7496687e..9d493d838 100644
--- a/app/packs/src/components/navigation/search/Search.js
+++ b/app/packs/src/components/navigation/search/Search.js
@@ -4,7 +4,7 @@ import {
   Form, FormControl, Radio, Grid, Row, Col
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import { GenericElCriteriaModal } from 'chem-generic-ui';
+import { GenericElCriteriaModal, clsInputGroup } from 'chem-generic-ui';
 
 import AutoCompleteInput from 'src/components/navigation/search/AutoCompleteInput';
 import StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';
@@ -14,7 +14,6 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import GenericElCriteria from 'src/components/generic/GenericElCriteria';
-import { clsInputGroup } from 'chem-generic-ui';
 
 export default class Search extends React.Component {
   constructor(props) {
diff --git a/app/policies/element_policy.rb b/app/policies/element_policy.rb
index cac558408..d97791d05 100644
--- a/app/policies/element_policy.rb
+++ b/app/policies/element_policy.rb
@@ -60,7 +60,7 @@ def maximum_permission_level(collections,sync_collections=SyncCollectionsUser.no
   end
 
   def maximum_element_permission_level(sync_collections = SyncCollectionsUser.none)
-    sync_collections.pluck("#{@record.class.name.downcase}_detail_level").max || -1
+    sync_collections.pluck("#{Labimotion::Utils.element_name_dc(@record.class.to_s)}_detail_level").max || -1
   end
 
   def user_ids
diff --git a/package.json b/package.json
index cb9bc20f6..0d6d58d4f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "antd": "^3.19.3",
     "aviator": "v0.6.1",
     "base-64": "^0.1.0",
-    "chem-generic-ui": "^1.0.10",
+    "chem-generic-ui": "^1.0.11",
     "chem-generic-ui-viewer": "^1.0.2",
     "chemotion-converter-client": "0.5.0",
     "citation-js": "0.6.8",
diff --git a/yarn.lock b/yarn.lock
index 10b1ceb1f..d39dda0af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2298,6 +2298,45 @@
     reselect "^4.0.0"
     typescript "^5.0.4"
 
+"@complat/react-spectra-editor@1.0.0-rc19":
+  version "1.0.0-rc19"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc19.tgz#ced7f54d00fcac57f418b4b469839611fba53e70"
+  integrity sha512-c7NtJmKihsw/IQVqRhU4SY+OdRG+zr51dcnKiwXzPkbZq2CFS4xNEzb6qV3n7H92aaciUB7SMhb2OfdGU6S7Nw==
+  dependencies:
+    "@babel/preset-env" "^7.21.5"
+    "@babel/preset-react" "^7.18.6"
+    "@complat/react-svg-file-zoom-pan" "1.1.2"
+    "@material-ui/core" "^4.10.0"
+    "@material-ui/icons" "^4.10.0"
+    "@mdi/js" "^4.7.95"
+    "@mdi/react" "^1.2.1"
+    "@testing-library/jest-dom" "^5.16.5"
+    "@testing-library/react" "12.1.5"
+    "@types/jest" "^29.5.0"
+    "@types/node" "^18.15.11"
+    "@types/react" "^18.0.34"
+    "@types/react-dom" "^18.0.11"
+    babel-plugin-transform-object-rest-spread "^6.26.0"
+    browserslist "^4.21.5"
+    classnames "^2.2.6"
+    d3 "^5.16.0"
+    d3-brush "3.0.0"
+    d3-selection "^2.0.0"
+    d3-tip "^0.9.1"
+    jcampconverter "4.1.0"
+    ml-savitzky-golay-generalized "1.1.1"
+    prop-types "^15.7.2"
+    react-dropzone "^8.0.3"
+    react-quill "^2.0.0"
+    react-redux "^7.2.0"
+    react-svg-inline "^2.1.1"
+    redux "^4.1.1"
+    redux-saga "^1.1.3"
+    redux-undo "^1.1.0"
+    regenerator-transform "^0.13.3"
+    reselect "^4.0.0"
+    typescript "^5.0.4"
+
 "@complat/react-svg-file-zoom-pan@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.1.tgz#0fe8eb7008eabaebf3997ef3f11f0e1dcbb59206"
@@ -2307,6 +2346,15 @@
     d3 "6.7.0"
     regenerator-transform "^0.13.3"
 
+"@complat/react-svg-file-zoom-pan@1.1.2", "react-svg-file-zoom-pan-latest@npm:@complat/react-svg-file-zoom-pan@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.2.tgz#461897dcc501b2758383af1bd215e29153d8a642"
+  integrity sha512-D3aoTrzpUCUEkgY9SAYTfHuZ9nvOe4M+5Bn4iPKHNj00DfHg4lM9EywS5CkdX5/JSTXd7uYhVBITRCaQIsZRhg==
+  dependencies:
+    babel-plugin-transform-object-rest-spread "^6.26.0"
+    d3 "6.7.0"
+    regenerator-transform "^0.13.3"
+
 "@cypress/request@^2.88.10":
   version "2.88.10"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
@@ -5597,10 +5645,10 @@ chem-generic-ui-viewer@^1.0.2:
     react-select "5.2.2"
     uuid "^8.3.2"
 
-chem-generic-ui@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/chem-generic-ui/-/chem-generic-ui-1.0.10.tgz#c2f1735eae0a480f8dcebeaf72b21e77a7c79fdf"
-  integrity sha512-ggmWjTgKv15GCeA0jJHaI8RraoiXwK0Ee7pQ09l6OEa7IWWtPqVFq9ojrgFbX9LB3LPbOZrXNKn6Hg/PdUc/jQ==
+chem-generic-ui@^1.0.11:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/chem-generic-ui/-/chem-generic-ui-1.1.0.tgz#af4c8514519d918d050e918d98d628cc0dd249e4"
+  integrity sha512-hcmzFen/dm06xhrS/bK3/zW6e5w0jEseIW6l0EHeZfKNqoMhXMsdc9tGtTqTMIpFz0jdM7MvBffFpkTFGDx3bw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.1.2"
     "@fortawesome/free-regular-svg-icons" "^6.1.2"
@@ -13753,15 +13801,6 @@ react-stickydiv@^3.4.19:
   dependencies:
     dom-find "^0.3.1"
 
-"react-svg-file-zoom-pan-latest@npm:@complat/react-svg-file-zoom-pan@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.2.tgz#461897dcc501b2758383af1bd215e29153d8a642"
-  integrity sha512-D3aoTrzpUCUEkgY9SAYTfHuZ9nvOe4M+5Bn4iPKHNj00DfHg4lM9EywS5CkdX5/JSTXd7uYhVBITRCaQIsZRhg==
-  dependencies:
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-    d3 "6.7.0"
-    regenerator-transform "^0.13.3"
-
 react-svg-file-zoom-pan@0.1.5:
   version "0.1.5"
   resolved "https://registry.npmjs.org/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-0.1.5.tgz"

From 735b42d08008600c028b3906007f89d24b6493e7 Mon Sep 17 00:00:00 2001
From: Adam Basha <55552142+adambasha0@users.noreply.github.com>
Date: Thu, 16 Nov 2023 08:54:43 +0100
Subject: [PATCH 209/258] feat: include chemicals with import and export of
 collections (#1604)

---
 lib/export/export_collections.rb              |   9 ++++++
 lib/import/import_collections.rb              |  17 ++++++++++++
 spec/factories/attachments.rb                 |   4 +++
 spec/fixtures/import/collection_chemicals.zip | Bin 0 -> 6633 bytes
 spec/lib/export/export_collections_spec.rb    |  26 ++++++++++++++++++
 spec/lib/import/import_collections_spec.rb    |  13 +++++++++
 6 files changed, 69 insertions(+)
 create mode 100644 spec/fixtures/import/collection_chemicals.zip

diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index e282527da..75881c862 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -125,6 +125,7 @@ def prepare_data
           'user_id' => 'User'
         })
         fetch_samples collection
+        fetch_chemicals collection
         fetch_reactions collection
         # fetch_elements collection if @gt == false
         fetch_wellplates collection if @gt == false
@@ -135,6 +136,14 @@ def prepare_data
 
     private
 
+    def fetch_chemicals(collection)
+      chemicals = collection.samples.filter_map(&:chemical)
+      fetch_many(chemicals, {
+                   'id' => 'Chemical',
+                   'sample_id' => 'Sample',
+                 })
+    end
+
     def fetch_samples(collection)
       # get samples in order of ancestry, but with empty ancestry first
       samples = collection.samples.order(Arel.sql("NULLIF(ancestry, '') ASC NULLS FIRST"))
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 8a56a72d9..fa0ed30c8 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -88,6 +88,7 @@ def import
         gate_collection if @gt == true
         import_collections if @gt == false
         import_samples
+        import_chemicals if @gt == false
         import_residues
         ## import_elemental_compositions if @gt == true
         import_reactions
@@ -197,6 +198,21 @@ def fetch_bound(value)
       end
     end
 
+    def import_chemicals
+      @data.fetch('Chemical', {}).each do |_uuid, fields|
+        sample = @instances.fetch('Sample').fetch(fields.fetch('sample_id'))
+        next unless sample
+
+        chemical = Chemical.create!(fields.slice(
+          'cas',
+          'chemical_data',
+        ).merge(
+          sample_id: sample&.id,
+        ))
+        chemical.save!
+      end
+    end
+
     def import_samples
       @data.fetch('Sample', {}).each do |uuid, fields|
         # look for the molecule_name
@@ -249,6 +265,7 @@ def import_samples
           'decoupled',
           'molecular_mass',
           'sum_formula',
+          'inventory_sample',
         ).merge(
           created_by: @current_user_id,
           collections: fetch_many(
diff --git a/spec/factories/attachments.rb b/spec/factories/attachments.rb
index 8615deb3c..d6c397b5b 100644
--- a/spec/factories/attachments.rb
+++ b/spec/factories/attachments.rb
@@ -99,5 +99,9 @@
     trait :with_researchplan_collection_zip do
       file_path { Rails.root.join('spec/fixtures/import/20230113_research_plan_one_attachment.zip') }
     end
+
+    trait :with_chemicals_collection_zip do
+      file_path { Rails.root.join('spec/fixtures/import/collection_chemicals.zip') }
+    end
   end
 end
diff --git a/spec/fixtures/import/collection_chemicals.zip b/spec/fixtures/import/collection_chemicals.zip
new file mode 100644
index 0000000000000000000000000000000000000000..ff7ccf40558ab30cf74fcbd009ce3362a0c02885
GIT binary patch
literal 6633
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
O+XcOi@f^CpZ~q0+N8<kg

literal 0
HcmV?d00001

diff --git a/spec/lib/export/export_collections_spec.rb b/spec/lib/export/export_collections_spec.rb
index 0f7275ff7..04484fa81 100644
--- a/spec/lib/export/export_collections_spec.rb
+++ b/spec/lib/export/export_collections_spec.rb
@@ -78,6 +78,32 @@
     end
   end
 
+  context 'with a chemical' do
+    let(:chemical) { create(:chemical, sample_id: sample.id) }
+
+    before do
+      sample.save!
+      chemical.save!
+      export = Export::ExportCollections.new(job_id, [collection.id], 'zip', true)
+      export.prepare_data
+      export.to_file
+    end
+
+    it 'exported file exists' do
+      file_path = File.join('public', 'zip', "#{job_id}.zip")
+      expect(File.exist?(file_path)).to be true
+    end
+
+    it 'Chemical key is present in export.json' do
+      file_path = File.join('public', 'zip', "#{job_id}.zip")
+      export_json_content = Zip::File.open(file_path) do |files|
+        json_file = files.detect { |file| file.name == 'export.json' }
+        JSON.parse(json_file.get_input_stream.read)
+      end
+      expect(export_json_content).to have_key('Chemical')
+    end
+  end
+
   def update_body_of_researchplan(research_plan, identifier_of_attachment) # rubocop:disable Metrics/MethodLength
     research_plan.body = [
       {
diff --git a/spec/lib/import/import_collections_spec.rb b/spec/lib/import/import_collections_spec.rb
index 29e99492a..5ebb816a4 100644
--- a/spec/lib/import/import_collections_spec.rb
+++ b/spec/lib/import/import_collections_spec.rb
@@ -171,6 +171,19 @@
         expect(attachment.attachment_data).not_to be_nil
       end
     end
+
+    describe 'import a collection with a chemical' do
+      let(:import_id) { 'collection_chemicals' }
+      let(:attachment) { create(:attachment, :with_chemicals_collection_zip) }
+
+      it 'successfully imported 1 chemical' do
+        importer.execute
+
+        collection = Collection.find_by(label: 'collection_with_chemical')
+        expect(collection).to be_present
+        expect(collection.samples.map(&:chemical).length).to eq(1)
+      end
+    end
   end
 
   def stub_rest_request(identifier)

From 3a4390edbb9fd1af3e03360c029e2fdd0492db91 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:33:07 +0100
Subject: [PATCH 210/258] fix: the attachment to be removed from the inbox when
 assigned to a sample (#1631)

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>
---
 app/packs/src/apps/mydb/inbox/DatasetContainer.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/packs/src/apps/mydb/inbox/DatasetContainer.js b/app/packs/src/apps/mydb/inbox/DatasetContainer.js
index a209b8922..3d3d3e235 100644
--- a/app/packs/src/apps/mydb/inbox/DatasetContainer.js
+++ b/app/packs/src/apps/mydb/inbox/DatasetContainer.js
@@ -22,11 +22,23 @@ const collectSource = (connect, monitor) => ({
 class DatasetContainer extends Component {
   constructor(props) {
     super(props);
-    const inboxState = InboxStore.getState();
     this.state = {
       visible: false,
       deletingTooltip: false,
     }
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    InboxStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    InboxStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(state);
   }
 
   attachmentCount() {

From ca8f275d0bd7cdb11b993f0f4ee696de848c9efa Mon Sep 17 00:00:00 2001
From: Pei Chi Huang <pei-chi.huang@kit.edu>
Date: Mon, 20 Nov 2023 15:56:32 +0100
Subject: [PATCH 211/258] feat: upgrade-converter-to-v1.1.1

https://github.com/ComPlat/chemotion-converter-app/releases/tag/v1.1.1

Refs: #1634
---
 .service-dependencies | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.service-dependencies b/.service-dependencies
index 121cdf7a7..ba372f79f 100644
--- a/.service-dependencies
+++ b/.service-dependencies
@@ -1,5 +1,5 @@
 #syntax=v1
-CONVERTER=ComPlat/chemotion-converter-app@v1.1.0
+CONVERTER=ComPlat/chemotion-converter-app@v1.1.1
 KETCHER=ptrxyz/chemotion-ketchersvc@main
 SPECTRA=ComPlat/chem-spectra-app@0.14.0
 NMRIUMWRAPPER=NFDI4Chem/nmrium-react-wrapper@v0.4.0

From fec6da433489000c2301b174ba923958141c58d0 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Mon, 20 Nov 2023 16:17:20 +0100
Subject: [PATCH 212/258] fix(spectra): remove blank line when saving peak

Co-authored-by: Lan Le <lan.le@kit.edu>

Refs: #1629
---
 app/packs/src/apps/mydb/elements/details/ViewSpectra.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index c75acee04..759b6e7f5 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -378,6 +378,11 @@ class ViewSpectra extends React.Component {
           ...ai.extended_metadata.content.ops,
           ...ops,
         ];
+        const firstOps = ai.extended_metadata.content.ops[0];
+        if (firstOps.insert && firstOps.insert === '\n') {
+          ai.extended_metadata.content.ops.shift();
+        }
+
       });
     });
 

From 1e046ee82b9ef0f3eab30cf1478ee86664fab246 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Mon, 20 Nov 2023 16:30:21 +0100
Subject: [PATCH 213/258] fix(spectra): Add/remove multiplicity peak
 buttons(#1630)

update react-spectra-editor to v1.0.0-rc20

https://github.com/ComPlat/react-spectra-editor/pull/175

Co-authored-by: Lan Le <lan.le@kit.edu>

Refs: 1630
---
 package.json |  4 ++--
 yarn.lock    | 66 +++++++---------------------------------------------
 2 files changed, 11 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 0d6d58d4f..3458e62cd 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
-    "@complat/chem-spectra-client": "1.0.0-rc18",
-    "@complat/react-spectra-editor": "1.0.0-rc19",
+    "@complat/chem-spectra-client": "1.0.0-rc20",
+    "@complat/react-spectra-editor": "1.0.0-rc20",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",
diff --git a/yarn.lock b/yarn.lock
index d39dda0af..8c374be2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2236,12 +2236,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@complat/chem-spectra-client@1.0.0-rc18":
-  version "1.0.0-rc18"
-  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc18.tgz#b453db1aae56c2140e2503884c1a086c46c315cc"
-  integrity sha512-eqyzOZiFxphqonhwpyH1ivlF99JnnKVsvMwWHiQrEREXng7hrOE6ojGbKigTcgKot0Yl8SXOkcmqNcyTU8L4lg==
+"@complat/chem-spectra-client@1.0.0-rc20":
+  version "1.0.0-rc20"
+  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc20.tgz#9e3e9bdfb0d988ca350e2d6fa71337ce7484f3ff"
+  integrity sha512-yKtljOOe3x9pO/wGM9+2zdZv8m8G2qdfqNjHmlhxq9fj5vXNJ9eW5KPPSXuZiDMVYeysmnCxUohIdGR6jo7jPw==
   dependencies:
-    "@complat/react-spectra-editor" "1.0.0-rc18"
+    "@complat/react-spectra-editor" "1.0.0-rc20"
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"
     "@mui/icons-material" "^5.14.9"
@@ -2259,49 +2259,10 @@
     redux-form "^8.3.7"
     redux-saga "^1.1.3"
 
-"@complat/react-spectra-editor@1.0.0-rc18":
-  version "1.0.0-rc18"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc18.tgz#f24496e9c31c396be162cc6efffbeb27b95c69ab"
-  integrity sha512-+i3eCE9/k+oLacN4digUaYdh83VaFpRkn5p4llfT52DaSKUkBS+8gYq8rBpo8b1tGdQxPmQvTNhYkQKFkKxDQw==
-  dependencies:
-    "@babel/preset-env" "^7.21.5"
-    "@babel/preset-react" "^7.18.6"
-    "@complat/react-svg-file-zoom-pan" "1.1.1"
-    "@material-ui/core" "^4.10.0"
-    "@material-ui/icons" "^4.10.0"
-    "@mdi/js" "^4.7.95"
-    "@mdi/react" "^1.2.1"
-    "@testing-library/jest-dom" "^5.16.5"
-    "@testing-library/react" "12.1.5"
-    "@types/jest" "^29.5.0"
-    "@types/node" "^18.15.11"
-    "@types/react" "^18.0.34"
-    "@types/react-dom" "^18.0.11"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-    browserslist "^4.21.5"
-    classnames "^2.2.6"
-    d3 "^5.16.0"
-    d3-brush "3.0.0"
-    d3-selection "^2.0.0"
-    d3-tip "^0.9.1"
-    jcampconverter "4.1.0"
-    ml-savitzky-golay-generalized "1.1.1"
-    prop-types "^15.7.2"
-    react-dropzone "^8.0.3"
-    react-quill "^2.0.0"
-    react-redux "^7.2.0"
-    react-svg-inline "^2.1.1"
-    redux "^4.1.1"
-    redux-saga "^1.1.3"
-    redux-undo "^1.1.0"
-    regenerator-transform "^0.13.3"
-    reselect "^4.0.0"
-    typescript "^5.0.4"
-
-"@complat/react-spectra-editor@1.0.0-rc19":
-  version "1.0.0-rc19"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc19.tgz#ced7f54d00fcac57f418b4b469839611fba53e70"
-  integrity sha512-c7NtJmKihsw/IQVqRhU4SY+OdRG+zr51dcnKiwXzPkbZq2CFS4xNEzb6qV3n7H92aaciUB7SMhb2OfdGU6S7Nw==
+"@complat/react-spectra-editor@1.0.0-rc20":
+  version "1.0.0-rc20"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc20.tgz#8ae1d8e8ef56754f6c21a51c6b801e8fbc4bc4d8"
+  integrity sha512-UkZJD5a/KBDHBHCFh3juZEN+EOwuwHkPpSqAc7mtYTA8u++kLAiM2MhFntgfL3q5GWnZ70wpl0/LZUVswBVh+Q==
   dependencies:
     "@babel/preset-env" "^7.21.5"
     "@babel/preset-react" "^7.18.6"
@@ -2337,15 +2298,6 @@
     reselect "^4.0.0"
     typescript "^5.0.4"
 
-"@complat/react-svg-file-zoom-pan@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.1.tgz#0fe8eb7008eabaebf3997ef3f11f0e1dcbb59206"
-  integrity sha512-EnL9Y6rAzJwxk++npnUEOEzKsPNHRXBy0jbWA1MFFc3CYdLyh2tHFHUhwDWp+c9teQic2h/bhGEmz8fNe/thUA==
-  dependencies:
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-    d3 "6.7.0"
-    regenerator-transform "^0.13.3"
-
 "@complat/react-svg-file-zoom-pan@1.1.2", "react-svg-file-zoom-pan-latest@npm:@complat/react-svg-file-zoom-pan@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.2.tgz#461897dcc501b2758383af1bd215e29153d8a642"

From a14292c84c2bba658c46b7eaf3e170b3cb206797 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:32:30 +0100
Subject: [PATCH 214/258] chore: Bump rmagick from 5.0.0 to 5.3.0

Bumps [rmagick](https://github.com/rmagick/rmagick) from 5.0.0 to 5.3.0.
- [Changelog](https://github.com/rmagick/rmagick/blob/main/CHANGELOG.md)
- [Commits](https://github.com/rmagick/rmagick/commits)

---
updated-dependencies:
- dependency-name: rmagick
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Refs: #1609
---
 Gemfile.lock | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 0e2827b03..12b7adbd7 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -559,6 +559,7 @@ GEM
     pg_search (2.3.6)
       activerecord (>= 5.2)
       activesupport (>= 5.2)
+    pkg-config (1.5.5)
     prawn (2.4.0)
       pdf-core (~> 0.9.0)
       ttfunk (~> 1.7)
@@ -639,7 +640,8 @@ GEM
     reverse_markdown (2.1.1)
       nokogiri
     rexml (3.2.5)
-    rmagick (5.0.0)
+    rmagick (5.3.0)
+      pkg-config (~> 1.4)
     roo (2.9.0)
       nokogiri (~> 1)
       rubyzip (>= 1.3.0, < 3.0.0)

From 1a7febaf99f198c79dd81c82e6501944de501d76 Mon Sep 17 00:00:00 2001
From: Adam Basha <55552142+adambasha0@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:05:02 +0100
Subject: [PATCH 215/258] fix: allow import of molecule_name on sample import
 for xslx format

* fix: allow import of molecule_name on sample import for xslx format

* add spec test for importing molecule names on sample import

Refs: #1598
---
 app/models/molecule.rb                 | 13 +++++---
 lib/import/import_samples.rb           | 21 ++++++++++--
 spec/lib/import/import_samples_spec.rb | 44 +++++++++++++++++++++++++-
 spec/spec_helper.rb                    |  2 +-
 4 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/app/models/molecule.rb b/app/models/molecule.rb
index 536f83b63..4c5a0ed66 100644
--- a/app/models/molecule.rb
+++ b/app/models/molecule.rb
@@ -234,15 +234,18 @@ def get_lcss
     end
   end
 
-  def create_molecule_name_by_user(new_name, user_id)
-    return unless unique_molecule_name(new_name)
-    molecule_names
-      .create(name: new_name, description: "defined by user #{user_id}")
+  def create_molecule_name_by_user(new_names, user_id)
+    new_names.split(';').each do |new_name|
+      next unless unique_molecule_name(new_name)
+
+      molecule_names
+        .create(name: new_name, description: "defined by user #{user_id}")
+    end
   end
 
   def unique_molecule_name(new_name)
     mns = molecule_names.map(&:name)
-    !mns.include?(new_name)
+    mns.exclude?(new_name)
   end
 
   def self.svg_reprocess(svg, molfile)
diff --git a/lib/import/import_samples.rb b/lib/import/import_samples.rb
index b9a83b668..8fed5834a 100644
--- a/lib/import/import_samples.rb
+++ b/lib/import/import_samples.rb
@@ -209,16 +209,31 @@ def format_to_interval_syntax(row_field)
       "[#{lower_bound}, #{upper_bound}]"
     end
 
+    def assign_molecule_name_id(sample, value)
+      split_names = value.split(';')
+      molecule_name_id = MoleculeName.find_by(name: split_names[0]).id
+      sample['molecule_name_id'] = molecule_name_id
+    end
+
     def handle_sample_fields(sample, db_column, value)
-      if db_column == 'cas'
+      case db_column
+      when 'cas'
         sample['xref']['cas'] = value
+      when 'mn.name'
+        assign_molecule_name_id(sample, value)
       else
         sample[db_column] = value || ''
       end
     end
 
+    def process_fields(sample, db_column, field, row, molecule)
+      molecule.create_molecule_name_by_user(row[field], current_user_id) if field == 'molecule name'
+      process_sample_fields(sample, db_column, field, row)
+    end
+
     def process_sample_fields(sample, db_column, field, row)
-      return unless included_fields.include?(db_column) || db_column == 'cas'
+      additional_columns = %w[cas mn.name].freeze
+      return unless included_fields.include?(db_column) || additional_columns.include?(db_column)
 
       excluded_column = %w[description solvent location external_label].freeze
       comparison_values = %w[melting_point boiling_point].freeze
@@ -273,7 +288,7 @@ def sample_save(row, molfile, molecule)
         stereo[Regexp.last_match(1)] = row[field] if field.to_s.strip =~ /^stereo_(abs|rel)$/
         map_column = ReportHelpers::EXP_MAP_ATTR[:sample].values.find { |e| e[1] == "\"#{field}\"" }
         db_column = map_column.nil? || map_column[1] == "\"cas\"" ? field : map_column[0].sub('s.', '').delete!('"')
-        process_sample_fields(sample, db_column, field, row)
+        process_fields(sample, db_column, field, row, molecule)
       end
       validate_sample_and_save(sample, stereo, row)
     end
diff --git a/spec/lib/import/import_samples_spec.rb b/spec/lib/import/import_samples_spec.rb
index 3a6ee264f..08125c486 100644
--- a/spec/lib/import/import_samples_spec.rb
+++ b/spec/lib/import/import_samples_spec.rb
@@ -7,7 +7,18 @@
   let(:collection_id) { create(:collection).id }
   let(:file_path) { 'spec/fixtures/import/sample_import_template.xlsx' }
   let(:file_name) { File.basename(file_path) }
-  let(:importer) { Import::ImportSamples.new(user_id, collection_id, file_path, file_name, 'sample') }
+  let(:importer) { Import::ImportSamples.new(file_path, collection_id, user_id, file_name, 'sample') }
+
+  before do
+    stub_rest_request('BYHVGQHIAFURIL-UHFFFAOYSA-N')
+    stub_rest_request('PNNRZXFUPQQZSO-UHFFFAOYSA-N')
+    stub_rest_request('UHOVQNZJYSORNB-UHFFFAOYSA-N')
+    stub_rest_request('YMWUJEATGCHHMB-UHFFFAOYSA-N')
+    stub_rest_request('QPUYECUOLPXSFR-UHFFFAOYSA-N')
+    stub_rest_request('AUHZEENZYGFFBQ-UHFFFAOYSA-N')
+    stub_rest_request('RYYVLZVUVIJVGH-UHFFFAOYSA-N')
+    stub_rest_request('KWMALILVJYNFKE-UHFFFAOYSA-N')
+  end
 
   describe '.format_to_interval_syntax' do
     let(:processed_row) { importer.send(:format_to_interval_syntax, unprocessed_row) }
@@ -60,4 +71,35 @@
       end
     end
   end
+
+  describe '.import sample' do
+    let(:import_result) { importer.process }
+    let(:unprocessed_row) { '1' }
+
+    context 'with including 3 samples' do
+      it 'sample import is successful' do
+        expect(import_result[:status]).to eq 'ok'
+      end
+
+      it 'new molecules were imported in database' do
+        import_result
+        sample = Sample.find_by(name: 'Test 1')
+        molecule_names = sample.molecule.molecule_names
+        expect(molecule_names).to be_present
+      end
+    end
+  end
+
+  def stub_rest_request(identifier)
+    stub_request(:get, "http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/#{identifier}/record/JSON")
+      .with(
+        headers: {
+          'Accept' => '*/*',
+          'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
+          'Content-Type' => 'text/json',
+          'User-Agent' => 'Ruby',
+        },
+      )
+      .to_return(status: 200, body: '', headers: {})
+  end
 end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index 310ae49ed..705472c04 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -70,7 +70,7 @@
       'XEGUVFFZWHRVAV-SFOWXEAESA-N',
       'QHDHNVFIKWGRJR-UHFFFAOYSA-N',
       'QHDHNVFIKWGRJR-UHFFFAOYSA-N',
-      'XEGUVFFZWHRVAV-PVQJCKRUSA-N'
+      'XEGUVFFZWHRVAV-PVQJCKRUSA-N',
     ].each do |target|
       stub_request(:get, "#{hostname}#{inchi_path}#{target}/record/JSON")
         .with(headers: { 'Content-Type' => 'text/json' })

From 8bc37ce10e3ed4b4ed5dec9e21a669bb11f8dca2 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Tue, 21 Nov 2023 21:53:06 +0100
Subject: [PATCH 216/258] chore: upd node engine for dev container (#1635)

* chore: upd node engine for dev container

* feat: enable sentry monitoring for delayed_job

* chore: upd dockerignore

* ci: update runner image

* ci: move faker to global group of Gems to allow user seedings in stage env
---
 .dockerignore            | 1 +
 .github/workflows/ci.yml | 2 +-
 .nvmrc                   | 2 +-
 Dockerfile.chemotion-dev | 2 +-
 Gemfile                  | 4 +++-
 Gemfile.lock             | 4 ++++
 run-js-dev.sh            | 2 +-
 spec/spec_helper.rb      | 1 +
 8 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/.dockerignore b/.dockerignore
index 9eef03d76..d00dc62e8 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,6 +2,7 @@
 backup
 uploads
 public
+!/public/ontologies_default/
 .gitignore
 node_modules
 tmp
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e6d0fcb22..d03f5abbb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -49,7 +49,7 @@ jobs:
       run:
         shell: bash
 
-    container: complat/chemotion_eln_runner:v1.8.0
+    container: complat/chemotion_eln_runner:main
 
     services:
       postgres:
diff --git a/.nvmrc b/.nvmrc
index 860cc5000..bb52a169c 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18.17.1
+v18.18.2
diff --git a/Dockerfile.chemotion-dev b/Dockerfile.chemotion-dev
index 01401480d..a9b3a2942 100644
--- a/Dockerfile.chemotion-dev
+++ b/Dockerfile.chemotion-dev
@@ -7,7 +7,7 @@ FROM --platform=linux/amd64 ubuntu:jammy
 
 ARG DEBIAN_FRONTEND=noninteractive
 ARG VRUBY=2.7.7
-ARG VNODE=18.17.1
+ARG VNODE=18.18.2
 ARG ASDF_BRANCH=v0.11.3
 
 RUN set -xe  && apt-get update -yqqq --fix-missing && apt-get upgrade -y
diff --git a/Gemfile b/Gemfile
index f9b62eaa9..93baaf9b1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -28,6 +28,7 @@ gem 'dotenv-rails', require: 'dotenv/rails-now'
 
 gem 'ed25519'
 
+gem 'faker', require: false
 gem 'faraday'
 gem 'faraday-follow_redirects'
 gem 'faraday-multipart'
@@ -104,6 +105,8 @@ gem 'sassc-rails'
 gem 'scenic'
 gem 'schmooze'
 gem 'semacode', git: 'https://github.com/toretore/semacode.git', branch: 'master' # required for Barby but not listed...
+
+gem 'sentry-delayed_job'
 gem 'sentry-rails'
 gem 'sentry-ruby'
 gem 'shrine', '~> 3.0'
@@ -187,7 +190,6 @@ group :test do
   gem 'database_cleaner-active_record'
 
   gem 'factory_bot_rails'
-  gem 'faker'
 
   gem 'launchy'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 12b7adbd7..a7bdfd375 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -729,6 +729,9 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     semantic_range (3.0.0)
+    sentry-delayed_job (5.11.0)
+      delayed_job (>= 4.0)
+      sentry-ruby (~> 5.11.0)
     sentry-rails (5.11.0)
       railties (>= 5.0)
       sentry-ruby (~> 5.11.0)
@@ -967,6 +970,7 @@ DEPENDENCIES
   scenic
   schmooze
   semacode!
+  sentry-delayed_job
   sentry-rails
   sentry-ruby
   shrine (~> 3.0)
diff --git a/run-js-dev.sh b/run-js-dev.sh
index db68baa79..1aa164945 100755
--- a/run-js-dev.sh
+++ b/run-js-dev.sh
@@ -4,7 +4,7 @@ if [ ! -x yarn ]
 then
   npm install -g yarn
 fi
-asdf global nodejs 18.17.1
+asdf global nodejs 18.18.2
 yarn install
 
 echo "THIS WILL FAIL UNTIL THE RUBY GEMS ARE INSTALLED BY run-ruby-dev.sh. JUST TRY AGAIN AFTER INSTALLING THEM."
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index 705472c04..66648dfce 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -6,6 +6,7 @@
 require 'webmock/rspec'
 
 require 'factory_bot_rails'
+require 'faker'
 require 'capybara'
 require 'webdrivers'
 # require 'capybara/rspec'

From 56c6d4c61669852eecaf37b5026a6b26cd3d3c95 Mon Sep 17 00:00:00 2001
From: StarmanMartin <m.starman@live.com>
Date: Tue, 21 Nov 2023 22:32:04 +0100
Subject: [PATCH 217/258] feat: Changed Mail collector rules

* Changed Mail collector rules:
Attachment e-mails...
 - can be sent to multiple chemotion instances
 - can be sent to chemotion user in 'cc' or 'to'. The e-mail addresses in to and cc are treated equally
 - can be sent to different e-mails. All emails in "cc" or "to" belonging to a registered user will trigger the creation of an attachment. All non-registered e-mails are ignored.

Additionally, if an e-mail throws an error the collector keeps running. -> mailcollector line 25

* style: rubocop -A


Refs: #1566
---
 bin/run_mail_collector                    |   5 +
 lib/datacollector/collector_helper.rb     |  22 +--
 lib/datacollector/collector_helper_set.rb |  17 ++
 lib/datacollector/datacollector_file.rb   |   4 +-
 lib/datacollector/datacollector_folder.rb |   2 +-
 lib/datacollector/dc_logger.rb            |   2 +
 lib/datacollector/fcollector.rb           |   4 +-
 lib/datacollector/filecollector.rb        |  13 +-
 lib/datacollector/foldercollector.rb      |  36 ++---
 lib/datacollector/mailcollector.rb        | 185 +++++++++++-----------
 10 files changed, 153 insertions(+), 137 deletions(-)
 create mode 100644 bin/run_mail_collector
 create mode 100644 lib/datacollector/collector_helper_set.rb

diff --git a/bin/run_mail_collector b/bin/run_mail_collector
new file mode 100644
index 000000000..82d2a6b16
--- /dev/null
+++ b/bin/run_mail_collector
@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+require File.expand_path(File.join(File.dirname(__FILE__), '..', 'config', 'environment'))
+CollectDataFromMailJob.perform_now
+
diff --git a/lib/datacollector/collector_helper.rb b/lib/datacollector/collector_helper.rb
index c4a2a3e2d..a60ba741a 100644
--- a/lib/datacollector/collector_helper.rb
+++ b/lib/datacollector/collector_helper.rb
@@ -1,20 +1,22 @@
+# frozen_string_literal: true
+
 class CollectorHelper
   attr_reader :sender, :sender_container, :recipient
 
   def initialize(from, cc = nil)
-    if from.is_a?(Device) && cc.is_a?(User)
+    if (from.is_a?(Device) && cc.is_a?(User)) || (from.is_a?(User) && from == cc)
       @sender = from
       @recipient = cc
       prepare_containers
     elsif cc
       @sender = Device.find_by email: from
-      @sender = Device.find_by email: from.downcase unless @sender
+      @sender ||= Device.find_by email: from.downcase
       @recipient = User.find_by email: cc
-      @recipient = User.find_by email: cc.downcase unless @recipient
+      @recipient ||= User.find_by email: cc.downcase
       prepare_containers if @sender && @recipient
     else
       @sender = User.find_by email: from
-      @sender = User.find_by email: from.downcase unless @sender
+      @sender ||= User.find_by email: from.downcase
       @recipient = @sender
       prepare_containers if @sender
     end
@@ -26,19 +28,21 @@ def sender_recipient_known?
 
   def prepare_new_dataset(subject)
     return nil unless sender_recipient_known?
+
     Container.create(
       name: subject,
       container_type: 'dataset',
-      parent: @sender_container
+      parent: @sender_container,
     )
   end
 
   def prepare_dataset(subject)
     return nil unless sender_recipient_known?
+
     Container.where(
       name: subject,
       container_type: 'dataset',
-      parent: @sender_container
+      parent: @sender_container,
     ).first_or_create
   end
 
@@ -65,14 +69,14 @@ def prepare_containers
     unless @recipient.container
       @recipient.container = Container.create(
         name: 'inbox',
-        container_type: 'root'
+        container_type: 'root',
       )
     end
-    sender_box_id = 'sender_box_' + @sender.id.to_s
+    sender_box_id = "sender_box_#{@sender.id}"
     @sender_container = Container.where(
       name: @sender.first_name,
       container_type: sender_box_id,
-      parent_id: @recipient.container.id
+      parent_id: @recipient.container.id,
     ).first_or_create
   end
 end
diff --git a/lib/datacollector/collector_helper_set.rb b/lib/datacollector/collector_helper_set.rb
new file mode 100644
index 000000000..0ffefc25f
--- /dev/null
+++ b/lib/datacollector/collector_helper_set.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class CollectorHelperSet
+  attr_reader :helper_set
+
+  def initialize(from, cc_list)
+    @helper_set = []
+    cc_list.each do |cc|
+      h = CollectorHelper.new(from, cc)
+      @helper_set.push(h) if h.sender_recipient_known?
+    end
+  end
+
+  def sender_recipient_known?
+    @helper_set.length.positive?
+  end
+end
diff --git a/lib/datacollector/datacollector_file.rb b/lib/datacollector/datacollector_file.rb
index fc9795a0c..d42075ae0 100644
--- a/lib/datacollector/datacollector_file.rb
+++ b/lib/datacollector/datacollector_file.rb
@@ -19,7 +19,7 @@ def delete
   def attach(device)
     att = Attachment.new(
       filename: @name,
-      file_data: IO.binread(@path),
+      file_data: File.binread(@path),
       content_type: MimeMagic.by_path(@name)&.type,
       created_by: device.id,
       created_for: recipient.id,
@@ -52,7 +52,7 @@ def attach_remote(device)
 
   def add_attach_to_container(device, attach, _ = false)
     helper = CollectorHelper.new(device, recipient)
-    dataset = helper.prepare_dataset(Time.now.strftime('%Y-%m-%d'))
+    dataset = helper.prepare_dataset(Time.zone.now.strftime('%Y-%m-%d'))
     attach.update!(attachable: dataset)
 
     # add notifications
diff --git a/lib/datacollector/datacollector_folder.rb b/lib/datacollector/datacollector_folder.rb
index e9d973d2b..bd4598091 100644
--- a/lib/datacollector/datacollector_folder.rb
+++ b/lib/datacollector/datacollector_folder.rb
@@ -47,7 +47,7 @@ def zip_files(tmpzip)
 
   def register_new_data(device, tmpzip)
     att = Attachment.new(
-      filename: @name + '.zip',
+      filename: "#{@name}.zip",
       created_by: device.id,
       created_for: recipient.id,
       content_type: 'application/zip',
diff --git a/lib/datacollector/dc_logger.rb b/lib/datacollector/dc_logger.rb
index b82ea9b02..002546de9 100644
--- a/lib/datacollector/dc_logger.rb
+++ b/lib/datacollector/dc_logger.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class DCLogger
   def self.log
     @@fw_logger ||= Logger.new("#{Rails.root}/log/datacollector.log")
diff --git a/lib/datacollector/fcollector.rb b/lib/datacollector/fcollector.rb
index 2c9c3ed67..1c774690b 100644
--- a/lib/datacollector/fcollector.rb
+++ b/lib/datacollector/fcollector.rb
@@ -63,7 +63,7 @@ def execute(use_sftp)
           inspect_folder(device)
           @sftp = nil
         end
-      rescue => e
+      rescue StandardError => e
         log_error("#{e.message} >>> #{device.info}\n#{e.backtrace.join('\n')}")
       end
     end
@@ -77,7 +77,7 @@ def execute(use_sftp)
   private
 
   def devices(use_sftp)
-    sql = <<~SQL
+    sql = <<~SQL.squish
       profiles."data"->>'method' = '#{self.class::FCOLL}watcher#{use_sftp ? 'sftp' : 'local'}'
     SQL
     Device.joins(:profile).where(sql).includes(:profile)
diff --git a/lib/datacollector/filecollector.rb b/lib/datacollector/filecollector.rb
index d64f41bba..c9088530d 100644
--- a/lib/datacollector/filecollector.rb
+++ b/lib/datacollector/filecollector.rb
@@ -7,7 +7,6 @@ class Filecollector < Fcollector
   private
 
   # rubocop:disable Metrics/AbcSize
-  # rubocop:disable Metrics/MethodLength
 
   def inspect_folder(device)
     directory = device.profile.data['method_params']['dir']
@@ -15,7 +14,7 @@ def inspect_folder(device)
       @current_collector = DatacollectorFile.new(new_file_p, @sftp)
       error = CollectorError.find_by error_code: CollectorHelper.hash(
         @current_collector.path,
-        @sftp
+        @sftp,
       )
       begin
         stored = false
@@ -31,10 +30,10 @@ def inspect_folder(device)
           @current_collector.delete
           log_info("Recipient unknown. File deleted! >>> #{device.info}")
         end
-      rescue => e
+      rescue StandardError => e
         if stored
           CollectorHelper.write_error(
-            CollectorHelper.hash(@current_collector.path, @sftp)
+            CollectorHelper.hash(@current_collector.path, @sftp),
           )
         end
         log_error("#{e.message} >>> #{device.info}\n#{e.backtrace.join('\n')}")
@@ -53,15 +52,13 @@ def new_files(monitored_folder_p)
         File.join(monitored_folder_p, f.name)
       end
     else
-      new_files_p = Dir.glob(File.join(monitored_folder_p, '*')).reject { |e|
+      new_files_p = Dir.glob(File.join(monitored_folder_p, '*')).reject do |e|
         File.directory?(e)
-      }
+      end
     end
     new_files_p.delete_if do |f|
       f.end_with?('.filepart', '.part')
     end
     new_files_p
   end
-
-  # rubocop:enable Metrics/MethodLength
 end
diff --git a/lib/datacollector/foldercollector.rb b/lib/datacollector/foldercollector.rb
index a9bcb1f35..4c78cee11 100644
--- a/lib/datacollector/foldercollector.rb
+++ b/lib/datacollector/foldercollector.rb
@@ -9,22 +9,20 @@ class Foldercollector < Fcollector
   private
 
   def sleep_seconds(device)
-    30 || Rails.configuration.datacollectors.services &&
-      (Rails.configuration.datacollectors.services.find { |e|
+    30 || (Rails.configuration.datacollectors.services &&
+      (Rails.configuration.datacollectors.services.find do |e|
         e[:name] == device.profile.data['method']
-      } || {})[:watcher_sleep]
+      end || {})[:watcher_sleep])
   end
 
   def modification_time_diff(device, folder_p)
-    time_now = Time.now
-    time_diff =
-      case device.profile.data['method']
-      when 'folderwatcherlocal' then time_now - File.mtime(folder_p)
-      when 'folderwatchersftp' then
-        time_now - (Time.at @sftp.file.open(folder_p).stat.attributes[:mtime])
-      else 30
-      end
-    time_diff
+    time_now = Time.zone.now
+    case device.profile.data['method']
+    when 'folderwatcherlocal' then time_now - File.mtime(folder_p)
+    when 'folderwatchersftp'
+      time_now - (Time.zone.at @sftp.file.open(folder_p).stat.attributes[:mtime])
+    else 30
+    end
   end
 
   # rubocop:disable Metrics/CyclomaticComplexity
@@ -45,7 +43,7 @@ def inspect_folder(device)
       @current_collector.files = list_files
       error = CollectorError.find_by error_code: CollectorHelper.hash(
         @current_collector.path,
-        @sftp
+        @sftp,
       )
       begin
         stored = false
@@ -66,10 +64,10 @@ def inspect_folder(device)
           @current_collector.delete
           log_info("Recipient unknown. Folder deleted! >>> #{device.info}")
         end
-      rescue => e
+      rescue StandardError => e
         if stored
           CollectorHelper.write_error(
-            CollectorHelper.hash(@current_collector.path, @sftp)
+            CollectorHelper.hash(@current_collector.path, @sftp),
           )
         end
         log_error("#{e.message} >>> #{device.info}\n#{e.backtrace.join('\n')}")
@@ -89,9 +87,9 @@ def list_files
       )
       all_files.map!(&:name)
     else
-      all_files = Dir.entries(@current_collector.path).reject { |e|
+      all_files = Dir.entries(@current_collector.path).reject do |e|
         File.directory?(File.join(@current_collector.path, e))
-      }
+      end
     end
     all_files.delete_if do |f|
       f.end_with?('..', '.', '.filepart', '.part')
@@ -106,9 +104,9 @@ def new_folders(monitored_folder_p)
       )
       new_folders_p.map! { |dir| File.join(monitored_folder_p, dir.name) }
     else
-      new_folders_p = Dir.glob(File.join(monitored_folder_p, '*')).select { |e|
+      new_folders_p = Dir.glob(File.join(monitored_folder_p, '*')).select do |e|
         File.directory?(e)
-      }
+      end
     end
     new_folders_p
   end
diff --git a/lib/datacollector/mailcollector.rb b/lib/datacollector/mailcollector.rb
index 25ae8d9d9..b6933c06b 100644
--- a/lib/datacollector/mailcollector.rb
+++ b/lib/datacollector/mailcollector.rb
@@ -1,8 +1,9 @@
+# frozen_string_literal: true
+
 require 'net/imap'
 require 'mail'
 
 class Mailcollector
-
   def initialize
     raise 'No datacollector configuration!' unless Rails.configuration.datacollectors
 
@@ -21,15 +22,17 @@ def execute
     if response['name'] == 'OK'
       log_info('Login...')
       imap.select('INBOX')
-      imap.search(['NOT', 'SEEN']).each do |message_id|
+      imap.search(%w[NOT SEEN]).each do |message_id|
         handle_new_mail(message_id, imap)
+      rescue StandardError => e
+        log_error e.message
       end
       imap.close
     else
-      log_error('Cannot login ' + @server)
+      log_error("Cannot login #{@server}")
       raise
     end
-  rescue => e
+  rescue StandardError => e
     log_error 'mail collector execute error:'
     log_error e.backtrace.join('\n')
     raise
@@ -44,117 +47,107 @@ def handle_new_mail(message_id, imap)
     envelope = imap.fetch(message_id, 'ENVELOPE')[0].attr['ENVELOPE']
     raw_message = imap.fetch(message_id, 'RFC822').first.attr['RFC822']
     message = Mail.read_from_string raw_message
-    helper = create_helper(envelope)
-    log_info 'Mail from ' + message.from.to_s
-    unless helper
-      log_info message.from.to_s + ' Email format incorrect or sender unknown!'
-      return nil
-    end
-    unless helper.sender
-      log_info message.from.to_s + ' Sender unknown!'
+    helper_set = create_helper_set(envelope)
+    log_info "Mail from #{message.from}"
+    unless helper_set
+      log_info "#{message.from} Email format incorrect or sender unknown!"
       return nil
     end
-    unless helper.recipient
-      log_info message.from.to_s + ' Recipient unknown!'
-      return nil
-    end
-    if message.attachments
-      handle_new_message(message, helper)
-      log_info message.from.to_s + ' Data stored!'
-    else
-      log_info message.from.to_s + ' No data!'
+    helper_set.helper_set.each do |helper|
+      unless helper.sender
+        log_info "#{message.from} Sender unknown!"
+        return nil
+      end
+      unless helper.recipient
+        log_info "#{message.from} Recipient unknown!"
+        return nil
+      end
+      if message.attachments
+        handle_new_message(message, helper)
+        log_info "#{message.from} Data stored!"
+      else
+        log_info "#{message.from} No data!"
+      end
+      imap.store(message_id, '+FLAGS', [:Deleted])
+      log_info "#{message.from} Email processed!"
     end
-    imap.store(message_id, '+FLAGS', [:Deleted])
-    log_info message.from.to_s + ' Email processed!'
-  rescue => e
+  rescue StandardError => e
     log_error 'Error on mailcollector handle_new_mail'
     log_error e.backtrace.join('\n')
     raise
   end
 
   def handle_new_message(message, helper)
-    begin
-      dataset = helper.prepare_new_dataset(message.subject)
-      message.attachments.each do |attachment|
-        tempfile = Tempfile.new('mail_attachment')
-        tempfile.binmode
-        tempfile.write(attachment.decoded)
-        tempfile.rewind
-        att = Attachment.new(
-          filename: attachment.filename,
-          created_by: helper.sender.id,
-          created_for: helper.recipient.id,
-          file_path: tempfile.path,
-          )
+    dataset = helper.prepare_new_dataset(message.subject)
+    message.attachments.each do |attachment|
+      tempfile = Tempfile.new('mail_attachment')
+      tempfile.binmode
+      tempfile.write(attachment.decoded)
+      tempfile.rewind
+      att = Attachment.new(
+        filename: attachment.filename,
+        created_by: helper.sender.id,
+        created_for: helper.recipient.id,
+        file_path: tempfile.path,
+      )
 
-        att.save!
-        tempfile.close
-        tempfile.unlink
-        att.update!(attachable: dataset)
-      end
-    rescue => e
-      log_error 'Error on mailcollector handle_new_message:'
-      log_error e.backtrace.join('\n')
-      raise
+      att.save!
+      tempfile.close
+      tempfile.unlink
+      att.update!(attachable: dataset)
     end
+  rescue StandardError => e
+    log_error 'Error on mailcollector handle_new_message:'
+    log_error e.backtrace.join('\n')
+    raise
   end
 
-  def create_helper(envelope)
-    helper = nil
-    begin
-      if (envelope.cc && envelope.cc.length == 1) && (envelope.to && envelope.to.length == 1)
-        log_info 'Using CC method...'
-        mail_to = envelope.to[0].mailbox.to_s + '@' + envelope.to[0].host.to_s
-        if mail_to.casecmp(@mail_address).zero? ||
-           (@aliases.any? { |s| s.casecmp(mail_to).zero? })
-          helper = CollectorHelper.new(
-            envelope.from[0].mailbox.to_s + '@' + envelope.from[0].host.to_s,
-            envelope.cc[0].mailbox.to_s + '@' + envelope.cc[0].host.to_s
-          )
-        end
-      elsif !envelope.cc && envelope.to && envelope.to.length == 2
-        log_info 'Using To method...'
-        mail_to_first = envelope.to[0].mailbox.to_s + '@' + envelope.to[0].host.to_s
-        mail_to_second = envelope.to[1].mailbox.to_s + '@' + envelope.to[1].host.to_s
-        if  mail_to_first.casecmp(@mail_address).zero? ||
-            (@aliases.any? { |s| s.casecmp(mail_to_first).zero? })
-          helper = CollectorHelper.new(
-            envelope.from[0].mailbox.to_s + '@' + envelope.from[0].host.to_s,
-            mail_to_second
-          )
-        elsif mail_to_second.casecmp(@mail_address).zero? ||
-              (@aliases.any? { |s| s.casecmp(mail_to_second).zero? })
-          helper = CollectorHelper.new(
-            envelope.from[0].mailbox.to_s + '@' + envelope.from[0].host.to_s,
-            mail_to_first
-          )
-        end
-      elsif !envelope.cc && envelope.to && envelope.to.length == 1
-        log_info 'Using Sender = Recipient method...'
-        mail_to = envelope.to[0].mailbox.to_s + '@' + envelope.to[0].host.to_s
-        if mail_to.casecmp(@mail_address).zero? || (@aliases.any? { |s| s.casecmp(mail_to).zero? })
-          helper = CollectorHelper.new(
-            envelope.from[0].mailbox.to_s + '@' + envelope.from[0].host.to_s
-          )
-        end
-      end
-    rescue => e
-      log_error 'Error on mailcollector create_helper:'
-      log_error e.backtrace.join('\n')
-      raise
+  def email_eln_email?(mail_to)
+    mail_to.casecmp(@mail_address).zero? ||
+      (@aliases.any? { |s| s.casecmp(mail_to).zero? })
+  end
+
+  def get_user(mail)
+    user = User.find_by email: mail
+    user ||= User.find_by email: mail.downcase
+    user
+  end
+
+  def create_helper_set(envelope)
+    # Check if from is User or Device
+    from = "#{envelope.from[0].mailbox}@#{envelope.from[0].host}"
+    from_user = get_user from
+    raise "#{from} not registered" if from_user.nil?
+
+    receiver = []
+    if from_user.is_a?(User) && (!from_user.is_a?(Device) && !from_user.is_a?(Admin))
+      receiver.push(from_user)
+    else # Concatenate all receiver (cc & to)
+      receiver.concat(envelope.cc) if envelope.cc
+      receiver.concat(envelope.to) if envelope.to
+      receiver = receiver.map { |m| "#{m.mailbox}@#{m.host}" }
+                         .reject { |m| email_eln_email?(m) }
+                         .map { |m| get_user(m) }
+                         .select { |user| !user.nil? && !user.is_a?(Device) && !user.is_a?(Admin) }
     end
-    helper
+    return nil if receiver.empty?
+
+    CollectorHelperSet.new(from_user, receiver)
+  rescue StandardError => e
+    log_error 'Error on mailcollector create_helper:'
+    log_error e.backtrace.join('\n')
+    raise
   end
 
   def log_info(message)
-    DCLogger.log.info(self.class.name) {
-      ' >>> ' + message
-    }
+    DCLogger.log.info(self.class.name) do
+      " >>> #{message}"
+    end
   end
 
   def log_error(message)
-    DCLogger.log.error(self.class.name) {
-      ' >>> ' + message
-    }
+    DCLogger.log.error(self.class.name) do
+      " >>> #{message}"
+    end
   end
 end

From b6072da2fae6abbd45072ac04fe9bb5dcaa8635e Mon Sep 17 00:00:00 2001
From: Adam Basha <55552142+adambasha0@users.noreply.github.com>
Date: Fri, 24 Nov 2023 10:40:14 +0100
Subject: [PATCH 218/258] feat: add volume field in inventory tab (#1613)

* add volume field in inventory tab

* fix: apply conditional check for p-statements in chemicalTab

* fix: verify fetched pictograms from merck
---
 app/assets/stylesheets/chemical-tab.scss      | 10 ++++---
 .../mydb/elements/details/NumericInputUnit.js | 23 +++++++++-------
 app/packs/src/components/ChemicalTab.js       | 18 ++++++++++---
 lib/chemotion/chemicals_service.rb            |  3 ++-
 .../utils/NumericInputUnit.spec.js            | 26 +++++++++----------
 5 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/chemical-tab.scss b/app/assets/stylesheets/chemical-tab.scss
index 757c7a4ca..e07e537ab 100644
--- a/app/assets/stylesheets/chemical-tab.scss
+++ b/app/assets/stylesheets/chemical-tab.scss
@@ -142,18 +142,22 @@ table.table-borderless {
         justify-content: space-between;
         margin-top: 10px;
     }
+
+    .text-input-price {
+        width: 22%;
+    }
     
     .text-input-person {
-    width: 29%;
+    width: 22%;
     }
     
     .text-input-date {
     margin-top: -17px;
-    width: 40%;
+    width: 35%;
     }
     
     .text-input-required-by {
-    width: 29%;
+    width: 22%;
     }
 }
 
diff --git a/app/packs/src/apps/mydb/elements/details/NumericInputUnit.js b/app/packs/src/apps/mydb/elements/details/NumericInputUnit.js
index 2b247ab94..2b80afef3 100644
--- a/app/packs/src/apps/mydb/elements/details/NumericInputUnit.js
+++ b/app/packs/src/apps/mydb/elements/details/NumericInputUnit.js
@@ -61,12 +61,16 @@ export default function NumericInputUnit(props) {
     return [convertedValue, convertedUnit];
   };
 
-  const validateConversionForInventoryAmount = (valueToFormat) => {
-    const conversionMap = {
-      g: { convertedUnit: 'mg', conversionFactor: 1000 },
-      mg: { convertedUnit: 'μg', conversionFactor: 1000 },
-      μg: { convertedUnit: 'g', conversionFactor: 0.000001 }
-    };
+  const conversionMap = {
+    g: { convertedUnit: 'mg', conversionFactor: 1000 },
+    mg: { convertedUnit: 'μg', conversionFactor: 1000 },
+    μg: { convertedUnit: 'g', conversionFactor: 0.000001 },
+    l: { convertedUnit: 'ml', conversionFactor: 1000 },
+    ml: { convertedUnit: 'μl', conversionFactor: 1000 },
+    μl: { convertedUnit: 'l', conversionFactor: 0.000001 }
+  };
+
+  const convertValue = (valueToFormat, currentUnit) => {
     const { convertedUnit, conversionFactor } = conversionMap[currentUnit];
     const decimalPlaces = 7;
     const formattedValue = weightConversion(valueToFormat, conversionFactor);
@@ -77,8 +81,9 @@ export default function NumericInputUnit(props) {
   const toggleInput = () => {
     let [convertedValue, convertedUnit] = [value, currentUnit];
     switch (field) {
-      case 'inventory_amount':
-        [convertedValue, convertedUnit] = validateConversionForInventoryAmount(value);
+      case 'chemical_amount_in_g':
+      case 'chemical_amount_in_l':
+        [convertedValue, convertedUnit] = convertValue(value, currentUnit);
         break;
       case 'flash_point':
         [convertedValue, convertedUnit] = validateConversionForFlashPoint(value);
@@ -98,7 +103,7 @@ export default function NumericInputUnit(props) {
     setValue(newInput);
   };
 
-  const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : null;
+  const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : <ControlLabel style={{ paddingTop: '15px' }} />;
   const bsSize = field === 'flash_point' ? 'small' : null;
 
   const unitSwitch = (
diff --git a/app/packs/src/components/ChemicalTab.js b/app/packs/src/components/ChemicalTab.js
index c37cd87eb..56f25cd8c 100644
--- a/app/packs/src/components/ChemicalTab.js
+++ b/app/packs/src/components/ChemicalTab.js
@@ -222,7 +222,7 @@ export default class ChemicalTab extends React.Component {
 
     const precautionaryPhrases = [];
     // eslint-disable-next-line no-restricted-syntax
-    for (const [key, value] of Object.entries(str.p_statements)) {
+    for (const [key, value] of Object.entries(str?.p_statements || {})) {
       // eslint-disable-next-line react/jsx-one-expression-per-line
       const st = <p key={key}>{key}:{value}</p>;
       precautionaryPhrases.push(st);
@@ -494,10 +494,17 @@ export default class ChemicalTab extends React.Component {
 
   numInputWithoutTable(data, label, parameter) {
     const value = data?.[parameter]?.value ?? 0;
-    const unit = data?.[parameter]?.unit ?? 'mg';
+    let unit; let field;
+    if (parameter === 'amount') {
+      unit = data?.[parameter]?.unit ?? 'mg';
+      field = 'chemical_amount_in_g';
+    } else if (parameter === 'volume') {
+      unit = data?.[parameter]?.unit ?? 'ml';
+      field = 'chemical_amount_in_l';
+    }
     return (
       <NumericInputUnit
-        field="inventory_amount"
+        field={field}
         inputDisabled={false}
         onInputChange={
           (newValue, newUnit) => this.handleMetricsChange(parameter, newValue, newUnit)
@@ -910,10 +917,13 @@ export default class ChemicalTab extends React.Component {
                 {this.numInputWithoutTable(data, 'Amount', 'amount')}
               </div>
               <div className="inventory-text-input">
-                {this.textInput(data, 'Price', 'price')}
+                {this.numInputWithoutTable(data, '', 'volume')}
               </div>
             </div>
             <div className="text-input-group">
+              <div className="inventory-text-input">
+                {this.textInput(data, 'Price', 'price')}
+              </div>
               <div className="text-input-person">
                 {this.textInput(data, 'Person', 'person')}
               </div>
diff --git a/lib/chemotion/chemicals_service.rb b/lib/chemotion/chemicals_service.rb
index 3f40df9e1..54f5bde6f 100644
--- a/lib/chemotion/chemicals_service.rb
+++ b/lib/chemotion/chemicals_service.rb
@@ -143,9 +143,10 @@ def self.safety_phrases_merck(product_link)
       safety_section = safety_section(product_link)
       safety_array = safety_section.children.reject { |i| i.text.empty? }.map(&:text)
       pictograms = safety_array[0].split(',')
+      verified_pictograms = pictograms.select { |pictogram| pictograms_hash.value?(pictogram) }
       { 'h_statements' => construct_h_statements(safety_array, 'merck'),
         'p_statements' => construct_p_statements(safety_array, 'merck'),
-        'pictograms' => pictograms }
+        'pictograms' => verified_pictograms }
     rescue StandardError
       'Could not find H and P phrases'
     end
diff --git a/spec/javascripts/utils/NumericInputUnit.spec.js b/spec/javascripts/utils/NumericInputUnit.spec.js
index 24c77c62c..9c7767265 100644
--- a/spec/javascripts/utils/NumericInputUnit.spec.js
+++ b/spec/javascripts/utils/NumericInputUnit.spec.js
@@ -24,54 +24,54 @@ const createWrapper = (label, unit, value, field, inputDisable) => shallow(
 
 describe('NumericInputUnit component', () => {
   it('renders correctly', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
-    const expectedHtml = '<div class="numericInputWithUnit_g"><label class="control-label">Amount</label><span class="input-group"><input type="text" value="1" name="inventory_amount" label="Amount" class="bs-form--compact form-control"/><span class="input-group-btn"><button type="button" class="btn btn-default active">g</button></span></span></div>';
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
+    const expectedHtml = '<div class="numericInputWithUnit_g"><label class="control-label">Amount</label><span class="input-group"><input type="text" value="1" name="chemical_amount_in_g" label="Amount" class="bs-form--compact form-control"/><span class="input-group-btn"><button type="button" class="btn btn-default active">g</button></span></span></div>';
     expect(wrapper.html()).toEqual(expectedHtml);
   });
 
   it('should render without errors', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     expect(wrapper.find('.numericInputWithUnit_g')).toHaveLength(1);
   });
 
   it('renders ControlLabel component', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     const label = wrapper.find(ControlLabel);
     expect(label.exists()).toBeTruthy();
   });
 
   it('renders correct label text', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     const label = wrapper.find(ControlLabel);
     expect(label.props().children).toEqual('Amount');
   });
 
-  it('should not render the label when it is not passed as a prop', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+  it('should render the label even when it is not passed as a prop', () => {
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     wrapper.setProps({ label: undefined });
     wrapper.update();
-    expect(wrapper.find('ControlLabel').exists()).toBe(false);
+    expect(wrapper.find('ControlLabel').exists()).toBe(true);
   });
 
   it('calls the onInputChange function when the value is changed and updates state of value, then convert unit', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     wrapper.find('FormControl').simulate('change', { target: { value: 3 } });
     expect(mockFn.calledWith(3, 'g')).toEqual(true);
     wrapper.find('Button').simulate('click');
-    const inputComponent = wrapper.find('[name="inventory_amount"]');
+    const inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
     inputComponent.simulate('change', { target: { value: 3000 } });
     expect(mockFn.calledWith(3000, 'mg')).toEqual(true);
   });
 
   it('toggles input unit for weight', () => {
-    const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
+    const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
     wrapper.find('Button').simulate('click');
-    let inputComponent = wrapper.find('[name="inventory_amount"]');
+    let inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
     inputComponent.simulate('change', { target: { value: 1000 } });
     expect(mockFn.calledWith(1000, 'mg')).toEqual(true);
 
     wrapper.find('Button').simulate('click');
-    inputComponent = wrapper.find('[name="inventory_amount"]');
+    inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
     inputComponent.simulate('change', { target: { value: 1000000 } });
     expect(mockFn.calledWith(1000000, 'μg')).toEqual(true);
   });

From 8c55f621fd462d9e927cd036499a95cfe9f2df49 Mon Sep 17 00:00:00 2001
From: Fabian Mauz <fmauz@ipb-halle.de>
Date: Wed, 29 Nov 2023 11:07:12 +0100
Subject: [PATCH 219/258] fix: collection management right click on the add
 button to not drag things around

* fix: made root collection undraggable in MyCollections

* style: changed css style of root collections

* fix: made root collection in MySharedCollections undraggable

* fix: made root collection in Shared-and SyncronizedWithMe  undraggable

* fix: made root collection in CollectionTabs  undraggable

* style: add some space left to the tree

* style: add active marking also to root collection

* fix: suppress drag with root buttons at MyCollections

* fix: suppress drag with root buttons at MySharedCollections

refs: #1639, #670
---
 .../stylesheets/collection_management.scss    | 11 +++++++++-
 .../apps/mydb/collections/CollectionTabs.js   |  7 +++++--
 .../apps/mydb/collections/MyCollections.js    | 21 ++++++++++++-------
 .../mydb/collections/MySharedCollections.js   | 13 +++++++-----
 .../collections/SharedWithMeCollections.js    |  9 ++++----
 .../mydb/collections/SyncWithMeCollections.js |  9 ++++----
 6 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/collection_management.scss b/app/assets/stylesheets/collection_management.scss
index 88c207cb3..a0a315c28 100644
--- a/app/assets/stylesheets/collection_management.scss
+++ b/app/assets/stylesheets/collection_management.scss
@@ -26,6 +26,7 @@
   position: relative;
   overflow: hidden;
   @extend .f-no-select;
+  margin-left: 5px;
 }
 
 .m-draggable {
@@ -91,7 +92,11 @@
       margin-left: 15px;
       float: left;
       padding-top: 4px;
+      padding-right: 0px;
       height: 26px;
+      border-width: 0px;
+      width:94%;
+      box-shadow: 0px 0px 0px rgb(104, 104, 104);
     }
 
     .form-group {
@@ -99,7 +104,11 @@
     }
 
     &.is-active {
-      background-color: #D3D3D3
+      background-color: #D3D3D3;
+
+      .root-label{
+        background-color: #D3D3D3 
+      }
     }
   }
 
diff --git a/app/packs/src/apps/mydb/collections/CollectionTabs.js b/app/packs/src/apps/mydb/collections/CollectionTabs.js
index 0e623b3fa..f836eb2ec 100644
--- a/app/packs/src/apps/mydb/collections/CollectionTabs.js
+++ b/app/packs/src/apps/mydb/collections/CollectionTabs.js
@@ -128,8 +128,11 @@ export default class CollectionTabs extends React.Component {
   label(node) {
     if (node.label === 'My Collections') {
       return (
-        <div className="root-label">My Collections</div>
-      );
+        <FormControl 
+        value ="My Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
     }
     return (
       <FormControl className="collection-label" type="text" value={node.label || ''} disabled />
diff --git a/app/packs/src/apps/mydb/collections/MyCollections.js b/app/packs/src/apps/mydb/collections/MyCollections.js
index 69c2cba32..7cdb5fef1 100644
--- a/app/packs/src/apps/mydb/collections/MyCollections.js
+++ b/app/packs/src/apps/mydb/collections/MyCollections.js
@@ -30,7 +30,7 @@ export default class MyCollections extends React.Component {
         isChange: false
       }
     }
-
+    this.addSubcollection=this.addSubcollection.bind(this);
     this.onStoreChange = this.onStoreChange.bind(this);
   }
 
@@ -73,10 +73,11 @@ export default class MyCollections extends React.Component {
   label(node) {
     if (node.id == -1) {
       return (
-        <div className="root-label">
-          My Collections
-        </div>
-      )
+        <FormControl 
+        value ="My Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
     } else {
       return (
         <FormControl
@@ -116,7 +117,12 @@ export default class MyCollections extends React.Component {
       const { isChange } = this.state;
       return (
         <div className="root-actions">
-          {isChange && <Button id="save-collections-button" bsSize="xsmall" bsStyle="warning" onClick={this.bulkUpdate.bind(this)}> Save </Button>}
+          {isChange && <Button 
+          id="save-collections-button" 
+          bsSize="xsmall" 
+          bsStyle="warning" 
+          onMouseDown={(e)=>{e.stopPropagation();}}
+          onClick={this.bulkUpdate.bind(this)}> Save </Button>}
           {this.addCollectionButton(node)}
         </div>
       )
@@ -203,7 +209,8 @@ export default class MyCollections extends React.Component {
         id="add-new-collection-button"
         bsSize="xsmall"
         bsStyle="success"
-        onClick={this.addSubcollection.bind(this, node)}
+        onClick={(e)=>{this.addSubcollection(node);}}
+        onMouseDown={(e)=>{e.stopPropagation();}}
       >
         <i className="fa fa-plus"></i>
       </Button>
diff --git a/app/packs/src/apps/mydb/collections/MySharedCollections.js b/app/packs/src/apps/mydb/collections/MySharedCollections.js
index 7e554fb21..da2b0acc8 100644
--- a/app/packs/src/apps/mydb/collections/MySharedCollections.js
+++ b/app/packs/src/apps/mydb/collections/MySharedCollections.js
@@ -76,10 +76,11 @@ export default class MySharedCollections extends React.Component {
   label(node) {
     if (node.label == "My Shared Collections") {
       return (
-        <div className="root-label">
-          My Shared Collections
-        </div>
-      )
+        <FormControl 
+        value ="My Shared Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
     } else if (node.is_locked) {
       return (
         <FormControl className="collection-label" type="text"
@@ -125,7 +126,9 @@ export default class MySharedCollections extends React.Component {
       return (
         <div className="root-actions">
           <Button bsSize="xsmall" bsStyle="warning"
-            onClick={this.bulkUpdate.bind(this)}>
+            onClick={this.bulkUpdate.bind(this)}
+            onMouseDown={(e)=>{e.stopPropagation();}}
+            >
             Update
           </Button>
         </div>
diff --git a/app/packs/src/apps/mydb/collections/SharedWithMeCollections.js b/app/packs/src/apps/mydb/collections/SharedWithMeCollections.js
index 671fd97d8..6d96879ac 100644
--- a/app/packs/src/apps/mydb/collections/SharedWithMeCollections.js
+++ b/app/packs/src/apps/mydb/collections/SharedWithMeCollections.js
@@ -59,10 +59,11 @@ export default class SharedWithMeCollections extends React.Component {
   label(node) {
     if(node.label == "Shared with me Collections") {
       return (
-        <div className="root-label">
-          Synchronized with me Collections
-        </div>
-      )
+        <FormControl 
+        value ="Synchronized with me Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
     } else {
       return (
         <FormControl
diff --git a/app/packs/src/apps/mydb/collections/SyncWithMeCollections.js b/app/packs/src/apps/mydb/collections/SyncWithMeCollections.js
index b241ca653..3e232d5e0 100644
--- a/app/packs/src/apps/mydb/collections/SyncWithMeCollections.js
+++ b/app/packs/src/apps/mydb/collections/SyncWithMeCollections.js
@@ -58,10 +58,11 @@ export default class SyncWithMeCollections extends React.Component {
   label(node) {
     if (node.root) {
       return (
-        <div className="root-label">
-          Synchronized with me Collections
-        </div>
-      )
+        <FormControl 
+        value ="Synchronized with me Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
     }
     return (
       <FormControl

From 969d826aad3bfb52020a859672812f14c93c90e9 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Wed, 29 Nov 2023 11:10:24 +0100
Subject: [PATCH 220/258] fix: update chemspectra client to prevent crash on CV
 layout

Co-authored-by: Lan Le <lan.le@kit.edu>

Refs: #1637, https://github.com/ComPlat/react-spectra-editor/pull/177
---
 package.json |  4 ++--
 yarn.lock    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 3458e62cd..2081263c0 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
-    "@complat/chem-spectra-client": "1.0.0-rc20",
-    "@complat/react-spectra-editor": "1.0.0-rc20",
+    "@complat/chem-spectra-client": "1.0.0-rc20.patch-1",
+    "@complat/react-spectra-editor": "1.0.0-rc20.patch-1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",
diff --git a/yarn.lock b/yarn.lock
index 8c374be2c..230bdb556 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2236,12 +2236,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@complat/chem-spectra-client@1.0.0-rc20":
-  version "1.0.0-rc20"
-  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc20.tgz#9e3e9bdfb0d988ca350e2d6fa71337ce7484f3ff"
-  integrity sha512-yKtljOOe3x9pO/wGM9+2zdZv8m8G2qdfqNjHmlhxq9fj5vXNJ9eW5KPPSXuZiDMVYeysmnCxUohIdGR6jo7jPw==
+"@complat/chem-spectra-client@1.0.0-rc20.patch-1":
+  version "1.0.0-rc20.patch-1"
+  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc20.patch-1.tgz#0c5f946469eb29e575c5ba0897d393677aeb8c85"
+  integrity sha512-cVoyY5dg9ZqWmLbo2J+Ii5UlvQHByFtuKuo+ZA6FM+S6cShg4aAvUmCDred9xFZh3xL7z4A1fATLbJvdR6fcVw==
   dependencies:
-    "@complat/react-spectra-editor" "1.0.0-rc20"
+    "@complat/react-spectra-editor" "1.0.0-rc20.patch-1"
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"
     "@mui/icons-material" "^5.14.9"
@@ -2259,10 +2259,10 @@
     redux-form "^8.3.7"
     redux-saga "^1.1.3"
 
-"@complat/react-spectra-editor@1.0.0-rc20":
-  version "1.0.0-rc20"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc20.tgz#8ae1d8e8ef56754f6c21a51c6b801e8fbc4bc4d8"
-  integrity sha512-UkZJD5a/KBDHBHCFh3juZEN+EOwuwHkPpSqAc7mtYTA8u++kLAiM2MhFntgfL3q5GWnZ70wpl0/LZUVswBVh+Q==
+"@complat/react-spectra-editor@1.0.0-rc20.patch-1":
+  version "1.0.0-rc20.patch-1"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc20.patch-1.tgz#0b4ccc8d87800abdbf51e94b065f7d2fd97af343"
+  integrity sha512-CYpfS5jOdwVSv/qcdejoUpZxgHOKicUU2O9iEVcJBLmNtJASrtFn9QaLPxFMvjYuPoGl8CRogv12BIuydABmQg==
   dependencies:
     "@babel/preset-env" "^7.21.5"
     "@babel/preset-react" "^7.18.6"

From 3da928ae0952aae17990b54d635b0aa151f5cb97 Mon Sep 17 00:00:00 2001
From: Mehreen Mansur <mehreen.mansur@gmail.com>
Date: Wed, 29 Nov 2023 12:47:59 +0100
Subject: [PATCH 221/258] feat: show research plan links in reaction (#1575)

* add research plans linked to reaction

* update research plan api

---------

Co-authored-by: Mehreen <mehreen.mansur>
---
 app/api/chemotion/reaction_api.rb             |  3 +-
 app/api/chemotion/research_plan_api.rb        | 17 +++-
 .../details/reactions/ReactionDetails.js      |  9 ++-
 .../ResearchPlanDetailsField.js               |  1 -
 .../labels/ElementResearchPlanLabels.js       | 81 +++++++++++++++++++
 app/packs/src/fetchers/ReactionsFetcher.js    | 60 ++++++++------
 .../src/fetchers/ResearchPlansFetcher.js      | 13 +++
 app/packs/src/models/Reaction.js              | 10 +++
 spec/api/research_plan_api_spec.rb            | 43 +++++-----
 spec/factories/research_plans.rb              | 16 +++-
 10 files changed, 196 insertions(+), 57 deletions(-)
 create mode 100644 app/packs/src/apps/mydb/elements/labels/ElementResearchPlanLabels.js

diff --git a/app/api/chemotion/reaction_api.rb b/app/api/chemotion/reaction_api.rb
index 2e3d7032e..b20f88ff2 100644
--- a/app/api/chemotion/reaction_api.rb
+++ b/app/api/chemotion/reaction_api.rb
@@ -91,6 +91,7 @@ class ReactionAPI < Grape::API
 
         get do
           reaction = Reaction.find(params[:id])
+          class_name = reaction&.class&.name
 
           {
             reaction: Entities::ReactionEntity.represent(
@@ -98,7 +99,7 @@ class ReactionAPI < Grape::API
               policy: @element_policy,
               detail_levels: ElementDetailLevelCalculator.new(user: current_user, element: reaction).detail_levels,
             ),
-            literatures: Entities::LiteratureEntity.represent(citation_for_elements(params[:id], 'Reaction')),
+            literatures: Entities::LiteratureEntity.represent(citation_for_elements(params[:id], class_name)),
             publication: Publication.find_by(element: reaction) || {},
           }
         end
diff --git a/app/api/chemotion/research_plan_api.rb b/app/api/chemotion/research_plan_api.rb
index 9609f0b59..740482bb3 100644
--- a/app/api/chemotion/research_plan_api.rb
+++ b/app/api/chemotion/research_plan_api.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Chemotion
   # rubocop: disable Metrics/ClassLength
 
@@ -20,8 +22,8 @@ class ResearchPlanAPI < Grape::API
       get do
         scope = if params[:collection_id]
           begin
-            Collection.belongs_to_or_shared_by(current_user.id,current_user.group_ids).
-              find(params[:collection_id]).research_plans
+            Collection.belongs_to_or_shared_by(current_user.id, current_user.group_ids)
+                      .find(params[:collection_id]).research_plans
           rescue ActiveRecord::RecordNotFound
             ResearchPlan.none
           end
@@ -138,6 +140,17 @@ class ResearchPlanAPI < Grape::API
         end
       end
 
+      desc 'Return element linked to research plan'
+      params do
+        requires :id, type: Integer, desc: 'Research plan id'
+        requires :element, type: String, desc: 'Sample or Reaction'
+      end
+
+      get 'linked' do
+        type = "#{params[:element]}_id"
+        ResearchPlan.where('body @> ?', [{ value: { type => params[:id] } }].to_json).select(:id, :name)
+      end
+
       desc 'Return serialized research plan by id'
       params do
         requires :id, type: Integer, desc: 'Research plan id'
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index b5d961f5f..93e0ee3ee 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -8,6 +8,7 @@ import {
 import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
 import { findIndex, cloneDeep } from 'lodash';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
+import ElementResearchPlanLabels from 'src/apps/mydb/elements/labels/ElementResearchPlanLabels';
 import ElementAnalysesLabels from 'src/apps/mydb/elements/labels/ElementAnalysesLabels';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import DetailActions from 'src/stores/alt/actions/DetailActions';
@@ -441,6 +442,10 @@ export default class ReactionDetails extends Component {
     const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
       reaction.publication.taggable_data.scheme_only === true) || false;
 
+    const rsPlanLabel = (reaction.isNew || _.isEmpty(reaction.research_plans)) ? null : (
+      <ElementResearchPlanLabels plans={reaction.research_plans} key={reaction.id} placement="right" />
+    );
+
     return (
       <div>
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
@@ -514,7 +519,8 @@ export default class ReactionDetails extends Component {
         </OverlayTrigger>
         <div style={{ display: "inline-block", marginLeft: "10px" }}>
           {colLabel}
-          <ElementAnalysesLabels element={reaction} key={reaction.id+"_analyses"}/>
+          {rsPlanLabel}
+          <ElementAnalysesLabels element={reaction} key={reaction.id + "_analyses"} />
           { schemeOnly ? <span>&nbsp;<Label>scheme only</Label></span> : '' }
           <HeaderCommentSection element={reaction} />
         </div>
@@ -656,7 +662,6 @@ export default class ReactionDetails extends Component {
       green_chemistry: 'Green Chemistry'
     }
 
-
     addSegmentTabs(reaction, this.handleSegmentsChange, tabContentsMap);
     const stb = [];
     const tabContents = [];
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsField.js b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsField.js
index 2ce0b7fc9..f63bb6668 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsField.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsField.js
@@ -10,7 +10,6 @@ import ResearchPlanDetailsFieldImage from 'src/apps/mydb/elements/details/resear
 import ResearchPlanDetailsFieldTable from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTable';
 import ResearchPlanDetailsFieldSample from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldSample';
 import ResearchPlanDetailsFieldReaction from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldReaction';
-import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 
 export default class ResearchPlanDetailsField extends Component {
   render() {
diff --git a/app/packs/src/apps/mydb/elements/labels/ElementResearchPlanLabels.js b/app/packs/src/apps/mydb/elements/labels/ElementResearchPlanLabels.js
new file mode 100644
index 000000000..b0a135620
--- /dev/null
+++ b/app/packs/src/apps/mydb/elements/labels/ElementResearchPlanLabels.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Label, Button, OverlayTrigger, Popover } from 'react-bootstrap';
+
+export default class ElementResearchPlanLabels extends React.Component {
+  constructor(props) {
+
+    super(props);
+    this.state = {
+      research_plans: props.plans
+    };
+
+    this.handleOnClick = this.handleOnClick.bind(this);
+    this.preventOnClick = this.preventOnClick.bind(this);
+  }
+
+  handleOnClick(label, e) {
+    e.stopPropagation();
+
+    let url = "/research_plan/" + label.id;
+    Aviator.navigate(url);
+  }
+
+  preventOnClick(e) {
+    e.stopPropagation();
+  }
+
+  formatLabels(labels) {
+    return labels.map((label, index) => {
+      return (
+        <span className="collection-label" key={index}>
+          <Button bsStyle="default" bsSize="xs" onClick={e => this.handleOnClick(label, e)}>
+            {label.name}
+          </Button>
+          &nbsp;
+        </span>
+      );
+    });
+  }
+
+  renderCollectionsLabels(research_plans) {
+    if (research_plans == undefined) return <span />;
+
+    return (
+      <div>
+        <h3 className="popover-title">Research Plans</h3>
+        <div className="popover-content">
+          {this.formatLabels(research_plans)}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { research_plans } = this.state;
+
+    let placement = 'right';
+    let researchPlanOverlay = (
+      <Popover className="collection-overlay" id="element-collections">
+        {this.renderCollectionsLabels(research_plans)}
+      </Popover>
+    );
+
+    return (
+      <div style={{display: "inline-block"}} onClick={this.preventOnClick}>
+        <OverlayTrigger
+          trigger="click"
+          rootClose
+          placement={placement}
+          overlay={researchPlanOverlay}
+        >
+          <span className="collection-label" >
+            <Label>
+              <i className="fa fa-file-text-o" />
+                {" " + research_plans.length}
+            </Label>
+          </span>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/fetchers/ReactionsFetcher.js b/app/packs/src/fetchers/ReactionsFetcher.js
index 36dc2572b..cd3c98d63 100644
--- a/app/packs/src/fetchers/ReactionsFetcher.js
+++ b/app/packs/src/fetchers/ReactionsFetcher.js
@@ -6,36 +6,46 @@ import Reaction from 'src/models/Reaction';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import Literature from 'src/models/Literature';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
-import UIStore from 'src/stores/alt/stores/UIStore';
 import defaultAnalysisPublish from 'src/components/utils/defaultAnalysisPublish';
+import ResearchPlansFetcher from './ResearchPlansFetcher';
 
 // TODO: Extract common base functionality into BaseFetcher
 export default class ReactionsFetcher {
-  static fetchById(id) {
-    return fetch(`/api/v1/reactions/${id}.json`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then((json) => {
-        if (json.hasOwnProperty("reaction")) {
-          const reaction = new Reaction(json.reaction);
-          if (json.literatures && json.literatures.length > 0) {
-            const tliteratures = json.literatures.map(literature => new Literature(literature));
-            const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
-            reaction.literatures = lits;
+  static async fetchById(id) {
+    try {
+      const response = await fetch(`/api/v1/reactions/${id}.json`, {
+        credentials: 'same-origin'
+      }).then(response => response.json())
+        .then((json) => {
+          if (json.hasOwnProperty("reaction")) {
+            const reaction = new Reaction(json.reaction);
+            if (json.literatures && json.literatures.length > 0) {
+              const tliteratures = json.literatures.map(literature => new Literature(literature));
+              const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
+              reaction.literatures = lits;
+            }
+            if (json.research_plans && json.research_plans.length > 0) {
+              reaction.research_plans = json.research_plans;
+            }
+            reaction.updateMaxAmountOfProducts();
+            reaction.publication = json.publication || {};
+            return reaction;
           }
-          reaction.updateMaxAmountOfProducts();
-          reaction.publication = json.publication || {};
-          return reaction;
-        }
-        const rReaction = new Reaction(json.reaction);
-        rReaction.publication = json.publication || {};
-        if (json.error) {
-          rReaction.id = `${id}:error:Reaction ${id} is not accessible!`;
-        }
-        return new Reaction(defaultAnalysisPublish(rReaction));
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
+          const rReaction = new Reaction(json.reaction);
+          rReaction.publication = json.publication || {};
+          if (json.error) {
+            rReaction.id = `${id}:error:Reaction ${id} is not accessible!`;
+          }
+          return new Reaction(defaultAnalysisPublish(rReaction));
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+      const researchPlans = await ResearchPlansFetcher.fetchResearchPlansForElements(id, response.type);
+      response['research_plans'] = researchPlans;
+      return response;
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   static fetchByCollectionId(id, queryParams = {}, isSync = false) {
diff --git a/app/packs/src/fetchers/ResearchPlansFetcher.js b/app/packs/src/fetchers/ResearchPlansFetcher.js
index 768ea1705..752826049 100644
--- a/app/packs/src/fetchers/ResearchPlansFetcher.js
+++ b/app/packs/src/fetchers/ResearchPlansFetcher.js
@@ -295,4 +295,17 @@ export default class ResearchPlansFetcher {
 
     return Promise.all(updateTasks);
   }
+
+  static fetchResearchPlansForElements(id, element) {
+    return fetch(`/api/v1/research_plans/linked?id=${id}&element=${element}`, {
+      credentials: 'same-origin',
+      method: 'get',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
 }
diff --git a/app/packs/src/models/Reaction.js b/app/packs/src/models/Reaction.js
index e1ab17919..f44a5decc 100644
--- a/app/packs/src/models/Reaction.js
+++ b/app/packs/src/models/Reaction.js
@@ -115,6 +115,7 @@ export default class Reaction extends Element {
       duration: '',
       durationDisplay: DurationDefault,
       literatures: {},
+      research_plans: {},
       name: '',
       observation: Reaction.quillDefault(),
       products: [],
@@ -182,6 +183,7 @@ export default class Reaction extends Element {
       id: this.id,
       is_published: this.is_published,
       literatures: this.literatures,
+      research_plans: this.research_plans,
       materials: {
         starting_materials: this.starting_materials.map(s => s.serializeMaterial()),
         reactants: this.reactants.map(s => s.serializeMaterial()),
@@ -882,10 +884,18 @@ export default class Reaction extends Element {
     return this._literatures || {};
   }
 
+  get research_plans() {
+      return this._research_plans || {};
+    }
+
   set literatures(literatures) {
     this._literatures = literatures;
   }
 
+  set research_plans(research_plans) {
+    this._research_plans = research_plans;
+  }
+
   get totalVolume() {
     let totalVolume = 0.0;
     const materials = [...this.starting_materials,
diff --git a/spec/api/research_plan_api_spec.rb b/spec/api/research_plan_api_spec.rb
index f37c410af..936187035 100644
--- a/spec/api/research_plan_api_spec.rb
+++ b/spec/api/research_plan_api_spec.rb
@@ -31,31 +31,6 @@
       end
     end
 
-    describe 'GET /api/v1/research_plans' do
-      let!(:c) { create(:collection, label: 'C1', user: user, is_shared: false) }
-      let(:rp) { create(:research_plan) }
-      let!(:research_plan_metadata) { create(:research_plan_metadata) }
-
-      before do
-        rp.research_plan_metadata = research_plan_metadata
-        CollectionsResearchPlan.create!(research_plan: rp, collection: c)
-      end
-
-      it 'returns serialized research_plans of logged in user' do
-        get '/api/v1/research_plans'
-        first_rp = JSON.parse(response.body)['research_plans'].first
-        expect(response.status).to eq 200
-        expect(first_rp).to include(
-          'type' => 'research_plan',
-          'name' => rp.name
-        )
-        expect(first_rp['research_plan_metadata']).to include(
-            'id' => research_plan_metadata.id,
-            'doi' => research_plan_metadata.doi
-        )
-      end
-    end
-
     describe 'POST /api/v1/research_plans' do
       context 'with valid parameters' do
         let(:params) do
@@ -135,5 +110,23 @@
         expect(first_row['readout_1_unit']).to eq first_readout['unit']
       end
     end
+
+    describe 'GET /api/v1/research_plans/linked' do
+      let!(:c) { create(:collection, label: 'C1', user: user) }
+      let!(:research_plan) { create(:research_plan, :with_linked) }
+
+      before do
+        get '/api/v1/research_plans/linked', params: { id: 100, element: 'reaction' }
+      end
+
+      it 'returns 200 status code' do
+        expect(response.status).to eq 200
+      end
+
+      it 'returns research_plans linked to an element' do
+        response_body = JSON.parse(response.body)
+        expect(response_body[0]['name']).to eq research_plan.name
+      end
+    end
   end
 end
diff --git a/spec/factories/research_plans.rb b/spec/factories/research_plans.rb
index c7f64c6bb..8e2287277 100644
--- a/spec/factories/research_plans.rb
+++ b/spec/factories/research_plans.rb
@@ -7,7 +7,7 @@
         { "id"=>SecureRandom.uuid,
           "type"=>"richtext",
           "value"=>{ "ops"=>[{ "insert"=>"some text here\n" }] } },
-          
+
       ]
     end
 
@@ -24,6 +24,20 @@
       end
     end
 
+    trait :with_linked do
+      name { 'Linked Research Plan' }
+
+      body do
+        [
+          {
+            'id' => SecureRandom.uuid,
+            'type' => 'reaction',
+            'value' => { 'reaction_id' => 100 },
+          },
+        ]
+      end
+    end
+
     callback(:before_create) do |research_plan|
       research_plan.creator = FactoryBot.build(:user) unless research_plan.creator
     end

From 4dd79cc4cc1cbbf6b9981030c34d7432106fc184 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Wed, 29 Nov 2023 14:34:32 +0100
Subject: [PATCH 222/258] fix: reaction sort column value not being persistent
 for updated_at column

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>

Refs: #1643
---
 app/packs/src/apps/mydb/elements/list/ElementsTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTable.js b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
index 38f5a4163..79ec04a4c 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTable.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
@@ -185,7 +185,7 @@ export default class ElementsTable extends React.Component {
       // eslint-disable-next-line react/no-direct-mutation-state
       this.state.elementsGroup = filters[type]?.group || 'none';
       // eslint-disable-next-line react/no-direct-mutation-state
-      this.state.elementsSort = filters[type]?.sort || true;
+      this.state.elementsSort =  filters[type]?.sort ?? true;
       // eslint-disable-next-line react/no-direct-mutation-state
       this.state.sortDirection = filters[type]?.direction || 'DESC';
     }

From 5ca9d27ac1d40f422e841475420877a9290e5dd3 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Tue, 5 Dec 2023 15:26:15 +0100
Subject: [PATCH 223/258] fix(spectra): correctly trigger action spinner when
 saving peaks to avoid race condition

Co-authored-by: Lan Le <lan.le@kit.edu>

Refs: #1651
---
 .../src/apps/mydb/elements/details/samples/SampleDetails.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index dbdc15696..edf8866dc 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -449,7 +449,7 @@ export default class SampleDetails extends React.Component {
   }
 
   handleSubmit(closeView = false) {
-    LoadingActions.start();
+    LoadingActions.start.defer();
     const { sample, validCas } = this.state;
     this.checkMolfileChange();
     if (!validCas) {

From 9d68f4529b8addaae04cefc96067f86794eb2859 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Tue, 5 Dec 2023 15:28:23 +0100
Subject: [PATCH 224/258] fix(spectra): order of J value

Co-authored-by: Lan Le <lan.le@kit.edu>

Ref: #1649, https://github.com/ComPlat/react-spectra-editor/pull/179
---
 package.json |  4 ++--
 yarn.lock    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 2081263c0..dfc9ffacc 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
-    "@complat/chem-spectra-client": "1.0.0-rc20.patch-1",
-    "@complat/react-spectra-editor": "1.0.0-rc20.patch-1",
+    "@complat/chem-spectra-client": "1.0.0-rc21",
+    "@complat/react-spectra-editor": "1.0.0-rc21",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",
diff --git a/yarn.lock b/yarn.lock
index 230bdb556..05ceba6be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2236,12 +2236,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@complat/chem-spectra-client@1.0.0-rc20.patch-1":
-  version "1.0.0-rc20.patch-1"
-  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc20.patch-1.tgz#0c5f946469eb29e575c5ba0897d393677aeb8c85"
-  integrity sha512-cVoyY5dg9ZqWmLbo2J+Ii5UlvQHByFtuKuo+ZA6FM+S6cShg4aAvUmCDred9xFZh3xL7z4A1fATLbJvdR6fcVw==
+"@complat/chem-spectra-client@1.0.0-rc21":
+  version "1.0.0-rc21"
+  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc21.tgz#da1b9ac0340b95cf31eb0da9b06f35c58b3620b6"
+  integrity sha512-Z/50cCy4SdadDUJDuL202BVciK6G1WCghLNgwbpI1Qq6v9myHBuhcprYUS6F3K6EradCKwZO5NXsjLn1Silazw==
   dependencies:
-    "@complat/react-spectra-editor" "1.0.0-rc20.patch-1"
+    "@complat/react-spectra-editor" "1.0.0-rc21"
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"
     "@mui/icons-material" "^5.14.9"
@@ -2259,10 +2259,10 @@
     redux-form "^8.3.7"
     redux-saga "^1.1.3"
 
-"@complat/react-spectra-editor@1.0.0-rc20.patch-1":
-  version "1.0.0-rc20.patch-1"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc20.patch-1.tgz#0b4ccc8d87800abdbf51e94b065f7d2fd97af343"
-  integrity sha512-CYpfS5jOdwVSv/qcdejoUpZxgHOKicUU2O9iEVcJBLmNtJASrtFn9QaLPxFMvjYuPoGl8CRogv12BIuydABmQg==
+"@complat/react-spectra-editor@1.0.0-rc21":
+  version "1.0.0-rc21"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc21.tgz#3d62f3ed3eac788817e47f76c47df7289eebc9cc"
+  integrity sha512-2k/O3vmuRh/9N21qO9M8yKLMmGMQtEouF/lvKxuwFt1NsE7y+1SgWy9uAHX79yJxqi5Y/UDArjaS8VyqpgAB1A==
   dependencies:
     "@babel/preset-env" "^7.21.5"
     "@babel/preset-react" "^7.18.6"

From 64cb703eb1c4765fa1690dfada86d3f55e8b0e53 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Tue, 5 Dec 2023 15:55:56 +0100
Subject: [PATCH 225/258] feat: sorting option for datasets and attachments in
 the inbox by creation-time or name

* feat: modify the sorting in the inbox based on user selection (name/creation time)
add test codes
prevent the deviceBox from being closed when ordering is changed

deviceBox not to change with the sorting options. They will always be fixed and sorted by the name
unsorted files are sorted with the selected sorting
attachments within the datasets are sorted with the selected sorting
the sorting icon is modified
the default inbox sizing is made smaller to col-md-4
tooltip texts are directed downward

---------

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>

Refs: #1446
---
 app/api/chemotion/inbox_api.rb                | 36 ++++++++-
 app/api/entities/inbox_entity.rb              | 26 ++++++-
 app/assets/stylesheets/common.scss            |  9 +++
 app/packs/src/apps/mydb/inbox/DeviceBox.js    | 45 +++++------
 app/packs/src/apps/mydb/inbox/InboxModal.js   | 78 ++++++++++++++++++-
 app/packs/src/apps/mydb/inbox/UnsortedBox.js  | 67 ++++++++++------
 app/packs/src/fetchers/InboxFetcher.js        | 20 ++++-
 .../src/stores/alt/actions/InboxActions.js    |  9 ++-
 app/packs/src/stores/alt/stores/InboxStore.js | 21 ++++-
 app/services/inbox_service.rb                 |  6 +-
 spec/api/inbox_api_spec.rb                    | 56 +++++++++++++
 11 files changed, 308 insertions(+), 65 deletions(-)

diff --git a/app/api/chemotion/inbox_api.rb b/app/api/chemotion/inbox_api.rb
index d26bae081..508b01d8a 100644
--- a/app/api/chemotion/inbox_api.rb
+++ b/app/api/chemotion/inbox_api.rb
@@ -4,9 +4,20 @@ module Chemotion
   class InboxAPI < Grape::API
     helpers ParamsHelpers
 
+    helpers do
+      def build_sort_params(params_sort_column)
+        sort_column = params_sort_column.eql?('created_at') ? params_sort_column : 'filename'
+        sort_direction = sort_column.eql?('created_at') ? 'DESC' : 'ASC'
+        { sort_column: sort_column, sort_direction: sort_direction }
+      end
+    end
+
     resource :inbox do
       params do
         requires :cnt_only, type: Boolean, desc: 'return count number only'
+        optional :sort_column, type: String, desc: 'sort by creation time or name',
+                               values: %w[created_at name],
+                               default: 'name'
       end
 
       paginate per_page: 20, offset: 0, max_per_page: 50
@@ -20,7 +31,9 @@ class InboxAPI < Grape::API
                                           root: :inbox,
                                           only: [:inbox_count]
         else
-          scope = current_user.container.children.order(created_at: :desc)
+          sort_params = build_sort_params(params[:sort_column])
+
+          scope = current_user.container.children.order(:name)
 
           reset_pagination_page(scope)
 
@@ -29,7 +42,7 @@ class InboxAPI < Grape::API
           end
 
           inbox_service = InboxService.new(current_user.container)
-          present inbox_service.to_hash(device_boxes, true)
+          present inbox_service.to_hash(device_boxes, sort_params, true)
         end
       end
 
@@ -37,23 +50,40 @@ class InboxAPI < Grape::API
       params do
         requires :container_id, type: Integer, desc: 'subcontainer ID'
         optional :dataset_page, type: Integer, desc: 'Pagination number'
+        optional :sort_column, type: String, desc: 'sort by creation time or name',
+                               values: %w[created_at name],
+                               default: 'name'
       end
 
       get 'containers/:container_id' do
         if current_user.container.present?
           container = current_user.container.children.find params[:container_id]
 
+          dataset_sort_column = params[:sort_column].presence || 'name'
+          sort_params = build_sort_params(params[:sort_column])
+
           Entities::InboxEntity.represent(container,
                                           root_container: false,
                                           dataset_page: params[:dataset_page],
+                                          dataset_sort_column: dataset_sort_column,
+                                          sort_column: sort_params[:sort_column],
+                                          sort_direction: sort_params[:sort_direction],
                                           root: :inbox)
         end
       end
 
       desc 'Returns unlinked attachments for inbox'
+      params do
+        optional :sort_column, type: String, desc: 'sort unlinked attachments by creation time or name',
+                               values: %w[created_at name],
+                               default: 'name'
+      end
+
       get 'unlinked_attachments' do
+        sort_params = build_sort_params(params[:sort_column])
+
         inbox_service = InboxService.new(current_user.container)
-        present inbox_service.to_hash(nil, false)
+        present inbox_service.to_hash(nil, sort_params, false)
       end
 
       resource :samples do
diff --git a/app/api/entities/inbox_entity.rb b/app/api/entities/inbox_entity.rb
index d50e2f68c..eb3102d87 100644
--- a/app/api/entities/inbox_entity.rb
+++ b/app/api/entities/inbox_entity.rb
@@ -19,10 +19,28 @@ class InboxEntity < ApplicationEntity
 
     def children
       depth = options[:root_container] ? 1 : 2
-      dataset_page = options[:dataset_page].to_i || 1
+      start_index, end_index = calculate_indices
+
+      parent_objects = object.hash_tree(limit_depth: depth)[object].to_a
+      sorted_parents = sort_parent_objects(parent_objects)
+
+      parents_slice = sorted_parents[start_index..end_index]
+
+      serialize_children(parents_slice.to_h)
+    end
+
+    def calculate_indices
+      dataset_page = (options[:dataset_page] || 1).to_i
       start_index = (dataset_page - 1) * DATASETS_PER_PAGE
       end_index = start_index + DATASETS_PER_PAGE - 1
-      serialize_children(object.hash_tree(limit_depth: depth)[object].to_a.slice(start_index..end_index).to_h)
+      [start_index, end_index]
+    end
+
+    # here the datasets within the deviceBoxes are being sorted
+
+    def sort_parent_objects(parent_objects)
+      sorted_parents = parent_objects.sort_by { |container, _| container.send(options[:dataset_sort_column]) }
+      options[:dataset_sort_column].eql?('created_at') ? sorted_parents.reverse : sorted_parents
     end
 
     def serialize_children(container_tree_hash)
@@ -49,7 +67,7 @@ def unlinked_attachments
         attachable_type: 'Container',
         attachable_id: nil,
         created_for: object&.containable&.id,
-      )
+      ).order("#{options[:sort_column]} #{options[:sort_direction]}")
     end
 
     def all_descendants_attachments
@@ -59,7 +77,7 @@ def all_descendants_attachments
                                                          FROM attachments AS sub_attachments
                                                          WHERE sub_attachments.attachable_id = attachments.attachable_id
                                                          LIMIT 50
-                                                       )")
+                                                       )").order("#{options[:sort_column]} #{options[:sort_direction]}")
     end
 
     def inbox_count
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e7d9c07bb..85cc0dbae 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -414,6 +414,15 @@ $color-required: #d9534f;
   cursor: pointer;
 }
 
+.btn-inbox-sort {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
 .dataset-pagination {
   text-align: center;
   margin-top: 5px;
diff --git a/app/packs/src/apps/mydb/inbox/DeviceBox.js b/app/packs/src/apps/mydb/inbox/DeviceBox.js
index a2baf693f..ca6ec05a2 100644
--- a/app/packs/src/apps/mydb/inbox/DeviceBox.js
+++ b/app/packs/src/apps/mydb/inbox/DeviceBox.js
@@ -45,10 +45,18 @@ export default class DeviceBox extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { deviceBoxVisible } = this.props;
+    const { deviceBoxVisible, device_box } = this.props;
+    const { currentDeviceBoxPage } = this.state;
+
     if (deviceBoxVisible !== prevProps.deviceBoxVisible) {
       this.setState({ visible: deviceBoxVisible });
     }
+
+    if (deviceBoxVisible) {
+      if (Array.isArray(device_box.children) && !device_box.children.length) {
+        InboxActions.fetchInboxContainer(device_box.id, currentDeviceBoxPage);
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -57,21 +65,21 @@ export default class DeviceBox extends React.Component {
 
   handleDeviceBoxClick(deviceBox) {
     const { visible, currentDeviceBoxPage } = this.state;
-    const { fromCollectionTree } = this.props;
 
     InboxActions.setActiveDeviceBoxId(deviceBox.id);
 
-    if (fromCollectionTree) {
-      return;
-    }
-
     if (!visible) {
       if (Array.isArray(deviceBox.children) && !deviceBox.children.length) {
         LoadingActions.start();
         InboxActions.fetchInboxContainer(deviceBox.id, currentDeviceBoxPage);
       }
     }
-    this.setState({ visible: !visible, checkedDeviceAll: false, checkedDeviceIds: [], checkedIds: [] });
+    this.setState({
+      visible: !visible,
+      checkedDeviceAll: false,
+      checkedDeviceIds: [],
+      checkedIds: [],
+    });
   }
 
   handleDatasetSelect(datasetId) {
@@ -162,7 +170,7 @@ export default class DeviceBox extends React.Component {
       params.type = true;
     }
 
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       ...prevState.inboxState,
       checkedDeviceAll: !this.state.checkedDeviceAll
     }));
@@ -210,16 +218,11 @@ export default class DeviceBox extends React.Component {
   }
 
   deleteDeviceBox(deviceBox) {
-    const { fromCollectionTree } = this.props;
-    if (fromCollectionTree) {
-      return;
-    }
-
     InboxActions.deleteContainer(deviceBox);
   }
 
   render() {
-    const { device_box, largerInbox, fromCollectionTree } = this.props;
+    const { device_box, largerInbox } = this.props;
     const {
       visible, checkedDeviceAll, checkedDeviceIds, checkedIds, currentDeviceBoxPage, dataItemsPerPage,
     } = this.state;
@@ -235,7 +238,7 @@ export default class DeviceBox extends React.Component {
       <div>
         <input
           type="checkbox"
-          checked={checkedDeviceIds.length === currentItemsCount && currentItemsCount !== 0 }
+          checked={checkedDeviceIds.length === currentItemsCount && currentItemsCount !== 0}
           onChange={this.toggleSelectAllFiles}
         />
         <span className="g-marginLeft--10" style={{ fontWeight: 'bold' }}>
@@ -275,10 +278,6 @@ export default class DeviceBox extends React.Component {
       </span>
     );
 
-    device_box.children.sort((a, b) => {
-      if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
-    });
-
     const datasets = device_box.children.map((dataset) => (
       <DatasetContainer
         key={`dataset_${dataset.id}`}
@@ -326,7 +325,7 @@ export default class DeviceBox extends React.Component {
           <button
             type="button"
             className="btn-inbox"
-            onClick={!fromCollectionTree ? () => this.setState({ visible: !visible }) : null}
+            onClick={() => this.setState({ visible: !visible })}
             tabIndex={0}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
@@ -343,7 +342,7 @@ export default class DeviceBox extends React.Component {
           </button>
         </div>
         {
-          visible && !fromCollectionTree && device_box?.children_count > dataItemsPerPage ? (
+          visible && device_box?.children_count > dataItemsPerPage ? (
             <Pagination
               currentDataSetPage={currentDeviceBoxPage}
               totalPages={totalPages}
@@ -364,7 +363,7 @@ export default class DeviceBox extends React.Component {
             </tr>
           </tbody>
         </table>
-        <div>{visible && !fromCollectionTree ? datasets : null}</div>
+        <div>{visible ? datasets : null}</div>
       </div>
     );
   }
@@ -373,12 +372,10 @@ export default class DeviceBox extends React.Component {
 DeviceBox.propTypes = {
   device_box: PropTypes.object.isRequired,
   largerInbox: PropTypes.bool,
-  fromCollectionTree: PropTypes.bool,
   deviceBoxVisible: PropTypes.bool,
 };
 
 DeviceBox.defaultProps = {
   largerInbox: false,
-  fromCollectionTree: false,
   deviceBoxVisible: false,
 };
diff --git a/app/packs/src/apps/mydb/inbox/InboxModal.js b/app/packs/src/apps/mydb/inbox/InboxModal.js
index 95d614409..e7820a32b 100644
--- a/app/packs/src/apps/mydb/inbox/InboxModal.js
+++ b/app/packs/src/apps/mydb/inbox/InboxModal.js
@@ -12,6 +12,8 @@ import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import DeviceBox from 'src/apps/mydb/inbox/DeviceBox';
 import UnsortedBox from 'src/apps/mydb/inbox/UnsortedBox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
 
 export default class InboxModal extends React.Component {
   constructor(props) {
@@ -29,6 +31,7 @@ export default class InboxModal extends React.Component {
       itemsPerPage: inboxState.itemsPerPage,
       totalPages: inboxState.totalPages,
       activeDeviceBoxId: inboxState.activeDeviceBoxId,
+      sortColumn: 'name',
     };
 
     this.onChange = this.onChange.bind(this);
@@ -43,6 +46,7 @@ export default class InboxModal extends React.Component {
     InboxStore.listen(this.onChange);
     UIStore.listen(this.onUIStoreChange);
     InboxActions.fetchInboxCount();
+    this.initState();
   }
 
   componentWillUnmount() {
@@ -89,6 +93,74 @@ export default class InboxModal extends React.Component {
     }
   }
 
+  initState = () => {
+    const type = 'inbox';
+    const userState = UserStore.getState();
+    const filters = userState?.profile?.data?.filters || {};
+
+    // you are not able to use this.setState because this would rerender it again and again ...
+
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.sortColumn = filters[type]?.sort || 'name';
+  };
+
+  updateFilterAndUserProfile = (type, sort) => {
+    InboxActions.changeInboxFilter({
+      name: type,
+      sort: sort,
+    });
+
+    UserActions.updateUserProfile({
+      data: {
+        filters: {
+          [type]: {
+            sort: sort,
+          },
+        },
+      },
+    });
+  };
+
+  changeSortColumn = () => {
+    const type = 'inbox';
+    const { sortColumn } = this.state;
+    const sort = sortColumn === 'created_at' ? 'name' : 'created_at';
+
+    this.setState({
+      sortColumn: sort,
+    }, () => {
+      this.updateFilterAndUserProfile(type, sort);
+    });
+  };
+
+  renderSortButton() {
+    this.initState();
+
+    const sortTitle = this.state.sortColumn === 'name'
+        ? `click to sort datasets and attachments by creation date (descending) - currently sorted by name (ascending)`
+        : `click to sort datasets and attachments by name (ascending) - currently sorted by creation date (descending)`;
+    const sortTooltip = <Tooltip id="inbox_sort_tooltip">{sortTitle}</Tooltip>;
+    const sortIconClass = this.state.sortColumn === 'name' ? 'fa-sort-alpha-asc' : 'fa-clock-o';
+    const sortIcon = <i className={`fa ${sortIconClass}`} />;
+    const sortContent = (
+      <OverlayTrigger placement="bottom" overlay={sortTooltip}>
+        <button
+            type="button"
+            className="btn-inbox-sort"
+            onClick={this.changeSortColumn}
+        >
+          {sortIcon}
+        </button>
+      </OverlayTrigger>
+    );
+
+    return (
+      <>
+        {sortContent}
+      </>
+    );
+  }
+
   refreshInbox() {
     const { currentPage, itemsPerPage } = this.state;
     LoadingActions.start();
@@ -169,6 +241,7 @@ export default class InboxModal extends React.Component {
       inbox.children.sort((a, b) => {
         if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
       });
+
       boxes = inbox.children.map(deviceBox => (
         <DeviceBox
           key={`box_${deviceBox.id}`}
@@ -213,7 +286,7 @@ export default class InboxModal extends React.Component {
 
     return (
       <CopyToClipboard text={collectorAddress}>
-        <OverlayTrigger placement="top" overlay={this.infoMessage()}>
+        <OverlayTrigger placement="bottom" overlay={this.infoMessage()}>
           <Button
             bsSize="xsmall"
             className="btn btn-circle btn-sm btn-info button-right"
@@ -231,7 +304,7 @@ export default class InboxModal extends React.Component {
       visible, inboxVisible, numberOfAttachments, collectorAddress
     } = this.state;
 
-    const panelClass = showCollectionTree ? 'small-col col-md-6' : 'small-col col-md-5';
+    const panelClass = showCollectionTree ? 'small-col col-md-4' : 'small-col col-md-5';
     const inboxDisplay = inboxVisible ? '' : 'none';
 
     if (visible) {
@@ -275,6 +348,7 @@ export default class InboxModal extends React.Component {
                 >
                   <i className="fa fa-times" />
                 </Button>
+                {this.renderSortButton()}
                 <Button
                   bsStyle="success"
                   bsSize="xsmall"
diff --git a/app/packs/src/apps/mydb/inbox/UnsortedBox.js b/app/packs/src/apps/mydb/inbox/UnsortedBox.js
index 509ae601e..fb8863218 100644
--- a/app/packs/src/apps/mydb/inbox/UnsortedBox.js
+++ b/app/packs/src/apps/mydb/inbox/UnsortedBox.js
@@ -10,6 +10,7 @@ import Container from 'src/models/Container';
 import UnsortedDatasetModal from 'src/apps/mydb/inbox/UnsortedDatasetModal';
 import InboxStore from 'src/stores/alt/stores/InboxStore';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
+import UserStore from 'src/stores/alt/stores/UserStore';
 
 export default class UnsortedBox extends React.Component {
   constructor(props) {
@@ -51,20 +52,11 @@ export default class UnsortedBox extends React.Component {
     InboxStore.unlisten(this.onChange);
   }
 
-  onChange(state) {
-    this.setState(state);
-  }
-
   handleClick() {
     const { visible } = this.state;
-    const { fromCollectionTree } = this.props;
 
     InboxActions.setActiveDeviceBoxId(-1);
 
-    if (fromCollectionTree) {
-      return;
-    }
-
     this.setState({ visible: !visible });
   }
 
@@ -97,11 +89,43 @@ export default class UnsortedBox extends React.Component {
     this.handleFileModalOpen(datasetContainer);
   }
 
-  hasChecked() {
-    const { checkedAll } = this.state;
-    return checkedAll;
+  onChange(state) {
+    this.setState(state);
   }
 
+  sortUnsortedItem = (currentItems) => {
+    const type = 'inbox';
+    const userState = UserStore.getState();
+    const filters = userState?.profile?.data?.filters || {};
+    const sortColumn = filters[type]?.sort || 'created_at';
+
+    switch (sortColumn) {
+      case 'created_at':
+        return currentItems.slice().sort((a, b) => {
+          const dateA = new Date(a.created_at).getTime();
+          const dateB = new Date(b.created_at).getTime();
+
+          // Sort in descending order
+          return dateB - dateA;
+        });
+
+      case 'name':
+        return currentItems.slice().sort((a, b) => {
+          if (a.filename > b.filename) {
+            return 1;
+          }
+          if (a.filename < b.filename) {
+            return -1;
+          }
+          return 0;
+        });
+
+      default:
+        // Default case: return currentItems as they are
+        return currentItems.slice();
+    }
+  };
+
   toggleSelectAllCheckbox() {
     const { checkedAll } = this.state;
     const params = {
@@ -111,13 +135,13 @@ export default class UnsortedBox extends React.Component {
     if (!checkedAll) {
       params.type = true;
     }
-    this.setState(prevState => ({ ...prevState.inboxState, checkedAll: !this.state.checkedAll }));
+    this.setState((prevState) => ({ ...prevState.inboxState, checkedAll: !checkedAll }));
     InboxActions.checkedAll(params);
     InboxActions.checkedIds(params);
   }
 
   toggleTooltip() {
-    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
+    this.setState((prevState) => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
   }
 
   deleteCheckedAttachment(unsortedBox) {
@@ -147,14 +171,14 @@ export default class UnsortedBox extends React.Component {
   }
 
   render() {
-    const { unsorted_box, largerInbox, fromCollectionTree } = this.props;
+    const { unsorted_box, largerInbox } = this.props;
     const {
-      visible, modal, checkedAll, checkedIds, currentUnsortedBoxPage, dataItemsPerPage
+      visible, modal, checkedAll, checkedIds, currentUnsortedBoxPage, dataItemsPerPage, deletingTooltip
     } = this.state;
     const startIndex = (currentUnsortedBoxPage - 1) * dataItemsPerPage;
     const endIndex = startIndex + dataItemsPerPage;
     const totalPages = Math.ceil(unsorted_box.length / dataItemsPerPage);
-    const currentItems = unsorted_box.slice(startIndex, endIndex);
+    const currentItems = this.sortUnsortedItem(unsorted_box.slice(startIndex, endIndex));
 
     const renderCheckAll = (
       <div>
@@ -182,7 +206,7 @@ export default class UnsortedBox extends React.Component {
         >
           &nbsp;
         </i>
-        {this.state.deletingTooltip ? (
+        {deletingTooltip ? (
           <Tooltip placement="bottom" className="in" id="tooltip-bottom">
             {`Delete ${checkedIds.length} attachment${checkedIds.length > 1 ? 's' : ''}?`}
             <ButtonGroup
@@ -208,8 +232,7 @@ export default class UnsortedBox extends React.Component {
       </span>
     );
 
-
-    const attachments = visible ? unsorted_box.slice(startIndex, endIndex).map((attachment) => (
+    const attachments = visible ? currentItems.map((attachment) => (
       <AttachmentContainer
         key={`attach_${attachment.id}`}
         sourceType={DragDropItemTypes.UNLINKED_DATA}
@@ -274,7 +297,7 @@ export default class UnsortedBox extends React.Component {
           {uploadButton}
         </div>
         {
-          visible && !fromCollectionTree && unsorted_box.length > dataItemsPerPage ? (
+          visible && unsorted_box.length > dataItemsPerPage ? (
             <Pagination
               currentDataSetPage={currentUnsortedBoxPage}
               totalPages={totalPages}
@@ -306,11 +329,9 @@ UnsortedBox.propTypes = {
   unsorted_box: PropTypes.array.isRequired,
   largerInbox: PropTypes.bool,
   unsortedVisible: PropTypes.bool,
-  fromCollectionTree: PropTypes.bool,
 };
 
 UnsortedBox.defaultProps = {
   largerInbox: false,
   unsortedVisible: false,
-  fromCollectionTree: false,
 };
diff --git a/app/packs/src/fetchers/InboxFetcher.js b/app/packs/src/fetchers/InboxFetcher.js
index 8b676bbce..eb5959ede 100644
--- a/app/packs/src/fetchers/InboxFetcher.js
+++ b/app/packs/src/fetchers/InboxFetcher.js
@@ -1,6 +1,15 @@
+import UserStore from 'src/stores/alt/stores/UserStore';
+
 export default class InboxFetcher {
   static fetchInbox(isCntOnly = false, queryParams = {}) {
-    const promise = fetch(`/api/v1/inbox?cnt_only=${isCntOnly}&page=${queryParams.currentPage || 1}&per_page=${queryParams.itemsPerPage || 20}`, {
+    const userState = UserStore.getState();
+    const filters = userState?.profile?.data?.filters || {};
+    const sortColumn = filters.inbox?.sort || 'name';
+
+    // if the user has not updated its profile yet, we set the default sort to name
+    const addQuery = `&sort_column=${filters.inbox ? sortColumn : 'name'}`;
+
+    const promise = fetch(`/api/v1/inbox?cnt_only=${isCntOnly}&page=${queryParams.currentPage || 1}&per_page=${queryParams.itemsPerPage || 20}${addQuery}`, {
       credentials: 'same-origin'
     })
       .then(response => response.json())
@@ -13,7 +22,14 @@ export default class InboxFetcher {
   }
 
   static fetchInboxByContainer(containerId, currentContainerPage) {
-    const promise = fetch(`/api/v1/inbox/containers/${containerId}?dataset_page=${currentContainerPage || 1}`, {
+    const userState = UserStore.getState();
+    const filters = userState?.profile?.data?.filters || {};
+    const sortColumn = filters.inbox?.sort || 'name';
+
+    // if the user has not updated its profile yet, we set the default sort to name
+    const addQuery = `&sort_column=${filters.inbox ? sortColumn : 'name'}`;
+
+    const promise = fetch(`/api/v1/inbox/containers/${containerId}?dataset_page=${currentContainerPage || 1}${addQuery}`, {
       credentials: 'same-origin'
     })
       .then(response => response.json())
diff --git a/app/packs/src/stores/alt/actions/InboxActions.js b/app/packs/src/stores/alt/actions/InboxActions.js
index 0d7fab8be..544126660 100644
--- a/app/packs/src/stores/alt/actions/InboxActions.js
+++ b/app/packs/src/stores/alt/actions/InboxActions.js
@@ -23,6 +23,10 @@ class InboxActions {
     return null;
   }
 
+  changeInboxFilter(filter) {
+    return filter;
+  }
+
   checkedAll(params) {
     return params;
   }
@@ -59,7 +63,10 @@ class InboxActions {
     return (dispatch) => {
       InboxFetcher.fetchInbox(false, queryParams)
         .then((result) => {
-          dispatch(result.inbox);
+          dispatch({
+            inbox: result.inbox,
+            activeDeviceBoxId: queryParams.activeDeviceBoxId,
+          });
         }).catch((errorMessage) => {
           console.log(errorMessage);
         });
diff --git a/app/packs/src/stores/alt/stores/InboxStore.js b/app/packs/src/stores/alt/stores/InboxStore.js
index d1cf01bc2..b6d515e69 100644
--- a/app/packs/src/stores/alt/stores/InboxStore.js
+++ b/app/packs/src/stores/alt/stores/InboxStore.js
@@ -5,6 +5,7 @@ import ElementActions from 'src/stores/alt/actions/ElementActions';
 import DetailActions from 'src/stores/alt/actions/DetailActions';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 import ArrayUtils from 'src/utilities/ArrayUtils';
+import UserStore from 'src/stores/alt/stores/UserStore';
 
 class InboxStore {
   constructor() {
@@ -69,6 +70,7 @@ class InboxStore {
       setInboxVisible: InboxActions.setInboxVisible,
       setActiveDeviceBoxId: InboxActions.setActiveDeviceBoxId,
       handleFetchInboxUnsorted: InboxActions.fetchInboxUnsorted,
+      handleChangeInboxFilter: InboxActions.changeInboxFilter,
     });
   }
 
@@ -86,11 +88,11 @@ class InboxStore {
     }
   }
 
-  handleFetchInbox(result) {
+  handleFetchInbox(payload) {
     const { itemsPerPage } = this.state;
-    this.state.inbox = result;
+    this.state.inbox = payload.inbox;
     this.state.totalPages = Math.ceil(this.state.inbox.count / itemsPerPage);
-    this.state.activeDeviceBoxId = null;
+    this.state.activeDeviceBoxId = payload.activeDeviceBoxId ? payload.activeDeviceBoxId : null;
 
     this.sync();
     this.countAttachments();
@@ -107,6 +109,19 @@ class InboxStore {
     }));
   }
 
+  handleChangeInboxFilter(filter) {
+    const userState = UserStore.getState();
+    if (!userState.profile.filters) {
+      userState.profile.data.filters = {};
+    }
+    userState.profile.data.filters[filter.name] = {
+      sort: filter.sort,
+    };
+
+    const { currentPage, itemsPerPage, activeDeviceBoxId } = this.state;
+    InboxActions.fetchInbox({ currentPage, itemsPerPage, activeDeviceBoxId });
+  }
+
   handleFetchInboxCount(result) {
     this.state.numberOfAttachments = result.inbox_count;
   }
diff --git a/app/services/inbox_service.rb b/app/services/inbox_service.rb
index 8ce0a97e5..13310c9ef 100644
--- a/app/services/inbox_service.rb
+++ b/app/services/inbox_service.rb
@@ -5,7 +5,7 @@ def initialize(container)
     @container = container
   end
 
-  def to_hash(device_boxes, full_response = true)
+  def to_hash(device_boxes, sort_params, full_response = true)
     if full_response
       {
         inbox: {
@@ -16,7 +16,7 @@ def to_hash(device_boxes, full_response = true)
             attachable_type: 'Container',
             attachable_id: nil,
             created_for: @container&.containable&.id,
-          ).order(created_at: :desc),
+          ).order("#{sort_params[:sort_column]} #{sort_params[:sort_direction]}"),
           inbox_count: Container.where(id: @container.descendant_ids)
                                 .joins(children: :attachments)
                                 .count('attachments.id'),
@@ -29,7 +29,7 @@ def to_hash(device_boxes, full_response = true)
             attachable_type: 'Container',
             attachable_id: nil,
             created_for: @container&.containable&.id,
-          ).order(created_at: :desc),
+          ).order("#{sort_params[:sort_column]} #{sort_params[:sort_direction]}"),
           inbox_count: Container.where(id: @container.descendant_ids)
                                 .joins(children: :attachments)
                                 .count('attachments.id'),
diff --git a/spec/api/inbox_api_spec.rb b/spec/api/inbox_api_spec.rb
index 5f5df0b58..a511145bf 100644
--- a/spec/api/inbox_api_spec.rb
+++ b/spec/api/inbox_api_spec.rb
@@ -52,5 +52,61 @@
         end
       end
     end
+
+    describe 'GET /api/v1/inbox' do
+      context 'when fetching the inbox' do
+        let!(:inbox_container_root) { create(:inbox_container_root) }
+        let!(:inbox_container_child_first) do
+          create(:inbox_container_with_attachments,
+                 name: '1-Dev',
+                 number_of_attachments: 2,
+                 created_at: Time.zone.parse('2023-10-08 12:00:00'))
+        end
+        let!(:inbox_container_child_second) do
+          create(:inbox_container_with_attachments,
+                 name: '2-Dev',
+                 number_of_attachments: 3,
+                 created_at: Time.zone.parse('2023-11-08 12:00:00'))
+        end
+
+        before do
+          inbox_container_root.children << inbox_container_child_first
+          inbox_container_root.children << inbox_container_child_second
+          inbox_container_root.save!
+
+          user.container = inbox_container_root
+        end
+
+        it 'returns the inbox contents sorted by name as default' do
+          get '/api/v1/inbox', params: { cnt_only: false }
+
+          expect(JSON.parse(response.body)['inbox']['children'].size).to eq(2)
+          expect(JSON.parse(response.body)['inbox']['children'].pluck('id')).to eq(
+            [
+              inbox_container_child_first.id,
+              inbox_container_child_second.id,
+            ],
+          )
+        end
+
+        it 'returns the inbox contents sorted by created_at (descending)' do
+          get '/api/v1/inbox', params: { cnt_only: false, sort_column: 'created_at' }
+
+          expect(JSON.parse(response.body)['inbox']['children'].pluck('id')).to eq(
+            [
+              inbox_container_child_second.id,
+              inbox_container_child_first.id,
+            ],
+          )
+        end
+
+        it 'gives error for invalid value for sort_column' do
+          get '/api/v1/reactions', params: { cnt_only: false, sort_column: 'not_allowed' }
+
+          expect(response).to have_http_status(:bad_request)
+          expect(JSON.parse(response.body)['error']).to eq('sort_column does not have a valid value')
+        end
+      end
+    end
   end
 end

From f74ac621b2e0dc96db7737cdc11a9d9a0242ae01 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Thu, 7 Dec 2023 08:46:27 +0100
Subject: [PATCH 226/258] test: fix test with deviceBox sorting in inbox

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>

Refs: #1657 , #1446
---
 spec/api/inbox_api_spec.rb | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/spec/api/inbox_api_spec.rb b/spec/api/inbox_api_spec.rb
index a511145bf..a9c202371 100644
--- a/spec/api/inbox_api_spec.rb
+++ b/spec/api/inbox_api_spec.rb
@@ -89,19 +89,8 @@
           )
         end
 
-        it 'returns the inbox contents sorted by created_at (descending)' do
-          get '/api/v1/inbox', params: { cnt_only: false, sort_column: 'created_at' }
-
-          expect(JSON.parse(response.body)['inbox']['children'].pluck('id')).to eq(
-            [
-              inbox_container_child_second.id,
-              inbox_container_child_first.id,
-            ],
-          )
-        end
-
         it 'gives error for invalid value for sort_column' do
-          get '/api/v1/reactions', params: { cnt_only: false, sort_column: 'not_allowed' }
+          get '/api/v1/inbox', params: { cnt_only: false, sort_column: 'not_allowed' }
 
           expect(response).to have_http_status(:bad_request)
           expect(JSON.parse(response.body)['error']).to eq('sort_column does not have a valid value')

From 10948741a3fdf090a6d92bf28302d41e0fbd6662 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Tue, 12 Dec 2023 07:58:20 +0100
Subject: [PATCH 227/258] feat: add the option to change the inbox sizing

* feat: add the option to change the inbox sizing
make the default inbox sizing smaller to col-md-4

* feat: hide the datetime when inbox size is set to 'Small'
change small inbox size to col-md-2
change css for sort button in inbox modal
modify the info message in the inbox for the sort button

---------

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>
Co-authored-by: mekkyz <mos.mekky@gmail.com>

Refs:  #1645
---
 app/assets/stylesheets/common.scss            |   1 +
 app/assets/stylesheets/elements_details.css   |  12 +
 .../apps/mydb/inbox/AttachmentContainer.js    |  25 +-
 .../src/apps/mydb/inbox/DatasetContainer.js   |  12 +-
 app/packs/src/apps/mydb/inbox/InboxModal.js   | 277 +++++++++++-------
 .../src/stores/alt/actions/InboxActions.js    |   4 +
 app/packs/src/stores/alt/stores/InboxStore.js |   6 +
 7 files changed, 230 insertions(+), 107 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 85cc0dbae..2b72aaee6 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -426,6 +426,7 @@ $color-required: #d9534f;
 .dataset-pagination {
   text-align: center;
   margin-top: 5px;
+  margin-bottom: 10px;
 }
 
 .page-count {
diff --git a/app/assets/stylesheets/elements_details.css b/app/assets/stylesheets/elements_details.css
index f9c395764..0565ec6c8 100644
--- a/app/assets/stylesheets/elements_details.css
+++ b/app/assets/stylesheets/elements_details.css
@@ -6,6 +6,7 @@
   float: right;
   right: 0px;
   margin-left: 2px;
+  text-align: center;
 }
 
 .no-margin {
@@ -141,3 +142,14 @@
   overflow-y: scroll;
   max-height: calc(100vh - 150px);
 }
+
+.header-button {
+  padding: 6px 12px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  margin-left: 10px;
+  min-width: 25px;
+  height: 25px;
+  font-weight: bold;
+}
diff --git a/app/packs/src/apps/mydb/inbox/AttachmentContainer.js b/app/packs/src/apps/mydb/inbox/AttachmentContainer.js
index 8fb590aac..485b3d317 100644
--- a/app/packs/src/apps/mydb/inbox/AttachmentContainer.js
+++ b/app/packs/src/apps/mydb/inbox/AttachmentContainer.js
@@ -37,6 +37,19 @@ class AttachmentContainer extends Component {
     };
     this.toggleAttachmentsCheckbox = this.toggleAttachmentsCheckbox.bind(this);
     this.isAttachmentChecked = this.isAttachmentChecked.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    InboxStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    InboxStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(state);
   }
 
   toggleTooltip() {
@@ -84,6 +97,7 @@ class AttachmentContainer extends Component {
     if (sourceType !== DragDropItemTypes.DATA && sourceType !== DragDropItemTypes.UNLINKED_DATA) {
       return null;
     }
+    const { inboxSize } = InboxStore.getState();
 
     const textStyle = {
       display: 'block',
@@ -168,9 +182,14 @@ class AttachmentContainer extends Component {
             {attachment.filename}
           </span>
         </OverlayTrigger>
-        <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
-          {formatDate(attachment.created_at)}
-        </span>
+        {
+          inboxSize && inboxSize !== 'Small'
+          && (
+            <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
+              {formatDate(attachment.created_at)}
+            </span>
+          )
+        }
       </div>,
       { dropEffect: 'move' }
     );
diff --git a/app/packs/src/apps/mydb/inbox/DatasetContainer.js b/app/packs/src/apps/mydb/inbox/DatasetContainer.js
index 3d3d3e235..9568df81f 100644
--- a/app/packs/src/apps/mydb/inbox/DatasetContainer.js
+++ b/app/packs/src/apps/mydb/inbox/DatasetContainer.js
@@ -71,6 +71,7 @@ class DatasetContainer extends Component {
 
   render() {
     const { connectDragSource, sourceType, dataset, largerInbox, isSelected, onDatasetSelect, checkedIds } = this.props;
+    const { inboxSize } = InboxStore.getState();
 
     if (sourceType === DragDropItemTypes.DATASET) {
       const { visible, deletingTooltip } = this.state;
@@ -154,9 +155,14 @@ class DatasetContainer extends Component {
               </i>
               <span style={{ marginLeft: '8px' }}>{dataset.name}</span>
             </button>
-            <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
-              {formatDate(dataset.created_at)}
-            </span>
+            {
+              inboxSize && inboxSize !== 'Small'
+              && (
+                <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
+                  {formatDate(dataset.created_at)}
+                </span>
+              )
+            }
           </div>
           <div>{visible ? attachments : null}</div>
         </div>,
diff --git a/app/packs/src/apps/mydb/inbox/InboxModal.js b/app/packs/src/apps/mydb/inbox/InboxModal.js
index e7820a32b..f94492dad 100644
--- a/app/packs/src/apps/mydb/inbox/InboxModal.js
+++ b/app/packs/src/apps/mydb/inbox/InboxModal.js
@@ -1,7 +1,8 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import Draggable from 'react-draggable';
 import {
-  Badge, Button, Panel, Glyphicon, Pagination, OverlayTrigger, Tooltip
+  Badge, Button, Panel, Pagination, OverlayTrigger, Tooltip, DropdownButton, MenuItem
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import InboxStore from 'src/stores/alt/stores/InboxStore';
@@ -32,6 +33,7 @@ export default class InboxModal extends React.Component {
       totalPages: inboxState.totalPages,
       activeDeviceBoxId: inboxState.activeDeviceBoxId,
       sortColumn: 'name',
+      colMdValue: 4,
     };
 
     this.onChange = this.onChange.bind(this);
@@ -49,10 +51,6 @@ export default class InboxModal extends React.Component {
     this.initState();
   }
 
-  componentWillUnmount() {
-    InboxStore.unlisten(this.onChange);
-  }
-
   componentDidUpdate(prevProps, prevState) {
     const { currentPage, itemsPerPage } = this.state;
     if (prevState.currentPage !== currentPage
@@ -61,6 +59,19 @@ export default class InboxModal extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    InboxStore.unlisten(this.onChange);
+  }
+
+  handlePageChange(pageNumber) {
+    const { totalPages } = this.state;
+    if (pageNumber > 0 && pageNumber <= totalPages) {
+      this.setState({
+        currentPage: pageNumber
+      }, () => InboxActions.setInboxPagination({ currentPage: this.state.currentPage }));
+    }
+  }
+
   onChange(state) {
     this.setState(state);
     this.setState({ visible: state.inboxModalVisible });
@@ -84,14 +95,39 @@ export default class InboxModal extends React.Component {
     }
   }
 
-  handlePageChange(pageNumber) {
-    const { totalPages } = this.state;
-    if (pageNumber > 0 && pageNumber <= totalPages) {
-      this.setState({
-        currentPage: pageNumber
-      }, () => InboxActions.setInboxPagination({ currentPage: this.state.currentPage }));
+  handleSizingIconClick = (size) => {
+    let newColMdValue;
+    switch (size) {
+      case 'Small':
+        newColMdValue = 2;
+        break;
+      case 'Medium':
+        newColMdValue = 4;
+        break;
+      case 'Large':
+        newColMdValue = 5;
+        break;
+      default:
+        newColMdValue = 4;
     }
-  }
+    this.setState({ colMdValue: newColMdValue });
+
+    InboxActions.changeInboxSize(size);
+  };
+
+  getSizeLabel = () => {
+    const { colMdValue } = this.state;
+    switch (colMdValue) {
+      case 2:
+        return 'Small';
+      case 4:
+        return 'Medium';
+      case 5:
+        return 'Large';
+      default:
+        return 'Unknown';
+    }
+  };
 
   initState = () => {
     const type = 'inbox';
@@ -107,14 +143,14 @@ export default class InboxModal extends React.Component {
   updateFilterAndUserProfile = (type, sort) => {
     InboxActions.changeInboxFilter({
       name: type,
-      sort: sort,
+      sort,
     });
 
     UserActions.updateUserProfile({
       data: {
         filters: {
           [type]: {
-            sort: sort,
+            sort,
           },
         },
       },
@@ -133,40 +169,6 @@ export default class InboxModal extends React.Component {
     });
   };
 
-  renderSortButton() {
-    this.initState();
-
-    const sortTitle = this.state.sortColumn === 'name'
-        ? `click to sort datasets and attachments by creation date (descending) - currently sorted by name (ascending)`
-        : `click to sort datasets and attachments by name (ascending) - currently sorted by creation date (descending)`;
-    const sortTooltip = <Tooltip id="inbox_sort_tooltip">{sortTitle}</Tooltip>;
-    const sortIconClass = this.state.sortColumn === 'name' ? 'fa-sort-alpha-asc' : 'fa-clock-o';
-    const sortIcon = <i className={`fa ${sortIconClass}`} />;
-    const sortContent = (
-      <OverlayTrigger placement="bottom" overlay={sortTooltip}>
-        <button
-            type="button"
-            className="btn-inbox-sort"
-            onClick={this.changeSortColumn}
-        >
-          {sortIcon}
-        </button>
-      </OverlayTrigger>
-    );
-
-    return (
-      <>
-        {sortContent}
-      </>
-    );
-  }
-
-  refreshInbox() {
-    const { currentPage, itemsPerPage } = this.state;
-    LoadingActions.start();
-    InboxActions.fetchInbox({ currentPage, itemsPerPage });
-  }
-
   handleMouseDown = (e) => {
     e.preventDefault();
 
@@ -187,17 +189,17 @@ export default class InboxModal extends React.Component {
     document.removeEventListener('mouseup', this.handleMouseUp);
   };
 
-  lockedSubtrees() {
-    const roots = this.state.lockedRoots;
-
-    return this.subtrees(roots, null, false);
+  refreshInbox() {
+    const { currentPage, itemsPerPage } = this.state;
+    LoadingActions.start();
+    InboxActions.fetchInbox({ currentPage, itemsPerPage });
   }
 
   renderPagination = () => {
     const { currentPage, totalPages } = this.state;
 
     if (totalPages <= 1) {
-      return;
+      return null;
     }
 
     const pageNumbers = [];
@@ -224,10 +226,22 @@ export default class InboxModal extends React.Component {
       <div className="list-pagination">
         <Pagination>
           <Pagination.First disabled={currentPage === 1} key="First" onClick={() => this.handlePageChange(1)} />
-          <Pagination.Prev disabled={currentPage === 1} key="Prev" onClick={() => this.handlePageChange(currentPage - 1)} />
+          <Pagination.Prev
+            disabled={currentPage === 1}
+            key="Prev"
+            onClick={() => this.handlePageChange(currentPage - 1)}
+          />
           {pageNumbers}
-          <Pagination.Next disabled={currentPage === totalPages} key="Next" onClick={() => this.handlePageChange(currentPage + 1)} />
-          <Pagination.Last disabled={currentPage === totalPages} key="Last" onClick={() => this.handlePageChange(totalPages)} />
+          <Pagination.Next
+            disabled={currentPage === totalPages}
+            key="Next"
+            onClick={() => this.handlePageChange(currentPage + 1)}
+          />
+          <Pagination.Last
+            disabled={currentPage === totalPages}
+            key="Last"
+            onClick={() => this.handlePageChange(totalPages)}
+          />
         </Pagination>
       </div>
     );
@@ -241,8 +255,7 @@ export default class InboxModal extends React.Component {
       inbox.children.sort((a, b) => {
         if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
       });
-
-      boxes = inbox.children.map(deviceBox => (
+      boxes = inbox.children.map((deviceBox) => (
         <DeviceBox
           key={`box_${deviceBox.id}`}
           device_box={deviceBox}
@@ -272,15 +285,42 @@ export default class InboxModal extends React.Component {
     const { collectorAddress } = this.state;
     return (
       <Tooltip id="assignButton">
-        You can send yourself files to your inbox by emailing them from your registered email to the following email address:
-        { ' ' }
+        You can send yourself files to your inbox by emailing them
+        <br />
+        from your registered email to the following email address:&nbsp;
         {collectorAddress}
-        { ' ' }
-        . Click to copy the address to your clipboard.
+        .
+        <br />
+        Click to copy the address to your clipboard.
       </Tooltip>
     );
   }
 
+  renderSizingIcon = () => {
+    const tooltipText = `Change inbox size (Currently: ${this.getSizeLabel()})`;
+    const sizes = ['Small', 'Medium', 'Large'];
+
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="inbox_size_tooltip">{tooltipText}</Tooltip>}>
+        <DropdownButton
+          title="Size"
+          className="header-button"
+          id="dropdown-size-button"
+          bsStyle="info"
+          bsSize="xs"
+          style={{ marginLeft: '10px' }}
+
+        >
+          {sizes.map((size) => (
+            <MenuItem key={size} eventKey={size} onSelect={this.handleSizingIconClick}>
+              {size}
+            </MenuItem>
+          ))}
+        </DropdownButton>
+      </OverlayTrigger>
+    );
+  };
+
   collectorAddressInfoButton() {
     const { collectorAddress } = this.state;
 
@@ -289,22 +329,45 @@ export default class InboxModal extends React.Component {
         <OverlayTrigger placement="bottom" overlay={this.infoMessage()}>
           <Button
             bsSize="xsmall"
-            className="btn btn-circle btn-sm btn-info button-right"
+            className="header-button"
           >
-            <Glyphicon glyph="info-sign" />
+            <i className="fa fa-info" />
           </Button>
         </OverlayTrigger>
       </CopyToClipboard>
     );
   }
 
+  renderSortButton() {
+    this.initState();
+
+    const sortTitle = this.state.sortColumn === 'name'
+      ? 'click to sort datasets and attachments by creation date (descending) - currently sorted alphabetically'
+      : 'click to sort datasets and attachments alphabetically - currently sorted by creation date (descending)';
+    const sortTooltip = <Tooltip id="inbox_sort_tooltip">{sortTitle}</Tooltip>;
+    const sortIconClass = this.state.sortColumn === 'name' ? 'fa-sort-alpha-asc' : 'fa-clock-o';
+    const sortIcon = <i className={`fa ${sortIconClass}`} />;
+    return (
+      <OverlayTrigger placement="bottom" overlay={sortTooltip}>
+        <Button
+          bsStyle="success"
+          bsSize="xs"
+          className="header-button"
+          onClick={this.changeSortColumn}
+        >
+          {sortIcon}
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
   render() {
     const { showCollectionTree } = this.props;
     const {
-      visible, inboxVisible, numberOfAttachments, collectorAddress
+      visible, inboxVisible, numberOfAttachments, collectorAddress, colMdValue
     } = this.state;
 
-    const panelClass = showCollectionTree ? 'small-col col-md-4' : 'small-col col-md-5';
+    const panelClass = showCollectionTree ? `small-col col-md-${colMdValue}` : 'small-col col-md-5';
     const inboxDisplay = inboxVisible ? '' : 'none';
 
     if (visible) {
@@ -315,7 +378,9 @@ export default class InboxModal extends React.Component {
         >
           <div
             className={panelClass}
-            style={{ zIndex: 10, position: 'absolute', top: '70px', left: '10px' }}
+            style={{
+              zIndex: 10, position: 'absolute', top: '70px', left: '10px'
+            }}
           >
             <Panel bsStyle="primary" className="eln-panel-detail research-plan-details cursor">
               <Panel.Heading
@@ -323,41 +388,51 @@ export default class InboxModal extends React.Component {
                 id="draggableInbox"
                 onMouseDown={this.handleMouseDown}
               >
-                <button
-                  type="button"
-                  className="btn-inbox"
-                  onClick={() => this.onClickInbox()}
+                <div style={{
+                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%'
+                }}
                 >
-                  <i className="fa fa-inbox" />
-                  <span style={{ marginLeft: '10px', marginRight: '5px' }}>Inbox</span>
-                </button>
-                {
-                  numberOfAttachments > 0 ? (
-                    <Badge>
-                      {' '}
-                      {numberOfAttachments}
-                      {' '}
-                    </Badge>
-                  ) : ''
-                }
-                <Button
-                  bsStyle="danger"
-                  bsSize="xsmall"
-                  className="button-right"
-                  onClick={InboxActions.toggleInboxModal}
-                >
-                  <i className="fa fa-times" />
-                </Button>
-                {this.renderSortButton()}
-                <Button
-                  bsStyle="success"
-                  bsSize="xsmall"
-                  className="button-right"
-                  onClick={() => this.refreshInbox()}
-                >
-                  <Glyphicon bsSize="small" glyph="refresh" />
-                </Button>
-                {collectorAddress ? this.collectorAddressInfoButton() : null}
+                  <div>
+                    <button
+                      type="button"
+                      className="btn-inbox"
+                      onClick={() => this.onClickInbox()}
+                    >
+                      <i className="fa fa-inbox" />
+                      <span style={{ marginLeft: '10px', marginRight: '5px', fontWeight: 'bold' }}>Inbox</span>
+                    </button>
+                    {
+                      numberOfAttachments > 0 ? (
+                        <Badge>
+                          &nbsp;
+                          {numberOfAttachments}
+                          &nbsp;
+                        </Badge>
+                      ) : ''
+                    }
+                  </div>
+                  <div>
+                    {this.renderSortButton()}
+                    {collectorAddress ? this.collectorAddressInfoButton() : null}
+                    {this.renderSizingIcon()}
+                    <Button
+                      bsStyle="success"
+                      bsSize="xs"
+                      className="header-button"
+                      onClick={() => this.refreshInbox()}
+                    >
+                      <i className="fa fa-refresh" />
+                    </Button>
+                    <Button
+                      bsStyle="danger"
+                      bsSize="xs"
+                      className="header-button"
+                      onClick={InboxActions.toggleInboxModal}
+                    >
+                      <i className="fa fa-close" />
+                    </Button>
+                  </div>
+                </div>
               </Panel.Heading>
               <Panel.Body>
                 <div>
diff --git a/app/packs/src/stores/alt/actions/InboxActions.js b/app/packs/src/stores/alt/actions/InboxActions.js
index 544126660..e8d15b7b7 100644
--- a/app/packs/src/stores/alt/actions/InboxActions.js
+++ b/app/packs/src/stores/alt/actions/InboxActions.js
@@ -27,6 +27,10 @@ class InboxActions {
     return filter;
   }
 
+  changeInboxSize(size) {
+    return size;
+  }
+
   checkedAll(params) {
     return params;
   }
diff --git a/app/packs/src/stores/alt/stores/InboxStore.js b/app/packs/src/stores/alt/stores/InboxStore.js
index b6d515e69..46c4ed4f9 100644
--- a/app/packs/src/stores/alt/stores/InboxStore.js
+++ b/app/packs/src/stores/alt/stores/InboxStore.js
@@ -28,6 +28,7 @@ class InboxStore {
       dataItemsPerPage: 35,
       totalPages: null,
       activeDeviceBoxId: null,
+      inboxSize: 'Medium',
     };
 
     this.bindListeners({
@@ -71,6 +72,7 @@ class InboxStore {
       setActiveDeviceBoxId: InboxActions.setActiveDeviceBoxId,
       handleFetchInboxUnsorted: InboxActions.fetchInboxUnsorted,
       handleChangeInboxFilter: InboxActions.changeInboxFilter,
+      handleChangeInboxSize: InboxActions.changeInboxSize,
     });
   }
 
@@ -122,6 +124,10 @@ class InboxStore {
     InboxActions.fetchInbox({ currentPage, itemsPerPage, activeDeviceBoxId });
   }
 
+  handleChangeInboxSize(inboxSize) {
+    this.state.inboxSize = inboxSize;
+  }
+
   handleFetchInboxCount(result) {
     this.state.numberOfAttachments = result.inbox_count;
   }

From 212838aea18284e3f897b78a6355d18acdc5f675 Mon Sep 17 00:00:00 2001
From: Mehreen Mansur <mehreen.mansur@gmail.com>
Date: Tue, 12 Dec 2023 08:09:39 +0100
Subject: [PATCH 228/258] fix: si-spectra report generation to work even
 without preview

* serialize data for spectra si report on backend

* add spectra report thumbnail image preview

* update spectra worker method

* update attachment api

---------

Co-authored-by: Mehreen <mehreen.mansur>

Refs:  #1654, #1642
---
 app/api/entities/attachment_entity.rb         |  6 +-
 .../details/reports/SectionSpectrum.js        |  2 +-
 lib/reporter/spectrum/detail.rb               |  2 +-
 lib/reporter/worker_spectrum.rb               | 75 +++++++++++++++----
 spec/api/chemotion/attachment_api_spec.rb     |  1 +
 5 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/app/api/entities/attachment_entity.rb b/app/api/entities/attachment_entity.rb
index 4963bef5f..c80bebadb 100644
--- a/app/api/entities/attachment_entity.rb
+++ b/app/api/entities/attachment_entity.rb
@@ -3,6 +3,10 @@
 module Entities
   class AttachmentEntity < Grape::Entity
     expose :id, documentation: { type: 'Integer', desc: "Attachment's unique id" }
-    expose :filename, :identifier, :content_type, :thumb, :aasm_state, :filesize
+    expose :filename, :identifier, :content_type, :thumb, :aasm_state, :filesize, :thumbnail
+
+    def thumbnail
+      object.thumb ? Base64.encode64(object.read_thumbnail) : nil
+    end
   end
 end
diff --git a/app/packs/src/apps/mydb/elements/details/reports/SectionSpectrum.js b/app/packs/src/apps/mydb/elements/details/reports/SectionSpectrum.js
index e73dab31a..182ae9d79 100644
--- a/app/packs/src/apps/mydb/elements/details/reports/SectionSpectrum.js
+++ b/app/packs/src/apps/mydb/elements/details/reports/SectionSpectrum.js
@@ -45,7 +45,7 @@ const ContentAtts = ({ prd, attThumbNails }) => {
     return (
       <div key={key}>
         <div>{att.kind}</div>
-        <Thumbnail thumb={thumb} />
+        <Thumbnail thumb={thumb || att.thumbnail} />
       </div>
     );
   });
diff --git a/lib/reporter/spectrum/detail.rb b/lib/reporter/spectrum/detail.rb
index 7ee0b293c..247e69f8a 100644
--- a/lib/reporter/spectrum/detail.rb
+++ b/lib/reporter/spectrum/detail.rb
@@ -36,7 +36,7 @@ def prd_info_delta
 
       # - - - - - - - - - -
       def atts_content
-        @prd['atts'].map do |att|
+        @prd['atts']&.map do |att|
           att_content(att)
         end.compact
       end
diff --git a/lib/reporter/worker_spectrum.rb b/lib/reporter/worker_spectrum.rb
index 25b2c47cb..0a146c60e 100644
--- a/lib/reporter/worker_spectrum.rb
+++ b/lib/reporter/worker_spectrum.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Reporter
   class WorkerSpectrum < Worker
     def initialize(args)
@@ -9,32 +11,73 @@ def initialize(args)
 
     def substance
       @substance ||= {
-        objs: contents
+        objs: contents,
       }
     end
 
     def contents
-      replace_att_objs
+      product_attrs = extract_product_attrs(@objs)
+      replace_att_objs(product_attrs)
       @contents ||= Spectrum::Document.new(
-                      objs: @prd_atts,
-                      mol_serials: @mol_serials,
-                      font_family: 'Times New Roman'
-                    ).convert
+        objs: product_attrs,
+        mol_serials: @mol_serials,
+        font_family: 'Times New Roman',
+      ).convert
     end
 
-    def replace_att_objs
-      @prd_atts.map do |prd|
-        att_objs = prd['atts'].map do |att|
-          kind = att['kind']
-          att = Attachment.find(att['id'])
-          can_dwnld = if att
-            element = att.container.root.containable
-            can_read = ElementPolicy.new(@author, element).read?
-            can_read && ElementPermissionProxy.new(@author, element, user_ids).read_dataset?
+    def extract_product_attrs(objects)
+      product_attrs = []
+      objects&.map do |obj|
+        product_attrs << extract_products_attrs(obj) if obj[:role] != 'gp'
+      end
+      product_attrs.compact_blank!
+    end
+
+    def extract_products_attrs(object)
+      target_object = {}
+      if object[:type] == 'reaction'
+        object[:products]&.map do |prod|
+          target_object[:prdId] = prod[:id]
+          target_object[:iupac_name] = prod.dig(:molecule, :iupac_name)
+          target_object[:sum_formular] = prod.dig(:molecule, :sum_formular)
+          target_object[:molId] = prod.dig(:molecule, :id)
+          target_object[:showedName] = prod[:showed_name]
+          target_object[:atts] = extract_attributes(prod)
+        end
+      end
+      target_object
+    end
+
+    def extract_attributes(product) # rubocop:disable Metrics/CyclomaticComplexity
+      atts = []
+      product.dig(:container, :children, 0, :children)&.map do |container|
+        is_report = container.dig(:extended_metadata, :report)
+        return nil unless is_report
+
+        kind = container.dig(:extended_metadata, :kind)
+        container[:children]&.map do |analysis|
+          analysis[:attachments]&.map do |attach|
+            attach[:kind] = kind
+            atts << attach
           end
+        end
+      end
+      atts
+    end
+
+    def replace_att_objs(product_attrs) # rubocop:disable Metrics/CyclomaticComplexity
+      product_attrs&.map do |prd|
+        att_objs = prd[:atts]&.map do |att|
+          kind = att[:kind]
+          att = Attachment.find(att[:id])
+          can_dwnld = if att
+                        element = att.container.root.containable
+                        can_read = ElementPolicy.new(@author, element).read?
+                        can_read && ElementPermissionProxy.new(@author, element, user_ids).read_dataset?
+                      end
           can_dwnld ? { obj: att, kind: kind } : nil
         end
-        prd['atts'] = att_objs
+        prd[:atts] = att_objs
         prd
       end
     end
diff --git a/spec/api/chemotion/attachment_api_spec.rb b/spec/api/chemotion/attachment_api_spec.rb
index 73175ed8d..1c80bb45d 100644
--- a/spec/api/chemotion/attachment_api_spec.rb
+++ b/spec/api/chemotion/attachment_api_spec.rb
@@ -22,6 +22,7 @@
         'filesize' => attachment.filesize,
         'identifier' => attachment.identifier,
         'thumb' => attachment.thumb,
+        'thumbnail' => attachment.thumb ? Base64.encode64(attachment.read_thumbnail) : nil,
       },
     }
   end

From b5f4b41b7af2c809f69036fa0fa5838be9953349 Mon Sep 17 00:00:00 2001
From: Mostafa Mekky <59936007+mekkyz@users.noreply.github.com>
Date: Tue, 12 Dec 2023 08:21:01 +0100
Subject: [PATCH 229/258] fix(UX): molecule title layout and element table
 header responsiveness

* spacing at sample header

* responsive element table header

*  eslint

* remove gray color

* remove unneeded margin right

Refs: #1650, #1646
---
 app/assets/stylesheets/elements_table.scss    |  26 +-
 app/assets/stylesheets/sample.scss            |   1 -
 .../mydb/elements/details/ElementDetails.js   |  48 ++--
 .../elements/details/samples/SampleDetails.js |  36 +--
 .../apps/mydb/elements/list/ElementsList.js   |   9 +-
 .../apps/mydb/elements/list/ElementsTable.js  |  12 +-
 app/packs/src/models/Sample.js                | 242 +++++++++---------
 7 files changed, 191 insertions(+), 183 deletions(-)

diff --git a/app/assets/stylesheets/elements_table.scss b/app/assets/stylesheets/elements_table.scss
index 6b548ee9c..a8743f014 100644
--- a/app/assets/stylesheets/elements_table.scss
+++ b/app/assets/stylesheets/elements_table.scss
@@ -97,22 +97,6 @@ th.drag {
   }
 }
 
-/* .panel-title div:empty:after {
-  content: ".";
-  visibility: hidden;
-} */
-
-
-/*.number-shown-select {
-  float: right !important;
-  text-align: right;
-  width: 55% !important;
-}*/
-
-/*.element-svg-checkbox {
-  margin: 0px 0 0;
-}*/
-
 .list-container-bottom {
   width: 100%;
 }
@@ -149,11 +133,19 @@ th.drag {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
+  min-height: 40px;
   background-color: #ddd;
   padding: 5px;
 }
 
+@media (max-width: 600px) {
+  .table-header {
+    height: auto;
+    flex-wrap: wrap;
+    overflow: auto;
+  }
+}
+
 #tabList .active a {
   border-bottom-color: #ddd;
 }
diff --git a/app/assets/stylesheets/sample.scss b/app/assets/stylesheets/sample.scss
index 401fa5fec..a4a7ae149 100644
--- a/app/assets/stylesheets/sample.scss
+++ b/app/assets/stylesheets/sample.scss
@@ -141,7 +141,6 @@
 
 .label--bold {
   font-weight: bold;
-  margin-right: 10px;
 }
 
 .noAnalyses-warning {
diff --git a/app/packs/src/apps/mydb/elements/details/ElementDetails.js b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
index f4b56f460..029c8eacf 100644
--- a/app/packs/src/apps/mydb/elements/details/ElementDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import ComputeTaskContainer from 'src/apps/mydb/elements/details/computeTasks/ComputeTaskContainer';
 import DetailActions from 'src/stores/alt/actions/DetailActions';
 import DeviceDetails from 'src/apps/mydb/elements/details/devices/DeviceDetails';
@@ -17,7 +18,9 @@ import ScreenDetails from 'src/apps/mydb/elements/details/screens/ScreenDetails'
 import StickyDiv from 'react-stickydiv';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import WellplateDetails from 'src/apps/mydb/elements/details/wellplates/WellplateDetails';
-import { Tabs, Tab, Label, Button } from 'react-bootstrap';
+import {
+  Tabs, Tab, Label, Button
+} from 'react-bootstrap';
 
 import { getPublicationId } from 'src/components/chemrepo/publication-utils';
 
@@ -26,7 +29,8 @@ const tabInfoHash = {
     title: 'Metadata',
     iconEl: (
       <span>
-        <i className="fa fa-file-text-o" />&nbsp;&nbsp;
+        <i className="fa fa-file-text-o" />
+        &nbsp;&nbsp;
         <i className="fa fa-book" />
       </span>
     )
@@ -35,7 +39,8 @@ const tabInfoHash = {
     title: 'Report',
     iconEl: (
       <span>
-        <i className="fa fa-file-text-o" />&nbsp;&nbsp;
+        <i className="fa fa-file-text-o" />
+        &nbsp;&nbsp;
         <i className="fa fa-pencil" />
       </span>
     )
@@ -128,21 +133,10 @@ export default class ElementDetails extends Component {
     ElementStore.unlisten(this.onDetailChange);
   }
 
-  onDetailChange(state) {
-    const { selecteds, activeKey, deletingElement, spectraMsg } = state;
-    this.setState(prevState => ({ ...prevState, selecteds, activeKey, deletingElement }));
-    this.checkSpectraMessage(spectraMsg);
-  }
-
   toggleCommentScreen(t) {
     this.setState({ fullScreen: t });
   }
 
-  toggleFullScreen() {
-    const { fullScreen } = this.state;
-    this.setState({ fullScreen: !fullScreen });
-  }
-
   handleResize() {
     const windowHeight = window.innerHeight || 1;
     if (this.state.fullScreen || windowHeight < 500) {
@@ -152,11 +146,26 @@ export default class ElementDetails extends Component {
     }
   }
 
+  onDetailChange(state) {
+    const {
+      selecteds, activeKey, deletingElement, spectraMsg
+    } = state;
+    this.setState((prevState) => ({
+      ...prevState, selecteds, activeKey, deletingElement
+    }));
+    this.checkSpectraMessage(spectraMsg);
+  }
+
+  toggleFullScreen() {
+    const { fullScreen } = this.state;
+    this.setState({ fullScreen: !fullScreen });
+  }
+
   checkSpectraMessage(spectraMsg) {
     if (spectraMsg) {
       const { showedSpcMsgID } = this.state;
       if (!showedSpcMsgID || showedSpcMsgID !== spectraMsg.message_id) {
-        this.setState({ showedSpcMsgID: spectraMsg.message_id })
+        this.setState({ showedSpcMsgID: spectraMsg.message_id });
         alert(spectraMsg.content.data);
       }
     }
@@ -259,7 +268,14 @@ export default class ElementDetails extends Component {
     if (tab.iconEl) { iconElement = tab.iconEl; }
     if (el.element_klass) { iconElement = (<i className={`${el.element_klass.icon_name}`} />); }
     const icon = focusing ? (iconElement) : (<Label bsStyle={bsStyle || ''}>{iconElement}</Label>);
-    return (<div>{icon} &nbsp; {title} </div>);
+    return (
+      <div>
+        {icon}
+        &nbsp;&nbsp;&nbsp;
+        {title}
+        &nbsp;
+      </div>
+    );
   }
 
   render() {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index edf8866dc..4d290fe0d 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1109,21 +1109,25 @@ export default class SampleDetails extends React.Component {
 
     return (
       <div style={{ display: 'flex', alignItems: 'center' }}>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
-          <span>
-            <i className="icon-sample" />
-            {sample.title()}
-          </span>
-        </OverlayTrigger>
-        <ShowUserLabels element={sample} />
-        <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
-        {colLabel}
-        <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-        <PubchemLabels element={sample} />
-        <HeaderCommentSection element={sample} />
-        {sample.isNew
-          ? <FastInput fnHandle={this.handleFastInput} />
-          : null}
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
+            <span>
+              <i className="icon-sample" />
+            &nbsp;&nbsp;
+              {sample.title()}
+            &nbsp;&nbsp;
+            </span>
+          </OverlayTrigger>
+          <ShowUserLabels element={sample} />
+          <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+          {colLabel}
+          <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+          <PubchemLabels element={sample} />
+          <HeaderCommentSection element={sample} />
+          {sample.isNew
+            ? <FastInput fnHandle={this.handleFastInput} />
+            : null}
+        </div>
         <div style={{ marginLeft: 'auto' }}>
           <ConfirmClose el={sample} />
           <OverlayTrigger
@@ -1772,7 +1776,7 @@ export default class SampleDetails extends React.Component {
       && (pageMessage.error.length > 0 || pageMessage.warning.length > 0)) ? (
         <Alert bsStyle="warning" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
           <strong>Structure Alert</strong>
-&nbsp;
+          &nbsp;
           <Button
             bsSize="xsmall"
             bsStyle="warning"
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsList.js b/app/packs/src/apps/mydb/elements/list/ElementsList.js
index 596c587c6..8a933e911 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsList.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsList.js
@@ -240,7 +240,14 @@ export default class ElementsList extends React.Component {
       const value = visible.get(i);
 
       let iconClass = `icon-${value}`;
-      let ttl = (<Tooltip id="_tooltip_history" className="left_tooltip">{value && (value.replace('_', ' ').replace(/(^\w|\s\w)/g, (m) => m.toUpperCase()))}</Tooltip>);
+      let ttl = (
+        <Tooltip
+          id="_tooltip_history"
+          className="left_tooltip"
+        >
+          {value && (value.replace('_', ' ').replace(/(^\w|\s\w)/g, (m) => m.toUpperCase()))}
+        </Tooltip>
+      );
       let genericEl = null;
 
       if (!constEls.includes(value)) {
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTable.js b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
index 79ec04a4c..b6ea47516 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTable.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
@@ -185,7 +185,7 @@ export default class ElementsTable extends React.Component {
       // eslint-disable-next-line react/no-direct-mutation-state
       this.state.elementsGroup = filters[type]?.group || 'none';
       // eslint-disable-next-line react/no-direct-mutation-state
-      this.state.elementsSort =  filters[type]?.sort ?? true;
+      this.state.elementsSort = filters[type]?.sort ?? true;
       // eslint-disable-next-line react/no-direct-mutation-state
       this.state.sortDirection = filters[type]?.direction || 'DESC';
     }
@@ -434,7 +434,8 @@ export default class ElementsTable extends React.Component {
     const sortDirectionText = sortDirection === 'ASC' ? 'ascending' : 'descending';
     const sortTitle = elementsSort
       ? `click to sort by update date (${sortDirectionText}) - currently sorted by ${sortColumn} (${sortDirectionText})`
-      : `click to sort by ${sortColumn} (${sortDirectionText}) - currently sorted by update date (${sortDirectionText})`;
+      : `click to sort by ${sortColumn} (${sortDirectionText})`
+      + ` - currently sorted by update date (${sortDirectionText})`;
     const sortTooltip = <Tooltip id="reaction_sort_tooltip">{sortTitle}</Tooltip>;
     let sortIconClass = 'fa-clock-o';
     if (elementsGroup !== 'none') {
@@ -563,8 +564,8 @@ export default class ElementsTable extends React.Component {
     }
 
     const filterTitle = filterCreatedAt === true
-        ? 'click to filter by update date - currently filtered by creation date'
-        : 'click to filter by creation date - currently filtered by update date';
+      ? 'click to filter by update date - currently filtered by creation date'
+      : 'click to filter by creation date - currently filtered by update date';
     const filterIconClass = filterCreatedAt === true ? 'fa-calendar' : 'fa-calendar-o';
 
     const filterTooltip = <Tooltip id="date_tooltip">{filterTitle}</Tooltip>;
@@ -584,7 +585,8 @@ export default class ElementsTable extends React.Component {
           style={{
             display: 'flex',
             alignItems: 'center',
-            gap: 5
+            gap: 5,
+            flexWrap: 'wrap'
           }}
         >
           <OverlayTrigger placement="top" overlay={filterTooltip}>
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index e51916bef..f9c70d807 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -1,10 +1,12 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable camelcase */
 import React from 'react';
 import _ from 'lodash';
 
 import Element from 'src/models/Element';
 import Molecule from 'src/models/Molecule';
 import UserStore from 'src/stores/alt/stores/UserStore';
-import Container from 'src/models/Container.js';
+import Container from 'src/models/Container';
 import Segment from 'src/models/Segment';
 
 const prepareRangeBound = (args = {}, field) => {
@@ -20,7 +22,8 @@ const prepareRangeBound = (args = {}, field) => {
     if (argsNew[`${field}_upperbound`] == null || argsNew[`${field}_upperbound`] == null) {
       argsNew[`${field}_display`] = (argsNew[`${field}_lowerbound`] || '').toString().trim();
     } else {
-      argsNew[`${field}_display`] = ((argsNew[`${field}_lowerbound`] || '').toString().concat(' – ', argsNew[`${field}_upperbound`])).trim();
+      argsNew[`${field}_display`] = ((argsNew[`${field}_lowerbound`] || '')
+        .toString().concat(' – ', argsNew[`${field}_upperbound`])).trim();
     }
   }
   return argsNew;
@@ -43,8 +46,13 @@ export default class Sample extends Element {
     this.melting_point = null;
   }
 
-
-  static copyFromSampleAndCollectionId(sample, collection_id, structure_only = false, keepResidueInfo = false, keepExternalLabel = true) {
+  static copyFromSampleAndCollectionId(
+    sample,
+    collection_id,
+    structure_only = false,
+    keepResidueInfo = false,
+    keepExternalLabel = true
+  ) {
     const newSample = sample.buildCopy();
     newSample.collection_id = collection_id;
     if (sample.name) { newSample.name = sample.name; }
@@ -92,14 +100,15 @@ export default class Sample extends Element {
     // set default polymer data
     this.residues = [
       {
-        residue_type: 'polymer', custom_info: {
-          "formula": 'CH',
-          "loading": null,
-          "polymer_type": (this.decoupled ? "self_defined" : "polystyrene"),
-          "loading_type": "external",
-          "external_loading": 0.0,
-          "reaction_product": (this.reaction_product ? true : null),
-          "cross_linkage": null
+        residue_type: 'polymer',
+        custom_info: {
+          formula: 'CH',
+          loading: null,
+          polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
+          loading_type: 'external',
+          external_loading: 0.0,
+          reaction_product: (this.reaction_product ? true : null),
+          cross_linkage: null
         }
       }
     ];
@@ -113,7 +122,7 @@ export default class Sample extends Element {
           Object.assign(residue.custom_info, {
             external_loading: 0.0,
             loading: null,
-            loading_type: "external"
+            loading_type: 'external'
           });
         });
       } else {
@@ -122,13 +131,13 @@ export default class Sample extends Element {
           Object.assign(residue, {
             residue_type: 'polymer',
             custom_info: {
-              "formula": 'CH',
-              "loading": (residue.custom_info ? residue.custom_info.loading : null),
-              "polymer_type": (this.decoupled ? "self_defined" : "polystyrene"),
-              "loading_type": "external",
-              "external_loading": 0.0,
-              "reaction_product": (this.reaction_product ? true : null),
-              "cross_linkage": null
+              formula: 'CH',
+              loading: (residue.custom_info ? residue.custom_info.loading : null),
+              polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
+              loading_type: 'external',
+              external_loading: 0.0,
+              reaction_product: (this.reaction_product ? true : null),
+              cross_linkage: null
             }
           });
         });
@@ -199,12 +208,12 @@ export default class Sample extends Element {
   }
 
   getChildrenCount() {
-    return parseInt(Sample.children_count[this.id] || this.children_count);
+    return parseInt(Sample.children_count[this.id] || this.children_count, 10);
   }
 
   buildSplitShortLabel() {
-    let children_count = this.getChildrenCount() + 1;
-    return this.short_label + "-" + children_count;
+    const children_count = this.getChildrenCount() + 1;
+    return `${this.short_label}-${children_count}`;
   }
 
   buildCopy() {
@@ -273,7 +282,7 @@ export default class Sample extends Element {
   }
 
   get isSplit() {
-    return this.is_split
+    return this.is_split;
   }
 
   set isSplit(is_split) {
@@ -281,7 +290,7 @@ export default class Sample extends Element {
   }
 
   serialize() {
-    let serialized = super.serialize({
+    const serialized = super.serialize({
       name: this.name,
       external_label: this.external_label,
       target_amount_value: this.target_amount_value,
@@ -322,7 +331,7 @@ export default class Sample extends Element {
       molecular_mass: this.molecular_mass,
       sum_formula: this.sum_formula,
       inventory_sample: this.inventory_sample,
-      segments: this.segments.map(s => s.serialize()),
+      segments: this.segments.map((s) => s.serialize()),
       is_repo_public: this.is_repo_public
     });
 
@@ -349,24 +358,20 @@ export default class Sample extends Element {
     this._contains_residues = value;
     if (value) {
       if (!this.residues.length) {
-
         this.setDefaultResidue();
       } else {
         this.residues[0]._destroy = undefined;
       }
 
-      this.elemental_compositions.map(function (item) {
-        if (item.composition_type == 'formula')
-          item._destroy = true;
+      this.elemental_compositions.map((item) => {
+        if (item.composition_type == 'formula') { item._destroy = true; }
       });
     } else {
       // this.sample_svg_file = '';
-      if (this.residues.length)
-        this.residues[0]._destroy = true; // delete residue info
+      if (this.residues.length) { this.residues[0]._destroy = true; } // delete residue info
 
-      this.elemental_compositions.map(function (item) {
-        if (item.composition_type == 'loading')
-          item._destroy = true;
+      this.elemental_compositions.map((item) => {
+        if (item.composition_type == 'loading') { item._destroy = true; }
       });
     }
   }
@@ -375,15 +380,14 @@ export default class Sample extends Element {
     return this._contains_residues;
   }
 
-  title(selected = false) {
-    const profile = UserStore.getState().profile
-    const show_external_name = profile ? profile.show_external_name : false
-    const show_sample_name = profile ? profile.show_sample_name : false
-    const external_label = this.external_label;
-    const extLabelClass =  this.highlight_label(!selected);
-    const nameClass =  this.highlight_label(false);
-    const name = this.name;
-    const short_label = this.short_label;
+  title() {
+    const { profile } = UserStore.getState();
+    const show_external_name = profile ? profile.show_external_name : false;
+    const show_sample_name = profile ? profile.show_sample_name : false;
+    const { external_label } = this;
+    const extLabelClass = 'label--bold';
+    const { name } = this;
+    const { short_label } = this;
 
     const { currentUser } = UserStore.getState();
     let isRepoSecret = false;
@@ -394,21 +398,10 @@ export default class Sample extends Element {
 
     if(show_external_name && !isRepoSecret) {
       return (external_label ? <span className={extLabelClass}>{external_label}</span> : short_label);
-    } else if(show_sample_name) {
+    } if (show_sample_name) {
       return (name ? <span className={extLabelClass}>{name}</span> : short_label);
-    } else {
-      return short_label;
-    }
-  }
-
-  highlight_label(gray) {
-    let cssClass = null;
-    if (!gray) {
-      cssClass = 'label--bold';
-    } else {
-      cssClass = 'label--bold c-text--grey';
     }
-    return cssClass;
+    return short_label;
   }
 
   get molecule_name_label() {
@@ -460,11 +453,11 @@ export default class Sample extends Element {
   }
 
   set preferred_label(label) {
-
+    this._preferred_label = label;
   }
 
   set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+    this._segments = (segments && segments.map((s) => new Segment(s))) || [];
   }
 
   get segments() {
@@ -480,11 +473,10 @@ export default class Sample extends Element {
   }
 
   iupac_name_tag(length) {
-    let iupac_name = this.molecule.iupac_name || "";
-    return iupac_name.length > length ?
-      iupac_name.slice(0, length) + "..."
-      :
-      iupac_name
+    const iupac_name = this.molecule.iupac_name || '';
+    return iupac_name.length > length
+      ? `${iupac_name.slice(0, length)}...`
+      : iupac_name;
   }
 
   get location() {
@@ -566,15 +558,15 @@ export default class Sample extends Element {
       this.metrics = (this.metrics && this.metrics.replace(/(.{2}).{1}/, `$1${mp}`)) || 'mmmm';
     } else if (unit === 'mol/l') {
       if (this.metrics && this.metrics.length === 3) {
-        this.metrics = this.metrics + mp;
+        this.metrics += mp;
       } else {
         this.metrics = (this.metrics && this.metrics.replace(/(.{3}).{1}/, `$1${mp}`)) || 'mmmm';
       }
-    }
-    else {
+    } else {
       this.metrics = (this.metrics && this.metrics.replace(/(.{0}).{1}/, `$1${mp}`)) || 'mmmm';
     }
   }
+
   setAmountAndNormalizeToGram(amount) {
     this.amount_value = this.convertToGram(amount.value, amount.unit);
     this.amount_unit = 'g';
@@ -616,7 +608,7 @@ export default class Sample extends Element {
   }
 
   get defined_part_amount() {
-    let mw = this.molecule_molecular_weight;
+    const mw = this.molecule_molecular_weight;
     return this.amount_mol * mw / 1000.0;
   }
 
@@ -626,7 +618,7 @@ export default class Sample extends Element {
     return ({
       value: this.amount_value,
       unit: this.amount_unit
-    })
+    });
   }
 
   get amount_value() {
@@ -668,7 +660,7 @@ export default class Sample extends Element {
   }
 
   set target_amount_value(amount_value) {
-    this._target_amount_value = amount_value
+    this._target_amount_value = amount_value;
   }
 
   get target_amount_unit() {
@@ -676,7 +668,7 @@ export default class Sample extends Element {
   }
 
   set target_amount_unit(amount_unit) {
-    this._target_amount_unit = amount_unit
+    this._target_amount_unit = amount_unit;
   }
 
   // real amount
@@ -686,7 +678,7 @@ export default class Sample extends Element {
   }
 
   set real_amount_value(amount_value) {
-    this._real_amount_value = amount_value
+    this._real_amount_value = amount_value;
   }
 
   get real_amount_unit() {
@@ -694,7 +686,7 @@ export default class Sample extends Element {
   }
 
   set real_amount_unit(amount_unit) {
-    this._real_amount_unit = amount_unit
+    this._real_amount_unit = amount_unit;
   }
 
   get amount_g() {
@@ -717,7 +709,7 @@ export default class Sample extends Element {
 
   convertGramToUnit(amount_g = 0, unit) {
     if (this.contains_residues) {
-      let loading = this.residues[0].custom_info.loading;
+      const { loading } = this.residues[0].custom_info;
       switch (unit) {
         case 'g':
           return amount_g;
@@ -736,8 +728,8 @@ export default class Sample extends Element {
             const purity = this.purity || 1.0;
             const molarity = this.molarity_value;
             return (amount_g * purity) / (molarity * molecularWeight);
-          } else if (this.has_density) {
-            const density = this.density;
+          } if (this.has_density) {
+            const { density } = this;
             return amount_g / (density * 1000);
           }
 
@@ -767,7 +759,7 @@ export default class Sample extends Element {
         case 'mg':
           return amountValue / 1000.0;
         case 'mol': {
-          const loading = this.residues[0].custom_info.loading;
+          const { loading } = this.residues[0].custom_info;
           if (!loading) return 0.0;
 
           return (amountValue / loading) * 1000.0;
@@ -785,7 +777,7 @@ export default class Sample extends Element {
           if (this.has_molarity) {
             const molecularWeight = this.molecule_molecular_weight;
             return amount_value * this.molarity_value * molecularWeight;
-          } else if (this.has_density) {
+          } if (this.has_density) {
             return amount_value * (this.density || 1.0) * 1000;
           }
           return 0;
@@ -840,15 +832,15 @@ export default class Sample extends Element {
   }
 
   get purity() {
-    return this._purity
+    return this._purity;
   }
 
   set purity(purity) {
-    this._purity = purity
+    this._purity = purity;
   }
 
   get molecule() {
-    return this._molecule
+    return this._molecule;
   }
 
   set molecule(molecule) {
@@ -906,30 +898,30 @@ export default class Sample extends Element {
 
   get error_loading() {
     // TODO: temporary disabled
-    //return this.contains_residues && !this.loading && !this.reaction_product;
+    // return this.contains_residues && !this.loading && !this.reaction_product;
     return false;
   }
 
-
   get isValid() {
-    return (this && ((this.molfile && !this.decoupled) || this.decoupled) &&
-      !this.error_loading && !this.error_polymer_type);
+    return (this && ((this.molfile && !this.decoupled) || this.decoupled)
+      && !this.error_loading && !this.error_polymer_type);
   }
 
   get svgPath() {
     if (this.show_label) {
-      return `svg_text/${this.labelText}`
+      return `svg_text/${this.labelText}`;
     }
 
     if (this.sample_svg_file) {
       if (this.sample_svg_file === '***') {
-        return `/images/wild_card/no_image_180.svg`
+        return '/images/wild_card/no_image_180.svg';
       }
       return `/images/samples/${this.sample_svg_file}`;
     }
-    return this.molecule && this.molecule.molecule_svg_file ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
+    return this.molecule && this.molecule.molecule_svg_file
+      ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
   }
-  //todo: have a dedicated Material Sample subclass
+  // todo: have a dedicated Material Sample subclass
 
   get labelText() {
     return this.name || this.molecule_formula || this.molecule.iupac_name;
@@ -981,10 +973,10 @@ export default class Sample extends Element {
     return params;
   }
 
-  //Container & Analyses routines
+  // Container & Analyses routines
   addAnalysis(analysis) {
     this.container.children.filter(
-      element => ~element.container_type.indexOf('analyses')
+      (element) => ~element.container_type.indexOf('analyses')
     )[0].children.push(analysis);
   }
 
@@ -1000,7 +992,7 @@ export default class Sample extends Element {
   calculateMaxAmount(referenceSample) {
     const refAmount = referenceSample.amount_mol;
     const sampleCoeff = this.coefficient || 1.0;
-    const refCoeff = (referenceSample.coefficient || 1.0)
+    const refCoeff = (referenceSample.coefficient || 1.0);
     const coeffQuotient = sampleCoeff / refCoeff;
 
     this.maxAmount = refAmount * coeffQuotient * this.molecule_molecular_weight;
@@ -1008,73 +1000,69 @@ export default class Sample extends Element {
 
   get solvent() {
     try {
-      //handle the old solvent data
-      const jsonSolvent = JSON.parse(this._solvent)
-      let solv = []
+      // handle the old solvent data
+      const jsonSolvent = JSON.parse(this._solvent);
+      const solv = [];
       if (jsonSolvent) {
-        solv.push(jsonSolvent)
+        solv.push(jsonSolvent);
       }
-      return solv
+      return solv;
+    } catch (e) {
+      return this._solvent;
     }
-    catch (e) {}
-    return this._solvent
   }
 
   set solvent(solvent) {
-    this._solvent = solvent
+    this._solvent = solvent;
   }
 
   addSolvent(newSolvent) {
-    const molecule = newSolvent.molecule
+    const { molecule } = newSolvent;
     if (molecule) {
-      let tmpSolvents = []
+      const tmpSolvents = [];
       if (this.solvent) {
-        Object.assign(tmpSolvents, this.solvent)
+        Object.assign(tmpSolvents, this.solvent);
       }
-      const solventData = { label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1 }
-      const filtered = tmpSolvents.find((solv) => {
-        return (solv && solv.label === solventData.label &&
-          solv.smiles === solventData.smiles &&
-          solv.inchikey && solventData.inchikey)
-      })
+      const solventData = {
+        label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1
+      };
+      const filtered = tmpSolvents.find((solv) => (solv && solv.label === solventData.label
+          && solv.smiles === solventData.smiles
+          && solv.inchikey && solventData.inchikey));
       if (!filtered) {
-        tmpSolvents.push(solventData)
+        tmpSolvents.push(solventData);
       }
-      this.solvent = tmpSolvents
+      this.solvent = tmpSolvents;
     }
   }
 
   deleteSolvent(solventToDelete) {
-    let tmpSolvents = []
+    const tmpSolvents = [];
     if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
+      Object.assign(tmpSolvents, this.solvent);
     }
 
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.label === solventToDelete.label &&
-        solv.smiles === solventToDelete.smiles &&
-        solv.inchikey === solventToDelete.inchikey)
-    })
+    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.label === solventToDelete.label
+        && solv.smiles === solventToDelete.smiles
+        && solv.inchikey === solventToDelete.inchikey));
     if (filteredIndex >= 0) {
       tmpSolvents.splice(filteredIndex, 1);
     }
-    this.solvent = tmpSolvents
+    this.solvent = tmpSolvents;
   }
 
   updateSolvent(solventToUpdate) {
-    let tmpSolvents = []
+    const tmpSolvents = [];
     if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
+      Object.assign(tmpSolvents, this.solvent);
     }
 
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.smiles === solventToUpdate.smiles &&
-        solv.inchikey && solventToUpdate.inchikey)
-    })
+    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.smiles === solventToUpdate.smiles
+        && solv.inchikey && solventToUpdate.inchikey));
     if (filteredIndex >= 0) {
-      tmpSolvents[filteredIndex] = solventToUpdate
+      tmpSolvents[filteredIndex] = solventToUpdate;
     }
-    this.solvent = tmpSolvents
+    this.solvent = tmpSolvents;
   }
 
   analysisArray() {

From 3e287696cbd743a230edf5658eefc24ad10b71d0 Mon Sep 17 00:00:00 2001
From: Johannes Haubold <jh@megorei.com>
Date: Wed, 13 Dec 2023 12:36:05 +0100
Subject: [PATCH 230/258] chore: Improve Dev Setup by autorecognizing the
 installed tool versions (#1665)

---
 Dockerfile.chemotion-dev | 16 ++--------------
 run-js-dev.sh            | 13 +++++++++----
 run-ruby-dev.sh          | 37 +++++++++++++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/Dockerfile.chemotion-dev b/Dockerfile.chemotion-dev
index a9b3a2942..9b7b3108c 100644
--- a/Dockerfile.chemotion-dev
+++ b/Dockerfile.chemotion-dev
@@ -6,14 +6,11 @@
 FROM --platform=linux/amd64 ubuntu:jammy
 
 ARG DEBIAN_FRONTEND=noninteractive
-ARG VRUBY=2.7.7
-ARG VNODE=18.18.2
-ARG ASDF_BRANCH=v0.11.3
 
 RUN set -xe  && apt-get update -yqqq --fix-missing && apt-get upgrade -y
 RUN apt update && apt-get install -yqq --fix-missing bash ca-certificates wget apt-transport-https git gpg\
       imagemagick libmagic-dev libmagickcore-dev libmagickwand-dev curl gnupg2 \
-      build-essential nodejs sudo postgresql-client libappindicator1 swig \
+      build-essential sudo postgresql-client libappindicator1 swig \
       gconf-service libasound2 libgconf-2-4 cmake \
       libnspr4 libnss3 libpango1.0-0 libxss1 xdg-utils tzdata libpq-dev \
       gtk2-engines-pixbuf \
@@ -49,19 +46,10 @@ RUN mkdir /home/chemotion-dev/node_modules
 
 SHELL ["/bin/bash", "-c"]
 
-RUN git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch $ASDF_BRANCH
-
+# Even if asdf and the related tools are only installed by running run-ruby-dev.sh, we set the PATH variables here, so when we enter the container via docker exec, we have the path set correctly
 ENV ASDF_DIR=/home/chemotion-dev/.asdf
 ENV PATH=/home/chemotion-dev/.asdf/shims:/home/chemotion-dev/.asdf/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
 
-RUN asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
-RUN asdf install nodejs $VNODE
-RUN asdf global nodejs $VNODE
-
-RUN asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git
-RUN asdf install ruby $VRUBY
-RUN asdf global ruby $VRUBY
-
 RUN echo 'network-timeout 600000' > /home/chemotion-dev/.yarnrc
 # use node modules from outside the application directory
 RUN echo '--modules-folder /home/chemotion-dev/node_modules/' >> /home/chemotion-dev/.yarnrc
diff --git a/run-js-dev.sh b/run-js-dev.sh
index 1aa164945..c868aad3f 100755
--- a/run-js-dev.sh
+++ b/run-js-dev.sh
@@ -1,11 +1,16 @@
 #!/bin/bash
 
-if [ ! -x yarn ]
-then
-  npm install -g yarn
+if command -v yarn; then
+    echo '>>> yarn is installed -> continue'
+else
+    echo '>>> Missing yarn. Installing...'
+    npm install -g yarn
 fi
-asdf global nodejs 18.18.2
+
+echo '>>> Installing JS packages...'
 yarn install
 
+echo "=========================================================================================================="
 echo "THIS WILL FAIL UNTIL THE RUBY GEMS ARE INSTALLED BY run-ruby-dev.sh. JUST TRY AGAIN AFTER INSTALLING THEM."
+echo "=========================================================================================================="
 ./bin/webpack-dev-server
diff --git a/run-ruby-dev.sh b/run-ruby-dev.sh
index cf9439c41..b434b5646 100755
--- a/run-ruby-dev.sh
+++ b/run-ruby-dev.sh
@@ -1,6 +1,40 @@
 #!/bin/bash
+export ASDF_BRANCH=v0.13.1
 
-gem install bundler -v 2.1.4 && bundle install
+# if asdf is not installed -> install
+if command -v asdf ; then
+    echo '>>> asdf is already installed -> continue'
+else
+    echo '>>> Missing asdf. Installing...'
+    git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch $ASDF_BRANCH
+fi
+
+# if asdf plugins are not installed -> install
+if asdf plugin list | grep -Fxq 'ruby'; then
+    echo '>>> Ruby plugin for asdf is installed -> continue'
+else
+    echo '>>> Missing ruby plugin for asdf. Installing...'
+    asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git
+fi
+
+if asdf plugin list | grep -Fxq 'nodejs'; then
+    echo '>>> Nodejs plugin for asdf is installed -> continue'
+else
+    echo '>>> Missing nodejs plugin for asdf. Installing...'
+    asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
+fi
+
+# install all tools as defined by .tool-versions
+echo '>>> Installing tool versions'
+asdf install
+
+# install bundler if not present and then install all gems as defined by GEMFILE
+echo '>>> checking bundler installation'
+BUNDLER_VERSION=$(sed -n '/BUNDLED WITH/{n;p;}' "Gemfile.lock" | tr -d '[:space:]')
+gem install bundler -v $BUNDLER_VERSION
+
+echo '>>> Installing gems'
+bundle install
 
 rm -f tmp/pids/server.pid
 
@@ -16,5 +50,4 @@ else
     bundle exec rake db:setup
 fi
 
-
 bundle exec rails s -p 3000 -b 0.0.0.0

From 4b7229a356e65c8cc1857d051a0c6c8f11467932 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Wed, 20 Dec 2023 05:52:53 +0100
Subject: [PATCH 231/258] fix(spectra): react-spectra-editor upd to correct
 molecule display with svg zoom pan

Co-authored-by: Lan Le <lan.le@kit.edu>

Refs: #1656, https://github.com/ComPlat/react-svg-file-zoom-pan/pull/44
---
 package.json |  6 +++---
 yarn.lock    | 28 ++++++++++++++--------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index dfc9ffacc..0c3b588e6 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
-    "@complat/chem-spectra-client": "1.0.0-rc21",
-    "@complat/react-spectra-editor": "1.0.0-rc21",
+    "@complat/chem-spectra-client": "1.0.0-rc21.patch-1",
+    "@complat/react-spectra-editor": "1.0.0-rc21.patch-1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",
@@ -101,7 +101,7 @@
     "react-select5": "npm:react-select@^5.7.0",
     "react-stickydiv": "^3.4.19",
     "react-svg-file-zoom-pan": "0.1.5",
-    "react-svg-file-zoom-pan-latest": "npm:@complat/react-svg-file-zoom-pan@1.1.2",
+    "react-svg-file-zoom-pan-latest": "npm:@complat/react-svg-file-zoom-pan@1.1.3",
     "react-svg-inline": "^1.2.0",
     "react-treeview": "0.4.7",
     "react-ui-tree": "3.1.0",
diff --git a/yarn.lock b/yarn.lock
index 05ceba6be..a11e6cf34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2236,12 +2236,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@complat/chem-spectra-client@1.0.0-rc21":
-  version "1.0.0-rc21"
-  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc21.tgz#da1b9ac0340b95cf31eb0da9b06f35c58b3620b6"
-  integrity sha512-Z/50cCy4SdadDUJDuL202BVciK6G1WCghLNgwbpI1Qq6v9myHBuhcprYUS6F3K6EradCKwZO5NXsjLn1Silazw==
+"@complat/chem-spectra-client@1.0.0-rc21.patch-1":
+  version "1.0.0-rc21.patch-1"
+  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc21.patch-1.tgz#8175a2de47af8eb0be5c5fb8e7df85720c6ef38f"
+  integrity sha512-WarXNnXuUbdUTfzimrXaYPPl2DgsobBZRntu8dJyNR478GsI1bCaiqDV9psGJbUbPruQslwtXoNA7Z8D+jHjUg==
   dependencies:
-    "@complat/react-spectra-editor" "1.0.0-rc21"
+    "@complat/react-spectra-editor" "1.0.0-rc21.patch-1"
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"
     "@mui/icons-material" "^5.14.9"
@@ -2259,14 +2259,14 @@
     redux-form "^8.3.7"
     redux-saga "^1.1.3"
 
-"@complat/react-spectra-editor@1.0.0-rc21":
-  version "1.0.0-rc21"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc21.tgz#3d62f3ed3eac788817e47f76c47df7289eebc9cc"
-  integrity sha512-2k/O3vmuRh/9N21qO9M8yKLMmGMQtEouF/lvKxuwFt1NsE7y+1SgWy9uAHX79yJxqi5Y/UDArjaS8VyqpgAB1A==
+"@complat/react-spectra-editor@1.0.0-rc21.patch-1":
+  version "1.0.0-rc21.patch-1"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc21.patch-1.tgz#87b2172203d3364b6811ebc33720f152ee76d557"
+  integrity sha512-/2UPOO6QEVuB+th4MjJtYNmU857dn6/tuaKTrJJR8q+s9juR4/OkahNNRS3xx6rnoAquZ8S1oVYnxnEjFY0oaA==
   dependencies:
     "@babel/preset-env" "^7.21.5"
     "@babel/preset-react" "^7.18.6"
-    "@complat/react-svg-file-zoom-pan" "1.1.2"
+    "@complat/react-svg-file-zoom-pan" "1.1.3"
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.10.0"
     "@mdi/js" "^4.7.95"
@@ -2298,10 +2298,10 @@
     reselect "^4.0.0"
     typescript "^5.0.4"
 
-"@complat/react-svg-file-zoom-pan@1.1.2", "react-svg-file-zoom-pan-latest@npm:@complat/react-svg-file-zoom-pan@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.2.tgz#461897dcc501b2758383af1bd215e29153d8a642"
-  integrity sha512-D3aoTrzpUCUEkgY9SAYTfHuZ9nvOe4M+5Bn4iPKHNj00DfHg4lM9EywS5CkdX5/JSTXd7uYhVBITRCaQIsZRhg==
+"@complat/react-svg-file-zoom-pan@1.1.3", "react-svg-file-zoom-pan-latest@npm:@complat/react-svg-file-zoom-pan@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@complat/react-svg-file-zoom-pan/-/react-svg-file-zoom-pan-1.1.3.tgz#a3da916005b6d6ee18be2b1bce62745becf082be"
+  integrity sha512-gtb41KBr/hQjKR9v6HOvwnyGEM61lSNsyMHTCk1rMX4SYJjx8iXw0J7z30Ff9tw2oK6sgEiejlPtM7tkdQi3GQ==
   dependencies:
     babel-plugin-transform-object-rest-spread "^6.26.0"
     d3 "6.7.0"

From 9891afd0a5a7b73e847b28420e1530123ae5d4c5 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Wed, 20 Dec 2023 06:00:40 +0100
Subject: [PATCH 232/258] feat: add chemspectra with ref peaks (#1596)

Co-authored-by: Lan Le <lan.le@kit.edu>
---
 .service-dependencies                         |    2 +-
 app/api/chemotion/attachment_api.rb           |    1 +
 app/api/chemotion/chem_spectra_api.rb         |   54 +
 .../apps/mydb/elements/details/ViewSpectra.js |   23 +-
 app/packs/src/fetchers/AttachmentFetcher.js   |   54 +-
 .../src/stores/alt/actions/SpectraActions.js  |    4 +-
 lib/chemotion/jcamp.rb                        |   42 +
 package.json                                  |    4 +-
 spec/lib/chemotion/jcamp_spec.rb              |   76 +
 yarn.lock                                     | 1437 ++---------------
 10 files changed, 424 insertions(+), 1273 deletions(-)
 create mode 100644 spec/lib/chemotion/jcamp_spec.rb

diff --git a/.service-dependencies b/.service-dependencies
index ba372f79f..03f72dd8c 100644
--- a/.service-dependencies
+++ b/.service-dependencies
@@ -1,5 +1,5 @@
 #syntax=v1
 CONVERTER=ComPlat/chemotion-converter-app@v1.1.1
 KETCHER=ptrxyz/chemotion-ketchersvc@main
-SPECTRA=ComPlat/chem-spectra-app@0.14.0
+SPECTRA=ComPlat/chem-spectra-app@0.15.0
 NMRIUMWRAPPER=NFDI4Chem/nmrium-react-wrapper@v0.4.0
diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index 1cfebaa75..c73a0eed2 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -545,6 +545,7 @@ def remove_duplicated(att)
         optional :cyclicvolta, type: String
         optional :curveIdx, type: Integer
         optional :simulatenmr, type: Boolean
+        optional :axesUnits, type: String
       end
       post 'save_spectrum' do
         jcamp_att = @attachment.generate_spectrum(
diff --git a/app/api/chemotion/chem_spectra_api.rb b/app/api/chemotion/chem_spectra_api.rb
index ac1d5437a..e56eb2130 100644
--- a/app/api/chemotion/chem_spectra_api.rb
+++ b/app/api/chemotion/chem_spectra_api.rb
@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 # Belong to Chemotion module
+
+# rubocop:disable Metrics/ClassLength
 module Chemotion
   # API for ChemSpectra manipulation
   class ChemSpectraAPI < Grape::API
@@ -145,6 +147,56 @@ def raw_file(att)
         post 'refresh' do
           convert_for_refresh(params)
         end
+
+        desc 'Combine spectra'
+        params do
+          requires :spectra_ids, type: [Integer]
+          requires :front_spectra_idx, type: Integer # index of front spectra
+        end
+        post 'combine_spectra' do
+          pm = to_rails_snake_case(params)
+
+          list_file = []
+          list_file_names = []
+          container_id = -1
+          combined_image_filename = ''
+          Attachment.where(id: pm[:spectra_ids]).each do |att|
+            container = att.container
+            combined_image_filename = "#{container.name}.new_combined.png"
+            container_id = att.attachable_id
+            list_file_names.push(att.filename)
+            list_file.push(att.abs_path)
+          end
+
+          _, image = Chemotion::Jcamp::CombineImg.combine(
+            list_file, pm[:front_spectra_idx], list_file_names
+          )
+
+          content_type('application/json')
+          unless image.nil?
+            att = Attachment.find_by(filename: combined_image_filename, attachable_id: container_id)
+            if att.nil?
+              att = Attachment.new(
+                bucket: container_id,
+                filename: combined_image_filename,
+                created_by: current_user.id,
+                created_for: current_user.id,
+                file_path: image.path,
+                attachable_type: 'Container',
+                attachable_id: container_id,
+              )
+              att.save!
+            else
+              att.update!(
+                file_path: image.path,
+                attachable_type: 'Container',
+                attachable_id: container_id,
+              )
+            end
+          end
+
+          { status: true }
+        end
       end
 
       resource :predict do
@@ -208,3 +260,5 @@ def raw_file(att)
     end
   end
 end
+
+# rubocop:enable Metrics/ClassLength
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 759b6e7f5..496087587 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -344,7 +344,8 @@ class ViewSpectra extends React.Component {
 
   writeCommon({
     peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
-    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt, waveLength
+    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt,
+    waveLength, axesUnitsSt,
   }, isMpy = false) {
     const { sample, handleSampleChanged } = this.props;
     const si = this.getSpcInfo();
@@ -388,7 +389,7 @@ class ViewSpectra extends React.Component {
 
     const cb = () => (
       this.saveOp({
-        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt, waveLength
+        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt, waveLength, axesUnitsSt,
       })
     );
     handleSampleChanged(sample, cb);
@@ -410,7 +411,7 @@ class ViewSpectra extends React.Component {
   }
 
   saveOp({
-    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr = false
+    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr = false, layout, axesUnitsSt,
   }) {
     const { handleSubmit } = this.props;
     const { curveIdx } = curveSt;
@@ -421,6 +422,7 @@ class ViewSpectra extends React.Component {
     const predict = JSON.stringify(rmRefreshed(analysis));
     const waveLengthStr = JSON.stringify(waveLength);
     const cyclicvolta = JSON.stringify(cyclicvoltaSt);
+    const axesUnitsStr = JSON.stringify(axesUnitsSt);
 
     const { shifts } = shift;
     const selectedShift = shifts[curveIdx];
@@ -428,7 +430,9 @@ class ViewSpectra extends React.Component {
     const selectedIntegration = integrations[curveIdx];
     const { multiplicities } = multiplicity;
     const selectedMutiplicity = multiplicities[curveIdx];
-
+  
+    const isSaveCombined = FN.isCyclicVoltaLayout(layout);
+    const { spcInfos } = this.state;
     LoadingActions.start.defer();
     SpectraActions.SaveToFile.defer(
       si,
@@ -445,14 +449,17 @@ class ViewSpectra extends React.Component {
       cyclicvolta,
       curveIdx,
       simulatenmr,
+      spcInfos,
+      isSaveCombined,
+      axesUnitsStr,
     );
   }
 
   refreshOp({
-    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, axesUnitsSt,
   }) {
     this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr: true
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr: true, axesUnitsSt
     });
   }
 
@@ -478,10 +485,10 @@ class ViewSpectra extends React.Component {
   }
 
   saveCloseOp({
-    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, layout, axesUnitsSt,
   }) {
     this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, layout, axesUnitsSt,
     });
     this.closeOp();
   }
diff --git a/app/packs/src/fetchers/AttachmentFetcher.js b/app/packs/src/fetchers/AttachmentFetcher.js
index 0390b7464..d63372a74 100644
--- a/app/packs/src/fetchers/AttachmentFetcher.js
+++ b/app/packs/src/fetchers/AttachmentFetcher.js
@@ -511,7 +511,10 @@ export default class AttachmentFetcher {
     waveLengthStr,
     cyclicvolta,
     curveIdx,
-    simulatenmr
+    simulatenmr,
+    previousSpcInfos,
+    isSaveCombined,
+    axesUnitsStr
   ) {
     const params = {
       attachmentId: attId,
@@ -529,6 +532,7 @@ export default class AttachmentFetcher {
       cyclicvolta: cyclicvolta,
       curveIdx: curveIdx,
       simulatenmr: simulatenmr,
+      axesUnits: axesUnitsStr,
     };
 
     const promise = fetch('/api/v1/attachments/save_spectrum/', {
@@ -541,7 +545,23 @@ export default class AttachmentFetcher {
       body: JSON.stringify(decamelizeKeys(params)),
     })
       .then(response => response.json())
-      .then(json => json)
+      .then((json) => {
+        if (!isSaveCombined) {
+          return json;
+        }
+        const oldSpcInfos = [...previousSpcInfos].filter((spc) => {
+          return spc.idx !== attId;
+        });
+        let jcampIds = oldSpcInfos.map((spc) => (spc.idx));
+        const fetchedFilesIdxs = json.files.map((file) => (file.id));
+        jcampIds = [...jcampIds, ...fetchedFilesIdxs];
+  
+        return AttachmentFetcher.combineSpectra(jcampIds, curveIdx).then((res) => {
+          return json;
+        }).catch((errMsg) => {
+          console.log(errMsg); // eslint-disable-line
+        });
+      })
       .catch(errorMessage => {
         console.log(errorMessage);
       });
@@ -640,4 +660,34 @@ export default class AttachmentFetcher {
 
     return promise;
   }
+
+  static combineSpectra(jcampIds, curveIdx) {
+    const promise = fetch(
+      '/api/v1/chemspectra/file/combine_spectra',
+      {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers:
+          {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+        body: JSON.stringify({
+          spectra_ids: jcampIds,
+          front_spectra_idx: curveIdx,
+        }),
+      },
+    )
+      .then((response) => {
+        return response.json();
+      })
+      .then((json) => {
+        return json;
+      })
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
 }
diff --git a/app/packs/src/stores/alt/actions/SpectraActions.js b/app/packs/src/stores/alt/actions/SpectraActions.js
index 6d7aa0265..f8927e5bb 100644
--- a/app/packs/src/stores/alt/actions/SpectraActions.js
+++ b/app/packs/src/stores/alt/actions/SpectraActions.js
@@ -34,9 +34,9 @@ class SpectraActions {
     };
   }
 
-  SaveToFile(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict, cb, keepPred = false, waveLengthStr, cyclicvolta, curveIdx = 0, simulatenmr = false) {
+  SaveToFile(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict, cb, keepPred = false, waveLengthStr, cyclicvolta, curveIdx = 0, simulatenmr = false, previousSpcInfos, isSaveCombined = false, axesUnitsStr) {
     return (dispatch) => {
-      AttachmentFetcher.saveSpectrum(spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr)
+      AttachmentFetcher.saveSpectrum(spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr, previousSpcInfos, isSaveCombined, axesUnitsStr)
         .then((fetchedFiles) => {
           dispatch({ fetchedFiles, spcInfo });
           cb();
diff --git a/lib/chemotion/jcamp.rb b/lib/chemotion/jcamp.rb
index 5178ecad4..948946715 100644
--- a/lib/chemotion/jcamp.rb
+++ b/lib/chemotion/jcamp.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Metrics/BlockLength
+
 require 'net/http'
 
 # Chemotion module
@@ -114,6 +116,7 @@ def self.build_body(
           cyclic_volta: params[:cyclicvolta],
           jcamp_idx: params[:curve_idx],
           simulatenmr: params[:simulatenmr],
+          axes_units: params[:axes_units],
         }
       end
 
@@ -199,6 +202,43 @@ def self.spectrum_img_gene(path)
         Util.extract_zip(rsp_io)
       end
     end
+
+    # Combine multiple jcamps in one image
+    module CombineImg
+      include HTTParty
+
+      def self.stub_request(files, curve_idx, list_file_names)
+        response = nil
+        url = Rails.configuration.spectra.chemspectra.url
+        api_endpoint = "#{url}/combine_images"
+
+        files_to_read = files.map { |fname| File.open(fname) }
+        begin
+          response = HTTParty.post(
+            api_endpoint,
+            body: {
+              multipart: true,
+              files: files_to_read,
+              jcamp_idx: curve_idx,
+              list_file_names: list_file_names,
+            },
+          )
+        ensure
+          files_to_read.each(&:close)
+        end
+        response
+      end
+
+      def self.combine(files, curve_idx, list_file_names)
+        rsp = stub_request(files, curve_idx, list_file_names)
+        if rsp.code == 200
+          rsp_io = StringIO.new(rsp.body.to_s)
+          Util.extract_zip(rsp_io)
+        else # rubocop:disable Style/EmptyElse
+          nil
+        end
+      end
+    end
   end
 end
 
@@ -403,3 +443,5 @@ def self.jcamp_from_nmrium(path)
     end
   end
 end
+
+# rubocop:enable Metrics/BlockLength
diff --git a/package.json b/package.json
index 0c3b588e6..aeaeed6dd 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "7.10.4",
     "@citation-js/plugin-isbn": "0.3.0",
-    "@complat/chem-spectra-client": "1.0.0-rc21.patch-1",
-    "@complat/react-spectra-editor": "1.0.0-rc21.patch-1",
+    "@complat/chem-spectra-client": "1.0.0",
+    "@complat/react-spectra-editor": "1.0.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@novnc/novnc": "^1.2.0",
diff --git a/spec/lib/chemotion/jcamp_spec.rb b/spec/lib/chemotion/jcamp_spec.rb
new file mode 100644
index 000000000..8fda1ce35
--- /dev/null
+++ b/spec/lib/chemotion/jcamp_spec.rb
@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/WordArray
+
+require 'rails_helper'
+require 'webmock/rspec'
+
+RSpec.describe Chemotion::Jcamp do
+  WebMock.allow_net_connect!
+
+  Rails.configuration.spectra.chemspectra.url = 'https://example.com:80'
+  headers = { 'Content-Type' => /multipart\/form-data/ } # rubocop:disable Style/RegexpLiteral
+
+  match_multipart_body = ->(request) do # rubocop:disable Style/Lambda
+    request.body.force_encoding('BINARY')
+    request.body.include? 'Content-Type: text/plain'
+  end
+
+  describe Chemotion::Jcamp::CreateImg do
+    url = 'https://example.com:80/zip_image'
+    file_path = 'spec/fixtures/upload.txt'
+
+    it 'stubs peak in image request' do
+      stub_request(:post, url)
+        .with(
+          headers: headers, &match_multipart_body
+        )
+        .to_return(status: 200, body: '')
+
+      response = described_class.stub_peak_in_image(file_path)
+
+      expect(response.code).to eq(200)
+      expect(response.body).not_to be_nil
+    end
+
+    it 'tests spectrum_img_gene' do
+      allow(described_class).to receive(:stub_peak_in_image).and_return(
+        double(:response, code: 200, body: ''), # rubocop:disable RSpec/VerifiedDoubles
+      )
+
+      result = described_class.spectrum_img_gene(file_path)
+
+      expect(result).not_to be_nil
+    end
+  end
+
+  describe Chemotion::Jcamp::CombineImg do
+    url = 'https://example.com:80/combine_images'
+    file_path = 'spec/fixtures/upload.txt'
+
+    it 'stubs combine image request' do
+      stub_request(:post, url)
+        .with(
+          headers: headers, &match_multipart_body
+        )
+        .to_return(status: 200, body: '')
+
+      response = described_class.stub_request([file_path, file_path], 1, ['file_1', 'file_2'])
+
+      expect(response.code).to eq(200)
+      expect(response.body).not_to be_nil
+    end
+
+    it 'tests combine images' do
+      allow(described_class).to receive(:stub_request).and_return(
+        double(:response, code: 200, body: ''), # rubocop:disable RSpec/VerifiedDoubles
+      )
+
+      result = described_class.combine([file_path, file_path], 1, ['file_1', 'file_2'])
+
+      expect(result).not_to be_nil
+    end
+  end
+end
+
+# rubocop:enable Style/WordArray
diff --git a/yarn.lock b/yarn.lock
index a11e6cf34..7a67a2a72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@adobe/css-tools@^4.0.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
-  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
-
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -55,7 +50,7 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.21.4":
+"@babel/code-frame@^7.12.13":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
   integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
@@ -82,11 +77,6 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz"
   integrity sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.22.0", "@babel/compat-data@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.3.tgz#cd502a6a0b6e37d7ad72ce7e71a7160a3ae36f7e"
-  integrity sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==
-
 "@babel/compat-data@^7.20.0":
   version "7.20.1"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
@@ -178,13 +168,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
-  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz"
@@ -193,13 +176,6 @@
     "@babel/helper-explode-assignable-expression" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.3.tgz#c9b83d1ba74e163e023f008a3d3204588a7ceb60"
-  integrity sha512-ahEoxgqNoYXm0k22TvOke48i1PkavGu0qGCmcq9ugi6gnmvKNaMjKBSrZTnWUi1CFEeNAUiVba0Wtzm03aSkJg==
-  dependencies:
-    "@babel/types" "^7.22.3"
-
 "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz"
@@ -210,17 +186,6 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz#bfcd6b7321ffebe33290d68550e2c9d7eb7c7a58"
-  integrity sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==
-  dependencies:
-    "@babel/compat-data" "^7.22.0"
-    "@babel/helper-validator-option" "^7.21.0"
-    browserslist "^4.21.3"
-    lru-cache "^5.1.1"
-    semver "^6.3.0"
-
 "@babel/helper-compilation-targets@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
@@ -244,21 +209,6 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
-"@babel/helper-create-class-features-plugin@^7.21.0", "@babel/helper-create-class-features-plugin@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz#ae3de70586cc757082ae3eba57240d42f468c41b"
-  integrity sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.22.1"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-member-expression-to-functions" "^7.22.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.22.1"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    semver "^6.3.0"
-
 "@babel/helper-create-regexp-features-plugin@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.7.tgz"
@@ -267,15 +217,6 @@
     "@babel/helper-annotate-as-pure" "^7.16.7"
     regexpu-core "^4.7.1"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.1.tgz#a7ed9a8488b45b467fca353cd1a44dc5f0cf5c70"
-  integrity sha512-WWjdnfR3LPIe+0EY8td7WmjhytxXtjKAEpnAxun/hkNiyOaPlvGK+NZaBFIdi9ndYV3Gav7BpFvtUwnaJlwi1w==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.3.1"
-    semver "^6.3.0"
-
 "@babel/helper-define-polyfill-provider@^0.3.1":
   version "0.3.1"
   resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz"
@@ -290,18 +231,6 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-define-polyfill-provider@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz#487053f103110f25b9755c5980e031e93ced24d8"
-  integrity sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-    semver "^6.1.2"
-
 "@babel/helper-environment-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz"
@@ -314,11 +243,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-environment-visitor@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz#ac3a56dbada59ed969d712cf527bd8271fe3eba8"
-  integrity sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==
-
 "@babel/helper-environment-visitor@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
@@ -340,22 +264,6 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
-  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/types" "^7.21.0"
-
-"@babel/helper-function-name@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/types" "^7.19.0"
-
 "@babel/helper-function-name@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
@@ -378,13 +286,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-hoist-variables@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
-  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
@@ -399,13 +300,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-member-expression-to-functions@^7.22.0":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz#4b77a12c1b4b8e9e28736ed47d8b91f00976911f"
-  integrity sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==
-  dependencies:
-    "@babel/types" "^7.22.3"
-
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz"
@@ -420,13 +314,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-imports@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
-  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
-  dependencies:
-    "@babel/types" "^7.21.4"
-
 "@babel/helper-module-transforms@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz"
@@ -441,20 +328,6 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.5", "@babel/helper-module-transforms@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz#e0cad47fedcf3cae83c11021696376e2d5a50c63"
-  integrity sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.1"
-    "@babel/helper-module-imports" "^7.21.4"
-    "@babel/helper-simple-access" "^7.21.5"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.21.9"
-    "@babel/traverse" "^7.22.1"
-    "@babel/types" "^7.22.0"
-
 "@babel/helper-module-transforms@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
@@ -476,23 +349,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-optimise-call-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
-  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
-  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
-
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz"
@@ -502,16 +363,6 @@
     "@babel/helper-wrap-function" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
-
 "@babel/helper-replace-supers@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz"
@@ -523,18 +374,6 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz#38cf6e56f7dc614af63a21b45565dd623f0fdc95"
-  integrity sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.1"
-    "@babel/helper-member-expression-to-functions" "^7.22.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/template" "^7.21.9"
-    "@babel/traverse" "^7.22.1"
-    "@babel/types" "^7.22.0"
-
 "@babel/helper-simple-access@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz"
@@ -549,13 +388,6 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
-"@babel/helper-simple-access@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz#d697a7971a5c39eac32c7e63c0921c06c8a249ee"
-  integrity sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==
-  dependencies:
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz"
@@ -563,13 +395,6 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
-  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
-  dependencies:
-    "@babel/types" "^7.20.0"
-
 "@babel/helper-split-export-declaration@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz"
@@ -596,11 +421,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
-"@babel/helper-string-parser@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
-  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
-
 "@babel/helper-string-parser@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
@@ -631,11 +451,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
-"@babel/helper-validator-option@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
-  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
-
 "@babel/helper-wrap-function@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz"
@@ -646,16 +461,6 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helper-wrap-function@^7.18.9":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
-  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
-  dependencies:
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.5"
-    "@babel/types" "^7.20.5"
-
 "@babel/helpers@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz"
@@ -711,11 +516,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
   integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
 
-"@babel/parser@^7.21.9":
-  version "7.22.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
-  integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
-
 "@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
@@ -728,13 +528,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
-  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz"
@@ -744,15 +537,6 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-proposal-optional-chaining" "^7.16.7"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.3.tgz#a75be1365c0c3188c51399a662168c1c98108659"
-  integrity sha512-6r4yRwEnorYByILoDRnEqxtojYKuiIv9FojW2E8GUKo9eWBwbKcd9IiZOZpdyXc64RmyGGyPu3/uAcrz/dq2kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-transform-optional-chaining" "^7.22.3"
-
 "@babel/plugin-proposal-async-generator-functions@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz"
@@ -873,16 +657,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-private-property-in-object@^7.21.0":
-  version "7.21.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
-  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz"
@@ -926,27 +700,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
-  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-
-"@babel/plugin-syntax-import-attributes@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.3.tgz#d7168f22b9b49a6cc1792cec78e06a18ad2e7b4b"
-  integrity sha512-i35jZJv6aO7hxEbIWQ41adVfOzjm9dcYDNeWlBMd8p0ZQRtNUCBrmGwZt+H5lb+oOC9a3svp956KP0oWGA1YsA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-syntax-import-meta@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
-  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz"
@@ -961,13 +714,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-syntax-jsx@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2"
-  integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -1024,14 +770,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
-  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-arrow-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz"
@@ -1039,23 +777,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-arrow-functions@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
-  integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-async-generator-functions@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.3.tgz#3ed99924c354fb9e80dabb2cc8d002c702e94527"
-  integrity sha512-36A4Aq48t66btydbZd5Fk0/xJqbpg/v4QWI4AH4cYHBXy9Mu42UOupZpebKFiCFNT9S9rJFcsld0gsv0ayLjtA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
 "@babel/plugin-transform-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz"
@@ -1065,15 +786,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-remap-async-to-generator" "^7.16.8"
 
-"@babel/plugin-transform-async-to-generator@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
-  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
-  dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-
 "@babel/plugin-transform-block-scoped-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz"
@@ -1081,13 +793,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
-  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-block-scoping@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz"
@@ -1095,30 +800,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-block-scoping@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
-  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
-"@babel/plugin-transform-class-properties@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.3.tgz#3407145e513830df77f0cef828b8b231c166fe4c"
-  integrity sha512-mASLsd6rhOrLZ5F3WbCxkzl67mmOnqik0zrg5W6D/X0QMW7HtvnoL1dRARLKIbMP3vXwkwziuLesPqWVGIl6Bw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-class-static-block@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.3.tgz#e352cf33567385c731a8f21192efeba760358773"
-  integrity sha512-5BirgNWNOx7cwbTJCOmKFJ1pZjwk5MUfMIwiBBvsirCJMZeQgs5pk6i1OlkVg+1Vef5LfBahFOrdCnAWvkVKMw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
 "@babel/plugin-transform-classes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz"
@@ -1133,21 +814,6 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
     globals "^11.1.0"
 
-"@babel/plugin-transform-classes@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
-  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-computed-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz"
@@ -1155,14 +821,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-computed-properties@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
-  integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/template" "^7.20.7"
-
 "@babel/plugin-transform-destructuring@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.7.tgz"
@@ -1170,13 +828,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-destructuring@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
-  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz"
@@ -1185,14 +836,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
-  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-duplicate-keys@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz"
@@ -1200,21 +843,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
-  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
-"@babel/plugin-transform-dynamic-import@^7.22.1":
-  version "7.22.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.1.tgz#6c56afaf896a07026330cf39714532abed8d9ed1"
-  integrity sha512-rlhWtONnVBPdmt+jeewS0qSnMz/3yLFrqAP8hHC6EDcrYRSyuz9f9yQhHvVn2Ad6+yO9fHXac5piudeYrInxwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
 "@babel/plugin-transform-exponentiation-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz"
@@ -1223,22 +851,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
-  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-export-namespace-from@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.3.tgz#9b8700aa495007d3bebac8358d1c562434b680b9"
-  integrity sha512-5Ti1cHLTDnt3vX61P9KZ5IG09bFXp4cDVFJIAeCZuxu9OXXJJZp5iP0n/rzM2+iAutJY+KWEyyHcRaHlpQ/P5g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
 "@babel/plugin-transform-for-of@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz"
@@ -1246,13 +858,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-for-of@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
-  integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-function-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz"
@@ -1262,23 +867,6 @@
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
-  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
-
-"@babel/plugin-transform-json-strings@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.3.tgz#a181b8679cf7c93e9d0e3baa5b1776d65be601a9"
-  integrity sha512-IuvOMdeOOY2X4hRNAT6kwbePtK21BUyrAEgLKviL8pL6AEEVUVcqtRdN/HJXBLGIbt9T3ETmXRnFedRRmQNTYw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
 "@babel/plugin-transform-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz"
@@ -1286,21 +874,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
-  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
-"@babel/plugin-transform-logical-assignment-operators@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.3.tgz#9e021455810f33b0baccb82fb759b194f5dc36f0"
-  integrity sha512-CbayIfOw4av2v/HYZEsH+Klks3NC2/MFIR3QR8gnpGNNPEaq2fdlVCRYG/paKs7/5hvBLQ+H70pGWOHtlNEWNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
 "@babel/plugin-transform-member-expression-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz"
@@ -1308,13 +881,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
-  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-modules-amd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz"
@@ -1324,14 +890,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-amd@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
-  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz"
@@ -1342,15 +900,6 @@
     "@babel/helper-simple-access" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
-  integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.21.5"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-simple-access" "^7.21.5"
-
 "@babel/plugin-transform-modules-systemjs@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.7.tgz"
@@ -1362,16 +911,6 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.3.tgz#cc507e03e88d87b016feaeb5dae941e6ef50d91e"
-  integrity sha512-V21W3bKLxO3ZjcBJZ8biSvo5gQ85uIXW2vJfh7JSWf/4SLUSr1tOoHX3ruN4+Oqa2m+BKfsxTR1I+PsvkIWvNw==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-validator-identifier" "^7.19.1"
-
 "@babel/plugin-transform-modules-umd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz"
@@ -1380,14 +919,6 @@
     "@babel/helper-module-transforms" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
-  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz"
@@ -1395,14 +926,6 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.3.tgz#db6fb77e6b3b53ec3b8d370246f0b7cf67d35ab4"
-  integrity sha512-c6HrD/LpUdNNJsISQZpds3TXvfYIAbo+efE9aWmY/PmSRD0agrJ9cPMt4BmArwUQ7ZymEWTFjTyp+yReLJZh0Q==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-new-target@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz"
@@ -1410,40 +933,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-new-target@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.3.tgz#deb0377d741cbee2f45305868b9026dcd6dd96e2"
-  integrity sha512-5RuJdSo89wKdkRTqtM9RVVJzHum9c2s0te9rB7vZC1zKKxcioWIy+xcu4OoIAjyFZhb/bp5KkunuLin1q7Ct+w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-nullish-coalescing-operator@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.3.tgz#8c519f8bf5af94a9ca6f65cf422a9d3396e542b9"
-  integrity sha512-CpaoNp16nX7ROtLONNuCyenYdY/l7ZsR6aoVa7rW7nMWisoNoQNIH5Iay/4LDyRjKMuElMqXiBoOQCDLTMGZiw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-transform-numeric-separator@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.3.tgz#02493070ca6685884b0eee705363ee4da2132ab0"
-  integrity sha512-+AF88fPDJrnseMh5vD9+SH6wq4ZMvpiTMHh58uLs+giMEyASFVhcT3NkoyO+NebFCNnpHJEq5AXO2txV4AGPDQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-transform-object-rest-spread@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.3.tgz#da6fba693effb8c203d8c3bdf7bf4e2567e802e9"
-  integrity sha512-38bzTsqMMCI46/TQnJwPPpy33EjLCc1Gsm2hRTF6zTMWnKsN61vdrpuzIEGQyKEhDSYDKyZHrrd5FMj4gcUHhw==
-  dependencies:
-    "@babel/compat-data" "^7.22.3"
-    "@babel/helper-compilation-targets" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.22.3"
-
 "@babel/plugin-transform-object-super@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz"
@@ -1452,31 +941,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-replace-supers" "^7.16.7"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
-  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
-
-"@babel/plugin-transform-optional-catch-binding@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.3.tgz#e971a083fc7d209d9cd18253853af1db6d8dc42f"
-  integrity sha512-bnDFWXFzWY0BsOyqaoSXvMQ2F35zutQipugog/rqotL2S4ciFOKlRYUu9djt4iq09oh2/34hqfRR2k1dIvuu4g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-transform-optional-chaining@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.3.tgz#5fd24a4a7843b76da6aeec23c7f551da5d365290"
-  integrity sha512-63v3/UFFxhPKT8j8u1jTTGVyITxl7/7AfOqK8C5gz1rHURPUGe3y5mvIf68eYKGoBNahtJnTxBKug4BQOnzeJg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
 "@babel/plugin-transform-parameters@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz"
@@ -1484,31 +948,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-parameters@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.3.tgz#24477acfd2fd2bc901df906c9bf17fbcfeee900d"
-  integrity sha512-x7QHQJHPuD9VmfpzboyGJ5aHEr9r7DsAsdxdhJiTB3J3j8dyl+NFZ+rX5Q2RWFDCs61c06qBfS4ys2QYn8UkMw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-private-methods@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.3.tgz#adac38020bab5047482d3297107c1f58e9c574f6"
-  integrity sha512-fC7jtjBPFqhqpPAE+O4LKwnLq7gGkD3ZmC2E3i4qWH34mH3gOg2Xrq5YMHUq6DM30xhqM1DNftiRaSqVjEG+ug==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-private-property-in-object@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.3.tgz#031621b02c7b7d95389de1a3dba2fe9e8c548e56"
-  integrity sha512-C7MMl4qWLpgVCbXfj3UW8rR1xeCnisQ0cU7YJHV//8oNBS0aCIVg1vFnZXxOckHhEpQyqNNkWmvSEWnMLlc+Vw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-transform-property-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz"
@@ -1516,13 +955,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
-  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-react-display-name@^7.10.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz"
@@ -1530,13 +962,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-react-display-name@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
-  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-react-jsx-development@^7.10.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz"
@@ -1544,13 +969,6 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.16.7"
 
-"@babel/plugin-transform-react-jsx-development@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
-  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.18.6"
-
 "@babel/plugin-transform-react-jsx-self@^7.10.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz"
@@ -1576,17 +994,6 @@
     "@babel/plugin-syntax-jsx" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.3.tgz#5a1f380df3703ba92eb1a930a539c6d88836f690"
-  integrity sha512-JEulRWG2f04a7L8VWaOngWiK6p+JOSpB+DAtwfJgOaej1qdbNxqtK7MwTBHjUA10NeFcszlFNqCdbRcirzh2uQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-module-imports" "^7.21.4"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/plugin-syntax-jsx" "^7.21.4"
-    "@babel/types" "^7.22.3"
-
 "@babel/plugin-transform-react-pure-annotations@^7.10.4":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz"
@@ -1595,14 +1002,6 @@
     "@babel/helper-annotate-as-pure" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-react-pure-annotations@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
-  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-regenerator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz"
@@ -1610,14 +1009,6 @@
   dependencies:
     regenerator-transform "^0.14.2"
 
-"@babel/plugin-transform-regenerator@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
-  integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    regenerator-transform "^0.15.1"
-
 "@babel/plugin-transform-reserved-words@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz"
@@ -1625,13 +1016,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
-  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-runtime@^7.15.0":
   version "7.16.10"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.10.tgz"
@@ -1651,13 +1035,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
-  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-spread@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz"
@@ -1666,14 +1043,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
 
-"@babel/plugin-transform-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
-  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-
 "@babel/plugin-transform-sticky-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz"
@@ -1681,13 +1050,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
-  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-template-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz"
@@ -1695,13 +1057,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
-  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-typeof-symbol@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz"
@@ -1709,13 +1064,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
-  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-unicode-escapes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz"
@@ -1723,21 +1071,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-unicode-escapes@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
-  integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
-"@babel/plugin-transform-unicode-property-regex@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.3.tgz#597b6a614dc93eaae605ee293e674d79d32eb380"
-  integrity sha512-5ScJ+OmdX+O6HRuMGW4kv7RL9vIKdtdAj9wuWUKy1wbHY3jaM/UlyIiC1G7J6UJiiyMukjjK0QwL3P0vBd0yYg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-unicode-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz"
@@ -1746,22 +1079,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
-  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-unicode-sets-regex@^7.22.3":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.3.tgz#7c14ee33fa69782b0101d0f7143d3fc73ce00700"
-  integrity sha512-hNufLdkF8vqywRp+P55j4FHXqAX2LRUccoZHH7AFn1pq5ZOO2ISKW9w13bFZVjBoTqeve2HOgoJCcaziJVhGNw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/polyfill@^7.10.4":
   version "7.12.1"
   resolved "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz"
@@ -1850,92 +1167,6 @@
     core-js-compat "^3.20.2"
     semver "^6.3.0"
 
-"@babel/preset-env@^7.21.5":
-  version "7.22.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.4.tgz#c86a82630f0e8c61d9bb9327b7b896732028cbed"
-  integrity sha512-c3lHOjbwBv0TkhYCr+XCR6wKcSZ1QbQTVdSkZUaVpLv8CVWotBMArWUi5UAJrcrQaEnleVkkvaV8F/pmc/STZQ==
-  dependencies:
-    "@babel/compat-data" "^7.22.3"
-    "@babel/helper-compilation-targets" "^7.22.1"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.3"
-    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
-    "@babel/plugin-syntax-import-attributes" "^7.22.3"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
-    "@babel/plugin-transform-arrow-functions" "^7.21.5"
-    "@babel/plugin-transform-async-generator-functions" "^7.22.3"
-    "@babel/plugin-transform-async-to-generator" "^7.20.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.21.0"
-    "@babel/plugin-transform-class-properties" "^7.22.3"
-    "@babel/plugin-transform-class-static-block" "^7.22.3"
-    "@babel/plugin-transform-classes" "^7.21.0"
-    "@babel/plugin-transform-computed-properties" "^7.21.5"
-    "@babel/plugin-transform-destructuring" "^7.21.3"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-dynamic-import" "^7.22.1"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-export-namespace-from" "^7.22.3"
-    "@babel/plugin-transform-for-of" "^7.21.5"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-json-strings" "^7.22.3"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.22.3"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.20.11"
-    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.22.3"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.3"
-    "@babel/plugin-transform-new-target" "^7.22.3"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.3"
-    "@babel/plugin-transform-numeric-separator" "^7.22.3"
-    "@babel/plugin-transform-object-rest-spread" "^7.22.3"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-optional-catch-binding" "^7.22.3"
-    "@babel/plugin-transform-optional-chaining" "^7.22.3"
-    "@babel/plugin-transform-parameters" "^7.22.3"
-    "@babel/plugin-transform-private-methods" "^7.22.3"
-    "@babel/plugin-transform-private-property-in-object" "^7.22.3"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.21.5"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.20.7"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
-    "@babel/plugin-transform-unicode-property-regex" "^7.22.3"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/plugin-transform-unicode-sets-regex" "^7.22.3"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.22.4"
-    babel-plugin-polyfill-corejs2 "^0.4.3"
-    babel-plugin-polyfill-corejs3 "^0.8.1"
-    babel-plugin-polyfill-regenerator "^0.5.0"
-    core-js-compat "^3.30.2"
-    semver "^6.3.0"
-
 "@babel/preset-modules@^0.1.5":
   version "0.1.5"
   resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz"
@@ -1960,18 +1191,6 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
-"@babel/preset-react@^7.18.6":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.22.3.tgz#2ec7f91d0c924fa2ea0c7cfbbf690bc62b79cd84"
-  integrity sha512-lxDz1mnZ9polqClBCVBjIVUypoB4qV3/tZUDb/IlYbW1kiiLaXaX+bInbRjl+lNQ/iUZraQ3+S8daEmoELMWug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-transform-react-display-name" "^7.18.6"
-    "@babel/plugin-transform-react-jsx" "^7.22.3"
-    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
-    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
-
 "@babel/register@^7.11.5":
   version "7.16.9"
   resolved "https://registry.npmjs.org/@babel/register/-/register-7.16.9.tgz"
@@ -1983,11 +1202,6 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
 "@babel/runtime-corejs2@^7.0.0":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.16.7.tgz"
@@ -2040,9 +1254,16 @@
     regenerator-runtime "^0.13.11"
 
 "@babel/runtime@^7.23.2":
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
-  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
+  integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.23.6":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
+  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -2071,15 +1292,6 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/template@^7.20.7", "@babel/template@^7.21.9":
-  version "7.21.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
-  integrity sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==
-  dependencies:
-    "@babel/code-frame" "^7.21.4"
-    "@babel/parser" "^7.21.9"
-    "@babel/types" "^7.21.5"
-
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -2089,7 +1301,7 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5", "@babel/traverse@^7.22.1":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.20.1":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
   integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
@@ -2113,7 +1325,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2":
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.20.0", "@babel/types@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842"
   integrity sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==
@@ -2122,15 +1334,6 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.9", "@babel/types@^7.20.5", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5", "@babel/types@^7.22.0", "@babel/types@^7.22.3", "@babel/types@^7.22.4":
-  version "7.22.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.4.tgz#56a2653ae7e7591365dabf20b76295410684c071"
-  integrity sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==
-  dependencies:
-    "@babel/helper-string-parser" "^7.21.5"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
@@ -2236,12 +1439,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@complat/chem-spectra-client@1.0.0-rc21.patch-1":
-  version "1.0.0-rc21.patch-1"
-  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0-rc21.patch-1.tgz#8175a2de47af8eb0be5c5fb8e7df85720c6ef38f"
-  integrity sha512-WarXNnXuUbdUTfzimrXaYPPl2DgsobBZRntu8dJyNR478GsI1bCaiqDV9psGJbUbPruQslwtXoNA7Z8D+jHjUg==
+"@complat/chem-spectra-client@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@complat/chem-spectra-client/-/chem-spectra-client-1.0.0.tgz#55ad5ba37576409e854eb20eefa2160686ff6dc0"
+  integrity sha512-XlTKG0ZoR3qq9SOqjjUyV+iA+2ttPJSgec7D7rujpdaCyYi3g9XNiEzY3UK0LzVxnvlYby9lDB0hVC4TmVcZ7A==
   dependencies:
-    "@complat/react-spectra-editor" "1.0.0-rc21.patch-1"
+    "@complat/react-spectra-editor" "1.0.0"
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"
     "@mui/icons-material" "^5.14.9"
@@ -2259,38 +1462,36 @@
     redux-form "^8.3.7"
     redux-saga "^1.1.3"
 
-"@complat/react-spectra-editor@1.0.0-rc21.patch-1":
-  version "1.0.0-rc21.patch-1"
-  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0-rc21.patch-1.tgz#87b2172203d3364b6811ebc33720f152ee76d557"
-  integrity sha512-/2UPOO6QEVuB+th4MjJtYNmU857dn6/tuaKTrJJR8q+s9juR4/OkahNNRS3xx6rnoAquZ8S1oVYnxnEjFY0oaA==
+"@complat/react-spectra-editor@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@complat/react-spectra-editor/-/react-spectra-editor-1.0.0.tgz#2491cea4e582bbd9966ba6a04bbf60e1e8fea20d"
+  integrity sha512-BK5R7p6hGY8jpR6U4OzTZ2Tf9ukPcfCJaFDiA/yFya9zVhRNChnrY/jr+ZNjIxJntD7cmP8FnXbHhT751WfoOA==
   dependencies:
-    "@babel/preset-env" "^7.21.5"
-    "@babel/preset-react" "^7.18.6"
     "@complat/react-svg-file-zoom-pan" "1.1.3"
-    "@material-ui/core" "^4.10.0"
-    "@material-ui/icons" "^4.10.0"
-    "@mdi/js" "^4.7.95"
-    "@mdi/react" "^1.2.1"
-    "@testing-library/jest-dom" "^5.16.5"
-    "@testing-library/react" "12.1.5"
+    "@emotion/react" "^11.11.1"
+    "@emotion/styled" "^11.11.0"
+    "@mdi/js" "^7.2.96"
+    "@mdi/react" "^1.6.1"
+    "@mui/icons-material" "^5.14.9"
+    "@mui/material" "^5.14.9"
+    "@mui/styles" "^5.14.9"
     "@types/jest" "^29.5.0"
     "@types/node" "^18.15.11"
     "@types/react" "^18.0.34"
     "@types/react-dom" "^18.0.11"
     babel-plugin-transform-object-rest-spread "^6.26.0"
     browserslist "^4.21.5"
-    classnames "^2.2.6"
+    classnames "^2.3.2"
     d3 "^5.16.0"
     d3-brush "3.0.0"
     d3-selection "^2.0.0"
     d3-tip "^0.9.1"
     jcampconverter "4.1.0"
     ml-savitzky-golay-generalized "1.1.1"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     react-dropzone "^8.0.3"
     react-quill "^2.0.0"
     react-redux "^7.2.0"
-    react-svg-inline "^2.1.1"
     redux "^4.1.1"
     redux-saga "^1.1.3"
     redux-undo "^1.1.0"
@@ -2653,6 +1854,13 @@
   dependencies:
     "@floating-ui/dom" "^1.5.1"
 
+"@floating-ui/react-dom@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
+  integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
 "@floating-ui/utils@^0.1.3":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d"
@@ -2856,7 +2064,7 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0"
   integrity sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==
 
-"@material-ui/core@^4.10.0", "@material-ui/core@^4.12.4":
+"@material-ui/core@^4.12.4":
   version "4.12.4"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
   integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
@@ -2874,7 +2082,7 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@^4.10.0", "@material-ui/icons@^4.11.3":
+"@material-ui/icons@^4.11.3":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
   integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
@@ -2927,15 +2135,17 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
-"@mdi/js@^4.7.95":
-  version "4.9.95"
-  resolved "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz"
-  integrity sha512-6zKTCqZUCuDWJThdRcjdFTqp2BXfYwXI1UlYa68A1/kmCcy1ijpbpRbrJcUdZ+9WojencCh1DOGFqhj/x8I/eQ==
+"@mdi/js@^7.2.96":
+  version "7.3.67"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.3.67.tgz#23bfca863b87a9433815717dcaa6ae43eac7db58"
+  integrity sha512-MnRjknFqpTC6FifhGHjZ0+QYq2bAkZFQqIj8JA2AdPZbBxUvr8QSgB2yPAJ8/ob/XkR41xlg5majDR3c1JP1hw==
 
-"@mdi/react@^1.2.1":
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/@mdi/react/-/react-1.5.0.tgz"
-  integrity sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w==
+"@mdi/react@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.6.1.tgz#624313593ae8065d2a09878ca81beb3e4b676b03"
+  integrity sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==
+  dependencies:
+    prop-types "^15.7.2"
 
 "@mui/base@5.0.0-beta.23":
   version "5.0.0-beta.23"
@@ -2950,11 +2160,29 @@
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
+"@mui/base@5.0.0-beta.29":
+  version "5.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.29.tgz#bc50d1dbb825c0546603ea711907a01467be014a"
+  integrity sha512-OXfUssYrB6ch/xpBVHMKAjThPlI9VyGGKdvQLMXef2j39wXfcxPlUVQlwia/lmE3rxWIGvbwkZsDtNYzLMsDUg==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@floating-ui/react-dom" "^2.0.4"
+    "@mui/types" "^7.2.11"
+    "@mui/utils" "^5.15.2"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.14.17":
   version "5.14.17"
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.17.tgz#68ec40ea00832fb685f09bd493648b1f68f5baf4"
   integrity sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==
 
+"@mui/core-downloads-tracker@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.2.tgz#eaf6f9faf7f8c4ef486693ace1237c6c7f4e3812"
+  integrity sha512-0vk4ckS2w1F5PmkSXSd7F/QuRlNcPqWTJ8CPl+HQRLTIhJVS/VKEI+3dQufOdKfn2wS+ecnvlvXerbugs+xZ8Q==
+
 "@mui/icons-material@^5.14.9":
   version "5.14.16"
   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.16.tgz#bd394183b0cfb068d4fa48292cd8d329be8d6b16"
@@ -2980,6 +2208,24 @@
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
+"@mui/material@^5.14.9":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.2.tgz#a98df5812f22f7af7f68092787297b86f563dbf1"
+  integrity sha512-JnoIrpNmEHG5uC1IyEdgsnDiaiuCZnUIh7f9oeAr87AvBmNiEJPbo7XrD7kBTFWwp+b97rQ12QdSs9CLhT2n/A==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/base" "5.0.0-beta.29"
+    "@mui/core-downloads-tracker" "^5.15.2"
+    "@mui/system" "^5.15.2"
+    "@mui/types" "^7.2.11"
+    "@mui/utils" "^5.15.2"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
 "@mui/private-theming@^5.14.17":
   version "5.14.17"
   resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.17.tgz#2fdf9d7df54dcb27e8ae7e00f440eb8310376ec3"
@@ -2989,6 +2235,15 @@
     "@mui/utils" "^5.14.17"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.2.tgz#8a3f1e6c800dc48d7742cfafea336e765f80085f"
+  integrity sha512-KlXx5TH1Mw9omSY+Q6rz5TA/P71meSYaAOeopiW8s6o433+fnOxS17rZbmd1RnDZGCo+j24TfCavQuCMBAZnQA==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/utils" "^5.15.2"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.14.17":
   version "5.14.17"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.17.tgz#7f79d863604076db5278bd38a2eeac44cd2ed336"
@@ -2999,6 +2254,16 @@
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.2.tgz#3acf1c56275ccab9fa6028209537c49eec8397b3"
+  integrity sha512-fYEN3IZzbebeHwAmQHhxwruiOIi8W74709qXg/7tgtHV4byQSmPgnnKsZkg0hFlzjEbcJIRZyZI0qEecgpR2cg==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
 "@mui/styles@^5.14.10":
   version "5.14.17"
   resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.17.tgz#441afdd9425b4aad3dea727b0067d367a41f4b58"
@@ -3022,6 +2287,29 @@
     jss-plugin-vendor-prefixer "^10.10.0"
     prop-types "^15.8.1"
 
+"@mui/styles@^5.14.9":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.2.tgz#4657d7dd1d05b56a10bdc41a802123888f206fe2"
+  integrity sha512-B8a3IW/HqAaIWr4wd2CafITT/NOO63X0bQF36WsLCQec9vgRLh6CKLLjDY5pvyEpzJJFYwI7kjUMaNeETpYsXg==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@emotion/hash" "^0.9.1"
+    "@mui/private-theming" "^5.15.2"
+    "@mui/types" "^7.2.11"
+    "@mui/utils" "^5.15.2"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.10.0"
+    jss-plugin-camel-case "^10.10.0"
+    jss-plugin-default-unit "^10.10.0"
+    jss-plugin-global "^10.10.0"
+    jss-plugin-nested "^10.10.0"
+    jss-plugin-props-sort "^10.10.0"
+    jss-plugin-rule-value-function "^10.10.0"
+    jss-plugin-vendor-prefixer "^10.10.0"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.14.17":
   version "5.14.17"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.17.tgz#3e212d1e699d4c777bbe5c6584ae129b1ef7d8bc"
@@ -3036,6 +2324,25 @@
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
+"@mui/system@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.2.tgz#13e618355b973729fbb39bd49dce46a7e88cbe28"
+  integrity sha512-I7CzLiHDtU/BTobJgSk+wPGGWG95K8lYfdFEnq//wOgSrLDAdOVvl2gleDxJWO+yAbGz4RKEOnR9KuD+xQZH4A==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/private-theming" "^5.15.2"
+    "@mui/styled-engine" "^5.15.2"
+    "@mui/types" "^7.2.11"
+    "@mui/utils" "^5.15.2"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.11":
+  version "7.2.11"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.11.tgz#36b99a88f8010dc716128e568dc05681a69dc7ae"
+  integrity sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==
+
 "@mui/types@^7.2.8":
   version "7.2.8"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.8.tgz#2ed4402f104d65fcd4f460ca358654c8935e2285"
@@ -3051,6 +2358,16 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/utils@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.2.tgz#9c66994cf2a370baee1bd49ae408ab149280f7a6"
+  integrity sha512-6dGM9/guFKBlFRHA7/mbM+E7wE7CYDy9Ny4JLtD3J+NTyhi8nd8YxlzgAgTaTVqY0BpdQ2zdfB/q6+p2EdGM0w==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@novnc/novnc@^1.2.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.3.0.tgz"
@@ -3560,44 +2877,6 @@
   resolved "https://registry.yarnpkg.com/@svgedit/svgcanvas/-/svgcanvas-7.2.0.tgz#71c2ab1c500c66f870752f06be9cebc72ec2e895"
   integrity sha512-ZICcBJIeq3ZKIrej889bEbIzeU2Rh6rosG8HyZI3NVDjkzYHfO5ppiqeNcN8hU6eah0lrhMXhuvu4dRoAYa5Vg==
 
-"@testing-library/dom@^8.0.0":
-  version "8.20.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
-  integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^5.0.1"
-    aria-query "^5.0.0"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
-    pretty-format "^27.0.2"
-
-"@testing-library/jest-dom@^5.16.5":
-  version "5.16.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
-  integrity sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==
-  dependencies:
-    "@adobe/css-tools" "^4.0.1"
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^5.0.0"
-    chalk "^3.0.0"
-    css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
-"@testing-library/react@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
-  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "<18.0.0"
-
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
@@ -3608,11 +2887,6 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@types/aria-query@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
-  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
-
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -3964,7 +3238,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*", "@types/jest@^29.5.0":
+"@types/jest@^29.5.0":
   version "29.5.2"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.2.tgz#86b4afc86e3a8f3005b297ed8a72494f89e6395b"
   integrity sha512-mSoZVJF5YzGVCk+FsDxzDuH7s+SCkzrgKZzf0Z0T2WudhBUPoF6ktoTPC4R0ZoCPCV5xUvuU6ias5NvxcBcMMg==
@@ -4043,6 +3317,11 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/prop-types@^15.7.11":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
 "@types/prop-types@^15.7.9":
   version "15.7.9"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
@@ -4084,13 +3363,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@<18.0.0":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
-  integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-dom@^18.0.11":
   version "18.2.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.4.tgz#13f25bfbf4e404d26f62ac6e406591451acba9e0"
@@ -4122,6 +3394,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.10":
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.8":
   version "4.4.9"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
@@ -4138,15 +3417,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17":
-  version "17.0.60"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.60.tgz#a4a97dcdbebad76612c188fc06440e4995fd8ad2"
-  integrity sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/react@^18.0.34":
   version "18.2.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.8.tgz#a77dcffe4e9af148ca4aa8000c51a1e8ed99e2c8"
@@ -4213,13 +3483,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.6"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.6.tgz#4887f6e1af11215428ab02777873bcede98a53b0"
-  integrity sha512-FkHXCb+ikSoUP4Y4rOslzTdX5sqYwMxfefKh1GmZ8ce1GOkEHntSp6b5cGadmNfp5e4BMEWOMx+WSKd5/MqlDA==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
@@ -4783,13 +4046,6 @@ aria-query@^4.2.2:
     "@babel/runtime" "^7.10.2"
     "@babel/runtime-corejs3" "^7.10.2"
 
-aria-query@^5.0.0:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
-  dependencies:
-    deep-equal "^2.0.5"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz"
@@ -4805,14 +4061,6 @@ arr-union@^3.1.0:
   resolved "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-buffer-byte-length@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
-  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
-  dependencies:
-    call-bind "^1.0.2"
-    is-array-buffer "^3.0.1"
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
@@ -5051,15 +4299,6 @@ babel-plugin-polyfill-corejs2@^0.3.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     semver "^6.1.1"
 
-babel-plugin-polyfill-corejs2@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz#75044d90ba5043a5fb559ac98496f62f3eb668fd"
-  integrity sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==
-  dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.4.0"
-    semver "^6.1.1"
-
 babel-plugin-polyfill-corejs3@^0.5.0:
   version "0.5.1"
   resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.1.tgz"
@@ -5068,14 +4307,6 @@ babel-plugin-polyfill-corejs3@^0.5.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     core-js-compat "^3.20.0"
 
-babel-plugin-polyfill-corejs3@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz#39248263c38191f0d226f928d666e6db1b4b3a8a"
-  integrity sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.0"
-    core-js-compat "^3.30.1"
-
 babel-plugin-polyfill-regenerator@^0.3.0:
   version "0.3.1"
   resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz"
@@ -5083,13 +4314,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-polyfill-regenerator@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz#e7344d88d9ef18a3c47ded99362ae4a757609380"
-  integrity sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.0"
-
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -5514,14 +4738,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^4.0, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
@@ -5725,6 +4941,11 @@ classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classna
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@~2.2.6:
   version "2.2.6"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz"
@@ -6131,13 +5352,6 @@ core-js-compat@^3.20.0, core-js-compat@^3.20.2:
     browserslist "^4.19.1"
     semver "7.0.0"
 
-core-js-compat@^3.30.1, core-js-compat@^3.30.2:
-  version "3.30.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.2.tgz#83f136e375babdb8c80ad3c22d67c69098c1dd8b"
-  integrity sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==
-  dependencies:
-    browserslist "^4.21.5"
-
 core-js-pure@^3.20.2:
   version "3.20.3"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.3.tgz"
@@ -6259,11 +5473,6 @@ css-what@^5.0.1, css-what@^5.1.0:
   resolved "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz"
   integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -7069,30 +6278,6 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-equal@^2.0.5:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.1.tgz#c72ab22f3a7d3503a4ca87dde976fe9978816739"
-  integrity sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.2"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.0"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.0"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.9"
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -7144,14 +6329,6 @@ define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-define-properties@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
-  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
-  dependencies:
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz"
@@ -7297,11 +6474,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
-  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
-
 dom-align@^1.7.0:
   version "1.12.2"
   resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz"
@@ -7634,21 +6806,6 @@ es-array-method-boxes-properly@^1.0.0:
   resolved "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz"
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
-es-get-iterator@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
-  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    has-symbols "^1.0.3"
-    is-arguments "^1.1.1"
-    is-map "^2.0.2"
-    is-set "^2.0.2"
-    is-string "^1.0.7"
-    isarray "^2.0.5"
-    stop-iteration-iterator "^1.0.0"
-
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
@@ -8433,13 +7590,6 @@ font-family-papandreou@^0.2.0-patch1:
   resolved "https://registry.yarnpkg.com/font-family-papandreou/-/font-family-papandreou-0.2.0-patch2.tgz#c75b659e96ffbc7ab2af651cf7b4910b334e8dd2"
   integrity sha512-l/YiRdBSH/eWv6OF3sLGkwErL+n0MqCICi9mppTZBOCL5vixWGDqCYvRcuxB2h7RGCTzaTKOHT2caHvCXQPRlw==
 
-for-each@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
-  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
-  dependencies:
-    is-callable "^1.1.3"
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
@@ -8565,11 +7715,6 @@ functions-have-names@^1.2.2:
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz"
   integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
 
-functions-have-names@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
-  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
-
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"
@@ -8611,16 +7756,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
-  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -8805,13 +7940,6 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
-  dependencies:
-    get-intrinsic "^1.1.3"
-
 graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
@@ -8872,11 +8000,6 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
-has-proto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
-  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
-
 has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz"
@@ -9365,15 +8488,6 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-internal-slot@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
-  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
-  dependencies:
-    get-intrinsic "^1.2.0"
-    has "^1.0.3"
-    side-channel "^1.0.4"
-
 internmap@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
@@ -9443,7 +8557,7 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4, is-arguments@^1.1.1:
+is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -9451,15 +8565,6 @@ is-arguments@^1.0.4, is-arguments@^1.1.1:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
-  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.0"
-    is-typed-array "^1.1.10"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
@@ -9497,11 +8602,6 @@ is-buffer@^2.0.0:
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
-is-callable@^1.1.3:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
-  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-
 is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
@@ -9549,7 +8649,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.5:
+is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -9643,11 +8743,6 @@ is-lambda@^1.0.1:
   resolved "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz"
   integrity sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=
 
-is-map@^2.0.1, is-map@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
-  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
-
 is-mobile@^2.1.0:
   version "2.2.2"
   resolved "https://registry.npmjs.org/is-mobile/-/is-mobile-2.2.2.tgz"
@@ -9722,11 +8817,6 @@ is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-set@^2.0.1, is-set@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
-  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
-
 is-shared-array-buffer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz"
@@ -9768,17 +8858,6 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
-  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
-  dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
-
 is-typed-array@^1.1.3, is-typed-array@^1.1.7:
   version "1.1.8"
   resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.8.tgz"
@@ -9800,11 +8879,6 @@ is-unicode-supported@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
 is-weakref@^1.0.1, is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
@@ -9812,14 +8886,6 @@ is-weakref@^1.0.1, is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
-is-weakset@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
-  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
@@ -9842,11 +8908,6 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
@@ -10749,13 +9810,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -10773,11 +9827,6 @@ luxon@^3.2.1:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.3.0.tgz#d73ab5b5d2b49a461c47cedbc7e73309b4805b48"
   integrity sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==
 
-lz-string@^1.4.4:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
-  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
-
 make-cancellable-promise@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz"
@@ -11034,11 +10083,6 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-
 mini-store@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/mini-store/-/mini-store-2.0.0.tgz"
@@ -11766,7 +10810,7 @@ object-inspect@^1.12.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
-object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2, object-is@^1.1.5:
+object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
   version "1.1.5"
   resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -11796,16 +10840,6 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.assign@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
-  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    has-symbols "^1.0.3"
-    object-keys "^1.1.1"
-
 object.entries@^1.1.1, object.entries@^1.1.5:
   version "1.1.5"
   resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
@@ -12298,15 +11332,6 @@ pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
-pretty-format@^27.0.2:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
-  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
-  dependencies:
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^17.0.1"
-
 pretty-format@^29.0.0, pretty-format@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a"
@@ -13399,7 +12424,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.4.2, react-
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.12.0 || ^17.0.0", "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
+"react-is@^16.12.0 || ^17.0.0", "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -13769,14 +12794,6 @@ react-svg-inline@^1.2.0:
   dependencies:
     classnames "^2.2.1"
 
-react-svg-inline@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/react-svg-inline/-/react-svg-inline-2.1.1.tgz"
-  integrity sha512-mN7/qwq133dHMMQdtJRMtZ6tK1ynzOJMZBKR34blzv3HqQpNBsaOKXkEe1kN14hcJJhzrUbsB+uix2ZOpF4kQg==
-  dependencies:
-    classnames "^2.2.1"
-    prop-types "^15.5.8"
-
 react-test-renderer@^17.0.0:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz"
@@ -14007,14 +13024,6 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
 redux-form@^8.3.7:
   version "8.3.8"
   resolved "https://registry.npmjs.org/redux-form/-/redux-form-8.3.8.tgz"
@@ -14072,13 +13081,6 @@ redux@^4.2.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-regenerate-unicode-properties@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
-  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
-  dependencies:
-    regenerate "^1.4.2"
-
 regenerate-unicode-properties@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz"
@@ -14125,13 +13127,6 @@ regenerator-transform@^0.14.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regenerator-transform@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
-  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz"
@@ -14157,15 +13152,6 @@ regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexp.prototype.flags@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
-  integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    functions-have-names "^1.2.3"
-
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -14183,18 +13169,6 @@ regexpu-core@^4.7.1:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
-  dependencies:
-    "@babel/regjsgen" "^0.8.0"
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.1.0"
-
 regjsgen@^0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz"
@@ -14207,13 +13181,6 @@ regjsparser@^0.7.0:
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
-  dependencies:
-    jsesc "~0.5.0"
-
 release-zalgo@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/release-zalgo/-/release-zalgo-1.0.0.tgz#09700b7e5074329739330e535c5a90fb67851730"
@@ -15075,13 +14042,6 @@ statuses@2.0.1:
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
 string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz"
@@ -15194,13 +14154,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
 strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -15692,11 +14645,6 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
-unicode-match-property-value-ecmascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
-  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
-
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz"
@@ -16235,16 +15183,6 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -16262,18 +15200,6 @@ which-typed-array@^1.1.2:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.7"
 
-which-typed-array@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
-  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
-  dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
-    is-typed-array "^1.1.10"
-
 which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
@@ -16431,11 +15357,6 @@ y18n@^5.0.5:
   resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"

From 5ca9277748ed9acb8112e5aa6a6bc419033901f5 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Wed, 20 Dec 2023 06:21:01 +0100
Subject: [PATCH 233/258] fix: camelcasing attributes for proper display of
 SVGs

* fix: camelcasing attributes for proper display of svgs

due to the scrubber library lowercasing all attribute names some properties
are not rendered in the browser.

In this case beads with a gradient  in molecule, sample and reaction
were not displayed in browser and were also missing after conversion in png in doc report.

(successiv gsub benchmarked as faster than gsub with regex and a dict)

* upd yarn.lock

Refs:  #1670
---
 app/models/molecule.rb | 7 ++++++-
 app/models/sample.rb   | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/models/molecule.rb b/app/models/molecule.rb
index 4c5a0ed66..81ef92cbd 100644
--- a/app/models/molecule.rb
+++ b/app/models/molecule.rb
@@ -174,9 +174,14 @@ def attach_svg(svg_data)
                       "#{SecureRandom.hex(64)}.svg"
                     end
     Loofah::HTML5::SafeList::ALLOWED_ATTRIBUTES.add('overflow')
+    # NB: successiv gsub seems to be faster than a single gsub with a regexp with multiple matches
+    scrubbed_data = Loofah.scrub_fragment(svg_data.encode('UTF-8'), :strip).to_s
+                          .gsub('viewbox', 'viewBox')
+                          .gsub('lineargradient', 'linearGradient')
+                          .gsub('radialgradient', 'radialGradient')
     File.write(
       full_svg_path(svg_file_name),
-      Loofah.scrub_fragment(svg_data.encode('UTF-8'), :strip).to_s.gsub('viewbox', 'viewBox'),
+      scrubbed_data,
     )
 
     self.molecule_svg_file = svg_file_name
diff --git a/app/models/sample.rb b/app/models/sample.rb
index a5d4d3ddb..205d5c8b9 100644
--- a/app/models/sample.rb
+++ b/app/models/sample.rb
@@ -733,7 +733,11 @@ def has_density
 
   def scrub(value)
     Loofah::HTML5::SafeList::ALLOWED_ATTRIBUTES.add('overflow')
-    Loofah.scrub_fragment(value, :strip).to_s.gsub('viewbox', 'viewBox')
+    # NB: successiv gsub seems to be faster than a single gsub with a regexp with multiple matches
+    Loofah.scrub_fragment(value, :strip).to_s
+          .gsub('viewbox', 'viewBox')
+          .gsub('lineargradient', 'linearGradient')
+          .gsub('radialgradient', 'radialGradient')
 #   value
   end
 

From c3145b3cee231199af587784c5259da673a250e0 Mon Sep 17 00:00:00 2001
From: Lan Le <baolan2005@gmail.com>
Date: Wed, 20 Dec 2023 10:53:30 +0100
Subject: [PATCH 234/258] fix: remove original data from nmrium data before
 storing it

Co-authored-by: Lan Le <lan.le@kit.edu>
Refs: #1661
---
 .../nmriumWrapper/NMRiumDisplayer.js          |  4 +-
 app/packs/src/utilities/SpectraHelper.js      | 29 +++++++--
 .../packs/src/utilities/SpectraHelper.spec.js | 61 ++++++++++++++++++-
 3 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/app/packs/src/components/nmriumWrapper/NMRiumDisplayer.js b/app/packs/src/components/nmriumWrapper/NMRiumDisplayer.js
index 8bcd09708..daccdce53 100644
--- a/app/packs/src/components/nmriumWrapper/NMRiumDisplayer.js
+++ b/app/packs/src/components/nmriumWrapper/NMRiumDisplayer.js
@@ -9,6 +9,7 @@ import { parseBase64ToArrayBuffer } from 'src/utilities/FetcherHelper';
 import Attachment from 'src/models/Attachment';
 import { SpectraOps } from 'src/utilities/quillToolbarSymbol';
 import { FN } from '@complat/react-spectra-editor';
+import { cleaningNMRiumData } from 'src/utilities/SpectraHelper';
 
 export default class NMRiumDisplayer extends React.Component {
   constructor(props) {
@@ -102,7 +103,8 @@ export default class NMRiumDisplayer extends React.Component {
       if (eventDataType === 'nmr-wrapper:data-change') {
         const nmrWrapperActionType = eventData.data.actionType;
         if (nmrWrapperActionType !== '') {
-          const nmriumData = (eventData.data?.state || eventData.data) || null;
+          let nmriumData = (eventData.data?.state || eventData.data) || null;
+          nmriumData = cleaningNMRiumData(nmriumData);
           if (!nmriumData) {
             return;
           }
diff --git a/app/packs/src/utilities/SpectraHelper.js b/app/packs/src/utilities/SpectraHelper.js
index e66973c67..f86b70885 100644
--- a/app/packs/src/utilities/SpectraHelper.js
+++ b/app/packs/src/utilities/SpectraHelper.js
@@ -169,7 +169,7 @@ const listNMROntology = (chmos, storedSet, parentIsNMR = false) => {
       } else {
         return storedSet;
       }
-    })
+    });
   } else {
     const { children, value } = chmos;
     let isNMR = parentIsNMR;
@@ -193,7 +193,7 @@ const listNMROntology = (chmos, storedSet, parentIsNMR = false) => {
   return storedSet;
 };
 
-const isNMRKind = (container, chmos=[]) => {
+const isNMRKind = (container, chmos = []) => {
   if (!(container && container.extended_metadata && container.extended_metadata.kind)) return false;
   const { extended_metadata } = container; // eslint-disable-line
   const { kind } = extended_metadata; // eslint-disable-line
@@ -201,8 +201,29 @@ const isNMRKind = (container, chmos=[]) => {
   const ontologies = Array.from(listNMROntology(chmos, setToBeStored));
   const filtered = ontologies.filter((ontology) => {
     return kind === ontology || kind.toLowerCase().includes(ontology);
-  })
+  });
   return filtered.length > 0;
 };
 
-export { BuildSpcInfos, BuildSpcInfosForNMRDisplayer, JcampIds, isNMRKind }; // eslint-disable-line
+const cleaningNMRiumData = (nmriumData) => {
+  if (!nmriumData) return null;
+  const cleanedNMRiumData = { ...nmriumData };
+
+  const { data } = cleanedNMRiumData;
+  if (!data) return cleanedNMRiumData;
+
+  const { spectra } = data;
+  if (!spectra) return cleanedNMRiumData;
+
+  const newSpectra = spectra.map((spc) => {
+    const tmpSpc = { ...spc };
+    delete tmpSpc.originalData;
+    return tmpSpc;
+  });
+
+  data.spectra = [...newSpectra];
+
+  return cleanedNMRiumData;
+};
+
+export { BuildSpcInfos, BuildSpcInfosForNMRDisplayer, JcampIds, isNMRKind, cleaningNMRiumData }; // eslint-disable-line
diff --git a/spec/javascripts/packs/src/utilities/SpectraHelper.spec.js b/spec/javascripts/packs/src/utilities/SpectraHelper.spec.js
index e01c6b824..acd0d32a8 100644
--- a/spec/javascripts/packs/src/utilities/SpectraHelper.spec.js
+++ b/spec/javascripts/packs/src/utilities/SpectraHelper.spec.js
@@ -4,7 +4,7 @@ import {
 } from 'mocha';
 import {
   isNMRKind, BuildSpcInfosForNMRDisplayer,
-  JcampIds, BuildSpcInfos,
+  JcampIds, BuildSpcInfos, cleaningNMRiumData,
 } from 'src/utilities/SpectraHelper';
 import Sample from 'src/models/Sample';
 import Container from 'src/models/Container';
@@ -297,4 +297,63 @@ describe('SpectraHelper', () => {
       });
     });
   });
+
+  describe('.cleaningNMRiumData()', () => {
+    describe('when there is no nmrium data', () => {
+      it('return null when nmrium data is null', () => {
+        const cleanedNMRiumData = cleaningNMRiumData(null);
+        expect(cleanedNMRiumData).toEqual(null);
+      });
+
+      it('return null when nmrium data is undefined', () => {
+        const cleanedNMRiumData = cleaningNMRiumData(undefined);
+        expect(cleanedNMRiumData).toEqual(null);
+      });
+    });
+
+    describe('when it is nmrium but there is no data value', () => {
+      it('return data when there is no data value', () => {
+        const nmriumData = {};
+        const cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+      });
+
+      it('return data when it has data value but data is null or undefined', () => {
+        let nmriumData = { data: null };
+        let cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+
+        nmriumData = { data: undefined };
+        cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+      });
+    });
+
+    describe('when it has data', () => {
+      it('return data when there is no spectra value', () => {
+        const nmriumData = { data: 'just a simple text' };
+        const cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+      });
+
+      it('return data when spectra value is a empty array', () => {
+        const nmriumData = { data: { spectra: [] } };
+        const cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+      });
+
+      it('return data when spectra do not have originalData value', () => {
+        const nmriumData = { data: { spectra: [ { x: [1.0, 2.0], y: [1.0, 2.0] } ] } };
+        const cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(nmriumData);
+      });
+
+      it('remove originalData value', () => {
+        const nmriumData = { data: { spectra: [ { x: [1.0, 2.0], y: [1.0, 2.0], originalData: { x: [1.5, 2.5], y: [1.5, 2.5] } } ] } };
+        const expectedNmriumData = { data: { spectra: [ { x: [1.0, 2.0], y: [1.0, 2.0] } ] } };
+        const cleanedNMRiumData = cleaningNMRiumData(nmriumData);
+        expect(cleanedNMRiumData).toEqual(expectedNmriumData);
+      });
+    });
+  });
 });

From 960e81035204421d40ca943e79a057ebb6a9d3a6 Mon Sep 17 00:00:00 2001
From: Mostafa Mekky <59936007+mekkyz@users.noreply.github.com>
Date: Wed, 20 Dec 2023 11:36:15 +0100
Subject: [PATCH 235/258] feat: Unified attachment list

enhancing attachment list:

applying new attachment list to Datasets, research plan and well-plate attachments

* feat: sorting feat by name, date ( hide sorting functions if no attachments)

* enabling style prop on component

* refactor: Dataset Modal Redesign

* refactor: converting inline styles to scss

* Style: cleaner code and linking to new css classes

* dataset modal discarding logic

* unifying edited image warning text

* style: eslint fixes and css enhancements

* feat: strike attachment name when deleted

* Removed discard btn for 1.9.0

---------

Refs: #1608
---
 app/api/entities/attachment_entity.rb         |   3 +-
 app/assets/stylesheets/attachment-list.scss   | 134 ++++
 app/assets/stylesheets/format-container.scss  |  59 +-
 app/assets/stylesheets/research-plan.scss     |  33 +-
 .../ImageAnnotationEditButton.js              |  96 +--
 .../researchPlans/ImageAnnotationModalSVG.js  |  30 +-
 .../researchPlans/ResearchPlanDetails.js      | 130 ++--
 .../researchPlans/SaveEditedImageWarning.js   |  28 +
 .../researchPlans/SaveResearchPlanWarning.js  |  33 -
 .../ResearchPlanDetailsAttachments.js         | 523 +++++--------
 .../ResearchPlanDetailsFieldImage.js          |   8 +-
 .../wellplatesTab/EmbeddedWellplate.js        |  73 +-
 .../EmbeddedResearchPlanDetails.js            | 235 +++---
 .../details/wellplates/WellplateDetails.js    | 134 ++--
 .../WellplateDetailsAttachments.js            | 614 ++++++++-------
 .../apps/mydb/elements/list/AttachmentList.js | 242 ++++++
 .../components/common/HyperLinksSection.js    | 105 +--
 app/packs/src/components/common/ImageModal.js | 104 +--
 .../container/AttachmentDropzone.js           |  72 +-
 .../container/ContainerComponent.js           |  60 +-
 .../components/container/ContainerDataset.js  | 575 --------------
 .../container/ContainerDatasetField.js        | 159 ++--
 .../container/ContainerDatasetModal.js        | 190 ++++-
 .../container/ContainerDatasetModalContent.js | 724 ++++++++++++++++++
 .../components/container/ContainerDatasets.js | 166 ++--
 app/packs/src/fetchers/AttachmentFetcher.js   | 404 +++++-----
 app/packs/src/fetchers/BaseFetcher.js         |  39 +-
 app/packs/src/fetchers/ReactionsFetcher.js    |  38 +-
 .../src/fetchers/ResearchPlansFetcher.js      |  31 +-
 app/packs/src/fetchers/SamplesFetcher.js      |  68 +-
 app/packs/src/fetchers/WellplatesFetcher.js   |  22 +-
 app/packs/src/models/Wellplate.js             |  42 +-
 spec/api/chemotion/attachment_api_spec.rb     |   6 +-
 .../ImageAnnotationEditButton.spec.js         |  16 +-
 34 files changed, 3015 insertions(+), 2181 deletions(-)
 create mode 100644 app/assets/stylesheets/attachment-list.scss
 create mode 100644 app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
 delete mode 100644 app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
 create mode 100644 app/packs/src/apps/mydb/elements/list/AttachmentList.js
 delete mode 100644 app/packs/src/components/container/ContainerDataset.js
 create mode 100644 app/packs/src/components/container/ContainerDatasetModalContent.js

diff --git a/app/api/entities/attachment_entity.rb b/app/api/entities/attachment_entity.rb
index c80bebadb..b3c1ca24d 100644
--- a/app/api/entities/attachment_entity.rb
+++ b/app/api/entities/attachment_entity.rb
@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 module Entities
-  class AttachmentEntity < Grape::Entity
+  class AttachmentEntity < ApplicationEntity
     expose :id, documentation: { type: 'Integer', desc: "Attachment's unique id" }
     expose :filename, :identifier, :content_type, :thumb, :aasm_state, :filesize, :thumbnail
+    expose_timestamps
 
     def thumbnail
       object.thumb ? Base64.encode64(object.read_thumbnail) : nil
diff --git a/app/assets/stylesheets/attachment-list.scss b/app/assets/stylesheets/attachment-list.scss
new file mode 100644
index 000000000..e435cfd89
--- /dev/null
+++ b/app/assets/stylesheets/attachment-list.scss
@@ -0,0 +1,134 @@
+.attachment-dropzone {
+  width: 100%;
+  padding: 20px;
+  border: 4px dashed #cccccc;
+  text-align: center;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.attachment-dropzone:hover {
+  border-color: #a0a0a0;
+  box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
+}
+
+.sorting-row-style {
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  height: 35px;
+}
+
+.sort-icon-style {
+  margin-left: 5px;
+  cursor: auto;
+  font-size: 20px !important;
+  color: #000;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+  background: none !important;
+  border: none !important;
+  outline: inherit !important;
+}
+
+.sort-icon-style:focus {
+  box-shadow: none !important;
+}
+
+.sort-icon-style:hover {
+  color: #797979 !important;
+  transform: scale(1.1);
+  transition: color 0.3s, transform 0.3s
+}
+
+.attachment-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  transition: box-shadow 0.3s ease, transform 0.2s ease-out;
+  transform-origin: center;
+  position: relative;
+}
+
+.attachment-row:hover {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+}
+
+.attachment-row-image {
+  flex: 0.05;
+  display: flex;
+  margin-left: 10px;
+  align-items: center;
+}
+
+.attachment-row-text {
+  flex: 0.7;
+  margin-left: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #333;
+  font-size: 16px;
+}
+
+.attachment-row-subtext {
+  font-size: 12px;
+  color: #777;
+  display: flex;
+}
+
+.attachment-row-actions {
+  flex: 0.4;
+  display: flex;
+  margin-right: 5px;
+  justify-content: flex-end;
+}
+
+.attachment-image-modal {
+  width: 30px;
+  height: 30px;
+  border-radius: 5px;
+  object-fit: cover;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.attachment-button-size {
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.attachment-gray-button {
+  background-color: #c0c0c0 !important;
+  border-color: #c0c0c0 !important;
+}
+
+.attachment-main-container {
+  padding: 10px;
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+
+.no-attachments-text {
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+}
+
+.sort-container {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
diff --git a/app/assets/stylesheets/format-container.scss b/app/assets/stylesheets/format-container.scss
index ad1ae76e2..aece4c8fe 100644
--- a/app/assets/stylesheets/format-container.scss
+++ b/app/assets/stylesheets/format-container.scss
@@ -7,32 +7,59 @@
   max-height: calc(100vh - 250px);
 }
 
-.attachment-dataset-modal {
+.attachment-annotation-modal {
   height: 95%;
   top: 52% !important;
   margin: unset !important;
   width: calc(80vw) !important;
   .modal-content {
     height: 95%;
-    .modal-header .modal-title .btn-toolbar {
-      float: right;
+    .modal-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
     }
     .modal-body {
       height: 90%;
       overflow: auto;
-      .row {
-        height: 100%;
-        .col-base .desc {
-          min-height: 200px;
-        }
-        .col-full {
-          // height: 100%;
-          .list {
-            overflow: auto;
-            max-height: calc(100% - 70px) !important;
-          }
-        }
-      }
+      max-height: calc(100% - 130px) !important;
     }
   }
 }
+
+.attachment-modal {
+  top: 55% !important;
+  height: 100%;
+  margin: unset !important;
+  width: 70vw !important;
+  .modal-content {
+    height: 90%;
+    .modal-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .modal-body {
+      height: 90%;
+      overflow: auto;
+      max-height: calc(100% - 130px) !important;
+    }
+  }
+}
+
+.attachment-name-input-div {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.attachment-name-input {
+  font-weight: bold;
+  color: #495057;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  padding: 2px 0;
+}
diff --git a/app/assets/stylesheets/research-plan.scss b/app/assets/stylesheets/research-plan.scss
index 481fb1fbb..bcfbc7b71 100644
--- a/app/assets/stylesheets/research-plan.scss
+++ b/app/assets/stylesheets/research-plan.scss
@@ -164,20 +164,33 @@
     }
 }
 
-.research-plan-attachments-annotation-download{   
-    button{ 
+.research-plan-attachments-annotation-download{
+    button{
         margin-right: 10px;
-    }     
-} 
+    }
+}
 
 .imageEditedWarning{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    white-space: nowrap;
+
     div{
-        background-color: rgba(252, 252, 138, 0.952);
-        border-color: #d0d0d0;
-        color: rgba(102, 102, 60, 0.95);
-        margin-top: 3px;
-    } 
-} 
+        background-color: #ffcc00;
+        border: 1px solid #d0d0d0;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        color: #333;
+        padding: 10px;
+        margin: 0;
+        border-radius: 4px;
+        transition: all 0.3s ease;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
 
 .research-plan-table-grid.grid-with-collapsed-rows {
     .ag-body-viewport {
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
index 59d6b990a..0c079a21f 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
@@ -1,63 +1,36 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Attachment from 'src/models/Attachment';
 
 export default class ImageAnnotationEditButton extends Component {
-  allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff']
+  allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
 
-  constructor(props) {
-    super(props);
-  }
-
-  renderActiveAnnotationButton() {
+  renderButton(isActive, tooltipText) {
     return (
       <OverlayTrigger
         placement="top"
-        overlay={<Tooltip id="annotate_tooltip">Annotate image</Tooltip>}
+        overlay={<Tooltip id="annotate_tooltip">{tooltipText}</Tooltip>}
       >
-        <Button
-          bsSize="xsmall"
-          bsStyle="warning"
-          className={
-            this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
-          }
-          onClick={() => {
-            this.props.parent.setState({
-              imageEditModalShown: true,
-              choosenAttachment: this.props.attachment,
-              imageName: this.props.attachment.filename,
-            });
-          }}
-        >
-          <i className="fa fa-pencil" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderInactiveAnnotationButton(attachment) {   
-    return (
-      <OverlayTrigger
-        overlay={
-          <Tooltip id="annotate_tooltip">
-            Please save the research plan to annotate the image
-          </Tooltip>
-        }
-      >
-        <span
-          className={
-            this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
-          }
-        >
+        <span>
           <Button
-            disabled
-            style={{ pointerEvents: "none" }}
-            bsSize="xsmall"
+            bsSize="xs"
             bsStyle="warning"
+            style={this.props.style}
+            className={this.props.className}
+            onClick={() => {
+              if (isActive) {
+                this.props.parent.setState({
+                  imageEditModalShown: true,
+                  chosenAttachment: this.props.attachment,
+                  imageName: this.props.attachment.filename,
+                });
+              }
+            }}
+            disabled={!isActive}
           >
-            <i className="fa fa-pencil" aria-hidden="true" />
+            <i className="fa fa-pencil-square-o" aria-hidden="true" />
           </Button>
         </span>
       </OverlayTrigger>
@@ -65,22 +38,31 @@ export default class ImageAnnotationEditButton extends Component {
   }
 
   render() {
-    if (!this.props.attachment||!this.props.attachment.filename) {
+    if (!this.props.attachment || !this.props.attachment.filename) {
       return null;
     }
 
     const extension = this.props.attachment.filename.split('.').pop();
-    if (!this.allowedFileTypes.includes(extension)) {
-      return null;
-    }
+    const isAllowedFileType = this.allowedFileTypes.includes(extension);
+    const isActive = isAllowedFileType && !this.props.attachment.isNew;
+
+    const tooltipText = isActive
+      ? 'Annotate image'
+      : 'Cannot annotate - invalid file type or the image is new';
 
-    return this.props.attachment.isNew
-      ? this.renderInactiveAnnotationButton()
-      : this.renderActiveAnnotationButton();
+    return this.renderButton(isActive, tooltipText);
   }
 }
+
 ImageAnnotationEditButton.propTypes = {
   attachment: PropTypes.instanceOf(Attachment),
   parent: PropTypes.object.isRequired,
-  horizontalAlignment: PropTypes.string
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+
+ImageAnnotationEditButton.defaultProps = {
+  attachment: null,
+  style: {},
+  className: ''
 };
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
index 707758239..80f193e44 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prefer-stateless-function */
 import React, { Component } from 'react';
 import { Modal, Button } from 'react-bootstrap';
@@ -16,13 +17,13 @@ export default class ImageAnnotationModalSVG extends Component {
         backdrop="static"
         bsSize="large"
         show={this.props.isShow}
-        dialogClassName="attachment-dataset-modal"
+        dialogClassName="attachment-annotation-modal"
       >
 
         <Modal.Header>
           <Modal.Title>Image annotation</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body style={{ overflow: 'hidden' }}>
           <iframe
             title="SVGEditor"
             src="/svgedit/index.html"
@@ -58,7 +59,13 @@ export default class ImageAnnotationModalSVG extends Component {
                 paletteShadowDOM.querySelectorAll('#js-se-palette > div:nth-child(n+19)')
                   .forEach((elem) => { elem.setAttribute('style', 'display: none'); });
                 paletteShadowDOM.querySelector('#js-se-palette')?.setAttribute('style', 'width: auto');
-                paletteShadowDOM.querySelector('#palette_holder')?.setAttribute('style', 'display: flex; width: auto; flex-direction: row; margin-right: 12px;');
+                const paletteHolder = paletteShadowDOM.querySelector('#palette_holder');
+                if (paletteHolder) {
+                  paletteHolder.setAttribute(
+                    'style',
+                    'display: flex; width: auto; flex-direction: row; margin-right: 12px;'
+                  );
+                }
               }
 
               // hide some panels
@@ -153,7 +160,12 @@ export default class ImageAnnotationModalSVG extends Component {
               fetch(`/api/v1/attachments/${attachment.id}/annotation`).finally(() => {
                 // make sure the iframe is visible after the fetch is done
                 // no matter if it fails or not...
-                const newStyle = this.iframe?.getAttribute('style')?.replace('visibility: hidden', 'visibility: visible');
+                const iframeStyle = this.iframe?.getAttribute('style');
+                const visibleStyle = iframeStyle?.replace(
+                  'visibility: hidden',
+                  'visibility: visible'
+                );
+                const newStyle = visibleStyle;
                 this.iframe?.setAttribute('style', newStyle);
               }).then((res) => res.text())
                 .then((text) => {
@@ -174,7 +186,10 @@ export default class ImageAnnotationModalSVG extends Component {
                         return '';
                       }
                     };
-                    const errorSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><text fill="#000000" font-size="12" stroke="#FF0000" stroke-width="0" text-anchor="middle" transform="matrix(7.15604 0 0 7.15604 -3493.72 -3162.82)" x="622.37" xml:space="preserve" y="525.48">Loading error :(</text></svg>';
+                    const errorSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="1920"'
+                    + ' height="1080"><text fill="#000000" font-size="12" stroke="#FF0000" stroke-width="0"'
+                    + ' text-anchor="middle" transform="matrix(7.15604 0 0 7.15604 -3493.72 -3162.82)"'
+                    + ' x="622.37" xml:space="preserve" y="525.48">Loading error :(</text></svg>';
                     const svgString = decodeURIComponent(safeParseJson(text)) || errorSVG;
                     svgEditor.svgCanvas.setSvgString(svgString);
                   }
@@ -185,9 +200,8 @@ export default class ImageAnnotationModalSVG extends Component {
             }}
           />
         </Modal.Body>
-        <Modal.Footer style={{ textAlign: 'left' }}>
+        <Modal.Footer style={{ textAlign: 'right' }}>
           <Button
-            bsStyle="primary"
             onClick={() => {
               this.setState({ canSave: false });
               const { handleOnClose } = this.props;
@@ -197,7 +211,7 @@ export default class ImageAnnotationModalSVG extends Component {
             Discard changes and close
           </Button>
           <Button
-            bsStyle="warning"
+            bsStyle="primary"
             disabled={!this.state.canSave}
             onClick={() => {
               this.setState({ canSave: false });
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
index 8cc590498..0b4f7ab2e 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
@@ -1,7 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Panel, ListGroup, ListGroupItem, ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem, ButtonGroup
+  Panel, ListGroup, ListGroupItem, ButtonToolbar, Button,
+  Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem, ButtonGroup
 } from 'react-bootstrap';
 import { unionBy, findIndex } from 'lodash';
 import Immutable from 'immutable';
@@ -18,10 +20,14 @@ import Utils from 'src/utilities/Functions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ConfirmClose from 'src/components/common/ConfirmClose';
 import ResearchPlan from 'src/models/ResearchPlan';
-import ResearchPlanDetailsAttachments from 'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
-import ResearchPlanDetailsBody from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
-import ResearchPlanDetailsName from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
-import ResearchPlanDetailsContainers from 'src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers';
+import ResearchPlanDetailsAttachments from
+  'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
+import ResearchPlanDetailsBody from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
+import ResearchPlanDetailsName from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
+import ResearchPlanDetailsContainers from
+  'src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers';
 import ElementDetailSortTab from 'src/apps/mydb/elements/details/ElementDetailSortTab';
 import { addSegmentTabs } from 'src/components/generic/SegmentDetails';
 import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
@@ -64,17 +70,6 @@ export default class ResearchPlanDetails extends Component {
     this.setState({ researchPlan });
   }
 
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
-  toggleFullScreen() {
-    this.props.toggleFullScreen();
-
-    // toogle update prop to notify react data grid for view change
-    this.setState({ update: !this.state.update });
-  }
-
   handleResearchPlanChange(el) {
     const researchPlan = el;
     researchPlan.changed = true;
@@ -159,22 +154,25 @@ export default class ResearchPlanDetails extends Component {
     this.setState({ researchPlan });
   }
 
-  handleBodyDelete(id, attachments) {
+  handleBodyDelete(id) {
     const { researchPlan } = this.state;
     researchPlan.removeFieldFromBody(id);
     this.setState({ researchPlan });
   }
 
   // handle attachment actions
-
   handleAttachmentDrop(files) {
-    const { researchPlan } = this.state;
-    researchPlan.changed = true;
-    files.forEach((file) => {
-      const attachment = Attachment.fromFile(file);
-      researchPlan.attachments.push(attachment);
+    this.setState((prevState) => {
+      const newAttachments = files.map((file) => Attachment.fromFile(file));
+      const updatedAttachments = prevState.researchPlan.attachments.concat(newAttachments);
+      const updatedResearchPlan = new ResearchPlan({
+        ...prevState.researchPlan,
+        attachments: updatedAttachments,
+        changed: true
+      });
+
+      return { researchPlan: updatedResearchPlan };
     });
-    this.setState({ researchPlan });
   }
 
   handleAttachmentDelete(attachment) {
@@ -217,6 +215,51 @@ export default class ResearchPlanDetails extends Component {
     ResearchPlansFetcher.exportTable(researchPlan, field);
   }
 
+  handleCopyToMetadata(id, fieldName) {
+    const { researchPlan } = this.state;
+    const researchPlanMetadata = researchPlan.research_plan_metadata;
+    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
+    const index = researchPlan.body.findIndex((field) => field.id === id);
+    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
+    if (fieldName === 'name') {
+      researchPlanMetadata.title = researchPlan.name;
+      args.title = researchPlan.name.trim();
+    } else if (fieldName === 'subject') {
+      researchPlanMetadata.subject = value;
+      args.subject = value;
+    } else {
+      const type = researchPlan.body[index]?.title?.trim() || '';
+      const newItem = this.newItemByType(fieldName, value, type);
+
+      const currentCollection = researchPlanMetadata[fieldName]
+        ? researchPlanMetadata[fieldName] : [];
+      const newCollection = currentCollection.concat(newItem);
+      researchPlanMetadata[fieldName] = newCollection;
+      args[`${fieldName}`] = researchPlanMetadata[fieldName];
+    }
+
+    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      }
+    });
+  }
+
+  handleAttachmentImportComplete() {
+    this.setState({ activeTab: 0 });
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  toggleFullScreen() {
+    this.props.toggleFullScreen();
+
+    // toogle update prop to notify react data grid for view change
+    this.setState({ update: !this.state.update });
+  }
+
   dropWellplate(wellplate) {
     const { researchPlan } = this.state;
     researchPlan.changed = true;
@@ -270,39 +313,6 @@ export default class ResearchPlanDetails extends Component {
     }
   }
 
-  handleCopyToMetadata(id, fieldName) {
-    const { researchPlan } = this.state;
-    const researchPlanMetadata = researchPlan.research_plan_metadata;
-    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
-    const index = researchPlan.body.findIndex((field) => field.id === id);
-    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
-    if (fieldName === 'name') {
-      researchPlanMetadata.title = researchPlan.name;
-      args.title = researchPlan.name.trim();
-    } else if (fieldName === 'subject') {
-      researchPlanMetadata.subject = value;
-      args.subject = value;
-    } else {
-      const type = researchPlan.body[index]?.title?.trim() || '';
-      const newItem = this.newItemByType(fieldName, value, type);
-
-      const currentCollection = researchPlanMetadata[fieldName]
-        ? researchPlanMetadata[fieldName] : [];
-      const newCollection = currentCollection.concat(newItem);
-      researchPlanMetadata[fieldName] = newCollection;
-      args[`${fieldName}`] = researchPlanMetadata[fieldName];
-    }
-
-    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      }
-    });
-  }
-
-  handleAttachmentImportComplete() {
-    this.setState({ activeTab: 0 });
-  }
   // render functions
 
   renderExportButton(disabled) {
@@ -483,11 +493,9 @@ export default class ResearchPlanDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
           <span>
             <i className="fa fa-file-text-o" />
-            &nbsp;
-            {' '}
+            &nbsp;&nbsp;
             <span>{researchPlan.name}</span>
-            {' '}
-            &nbsp;
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={researchPlan} placement="right" />
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
new file mode 100644
index 000000000..240d640ca
--- /dev/null
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+
+function SaveEditedImageWarning({ visible, warningStyle, warningMessage }) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={warningStyle}>
+      <Alert>{warningMessage}</Alert>
+    </div>
+  );
+}
+
+SaveEditedImageWarning.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  warningStyle: PropTypes.string,
+  warningMessage: PropTypes.string
+};
+
+SaveEditedImageWarning.defaultProps = {
+  warningStyle: 'imageEditedWarning',
+  warningMessage: 'Image was edited. Please save Element to apply changes.'
+};
+
+export default SaveEditedImageWarning;
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
deleted file mode 100644
index 950cd4cfc..000000000
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from "prop-types";
-import {Alert} from 'react-bootstrap';
-
-export default class SaveResearchPlanWarning extends Component {
-
-    constructor(props) {
-        super(props);
-    }
-
-
-    render(){
-        if(!this.props.visible) {return null;}        
-        
-        return (
-          <div className={this.props.warningStyle}>
-            <Alert>{this.props.warningMessage}</Alert>
-          </div>
-        );
-    }
-}
-
-SaveResearchPlanWarning.propTypes = {
-    visible: PropTypes.bool.isRequired,
-    warningStyle: PropTypes.string,
-    warningMessage: PropTypes.string
-};
-
-SaveResearchPlanWarning.defaultProps={
-    warningStyle : 'imageEditedWarning',
-    warningMessage: 'Image was edited. Please save Researchplan to apply changes.'
-
-}
\ No newline at end of file
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
index 037e0642d..4350aeb51 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
@@ -1,74 +1,32 @@
-import Dropzone from 'react-dropzone';
+/* eslint-disable no-param-reassign */
+/* eslint-disable react/destructuring-assignment */
 import EditorFetcher from 'src/fetchers/EditorFetcher';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import ImageModal from 'src/components/common/ImageModal';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
 import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
 import Utils from 'src/utilities/Functions';
-import {
-  Button, ButtonGroup,
-  Col, ControlLabel,
-  FormGroup,
-  Glyphicon,
-  ListGroup, ListGroupItem,
-  Overlay, OverlayTrigger,
-  Row,
-  Tooltip
-} from 'react-bootstrap';
-import { last, findKey, values } from 'lodash';
+import { Button } from 'react-bootstrap';
+import { last, findKey } from 'lodash';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import ImageAttachmentFilter from 'src/utilities/ImageAttachmentFilter';
-import SaveResearchPlanWarning from 'src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning';
-
-const editorTooltip = (exts) => (
-  <Tooltip id="editor_tooltip">
-    Available extensions:
-    {' '}
-    {exts}
-  </Tooltip>
-);
-const downloadTooltip = <Tooltip id="download_tooltip">Download original attachment</Tooltip>;
-const downloadAnnotationTooltip = <Tooltip id="download_tooltip">Download annotated attachment</Tooltip>;
-
-const imageStyle = { position: 'absolute', width: 60, height: 60 };
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  importButton,
+  customDropzone,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile
+} from 'src/apps/mydb/elements/list/AttachmentList';
+import { formatDate, parseDate } from 'src/utilities/timezoneHelper';
 
 export default class ResearchPlanDetailsAttachments extends Component {
-  static isImageFile(fileName) {
-    const acceptedImageTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
-    const dataType = last(fileName.split('.'));
-    return acceptedImageTypes.includes(dataType);
-  }
-
-  static renderDownloadAnnotatedImageButton(attachment) {
-    if (!ResearchPlanDetailsAttachments.isImageFile(attachment.filename)) {
-      return null;
-    }
-    return (
-      <OverlayTrigger placement="top" overlay={downloadAnnotationTooltip}>
-        <div className="research-plan-attachments-annotation-download">
-          <Button
-            bsSize="xsmall"
-            className="button-right"
-            bsStyle="primary"
-            disabled={attachment.isNew}
-            onClick={() => {
-              Utils.downloadFile({
-                contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
-                name: attachment.filename
-              });
-            }}
-          >
-            <i className="fa fa-download" aria-hidden="true" />
-          </Button>
-        </div>
-      </OverlayTrigger>
-    );
-  }
-
   constructor(props) {
     super(props);
     this.importButtonRefs = [];
@@ -78,9 +36,24 @@ export default class ResearchPlanDetailsAttachments extends Component {
       extension: null,
       imageEditModalShown: false,
       showImportConfirm: [],
+      filteredAttachments: [...props.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
     };
     this.editorInitial = this.editorInitial.bind(this);
     this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.onImport = this.onImport.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.confirmAttachmentImport = this.confirmAttachmentImport.bind(this);
+    this.showImportConfirm = this.showImportConfirm.bind(this);
+    this.hideImportConfirm = this.hideImportConfirm.bind(this);
   }
 
   componentDidMount() {
@@ -92,10 +65,10 @@ export default class ResearchPlanDetailsAttachments extends Component {
     const { attachments } = this.props;
     if (attachments !== prevProps.attachments) {
       this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...attachments] }, this.filterAndSortAttachments);
     }
   }
 
-  /* eslint-disable no-param-reassign */
   handleEdit(attachment) {
     const fileType = last(attachment.filename.split('.'));
     const docType = this.documentType(attachment.filename);
@@ -117,7 +90,6 @@ export default class ResearchPlanDetailsAttachments extends Component {
         }
       });
   }
-  /* eslint-enable no-param-reassign */
 
   onImport(attachment) {
     const { researchPlan, onAttachmentImportComplete } = this.props;
@@ -131,7 +103,71 @@ export default class ResearchPlanDetailsAttachments extends Component {
     LoadingActions.stop();
   }
 
-  /* eslint-disable no-param-reassign */
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    this.props.onDownload(attachment);
+  };
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filter = new ImageAttachmentFilter();
+    let filteredAttachments = filter.filterAttachmentsWhichAreInBody(
+      this.props.researchPlan.body,
+      this.props.attachments
+    );
+
+    filteredAttachments = filteredAttachments.filter(
+      (attachment) => attachment.filename.toLowerCase().includes(filterText.toLowerCase())
+    );
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date': {
+          const dateA = parseDate(a.created_at);
+          const dateB = parseDate(b.created_at);
+          comparison = dateA.valueOf() - dateB.valueOf();
+          break;
+        }
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
   createAttachmentPreviews() {
     const { attachments } = this.props;
     attachments.map((attachment) => {
@@ -151,7 +187,6 @@ export default class ResearchPlanDetailsAttachments extends Component {
       return attachment;
     });
   }
-  /* eslint-enable no-param-reassign */
 
   documentType(filename) {
     const { extension } = this.state;
@@ -192,34 +227,19 @@ export default class ResearchPlanDetailsAttachments extends Component {
     this.hideImportConfirm(attachment.id);
   }
 
-  renderRemoveAttachmentButton(attachment) {
-    const { onDelete, readOnly } = this.props;
-    return (
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        className="button-right"
-        onClick={() => onDelete(attachment)}
-        disabled={readOnly}
-      >
-        <i className="fa fa-trash-o" aria-hidden="true" />
-      </Button>
-    );
-  }
-
   renderImageEditModal() {
-    const { choosenAttachment, imageEditModalShown } = this.state;
+    const { chosenAttachment, imageEditModalShown } = this.state;
     const { onEdit } = this.props;
     return (
       <ImageAnnotationModalSVG
-        attachment={choosenAttachment}
+        attachment={chosenAttachment}
         isShow={imageEditModalShown}
         handleSave={
           () => {
             const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
-            choosenAttachment.updatedAnnotation = newAnnotation;
+            chosenAttachment.updatedAnnotation = newAnnotation;
             this.setState({ imageEditModalShown: false });
-            onEdit(choosenAttachment);
+            onEdit(chosenAttachment);
           }
         }
         handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
@@ -227,259 +247,124 @@ export default class ResearchPlanDetailsAttachments extends Component {
     );
   }
 
-  renderAnnotateImageButton(attachment) {
-    return (
-      <ImageAnnotationEditButton
-        parent={this}
-        attachment={attachment}
-        horizontalAlignment="button-right"
-      />
-    );
-  }
-
-  renderListGroupItem(attachment) {
-    const { attachmentEditor, extension } = this.state;
-    const { onUndoDelete } = this.props;
-
-    const updateTime = new Date(attachment.updated_at);
-    updateTime.setTime(updateTime.getTime() + 15 * 60 * 1000);
-
-    const hasPop = false;
-    const fetchNeeded = false;
-    const fetchId = attachment.id;
-    const isEditing = attachment.aasm_state === 'oo_editing'
-      && new Date().getTime() < updateTime;
-
-    const docType = this.documentType(attachment.filename);
-    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
-    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
-    const isAnnotationUpdated = attachment.updatedAnnotation;
-    if (attachment.is_deleted) {
-      return (
-        <div>
-          <Row>
-            <Col md={1} />
-            <Col md={9}>
-              <strike>{attachment.filename}</strike>
-            </Col>
-            <Col md={2}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="danger"
-                className="button-right"
-                onClick={() => onUndoDelete(attachment)}
-              >
-                <i className="fa fa-undo" aria-hidden="true" />
-              </Button>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
+  render() {
+    const {
+      filteredAttachments, sortDirection, attachmentEditor, extension
+    } = this.state;
+    const { onUndoDelete, attachments } = this.props;
 
     return (
-      <div>
-        <SaveResearchPlanWarning visible={isAnnotationUpdated} />
-        <Row>
-          <Col md={1}>
-            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
-              <div className="preview" style={{ width: '60px', height: '60px' }}>
+      <div className="attachment-main-container">
+        {this.renderImageEditModal()}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ flex: '1', alignSelf: 'center' }}>
+            {customDropzone(this.props.onDrop)}
+          </div>
+          <div style={{ marginLeft: '20px', alignSelf: 'center' }}>
+            {attachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+          </div>
+        </div>
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
                 <ImageModal
-                  imageStyle={imageStyle}
-                  hasPop={hasPop}
+                  imageStyle={{
+                    width: '45px',
+                    height: '45px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
                   previewObject={{
                     src: attachment.preview,
                   }}
                   popObject={{
                     title: attachment.filename,
                     src: attachment.preview,
-                    fetchNeeded,
-                    fetchId,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
                   }}
                 />
               </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  <div>
+                    Created:&nbsp;
+                    {formatDate(attachment.created_at)}
+                  </div>
+                  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+                  <div>
+                    Size:&nbsp;
+                    <span style={{ fontWeight: 'bold', color: '#444' }}>
+                      {formatFileSize(attachment.filesize)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => onUndoDelete(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                          < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                          || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {importButton(
+                      attachment,
+                      this.state.showImportConfirm,
+                      this.props.researchPlan.changed,
+                      this.importButtonRefs,
+                      this.showImportConfirm,
+                      this.hideImportConfirm,
+                      this.confirmAttachmentImport
+                    )}
+                    &nbsp;
+                    {removeButton(attachment, this.props.onDelete, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
             </div>
-          </Col>
-          <Col md={8}>{attachment.filename}</Col>
-          <Col md={3}>
-            {this.renderRemoveAttachmentButton(attachment)}
-            {this.renderDownloadOriginalButton(attachment)}
-            {this.renderEditAttachmentButton(
-              attachment,
-              extension,
-              attachmentEditor,
-              isEditing,
-              styleEditorBtn,
-              styleEditorBtn,
-              editDisable
-            )}
-            {ResearchPlanDetailsAttachments.renderDownloadAnnotatedImageButton(attachment)}
-            {this.renderAnnotateImageButton(attachment)}
-            {this.renderImportAttachmentButton(attachment)}
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-
-  renderEditAttachmentButton(attachment, extension, attachmentEditor, isEditing, styleEditorBtn, editDisable) {
-    return (
-      <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))}>
-        <Button
-          style={{ display: styleEditorBtn }}
-          bsSize="xsmall"
-          className="button-right"
-          bsStyle="success"
-          disabled={editDisable}
-          onClick={() => this.handleEdit(attachment)}
-        >
-
-          <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
-        </Button>
-      </OverlayTrigger>
-
-    );
-  }
-
-  renderDownloadOriginalButton(attachment) {
-    const { onDownload } = this.props;
-    return (
-      <OverlayTrigger placement="top" overlay={downloadTooltip}>
-        <Button
-          bsSize="xsmall"
-          className="button-right"
-          bsStyle="primary"
-          onClick={() => onDownload(attachment)}
-        >
-          <i className="fa fa-download" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderAttachments() {
-    const { attachments, researchPlan } = this.props;
-    if (attachments && attachments.length > 0) {
-      const filter = new ImageAttachmentFilter();
-      const filteredAttachments = filter.filterAttachmentsWhichAreInBody(
-        researchPlan.body,
-        researchPlan.attachments
-      );
-
-      return (
-        <ListGroup>
-          {filteredAttachments.map((attachment) => (
-            <ListGroupItem key={attachment.id}>
-              {this.renderListGroupItem(attachment)}
-            </ListGroupItem>
-          ))}
-        </ListGroup>
-      );
-    }
-    return (
-      <div>
-        There are currently no attachments.
-        <br />
+          ))
+        )}
       </div>
     );
   }
-
-  renderDropzone() {
-    const { onDrop, readOnly } = this.props;
-    return (
-      <Dropzone
-        onDrop={(files) => onDrop(files)}
-        className={`research-plan-dropzone-${readOnly ? 'disable' : 'enable'}`}
-      >
-        <div className="zone">Drop Files, or Click to Select.</div>
-      </Dropzone>
-    );
-  }
-
-  renderImportAttachmentButton(attachment) {
-    const { showImportConfirm } = this.state;
-    const { researchPlan } = this.props;
-    const show = showImportConfirm[attachment.id];
-    // TODO: import disabled when?
-    const importDisabled = researchPlan.changed;
-    const extension = last(attachment.filename.split('.'));
-
-    const importTooltip = importDisabled
-      ? <Tooltip id="import_tooltip">Research Plan must be saved before import</Tooltip>
-      : <Tooltip id="import_tooltip">Import spreadsheet as research plan table</Tooltip>;
-
-    const confirmTooltip = (
-      <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Spreadsheet?
-        <br />
-        <ButtonGroup>
-          <Button
-            bsStyle="success"
-            bsSize="xsmall"
-            onClick={() => this.confirmAttachmentImport(attachment)}
-          >
-            Yes
-          </Button>
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            onClick={() => this.hideImportConfirm(attachment.id)}
-          >
-            No
-          </Button>
-        </ButtonGroup>
-      </Tooltip>
-    );
-
-    if (extension === 'xlsx') {
-      return (
-        <div>
-          <OverlayTrigger placement="top" overlay={importTooltip}>
-            <div style={{ float: 'right' }}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="success"
-                className="button-right"
-                disabled={importDisabled}
-                ref={(ref) => {
-                  this.importButtonRefs[attachment.id] = ref;
-                }}
-                style={importDisabled ? { pointerEvents: 'none' } : {}}
-                onClick={() => this.showImportConfirm(attachment.id)}
-              >
-                <Glyphicon glyph="import" />
-              </Button>
-            </div>
-          </OverlayTrigger>
-          <Overlay
-            show={show}
-            placement="bottom"
-            rootClose
-            onHide={() => this.hideImportConfirm(attachment.id)}
-            target={this.importButtonRefs[attachment.id]}
-          >
-            {confirmTooltip}
-          </Overlay>
-        </div>
-      );
-    }
-    return true;
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Files</ControlLabel>
-            {this.renderImageEditModal()}
-            {this.renderAttachments()}
-            {this.renderDropzone()}
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
 }
 
 ResearchPlanDetailsAttachments.propTypes = {
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
index 0e201d414..014e5e33e 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
@@ -8,7 +8,7 @@ import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import ImageFileDropHandler from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ImageFileDropHandler';
 import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
 import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-import SaveResearchPlanWarning from 'src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 
 export default class ResearchPlanDetailsFieldImage extends Component {
@@ -104,7 +104,7 @@ export default class ResearchPlanDetailsFieldImage extends Component {
           </InputGroup>
 
         </FormGroup>
-        <SaveResearchPlanWarning visible={is_annotationUpdated} />
+        <SaveEditedImageWarning visible={is_annotationUpdated} />
         <Dropzone
           accept="image/*"
           multiple={false}
@@ -168,12 +168,12 @@ export default class ResearchPlanDetailsFieldImage extends Component {
 
     return (
       <ImageAnnotationModalSVG
-        attachment={this.state.choosenAttachment}
+        attachment={this.state.chosenAttachment}
         isShow={this.state.imageEditModalShown}
         handleSave={
           () => {
             const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
-            this.state.choosenAttachment.updatedAnnotation = newAnnotation;
+            this.state.chosenAttachment.updatedAnnotation = newAnnotation;
             this.setState({ imageEditModalShown: false });
             this.props.onChange(this.props.field.value, this.props.field.id, this.state.attachments);
           }
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js b/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
index a4964e2f4..fb8bd999e 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
@@ -1,6 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Panel, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Table, Glyphicon } from 'react-bootstrap';
+import {
+  Panel, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Table, Glyphicon
+} from 'react-bootstrap';
 import Aviator from 'aviator';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import { wellplateShowOrNew } from 'src/utilities/routesUtils';
@@ -51,8 +54,16 @@ export default class EmbeddedWellplate extends Component {
       readoutTitles && readoutTitles.map((title) => {
         const key = title.id;
         return ([
-          <th style={this.cellStyle} key={`v_${key}`} width="15%">{title} Value</th>,
-          <th style={this.cellStyle} key={`u_${key}`} width="10%">{title} Unit</th>
+          <th style={this.cellStyle} key={`v_${key}`} width="15%">
+            {title}
+            &nbsp;
+            Value
+          </th>,
+          <th style={this.cellStyle} key={`u_${key}`} width="10%">
+            {title}
+            &nbsp;
+            Unit
+          </th>
         ]);
       })
     );
@@ -61,13 +72,14 @@ export default class EmbeddedWellplate extends Component {
   renderImportWellplateButton() {
     const importDisabled = this.props.researchPlan.changed;
     const show = this.state.showImportConfirm;
-    const tooltipText = importDisabled ?
-      'Please save the research plan before importing' : 'Import Wellplate data to ResearchPlan table'
+    const tooltipText = importDisabled
+      ? 'Please save the research plan before importing' : 'Import Wellplate data to ResearchPlan table';
     const importTooltip = <Tooltip id="import_tooltip">{tooltipText}</Tooltip>;
 
     const confirmTooltip = (
       <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Wellplate? This will create a table.<br />
+        Import data from Wellplate? This will create a table.
+        <br />
         <ButtonGroup>
           <Button bsStyle="success" bsSize="xsmall" onClick={() => this.confirmWellplateImport()}>
             Yes
@@ -80,7 +92,7 @@ export default class EmbeddedWellplate extends Component {
     );
 
     return ([
-      <OverlayTrigger key="overlay_trigger_import_button" placement="bottom" overlay={importTooltip} >
+      <OverlayTrigger key="overlay_trigger_import_button" placement="bottom" overlay={importTooltip}>
         <Button
           bsSize="xsmall"
           bsStyle="success"
@@ -130,7 +142,7 @@ export default class EmbeddedWellplate extends Component {
 
     // Wellplates that were just dragged in do not have samples assigned.
     // Saving the research plan and reloading it reloads the wellplates and fetches the samples as well
-    if (wells.every(well => well.is_new)) {
+    if (wells.every((well) => well.is_new)) {
       return (<p>Please save the newly assigned wellplate to the research plan first</p>);
     }
 
@@ -173,7 +185,10 @@ export default class EmbeddedWellplate extends Component {
 
     const popover = (
       <Tooltip placement="left" className="in" id="tooltip-bottom">
-        Remove {wellplate.name} from ResearchPlan?<br />
+        Remove&nbsp;
+        {wellplate.name}
+        &nbsp;from ResearchPlan?
+        <br />
         <ButtonGroup>
           <Button bsStyle="danger" bsSize="xsmall" onClick={() => deleteWellplate(wellplate.id)}>
             Yes
@@ -190,12 +205,27 @@ export default class EmbeddedWellplate extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="WellplateDatesx">{titleTooltip}</Tooltip>}>
           <span>
             <i className="icon-wellplate" />
-            &nbsp; <span>{wellplate.short_label} {wellplate.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>
+              {wellplate.short_label}
+              &nbsp;
+              {wellplate.name}
+            </span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={wellplate} placement="right" />
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="remove_wellplate">Remove Wellplate from Screen</Tooltip>}>
-          <Button ref={(button) => { this.target = button; }} bsStyle="danger" bsSize="xsmall" className="button-right" onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="remove_wellplate">Remove Wellplate from Screen</Tooltip>}
+        >
+          <Button
+            ref={(button) => { this.target = button; }}
+            bsStyle="danger"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}
+          >
             <i className="fa fa-trash-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -213,8 +243,16 @@ export default class EmbeddedWellplate extends Component {
             <i className="fa fa-window-maximize" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="expand_wellplate">Show/hide Wellplate details</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.setState({ expanded: !this.state.expanded })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="expand_wellplate">Show/hide Wellplate details</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ expanded: !this.state.expanded })}
+          >
             <i className={expandIconClass} aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -227,7 +265,12 @@ export default class EmbeddedWellplate extends Component {
     const { wellplate } = this.props;
 
     return (
-      <Panel expanded={this.state.expanded} onToggle={() => {}} bsStyle="primary" className="eln-panel-detail wellplate-details">
+      <Panel
+        expanded={this.state.expanded}
+        onToggle={() => {}}
+        bsStyle="primary"
+        className="eln-panel-detail wellplate-details"
+      >
         {this.renderPanelHeading(wellplate)}
         <Panel.Collapse>
           <Panel.Body>
diff --git a/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
index c2e71cb19..b8d04c8dd 100644
--- a/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
@@ -1,24 +1,31 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Panel, Label, ListGroup, ListGroupItem, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Dropdown, MenuItem } from 'react-bootstrap';
+import {
+  Panel, Label, ListGroup, ListGroupItem, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Dropdown, MenuItem
+} from 'react-bootstrap';
 import Aviator from 'aviator';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import { researchPlanShowOrNew } from 'src/utilities/routesUtils';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
 import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
 import ResearchPlan from 'src/models/ResearchPlan';
-import ResearchPlanDetailsBody from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
-import ResearchPlanDetailsName from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
+import ResearchPlanDetailsBody from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
+import ResearchPlanDetailsName from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
-const InfoLabel = ({ iconClass, text, style, tooltip }) => {
-  style ||= 'info'
+function InfoLabel({
+  iconClass, text, style, tooltip
+}) {
+  style ||= 'info';
   if (!(iconClass && text)) { return null; }
-  const icon = (<i className={`fa ${iconClass}`} />)
+  const icon = (<i className={`fa ${iconClass}`} />);
   const label = (
-    <Label bsStyle={style} style={{ "margin-right": "1em" }} tooltip={tooltip}>
+    <Label bsStyle={style} style={{ 'margin-right': '1em' }} tooltip={tooltip}>
       {icon}
-      {' ' + text}
+      {` ${text}`}
     </Label>
   );
   if (tooltip) {
@@ -27,9 +34,8 @@ const InfoLabel = ({ iconClass, text, style, tooltip }) => {
         {label}
       </OverlayTrigger>
     );
-  } else {
-    return label;
   }
+  return label;
 }
 
 export default class EmbeddedResearchPlanDetails extends Component {
@@ -84,7 +90,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
   // handle body actions
   handleBodyChange(value, id) {
     const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
+    const index = researchPlan.body.findIndex((field) => field.id === id);
     researchPlan.body[index].value = value;
     researchPlan.changed = true;
     this.setState({ researchPlan });
@@ -106,7 +112,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
   handleBodyDelete(id, attachments) {
     const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
+    const index = researchPlan.body.findIndex((field) => field.id === id);
     researchPlan.body.splice(index, 1);
     researchPlan.changed = true;
     this.setState({ researchPlan });
@@ -128,6 +134,36 @@ export default class EmbeddedResearchPlanDetails extends Component {
     ResearchPlansFetcher.exportTable(researchPlan, field);
   }
 
+  handleCopyToMetadata(id, fieldName) {
+    const { researchPlan } = this.state;
+    const researchPlanMetadata = researchPlan.research_plan_metadata;
+    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
+    const index = researchPlan.body.findIndex((field) => field.id === id);
+    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
+    if (fieldName === 'name') {
+      researchPlanMetadata.title = researchPlan.name;
+      args.title = researchPlan.name.trim();
+    } else if (fieldName === 'subject') {
+      researchPlanMetadata.subject = value;
+      args.subject = value;
+    } else {
+      const type = researchPlan.body[index]?.title?.trim() || '';
+      const newItem = this.newItemByType(fieldName, value, type);
+
+      const currentCollection = researchPlanMetadata[fieldName]
+        ? researchPlanMetadata[fieldName] : [];
+      const newCollection = currentCollection.concat(newItem);
+      researchPlanMetadata[fieldName] = newCollection;
+      args[`${fieldName}`] = researchPlanMetadata[fieldName];
+    }
+
+    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      }
+    });
+  }
+
   openResearchPlan() {
     const { currentCollection, isSync } = UIStore.getState();
     const researchPlanID = this.state.researchPlan.id;
@@ -136,36 +172,13 @@ export default class EmbeddedResearchPlanDetails extends Component {
     researchPlanShowOrNew({ params: { research_planID: researchPlanID } });
   }
 
-  // render functions
-  renderExportButton(disabled) {
-    return (
-      <Dropdown
-        id="research-plan-export-dropdown"
-        className="research-plan-export-dropdown dropdown-right pull-right"
-        disabled={disabled}
-      >
-        <Dropdown.Toggle>
-          Export
-        </Dropdown.Toggle>
-        <Dropdown.Menu>
-          <MenuItem onSelect={() => this.handleExport('docx')}>
-            as .docx
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('odt')}>
-            as .odt
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('html')}>
-            as HTML
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('markdown')}>
-            as Markdown
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('latex')}>
-            as LaTeX
-          </MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
+  numberOfAnalyses(researchPlan) {
+    if (!researchPlan.container) { return; }
+    const analyses_container = researchPlan.container.children
+      .find((subcontainer) => subcontainer.container_type == 'analyses');
+    if (!analyses_container) { return; }
+    if (analyses_container.children.length == 0) { return; }
+    return analyses_container.children.length;
   }
 
   renderResearchPlanMain(researchPlan, update) { /* eslint-disable react/jsx-no-bind */
@@ -173,7 +186,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
     const edit = researchPlan.mode === 'edit';
     return (
       <ListGroup fill="true">
-        <ListGroupItem >
+        <ListGroupItem>
           {this.renderExportButton(changed)}
           <ResearchPlanDetailsName
             value={name}
@@ -199,42 +212,36 @@ export default class EmbeddedResearchPlanDetails extends Component {
     );
   } /* eslint-enable */
 
-  handleCopyToMetadata(id, fieldName) {
-    const { researchPlan } = this.state;
-    const researchPlanMetadata = researchPlan.research_plan_metadata;
-    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
-    const index = researchPlan.body.findIndex(field => field.id === id);
-    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
-    if (fieldName === 'name') {
-      researchPlanMetadata.title = researchPlan.name;
-      args.title = researchPlan.name.trim();
-    } else if (fieldName === 'subject') {
-      researchPlanMetadata.subject = value;
-      args.subject = value;
-    } else {
-      const type = researchPlan.body[index]?.title?.trim() || '';
-      const newItem = this.newItemByType(fieldName, value, type);
-
-      const currentCollection = researchPlanMetadata[fieldName] ?
-        researchPlanMetadata[fieldName] : [];
-      const newCollection = currentCollection.concat(newItem);
-      researchPlanMetadata[fieldName] = newCollection;
-      args[`${fieldName}`] = researchPlanMetadata[fieldName];
-    }
-
-    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      }
-    });
-  }
-
-  numberOfAnalyses(researchPlan) {
-    if (!researchPlan.container) { return; }
-    const analyses_container = researchPlan.container.children.find(subcontainer => subcontainer.container_type == 'analyses')
-    if (!analyses_container) { return; }
-    if (analyses_container.children.length == 0) { return; }
-    return analyses_container.children.length;
+  // render functions
+  renderExportButton(disabled) {
+    return (
+      <Dropdown
+        id="research-plan-export-dropdown"
+        className="research-plan-export-dropdown dropdown-right pull-right"
+        disabled={disabled}
+      >
+        <Dropdown.Toggle>
+          Export
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onSelect={() => this.handleExport('docx')}>
+            as .docx
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('odt')}>
+            as .odt
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('html')}>
+            as HTML
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('markdown')}>
+            as Markdown
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('latex')}>
+            as LaTeX
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
   }
 
   renderPanelHeading(researchPlan) {
@@ -244,19 +251,24 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
     const popover = (
       <Tooltip placement="left" className="in" id="tooltip-bottom">
-        Remove {researchPlan.name} from Screen?<br />
+        Remove&nbsp;
+        {researchPlan.name}
+        &nbsp;from Screen?
+        <br />
         <ButtonGroup>
           <Button
             bsStyle="danger"
             bsSize="xsmall"
             onClick={() => deleteResearchPlan(researchPlan.id)}
-          >Yes
+          >
+            Yes
           </Button>
           <Button
             bsStyle="warning"
             bsSize="xsmall"
             onClick={() => this.setState({ confirmRemove: false })}
-          >No
+          >
+            No
           </Button>
         </ButtonGroup>
       </Tooltip>
@@ -267,7 +279,9 @@ export default class EmbeddedResearchPlanDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
           <span>
             <i className="fa fa-file-text-o" />
-            &nbsp; <span>{researchPlan.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>{researchPlan.name}</span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
 
@@ -275,8 +289,17 @@ export default class EmbeddedResearchPlanDetails extends Component {
         <InfoLabel iconClass="fa-file-text-o" text={researchPlan.attachmentCount} tooltip="Attachments" />
         <ElementCollectionLabels element={researchPlan} placement="right" />
 
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="remove_esearch_plan">Remove Research Plan from Screen</Tooltip>}>
-          <Button ref={(button) => { this.target = button; }} bsStyle="danger" bsSize="xsmall" className="button-right" onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="remove_esearch_plan">Remove Research Plan from Screen</Tooltip>}
+        >
+          <Button
+            ref={(button) => { this.target = button; }}
+            bsStyle="danger"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}
+          >
             <i className="fa fa-trash-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -290,17 +313,34 @@ export default class EmbeddedResearchPlanDetails extends Component {
           {popover}
         </Overlay>
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="save_research_plan">Save Research Plan</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => saveResearchPlan(researchPlan)} style={{ display: (researchPlan.changed || false) ? '' : 'none' }}>
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => saveResearchPlan(researchPlan)}
+            style={{ display: (researchPlan.changed || false) ? '' : 'none' }}
+          >
             <i className="fa fa-floppy-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="open_research_plan">Open Research Plan in Tab</Tooltip>}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="open_research_plan">Open Research Plan in Tab</Tooltip>}
+        >
           <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.openResearchPlan()}>
             <i className="fa fa-window-maximize" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="expand_research_plan">Show/hide Research Plan details</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.setState({ expanded: !this.state.expanded })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="expand_research_plan">Show/hide Research Plan details</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ expanded: !this.state.expanded })}
+          >
             <i className={expandIconClass} aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -310,13 +350,26 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
   render() {
     const { researchPlan, update } = this.state;
-    let btnMode = <Button bsSize="xs" bsStyle="success" onClick={() => this.handleSwitchMode('edit')}>click to edit</Button>;
+    let btnMode = (
+      <Button
+        bsSize="xs"
+        bsStyle="success"
+        onClick={() => this.handleSwitchMode('edit')}
+      >
+        click to edit
+      </Button>
+    );
     if (researchPlan.mode !== 'view') {
       btnMode = <Button bsSize="xs" bsStyle="info" onClick={() => this.handleSwitchMode('view')}>click to view</Button>;
     }
 
     return (
-      <Panel expanded={this.state.expanded} onToggle={() => {}} bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail research-plan-details">
+      <Panel
+        expanded={this.state.expanded}
+        onToggle={() => {}}
+        bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'}
+        className="eln-panel-detail research-plan-details"
+      >
         {this.renderPanelHeading(researchPlan)}
         <Panel.Collapse>
           <Panel.Body>
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
index c250281e7..794fa9e7e 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import html2pdf from 'html2pdf.js/src';
 import PropTypes from 'prop-types';
@@ -5,8 +6,8 @@ import {
   Well, Panel, ListGroup, ListGroupItem, ButtonToolbar, Button,
   Tabs, Tab, Tooltip, OverlayTrigger
 } from 'react-bootstrap';
-import Immutable from 'immutable';
 import { findIndex } from 'lodash';
+import Immutable from 'immutable';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
@@ -14,8 +15,10 @@ import DetailActions from 'src/stores/alt/actions/DetailActions';
 import Wellplate from 'src/apps/mydb/elements/details/wellplates/designerTab/Wellplate';
 import WellplateList from 'src/apps/mydb/elements/details/wellplates/listTab/WellplateList';
 import WellplateProperties from 'src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateProperties';
-import WellplateDetailsContainers from 'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
-import WellplateDetailsAttachments from 'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
+import WellplateDetailsContainers from
+  'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
+import WellplateDetailsAttachments from
+  'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
 import Attachment from 'src/models/Attachment';
 import Utils from 'src/utilities/Functions';
@@ -25,15 +28,13 @@ import ConfirmClose from 'src/components/common/ConfirmClose';
 import ExportSamplesBtn from 'src/apps/mydb/elements/details/ExportSamplesBtn';
 import ElementDetailSortTab from 'src/apps/mydb/elements/details/ElementDetailSortTab';
 import { addSegmentTabs } from 'src/components/generic/SegmentDetails';
-import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement'
+import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
 import HeaderCommentSection from 'src/components/comments/HeaderCommentSection';
 import CommentSection from 'src/components/comments/CommentSection';
 import CommentActions from 'src/stores/alt/actions/CommentActions';
 import CommentModal from 'src/components/common/CommentModal';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
-const cols = 12;
-
 export default class WellplateDetails extends Component {
   constructor(props) {
     super(props);
@@ -44,7 +45,9 @@ export default class WellplateDetails extends Component {
       showWellplate: true,
       visible: Immutable.List(),
     };
+    this.handleWellplateChanged = this.handleWellplateChanged.bind(this);
     this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
     this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
   }
@@ -71,22 +74,10 @@ export default class WellplateDetails extends Component {
     UIStore.unlisten(this.onUIStoreChange);
   }
 
-  onUIStoreChange(state) {
-    if (state.wellplate.activeTab !== this.state.activeTab) {
-      this.setState({
-        activeTab: state.wellplate.activeTab
-      });
-    }
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
   handleSegmentsChange(se) {
     const { wellplate } = this.state;
     const { segments } = wellplate;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    const idx = findIndex(segments, (o) => o.segment_klass_id === se.segment_klass_id);
     if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
     wellplate.segments = segments;
     wellplate.changed = true;
@@ -108,10 +99,10 @@ export default class WellplateDetails extends Component {
     wellplate.updateChecksum();
   }
 
-  handleWellplateChanged(wellplate) {
-    this.setState({
-      wellplate
-    });
+  handleWellplateChanged(el) {
+    const wellplate = el;
+    wellplate.changed = true;
+    this.setState({ wellplate });
   }
 
   handlePrint() {
@@ -165,20 +156,23 @@ export default class WellplateDetails extends Component {
 
   handleTabChange(eventKey) {
     const showWellplate = (eventKey === 0);
-    this.setState(previousState => ({ ...previousState, activeTab: eventKey, showWellplate }));
+    this.setState((previousState) => ({ ...previousState, activeTab: eventKey, showWellplate }));
     UIActions.selectTab({ tabKey: eventKey, type: 'wellplate' });
   }
 
   // handle attachment actions
-
   handleAttachmentDrop(files) {
-    const { wellplate } = this.state;
-    wellplate.changed = true;
-    files.forEach((file) => {
-      const attachment = Attachment.fromFile(file);
-      wellplate.attachments.push(attachment);
+    this.setState((prevState) => {
+      const newAttachments = files.map((file) => Attachment.fromFile(file));
+      prevState.wellplate.attachments = [
+        ...prevState.wellplate.attachments || [],
+        ...newAttachments
+      ];
+
+      prevState.wellplate.changed = true;
+
+      return { wellplate: prevState.wellplate };
     });
-    this.setState({ wellplate });
   }
 
   handleAttachmentDelete(attachment) {
@@ -211,15 +205,30 @@ export default class WellplateDetails extends Component {
 
   handleAttachmentEdit(attachment) {
     const { wellplate } = this.state;
-
+    wellplate.changed = true;
     // update only this attachment
     wellplate.attachments.map((currentAttachment) => {
-      if (currentAttachment.id === attachment.id) return attachment;
+      if (currentAttachment.id === attachment.id) {
+        return attachment;
+      }
+      return currentAttachment;
     });
     this.setState({ wellplate });
     this.forceUpdate();
   }
 
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  onUIStoreChange(state) {
+    if (state.wellplate.activeTab !== this.state.activeTab) {
+      this.setState({
+        activeTab: state.wellplate.activeTab
+      });
+    }
+  }
+
   wellplateHeader(wellplate) {
     const saveBtnDisplay = wellplate.isEdited ? '' : 'none';
     const datetp = formatTimeStampsOfElement(wellplate || {});
@@ -230,14 +239,22 @@ export default class WellplateDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
           <span>
             <i className="icon-wellplate" />
-            &nbsp; <span>{wellplate.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>{wellplate.name}</span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={wellplate} placement="right" />
         <HeaderCommentSection element={wellplate} />
         <ConfirmClose el={wellplate} />
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: saveBtnDisplay }}>
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit()}
+            style={{ display: saveBtnDisplay }}
+          >
             <i className="fa fa-floppy-o " />
           </Button>
         </OverlayTrigger>
@@ -252,13 +269,12 @@ export default class WellplateDetails extends Component {
   }
 
   renderAttachmentsTab(wellplate) { /* eslint-disable react/jsx-no-bind */
-    const { attachments } = wellplate;
     return (
       <ListGroup fill="true">
-        <ListGroupItem >
+        <ListGroupItem>
           <WellplateDetailsAttachments
-            attachments={attachments}
-            wellplateChanged={wellplate.isEdited}
+            wellplate={wellplate}
+            attachments={wellplate.attachments}
             onDrop={this.handleAttachmentDrop.bind(this)}
             onDelete={this.handleAttachmentDelete.bind(this)}
             onUndoDelete={this.handleAttachmentUndoDelete.bind(this)}
@@ -272,7 +288,6 @@ export default class WellplateDetails extends Component {
     );
   } /* eslint-enable */
 
-
   render() {
     const {
       wellplate, showWellplate, visible
@@ -281,8 +296,8 @@ export default class WellplateDetails extends Component {
       wells, name, size, description
     } = wellplate;
     const readoutTitles = wellplate.readout_titles;
-    const submitLabel = wellplate.isNew ? 'Create' : 'Save';
-    const exportButton = (wellplate && wellplate.isNew) ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
+    const exportButton = (wellplate && wellplate.isNew)
+      ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
     const properties = {
       name, size, description, readoutTitles
     };
@@ -299,8 +314,8 @@ export default class WellplateDetails extends Component {
               size={size}
               readoutTitles={readoutTitles}
               wells={wells}
-              handleWellsChange={w => this.handleWellsChange(w)}
-              cols={cols}
+              handleWellsChange={(w) => this.handleWellsChange(w)}
+              cols={12}
               width={60}
             />
           </Well>
@@ -311,11 +326,11 @@ export default class WellplateDetails extends Component {
           {
             !wellplate.isNew && <CommentSection section="wellplate_list" element={wellplate} />
           }
-          <Well style={{ overflow: 'scroll', height: '100%', 'max-height': 'calc(100vh - 375px)' }}>
+          <Well style={{ overflow: 'scroll', height: '100%', maxHeight: 'calc(100vh - 375px)' }}>
             <WellplateList
               wells={wells}
               readoutTitles={readoutTitles}
-              handleWellsChange={w => this.handleWellsChange(w)}
+              handleWellsChange={(w) => this.handleWellsChange(w)}
             />
           </Well>
         </Tab>
@@ -327,11 +342,13 @@ export default class WellplateDetails extends Component {
           }
           <WellplateProperties
             {...properties}
-            changeProperties={c => this.handleChangeProperties(c)}
-            handleAddReadout={c => this.handleAddReadout(c)}
-            handleRemoveReadout={c => this.handleRemoveReadout(c)}
+            changeProperties={(c) => this.handleChangeProperties(c)}
+            handleAddReadout={(c) => this.handleAddReadout(c)}
+            handleRemoveReadout={(c) => this.handleRemoveReadout(c)}
           />
-          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} /> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
+          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} />
+          {' '}
+          {/* For samples and reactions (<element>): disabled={!<element>.can_update} */}
         </Tab>
       ),
       analyses: (
@@ -364,6 +381,7 @@ export default class WellplateDetails extends Component {
       if (tabContent) { tabContents.push(tabContent); }
     });
 
+    // eslint-disable-next-line react/destructuring-assignment
     const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
 
     return (
@@ -376,16 +394,18 @@ export default class WellplateDetails extends Component {
             tabTitles={tabTitlesMap}
             onTabPositionChanged={this.onTabPositionChanged}
           />
-          <Tabs activeKey={activeTab} onSelect={event => this.handleTabChange(event)} id="wellplateDetailsTab">
+          <Tabs activeKey={activeTab} onSelect={(event) => this.handleTabChange(event)} id="wellplateDetailsTab">
             {tabContents}
           </Tabs>
           <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>
-              Close
-            </Button>
-            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
-              {submitLabel}
-            </Button>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>Close</Button>
+            {
+              wellplate.changed ? (
+                <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
+                  {wellplate.isNew ? 'Create' : 'Save'}
+                </Button>
+              ) : <div />
+            }
             {exportButton}
             <Button bsStyle="primary" onClick={() => this.handlePrint()}>
               Print Wells
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
index fa344b177..1d493aaa1 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
@@ -1,25 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import { FormGroup, Button, ButtonGroup, Row, Col, Tooltip, ControlLabel, ListGroup, ListGroupItem, OverlayTrigger, Glyphicon, Popover, Overlay } from 'react-bootstrap';
-import { last, findKey, values } from 'lodash';
 import EditorFetcher from 'src/fetchers/EditorFetcher';
 import ImageModal from 'src/components/common/ImageModal';
-import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
-import { previewAttachmentImage } from 'src/utilities/imageHelper';
+import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
 import Utils from 'src/utilities/Functions';
+import {
+  Button, ButtonGroup, OverlayTrigger, Popover
+} from 'react-bootstrap';
+import { last, findKey } from 'lodash';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  importButton,
+  customDropzone,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile
+} from 'src/apps/mydb/elements/list/AttachmentList';
+import { formatDate, parseDate } from 'src/utilities/timezoneHelper';
 
-const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
-const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
-const imageStyle = { position: 'absolute', width: 60, height: 60 };
 const templateInfo = (
   <Popover id="popver-template-info" title="Template info">
-    This template should be used to import well readouts.<br />
-    The <strong>red</strong> column may not be altered at all.<br />
-    The contents of the <strong>yellow</strong> columns may be altered, the headers may not.<br />
-    The <strong>green</strong> columns must contain at least one <i>_Value</i> and <i>_Unit</i> pair
-    with a matching prefix before the underscore.
-    They may contain an arbitrary amount of readout pairs.
+    This template should be used to import well readouts. The&nbsp;
+    <strong>red</strong>
+    &nbsp;column may not be altered at all. The contents of the&nbsp;
+    <strong>yellow</strong>
+    &nbsp;columns may be altered, the headers may not. The&nbsp;
+    <strong>green</strong>
+    &nbsp;columns must contain at least one&nbsp;
+    <i>_Value</i>
+    &nbsp;and&nbsp;
+    <i>_Unit</i>
+    &nbsp;pair with a matching prefix before the underscore. They may contain an arbitrary amount of readout pairs.
   </Popover>
 );
 
@@ -28,51 +45,48 @@ export default class WellplateDetailsAttachments extends Component {
     super(props);
     this.importButtonRefs = [];
     const {
-      attachments, wellplateChanged, onDrop, onDelete, onUndoDelete, onDownload, onImport, onEdit
+      onImport
     } = props;
+
     this.state = {
-      onDrop,
-      onDelete,
-      onUndoDelete,
-      onDownload,
       onImport,
-      onEdit,
       attachmentEditor: false,
       extension: null,
+      imageEditModalShown: false,
       showImportConfirm: [],
+      filteredAttachments: [...props.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
     };
     this.editorInitial = this.editorInitial.bind(this);
+    this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.confirmAttachmentImport = this.confirmAttachmentImport.bind(this);
+    this.showImportConfirm = this.showImportConfirm.bind(this);
+    this.hideImportConfirm = this.hideImportConfirm.bind(this);
   }
 
   componentDidMount() {
     this.editorInitial();
+    this.createAttachmentPreviews();
   }
 
-  editorInitial() {
-    EditorFetcher.initial()
-      .then((result) => {
-        this.setState({
-          attachmentEditor: result.installed,
-          extension: result.ext
-        });
-      });
-  }
-
-  documentType(filename) {
-    const { extension } = this.state;
-
-    const ext = last(filename.split('.'));
-    const docType = findKey(extension, o => o.includes(ext));
-
-    if (typeof (docType) === 'undefined' || !docType) {
-      return null;
+  componentDidUpdate(prevProps) {
+    const { attachments } = this.props;
+    if (attachments !== prevProps.attachments) {
+      this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...attachments] }, this.filterAndSortAttachments);
     }
-
-    return docType;
   }
 
   handleEdit(attachment) {
-    const { onEdit } = this.state;
     const fileType = last(attachment.filename.split('.'));
     const docType = this.documentType(attachment.filename);
 
@@ -85,7 +99,7 @@ export default class WellplateDetailsAttachments extends Component {
           attachment.aasm_state = 'oo_editing';
           attachment.updated_at = new Date();
 
-          onEdit(attachment);
+          this.props.onEdit(attachment);
         } else {
           alert('Unauthorized to edit this file.');
         }
@@ -96,6 +110,107 @@ export default class WellplateDetailsAttachments extends Component {
     Utils.downloadFile({ contents: '/xlsx/wellplate_import_template.xlsx', name: 'wellplate_import_template.xlsx' });
   }
 
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    this.props.onDownload(attachment);
+  };
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filteredAttachments = this.props.attachments.filter((
+      attachment
+    ) => attachment.filename.toLowerCase().includes(filterText.toLowerCase()));
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date': {
+          const dateA = parseDate(a.created_at);
+          const dateB = parseDate(b.created_at);
+          comparison = dateA.valueOf() - dateB.valueOf();
+          break;
+        }
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
+  createAttachmentPreviews() {
+    const { attachments } = this.props;
+    attachments.map((attachment) => {
+      if (attachment.thumb) {
+        AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
+          (result) => {
+            if (result != null) {
+              attachment.preview = `data:image/png;base64,${result}`;
+              this.forceUpdate();
+            }
+          }
+        );
+      } else {
+        attachment.preview = '/images/wild_card/not_available.svg';
+        this.forceUpdate();
+      }
+      return attachment;
+    });
+  }
+
+  documentType(filename) {
+    const { extension } = this.state;
+
+    const ext = last(filename.split('.'));
+    const docType = findKey(extension, (o) => o.includes(ext));
+
+    if (typeof docType === 'undefined' || !docType) {
+      return null;
+    }
+
+    return docType;
+  }
+
+  editorInitial() {
+    EditorFetcher.initial().then((result) => {
+      this.setState({
+        attachmentEditor: result.installed,
+        extension: result.ext,
+      });
+    });
+  }
+
   showImportConfirm(attachmentId) {
     const { showImportConfirm } = this.state;
     showImportConfirm[attachmentId] = true;
@@ -114,266 +229,227 @@ export default class WellplateDetailsAttachments extends Component {
     this.hideImportConfirm(attachment.id);
   }
 
-  renderImportAttachmentButton(attachment) {
-    const show = this.state.showImportConfirm[attachment.id];
-    const importDisabled = this.props.wellplateChanged;
-    const extension = last(attachment.filename.split('.'));
-
-    const importTooltip = importDisabled ?
-      <Tooltip id="import_tooltip">Wellplate must be saved before import</Tooltip> :
-      <Tooltip id="import_tooltip">Import attachment as Wellplate data</Tooltip>;
+  renderImageEditModal() {
+    const { chosenAttachment, imageEditModalShown } = this.state;
+    const { onEdit } = this.props;
+    return (
+      <ImageAnnotationModalSVG
+        attachment={chosenAttachment}
+        isShow={imageEditModalShown}
+        handleSave={
+          () => {
+            const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
+            chosenAttachment.updatedAnnotation = newAnnotation;
+            this.setState({ imageEditModalShown: false });
+            onEdit(chosenAttachment);
+          }
+        }
+        handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
+      />
+    );
+  }
 
-    const confirmTooltip = (
-      <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Spreadsheet? This will overwrite existing Wellplate data.<br />
-        <ButtonGroup>
-          <Button
-            bsStyle="danger"
-            bsSize="xsmall"
-            onClick={() => this.confirmAttachmentImport(attachment)}
-          >
-            Yes
-          </Button>
+  renderTemplateDownload() {
+    return (
+      <div>
+        <ButtonGroup style={{ marginBottom: '10px' }}>
           <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            onClick={() => this.hideImportConfirm(attachment.id)}
+            bsStyle="primary"
+            onClick={() => this.handleTemplateDownload()}
           >
-            No
+            <i className="fa fa-download" aria-hidden="true" />
+            &nbsp;
+            Download Import Template xlsx
           </Button>
-        </ButtonGroup>
-      </Tooltip>
-    );
-
-    if (extension === 'xlsx') {
-      return (
-        <div>
-          <OverlayTrigger placement="top" overlay={importTooltip} >
-            <div style={{ float: 'right' }}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="success"
-                className="button-right"
-                disabled={importDisabled}
-                ref={(ref) => { this.importButtonRefs[attachment.id] = ref; }}
-                style={importDisabled ? { pointerEvents: 'none' } : {}}
-                onClick={() => this.showImportConfirm(attachment.id)}
-              >
-                <Glyphicon glyph="import" />
-              </Button>
-            </div>
+          <OverlayTrigger placement="bottom" overlay={templateInfo}>
+            <Button
+              bsStyle="info"
+            >
+              <i className="fa fa-info" aria-hidden="true" />
+            </Button>
           </OverlayTrigger>
-          <Overlay
-            show={show}
-            placement="bottom"
-            rootClose
-            onHide={() => this.hideImportConfirm(attachment.id)}
-            target={this.importButtonRefs[attachment.id]}
-          >
-            {confirmTooltip}
-          </Overlay>
-
-        </div>
-      );
-    }
-    return true;
-  }
-
-  renderRemoveAttachmentButton(attachment) {
-    const { onDelete } = this.state;
-
-    return (
-      <Button bsSize="xsmall" bsStyle="danger" className="button-right" onClick={() => onDelete(attachment)} disabled={this.props.readOnly}>
-        <i className="fa fa-trash-o" aria-hidden="true" />
-      </Button>
+        </ButtonGroup>
+      </div>
     );
   }
 
-  renderListGroupItem(attachment) {
+  render() {
     const {
-      attachmentEditor, extension, onUndoDelete, onDownload
+      filteredAttachments, sortDirection, attachmentEditor, extension
     } = this.state;
-
-    const updateTime = new Date(attachment.updated_at);
-    updateTime.setTime(updateTime.getTime() + (15 * 60 * 1000));
-
-    const hasPop = false;
-    const fetchNeeded = false;
-    const fetchId = attachment.id;
-
-    const previewImg = previewAttachmentImage(attachment);
-    const isEditing = attachment.aasm_state === 'oo_editing' && new Date().getTime() < updateTime;
-
-    const docType = this.documentType(attachment.filename);
-    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
-    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
-
-    if (attachment.is_deleted) {
-      return (
-        <div>
-          <Row>
-            <Col md={1} />
-            <Col md={9}>
-              <strike>{attachment.filename}</strike>
-            </Col>
-            <Col md={2}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="danger"
-                className="button-right"
-                onClick={() => onUndoDelete(attachment)}
-              >
-                <i className="fa fa-undo" aria-hidden="true" />
-              </Button>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
+    const { onUndoDelete, attachments } = this.props;
 
     return (
-      <div>
-        <Row>
-          <Col md={1}>
-            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
-              <div className="preview" style={{ width: '60px', height: '60px' }} >
+      <div className="attachment-main-container">
+        {this.renderTemplateDownload()}
+        {this.renderImageEditModal()}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ flex: '1', alignSelf: 'center' }}>
+            {customDropzone(this.props.onDrop)}
+          </div>
+          <div style={{ marginLeft: '20px', alignSelf: 'center' }}>
+            {attachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+          </div>
+        </div>
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
                 <ImageModal
-                  imageStyle={imageStyle}
-                  hasPop={hasPop}
+                  imageStyle={{
+                    width: '45px',
+                    height: '45px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
                   previewObject={{
-                    src: previewImg
+                    src: attachment.preview,
                   }}
                   popObject={{
                     title: attachment.filename,
-                    src: previewImg,
-                    fetchNeeded,
-                    fetchId
+                    src: attachment.preview,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
                   }}
                 />
               </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  <div>
+                    Created:&nbsp;
+                    {formatDate(attachment.created_at)}
+                  </div>
+                  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+                  <div>
+                    Size:&nbsp;
+                    <span style={{ fontWeight: 'bold', color: '#444' }}>
+                      {formatFileSize(attachment.filesize)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => onUndoDelete(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                          < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                          || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {importButton(
+                      attachment,
+                      this.state.showImportConfirm,
+                      this.props.wellplate.changed,
+                      this.importButtonRefs,
+                      this.showImportConfirm,
+                      this.hideImportConfirm,
+                      this.confirmAttachmentImport
+                    )}
+                    &nbsp;
+                    {removeButton(attachment, this.props.onDelete, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
             </div>
-          </Col>
-          <Col md={9}>
-            {attachment.filename}
-          </Col>
-          <Col md={2}>
-            {this.renderRemoveAttachmentButton(attachment)}
-            <OverlayTrigger placement="top" overlay={downloadTooltip} >
-              <Button
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="primary"
-                onClick={() => onDownload(attachment)}
-              >
-                <i className="fa fa-download" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-            <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))} >
-              <Button
-                style={{ display: styleEditorBtn }}
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="success"
-                disabled={editDisable}
-                onClick={() => this.handleEdit(attachment)}
-              >
-                <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
-              </Button>
-            </OverlayTrigger>
-            {this.renderImportAttachmentButton(attachment)}
-          </Col>
-        </Row>
+          ))
+        )}
       </div>
     );
   }
-
-  renderAttachments() {
-    const { attachments } = this.props;
-    if (attachments && attachments.length > 0) {
-      return (
-        <div>
-          {this.renderTemplateDownload()}
-          <ListGroup>
-            {attachments.map(attachment => (
-              <ListGroupItem key={attachment.id}>
-                {this.renderListGroupItem(attachment)}
-              </ListGroupItem>
-            ))}
-          </ListGroup>
-        </div>
-      );
-    }
-    return (
-      <div>
-        {this.renderTemplateDownload()}
-        <div>
-          There are currently no Datasets.<br />
-        </div>
-      </div>
-    );
-  }
-
-  renderTemplateDownload() {
-    return (
-      <div style={{ marginBottom: '5px' }}>
-        <Button
-          bsStyle="primary"
-          onClick={() => this.handleTemplateDownload()}
-        >
-          <i className="fa fa-download" aria-hidden="true" /> Download Wellplate import template xlsx
-        </Button>
-        <OverlayTrigger placement="bottom" overlay={templateInfo}>
-          <Button
-            bsStyle="info"
-          >
-            <i className="fa fa-info" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-
-  renderDropzone() {
-    const { onDrop } = this.state;
-
-    return (
-      <div className={`research-plan-dropzone-${this.props.readOnly ? 'disable' : 'enable'}`}>
-        <Dropzone
-          onDrop={files => onDrop(files)}
-          className="zone"
-        >
-          Drop Files, or Click to Select.
-        </Dropzone>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Files</ControlLabel>
-            {this.renderAttachments()}
-            {this.renderDropzone()}
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
 }
 
 WellplateDetailsAttachments.propTypes = {
-  attachments: PropTypes.arrayOf(PropTypes.object).isRequired,
-  wellplateChanged: PropTypes.bool.isRequired,
+  wellplate: PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    changed: PropTypes.bool.isRequired,
+    body: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+      })
+    ).isRequired,
+    attachments: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
+        aasm_state: PropTypes.string.isRequired,
+        content_type: PropTypes.string.isRequired,
+        filename: PropTypes.string.isRequired,
+        filesize: PropTypes.number.isRequired,
+        identifier: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
+        thumb: PropTypes.bool.isRequired
+      })
+    )
+  }).isRequired,
+  attachments: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    aasm_state: PropTypes.string.isRequired,
+    content_type: PropTypes.string.isRequired,
+    filename: PropTypes.string.isRequired,
+    filesize: PropTypes.number.isRequired,
+    identifier: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    thumb: PropTypes.bool.isRequired
+  })),
   onDrop: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUndoDelete: PropTypes.func.isRequired,
   onDownload: PropTypes.func.isRequired,
-  onImport: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool.isRequired
+  readOnly: PropTypes.bool.isRequired,
+  onImport: PropTypes.func.isRequired,
 };
 
 WellplateDetailsAttachments.defaultProps = {
+  attachments: [],
 };
diff --git a/app/packs/src/apps/mydb/elements/list/AttachmentList.js b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
new file mode 100644
index 000000000..797ebd378
--- /dev/null
+++ b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
@@ -0,0 +1,242 @@
+import React from 'react';
+import {
+  Button, OverlayTrigger, Tooltip, Dropdown, MenuItem, Glyphicon, Overlay, ButtonGroup
+} from 'react-bootstrap';
+import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
+import { values } from 'lodash';
+import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
+import Dropzone from 'react-dropzone';
+
+export const isImageFile = (fileName) => {
+  const acceptedImageTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
+  const dataType = fileName.split('.').pop().toLowerCase();
+  return acceptedImageTypes.includes(dataType);
+};
+
+export const formatFileSize = (sizeInB) => {
+  if (sizeInB >= 1024 * 1024) {
+    return `${(sizeInB / (1024 * 1024)).toFixed(2)} MB`;
+  } if (sizeInB >= 1024) {
+    return `${(sizeInB / 1024).toFixed(1)} kB`;
+  }
+  return `${sizeInB} bytes`;
+};
+
+export const downloadButton = (attachment, handleDownloadOriginal, handleDownloadAnnotated) => (
+  <Dropdown id={`dropdown-download-${attachment.id}`}>
+    <Dropdown.Toggle style={{ height: '30px' }} bsSize="xs" bsStyle="primary">
+      <i className="fa fa-download" aria-hidden="true" />
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <MenuItem eventKey="1" onClick={() => handleDownloadOriginal(attachment)}>
+        Download Original
+      </MenuItem>
+      <MenuItem
+        eventKey="2"
+        onClick={() => handleDownloadAnnotated(attachment)}
+        disabled={!isImageFile(attachment.filename) || attachment.isNew}
+      >
+        Download Annotated
+      </MenuItem>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+export const removeButton = (attachment, onDelete, readOnly) => (
+  <OverlayTrigger placement="top" overlay={<Tooltip id="delete_tooltip">Delete attachment</Tooltip>}>
+    <Button
+      bsSize="xs"
+      bsStyle="danger"
+      className="attachment-button-size"
+      onClick={() => onDelete(attachment)}
+      disabled={readOnly}
+    >
+      <i className="fa fa-trash-o" aria-hidden="true" />
+    </Button>
+  </OverlayTrigger>
+);
+
+export const moveBackButton = (attachment, onBack, readOnly) => (
+  <OverlayTrigger placement="top" overlay={<Tooltip id="back_tooltip">Move attachment back to inbox</Tooltip>}>
+    <Button
+      bsSize="xs"
+      bsStyle="danger"
+      className="attachment-button-size"
+      onClick={() => onBack(attachment)}
+      disabled={readOnly}
+    >
+      <i className="fa fa-backward" aria-hidden="true" />
+    </Button>
+  </OverlayTrigger>
+
+);
+
+export const annotateButton = (attachment, parent) => (
+  <ImageAnnotationEditButton
+    parent={parent}
+    attachment={attachment}
+    className={`attachment-button-size ${!isImageFile(attachment.filename) ? 'attachment-gray-button' : ''}`}
+    disabled={!isImageFile(attachment.filename)}
+  />
+);
+
+export const editButton = (
+  attachment,
+  extension,
+  attachmentEditor,
+  isEditing,
+  editDisable,
+  handleEdit
+) => {
+  const editorTooltip = (exts) => (
+    <Tooltip id="editor_tooltip">
+      {editDisable ? (
+        <span>
+          Editing is only available for these files:&nbsp;
+          <strong>{exts}</strong>
+          .
+          <br />
+          Or you are not authorized to edit this file.
+        </span>
+      ) : (
+        <span>Edit attachment</span>
+      )}
+    </Tooltip>
+  );
+  return (
+    <OverlayTrigger placement="top" overlay={editorTooltip(values(extension).join(','))}>
+      <Button
+        className={`attachment-button-size ${editDisable ? 'attachment-gray-button' : ''}`}
+        bsSize="xs"
+        bsStyle="success"
+        disabled={editDisable}
+        onClick={() => handleEdit(attachment)}
+      >
+        <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+export const importButton = (
+  attachment,
+  showImportConfirm,
+  importDisabled,
+  importButtonRefs,
+  showImportConfirmFunction,
+  hideImportConfirmFunction,
+  confirmAttachmentImportFunction
+) => {
+  const show = showImportConfirm[attachment.id];
+  const extension = attachment.filename.split('.').pop();
+
+  const importTooltip = importDisabled || extension !== 'xlsx'
+    ? <Tooltip id="import_tooltip">Invalid type for import or element must be saved before import</Tooltip>
+    : <Tooltip id="import_tooltip">Import as element data</Tooltip>;
+
+  const confirmTooltip = (
+    <Tooltip placement="bottom" className="in" id="tooltip-bottom">
+      Import data from Spreadsheet? This will overwrite existing data.
+      <br />
+      <ButtonGroup>
+        <Button
+          bsStyle="success"
+          bsSize="xs"
+          onClick={() => confirmAttachmentImportFunction(attachment)}
+        >
+          Yes
+        </Button>
+        <Button
+          bsStyle="warning"
+          bsSize="xs"
+          onClick={() => hideImportConfirmFunction(attachment.id)}
+        >
+          No
+        </Button>
+      </ButtonGroup>
+    </Tooltip>
+  );
+
+  return (
+    <div>
+      <OverlayTrigger placement="top" overlay={importTooltip}>
+        <div style={{ float: 'right' }}>
+          <Button
+            bsSize="xs"
+            bsStyle="success"
+            disabled={importDisabled || extension !== 'xlsx'}
+            // eslint-disable-next-line no-param-reassign
+            ref={(ref) => { importButtonRefs[attachment.id] = ref; }}
+            className={`attachment-button-size ${importDisabled
+              || extension !== 'xlsx' ? 'attachment-gray-button' : ''}`}
+            onClick={() => showImportConfirmFunction(attachment.id)}
+          >
+            <Glyphicon glyph="import" />
+          </Button>
+        </div>
+      </OverlayTrigger>
+      <Overlay
+        show={show}
+        placement="bottom"
+        rootClose
+        onHide={() => hideImportConfirmFunction(attachment.id)}
+        target={importButtonRefs[attachment.id]}
+      >
+        {confirmTooltip}
+      </Overlay>
+    </div>
+  );
+};
+
+export const customDropzone = (onDrop) => (
+  <Dropzone onDrop={onDrop} className="attachment-dropzone">
+    Drop files here, or click to upload.
+  </Dropzone>
+);
+
+export const sortingAndFilteringUI = (
+  sortDirection,
+  handleSortChange,
+  toggleSortDirection,
+  handleFilterChange
+) => (
+  <div style={{
+    marginBottom: '20px', display: 'flex', justifyContent: 'space-between',
+  }}
+  >
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label style={{ marginRight: '10px' }}>Sort: </label>
+      <div className="sort-container" style={{ display: 'flex', alignItems: 'center' }}>
+        <select
+          onChange={handleSortChange}
+          className="sorting-row-style"
+          style={{ width: '100px', marginRight: '10px' }}
+        >
+          <option value="name">Name</option>
+          <option value="size">Size</option>
+          <option value="date">Date</option>
+        </select>
+        <Button
+          style={{ marginRight: '10px', marginLeft: '-15px' }}
+          onClick={toggleSortDirection}
+          className="sort-icon-style"
+        >
+          {sortDirection === 'asc' ? '▲' : '▼'}
+        </Button>
+      </div>
+    </div>
+
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label style={{ marginRight: '10px' }}>Filter: </label>
+      <input
+        type="text"
+        placeholder="Filter by name..."
+        onChange={handleFilterChange}
+        className="sorting-row-style"
+        style={{ width: '250px' }}
+      />
+    </div>
+  </div>
+);
diff --git a/app/packs/src/components/common/HyperLinksSection.js b/app/packs/src/components/common/HyperLinksSection.js
index e3377cb73..f5a710e2d 100644
--- a/app/packs/src/components/common/HyperLinksSection.js
+++ b/app/packs/src/components/common/HyperLinksSection.js
@@ -1,7 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, FormControl, Table, ListGroup, ListGroupItem, Button } from 'react-bootstrap';
-
+import {
+  FormGroup, FormControl, ListGroup, ListGroupItem, Button
+} from 'react-bootstrap';
 
 export default class HyperLinksSection extends Component {
   constructor(props) {
@@ -18,13 +20,41 @@ export default class HyperLinksSection extends Component {
   handleLinkInputChange(event) {
     const { value } = event.target;
 
-    this.setState({ link: value })
+    this.setState({ link: value });
   }
 
   handleAddLink() {
     const { link } = this.state;
     this.props.onAddLink(link);
-    this.setState({ link: null })
+    this.setState({ link: null });
+  }
+
+  handleRemoveLink(link) {
+    this.props.onRemoveLink(link);
+  }
+
+  removeLinkButton(link) {
+    const { readOnly, disabled } = this.props;
+    if (!readOnly && !disabled) {
+      return (
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleRemoveLink(link)}>
+          <i className="fa fa-trash-o" />
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  listLinkItem(link) {
+    return (
+      <div style={{
+        display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '10px'
+      }}
+      >
+        <a href={link} style={{ cursor: 'pointer' }} target="_blank" rel="noreferrer">{link}</a>
+        {this.removeLinkButton(link)}
+      </div>
+    );
   }
 
   renderHyperLinkInput() {
@@ -32,15 +62,15 @@ export default class HyperLinksSection extends Component {
     const { disabled } = this.props;
 
     if (disabled) {
-      return <div></div>;
+      return <div />;
     }
 
     return (
-      <FormGroup controlId='hyperlink' className="form-inline" >
+      <FormGroup controlId="hyperlink" className="form-inline">
         <FormControl
           type="text"
           value={link || ''}
-          onChange={event => this.handleLinkInputChange(event)}
+          onChange={(event) => this.handleLinkInputChange(event)}
           bsClass="form-control"
           bsSize="small"
           style={{ width: '90%' }}
@@ -61,7 +91,7 @@ export default class HyperLinksSection extends Component {
 
   renderHyperLinkList() {
     const { data } = this.props;
-    let hyperLinks = data
+    let hyperLinks = data;
     if (typeof hyperLinks === 'string' || hyperLinks instanceof String) {
       hyperLinks = JSON.parse(hyperLinks);
     }
@@ -71,59 +101,24 @@ export default class HyperLinksSection extends Component {
         <div className="list">
           <ListGroup>
             {
-              hyperLinks.map((link) => {
-                return (
-                  <ListGroupItem style={{ margin: 'unset', padding: 'unset' }}>
-                    {this.listLinkItem(link)}
-                  </ListGroupItem>
-                );
-              })
+              hyperLinks.map((link) => (
+                <ListGroupItem key={link} style={{ margin: 'unset', padding: 'unset' }}>
+                  {this.listLinkItem(link)}
+                </ListGroupItem>
+              ))
             }
           </ListGroup>
         </div>
       );
     }
-    return (
-      <div style={{ padding: 15 }}>
-        There are currently no Datasets.<br />
-      </div>
-    );
-  }
-
-  handleRemoveLink(link) {
-    this.props.onRemoveLink(link);
-  }
-
-  removeLinkButton(link) {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleRemoveLink(link)}>
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
-    }
-  }
-
-  listLinkItem(link) {
-    return (
-      <Table className="borderless" style={{ marginBottom: 'unset' }}>
-        <tbody>
-          <tr>
-            <td style={{ verticalAlign: 'middle' }}>
-              <a href={link} style={{ cursor: 'pointer' }} target="_blank">{link}</a><br />
-              {this.removeLinkButton(link)}
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
+    return null;
   }
 
   render() {
     return (
       <div>
-        <label>Hyperlinks: </label>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label>Hyperlinks</label>
         {this.renderHyperLinkInput()}
         {this.renderHyperLinkList()}
       </div>
@@ -135,5 +130,11 @@ HyperLinksSection.propTypes = {
   data: PropTypes.arrayOf(PropTypes.string).isRequired,
   onAddLink: PropTypes.func.isRequired,
   onRemoveLink: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+};
+
+HyperLinksSection.defaultProps = {
+  disabled: false,
+  readOnly: false,
 };
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 4f49c3afb..df6393292 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -1,5 +1,5 @@
-// PLEASE check carefully when performing ELN rebasing
-import React, { Component, useState, useEffect } from 'react';
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
@@ -41,9 +41,20 @@ export default class ImageModal extends Component {
     }
   }
 
+  shouldComponentUpdate(nextState) {
+    if (this.state.numOfPages === nextState.numOfPages
+      && this.state.numOfPages !== 0
+      && this.state.pageIndex === nextState.pageIndex
+      && this.state.showModal === nextState.showModal) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps) {
-    if (this.props.popObject.fetchNeeded &&
-      (this.props.popObject.fetchId !== prevProps.popObject.fetchId)) {
+    if (this.props.popObject.fetchNeeded
+      && (this.props.popObject.fetchId !== prevProps.popObject.fetchId)) {
       this.fetchImage();
     }
   }
@@ -66,19 +77,8 @@ export default class ImageModal extends Component {
     this.setState({ numOfPages: numPages });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.numOfPages == nextState.numOfPages
-      && this.state.numOfPages != 0
-      && this.state.pageIndex == nextState.pageIndex
-      && this.state.showModal == nextState.showModal) {
-      return false;
-    }
-
-    return true;
-  }
-
   changePage(offset) {
-    this.setState({ pageIndex: (this.state.pageIndex + offset) });
+    this.setState((prevState) => ({ pageIndex: prevState.pageIndex + offset }));
   }
 
   previousPage() {
@@ -102,20 +102,6 @@ export default class ImageModal extends Component {
     }
   }
 
-  handleModalClose(e) {
-    stopEvent(e);
-    this.setState({ showModal: false });
-  }
-
-  handleModalShow(e) {
-    stopEvent(e);
-    this.setState({ showModal: true });
-  }
-
-  handleImageError() {
-    this.setState({ fetchSrc: this.props.previewObject.src });
-  }
-
   render() {
     const {
       hasPop, previewObject, popObject, imageStyle
@@ -137,30 +123,40 @@ export default class ImageModal extends Component {
             <Modal.Title>{popObject.title}</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ overflow: 'auto', position: 'relative' }}>
-            {this.state.isPdf ?
-              <div>
-                <Document file={{ url: this.state.fetchSrc }}
-                  onLoadSuccess={(pdf) => this.onDocumentLoadSuccess(pdf.numPages)}>
-                  <Page pageNumber={pageIndex} />
-                </Document>
+            {this.state.isPdf
+              ? (
                 <div>
-                  <p>
-                    Page {pageIndex || (numOfPages ? 1 : '--')} of {numOfPages || '--'}
-                  </p>
-                  <button
-                    type="button"
-                    disabled={pageIndex <= 1}
-                    onClick={() => this.previousPage()}
+                  <Document
+                    file={{ url: this.state.fetchSrc }}
+                    onLoadSuccess={(pdf) => this.onDocumentLoadSuccess(pdf.numPages)}
                   >
-                    Previous
-                  </button>
-                  <button
-                    type="button"
-                    disabled={pageIndex >= numOfPages}
-                    onClick={() => this.nextPage()}
-                  >
-                    Next
-                  </button>
+                    <Page pageNumber={pageIndex} />
+                  </Document>
+                  <div>
+                    <p>
+                      Page
+                      {' '}
+                      {pageIndex || (numOfPages ? 1 : '--')}
+                      {' '}
+                      of
+                      {' '}
+                      {numOfPages || '--'}
+                    </p>
+                    <button
+                      type="button"
+                      disabled={pageIndex <= 1}
+                      onClick={() => this.previousPage()}
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      disabled={pageIndex >= numOfPages}
+                      onClick={() => this.nextPage()}
+                    >
+                      Next
+                    </button>
+                  </div>
                 </div>
               </div>
               :
@@ -199,3 +195,7 @@ ImageModal.propTypes = {
     fetchFilename: PropTypes.string,
   }).isRequired,
 };
+
+ImageModal.defaultProps = {
+  imageStyle: {},
+};
diff --git a/app/packs/src/components/container/AttachmentDropzone.js b/app/packs/src/components/container/AttachmentDropzone.js
index 348120e0c..5d45e79ed 100644
--- a/app/packs/src/components/container/AttachmentDropzone.js
+++ b/app/packs/src/components/container/AttachmentDropzone.js
@@ -5,32 +5,36 @@ import DragDropItemTypes from 'src/components/DragDropItemTypes';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 
 const dataTarget = {
-  canDrop(props, monitor) {
+  canDrop(monitor) {
     const itemType = monitor.getItemType();
-    if(itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET){
+    if (itemType == DragDropItemTypes.DATA
+      || itemType == DragDropItemTypes.UNLINKED_DATA
+      || itemType == DragDropItemTypes.DATASET) {
       return true;
     }
+    return false;
   },
 
   drop(props, monitor) {
     const item = monitor.getItem();
     const itemType = monitor.getItemType();
-    const {dataset_container, handleAddWithAttachments} = props;
+    const { handleAddWithAttachments } = props;
 
     switch (itemType) {
       case DragDropItemTypes.DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeAttachmentFromList(item.attachment)
+        handleAddWithAttachments([item.attachment]);
+        InboxActions.removeAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.UNLINKED_DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        handleAddWithAttachments([item.attachment]);
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.DATASET:
-        handleAddWithAttachments(item.dataset.attachments)
-        InboxActions.removeDatasetFromList(item.dataset)
+        handleAddWithAttachments(item.dataset.attachments);
+        InboxActions.removeDatasetFromList(item.dataset);
+        break;
+      default:
+        console.warn(`Unhandled itemType: ${itemType}`);
         break;
     }
   }
@@ -42,41 +46,37 @@ const collectTarget = (connect, monitor) => ({
   canDrop: monitor.canDrop()
 });
 
-class AttachmentDropzone extends Component{
-  constructor(props) {
-    super(props);
-  }
-
+class AttachmentDropzone extends Component {
   renderOverlay(color) {
-      return (
-        <div style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          height: '100%',
-          width: '100%',
-          zIndex: 1,
-          opacity: 0.5,
-          backgroundColor: color,
-        }} />
-      );
-    }
+    return (
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '100%',
+        zIndex: 1,
+        opacity: 0.5,
+        backgroundColor: color,
+      }}
+      />
+    );
+  }
 
-  render(){
-    const {connectDropTarget, isOver, canDrop} = this.props;
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
 
     return connectDropTarget(
       <div>
-      <i style={{color: 'gray', padding: 2, textAlign: 'center'}}>
-      Drop File(s) from the inbox
-      {isOver && canDrop && this.renderOverlay('green')}
-      </i>
+        <i style={{ color: 'gray', padding: 2, textAlign: 'center' }}>
+          Drop File(s) from the inbox
+          {isOver && canDrop && this.renderOverlay('green')}
+        </i>
       </div>
     );
   }
 }
 
-
 export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(AttachmentDropzone);
 
 AttachmentDropzone.propTypes = {
diff --git a/app/packs/src/components/container/ContainerComponent.js b/app/packs/src/components/container/ContainerComponent.js
index c9972ed38..832c32458 100644
--- a/app/packs/src/components/container/ContainerComponent.js
+++ b/app/packs/src/components/container/ContainerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import { Map } from 'immutable';
 import PropTypes from 'prop-types';
@@ -56,10 +57,6 @@ export default class ContainerComponent extends Component {
     TextTemplateStore.unlisten(this.handleTemplateChange);
   }
 
-  onChange(container) {
-    this.props.onChange(container);
-  }
-
   handleTemplateChange() {
     const { templateType } = this.props;
 
@@ -100,43 +97,48 @@ export default class ContainerComponent extends Component {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  updateTextTemplates(textTemplate) {
-    const { templateType } = this.props;
-    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
-  }
 
   handleAddLink(link) {
     const { container } = this.state;
-    let hyperlinks = container.extended_metadata['hyperlinks'];
+    let { hyperlinks } = container.extended_metadata;
     if (hyperlinks == null) {
-      container.extended_metadata['hyperlinks'] = [link];
+      container.extended_metadata.hyperlinks = [link];
     } else {
       if (typeof hyperlinks === 'string' || hyperlinks instanceof String) {
         hyperlinks = JSON.parse(hyperlinks);
       }
 
       hyperlinks.push(link);
-      container.extended_metadata['hyperlinks'] = hyperlinks;
+      container.extended_metadata.hyperlinks = hyperlinks;
     }
     this.setState({ container });
   }
 
   handleRemoveLink(link) {
     const { container } = this.state;
-    let hyperlinks = container.extended_metadata['hyperlinks'];
+    let { hyperlinks } = container.extended_metadata;
     if (typeof hyperlinks === 'string' || hyperlinks instanceof String) {
       hyperlinks = JSON.parse(hyperlinks);
     }
 
-    var index = hyperlinks.indexOf(link);
+    const index = hyperlinks.indexOf(link);
     if (index !== -1) {
       hyperlinks.splice(index, 1);
-      container.extended_metadata['hyperlinks'] = hyperlinks;
+      container.extended_metadata.hyperlinks = hyperlinks;
     }
 
     this.setState({ container });
   }
 
+  onChange(container) {
+    this.props.onChange(container);
+  }
+
+  updateTextTemplates(textTemplate) {
+    const { templateType } = this.props;
+    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
+  }
+
   render() {
     const { container, textTemplate } = this.state;
     const { readOnly, disabled } = this.props;
@@ -162,6 +164,7 @@ export default class ContainerComponent extends Component {
     return (
       <div>
         <Col md={8}>
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label>Name</label>
           <FormControl
             type="text"
@@ -169,16 +172,18 @@ export default class ContainerComponent extends Component {
             value={container.name || '***'}
             // eslint-disable-next-line react/jsx-no-bind
             onChange={this.handleInputChange.bind(this, 'name')}
-            disabled={readOnly || disabled} />
+            disabled={readOnly || disabled}
+          />
         </Col>
         <Col md={4}>
           <div style={{ marginBottom: 11 }}>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label>Status</label>
             <Select
-              name='status'
+              name="status"
               multi={false}
               options={confirmOptions}
-              value={container.extended_metadata['status']}
+              value={container.extended_metadata.status}
               disabled={readOnly || disabled}
               // eslint-disable-next-line react/jsx-no-bind
               onChange={this.handleInputChange.bind(this, 'status')}
@@ -191,7 +196,7 @@ export default class ContainerComponent extends Component {
             <OlsTreeSelect
               selectName="chmo"
               selectedValue={container.extended_metadata.kind || ''}
-              onSelectChange={event => this.handleInputChange('kind', event)}
+              onSelectChange={(event) => this.handleInputChange('kind', event)}
               selectedDisable={readOnly || disabled || false}
             />
           </div>
@@ -214,6 +219,7 @@ export default class ContainerComponent extends Component {
           </FormGroup>
         </Col>
         <Col md={12}>
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label>Datasets</label>
           <ContainerDatasets
             container={container}
@@ -223,8 +229,12 @@ export default class ContainerComponent extends Component {
           />
         </Col>
         <Col md={12}>
-          <HyperLinksSection data={container.extended_metadata['hyperlinks'] ?? []} onAddLink={this.handleAddLink} onRemoveLink={this.handleRemoveLink}
-            disabled={disabled}></HyperLinksSection>
+          <HyperLinksSection
+            data={container.extended_metadata.hyperlinks ?? []}
+            onAddLink={this.handleAddLink}
+            onRemoveLink={this.handleRemoveLink}
+            disabled={disabled}
+          />
         </Col>
       </div>
     );
@@ -237,4 +247,12 @@ ContainerComponent.propTypes = {
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
   container: PropTypes.object
-}
+};
+
+ContainerComponent.defaultProps = {
+  templateType: '',
+  onChange: () => {},
+  readOnly: false,
+  disabled: false,
+  container: {}
+};
diff --git a/app/packs/src/components/container/ContainerDataset.js b/app/packs/src/components/container/ContainerDataset.js
deleted file mode 100644
index f9adf1c8f..000000000
--- a/app/packs/src/components/container/ContainerDataset.js
+++ /dev/null
@@ -1,575 +0,0 @@
-import React, { Component } from 'react';
-import {
-  Row,
-  Col,
-  FormGroup,
-  FormControl,
-  ControlLabel,
-  Table,
-  ListGroup,
-  ListGroupItem,
-  Button,
-  Overlay,
-} from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import debounce from 'es6-promise-debounce';
-import { findIndex, cloneDeep } from 'lodash';
-import { absOlsTermId } from 'chem-generic-ui';
-
-import Utils from 'src/utilities/Functions';
-import { formatBytes } from 'src/utilities/MathUtils';
-import Attachment from 'src/models/Attachment';
-import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import GenericDS from 'src/models/GenericDS';
-import GenericDSDetails from 'src/components/generic/GenericDSDetails';
-import InboxActions from 'src/stores/alt/actions/InboxActions';
-import InstrumentsFetcher from 'src/fetchers/InstrumentsFetcher';
-import ChildOverlay from 'src/components/managingActions/ChildOverlay';
-import HyperLinksSection from 'src/components/common/HyperLinksSection';
-import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
-import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-
-export default class ContainerDataset extends Component {
-  constructor(props) {
-    super();
-    let dataset_container = Object.assign({}, props.dataset_container);
-    this.state = {
-      dataset_container: dataset_container,
-      instruments: null,
-      valueBeforeFocus: null,
-      timeoutReference: null,
-      link: null,
-    };
-
-    this.timeout = 6e2; // 600ms timeout for input typing
-    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleAddLink = this.handleAddLink.bind(this);
-    this.handleRemoveLink = this.handleRemoveLink.bind(this);
-    this.handleDSChange = this.handleDSChange.bind(this);
-  }
-
-  createAttachmentPreviews(dataset_container) {
-    const { attachments } = dataset_container;
-    const newAttachments = attachments.filter(
-      attachment => !attachment.preview
-    );
-
-    const updatedAttachments = newAttachments.map(attachment => {
-      return attachment.thumb
-        ? AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
-            result => {
-              if (result != null) {
-                attachment.preview = `data:image/png;base64,${result}`;
-              }
-              return attachment;
-            }
-          )
-        : attachment;
-    });
-
-    Promise.all(updatedAttachments).then(attachments => {
-      dataset_container.attachments = attachments;
-
-      this.setState({
-        dataset_container: dataset_container,
-      });
-    });
-  }
-
-  handleInputChange(type, event) {
-    const { dataset_container } = this.state;
-    const { value } = event.target;
-    switch (type) {
-      case 'name':
-        dataset_container.name = value;
-        break;
-      case 'instrument':
-        dataset_container.extended_metadata['instrument'] = value;
-        break;
-      case 'description':
-        dataset_container.description = value;
-        break;
-      case 'dataset':
-        dataset_container.dataset = value;
-        break;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleDSChange(ds) {
-    this.handleInputChange('dataset', { target: { value: ds } });
-  }
-
-  handleFileDrop(files) {
-    const { dataset_container } = this.state;
-    let attachments = files.map(f => Attachment.fromFile(f));
-    let first_attach = dataset_container.attachments.length == 0;
-    dataset_container.attachments =
-      dataset_container.attachments.concat(attachments);
-    if (first_attach) {
-      let attachment_list = dataset_container.attachments;
-      let attach_name = attachment_list[attachment_list.length - 1].filename;
-      let splitted = attach_name.split('.');
-      if (splitted.length > 1) {
-        splitted.splice(-1, 1);
-        attach_name = splitted.join('.');
-      }
-      dataset_container.name = attach_name;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentDownload(attachment) {
-    const {currentUser} = UserStore.getState()
-    if (!currentUser) {
-      Utils.downloadFile({ contents: `/api/v1/public/download/attachment?id=${attachment.id}` });
-    } else {
-      Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
-    }
-  }
-
-  handleAttachmentRemove(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    dataset_container.attachments[index].is_deleted = true;
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentBackToInbox(attachment) {
-    const { onChange } = this.props;
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    if (index != -1) {
-      InboxActions.backToInbox(attachment);
-      dataset_container.attachments.splice(index, 1);
-      onChange(dataset_container);
-    }
-  }
-
-  handleUndo(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-
-    dataset_container.attachments[index].is_deleted = false;
-    this.setState({ dataset_container });
-  }
-
-  handleSave() {
-    const { dataset_container } = this.state;
-    const { onChange, onModalHide } = this.props;
-    onChange(dataset_container);
-    onModalHide();
-  }
-
-  listGroupItem(attachment) {
-    const { disabled } = this.props;
-    const preview = attachment.preview ? (
-      <tr>
-        <td rowSpan="2" width="128">
-          <img style={{ maxWidth: '100%', height: 'auto', display: 'block' }} src={attachment.preview} alt="" />
-        </td>
-      </tr>
-    ) : (
-      <tr>
-        <td rowSpan="2" width="128">
-          <img style={{ width: '128px', display: 'block' }} alt="" />
-        </td>
-      </tr>
-    );
-    if (attachment.is_deleted) {
-      return (
-        <Table className="borderless" style={{ marginBottom: 'unset', tableLayout: 'fixed' }}>
-          <tbody>
-            {preview}
-            <tr>
-              <td>
-                <strike>{attachment.filename}</strike>
-              </td>
-              <td>
-                <Button
-                  bsSize="xsmall"
-                  bsStyle="danger"
-                  onClick={() => this.handleUndo(attachment)}
-                  disabled={disabled}
-                >
-                  <i className="fa fa-undo" aria-hidden="true" />
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      );
-    }
-    return (
-      <Table className="borderless" style={{ marginBottom: 'unset', tableLayout: 'fixed' }}>
-        <tbody>
-          {preview}
-          <tr>
-            <td style={{  wordWrap: 'break-word' }}>
-              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a>
-            </td>
-            <td style={{ wordWrap: 'break-word' }}><span>{formatBytes(attachment.filesize)}</span></td>
-            <td style={{ wordWrap: 'break-word' }}>
-              {this.removeAttachmentButton(attachment)}
-              {this.attachmentBackToInboxButton(attachment)}
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
-  }
-
-  attachments() {
-    const { dataset_container } = this.state;
-    if (
-      dataset_container.attachments &&
-      dataset_container.attachments.length > 0
-    ) {
-      return (
-        <div className="list">
-          <ListGroup>
-            {dataset_container.attachments.map(attachment => {
-              return (
-                <ListGroupItem
-                  key={attachment.id}
-                  style={{ margin: 'unset', padding: 'unset' }}
-                >
-                  {this.listGroupItem(attachment)}
-                </ListGroupItem>
-              );
-            })}
-          </ListGroup>
-        </div>
-      );
-    }
-    return (
-      <div style={{ padding: 15 }}>
-        There are currently no Datasets.
-        <br />
-      </div>
-    );
-  }
-
-  removeAttachmentButton(attachment) {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          style={{ marginRight: 10 }}
-          onClick={() => this.handleAttachmentRemove(attachment)}
-        >
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
-    }
-  }
-
-  attachmentBackToInboxButton(attachment) {
-    const { readOnly } = this.props;
-    if (!readOnly && !attachment.is_new) {
-      return (
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          onClick={() => this.handleAttachmentBackToInbox(attachment)}
-        >
-          <i className="fa fa-backward" />
-        </Button>
-      );
-    }
-  }
-
-  dropzone() {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Dropzone
-          onDrop={files => this.handleFileDrop(files)}
-          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-        >
-          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-            Drop Files, or Click to Select.
-          </div>
-        </Dropzone>
-      );
-    }
-  }
-
-  resetInstrumentComponent() {
-    const { dataset_container } = this.state;
-    this.setState({
-      value: '',
-      showInstruments: false,
-      instruments: null,
-      valueBeforeFocus: null,
-      error: '',
-    });
-    dataset_container.extended_metadata['instrument'] = '';
-  }
-
-  doneInstrumentTyping() {
-    const { value } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-    } else {
-      this.fetchInstruments(value);
-    }
-  }
-
-  fetchInstruments(value, show = true) {
-    const debounced = debounce(function (query) {
-      return InstrumentsFetcher.fetchInstrumentsForCurrentUser(query);
-    }, 200);
-    debounced(value)
-      .then(result => {
-        const newState = {};
-        if (result.length > 0) {
-          newState.instruments = result;
-          newState.showInstruments = show;
-        } else {
-          newState.instruments = null;
-          newState.error = '';
-          newState.showInstruments = false;
-        }
-        this.setState(newState);
-      })
-      .catch(error => console.log(error));
-  }
-
-  handleInstrumentValueChange(event, doneInstrumentTyping) {
-    const { value } = event.target;
-    const { timeoutReference } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-      return;
-    }
-    if (timeoutReference) {
-      clearTimeout(timeoutReference);
-    }
-    this.setState({
-      value,
-      timeoutReference: setTimeout(function () {
-        doneInstrumentTyping();
-      }, this.timeout),
-    });
-    this.handleInputChange('instrument', event);
-  }
-
-  selectInstrument() {
-    const { dataset_container, timeoutReference, value } = this.state;
-
-    this.setState({
-      showInstruments: false,
-      valueBeforeFocus: null,
-    });
-
-    if (!value || value.trim() === '') {
-      this.setState({ value: '' });
-      return 0;
-    }
-    dataset_container.extended_metadata.instrument = value;
-    clearTimeout(timeoutReference);
-    return value;
-  }
-
-  focusInstrument(newFocus) {
-    const { instruments, valueBeforeFocus } = this.state;
-    const newState = {};
-    if (!valueBeforeFocus) {
-      newState.valueBeforeFocus = instruments[newFocus].name;
-    }
-    newState.value = instruments[newFocus].name;
-    this.setState(newState);
-  }
-
-  abortAutoSelection() {
-    const { valueBeforeFocus } = this.state;
-    this.setState({
-      value: valueBeforeFocus,
-      valueBeforeFocus: null,
-    });
-  }
-
-  renderInstruments() {
-    const { instruments, error } = this.state;
-
-    if (instruments) {
-      return (
-        <div>
-          {instruments.map((instrument, index) => {
-            return (
-              <ListGroupItem
-                onClick={() => this.selectInstrument()}
-                onMouseEnter={() => this.focusInstrument(index)}
-                key={'instrument_' + index}
-                ref={'instrument_' + index}
-                header={instrument.name}
-              />
-            );
-          })}
-        </div>
-      );
-    } else if (error) {
-      return <ListGroupItem>{error}</ListGroupItem>;
-    }
-    return <div />;
-  }
-
-  handleAddLink(link) {
-    const { dataset_container } = this.state;
-    if (dataset_container.extended_metadata['hyperlinks'] == null) {
-      dataset_container.extended_metadata['hyperlinks'] = [link];
-    } else {
-      dataset_container.extended_metadata['hyperlinks'].push(link);
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleRemoveLink(link) {
-    const { dataset_container } = this.state;
-    var index = dataset_container.extended_metadata['hyperlinks'].indexOf(link);
-    if (index !== -1) {
-      dataset_container.extended_metadata['hyperlinks'].splice(index, 1);
-    }
-    this.setState({ dataset_container });
-  }
-
-  render() {
-    const { dataset_container, showInstruments } = this.state;
-    const { readOnly, disabled, kind } = this.props;
-    const overlayAttributes = {
-      style: {
-        position: 'absolute',
-        width: 300,
-        marginTop: 144,
-        marginLeft: 17,
-      },
-    };
-
-    const termId = absOlsTermId(kind);
-    const klasses =
-      (UserStore.getState() && UserStore.getState().dsKlasses) || [];
-    let klass = {};
-    const idx = findIndex(klasses, o => o.ols_term_id === termId);
-    if (idx > -1) {
-      klass = klasses[idx];
-    }
-
-    let genericDS = {};
-    if (dataset_container?.dataset?.id) {
-      genericDS = dataset_container.dataset;
-    } else if (klass.ols_term_id !== undefined) {
-      genericDS = GenericDS.buildEmpty(cloneDeep(klass), dataset_container.id);
-    }
-    return (
-      <Row>
-        <Col md={6} className="col-base">
-          <FormGroup controlId="datasetName">
-            <ControlLabel>Name</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.name || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('name', event)}
-            />
-          </FormGroup>
-          <FormGroup controlId="datasetInstrument">
-            <ControlLabel>Instrument</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.extended_metadata['instrument'] || ''}
-              disabled={readOnly || disabled}
-              onChange={event =>
-                this.handleInstrumentValueChange(
-                  event,
-                  this.doneInstrumentTyping
-                )
-              }
-              ref={input => {
-                this.autoComplete = input;
-              }}
-              autoComplete="off"
-            />
-            <Overlay
-              placement="bottom"
-              style={{
-                marginTop: 80,
-                width: 398,
-                height: 10,
-                maxHeight: 20,
-              }}
-              show={showInstruments}
-              container={this}
-              rootClose
-              onHide={() => this.abortAutoSelection()}
-            >
-              <ChildOverlay
-                dataList={this.renderInstruments()}
-                overlayAttributes={overlayAttributes}
-              />
-            </Overlay>
-          </FormGroup>
-          <FormGroup controlId="datasetDescription">
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              value={dataset_container.description || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('description', event)}
-              rows={4}
-            />
-          </FormGroup>
-        </Col>
-        <Col md={6} className="col-full">
-          <label>Attachments</label>
-          {this.dropzone()}
-          {this.attachments()}
-          <>
-            <HyperLinksSection
-              data={dataset_container.extended_metadata['hyperlinks']}
-              onAddLink={this.handleAddLink}
-              onRemoveLink={this.handleRemoveLink}
-              disabled={disabled}
-            ></HyperLinksSection>
-            <ImageAnnotationModalSVG
-              attachment={this.state.choosenAttachment}
-              isShow={this.state.imageEditModalShown}
-              handleSave={() => {
-                let newAnnotation = document
-                  .getElementById('svgEditId')
-                  .contentWindow.svgEditor.svgCanvas.getSvgString();
-                this.state.choosenAttachment.updatedAnnotation = newAnnotation;
-                this.setState({ imageEditModalShown: false });
-                this.props.onChange(this.props.dataset_container);
-              }}
-              handleOnClose={() => {
-                this.setState({ imageEditModalShown: false });
-              }}
-            />
-          </>
-        </Col>
-        <Col md={12}>
-          <GenericDSDetails
-            genericDS={genericDS}
-            klass={klass}
-            kind={kind}
-            onChange={this.handleDSChange}
-          />
-        </Col>
-        <Col md={12}>
-          <GenericDSDetails
-            genericDS={genericDS}
-            klass={klass}
-            kind={kind}
-            onChange={this.handleDSChange}
-            readOnly={readOnly || disabled}
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index 1472c6ba3..cf6768535 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import {
+  Button, ButtonToolbar, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
 import { DropTarget } from 'react-dnd';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 import DragDropItemTypes from 'src/components/DragDropItemTypes';
@@ -12,39 +14,39 @@ import { GenericDSMisType } from 'src/apps/generic/Utils';
 import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
 
 const dataTarget = {
-  canDrop(props, monitor) {
+  canDrop(monitor) {
     const itemType = monitor.getItemType();
-    if (itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET) {
-      return true;
-    }
+    return itemType === DragDropItemTypes.DATA
+      || itemType === DragDropItemTypes.UNLINKED_DATA
+      || itemType === DragDropItemTypes.DATASET;
   },
 
   drop(props, monitor) {
     const item = monitor.getItem();
     const itemType = monitor.getItemType();
-    const { dataset_container, onChange } = props;
+    const { datasetContainer, onChange } = props;
 
     switch (itemType) {
       case DragDropItemTypes.DATA:
-        dataset_container.attachments.push(item.attachment)
-        onChange(dataset_container)
-        InboxActions.removeAttachmentFromList(item.attachment)
+        datasetContainer.attachments.push(item.attachment);
+        onChange(datasetContainer);
+        InboxActions.removeAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.UNLINKED_DATA:
-        dataset_container.attachments.push(item.attachment)
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        datasetContainer.attachments.push(item.attachment);
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.DATASET:
-        item.dataset.attachments.forEach(attachment => {
-          dataset_container.attachments.push(attachment)
-        })
-        onChange(dataset_container)
-        InboxActions.removeDatasetFromList(item.dataset)
+        item.dataset.attachments.forEach((attachment) => {
+          datasetContainer.attachments.push(attachment);
+        });
+        onChange(datasetContainer);
+        InboxActions.removeDatasetFromList(item.dataset);
+        break;
+      default:
+        console.warn(`Unknown itemType: ${itemType}`);
         break;
     }
-
   }
 };
 
@@ -55,22 +57,24 @@ const collectTarget = (connect, monitor) => ({
 });
 
 class ContainerDatasetField extends Component {
-
-  removeButton(dataset_container) {
+  removeButton(datasetContainer) {
     const { readOnly, handleRemove, disabled } = this.props;
     if (!readOnly) {
       return (
-        <Button bsSize="xsmall"
+        <Button
+          bsSize="xsmall"
           bsStyle="danger"
-          onClick={() => handleRemove(dataset_container)}
-          disabled={disabled}>
-          <i className="fa fa-trash-o"></i>
+          onClick={() => handleRemove(datasetContainer)}
+          disabled={disabled}
+        >
+          <i className="fa fa-trash-o" />
         </Button>
       );
     }
+    return null;
   }
 
-  renderOverlay(color) {
+  static renderOverlay(color) {
     return (
       <div style={{
         position: 'absolute',
@@ -81,67 +85,104 @@ class ContainerDatasetField extends Component {
         zIndex: 1,
         opacity: 0.5,
         backgroundColor: color,
-      }} />
+      }}
+      />
     );
   }
 
   render() {
-    const {connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
-      handleModalOpen, disabled} = this.props;
+    const { connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
+      handleModalOpen, disabled
+    } = this.props;
+
     const downloadClick = isPublic ? () => PublicFetcher.downloadZip(dataset_container.id) : () => AttachmentFetcher.downloadZip(dataset_container.id);
 
     if (dataset_container.is_deleted) {
       return (
-        <div><strike>{dataset_container.name}</strike>
+        <div>
+          <strike>{datasetContainer.name}</strike>
 
           <Button
             className="pull-right"
             bsSize="xsmall"
             bsStyle="danger"
-            onClick={() => handleUndo(dataset_container)}
+            onClick={() => handleUndo(datasetContainer)}
             disabled={disabled}
           >
-            <i className="fa fa-undo"></i>
+            <i className="fa fa-undo" />
           </Button>
 
         </div>
-      )
-    } else {
-      const gds_download = (dataset_container.dataset == null || typeof dataset_container.dataset === 'undefined') ? (<span />) : (
+      );
+    }
+    const gdsDownload = (datasetContainer.dataset == null
+      || typeof datasetContainer.dataset === 'undefined') ? (<span />) : (
         <OverlayTrigger placement="top" overlay={<Tooltip id="download metadata">download metadata</Tooltip>}>
-          <Button bsSize="xsmall" bsStyle="success" onClick={() => AttachmentFetcher.downloadDataset(dataset_container.id)}>
-            <i className="fa fa-download"></i>
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={() => AttachmentFetcher.downloadDataset(datasetContainer.id)}
+          >
+            <i className="fa fa-download" />
           </Button>
         </OverlayTrigger>
       );
-      return connectDropTarget(
-        <div>
-          {dataset_container.dataset && dataset_container.dataset.klass_ols !== absOlsTermId(kind) ? <GenericDSMisType /> : null}
-          <a style={{ cursor: 'pointer' }} onClick={() => handleModalOpen(dataset_container)}>
-            {dataset_container.name || 'new'}
-          </a>
-          <ButtonToolbar className="pull-right">
-            {gds_download}
-            <OverlayTrigger placement="top" overlay={<Tooltip id="download data">download data + metadata</Tooltip>}>
-              <Button bsSize="xsmall" bsStyle="info" onClick={downloadClick}>
-                <i className="fa fa-download"></i>
-              </Button>
-            </OverlayTrigger>
-            {this.removeButton(dataset_container)}
-          </ButtonToolbar>
-          {isOver && canDrop && this.renderOverlay('green')}
-        </div>
-      )
-    }
+    return connectDropTarget(
+      <div>
+        {datasetContainer.dataset && datasetContainer.dataset.klass_ols !== absOlsTermId(kind)
+          ? <GenericDSMisType /> : null}
+        <button
+          style={{ background: 'none', border: 'none', textDecoration: 'underline' }}
+          onClick={() => handleModalOpen(datasetContainer)}
+          type="button"
+        >
+          {datasetContainer.name || 'new'}
+        </button>
+        <ButtonToolbar className="pull-right">
+          {gdsDownload}
+          <OverlayTrigger placement="top" overlay={<Tooltip id="download data">download data + metadata</Tooltip>}>
+            <Button bsSize="xsmall" bsStyle="info" onClick={downloadClick}>
+              <i className="fa fa-download" />
+            </Button>
+          </OverlayTrigger>
+          {this.removeButton(datasetContainer)}
+        </ButtonToolbar>
+        {isOver && canDrop && this.renderOverlay('green')}
+      </div>
+    );
   }
 }
 
-export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(ContainerDatasetField);
-
 ContainerDatasetField.propTypes = {
   isOver: PropTypes.bool.isRequired,
   canDrop: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool,
+  handleRemove: PropTypes.func,
+  disabled: PropTypes.bool,
   isPublic: PropTypes.bool,
+  connectDropTarget: PropTypes.func.isRequired,
+  datasetContainer: PropTypes.shape({
+    is_deleted: PropTypes.bool,
+    name: PropTypes.string,
+    dataset: PropTypes.object,
+    id: PropTypes.number,
+  }).isRequired,
+  handleUndo: PropTypes.func.isRequired,
+  kind: PropTypes.string.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+};
+
+ContainerDatasetField.defaultProps = {
+  readOnly: false,
+  isPublic: false
+  handleRemove: () => {},
+  disabled: false,
 };
 
-ContainerDatasetField.defaultProps = { isPublic: false };
+const dropTargetTypes = [
+  DragDropItemTypes.DATA,
+  DragDropItemTypes.UNLINKED_DATA,
+  DragDropItemTypes.DATASET
+];
+
+export default DropTarget(dropTargetTypes, dataTarget, collectTarget)(ContainerDatasetField);
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
index 967c8aec9..f39bed250 100644
--- a/app/packs/src/components/container/ContainerDatasetModal.js
+++ b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -1,50 +1,212 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
-import { Modal, ButtonToolbar, Button } from 'react-bootstrap';
-import ContainerDataset from 'src/components/container/ContainerDataset';
+import PropTypes from 'prop-types';
+import {
+  Modal, ButtonGroup, OverlayTrigger, Tooltip, Button,
+} from 'react-bootstrap';
+import ContainerDatasetModalContent from 'src/components/container/ContainerDatasetModalContent';
 
 export default class ContainerDatasetModal extends Component {
   constructor(props) {
     super(props);
 
     this.datasetInput = React.createRef();
+    this.state = {
+      mode: 'attachments',
+      isNameEditing: false,
+      localName: props.datasetContainer.name,
+    };
+
     this.handleSave = this.handleSave.bind(this);
+    this.handleDiscard = this.handleDiscard.bind(this);
+    this.handleSwitchMode = this.handleSwitchMode.bind(this);
+  }
+
+  handleDiscard() {
+    this.props.onDiscard();
+    this.props.onHide();
   }
 
   handleSave() {
     this.datasetInput.current.handleSave();
+    this.props.onChange({
+      ...this.props.datasetContainer,
+      ...this.datasetInput.current.state.datasetContainer,
+      name: this.state.localName
+    });
+  }
+
+  handleNameChange(newName) {
+    this.setState({ localName: newName });
   }
 
+  handleSwitchMode(mode) {
+    this.setState({ mode });
+  }
+
+  toggleNameEditing = () => {
+    this.setState((prevState) => ({
+      isNameEditing: !prevState.isNameEditing,
+    }));
+  };
+
   render() {
     const {
-      show, dataset_container, onHide, onChange, readOnly, disabled, kind
+      show, onHide, onChange, readOnly, disabled, kind, datasetContainer
     } = this.props;
+
+    const { mode } = this.state;
+
+    const attachmentTooltip = (<Tooltip id="attachment-tooltip">Click to view Attachments</Tooltip>);
+    const metadataTooltip = (<Tooltip id="metadata-tooltip">Click to view Metadata</Tooltip>);
+
+    const AttachmentsButton = (
+      <Button
+        bsStyle={mode === 'attachments' ? 'info' : 'default'}
+        style={{
+          pointerEvents: 'none',
+          backgroundColor: mode !== 'attachments' ? '#E8E8E8' : undefined,
+          width: '120px'
+        }}
+        onClick={() => this.handleSwitchMode('attachments')}
+      >
+        Attachments&nbsp;&nbsp;
+        <i className="fa fa-paperclip" aria-hidden="true" />
+      </Button>
+    );
+
+    const MetadataButton = (
+      <Button
+        bsStyle={mode === 'metadata' ? 'info' : 'default'}
+        onClick={() => this.handleSwitchMode('metadata')}
+        style={{
+          pointerEvents: 'none',
+          backgroundColor: mode !== 'metadata' ? '#E8E8E8' : undefined,
+          width: '120px'
+        }}
+      >
+        Metadata&nbsp;&nbsp;
+        <i className="fa fa-address-card" aria-hidden="true" />
+
+      </Button>
+    );
+
+    const btnMode = (
+      <div
+        role="button"
+        tabIndex={0}
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          if (mode === 'attachments') {
+            this.handleSwitchMode('metadata');
+          } else {
+            this.handleSwitchMode('attachments');
+          }
+        }}
+        onKeyPress={() => {}}
+      >
+        <OverlayTrigger placement="top" overlay={mode === 'metadata' ? attachmentTooltip : metadataTooltip}>
+          <ButtonGroup>
+            {AttachmentsButton}
+            {MetadataButton}
+          </ButtonGroup>
+        </OverlayTrigger>
+      </div>
+    );
+
     if (show) {
       return (
-        <Modal show={show} backdrop="static" bsSize="large" dialogClassName="attachment-dataset-modal" onHide={() => (disabled ? onHide() : this.handleSave())}>
-          <Modal.Header>
+        <Modal
+          show={show}
+          bsSize="large"
+          dialogClassName="attachment-modal"
+          onHide={() => (disabled ? onHide() : this.handleSave())}
+        >
+          <Modal.Header style={{ flexShrink: 0 }}>
             <Modal.Title>
-              {dataset_container.name}
-              <ButtonToolbar>
-                <Button bsStyle="light" onClick={() => (disabled ? onHide() : this.handleSave())}>
-                  <i className="fa fa-times" />
-                </Button>
-              </ButtonToolbar>
+              {this.state.isNameEditing ? (
+                <div className="attachment-name-input-div">
+                  <input
+                    type="text"
+                    value={this.state.localName}
+                    onBlur={this.toggleNameEditing}
+                    onKeyPress={(event) => {
+                      if (event.key === 'Enter') {
+                        this.handleNameChange(event.target.value);
+                        this.toggleNameEditing();
+                      }
+                    }}
+                    onChange={(e) => { this.handleNameChange(e.target.value); }}
+                    className="attachment-name-input"
+                  />
+                </div>
+              ) : (
+                <div className="attachment-name-input-div">
+                  <span style={{ marginRight: '15px' }}>{this.state.localName}</span>
+                  {!readOnly && (
+                  <i
+                    className="fa fa-pencil"
+                    aria-hidden="true"
+                    onClick={this.toggleNameEditing}
+                    style={{ cursor: 'pointer', fontSize: '.8em', color: '#0275d8' }}
+                  />
+                  )}
+                </div>
+              )}
+              <div>{btnMode}</div>
             </Modal.Title>
+
           </Modal.Header>
           <Modal.Body>
-            <ContainerDataset
+            <ContainerDatasetModalContent
               ref={this.datasetInput}
               readOnly={readOnly}
               disabled={disabled}
-              dataset_container={dataset_container}
+              datasetContainer={datasetContainer}
               kind={kind}
               onModalHide={() => onHide()}
-              onChange={dataset_container => onChange(dataset_container)}
+              onChange={onChange}
+              mode={mode}
             />
           </Modal.Body>
+          <Modal.Footer style={{
+            display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0, width: '100%'
+          }}
+          >
+            {/* <Button style={{ marginRight: '5px' }} onClick={this.handleDiscard}>Discard Changes</Button> */}
+            <small style={{ alignSelf: 'center' }}>
+              Changes are kept for this session. Remember to save the element itself to persist changes.
+              {/* Discarding changes will discard changes for the entire session. */}
+            </small>
+            <Button
+              bsStyle="primary"
+              style={{ alignSelf: 'center', marginLeft: 'auto' }}
+              onClick={this.handleSave}
+            >
+              Keep Changes
+            </Button>
+          </Modal.Footer>
         </Modal>
       );
     }
     return <div />;
   }
 }
+
+ContainerDatasetModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  datasetContainer: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  onHide: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  kind: PropTypes.string.isRequired,
+  onDiscard: PropTypes.func.isRequired,
+};
+
+ContainerDatasetModal.defaultProps = {
+  readOnly: false,
+  disabled: false,
+};
diff --git a/app/packs/src/components/container/ContainerDatasetModalContent.js b/app/packs/src/components/container/ContainerDatasetModalContent.js
new file mode 100644
index 000000000..593513e3b
--- /dev/null
+++ b/app/packs/src/components/container/ContainerDatasetModalContent.js
@@ -0,0 +1,724 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import {
+  Row, Col, FormGroup, FormControl, ControlLabel,
+  ListGroupItem, Button, Overlay
+} from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import EditorFetcher from 'src/fetchers/EditorFetcher';
+import ImageModal from 'src/components/common/ImageModal';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
+import debounce from 'es6-promise-debounce';
+import {
+  findIndex, cloneDeep, last, findKey
+} from 'lodash';
+import { absOlsTermId } from 'chem-generic-ui';
+import Utils from 'src/utilities/Functions';
+import Attachment from 'src/models/Attachment';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import GenericDS from 'src/models/GenericDS';
+import GenericDSDetails from 'src/components/generic/GenericDSDetails';
+import InboxActions from 'src/stores/alt/actions/InboxActions';
+import InstrumentsFetcher from 'src/fetchers/InstrumentsFetcher';
+import ChildOverlay from 'src/components/managingActions/ChildOverlay';
+import HyperLinksSection from 'src/components/common/HyperLinksSection';
+import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
+import PropTypes from 'prop-types';
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile,
+  moveBackButton
+} from 'src/apps/mydb/elements/list/AttachmentList';
+import { formatDate, parseDate } from 'src/utilities/timezoneHelper';
+
+export default class ContainerDatasetModalContent extends Component {
+  constructor(props) {
+    super();
+    const datasetContainer = { ...props.datasetContainer };
+    this.state = {
+      datasetContainer,
+      instruments: null,
+      valueBeforeFocus: null,
+      timeoutReference: null,
+      attachmentEditor: false,
+      extension: null,
+      imageEditModalShown: false,
+      filteredAttachments: [...props.datasetContainer.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
+    };
+    this.timeout = 6e2; // 600ms timeout for input typing
+    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleAddLink = this.handleAddLink.bind(this);
+    this.handleRemoveLink = this.handleRemoveLink.bind(this);
+    this.handleDSChange = this.handleDSChange.bind(this);
+    this.editorInitial = this.editorInitial.bind(this);
+    this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.handleAttachmentRemove = this.handleAttachmentRemove.bind(this);
+    this.handleAttachmentBackToInbox = this.handleAttachmentBackToInbox.bind(this);
+  }
+
+  componentDidMount() {
+    this.editorInitial();
+    this.createAttachmentPreviews();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { datasetContainer } = this.props;
+    if (datasetContainer.attachments !== prevProps.datasetContainer.attachments) {
+      this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...datasetContainer.attachments] }, this.filterAndSortAttachments);
+    }
+  }
+
+  handleInputChange(type, event) {
+    const { datasetContainer } = this.state;
+    const { value } = event.target;
+    switch (type) {
+      case 'name':
+        datasetContainer.name = value;
+        break;
+      case 'instrument':
+        datasetContainer.extended_metadata.instrument = value;
+        break;
+      case 'description':
+        datasetContainer.description = value;
+        break;
+      case 'dataset':
+        datasetContainer.dataset = value;
+        break;
+      default:
+        console.warn(`Unhandled input type: ${type}`);
+        break;
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleDSChange(ds) {
+    this.handleInputChange('dataset', { target: { value: ds } });
+  }
+
+  handleFileDrop(files) {
+    const { datasetContainer } = this.state;
+    const attachments = files.map((f) => Attachment.fromFile(f));
+    const firstAttach = datasetContainer.attachments.length === 0;
+    datasetContainer.attachments = datasetContainer.attachments.concat(attachments);
+    if (firstAttach) {
+      let attachName = attachments[0].filename;
+      const splitted = attachName.split('.');
+      if (splitted.length > 1) {
+        splitted.splice(-1, 1);
+        attachName = splitted.join('.');
+      }
+      datasetContainer.name = attachName;
+    }
+
+    this.setState({
+      datasetContainer,
+      filteredAttachments: [...datasetContainer.attachments]
+    }, () => {
+      this.props.onChange({ ...this.state.datasetContainer });
+    });
+  }
+
+  handleAttachmentRemove(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+    datasetContainer.attachments[index].is_deleted = true;
+    this.setState({ datasetContainer });
+  }
+
+  handleAttachmentBackToInbox(attachment) {
+    const { onChange } = this.props;
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+    if (index !== -1) {
+      InboxActions.backToInbox(attachment);
+      datasetContainer.attachments.splice(index, 1);
+      onChange(datasetContainer);
+    }
+  }
+
+  handleUndo(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+
+    datasetContainer.attachments[index].is_deleted = false;
+    this.setState({ datasetContainer });
+  }
+
+  // the next method is used in ContainerDatasetModal.js please ignore eslint warning
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  handleSave() {
+    const { datasetContainer } = this.state;
+    const { onChange, onModalHide } = this.props;
+    onChange(datasetContainer);
+    onModalHide();
+  }
+
+  handleInstrumentValueChange(event, doneInstrumentTyping) {
+    const { value } = event.target;
+    const { timeoutReference } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+      return;
+    }
+    if (timeoutReference) {
+      clearTimeout(timeoutReference);
+    }
+    this.setState({
+      value,
+      timeoutReference: setTimeout(() => {
+        doneInstrumentTyping();
+      }, this.timeout),
+    });
+    this.handleInputChange('instrument', event);
+  }
+
+  handleAddLink(link) {
+    const { datasetContainer } = this.state;
+    if (datasetContainer.extended_metadata.hyperlinks == null) {
+      datasetContainer.extended_metadata.hyperlinks = [link];
+    } else {
+      datasetContainer.extended_metadata.hyperlinks.push(link);
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleRemoveLink(link) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.extended_metadata.hyperlinks.indexOf(link);
+    if (index !== -1) {
+      datasetContainer.extended_metadata.hyperlinks.splice(index, 1);
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) {
+      Utils.downloadFile({ contents: `/api/v1/public/download/attachment?id=${attachment.id}` });
+    } else {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}`,
+        name: attachment.filename,
+      });
+    }
+  };
+
+  handleEdit(attachment) {
+    const fileType = last(attachment.filename.split('.'));
+    const docType = this.documentType(attachment.filename);
+
+    EditorFetcher.startEditing({ attachment_id: attachment.id })
+      .then((result) => {
+        if (result.token) {
+          const url = `/editor?id=${attachment.id}&docType=${docType}
+          &fileType=${fileType}&title=${attachment.filename}&key=${result.token}
+          &only_office_token=${result.only_office_token}`;
+          window.open(url, '_blank');
+
+          attachment.aasm_state = 'oo_editing';
+          attachment.updated_at = new Date();
+
+          this.props.onChange(attachment);
+        } else {
+          alert('Unauthorized to edit this file.');
+        }
+      });
+  }
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filteredAttachments = this.props.datasetContainer.attachments.filter((
+      attachment
+    ) => attachment.filename.toLowerCase().includes(filterText.toLowerCase()));
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date': {
+          const dateA = parseDate(a.created_at);
+          const dateB = parseDate(b.created_at);
+          comparison = dateA.valueOf() - dateB.valueOf();
+          break;
+        }
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
+  resetInstrumentComponent() {
+    const { datasetContainer } = this.state;
+    this.setState({
+      value: '',
+      showInstruments: false,
+      instruments: null,
+      valueBeforeFocus: null,
+      error: '',
+    });
+    datasetContainer.extended_metadata.instrument = '';
+  }
+
+  doneInstrumentTyping() {
+    const { value } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+    } else {
+      this.fetchInstruments(value);
+    }
+  }
+
+  fetchInstruments(value, show = true) {
+    const debounced = debounce((query) => InstrumentsFetcher.fetchInstrumentsForCurrentUser(query), 200);
+    debounced(value)
+      .then((result) => {
+        const newState = {};
+        if (result.length > 0) {
+          newState.instruments = result;
+          newState.showInstruments = show;
+        } else {
+          newState.instruments = null;
+          newState.error = '';
+          newState.showInstruments = false;
+        }
+        this.setState(newState);
+      })
+      .catch((error) => console.log(error));
+  }
+
+  selectInstrument() {
+    const { datasetContainer, timeoutReference, value } = this.state;
+
+    this.setState({
+      showInstruments: false,
+      valueBeforeFocus: null,
+    });
+
+    if (!value || value.trim() === '') {
+      this.setState({ value: '' });
+      return 0;
+    }
+    datasetContainer.extended_metadata.instrument = value;
+    clearTimeout(timeoutReference);
+    return value;
+  }
+
+  focusInstrument(newFocus) {
+    const { instruments, valueBeforeFocus } = this.state;
+    const newState = {};
+    if (!valueBeforeFocus) {
+      newState.valueBeforeFocus = instruments[newFocus].name;
+    }
+    newState.value = instruments[newFocus].name;
+    this.setState(newState);
+  }
+
+  abortAutoSelection() {
+    const { valueBeforeFocus } = this.state;
+    this.setState({
+      value: valueBeforeFocus,
+      valueBeforeFocus: null,
+    });
+  }
+
+  createAttachmentPreviews() {
+    const { datasetContainer } = this.props;
+    datasetContainer.attachments.map((attachment) => {
+      if (attachment.thumb) {
+        AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
+          (result) => {
+            if (result != null) {
+              attachment.preview = `data:image/png;base64,${result}`;
+              this.forceUpdate();
+            }
+          }
+        );
+      } else {
+        attachment.preview = '/images/wild_card/not_available.svg';
+        this.forceUpdate();
+      }
+      return attachment;
+    });
+  }
+
+  documentType(filename) {
+    const { extension } = this.state;
+
+    const ext = last(filename.split('.'));
+    const docType = findKey(extension, (o) => o.includes(ext));
+
+    if (typeof docType === 'undefined' || !docType) {
+      return null;
+    }
+
+    return docType;
+  }
+
+  editorInitial() {
+    EditorFetcher.initial().then((result) => {
+      this.setState({
+        attachmentEditor: result.installed,
+        extension: result.ext,
+      });
+    });
+  }
+
+  customDropzone() {
+    return (
+      <Dropzone
+        onDrop={(files) => this.handleFileDrop(files)}
+        className="attachment-dropzone"
+      >
+        Drop files here, or click to upload.
+      </Dropzone>
+    );
+  }
+
+  renderImageEditModal() {
+    const { chosenAttachment, imageEditModalShown } = this.state;
+    const { onChange } = this.props;
+    return (
+      <ImageAnnotationModalSVG
+        attachment={chosenAttachment}
+        isShow={imageEditModalShown}
+        handleSave={
+          () => {
+            const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
+            chosenAttachment.updatedAnnotation = newAnnotation;
+            this.setState({ imageEditModalShown: false });
+            onChange(chosenAttachment);
+          }
+        }
+        handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
+      />
+    );
+  }
+
+  renderInstruments() {
+    const { instruments, error } = this.state;
+
+    if (instruments) {
+      return (
+        <div>
+          {instruments.map((instrument, index) => (
+            <ListGroupItem
+              onClick={() => this.selectInstrument()}
+              onMouseEnter={() => this.focusInstrument(index)}
+              key={`instrument_${index}`}
+              ref={`instrument_${index}`}
+              header={instrument.name}
+            />
+          ))}
+        </div>
+      );
+    } if (error) {
+      return <ListGroupItem>{error}</ListGroupItem>;
+    }
+    return <div />;
+  }
+
+  renderAttachments() {
+    const {
+      filteredAttachments, sortDirection, attachmentEditor, extension
+    } = this.state;
+    const { datasetContainer } = this.props;
+
+    return (
+      <div className="attachment-main-container">
+        {this.renderImageEditModal()}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ flex: '1', alignSelf: 'center' }}>
+            {this.customDropzone()}
+          </div>
+          <div style={{ marginLeft: '20px', alignSelf: 'center' }}>
+            {datasetContainer.attachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+          </div>
+        </div>
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
+                <ImageModal
+                  imageStyle={{
+                    width: '45px',
+                    height: '45px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
+                  previewObject={{
+                    src: attachment.preview,
+                  }}
+                  popObject={{
+                    title: attachment.filename,
+                    src: attachment.preview,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
+                  }}
+                />
+              </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  <div>
+                    Created:&nbsp;
+                    {formatDate(attachment.created_at)}
+                  </div>
+                  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+                  <div>
+                    Size:&nbsp;
+                    <span style={{ fontWeight: 'bold', color: '#444' }}>
+                      {formatFileSize(attachment.filesize)}
+                    </span>
+                  </div>
+                </div>
+
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => this.handleUndo(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                        < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                        || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {moveBackButton(attachment, this.handleAttachmentBackToInbox, this.props.readOnly)}
+                    &nbsp;
+                    {removeButton(attachment, this.handleAttachmentRemove, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
+            </div>
+          ))
+        )}
+        <HyperLinksSection
+          data={this.state.datasetContainer.extended_metadata.hyperlinks}
+          onAddLink={this.handleAddLink}
+          onRemoveLink={this.handleRemoveLink}
+          disabled={this.props.disabled}
+        />
+      </div>
+    );
+  }
+
+  renderMetadata() {
+    const { datasetContainer, showInstruments } = this.state;
+    const { readOnly, disabled, kind } = this.props;
+    const termId = absOlsTermId(kind);
+    const klasses = (UserStore.getState() && UserStore.getState().dsKlasses) || [];
+    let klass = {};
+    const idx = findIndex(klasses, (o) => o.ols_term_id === termId);
+    if (idx > -1) {
+      klass = klasses[idx];
+    }
+
+    let genericDS = {};
+    if (datasetContainer?.dataset?.id) {
+      genericDS = datasetContainer.dataset;
+    } else if (klass.ols_term_id !== undefined) {
+      genericDS = GenericDS.buildEmpty(cloneDeep(klass), datasetContainer.id);
+    }
+    return (
+      <>
+        <FormGroup controlId="datasetInstrument">
+          <ControlLabel>Instrument</ControlLabel>
+          <FormControl
+            type="text"
+            value={datasetContainer.extended_metadata.instrument || ''}
+            disabled={readOnly || disabled}
+            onChange={(event) => this.handleInstrumentValueChange(
+              event,
+              this.doneInstrumentTyping
+            )}
+            ref={(input) => {
+              this.autoComplete = input;
+            }}
+            autoComplete="off"
+          />
+          <Overlay
+            placement="bottom"
+            show={showInstruments}
+            container={this}
+            rootClose
+            onHide={() => this.abortAutoSelection()}
+          >
+            <ChildOverlay
+              dataList={this.renderInstruments()}
+              overlayAttributes={{
+                style: {
+                  position: 'absolute',
+                  width: 300,
+                  marginTop: 144,
+                  marginLeft: 17,
+                },
+              }}
+            />
+          </Overlay>
+        </FormGroup>
+        <FormGroup controlId="datasetDescription">
+          <ControlLabel>Description</ControlLabel>
+          <FormControl
+            componentClass="textarea"
+            value={datasetContainer.description || ''}
+            disabled={readOnly || disabled}
+            onChange={(event) => this.handleInputChange('description', event)}
+            rows={4}
+          />
+        </FormGroup>
+        <GenericDSDetails
+          genericDS={genericDS}
+          klass={klass}
+          kind={kind}
+          onChange={this.handleDSChange}
+          readOnly={readOnly || disabled}
+        />
+      </>
+    );
+  }
+
+  render() {
+    const { mode } = this.props;
+
+    return (
+      <Row>
+        <Col md={12}>
+          {mode === 'attachments' && this.renderAttachments()}
+          {mode === 'metadata' && this.renderMetadata()}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ContainerDatasetModalContent.propTypes = {
+  datasetContainer: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    attachments: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
+      aasm_state: PropTypes.string.isRequired,
+      content_type: PropTypes.string.isRequired,
+      filename: PropTypes.string.isRequired,
+      filesize: PropTypes.number.isRequired,
+      identifier: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
+      thumb: PropTypes.bool.isRequired
+    })),
+  }).isRequired,
+  onChange: PropTypes.func.isRequired,
+  onModalHide: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  kind: PropTypes.string.isRequired,
+  mode: PropTypes.oneOf(['attachments', 'metadata']),
+  attachments: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    aasm_state: PropTypes.string.isRequired,
+    content_type: PropTypes.string.isRequired,
+    filename: PropTypes.string.isRequired,
+    filesize: PropTypes.number.isRequired,
+    identifier: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    thumb: PropTypes.bool.isRequired
+  })),
+};
+
+ContainerDatasetModalContent.defaultProps = {
+  mode: 'attachments',
+  disabled: false,
+  readOnly: false,
+  attachments: [],
+};
diff --git a/app/packs/src/components/container/ContainerDatasets.js b/app/packs/src/components/container/ContainerDatasets.js
index 98192979a..63d21f441 100644
--- a/app/packs/src/components/container/ContainerDatasets.js
+++ b/app/packs/src/components/container/ContainerDatasets.js
@@ -1,5 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
-import { ListGroup, ListGroupItem, Button, Well } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import {
+  ListGroup, ListGroupItem, Button, Well
+} from 'react-bootstrap';
 import ContainerDatasetModal from 'src/components/container/ContainerDatasetModal';
 import ContainerDatasetField from 'src/components/container/ContainerDatasetField';
 import Container from 'src/models/Container';
@@ -10,75 +14,77 @@ export default class ContainerDatasets extends Component {
     super(props);
     const { container } = props;
     this.state = {
+      originalContainer: JSON.parse(JSON.stringify(container)),
       container,
       modal: {
         show: false,
-        dataset_container: null
-      }
+        datasetContainer: null,
+      },
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    })
+  componentDidUpdate(prevProps) {
+    if (this.props.container !== prevProps.container) {
+      this.setState({
+        container: this.props.container,
+        originalContainer: JSON.parse(JSON.stringify(this.props.container)),
+      });
+    }
   }
 
-  handleModalOpen(dataset_container) {
+  handleModalOpen(datasetContainer) {
     const { modal } = this.state;
-    modal.dataset_container = dataset_container;
+    modal.datasetContainer = datasetContainer || {};
     modal.show = true;
     this.setState({ modal });
   }
 
   handleAdd() {
     const { container } = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
+    const datasetContainer = Container.buildEmpty();
+    datasetContainer.container_type = 'dataset';
 
-    container.children.push(dataset_container);
+    container.children.push(datasetContainer);
 
-    this.handleModalOpen(dataset_container);
+    this.handleModalOpen(datasetContainer);
     this.props.onChange(container);
-
   }
 
   handleAddWithAttachments(attachments) {
     const { container } = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
+    const datasetContainer = Container.buildEmpty();
+    datasetContainer.container_type = 'dataset';
 
-    attachments.forEach(attachment => {
-      dataset_container.attachments.push(attachment)
-    })
-    container.children.push(dataset_container);
+    attachments.forEach((attachment) => {
+      datasetContainer.attachments.push(attachment);
+    });
+    container.children.push(datasetContainer);
 
-    this.handleModalOpen(dataset_container);
+    this.handleModalOpen(datasetContainer);
     this.props.onChange(container);
-
   }
 
-  handleRemove(dataset_container) {
-    let { container } = this.state;
+  handleRemove(datasetContainer) {
+    const { container } = this.state;
 
-    dataset_container.is_deleted = true;
+    datasetContainer.is_deleted = true;
     this.props.onChange(container);
   }
 
-  handleUndo(dataset_container) {
-    let { container } = this.state;
+  handleUndo(datasetContainer) {
+    const { container } = this.state;
 
-    dataset_container.is_deleted = false;
+    datasetContainer.is_deleted = false;
     this.props.onChange(container);
   }
 
-  handleChange(dataset_container) {
-    let { container } = this.state;
+  handleChange(datasetContainer) {
+    const { container } = this.state;
 
-    container.children.find(dataset => {
-      if (dataset.id == dataset_container.id) {
+    container.children.find((dataset) => {
+      if (dataset.id === datasetContainer.id) {
         const datasetId = container.children.indexOf(dataset);
-        container.children[datasetId] = dataset_container;
+        container.children[datasetId] = datasetContainer;
       }
     });
 
@@ -88,28 +94,32 @@ export default class ContainerDatasets extends Component {
   handleModalHide() {
     const { modal } = this.state;
     modal.show = false;
-    modal.dataset_container = null;
+    modal.datasetContainer = null;
     this.setState({ modal });
     // https://github.com/react-bootstrap/react-bootstrap/issues/1137
     document.body.className = document.body.className.replace('modal-open', '');
   }
 
+  discardChanges = () => {
+    this.setState((prevState) => ({
+      container: JSON.parse(JSON.stringify(prevState.originalContainer)),
+    }));
+  };
+
   addButton() {
     const { readOnly, disabled } = this.props;
-
     if (!readOnly && !disabled) {
       return (
         <div className="pull-right" style={{ marginTop: 5, marginBottom: 5 }}>
           <Button bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
-            <i className="fa fa-plus"></i>
+            <i className="fa fa-plus" />
           </Button>
         </div>
-      )
+      );
     }
+    return null;
   }
 
-
-
   render() {
     const { container, modal } = this.state;
     const {readOnly, disabled} = this.props;
@@ -120,21 +130,19 @@ export default class ContainerDatasets extends Component {
         <div>
           <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
             <ListGroup style={{ marginBottom: 0 }}>
-              {container.children.map((dataset_container, key) => {
-                return (
-                  <ListGroupItem key={key}>
-                    <ContainerDatasetField
-                      kind={kind}
-                      dataset_container={dataset_container}
-                      onChange={() => this.handleChange(dataset_container)}
-                      handleRemove={() => this.handleRemove(dataset_container)}
-                      handleUndo={() => this.handleUndo(dataset_container)}
-                      handleModalOpen={() => this.handleModalOpen(dataset_container)}
-                      disabled={disabled}
-                    />
-                  </ListGroupItem>
-                )
-              })}
+              {container.children.map((datasetContainer, key) => (
+                <ListGroupItem key={key}>
+                  <ContainerDatasetField
+                    kind={kind}
+                    datasetContainer={datasetContainer}
+                    onChange={() => this.handleChange(datasetContainer)}
+                    handleRemove={() => this.handleRemove(datasetContainer)}
+                    handleUndo={() => this.handleUndo(datasetContainer)}
+                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
+                    disabled={disabled}
+                  />
+                </ListGroupItem>
+              ))}
               <ListGroupItem key="attachmentdropzone" disabled>
               {!readOnly && !disabled
                 ? <AttachmentDropzone
@@ -145,34 +153,48 @@ export default class ContainerDatasets extends Component {
             </ListGroup>
             {this.addButton()}
           </Well>
+          {modal.show && modal.datasetContainer && (
           <ContainerDatasetModal
             onHide={() => this.handleModalHide()}
-            onChange={dataset_container => this.handleChange(dataset_container)}
+            onChange={(datasetContainer) => this.handleChange(datasetContainer)}
             kind={kind}
             show={modal.show}
             readOnly={this.props.readOnly}
-            dataset_container={modal.dataset_container}
+            datasetContainer={modal.datasetContainer}
             analysisContainer={modal.analysisContainer}
             disabled={disabled}
+            onDiscard={this.discardChanges}
           />
+          )}
         </div>
       );
-    } else {
-      return (
-        <div>
-          <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
-            <p>There are currently no Datasets.</p>
-            <ListGroup style={{ marginBottom: 0 }}>
-              <ListGroupItem key="attachmentdropzone" disabled>
-                <AttachmentDropzone
-                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
-                />
-              </ListGroupItem>
-            </ListGroup>
-            {this.addButton()}
-          </Well>
-        </div>
-      )
     }
+    return (
+      <div>
+        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
+          <p>There are currently no Datasets.</p>
+          <ListGroup style={{ marginBottom: 0 }}>
+            <ListGroupItem key="attachmentdropzone" disabled>
+              <AttachmentDropzone
+                handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
+              />
+            </ListGroupItem>
+          </ListGroup>
+          {this.addButton()}
+        </Well>
+      </div>
+    );
   }
 }
+
+ContainerDatasets.propTypes = {
+  container: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+ContainerDatasets.defaultProps = {
+  readOnly: false,
+  disabled: false,
+};
diff --git a/app/packs/src/fetchers/AttachmentFetcher.js b/app/packs/src/fetchers/AttachmentFetcher.js
index d63372a74..da7a0a311 100644
--- a/app/packs/src/fetchers/AttachmentFetcher.js
+++ b/app/packs/src/fetchers/AttachmentFetcher.js
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import 'whatwg-fetch';
 import { decamelizeKeys } from 'humps';
 
@@ -20,9 +21,9 @@ export default class AttachmentFetcher {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => response.blob())
-      .then(blob => ({ type: blob.type, data: URL.createObjectURL(blob) }))
-      .catch(errorMessage => {
+      .then((response) => response.blob())
+      .then((blob) => ({ type: blob.type, data: URL.createObjectURL(blob) }))
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
@@ -33,29 +34,25 @@ export default class AttachmentFetcher {
       annotated: params.annotated,
     });
 
-    return fetch('/api/v1/attachments/image/-1?' + urlParams, {
+    return fetch(`/api/v1/attachments/image/-1?${urlParams}`, {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => response.blob())
-      .then(blob => ({ type: blob.type, data: URL.createObjectURL(blob) }))
-      .catch(errorMessage => {
+      .then((response) => response.blob())
+      .then((blob) => ({ type: blob.type, data: URL.createObjectURL(blob) }))
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
 
   static fetchThumbnail(params) {
-    let promise = fetch(`/api/v1/attachments/thumbnail/${params.id}`, {
+    const promise = fetch(`/api/v1/attachments/thumbnail/${params.id}`, {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return json;
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -63,7 +60,7 @@ export default class AttachmentFetcher {
   }
 
   static fetchThumbnails(ids) {
-    let promise = fetch('/api/v1/attachments/thumbnails/', {
+    const promise = fetch('/api/v1/attachments/thumbnails/', {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
@@ -72,13 +69,9 @@ export default class AttachmentFetcher {
       },
       body: JSON.stringify({ ids }),
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return json;
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -86,7 +79,7 @@ export default class AttachmentFetcher {
   }
 
   static fetchFiles(ids) {
-    let promise = fetch('/api/v1/attachments/files/', {
+    const promise = fetch('/api/v1/attachments/files/', {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
@@ -95,13 +88,9 @@ export default class AttachmentFetcher {
       },
       body: JSON.stringify({ ids }),
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return json;
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -115,18 +104,14 @@ export default class AttachmentFetcher {
     data.append('molfile', mol);
     data.append('mass', mass);
 
-    let promise = fetch('/api/v1/chemspectra/file/convert', {
+    const promise = fetch('/api/v1/chemspectra/file/convert', {
       credentials: 'same-origin',
       method: 'POST',
       body: data,
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return json;
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -141,11 +126,11 @@ export default class AttachmentFetcher {
   }
 
   static filterAllAttachments(files, containers) {
-    containers.forEach(container => {
+    containers.forEach((container) => {
       const tmpArray = (container.attachments || [])
-        .filter(a => a.is_new)
-        .map(a => fileFromAttachment(a, container.id));
-      files.push.apply(files, tmpArray);
+        .filter((a) => a.is_new)
+        .map((a) => fileFromAttachment(a, container.id));
+      files.push(...tmpArray);
 
       if (container.children && container.children.length > 0) {
         this.filterAllAttachments(files, container.children);
@@ -155,173 +140,165 @@ export default class AttachmentFetcher {
 
   static updateAttachables(files, attachableType, attachableId, dels) {
     const data = new FormData();
-    files.forEach(file => {
+    files.forEach((file) => {
       data.append('attfilesIdentifier[]', file.id);
       data.append('files[]', file.file, file.name);
     });
     data.append('attachable_type', attachableType);
     data.append('attachable_id', attachableId);
-    
-    dels.forEach(f => {
+
+    dels.forEach((f) => {
       data.append('del_files[]', f.id);
     });
-    return () =>
-      fetch('/api/v1/attachable/update_attachments_attachable', {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data,
-      }).then(response => {
-        if (response.ok === false) {
-          let msg = 'Files uploading failed: ';
-          if (response.status === 413) {
-            msg += 'File size limit exceeded.';
-          } else {
-            msg += response.statusText;
-          }
-          NotificationActions.add({
-            message: msg,
-            level: 'error',
-            position: 'tc',
-          });
+    return () => fetch('/api/v1/attachable/update_attachments_attachable', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data,
+    }).then((response) => {
+      if (response.ok === false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status === 413) {
+          msg += 'File size limit exceeded.';
+        } else {
+          msg += response.statusText;
         }
-      });
+        NotificationActions.add({
+          message: msg,
+          level: 'error',
+          position: 'tc',
+        });
+      }
+    });
   }
 
   static uploadToInbox(attachments) {
     const data = new FormData();
     const files = attachments
-      .filter(f => f.is_new)
-      .map(f => fileFromAttachment(f, null));
-    files.forEach(file => {
+      .filter((f) => f.is_new)
+      .map((f) => fileFromAttachment(f, null));
+    files.forEach((file) => {
       data.append(file.id || file.name, file);
     });
-    return () =>
-      fetch('/api/v1/attachments/upload_to_inbox', {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data,
-      }).then(response => {
-        if (response.ok === false) {
-          let msg = 'Files uploading to Inbox failed: ';
-          if (response.status === 413) {
-            msg += 'File size limit exceeded.';
-          } else {
-            msg += response.statusText;
-          }
-          NotificationActions.add({
-            message: msg,
-            level: 'error',
-          });
+    return () => fetch('/api/v1/attachments/upload_to_inbox', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data,
+    }).then((response) => {
+      if (response.ok === false) {
+        let msg = 'Files uploading to Inbox failed: ';
+        if (response.status === 413) {
+          msg += 'File size limit exceeded.';
+        } else {
+          msg += response.statusText;
         }
-      });
+        NotificationActions.add({
+          message: msg,
+          level: 'error',
+        });
+      }
+    });
   }
 
   static uploadFiles(files) {
     const data = new FormData();
-    files.forEach(file => {
+    files.forEach((file) => {
       data.append(file.id || file.name, file);
     });
-    return () =>
-      fetch('/api/v1/attachments/upload_dataset_attachments', {
-        credentials: 'same-origin',
-        contentType: 'application/json',
-        method: 'post',
-        body: data,
-      })
-        .then(response => {
-          return response.json();
-        })
-        .then(json => {
-          for (let i = 0; i < json.error_messages.length; i++) {
-            NotificationActions.add({
-              message: json.error_messages[i],
-              level: 'error',
-            });
-          }
-        });
+    return () => fetch('/api/v1/attachments/upload_dataset_attachments', {
+      credentials: 'same-origin',
+      contentType: 'application/json',
+      method: 'post',
+      body: data,
+    })
+      .then((response) => response.json())
+      .then((json) => {
+        for (let i = 0; i < json.error_messages.length; i += 1) {
+          NotificationActions.add({
+            message: json.error_messages[i],
+            level: 'error',
+          });
+        }
+      });
   }
 
   static uploadCompleted(filename, key, checksum) {
-    return () =>
-      fetch('/api/v1/attachments/upload_chunk_complete', {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          filename: filename,
-          key: key,
-          checksum: checksum,
-        }),
-      })
-        .then(response => response.json())
-        .then(response => {
-          LoadingActions.stopLoadingWithProgress(filename);
-          if (response.ok == false) {
-            let msg = 'Files uploading failed: ';
-            if (response.status == 413) {
-              msg += 'File size limit exceeded.';
-            } else {
-              msg += response.statusText;
-            }
+    return () => fetch('/api/v1/attachments/upload_chunk_complete', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        filename,
+        key,
+        checksum,
+      }),
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        LoadingActions.stopLoadingWithProgress(filename);
+        if (response.ok === false) {
+          let msg = 'Files uploading failed: ';
+          if (response.status === 413) {
+            msg += 'File size limit exceeded.';
+          } else {
+            msg += response.statusText;
+          }
 
+          NotificationActions.add({
+            message: msg,
+            level: 'error',
+          });
+        } else if (response.error_messages) {
+          for (let i = 0; i < response.error_messages.length; i += 1) {
             NotificationActions.add({
-              message: msg,
+              message: response.error_messages[i],
               level: 'error',
             });
-          } else if (response.error_messages) {
-            for (let i = 0; i < response.error_messages.length; i++) {
-              NotificationActions.add({
-                message: response.error_messages[i],
-                level: 'error',
-              });
-            }
           }
-        });
+        }
+      });
   }
 
   static uploadChunk(chunk, counter, key, progress, filename) {
-    let body = { file: chunk, counter: counter, key: key };
+    const body = { file: chunk, counter, key };
     const formData = new FormData();
-    for (const name in body) {
+    Object.keys(body).forEach((name) => {
       formData.append(name, body[name]);
-    }
-    return () =>
-      fetch('/api/v1/attachments/upload_chunk', {
-        credentials: 'same-origin',
-        method: 'post',
-        body: formData,
-      })
-        .then(response => response.json())
-        .then(response => {
-          LoadingActions.updateLoadingProgress(filename, progress);
-          if (response.ok == false) {
-            const msg = `Chunk uploading failed: ${response.statusText}`;
-            NotificationActions.add({
-              message: msg,
-              level: 'error',
-            });
-          }
-        });
+    });
+    return () => fetch('/api/v1/attachments/upload_chunk', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: formData,
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        LoadingActions.updateLoadingProgress(filename, progress);
+        if (response.ok === false) {
+          const msg = `Chunk uploading failed: ${response.statusText}`;
+          NotificationActions.add({
+            message: msg,
+            level: 'error',
+          });
+        }
+      });
   }
 
   static async uploadFile(file) {
     LoadingActions.startLoadingWithProgress(file.name);
     const chunkSize = 100 * 1024 * 1024;
-    const chunksCount =
-      file.size % chunkSize == 0
-        ? file.size / chunkSize
-        : Math.floor(file.size / chunkSize) + 1;
+    const chunksCount = file.size % chunkSize === 0
+      ? file.size / chunkSize
+      : Math.floor(file.size / chunkSize) + 1;
     let beginingOfTheChunk = 0;
     let endOfTheChunk = chunkSize;
-    let tasks = [];
+    const tasks = [];
     const key = file.id;
-    let spark = new SparkMD5.ArrayBuffer();
-    let totalStep = chunksCount + 1;
-    for (let counter = 1; counter <= chunksCount; counter++) {
-      let chunk = file.slice(beginingOfTheChunk, endOfTheChunk);
+    const spark = new SparkMD5.ArrayBuffer();
+    const totalStep = chunksCount + 1;
+    for (let counter = 1; counter <= chunksCount; counter += 1) {
+      const chunk = file.slice(beginingOfTheChunk, endOfTheChunk);
       tasks.push(
         this.uploadChunk(chunk, counter, key, counter / totalStep, file.name)()
       );
@@ -330,17 +307,15 @@ export default class AttachmentFetcher {
       endOfTheChunk += chunkSize;
     }
 
-    let checksum = spark.end();
-    return Promise.all(tasks).then(() => {
-      return this.uploadCompleted(file.name, key, checksum)();
-    });
+    const checksum = spark.end();
+    return Promise.all(tasks).then(() => this.uploadCompleted(file.name, key, checksum)());
   }
 
   static getFileContent(file) {
-    let promise = new Promise(function (resolve, reject) {
-      var reader = new FileReader();
+    const promise = new Promise((resolve) => {
+      const reader = new FileReader();
       reader.onload = function (event) {
-        let buffer = new Uint8Array(event.target.result);
+        const buffer = new Uint8Array(event.target.result);
         resolve(buffer);
       };
 
@@ -351,7 +326,7 @@ export default class AttachmentFetcher {
   }
 
   static deleteAttachment(params) {
-    let promise = fetch(`/api/v1/attachments/${params.id}`, {
+    const promise = fetch(`/api/v1/attachments/${params.id}`, {
       credentials: 'same-origin',
       method: 'DELETE',
       headers: {
@@ -359,13 +334,9 @@ export default class AttachmentFetcher {
         'Content-Type': 'application/json',
       },
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return new Attachment(json.attachment);
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => new Attachment(json.attachment))
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -373,7 +344,7 @@ export default class AttachmentFetcher {
   }
 
   static deleteContainerLink(params) {
-    let promise = fetch(`/api/v1/attachments/link/${params.id}`, {
+    const promise = fetch(`/api/v1/attachments/link/${params.id}`, {
       credentials: 'same-origin',
       method: 'DELETE',
       headers: {
@@ -381,13 +352,9 @@ export default class AttachmentFetcher {
         'Content-Type': 'application/json',
       },
     })
-      .then(response => {
-        return response.json();
-      })
-      .then(json => {
-        return new Attachment(json.attachment);
-      })
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => new Attachment(json.attachment))
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -400,28 +367,28 @@ export default class AttachmentFetcher {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => {
+      .then((response) => {
         const disposition = response.headers.get('Content-Disposition');
         if (disposition && disposition.indexOf('attachment') !== -1) {
-          let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-          let matches = filenameRegex.exec(disposition);
+          const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+          const matches = filenameRegex.exec(disposition);
           if (matches != null && matches[1]) {
             file_name = matches[1].replace(/['"]/g, '');
           }
         }
         return response.blob();
       })
-      .then(blob => {
+      .then((blob) => {
         const a = document.createElement('a');
         a.style = 'display: none';
         document.body.appendChild(a);
-        let url = window.URL.createObjectURL(blob);
+        const url = window.URL.createObjectURL(blob);
         a.href = url;
         a.download = file_name;
         a.click();
         window.URL.revokeObjectURL(url);
       })
-      .catch(errorMessage => {
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
@@ -432,28 +399,28 @@ export default class AttachmentFetcher {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => {
+      .then((response) => {
         const disposition = response.headers.get('Content-Disposition');
         if (disposition && disposition.indexOf('attachment') !== -1) {
-          let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-          let matches = filenameRegex.exec(disposition);
+          const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+          const matches = filenameRegex.exec(disposition);
           if (matches != null && matches[1]) {
             file_name = matches[1].replace(/['"]/g, '');
           }
         }
         return response.blob();
       })
-      .then(blob => {
+      .then((blob) => {
         const a = document.createElement('a');
         a.style = 'display: none';
         document.body.appendChild(a);
-        let url = window.URL.createObjectURL(blob);
+        const url = window.URL.createObjectURL(blob);
         a.href = url;
         a.download = file_name;
         a.click();
         window.URL.revokeObjectURL(url);
       })
-      .catch(errorMessage => {
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
@@ -464,7 +431,7 @@ export default class AttachmentFetcher {
       credentials: 'same-origin',
       method: 'GET',
     })
-      .then(response => {
+      .then((response) => {
         const disposition = response.headers.get('Content-Disposition');
         if (disposition != null) {
           if (disposition && disposition.indexOf('attachment') !== -1) {
@@ -476,12 +443,11 @@ export default class AttachmentFetcher {
           }
 
           return response.blob();
-        } else {
-          NotificationActions.notifyExImportStatus('Analysis download', 204);
-          return null;
         }
+        NotificationActions.notifyExImportStatus('Analysis download', 204);
+        return null;
       })
-      .then(blob => {
+      .then((blob) => {
         if (blob && blob.type != null) {
           const a = document.createElement('a');
           a.style = 'display: none';
@@ -493,7 +459,7 @@ export default class AttachmentFetcher {
           window.URL.revokeObjectURL(url);
         }
       })
-      .catch(errorMessage => {
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
   }
@@ -544,7 +510,7 @@ export default class AttachmentFetcher {
       },
       body: JSON.stringify(decamelizeKeys(params)),
     })
-      .then(response => response.json())
+      .then((response) => response.json())
       .then((json) => {
         if (!isSaveCombined) {
           return json;
@@ -562,7 +528,7 @@ export default class AttachmentFetcher {
           console.log(errMsg); // eslint-disable-line
         });
       })
-      .catch(errorMessage => {
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -608,9 +574,9 @@ export default class AttachmentFetcher {
       },
       body: JSON.stringify(decamelizeKeys(params)),
     })
-      .then(response => response.json())
-      .then(json => json)
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -630,9 +596,9 @@ export default class AttachmentFetcher {
         generated: jcampIds.gene,
       }),
     })
-      .then(response => response.json())
-      .then(json => json)
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
@@ -652,9 +618,9 @@ export default class AttachmentFetcher {
         molfile: molfile,
       }),
     })
-      .then(response => response.json())
-      .then(json => json)
-      .catch(errorMessage => {
+      .then((response) => response.json())
+      .then((json) => json)
+      .catch((errorMessage) => {
         console.log(errorMessage);
       });
 
diff --git a/app/packs/src/fetchers/BaseFetcher.js b/app/packs/src/fetchers/BaseFetcher.js
index 5bc56803e..0596fe72c 100644
--- a/app/packs/src/fetchers/BaseFetcher.js
+++ b/app/packs/src/fetchers/BaseFetcher.js
@@ -79,9 +79,13 @@ export default class BaseFetcher {
         sort = filters.reaction?.sort || false;
         direction = filters.reaction?.direction || 'DESC';
 
-        sortColumn = group === 'none'
-            ? sort ? 'created_at' : 'updated_at'
-            : sort && group ? group : 'updated_at';
+        if (group === 'none') {
+          sortColumn = sort ? 'created_at' : 'updated_at';
+        } else if (sort && group) {
+          sortColumn = group;
+        } else {
+          sortColumn = 'updated_at';
+        }
 
         addQuery = `&sort_column=${sortColumn}&sort_direction=${direction}`;
 
@@ -144,4 +148,33 @@ export default class BaseFetcher {
 
     return Promise.all(updateTasks);
   }
+
+  static updateAnnotationsOfAttachments(element) {
+    const updateTasks = [];
+    element.attachments
+      .filter(((attach) => attach.hasOwnProperty('updatedAnnotation')))
+      .forEach((attach) => {
+        const data = new FormData();
+        data.append('updated_svg_string', attach.updatedAnnotation);
+        updateTasks.push(fetch(`/api/v1/attachments/${attach.id}/annotation`, {
+          credentials: 'same-origin',
+          method: 'post',
+          body: data
+        })
+          .catch((errorMessage) => {
+            console.log(errorMessage);
+          }));
+      });
+
+    return Promise.all(updateTasks);
+  }
+
+  static updateAnnotations(element) {
+    return Promise.all(
+      [
+        BaseFetcher.updateAnnotationsOfAttachments(element),
+        BaseFetcher.updateAnnotationsInContainer(element, [])
+      ]
+    );
+  }
 }
diff --git a/app/packs/src/fetchers/ReactionsFetcher.js b/app/packs/src/fetchers/ReactionsFetcher.js
index cd3c98d63..a3a23e282 100644
--- a/app/packs/src/fetchers/ReactionsFetcher.js
+++ b/app/packs/src/fetchers/ReactionsFetcher.js
@@ -7,7 +7,7 @@ import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import Literature from 'src/models/Literature';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
 import defaultAnalysisPublish from 'src/components/utils/defaultAnalysisPublish';
-import ResearchPlansFetcher from './ResearchPlansFetcher';
+import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
 
 // TODO: Extract common base functionality into BaseFetcher
 export default class ReactionsFetcher {
@@ -15,12 +15,12 @@ export default class ReactionsFetcher {
     try {
       const response = await fetch(`/api/v1/reactions/${id}.json`, {
         credentials: 'same-origin'
-      }).then(response => response.json())
+      }).then((response) => response.json())
         .then((json) => {
-          if (json.hasOwnProperty("reaction")) {
+          if (json.hasOwnProperty('reaction')) {
             const reaction = new Reaction(json.reaction);
             if (json.literatures && json.literatures.length > 0) {
-              const tliteratures = json.literatures.map(literature => new Literature(literature));
+              const tliteratures = json.literatures.map((literature) => new Literature(literature));
               const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
               reaction.literatures = lits;
             }
@@ -41,7 +41,7 @@ export default class ReactionsFetcher {
           console.log(errorMessage);
         });
       const researchPlans = await ResearchPlansFetcher.fetchResearchPlansForElements(id, response.type);
-      response['research_plans'] = researchPlans;
+      response.research_plans = researchPlans;
       return response;
     } catch (error) {
       console.error(error);
@@ -59,7 +59,7 @@ export default class ReactionsFetcher {
         credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' }
       }
-    ).then((response) => response.json()).catch(errorMessage => console.log(errorMessage))
+    ).then((response) => response.json()).catch((errorMessage) => console.log(errorMessage));
   }
 
   static create(reaction, method = 'post') {
@@ -80,28 +80,26 @@ export default class ReactionsFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(newReaction.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(newReaction, json.reaction.id, 'Reaction')
-      .then(()=> ReactionsFetcher.updateAnnotationsInReaction(newReaction))
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(newReaction, json.reaction.id, 'Reaction')
+        .then(() => ReactionsFetcher.updateAnnotationsInReaction(newReaction))
         .then(() => this.fetchById(json.reaction.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
+        console.log(errorMessage);
+      });
 
     if (allFiles.length > 0) {
-      let tasks = [];
-      allFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
+      const tasks = [];
+      allFiles.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
   }
 
-  static updateAnnotationsInReaction(reaction){
-     const tasks=[];
-     reaction.products.forEach( e =>  tasks.push(BaseFetcher.updateAnnotationsInContainer(e)));
-     return Promise.all(tasks);
+  static updateAnnotationsInReaction(reaction) {
+    const tasks = [];
+    reaction.products.forEach((e) => tasks.push(BaseFetcher.updateAnnotationsInContainer(e)));
+    return Promise.all(tasks);
   }
 
   static update(reaction) {
diff --git a/app/packs/src/fetchers/ResearchPlansFetcher.js b/app/packs/src/fetchers/ResearchPlansFetcher.js
index 752826049..e012633b7 100644
--- a/app/packs/src/fetchers/ResearchPlansFetcher.js
+++ b/app/packs/src/fetchers/ResearchPlansFetcher.js
@@ -75,7 +75,7 @@ export default class ResearchPlansFetcher {
         json.research_plan.id,
         researchPlan.getMarkedAsDeletedAttachments()
       )().then(() => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
-        .then(() => ResearchPlansFetcher.updateAnnotations(researchPlan))
+        .then(() => BaseFetcher.updateAnnotations(researchPlan))
         .then(() => this.fetchById(researchPlan.id))))
       .catch((errorMessage) => { console.log(errorMessage); });
 
@@ -267,35 +267,6 @@ export default class ResearchPlansFetcher {
       }).catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  static updateAnnotations(researchPlan) {
-    return Promise.all(
-      [
-        ResearchPlansFetcher.updateAnnotationsOfAttachments(researchPlan),
-        BaseFetcher.updateAnnotationsInContainer(researchPlan, [])
-      ]
-    );
-  }
-
-  static updateAnnotationsOfAttachments(researchPlan) {
-    const updateTasks = [];
-    researchPlan.attachments
-      .filter(((attach) => attach.hasOwnProperty('updatedAnnotation')))
-      .forEach((attach) => {
-        const data = new FormData();
-        data.append('updated_svg_string', attach.updatedAnnotation);
-        updateTasks.push(fetch(`/api/v1/attachments/${attach.id}/annotation`, {
-          credentials: 'same-origin',
-          method: 'post',
-          body: data
-        })
-          .catch((errorMessage) => {
-            console.log(errorMessage);
-          }));
-      });
-
-    return Promise.all(updateTasks);
-  }
-
   static fetchResearchPlansForElements(id, element) {
     return fetch(`/api/v1/research_plans/linked?id=${id}&element=${element}`, {
       credentials: 'same-origin',
diff --git a/app/packs/src/fetchers/SamplesFetcher.js b/app/packs/src/fetchers/SamplesFetcher.js
index d5d13dfb8..f61f7a65c 100644
--- a/app/packs/src/fetchers/SamplesFetcher.js
+++ b/app/packs/src/fetchers/SamplesFetcher.js
@@ -15,7 +15,7 @@ export default class SamplesFetcher {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
@@ -27,22 +27,18 @@ export default class SamplesFetcher {
         },
         limit: params.limit
       })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json.samples.map((s) => new Sample(s));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
+    }).then((response) => response.json())
+      .then((json) => json.samples.map((s) => new Sample(s)))
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
   }
 
   static fetchById(id) {
-    let promise = fetch('/api/v1/samples/' + id + '.json', {
+    const promise = fetch(`/api/v1/samples/${id}.json`, {
       credentials: 'same-origin'
     })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
+      .then((response) => response.json()).then((json) => {
         const rSample = new Sample(json.sample);
         if (json.error) {
           rSample.id = `${id}:error:Sample ${id} is not accessible!`;
@@ -55,8 +51,8 @@ export default class SamplesFetcher {
   }
 
   static fetchByCollectionId(id, queryParams = {}, isSync = false, moleculeSort = false) {
-    queryParams.moleculeSort = moleculeSort;
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'samples', Sample);
+    const updatedQueryParams = { ...queryParams, moleculeSort };
+    return BaseFetcher.fetchByCollectionId(id, updatedQueryParams, isSync, 'samples', Sample);
   }
 
   static findByShortLabel(shortLabel) {
@@ -66,7 +62,7 @@ export default class SamplesFetcher {
         credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' }
       }
-    ).then((response) => response.json()).catch(errorMessage => console.log(errorMessage))
+    ).then((response) => response.json()).catch((errorMessage) => console.log(errorMessage));
   }
 
   static update(s) {
@@ -80,19 +76,17 @@ export default class SamplesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
-      .then(() => BaseFetcher.updateAnnotationsInContainer(sample))
-      .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+        .then(() => BaseFetcher.updateAnnotationsInContainer(sample))
+        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
+        console.log(errorMessage);
       });
 
     if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
+      const tasks = [];
+      files.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
@@ -109,24 +103,22 @@ export default class SamplesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
         .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file)));
-      return Promise.all(tasks).then(() => {
-        return promise();
+        console.log(errorMessage);
       });
+    if (files.length > 0) {
+      const tasks = [];
+      files.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file)));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
   }
 
   static splitAsSubsamples(params) {
-    let promise = fetch('/api/v1/samples/subsamples/', {
+    const promise = fetch('/api/v1/samples/subsamples/', {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
@@ -143,11 +135,7 @@ export default class SamplesFetcher {
           currentCollectionId: params.currentCollection.id
         }
       })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
+    }).then((response) => response.json()).then((json) => json).catch((errorMessage) => {
       console.log(errorMessage);
     });
 
diff --git a/app/packs/src/fetchers/WellplatesFetcher.js b/app/packs/src/fetchers/WellplatesFetcher.js
index a7e37ed1b..2884362e4 100644
--- a/app/packs/src/fetchers/WellplatesFetcher.js
+++ b/app/packs/src/fetchers/WellplatesFetcher.js
@@ -62,7 +62,7 @@ export default class WellplatesFetcher {
       }
       return AttachmentFetcher.updateAttachables(newFiles, 'Wellplate', json.wellplate.id, delFiles)();
     })
-      .then(() => BaseFetcher.updateAnnotationsInContainer(wellplate))
+      .then(() => BaseFetcher.updateAnnotations(wellplate))
       .then(() => WellplatesFetcher.fetchById(wellplate.id))
       .catch((errorMessage) => {
         console.log(errorMessage);
@@ -89,16 +89,16 @@ export default class WellplatesFetcher {
       },
       body: JSON.stringify(wellplate.serialize())
     })
-    .then((response) => response.json())
-    .then((json) => {
-      if (files.length <= 0) {
-        return new Wellplate(json.wellplate);
-      }
-      return AttachmentFetcher.updateAttachables(files, 'Wellplate', json.wellplate.id, [])()
-        .then(() => new Wellplate(json.wellplate));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
+      .then((response) => response.json())
+      .then((json) => {
+        if (files.length <= 0) {
+          return new Wellplate(json.wellplate);
+        }
+        return AttachmentFetcher.updateAttachables(files, 'Wellplate', json.wellplate.id, [])()
+          .then(() => new Wellplate(json.wellplate));
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
 
     if (containerFiles.length > 0) {
       const tasks = [];
diff --git a/app/packs/src/models/Wellplate.js b/app/packs/src/models/Wellplate.js
index b99e1b8c3..4aa86c2c2 100644
--- a/app/packs/src/models/Wellplate.js
+++ b/app/packs/src/models/Wellplate.js
@@ -1,6 +1,8 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-underscore-dangle */
 import Element from 'src/models/Element';
 import Well from 'src/models/Well';
-import Container from 'src/models/Container.js';
+import Container from 'src/models/Container';
 import Segment from 'src/models/Segment';
 
 export default class Wellplate extends Element {
@@ -13,7 +15,7 @@ export default class Wellplate extends Element {
   static buildEmpty(collection_id) {
     return new Wellplate(
       {
-        collection_id: collection_id,
+        collection_id,
         type: 'wellplate',
         name: 'New Wellplate',
         size: 96,
@@ -24,35 +26,31 @@ export default class Wellplate extends Element {
         segments: [],
         attachments: []
       }
-    )
+    );
   }
 
   static buildFromSamplesAndCollectionId(clipboardSamples, collection_id) {
-    let samples = clipboardSamples.map(sample => {
-      return sample.buildChild();
-    });
+    const samples = clipboardSamples.map((sample) => sample.buildChild());
 
-    let wells = samples.map(sample => {
-      return new Well({
-        sample: sample,
-        readouts: []
-      });
-    })
+    const wells = samples.map((sample) => new Well({
+      sample,
+      readouts: []
+    }));
 
     return new Wellplate(
       {
-        collection_id: collection_id,
+        collection_id,
         type: 'wellplate',
         name: 'New Wellplate',
         size: 96,
         description: Wellplate.quillDefault(),
-        wells: wells,
+        wells,
         readout_titles: [],
         container: Container.init(),
         segments: [],
         attachments: [],
       }
-    )
+    );
   }
 
   get name() {
@@ -72,15 +70,15 @@ export default class Wellplate extends Element {
   }
 
   get wells() {
-    return this._wells
+    return this._wells;
   }
 
   set wells(wells) {
-    this._wells = wells.map(w => new Well(w));
+    this._wells = wells.map((w) => new Well(w));
   }
 
   set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+    this._segments = (segments && segments.map((s) => new Segment(s))) || [];
   }
 
   get segments() {
@@ -92,11 +90,11 @@ export default class Wellplate extends Element {
       name: this.name,
       size: this.size,
       description: this.description,
-      wells: this.wells.map(w => w.serialize()),
+      wells: this.wells.map((w) => w.serialize()),
       readout_titles: this.readout_titles,
       container: this.container,
       attachments: this.attachments,
-      segments: this.segments.map(s => s.serialize())
+      segments: this.segments.map((s) => s.serialize())
     });
   }
 
@@ -127,7 +125,7 @@ export default class Wellplate extends Element {
   }
 
   title() {
-    const short_label = this.short_label ? this.short_label : ''
-    return this.name ? `${short_label} ${this.name}` : short_label
+    const short_label = this.short_label ? this.short_label : '';
+    return this.name ? `${short_label} ${this.name}` : short_label;
   }
 }
diff --git a/spec/api/chemotion/attachment_api_spec.rb b/spec/api/chemotion/attachment_api_spec.rb
index 1c80bb45d..0545c3cc4 100644
--- a/spec/api/chemotion/attachment_api_spec.rb
+++ b/spec/api/chemotion/attachment_api_spec.rb
@@ -23,6 +23,8 @@
         'identifier' => attachment.identifier,
         'thumb' => attachment.thumb,
         'thumbnail' => attachment.thumb ? Base64.encode64(attachment.read_thumbnail) : nil,
+        'created_at' => kind_of(String),
+        'updated_at' => kind_of(String),
       },
     }
   end
@@ -68,7 +70,7 @@
       end
 
       it 'returns the deleted attachment' do
-        expect(parsed_json_response).to eq(expected_response)
+        expect(parsed_json_response).to include(expected_response)
       end
 
       it 'deletes the attachment on database', :enable_usecases_attachments_delete do
@@ -117,7 +119,7 @@
       end
 
       it 'returns the deleted attachment' do
-        expect(parsed_json_response).to eq(expected_response)
+        expect(parsed_json_response).to include(expected_response)
       end
 
       it 'unlinks the attachment from container', :enable_usecases_attachments_unlink do
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
index 718d52ca3..fa9a772da 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
@@ -21,8 +21,8 @@ describe('ImageAnnotationEditButton', () => {
 
       it('button is rendered but disabled', () => {
         expect(wrapper.html())
-          .toEqual('<span class=""><button disabled="" style="pointer-events:none" type="button" '
-           + 'class="btn btn-xs btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i></button></span>');
+          .toEqual('<span><button disabled="" type="button" '
+           + 'class="btn btn-xs btn-warning"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></span>');
       });
     });
 
@@ -32,8 +32,8 @@ describe('ImageAnnotationEditButton', () => {
 
       it('button is rendered and not disabled', () => {
         expect(wrapper.html())
-          .toEqual('<button type="button" class="btn btn-xs btn-warning">'
-           + '<i class="fa fa-pencil" aria-hidden="true"></i></button>');
+          .toEqual('<span><button type="button" class="btn btn-xs btn-warning">'
+           + '<i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></span>');
       });
     });
 
@@ -44,13 +44,5 @@ describe('ImageAnnotationEditButton', () => {
         expect(wrapper.html()).toEqual(null);
       });
     });
-
-    context('with not supported image type(gif)', () => {
-      const wrapper = shallow(<ImageAnnotationEditButton attachment={gifAttachment} parent={parent} />);
-
-      it('button is not rendered', () => {
-        expect(wrapper.html()).toEqual(null);
-      });
-    });
   });
 });

From 88062a8077d2bfcad7fcbaf838bfd67454f12412 Mon Sep 17 00:00:00 2001
From: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date: Thu, 21 Dec 2023 10:35:36 +0100
Subject: [PATCH 236/258] fix: attached research_plans in screens not being
 imported from collection

* fix: attached research_plans in screens not being imported from collection
wellplates not being imported from collection

* style: rubocop

---------

Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>
Refs: #1671
---
 lib/export/export_collections.rb | 31 ++++++++++++++++++++-----------
 lib/import/import_collections.rb | 12 +++++++-----
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index 75881c862..9721dfbbe 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -12,8 +12,8 @@ def initialize(export_id, collection_ids, format = 'zip', nested = false, gate =
       @nested = nested
       @gt = gate
 
-      @file_path = Rails.public_path.join( format, "#{export_id}.#{format}")
-      @schema_file_path = Rails.public_path.join( 'json', 'schema.json')
+      @file_path = Rails.public_path.join(format, "#{export_id}.#{format}")
+      @schema_file_path = Rails.public_path.join('json', 'schema.json')
 
       @data = {}
       @uuids = {}
@@ -122,8 +122,8 @@ def prepare_data
       collections.each do |collection|
         # fetch collection
         fetch_one(collection, {
-          'user_id' => 'User'
-        })
+                    'user_id' => 'User',
+                  })
         fetch_samples collection
         fetch_chemicals collection
         fetch_reactions collection
@@ -154,11 +154,11 @@ def fetch_samples(collection)
                    'fingerprint_id' => 'Fingerprint',
                    'created_by' => 'User',
                    'user_id' => 'User',
-      })
+                 })
       fetch_many(collection.collections_samples, {
                    'collection_id' => 'Collection',
                    'sample_id' => 'Sample',
-      })
+                 })
 
       # loop over samples and fetch sample properties
       samples.each do |sample|
@@ -167,11 +167,11 @@ def fetch_samples(collection)
         fetch_one(sample.molecule_name, {
                     'molecule_id' => 'Molecule',
                     'user_id' => 'User',
-        })
-
+                  })
         fetch_many(sample.residues, {
                      'sample_id' => 'Sample',
-        })
+                   })
+
         segment, @attachments = Labimotion::Export.fetch_segments(sample, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
@@ -227,7 +227,9 @@ def fetch_reactions(collection)
     end
 
     def fetch_elements(collection)
-      @segments, @attachments = Labimotion::Export.fetch_elements(collection, @segments, @attachments, method(:fetch_many), method(:fetch_one), method(:fetch_containers))
+      @segments, @attachments = Labimotion::Export.fetch_elements(collection, @segments, @attachments,
+                                                                  method(:fetch_many), method(:fetch_one),
+                                                                  method(:fetch_containers))
     end
 
     def fetch_wellplates(collection)
@@ -266,6 +268,11 @@ def fetch_screens(collection)
                      'wellplate_id' => 'Wellplate',
                    })
 
+        fetch_many(screen.research_plans_screens, {
+                     'screen_id' => 'Screen',
+                     'research_plan_id' => 'ResearchPlan',
+                   })
+
         segment, @attachments = Labimotion::Export.fetch_segments(screen, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
@@ -341,7 +348,9 @@ def fetch_containers(containable)
                         'containable_id' => containable_type,
                         'parent_id' => 'Container',
                       })
-            @datasets += Labimotion::Export.fetch_datasets(attachment_container.dataset, &method(:fetch_one) ) if attachment_container.dataset.present?
+            if attachment_container.dataset.present?
+              @datasets += Labimotion::Export.fetch_datasets(attachment_container.dataset, &method(:fetch_one))
+            end
             fetch_many(attachment_container.attachments, {
                          'attachable_id' => 'Container',
                          'created_by' => 'User',
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index fa0ed30c8..2afa3a32c 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -93,12 +93,12 @@ def import
         ## import_elemental_compositions if @gt == true
         import_reactions
         import_reactions_samples
- #       import_elements if @gt == false
- #       import_elements_samples if @gt == false
+        # import_elements if @gt == false
+        # import_elements_samples if @gt == false
         import_wellplates if @gt == false
         import_wells if @gt == false
-        import_screens if @gt == false
         import_research_plans if @gt == false
+        import_screens if @gt == false
         import_containers
         import_segments
         import_datasets
@@ -430,7 +430,6 @@ def import_reactions_samples
       end
     end
 
-
     def import_elements
       Labimotion::Import.import_elements(@data, @instances, @gt, @current_user_id, method(:fetch_many), &method(:update_instances!))
     end
@@ -473,7 +472,7 @@ def import_wells
           'additive',
         ).merge(
           wellplate: @instances.fetch('Wellplate').fetch(fields.fetch('wellplate_id')),
-          sample: @instances.fetch('Sample').fetch(fields.fetch('sample_id'), nil),
+          sample: @instances.fetch('Sample', nil)&.fetch(fields.fetch('sample_id'), nil),
         ))
 
         # add reaction to the @instances map
@@ -499,6 +498,9 @@ def import_screens
           wellplates: fetch_many(
             'Wellplate', 'ScreensWellplate', 'screen_id', 'wellplate_id', uuid
           ),
+          research_plans: fetch_many(
+            'ResearchPlan', 'ResearchPlansScreen', 'screen_id', 'research_plan_id', uuid
+          ),
         ))
 
         # create the root container like with samples

From df45111300b8f9d289e56a903659162331ed641b Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Thu, 4 Jan 2024 10:38:18 +0100
Subject: [PATCH 237/258] chore: bug fixes after rebase

---
 .eslintrc                                     |   8 +-
 .prettierrc                                   |  16 +++
 .vscode/settings.json                         |   3 +
 Gemfile                                       |   2 +-
 Gemfile.lock                                  |   4 +-
 app/api/chemotion/public_api.rb               |  17 ++-
 app/api/chemotion/repository_api.rb           |   5 +-
 app/api/chemotion/search_api.rb               |  61 ++++-----
 app/api/chemotion/sync_collection_api.rb      |  13 +-
 app/api/entities/attachment_entity.rb         |   4 +-
 app/api/entities/container_entity.rb          |   1 +
 app/api/entities/literature_entity.rb         |   1 +
 app/models/concerns/metadata_jsonld.rb        |  13 +-
 app/packs/src/apps/mydb/App.js                |  20 ++-
 .../apps/mydb/collections/CollectionTree.js   |   4 +-
 .../apps/mydb/elements/details/ViewSpectra.js |  18 +--
 .../literature/DetailsTabLiteratures.js       |  42 +++---
 .../elements/details/samples/SampleDetails.js |   3 -
 .../samples/propertiesTab/SampleForm.js       |  10 +-
 .../propertiesTab/SampleSolventGroup.js       |   8 +-
 .../src/components/chemrepo/BackSoonPage.js   |  23 ++++
 .../src/components/chemrepo/PublishCommon.js  |   4 +-
 .../chemrepo/PublishReactionModal.js          |   4 +-
 .../components/chemrepo/SubmissionCheck.js    |   2 +-
 .../components/chemrepo/core/ContactEmail.js  |  15 ++-
 app/packs/src/components/common/ImageModal.js |   5 +-
 .../container/ContainerDatasetField.js        |   8 +-
 .../container/ContainerDatasetModal.js        |   6 +-
 .../components/navigation/NavNewSession.js    |   2 +-
 .../src/components/navigation/RepoNavHead.js  |   9 +-
 app/packs/src/fetchers/LiteraturesFetcher.js  |   4 +-
 app/packs/src/fetchers/ReactionsFetcher.js    |   2 +-
 app/packs/src/libHome/NavHead.js              |   2 +-
 app/packs/src/models/Literature.js            |   2 +-
 .../src/repo/fetchers/LiteraturesFetcher.js   |   2 +-
 app/packs/src/repoHome/RepoAbout.js           | 125 ++++++++++++++----
 app/packs/src/repoHome/RepoCommon.js          |  52 +++-----
 .../src/repoHome/RepoContainerDatasets.js     |  10 +-
 app/packs/src/repoHome/RepoGenericHub.js      |   2 +-
 app/packs/src/repoHome/RepoGenericHubDesc.js  |  90 +++++++++----
 app/packs/src/repoHome/RepoHowTo.js           |   3 +-
 app/packs/src/repoHome/RepoNewsroom.js        |   3 +-
 app/packs/src/repoHome/RepoSampleDetails.js   |   2 +-
 app/packs/src/utilities/SpectraHelper.js      |   2 +-
 .../element_detail_level_calculator.rb        |   4 +-
 config/routes.rb                              |   3 +-
 lib/import/import_collections.rb              |   2 +-
 package.json                                  |   6 +-
 public/favicon.ico                            | Bin 4286 -> 16958 bytes
 yarn.lock                                     |  53 +++++++-
 50 files changed, 461 insertions(+), 239 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 app/packs/src/components/chemrepo/BackSoonPage.js

diff --git a/.eslintrc b/.eslintrc
index ae66d4ec9..86662690b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,7 +2,8 @@
   "parser": "@babel/eslint-parser",
   "plugins": [
     "react",
-    "no-relative-import-paths"
+    "no-relative-import-paths",
+    "prettier"
   ],
   "env": {
     "browser": true,
@@ -10,6 +11,8 @@
   },
   "extends": [
     "airbnb",
+    "prettier",
+    "plugin:prettier/recommended",
     "plugin:react/recommended"
   ],
   "rules": {
@@ -27,7 +30,8 @@
         "code": 120,
         "ignoreComments": true
       }
-    ]
+    ],
+    "prettier/prettier": "error"
   },
   "settings": {
     "import/resolver": {
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..421d28eff
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "singleArgumentParenthesis": false,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "arrowFunctionParentheses": "always",
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "options": {
+        "parentheses": "always"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4fb564aed..afa7d3d40 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,4 +21,7 @@
           "password": ""
         }
       ],
+      "prettier.singleQuote": true,
+      "prettier.jsxSingleQuote": true,
+      "editor.codeActionsOnSave": {},
 }
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
index 93baaf9b1..fec0996c0 100644
--- a/Gemfile
+++ b/Gemfile
@@ -59,7 +59,7 @@ gem 'kaminari'
 gem 'kaminari-grape'
 gem 'ketcherails', git: 'https://github.com/complat/ketcher-rails.git', branch: 'upgrade-to-rails-6'
 
-gem 'labimotion', '1.0.19'
+gem 'labimotion', '1.1.0'
 
 gem 'mimemagic', '0.3.10'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index a7bdfd375..7195dd110 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -446,7 +446,7 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    labimotion (1.0.19)
+    labimotion (1.1.0)
       rails (~> 6.1.7)
     latex-decode (0.4.0)
     launchy (2.5.0)
@@ -916,7 +916,7 @@ DEPENDENCIES
   kaminari
   kaminari-grape
   ketcherails!
-  labimotion (= 1.0.19)
+  labimotion (= 1.1.0)
   launchy
   listen
   memory_profiler
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 36901147b..42a6893a8 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -606,12 +606,15 @@ def query_embargo(name)
           if cids.include?(Collection.public_collection_id)
             molecule = sample.molecule if sample.class.name == 'Sample'
 
-            ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
-            ds_json[:dataset_doi] = dataset.full_doi
-            ds_json[:pub_id] = dataset.publication&.id
+            ## ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
+            ds_json = Entities::ContainerEntity.represent(dataset)
+            # ds_json[:dataset_doi] = dataset.full_doi
+            # ds_json[:pub_id] = dataset.publication&.id
 
             res = {
               dataset: ds_json,
+              isLogin: current_user.present?,
+              element: sample,
               sample_svg_file: sample.class.name == 'Sample' ? sample.sample_svg_file : sample.reaction_svg_file,
               molecule: {
                 sum_formular: molecule&.sum_formular,
@@ -875,7 +878,13 @@ def query_embargo(name)
       resource :published_statics do
         desc 'Return PUBLIC statics'
         get do
-          { published_statics: ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps') }
+          result = ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
+          published_statics = result.map do |row|
+            row.map do |key, value|
+              [key, value.is_a?(BigDecimal) ? value.to_i : value]
+            end.to_h
+          end
+          { published_statics: published_statics }
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 85b48fd08..54062d4b4 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -447,7 +447,7 @@ def add_submission_history(root)
                  else
                    Collection.where(ancestry: current_user.publication_embargo_collection.id)
                  end
-          es = Publication.where(element_type: 'Collection', element_id: cols.pluck(:id)).order("taggable_data->>'label' ASC") unless cols.empty?
+          es = Publication.where(element_type: 'Collection', element_id: cols.pluck(:id)).order(Arel.sql("taggable_data->>'label' ASC")) unless cols.empty?
         end
 
         { repository: es, current_user: { id: current_user.id, type: current_user.type } }
@@ -804,8 +804,9 @@ def save_comments(root, comment, checklist, reviewComments, action, his = true)
               review_history << next_node
               review['history'] = review_history
             else
+
               # is_leader = review.dig('reviewers')&.include?(current_user&.id)
-              if root.state == Publication::STATE_PENDING && action == Publication::STATE_REVIEWED # && (comment.present? || is_leader)
+              if root.state == Publication::STATE_PENDING && (action.nil? || action == Publication::STATE_REVIEWED)
                 next_node = { action: 'reviewing', type: 'reviewed', state: 'pending' }
                 review_history << next_node
                 review['history'] = review_history
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index 77c38667e..b09035ba6 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -183,8 +183,8 @@ def serialize_samples sample_ids, page, search_method, molecule_sort
 
       def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false)
         element_ids = elements.fetch(:element_ids, [])
-        reaction_ids = elements.fetch(:reactions, [])
-        sample_ids = elements.fetch(:sample_ids, [])
+        reaction_ids = elements.fetch(:reaction_ids, [0])
+        sample_ids = elements.fetch(:sample_ids, [0])
         samples_data = serialize_samples(sample_ids, page, search_by_method, molecule_sort)
         wellplates = elements.fetch(:wellplates, [])
         screen_ids = elements.fetch(:screen_ids, [])
@@ -199,7 +199,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
               SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
               FROM samples, publications pub
               WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                and samples.id IN (#{samples.join(',')})) s where rownum = 1
+                and samples.id IN (#{sample_ids.join(',')})) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
 
@@ -210,7 +210,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
               and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
               select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
             (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
-            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
+            (select published_at from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
             (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
           SQL
 
@@ -237,17 +237,18 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
             obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], true)
           end
 
-          filter_reactions = Reaction.where("reactions.id in (?)", reactions)
+          filter_reactions = Reaction.where("reactions.id in (?)", reaction_ids)
 
           embargo_rsql = <<~SQL
-            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, publications.published_at as published_at, publications.taggable_data,
             (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
             (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
             and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
             select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
           SQL
 
-          reaction_list = paginate(filter_reactions.joins(:publication).select(embargo_rsql).order('publications.published_at desc'))
+          ttl_reactions = filter_reactions.joins(:publication).select(embargo_rsql).order('publications.published_at desc')
+          reaction_list = paginate(ttl_reactions)
           reaction_entities = Entities::ReactionPublicationListEntity.represent(reaction_list, serializable: true)
           reaction_ids = reaction_entities.map { |e| e[:id] }
 
@@ -280,7 +281,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
             },
             publicReactions: {
               reactions: reaction_entities,
-              totalElements: reactions.size,
+              totalElements: ttl_reactions.size,
               page: page,
               perPage: page_size,
               ids: reaction_ids
@@ -498,24 +499,24 @@ def elements_by_scope(scope, collection_id = @c_id)
         when Sample
           elements[:sample_ids] = scope&.ids
           elements[:reaction_ids] = user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id).uniq
-          elements[:wellplate_ids] = user_wellplates.by_sample_ids(elements[:sample_ids]).uniq.pluck(:id)
-          elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
+          # elements[:wellplate_ids] = user_wellplates.by_sample_ids(elements[:sample_ids]).uniq.pluck(:id)
+          # elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
           elements[:element_ids] = user_elements.by_sample_ids(elements[:sample_ids]).pluck(:id).uniq
         when Reaction
           elements[:reaction_ids] = scope&.ids
           elements[:sample_ids] = user_samples.by_reaction_ids(elements[:reaction_ids]).pluck(:id).uniq
-          elements[:wellplate_ids] = user_wellplates.by_sample_ids(elements[:sample_ids]).uniq.pluck(:id)
-          elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
-        when Wellplate
-          elements[:wellplate_ids] = scope&.ids
-          elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
-          elements[:sample_ids] = user_samples.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
-          elements[:reaction_ids] = user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id).uniq
-        when Screen
-          elements[:screen_ids] = scope&.ids
-          elements[:wellplate_ids] = user_wellplates.by_screen_ids(elements[:screen_ids]).uniq.pluck(:id)
-          elements[:sample_ids] = user_samples.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
-          elements[:reaction_ids] = user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id)
+          # elements[:wellplate_ids] = user_wellplates.by_sample_ids(elements[:sample_ids]).uniq.pluck(:id)
+          # elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
+        # when Wellplate
+        #   elements[:wellplate_ids] = scope&.ids
+        #   elements[:screen_ids] = user_screens.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
+        #   elements[:sample_ids] = user_samples.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
+        #   elements[:reaction_ids] = user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id).uniq
+        # when Screen
+        #   elements[:screen_ids] = scope&.ids
+        #   elements[:wellplate_ids] = user_wellplates.by_screen_ids(elements[:screen_ids]).uniq.pluck(:id)
+        #   elements[:sample_ids] = user_samples.by_wellplate_ids(elements[:wellplate_ids]).uniq.pluck(:id)
+        #   elements[:reaction_ids] = user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id)
         when Labimotion::Element
           elements[:element_ids] = scope&.ids
           sids = Labimotion::ElementsSample.where(element_id: elements[:element_ids]).pluck(:sample_id)
@@ -528,15 +529,15 @@ def elements_by_scope(scope, collection_id = @c_id)
             user_reactions.by_sample_ids(elements[:sample_ids]).pluck(:id)
           ).uniq
 
-          elements[:wellplate_ids] = (
-            scope&.wellplates_ids +
-            user_wellplates.by_sample_ids(elements[:sample_ids]).pluck(:id)
-          ).uniq
+          # elements[:wellplate_ids] = (
+          #   scope&.wellplates_ids +
+          #   user_wellplates.by_sample_ids(elements[:sample_ids]).pluck(:id)
+          # ).uniq
 
-          elements[:screen_ids] = (
-            scope&.screens_ids +
-            user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
-          ).uniq
+          # elements[:screen_ids] = (
+          #   scope&.screens_ids +
+          #   user_screens.by_wellplate_ids(elements[:wellplate_ids]).pluck(:id)
+          # ).uniq
           elements[:element_ids] = (scope&.element_ids).uniq
         end
         elements
diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index f61cbd19c..ff918c45f 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -24,7 +24,8 @@ class SyncCollectionAPI < Grape::API
       namespace :publication do
         desc "Return the 'All' collection of the current user"
         get do
-          current_user.sync_published_collection
+          col = current_user.sync_published_collection
+          present col, with: Entities::SyncCollectionsUserEntity, root: 'sync_collections_user'
         end
       end
 
@@ -32,10 +33,11 @@ class SyncCollectionAPI < Grape::API
         desc "Return the 'All' collection of the current user"
         get do
           if User.reviewer_ids.include?(current_user.id)
-            current_user.sync_element_to_review_collection
+            col = current_user.sync_element_to_review_collection
           else
-            current_user.sync_reviewing_collection
+            col = current_user.sync_reviewing_collection
           end
+          present col, with: Entities::SyncCollectionsUserEntity, root: 'sync_collections_user'
         end
       end
 
@@ -115,10 +117,7 @@ class SyncCollectionAPI < Grape::API
                                SQL
                              ).as_json
 
-        col_tree.each do |obj|
-          child = collections.select { |dt| dt['ancestry'] == obj['id'].to_s }
-          obj[:children] = child if child.count.positive?
-        end
+        get_child.call(col_tree, collections)
         present col_tree, with: Entities::CollectionSyncEntity, root: 'syncCollections'
       end
 
diff --git a/app/api/entities/attachment_entity.rb b/app/api/entities/attachment_entity.rb
index b3c1ca24d..bd86144f7 100644
--- a/app/api/entities/attachment_entity.rb
+++ b/app/api/entities/attachment_entity.rb
@@ -7,7 +7,9 @@ class AttachmentEntity < ApplicationEntity
     expose_timestamps
 
     def thumbnail
-      object.thumb ? Base64.encode64(object.read_thumbnail) : nil
+      return nil unless object.thumb && object.read_thumbnail
+
+      Base64.encode64(object.read_thumbnail)
     end
   end
 end
diff --git a/app/api/entities/container_entity.rb b/app/api/entities/container_entity.rb
index d364ce486..bdaf8a309 100644
--- a/app/api/entities/container_entity.rb
+++ b/app/api/entities/container_entity.rb
@@ -17,6 +17,7 @@ class ContainerEntity < ApplicationEntity
     expose :children, using: 'Entities::ContainerEntity'
     expose :dataset, using: 'Labimotion::DatasetEntity'
     expose :dataset_doi
+    expose :pub_id
 
     def dataset_doi
       object.full_doi
diff --git a/app/api/entities/literature_entity.rb b/app/api/entities/literature_entity.rb
index 4c49ce2f3..ab6b630f2 100644
--- a/app/api/entities/literature_entity.rb
+++ b/app/api/entities/literature_entity.rb
@@ -17,6 +17,7 @@ class LiteratureEntity < ApplicationEntity
 
     # see Literature.with_user_info
     with_options(if: :with_user_info) do
+      expose! :element_type
       expose! :literal_id
       expose! :litype
       expose! :user_id
diff --git a/app/models/concerns/metadata_jsonld.rb b/app/models/concerns/metadata_jsonld.rb
index 4c2f5abe3..59f598b0d 100644
--- a/app/models/concerns/metadata_jsonld.rb
+++ b/app/models/concerns/metadata_jsonld.rb
@@ -274,7 +274,7 @@ def json_ld_analysis(pub = self, root = true)
   def json_ld_measurement_technique(pub = self)
     json = {}
     term_id = pub.element.extended_metadata['kind']&.split('|')&.first&.strip
-    res = Ontologies::TibService.load_term_info('CHMO', term_id)
+    res = tib_load_term_info('CHMO', term_id)
     data = (res.ok? && res.dig('_embedded', 'terms').length > 0 && res.dig('_embedded', 'terms').first) || {}
     return {} if data.blank?
 
@@ -390,4 +390,15 @@ def json_ld_moelcule_entity(element)
     json
   end
 
+  def tib_load_term_info(schema, term_id)
+    http_s = "https://" # Rails.env.test? && "http://" || "https://"
+    options = { :timeout => 10, :headers => {'Content-Type' => 'text/json'}  }
+    api = 'service.tib.eu/ts4tib/api/'
+    link = http_s + api + '/ontologies/' + schema + '/terms?obo_id=' + term_id
+    HTTParty.get(link, options)
+  rescue StandardError => e
+    Rails.logger.error ["API call", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
+    nil
+  end
+
 end
diff --git a/app/packs/src/apps/mydb/App.js b/app/packs/src/apps/mydb/App.js
index 2e298b34f..8a2dff041 100644
--- a/app/packs/src/apps/mydb/App.js
+++ b/app/packs/src/apps/mydb/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Col, Grid, Row } from 'react-bootstrap';
+import { Button, Col, Grid, Row } from 'react-bootstrap';
 import { FlowViewerModal } from 'chem-generic-ui';
 import CollectionManagement from 'src/apps/mydb/collections/CollectionManagement';
 import CollectionTree from 'src/apps/mydb/collections/CollectionTree';
@@ -149,10 +149,22 @@ class App extends Component {
       <Col className="small-col collec-tree">
         <CollectionTree />
         <div className="news-box">
-          <p>New to the Repository? Explore our <a href="https://chemotion.net/docs/repo/settings_preparation" target="_blank" rel="noreferrer">Preparation</a> & <a href="https://chemotion.net/docs/repo/workflow" target="_blank" rel="noreferrer">Workflow</a> </p>
+          <p>New to the Repository? Explore the <a href="https://chemotion.net/docs/repo/settings_preparation" target="_blank" rel="noreferrer">Preparation</a> & <a href="https://chemotion.net/docs/repo/workflow" target="_blank" rel="noreferrer">Workflow</a> guide.</p>
           <p>Guidelines: Discover <a href="https://chemotion.net/docs/repo/details_standards/reactions" target="_blank" rel="noreferrer">Details and Standards</a></p>
-          <p>Learn More: Visit <a href="https://chemotion.net/docs/repo/references" target="_blank" rel="noreferrer">here</a></p>
-          <ContactEmail />
+          <p>Learn More: Refer to our <a href="https://chemotion.net/docs/repo/references" target="_blank" rel="noreferrer">Documentation</a></p>
+          <div>
+            {'Questions? Contact us via '}
+            <Button bsSize="small" onClick={() => window.open('https://github.com/ComPlat/chemotion_REPO', '_blank')}>
+              <img
+                src="/images/repo/github-mark.svg"
+                className="pubchem-logo"
+                alt="Chemotion Repository at GitHub"
+                title="Chemotion Repository at GitHub"
+              />
+            </Button>
+            {' or '}
+            <ContactEmail label="" />
+          </div>
         </div>
       </Col>
     );
diff --git a/app/packs/src/apps/mydb/collections/CollectionTree.js b/app/packs/src/apps/mydb/collections/CollectionTree.js
index 8c73ad695..47f816bdd 100644
--- a/app/packs/src/apps/mydb/collections/CollectionTree.js
+++ b/app/packs/src/apps/mydb/collections/CollectionTree.js
@@ -201,9 +201,9 @@ export default class CollectionTree extends React.Component {
   }
 
   subtrees(roots, label, isRemote, visible = true) {
-
+    const { currentCollection } = UIStore.getState();
     const subtrees = roots && roots.map((root, index) => {
-      return <CollectionSubtree root={root} key={index} isRemote={isRemote} />
+      return <CollectionSubtree root={root} key={index} isRemote={isRemote} currentCollection={currentCollection} />
     });
 
     let subtreesVisible = visible ? "" : "none"
diff --git a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
index 496087587..155a5f544 100644
--- a/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
+++ b/app/packs/src/apps/mydb/elements/details/ViewSpectra.js
@@ -430,7 +430,7 @@ class ViewSpectra extends React.Component {
     const selectedIntegration = integrations[curveIdx];
     const { multiplicities } = multiplicity;
     const selectedMutiplicity = multiplicities[curveIdx];
-  
+
     const isSaveCombined = FN.isCyclicVoltaLayout(layout);
     const { spcInfos } = this.state;
     LoadingActions.start.defer();
@@ -443,7 +443,7 @@ class ViewSpectra extends React.Component {
       JSON.stringify(selectedIntegration),
       JSON.stringify(selectedMutiplicity),
       predict,
-      sample.can_update === true ? handleSubmit : this.updateROPredict,
+      handleSubmit,
       keepPred,
       waveLengthStr,
       cyclicvolta,
@@ -745,20 +745,6 @@ class ViewSpectra extends React.Component {
             maxTagCount={1}
             onChange={onSelectChange}
           />
-          <TreeSelect
-            treeData={options}
-            value={isShowMultiSelect ? arrSpcIdx : idx}
-            treeCheckable={isShowMultiSelect}
-            style={{ width: 500 }}
-            onChange={onSelectChange}
-          />
-          <TreeSelect
-            treeData={options}
-            value={isShowMultiSelect ? arrSpcIdx : idx}
-            treeCheckable={isShowMultiSelect}
-            style={{ width: 500 }}
-            maxTagCount={1}
-            onChange={onSelectChange} />
         </div>
         <Button
           bsStyle="danger"
diff --git a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
index d0521bb86..bc91b2870 100644
--- a/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
+++ b/app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js
@@ -137,19 +137,6 @@ export default class DetailsTabLiteratures extends Component {
       });
   }
 
-  handleTypeUpdate(updId, rType) {
-    const { element } = this.props;
-    if (!checkElementStatus(element)) { return; }
-    LoadingActions.start();
-    const params = {
-      element_id: element.id, element_type: element.type, id: updId, litype: rType
-    };
-    LiteraturesFetcher.updateReferenceType(params)
-      .then((literatures) => {
-        this.setState({ literatures, sortedIds: groupByCitation(literatures), sorting: 'literature_id' }, LoadingActions.stop());
-      });
-  }
-
   handleLiteratureRemove(literature) {
     const { element } = this.props;
     if (!checkElementStatus(element)) { return; }
@@ -247,18 +234,25 @@ export default class DetailsTabLiteratures extends Component {
       if (json.data && json.data.length > 0) {
         const data = json.data[0];
         const citation = new Cite(data);
-        this.setState((prevState) => ({
-          ...prevState,
-          literature: {
-            ...prevState.literature,
-            doi,
-            title: data.title || '',
-            year: (data && data.issued && data.issued['date-parts'][0]) || '',
-            refs: { citation, bibtex: citation.format('bibtex'), bibliography: json.format('bibliography') }
-          }
-        }));
+        // this.setState((prevState) => ({
+        //   ...prevState,
+        //   literature: new Literature({
+        //     ...prevState.literature,
+        //     doi,
+        //     title: data.title || '',
+        //     year: (data && data.issued && data.issued['date-parts'][0]) || '',
+        //     refs: { citation, bibtex: citation.format('bibtex'), bibliography: json.format('bibliography') }
+        //   })
+        // }));
         const { literature } = this.state;
-        this.handleLiteratureAdd(literature);
+        const newLiterature = new Literature({
+          ...literature,
+          doi,
+          title: data.title || '',
+          year: (data && data.issued && data.issued['date-parts'][0]) || '',
+          refs: { citation, bibtex: citation.format('bibtex'), bibliography: json.format('bibliography') }
+        });
+        this.handleLiteratureAdd(newLiterature);
       }
     }).catch((errorMessage) => {
       NotificationActions.add(notification(`unable to fetch metadata for this doi: ${doi}, error: ${errorMessage}`));
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 4d290fe0d..cfaf1b63f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -1185,15 +1185,12 @@ export default class SampleDetails extends React.Component {
           {decoupleCb}
           <div style={{ display: 'inline-block', marginLeft: '10px' }}>
             <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-            {colLabel}
             <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
-            <PubchemLabels element={sample} />
             <OrigElnTag element={sample} />
             <PublishedTag element={sample} fnUnseal={this.unseal} />
             <LabelPublication element={sample} />
           </div>
         </div>
-        <ShowUserLabels element={sample} />
       </div>
     );
   }
diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
index e2bb1e11e..4bf390081 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -129,7 +129,7 @@ export default class SampleForm extends React.Component {
   }
 
   drySolventCheckbox(sample) {
-    if (sample.can_update) {
+    if (permitOn(sample)) {
       return (
         <Checkbox
           checked={sample.dry_solvent}
@@ -365,10 +365,14 @@ export default class SampleForm extends React.Component {
   inputWithUnit(sample, field, label) {
     const value = sample.xref[field.split('xref_')[1]] ? sample.xref[field.split('xref_')[1]].value : '';
     const unit = sample.xref[field.split('xref_')[1]] ? sample.xref[field.split('xref_')[1]].unit : '°C';
+    const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
+    const isDisabled = !permitOn(sample);
+    const polyDisabled = isPolymer || isDisabled;
+
     return (
       <NumericInputUnit
         field="flash_point"
-        inputDisabled={false}
+        inputDisabled={polyDisabled}
         onInputChange={
           (newValue, newUnit) => this.handleFieldChanged(field, newValue, newUnit)
         }
@@ -614,7 +618,7 @@ export default class SampleForm extends React.Component {
 
   additionalProperties(sample) {
     const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
-    const isDisabled = !sample.can_update;
+    const isDisabled = !permitOn(sample);
     const polyDisabled = isPolymer || isDisabled;
     const minPadding = { padding: '4px 4px 4px 4px' };
 
diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleSolventGroup.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleSolventGroup.js
index 2b8533045..007008bbb 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleSolventGroup.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleSolventGroup.js
@@ -10,7 +10,10 @@ import MoleculesFetcher from 'src/fetchers/MoleculesFetcher';
 import { ionic_liquids } from 'src/components/staticDropdownOptions/ionic_liquids';
 import NotificationActions from 'src/stores/alt/actions/NotificationActions';
 
-function SolventDetails({ solvent, deleteSolvent, onChangeSolvent }) {
+// For REPO
+import { permitOn } from 'src/components/common/uis';
+
+function SolventDetails({ sample, solvent, deleteSolvent, onChangeSolvent }) {
   if (!solvent) {
     return null;
   }
@@ -43,6 +46,7 @@ function SolventDetails({ solvent, deleteSolvent, onChangeSolvent }) {
           name="solvent_ratio"
           value={solvent.ratio}
           onChange={changeRatio}
+          disabled={!permitOn(sample)}
         />
       </td>
       <td>
@@ -78,6 +82,7 @@ function SampleSolventGroup({
       contents.push((
         <SolventDetails
           key={key}
+          sample={sample}
           solvent={solv}
           deleteSolvent={deleteSolvent}
           onChangeSolvent={onChangeSolvent}
@@ -125,6 +130,7 @@ function SampleSolventGroup({
           <ListGroupItem style={minPadding}>
             <div className="properties-form">
               <VirtualizedSelect
+                disabled={!permitOn(sample)}
                 name="default solvents"
                 multi={false}
                 options={solventOptions}
diff --git a/app/packs/src/components/chemrepo/BackSoonPage.js b/app/packs/src/components/chemrepo/BackSoonPage.js
new file mode 100644
index 000000000..af4009491
--- /dev/null
+++ b/app/packs/src/components/chemrepo/BackSoonPage.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import ContactEmail from 'src/components/chemrepo/core/ContactEmail';
+
+function BackSoonPage() {
+  return (
+    <div>
+      <h1>{`We'll be back soon!`}</h1>
+      <h3>
+        <i className="fa fa-cog fa-spin fa-5x" />
+      </h3>
+      <h3>
+        {`Apologies for the inconvenience as we're currently undergoing maintenance.`}
+      </h3>
+      <h3>
+        If you need assistance, please feel free to <ContactEmail />
+        {`. Otherwise, we'll be back online shortly!`}
+      </h3>
+      <h4>&mdash; ComPlat Team</h4>
+    </div>
+  );
+}
+
+export default BackSoonPage;
diff --git a/app/packs/src/components/chemrepo/PublishCommon.js b/app/packs/src/components/chemrepo/PublishCommon.js
index ac9756e70..7a7e46300 100644
--- a/app/packs/src/components/chemrepo/PublishCommon.js
+++ b/app/packs/src/components/chemrepo/PublishCommon.js
@@ -23,12 +23,12 @@ const handleClick = (e, id, clickType) => {
   const uriArray = uri.split(/\//);
   switch (clickType) {
     case 'Reaction':
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: false });
       // reactionShow({ params: { reactionID: id } });   // TODO: Paggy
       break;
 
     default:
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: false });
       // sampleShowOrNew({ params: { sampleID: id } });   // TODO: Paggy
       break;
   }
diff --git a/app/packs/src/components/chemrepo/PublishReactionModal.js b/app/packs/src/components/chemrepo/PublishReactionModal.js
index 6d10bf221..22c1d8173 100644
--- a/app/packs/src/components/chemrepo/PublishReactionModal.js
+++ b/app/packs/src/components/chemrepo/PublishReactionModal.js
@@ -547,7 +547,7 @@ export default class PublishReactionModal extends Component {
             const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
             return (
               <tr key={id}>
-                <td className="padding-right" style={{ display: 'inline-flex;' }}>
+                <td className="padding-right" style={{ display: 'inline-flex' }}>
                   <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
                   <Citation literature={citation} />
                 </td>
@@ -579,7 +579,7 @@ export default class PublishReactionModal extends Component {
   selectReferences() {
     const { selectedRefs, literatures, sortedIds } = this.state;
     return (
-      <div >
+      <div>
         <ListGroup fill="true">
           <ListGroupItem>
             {this.citationTable(literatures, sortedIds, selectedRefs)}
diff --git a/app/packs/src/components/chemrepo/SubmissionCheck.js b/app/packs/src/components/chemrepo/SubmissionCheck.js
index bbf962d97..cfa22ae70 100644
--- a/app/packs/src/components/chemrepo/SubmissionCheck.js
+++ b/app/packs/src/components/chemrepo/SubmissionCheck.js
@@ -38,7 +38,7 @@ const SubmissionCheck = (props) => {
 SubmissionCheck.propTypes = {
   validates: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.bool,
     message: PropTypes.string,
   })).isRequired,
 };
diff --git a/app/packs/src/components/chemrepo/core/ContactEmail.js b/app/packs/src/components/chemrepo/core/ContactEmail.js
index 8e4a76992..7737cbbf4 100644
--- a/app/packs/src/components/chemrepo/core/ContactEmail.js
+++ b/app/packs/src/components/chemrepo/core/ContactEmail.js
@@ -2,23 +2,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from 'react-bootstrap';
 
-const ContactEmail = (props) => {
+function ContactEmail(props) {
+  const { label, email } = props;
   const handleSendEmail = () => {
-    window.location.href = `mailto:${props.email}`;
+    window.location.href = `mailto:${email}`;
   };
 
   return (
     <Button bsSize="small" onClick={handleSendEmail}>
-      <i className="fa fa-envelope-o" aria-hidden="true" />{` ${props.label}`}
+      <i className="fa fa-envelope-o" aria-hidden="true" />
+      {` ${label}`}
     </Button>
   );
-};
+}
 
 ContactEmail.propTypes = {
   label: PropTypes.string,
   email: PropTypes.string,
 };
 
-ContactEmail.defaultProps = { label: 'Contact Us', email: 'chemotion-repository@lists.kit.edu' };
+ContactEmail.defaultProps = {
+  label: 'Contact Us',
+  email: 'chemotion-repository@lists.kit.edu',
+};
 
 export default ContactEmail;
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index df6393292..f5d73de18 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -158,9 +158,8 @@ export default class ImageModal extends Component {
                     </button>
                   </div>
                 </div>
-              </div>
-              :
-              <img
+              )
+              : <img
                 src={this.state.fetchSrc}
                 style={{
                   display: 'block',
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index cf6768535..b6e253dbc 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -91,13 +91,13 @@ class ContainerDatasetField extends Component {
   }
 
   render() {
-    const { connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
+    const { connectDropTarget, isOver, canDrop, datasetContainer, handleUndo, kind, isPublic,
       handleModalOpen, disabled
     } = this.props;
 
-    const downloadClick = isPublic ? () => PublicFetcher.downloadZip(dataset_container.id) : () => AttachmentFetcher.downloadZip(dataset_container.id);
+    const downloadClick = isPublic ? () => PublicFetcher.downloadZip(datasetContainer.id) : () => AttachmentFetcher.downloadZip(datasetContainer.id);
 
-    if (dataset_container.is_deleted) {
+    if (datasetContainer.is_deleted) {
       return (
         <div>
           <strike>{datasetContainer.name}</strike>
@@ -174,7 +174,7 @@ ContainerDatasetField.propTypes = {
 
 ContainerDatasetField.defaultProps = {
   readOnly: false,
-  isPublic: false
+  isPublic: false,
   handleRemove: () => {},
   disabled: false,
 };
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
index f39bed250..1aeca2a14 100644
--- a/app/packs/src/components/container/ContainerDatasetModal.js
+++ b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -14,7 +14,7 @@ export default class ContainerDatasetModal extends Component {
     this.state = {
       mode: 'attachments',
       isNameEditing: false,
-      localName: props.datasetContainer.name,
+      localName: props.datasetContainer?.name,
     };
 
     this.handleSave = this.handleSave.bind(this);
@@ -31,8 +31,8 @@ export default class ContainerDatasetModal extends Component {
     this.datasetInput.current.handleSave();
     this.props.onChange({
       ...this.props.datasetContainer,
-      ...this.datasetInput.current.state.datasetContainer,
-      name: this.state.localName
+      ...this.datasetInput.current?.state?.datasetContainer,
+      name: this.state?.localName
     });
   }
 
diff --git a/app/packs/src/components/navigation/NavNewSession.js b/app/packs/src/components/navigation/NavNewSession.js
index 7c4e622dd..3cd5456c4 100644
--- a/app/packs/src/components/navigation/NavNewSession.js
+++ b/app/packs/src/components/navigation/NavNewSession.js
@@ -27,7 +27,7 @@ function omniauthLabel(icon, name) {
 function NewSession({ authenticityToken, omniauthProviders, extraRules={} }) {
   const signUp = extraRules?.disable_signup === true ? null : (<NavItem href="/users/sign_up"> or Sign Up </NavItem>);
   const items = omniauthProviders && Object.keys(omniauthProviders).map((key) => (
-    <Button key={uuid.v4()} className="omniauth-btn" style={{ textAlign: 'left', marginRight: '10px' }} href={`/users/auth/${key}`}>
+    <Button key={uuid.v4()} style={{ textAlign: 'left', marginRight: '10px' }} href={`/users/auth/${key}`}>
       Login with &nbsp;
       {omniauthLabel(omniauthProviders[key].icon, omniauthProviders[key].label || key)}
     </Button>
diff --git a/app/packs/src/components/navigation/RepoNavHead.js b/app/packs/src/components/navigation/RepoNavHead.js
index 55449ffe5..d7801ea6b 100644
--- a/app/packs/src/components/navigation/RepoNavHead.js
+++ b/app/packs/src/components/navigation/RepoNavHead.js
@@ -1,10 +1,15 @@
 import React from 'react';
 import { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';
 
-const Title = <span><img alt="chemotion-" src="/images/repo/logo.png" style={{ width: '20%' }} /> Repository</span>
+const Title = (
+  <span>
+    <img alt="chemotion-" src="/images/repo/Repository_logo.png" style={{ width: '20%' }} />
+    {' '}
+    Repository
+  </span>
+);
 
 function NavHead() {
-  const isOnMydb = window.location.href.match(/\/mydb/);
   return (
     <Navbar.Brand>
       <NavDropdown title={Title} className="navig-brand navig-smaller-font" id="bg-nested-dropdown-brand">
diff --git a/app/packs/src/fetchers/LiteraturesFetcher.js b/app/packs/src/fetchers/LiteraturesFetcher.js
index 616778b6f..c53ba1a8d 100644
--- a/app/packs/src/fetchers/LiteraturesFetcher.js
+++ b/app/packs/src/fetchers/LiteraturesFetcher.js
@@ -12,8 +12,8 @@ export default class LiteraturesFetcher {
       credentials: 'same-origin'
     }).then((response) => response.json())
       .then((json) => json.literatures)
-      .then((literatures) => literatures.map((literature) => new Literature(literature)))
       .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then((literatures) => literatures.map((literature) => new Literature(literature)))
       .catch((errorMessage) => { console.log(errorMessage); });
   }
 
@@ -33,8 +33,8 @@ export default class LiteraturesFetcher {
       body: JSON.stringify({ element_type: type, element_id: id, ref: literature })
     }).then((response) => response.json())
       .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then((literatures) => literatures.map((lits) => new Literature(lits)))
       .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then((literatures) => literatures.map((lits) => new Literature(lits)))
       .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
   }
 
diff --git a/app/packs/src/fetchers/ReactionsFetcher.js b/app/packs/src/fetchers/ReactionsFetcher.js
index a3a23e282..2d702d54f 100644
--- a/app/packs/src/fetchers/ReactionsFetcher.js
+++ b/app/packs/src/fetchers/ReactionsFetcher.js
@@ -29,7 +29,7 @@ export default class ReactionsFetcher {
             }
             reaction.updateMaxAmountOfProducts();
             reaction.publication = json.publication || {};
-            return reaction;
+            return new Reaction(defaultAnalysisPublish(reaction));
           }
           const rReaction = new Reaction(json.reaction);
           rReaction.publication = json.publication || {};
diff --git a/app/packs/src/libHome/NavHead.js b/app/packs/src/libHome/NavHead.js
index fce7395e5..aca516f47 100644
--- a/app/packs/src/libHome/NavHead.js
+++ b/app/packs/src/libHome/NavHead.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavDropdown, Navbar, MenuItem } from 'react-bootstrap';
 
-const Title = <span><img alt="chemotion-" src="/images/repo/logo.png" style={{ width: '20%' }} /> Repository</span>
+const Title = <span><img alt="chemotion-" src="/images/repo/Repository_logo.png" style={{ width: '20%' }} /> Repository</span>
 
 const NavHead = () => {
   const isHome = window.location.href.match(/\/home/)
diff --git a/app/packs/src/models/Literature.js b/app/packs/src/models/Literature.js
index f731b742f..94b733a30 100644
--- a/app/packs/src/models/Literature.js
+++ b/app/packs/src/models/Literature.js
@@ -8,7 +8,7 @@ export default class Literature extends Element {
       url: '',
       doi: '',
       isbn: '',
-      litype: 'citedOwn',
+      litype: CitationType[0],
       type: 'literature',
       is_new: false,
       refs: {},
diff --git a/app/packs/src/repo/fetchers/LiteraturesFetcher.js b/app/packs/src/repo/fetchers/LiteraturesFetcher.js
index 616778b6f..6b905a2fc 100644
--- a/app/packs/src/repo/fetchers/LiteraturesFetcher.js
+++ b/app/packs/src/repo/fetchers/LiteraturesFetcher.js
@@ -33,8 +33,8 @@ export default class LiteraturesFetcher {
       body: JSON.stringify({ element_type: type, element_id: id, ref: literature })
     }).then((response) => response.json())
       .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then((literatures) => literatures.map((lits) => new Literature(lits)))
       .then((lits) => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then((literatures) => literatures.map((lits) => new Literature(lits)))
       .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
   }
 
diff --git a/app/packs/src/repoHome/RepoAbout.js b/app/packs/src/repoHome/RepoAbout.js
index 3c0b7c04c..e0258a73f 100644
--- a/app/packs/src/repoHome/RepoAbout.js
+++ b/app/packs/src/repoHome/RepoAbout.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Col, Row, Panel } from 'react-bootstrap';
+import { OrcidIcon } from 'src/repoHome/RepoCommon';
 
-const RepoAbout = () => {
+function RepoAbout() {
   const bodyStyle = {
     maxHeight: 'calc(100vh - 262px)',
     overflowY: 'auto',
@@ -27,25 +28,26 @@ const RepoAbout = () => {
       <Col md={3} />
     </Row>
   );
-};
+}
 
-const CardIcons = () =>
-  (
+function CardIcons() {
+  return (
     <div className="card-icons">
       <Col md={4}>
         <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
       </Col>
       <Col md={4}>
-        <img src="/images/repo/chemotion_full.svg" alt="" />
+        <img src="/images/repo/Chemotion-V1.png" alt="" />
       </Col>
       <Col md={4}>
         <img src="/images/repo/dfg_logo.png" alt="" />
       </Col>
     </div>
   );
+}
 
-const CardAbout = () =>
-  (
+function CardAbout() {
+  return (
     <div>
       <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
       <br />
@@ -102,38 +104,70 @@ const CardAbout = () =>
       <h3>Imprint</h3>
       <h4>Karlsruhe Institute of Technology</h4>
       <h4>Leader of the research group</h4>
-      <p>Prof. Stefan Bräse </p>
+      <p>
+        <OrcidIcon orcid="0000-0003-4845-3191" />
+        {' Prof. Stefan Bräse'}
+      </p>
       <p>Institute of Organic Chemistry</p>
-      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
+      <p>Fritz-Haber-Weg 6, Building 30.42</p>
       <p>76131 Karlsruhe </p>
       <p>Germany</p>
       <br />
       <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
-      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
+      <p>Hermann-von-Helmholtz-Platz 1, Building 341</p>
       <p>76344 Eggenstein-Leopoldshafen</p>
+      <p>Germany</p>
       <p>Phone: +49 721 608 42903</p>
       <p>Fax: +49 721 608 48581</p>
       <br />
       <p />
-      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
+      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Research Group Bräse</a>
       <br />
       <h4>Office Campus North (KIT)</h4>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <p>
+        <OrcidIcon orcid="0000-0001-9513-2468" />
+        {' Dr. Nicole Jung'}
+      </p>
       <p>Institute of Organic Chemistry</p>
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
-      <p>Hermann-von-Helmholtz-Platz 1</p>
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
+      <p>Hermann-von-Helmholtz-Platz 1, Building 319</p>
       <p>76344 Eggenstein-Leopoldshafen </p>
       <p>Germany</p>
       <p>Phone: +49 721 608 24697 </p>
       <br />
       <h4>Authors</h4>
-      <p>Prof. Stefan Braese</p>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <p>
+        {' '}
+        <OrcidIcon orcid="0000-0003-4845-3191" />
+        {' Prof. Stefan Bräse'}
+      </p>
+      <p>
+        <OrcidIcon orcid="0000-0001-9513-2468" />
+        {' Dr. Nicole Jung'}
+      </p>
+      <p>
+        <OrcidIcon orcid="0000-0002-0487-3947" />
+        {' Dr. Pierre Tremouilhac '}
+        <OrcidIcon orcid="0000-0002-9976-4507" />
+        {' Pei-Chi Huang '}
+        <OrcidIcon orcid="0000-0002-9772-0455" />
+        {' Chia-Lin Lin '}
+        <OrcidIcon orcid="0000-0002-4261-9886" />
+        {' Dr. Yu-Chieh Huang '}
+        <OrcidIcon orcid="0000-0002-1692-6778" />
+        {' Dr. An Nguyen '}
+        <OrcidIcon orcid="0000-0002-5035-7978" />
+        {' Dr. Felix Bach'}
+      </p>
       <br />
       <h3>Copyright Notices</h3>
       <div style={{ textAlign: 'justify' }}>
         <p>
-          Unless otherwise stated, <i>chemotion-repository</i> and/or its contributors own
+          Unless otherwise stated,
+          {' '}
+          <i>chemotion-repository</i>
+          {' '}
+          and/or its contributors own
           the intellectual property rights in the website and material on the website.
           Subject to the license below, all these intellectual property rights are reserved.
           <br />
@@ -143,20 +177,47 @@ const CardAbout = () =>
         </p>
         <ul>
           <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg" style={{ borderStyle: 'none' }} alt="CC BY SA" />{' '}
+            <a
+              rel="license noopener noreferrer external"
+              target="_blank"
+              href="https://creativecommons.org/licenses/by-sa/4.0/"
+            >
+              <img
+                src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg"
+                style={{ borderStyle: 'none' }}
+                alt="CC BY SA"
+              />
+              {' '}
               Creative Commons Attribution-ShareAlike 4.0 International License
             </a>
           </li>
           <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by/4.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg" style={{ borderStyle: 'none' }} alt="CC BY" />{' '}
+            <a
+              rel="license noopener noreferrer external"
+              target="_blank"
+              href="https://creativecommons.org/licenses/by/4.0/"
+            >
+              <img
+                src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg"
+                style={{ borderStyle: 'none' }}
+                alt="CC BY"
+              />
+              {' '}
               Creative Commons Attribution 4.0
             </a>
           </li>
           <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="http://creativecommons.org/publicdomain/zero/1.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg" style={{ borderStyle: 'none' }} alt="CC0" />{' '}
+            <a
+              rel="license noopener noreferrer external"
+              target="_blank"
+              href="http://creativecommons.org/publicdomain/zero/1.0/"
+            >
+              <img
+                src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg"
+                style={{ borderStyle: 'none' }}
+                alt="CC0"
+              />
+              {' '}
               CC0 1.0 Universal
             </a>
           </li>
@@ -169,15 +230,26 @@ const CardAbout = () =>
           license if this is apparent.
         </p>
         <p>
-          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
-          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
+          The source code of the chemotion REPOSITORY web server and client is currently licensed under the
+          {' '}
+          <a
+            rel="license"
+            href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE"
+          >
+            GNU Affero General Public License v3.0
+          </a>
+          .
+          The code can be found on
+          {' '}
+          <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>
+          .
         </p>
         <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
         <br />
       </div>
 
       <h3>Content</h3>
-      <div style={{ textAlign: 'justify' }} >
+      <div style={{ textAlign: 'justify' }}>
         <p>
           All texts, pictures and other information published here are subject to
           copyright. The logo may not be used without the prior consent
@@ -191,5 +263,6 @@ const CardAbout = () =>
       </div>
     </div>
   );
+}
 
 export default RepoAbout;
diff --git a/app/packs/src/repoHome/RepoCommon.js b/app/packs/src/repoHome/RepoCommon.js
index 1e76370fd..a97722730 100644
--- a/app/packs/src/repoHome/RepoCommon.js
+++ b/app/packs/src/repoHome/RepoCommon.js
@@ -582,22 +582,6 @@ const EditorTips = () => (
   </ol>
 );
 
-const BackSoonPage = () => {
-  return (
-    <div>
-      <h1>We&rsquo;ll be back soon!</h1>
-      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
-      <h3>
-        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
-      </h3>
-      <h3>
-        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
-      </h3>
-      <h4>&mdash; ComPlat Team</h4>
-    </div>
-  );
-};
-
 const IconToMyDB = ({
   id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
 }) => {
@@ -1681,7 +1665,7 @@ class RenderPublishAnalysesPanel extends Component {
     const insText = instrumentText(analysis);
     const crdLink = (isPublic === false) ? (
       <div className="sub-title" inline="true">
-        <b>Reaction ID: </b>
+        <b>Analysis ID: </b>
         <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
           CRD-{analysis.pub_id}
         </Button>
@@ -1691,7 +1675,7 @@ class RenderPublishAnalysesPanel extends Component {
       </div >
     ) : (
       <div className="sub-title" inline="true">
-        <b>Reaction ID: </b>
+        <b>Analysis ID: </b>
         <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
           CRD-{analysis.pub_id}
         </Button>
@@ -1752,10 +1736,12 @@ class RenderPublishAnalyses extends Component {
   }
 
   header() {
-    const { analysis } = this.props;
+    const { analysis, element } = this.props;
     const content = analysis.extended_metadata['content'];
     const previewImg = previewContainerImage(analysis);
 
+    const idyLogin = typeof element.isLogin === 'undefined' ? true : element.isLogin;
+
     const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
 
     let hasPop = true;
@@ -1772,23 +1758,15 @@ class RenderPublishAnalyses extends Component {
 
     return (
       <div
-        className="analysis-header"
+        className="repo-analysis-header"
       >
-        <div className="preview">
-          <ImageModal
-            hasPop={hasPop}
-            previewObject={{
-              src: previewImg
-            }}
-            popObject={{
-              title: kind,
-              src: previewImg,
-              fetchNeeded,
-              fetchId,
-              fetchFilename
-            }}
-          />
-        </div>
+        <RepoPreviewImage
+          element={element}
+          analysis={analysis}
+          isLogin={idyLogin}
+          previewImg={previewImg}
+          title={kind}
+        />
         <div className="abstract">
           <div className="lower-text">
             <div className="sub-title" inline="true">
@@ -1801,7 +1779,7 @@ class RenderPublishAnalyses extends Component {
               <DownloadJsonBtn type="container" id={analysis.id} />
             </div>
             <div className="sub-title" inline="true">
-              <b>Reaction ID: </b>
+              <b>Analysis ID: </b>
               <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
                 CRD-{ analysis.pub_id }
               </Button>
@@ -2125,6 +2103,7 @@ const DatasetDetail = ({ isPublished, element }) => {
     <RenderPublishAnalyses
       key={`${element.id}-${element.updated_at}`}
       analysis={element.dataset}
+      element={element.element}
       expanded
       elementType="Sample"
       license={element.license}
@@ -2257,7 +2236,6 @@ export {
   AnalysesTypeJoinLabel,
   AffiliationList,
   AuthorList,
-  BackSoonPage,
   CalcDuration,
   ChemotionId,
   ClipboardCopyLink,
diff --git a/app/packs/src/repoHome/RepoContainerDatasets.js b/app/packs/src/repoHome/RepoContainerDatasets.js
index 266136f3f..68e3eac72 100644
--- a/app/packs/src/repoHome/RepoContainerDatasets.js
+++ b/app/packs/src/repoHome/RepoContainerDatasets.js
@@ -11,7 +11,7 @@ export default class RepoContainerDatasets extends Component {
       container,
       modal: {
         show: false,
-        dataset_container: null
+        datasetContainer: null
       }
     };
   }
@@ -24,7 +24,7 @@ export default class RepoContainerDatasets extends Component {
 
   handleModalOpen(datasetContainer) {
     const { modal } = this.state;
-    modal.dataset_container = datasetContainer;
+    modal.datasetContainer = datasetContainer;
     modal.show = true;
     this.setState({ modal });
   }
@@ -32,7 +32,7 @@ export default class RepoContainerDatasets extends Component {
   handleModalHide() {
     const { modal } = this.state;
     modal.show = false;
-    modal.dataset_container = null;
+    modal.datasetContainer = null;
     this.setState({ modal });
     // https://github.com/react-bootstrap/react-bootstrap/issues/1137
     document.body.className = document.body.className.replace('modal-open', '');
@@ -49,7 +49,7 @@ export default class RepoContainerDatasets extends Component {
               return (
                 <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} className="repo-analysis-listgroup">
                   <ContainerDatasetField
-                    dataset_container={datasetContainer}
+                    datasetContainer={datasetContainer}
                     handleModalOpen={() => this.handleModalOpen(datasetContainer)}
                     disabled
                     isPublic={this.props.isPublic}
@@ -63,7 +63,7 @@ export default class RepoContainerDatasets extends Component {
             onHide={() => this.handleModalHide()}
             show={modal.show}
             readOnly
-            dataset_container={modal.dataset_container}
+            datasetContainer={modal.datasetContainer}
             disabled
           />
         </div>
diff --git a/app/packs/src/repoHome/RepoGenericHub.js b/app/packs/src/repoHome/RepoGenericHub.js
index 56672f52e..2fb9254ba 100644
--- a/app/packs/src/repoHome/RepoGenericHub.js
+++ b/app/packs/src/repoHome/RepoGenericHub.js
@@ -149,7 +149,7 @@ const RepoGenericHub = () => {
     e.stopPropagation();
     GenericBaseFetcher.open(`list?klass=${capitalizeFirstLetter(type)}Klass&with_props=true`, 'GET')
       .then((result) => {
-        setState({ ...state, menuSelected: type, gridData: result });
+        setState({ ...state, menuSelected: type, gridData: result?.list || [] });
       })
       .catch((error) => {
         console.error('Error fetching dataset klasses:', error);
diff --git a/app/packs/src/repoHome/RepoGenericHubDesc.js b/app/packs/src/repoHome/RepoGenericHubDesc.js
index 181d7880f..3aec8d60f 100644
--- a/app/packs/src/repoHome/RepoGenericHubDesc.js
+++ b/app/packs/src/repoHome/RepoGenericHubDesc.js
@@ -2,30 +2,70 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 import ContactEmail from 'src/components/chemrepo/core/ContactEmail';
 
-const RepoGenericHubDesc = () => (
-  <div className="repo-generic-hub-desc">
-    <h1>
-      LabIMotion Template Hub
-      <span className="contact"><ContactEmail email="chemotion-labimotion@lists.kit.edu" label="Send feedback about LabIMotion" /></span>
-      <span className="contact">
-        <Button bsSize="small" onClick={() => { window.open('https://www.chemotion.net/docs/labimotion', '_blank'); }}>
-          <i className="fa fa-book" aria-hidden="true" />&nbsp;LabIMotion Docs
-        </Button>
-      </span>
-    </h1>
-    <h3>
-      Welcome to the <b>LabIMotion Template Hub</b>, your platform for sharing new elements, segments, and datasets templates.
-    </h3>
-    <br />
-    <h3>Getting Started: Selecting a Template</h3>
-    <p>The templates are conveniently displayed in a grid layout. You can: </p>
-    <h5>
-      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Sort</b> the grid by clicking on the column headers. </p>
-      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Filter</b> the grid by clicking on the filter icon <span className="download"><i className="fa fa-bars" aria-hidden="true" /></span> located at the right of the column headers. </p>
-      <p><i className="fa fa-check" aria-hidden="true" />&nbsp;<b>Download</b> a specific template by clicking on the button <span className="download"><i className="fa fa-download" aria-hidden="true" />&nbsp;Download</span>. </p>
-    </h5>
-    <h3>Now, let&apos;s get started. Choose the template you need and begin the download process.</h3>
-  </div>
-);
+function RepoGenericHubDesc() {
+  return (
+    <div className="repo-generic-hub-desc">
+      <h1>
+        LabIMotion Template Hub
+        <span className="contact">
+          <ContactEmail
+            email="chemotion-labimotion@lists.kit.edu"
+            label="Send feedback about LabIMotion"
+          />
+        </span>
+        <span className="contact">
+          <Button
+            bsSize="small"
+            onClick={() => {
+              window.open(
+                'https://www.chemotion.net/docs/labimotion',
+                '_blank'
+              );
+            }}
+          >
+            <i className="fa fa-book" aria-hidden="true" />
+            &nbsp;LabIMotion Docs
+          </Button>
+        </span>
+      </h1>
+      <h3>
+        Welcome to the <b>LabIMotion Template Hub</b>, your platform for sharing
+        new elements, segments, and datasets templates.
+      </h3>
+      <br />
+      <h3>Getting Started: Selecting a Template</h3>
+      <p>
+        The templates are conveniently displayed in a grid layout. You can:{' '}
+      </p>
+      <h5>
+        <p>
+          <i className="fa fa-check" aria-hidden="true" />
+          &nbsp;<b>Sort</b> the grid by clicking on the column headers.{' '}
+        </p>
+        <p>
+          <i className="fa fa-check" aria-hidden="true" />
+          &nbsp;<b>Filter</b> the grid by clicking on the filter icon{' '}
+          <span className="download">
+            <i className="fa fa-bars" aria-hidden="true" />
+          </span>{' '}
+          located at the right of the column headers.{' '}
+        </p>
+        <p>
+          <i className="fa fa-check" aria-hidden="true" />
+          &nbsp;<b>Download</b> a specific template by clicking on the button{' '}
+          <span className="download">
+            <i className="fa fa-download" aria-hidden="true" />
+            &nbsp;Download
+          </span>
+          .{' '}
+        </p>
+      </h5>
+      <h3>
+        Now, let&apos;s get started. Choose the template you need and begin the
+        download process.
+      </h3>
+    </div>
+  );
+}
 
 export default RepoGenericHubDesc;
diff --git a/app/packs/src/repoHome/RepoHowTo.js b/app/packs/src/repoHome/RepoHowTo.js
index d82e03596..6e49da4aa 100644
--- a/app/packs/src/repoHome/RepoHowTo.js
+++ b/app/packs/src/repoHome/RepoHowTo.js
@@ -4,7 +4,8 @@ import { orderBy } from 'lodash';
 import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
 import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from 'src/repoHome/RepoCommon';
+import { DateFormatYMDLong } from 'src/repoHome/RepoCommon';
+import BackSoonPage from 'src/components/chemrepo/BackSoonPage';
 
 const renderEditRead = (article, isEditor) => {
   if (isEditor === true) {
diff --git a/app/packs/src/repoHome/RepoNewsroom.js b/app/packs/src/repoHome/RepoNewsroom.js
index 4d3275cc7..69318df50 100644
--- a/app/packs/src/repoHome/RepoNewsroom.js
+++ b/app/packs/src/repoHome/RepoNewsroom.js
@@ -4,7 +4,8 @@ import { orderBy, slice } from 'lodash';
 import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
 import PublicStore from 'src/stores/alt/repo/stores/PublicStore';
 import ArticleFetcher from 'src/repo/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from 'src/repoHome/RepoCommon';
+import { DateFormatYMDLong } from 'src/repoHome/RepoCommon';
+import BackSoonPage from 'src/components/chemrepo/BackSoonPage';
 
 const renderEditRead = (article, isEditor) => {
   if (isEditor === true) {
diff --git a/app/packs/src/repoHome/RepoSampleDetails.js b/app/packs/src/repoHome/RepoSampleDetails.js
index f9fbe8b4e..fe0754c6b 100644
--- a/app/packs/src/repoHome/RepoSampleDetails.js
+++ b/app/packs/src/repoHome/RepoSampleDetails.js
@@ -115,7 +115,7 @@ export default class RepoSampleDetails extends Component {
         showed_name: s.showed_name,
         molecule_iupac: molecule.iupac_name || [],
         molecule_id: molecule.id,
-        container: s.container || element.container || {},
+        container: s.container || element.analyses || {},
         segments: s.segments || [],
         boiling_point: s.boiling_point || '',
         melting_point: s.melting_point || '',
diff --git a/app/packs/src/utilities/SpectraHelper.js b/app/packs/src/utilities/SpectraHelper.js
index f86b70885..03808d3d6 100644
--- a/app/packs/src/utilities/SpectraHelper.js
+++ b/app/packs/src/utilities/SpectraHelper.js
@@ -107,7 +107,7 @@ const extractNMRiumFiles = (container) => {
 
 const extractAnalysesId = (sample, container) => {
   let idAe = null;
-  sample && sample.analysesContainers().forEach((ae) => {
+  sample && (sample.constructor.name != 'Object') && sample.analysesContainers()?.forEach((ae) => {
     ae.children.forEach((ai) => {
       if (container.id === ai.id) {
         idAe = ae.id;
diff --git a/app/services/element_detail_level_calculator.rb b/app/services/element_detail_level_calculator.rb
index 42c9ad4b9..92c460313 100644
--- a/app/services/element_detail_level_calculator.rb
+++ b/app/services/element_detail_level_calculator.rb
@@ -37,12 +37,14 @@ def calculate_detail_levels # rubocop:disable Metrics/AbcSize
 
   # taken from API#group_ids
   def user_ids
+    return nil if user.nil?
     @user_ids ||= user.group_ids + [user.id]
   end
 
   # All collections containing the element that belong to the user or were shared to them
   def user_collections_with_element
-    @user_collections_with_element ||= element.collections.where(user_id: user_ids)
+    col = user_ids.nil? ? [Collection.public_collection] : element.collections.where(user_id: user_ids)
+    @user_collections_with_element ||= col
   end
 
   # All collections containing the element that were synced to the current user
diff --git a/config/routes.rb b/config/routes.rb
index 76f1992fb..585c36707 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -207,7 +207,8 @@
   # end
 
   #root to: redirect('home')
-  root to: 'pages#root_page' # , as: :unauthenticated_root
+  # root to: 'pages#root_page' # , as: :unauthenticated_root
+  root to: redirect('welcome')
 
   get 'test', to: 'pages#test'
 end
diff --git a/lib/import/import_collections.rb b/lib/import/import_collections.rb
index 2afa3a32c..127a29f09 100644
--- a/lib/import/import_collections.rb
+++ b/lib/import/import_collections.rb
@@ -421,7 +421,7 @@ def import_reactions_samples
           if reactions_sample.type == 'ReactionsProductSample'
             onm = reactions_sample.reaction.tag&.taggable_data&.dig('eln_info', 'short_label')
             nnm = reactions_sample.reaction.short_label
-            reactions_sample.sample.update!(name:reactions_sample.sample.name.sub!(onm, nnm)) if onm.present? && nnm.present?
+            reactions_sample.sample.update!(name:reactions_sample.sample.name.sub!(onm, nnm)) if onm.present? && nnm.present? && reactions_sample.sample&.name.present?
           end
 
           # add reactions_sample to the @instances map
diff --git a/package.json b/package.json
index aeaeed6dd..00f57fd8c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "antd": "^3.19.3",
     "aviator": "v0.6.1",
     "base-64": "^0.1.0",
-    "chem-generic-ui": "^1.0.11",
+    "chem-generic-ui": "^1.0.12",
     "chem-generic-ui-viewer": "^1.0.2",
     "chemotion-converter-client": "0.5.0",
     "citation-js": "0.6.8",
@@ -135,14 +135,17 @@
     "enzyme": "^3.7.0",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-filtered-fix": "^0.3.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-no-relative-import-paths": "^1.4.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.30.1",
     "expect": "^24.7.1",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
+    "prettier": "^3.1.1",
     "process": "^0.11.10",
     "react-refresh": "^0.12.0",
     "redux-logger": "^3.0.6",
@@ -151,6 +154,7 @@
     "webpack-dev-server": "^4.8.1"
   },
   "scripts": {
+    "lint": "eslint --fix",
     "postinstall": "./package_postinstall.sh",
     "test": "NODE_PATH=./app/packs:./spec/javascripts yarn mocha --exit --require '@babel/register' './spec/javascripts/helper/setup.js' './spec/javascripts/**/*.spec.js'",
     "coverage": "yarn nyc npm test;yarn nyc report --reporter=html"
diff --git a/public/favicon.ico b/public/favicon.ico
index f71cf66c63d4b05ac8503f4d4a29f8f87ef37754..49acb990ec636a53981070357afa02976f60b730 100644
GIT binary patch
literal 16958
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
Dqoj9J

literal 4286
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
K3}gW^N&7Eq2FdLJ

diff --git a/yarn.lock b/yarn.lock
index 7a67a2a72..f6702c0b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2548,6 +2548,11 @@
     node-gyp "^8.4.1"
     read-package-json-fast "^2.0.3"
 
+"@pkgr/core@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.0.tgz#7d8dacb7fdef0e4387caf7396cbd77f179867d06"
+  integrity sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz#e77aac783bd079f548daa0a7f080ab5b5a9741ca"
@@ -4813,10 +4818,10 @@ chem-generic-ui-viewer@^1.0.2:
     react-select "5.2.2"
     uuid "^8.3.2"
 
-chem-generic-ui@^1.0.11:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/chem-generic-ui/-/chem-generic-ui-1.1.0.tgz#af4c8514519d918d050e918d98d628cc0dd249e4"
-  integrity sha512-hcmzFen/dm06xhrS/bK3/zW6e5w0jEseIW6l0EHeZfKNqoMhXMsdc9tGtTqTMIpFz0jdM7MvBffFpkTFGDx3bw==
+chem-generic-ui@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/chem-generic-ui/-/chem-generic-ui-1.0.12.tgz#bd06d479d56672e0dca4c560cca9716c1b0f9185"
+  integrity sha512-ks4SXmOl4ohpZUednVpt9J2ZtIxBrghZwSkGFjRI0RqwlpQ7esA/R+mWCE037EhE6qjrX2ExZdk6DoM+M9prQw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.1.2"
     "@fortawesome/free-regular-svg-icons" "^6.1.2"
@@ -6886,6 +6891,11 @@ eslint-config-airbnb@^19.0.4:
     object.assign "^4.1.2"
     object.entries "^1.1.5"
 
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+
 eslint-filtered-fix@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/eslint-filtered-fix/-/eslint-filtered-fix-0.3.0.tgz#c03de8b0d8e9b67d49f401f4e039febb3b0f5858"
@@ -6952,6 +6962,14 @@ eslint-plugin-no-relative-import-paths@^1.4.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-relative-import-paths/-/eslint-plugin-no-relative-import-paths-1.4.0.tgz#59489ebc19688d1398bfe53d3ad320b3ed42ca17"
   integrity sha512-J/ok26KqJM+20VsxNEcHc9kyW0dcFHBlihOO5FFv/GQqwcW+G1UngbHLpnPAdOQ1dJg5Ljk/40csqfZ3mnneUw==
 
+eslint-plugin-prettier@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
+  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.6"
+
 eslint-plugin-react@^7.30.1:
   version "7.30.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz#2be4ab23ce09b5949c6631413ba64b2810fd3e22"
@@ -7358,6 +7376,11 @@ fast-diff@1.1.2:
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz"
   integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
 
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
@@ -11317,6 +11340,18 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+
 pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -14252,6 +14287,14 @@ sync-fetch@^0.4.1:
     buffer "^5.7.1"
     node-fetch "^2.6.1"
 
+synckit@^0.8.6:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
+  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
 tapable@^2.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
@@ -14488,7 +14531,7 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
-"tslib@^2.4.1 || ^1.9.3":
+"tslib@^2.4.1 || ^1.9.3", tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==

From f9e9bcb25cb7e5b20e52277d730b1d3c400c2771 Mon Sep 17 00:00:00 2001
From: Chemotion <chemotion@ioc.kit.edu>
Date: Wed, 27 Sep 2017 15:19:21 +0200
Subject: [PATCH 238/258] Extending chemotion_ELN with Repository functions

In short:
- data submission feature added to user ELN page
- Review page for internal reviewing
- Public page to browse published sample/reaction data

Contributors:
Chia-Lin Lin
Pei-Chi Huang
Pierre Tremouilhac
---
 .env.dev.example                              |   16 -
 .env.development                              |   40 -
 app/api/chemotion/element_api.rb              |    7 +
 app/api/chemotion/public_api.rb               |  393 +++
 app/api/chemotion/user_api.rb                 |  114 +
 app/api/helpers/collection_helpers.rb         |   23 +
 .../javascripts/components/PublishCommon.js   |  316 +++
 .../components/PublishReactionContainers.js   |  150 ++
 .../components/PublishReactionModal.js        |  839 ++++++
 .../components/PublishSampleModal.js          |  509 ++++
 .../components/ReactionDetailsRepoComment.js  |   91 +
 .../components/SampleDetailsRepoComment.js    |   92 +
 .../components/actions/PublicActions.js       |  394 +++
 .../components/actions/RepositoryActions.js   |   65 +
 .../components/common/DeleteConfirmBtn.js     |   53 +
 .../common/DropdownButtonSelection.js         |   38 +
 .../components/common/InputButtonField.js     |   62 +
 .../components/common/NewsPreviewModal.js     |   33 +
 .../components/common/RepoCommentBtn.js       |   57 +
 .../components/common/RepoCommentModal.js     |   94 +
 .../components/common/RepoMetadataModal.js    |   91 +
 .../components/common/RepoReviewModal.js      |  146 ++
 .../components/common/SelectionField.js       |   62 +
 .../components/fetchers/ArticleFetcher.js     |  111 +
 .../components/fetchers/PublicFetcher.js      |  229 ++
 .../components/fetchers/RepositoryFetcher.js  |  382 +++
 .../components/report/SectionDoiList.js       |   89 +
 .../components/stores/PublicStore.js          |  425 +++
 .../components/users/AuthorModal.js           |  516 ++++
 .../utils/defaultAnalysisPublish.js           |   52 +
 .../javascripts/libHome/ContainerComponent.js |   98 +
 app/assets/javascripts/libHome/NavFooter.js   |   24 +
 app/assets/javascripts/libHome/Navigation.js  |  136 +
 app/assets/javascripts/libHome/RepoAbout.js   |  164 ++
 app/assets/javascripts/libHome/RepoCommon.js  | 2302 +++++++++++++++++
 app/assets/javascripts/libHome/RepoContact.js |   43 +
 .../libHome/RepoContainerDatasets.js          |   79 +
 .../javascripts/libHome/RepoDirective.js      |   41 +
 .../javascripts/libHome/RepoElementDetails.js |   70 +
 app/assets/javascripts/libHome/RepoEmbargo.js |  278 ++
 .../javascripts/libHome/RepoEmbargoDetails.js |   47 +
 app/assets/javascripts/libHome/RepoHome.js    |  476 ++++
 app/assets/javascripts/libHome/RepoHowTo.js   |  177 ++
 .../libHome/RepoHowTo/EditorBtn.js            |   67 +
 .../libHome/RepoHowTo/EditorImage.js          |   43 +
 .../libHome/RepoHowTo/EditorRichText.js       |   30 +
 .../libHome/RepoHowTo/EditorStelle.js         |   84 +
 .../libHome/RepoHowToDragSource.js            |   21 +
 .../libHome/RepoHowToDropTarget.js            |   41 +
 .../javascripts/libHome/RepoHowToEditor.js    |  435 ++++
 .../javascripts/libHome/RepoHowToReader.js    |  124 +
 .../javascripts/libHome/RepoNewsEditor.js     |  427 +++
 .../javascripts/libHome/RepoNewsReader.js     |  123 +
 .../javascripts/libHome/RepoNewsroom.js       |  186 ++
 app/assets/javascripts/libHome/RepoPubl.js    |  713 +++++
 .../libHome/RepoReactionDetails.js            |  556 ++++
 .../libHome/RepoReactionSchemeInfo.js         |   87 +
 app/assets/javascripts/libHome/RepoReview.js  |  236 ++
 .../libHome/RepoReviewButtonBar.js            |  129 +
 .../javascripts/libHome/RepoReviewCommon.js   |   98 +
 .../javascripts/libHome/RepoReviewDetails.js  |   76 +
 app/assets/javascripts/libHome/RepoSample.js  |  150 ++
 .../javascripts/libHome/RepoSampleDetails.js  |  236 ++
 app/assets/javascripts/libHome/homeRoutes.js  |  219 ++
 app/assets/stylesheets/common.scss            |   85 +
 app/models/report.rb                          |    4 +
 app/models/sample.rb                          |    3 +-
 app/models/user.rb                            |   62 +
 .../details/reactions/schemeTab/Material.js   |    3 +
 .../analysesTab/SampleDetailsContainersAux.js |    3 +
 .../list/ElementsTableSampleEntries.js        |    2 +
 app/packs/src/components/QuillEditor.js       |    4 +-
 app/packs/src/models/Sample.js                |    5 +
 config/routes.rb                              |    2 +
 ...211180200_add_published_at_publications.rb |    2 +-
 ...reate_embargoed_publication_collections.rb |    2 +-
 .../20190617153000_convert_analysis_type.rb   |   57 -
 .../20190619153000_default_recent_profile.rb  |   25 -
 ...0190712090136_curate_profile_recent_owl.rb |   33 -
 db/schema.rb                                  |   58 +-
 lib/pub_chem.rb                               |   16 +
 81 files changed, 13693 insertions(+), 178 deletions(-)
 delete mode 100644 .env.dev.example
 delete mode 100644 .env.development
 create mode 100644 app/assets/javascripts/components/PublishCommon.js
 create mode 100644 app/assets/javascripts/components/PublishReactionContainers.js
 create mode 100644 app/assets/javascripts/components/PublishReactionModal.js
 create mode 100644 app/assets/javascripts/components/PublishSampleModal.js
 create mode 100644 app/assets/javascripts/components/ReactionDetailsRepoComment.js
 create mode 100644 app/assets/javascripts/components/SampleDetailsRepoComment.js
 create mode 100644 app/assets/javascripts/components/actions/PublicActions.js
 create mode 100644 app/assets/javascripts/components/actions/RepositoryActions.js
 create mode 100644 app/assets/javascripts/components/common/DeleteConfirmBtn.js
 create mode 100644 app/assets/javascripts/components/common/DropdownButtonSelection.js
 create mode 100644 app/assets/javascripts/components/common/InputButtonField.js
 create mode 100644 app/assets/javascripts/components/common/NewsPreviewModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoCommentBtn.js
 create mode 100644 app/assets/javascripts/components/common/RepoCommentModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoMetadataModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoReviewModal.js
 create mode 100644 app/assets/javascripts/components/common/SelectionField.js
 create mode 100644 app/assets/javascripts/components/fetchers/ArticleFetcher.js
 create mode 100644 app/assets/javascripts/components/fetchers/PublicFetcher.js
 create mode 100644 app/assets/javascripts/components/fetchers/RepositoryFetcher.js
 create mode 100644 app/assets/javascripts/components/report/SectionDoiList.js
 create mode 100644 app/assets/javascripts/components/stores/PublicStore.js
 create mode 100644 app/assets/javascripts/components/users/AuthorModal.js
 create mode 100644 app/assets/javascripts/components/utils/defaultAnalysisPublish.js
 create mode 100644 app/assets/javascripts/libHome/ContainerComponent.js
 create mode 100644 app/assets/javascripts/libHome/NavFooter.js
 create mode 100644 app/assets/javascripts/libHome/Navigation.js
 create mode 100644 app/assets/javascripts/libHome/RepoAbout.js
 create mode 100644 app/assets/javascripts/libHome/RepoCommon.js
 create mode 100644 app/assets/javascripts/libHome/RepoContact.js
 create mode 100644 app/assets/javascripts/libHome/RepoContainerDatasets.js
 create mode 100644 app/assets/javascripts/libHome/RepoDirective.js
 create mode 100644 app/assets/javascripts/libHome/RepoElementDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoEmbargo.js
 create mode 100644 app/assets/javascripts/libHome/RepoEmbargoDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoHome.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToDragSource.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToDropTarget.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToEditor.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToReader.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsEditor.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsReader.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsroom.js
 create mode 100644 app/assets/javascripts/libHome/RepoPubl.js
 create mode 100644 app/assets/javascripts/libHome/RepoReactionDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
 create mode 100644 app/assets/javascripts/libHome/RepoReview.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewButtonBar.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewCommon.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoSample.js
 create mode 100644 app/assets/javascripts/libHome/RepoSampleDetails.js
 create mode 100644 app/assets/javascripts/libHome/homeRoutes.js
 delete mode 100644 db/migrate/20190617153000_convert_analysis_type.rb
 delete mode 100644 db/migrate/20190619153000_default_recent_profile.rb
 delete mode 100644 db/migrate/20190712090136_curate_profile_recent_owl.rb

diff --git a/.env.dev.example b/.env.dev.example
deleted file mode 100644
index 110eb17dc..000000000
--- a/.env.dev.example
+++ /dev/null
@@ -1,16 +0,0 @@
-SFTP_HOST=sftp
-SFTP_PORT=22
-SFTP_UPLOAD_FOLDER=uploads
-SFTP_USER=sftp_test
-SFTP_PASSWORD=sftp_test
-
-SYS_EMAIL='mail@chemotion.net'
-PUBLIC_COLL='chemotion'
-
-DOI_SYMBOL='DOI_SYMBOL'
-DOI_PWD='DOI_PWD'
-DOI_PREFIX='10.XXXX'
-DOI_DOMAIN='DOI.DOMA.IN'
-
-PUBCHEM_LOGIN='PUBCHEM_LOGIN'
-PUBCHEM_PASSWORD='PUBCHEM_PW'
diff --git a/.env.development b/.env.development
deleted file mode 100644
index 9b8e54992..000000000
--- a/.env.development
+++ /dev/null
@@ -1,40 +0,0 @@
-SFTP_HOST=sftp
-SFTP_PORT=22
-SFTP_UPLOAD_FOLDER=uploads
-SFTP_USER=sftp_test
-SFTP_PASSWORD=sftp_test
-
-MESSAGE_ENABLE=false
-MESSAGE_AUTO_INTERNAL=6000
-MESSAGE_IDLE_TIME=12
-
-# JWT key for novnc target encryption
-NOVNC_SECRET='secret'
-
-# Allow unconfirmed email: leave blank for always, or set a number of days (integer);
-# also set 0 to have email being confirmed before first sign in.
-DEVISE_ALLOW_UNCONFIRMED=''
-
-# Disable sign up page: leave blank to allow sign up page. set to 'true' to disable it.
-# only amdin can then create user accounts.
-DEVISE_DISABLED_SIGN_UP=''
-
-# Any new account to be inactive by default => only admin can (de)activate
-DEVISE_NEW_ACCOUNT_INACTIVE=false
-
-# Application's title
-APPLICATION_TITLE='Chemotion dev'
-
-DATA_CITE_BASE_URI=https://api.test.datacite.org
-DATA_CITE_PREFIX=prefix
-DATA_CITE_API_USERNAME=username
-DATA_CITE_API_PASSWORD=password
-DATA_CITE_DEVICE_PREFIX=DEVICE-
-DATA_CITE_RESEARCH_PLAN_PREFIX=RP-
-DATA_CITE_DEVICE_PUBLISHER=chemotion.net
-DATA_CITE_DEVICE_CREATOR=chemotion.net
-APPLICATION_TITLE='Chemotion Repo dev'
-
-#
-SYS_EMAIL: 'mail@chemotion.net'
-PUBLIC_COLL: 'chemotion'
diff --git a/app/api/chemotion/element_api.rb b/app/api/chemotion/element_api.rb
index 5d3c36217..e3b9e69ed 100644
--- a/app/api/chemotion/element_api.rb
+++ b/app/api/chemotion/element_api.rb
@@ -100,6 +100,13 @@ class ElementAPI < Grape::API
           deleted[klass.name] = @collection.send('elements').by_ui_state(params[klass.name]).destroy_all.map(&:id)
         end
 
+        sql_pub = "(element_id in (?) and element_type = 'Sample') or (element_id in (?) and element_type = 'Reaction')"
+        Publication.where(sql_pub, deleted['sample'], deleted['reaction'])
+                   .map(&:root).uniq.each do |e|
+          e.update_state(Publication::STATE_DECLINED)
+          e.proces_element(Publication::STATE_DECLINED)
+          e.inform_users(Publication::STATE_DECLINED, current_user.id)
+        end
         { selecteds: params[:selecteds].select { |sel| !deleted.fetch(sel['type'], []).include?(sel['id']) } }
       end
 
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 42a6893a8..4e8bc5893 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -899,6 +899,399 @@ def query_embargo(name)
           return { msg: { level: 'error', message: e } }
         end
       end
+
+      get 'collection' do
+        pub_coll = Collection.public_collection
+        if current_user
+          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
+          { id: coll.id, is_sync_to_me: true  }
+        else
+          { id: nil }
+        end
+      end
+
+      resource :pid do
+        params do
+          requires :id, type: Integer
+        end
+        desc "Query samples, reaction and datasets from publication id"
+        post do
+          pub = Publication.find(params[:id])
+          return "/home" unless pub
+
+          case pub.element_type
+          when 'Sample'
+            return "/molecules/#{pub.element.molecule_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            return "/review/review_sample/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state) && pub.ancestry.nil?
+            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
+              root = pub.root
+              return "/review/review_reaction/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
+            end
+          when 'Reaction'
+            return "/reactions/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            return "/review/review_reaction/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state)
+          when 'Container'
+            return "/datasets/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
+              root = pub.root
+              return "/review/review_#{root.element_type=='Reaction'? 'reaction' : 'sample'}/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
+            end
+          else
+            return "/home"
+          end
+        end
+      end
+
+      resource :inchikey do
+        params do
+          requires :inchikey, type: String
+          optional :type, type: String # value: []
+          optional :version, type: String
+        end
+        desc "Query samples and datasets from inchikey and type"
+        post do
+          inchikey = params[:inchikey]
+          molecule = Molecule.find_by(inchikey: inchikey)
+          return "/home" unless molecule
+
+          type = params[:type]
+          return "/molecules/#{molecule.id.to_s}" if type.empty?
+
+          version = params[:version] ? params[:version] : ""
+          analyses = Collection.public_collection.samples
+            .where("samples.molecule_id = ?", molecule.id.to_s)
+            .map(&:analyses).flatten
+
+          analyses_filtered = analyses.select { |a|
+            em = a.extended_metadata
+            check = em['kind'].to_s.gsub(/\s/, '') == type
+            check = check && (em['analysis_version'] || '1') == version unless version.empty?
+            check
+          }
+          analysis = analyses_filtered.first
+          return "/datasets/#{analysis.id.to_s}"
+        end
+      end
+
+      resource :molecules do
+        desc "Return PUBLIC serialized molecules"
+        params do
+          optional :page, type: Integer, desc: "page"
+          optional :pages, type: Integer, desc: "pages"
+          optional :per_page, type: Integer, desc: "per page"
+          optional :adv_flag, type: Boolean, desc: 'advanced search?'
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+        end
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: MoleculeGuestListSerializer do
+          public_collection_id = Collection.public_collection_id
+          params[:adv_val]
+          adv_search = ' '
+          if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
+            case params[:adv_type]
+            when 'Authors'
+              adv_search = <<~SQL
+                INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
+                and author_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            when 'Ontologies'
+              adv_search = <<~SQL
+                INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
+                and term_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            end
+          end
+          sample_join = <<~SQL
+            INNER JOIN (
+              SELECT molecule_id, published_at max_published_at, sample_svg_file
+              FROM (
+              SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
+              FROM samples, publications pub
+              WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+                and samples.id IN (
+                SELECT samples.id FROM samples
+                INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+                #{adv_search}
+              )) s where rownum = 1
+            ) s on s.molecule_id = molecules.id
+          SQL
+
+          paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(
+            <<~SQL
+              molecules.*, sample_svg_file
+            SQL
+          ))
+        end
+      end
+
+      resource :reactions do
+        desc 'Return PUBLIC serialized reactions'
+        params do
+          optional :page, type: Integer, desc: 'page'
+          optional :pages, type: Integer, desc: 'pages'
+          optional :per_page, type: Integer, desc: 'per page'
+          optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+          optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
+        end
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: ReactionGuestListSerializer do
+
+          if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
+            case params[:adv_type]
+            when 'Authors'
+              adv_search = <<~SQL
+                INNER JOIN publication_authors pub on pub.element_id = reactions.id and pub.element_type = 'Reaction' and pub.state = 'completed'
+                and author_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            when 'Ontologies'
+              str_term_id = params[:adv_val].split(',').map { |val| val}.to_s
+              adv_search = <<~SQL
+                INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
+                and term_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            else
+              adv_search = ' '
+            end
+          else
+            adv_search = ' '
+          end
+
+          if params[:scheme_only]
+            paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+          else
+            paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+          end
+        end
+      end
+
+      resource :publicElement do
+        desc "Return PUBLIC serialized elements (Reaction, sample)"
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: MoleculeGuestListSerializer do
+          public_collection_id = Collection.public_collection_id
+          sample_join = <<~SQL
+            INNER JOIN (
+              SELECT molecule_id, max(pub.published_at) max_updated_at
+              FROM samples
+              INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+              INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+              GROUP BY samples.molecule_id
+            ) s on s.molecule_id = molecules.id
+          SQL
+          paginate(Molecule.joins(sample_join).order("s.max_updated_at desc"))
+        end
+      end
+
+      resource :last_published do
+        desc "Return Last PUBLIC serialized entities"
+        get do
+          s_pub = Publication.where(element_type: 'Sample', state: 'completed').order(:published_at).last
+          sample = s_pub.element
+
+          r_pub = Publication.where(element_type: 'Reaction', state: 'completed').order(:published_at).last
+          reaction = r_pub.element
+
+          { last_published: { sample: { id: sample.id, sample_svg_file: sample.sample_svg_file, molecule: sample.molecule, tag: s_pub.taggable_data, contributor: User.find(s_pub.published_by).name  },
+          reaction: { id: reaction.id, reaction_svg_file: reaction.reaction_svg_file, tag: r_pub.taggable_data, contributor: User.find(r_pub.published_by).name } } }
+        end
+      end
+
+      resource :last_published_sample do
+        desc "Return PUBLIC serialized molecules"
+        get do
+          sample = Collection.public_collection.samples.includes(:molecule, :residues).
+          where("samples.id not in (select reactions_samples.sample_id from reactions_samples where type != 'ReactionsProductSample')").order(:created_at).last
+          #TODO have and use a dedicated serializer for public sample
+          sample
+        end
+      end
+
+      resource :dataset do
+        desc "Return PUBLISHED serialized dataset"
+        params do
+          requires :id, type: Integer, desc: "Dataset id"
+        end
+        get do
+          dataset = Container.find(params[:id])
+          sample = dataset.root.containable
+          cids = sample.collections.pluck :id
+          if cids.include?(Collection.public_collection_id)
+            molecule = sample.molecule
+
+            ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
+            ds_json[:dataset_doi] = dataset.full_doi
+            ds_json[:pub_id] = dataset.publication&.id
+
+            res = {
+              dataset: ds_json,
+              sample_svg_file: sample.sample_svg_file,
+              molecule: {
+                sum_formular: molecule.sum_formular,
+                molecular_weight: molecule.molecular_weight,
+                cano_smiles: molecule.cano_smiles,
+                inchistring: molecule.inchistring,
+                inchikey: molecule.inchikey,
+                molecule_svg_file: molecule.molecule_svg_file,
+                pubchem_cid: molecule.tag.taggable_data["pubchem_cid"]
+              },
+              license: dataset.tag.taggable_data["publication"]["license"] || 'CC BY-SA',
+              publication: {
+                author_ids: sample&.publication&.taggable_data['author_ids'] || [],
+                creators: sample&.publication&.taggable_data['creators'] || [],
+                affiliation_ids: sample&.publication&.taggable_data['affiliation_ids'] || [],
+                affiliations: sample&.publication&.taggable_data['affiliations'] || {},
+                published_at: sample&.publication&.taggable_data['published_at'],
+              }
+            }
+          else
+            res = nil
+          end
+
+          return res
+        end
+      end
+
+      resource :reaction do
+        helpers RepositoryHelpers
+        desc "Return PUBLISHED serialized reaction"
+        params do
+          requires :id, type: Integer, desc: "Reaction id"
+        end
+        get do
+          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
+          return nil unless r.present?
+
+          reaction = Reaction.where('id = ?', params[:id])
+          .select(
+            <<~SQL
+            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
+            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
+            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
+            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
+            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
+            reactions.duration
+            SQL
+          )
+          .includes(
+                container: :attachments
+          ).last
+          literatures = get_literature(params[:id],'Reaction') || []
+          reaction.products.each do |p|
+            literatures += get_literature(p.id,'Sample')
+          end
+          schemeList = get_reaction_table(params[:id])
+          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
+          entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
+          entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
+          entities[:isLogin] = current_user.present?
+          entities
+        end
+      end
+
+      resource :molecule do
+        desc "Return serialized molecule with list of PUBLISHED dataset"
+        params do
+          requires :id, type: Integer, desc: "Molecule id"
+          optional :adv_flag, type: Boolean, desc: "advanced search flag"
+          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+        end
+        get do
+          molecule = Molecule.find(params[:id])
+          pub_id = Collection.public_collection_id
+          if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
+            adv = <<~SQL
+              INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
+              and rs.author_id in ('#{params[:adv_val].join("','")}')
+            SQL
+          else
+            adv = ''
+          end
+
+          pub_samples = Collection.public_collection.samples
+            .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
+            .where(
+              <<~SQL
+                samples.id in (
+                  SELECT samples.id FROM samples
+                  INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+                  INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+                  #{adv}
+                )
+              SQL
+            )
+            .select(
+              <<~SQL
+              samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
+              SQL
+            )
+            .order('published_at desc')
+          published_samples = pub_samples.map do |s|
+            containers = Entities::ContainerEntity.represent(s.container)
+            tag = s.tag.taggable_data['publication']
+            #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
+            #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
+            #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
+            #aff = u.affiliations.first
+            next unless tag
+            literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
+              .joins("inner join users on literals.user_id = users.id")
+              .select(
+                <<~SQL
+                literatures.*,
+                json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
+                SQL
+              ).group('literatures.id').as_json
+            reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
+            pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
+            sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
+
+            tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file,
+              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, showed_name: s.showed_name, pub_id: pub.id)
+          end
+          published_samples = published_samples.flatten.compact
+
+          {
+            molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
+            published_samples: published_samples,
+            isLogin: current_user.nil? ? false : true
+          }
+        end
+      end
+
+      resource :metadata do
+        desc "metadata of publication"
+        params do
+          requires :id, type: Integer, desc: "Id"
+          requires :type, type: String, desc: "Type", values: %w[sample reaction container]
+        end
+        after_validation do
+          @publication = Publication.find_by(
+            element_type: params['type'].classify,
+            element_id: params['id']
+          )
+          error!('404 Publication not found', 404) unless @publication && @publication.state.include?("completed")
+        end
+        desc "Download metadata_xml"
+        get :download do
+          el_type = params['type'] == "container" ? "analysis" : params['type']
+          filename = URI.escape("metadata_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
+          content_type('application/octet-stream')
+          header['Content-Disposition'] = "attachment; filename=" + filename
+          env['api.format'] = :binary
+          @publication.metadata_xml
+        end
+      end
+
+      resource :published_statics do
+        desc 'Return PUBLIC statics'
+        get do
+          ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
+        end
+      end
     end
 
     namespace :upload do
diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index 6828f4df8..07c4bf6b9 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -105,6 +105,120 @@ class UserAPI < Grape::API
       end
     end
 
+    resource :collaborators do
+      namespace :list do
+        desc 'fetch collaborators of current user'
+        get do
+          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+          data = User.where(id: ids)
+          present data, with: Entities::CollaboratorEntity, root: 'authors'
+        end
+      end
+      namespace :user do
+        desc 'fetch collaborators of current user'
+        params do
+          optional :name, type: String
+          optional :first, type: String
+        end
+        get do
+          sql_str = []
+          if params[:name].present? && params[:first].present?
+            sql_str = [" LOWER(last_name) like ? and LOWER(first_name) like ? ",'%'+params[:name].downcase+'%','%'+params[:first].downcase+'%']
+          end
+          if !params[:name].present? && params[:first].present?
+            sql_str = [" LOWER(first_name) LIKE ? ",'%'+params[:first].downcase+'%']
+          end
+          if params[:name].present? && !params[:first].present?
+            sql_str = [" LOWER(last_name) LIKE ? ",'%'+params[:name].downcase+'%']
+          end
+
+          data = Person.where.not(confirmed_at: nil).where(sql_str)
+          present data, with: Entities::CollaboratorEntity, root: 'users'
+        end
+      end
+      namespace :add do
+        desc 'add user to my collabration'
+        params do
+          requires :id, type: Integer
+        end
+        post do
+          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: params[:id] })
+          user = User.find(params[:id])
+          present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+      namespace :add_aff do
+        desc 'add user to my collabration'
+        params do
+          requires :id, type: Integer
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          collaborator = User.find(params[:id])
+          aff = [Affiliation.find_or_create_by(country: params[:country],
+            organization: params[:organization], department: params[:department])]
+          collaborator.affiliations << aff unless aff.nil?
+          present collaborator, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+      namespace :delete do
+        desc 'remove user from my collabration'
+        params do
+          requires :id, type: Integer
+        end
+        post do
+          uc = UsersCollaborator.find_by(user_id: current_user.id, collaborator_id: params[:id])
+          uc.delete
+          #present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+      namespace :delete_aff do
+        desc 'remove affilication from my collabration'
+        params do
+          requires :user_id, type: Integer
+          requires :aff_id, type: Integer
+        end
+        post do
+
+          ua = UserAffiliation.find_by(user_id: params[:user_id], affiliation_id: params[:aff_id])
+          ua.destroy!
+
+          user = User.find(params[:user_id])
+          present user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+      namespace :create do
+        desc 'create and add user to my collabration'
+        params do
+          requires :lastName, type: String
+          requires :firstName, type: String
+          optional :email, type: String
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          attributes = {} #declared(params, include_missing: false)
+          attributes[:first_name] = params[:firstName]
+          attributes[:last_name] = params[:lastName]
+          attributes[:type] = 'Collaborator'
+          attributes[:confirmed_at] = DateTime.now
+          attributes[:name_abbreviation] = "c#{SecureRandom.random_number(9999)}"
+          attributes[:password] = Devise.friendly_token.first(8)
+          attributes[:email] = "#{current_user.name_abbreviation}.#{attributes[:name_abbreviation]}@chemotion.net"
+          new_user = User.create!(attributes)
+          new_user.profile.update!({data: {}})
+          new_user.affiliations = [Affiliation.find_or_create_by(country: params[:country],
+            organization: params[:organization], department: params[:department])]
+
+          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: new_user.id })
+          present new_user, with: Entities::CollaboratorEntity, root: 'user'
+        end
+      end
+    end
+
     resource :groups do
       rescue_from ActiveRecord::RecordInvalid do |error|
         message = error.record.errors.messages.map do |attr, msg|
diff --git a/app/api/helpers/collection_helpers.rb b/app/api/helpers/collection_helpers.rb
index c624788b0..e4002a647 100644
--- a/app/api/helpers/collection_helpers.rb
+++ b/app/api/helpers/collection_helpers.rb
@@ -155,4 +155,27 @@ def set_var_for_unsigned_user
       researchplan_detail_level: 0
     }
   end
+
+  def check_params_collection_id
+    params[:collection_id] = case params[:collection_id]
+                             when 'public'
+                               Collection.public_collection_id
+                             when 'schemeOnly'
+                               Collection.scheme_only_reactions_collection_id
+                             else
+                               params[:collection_id]
+                             end
+  end
+
+  def set_var_for_unsigned_user
+    params[:is_sync] = false
+    @dl = {
+      permission_level: 0,
+      sample_detail_level: 10,
+      reaction_detail_level: 10,
+      wellplate_detail_level: 0,
+      screen_detail_level: 0,
+      researchplan_detail_level: 0
+    }
+  end
 end
diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/assets/javascripts/components/PublishCommon.js
new file mode 100644
index 000000000..1604f1ae5
--- /dev/null
+++ b/app/assets/javascripts/components/PublishCommon.js
@@ -0,0 +1,316 @@
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+  OverlayTrigger,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Aviator from 'aviator';
+import Sample from './models/Sample';
+import { sampleShowOrNew, reactionShow } from './routesUtils';
+import Reaction from './models/Reaction';
+import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '5px',
+  marginRight: '5px'
+};
+
+const handleClick = (e, id, clickType) => {
+  e.preventDefault();
+  e.stopPropagation();
+  const uri = Aviator.getCurrentURI();
+  const uriArray = uri.split(/\//);
+  switch (clickType) {
+    case 'Reaction':
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
+      reactionShow({ params: { reactionID: id } });
+      break;
+
+    default:
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
+      sampleShowOrNew({ params: { sampleID: id } });
+      break;
+  }
+};
+
+const validateMolecule = (element) => {
+  const validates = [];
+  const sample = element;
+  const analyses = sample.analysisArray();
+  analyses.forEach((al) => {
+    const status = al.extended_metadata.status || '';
+    const kind = al.extended_metadata.kind || '';
+    if (status !== 'Confirmed') {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
+    }
+    if (kind === '' || (kind.split('|').length < 2)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
+    }
+    if (!isNmrPass(al, sample)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
+    }
+    if (!isDatasetPass(al)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
+    }
+  });
+  return validates;
+};
+
+const PublishBtnReaction = ({ reaction, showModal }) => {
+  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
+  // NB set publishedId to true to hide it
+  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
+  const notPublishable = reaction.notPublishable; // false or [samples]
+  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
+  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
+  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
+  return (
+    (!publishedId && !tagData.publication) ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
+      >
+        <Button
+          // style={{ display: 'none' }}
+          bsStyle="success"
+          bsSize="xsmall"
+          className="button-right"
+          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
+          onClick={() => showModal(!isDisabled)}
+          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
+        >
+          <i className="fa fa-paper-plane" />
+        </Button>
+      </OverlayTrigger>
+    ) : <span />
+  );
+};
+
+PublishBtnReaction.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
+
+const PublishBtn = ({ sample, showModal }) => {
+  const tagData = (sample.tag && sample.tag.taggable_data) || {};
+
+  const publishedId = tagData.public_sample;
+  const isPoly = sample._contains_residues;
+
+  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
+    >
+      <Button
+        bsStyle="success"
+        bsSize="xsmall"
+        className="button-right"
+        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+        onClick={() => showModal(!isPoly)}
+        // disabled={isPoly}
+        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
+      >
+        <i className="fa fa-paper-plane" />
+      </Button>
+    </OverlayTrigger>
+  ) : <span />;
+};
+
+PublishBtn.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  sample: PropTypes.instanceOf(Sample).isRequired,
+};
+
+const ReviewPublishBtn = ({ element, showComment, validation }) => {
+  const tagData = (element.tag && element.tag.taggable_data) || {};
+  const publishedId = tagData.public_sample || tagData.public_reaction;
+  const isDecline = (tagData && tagData.decline === true) || false;
+  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
+
+  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
+  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
+                    >
+                      <Button
+                        bsStyle="danger"
+                        bsSize="xsmall"
+                        className="button-right"
+                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+                        onClick={() => validation(element)}
+                      >
+                        <i className="fa fa-paper-plane" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />);
+  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
+                    >
+                      <Button
+                        bsSize="xsmall"
+                        bsStyle="success"
+                        target="_blank"
+                        className="button-right"
+                        onClick={showComment}
+                      >
+                        <i className="fa fa-comments" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />)
+  return (
+    <span>
+    {reviewBtn}
+    {commentBtn}
+    </span>
+  )
+};
+
+
+const PublishedTag = ({ element }) => {
+  const tag = (element && element.tag) || {};
+  const tagData = (tag && tag.taggable_data) || {};
+  const tagType = tag.taggable_type;
+  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
+  let tip = '';
+  let publishedId;
+  switch (tagType) {
+    case 'Reaction':
+      publishedId = tagData.public_reaction;
+      if (isPending) {
+        tip = 'Reaction is being reviewed';
+      } else {
+        tip = 'Reaction has been published';
+      }
+      break;
+
+    default:
+      publishedId = tagData.public_sample;
+      if (isPending) {
+        tip = 'Sample is being reviewed';
+      } else {
+        tip = 'Sample has been published';
+      }
+      break;
+  }
+  return (
+    publishedId ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="data public">{tip}</Tooltip>}
+      >
+        <Button
+          bsSize="xsmall"
+          bsStyle={isPending ? 'warning' : 'danger'}
+          style={labelStyle}
+          onClick={event => handleClick(event, publishedId, tagType)}
+        >
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    ) : null
+  );
+};
+
+PublishedTag.propTypes = {
+  element: PropTypes.object,
+};
+
+const LabelPublication = ({ element }) => {
+  const publication = element.tag && element.tag.taggable_data &&
+    element.tag.taggable_data.publication;
+
+  if (!publication) { return null; }
+
+  const time = new Date(publication.published_at || publication.doi_reg_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const contributor = publication.contributors && publication.contributors.name;
+  const publishedBy = publication.creators && publication.creators[0] && publication.creators[0].name;
+  const tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
+  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
+    element.publication.taggable_data.scheme_only === true) || false;
+  const pubDoi = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`
+
+
+  if (publication.published_at) {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
+        onClick={e => e.stopPropagation()}
+      >
+        <Button
+          bsSize="xsmall"
+          bsStyle="default"
+          style={labelStyle}
+          target="_blank"
+          href={pubDoi}
+        >
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  } else {
+    return (<span />);
+  }
+}
+
+LabelPublication.propTypes = {
+  element: PropTypes.object,
+}
+
+
+const ChemotionTag = ({ tagData, firstOnly = false }) => {
+  const chemotionTag = tagData.chemotion;
+  if (!chemotionTag) { return null; }
+  const { chemotion_first, last_published_at, doi } = chemotionTag;
+  if (firstOnly && !chemotion_first) { return null; }
+  const time = new Date(chemotion_first || last_published_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
+    : `Last published on ${formattedTime}`;
+  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
+
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
+      <a
+        style={labelStyle}
+        // bsSize="xsmall"
+        // bsStyle="default"
+        target="_blank"
+        href={`https://dx.doi.org/${doi}`}
+      >
+        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
+        {first}
+        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
+      </a>
+
+
+
+    </OverlayTrigger>
+  );
+};
+
+
+ChemotionTag.propTypes = {
+  tagData: PropTypes.object,
+};
+ChemotionTag.defaultProps = {
+  tagData: {},
+};
+
+module.exports = {
+  LabelPublication,
+  PublishedTag,
+  ChemotionTag,
+  PublishBtn,
+  PublishBtnReaction,
+  ReviewPublishBtn,
+  validateMolecule,
+};
diff --git a/app/assets/javascripts/components/PublishReactionContainers.js b/app/assets/javascripts/components/PublishReactionContainers.js
new file mode 100644
index 000000000..3746a575c
--- /dev/null
+++ b/app/assets/javascripts/components/PublishReactionContainers.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  PanelGroup,
+  Panel,
+  Button,
+} from 'react-bootstrap';
+import ContainerComponent from './ContainerComponent';
+import PrintCodeButton from './common/PrintCodeButton';
+import Reaction from './models/Reaction';
+
+export default class PublishReactionContainers extends Component {
+  constructor(props) {
+    super();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      activeContainer: 0
+    };
+
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({ activeContainer: key });
+  }
+
+  render() {
+    const {reaction, activeContainer} = this.state;
+    const {readOnly} = this.props;
+
+    let containerHeader = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          {container.name}
+          {titleKind}
+          {titleStatus}
+          <Button
+            bsSize="xsmall"
+            bsStyle="danger"
+            className="button-right"
+            disabled={readOnly}
+            onClick={() => this.handleOnClickRemove(container)}
+          >
+            <i className="fa fa-trash" />
+          </Button>
+          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
+        </div>
+      )
+    };
+
+    let containerHeaderDeleted = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          <strike>
+            {container.name}
+            {titleKind}
+            {titleStatus}
+          </strike>
+          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
+                  onClick={() => this.handleUndo(container)}>
+            <i className="fa fa-undo"></i>
+          </Button>
+        </div>
+      )
+    };
+
+    if (reaction.container != null && reaction.container.children) {
+      const analyses_container = reaction.container.children.filter(element => (
+        ~element.container_type.indexOf('analyses')
+      ));
+
+      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
+        return (
+          <div>
+            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
+              {analyses_container[0].children.map((container, key) => {
+                if (container.is_deleted) {
+                  return (
+                    <Panel
+                      eventKey={key}
+                      key={`reaction_container_deleted_${container.id}`}
+                    >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                    </Panel>
+                  );
+                }
+
+                return (
+                  <Panel
+                    eventKey={key}
+                    key={`reaction_container_${container.id}`}
+                    onClick={this.handleAccordionOpen.bind(this, key)}
+                  >
+                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
+                    <Panel.Body collapsible>
+                      <ContainerComponent
+                        readOnly={readOnly}
+                        container={container}
+                        onChange={this.handleChange.bind(this, container)}
+                      />
+                    </Panel.Body>
+                  </Panel>
+                );
+              })}
+            </PanelGroup>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          style={{ marginBottom: '10px' }}
+          className="noAnalyses-warning"
+        >
+          There are currently no Analyses.
+        </div>
+      );
+    }
+
+    return (
+      <div className="noAnalyses-warning">
+        There are currently no Analyses.
+      </div>
+    );
+  }
+}
+
+PublishReactionContainers.propTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/assets/javascripts/components/PublishReactionModal.js
new file mode 100644
index 000000000..ca2b1dd86
--- /dev/null
+++ b/app/assets/javascripts/components/PublishReactionModal.js
@@ -0,0 +1,839 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel,
+  PanelGroup,
+  Button,
+  Modal,
+  Table,
+  Popover,
+  OverlayTrigger, FormGroup,
+  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
+  Form,
+  Grid,
+  ControlLabel
+} from 'react-bootstrap';
+import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
+import Select from 'react-select';
+import Immutable from 'immutable';
+
+import Reaction from './models/Reaction';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import ReactionsFetcher from './fetchers/ReactionsFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass, PublishTypeAs } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import { contentToText } from './utils/quillFormat';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
+);
+
+const skimAnalysis = (sample) => {
+  const analyses = sample.analysisArray();
+  const publishedAnalyses = analyses.filter(a =>
+    (a.extended_metadata &&
+      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+  return publishedAnalyses.filter(a =>
+    (a.extended_metadata &&
+      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+};
+
+const publishOptions = {
+  f: 'full',
+  s: 'scheme-only'
+};
+
+export default class PublishReactionModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      selectedUsers: [],
+      collaborations: [],
+      showPreview: false,
+      showScheme: false,
+      currentUser,
+      showRinchi: false,
+      showProp: false,
+      showTlc: false,
+      selectedRefs: [],
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: [],
+      noSolvent: false,
+      schemeDesc: false,
+      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
+    };
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handlePublishReaction = this.handlePublishReaction.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
+    this.handleYieldChange = this.handleYieldChange.bind(this);
+    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
+    this.handleUnitChange = this.handleUnitChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  handleInputChange(type, event) {
+    const { reaction } = this.state;
+    switch (type) {
+      case 'temperature':
+        reaction.temperature.userText = event.target.value;
+        break;
+      case 'temperatureUnit':
+        reaction.temperature = reaction.convertTemperature(event);
+        break;
+      case 'duration':
+        reaction.durationDisplay = { nextValue: event.target.value };
+        break;
+      case 'durationUnit':
+        reaction.durationDisplay = { nextUnit: true };
+        break;
+      default:
+        break;
+    }
+    this.setState({ reaction });
+  }
+
+  handleYieldChange(p, event) {
+    const { value } = event.target;
+    if (!isNaN(value)) {
+      const { reaction } = this.state;
+      const { products } = reaction;
+      const product = products.find(e => e.id === p.id);
+      if (typeof product !== 'undefined') {
+        product.equivalent = (value / 100);
+        products.splice(products.findIndex(e => e.id === p.id), 1, product);
+        reaction.products = products;
+        this.setState({ reaction });
+      }
+    }
+  }
+
+  handlePropertiesChange(type, event) {
+    if (type === 'temperature') {
+      this.handleInputChange(type, event);
+    }
+    if (type === 'duration') {
+      const { value } = event.target;
+      if (!isNaN(value)) {
+        this.handleInputChange(type, event);
+      }
+    }
+    if (type === 'schemeDesc') {
+      this.setState({ schemeDesc: !this.state.schemeDesc });
+    }
+  }
+
+  handleUnitChange(type, event) {
+    let index;
+    let unit;
+    switch (type) {
+      case 'temperatureUnit':
+        index = Reaction.temperature_unit.indexOf(event);
+        unit = Reaction.temperature_unit[(index + 1) % 3];
+        this.handleInputChange('temperatureUnit', unit);
+        break;
+      case 'durationUnit':
+        this.handleInputChange('durationUnit', event);
+        break;
+      default:
+        break;
+    }
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  handleNoSolventCheck() {
+    this.setState({ noSolvent: !this.state.noSolvent });
+  }
+
+  loadBundles() {
+    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+      const cols = result.repository;
+      const bundles = [];
+      if (cols && cols.length > 0) {
+        cols.forEach((col) => {
+          bundles.push({ value: col.id, name: col.label, label: col.label });
+        });
+        this.setState({ bundles });
+      }
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  loadMyCollaborations() {
+    UsersFetcher.fetchMyCollaborations()
+    .then((result) => {
+      this.setState({
+        collaborations: result.authors
+      });
+    });
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const aff = currentUser && currentUser.affiliations && Object.keys(currentUser.affiliations).map(k => (
+      <div>  -{currentUser.affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5> {currentUser.name} <br/> {aff} </div>)
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handleAnalysesChecked(analysis, elementType) {
+    const { reaction } = this.state;
+
+    reaction.changed = true;
+    if (elementType === 'Reaction') {
+      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+      // Find the index of the element and then replace
+      const index = findIndex(elements, { id: analysis.id });
+      if (index !== -1) {
+        elements.splice(index, 1, analysis);
+        this.setState(prevState => ({ ...prevState, reaction }));
+      }
+    }
+    if (elementType === 'Product') {
+      const analysesReactionProducts = reaction.products;
+      analysesReactionProducts.forEach((product) => {
+        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        // Find the index of the element and then replace
+        const index = findIndex(elements, { id: analysis.id });
+        if (index !== -1) {
+          elements.splice(index, 1, analysis);
+          this.setState(prevState => ({ ...prevState, reaction }));
+        }
+      });
+    }
+    this.props.onHandleAnalysesCheck(this.state.reaction);
+  }
+
+  validateAnalyses() {
+    let pas = this.state.reaction.products.reduce(
+      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(this.state.reaction)
+    );
+    if (pas.length === 0) {
+      return false;
+    }
+
+    pas = AnalysisIdstoPublish(this.state.reaction);
+    if (pas.length > 0) {
+      return true;
+    }
+
+    const { reaction } = this.state;
+    const { products } = reaction;
+    for (let i = 0; i < products.length; i += 1) {
+      const pa = skimAnalysis(products[i]);
+      if (pa.length > 0) { return true; }
+    }
+
+    return false;
+  }
+
+  handlePublishReaction() {
+    const { selectedLicense, cc0Consent, publishType, selectedUsers} = this.state;
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
+      return true;
+    }
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
+      alert("Please add an author or check 'add me as author'.");
+      return true;
+    }
+
+    const { reaction } = this.state;
+    if (isFullyPublish) {
+      const { samples } = reaction;
+      for (let i = 0; i < samples.length; i += 1) {
+        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
+      }
+    }
+
+    LoadingActions.start();
+    RepositoryActions.publishReaction({
+      isFullyPublish,
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      schemeDesc: this.state.schemeDesc,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide(false);
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reReaction) => {
+        this.props.onPublishRefreshClose(reReaction, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishReactionReserveDois({
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reaction) => {
+        this.props.onPublishRefreshClose(reaction, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+    const authorCount = selectedUsers && selectedUsers.length;
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const aff = u && u.affiliations && u.affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{a.label}<br/>{aff}<br/></div>)
+    });
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="80%" />
+            <th width="20%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            return (
+              <tr key={id}>
+                <td className="padding-right" style={{ display: 'inline-flex;' }}>
+                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                  >
+                    <Checkbox
+                      checked={selectedRefs.includes(id)}
+                      onChange={() => { this.handleRefCheck(id); }}
+                    >
+                      <span>Add to publication</span>
+                    </Checkbox>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  handlePublishTypeChange(e) {
+    const { publishType } = this.state;
+    publishType.selected = e;
+    this.setState({ publishType });
+  }
+
+  validatePub(isFullyPublish = true) {
+    const { reaction } = this.state;
+    const validates = [];
+    if (isFullyPublish) {
+      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+      const desc = contentToText(reaction.description).trim() || '';
+      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
+      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
+      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
+      const hasSv =
+        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
+      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
+      const hasProduct = reaction.products && reaction.products.length > 0;
+      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
+
+      (reaction.starting_materials || []).forEach((st) => {
+        if (!st.amount || !st.amount.value) {
+          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
+        }
+      });
+      (reaction.products || []).forEach((prod) => {
+        if (!prod.amount || !prod.amount.value) {
+          validates.push({ name: 'product-amount', value: false, message: `${prod.molecule_iupac_name}: amount is 0` });
+        }
+      });
+    } else {
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+    }
+    return validates;
+  }
+
+  render() {
+    const { show } = this.props;
+    const {
+      reaction, selectedUsers, selectedRefs, publishType
+    } = this.state;
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
+    const validateInfo = this.validatePub(isFullyPublish);
+    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
+    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
+    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
+    const validated = !!(validateObjs && validateObjs.length === 0);
+
+    let selectedAnalysesCount = (this.state.reaction.analyses || [])
+      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
+      && a.extended_metadata.kind)).length;
+
+    const productDOI = product => (
+      <tr key={`doi-product-row-${product.id}`}>
+        <td>
+          Product {product.name}
+        </td>
+        <td>
+          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    const productAnalysesDOI = analysis => (
+      <tr key={`doi-product-analysis-row-${analysis.id}`}>
+        <td>
+          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
+        </td>
+        <td>
+          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    if (show) {
+      const analysesView = [];
+      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+
+      selectedAnalysesCount = (analysesReaction || []).filter(a =>
+        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
+
+      const analysesViewReaction = analysesReaction.map(analysis => (
+        <PublishAnalysesTag
+          reaction={reaction}
+          analysis={analysis}
+          key={`reaction_${analysis.id}`}
+          analysesType="Reaction"
+          handleAnalysesChecked={this.handleAnalysesChecked}
+        />
+      ));
+      analysesView.push(analysesViewReaction);
+
+      const analysesReactionProductsDOIs = [];
+      const analysesReactionProducts = reaction.products;
+
+      analysesReactionProducts.forEach((product) => {
+        const arrP = [];
+        arrP.push(product);
+        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
+        analysesView.push(tmpProduct);
+
+        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        const tmpTag = tmp.map(analysis => (
+          <PublishAnalysesTag
+            reaction={reaction}
+            analysis={analysis}
+            key={`reaction_product_${analysis.id}`}
+            analysesType="Product"
+            handleAnalysesChecked={this.handleAnalysesChecked}
+            product={product}
+          />
+        ));
+        analysesView.push(tmpTag);
+        analysesReactionProductsDOIs.push(productDOI(product));
+        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
+        selectedAnalysesCount += (tmp || []).filter(a =>
+          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
+            && ((a.extended_metadata.status || '') === 'Confirmed')
+            && (isNmrPass(a, product))
+            && (isDatasetPass(a))
+          )).length;
+      });
+
+      const {
+        selectedEmbargo, selectedLicense, cc0Consent
+      } = this.state;
+
+      const publishTypeAs = {
+        ...publishType,
+        onChange: this.handlePublishTypeChange
+      };
+
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
+            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
+              <Grid style={{ width: '100%' }}>
+                <Col sm={6} lg={6}>
+                  <Form inline>
+                    <FormGroup controlId="frmCtrlPublishType">
+                      <ControlLabel>
+                        Publish Reaction as
+                      </ControlLabel>{' '}
+                      <PublishTypeAs {...publishTypeAs} />
+                    </FormGroup>
+                  </Form>
+                </Col>
+                <Col sm={6} lg={6}>
+                  {' '}
+                </Col>
+              </Grid>
+            </Modal.Header>
+            <Modal.Body style={{
+              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
+            }}
+            >
+              <EmbargoCom
+                opts={this.state.bundles}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <FormGroup>
+                <Col md={12} sm={12}>
+                  <div style={{
+                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
+                }}>{validateMsg}
+                  </div>
+                </Col>
+              </FormGroup>
+              <div className={`display-${isFullyPublish}`}>
+                <ReactionInfo
+                  reaction={reaction}
+                  toggleScheme={this.toggleScheme}
+                  showScheme={this.state.showScheme}
+                  isPublic={false}
+                  toggleRinchi={this.toggleRinchi}
+                  showRinchi={this.state.showRinchi}
+                  toggleProp={this.toggleProp}
+                  showProp={this.state.showProp}
+                  toggleTlc={this.toggleTlc}
+                  showTlc={this.state.showTlc}
+                />
+              </div>
+              <div className={`display-${!isFullyPublish}`}>
+                <ReactionSchemeOnlyInfo
+                  reaction={reaction}
+                  isPublic={false}
+                  schemeDesc={this.state.schemeDesc}
+                  onYieldChange={this.handleYieldChange}
+                  onPropertiesChange={this.handlePropertiesChange}
+                  onUnitChange={this.handleUnitChange}
+                />
+              </div>
+              <Checkbox
+                onChange={() => { this.handleNoSolventCheck(); }}
+                checked={this.state.noSolvent}
+                className={`display-${isFullyPublish}`}
+              >
+                <span>This reaction has no solvents</span>
+              </Checkbox>
+              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
+                <Panel
+                  eventKey="2"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <div>
+                      <Row>
+                        <Col md={12}>
+                          <h5>
+                            <b>Datasets: </b>
+                            <br />
+                          </h5>
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col md={12}>
+                          <PanelGroup accordion id={`panelgroup_ds_${reaction.id}`} defaultActiveKey={0}>
+                            {flatten(analysesView)}
+                          </PanelGroup>
+                        </Col>
+                      </Row>
+                    </div>
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="3"
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="5"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle>
+                      <h4> Select Reference ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+            </Modal.Body>
+            <Modal.Footer style={{ padding: '6px' }}>
+              <Button onClick={() => this.props.onHide(false)}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
+                Publish Reaction
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishReactionModal.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+  onHandleAnalysesCheck: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/assets/javascripts/components/PublishSampleModal.js
new file mode 100644
index 000000000..7f0930f03
--- /dev/null
+++ b/app/assets/javascripts/components/PublishSampleModal.js
@@ -0,0 +1,509 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel, PanelGroup, Modal, Table,
+  ListGroupItem, ListGroup, Button, Checkbox,
+  Popover, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import Select from 'react-select';
+import Immutable from 'immutable';
+import { sortedUniq } from 'lodash';
+
+import Sample from './models/Sample';
+import SampleDetailsContainers from './SampleDetailsContainers';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import { MoleculeInfo, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import SamplesFetcher from './fetchers/SamplesFetcher';
+import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+
+export default class PublishSampleModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { sample } = props;
+    this.state = {
+      sample,
+      selectedUsers: [],
+      showSelectionUser: false,
+      showSelectionAnalysis: false,
+      showPreview: false,
+      currentUser,
+      selectedRefs: [],
+      collaborations: [],
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: []
+    };
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handleSampleChanged = this.handleSampleChanged.bind(this);
+    this.handlePublishSample = this.handlePublishSample.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      sample: nextProps.sample,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  loadBundles() {
+    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+      const cols = result.repository;
+      const bundles = [];
+      if (cols && cols.length > 0) {
+        cols.forEach((col) => {
+          bundles.push({ value: col.id, name: col.label, label: col.label });
+        });
+        this.setState({ bundles });
+      }
+    });
+  }
+
+  loadMyCollaborations() {
+    UsersFetcher.fetchMyCollaborations()
+    .then((result) => {
+      this.setState({
+        collaborations: result.authors
+      });
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handleSampleChanged(sample) {
+    this.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  validateAnalyses() {
+    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
+  validateSubmission() {
+    const { sample } = this.state;
+    const analyses = sample.analysisArray();
+
+    if (!this.validateAnalyses()) {
+      return false;
+    }
+
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  handlePublishSample() {
+    const { selectedLicense, cc0Consent } = this.state;
+    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
+    const plural = authorCount > 0 ? 's' : '';
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (!this.validateSubmission()) {
+      alert('Submission Check fail. Please review your data and re-submit.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${plural}`);
+      return true;
+    }
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
+      alert("Please add an author or check 'add me as author.'");
+      return true;
+    }
+
+    const analyses = this.state.sample.analysisArray();
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
+          (isDatasetPass(a))))); // fail if Dataset check fail
+
+    const { sample } = this.state;
+    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
+
+    LoadingActions.start();
+    RepositoryActions.publishSample({
+      // sample: this.state.sample,
+      sample,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide();
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((reSample) => {
+        this.props.onPublishRefreshClose(reSample, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishSampleReserveDois({
+      sample: this.state.sample,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((sample) => {
+        this.props.onPublishRefreshClose(sample, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const aff = currentUser && currentUser.affiliations && Object.keys(currentUser.affiliations).map(k => (
+      <div>  -{currentUser.affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5> {currentUser.name} <br/> {aff} </div>)
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const aff = u && u.affiliations && u.affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{a.label}<br/>{aff}<br/></div>)
+    });
+
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="80%" />
+            <th width="20%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            return (
+              <tr key={id}>
+                <td className="padding-right">
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                  >
+                    <Checkbox
+                      checked={selectedRefs.includes(id)}
+                      onChange={() => { this.handleRefCheck(id); }}
+                    >
+                      <span>Add to publication</span>
+                    </Checkbox>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  render() {
+    const { show, onHide, sample } = this.props;
+    const canPublish = this.validateSubmission(); // this.validateAnalyses();
+    const {
+      showPreview,
+      selectedUsers,
+      selectedRefs
+    } = this.state;
+    const analyses = sample.analysisArray();
+    const selectedAnalysesCount = analyses.filter(
+      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
+
+    const { molecule } = sample;
+
+    const {
+      selectedEmbargo, selectedLicense, cc0Consent
+    } = this.state;
+
+    if (show) {
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Publish Sample
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
+              <EmbargoCom
+                opts={this.state.bundles}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <Panel>
+                <Panel.Body>
+                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
+                </Panel.Body>
+              </Panel>
+              <PanelGroup accordion id="publish-sample-config">
+                <Panel
+                  eventKey="2"
+                >
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <SampleDetailsContainers
+                      readOnly
+                      publish
+                      sample={sample}
+                      handleSampleChanged={this.handleSampleChanged}
+                    />
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="3">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="5">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Reference ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+              {showPreview ? null : null}
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={() => onHide()}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
+                Publish Sample
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishSampleModal.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
new file mode 100644
index 000000000..a4ef0d9f4
--- /dev/null
+++ b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from '../libHome/RepoReactionDetails';
+
+export default class ReactionDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reaction: null,
+      reviewLevel: 0,
+      pubState: '',
+      submitter: ''
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+    LoadingActions.start();
+    RepositoryFetcher.fetchReaction(this.props.reactionId, false)
+      .then((data) => {
+        LoadingActions.stop();
+        // refer to PublicStore.handleDisplayReviewReaction
+        if (data.reaction && data.reaction.reviewLevel === 0) {
+          console.log(data);
+        } else {
+          let comments = {};
+          let summary = '';
+          let feedback = '';
+          let pubState = '';
+
+          if (data.reaction && data.reaction.publication) {
+            const { publication } = data.reaction;
+            pubState = publication.state;
+
+            if (publication.review) {
+              const pr = publication.review;
+              comments = pr.comments ? pr.comments : {};
+              summary = pr.summary ? pr.summary : '';
+              feedback = pr.feedback ? pr.feedback : '';
+            }
+          }
+          this.setState({
+            reaction: data.reaction,
+            reviewLevel: data.reviewLevel,
+            commentInfo: comments,
+            summaryInfo: summary,
+            feedbackInfo: feedback,
+            pubState,
+            submitter: data.pub_name,
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(`ReactionDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  render() {
+    const { reaction } = this.state;
+    return reaction && reaction.publication ?
+      (
+        <RepoReactionDetails
+          reaction={reaction}
+          canComment
+          reviewLevel={this.state.reviewLevel}
+          submitter={this.state.submitter}
+          pubState={this.state.pubState}
+          comments={this.state.commentInfo ? this.state.commentInfo : {}}
+          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+ReactionDetailsRepoComment.propTypes = {
+  reactionId: PropTypes.number.isRequired,
+};
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/assets/javascripts/components/SampleDetailsRepoComment.js
new file mode 100644
index 000000000..58b65cfad
--- /dev/null
+++ b/app/assets/javascripts/components/SampleDetailsRepoComment.js
@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepoSampleDetails from '../libHome/RepoSampleDetails';
+
+export default class SampleDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      element: null,
+      reviewLevel: 0,
+      pubState: '',
+      submitter: ''
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+    LoadingActions.start();
+    RepositoryFetcher.fetchSample(this.props.sampleId, false)
+      .then((data) => {
+        LoadingActions.stop();
+        // refer to PublicStore.handleDisplayReviewSample
+        if (data.sample && data.reviewLevel === 0) {
+          console.log(data);
+        } else {
+          let comments = {};
+          let summary = '';
+          let feedback = '';
+          let pubState = '';
+
+          if (data.sample && data.publication) {
+            const { publication } = data;
+            pubState = publication.state;
+
+            if (publication.review) {
+              const pr = publication.review;
+              comments = pr.comments ? pr.comments : {};
+              summary = pr.summary ? pr.summary : '';
+              feedback = pr.feedback ? pr.feedback : '';
+            }
+          }
+          this.setState({
+            element: data,
+            commentInfo: comments,
+            summaryInfo: summary,
+            feedbackInfo: feedback,
+            submitter: data.pub_name,
+            reviewLevel: data.reviewLevel,
+            pubState
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(`SampleDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  render() {
+    const { element } = this.state;
+    return element && element.sample && element.publication ?
+      (
+        <RepoSampleDetails
+          element={element}
+          canComment
+          reviewLevel={this.state.reviewLevel}
+          submitter={this.state.submitter}
+          pubState={this.state.pubState}
+          comments={this.state.commentInfo ? this.state.commentInfo : {}}
+          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+SampleDetailsRepoComment.propTypes = {
+  sampleId: PropTypes.number.isRequired,
+};
diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
new file mode 100644
index 000000000..f2688e5f4
--- /dev/null
+++ b/app/assets/javascripts/components/actions/PublicActions.js
@@ -0,0 +1,394 @@
+import alt from '../alt'
+import PublicFetcher from '../fetchers/PublicFetcher'
+import NotificationActions from './NotificationActions';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+class PublicActions {
+
+  close(deleteEl) {
+    return { deleteEl }
+  }
+
+  getMolecules(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getReactions(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchMolecules(pageParams={}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchReactions(pageParams = {}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function (notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => {
+      PublicFetcher.searchPublicReactions(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        NotificationActions.removeByUid(uid);
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublished() {
+    return (dispatch) => {
+      PublicFetcher.fetchLastPublished()
+      .then((result) => {
+        dispatch(result.last_published)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublishedSample(){
+    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
+      .then((result) => {
+        dispatch(result.sample)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  openRepositoryPage(page) {
+    if (page) {
+      return page
+    } else {
+      return ""
+    }
+  }
+
+  displayDataset(id) {
+    return (dispatch) => { PublicFetcher.fetchDataset(id)
+      .then((result) => {
+        dispatch({dataset: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayMolecule(id, advFlag = false, advType = '', advVal = '') {
+    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
+      .then((result) => {
+        dispatch({moleculeData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReaction(id) {
+    return (dispatch) => { PublicFetcher.fetchReaction(id)
+      .then((result) => {
+        dispatch({reactionData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  articles() {
+    return (dispatch) => {
+      fetch('/newsroom/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({data: json});
+      }).catch((errorMessage) => {
+        dispatch({ data: [] });
+      });
+    };
+  }
+
+  editArticle(key) {
+    if (key === 'new') {
+      return (dispatch) => {
+          dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  displayArticle(key) {
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  howtos() {
+    return (dispatch) => {
+      fetch('/howto/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ data: json });
+        }).catch((errorMessage) => {
+          // console.log(errorMessage);
+          dispatch({ data: [] });
+        });
+    };
+  }
+
+  editHowTo(key) {
+    if (key === 'ein') {
+      return (dispatch) => {
+        dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  displayHowTo(key) {
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+        }}
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  selectPublicCollection() {
+    return (dispatch) => {
+      PublicFetcher.selectPublicCollection()
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); })
+    }
+  }
+
+  getElements(type='All', state='pending', page=1, perPage=10) {
+    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, page, perPage)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewReaction(id) {
+    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  reviewPublish(id, type, comments, summary, feedback, action) {
+    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comments, summary, feedback, action)
+      .then((result) => {
+        dispatch({ id :id, element: result, type: type, comments: comments, summary: summary, feedback: feedback, action: action })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  displayReviewEmbargo(type, id) {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoElement(type, id)
+      .then((result) => {
+        dispatch({ id, element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  generateEmbargoAccount(id) {
+    return (dispatch) => {
+      RepositoryFetcher.generateEmbargoAccount(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  fetchEmbargoBundle() {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+
+  releaseEmbargo(id) {
+    return (dispatch) => {
+      RepositoryFetcher.releaseEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  deleteEmbargo(id) {
+    return (dispatch) => {
+      RepositoryFetcher.deleteEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  moveEmbargo(id, newEmbargo, element) {
+    return (dispatch) => {
+      RepositoryFetcher.moveEmbargo(id, newEmbargo, element)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  getEmbargoElements(id) {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoElements(id)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  publishedStatics() {
+    return (dispatch) => {
+      PublicFetcher.publishedStatics()
+        .then((result) => {
+          dispatch(result.published_statics)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  updateComment(id, type, comments) {
+    return (dispatch) => {
+      RepositoryFetcher.updateComment(id, type, comments)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+}
+
+export default alt.createActions(PublicActions)
diff --git a/app/assets/javascripts/components/actions/RepositoryActions.js b/app/assets/javascripts/components/actions/RepositoryActions.js
new file mode 100644
index 000000000..80dd4d530
--- /dev/null
+++ b/app/assets/javascripts/components/actions/RepositoryActions.js
@@ -0,0 +1,65 @@
+import alt from '../alt';
+
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+
+class RepositoryActions {
+  publishSample(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  reviewPublish(element) {
+    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
+      .then((result) => {
+        dispatch({ element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishSampleReserveDois(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishReaction(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  publishReactionReserveDois(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+}
+
+export default alt.createActions(RepositoryActions);
diff --git a/app/assets/javascripts/components/common/DeleteConfirmBtn.js b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
new file mode 100644
index 000000000..afd1f3ef2
--- /dev/null
+++ b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  OverlayTrigger,
+  Popover
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const DeleteConfirmBtn = (props) => {
+  const popover = (
+    <Popover id="popover-positioned-scrolling-left">
+      delete: <br /> {props.label} ?<br />
+      <ButtonGroup>
+        <Button bsStyle="danger" bsSize="xsmall" onClick={() => props.onClickYes()} >
+          Yes
+        </Button>&nbsp;
+        <Button bsStyle="warning" bsSize="xsmall" onClick={() => props.onClickNo()} >
+          No
+        </Button>
+      </ButtonGroup>
+    </Popover>
+  );
+  return (
+    <ButtonGroup className="actions">
+      <OverlayTrigger
+        animation
+        placement={props.tipPlacement}
+        root
+        trigger="focus"
+        overlay={popover}
+      >
+        <Button bsSize="xsmall" bsStyle="danger" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    </ButtonGroup>
+  );
+};
+
+DeleteConfirmBtn.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClickYes: PropTypes.func.isRequired,
+  onClickNo: PropTypes.func,
+  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left'])
+};
+
+DeleteConfirmBtn.defaultProps = {
+  onClickNo: () => { },
+  tipPlacement: 'right'
+};
+
+export default DeleteConfirmBtn;
diff --git a/app/assets/javascripts/components/common/DropdownButtonSelection.js b/app/assets/javascripts/components/common/DropdownButtonSelection.js
new file mode 100644
index 000000000..1d03a4771
--- /dev/null
+++ b/app/assets/javascripts/components/common/DropdownButtonSelection.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+
+const DropdownButtonSelection = props =>
+  (
+    <DropdownButton
+      title={props.selected || props.placeholder}
+      key={props.selected}
+      id={`dropdown-${uuid.v4()}`}
+      onSelect={props.onSelect}
+    >
+      {
+        props.options.map(element => (
+          <MenuItem key={element} eventKey={element} disabled={props.disabled}>
+            {element}
+          </MenuItem>
+        ))
+      }
+    </DropdownButton>
+  );
+
+DropdownButtonSelection.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func,
+  disabled: PropTypes.bool
+};
+
+DropdownButtonSelection.defaultProps = {
+  selected: null,
+  onSelect: null,
+  disabled: false
+};
+
+export default DropdownButtonSelection;
diff --git a/app/assets/javascripts/components/common/InputButtonField.js b/app/assets/javascripts/components/common/InputButtonField.js
new file mode 100644
index 000000000..da8e5b8e5
--- /dev/null
+++ b/app/assets/javascripts/components/common/InputButtonField.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  FormGroup,
+  ControlLabel,
+  InputGroup,
+  FormControl,
+  OverlayTrigger,
+  Tooltip,
+  Button
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+
+const InputButtonField = props =>
+  (
+    <FormGroup>
+      <ControlLabel>{props.label}</ControlLabel>
+      <InputGroup>
+        <FormControl
+          type="text"
+          value={props.value}
+          placeholder={props.placeholder}
+          onChange={event => props.onInputChange(props.field, event)}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger
+            placement={props.tipPlacement}
+            overlay={<Tooltip id={`tooltip-${uuid.v4()}`}>{props.btnTip}</Tooltip>}
+          >
+            <Button
+              bsStyle="success"
+              onClick={() => props.onBtnClick(props.btnField, props.btnValue || '')}
+            >
+              {props.btnValue}
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+      </InputGroup>
+    </FormGroup>
+
+  );
+
+InputButtonField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  field: PropTypes.string.isRequired,
+  btnValue: PropTypes.string.isRequired,
+  btnField: PropTypes.string.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onBtnClick: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  btnTip: PropTypes.string,
+  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+};
+
+InputButtonField.defaultProps = {
+  placeholder: 'Please input...',
+  btnTip: 'click here',
+  tipPlacement: 'top'
+};
+
+export default InputButtonField;
diff --git a/app/assets/javascripts/components/common/NewsPreviewModal.js b/app/assets/javascripts/components/common/NewsPreviewModal.js
new file mode 100644
index 000000000..e7be6488c
--- /dev/null
+++ b/app/assets/javascripts/components/common/NewsPreviewModal.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Panel, Modal } from 'react-bootstrap';
+import QuillViewer from '../../components/QuillViewer';
+
+const NewsPreviewModal = ({ showModal, article, onClick }) => {
+  return (
+    <Modal animation show={showModal} dialogClassName="news-preview-dialog" onHide={() => onClick(false)}>
+      <Modal.Body>
+        <div>
+          <div className="ribbon ribbon-top-right"><span>Preview</span></div>
+          <Panel className="newseditor_review">
+            <Panel.Heading>
+              <span>{article.title}</span>
+              <div className="news_author">
+                <img src="/images/logo.png" alt="Preview" />&nbsp;
+                &nbsp;Creator
+                &nbsp;&nbsp;&nbsp;<i className="fa fa-pencil" aria-hidden="true" />&nbsp;Created Date
+              </div>
+              <br />
+              <div className="heading_separator" />
+            </Panel.Heading>
+            <Panel.Body>
+              <QuillViewer value={article.content} />
+            </Panel.Body>
+          </Panel>
+          <div className="ribbon ribbon-bottom-left"><span>Preview</span></div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default NewsPreviewModal;
diff --git a/app/assets/javascripts/components/common/RepoCommentBtn.js b/app/assets/javascripts/components/common/RepoCommentBtn.js
new file mode 100644
index 000000000..7d8646594
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoCommentBtn.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { CommentComponent } from '../../libHome/RepoReviewCommon';
+
+const RepoCommentBtn = (props) => {
+  const {
+    field, orgInfo, onShow, comments, submitter, reviewLevel, state
+  } = props;
+
+  const hasComment = field in comments;
+  let comment = (comments && comments[field]) ? CommentComponent(comments[field].comment, 'Reviewer: ', comments[field].feedback, `${submitter}: `) : <div />;
+
+  if (hasComment === false) {
+    comment = '';
+  }
+  const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
+
+  if (isEditable === false) {
+    return <span>{comment}</span>;
+  }
+
+  return (
+    <span>
+      <Button
+        bsStyle={hasComment ? 'success' : 'default'}
+        bsSize="xsmall"
+        onClick={() => onShow(true, field, orgInfo)}
+      >
+        <i className="fa fa-comment" />
+      </Button>
+      {comment}
+    </span>
+  );
+};
+
+RepoCommentBtn.propTypes = {
+  onShow: PropTypes.func.isRequired,
+  comments: PropTypes.object,
+  field: PropTypes.string,
+  orgInfo: PropTypes.string,
+  state: PropTypes.string,
+  reviewLevel: PropTypes.number,
+  submitter: PropTypes.string,
+  textAreaAttr: PropTypes.object
+};
+
+RepoCommentBtn.defaultProps = {
+  comments: null,
+  field: '',
+  orgInfo: '',
+  state: '',
+  reviewLevel: 0,
+  submitter: ''
+};
+
+export default RepoCommentBtn;
diff --git a/app/assets/javascripts/components/common/RepoCommentModal.js b/app/assets/javascripts/components/common/RepoCommentModal.js
new file mode 100644
index 000000000..f2f2caf7f
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoCommentModal.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, FormControl } from 'react-bootstrap';
+
+export default class RepoCommentModal extends React.Component {
+  render() {
+    const {
+      elementId, elementType, show, onHide, onUpdate, field, orgInfo,
+      commentObj, textAreaAttrs, state, reviewLevel
+    } = this.props;
+
+    const defaultAttrs = {
+      style: {
+        height: '100px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+    let comment = '';
+    if (typeof (commentObj) !== 'undefined') {
+      if (reviewLevel === 2) {
+        comment = commentObj.feedback;
+      } else {
+        comment = commentObj.comment;
+      }
+    }
+
+    const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
+    if (show) {
+      return (
+        <div>
+          <Modal
+            show
+            onHide={() => onHide(false, field)}
+            bsSize="large"
+            backdrop="static"
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Comment on: {field}
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              {orgInfo}
+              <br />
+              <FormControl
+                componentClass="textarea"
+                {...textAreaAttrs || defaultAttrs}
+                defaultValue={comment || ''}
+                inputRef={(m) => { this.commentInput = m; }}
+              />
+              <ButtonToolbar>
+                <Button
+                  onClick={() => onHide(false)}
+                > Close
+                </Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={!isEditable}
+                  onClick={() =>
+                    onUpdate(elementId, elementType, field, this.commentInput.value, orgInfo, true)}
+                >
+                  Update
+                </Button>
+              </ButtonToolbar>
+            </Modal.Body>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+RepoCommentModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired,
+  show: PropTypes.bool,
+  field: PropTypes.string,
+  commentObj: PropTypes.object,
+  orgInfo: PropTypes.string,
+  state: PropTypes.string,
+  reviewLevel: PropTypes.number,
+  submitter: PropTypes.string,
+  onUpdate: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired
+};
+
+RepoCommentModal.defaultProps = {
+  show: false,
+  reviewLevel: 0,
+  submitter: '',
+  field: '',
+  orgInfo: '',
+  state: ''
+};
diff --git a/app/assets/javascripts/components/common/RepoMetadataModal.js b/app/assets/javascripts/components/common/RepoMetadataModal.js
new file mode 100644
index 000000000..7defa8a65
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoMetadataModal.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+export default class RepoMetadataModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false,
+      metadata: []
+    };
+    this.loadMetadata = this.loadMetadata.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadMetadata();
+  }
+
+  loadMetadata() {
+    const { elementId, elementType } = this.props;
+    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
+      this.setState({ metadata: result.metadata });
+    });
+  }
+
+  render() {
+    const { modalShow, metadata } = this.state;
+    const { elementId, elementType } = this.props;
+    return (
+      <div>
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
+        >
+          <Button
+            onClick={() => this.setState({ modalShow: true })}
+            style={{ marginLeft: '5px' }}
+          >
+            <i className="fa fa-file-code-o" />&nbsp;
+            Metadata
+          </Button>
+        </OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="news-preview-dialog"
+        >
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              <h4>
+                <Label>
+                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
+                </Label>
+              </h4>
+            </div>
+            <div style={{
+              maxHeight: '50vh',
+              overflow: 'auto',
+              whiteSpace: 'pre',
+              backgroundColor: 'black',
+              color: 'white',
+              fontFamily: 'monospace'
+            }}
+            >
+              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
+            </div>
+            <br />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
+              > Download
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+RepoMetadataModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired
+};
diff --git a/app/assets/javascripts/components/common/RepoReviewModal.js b/app/assets/javascripts/components/common/RepoReviewModal.js
new file mode 100644
index 000000000..f83d034b1
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoReviewModal.js
@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, FormControl, Table } from 'react-bootstrap';
+
+const renderComments = (comments, submitter = '') => {
+  let commentsTbl = null;
+  if (comments && Object.keys(comments).length > 0) {
+    commentsTbl = Object.keys(comments).map((key, idx) => {
+      const info = comments[key];
+      return (
+        <tr key={key}>
+          <td style={{ width: '3%' }}>{idx + 1}</td>
+          <td style={{ width: '13%' }}>{key}</td>
+          <td style={{ width: '28%' }}>{info.origInfo}</td>
+          <td style={{ width: '28%' }}>{info.comment}</td>
+          <td style={{ width: '28%' }}>{info.feedback}</td>
+        </tr>
+      );
+    });
+  }
+
+  return (
+    <Table striped bordered hover>
+      <thead>
+        <tr>
+          <th width="3%">#</th>
+          <th width="13%">Column</th>
+          <th width="28%">Information</th>
+          <th width="28%">Review Comments</th>
+          <th width="28%">{submitter} Feedback</th>
+        </tr>
+      </thead>
+      <tbody>
+        {commentsTbl}
+      </tbody>
+    </Table>
+  );
+};
+
+export default class RepoReviewModal extends React.Component {
+  render() {
+    const {
+      show, elementId, action, onSubmit, onHide, summary, feedback, state, reviewLevel, submitter,
+      comments
+    } = this.props;
+
+    const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
+
+    let title = action;
+    if (reviewLevel === 2 && action === 'Decline') {
+      title = 'Withdraw';
+    } else if (reviewLevel === 3 && action === 'Decline') {
+      title = 'Reject';
+    }
+
+    if (show) {
+      return (
+        <div>
+          <Modal
+            show
+            onHide={() => onHide(false)}
+            bsSize="large"
+            backdrop="static"
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>
+                {title}
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <div id="div-modal-body" style={{ maxHeight: 'calc(100vh - 300px)', overflow: 'auto' }}>
+                {renderComments(comments, submitter)}
+                <br />
+                Review Summary
+                <FormControl
+                  componentClass="textarea"
+                  style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
+                  defaultValue={summary || ''}
+                  readOnly={!isEditable || reviewLevel === 2}
+                  disabled={!isEditable || reviewLevel === 2}
+                  inputRef={(m) => { this.summaryInput = m; }}
+                />
+                <br />
+                {submitter} Summary
+                <FormControl
+                  componentClass="textarea"
+                  style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
+                  defaultValue={feedback || ''}
+                  readOnly={!isEditable || reviewLevel === 3}
+                  disabled={!isEditable || reviewLevel === 3}
+                  inputRef={(m) => { this.feedbackInput = m; }}
+                />
+              </div>
+              <br />
+              <ButtonToolbar>
+                <Button
+                  bsStyle="warning"
+                  onClick={() => onHide(false)}
+                > Close
+                </Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={!isEditable}
+                  onClick={() =>
+                    onSubmit(
+                      elementId,
+                      comments,
+                      this.summaryInput.value,
+                      this.feedbackInput.value,
+                      action
+                    )
+                  }
+                > {title}
+                </Button>
+              </ButtonToolbar>
+            </Modal.Body>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+RepoReviewModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  action: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  comments: PropTypes.object,
+  summary: PropTypes.string,
+  feedback: PropTypes.string,
+  state: PropTypes.string,
+  reviewLevel: PropTypes.number,
+  submitter: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired
+};
+
+RepoReviewModal.defaultProps = {
+  show: false,
+  reviewLevel: 0,
+  summary: '',
+  feedback: '',
+  submitter: '',
+  state: ''
+};
diff --git a/app/assets/javascripts/components/common/SelectionField.js b/app/assets/javascripts/components/common/SelectionField.js
new file mode 100644
index 000000000..0637dc06a
--- /dev/null
+++ b/app/assets/javascripts/components/common/SelectionField.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  FormGroup,
+  ControlLabel,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import Select from 'react-select';
+
+const SelectionField = (props) => {
+  const label = props.label && props.label !== '' ?
+    <ControlLabel>{props.label}</ControlLabel> : '';
+  if (props.isCreatable) {
+    return (
+      <FormGroup>
+        {label}
+        <Select.Creatable
+          name={`select-${uuid.v4()}`}
+          options={props.options}
+          placeholder={props.placeholder}
+          multi={false}
+          isClearable
+          value={props.value}
+          onChange={event => props.onChange(props.field, event)}
+          promptTextCreator={p => `Create new ${p} ${props.label}`}
+        />
+      </FormGroup>
+    );
+  }
+  return (
+    <FormGroup>
+      {label}
+      <Select
+        name={`select-${uuid.v4()}`}
+        options={props.options}
+        placeholder={props.placeholder}
+        multi={false}
+        isClearable
+        value={props.value}
+        onChange={event => props.onChange(props.field, event)}
+      />
+    </FormGroup>
+  );
+};
+
+SelectionField.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  value: PropTypes.string.isRequired,
+  field: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  isCreatable: PropTypes.bool
+};
+
+SelectionField.defaultProps = {
+  label: '',
+  placeholder: 'Please select...',
+  isCreatable: false
+};
+
+export default SelectionField;
diff --git a/app/assets/javascripts/components/fetchers/ArticleFetcher.js b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
new file mode 100644
index 000000000..4c8d151e7
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
@@ -0,0 +1,111 @@
+import 'whatwg-fetch';
+
+export default class ArticleFetcher {
+  static initial() {
+    const promise = fetch('/api/v1/public/article_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdate(params) {
+    const promise = fetch('/api/v1/articles/create_or_update/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static delete(params) {
+    const promise = fetch(`/api/v1/articles/${params.key}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static initialHowTo() {
+    const promise = fetch('/api/v1/public/howto_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdateHowTo(params) {
+    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static deleteHowTo(params) {
+    const promise = fetch('/api/v1/articles/delete_howto', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static updateEditorImage(file, editorType) {
+    const data = new FormData();
+    data.append('file[]', file.file, file.name);
+    data.append('editor_type', editorType);
+    const promise = fetch('/api/v1/articles/editor_image', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+}
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
new file mode 100644
index 000000000..56c71c556
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/PublicFetcher.js
@@ -0,0 +1,229 @@
+import 'whatwg-fetch'
+import _ from 'lodash'
+import Molecule from '../models/Molecule';
+import Reaction from '../models/Reaction';
+
+export default class PublicFetcher {
+  static fetchPublicMolecules(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        molecules: json.molecules.map(m => new Molecule(m)),
+        page: parseInt(response.headers.get('X-Page')),
+        pages: parseInt(response.headers.get('X-Total-Pages')),
+        perPage: parseInt(response.headers.get('X-Per-Page'))
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchPublicReactions(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const schemeOnly = params.schemeOnly || false;
+    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
+
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        reactions: json.reactions.map(m => new Reaction(m)),
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchAdvancedValues(advType, name) {
+    return fetch(`/api/v1/public/find_adv_valuess.json?name=${name}&adv_type=${advType}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicMolecules(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
+        page: json.publicMolecules.page,
+        totalElements: json.publicMolecules.totalElements,
+        perPage: json.publicMolecules.perPage
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicReactions(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
+        page: json.publicReactions.page,
+        totalElements: json.publicReactions.totalElements,
+        perPage: json.publicReactions.perPage
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublished() {
+    const api = '/api/v1/public/last_published.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublishedSample() {
+    const api = '/api/v1/public/last_published_sample.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDataset(id) {
+    const api = `/api/v1/public/dataset.json?id=${id}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
+    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
+    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReaction(id) {
+    const api = `/api/v1/public/reaction.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static queryPid(params) {
+    const api = `/api/v1/public/pid/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: params.id
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static queryInchikey(params) {
+    const api = `/api/v1/public/inchikey/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          inchikey: params.inchikey,
+          type: params.type,
+          version: params.version
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static selectPublicCollection() {
+    return fetch(
+      '/api/v1/public/collection.json',
+      { credentials: 'same-origin' }
+    ).then((response) => { return response.json(); })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static publishedStatics() {
+    const api = '/api/v1/public/published_statics';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then((response) => {
+      return response.json();
+    })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static affiliations(type) {
+    const api = `/api/v1/public/affiliations/${type}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
new file mode 100644
index 000000000..0af446a60
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
@@ -0,0 +1,382 @@
+import 'whatwg-fetch';
+import Sample from '../models/Sample';
+import Reaction from '../models/Reaction';
+import NotificationActions from '../actions/NotificationActions';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray()
+    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    .map(x => x.id)
+);
+
+export default class RepositoryFetcher {
+  static generateEmbargoAccount(id) {
+    const api = '/api/v1/repository/embargo/account';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static releaseEmbargo(id) {
+    const api = '/api/v1/repository/embargo/release';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static deleteEmbargo(id) {
+    const api = '/api/v1/repository/embargo/delete';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static moveEmbargo(id, newEmbargo, element) {
+    const api = '/api/v1/repository/embargo/move';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static reviewPublish(element) {
+    const { id, type } = element;
+    return fetch('/api/v1/repository/reviewing/submit', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .then((json) => {
+        if (typeof json.reaction !== 'undefined') {
+          json.reaction.can_publish = false;
+          json.reaction.can_update = false;
+          return new Reaction(json.reaction);
+        } else if (type === 'sample') {
+          json.sample.can_publish = false;
+          json.sample.can_update = false;
+          return new Sample(json.sample);
+        }
+        return null;
+    })
+    .catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishSample(params, option = null) {
+    const { sample, coauthors, refs, embargo, license, addMe } = params;
+    const analysesIds = AnalysisIdstoPublish(sample);
+    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        sampleId: sample.id,
+        analysesIds,
+        coauthors,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish sample fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_sample_error'
+        };
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.sample.can_publish = true;
+        json.sample.can_update = true;
+      }
+      return new Sample(json.sample);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishReactionScheme(params) {
+    const {
+      reaction, coauthors, embargo, license, addMe, schemeDesc
+    } = params;
+    return fetch('/api/v1/repository/publishReactionScheme', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        temperature: reaction.temperature,
+        duration: reaction.durationDisplay,
+        products: reaction.products,
+        schemeDesc,
+        coauthors,
+        embargo,
+        license,
+        addMe
+      })
+    })
+      .then(response => (response.json()))
+      .then((json) => {
+        if (json.error) {
+          const notification = {
+            title: 'Publish reaction scheme fail',
+            message: `Error: ${json.error}`,
+            level: 'error',
+            dismissible: 'button',
+            autoDismiss: 6,
+            position: 'tr',
+            uid: 'publish_reaction_error'
+          };
+          NotificationActions.add(notification);
+          return null;
+        }
+        return new Reaction(json.reaction);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static publishReaction(params, option = null) {
+    const { reaction, coauthors, refs, embargo, license, isFullyPublish, addMe } = params;
+    if (!isFullyPublish) return this.publishReactionScheme(params);
+    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(reaction)
+    )
+    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        analysesIds,
+        coauthors,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish reaction fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_reaction_error'
+        };
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.reaction.can_publish = true;
+        json.reaction.can_update = true;
+      }
+      return new Reaction(json.reaction);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchEmbargoCollections() {
+    const api = '/api/v1/repository/embargo_list.json';
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElements(id) {
+    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReviewElements(type, state, page, perPage) {
+    const api = `/api/v1/repository/list.json?type=${type}&state=${state}&page=${page}&per_page=${perPage}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        elements: json.elements,
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
+        selectType: type,
+        selectState: state
+      })))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElement(type, id) {
+    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReaction(id, isPublic) {
+    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchSample(id, isPublic) {
+    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static saveComments(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comments', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static updateComment(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+  static repoReviewPublish(id, type, comments, summary, feedback, action) {
+    let api = '';
+    if (action === 'Comments') {
+      api = '/api/v1/repository/reviewing/comments';
+    } else if (action === 'Accept') {
+      api = '/api/v1/repository/reviewing/accepted';
+    } else if (action === 'Review') {
+      api = '/api/v1/repository/reviewing/reviewed';
+    } else if (action === 'Submit') {
+      api = '/api/v1/repository/reviewing/submit';
+    } else if (action === 'Decline') {
+      api = '/api/v1/repository/reviewing/declined';
+    } else {
+      // return;
+    }
+
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id, type, comments, summary, feedback
+      })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static previewMetadata(id, type) {
+    return fetch('/api/v1/repository/metadata/preview', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static zipPreviewMetadata(id, type) {
+    const currentTime = Math.floor(Date.now() / 1000);
+    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
+    return fetch('/api/v1/repository/metadata/preview_zip', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then((response) => {
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/assets/javascripts/components/report/SectionDoiList.js b/app/assets/javascripts/components/report/SectionDoiList.js
new file mode 100644
index 000000000..283a60f82
--- /dev/null
+++ b/app/assets/javascripts/components/report/SectionDoiList.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import ReportActions from '../actions/ReportActions';
+import ReportStore from '../stores/ReportStore';
+import { UserSerial } from '../utils/ReportHelper';
+import ReportsFetcher from '../fetchers/ReportsFetcher';
+
+
+const svgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+export default class SectionDoiList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      objs: props.objs,
+      molSerials: props.molSerials,
+      dois: []
+    };
+
+    this.initGetDoi = this.initGetDoi.bind(this);
+  }
+  componentDidMount() {
+    this.initGetDoi();
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.objs && nextProps.objs.length > 0) {
+      if (this.state.objs.length !== nextProps.objs.length) {
+        this.setState({ objs: nextProps.objs });
+        this.initGetDoi();
+      }
+    }
+    return true;
+  }
+
+  initGetDoi() {
+    ReportsFetcher.getDois(this.props.objs)
+      .then((result) => {
+        this.setState({
+          dois: result.dois
+        })
+      });
+  }
+
+  render() {
+    const { dois } = this.state;
+    let doiTbl = <span />
+    if (dois && dois.length > 0) {
+      doiTbl = dois.map((e) => {
+        let ds = <div />;
+        if (typeof (e.dois) !== 'undefined' && e.dois && e.dois.length > 0) {
+          ds = e.dois.map(d => d == null ? <div/> : (<div>{d}<br /></div>) )
+        }
+        return (
+          <tr key={e.element_id}>
+            <td style={{ width: '30%' }}>
+              <div>
+                <SVG src={svgPath(e.svg, e.element_type)} className="molecule-mid" key={e.svg} />
+              </div>
+            </td>
+            <td style={{ width: '70%' }}>{ds}</td>
+          </tr>
+        )
+      });
+    }
+    return (
+      <Table striped bordered hover>
+        <thead>
+          <tr>
+            <th width="30%">SVG</th>
+            <th width="70%">DOI</th>
+          </tr>
+        </thead>
+        <tbody>
+          { doiTbl }
+        </tbody>
+      </Table>
+    );
+  }
+}
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
new file mode 100644
index 000000000..b9a612a9f
--- /dev/null
+++ b/app/assets/javascripts/components/stores/PublicStore.js
@@ -0,0 +1,425 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import PublicActions from '../actions/PublicActions';
+import SearchActions from '../actions/ElementActions';
+import UIActions from '../actions/UIActions';
+
+class PublicStore {
+  constructor() {
+    this.molecules = [];
+    this.reactions = [];
+    this.page = 1;
+    this.pages = 1;
+    this.perPage = 10;
+    this.selectType;
+    this.selectState;
+    this.selectEmbargoId;
+    this.publishedStatics = [];
+    this.lastPublished;
+    this.lastPublishedSample;
+    this.guestPage = "";
+    this.currentElement = null;
+    this.queryId = -1;
+    this.news = {};
+    this.articles = [];
+    this.howto = {};
+    this.howtos = [];
+    this.bundles = [];
+
+    this.bindListeners({
+      handleGetMolecules: PublicActions.getMolecules,
+      handleGetReactions: PublicActions.getReactions,
+      handleSearchMolecules: PublicActions.getSearchMolecules,
+      handleSearchReactions: PublicActions.getSearchReactions,
+      handlePublishedStatics: PublicActions.publishedStatics,
+      handleLastPublished: PublicActions.lastPublished,
+      handleLastPublishedSample: PublicActions.lastPublishedSample,
+      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
+      handleDisplayDataset: PublicActions.displayDataset,
+      handleDisplayMolecule: PublicActions.displayMolecule,
+      handleDisplayReaction: PublicActions.displayReaction,
+      handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
+      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
+      handleClose: PublicActions.close,
+      handleArticles: PublicActions.articles,
+      handleEditArticle: PublicActions.editArticle,
+      handleDisplayArticle: PublicActions.displayArticle,
+      handleHowTos: PublicActions.howtos,
+      handleEditHowTo: PublicActions.editHowTo,
+      handleDisplayHowTo: PublicActions.displayHowTo,
+      handleGetElements: PublicActions.getElements,
+      handleGetEmbargoElements: PublicActions.getEmbargoElements,
+      handleDisplayReviewReaction: PublicActions.displayReviewReaction,
+      handleDisplayReviewSample: PublicActions.displayReviewSample,
+      handelReviewPublish: PublicActions.reviewPublish,
+      handelUpdateComment: PublicActions.updateComment,
+      handleFetchBundles: PublicActions.fetchEmbargoBundle,
+      handleDisplayEmbargoElement: PublicActions.displayReviewEmbargo,
+      handleEmbargoRelease: [PublicActions.releaseEmbargo, PublicActions.deleteEmbargo],
+      handleEmbargoMove: PublicActions.moveEmbargo,
+    });
+  }
+
+
+  handleClose({ deleteEl }) {
+    this.setState({
+      currentElement: null
+    });
+    if (this.guestPage === 'embargo') {
+      Aviator.navigate('/embargo', { silent: true });
+    } else if (this.guestPage === 'review') {
+      Aviator.navigate('/review', { silent: true });
+    } else {
+      Aviator.navigate('/publications', { silent: true });
+    }
+  }
+
+  handleClearSearchSelection(){
+    PublicActions.getMolecules.defer();
+  }
+
+  handleGetMolecules(results) {
+    const { molecules, page, pages, perPage } = results;
+    this.setState({ molecules, page, pages, perPage });
+  }
+
+  handleGetReactions(results) {
+    const { reactions, page, pages, perPage } = results;
+    this.setState({ reactions, page, pages, perPage });
+  }
+
+  handleSearchMolecules(results) {
+    const { molecules, page, perPage, totalElements } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      molecules, page, pages, perPage
+    });
+  }
+
+  handleSearchReactions(results) {
+    const {
+      reactions, page, perPage, totalElements
+    } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      reactions, page, pages, perPage
+    });
+  }
+
+  handlePublishedStatics(publishedStatics) {
+    if (publishedStatics) {
+      this.setState({ publishedStatics });
+    }
+  }
+
+  handleLastPublished(lastPublished) {
+    if (lastPublished) {
+      this.setState({ lastPublished });
+    }
+  }
+
+  handleLastPublishedSample(lastPublishedSample){
+    if (lastPublishedSample) {
+      this.setState({ lastPublishedSample });
+    }
+  }
+
+  handleOpenRepositoryPage(page) {
+    this.setState({ guestPage: page, currentElement: null });
+  }
+
+  handleDisplayDataset(result) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'dataset',
+      queryId: result.id,
+      currentElement: result.dataset
+    });
+    Aviator.navigate(`/publications/datasets/${result.id}`,
+      { silent: true });
+  }
+
+  handleDisplayMolecule(moleculeList) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'molecule',
+      queryId: moleculeList.id,
+      currentElement: moleculeList.moleculeData
+    });
+    Aviator.navigate(`/publications/molecules/${moleculeList.id}`, { silent: true });
+  }
+
+  handleDisplayReaction(reactionList) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'reaction',
+      queryId: reactionList.id,
+      currentElement: reactionList.reactionData
+    });
+    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
+  }
+
+  handleReceiveSearchresult(result) {
+    this.setState({ ...result.publicMolecules });
+  }
+
+  handleArticles(result) {
+    this.setState({
+      guestPage: 'newsroom',
+      articles: result.data
+    });
+  }
+
+  handleEditArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    news.article = news.article ? news.article : [];
+    this.setState({
+      guestPage: 'newseditor',
+      news,
+    });
+  }
+
+  handleDisplayArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    this.setState({
+      guestPage: 'newsreader',
+      news,
+    });
+  }
+
+  handleHowTos(result) {
+    this.setState({
+      guestPage: 'howto',
+      howtos: result.data
+    });
+  }
+
+  handleEditHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    howto.article = howto.article ? howto.article : [];
+    this.setState({
+      guestPage: 'howtoeditor',
+      howto,
+    });
+  }
+
+  handleDisplayHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    this.setState({
+      guestPage: 'howtoreader',
+      howto,
+    });
+  }
+
+  handleGetElements(results) {
+    const { elements, page, perPage, pages, selectType, selectState } = results;
+    this.setState({ elements, page, perPage, pages, selectType, selectState });
+  }
+
+  handleGetEmbargoElements(results) {
+    const { elements, current_user, embargo_id } = results;
+    this.setState({
+      selectEmbargoId: embargo_id,
+      elements,
+      currentElement: null,
+      currentUser: current_user
+    });
+  }
+
+  handelUpdateComment(result) {
+    this.setState({ commentInfo: result.comments });
+  }
+
+  handelReviewPublish(results) {
+    let newState = '';
+    switch (results.action) {
+      case 'Submit':
+        newState = 'pending';
+        break;
+      case 'Review':
+        newState = 'reviewed';
+        break;
+      case 'Accept':
+        newState = 'completed';
+        break;
+      case 'Reject':
+        newState = 'rejected';
+        break;
+      default:
+        newState = 'pending';
+    }
+
+    if (results.action == 'Comments') {
+      this.setState({
+        commentInfo: results.comments,
+        summaryInfo: results.summary,
+        feedbackInfo: results.feedback
+      });
+      } else {
+      this.setState({
+        pubState: newState,
+        commentInfo: results.comments,
+        summaryInfo: results.summary,
+        feedbackInfo: results.feedback
+      });
+      }
+
+    PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.page, this.perPage);
+  }
+
+  handleDisplayReviewReaction(result) {
+    let comments = {};
+    let summary = '';
+    let feedback = '';
+    let pubState = '';
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      if (result.element && result.element.reaction &&
+        result.element.reaction.publication) {
+        const { publication } = result.element.reaction;
+        pubState = publication.state;
+
+        if (publication.review) {
+          const pr = publication.review;
+          comments = pr.comments ? pr.comments : {};
+          summary = pr.summary ? pr.summary : '';
+          feedback = pr.feedback ? pr.feedback : '';
+        }
+      }
+
+      this.setState({
+        guestPage: 'review',
+        elementType: 'reaction',
+        queryId: result.id,
+        currentElement: result.element,
+        commentInfo: comments,
+        summaryInfo: summary,
+        feedbackInfo: feedback,
+        submitter: result.element.pub_name,
+        reviewLevel: result.element.reviewLevel,
+        pubState
+      });
+      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
+    }
+  }
+
+  handleDisplayReviewSample(result) {
+    let comments = {};
+    let summary = '';
+    let feedback = '';
+    let pubState = '';
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      if (result.element &&
+        result.element.publication) {
+        const { publication } = result.element;
+        pubState = publication.state;
+
+        if (publication.review) {
+          const pr = publication.review;
+          comments = pr.comments ? pr.comments : {};
+          summary = pr.summary ? pr.summary : '';
+          feedback = pr.feedback ? pr.feedback : '';
+        }
+      }
+      this.setState({
+        guestPage: 'review',
+        elementType: 'sample',
+        queryId: result.id,
+        currentElement: result.element,
+        commentInfo: comments,
+        summaryInfo: summary,
+        feedbackInfo: feedback,
+        submitter: result.element.pub_name,
+        reviewLevel: result.element.reviewLevel,
+        pubState
+      });
+      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
+    }
+  }
+
+  handleFetchBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push({ value: col.id, name: col.label, label: col.label });
+      });
+      this.setState({
+        bundles, current_user, elements: [], currentElement: null
+      });
+    } else {
+      this.setState({
+        bundles: [], current_user, elements: [], currentElement: null
+      });
+    }
+  }
+
+  handleDisplayEmbargoElement(result) {
+    let comments = {};
+    let summary = '';
+    let feedback = '';
+    let pubState = '';
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home/');
+    } else {
+      if (result.element &&
+        result.element.publication) {
+        const { publication } = result.element;
+        pubState = publication.state;
+
+        if (publication.review) {
+          const pr = publication.review;
+          comments = pr.comments ? pr.comments : {};
+          summary = pr.summary ? pr.summary : '';
+          feedback = pr.feedback ? pr.feedback : '';
+        }
+      }
+
+      const elementType = (result.element.sample ? 'sample' : 'reaction');
+
+      this.setState({
+        guestPage: 'embargo',
+        elementType,
+        queryId: result.id,
+        currentElement: result.element,
+        commentInfo: comments,
+        summaryInfo: summary,
+        feedbackInfo: feedback,
+        pubState,
+        reviewLevel: result.element.reviewLevel
+      });
+      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
+    }
+  }
+
+  handleEmbargoRelease(result) {
+    PublicActions.fetchEmbargoBundle();
+  }
+
+  handleEmbargoMove(results) {
+    const { col_id, is_new_embargo, new_embargo, message } = results.result;
+    if (is_new_embargo === true) {
+      this.bundles.push({value: new_embargo.id, name: new_embargo.label, label: new_embargo.label });
+    }
+    alert(message);
+    PublicActions.getEmbargoElements(col_id);
+  }
+}
+
+export default alt.createStore(PublicStore, 'PublicStore')
diff --git a/app/assets/javascripts/components/users/AuthorModal.js b/app/assets/javascripts/components/users/AuthorModal.js
new file mode 100644
index 000000000..8ce17612c
--- /dev/null
+++ b/app/assets/javascripts/components/users/AuthorModal.js
@@ -0,0 +1,516 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
+import { findIndex, filter } from 'lodash';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import SelectionField from '../common/SelectionField';
+import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+
+const sortList = data => data.sort((a, b) => a.name.localeCompare(b.name));
+const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
+const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation</Tooltip>;
+const addAffTooltip = <Tooltip id="addAff_tooltip">Add new affiliation</Tooltip>;
+
+const lineAff = (g, aff, onDeleteAff, handleInputChange) => {
+
+  let removeBtn = '';
+  if (g.type === 'Collaborator') {
+    removeBtn = (
+      <OverlayTrigger placement="right" overlay={removeAffTooltip} >
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          onClick={() => onDeleteAff(aff, g)}
+        >
+          <i className="fa fa-times" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+
+  return (
+    <tr>
+      <td width="30%">{aff.department}</td>
+      <td width="30%">{aff.organization}</td>
+      <td width="30%">{aff.country}</td>
+      <td width="10%">
+        { removeBtn }
+      </td>
+    </tr>
+  );
+}
+
+export default class AuthorModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      countries: [],
+      organizations: [],
+      departments: [],
+      authors: [],
+      users: [],
+      fields: {},
+      showNewUser: false
+    };
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.findUsers = this.findUsers.bind(this);
+    this.handleAddUser = this.handleAddUser.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.onAddAff = this.onAddAff.bind(this);
+    this.onDeleteAff = this.onDeleteAff.bind(this);
+  }
+
+  componentDidMount() {
+    UsersFetcher.fetchMyCollaborations()
+      .then((result) => {
+        if (result.authors && result.authors.length > 0) {
+          this.setState({ authors: sortList(result.authors) });
+        } else {
+          this.setState({ authors: [], users: [], fields: {}, showNewUser: false });
+        }
+      });
+    PublicFetcher.affiliations('countries').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
+      this.setState({ countries: affOption });
+    });
+    PublicFetcher.affiliations('organizations').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
+      this.setState({ organizations: affOption });
+    });
+    PublicFetcher.affiliations('departments').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
+      this.setState({ departments: affOption });
+    });
+  }
+
+  componentDidUpdate() {
+  }
+
+  handleHide() {
+    this.setState({ users: [], fields: {}, showNewUser: false });
+    this.props.onHide();
+  }
+
+  // inputs of create new group
+  handleInputChange(type, ev) {
+    let { fields } = this.state;
+    switch (type) {
+      case 'firstName':
+        fields.firstName = ev.currentTarget.value;
+        break;
+      case 'lastName':
+        fields.lastName = ev.currentTarget.value;
+        break;
+      case 'abbr':
+        fields.abbr = ev.currentTarget.value;
+        break;
+      case 'country':
+        fields.country = ev && ev.value;
+        break;
+      case 'organization':
+        fields.organization = ev && ev.value;
+        break;
+      case 'department':
+        fields.department = ev && ev.value;
+        break;
+      case 'search_key':
+        fields.search_key = ev.currentTarget.value;
+        break;
+      default:
+        if (typeof fields === 'undefined') {
+          fields = {};
+        }
+        fields[type] = ev && ev.value;
+    }
+    this.setState({ fields });
+  }
+
+  findUsers() {
+    const { fields } = this.state;
+    if ((!fields.firstName || fields.firstName.trim() === '') && (!fields.lastName || fields.lastName.trim() === '')) {
+      alert('Please input First Name or Last Name');
+      return false;
+    }
+    UsersFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '')
+      .then((result) => {
+        if (result.users && result.users.length > 0) {
+          this.setState({
+            users: sortList(result.users),
+            showNewUser: false,
+            fields: {}
+          });
+        } else {
+          this.setState({ showNewUser: true, users: [] });
+        }
+      });
+    return true;
+  }
+
+  handleAddUser(u) {
+    const { authors } = this.state;
+    UsersFetcher.AddMyCollaboration({ id: u.id })
+      .then((result) => {
+        authors.push(result.user);
+        this.setState({
+          authors: sortList(authors), users: [], fields: {}, showNewUser: false
+        });
+      });
+  }
+
+  createAdd() {
+    const { fields, authors } = this.state;
+
+    const nilFields = [];
+    if (!fields.firstName || fields.firstName.trim() === '') {
+      nilFields.push('First Name');
+    }
+    if (!fields.lastName || fields.lastName.trim() === '') {
+      nilFields.push('Last Name');
+    }
+    if (!fields.country || fields.country.trim() === '') {
+      nilFields.push('Country');
+    }
+    if (!fields.organization || fields.organization.trim() === '') {
+      nilFields.push('Organization');
+    }
+    if (!fields.department || fields.department.trim() === '') {
+      nilFields.push('Department');
+    }
+    if (nilFields.length > 0) {
+      alert(`Please input ${nilFields.join()}!`);
+      return false;
+    }
+
+    UsersFetcher.createAddMyCollaboration(fields)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          authors.push(result.user);
+          this.setState({
+            authors: sortList(authors), users: [], fields: {}
+          });
+        }
+      });
+    return true;
+  }
+
+  handleDeleteCollaborator(c) {
+    const { authors } = this.state;
+    UsersFetcher.deleteCollaboration({ id: c.id })
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          this.setState({
+            authors: filter(authors, o => o.id !== c.id)
+          });
+        }
+      });
+  }
+
+  onAddAff(g) {
+    const { authors, fields } = this.state;
+    const department = fields[`${g.id}@line_department`];
+    const organization = fields[`${g.id}@line_organization`];
+    const country = fields[`${g.id}@line_country`];
+    const params = { id: g.id, department, organization, country };
+
+
+    UsersFetcher.addCollaboratorAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          const idx = findIndex(authors, o => o.id === result.user.id);
+          authors.splice(idx, 1, result.user);
+          fields[`${g.id}@line_department`] = '';
+          fields[`${g.id}@line_organization`] = '';
+          fields[`${g.id}@line_country`] = '';
+          this.setState({ authors, fields });
+        }
+      });
+  }
+
+  onDeleteAff(a, g) {
+    const { authors } = this.state;
+
+    const params = { user_id: g.id, aff_id: a.id };
+
+    UsersFetcher.deleteCollaboratorAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          const idx = findIndex(authors, o => o.id === result.user.id);
+          authors.splice(idx, 1, result.user);
+
+          this.setState({ authors });
+        }
+      });
+  }
+
+  render() {
+    const { authors, users, showNewUser } = this.state;
+
+    const modalStyle = {
+      overflowY: 'auto',
+    };
+
+    let tbody = '';
+
+    const searchTbody = (users || []).map(g => (
+      <tbody key={`tbody_${g.id}`}>
+        <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+          <td>
+            <OverlayTrigger placement="right" overlay={addUserTooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle="warning"
+                onClick={() => this.handleAddUser(g)}
+              >
+                <i className="fa fa-floppy-o" aria-hidden="true" />
+              </Button>
+            </OverlayTrigger>
+            &nbsp;
+          </td>
+          <td>{g.name}</td>
+          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].department : ''}</td>
+          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].organization : ''}</td>
+          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].country : ''}</td>
+        </tr>
+      </tbody>
+    ));
+
+    if (Object.keys(authors).length <= 0) {
+      tbody = '';
+    } else {
+      tbody = authors.map(g => (
+        <tbody key={`tbody_${g.id}`}>
+          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+            <td>
+              <DeleteConfirmBtn
+                label={g.name}
+                onClickYes={() => this.handleDeleteCollaborator(g)}
+              />
+              &nbsp;
+            </td>
+            <td>{g.name}</td>
+            <td>
+              <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                <tbody>
+                  {
+                    g.affiliations && g.affiliations.length > 0 ?
+                      g.affiliations.map(a =>
+                      lineAff(g, a, this.onDeleteAff, this.handleInputChange)) : ' '
+                  }
+                  {
+                    g.type === 'Collaborator' ?
+                      (
+                        <tr>
+                          <td width="30%">
+                            <SelectionField
+                              options={this.state.departments}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || ''}
+                              field={`${g.id}@line_department`}
+                              placeholder="e.g. Institute of Organic Chemistry"
+                              onChange={this.handleInputChange}
+                              isCreatable
+                            />
+                          </td>
+                          <td width="30%">
+                            <SelectionField
+                              options={this.state.organizations}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || ''}
+                              field={`${g.id}@line_organization`}
+                              placeholder="e.g. Karlsruhe Institute of Technology"
+                              onChange={this.handleInputChange}
+                              isCreatable
+                            />
+                          </td>
+                          <td width="30%">
+                            <SelectionField
+                              options={this.state.countries}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_country`]) || ''}
+                              field={`${g.id}@line_country`}
+                              placeholder="e.g. Germany"
+                              onChange={this.handleInputChange}
+                            />
+                          </td>
+                          <td width="10%">
+                            <OverlayTrigger placement="right" overlay={addAffTooltip} >
+                              <Button
+                                bsSize="xsmall"
+                                bsStyle="success"
+                                onClick={() => this.onAddAff(g)}
+                              >
+                                <i className="fa fa-plus" aria-hidden="true" />
+                              </Button>
+                            </OverlayTrigger>
+                          </td>
+                        </tr>
+                      ) : ' '
+                  }
+                </tbody>
+              </Table>
+            </td>
+          </tr>
+        </tbody>
+      ));
+    }
+
+    let newAff = '';
+    if (showNewUser === true) {
+      newAff = (
+        <Form>
+          <SelectionField
+            label="Country"
+            options={this.state.countries}
+            value={this.state.fields.country || ''}
+            field="country"
+            placeholder="e.g. Germany"
+            onChange={this.handleInputChange}
+          />
+          <SelectionField
+            label="Organization"
+            options={this.state.organizations}
+            value={this.state.fields.organization || ''}
+            field="organization"
+            placeholder="e.g. Karlsruhe Institute of Technology"
+            onChange={this.handleInputChange}
+            isCreatable
+          />
+          <SelectionField
+            label="Department"
+            options={this.state.departments}
+            value={this.state.fields.department || ''}
+            field="department"
+            placeholder="e.g. Institute of Organic Chemistry"
+            onChange={this.handleInputChange}
+            isCreatable
+          />
+          <Button bsSize="small" bsStyle="warning" onClick={() => this.createAdd()}>
+            <i className="fa fa-file" aria-hidden="true" />&nbsp;
+            Create and Save to my collaboration
+          </Button>
+        </Form>
+      );
+    }
+
+    const newUserPanel = (
+      <Panel bsStyle="success">
+        <Panel.Heading>
+          <Panel.Title>
+            Add new collaborator
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body>
+          <Col md={4}>
+            <Form>
+              <FormGroup controlId="formInlineName">
+                <ControlLabel>First Name</ControlLabel>
+                <FormControl
+                  type="text"
+                  placeholder="eg: AK"
+                  value={this.state.fields.firstName || ''}
+                  onChange={e => this.handleInputChange('firstName', e)}
+                />
+              </FormGroup>
+              <FormGroup controlId="formInlineName">
+                <ControlLabel>Last Name</ControlLabel>
+                <FormControl
+                  type="text"
+                  placeholder="J. Moriarty"
+                  value={this.state.fields.lastName || ''}
+                  onChange={e => this.handleInputChange('lastName', e)}
+                />
+              </FormGroup>
+              <FormGroup controlId="formInlineNameAbbr">
+                <Button bsSize="small" bsStyle="success" onClick={() => this.findUsers()}>
+                  <i className="fa fa-search" aria-hidden="true" />&nbsp;
+                  Find
+                </Button>
+              </FormGroup>
+            </Form>
+          </Col>
+          <Col md={8}>
+            {newAff}
+          </Col>
+        </Panel.Body>
+      </Panel>
+    );
+
+    return (
+      <Modal
+        show={this.props.show}
+        dialogClassName="importChemDrawModal"
+        onHide={this.handleHide}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>My Collaboration</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={modalStyle}>
+          <div>
+            { newUserPanel }
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Search Result
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="10%">Action</th>
+                      <th width="20%">Name</th>
+                      <th width="20%">Department</th>
+                      <th width="20%">Organization</th>
+                      <th width="20%">Country</th>
+                    </tr>
+                  </thead>
+                  { searchTbody }
+                </Table>
+              </Panel.Body>
+            </Panel>
+            <Panel bsStyle="info">
+              <Panel.Heading>
+                <Panel.Title>
+                  My Collaboration
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="5%">Action</th>
+                      <th width="20%">Name</th>
+                      <th width="75%">
+                        <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                          <tbody>
+                            <td width="30%">Department</td>
+                            <td width="30%">Organization</td>
+                            <td width="30%">Country</td>
+                            <td width="10%">&nbsp;</td>
+                          </tbody>
+                        </Table>
+                      </th>
+                    </tr>
+                  </thead>
+                  { tbody }
+                </Table>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+AuthorModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
new file mode 100644
index 000000000..759167573
--- /dev/null
+++ b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
@@ -0,0 +1,52 @@
+import { isNmrPass, isDatasetPass } from '../../libHome/RepoCommon';
+
+const applyPublish = (el) => {
+  const ext = [];
+  el.analysisArray().forEach((ana) => {
+    const a = ana;
+    if (ana.extended_metadata &&
+      (((ana.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((ana.extended_metadata.status || '') === 'Confirmed') && // && // fail if status is not set to Confirmed
+        (isNmrPass(ana, el)) && // fail if NMR check fail
+        (isDatasetPass(ana))
+      )) {
+      if (typeof ana.extended_metadata.publish === 'undefined') {
+        a.extended_metadata.publish = true;
+      }
+    }
+    ext.push(a);
+  });
+  return ext;
+};
+
+const defaultAnalysisPublish = (el) => {
+  const element = el;
+  switch (el.type) {
+    case 'sample': {
+      const ext = applyPublish(element);
+      if (ext.length > 0) {
+        const analyses = element.container.children.find(c => (c && c.container_type === 'analyses'));
+        analyses.children = ext;
+      }
+      break;
+    }
+    case 'reaction': {
+      // reset analysis.publish of products
+      if (typeof el.products !== 'undefined' && el.products.length > 0) {
+        element.products.forEach((p) => {
+          const prodAna = applyPublish(p);
+          if (prodAna.length > 0) {
+            const analyses = p.container.children.find(c => (c && c.container_type === 'analyses'));
+            analyses.children = prodAna;
+          }
+        });
+      }
+      break;
+    }
+    default:
+      break;
+  }
+  return element;
+};
+
+export default defaultAnalysisPublish;
diff --git a/app/assets/javascripts/libHome/ContainerComponent.js b/app/assets/javascripts/libHome/ContainerComponent.js
new file mode 100644
index 000000000..0c19871fd
--- /dev/null
+++ b/app/assets/javascripts/libHome/ContainerComponent.js
@@ -0,0 +1,98 @@
+import React, {Component} from 'react';
+import {Col, FormControl,FormGroup, ControlLabel} from 'react-bootstrap';
+import Select from 'react-select'
+import ContainerDatasets from '../components/ContainerDatasets';
+import QuillViewer from '../components/QuillViewer'
+
+import {sampleAnalysesContentSymbol} from '../components/utils/quillToolbarSymbol'
+import {confirmOptions} from '../components/staticDropdownOptions/options';
+
+export default class ContainerComponent extends Component {
+  constructor(props) {
+    super();
+    const {container} = props;
+    this.state = {
+      container
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    });
+  }
+
+
+
+  render() {
+    const {container} = this.state;
+
+    let quill = (
+        <QuillViewer value={container.extended_metadata['content']} />
+      )
+
+
+    return (
+      <div className="small-p">
+        {/* <Col md={4}>
+          <label>Name</label>
+          <FormControl
+            type="text"
+            label="Name"
+            value={container.name || '***'}
+            disabled/>
+        </Col>
+        <Col md={4}>
+          <div style={{marginBottom: 11}}>
+            <label>Type</label>
+            <Select
+              name='kind'
+              multi={false}
+              options={kindOptions}
+              value={container.extended_metadata['kind']}
+              disabled
+
+              />
+          </div>
+        </Col>
+        <Col md={4}>
+          <div style={{marginBottom: 11}}>
+            <label>Status</label>
+            <Select
+              name='status'
+              multi={false}
+              options={confirmOptions}
+              value={container.extended_metadata['status']}
+              disabled
+
+            />
+          </div>
+        </Col> */}
+        {/* <Col md={12}>
+        <FormGroup>
+          <ControlLabel>Content</ControlLabel>
+          {quill}
+        </FormGroup>
+          <FormGroup>
+            <ControlLabel>Description</ControlLabel>
+            <FormControl
+              componentClass="textarea"
+              label="Description"
+              value={container.description || ''}
+              disabled
+              />
+          </FormGroup>
+        </Col> */}
+        <Col md={12}>
+          <label>Datasets</label>
+          <ContainerDatasets
+            container={container}
+            readOnly
+            disabled
+            onChange={container => this.props.onChange(container)}
+            />
+        </Col>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/NavFooter.js b/app/assets/javascripts/libHome/NavFooter.js
new file mode 100644
index 000000000..a1e4c8073
--- /dev/null
+++ b/app/assets/javascripts/libHome/NavFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Nav, NavItem } from 'react-bootstrap';
+import PublicActions from '../components/actions/PublicActions';
+
+const NavFooter = () => {
+  return (
+    <Nav justified>
+      <NavItem eventKey="21" role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')}>
+        Home
+      </NavItem>
+      <NavItem eventKey="22" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/publications')}>
+        Publications
+      </NavItem>
+      <NavItem eventKey="23" title="Item" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/about')} >
+        About
+      </NavItem>
+      <NavItem eventKey="24" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/directive')} >
+        Terms of service
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default NavFooter;
diff --git a/app/assets/javascripts/libHome/Navigation.js b/app/assets/javascripts/libHome/Navigation.js
new file mode 100644
index 000000000..09fbcc1bf
--- /dev/null
+++ b/app/assets/javascripts/libHome/Navigation.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Nav, Navbar, NavItem, Label } from 'react-bootstrap';
+import UserAuth from '../components/UserAuth';
+import ManagingActions from '../components/managing_actions/ManagingActions';
+import ContextActions from '../components/contextActions/ContextActions';
+import UserStore from '../components/stores/UserStore';
+import UIStore from '../components/stores/UIStore';
+import UserActions from '../components/actions/UserActions';
+import UIActions from '../components/actions/UIActions';
+import ElementActions from '../components/actions/ElementActions';
+import NavNewSession from './NavNewSession';
+import NavHead from './NavHead';
+import DocumentHelper from '../components/utils/DocumentHelper';
+import NavigationModal from '../components/NavigationModal';
+import PublicActions from '../components/actions/PublicActions';
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null,
+      modalProps: {
+        show: false,
+        title: '',
+        component: '',
+        action: null,
+        listSharedCollections: false,
+      }
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onUIChange = this.onUIChange.bind(this);
+    // this.toggleCollectionTree = this.toggleCollectionTree.bind(this)
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIChange);
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIChange);
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
+  }
+
+  onUIChange(state) {
+    this.setState({
+      modalProps: state.modalParams,
+    });
+  }
+
+  // toggleCollectionTree() {
+  //   this.props.toggleCollectionTree();
+  // }
+
+  token() { return DocumentHelper.getMetaContent("csrf-token") }
+
+  updateModalProps(modalProps) { this.setState({ modalProps }); }
+
+  navHeader() {
+    return (
+      <Navbar.Header className="collec-tree">
+        <Navbar.Text style={{cursor: "pointer"}}>
+          {/* <i  className="fa fa-list" style={{fontStyle: "normal"}}
+              onClick={this.toggleCollectionTree} /> */}
+        </Navbar.Text>
+        <Navbar.Text />
+        <NavHead />
+      </Navbar.Header>
+    )
+  }
+
+  render() {
+    const { modalProps, currentUser } = this.state;
+
+    let userBar = (<span />);
+    if (currentUser) {
+      userBar = (<UserAuth />);
+    } else {
+      userBar = (<NavNewSession authenticityToken={this.token()} />);
+    }
+    // const logo = <img height={50} alt="Chemotion-Repository" src="/images/repo/chemotion_full.svg"/>
+    return (
+      <Navbar fluid className="navbar-custom">
+        <Navbar.Header>
+          <Navbar.Brand>
+            <a role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')} >
+              Chemotion-Repository</a>
+          </Navbar.Brand>
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          {userBar}
+          <Nav>
+            {currentUser ?
+              <NavItem eventKey={1} href="/mydb" className="white-nav-item">
+                My DB
+              </NavItem>
+              : null }
+            <NavItem eventKey={2} onClick={() => Aviator.navigate('/home/publications')} className="white-nav-item" >
+              Publications
+            </NavItem>
+            { currentUser ?
+              <NavItem eventKey={3} onClick={() => Aviator.navigate('/home/review')} className="white-nav-item" >
+                Review
+              </NavItem> : null
+            }
+            {currentUser ?
+              <NavItem eventKey={6} onClick={() => Aviator.navigate('/home/embargo')} className="white-nav-item" >
+                Embargoed Publications
+              </NavItem> : null
+            }
+            {
+              true ?
+                <NavItem eventKey={4} onClick={() => Aviator.navigate('/home/newsroom')} className="white-nav-item">
+                  Newsroom&nbsp;<i className="fa fa-bullhorn" aria-hidden="true" />
+                </NavItem> : null
+            }
+            {
+              true ?
+                <NavItem eventKey={5} onClick={() => Aviator.navigate('/home/howto')} className="white-nav-item">
+                  How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
+                </NavItem> : null
+            }
+          </Nav>
+        </Navbar.Collapse>
+      </Navbar>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoAbout.js b/app/assets/javascripts/libHome/RepoAbout.js
new file mode 100644
index 000000000..c9acbacd1
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoAbout.js
@@ -0,0 +1,164 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+
+const RepoAbout = () => {
+  const bodyStyle = {
+    maxHeight: 'calc(100vh - 262px)',
+    overflowY: 'auto',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '6px',
+    padding: '30px',
+    textAlign: 'center'
+  };
+
+  return (
+    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+      <Col md={3} />
+      <Col md={6}>
+        <Panel style={{ border: 'none' }}>
+          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
+            <CardIcons />
+          </Panel.Heading>
+          <Panel.Body style={bodyStyle}>
+            <CardAbout />
+          </Panel.Body>
+        </Panel>
+      </Col>
+      <Col md={3} />
+    </Row>
+  );
+};
+
+const CardIcons = () =>
+  (
+    <div className="card-icons">
+      <Col md={4}>
+        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/chemotion_full.svg" alt="" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/dfg_logo.png" alt="" />
+      </Col>
+    </div>
+  );
+
+const CardAbout = () =>
+  (
+    <div>
+      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
+      <br />
+      <h1>Brief project description</h1>
+      <div style={{ textAlign: 'justify' }}>
+        <p>This project aims for the development of a freely available
+          infrastructure for research data management through the development
+          of two independent IT systems namely an electronic laboratory notebook
+          (ELN) and a chemistry web repository. With the tools that will be
+          established by our project group it will be possible to integrate
+          modern web-techniques into the routine work of academic researchers,
+           thereby increasing the amount of available data and improving the
+           quality of the information obtained and published.
+        </p>
+        <p>The aim of this project is to make a substantial contribution to
+          securing research results in a cost-effective and simple manner,
+          and to optimally network in particular chemists (initially with each
+            other and in a second step with other disciplines). The new model
+             provides a combination of recording and documentation as well as
+             publication and storage of data sets.
+        </p>
+        <p>The necessary IT structures for modern documentation of
+          research data are developed within the scope of this project,
+          will be summarized in an electronic laboratory notebook (ELN) and will
+           be provided and distributed as OPEN SOURCE. The ELN will be completed
+           by the establishment and hosting of the web-repository, for which a
+           direct connection to the ELN enables a fast and easy transfer of
+           selected research information.
+        </p>
+        <p>Free access and free use by academic researchers is
+          one principle of this project allowing and promoting collaborative
+          work and scientific exchange among scientists.
+        </p>
+      </div>
+      <br />
+      <h3>Imprint</h3>
+      <h4>Karlsruhe Institute of Technology</h4>
+      <h4>Leader of the research group</h4>
+      <p>Prof. Stefan Bräse </p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
+      <p>76131 Karlsruhe </p>
+      <p>Germany</p>
+      <br />
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
+      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
+      <p>76344 Eggenstein-Leopoldshafen</p>
+      <p>Phone: +49 721 608 42903</p>
+      <p>Fax: +49 721 608 48581</p>
+      <br />
+      <p />
+      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
+      <br />
+      <h4>Office Campus North (KIT)</h4>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
+      <p>Hermann-von-Helmholtz-Platz 1</p>
+      <p>76344 Eggenstein-Leopoldshafen </p>
+      <p>Germany</p>
+      <p>Phone: +49 721 608 24697 </p>
+      <br />
+      <h4>Authors</h4>
+      <p>Prof. Stefan Braese</p>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <br />
+      <h3>Copyright Notices</h3>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          During the submission process, the submitter of a publication can choose,
+          between several CC licenses, which license to apply to the submitted work.
+          As the result, the content of this repository database
+          (including the submitted publication files) is partly licensed under:
+        </p>
+        <ul>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">
+              <img src="/images/creative_common/cc-by-sa.svg" alt="cc-by-sa-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Attribution-ShareAlike 4.0 International License (default),
+          </li>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
+              <img src="/images/creative_common/cc-by.svg" alt="cc-by-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Attribution 4.0 International License, and
+          </li>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
+              <img src="/images/creative_common/cc-zero.svg" alt="cc-zero" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Universal License
+          </li>
+        </ul>
+        <p>
+          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
+          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
+        </p>
+        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
+        <br />
+      </div>
+
+      <h3>Content</h3>
+      <div style={{ textAlign: 'justify' }} >
+        <p>
+          All texts, pictures and other information published here are subject to
+          copyright. The logo may not be used without the prior consent
+          of the working group.
+          A change of the logo is not permitted. The contents of our website are
+          created with the utmost care. Nevertheless, no guarantee for topicality
+          and completeness can be taken over. The Compound Platform does not
+          assume any responsibility for any web content connected by a link,
+          as this is not its own content.
+        </p>
+      </div>
+    </div>
+  );
+
+export default RepoAbout;
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
new file mode 100644
index 000000000..4e2657c17
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -0,0 +1,2302 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { replace, startsWith, filter, flatMap, map } from 'lodash';
+import {
+  Button,
+  Checkbox,
+  Col,
+  ControlLabel,
+  Form,
+  FormControl,
+  FormGroup,
+  Grid,
+  InputGroup,
+  Label,
+  OverlayTrigger,
+  Panel,
+  Row,
+  Table,
+  Tooltip,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Clipboard from 'clipboard';
+import moment from 'moment';
+import Select from 'react-select';
+import uuid from 'uuid';
+import ContainerComponent from './ContainerComponent';
+import Formula from '../components/common/Formula';
+import PubchemLabels from '../components/PubchemLabels';
+import QuillViewer from '../components/QuillViewer';
+import { ChemotionTag } from '../components/PublishCommon';
+import Sample from '../components/models/Sample';
+import Reaction from '../components/models/Reaction';
+import PrintCodeButton from '../components/common/PrintCodeButton';
+import { stopBubble } from '../components/utils/DomHelper';
+import RepoContainerDatasets from './RepoContainerDatasets';
+import ImageModal from '../components/common/ImageModal';
+import Utils from '../components/utils/Functions';
+import { hNmrCheckMsg, cNmrCheckMsg } from '../components/utils/ElementUtils';
+import { contentToText } from '../components/utils/quillFormat';
+import { chmoConversions } from '../components/OlsComponent';
+import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
+import InputButtonField from '../components/common/InputButtonField';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import PublicActions from '../components/actions/PublicActions';
+import RepoCommentBtn from '../components/common/RepoCommentBtn';
+
+const ChemotionId = props => (
+  <h5>
+    <b>ID: </b>
+    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
+      {props.type === 'reaction' ? 'CRR' : 'CSR'}-{props.id}
+    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
+  </h5>
+);
+ChemotionId.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
+};
+
+const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
+
+
+const AuthorTitle = (authorIds) => {
+  if (authorIds && authorIds.length > 1) {
+    return 'Authors:';
+  }
+  if (authorIds && authorIds.length === 1) {
+    return 'Author:';
+  }
+  return '';
+}
+
+const NewsroomTemplate = {
+  title: '', content: {}, article: []
+};
+
+const RequiredLabel = (props) => {
+  return (
+    <OverlayTrigger
+      placement={props.placement}
+      overlay={<Tooltip id={uuid.v4()}>This field is required for publication</Tooltip >}
+    >
+      <i className="fa fa-exclamation-circle field_required" aria-hidden="true" />
+    </OverlayTrigger >
+  );
+};
+
+RequiredLabel.propTypes = {
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired
+};
+
+const HomeFeature = (props) => {
+  return (
+    <div className="feature-block">
+      <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
+      <p>
+        {props.intro}
+      </p>
+    </div>
+  );
+};
+
+HomeFeature.propTypes = {
+  fa: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  intro: PropTypes.string.isRequired
+};
+
+const LicenseLegalCode = (cp) => {
+  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+  switch (cp) {
+    case 'CC BY-SA':
+      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+      break;
+    case 'CC BY':
+      presentLicense = 'Creative Commons Attribution 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
+      break;
+    case 'CC0':
+      presentLicense = 'CC0 1.0 Universal';
+      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
+      break;
+    default:
+      break;
+  }
+  return <span><b>{presentLicense}</b>&nbsp;<a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a></span>;
+};
+
+const nmrMsg = (sample, container) => {
+  if (sample.molecule && container.extended_metadata &&
+    (typeof container.extended_metadata.kind === 'undefined' ||
+      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
+    )) {
+    return '';
+  }
+  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
+
+  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
+  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
+  }
+  return '';
+};
+
+// the requirements for file types as given
+const isFileTypePass = (analysisType, attachments) => {
+  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
+  const nmrType = ['jcamp', 'dx', 'jdx'];
+  let files = [];
+  switch (analysisType) {
+    case '1H NMR':
+    case chmoConversions.nmr_1h.termId:
+    case '13C NMR':
+    case chmoConversions.nmr_13c.termId:
+    case '15N NMR':
+    case 'NMR':
+    case 'IR':
+    case chmoConversions.ir.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    case 'EA':
+    case chmoConversions.ea.termId:
+    case 'X-Ray':
+    case 'Crystall-Structure':
+    case chmoConversions.crystal_structure.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    default:
+      break;
+  }
+  return true;
+};
+
+// at least one dataset has to be attached
+// in dataset: instrument has to be given
+const isDatasetPass = (analysis) => {
+  const dataset = analysis.children;
+  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
+  if (attachments.length < 1) return false;
+  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
+  if (instruments.length < 1) return false;
+  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
+  if (files.length < 1) return false;
+  return true;
+};
+
+const isNmrPass = (analysis, sample) => {
+  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
+  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  }
+  return true;
+};
+
+const DownloadMetadataBtn = (l) => {
+  const contentUrl = `/api/v1/public/metadata/download?type=${l.type}&id=${l.id}`;
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        onClick={() => Utils.downloadFile({
+          contents: contentUrl
+        })}
+      >
+        <i className="fa fa-file-code-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const DownloadDOICsv = (e, a) => {
+  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
+  const dois = [];
+  dois.push(['Reserved DOIs', '']);
+  dois.push(['', '']);
+
+  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
+  a.forEach((an) => {
+    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+  });
+
+  if (e.type === 'reaction') {
+    // product(sample)
+    if (e.products !== null && e.products.length > 0) {
+      e.products.forEach((p) => {
+        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
+        p.analysisArray().forEach((an) => {
+          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+        });
+      });
+    }
+  }
+  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
+};
+
+class EmbargoCom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false
+    };
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  handleEmbargoChange(e) {
+    this.props.onEmbargoChange(e.value);
+  }
+
+  handleLicenseChange(e) {
+    this.props.onLicenseChange(e.value);
+  }
+
+  handleCC0ConsentChange(e, type) {
+    this.props.onCC0ConsentChange(e.target.checked, type);
+  }
+
+  render() {
+    const defaultBundles = [
+      { value: '-1', name: 'no', label: 'No embargo' },
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+    const licenses = [
+      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
+      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
+      { name: 'CC0', value: 'CC0', label: 'CC0' }
+    ];
+
+    const bundles = defaultBundles.concat(this.props.opts);
+    const description = [
+      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
+      'Please use one bundle for data that belongs to the same publication.',
+      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
+    ].join(' ');
+    const { isShow } = this.state;
+    const embargoDesc = isShow ? (
+      <div style={{
+        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
+      }}
+      >
+        <b>Embargo Bundle</b>&#58;&nbsp;{description}
+      </div>
+    ) : (null);
+
+    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
+    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
+    const deed = (
+      <div style={{
+        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
+      }}
+      >
+        {LicenseLegalCode(this.props.selectedLicense)}
+        {
+        this.props.selectedLicense === 'CC0' ?
+          (
+            <div stye={{ width: '100%' }}>
+              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
+                {cc0Consent1}
+              </Checkbox>
+              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
+                {cc0Consent2}
+              </Checkbox>
+            </div>
+          )
+          :
+          (null)
+      }
+      </div>
+    );
+
+    return (
+      <div>
+        <Form horizontal style={{ display: 'flex' }}>
+          <div style={{ width: '20%', textAlign: 'right' }}>
+            <ControlLabel>Choose license&nbsp;</ControlLabel>
+          </div>
+          <div style={{ width: '20%' }}>
+            <Select
+              value={this.props.selectedLicense}
+              onChange={e => this.handleLicenseChange(e)}
+              options={licenses}
+              className="select-assign-collection"
+            />
+          </div>
+          <div style={{ width: '40%', textAlign: 'right' }}>
+            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
+            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
+              <i className="fa fa-question-circle" aria-hidden="true" />
+            </div>&nbsp;
+          </div>
+          <div style={{ width: '40%' }}>
+            <Select
+              value={this.props.selectedValue}
+              onChange={e => this.handleEmbargoChange(e)}
+              options={bundles}
+              className="select-assign-collection"
+            />
+          </div>
+        </Form>
+        {embargoDesc}
+        {deed}
+      </div >
+    );
+  }
+}
+
+EmbargoCom.propTypes = {
+  opts: PropTypes.array,
+  selectedValue: PropTypes.string.isRequired,
+  onEmbargoChange: PropTypes.func.isRequired,
+  selectedLicense: PropTypes.string,
+  onLicenseChange: PropTypes.func.isRequired,
+  onCC0ConsentChange: PropTypes.func.isRequired,
+  cc0Deed: PropTypes.shape({
+    consent1: PropTypes.bool.isRequired,
+    consent2: PropTypes.bool.isRequired
+  })
+};
+
+EmbargoCom.defaultProps = {
+  opts: [],
+  selectedLicense: 'CC BY-SA',
+  cc0Deed: { consent1: false, consent2: false }
+};
+
+const PublishTypeAs = (props) => {
+  return (
+    <div style={{ display: 'inline' }}>
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
+        <i className="fa fa-question-circle" aria-hidden="true" />
+      </OverlayTrigger>&nbsp;
+      <DropdownButtonSelection
+        options={props.options}
+        selected={props.selected}
+        placeholder="Select publication type..."
+        onSelect={e => props.onChange(e)}
+      />
+    </div>
+  );
+};
+
+PublishTypeAs.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string),
+  selected: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+PublishTypeAs.defaultProps = {
+  options: [],
+  selected: 'full',
+};
+
+
+const ElStateLabel = (state) => {
+  let stateStyle;
+  switch (state) {
+    case 'reviewed':
+      stateStyle = 'info';
+      break;
+    case 'pending':
+      stateStyle = 'warning';
+      break;
+    case 'accepted':
+      stateStyle = 'success';
+      break;
+    default:
+      stateStyle = 'default';
+  }
+  return <Label bsStyle={stateStyle}>{state}</Label>;
+};
+
+
+const MoveEmbargoedBundle = (element, onMoveClick) => {
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
+      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
+    </OverlayTrigger>
+  );
+};
+
+const ElSubmitTime = (submitAt) => {
+  const time = new Date(submitAt);
+  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
+};
+
+const SvgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) => {
+  if (!e) {
+    return '';
+  }
+  let listClass;
+  if (e.type === 'Reaction') {
+    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  } else {
+    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  }
+  const schemeOnly = (e && e.scheme_only === true) || false;
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => onClick(e.type.toLowerCase(), e.id)}
+    >
+      <td style={{ position: 'relative' }} >
+        <span className="review_element_label">
+          <IconToMyDB isLogin id={e.id} type={e.type.toLowerCase()} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
+        &nbsp;{user !== null && user.type === 'Anonymous' ? '' : MoveEmbargoedBundle(e, onMoveClick)}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const SampleExactMW = (em) => {
+  if (em) {
+    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
+  }
+  return '';
+};
+
+const DateFormatYMDLong = (params) => {
+  const dateTime = new Date(params);
+  const options = {
+    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
+  };
+  return dateTime.toLocaleDateString('en-GB', options);
+};
+
+const DateFormatDMYTime = (dt) => {
+  if (dt == null || typeof dt === 'undefined') return '';
+  try {
+    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
+    if (m.isValid()) {
+      return dt;
+    }
+    const dtJSON = new Date(dt).toJSON();
+    const dtISO = new Date(Date.parse(dt)).toISOString();
+    if (dtISO === dtJSON) {
+      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
+    }
+    return '';
+  } catch (e) {
+    return '';
+  }
+};
+
+const EditorTips = () => {
+  return (
+    <ol>
+      {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
+      <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
+      <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
+    </ol>
+  );
+};
+
+const BackSoonPage = () => {
+  return (
+    <div>
+      <h1>We&rsquo;ll be back soon!</h1>
+      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
+      <h3>
+        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
+      </h3>
+      <h3>
+        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
+      </h3>
+      <h4>&mdash; ComPlat Team</h4>
+    </div>
+  );
+};
+
+const ShowIndicator = (show) => {
+  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+};
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '2px',
+  marginRight: '2px'
+};
+
+const IconLicense = (cp, hasCoAuthors = false) => {
+  const presentStyle = { marginTop: '-10px', height: '31px', width: '88px' };
+  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+  let presentPath = '/images/creative_common/cc-by-sa.svg';
+  const cc0Alt = [
+    'To the extent possible under law, the',
+    (hasCoAuthors ? 'persons' : 'person'),
+    'who associated CC0 with this work',
+    (hasCoAuthors ? 'have' : 'has'),
+    'waived all copyright and related or neighboring rights to this work.'
+  ].join(' ');
+
+  switch (cp) {
+    case 'CC BY-SA':
+      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by-sa.svg';
+      break;
+    case 'CC BY':
+      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by.svg';
+      break;
+    case 'CC0':
+      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
+      presentAlt = cc0Alt;
+      presentPath = '/images/creative_common/cc-zero.svg';
+      break;
+    default:
+      break;
+  }
+  return <a rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
+};
+
+const IconToMyDB = ({
+  id, type, tooltipTitle = 'Link to My DB', isLogin = false
+}) => {
+  if (isLogin) {
+    return (
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipTitle}</Tooltip>}>
+        <a
+          style={labelStyle}
+          target="_blank"
+          rel="noreferrer noopener"
+          href={`/mydb/collection/all/${type}/${id}`}
+        >
+          <i className={`icon-${type}`} style={{ fontSize: '1.6em' }} />
+        </a>
+      </OverlayTrigger>
+    );
+  }
+  return (<span style={labelStyle}><i className={`icon-${type}`} style={{ fontSize: '1.6em' }} /></span>);
+};
+
+IconToMyDB.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  tooltipTitle: PropTypes.string,
+  isLogin: PropTypes.bool,
+}
+
+IconToMyDB.defaultProps = {
+  tooltipTitle: 'Link to My DB',
+  isLogin: false
+}
+
+const SidToPubChem = ({ sid }) => {
+  let labelStyle = {
+    // display: 'inline-block',
+    marginLeft: '2px',
+    marginRight: '2px',
+    //position: 'absolute',
+    fontSize: 'xx-large'
+  };
+  if (!sid || isNaN(sid)) {
+    labelStyle.WebkitFilter = "grayscale(100%)"
+  }
+  const handleOnClick = (e) => {
+    if (sid && !isNaN(sid)){
+      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
+    }
+    e.stopPropagation()
+  }
+
+  if (sid && !isNaN(sid)){
+    return (
+      <span style={labelStyle} onClick={handleOnClick}>
+        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
+      </span>
+    )
+    }else {
+      return <span />
+  }
+}
+
+SidToPubChem.propTypes = {
+  sid: PropTypes.string
+}
+
+const ElementIcon = (elementType) => {
+  switch (elementType) {
+    case 'Reaction':
+      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    case 'Sample':
+      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    default:
+      return <div />;
+  }
+};
+
+const AnalysesTypeJoinLabel = (analyses, type) => {
+  const regExp = /\(([^)]+)\)/;
+  const analysesTypeJoin = analyses.map((analysis) => {
+    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
+    if (kind === '') {
+      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    }
+    return kind;
+  }).join(', ');
+
+  return analysesTypeJoin === '' ? analysesTypeJoin :
+    (
+      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
+        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
+      </div>
+    );
+};
+
+const PreviewImage = (container) => {
+  const rawImg = container.preview_img;
+  const noAttSvg = '/images/wild_card/no_attachment.svg';
+  const noAvaSvg = '/images/wild_card/not_available.svg';
+  switch (rawImg) {
+    case null:
+    case undefined:
+      return noAttSvg;
+    case 'not available':
+      return noAvaSvg;
+    default:
+      return `data:image/png;base64,${rawImg}`;
+  }
+};
+
+const CalcDuration = (reaction) => {
+  let duration = null;
+
+  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
+    return reaction.duration;
+  }
+
+  if (reaction.timestamp_start && reaction.timestamp_stop) {
+    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
+    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
+    if (start < stop) {
+      duration = moment.preciseDiff(start, stop);
+    }
+  }
+  if (duration == null) {
+    return '';
+  }
+  return duration;
+};
+
+const AuthorList = ({ creators, affiliationMap }) => {
+  return (
+    <span>
+      {creators.map(
+        (creator, i) => (
+          <span key={`auth_${creator.id}_${uuid.v4()}`}>
+            {i === 0 ? null : ' - '}{creator.name}
+            <sup>
+              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
+            </sup>
+          </span>
+        )
+      )}
+    </span>
+  );
+};
+
+AuthorList.propTypes = {
+  creators: PropTypes.array,
+  affiliationMap: PropTypes.object,
+};
+
+AuthorList.defaultProps = {
+  creators: [],
+  affiliationMap: {},
+};
+
+const ContributorInfo = ({ contributor }) => {
+  if (!contributor.name) {
+    return <div />;
+  }
+  return (
+    <div>
+      <h5>
+        <b>Contributor: </b>{contributor.name}
+      </h5>
+      <div>
+        {contributor.affiliations && contributor.affiliations.map(
+          (e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+ContributorInfo.propTypes = {
+  contributor: PropTypes.object,
+};
+
+ContributorInfo.defaultProps = {
+  contributor: {},
+};
+
+const AffiliationList = ({ affiliations, affiliationMap }) => {
+  const names = [];
+  Object.keys(affiliationMap).map((affiliationId) => {
+    const ind = affiliationMap[affiliationId];
+    names[ind] = affiliations[affiliationId];
+    return null;
+  });
+  return (
+    <div>
+      {names.map(
+        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
+      )}
+    </div>
+  );
+}
+AffiliationList.propTypes = {
+  affiliations: PropTypes.object,
+  affiliationMap: PropTypes.object,
+};
+
+AffiliationList.defaultProps = {
+  affiliations: {},
+  affiliationIds: {},
+};
+
+class ClipboardCopyLink extends Component {
+  constructor(props) {
+    super(props)
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+      >
+        <div style={{ display: 'inline' }} role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn" >{this.props.text}</div>
+      </OverlayTrigger>
+    );
+  }
+}
+
+class ClipboardCopyBtn extends Component {
+  constructor(props) {
+    super(props)
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+      >
+        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
+          <i className="fa fa-clipboard" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
+
+
+
+const MoleculeInfo = ({ molecule, sample_svg_file='' }) => {
+  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
+  if (sample_svg_file && sample_svg_file != '') {
+    svgPath = `/images/samples/${sample_svg_file}`;
+  }
+  const tagData = molecule.tag && molecule.tag.taggable_data;
+  const pubchemInfo = {
+    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
+  };
+  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
+    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
+  return (
+    <Row>
+      <Col sm={4} md={4} lg={4}>
+        <SVG key={svgPath} src={svgPath} className="molecule-mid" />
+      </Col>
+      <Col sm={8} md={8} lg={8}>
+        {nameOrFormula}
+        <br />
+        <h5><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
+        <h5><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+        <h5><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+        <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
+        <br />
+        <h5>
+          <b>Crosslinks: </b>
+          &nbsp;&nbsp;
+          <PubchemLabels element={pubchemInfo} />
+          <ChemotionTag tagData={tagData} />
+        </h5>
+      </Col>
+    </Row>
+  );
+};
+
+class RenderAnalysisHeader extends Component {
+  constructor(props) {
+    super();
+  }
+
+  render() {
+    const svgPath = `/images/samples/${this.props.element.sample_svg_file}`;
+    let doiLink = '';
+    if (this.props.isPublic) {
+      doiLink = this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.publication && this.props.element.tag.taggable_data.publication.doi;
+    } else {
+      doiLink = (this.props.element.doi && this.props.element.doi.full_doi) || '';
+    }
+
+    const nameOrFormula = this.props.element.molecule.iupac_name && this.props.element.molecule.iupac_name !== ''
+      ? <span><b>IUPAC Name: </b> {this.props.element.molecule.iupac_name} (<Formula formula={this.props.element.molecule.sum_formular} />)</span>
+      : <span><b>Formula: </b> <Formula formula={this.props.element.molecule.sum_formular} /></span>;
+
+    const iupacUserDefined = this.props.element.showed_name == this.props.element.molecule.iupac_name
+      ? <span />
+      : <h5><b>Name: </b> {this.props.element.showed_name} </h5>;
+
+
+    const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
+    const crsId = (this.props.element.publication && this.props.element.publication.id) || '';
+    return (
+      <div>
+        <div>
+          <br />
+          <Row style={rinchiStyle}>
+            <Col sm={6} md={6} lg={6}>
+              <SVG key={svgPath} src={svgPath} className="reaction-details" />
+            </Col>
+            <Col sm={6} md={6} lg={6}>
+              <h5>
+                <IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" />
+              <b>Product </b><br /><br />
+                  {nameOrFormula}
+                  {iupacUserDefined}
+              </h5>
+              <h6><b>Canonical Smiles: </b> <ClipboardCopyLink text={this.props.element.molecule.cano_smiles} /></h6>
+              <h6><b>Inchi: </b> <ClipboardCopyLink text={this.props.element.molecule.inchistring} /></h6>
+              <h6><b>Inchikey: </b> <ClipboardCopyLink text={this.props.element.molecule.inchikey} /></h6>
+              <h6><b>Exact Mass: </b> {SampleExactMW(this.props.element.molecule.exact_molecular_weight)}</h6>
+              <h6><b>DOI: </b>
+                {
+                  this.props.isPublic ?
+                  (
+                    <span className="sub-title" inline="true">
+                      <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+                        {doiLink}
+                      </Button>
+                      <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                      <DownloadMetadataBtn type="sample" id={this.props.element.id} />
+                    </span>
+                  )
+                  :
+                  (
+                    <span className="sub-title" inline="true">
+                      {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                    </span>
+                  )
+                }
+              </h6>
+              <h6>
+                <b>ID: </b>
+                <Button key={`reaction-jumbtn-${this.props.element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
+                  CRS-{crsId}
+                </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
+              </h6>
+
+            </Col>
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
+  <span
+    role="presentation"
+    className="label label-default"
+    style={{
+      backgroundColor: '#777777',
+      color: 'white',
+      fontSize: 'smaller',
+      fontWeight: 'bold',
+      cursor: 'pointer'
+    }}
+    onClick={onClick}
+  >
+    {name} &nbsp;<i className={`glyphicon ${indicatorStyle}`} />
+  </span>
+);
+
+ToggleIndicator.propTypes = {
+  indicatorStyle: PropTypes.string,
+  name: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+ToggleIndicator.defaultProps = {
+  indicatorStyle: '',
+  name: '',
+};
+
+
+const ReactionTable = ({
+  reaction, toggle, show, bodyAttrs, isPublic = true
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+
+  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+    reaction.publication.taggable_data.scheme_only === true) || false;
+
+  if (isPublic) {
+    schemes = reaction.schemes;
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s)
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => {
+    return (target ? (target * multi).toFixed(precision) : ' - ')
+  }
+
+  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        if (schemeOnly === true) {
+          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`
+        } else {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+        }
+        break;
+      case 'solvents':
+        if (isPublic) {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+        } else {
+          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`
+        }
+        break;
+      default:
+        val = materialCalc(s.equivalent, 1, 3)
+    }
+    return (
+      val
+    )
+  }
+
+  const rows = (samples) => {
+    let currentType = '';
+
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    )
+  };
+
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount(g)</th>
+          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
+          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
+          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionRinChiKey = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorRinchi = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionProperties = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorProp = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status: </b>{reaction.status}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Duration: </b>{CalcDuration(reaction)}
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionTlc = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorTlc = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.rf_value || ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
+              <Col sm={10} md={10} lg={10}>
+                <div style={{ whiteSpace: 'pre' }}>
+                  {reaction.tlc_description || ''}
+                </div>
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const InputFieldYield = (props) => {
+  return (
+    <FormGroup>
+      <InputGroup>
+        <FormControl
+          type="text"
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          value={props.value || 0}
+          placeholder="Input Yield..."
+          onChange={event => props.onInputChange(props.product, event)}
+        />
+        <InputGroup.Addon>%</InputGroup.Addon>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const InputFieldDuration = props =>
+  (
+    <InputButtonField
+      label="Duration"
+      value={props.durationValue || ''}
+      field="duration"
+      btnValue={props.durationUnit || ''}
+      btnField="durationUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch duration unit"
+    />
+  );
+
+const InputFieldTemperture = props =>
+  (
+    <InputButtonField
+      label="Temperature"
+      value={props.temperatureDisplay || ''}
+      field="temperature"
+      btnValue={props.temperatureUnit || ''}
+      btnField="temperatureUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch temperature unit"
+    />
+  );
+
+const ReactionTableEdit = ({
+  reaction, bodyAttrs, isPublic = true,
+  onInputChange
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+
+  if (isPublic) {
+    schemes = reaction.schemes;
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s)
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
+  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        val = materialCalc(s.equivalent * 100, 1, 0);
+        break;
+      default:
+        return <div />;
+    }
+    return (
+      <Form inline>
+        <InputFieldYield
+          value={val}
+          product={s}
+          onInputChange={onInputChange}
+        />
+      </Form>
+    );
+  };
+
+  const rows = (samples) => {
+    let currentType = '';
+
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    )
+  };
+
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount(g)</th>
+          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
+          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
+          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <Label>Reaction Table</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionPropertiesEdit = ({
+  reaction, bodyAttrs,
+  onInputChange, onUnitChange
+}) =>
+  (
+    <span>
+      <Label>Properties</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status</b><div>{reaction.status}</div>
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldTemperture
+                  temperatureDisplay={reaction.temperature_display}
+                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldDuration
+                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
+                  durationUnit={reaction.durationUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+
+const ReactionSchemeOnlyInfo = ({
+  reaction, isPublic = true, schemeDesc,
+  onYieldChange, onPropertiesChange, onUnitChange
+}) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTableEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              isPublic={isPublic}
+              onInputChange={onYieldChange}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <Checkbox
+              checked={schemeDesc}
+              onChange={() => { onPropertiesChange('schemeDesc'); }}
+            >
+              <span>add the description field?</span>
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionPropertiesEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              onInputChange={onPropertiesChange}
+              onUnitChange={onUnitChange}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
+  toggleRinchi, showRinchi,
+  toggleProp, showProp,
+  toggleTlc, showTlc,
+  schemeOnly = false, onToggle = () => {}
+ }) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+  const content = reaction.description;
+  const additionInfo = reaction.observation;
+
+  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
+
+  const descQV = contentlength > 0 ?
+  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
+  const addQV = additionlength > 0 ?
+  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
+
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  if (schemeOnly) {
+    return (
+      <RepoReactionSchemeInfo
+        reaction={reaction}
+        svgPath={svgPath}
+        showScheme={showScheme}
+        showRinchi={showRinchi}
+        showProp={showProp}
+        bodyAttrs={bodyAttrs}
+        onToggle={onToggle}
+      />
+    );
+  }
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTable
+              reaction={reaction}
+              toggle={toggleScheme}
+              show={showScheme}
+              isPublic={isPublic}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+            <div className="desc small-p">
+              {addQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={reaction}
+              toggle={toggleRinchi}
+              show={showRinchi}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionProperties
+              reaction={reaction}
+              toggle={toggleProp}
+              show={showProp}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTlc
+              reaction={reaction}
+              toggle={toggleTlc}
+              show={showTlc}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const AnalysisHeaderSample = ({ sample, sampleType }) => {
+  const svgPath = `/images/samples/${sample.sample_svg_file}`;
+  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
+  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
+  return (
+    <div className="svg-container">
+      <Row style={rinchiStyle}>
+        <Col sm={4} md={4} lg={4}>
+          <SVG key={svgPath} src={svgPath} className="sample-details" />
+        </Col>
+        <Col sm={8} md={8} lg={8}>
+          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
+          <b> DOI: </b>
+          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+            {doiLink}
+          </Button>
+          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+          <DownloadMetadataBtn type="sample" id={sample.id} />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+AnalysisHeaderSample.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  sampleType: PropTypes.string,
+};
+
+AnalysisHeaderSample.defaultProps = {
+  sample: {},
+  sampleType: '',
+};
+
+class RenderPublishAnalysesPanel extends Component {
+  header() {
+    const { analysis, isPublic } = this.props;
+    const content = analysis.extended_metadata['content'];
+    const previewImg = PreviewImage(analysis);
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    let hasPop = true;
+    let fetchNeeded = false;
+    let fetchId = 0;
+    let fetchFilename = '';
+    if (analysis.preview_img && analysis.preview_img !== undefined && analysis.preview_img !== 'not available') {
+      const containerAttachments = filter(analysis.children, o => o.attachments.length > 0);
+      const atts = flatMap(map(containerAttachments, 'attachments'));
+      const imageThumb = filter(atts, o => o.thumb === true && startsWith(o.content_type, 'image/'));
+      if (imageThumb && imageThumb.length > 0) {
+        fetchNeeded = true;
+        fetchId = imageThumb[0].id;
+        fetchFilename = imageThumb[0].filename;
+      }
+    } else {
+      hasPop = false;
+    }
+
+    const doiLink = (isPublic === false) ? (
+      <div className="sub-title" inline="true">
+        <b>DOI: </b>
+        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+      </div>
+      ) : (
+      <div className="sub-title" inline="true">
+        <b>DOI: </b>
+        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+          {analysis.dataset_doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+        <DownloadMetadataBtn type="container" id={analysis.id} />
+      </div>
+    )
+
+    return (
+      <div
+        className="analysis-header"
+        style={{ height: 'unset' }}
+      >
+        <div className="preview">
+          <ImageModal
+            hasPop={hasPop}
+            preivewObject={{
+              src: previewImg
+            }}
+            popObject={{
+              title: kind,
+              src: previewImg,
+              fetchNeeded,
+              fetchId,
+              fetchFilename
+            }}
+          />
+        </div>
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title">
+              <b>{kind}</b>
+            </div>
+            {doiLink}
+            <div className="sub-title" inline="true">
+              <b>ID: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+              CRD-{ analysis.pub_id }
+              </Button>
+              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+            </div>
+          </div>
+          <div className="desc small-p expand-p" style={{ marginLeft: '10px' }}>
+            <ClipboardCopyLink text={contentToText(content)}>
+              <QuillViewer value={content} />
+            </ClipboardCopyLink>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {this.header()}
+        <Col md={12}>
+          <b>Datasets</b>
+          <RepoContainerDatasets
+            container={this.props.analysis}
+          />
+        </Col>
+      </div>
+    );
+  }
+}
+
+class RenderPublishAnalyses extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  header() {
+    const analysis = this.props.analysis;
+    const content = analysis.extended_metadata['content'];
+    const rawImg = analysis.preview_img;
+    const noAttSvg = '/images/wild_card/no_attachment.svg';
+    const noAvaSvg = '/images/wild_card/not_available.svg';
+    let previewImg = rawImg;
+    switch (rawImg) {
+      case null:
+      case undefined:
+        previewImg = noAttSvg;
+        break;
+      case 'not available':
+        previewImg = noAvaSvg;
+        break;
+      default:
+        previewImg = `data:image/png;base64,${rawImg}`;
+    }
+
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    let hasPop = true;
+    let fetchNeeded = false;
+    let fetchId = 0;
+    let fetchFilename = '';
+    if (analysis.preview_img && analysis.preview_img !== undefined && analysis.preview_img !== 'not available') {
+      const containerAttachments = filter(analysis.children, o => o.attachments.length > 0);
+      const atts = flatMap(map(containerAttachments, 'attachments'));
+      const imageThumb = filter(atts, o => o.thumb === true && startsWith(o.content_type, 'image/'));
+      if (imageThumb && imageThumb.length > 0) {
+        fetchNeeded = true;
+        fetchId = imageThumb[0].id;
+        fetchFilename = imageThumb[0].filename;
+      }
+    } else {
+      hasPop = false;
+    }
+
+    return (
+      <div
+        className="analysis-header"
+      >
+        <div className="preview">
+          <ImageModal
+            hasPop={hasPop}
+            preivewObject={{
+              src: previewImg
+            }}
+            popObject={{
+              title: kind,
+              src: previewImg,
+              fetchNeeded,
+              fetchId,
+              fetchFilename
+            }}
+          />
+        </div>
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title" inline="true">
+              <b>DOI: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+                {analysis.dataset_doi}
+              </Button>
+              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+              <DownloadMetadataBtn type="container" id={analysis.id} />
+            </div>
+            <div className="sub-title" inline="true">
+              <b>ID: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+                CRD-{ analysis.pub_id }
+              </Button>
+              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+            </div>
+            <div className="desc small-p">
+              <b>Content: </b> &nbsp;&nbsp;
+              <ClipboardCopyLink text={contentToText(content)}>
+              <QuillViewer value={content}  />
+            </ClipboardCopyLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { analysis, expanded, elementType } = this.props;
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    const AffiliationMap = (affiliationIds) => {
+      const aId = [].concat.apply(...affiliationIds);
+      const affiliationMap = {};
+      let aCount = 0;
+      aId.map((e) => {
+        if (!affiliationMap[e]) {
+          aCount += 1;
+          affiliationMap[e] = aCount;
+        }
+      });
+      return affiliationMap;
+    };
+    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids);
+    const time = new Date(this.props.publication && this.props.publication.published_at);
+    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    return (
+      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
+        <Panel.Heading style={{ border: 'unset' }}>
+          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
+            {IconLicense(this.props.license, (this.props.publication.author_ids.length > 1))}
+          </h4>
+          <p>&nbsp;</p>
+          <b>{kind}</b>&nbsp;
+          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
+            <small><b>{ElementIcon(elementType)}</b></small>
+          </div>
+          <h5>
+            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
+            <AuthorList
+              creators={this.props.publication.creators}
+              affiliationMap={affiliationMap}
+            />
+          </h5>
+          <AffiliationList
+            affiliations={this.props.publication.affiliations}
+            affiliationMap={affiliationMap}
+          />
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
+            {this.header()}
+            <Col md={12}>
+              <b>Datasets</b>
+              <RepoContainerDatasets
+                container={this.props.analysis}
+              />
+            </Col>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    );
+  }
+}
+
+RenderPublishAnalyses.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  elementType: PropTypes.string.isRequired,
+  license: PropTypes.string.isRequired,
+  publication: PropTypes.shape({
+    author_ids: PropTypes.arrayOf(PropTypes.number),
+    creators: PropTypes.arrayOf(PropTypes.object),
+    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
+    affiliations: PropTypes.object,
+    published_at: PropTypes.string,
+  }).isRequired
+};
+
+class PublishAnalysesTag extends Component {
+  constructor(props) {
+    super(props);
+    const { reaction, analysis, analysesType, product } = props;
+    this.state = {
+      reaction,
+      analysis,
+      analysesType,
+      product
+    };
+    this.handleCheck = this.handleCheck.bind(this);
+  }
+
+  handleCheck(e, elementType) {
+    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
+      e.extended_metadata.publish = false;
+    } else {
+      e.extended_metadata.publish = true;
+    }
+    this.props.handleAnalysesChecked(e, elementType);
+  }
+
+  generateTitle() {
+    const {
+      reaction, analysis, analysesType, product
+    } = this.state;
+    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
+    const { content } = analysis.extended_metadata;
+    const status = analysis.extended_metadata.status || '';
+    const previewImg = PreviewImage(analysis);
+    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
+
+    let statusMissing = false;
+    let nmrMissing = false;
+    let datasetMissing = false;
+    if (analysesType === 'Product') {
+      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
+      nmrMissing = !isNmrPass(analysis, product);
+      datasetMissing = !isDatasetPass(analysis);
+    }
+    const constructBtnTip = () => {
+      const tip = [];
+      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
+        if (typeMissing) tip.push('Type is invalid.');
+        if (statusMissing) tip.push('Status must be Confirmed.');
+        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
+        if (datasetMissing) {
+          tip.push('Dataset is incomplete. Please check that: ');
+          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
+          tip.push('2. the instrument field is not empty.');
+        }
+        return tip.join('\r\n');
+      }
+      return 'publish this analysis';
+    };
+    const btnTip = constructBtnTip();
+
+    let statusChk = false;
+    let statusMsg = '';
+    let typeChk = false;
+    if (analysesType === 'Product') {
+      statusChk = (status !== 'Confirmed' || nmrMissing);
+      statusMsg = nmrMsg(product, analysis);
+      typeChk = (kind === '');
+    }
+
+    if (!analysis.extended_metadata.kind) {
+      analysis.extended_metadata.publish = false;
+    }
+    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
+      && !statusMissing && !nmrMissing && !datasetMissing) || false;
+    let analysesIcon = '';
+    switch (analysesType) {
+      case 'Reaction':
+        analysesIcon = <i className="icon-reaction" />;
+        break;
+      case 'Product':
+        analysesIcon = <i className="icon-sample" />;
+        break;
+      default:
+        analysesIcon = '';
+    }
+
+    return (
+      <div
+        className="analysis-header order"
+      >
+        <div className="preview">
+          <img src={previewImg} alt="preview" />
+        </div>
+        <div className="abstract">
+          <div className="upper-btn">
+            <div
+              className="button-right"
+            >
+              &nbsp;{analysesIcon}
+            </div>
+            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
+            <span
+              className="button-right add-to-report"
+              onClick={stopBubble}
+            >
+              <OverlayTrigger
+                placement="left"
+                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
+              >
+                <div>
+                  <Checkbox
+                    onChange={() => { this.handleCheck(analysis, analysesType); }}
+                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
+                    defaultChecked={isPublish}
+                  >
+                    {
+                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
+                        <span style={{ color: 'red' }}>Add to publication</span>
+                      :
+                        <span>Add to publication</span>
+                    }
+                  </Checkbox>
+                </div>
+              </OverlayTrigger>
+            </span>
+          </div>
+          <div className="lower-text">
+            <div className="main-title">
+              {analysis.name}
+            </div>
+            {
+              typeChk ?
+                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
+                :
+                <div className="sub-title">Type: {kind}</div>
+            }
+            {
+              statusChk ?
+                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
+                :
+                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
+            }
+            <div className="desc sub-title">
+              <span style={{ float: 'left', marginRight: '5px' }}>
+                Content:
+              </span>
+              <QuillViewer value={content}  />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
+        <Panel.Heading>
+          <Panel.Title toggle>
+            {this.generateTitle()}
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body collapsible>
+          <ContainerComponent readOnly container={this.props.analysis} />
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+PublishAnalysesTag.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  analysis: PropTypes.object.isRequired,
+  analysesType: PropTypes.string,
+  handleAnalysesChecked: PropTypes.func.isRequired,
+  product: PropTypes.object
+};
+PublishAnalysesTag.defaultProps = {
+  analysesType: '',
+  product: null
+};
+
+RenderPublishAnalysesPanel.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool,
+};
+
+RenderPublishAnalysesPanel.defaultProps = {
+  isPublic: true
+};
+
+ReactionTable.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object,
+  isPublic: PropTypes.bool.isRequired
+};
+
+ReactionTable.defaultProps = {
+  isPublic: true,
+  showScheme: false
+};
+
+ReactionRinChiKey.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionProperties.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionTlc.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+const DatasetDetail = ({ element }) => {
+  const { molecule } = element;
+  molecule.tag = {
+    taggable_data: { pubchem_cid: molecule.pubchem_cid }
+  };
+
+  const datasetView = !element ? (
+    <span>There is no published dataset</span>
+  ) : (
+    <RenderPublishAnalyses
+      key={`${element.id}-${element.updated_at}`}
+      analysis={element.dataset}
+      expanded
+      elementType="Sample"
+      license={element.license}
+      publication={element.publication}
+    />
+  );
+
+  return (
+    <Grid>
+      <MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />
+      <br /><br />
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          {datasetView}
+        </Col>
+      </Row>
+    </Grid>
+  );
+};
+
+DatasetDetail.propTypes = {
+  element: PropTypes.object.isRequired,
+};
+
+const ClosePanel = ({ element }) => (
+  <div>
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        className="button-right"
+        onClick={() => PublicActions.close(element, true)}
+      >
+        <i className="fa fa-times" />
+      </Button>
+    </OverlayTrigger>
+  </div>
+);
+
+ClosePanel.propTypes = {
+  element: PropTypes.object.isRequired,
+};
+
+const CommentBtn = (props) => {
+  const {
+    canComment,
+    reviewLevel,
+    submitter,
+    pubState,
+    comments,
+    onShow,
+    field,
+    orgInfo
+  } = props;
+
+  if (!canComment) return '';
+  return (
+    <span>
+      <RepoCommentBtn
+        field={field}
+        comments={comments}
+        orgInfo={orgInfo}
+        reviewLevel={reviewLevel}
+        state={pubState}
+        submitter={submitter}
+        onShow={() => onShow(true, field, orgInfo)}
+      />&nbsp;
+    </span>
+  );
+};
+
+CommentBtn.propTypes = {
+  canComment: PropTypes.bool.isRequired,
+  reviewLevel: PropTypes.number.isRequired,
+  submitter: PropTypes.string.isRequired,
+  pubState: PropTypes.string.isRequired,
+  comments: PropTypes.object.isRequired,
+  onShow: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  orgInfo: PropTypes.string.isRequired
+};
+
+const Doi = (props) => {
+  const {
+    type, id, doi, isPublished
+  } = props;
+
+  let data = '';
+
+  if (isPublished) {
+    data = (
+      <span>
+        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
+          {doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
+        <DownloadMetadataBtn type={type} id={id} />
+      </span>
+    );
+  } else {
+    data = (
+      <span>
+        {doi.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi.full_doi}`} />
+      </span>
+    );
+  }
+
+  return (
+    <h5>
+      <b>DOI: </b>
+      {data}
+    </h5>
+  );
+};
+
+Doi.propTypes = {
+  type: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  doi: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+const DateInfo = (props) => {
+  const {
+    pubData, tagData, isPublished
+  } = props;
+
+  let time = '';
+  let formattedTime = '';
+
+  if (isPublished) {
+    time = new Date(tagData && (tagData.published_at || tagData.doi_reg_at));
+    formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
+  }
+
+  time = new Date(pubData && pubData.updated_at);
+  formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  return (<span><b>Submitted on </b> <i>{formattedTime}</i></span>);
+};
+
+DateInfo.propTypes = {
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export {
+  AnalysisHeaderSample,
+  AnalysesTypeJoinLabel,
+  AffiliationList,
+  AuthorList,
+  AuthorTitle,
+  BackSoonPage,
+  CalcDuration,
+  ChemotionId,
+  ClipboardCopyLink,
+  ClipboardCopyBtn,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  DateFormatYMDLong,
+  DateFormatDMYTime,
+  DatasetDetail,
+  DateInfo,
+  Doi,
+  DownloadDOICsv,
+  DownloadMetadataBtn,
+  EditorTips,
+  ElementIcon,
+  ElStateLabel,
+  ElSubmitTime,
+  ElAspect,
+  EmbargoCom,
+  IconLicense,
+  IconToMyDB,
+  isNmrPass,
+  isDatasetPass,
+  HomeFeature,
+  MoleculeInfo,
+  NewsroomTemplate,
+  PreviewImage,
+  PublishAnalysesTag,
+  PublishTypeAs,
+  ReactionSchemeOnlyInfo,
+  ReactionInfo,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalyses,
+  RenderPublishAnalysesPanel,
+  RequiredLabel,
+  SchemeWord,
+  SidToPubChem,
+  ShowIndicator,
+  SvgPath,
+  ToggleIndicator,
+};
diff --git a/app/assets/javascripts/libHome/RepoContact.js b/app/assets/javascripts/libHome/RepoContact.js
new file mode 100644
index 000000000..028a6eadb
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoContact.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Well, Col, Row } from 'react-bootstrap';
+
+const RepoContact = () => {
+  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />ioc.kit.edu</span>;
+  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
+  return (
+    <div >
+      <br /><br /><br />
+      <Well style={{ width: '90%', margin: 'auto' }}>
+        <Row>
+          <Col md={6}>
+            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
+              <tbody>
+                <tr><td><h3>Complat</h3><br /><br /></td></tr>
+                <tr><td>{institute}</td></tr>
+                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
+                <tr><td>Building 341</td></tr>
+                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
+                <tr><td>Germany<br /><br /></td></tr>
+                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
+                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
+                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
+              </tbody>
+            </table>
+          </Col>
+          <Col md={6}>
+            <iframe
+              title="Complat location"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
+              style={{
+                width: '80%', height: 400, frameborder: '0', margin: 'auto'
+              }}
+            />
+          </Col>
+        </Row>
+      </Well>
+      <br /><br /><br />
+    </div>
+  );
+};
+
+export default RepoContact;
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
new file mode 100644
index 000000000..8c4ca3b26
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoContainerDatasets.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
+import ContainerDatasetModal from '../components/ContainerDatasetModal';
+import ContainerDatasetField from '../components/ContainerDatasetField';
+
+export default class RepoContainerDatasets extends Component {
+  constructor(props) {
+    super(props);
+    const { container } = props;
+    this.state = {
+      container,
+      modal: {
+        show: false,
+        dataset_container: null
+      }
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    });
+  }
+
+  handleModalOpen(datasetContainer) {
+    const { modal } = this.state;
+    modal.dataset_container = datasetContainer;
+    modal.show = true;
+    this.setState({ modal });
+  }
+
+  handleModalHide() {
+    const { modal } = this.state;
+    modal.show = false;
+    modal.dataset_container = null;
+    this.setState({ modal });
+    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
+    document.body.className = document.body.className.replace('modal-open', '');
+  }
+
+  render() {
+    const { container, modal } = this.state;
+
+    if (container.children.length > 0) {
+      return (
+        <div>
+          <ListGroup style={{ marginBottom: 20 }}>
+            {container.children.map((datasetContainer) => {
+              return (
+                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} style={{ border: 'none', backgroundColor: 'transparent' }}>
+                  <ContainerDatasetField
+                    dataset_container={datasetContainer}
+                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
+                    disabled
+                  />
+                </ListGroupItem>
+              );
+            })}
+          </ListGroup>
+          <hr style={{ borderColor: '#ddd' }} />
+          <ContainerDatasetModal
+            onHide={() => this.handleModalHide()}
+            show={modal.show}
+            readOnly
+            dataset_container={modal.dataset_container}
+            disabled
+          />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
+          <h5>There are currently no Datasets.</h5>
+        </Well>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoDirective.js b/app/assets/javascripts/libHome/RepoDirective.js
new file mode 100644
index 000000000..8712595b1
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoDirective.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+import { Parser } from 'html-to-react';
+
+export default class RepoDirective extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      content: <div />
+    };
+  }
+
+  componentDidMount() {
+    fetch('/directives/directives.html', { credentials: 'same-origin' })
+      .then(res => res.text())
+      .then((html) => {
+        // const parser = new HtmlToReactParser();
+        this.setState({ content: Parser().parse(html) });
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  render() {
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={3} />
+        <Col md={6}>
+          <Panel>
+            <Panel.Heading>
+              <Panel.Title>Directive to use the service</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
+              {this.state.content}
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={3} />
+      </Row>
+    );
+  }
+};
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
new file mode 100644
index 000000000..abf6329ee
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoElementDetails.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import { DatasetDetail } from './RepoCommon';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoElementDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentElement: {}
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+
+    switch (elementType) {
+      case 'dataset': return <DatasetDetail element={currentElement} />;
+      case 'molecule': return (
+        <RepoSampleDetails
+          isPublished
+          element={currentElement}
+          reviewLevel={this.state.reviewLevel}
+          submitter={this.state.submitter}
+          pubState={this.state.pubState}
+          comments={this.state.commentInfo ? this.state.commentInfo : {}}
+          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+        />);
+      case 'reaction': return (
+        <RepoReactionDetails
+          isPublished
+          reaction={currentElement}
+          reviewLevel={this.state.reviewLevel}
+          submitter={this.state.submitter}
+          pubState={this.state.pubState}
+          comments={this.state.commentInfo ? this.state.commentInfo : {}}
+          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+        />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none', maxHeight: '80%' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoEmbargo.js b/app/assets/javascripts/libHome/RepoEmbargo.js
new file mode 100644
index 000000000..7a5f934c7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoEmbargo.js
@@ -0,0 +1,278 @@
+import React, { Component } from 'react';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
+import Select from 'react-select';
+import { findIndex, filter } from 'lodash';
+import RepoEmbargoDetails from './RepoEmbargoDetails';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { ElAspect } from './RepoCommon';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+
+const renderMenuItems = (bundles) => {
+  if (bundles.length < 1) return <div />;
+  const menu = bundles.map(bundle => (
+    <MenuItem key={bundle.value} eventKey={bundle.value}>
+      {bundle.label}
+    </MenuItem>
+  ));
+  return menu;
+};
+
+export default class RepoEmbargo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      current_user: {},
+      currentElement: null,
+      moveElement: {},
+      newEmbargo: null,
+      selectEmbargo: null,
+      bundles: [],
+      showConfirmModal: false,
+      showMoveModal: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
+    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
+    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
+    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
+    this.handleMoveShow = this.handleMoveShow.bind(this);
+    this.handleMoveClose = this.handleMoveClose.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    this.loadBundles();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+    if (this.state.selectEmbargo !== null) {
+      const vaildSelect = state.bundles.find(b => b.value === this.state.selectEmbargo.value);
+      if (typeof (vaildSelect) === 'undefined') {
+        this.setState({ selectEmbargo: null });
+      }
+    }
+  }
+
+  onClickDelete() {
+    this.setState({ showConfirmModal: true });
+  }
+
+
+  handleMoveShow(element) {
+    this.setState({
+      showMoveModal: true,
+      moveElement: element
+    });
+  }
+
+  handleMoveClose() {
+    this.setState({ showMoveModal: false, moveElement: {} });
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ newEmbargo: selectedValue });
+    }
+  }
+
+  handleElementSelection(eventKey, event) {
+    const { bundles } = this.state;
+    const selectEmbargo = bundles.find(b => b.value === eventKey);
+    this.setState({ selectEmbargo });
+    PublicActions.getEmbargoElements(eventKey);
+  }
+
+  handleEmbargoAccount() {
+    const { selectEmbargo } = this.state;
+
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else {
+      PublicActions.generateEmbargoAccount(selectEmbargo.value);
+      alert(`A temporary account for [${selectEmbargo.label}] has been created. The details have been sent to you by e-mail.`);
+    }
+  }
+
+  handleEmbargoRelease() {
+    const { selectEmbargo } = this.state;
+
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else {
+      PublicActions.releaseEmbargo(selectEmbargo.value);
+      alert(`The embargo on [${selectEmbargo.label}] has been released!`);
+    }
+  }
+
+  handleEmbargoDelete(shouldPerform) {
+    if (shouldPerform) {
+      const { selectEmbargo } = this.state;
+      if (selectEmbargo === null) {
+        alert('Please select an embargo first!');
+      } else {
+        PublicActions.deleteEmbargo(selectEmbargo.value);
+      }
+    }
+    this.setState({ showConfirmModal: false });
+  }
+
+  handleMoveEmbargo() {
+    const { selectEmbargo, moveElement, newEmbargo } = this.state;
+    PublicActions.moveEmbargo(selectEmbargo.value, newEmbargo, moveElement);
+    this.setState({ showMoveModal: false });
+  }
+
+  loadBundles() {
+    PublicActions.fetchEmbargoBundle();
+  }
+
+  renderSearch(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const customClass = '.btn-unified';
+    const actionButtons = current_user.type === 'Anonymous' ? <span /> :
+      (
+        <span>
+          <Button
+            bsStyle="primary"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || elements.length === 0}
+            onClick={() => this.handleEmbargoAccount()}
+          >
+            <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
+          </Button>
+          <Button
+            bsStyle="primary"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
+            onClick={() => this.handleEmbargoRelease()}
+          >
+            <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
+          </Button>
+          <Button
+            bsStyle="danger"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || elements.length !== 0}
+            onClick={() => this.onClickDelete()}
+          >
+            <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
+          </Button>
+        </span>
+      );
+    const filterDropdown = (
+      <ButtonGroup>
+        <DropdownButton
+          className={customClass}
+          id="embargo-inner-dropdown"
+          title={selectEmbargo === null ? 'Embargo Bundle' : selectEmbargo.label}
+          style={{ width: '180px' }}
+          onSelect={this.handleElementSelection}
+        >
+          {renderMenuItems(bundles)}
+        </DropdownButton>
+        {actionButtons}
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+
+  // render modal
+  renderMoveModal() {
+    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
+    const defaultBundles = [
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+    const allBundles = defaultBundles.concat(filter(bundles, b => b.name !== (selectEmbargo == null ? '' : selectEmbargo.name)));
+
+    return (
+      <Modal
+        show={showMoveModal}
+        dialogClassName="move-embargo-dialog"
+        onHide={this.handleMoveClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.label}] to :
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <div>
+                  <Select
+                    value={this.state.newEmbargo}
+                    onChange={e => this.handleEmbargoChange(e)}
+                    options={allBundles}
+                    className="select-assign-collection"
+                  />
+                  <br />
+                  <ButtonToolbar>
+                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
+                  </ButtonToolbar>
+                </div>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    const {
+      elements, bundles, currentElement, currentUser, showConfirmModal
+    } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch(bundles)}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div>
+            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+              <Table striped className="review-entries">
+                <tbody striped="true" bordered="true" hover="true">
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, currentElement, this.handleMoveShow)) }
+                </tbody>
+              </Table>
+            </div>
+          </div>
+          <ConfirmModal
+            showModal={showConfirmModal}
+            title="Warning"
+            content="Are you sure that you want to delete this ?"
+            onClick={this.handleEmbargoDelete}
+          />
+        </Col>
+        <Col
+          className="review-element"
+          md={currentElement ? 8 : 0}
+        >
+          <RepoEmbargoDetails />
+          { this.renderMoveModal() }
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoEmbargoDetails.js b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
new file mode 100644
index 000000000..89d33cae8
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoEmbargoDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction': return <RepoReactionDetails reaction={currentElement.reaction} />;
+      case 'sample': return <RepoSampleDetails element={currentElement} />;
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>);
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/assets/javascripts/libHome/RepoHome.js
new file mode 100644
index 000000000..512a53cc3
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHome.js
@@ -0,0 +1,476 @@
+import React, {Component} from 'react'
+import { Label, Col, Row, Panel, ButtonToolbar, Button, Carousel, Thumbnail, Table, Well} from 'react-bootstrap'
+import SVG from 'react-inlinesvg'
+
+import PublicActions from '../components/actions/PublicActions'
+import PublicStore from '../components/stores/PublicStore'
+import { HomeFeature } from './RepoCommon';
+
+const PartnersInfo = (info) => {
+  const { header, img, content } = info
+  const imgSrc = `/images/repo/${img}`
+
+  return (
+    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
+      <div className="info">
+        <h4>{header}</h4>
+        <p>{content}</p>
+      </div>
+    </Thumbnail>
+  );
+}
+
+const Infos = [
+  {
+    header: "Database API",
+    img: "OAI.png",
+    content: "The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.",
+  }, {
+    header: "KIT Stiftung",
+    img: "KITStiftung.png",
+    content: "The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.",
+  }, {
+    header: "re3data",
+    img: "re3data.png",
+    content: "Karlsruhe Institute of Technology Registry of Research Data Repositories",
+  }, {
+    header: "Inchitrust",
+    img: "InChITRUST.png",
+    content: "The KIT has a Supporter Membership.",
+  }, {
+    header: "Datacite",
+    img: "DataCite.png",
+    content: "Helping you to find, access, and reuse data.",
+  }, {
+    header: "Pubmed",
+    img: "pubchem.jpg",
+    content: "All compounds are automatically registered with PubChem.",
+  }, {
+    header: "Thomson Reuters",
+    img: "DCIbadge.png",
+    content: "Datasets are automatically registered at the Data Citation Index.",
+  }, {
+    header: "DFG",
+    img: "ri_logo.png",
+    content: "Listed in the DFG catalogue for Research Infrastructures.",
+  }
+]
+
+const timeInterval = (date) => {
+  if (!date) { return null; }
+  switch (typeof date) {
+    case 'number':
+      break;
+    case 'string':
+      date = +new Date(date);
+      break;
+    case 'object':
+      if (date.constructor === Date) date = date.getTime();
+      break;
+    default:
+      date = +new Date();
+  }
+  let seconds = Math.floor((new Date() - date) / 1000);
+  let intrvlTypes = [
+    [31536000, 'year', 'a'],
+    [2592000, 'month', 'a'],
+    [604800, 'week', 'a'],
+    [86400, 'day', 'a'],
+    [3600, 'hour', 'an'],
+    [60, 'minute', 'a'],
+    [1, 'second', 'a'],
+  ]
+  let intrvlCount = 0
+  let intrvlType = intrvlTypes.find((e) => {
+    intrvlCount = Math.floor(seconds / e[0])
+    return intrvlCount >= 1
+  })
+  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
+}
+
+const CardLatestPublish = ({ lastPublished }) => {
+  if (lastPublished) {
+    const { sample, reaction } = lastPublished;
+    const svgPathSample = sample.sample_svg_file
+      ? `/images/samples/${sample.sample_svg_file}`
+      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
+    const pubTagSample = sample.tag || {};
+    const svgPathReaction = reaction
+      ? `/images/reactions/${reaction.reaction_svg_file}`
+      : '/images/no_image_180.svg';
+    const pubTagReaction = reaction.tag || {};
+    const spanStyle = {
+      color: 'black', textShadow: 'none', textAlign: 'justify', fontSize: 'medium'
+    };
+
+
+    return (
+      <div className="card-well-competition">
+        <Carousel className="carl-spt" indicators={false} interval={6000}>
+          <Carousel.Item className="carl-spt-item">
+            <a title="Click to view details" style={{ cursor: 'pointer' }} onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
+              <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
+            </a>
+            <Carousel.Caption className="caption">
+              <span style={spanStyle}>Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}</span>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item className="carl-spt-item">
+            <a title="Click to view details" style={{ cursor: 'pointer' }} onClick={() => PublicActions.displayReaction(reaction.id)}>
+              <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
+            </a>
+            <Carousel.Caption className="caption">
+    <span style={spanStyle}>Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}</span>
+            </Carousel.Caption>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+    );
+  }
+  return <div />;
+};
+
+const CardSample = ({ lastPublishedSample }) => {
+  const sample = lastPublishedSample;
+  let svgPath = '/images/no_image_180.svg';
+  // let href = ''
+
+  if (sample) {
+    svgPath = sample.svgPath
+      ? `/images/samples/${sample.sample_svg_file}`
+      : `/images/molecules/${sample.molecule.molecule_svg_file}`
+    // href = `/molecules/${sample.molecule.id}`;
+    const pubTag = sample.tag && sample.tag.taggable_data['publication'] || {}
+
+    return (
+      <div className="card-well">
+        <div style={{ backgroundColor: 'white' }}>
+          <SVG style={{ backgroundColor: 'white' }} src={svgPath} key={svgPath}/>
+        </div>
+        <p style={{ textAlign: 'centered' }}>Published { timeInterval(pubTag.published_at || pubTag.doi_reg_at || pubTag.queued_at)} by {pubTag.creators[0].name}</p>
+        <ButtonToolbar>
+          <Button
+            onClick={() =>PublicActions.displayMolecule(sample.molecule.id)}
+            bsStyle="primary"
+            // href={href}
+          >
+            View
+          </Button>
+        </ButtonToolbar>
+      </div>
+    )
+  }
+  return (
+    <div className="card-well">
+      <SVG src={'/images/wild_card/no_image_180.svg'} />
+
+      <ButtonToolbar>
+        <Button bsStyle="primary" >
+          View
+        </Button>
+      </ButtonToolbar>
+    </div>
+  )
+}
+
+const CardIntro = () => {
+  return (
+    <div className="card-well">
+      <ImgTitle />
+    </div>
+  )
+}
+
+const ImgTitle = () => {
+  return (
+    <Row>
+      <Col md={6}>
+        <img
+          className="icon-chemotion"
+          src="/images/repo/chemotion_full.svg"
+          key="chemotion_full"
+          alt="icon"
+        />
+      </Col>
+      <Col md={6}>
+        <h2 className="repository-for" >
+          Repository for molecules, reactions and research data
+        </h2>
+      </Col>
+      <Col md={12} >
+        <h3>Visibility and Impact</h3>
+        <ul>
+          <li>
+            Publish your structures, attach your characterization data, and make them citable via DOI
+          </li>
+          <li>
+            Automated registration at various scientific data providers
+          </li>
+          <li>
+            Long-term archival - from scientists for scientists
+          </li>
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Now, publish your Reactions</i>
+          </li>
+        </ul>
+      </Col>
+    </Row>
+  )
+}
+
+const StaticsBoard = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+
+    const csInfo = {
+      borderBottomWidth: '6px', paddingLeft: 'unset', paddingRight: 'unset', borderColor: '#3a9fd3', marginBottom: '10px'
+    };
+    const csHead = {
+      backgroundColor: 'unset', color: 'unset', fontSize: '2rem', border: 'none', textAlign: 'center', paddingLeft: 'unset', paddingRight: 'unset'
+    };
+
+    return (
+      <Row className="card-well-competition">
+        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
+            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder' }}>
+              <div style={{ fontSize: '6rem' }}><i className="icon-sample" /></div>
+              <div style={{ fontSize: '1.6rem' }}>Samples</div>
+            </Row>
+          </Col>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
+            <Row style={{ textAlign: 'left' }}>
+              <div style={{ fontSize: '1.6rem', color: '#3a9fd3', marginBottom: '-14px' }}>published</div>
+              <div style={{ fontSize: '4rem' }}>{stsSample.e_cnt}</div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
+            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder' }}>
+              <div style={{ fontSize: '6rem' }}><i className="icon-reaction" /></div>
+              <div style={{ fontSize: '1.6rem' }}>Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
+            <Row style={{ textAlign: 'left' }}>
+              <div style={{ fontSize: '1.6rem', color: '#3a9fd3', marginBottom: '-14px' }}>published</div>
+              <div style={{ fontSize: '4rem' }}>{stsReaction.e_cnt}</div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={{ ...csHead, padding: '0px' }}>
+            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder', display: 'inline' }}>
+              <div style={{ fontSize: '5rem' }}><i className="fa fa-area-chart" aria-hidden /></div>
+              <div style={{ fontSize: '1.6rem' }}>Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={6} md={6} sm={6} className="panel-heading" style={{ ...csHead, padding: '0px' }}>
+            <Row style={{ textAlign: 'left' }}>
+              <div style={{ fontSize: '4rem' }}>{stsAnalysisCnt}</div>
+              <div style={{ fontSize: '1.4rem', fontStyle: 'italic', display: 'inline-block' }}>Top 3:&nbsp;&nbsp;
+                <span style={{ float: 'right' }}>
+                  <div className="italic-desc">{stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}</div>
+                  <div className="italic-desc">{stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}</div>
+                  <div className="italic-desc">{stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}</div>
+                </span>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+class RepoHome extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    PublicActions.lastPublished();
+    PublicActions.publishedStatics();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(PublicState) {
+    if (PublicState.lastPublished || PublicState.publishedStatics) {
+      this.setState(prevState => ({
+        ...prevState,
+        lastPublished: PublicState.lastPublished,
+        publishedStatics: PublicState.publishedStatics
+      }));
+    }
+  }
+
+  render() {
+    const features = {
+      metadata: {
+        fa: 'fa fa-file-code-o',
+        title: 'Metadata',
+        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme 4.0.'
+      },
+      doi: {
+        fa: 'fa fa-id-card-o',
+        title: 'DOI',
+        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
+      },
+      license: {
+        fa: 'fa fa-creative-commons',
+        title: 'Licenses',
+        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
+      },
+      embargo: {
+        fa: 'fa fa-ban',
+        title: 'Embargo',
+        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
+      },
+      // usage: {
+      //   fa: 'fa fa-bar-chart',
+      //   title: 'Usage',
+      //   intro: 'Assess your research data and track the published research data......'
+      // },
+      // oai: {
+      //   fa: 'fa fa-tasks',
+      //   title: 'OAI Provider',
+      //   intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
+      // },
+      dataQuality: {
+        fa: 'fa fa-diamond',
+        title: 'Data Quality',
+        intro: 'Release your research data and pass an internal review that ensures data quality.'
+      },
+      peer: {
+        fa: 'fa fa-external-link',
+        title: 'Peer review',
+        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
+      },
+      store: {
+        fa: 'fa fa-database',
+        title: 'Storage',
+        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
+      },
+      api: {
+        fa: 'fa fa-connectdevelop',
+        title: 'APIs',
+        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
+      }
+    };
+
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={12}>
+          <Row>
+            <Col md={3} sm={12}>
+              <CardLatestPublish lastPublished={this.state.lastPublished} />
+            </Col>
+            <Col md={6} sm={12}>
+              <CardIntro />
+            </Col>
+            <Col md={3} sm={12}>
+              <StaticsBoard publishedStatics={this.state.publishedStatics} />
+            </Col>
+          </Row>
+          <Row>
+            <Col md={2} sm={12}>&nbsp;</Col>
+            <Col md={8} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Features
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={2} sm={12}>
+                  <div />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
+                </Col>
+                <Col md={2} sm={12}>
+                  <div />
+                </Col>
+              </Row>
+            </Col>
+            <Col md={2} sm={12}>&nbsp;</Col>
+          </Row>
+          <Row className="card-partners">
+            <Col md={12} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Partners, Affiliations, APIs
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="partner-row" >
+                    { Infos.map((info, index) => PartnersInfo(info, index)) }
+                  </div>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default RepoHome;
diff --git a/app/assets/javascripts/libHome/RepoHowTo.js b/app/assets/javascripts/libHome/RepoHowTo.js
new file mode 100644
index 000000000..00c109964
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo.js
@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div style={{ position: 'relative' }}>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (howto) => {
+  let imageUrl = '';
+  if (typeof (howto) !== 'undefined' && howto
+    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+    imageUrl = `/howto/${howto.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      {
+        imageUrl === '' ?
+          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
+            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+          </div>
+          :
+          <img
+            src={imageUrl}
+            style={{
+              display: 'block',
+              width: '100%',
+              height: 'auto'
+            }}
+            alt=""
+          />
+      }
+    </div>
+  );
+};
+
+export default class RepoHowTo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howtos: PublicStore.getState().howtos || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.howtos();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howtos) {
+      this.setState(prevState => ({
+        ...prevState, howtos: state.howtos
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initialHowTo()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_howto_editor
+        });
+      });
+  }
+
+  render() {
+    let { howtos } = this.state;
+    const { isEditor } = this.state;
+    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
+    howtos = orderBy(
+      howtos,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return howtos.length > 0 ? (
+      <Row className="howto_page">
+        <Col lg={12} md={12}>
+          <NewsList howtos={howtos} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) :
+      <Row className="howto_page" style={{ textAlign: 'center' }}>
+        <Col md={12}>
+          <BackSoonPage />
+        </Col>
+      </Row>;
+  }
+}
+
+const NewsColSmall = (param) => {
+  const { howto, isEditor } = param;
+  return (
+    <Col lg={12} md={12} sm={12} className="news_column">
+      <div className="news_card_content">
+        <div className="news_card_s">
+          <Col md={4} sm={12}>{mainImage(howto)}</Col>
+          <Col md={8} sm={12}>
+            <div className="card_info">
+              <div className="info">
+                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
+                <div className="news_content_card_s">
+                  <p />
+                  {howto.firstParagraph}
+                  <p />
+                </div>
+              </div>
+            </div>
+            <div className="read">
+              {renderEditRead(howto, isEditor)}
+            </div>
+          </Col>
+        </div>
+        <div className="news_card_badge_s">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
+          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
+          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
+        </div>
+      </div>
+    </Col>
+  );
+};
+
+const NewsList = (param) => {
+  const { howtos } = param;
+  return howtos.length > 0 ? (
+    <Row>
+      <Col md={1} />
+      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
+        <Row>
+          {
+            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
+          }
+        </Row>
+      </Col>
+      <Col md={1} />
+    </Row>
+  ) : <div />;
+};
+
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
new file mode 100644
index 000000000..a503ce392
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
@@ -0,0 +1,67 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import uuid from 'uuid';
+
+const fa = klass => (<i className={klass} aria-hidden="true" />);
+const FaBtn = props => (
+  <OverlayTrigger placement={props.place} overlay={<Tooltip id={uuid.v4()}>{props.tip}</Tooltip>}>
+    <Button bsStyle={props.bsStyle} bsSize={props.bsSize} onClick={props.onClick} >
+      {props.txt}&nbsp;{fa(props.fa)}
+    </Button>
+  </OverlayTrigger>
+);
+FaBtn.propTypes = {
+  tip: PropTypes.string.isRequired,
+  txt: PropTypes.string.isRequired,
+  fa: PropTypes.string,
+  place: PropTypes.string,
+  bsStyle: PropTypes.string,
+  bsSize: PropTypes.string,
+  onClick: PropTypes.func,
+};
+FaBtn.defaultProps = {
+  fa: '',
+  place: 'top',
+  bsStyle: 'primary',
+  bsSize: 'small',
+  onClick: null,
+};
+
+const EditorBtn = props => (
+  <div className="editor-btn">
+    <FaBtn tip="Add Text Section" txt="Add" fa="fa fa-file-text-o" onClick={() => props.onClick('txt')} />
+    <FaBtn tip="Add Image Section" txt="Add" fa="fa fa-picture-o" onClick={() => props.onClick('img')} />
+  </div>
+);
+
+EditorBtn.propTypes = {
+  onClick: PropTypes.func,
+};
+
+EditorBtn.defaultProps = {
+  onClick: null,
+};
+
+const EditorBaseBtn = props => (
+  <div className="editor-btn">
+    {/* <FaBtn tip="Preview" txt="Preview" bsStyle="info" onClick={onClick} /> */}
+    <FaBtn tip="Save" txt="Save" bsStyle="success" onClick={() => props.onClick('save')} />
+    <FaBtn tip="Delete" txt="Delete" bsStyle="danger" onClick={() => props.onClick('delete')} />
+  </div>
+);
+
+EditorBaseBtn.propTypes = {
+  onClick: PropTypes.func,
+};
+
+EditorBaseBtn.defaultProps = {
+  onClick: null,
+};
+
+module.exports = {
+  FaBtn,
+  EditorBtn,
+  EditorBaseBtn,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
new file mode 100644
index 000000000..b1f1609f4
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+
+export default class EditorImage extends Component {
+  handleDrop(files) {
+    if (files && files.length > 0) {
+      this.props.onChange('pfad', files);
+    }
+  }
+  render() {
+    return (
+      <div style={{ backgroundColor: 'white' }}>
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          onDrop={files => this.handleDrop(files)}
+          className="dropzone"
+        >
+          {
+            this.props.pfad !== '' ?
+              <div className="image-container">
+                <img src={`/${this.props.editor_type}/${this.props.pfad}`} alt="" />
+              </div>
+              : <p>Drop Files, or Click to Select.</p>
+          }
+        </Dropzone>
+      </div>
+    );
+  }
+}
+
+EditorImage.propTypes = {
+  pfad: PropTypes.string,
+  onChange: PropTypes.func,
+  editor_type: PropTypes.string,
+};
+
+EditorImage.defaultProps = {
+  pfad: '',
+  onChange: null,
+  editor_type: '',
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
new file mode 100644
index 000000000..d3c05b6c5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import QuillEditor from '../../components/QuillEditor';
+
+export default class EditorRichText extends Component {
+  handleChange(e) {
+    this.props.onChange('quill', e);
+  }
+  render() {
+    return (
+      <div style={{ backgroundColor: 'white' }}>
+        <QuillEditor
+          value={this.props.quill}
+          onChange={e => this.handleChange(e)}
+          extraToolbarOptions={[['link'], [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]]}
+        />
+      </div>
+    );
+  }
+}
+
+EditorRichText.propTypes = {
+  quill: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+EditorRichText.defaultProps = {
+  quill: null,
+  onChange: null,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
new file mode 100644
index 000000000..1af6593d7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'react-bootstrap';
+import RepoHowToDragSource from '../RepoHowToDragSource';
+import RepoHowToDropTarget from '../RepoHowToDropTarget';
+import EditorRichText from '../RepoHowTo/EditorRichText';
+import EditorImage from '../RepoHowTo/EditorImage';
+import { FaBtn } from './EditorBtn';
+
+export default class EditorStelle extends Component {
+  handleChange(t, e) {
+    this.props.onChange(t, e, this.props.sid);
+  }
+
+  renderComponent() {
+    let label = '';
+    let component = <div />;
+    switch (this.props.stelle.art) {
+      case 'txt':
+        label = (<div className="editor-stelle">Text Section</div>);
+        component =
+          (<EditorRichText
+            quill={this.props.stelle.quill}
+            onChange={(t, e) => this.handleChange(t, e)}
+            sid={this.props.sid}
+            editor_type={this.props.editor_type}
+          />);
+        break;
+      case 'img':
+        label = (<div className="editor-stelle">Image Section</div>);
+        component =
+          (<EditorImage
+            pfad={this.props.stelle.pfad}
+            onChange={(t, e) => this.handleChange(t, e)}
+            sid={this.props.sid}
+            editor_type={this.props.editor_type}
+          />);
+        break;
+      default:
+    }
+
+    return (
+      <div>
+        {label}
+        {component}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col md={12} sm={12}>
+          <RepoHowToDropTarget
+            sid={this.props.sid}
+            stelle={this.props.stelle}
+            onDrop={this.props.onDrop}
+          />
+        </Col>
+        <Col md={12} sm={12}>
+          <div className="pull-right">
+            <FaBtn tip="remove this section" txt="" fa="fa fa-trash-o" bsStyle="danger" bsSize="xsmall" onClick={() => this.props.onRemove(this.props.sid)} />
+          </div>
+          <RepoHowToDragSource sid={this.props.sid} stelle={this.props.stelle} />
+          {this.renderComponent()}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+EditorStelle.propTypes = {
+  sid: PropTypes.number.isRequired,
+  stelle: PropTypes.shape({
+    art: PropTypes.string,
+    quill: PropTypes.object,
+    pfad: PropTypes.string,
+  }).isRequired,
+  onDrop: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  editor_type: PropTypes.string.isRequired,
+};
+
diff --git a/app/assets/javascripts/libHome/RepoHowToDragSource.js b/app/assets/javascripts/libHome/RepoHowToDragSource.js
new file mode 100644
index 000000000..0873b66a2
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToDragSource.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const listSource = {
+  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
+
+export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
+
+RepoHowToDragSource.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowToDropTarget.js b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
new file mode 100644
index 000000000..09efb95a6
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const stelleTarget = {
+  drop(targetProps, monitor) {
+    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
+    const sourceProps = monitor.getItem();
+    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
+    if (targetTag.sid !== sourceTag.sid) {
+      targetProps.onDrop({ sourceTag, targetTag });
+    }
+  }
+};
+
+const stelleDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+
+class RepoHowToDropTarget extends Component {
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
+  }
+}
+
+export default DropTarget(
+  DragDropItemTypes.HOWTO,
+  stelleTarget, stelleDropCollect
+)(RepoHowToDropTarget);
+
+RepoHowToDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowToEditor.js b/app/assets/javascripts/libHome/RepoHowToEditor.js
new file mode 100644
index 000000000..7feca87b5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToEditor.js
@@ -0,0 +1,435 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoHowToEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { howto } = this.state;
+    howto.article.push(stelle({ art: e }));
+    this.setState(howto);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { howto } = this.state;
+    const { article } = howto;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    howto.article = article;
+    this.setState(howto);
+  }
+
+  onStelleRemove(e) {
+    const { howto } = this.state;
+    howto.article.splice(e, 1);
+    this.setState(howto);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { howto } = this.state;
+    switch (art) {
+      case 'quill':
+        howto.article[sid].quill = e;
+        this.setState(howto);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.howto && state.howto.key) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, howto: { title: '', content: {}, article: [] }
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { howto } = this.state;
+    switch (type) {
+      case 'title':
+        howto.title = event.currentTarget.value;
+        break;
+      case 'content':
+        howto.content = event;
+        break;
+      case 'published_at':
+        howto.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        howto.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ howto });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { howto } = this.state;
+    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      howto.published_at = DateFormatDMYTime(howto.published_at);
+    }
+    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      howto.firstParagraph = extractIntro(howto.article);
+      ArticleFetcher.createOrUpdateHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              howto: { title: '', content: {}, article: [] },
+              message: { type: 'success', content: 'Send to How-To successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { howto } = this.state;
+      ArticleFetcher.deleteHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { howto } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'howto')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          howto.article[sid].pfad = result.pfad_image;
+          this.setState(howto);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { howto } = this.state;
+    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>How-To Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            {
+              imageUrl === '' ?
+                <div style={{ textAlign: 'center' }}>
+                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+                </div>
+              :
+                <img
+                  src={imageUrl}
+                  style={{
+                    display: 'block',
+                    maxHeight: '100%',
+                    maxWidth: '100%',
+                  }}
+                  alt=""
+                />
+            }
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { howto } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'howto')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            howto.cover_image = result.cover_image;
+            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      howto,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
+    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
+    const stelles = howto.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="howto"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={howto}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>How-To Editor</b></h2>
+              <p>
+                Give Chemotion readers some advice
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={howto.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoHowToReader.js b/app/assets/javascripts/libHome/RepoHowToReader.js
new file mode 100644
index 000000000..4728c4c69
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToReader.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoHowToReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howto) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    } else {
+      return (
+        <div style={{ textAlign: 'center', height: 'auto' }}>
+          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+        </div>
+      );
+    }
+
+    return (
+      <span>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { howto } = this.state;
+    return (
+      <Row className="howto_page">
+        <Col md={2} />
+        <Col md={8} sm={12}>
+          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+            <Panel.Heading>
+              <Row>
+                <Col md={6} sm={12}>
+                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
+                  <div className="news_author">
+                    <i className="fa fa-user-circle" aria-hidden="true" />
+                    &nbsp;{howto.creator_name}
+                    <p />
+                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
+                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
+                  </div>
+                </Col>
+                <Col md={6} sm={12}>
+                  {this.coverImage()}
+                </Col>
+                <Col md={12} sm={12}>
+                  <div style={{ position: 'relative', marginTop: '10px' }}>
+                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
+                  </div>
+                </Col>
+              </Row>
+              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
+            </Panel.Heading>
+            <Panel.Body>
+              <Col lg={1} md={2}><div /></Col>
+              <Col lg={10} md={8} sm={12}>
+                <div className="news_quillviewer">
+                  {
+                    howto.article ?
+                    howto.article.map((s) => {
+                      if (s.art === 'txt') {
+                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                      }
+                      if (s.art === 'img') {
+                        return (
+                          <div key={uuid.v4()}>
+                            <img src={`/howto/${s.pfad}`} alt="" />
+                            <br />
+                          </div>
+                        );
+                      }
+                    }) : <div />
+                  }
+                </div>
+              </Col>
+              <Col lg={1} md={2}><div /></Col>
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={2} />
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsEditor.js b/app/assets/javascripts/libHome/RepoNewsEditor.js
new file mode 100644
index 000000000..99218a3f8
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsEditor.js
@@ -0,0 +1,427 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoNewsEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { news } = this.state;
+    news.article.push(stelle({ art: e }));
+    this.setState(news);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { news } = this.state;
+    const { article } = news;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    news.article = article;
+    this.setState(news);
+  }
+
+  onStelleRemove(e) {
+    const { news } = this.state;
+    news.article.splice(e, 1);
+    this.setState(news);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { news } = this.state;
+    switch (art) {
+      case 'quill':
+        news.article[sid].quill = e;
+        this.setState(news);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.news && state.news.key) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, news: NewsroomTemplate
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { news } = this.state;
+    switch (type) {
+      case 'title':
+        news.title = event.currentTarget.value;
+        break;
+      case 'content':
+        news.content = event;
+        break;
+      case 'published_at':
+        news.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        news.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ news });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { news } = this.state;
+    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      news.published_at = DateFormatDMYTime(news.published_at);
+    }
+    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      news.firstParagraph = extractIntro(news.article);
+      ArticleFetcher.createOrUpdate(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              news: NewsroomTemplate,
+              message: { type: 'success', content: 'Send to Newsroom successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { news } = this.state;
+      ArticleFetcher.delete(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { news } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'newsroom')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          news.article[sid].pfad = result.pfad_image;
+          this.setState(news);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { news } = this.state;
+    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>News Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            <img
+              src={imageUrl}
+              style={{
+                display: 'block',
+                maxHeight: '100%',
+                maxWidth: '100%',
+              }}
+              alt=""
+            />
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { news } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'newsroom')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            news.cover_image = result.cover_image;
+            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      news,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
+    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
+
+    const stelles = news.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="newsroom"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={news}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>Newsroom Editor</b></h2>
+              <p>
+                Chemotion NEWS
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={news.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsReader.js b/app/assets/javascripts/libHome/RepoNewsReader.js
new file mode 100644
index 000000000..0e83e02d7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsReader.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoNewsReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.news) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+    return (
+      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { news } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
+        <Col md={12} >
+          <Col md={2} />
+          <Col md={8} sm={12}>
+            <div className="chemotion_news">
+              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
+              &nbsp;Chemotion&nbsp;News
+            </div>
+          </Col>
+          <Col md={2} />
+        </Col>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+                <Panel.Heading>
+                  <Row>
+                    <Col md={6} sm={12}>
+                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
+                      <div className="news_author">
+                        <i className="fa fa-user-circle" aria-hidden="true" />
+                        &nbsp;{news.creator_name}
+                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
+                      </div>
+                    </Col>
+                    <Col md={6} sm={12}>
+                      {this.coverImage()}
+                    </Col>
+                  </Row>
+                  <br />
+                  <div className="heading_separator" />
+                </Panel.Heading>
+                <Panel.Body>
+                  <Col lg={1} md={2}><div /></Col>
+                  <Col lg={10} md={8} sm={12}>
+                    <div className="news_quillviewer">
+                      {
+                        news.article ?
+                          news.article.map((s) => {
+                            if (s.art === 'txt') {
+                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                            }
+                            if (s.art === 'img') {
+                              return (
+                                <div key={uuid.v4()}>
+                                  <img src={`/newsroom/${s.pfad}`} alt="" />
+                                  <br />
+                                </div>
+                              );
+                            }
+                          }) : <div />
+                      }
+                    </div>
+                  </Col>
+                  <Col lg={1} md={2}><div /></Col>
+                </Panel.Body>
+              </Panel>
+            </Col>
+            <Col md={2} />
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsroom.js b/app/assets/javascripts/libHome/RepoNewsroom.js
new file mode 100644
index 000000000..19e9f6020
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsroom.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy, slice } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div className="readedit">
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="readedit">
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (article) => {
+  let imageUrl = '/images/chemnews.png';
+  if (typeof (article) !== 'undefined' && article
+   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
+    imageUrl = `/newsroom/${article.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      <img
+        src={imageUrl}
+        style={{
+          display: 'block',
+          width: '100%',
+          height: 'auto',
+        }}
+        alt=""
+      />
+    </div>
+  );
+};
+
+export default class RepoNewsroom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      articles: PublicStore.getState().articles || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.articles();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.articles) {
+      this.setState(prevState => ({
+        ...prevState, articles: state.articles
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initial()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_article_editor
+        });
+      });
+  }
+
+  render() {
+    let { articles } = this.state;
+    const { isEditor } = this.state;
+    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
+    articles = orderBy(
+      articles,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return articles.length > 0 ? (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <LatestNews article={articles[0]} isEditor={isEditor} />
+            </Col>
+            <Col md={2} />
+          </Row>
+          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
+  }
+}
+
+const LatestNews = ({ article, isEditor }) => {
+  return (
+    <div className="news_latest_block">
+      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
+      <Col md={4} sm={12}>{mainImage(article)}</Col>
+      <Col md={8} sm={12}>
+        <Col md={12} sm={12}>
+          <span className="news_title">{article.title}</span>
+          <div className="news_content">
+            <p />
+            {article.firstParagraph}
+            <p />
+          </div>
+          <div>
+            {renderEditRead(article, isEditor)}
+          </div>
+        </Col>
+        <Col md={12} sm={12}>
+          <div className="heading_separator" />
+          <div className="news_author">
+            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
+            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
+          </div>
+        </Col>
+      </Col>
+    </div>
+  );
+};
+
+const NewsList = ({ articles, isEditor }) => {
+  return articles.length > 0 ? (
+    <Row>
+      <Col md={2} />
+      <Col md={8} sm={12}>
+        <Row>
+          <div className="news_time_box">
+            {
+              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
+            }
+          </div>
+        </Row>
+      </Col>
+      <Col md={2} />
+    </Row>
+  ) : <div />;
+};
+
+const NewsTBox = ({ article, isEditor }) => {
+  return (
+    <ul>
+      <li>
+        <span />
+        <div className="title">{article.title}</div>
+        <div className="content">{article.firstParagraph}</div>
+
+        <div className="author">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
+          {renderEditRead(article, isEditor)}
+        </div>
+        <div className="created_at">
+          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
+        </div>
+      </li>
+    </ul>
+  );
+};
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
new file mode 100644
index 000000000..e8e2b3e92
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -0,0 +1,713 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import {
+  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
+  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
+  FormGroup, FormControl, Nav, Navbar, Tooltip, OverlayTrigger,
+  Tabs, Tab
+} from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import UIActions from '../components/actions/UIActions';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import PubchemLabels from '../components/PubchemLabels';
+import RepoElementDetails from './RepoElementDetails';
+import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+import AutoCompleteInput from '../components/search/AutoCompleteInput';
+import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
+import Formula from '../components/common/Formula';
+
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const renderReaction = (element, currentElement) => {
+  const listClass = (currentElement !== null && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <tr
+      key={`list-reaction-${element.type}-${element.id}`}
+      className={listClass}
+      onClick={() => PublicActions.displayReaction(element.id)}
+    >
+      <td
+        colSpan="2"
+        style={{ position: 'relative' }}
+      >
+        <div>
+          <SVG src={element.svgPath} className="reaction" key={element.svgPath} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default class RepoPubl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // ...PublicStore.getState(),
+      page: 1,
+      perPage: 10,
+      showStructureEditor: false,
+      isSearch: false,
+      defaultSearchValue: null,
+      selectType: 'all',
+      inputDisabled: false,
+      queryMolfile: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      listType: 'reaction',
+      advFlag: false,
+      advType: 'Authors',
+      advValue: [],
+      selectUsers: [],
+      key: uuid.v4(),
+      showSearch: false
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.changeSort = this.changeSort.bind(this);
+    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
+    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
+    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
+    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
+    this.advSearchClick = this.advSearchClick.bind(this);
+    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
+    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleShowSearch = this.handleShowSearch.bind(this);
+  }
+
+  componentDidMount() {
+    PublicActions.selectPublicCollection.defer();
+    PublicStore.listen(this.onChange);
+    PublicActions.getReactions.defer();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSearchTypeChange(e) {
+    this.setState({ searchType: e.target && e.target.value });
+  }
+
+  handleStructureEditorCancel() {
+    this.setState({ isSearch: false });
+    this.hideStructureEditor();
+  }
+
+  showStructureEditor() {
+    this.setState({ showStructureEditor: true });
+  }
+
+  hideStructureEditor() {
+    this.setState({ showStructureEditor: false });
+  }
+
+  showAdvancedSearch() {
+    this.setState({ advFlag: true });
+  }
+
+  handleSelectAdvType(val) {
+    if (val) { this.setState({ advType: val, advValue: null }); }
+  }
+
+  onPerPageChange(e) {
+    this.setState({ perPage: e.target.value }, () => this.getList());
+  }
+
+  getList(ps = {}) {
+    const {
+      advFlag, advType, advValue,
+      isSearch,
+      selectType, selection,
+      page, perPage,
+    } = this.state;
+    let params = {
+      advFlag,
+      advType,
+      advValue,
+      elementType: selectType,
+      page,
+      perPage,
+      selection,
+      ...ps
+    };
+    if (isSearch) {
+      switch (this.state.listType) {
+        case 'reaction':
+          PublicActions.getSearchReactions(params);
+          break;
+        case 'sample':
+          PublicActions.getSearchMolecules(params);
+          break;
+        case 'scheme':
+          params = { ...params, collectionId: 'schemeOnly' };
+          PublicActions.getSearchReactions(params);
+          break;
+        default:
+      }
+      return;
+    }
+    switch (this.state.listType) {
+      case 'reaction':
+        params = { ...params, schemeOnly: false };
+        PublicActions.getReactions(params);
+        break;
+      case 'sample':
+        PublicActions.getMolecules(params);
+        break;
+      case 'scheme':
+        params = { ...params, schemeOnly: true };
+        PublicActions.getReactions(params);
+        break;
+      default:
+        PublicActions.getReactions(params);
+    }
+    UIActions.clearSearchSelection();
+  }
+
+  handleClearSearchSelection() {
+    this.setState({
+      defaultSearchValue: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      queryMolfile: null,
+      isSearch: false,
+      key: uuid.v4(),
+      page: 1
+    }, () => this.getList());
+  }
+
+  handleElementSelection(event) {
+    this.setState({ selectType: event.toLowerCase() });
+  }
+
+  handleShowSearch() {
+    const { showSearch, advFlag } = this.state;
+    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
+  }
+
+  closeAdvancedSearch() {
+    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
+  }
+
+
+  loadAdvValuesByName(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  changeSort(e) {
+    this.setState({
+      // isSearch: false,
+      // defaultSearchValue: null,
+      page: 1,
+      listType: e
+    }, () => this.getList());
+  }
+
+
+  renderMolecule(molecule) {
+    const {
+      advFlag, advType, advValue, currentElement
+    } = this.state;
+    const pubchemInfo = pubchemTag(molecule);
+    const svgPathSample = molecule.sample_svg_file
+      ? `/images/samples/${molecule.sample_svg_file}`
+      : `/images/molecules/${molecule.molecule_svg_file}`;
+    const listClass = (currentElement !== null && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+    return (
+      <tr
+        key={molecule.id}
+        className={listClass}
+        onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}
+      >
+        <td
+          colSpan="2"
+          style={{ position: 'relative' }}
+        >
+          <div style={{ float: 'left' }}>
+            <SVG src={svgPathSample} className="molecule" key={svgPathSample} />
+          </div>
+          <div style={{ paddingLeft: 5, wordWrap: 'break-word' }}>
+            <h4> <Formula formula={molecule.sum_formular} /> </h4>
+            <h4>
+              {molecule.iupac_name}
+              {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
+            </h4>
+          </div>
+        </td>
+      </tr>
+    );
+  }
+
+  renderMenuItems() {
+    const elements = [
+      'All', 'Samples', 'Reactions'
+    ];
+
+    const menu = elements.map(element => (
+      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
+        {element}
+      </MenuItem>
+    ));
+
+    return menu;
+  }
+
+
+  handleTanimotoChange(e) {
+    const val = e.target && e.target.value;
+    if (!isNaN(val - val)) {
+      this.setState({ tanimotoThreshold: val });
+    }
+  }
+
+  handleSelectionChange(selection) {
+    this.setState({
+      isSearch: true,
+      selection,
+      page: 1
+    }, () => this.getList());
+  }
+
+  structureSearch(molfile) {
+    const {
+      page,
+      perPage,
+      searchType,
+      selectType,
+      tanimotoThreshold
+    } = this.state;
+
+    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
+    const selection = {
+      molfile,
+      search_type: searchType,
+      tanimoto_threshold: tanimoto,
+      search_by_method: 'structure',
+      structure_search: true
+    };
+
+    this.setState(
+      {
+        isSearch: true,
+        selection,
+        page: 1,
+        defaultSearchValue: 'structure',
+        queryMolfile: molfile
+      },
+      () => PublicActions.getSearchMolecules({ // NB: use getList instead?
+        elementType: selectType,
+        page,
+        perPage,
+        selection,
+      })
+    );
+  }
+
+  handleStructureEditorSave(molfile) {
+    this.hideStructureEditor();
+    if (molfile) {
+      const molfileLines = molfile.match(/[^\r\n]+/g);
+      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
+        this.structureSearch(molfile);
+      } else {
+        // TODO: clear search?
+      }
+    }
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  onPaginationSelect(eventKey) {
+    const { pages } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      this.setState({ page: eventKey }, () => this.getList());
+    }
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+
+  renderSwitch() {
+    const { listType } = this.state;
+    return (
+      <Tabs
+        activeKey={listType}
+        onSelect={this.changeSort}
+        id="element-list-type"
+      >
+        <Tab eventKey="reaction" title="Reactions" />
+        <Tab eventKey="sample" title="Samples" />
+        <Tab eventKey="scheme" title="Scheme-only reactions" />
+      </Tabs>
+    );
+  }
+
+  renderSelectValues() {
+    const { advValue } = this.state;
+    return (
+      <Select.Async
+        multi
+        isLoading
+        backspaceRemoves
+        value={advValue}
+        valueKey="value"
+        labelKey="label"
+        loadOptions={this.loadAdvValuesByName}
+        onChange={this.handleSelectAdvValue}
+      />
+    );
+  }
+
+  handleSelectAdvValue(val) {
+    if (val) {
+      this.setState({ advValue: val });
+    }
+  }
+
+  advSearchClick() {
+    this.setState({ page: 1 }, () => this.getList());
+  }
+
+  renderAdvancedSearch() {
+    const { advFlag, advType, advValue } = this.state;
+    if (advFlag === true) {
+      this.listOptions = [
+        {
+          value: 'Authors',
+          label: 'by authors'
+        },
+        {
+          value: 'Ontologies',
+          label: 'by analysis type'
+        }
+      ];
+      return (
+        <div style={{ display: 'flex' }}>
+          <div>
+            <Select
+              simpleValue
+              searchable={false}
+              options={this.listOptions}
+              placeholder="Select search field"
+              clearable={false}
+              valueKey="value"
+              labelKey="label"
+              onChange={this.handleSelectAdvType}
+              defaultValue="Authors"
+              value={advType}
+              style={{ minWidth: '160px' }}
+            />
+          </div>
+          <div>
+            <Select.Async
+              multi
+              isLoading
+              backspaceRemoves
+              value={advValue}
+              valueKey="value"
+              labelKey="label"
+              loadOptions={this.loadAdvValuesByName}
+              onChange={this.handleSelectAdvValue}
+              style={{ minWidth: '200px' }}
+            />
+          </div>
+          <div>
+            <ButtonGroup>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
+                <Button onClick={this.advSearchClick} style={{ backgroundColor: 'rgb(221, 221, 221)' }}>
+                  <i className="fa fa-search" />
+                </Button>
+              </OverlayTrigger>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
+                <Button onClick={this.closeAdvancedSearch} style={{ backgroundColor: 'rgb(221, 221, 221)' }}>
+                  <i className="fa fa-times" />
+                </Button>
+              </OverlayTrigger>
+            </ButtonGroup>
+          </div>
+        </div>
+      );
+    }
+    return (<div />);
+  }
+
+  renderSearch() {
+    const { isSearch, defaultSearchValue } = this.state;
+    const customClass = '.btn-unified';
+
+    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
+    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
+
+    const buttonAfter = (
+      <ButtonGroup>
+        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
+          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
+            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
+          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+
+    const submitAddons = (
+      <Grid>
+        <Row>
+          <Col sm={6} md={4}>
+            <Form inline>
+              <Radio
+                ref={(input) => { this.searchSimilarRadio = input; }}
+                value="similar"
+                checked={this.state.searchType === 'similar'}
+                onChange={e => this.handleSearchTypeChange(e)}
+              >
+                &nbsp; Similarity Search &nbsp;
+              </Radio>
+              &nbsp;&nbsp;
+              <FormControl
+                style={{ width: '40%' }}
+                type="text"
+                value={this.state.tanimotoThreshold}
+                ref={(input) => { this.searchTanimotoInput = input; }}
+                onChange={e => this.handleTanimotoChange(e)}
+              />
+            </Form>
+          </Col>
+          <Col sm={4} md={2}>
+            <Radio
+              ref={(input) => { this.searchSubstructureRadio = input; }}
+              value="sub"
+              checked={this.state.searchType === 'sub'}
+              onChange={e => this.handleSearchTypeChange(e)}
+            >
+              Substructure Search
+            </Radio>
+          </Col>
+        </Row>
+      </Grid>
+    );
+
+    const inputAttributes = {
+      placeholder: 'IUPAC, InChI, SMILES, ...',
+      style: { minWidth: 168, maxWidth: 268 }
+    };
+
+    const suggestionsAttributes = {
+      style: {
+        marginTop: 15,
+        width: 398,
+        maxHeight: 400
+      }
+    };
+
+    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
+
+    const innerDropdown = (
+      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
+        <DropdownButton
+          id="search-inner-dropdown"
+          title={this.state.selectType === 'all' ? 'All' :
+          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
+        >
+          {this.renderMenuItems()}
+        </DropdownButton>
+      </OverlayTrigger>
+    );
+
+    return (
+      <div className="chemotion-search">
+        <div className="search-structure-draw">
+          <StructureEditorModal
+            showModal={this.state.showStructureEditor}
+            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
+            onCancel={this.handleStructureEditorCancel}
+            molfile={this.state.queryMolfile}
+            submitBtnText="Search"
+            submitAddons={submitAddons}
+          />
+        </div>
+        {
+          this.state.showSearch ?
+          (
+            <span>
+              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
+              </Button>
+              <div className="search-autocomplete">
+                <AutoCompleteInput
+                  key={this.state.key}
+                  inputAttributes={inputAttributes}
+                  inputDisabled={isSearch}
+                  defaultSearchValue={defaultSearchValue}
+                  suggestionsAttributes={suggestionsAttributes}
+                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
+                    this.state.selectType.toLowerCase(), input, 'public', false)}
+                  ref={(input) => { this.autoComplete = input; }}
+                  onSelectionChange={selection => this.handleSelectionChange(selection)}
+                  buttonBefore={innerDropdown}
+                  buttonAfter={buttonAfter}
+                />
+              </div>
+            </span>
+          ) :
+          (
+            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
+            </Button>
+          )
+        }
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      molecules, listType, reactions, currentElement, showSearch
+    } = this.state;
+
+    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
+      this.state.currentElement.publication.published_at) || (
+      this.state.currentElement && this.state.currentElement.published_samples
+      && this.state.currentElement.published_samples.length > 0 &&
+      this.state.currentElement.published_samples[0].published_at
+    )));
+
+    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
+
+    const elementList = () => {
+      switch (listType) {
+        case 'reaction':
+          return (reactions || []).map(r => renderReaction(r, currentElement));
+        case 'sample':
+          return (molecules || []).map(m => this.renderMolecule(m));
+        case 'scheme':
+          return (reactions || []).map(r => renderReaction(r, currentElement));
+        default:
+          return (reactions || []).map(r => renderReaction(r, currentElement));
+      }
+    };
+
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={isPubElement === true ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
+            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset', paddingLeft: 'unset' }} pullLeft>
+              {this.renderSearch()}
+            </Nav>
+            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset', paddingLeft: 'unset' }} pullLeft>
+              {this.renderAdvancedSearch()}
+            </Nav>
+            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset' }} pullRight>
+              {this.renderSwitch()}
+            </Nav>
+          </Navbar>
+
+          <div className={listClass} style={{ backgroundColor: '#f5f5f5' }} >
+            <Table className="sample-entries">
+              <tbody>
+                {elementList()}
+              </tbody>
+            </Table>
+          </div>
+          <div className="list-container-bottom">
+            <Row>
+              <Col sm={8}>{this.pagination()}</Col>
+              <Col sm={4}>{this.perPageInput()}</Col>
+            </Row>
+          </div>
+        </Col>
+        <Col
+          md={isPubElement === true}
+          // style={this.state.currentElement ? {} : { display: 'none' }}
+        >
+          <div className="public-element">
+            <RepoElementDetails />
+          </div>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
new file mode 100644
index 000000000..786e59478
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -0,0 +1,556 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import {
+  Panel,
+  Row,
+  Col,
+  Jumbotron,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { head, filter } from 'lodash';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AuthorList,
+  AuthorTitle,
+  AffiliationList,
+  CalcDuration,
+  ChemotionId,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  DateInfo,
+  Doi,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalysesPanel,
+  IconLicense,
+  IconToMyDB,
+  AnalysesTypeJoinLabel,
+  SchemeWord,
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from '../components/actions/PublicActions';
+import QuillViewer from '../components/QuillViewer';
+import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import RepoCommentModal from '../components/common/RepoCommentModal';
+import RepoReviewModal from '../components/common/RepoReviewModal';
+
+export default class RepoReactionDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showScheme: true,
+      showRinchi: false,
+      showProp: true,
+      showTlc: true,
+      showSA: true,
+      showRA: {},
+      showReviewModal: false,
+      btnAction: '',
+      showCommentModal: false,
+      commentField: '',
+      originInfo: '',
+    };
+
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.toggleSA = this.toggleSA.bind(this);
+    this.toggleRA = this.toggleRA.bind(this);
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  toggleSA() {
+    const { showSA } = this.state;
+    this.setState({ showSA: !showSA });
+  }
+
+  toggleRA(idx = -1) {
+    const { showRA } = this.state;
+    if (idx in showRA && showRA[idx] === false) {
+      showRA[idx] = true;
+    } else {
+      showRA[idx] = false;
+    }
+    this.setState({ showRA });
+  }
+
+  handleToggle(type) {
+    switch (type) {
+      case 'Scheme':
+        this.toggleScheme();
+        break;
+      case 'Rinchi':
+        this.toggleRinchi();
+        break;
+      case 'Prop':
+        this.toggleProp();
+        break;
+      default:
+        break;
+    }
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    this.setState({ showReviewModal, btnAction });
+  }
+
+  handleSubmitReview(elementId, comments, summary, feedback, action) {
+    LoadingActions.start();
+    PublicActions.reviewPublish(elementId, 'reaction', comments, summary, feedback, action);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    const today = new Date();
+    const d = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()} `;
+    const t = `${today.getHours()}:${today.getMinutes() + 1}:${today.getSeconds()} `;
+    const dt = `${d} ${t}`;
+    if (this.props.reviewLevel === 2) {
+      cinfo[field].feedback = comment;
+      cinfo[field].origInfo = origInfo;
+      cinfo[field].feedback_time = dt;
+    } else {
+      cinfo[field].comment = comment;
+      cinfo[field].origInfo = origInfo;
+      cinfo[field].comment_time = dt;
+    }
+
+    PublicActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  reactionInfo(reaction) {
+    const {
+      showScheme, showRinchi, showProp, showTlc
+    } = this.state;
+    const {
+      canComment,
+      reviewLevel,
+      submitter,
+      pubState,
+      comments,
+    } = this.props;
+
+    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+    const content = reaction.description;
+    const additionInfo = reaction.observation;
+
+    const descContent = (content && content.ops && content.ops.length > 0
+      && content.ops[0].insert) ? content.ops[0].insert.trim() : '';
+    let descQV = (
+      <span><b>Description:</b><QuillViewer value={content} preview />
+      </span>);
+    if (descContent === '') descQV = '';
+
+    const addinfoContent = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 &&
+      additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim() : '';
+    let addQV = (
+      <span><b>Additional information for publication and purification details:</b>
+        <QuillViewer value={additionInfo} preview />
+      </span>);
+    if (addinfoContent === '') addQV = '';
+
+    const temperature = reaction.temperature ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : '';
+    const duration = CalcDuration(reaction);
+    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
+    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${reaction.rf_value || ''}]; TLC-Description: [${reaction.tlc_description || ''}]`;
+
+    const bodyAttrs = {
+      style: {
+        fontSize: '90%',
+        paddingBottom: 'unset'
+      }
+    };
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+      reaction.publication.taggable_data.scheme_only === true) || false;
+    if (schemeOnly) {
+      if (canComment) {
+        return (
+          <RepoReactionSchemeInfo
+            reaction={reaction}
+            svgPath={svgPath}
+            showScheme={showScheme}
+            showRinchi={showRinchi}
+            showProp={showProp}
+            bodyAttrs={bodyAttrs}
+            onToggle={this.handleToggle}
+            comments={comments}
+            reviewLevel={reviewLevel}
+            pubState={pubState}
+            submitter={submitter}
+            onComment={this.handleCommentBtn}
+            propInfo={properties}
+            canComment={canComment}
+          />
+        );
+      }
+      return (
+        <RepoReactionSchemeInfo
+          reaction={reaction}
+          svgPath={svgPath}
+          showScheme={showScheme}
+          showRinchi={showRinchi}
+          showProp={showProp}
+          bodyAttrs={bodyAttrs}
+          onToggle={this.handleToggle}
+          canComment={canComment}
+        />
+      );
+    }
+    return (
+      <Panel style={{ marginBottom: '4px' }}>
+        <Panel.Body style={{ paddingBottom: '1px' }}>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <SVG key={svgPath} src={svgPath} className="reaction-details" />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={this.handleCommentBtn} />
+              <ReactionTable
+                reaction={reaction}
+                toggle={this.toggleScheme}
+                show={showScheme}
+                isPublic
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <div className="desc small-p">
+                <CommentBtn {...this.props} field="Description" orgInfo={descContent} onShow={this.handleCommentBtn} />
+                {descQV}
+              </div>
+              <div className="desc small-p">
+                <CommentBtn {...this.props} field="Additional information" orgInfo={addinfoContent} onShow={this.handleCommentBtn} />
+                {addQV}
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <ReactionRinChiKey
+                reaction={reaction}
+                toggle={this.toggleRinchi}
+                show={showRinchi}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="Properties" orgInfo={properties} onShow={this.handleCommentBtn} />
+              <ReactionProperties
+                reaction={reaction}
+                toggle={this.toggleProp}
+                show={showProp}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="TLC-Control" orgInfo={tlc} onShow={this.handleCommentBtn} />
+              <ReactionTlc
+                reaction={reaction}
+                toggle={this.toggleTlc}
+                show={showTlc}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+
+  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false) {
+    if (typeof (container) === 'undefined' || !container) {
+      return <span />;
+    }
+
+    const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
+    const show = this.state.showRA[idx];
+    if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
+      return <div />;
+    }
+
+    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} element={product} isPublic={this.props.isPublished} isLogin={isLogin} /> : <span />;
+
+    const analysesView = analyses.map((analysis) => {
+      const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.handleCommentBtn} />
+          <RenderPublishAnalysesPanel
+            key={`${type}_${analysis.id}`}
+            analysis={analysis}
+            elementType={type}
+            isPublic={this.props.isPublished}
+          />
+        </span>
+      );
+    });
+
+    return (
+      <div>
+        <span
+          role="presentation"
+          className="label label-default"
+          style={{
+            backgroundColor: '#777777',
+            color: 'white',
+            fontSize: 'smaller',
+            fontWeight: 'bold',
+            cursor: 'pointer'
+          }}
+          onClick={() => this.toggleRA(idx)}
+        >
+          Analyses &nbsp;
+          <i className={`glyphicon ${show}`} />
+        </span>
+        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+          {AnalysesTypeJoinLabel(analyses, type)}
+        </span>
+        <Panel style={{ border: 'none' }} id={`collapsible_${type}_analyses`} expanded={show} defaultExpanded onToggle={() => { }}>
+          <Panel.Collapse>
+            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+              {productHeader}
+              {analysesView}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProductAnalysisView(products, isLogin = false) {
+    if (typeof (products) === 'undefined' || !products || products.length === 0) {
+      return <span />;
+    }
+    return products.map((product, idx) => (
+      <div key={`product-${product.id}`}>
+        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin)}
+      </div>
+    ));
+  }
+
+  render() {
+    const {
+      reaction,
+      isPublished,
+      canComment,
+      reviewLevel,
+      submitter,
+      pubState,
+      comments,
+      summary,
+      feedback,
+      canClose,
+    } = this.props;
+    let { buttons } = this.props;
+
+    if (typeof (reaction) === 'undefined' || !reaction) {
+      return <div />;
+    }
+
+    const taggData = (reaction && reaction.publication && reaction.publication.taggable_data) || {};
+    const pubData = (reaction && reaction.publication) || {};
+    const doi = (reaction && reaction.doi) || {};
+
+    const aId = [].concat.apply([], taggData.affiliation_ids);
+    const affiliationMap = {};
+    const { literatures } = reaction;
+    const references = literatures ? literatures.map(lit => (
+      <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
+        <Citation key={lit.id} literature={lit} />
+      </li>
+    )) : [];
+    const refArray = [];
+    let referencesText = '';
+    if (literatures) {
+      literatures.forEach((lit) => {
+        const content = literatureContent(lit, true);
+        refArray.push(content);
+      });
+      referencesText = refArray.join('');
+    }
+
+    let aCount = 0;
+    aId.map((e) => {
+      if (!affiliationMap[e]) {
+        aCount += 1;
+        affiliationMap[e] = aCount;
+      }
+    });
+    const license = taggData.license || 'CC BY-SA';
+
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+      reaction.publication.taggable_data.scheme_only === true) || false;
+
+    let showDOI = <Doi type="reaction" id={reaction.id} doi={isPublished ? taggData.doi : doi} isPublished={isPublished} />;
+    if (schemeOnly) {
+      buttons = ['Decline', 'Comments', 'Accept'];
+      showDOI = '';
+    }
+
+    const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
+
+    return (
+      <div style={{ border: 'none' }}>
+        <div >
+          <Jumbotron key={`reaction-${reaction.id}`}>
+            {
+              canComment ?
+                <RepoReviewButtonBar
+                  element={{ id: reaction.id, elementType: 'Reaction' }}
+                  buttons={buttons}
+                  buttonFunc={this.handleReviewBtn}
+                  reviewLevel={reviewLevel}
+                  pubState={pubState}
+                  comments={comments}
+                  summary={summary}
+                  feedback={feedback}
+                /> : ''
+            }
+            {canClose ? <ClosePanel element={reaction} /> : ''}
+            <h4>
+              <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
+              <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />&nbsp;
+              {IconLicense(license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
+            </h4>
+            <br />
+            <ContributorInfo contributor={taggData.contributors} />
+            <h5>
+              <b>{AuthorTitle(taggData.author_ids)} </b>
+              <AuthorList creators={taggData.creators} affiliationMap={affiliationMap} />
+            </h5>
+            <AffiliationList
+              affiliations={taggData.affiliations}
+              affiliationMap={affiliationMap}
+            />
+            {showDOI}
+            <ChemotionId id={pubData.id} type="reaction" />
+            <h5>
+              <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
+              <b>Reference{references.length > 1 ? 's' : null}: </b>
+              <ul style={{ listStyle: 'none' }}>{references}</ul>
+            </h5>
+            <br />
+            <h5>
+              {this.reactionInfo(reaction)}
+            </h5>
+            {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction')}
+            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin)}
+          </Jumbotron>
+        </div>
+        {
+          canComment ? (
+            <div>
+              <RepoCommentModal
+                show={this.state.showCommentModal}
+                elementId={reaction.id}
+                elementType="reaction"
+                field={this.state.commentField}
+                orgInfo={this.state.originInfo}
+                state={pubState}
+                reviewLevel={reviewLevel}
+                submitter={submitter}
+                commentObj={comments[this.state.commentField]}
+                onUpdate={this.handleSubmitComment}
+                onHide={() => this.setState({ showCommentModal: false })}
+              />
+              <RepoReviewModal
+                show={this.state.showReviewModal}
+                elementId={reaction.id}
+                action={this.state.btnAction}
+                state={pubState}
+                reviewLevel={reviewLevel}
+                submitter={submitter}
+                comments={comments}
+                summary={summary}
+                feedback={feedback}
+                onSubmit={this.handleSubmitReview}
+                onHide={() => this.setState({ showReviewModal: false })}
+              />
+            </div>
+          ) : ''
+        }
+      </div>);
+  }
+}
+
+RepoReactionDetails.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  reviewLevel: PropTypes.number,
+  submitter: PropTypes.string,
+  pubState: PropTypes.string,
+  comments: PropTypes.object,
+  summary: PropTypes.string,
+  feedback: PropTypes.string,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+};
+
+RepoReactionDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  reviewLevel: 0,
+  submitter: '',
+  pubState: '',
+  comments: {},
+  summary: '',
+  feedback: '',
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+};
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
new file mode 100644
index 000000000..1ee3f144f
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Panel,
+  Row,
+  Col
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import SVG from 'react-inlinesvg';
+import { CommentBtn, ReactionTable, ReactionRinChiKey, ReactionProperties } from './RepoCommon';
+import QuillViewer from '../components/QuillViewer';
+
+const RepoReactionSchemeInfo = (props) => {
+  const content = props.reaction.description;
+  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const descQV = contentlength > 0 ?
+  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={props.svgPath} src={props.svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
+            <ReactionTable
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Scheme')}
+              show={props.showScheme}
+              isPublic
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Rinchi')}
+              show={props.showRinchi}
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+RepoReactionSchemeInfo.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  svgPath: PropTypes.string.isRequired,
+  showScheme: PropTypes.bool.isRequired,
+  showRinchi: PropTypes.bool.isRequired,
+  showProp: PropTypes.bool.isRequired,
+  bodyAttrs: PropTypes.object.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  comments: PropTypes.object,
+  reviewLevel: PropTypes.number,
+  pubState: PropTypes.string,
+  submitter: PropTypes.string,
+  propInfo: PropTypes.string,
+  onComment: PropTypes.func,
+  canComment: PropTypes.bool,
+};
+
+RepoReactionSchemeInfo.defaultProps = {
+  comments: {},
+  reviewLevel: 0,
+  pubState: '',
+  submitter: '',
+  propInfo: '',
+  onComment: () => {},
+  canComment: false
+};
+
+export default RepoReactionSchemeInfo;
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/assets/javascripts/libHome/RepoReview.js
new file mode 100644
index 000000000..620fcabd5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReview.js
@@ -0,0 +1,236 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
+import RepoReviewDetails from './RepoReviewDetails';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { IconToMyDB, SvgPath, ElStateLabel, ElSubmitTime, SchemeWord } from './RepoCommon';
+
+const renderElement = (e, currentElement) => {
+  if (e.type === 'Reaction') {
+    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+    const schemeOnly = (e && e.scheme_only === true) || false;
+    return (
+      <tr
+        key={e.id}
+        className={listClass}
+        onClick={() => PublicActions.displayReviewReaction(e.id)}
+      >
+        <td style={{ position: 'relative' }} >
+          <span className="review_element_label">
+            <IconToMyDB isLogin id={e.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+          </span>
+          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+          <div>
+            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+          </div>
+        </td>
+      </tr>
+    );
+  }
+  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => PublicActions.displayReviewSample(e.id)}
+    >
+      <td style={{ position: 'relative' }}>
+        <span className="review_element_label">
+          <IconToMyDB isLogin id={e.id} type="sample" />&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const defaultState = 'pending';
+
+export default class RepoReview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 10,
+      elements: [],
+      currentElement: null,
+      selectType: 'All',
+      selectState: defaultState
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    PublicActions.getElements.defer();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleElementSelection(t, event) {
+    const { page, perPage } = this.state;
+    if (t === 'type') {
+      this.setState({ selectType: event });
+      PublicActions.getElements(event,this.state.selectState, 1, perPage);
+    } else if (t === 'state') {
+      this.setState({ selectState: event });
+      PublicActions.getElements(this.state.selectType, event, 1, perPage);
+    }
+  }
+
+
+  onPerPageChange(e) {
+    const { page, selectType, selectState } = this.state;
+    const perPage = e.target.value;
+    this.setState({ perPage });
+    PublicActions.getElements(selectType, selectState, page, perPage);
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  onPaginationSelect(eventKey) {
+    const { pages, perPage, selectType, selectState } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      PublicActions.getElements(selectType, selectState, eventKey, perPage);
+    }
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+  renderMenuItems(t, elements) {
+    const menu = elements.map(element => (
+      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
+        {element}
+      </MenuItem>
+    ));
+    return menu;
+  }
+
+  renderSearch() {
+    const customClass = '.btn-unified';
+    const optSearchType = ['All', 'Samples', 'Reactions'];
+    const optSearchState = ['pending', 'reviewed', 'accepted'];
+
+    const filterDropdown = (
+      <ButtonGroup>
+        <DropdownButton
+          className={customClass}
+          id="type-inner-dropdown"
+          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
+          style={{ width: '100px' }}
+        >
+          {this.renderMenuItems('type', optSearchType)}
+        </DropdownButton>
+        <DropdownButton
+          className={customClass}
+          id="state-inner-dropdown"
+          title={this.state.selectState}
+          style={{ width: '100px' }}
+        >
+          {this.renderMenuItems('state', optSearchState)}
+        </DropdownButton>
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  render() {
+    const { elements, currentElement } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch()}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div>
+            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+              <Table striped className="review-entries">
+                <tbody striped="true" bordered="true" hover="true">
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement)) }
+                </tbody>
+              </Table>
+            </div>
+            <div className="list-container-bottom">
+              <Row>
+                <Col sm={8}>{this.pagination()}</Col>
+                <Col sm={4}>{this.perPageInput()}</Col>
+              </Row>
+            </div>
+          </div>
+        </Col>
+        <Col
+          className="review-element"
+          md={currentElement ? 8 : 0}
+          // style={this.state.currentElement ? {} : { display: 'none' }}
+        ><RepoReviewDetails />
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
new file mode 100644
index 000000000..88d13bae8
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import {
+  Button,
+  ButtonToolbar,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import RepoMetadataModal from '../components/common/RepoMetadataModal';
+
+const showButton = (btn, func, reviewLevel, pubState) => {
+  let title = btn;
+  let btnBsStyle = '';
+  let btnIcon = '';
+  let btnTooltip = '';
+  switch (btn) {
+    case 'Accept':
+      btnBsStyle = 'primary';
+      btnIcon = 'fa fa-paper-plane';
+      btnTooltip = 'Accept publication';
+      break;
+    case 'Review':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-exchange';
+      btnTooltip = 'Review publication, modification required for submittor';
+      break;
+    case 'Submit':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-play';
+      btnTooltip = 'Submit for publication';
+      break;
+    case 'Decline':
+      btnBsStyle = 'default';
+      btnIcon = 'fa fa-eject';
+      if (reviewLevel === 2) {
+        btnTooltip = 'Withdraw publication';
+        title = 'Withdraw';
+      } else if (reviewLevel === 3) {
+        btnTooltip = 'Reject publication';
+        title = 'Reject';
+      }
+      break;
+    default:
+      break;
+  }
+  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (reviewLevel === 2 && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
+    <OverlayTrigger
+      key={`ot_${title}`}
+      placement="top"
+      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
+    >
+      <Button
+        bsStyle={btnBsStyle}
+        onClick={() => func(true, btn)}
+      >
+        <i className={btnIcon} />&nbsp;{title}
+      </Button>
+    </OverlayTrigger>
+  ) : <span key={`span_${title}`} />;
+};
+
+const showCommentButton = (btn, func, comments, summary, feedback) => {
+  let hasComments = false;
+  if (Object.keys(comments).length > 0
+    || (summary && summary.length > 0)
+    || (feedback && feedback.length > 0)) {
+    hasComments = true;
+  }
+  return (
+    <OverlayTrigger
+      key="ot_comments"
+      placement="top"
+      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
+    >
+      <Button
+        bsStyle={hasComments ? 'success' : 'default'}
+        onClick={() => func(true, btn)}
+      >
+        <i className="fa fa-comments" />&nbsp;
+        Comments
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const RepoReviewButtonBar = props =>
+  (
+    <ButtonToolbar>
+      {
+        props.buttons.filter(b => b === 'Comments').map(b =>
+          showCommentButton(b, props.buttonFunc, props.comments, props.summary, props.feedback))
+      }
+      {
+        props.buttons.filter(b => b !== 'Comments').map(b =>
+          showButton(b, props.buttonFunc, props.reviewLevel, props.pubState))
+      }
+      <RepoMetadataModal
+        elementId={props.element.id}
+        elementType={props.element.elementType.toLowerCase()}
+      />
+    </ButtonToolbar>
+  );
+
+RepoReviewButtonBar.propTypes = {
+  element: PropTypes.shape({
+    id: PropTypes.number,
+    elementType: PropTypes.string
+  }).isRequired,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+  buttonFunc: PropTypes.func,
+  reviewLevel: PropTypes.number,
+  pubState: PropTypes.string,
+  comments: PropTypes.object,
+  summary: PropTypes.string,
+  feedback: PropTypes.string
+};
+
+
+RepoReviewButtonBar.defaultProps = {
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  buttonFunc: () => { },
+  reviewLevel: 0,
+  pubState: '',
+  comments: {},
+  summary: '',
+  feedback: ''
+};
+
+export default RepoReviewButtonBar;
diff --git a/app/assets/javascripts/libHome/RepoReviewCommon.js b/app/assets/javascripts/libHome/RepoReviewCommon.js
new file mode 100644
index 000000000..790e6324e
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewCommon.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+import { startsWith } from 'lodash';
+
+const AffiliationMap = (affiliationIds) => {
+  const aId = [].concat.apply([], affiliationIds);
+  const affiliationMap = {};
+  let aCount = 0;
+  aId.map((e) => {
+    if (!affiliationMap[e]) {
+      aCount += 1;
+      affiliationMap[e] = aCount;
+    }
+  });
+  return affiliationMap;
+};
+
+const CommentComponent = (comment, title, feedback, feedbackTitle) => {
+  const reviewer = (comment ?
+    (
+      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
+        <strong>{title}</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{comment}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+  const submitter = (feedback ?
+    (
+      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
+        <strong>{feedbackTitle}</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{feedback}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+  return (
+    <span>
+      {reviewer}
+      {submitter}
+    </span>
+  );
+};
+
+const CommentDisplay = ({ elReview, commentKey }) => {
+  let objectKey = commentKey;
+  if (startsWith(commentKey, 'Reaction_Analysis_')) {
+    objectKey = 'Reaction Analysis';
+  } else if (startsWith(commentKey, 'Product_Analysis_')) {
+    objectKey = 'Product Analysis';
+  } else if (startsWith(commentKey, 'Analysis_')) {
+    objectKey = 'Analysis';
+  }
+
+  if (elReview) {
+    switch (objectKey) {
+      case 'Summary':
+        return CommentComponent(elReview.summary, 'Review Summary', elReview.feedback, 'Submitter Summary');
+      case 'Reference':
+      case 'Reaction Table':
+      case 'Description':
+      case 'Additional information':
+      case 'Properties':
+      case 'TLC-Control':
+      case 'Reaction Analysis':
+      case 'Product Analysis':
+      case 'Analysis':
+        return (elReview.comments && elReview.comments[commentKey]) ?
+          CommentComponent(
+            elReview.comments[commentKey].comment, `Review Comment on ${commentKey}`,
+            elReview.comments[commentKey].feedback, `Feedback on ${commentKey}`
+          ) : <div />;
+      default:
+        return <div />;
+    }
+  }
+  return <div />;
+};
+
+CommentDisplay.propTypes = {
+  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  commentKey: PropTypes.string.isRequired
+};
+
+CommentDisplay.defaultProps = {
+  elReview: null
+};
+
+export {
+  AffiliationMap,
+  CommentComponent,
+  CommentDisplay
+};
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
new file mode 100644
index 000000000..e50834c7c
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewDetails.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoReviewDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element,
+      commentInfo: {},
+      summaryInfo: '',
+      feedbackInfo: '',
+      pubState: '',
+      reviewLevel: 0,
+      submitter: '',
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction':
+        return (
+          <RepoReactionDetails
+            reaction={currentElement.reaction}
+            canComment
+            reviewLevel={this.state.reviewLevel}
+            submitter={this.state.submitter}
+            pubState={this.state.pubState}
+            comments={this.state.commentInfo ? this.state.commentInfo : {}}
+            summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+            feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+          />);
+      case 'sample':
+        return (
+          <RepoSampleDetails
+            element={currentElement}
+            canComment
+            reviewLevel={this.state.reviewLevel}
+            submitter={this.state.submitter}
+            pubState={this.state.pubState}
+            comments={this.state.commentInfo ? this.state.commentInfo : {}}
+            summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
+            feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
+          />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
new file mode 100644
index 000000000..68b13e86d
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Jumbotron, Panel } from 'react-bootstrap';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AffiliationList,
+  AnalysesTypeJoinLabel,
+  AuthorList,
+  ChemotionId,
+  CommentBtn,
+  ContributorInfo,
+  DateInfo,
+  Doi,
+  IconLicense,
+  IconToMyDB,
+  RenderPublishAnalysesPanel,
+  SidToPubChem,
+  ToggleIndicator,
+} from './RepoCommon';
+import { AffiliationMap } from './RepoReviewCommon';
+import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
+
+export default class RepoSample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expandSA: true,
+    };
+    this.toggleSA = this.toggleSA.bind(this);
+    this.renderAnalyses = this.renderAnalyses.bind(this);
+  }
+
+  toggleSA() {
+    const { expandSA } = this.state;
+    this.setState({ expandSA: !expandSA });
+  }
+
+  renderAnalyses(analyses) {
+    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
+    return orderAnalyses.map((analysis) => {
+      const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.props.handleCommentBtn} />
+          <RenderPublishAnalysesPanel
+            key={analysis.id}
+            analysis={analysis}
+            isPublic={this.props.isPublished}
+            elementType="Sample"
+          />
+        </span>
+      );
+    });
+  }
+
+  render() {
+    const {
+      sample, pubData, tagData, isPublished,
+      canComment, handleCommentBtn, isLogin
+    } = this.props;
+    const { expandSA } = this.state;
+
+    const affiliationMap = AffiliationMap(sample.affiliation_ids);
+
+    const references = sample.literatures ? sample.literatures.map(lit => (
+      <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
+        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <Citation key={lit.id} literature={lit} />
+      </li>
+    )) : [];
+
+    const refArray = [];
+    let referencesText = '';
+    if (canComment && sample.literatures) {
+      sample.literatures.forEach((lit) => {
+        const content = literatureContent(lit, true);
+        refArray.push(content);
+      });
+      referencesText = refArray.join('');
+    }
+
+    const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
+      ? <span />
+      : <h5><b>Name: </b> {sample.showed_name} </h5>;
+
+    const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
+    return (
+      <Jumbotron key={`sample-${sample.id}`}>
+        <h4>
+          <IconToMyDB isLogin={isLogin} id={sample.id} type="sample" />&nbsp;
+          <DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} />&nbsp;
+          <SidToPubChem sid={sample.sid} />&nbsp;
+          {IconLicense(sample.license, (sample.author_ids.length > 1))}
+        </h4>
+        <br />
+        {iupacUserDefined}
+        <ContributorInfo contributor={sample.contributors} />
+        <h5>
+          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
+          <AuthorList creators={sample.creators} affiliationMap={affiliationMap} />
+        </h5>
+        <AffiliationList
+          affiliations={sample.affiliations}
+          affiliationMap={affiliationMap}
+        />
+        <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
+        <ChemotionId id={pubData.id} type="sample" />
+        <h5>
+          {sample.reaction_ids.map(rid => (
+            <Button key={`reaction-link-btn-${rid}`} bsStyle="link" style={{ padding: '0px 0px' }} onClick={() => { window.location = `/home/publications/reactions/${rid}`; }}>
+              <i className="icon-reaction" style={{ fontSize: '1.5em' }} />{'Product of reaction'}
+            </Button>
+          ))}
+        </h5>
+        <h5>
+          <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
+          <b>Reference{references.length > 1 ? 's' : null}: </b>
+          <ul style={{ listStyle: 'none' }}>{references}</ul>
+        </h5>
+        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'} />
+        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+          {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
+        </span>
+        <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
+          <Panel.Collapse>
+            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+              {this.renderAnalyses(analyses)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </Jumbotron>
+    );
+  }
+}
+
+RepoSample.propTypes = {
+  sample: PropTypes.object.isRequired,
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+  canComment: PropTypes.bool,
+  handleCommentBtn: PropTypes.func,
+  isLogin: PropTypes.bool
+};
+
+RepoSample.defaultProps = {
+  canComment: false,
+  handleCommentBtn: () => {},
+  isLogin: false
+};
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
new file mode 100644
index 000000000..00d1ec23b
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -0,0 +1,236 @@
+import React, { Component } from 'react';
+import { Panel } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import {
+  ClosePanel,
+  MoleculeInfo,
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from '../components/actions/PublicActions';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import RepoCommentModal from '../components/common/RepoCommentModal';
+import RepoReviewModal from '../components/common/RepoReviewModal';
+import RepoSample from './RepoSample';
+
+export default class RepoSampleDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showReviewModal: false,
+      btnAction: '',
+      showCommentModal: false,
+      commentField: '',
+      originInfo: '',
+    };
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    this.setState({ showReviewModal, btnAction });
+  }
+
+  handleSubmitReview(elementId, comments, summary, feedback, action) {
+    LoadingActions.start();
+    PublicActions.reviewPublish(elementId, 'sample', comments, summary, feedback, action);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    const today = new Date();
+    const d = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()} `;
+    const t = `${today.getHours()}:${today.getMinutes() + 1}:${today.getSeconds()} `;
+    const dt = `${d} ${t}`;
+    if (this.props.reviewLevel === 2) {
+      cinfo[field].feedback = comment;
+      cinfo[field].origInfo = origInfo;
+      cinfo[field].feedback_time = dt;
+    } else {
+      cinfo[field].comment = comment;
+      cinfo[field].origInfo = origInfo;
+      cinfo[field].comment_time = dt;
+    }
+
+    PublicActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  render() {
+    const {
+      element,
+      isPublished,
+      canComment,
+      reviewLevel,
+      submitter,
+      pubState,
+      comments,
+      summary,
+      feedback,
+      canClose,
+      buttons
+    } = this.props;
+
+    if (typeof (element) === 'undefined' || !element) {
+      return <div />;
+    }
+
+    const {
+      molecule, isLogin
+    } = element;
+
+    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
+
+    let samples = [];
+    let pubData = {};
+    let tagData = {};
+    let { sample } = element;
+    if (isPublished) {
+      samples = element.published_samples;
+      sample = samples.find(x => x !== undefined);
+      sample.id = sample.sample_id;
+    } else {
+      samples.push(element.sample);
+      pubData = element.publication;
+    }
+
+    tagData = (pubData.taggable_data) || {};
+    const details = (samples || []).map((s) => {
+      if (isPublished) {
+        pubData = {
+          id: s.pub_id
+        };
+        tagData = {
+          published_at: s.published_at,
+          doi_reg_at: s.doi_reg_at
+        };
+      }
+      const el = {
+        id: s.id || s.sample_id,
+        sid: s.sid,
+        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
+        affiliations: s.affiliations || tagData.affiliations,
+        literatures: s.literatures || element.literatures,
+        license: s.license || tagData.license || 'CC BY-SA',
+        author_ids: s.author_ids || tagData.author_ids || [],
+        contributors: s.contributors || tagData.contributors,
+        creators: s.creators || tagData.creators,
+        doi: s.doi || element.doi,
+        reaction_ids: s.reaction_ids || [],
+        showed_name: s.showed_name,
+        molecule_iupac: molecule.iupac_name || [],
+        analyses: s.analyses || element.analyses || []
+      };
+
+      return (
+        <RepoSample
+          key={el.id}
+          sample={el}
+          pubData={pubData}
+          tagData={tagData}
+          handleCommentBtn={this.handleCommentBtn}
+          isLogin={idyLogin}
+          {...this.props}
+        />
+      );
+    });
+
+    return (
+      <Panel style={{ border: 'none' }} >
+        <Panel.Body>
+          {
+            canComment ?
+              <RepoReviewButtonBar
+                element={{ id: sample.id, elementType: 'Sample' }}
+                buttonFunc={this.handleReviewBtn}
+                reviewLevel={reviewLevel}
+                pubState={pubState}
+                comments={comments}
+                summary={summary}
+                feedback={feedback}
+                buttons={buttons}
+              /> : ''
+          }
+          {canClose ? <ClosePanel element={sample} /> : ''}
+          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
+          <div>
+            {details}
+          </div>
+          {
+            canComment ?
+              <div>
+                <RepoCommentModal
+                  show={this.state.showCommentModal}
+                  elementId={sample.id}
+                  elementType="Sample"
+                  field={this.state.commentField}
+                  orgInfo={this.state.originInfo}
+                  state={pubState}
+                  reviewLevel={reviewLevel}
+                  submitter={submitter}
+                  commentObj={comments[this.state.commentField]}
+                  onUpdate={this.handleSubmitComment}
+                  onHide={() => this.setState({ showCommentModal: false })}
+                />
+                <RepoReviewModal
+                  show={this.state.showReviewModal}
+                  elementId={sample.id}
+                  action={this.state.btnAction}
+                  state={pubState}
+                  reviewLevel={reviewLevel}
+                  submitter={submitter}
+                  comments={comments}
+                  summary={summary}
+                  feedback={feedback}
+                  onSubmit={this.handleSubmitReview}
+                  onHide={() => this.setState({ showReviewModal: false })}
+                />
+              </div> : ''
+          }
+
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+RepoSampleDetails.propTypes = {
+  element: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  reviewLevel: PropTypes.number,
+  submitter: PropTypes.string,
+  pubState: PropTypes.string,
+  comments: PropTypes.object,
+  summary: PropTypes.string,
+  feedback: PropTypes.string,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+};
+
+RepoSampleDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  reviewLevel: 0,
+  submitter: '',
+  pubState: '',
+  comments: {},
+  summary: '',
+  feedback: '',
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+};
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/assets/javascripts/libHome/homeRoutes.js
new file mode 100644
index 000000000..2e73d3f61
--- /dev/null
+++ b/app/assets/javascripts/libHome/homeRoutes.js
@@ -0,0 +1,219 @@
+import PublicActions from '../components/actions/PublicActions'
+import PublicFetcher from '../components/fetchers/PublicFetcher'
+
+const routes = {
+  '/': 'root',
+  target: {
+    root: function(e) {
+      Aviator.navigate('/home/welcome')
+    }
+  },
+
+  '/welcome': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("welcome")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/home': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("home")
+      },
+    },
+    '/': 'show'
+  },
+  '/publications': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("publications")
+      },
+    },
+    '/': 'show'
+  },
+  '/review': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("review")
+      },
+    },
+    '/': 'show'
+  },
+  '/about': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("about")
+      },
+    },
+    '/': 'show'
+  },
+  '/contact': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("contact")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/newsroom': {
+    target: {
+      list: function (e) {
+        PublicActions.articles();
+      },
+      show: function (e) {
+        PublicActions.displayArticle(e.params.key)
+      },
+    },
+    '/': 'list',
+    '/:key': 'show'
+  },
+
+  '/newseditor': {
+    target: {
+      edit: function (e) {
+        PublicActions.editArticle(e.params.key)
+      },
+      show: function (e) {
+        PublicActions.editArticle('new')
+      },
+    },
+    '/show': 'show',
+    '/:key': 'edit'
+  },
+
+  '/howtoeditor': {
+    target: {
+      edit: function (e) {
+        PublicActions.editHowTo(e.params.key)
+      },
+      show: function (e) {
+        PublicActions.editHowTo('ein')
+      },
+    },
+    '/show': 'show',
+    '/:key': 'edit'
+  },
+
+  '/directive': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("directive")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/datasets': {
+    target: {
+      show: function(e) {
+        PublicActions.displayDataset(e.params.datasetId)
+      },
+    },
+    '/:datasetId': 'show'
+  },
+
+  '/molecules': {
+    target: {
+      show: function(e) {
+        PublicActions.displayMolecule(e.params.moleculeId)
+      },
+    },
+    '/:moleculeId': 'show'
+  },
+
+  '/reactions': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReaction(e.params.reactionId)
+      },
+    },
+    '/:reactionId': 'show'
+  },
+
+  '/pid': {
+    target: {
+      show: function(e) {
+        PublicFetcher.queryPid({id: e.params.id})
+        }
+    },
+    '/:id': 'show'
+  },
+
+  '/inchikey': {
+    target: {
+      show: function(e) {
+        let url = e.uri.replace("/inchikey/", "")
+        let query = url.split(".")
+
+        if (query.length > 0) {
+          let version = query[1] || ""
+          let splitIndex = query[0].indexOf("/")
+          if (splitIndex < 0) splitIndex = query[0].length
+          let params = {
+            inchikey: query[0].substring(0, splitIndex),
+            type:  query[0].substring(splitIndex + 1),
+            version: version
+          }
+
+          PublicFetcher.queryInchikey(params)
+        }
+
+      },
+    },
+    '/*': 'show'
+  },
+
+  '/review_reaction': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReviewReaction(e.params.reactionId)
+      },
+    },
+    '/:reactionId': 'show'
+  },
+
+  '/review_sample': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReviewSample(e.params.sampleId)
+      },
+    },
+    '/:sampleId': 'show'
+  },
+
+  '/embargo': {
+    target: {
+      list: function (e) {
+        PublicActions.openRepositoryPage("embargo");
+      },
+      show: function (e) {
+        PublicActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
+      },
+    },
+    '/': 'list',
+    '/:elementType/:elementId': 'show'
+  },
+
+  '/howto': {
+    target: {
+      list: function (e) {
+        PublicActions.howtos();
+      },
+      show: function (e) {
+        PublicActions.displayHowTo(e.params.key)
+      },
+    },
+    '/': 'list',
+    '/:key': 'show'
+  },
+}
+
+export default function() {
+  Aviator.root = '/home'
+  Aviator.pushStateEnabled = true
+  Aviator.setRoutes(routes)
+}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 2b72aaee6..d8966acb2 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -253,6 +253,91 @@ $color-required: #d9534f;
   }
 }
 
+.review_element_label {
+  color: #333;
+  border-style: solid;
+  border-width: thin;
+  border-radius: 4px;
+  padding: 4px;
+
+  i {
+    font-size: 1.2em !important;
+  }
+}
+
+.list_focus_off {
+  cursor: pointer;
+  background-color: #F5F5F5;
+}
+.list_focus_on {
+  cursor: pointer;
+  background-color: #d4edda !important;
+}
+
+.feature {
+  display: flex;
+  .feature-block {
+    display: block;
+    position: relative;
+    padding: 16px 24px 32px 24px;
+    text-decoration: none;
+    z-index: 0;
+    overflow: hidden;
+    height: 100%;
+    &:before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      right: -16px;
+      background: unset;
+      height: 26px;
+      width: 100%;
+      transform: scale(1);
+      transform-origin: 50% 50%;
+      transition: transform 0.25s ease-out;
+      bottom: 50%;
+    }
+    &:hover:before {
+      transform: scale(8);
+      background: $color-chem-blue;
+    }
+    div {
+      padding: 8px;
+      display: inline-block;
+    }
+    h3 {
+      text-align: left;
+    }
+    i {
+      text-align: center;
+      display: inline-block;
+      color: $color-chem-blue;
+      position: relative;
+    }
+  }
+
+  .feature-block:hover {
+    p {
+      transition: all 0.3s ease-out;
+      color: #ffffff;
+    }
+    h3 {
+      transition: all 0.3s ease-out;
+      color: #ffffff;
+    }
+    i {
+      color: #ffffff;
+    }
+  }
+}
+
+.publish_tooltip {
+  .tooltip-inner {
+    text-align: left;
+    white-space: pre-wrap;
+  }
+}
+
 .review_element_label {
   color: #333;
   border-style: solid;
diff --git a/app/models/report.rb b/app/models/report.rb
index db856477d..ab636843b 100644
--- a/app/models/report.rb
+++ b/app/models/report.rb
@@ -92,6 +92,10 @@ def create_docx
       Reporter::WorkerDoiList.new(
         report: self, ext: 'xlsx'
       ).process
+    when 'doi_list_xlsx'
+      Reporter::WorkerDoiList.new(
+        report: self, ext: 'xlsx'
+      ).process
     else
       Reporter::Worker.new(
         report: self, template_path: tpl_path,
diff --git a/app/models/sample.rb b/app/models/sample.rb
index 205d5c8b9..56f389667 100644
--- a/app/models/sample.rb
+++ b/app/models/sample.rb
@@ -227,6 +227,8 @@ class Sample < ApplicationRecord
 
   has_one :doi, as: :doiable
 
+  has_one :doi, as: :doiable
+
   accepts_nested_attributes_for :molecule_name
   accepts_nested_attributes_for :collections_samples
   accepts_nested_attributes_for :molecule, update_only: true
@@ -254,7 +256,6 @@ def molfile_pubchem
     version = Chemotion::OpenBabelService.molfile_version(self.molfile)
     mf = Chemotion::OpenBabelService.mofile_clear_coord_bonds(self.molfile, version)
     mf = molfile unless mf
-
     mf&.split(/^\$\$\$\$/).first
   end
 
diff --git a/app/models/user.rb b/app/models/user.rb
index 9f5e83fb7..714fba2bb 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -442,6 +442,68 @@ def self.chemotion_user
     find_by(email: ENV['SYS_EMAIL'])
   end
 
+  def self.is_public
+    self.find_by(email: ENV['SYS_EMAIL'])
+  end
+
+  # TODO: mv to initializers
+  def self.reviewer_ids
+    (ENV['REVIEWERS'] || '').split(',').map(&:to_i)
+  end
+
+  def is_article_editor
+    (ENV['NEWSROOM_EDITOR'] || "").split(",").include?(self.id.to_s)
+  end
+
+  def is_howto_editor
+    (ENV['HOWTO_EDITOR'] || "").split(",").include?(self.id.to_s)
+  end
+
+  def pending_collection
+    su_id = User.chemotion_user.id
+    Collection.joins(
+      "INNER JOIN sync_collections_users ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Pending Publications'").first
+  end
+
+  def reviewing_collection
+    su_id = User.chemotion_user.id
+    Collection.joins(
+      "INNER JOIN sync_collections_users ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Reviewing'").first
+  end
+
+  def published_collection
+    su_id = User.chemotion_user.id
+    Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
+              .where("sync_collections_users.shared_by_id = #{su_id}")
+              .where("sync_collections_users.user_id = #{self.id}")
+              .where("collections.label = 'Published Elements'").first
+  end
+
+  def publication_embargo_collection
+    su_id = User.chemotion_user.id
+    Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
+              .where("sync_collections_users.shared_by_id = #{su_id}")
+              .where("sync_collections_users.user_id = #{self.id}")
+              .where("collections.label = 'Embargoed Publications'").first
+  end
+
+  def all_collection
+    Collection.where(user: self, label: 'All', is_locked: true, position: 0)&.first
+
+  end
+
+  def self.chemotion_user
+    find_by(email: ENV['SYS_EMAIL'])
+  end
+
   def current_affiliations
     Affiliation.joins(
       'INNER JOIN user_affiliations ua ON ua.affiliation_id = affiliations.id'
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
index c9a144367..54b32e4b1 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -584,6 +584,7 @@ class Material extends Component {
             disabled={!permitOn(reaction)}
             bsStyle="danger"
             bsSize="small"
+            disabled={this.props.reaction.is_published == true}
             onClick={() => deleteMaterial(material)}
           >
             <i className="fa fa-trash-o" />
@@ -663,6 +664,7 @@ class Material extends Component {
                 <Button
                   disabled={!permitOn(reaction)}
                   active
+                  disabled={this.props.reaction.is_published == true}
                   onClick={e => this.handleExternalLabelCompleted(e)}
                   bsSize="small"
                 ><i className="fa fa-refresh" /></Button>
@@ -688,6 +690,7 @@ class Material extends Component {
             disabled={!permitOn(reaction)}
             bsStyle="danger"
             bsSize="small"
+            disabled={this.props.reaction.is_published == true}
             onClick={() => deleteMaterial(material)}
           ><i className="fa fa-trash-o" /></Button>
         </td>
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 85b71df82..1eef72af0 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -22,6 +22,9 @@ import MolViewerSet from 'src/components/viewer/MolViewerSet';
 import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
 import MatrixCheck from 'src/components/common/MatrixCheck';
 
+import { PublishedTag } from './PublishCommon';
+import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
+
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
     &nbsp;
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
index 2c41d4255..261a21465 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -28,6 +28,8 @@ import CommentIcon from 'src/components/comments/CommentIcon';
 
 import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';
 
+import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
+
 const buildFlattenSampleIds = (displayedMoleculeGroup) => {
   let flatIndex = 0;
   const flattenSamplesId = [];
diff --git a/app/packs/src/components/QuillEditor.js b/app/packs/src/components/QuillEditor.js
index 3f82e1724..8d782d6a7 100644
--- a/app/packs/src/components/QuillEditor.js
+++ b/app/packs/src/components/QuillEditor.js
@@ -50,7 +50,7 @@ export default class QuillEditor extends React.Component {
     }));
 
     this.editor = false;
-    this.id = _.uniqueId('quill-editor-');
+    this.id = uniqueId('quill-editor-');
 
     this.getContents = this.getContents.bind(this);
     this.updateEditorValue = this.updateEditorValue.bind(this);
@@ -71,7 +71,7 @@ export default class QuillEditor extends React.Component {
     const oldContents = this.editor ? this.getContents() : null;
 
     if (oldContents && nextVal &&
-      !_.isEqual(nextVal.ops, oldContents.ops)) {
+      !isEqual(nextVal.ops, oldContents.ops)) {
       this.setState({ value: nextVal });
       const sel = this.editor.getSelection();
       this.editor.setContents(nextVal);
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index f9c70d807..c0a36ca22 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -1069,6 +1069,11 @@ export default class Sample extends Element {
     const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
     return analyses ? analyses.children : [];
   }
+
+  analysisArray() {
+    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
+    return analyses ? analyses.children : [];
+  }
 }
 
 Sample.counter = 0;
diff --git a/config/routes.rb b/config/routes.rb
index 585c36707..462d8b8c7 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -84,6 +84,8 @@
     get 'radar/export', to: 'radar#export'
   end
 
+  get 'directive', to: 'pages#directive'
+  get 'welcome', to: 'pages#home'
   get 'home', to: 'pages#home'
   # get 'home', to: 'pages#home'
   get 'jsmol', to: 'pages#jsmol'
diff --git a/db/migrate/20190211180200_add_published_at_publications.rb b/db/migrate/20190211180200_add_published_at_publications.rb
index 8789f2aaf..28cdabfba 100644
--- a/db/migrate/20190211180200_add_published_at_publications.rb
+++ b/db/migrate/20190211180200_add_published_at_publications.rb
@@ -8,4 +8,4 @@ def change
     p.save!
   end
 end
-end
\ No newline at end of file
+end
diff --git a/db/migrate/20190410130000_create_embargoed_publication_collections.rb b/db/migrate/20190410130000_create_embargoed_publication_collections.rb
index 988e2fd5b..607620266 100644
--- a/db/migrate/20190410130000_create_embargoed_publication_collections.rb
+++ b/db/migrate/20190410130000_create_embargoed_publication_collections.rb
@@ -16,4 +16,4 @@ def change
         permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
     end
   end
-end
\ No newline at end of file
+end
diff --git a/db/migrate/20190617153000_convert_analysis_type.rb b/db/migrate/20190617153000_convert_analysis_type.rb
deleted file mode 100644
index 7adf17ad0..000000000
--- a/db/migrate/20190617153000_convert_analysis_type.rb
+++ /dev/null
@@ -1,57 +0,0 @@
-class ConvertAnalysisType < ActiveRecord::Migration[4.2]
-
-  CONV = [
-    { kind: '1H NMR', ols: 'CHMO:0000593 | 1H nuclear magnetic resonance spectroscopy (1H NMR)' },
-    { kind: '13C NMR', ols: 'CHMO:0000595 | 13C nuclear magnetic resonance spectroscopy (13C NMR)' },
-    { kind: 'Mass', ols: 'CHMO:0000470 | mass spectrometry (MS)' },
-    { kind: 'EA', ols: 'CHMO:0001075 | elemental analysis (EA)' },
-    { kind: 'GCMS', ols: 'CHMO:0000497 | gas chromatography-mass spectrometry (GCMS)' },
-    { kind: 'HPLC', ols: 'CHMO:0001009 | high-performance liquid chromatography (HPLC)' },
-    { kind: 'IR', ols: 'CHMO:0000630 | infrared absorption spectroscopy (IR)' },
-    { kind: 'TLC', ols: 'CHMO:0001007 | thin-layer chromatography (TLC)' },
-    { kind: 'Crystal-Structure', ols: 'CHMO:0000156 | X-ray diffraction (XRD)' },
-    { kind: 'Others', ols: 'BFO:0000015 | process' }
-  ]
-
-  # there is an exception(incorrect?) data called 'Crystall-Structure', 'Crystall' with double 'l'.
-  # set it as 'Crystal-Structure'
-  EXCP = [
-    { kind: 'Crystall-Structure', ols: 'CHMO:0000156 | X-ray diffraction (XRD)' }
-  ]
-
-  def up
-    # convert
-    CONV.each do |c|
-      list = Container.where('extended_metadata->\'kind\' = (?) and container_type = \'analysis\' ', c[:kind])
-      list.each do |rs|
-        meta = rs.extended_metadata
-        meta["kind"] = c[:ols]
-        # use update_columns to bypass updated_at
-        rs.update_columns(extended_metadata: meta)
-      end
-    end
-
-    EXCP.each do |c|
-      list = Container.where('extended_metadata->\'kind\' = (?) and container_type = \'analysis\' ', c[:kind])
-      list.each do |rs|
-        meta = rs.extended_metadata
-        meta["kind"] = c[:ols]
-        # use update_columns to bypass updated_at
-        rs.update_columns(extended_metadata: meta)
-      end
-    end
-  end
-
-  def down
-    # revert
-    CONV.each do |c|
-      list = Container.where('extended_metadata->\'kind\' = (?) and container_type = \'analysis\' ', c[:ols])
-      list.each do |rs|
-        meta = rs.extended_metadata
-        meta["kind"] = c[:kind]
-        # use update_columns to bypass updated_at
-        rs.update_columns(extended_metadata: meta)
-      end
-    end
-  end
-end
diff --git a/db/migrate/20190619153000_default_recent_profile.rb b/db/migrate/20190619153000_default_recent_profile.rb
deleted file mode 100644
index f7036390f..000000000
--- a/db/migrate/20190619153000_default_recent_profile.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-class DefaultRecentProfile < ActiveRecord::Migration[4.2]
-
-  CHMO = ['CHMO:0000593', 'CHMO:0000595', 'CHMO:0000470', 'CHMO:0001075', 'CHMO:0000497', 'CHMO:0001009', 'CHMO:0000630', 'CHMO:0001007', 'CHMO:0000156', 'BFO:0000015']
-
-  def up
-    Person.find_each do |u|
-      profile = u.profile
-      data = profile.data || {}
-      data.merge!(chmo: CHMO)
-      # use update_columns to bypass updated_at
-      u.profile.update_columns(data: data)
-    end
-  end
-
-  def down
-    Person.find_each do |u|
-      profile = u.profile
-      data = profile.data
-      next if data.nil?
-      data.delete('chmo')
-      # use update_columns to bypass updated_at
-      u.profile.update_columns(data: data)
-    end
-  end
-end
diff --git a/db/migrate/20190712090136_curate_profile_recent_owl.rb b/db/migrate/20190712090136_curate_profile_recent_owl.rb
deleted file mode 100644
index ff279d75a..000000000
--- a/db/migrate/20190712090136_curate_profile_recent_owl.rb
+++ /dev/null
@@ -1,33 +0,0 @@
-class CurateProfileRecentOwl < ActiveRecord::Migration[4.2]
-  def change
-    Profile.find_each do |profile|
-      data = profile.data
-      next unless data
-      # break unless defined? OlsTerm
-      %w[chmo rxno].each do |owl_name|
-        next unless data[owl_name].present?
-        recent_terms = []
-        data[owl_name].each do |term|
-          unless term.is_a?(String)
-            recent_terms << term
-            next
-          end
-          t = OlsTerm.find_by(term_id: term)
-	        next unless t
-          new_term = {
-            'owl_name' => owl_name,
-            'term_id' => term,
-            'title' => t.label,
-            'synonym' => t.synonym,
-            'synonyms' => t.synonyms,
-            'search' => t.synonyms.nil? ? "#{term} | #{t.label}" : "#{term} | #{t.label} (#{[t.synonyms].flatten.join(',')})",
-            'value' => t.synonym.nil? ? " #{term} | #{t.label}" : " #{term} | #{t.label} (#{t.synonym})",
-          }
-          recent_terms << new_term
-        end
-        data[owl_name] = recent_terms
-      end
-      profile.update(data: data)
-    end
-  end
-end
diff --git a/db/schema.rb b/db/schema.rb
index eb60dca4f..6d8570933 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1650,8 +1650,8 @@
        RETURNS TABLE(literatures text)
        LANGUAGE sql
       AS $function$
-         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2 
-         where l.literature_id = l2.id 
+         select string_agg(l2.id::text, ',') as literatures from literals l , literatures l2
+         where l.literature_id = l2.id
          and l.element_type = $1 and l.element_id = $2
        $function$
   SQL
@@ -1818,6 +1818,60 @@
               NULL::jsonb AS x_stereo) c
     WHERE (c.x_id IS NOT NULL);
   SQL
+  create_function :shared_user_as_json, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.shared_user_as_json(in_user_id integer, in_current_user_id integer)
+       RETURNS json
+       LANGUAGE plpgsql
+      AS $function$
+         begin
+          if (in_user_id = in_current_user_id) then
+            return null;
+          else
+            return (select row_to_json(result) from (
+            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+            from users where id = $1
+            ) as result);
+          end if;
+          end;
+       $function$
+  SQL
+  create_function :user_as_json, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
+       RETURNS json
+       LANGUAGE sql
+      AS $function$
+         select row_to_json(result) from (
+           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
+           from users where id = $1
+         ) as result
+       $function$
+  SQL
+  create_function :user_ids, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
+       RETURNS TABLE(user_ids integer)
+       LANGUAGE sql
+      AS $function$
+          select $1 as id
+          union
+          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
+         and users.type in ('Group') and users_groups.user_id = $1)
+        $function$
+  SQL
+  create_function :user_instrument, sql_definition: <<-SQL
+      CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
+       RETURNS TABLE(instrument text)
+       LANGUAGE sql
+      AS $function$
+             select distinct extended_metadata -> 'instrument' as instrument from containers c
+             where c.container_type='dataset' and c.id in
+             (select ch.descendant_id from containers sc,container_hierarchies ch, samples s, users u
+             where sc.containable_type in ('Sample','Reaction') and ch.ancestor_id=sc.id and sc.containable_id=s.id
+             and s.created_by = u.id and u.id = $1 and ch.generations=3 group by descendant_id)
+             and upper(extended_metadata -> 'instrument') like upper($2 || '%')
+             order by extended_metadata -> 'instrument' limit 10
+           $function$
+  SQL
+
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
       lits.element_id,
diff --git a/lib/pub_chem.rb b/lib/pub_chem.rb
index 0e0d5b7f5..4934eb60b 100644
--- a/lib/pub_chem.rb
+++ b/lib/pub_chem.rb
@@ -94,6 +94,22 @@ def self.get_sid_from_doi(doi)
     end
   end
 
+  def self.get_sid_from_doi(doi)
+    options = {
+      :timeout => 10,
+      :headers => {'Content-Type' => 'application/x-www-form-urlencoded'},
+      :body => { 'sourceid' => doi }
+    }
+    begin
+      resp = HTTParty.post(http_s + PUBCHEM_HOST + '/rest/pug/substance/sourceid/' + DEPOSITOR_NAME + '/sids/TXT', options)
+      return nil unless resp.success?
+      resp.body.presence&.strip
+    rescue => e
+      Rails.logger.error "[RESCUE EXCEPTION] of [get_sid_from_doi] with doi [#{doi}], exception [#{e.inspect}]"
+      return nil
+    end
+  end
+
   def self.get_molfile_by_smiles(smiles)
     @auth = { username: '', password: '' }
     options = { timeout: 10, headers: { 'Content-Type' => 'text/json' } }

From 6cbc6fb3aaa61525d8da1775ad1bfe55dacf821c Mon Sep 17 00:00:00 2001
From: Pei Chi Huang <pei-chi.huang@kit.edu>
Date: Wed, 7 Jun 2023 10:28:01 +0200
Subject: [PATCH 239/258] Repo update (#45)

* add xvial and type check

* readonly for nmr

* trim data from orcid

* refresh embargo list

* add a button to redirect from db view to publication view

* export-sample-with-https-doi

* add loading module on publication search

* collection label error

* download analysis of publication without sign in

* view sprectra of products

* orig. is not required

* export embargo collections

* search embargo bundle number

* display name on review page

* embargo in reaction list

* search by authors or contributors

* sanitize_sql

* allow users to edit spectra's content

update package

using chem-spectra-client version 0.10.11

update version of chem-spectra-client

* deploy config mod

* add xvial symlink

* minor upd  Gem.lock db/schema

* add default profile

* FE fix after rebase

* update style back to original setting

* use 'mass spectrometry' and 'IR'

* publication embargo search

* make regenerate button for all unoriginal jdx files

* regenerate for reviewer only

* check and fix

* smiles to SMILES

* add permission on repository_api reaction and sample

* add validation

* fix migration file for solvent

* review reaction scheme

* fix duplicate function name from ELN rebase; publish reaction

* reaction list style

* focus on style of review page

* publication molecule layout

* add publish date to new layouts

* change style to solve overlap issue

* directing to the sample of publication
change wording 'xxx DOI' instead of 'DOI'

* fix e.split on review page issue

* fix e.split on review page issue

* review submitter list issue

* publication author and the link

* 1. unify the terminology: use Reference(s)
2. define citation type
3. publish references

* move js file to packs

* bundler

* migration file

* rm chemscanner

* chemscanner

* submission validation and collection

* reference desc

* rm dup. decoupled

* ref

* spectra 0.10.14-beta.0

* Collection DOI

* display the latest image

* Collection DOI

* Resolve "upgrade datacite schema"

* nmrshiftdb solvent

* add 'copy to clipboard' on collection doi

* assign to embargo

* Resolve "publish when segment exist"

* att permission for seg

* default segment of reaction, segment for publication

* oai metadata

* submission date

* option to skip yield validation

* how-to link and quill-viewer styling

* 1. add a button to copy collection DOI
2. add a checkbox confirmation to ensure that people that add data without an embargo know that the data is published as soon as review is completed

* reviewer-permission-with-embargo-accepted

* metadata

* remove regex of orcid in frontend
get result from API directly

* link to publications by clicking on the statics

* review comment

* the focus is on the selected record in the list when redirecting from a DOI

* switch tab after searching by inchi

* review comment r

* added molecule archive

* add xvial filter

* add xdata to the list

* count of compound

* publication element index

* import collection

* embargo author

* rename terms of service to directive

* landing page updates:
1. the word 'published' next to the analyses (right side) should be given in black.
2. add a published link to the samples (left side)
3. in reaction table
- space in header between name and unit
- unit in squared brackets
- ml should be mL
- switch from g to mg as unit
- bring yield in the sub header of the table

* new content of project description of about

* update copyright statement

* linting

* fix hyperlink as string issue

* fix dataset doi cannot be resolved issue

* add embargo link on review and copy function

* fix the bug for hyperlink export

* fix routing

* fix collection routing and info modal

* fix based on feedback

* workaround for react-svg-file-zoom-pan-latest library issue

* chem converter

* fixed: redirect to the latest published element successfully, but no details shown

* review comment fix

* hide info when inchikey is dummy

* embargo btns

* hr to h

* Update Navigation.js

* converter for user

* converter config file

* embargo email issue

* upgrade chemspectra

* fix duplicated img

* Resolve "porting the 3d viewer"

* Revert "Merge branch '520-upgrade-chemspectra' into 'server_chemotion_net-5'"

This reverts merge request !471

* upgrade chemspectra

* fix duplicated img

* embargo job fix

* disable 3d molecule

* publication page issue

* fix file ext issue

* resourceTypeGeneral sample

* add example text on request form

* increase font size

* ketcher backend

* add nmrium aasm_state

so that files with this state from ELN v1.5 can be transferred  (avoid `ActiveRecord::RecordInvalid (Validation failed: Aasm state is invalid)` on attachment save `app/api/chemotion/gate_api.rb:167` )

at this stage no event seems to be needed

* metadata description of sample publication

* sample representation on landing page

* shibboleth and group leader review

* Resolve "sync spectra"

* review notification

* Resolve "molecular mass descriptor in sample metadata"

* group default value

* fix White Screen when clicking on Analysis DOI

* fix white page while doi is null

* fix the incorrect license icon usage

* user reivew and svg fix

* group lead review update

* increase font size and add space

* add comp-number to published sample page

* Resolve "review ui reload issue"

* Resolve "compounds visibility"

* anchor on publication page

* add solvent to sample metadata

* published year

* linked-data

* add original id to compound list

* linked data api

* Extending chemotion_ELN with Repository functions

In short:
- data submission feature added to user ELN page
- Review page for internal reviewing
- Public page to browse published sample/reaction data

Contributors:
Chia-Lin Lin
Pei-Chi Huang
Pierre Tremouilhac

---------

Co-authored-by: Chia-Lin Lin <chia-lin.lin@kit.edu>
Co-authored-by: Pei-Chi Huang <pei-chi.huang@kit.edu>
Co-authored-by: Lan Le <lan.le@kit.edu>
Co-authored-by: PiTrem <pierre.tremouilhac@kit.edu>
---
 .env.production.example                       |   10 +-
 .gitlab-ci.yml                                |  122 -
 CHANGELOG.md                                  |   32 +-
 app/api/chemotion/attachment_api.rb           |   43 +
 app/api/chemotion/collection_api.rb           |   15 +-
 app/api/chemotion/converter_api.rb            |   68 +
 app/api/chemotion/generic_dataset_api.rb      |   27 +
 app/api/chemotion/generic_element_api.rb      |  427 ++
 app/api/chemotion/public_api.rb               |  406 +-
 app/api/chemotion/repository_api.rb           |    1 -
 app/api/chemotion/search_api.rb               |    1 -
 app/api/chemotion/segment_api.rb              |   99 +
 app/api/chemotion/sync_collection_api.rb      |   18 +
 app/api/entities/dataset_entity.rb            |   15 +
 app/api/entities/dataset_klass_entity.rb      |   11 +
 app/api/entities/device_entity.rb             |    1 -
 app/api/entities/element_klass_entity.rb      |   11 +
 app/api/entities/element_revision_entity.rb   |   55 +
 app/api/entities/generic_entity.rb            |   52 +
 app/api/entities/generic_public_entity.rb     |   16 +
 app/api/entities/klass_revision_entity.rb     |   20 +
 app/api/entities/segment_entity.rb            |   61 +
 app/api/entities/segment_klass_entity.rb      |   13 +
 app/api/entities/segment_revision_entity.rb   |   54 +
 app/api/helpers/generic_helpers.rb            |  105 +
 app/api/helpers/sample_association_helpers.rb |  100 +
 app/assets/stylesheets/ag-theme-alpine.css    |    1 +
 .../stylesheets/collection_management.scss    |    2 +-
 .../stylesheets/react-data-grid-addons.css    |    1 +
 app/assets/stylesheets/react-data-grid.css    |    1 +
 app/assets/stylesheets/repo_home.scss         |   24 +
 app/jobs/test_failure_job.rb                  |    9 +
 app/models/chemscanner/molecule.rb            |  112 +
 app/models/chemscanner/reaction.rb            |  113 +
 app/models/chemscanner/reaction_step.rb       |   38 +
 app/models/chemscanner/reactions_molecule.rb  |   37 +
 .../chemscanner/reactions_product_molecule.rb |   22 +
 .../reactions_reactant_molecule.rb            |   22 +
 .../chemscanner/reactions_reagent_molecule.rb |   22 +
 .../chemscanner/reactions_solvent_molecule.rb |   22 +
 app/models/chemscanner/scheme.rb              |   87 +
 app/models/chemscanner/source.rb              |  138 +
 app/models/collection.rb                      |    8 +
 app/models/collections_element.rb             |   52 +
 app/models/concerns/attachment_converter.rb   |   21 +
 app/models/concerns/attachment_jcamp_aasm.rb  |    2 +-
 app/models/concerns/datasetable.rb            |   43 +
 .../concerns/generic_klass_revisions.rb       |   20 +
 app/models/concerns/generic_revisions.rb      |   40 +
 app/models/concerns/publishing.rb             |    2 +-
 app/models/concerns/segmentable.rb            |   35 +
 app/models/dataset.rb                         |   22 +
 app/models/dataset_klass.rb                   |   40 +
 app/models/dataset_klasses_revision.rb        |   25 +
 app/models/datasets_revision.rb               |   24 +
 app/models/element.rb                         |  101 +
 app/models/element_klass.rb                   |   42 +
 app/models/element_klasses_revision.rb        |   24 +
 app/models/elements_revision.rb               |   25 +
 app/models/elements_sample.rb                 |   26 +
 app/models/molecule.rb                        |   14 +
 app/models/publication.rb                     |    6 +-
 app/models/report.rb                          |    6 +-
 app/models/segment.rb                         |   25 +
 app/models/segment_klass.rb                   |   40 +
 app/models/segment_klasses_revision.rb        |   25 +
 app/models/segments_revision.rb               |   24 +
 app/packs/src/admin/AdminDeviceElement.js     |  130 +
 app/packs/src/admin/AdminGroupElement.js      |  206 +
 app/packs/src/admin/AdminHome.js              |  219 +
 app/packs/src/admin/AdminNavigation.js        |   91 +
 app/packs/src/admin/DataCollector.js          |  561 +++
 app/packs/src/admin/DatasetElementAdmin.js    |  824 ++++
 app/packs/src/admin/DelayedJobs.js            |  101 +
 .../src/admin/DeleteGroupDeviceButton.js      |  103 +
 app/packs/src/admin/GenericElementAdmin.js    | 1013 ++++
 app/packs/src/admin/GroupsDevices.js          |  809 ++++
 app/packs/src/admin/MatrixManagement.js       |  383 ++
 app/packs/src/admin/MessagePublish.js         |  100 +
 app/packs/src/admin/NovncConfigContainer.js   |   55 +
 app/packs/src/admin/NovncSettings.js          |  378 ++
 app/packs/src/admin/OlsTerms.js               |  219 +
 app/packs/src/admin/SegmentElementAdmin.js    |  995 ++++
 app/packs/src/admin/TemplateManagement.js     |  412 ++
 app/packs/src/admin/UserManagement.js         |  944 ++++
 .../src/admin/converter/ConverterAdmin.js     |  407 ++
 app/packs/src/admin/generic/AttrCopyModal.js  |   84 +
 app/packs/src/admin/generic/AttrEditModal.js  |   86 +
 app/packs/src/admin/generic/AttrForm.js       |   21 +
 app/packs/src/admin/generic/AttrNewModal.js   |   67 +
 .../src/admin/generic/FieldCondEditModal.js   |  226 +
 app/packs/src/admin/generic/KlassAttrForm.js  |   65 +
 .../src/admin/generic/LayerAttrEditModal.js   |   49 +
 app/packs/src/admin/generic/LayerAttrForm.js  |   78 +
 .../src/admin/generic/LayerAttrNewModal.js    |   47 +
 app/packs/src/admin/generic/Preview.js        |  209 +
 .../src/admin/generic/SegmentAttrForm.js      |   55 +
 .../src/admin/generic/SelectAttrNewModal.js   |   46 +
 .../src/admin/generic/TemplateJsonModal.js    |   92 +
 app/packs/src/admin/generic/UploadModal.js    |   70 +
 app/packs/src/admin/generic/Utils.js          |  302 ++
 app/packs/src/admin/generic/collate.js        |   66 +
 .../admin/text_templates/ActionHeaderBtn.js   |   20 +
 .../src/admin/text_templates/ActionRowBtn.js  |   82 +
 .../src/admin/text_templates/TextTemplate.js  |  259 +
 .../text_templates/TextTemplateContainer.js   |  103 +
 .../admin/text_templates/TextTemplateIcon.js  |   31 +
 app/packs/src/apps/admin/AdminHome.js         |    1 +
 app/packs/src/apps/admin/AdminNavigation.js   |    1 +
 .../components/AbbreviationManagement.js      |   78 +-
 .../components/CopyClipboardBtn.js            |   11 +-
 .../apps/chemscanner/components/DeleteBtn.js  |   10 +-
 .../apps/chemscanner/components/HeaderMenu.js |  206 +-
 .../chemscanner/components/HelpPopover.js     |   28 +-
 .../chemscanner/components/MoleculeDetails.js |    4 +-
 .../components/PreviewFileZoomPan.js          |   54 +-
 .../chemscanner/components/ReactionDetails.js |   15 +-
 .../src/apps/chemscanner/components/Root.js   |   36 +-
 .../apps/chemscanner/components/SelectBtn.js  |    7 +-
 .../containers/AbbreviationContainer.js       |   14 +-
 .../chemscanner/containers/RootContainer.js   |    1 +
 .../src/apps/chemscanner/middleware/api.js    |   26 +-
 .../apps/chemscanner/middleware/chemdraw.js   |   17 +-
 .../apps/mydb/collections/MyCollections.js    |   16 +-
 .../ResearchPlanDetailsContainers.js          |    2 +
 .../analysesTab/SampleDetailsContainersAux.js |    7 +
 app/packs/src/components/AnalysisEditor.js    |  254 +
 app/packs/src/components/AnalysisNMR.js       |  216 +
 app/packs/src/components/App.js               |  180 +
 .../src/components/AttachmentDropzone.js      |   85 +
 app/packs/src/components/ChemrepoLabels.js    |   27 +
 app/packs/src/components/CitationTable.js     |   86 +
 .../src/components/CollectionManagement.js    |   28 +
 app/packs/src/components/CollectionSubtree.js |  281 ++
 app/packs/src/components/CollectionTree.js    |  355 ++
 app/packs/src/components/ComputeTask.js       |   89 +
 .../src/components/ComputeTaskContainer.js    |  115 +
 .../src/components/ContainerComponent.js      |  227 +
 app/packs/src/components/ContainerDataset.js  |  471 ++
 .../src/components/ContainerDatasetField.js   |  134 +
 .../src/components/ContainerDatasetModal.js   |   49 +
 app/packs/src/components/ContainerDatasets.js |  179 +
 .../src/components/DetailsTabLiteratures.js   |  306 ++
 .../src/components/DetailsTabMetadata.js      |  526 +++
 .../src/components/DeviceAnalysisDetails.js   |   75 +
 app/packs/src/components/DeviceDetails.js     |   79 +
 app/packs/src/components/DeviceManagement.js  |  226 +
 .../src/components/DeviceSampleContainer.js   |  204 +
 .../src/components/ElementAllCheckbox.js      |   90 +
 .../src/components/ElementAnalysesLabels.js   |   93 +
 app/packs/src/components/ElementCheckbox.js   |   47 +
 .../src/components/ElementCollectionLabels.js |  137 +
 app/packs/src/components/ElementContainer.js  |   36 +
 .../src/components/ElementDetailSortTab.js    |  158 +
 app/packs/src/components/ElementDetails.js    |  318 ++
 .../src/components/ElementReactionLabels.js   |   87 +
 .../src/components/ElementWellplateLabels.js  |   89 +
 .../src/components/ElementalComposition.js    |   83 +
 .../components/ElementalCompositionCustom.js  |  129 +
 .../components/ElementalCompositionGroup.js   |   80 +
 app/packs/src/components/Elements.js          |   58 +
 app/packs/src/components/ElementsTable.js     |  412 ++
 .../src/components/ElementsTableEntries.js    |  396 ++
 .../components/ElementsTableSampleEntries.js  |  442 ++
 .../src/components/ElementsTableSettings.js   |  188 +
 app/packs/src/components/ExportSamplesBtn.js  |   33 +
 app/packs/src/components/FastInput.js         |  105 +
 app/packs/src/components/FocusNovnc.js        |   93 +
 app/packs/src/components/FormatComponent.js   |  157 +
 app/packs/src/components/FormatContainer.js   |  172 +
 .../src/components/GeneralProcedureDnD.js     |   82 +
 app/packs/src/components/GraphContainer.js    |  117 +
 app/packs/src/components/GroupElement.js      |  213 +
 app/packs/src/components/List.js              |  299 ++
 app/packs/src/components/LiteratureCommon.js  |  237 +
 app/packs/src/components/LiteratureDetails.js |  526 +++
 app/packs/src/components/Material.js          |  860 ++++
 .../src/components/MaterialCalculations.js    |  124 +
 app/packs/src/components/MaterialGroup.js     |  335 ++
 .../src/components/MaterialGroupContainer.js  |  118 +
 app/packs/src/components/MoleculeModerator.js |  143 +
 .../components/MoleculeModeratorComponent.js  |  314 ++
 app/packs/src/components/NMRiumDisplayer.js   |  472 ++
 app/packs/src/components/Navigation.js        |  158 +
 app/packs/src/components/NavigationModal.js   |   48 +
 app/packs/src/components/Notifications.js     |    2 +-
 app/packs/src/components/NovncStatus.js       |   20 +
 app/packs/src/components/NumeralInput.js      |  102 +
 .../src/components/NumeralInputWithUnits.js   |   89 +
 .../components/NumeralInputWithUnitsCompo.js  |  243 +
 app/packs/src/components/PermissionIcons.js   |   22 +
 app/packs/src/components/PolymerSection.js    |  297 ++
 .../src/components/PrivateNoteElement.js      |  116 +
 app/packs/src/components/PubchemLabels.js     |   29 +
 app/packs/src/components/PubchemLcss.js       |   72 +
 app/packs/src/components/PubchemSigns.js      |   36 +
 app/packs/src/components/PublishCommon.js     |  328 ++
 .../components/PublishReactionContainers.js   |  150 +
 .../src/components/PublishReactionModal.js    |  940 ++++
 .../src/components/PublishSampleModal.js      |  600 +++
 .../components/ReactionDescriptionEditor.js   |  231 +
 app/packs/src/components/ReactionDetails.js   |  736 +++
 .../components/ReactionDetailsContainers.js   |  470 ++
 .../src/components/ReactionDetailsDuration.js |  167 +
 .../ReactionDetailsMainProperties.js          |  187 +
 .../components/ReactionDetailsProperties.js   |  180 +
 .../components/ReactionDetailsPurification.js |  177 +
 .../components/ReactionDetailsRepoComment.js  |   54 +
 .../src/components/ReactionDetailsScheme.js   | 1004 ++++
 .../src/components/ReactionDetailsShare.js    |   78 +
 app/packs/src/components/SampleDetails.js     | 1534 ++++++
 .../src/components/SampleDetailsContainers.js |  284 ++
 .../components/SampleDetailsContainersAux.js  |  511 ++
 .../components/SampleDetailsContainersCom.js  |  147 +
 .../components/SampleDetailsContainersDnd.js  |   88 +
 .../components/SampleDetailsRepoComment.js    |   57 +
 .../src/components/SampleDetailsSolvents.js   |  117 +
 .../components/SampleDetailsSolventsDnd.js    |  227 +
 app/packs/src/components/SampleForm.js        |  675 +++
 app/packs/src/components/ScreenDetails.js     |  330 ++
 .../src/components/ScreenDetailsContainers.js |  174 +
 app/packs/src/components/ScreenWellplates.js  |  101 +
 app/packs/src/components/StringTag.js         |   24 +
 app/packs/src/components/Switch.js            |   41 +
 app/packs/src/components/TabLayoutCell.js     |   90 +
 .../src/components/TabLayoutContainer.js      |   84 +
 .../src/components/TextRangeWithAddon.js      |   99 +
 app/packs/src/components/UserAuth.js          |  625 +++
 app/packs/src/components/UserInfoIcon.js      |   19 +
 app/packs/src/components/UserLabels.js        |    1 -
 app/packs/src/components/ViewSpectra.js       |  744 +++
 app/packs/src/components/WelcomeMessage.js    |   36 +
 app/packs/src/components/Well.js              |   24 +
 app/packs/src/components/WellContainer.js     |  113 +
 app/packs/src/components/WellOverlay.js       |  191 +
 app/packs/src/components/Wellplate.js         |  206 +
 app/packs/src/components/WellplateDetails.js  |  279 ++
 .../components/WellplateDetailsContainers.js  |  179 +
 app/packs/src/components/WellplateLabels.js   |   48 +
 app/packs/src/components/WellplateList.js     |  100 +
 .../src/components/WellplateProperties.js     |   54 +
 .../components/actions/ClipboardActions.js    |   32 +
 .../components/actions/CollectionActions.js   |  179 +
 .../components/actions/ComputeTaskActions.js  |   47 +
 .../src/components/actions/DetailActions.js   |   59 +
 .../src/components/actions/ElementActions.js  |  828 ++++
 .../src/components/actions/EmbargoActions.js  |  129 +
 .../src/components/actions/InboxActions.js    |   86 +
 .../src/components/actions/KeyboardActions.js |   13 +
 .../src/components/actions/LoadingActions.js  |   25 +
 .../src/components/actions/NmrSimActions.js   |   25 +
 .../components/actions/NotificationActions.js |   50 +
 .../components/actions/PermissionActions.js   |   16 +
 .../components/actions/PredictionActions.js   |   83 +
 .../src/components/actions/PublicActions.js   |  326 ++
 app/packs/src/components/actions/QcActions.js |   25 +
 .../src/components/actions/ReportActions.js   |  171 +
 .../components/actions/RepositoryActions.js   |   65 +
 .../src/components/actions/ReviewActions.js   |   89 +
 .../src/components/actions/SpectraActions.js  |  132 +
 .../components/actions/SuggestionActions.js   |   15 +
 .../components/actions/TextTemplateActions.js |   44 +
 app/packs/src/components/actions/UIActions.js |  138 +
 .../src/components/actions/UserActions.js     |  159 +
 app/packs/src/components/alt.js               |    5 +
 .../src/components/chemscanner/ChemScanner.js |   19 +
 .../chemscanner/actions/ActionTypes.js        |   79 +
 .../actions/chemdrawInstanceActions.js        |    5 +
 .../chemscanner/actions/fileActions.js        |  113 +
 .../components/chemscanner/actions/index.js   |   10 +
 .../chemscanner/actions/scannedItemActions.js |   37 +
 .../chemscanner/actions/storedFileActions.js  |  315 ++
 .../chemscanner/actions/uiActions.js          |   25 +
 .../components/AbbreviationManagement.js      |  147 +
 .../components/ArchivedManagement.js          |  142 +
 .../components/ChemscannerImportModal.js      |  132 +
 .../components/CopyClipboardBtn.js            |   64 +
 .../chemscanner/components/DeleteBtn.js       |   40 +
 .../chemscanner/components/EditCommentBtn.js  |   61 +
 .../chemscanner/components/EditMdlBtn.js      |   53 +
 .../chemscanner/components/EditableText.js    |   61 +
 .../components/FileItemActionsHeader.js       |  141 +
 .../components/FileItemActionsRenderer.js     |  260 +
 .../components/FileItemApproveFilter.js       |   97 +
 .../components/FileItemApproveRenderer.js     |   57 +
 .../components/FileItemFileNameFilter.js      |  127 +
 .../components/FileItemImportedFilter.js      |   98 +
 .../components/FileItemImportedRenderer.js    |   30 +
 .../components/FileItemInformationEditor.js   |  269 ++
 .../components/FileItemInformationRenderer.js |  120 +
 .../components/FileItemVersionFilter.js       |   71 +
 .../chemscanner/components/FileStorage.js     |  351 ++
 .../chemscanner/components/HeaderMenu.js      |  441 ++
 .../chemscanner/components/HelpPopover.js     |   44 +
 .../chemscanner/components/ImportModal.js     |  116 +
 .../chemscanner/components/LoadingModal.js    |   19 +
 .../chemscanner/components/MainContent.js     |  185 +
 .../components/MoleculeDescription.js         |  129 +
 .../chemscanner/components/MoleculeDetails.js |   61 +
 .../components/PreviewFileZoomPan.js          |  154 +
 .../components/ReactionDescription.js         |  165 +
 .../chemscanner/components/ReactionDetails.js |  103 +
 .../components/chemscanner/components/Root.js |  103 +
 .../components/ScannedMolecules.js            |  150 +
 .../components/ScannedReactions.js            |  200 +
 .../chemscanner/components/SelectBtn.js       |   35 +
 .../chemscanner/components/SmiSelect.js       |   62 +
 .../components/fileStorageUtils.js            |  302 ++
 .../containers/AbbreviationContainer.js       |  197 +
 .../containers/ArchivedManagementContainer.js |   61 +
 .../containers/FileStorageContainer.js        |  230 +
 .../containers/HeaderMenuContainer.js         |   76 +
 .../containers/ImportModalContainer.js        |   38 +
 .../containers/LoadingModalContainer.js       |   12 +
 .../containers/MainContentContainer.js        |   52 +
 .../containers/NotificationContainer.js       |   75 +
 .../chemscanner/containers/RootContainer.js   |   38 +
 .../containers/ScannedItemsContainer.js       |   85 +
 .../components/chemscanner/middleware/api.js  |   38 +
 .../chemscanner/middleware/chemdraw.js        |  119 +
 .../components/chemscanner/reactionUtils.js   |   41 +
 .../chemscanner/reducers/chemdrawInstance.js  |    8 +
 .../components/chemscanner/reducers/files.js  |  155 +
 .../components/chemscanner/reducers/index.js  |   17 +
 .../chemscanner/reducers/molecules.js         |  235 +
 .../chemscanner/reducers/reactions.js         |  240 +
 .../components/chemscanner/reducers/root.js   |   17 +
 .../chemscanner/reducers/schemes.js           |  176 +
 .../src/components/chemscanner/reducers/ui.js |   49 +
 .../chemscanner/store/configureStore.js       |   14 +
 app/packs/src/components/chemscanner/utils.js |  162 +
 .../src/components/chemspectra/ChemSpectra.js |   20 +
 .../chemspectra/ChemSpectraEditor.js          |   20 +
 .../collection_management/MyCollections.js    |  368 ++
 .../MySharedCollections.js                    |  300 ++
 .../SharedWithMeCollections.js                |  160 +
 .../SyncWithMeCollections.js                  |  160 +
 .../src/components/common/CustomTextEditor.js |   52 +
 .../components/common/RepoMetadataModal.js    |   91 +
 .../src/components/common/RepoPreviewImage.js |   53 +
 .../components/common/RepoPublicComment.js    |  140 +
 .../common/RepoReviewAuthorsModal.js          |  522 +++
 .../src/components/common/RepoSpectra.js      |   46 +
 .../src/components/common/RepoUserComment.js  |   94 +
 .../src/components/common/RepoXvialButton.js  |  327 ++
 .../src/components/common/SvgWithPopover.js   |    2 +-
 .../computedProps/ComputedPropsGraph.js       |    5 +
 .../computed_props/ComputedPropLabel.js       |   42 +
 .../computed_props/ComputedPropsContainer.js  |  103 +
 .../computed_props/ComputedPropsGraph.js      |  154 +
 .../ComputedPropsGraphContainer.js            |  329 ++
 .../computed_props/CustomAxisLabel.js         |   42 +
 .../computed_props/GraphReferenceTable.js     |  127 +
 .../components/computed_props/Highlight.js    |  238 +
 .../computed_props/NoComputedProps.js         |   26 +
 .../computed_props/SampleComputedProps.js     |  136 +
 .../contextActions/ContextActions.js          |   50 +-
 .../contextActions/ExportImportButton.js      |  199 +-
 .../components/contextActions/ModalExport.js  |  181 +-
 .../contextActions/ModalImportChemScanner.js  |   59 +
 .../components/contextActions/NoticeButton.js |  411 +-
 .../contextActions/ReportUtilButton.js        |   12 +-
 .../src/components/elements/ElementField.js   |  332 ++
 .../elements/ElementFieldDragSource.js        |   25 +
 .../elements/ElementFieldDropTarget.js        |   50 +
 .../src/components/elements/GroupFields.js    |  216 +
 .../src/components/elements/UserCounter.js    |  104 +
 .../examples/NumeralInputWithUnitsExample.js  |   46 +
 .../src/components/fetchers/AdminFetcher.js   |  427 ++
 .../src/components/fetchers/ArticleFetcher.js |  111 +
 .../components/fetchers/AttachmentFetcher.js  |  523 +++
 .../src/components/fetchers/BaseFetcher.js    |   76 +
 .../fetchers/CollaboratorFetcher.js           |  128 +
 .../components/fetchers/CollectionsFetcher.js |  369 ++
 .../components/fetchers/ComputeTaskFetcher.js |   46 +
 .../components/fetchers/ContainerFetcher.js   |   63 +
 .../components/fetchers/ConverterFetcher.js   |  107 +
 .../src/components/fetchers/DeviceFetcher.js  |   92 +
 .../src/components/fetchers/EditorFetcher.js  |   29 +
 .../src/components/fetchers/EmbargoFetcher.js |  128 +
 .../components/fetchers/GenericBaseFetcher.js |   65 +
 .../components/fetchers/GenericDSsFetcher.js  |   19 +
 .../components/fetchers/GenericElsFetcher.js  |  145 +
 .../src/components/fetchers/InboxFetcher.js   |   45 +
 .../components/fetchers/InstrumentsFetcher.js |   12 +
 .../components/fetchers/LiteraturesFetcher.js |  114 +
 .../components/fetchers/MessagesFetcher.js    |   84 +
 .../components/fetchers/MoleculesFetcher.js   |  124 +
 .../src/components/fetchers/NmrSimFetcher.js  |   16 +
 .../components/fetchers/PermissionsFetcher.js |   17 +
 .../components/fetchers/PredictionsFetcher.js |   37 +
 .../components/fetchers/PrivateNoteFetcher.js |   68 +
 .../src/components/fetchers/PublicFetcher.js  |  261 ++
 .../components/fetchers/ReactionSvgFetcher.js |   28 +
 .../components/fetchers/ReactionsFetcher.js   |  102 +
 .../fetchers/ReportTemplateFetcher.js         |  119 +
 .../src/components/fetchers/ReportsFetcher.js |  142 +
 .../components/fetchers/RepositoryFetcher.js  |  386 ++
 .../fetchers/ResearchPlansFetcher.js          |  224 +
 .../src/components/fetchers/ResidueFetcher.js |   26 +
 .../src/components/fetchers/ReviewFetcher.js  |    4 +
 .../src/components/fetchers/SamplesFetcher.js |  215 +
 .../src/components/fetchers/ScreensFetcher.js |   83 +
 .../src/components/fetchers/SearchFetcher.js  |   68 +
 .../components/fetchers/SegmentsFetcher.js    |   15 +
 .../components/fetchers/SuggestionsFetcher.js |   12 +
 .../fetchers/TextTemplatesFetcher.js          |   81 +
 .../src/components/fetchers/UIFetcher.js      |   69 +
 .../src/components/fetchers/UsersFetcher.js   |  118 +
 .../components/fetchers/WellplatesFetcher.js  |  189 +
 app/packs/src/components/generic/AttrChk.js   |   21 +
 .../src/components/generic/DefinedRenderer.js |   16 +
 .../components/generic/DropLinkRenderer.js    |   31 +
 .../src/components/generic/DropRenderer.js    |   31 +
 .../components/generic/DropTextRenderer.js    |   25 +
 .../src/components/generic/FieldSelect.js     |   34 +
 .../src/components/generic/GenericElCommon.js |  402 ++
 .../generic/GenericElCriteriaModal.js         |   47 +
 .../components/generic/GenericElDropTarget.js |  123 +
 .../generic/GenericElTableDropTarget.js       |  130 +
 .../generic/GenericElementLabels.js           |   73 +
 .../generic/GenericPropertiesFields.js        |  391 ++
 app/packs/src/components/generic/GridBtn.js   |   40 +
 app/packs/src/components/generic/GridDnD.js   |   42 +
 app/packs/src/components/generic/GridEntry.js |   74 +
 .../src/components/generic/GridSelect.js      |   30 +
 .../src/components/generic/LayerSelect.js     |   19 +
 .../src/components/generic/PreviewModal.js    |   75 +
 app/packs/src/components/generic/SamOption.js |   53 +
 .../src/components/generic/SystemSelect.js    |   19 +
 app/packs/src/components/generic/TableDef.js  |  218 +
 .../src/components/generic/TableRecord.js     |  229 +
 .../src/components/generic/TextFormula.js     |  203 +
 .../src/components/generic/TypeSelect.js      |   18 +
 .../components/generic/UConverterRenderer.js  |   24 +
 .../components/green_chem/GreenChemistry.js   |  112 +
 .../green_chem/GreenMaterialGroup.js          |  181 +
 .../src/components/green_chem/GreenMetrics.js |  158 +
 .../components/inbox/AttachmentContainer.js   |  144 +
 .../src/components/inbox/DatasetContainer.js  |  151 +
 app/packs/src/components/inbox/DeviceBox.js   |   84 +
 app/packs/src/components/inbox/InboxModal.js  |  160 +
 .../components/inbox/MoveToAnalysisButton.js  |  147 +
 app/packs/src/components/inbox/UnsortedBox.js |  103 +
 .../src/components/inbox/UnsortedDataset.js   |  191 +
 .../components/inbox/UnsortedDatasetModal.js  |   41 +
 .../managing_actions/ChildOverlay.js          |   20 +
 .../managing_actions/ManagingActionButtons.js |   91 +
 .../managing_actions/ManagingActions.js       |  249 +
 .../ManagingModalCollectionActions.js         |  148 +
 .../managing_actions/ManagingModalDelete.js   |   56 +
 .../managing_actions/ManagingModalRemove.js   |   30 +
 .../managing_actions/ManagingModalSharing.js  |  433 ++
 .../ManagingModalTopSecret.js                 |   15 +
 .../components/models/AnalysesExperiment.js   |   90 +
 app/packs/src/components/models/Analysis.js   |   66 +
 app/packs/src/components/models/Attachment.js |   36 +
 .../src/components/models/ComputeTask.js      |    7 +
 app/packs/src/components/models/Container.js  |   55 +
 app/packs/src/components/models/Device.js     |   47 +
 .../src/components/models/DeviceAnalysis.js   |   39 +
 .../src/components/models/DeviceControl.js    |   11 +
 .../src/components/models/DeviceSample.js     |   35 +
 app/packs/src/components/models/Element.js    |   90 +
 app/packs/src/components/models/Format.js     |    7 +
 app/packs/src/components/models/GenericDS.js  |   63 +
 app/packs/src/components/models/GenericEl.js  |  157 +
 .../src/components/models/GenericSubField.js  |   10 +
 app/packs/src/components/models/Graph.js      |    7 +
 app/packs/src/components/models/Literature.js |   33 +
 .../src/components/models/LiteratureMap.js    |  100 +
 app/packs/src/components/models/Molecule.js   |   18 +
 app/packs/src/components/models/Prediction.js |   11 +
 .../src/components/models/PrivateNote.js      |   58 +
 app/packs/src/components/models/Reaction.js   |  978 ++++
 app/packs/src/components/models/Report.js     |   11 +
 .../src/components/models/ReportTemplate.js   |   27 +
 .../src/components/models/ResearchPlan.js     |  188 +
 app/packs/src/components/models/Sample.js     | 1155 +++++
 app/packs/src/components/models/Screen.js     |  165 +
 app/packs/src/components/models/Segment.js    |   73 +
 .../src/components/models/StructureDef.js     |  101 +
 .../src/components/models/StructureEditor.js  |   29 +
 app/packs/src/components/models/Well.js       |   20 +
 app/packs/src/components/models/Wellplate.js  |  126 +
 .../navigation/search/AutoCompleteInput.js    |    6 +-
 app/packs/src/components/nmr_sim/LineChart.js |  190 +
 .../components/nmr_sim/LineChartWrapper.js    |   52 +
 app/packs/src/components/nmr_sim/NmrSimTab.js |  124 +
 .../src/components/nmr_sim/NmrdbReference.js  |   35 +
 .../nmr_sim/SampleDetailsTabName.js           |    3 +
 .../src/components/prediction/Content.js      |   58 +
 .../components/prediction/ContentInputs.js    |   74 +
 .../components/prediction/ContentOutputs.js   |   56 +
 .../prediction/PredictionComponent.js         |   68 +
 .../prediction/PredictionContainer.js         |   97 +
 .../proxies/ElementPermissionProxy.js         |   45 +
 app/packs/src/components/qc/QcMain.js         |   92 +
 .../src/components/qc/components/QcContent.js |   79 +
 .../components/qc/components/helper/icon.js   |   78 +
 .../src/components/qc/components/helper/ir.js |   70 +
 .../components/qc/components/helper/nmr.js    |   46 +
 .../qc/components/helper/qc_mol_view.js       |   29 +
 .../qc/components/substance/BlockCnmr.js      |  117 +
 .../components/substance/BlockConclusion.js   |   67 +
 .../qc/components/substance/BlockEa.js        |   15 +
 .../qc/components/substance/BlockHnmr.js      |  117 +
 .../qc/components/substance/BlockIr.js        |   94 +
 .../qc/components/substance/BlockMS.js        |   59 +
 .../qc/components/substance/BlockTitle.js     |   35 +
 .../qc/components/summary/AreaSummary.js      |   54 +
 .../qc/components/summary/AreaTitle.js        |   25 +
 .../qc/components/summary/LineScore.js        |   33 +
 .../qc/components/summary/LineSummary.js      |  102 +
 .../qc/components/summary/common.js           |   37 +
 .../components/qc/components/summary/eval.js  |  124 +
 app/packs/src/components/qc/utils/common.js   |   15 +
 app/packs/src/components/qc/utils/ir.js       |   88 +
 app/packs/src/components/qc/utils/ms.js       |   71 +
 app/packs/src/components/qc/utils/nmr.js      |  112 +
 app/packs/src/components/qc/utils/qcs.js      |   60 +
 .../src/components/react_quill/BaseToolbar.js |   24 +
 .../react_quill/DynamicToolbarEditor.js       |   37 +
 .../src/components/react_quill/ReactQuill.js  |  497 ++
 .../components/react_quill/ToolbarDropdown.js |  134 +
 .../src/components/react_quill/ToolbarIcon.js |   54 +
 app/packs/src/components/report/Archives.js   |  216 +
 app/packs/src/components/report/Config.js     |  221 +
 app/packs/src/components/report/Orders.js     |   63 +
 app/packs/src/components/report/OrdersDnD.js  |  122 +
 app/packs/src/components/report/Paramize.js   |   51 +
 app/packs/src/components/report/Previews.js   |  159 +
 .../src/components/report/ReportComponent.js  |   86 +
 .../src/components/report/ReportContainer.js  |  208 +
 .../src/components/report/SectionReaction.js  |  366 ++
 .../components/report/SectionReactionList.js  |   76 +
 .../src/components/report/SectionSample.js    |   67 +
 .../components/report/SectionSiProcedures.js  |   47 +
 .../components/report/SectionSiSynthesis.js   |  418 ++
 .../report/SectionSiSynthesisStdRxn.js        |  420 ++
 .../src/components/report/SectionSpectrum.js  |  122 +
 app/packs/src/components/report/Serials.js    |   77 +
 app/packs/src/components/report/Setting.js    |  118 +
 .../research_plan/ResearchPlanDetails.js      |  502 ++
 .../ResearchPlanDetailsAddField.js            |   39 +
 .../ResearchPlanDetailsAttachments.js         |  250 +
 .../research_plan/ResearchPlanDetailsBody.js  |   81 +
 .../ResearchPlanDetailsContainers.js          |  434 ++
 .../ResearchPlanDetailsDragSource.js          |   39 +
 .../ResearchPlanDetailsDropTarget.js          |   45 +
 .../research_plan/ResearchPlanDetailsField.js |  198 +
 .../ResearchPlanDetailsFieldImage.js          |  102 +
 .../ResearchPlanDetailsFieldKetcher.js        |  130 +
 .../ResearchPlanDetailsFieldReaction.js       |  134 +
 .../ResearchPlanDetailsFieldRichText.js       |   44 +
 .../ResearchPlanDetailsFieldSample.js         |  134 +
 .../ResearchPlanDetailsFieldTable.js          |  528 +++
 ...rchPlanDetailsFieldTableColumnNameModal.js |  105 +
 ...searchPlanDetailsFieldTableSchemasModal.js |  123 +
 .../research_plan/ResearchPlanDetailsName.js  |   68 +
 app/packs/src/components/routes.js            |  118 +
 app/packs/src/components/routesUtils.js       |  315 ++
 .../scifinder/ScifinderCredential.js          |   45 +
 .../components/search/AutoCompleteInput.js    |  426 ++
 app/packs/src/components/search/Search.js     |  340 ++
 .../src/components/search/SearchFilter.js     |  298 ++
 .../components/sharing/SharingShortcuts.js    |   51 +
 app/packs/src/components/sso/LoginOptions.js  |   62 +
 .../src/components/sso/OmniauthCredential.js  |   54 +
 .../staticDropdownOptions/options.js          |  702 ++-
 .../staticDropdownOptions/reagents_kombi.js   | 4168 ++++++++---------
 .../src/components/stores/ClipboardStore.js   |   45 +
 .../src/components/stores/CollectionStore.js  |  191 +
 .../src/components/stores/ComputeTaskStore.js |   38 +
 .../src/components/stores/ElementStore.js     | 1461 ++++++
 .../src/components/stores/EmbargoStore.js     |  119 +
 app/packs/src/components/stores/InboxStore.js |  208 +
 .../src/components/stores/KeyboardStore.js    |   26 +
 .../src/components/stores/LoadingStore.js     |  112 +
 .../src/components/stores/NmrSimStore.js      |   63 +
 .../components/stores/NotificationStore.js    |  103 +
 .../src/components/stores/PermissionStore.js  |   27 +
 .../src/components/stores/PredictionStore.js  |   84 +
 .../src/components/stores/PublicStore.js      |  283 ++
 app/packs/src/components/stores/QcStore.js    |   33 +
 app/packs/src/components/stores/RStore.js     |   34 +
 .../src/components/stores/ReportStore.js      |  733 +++
 .../src/components/stores/ReviewStore.js      |  158 +
 .../src/components/stores/SpectraStore.js     |  206 +
 .../src/components/stores/SuggestionStore.js  |   20 +
 .../components/stores/TextTemplateStore.js    |   57 +
 app/packs/src/components/stores/UIStore.js    |  441 ++
 app/packs/src/components/stores/UserStore.js  |  111 +
 .../structure_editor/ChemDrawEditor.js        |   86 +
 .../structure_editor/KetcherEditor.js         |   28 +
 .../structure_editor/MarvinjsEditor.js        |   83 +
 .../StructureEditorContent.js                 |   65 +
 .../structure_editor/StructureEditorMap.js    |   44 +
 .../structure_editor/StructureEditorModal.js  |  292 ++
 .../structure_editor/StructureEditorSet.js    |   53 +
 .../structure_editor/loadScripts.js           |   44 +
 .../TextTemplateToolbar.js                    |   82 +
 .../ToolbarTemplateCreator.js                 |  260 +
 app/packs/src/components/utils/ArrayUtils.js  |   60 +
 app/packs/src/components/utils/DndControl.js  |   27 +
 .../src/components/utils/DocumentHelper.js    |   15 +
 app/packs/src/components/utils/DomHelper.js   |   11 +
 .../src/components/utils/ElementUtils.js      |  559 +++
 .../src/components/utils/FetcherHelper.js     |   38 +
 app/packs/src/components/utils/Functions.js   |   30 +
 app/packs/src/components/utils/MathUtils.js   |   64 +
 .../src/components/utils/PermissionConst.js   |    8 +
 .../src/components/utils/ReportHelper.js      |  106 +
 .../src/components/utils/SpectraHelper.js     |  160 +
 .../utils/deltaMarkdownConverter.js           |  226 +
 app/packs/src/components/utils/imageHelper.js |   28 +
 .../src/components/utils/markdownUtils.js     |   18 +
 .../src/components/utils/metricPrefix.js      |   21 +
 app/packs/src/components/utils/quillFormat.js |   83 +
 .../components/utils/quillToolbarSymbol.js    |  682 +++
 .../components/utils/reactionPredefined.js    |   12 +
 app/packs/src/fetchers/CollectionsFetcher.js  |   12 +
 app/packs/src/libCnC/CnC.js                   |  273 ++
 app/packs/src/libCnC/Navigation.js            |   88 +
 app/packs/src/libHome/Home.js                 |  164 +
 app/packs/src/libHome/NavNewSession.js        |   55 +
 app/packs/src/libHome/RepoAbout.js            |  195 +
 app/packs/src/libHome/RepoCardIntro.js        |   33 +
 .../src/libHome/RepoCardLatestPublish.js      |   80 +
 .../src/libHome/RepoCardMoleculeArchive.js    |   60 +
 app/packs/src/libHome/RepoCardStaticsBoard.js |  111 +
 app/packs/src/libHome/RepoCollection.js       |  242 +
 .../src/libHome/RepoCollectionDetails.js      |   51 +
 app/packs/src/libHome/RepoCommon.js           | 2386 ++++++++++
 app/packs/src/libHome/RepoContact.js          |   43 +
 .../src/libHome/RepoContainerDatasets.js      |   80 +
 app/packs/src/libHome/RepoDirective.js        |   41 +
 app/packs/src/libHome/RepoElementDetails.js   |   62 +
 app/packs/src/libHome/RepoEmbargo.js          |  386 ++
 app/packs/src/libHome/RepoEmbargoDetails.js   |   67 +
 app/packs/src/libHome/RepoEmbargoModal.js     |  110 +
 app/packs/src/libHome/RepoHome.js             |  240 +
 app/packs/src/libHome/RepoHowTo.js            |  177 +
 app/packs/src/libHome/RepoHowToDragSource.js  |   21 +
 app/packs/src/libHome/RepoHowToDropTarget.js  |   41 +
 app/packs/src/libHome/RepoHowToEditor.js      |  435 ++
 app/packs/src/libHome/RepoHowToReader.js      |  124 +
 app/packs/src/libHome/RepoMolViewerBtn.js     |   52 +
 app/packs/src/libHome/RepoMolViewerListBtn.js |   81 +
 .../src/libHome/RepoMolViewerListModal.js     |  117 +
 app/packs/src/libHome/RepoMolViewerModal.js   |   38 +
 app/packs/src/libHome/RepoMoleculeArchive.js  |   98 +
 app/packs/src/libHome/RepoMoleculeList.js     |   94 +
 app/packs/src/libHome/RepoNavListTypes.js     |    6 +
 app/packs/src/libHome/RepoNewsEditor.js       |  427 ++
 app/packs/src/libHome/RepoNewsReader.js       |  123 +
 app/packs/src/libHome/RepoNewsroom.js         |  186 +
 app/packs/src/libHome/RepoPubCommon.js        |   31 +
 app/packs/src/libHome/RepoPubl.js             |  709 +++
 app/packs/src/libHome/RepoReactionDetails.js  |  792 ++++
 app/packs/src/libHome/RepoReactionList.js     |  106 +
 .../src/libHome/RepoReactionSchemeInfo.js     |   81 +
 app/packs/src/libHome/RepoReview.js           |  515 ++
 app/packs/src/libHome/RepoReviewButtonBar.js  |  134 +
 app/packs/src/libHome/RepoReviewCommon.js     |  122 +
 app/packs/src/libHome/RepoReviewDetails.js    |   68 +
 app/packs/src/libHome/RepoSample.js           |  325 ++
 app/packs/src/libHome/RepoSampleDetails.js    |  218 +
 app/packs/src/libHome/RepoSegment.js          |   32 +
 app/packs/src/models/Sample.js                |   75 +
 .../src/repo/fetchers/CollaboratorFetcher.js  |   34 +-
 .../src/stores/alt/stores/CollectionStore.js  |    6 +
 .../src/stores/alt/stores/ElementStore.js     |    3 +
 app/packs/src/stores/alt/stores/UIStore.js    |   13 +
 app/packs/src/utilities/routesUtils.js        |   20 +
 app/proxies/element_permission_proxy.rb       |    4 +
 app/serializers/computed_props_serializer.rb  |    7 +
 app/serializers/detail_levels/element.rb      |   20 +
 .../element_level_list_serializable.rb        |   17 +
 app/serializers/element_level_serializable.rb |   29 +
 app/serializers/element_list_serializer.rb    |   12 +
 app/serializers/element_serializer.rb         |  110 +
 config/compound_open_data.yml.example         |    5 +
 config/initializers/assets.rb                 |    2 +
 config/omniauth.yml.example                   |   60 +
 config/profile_default.yml                    |    1 -
 .../20210216132619_create_report_templates.rb |    4 +-
 ...0712100000_add_segment_klass_identifier.rb |   13 +
 ...20920000006_embargo_accepted_collection.rb |   27 +
 db/seeds/development/devices.seed.rb          |    1 -
 db/seeds/shared/admin.seed.rb                 |    2 +-
 lib/analyses/converter.rb                     |  272 ++
 lib/export/export_excel.rb                    |    3 +-
 lib/import/import_sdf.rb                      |    4 +
 lib/reporter/docx/detail_sample.rb            |   14 +
 package_postinstall.sh                        |    1 -
 public/welcome-message-sample.md              |    4 +
 spec/api/collection_api_spec.rb               |    3 +
 spec/api/delayed_job_api_spec.rb              |   42 +
 spec/api/inbox_api_spec.rb                    |   11 +
 spec/api/literature_api_spec.rb               |   14 +
 spec/api/private_note_api.spec.rb             |  357 ++
 spec/api/report_api_spec.rb                   |   94 +
 spec/api/report_template_api_spec.rb          |  122 +
 spec/api/research_plan_api_spec.rb            |   32 +
 spec/api/research_plan_metadata_api_spec.rb   |    5 +
 spec/factories/admins.rb                      |    2 +-
 spec/factories/groups.rb                      |    1 -
 spec/factories/persons.rb                     |    3 +-
 spec/features/collection_management_spec.rb   |    1 +
 spec/fixtures/images/reaction.svg             |    6 +-
 spec/spec_helper.rb                           |   21 +
 712 files changed, 99017 insertions(+), 3509 deletions(-)
 delete mode 100644 .gitlab-ci.yml
 create mode 100644 app/api/chemotion/converter_api.rb
 create mode 100644 app/api/chemotion/generic_dataset_api.rb
 create mode 100644 app/api/chemotion/generic_element_api.rb
 create mode 100644 app/api/chemotion/segment_api.rb
 create mode 100644 app/api/entities/dataset_entity.rb
 create mode 100644 app/api/entities/dataset_klass_entity.rb
 create mode 100644 app/api/entities/element_klass_entity.rb
 create mode 100644 app/api/entities/element_revision_entity.rb
 create mode 100644 app/api/entities/generic_entity.rb
 create mode 100644 app/api/entities/generic_public_entity.rb
 create mode 100644 app/api/entities/klass_revision_entity.rb
 create mode 100644 app/api/entities/segment_entity.rb
 create mode 100644 app/api/entities/segment_klass_entity.rb
 create mode 100644 app/api/entities/segment_revision_entity.rb
 create mode 100644 app/api/helpers/generic_helpers.rb
 create mode 100644 app/api/helpers/sample_association_helpers.rb
 create mode 120000 app/assets/stylesheets/ag-theme-alpine.css
 create mode 120000 app/assets/stylesheets/react-data-grid-addons.css
 create mode 120000 app/assets/stylesheets/react-data-grid.css
 create mode 100644 app/jobs/test_failure_job.rb
 create mode 100644 app/models/chemscanner/molecule.rb
 create mode 100644 app/models/chemscanner/reaction.rb
 create mode 100644 app/models/chemscanner/reaction_step.rb
 create mode 100644 app/models/chemscanner/reactions_molecule.rb
 create mode 100644 app/models/chemscanner/reactions_product_molecule.rb
 create mode 100644 app/models/chemscanner/reactions_reactant_molecule.rb
 create mode 100644 app/models/chemscanner/reactions_reagent_molecule.rb
 create mode 100644 app/models/chemscanner/reactions_solvent_molecule.rb
 create mode 100644 app/models/chemscanner/scheme.rb
 create mode 100644 app/models/chemscanner/source.rb
 create mode 100644 app/models/collections_element.rb
 create mode 100644 app/models/concerns/attachment_converter.rb
 create mode 100644 app/models/concerns/datasetable.rb
 create mode 100644 app/models/concerns/generic_klass_revisions.rb
 create mode 100644 app/models/concerns/generic_revisions.rb
 create mode 100644 app/models/concerns/segmentable.rb
 create mode 100644 app/models/dataset.rb
 create mode 100644 app/models/dataset_klass.rb
 create mode 100644 app/models/dataset_klasses_revision.rb
 create mode 100644 app/models/datasets_revision.rb
 create mode 100644 app/models/element.rb
 create mode 100644 app/models/element_klass.rb
 create mode 100644 app/models/element_klasses_revision.rb
 create mode 100644 app/models/elements_revision.rb
 create mode 100644 app/models/elements_sample.rb
 create mode 100644 app/models/segment.rb
 create mode 100644 app/models/segment_klass.rb
 create mode 100644 app/models/segment_klasses_revision.rb
 create mode 100644 app/models/segments_revision.rb
 create mode 100644 app/packs/src/admin/AdminDeviceElement.js
 create mode 100644 app/packs/src/admin/AdminGroupElement.js
 create mode 100644 app/packs/src/admin/AdminHome.js
 create mode 100644 app/packs/src/admin/AdminNavigation.js
 create mode 100644 app/packs/src/admin/DataCollector.js
 create mode 100644 app/packs/src/admin/DatasetElementAdmin.js
 create mode 100644 app/packs/src/admin/DelayedJobs.js
 create mode 100644 app/packs/src/admin/DeleteGroupDeviceButton.js
 create mode 100644 app/packs/src/admin/GenericElementAdmin.js
 create mode 100644 app/packs/src/admin/GroupsDevices.js
 create mode 100644 app/packs/src/admin/MatrixManagement.js
 create mode 100644 app/packs/src/admin/MessagePublish.js
 create mode 100644 app/packs/src/admin/NovncConfigContainer.js
 create mode 100644 app/packs/src/admin/NovncSettings.js
 create mode 100644 app/packs/src/admin/OlsTerms.js
 create mode 100644 app/packs/src/admin/SegmentElementAdmin.js
 create mode 100644 app/packs/src/admin/TemplateManagement.js
 create mode 100644 app/packs/src/admin/UserManagement.js
 create mode 100644 app/packs/src/admin/converter/ConverterAdmin.js
 create mode 100644 app/packs/src/admin/generic/AttrCopyModal.js
 create mode 100644 app/packs/src/admin/generic/AttrEditModal.js
 create mode 100644 app/packs/src/admin/generic/AttrForm.js
 create mode 100644 app/packs/src/admin/generic/AttrNewModal.js
 create mode 100644 app/packs/src/admin/generic/FieldCondEditModal.js
 create mode 100644 app/packs/src/admin/generic/KlassAttrForm.js
 create mode 100644 app/packs/src/admin/generic/LayerAttrEditModal.js
 create mode 100644 app/packs/src/admin/generic/LayerAttrForm.js
 create mode 100644 app/packs/src/admin/generic/LayerAttrNewModal.js
 create mode 100644 app/packs/src/admin/generic/Preview.js
 create mode 100644 app/packs/src/admin/generic/SegmentAttrForm.js
 create mode 100644 app/packs/src/admin/generic/SelectAttrNewModal.js
 create mode 100644 app/packs/src/admin/generic/TemplateJsonModal.js
 create mode 100644 app/packs/src/admin/generic/UploadModal.js
 create mode 100644 app/packs/src/admin/generic/Utils.js
 create mode 100644 app/packs/src/admin/generic/collate.js
 create mode 100644 app/packs/src/admin/text_templates/ActionHeaderBtn.js
 create mode 100644 app/packs/src/admin/text_templates/ActionRowBtn.js
 create mode 100644 app/packs/src/admin/text_templates/TextTemplate.js
 create mode 100644 app/packs/src/admin/text_templates/TextTemplateContainer.js
 create mode 100644 app/packs/src/admin/text_templates/TextTemplateIcon.js
 create mode 100644 app/packs/src/components/AnalysisEditor.js
 create mode 100644 app/packs/src/components/AnalysisNMR.js
 create mode 100644 app/packs/src/components/App.js
 create mode 100644 app/packs/src/components/AttachmentDropzone.js
 create mode 100644 app/packs/src/components/ChemrepoLabels.js
 create mode 100644 app/packs/src/components/CitationTable.js
 create mode 100644 app/packs/src/components/CollectionManagement.js
 create mode 100644 app/packs/src/components/CollectionSubtree.js
 create mode 100644 app/packs/src/components/CollectionTree.js
 create mode 100644 app/packs/src/components/ComputeTask.js
 create mode 100644 app/packs/src/components/ComputeTaskContainer.js
 create mode 100644 app/packs/src/components/ContainerComponent.js
 create mode 100644 app/packs/src/components/ContainerDataset.js
 create mode 100644 app/packs/src/components/ContainerDatasetField.js
 create mode 100644 app/packs/src/components/ContainerDatasetModal.js
 create mode 100644 app/packs/src/components/ContainerDatasets.js
 create mode 100644 app/packs/src/components/DetailsTabLiteratures.js
 create mode 100644 app/packs/src/components/DetailsTabMetadata.js
 create mode 100644 app/packs/src/components/DeviceAnalysisDetails.js
 create mode 100644 app/packs/src/components/DeviceDetails.js
 create mode 100644 app/packs/src/components/DeviceManagement.js
 create mode 100644 app/packs/src/components/DeviceSampleContainer.js
 create mode 100644 app/packs/src/components/ElementAllCheckbox.js
 create mode 100644 app/packs/src/components/ElementAnalysesLabels.js
 create mode 100644 app/packs/src/components/ElementCheckbox.js
 create mode 100644 app/packs/src/components/ElementCollectionLabels.js
 create mode 100644 app/packs/src/components/ElementContainer.js
 create mode 100644 app/packs/src/components/ElementDetailSortTab.js
 create mode 100644 app/packs/src/components/ElementDetails.js
 create mode 100644 app/packs/src/components/ElementReactionLabels.js
 create mode 100644 app/packs/src/components/ElementWellplateLabels.js
 create mode 100644 app/packs/src/components/ElementalComposition.js
 create mode 100644 app/packs/src/components/ElementalCompositionCustom.js
 create mode 100644 app/packs/src/components/ElementalCompositionGroup.js
 create mode 100644 app/packs/src/components/Elements.js
 create mode 100644 app/packs/src/components/ElementsTable.js
 create mode 100644 app/packs/src/components/ElementsTableEntries.js
 create mode 100644 app/packs/src/components/ElementsTableSampleEntries.js
 create mode 100644 app/packs/src/components/ElementsTableSettings.js
 create mode 100644 app/packs/src/components/ExportSamplesBtn.js
 create mode 100644 app/packs/src/components/FastInput.js
 create mode 100644 app/packs/src/components/FocusNovnc.js
 create mode 100644 app/packs/src/components/FormatComponent.js
 create mode 100644 app/packs/src/components/FormatContainer.js
 create mode 100644 app/packs/src/components/GeneralProcedureDnD.js
 create mode 100644 app/packs/src/components/GraphContainer.js
 create mode 100644 app/packs/src/components/GroupElement.js
 create mode 100644 app/packs/src/components/List.js
 create mode 100644 app/packs/src/components/LiteratureCommon.js
 create mode 100644 app/packs/src/components/LiteratureDetails.js
 create mode 100644 app/packs/src/components/Material.js
 create mode 100644 app/packs/src/components/MaterialCalculations.js
 create mode 100644 app/packs/src/components/MaterialGroup.js
 create mode 100644 app/packs/src/components/MaterialGroupContainer.js
 create mode 100644 app/packs/src/components/MoleculeModerator.js
 create mode 100644 app/packs/src/components/MoleculeModeratorComponent.js
 create mode 100644 app/packs/src/components/NMRiumDisplayer.js
 create mode 100644 app/packs/src/components/Navigation.js
 create mode 100644 app/packs/src/components/NavigationModal.js
 create mode 100644 app/packs/src/components/NovncStatus.js
 create mode 100644 app/packs/src/components/NumeralInput.js
 create mode 100644 app/packs/src/components/NumeralInputWithUnits.js
 create mode 100644 app/packs/src/components/NumeralInputWithUnitsCompo.js
 create mode 100644 app/packs/src/components/PermissionIcons.js
 create mode 100644 app/packs/src/components/PolymerSection.js
 create mode 100644 app/packs/src/components/PrivateNoteElement.js
 create mode 100644 app/packs/src/components/PubchemLabels.js
 create mode 100644 app/packs/src/components/PubchemLcss.js
 create mode 100644 app/packs/src/components/PubchemSigns.js
 create mode 100644 app/packs/src/components/PublishCommon.js
 create mode 100644 app/packs/src/components/PublishReactionContainers.js
 create mode 100644 app/packs/src/components/PublishReactionModal.js
 create mode 100644 app/packs/src/components/PublishSampleModal.js
 create mode 100644 app/packs/src/components/ReactionDescriptionEditor.js
 create mode 100644 app/packs/src/components/ReactionDetails.js
 create mode 100644 app/packs/src/components/ReactionDetailsContainers.js
 create mode 100644 app/packs/src/components/ReactionDetailsDuration.js
 create mode 100644 app/packs/src/components/ReactionDetailsMainProperties.js
 create mode 100644 app/packs/src/components/ReactionDetailsProperties.js
 create mode 100644 app/packs/src/components/ReactionDetailsPurification.js
 create mode 100644 app/packs/src/components/ReactionDetailsRepoComment.js
 create mode 100644 app/packs/src/components/ReactionDetailsScheme.js
 create mode 100644 app/packs/src/components/ReactionDetailsShare.js
 create mode 100644 app/packs/src/components/SampleDetails.js
 create mode 100644 app/packs/src/components/SampleDetailsContainers.js
 create mode 100644 app/packs/src/components/SampleDetailsContainersAux.js
 create mode 100644 app/packs/src/components/SampleDetailsContainersCom.js
 create mode 100644 app/packs/src/components/SampleDetailsContainersDnd.js
 create mode 100644 app/packs/src/components/SampleDetailsRepoComment.js
 create mode 100644 app/packs/src/components/SampleDetailsSolvents.js
 create mode 100644 app/packs/src/components/SampleDetailsSolventsDnd.js
 create mode 100644 app/packs/src/components/SampleForm.js
 create mode 100644 app/packs/src/components/ScreenDetails.js
 create mode 100644 app/packs/src/components/ScreenDetailsContainers.js
 create mode 100644 app/packs/src/components/ScreenWellplates.js
 create mode 100644 app/packs/src/components/StringTag.js
 create mode 100644 app/packs/src/components/Switch.js
 create mode 100644 app/packs/src/components/TabLayoutCell.js
 create mode 100644 app/packs/src/components/TabLayoutContainer.js
 create mode 100644 app/packs/src/components/TextRangeWithAddon.js
 create mode 100644 app/packs/src/components/UserAuth.js
 create mode 100644 app/packs/src/components/UserInfoIcon.js
 create mode 100644 app/packs/src/components/ViewSpectra.js
 create mode 100644 app/packs/src/components/WelcomeMessage.js
 create mode 100644 app/packs/src/components/Well.js
 create mode 100644 app/packs/src/components/WellContainer.js
 create mode 100644 app/packs/src/components/WellOverlay.js
 create mode 100644 app/packs/src/components/Wellplate.js
 create mode 100644 app/packs/src/components/WellplateDetails.js
 create mode 100644 app/packs/src/components/WellplateDetailsContainers.js
 create mode 100644 app/packs/src/components/WellplateLabels.js
 create mode 100644 app/packs/src/components/WellplateList.js
 create mode 100644 app/packs/src/components/WellplateProperties.js
 create mode 100644 app/packs/src/components/actions/ClipboardActions.js
 create mode 100644 app/packs/src/components/actions/CollectionActions.js
 create mode 100644 app/packs/src/components/actions/ComputeTaskActions.js
 create mode 100644 app/packs/src/components/actions/DetailActions.js
 create mode 100644 app/packs/src/components/actions/ElementActions.js
 create mode 100644 app/packs/src/components/actions/EmbargoActions.js
 create mode 100644 app/packs/src/components/actions/InboxActions.js
 create mode 100644 app/packs/src/components/actions/KeyboardActions.js
 create mode 100644 app/packs/src/components/actions/LoadingActions.js
 create mode 100644 app/packs/src/components/actions/NmrSimActions.js
 create mode 100644 app/packs/src/components/actions/NotificationActions.js
 create mode 100644 app/packs/src/components/actions/PermissionActions.js
 create mode 100644 app/packs/src/components/actions/PredictionActions.js
 create mode 100644 app/packs/src/components/actions/PublicActions.js
 create mode 100644 app/packs/src/components/actions/QcActions.js
 create mode 100644 app/packs/src/components/actions/ReportActions.js
 create mode 100644 app/packs/src/components/actions/RepositoryActions.js
 create mode 100644 app/packs/src/components/actions/ReviewActions.js
 create mode 100644 app/packs/src/components/actions/SpectraActions.js
 create mode 100644 app/packs/src/components/actions/SuggestionActions.js
 create mode 100644 app/packs/src/components/actions/TextTemplateActions.js
 create mode 100644 app/packs/src/components/actions/UIActions.js
 create mode 100644 app/packs/src/components/actions/UserActions.js
 create mode 100644 app/packs/src/components/alt.js
 create mode 100644 app/packs/src/components/chemscanner/ChemScanner.js
 create mode 100644 app/packs/src/components/chemscanner/actions/ActionTypes.js
 create mode 100644 app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
 create mode 100644 app/packs/src/components/chemscanner/actions/fileActions.js
 create mode 100644 app/packs/src/components/chemscanner/actions/index.js
 create mode 100644 app/packs/src/components/chemscanner/actions/scannedItemActions.js
 create mode 100644 app/packs/src/components/chemscanner/actions/storedFileActions.js
 create mode 100644 app/packs/src/components/chemscanner/actions/uiActions.js
 create mode 100644 app/packs/src/components/chemscanner/components/AbbreviationManagement.js
 create mode 100644 app/packs/src/components/chemscanner/components/ArchivedManagement.js
 create mode 100644 app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
 create mode 100644 app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
 create mode 100644 app/packs/src/components/chemscanner/components/DeleteBtn.js
 create mode 100644 app/packs/src/components/chemscanner/components/EditCommentBtn.js
 create mode 100644 app/packs/src/components/chemscanner/components/EditMdlBtn.js
 create mode 100644 app/packs/src/components/chemscanner/components/EditableText.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
 create mode 100644 app/packs/src/components/chemscanner/components/FileStorage.js
 create mode 100644 app/packs/src/components/chemscanner/components/HeaderMenu.js
 create mode 100644 app/packs/src/components/chemscanner/components/HelpPopover.js
 create mode 100644 app/packs/src/components/chemscanner/components/ImportModal.js
 create mode 100644 app/packs/src/components/chemscanner/components/LoadingModal.js
 create mode 100644 app/packs/src/components/chemscanner/components/MainContent.js
 create mode 100644 app/packs/src/components/chemscanner/components/MoleculeDescription.js
 create mode 100644 app/packs/src/components/chemscanner/components/MoleculeDetails.js
 create mode 100644 app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
 create mode 100644 app/packs/src/components/chemscanner/components/ReactionDescription.js
 create mode 100644 app/packs/src/components/chemscanner/components/ReactionDetails.js
 create mode 100644 app/packs/src/components/chemscanner/components/Root.js
 create mode 100644 app/packs/src/components/chemscanner/components/ScannedMolecules.js
 create mode 100644 app/packs/src/components/chemscanner/components/ScannedReactions.js
 create mode 100644 app/packs/src/components/chemscanner/components/SelectBtn.js
 create mode 100644 app/packs/src/components/chemscanner/components/SmiSelect.js
 create mode 100644 app/packs/src/components/chemscanner/components/fileStorageUtils.js
 create mode 100644 app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/FileStorageContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/ImportModalContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/MainContentContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/NotificationContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/RootContainer.js
 create mode 100644 app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
 create mode 100644 app/packs/src/components/chemscanner/middleware/api.js
 create mode 100644 app/packs/src/components/chemscanner/middleware/chemdraw.js
 create mode 100644 app/packs/src/components/chemscanner/reactionUtils.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/files.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/index.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/molecules.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/reactions.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/root.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/schemes.js
 create mode 100644 app/packs/src/components/chemscanner/reducers/ui.js
 create mode 100644 app/packs/src/components/chemscanner/store/configureStore.js
 create mode 100644 app/packs/src/components/chemscanner/utils.js
 create mode 100644 app/packs/src/components/chemspectra/ChemSpectra.js
 create mode 100644 app/packs/src/components/chemspectra/ChemSpectraEditor.js
 create mode 100644 app/packs/src/components/collection_management/MyCollections.js
 create mode 100644 app/packs/src/components/collection_management/MySharedCollections.js
 create mode 100644 app/packs/src/components/collection_management/SharedWithMeCollections.js
 create mode 100644 app/packs/src/components/collection_management/SyncWithMeCollections.js
 create mode 100644 app/packs/src/components/common/CustomTextEditor.js
 create mode 100644 app/packs/src/components/common/RepoMetadataModal.js
 create mode 100644 app/packs/src/components/common/RepoPreviewImage.js
 create mode 100644 app/packs/src/components/common/RepoPublicComment.js
 create mode 100644 app/packs/src/components/common/RepoReviewAuthorsModal.js
 create mode 100644 app/packs/src/components/common/RepoSpectra.js
 create mode 100644 app/packs/src/components/common/RepoUserComment.js
 create mode 100644 app/packs/src/components/common/RepoXvialButton.js
 create mode 100644 app/packs/src/components/computed_props/ComputedPropLabel.js
 create mode 100644 app/packs/src/components/computed_props/ComputedPropsContainer.js
 create mode 100644 app/packs/src/components/computed_props/ComputedPropsGraph.js
 create mode 100644 app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
 create mode 100644 app/packs/src/components/computed_props/CustomAxisLabel.js
 create mode 100644 app/packs/src/components/computed_props/GraphReferenceTable.js
 create mode 100644 app/packs/src/components/computed_props/Highlight.js
 create mode 100644 app/packs/src/components/computed_props/NoComputedProps.js
 create mode 100644 app/packs/src/components/computed_props/SampleComputedProps.js
 create mode 100644 app/packs/src/components/contextActions/ModalImportChemScanner.js
 create mode 100644 app/packs/src/components/elements/ElementField.js
 create mode 100644 app/packs/src/components/elements/ElementFieldDragSource.js
 create mode 100644 app/packs/src/components/elements/ElementFieldDropTarget.js
 create mode 100644 app/packs/src/components/elements/GroupFields.js
 create mode 100644 app/packs/src/components/elements/UserCounter.js
 create mode 100644 app/packs/src/components/examples/NumeralInputWithUnitsExample.js
 create mode 100644 app/packs/src/components/fetchers/AdminFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ArticleFetcher.js
 create mode 100644 app/packs/src/components/fetchers/AttachmentFetcher.js
 create mode 100644 app/packs/src/components/fetchers/BaseFetcher.js
 create mode 100644 app/packs/src/components/fetchers/CollaboratorFetcher.js
 create mode 100644 app/packs/src/components/fetchers/CollectionsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ComputeTaskFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ContainerFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ConverterFetcher.js
 create mode 100644 app/packs/src/components/fetchers/DeviceFetcher.js
 create mode 100644 app/packs/src/components/fetchers/EditorFetcher.js
 create mode 100644 app/packs/src/components/fetchers/EmbargoFetcher.js
 create mode 100644 app/packs/src/components/fetchers/GenericBaseFetcher.js
 create mode 100644 app/packs/src/components/fetchers/GenericDSsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/GenericElsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/InboxFetcher.js
 create mode 100644 app/packs/src/components/fetchers/InstrumentsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/LiteraturesFetcher.js
 create mode 100644 app/packs/src/components/fetchers/MessagesFetcher.js
 create mode 100644 app/packs/src/components/fetchers/MoleculesFetcher.js
 create mode 100644 app/packs/src/components/fetchers/NmrSimFetcher.js
 create mode 100644 app/packs/src/components/fetchers/PermissionsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/PredictionsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/PrivateNoteFetcher.js
 create mode 100644 app/packs/src/components/fetchers/PublicFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReactionSvgFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReactionsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReportTemplateFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReportsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/RepositoryFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ResearchPlansFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ResidueFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ReviewFetcher.js
 create mode 100644 app/packs/src/components/fetchers/SamplesFetcher.js
 create mode 100644 app/packs/src/components/fetchers/ScreensFetcher.js
 create mode 100644 app/packs/src/components/fetchers/SearchFetcher.js
 create mode 100644 app/packs/src/components/fetchers/SegmentsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/SuggestionsFetcher.js
 create mode 100644 app/packs/src/components/fetchers/TextTemplatesFetcher.js
 create mode 100644 app/packs/src/components/fetchers/UIFetcher.js
 create mode 100644 app/packs/src/components/fetchers/UsersFetcher.js
 create mode 100644 app/packs/src/components/fetchers/WellplatesFetcher.js
 create mode 100644 app/packs/src/components/generic/AttrChk.js
 create mode 100644 app/packs/src/components/generic/DefinedRenderer.js
 create mode 100644 app/packs/src/components/generic/DropLinkRenderer.js
 create mode 100644 app/packs/src/components/generic/DropRenderer.js
 create mode 100644 app/packs/src/components/generic/DropTextRenderer.js
 create mode 100644 app/packs/src/components/generic/FieldSelect.js
 create mode 100644 app/packs/src/components/generic/GenericElCommon.js
 create mode 100644 app/packs/src/components/generic/GenericElCriteriaModal.js
 create mode 100644 app/packs/src/components/generic/GenericElDropTarget.js
 create mode 100644 app/packs/src/components/generic/GenericElTableDropTarget.js
 create mode 100644 app/packs/src/components/generic/GenericElementLabels.js
 create mode 100644 app/packs/src/components/generic/GenericPropertiesFields.js
 create mode 100644 app/packs/src/components/generic/GridBtn.js
 create mode 100644 app/packs/src/components/generic/GridDnD.js
 create mode 100644 app/packs/src/components/generic/GridEntry.js
 create mode 100644 app/packs/src/components/generic/GridSelect.js
 create mode 100644 app/packs/src/components/generic/LayerSelect.js
 create mode 100644 app/packs/src/components/generic/PreviewModal.js
 create mode 100644 app/packs/src/components/generic/SamOption.js
 create mode 100644 app/packs/src/components/generic/SystemSelect.js
 create mode 100644 app/packs/src/components/generic/TableDef.js
 create mode 100644 app/packs/src/components/generic/TableRecord.js
 create mode 100644 app/packs/src/components/generic/TextFormula.js
 create mode 100644 app/packs/src/components/generic/TypeSelect.js
 create mode 100644 app/packs/src/components/generic/UConverterRenderer.js
 create mode 100644 app/packs/src/components/green_chem/GreenChemistry.js
 create mode 100644 app/packs/src/components/green_chem/GreenMaterialGroup.js
 create mode 100644 app/packs/src/components/green_chem/GreenMetrics.js
 create mode 100644 app/packs/src/components/inbox/AttachmentContainer.js
 create mode 100644 app/packs/src/components/inbox/DatasetContainer.js
 create mode 100644 app/packs/src/components/inbox/DeviceBox.js
 create mode 100644 app/packs/src/components/inbox/InboxModal.js
 create mode 100644 app/packs/src/components/inbox/MoveToAnalysisButton.js
 create mode 100644 app/packs/src/components/inbox/UnsortedBox.js
 create mode 100644 app/packs/src/components/inbox/UnsortedDataset.js
 create mode 100644 app/packs/src/components/inbox/UnsortedDatasetModal.js
 create mode 100644 app/packs/src/components/managing_actions/ChildOverlay.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingActionButtons.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingActions.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingModalDelete.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingModalRemove.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingModalSharing.js
 create mode 100644 app/packs/src/components/managing_actions/ManagingModalTopSecret.js
 create mode 100644 app/packs/src/components/models/AnalysesExperiment.js
 create mode 100644 app/packs/src/components/models/Analysis.js
 create mode 100644 app/packs/src/components/models/Attachment.js
 create mode 100644 app/packs/src/components/models/ComputeTask.js
 create mode 100644 app/packs/src/components/models/Container.js
 create mode 100644 app/packs/src/components/models/Device.js
 create mode 100644 app/packs/src/components/models/DeviceAnalysis.js
 create mode 100644 app/packs/src/components/models/DeviceControl.js
 create mode 100644 app/packs/src/components/models/DeviceSample.js
 create mode 100644 app/packs/src/components/models/Element.js
 create mode 100644 app/packs/src/components/models/Format.js
 create mode 100644 app/packs/src/components/models/GenericDS.js
 create mode 100644 app/packs/src/components/models/GenericEl.js
 create mode 100644 app/packs/src/components/models/GenericSubField.js
 create mode 100644 app/packs/src/components/models/Graph.js
 create mode 100644 app/packs/src/components/models/Literature.js
 create mode 100644 app/packs/src/components/models/LiteratureMap.js
 create mode 100644 app/packs/src/components/models/Molecule.js
 create mode 100644 app/packs/src/components/models/Prediction.js
 create mode 100644 app/packs/src/components/models/PrivateNote.js
 create mode 100644 app/packs/src/components/models/Reaction.js
 create mode 100644 app/packs/src/components/models/Report.js
 create mode 100644 app/packs/src/components/models/ReportTemplate.js
 create mode 100644 app/packs/src/components/models/ResearchPlan.js
 create mode 100644 app/packs/src/components/models/Sample.js
 create mode 100644 app/packs/src/components/models/Screen.js
 create mode 100644 app/packs/src/components/models/Segment.js
 create mode 100644 app/packs/src/components/models/StructureDef.js
 create mode 100644 app/packs/src/components/models/StructureEditor.js
 create mode 100644 app/packs/src/components/models/Well.js
 create mode 100644 app/packs/src/components/models/Wellplate.js
 create mode 100644 app/packs/src/components/nmr_sim/LineChart.js
 create mode 100644 app/packs/src/components/nmr_sim/LineChartWrapper.js
 create mode 100644 app/packs/src/components/nmr_sim/NmrSimTab.js
 create mode 100644 app/packs/src/components/nmr_sim/NmrdbReference.js
 create mode 100644 app/packs/src/components/nmr_sim/SampleDetailsTabName.js
 create mode 100644 app/packs/src/components/prediction/Content.js
 create mode 100644 app/packs/src/components/prediction/ContentInputs.js
 create mode 100644 app/packs/src/components/prediction/ContentOutputs.js
 create mode 100644 app/packs/src/components/prediction/PredictionComponent.js
 create mode 100644 app/packs/src/components/prediction/PredictionContainer.js
 create mode 100644 app/packs/src/components/proxies/ElementPermissionProxy.js
 create mode 100644 app/packs/src/components/qc/QcMain.js
 create mode 100644 app/packs/src/components/qc/components/QcContent.js
 create mode 100644 app/packs/src/components/qc/components/helper/icon.js
 create mode 100644 app/packs/src/components/qc/components/helper/ir.js
 create mode 100644 app/packs/src/components/qc/components/helper/nmr.js
 create mode 100644 app/packs/src/components/qc/components/helper/qc_mol_view.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockCnmr.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockConclusion.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockEa.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockHnmr.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockIr.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockMS.js
 create mode 100644 app/packs/src/components/qc/components/substance/BlockTitle.js
 create mode 100644 app/packs/src/components/qc/components/summary/AreaSummary.js
 create mode 100644 app/packs/src/components/qc/components/summary/AreaTitle.js
 create mode 100644 app/packs/src/components/qc/components/summary/LineScore.js
 create mode 100644 app/packs/src/components/qc/components/summary/LineSummary.js
 create mode 100644 app/packs/src/components/qc/components/summary/common.js
 create mode 100644 app/packs/src/components/qc/components/summary/eval.js
 create mode 100644 app/packs/src/components/qc/utils/common.js
 create mode 100644 app/packs/src/components/qc/utils/ir.js
 create mode 100644 app/packs/src/components/qc/utils/ms.js
 create mode 100644 app/packs/src/components/qc/utils/nmr.js
 create mode 100644 app/packs/src/components/qc/utils/qcs.js
 create mode 100644 app/packs/src/components/react_quill/BaseToolbar.js
 create mode 100644 app/packs/src/components/react_quill/DynamicToolbarEditor.js
 create mode 100644 app/packs/src/components/react_quill/ReactQuill.js
 create mode 100644 app/packs/src/components/react_quill/ToolbarDropdown.js
 create mode 100644 app/packs/src/components/react_quill/ToolbarIcon.js
 create mode 100644 app/packs/src/components/report/Archives.js
 create mode 100644 app/packs/src/components/report/Config.js
 create mode 100644 app/packs/src/components/report/Orders.js
 create mode 100644 app/packs/src/components/report/OrdersDnD.js
 create mode 100644 app/packs/src/components/report/Paramize.js
 create mode 100644 app/packs/src/components/report/Previews.js
 create mode 100644 app/packs/src/components/report/ReportComponent.js
 create mode 100644 app/packs/src/components/report/ReportContainer.js
 create mode 100644 app/packs/src/components/report/SectionReaction.js
 create mode 100644 app/packs/src/components/report/SectionReactionList.js
 create mode 100644 app/packs/src/components/report/SectionSample.js
 create mode 100644 app/packs/src/components/report/SectionSiProcedures.js
 create mode 100644 app/packs/src/components/report/SectionSiSynthesis.js
 create mode 100644 app/packs/src/components/report/SectionSiSynthesisStdRxn.js
 create mode 100644 app/packs/src/components/report/SectionSpectrum.js
 create mode 100644 app/packs/src/components/report/Serials.js
 create mode 100644 app/packs/src/components/report/Setting.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetails.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsField.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
 create mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsName.js
 create mode 100644 app/packs/src/components/routes.js
 create mode 100644 app/packs/src/components/routesUtils.js
 create mode 100644 app/packs/src/components/scifinder/ScifinderCredential.js
 create mode 100644 app/packs/src/components/search/AutoCompleteInput.js
 create mode 100644 app/packs/src/components/search/Search.js
 create mode 100644 app/packs/src/components/search/SearchFilter.js
 create mode 100644 app/packs/src/components/sharing/SharingShortcuts.js
 create mode 100644 app/packs/src/components/sso/LoginOptions.js
 create mode 100644 app/packs/src/components/sso/OmniauthCredential.js
 create mode 100644 app/packs/src/components/stores/ClipboardStore.js
 create mode 100644 app/packs/src/components/stores/CollectionStore.js
 create mode 100644 app/packs/src/components/stores/ComputeTaskStore.js
 create mode 100644 app/packs/src/components/stores/ElementStore.js
 create mode 100644 app/packs/src/components/stores/EmbargoStore.js
 create mode 100644 app/packs/src/components/stores/InboxStore.js
 create mode 100644 app/packs/src/components/stores/KeyboardStore.js
 create mode 100644 app/packs/src/components/stores/LoadingStore.js
 create mode 100644 app/packs/src/components/stores/NmrSimStore.js
 create mode 100644 app/packs/src/components/stores/NotificationStore.js
 create mode 100644 app/packs/src/components/stores/PermissionStore.js
 create mode 100644 app/packs/src/components/stores/PredictionStore.js
 create mode 100644 app/packs/src/components/stores/PublicStore.js
 create mode 100644 app/packs/src/components/stores/QcStore.js
 create mode 100644 app/packs/src/components/stores/RStore.js
 create mode 100644 app/packs/src/components/stores/ReportStore.js
 create mode 100644 app/packs/src/components/stores/ReviewStore.js
 create mode 100644 app/packs/src/components/stores/SpectraStore.js
 create mode 100644 app/packs/src/components/stores/SuggestionStore.js
 create mode 100644 app/packs/src/components/stores/TextTemplateStore.js
 create mode 100644 app/packs/src/components/stores/UIStore.js
 create mode 100644 app/packs/src/components/stores/UserStore.js
 create mode 100644 app/packs/src/components/structure_editor/ChemDrawEditor.js
 create mode 100644 app/packs/src/components/structure_editor/KetcherEditor.js
 create mode 100644 app/packs/src/components/structure_editor/MarvinjsEditor.js
 create mode 100644 app/packs/src/components/structure_editor/StructureEditorContent.js
 create mode 100644 app/packs/src/components/structure_editor/StructureEditorMap.js
 create mode 100644 app/packs/src/components/structure_editor/StructureEditorModal.js
 create mode 100644 app/packs/src/components/structure_editor/StructureEditorSet.js
 create mode 100644 app/packs/src/components/structure_editor/loadScripts.js
 create mode 100644 app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
 create mode 100644 app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
 create mode 100644 app/packs/src/components/utils/ArrayUtils.js
 create mode 100644 app/packs/src/components/utils/DndControl.js
 create mode 100644 app/packs/src/components/utils/DocumentHelper.js
 create mode 100644 app/packs/src/components/utils/DomHelper.js
 create mode 100644 app/packs/src/components/utils/ElementUtils.js
 create mode 100644 app/packs/src/components/utils/FetcherHelper.js
 create mode 100644 app/packs/src/components/utils/Functions.js
 create mode 100644 app/packs/src/components/utils/MathUtils.js
 create mode 100644 app/packs/src/components/utils/PermissionConst.js
 create mode 100644 app/packs/src/components/utils/ReportHelper.js
 create mode 100644 app/packs/src/components/utils/SpectraHelper.js
 create mode 100644 app/packs/src/components/utils/deltaMarkdownConverter.js
 create mode 100644 app/packs/src/components/utils/imageHelper.js
 create mode 100644 app/packs/src/components/utils/markdownUtils.js
 create mode 100644 app/packs/src/components/utils/metricPrefix.js
 create mode 100644 app/packs/src/components/utils/quillFormat.js
 create mode 100644 app/packs/src/components/utils/quillToolbarSymbol.js
 create mode 100644 app/packs/src/components/utils/reactionPredefined.js
 create mode 100644 app/packs/src/libCnC/CnC.js
 create mode 100644 app/packs/src/libCnC/Navigation.js
 create mode 100644 app/packs/src/libHome/Home.js
 create mode 100644 app/packs/src/libHome/NavNewSession.js
 create mode 100644 app/packs/src/libHome/RepoAbout.js
 create mode 100644 app/packs/src/libHome/RepoCardIntro.js
 create mode 100644 app/packs/src/libHome/RepoCardLatestPublish.js
 create mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive.js
 create mode 100644 app/packs/src/libHome/RepoCardStaticsBoard.js
 create mode 100644 app/packs/src/libHome/RepoCollection.js
 create mode 100644 app/packs/src/libHome/RepoCollectionDetails.js
 create mode 100644 app/packs/src/libHome/RepoCommon.js
 create mode 100644 app/packs/src/libHome/RepoContact.js
 create mode 100644 app/packs/src/libHome/RepoContainerDatasets.js
 create mode 100644 app/packs/src/libHome/RepoDirective.js
 create mode 100644 app/packs/src/libHome/RepoElementDetails.js
 create mode 100644 app/packs/src/libHome/RepoEmbargo.js
 create mode 100644 app/packs/src/libHome/RepoEmbargoDetails.js
 create mode 100644 app/packs/src/libHome/RepoEmbargoModal.js
 create mode 100644 app/packs/src/libHome/RepoHome.js
 create mode 100644 app/packs/src/libHome/RepoHowTo.js
 create mode 100644 app/packs/src/libHome/RepoHowToDragSource.js
 create mode 100644 app/packs/src/libHome/RepoHowToDropTarget.js
 create mode 100644 app/packs/src/libHome/RepoHowToEditor.js
 create mode 100644 app/packs/src/libHome/RepoHowToReader.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerBtn.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerListBtn.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerListModal.js
 create mode 100644 app/packs/src/libHome/RepoMolViewerModal.js
 create mode 100644 app/packs/src/libHome/RepoMoleculeArchive.js
 create mode 100644 app/packs/src/libHome/RepoMoleculeList.js
 create mode 100644 app/packs/src/libHome/RepoNavListTypes.js
 create mode 100644 app/packs/src/libHome/RepoNewsEditor.js
 create mode 100644 app/packs/src/libHome/RepoNewsReader.js
 create mode 100644 app/packs/src/libHome/RepoNewsroom.js
 create mode 100644 app/packs/src/libHome/RepoPubCommon.js
 create mode 100644 app/packs/src/libHome/RepoPubl.js
 create mode 100644 app/packs/src/libHome/RepoReactionDetails.js
 create mode 100644 app/packs/src/libHome/RepoReactionList.js
 create mode 100644 app/packs/src/libHome/RepoReactionSchemeInfo.js
 create mode 100644 app/packs/src/libHome/RepoReview.js
 create mode 100644 app/packs/src/libHome/RepoReviewButtonBar.js
 create mode 100644 app/packs/src/libHome/RepoReviewCommon.js
 create mode 100644 app/packs/src/libHome/RepoReviewDetails.js
 create mode 100644 app/packs/src/libHome/RepoSample.js
 create mode 100644 app/packs/src/libHome/RepoSampleDetails.js
 create mode 100644 app/packs/src/libHome/RepoSegment.js
 create mode 100644 app/serializers/computed_props_serializer.rb
 create mode 100644 app/serializers/detail_levels/element.rb
 create mode 100644 app/serializers/element_level_list_serializable.rb
 create mode 100644 app/serializers/element_level_serializable.rb
 create mode 100644 app/serializers/element_list_serializer.rb
 create mode 100644 app/serializers/element_serializer.rb
 create mode 100644 config/compound_open_data.yml.example
 create mode 100644 config/omniauth.yml.example
 create mode 100644 db/migrate/20220712100000_add_segment_klass_identifier.rb
 create mode 100644 db/migrate/20220920000006_embargo_accepted_collection.rb
 create mode 100644 lib/analyses/converter.rb
 create mode 100644 spec/api/delayed_job_api_spec.rb

diff --git a/.env.production.example b/.env.production.example
index ae68ac358..6734900a2 100644
--- a/.env.production.example
+++ b/.env.production.example
@@ -1,14 +1,14 @@
 # default uri of your Chemotion ELN for http links in e-mails and notification:
-PUBLIC_URL='http://sld.tld' 
+PUBLIC_URL='http://sld.tld'
 # senders e-mail:
-DEVISE_SENDER='no-reply@sld.tld' 
+DEVISE_SENDER='no-reply@sld.tld'
 
-## SMTP config 
+## SMTP config
 # Remote mail server
 SMTP_ADDRESS='smtp.sld.tld'
 SMTP_PORT=587
 # login user name & password:
-SMTP_USERNAME='no-reply@sld.tld' 
+SMTP_USERNAME='no-reply@sld.tld'
 SMTP_PASSWORD='s3cr3tPW'
 # optional, HELO domain
 SMTP_DOMAIN='sld.tld'
@@ -16,7 +16,7 @@ SMTP_DOMAIN='sld.tld'
 SMTP_TLS=true
 # authentication type ('plain' 'login' (Base64 encoded) or 'cram_md5')
 SMTP_AUTH='plain'
-# how OpenSSL checks the certificate  ('none' or 'peer') 
+# how OpenSSL checks the certificate  ('none' or 'peer')
 SMTP_SSL_MODE='none'
 
 # disable mail delivery
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
deleted file mode 100644
index bbb48e917..000000000
--- a/.gitlab-ci.yml
+++ /dev/null
@@ -1,122 +0,0 @@
-image: "complat/complat-ubuntu-runner:development-5.0b920674f8"
-
-services:
-  - postgres:12-alpine
-
-variables:
-  POSTGRES_DB: chemotion_test
-  POSTGRES_USER: chemotion_test
-  POSTGRES_PASSWORD: "123456"
-
-.cachingbuild:
-  cache:
-    key: ${CI_COMMIT_REF_SLUG}
-    paths:
-      - public/
-#      - .bundle/
-#      - node_modules/
-      - .env
-
-.caching:
-  extends: .cachingbuild
-  cache:
-    policy: pull
-
-.before_scripting:
-  before_script:
-#    - mv ~/shared/bundle/ ~/shared/bundle.bak/
-#    - mv vendor/bundle/  ~/shared/
-    - cp config/database.yml.gitlab config/database.yml
-    - cp -f config/storage.yml.example config/storage.yml
-    - cp -f config/profile_default.yml.example config/profile_default.yml
-    - touch config/datacollectors.yml
-    - touch config/klasses.json
-
-stages:
-  - build
-  - unit
-  - acceptance
-
-building:
-  extends: .cachingbuild
-  stage: build
-  before_script:
-    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
-    - eval $(ssh-agent -s)
-    # - mkdir -p ~/.ssh
-    # - chmod 700 ~/.ssh
-    # - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
-    # - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
-    # - chmod 600 ~/.ssh/id_rsa
-    # - ssh-add ~/.ssh/id_rsa
-    # - ssh-keyscan git.scc.kit.edu >> ~/.ssh/known_hosts
-    # - echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
-    - |
-      if [ ${#SSH_PRIVATE_KEY} -ge 1000 ]; then
-        mkdir -p ~/.ssh
-        chmod 700 ~/.ssh
-        echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
-        chmod 600 ~/.ssh/id_rsa
-        ssh-add ~/.ssh/id_rsa
-        #echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
-        ssh-keyscan git.scc.kit.edu >> ~/.ssh/known_hosts
-        chmod 600 ~/.ssh/known_hosts
-        echo "$SSH_CONFIG" > ~/.ssh/config
-        chmod 600 ~/.ssh/config
-      fi
-    - if test ! -d "node_modules"; then ln -s /home/gitlab-runner/shared/node_modules node_modules; fi
-    - cp config/database.yml.gitlab config/database.yml
-    - cp -f config/storage.yml.example config/storage.yml
-    - cp -f config/profile_default.yml.example config/profile_default.yml
-    - echo "$DOTENV" > .env
-    - touch config/datacollectors.yml
-    - touch config/klasses.json
-  script:
-    - /bin/bash -l -c "bundle install"
-    - /bin/bash -l -c "bundle list"
-    - /bin/bash -l -c "yarn install"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec bin/rails db:migrate  db:test:prepare"
-
-testrb:
-  extends:
-    - .caching
-    - .before_scripting
-  stage: unit
-  script:
-    - /bin/bash -l -c "bundle install"
-    - /bin/bash -l -c "bundle list"
-    - /bin/bash -l -c "yarn install"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec bin/rails db:migrate  db:test:prepare"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec bin/rails db:seed"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec rspec --exclude-pattern spec/{features}/**/*_spec.rb"
-  except:
-    variables:
-    - $CI_COMMIT_MESSAGE =~ /skip[ _-]unitrb/i
-    - $CI_COMMIT_MESSAGE =~ /skip[ _-]allunits?/i
-
-testjs:
-  extends:
-    - .caching
-    - .before_scripting
-  stage: unit
-  script:
-    - /bin/bash -l -c "bundle install"
-    - /bin/bash -l -c "yarn install"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec rake db:test:prepare && yarn test"
-  except:
-    variables:
-    - $CI_COMMIT_MESSAGE =~ /skip[ _-]unitjs/i
-    - $CI_COMMIT_MESSAGE =~ /skip[ _-]allunits?/i
-
-testacceptance:
-  extends:
-    - .caching
-    - .before_scripting
-  stage: acceptance
-  script:
-    - /bin/bash -l -c "bundle install"
-    - /bin/bash -l -c "yarn install"
-    - /bin/bash -l -c "RAILS_ENV=test bundle exec bin/rails db:migrate  db:test:prepare && bundle exec rake assets:precompile  && bundle exec rspec spec/features"
-  except:
-    variables:
-    - $CI_COMMIT_MESSAGE =~ /skip[ _-]acceptance/i
diff --git a/CHANGELOG.md b/CHANGELOG.md
index efccf4f7a..9c63d6cac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 
 
 * Features and enhancements
-  * Reaction Variations ([#1409](https://github.com/ComPlat/chemotion_ELN/pull/1409), [#1561](https://github.com/ComPlat/chemotion_ELN/pull/1561), [#1567](https://github.com/ComPlat/chemotion_ELN/pull/1567)) [Docs](https://chemotion.net/docs/eln/ui/details_modal?_highlight=variation#variations-tab) 
+  * Reaction Variations ([#1409](https://github.com/ComPlat/chemotion_ELN/pull/1409), [#1561](https://github.com/ComPlat/chemotion_ELN/pull/1561), [#1567](https://github.com/ComPlat/chemotion_ELN/pull/1567)) [Docs](https://chemotion.net/docs/eln/ui/details_modal?_highlight=variation#variations-tab)
   * LabiIMotion Integration  ([#1504](https://github.com/ComPlat/chemotion_ELN/pull/1504)) [Docs](https://chemotion.net/docs/eln/admin/generic_config)
   * Enhance import samples for sdf  ([#1364](https://github.com/ComPlat/chemotion_ELN/pull/1364))
   * Import export sample as chemical  ([#1524](https://github.com/ComPlat/chemotion_ELN/pull/1524))
@@ -70,7 +70,7 @@
   * Reaction Variations [#1409](https://github.com/ComPlat/chemotion_ELN/pull/1409)
   * LabiIMotion Integration [#1504](https://github.com/ComPlat/chemotion_ELN/pull/1504)
 
-## [v1.7.3] 
+## [v1.7.3]
 > (2023-09-20)
 
 * Features and Improvements:
@@ -91,7 +91,7 @@
   * upg nodejs LTS to 18 [#1489](https://github.com/ComPlat/chemotion_ELN/pull/1489)
   * puma from 5.6.5 to 5.6.7 [#1488](https://github.com/ComPlat/chemotion_ELN/pull/1488)
   * update README - acknowledge NFDI [#1472](https://github.com/ComPlat/chemotion_ELN/pull/1472)
-  
+
 * Fixes:
   * disable_chemrepoidjob [#1451](https://github.com/ComPlat/chemotion_ELN/pull/1451)
   * quill_to_html when type HashWithIndifferentAccess [#1458](https://github.com/ComPlat/chemotion_ELN/pull/1458)
@@ -115,9 +115,9 @@
   * Update Chemspectra to handle 'FL Spectrum' datatype and fix cannot read processed Bruker data NMR [#1528](https://github.com/ComPlat/chemotion_ELN/pull/1528)
   * yield percentage error for reactions with decoupled products and … [#1531](https://github.com/ComPlat/chemotion_ELN/pull/1531)
   * reaction sort column default to created_at [#1533](https://github.com/ComPlat/chemotion_ELN/pull/1533)
-  
 
-## [v1.7.2] 
+
+## [v1.7.2]
 > (2023-08-01)
 
 * Fixes:
@@ -136,7 +136,7 @@
   * sort reaction list by creation date [#1429](https://github.com/ComPlat/chemotion_ELN/pull/1429)
   * change ref area and display shift ref [#1431]( https://github.com/ComPlat/chemotion_ELN/pull/1431)
   * total element count in list tabs [#1426]( https://github.com/ComPlat/chemotion_ELN/pull/1426)
-  
+
 
 ## [v1.7.0]
 > 2023-07-11
@@ -186,7 +186,7 @@
   * nmrium: display preview image after saving [#1356](https://github.com/ComPlat/chemotion_ELN/pull/1356)
 
 
-## [v1.6.0] 
+## [v1.6.0]
 > 2023-05-09
 
 * Features and Improvements:
@@ -195,7 +195,7 @@
 
 * Fixes
   * port fixes from v1.5.3 v1.5.4
- 
+
 ## [v1.5.4]
 > 2023-05-09
 * Admin: it is possible to reprocess SVGs images of molecules and samples ([see docs](https://chemotion.net/docs/eln/troubleshooting#fixing-sample-or-molecule-svg-images))
@@ -208,7 +208,7 @@
   * Migration fixes [#1307](https://github.com/ComPlat/chemotion_ELN/pull/1307)
   * reactants from reagent list do not appear above reaction arrow [#1308](https://github.com/ComPlat/chemotion_ELN/pull/1308)
   * Search api: fix ActiveRecord::UnknownAttributeReference on sum-formulae [#1310](https://github.com/ComPlat/chemotion_ELN/pull/1310)
- 
+
 
 ## [v1.5.3]
 > 2023-04-21
@@ -226,12 +226,12 @@
   * show results from calculations [#1291](https://github.com/ComPlat/chemotion_ELN/pull/1291)
   * report issue fix [#1296](https://github.com/ComPlat/chemotion_ELN/pull/1296)
 
-## [v1.6.0-rc1] 
+## [v1.6.0-rc1]
 > 2023-04-11
 
 * Fixes
-  * port fixes from v1.5.2 
-  
+  * port fixes from v1.5.2
+
 ## [v1.5.2]
 > 2023-04-11
 
@@ -288,9 +288,9 @@
   * NMRium: NMR data can be processed in [NMRium](https://www.nmrium.org/) ([docs](https://chemotion.net/docs/chemspectra/nmr?_highlight=nmrium#analysis-using-nmrium))
   * Integration of Chem-converter v0.9.0 ([docs]( https://chemotion.net/docs/chemconverter/)
   * Wellplate/Screen/ResearchPlan Workflow
-  * Chemspectra: better UI for Cyclic Volt. 
-  * add cas to sample export 
-  * 
+  * Chemspectra: better UI for Cyclic Volt.
+  * add cas to sample export
+  *
 
 * Fixes
   * Chemspectra: The issue of multiplicities on chemspectra frontend are not removed when changing between layouts with the old JCAMP design is fixed
@@ -298,7 +298,7 @@
   * Affiliation autocomplete (sign up page)
   * CAS not searchable (index search might need to be rebuilt)
   * molecule image cropped in chemspectra
-  * [others](https://github.com/ComPlat/chemotion_ELN/issues?q=is%3Aissue+is%3Aclosed+closed%3A2022-11-10..2023-02-28+label%3Abug+) 
+  * [others](https://github.com/ComPlat/chemotion_ELN/issues?q=is%3Aissue+is%3Aclosed+closed%3A2022-11-10..2023-02-28+label%3Abug+)
 
 
 
diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index c73a0eed2..ca73c3128 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -51,6 +51,13 @@ def remove_duplicated(att)
 
         old_att&.destroy
       end
+
+      def validate_uuid_format(uuid)
+        uuid_regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+        return true if uuid_regex.match?(uuid.to_s.downcase)
+
+        return false
+      end
     end
 
     rescue_from ActiveRecord::RecordNotFound do |_error|
@@ -144,6 +151,13 @@ def remove_duplicated(att)
                           (ElementPolicy.new(current_user, element).read? &&
                           ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
             end
+
+            if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
+              element = Segment.find(@attachment.attachable_id)&.element
+              can_dwnld = @attachment.created_for == current_user.id ||
+                          (ElementPolicy.new(current_user, element).read? &&
+                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
+            end
           end
           error!('401 Unauthorized', 401) unless can_dwnld
         end
@@ -526,6 +540,35 @@ def remove_duplicated(att)
         end
       end
 
+      desc 'Regenerate edited spectra'
+      params do
+        requires :edited, type: Array[Integer]
+        optional :molfile, type: String
+      end
+      post 'regenerate_edited_spectrum' do
+        pm = to_rails_snake_case(params)
+        pm[:edited].each do |g_id|
+          att = Attachment.find(g_id)
+          next unless att
+          can_edit = writable?(att)
+          if can_edit
+            abs_path = att.abs_path
+            molfile = pm[:molfile]
+            result =  Tempfile.create('molfile') do |t_molfile|
+              t_molfile.write(molfile)
+              t_molfile.rewind
+              Chemotion::Jcamp::RegenerateJcamp.spectrum(
+                abs_path, t_molfile.path
+              )
+            end
+
+            att.file_data = result
+            att.rewrite_file_data!
+            { status: true }
+          end
+        end
+      end
+
       desc 'Save spectra to file'
       params do
         requires :attachment_id, type: Integer
diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index b522ce267..0da508ba2 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -27,6 +27,20 @@ class CollectionAPI < Grape::API
         end
       end
 
+      namespace :all_as_tree do
+        desc "Return the 'All' collection of the current user"
+        get do
+          current_user.collections.arrange_serializable do |parent, children|
+            {
+              title: parent.label,
+              value: parent.id,
+              key: parent.id,
+              children: children
+            }
+          end
+        end
+      end
+
       desc "Return collection by id"
       params do
         requires :id, type: Integer, desc: "Collection id"
@@ -322,7 +336,6 @@ class CollectionAPI < Grape::API
             ui_state[:checkedIds] = ui_state[:checkedIds].presence || ui_state[:included_ids]
             ui_state[:uncheckedIds] = ui_state[:uncheckedIds].presence || ui_state[:excluded_ids]
             next unless ui_state[:checkedAll] || ui_state[:checkedIds].present?
-
             collections_element_klass = ('collections_' + element).classify.constantize
             element_klass = element.classify.constantize
             ids = element_klass.by_collection_id(from_collection.id).by_ui_state(ui_state).pluck(:id)
diff --git a/app/api/chemotion/converter_api.rb b/app/api/chemotion/converter_api.rb
new file mode 100644
index 000000000..c5f14e697
--- /dev/null
+++ b/app/api/chemotion/converter_api.rb
@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module Chemotion
+  class ConverterAPI < Grape::API
+    helpers do
+    end
+    resource :converter do
+      resource :profiles do
+        before do
+          @conf = Rails.configuration.try(:converter).try(:url)
+          @profile = Rails.configuration.try(:converter).try(:profile)
+          error!(406) unless @conf && @profile
+        end
+        desc 'fetch profiles'
+        get do
+          profiles = Analyses::Converter.fetch_profiles
+          { profiles: profiles, client: @profile }
+        end
+        desc 'create profile'
+        post do
+          Analyses::Converter.create_profile(params)
+        end
+        desc 'update profile'
+        route_param :id do
+          put do
+            Analyses::Converter.update_profile(params)
+          end
+        end
+        desc 'delete profile'
+        route_param :id do
+          delete do
+            id = params[:id]
+            Analyses::Converter.delete_profile(id)
+          end
+        end
+      end
+
+      resource :options do
+        before do
+          error!(401) unless current_user.profile&.data['converter_admin'] == true
+          @conf = Rails.configuration.try(:converter).try(:url)
+          @profile = Rails.configuration.try(:converter).try(:profile)
+          error!(406) unless @conf && @profile
+        end
+        desc 'fetch options'
+        get do
+          options = Analyses::Converter.fetch_options
+          { options: options, client: @profile }
+        end
+      end
+
+      resource :tables do
+        before do
+          error!(401) unless current_user.profile&.data['converter_admin'] == true
+          @conf = Rails.configuration.try(:converter).try(:url)
+          @profile = Rails.configuration.try(:converter).try(:profile)
+          error!(406) unless @conf && @profile
+        end
+        desc 'create tables'
+        post do
+          res = Analyses::Converter.create_tables(params[:file][0]['tempfile']) unless params[:file].empty?
+          res['metadata']['file_name'] = params[:file][0]['filename']
+          res
+        end
+      end
+    end
+  end
+end
diff --git a/app/api/chemotion/generic_dataset_api.rb b/app/api/chemotion/generic_dataset_api.rb
new file mode 100644
index 000000000..079665e80
--- /dev/null
+++ b/app/api/chemotion/generic_dataset_api.rb
@@ -0,0 +1,27 @@
+module Chemotion
+  class GenericDatasetAPI < Grape::API
+    include Grape::Kaminari
+
+    resource :generic_dataset do
+      namespace :klasses do
+        desc "get dataset klasses"
+        get do
+          list = DatasetKlass.where(is_active: true)
+          present list.sort_by(&:place), with: Entities::DatasetKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :list_dataset_klass do
+        desc 'list Generic Dataset Klass'
+        params do
+          optional :is_active, type: Boolean, desc: 'Active or Inactive Dataset'
+        end
+        get do
+          list = DatasetKlass.where(is_active: params[:is_active]) if params[:is_active].present?
+          list = DatasetKlass.all unless params[:is_active].present?
+          present list.sort_by(&:place), with: Entities::DatasetKlassEntity, root: 'klass'
+        end
+      end
+    end
+  end
+end
diff --git a/app/api/chemotion/generic_element_api.rb b/app/api/chemotion/generic_element_api.rb
new file mode 100644
index 000000000..021461285
--- /dev/null
+++ b/app/api/chemotion/generic_element_api.rb
@@ -0,0 +1,427 @@
+# frozen_string_literal: true
+module Chemotion
+  # Generic Element API
+  class GenericElementAPI < Grape::API
+    include Grape::Kaminari
+    helpers ContainerHelpers
+    helpers ParamsHelpers
+    helpers CollectionHelpers
+    helpers SampleAssociationHelpers
+    helpers GenericHelpers
+
+    resource :generic_elements do
+      namespace :klass do
+        desc 'get klass info'
+        params do
+          requires :name, type: String, desc: 'element klass name'
+        end
+        get do
+          ek = ElementKlass.find_by(name: params[:name])
+          present ek, with: Entities::ElementKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :klasses do
+        desc 'get klasses'
+        params do
+          optional :generic_only, type: Boolean, desc: 'list generic element only'
+        end
+        get do
+          list = ElementKlass.where(is_active: true, is_generic: true).order('place') if params[:generic_only].present? && params[:generic_only] == true
+          list = ElementKlass.where(is_active: true).order('place') unless params[:generic_only].present? && params[:generic_only] == true
+          present list, with: Entities::ElementKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :create_element_klass do
+        desc 'create Generic Element Klass'
+        params do
+          requires :name, type: String, desc: 'Element Klass Name'
+          requires :label, type: String, desc: 'Element Klass Label'
+          requires :klass_prefix, type: String, desc: 'Element Klass Short Label Prefix'
+          optional :icon_name, type: String, desc: 'Element Klass Icon Name'
+          optional :desc, type: String, desc: 'Element Klass Desc'
+          optional :properties_template, type: Hash, desc: 'Element Klass properties template'
+        end
+        post do
+          authenticate_admin!('elements')
+          uuid = SecureRandom.uuid
+          template = { uuid: uuid, layers: {}, select_options: {} }
+          attributes = declared(params, include_missing: false)
+          attributes[:properties_template]['uuid'] = uuid if attributes[:properties_template].present?
+          attributes[:properties_template] = template unless attributes[:properties_template].present?
+          attributes[:properties_template]['eln'] = Chemotion::Application.config.version if attributes[:properties_template].present?
+          attributes[:properties_template]['klass'] = 'ElementKlass' if attributes[:properties_template].present?
+          attributes[:is_active] = false
+          attributes[:uuid] = uuid
+          attributes[:released_at] = DateTime.now
+          attributes[:properties_release] = attributes[:properties_template]
+          attributes[:created_by] = current_user.id
+
+          new_klass = ElementKlass.create!(attributes)
+          new_klass.reload
+          new_klass.create_klasses_revision(current_user.id)
+          klass_names_file = Rails.root.join('config', 'klasses.json')
+          klasses = ElementKlass.where(is_active: true)&.pluck(:name) || []
+          File.write(klass_names_file, klasses)
+
+          status 201
+        rescue ActiveRecord::RecordInvalid => e
+          { error: e.message }
+        end
+      end
+
+      namespace :update_element_klass do
+        desc 'update Generic Element Klass'
+        params do
+          requires :id, type: Integer, desc: 'Element Klass ID'
+          optional :label, type: String, desc: 'Element Klass Label'
+          optional :klass_prefix, type: String, desc: 'Element Klass Short Label Prefix'
+          optional :icon_name, type: String, desc: 'Element Klass Icon Name'
+          optional :desc, type: String, desc: 'Element Klass Desc'
+          optional :place, type: String, desc: 'Element Klass Place'
+        end
+        post do
+          authenticate_admin!('elements')
+          place = params[:place] || 100
+          begin
+            place = place.to_i if place.present? && place.to_i == place.to_f
+          rescue StandardError
+            place = 100
+          end
+          klass = ElementKlass.find(params[:id])
+          klass.label = params[:label] if params[:label].present?
+          klass.klass_prefix = params[:klass_prefix] if params[:klass_prefix].present?
+          klass.icon_name = params[:icon_name] if params[:icon_name].present?
+          klass.desc = params[:desc] if params[:desc].present?
+          klass.place = place
+          klass.save!
+          klass
+        end
+      end
+
+      namespace :klass_revisions do
+        desc 'list Generic Element Revisions'
+        params do
+          requires :id, type: Integer, desc: 'Generic Element Klass Id'
+          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
+        end
+        get do
+          klass = params[:klass].constantize.find_by(id: params[:id])
+          list = klass.send("#{params[:klass].underscore}es_revisions") unless klass.nil?
+          present list.sort_by(&:released_at).reverse, with: Entities::KlassRevisionEntity, root: 'revisions'
+        end
+      end
+
+      namespace :element_revisions do
+        desc 'list Generic Element Revisions'
+        params do
+          requires :id, type: Integer, desc: 'Generic Element Id'
+        end
+        get do
+          klass = Element.find(params[:id])
+          list = klass.elements_revisions unless klass.nil?
+          present list&.sort_by(&:created_at).reverse, with: Entities::ElementRevisionEntity, root: 'revisions'
+        end
+      end
+
+      namespace :delete_klass_revision do
+        desc 'delete Klass Revision'
+        params do
+          requires :id, type: Integer, desc: 'Revision ID'
+          requires :klass_id, type: Integer, desc: 'Klass ID'
+          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
+        end
+        post do
+          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
+          revision = "#{params[:klass]}esRevision".constantize.find(params[:id])
+          klass = params[:klass].constantize.find_by(id: params[:klass_id]) unless revision.nil?
+          error!('Revision is invalid.', 404) if revision.nil?
+          error!('Can not delete the active revision.', 405) if revision.uuid == klass.uuid
+          revision&.destroy!
+          status 201
+        end
+      end
+
+      namespace :delete_revision do
+        desc 'delete Generic Element Revisions'
+        params do
+          requires :id, type: Integer, desc: 'Revision Id'
+          requires :element_id, type: Integer, desc: 'Element ID'
+          requires :klass, type: String, desc: 'Klass', values: %w[Element Segment Dataset]
+        end
+        post do
+          revision = "#{params[:klass]}sRevision".constantize.find(params[:id])
+          element = params[:klass].constantize.find_by(id: params[:element_id]) unless revision.nil?
+          error!('Revision is invalid.', 404) if revision.nil?
+          error!('Can not delete the active revision.', 405) if revision.uuid == element.uuid
+          revision&.destroy!
+          status 201
+        end
+      end
+
+      namespace :segment_revisions do
+        desc 'list Generic Element Revisions'
+        params do
+          optional :id, type: Integer, desc: 'Generic Element Id'
+        end
+        get do
+          klass = Segment.find(params[:id])
+          list = klass.segments_revisions unless klass.nil?
+          present list&.sort_by(&:created_at).reverse, with: Entities::SegmentRevisionEntity, root: 'revisions'
+        end
+      end
+
+      namespace :upload_generics_files do
+        desc 'upload generic files'
+        params do
+          requires :att_id, type: Integer, desc: 'Element Id'
+          requires :att_type, type: String, desc: 'Element Type'
+        end
+
+        after_validation do
+          el = params[:att_type].constantize.find_by(id: params[:att_id])
+          error!('401 Unauthorized', 401) if el.nil?
+
+          policy_updatable = ElementPolicy.new(current_user, el).update?
+          error!('401 Unauthorized', 401) unless policy_updatable
+        end
+        post do
+          attach_ary = []
+          att_ary = create_uploads('Element', params[:att_id], params[:elfiles], params[:elInfo], current_user.id) if params[:elfiles].present? && params[:elInfo].present?
+          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          att_ary = create_uploads('Segment', params[:att_id], params[:sefiles], params[:seInfo], current_user.id) if params[:sefiles].present? && params[:seInfo].present?
+          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          att_ary = create_attachments(params[:attfiles], params[:delfiles], params[:att_type], params[:att_id], current_user.id) if params[:attfiles].present? || params[:delfiles].present?
+          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          TransferThumbnailToPublicJob.set(queue: "transfer_thumbnail_to_public_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
+          TransferFileFromTmpJob.set(queue: "transfer_file_from_tmp_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
+          true
+        end
+      end
+
+      namespace :klasses_all do
+        desc 'get all klasses for admin function'
+        get do
+          list = ElementKlass.all.sort_by { |e| e.place }
+          present list, with: Entities::ElementKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :de_activate_klass do
+        desc 'activate or deactivate Generic Klass'
+        params do
+          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
+          requires :id, type: Integer, desc: 'Klass ID'
+          requires :is_active, type: Boolean, desc: 'Active or Inactive Klass'
+        end
+        after_validation do
+          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
+          @klz = fetch_klass(params[:klass], params[:id])
+        end
+        post do
+          @klz&.update!(is_active: params[:is_active])
+          generate_klass_file unless @klz.class.name != 'ElementKlass'
+
+          @klz
+        end
+      end
+
+      namespace :delete_klass do
+        desc 'delete Generic Klass'
+        params do
+          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
+          requires :id, type: Integer, desc: 'Klass ID'
+        end
+        delete ':id' do
+          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
+          klass = fetch_klass(params[:klass], params[:id])
+          klass&.destroy!
+          generate_klass_file unless klass.class.name != 'ElementKlass'
+          status 201
+        end
+      end
+
+      namespace :update_template do
+        desc 'update Generic Properties Template'
+        params do
+          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
+          requires :id, type: Integer, desc: 'Klass ID'
+          requires :properties_template, type: Hash
+          optional :is_release, type: Boolean, default: false
+        end
+        after_validation do
+          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
+          @klz = fetch_klass(params[:klass], params[:id])
+        end
+        post do
+          uuid = SecureRandom.uuid
+          properties = params[:properties_template]
+          properties['uuid'] = uuid
+          properties['eln'] = Chemotion::Application.config.version
+          properties['klass'] = @klz.class.name
+
+          @klz.properties_template = properties
+          @klz.save!
+          @klz.reload
+          @klz.create_klasses_revision(current_user.id) if params[:is_release] == true
+          @klz
+        end
+      end
+
+      desc 'Return serialized elements of current user'
+      params do
+        optional :collection_id, type: Integer, desc: 'Collection id'
+        optional :sync_collection_id, type: Integer, desc: 'SyncCollectionsUser id'
+        optional :el_type, type: String, desc: 'element klass name'
+        optional :from_date, type: Integer, desc: 'created_date from in ms'
+        optional :to_date, type: Integer, desc: 'created_date to in ms'
+        optional :filter_created_at, type: Boolean, desc: 'filter by created at or updated at'
+      end
+      paginate per_page: 7, offset: 0, max_per_page: 100
+      get do
+        scope = if params[:collection_id]
+                  begin
+                    collection_id = Collection.belongs_to_or_shared_by(current_user.id, current_user.group_ids).find(params[:collection_id])&.id
+                    Element.joins(:element_klass, :collections_elements).where('element_klasses.name = ? and collections_elements.collection_id = ?', params[:el_type], collection_id)
+                  rescue ActiveRecord::RecordNotFound
+                    Element.none
+                  end
+                elsif params[:sync_collection_id]
+                  begin
+                    collection_id = current_user.all_sync_in_collections_users.find(params[:sync_collection_id]).collection&.id
+                    Element.joins(:element_klass, :collections_elements).where('element_klasses.name = ? and collections_elements.collection_id = (?)', params[:el_type], collection_id)
+                  rescue ActiveRecord::RecordNotFound
+                    Element.none
+                  end
+                else
+                  Element.none
+                end.includes(:tag, collections: :sync_collections_users).order('created_at DESC')
+
+        from = params[:from_date]
+        to = params[:to_date]
+        by_created_at = params[:filter_created_at] || false
+        scope = scope.created_time_from(Time.at(from)) if from && by_created_at
+        scope = scope.created_time_to(Time.at(to) + 1.day) if to && by_created_at
+        scope = scope.updated_time_from(Time.at(from)) if from && !by_created_at
+        scope = scope.updated_time_to(Time.at(to) + 1.day) if to && !by_created_at
+
+        reset_pagination_page(scope)
+
+        paginate(scope).map { |s| ElementListPermissionProxy.new(current_user, s, user_ids).serialized }
+      end
+
+      desc 'Return serialized element by id'
+      params do
+        requires :id, type: Integer, desc: 'Element id'
+      end
+      route_param :id do
+        before do
+          error!('401 Unauthorized', 401) unless current_user.matrix_check_by_name('genericElement') && ElementPolicy.new(current_user, Element.find(params[:id])).read?
+        end
+
+        get do
+          element = Element.find(params[:id])
+          {
+            element: ElementPermissionProxy.new(current_user, element, user_ids).serialized,
+            attachments: Entities::AttachmentEntity.represent(element.attachments)
+          }
+        end
+      end
+
+      desc 'Create a element'
+      params do
+        requires :element_klass, type: Hash
+        requires :name, type: String
+        optional :properties, type: Hash
+        optional :properties_release, type: Hash
+        optional :collection_id, type: Integer
+        requires :container, type: Hash
+        optional :segments, type: Array, desc: 'Segments'
+      end
+      post do
+        klass = params[:element_klass] || {}
+        uuid = SecureRandom.uuid
+        params[:properties]['uuid'] = uuid
+        params[:properties]['klass_uuid'] = klass[:uuid]
+        params[:properties]['eln'] = Chemotion::Application.config.version
+        params[:properties]['klass'] = 'Element'
+        properties = params[:properties]
+        properties.delete('flow') unless properties['flow'].nil?
+        properties.delete('select_options') unless properties['select_options'].nil?
+        attributes = {
+          name: params[:name],
+          element_klass_id: klass[:id],
+          uuid: uuid,
+          klass_uuid: klass[:uuid],
+          properties: properties,
+          properties_release: params[:properties_release],
+          created_by: current_user.id
+        }
+        element = Element.new(attributes)
+
+        if params[:collection_id]
+          collection = current_user.collections.find(params[:collection_id])
+          element.collections << collection
+        end
+
+        all_coll = Collection.get_all_collection_for_user(current_user.id)
+        element.collections << all_coll
+        element.save!
+
+        element.properties = update_sample_association(element, params[:properties], current_user)
+        element.container = update_datamodel(params[:container])
+        element.save!
+        element.save_segments(segments: params[:segments], current_user_id: current_user.id)
+        element
+      end
+
+      desc 'Update element by id'
+      params do
+        requires :id, type: Integer, desc: 'element id'
+        optional :name, type: String
+        requires :properties, type: Hash
+        optional :properties_release, type: Hash
+        requires :container, type: Hash
+        optional :segments, type: Array, desc: 'Segments'
+      end
+      route_param :id do
+        before do
+          error!('401 Unauthorized', 401) unless ElementPolicy.new(current_user, Element.find(params[:id])).update?
+        end
+
+        put do
+          element = Element.find(params[:id])
+
+          update_datamodel(params[:container])
+          properties = update_sample_association(element, params[:properties], current_user)
+          params.delete(:container)
+          params.delete(:properties)
+
+          attributes = declared(params.except(:segments), include_missing: false)
+          properties['eln'] = Chemotion::Application.config.version if properties['eln'] != Chemotion::Application.config.version
+          if element.klass_uuid != properties['klass_uuid'] || element.properties != properties || element.name != params[:name]
+            properties['klass'] = 'Element'
+            uuid = SecureRandom.uuid
+            properties['uuid'] = uuid
+
+            properties.delete('flow') unless properties['flow'].nil?
+            properties.delete('select_options') unless properties['select_options'].nil?
+
+            attributes['properties'] = properties
+            attributes['properties']['uuid'] = uuid
+            attributes['uuid'] = uuid
+            attributes['klass_uuid'] = properties['klass_uuid']
+
+            element.update(attributes)
+          end
+          element.save_segments(segments: params[:segments], current_user_id: current_user.id)
+          {
+            element: ElementPermissionProxy.new(current_user, element, user_ids).serialized,
+            attachments: Entities::AttachmentEntity.represent(element.attachments)
+          }
+        end
+      end
+    end
+  end
+end
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 4e8bc5893..0bac2957b 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -904,7 +904,7 @@ def query_embargo(name)
         pub_coll = Collection.public_collection
         if current_user
           coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
-          { id: coll.id, is_sync_to_me: true  }
+          { id: coll&.id, is_sync_to_me: true  }
         else
           { id: nil }
         end
@@ -974,20 +974,22 @@ def query_embargo(name)
       end
 
       resource :molecules do
-        desc "Return PUBLIC serialized molecules"
+        desc 'Return PUBLIC serialized molecules'
         params do
-          optional :page, type: Integer, desc: "page"
-          optional :pages, type: Integer, desc: "pages"
-          optional :per_page, type: Integer, desc: "per page"
+          optional :page, type: Integer, desc: 'page'
+          optional :pages, type: Integer, desc: 'pages'
+          optional :per_page, type: Integer, desc: 'per page'
           optional :adv_flag, type: Boolean, desc: 'advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+          optional :req_xvial, type: Boolean, default: false, desc: 'xvial is required or not'
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: MoleculeGuestListSerializer do
+        get '/' do
           public_collection_id = Collection.public_collection_id
           params[:adv_val]
           adv_search = ' '
+          req_xvial = params[:req_xvial]
           if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
             case params[:adv_type]
             when 'Authors'
@@ -1000,11 +1002,17 @@ def query_embargo(name)
                 INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' css.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_samples css on css.sample_id = samples.id and css.deleted_at ISNULL
+                and #{param_sql}
+              SQL
             end
           end
           sample_join = <<~SQL
             INNER JOIN (
-              SELECT molecule_id, published_at max_published_at, sample_svg_file
+              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
               FROM (
               SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
               FROM samples, publications pub
@@ -1013,15 +1021,41 @@ def query_embargo(name)
                 SELECT samples.id FROM samples
                 INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
                 #{adv_search}
+                #{join_xvial_sql(req_xvial)}
               )) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
 
-          paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(
-            <<~SQL
-              molecules.*, sample_svg_file
-            SQL
-          ))
+          embargo_sql = <<~SQL
+            molecules.*, sample_svg_file, sid,
+            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
+              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
+              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
+            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
+            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
+            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
+          SQL
+
+          list = paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql))
+
+          entities = Entities::MoleculePublicationListEntity.represent(list, serializable: true)
+          sids = entities.map { |e| e[:sid] }
+
+          com_config = Rails.configuration.compound_opendata
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+          SQL
+          x_cnt_ids = req_xvial ? sids.uniq : (Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || [])
+          xvial_com_sql = get_xvial_sql(req_xvial)
+          x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
+            obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], req_xvial)
+          end
+          entities
         end
       end
 
@@ -1032,13 +1066,12 @@ def query_embargo(name)
           optional :pages, type: Integer, desc: 'pages'
           optional :per_page, type: Integer, desc: 'per page'
           optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
           optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: ReactionGuestListSerializer do
-
+        get '/' do
           if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
             case params[:adv_type]
             when 'Authors'
@@ -1047,23 +1080,59 @@ def query_embargo(name)
                 and author_id in ('#{params[:adv_val].join("','")}')
               SQL
             when 'Ontologies'
-              str_term_id = params[:adv_val].split(',').map { |val| val}.to_s
               adv_search = <<~SQL
                 INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' cr.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_reactions cr on cr.reaction_id = reactions.id and cr.deleted_at is null
+                and #{param_sql}
+              SQL
             else
               adv_search = ' '
             end
           else
             adv_search = ' '
           end
+          com_config = Rails.configuration.compound_opendata
+          embargo_sql = <<~SQL
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
+            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id and cr.deleted_at is null
+            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
+            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
+          SQL
 
           if params[:scheme_only]
-            paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
           else
-            paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
           end
+
+          entities = Entities::ReactionPublicationListEntity.represent(list, serializable: true)
+
+          ids = entities.map { |e| e[:id] }
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+          SQL
+          x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+            inner join molecules m on m.id = s.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:id])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
+          end
+
+          entities
         end
       end
 
@@ -1119,7 +1188,7 @@ def query_embargo(name)
           sample = dataset.root.containable
           cids = sample.collections.pluck :id
           if cids.include?(Collection.public_collection_id)
-            molecule = sample.molecule
+            molecule = sample.molecule if sample.class.name == 'Sample'
 
             ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
             ds_json[:dataset_doi] = dataset.full_doi
@@ -1127,15 +1196,15 @@ def query_embargo(name)
 
             res = {
               dataset: ds_json,
-              sample_svg_file: sample.sample_svg_file,
+              sample_svg_file: sample.class.name == 'Sample' ? sample.sample_svg_file : sample.reaction_svg_file,
               molecule: {
-                sum_formular: molecule.sum_formular,
-                molecular_weight: molecule.molecular_weight,
-                cano_smiles: molecule.cano_smiles,
-                inchistring: molecule.inchistring,
-                inchikey: molecule.inchikey,
-                molecule_svg_file: molecule.molecule_svg_file,
-                pubchem_cid: molecule.tag.taggable_data["pubchem_cid"]
+                sum_formular: molecule&.sum_formular,
+                molecular_weight: molecule&.molecular_weight,
+                cano_smiles: molecule&.cano_smiles,
+                inchistring: molecule&.inchistring,
+                inchikey: molecule&.inchikey,
+                molecule_svg_file: molecule&.molecule_svg_file,
+                pubchem_cid: molecule&.tag&.taggable_data && molecule&.tag&.taggable_data["pubchem_cid"]
               },
               license: dataset.tag.taggable_data["publication"]["license"] || 'CC BY-SA',
               publication: {
@@ -1154,6 +1223,83 @@ def query_embargo(name)
         end
       end
 
+      resource :embargo do
+        helpers RepositoryHelpers
+        desc "Return PUBLISHED serialized collection"
+        params do
+          requires :id, type: Integer, desc: "collection id"
+        end
+        get do
+          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
+          { col: pub }
+        end
+      end
+
+
+      resource :col_list do
+        helpers RepositoryHelpers
+        after_validation do
+          @embargo_collection = Collection.find(params[:collection_id])
+          @pub = @embargo_collection.publication
+          error!('401 Unauthorized', 401) if @pub.nil?
+
+          if @pub.state != 'completed'
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || @pub.published_by == current_user.id || current_user.type == 'Anonymous')
+          end
+        end
+        get do
+          anasql = <<~SQL
+            publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
+          SQL
+          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
+          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
+          list = sample_list + reaction_list
+          elements = []
+          list.each do |e|
+            element_type = e.element&.class&.name
+            u = User.find(e.published_by) unless e.published_by.nil?
+            svg_file = e.element.sample_svg_file if element_type == 'Sample'
+            title = e.element.short_label if element_type == 'Sample'
+
+            svg_file = e.element.reaction_svg_file if element_type == 'Reaction'
+            title = e.element.short_label if element_type == 'Reaction'
+
+            scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
+            elements.push(
+              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
+              published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
+            )
+          end
+          { elements: elements, embargo: @pub, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
+        end
+      end
+
+      resource :col_element do
+        helpers RepositoryHelpers
+        params do
+          requires :collection_id, type: Integer, desc: "collection id"
+          requires :el_id, type: Integer, desc: "element id"
+        end
+        after_validation do
+          @embargo_collection = Collection.find(params[:collection_id])
+          pub = @embargo_collection.publication
+          error!('401 Unauthorized', 401) if pub.nil?
+
+          if pub.state != 'completed'
+            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id)
+          end
+
+        end
+        get do
+          if params[:el_type] == 'Reaction'
+            return get_pub_reaction(params[:el_id])
+          elsif params[:el_type] == 'Sample'
+            sample = Sample.find(params[:el_id])
+            return get_pub_molecule(sample.molecule_id)
+          end
+        end
+      end
+
       resource :reaction do
         helpers RepositoryHelpers
         desc "Return PUBLISHED serialized reaction"
@@ -1164,126 +1310,144 @@ def query_embargo(name)
           r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
           return nil unless r.present?
 
-          reaction = Reaction.where('id = ?', params[:id])
-          .select(
-            <<~SQL
-            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
-            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
-            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
-            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
-            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
-            reactions.duration
-            SQL
-          )
-          .includes(
-                container: :attachments
-          ).last
-          literatures = get_literature(params[:id],'Reaction') || []
-          reaction.products.each do |p|
-            literatures += get_literature(p.id,'Sample')
-          end
-          schemeList = get_reaction_table(params[:id])
-          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
-          entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
-          entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
-          entities[:isLogin] = current_user.present?
-          entities
+          return get_pub_reaction(params[:id])
         end
       end
 
       resource :molecule do
-        desc "Return serialized molecule with list of PUBLISHED dataset"
+        helpers RepositoryHelpers
+        desc 'Return serialized molecule with list of PUBLISHED dataset'
         params do
-          requires :id, type: Integer, desc: "Molecule id"
-          optional :adv_flag, type: Boolean, desc: "advanced search flag"
-          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies]
+          requires :id, type: Integer, desc: 'Molecule id'
+          optional :adv_flag, type: Boolean, desc: 'advanced search flag'
+          optional :adv_type, type: String, desc: 'advanced search type', allow_blank: true, values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         get do
-          molecule = Molecule.find(params[:id])
-          pub_id = Collection.public_collection_id
-          if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
-            adv = <<~SQL
-              INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
-              and rs.author_id in ('#{params[:adv_val].join("','")}')
-            SQL
-          else
-            adv = ''
-          end
+          get_pub_molecule(params[:id], params[:adv_flag], params[:adv_type], params[:adv_val])
+        end
+      end
 
-          pub_samples = Collection.public_collection.samples
-            .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
-            .where(
-              <<~SQL
-                samples.id in (
-                  SELECT samples.id FROM samples
-                  INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-                  INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                  #{adv}
-                )
-              SQL
-            )
-            .select(
-              <<~SQL
-              samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
-              SQL
-            )
-            .order('published_at desc')
-          published_samples = pub_samples.map do |s|
-            containers = Entities::ContainerEntity.represent(s.container)
-            tag = s.tag.taggable_data['publication']
-            #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
-            #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
-            #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
-            #aff = u.affiliations.first
-            next unless tag
-            literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
-              .joins("inner join users on literals.user_id = users.id")
-              .select(
-                <<~SQL
-                literatures.*,
-                json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
-                SQL
-              ).group('literatures.id').as_json
-            reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
-            pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
-            sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
-
-            tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file,
-              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, showed_name: s.showed_name, pub_id: pub.id)
+      resource :download do
+        desc 'download publication file'
+        params do
+          requires :id, type: Integer, desc: 'Id'
+        end
+        resource :attachment do
+          desc 'download publication attachment'
+          after_validation do
+            @attachment = Attachment.find_by(id: params[:id])
+            error!('404 Attachment not found', 404) unless @attachment
+            @publication = @attachment&.container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
+          end
+          get do
+            content_type 'application/octet-stream'
+            header['Content-Disposition'] = "attachment; filename=#{@attachment.filename}"
+            env['api.format'] = :binary
+            @attachment.read_file
+          end
+        end
+        resource :dataset do
+          desc 'download publication dataset as zip'
+          after_validation do
+            @container = Container.find_by(id: params[:id])
+            error!('404 Dataset not found', 404) unless @container
+            @publication = @container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
           end
-          published_samples = published_samples.flatten.compact
+          get do
+            content_type 'application/zip, application/octet-stream'
+            filename = URI.escape("#{@container.parent&.name.gsub(/\s+/, '_')}-#{@container.name.gsub(/\s+/, '_')}.zip")
+            header['Content-Disposition'] = "attachment; filename=#{filename}"
+            env['api.format'] = :binary
+            zip_f = Zip::OutputStream.write_buffer do |zip|
+              @container.attachments.each do |att|
+                zip.put_next_entry att.filename
+                zip.write att.read_file
+              end
+              zip.put_next_entry 'dataset_description.txt'
+              zip.write <<~DESC
+                dataset name: #{@container.name}
+                instrument: #{@container.extended_metadata.fetch('instrument', nil)}
+                description:
+                #{@container.description}
 
-          {
-            molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
-            published_samples: published_samples,
-            isLogin: current_user.nil? ? false : true
-          }
+                Files:
+              DESC
+              @container.attachments.each do |att|
+                zip.write "#{att.filename} #{att.checksum}\n"
+              end
+            end
+            zip_f.rewind
+            zip_f.read
+          end
         end
       end
 
       resource :metadata do
+        desc "batch download metadata"
+        params do
+          requires :type, type: String, desc: 'Type', values: %w[Sample Reaction Container Collection]
+          requires :offset, type: Integer, desc: 'Offset', default: 0
+          requires :limit, type: Integer, desc: 'Limit', default: 100
+          optional :date_from, type: String, desc: 'Published date from'
+          optional :date_to, type: String, desc: 'Published date to'
+        end
+        get :publications do
+          service_url = Rails.env.production? ? 'https://www.chemotion-repository.net' : 'http://localhost:3000'
+          api_url = '/api/v1/public/metadata/download_json?inchikey='
+
+          result = declared(params, include_missing: false)
+          list = []
+          limit = params[:limit] - params[:offset] > 1000 ? params[:offset] + 1000 : params[:limit]
+          scope = Publication.where(element_type: params[:type])
+          scope = scope.where('published_at >= ?', params[:date_from]) if params[:date_from].present?
+          scope = scope.where('published_at <= ?', params[:date_to]) if params[:date_to].present?
+          publications = scope.order(:published_at).offset(params[:offset]).limit(limit)
+          publications.map do |publication|
+            inchikey = publication&.doi&.suffix
+            list.push("#{service_url}#{api_url}#{inchikey}") if inchikey.present?
+          end
+          result[:publications] = list
+          result[:limit] = limit
+          result
+        end
+
         desc "metadata of publication"
         params do
-          requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction container]
+          optional :id, type: Integer, desc: "Id"
+          optional :type, type: String, desc: "Type", values: %w[sample reaction container collection]
+          optional :inchikey, type: String, desc: "inchikey"
         end
         after_validation do
-          @publication = Publication.find_by(
-            element_type: params['type'].classify,
-            element_id: params['id']
-          )
-          error!('404 Publication not found', 404) unless @publication && @publication.state.include?("completed")
+          @type = params['type']&.classify
+          @publication = Publication.find_by(element_type: @type, element_id: params['id'], state: 'completed') if params['id'].present?
+          if params['inchikey'].present? && @publication.nil?
+            doi = Doi.find_by(suffix: params['inchikey'])
+            @publication = Publication.find_by(doi_id: doi.id, state: 'completed') if doi.present?
+            @type = @publication&.element_type
+          end
+          @type = @type == "Container" ? "Analysis" : @type
+          error!('404 Publication not found', 404) unless @publication.present?
         end
         desc "Download metadata_xml"
         get :download do
-          el_type = params['type'] == "container" ? "analysis" : params['type']
-          filename = URI.escape("metadata_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
+          filename = URI.escape("metadata_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
           content_type('application/octet-stream')
           header['Content-Disposition'] = "attachment; filename=" + filename
           env['api.format'] = :binary
           @publication.metadata_xml
         end
+
+        desc "Download JSON-Link Data"
+        get :download_json do
+          filename = URI.escape("JSON-LD_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.json")
+          content_type('application/json')
+          header['Content-Disposition'] = "attachment; filename=" + filename
+          env['api.format'] = :binary
+          @publication.json_ld
+        end
       end
 
       resource :published_statics do
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 54062d4b4..267dae3fb 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -1303,7 +1303,6 @@ def remove_embargo_collection(col)
                 else 'development'
                 end
 
-
                 { message: "Embargo #{@embargo_collection.label} has been released" }
               end
             end
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index b09035ba6..a0045feef 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -217,7 +217,6 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
           ttl_mol = Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql)
           slist = paginate(ttl_mol)
           sentities = Entities::MoleculePublicationListEntity.represent(slist, serializable: true)
-
           ssids = sentities.map { |e| e[:sid] }
 
           xvial_count_ssql = <<~SQL
diff --git a/app/api/chemotion/segment_api.rb b/app/api/chemotion/segment_api.rb
new file mode 100644
index 000000000..aa1f8b953
--- /dev/null
+++ b/app/api/chemotion/segment_api.rb
@@ -0,0 +1,99 @@
+module Chemotion
+  class SegmentAPI < Grape::API
+    include Grape::Kaminari
+    helpers GenericHelpers
+
+    resource :segments do
+      namespace :klasses do
+        desc "get segment klasses"
+        params do
+          optional :element, type: String, desc: "Klass Element, e.g. Sample, Reaction, Mof,..."
+        end
+        get do
+          list = SegmentKlass.joins(:element_klass).where(klass_element: params[:element], is_active: true) if params[:element].present?
+          list = SegmentKlass.joins(:element_klass).where(is_active: true) unless params[:element].present?
+          present list.sort_by(&:place), with: Entities::SegmentKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :list_segment_klass do
+        desc 'list Generic Segment Klass'
+        params do
+          optional :is_active, type: Boolean, desc: 'Active or Inactive Segment'
+        end
+        get do
+          list = SegmentKlass.where(is_active: params[:is_active]) if params[:is_active].present?
+          list = SegmentKlass.all unless params[:is_active].present?
+          present list.sort_by(&:place), with: Entities::SegmentKlassEntity, root: 'klass'
+        end
+      end
+
+      namespace :create_segment_klass do
+        desc 'create Generic Segment Klass'
+        params do
+          requires :label, type: String, desc: 'Segment Klass Label'
+          requires :element_klass, type: Integer, desc: 'Element Klass Id'
+          optional :desc, type: String, desc: 'Segment Klass Desc'
+          optional :place, type: String, desc: 'Segment Klass Place', default: '100'
+          optional :properties_template, type: Hash, desc: 'Element Klass properties template'
+        end
+        after_validation do
+          authenticate_admin!('segments')
+          @klass = fetch_klass('ElementKlass', params[:element_klass])
+        end
+        post do
+          place = params[:place]
+          begin
+            place = place.to_i if place.present? && place.to_i == place.to_f
+          rescue StandardError
+            place = 100
+          end
+
+          uuid = SecureRandom.uuid
+          template = { uuid: uuid, layers: {}, select_options: {} }
+          attributes = declared(params, include_missing: false)
+          attributes[:properties_template]['uuid'] = uuid if attributes[:properties_template].present?
+          template = attributes[:properties_template].present? ? attributes[:properties_template] : template
+          template['eln'] = Chemotion::Application.config.version
+          template['klass'] = 'SegmentKlass'
+          attributes.merge!(properties_template: template, element_klass: @klass, created_by: current_user.id, place: place)
+          attributes[:uuid] = uuid
+          attributes[:released_at] = DateTime.now
+          attributes[:properties_release] = attributes[:properties_template]
+          klass = SegmentKlass.create!(attributes)
+          klass.reload
+          klass.create_klasses_revision(current_user.id)
+        rescue ActiveRecord::RecordInvalid => e
+          { error: e.message }
+        end
+      end
+
+      namespace :update_segment_klass do
+        desc 'update Generic Segment Klass'
+        params do
+          requires :id, type: Integer, desc: 'Segment Klass ID'
+          optional :label, type: String, desc: 'Segment Klass Label'
+          optional :desc, type: String, desc: 'Segment Klass Desc'
+          optional :place, type: String, desc: 'Segment Klass Place', default: '100'
+          optional :identifier, type: String, desc: 'Segment Identifier'
+        end
+        after_validation do
+          authenticate_admin!('segments')
+          @segment = fetch_klass('SegmentKlass', params[:id])
+        end
+        post do
+          place = params[:place]
+          begin
+            place = place.to_i if place.present? && place.to_i == place.to_f
+          rescue StandardError
+            place = 100
+          end
+          attributes = declared(params, include_missing: false)
+          attributes.delete(:id)
+          attributes[:place] = place
+          @segment&.update!(attributes)
+        end
+      end
+    end
+  end
+end
diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index ff918c45f..8e27a0c38 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -41,6 +41,24 @@ class SyncCollectionAPI < Grape::API
         end
       end
 
+      namespace :publication do
+        desc "Return the 'All' collection of the current user"
+        get do
+          current_user.sync_published_collection
+        end
+      end
+
+      namespace :review do
+        desc "Return the 'All' collection of the current user"
+        get do
+          if User.reviewer_ids.include?(current_user.id)
+            current_user.sync_element_to_review_collection
+          else
+            current_user.sync_reviewing_collection
+          end
+        end
+      end
+
       namespace :take_ownership do
         desc 'Take ownership of collection with specified sync_collections_user id'
         params do
diff --git a/app/api/entities/dataset_entity.rb b/app/api/entities/dataset_entity.rb
new file mode 100644
index 000000000..4abc61897
--- /dev/null
+++ b/app/api/entities/dataset_entity.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  # Dataset entity
+  class DatasetEntity < Grape::Entity
+    expose :id, :dataset_klass_id, :properties, :element_id, :element_type, :klass_ols, :klass_label
+    def klass_ols
+      object&.dataset_klass&.ols_term_id
+    end
+    def klass_label
+      object&.dataset_klass&.label
+    end
+  end
+end
diff --git a/app/api/entities/dataset_klass_entity.rb b/app/api/entities/dataset_klass_entity.rb
new file mode 100644
index 000000000..8cf2b1768
--- /dev/null
+++ b/app/api/entities/dataset_klass_entity.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Entities
+  # DatasetKlassEntity
+  class DatasetKlassEntity < Grape::Entity
+    expose :id, :uuid, :ols_term_id, :label, :desc, :properties_template, :properties_release, :is_active, :place, :released_at
+    def released_at
+      object.released_at&.strftime('%d.%m.%Y, %H:%M')
+    end
+  end
+end
diff --git a/app/api/entities/device_entity.rb b/app/api/entities/device_entity.rb
index edc14a08a..cdf8fe102 100644
--- a/app/api/entities/device_entity.rb
+++ b/app/api/entities/device_entity.rb
@@ -6,7 +6,6 @@ class DeviceEntity < Grape::Entity
     expose :name, documentation: { type: "String", desc: "device name" }
     expose :data, :name_abbreviation, :type
     expose :device_metadata, using: Entities::DeviceMetadataEntity
-
     def data
       if object.respond_to? :profile
         object.profile.data  if object.profile.respond_to? :data
diff --git a/app/api/entities/element_klass_entity.rb b/app/api/entities/element_klass_entity.rb
new file mode 100644
index 000000000..c5a0712a2
--- /dev/null
+++ b/app/api/entities/element_klass_entity.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Entities
+  # ElementKlassEntity
+  class ElementKlassEntity < Grape::Entity
+    expose :id, :uuid, :name, :label, :desc, :icon_name, :properties_release, :properties_template, :is_active, :klass_prefix, :is_generic, :place, :released_at
+    def released_at
+      object.released_at&.strftime('%d.%m.%Y, %H:%M')
+    end
+  end
+end
diff --git a/app/api/entities/element_revision_entity.rb b/app/api/entities/element_revision_entity.rb
new file mode 100644
index 000000000..0250131e5
--- /dev/null
+++ b/app/api/entities/element_revision_entity.rb
@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Entities
+  # ElementRevisionEntity
+  class ElementRevisionEntity < Grape::Entity
+    expose :id, :element_id, :uuid, :name, :klass_uuid, :properties, :created_at
+    def created_at
+      object.created_at.strftime('%d.%m.%Y, %H:%M')
+    end
+
+    def properties
+      object.properties['layers']&.keys.each do |key|
+        field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
+        field_sample_molecules.each do |field|
+          idx = object.properties['layers'][key]['fields'].index(field)
+          sid = field.dig('value', 'el_id')
+          next unless sid.present?
+
+          el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
+          next unless el.present?
+          next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
+
+          object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
+          object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
+          object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
+        end
+
+        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+        field_tables.each do |field|
+          next unless field['sub_values'].present? && field['sub_fields'].present?
+
+          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+          next unless field_table_molecules.present?
+
+          col_ids = field_table_molecules.map { |x| x.values[0] }
+          col_ids.each do |col_id|
+            field_table_values = field['sub_values'].each do |sub_value|
+              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
+              next unless find_mol.present?
+
+              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
+              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
+              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
+              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
+              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
+            end
+          end
+        end
+      end
+      object.properties
+    end
+  end
+end
diff --git a/app/api/entities/generic_entity.rb b/app/api/entities/generic_entity.rb
new file mode 100644
index 000000000..4d7193e20
--- /dev/null
+++ b/app/api/entities/generic_entity.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class GenericEntity < Grape::Entity
+    expose :id, :is_active, :label, :desc, :place, :released_at
+
+    expose :element_klass_id do |obj|
+      obj[:element_klass_id] || 0
+    end
+
+    expose :klass_name do |obj|
+      obj[:name] || ''
+    end
+
+    expose :ols_term_id do |obj|
+      obj[:ols_term_id] || ''
+    end
+
+    expose :icon_name do |obj|
+      obj[:icon_name] || ''
+    end
+
+    expose :klass_prefix do |obj|
+      obj[:klass_prefix] || ''
+    end
+
+    expose :is_generic do |obj|
+      obj[:is_generic] || true
+    end
+
+    expose :uuid do |obj|
+      obj[:uuid] || ''
+    end
+
+    expose :properties_release do |obj|
+      obj[:properties_release] || {}
+    end
+
+    expose :element_klass do |obj|
+      if obj[:element_klass_id]
+        Entities::GenericEntity.represent(obj.element_klass)
+      else
+        {}
+      end
+    end
+
+    expose :identifier do |obj|
+      obj[:identifier] || ''
+    end
+  end
+end
diff --git a/app/api/entities/generic_public_entity.rb b/app/api/entities/generic_public_entity.rb
new file mode 100644
index 000000000..d2bde0e2c
--- /dev/null
+++ b/app/api/entities/generic_public_entity.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  class GenericPublicEntity < GenericEntity
+    unexpose :id
+    unexpose :is_active
+    unexpose :place
+    unexpose :element_klass_id
+    unexpose :ols_term_id
+    unexpose :is_generic
+    unexpose :uuid
+    unexpose :properties_release
+    unexpose :element_klass
+  end
+end
diff --git a/app/api/entities/klass_revision_entity.rb b/app/api/entities/klass_revision_entity.rb
new file mode 100644
index 000000000..8024b651b
--- /dev/null
+++ b/app/api/entities/klass_revision_entity.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Entities
+  # KlassRevisionEntity
+  class KlassRevisionEntity < Grape::Entity
+    expose :id, :uuid, :properties_release, :released_at
+
+    expose :klass_id do |object|
+      klass_id = object.element_klass_id if object.respond_to? :element_klass_id
+      klass_id = object.segment_klass_id if object.respond_to? :segment_klass_id
+      klass_id = object.dataset_klass_id if object.respond_to? :dataset_klass_id
+      klass_id
+    end
+
+    def released_at
+      object.released_at&.strftime('%d.%m.%Y, %H:%M')
+    end
+  end
+end
+
diff --git a/app/api/entities/segment_entity.rb b/app/api/entities/segment_entity.rb
new file mode 100644
index 000000000..952a22ce5
--- /dev/null
+++ b/app/api/entities/segment_entity.rb
@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+# Entity module
+module Entities
+  # Segment entity
+  class SegmentEntity < Grape::Entity
+    expose :id, :segment_klass_id, :element_type, :element_id, :properties, :uuid, :klass_uuid, :klass_label
+
+    def klass_label
+      object.segment_klass.label
+    end
+
+    def properties
+      return unless object.respond_to? :properties
+
+      return unless object&.properties.dig('layers').present?
+
+      object&.properties['layers'].keys.each do |key|
+        next unless object&.properties.dig('layers', key, 'fields').present?
+
+        field_sample_molecules = object&.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_molecule' }
+        field_sample_molecules.each do |field|
+          idx = object&.properties['layers'][key]['fields'].index(field)
+          sid = field.dig('value', 'el_id')
+          next unless sid.present?
+
+          el = Molecule.find_by(id: sid)
+          next unless el.present?
+          next unless object&.properties.dig('layers', key, 'fields', idx, 'value').present?
+
+          object&.properties['layers'][key]['fields'][idx]['value']['el_svg'] = File.join('/images', 'molecules', el.molecule_svg_file)
+        end
+
+        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+        field_tables.each do |field|
+          next unless field['sub_values'].present? && field['sub_fields'].present?
+
+          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+          next unless field_table_molecules.present?
+
+          col_ids = field_table_molecules.map { |x| x.values[0] }
+          col_ids.each do |col_id|
+            field_table_values = field['sub_values'].each do |sub_value|
+              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
+              next unless find_mol.present?
+
+              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
+              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
+              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
+              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
+              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
+            end
+          end
+        end
+      end
+      object&.properties
+    end
+  end
+end
diff --git a/app/api/entities/segment_klass_entity.rb b/app/api/entities/segment_klass_entity.rb
new file mode 100644
index 000000000..e20da8f4a
--- /dev/null
+++ b/app/api/entities/segment_klass_entity.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Entities
+  # SegmentKlassEntity
+  class SegmentKlassEntity < Grape::Entity
+    expose :id, :uuid, :label, :desc, :properties_template, :properties_release, :is_active, :place, :released_at
+    expose :element_klass, using: Entities::ElementKlassEntity
+
+    def released_at
+      object.released_at&.strftime('%d.%m.%Y, %H:%M')
+    end
+  end
+end
diff --git a/app/api/entities/segment_revision_entity.rb b/app/api/entities/segment_revision_entity.rb
new file mode 100644
index 000000000..1f068a22a
--- /dev/null
+++ b/app/api/entities/segment_revision_entity.rb
@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Entities
+  class SegmentRevisionEntity < Grape::Entity
+    expose :id, :segment_id, :uuid, :klass_uuid, :properties, :created_at
+    def created_at
+      object.created_at.strftime('%d.%m.%Y, %H:%M')
+    end
+
+    def properties
+      object.properties['layers']&.keys.each do |key|
+        field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
+        field_sample_molecules.each do |field|
+          idx = object.properties['layers'][key]['fields'].index(field)
+          sid = field.dig('value', 'el_id')
+          next unless sid.present?
+
+          el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
+          next unless el.present?
+          next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
+
+          object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
+          object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
+          object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
+        end
+
+        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+        field_tables.each do |field|
+          next unless field['sub_values'].present? && field['sub_fields'].present?
+
+          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+          next unless field_table_molecules.present?
+
+          col_ids = field_table_molecules.map { |x| x.values[0] }
+          col_ids.each do |col_id|
+            field_table_values = field['sub_values'].each do |sub_value|
+              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
+              next unless find_mol.present?
+
+              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
+              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
+              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
+              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
+              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
+            end
+          end
+        end
+      end
+      object.properties
+    end
+  end
+end
diff --git a/app/api/helpers/generic_helpers.rb b/app/api/helpers/generic_helpers.rb
new file mode 100644
index 000000000..a0a3e237e
--- /dev/null
+++ b/app/api/helpers/generic_helpers.rb
@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+# Helper for associated sample
+module GenericHelpers
+  extend Grape::API::Helpers
+
+  def fetch_properties_uploads(properties)
+    uploads = []
+    properties['layers'].keys.each do |key|
+      layer = properties['layers'][key]
+      field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
+      field_uploads.each do |field|
+        (field['value'] && field['value']['files'] || []).each do |file|
+          uploads.push({ layer: key, field: field['field'], uid: file['uid'], filename: file['filename'] })
+        end
+      end
+    end
+    uploads
+  end
+
+  def update_properties_upload(element, properties, att, pa)
+    return if pa.nil?
+
+    idx = properties['layers'][pa[:layer]]['fields'].index { |fl| fl['field'] == pa[:field] }
+    fidx = properties['layers'][pa[:layer]]['fields'][idx]['value']['files'].index { |fi| fi['uid'] == pa[:uid] }
+    properties['layers'][pa[:layer]]['fields'][idx]['value']['files'][fidx]['aid'] = att.id
+    properties['layers'][pa[:layer]]['fields'][idx]['value']['files'][fidx]['uid'] = att.identifier
+    element.update_columns(properties: properties)
+  end
+
+  def create_uploads(type, id, files, param_info, user_id)
+    return if files.nil? || param_info.nil? || files.empty? || param_info.empty?
+
+    attach_ary = []
+    map_info = JSON.parse(param_info)
+    map_info&.keys&.each do |key|
+      next if map_info[key]['files'].empty?
+
+      if type == 'Segment'
+        element = Segment.find_by(element_id: id, segment_klass_id: key)
+      elsif type == 'Element'
+        element = Element.find_by(id: id)
+      end
+      next if element.nil?
+
+      uploads = fetch_properties_uploads(element.properties)
+
+      map_info[key]['files'].each do |fobj|
+        file = (files || []).select { |ff| ff['filename'] == fobj['uid'] }&.first
+        pa = uploads.select { |ss| ss[:uid] == file[:filename] }&.first || nil
+        if (tempfile = file[:tempfile])
+          a = Attachment.new(
+            bucket: file[:container_id],
+            filename: fobj['filename'],
+            file_path: file[:tempfile],
+            created_by: user_id,
+            created_for: user_id,
+            content_type: file[:type],
+            attachable_type: map_info[key]['type'],
+            attachable_id: element.id
+          )
+          begin
+            a.save!
+
+            update_properties_upload(element, element.properties, a, pa)
+            attach_ary.push(a.id)
+          ensure
+            tempfile.close
+            tempfile.unlink
+          end
+        end
+      end
+      element.send("#{type.downcase}s_revisions")&.last&.destroy!
+      element.save!
+    end
+    attach_ary
+  end
+
+  def create_attachments(files, del_files, type, id, user_id)
+    attach_ary = []
+    (files || []).each do |file|
+      if (tempfile = file[:tempfile])
+        a = Attachment.new(
+          bucket: file[:container_id],
+          filename: file[:filename],
+          file_path: file[:tempfile],
+          created_by: user_id,
+          created_for: user_id,
+          content_type: file[:type],
+          attachable_type: type,
+          attachable_id: id
+        )
+        begin
+          a.save!
+          attach_ary.push(a.id)
+        ensure
+          tempfile.close
+          tempfile.unlink
+        end
+      end
+    end
+    Attachment.where('id IN (?) AND attachable_type = (?)', del_files.map!(&:to_i), type).update_all(attachable_id: nil) unless (del_files || []).empty?
+    attach_ary
+  end
+end
diff --git a/app/api/helpers/sample_association_helpers.rb b/app/api/helpers/sample_association_helpers.rb
new file mode 100644
index 000000000..e96e62cc8
--- /dev/null
+++ b/app/api/helpers/sample_association_helpers.rb
@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+# Helper for associated sample
+module SampleAssociationHelpers
+  extend Grape::API::Helpers
+
+  def build_sample(sid, cols, current_user, cr_opt)
+    parent_sample = Sample.find(sid)
+
+    case cr_opt
+    when 0
+      subsample = parent_sample
+      collections = Collection.where(id: cols).where.not(id: subsample.collections.pluck(:id))
+      subsample.collections << collections unless collections.empty?
+    when 1
+      subsample = parent_sample.create_subsample(current_user, cols, true)
+    when 2
+      subsample = parent_sample.dup
+      subsample.parent = nil
+      collections = (Collection.where(id: cols) | Collection.where(user_id: current_user.id, label: 'All', is_locked: true))
+      subsample.collections << collections
+      subsample.container = Container.create_root_container
+    else
+      return nil
+    end
+
+    return nil if subsample.nil?
+
+    subsample.save!
+    subsample.reload
+    subsample
+  end
+
+  def build_table_sample(element, field_tables)
+    sds = []
+    field_tables.each do |field|
+      next unless field['sub_values'].present? && field['sub_fields'].present?
+
+      field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }
+      next unless field_table_samples.present?
+
+      col_ids = field_table_samples.map { |x| x.values[0] }
+      col_ids.each do |col_id|
+        field['sub_values'].each do |sub_value|
+          next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+          svalue = sub_value[col_id]['value']
+          sid = svalue['el_id']
+          next unless sid.present?
+
+          sds << sid unless svalue['is_new']
+          next unless svalue['is_new']
+
+          cr_opt = svalue['cr_opt']
+
+          subsample = build_sample(sid, element.collections, current_user, cr_opt) unless sid.nil? || cr_opt.nil?
+          next if subsample.nil?
+
+          sds << subsample.id
+          sub_value[col_id]['value']['el_id'] = subsample.id
+          sub_value[col_id]['value']['is_new'] = false
+          ElementsSample.find_or_create_by(element_id: element.id, sample_id: subsample.id)
+        end
+      end
+    end
+    sds
+  end
+
+  def update_sample_association(element, properties, current_user)
+    sds = []
+    properties['layers'].keys.each do |key|
+      layer = properties['layers'][key]
+      field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }
+      field_samples.each do |field|
+        idx = properties['layers'][key]['fields'].index(field)
+        sid = field.dig('value', 'el_id')
+        next if sid.blank?
+
+        sds << sid unless properties.dig('layers', key, 'fields', idx, 'value', 'is_new') == true
+        next unless properties.dig('layers', key, 'fields', idx, 'value', 'is_new') == true
+
+        cr_opt = field.dig('value', 'cr_opt')
+
+        subsample = build_sample(sid, element.collections, current_user, cr_opt) unless sid.nil? || cr_opt.nil?
+        next if subsample.nil?
+
+        sds << subsample.id
+        properties['layers'][key]['fields'][idx]['value']['el_id'] = subsample.id
+        properties['layers'][key]['fields'][idx]['value']['el_label'] = subsample.short_label
+        properties['layers'][key]['fields'][idx]['value']['el_tip'] = subsample.short_label
+        properties['layers'][key]['fields'][idx]['value']['is_new'] = false
+        ElementsSample.find_or_create_by(element_id: element.id, sample_id: subsample.id)
+      end
+      field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+      sds << build_table_sample(element, field_tables)
+    end
+    ElementsSample.where(element_id: element.id).where.not(sample_id: sds)&.destroy_all
+    properties
+  end
+end
diff --git a/app/assets/stylesheets/ag-theme-alpine.css b/app/assets/stylesheets/ag-theme-alpine.css
new file mode 120000
index 000000000..066e9dd59
--- /dev/null
+++ b/app/assets/stylesheets/ag-theme-alpine.css
@@ -0,0 +1 @@
+../../../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css
\ No newline at end of file
diff --git a/app/assets/stylesheets/collection_management.scss b/app/assets/stylesheets/collection_management.scss
index a0a315c28..517b2ad28 100644
--- a/app/assets/stylesheets/collection_management.scss
+++ b/app/assets/stylesheets/collection_management.scss
@@ -107,7 +107,7 @@
       background-color: #D3D3D3;
 
       .root-label{
-        background-color: #D3D3D3 
+        background-color: #D3D3D3
       }
     }
   }
diff --git a/app/assets/stylesheets/react-data-grid-addons.css b/app/assets/stylesheets/react-data-grid-addons.css
new file mode 120000
index 000000000..6efba985b
--- /dev/null
+++ b/app/assets/stylesheets/react-data-grid-addons.css
@@ -0,0 +1 @@
+../../../node_modules/react-data-grid-addons/dist/react-data-grid-addons.css
\ No newline at end of file
diff --git a/app/assets/stylesheets/react-data-grid.css b/app/assets/stylesheets/react-data-grid.css
new file mode 120000
index 000000000..5ccc0cdbc
--- /dev/null
+++ b/app/assets/stylesheets/react-data-grid.css
@@ -0,0 +1 @@
+../../../node_modules/react-data-grid/dist/react-data-grid.css
\ No newline at end of file
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 9208fe724..a0cc8060a 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -175,6 +175,30 @@ $bs-successcolor: #5cb85c;
   background-color: white;
 }
 
+.card-nfdi4chem {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  > h3 {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 0px 10px;
+  }
+  > h4 {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 0px 10px;
+  }
+}
+
+.card-latest {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+
 .card-well-competition {
   @extend .card-well;
   display: flex;
diff --git a/app/jobs/test_failure_job.rb b/app/jobs/test_failure_job.rb
new file mode 100644
index 000000000..51bead613
--- /dev/null
+++ b/app/jobs/test_failure_job.rb
@@ -0,0 +1,9 @@
+# for api test in spec/api/delayed_job_api_spec.rb
+class TestFailureJob < ActiveJob::Base
+  queue_as :test
+
+  def perform
+    puts 'failed ' + TestFailureJob.name
+    raise "error"
+  end
+end
diff --git a/app/models/chemscanner/molecule.rb b/app/models/chemscanner/molecule.rb
new file mode 100644
index 000000000..8086b7805
--- /dev/null
+++ b/app/models/chemscanner/molecule.rb
@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_molecules
+#
+#  id                :integer          not null, primary key
+#  scheme_id         :integer          not null
+#  external_id       :integer
+#  clone_from        :integer
+#  mdl               :string
+#  cano_smiles       :string
+#  label             :string
+#  abbreviation      :string
+#  description       :string
+#  aliases           :jsonb
+#  details           :jsonb
+#  extended_metadata :jsonb
+#  is_approved       :boolean          default(FALSE)
+#  imported_id       :integer
+#  created_at        :datetime         not null
+#  updated_at        :datetime         not null
+#  deleted_at        :datetime
+#  inchistring       :string
+#  inchikey          :string
+#
+
+module Chemscanner
+  # ChemScanner scanned molecule(s)
+  class Molecule < ApplicationRecord
+    acts_as_paranoid
+
+    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
+
+    has_many :reactions_molecules, dependent: :destroy
+    has_many :reactions_reactant_molecules, dependent: :destroy
+    has_many :reactions_reagent_molecules, dependent: :destroy
+    has_many :reactions_product_molecules, dependent: :destroy
+
+    has_many :reactions, through: :reactions_molecules
+    has_many :reactions_as_reactant, through: :reactions_reactant_molecules, source: :reaction
+    has_many :reactions_as_reagent, through: :reactions_reagnet_molecules, source: :reaction
+    has_many :reactions_as_product, through: :reactions_product_molecules, source: :reaction
+
+    # rubocop:disable AbcSize
+    def assign_from_chemscanner(molecule)
+      aliases = molecule.atom_map.each_with_object({}) do |(_, atom), hash|
+        next hash unless atom.is_alias && !atom.alias_text.empty?
+
+        hash[atom.get_idx] = atom.alias_text
+      end
+
+      inchi, inchikey = Chemotion::OpenBabelService.inchi_info_from_molfile(molecule.mdl)
+
+      assign_attributes(
+        external_id: molecule.id,
+        mdl: molecule.mdl,
+        cano_smiles: molecule.cano_smiles,
+        clone_from: molecule.clone_from,
+        abbreviation: molecule.abbreviation,
+        inchistring: inchi,
+        inchikey: inchikey,
+        label: molecule.label,
+        description: molecule.text,
+        details: molecule.details.to_hash.to_json,
+        aliases: aliases.to_json
+      )
+    end
+    # rubocop:enable AbcSize
+
+    def set_polymer(atom_idx)
+      mdl_lines = mdl.split("\n")
+      end_line_idx = mdl_lines.find_index { |l| l == 'M  END' }
+      return false if end_line_idx.nil?
+
+      ext_data = extended_metadata
+
+      polymers = ext_data['polymer'] || []
+      if polymers.include?(atom_idx)
+        polymers.delete_if { |idx| idx == atom_idx }
+      else
+        polymers.push(atom_idx)
+      end
+
+      has_polymer = !polymers.empty?
+      ext_data['polymer'] = polymers
+
+      rgp_line_idx = mdl_lines.find_index { |l| l.match(/^M  RGP/) }
+      mdl_lines.delete_at(rgp_line_idx) unless rgp_line_idx.nil?
+      if has_polymer
+        rgp_info = polymers.map { |idx| "#{idx + 1}   1" }.join('   ')
+        rgp_line = "M  RGP  #{polymers.count}   #{rgp_info}"
+
+        mdl_lines.insert(end_line_idx, rgp_line)
+      end
+
+      polymer_line_idx = mdl_lines.find_index { |l| l == '> <PolymersList>' }
+      unless polymer_line_idx.nil?
+        mdl_lines.delete_at(polymer_line_idx + 1)
+        mdl_lines.delete_at(polymer_line_idx)
+      end
+
+      if has_polymer
+        mdl_lines.insert(end_line_idx + 2, polymers.join(' '))
+        mdl_lines.insert(end_line_idx + 2, '> <PolymersList>')
+      end
+      mdl_lines.push('$$$$') if mdl_lines.last.strip != '$$$$'
+
+      update(extended_metadata: ext_data, mdl: mdl_lines.join("\n"))
+    end
+  end
+end
diff --git a/app/models/chemscanner/reaction.rb b/app/models/chemscanner/reaction.rb
new file mode 100644
index 000000000..98d35b00f
--- /dev/null
+++ b/app/models/chemscanner/reaction.rb
@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions
+#
+#  id                :integer          not null, primary key
+#  scheme_id         :integer          not null
+#  external_id       :integer          not null
+#  clone_from        :integer
+#  description       :string
+#  temperature       :string
+#  time              :string
+#  status            :string
+#  yield             :float
+#  details           :jsonb
+#  extended_metadata :jsonb
+#  is_approved       :boolean          default(FALSE)
+#  imported_id       :integer
+#  created_at        :datetime         not null
+#  updated_at        :datetime         not null
+#  deleted_at        :datetime
+#
+
+
+module Chemscanner
+  # ChemScanner scanned reaction(s)
+  class Reaction < ApplicationRecord
+    acts_as_paranoid
+
+    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
+
+    has_many :steps, class_name: 'ReactionStep', foreign_key: :reaction_id
+
+    has_many :reactions_molecules, dependent: :destroy
+    has_many :molecules, through: :reactions_molecules, source: :molecule
+
+    has_many :reactions_reactant_molecules,
+             class_name: 'ReactionsReactantMolecule',
+             dependent: :destroy
+    has_many :reactants,
+             through: :reactions_reactant_molecules, source: :molecule
+
+    has_many :reactions_reagent_molecules,
+             class_name: 'ReactionsReagentMolecule',
+             dependent: :destroy
+    has_many :reagents,
+             through: :reactions_reagent_molecules, source: :molecule
+
+    has_many :reactions_solvent_molecules,
+             class_name: 'ReactionsSolventMolecule',
+             dependent: :destroy
+    has_many :solvents,
+             through: :reactions_solvent_molecules, source: :molecule
+
+    has_many :reactions_product_molecules,
+             class_name: 'ReactionsProductMolecule',
+             dependent: :destroy
+    has_many :products,
+             through: :reactions_product_molecules,
+             source: :molecule
+
+    def assign_from_chemscanner(reaction)
+      assign_attributes(
+        external_id: reaction.arrow_id,
+        clone_from: reaction.clone_from,
+        description: reaction.description,
+        temperature: reaction.temperature,
+        time: reaction.time,
+        status: reaction.status,
+        yield: reaction.yield,
+        details: reaction.details.to_h.to_json
+      )
+    end
+
+    def remove_reagent_smiles(smiles)
+      to_remove = reagents.select { |m| smiles.include?(m.cano_smiles) }
+      ids = to_remove.map(&:id)
+      to_remove.each(&:destroy)
+
+      save!
+      ids
+    end
+
+    def add_reagent_smiles(smiles)
+      max_id = (reactants + reagents + products).map(&:external_id).max
+
+      added = []
+      smiles.each do |s|
+        rw_mol = RDKitChem::RWMol.mol_from_smiles(s)
+
+        m = Molecule.create(
+          cano_smiles: s,
+          scheme_id: scheme_id,
+          mdl: rw_mol.mol_to_mol_block(true, -1, false),
+          external_id: max_id += 1
+        )
+
+        rm = ReactionsMolecule.create(
+          type: 'Chemscanner::ReactionsReagentMolecule',
+          reaction_id: id,
+          molecule_id: m.id
+        )
+        reactions_reagent_molecules << rm
+        added.push(m)
+      end
+
+      save!
+
+      added
+    end
+  end
+end
diff --git a/app/models/chemscanner/reaction_step.rb b/app/models/chemscanner/reaction_step.rb
new file mode 100644
index 000000000..91c0e7f75
--- /dev/null
+++ b/app/models/chemscanner/reaction_step.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reaction_steps
+#
+#  id                   :integer          not null, primary key
+#  reaction_id          :integer          not null
+#  reaction_external_id :integer          not null
+#  reagent_ids          :integer          default([]), is an Array
+#  reagent_smiles       :string           default([]), is an Array
+#  step_number          :integer          not null
+#  description          :string
+#  temperature          :string
+#  time                 :string
+#  created_at           :datetime         not null
+#  updated_at           :datetime         not null
+#  deleted_at           :datetime
+#
+
+
+# ChemScanner scanned reaction(s)
+module Chemscanner
+  # ChemScanner reaction steps
+  class ReactionStep < ApplicationRecord
+    acts_as_paranoid
+
+    belongs_to :reaction, class_name: 'Reaction', foreign_key: :output_id
+
+    def assign_from_chemscanner(step)
+      assign_attributes(
+        description: step.description,
+        temperature: step.temperature,
+        time: step.time
+      )
+    end
+  end
+end
diff --git a/app/models/chemscanner/reactions_molecule.rb b/app/models/chemscanner/reactions_molecule.rb
new file mode 100644
index 000000000..37e804a8b
--- /dev/null
+++ b/app/models/chemscanner/reactions_molecule.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions_molecules
+#
+#  id          :integer          not null, primary key
+#  reaction_id :integer          not null
+#  molecule_id :integer          not null
+#  type        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  deleted_at  :datetime
+#
+
+
+module Chemscanner
+  # Chemscanner reaction molecule join table
+  class ReactionsMolecule < ApplicationRecord
+    acts_as_paranoid
+
+    belongs_to :reaction
+    belongs_to :molecule
+  end
+
+  class ReactionsReactantMolecule < ReactionsMolecule
+  end
+
+  class ReactionsReagentMolecule < ReactionsMolecule
+  end
+
+  class ReactionsSolventMolecule < ReactionsMolecule
+  end
+
+  class ReactionsProductMolecule < ReactionsMolecule
+  end
+end
diff --git a/app/models/chemscanner/reactions_product_molecule.rb b/app/models/chemscanner/reactions_product_molecule.rb
new file mode 100644
index 000000000..4f8277bbf
--- /dev/null
+++ b/app/models/chemscanner/reactions_product_molecule.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions_molecules
+#
+#  id          :integer          not null, primary key
+#  reaction_id :integer          not null
+#  molecule_id :integer          not null
+#  type        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  deleted_at  :datetime
+#
+
+
+module Chemscanner
+  class ReactionsProductMolecule < ReactionsMolecule
+    # STI: this file is only here because of rails model autoloading.
+    # place all code in app/models/chemscanner/reactions_molecule.rb.
+  end
+end
diff --git a/app/models/chemscanner/reactions_reactant_molecule.rb b/app/models/chemscanner/reactions_reactant_molecule.rb
new file mode 100644
index 000000000..1b14aaf1c
--- /dev/null
+++ b/app/models/chemscanner/reactions_reactant_molecule.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions_molecules
+#
+#  id          :integer          not null, primary key
+#  reaction_id :integer          not null
+#  molecule_id :integer          not null
+#  type        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  deleted_at  :datetime
+#
+
+
+module Chemscanner
+  class ReactionsReactantMolecule < ReactionsMolecule
+    # STI: this file is only here because of rails model autoloading.
+    # place all code in app/models/chemscanner/reactions_molecule.rb.
+  end
+end
diff --git a/app/models/chemscanner/reactions_reagent_molecule.rb b/app/models/chemscanner/reactions_reagent_molecule.rb
new file mode 100644
index 000000000..a27ade2fa
--- /dev/null
+++ b/app/models/chemscanner/reactions_reagent_molecule.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions_molecules
+#
+#  id          :integer          not null, primary key
+#  reaction_id :integer          not null
+#  molecule_id :integer          not null
+#  type        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  deleted_at  :datetime
+#
+
+
+module Chemscanner
+  class ReactionsReagentMolecule < ReactionsMolecule
+    # STI: this file is only here because of rails model autoloading.
+    # place all code in app/models/chemscanner/reactions_molecule.rb.
+  end
+end
diff --git a/app/models/chemscanner/reactions_solvent_molecule.rb b/app/models/chemscanner/reactions_solvent_molecule.rb
new file mode 100644
index 000000000..8823e496b
--- /dev/null
+++ b/app/models/chemscanner/reactions_solvent_molecule.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_reactions_molecules
+#
+#  id          :integer          not null, primary key
+#  reaction_id :integer          not null
+#  molecule_id :integer          not null
+#  type        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  deleted_at  :datetime
+#
+
+
+module Chemscanner
+  class ReactionsSolventMolecule < ReactionsMolecule
+    # STI: this file is only here because of rails model autoloading.
+    # place all code in app/models/chemscanner/reactions_molecule.rb.
+  end
+end
diff --git a/app/models/chemscanner/scheme.rb b/app/models/chemscanner/scheme.rb
new file mode 100644
index 000000000..684cb6706
--- /dev/null
+++ b/app/models/chemscanner/scheme.rb
@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_schemes
+#
+#  id                :integer          not null, primary key
+#  source_id         :integer          not null
+#  is_approved       :boolean          default(FALSE)
+#  extended_metadata :jsonb
+#  index             :integer          default(0)
+#  image_data        :string           default("")
+#  version           :string           default("")
+#  created_by        :integer          not null
+#  created_at        :datetime         not null
+#  updated_at        :datetime         not null
+#  deleted_at        :datetime
+#
+
+
+module Chemscanner
+  # Hold ChemScanner output information
+  class Scheme < ApplicationRecord
+    acts_as_paranoid
+
+    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
+    belongs_to :source, foreign_key: :source_id, class_name: 'Chemscanner::Source'
+
+    has_many :reactions,
+             class_name: 'Reaction', foreign_key: :scheme_id,
+             dependent: :destroy
+
+    has_many :molecules,
+             class_name: 'Molecule', foreign_key: :scheme_id,
+             dependent: :destroy
+
+    accepts_nested_attributes_for :reactions, :molecules
+
+    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
+
+    def file_uuid
+      source.file_uuid
+    end
+
+    def empty?
+      reactions.empty? && molecules.empty?
+    end
+
+    def add_doi(doi)
+      return if doi.empty?
+
+      ext_data = extended_metadata
+      return if ext_data.key?(:doi)
+
+      update!(extended_metadata: ext_data.merge(doi: doi.strip))
+    end
+
+    def destroy_version(version)
+      destroy if self.version == version
+    end
+
+    def approve(val)
+      reactions.update_all(is_approved: val)
+      molecules.update_all(is_approved: val)
+
+      {
+        scheme_ids: [id],
+        reaction_ids: reactions.map(&:id),
+        molecule_ids: molecules.map(&:id)
+      }
+    end
+
+    class << self
+      def save_png(png_list)
+        png_list.each do |file_info|
+          id = file_info['id']
+          scheme = find(id)
+          next if scheme.nil?
+
+          scheme.image_data = file_info['imageData']
+          scheme.save!
+        end
+      end
+      # handle_asynchronously :save_png
+    end
+  end
+end
diff --git a/app/models/chemscanner/source.rb b/app/models/chemscanner/source.rb
new file mode 100644
index 000000000..87fdff9dc
--- /dev/null
+++ b/app/models/chemscanner/source.rb
@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: chemscanner_sources
+#
+#  id                :integer          not null, primary key
+#  parent_id         :integer
+#  file_id           :integer          not null
+#  extended_metadata :jsonb
+#  created_by        :integer          not null
+#  created_at        :datetime         not null
+#  updated_at        :datetime         not null
+#
+
+
+# Storing uploaded file for ChemScanner processing
+module Chemscanner
+  # Uploaded files for scanning
+  class Source < ActiveRecord::Base
+    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
+
+    belongs_to :file, -> { where attachable_type: 'ChemscannerSource' },
+               class_name: 'Attachment', foreign_key: :file_id,
+               foreign_type: :attachable_type
+
+    # has_one :file, as: :attachable
+
+    has_many :schemes,
+             foreign_key: :source_id, class_name: 'Scheme',
+             dependent: :destroy
+
+    accepts_nested_attributes_for :schemes
+
+    has_many :reactions, through: :schemes
+    has_many :molecules, through: :schemes
+
+    has_closure_tree dependent: :destroy
+
+    # _ct from closure_tree gem
+    scope :full_tree, -> { _ct.default_tree_scope(all) }
+
+    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
+
+    MIME_TYPE = {
+      cdx: 'chemical/cdx',
+      cdxml: 'text/xml',
+      xml: 'text/xml',
+      doc: 'application/msword',
+      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      json: 'application/json'
+    }.freeze
+
+    def file_uuid
+      file.identifier
+    end
+
+    def scan
+      filename = file.filename
+      extn = File.extname(filename).downcase
+
+      func_name = "#{extn[1..-1]}_process".to_sym
+      return unless Chemscanner::Process.respond_to?(func_name)
+
+      Chemscanner::Process.send(func_name, self)
+    end
+
+    def create_child(child_path)
+      user_id = created_by
+      source = self.class.new(created_by: user_id)
+      ext = File.extname(child_path)
+      basename = File.basename(child_path)
+
+      source.build_file(
+        filename: basename,
+        file_path: child_path,
+        identifier: SecureRandom.uuid,
+        created_by: user_id,
+        created_for: user_id,
+        attachable_type: 'ChemscannerSource',
+        content_type: MIME_TYPE[ext.to_sym]
+      )
+      source.parent = self
+      children << source
+
+      source
+    end
+
+    def approve(val)
+      reactions.update_all(is_approved: val)
+      molecules.update_all(is_approved: val)
+
+      file_ids = [id]
+      scheme_ids = schemes.map(&:id)
+      reaction_ids = reactions.map(&:id)
+      molecule_ids = molecules.map(&:id)
+
+      children.each do |child|
+        info = child.approve(val)
+
+        file_ids.concat(info[:file_ids] || [])
+        scheme_ids.concat(info[:scheme_ids] || [])
+        reaction_ids.concat(info[:reaction_ids] || [])
+        molecule_ids.concat(info[:molecule_ids] || [])
+      end
+
+      {
+        file_ids: file_ids,
+        scheme_ids: scheme_ids,
+        reaction_ids: reaction_ids,
+        molecule_ids: molecule_ids
+      }
+    end
+
+    class << self
+      def create_from_uploaded_file(file, uid, user)
+        user_id = user.nil? ? nil : user.id
+        temp_file = file['tempfile']
+        file_path = temp_file.to_path
+        extn = File.extname(file_path)[1..-1]
+
+        source = Source.new(created_by: user_id)
+
+        source.build_file(
+          filename: file['filename'],
+          file_path: file_path,
+          identifier: uid,
+          created_by: user_id,
+          created_for: user_id,
+          attachable_type: 'ChemscannerSource',
+          content_type: MIME_TYPE[extn.to_sym] || ''
+        )
+
+        source
+      end
+    end
+  end
+end
diff --git a/app/models/collection.rb b/app/models/collection.rb
index 4fa0c0293..0b25b833b 100644
--- a/app/models/collection.rb
+++ b/app/models/collection.rb
@@ -103,6 +103,14 @@ def self.scheme_only_reactions_collection_id
     ENV['SCHEME_ONLY_REACTIONS_COLL_ID']&.to_i
   end
 
+  def self.embargo_accepted_collection
+    find_by(
+      user_id: User.chemotion_user.id,
+      label: 'Embargo Accepted',
+      is_synchronized: true
+    )
+  end
+
   def self.element_to_review_collection
     where(
       user_id: User.chemotion_user.id,
diff --git a/app/models/collections_element.rb b/app/models/collections_element.rb
new file mode 100644
index 000000000..7f19cd54d
--- /dev/null
+++ b/app/models/collections_element.rb
@@ -0,0 +1,52 @@
+# == Schema Information
+#
+# Table name: collections_elements
+#
+#  id            :integer          not null, primary key
+#  collection_id :integer
+#  element_id    :integer
+#  deleted_at    :datetime
+#  element_type  :string
+#
+# Indexes
+#
+#  index_collections_elements_on_collection_id                 (collection_id)
+#  index_collections_elements_on_deleted_at                    (deleted_at)
+#  index_collections_elements_on_element_id                    (element_id)
+#  index_collections_elements_on_element_id_and_collection_id  (element_id,collection_id) UNIQUE
+#
+
+class CollectionsElement < ApplicationRecord
+    acts_as_paranoid
+    belongs_to :collection
+    belongs_to :element
+
+    include Tagging
+    include Collecting
+
+    def self.get_elements_by_collection_type(collection_ids, type)
+      self.where(collection_id: collection_ids, element_type: type).pluck(:element_id).compact.uniq
+    end
+
+    def self.remove_in_collection(element_ids, from_col_ids)
+      sample_ids = Element.get_associated_samples(element_ids)
+      delete_in_collection(element_ids, from_col_ids)
+      update_tag_by_element_ids(element_ids)
+      CollectionsSample.remove_in_collection(sample_ids, from_col_ids)
+    end
+
+    def self.move_to_collection(element_ids, from_col_ids, to_col_ids, element_type='')
+      sample_ids = Element.get_associated_samples(element_ids)
+      delete_in_collection(element_ids, from_col_ids)
+      static_create_in_collection(element_ids, to_col_ids)
+      CollectionsSample.move_to_collection(sample_ids, from_col_ids, to_col_ids)
+      CollectionsElement.where(collection_id: to_col_ids, element_id: element_ids)&.find_each { |ce| ce.update_columns(element_type: element_type) }
+    end
+
+    def self.create_in_collection(element_ids, to_col_ids, element_type='')
+      sample_ids = Element.get_associated_samples(element_ids)
+      static_create_in_collection(element_ids, to_col_ids)
+      CollectionsSample.create_in_collection(sample_ids, to_col_ids)
+      CollectionsElement.where(collection_id: to_col_ids, element_id: element_ids)&.find_each { |ce| ce.update_columns(element_type: element_type) }
+    end
+  end
diff --git a/app/models/concerns/attachment_converter.rb b/app/models/concerns/attachment_converter.rb
new file mode 100644
index 000000000..758d7b727
--- /dev/null
+++ b/app/models/concerns/attachment_converter.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module AttachmentConverter
+  ACCEPTED_FORMATS = (Rails.configuration.try(:converter).try(:ext) || []).freeze
+  extend ActiveSupport::Concern
+
+  included do
+    before_create :init_converter
+    after_update :exec_converter
+    def init_converter
+      self.aasm_state = 'queueing' if Rails.configuration.try(:converter).try(:url) && ACCEPTED_FORMATS.include?(File.extname(filename&.downcase))
+    end
+
+    def exec_converter
+      return if !Rails.configuration.try(:converter).try(:url) || !ACCEPTED_FORMATS.include?(File.extname(filename&.downcase)) || aasm_state != 'queueing'
+
+      state = Analyses::Converter.jcamp_converter(id)
+      self.aasm_state = state if %w[done failure].include?(state)
+    end
+  end
+end
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index 78a3665b8..763761747 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -310,7 +310,7 @@ def edit_process(is_regen, orig_params)
     end
 
     set_backup
-    delete_tmps([tmp_jcamp, tmp_img])
+    delete_tmps(tmp_files_to_be_deleted)
     delete_related_imgs(img_att)
     delete_related_edit_peak(jcamp_att)
     jcamp_att
diff --git a/app/models/concerns/datasetable.rb b/app/models/concerns/datasetable.rb
new file mode 100644
index 000000000..af9c98d80
--- /dev/null
+++ b/app/models/concerns/datasetable.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# Datasetable concern
+module Datasetable
+  extend ActiveSupport::Concern
+
+  included do
+    has_one :dataset, as: :element
+  end
+
+  def not_dataset?
+    self.class.name == 'Container' && container_type != 'dataset'
+  end
+
+  def save_dataset(**args)
+    return if not_dataset?
+
+    klass = DatasetKlass.find_by(id: args[:dataset_klass_id])
+    uuid = SecureRandom.uuid
+    props = args[:properties]
+    props['eln'] = Chemotion::Application.config.version if props['eln'] != Chemotion::Application.config.version
+    ds = Dataset.find_by(element_type: self.class.name, element_id: id)
+    if ds.present? && (ds.klass_uuid != props['klass_uuid'] || ds.properties != props)
+      props['uuid'] = uuid
+      props['eln'] = Chemotion::Application.config.version
+      props['klass'] = 'Dataset'
+      ds.update!(uuid: uuid, dataset_klass_id: args[:dataset_klass_id], properties: props, klass_uuid: props['klass_uuid'])
+    end
+    return if ds.present?
+
+    props['uuid'] = uuid
+    props['klass_uuid'] = klass.uuid
+    props['eln'] = Chemotion::Application.config.version
+    props['klass'] = 'Dataset'
+    Dataset.create!(uuid: uuid, dataset_klass_id: args[:dataset_klass_id], element_type: self.class.name, element_id: id, properties: props, klass_uuid: klass.uuid)
+  end
+
+  def destroy_datasetable
+    return if not_dataset?
+
+    Dataset.where(element_type: self.class.name, element_id: id).destroy_all
+  end
+end
diff --git a/app/models/concerns/generic_klass_revisions.rb b/app/models/concerns/generic_klass_revisions.rb
new file mode 100644
index 000000000..48d90f57a
--- /dev/null
+++ b/app/models/concerns/generic_klass_revisions.rb
@@ -0,0 +1,20 @@
+
+module GenericKlassRevisions
+  extend ActiveSupport::Concern
+  included do
+    # has_many :element_klasses_revisions, dependent: :destroy
+  end
+
+  def create_klasses_revision(user_id=0)
+    self.update!({ uuid: properties_template['uuid'], properties_release: properties_template, released_at: DateTime.now })
+    reload
+    attributes = {
+      released_by: user_id,
+      uuid: uuid,
+      properties_release: properties_template,
+      released_at: released_at
+    }
+    attributes["#{self.class.name.underscore}_id"] = id
+    "#{self.class.name}esRevision".constantize.create(attributes)
+  end
+end
\ No newline at end of file
diff --git a/app/models/concerns/generic_revisions.rb b/app/models/concerns/generic_revisions.rb
new file mode 100644
index 000000000..b0ac5862b
--- /dev/null
+++ b/app/models/concerns/generic_revisions.rb
@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# GenericRevisions concern
+module GenericRevisions
+  extend ActiveSupport::Concern
+  included do
+    after_create :create_vault
+    after_update :save_to_vault
+    before_destroy :delete_attachments
+  end
+
+  def create_vault
+    save_to_vault unless self.class.name == 'Element'
+  end
+
+  def save_to_vault
+    attributes = {
+      uuid: uuid,
+      klass_uuid: klass_uuid,
+      properties: properties
+    }
+    attributes["#{self.class.name.downcase}_id"] = id
+    attributes['name'] = name if self.class.name == 'Element'
+    "#{self.class.name}sRevision".constantize.create(attributes)
+  end
+
+  def delete_attachments
+    att_ids = []
+    properties['layers'].keys.each do |key|
+      layer = properties['layers'][key]
+      field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
+      field_uploads.each do |field|
+        (field['value'] && field['value']['files'] || []).each do |file|
+          att_ids.push(file['aid']) unless file['aid'].nil?
+        end
+      end
+    end
+    Attachment.where(id: att_ids, attachable_id: id, attachable_type: %w[ElementProps SegmentProps]).destroy_all
+  end
+end
diff --git a/app/models/concerns/publishing.rb b/app/models/concerns/publishing.rb
index 08fb165d4..6c33ffef3 100644
--- a/app/models/concerns/publishing.rb
+++ b/app/models/concerns/publishing.rb
@@ -50,7 +50,7 @@ def reserve_suffix_analyses(as = Container.none)
           type = analysis.extended_metadata['kind'].delete(' ')
           if (doi&.inchikey != ik) || (type != doi&.analysis_type)
             doi.update!(doiable: nil)
-            doi d = analysis.doi= Doi.create_for_analysis!(analysis)
+            doi = Doi.create_for_analysis!(analysis)
           end
         else
           doi = Doi.create_for_analysis!(analysis)
diff --git a/app/models/concerns/segmentable.rb b/app/models/concerns/segmentable.rb
new file mode 100644
index 000000000..a77c95ec9
--- /dev/null
+++ b/app/models/concerns/segmentable.rb
@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# Segmentable concern
+module Segmentable
+  extend ActiveSupport::Concern
+  included do
+    has_many :segments, as: :element, dependent: :destroy
+  end
+
+  def save_segments(**args)
+    return if args[:segments].nil?
+
+    args[:segments].each do |seg|
+      klass = SegmentKlass.find_by(id: seg['segment_klass_id'])
+      uuid = SecureRandom.uuid
+      props = seg['properties']
+      props['eln'] = Chemotion::Application.config.version if props['eln'] != Chemotion::Application.config.version
+      segment = Segment.find_by(element_type: self.class.name, element_id: self.id, segment_klass_id: seg['segment_klass_id'])
+      if segment.present? && (segment.klass_uuid != props['klass_uuid'] || segment.properties != props)
+        props['uuid'] = uuid
+        props['eln'] = Chemotion::Application.config.version
+        props['klass'] = 'Segment'
+
+        segment.update!(properties: props, uuid: uuid, klass_uuid: props['klass_uuid'])
+      end
+      next if segment.present?
+
+      props['uuid'] = uuid
+      props['klass_uuid'] = klass.uuid
+      props['eln'] = Chemotion::Application.config.version
+      props['klass'] = 'Segment'
+    Segment.create!(segment_klass_id: seg['segment_klass_id'], element_type: self.class.name, element_id: self.id, properties: props, created_by: args[:current_user_id], uuid: uuid, klass_uuid: klass.uuid)
+    end
+  end
+end
diff --git a/app/models/dataset.rb b/app/models/dataset.rb
new file mode 100644
index 000000000..db52040c0
--- /dev/null
+++ b/app/models/dataset.rb
@@ -0,0 +1,22 @@
+# == Schema Information
+#
+# Table name: datasets
+#
+#  id               :integer          not null, primary key
+#  dataset_klass_id :integer
+#  element_type     :string
+#  element_id       :integer
+#  properties       :jsonb
+#  created_at       :datetime         not null
+#  updated_at       :datetime
+#  uuid             :string
+#  klass_uuid       :string
+#  deleted_at       :datetime
+#
+
+class Dataset < ApplicationRecord
+  acts_as_paranoid
+  include GenericRevisions
+  belongs_to :dataset_klass
+  belongs_to :element, polymorphic: true
+end
diff --git a/app/models/dataset_klass.rb b/app/models/dataset_klass.rb
new file mode 100644
index 000000000..2ecebd6b3
--- /dev/null
+++ b/app/models/dataset_klass.rb
@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: dataset_klasses
+#
+#  id                  :integer          not null, primary key
+#  ols_term_id         :string           not null
+#  label               :string           not null
+#  desc                :string
+#  properties_template :jsonb            not null
+#  is_active           :boolean          default(FALSE), not null
+#  place               :integer          default(100), not null
+#  created_by          :integer          not null
+#  created_at          :datetime         not null
+#  updated_at          :datetime
+#  deleted_at          :datetime
+#  uuid                :string
+#  properties_release  :jsonb
+#  released_at         :datetime
+#
+class DatasetKlass < ApplicationRecord
+  acts_as_paranoid
+  include GenericKlassRevisions
+  has_many :datasets, dependent: :destroy
+  has_many :dataset_klasses_revisions, dependent: :destroy
+
+  def self.init_seeds
+    seeds_path = File.join(Rails.root, 'db', 'seeds', 'json', 'dataset_klasses.json')
+    seeds = JSON.parse(File.read(seeds_path))
+
+    seeds['chmo'].each do |term|
+      next if DatasetKlass.where(ols_term_id: term['id']).count.positive?
+
+      attributes = { ols_term_id: term['id'], label: "#{term['label']} (#{term['synonym']})", desc: "#{term['label']} (#{term['synonym']})", place: term['position'], created_by: Admin.first&.id || 0 }
+      DatasetKlass.create!(attributes)
+    end
+    true
+  end
+end
diff --git a/app/models/dataset_klasses_revision.rb b/app/models/dataset_klasses_revision.rb
new file mode 100644
index 000000000..4e083b2d7
--- /dev/null
+++ b/app/models/dataset_klasses_revision.rb
@@ -0,0 +1,25 @@
+# == Schema Information
+#
+# Table name: dataset_klasses_revisions
+#
+#  id                 :integer          not null, primary key
+#  dataset_klass_id   :integer
+#  uuid               :string
+#  properties_release :jsonb
+#  released_at        :datetime
+#  released_by        :integer
+#  created_by         :integer
+#  created_at         :datetime
+#  updated_at         :datetime
+#  deleted_at         :datetime
+#
+# Indexes
+#
+#  index_dataset_klasses_revisions_on_dataset_klass_id  (dataset_klass_id)
+#
+
+class DatasetKlassesRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :dataset_klass
+
+end
diff --git a/app/models/datasets_revision.rb b/app/models/datasets_revision.rb
new file mode 100644
index 000000000..5c9c68fe5
--- /dev/null
+++ b/app/models/datasets_revision.rb
@@ -0,0 +1,24 @@
+# == Schema Information
+#
+# Table name: datasets_revisions
+#
+#  id         :integer          not null, primary key
+#  dataset_id :integer
+#  uuid       :string
+#  klass_uuid :string
+#  properties :jsonb
+#  created_by :integer
+#  created_at :datetime
+#  updated_at :datetime
+#  deleted_at :datetime
+#
+# Indexes
+#
+#  index_datasets_revisions_on_dataset_id  (dataset_id)
+#
+
+class DatasetsRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :dataset
+
+end
diff --git a/app/models/element.rb b/app/models/element.rb
new file mode 100644
index 000000000..cf931a119
--- /dev/null
+++ b/app/models/element.rb
@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: elements
+#
+#  id               :integer          not null, primary key
+#  name             :string
+#  element_klass_id :integer
+#  properties       :jsonb
+#  created_by       :integer
+#  created_at       :datetime
+#  updated_at       :datetime
+#  deleted_at       :datetime
+#  short_label      :string
+#  uuid             :string
+#  klass_uuid       :string
+#
+
+# Generic Element
+class Element < ApplicationRecord
+  acts_as_paranoid
+  include PgSearch
+  include ElementUIStateScopes
+  include Collectable
+  include AnalysisCodes
+  include Taggable
+  include Segmentable
+  include GenericRevisions
+
+  multisearchable against: %i[name short_label]
+
+  pg_search_scope :search_by_substring, against: %i[name short_label], using: { trigram: { threshold: 0.0001 } }
+
+  attr_accessor :can_copy
+
+  scope :by_name, ->(query) { where('name ILIKE ?', "%#{sanitize_sql_like(query)}%") }
+  scope :by_short_label, ->(query) { where('short_label ILIKE ?', "%#{sanitize_sql_like(query)}%") }
+  scope :by_klass_id_short_label, ->(klass_id, short_label) { where('element_klass_id = ? and short_label ILIKE ?', klass_id, "%#{sanitize_sql_like(short_label)}%") }
+  scope :by_sample_ids, ->(ids) { joins(:elements_samples).where('sample_id IN (?)', ids) }
+  scope :by_klass_id, ->(klass_id) { where('element_klass_id = ? ', klass_id) }
+
+  belongs_to :element_klass
+
+  has_many :collections_elements,  inverse_of: :element, dependent: :destroy
+  has_many :collections, through: :collections_elements
+  has_many :attachments, as: :attachable
+  has_many :elements_samples, dependent: :destroy
+  has_many :samples, through: :elements_samples, source: :sample
+  has_one :container, :as => :containable
+  has_many :elements_revisions, dependent: :destroy
+
+  accepts_nested_attributes_for :collections_elements
+
+  belongs_to :creator, foreign_key: :created_by, class_name: 'User'
+  validates :creator, presence: true
+
+  before_create :auto_set_short_label
+  after_create :update_counter
+  before_destroy :delete_attachment
+
+  def attachments
+    Attachment.where(attachable_id: self.id, attachable_type: 'Element')
+  end
+
+
+  def self.get_associated_samples(element_ids)
+    ElementsSample.where(element_id: element_ids).pluck(:sample_id)
+  end
+
+  def analyses
+    container ? container.analyses : []
+  end
+
+  def auto_set_short_label
+    prefix = element_klass.klass_prefix
+    if creator.counters[element_klass.name].nil?
+      creator.counters[element_klass.name] = '0'
+      creator.update_columns(counters: creator.counters)
+      creator.reload
+    end
+    counter = creator.counters[element_klass.name].to_i.succ
+    self.short_label = "#{creator.initials}-#{prefix}#{counter}"
+  end
+
+  def update_counter
+    creator.increment_counter element_klass.name
+  end
+
+  private
+
+  def delete_attachment
+    if Rails.env.production?
+      attachments.each do |attachment|
+        attachment.delay(run_at: 96.hours.from_now, queue: 'attachment_deletion').destroy!
+      end
+    else
+      attachments.each(&:destroy!)
+    end
+  end
+end
diff --git a/app/models/element_klass.rb b/app/models/element_klass.rb
new file mode 100644
index 000000000..74503f7ce
--- /dev/null
+++ b/app/models/element_klass.rb
@@ -0,0 +1,42 @@
+# == Schema Information
+#
+# Table name: element_klasses
+#
+#  id                  :integer          not null, primary key
+#  name                :string
+#  label               :string
+#  desc                :string
+#  icon_name           :string
+#  properties_template :jsonb
+#  created_by          :integer
+#  created_at          :datetime
+#  updated_at          :datetime
+#  deleted_at          :datetime
+#  is_active           :boolean          default(TRUE), not null
+#  klass_prefix        :string           default("E"), not null
+#  is_generic          :boolean          default(TRUE), not null
+#  place               :integer          default(100), not null
+#  uuid                :string
+#  properties_release  :jsonb
+#  released_at         :datetime
+#
+
+class ElementKlass < ApplicationRecord
+  acts_as_paranoid
+  include GenericKlassRevisions
+  has_many :elements, dependent: :destroy
+  has_many :segment_klasses, dependent: :destroy
+  has_many :element_klasses_revisions, dependent: :destroy
+
+  def self.gen_klasses_json
+    klasses = where(is_active: true, is_generic: true).order('place')&.pluck(:name) || []
+  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
+    klasses = []
+  ensure
+    File.write(
+      Rails.root.join('config', 'klasses.json'),
+      klasses&.to_json || []
+    )
+  end
+
+end
diff --git a/app/models/element_klasses_revision.rb b/app/models/element_klasses_revision.rb
new file mode 100644
index 000000000..3f9b15ce5
--- /dev/null
+++ b/app/models/element_klasses_revision.rb
@@ -0,0 +1,24 @@
+# == Schema Information
+#
+# Table name: element_klasses_revisions
+#
+#  id                 :integer          not null, primary key
+#  element_klass_id   :integer
+#  uuid               :string
+#  properties_release :jsonb
+#  released_at        :datetime
+#  released_by        :integer
+#  created_by         :integer
+#  created_at         :datetime
+#  updated_at         :datetime
+#  deleted_at         :datetime
+#
+# Indexes
+#
+#  index_element_klasses_revisions_on_element_klass_id  (element_klass_id)
+#
+
+class ElementKlassesRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :element_klass
+end
diff --git a/app/models/elements_revision.rb b/app/models/elements_revision.rb
new file mode 100644
index 000000000..418488734
--- /dev/null
+++ b/app/models/elements_revision.rb
@@ -0,0 +1,25 @@
+# == Schema Information
+#
+# Table name: elements_revisions
+#
+#  id         :integer          not null, primary key
+#  element_id :integer
+#  uuid       :string
+#  klass_uuid :string
+#  name       :string
+#  properties :jsonb
+#  created_by :integer
+#  created_at :datetime
+#  updated_at :datetime
+#  deleted_at :datetime
+#
+# Indexes
+#
+#  index_elements_revisions_on_element_id  (element_id)
+#
+
+class ElementsRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :element
+
+end
diff --git a/app/models/elements_sample.rb b/app/models/elements_sample.rb
new file mode 100644
index 000000000..2e11e7151
--- /dev/null
+++ b/app/models/elements_sample.rb
@@ -0,0 +1,26 @@
+# == Schema Information
+#
+# Table name: elements_samples
+#
+#  id         :integer          not null, primary key
+#  element_id :integer
+#  sample_id  :integer
+#  created_by :integer
+#  created_at :datetime
+#  updated_at :datetime
+#  deleted_at :datetime
+#
+# Indexes
+#
+#  index_elements_samples_on_element_id  (element_id)
+#  index_elements_samples_on_sample_id   (sample_id)
+#
+
+
+class ElementsSample < ApplicationRecord
+  acts_as_paranoid
+  belongs_to :element
+  belongs_to :sample
+
+  include Tagging
+end
diff --git a/app/models/molecule.rb b/app/models/molecule.rb
index 81ef92cbd..09db1e1ee 100644
--- a/app/models/molecule.rb
+++ b/app/models/molecule.rb
@@ -273,6 +273,20 @@ def current_svg_full_path
     file_path&.file? ? file_path : nil
   end
 
+  def self.svg_reprocess(svg, molfile)
+    return svg unless Rails.configuration.try(:ketcher_service).try(:url).present?
+    return svg if svg.present? && !svg&.include?('Open Babel')
+
+    svg = KetcherService::RenderSvg.svg(molfile)
+
+    if svg&.present?
+      svg = Ketcherails::SVGProcessor.new(svg)
+      svg.centered_and_scaled_svg
+    else
+      Chemotion::OpenBabelService.svg_from_molfile(molfile)
+    end
+  end
+
 private
 
   # TODO: check that molecules are OK and remove this method. fix is in editor
diff --git a/app/models/publication.rb b/app/models/publication.rb
index 0a877dc6b..01255a698 100644
--- a/app/models/publication.rb
+++ b/app/models/publication.rb
@@ -144,11 +144,12 @@ def move_to_accepted_collection
       CollectionsSample
     when 'Reaction'
       CollectionsReaction
-    end.remove_in_collection(
+    end.move_to_collection(
       element.id,
       element.collections.where(
         id: [pub_user.pending_collection.id, pub_user.reviewing_collection.id]
-      ).pluck(:id) + Collection.element_to_review_collection.pluck(:id)
+      ).pluck(:id) + Collection.element_to_review_collection.pluck(:id),
+      [Collection.embargo_accepted_collection&.id]
     )
   end
 
@@ -606,6 +607,7 @@ def transition_from_completing_to_completed!
       collections_klass.remove_in_collection([element_id], gl_col_ids ) if gl_col_ids.present?
       collections_klass.remove_in_collection([element_id], pending_collection_ids)
       collections_klass.remove_in_collection([element_id], Collection.element_to_review_collection.pluck(:id))
+      collections_klass.remove_in_collection([element_id], [Collection.embargo_accepted_collection&.id])
       collections_klass.create_in_collection([element_id], published_collection_ids)
 
       element.update_publication_tag(published_at: time)
diff --git a/app/models/report.rb b/app/models/report.rb
index ab636843b..52ed63779 100644
--- a/app/models/report.rb
+++ b/app/models/report.rb
@@ -178,7 +178,7 @@ def self.all_spl_settings
       diagram: true,
       collection: true,
       analyses: true,
-      reaction_description: true,
+      reaction_description: true
     }
   end
 
@@ -192,14 +192,14 @@ def self.all_rxn_settings
       tlc: true,
       observation: true,
       analysis: true,
-      literature: true,
+      literature: true
     }
   end
 
   def self.all_configs
     {
       page_break: true,
-      whole_diagram: true,
+      whole_diagram: true
     }
   end
 
diff --git a/app/models/segment.rb b/app/models/segment.rb
new file mode 100644
index 000000000..27f18464b
--- /dev/null
+++ b/app/models/segment.rb
@@ -0,0 +1,25 @@
+# == Schema Information
+#
+# Table name: segments
+#
+#  id               :integer          not null, primary key
+#  segment_klass_id :integer
+#  element_type     :string
+#  element_id       :integer
+#  properties       :jsonb
+#  created_by       :integer
+#  created_at       :datetime
+#  updated_at       :datetime
+#  deleted_at       :datetime
+#  uuid             :string
+#  klass_uuid       :string
+#
+
+class Segment < ApplicationRecord
+  acts_as_paranoid
+  include GenericRevisions
+
+  belongs_to :segment_klass
+  belongs_to :element, polymorphic: true
+  has_many :segments_revisions, dependent: :destroy
+end
diff --git a/app/models/segment_klass.rb b/app/models/segment_klass.rb
new file mode 100644
index 000000000..4765f96ae
--- /dev/null
+++ b/app/models/segment_klass.rb
@@ -0,0 +1,40 @@
+# == Schema Information
+#
+# Table name: segment_klasses
+#
+#  id                  :integer          not null, primary key
+#  element_klass_id    :integer
+#  label               :string           not null
+#  desc                :string
+#  properties_template :jsonb
+#  is_active           :boolean          default(TRUE), not null
+#  place               :integer          default(100), not null
+#  created_by          :integer
+#  created_at          :datetime
+#  updated_at          :datetime
+#  deleted_at          :datetime
+#  uuid                :string
+#  properties_release  :jsonb
+#  released_at         :datetime
+#  identifier          :string
+#
+
+class SegmentKlass < ApplicationRecord
+  acts_as_paranoid
+  include GenericKlassRevisions
+  belongs_to :element_klass
+  has_many :segments, dependent: :destroy
+  has_many :segment_klasses_revisions, dependent: :destroy
+
+  def self.gen_klasses_json
+    klasses = where(is_active: true)&.pluck(:name) || []
+  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
+    klasses = []
+  ensure
+    File.write(
+      Rails.root.join('config', 'segment_klass.json'),
+      klasses&.to_json || []
+    )
+  end
+
+end
diff --git a/app/models/segment_klasses_revision.rb b/app/models/segment_klasses_revision.rb
new file mode 100644
index 000000000..7014ea026
--- /dev/null
+++ b/app/models/segment_klasses_revision.rb
@@ -0,0 +1,25 @@
+# == Schema Information
+#
+# Table name: segment_klasses_revisions
+#
+#  id                 :integer          not null, primary key
+#  segment_klass_id   :integer
+#  uuid               :string
+#  properties_release :jsonb
+#  released_at        :datetime
+#  released_by        :integer
+#  created_by         :integer
+#  created_at         :datetime
+#  updated_at         :datetime
+#  deleted_at         :datetime
+#
+# Indexes
+#
+#  index_segment_klasses_revisions_on_segment_klass_id  (segment_klass_id)
+#
+
+class SegmentKlassesRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :segment_klass
+
+end
diff --git a/app/models/segments_revision.rb b/app/models/segments_revision.rb
new file mode 100644
index 000000000..bb0450ab8
--- /dev/null
+++ b/app/models/segments_revision.rb
@@ -0,0 +1,24 @@
+# == Schema Information
+#
+# Table name: segments_revisions
+#
+#  id         :integer          not null, primary key
+#  segment_id :integer
+#  uuid       :string
+#  klass_uuid :string
+#  properties :jsonb
+#  created_by :integer
+#  created_at :datetime
+#  updated_at :datetime
+#  deleted_at :datetime
+#
+# Indexes
+#
+#  index_segments_revisions_on_segment_id  (segment_id)
+#
+
+class SegmentsRevision < ApplicationRecord
+  acts_as_paranoid
+  has_one :segment
+
+end
diff --git a/app/packs/src/admin/AdminDeviceElement.js b/app/packs/src/admin/AdminDeviceElement.js
new file mode 100644
index 000000000..99d235b90
--- /dev/null
+++ b/app/packs/src/admin/AdminDeviceElement.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import { ButtonGroup, OverlayTrigger, Tooltip, Button, Table, Panel } from 'react-bootstrap';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import DeleteGroupDeviceButton from './DeleteGroupDeviceButton';
+
+export default class AdminDeviceElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showUsers: false,
+      showDevices: false,
+      devices: props.currentState.devices
+    };
+
+    this.toggleUsers = this.toggleUsers.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  fetch(type) {
+    AdminFetcher.fetchGroupsDevices(type)
+      .then((result) => {
+        switch (type) {
+          case 'Group':
+            this.setState({ groups: result.list });
+            break;
+          case 'Device':
+            this.setState({ devices: result.list });
+            break;
+          default:
+            break;
+        }
+      });
+  }
+
+  toggleUsers() {
+    this.setState({
+      showUsers: !this.state.showUsers
+    });
+  }
+
+  renderDeviceButtons(device) {
+    return (
+      <td>
+        <ButtonGroup aria-label="Device-Users">
+          <OverlayTrigger placement="top" overlay={<Tooltip id="deviceUsersShow">List Device-Users</Tooltip>}>
+            <Button bsSize="xsmall" type="button" bsStyle="info" onClick={this.toggleUsers} >
+              <i className="fa fa-users" />&nbsp;({device.users.length < 10 ? `0${device.users.length}` : device.users.length})
+            </Button>
+          </OverlayTrigger>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device permission to users</Tooltip>}>
+            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(device, 'Device', 'Person')} >
+              <i className="fa fa-user" /><i className="fa fa-plus" />
+            </Button>
+          </OverlayTrigger>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device permission to groups</Tooltip>}>
+            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(device, 'Device', 'Group')} >
+              <i className="fa fa-users" /><i className="fa fa-plus" />
+            </Button>
+          </OverlayTrigger>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip id="inchi_tooltip">Edit Device Metadata</Tooltip>} >
+            <Button bsSize="xsmall" bsStyle="info" onClick={() => this.props.onShowDeviceMetadataModal(device)}>
+              <i className="fa fa-laptop" />
+            </Button>
+          </OverlayTrigger>
+        </ButtonGroup>&nbsp;&nbsp;
+
+        <ButtonGroup>
+          <DeleteGroupDeviceButton rootType={'Device'}
+                             groupRec={device}
+                             isRoot={true}
+                             currentState={this.state}
+                             onChangeDeviceData={this.props.onChangeDeviceData} />
+        </ButtonGroup>
+      </td>
+    );
+  }
+
+  render() {
+    const { deviceElement } = this.props;
+    let idx = this.props.index;
+    const { showUsers } = this.state;
+
+    return (
+      <tbody key={`tbody_${deviceElement.id}`}>
+        <tr key={`row_${deviceElement.id}`} id={`row_${deviceElement.id}`} style={{ fontWeight: 'bold' }}>
+          <td>{idx + 1}</td>
+          {this.renderDeviceButtons(deviceElement)}
+          <td>{deviceElement.name}</td>
+          <td>{deviceElement.name_abbreviation}</td>
+          <td>{deviceElement.email}</td>
+        </tr>
+        <tr className={'collapse' + (showUsers ? 'in' : '')} id={`div_row_du${deviceElement.id}`}>
+          <td colSpan="5">
+            <Panel>
+              <Panel.Heading>
+                <Panel.Title>
+                  Device: [{deviceElement.name}] managed by following users/groups <br />
+                </Panel.Title>
+              </Panel.Heading>
+              <Table>
+                <tbody>
+                  {deviceElement.users.map((u, i) => (
+                    <tr key={`row_${deviceElement.id}_${u.id}`} id={`row_${deviceElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
+                      <td width="5%">{i + 1}</td>
+                      <td width="30%">{u.name}</td>
+                      <td width="10%">{u.initials}</td>
+                      <td width="20%">{u.type}</td>
+                      <td width="15%">{ }</td>
+                      <td width="20%"><DeleteGroupDeviceButton rootType='Device'
+                                                         actionType='Person'
+                                                         groupRec={deviceElement}
+                                                         userRec={u}
+                                                         currentState={this.state}
+                                                         onChangeDeviceData={this.props.onChangeDeviceData} /></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </Panel>
+          </td>
+        </tr>
+      </tbody>
+    );
+  }
+}
diff --git a/app/packs/src/admin/AdminGroupElement.js b/app/packs/src/admin/AdminGroupElement.js
new file mode 100644
index 000000000..8743ecdc7
--- /dev/null
+++ b/app/packs/src/admin/AdminGroupElement.js
@@ -0,0 +1,206 @@
+import React from 'react';
+import { ButtonGroup, OverlayTrigger, Popover, Tooltip, Button, Table, Panel } from 'react-bootstrap';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import { findIndex } from 'lodash';
+import DeleteGroupDeviceButton from './DeleteGroupDeviceButton';
+
+export default class AdminGroupElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showUsers: false,
+      showDevices: false,
+      groups: props.currentState.groups
+    };
+
+    this.toggleUsers = this.toggleUsers.bind(this);
+    this.toggleDevices = this.toggleDevices.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  setGroupAdmin(groupRec, userRec, setAdmin = true) {
+    const { groups } = this.state;
+    const params = {
+      action: 'NodeAdm',
+      rootType: 'Group',
+      actionType: 'Adm',
+      id: groupRec.id,
+      admin_id: userRec.id,
+      set_admin: setAdmin
+    };
+    AdminFetcher.updateGroup(params)
+      .then((result) => {
+        if (setAdmin) {
+          groupRec.admins.splice(1, 0, userRec);
+        } else {
+          const usrIdx = findIndex(groupRec.admins, o => o.id === userRec.id);
+          groupRec.admins.splice(usrIdx, 1);
+        }
+        const idx = findIndex(groups, o => o.id === groupRec.id);
+        groups.splice(idx, 1, groupRec);
+        this.props.onChangeGroupData(groups);
+      });
+  }
+
+  toggleUsers() {
+    this.setState({
+      showUsers: !this.state.showUsers
+    })
+  }
+
+  toggleDevices() {
+    this.setState({
+      showDevices: !this.state.showDevices
+    })
+  }
+
+  renderGroupButtons(group) {
+    return (
+      <td>
+        <ButtonGroup aria-label="Group-Users">
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersShow">List Group-Users</Tooltip>}>
+            <Button bsSize="xsmall" type="button" bsStyle="info" onClick={this.toggleUsers} >
+              <i className="fa fa-users" />&nbsp;({group.users.length < 10 ? `0${group.users.length}` : group.users.length})
+            </Button>
+          </OverlayTrigger>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add user to group</Tooltip>}>
+            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(group, 'Group', 'Person')} >
+              <i className="fa fa-user" /><i className="fa fa-plus" />
+            </Button>
+          </OverlayTrigger>
+        </ButtonGroup>&nbsp;&nbsp;
+
+        <ButtonGroup>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupDevicesShow">List Group-Devices</Tooltip>}>
+            <Button bsSize="xsmall" type="button" bsStyle="success" onClick={this.toggleDevices} >
+              <i className="fa fa-server" />&nbsp;({group.devices.length < 10 ? `0${group.devices.length}` : group.devices.length})
+            </Button>
+          </OverlayTrigger>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device to group</Tooltip>}>
+            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(group, 'Group', 'Device')} >
+              <i className="fa fa-laptop" /><i className="fa fa-plus" />
+            </Button>
+          </OverlayTrigger>
+        </ButtonGroup>&nbsp;&nbsp;
+        <ButtonGroup>
+          <DeleteGroupDeviceButton rootType={'Group'}
+                             groupRec={group}
+                             isRoot={true}
+                             currentState={this.state}
+                             onChangeGroupData={this.props.onChangeGroupData} />
+        </ButtonGroup>
+      </td>
+    );
+  }
+
+  renderGroupUserButtons(group, user) {
+    const isAdmin = group.admins && group.admins.filter(a => (a.id === user.id)).length > 0;
+    const adminTooltip = isAdmin === true ? 'set to normal user' : 'set to Administrator';
+    return (
+      <td>
+        <ButtonGroup className="actions">
+          <OverlayTrigger placement="top" overlay={<Tooltip id="userAdmin">{adminTooltip}</Tooltip>}>
+            <Button
+              bsSize="xsmall"
+              type="button"
+              bsStyle={isAdmin === true ? 'default' : 'info'}
+              onClick={() => this.setGroupAdmin(group, user, !isAdmin)}
+            >
+              <i className="fa fa-key" />
+            </Button>
+          </OverlayTrigger>
+          <DeleteGroupDeviceButton rootType={'Group'}
+                             actionType={'Person'}
+                             groupRec={group}
+                             userRec={user}
+                             currentState={this.state}
+                             onChangeGroupData={this.props.onChangeGroupData} />
+        </ButtonGroup>
+        &nbsp;&nbsp;
+      </td>
+    );
+  }
+
+  render() {
+    const { groupElement } = this.props;
+    let idx = this.props.index;
+    const { showUsers, showDevices } = this.state;
+    const adminIcon = (<OverlayTrigger placement="top" overlay={<Tooltip id="admin">Group Administrator</Tooltip>}><i className="fa fa-key" /></OverlayTrigger>);
+
+    return (
+      <tbody key={`tbody_${groupElement.id}`}>
+        <tr key={`row_${groupElement.id}`} id={`row_${groupElement.id}`} style={{ fontWeight: 'bold' }}>
+          <td>{idx + 1}</td>
+          {this.renderGroupButtons(groupElement)}
+          <td>{groupElement.name}</td>
+          <td>{groupElement.name_abbreviation}</td>
+          <td>
+            {groupElement.admins && groupElement.admins.map(x => x.name).join(', ')}&nbsp;&nbsp;
+          </td>
+          <td>{groupElement.email}</td>
+        </tr>
+        <tr className={'collapse' + (showUsers ? 'in' : '')} id={`div_row_${groupElement.id}`}>
+          <td colSpan="7">
+            <Panel>
+              <Panel.Heading>
+                <Panel.Title>
+                  Users in Group: {groupElement.name}
+                </Panel.Title>
+              </Panel.Heading>
+              <Table>
+                <tbody>
+                  {groupElement.users.map((u, i) => (
+                    <tr key={`row_${groupElement.id}_${u.id}`} id={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
+                      <td width="5%">{i + 1}</td>
+                      <td width="20%">{u.name}</td>
+                      <td width="10%">{u.initials}</td>
+                      <td width="20%">{u.email}</td>
+                      <td width="15%">{groupElement.admins && groupElement.admins.filter(a => (a.id === u.id)).length > 0 ? adminIcon : ''}</td>
+                      <td width="30%">{this.renderGroupUserButtons(groupElement, u)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </Panel>
+          </td>
+        </tr>
+        <tr className={'collapse' + (showDevices ? 'in' : '')} id={`div_row_d${groupElement.id}`}>
+          <td colSpan="7">
+            <Panel>
+              <Panel.Heading>
+                <Panel.Title>
+                  Devices in Group: {groupElement.name}
+                </Panel.Title>
+              </Panel.Heading>
+              <Table>
+                <tbody>
+                  {groupElement.devices.map((u, i) => (
+                    <tr key={`row_${groupElement.id}_${u.id}`} id={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
+                      <td width="5%">{i + 1}</td>
+                      <td width="20%">{u.name}</td>
+                      <td width="10%">{u.initials}</td>
+                      <td width="20%">{ }</td>
+                      <td width="15%">{ }</td>
+                      <td width="30%">
+                        <DeleteGroupDeviceButton rootType={'Group'}
+                                           actionType={'Device'}
+                                           groupRec={groupElement}
+                                           userRec={u}
+                                           currentState={this.state}
+                                           onChangeGroupData={this.props.onChangeGroupData} /></td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </Panel>
+          </td>
+        </tr>
+      </tbody>
+    );
+  }
+}
diff --git a/app/packs/src/admin/AdminHome.js b/app/packs/src/admin/AdminHome.js
new file mode 100644
index 000000000..49893e40b
--- /dev/null
+++ b/app/packs/src/admin/AdminHome.js
@@ -0,0 +1,219 @@
+import React from 'react';
+import { Grid, Row, Col, Nav, NavItem } from 'react-bootstrap';
+import AdminNavigation from 'src/apps/admin/AdminNavigation';
+import Notifications from 'src/components/Notifications';
+import AdminDashboard from 'src/apps/admin/AdminDashboard';
+import UserManagement from 'src/apps/admin/UserManagement';
+import GroupsDevices from 'src/apps/admin/GroupsDevices';
+import MessagePublish from 'src/apps/admin/MessagePublish';
+import DataCollector from 'src/apps/admin/DataCollector';
+import OlsTerms from 'src/apps/admin/OlsTerms';
+import NovncSettings from 'src/apps/admin/NovncSettings';
+import MatrixManagement from 'src/apps/admin/MatrixManagement';
+import TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer';
+import DelayedJobs from 'src/apps/admin/DelayedJobs';
+
+
+class AdminHome extends React.Component {
+  constructor(props) {
+    super();
+    this.state = {
+      showTree: true,
+      pageIndex: 0,
+      contentClassName: 'small-col main-content',
+    };
+    this.toggleTree = this.toggleTree.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  toggleTree() {
+    const { showTree } = this.state;
+    this.setState({
+      showTree: !showTree,
+      contentClassName: showTree ? 'small-col full-main' : 'small-col main-content'
+    });
+  }
+
+  handleSelect(pageIndex) {
+    this.setState({
+      pageIndex
+    });
+  }
+
+
+  mainContent() {
+    const { pageIndex } = this.state;
+    if (pageIndex === 0) {
+      return this.renderDashboard();
+    } else if (pageIndex === 1) {
+      return this.renderUserManagement();
+    } else if (pageIndex === 2) {
+      return this.renderMessagePublish();
+    } else if (pageIndex === 3) {
+      return this.renderDataCollector();
+    } else if (pageIndex === 4) {
+      return this.renderGroupMgnt();
+    } else if (pageIndex === 5) {
+      return this.renderOlsTerms();
+    } else if (pageIndex === 6) {
+      return this.renderNovncSettings();
+    } else if (pageIndex === 7) {
+      return this.renderContent(<MatrixManagement />);
+    } else if (pageIndex === 8) {
+      return this.renderTextTemplates();
+    } else if (pageIndex === 12) {
+      return this.renderTemplateManagement();
+    } else if (pageIndex === 13) {
+      return this.renderDelayedJobs();
+    }
+
+    return (<div />);
+  }
+
+  tree() {
+    const { showTree, pageIndex } = this.state;
+    if (!showTree) {
+      return <div />;
+    }
+
+    return (
+      <div>
+        <Col className="small-col collec-tree">
+          <Nav bsStyle="pills" stacked activeKey={pageIndex} onSelect={this.handleSelect}>
+            <NavItem eventKey={0}>Dashboard</NavItem>
+            <NavItem eventKey={1}>User Management</NavItem>
+            <NavItem eventKey={4}>Groups &amp; Devices</NavItem>
+            <NavItem eventKey={3}>Data Collector</NavItem>
+            <NavItem eventKey={6}>NoVNC Settings</NavItem>
+            <NavItem eventKey={7}>UI features</NavItem>
+            <NavItem eventKey={8}>Text Templates</NavItem>
+            <NavItem eventKey={2}>Message Publish</NavItem>
+            <NavItem eventKey={5}>Load OLS Terms</NavItem>
+	    {/* <NavItem eventKey={12}>Report-template Management</NavItem> */}
+            <NavItem eventKey={13}>Delayed Jobs </NavItem>
+          </Nav>
+        </Col>
+      </div>
+    );
+  }
+
+  renderDashboard() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <AdminDashboard />
+      </Col>
+    );
+  }
+
+  renderUserManagement() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <UserManagement />
+      </Col>
+    );
+  }
+
+  renderMessagePublish() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <MessagePublish />
+      </Col>
+    );
+  }
+
+  renderDataCollector() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <DataCollector />
+      </Col>
+    );
+  }
+
+  renderGroupMgnt() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <GroupsDevices />
+      </Col>
+    );
+  }
+
+  renderOlsTerms() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <OlsTerms />
+      </Col>
+    );
+  }
+
+  renderNovncSettings() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <NovncSettings />
+      </Col>
+    );
+  }
+
+  renderTextTemplates() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <TextTemplateContainer />
+      </Col>
+    );
+  }
+
+  renderContent(component) {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        {component}
+      </Col>
+    );
+  }
+
+  renderDelayedJobs() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <DelayedJobs />
+      </Col>
+    );
+  }
+
+  renderTemplateManagement() {
+    const { contentClassName } = this.state;
+    return (
+      <Col className={contentClassName} >
+        <TemplateManagement />
+      </Col>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Grid fluid>
+          <Row className="card-navigation">
+            <AdminNavigation toggleTree={this.toggleTree} />
+          </Row>
+          <Row className="card-content container-fluid" >
+            {this.tree()}
+            {this.mainContent()}
+          </Row>
+          <Row>
+            <Notifications />
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default AdminHome;
diff --git a/app/packs/src/admin/AdminNavigation.js b/app/packs/src/admin/AdminNavigation.js
new file mode 100644
index 000000000..d34a6c842
--- /dev/null
+++ b/app/packs/src/admin/AdminNavigation.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Nav, Navbar, MenuItem, NavDropdown } from 'react-bootstrap';
+
+import UserAuth from 'src/components/navigation/UserAuth';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
+
+import NavNewSession from 'src/components/navigation/NavNewSession';
+import DocumentHelper from 'src/utilities/DocumentHelper';
+
+const NavHead = () => (
+  <Navbar.Brand>
+    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
+      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
+      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
+      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
+    </NavDropdown>
+  </Navbar.Brand>
+);
+
+export default class AdminNavigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null,
+    };
+    this.toggleTree = this.toggleTree.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+    UserActions.fetchUnitsSystem();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
+  }
+
+  toggleTree() {
+    this.props.toggleTree();
+  }
+
+  navHeader() {
+    return (
+      <Navbar.Header className="collec-tree">
+        <Navbar.Text style={{ cursor: 'pointer' }}>
+          <i
+            className="fa fa-list"
+            style={{ fontStyle: "normal" }}
+            onClick={this.toggleTree}
+          />
+        </Navbar.Text>
+        <Navbar.Text />
+        <NavHead />
+      </Navbar.Header>
+    );
+  }
+
+  render() {
+    return this.state.currentUser ? (
+      <Navbar fluid className="navbar-custom">
+        {this.navHeader()}
+        <Nav navbar className="navbar-form">
+          <h1>ELN Administration</h1>
+        </Nav>
+        <UserAuth />
+        <div style={{ clear: 'both' }} />
+      </Navbar>
+    ) : (
+      <Navbar fluid className="navbar-custom" >
+        {this.navHeader()}
+        <Nav navbar className="navbar-form" />
+        <div>
+          <h1>ELN Administration</h1>
+        </div>
+        <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />
+        <div style={{ clear: 'both' }} />
+      </Navbar>
+    );
+  }
+}
diff --git a/app/packs/src/admin/DataCollector.js b/app/packs/src/admin/DataCollector.js
new file mode 100644
index 000000000..7898ba776
--- /dev/null
+++ b/app/packs/src/admin/DataCollector.js
@@ -0,0 +1,561 @@
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Button, Table, Modal, Tooltip, OverlayTrigger, FormControl, InputGroup, FormGroup, DropdownButton, MenuItem, Row, Col } from 'react-bootstrap';
+import { startsWith, endsWith } from 'lodash';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import AdminFetcher from 'src/fetchers/AdminFetcher';
+
+const tipCopyClipboard = <Tooltip id="copy_tooltip">copy to clipboard</Tooltip>;
+const tipEditConfig = <Tooltip id="edit_tooltip">edit config</Tooltip>;
+const tipRemoveConfig = <Tooltip id="remove_tooltip">remove config</Tooltip>;
+const tipTestConnect = <Tooltip id="test_tooltip">test connection</Tooltip>;
+const optionsMethod = ['filewatchersftp', 'filewatcherlocal', 'folderwatchersftp', 'folderwatcherlocal'];
+const optionsAuth = ['password', 'keyfile'];
+const Notification = props =>
+(
+  NotificationActions.add({
+    title: `Device [${props.device.name}]`,
+    message: props.msg,
+    level: props.lvl,
+    position: 'tc',
+    dismissible: 'button',
+    uid: uuid.v4()
+  })
+);
+const NotificationError = props => Notification({ ...props, lvl: 'error' });
+const NotificationWarn = props => Notification({ ...props, lvl: 'warning' });
+const ListLocalCollector = props =>
+(
+  <div style={{ margin: '5px', padding: '5px', border: 'thin dashed darkred' }}>
+    <h6 style={{ margin: 'unset' }}><b>Local Collector Dir Configurtaion</b></h6>
+    {
+      props.localCollector.map((c, i) => (
+        <div key={uuid.v4()}>
+          <FormGroup bsSize="small" style={{ marginBottom: 'unset' }}>
+            <InputGroup>
+              <InputGroup.Button>
+                <OverlayTrigger placement="right" overlay={tipCopyClipboard}>
+                  <Button bsSize="xsmall" active className="clipboardBtn" data-clipboard-target={`#copy-input-${i}`} >
+                    <i className="fa fa-clipboard" />
+                  </Button>
+                </OverlayTrigger>
+              </InputGroup.Button>
+              <FormControl
+                id={`copy-input-${i}`}
+                type="text"
+                value={c.path}
+                readOnly
+                style={{ backgroundColor: 'unset', border: 'unset', boxShadow: 'none' }}
+              />
+            </InputGroup>
+          </FormGroup>
+        </div>
+      ))
+    }
+  </div>
+);
+
+ListLocalCollector.propTypes = {
+  localCollector: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const DropdownSelection = props =>
+(
+  <DropdownButton
+    title={props.selected || props.placeholder}
+    key={props.selected}
+    id={`dropdown-${uuid.v4()}`}
+    onSelect={props.onSelect}
+  >
+    {
+      props.options.map(element => (
+        <MenuItem key={element} eventKey={element} disabled={props.disabled}>
+          {element}
+        </MenuItem>
+      ))
+    }
+  </DropdownButton>
+);
+
+DropdownSelection.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func,
+  disabled: PropTypes.bool
+};
+
+DropdownSelection.defaultProps = {
+  selected: null,
+  onSelect: null,
+  disabled: false
+};
+
+class ModelConfig extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedMethod: props.device.data.method || null,
+      selectedAuth: (props.device.data.method_params && props.device.data.method_params.authen)
+        || 'password',
+    };
+    this.handleSave = this.handleSave.bind(this);
+    this.handleSelectMethod = this.handleSelectMethod.bind(this);
+    this.handleSelectAuth = this.handleSelectAuth.bind(this);
+  }
+
+  handleSave(device) {
+    const { selectedMethod, selectedAuth } = this.state;
+
+    if (!selectedMethod) {
+      NotificationError({ device, msg: 'Please select Data Collector Method!' });
+      return false;
+    }
+    if (endsWith(selectedMethod, 'sftp')) {
+      if (!this.refUser || this.refUser.value.trim() === '') {
+        NotificationError({ device, msg: 'Please input User!' });
+        return false;
+      }
+      if (!this.refHost || this.refHost.value.trim() === '') {
+        NotificationError({ device, msg: 'Please input Host!' });
+        return false;
+      }
+      if (selectedAuth === 'keyfile' && (!this.refKey || this.refKey.value.trim() === '')) {
+        NotificationError({ device, msg: 'Use key file, Please input Key path!' });
+        return false;
+      }
+    }
+    if (!this.refDirectory || this.refDirectory.value.trim() === '') {
+      NotificationError({ device, msg: 'Please input Dir!' });
+      return false;
+    }
+    NotificationWarn({ device, msg: 'Warning: Unprocessable files will be deleted from the target directory!' });
+    const params = {
+      id: device.id,
+      data: {
+        method: selectedMethod,
+        method_params: {
+          authen: selectedAuth,
+          dir: this.refDirectory.value.trim(),
+        }
+      }
+    };
+    if (endsWith(selectedMethod, 'sftp')) {
+      params.data.method_params.host = this.refHost.value.trim();
+      params.data.method_params.user = this.refUser.value.trim();
+      if (selectedAuth === 'keyfile') {
+        params.data.method_params.key_name = this.refKey.value.trim();
+      }
+    }
+    if (startsWith(selectedMethod, 'folder')) {
+      params.data.method_params.number_of_files = Math.trunc(this.refNumFiles.value);
+    }
+    AdminFetcher.updateDeviceMethod(params)
+      .then((result) => {
+        if (result.error) {
+          NotificationError({ device, msg: result.error });
+          return false;
+        }
+        this.props.onClose();
+        return true;
+      });
+    return true;
+  }
+
+  handleSelectMethod(e) {
+    this.setState({ selectedMethod: e });
+  }
+
+  handleSelectAuth(e) {
+    this.setState({ selectedAuth: e });
+  }
+
+  render() {
+    const { selectedMethod, selectedAuth } = this.state;
+    const rowStyle = { padding: '8px', display: 'flex' };
+    const colStyle = { textAlign: 'right', marginTop: 'auto', marginBottom: 'auto' };
+
+    return (
+      <Modal
+        bsSize="large"
+        show={this.props.isShow}
+        onHide={this.props.onClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Data Collector Configuration - Device: {this.props.device.name}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Watch method</b>
+            </Col>
+            <Col sm={2} md={2} lg={2}>
+              <DropdownSelection
+                options={optionsMethod}
+                selected={selectedMethod}
+                placeholder="Select method"
+                onSelect={this.handleSelectMethod}
+              />
+            </Col>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>User</b>
+            </Col>
+            <Col sm={6} md={6} lg={6}>
+              <input
+                ref={(ref) => { this.refUser = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputUser"
+                placeholder="e.g. User"
+                required
+                readOnly={endsWith(selectedMethod, 'local')}
+                defaultValue={`${this.props.device.data.method_params && this.props.device.data.method_params.user ? this.props.device.data.method_params.user : ''}`}
+              />
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Host</b>
+            </Col>
+            <Col sm={10} md={10} lg={10}>
+              <input
+                ref={(ref) => { this.refHost = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputHost"
+                placeholder="e.g. google.com"
+                required
+                readOnly={endsWith(selectedMethod, 'local')}
+                defaultValue={`${(this.props.device.data.method_params && this.props.device.data.method_params.host ? this.props.device.data.method_params.host : '')}`}
+              />
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>SFTP auth. with</b>
+            </Col>
+            <Col sm={2} md={2} lg={2}>
+              <DropdownSelection
+                options={optionsAuth}
+                selected={selectedAuth || 'password'}
+                placeholder="Select authentication"
+                onSelect={this.handleSelectAuth}
+                disabled={endsWith(selectedMethod, 'local')}
+              />
+            </Col>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Key file</b>
+            </Col>
+            <Col sm={6} md={6} lg={6} style={{ display: 'flex' }}>
+              <input
+                ref={(ref) => { this.refKey = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputKey"
+                placeholder="e.g. /home/user/.ssh/rsa/eln-privatekey.pem"
+                required
+                readOnly={endsWith(selectedMethod, 'local') || (selectedAuth === 'password')}
+                defaultValue={`${(this.props.device.data.method_params && this.props.device.data.method_params.key_name ? this.props.device.data.method_params.key_name : '')}`}
+              />
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Watch Directory</b>
+            </Col>
+            <Col sm={10} md={10} lg={10}>
+              <input
+                ref={(ref) => { this.refDirectory = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputDirectory"
+                placeholder="e.g. /home/sftp/eln"
+                required
+                defaultValue={`${(this.props.device.data.method_params ? this.props.device.data.method_params.dir : '')}`}
+              />
+              {
+                endsWith(selectedMethod, 'local') ? <ListLocalCollector localCollector={this.props.localCollector} /> : null
+              }
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Number of files</b>
+            </Col>
+            <Col sm={10} md={10} lg={10}>
+              <input
+                ref={(ref) => { this.refNumFiles = ref; }}
+                className="form-control is-invalid"
+                type="number"
+                id="inputNumFiles"
+                min="0"
+                placeholder="e.g. 10"
+                required
+                readOnly={startsWith(selectedMethod, 'file')}
+                defaultValue={`${(this.props.device.data.method_params ? this.props.device.data.method_params.number_of_files : 1)}`}
+              />&nbsp;<span className="fa fa-info-circle" aria-hidden="true">&nbsp;Folderwatcher: set to 0 for a varying number of files</span>
+            </Col>
+          </Row>
+        </Modal.Body>
+        <Modal.Footer style={{ textAlign: 'left' }}>
+          <Button bsStyle="primary" onClick={() => this.props.onClose()}>Close</Button>
+          <Button bsStyle="warning" onClick={() => this.handleSave(this.props.device)}>Save</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ModelConfig.propTypes = {
+  device: PropTypes.shape({
+    name: PropTypes.string,
+    data: PropTypes.shape({
+      method: PropTypes.string,
+      method_params: PropTypes.shape({
+        dir: PropTypes.string,
+        host: PropTypes.string,
+        user: PropTypes.string,
+        authen: PropTypes.string,
+        key_name: PropTypes.string,
+        number_of_files: PropTypes.number
+      })
+    })
+  }).isRequired,
+  localCollector: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isShow: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+class BtnConnect extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { lock: false };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(device) {
+    this.setState({ lock: true });
+    const params = {
+      method: device.data.method,
+      dir: device.data.method_params.dir,
+      host: device.data.method_params.host,
+      user: device.data.method_params.user,
+      authen: device.data.method_params.authen || 'password',
+      key_name: device.data.method_params.key_name,
+    };
+    AdminFetcher.testSFTP(params)
+      .then((result) => {
+        Notification({ device, msg: result.msg || result.error, lvl: result.lvl || 'error' });
+        this.setState({ lock: false });
+      });
+  }
+
+  render() {
+    const { lock } = this.state;
+    return (
+      <OverlayTrigger placement="bottom" overlay={this.props.btnTip} >
+        <Button
+          bsSize="xsmall"
+          // bsStyle="info"
+          onClick={() => this.handleClick(this.props.device)}
+        >
+          {
+            lock ? <i className="fa fa-spin fa-spinner" aria-hidden="true" /> : <i className="fa fa-plug" aria-hidden="true" />
+          }
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
+
+BtnConnect.propTypes = {
+  device: PropTypes.shape({
+    data: PropTypes.shape({
+      method: PropTypes.string,
+      method_params: PropTypes.shape({
+        dir: PropTypes.string,
+        host: PropTypes.string,
+        user: PropTypes.string,
+      })
+    })
+  }).isRequired,
+  btnTip: PropTypes.element.isRequired
+};
+
+export default class DataCollector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      devices: [],
+      selectedDevice: null,
+      localCollector: [],
+      showConfigModal: false,
+    };
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handleDeviceListFetch = this.handleDeviceListFetch.bind(this);
+    this.handleLocalCollectorFetch = this.handleLocalCollectorFetch.bind(this);
+    this.handleConfigModalShow = this.handleConfigModalShow.bind(this);
+    this.handleConfigModalClose = this.handleConfigModalClose.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleDeviceListFetch();
+    this.handleLocalCollectorFetch();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  handleLocalCollectorFetch() {
+    AdminFetcher.fetchLocalCollector()
+      .then((result) => {
+        this.setState({
+          localCollector: result.listLocalCollector,
+        });
+      });
+  }
+
+  handleConfigModalShow(device) {
+    AdminFetcher.fetchDeviceById(device.id)
+      .then((result) => {
+        if (result.device) {
+          const selectedDevice = result.device;
+          this.setState({
+            selectedDevice,
+            showConfigModal: true
+          });
+        }
+      });
+  }
+
+  handleConfigModalClose() {
+    AdminFetcher.fetchDevices()
+      .then((result) => {
+        this.setState({
+          devices: result.devices,
+          showConfigModal: false,
+        });
+      });
+  }
+
+  handleDeviceListFetch() {
+    AdminFetcher.fetchDevices()
+      .then((result) => {
+        this.setState({
+          devices: result.devices,
+        });
+      });
+  }
+
+  handleRemoveConfig(id) {
+    const { devices } = this.state;
+    AdminFetcher.removeDeviceMethod({ id })
+      .then((result) => {
+        devices.splice(devices.findIndex(o => o.id === result.device.id), 1, result.device);
+        this.setState({ devices });
+      });
+  }
+
+  renderConfiModal() {
+    return this.state.showConfigModal ?
+      <ModelConfig
+        device={this.state.selectedDevice}
+        localCollector={this.state.localCollector}
+        isShow={this.state.showConfigModal}
+        onClose={this.handleConfigModalClose}
+      /> : null;
+  }
+
+  render() {
+    const { devices } = this.state;
+
+    const tcolumn = (
+      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
+        <th width="5%" colSpan="2">#</th>
+        <th width="15%">Name</th>
+        <th width="10%">Watch Method</th>
+        <th width="10%">User</th>
+        <th width="15%">Host</th>
+        <th width="5%">SFTP Authentication</th>
+        <th width="10%">Key file Path</th>
+        <th width="25%">Watch Directory</th>
+        <th width="3%">Num. of Files</th>
+        <th width="2%">ID</th>
+      </tr>
+    );
+
+    const tbody = devices.map((device, idx) => (
+      <tr key={`row_${device.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
+        <td>
+          {idx + 1}
+        </td>
+        <td>
+          <OverlayTrigger placement="bottom" overlay={tipEditConfig} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="primary"
+              onClick={() => this.handleConfigModalShow(device)}
+            >
+              <i className="fa fa-pencil" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={tipRemoveConfig} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="danger"
+              onClick={() => this.handleRemoveConfig(device.id)}
+            >
+              <i className="fa fa-eraser" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+        </td>
+        <td> {device.name} </td>
+        <td>
+          {(device.data && device.data.method ? device.data.method : '')}
+          &nbsp;
+          {
+            endsWith(device.data.method, 'sftp') ? <BtnConnect device={device} btnTip={tipTestConnect} /> : null
+          }
+        </td>
+        <td> {(device.data && device.data.method_params ? device.data.method_params.user : '')} </td>
+        <td> {(device.data && device.data.method_params ? device.data.method_params.host : '')} </td>
+        <td>
+          {(device.data && device.data.method_params && device.data.method_params.authen ? device.data.method_params.authen : 'password')}
+        </td>
+        <td> {(device.data && device.data.method_params && device.data.method_params.key_name ? device.data.method_params.key_name : '')} </td>
+        <td> {(device.data && device.data.method_params ? device.data.method_params.dir : '')} </td>
+        <td>
+          {(device.data && device.data.method_params && device.data.method_params.number_of_files ?
+            device.data.method_params.number_of_files : 0)}
+        </td>
+        <td> {device.id} </td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Data Collector
+            </Panel.Title>
+          </Panel.Heading>
+          <Table responsive hover bordered>
+            <thead>
+              {tcolumn}
+            </thead>
+            <tbody>
+              {tbody}
+            </tbody>
+          </Table>
+        </Panel>
+        {this.renderConfiModal()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/DatasetElementAdmin.js b/app/packs/src/admin/DatasetElementAdmin.js
new file mode 100644
index 000000000..bf0ad9378
--- /dev/null
+++ b/app/packs/src/admin/DatasetElementAdmin.js
@@ -0,0 +1,824 @@
+import React from 'react';
+import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy } from 'lodash';
+import LoadingModal from '../components/common/LoadingModal';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import { ElementField } from '../components/elements/ElementField';
+import LoadingActions from '../components/actions/LoadingActions';
+import TemplateJsonModal from './generic/TemplateJsonModal';
+import LayerAttrEditModal from './generic/LayerAttrEditModal';
+import LayerAttrNewModal from './generic/LayerAttrNewModal';
+import FieldCondEditModal from './generic/FieldCondEditModal';
+import SelectAttrNewModal from './generic/SelectAttrNewModal';
+import Preview from './generic/Preview';
+import UploadModal from './generic/UploadModal';
+import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
+
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+export default class DatasetElementAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      newFieldKey: '',
+      newOptionKey: '',
+      layerKey: '',
+      selectOptions: [],
+      unitsSystem: {},
+      showPropModal: false,
+      showNewLayer: false,
+      showEditLayer: false,
+      showAddSelect: false,
+      showUpload: false,
+      showJson: false,
+      propTabKey: 1,
+      revisions: [],
+    };
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.handlePropClose = this.handlePropClose.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    this.onInputNewOption = this.onInputNewOption.bind(this);
+    this.addLayer = this.addLayer.bind(this);
+    this.addSelection = this.addSelection.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.handleSelectClose = this.handleSelectClose.bind(this);
+    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
+    this.handleLayerClose = this.handleLayerClose.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.onOptionInputChange = this.onOptionInputChange.bind(this);
+    this.showJsonModal = this.showJsonModal.bind(this);
+    this.hideJsonModal = this.hideJsonModal.bind(this);
+    this.handleUpdateJson = this.handleUpdateJson.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleDeActive = this.handleDeActive.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.handleUploadShow = this.handleUploadShow.bind(this);
+    this.handleUploadClose = this.handleUploadClose.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchConfigs();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onOptionInputChange(event, selectKey, optionKey) {
+    const { element } = this.state;
+    const options = (element &&
+      element.properties_template && element.properties_template.select_options[selectKey]
+      && element.properties_template.select_options[selectKey].options) || [];
+    const idx = findIndex(options, o => o.key === optionKey);
+    const op = {};
+    op.key = optionKey;
+    op.label = event.target.value;
+    options.splice(idx, 1, op);
+    this.setState({ element });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+    let fobj = null;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobjs = filter(fields, o => o.field === fe);
+      if (fobjs && fobjs.length > 0) {
+        fobj = fobjs[0];
+      }
+    }
+
+    if (layer != null && fobj != null) {
+      switch (fc) {
+        case 'label':
+          fobj.label = value;
+          break;
+        case 'description':
+          fobj.description = value;
+          break;
+        case 'type':
+          fobj.type = value;
+          break;
+        case 'required':
+          fobj.required = !orig;
+          break;
+        case 'formula':
+          fobj.formula = value;
+          break;
+        case 'position':
+          fobj.position = value;
+          break;
+        case 'field':
+          fobj.field = value;
+          break;
+        case 'placeholder':
+          fobj.placeholder = value;
+          break;
+        case 'option_layers':
+          fobj.option_layers = value;
+          break;
+        default:
+          break;
+      }
+      const idx = findIndex(fields, o => o.field === fe);
+      fields.splice(idx, 1, fobj);
+      element.properties_template.layers[lk].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  onInputNewOption(e) {
+    this.setState({ newOptionKey: e.target.value });
+  }
+
+  fetchConfigs() {
+    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  fetchElements() {
+    AdminFetcher.listDatasetKlass()
+      .then((result) => { this.setState({ elements: result.klass }); });
+  }
+
+  handleDeActive(e) {
+    const act = e.is_active ? 'De-active' : 'Active';
+    AdminFetcher.deActiveDatasetKlass({ id: e.id, is_active: !e.is_active })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `${act} Dataset fail`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `${act} Dataset successfully`, lvl: 'info', msg: `${e.label} is ${act.toLowerCase()} now` });
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  handlePropClose() {
+    this.setState({ showPropModal: false });
+  }
+
+  handleFieldCondClose() {
+    this.setState({ showFieldCond: false });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+  addLayer() {
+    this.setState({ showNewLayer: true });
+  }
+
+  addSelection() {
+    this.setState({ showAddSelect: true });
+  }
+
+  showJsonModal(element) {
+    this.setState({ element, showJson: true });
+  }
+
+  hideJsonModal() {
+    this.setState({ showJson: false });
+  }
+
+  editLayer(e) {
+    this.setState({ showEditLayer: true, layerKey: e.layerKey });
+  }
+
+  handleUploadShow() {
+    this.setState({ showUpload: true });
+  }
+
+  handleUploadClose() {
+    this.setState({ showUpload: false });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name!' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key) {
+    const { element, newOptionKey } = this.state;
+
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    const selectObj = (element && element.properties_template
+      && element.properties_template.select_options[key]
+      && element.properties_template.select_options[key].options) || [];
+    const dupops = filter(selectObj, o => o.key === newOptionKey);
+    if (dupops && dupops.length > 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const newOption = { key: newOptionKey, label: newOptionKey };
+    selectObj.push(newOption);
+    element.properties_template.select_options[key].options = selectObj;
+    this.setState({ element });
+  }
+
+  handleNewLayerClose() {
+    this.setState({ showNewLayer: false });
+  }
+
+  handleLayerClose() {
+    this.setState({ showEditLayer: false });
+  }
+
+  handleSelectClose() {
+    this.setState({ showAddSelect: false });
+  }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      AdminFetcher.fetchKlassRevisions(element.id, 'DatasetKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'DatasetKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  handleAddSelect(selectName) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      const sos = element.properties_template.select_options;
+      sos[selectName] = {};
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, showAddSelect: false, selectOptions });
+    }
+    return false;
+  }
+
+  handleCreateLayer(layer) {
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showNewLayer: false, element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates)) return;
+    const { element } = this.state;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    layer = { ...layer, ...updates };
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showEditLayer: false, element });
+  }
+
+  handleUpdateJson(propertiesTemplate) {
+    const { element } = this.state;
+    element.properties_template = propertiesTemplate;
+    this.setState({ element, showJson: false }, this.handleSubmit(false));
+  }
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, selectOptions, showPropModal: true });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    if (valid === false) {
+      this.setState({ showUpload: false });
+      notification({ title: `Upload Template for Dataset [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, showUpload: false });
+      notification({ title: `Upload template to Dataset [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = false;
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+
+    element.is_release = isRelease;
+    AdminFetcher.updateDatasetTemplate(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Update Dataset: [${element.label}] template fail`, lvl: 'error', msg: result.error });
+        } else {
+          if (isRelease === true) {
+            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
+          } else {
+            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved successfully' });
+          }
+          this.fetchElements();
+          this.setState({ element: result }, () => LoadingActions.stop());
+        }
+      }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const options = element.properties_template.select_options[delRoot];
+      const idx = findIndex(options, o => o.key === delKey);
+      options.splice(idx, 1);
+    } else if (delStr === 'Layer') {
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    }
+    this.setState({ element });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    const selects = [];
+    Object.keys(element.properties_template.select_options).forEach((key) => {
+      const soptions = (element.properties_template.select_options[key]
+      && element.properties_template.select_options[key].options) || [];
+      const options = soptions.map(f => (
+        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
+          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}`}>
+            <InputGroup>
+              <InputGroup.Addon>{f.key}</InputGroup.Addon>
+              <FormControl
+                type="text"
+                name="lf_label"
+                defaultValue={f.label}
+                onChange={event => this.onOptionInputChange(event, key, f.key)}
+              />
+              <InputGroup.Button>
+                {this.renderDeleteButton('Option', f.key, key)}
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </div>
+      ));
+
+      const snode = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`select_options_${key}`} >
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>{key}</Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {this.renderDeleteButton('Select', key, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="input_newOption"
+                    onChange={e => this.onInputNewOption(e)}
+                    placeholder="Input new option"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
+                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
+                    </OverlayTrigger>
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse><Panel.Body>{options}</Panel.Body></Panel.Collapse>
+        </Panel>
+      );
+      selects.push(snode);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Select Lists
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ selects }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          genericType="Dataset"
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          select_options={selectOptions}
+          onDrop={() => {}}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnCond}
+                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse><Panel.Body>{fields}</Panel.Body></Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderList() {
+    const { elements, element } = this.state;
+    const tbody = elements && elements.map((e, idx) => (
+      <tbody key={`tbody_${e.id}`}>
+        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
+          <td>{idx + 1}</td>
+          <td>{e.label}</td>
+          <td>
+            {
+              e.is_active ? <ButtonTooltip tip="click to de-active this dataset template (currently active)" fnClick={this.handleDeActive} element={e} fa="fa-check" bs="success" />
+              : <ButtonTooltip tip="click to active this dataset template (currently deactive)" fnClick={this.handleDeActive} element={e} fa="fa-ban" bs="danger" />
+            }
+          </td>
+          <td>
+            <ButtonTooltip tip="Edit Dataset template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
+            <ButtonTooltip tip="Edit Dataset template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
+          </td>
+          <td>{e.released_at} (UTC)</td>
+        </tr>
+      </tbody>
+    ));
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Table responsive condensed hover>
+            <thead>
+              <tr style={{ backgroundColor: '#ddd' }}>
+                <th width="5%">#</th>
+                <th width="45%">Chemical Methods Ontology</th>
+                <th width="10%">Active</th>
+                <th width="20%">Template</th>
+                <th width="18%">Released at</th>
+              </tr>
+            </thead>
+            { tbody }
+          </Table>
+        </Panel.Heading>
+      </Panel>
+    );
+  }
+
+  renderPropPanel() {
+    const { element, showPropModal, revisions, propTabKey } = this.state;
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="uncontrolled-tab-example" onSelect={this.propTabSelect}>
+          <Tab eventKey={1} title="Template">
+            <Panel show={showPropModal.toString()}>
+              <Panel.Heading>
+                <b>{`Properties Template of Dataset [${element.label}]`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}>{this.renderProperties()}</Col>
+                  <Col sm={4}>{this.renderSelectOptions()}</Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+
+      );
+    }
+    return (<div />);
+  }
+
+  render() {
+    const { element, layerKey } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
+
+    return (
+      <div>
+        <div className="list-container-bottom">
+          { this.renderList() }
+          { this.renderPropPanel() }
+          <SelectAttrNewModal
+            showModal={this.state.showAddSelect}
+            fnClose={this.handleSelectClose}
+            fnCreate={this.handleAddSelect}
+          />
+          <LayerAttrNewModal
+            showModal={this.state.showNewLayer}
+            fnClose={this.handleNewLayerClose}
+            fnCreate={this.handleCreateLayer}
+          />
+          <LayerAttrEditModal
+            showModal={this.state.showEditLayer}
+            layer={layer}
+            fnClose={this.handleLayerClose}
+            fnUpdate={this.handleUpdateLayer}
+          />
+          <FieldCondEditModal
+            showModal={this.state.showFieldCond}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.handleFieldCondClose}
+          />
+          <TemplateJsonModal
+            showModal={this.state.showJson}
+            fnClose={this.hideJsonModal}
+            fnUpdate={this.handleUpdateJson}
+            element={this.state.element}
+          />
+          <UploadModal
+            content="Generic Dataset"
+            klass="DatasetKlass"
+            showModal={this.state.showUpload}
+            fnClose={this.handleUploadClose}
+            fnUpload={this.handleUploadTemplate}
+          />
+        </div>
+        <LoadingModal />
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/DelayedJobs.js b/app/packs/src/admin/DelayedJobs.js
new file mode 100644
index 000000000..f9c441947
--- /dev/null
+++ b/app/packs/src/admin/DelayedJobs.js
@@ -0,0 +1,101 @@
+import { Button, OverlayTrigger, Panel, Table, Tooltip } from 'react-bootstrap';
+import React, { Component } from 'react';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+
+const tipRestartJob = <Tooltip id="restart_tooltip">Update run_at</Tooltip>;
+
+export default class DelayedJobs extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      jobs: [],
+    };
+    this.handleFetchJob = this.handleFetchJob.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleFetchJob();
+  }
+
+  handleFetchJob() {
+    AdminFetcher.fetchJobs()
+      .then((result) => {
+        this.setState({
+          jobs: result.jobs,
+        });
+      });
+  }
+
+  handleRestartFetch(id) {
+    AdminFetcher.restartJob({ id })
+      .then(() => this.handleFetchJob());
+  }
+
+  renderShowBtn(job) {
+    // if (job.last_error) {
+    if (true) {
+      return (
+        <OverlayTrigger placement="top" overlay={tipRestartJob}>
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={() => this.handleRestartFetch(job.id)}
+          >
+            <i className="fa fa-play" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>);
+    }
+    return '';
+  }
+
+  render() {
+    const { jobs } = this.state;
+
+    const tcolumn = (
+      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
+        <th width="4%" colSpan="2">ID</th>
+        <th width="5%">Queue</th>
+        <th width="5%">Job Class</th>
+        <th width="5%">Run At</th>
+        <th width="5%">Failed At</th>
+        <th width="4%">Attempts</th>
+        <th width="4%">Priority</th>
+        <th width="50%">Last Errors</th>
+      </tr>
+    );
+
+    const tbody = jobs.map(job => (
+      <tr key={`row_${job.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
+        <td> {job.id} </td>
+        <td> {this.renderShowBtn(job)} </td>
+        <td> {job.queue} </td>
+        <td> {job.handler.split(' ')[4].trim()} </td>
+        <td> {job.run_at} </td>
+        <td> {job.failed_at} </td>
+        <td> {job.attempts} </td>
+        <td> {job.priority} </td>
+        <td><textarea defaultValue={job.last_error} style={{ maxWidth: '100%' }} /></td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Delayed Jobs
+            </Panel.Title>
+          </Panel.Heading>
+          <Table responsive hover bordered>
+            <thead>
+              { tcolumn }
+            </thead>
+            <tbody>
+              { tbody }
+            </tbody>
+          </Table>
+        </Panel>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/DeleteGroupDeviceButton.js b/app/packs/src/admin/DeleteGroupDeviceButton.js
new file mode 100644
index 000000000..299bce3f4
--- /dev/null
+++ b/app/packs/src/admin/DeleteGroupDeviceButton.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Button, ButtonGroup, Popover, OverlayTrigger } from 'react-bootstrap';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+
+export default class DeleteGroupDeviceButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groups: props.currentState.groups,
+      devices: props.currentState.devices
+    };
+
+    this.onChangeGroupData = this.onChangeGroupData.bind(this);
+    this.onChangeDeviceData = this.onChangeDeviceData.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  onChangeGroupData = (groups) => {
+    this.props.onChangeGroupData(groups);
+  }
+
+  onChangeDeviceData = (devices) => {
+    this.props.onChangeDeviceData(devices);
+  }
+
+  confirmDelete(rootType, actionType, groupRec, userRec, isRoot = false) {
+    const { groups, devices } = this.state;
+    const rmUsers = userRec == null ? [] : [userRec.id];
+
+    const params = {
+      action: isRoot ? 'RootDel' : 'NodeDel',
+      rootType,
+      actionType,
+      id: groupRec.id,
+      destroy_obj: isRoot,
+      rm_users: rmUsers
+    };
+
+    AdminFetcher.updateGroup(params)
+      .then((result) => {
+        switch (rootType) {
+          case 'Group':
+            this.onChangeGroupData();
+            break;
+          case 'Device':
+            this.onChangeDeviceData();
+            break;
+          default:
+            break;
+        }
+      });
+  }
+
+  render() {
+    const {rootType, actionType, groupRec, userRec, isRoot} = this.props;
+    let msg = 'remove yourself from the group';
+    if (rootType === 'Group' && isRoot) {
+      msg = `remove group: ${groupRec.name}`;
+    } else if (rootType === 'Device' && isRoot) {
+      msg = `remove device: ${groupRec.name}`;
+    } else if (rootType === 'Group' && !isRoot && actionType === 'Person') {
+      msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;
+    } else if (rootType === 'Group' && !isRoot && actionType === 'Device') {
+      msg = `remove device: ${userRec.name} from group: ${groupRec.name} ?`;
+    } else if (rootType === 'Device' && !isRoot) {
+      msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;
+    } else {
+      msg = `remove ???: ${groupRec.name}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(rootType, actionType, groupRec, userRec, isRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
+            No
+          </Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <ButtonGroup className="actions">
+        <OverlayTrigger
+          animation
+          placement="right"
+          root
+          trigger="focus"
+          overlay={popover}
+        >
+          <Button bsSize="xsmall" bsStyle="danger" >
+            <i className="fa fa-trash-o" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+  }
+}
diff --git a/app/packs/src/admin/GenericElementAdmin.js b/app/packs/src/admin/GenericElementAdmin.js
new file mode 100644
index 000000000..81238d746
--- /dev/null
+++ b/app/packs/src/admin/GenericElementAdmin.js
@@ -0,0 +1,1013 @@
+import React from 'react';
+import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy, orderBy } from 'lodash';
+import LoadingModal from '../components/common/LoadingModal';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import { ElementField } from '../components/elements/ElementField';
+import LoadingActions from '../components/actions/LoadingActions';
+import AttrNewModal from './generic/AttrNewModal';
+import AttrEditModal from './generic/AttrEditModal';
+import AttrCopyModal from './generic/AttrCopyModal';
+import FieldCondEditModal from './generic/FieldCondEditModal';
+import TemplateJsonModal from './generic/TemplateJsonModal';
+import LayerAttrEditModal from './generic/LayerAttrEditModal';
+import LayerAttrNewModal from './generic/LayerAttrNewModal';
+import SelectAttrNewModal from './generic/SelectAttrNewModal';
+import Preview from './generic/Preview';
+import UploadModal from './generic/UploadModal';
+import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
+
+const validateKlass = klass => (/\b[a-z]{3,5}\b/g.test(klass));
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+const validateInput = (element) => {
+  if (element.name === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element.' });
+    return false;
+  }
+  if (element.klass_prefix === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Prefix.' });
+    return false;
+  }
+  if (element.label === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element Label.' });
+    return false;
+  }
+  if (element.icon_name === '') {
+    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Icon.' });
+    return false;
+  }
+  return true;
+};
+
+export default class GenericElementAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      newFieldKey: '',
+      newOptionKey: '',
+      layerKey: '',
+      fieldObj: {},
+      layer: {},
+      selectOptions: [],
+      unitsSystem: {},
+      showPropModal: false,
+      showNewLayer: false,
+      showEditLayer: false,
+      showAddSelect: false,
+      showNewKlass: false,
+      showEditKlass: false,
+      showCopyKlass: false,
+      showFieldCond: false,
+      showUpload: false,
+      showJson: false,
+      propTabKey: 1,
+      revisions: [],
+    };
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.fetchElements = this.fetchElements.bind(this);
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.handlePropClose = this.handlePropClose.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    this.onInputNewOption = this.onInputNewOption.bind(this);
+    this.addLayer = this.addLayer.bind(this);
+    this.addSelection = this.addSelection.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    this.newKlass = this.newKlass.bind(this);
+    this.editKlass = this.editKlass.bind(this);
+    this.copyKlass = this.copyKlass.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.updSubField = this.updSubField.bind(this);
+    this.updLayerSubField = this.updLayerSubField.bind(this);
+    this.handleSelectClose = this.handleSelectClose.bind(this);
+    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
+    this.handleLayerClose = this.handleLayerClose.bind(this);
+    this.handleNewKlassClose = this.handleNewKlassClose.bind(this);
+    this.handleKlassClose = this.handleKlassClose.bind(this);
+    this.handleCopyKlassClose = this.handleCopyKlassClose.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleCreateKlass = this.handleCreateKlass.bind(this);
+    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
+    this.handleActivateKlass = this.handleActivateKlass.bind(this);
+    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.onOptionInputChange = this.onOptionInputChange.bind(this);
+    this.showJsonModal = this.showJsonModal.bind(this);
+    this.hideJsonModal = this.hideJsonModal.bind(this);
+    this.handleUpdateJson = this.handleUpdateJson.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.handleUploadShow = this.handleUploadShow.bind(this);
+    this.handleUploadClose = this.handleUploadClose.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchConfigs();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onOptionInputChange(event, selectKey, optionKey) {
+    const { element } = this.state;
+    const options = (element &&
+      element.properties_template && element.properties_template.select_options[selectKey] && element.properties_template.select_options[selectKey].options) || [];
+    const idx = findIndex(options, o => o.key === optionKey);
+    const op = {};
+    op.key = optionKey;
+    op.label = event.target.value;
+    options.splice(idx, 1, op);
+    this.setState({ element });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldSubFieldChange(lk, f, cb) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobj = (fields || []).find(o => o.field === f.field);
+      if (Object.keys(fobj).length > 0) {
+        const idx = (fields || []).findIndex(o => o.field === f.field);
+        fields.splice(idx, 1, f);
+        element.properties_template.layers[lk].fields = fields;
+        this.setState({ element }, cb);
+      }
+    }
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    if (typeof layer === 'undefined' || layer == null) return;
+
+    const { fields } = layer;
+
+    if (fields == null || fields.length === 0) return;
+
+    const fobj = fields.find(e => e.field === fe);
+    if (Object.keys(fobj).length === 0) return;
+
+    switch (fc) {
+      case 'required':
+        fobj.required = !orig;
+        break;
+      default:
+        fobj[`${fc}`] = value;
+        break;
+    }
+    const idx = findIndex(fields, o => o.field === fe);
+    fields.splice(idx, 1, fobj);
+    element.properties_template.layers[lk].fields = fields;
+    this.setState({ element });
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  onInputNewOption(e) {
+    this.setState({ newOptionKey: e.target.value });
+  }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  updSubField(layerKey, field, cb) {
+    this.onFieldSubFieldChange(layerKey, field, cb);
+  }
+
+  updLayerSubField(layerKey, layer) {
+    const { element } = this.state;
+    element.properties_template.layers[`${layerKey}`] = layer;
+    this.setState({ element });
+  }
+
+  handleFieldCondClose() {
+    this.setState({ showFieldCond: false });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+  addLayer() {
+    this.setState({ showNewLayer: true });
+  }
+
+  addSelection() {
+    this.setState({ showAddSelect: true });
+  }
+
+  showJsonModal(element) {
+    this.setState({ element, showJson: true });
+  }
+
+  hideJsonModal() {
+    this.setState({ showJson: false });
+  }
+
+  editLayer(e) {
+    this.setState({ showEditLayer: true, layerKey: e.layerKey });
+  }
+
+  newKlass() {
+    this.setState({ showNewKlass: true });
+  }
+
+  editKlass(element) {
+    this.setState({ showEditKlass: true, element });
+  }
+
+  copyKlass(element) {
+    this.setState({ showCopyKlass: true, element });
+  }
+
+  handleUploadShow() {
+    this.setState({ showUpload: true });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key) {
+    const { element, newOptionKey } = this.state;
+
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    const selectObj = (element && element.properties_template
+      && element.properties_template.select_options[key]
+      && element.properties_template.select_options[key].options) || [];
+    const dupops = filter(selectObj, o => o.key === newOptionKey);
+    if (dupops && dupops.length > 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const newOption = { key: newOptionKey, label: newOptionKey };
+    selectObj.push(newOption);
+    element.properties_template.select_options[key].options = selectObj;
+    this.setState({ element });
+  }
+
+  handleNewLayerClose() {
+    this.setState({ showNewLayer: false });
+  }
+
+  handleLayerClose() {
+    this.setState({ showEditLayer: false });
+  }
+
+  handleNewKlassClose() {
+    this.setState({ showNewKlass: false });
+  }
+
+  handleKlassClose() {
+    this.setState({ showEditKlass: false });
+  }
+
+  handleCopyKlassClose() {
+    this.setState({ showCopyKlass: false });
+  }
+
+  handleUploadClose() {
+    this.setState({ showUpload: false });
+  }
+
+  handleSelectClose() {
+    this.setState({ showAddSelect: false });
+  }
+
+  handleAddSelect(selectName) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      const sos = element.properties_template.select_options && element.properties_template.select_options;
+      sos[selectName] = { desc: selectName, options: [] };
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, showAddSelect: false, selectOptions });
+    }
+    return false;
+  }
+
+  handleCreateLayer(layer) {
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showNewLayer: false, element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates)) return;
+    const { element } = this.state;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    layer = { ...layer, ...updates };
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showEditLayer: false, element });
+  }
+
+  handleCreateKlass(element) {
+    if (!validateInput(element)) return;
+    if (!validateKlass(element.name)) {
+      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is invalid, please try a different one.' });
+      return;
+    }
+    const { elements } = this.state;
+    const existKlass = elements.filter(el => el.name === element.name);
+    if (existKlass.length > 0) {
+      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is already taken. Please choose another one.' });
+      return;
+    }
+    AdminFetcher.createElementKlass(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Created successfully' });
+          this.handleNewKlassClose();
+          this.handleCopyKlassClose();
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleUpdateKlass(element, updates) {
+    const inputs = { ...element, ...updates };
+    if (!validateInput(inputs)) return;
+    AdminFetcher.updateElementKlass(inputs)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: `Element [${inputs.name}]`, lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Element [${inputs.name}]`, lvl: 'info', msg: 'Updated successfully' });
+          this.handleKlassClose();
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleActivateKlass(id, isActive) {
+    AdminFetcher.activeInActiveElementKlass({ klass_id: id, is_active: !isActive })
+      .then((result) => {
+        notification({ title: `Element [${result.name}]`, lvl: 'info', msg: `Element is ${result.is_active ? 'active' : 'deactive'} now` });
+        this.handleKlassClose();
+        this.fetchElements();
+      });
+  }
+
+  handleDeleteKlass(element) {
+    AdminFetcher.deleteElementKlass({ klass_id: element.id })
+      .then(() => {
+        notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
+        this.handleKlassClose();
+        this.fetchElements();
+      });
+  }
+
+  handleUpdateJson(propertiesTemplate) {
+    const { element } = this.state;
+    element.properties_template = propertiesTemplate;
+    this.setState({
+      element,
+      showJson: false
+    });
+    this.handleSubmit(false);
+  }
+
+  fetchConfigs() {
+    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  handlePropClose() {
+    this.setState({ showPropModal: false });
+  }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      AdminFetcher.fetchKlassRevisions(element.id, 'ElementKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'ElementKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({
+        element, selectOptions, showPropModal: true, propTabKey: 1
+      });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    if (valid === false) {
+      this.setState({ showUpload: false });
+      notification({ title: `Upload Template for Element [${element.name}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, showUpload: false });
+      notification({ title: `Upload template to Element [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  fetchElements() {
+    AdminFetcher.fetchElementKlasses()
+      .then((result) => {
+        this.setState({ elements: result.klass.filter(k => k.is_generic) });
+      });
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = ['integer', 'text'].includes(fd.type) ? fd.required : false;
+        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
+        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+
+    element.is_release = isRelease;
+    AdminFetcher.updateGElTemplates(element)
+      .then((result) => {
+        if (isRelease === true) {
+          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
+        } else {
+          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
+        }
+        this.fetchElements();
+        this.setState({ element: result }, () => LoadingActions.stop());
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const options = element.properties_template.select_options[delRoot];
+      const idx = findIndex(options, o => o.key === delKey);
+      options.splice(idx, 1);
+    } else if (delStr === 'Layer') {
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    } else {
+      //
+    }
+    this.setState({ element });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    const selects = [];
+
+    Object.keys(element.properties_template.select_options).forEach((key) => {
+      const soptions = (element.properties_template.select_options[key] && element.properties_template.select_options[key].options) || [];
+      const options = (soptions || []).map(f => (
+        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
+          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}_${key}`}>
+            <InputGroup>
+              <InputGroup.Addon>{f.key}</InputGroup.Addon>
+              <FormControl
+                type="text"
+                name="lf_label"
+                defaultValue={f.label}
+                onChange={event => this.onOptionInputChange(event, key, f.key)}
+              />
+              <InputGroup.Button>
+                {this.renderDeleteButton('Option', f.key, key)}
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </div>
+      ));
+
+      const snode = (
+        <Panel key={`selection_option_${key}`} className="panel_generic_properties" defaultExpanded>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {key}
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {this.renderDeleteButton('Select', key, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="input_newOption"
+                    onChange={e => this.onInputNewOption(e)}
+                    placeholder="Input new option"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
+                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
+                    </OverlayTrigger>
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              {options}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      selects.push(snode);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Select Lists
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body>
+            <div>
+              { selects }
+            </div>
+          </Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          layer={layer}
+          select_options={selectOptions}
+          onDrop={e => this.onFieldDrop(e)}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onFieldSubFieldChange={this.onFieldSubFieldChange}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnCond}
+                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
+              {fields}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderPropPanel() {
+    const {
+      element, showPropModal, revisions, propTabKey
+    } = this.state;
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="uncontrolled-tab-example" onSelect={this.propTabSelect}>
+          <Tab eventKey={1} title="Template">
+            <Panel show={showPropModal.toString()}>
+              <Panel.Heading>
+                <b>{`Template of Element [${element.name}]`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <ButtonTooltip tip="Upload Element template in JSON format" fnClick={this.handleUploadShow} element={element} place="top" fa="fa-upload" />&nbsp;
+                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}> {this.renderProperties()} </Col>
+                  <Col sm={4}> {this.renderSelectOptions()} </Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+      );
+    }
+    return (<div />);
+  }
+
+  renderList() {
+    const { elements, element } = this.state;
+    const els = orderBy(elements, ['is_active', 'name', 'klass_prefix'], ['desc', 'asc', 'asc']);
+    const tbody = els && els.map((e, idx) => (
+      <tbody key={`tbody_${e.id}`}>
+        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', backgroundColor: 'white', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
+          <td>{idx + 1}</td>
+          <td>
+            <ButtonTooltip tip="copy to ..." fa="fa fa-clone" element={e} fnClick={this.copyKlass} />
+            &nbsp;
+            <ButtonTooltip tip="Edit Element attributes" element={e} fnClick={this.editKlass} />
+            &nbsp;
+          </td>
+          <td>{e.name}</td>
+          <td>{e.klass_prefix}</td>
+          <td>
+            {
+              e.is_active ? <i className="fa fa-check" aria-hidden="true" style={{ color: 'green' }} /> : <i className="fa fa-ban" aria-hidden="true" style={{ color: 'red' }} />
+            }
+          </td>
+          <td>{e.label}</td>
+          <td><i className={e.icon_name} /></td>
+          <td>{e.desc}</td>
+          <td>
+            <ButtonTooltip tip="Edit Element template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
+            <ButtonTooltip tip="Edit Element template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
+          </td>
+          <td>{e.released_at} (UTC)</td>
+        </tr>
+      </tbody>
+    ));
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Table responsive condensed hover>
+            <thead>
+              <tr style={{ backgroundColor: '#ddd' }}>
+                <th width="4%">#</th>
+                <th width="6%">Actions</th>
+                <th width="10%">Element</th>
+                <th width="6%">Prefix</th>
+                <th width="8%">Active</th>
+                <th width="12%">Element Label</th>
+                <th width="6%">Icon</th>
+                <th width="16%">Description</th>
+                <th width="12%">Template</th>
+                <th width="18%">Released at</th>
+              </tr>
+            </thead>
+            { tbody }
+          </Table>
+        </Panel.Heading>
+      </Panel>
+    );
+  }
+
+  render() {
+    const { element, layerKey } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+
+    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
+
+    return (
+      <div>
+        <Button bsStyle="primary" bsSize="small" onClick={() => this.newKlass()}>
+          New Element&nbsp;<i className="fa fa-plus" aria-hidden="true" />
+        </Button>
+        &nbsp;
+        <br />
+        <div className="list-container-bottom">
+          { this.renderList() }
+          { this.renderPropPanel() }
+          <SelectAttrNewModal
+            showModal={this.state.showAddSelect}
+            fnClose={this.handleSelectClose}
+            fnCreate={this.handleAddSelect}
+          />
+          <LayerAttrNewModal
+            showModal={this.state.showNewLayer}
+            fnClose={this.handleNewLayerClose}
+            fnCreate={this.handleCreateLayer}
+          />
+          <LayerAttrEditModal
+            showModal={this.state.showEditLayer}
+            layer={layer}
+            fnClose={this.handleLayerClose}
+            fnUpdate={this.handleUpdateLayer}
+          />
+          <TemplateJsonModal
+            showModal={this.state.showJson}
+            fnClose={this.hideJsonModal}
+            fnUpdate={this.handleUpdateJson}
+            element={this.state.element}
+          />
+          <AttrNewModal
+            content="Element"
+            showModal={this.state.showNewKlass}
+            fnClose={this.handleNewKlassClose}
+            fnCreate={this.handleCreateKlass}
+          />
+          <AttrEditModal
+            content="Element"
+            showModal={this.state.showEditKlass}
+            element={this.state.element}
+            fnClose={this.handleKlassClose}
+            fnDelete={this.handleDeleteKlass}
+            fnActivate={this.handleActivateKlass}
+            fnUpdate={this.handleUpdateKlass}
+          />
+          <FieldCondEditModal
+            showModal={this.state.showFieldCond}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.handleFieldCondClose}
+          />
+          <AttrCopyModal
+            content="Element"
+            showModal={this.state.showCopyKlass}
+            element={this.state.element}
+            fnClose={this.handleCopyKlassClose}
+            fnCopy={this.handleCreateKlass}
+          />
+          <UploadModal
+            content="Generic Elements"
+            klass="ElementKlass"
+            showModal={this.state.showUpload}
+            fnClose={this.handleUploadClose}
+            fnUpload={this.handleUploadTemplate}
+          />
+        </div>
+        <LoadingModal />
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/GroupsDevices.js b/app/packs/src/admin/GroupsDevices.js
new file mode 100644
index 000000000..96fa4df06
--- /dev/null
+++ b/app/packs/src/admin/GroupsDevices.js
@@ -0,0 +1,809 @@
+import React from 'react';
+import { Modal, Panel, Table, Button, FormGroup, ControlLabel, Form, Tooltip, ButtonGroup, FormControl, Popover, OverlayTrigger, Col, Row } from 'react-bootstrap';
+import Select from 'react-select';
+import moment from 'moment';
+import { findIndex, filter } from 'lodash';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+
+import AdminGroupElement from './AdminGroupElement';
+import AdminDeviceElement from './AdminDeviceElement';
+export default class GroupsDevices extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groups: [],
+      devices: [],
+      showModal: false,
+      showCreateModal: false,
+      showDeviceMetadataModal: false,
+      rootType: '', // Group, Device
+      actionType: 'Person', // Person Group Device Adm
+      root: {},
+      device: {},
+      deviceMetadata: {
+        dates: []
+      }
+    };
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.loadUserByNameType = this.loadUserByNameType.bind(this);
+    this.handleShowModal = this.handleShowModal.bind(this);
+    this.handleShowDeviceMetadataModal = this.handleShowDeviceMetadataModal.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleCloseDeviceMetadata = this.handleCloseDeviceMetadata.bind(this);
+    this.handleShowCreateModal = this.handleShowCreateModal.bind(this);
+    this.handleCloseGroup = this.handleCloseGroup.bind(this);
+    this.handleGroupChange = this.handleGroupChange.bind(this);
+    this.handleDeviceChange = this.handleDeviceChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetch('Group');
+    this.fetch('Device');
+  }
+
+  componentWillUnmount() {
+  }
+
+  handleGroupChange() {
+    this.fetch('Group');
+  }
+
+  handleDeviceChange() {
+    this.fetch('Device');
+  }
+
+  setGroupAdmin(groupRec, userRec, setAdmin = true) {
+    const { groups } = this.state;
+    const params = {
+      action: 'NodeAdm',
+      rootType: 'Group',
+      actionType: 'Adm',
+      id: groupRec.id,
+      admin_id: userRec.id,
+      set_admin: setAdmin
+    };
+    AdminFetcher.updateGroup(params)
+      .then((result) => {
+        if (setAdmin) {
+          groupRec.admins.splice(1, 0, userRec);
+        } else {
+          const usrIdx = findIndex(groupRec.admins, o => o.id === userRec.id);
+          groupRec.admins.splice(usrIdx, 1);
+        }
+        const idx = findIndex(groups, o => o.id === groupRec.id);
+        groups.splice(idx, 1, groupRec);
+        this.setState({ groups });
+      });
+  }
+
+  fetch(type) {
+    AdminFetcher.fetchGroupsDevices(type)
+      .then((result) => {
+        switch (type) {
+          case 'Group':
+            this.setState({ groups: result.list });
+            break;
+          case 'Device':
+            this.setState({ devices: result.list });
+            break;
+          default:
+            break;
+        }
+      });
+  }
+
+  fetchDevices(type = 'Device') {
+    AdminFetcher.fetchGroupsDevices(type)
+      .then((result) => {
+        this.setState({
+          devices: result.list
+        });
+      });
+  }
+
+  handlefetchDeviceMetadataByDeviceId(deviceID) {
+    AdminFetcher.fetchDeviceMetadataByDeviceId(deviceID)
+      .then((result) => {
+        if (result.device_metadata) {
+          this.setState({
+            deviceMetadata: result.device_metadata
+          });
+        }
+      });
+  }
+
+  handleShowModal(root, rootType, actionType) {
+    this.setState({
+      showModal: true,
+      actionType,
+      rootType,
+      root
+    });
+  }
+
+  handleClose() {
+    this.setState({
+      showModal: false,
+      rootType: '',
+      actionType: '',
+      root: null
+    });
+  }
+
+  handleShowDeviceMetadataModal(device) {
+    this.setState({
+      showDeviceMetadataModal: true,
+      device
+    });
+    this.handlefetchDeviceMetadataByDeviceId(device.id);
+  }
+
+  handleCloseDeviceMetadata() {
+    this.setState({
+      showDeviceMetadataModal: false,
+      device: {},
+      deviceMetadata: {}
+    });
+  }
+
+  deviceMetadataDoiExists() {
+    return this.state.deviceMetadata.doi
+  }
+
+  handleShowCreateModal(rootType) {
+    this.setState({
+      showCreateModal: true,
+      rootType
+    });
+  }
+
+  handleCloseGroup() {
+    this.setState({ showCreateModal: false });
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  loadUserByNameType(input) {
+    const { actionType } = this.state;
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return AdminFetcher.fetchUsersByNameType(input, actionType)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.user_type == actionType)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  createGroup() {
+    const { groups, devices, rootType } = this.state;
+    const param = {
+      rootType,
+      first_name: this.firstInput.value.trim(),
+      last_name: this.lastInput.value.trim(),
+      name_abbreviation: this.abbrInput.value.trim()
+    };
+
+    if (this.emailInput.value.trim().length > 0) {
+      param.email = this.emailInput.value.trim();
+    }
+
+    AdminFetcher.createGroupDevice(param)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          switch (rootType) {
+            case 'Group':
+              groups.push(result);
+              this.setState({
+                groups,
+                showCreateModal: false
+              });
+              break;
+            case 'Device':
+              devices.push(result);
+              this.setState({
+                devices,
+                showCreateModal: false
+              });
+              break;
+            default:
+              break;
+          }
+        }
+      });
+  }
+
+  syncDeviceMetadataFromDataCite(deviceId) {
+    AdminFetcher.postDeviceMetadata({
+      doi: this.doi.value.trim(),
+      device_id: deviceId
+    }).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      } else if (result.device_metadata) {
+        this.setState({
+          deviceMetadata: result.device_metadata
+        });
+        this.doi.value = result.device_metadata.doi;
+      }
+    });
+  }
+
+  syncDeviceMetadataToDataCite(deviceId) {
+    AdminFetcher.syncDeviceMetadataToDataCite({
+      device_id: deviceId
+    }).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      } else if (result.device_metadata) {
+        this.setState({
+          deviceMetadata: result.device_metadata
+        });
+      }
+    });
+  }
+
+  saveDeviceMetadata(deviceId) {
+    // TODO: add Validations
+    AdminFetcher.postDeviceMetadata({
+      // TODO: add more Attributes:
+      // t.string   "publisher"
+
+      device_id: deviceId,
+      data_cite_state: this.state.deviceMetadata.data_cite_state,
+      url: this.url.value.trim(),
+      landing_page: this.landing_page.value.trim(),
+      name: this.name.value.trim(),
+      description: this.description.value.trim(),
+      publication_year: this.publication_year.value.trim(),
+      dates: this.state.deviceMetadata.dates
+
+    }).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      } else if (result.device_metadata) {
+        this.setState({
+          deviceMetadata: result.device_metadata
+        });
+      }
+    });
+  }
+
+  addDeviceMetadataDate() {
+    this.setState((state) => {
+      const newDateItem = {
+        date: '',
+        dateType: ''
+      };
+      const { deviceMetadata } = state;
+      const currentDates = deviceMetadata.dates ? deviceMetadata.dates : [];
+      const newDates = currentDates.concat(newDateItem);
+      deviceMetadata.dates = newDates;
+
+      return {
+        deviceMetadata
+      };
+    });
+  }
+
+  removeDeviceMetadataDate(index) {
+    this.setState((state) => {
+      const { deviceMetadata } = state;
+      const currentDates = deviceMetadata.dates ? deviceMetadata.dates : [];
+      currentDates.splice(index, 1);
+      deviceMetadata.dates = currentDates;
+
+      return deviceMetadata;
+    });
+  }
+
+  updateDeviceMetadataDate(index, fieldname, value) {
+    this.setState((state) => {
+      const { deviceMetadata } = state;
+      deviceMetadata.dates[index][fieldname] = value;
+
+      return deviceMetadata;
+    });
+  }
+
+  updateDeviceMetadataDataCiteState(value) {
+    this.setState((state) => {
+      const { deviceMetadata } = state;
+      deviceMetadata.data_cite_state = value;
+
+      return deviceMetadata;
+    });
+  }
+
+  confirmDelete(rootType, actionType, groupRec, userRec, isRoot = false) {
+    const { groups, devices } = this.state;
+    const rmUsers = userRec == null ? [] : [userRec.id];
+
+    const params = {
+      action: isRoot ? 'RootDel' : 'NodeDel',
+      rootType,
+      actionType,
+      id: groupRec.id,
+      destroy_obj: isRoot,
+      rm_users: rmUsers
+    };
+
+    AdminFetcher.updateGroup(params)
+      .then((result) => {
+        switch (rootType) {
+          case 'Group':
+            if (isRoot === true) {
+              this.setState({
+                groups: filter(this.state.groups, o => o.id != groupRec.id),
+              });
+            } else {
+              const idx = findIndex(groups, o => o.id === result.root.id);
+              groups.splice(idx, 1, result.root);
+              this.setState({ groups });
+            }
+            this.fetch('Device');
+            break;
+          case 'Device':
+            if (isRoot === true) {
+              this.setState({
+                devices: filter(this.state.devices, o => o.id !== groupRec.id),
+              });
+            } else {
+              const idx = findIndex(devices, o => o.id === result.root.id);
+              devices.splice(idx, 1, result.root);
+              this.setState({ devices });
+            }
+            this.fetch('Group');
+            break;
+          default:
+            break;
+        }
+      });
+  }
+
+  addToRoot(groupRec) {
+    const {
+      selectedUsers,
+      groups,
+      devices,
+      rootType,
+      actionType
+    } = this.state;
+
+    const userIds = [];
+    selectedUsers.map((g) => {
+      userIds.push(g.value);
+      return true;
+    });
+
+    const params = {
+      action: 'NodeAdd',
+      rootType,
+      actionType,
+      id: groupRec.id,
+      add_users: userIds
+    };
+    let idx = -1;
+    AdminFetcher.updateGroup(params)
+      .then((result) => {
+        switch (rootType) {
+          case 'Group':
+            idx = findIndex(groups, o => o.id === result.root.id);
+            groups.splice(idx, 1, result.root);
+            this.fetch('Device');
+            break;
+          case 'Device':
+            idx = findIndex(devices, o => o.id === result.root.id);
+            devices.splice(idx, 1, result.root);
+            this.fetch('Group');
+            break;
+          default:
+            break;
+        }
+        this.setState({ selectedUsers: null, showModal: false });
+      });
+  }
+
+  renderGroups() {
+    const { groups } = this.state;
+    const adminIcon = (<OverlayTrigger placement="top" overlay={<Tooltip id="admin">Group Administrator</Tooltip>}><i className="fa fa-key" /></OverlayTrigger>);
+    let tbody = '';
+    if (Object.keys(groups).length <= 0) {
+      tbody = '';
+    } else {
+      tbody = groups.map((g, idx) => (
+        <AdminGroupElement groupElement={g} index={idx} currentState={this.state}
+        onChangeGroupData={this.handleGroupChange} onShowModal={this.handleShowModal}></AdminGroupElement>
+      ));
+    }
+
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Panel.Title>
+            Group List &nbsp;
+            ({groups.length}) &nbsp;
+            <Button bsStyle="default" onClick={() => this.handleShowCreateModal('Group')}>Add New Group</Button>
+          </Panel.Title>
+        </Panel.Heading>
+        <Table responsive condensed hover>
+          <thead>
+            <tr style={{ backgroundColor: '#ddd' }}>
+              <th width="5%">#</th>
+              <th width="25%">Actions</th>
+              <th width="20%">Name</th>
+              <th width="10%">Kürzel</th>
+              <th width="20%">Admin by</th>
+              <th width="20%">Email</th>
+            </tr>
+          </thead>
+          { tbody }
+        </Table>
+      </Panel>
+    );
+  }
+
+  renderDevices() {
+    const { devices } = this.state;
+
+    let tbody = '';
+    if (typeof (devices) !== 'undefined' && Object.keys(devices).length <= 0) {
+      tbody = '';
+    } else {
+      tbody = devices && devices.map((device, idx) => (
+        <AdminDeviceElement deviceElement={device} index={idx} currentState={this.state}
+        onChangeDeviceData={this.handleDeviceChange} onShowModal={this.handleShowModal} onShowDeviceMetadataModal={this.handleShowDeviceMetadataModal}></AdminDeviceElement>
+      ));
+    }
+
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Panel.Title>
+            Device List &nbsp; ({devices.length}) &nbsp;
+            <Button bsStyle="default" onClick={() => this.handleShowCreateModal('Device')}>Add New Device</Button>
+          </Panel.Title>
+        </Panel.Heading>
+        <Table responsive condensed hover>
+          <thead>
+            <tr style={{ backgroundColor: '#ddd' }}>
+              <th width="4%">#</th>
+              <th width="28%">Actions</th>
+              <th width="28%">Name</th>
+              <th width="12%">Kürzel</th>
+              <th width="28%">Email</th>
+            </tr>
+          </thead>
+          { tbody }
+        </Table>
+      </Panel>
+    );
+  }
+
+  renderCreateModal() {
+    const { showCreateModal, rootType } = this.state;
+    const title = (rootType === 'Group') ? 'Add new group' : 'Add new device';
+    return (
+      <Modal
+        show={showCreateModal}
+        onHide={this.handleCloseGroup}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>
+                {title}
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Form>
+                <FormGroup controlId="formInlineName">
+                  <ControlLabel>Name*</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    inputRef={(m) => { this.firstInput = m; }}
+                    placeholder="eg: AK"
+                  />
+                </FormGroup>
+                <FormGroup controlId="formInlineName">
+                  <FormControl
+                    type="text"
+                    inputRef={(m) => { this.lastInput = m; }}
+                    placeholder="J. Moriarty"
+                  />
+                </FormGroup>&nbsp;&nbsp;
+                <FormGroup controlId="formInlineNameAbbr">
+                  <ControlLabel>Name abbreviation* </ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    inputRef={(m) => { this.abbrInput = m; }}
+                    placeholder="AK-JM"
+                  />
+                </FormGroup>&nbsp;&nbsp;
+                <FormGroup controlId="formInlineEmail">
+                  <ControlLabel>Email</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    inputRef={(m) => { this.emailInput = m; }}
+                    placeholder="eg: abc@kit.edu"
+                  />
+                </FormGroup>
+                <Button bsSize="xsmall" bsStyle="success" onClick={() => this.createGroup()}>
+                  Create new { rootType === 'Group' ? 'group' : 'device' }
+                </Button>
+              </Form>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  renderDeviceMetadataModal() {
+    const { showDeviceMetadataModal, device, deviceMetadata } = this.state;
+    const title = 'Edit Device Metadata';
+    return (
+      <Modal
+        show={showDeviceMetadataModal}
+        onHide={this.handleCloseDeviceMetadata}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Edit {device.name} Metadata</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>
+                {title}
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Form>
+                {!this.deviceMetadataDoiExists() &&
+                  <p className="text-center">Get Metadata from DataCite</p>
+                }
+                <FormGroup controlId="metadataFormDOI">
+                  <ControlLabel>DOI*</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.doi}
+                    inputRef={(m) => { this.doi = m; }}
+                    placeholder="10.*****/**********"
+                    readOnly={this.deviceMetadataDoiExists()}
+                  />
+                </FormGroup>
+                {!this.deviceMetadataDoiExists() &&
+                  <Col smOffset={0} sm={12}>
+                    <Button className="pull-right" bsStyle="danger" onClick={() => this.syncDeviceMetadataFromDataCite(device.id)}>
+                      Sync from DataCite
+                    </Button>
+                  </Col>
+                }
+                {!this.deviceMetadataDoiExists() &&
+                  <p className="text-center">Or create Metadata and sync to DataCite</p>
+                }
+
+                <FormGroup controlId="metadataFormState">
+                  <ControlLabel>State*</ControlLabel>
+                  <FormControl
+                    componentClass="select"
+                    value={deviceMetadata.data_cite_state}
+                    onChange={event => this.updateDeviceMetadataDataCiteState(event.target.value)}
+                    inputRef={(m) => { this.dataCiteState = m; }}
+                  >
+                    <option value="draft">Draft</option>
+                    <option value="registered">Registered</option>
+                    <option value="findable">Findable</option>
+                  </FormControl>
+                </FormGroup>
+
+                <FormGroup controlId="metadataFormURL">
+                  <ControlLabel>URL*</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.url}
+                    inputRef={(m) => { this.url = m; }}
+                    placeholder="https://<device.url>"
+                  />
+                </FormGroup>
+
+                <FormGroup controlId="metadataFormLandingPage">
+                  <ControlLabel>Landing Page*</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.landing_page}
+                    inputRef={(m) => { this.landing_page = m; }}
+                    placeholder="https://<device.landing.page>"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormName">
+                  <ControlLabel>Name*</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.name}
+                    inputRef={(m) => { this.name = m; }}
+                    placeholder="Name"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormPublicationYear">
+                  <ControlLabel>Publication Year*</ControlLabel>
+                  <FormControl
+                    type="number"
+                    defaultValue={deviceMetadata.publication_year}
+                    inputRef={(m) => { this.publication_year = m; }}
+                    placeholder="Publication Year e.g. '2020'"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormDescription">
+                  <ControlLabel>Description</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.description}
+                    inputRef={(m) => { this.description = m; }}
+                    placeholder="Description"
+                  />
+                </FormGroup>
+
+                <ControlLabel style={{ marginTop: 5 }}>Dates</ControlLabel>
+                {deviceMetadata.dates && deviceMetadata.dates.map((dateItem, index) => (
+                  <div key={dateItem.id}>
+                    <Row>
+                      <Col smOffset={0} sm={5}>
+                        <FormGroup>
+                          <ControlLabel>Date</ControlLabel>
+                          <FormControl
+                            type="text"
+                            value={dateItem.date}
+                            placeholder="Date e.g. '2020-01-01'"
+                            onChange={event => this.updateDeviceMetadataDate(index, 'date', event.target.value)}
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col smOffset={0} sm={5}>
+                        <FormGroup>
+                          <ControlLabel>Date Type</ControlLabel>
+                          <FormControl
+                            type="text"
+                            value={dateItem.dateType}
+                            placeholder="DateType e.g. 'Created'"
+                            onChange={event => this.updateDeviceMetadataDate(index, 'dateType', event.target.value)}
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col smOffset={0} sm={2}>
+                        <ControlLabel>Action</ControlLabel>
+                        <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeDeviceMetadataDate(index)}>
+                          <i className="fa fa-trash-o" />
+                        </Button>
+                      </Col>
+                    </Row>
+                  </div>
+                ))}
+                <Row>
+                  <Col smOffset={0} sm={12}>
+                    <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addDeviceMetadataDate()}>
+                      <i className="fa fa-plus" />
+                    </Button>
+                  </Col>
+                </Row>
+
+                <Row>
+                  <Col smOffset={0} sm={12}>
+                    <p className="text-right">
+                      DataCiteVersion: {deviceMetadata.data_cite_version}<br />
+                      DataCiteUpdatedAt: {moment(deviceMetadata.data_cite_updated_at).format('YYYY-MM-DD HH:mm')}<br />
+                    </p>
+                  </Col>
+                </Row>
+              </Form>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+        <Modal.Footer>
+          <Col smOffset={0} sm={6}>
+            <Button className="pull-left" bsStyle="danger" onClick={() => this.syncDeviceMetadataToDataCite(device.id)}>
+              Sync to DataCite
+            </Button>
+          </Col>
+          <Col smOffset={0} sm={6}>
+            <Button className="pull-right" bsStyle="success" onClick={() => this.saveDeviceMetadata(device.id)}>
+              Save Device Metadata
+            </Button>
+          </Col>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+  renderModal() {
+    const {
+      showModal,
+      root,
+      rootType,
+      actionType,
+      selectedUsers
+    } = this.state;
+    let title = '';
+    switch (rootType) {
+      case 'Group':
+        if (actionType === 'Person') {
+          title = `Add users to group: ${root.name}`;
+        } else {
+          title = `Add devices to group: ${root.name}`;
+        }
+        break;
+      case 'Device':
+        if (actionType === 'Person') {
+          title = `Add permission on device: ${root.name} to users`;
+        } else {
+          title = `Add permission on device: ${root.name} to groups`;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return (
+      <Modal
+        show={showModal}
+        onHide={this.handleClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>
+                {title}
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Select.Async
+                multi
+                isLoading
+                backspaceRemoves
+                value={selectedUsers}
+                valueKey="value"
+                labelKey="label"
+                matchProp="name"
+                placeholder="Select ..."
+                promptTextCreator={this.promptTextCreator}
+                loadOptions={this.loadUserByNameType}
+                onChange={this.handleSelectUser}
+              />
+              <Button bsSize="small" type="button" bsStyle="warning" onClick={() => this.addToRoot(root)}>Add</Button>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    return (
+      <div className="list-container-bottom">
+        { this.renderGroups() }
+        { this.renderDevices() }
+        { this.renderModal() }
+        { this.renderCreateModal() }
+        { this.renderDeviceMetadataModal() }
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/MatrixManagement.js b/app/packs/src/admin/MatrixManagement.js
new file mode 100644
index 000000000..b1677bf15
--- /dev/null
+++ b/app/packs/src/admin/MatrixManagement.js
@@ -0,0 +1,383 @@
+import React from 'react';
+import { Panel, Table, FormGroup, Checkbox, FormControl, Button, Modal, Col, Form, Tooltip, OverlayTrigger, InputGroup } from 'react-bootstrap';
+import uuid from 'uuid';
+import Select from 'react-select';
+import JSONInput from 'react-json-editor-ajrm';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import NotificationActions from '../components/actions/NotificationActions';
+
+const editTooltip = <Tooltip id="edit_tooltip">Edit Permission</Tooltip>;
+const jsonTooltip = <Tooltip id="edit_tooltip">Edit JSON</Tooltip>;
+const Notification = props =>
+  (
+    NotificationActions.add({
+      title: props.title,
+      message: props.msg,
+      level: props.lvl,
+      position: 'tc',
+      dismissible: 'button',
+      uid: uuid.v4()
+    })
+  );
+
+export default class MatrixManagement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      matrices: [],
+      matrice: {},
+      showEditModal: false,
+      showJsonModal: false,
+      showJsonBtn: false,
+      includeUsers: null,
+      excludeUsers: null
+    };
+    this.edit = this.edit.bind(this);
+    this.editJson = this.editJson.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleIncludeUser = this.handleIncludeUser.bind(this);
+    this.handleExcludeUser = this.handleExcludeUser.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleJsonSave = this.handleJsonSave.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleJsonClose = this.handleJsonClose.bind(this);
+    this.onChangeJson = this.onChangeJson.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchMatrices();
+  }
+
+  onChangeJson(e) {
+    const { matrice } = this.state;
+    if (e.error === false) {
+      matrice.configs = e.jsObject;
+      this.setState({ matrice, showJsonBtn: true });
+    }
+  }
+
+  fetchMatrices() {
+    AdminFetcher.fetchMatrices()
+      .then((result) => {
+        this.setState({ matrices: result.matrices });
+      });
+  }
+
+  edit(matrice) {
+    this.setState({
+      showEditModal: true, showJsonModal: false, matrice, includeUsers: null, excludeUsers: null
+    });
+  }
+
+  editJson(matrice) {
+    this.setState({
+      showJsonModal: true, showEditModal: false, matrice
+    });
+  }
+
+  handleChange(val, e) {
+    const { matrice } = this.state;
+    matrice.enabled = (val === true);
+    this.setState({
+      matrice
+    });
+  }
+
+  handleIncludeUser(val) {
+    if (val) { this.setState({ includeUsers: val }); }
+  }
+
+  handleExcludeUser(val) {
+    if (val) { this.setState({ excludeUsers: val }); }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+    return AdminFetcher.fetchUserGroupByName(input)
+      .then((res) => {
+        const usersEntries = res.users.map(u => ({
+          value: u.id,
+          name: u.name,
+          label: `${u.name} (${u.abb})`
+        }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleSave(matrice) {
+    const { includeUsers, excludeUsers } = this.state;
+
+    const params = {
+      id: matrice.id,
+      label: this.m_label.value.trim(),
+      enabled: matrice.enabled,
+    };
+
+    if (includeUsers != null) {
+      params.include_ids = includeUsers && includeUsers.map(u => u.value);
+    }
+
+    if (excludeUsers != null) {
+      params.exclude_ids = excludeUsers && excludeUsers.map(u => u.value);
+    }
+
+    AdminFetcher.updateMatrice(params)
+      .then((result) => {
+        if (result.error) {
+          Notification({ title: `Function [${matrice.name}]`, lvl: 'error', msg: result.error });
+          return false;
+        }
+        Notification({ title: `Function [${matrice.name}]`, lvl: 'info', msg: 'Updated successfully' });
+        this.setState({ showEditModal: false, includeUsers: null, excludeUsers: null, matrice: {} });
+        this.m_label.value = '';
+        this.fetchMatrices();
+        return true;
+      });
+  }
+
+
+  handleJsonSave(matrice) {
+    AdminFetcher.updateMatriceJson({ id: matrice.id, configs: matrice.configs })
+      .then((result) => {
+        if (result.error) {
+          Notification({ title: `Function [${matrice.name}]`, lvl: 'error', msg: result.error });
+          return false;
+        }
+        Notification({ title: `Function [${matrice.name}]`, lvl: 'info', msg: 'JSON Configuration updated successfully' });
+        this.setState({ showJsonModal: false, showJsonBtn: false, matrice: {} });
+        this.fetchMatrices();
+        return true;
+      });
+  }
+
+  handleClose() {
+    this.setState({ showEditModal: false });
+  }
+
+  handleJsonClose() {
+    this.setState({ showJsonModal: false });
+  }
+
+  renderList() {
+    const { matrices } = this.state;
+    const tbody = matrices && matrices.map((e, idx) => (
+      <tbody key={`tbody_${e.id}`}>
+        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={{ fontWeight: 'bold' }}>
+          <td>{idx + 1}</td>
+          <td>
+            <OverlayTrigger placement="bottom" overlay={editTooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle="info"
+                onClick={() => this.edit(e)}
+              >
+                <i className="fa fa-pencil-square-o" />
+              </Button>
+            </OverlayTrigger>
+            &nbsp;
+            <OverlayTrigger placement="bottom" overlay={jsonTooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle="warning"
+                onClick={() => this.editJson(e)}
+              >
+                <i className="fa fa-cog" />
+              </Button>
+            </OverlayTrigger>
+            &nbsp;
+          </td>
+          <td>{e.id}</td>
+          <td>{e.name}</td>
+          <td>{e.label}</td>
+          <td>{e.enabled === true ? 'true' : 'false'}</td>
+          <td>{e.include_users.map(u => u.label).join(', ')}</td>
+          <td>{e.exclude_users.map(u => u.label).join(', ')}</td>
+        </tr>
+      </tbody>
+    ))
+
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Table responsive condensed hover>
+            <thead>
+              <tr style={{ backgroundColor: '#ddd' }}>
+                <th width="2%">#</th>
+                <th width="5%">Actions</th>
+                <th width="3%">ID</th>
+                <th width="10%">Function name</th>
+                <th width="10%">Description</th>
+                <th width="10%">Set globally</th>
+                <th width="40%">Enabled for</th>
+                <th width="20%">Disabled for</th>
+              </tr>
+            </thead>
+            {tbody}
+          </Table>
+        </Panel.Heading>
+      </Panel>
+    );
+  }
+
+  renderEditModal() {
+    const { matrice, includeUsers, excludeUsers } = this.state;
+    let defaultIncludeUsers = [];
+    let defaultExcludeUsers = [];
+
+    if (includeUsers == null) {
+      defaultIncludeUsers = matrice.include_users;
+    } else {
+      defaultIncludeUsers = includeUsers;
+    }
+    if (excludeUsers == null) {
+      defaultExcludeUsers = matrice.exclude_users;
+    } else {
+      defaultExcludeUsers = excludeUsers;
+    }
+
+    return (
+      <Modal show={this.state.showEditModal} onHide={this.handleClose}>
+        <Modal.Header closeButton><Modal.Title>Edit Permisson</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Form horizontal className="input-form">
+              <FormGroup controlId="formControlId">
+                <InputGroup>
+                  <InputGroup.Addon>ID</InputGroup.Addon>
+                  <FormControl type="text" defaultValue={matrice.id} readOnly />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlName">
+                <InputGroup>
+                  <InputGroup.Addon>Function name</InputGroup.Addon>
+                  <FormControl type="text" defaultValue={matrice.name} readOnly />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlLabel">
+                <InputGroup>
+                  <InputGroup.Addon>Description</InputGroup.Addon>
+                  <FormControl type="text" defaultValue={matrice.label} inputRef={(ref) => { this.m_label = ref; }} />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlLabel">
+                <Checkbox inline type="checkbox" checked={matrice.enabled} onChange={e => this.handleChange(!matrice.enabled, e)}>Enable globally <br /> (when [checked], all users can see/use this feature, when [unchecked], only allowed users can see/use this function)</Checkbox>
+              </FormGroup>
+              <FormGroup controlId="formControlInclude">
+                <InputGroup>
+                  <InputGroup.Addon>Include Users</InputGroup.Addon>
+                  <Select.Async
+                    multi
+                    isLoading
+                    backspaceRemoves
+                    value={defaultIncludeUsers}
+                    defaultValue={defaultIncludeUsers}
+                    valueKey="value"
+                    labelKey="label"
+                    matchProp="name"
+                    placeholder="Select ..."
+                    loadOptions={this.loadUserByName}
+                    onChange={this.handleIncludeUser}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlExclude">
+                <InputGroup>
+                  <InputGroup.Addon>Exclude Users</InputGroup.Addon>
+                  <Select.Async
+                    multi
+                    isLoading
+                    backspaceRemoves
+                    value={defaultExcludeUsers}
+                    defaultValue={defaultExcludeUsers}
+                    valueKey="value"
+                    labelKey="label"
+                    matchProp="name"
+                    placeholder="Select ..."
+                    loadOptions={this.loadUserByName}
+                    onChange={this.handleExcludeUser}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Col smOffset={0} sm={10}>
+                  <Button bsStyle="warning" onClick={() => this.handleClose()} >
+                    Cancel&nbsp;
+                  </Button>
+                  &nbsp;
+                  <Button bsStyle="primary" onClick={() => this.handleSave(matrice)} >
+                    Update&nbsp;
+                    <i className="fa fa-save" />
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+
+  renderJsonModal() {
+    const { matrice, showJsonBtn } = this.state;
+
+    return (
+      <Modal show={this.state.showJsonModal} onHide={this.handleJsonClose}>
+        <Modal.Header closeButton><Modal.Title>JSON Configurations</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Form horizontal className="input-form">
+              <FormGroup controlId="formControlId">
+                <InputGroup>
+                  <InputGroup.Addon>ID</InputGroup.Addon>
+                  <FormControl type="text" defaultValue={matrice.id} readOnly />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlName">
+                <InputGroup>
+                  <InputGroup.Addon>Function name</InputGroup.Addon>
+                  <FormControl type="text" defaultValue={matrice.name} readOnly />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup controlId="formControlJson">
+                <JSONInput
+                  placeholder={matrice.configs}
+                  width="100%"
+                  onChange={e => this.onChangeJson(e)}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <Col smOffset={0} sm={10}>
+                  <Button bsStyle="warning" onClick={() => this.handleJsonClose()} >
+                    Cancel&nbsp;
+                  </Button>
+                  &nbsp;
+                  <Button bsStyle="primary" disabled={!showJsonBtn} onClick={() => this.handleJsonSave(matrice)} >
+                    Update&nbsp;
+                    <i className="fa fa-save" />
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderList()}
+        {this.renderEditModal()}
+        {this.renderJsonModal()}
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/packs/src/admin/MessagePublish.js b/app/packs/src/admin/MessagePublish.js
new file mode 100644
index 000000000..ce4d86774
--- /dev/null
+++ b/app/packs/src/admin/MessagePublish.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormGroup, ControlLabel, FormControl, Button, Panel } from 'react-bootstrap';
+import Select from 'react-select';
+
+import MessagesFetcher from 'src/fetchers/MessagesFetcher';
+
+export default class MessagePublish extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      channels: [],
+      selectedChannel: null,
+    };
+    this.toggleChannelList = this.toggleChannelList.bind(this);
+    this.handleChannelChange = this.handleChannelChange.bind(this);
+    this.messageSend = this.messageSend.bind(this);
+  }
+
+  componentDidMount() {
+    this.toggleChannelList();
+  }
+
+  handleChannelChange(selectedChannel) {
+    if (selectedChannel) {
+      this.setState({ selectedChannel });
+    }
+  }
+
+  toggleChannelList() {
+    MessagesFetcher.fetchChannels(9)
+      .then((result) => {
+        const channels = result.channels.map(c =>
+          ({ value: c.id, name: c.subject, label: c.subject }));
+        channels.sort((a, b) => (a.value - b.value));
+        this.setState({ channels });
+      });
+  }
+
+  messageSend() {
+    const { selectedChannel } = this.state;
+
+    if (!selectedChannel) {
+      alert('Please select channel!');
+    } else {
+      const params = {
+        channel_id: selectedChannel.value,
+        content: this.myMessage.value,
+      };
+
+      MessagesFetcher.createMessage(params)
+        .then((result) => {
+          this.myMessage.value = '';
+          alert('Message sent!');
+        });
+    }
+  }
+
+  render() {
+    const { selectedChannel, channels } = this.state;
+
+    return (
+      <div>
+        <Panel style={{ height: 'calc(100vh - 20px)' }}>
+          <Panel.Body>
+            <div className="col-md-3">
+              <ControlLabel>Channel</ControlLabel>
+              <Select
+                value={selectedChannel}
+                onChange={this.handleChannelChange}
+                options={channels}
+                placeholder="Select your channel"
+                autoFocus
+              />
+            </div>
+            <div className="col-md-9">
+              <form>
+                <FormGroup controlId="formControlsTextarea">
+                  <ControlLabel>Message</ControlLabel>
+                  <FormControl componentClass="textarea" placeholder="message..." rows="20" inputRef={(ref) => { this.myMessage = ref; }} />
+                </FormGroup>
+                <Button
+                  bsStyle="primary"
+                  onClick={() => this.messageSend()}
+                >
+                  Publish&nbsp;
+                  <i className="fa fa-paper-plane" />
+                </Button>
+              </form>
+            </div>
+          </Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+}
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('MsgPub');
+  if (domElement) { ReactDOM.render(<MsgPub />, domElement); }
+});
diff --git a/app/packs/src/admin/NovncConfigContainer.js b/app/packs/src/admin/NovncConfigContainer.js
new file mode 100644
index 000000000..cf8f46e15
--- /dev/null
+++ b/app/packs/src/admin/NovncConfigContainer.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Button, ButtonGroup, Tooltip } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+export default class NovncConfigContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deletingTooltip: false,
+    };
+
+    this.toggleTooltip = this.toggleTooltip.bind(this);
+  }
+
+  toggleTooltip() {
+    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
+  }
+
+  render() {
+    const { device } = this.props;
+    const style = { marginLeft: '20px', marginTop: '-15px' };
+    return (
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        onClick={this.toggleTooltip}
+      > {this.state.deletingTooltip ? (
+        <Tooltip placement="right" className="in" id="tooltip-bottom" style={style}>
+                  Delete configuration for {device.name}?<br />
+          <ButtonGroup>
+            <Button
+              bsStyle="danger"
+              bsSize="xsmall"
+              onClick={this.props.handleRemoveConfig}
+            >Yes
+            </Button>
+            <Button
+              bsStyle="warning"
+              bsSize="xsmall"
+              onClick={() => this.setState({ deletingTooltip: true })}
+            >No
+            </Button>
+          </ButtonGroup>
+        </Tooltip>
+              ) : null}
+        <i className="fa fa-eraser" aria-hidden="true" />
+      </Button>
+    );
+  }
+}
+
+NovncConfigContainer.propTypes = {
+  device: PropTypes.objectOf.isRequired,
+  handleRemoveConfig: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/admin/NovncSettings.js b/app/packs/src/admin/NovncSettings.js
new file mode 100644
index 000000000..6f1c2a51a
--- /dev/null
+++ b/app/packs/src/admin/NovncSettings.js
@@ -0,0 +1,378 @@
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Button, Table, Modal, Tooltip, OverlayTrigger, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import AdminFetcher from 'src/fetchers/AdminFetcher';
+import NovncConfigContainer from 'src/apps/admin/NovncConfigContainer';
+
+const tipEditConfig = <Tooltip id="edit_tooltip">edit config</Tooltip>;
+const tipRemoveConfig = <Tooltip id="remove_tooltip">remove config</Tooltip>;
+const Notification = props =>
+(
+  NotificationActions.add({
+    title: `Device [${props.device.name}]`,
+    message: props.msg,
+    level: props.lvl,
+    position: 'tc',
+    dismissible: 'button',
+    uid: uuid.v4()
+  })
+);
+const NotificationError = props => Notification({ ...props, lvl: 'error' });
+
+class ModelConfig extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedToken: props.device.data.novnc.token || '',
+      selectedTarget: props.device.data.novnc.target || '',
+      selectedPassword: props.device.data.novnc.password || '',
+      inputToken: props.device.data.novnc.token || '',
+      inputTarget: props.device.data.novnc.target || ''
+    };
+    this.handleSave = this.handleSave.bind(this);
+    this.updateTarget = this.updateTarget.bind(this);
+    this.updateToken = this.updateToken.bind(this);
+  }
+
+  handleSave(device) {
+    const {
+      selectedToken, selectedTarget, selectedPassword, inputTarget
+    } = this.state;
+    const missingTarget = !inputTarget;
+
+    const params = {
+      id: device.id,
+      data: {
+        novnc: {
+          token: selectedToken,
+          target: selectedTarget,
+          password: selectedPassword
+        }
+      },
+    };
+
+    params.data.novnc.token = this.refToken.value;
+    params.data.novnc.target = this.refTarget.value;
+    params.data.novnc.password = this.refPassword.value;
+
+    if (missingTarget) {
+      NotificationError({ device, msg: 'Please type a Target for the device!' });
+      return false;
+    }
+
+    AdminFetcher.editNovncSettings(params)
+      .then(() => {
+        this.props.onClose();
+        return true;
+      });
+    return true;
+  }
+
+  updateTarget(e) {
+    this.setState({
+      inputTarget: e.target.value,
+    });
+  }
+
+  updateToken(e) {
+    this.setState({
+      inputToken: e.target.value,
+    });
+  }
+
+  render() {
+    const rowStyle = { padding: '8px', display: 'flex' };
+    const colStyle = { textAlign: 'right', marginTop: 'auto', marginBottom: 'auto' };
+    const storedTarget = this.props.device.data.novnc.target;
+    const storedToken = this.props.device.data.novnc.token;
+    const storedPassword = this.props.device.data.novnc.password;
+    const { inputTarget, inputToken } = this.state;
+    const missingTarget = !inputTarget;
+
+    const RenderStoredTarget = () => {
+      if (storedTarget && storedToken) { return `${storedTarget}?token=${storedToken}`; }
+      if (storedTarget && storedToken === '') { return storedTarget; }
+      return ' None';
+    };
+
+    const RenderCurrentTarget = () => {
+      if (inputTarget && inputToken) {
+        return `${inputTarget}?token=${inputToken}`;
+      }
+      if (inputTarget && !inputToken) {
+        return inputTarget;
+      }
+      return 'You haven\'t edited the target so far';
+    };
+
+    return (
+      <Modal
+        bsSize="large"
+        show={this.props.isShow}
+        onHide={this.props.onClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title> <b>NoVNC Settings for <u>{this.props.device.name}</u></b></Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Target</b>
+            </Col>
+            <Col sm={6} md={6} lg={6}>
+              <input
+                ref={(ref) => { this.refTarget = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputTarget"
+                placeholder="e.g. ws://localhost:8092/websockify"
+                required
+                onChange={e => this.updateTarget(e)}
+                defaultValue={storedTarget || ''}
+              />
+
+            </Col>
+
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Websockify Token</b>
+            </Col>
+            <Col sm={6} md={6} lg={6}>
+              <input
+                ref={(ref) => { this.refToken = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputToken"
+                placeholder="e.g. 000001"
+                required
+                onChange={e => this.updateToken(e)}
+                disabled={missingTarget}
+                defaultValue={storedToken || ''}
+              />
+
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col style={colStyle}>
+              <span className="fa fa-info-circle" aria-hidden="true">&nbsp;
+                <b>Current Target   </b>
+                <RenderStoredTarget />
+              </span>
+            </Col>
+          </Row>
+          <Row style={rowStyle}>
+            <Col style={colStyle}>
+              <span className="fa fa-info-circle" aria-hidden="true">&nbsp;
+                <b>Edited Target   </b>
+                <RenderCurrentTarget />
+              </span>
+            </Col>
+          </Row>
+          <hr />
+          <Row style={rowStyle}>
+            <h4>RFB Credentials</h4>
+          </Row>
+          <Row style={rowStyle}>
+            <Col sm={2} md={2} lg={2} style={colStyle}>
+              <b>Password</b>
+            </Col>
+            <Col sm={10} md={10} lg={10}>
+              <input
+                ref={(ref) => { this.refPassword = ref; }}
+                className="form-control is-invalid"
+                type="text"
+                id="inputPassword"
+                placeholder="Password"
+                required
+                defaultValue={storedPassword || ''}
+              />
+            </Col>
+          </Row>
+        </Modal.Body>
+        <Modal.Footer style={{ textAlign: 'left' }}>
+          <Button bsStyle="primary" onClick={() => this.props.onClose()}>Close</Button>
+          <Button bsStyle="warning" onClick={() => this.handleSave(this.props.device)}>Save</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ModelConfig.propTypes = {
+  device: PropTypes.shape({
+    name: PropTypes.string,
+    data: PropTypes.shape({
+      novnc: PropTypes.shape({
+        target: PropTypes.string,
+        token: PropTypes.string,
+        password: PropTypes.string
+      })
+    })
+  }).isRequired,
+  isShow: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+export default class NovncSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      devices: [],
+      selectedDevice: null,
+      showConfigModal: false,
+    };
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handleDeviceListFetch = this.handleDeviceListFetch.bind(this);
+    this.handleConfigModalShow = this.handleConfigModalShow.bind(this);
+    this.handleConfigModalClose = this.handleConfigModalClose.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleDeviceListFetch();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  handleConfigModalShow(device) {
+    AdminFetcher.fetchDeviceById(device.id)
+      .then((result) => {
+        const selectedDevice = result.device;
+        const emptyData = { novnc: { token: '', target: '', password: '' } };
+        if (!selectedDevice.data.novnc) {
+          selectedDevice.data = emptyData;
+        }
+        this.setState({
+          selectedDevice,
+          showConfigModal: true
+        });
+      });
+  }
+
+  handleConfigModalClose() {
+    AdminFetcher.fetchDevices()
+      .then((result) => {
+        this.setState({
+          devices: result.devices,
+          showConfigModal: false,
+        });
+      });
+  }
+
+  handleDeviceListFetch() {
+    AdminFetcher.fetchDevices()
+      .then((result) => {
+        this.setState({
+          devices: result.devices,
+        });
+      });
+  }
+
+  handleRemoveConfig(id) {
+    const { devices } = this.state;
+    const params = {
+      id,
+      data: {
+        novnc: {
+          token: '',
+          target: '',
+          password: ''
+        }
+      },
+    };
+    AdminFetcher.editNovncSettings(params)
+      .then(() => {
+        devices.map((dev) => {
+          if (dev.id === id) { dev.data = {}; }
+        });
+        this.setState({ devices });
+      });
+  }
+
+  renderConfiModal() {
+    return this.state.showConfigModal ?
+      <ModelConfig
+        device={this.state.selectedDevice}
+        isShow={this.state.showConfigModal}
+        onClose={this.handleConfigModalClose}
+      /> : null;
+  }
+
+  render() {
+    const { devices } = this.state;
+
+    const renderTarget = (device) => {
+      if (device.data && device.data.novnc && device.data.novnc.token) {
+        return `${device.data.novnc.target}?token=${device.data.novnc.token}`;
+      } else if (device.data && device.data.novnc && !device.data.novnc.token) {
+        return device.data.novnc.target;
+      }
+      return 'Blank target';
+    };
+
+    const tcolumn = (
+      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
+        <th width="2%" colSpan="2">#</th>
+        <th width="5%">ID</th>
+        <th width="20%">Name</th>
+        <th width="40%">Target</th>
+      </tr>
+    );
+
+    const tbody = devices.map((device, idx) => (
+      <tr key={`row_${device.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
+        <td>
+          {idx + 1}
+        </td>
+        <td>
+          <OverlayTrigger placement="bottom" overlay={tipEditConfig} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="primary"
+              onClick={() => this.handleConfigModalShow(device)}
+            >
+              <i className="fa fa-pencil" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <OverlayTrigger placement="left" overlay={tipRemoveConfig} >
+            <NovncConfigContainer
+              device={device}
+              handleRemoveConfig={() => this.handleRemoveConfig(device.id)}
+            />
+          </OverlayTrigger>
+        </td>
+        <td> {device.id} </td>
+        <td> {device.name} </td>
+        <td>
+          {renderTarget(device)}
+        </td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              NoVNC Settings
+            </Panel.Title>
+          </Panel.Heading>
+          <Table responsive hover bordered>
+            <thead>
+              {tcolumn}
+            </thead>
+            <tbody>
+              {tbody}
+            </tbody>
+          </Table>
+        </Panel>
+        {this.renderConfiModal()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/OlsTerms.js b/app/packs/src/admin/OlsTerms.js
new file mode 100644
index 000000000..dbf0b7563
--- /dev/null
+++ b/app/packs/src/admin/OlsTerms.js
@@ -0,0 +1,219 @@
+import React from 'react';
+import { Row, Col, DropdownButton, MenuItem } from 'react-bootstrap';
+import Tree from 'antd/lib/tree';
+import { ButtonToolbar, Button } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import AdminFetcher from 'src/fetchers/AdminFetcher';
+import { difference } from 'lodash';
+
+const checkItem = (enableIds, disableIds, enable, idkey, checkStrictly) => {
+  if (enable === true) {
+    if (!enableIds.includes(idkey)) {
+      enableIds.push(idkey);
+    }
+    if (disableIds.includes(idkey)) {
+      disableIds = disableIds.filter(r => r !== idkey);
+    }
+  } else {
+    if (enableIds.includes(idkey)) {
+      enableIds = enableIds.filter(r => r !== idkey);
+    }
+    if (!disableIds.includes(idkey)) {
+      disableIds.push(idkey);
+    }
+  }
+  return { enableIds, disableIds };
+};
+
+
+export default class OlsTerms extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      file: null,
+      selectName: '',
+      expandedKeys: [],
+      autoExpandParent: true,
+      checkStrictly: true,
+      checkedKeys: [],
+      orgCheckedKeys: [],
+      enableIds: [],
+      disableIds: [],
+      list: []
+    };
+    this.initialOls = this.initialOls.bind(this);
+    this.onExpand = this.onExpand.bind(this);
+    this.onCheck = this.onCheck.bind(this);
+    this.handleSaveBtn = this.handleSaveBtn.bind(this);
+    this.handleSelectName = this.handleSelectName.bind(this);
+    this.handleAssociateBtn = this.handleAssociateBtn.bind(this);
+  }
+
+  componentDidMount() {
+    // this.initialOls(this.state.selectName);
+  }
+
+  handleFileDrop(attach) {
+    this.setState({ file: attach[0] });
+  }
+
+  handleAttachmentRemove() {
+    this.setState({ file: null });
+  }
+
+  handleClick() {
+    const { file } = this.state;
+    AdminFetcher.importOlsTerms(file);
+  }
+
+  dropzoneOrfilePreview() {
+    const { file } = this.state;
+    return file ? (
+      <div>
+        {file.name}
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
+          <i className="fa fa-trash-o" />
+        </Button>
+      </div>
+    ) : (
+      <Dropzone
+        onDrop={attach => this.handleFileDrop(attach)}
+        style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
+      >
+        <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
+          Drop File, or Click to Select.
+        </div>
+      </Dropzone>
+    );
+  }
+
+  addToChecked(cks, parent) {
+    if (parent.is_enabled === true) { cks.push(parent.value); }
+    (parent.children || []).map((node) => {
+      node.key = node.value;
+      this.addToChecked(cks, node);
+    });
+    return cks;
+  }
+
+  initialOls(selectName) {
+    let checkedKeys = [];
+    if (selectName == null && selectName === '') { return; }
+    UsersFetcher.fetchOls(selectName, false)
+      .then((result) => {
+        (result.ols_terms || []).map((a) => {
+          a.key = a.value;
+          checkedKeys = this.addToChecked(checkedKeys, a);
+        });
+        this.setState({
+          expandedKeys: checkedKeys,
+          orgCheckedKeys: checkedKeys,
+          list: result.ols_terms,
+          checkedKeys,
+        });
+      });
+  }
+
+  onExpand(expandedKeys) {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  }
+
+  onCheck(checkedKeys, e) {
+    const { checkStrictly, orgCheckedKeys } = this.state;
+    const checkedObj = (checkStrictly === true) ? checkedKeys.checked : checkedKeys;
+    const disableIds = difference(orgCheckedKeys, checkedObj);
+    const enableIds = difference(checkedObj, orgCheckedKeys);
+
+    this.setState({ checkedKeys, enableIds, disableIds });
+  }
+
+  handleSelectName(olsName) {
+    this.setState({
+      selectName: olsName,
+      enableIds: [],
+      disableIds: []
+    });
+    this.initialOls(olsName);
+  }
+
+
+  handleSaveBtn() {
+    const { enableIds, disableIds } = this.state;
+    AdminFetcher.olsTermDisableEnable({ owl_name: this.state.selectName, enableIds, disableIds })
+      .then((result) => {
+        if (result === true) {
+          alert('update successfully!');
+          this.setState({ enableIds: [], disableIds: [] });
+          this.initialOls(this.state.selectName);
+        } else {
+          alert('update error, please check system log!');
+        }
+      });
+  }
+
+  handleAssociateBtn() {
+    this.setState({ checkStrictly: !this.state.checkStrictly });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <Row style={{ maxWidth: '2000px', maxHeight: '1000px', margin: 'auto' }}>
+          {this.dropzoneOrfilePreview()}
+          <ButtonToolbar>
+            <Button bsStyle="warning" onClick={() => this.handleClick()}>Import OLS Terms (the file name will be the OLS_name)</Button>
+          </ButtonToolbar>
+        </Row>
+        <Row style={{ maxWidth: '2000px', maxHeight: '1000px', margin: 'auto' }}>
+          <Col md={6}>
+            <DropdownButton title={this.state.selectName === '' ? 'Ols Terms' : this.state.selectName}>
+              <MenuItem key="rxno" onSelect={() => this.handleSelectName('rxno')}>
+                rxno
+              </MenuItem>
+              <MenuItem key="chmo" onSelect={() => this.handleSelectName('chmo')}>
+                chmo
+              </MenuItem>
+            </DropdownButton>
+            <div><h3>{this.state.selectName}</h3></div>
+            <Button
+              bsStyle="primary"
+              onClick={() => this.handleSaveBtn()}
+            >Save
+            </Button> &nbsp; &nbsp;
+            <Button
+              bsStyle="primary"
+              onClick={() => this.handleAssociateBtn()}
+            >switch mode
+            </Button>
+            &nbsp;
+            {this.state.checkStrictly === true ? 'Check Strickly' : 'Associated'}
+            <Tree
+              name={this.state.selectName}
+              checkable
+              onExpand={this.onExpand}
+              expandedKeys={this.state.expandedKeys}
+              autoExpandParent={this.state.autoExpandParent}
+              onCheck={this.onCheck}
+              checkedKeys={this.state.checkedKeys}
+              checkStrictly={this.state.checkStrictly}
+              treeData={this.state.list}
+            />
+          </Col>
+          <Col md={6}>
+            <div style={{ whiteSpace: 'pre' }}>
+              <h3>enable list</h3>
+              {this.state.enableIds.join('\n')}
+              <h3>disable list</h3>
+              {this.state.disableIds.join('\n')}
+            </div>
+          </Col>
+        </Row>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/app/packs/src/admin/SegmentElementAdmin.js b/app/packs/src/admin/SegmentElementAdmin.js
new file mode 100644
index 000000000..1fb287473
--- /dev/null
+++ b/app/packs/src/admin/SegmentElementAdmin.js
@@ -0,0 +1,995 @@
+import React from 'react';
+import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
+import uuid from 'uuid';
+import Clipboard from 'clipboard';
+import { findIndex, filter, sortBy, orderBy } from 'lodash';
+import LoadingModal from '../components/common/LoadingModal';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import { ElementField } from '../components/elements/ElementField';
+import LoadingActions from '../components/actions/LoadingActions';
+import AttrNewModal from './generic/AttrNewModal';
+import AttrEditModal from './generic/AttrEditModal';
+import AttrCopyModal from './generic/AttrCopyModal';
+import FieldCondEditModal from './generic/FieldCondEditModal';
+import TemplateJsonModal from './generic/TemplateJsonModal';
+import LayerAttrEditModal from './generic/LayerAttrEditModal';
+import LayerAttrNewModal from './generic/LayerAttrNewModal';
+import SelectAttrNewModal from './generic/SelectAttrNewModal';
+import UploadModal from './generic/UploadModal';
+import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
+import Preview from './generic/Preview';
+
+const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
+const validateInput = (element) => {
+  if (element.klass_element === '') {
+    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please select Element.' });
+    return false;
+  }
+  if (element.label === '') {
+    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please input Segment Label.' });
+    return false;
+  }
+  return true;
+};
+
+export default class SegmentElementAdmin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: {},
+      newFieldKey: '',
+      newOptionKey: '',
+      layerKey: '',
+      selectOptions: [],
+      unitsSystem: {},
+      showPropModal: false,
+      showNewLayer: false,
+      showEditLayer: false,
+      showAddSelect: false,
+      showNewKlass: false,
+      showEditKlass: false,
+      showCopyKlass: false,
+      showFieldCond: false,
+      showUpload: false,
+      showJson: false,
+      propTabKey: 1
+    };
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.fetchElements = this.fetchElements.bind(this);
+    this.handlePropShow = this.handlePropShow.bind(this);
+    this.handlePropClose = this.handlePropClose.bind(this);
+    this.onInputNewField = this.onInputNewField.bind(this);
+    this.onInputNewOption = this.onInputNewOption.bind(this);
+    this.addLayer = this.addLayer.bind(this);
+    this.addSelection = this.addSelection.bind(this);
+    this.editLayer = this.editLayer.bind(this);
+    this.newKlass = this.newKlass.bind(this);
+    this.editKlass = this.editKlass.bind(this);
+    this.copyKlass = this.copyKlass.bind(this);
+    this.newField = this.newField.bind(this);
+    this.newOption = this.newOption.bind(this);
+    this.handleSelectClose = this.handleSelectClose.bind(this);
+    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
+    this.handleLayerClose = this.handleLayerClose.bind(this);
+    this.handleNewKlassClose = this.handleNewKlassClose.bind(this);
+    this.handleKlassClose = this.handleKlassClose.bind(this);
+    this.handleCopyKlassClose = this.handleCopyKlassClose.bind(this);
+    this.handleCreateLayer = this.handleCreateLayer.bind(this);
+    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
+    this.handleCreateKlass = this.handleCreateKlass.bind(this);
+    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
+    this.handleActivateKlass = this.handleActivateKlass.bind(this);
+    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
+    this.handleAddSelect = this.handleAddSelect.bind(this);
+    this.onDummyAdd = this.onDummyAdd.bind(this);
+    this.onFieldDrop = this.onFieldDrop.bind(this);
+    this.onFieldMove = this.onFieldMove.bind(this);
+    this.onShowFieldCond = this.onShowFieldCond.bind(this);
+    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
+    this.onFieldInputChange = this.onFieldInputChange.bind(this);
+    this.onOptionInputChange = this.onOptionInputChange.bind(this);
+    this.showJsonModal = this.showJsonModal.bind(this);
+    this.hideJsonModal = this.hideJsonModal.bind(this);
+    this.handleUpdateJson = this.handleUpdateJson.bind(this);
+    this.fetchConfigs = this.fetchConfigs.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.propTabSelect = this.propTabSelect.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+    this.handleUploadShow = this.handleUploadShow.bind(this);
+    this.handleUploadClose = this.handleUploadClose.bind(this);
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchElements();
+    this.fetchConfigs();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  onOptionInputChange(event, selectKey, optionKey) {
+    const { element } = this.state;
+    const options = (element &&
+      element.properties_template && element.properties_template.select_options[selectKey]
+      && element.properties_template.select_options[selectKey].options) || [];
+    const idx = findIndex(options, o => o.key === optionKey);
+    const op = {};
+    op.key = optionKey;
+    op.label = event.target.value;
+    options.splice(idx, 1, op);
+    this.setState({ element });
+  }
+
+  onDummyAdd(e) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[e.l]);
+    let { fields } = layer || {};
+    fields = fields || [];
+    let idx = fields.findIndex(o => o.field === e.f);
+    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
+    fields.splice(idx + 1, 0, new GenericDummy());
+    element.properties_template.layers[e.l].fields = fields;
+    this.setState({ element });
+  }
+
+  onShowFieldCond(field, lk) {
+    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
+  }
+
+  onFieldDrop(e) {
+    const { element } = this.state;
+    const sourceKey = e.sourceTag.layerKey;
+    const targetKey = e.targetTag.layerKey;
+    const sourceLayer = element.properties_template.layers[sourceKey];
+    const targetLayer = element.properties_template.layers[targetKey];
+
+    if (sourceLayer && targetLayer) {
+      e.sourceTag.field.position = e.targetTag.field.position - 1;
+      const { fields } = element.properties_template.layers[sourceKey];
+      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
+      fields.splice(idx, 1, e.sourceTag.field);
+      element.properties_template.layers[sourceKey].fields = fields;
+      this.setState({ element });
+    }
+  }
+
+  onFieldMove(l, f, isUp) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template && element.properties_template.layers[l]);
+    const { fields } = layer;
+    const idx = findIndex(fields, o => o.field === f);
+    if (idx >= 0 && isUp) {
+      const curObj = fields[idx];
+      curObj.position -= 1;
+      const preObj = fields[idx - 1];
+      preObj.position += 1;
+      fields[idx] = preObj;
+      fields[idx - 1] = curObj;
+    } else if (idx < (fields.length - 1) && !isUp) {
+      const curObj = fields[idx];
+      curObj.position += 1;
+      const nexObj = fields[idx + 1];
+      nexObj.position -= 1;
+      fields[idx] = nexObj;
+      fields[idx + 1] = curObj;
+    }
+    element.properties_template.layers[l].fields = fields;
+    this.setState({ element });
+  }
+
+  onFieldSubFieldChange(lk, f, cb) {
+    const { element } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+    const { fields } = layer;
+    if (layer != null) {
+      const fobj = (fields || []).find(o => o.field === f.field);
+      if (Object.keys(fobj).length > 0) {
+        const idx = (fields || []).findIndex(o => o.field === f.field);
+        fields.splice(idx, 1, f);
+        element.properties_template.layers[lk].fields = fields;
+        this.setState({ element }, cb);
+      }
+    }
+  }
+
+  onFieldInputChange(event, orig, fe, lk, fc, tp) {
+    const { element } = this.state;
+
+    let value = '';
+    if (tp === 'select' || tp === 'system-defined') {
+      ({ value } = event);
+    } else if (tp && tp.startsWith('drag')) {
+      value = event;
+    } else {
+      ({ value } = event.target);
+    }
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[lk]);
+
+    if (typeof layer === 'undefined' || layer == null) return;
+
+    const { fields } = layer;
+
+    if (fields == null || fields.length === 0) return;
+
+    const fobj = fields.find(e => e.field === fe);
+    if (Object.keys(fobj).length === 0) return;
+
+    switch (fc) {
+      case 'required':
+        fobj.required = !orig;
+        break;
+      default:
+        fobj[`${fc}`] = value;
+        break;
+    }
+
+    const idx = findIndex(fields, o => o.field === fe);
+    fields.splice(idx, 1, fobj);
+    element.properties_template.layers[lk].fields = fields;
+    this.setState({ element });
+  }
+
+  onInputNewField(e) {
+    this.setState({ newFieldKey: e.target.value });
+  }
+
+  onInputNewOption(e) {
+    this.setState({ newOptionKey: e.target.value });
+  }
+
+  retriveRevision(revision, cb) {
+    const { element } = this.state;
+    element.properties_template = revision;
+    this.setState({ element, propTabKey: 1 }, cb);
+  }
+
+  fetchRevisions() {
+    const { element } = this.state;
+    if (element && element.id) {
+      AdminFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
+        .then((result) => {
+          let curr = Object.assign({}, { ...element.properties_template });
+          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
+          const revisions = [].concat(curr, result.revisions);
+          this.setState({ revisions });
+        });
+    }
+  }
+
+  delRevision(params) {
+    const { element } = this.state;
+    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'SegmentKlass' })
+      .then((response) => {
+        if (response.error) {
+          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
+        } else {
+          this.fetchRevisions();
+        }
+      });
+  }
+
+  propTabSelect(key) {
+    if (key !== 1) {
+      this.fetchRevisions();
+    }
+    this.setState({ propTabKey: key });
+  }
+
+  handlePropClose() {
+    this.setState({ showPropModal: false });
+  }
+
+  handleFieldCondClose() {
+    this.setState({ showFieldCond: false });
+  }
+
+  handleCond(lk) {
+    this.onShowFieldCond(null, lk);
+  }
+
+
+  addLayer() {
+    this.setState({ showNewLayer: true });
+  }
+
+  addSelection() {
+    this.setState({ showAddSelect: true });
+  }
+
+  showJsonModal(element) {
+    this.setState({ element, showJson: true });
+  }
+
+  hideJsonModal() {
+    this.setState({ showJson: false });
+  }
+
+  editLayer(e) {
+    this.setState({ showEditLayer: true, layerKey: e.layerKey });
+  }
+
+  newKlass() {
+    this.setState({ showNewKlass: true });
+  }
+
+  editKlass(element) {
+    this.setState({ showEditKlass: true, element });
+  }
+
+  copyKlass(element) {
+    this.setState({ showCopyKlass: true, element });
+  }
+
+  handleUploadShow() {
+    this.setState({ showUpload: true });
+  }
+
+  handleUploadClose() {
+    this.setState({ showUpload: false });
+  }
+
+  newField(e) {
+    const { element, newFieldKey } = this.state;
+    if (newFieldKey === null || newFieldKey.trim().length === 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
+      return;
+    }
+    if (!validateField(newFieldKey)) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
+      return;
+    }
+    const { layerKey } = e;
+    const layer = element && element.properties_template
+      && element.properties_template.layers[layerKey];
+    const fields = layer.fields || [];
+    const dupfields = filter(fields, o => o.field === newFieldKey);
+    if (dupfields && dupfields.length > 0) {
+      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
+      return;
+    }
+    const newField = {
+      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
+    };
+    fields.push(newField);
+    element.properties_template.layers[layerKey].fields = fields;
+    this.setState({ layerKey, element });
+  }
+
+  newOption(key) {
+    const { element, newOptionKey } = this.state;
+
+    if (newOptionKey == null || newOptionKey.trim().length === 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
+      return;
+    }
+    const selectObj = (element && element.properties_template
+      && element.properties_template.select_options[key]
+      && element.properties_template.select_options[key].options) || [];
+    const dupops = filter(selectObj, o => o.key === newOptionKey);
+    if (dupops && dupops.length > 0) {
+      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
+      return;
+    }
+    const newOption = { key: newOptionKey, label: newOptionKey };
+    selectObj.push(newOption);
+    element.properties_template.select_options[key].options = selectObj;
+    this.setState({ element });
+  }
+
+  handleNewLayerClose() {
+    this.setState({ showNewLayer: false });
+  }
+
+  handleLayerClose() {
+    this.setState({ showEditLayer: false });
+  }
+
+  handleNewKlassClose() {
+    this.setState({ showNewKlass: false });
+  }
+
+  handleKlassClose() {
+    this.setState({ showEditKlass: false });
+  }
+
+  handleCopyKlassClose() {
+    this.setState({ showCopyKlass: false });
+  }
+
+  handleSelectClose() {
+    this.setState({ showAddSelect: false });
+  }
+
+  handleAddSelect(selectName) {
+    const { element } = this.state;
+    if (validateSelectList(selectName, element)) {
+      const sos = element.properties_template.select_options;
+      sos[selectName] = {};
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ element, showAddSelect: false, selectOptions });
+    }
+    return false;
+  }
+
+  handleCreateLayer(layer) {
+    if (!validateLayerInput(layer)) return;
+    const { element } = this.state;
+    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
+      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
+      return;
+    }
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showNewLayer: false, element, layerKey: layer.key });
+  }
+
+  handleUpdateLayer(layerKey, updates) {
+    if (!validateLayerInput(updates)) return;
+    const { element } = this.state;
+    let layer = element && element.properties_template
+    && element.properties_template.layers[layerKey];
+    layer = { ...layer, ...updates };
+    element.properties_template.layers[`${layer.key}`] = layer;
+    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
+    this.setState({ showEditLayer: false, element });
+  }
+
+  handleCreateKlass(element) {
+    if (!validateInput(element)) return;
+    AdminFetcher.createSegmentKlass(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Create Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: 'Create Segment successfully', lvl: 'info', msg: 'Created successfully' });
+          this.handleNewKlassClose();
+          this.handleCopyKlassClose();
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleUpdateKlass(element, updates) {
+    const inputs = { ...element, ...updates };
+    if (!validateInput(inputs)) return;
+    AdminFetcher.updateSegmentKlass(inputs)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: 'Update Segment successfully', lvl: 'info', msg: 'Updated successfully' });
+          this.handleKlassClose();
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleActivateKlass(id, isActive) {
+    AdminFetcher.deActiveSegmentKlass({ id, is_active: !isActive })
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: 'Update Segment successfully', lvl: 'info', msg: `Segment is ${result.is_active ? 'active' : 'deactive'} now` });
+          this.handleKlassClose();
+          this.fetchElements();
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleDeleteKlass(element) {
+    AdminFetcher.deleteSegmentKlass(element.id)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Delete Segment fail', lvl: 'error', msg: result.error });
+        } else {
+          notification({ title: `Segment [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
+          this.handleKlassClose();
+          this.fetchElements();
+        }
+      });
+  }
+
+  handleUpdateJson(propertiesTemplate) {
+    const { element } = this.state;
+    element.properties_template = propertiesTemplate;
+    this.setState({
+      element,
+      showJson: false
+    });
+    this.handleSubmit(false);
+  }
+
+
+  handlePropShow(element) {
+    if (element) {
+      const selectOptions = Object.keys(element.properties_template.select_options)
+        .map(key => ({ value: key, name: key, label: key }));
+      this.setState({
+        element, selectOptions, showPropModal: true, propTabKey: 1
+      });
+    }
+  }
+
+  handleUploadTemplate(properties, message, valid) {
+    const { element } = this.state;
+    if (valid === false) {
+      this.setState({ showUpload: false });
+      notification({ title: `Upload Template for Segment [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
+    } else {
+      element.properties_template = properties;
+      this.setState({ element, showUpload: false });
+      notification({ title: `Upload template to Segment [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
+    }
+  }
+
+  fetchConfigs() {
+    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
+  }
+
+  fetchElements() {
+    AdminFetcher.listSegmentKlass().then((result) => {
+      this.setState({ elements: result.klass });
+    });
+  }
+
+  handleSubmit(isRelease = false) {
+    LoadingActions.start();
+    const { element, unitsSystem } = this.state;
+    Object.keys(element.properties_template.layers).forEach((key) => {
+      const layer = element.properties_template.layers[key];
+      let sortedFields = (layer && layer.fields) || [];
+      (sortedFields || []).forEach((f, idx) => {
+        const fd = f;
+        fd.position = (idx + 1);
+        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
+        fd.required = false;
+        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
+        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
+        return fd;
+      });
+      sortedFields = sortBy(sortedFields, l => l.position);
+      element.properties_template.layers[key].fields = sortedFields;
+    });
+
+    element.is_release = isRelease;
+
+    AdminFetcher.updateSegmentTemplate(element)
+      .then((result) => {
+        if (result.error) {
+          notification({ title: 'Update Segment template fail', lvl: 'error', msg: result.error });
+        } else {
+          if (isRelease === true) {
+            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved adn Released successfully' });
+          } else {
+            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved successfully' });
+          }
+          this.fetchElements();
+          this.setState({ element: result });
+        }
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  confirmDelete(delStr, delKey, delRoot) {
+    const { element } = this.state;
+    if (delStr === 'Select') {
+      delete element.properties_template.select_options[delKey];
+      const sos = element.properties_template.select_options;
+      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
+      this.setState({ selectOptions });
+    } else if (delStr === 'Option') {
+      const options = element.properties_template.select_options[delRoot];
+      const idx = findIndex(options, o => o.key === delKey);
+      options.splice(idx, 1);
+    } else if (delStr === 'Layer') {
+      delete element.properties_template.layers[delKey];
+    } else if (delStr === 'Field') {
+      const { fields } = element.properties_template.layers[delRoot];
+      const idx = findIndex(fields, o => o.field === delKey);
+      fields.splice(idx, 1);
+    } else {
+      //
+    }
+    this.setState({ element });
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    let msg = 'remove?';
+    if (delStr === 'Select') {
+      msg = `remove this select option: [${delKey}] ?`;
+    } else if (delStr === 'Option') {
+      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
+    } else if (delStr === 'Layer') {
+      msg = `remove this layer: [${delKey}] ?`;
+    } else if (delStr === 'Field') {
+      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
+    } else {
+      msg = `remove ???: ${delStr}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning">No</Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="sm" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderSelectOptions() {
+    const { element } = this.state;
+    const selects = [];
+
+    Object.keys(element.properties_template.select_options).forEach((key) => {
+      const soptions = (element.properties_template.select_options[key]
+        && element.properties_template.select_options[key].options) || [];
+      const options = (soptions || []).map(f => (
+        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
+          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}_${key}`}>
+            <InputGroup>
+              <InputGroup.Addon>{f.key}</InputGroup.Addon>
+              <FormControl
+                type="text"
+                name="lf_label"
+                defaultValue={f.label}
+                onChange={event => this.onOptionInputChange(event, key, f.key)}
+              />
+              <InputGroup.Button>
+                {this.renderDeleteButton('Option', f.key, key)}
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </div>
+      ));
+
+      const snode = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`select_options_${key}`} >
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>{key}</Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {this.renderDeleteButton('Select', key, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="input_newOption"
+                    onChange={e => this.onInputNewOption(e)}
+                    placeholder="Input new option"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
+                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
+                    </OverlayTrigger>
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              {options}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      selects.push(snode);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Select Lists
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body>
+            <div>
+              { selects }
+            </div>
+          </Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProperties() {
+    const { element, selectOptions, unitsSystem } = this.state;
+    const layers = [];
+    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
+
+    (sortedLayers || []).forEach((layer) => {
+      const layerKey = `${layer.key}`;
+      const fields = ((layer && layer.fields) || []).map((f, idx) => (
+        <ElementField
+          genericType="Segment"
+          key={`${layerKey}${f.field}`}
+          layerKey={layerKey}
+          position={idx + 1}
+          field={f}
+          select_options={selectOptions}
+          onDrop={e => this.onFieldDrop(e)}
+          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
+          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
+          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
+          unitsSystem={unitsSystem}
+          onFieldSubFieldChange={this.onFieldSubFieldChange}
+          onDummyAdd={this.onDummyAdd}
+          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
+          allLayers={sortedLayers}
+        />
+      )) || [];
+
+      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
+      const btnCond = hasCond ?
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
+
+      const node = (
+        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
+            </Panel.Title>
+            <div>
+              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
+                <InputGroup>
+                  <InputGroup.Button>
+                    {btnCond}
+                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
+                    {this.renderDeleteButton('Layer', layerKey, null)}
+                  </InputGroup.Button>
+                  <FormControl
+                    type="text"
+                    name="nf_newfield"
+                    onChange={e => this.onInputNewField(e)}
+                    placeholder="Input new field name"
+                    bsSize="sm"
+                  />
+                  <InputGroup.Button>
+                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
+                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
+              {fields}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+      layers.push(node);
+    });
+
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title>
+              Layers
+              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
+                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body><div>{ layers }</div></Panel.Body>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderPropPanel() {
+    const {
+      element, showPropModal, revisions, propTabKey
+    } = this.state;
+    if (showPropModal) {
+      return (
+        <Tabs activeKey={propTabKey} id="segment-prop-tabs" onSelect={this.propTabSelect}>
+          <Tab eventKey={1} title="Template">
+            <Panel show={showPropModal.toString()}>
+              <Panel.Heading>
+                <b>{`Template of Segment [${element.label}]: ${element.desc}`}</b>&nbsp;
+                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
+                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
+                <span className="button-right" >
+                  <ButtonTooltip tip="Upload Segment template in JSON format" fnClick={this.handleUploadShow} element={element} place="top" fa="fa-upload" />&nbsp;
+                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
+                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
+                </span>
+                <div className="clearfix" />
+              </Panel.Heading>
+              <Panel.Body>
+                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+                  <Col sm={8}>{this.renderProperties()}</Col>
+                  <Col sm={4}>{this.renderSelectOptions()}</Col>
+                </Row>
+              </Panel.Body>
+            </Panel>
+          </Tab>
+          <Tab eventKey={3} title="Preview">
+            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
+          </Tab>
+        </Tabs>
+      );
+    }
+    return (<div />);
+  }
+
+  renderList() {
+    const { elements, element } = this.state;
+    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
+    const tbody = els && els.map((e, idx) => (
+      <tbody key={`tbody_${e.id}`}>
+        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', backgroundColor: 'white', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
+          <td>{idx + 1}</td>
+          <td>
+            <ButtonTooltip tip="copy to ..." fa="fa fa-clone" element={e} fnClick={this.copyKlass} />
+            &nbsp;
+            <ButtonTooltip tip="Edit Segment attributes" fnClick={this.editKlass} element={e} />
+            &nbsp;
+          </td>
+          <td>{e.label}</td>
+          <td>{e.desc}</td>
+          <td>
+            {
+              e.is_active ? <i className="fa fa-check" aria-hidden="true" style={{ color: 'green' }} /> : <i className="fa fa-ban" aria-hidden="true" style={{ color: 'red' }} />
+            }
+          </td>
+          <td>
+            <ButtonTooltip tip="Edit Segment template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
+            <ButtonTooltip tip="Edit Segment template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
+          </td>
+          <td>{e.element_klass && e.element_klass.label}&nbsp;<i className={e.element_klass && e.element_klass.icon_name} /></td>
+          <td>{e.released_at} (UTC)</td>
+        </tr>
+      </tbody>
+    ));
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Table responsive condensed hover>
+            <thead>
+              <tr style={{ backgroundColor: '#ddd' }}>
+                <th width="4%">#</th>
+                <th width="8%">Actions</th>
+                <th width="12%">Segment Label</th>
+                <th width="20%">Description</th>
+                <th width="8%">Active</th>
+                <th width="12%">Template</th>
+                <th width="16%">Belongs to</th>
+                <th width="18%">Released at</th>
+              </tr>
+            </thead>
+            { tbody }
+          </Table>
+        </Panel.Heading>
+      </Panel>
+    );
+  }
+
+  render() {
+    const { element, layerKey } = this.state;
+    const layer = (element && element.properties_template
+      && element.properties_template.layers[layerKey]) || {};
+
+    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
+
+    return (
+      <div>
+        <Button bsStyle="primary" bsSize="small" onClick={() => this.newKlass()}>
+          New Segment&nbsp;<i className="fa fa-plus" aria-hidden="true" />
+        </Button>
+        &nbsp;
+        <br />
+        <div className="list-container-bottom">
+          { this.renderList() }
+          { this.renderPropPanel() }
+          <SelectAttrNewModal
+            showModal={this.state.showAddSelect}
+            fnClose={this.handleSelectClose}
+            fnCreate={this.handleAddSelect}
+          />
+          <LayerAttrNewModal
+            showModal={this.state.showNewLayer}
+            fnClose={this.handleNewLayerClose}
+            fnCreate={this.handleCreateLayer}
+          />
+          <LayerAttrEditModal
+            showModal={this.state.showEditLayer}
+            layer={layer}
+            fnClose={this.handleLayerClose}
+            fnUpdate={this.handleUpdateLayer}
+          />
+          <TemplateJsonModal
+            showModal={this.state.showJson}
+            fnClose={this.hideJsonModal}
+            fnUpdate={this.handleUpdateJson}
+            element={this.state.element}
+          />
+          <AttrNewModal
+            content="Segment"
+            showModal={this.state.showNewKlass}
+            fnClose={this.handleNewKlassClose}
+            fnCreate={this.handleCreateKlass}
+          />
+          <AttrEditModal
+            content="Segment"
+            showModal={this.state.showEditKlass}
+            element={this.state.element}
+            fnClose={this.handleKlassClose}
+            fnDelete={this.handleDeleteKlass}
+            fnActivate={this.handleActivateKlass}
+            fnUpdate={this.handleUpdateKlass}
+          />
+          <FieldCondEditModal
+            showModal={this.state.showFieldCond}
+            layer={layer}
+            allLayers={sortedLayers}
+            layerKey={this.state.layerKey}
+            updSub={this.updSubField}
+            updLayer={this.updLayerSubField}
+            field={this.state.fieldObj}
+            element={this.state.element}
+            fnClose={this.handleFieldCondClose}
+          />
+          <AttrCopyModal
+            content="Segment"
+            showModal={this.state.showCopyKlass}
+            element={this.state.element}
+            fnClose={this.handleCopyKlassClose}
+            fnCopy={this.handleCreateKlass}
+          />
+          <UploadModal
+            content="Generic Segments"
+            klass="SegmentKlass"
+            showModal={this.state.showUpload}
+            fnClose={this.handleUploadClose}
+            fnUpload={this.handleUploadTemplate}
+          />
+        </div>
+        <LoadingModal />
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/TemplateManagement.js b/app/packs/src/admin/TemplateManagement.js
new file mode 100644
index 000000000..7cf5886ee
--- /dev/null
+++ b/app/packs/src/admin/TemplateManagement.js
@@ -0,0 +1,412 @@
+import React from 'react';
+import { Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, ButtonGroup, Tooltip, OverlayTrigger, Popover, FormControl } from 'react-bootstrap';
+import ReportTemplateFetcher from '../components/fetchers/ReportTemplateFetcher';
+import Dropzone from 'react-dropzone';
+import Select from 'react-select';
+
+const editTooltip = <Tooltip id="inchi_tooltip">Edit this template</Tooltip>;
+
+export default class TemplateManagement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      templates: [],
+      template: {},
+      attachment: null,
+      showNewTemplateModal: false,
+      deletingTooltip: false,
+      templateType: null,
+      reportTemplateTypes:
+        [
+          { label: 'Standard', value: 'standard' },
+          { label: 'Supporting Information', value: 'supporting_information' },
+          { label: 'Supporting Information - Standard Reaction', value: 'supporting_information_std_rxn' },
+          { label: 'Supporting Information - Spectra', value: 'spectrum' },
+          { label: 'Supporting Information - Reaction List (.xlsx)', value: 'rxn_list_xlsx' },
+          { label: 'Supporting Information - Reaction List (.csv)', value: 'rxn_list_csv' },
+          { label: 'Supporting Information - Reaction List (.html)', value: 'rxn_list_html' }
+        ],
+      showEditTemplateModal: false,
+    };
+    this.handleFetchTemplates = this.handleFetchTemplates.bind(this);
+    this.handleNewTemplateShow = this.handleNewTemplateShow.bind(this);
+    this.handleNewTemplateClose = this.handleNewTemplateClose.bind(this);
+    this.handleCreateNewTemplate = this.handleCreateNewTemplate.bind(this);
+    this.handleFileDrop = this.handleFileDrop.bind(this);
+    this.renderDeleteButton = this.renderDeleteButton.bind(this);
+    this.onTemplateTypeChange = this.onTemplateTypeChange.bind(this);
+    this.handleEditTemplateShow = this.handleEditTemplateShow.bind(this);
+    this.handleEditTemplateClose = this.handleEditTemplateClose.bind(this);
+    this.handleUpdateTemplate = this.handleUpdateTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleFetchTemplates();
+    return true;
+  }
+
+  componentWillUnmount() {
+  }
+
+  handleNewTemplateShow() {
+    this.setState({
+      showNewTemplateModal: true
+    });
+  }
+
+  handleNewTemplateClose() {
+    this.setState({
+      showNewTemplateModal: false,
+      template: {},
+      attachment: null,
+      templateType: null,
+    });
+  }
+
+  handleEditTemplateShow(id) {
+    ReportTemplateFetcher.fetchTemplateById(id)
+      .then((result) => {
+        this.setState({
+          showEditUserModal: true,
+          template: result.template,
+          templateType: result.template.report_type
+        });
+      });
+  }
+
+  handleEditTemplateClose() {
+    this.setState({
+      showEditUserModal: false,
+      template: {},
+      templateType: null,
+    });
+  }
+
+  handleFetchTemplates() {
+    ReportTemplateFetcher.fetchTemplates()
+      .then((result) => {
+        this.setState({
+          templates: result.templates
+        });
+      });
+  }
+
+  handleCreateNewTemplate() {
+    let params = {
+      attachment: this.state.attachment,
+      name: this.templateName.value.trim(),
+      report_type: this.state.templateType?.value
+    }
+
+    ReportTemplateFetcher.createTemplate(params)()
+      .then(() => {
+        this.handleFetchTemplates();
+      })
+
+    this.handleNewTemplateClose();
+    return true;
+  }
+
+  handleUpdateTemplate(id) {
+    let params = {
+      id: id,
+      attachment: this.state.attachment,
+      name: this.templateName.value.trim(),
+      report_type: this.state.templateType?.value,
+      attachment_id: this.state.template.attachment_id,
+    }
+
+    if (!params.report_type) {
+      params.report_type = this.state.templateType;
+    }
+
+    ReportTemplateFetcher.updateTemplate(params)()
+      .then(() => {
+        this.handleFetchTemplates();
+      })
+
+    this.handleEditTemplateClose();
+    return true;
+  }
+
+  handleFileDrop(attachment_file) {
+    this.setState({ attachment: attachment_file[0] });
+  }
+
+  handleAttachmentRemove() {
+    let newTemplate = this.state.template;
+    newTemplate.attachment = null;
+    newTemplate.attachment_id = null;
+    this.setState({ template: newTemplate, attachment: null });
+  }
+
+  handleDeleteTemplate(template) {
+    ReportTemplateFetcher.deleteAttachment(template)
+      .then(() => {
+        this.handleFetchTemplates();
+      })
+
+    return true;
+  }
+
+  dropzoneOrfilePreview() {
+    const { template, attachment } = this.state;
+    if (template.attachment_id) {
+      return (
+        <div className="control-label">
+          {template.attachment.filename} &nbsp;
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
+            <i className="fa fa-trash-o"></i>
+          </Button>
+        </div>
+      );
+    } else if (attachment) {
+      return (
+        <div className="control-label">
+          {attachment.name} &nbsp;
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
+            <i className="fa fa-trash-o"></i>
+          </Button>
+        </div>
+      );
+    } else {
+      return (
+        <Dropzone
+          accept="application/pdf,.docx,.xlsx,.html,.csv,.erb"
+          onDrop={attachment_file => this.handleFileDrop(attachment_file)}
+          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
+        >
+          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
+            Drop File, or Click to Select.
+          </div>
+        </Dropzone>
+      );
+    }
+  }
+
+  onTemplateTypeChange(e) {
+    this.setState({ templateType: e })
+  };
+
+  renderNewTemplateModal() {
+
+    return (
+      <Modal
+        show={this.state.showNewTemplateModal}
+        onHide={this.handleNewTemplateClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>New Template</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-9">
+            <Form horizontal>
+              <FormGroup controlId="formControlName">
+                <Col componentClass={ControlLabel} sm={2}>
+                  Name:
+                </Col>
+                <Col sm={10}>
+                  <FormControl type="text" name="templateName" inputRef={(ref) => { this.templateName = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlReportTemplateType">
+                <Col componentClass={ControlLabel} sm={2}>
+                  Type:
+                </Col>
+                <Col sm={10}>
+                  <Select
+                    options={this.state.reportTemplateTypes}
+                    value={this.state.templateType}
+                    clearable={true}
+                    onChange={this.onTemplateTypeChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlAttachment">
+                <Col componentClass={ControlLabel} sm={2}>
+                  File:
+                </Col>
+                <Col sm={10}>
+                  {this.dropzoneOrfilePreview()}
+                </Col>
+              </FormGroup>
+              <FormGroup>
+                <Col smOffset={0} sm={10}>
+                  <Button bsStyle="primary" onClick={() => this.handleCreateNewTemplate()} >
+                    Create&nbsp;
+                    <i className="fa fa-plus" />
+                  </Button>
+                  &nbsp;
+                  <Button bsStyle="warning" onClick={() => this.handleNewTemplateClose()} >
+                    Cancel&nbsp;
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  renderEditTemplateModal() {
+    const { template } = this.state;
+
+    return (
+      <Modal
+        show={this.state.showEditUserModal}
+        onHide={this.handleEditTemplateClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Edit Template</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-9">
+            <Form horizontal>
+              <FormGroup controlId="formControlName">
+                <Col componentClass={ControlLabel} sm={2}>
+                  Name:
+                </Col>
+                <Col sm={10}>
+                  <FormControl type="text" name="templateName" defaultValue={template.name} inputRef={(ref) => { this.templateName = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlReportTemplateType">
+                <Col componentClass={ControlLabel} sm={2}>
+                  Type:
+                </Col>
+                <Col sm={10}>
+                  <Select
+                    options={this.state.reportTemplateTypes}
+                    value={this.state.templateType}
+                    clearable={true}
+                    onChange={this.onTemplateTypeChange}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlAttachment">
+                <Col componentClass={ControlLabel} sm={2}>
+                  File:
+                </Col>
+                <Col sm={10}>
+                  {this.dropzoneOrfilePreview()}
+                </Col>
+              </FormGroup>
+              <FormGroup>
+                <Col smOffset={0} sm={10}>
+                  <Button bsStyle="primary" onClick={() => this.handleUpdateTemplate(template.id)} >
+                    Update&nbsp;
+                    <i className="fa fa-save" />
+                  </Button>
+                  &nbsp;
+                  <Button bsStyle="warning" onClick={() => this.handleEditTemplateClose()} >
+                    Cancel&nbsp;
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  renderDeleteButton(template) {
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        Delete this template? <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleDeleteTemplate(template)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
+            No
+          </Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <ButtonGroup className="actions">
+        <OverlayTrigger
+          animation
+          placement="right"
+          root
+          trigger="focus"
+          overlay={popover}
+        >
+          <Button bsSize="xsmall" bsStyle="danger" >
+            <i className="fa fa-trash-o" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+  }
+
+  toggleTooltip() {
+    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
+  }
+
+  render() {
+    const { templates } = this.state;
+
+    const tcolumn = (
+      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
+        <th width="1%">#</th>
+        <th width="30%">Name</th>
+        <th width="30%">Report Type</th>
+        <th width="2%">ID</th>
+        <th width="30%">Actions</th>
+      </tr>
+    )
+
+    const tbody = templates.map((g, idx) => (
+      <tr key={`row_${g.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
+        <td width="1%">
+          {idx + 1}
+        </td>
+        <td width="30%"> {g.name} </td>
+        <td width="30%"> {(this.state.reportTemplateTypes.find(({ value }) => value === g.report_type) || {}).label} </td>
+        <td width="2%"> {g.id} </td>
+        <td width="12%">
+          <OverlayTrigger placement="bottom" overlay={editTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="info"
+              onClick={() => this.handleEditTemplateShow(g.id)}
+            >
+              <i className="fa fa-user" />
+            </Button>
+          </OverlayTrigger>
+          <ButtonGroup>
+            {this.renderDeleteButton(g)}
+          </ButtonGroup>
+          &nbsp;
+        </td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        <Panel>
+          <Button bsStyle="primary" bsSize="small" onClick={() => this.handleNewTemplateShow()}>
+            Add new template&nbsp;<i className="fa fa-plus" />
+          </Button>
+          &nbsp;
+        </Panel>
+        <Panel>
+          <Table>
+            <thead>
+              {tcolumn}
+            </thead>
+            <tbody>
+              {tbody}
+            </tbody>
+          </Table>
+        </Panel>
+        { this.renderNewTemplateModal()}
+        { this.renderEditTemplateModal()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/UserManagement.js b/app/packs/src/admin/UserManagement.js
new file mode 100644
index 000000000..4fd8421f8
--- /dev/null
+++ b/app/packs/src/admin/UserManagement.js
@@ -0,0 +1,944 @@
+import React from 'react';
+import { Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, FormControl, Tooltip, OverlayTrigger, Tabs, Tab } from 'react-bootstrap';
+import Select from 'react-select';
+import { CSVReader } from 'react-papaparse';
+import UsersFetcher from '../components/fetchers/UsersFetcher';
+import AdminFetcher from '../components/fetchers/AdminFetcher';
+import MessagesFetcher from '../components/fetchers/MessagesFetcher';
+
+const loadUserByName = (input) => {
+  if (!input) {
+    return Promise.resolve({ options: [] });
+  }
+
+  return UsersFetcher.fetchUsersByName(input)
+    .then((res) => {
+      const usersEntries = res.users.filter(u => u.user_type === 'Person')
+        .map(u => ({
+          value: u.id,
+          name: u.name,
+          label: `${u.name}(${u.abb})`
+        }));
+      return { options: usersEntries };
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+};
+
+const handleResetPassword = (id, random) => {
+  AdminFetcher.resetUserPassword({ user_id: id, random })
+    .then((result) => {
+      if (result.rp) {
+        let message = '';
+        if (random) {
+          message = result.pwd ? `Password reset! New password: \n ${result.pwd}`
+            : 'Password reset!';
+        } else {
+          message = result.email ? `Password reset! instructions sent to : \n ${result.email}`
+            : 'Password instruction sent!';
+        }
+        alert(message);
+      } else {
+        alert(`Password reset fail: \n ${result.pwd}`);
+      }
+    });
+};
+
+const validateEmail = mail => (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail));
+const editTooltip = <Tooltip id="inchi_tooltip">edit User Info</Tooltip>;
+const resetPasswordTooltip = <Tooltip id="assign_button">reset password</Tooltip>;
+const resetPasswordInstructionsTooltip = <Tooltip id="assign_button">send password instructions</Tooltip>;
+const confirmUserTooltip = <Tooltip id="assign_button">confirm this account</Tooltip>;
+const confirmEmailChangeTooltip = email => (<Tooltip id="email_change_button">confirm email: <br /> {email}</Tooltip>);
+const disableTooltip = <Tooltip id="assign_button">lock this account</Tooltip>;
+const enableTooltip = <Tooltip id="assign_button">unlock this account</Tooltip>;
+const converterEnableTooltip = <Tooltip id="assign_button">Enable Converter profiles editing for this user (currently disabled)</Tooltip>;
+const converterDisableTooltip = <Tooltip id="assign_button">Disable Converter profiles editing for this user (currently enabled)</Tooltip>;
+const templateModeratorEnableTooltip = <Tooltip id="assign_button">Enable Ketcher template editing for this user (currently disabled)</Tooltip>;
+const templateModeratorDisableTooltip = <Tooltip id="assign_button">Disable Ketcher template editing for this user (currently enabled)</Tooltip>;
+const moleculeModeratorEnableTooltip = <Tooltip id="assign_button">Enable editing the representation of the global molecules for this user (currently disabled)</Tooltip>;
+const moleculeModeratorDisableTooltip = <Tooltip id="assign_button">Disable editing the representation of the global molecules for this user (currently enabled)</Tooltip>;
+const accountActiveTooltip = <Tooltip id="assign_button">This user account is deactivated, press button to [activate]</Tooltip>;
+const accountInActiveTooltip = <Tooltip id="assign_button">This user account is activated, press button to [deactivate]</Tooltip>;
+
+export default class UserManagement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+      user: {},
+      selectedUsers: null,
+      showMsgModal: false,
+      showNewUserModal: false,
+      showEditUserModal: false,
+      messageNewUserModal: '',
+      messageEditUserModal: '',
+      processingSummaryUserFile: '',
+    };
+    this.handleFetchUsers = this.handleFetchUsers.bind(this);
+    this.handleMsgShow = this.handleMsgShow.bind(this);
+    this.handleMsgClose = this.handleMsgClose.bind(this);
+    this.handleNewUserShow = this.handleNewUserShow.bind(this);
+    this.handleNewUserClose = this.handleNewUserClose.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.messageSend = this.messageSend.bind(this);
+    this.handleCreateNewUser = this.handleCreateNewUser.bind(this);
+    this.handleEditUserShow = this.handleEditUserShow.bind(this);
+    this.handleEditUserClose = this.handleEditUserClose.bind(this);
+    this.handleUpdateUser = this.handleUpdateUser.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleFetchUsers();
+    return true;
+  }
+
+  componentWillUnmount() {
+  }
+
+  handleMsgShow() {
+    this.setState({
+      showMsgModal: true
+    });
+  }
+
+  handleMsgClose() {
+    this.setState({
+      showMsgModal: false
+    });
+  }
+
+  handleNewUserShow() {
+    this.setState({
+      showNewUserModal: true
+    });
+  }
+
+  handleNewUserClose() {
+    this.setState({
+      showNewUserModal: false
+    });
+  }
+
+  handleEditUserShow(user) {
+    this.setState({
+      showEditUserModal: true,
+      messageEditUserModal: '',
+      user
+    });
+  }
+
+  handleEditUserClose() {
+    this.setState({
+      showEditUserModal: false,
+      messageEditUserModal: '',
+      user: {}
+    });
+  }
+
+  handleFetchUsers() {
+    AdminFetcher.fetchUsers()
+      .then((result) => {
+        this.setState({
+          users: result.users
+        });
+      });
+  }
+
+  handleEnableDisableAccount(id, lockedAt) {
+    AdminFetcher.updateAccount({ user_id: id, enable: lockedAt !== null })
+      .then((result) => {
+        this.handleFetchUsers();
+        const message = lockedAt !== null ? 'Account unlocked!' : 'Account locked!'; //
+        alert(message);
+      });
+  }
+
+  handleConverterAdmin(id, isConverterAdmin) {
+    AdminFetcher.updateAccount({ user_id: id, converter_admin: !isConverterAdmin })
+      .then((result) => {
+        this.handleFetchUsers();
+        const message = isConverterAdmin === true ? 'Disable Converter profiles editing for this user' : 'Enable Converter profiles editing for this user';
+        alert(message);
+      });
+  }
+
+  handleTemplatesModerator(id, isTemplatesModerator) {
+    AdminFetcher.updateAccount({ user_id: id, is_templates_moderator: !isTemplatesModerator })
+      .then((result) => {
+        this.handleFetchUsers();
+        const message = isTemplatesModerator === true ? 'Disable Ketcher template editing for this user' : 'Enable Ketcher template editing for this user';
+        alert(message);
+      });
+  }
+
+  handleMoleculesModerator(id, isMoleculesEditor) {
+    AdminFetcher.updateAccount({ user_id: id, molecule_editor: !isMoleculesEditor })
+      .then((result) => {
+        this.handleFetchUsers();
+        const message = isMoleculesEditor === true ? 'Disable editing the representation of the global molecules for this user' : 'Enable editing the representation of the global molecules for this user';
+        alert(message);
+      });
+  }
+
+  handleActiveInActiveAccount(id, isActive) {
+    AdminFetcher.updateAccount({ user_id: id, account_active: !isActive })
+      .then((result) => {
+        this.handleFetchUsers();
+        const message = isActive === true ? 'User is In-Active!' : 'User is Active now!';
+        alert(message);
+      });
+  }
+
+  handleSelectUser(val) {
+    if (val) {
+      this.setState({ selectedUsers: val });
+    }
+  }
+
+  handleConfirmUserAccount(id) {
+    AdminFetcher.updateAccount({ user_id: id, confirm_user: true })
+      .then((result) => {
+        if (result !== null) {
+          this.handleFetchUsers();
+          alert('User Account has been confirmed!');
+        }
+      });
+  }
+
+  handleReConfirmUserAccount(id) {
+    AdminFetcher.updateAccount({ user_id: id, reconfirm_user: true })
+      .then((result) => {
+        if (result !== null) {
+          this.handleFetchUsers();
+          alert('User New Email has been confirmed!');
+        }
+      });
+  }
+
+  validateUserInput() {
+    if (this.email.value === '') { // also validated in backend
+      this.setState({ messageNewUserModal: 'Please input email.' });
+      return false;
+    } else if (!validateEmail(this.email.value.trim())) { // also validated in backend
+      this.setState({ messageNewUserModal: 'You have entered an invalid email address!' });
+      return false;
+    } else if (this.password.value.trim() === '' || this.passwordConfirm.value.trim() === '') {
+      this.setState({ messageNewUserModal: 'Please input password with correct format.' });
+      return false;
+    } else if (this.password.value.trim() !== this.passwordConfirm.value.trim()) {
+      this.setState({ messageNewUserModal: 'passwords do not mach!' });
+      return false;
+    } else if (this.password.value.trim().length < 8) { // also validated in backend
+      this.setState({ messageNewUserModal: 'Password is too short (minimum is 8 characters)' });
+      return false;
+    } else if (this.firstname.value.trim() === '' || this.lastname.value.trim() === '' || this.nameAbbr.value.trim() === '') { // also validated in backend
+      this.setState({ messageNewUserModal: 'Please input First name, Last name and Name abbreviation' });
+      return false;
+    }
+    return true;
+  }
+
+  handleCreateNewUser() {
+    if (!this.validateUserInput()) {
+      return false;
+    }
+    AdminFetcher.createUserAccount({
+      email: this.email.value.trim(),
+      password: this.password.value.trim(),
+      first_name: this.firstname.value.trim(),
+      last_name: this.lastname.value.trim(),
+      name_abbreviation: this.nameAbbr.value.trim(),
+      type: this.type.value
+    })
+      .then((result) => {
+        if (result.error) {
+          this.setState({ messageNewUserModal: result.error });
+          return false;
+        }
+        this.setState({ messageNewUserModal: 'New user created.' });
+        this.email.value = '';
+        this.password.value = '';
+        this.passwordConfirm.value = '';
+        this.firstname.value = '';
+        this.lastname.value = '';
+        this.nameAbbr.value = '';
+        this.handleFetchUsers();
+        return true;
+      });
+    return true;
+  }
+
+  handleOnDropUserFile = (data, file) => {
+    const validFileTypes = ['text/csv', 'application/vnd.ms-excel'];
+    if (!validFileTypes.includes(file.type)) { // Note that MIME type doesn't reliably indicate file type. It's only an initial guard and data is validated more thoroughly during processing.
+      this.setState({ processingSummaryUserFile: `Invalid file type ${file.type}. Please make sure to upload a CSV file.` });
+      this.newUsers = null;
+      return false;
+    }
+    this.newUsers = data;
+    for (let i = 0; i < this.newUsers.length; i++) {
+      this.newUsers[i].data.row = i + 1;
+    }
+  };
+
+  handleOnErrorUserFile = (err, file, inputElem, reason) => {
+    console.log(err);
+    this.newUsers = null;
+  };
+
+  handleOnRemoveUserFile = (data) => {
+    this.newUsers = null;
+  };
+
+  handleCreateNewUsersFromFile() {
+    if (!this.validUserFile()) {
+      this.newUsers = null;
+      this.setState({ messageNewUserModal: 'Finished processing user file.' });
+    } else {
+      const promisedNewUsers = this.newUsers.map(user => this.createNewUserFromFile(user));
+      Promise.allSettled(promisedNewUsers)
+        .then((userResults) => {
+          this.showProcessingSummaryUserFile(userResults);
+        })
+        .then(() => this.handleFetchUsers())
+        .catch((reason) => {
+          this.setState({ messageNewUserModal: `Failed to process user file: ${reason}.` });
+        });
+    }
+  }
+
+  createNewUserFromFile(newUser) {
+    return AdminFetcher.createUserAccount({
+      email: newUser.data.email.trim(),
+      password: newUser.data.password.trim(),
+      first_name: newUser.data.firstname.trim(),
+      last_name: newUser.data.lastname.trim(),
+      name_abbreviation: newUser.data.nameabbr.trim(),
+      type: newUser.data.type.trim()
+    })
+      .then((result) => {
+        let userResult = `Row ${newUser.data.row}: Successfully created new user.`;
+        if (result.error) {
+          userResult = `Row ${newUser.data.row}: Failed to create user; ${result.error}.`;
+        }
+        this.setState({ messageNewUserModal: userResult });
+        return userResult;
+      });
+  }
+
+  validUserFile() {
+    if (!Array.isArray(this.newUsers) || !this.newUsers.length) {
+      this.setState({ processingSummaryUserFile: 'The file is empty.' });
+      return false;
+    }
+
+    const nUsers = this.newUsers.length;
+    const nUsersMax = 100;
+    if (nUsers > nUsersMax) {
+      this.setState({ processingSummaryUserFile: `The file contains too many users. Please make sure that the number of users you add from a single file doesn't exceed ${nUsersMax}.` });
+      return false;
+    }
+
+    const fileHeader = this.newUsers[0].meta.fields;
+    const validHeader = ['email', 'password', 'firstname', 'lastname', 'nameabbr', 'type'];
+    if (!(fileHeader.length === validHeader.length &&
+      fileHeader.every((val, index) => val === validHeader[index]))) {
+      this.setState({ processingSummaryUserFile: `The file contains an invalid header ${fileHeader}. Please make sure that your file's header is organized as follows: ${validHeader}.` });
+      return false;
+    }
+
+    let parsingErrorMessage = '';
+    this.newUsers.forEach((user) => {
+      const parsingErrors = user.errors;
+      if (parsingErrors.length) {
+        parsingErrors.forEach((error) => {
+          parsingErrorMessage += `Row ${user.data.row}: The user could not be parsed correctly; ${error.message}\n\n`;
+        });
+      }
+    });
+    if (!(parsingErrorMessage === '')) {
+      this.setState({ processingSummaryUserFile: parsingErrorMessage });
+      return false;
+    }
+
+    // We need to guard against invalid user types when creating multiple users from file,
+    // since user type is not validated on the backend.
+    // The backend doesn't validate user type because in the modal for adding a single users,
+    // the user type cannot be invalid since it's selected from a dropdown.
+    // However, when multiple users are created from a file, type can be any string.
+    const validTypes = ['Person', 'Device', 'Admin'];
+    let invalidTypeMessage = '';
+    this.newUsers.forEach((user) => {
+      const userType = user.data.type.trim();
+      if (!validTypes.includes(userType)) {
+        invalidTypeMessage += `Row ${user.data.row}: The user's type "${userType}" is invalid. Please select a valid type from ${validTypes}.\n\n`;
+      }
+    });
+    if (!(invalidTypeMessage === '')) {
+      this.setState({ processingSummaryUserFile: invalidTypeMessage });
+      return false;
+    }
+
+    const sortedUserEmails = this.newUsers.map(user => user.data.email).sort();
+    const duplicateUserEmails = new Set();
+    for (let i = 0; i < sortedUserEmails.length - 1; i++) {
+      if (sortedUserEmails[i + 1] == sortedUserEmails[i]) {
+        duplicateUserEmails.add(sortedUserEmails[i]);
+      }
+    }
+    if (duplicateUserEmails.size) {
+      this.setState({ processingSummaryUserFile: `The file contains duplicate user emails: ${Array.from(duplicateUserEmails.values())}. Please make sure that each user has a unique email.` });
+      return false;
+    }
+
+    return true;
+  }
+
+  showProcessingSummaryUserFile(userResults) {
+    let summary = '';
+    userResults.forEach((result) => {
+      summary += `${result.value}\n\n`;
+    });
+    this.setState({
+      messageNewUserModal: 'Finished processing user file.',
+      processingSummaryUserFile: summary
+    });
+  }
+
+  handleUpdateUser(user) {
+    if (!validateEmail(this.u_email.value.trim())) {
+      this.setState({ messageEditUserModal: 'You have entered an invalid email address!' });
+      return false;
+    } else if (this.u_firstname.value.trim() === '' || this.u_lastname.value.trim() === '' || this.u_abbr.value.trim() === '') {
+      this.setState({ messageEditUserModal: 'please input first name, last name and name abbreviation!' });
+      return false;
+    }
+    AdminFetcher.updateUser({
+      id: user.id,
+      email: this.u_email.value.trim(),
+      first_name: this.u_firstname.value.trim(),
+      last_name: this.u_lastname.value.trim(),
+      name_abbreviation: this.u_abbr.value.trim(),
+      type: this.u_type.value
+    })
+      .then((result) => {
+        if (result.error) {
+          this.setState({ messageEditUserModal: result.error });
+          return false;
+        }
+        this.setState({ showEditUserModal: false, messageEditUserModal: '' });
+        this.u_email.value = '';
+        this.u_firstname.value = '';
+        this.u_lastname.value = '';
+        this.u_abbr.value = '';
+        this.handleFetchUsers();
+        return true;
+      });
+    return true;
+  }
+  messageSend() {
+    const { selectedUsers } = this.state;
+    if (this.myMessage.value === '') {
+      alert('Please input the message!');
+    } else if (!selectedUsers) {
+      alert('Please select user(s)!');
+    } else {
+      const userIds = [];
+      selectedUsers.map((g) => {
+        userIds.push(g.value);
+        return true;
+      });
+      MessagesFetcher.channelIndividualUsers()
+        .then((result) => {
+          const params = {
+            channel_id: result.id,
+            content: this.myMessage.value,
+            user_ids: userIds
+          };
+          MessagesFetcher.createMessage(params)
+            .then((result) => {
+              this.myMessage.value = '';
+              this.setState({
+                selectedUsers: null
+              });
+              this.handleMsgClose();
+            });
+        });
+    }
+  }
+
+  renderMessageModal() {
+    const { selectedUsers } = this.state;
+    return (
+      <Modal
+        show={this.state.showMsgModal}
+        onHide={this.handleMsgClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Send Message</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-9">
+            <Form>
+              <FormGroup controlId="formControlsTextarea">
+                <ControlLabel>Message</ControlLabel>
+                <FormControl
+                  componentClass="textarea"
+                  placeholder="message..."
+                  rows="20"
+                  inputRef={(ref) => { this.myMessage = ref; }}
+                />
+              </FormGroup>
+              <FormGroup>
+                <Select.AsyncCreatable
+                  multi
+                  isLoading
+                  backspaceRemoves
+                  value={selectedUsers}
+                  valueKey="value"
+                  labelKey="label"
+                  matchProp="name"
+                  placeholder="Select users"
+                  promptTextCreator={this.promptTextCreator}
+                  loadOptions={loadUserByName}
+                  onChange={this.handleSelectUser}
+                />
+              </FormGroup>
+              <Button
+                bsStyle="primary"
+                onClick={() => this.messageSend()}
+              >
+                Send&nbsp;
+                <i className="fa fa-paper-plane" />
+              </Button>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  renderNewUserModal() {
+    // const { selectedUsers } = this.state;
+    return (
+      <Modal
+        show={this.state.showNewUserModal}
+        onHide={this.handleNewUserClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>New User</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Tabs id="createUserTabs">
+            <Tab eventKey="singleUser" title="Single user">
+              <Form horizontal>
+                <FormGroup controlId="formControlEmail">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Email:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="email" name="email" inputRef={(ref) => { this.email = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlPassword">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Password:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="password" name="password" inputRef={(ref) => { this.password = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlPasswordConfirmation">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Password Confirmation:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="password" inputRef={(ref) => { this.passwordConfirm = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlFirstName">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    First name:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="text" name="firstname" inputRef={(ref) => { this.firstname = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlLastName">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Last name:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="text" name="lastname" inputRef={(ref) => { this.lastname = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlAbbr">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Abbr (3) *:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl type="text" name="nameAbbr" inputRef={(ref) => { this.nameAbbr = ref; }} />
+                  </Col>
+                </FormGroup>
+                <FormGroup controlId="formControlsType">
+                  <Col componentClass={ControlLabel} sm={3}>
+                    Type:
+                  </Col>
+                  <Col sm={9}>
+                    <FormControl componentClass="select" inputRef={(ref) => { this.type = ref; }} >
+                      <option value="Person">Person</option>
+                      <option value="Admin">Admin</option>
+                      <option value="Device">Device</option>
+                    </FormControl>
+                  </Col>
+                </FormGroup>
+                <FormGroup>
+                  <Col smOffset={0} sm={10}>
+                    <Button bsStyle="primary" onClick={() => this.handleCreateNewUser()} >
+                      Create user&nbsp;
+                      <i className="fa fa-plus" />
+                    </Button>
+                  </Col>
+                </FormGroup>
+              </Form>
+            </Tab>
+            <Tab eventKey="multiUser" title="Multiple users from file">
+              <Form>
+                <FormGroup>
+                  <ControlLabel>Please format the user file like the table below.</ControlLabel>
+                  <Table striped bordered hover>
+                    <thead>
+                      <tr>
+                        <th>email</th>
+                        <th>password</th>
+                        <th>firstname</th>
+                        <th>lastname</th>
+                        <th>nameabbr</th>
+                        <th>type</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>john.doe@eln.edu</td>
+                        <td>password0</td>
+                        <td>John</td>
+                        <td>Doe</td>
+                        <td>jod</td>
+                        <td>Person</td>
+                      </tr>
+                      <tr>
+                        <td>jane.doe@eln.edu</td>
+                        <td>password1</td>
+                        <td>Jane</td>
+                        <td>Doe</td>
+                        <td>jad</td>
+                        <td>Person</td>
+                      </tr>
+                    </tbody>
+                  </Table>
+                </FormGroup>
+                <FormGroup id="userFileDragAndDrop">
+                  <CSVReader
+                    onDrop={this.handleOnDropUserFile}
+                    onError={this.handleOnErrorUserFile}
+                    style={{}}
+                    config={{ header: true, skipEmptyLines: true }}
+                    addRemoveButton
+                    onRemoveFile={this.handleOnRemoveUserFile}
+                  >
+                    <span>Drop a CSV user file here or click to upload.
+                      The following column-delimiters are accepted: &apos;,&apos; or &apos;;&apos; or &apos;tab&apos;.
+                    </span>
+                  </CSVReader>
+                </FormGroup>
+                <FormGroup>
+                  <Button bsStyle="primary" onClick={() => this.handleCreateNewUsersFromFile()} >
+                    Create users&nbsp;
+                    <i className="fa fa-plus" />
+                  </Button>
+                </FormGroup>
+                <FormGroup>
+                  <ControlLabel>Processing Summary</ControlLabel>
+                  <FormControl
+                    readOnly
+                    id="processingSummary"
+                    componentClass="textarea"
+                    rows="5"
+                    style={{ whiteSpace: 'pre-wrap', overflowY: 'scroll' }}
+                    value={this.state.processingSummaryUserFile}
+                  />
+                </FormGroup>
+              </Form>
+            </Tab>
+          </Tabs>
+          <Modal.Footer>
+            <FormGroup controlId="formControlMessage">
+              <FormControl type="text" readOnly name="messageNewUserModal" value={this.state.messageNewUserModal} />
+            </FormGroup>
+            <Button bsStyle="warning" onClick={() => this.handleNewUserClose()} >Cancel</Button>
+          </Modal.Footer>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+
+  renderEditUserModal() {
+    const { user } = this.state;
+    return (
+      <Modal
+        show={this.state.showEditUserModal}
+        onHide={this.handleEditUserClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Edit User</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-9">
+            <Form horizontal>
+              <FormGroup controlId="formControlEmail">
+                <Col componentClass={ControlLabel} sm={3}>
+                  Email:
+                </Col>
+                <Col sm={9}>
+                  <FormControl type="email" name="u_email" defaultValue={user.email} inputRef={(ref) => { this.u_email = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlFirstName">
+                <Col componentClass={ControlLabel} sm={3}>
+                  First name:
+                </Col>
+                <Col sm={9}>
+                  <FormControl type="text" name="u_firstname" defaultValue={user.first_name} inputRef={(ref) => { this.u_firstname = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlLastName">
+                <Col componentClass={ControlLabel} sm={3}>
+                  Last name:
+                </Col>
+                <Col sm={9}>
+                  <FormControl type="text" name="u_lastname" defaultValue={user.last_name} inputRef={(ref) => { this.u_lastname = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlAbbr">
+                <Col componentClass={ControlLabel} sm={3}>
+                  Abbr (3):
+                </Col>
+                <Col sm={9}>
+                  <FormControl type="text" name="u_abbr" defaultValue={user.initials} inputRef={(ref) => { this.u_abbr = ref; }} />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlsType">
+                <Col componentClass={ControlLabel} sm={3}>
+                  Type:
+                </Col>
+                <Col sm={9}>
+                  <FormControl componentClass="select" defaultValue={user.type} inputRef={(ref) => { this.u_type = ref; }} >
+                    <option value="Person">Person</option>
+                    <option value="Group">Group</option>
+                    <option value="Device">Device</option>
+                    <option value="Admin">Admin</option>
+                  </FormControl>
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formControlMessage">
+                <Col sm={12}>
+                  <FormControl type="text" readOnly name="messageEditUserModal" value={this.state.messageEditUserModal} />
+                </Col>
+              </FormGroup>
+              <FormGroup>
+                <Col smOffset={0} sm={10}>
+                  <Button bsStyle="primary" onClick={() => this.handleUpdateUser(user)} >
+                    Update&nbsp;
+                    <i className="fa fa-save" />
+                  </Button>
+                  &nbsp;
+                  <Button bsStyle="warning" onClick={() => this.handleEditUserClose()} >
+                    Cancel&nbsp;
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    const renderConfirmButton = (show, userId) => {
+      if (show) {
+        return (
+          <OverlayTrigger placement="bottom" overlay={confirmUserTooltip}>
+            <Button
+              bsSize="xsmall"
+              bsStyle="info"
+              onClick={() => this.handleConfirmUserAccount(userId, false)}
+            >
+              <i className="fa fa-check-square" />
+            </Button>
+          </OverlayTrigger>
+        );
+      }
+      return <span />;
+    };
+
+    const renderReConfirmButton = (unconfirmed_email, userId) => {
+      if (unconfirmed_email) {
+        return (
+          <OverlayTrigger placement="bottom" overlay={confirmEmailChangeTooltip(unconfirmed_email)}>
+            <Button
+              bsSize="xsmall"
+              bsStyle="warning"
+              onClick={() => this.handleReConfirmUserAccount(userId)}
+            >
+              <i className="fa fa-check-square" />
+            </Button>
+          </OverlayTrigger>
+        );
+      }
+      return <span />;
+    };
+
+    const { users } = this.state;
+
+    const tcolumn = (
+      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
+        <th width="1%">#</th>
+        <th width="12%">Actions</th>
+        <th width="12%">Name</th>
+        <th width="6%">Abbr.</th>
+        <th width="8%">Email</th>
+        <th width="7%">Type</th>
+        <th width="15%">Login at</th>
+        <th width="2%">ID</th>
+      </tr>
+    );
+
+    const tbody = users.map((g, idx) => (
+      <tr key={`row_${g.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
+        <td width="1%">
+          {idx + 1}
+        </td>
+        <td width="12%">
+          <OverlayTrigger placement="bottom" overlay={editTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="info"
+              onClick={() => this.handleEditUserShow(g)}
+            >
+              <i className="fa fa-user" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={resetPasswordTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="success"
+              onClick={() => handleResetPassword(g.id, true)}
+            >
+              <i className="fa fa-key" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={resetPasswordInstructionsTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle="primary"
+              onClick={() => handleResetPassword(g.id, false)}
+            >
+              <i className="fa fa-key" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={g.locked_at === null ? disableTooltip : enableTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle={g.locked_at === null ? 'default' : 'warning'}
+              onClick={() => this.handleEnableDisableAccount(g.id, g.locked_at, false)}
+            >
+              <i className={g.locked_at === null ? 'fa fa-lock' : 'fa fa-unlock'} />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={(g.converter_admin === null || g.converter_admin === false) ? converterEnableTooltip : converterDisableTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle={(g.converter_admin === null || g.converter_admin === false) ? 'default' : 'success'}
+              onClick={() => this.handleConverterAdmin(g.id, g.converter_admin, false)}
+            >
+              <i className="fa fa-hourglass-half" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={(g.is_templates_moderator === null || g.is_templates_moderator === false) ? templateModeratorEnableTooltip : templateModeratorDisableTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle={(g.is_templates_moderator === null || g.is_templates_moderator === false) ? 'default' : 'success'}
+              onClick={() => this.handleTemplatesModerator(g.id, g.is_templates_moderator, false)}
+            >
+              <i className="fa fa-book" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={(g.molecule_editor == null || g.molecule_editor === false) ? moleculeModeratorEnableTooltip : moleculeModeratorDisableTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle={(g.molecule_editor === null || g.molecule_editor === false) ? 'default' : 'success'}
+              onClick={() => this.handleMoleculesModerator(g.id, g.molecule_editor, false)}
+            >
+              <i className="icon-sample" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          <OverlayTrigger placement="bottom" overlay={g.account_active === false ? accountActiveTooltip : accountInActiveTooltip} >
+            <Button
+              bsSize="xsmall"
+              bsStyle={g.account_active === true ? 'default' : 'danger'}
+              onClick={() => this.handleActiveInActiveAccount(g.id, g.account_active)}
+            >
+              <i className={g.account_active === true ? 'fa fa-user-circle' : 'fa fa-user-times'} aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+          &nbsp;
+          { renderConfirmButton(g.type !== 'Device' && (g.confirmed_at == null || g.confirmed_at.length <= 0), g.id) }
+          { renderReConfirmButton(g.unconfirmed_email, g.id) }
+        </td>
+        <td width="12%"> {g.name} </td>
+        <td width="6%"> {g.initials} </td>
+        <td width="8%"> {g.email} </td>
+        <td width="7%"> {g.type} </td>
+        <td width="15%"> {g.current_sign_in_at} </td>
+        <td width="2%"> {g.id} </td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        <Panel>
+          <Button bsStyle="warning" bsSize="small" onClick={() => this.handleMsgShow()}>
+            Send Message&nbsp;<i className="fa fa-commenting-o" />
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" bsSize="small" onClick={() => this.handleNewUserShow()}>
+            New User&nbsp;<i className="fa fa-plus" />
+          </Button>
+        </Panel>
+        <Panel>
+          <Table>
+            <thead>
+              { tcolumn }
+            </thead>
+            <tbody>
+              { tbody }
+            </tbody>
+          </Table>
+        </Panel>
+        { this.renderMessageModal() }
+        { this.renderNewUserModal() }
+        { this.renderEditUserModal() }
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/admin/converter/ConverterAdmin.js b/app/packs/src/admin/converter/ConverterAdmin.js
new file mode 100644
index 000000000..85eb7d02e
--- /dev/null
+++ b/app/packs/src/admin/converter/ConverterAdmin.js
@@ -0,0 +1,407 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button } from 'react-bootstrap';
+import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-client';
+
+import ConverterApi from '../../components/fetchers/ConverterFetcher';
+import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
+
+class ConverterAdmin extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'list',
+      client: null,
+      selectedFile: null,
+      profiles: [],
+      options: [],
+      datasets: [],
+      profile: null,
+      error: false,
+      errorMessage: '',
+      isLoading: false,
+      createdModal: false,
+      deleteModal: false
+    };
+
+    this.showCreateView = this.showCreateView.bind(this);
+    this.showUpdateView = this.showUpdateView.bind(this);
+    this.showImportView = this.showImportView.bind(this);
+
+    this.showCreatedModal = this.showCreatedModal.bind(this);
+    this.hideCreatedModal = this.hideCreatedModal.bind(this);
+
+    this.showDeleteModal = this.showDeleteModal.bind(this);
+    this.hideDeleteModal = this.hideDeleteModal.bind(this);
+
+    this.updateProfile = this.updateProfile.bind(this);
+    this.storeProfile = this.storeProfile.bind(this);
+    this.deleteProfile = this.deleteProfile.bind(this);
+    this.downloadProfile = this.downloadProfile.bind(this);
+
+    this.updateFile = this.updateFile.bind(this);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.importFile = this.importFile.bind(this);
+
+    this.dispatchView = this.dispatchView.bind(this);
+  }
+
+  componentDidMount() {
+    Promise.all([
+      ConverterApi.fetchProfiles(),
+      GenericDSsFetcher.listDatasetKlass(),
+      ConverterApi.fetchOptions()
+    ]).then((responses) => {
+      const [profiles, klass, options] = responses;
+      const datasets = klass.klass.map((kl) => {
+        const pr = kl.properties_release;
+        pr.name = kl.label;
+        pr.ols = kl.ols_term_id;
+        return pr;
+      });
+
+      this.setState({
+        profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
+      });
+    });
+  }
+
+  showImportView() {
+    this.setState({
+      status: 'import',
+      profile: null
+    })
+  }
+
+  showCreateView() {
+    this.setState({
+      status: 'upload',
+      profile: null
+    })
+  }
+
+  showUpdateView(profile) {
+    this.setState({
+      status: 'update',
+      profile: Object.assign({}, profile),
+      error: false,
+      errorMessage: ''
+    })
+  }
+
+  showCreatedModal() {
+    this.setState({
+      createdModal: true
+    })
+  }
+
+  hideCreatedModal() {
+    this.setState({
+      createdModal: false
+    })
+  }
+
+  showDeleteModal(profile) {
+    this.setState({
+      deleteModal: true,
+      profile: Object.assign({}, profile),
+    })
+  }
+
+  hideDeleteModal() {
+    this.setState({
+      deleteModal: false,
+      profile: null
+    })
+  }
+
+  updateProfile(profile) {
+    this.setState({ profile })
+  }
+
+  storeProfile() {
+    const { status, profile } = this.state
+
+    // remove show flag
+    if (Array.isArray(profile.identifiers)) {
+      profile.identifiers.forEach(identifier => {
+        delete identifier.show
+      })
+    }
+
+    if (status == 'create') {
+      ConverterApi.createProfile(profile)
+        .then(response => {
+          const profiles = [...this.state.profiles]
+          profiles.push(response)
+          this.setState({
+            status: 'list',
+            profiles: profiles,
+            profile: null
+          }, this.showCreatedModal())
+        })
+    } else if (status == 'update') {
+      ConverterApi.updateProfile(profile)
+        .then((response) => {
+          const profiles = [...this.state.profiles]
+          const index = profiles.findIndex(p => (p.id == response.id))
+          profiles[index] = response
+          this.setState({
+            status: 'list',
+            profiles: profiles,
+            profile: null
+          })
+        })
+    }
+  }
+
+  deleteProfile() {
+    ConverterApi.deleteProfile(this.state.profile)
+      .then(() => {
+        const profiles = [...this.state.profiles]
+        const index = profiles.findIndex(p => (p.id == this.state.profile.id))
+        profiles.splice(index, 1)
+        this.setState({
+          status: 'list',
+          profiles: profiles,
+          profile: null
+        }, this.hideDeleteModal())
+      }
+    )
+  }
+
+  downloadProfile(profile) {
+    const a = document.createElement('a')
+    a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(profile, null, 2))
+    a.download = profile.id + '.json'
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  updateFile(event) {
+    this.setState({
+      selectedFile: event.target.files[0],
+      loaded: 0,
+      isLoading: false,
+      error: false,
+      errorMessage: ''
+    })
+  }
+
+  uploadFile() {
+    const { selectedFile } = this.state
+
+    this.setState({
+      isLoading: true
+    })
+
+    ConverterApi.fetchTables(selectedFile)
+      .then(data => {
+        if (data) {
+          const profile = {
+            title: '',
+            description: '',
+            tables: [],
+            identifiers: [],
+            data: data,
+          }
+
+          this.setState({
+            status: 'create',
+            profile: profile,
+            selectedFile: null,
+            isLoading: false,
+            error: false,
+            errorMessage: ''
+          })
+        }
+      })
+      .catch(error => {
+        if (error.status === 413) {
+          this.setState({
+            error: true,
+            errorMessage: 'The uploaded file is too large.',
+            isLoading: false
+          })
+        } else {
+          error.text().then(errorMessage => {
+            this.setState({
+              error: true,
+              errorMessage: JSON.parse(errorMessage).error,
+              isLoading: false
+            })
+          })
+        }
+      })
+  }
+
+  importFile() {
+    const { selectedFile } = this.state
+
+    this.setState({
+      isLoading: true
+    })
+
+    const createProfile = e => {
+      const fileProfile = JSON.parse(e.target.result)
+
+      ConverterApi.createProfile(fileProfile)
+        .then(profile => {
+          const profiles = [...this.state.profiles]
+          profiles.push(profile)
+          this.setState({
+            status: 'list',
+            profiles: profiles,
+            profile: null
+          }, this.showCreatedModal())
+        })
+        .catch(errors => {
+          this.setState({
+            error: true,
+            errorMessage: Object.values(errors).join(', '),
+            isLoading: false
+          })
+        })
+    }
+
+    const reader = new FileReader()
+    reader.readAsText(selectedFile)
+    reader.onload = createProfile.bind(this)
+  }
+
+  dispatchView() {
+    if (this.state.status === 'list') {
+      return (
+        <ProfileList
+          profiles={this.state.profiles}
+          isAdmin={this.state.client !== null}
+          updateProfile={this.showUpdateView}
+          deleteProfile={this.showDeleteModal}
+          downloadProfile={this.downloadProfile}
+        />
+      )
+    } else if (this.state.status == 'import') {
+      return (
+        <FileUploadForm
+          onFileChangeHandler={this.updateFile}
+          onSubmitFileHandler={this.importFile}
+          errorMessage={this.state.errorMessage}
+          error={this.state.error}
+          isLoading={this.state.isLoading}
+          disabled={this.state.selectedFile === null}
+        />
+      )
+    } else if (this.state.status == 'upload') {
+      return (
+        <FileUploadForm
+          onFileChangeHandler={this.updateFile}
+          onSubmitFileHandler={this.uploadFile}
+          errorMessage={this.state.errorMessage}
+          error={this.state.error}
+          isLoading={this.state.isLoading}
+          disabled={this.state.selectedFile === null}
+        />
+      );
+    } else {
+      return (
+        <ProfileForm
+          status={this.state.status}
+          profile={this.state.profile}
+          options={this.state.options}
+          datasets={this.state.datasets}
+          updateProfile={this.updateProfile}
+          storeProfile={this.storeProfile}
+        />
+      )
+    }
+  }
+
+  render() {
+    return (
+      <div className={['create', 'update'].includes(this.state.status) ? 'container-fluid' : 'container'}>
+        <header>
+          <nav aria-label="breadcrumb">
+            {this.state.status == 'list' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item active" aria-current="page">Chemotion file converter admin</li>
+              </ol>
+            }
+            {['upload', 'create'].includes(this.state.status) &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Create Profile'}</li>
+              </ol>
+            }
+            {this.state.status == 'update' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Edit Profile: ' + this.state.title}</li>
+              </ol>
+            }
+            {this.state.status == 'import' &&
+              <ol className="breadcrumb">
+                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
+                <li className="breadcrumb-item active" aria-current="page">{'Import Profile'}</li>
+              </ol>
+            }
+          </nav>
+
+          <div>
+            {this.state.status == "list" && this.state.client !== null &&
+              <div className="pull-right">
+                <button type="button" onClick={this.showImportView} className="btn btn-success mr-10">
+                  Import profile
+                </button>
+                <button type="button" onClick={this.showCreateView} className="btn btn-primary">
+                  Create new profile
+                </button>
+              </div>
+            }
+
+            <h2>
+              {this.state.status == 'list' && 'Profiles List' }
+              {['upload', 'create'].includes(this.state.status) && 'Create Profile'}
+              {this.state.status == 'update' && 'Edit Profile'}
+              {this.state.status == 'import' && 'Import Profile'}
+            </h2>
+          </div>
+        </header>
+
+        <main>
+          {this.dispatchView()}
+        </main>
+
+        <Modal show={this.state.createdModal}>
+          <Modal.Header>
+            <Modal.Title>Profile successfully created!</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Footer>
+            <Button bsStyle="primary" onClick={this.hideCreatedModal}>Great!</Button>
+          </Modal.Footer>
+        </Modal>
+
+        <Modal show={this.state.deleteModal}>
+          <Modal.Header>
+            <Modal.Title>Do you really want to delete this profile?</Modal.Title>
+          </Modal.Header>
+          <Modal.Footer>
+            <Button bsStyle="default" onClick={this.hideDeleteModal}>Cancel</Button>
+            <Button bsStyle="danger" onClick={this.deleteProfile}>Delete profile</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    )
+  }
+
+}
+
+export default ConverterAdmin;
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('ConverterAdmin');
+  if (domElement) ReactDOM.render(<ConverterAdmin />, domElement);
+});
diff --git a/app/packs/src/admin/generic/AttrCopyModal.js b/app/packs/src/admin/generic/AttrCopyModal.js
new file mode 100644
index 000000000..3c339300c
--- /dev/null
+++ b/app/packs/src/admin/generic/AttrCopyModal.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
+import { Content } from './AttrForm';
+
+export default class AttrCopyModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+
+  handleCopy() {
+    const { element, fnCopy, content } = this.props;
+    switch (content) {
+      case 'Segment': {
+        const copy = {
+          label: this.formRef.current.k_label.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim(),
+          element_klass: this.formRef.current.k_klass.value,
+          properties_template: element.properties_template
+        };
+        fnCopy(copy);
+        break;
+      }
+      case 'Element': {
+        const copy = {
+          name: this.formRef.current.k_name.value.trim(),
+          label: this.formRef.current.k_label.value.trim(),
+          klass_prefix: this.formRef.current.k_prefix.value.trim(),
+          icon_name: this.formRef.current.k_iconname.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim(),
+          properties_template: element.properties_template
+        };
+        fnCopy(copy);
+        break;
+      }
+      default:
+        console.log(`Warning: ${content} is not supported.`);
+    }
+  }
+
+  render() {
+    const {
+      content, element, showModal, fnClose
+    } = this.props;
+
+    const copy = {
+      label: element.label,
+      klass_prefix: element.klass_prefix,
+      icon_name: element.icon_name,
+      desc: element.desc,
+      properties_template: element.properties_template
+    };
+
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton>
+          <Modal.Title>Copy {content} attributes</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Content ref={this.formRef} content={content} element={copy} editable />
+            <Form horizontal>
+              <FormGroup>
+                &nbsp;
+                <Button bsStyle="primary" onClick={() => this.handleCopy()}>Copy&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
+                &nbsp;
+                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+AttrCopyModal.propTypes = {
+  content: PropTypes.string.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  element: PropTypes.object.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnCopy: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/AttrEditModal.js b/app/packs/src/admin/generic/AttrEditModal.js
new file mode 100644
index 000000000..d1ce06208
--- /dev/null
+++ b/app/packs/src/admin/generic/AttrEditModal.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormGroup, Modal, Button, OverlayTrigger } from 'react-bootstrap';
+import { Content, TipActive, TipInActive, TipDelete } from './AttrForm';
+
+export default class AttrEditModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+
+  handleUpdate() {
+    const { element, fnUpdate, content } = this.props;
+    switch (content) {
+      case 'Segment': {
+        const updates = {
+          label: this.formRef.current.k_label.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim()
+        };
+        fnUpdate(element, updates);
+        break;
+      }
+      case 'Element': {
+        const updates = {
+          label: this.formRef.current.k_label.value.trim(),
+          klass_prefix: this.formRef.current.k_prefix.value.trim(),
+          icon_name: this.formRef.current.k_iconname.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim()
+        };
+        fnUpdate(element, updates);
+        break;
+      }
+      default:
+        console.log(`Warning: ${content} is not supported.`);
+    }
+  }
+
+  render() {
+    const {
+      content, element, showModal, fnClose, fnDelete, fnActivate
+    } = this.props;
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton>
+          <Modal.Title>Edit {content} attributes</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Content ref={this.formRef} content={content} element={element} editable={false} />
+            <Form horizontal>
+              <FormGroup>
+                <OverlayTrigger placement="bottom" overlay={TipDelete(content)} >
+                  <Button bsStyle="danger" onClick={() => fnDelete(element)}>Delete&nbsp;<i className="fa fa-trash" aria-hidden="true" /></Button>
+                </OverlayTrigger>
+                &nbsp;
+                <OverlayTrigger placement="bottom" overlay={element.is_active === false ? TipActive(content) : TipInActive(content)} >
+                  <Button
+                    bsStyle={element.is_active === false ? 'success' : 'warning'}
+                    onClick={() => fnActivate(element.id, element.is_active)}
+                  >
+                    {element.is_active === false ? 'Active' : 'Deactive'}&nbsp;
+                    <i className={element.is_active === false ? 'fa fa-check' : 'fa fa-ban'} aria-hidden="true" />
+                  </Button>
+                </OverlayTrigger>
+                &nbsp;
+                <Button bsStyle="primary" onClick={() => this.handleUpdate()}>Update&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
+                &nbsp;
+                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+AttrEditModal.propTypes = {
+  content: PropTypes.string.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  element: PropTypes.object.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnDelete: PropTypes.func.isRequired,
+  fnActivate: PropTypes.func.isRequired,
+  fnUpdate: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/AttrForm.js b/app/packs/src/admin/generic/AttrForm.js
new file mode 100644
index 000000000..8f674908b
--- /dev/null
+++ b/app/packs/src/admin/generic/AttrForm.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Tooltip } from 'react-bootstrap';
+import KlassAttrForm from './KlassAttrForm';
+import SegmentAttrForm from './SegmentAttrForm';
+
+const TipActive = type => <Tooltip id="active_button">This {type} is deactivated, press button to [activate]</Tooltip>;
+const TipInActive = type => <Tooltip id="disable_button">This {type} is activated, press button to [deactivate]</Tooltip>;
+const TipDelete = type => <Tooltip id="delete_button">Delete this {type}, after deletion, all elements are unaccessible</Tooltip>;
+
+const Content = React.forwardRef((props, ref) => {
+  switch (props.content) {
+    case 'Segment':
+      return <SegmentAttrForm ref={ref} element={props.element} editable={props.editable} />;
+    case 'Element':
+      return <KlassAttrForm ref={ref} element={props.element} editable={props.editable} />;
+    default:
+      return <div>No content</div>;
+  }
+});
+
+export { Content, TipActive, TipInActive, TipDelete };
diff --git a/app/packs/src/admin/generic/AttrNewModal.js b/app/packs/src/admin/generic/AttrNewModal.js
new file mode 100644
index 000000000..c41777811
--- /dev/null
+++ b/app/packs/src/admin/generic/AttrNewModal.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
+import { Content } from './AttrForm';
+
+export default class AttrNewModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+
+  handleCreate() {
+    const { fnCreate, content } = this.props;
+    switch (content) {
+      case 'Segment': {
+        const element = {
+          label: this.formRef.current.k_label.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim(),
+          element_klass: this.formRef.current.k_klass.value
+        };
+        fnCreate(element);
+        break;
+      }
+      case 'Element': {
+        const element = {
+          name: this.formRef.current.k_name.value.trim(),
+          label: this.formRef.current.k_label.value.trim(),
+          klass_prefix: this.formRef.current.k_prefix.value.trim(),
+          icon_name: this.formRef.current.k_iconname.value.trim(),
+          desc: this.formRef.current.k_desc.value.trim()
+        };
+        fnCreate(element);
+        break;
+      }
+      default:
+        console.log(`Warning: ${content} is not supported.`);
+    }
+  }
+
+  render() {
+    const { content, showModal, fnClose } = this.props;
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton><Modal.Title>{`New ${content}`}</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Content ref={this.formRef} content={content} element={{}} editable />
+            <Form horizontal>
+              <FormGroup>
+                <Button bsStyle="primary" onClick={() => this.handleCreate()}>Create&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
+                &nbsp;
+                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+AttrNewModal.propTypes = {
+  content: PropTypes.string.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnCreate: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/FieldCondEditModal.js b/app/packs/src/admin/generic/FieldCondEditModal.js
new file mode 100644
index 000000000..9ff3314da
--- /dev/null
+++ b/app/packs/src/admin/generic/FieldCondEditModal.js
@@ -0,0 +1,226 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+import { Modal, Button } from 'react-bootstrap';
+import GenericSubField from '../../components/models/GenericSubField';
+import LayerSelect from '../../components/generic/LayerSelect';
+import FieldSelect from '../../components/generic/FieldSelect';
+
+const AddRowBtn = ({ addRow }) => (
+  <Button active onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+);
+
+AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
+
+const DelRowBtn = ({ delRow, node }) => {
+  const { data } = node;
+  const btnClick = () => {
+    delRow(data);
+  };
+  return (<Button active onClick={btnClick} bsSize="xsmall" bsStyle="danger"><i className="fa fa-trash" aria-hidden="true" /></Button>);
+};
+
+DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+export default class FieldCondEditModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.selLayer = this.selLayer.bind(this);
+    this.selField = this.selField.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+  }
+
+  onGridReady(e) {
+    this.gridApi = e.api;
+    this.gridColumnApi = e.columnApi;
+
+    const columnDefs = [
+      {
+        rowDrag: true,
+        resizable: true,
+        headerName: 'Id',
+        field: 'id',
+        editable: false,
+        minWidth: 10,
+        width: 10,
+      },
+      {
+        headerName: 'Layer',
+        field: 'layer',
+        editable: false,
+        minWidth: 120,
+        width: 120,
+        cellRendererFramework: LayerSelect,
+        cellRendererParams: { allLayers: this.props.allLayers, selLayer: this.selLayer },
+      },
+      {
+        headerName: 'Field',
+        field: 'field',
+        editable: false,
+        minWidth: 120,
+        width: 120,
+        cellRendererFramework: FieldSelect,
+        cellRendererParams: { allLayers: this.props.allLayers, selField: this.selField, types: ['text', 'select', 'checkbox'] },
+      },
+      {
+        headerName: 'Value',
+        field: 'value',
+        editable: true,
+        minWidth: 120,
+        width: 120,
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: '',
+        colId: 'actions',
+        headerComponentFramework: AddRowBtn,
+        headerComponentParams: { addRow: this.addRow },
+        cellRendererFramework: DelRowBtn,
+        cellRendererParams: { delRow: this.delRow },
+        editable: false,
+        filter: false,
+        minWidth: 35,
+        width: 35,
+      },
+    ];
+
+    this.gridApi.setColumnDefs(columnDefs);
+    this.autoSizeAll();
+  }
+
+  delRow() {
+    const selectedData = this.gridApi.getSelectedRows();
+    this.gridApi.applyTransaction({ remove: selectedData });
+    this.refresh();
+  }
+
+  addRow() {
+    const { allLayers } = this.props;
+    const lys = allLayers.filter(e => (e.fields || []).filter(f => ['text', 'select', 'checkbox'].includes(f.type)).length > 0);
+    const ly = (lys.length > 0 && lys[0].key) || '';
+    const fd = ly === '' ? '' : ((allLayers.find(e => e.key === ly) || {}).fields || []).filter(e => ['text', 'select', 'checkbox'].includes(e.type))[0].field;
+    const newSub = new GenericSubField({ layer: ly, field: fd, value: '' });
+    const idx = this.gridApi.getDisplayedRowCount();
+    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
+    this.refresh();
+  }
+
+  autoSizeAll() {
+    if (!this.gridApi) return;
+    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
+  }
+
+  selLayer(e, node) {
+    const { data } = node;
+    if (e.target.value === data.layer) { return; }
+    data.layer = e.target.value;
+    const { allLayers } = this.props;
+    const ly = data.layer;
+    const fdf = ((allLayers.find(l => l.key === ly) || {}).fields || []).filter(l => ['text', 'select', 'checkbox'].includes(l.type)) || [];
+    const fd = (fdf.length > 0 && fdf[0].field) || '';
+    data.field = fd;
+    const { updSub, updLayer, layer, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    this.gridApi.setRowData(rows);
+    if (field == null) {
+      layer.cond_fields = rows;
+      updLayer(layerKey, layer, () => {});
+    } else {
+      field.cond_fields = rows;
+      updSub(layerKey, field, () => {});
+    }
+  }
+
+  selField(e, node) {
+    const { data } = node;
+    if (e.target.value === data.field) { return; }
+    data.field = e.target.value;
+    this.refresh();
+  }
+
+  refresh() {
+    const { updSub, updLayer, layer, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+
+    if (field == null) {
+      layer.cond_fields = rows;
+      updLayer(layerKey, layer, () => {});
+    } else {
+      field.cond_fields = rows;
+      updSub(layerKey, field, () => {});
+    }
+  }
+
+  onCellValueChanged(params) {
+    const { oldValue, newValue } = params;
+    if (oldValue === newValue) return;
+    this.refresh();
+  }
+
+  render() {
+    const {
+      element, showModal, fnClose, layer, layerKey, field, allLayers
+    } = this.props;
+
+    const sub = (field == null ? layer.cond_fields : field.cond_fields) || [];
+    const title = field == null ? `Layer Restriction Setting [ ${layer.label}]` : `Field Restriction Setting [ layer: ${layer.label} ] [ field: ${field.label} ]`;
+    const lafi = field == null ? `layer:${layer.label}` : `field:${field.label}(in layer:${layer.label})`;
+
+    if (showModal) {
+      return (
+        <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+          <Modal.Header closeButton>
+            <Modal.Title>{title}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div style={{ fontSize: '10px' }}>
+              <b>Field Restriction: </b>
+              when a restriction has been set, the {lafi} is hidden, it shows only when the [Layer,Field,Value] got matched;
+              if there are more than one setting, the {lafi} shows when one of them got matched.
+            </div>
+            <div style={{ fontSize: '10px' }}>
+              <b>available field type: </b>
+              checkbox (true/false), select, text
+            </div>
+            <div style={{ width: '100%', height: '26vh' }}>
+              <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
+                <AgGridReact
+                  defaultColDef={{ suppressMovable: true, resizable: true }}
+                  rowSelection="single"
+                  onGridReady={this.onGridReady}
+                  rowData={sub}
+                  singleClickEdit
+                  stopEditingWhenGridLosesFocus
+                  rowDragManaged
+                  onRowDragEnd={this.refresh}
+                />
+              </div>
+            </div>
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return <div />;
+  }
+}
+
+FieldCondEditModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  layer: PropTypes.object.isRequired,
+  allLayers: PropTypes.arrayOf(PropTypes.object),
+  layerKey: PropTypes.string.isRequired,
+  updSub: PropTypes.func.isRequired,
+  updLayer: PropTypes.func.isRequired,
+  field: PropTypes.object,
+  element: PropTypes.object.isRequired,
+  fnClose: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/KlassAttrForm.js b/app/packs/src/admin/generic/KlassAttrForm.js
new file mode 100644
index 000000000..8818651f9
--- /dev/null
+++ b/app/packs/src/admin/generic/KlassAttrForm.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormGroup, InputGroup, Button } from 'react-bootstrap';
+
+export default class KlassAttrForm extends Component {
+  render() {
+    const { element, editable } = this.props;
+    return (
+      <Form horizontal className="input-form">
+        <FormGroup controlId="formControlKlass">
+          <InputGroup>
+            <InputGroup.Addon>Element</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.name} inputRef={(ref) => { this.k_name = ref; }} readOnly={!editable} />
+          </InputGroup>
+          <div className="help">
+            Element must be at least 3 characters long and can not be longer than 5 characters<br />
+            Element is only lowercase letters allowed<br />
+            Element should not contain special characters like $, !, %, etc.
+          </div>
+        </FormGroup>
+        <FormGroup controlId="formControlPrefix">
+          <InputGroup>
+            <InputGroup.Addon>Prefix</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.klass_prefix} inputRef={(ref) => { this.k_prefix = ref; }} />
+          </InputGroup>
+          <div className="help">
+            Prefix is used to define the prefix of Element label<br />
+            Prefix should not contain special characters like $, !, %, etc.
+          </div>
+        </FormGroup>
+        <FormGroup controlId="formControlLabel">
+          <InputGroup>
+            <InputGroup.Addon>Element Label</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.label} inputRef={(ref) => { this.k_label = ref; }} />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlIcon">
+          <InputGroup>
+            <InputGroup.Addon>Icon</InputGroup.Addon>
+            {
+              element.icon_name ?
+                <InputGroup.Addon><i className={element.icon_name} /></InputGroup.Addon> : null
+            }
+            <FormControl type="text" defaultValue={element.icon_name} inputRef={(ref) => { this.k_iconname = ref; }} />
+          </InputGroup>
+          <div className="help">
+            Icon is used to represent a particular element<br />
+            Please use the icon code from<Button bsStyle="link" bsSize="xsmall" href="https://fontawesome.com/v4.7/icons/" target="_blank">Font Awesome 4</Button>
+          </div>
+        </FormGroup>
+        <FormGroup controlId="formControlDescription">
+          <InputGroup>
+            <InputGroup.Addon>Description</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.desc} inputRef={(ref) => { this.k_desc = ref; }} />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+KlassAttrForm.propTypes = {
+  element: PropTypes.object.isRequired,
+  editable: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/admin/generic/LayerAttrEditModal.js b/app/packs/src/admin/generic/LayerAttrEditModal.js
new file mode 100644
index 000000000..72be8a704
--- /dev/null
+++ b/app/packs/src/admin/generic/LayerAttrEditModal.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Modal, Button } from 'react-bootstrap';
+import LayerAttrForm from './LayerAttrForm';
+
+export default class LayerAttrEditModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+
+  handleUpdate() {
+    const { layer, fnUpdate } = this.props;
+    const updates = {
+      label: this.formRef.current.lf_label.value.trim(),
+      color: this.formRef.current.lf_color.value.trim(),
+      style: this.formRef.current.lf_style.value.trim(),
+      cols: parseInt(this.formRef.current.lf_cols.value.trim() || 1, 10),
+      position: parseInt(this.formRef.current.lf_position.value.trim() || 100, 10)
+    };
+    fnUpdate(layer.key, updates);
+  }
+
+  render() {
+    const { showModal, fnClose, layer } = this.props;
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton><Modal.Title>Edit Layer attributes</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <LayerAttrForm ref={this.formRef} layer={layer} />
+            <FormGroup>
+              <Button bsStyle="primary" onClick={() => this.handleUpdate()}>Update layer to template workspace&nbsp;<i className="fa fa-archive" aria-hidden="true" /></Button>
+              &nbsp;
+              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+            </FormGroup>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+LayerAttrEditModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnUpdate: PropTypes.func.isRequired,
+  layer: PropTypes.object.isRequired,
+};
diff --git a/app/packs/src/admin/generic/LayerAttrForm.js b/app/packs/src/admin/generic/LayerAttrForm.js
new file mode 100644
index 000000000..a207900f3
--- /dev/null
+++ b/app/packs/src/admin/generic/LayerAttrForm.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
+
+export default class LayerAttrForm extends Component {
+  render() {
+    const { layer } = this.props;
+    return (
+      <Form horizontal className="input-form">
+        <FormGroup controlId="formControlLayerKey">
+          <InputGroup>
+            <InputGroup.Addon>Name</InputGroup.Addon>
+            <FormControl type="text" defaultValue={layer.key} inputRef={(ref) => { this.lf_layerKey = ref; }} readOnly={!!layer.key} />
+          </InputGroup>
+          <div className="help">
+            Layer name is unique in the template<br />
+            Layer name must contain only lowercase letters and underscores<br />
+            Layer name should not contain special characters like $, !, %, etc.
+          </div>
+        </FormGroup>
+        <FormGroup controlId="formControlLayerLabel">
+          <InputGroup>
+            <InputGroup.Addon>Display name</InputGroup.Addon>
+            <FormControl type="text" defaultValue={layer.label} inputRef={(ref) => { this.lf_label = ref; }} />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlLayerCols">
+          <InputGroup>
+            <InputGroup.Addon>Columns per row</InputGroup.Addon>
+            <FormControl componentClass="select" defaultValue={layer.cols || 1} inputRef={(ref) => { this.lf_cols = ref; }} >
+              <option value={1}>1</option>
+              <option value={2}>2</option>
+              <option value={3}>3</option>
+              <option value={4}>4</option>
+              <option value={5}>5</option>
+              <option value={6}>6</option>
+            </FormControl>
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlLayerPosition">
+          <InputGroup>
+            <InputGroup.Addon>Sequential position</InputGroup.Addon>
+            <FormControl type="number" defaultValue={layer.position} inputRef={(ref) => { this.lf_position = ref; }} min={1} />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlLayerColor">
+          <InputGroup>
+            <InputGroup.Addon>Header color</InputGroup.Addon>
+            <FormControl componentClass="select" defaultValue={layer.color} inputRef={(ref) => { this.lf_color = ref; }} >
+              <option value="none">none</option>
+              <option value="default">Grey</option>
+              <option value="success">Green</option>
+              <option value="warning">Yellow</option>
+              <option value="primary">Blue</option>
+              <option value="info">Light Blue</option>
+              <option value="danger">Red</option>
+            </FormControl>
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formCtlHeaderStyle">
+          <InputGroup>
+            <InputGroup.Addon>Style Option</InputGroup.Addon>
+            <FormControl componentClass="select" defaultValue={layer.style} inputRef={(ref) => { this.lf_style = ref; }} >
+              <option value="panel_generic_heading">bold</option>
+              <option value="panel_generic_heading_bu">bold/underline</option>
+              <option value="panel_generic_heading_bui">bold/underline/italic</option>
+            </FormControl>
+          </InputGroup>
+        </FormGroup>
+
+      </Form>
+    );
+  }
+}
+
+LayerAttrForm.propTypes = {
+  layer: PropTypes.object.isRequired,
+};
diff --git a/app/packs/src/admin/generic/LayerAttrNewModal.js b/app/packs/src/admin/generic/LayerAttrNewModal.js
new file mode 100644
index 000000000..aeb43b9d2
--- /dev/null
+++ b/app/packs/src/admin/generic/LayerAttrNewModal.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Modal, Button } from 'react-bootstrap';
+import LayerAttrForm from './LayerAttrForm';
+
+export default class LayerAttrNewModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+
+  handleCreate() {
+    const { fnCreate } = this.props;
+    const layer = {
+      key: this.formRef.current.lf_layerKey.value.trim(),
+      label: this.formRef.current.lf_label.value.trim(),
+      cols: parseInt(this.formRef.current.lf_cols.value.trim() || 1, 10),
+      position: parseInt(this.formRef.current.lf_position.value.trim() || 100, 10)
+    };
+    fnCreate(layer);
+  }
+
+  render() {
+    const { showModal, fnClose } = this.props;
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton><Modal.Title>New Layer</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <LayerAttrForm ref={this.formRef} layer={{}} isKlassReadonly={false} />
+            <FormGroup>
+              <Button bsStyle="primary" onClick={() => this.handleCreate()}>Add new layer to template workspace&nbsp;<i className="fa fa-hdd-o" aria-hidden="true" /></Button>
+              &nbsp;
+              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+            </FormGroup>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+LayerAttrNewModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnCreate: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/Preview.js b/app/packs/src/admin/generic/Preview.js
new file mode 100644
index 000000000..4e0914229
--- /dev/null
+++ b/app/packs/src/admin/generic/Preview.js
@@ -0,0 +1,209 @@
+/* eslint-disable camelcase */
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Badge, Col } from 'react-bootstrap';
+import { cloneDeep } from 'lodash';
+import { GenProperties, LayersLayout } from '../../components/generic/GenericElCommon';
+import LoadingActions from '../../components/actions/LoadingActions';
+import { ButtonTooltip, ButtonConfirm, unitConversion, inputEventVal, genUnits } from './Utils';
+import Utils from '../../components/utils/Functions';
+
+export default class Preview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { revisions: [], compareUUID: 'current', fullScreen: false };
+    this.compare = this.compare.bind(this);
+    this.setRevision = this.setRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSubChange = this.handleSubChange.bind(this);
+    this.handleUnitClick = this.handleUnitClick.bind(this);
+    this.dlRevision = this.dlRevision.bind(this);
+    this.setScreen = this.setScreen.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.revisions) {
+      this.setRevision(cloneDeep(this.props.revisions));
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.revisions !== prevProps.revisions) {
+      this.setRevision(cloneDeep(this.props.revisions));
+    }
+  }
+
+  setRevision(revisions) {
+    this.setState({ revisions });
+  }
+
+  setScreen(fullScreen) {
+    this.setState({ fullScreen });
+  }
+
+  compare(params) {
+    LoadingActions.start();
+    this.setState(
+      { revisions: cloneDeep(this.props.revisions), compareUUID: params.uuid },
+      LoadingActions.stop()
+    );
+  }
+
+  delRevision(params) {
+    this.props.fnDelete(params);
+  }
+
+  retriveRevision(params) {
+    const { fnRetrive, src } = this.props;
+    LoadingActions.start();
+    const deep = cloneDeep(this.props.revisions.find(r => r.id === params.id));
+    fnRetrive(deep[src], LoadingActions.stop());
+  }
+
+
+  dlRevision(params) {
+    const { element, revisions } = this.props;
+    LoadingActions.start();
+    const revision = revisions.find(r => r.id === params.id);
+    const props = revision.properties_release;
+    props.klass = revision.properties_release.klass;
+    props.released_at = revision.released_at || '';
+    const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(revision.properties_release))}`;
+    Utils.downloadFile({ contents: href, name: `${props.klass}_${element.label}_${revision.uuid}.json` });
+    LoadingActions.stop();
+  }
+
+  handleInputChange(event, field, layer, type = 'text') {
+    const { compareUUID, revisions } = this.state;
+    const { src } = this.props;
+    const selected = (revisions || []).find(r => r.uuid === compareUUID);
+    if (selected && selected[src]) {
+      const properties_release = selected[src];
+      const value = inputEventVal(event, type);
+      if (!((field === 'name' && layer === ''))) {
+        properties_release.layers[`${layer}`].fields.find(e => e.field === field).value = value;
+        if (type === 'system-defined' && (!properties_release.layers[`${layer}`].fields.find(e => e.field === field).value_system || properties_release.layers[`${layer}`].fields.find(e => e.field === field).value_system === '')) {
+          const opt = properties_release.layers[`${layer}`].fields
+            .find(e => e.field === field).option_layers;
+          properties_release.layers[`${layer}`].fields
+            .find(e => e.field === field).value_system = genUnits(opt)[0].key;
+        }
+        this.setRevision(revisions);
+      }
+    }
+  }
+
+  handleSubChange(layer, obj, valueOnly = false) {
+    const { compareUUID, revisions } = this.state;
+    const { src } = this.props;
+    const selected = (revisions || []).find(r => r.uuid === compareUUID);
+    if (selected && selected[src]) {
+      const properties_release = selected[src];
+      if (!valueOnly) {
+        const subFields = properties_release.layers[`${layer}`].fields
+          .find(m => m.field === obj.f.field).sub_fields || [];
+        const idxSub = subFields.findIndex(m => m.id === obj.sub.id);
+        subFields.splice(idxSub, 1, obj.sub);
+        properties_release.layers[`${layer}`].fields
+          .find(e => e.field === obj.f.field).sub_fields = subFields;
+      }
+      properties_release.layers[`${layer}`].fields
+        .find(e => e.field === obj.f.field).sub_values = obj.f.sub_values || [];
+      this.setRevision(revisions);
+    }
+  }
+
+  handleUnitClick(layer, obj) {
+    const { compareUUID, revisions } = this.state;
+    const { src } = this.props;
+    const selected = (revisions || []).find(r => r.uuid === compareUUID);
+    const newVal = unitConversion(obj.option_layers, obj.value_system, obj.value);
+    if (selected && selected[src]) {
+      selected[src].layers[`${layer}`].fields
+        .find(e => e.field === obj.field).value_system = obj.value_system;
+      selected[src].layers[`${layer}`].fields
+        .find(e => e.field === obj.field).value = newVal;
+      this.setRevision(revisions);
+    }
+  }
+
+  render() {
+    const { compareUUID, revisions, fullScreen } = this.state;
+    const { src, canDL } = this.props;
+    const t = (v, idx) => {
+      const s = v.uuid === compareUUID ? 'generic_block_select' : '';
+      const ver = v.released_at ? `version: ${v.uuid}` : 'version:';
+      let at = v.released_at ? `released at: ${v.released_at} (UTC)` : '(Work In Progress)';
+      if (src === 'properties') {
+        at = `saved at: ${v.released_at} (UTC)`;
+      }
+
+      const del = v.released_at ? <ButtonConfirm msg="Delete this version permanently?" fnClick={this.delRevision} fnParams={{ id: v.id }} bs="default" place="top" /> : null;
+      const ret = v.released_at ? <ButtonConfirm msg="Retrieve this version?" fnClick={this.retriveRevision} fnParams={{ id: v.id }} fa="fa-reply" bs="default" place="top" /> : null;
+      const dl = canDL ? <ButtonTooltip tip="Download this version" fnClick={this.dlRevision} element={{ id: v.id }} fa="fa-download" place="top" bs="default" /> : null;
+      return (
+        <div className={`generic_version_block ${s}`} key={v.uuid}>
+          <div><div style={{ width: '100%' }}>{ver}</div><div style={{ fontSize: '0.8rem' }}>#{(idx + 1)}</div></div>
+          <div>
+            <div style={{ width: '100%' }}>{at}</div>
+            {del}
+            {dl}
+            {ret}
+            <ButtonTooltip tip="Preview this version" fnClick={this.compare} element={{ uuid: v.uuid }} fa="fa-clock-o" place="top" bs="default" />
+          </div>
+        </div>
+      );
+    };
+
+    const options = [];
+    const selected = (revisions || []).find(r => r.uuid === compareUUID) || {};
+    const selectOptions = (selected && selected[src] &&
+      selected[src].select_options) || {};
+
+    if (selected.name) {
+      const defaultName = <GenProperties label="" description={selected.description || ''} value={selected.name || ''} type="text" isEditable isRequired onChange={() => {}} />;
+      options.push(defaultName);
+    }
+
+    const layersLayout = LayersLayout(
+      (selected[src] || {}).layers || {},
+      selectOptions || {},
+      this.handleInputChange,
+      this.handleSubChange,
+      this.handleUnitClick,
+      options,
+      selected.uuid || 0
+    );
+
+    const his = fullScreen ? null : (<Col md={4}>{revisions.map((r, idx) => (t(r, idx)))}</Col>);
+    const contentCol = fullScreen ? 12 : 8;
+    const screenFa = fullScreen ? 'compress' : 'expand';
+    return (
+      <div>
+        {his}
+        <Col md={contentCol}>
+          <div style={{ margin: '10px 0px' }}>
+            <div style={{ float: 'right' }}><ButtonTooltip tip={screenFa} fnClick={this.setScreen} element={!this.state.fullScreen} fa={`fa-${screenFa}`} place="left" bs="default" /></div>
+            <Badge style={{ backgroundColor: '#ffc107', color: 'black' }}><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Sketch Map, the data input here will not be saved.</Badge>
+          </div>
+          <div style={{ width: '100%', minHeight: '50vh' }}>{layersLayout}</div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+Preview.propTypes = {
+  revisions: PropTypes.array,
+  fnRetrive: PropTypes.func,
+  fnDelete: PropTypes.func,
+  canDL: PropTypes.bool,
+  src: PropTypes.oneOf(['properties_release', 'properties'])
+};
+
+Preview.defaultProps = {
+  revisions: [], fnRetrive: () => {}, fnDelete: () => {}, src: 'properties_release', canDL: false
+};
diff --git a/app/packs/src/admin/generic/SegmentAttrForm.js b/app/packs/src/admin/generic/SegmentAttrForm.js
new file mode 100644
index 000000000..64a2186b8
--- /dev/null
+++ b/app/packs/src/admin/generic/SegmentAttrForm.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
+import uuid from 'uuid';
+import AdminFetcher from '../../components/fetchers/AdminFetcher';
+
+export default class SegmentAttrForm extends Component {
+  constructor() {
+    super();
+    this.state = { klassOptions: null };
+  }
+
+  componentDidMount() {
+    AdminFetcher.fetchElementKlasses()
+      .then((result) => {
+        const klassOptions = result.klass.sort((a, b) => a.place - b.place)
+          .map(k => (<option key={uuid.v4()} value={k.id}>{k.label}</option>));
+        this.setState({ klassOptions });
+      });
+  }
+
+  render() {
+    const { element, editable } = this.props;
+    const { klassOptions } = this.state;
+    return (
+      <Form horizontal className="input-form">
+        <FormGroup controlId="formControlLabel">
+          <InputGroup>
+            <InputGroup.Addon>Segment Label</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.label} inputRef={(ref) => { this.k_label = ref; }} />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlDescription">
+          <InputGroup>
+            <InputGroup.Addon>Description</InputGroup.Addon>
+            <FormControl type="text" defaultValue={element.desc} inputRef={(ref) => { this.k_desc = ref; }} />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup controlId="formControlAssignKlass">
+          <InputGroup>
+            <InputGroup.Addon>Assign to Element</InputGroup.Addon>
+            <FormControl componentClass="select" value={element.element_klass && element.element_klass.id} inputRef={(ref) => { this.k_klass = ref; }} disabled={!editable} readOnly={!editable}>
+              {klassOptions}
+            </FormControl>
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+SegmentAttrForm.propTypes = {
+  element: PropTypes.object.isRequired,
+  editable: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/admin/generic/SelectAttrNewModal.js b/app/packs/src/admin/generic/SelectAttrNewModal.js
new file mode 100644
index 000000000..0bbe105bf
--- /dev/null
+++ b/app/packs/src/admin/generic/SelectAttrNewModal.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormGroup, InputGroup, Modal, Button } from 'react-bootstrap';
+
+export default class SelectAttrNewModal extends Component {
+  handleCreate() {
+    this.props.fnCreate(this.s_selectKey.value.trim());
+  }
+
+  render() {
+    const { showModal, fnClose } = this.props;
+    return (
+      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton><Modal.Title>New Select List</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Form horizontal className="input-form">
+              <FormGroup controlId="formControlSelectKey">
+                <InputGroup>
+                  <InputGroup.Addon>Name</InputGroup.Addon>
+                  <FormControl type="text" inputRef={(ref) => { this.s_selectKey = ref; }} />
+                </InputGroup>
+                <div className="help">
+                  Seletc List name is unique in the template<br />
+                  Seletc List name must contain only lowercase letters and underscores<br />
+                  Seletc List name should not contain special characters like $, !, %, etc.
+                </div>
+              </FormGroup>
+            </Form>
+            <FormGroup>
+              <Button bsStyle="primary" onClick={() => this.handleCreate()}>Add new select list to template workspace&nbsp;<i className="fa fa-hdd-o" aria-hidden="true" /></Button>
+              &nbsp;
+              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
+            </FormGroup>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+SelectAttrNewModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnCreate: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/TemplateJsonModal.js b/app/packs/src/admin/generic/TemplateJsonModal.js
new file mode 100644
index 000000000..2f55260cf
--- /dev/null
+++ b/app/packs/src/admin/generic/TemplateJsonModal.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import JSONInput from 'react-json-editor-ajrm';
+import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import Utils from '../../components/utils/Functions';
+
+export default class TemplateJsonModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      propertiesTemplate: props.element.properties_template,
+      isValidJson: false
+    };
+    this.onChangeJson = this.onChangeJson.bind(this);
+    this.resetJson = this.resetJson.bind(this);
+    this.handleUpdateJson = this.handleUpdateJson.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.updateState = this.updateState.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.element.properties_template !== prevProps.element.properties_template) {
+      this.updateState(this.props.element.properties_template, false);
+    }
+  }
+
+  onChangeJson(e) {
+    let { propertiesTemplate } = this.state;
+    if (e.error === false) {
+      propertiesTemplate = e.jsObject;
+      this.updateState(propertiesTemplate, false);
+    } else {
+      this.setState({ isValidJson: true });
+    }
+  }
+
+  updateState(template, isValid) {
+    this.setState({ propertiesTemplate: template, isValidJson: isValid });
+  }
+
+  resetJson() {
+    this.updateState(this.props.element.properties_template, false);
+  }
+
+  handleUpdateJson() {
+    const { propertiesTemplate } = this.state;
+    this.props.fnUpdate(propertiesTemplate);
+  }
+
+  handleClose() {
+    this.updateState(this.props.element.properties_template, false);
+    this.props.fnClose();
+  }
+
+  render() {
+    const { showModal } = this.props;
+    const { propertiesTemplate, isValidJson } = this.state;
+    return (
+      <Modal backdrop="static" dialogClassName="importChemDrawModal" show={showModal} onHide={() => this.handleClose()}>
+        <Modal.Header closeButton><Modal.Title>Template in YAML format</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Form horizontal>
+              <FormGroup>
+                <JSONInput
+                  placeholder={propertiesTemplate}
+                  width="100%"
+                  height="750px"
+                  onChange={e => this.onChangeJson(e)}
+                />
+              </FormGroup>
+              <FormGroup>
+                <Button bsStyle="default" onClick={() => this.handleClose()}>Close&nbsp;<i className="fa fa-times" aria-hidden="true" /></Button>&nbsp;
+                <Button bsStyle="info" onClick={() => this.resetJson()}>Reset&nbsp;<i className="fa fa-repeat" aria-hidden="true" /></Button>&nbsp;
+                <Button bsStyle="warning" disabled={isValidJson} onClick={() => this.handleUpdateJson()}>Save&nbsp;<i className="fa fa-floppy-o" aria-hidden="true" /></Button>&nbsp;
+              </FormGroup>
+            </Form>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+TemplateJsonModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnUpdate: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  element: PropTypes.object.isRequired,
+};
diff --git a/app/packs/src/admin/generic/UploadModal.js b/app/packs/src/admin/generic/UploadModal.js
new file mode 100644
index 000000000..4d013ae82
--- /dev/null
+++ b/app/packs/src/admin/generic/UploadModal.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+import { Modal } from 'react-bootstrap';
+
+export default class UploadModal extends Component {
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
+  }
+
+
+  handleReaderLoaded(e) {
+    const reader = e.target;
+    const pt = reader.result;
+    let properties = {};
+    let isVaild = true;
+    let message = '';
+
+    try {
+      properties = JSON.parse(pt);
+    } catch (err) {
+      isVaild = false;
+      message = `Error Format:${err}`;
+    }
+
+    if (isVaild && properties.klass !== this.props.klass) {
+      isVaild = false;
+      message = `Error, the template is from [${properties.klass}]` ;
+    }
+
+    if (isVaild) {
+      this.props.fnUpload(properties);
+    } else {
+      this.props.fnUpload(null, message, false);
+    }
+  }
+
+  handleUploadTemplate(file) {
+    const reader = new FileReader();
+    reader.onload = this.handleReaderLoaded.bind(this);
+    reader.readAsText(file[0]);
+  }
+
+  render() {
+    const { content, showModal, fnClose } = this.props;
+    return (
+      <Modal show={showModal} onHide={() => fnClose()}>
+        <Modal.Header closeButton><Modal.Title>{`Upload ${content} Templates`}</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <Dropzone
+            onDrop={attach => this.handleUploadTemplate(attach)}
+            style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}>
+            <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
+              Drop File, or Click to Select.
+            </div>
+          </Dropzone>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+UploadModal.propTypes = {
+  content: PropTypes.string.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnUpload: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/admin/generic/Utils.js b/app/packs/src/admin/generic/Utils.js
new file mode 100644
index 000000000..49233c069
--- /dev/null
+++ b/app/packs/src/admin/generic/Utils.js
@@ -0,0 +1,302 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip, Popover, ControlLabel } from 'react-bootstrap';
+import uuid from 'uuid';
+import { findIndex } from 'lodash';
+import NotificationActions from '../../components/actions/NotificationActions';
+import UserStore from '../../components/stores/UserStore';
+import MatrixCheck from '../../components/common/MatrixCheck';
+
+class GenericDummy {
+  constructor() {
+    this.type = 'dummy';
+    this.field = uuid.v1();
+    this.position = 100;
+    this.label = '';
+    this.default = '';
+    this.required = false;
+  }
+}
+
+const inputEventVal = (event, type) => {
+  if (type === 'select') {
+    return event ? event.value : null;
+  } else if (type.startsWith('drag')) {
+    return event;
+  } else if (type === 'checkbox') {
+    return event.target.checked;
+  } else if (type === 'formula-field') {
+    if (event.target) {
+      return event.target.value;
+    }
+    return event;
+  }
+  return event.target && event.target.value;
+};
+
+const absOlsTermId = val => (val || '').split('|')[0].trim();
+const absOlsTermLabel = val => val.replace(absOlsTermId(val), '').replace('|', '').trim();
+const toNum = (val) => {
+  const parse = Number((val || ''));
+  return Number.isNaN(parse) ? 0 : parse;
+};
+
+const genUnitSup = (val) => {
+  if (typeof val === 'undefined' || val === null) return '';
+  const vals = val.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|[^<]+/g);
+  const reV = vals.map((v) => {
+    const supVal = v.match(/<sup[^>]*>([^<]+)<\/sup>/);
+    if (supVal) return <sup key={uuid.v4()}>{supVal[1]}</sup>;
+    const subVal = v.match(/<sub[^>]*>([^<]+)<\/sub>/);
+    if (subVal) return <sub key={uuid.v4()}>{subVal[1]}</sub>;
+    return v;
+  });
+  return <span>{reV}</span>;
+};
+
+const toBool = (val) => {
+  const valLower = String(val).toLowerCase();
+  return !(!valLower || valLower === 'false' || valLower === '0');
+};
+
+const genUnitsSystem = () => {
+  const unitsSystem = (UserStore.getState() && UserStore.getState().unitsSystem) || {};
+  return (unitsSystem.fields || []);
+};
+
+const genUnits = field => (genUnitsSystem().find(u => u.field === field) || {}).units || [];
+
+const genUnit = (field, key) => {
+  const units = genUnits(field);
+  return units.find(u => u.key === key) || {};
+};
+
+const reUnit = (unitsSystem, optionLayers) => {
+  const uniFileds = (unitsSystem.fields || []);
+  const uniObj = uniFileds.find(fiel => fiel.field === optionLayers);
+  const defaultUnit = ((uniObj && uniObj.field) || '');
+  const preUnit = uniFileds.length > 0 ? uniFileds[0].field : '';
+  return defaultUnit === '' ? preUnit : defaultUnit;
+};
+
+const convertTemp = (key, val) => {
+  switch (key) {
+    case 'F':
+      return ((parseFloat(val) * 1.8) + 32).toFixed(2);
+    case 'K':
+      return (((parseFloat(val) + 459.67) * 5) / 9).toFixed(2);
+    case 'C':
+      return (parseFloat(val) - 273.15).toFixed(2);
+    default:
+      return val;
+  }
+};
+
+const unitConvToBase = (field = {}) => {
+  const units = genUnits(field.option_layers);
+  if (units.length <= 1) {
+    return field.value;
+  }
+  const idx = findIndex(units, u => u.key === field.value_system);
+  if (idx <= 0) return field.value;
+  return ((field.value * units[0].nm) / ((units[idx] && units[idx].nm) || 1) || 0);
+};
+
+const unitConversion = (field, key, val) => {
+  if (typeof val === 'undefined' || val == null || val === 0 || val === '') {
+    return val;
+  }
+  if (field === 'temperature') {
+    return convertTemp(key, val);
+  }
+  const units = genUnits(field);
+  if (units.length <= 1) {
+    return val;
+  }
+  const idx = findIndex(units, u => u.key === key);
+  if (idx === -1) {
+    return val;
+  }
+  const pIdx = idx === 0 ? (units.length) : idx;
+  const pre = (units[pIdx - 1] && units[pIdx - 1].nm) || 1;
+  const curr = (units[idx] && units[idx].nm) || 1;
+  return parseFloat((parseFloat(val) * (curr / pre)).toFixed(5));
+};
+
+const notification = props =>
+  (
+    NotificationActions.add({
+      title: props.title,
+      message: props.msg,
+      level: props.lvl,
+      position: 'tc',
+      dismissible: 'button',
+      autoDismiss: props.autoDismiss || 5,
+      uid: props.uid || uuid.v4()
+    })
+  );
+
+const validateLayerInput = (layer) => {
+  if (layer.key === '') {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'Please input Name.' });
+    return false;
+  }
+  if (!(/^[a-z]+[_]*[a-z]*[^_]*$/g.test(layer.key))) {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+    return false;
+  }
+  if (parseInt((layer.cols || 1), 10) < 1) {
+    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'The minimun of Column per Row is 1, please input a different one.' });
+    return false;
+  }
+  return true;
+};
+
+const validateSelectList = (selectName, element) => {
+  if (selectName === '') {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'Please input Name.' });
+    return false;
+  }
+  if (!(/^[a-z]+[_]*[a-z]*[^_]*$/g.test(selectName))) {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
+    return false;
+  }
+  if (element.properties_template.select_options[`${selectName}`]) {
+    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This name of Select List is already taken. Please choose another one.' });
+    return false;
+  }
+  return true;
+};
+
+const ButtonTooltip = (props) => {
+  const tip = <Tooltip id={uuid.v4()}>{props.tip}</Tooltip>;
+  const {
+    size, bs, fnClick, element, place, fa, disabled, txt
+  } = props;
+  const content = txt ? (<span>{txt}&nbsp;</span>) : '';
+  if (bs === '') {
+    return (
+      <OverlayTrigger placement={place} overlay={tip} >
+        <Button bsSize={size} onClick={() => fnClick(element)} disabled={disabled}>
+          {content}<i className={`fa ${fa}`} aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return (
+    <OverlayTrigger placement={place} overlay={tip} >
+      <Button bsSize={size} bsStyle={bs} onClick={() => fnClick(element)} disabled={disabled}>
+        {content}<i className={`fa ${fa}`} aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonTooltip.propTypes = {
+  tip: PropTypes.string.isRequired,
+  element: PropTypes.object,
+  fnClick: PropTypes.func.isRequired,
+  bs: PropTypes.string,
+  size: PropTypes.string,
+  place: PropTypes.string,
+  fa: PropTypes.string,
+  disabled: PropTypes.bool,
+  txt: PropTypes.string,
+};
+
+ButtonTooltip.defaultProps = {
+  bs: '', size: 'xs', place: 'right', fa: 'fa-pencil-square-o', disabled: false, txt: null, element: {}
+};
+
+const ButtonConfirm = (props) => {
+  const {
+    msg, size, bs, fnClick, fnParams, place, fa, disabled
+  } = props;
+  const popover = (
+    <Popover id="popover-button-confirm">
+      {msg} <br />
+      <div className="btn-toolbar">
+        <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => fnClick(fnParams)}>
+          Yes
+        </Button><span>&nbsp;&nbsp;</span>
+        <Button bsSize="xsmall" bsStyle="warning">No</Button>
+      </div>
+    </Popover>
+  );
+
+  return (
+    <OverlayTrigger animation placement={place} root trigger="focus" overlay={popover}>
+      <Button bsSize={size} bsStyle={bs} disabled={disabled}>
+        <i className={`fa ${fa}`} aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonConfirm.propTypes = {
+  msg: PropTypes.string.isRequired,
+  fnParams: PropTypes.object.isRequired,
+  fnClick: PropTypes.func.isRequired,
+  bs: PropTypes.string,
+  size: PropTypes.string,
+  place: PropTypes.string,
+  fa: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+ButtonConfirm.defaultProps = {
+  bs: 'danger', size: 'xs', place: 'right', fa: 'fa-trash-o', disabled: false
+};
+
+const FieldLabel = (props) => {
+  const { label, desc } = props;
+  return (desc && desc !== '') ? (
+    <OverlayTrigger placement="top" delayShow={1000} overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
+      <ControlLabel>{label}</ControlLabel>
+    </OverlayTrigger>
+  ) : <ControlLabel>{label}</ControlLabel>;
+};
+
+FieldLabel.propTypes = { label: PropTypes.string.isRequired, desc: PropTypes.string };
+FieldLabel.defaultProps = { desc: '' };
+
+const GenericDSMisType = () => {
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  if (MatrixCheck(currentUser.matrix, 'genericDataset')) {
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Type (Chemical Methods Ontology) has been changed. <br />Please review this Dataset content.</Tooltip>}>
+        <span style={{ color: 'red' }}><i className="fa fa-exclamation-triangle" />&nbsp;</span>
+      </OverlayTrigger>
+    );
+  }
+  return null;
+};
+
+const clsInputGroup = (el) => {
+  if (!el) return el;
+  const genericEl = el;
+  const { layers } = genericEl.properties_template;
+  const keys = Object.keys(layers);
+  keys.forEach((key) => {
+    const layer = layers[key];
+    layer.fields.filter(e => e.type === 'input-group')
+      .forEach((e) => {
+        e.sub_fields.forEach((s) => {
+          const ff = s;
+          if (ff.type === 'text') { ff.value = ''; }
+        });
+      });
+  });
+  return genericEl;
+};
+
+const molOptions = [{ label: 'InChiKey', value: 'inchikey' }, { label: 'SMILES', value: 'smiles' }, { label: 'IUPAC', value: 'iupac' }, { label: 'Mass', value: 'molecular_weight' }];
+const samOptions = [{ label: 'Name', value: 'name' }, { label: 'Ext. Label', value: 'external_label' }, { label: 'Mass', value: 'molecular_weight' }];
+
+export {
+  ButtonTooltip, ButtonConfirm, GenericDSMisType, FieldLabel, GenericDummy,
+  validateLayerInput, validateSelectList, notification, genUnitsSystem, genUnits, genUnit,
+  unitConvToBase, unitConversion, toBool, toNum, genUnitSup, absOlsTermId, absOlsTermLabel, reUnit,
+  clsInputGroup, inputEventVal, molOptions, samOptions
+};
diff --git a/app/packs/src/admin/generic/collate.js b/app/packs/src/admin/generic/collate.js
new file mode 100644
index 000000000..df354651d
--- /dev/null
+++ b/app/packs/src/admin/generic/collate.js
@@ -0,0 +1,66 @@
+import { cloneDeep } from 'lodash';
+import { unitConversion } from './Utils';
+import GenericSubField from '../../components/models/GenericSubField';
+
+const collateValues = (currentFields, previousFields, previousValues) => {
+  const result = [];
+  let newSub = new GenericSubField();
+  currentFields.map(e => Object.assign(newSub, { [e.id]: '' }));
+  const currentValuKeys = Object.keys(newSub);
+  const previousValueKeys = Object.keys(previousValues[0]);
+  const notInCurrent = previousValueKeys.filter(e => !currentValuKeys.includes(e));
+  const currObj = {};
+  currentFields.map((c) => {
+    if (c.type === 'text') return Object.assign(currObj, { [c.id]: '' });
+    return Object.assign(currObj, { [c.id]: { value: '', value_system: c.value_system } });
+  });
+  previousValues.forEach((e) => {
+    newSub = new GenericSubField();
+    Object.assign(newSub, currObj, e);
+    notInCurrent.forEach(c => delete newSub[c]);
+    previousValueKeys.forEach((preKey) => {
+      if (newSub[preKey] === undefined || preKey === 'id') return;
+      const curr = currentFields.find(f => f.id === preKey);
+      const prev = previousFields.find(f => f.id === preKey);
+      if (curr.type === 'drag_molecule') {
+        if (['text', 'system-defined', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = { value: undefined };
+        }
+      }
+      if (curr.type === 'text') {
+        if (prev.type === 'system-defined') {
+          newSub[preKey] = newSub[preKey].value;
+        }
+        if (['drag_molecule', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = '';
+        }
+      }
+      if (curr.type === 'system-defined') {
+        if (prev.type === 'system-defined' && (curr.option_layers !== prev.option_layers)) {
+          newSub[preKey].value_system = curr.value_system;
+        }
+        if (['text', 'drag_molecule', 'drag_sample'].includes(prev.type)) {
+          newSub[preKey] = { value: '', value_system: curr.value_system };
+        }
+        newSub[preKey].value =
+        unitConversion(curr.option_layer, newSub[preKey].value_system, newSub[preKey].value);
+      }
+    });
+    result.push(newSub);
+  });
+  return result;
+};
+
+const organizeSubValues = (cur, pre) => {
+  const currentFields = cloneDeep(cur.sub_fields || []);
+  const previousFields = cloneDeep(pre.sub_fields || []);
+  const previousValues = cloneDeep(pre.sub_values || []);
+  if (currentFields.length < 1 ||
+    previousFields.length < 1 || previousValues.length < 1) {
+    return [];
+  }
+  return collateValues(currentFields, previousFields, previousValues);
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { organizeSubValues };
diff --git a/app/packs/src/admin/text_templates/ActionHeaderBtn.js b/app/packs/src/admin/text_templates/ActionHeaderBtn.js
new file mode 100644
index 000000000..0ae7bb812
--- /dev/null
+++ b/app/packs/src/admin/text_templates/ActionHeaderBtn.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+const ActionHeaderBtn = ({ addRow }) => (
+  <Button
+    active
+    onClick={() => addRow()}
+    bsSize="xsmall"
+    bsStyle="primary"
+  >
+    <i className="fa fa-plus" />
+  </Button>
+);
+
+ActionHeaderBtn.propTypes = {
+  addRow: PropTypes.func.isRequired,
+};
+
+export default ActionHeaderBtn;
diff --git a/app/packs/src/admin/text_templates/ActionRowBtn.js b/app/packs/src/admin/text_templates/ActionRowBtn.js
new file mode 100644
index 000000000..61ccf44e9
--- /dev/null
+++ b/app/packs/src/admin/text_templates/ActionRowBtn.js
@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+const RemoveRowBtn = ({ removeRow, node }) => {
+  const { data, gridOptionsWrapper } = node;
+
+  const btnClick = () => {
+    gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
+    removeRow(data.name);
+    setTimeout(() => {
+      gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
+    });
+  };
+
+  return (
+    <Button
+      active
+      onClick={btnClick}
+      bsSize="xsmall"
+      bsStyle="danger"
+    >
+      <i className="fa fa-trash" />
+    </Button>
+  );
+};
+
+RemoveRowBtn.propTypes = {
+  removeRow: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+};
+
+const SaveRowBtn = ({ saveRow, node }) => {
+  const { data, gridOptionsWrapper } = node;
+
+  const btnClick = () => {
+    gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
+    saveRow(data.name);
+    setTimeout(() => {
+      gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
+    });
+  };
+
+  return (
+    <Button
+      active
+      onClick={btnClick}
+      bsSize="xsmall"
+      bsStyle="success"
+    >
+      <i className="fa fa-floppy-o" />
+    </Button>
+  );
+};
+
+SaveRowBtn.propTypes = {
+  saveRow: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+};
+
+// const ActionRowBtn = ({ removeRow, saveRow, node }) => {
+const ActionRowBtn = ({ removeRow, node }) => {
+  return <RemoveRowBtn node={node} removeRow={removeRow} />;
+
+  // const { data } = node;
+  // if (data.name || data.name !== '') {
+  //   return <RemoveRowBtn node={node} removeRow={removeRow} />;
+  // }
+
+  // return <SaveRowBtn node={node} saveRow={saveRow} />;
+};
+
+ActionRowBtn.propTypes = {
+  removeRow: PropTypes.func.isRequired,
+  // saveRow: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+};
+
+export default ActionRowBtn;
diff --git a/app/packs/src/admin/text_templates/TextTemplate.js b/app/packs/src/admin/text_templates/TextTemplate.js
new file mode 100644
index 000000000..13e666c71
--- /dev/null
+++ b/app/packs/src/admin/text_templates/TextTemplate.js
@@ -0,0 +1,259 @@
+import { AgGridReact } from 'ag-grid-react';
+import { cloneDeep } from 'lodash';
+import PropTypes from 'prop-types';
+import Delta from 'quill-delta';
+import React from 'react';
+import {
+  Button, ControlLabel,
+  Form, FormControl,
+  Panel
+} from 'react-bootstrap';
+
+import ReactQuill from '../../components/react_quill/ReactQuill';
+import TextTemplateIcon from './TextTemplateIcon';
+import ActionHeaderBtn from './ActionHeaderBtn';
+import ActionRowBtn from './ActionRowBtn';
+
+export default class TextTemplate extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedTemplate: null,
+      text: '',
+      icon: ''
+    };
+
+    this.reactQuillRef = React.createRef();
+
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+    this.onChangeText = this.onChangeText.bind(this);
+    this.onChangeIcon = this.onChangeIcon.bind(this);
+
+    this.saveTemplate = this.saveTemplate.bind(this);
+    this.removeRow = this.removeRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+
+    this.columnDefs = [
+      {
+        field: 'name',
+        editable: true,
+        minWidth: 150,
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: '',
+        colId: 'actions',
+        headerComponentFramework: ActionHeaderBtn,
+        headerComponentParams: {
+          addRow: this.addRow
+        },
+        cellRendererFramework: ActionRowBtn,
+        cellRendererParams: {
+          removeRow: this.removeRow,
+        },
+        editable: false,
+        filter: false,
+        width: 35,
+      },
+    ];
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(newProps) {
+    const { fetchedTemplates } = newProps;
+    const selectedRows = this.gridApi.getSelectedRows();
+    if (selectedRows.length === 0) return;
+
+    const selectedNameIdx = fetchedTemplates.findIndex(t => (
+      t.name === selectedRows[0].name
+    ));
+    if (selectedNameIdx < 0) return;
+
+    const newSelectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
+    this.setState({
+      selectedTemplate: cloneDeep(newSelectedTemplate),
+      text: newSelectedTemplate.data.text || '',
+      icon: newSelectedTemplate.data.icon || ''
+    });
+  }
+
+  componentDidUpdate() {
+    if (!this.gridApi) {
+      this.gridApi.sizeColumnsToFit();
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onGridReady(e) {
+    e.api.sizeColumnsToFit();
+    this.gridApi = e.api;
+  }
+
+  onSelectionChanged() {
+    if (!this.gridApi) return;
+
+    const selectedRows = this.gridApi.getSelectedRows();
+    const templateName = selectedRows[0].name;
+
+    const { fetchedTemplates } = this.props;
+    const selectedNameIdx = fetchedTemplates.findIndex(t => (
+      t.name === templateName
+    ));
+
+    if (selectedNameIdx >= 0) {
+      const selectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
+      this.setState({
+        selectedTemplate,
+        text: selectedTemplate.data.text || '',
+        icon: selectedTemplate.data.icon || ''
+      });
+    } else {
+      const { fetchTemplate } = this.props;
+      fetchTemplate(templateName);
+    }
+  }
+
+  onCellValueChanged(params) {
+    const { oldValue, newValue } = params;
+    const { fetchedTemplates, updateTemplate } = this.props;
+    const selectedNameIdx = fetchedTemplates.findIndex(t => (
+      t.name === oldValue
+    ));
+    if (selectedNameIdx < 0) return;
+
+    const selectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
+    selectedTemplate.name = newValue;
+    updateTemplate(selectedTemplate);
+  }
+
+  onChangeText(e) {
+    const { selectedTemplate } = this.state;
+    const { value } = e.target;
+    selectedTemplate.data.text = value;
+
+    this.setState({
+      text: value,
+      selectedTemplate
+    });
+  }
+
+  onChangeIcon(e) {
+    const { selectedTemplate } = this.state;
+    const { value } = e.target;
+    selectedTemplate.data.icon = value;
+
+    this.setState({ icon: value, selectedTemplate });
+  }
+
+  saveTemplate() {
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    const quill = this.reactQuillRef.current.getEditor();
+    const delta = quill.getContents();
+
+    // Quill automatically append a trailing newline, we don't want that
+    // Remove it !!!
+    const deltaLength = delta.length();
+    const removeTrailingNewline = new Delta().retain(deltaLength - 1).delete(1);
+    const content = delta.compose(removeTrailingNewline);
+
+    const selectedTemplate = cloneDeep(this.state.selectedTemplate);
+    selectedTemplate.data.ops = content.ops;
+    this.props.updateTemplate(selectedTemplate);
+  }
+
+  removeRow(name) {
+    const { removeTemplate } = this.props;
+    removeTemplate(name);
+  }
+
+  addRow() {
+    const { addTemplate } = this.props;
+    addTemplate(this.gridApi);
+  }
+
+  render() {
+    const { predefinedTemplateNames } = this.props;
+    const { selectedTemplate, text, icon } = this.state;
+
+    return (
+      <Panel style={{ height: 'calc(100vh - 150px)' }}>
+        <Panel.Body style={{ height: '100%' }}>
+          <div style={{ display: 'flex', height: '100%' }}>
+            <div style={{ width: '35%' }}>
+              <div style={{ height: '100%' }} className="ag-theme-balham">
+                <AgGridReact
+                  enableColResize
+                  pagination
+                  paginationAutoPageSize
+                  suppressHorizontalScroll
+                  columnDefs={this.columnDefs}
+                  rowSelection="single"
+                  onGridReady={this.onGridReady}
+                  onSelectionChanged={this.onSelectionChanged}
+                  rowData={predefinedTemplateNames}
+                />
+              </div>
+            </div>
+            <div style={{ marginLeft: '10px', width: '65%' }}>
+              <div style={{ margin: '10px' }}>
+                <ControlLabel style={{ width: '65px' }}>
+                  Preview
+                </ControlLabel>
+                &nbsp;
+                <TextTemplateIcon template={selectedTemplate} />
+              </div>
+              <div style={{ margin: '10px' }}>
+                <Form inline>
+                  <ControlLabel style={{ width: '65px' }}>Text</ControlLabel>
+                  <FormControl value={text} onChange={this.onChangeText} />
+                </Form>
+              </div>
+              <div style={{ margin: '10px 10px 20px 10px' }}>
+                <Form inline>
+                  <ControlLabel style={{ width: '65px' }}>Icon</ControlLabel>
+                  <FormControl value={icon} onChange={this.onChangeIcon} />
+                </Form>
+              </div>
+              <div>
+                <ReactQuill
+                  modules={this.modules}
+                  theme="snow"
+                  style={{ height: '120px' }}
+                  ref={this.reactQuillRef}
+                  value={(selectedTemplate || {}).data}
+                />
+              </div>
+              &nbsp;&nbsp;
+              <div style={{ marginTop: '30px' }}>
+                <Button bsStyle="primary" onClick={this.saveTemplate}>
+                  Save
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+TextTemplate.propTypes = {
+  predefinedTemplateNames: PropTypes.arrayOf(PropTypes.object),
+  // eslint-disable-next-line react/forbid-prop-types
+  fetchedTemplates: PropTypes.arrayOf(PropTypes.object),
+  fetchTemplate: PropTypes.func.isRequired,
+  addTemplate: PropTypes.func.isRequired,
+  updateTemplate: PropTypes.func.isRequired,
+  removeTemplate: PropTypes.func.isRequired,
+};
+
+TextTemplate.defaultProps = {
+  predefinedTemplateNames: [],
+  fetchedTemplates: [],
+};
diff --git a/app/packs/src/admin/text_templates/TextTemplateContainer.js b/app/packs/src/admin/text_templates/TextTemplateContainer.js
new file mode 100644
index 000000000..0cec1758c
--- /dev/null
+++ b/app/packs/src/admin/text_templates/TextTemplateContainer.js
@@ -0,0 +1,103 @@
+import React from 'react';
+
+import TextTemplatesFetcher from '../../components/fetchers/TextTemplatesFetcher';
+import TextTemplate from './TextTemplate';
+
+export default class TextTemplateContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      predefinedTemplateNames: [],
+      fetchedTemplates: [],
+    };
+
+    this.addTemplate = this.addTemplate.bind(this);
+    this.fetchTemplate = this.fetchTemplate.bind(this);
+    this.removeTemplate = this.removeTemplate.bind(this);
+    this.updateTemplate = this.updateTemplate.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplatesFetcher.fetchPredefinedTemplateNames().then((res) => {
+      const templateNames = res.map(n => ({ name: n }));
+      this.setState({ predefinedTemplateNames: templateNames });
+    });
+  }
+
+  addTemplate(gridApi) {
+    const { predefinedTemplateNames, fetchedTemplates } = this.state;
+
+    this.setState({
+      predefinedTemplateNames: [{ name: '' }, ...predefinedTemplateNames],
+      fetchedTemplates: [
+        { name: '', data: {} },
+        ...fetchedTemplates
+      ]
+    }, () => {
+      if (!gridApi) return;
+
+      gridApi.startEditingCell({ rowIndex: 0, colKey: 'name' });
+    });
+  }
+
+  fetchTemplate(name) {
+    TextTemplatesFetcher.fetchPredefinedTemplateByNames([name]).then((res) => {
+      if (!res) return;
+
+      const { fetchedTemplates } = this.state;
+      this.setState({
+        fetchedTemplates: [...fetchedTemplates].concat(res),
+      });
+    });
+  }
+
+  removeTemplate(name) {
+    TextTemplatesFetcher.deletePredefinedTemplateByName(name).then((res) => {
+      if (!res) return;
+
+      const { fetchedTemplates, predefinedTemplateNames } = this.state;
+      this.setState({
+        fetchedTemplates: fetchedTemplates.filter(t => t.name !== name),
+        predefinedTemplateNames: predefinedTemplateNames.filter(t => (
+          t.name !== name
+        ))
+      });
+    });
+  }
+
+  updateTemplate(template) {
+    const { fetchedTemplates } = this.state;
+    const selectedNameIdx = fetchedTemplates.findIndex(t => (
+      t.id === template.id
+    ));
+    if (selectedNameIdx < 0) return;
+
+    TextTemplatesFetcher.updatePredefinedTemplates(template).then((res) => {
+      if (!res) return;
+
+      const newTemplates = fetchedTemplates.map((t, idx) => (
+        (idx === selectedNameIdx) ? res : t
+      ));
+      this.setState({ fetchedTemplates: newTemplates });
+    });
+  }
+
+  render() {
+    const {
+      predefinedTemplateNames,
+      fetchedTemplates,
+    } = this.state;
+
+    return (
+      <TextTemplate
+        predefinedTemplateNames={predefinedTemplateNames}
+        fetchedTemplates={fetchedTemplates}
+        fetchTemplate={this.fetchTemplate}
+        addTemplate={this.addTemplate}
+        removeTemplate={this.removeTemplate}
+        updateTemplate={this.updateTemplate}
+      />
+    );
+  }
+}
diff --git a/app/packs/src/admin/text_templates/TextTemplateIcon.js b/app/packs/src/admin/text_templates/TextTemplateIcon.js
new file mode 100644
index 000000000..b321543e8
--- /dev/null
+++ b/app/packs/src/admin/text_templates/TextTemplateIcon.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TextTemplateIcon = ({ template }) => {
+  if (!template) return <span />;
+
+  const { data, name } = template;
+
+  if (data.icon) {
+    return (
+      <i className={data.icon} />
+    );
+  }
+
+  const text = (data || {}).text || name;
+
+  return (
+    <span>{text.toUpperCase()}</span>
+  );
+};
+
+TextTemplateIcon.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  template: PropTypes.object
+};
+
+TextTemplateIcon.defaultProps = {
+  template: null
+};
+
+export default TextTemplateIcon;
diff --git a/app/packs/src/apps/admin/AdminHome.js b/app/packs/src/apps/admin/AdminHome.js
index 29ac4bf09..49893e40b 100644
--- a/app/packs/src/apps/admin/AdminHome.js
+++ b/app/packs/src/apps/admin/AdminHome.js
@@ -66,6 +66,7 @@ class AdminHome extends React.Component {
     } else if (pageIndex === 13) {
       return this.renderDelayedJobs();
     }
+
     return (<div />);
   }
 
diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index 512be2031..d34a6c842 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -33,6 +33,7 @@ export default class AdminNavigation extends React.Component {
   componentDidMount() {
     UserStore.listen(this.onChange);
     UserActions.fetchCurrentUser();
+    UserActions.fetchUnitsSystem();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
index 9ad56d4a7..f0f61d012 100644
--- a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
+++ b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
@@ -7,34 +7,6 @@ import {
   Form, FormGroup, FormControl,
 } from 'react-bootstrap';
 
-function ManagementTable({
-  columnDefs, defaultColDef, data, style, onGridReady
-}) {
-  return (
-    <div className="ag-theme-balham" style={style}>
-      <AgGridReact
-        floatingFilter
-        enableColResize
-        pagination
-        suppressHorizontalScroll
-        columnDefs={columnDefs}
-        defaultColDef={defaultColDef || {}}
-        rowData={data}
-        onGridReady={onGridReady}
-        domLayout="autoHeight"
-      />
-    </div>
-  );
-}
-
-ManagementTable.propTypes = {
-  columnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  defaultColDef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  style: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  onGridReady: PropTypes.func.isRequired,
-};
-
 export default class AbbreviationManagement extends React.Component {
   constructor() {
     super();
@@ -67,10 +39,22 @@ export default class AbbreviationManagement extends React.Component {
       abbColumnDefs, superatomColumnDefs, abbreviations, superatoms,
       defaultColDef, newAbb, changeTypeCreate
     } = this.props;
+
     const newText = newAbb ? 'Abbreviation' : 'Superatom';
 
+    const abbreviationStyle = {
+      width: '70%',
+      marginRight: '5px',
+      height: 'calc(100vh - 150px)'
+    };
+    const superatomStyle = {
+      width: '30%',
+      marginRight: '5px',
+      height: 'calc(100vh - 150px)'
+    };
+
     return (
-      <div>
+      <div style={{ marginTop: '20px' }}>
         <div className="chemscanner-abb-view-header">
           <Form inline style={{ marginRight: '20px' }}>
             <FormGroup controlId="formInlineName" style={{ marginRight: '20px' }}>
@@ -122,20 +106,28 @@ export default class AbbreviationManagement extends React.Component {
         </div>
         <br />
         <div className="abbreviation-management">
-          <ManagementTable
-            columnDefs={abbColumnDefs}
-            defaultColDef={defaultColDef}
-            data={abbreviations}
-            style={{ width: '70%', marginRight: '5px' }}
-            onGridReady={this.onAbbGridReady}
-          />
-          <ManagementTable
-            columnDefs={superatomColumnDefs}
-            defaultColDef={defaultColDef}
-            data={superatoms}
-            style={{ width: '30%', marginLeft: '5px' }}
-            onGridReady={this.onSuperatomGridReady}
-          />
+          <div className="ag-theme-balham" style={abbreviationStyle}>
+            <AgGridReact
+              pagination
+              paginationAutoPageSize
+              floatingFilter
+              columnDefs={abbColumnDefs}
+              defaultColDef={defaultColDef || {}}
+              rowData={abbreviations}
+              onGridReady={this.onAbbGridReady}
+            />
+          </div>
+          <div className="ag-theme-balham" style={superatomStyle}>
+            <AgGridReact
+              pagination
+              paginationAutoPageSize
+              floatingFilter
+              columnDefs={superatomColumnDefs}
+              defaultColDef={defaultColDef || {}}
+              rowData={superatoms}
+              onGridReady={this.onSuperatomGridReady}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
index 095c2f9eb..f7490dddc 100644
--- a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
+++ b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
@@ -29,18 +29,21 @@ export default class CopyClipboardBtn extends React.Component {
   }
 
   render() {
-    const { smi, mdl } = this.props;
+    const {
+      smi, mdl, inchi, inchiKey
+    } = this.props;
     const clipboardIcon = (<i className="fa fa-clipboard" />);
 
     return (
       <DropdownButton
-        pullRight
         title={clipboardIcon}
-        className="clipboard-btn right-btn btn btn-xs"
+        className="clipboard-btn left-btn btn btn-xs"
         id={this.ddId}
       >
         <MenuItem eventKey="1" data-clipboard-text={smi}>SMILES</MenuItem>
         <MenuItem eventKey="2" data-clipboard-text={mdl}>Molfile</MenuItem>
+        <MenuItem eventKey="3" data-clipboard-text={inchi}>InChI</MenuItem>
+        <MenuItem eventKey="4" data-clipboard-text={inchiKey}>InChIKey</MenuItem>
       </DropdownButton>
     );
   }
@@ -49,6 +52,8 @@ export default class CopyClipboardBtn extends React.Component {
 CopyClipboardBtn.propTypes = {
   smi: PropTypes.string.isRequired,
   mdl: PropTypes.string.isRequired,
+  inchi: PropTypes.string.isRequired,
+  inchiKey: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   identifier: PropTypes.object.isRequired,
   container: PropTypes.instanceOf(Element)
diff --git a/app/packs/src/apps/chemscanner/components/DeleteBtn.js b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
index 933cd242d..d1a23b213 100644
--- a/app/packs/src/apps/chemscanner/components/DeleteBtn.js
+++ b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
@@ -15,9 +15,12 @@ export default class DeleteBtn extends React.Component {
   }
 
   render() {
+    const { pullLeft } = this.props;
+    const className = pullLeft ? 'left-btn' : 'right-btn';
+
     return (
       <button
-        className="right-btn btn btn-xs"
+        className={`${className} btn btn-xs`}
         onClick={this.onClick}
       >
         <i className="fa fa-times" />
@@ -28,5 +31,10 @@ export default class DeleteBtn extends React.Component {
 
 DeleteBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
+  pullLeft: PropTypes.bool,
   param: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
 };
+
+DeleteBtn.defaultProps = {
+  pullLeft: false,
+};
diff --git a/app/packs/src/apps/chemscanner/components/HeaderMenu.js b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
index 65035c675..0984c6f3c 100644
--- a/app/packs/src/apps/chemscanner/components/HeaderMenu.js
+++ b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
@@ -1,4 +1,4 @@
-import { Map, List } from 'immutable';
+import { List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import 'whatwg-fetch';
@@ -35,11 +35,17 @@ import HelpPopover from 'src/apps/chemscanner/components/HelpPopover';
 import NotificationContainer from 'src/apps/chemscanner/containers/NotificationContainer';
 
 import {
-  extractReaction,
+  extractMoleculeFromGroup,
   generateExcelMoleculeRow,
   generateExcelReactionRow
 } from 'src/apps/chemscanner/utils';
 
+import {
+  getSchemeMolecules,
+  getReactionReagents,
+  getReactionGroups
+} from '../reactionUtils';
+
 const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
 
 const allReagents = Object.assign(
@@ -66,15 +72,65 @@ export default class HeaderMenu extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      disabled: true,
+      selectedReactionId: 0,
+      selectedSolvents: [],
+      selectedReagents: []
+    };
+
     this.clickUploadMolecule = this.clickUploadMolecule.bind(this);
     this.clickUploadReaction = this.clickUploadReaction.bind(this);
 
     this.scanFilesForMolecules = this.scanFilesForMolecules.bind(this);
     this.scanFilesForReactions = this.scanFilesForReactions.bind(this);
-    this.addReagents = this.addReagents.bind(this);
+    this.updateReagents = this.updateReagents.bind(this);
 
     this.exportCml = this.exportCml.bind(this);
     this.exportExcel = this.exportExcel.bind(this);
+
+    this.changeScannedFileView = this.changeScannedFileView.bind(this);
+    this.changeAbbreviationView = this.changeAbbreviationView.bind(this);
+    this.changeFileStorageView = this.changeFileStorageView.bind(this);
+    this.changeArchivedManagementView = this.changeArchivedManagementView.bind(this);
+
+    this.solventValues = Object.keys(solvents).map(k => solvents[k]);
+    this.allReagentValues = Object.keys(allReagents).map(k => allReagents[k]);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { reactions, molecules } = nextProps;
+
+    let rId = this.state.selectedReactionId;
+    const selectedR = reactions.filter(r => r.get('selected'));
+    const disabled = selectedR.size !== 1 || !selectedR.get(0).get('id');
+
+    const selectedReagents = [];
+    const selectedSolvents = [];
+
+    if (!disabled && selectedR.size === 1) {
+      const reaction = selectedR.get(0);
+      rId = reaction.get('id');
+      const reactionMolecules = getSchemeMolecules(reaction, molecules);
+      const reagents = getReactionReagents(reaction, reactionMolecules);
+
+      reagents.forEach((m) => {
+        const canoSmiles = m.get('canoSmiles');
+
+        if (this.solventValues.includes(canoSmiles)) {
+          selectedSolvents.push(canoSmiles);
+        } else if (this.allReagentValues.includes(canoSmiles)) {
+          selectedReagents.push(canoSmiles);
+        }
+      });
+    }
+
+    this.setState({
+      selectedReactionId: rId,
+      selectedSolvents,
+      selectedReagents,
+      disabled
+    });
   }
 
   exportCml() {
@@ -83,24 +139,34 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions;
-      selectedM = molecules;
+      selectedR = reactions.filter(r => r.get('externalId'));
+      selectedM = molecules.filter(m => m.get('externalId'));
     }
 
-    const simpleReactions = selectedR.toJS().map(r => ({
-      ...extractReaction(r),
-      yield: r.yield || '',
-      time: r.time || '',
-      temperature: r.temperature || '',
-      description: r.description || ''
-    }));
+    const simpleReactions = selectedR.map((r) => {
+      const {
+        reactants, reagents, solvents, products
+      } = getReactionGroups(r, molecules);
+
+      return {
+        id: r.get('id'),
+        reactants: extractMoleculeFromGroup(reactants.toJS()),
+        reagents: extractMoleculeFromGroup(reagents.toJS()),
+        solvents: extractMoleculeFromGroup(solvents.toJS()),
+        products: extractMoleculeFromGroup(products.toJS()),
+        yield: r.get('yield') || '',
+        time: r.get('time') || '',
+        temperature: r.get('temperature') || '',
+        description: r.get('description') || ''
+      };
+    });
 
     const simpleMolecules = selectedM.toJS().map(m => ({
       id: m.id,
       mdl: m.mdl,
     }));
 
-    fetch('/api/v1/chemscanner/export/cml', {
+    fetch('/api/v1/public_chemscanner/export/cml', {
       credentials: 'same-origin',
       headers: {
         Accept: 'application/json',
@@ -135,8 +201,8 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions;
-      selectedM = molecules;
+      selectedR = reactions.filter(r => r.get('externalId'));
+      selectedM = molecules.filter(m => m.get('externalId'));
     }
 
     const wb = {};
@@ -147,14 +213,26 @@ export default class HeaderMenu extends Component {
     const moleculeRows = selectedM.toJS().reduce((rows, mol) => {
       rows.push(generateExcelMoleculeRow(mol));
       return rows;
-    }, [['Smiles', 'MDL', 'Description']]);
+    }, [['Smiles', 'MDL', 'InChI', 'InChIKey', 'Description']]);
     const moleculeWs = XLSX.utils.aoa_to_sheet(moleculeRows);
     wb.SheetNames.push(moleculeSheet);
     wb.Sheets[moleculeSheet] = moleculeWs;
 
     const reactionSheet = 'Reactions';
-    const reactionRows = selectedR.toJS().reduce((rows, reaction) => {
+    const reactionRows = selectedR.reduce((rows, immuReaction) => {
+      const reaction = immuReaction.toJS();
+
+      const {
+        reactants, reagents, solvents, products
+      } = getReactionGroups(immuReaction, molecules);
+
+      reaction.reactants = reactants;
+      reaction.reagents = reagents;
+      reaction.solvents = solvents;
+      reaction.products = products;
+
       rows.push(generateExcelReactionRow(reaction));
+
       return rows;
     }, [[
       'ReactionSmiles', 'Temperature', 'Yield', 'Time',
@@ -201,9 +279,19 @@ export default class HeaderMenu extends Component {
     this.reactionInput.value = '';
   }
 
-  addReagents({ value, type }) {
-    const { addSmi, reactions } = this.props;
-    addSmi(reactions, value, type);
+  updateReagents({ value, type }) {
+    const { updateReagents } = this.props;
+    const { selectedReactionId } = this.state;
+
+    const newSmiles = value.split(',');
+    const selectedType = `selected${type[0].toUpperCase()}${type.substring(1)}`;
+    const selectedSmiles = this.state[selectedType];
+
+    const removedSmiles = selectedSmiles.filter(smi => !newSmiles.includes(smi));
+    const addedSmiles = newSmiles.filter(smi => !selectedSmiles.includes(smi));
+
+    const updateInfo = { add: addedSmiles, remove: removedSmiles };
+    updateReagents(selectedReactionId, updateInfo);
   }
 
   clickUploadMolecule() {
@@ -216,24 +304,27 @@ export default class HeaderMenu extends Component {
     document.getElementById('chemscanner-scan-file-dd').click();
   }
 
-  render() {
-    const {
-      ui, reactions, cleanUp, toggleAbbView,
-    } = this.props;
+  changeScannedFileView() {
+    this.props.changeScannedFileView();
+  }
 
-    const isAbb = ui.get('abbView');
-    const switchText = isAbb ? 'Extracted Items' : 'Abbreviation Management';
-    // const partition = partitionSolventsReagents(value);
-    const selectedR = reactions.filter(r => r.get('selected'));
-    const disabled = selectedR.size === 0;
-    const selectedReagents = (
-      disabled ? [] : (selectedR.getIn([0, 'addedReagentsSmi']) || List()).toArray()
-    );
-    const selectedSolvents = (
-      disabled ? [] : (selectedR.getIn([0, 'addedSolventsSmi']) || List()).toArray()
-    );
+  changeAbbreviationView() {
+    this.props.changeAbbreviationView();
+  }
+
+  changeFileStorageView() {
+    this.props.changeFileStorageView();
+  }
+
+  changeArchivedManagementView() {
+    this.props.changeArchivedManagementView();
+  }
 
-    const helpPopover = <HelpPopover />;
+  render() {
+    const { cleanUp } = this.props;
+    const { disabled, selectedReagents, selectedSolvents } = this.state;
+
+    const helpPopover = <HelpPopover style={{ maxWidth: '800px' }} />;
 
     return (
       <div className="chemscanner-menu">
@@ -284,29 +375,52 @@ export default class HeaderMenu extends Component {
             obj={solvents}
             type="solvents"
             value={selectedSolvents}
-            onSelect={this.addReagents}
+            onSelect={this.updateReagents}
           />
         </div>
         <div style={{ width: '200px' }}>
           <SmiSelect
             disabled={disabled}
             obj={allReagents}
-            onSelect={this.addReagents}
+            onSelect={this.updateReagents}
             value={selectedReagents}
             type="reagents"
             optionHeight={80}
           />
         </div>
-        <ButtonGroup>
+        <ButtonGroup style={{ marginRight: '5px' }}>
           <DropdownButton title="Export" id="chemscanner-export-dd">
             <MenuItem eventKey="1" onSelect={this.exportCml}>CML</MenuItem>
             <MenuItem eventKey="2" onSelect={this.exportExcel}>Excel</MenuItem>
           </DropdownButton>
         </ButtonGroup>
-        &nbsp;
-        &nbsp;
         <ButtonGroup>
-          <Button onClick={toggleAbbView}>{switchText}</Button>
+          <DropdownButton title="View" id="chemscanner-export-dd">
+            <MenuItem
+              eventKey="1"
+              onSelect={this.changeScannedFileView}
+            >
+              Scanned Files
+            </MenuItem>
+            <MenuItem
+              eventKey="2"
+              onSelect={this.changeAbbreviationView}
+            >
+              Abbreviation/Superatom
+            </MenuItem>
+            <MenuItem
+              eventKey="3"
+              onSelect={this.changeFileStorageView}
+            >
+              File Storage
+            </MenuItem>
+            <MenuItem
+              eventKey="4"
+              onSelect={this.changeArchivedManagementView}
+            >
+              Archived Management
+            </MenuItem>
+          </DropdownButton>
         </ButtonGroup>
       </div>
     );
@@ -314,12 +428,14 @@ export default class HeaderMenu extends Component {
 }
 
 HeaderMenu.propTypes = {
-  ui: PropTypes.instanceOf(Map).isRequired,
   reactions: PropTypes.instanceOf(List).isRequired,
   molecules: PropTypes.instanceOf(List).isRequired,
   scanFile: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,
   cleanUp: PropTypes.func.isRequired,
-  toggleAbbView: PropTypes.func.isRequired,
-  addSmi: PropTypes.func.isRequired,
+  changeScannedFileView: PropTypes.func.isRequired,
+  changeAbbreviationView: PropTypes.func.isRequired,
+  changeFileStorageView: PropTypes.func.isRequired,
+  changeArchivedManagementView: PropTypes.func.isRequired,
+  updateReagents: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/HelpPopover.js b/app/packs/src/apps/chemscanner/components/HelpPopover.js
index dbc28a5b9..2075d9746 100644
--- a/app/packs/src/apps/chemscanner/components/HelpPopover.js
+++ b/app/packs/src/apps/chemscanner/components/HelpPopover.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Popover } from 'react-bootstrap';
 
 const HelpPopover = props => (
-  <Popover id="popover-positioned-bottom" title="How to Use" {...props}>
+  <Popover id="chemscanner-help-popover" title="How to Use" {...props} >
     <strong>Scan File</strong>
     <p>
       Retrieve reaction(s)/molecule(s) from file(s).
@@ -13,19 +13,31 @@ const HelpPopover = props => (
       Clean up molecule(s) structure.
       All structures will be cleaned up if no molecule(s)/reaction(s) are selected.
     </p>
-    <strong>Add solvents/reagents</strong>
+    <strong>Export</strong>
     <p>
-      Solvents/Reagents from the list will be added to the selected reaction(s).
+      Export selected elements to CML or Excel.
+      All elements will be exported if none are selected.
     </p>
-    <strong>Abbreviation Management</strong>
+    <strong>Add solvents/reagents <i><b>(Only for logged-in users)</b></i></strong>
     <p>
-      Management UI for abbreviations and superatoms
+      Solvents/Reagents from the list will be added to the selected reaction(s).
     </p>
-    <strong>Export</strong>
+    <strong>View</strong>
     <p>
-      Export selected elements to CML or Excel.
-      All elements will be exported if none are selected.
+      Switching View between abbreviations/superatoms management,
+      uploaded file storage management and scanned elements.
     </p>
+    <ul>
+      <li><b>Scanned Files:</b> View scanned molecules/reactions</li>
+      <li>
+        <b>Abbreviation/Superatom:</b> Abbreviations and superatoms management.
+        <b> Only logged-in users can edit</b>
+      </li>
+      <li>
+        <b>File Storage:</b> Uploaded files, scanned files management.
+        <b> Only for logged-in users</b>
+      </li>
+    </ul>
   </Popover>
 );
 
diff --git a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
index c41fc9647..eec1cf5c5 100644
--- a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
+++ b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
@@ -20,8 +20,10 @@ export default class MoleculeDetails extends React.Component {
 
   render() {
     const { molecule } = this.props;
-    const details = molecule.get('details').toJS();
+    let details = molecule.get('details');
+    if (!details) return <span />;
 
+    details = details.toJS();
     const detailsList = Object.keys(details).filter(k => details[k]).map(k => (
       <li key={k}> <b>{`${pascalize(k)}: `}</b> {details[k]} </li>
     ));
diff --git a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
index 5ef6660d0..c359f7fe8 100644
--- a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
+++ b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
@@ -13,26 +13,55 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   constructor() {
     super();
 
+    this.state = {
+      type: '',
+      imageContent: ''
+    };
+
     this.setPreviewRef = (el) => {
       this.previewDiv = el;
     };
 
     this.isSvg = true;
     this.centeringImage = this.centeringImage.bind(this);
+    this.displayURL = this.displayURL.bind(this);
   }
 
   componentDidMount() {
-    setTimeout(this.centeringImage, 200);
+    // setTimeout(this.centeringImage, 300);
+
+    const { imageURL } = this.props;
+    this.displayURL(imageURL);
+  }
+
+  componentWillReceiveProps(newProps) {
+    const { imageURL } = newProps;
+    this.displayURL(imageURL);
   }
 
   componentDidUpdate() {
-    setTimeout(this.centeringImage, 200);
+    setTimeout(this.centeringImage, 300);
+  }
+
+  displayURL(url) {
+    fetch(url).then(r => r.blob()).then((blob) => {
+      const myReader = new FileReader();
+      const { type } = blob;
+
+      myReader.onload = () => {
+        this.setState({ imageContent: myReader.result, type }, this.centeringImage);
+      };
+
+      myReader.readAsText(blob);
+    });
   }
 
   centeringImage() {
     const svgEl = this.previewDiv.querySelector('#svg-file-container');
     const imgSelector = this.isSvg ? 'g > svg' : '#png-img-svg';
     const imgEl = svgEl.querySelector(imgSelector);
+    if (!imgEl) return;
+
     const svgWidth = Math.floor(svgEl.getBoundingClientRect().width);
 
     let imgWidth;
@@ -74,24 +103,28 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   }
 
   render() {
-    const { content, duration } = this.props;
-    if (!content) return <span />;
+    const { duration } = this.props;
+    const { imageContent, type } = this.state;
 
-    let svg = content;
-    if (content.startsWith('data:image/png;base64')) {
+    if (imageContent.length === 0 || type.length === 0) return <span />;
+
+    let svg = imageContent;
+
+    if (type === 'image/png') {
       this.isSvg = false;
+
       svg = `
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <image id="png-img-svg" xlink:href="${content}" width="100%" height="100%" />
+          <image id="png-img-svg" xlink:href="${imageContent}" width="100%" height="100%" />
         </svg>
       `;
     } else {
-      svg = content;
+      svg = imageContent;
     }
 
     let dummyImg = (<span />);
     if (!this.isSvg) {
-      dummyImg = (<img id="dummy-img" alt="" src={content} />);
+      dummyImg = (<img id="dummy-img" alt="" src={imageContent} />);
     }
 
     return (
@@ -112,11 +145,10 @@ export default class PreviewFileZoomPan extends React.PureComponent {
 }
 
 PreviewFileZoomPan.propTypes = {
-  content: PropTypes.string,
+  imageURL: PropTypes.string.isRequired,
   duration: PropTypes.number,
 };
 
 PreviewFileZoomPan.defaultProps = {
-  content: '',
   duration: 200,
 };
diff --git a/app/packs/src/apps/chemscanner/components/ReactionDetails.js b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
index 1cea69f01..2bc9a3cd3 100644
--- a/app/packs/src/apps/chemscanner/components/ReactionDetails.js
+++ b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
@@ -41,14 +41,19 @@ export default class ReactionDetails extends React.Component {
       return acc.concat(keyList);
     }, []);
 
-    const detailsList = ['reactants', 'reagents', 'products'].reduce((acc, group) => {
-      const groupMol = reaction.get(group);
+    const detailsList = [
+      'reactants', 'reagents', 'solvents', 'products'
+    ].reduce((acc, group) => {
+      const groupMol = this.props[group];
       if (!groupMol || groupMol.size === 0) return acc;
 
       const keyList = groupMol.reduce((mAcc, m, idx) => {
-        const mDetail = m.get('details').toJS();
-        const mDetailEls = Object.keys(mDetail).filter(k => mDetail[k]).map(k => (
-          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetail[k]} </li>
+        let mDetails = m.get('details');
+        if (!mDetails) return mAcc;
+
+        mDetails = mDetails.toJS();
+        const mDetailEls = Object.keys(mDetails).filter(k => mDetails[k]).map(k => (
+          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetails[k]} </li>
         ));
         if (mDetailEls.length === 0) return mAcc;
 
diff --git a/app/packs/src/apps/chemscanner/components/Root.js b/app/packs/src/apps/chemscanner/components/Root.js
index 11a0288ce..17e4d5428 100644
--- a/app/packs/src/apps/chemscanner/components/Root.js
+++ b/app/packs/src/apps/chemscanner/components/Root.js
@@ -11,9 +11,14 @@ import LoadingModalContainer from 'src/apps/chemscanner/containers/LoadingModalC
 
 class Root extends Component {
   componentDidMount() {
-    const { isScriptLoaded, isScriptLoadSucceed, attachEditor } = this.props;
-    const check = isScriptLoaded && isScriptLoadSucceed;
+    const {
+      isScriptLoaded, isScriptLoadSucceed, attachEditor,
+      getCurrentVersion
+    } = this.props;
+
+    getCurrentVersion();
 
+    const check = isScriptLoaded && isScriptLoadSucceed;
     if (!check) return;
 
     attachEditor('chemscanner-cdjs-container');
@@ -34,7 +39,25 @@ class Root extends Component {
 
   render() {
     const { modal, ui } = this.props;
-    const abbView = ui.get('abbView') || false;
+    const view = ui.get('view');
+
+    let viewContainer = <span />;
+    switch (view) {
+      case types.VIEW_SCANNED_FILES:
+        viewContainer = <MainContentContainer modal={modal} />;
+        break;
+      case types.VIEW_ABBREVIATION:
+        viewContainer = <AbbreviationContainer />;
+        break;
+      case types.VIEW_FILE_STORAGE:
+        viewContainer = <FileStorageContainer />;
+        break;
+      case types.VIEW_ARCHIVED_MANAGEMENT:
+        viewContainer = <ArchivedManagementContainer />;
+        break;
+      default:
+        break;
+    }
 
     return (
       <Grid fluid className="chemscanner-grid">
@@ -54,6 +77,7 @@ class Root extends Component {
         </Row>
         <Row>
           <LoadingModalContainer />
+          <ImportModalContainer />
         </Row>
       </Grid>
     );
@@ -65,6 +89,7 @@ Root.propTypes = {
   isScriptLoaded: PropTypes.bool.isRequired,
   isScriptLoadSucceed: PropTypes.bool.isRequired,
   attachEditor: PropTypes.func.isRequired,
+  getCurrentVersion: PropTypes.func.isRequired,
   modal: PropTypes.string
 };
 
@@ -72,6 +97,7 @@ Root.defaultProps = {
   modal: ''
 };
 
-// const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
-const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
+const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
+// const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
+
 export default scriptLoader(scriptUrl)(Root);
diff --git a/app/packs/src/apps/chemscanner/components/SelectBtn.js b/app/packs/src/apps/chemscanner/components/SelectBtn.js
index 82c7279eb..4d31c68d9 100644
--- a/app/packs/src/apps/chemscanner/components/SelectBtn.js
+++ b/app/packs/src/apps/chemscanner/components/SelectBtn.js
@@ -8,9 +8,7 @@ export default class SelectBtn extends React.Component {
   }
 
   onClick() {
-    const {
-      itemId, onClick
-    } = this.props;
+    const { itemId, onClick } = this.props;
     onClick(itemId);
   }
 
@@ -20,7 +18,7 @@ export default class SelectBtn extends React.Component {
 
     return (
       <button
-        className="right-btn btn btn-xs"
+        className="left-btn btn btn-xs"
         onClick={this.onClick}
       >
         <i className={`fa ${className}`} />
@@ -32,5 +30,6 @@ export default class SelectBtn extends React.Component {
 SelectBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
   itemId: PropTypes.number.isRequired,
+  schemeIdx: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired
 };
diff --git a/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js b/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
index 60658ee35..ab4d100da 100644
--- a/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/AbbreviationContainer.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-// import { connect } from 'react-redux';
 import { Button } from 'react-bootstrap';
 import 'whatwg-fetch';
 
@@ -24,7 +23,8 @@ function RemoveRowBtn({ onClick, node }) {
 
 RemoveRowBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
 };
 
 export default class AbbreviationManagementContainer extends React.Component {
@@ -44,7 +44,7 @@ export default class AbbreviationManagementContainer extends React.Component {
   }
 
   componentDidMount() {
-    fetch('/api/v1/chemscanner/abbreviations/all', {
+    fetch('/api/v1/public_chemscanner/abbreviations/all', {
       credentials: 'same-origin',
       headers: {
         Accept: 'application/json',
@@ -156,8 +156,7 @@ export default class AbbreviationManagementContainer extends React.Component {
     const deleteCol = {
       headerName: '',
       field: 'type',
-      editable: false,
-      suppressFilter: true,
+      filter: false,
       cellRendererFramework: RemoveRowBtn,
       cellRendererParams: {
         onClick: this.removeRow
@@ -172,12 +171,13 @@ export default class AbbreviationManagementContainer extends React.Component {
     ];
 
     const superatomColumnDefs = [
-      { ...deleteCol, width: 40 },
+      { ...deleteCol, width: 40, filter: false },
       { headerName: 'Superatom', field: 'abb', width: 120 },
       { headerName: 'SMILES', field: 'smi' },
     ];
     const defaultColDef = {
-      enableValue: true
+      filter: true,
+      resizable: true,
     };
 
     return (
diff --git a/app/packs/src/apps/chemscanner/containers/RootContainer.js b/app/packs/src/apps/chemscanner/containers/RootContainer.js
index a1b693dd3..9bb12cfa6 100644
--- a/app/packs/src/apps/chemscanner/containers/RootContainer.js
+++ b/app/packs/src/apps/chemscanner/containers/RootContainer.js
@@ -29,6 +29,7 @@ const mapDispatchToProps = dispatch => ({
     // eslint-disable-next-line no-undef
     perkinelmer.ChemdrawWebManager.attach(config);
   },
+  getCurrentVersion: () => dispatch(getCurrentVersion()),
 });
 
 export default connect(
diff --git a/app/packs/src/apps/chemscanner/middleware/api.js b/app/packs/src/apps/chemscanner/middleware/api.js
index 20a171b1c..3582f5b24 100644
--- a/app/packs/src/apps/chemscanner/middleware/api.js
+++ b/app/packs/src/apps/chemscanner/middleware/api.js
@@ -1,19 +1,21 @@
 import 'whatwg-fetch';
-
 import { camelizeKeys } from 'humps';
 
 export const CALL_API = 'Call API';
 
 const callApi = (endpoint, options = {}) => (
-  fetch(endpoint, options).then(response => (
-    response.json().then((json) => {
-      if (!response.ok) {
-        return Promise.reject(json);
-      }
-
-      return camelizeKeys(json);
-    })
-  ))
+  fetch(endpoint, options).then((response) => {
+    if (!response.ok) return Promise.reject(response);
+
+    const contentType = response.headers.get('content-type');
+    const jsonType = contentType.indexOf('application/json') !== -1;
+
+    if (jsonType) {
+      return response.json().then(json => camelizeKeys(json));
+    }
+
+    return response;
+  })
 );
 
 export default store => next => (action) => {
@@ -27,9 +29,7 @@ export default store => next => (action) => {
   if (typeof endpoint !== 'string') {
     throw new Error('Specify a string endpoint URL.');
   }
-  if (!normalizer) {
-    normalizer = res => res;
-  }
+  if (!normalizer) normalizer = res => res;
 
   return callApi(endpoint, options).then(response => next({
     response: normalizer(response, store, action.type),
diff --git a/app/packs/src/apps/chemscanner/middleware/chemdraw.js b/app/packs/src/apps/chemscanner/middleware/chemdraw.js
index 11981c52b..ee861f41b 100644
--- a/app/packs/src/apps/chemscanner/middleware/chemdraw.js
+++ b/app/packs/src/apps/chemscanner/middleware/chemdraw.js
@@ -11,10 +11,17 @@ const cleanUpPromise = (cddInstance, mdl) => {
   });
 
   return loadPromise.then(() => {
-    const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
-    const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
-    selectAll.handleCommand();
-    clean.handleCommand();
+    const version = cddInstance.getVersion().split('.')[0];
+
+    if (version === '18') {
+      cddInstance.g.instanceHub.chemDraw.handleCommand('selectAll');
+      cddInstance.g.instanceHub.chemDraw.handleCommand('cleanStructure');
+    } else {
+      const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
+      const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
+      selectAll.handleCommand();
+      clean.handleCommand();
+    }
 
     return new Promise(resolve => cddInstance.getMOL(mol => resolve(mol)));
   });
@@ -96,7 +103,7 @@ export default store => next => (action) => {
     return next({
       type,
       [CALL_API]: {
-        endpoint: '/api/v1/chemscanner/svg/mdl',
+        endpoint: '/api/v1/public_chemscanner/svg/mdl',
         options: {
           credentials: 'same-origin',
           method: 'post',
diff --git a/app/packs/src/apps/mydb/collections/MyCollections.js b/app/packs/src/apps/mydb/collections/MyCollections.js
index 7cdb5fef1..2b30afba9 100644
--- a/app/packs/src/apps/mydb/collections/MyCollections.js
+++ b/app/packs/src/apps/mydb/collections/MyCollections.js
@@ -73,10 +73,10 @@ export default class MyCollections extends React.Component {
   label(node) {
     if (node.id == -1) {
       return (
-        <FormControl 
-        value ="My Collections" 
-        type="text" 
-        className="root-label" 
+        <FormControl
+        value ="My Collections"
+        type="text"
+        className="root-label"
         disabled/>);
     } else {
       return (
@@ -117,10 +117,10 @@ export default class MyCollections extends React.Component {
       const { isChange } = this.state;
       return (
         <div className="root-actions">
-          {isChange && <Button 
-          id="save-collections-button" 
-          bsSize="xsmall" 
-          bsStyle="warning" 
+          {isChange && <Button
+          id="save-collections-button"
+          bsSize="xsmall"
+          bsStyle="warning"
           onMouseDown={(e)=>{e.stopPropagation();}}
           onClick={this.bulkUpdate.bind(this)}> Save </Button>}
           {this.addCollectionButton(node)}
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
index 3e488731b..926760e31 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
@@ -17,6 +17,8 @@ import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
 
 import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 
+import TextTemplateActions from '../actions/TextTemplateActions';
+
 const SpectraEditorBtn = ({
   element, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate,
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 1eef72af0..7e693c33b 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -65,6 +65,13 @@ const qCheckMsg = (sample, container) => {
   return '';
 };
 
+const isNMRKind = (container) => {
+  if (container.extended_metadata.kind) {
+    return container.extended_metadata.kind.includes('NMR');
+  }
+  return false;
+}
+
 const SpectraEditorBtn = ({
   sample, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
diff --git a/app/packs/src/components/AnalysisEditor.js b/app/packs/src/components/AnalysisEditor.js
new file mode 100644
index 000000000..c8420669d
--- /dev/null
+++ b/app/packs/src/components/AnalysisEditor.js
@@ -0,0 +1,254 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+
+import Delta from 'quill-delta';
+
+import { formatAnalysisContent } from './utils/ElementUtils';
+
+import TextTemplateStore from './stores/TextTemplateStore';
+import TextTemplateActions from './actions/TextTemplateActions';
+
+import DynamicToolbarEditor from './react_quill/DynamicToolbarEditor';
+import ToolbarIcon from './react_quill/ToolbarIcon';
+import BaseToolbar from './react_quill/BaseToolbar';
+
+import TextTemplateToolbar from './text_template_toolbar/TextTemplateToolbar';
+import ToolbarTemplateCreator from './text_template_toolbar/ToolbarTemplateCreator';
+
+const toolbarOptions = [
+  'bold', 'italic', 'underline',
+  'header', 'script',
+  'list', 'bullet',
+];
+
+export default class AnalysisEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.reactQuillRef = React.createRef();
+
+    const templateStore = TextTemplateStore.getState();
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = templateStore;
+    const fetchedTemplates = fetchedPredefinedTemplates && fetchedPredefinedTemplates.toJS();
+    this.state = {
+      fetchedNames: Object.keys(fetchedTemplates),
+      predefinedTemplateNames: predefinedTemplateNames && predefinedTemplateNames.toJS(),
+      fetchedPredefinedTemplates,
+      updateTemplate: false
+    };
+
+    this.fetchPredefinedTemplates = this.fetchPredefinedTemplates.bind(this);
+
+    this.onChangeTemplateStore = this.onChangeTemplateStore.bind(this);
+    this.onChangeContent = this.onChangeContent.bind(this);
+    this.autoFormatContent = this.autoFormatContent.bind(this);
+    this.applyTemplate = this.applyTemplate.bind(this);
+    this.updateTextTemplates = this.updateTextTemplates.bind(this);
+
+    this.quillOnChange = this.quillOnChange.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateStore.listen(this.onChangeTemplateStore);
+    TextTemplateActions.fetchPredefinedTemplateNames();
+
+    const { template } = this.props;
+    const namesToFetch = Object.values(template).flat();
+    this.fetchPredefinedTemplates(namesToFetch);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { template } = this.props;
+    const namesToFetch = Object.values(template).flat();
+
+    if (!this.state.updateTemplate && Object.keys(template).length !== 0) {
+      // this.fetchPredefinedTemplates(namesToFetch);
+      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        updateTemplate: true
+      });
+    } else if (this.props.template !== prevProps.template && this.state.updateTemplate) {
+      const prevnamesToFetch = Object.values(prevProps.template).flat();
+
+      if (prevnamesToFetch.length !== namesToFetch.length) {
+        // this.fetchPredefinedTemplates(namesToFetch);
+        TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    TextTemplateStore.unlisten(this.onChangeTemplateStore);
+  }
+
+  onChangeTemplateStore(state) {
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = state;
+    const { fetchedNames } = this.state;
+    const fetchedTemplates = (fetchedPredefinedTemplates && fetchedPredefinedTemplates.toJS()) || Map();
+
+    const templateStoreFetched = Object.keys(fetchedTemplates);
+    const fetched = [...new Set(fetchedNames.concat(templateStoreFetched))];
+    this.setState({
+      fetchedNames: fetched,
+      predefinedTemplateNames: predefinedTemplateNames && predefinedTemplateNames.toJS(),
+      fetchedPredefinedTemplates: fetchedTemplates
+    });
+  }
+
+  onChangeContent(quillEditor) {
+    const { onChangeContent } = this.props;
+
+    if (onChangeContent) {
+      onChangeContent(quillEditor.getContents());
+    }
+  }
+
+  fetchPredefinedTemplates(names) {
+    if (!names || names.length === 0) return;
+
+    const { fetchedNames } = this.state;
+    const namesToFetch = names.filter(n => !fetchedNames.includes(n));
+    if (namesToFetch.length === 0) return;
+
+    const fetched = [...new Set(fetchedNames.concat(names))];
+    this.setState({ fetchedNames: fetched }, () => {
+      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+    });
+  }
+
+  autoFormatContent() {
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    const { analysis } = this.props;
+
+    let value = analysis.extended_metadata.content || {};
+    value = formatAnalysisContent(analysis);
+
+    const quill = this.reactQuillRef.current.getEditor();
+    quill.setContents(value);
+    this.onChangeContent(quill);
+  }
+
+  quillOnChange(content, delta, source, editor) {
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    this.onChangeContent(editor);
+  }
+
+  applyTemplate(macro) {
+    const check = ('ops' in macro) && Array.isArray(macro.ops);
+    if (!check) return;
+
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    const quill = this.reactQuillRef.current.getEditor();
+    const range = quill.getSelection();
+    if (!range) return;
+
+    let contents = quill.getContents();
+    let elementOps = macro.ops;
+    const insertDelta = new Delta(elementOps);
+    if (range.index > 0) {
+      elementOps = [{ retain: range.index }].concat(elementOps);
+    }
+    const macroDelta = new Delta(elementOps);
+    contents = contents.compose(macroDelta);
+    quill.setContents(contents);
+    range.length = 0;
+    range.index += insertDelta.length();
+    quill.setSelection(range);
+
+    this.onChangeContent(quill);
+  }
+
+  updateTextTemplates(template) {
+    const { updateTextTemplates } = this.props;
+    updateTextTemplates(template);
+  }
+
+  render() {
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = this.state;
+
+    const { template, analysis, readOnly } = this.props;
+    const value = analysis.extended_metadata.content || {};
+
+    const autoFormatIcon = <span className="fa fa-magic" />;
+    const templateCreatorPopover = (
+      <Popover
+        id="popover-positioned-top"
+        title="Custom toolbar"
+        className="analyses-template-creator"
+      >
+        <ToolbarTemplateCreator
+          template={template}
+          templateOptions={predefinedTemplateNames}
+          updateTextTemplates={this.updateTextTemplates}
+        />
+      </Popover>
+    );
+
+    return (
+      <DynamicToolbarEditor
+        theme="snow"
+        formats={toolbarOptions}
+        style={{ height: '120px' }}
+        ref={this.reactQuillRef}
+        onChange={this.quillOnChange}
+        value={value}
+        readOnly={readOnly}
+      >
+        <BaseToolbar />
+        <ToolbarIcon
+          icon={autoFormatIcon}
+          onClick={this.autoFormatContent}
+        />
+        <TextTemplateToolbar
+          template={template}
+          predefinedTemplates={fetchedPredefinedTemplates}
+          applyTemplate={this.applyTemplate}
+        />
+        <OverlayTrigger
+          trigger="click"
+          placement="top"
+          rootClose
+          overlay={templateCreatorPopover}
+          onHide={this.onCloseTemplateCreator}
+        >
+          <span className="ql-formats">
+            <button>
+              <span className="fa fa-cog" />
+            </button>
+          </span>
+        </OverlayTrigger>
+      </DynamicToolbarEditor>
+    );
+  }
+}
+
+AnalysisEditor.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  template: PropTypes.object,
+  analysis: PropTypes.object,
+  /* eslint-enable react/forbid-prop-types */
+  readOnly: PropTypes.bool,
+  onChangeContent: PropTypes.func,
+  updateTextTemplates: PropTypes.func,
+};
+
+AnalysisEditor.defaultProps = {
+  readOnly: false,
+  template: {},
+  analysis: {},
+  onChangeContent: null,
+  updateTextTemplates: null
+};
diff --git a/app/packs/src/components/AnalysisNMR.js b/app/packs/src/components/AnalysisNMR.js
new file mode 100644
index 000000000..964d4d629
--- /dev/null
+++ b/app/packs/src/components/AnalysisNMR.js
@@ -0,0 +1,216 @@
+import React from 'react'
+import{
+  Col, Form, FormGroup, ControlLabel, FormControl, ButtonToolbar,
+  Button, Radio, Checkbox, PanelGroup, Panel
+} from 'react-bootstrap'
+import Select from 'react-select'
+import ElementActions from './actions/ElementActions'
+import DetailActions from './actions/DetailActions'
+import {solvents, experiments} from './staticDropdownOptions/device_options'
+
+const AnalysisNMR = ({analysis}) => {
+  const styleByExperimentState = (experiment) => {
+    return experiment.isNew || experiment.isEdited
+      ? "info"
+      : "default"
+  }
+  return (
+    <div
+      style={{marginBottom: 10}}
+    >
+      <Form horizontal>
+        <FormGroup>
+          <Col sm={1}>
+            <ControlLabel>Holder</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Status</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Name</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Solvent</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Experiment</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Priority</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Daytime</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Number of Scans</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Sweep Width</ControlLabel>
+          </Col>
+          <Col sm={1}>
+            <ControlLabel>Time</ControlLabel>
+          </Col>
+          <Col sm={2}>
+          </Col>
+        </FormGroup>
+        {analysis.experiments.length > 0
+          ? analysis.experiments.map((experiment, key) => {
+              return (
+                  <Experiment
+                    key={key}
+                    experiment={experiment}
+                    analysis={analysis}
+                  />
+              )
+            })
+          : (
+            <FormGroup style={{marginLeft: 0}}>
+              This analysis has no experiments yet.
+            </FormGroup>
+          )
+        }
+      </Form>
+      <ButtonToolbar>
+        <Button bsStyle="primary" onClick={() => DetailActions.close(analysis)}>
+          Close
+        </Button>
+        <Button
+          bsStyle="warning"
+          disabled={!analysis.isEdited}
+          onClick={() => {
+            ElementActions.saveDeviceAnalysis(analysis)
+            if (analysis.isNew) {
+              DetailActions.close(analysis, true)
+            }
+          }}
+        >
+          Save
+        </Button>
+      </ButtonToolbar>
+    </div>
+  )
+}
+
+export default AnalysisNMR
+
+const Experiment = ({analysis, experiment}) => {
+  const handlePropChange = (prop, value) => {
+    ElementActions.changeAnalysisExperimentProp(analysis, experiment, prop, value)
+  }
+  const handleSelectChange = (prop, e) => {
+    if(e && e.value) {
+      handlePropChange(prop, e.value)
+    } else {
+      handlePropChange(prop, "")
+    }
+  }
+
+  return (
+    <FormGroup>
+      <Col sm={1}>
+        <FormControl.Static>
+          {experiment.holderId ? experiment.holderId : "-"}
+        </FormControl.Static>
+      </Col>
+      <Col sm={1}>
+        <FormControl.Static>
+          {experiment.status ? experiment.status : "-"}
+        </FormControl.Static>
+      </Col>
+      <Col sm={1}>
+        <FormControl.Static>
+          {experiment.sampleShortLabel}
+        </FormControl.Static>
+      </Col>
+      <Col sm={1}>
+        <Select
+          id="solvent"
+          name='solvent'
+          multi={false}
+          options={solvents}
+          onChange={(e) => handleSelectChange('solvent', e)}
+          value={experiment.solvent}
+        />
+      </Col>
+      <Col sm={1}>
+        <Select
+          id="experiment"
+          name='experiment'
+          multi={false}
+          options={experiments}
+          onChange={(e) => {
+            handlePropChange('time', e.time)
+            handleSelectChange('experiment', e)
+          }}
+          value={experiment.experiment}
+        />
+      </Col>
+      <Col sm={1}>
+        <Checkbox
+          checked={experiment.priority}
+          onChange={(e) => handlePropChange('priority', !experiment.priority)}
+        >
+        </Checkbox>
+      </Col>
+      <Col sm={1}>
+        <Radio
+          checked={experiment.onDay}
+          onChange={(e) => handlePropChange('onDay', true)}
+          style={{minHeight: 20, marginBottom: -3, paddingTop: 0}}
+        >
+          Day
+        </Radio>
+        <Radio
+          checked={!experiment.onDay}
+          onChange={(e) => handlePropChange('onDay', false)}
+          style={{minHeight: 20, marginBottom: -3, paddingTop: 0}}
+        >
+          Night
+        </Radio>
+      </Col>
+      <Col sm={1}>
+        <FormControl
+          value={experiment.numberOfScans}
+          onChange={(e) => handlePropChange('numberOfScans', e.target.value)}
+        />
+      </Col>
+      <Col sm={1}>
+        <FormControl
+          value={experiment.sweepWidth}
+          onChange={(e) => handlePropChange('sweepWidth', e.target.value)}
+        />
+      </Col>
+      <Col sm={1}>
+        <FormControl.Static>
+          {experiment.time && experiment.time !== "" ? experiment.time : "-"}
+        </FormControl.Static>
+      </Col>
+      <Col sm={2}>
+        <ButtonToolbar>
+          <Button
+            bsSize="xsmall"
+            bsStyle="danger"
+            onClick={(e) => ElementActions.deleteAnalysisExperiment(analysis, experiment)}
+          >
+            <i className="fa fa-trash"></i>
+          </Button>
+          <Button
+            bsSize="xsmall"
+            bsStyle="info"
+            onClick={(e) => ElementActions.duplicateAnalysisExperiment(analysis, experiment)}
+          >
+            Add
+          </Button>
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={(e) => ElementActions.generateExperimentConfig(experiment)}
+          >
+            Submit
+          </Button>
+        </ButtonToolbar>
+      </Col>
+    </FormGroup>
+  )
+}
+
diff --git a/app/packs/src/components/App.js b/app/packs/src/components/App.js
new file mode 100644
index 000000000..e02165aa1
--- /dev/null
+++ b/app/packs/src/components/App.js
@@ -0,0 +1,180 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Col, Grid, Row } from 'react-bootstrap';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import Aviator from 'aviator';
+import { RepoReviewModal } from 'repo-review-ui';
+import alt from './alt';
+import Navigation from './Navigation';
+import CollectionTree from './CollectionTree';
+import CollectionManagement from './CollectionManagement';
+import Elements from './Elements';
+import initRoutes from './routes';
+import Notifications from './Notifications';
+import LoadingModal from './common/LoadingModal';
+import UIActions from './actions/UIActions';
+import UserActions from './actions/UserActions';
+import ReviewActions from './actions/ReviewActions';
+import KeyboardActions from './actions/KeyboardActions';
+import UIStore from './stores/UIStore';
+import ReviewStore from './stores/ReviewStore';
+import InboxModal from './inbox/InboxModal';
+import ProgressModal from './common/ProgressModal';
+
+class App extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      showCollectionManagement: false,
+      indicatorClassName: 'fa fa-chevron-circle-left',
+      showCollectionTree: true,
+      mainContentClassName: 'small-col main-content',
+    };
+    this.handleUiStoreChange = this.handleUiStoreChange.bind(this);
+    this.documentKeyDown = this.documentKeyDown.bind(this);
+    this.toggleCollectionTree = this.toggleCollectionTree.bind(this);
+    this.handleReviewStoreChange = this.handleReviewStoreChange.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.handleReviewStoreChange);
+    ReviewStore.listen(this.handleReviewStoreChange);
+    UserActions.fetchOlsRxno();
+    UserActions.fetchOlsChmo();
+    UserActions.fetchProfile();
+    UserActions.fetchUserLabels();
+    UserActions.fetchGenericEls();
+    UserActions.fetchSegmentKlasses();
+    UserActions.fetchDatasetKlasses();
+    UserActions.fetchUnitsSystem();
+    UserActions.fetchEditors();
+    UIActions.initialize.defer();
+    document.addEventListener('keydown', this.documentKeyDown);
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.handleUiStoreChange);
+    document.removeEventListener('keydown', this.documentKeyDown);
+  }
+  handleUiStoreChange(state) {
+    if (this.state.showCollectionManagement !== state.showCollectionManagement) {
+      this.setState({ showCollectionManagement: state.showCollectionManagement });
+    }
+
+    if (this.state.klasses !== state.klasses) {
+      this.setState({ klasses: state.klasses });
+    }
+  }
+  handleReviewStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
+    // LoadingActions.start();
+    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleReviewUpdate(e, col, rr) {
+    const { review } = this.state;
+    const checklist = rr.checklist || {};
+    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
+    checklist[col].status = e.target.checked;
+    review.checklist = checklist;
+    ReviewActions.updateReview(review);
+  }
+
+  documentKeyDown(event) {
+    // Only trigger arrow and Enter keys ON BODY
+    // Ignore on other element
+    if (event.target.tagName.toUpperCase() === 'BODY' && [13, 38, 39, 40].includes(event.keyCode)) {
+      KeyboardActions.documentKeyDown(event.keyCode);
+    }
+  }
+
+  toggleCollectionTree() {
+    const { showCollectionTree } = this.state;
+    this.setState({
+      showCollectionTree: !showCollectionTree,
+      indicatorClassName: showCollectionTree ? 'fa fa-chevron-circle-right' : 'fa fa-chevron-circle-left',
+      mainContentClassName: showCollectionTree ? 'small-col full-main' : 'small-col main-content'
+    });
+  }
+
+  collectionTree() {
+    const { showCollectionTree } = this.state;
+    if (!showCollectionTree) {
+      return <div />;
+    }
+
+    return (
+      <Col className="small-col collec-tree">
+        <CollectionTree />
+      </Col>
+    );
+  }
+
+  mainContent() {
+    const { showCollectionManagement, mainContentClassName } = this.state;
+    return (
+      <Col className={mainContentClassName} >
+        {showCollectionManagement ? <CollectionManagement /> : <Elements />}
+      </Col>
+    );
+  }
+
+  renderReviewModal() {
+    const { showReviewModal, review_info, review, currentElement, elementType, btnAction } = this.state;
+    const rrr = {};
+    rrr.review_info = review_info;
+    rrr.review = review;
+    rrr.btnAction = btnAction;
+    rrr.elementType = elementType;
+    rrr.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
+    return (
+      <RepoReviewModal
+        show={showReviewModal}
+        data={rrr}
+        onSubmit={this.handleSubmitReview}
+        onUpdate={this.handleReviewUpdate}
+        onHide={() => this.setState({ showReviewModal: false })}
+      />
+    );
+  }
+  render() {
+    const { showCollectionTree } = this.state;
+    return (
+      <Grid fluid>
+        <Row className="card-navigation">
+          <Navigation toggleCollectionTree={this.toggleCollectionTree} />
+        </Row>
+        <Row className="card-content container-fluid">
+          {this.collectionTree()}
+          {this.mainContent()}
+        </Row>
+        <Row>
+          <Notifications />
+          <LoadingModal />
+          <ProgressModal />
+        </Row>
+        <InboxModal showCollectionTree={showCollectionTree} />
+        {this.renderReviewModal()}
+      </Grid>
+    );
+  }
+}
+
+const AppWithDnD = DragDropContext(HTML5Backend)(App);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('app');
+  if (domElement) {
+    ReactDOM.render(<AppWithDnD />, domElement);
+    initRoutes();
+    Aviator.dispatch();
+  }
+});
diff --git a/app/packs/src/components/AttachmentDropzone.js b/app/packs/src/components/AttachmentDropzone.js
new file mode 100644
index 000000000..d0a5eb523
--- /dev/null
+++ b/app/packs/src/components/AttachmentDropzone.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from './DragDropItemTypes';
+import InboxActions from './actions/InboxActions';
+
+const dataTarget = {
+  canDrop(props, monitor) {
+    const itemType = monitor.getItemType();
+    if(itemType == DragDropItemTypes.DATA ||
+      itemType == DragDropItemTypes.UNLINKED_DATA ||
+      itemType == DragDropItemTypes.DATASET){
+      return true;
+    }
+  },
+
+  drop(props, monitor) {
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    const {dataset_container, handleAddWithAttachments} = props;
+
+    switch (itemType) {
+      case DragDropItemTypes.DATA:
+        handleAddWithAttachments([item.attachment])
+        InboxActions.removeAttachmentFromList(item.attachment)
+        break;
+      case DragDropItemTypes.UNLINKED_DATA:
+        handleAddWithAttachments([item.attachment])
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        break;
+      case DragDropItemTypes.DATASET:
+        handleAddWithAttachments(item.dataset.attachments)
+        InboxActions.removeDatasetFromList(item.dataset)
+        break;
+    }
+  }
+};
+
+const collectTarget = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class AttachmentDropzone extends Component{
+  constructor(props) {
+    super(props);
+  }
+
+  renderOverlay(color) {
+      return (
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: '100%',
+          zIndex: 1,
+          opacity: 0.5,
+          backgroundColor: color,
+        }} />
+      );
+    }
+
+  render(){
+    const {connectDropTarget, isOver, canDrop} = this.props;
+
+    return connectDropTarget(
+      <div>
+      <i style={{color: 'gray', padding: 2, textAlign: 'center'}}>
+      Drop File(s) from the inbox
+      {isOver && canDrop && this.renderOverlay('green')}
+      </i>
+      </div>
+    );
+  }
+}
+
+
+export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(AttachmentDropzone);
+
+AttachmentDropzone.propTypes = {
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/components/ChemrepoLabels.js b/app/packs/src/components/ChemrepoLabels.js
new file mode 100644
index 000000000..955902c37
--- /dev/null
+++ b/app/packs/src/components/ChemrepoLabels.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ChemrepoLabels = ({ chemrepoId }) => {
+  const id = chemrepoId;
+  const handleOnClick = (e) => {
+    e.stopPropagation();
+  };
+  return (
+    id == null ? <div /> :
+      (
+        <a href={`https://www.chemotion-repository.net/home/publications/molecules/${id}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
+          <img src="/favicon.ico" className="pubchem-logo" alt="Chemotion Repository" title="Chemotion Repository" />
+        </a>
+      )
+  );
+};
+
+ChemrepoLabels.propTypes = {
+  chemrepoId: PropTypes.number
+};
+
+ChemrepoLabels.defaultProps = {
+  chemrepoId: null
+};
+
+export default ChemrepoLabels;
diff --git a/app/packs/src/components/CitationTable.js b/app/packs/src/components/CitationTable.js
new file mode 100644
index 000000000..2d6e8b638
--- /dev/null
+++ b/app/packs/src/components/CitationTable.js
@@ -0,0 +1,86 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Glyphicon, PanelGroup, Panel, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { uniq } from 'lodash';
+import Immutable from 'immutable';
+import { stopEvent } from './utils/DomHelper';
+import { Citation, CitationUserRow, literatureContent } from './LiteratureCommon';
+
+const citePan = (props) => {
+  const {
+    citation, content, userId, removeCitation
+  } = props;
+  return (
+    <Panel key={`k_citation_${citation.id}`} eventKey={`citation_${citation.id}`} style={{ borderColor: 'white' }}>
+      <Panel.Heading style={{ backgroundColor: 'unset' }}>
+        <Panel.Title toggle style={{ fontSize: '14px' }}>
+          <div className="padding-right" style={{ display: 'inline-block', width: '90%' }}>
+            <Citation literature={citation} />
+          </div>
+          <div style={{ float: 'right' }}>
+            <Button data-toggle="collapse" data-target={`#literature_id_${citation.id}`} aria-expanded="false" aria-controls={`literature_id_${citation.id}`} bsSize="xs">
+              <Glyphicon glyph="chevron-right" title="Collapse/Uncollapse" style={{ cursor: 'pointer', color: '#337ab7', top: 0 }} />
+            </Button>
+            <OverlayTrigger placement="bottom" overlay={<Tooltip id="assign_button">copy to clipboard</Tooltip>}>
+              <Button bsSize="xs" active className="clipboardBtn" data-clipboard-text={content} onClick={stopEvent}>
+                <i className="fa fa-clipboard" aria-hidden="true" />
+              </Button>
+            </OverlayTrigger>
+          </div>
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Body collapsible>
+        <div className="padding-right" style={{ display: 'inline-block' }}><CitationUserRow literature={citation} userId={userId} /></div>
+        <div style={{ float: 'right' }}>
+          <Button bsSize="xs" bsStyle="danger" onClick={e => removeCitation(e, citation)}>
+            <i className="fa fa-trash-o" aria-hidden="true" />
+          </Button>
+        </div>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+export default class CitationTable extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { activeKey: '1' };
+    this.handleSelect = this.handleSelect.bind(this);
+    this.removeCitation = this.removeCitation.bind(this);
+  }
+
+  handleSelect(activeKey) {
+    this.setState({ activeKey });
+  }
+
+  removeCitation(e, citation) {
+    stopEvent(e);
+    this.props.removeCitation(citation);
+  }
+
+  render() {
+    const { rows, sortedIds, userId } = this.props;
+    const pans = uniq(sortedIds).map((id) => {
+      const citation = rows.get(id);
+      const content = literatureContent(citation, true);
+      return citePan({
+        citation, content, userId, removeCitation: this.removeCitation
+      });
+    });
+    return (
+      <PanelGroup accordion id="citation-list-controlled" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
+        {pans}
+      </PanelGroup>
+    );
+  }
+}
+
+CitationTable.propTypes = {
+  rows: PropTypes.instanceOf(Immutable.Map),
+  sortedIds: PropTypes.array,
+  userId: PropTypes.number,
+  removeCitation: PropTypes.func.isRequired
+};
+
+CitationTable.defaultProps = { rows: new Immutable.Map(), sortedIds: [], userId: 0 };
diff --git a/app/packs/src/components/CollectionManagement.js b/app/packs/src/components/CollectionManagement.js
new file mode 100644
index 000000000..121774b0c
--- /dev/null
+++ b/app/packs/src/components/CollectionManagement.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tabs, Tab } from 'react-bootstrap';
+
+import MyCollections from 'src/apps/mydb/collections/MyCollections';
+import MySharedCollections from 'src/apps/mydb/collections/MySharedCollections';
+import SharedWithMeCollections from 'src/apps/mydb/collections/SharedWithMeCollections';
+import SyncWithMeCollections from 'src/apps/mydb/collections/SyncWithMeCollections';
+import CollectionTabs from 'src/apps/mydb/collections/CollectionTabs';
+
+const CollectionManagement = () => {
+  const tabContents = [
+    <Tab eventKey={0} key={0} title="My Collections"><MyCollections /></Tab>,
+    <Tab eventKey={1} key={1} title="My Shared Collections"><MySharedCollections /></Tab>,
+    <Tab eventKey={2} key={2} title="Collections shared with me "><SharedWithMeCollections /></Tab>,
+    <Tab eventKey={3} key={3} title="Collections synchronized with me "><SyncWithMeCollections /></Tab>,
+    <Tab eventKey={4} key={4} title="Collection Tabs"><CollectionTabs /></Tab>
+  ];
+
+  return (
+    <div id="collection-management">
+      <Tabs defaultActiveKey={0} id="collection-management-tab">
+        {tabContents.map(e => e)}
+      </Tabs>
+    </div>
+  );
+};
+
+export default CollectionManagement;
diff --git a/app/packs/src/components/CollectionSubtree.js b/app/packs/src/components/CollectionSubtree.js
new file mode 100644
index 000000000..6c1150b03
--- /dev/null
+++ b/app/packs/src/components/CollectionSubtree.js
@@ -0,0 +1,281 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Aviator from 'aviator';
+import { Glyphicon, OverlayTrigger } from 'react-bootstrap';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import UserInfos from 'src/apps/mydb/collections/UserInfos';
+import GatePushBtn from 'src/components/common/GatePushBtn';
+import { collectionShow, scollectionShow } from 'src/utilities/routesUtils';
+import { CollectionDesc } from 'src/repoHome/RepoCommon';
+
+const labeling = (label) => {
+  if (typeof (label) === 'string' && (label.startsWith('Reviewing') || label.startsWith('Element To Review') || label.startsWith('Reviewed'))) {
+    const ls = label.split(',');
+    if (ls.length >= 3) {
+      const sicon = ls[1].substr(1) === '0' ? '' : <i className="icon-sample"> {ls[1].substr(1)} &nbsp; </i>;
+      const ricon = ls[2].substr(1) === '0' ? '' : <i className="icon-reaction"> {ls[2].substr(1)} &nbsp;  </i>;
+      return label.startsWith('Reviewing') ?
+        (
+          <div style={{ display: 'inline', color: 'red' }}>
+            {ls[0]} &nbsp; {sicon} {ricon}
+          </div>
+        ) :
+        (
+          <div style={{ display: 'inline' }}>
+            {ls[0]} &nbsp; {sicon} {ricon}
+          </div>
+        );
+    }
+  }
+  return label;
+}
+
+export default class CollectionSubtree extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isRemote: props.isRemote,
+      currentCollection: props.currentCollection,
+      label: props.root.label,
+      selected: false,
+      root: props.root,
+      visible: false
+    }
+
+    this.onChange = this.onChange.bind(this)
+    this.toggleExpansion = this.toggleExpansion.bind(this)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+
+  componentDidMount() {
+    UIStore.listen(this.onChange);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      root: nextProps.root,
+      label: nextProps.root.label
+    });
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.currentCollection) {
+      const visible = this.isVisible(this.state.root, state)
+      const { root } = this.state;
+
+      const selectedCol = (
+        state.currentCollection.id == root.id &&
+        state.currentCollection.is_synchronized == root.is_synchronized
+      ) || (
+          state.currentCollection.id == root.id &&
+          state.currentCollection.isRemote == root.isRemote
+        )
+
+      if (selectedCol) {
+        this.setState({
+          selected: true,
+          currentCollection: state.currentCollection,
+          visible
+        });
+      } else {
+        this.setState({
+          selected: false,
+          currentCollection: state.currentCollection,
+          visible
+        });
+      }
+    }
+  }
+
+  isVisible(node, uiState) {
+    if (node.descendant_ids) {
+      let currentCollectionId = parseInt(uiState.currentCollection.id)
+      if (node.descendant_ids.indexOf(currentCollectionId) > -1) return true
+    }
+
+    let { visibleRootsIds } = CollectionStore.getState();
+    return (visibleRootsIds.indexOf(node.id) > -1)
+  }
+
+  selectedCssClass(currentCollection) {
+    const { root } = this.state;
+    if (this.state.selected || (currentCollection && currentCollection.id == root.id && currentCollection.is_synchronized == root.is_synchronized)) {
+      return 'selected';
+    }
+    return '';
+  }
+
+  children() {
+    return this.state.root.children || [];
+  }
+
+  hasChildren() {
+    return this.children().length > 0;
+  }
+
+  subtrees() {
+    const children = this.children();
+
+    if (this.hasChildren()) {
+      return children.map((child, index) => {
+        return (
+          <li key={index}>
+            <CollectionSubtree root={child} isRemote={this.state.isRemote} />
+          </li>
+        );
+      });
+    }
+    return null;
+  }
+
+  expandButton() {
+    let icon = this.state.visible ? 'minus' : 'plus';
+
+    if (this.hasChildren()) {
+      return (
+        <Glyphicon
+          glyph={icon}
+          style={{ float: 'right', marginLeft: '5px' }}
+          onClick={this.toggleExpansion}
+        />
+      );
+    }
+    return (<div />);
+  }
+
+  takeOwnershipButton() {
+    const { root } = this.state;
+    const { isRemote } = this.state;
+    const isTakeOwnershipAllowed = this.state.root.permission_level === 5;
+    const isSync = !!((root.sharer && root.user && root.user.type !== 'Group'));
+    if ((isRemote || isSync) && isTakeOwnershipAllowed) {
+      return (
+        <div className="take-ownership-btn">
+          <i className="fa fa-exchange" onClick={e => this.handleTakeOwnership(e)} />
+        </div>
+      )
+    }
+    return (<div />);
+  }
+
+  handleTakeOwnership() {
+    const isSync = !!this.state.root.sharer;
+    CollectionActions.takeOwnership({ id: this.state.root.id, isSync });
+  }
+
+  handleClick(e) {
+    const { root } = this.state
+    let {visible} = this.state
+    const uiState = UIStore.getState()
+
+    visible = visible || this.isVisible(root, uiState);
+    this.setState({ visible });
+    let collectionID = 'all';
+    if (root.label === 'All' && root.is_locked) {
+      Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`, { silent: true });
+      collectionShow({ params: { collectionID } });
+      return;
+    }
+    const url = (this.props.root.sharer)
+      ? `/scollection/${root.id}/${this.urlForCurrentElement()}`
+      : `/collection/${root.id}/${this.urlForCurrentElement()}`;
+    Aviator.navigate(url, { silent: true });
+    collectionID = this.state.root.id;
+    const collShow = this.props.root.sharer ? scollectionShow : collectionShow;
+    collShow({ params: { collectionID } });
+  }
+
+  urlForCurrentElement() {
+    const { currentElement } = ElementStore.getState();
+    if (currentElement) {
+      if (currentElement.isNew) {
+        return `${currentElement.type}/new`;
+      }
+      return `${currentElement.type}/${currentElement.id}`;
+    }
+    return '';
+  }
+
+  toggleExpansion(e) {
+    e.stopPropagation()
+    let { visible, root } = this.state
+    visible = !visible
+    this.setState({ visible: visible })
+
+    let { visibleRootsIds } = CollectionStore.getState()
+    if (visible) {
+      visibleRootsIds.push(root.id)
+    } else {
+      let descendantIds = root.descendant_ids
+        ? root.descendant_ids
+        : root.children.map(function (s) { return s.id })
+      descendantIds.push(root.id)
+      visibleRootsIds = visibleRootsIds.filter(x => descendantIds.indexOf(x) == -1)
+    }
+
+    // Remove duplicate
+    let newIds = Array.from(new Set(visibleRootsIds))
+    CollectionActions.updateCollectrionTree(newIds)
+  }
+
+  synchronizedIcon() {
+    let sharedUsers = this.state.root.sync_collections_users
+    return (
+      sharedUsers && sharedUsers.length > 0
+        ? <OverlayTrigger placement="bottom" overlay={UserInfos({ users: sharedUsers })}>
+          <i className="fa fa-share-alt" style={{ float: "right" }}></i>
+        </OverlayTrigger>
+        : null
+    )
+  }
+
+
+  render() {
+    const { root, visible, currentCollection } = this.state
+    let { label } = this.state
+
+    label = labeling(label);
+
+    let style;
+    if (!visible) {
+      style = {
+        display: 'none',
+        marginBottom: 0
+      };
+    }
+    const gated = root && root.is_locked && label == 'chemotion-repository.net' ?
+      <GatePushBtn collection_id={root.id} /> : null;
+    return (
+      <div className="tree-view" key={root.id}>
+        {this.takeOwnershipButton()}
+
+        <div id={`tree-id-${root.label}`} className={"title " + this.selectedCssClass(currentCollection)}
+          onClick={this.handleClick}>
+          {this.expandButton()}
+          {this.synchronizedIcon()}
+          {gated}
+          {label}
+          <CollectionDesc label={root.label} />
+        </div>
+        <ul style={style}>
+          {this.subtrees()}
+        </ul>
+      </div>
+    )
+  }
+}
+
+CollectionSubtree.propTypes = {
+  isRemote: PropTypes.bool,
+  root: PropTypes.object
+};
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
new file mode 100644
index 000000000..47f816bdd
--- /dev/null
+++ b/app/packs/src/components/CollectionTree.js
@@ -0,0 +1,355 @@
+import React from 'react';
+import { Button, OverlayTrigger, Badge, Glyphicon, Tooltip } from 'react-bootstrap';
+import update from 'immutability-helper';
+import Aviator from 'aviator';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import CollectionSubtree from 'src/apps/mydb/collections/CollectionSubtree';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import UserInfos from 'src/apps/mydb/collections/UserInfos';
+
+const colVisibleTooltip = <Tooltip id="col_visible_tooltip">Toggle own collections</Tooltip>;
+
+export default class CollectionTree extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const collecState = CollectionStore.getState();
+
+    this.state = {
+      unsharedRoots: collecState.unsharedRoots,
+      sharedRoots: collecState.sharedRoots,
+      remoteRoots: collecState.remoteRoots,
+      lockedRoots: collecState.lockedRoots,
+      syncInRoots: collecState.syncInRoots,
+      ownCollectionVisible: true,
+      sharedWithCollectionVisible: false,
+      sharedToCollectionVisible: false,
+      syncCollectionVisible: false,
+      visible: false,
+      root: {},
+      selected: false,
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    CollectionStore.listen(this.onChange);
+    CollectionActions.fetchLockedCollectionRoots();
+    CollectionActions.fetchUnsharedCollectionRoots();
+    CollectionActions.fetchSharedCollectionRoots();
+    CollectionActions.fetchRemoteCollectionRoots();
+    CollectionActions.fetchSyncInCollectionRoots();
+  }
+
+  componentWillUnmount() {
+    CollectionStore.unlisten(this.onChange);
+  }
+
+  handleSectionToggle = (visible) => {
+    this.setState((prevState) => ({
+      [visible]: !prevState[visible],
+    }));
+  };
+
+  onChange(state) {
+    this.setState(state);
+  }
+
+  lockedSubtrees() {
+    const roots = this.state.lockedRoots;
+
+    return this.subtrees(roots, null, false);
+  }
+
+  removeOrphanRoots(roots) {
+    let newRoots = []
+    roots.forEach((root) => {
+      if (root.children.length > 0) newRoots.push(root)
+    })
+
+    return newRoots;
+  }
+
+  unsharedSubtrees() {
+    let roots = this.state.unsharedRoots;
+    roots = roots.filter(function (item) { return !item.isNew })
+
+    return this.subtrees(roots, null, false);
+  }
+
+  sharedSubtrees() {
+    let { sharedRoots, sharedToCollectionVisible } = this.state
+    sharedRoots = this.removeOrphanRoots(sharedRoots)
+
+    let labelledRoots = sharedRoots.map(e => {
+      return update(e, {
+        label: {
+          $set:
+            <span>{this.labelRoot('shared_to', e)}</span>
+        }
+      })
+    })
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div
+          className="title"
+          style={{ backgroundColor: 'white' }}
+          onClick={() => this.handleSectionToggle('sharedToCollectionVisible')}
+        >
+          <i className="fa fa-share-alt share-icon" />&nbsp;&nbsp;
+          My shared collections
+        </div>
+      </div>
+    )
+    return this.subtrees(labelledRoots, subTreeLabels,
+      false, sharedToCollectionVisible)
+  }
+
+  remoteSubtrees() {
+    let { remoteRoots, sharedWithCollectionVisible } = this.state
+    remoteRoots = this.removeOrphanRoots(remoteRoots)
+
+    let labelledRoots = remoteRoots.map(e => {
+      return update(e, {
+        label: {
+          $set:
+            <span>
+              {this.labelRoot('shared_by', e)}
+              {' '}
+              {this.labelRoot('shared_to', e)}
+            </span>
+        }
+      })
+    })
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div
+          id="shared-home-link"
+          className="title"
+          style={{ backgroundColor: 'white' }}
+          onClick={() => this.handleSectionToggle('sharedWithCollectionVisible')}
+        >
+          <i className="fa fa-share-alt share-icon" />
+          &nbsp;&nbsp;
+          Shared with me &nbsp;
+        </div>
+      </div>
+    )
+
+    return this.subtrees(labelledRoots, subTreeLabels,
+      false, sharedWithCollectionVisible)
+  }
+
+  remoteSyncInSubtrees() {
+    let { syncInRoots, syncCollectionVisible } = this.state
+    syncInRoots = this.removeOrphanRoots(syncInRoots)
+
+    let labelledRoots = syncInRoots.map(e => {
+      return update(e, {
+        label: {
+          $set:
+            <span>
+              {this.labelRoot('shared_by', e)}
+              {' '}
+              {this.labelRoot('shared_to', e)}
+            </span>
+        }
+      })
+    })
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div
+          id="synchron-home-link"
+          className="title"
+          style={{ backgroundColor: 'white' }}
+          onClick={() => this.handleSectionToggle('syncCollectionVisible')}
+        >
+          <i className="fa fa-share-alt" />&nbsp;&nbsp;
+          Synchronized with me &nbsp;
+        </div>
+      </div>
+    )
+
+    return this.subtrees(labelledRoots, subTreeLabels,
+      false, syncCollectionVisible)
+  }
+
+
+  labelRoot(sharedToOrBy, rootCollection) {
+    let shared = rootCollection[sharedToOrBy]
+    if (!shared) return <span />
+
+    return (
+      <OverlayTrigger placement="bottom" overlay={UserInfos({ users: [shared] })}>
+        <span>
+          &nbsp; {sharedToOrBy == 'shared_to' ? 'with' : 'by'}
+          &nbsp; {shared.initials}
+        </span>
+      </OverlayTrigger>
+    )
+  }
+
+  convertToSlug(name) {
+    return name.toLowerCase()
+  }
+
+  subtrees(roots, label, isRemote, visible = true) {
+    const { currentCollection } = UIStore.getState();
+    const subtrees = roots && roots.map((root, index) => {
+      return <CollectionSubtree root={root} key={index} isRemote={isRemote} currentCollection={currentCollection} />
+    });
+
+    let subtreesVisible = visible ? "" : "none"
+    return (
+      <div>
+        {label}
+        <div style={{ display: subtreesVisible }}>
+          {subtrees}
+        </div>
+      </div>
+    )
+  }
+
+  collectionManagementButton() {
+    return (
+      <div className="take-ownership-btn">
+        <Button id="collection-management-button" bsSize="xsmall" bsStyle="danger"
+          title="Manage & organize collections: create or delete collections, adjust sharing options, adjust the visibility of tabs based on the collection level"
+          onClick={() => this.handleCollectionManagementToggle()}>
+          <i className="fa fa-cog"></i>
+        </Button>
+      </div>
+    )
+  }
+
+  handleCollectionManagementToggle() {
+    UIActions.toggleCollectionManagement();
+    const { showCollectionManagement, currentCollection, isSync } = UIStore.getState();
+    if (showCollectionManagement) {
+      Aviator.navigate('/collection/management');
+    } else {
+      if (currentCollection == null || currentCollection.label == 'All') {
+        Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`);
+      } else {
+        Aviator.navigate(isSync
+          ? `/scollection/${currentCollection.id}/${this.urlForCurrentElement()}`
+          : `/collection/${currentCollection.id}/${this.urlForCurrentElement()}`);
+      }
+    }
+  }
+
+  urlForCurrentElement() {
+    const { currentElement } = ElementStore.getState();
+    if (currentElement) {
+      if (currentElement.isNew) {
+        return `${currentElement.type}/new`;
+      }
+      else {
+        return `${currentElement.type}/${currentElement.id}`;
+      }
+    }
+    else {
+      return '';
+    }
+  }
+
+  // For Repository
+  publicRoots(roots, preservePublic) {
+    let newRoots =[]
+    roots.forEach((root) => {
+      if(preservePublic) {
+        if (root.is_public) newRoots.push(root)
+      } else {
+        if (!root.is_public) newRoots.push(root)
+      }
+    })
+
+    return newRoots
+  }
+
+
+  // For Repository
+  publicSubtrees() {
+    let {syncInRoots, syncChemotionVisible} = this.state
+    syncInRoots = this.removeOrphanRoots(syncInRoots)
+    syncInRoots = this.publicRoots(syncInRoots, true)
+
+    let orderedRoots = []
+    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
+      syncInRoots[0].children.map((e,idx) => {
+        if (e.label.match(/hemotion/) ) {
+          orderedRoots[0] = e;
+          orderedRoots[0].label = 'Chemotion';
+        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
+          orderedRoots[1] = e;
+        } else if (e.label.match(/Published Elements/)) {
+          orderedRoots[2] = e
+          orderedRoots[2].label = 'My Published Elements'
+        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
+        else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }
+        else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e  }
+        else {orderedRoots[idx+10] = e  }
+      })
+    }
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div className={"title title-public " } style={{backgroundColor:'white'}}
+        >
+        </div>
+      </div>
+    )
+
+    return this.subtrees(orderedRoots, subTreeLabels,
+                         true, syncChemotionVisible)
+  }
+
+  render() {
+    const { ownCollectionVisible } = this.state;
+
+    const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';
+
+    return (
+      <div>
+        <div className="tree-view">
+        <div className="tree-wrapper">
+            {this.publicSubtrees()}
+          </div>
+
+          <OverlayTrigger placement="top" delayShow={1000} overlay={colVisibleTooltip}>
+            <div
+              className="title"
+              style={{ backgroundColor: 'white' }}
+              onClick={() => this.handleSectionToggle('ownCollectionVisible')}
+            >
+              <i className="fa fa-list" /> &nbsp;&nbsp; My Collections
+            </div>
+          </OverlayTrigger>
+        </div>
+        <div className="tree-wrapper" style={{ display: ownCollectionDisplay }}>
+          {this.lockedSubtrees()}
+          {/* {this.unsharedSubtrees()} */}
+        </div>
+        {/* <div className="tree-wrapper">
+          {this.sharedSubtrees()}
+        </div>
+        <div className="tree-wrapper">
+          {this.remoteSubtrees()}
+        </div>
+        <div className="tree-wrapper">
+          {this.remoteSyncInSubtrees()}
+        </div> */}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/ComputeTask.js b/app/packs/src/components/ComputeTask.js
new file mode 100644
index 000000000..9bb8f7a33
--- /dev/null
+++ b/app/packs/src/components/ComputeTask.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Label } from 'react-bootstrap';
+
+import Aviator from 'aviator';
+
+const statusMap = {
+  not_computed: 'pending'
+};
+
+export default class ComputeTask extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.navigateSample = this.navigateSample.bind(this);
+    this.checkState = this.checkState.bind(this);
+    this.revokeTask = this.revokeTask.bind(this);
+    this.deleteTask = this.deleteTask.bind(this);
+  }
+
+  navigateSample() {
+    const { task } = this.props;
+    const currentURI = Aviator.getCurrentURI();
+
+    const collectionMatch = currentURI.match(/\/collection\/(\d+)\//);
+    if (collectionMatch) {
+      const collectionId = collectionMatch[1];
+      const url = `/collection/${collectionId}/sample/${task.sampleId}`;
+      Aviator.navigate(url);
+    }
+  }
+
+  checkState() {
+    const { task } = this.props;
+    this.props.checkState(task.id);
+  }
+
+  revokeTask() {
+    const { task } = this.props;
+    this.props.revokeTask(task.id);
+  }
+
+  deleteTask() {
+    const { task } = this.props;
+    this.props.deleteTask(task.id);
+  }
+
+  render() {
+    const { task } = this.props;
+    const { status } = task;
+    const displayStatus = (status in statusMap) ? statusMap[status] : status;
+
+    return (
+      <tr>
+        <td style={{ textAlign: 'center' }}>
+          <Button bsStyle="link" onClick={this.navigateSample}>
+            Sample
+          </Button>
+        </td>
+        <td style={{ textAlign: 'center' }}>
+          <Label bsStyle="primary">{displayStatus}</Label>
+        </td>
+        <td style={{ textAlign: 'center' }}>{task.updatedAt}</td>
+        <td style={{ textAlign: 'center' }}>
+          <Button bsStyle="info" onClick={this.checkState} bsSize="xs" style={{ width: '22px' }}>
+            <i className="fa fa-long-arrow-up" />
+            <i className="fa fa-long-arrow-down" />
+          </Button>
+          &nbsp;&nbsp;
+          <Button bsStyle="warning" onClick={this.revokeTask} bsSize="xs">
+            <i className="fa fa-stop" />
+          </Button>
+          &nbsp;&nbsp;
+          <Button bsStyle="danger" onClick={this.deleteTask} bsSize="xs">
+            <i className="fa fa-trash" />
+          </Button>
+        </td>
+      </tr>
+    );
+  }
+}
+
+ComputeTask.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  task: PropTypes.object.isRequired,
+  checkState: PropTypes.func.isRequired,
+  revokeTask: PropTypes.func.isRequired,
+  deleteTask: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/ComputeTaskContainer.js b/app/packs/src/components/ComputeTaskContainer.js
new file mode 100644
index 000000000..f4701168a
--- /dev/null
+++ b/app/packs/src/components/ComputeTaskContainer.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Button, Table } from 'react-bootstrap';
+
+import ComputeTaskActions from './actions/ComputeTaskActions';
+import DetailActions from './actions/DetailActions';
+import LoadingActions from './actions/LoadingActions';
+
+import ComputeTaskStore from './stores/ComputeTaskStore';
+import ComputeTask from './ComputeTask';
+
+export default class ComputeTaskContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tasks: []
+    };
+
+    this.onChangeComputeTask = this.onChangeComputeTask.bind(this);
+    this.onClose = this.onClose.bind(this);
+
+    this.checkState = this.checkState.bind(this);
+    this.revokeTask = this.revokeTask.bind(this);
+    this.deleteTask = this.deleteTask.bind(this);
+  }
+
+  componentDidMount() {
+    ComputeTaskStore.listen(this.onChangeComputeTask);
+
+    ComputeTaskActions.fetchAll();
+  }
+
+  componentWillUnmount() {
+    ComputeTaskStore.unlisten(this.onChangeComputeTask);
+  }
+
+  onClose() {
+    DetailActions.close(this.props.task, true);
+  }
+
+  onChangeComputeTask(state) {
+    const { tasks } = state;
+
+    this.setState({ tasks });
+  }
+
+  /* eslint-disable class-methods-use-this */
+  checkState(taskId) {
+    LoadingActions.start();
+    ComputeTaskActions.checkState(taskId);
+  }
+
+  revokeTask(taskId) {
+    LoadingActions.start();
+    ComputeTaskActions.revokeTask(taskId);
+  }
+
+  deleteTask(taskId) {
+    LoadingActions.start();
+    ComputeTaskActions.deleteTask(taskId);
+  }
+  /* eslint-enable class-methods-use-this */
+
+  render() {
+    const { tasks } = this.state;
+
+    return (
+      <Panel className="eln-panel-detail" bsStyle="primary">
+        <Panel.Heading>
+          {'Task'}
+          <div className="button-right">
+            <Button
+              key="closeBtn"
+              onClick={this.onClose}
+              bsStyle="danger"
+              bsSize="xsmall"
+              className="button-right"
+            >
+              <i className="fa fa-times" />
+            </Button>
+          </div>
+        </Panel.Heading>
+        <Panel.Body>
+          <Table striped condensed hover>
+            <thead>
+              <tr>
+                <th style={{ textAlign: 'center' }}>Sample</th>
+                <th style={{ textAlign: 'center' }}>Status</th>
+                <th style={{ textAlign: 'center' }}>Updated at</th>
+                <th style={{ textAlign: 'center' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tasks.map(task => (
+                <ComputeTask
+                  key={task.id}
+                  task={task}
+                  checkState={this.checkState}
+                  revokeTask={this.revokeTask}
+                  deleteTask={this.deleteTask}
+                />
+              ))}
+            </tbody>
+          </Table>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+ComputeTaskContainer.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  task: PropTypes.object.isRequired
+};
diff --git a/app/packs/src/components/ContainerComponent.js b/app/packs/src/components/ContainerComponent.js
new file mode 100644
index 000000000..7da885a64
--- /dev/null
+++ b/app/packs/src/components/ContainerComponent.js
@@ -0,0 +1,227 @@
+import React, { Component } from 'react';
+import { Map } from 'immutable';
+import PropTypes from 'prop-types';
+import {
+  Col,
+  FormControl,
+  FormGroup,
+  ControlLabel
+} from 'react-bootstrap';
+import Select from 'react-select';
+
+import TextTemplateStore from './stores/TextTemplateStore';
+import TextTemplateActions from './actions/TextTemplateActions';
+
+import ContainerDatasets from './ContainerDatasets';
+import QuillViewer from './QuillViewer';
+import OlsTreeSelect from './OlsComponent';
+import { confirmOptions } from './staticDropdownOptions/options';
+
+import AnalysisEditor from './AnalysisEditor';
+import HyperLinksSection from './common/HyperLinksSection';
+
+export default class ContainerComponent extends Component {
+  constructor(props) {
+    super();
+
+    const { container, templateType } = props;
+    const textTemplate = TextTemplateStore.getState()[templateType] || Map();
+    this.state = {
+      container,
+      textTemplate: textTemplate && textTemplate.toJS()
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.updateTextTemplates = this.updateTextTemplates.bind(this);
+
+    this.handleTemplateChange = this.handleTemplateChange.bind(this);
+    
+    this.handleAddLink = this.handleAddLink.bind(this);
+    this.handleRemoveLink = this.handleRemoveLink.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateStore.listen(this.handleTemplateChange);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container,
+    });
+  }
+
+  componentWillUnmount() {
+    TextTemplateStore.unlisten(this.handleTemplateChange);
+  }
+
+  onChange(container) {
+    this.props.onChange(container);
+  }
+
+  handleTemplateChange() {
+    const { templateType } = this.props;
+
+    const textTemplate = TextTemplateStore.getState()[templateType];
+    this.setState({ textTemplate: textTemplate && textTemplate.toJS() });
+  }
+
+  handleInputChange(type, ev) {
+    const { container } = this.state;
+    let isChanged = false;
+    switch (type) {
+      case 'name':
+        container.name = ev.currentTarget.value;
+        isChanged = true;
+        break;
+      case 'description':
+        container.description = ev.currentTarget.value;
+        isChanged = true;
+        break;
+      case 'kind': {
+        container.extended_metadata.kind = (ev || '').trim();
+        isChanged = true;
+        break;
+      }
+      case 'status':
+        container.extended_metadata.status = ev ? ev.value : undefined;
+        isChanged = true;
+        break;
+      case 'content':
+        container.extended_metadata.content = ev;
+        isChanged = true;
+        break;
+      default:
+        break;
+    }
+
+    if (isChanged) this.onChange(container);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  updateTextTemplates(textTemplate) {
+    const { templateType } = this.props;
+    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
+  }
+  
+  handleAddLink(link) {
+    const { container } = this.state;
+    if (container.extended_metadata['hyperlinks'] == null) {
+      container.extended_metadata['hyperlinks'] = [link];
+    } else {
+      container.extended_metadata['hyperlinks'].push(link);
+    }
+    this.setState({ container });
+  }
+
+  handleRemoveLink(link) {
+    const { container } = this.state;
+    var index = container.extended_metadata['hyperlinks'].indexOf(link);
+    if (index !== -1) {
+      container.extended_metadata['hyperlinks'].splice(index, 1);
+    }
+    this.setState({ container });
+  }
+
+  render() {
+    const { container, textTemplate } = this.state;
+    const { readOnly, disabled } = this.props;
+
+    let quill = (<span />);
+    if (readOnly || disabled) {
+      quill = (
+        <QuillViewer value={container.extended_metadata.content} />
+      );
+    } else {
+      quill = (
+        <AnalysisEditor
+          height="120px"
+          template={textTemplate}
+          analysis={container}
+          updateTextTemplates={this.updateTextTemplates}
+          // eslint-disable-next-line react/jsx-no-bind
+          onChangeContent={this.handleInputChange.bind(this, 'content')}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <Col md={8}>
+          <label>Name</label>
+          <FormControl
+            type="text"
+            label="Name"
+            value={container.name || '***'}
+            // eslint-disable-next-line react/jsx-no-bind
+            onChange={this.handleInputChange.bind(this, 'name')}
+            disabled={readOnly || disabled} />
+        </Col>
+        <Col md={4}>
+          <div style={{ marginBottom: 11 }}>
+            <label>Status</label>
+            <Select
+              name='status'
+              multi={false}
+              options={confirmOptions}
+              value={container.extended_metadata['status']}
+              disabled={readOnly || disabled}
+              // eslint-disable-next-line react/jsx-no-bind
+              onChange={this.handleInputChange.bind(this, 'status')}
+            />
+          </div>
+        </Col>
+        <Col md={12}>
+          <div style={{ marginBottom: 11 }}>
+            <ControlLabel>Type (Chemical Methods Ontology)</ControlLabel>
+            <OlsTreeSelect
+              selectName="chmo"
+              selectedValue={container.extended_metadata.kind || ''}
+              onSelectChange={event => this.handleInputChange('kind', event)}
+              selectedDisable={readOnly || disabled || false}
+            />
+          </div>
+        </Col>
+        <Col md={12}>
+          <FormGroup>
+            <ControlLabel>Content</ControlLabel>
+            {quill}
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>Description</ControlLabel>
+            <FormControl
+              componentClass="textarea"
+              label="Description"
+              value={container.description || ''}
+              disabled={readOnly || disabled}
+              // eslint-disable-next-line react/jsx-no-bind
+              onChange={this.handleInputChange.bind(this, 'description')}
+            />
+          </FormGroup>
+        </Col>
+        <Col md={12}>
+          <label>Datasets</label>
+          <ContainerDatasets
+            container={container}
+            readOnly={readOnly}
+            disabled={disabled}
+            onChange={this.onChange}
+          />
+        </Col>
+        <Col md={12}>
+          <HyperLinksSection data={container.extended_metadata['hyperlinks']} onAddLink={this.handleAddLink} onRemoveLink={this.handleRemoveLink}
+            disabled={disabled}></HyperLinksSection>
+        </Col>
+      </div>
+    );
+  }
+}
+
+ContainerComponent.propTypes = {
+  templateType: PropTypes.string,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  container: PropTypes.object
+}
diff --git a/app/packs/src/components/ContainerDataset.js b/app/packs/src/components/ContainerDataset.js
new file mode 100644
index 000000000..c0eae8c06
--- /dev/null
+++ b/app/packs/src/components/ContainerDataset.js
@@ -0,0 +1,471 @@
+import React, { Component } from 'react';
+import { Row, Col, FormGroup, FormControl, ControlLabel, Table, ListGroup, ListGroupItem, Button, Overlay } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import debounce from 'es6-promise-debounce';
+import { findIndex, cloneDeep } from 'lodash';
+
+import Utils from './utils/Functions';
+import Attachment from './models/Attachment';
+import AttachmentFetcher from './fetchers/AttachmentFetcher';
+import UserStore from './stores/UserStore';
+import GenericDS from './models/GenericDS';
+import GenericDSDetails from './generic/GenericDSDetails';
+import { absOlsTermId } from '../admin/generic/Utils';
+import Container from './models/Container';
+import UserStore from '../components/stores/UserStore'
+
+import InboxActions from './actions/InboxActions';
+import InstrumentsFetcher from './fetchers/InstrumentsFetcher';
+import ChildOverlay from './managing_actions/ChildOverlay';
+
+import HyperLinksSection from './common/HyperLinksSection';
+
+export default class ContainerDataset extends Component {
+  constructor(props) {
+    super();
+    let dataset_container = Object.assign({}, props.dataset_container);
+    this.state = {
+      dataset_container: dataset_container,
+      instruments: null,
+      valueBeforeFocus: null,
+      timeoutReference: null,
+      link: null
+    };
+
+    this.timeout = 6e2; // 600ms timeout for input typing
+    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleAddLink = this.handleAddLink.bind(this);
+    this.handleRemoveLink = this.handleRemoveLink.bind(this);
+  }
+
+  componentDidMount() {
+    this.createAttachmentPreviews(this.state.dataset_container);
+  }
+
+  createAttachmentPreviews(dataset_container) {
+    const { attachments } = dataset_container;
+    let updatedAttachments = attachments.map((attachment) => {
+      return attachment.thumb ? AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then((result) => {
+        if (result != null) {
+          attachment.preview = `data:image/png;base64,${result}`;
+        }
+        return attachment;
+      }) : attachment;
+    });
+
+    Promise.all(updatedAttachments).then((attachments) => {
+      dataset_container.attachments = attachments;
+
+      this.setState({
+        dataset_container: dataset_container
+      });
+    });
+  }
+
+  handleInputChange(type, event) {
+    const { dataset_container } = this.state;
+    const { value } = event.target;
+    switch (type) {
+      case 'name':
+        dataset_container.name = value;
+        break;
+      case 'instrument':
+        dataset_container.extended_metadata['instrument'] = value;
+        break;
+      case 'description':
+        dataset_container.description = value;
+        break;
+      case 'dataset':
+        dataset_container.dataset = value;
+        break;
+    }
+    this.setState({ dataset_container });
+  }
+
+  handleFileDrop(files) {
+    const { dataset_container } = this.state;
+    let attachments = files.map(f => Attachment.fromFile(f))
+    let first_attach = dataset_container.attachments.length == 0
+    dataset_container.attachments = dataset_container.attachments.concat(attachments)
+    if (first_attach) {
+      let attachment_list = dataset_container.attachments;
+      let attach_name = attachment_list[attachment_list.length - 1].filename;
+      let splitted = attach_name.split('.');
+      if (splitted.length > 1) {
+        splitted.splice(-1, 1);
+        attach_name = splitted.join('.');
+      }
+      dataset_container.name = attach_name;
+    }
+    this.setState({ dataset_container });
+  }
+
+  handleAttachmentDownload(attachment) {
+    const {currentUser} = UserStore.getState()
+    if (!currentUser) {
+      Utils.downloadFile({ contents: `/api/v1/public/download/attachment?id=${attachment.id}` });
+    } else {
+      Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
+    }
+  }
+
+  handleAttachmentRemove(attachment) {
+    const { dataset_container } = this.state;
+    const index = dataset_container.attachments.indexOf(attachment);
+    dataset_container.attachments[index].is_deleted = true;
+    this.setState({ dataset_container });
+  }
+
+  handleAttachmentBackToInbox(attachment) {
+    const { onChange } = this.props;
+    const { dataset_container } = this.state;
+    const index = dataset_container.attachments.indexOf(attachment);
+    if (index != -1) {
+      InboxActions.backToInbox(attachment);
+      dataset_container.attachments.splice(index, 1);
+      onChange(dataset_container);
+    }
+  }
+
+  handleUndo(attachment) {
+    const { dataset_container } = this.state;
+    const index = dataset_container.attachments.indexOf(attachment);
+
+    dataset_container.attachments[index].is_deleted = false;
+    this.setState({ dataset_container });
+  }
+
+  handleSave() {
+    const { dataset_container } = this.state;
+    const { onChange, onModalHide } = this.props;
+    onChange(dataset_container);
+    onModalHide();
+  }
+
+  listGroupItem(attachment) {
+    const { disabled } = this.props;
+    const preview = (attachment.preview ? (<tr><td rowSpan="2" width="128"><img src={attachment.preview} alt="" /></td></tr>) : (
+      <tr><td rowSpan="2" width="128"><img style={{ width: '128px', display: 'block' }} alt="" /></td></tr>
+    ));
+    if (attachment.is_deleted) {
+      return (
+        <Table className="borderless" style={{ marginBottom: 'unset' }}>
+          <tbody>
+            {preview}
+            <tr>
+              <td style={{ verticalAlign: 'middle' }}>
+                <strike>{attachment.filename}</strike><br />
+                <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(attachment)} disabled={disabled}>
+                  <i className="fa fa-undo" aria-hidden="true" />
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+      );
+    }
+    return (
+      <Table className="borderless" style={{ marginBottom: 'unset' }}>
+        <tbody>
+          {preview}
+          <tr>
+            <td style={{ verticalAlign: 'middle' }}>
+              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a><br />
+              {this.removeAttachmentButton(attachment)} &nbsp;
+              {this.attachmentBackToInboxButton(attachment)}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+
+  attachments() {
+    const { dataset_container } = this.state;
+    if (dataset_container.attachments && dataset_container.attachments.length > 0) {
+      return (
+        <div className="list">
+          <ListGroup>
+            {
+              dataset_container.attachments.map((attachment) => {
+                return (
+                  <ListGroupItem key={attachment.id} style={{ margin: 'unset', padding: 'unset' }}>
+                    {this.listGroupItem(attachment)}
+                  </ListGroupItem>
+                );
+              })
+            }
+          </ListGroup>
+        </div>
+      );
+    }
+    return (
+      <div style={{ padding: 15 }}>
+        There are currently no Datasets.<br />
+      </div>
+    );
+  }
+
+  removeAttachmentButton(attachment) {
+    const { readOnly, disabled } = this.props;
+    if (!readOnly && !disabled) {
+      return (
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove(attachment)}>
+          <i className="fa fa-trash-o" />
+        </Button>
+      );
+    }
+  }
+
+  attachmentBackToInboxButton(attachment) {
+    const { readOnly } = this.props;
+    if (!readOnly && !attachment.is_new) {
+      return (
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentBackToInbox(attachment)}>
+          <i className="fa fa-backward" />
+        </Button>
+      );
+    }
+  }
+
+  dropzone() {
+    const { readOnly, disabled } = this.props;
+    if (!readOnly && !disabled) {
+      return (
+        <Dropzone
+          onDrop={files => this.handleFileDrop(files)}
+          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
+        >
+          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
+            Drop Files, or Click to Select.
+          </div>
+        </Dropzone>
+      );
+    }
+  }
+
+
+  resetInstrumentComponent() {
+    const { dataset_container } = this.state;
+    this.setState({
+      value: '',
+      showInstruments: false,
+      instruments: null,
+      valueBeforeFocus: null,
+      error: ''
+    });
+    dataset_container.extended_metadata['instrument'] = '';
+  }
+
+  doneInstrumentTyping() {
+    const { value } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+    } else {
+      this.fetchInstruments(value);
+    }
+  }
+
+  fetchInstruments(value, show = true) {
+    const debounced = debounce(function (query) {
+      return InstrumentsFetcher.fetchInstrumentsForCurrentUser(query)
+    }, 200);
+    debounced(value).then((result) => {
+      const newState = {};
+      if (result.length > 0) {
+        newState.instruments = result;
+        newState.showInstruments = show;
+      } else {
+        newState.instruments = null;
+        newState.error = '';
+        newState.showInstruments = false;
+      }
+      this.setState(newState);
+    }).catch(error => console.log(error));
+  }
+
+  handleInstrumentValueChange(event, doneInstrumentTyping) {
+    const { value } = event.target;
+    const { timeoutReference } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+      return;
+    }
+    if (timeoutReference) {
+      clearTimeout(timeoutReference);
+    }
+    this.setState({
+      value,
+      timeoutReference: setTimeout(function () {
+        doneInstrumentTyping()
+      }, this.timeout)
+    });
+    this.handleInputChange('instrument', event);
+  }
+
+  selectInstrument() {
+    const { dataset_container, timeoutReference, value } = this.state;
+
+    this.setState({
+      showInstruments: false,
+      valueBeforeFocus: null
+    })
+
+    if (!value || value.trim() === '') {
+      this.setState({ value: '' });
+      return 0;
+    }
+    dataset_container.extended_metadata.instrument = value;
+    clearTimeout(timeoutReference);
+    return value;
+  }
+
+  focusInstrument(newFocus) {
+    const { instruments, valueBeforeFocus } = this.state;
+    const newState = {}
+    if (!valueBeforeFocus) {
+      newState.valueBeforeFocus = instruments[newFocus].name;
+    }
+    newState.value = instruments[newFocus].name;
+    this.setState(newState);
+  }
+
+  abortAutoSelection() {
+    const { valueBeforeFocus } = this.state;
+    this.setState({
+      value: valueBeforeFocus,
+      valueBeforeFocus: null,
+    })
+  }
+
+  renderInstruments() {
+    const { instruments, error } = this.state;
+
+    if (instruments) {
+      return (
+        <div>
+          {instruments.map((instrument, index) => {
+            return (
+              <ListGroupItem
+                onClick={() => this.selectInstrument()}
+                onMouseEnter={() => this.focusInstrument(index)}
+                key={'instrument_' + index}
+                ref={'instrument_' + index}
+                header={instrument.name}
+              />
+            )
+          })}
+        </div>
+      );
+    } else if (error) {
+      return <ListGroupItem>{error}</ListGroupItem>;
+    }
+    return (<div />);
+  }
+
+  handleAddLink(link) {
+    const { dataset_container } = this.state;
+    if (dataset_container.extended_metadata['hyperlinks'] == null) {
+      dataset_container.extended_metadata['hyperlinks'] = [link];
+    } else {
+      dataset_container.extended_metadata['hyperlinks'].push(link);
+    }
+    this.setState({ dataset_container });
+  }
+
+  handleRemoveLink(link) {
+    const { dataset_container } = this.state;
+    var index = dataset_container.extended_metadata['hyperlinks'].indexOf(link);
+    if (index !== -1) {
+      dataset_container.extended_metadata['hyperlinks'].splice(index, 1);
+    }
+    this.setState({ dataset_container });
+  }
+
+  render() {
+    const { dataset_container, showInstruments } = this.state;
+    const { readOnly, disabled, kind } = this.props;
+    const overlayAttributes = {
+      style: {
+        position: 'absolute', width: 300, marginTop: 144, marginLeft: 17
+      }
+    };
+    const termId = absOlsTermId(kind);
+    const klasses = (UserStore.getState() && UserStore.getState().dsKlasses) || [];
+    let klass = {};
+    const idx = findIndex(klasses, o => o.ols_term_id === termId);
+    if (idx > -1) { klass = klasses[idx]; }
+
+    if (dataset_container.dataset && dataset_container.dataset.id) {
+      dataset_container.dataset = dataset_container.dataset;
+    } else if (klass.ols_term_id !== undefined) {
+      dataset_container.dataset = GenericDS.buildEmpty(cloneDeep(klass), dataset_container.id);
+    }
+
+    return (
+      <Row>
+        <Col md={6} className="col-base">
+          <FormGroup controlId="datasetName">
+            <ControlLabel>Name</ControlLabel>
+            <FormControl
+              type="text"
+              value={dataset_container.name || ''}
+              disabled={readOnly || disabled}
+              onChange={event => this.handleInputChange('name', event)}
+            />
+          </FormGroup>
+          <FormGroup controlId="datasetInstrument">
+            <ControlLabel>Instrument</ControlLabel>
+            <FormControl
+              type="text"
+              value={dataset_container.extended_metadata['instrument'] || ''}
+              disabled={readOnly || disabled}
+              onChange={event => this.handleInstrumentValueChange(event, this.doneInstrumentTyping)}
+              ref={(input) => { this.autoComplete = input; }}
+              autoComplete="off"
+            />
+            <Overlay
+              placement="bottom"
+              style={{
+                marginTop: 80, width: 398, height: 10, maxHeight: 20
+              }}
+              show={showInstruments}
+              container={this}
+              rootClose
+              onHide={() => this.abortAutoSelection()}
+            >
+              <ChildOverlay
+                dataList={this.renderInstruments()}
+                overlayAttributes={overlayAttributes}
+              />
+            </Overlay>
+          </FormGroup>
+          <FormGroup controlId="datasetDescription">
+            <ControlLabel>Description</ControlLabel>
+            <FormControl
+              componentClass="textarea"
+              value={dataset_container.description || ''}
+              disabled={readOnly || disabled}
+              onChange={event => this.handleInputChange('description', event)}
+              rows={4}
+            />
+          </FormGroup>
+          <GenericDSDetails
+            kind={kind}
+            genericDS={dataset_container.dataset}
+            klass={klass}
+            onChange={this.handleInputChange}
+          />
+        </Col>
+        <Col md={6} className="col-full">
+          <label>Attachments: </label>
+          {this.dropzone()}
+          {this.attachments()}
+          <HyperLinksSection data={dataset_container.extended_metadata['hyperlinks']} onAddLink={this.handleAddLink} onRemoveLink={this.handleRemoveLink}
+          disabled={disabled}></HyperLinksSection>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/components/ContainerDatasetField.js b/app/packs/src/components/ContainerDatasetField.js
new file mode 100644
index 000000000..35580b052
--- /dev/null
+++ b/app/packs/src/components/ContainerDatasetField.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonToolbar } from 'react-bootstrap';
+import { DropTarget } from 'react-dnd';
+import InboxActions from './actions/InboxActions';
+import DragDropItemTypes from './DragDropItemTypes';
+import AttachmentFetcher from './fetchers/AttachmentFetcher';
+import { GenericDSMisType, absOlsTermId } from '../admin/generic/Utils';
+import PublicFetcher from './fetchers/PublicFetcher';
+
+const dataTarget = {
+  canDrop(props, monitor) {
+    const itemType = monitor.getItemType();
+    if(itemType == DragDropItemTypes.DATA ||
+      itemType == DragDropItemTypes.UNLINKED_DATA ||
+      itemType == DragDropItemTypes.DATASET){
+      return true;
+    }
+  },
+
+  drop(props, monitor) {
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    const {dataset_container, onChange} = props;
+
+    switch (itemType) {
+      case DragDropItemTypes.DATA:
+        dataset_container.attachments.push(item.attachment)
+        onChange(dataset_container)
+        InboxActions.removeAttachmentFromList(item.attachment)
+        break;
+      case DragDropItemTypes.UNLINKED_DATA:
+        dataset_container.attachments.push(item.attachment)
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        break;
+      case DragDropItemTypes.DATASET:
+        item.dataset.attachments.forEach(attachment => {
+          dataset_container.attachments.push(attachment)
+        })
+        onChange(dataset_container)
+        InboxActions.removeDatasetFromList(item.dataset)
+        break;
+    }
+
+  }
+};
+
+const collectTarget = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class ContainerDatasetField extends Component{
+
+  removeButton(dataset_container) {
+    const {readOnly, handleRemove, disabled} = this.props;
+    if(!readOnly) {
+      return (
+        <Button bsSize="xsmall"
+                bsStyle="danger"
+                onClick={() => handleRemove(dataset_container)}
+                disabled={disabled}>
+          <i className="fa fa-trash-o"></i>
+        </Button>
+      );
+    }
+  }
+
+  renderOverlay(color) {
+      return (
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: '100%',
+          zIndex: 1,
+          opacity: 0.5,
+          backgroundColor: color,
+        }} />
+      );
+    }
+
+  render() {
+    const {connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
+            handleModalOpen, disabled} = this.props;
+    const downloadClick = isPublic ? () => PublicFetcher.downloadZip(dataset_container.id) : () => AttachmentFetcher.downloadZip(dataset_container.id);
+
+    if(dataset_container.is_deleted){
+      return (
+        <div><strike>{dataset_container.name}</strike>
+
+            <Button
+              className="pull-right"
+              bsSize="xsmall"
+              bsStyle="danger"
+              onClick={() => handleUndo(dataset_container)}
+              disabled={disabled}
+            >
+              <i className="fa fa-undo"></i>
+            </Button>
+
+        </div>
+      )
+    }else{
+      return connectDropTarget(
+        <div>
+          {dataset_container.dataset && dataset_container.dataset.klass_ols !== absOlsTermId(kind) ? <GenericDSMisType /> : null}
+        <a style={{cursor: 'pointer'}} onClick={() => handleModalOpen(dataset_container)}>
+          {dataset_container.name || 'new'}
+        </a>
+        <ButtonToolbar className="pull-right">
+          <Button bsSize="xsmall" bsStyle="info" onClick={downloadClick}>
+            <i className="fa fa-download"></i>
+          </Button>
+          {this.removeButton(dataset_container)}
+        </ButtonToolbar>
+        {isOver && canDrop && this.renderOverlay('green')}
+        </div>
+      )
+    }
+  }
+}
+
+export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(ContainerDatasetField);
+
+ContainerDatasetField.propTypes = {
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  isPublic: PropTypes.bool
+};
+
+ContainerDatasetField.defaultProps = { isPublic: false };
diff --git a/app/packs/src/components/ContainerDatasetModal.js b/app/packs/src/components/ContainerDatasetModal.js
new file mode 100644
index 000000000..8e3675cef
--- /dev/null
+++ b/app/packs/src/components/ContainerDatasetModal.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { Modal, ButtonToolbar, Button } from 'react-bootstrap';
+import ContainerDataset from './ContainerDataset';
+
+export default class ContainerDatasetModal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.datasetInput = React.createRef();
+    this.handleSave = this.handleSave.bind(this);
+  }
+
+  handleSave() {
+    this.datasetInput.current.handleSave();
+  }
+
+  render() {
+    const {
+      show, dataset_container, onHide, onChange, readOnly, disabled, kind
+    } = this.props;
+    if (show) {
+      return (
+        <Modal show={show} backdrop="static" bsSize="large" dialogClassName="attachment-dataset-modal" onHide={() => (disabled ? onHide() : this.handleSave())}>
+          <Modal.Header>
+            <Modal.Title>
+              {dataset_container.name}
+              <ButtonToolbar>
+                <Button bsStyle="light" onClick={() => (disabled ? onHide() : this.handleSave())}>
+                  <i className="fa fa-times" />
+                </Button>
+              </ButtonToolbar>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ContainerDataset
+              ref={this.datasetInput}
+              readOnly={readOnly}
+              dataset_container={dataset_container}
+              kind={kind}
+              onModalHide={() => onHide()}
+              onChange={dataset_container => onChange(dataset_container)}
+            />
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return <div />;
+  }
+}
diff --git a/app/packs/src/components/ContainerDatasets.js b/app/packs/src/components/ContainerDatasets.js
new file mode 100644
index 000000000..71fff7f14
--- /dev/null
+++ b/app/packs/src/components/ContainerDatasets.js
@@ -0,0 +1,179 @@
+import React, { Component } from 'react';
+// import PropTypes from 'prop-types';
+import { ListGroup, ListGroupItem, Button, Well } from 'react-bootstrap';
+import ContainerDatasetModal from './ContainerDatasetModal';
+import ContainerDatasetField from './ContainerDatasetField';
+import Container from './models/Container';
+import AttachmentDropzone from './AttachmentDropzone';
+
+export default class ContainerDatasets extends Component {
+  constructor(props) {
+    super(props);
+    const { container } = props;
+    this.state = {
+      container,
+      modal: {
+        show: false,
+        dataset_container: null
+      }
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    })
+  }
+
+  handleModalOpen(dataset_container) {
+    const {modal} = this.state;
+    modal.dataset_container = dataset_container;
+    modal.show = true;
+    this.setState({modal});
+  }
+
+  handleAdd(){
+    const {container} = this.state;
+    let dataset_container = Container.buildEmpty();
+    dataset_container.container_type = "dataset";
+
+    container.children.push(dataset_container);
+
+    this.handleModalOpen(dataset_container);
+    this.props.onChange(container);
+
+  }
+
+  handleAddWithAttachments(attachments){
+    const {container} = this.state;
+    let dataset_container = Container.buildEmpty();
+    dataset_container.container_type = "dataset";
+
+    attachments.forEach(attachment => {
+      dataset_container.attachments.push(attachment)
+    })
+    container.children.push(dataset_container);
+
+    this.handleModalOpen(dataset_container);
+    this.props.onChange(container);
+
+  }
+
+  handleRemove(dataset_container) {
+    let {container} = this.state;
+
+    dataset_container.is_deleted = true;
+    this.props.onChange(container);
+  }
+
+  handleUndo(dataset_container) {
+    let {container} = this.state;
+
+    dataset_container.is_deleted = false;
+    this.props.onChange(container);
+  }
+
+  handleChange(dataset_container){
+    let {container} = this.state;
+
+    container.children.find(dataset => {
+      if(dataset.id == dataset_container.id) {
+        const datasetId = container.children.indexOf(dataset);
+        container.children[datasetId] = dataset_container;
+      }
+    });
+
+    this.props.onChange(container);
+  }
+
+  handleModalHide() {
+    const {modal} = this.state;
+    modal.show = false;
+    modal.dataset_container = null;
+    this.setState({modal});
+    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
+    document.body.className = document.body.className.replace('modal-open', '');
+  }
+
+  addButton() {
+    const {readOnly, disabled} = this.props;
+
+    if(!readOnly && !disabled) {
+      return (
+        <div className="pull-right" style={{marginTop: 5, marginBottom: 5}}>
+          <Button bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
+            <i className="fa fa-plus"></i>
+          </Button>
+        </div>
+      )
+    }
+  }
+
+
+
+  render() {
+    const {container, modal} = this.state;
+    const {readOnly, disabled} = this.props;
+
+    if(container.children.length > 0) {
+      const kind = container.extended_metadata && container.extended_metadata.kind;
+      return (
+        <div>
+          <Well style={{minHeight: 70, padding: 5, paddingBottom: 31}}>
+            <ListGroup style={{marginBottom: 0}}>
+              {container.children.map((dataset_container, key) => {
+                return (
+                  <ListGroupItem key={key}>
+                    <ContainerDatasetField
+                      kind={kind}
+                      dataset_container={dataset_container}
+                      onChange={() => this.handleChange(dataset_container)}
+                      handleRemove={() => this.handleRemove(dataset_container)}
+                      handleUndo={() => this.handleUndo(dataset_container)}
+                      handleModalOpen={() => this.handleModalOpen(dataset_container)}
+                      disabled={disabled}
+                    />
+                  </ListGroupItem>
+                )
+              })}
+              <ListGroupItem key="attachmentdropzone" disabled>
+              {!readOnly && !disabled
+                ? <AttachmentDropzone
+                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
+                  />
+                : null}
+              </ListGroupItem>
+            </ListGroup>
+            {this.addButton()}
+          </Well>
+          <ContainerDatasetModal
+            onHide={() => this.handleModalHide()}
+            onChange={dataset_container => this.handleChange(dataset_container)}
+            kind={kind}
+            show={modal.show}
+            readOnly={this.props.readOnly}
+            dataset_container={modal.dataset_container}
+            analysisContainer={modal.analysisContainer}
+            disabled={disabled}
+            />
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Well style={{minHeight: 70, padding: 5, paddingBottom: 31}}>
+            <p>There are currently no Datasets.</p>
+            <ListGroup style={{marginBottom: 0}}>
+              <ListGroupItem key="attachmentdropzone" disabled>
+                <AttachmentDropzone
+                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
+                />
+              </ListGroupItem>
+            </ListGroup>
+            {this.addButton()}
+          </Well>
+        </div>
+      )
+    }
+  }
+}
diff --git a/app/packs/src/components/DetailsTabLiteratures.js b/app/packs/src/components/DetailsTabLiteratures.js
new file mode 100644
index 000000000..42b56250d
--- /dev/null
+++ b/app/packs/src/components/DetailsTabLiteratures.js
@@ -0,0 +1,306 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ListGroup, ListGroupItem, Button, Row, Col, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+import Immutable from 'immutable';
+import { Citation, doiValid, sanitizeDoi, groupByCitation, AddButton, LiteratureInput, LiteralType } from './LiteratureCommon';
+import Sample from './models/Sample';
+import Reaction from './models/Reaction';
+import ResearchPlan from './models/ResearchPlan';
+import Literature from './models/Literature';
+import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
+import UserStore from './stores/UserStore';
+import NotificationActions from './actions/NotificationActions';
+import LoadingActions from './actions/LoadingActions';
+import CitationPanel from './CitationPanel';
+import { CitationTypeMap } from './CitationType';
+
+const Cite = require('citation-js');
+require('@citation-js/plugin-isbn');
+
+const notification = message => ({
+  title: 'Add Literature', message, level: 'error', dismissible: 'button', autoDismiss: 5, position: 'tr', uid: uuid.v4()
+});
+
+const clipboardTooltip = () => (
+  <Tooltip id="assign_button">copy to clipboard</Tooltip>
+);
+
+const sameConseqLiteratureId = (citations, sortedIds, i) => {
+  if (i === 0) { return false; }
+  const a = citations.get(sortedIds[i])
+  const b = citations.get(sortedIds[i-1])
+  return (a.id === b.id)
+};
+
+const checkElementStatus = (element) => {
+  const type = element.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  if (element.isNew) {
+    NotificationActions.add(notification(`Create ${type} first.`));
+    return false;
+  }
+  const isPub = !!(element.publication && element.publication.state === 'completed');
+  if (isPub) {
+    NotificationActions.add(notification('Already published. This data can not be changed.'));
+    return false;
+  }
+  return true;
+};
+
+export default class DetailsTabLiteratures extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      literature: Literature.buildEmpty(),
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+    };
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleTypeUpdate = this.handleTypeUpdate.bind(this);
+    this.handleLiteratureAdd = this.handleLiteratureAdd.bind(this);
+    this.handleLiteratureRemove = this.handleLiteratureRemove.bind(this);
+    this.fetchDOIMetadata = this.fetchDOIMetadata.bind(this);
+    this.fetchISBNMetadata = this.fetchISBNMetadata.bind(this);
+    this.fetchMetadata = this.fetchMetadata.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.literatures && this.props.literatures.size > 0) {
+      const sortedIds = groupByCitation(this.props.literatures);
+      this.setState(prevState => ({
+        ...prevState,
+        literatures: this.props.literatures,
+        sortedIds,
+        sorting: 'literature_id'
+      }));
+    } else {
+      LiteraturesFetcher.fetchElementReferences(this.props.element).then((literatures) => {
+        const sortedIds = groupByCitation(literatures);
+        this.setState(prevState => ({
+          ...prevState,
+          literatures,
+          sortedIds,
+          sorting: 'literature_id'
+        }));
+      });
+    }
+  }
+
+  handleInputChange(type, event) {
+    const { literature } = this.state;
+    const { value } = event.target;
+    literature[type] = value.trim();
+    this.setState(prevState => ({ ...prevState, literature }));
+  }
+
+  handleTypeUpdate(updId, rType) {
+    const { element } = this.props;
+    if (!checkElementStatus(element)) { return; }
+    LoadingActions.start();
+    const params = {
+      element_id: element.id, element_type: element.type, id: updId, litype: rType
+    };
+    LiteraturesFetcher.updateReferenceType(params)
+      .then((literatures) => {
+        this.setState({ literatures, sortedIds: groupByCitation(literatures), sorting: 'literature_id' }, LoadingActions.stop());
+      });
+  }
+
+  handleLiteratureRemove(literature) {
+    const { element } = this.props;
+    if (!checkElementStatus(element)) { return; }
+    if (isNaN(element.id) && element.type === 'reaction') {
+      this.setState(prevState => ({
+        ...prevState,
+        literatures: prevState.literatures.delete(literature.literal_id),
+        sortedIds: groupByCitation(prevState.literatures.delete(literature.literal_id))
+      }));
+      if (element.type === 'reaction') {
+        element.literatures = element.literatures && element.literatures.delete(literature.literal_id);
+        this.setState({
+          reaction: element
+        });
+      }
+    } else {
+      LiteraturesFetcher.deleteElementReference({ element, literature })
+        .then(() => {
+          this.setState(prevState => ({
+            ...prevState,
+            literatures: prevState.literatures.delete(literature.literal_id),
+            sortedIds: groupByCitation(prevState.literatures.delete(literature.literal_id))
+          }));
+        }).catch((errorMessage) => {
+          NotificationActions.add(notification(errorMessage.error));
+        });
+    }
+  }
+
+  handleLiteratureAdd(literature) {
+    const { element } = this.props;
+    if (!checkElementStatus(element)) { return; }
+    const {
+      doi, url, title, isbn
+    } = literature;
+    if (element.isNew === true && element.type === 'reaction'
+    && element.literatures && element.literatures.size > 0) {
+      const newlit = {
+        ...literature,
+        doi: sanitizeDoi(doi),
+        url: url.trim().replace(/ +/g, ' '),
+        title: title.trim().replace(/ +/g, ' '),
+        isbn
+      };
+      const objliterature = new Literature(newlit);
+      element.literatures = element.literatures.set(objliterature.id, objliterature);
+      this.setState(prevState => ({
+        ...prevState,
+        literature: Literature.buildEmpty(),
+        literatures: prevState.literatures.set(objliterature.id, objliterature),
+        sortedIds: groupByCitation(prevState.literatures.set(objliterature.id, objliterature))
+      }));
+    } else {
+      LiteraturesFetcher.postElementReference({
+        element,
+        literature: {
+          ...literature,
+          doi: sanitizeDoi(doi),
+          url: url.trim().replace(/ +/g, ' '),
+          title: title.trim().replace(/ +/g, ' '),
+          isbn
+        },
+      }).then((literatures) => {
+        this.setState(() => ({
+          literature: Literature.buildEmpty(),
+          literatures,
+          sortedIds: groupByCitation(literatures),
+          sorting: 'literature_id'
+        }));
+      }).catch((errorMessage) => {
+        NotificationActions.add(notification(errorMessage.error));
+        this.setState({ literature: Literature.buildEmpty() });
+      });
+    }
+  }
+
+  fetchMetadata() {
+    const { element } = this.props;
+    if (!checkElementStatus(element)) { return; }
+    const { doi_isbn } = this.state.literature;
+    if (doiValid(doi_isbn)) {
+      this.fetchDOIMetadata(doi_isbn);
+    } else {
+      this.fetchISBNMetadata(doi_isbn);
+    }
+  }
+
+  fetchDOIMetadata(doi) {
+    NotificationActions.removeByUid('literature');
+    LoadingActions.start();
+    Cite.async(sanitizeDoi(doi)).then((json) => {
+      LoadingActions.stop();
+      if (json.data && json.data.length > 0) {
+        const data = json.data[0];
+        const citation = new Cite(data);
+        this.setState(prevState => ({
+          ...prevState,
+          literature: {
+            ...prevState.literature,
+            doi,
+            title: data.title || '',
+            year: (data && data.issued && data.issued['date-parts'][0]) || '',
+            refs: { citation, bibtex: citation.format('bibtex') }
+          }
+        }));
+        this.handleLiteratureAdd(this.state.literature);
+      }
+    }).catch((errorMessage) => {
+      LoadingActions.stop();
+      NotificationActions.add(notification(`unable to fetch metadata for this doi: ${doi}, error: ${errorMessage}`));
+    });
+  }
+
+  fetchISBNMetadata(isbn) {
+    NotificationActions.removeByUid('literature');
+    LoadingActions.start();
+    Cite.async(isbn).then((json) => {
+      LoadingActions.stop();
+      if (json.data && json.data.length > 0) {
+        const data = json.data[0];
+        const citation = new Cite(data);
+        this.setState(prevState => ({
+          ...prevState,
+          literature: {
+            ...prevState.literature,
+            isbn,
+            title: data.title || '',
+            year: (data && data.issued && data.issued['date-parts'][0]) || '',
+            url: (data && data.URL) || '',
+            refs: { citation, bibtex: citation.format('bibtex') }
+          }
+        }));
+        this.handleLiteratureAdd(this.state.literature);
+      }
+    }).catch((errorMessage) => {
+      LoadingActions.stop();
+      NotificationActions.add(notification(`unable to fetch metadata for this ISBN: ${isbn}, error: ${errorMessage}`));
+    });
+  }
+
+  render() {
+    const { literature, literatures, sortedIds } = this.state;
+    const { currentUser } = UserStore.getState();
+    return (
+      <ListGroup fill="true">
+        <ListGroupItem style={{ border: 'unset' }}>
+          <Row>
+            <Col md={8} style={{ paddingRight: 0 }}>
+              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="doi_isbn" placeholder="DOI: 10.... or  http://dx.doi.org/10... or 10. ... or ISBN: 978 ..." />
+            </Col>
+            <Col md={3} style={{ paddingRight: 0 }}>
+              <LiteralType handleInputChange={this.handleInputChange} disabled={false} val={literature.litype} />
+            </Col>
+            <Col md={1} style={{ paddingRight: 0 }}>
+              <Button
+                bsStyle="success"
+                bsSize="small"
+                style={{ marginTop: 2 }}
+                onClick={this.fetchMetadata}
+                title="fetch metadata for this doi or ISBN(open services) and add citation to selection"
+                disabled={!(doiValid(literature.doi_isbn || '') || /^[0-9]([0-9]|-(?!-))+$/.test(literature.doi_isbn || ''))}
+              >
+                <i className="fa fa-plus" aria-hidden="true" />
+              </Button>
+            </Col>
+            <Col md={12} style={{ paddingRight: 0 }}>
+              <Citation literature={literature} />
+            </Col>
+            <Col md={7} style={{ paddingRight: 0 }}>
+              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="title" placeholder="Title..." />
+            </Col>
+            <Col md={4} style={{ paddingRight: 0 }}>
+              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="url" placeholder="URL..." />
+            </Col>
+            <Col md={1}>
+              <AddButton onLiteratureAdd={this.handleLiteratureAdd} literature={literature} />
+            </Col>
+          </Row>
+        </ListGroupItem>
+        <ListGroupItem style={{ border: 'unset' }}>
+          {
+            Object.keys(CitationTypeMap).map(e => <CitationPanel key={`_citation_panel_${e}`} title={e} fnDelete={this.handleLiteratureRemove} sortedIds={sortedIds} rows={literatures} uid={currentUser && currentUser.id} fnUpdate={this.handleTypeUpdate} />)
+          }
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+}
+
+DetailsTabLiteratures.propTypes = {
+  element: PropTypes.oneOfType([
+    PropTypes.instanceOf(ResearchPlan),
+    PropTypes.instanceOf(Reaction),
+    PropTypes.instanceOf(Sample)
+  ]).isRequired,
+  literatures: PropTypes.array
+};
diff --git a/app/packs/src/components/DetailsTabMetadata.js b/app/packs/src/components/DetailsTabMetadata.js
new file mode 100644
index 000000000..086efd8e3
--- /dev/null
+++ b/app/packs/src/components/DetailsTabMetadata.js
@@ -0,0 +1,526 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel,
+  ControlLabel,
+  Form,
+  FormControl,
+  FormGroup,
+  Button,
+  Row,
+  Col
+} from 'react-bootstrap';
+import ResearchPlansFetcher from './fetchers/ResearchPlansFetcher';
+
+require('@citation-js/plugin-isbn');
+
+export default class ResearchPlansMetadata extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      researchPlan: {},
+      researchPlanMetadata: {
+        title: '',
+        subject: '',
+        format: '',
+        version: '',
+        state: '',
+        url: '',
+        landing_page: '',
+        alternate_identifier: [],
+        related_identifier: [],
+        description: [],
+        dates: [],
+        geo_location: [],
+        funding_reference: []
+      }
+    };
+  }
+
+
+  componentDidMount() {
+    const { parentResearchPlan, parentResearchPlanMetadata } = this.props;
+    this.setState({
+      researchPlan: parentResearchPlan
+    });
+    if (parentResearchPlanMetadata) {
+      this.setState({
+        researchPlanMetadata: parentResearchPlanMetadata
+      });
+    }
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { parentResearchPlan, parentResearchPlanMetadata } = nextProps;
+    this.setState({
+      researchPlan: parentResearchPlan,
+      researchPlanMetadata: parentResearchPlanMetadata
+    });
+  }
+
+  handleFieldChange(event) {
+    const { researchPlanMetadata } = this.state;
+
+    researchPlanMetadata[event.target.id] = event.target.value;
+
+    this.setState({ researchPlanMetadata });
+  }
+
+  saveResearchPlanMetadata() {
+    const { researchPlan, researchPlanMetadata } = this.state;
+
+    ResearchPlansFetcher.postResearchPlanMetadata({
+
+      research_plan_id: researchPlan.id,
+      title: researchPlanMetadata.title.trim(),
+      subject: researchPlanMetadata.subject.trim(),
+      alternate_identifier: researchPlanMetadata.alternate_identifier,
+      related_identifier: researchPlanMetadata.related_identifier,
+      description: researchPlanMetadata.description,
+
+      format: this.format.value.trim(),
+      version: this.version.value.trim(),
+      geo_location: this.state.researchPlanMetadata.geo_location,
+      funding_reference: this.state.researchPlanMetadata.funding_reference,
+
+      url: this.url.value.trim(),
+      landing_page: this.landing_page.value.trim()
+
+    }).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      } else if (result.research_plan_metadata) {
+        this.setState({
+          researchPlanMetadata: result.research_plan_metadata
+        })
+      }
+    });
+  }
+
+  updateResearchPlanMetadataDataCiteState(value) {
+    this.setState(state => {
+      const researchPlanMetadata = state.researchPlanMetadata
+      researchPlanMetadata.data_cite_state = value
+
+      return {
+        researchPlanMetadata
+      }
+    })
+  }
+
+  newItemByType(type) {
+    switch (type) {
+      case 'alternate_identifier':
+        return { alternateIdentifier: '', alternateIdentifierType: '' }
+      case 'related_identifier':
+        return { relatedIdentifier: '', relatedIdentifierType: '' }
+      case 'description':
+        return { description: '', descriptionType: '' }
+      case 'geo_location':
+        return { geoLocationPoint: { latitude: '', longitude: '' } }
+      case 'funding_reference':
+        return { funderName: '', funderIdentifier: '' }
+    }
+  }
+
+  addResearchPlanMetadataArrayItem(type) {
+    this.setState(state => {
+      const newItem = this.newItemByType(type)
+
+      const researchPlanMetadata = state.researchPlanMetadata
+      const currentCollection = researchPlanMetadata[type] ? researchPlanMetadata[type] : []
+      const newCollection = currentCollection.concat(newItem)
+      researchPlanMetadata[type] = newCollection
+
+      return researchPlanMetadata
+    })
+  }
+
+  removeResearchPlanMetadataArrayItem(type, index) {
+    this.setState(state => {
+      const researchPlanMetadata = state.researchPlanMetadata
+      const currentCollection = researchPlanMetadata[type] ? researchPlanMetadata[type] : []
+      currentCollection.splice(index, 1)
+
+      researchPlanMetadata[type] = currentCollection
+
+      return researchPlanMetadata
+    })
+  }
+
+  updateResearchPlanMetadataArrayItem(type, index, fieldname, value) {
+    this.setState(state => {
+      const researchPlanMetadata = state.researchPlanMetadata
+      researchPlanMetadata[type][index][fieldname] = value
+
+      return researchPlanMetadata
+    })
+  }
+
+  updateResearchPlanMetadataGeoLocation(index, fieldname, value) {
+    this.setState(state => {
+      const researchPlanMetadata = state.researchPlanMetadata;
+      researchPlanMetadata.geo_location[index]['geoLocationPoint'][fieldname] = value;
+      return researchPlanMetadata;
+    })
+  }
+
+  render() {
+    const { researchPlanMetadata } = this.state;
+    return (
+      <Panel>
+        <Panel.Body>
+          <Form>
+            <FormGroup controlId="title">
+              <ControlLabel>Title</ControlLabel>&nbsp;&nbsp;
+              <FormControl
+                type="text"
+                value={researchPlanMetadata?.title}
+                onChange={event => this.handleFieldChange(event)}
+                placeholder="Title"
+              />
+            </FormGroup>
+            <FormGroup controlId="subject">
+              <ControlLabel>Subject</ControlLabel>&nbsp;&nbsp;
+              <FormControl
+                type="text"
+                value={researchPlanMetadata?.subject}
+                onChange={event => this.handleFieldChange(event)}
+                placeholder="Subject"
+              />
+            </FormGroup>
+
+            <ControlLabel>Alternate Identifiers</ControlLabel>&nbsp;&nbsp;
+            {researchPlanMetadata?.alternate_identifier && researchPlanMetadata?.alternate_identifier.map((alternateIdentifier, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Alternate Identifier</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={alternateIdentifier?.alternateIdentifier}
+                        placeholder="Alternate Identifier"
+                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('alternate_identifier', index, 'alternateIdentifier', event.target.value)}
+                        />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Type</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={alternateIdentifier?.alternateIdentifierType}
+                        placeholder="Type"
+                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('alternate_identifier', index, 'alternateIdentifierType', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={2}>
+                    <ControlLabel>Action</ControlLabel><br/>
+                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('alternate_identifier', index)}>
+                      <i className="fa fa-trash-o" />
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+            <Row>
+              <Col smOffset={0} sm={12}>
+                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('alternate_identifier')}>
+                  <i className="fa fa-plus" />
+                </Button>
+              </Col>
+            </Row>
+
+            <ControlLabel>Related Identifiers</ControlLabel>&nbsp;&nbsp;
+            {researchPlanMetadata?.related_identifier && researchPlanMetadata?.related_identifier.map((relatedIdentifier, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Related Identifier</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={relatedIdentifier?.relatedIdentifier}
+                        placeholder="Related Identifier"
+                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('related_identifier', index, 'relatedIdentifier', event.target.value)}
+                        />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Type</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={relatedIdentifier?.relatedIdentifierType}
+                        placeholder="Type"
+                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('related_identifier', index, 'relatedIdentifierType', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={2}>
+                    <ControlLabel>Action</ControlLabel><br/>
+                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('related_identifier', index)}>
+                      <i className="fa fa-trash-o" />
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+            <Row>
+              <Col smOffset={0} sm={12}>
+                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('related_identifier')}>
+                  <i className="fa fa-plus" />
+                </Button>
+              </Col>
+            </Row>
+
+            <ControlLabel>Descriptions</ControlLabel>&nbsp;&nbsp;
+            {researchPlanMetadata?.description && researchPlanMetadata?.description.map((description, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Description</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={description?.description}
+                        placeholder="Description"
+                        onChange={event => this.updateResearchPlanMetadataArrayItem('description', index, 'description', event.target.value)}
+                        />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Type</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={description?.descriptionType}
+                        placeholder="Type"
+                        onChange={event => this.updateResearchPlanMetadataArrayItem('description', index, 'descriptionType', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={2}>
+                    <ControlLabel>Action</ControlLabel><br/>
+                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('description', index)}>
+                      <i className="fa fa-trash-o" />
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+            <Row>
+              <Col smOffset={0} sm={12}>
+                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('description')}>
+                  <i className="fa fa-plus" />
+                </Button>
+              </Col>
+            </Row>
+
+            <FormGroup controlId="metadataFormFormat">
+              <ControlLabel>Format</ControlLabel>
+              <FormControl
+                type="text"
+                defaultValue={researchPlanMetadata?.format}
+                inputRef={(m) => { this.format = m; }}
+                placeholder="Format"
+              />
+            </FormGroup>
+            <FormGroup controlId="metadataFormVersion">
+              <ControlLabel>Version</ControlLabel>
+              <FormControl
+                type="text"
+                defaultValue={researchPlanMetadata?.version}
+                inputRef={(m) => { this.version = m; }}
+                placeholder="Version"
+              />
+            </FormGroup>
+            <ControlLabel style={{ marginTop: 5 }}>Geolocations</ControlLabel><br />
+            {researchPlanMetadata?.geo_location && researchPlanMetadata?.geo_location.map((locationItem, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Longitude</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={locationItem?.geoLocationPoint?.longitude}
+                        placeholder="Longitude e.g. '71.43703438955458'"
+                        onChange={event => this.updateResearchPlanMetadataGeoLocation(index, 'longitude', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Latitude</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={locationItem?.geoLocationPoint?.latitude}
+                        placeholder="Latitude e.g. '-62.85961569975635'"
+                        onChange={event => this.updateResearchPlanMetadataGeoLocation(index, 'latitude', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={2}>
+                    <ControlLabel>Action</ControlLabel><br/>
+                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('geo_location', index)}>
+                      <i className="fa fa-trash-o" />
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+            <Row>
+              <Col smOffset={0} sm={12}>
+                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('geo_location')}>
+                  <i className="fa fa-plus" />
+                </Button>
+              </Col>
+            </Row>
+
+            <ControlLabel style={{ marginTop: 5 }}>Funding References</ControlLabel>
+            {researchPlanMetadata?.funding_reference && researchPlanMetadata?.funding_reference.map((fundingReferenceItem, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Funder Name</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={fundingReferenceItem?.funderName}
+                        placeholder="Funder Name e.g. 'Gordon and Betty Moore Foundation'"
+                        onChange={event => this.updateResearchPlanMetadataArrayItem('funding_reference', index, 'funderName', event.target.value)}
+                        />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={5}>
+                    <FormGroup>
+                      <ControlLabel>Funder Identifier</ControlLabel>
+                      <FormControl
+                        type="text"
+                        value={fundingReferenceItem?.funderIdentifier}
+                        placeholder="Funder Identifier e.g. 'https://doi.org/10.13039/100000936'"
+                        onChange={event => this.updateResearchPlanMetadataArrayItem('funding_reference', index, 'funderIdentifier', event.target.value)}
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={2}>
+                    <ControlLabel>Action</ControlLabel><br/>
+                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('funding_reference', index)}>
+                      <i className="fa fa-trash-o" />
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+            <Row>
+              <Col smOffset={0} sm={12}>
+                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('funding_reference')}>
+                  <i className="fa fa-plus" />
+                </Button>
+              </Col>
+            </Row>
+
+            <FormGroup controlId="metadataFormState">
+              <ControlLabel>State</ControlLabel>
+              <FormControl
+                componentClass="select"
+                value={researchPlanMetadata?.data_cite_state}
+                onChange={event => this.updateResearchPlanMetadataDataCiteState(event.target.value)}
+                inputRef={(m) => { this.dataCiteState = m; }}
+              >
+                <option value="draft">Draft</option>
+                <option value="registered">Registered</option>
+                <option value="findable">Findable</option>
+              </FormControl>
+            </FormGroup>
+            <FormGroup controlId="metadataFormURL">
+              <ControlLabel>URL</ControlLabel>
+              <FormControl
+                type="text"
+                defaultValue={researchPlanMetadata?.url}
+                inputRef={(m) => { this.url = m; }}
+                placeholder="https://<researchplanmetadata.url>"
+              />
+            </FormGroup>
+            <FormGroup controlId="metadataFormLandingPage">
+              <ControlLabel>Landing Page</ControlLabel>
+              <FormControl
+                type="text"
+                defaultValue={researchPlanMetadata?.landing_page}
+                inputRef={(m) => { this.landing_page = m; }}
+                placeholder="https://<researchplanmetadata.landing.page>"
+              />
+            </FormGroup>
+
+            {/* Disabled Attributes, display only */}
+            <FormGroup controlId="metadataFormDOI">
+              <ControlLabel>DOI</ControlLabel>&nbsp;&nbsp;
+              <FormControl
+                type="text"
+                defaultValue={researchPlanMetadata?.doi}
+                placeholder="DOI"
+                readOnly
+              />
+            </FormGroup>
+            <FormGroup controlId="metadataFormPublicationYear">
+              <ControlLabel>Publication Year</ControlLabel>
+              <FormControl
+                type="number"
+                defaultValue={researchPlanMetadata?.publication_year}
+                inputRef={(m) => { this.publication_year = m; }}
+                placeholder="Publication Year"
+                readOnly
+              />
+            </FormGroup>
+            { researchPlanMetadata?.dates ? <ControlLabel style={{ marginTop: 5 }}>Dates</ControlLabel>: '' }
+            { researchPlanMetadata?.dates && researchPlanMetadata?.dates.map((dateItem, index) => (
+              <div key={index}>
+                <Row>
+                  <Col smOffset={0} sm={6}>
+                    <FormGroup>
+                      <ControlLabel>Date</ControlLabel>
+                      <FormControl
+                        type="text"
+                        defaultValue={dateItem.date}
+                        placeholder="Date"
+                        readOnly
+                        />
+                    </FormGroup>
+                  </Col>
+                  <Col smOffset={0} sm={6}>
+                    <FormGroup>
+                      <ControlLabel>DateType</ControlLabel>
+                      <FormControl
+                        type="text"
+                        defaultValue={dateItem.dateType}
+                        placeholder="DateType"
+                        readOnly
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+              </div>
+            ))}
+
+            <FormGroup>
+              <Button className="pull-right" bsStyle="success" style={{ marginTop: 20 }} onClick={() => this.saveResearchPlanMetadata()}>
+                Save Metadata
+              </Button>
+            </FormGroup>
+
+          </Form>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+ResearchPlansMetadata.propTypes = {
+  parentResearchPlan: PropTypes.object.isRequired,
+  parentResearchPlanMetadata: PropTypes.object
+};
+
diff --git a/app/packs/src/components/DeviceAnalysisDetails.js b/app/packs/src/components/DeviceAnalysisDetails.js
new file mode 100644
index 000000000..9639c69df
--- /dev/null
+++ b/app/packs/src/components/DeviceAnalysisDetails.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import {Panel , ButtonToolbar, Button, OverlayTrigger, Tooltip} from 'react-bootstrap'
+import DeviceSampleContainer from './DeviceSampleContainer'
+import ElementActions from './actions/ElementActions'
+import DetailActions from './actions/DetailActions'
+import AnalysisNMR from './AnalysisNMR'
+
+const DeviceAnalysisDetails = ({analysis, toggleFullScreen}) => {
+  return (
+    <Panel
+      className='panel-detail'
+      bsStyle={analysis.isPendingToSave ? 'info' : 'primary'}
+    >
+      <Panel.Heading>
+        {
+          <Header
+            analysis={analysis}
+            toggleFullScreen={toggleFullScreen}
+          />
+        }
+      </Panel.Heading>
+      <Panel.Body>
+        <MainContent
+          analysis={analysis}
+        />
+      </Panel.Body>
+    </Panel>
+  )
+}
+
+export default DeviceAnalysisDetails
+
+const Header = ({ analysis, toggleFullScreen }) => {
+  return (
+    <div>
+      {analysis.title}
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="closeReaction">Close</Tooltip>}
+      >
+        <Button
+          bsStyle="danger"
+          bsSize="xsmall"
+          className="button-right"
+          onClick={() => DetailActions.close(analysis)}
+        >
+          <i className="fa fa-times" />
+        </Button>
+      </OverlayTrigger>
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
+      >
+        <Button
+          bsStyle="info"
+          bsSize="xsmall"
+          className="button-right"
+          onClick={() => toggleFullScreen()}
+        >
+          <i className="fa fa-expand" />
+        </Button>
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+const MainContent = ({analysis}) => {
+  switch(analysis.analysisType) {
+    case 'NMR':
+      return <AnalysisNMR analysis={analysis} />
+      break
+    default:
+      return <div>Device-Analysis not found!</div>
+  }
+}
diff --git a/app/packs/src/components/DeviceDetails.js b/app/packs/src/components/DeviceDetails.js
new file mode 100644
index 000000000..54ca63dab
--- /dev/null
+++ b/app/packs/src/components/DeviceDetails.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import {Panel, PanelGroup , ButtonToolbar, Button, OverlayTrigger, Tooltip} from 'react-bootstrap'
+import DeviceSampleContainer from './DeviceSampleContainer'
+import ElementActions from './actions/ElementActions'
+import DetailActions from './actions/DetailActions'
+import DeviceManagement from './DeviceManagement'
+
+
+const DeviceDetails = ({device, toggleFullScreen}) => {
+  return (
+    <Panel
+      className='panel-detail'
+      bsStyle={device.isPendingToSave ? 'info' : 'primary'}
+    >
+      <Panel.Heading>
+        {<Header device={device} toggleFullScreen={toggleFullScreen}/>}
+      </Panel.Heading>
+      <Panel.Body>
+      <PanelGroup  defaultActiveKey="0" accordion>
+        <Panel eventKey="1">
+          <Panel.Heading>
+            <Panel.Title toggle>
+              Device Management
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Body collapsible="true">
+            <DeviceManagement />
+          </Panel.Body>
+        </Panel>
+      </PanelGroup>
+
+      <ButtonToolbar>
+        <Button bsStyle="primary" onClick={() => DetailActions.close(device)}>
+          Close
+        </Button>
+        <Button bsStyle="warning" onClick={() => handleSubmit(device)}>
+          Save
+        </Button>
+      </ButtonToolbar>
+      </Panel.Body>
+    </Panel>
+  )
+}
+
+export default DeviceDetails
+
+const handleSubmit = (device) => {
+  device.updateChecksum()
+  ElementActions.saveDevice(device)
+}
+
+const Header = ({device, toggleFullScreen}) => {
+  return (
+    <div>
+      {device.title}
+      <OverlayTrigger placement="bottom"
+          overlay={<Tooltip id="closeReaction">Close Device</Tooltip>}>
+        <Button bsStyle="danger" bsSize="xsmall" className="button-right"
+            onClick={() => DetailActions.close(device)}>
+          <i className="fa fa-times"></i>
+        </Button>
+      </OverlayTrigger>
+      <OverlayTrigger placement="bottom"
+          overlay={<Tooltip id="saveReaction">Save Device</Tooltip>}>
+        <Button bsStyle="warning" bsSize="xsmall" className="button-right"
+            onClick={() => handleSubmit(device)}>
+          <i className="fa fa-floppy-o "></i>
+        </Button>
+      </OverlayTrigger>
+      <OverlayTrigger placement="bottom"
+          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
+      <Button bsStyle="info" bsSize="xsmall" className="button-right"
+        onClick={() => toggleFullScreen()}>
+        <i className="fa fa-expand"></i>
+      </Button>
+      </OverlayTrigger>
+    </div>
+  )
+}
diff --git a/app/packs/src/components/DeviceManagement.js b/app/packs/src/components/DeviceManagement.js
new file mode 100644
index 000000000..43599764f
--- /dev/null
+++ b/app/packs/src/components/DeviceManagement.js
@@ -0,0 +1,226 @@
+import React, { Component } from 'react'
+import connectToStores from 'alt-utils/lib/connectToStores'
+import {
+  PanelGroup, Panel, ButtonGroup, Button, ControlLabel, FormControl
+} from 'react-bootstrap';
+import ElementActions from 'src/stores/alt/actions/ElementActions'
+import UIActions from 'src/stores/alt/actions/UIActions'
+import ElementStore from 'src/stores/alt/stores/ElementStore'
+import UIStore from 'src/stores/alt/stores/UIStore'
+
+const DeviceManagement = ({ devices, activeAccordionDevice }) => {
+  const handleCloseDeviceManagement = () => {
+    UIActions.closeDeviceManagement()
+    const { currentCollection } = UIStore.getState()
+    if (currentCollection == null || currentCollection.label == 'All') {
+      Aviator.navigate(`/collection/all/${urlForCurrentElement()}`)
+    } else {
+      Aviator.navigate(`/collection/${currentCollection.id}/${urlForCurrentElement()}`)
+    }
+  }
+
+  const urlForCurrentElement = () => {
+    const { currentElement } = ElementStore.getState()
+    if (currentElement) {
+      if (currentElement.isNew) {
+        return `${currentElement.type}/new`
+      }
+      else {
+        return `${currentElement.type}/${currentElement.id}`
+      }
+    }
+    else {
+      return ''
+    }
+  }
+
+  return (
+    <div>
+      <h1
+        style={{ margin: 0, float: "left" }}
+      >
+        Device-Management
+      </h1>
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        style={{ margin: "10px" }}
+        onClick={() => handleCloseDeviceManagement()}
+      >
+        <i className="fa fa-times"></i>
+      </Button>
+      <AddDeviceButton
+        activeAccordionDevice={activeAccordionDevice}
+      />
+      <Devices
+        devices={devices}
+        activeAccordionDevice={activeAccordionDevice}
+      />
+    </div>
+  )
+}
+
+DeviceManagement.getStores = () => {
+  return [ElementStore]
+}
+
+DeviceManagement.getPropsFromStores = () => {
+  return ElementStore.getState().elements.devices
+}
+
+export default connectToStores(DeviceManagement)
+
+const Devices = ({ devices, activeAccordionDevice }) => {
+  const styleByDeviceState = (device) => {
+    return device.isNew || device.isEdited
+      ? "info"
+      : "default"
+  }
+  if (devices.length > 0) {
+    return (
+      <PanelGroup defaultActiveKey={0} activeKey={activeAccordionDevice} accordion>
+        {devices.map(
+          (device, key) =>
+            <Panel
+              eventKey={key}
+              key={key}
+              onClick={() => ElementActions.changeActiveAccordionDevice(key)}
+              bsStyle={styleByDeviceState(device)}
+            >
+              <Panel.Heading>{<DeviceHeader device={device} />}</Panel.Heading>
+              <Panel.Body>
+                <Device
+                  device={device}
+                />
+              </Panel.Body>
+            </Panel>
+        )}
+      </PanelGroup>
+    )
+  } else {
+    return (
+      <p>
+        There are currently no Devices.
+      </p>
+    )
+  }
+}
+
+const Device = ({ device }) => {
+  const styleBySelectedType = (type) => {
+    return device.types.includes(type)
+      ? "primary"
+      : "default"
+  }
+
+  const handleTypeClick = (type) => {
+    ElementActions.toggleDeviceType(device, type)
+  }
+
+  const handleSave = () => {
+    device.updateChecksum()
+    ElementActions.saveDevice(device)
+  }
+
+  const handleChangeDeviceProp = (prop, value) => {
+    ElementActions.changeDeviceProp(device, prop, value)
+  }
+
+  const bottomSpacer = {
+    marginBottom: "10px"
+  }
+
+  return (
+    <div>
+      <ControlLabel>Title</ControlLabel>
+      <FormControl
+        type="text"
+        value={device.title}
+        placeholder="Enter device-title.."
+        onChange={(e) => handleChangeDeviceProp("title", e.target.value)}
+        style={bottomSpacer}
+      />
+      <ControlLabel>Code</ControlLabel>
+      <FormControl
+        type="text"
+        value={device.code}
+        placeholder="Enter device-code.."
+        onChange={(e) => handleChangeDeviceProp("code", e.target.value)}
+        style={bottomSpacer}
+      />
+      <ControlLabel>Types</ControlLabel><br />
+      <ButtonGroup
+        style={bottomSpacer}
+      >
+        <Button
+          bsStyle={styleBySelectedType("NMR")}
+          onClick={() => handleTypeClick("NMR")}
+        >
+          NMR
+        </Button>
+        <Button
+          bsStyle={styleBySelectedType("EA")}
+          onClick={() => handleTypeClick("EA")}
+        >
+          EA
+        </Button>
+        <Button
+          bsStyle={styleBySelectedType("MS")}
+          onClick={() => handleTypeClick("MS")}
+        >
+          MS
+        </Button>
+        <Button
+          bsStyle={styleBySelectedType("IR")}
+          onClick={() => handleTypeClick("IR")}
+        >
+          IR
+        </Button>
+      </ButtonGroup>
+      <br />
+      <Button
+        style={{ marginTop: "5px" }}
+        onClick={(e) => handleSave()}
+      >
+        Save
+      </Button>
+    </div>
+  )
+}
+
+const DeviceHeader = ({ device, state, onChangeState }) => {
+  const handleRemoveDevice = (e) => {
+    if (confirm('Delete the Device?')) {
+      ElementActions.deleteDevice(device)
+    }
+    e.preventDefault()
+  }
+
+  return (
+    <div style={{
+      width: '100%',
+      cursor: "pointer"
+    }}>
+      {device.title}
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        className="button-right"
+        onClick={(e) => handleRemoveDevice(e)}
+      >
+        <i className="fa fa-trash"></i>
+      </Button>
+    </div>
+  )
+}
+
+const AddDeviceButton = () => {
+  return (
+    <p>
+      &nbsp;
+      <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => ElementActions.createDevice()}>
+        Add device
+      </Button>
+    </p>
+  )
+}
diff --git a/app/packs/src/components/DeviceSampleContainer.js b/app/packs/src/components/DeviceSampleContainer.js
new file mode 100644
index 000000000..359c7a83f
--- /dev/null
+++ b/app/packs/src/components/DeviceSampleContainer.js
@@ -0,0 +1,204 @@
+import React from 'react'
+import {DropTarget} from 'react-dnd'
+import DragDropItemTypes from './DragDropItemTypes'
+import ElementActions from './actions/ElementActions'
+import {ButtonGroup, Button} from 'react-bootstrap';
+import { chmoConversions } from './OlsComponent';
+
+const target = {
+  drop(props, monitor){
+    const {device} = props
+    const item = monitor.getItem()
+    const itemType = monitor.getItemType()
+    if (itemType == 'sample') {
+      ElementActions.addSampleToDevice(item.element, device)
+    }
+  },
+  canDrop(props, monitor){
+    const {materialGroup} = props
+    const item = monitor.getItem()
+    const itemType = monitor.getItemType()
+    if (itemType == 'sample') {
+      return true
+    }
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+})
+
+const DeviceSampleContainer = ({device, isOver, canDrop, connectDropTarget}) => {
+  let style = {
+    marginBottom: "10px",
+    minHeight: "39px"
+  }
+  if (isOver && canDrop) {
+    style.borderStyle = 'dashed'
+    style.borderColor = '#337ab7'
+  } else if (canDrop) {
+    style.borderStyle = 'dashed'
+  }
+  return connectDropTarget(
+    <div>
+      <TypeButtonsHeader
+        device={device}
+        onTypeClick={(type) => ElementActions.openDeviceAnalysis(device, type)}
+      />
+      <div style={style}>
+        {device.samples.length > 0
+          ? device.samples.map((sample, key) => (
+            <DeviceSample
+              device={device}
+              sample={sample}
+              key={key}
+            />
+          ))
+          : <div>
+              There are currently no Samples associated with this Device.
+            </div>
+        }
+      </div>
+    </div>
+  )
+}
+
+export default DropTarget([DragDropItemTypes.SAMPLE], target, collect)(DeviceSampleContainer)
+
+const DeviceSample = ({sample, device}) => {
+  return (
+    <div
+      style={{display: "flex", marginBottom: "5px"}}
+    >
+      <Button
+        bsStyle={"danger"}
+        onClick={() => ElementActions.removeSampleFromDevice(sample, device)}
+      >
+        <i className="fa fa-trash-o"></i>
+      </Button>
+      <div
+        style={{
+          padding: "6px",
+          borderRadius: "4px",
+          border: "1px solid #ddd",
+          margin: "0 5px",
+          flex: 1
+        }}
+      >
+        {sample.shortLabel}
+      </div>
+      <TypeButtons
+        device={device}
+        sample={sample}
+        onTypeClick={(type) => ElementActions.toggleTypeOfDeviceSample(device, sample, type)}
+      />
+    </div>
+  )
+}
+
+const TypeButtonsHeader = ({device, onTypeClick}) => {
+  return (
+    <div
+      style={{display: "flex"}}
+    >
+      <div style={{flex: 1}}></div>
+      <ButtonGroup
+        style={{marginBottom: "5px"}}
+      >
+        <Button
+          bsStyle={"primary"}
+          disabled={isDisabled(device, chmoConversions.nmr_1h.value)}
+          onClick={() => onTypeClick(chmoConversions.nmr_1h.value)}
+        >
+          {chmoConversions.nmr_1h.label}
+        </Button>
+        <Button
+          bsStyle={"primary"}
+          disabled={isDisabled(device, chmoConversions.nmr_13c.value)}
+          onClick={() => onTypeClick(chmoConversions.nmr_13c.value)}
+        >
+          {chmoConversions.nmr_13c.label}
+        </Button>
+        <Button
+          bsStyle={"primary"}
+          disabled={isDisabled(device, chmoConversions.ea.value)}
+          onClick={() => onTypeClick(chmoConversions.ea.value)}
+        >
+          {chmoConversions.ea.label}
+        </Button>
+        <Button
+          bsStyle={"primary"}
+          disabled={isDisabled(device, chmoConversions.mass.value)}
+          onClick={() => onTypeClick(chmoConversions.mass.value)}
+        >
+          {chmoConversions.mass.label}
+        </Button>
+        <Button
+          bsStyle={"primary"}
+          disabled={isDisabled(device, chmoConversions.ir.value)}
+          onClick={() => onTypeClick(chmoConversions.ir.value)}
+        >
+          {chmoConversions.ir.label}
+        </Button>
+      </ButtonGroup>
+    </div>
+  )
+}
+
+const isDisabled = (device, type) => {
+  // TODO remove this after implementing other Analysis-Type-UIs
+  if (type === chmoConversions.ea.value || type === chmoConversions.mass.value || type === chmoConversions.ir.value) {
+    return true;
+  } else {
+    return !device.types.includes(type)
+  }
+}
+
+const TypeButtons = ({device, sample, onTypeClick}) => {
+  const labelBySampleType = (type) => (
+    sample.types.includes(type)
+      ? <i className="fa fa-check"></i>
+      : <i>&nbsp;</i>
+  )
+  return (
+    <ButtonGroup>
+      <Button
+        onClick={() => onTypeClick(chmoConversions.nmr_1h.value)}
+        disabled={isDisabled(device, chmoConversions.nmr_1h.value)}
+        style={{width: "57.91px"}}
+      >
+        {labelBySampleType(chmoConversions.nmr_1h.value)}
+      </Button>
+      <Button
+        onClick={() => onTypeClick(chmoConversions.nmr_13c.value)}
+        disabled={isDisabled(device, chmoConversions.nmr_13c.value)}
+        style={{ width: "57.91px" }}
+      >
+        {labelBySampleType(chmoConversions.nmr_13c.value)}
+      </Button>
+      <Button
+        onClick={() => onTypeClick(chmoConversions.ea.value)}
+        disabled={isDisabled(device, chmoConversions.ea.value)}
+        style={{width: "43.64px"}}
+      >
+        {labelBySampleType(chmoConversions.ea.value)}
+      </Button>
+      <Button
+        onClick={() => onTypeClick(chmoConversions.mass.value)}
+        disabled={isDisabled(device, chmoConversions.mass.value)}
+        style={{width: "47.28px"}}
+      >
+        {labelBySampleType(chmoConversions.mass.value)}
+      </Button>
+      <Button
+        onClick={() => onTypeClick(chmoConversions.ir.value)}
+        disabled={isDisabled(device, chmoConversions.ir.value)}
+        style={{width: "39.22px"}}
+      >
+        {labelBySampleType(chmoConversions.ir.value)}
+      </Button>
+    </ButtonGroup>
+  )
+}
diff --git a/app/packs/src/components/ElementAllCheckbox.js b/app/packs/src/components/ElementAllCheckbox.js
new file mode 100644
index 000000000..409aa7270
--- /dev/null
+++ b/app/packs/src/components/ElementAllCheckbox.js
@@ -0,0 +1,90 @@
+import React from 'react'
+
+import UIActions from 'src/stores/alt/actions/UIActions'
+
+export default class ElementAllCheckbox extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state =  {
+      showOptions: false,
+      currentOption: 2
+    }
+
+    this.options = ["current", "all", "none"]
+
+    this.toggleCheckbox = this.toggleCheckbox.bind(this)
+    this.showOptions = this.showOptions.bind(this)
+    this.selectAll = this.selectAll.bind(this)
+  }
+
+  toggleCheckbox(e) {
+    let {currentOption} = this.state
+    currentOption = (currentOption + 1) % 3
+
+    this.setState({currentOption: currentOption}, this.selectAll)
+
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  showOptions(e) {
+    this.setState({ showOptions: !this.state.showOptions })
+  }
+
+  selectAll(option) {
+    if (option == null) option = this.state.currentOption
+    let range = this.options[option]
+
+    let newChecked = !this.props.checked
+    let params = {
+      type: this.props.type,
+      range: range
+    }
+
+    if(newChecked) {
+      UIActions.checkAllElements(params)
+    } else {
+      UIActions.uncheckAllElements(params)
+    }
+
+    this.setState({ showOptions: false, currentOption: option })
+  }
+
+  render() {
+    let {showOptions, currentOption} = this.state
+    let {ui, type} = this.props
+
+    let checkMarkClass = "fa "
+    if (ui.checkedAll == true) {
+      checkMarkClass += "fa-check"
+    } else if (ui.checkedIds && ui.checkedIds.size > 0) {
+      checkMarkClass += "fa-minus"
+    }
+    let checkMark = (<i className={checkMarkClass}/>)
+
+    let optionStyle = {}
+    if (showOptions) {
+      optionStyle.display = "block"
+    } else {
+      optionStyle.display = "none"
+    }
+
+    return (
+      <div className="all-checkbox" onClick={this.showOptions}>
+        <div className="checkbox-dropdown">
+          <span className="span-checkbox" onClick={this.toggleCheckbox}>
+            {checkMark}
+          </span>
+          &nbsp;&nbsp;
+          <i className="fa fa-caret-down"/>
+        </div>
+        <div className="checkbox-options" style={optionStyle}>
+          <div onClick={() => this.selectAll(0)}>Current page</div>
+          <div onClick={() => this.selectAll(1)}>All pages</div>
+          <div onClick={() => this.selectAll(2)}>None</div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/ElementAnalysesLabels.js b/app/packs/src/components/ElementAnalysesLabels.js
new file mode 100644
index 000000000..1183abca6
--- /dev/null
+++ b/app/packs/src/components/ElementAnalysesLabels.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Label, OverlayTrigger, Popover } from 'react-bootstrap';
+
+export default class ElementAnalysesLabels extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    }
+  }
+
+  render() {
+
+    return (
+      <div style={{ display: 'inline-block' }}
+        onClick={(e) => { e.stopPropagation() }}>
+        {this.analysesLabels(this.state.element)}
+      </div>
+    );
+  }
+
+
+
+  analysesLabels(element) {
+    if (!element.tag) return (<span />)
+    if (!element.tag.taggable_data) return (<span />)
+
+    let analyses = element.tag.taggable_data.analyses
+
+    if (!analyses) return (<span />)
+
+    let unconfirmedTitle = 'Unconfirmed Analysis'
+    if (analyses.Unconfirmed && Object.keys(analyses.unconfirmed).length > 1)
+      unconfirmedTitle = 'Unconfirmed Analyses'
+
+    let confirmedTitle = 'Confirmed Analysis'
+    if (analyses.Confirmed && Object.keys(analyses.confirmed).length > 1)
+      confirmedTitle = 'Confirmed Analyses'
+
+    return (
+      <div style={{ display: 'inline-block' }}>
+        {this.labelWithPopover(unconfirmedTitle, analyses.unconfirmed)}
+        {this.labelWithPopover(confirmedTitle, analyses.confirmed)}
+      </div>
+    )
+  }
+
+  labelWithPopover(title, labels) {
+    if (!labels) return (<span />)
+
+    let { element } = this.state
+    let experiment = <i className='fa fa-bar-chart' />
+
+    let label_popover = (
+      <Popover title={title} id={'labelpop' + element.id}>
+        {this.formatLabels(labels)}
+      </Popover>
+    )
+
+    let status = title.match(/Unconfirmed/)
+      ? <i className="fa fa-question" />
+      : <i className="fa fa-check" />
+    let total = Object.values(labels).reduce((a, b) => a + b, 0)
+
+    return (
+      <OverlayTrigger trigger="click" rootClose placement="left" overlay={label_popover}>
+        <span className="collection-label" key={element.id}>
+          <Label>
+            {experiment} {total} {status}
+          </Label>
+        </span>
+      </OverlayTrigger>
+    );
+  }
+
+  formatLabels(labels) {
+    const regExp = /\(([^)]+)\)/;
+    return Object.keys(labels).map((key) => {
+      let key_syn = (regExp.exec(key || '') || ['']).pop().trim();
+      if (key_syn === '') {
+        key_syn = (key || '').split('|').pop().trim();
+      };
+
+      return (
+        <span className="collection-label" key={key}>
+          <Label bsStyle='default' bsSize='xs'>
+            {key_syn || "Analysis type Unkown"} - {labels[key]}
+          </Label>
+        </span>
+      )
+    })
+  }
+}
diff --git a/app/packs/src/components/ElementCheckbox.js b/app/packs/src/components/ElementCheckbox.js
new file mode 100644
index 000000000..7500955e4
--- /dev/null
+++ b/app/packs/src/components/ElementCheckbox.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import UIActions from 'src/stores/alt/actions/UIActions';
+
+export default class ElementCheckbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: false,
+      element: props.element
+    }
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { element, checked } = nextProps;
+    this.setState({
+      element,
+      checked
+    });
+  }
+
+  updateCheckedStatus(element, state) {
+    let checked = this.isChecked(element, state);
+    this.setState({checked: checked});
+  }
+
+  toggleCheckbox() {
+    let newChecked = !this.props.checked;
+
+    if(newChecked) {
+      UIActions.checkElement(this.state.element);
+    } else {
+      UIActions.uncheckElement(this.state.element);
+    }
+  }
+
+  render() {
+    return (
+      <input
+        type="checkbox"
+        onChange={this.toggleCheckbox.bind(this)}
+        checked={this.props.checked}
+        className="element-checkbox"
+      />
+    );
+  }
+}
diff --git a/app/packs/src/components/ElementCollectionLabels.js b/app/packs/src/components/ElementCollectionLabels.js
new file mode 100644
index 000000000..c12edfcbd
--- /dev/null
+++ b/app/packs/src/components/ElementCollectionLabels.js
@@ -0,0 +1,137 @@
+import React from 'react';
+import { Label, OverlayTrigger, Popover, Button } from 'react-bootstrap';
+import UserStore from 'src/stores/alt/stores/UserStore';
+
+export default class ElementCollectionLabels extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+
+    this.handleOnClick = this.handleOnClick.bind(this);
+    this.preventOnClick = this.preventOnClick.bind(this);
+  }
+
+  handleOnClick(label, e, is_synchronized) {
+    e.stopPropagation();
+
+    let collectionUrl = is_synchronized ? "/scollection" : "/collection"
+    let url = collectionUrl + "/" + label.id + "/" +
+              this.state.element.type + "/" + this.state.element.id
+
+    Aviator.navigate(url);
+  }
+
+  preventOnClick(e) {
+    e.stopPropagation();
+  }
+
+  labelStyle(label) {
+    return label.is_shared ? "warning" : "info";
+  }
+
+  formatLabels(labels, is_synchronized) {
+
+    return labels.map((label, index) => {
+      if (is_synchronized === true && label.isOwner === true) {
+        return (
+          <span className="collection-label" key={index}>
+            <Button disabled bsStyle="default" bsSize="xs">
+              {label.name}
+            </Button>
+            &nbsp;
+          </span>
+        );
+      }
+      return (
+        <span className="collection-label" key={index}>
+          <Button bsStyle="default" bsSize="xs" onClick={e => this.handleOnClick(label, e, is_synchronized)}>
+            {label.name}
+          </Button>
+          &nbsp;
+        </span>
+      );
+    });
+  }
+
+  renderCollectionsLabels(collectionName, labels, is_synchronized = false) {
+    if (labels.length == 0) return <span />;
+
+    return (
+      <div>
+        <h3 className="popover-title">{collectionName}</h3>
+        <div className="popover-content">
+          {this.formatLabels(labels, is_synchronized)}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { element } = this.state;
+
+    if (!element.tag || !element.tag.taggable_data ||
+        !element.tag.taggable_data.collection_labels)
+      return (<span />);
+
+    let { currentUser } = UserStore.getState();
+    currentUser = currentUser || {};
+
+    let placement = 'left';
+    if (this.props.placement) placement = this.props.placement;
+
+    let collection_labels = element.tag.taggable_data.collection_labels;
+    let shared_labels = [];
+    let labels = [];
+    let sync_labels = [];
+    collection_labels.map((label) => {
+      if (label) {
+        if (label.is_shared == false && label.is_synchronized == false && label.user_id == currentUser.id) {
+          labels.push(label);
+        } else if (label.is_shared == true && label.is_synchronized == false &&
+          (label.user_id == currentUser.id || label.shared_by_id == currentUser.id)) {
+          shared_labels.push(label);
+        } else if (label.is_synchronized == true && (label.user_id == currentUser.id || label.shared_by_id == currentUser.id)) {
+          let isOwner = false;
+          if (label.shared_by_id === currentUser.id) {
+            isOwner = true;
+          }
+          sync_labels.push({ ...label, isOwner });
+        }
+      }
+    });
+
+    let total_shared_collections = shared_labels.length + sync_labels.length;
+
+    if (labels.length == 0 && total_shared_collections == 0)
+      return (<span />);
+
+    let collectionOverlay = (
+      <Popover className="collection-overlay" id="element-collections">
+        {this.renderCollectionsLabels("My Collections", labels)}
+        {this.renderCollectionsLabels("Shared Collections", shared_labels)}
+        {this.renderCollectionsLabels("Synchronized Collections", sync_labels, true)}
+      </Popover>
+    );
+
+    return (
+      <div style={{display: "inline-block"}} onClick={this.preventOnClick}>
+        <OverlayTrigger
+          trigger="click"
+          rootClose
+          placement={placement}
+          overlay={collectionOverlay}
+        >
+          <span className="collection-label" key={element.id}>
+            <Label>
+              <i className="fa fa-list" />
+              {" " + labels.length} {" - "}
+              {total_shared_collections + " "} <i className="fa fa-share-alt" />
+            </Label>
+          </span>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/ElementContainer.js b/app/packs/src/components/ElementContainer.js
new file mode 100644
index 000000000..87aacbc83
--- /dev/null
+++ b/app/packs/src/components/ElementContainer.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+
+const listSource = { beginDrag(props) { return props; } };
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const ElementContainer = ({ connectDragSource, sourceType }) => {
+  if (sourceType === DragDropItemTypes.SAMPLE || sourceType === DragDropItemTypes.MOLECULE) {
+    return connectDragSource(
+      <span className="fa fa-arrows dnd-arrow-enable text-info" />,
+      { dropEffect: 'copy' },
+    );
+  } else if (sourceType === DragDropItemTypes.GENERALPROCEDURE) {
+    return connectDragSource(<span className="fa fa-home dnd-arrow-enable text-info" />);
+  } else if (sourceType === DragDropItemTypes.WELLPLATE ||
+             sourceType === DragDropItemTypes.REACTION ||
+             sourceType === DragDropItemTypes.RESEARCH_PLAN) {
+    return connectDragSource(<span className="fa fa-arrows dnd-arrow-enable text-info" />);
+  } else if (sourceType === DragDropItemTypes.ELEMENT) {
+    return connectDragSource(<span className="fa fa-arrows dnd-arrow-enable text-info" />);
+  }
+  return <span className="fa fa-arrows dnd-arrow-disable" />;
+};
+
+export default DragSource(props => props.sourceType, listSource, collectSource)(ElementContainer);
+
+ElementContainer.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+  sourceType: PropTypes.string.isRequired,
+};
diff --git a/app/packs/src/components/ElementDetailSortTab.js b/app/packs/src/components/ElementDetailSortTab.js
new file mode 100644
index 000000000..fd6be4bdc
--- /dev/null
+++ b/app/packs/src/components/ElementDetailSortTab.js
@@ -0,0 +1,158 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/require-default-props */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+import Immutable from 'immutable';
+import _ from 'lodash';
+import UserStore from './stores/UserStore';
+import UserActions from './actions/UserActions';
+import TabLayoutContainer from './TabLayoutContainer';
+
+const getNodeText = (node) => {
+  if (['string', 'number'].includes(typeof node)) return node;
+  if (node instanceof Array) return node.map(getNodeText).join('');
+  if (typeof node === 'object' && node) {
+    if (node.props.children) {
+      return getNodeText(node.props.children);
+    } else if (node.props.alt) {
+      return getNodeText(node.props.alt);
+    }
+    return '';
+  }
+  return '';
+};
+
+const getArrayFromLayout = (layout, availableTabs) => {
+  const layoutKeys = Object.keys(layout);
+  const enabled = availableTabs.filter(val => layoutKeys.includes(val));
+  const leftover = availableTabs.filter(val => !layoutKeys.includes(val));
+  const visible = [];
+  const hidden = [];
+
+  enabled.forEach((key) => {
+    const order = layout[key];
+    if (order < 0) { hidden[Math.abs(order)] = key; }
+    if (order > 0) { visible[order] = key; }
+  });
+
+  leftover.forEach(key => hidden.push(key));
+
+  let first = null;
+  if (visible.length === 0) {
+    first = hidden.filter(n => n !== undefined)[0];
+    if (first) {
+      visible.push(first);
+    }
+  }
+  if (hidden.length === 0) {
+    hidden.push('hidden');
+  }
+  return {
+    visible: Immutable.List(visible.filter(n => n !== undefined)),
+    hidden: Immutable.List(hidden.filter(n => (n !== undefined && n !== first)))
+  };
+};
+
+
+export default class ElementDetailSortTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: Immutable.List(),
+      hidden: Immutable.List(),
+    };
+
+    this.type = props.type;
+
+    this.onChangeUser = this.onChangeUser.bind(this);
+    this.handleOnLayoutChanged = this.handleOnLayoutChanged.bind(this);
+
+    UserActions.fetchCurrentUser();
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChangeUser);
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onChangeUser);
+  }
+
+  onChangeUser(state) {
+    const layout = (state.profile && state.profile.data && state.profile.data[`layout_detail_${this.type}`]) || {};
+    const { visible, hidden } = getArrayFromLayout(layout, this.props.availableTabs);
+
+    this.setState(
+      { visible, hidden },
+      () => this.props.onTabPositionChanged(visible)
+    );
+  }
+
+  handleOnLayoutChanged() {
+    this.updateLayout();
+  }
+
+  updateLayout() {
+    const { visible, hidden } = this.layout.state;
+    const layout = {};
+
+    visible.forEach((value, index) => {
+      layout[value] = (index + 1);
+    });
+    hidden.filter(val => val !== 'hidden').forEach((value, index) => {
+      layout[value] = (-index - 1);
+    });
+
+    const userProfile = UserStore.getState().profile;
+    const layoutName = `data.layout_detail_${this.type}`;
+    _.set(userProfile, layoutName, layout);
+    UserActions.updateUserProfile(userProfile);
+  }
+
+  render() {
+    const {
+      visible, hidden
+    } = this.state;
+    const popoverSettings = (
+      <Popover
+        className="collection-overlay"
+        id="popover-layout"
+        style={{ maxWidth: 'none', width: 'auto' }}
+      >
+        <div>
+          <h3 className="popover-title">Tabs Layout</h3>
+          <div className="popover-content">
+            <TabLayoutContainer
+              visible={visible}
+              hidden={hidden}
+              tabTitles={this.props.tabTitles}
+              isElementDetails
+              ref={(n) => { this.layout = n; }}
+            />
+          </div>
+        </div>
+      </Popover>
+    );
+    return (
+      <OverlayTrigger
+        trigger="click"
+        placement="left"
+        overlay={popoverSettings}
+        rootClose
+        onExit={this.handleOnLayoutChanged}
+      >
+        <Button bsStyle="info" bsSize="xsmall" className="button-right">
+          <i className="fa fa-sliders" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
+
+ElementDetailSortTab.propTypes = {
+  onTabPositionChanged: PropTypes.func,
+  availableTabs: PropTypes.arrayOf(PropTypes.string),
+  tabTitles: PropTypes.object
+};
diff --git a/app/packs/src/components/ElementDetails.js b/app/packs/src/components/ElementDetails.js
new file mode 100644
index 000000000..029c8eacf
--- /dev/null
+++ b/app/packs/src/components/ElementDetails.js
@@ -0,0 +1,318 @@
+/* eslint-disable react/destructuring-assignment */
+import ComputeTaskContainer from 'src/apps/mydb/elements/details/computeTasks/ComputeTaskContainer';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import DeviceDetails from 'src/apps/mydb/elements/details/devices/DeviceDetails';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import FormatContainer from 'src/apps/mydb/elements/details/formats/FormatContainer';
+import GenericElDetails from 'src/components/generic/GenericElDetails';
+import GraphContainer from 'src/apps/mydb/elements/details/GraphContainer';
+import LiteratureDetails from 'src/apps/mydb/elements/details/LiteratureDetails';
+import MetadataContainer from 'src/components/metadata/MetadataContainer';
+import PredictionContainer from 'src/apps/mydb/elements/details/predictions/PredictionContainer';
+import React, { Component } from 'react';
+import ReactionDetails from 'src/apps/mydb/elements/details/reactions/ReactionDetails';
+import ReportContainer from 'src/apps/mydb/elements/details/reports/ReportContainer';
+import ResearchPlanDetails from 'src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails';
+import SampleDetails from 'src/apps/mydb/elements/details/samples/SampleDetails';
+import ScreenDetails from 'src/apps/mydb/elements/details/screens/ScreenDetails';
+import StickyDiv from 'react-stickydiv';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import WellplateDetails from 'src/apps/mydb/elements/details/wellplates/WellplateDetails';
+import {
+  Tabs, Tab, Label, Button
+} from 'react-bootstrap';
+
+import { getPublicationId } from 'src/components/chemrepo/publication-utils';
+
+const tabInfoHash = {
+  metadata: {
+    title: 'Metadata',
+    iconEl: (
+      <span>
+        <i className="fa fa-file-text-o" />
+        &nbsp;&nbsp;
+        <i className="fa fa-book" />
+      </span>
+    )
+  },
+  report: {
+    title: 'Report',
+    iconEl: (
+      <span>
+        <i className="fa fa-file-text-o" />
+        &nbsp;&nbsp;
+        <i className="fa fa-pencil" />
+      </span>
+    )
+  },
+  prediction: {
+    title: 'Synthesis Prediction',
+    iconEl: (
+      <span>
+        <i className="fa fa-percent" />
+      </span>
+    )
+  },
+  deviceCtrl: {
+    title: 'Measurement',
+    iconEl: (
+      <span>
+        <i className="fa fa-bar-chart" />
+        <i className="fa fa-cogs" />
+      </span>
+    )
+  },
+  format: {
+    title: 'Format',
+    iconEl: (
+      <span>
+        <i className="fa fa-magic" />
+      </span>
+    )
+  },
+  graph: {
+    title: 'Graph',
+    iconEl: (
+      <span>
+        <i className="fa fa-area-chart" />
+      </span>
+    )
+  },
+  task: {
+    title: 'Task',
+    iconEl: (
+      <span>
+        <i className="fa fa-wrench" />
+      </span>
+    )
+  },
+  literature_map: {
+    title: 'Literature',
+    iconEl: (
+      <span>
+        <i className="fa fa-book" aria-hidden="true" />
+      </span>
+    )
+  }
+};
+
+export default class ElementDetails extends Component {
+  constructor(props) {
+    super(props);
+    const { selecteds, activeKey, deletingElement } = ElementStore.getState();
+    this.state = {
+      offsetTop: 70,
+      fullScreen: false,
+      selecteds,
+      activeKey,
+      deletingElement,
+      showTooltip: false,
+      genericEls: UserStore.getState().genericEls || [],
+    };
+
+    this.handleResize = this.handleResize.bind(this);
+    this.toggleFullScreen = this.toggleFullScreen.bind(this);
+    this.toggleCommentScreen = this.toggleCommentScreen.bind(this);
+    this.onDetailChange = this.onDetailChange.bind(this);
+    this.checkSpectraMessage = this.checkSpectraMessage.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    window.scrollTo(window.scrollX, window.scrollY + 1);
+    // imitate scroll event to make StickyDiv element visible in current area
+    ElementStore.listen(this.onDetailChange);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return true;
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    ElementStore.unlisten(this.onDetailChange);
+  }
+
+  toggleCommentScreen(t) {
+    this.setState({ fullScreen: t });
+  }
+
+  handleResize() {
+    const windowHeight = window.innerHeight || 1;
+    if (this.state.fullScreen || windowHeight < 500) {
+      this.setState({ offsetTop: 0 });
+    } else {
+      this.setState({ offsetTop: 70 });
+    }
+  }
+
+  onDetailChange(state) {
+    const {
+      selecteds, activeKey, deletingElement, spectraMsg
+    } = state;
+    this.setState((prevState) => ({
+      ...prevState, selecteds, activeKey, deletingElement
+    }));
+    this.checkSpectraMessage(spectraMsg);
+  }
+
+  toggleFullScreen() {
+    const { fullScreen } = this.state;
+    this.setState({ fullScreen: !fullScreen });
+  }
+
+  checkSpectraMessage(spectraMsg) {
+    if (spectraMsg) {
+      const { showedSpcMsgID } = this.state;
+      if (!showedSpcMsgID || showedSpcMsgID !== spectraMsg.message_id) {
+        this.setState({ showedSpcMsgID: spectraMsg.message_id });
+        alert(spectraMsg.content.data);
+      }
+    }
+  }
+
+  content(_el) {
+    const el = _el;
+    el.sealed = getPublicationId(el) ? true : false;
+
+    if (el && el.klassType === 'GenericEl' && el.type != null) {
+      return <GenericElDetails genericEl={el} toggleFullScreen={this.toggleFullScreen} />;
+    }
+
+    switch (el.type) {
+      case 'sample':
+        return (
+          <SampleDetails
+            sample={el}
+            toggleFullScreen={this.toggleFullScreen}
+            toggleCommentScreen={this.toggleCommentScreen}
+            fullScreen={this.state.fullScreen}
+          />
+        );
+      case 'reaction':
+        return (
+          <ReactionDetails
+            reaction={el}
+            toggleFullScreen={this.toggleFullScreen}
+            toggleCommentScreen={this.toggleCommentScreen}
+            fullScreen={this.state.fullScreen}
+          />
+        );
+      case 'wellplate':
+        return (
+          <WellplateDetails
+            wellplate={el}
+            toggleFullScreen={this.toggleFullScreen}
+          />
+        );
+      case 'screen':
+        return (
+          <ScreenDetails
+            screen={el}
+            toggleFullScreen={this.toggleFullScreen}
+          />
+        );
+      case 'deviceCtrl':
+        return (
+          <DeviceDetails
+            device={el}
+            toggleFullScreen={this.toggleFullScreen}
+          />
+        );
+      case 'research_plan':
+        return (
+          <ResearchPlanDetails
+            researchPlan={el}
+            toggleFullScreen={this.toggleFullScreen}
+          />
+        );
+      case 'metadata':
+        return <MetadataContainer metadata={el} />;
+      case 'report':
+        return <ReportContainer report={el} />;
+      case 'prediction':
+        return <PredictionContainer prediction={el} />;
+      case 'format':
+        return <FormatContainer format={el} />;
+      case 'graph':
+        return <GraphContainer graph={el} />;
+      case 'task':
+        return <ComputeTaskContainer task={el} />;
+      case 'literature_map':
+        return <LiteratureDetails literatureMap={el} />;
+      default:
+        return (
+          <div style={{ textAlign: 'center' }}>
+            <br />
+            <h1>{el.id.substring(el.id.indexOf('error:') + 6)}</h1>
+            <h3><i className="fa fa-eye-slash fa-5x" /></h3>
+            <Button
+              bsStyle="danger"
+              onClick={() => DetailActions.close(el, true)}
+            >
+              Close this window
+            </Button>
+          </div>
+        );
+    }
+  }
+
+  tabTitle(el, elKey) {
+    const bsStyle = el.isPendingToSave ? 'info' : 'primary';
+    const focusing = elKey === this.state.activeKey;
+
+    let iconElement = (<i className={`icon-${el.type}`} />);
+
+    const tab = tabInfoHash[el.type] || {};
+    const title = tab.title || el.title();
+    if (tab.iconEl) { iconElement = tab.iconEl; }
+    if (el.element_klass) { iconElement = (<i className={`${el.element_klass.icon_name}`} />); }
+    const icon = focusing ? (iconElement) : (<Label bsStyle={bsStyle || ''}>{iconElement}</Label>);
+    return (
+      <div>
+        {icon}
+        &nbsp;&nbsp;&nbsp;
+        {title}
+        &nbsp;
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      fullScreen, selecteds, activeKey, offsetTop
+    } = this.state;
+    const fScrnClass = fullScreen ? 'full-screen' : 'normal-screen';
+
+    const selectedElements = selecteds.map((el, i) => {
+      if (!el) return (<span />);
+      const key = `${el.type}-${el.id}`;
+      return (
+        <Tab
+          key={key}
+          eventKey={i}
+          unmountOnExit
+          title={this.tabTitle(el, i)}
+        >
+          {this.content(el)}
+        </Tab>
+      );
+    });
+
+    return (
+      <div>
+        <StickyDiv zIndex={fullScreen ? 9 : 2} offsetTop={offsetTop}>
+          <div className={fScrnClass}>
+            <Tabs
+              id="elements-tabs"
+              activeKey={activeKey}
+              onSelect={DetailActions.select}
+            >
+              {selectedElements}
+            </Tabs>
+          </div>
+        </StickyDiv>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/ElementReactionLabels.js b/app/packs/src/components/ElementReactionLabels.js
new file mode 100644
index 000000000..bd47b59b2
--- /dev/null
+++ b/app/packs/src/components/ElementReactionLabels.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import {Label, Modal, Button} from 'react-bootstrap';
+
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+
+export default class ElementReactionLabels extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showWarning: false,
+      clicked: false
+    };
+    let { element } = props;
+
+    this.handleOnClick = this.handleOnClick.bind(this);
+    this.closeWarning = this.closeWarning.bind(this);
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    ElementStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    if (this.state.showWarning != state.elementWarning) {
+      this.setState({
+        showWarning: state.elementWarning
+      });
+    }
+  }
+
+  closeWarning() {
+    this.setState({showWarning: false });
+    ElementActions.closeWarning();
+  }
+
+  handleOnClick(e) {
+    let { element } = this.props;
+
+    ElementActions.tryFetchReactionById(element.tag.taggable_data.reaction_id);
+    this.setState({ clicked: true });
+    e.stopPropagation();
+  }
+
+  render() {
+    let { element } = this.props;
+
+    if (!element.tag || !element.tag.taggable_data ||
+        !element.tag.taggable_data.reaction_id)
+      return (<span />);
+
+    const { showWarning, clicked } = this.state;
+
+    const reaction = <i className="icon-reaction" />;
+
+
+    return (
+      <div style={{display: 'inline-block'}}>
+        <div onClick={this.handleOnClick}>
+          <span className="collection-label" key={element.id}>
+            <Label>{reaction}</Label>
+          </span>
+        </div>
+        {/* <div style={{clear: 'both'}} /> */}
+        <div className="center">
+          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
+            <Modal.Header closeButton>
+              <Modal.Title>No Access to Element</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              Sorry, you cannot access this Reaction.
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={this.closeWarning}>Close</Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/ElementWellplateLabels.js b/app/packs/src/components/ElementWellplateLabels.js
new file mode 100644
index 000000000..6b0762fd1
--- /dev/null
+++ b/app/packs/src/components/ElementWellplateLabels.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Label, Modal, Button } from 'react-bootstrap';
+
+import ElementActions from './actions/ElementActions';
+import ElementStore from './stores/ElementStore';
+
+export default class ElementWellplateLabels extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showWarning: false,
+      clicked: false
+    }
+
+    let { element } = props;
+
+    this.handleOnClick = this.handleOnClick.bind(this)
+    this.closeWarning = this.closeWarning.bind(this)
+
+    this.onStoreChange = this.onStoreChange.bind(this)
+  }
+
+  componentDidMount() {
+    ElementStore.listen(this.onStoreChange)
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.onStoreChange)
+  }
+
+  onStoreChange(state) {
+    if (this.state.showWarning != state.elementWarning) {
+      this.setState({
+        showWarning: state.elementWarning
+      })
+    }
+  }
+
+  closeWarning() {
+    this.setState({ showWarning: false });
+    ElementActions.closeWarning();
+  }
+
+  handleOnClick(e) {
+    let { element } = this.props;
+
+    ElementActions.tryFetchWellplateById(element.tag.taggable_data.wellplate_id)
+    this.setState({ clicked: true });
+    e.stopPropagation();
+  }
+
+  render() {
+    let { element } = this.props;
+
+    if (!element.tag || !element.tag.taggable_data ||
+        !element.tag.taggable_data.wellplate_id) {
+      return (<span />);
+    }
+
+    const { showWarning, clicked } = this.state;
+
+    const wellplate = <i className='icon-wellplate'/>
+
+    return (
+      <div style={{ display: 'inline-block' }}>
+        <div onClick={this.handleOnClick}>
+          <span className="collection-label" key={element.id}>
+            <Label>{wellplate}</Label>
+          </span>
+        </div>
+        {/* <div style={{clear: 'both'}} /> */}
+        <div className="center">
+          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
+            <Modal.Header closeButton>
+              <Modal.Title>No Access to Element</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              Sorry, you cannot access this Wellplate.
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={this.closeWarning}>Close</Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/ElementalComposition.js b/app/packs/src/components/ElementalComposition.js
new file mode 100644
index 000000000..7b62f09e5
--- /dev/null
+++ b/app/packs/src/components/ElementalComposition.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+
+export default class ElementalComposition extends React.Component {
+
+  elementsList(elemental_composition) {
+    let keys = Object.keys(elemental_composition.data);
+    if (keys.length == 0) {
+      return (
+        <p>
+          Sorry, it was not possible to calculate the elemental
+          compositon. Check data please.
+        </p>
+      )
+    }
+
+    let elements = [];
+
+    keys.map(function (key, index) {
+      let value = elemental_composition.data[key];
+      elements.push(
+        <span className="data-item" key={key}>
+          <strong>
+            {key}
+          </strong>
+          &nbsp;
+          &nbsp;
+          {Number(value).toFixed(2)}
+          &nbsp;
+          &nbsp;
+        </span>
+      );
+    });
+
+    return elements;
+  }
+
+  relatedLoading(elemental_composition) {
+    if (!elemental_composition.loading)
+      return false;
+
+    return (
+      <td className="loading" style={{ textAlign: "left" }} width="13%">
+        {elemental_composition.loading.toFixed(2)}
+      </td>
+    )
+  }
+
+  compositonTableHeader(elemental_composition) {
+    return (
+      <thead>
+        <tr>
+          <th>
+            <span>{elemental_composition.description}</span>
+          </th>
+
+          <th className="loading">
+            {elemental_composition.loading ? 'Loading (mmol/g)' : ''}
+          </th>
+        </tr>
+      </thead>
+    )
+  }
+
+  render() {
+    let { elemental_composition, formula_changed } = this.props;
+
+    return (
+      <table className="elemental-composition">
+        {this.compositonTableHeader(elemental_composition)}
+
+        <tbody>
+          <tr>
+            <td className="form-inline">
+              {this.elementsList(elemental_composition, formula_changed)}
+            </td>
+            {this.relatedLoading(elemental_composition)}
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+}
diff --git a/app/packs/src/components/ElementalCompositionCustom.js b/app/packs/src/components/ElementalCompositionCustom.js
new file mode 100644
index 000000000..34d2bb339
--- /dev/null
+++ b/app/packs/src/components/ElementalCompositionCustom.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import { FormControl } from 'react-bootstrap';
+import NumeralInput from 'src/apps/mydb/elements/details/NumeralInput';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+var _ = require('lodash');
+
+export default class ElementalCompositionCustom extends React.Component {
+
+  checkElementsSum(el_composition) {
+    let sum = 0.0;
+
+    let keys = Object.keys(el_composition.data);
+
+    keys.map(function (key, index) {
+      sum += parseFloat(el_composition.data[key] || 0.0);
+    });
+
+    if (sum > 100.0) {
+      NotificationActions.add({
+        message: 'Percentage sum is more than 100%',
+        level: 'error'
+      });
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  handleElementsListChanged(v, key, el_composition, handleElementalChanged) {
+    let oldval = el_composition.data[key];
+
+    el_composition.data[key] = v;
+
+    if (this.checkElementsSum(el_composition)) {
+      handleElementalChanged(el_composition)
+    }
+  }
+
+  elementsList(el_composition, concat_formula) {
+    let elements = [];
+
+    let klass = this;
+    let handleElementalChanged = klass.props.handleElementalChanged;
+    let newData = {};
+
+    // be sure that 3, 2-symbol (Br) elements are all before one-symbol (B)!
+    // TODO: check performance
+    let mendeleev = /(Uut|Uup|Uus|Uuo|He|Li|Be|Ne|Na|Mg|Al|Si|Cl|Ar|Ca|Sc|Ti|Cr|Mn|Fe|Co|Ni|Cu|Zn|Ga|Ge|As|Se|Br|Kr|Rb|Sr|Zr|Nb|Mo|Tc|Ru|Rh|Pd|Ag|Cd|In|Sn|Sb|Te|Xe|Cs|Ba|La|Ce|Pr|Nd|Pm|Sm|Eu|Gd|Tb|Dy|Ho|Er|Tm|Yb|Lu|Hf|Ta|Re|Os|Ir|Pt|Au|Hg|Tl|Pb|Bi|Po|At|Rn|Fr|Ra|Ac|Th|Pa|Np|Pu|Am|Cm|Bk|Cf|Es|Fm|Md|No|Lr|Rf|Db|Sg|Bh|Hs|Mt|Ds|Rg|Cn|Fl|Lv|H|B|C|N|O|F|P|S|K|V|Y|I|W|U)/g
+    let keys = _.uniq(concat_formula.match(mendeleev)).sort();
+
+    // add new key to custom composition, so that we have new input
+    keys.forEach(function (key) {
+      newData[key] = (el_composition.data[key] || 0.0);
+      elements.push(<NumeralInput
+        className="padding-left"
+        numeralFormat='0,0.00'
+        label={key}
+        key={key + 'found'}
+        value={newData[key]}
+        defaultValue={newData[key]}
+        onChange={(v) => klass.handleElementsListChanged(v, key, el_composition, handleElementalChanged)}
+      />
+      );
+    });
+
+    el_composition.data = newData;
+
+    return elements;
+  }
+
+  hideLoading(elemental_composition) {
+    let c_type = elemental_composition.composition_type;
+    return this.props.hideLoading || !elemental_composition.loading;
+  }
+
+  relatedLoading(el_composition) {
+    if (this.hideLoading(el_composition))
+      return false;
+
+    return (
+      <td className="loading" style={{ textAlign: "left" }} width="13%">
+        <FormControl type="text"
+          key={"mc-loading" + (el_composition.id || 0).toString()}
+          defaultValue={el_composition.loading || ''}
+          value={el_composition.loading && el_composition.loading.toFixed(2) || ''}
+          disabled
+          readOnly
+        />
+      </td>
+    )
+  }
+
+  compositonTableHeader(elemental_composition) {
+    return (
+      <thead>
+        <tr>
+          <th>
+            <span>{elemental_composition.description}</span>
+          </th>
+
+          <th className="loading">
+            {!this.hideLoading(elemental_composition) ? 'Loading (mmol/g)' : ''}
+          </th>
+        </tr>
+      </thead>
+    )
+  }
+
+  render() {
+    let { elemental_composition, concat_formula, parent } = this.props;
+
+    if (!elemental_composition) return false;
+
+    return (
+      <table className="elemental-composition-custom">
+        {this.compositonTableHeader(elemental_composition)}
+
+        <tbody>
+          <tr>
+            <td className="form-inline">
+              {this.elementsList(elemental_composition, concat_formula)}
+            </td>
+            {this.relatedLoading(elemental_composition)}
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+}
diff --git a/app/packs/src/components/ElementalCompositionGroup.js b/app/packs/src/components/ElementalCompositionGroup.js
new file mode 100644
index 000000000..a423357c5
--- /dev/null
+++ b/app/packs/src/components/ElementalCompositionGroup.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import ElementalComposition from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalComposition'
+import ElementalCompositionCustom from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalCompositionCustom'
+
+export default class ElementalCompositionGroup extends React.Component {
+
+  handleElementalChanged(el_composition) {
+    this.props.handleSampleChanged(this.props.sample)
+  }
+
+  render() {
+    let { sample, show } = this.props;
+    let elemental_compositions = sample.elemental_compositions;
+
+    let display_error = true;
+    let data = [];
+    let el_composition_custom;
+
+    if (elemental_compositions.length == 1) {
+      data = '';
+      display_error = false;
+    }
+    else if (sample.formulaChanged) {
+      data = (
+        <p>
+          Formula has been changed. Please save sample to calculate the
+          elemental compositon.
+        </p>
+      )
+    }
+
+    elemental_compositions.map((elemental_composition, key) => {
+      if (Object.keys(elemental_composition.data).length)
+        display_error = false;
+
+      if (elemental_composition.composition_type == 'found') {
+        el_composition_custom = elemental_composition;
+      } else if (data.constructor === Array) {
+        data.push(
+          <ElementalComposition
+            elemental_composition={elemental_composition}
+            key={elemental_composition.id} />
+        );
+      }
+    });
+
+    if (display_error) {
+      data = (
+        <p>
+          Sorry, it was not possible to calculate the elemental
+          compositon. Check data please.
+        </p>
+      )
+    }
+
+    const custom = sample.can_update
+      ? (<ElementalCompositionCustom
+        handleElementalChanged={(el) => this.handleElementalChanged(el)}
+        elemental_composition={el_composition_custom}
+        hideLoading={!sample.contains_residues}
+        concat_formula={sample.concat_formula}
+        key={'elem_composition_found'} />)
+      : null;
+
+    if (!sample.molecule_formula) {
+      return false;
+    }
+
+    const label = sample.contains_residues ? <label>Elemental composition</label> : false
+
+    return (
+      <div>
+        {label}
+        {data}
+        {custom}
+      </div>
+    )
+
+  }
+}
diff --git a/app/packs/src/components/Elements.js b/app/packs/src/components/Elements.js
new file mode 100644
index 000000000..46d54abd6
--- /dev/null
+++ b/app/packs/src/components/Elements.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { Col } from 'react-bootstrap';
+
+import ElementsList from 'src/apps/mydb/elements/list/ElementsList';
+import ElementDetails from 'src/apps/mydb/elements/details/ElementDetails';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+
+export default class Elements extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentElement: null
+    };
+
+    this.handleOnChange = this.handleOnChange.bind(this);
+  }
+
+  componentDidMount() {
+    ElementStore.listen(this.handleOnChange);
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.handleOnChange);
+  }
+
+  handleOnChange(state) {
+    const { currentElement } = state;
+    this.setState({ currentElement });
+  }
+
+  render() {
+    const { currentElement } = this.state;
+    const showReport = (currentElement || []).type === 'report';
+
+    let md = 12;
+    const overview = !(currentElement);
+    let page = null;
+
+    if (currentElement) {
+      md = 5;
+      page = (
+        <Col md={7} className="small-col">
+          <ElementDetails currentElement={currentElement} />
+        </Col>
+      );
+    }
+
+    return (
+      <div>
+        <Col md={md} className="small-col">
+          <ElementsList overview={overview} showReport={showReport} />
+        </Col>
+        {page}
+      </div>
+    );
+  }
+}
+
diff --git a/app/packs/src/components/ElementsTable.js b/app/packs/src/components/ElementsTable.js
new file mode 100644
index 000000000..b02cd0858
--- /dev/null
+++ b/app/packs/src/components/ElementsTable.js
@@ -0,0 +1,412 @@
+import React from 'react';
+
+import {
+  Pagination, Form, Col, Row, InputGroup, FormGroup, FormControl, Glyphicon, Tooltip, OverlayTrigger
+} from 'react-bootstrap';
+import DatePicker from 'react-datepicker';
+import deepEqual from 'deep-equal';
+
+import UIStore from './stores/UIStore';
+import UIActions from './actions/UIActions';
+import ElementActions from './actions/ElementActions';
+import { stopEvent } from './utils/DomHelper';
+
+import ElementStore from './stores/ElementStore';
+import ElementAllCheckbox from './ElementAllCheckbox';
+import ElementsTableEntries from './ElementsTableEntries';
+import ElementsTableSampleEntries from './ElementsTableSampleEntries';
+import Switch from './Switch';
+
+export default class ElementsTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      elements: [],
+      currentElement: null,
+      ui: {},
+      sampleCollapseAll: false,
+      moleculeSort: false,
+      advancedSearch: false,
+      productOnly: false,
+      page: null,
+      pages: null,
+      perPage: null,
+      totalElements: null
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onChangeUI = this.onChangeUI.bind(this);
+
+    this.collapseSample = this.collapseSample.bind(this);
+    this.changeSort = this.changeSort.bind(this);
+    this.changeDateFilter = this.changeDateFilter.bind(this);
+
+    this.toggleProductOnly = this.toggleProductOnly.bind(this);
+    this.setFromDate = this.setFromDate.bind(this);
+    this.setToDate = this.setToDate.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.getState();
+    ElementStore.listen(this.onChange);
+    UIStore.listen(this.onChangeUI);
+    this.initState();
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.onChange);
+    UIStore.unlisten(this.onChangeUI);
+  }
+
+  onChangeUI(state) {
+    if (typeof state[this.props.type] === 'undefined' || state[this.props.type] === null) {
+      return;
+    }
+    const { checkedIds, uncheckedIds, checkedAll } = state[this.props.type];
+    const {
+      filterCreatedAt, fromDate, toDate, number_of_results, currentSearchSelection, productOnly
+    } = state;
+
+    // check if element details of any type are open at the moment
+    const currentId = state.sample.currentId || state.reaction.currentId ||
+                      state.wellplate.currentId;
+
+    let isAdvS = false;
+    if (currentSearchSelection && currentSearchSelection.search_by_method) {
+      isAdvS = currentSearchSelection.search_by_method === 'advanced';
+    }
+
+    const stateChange = (
+      checkedIds || uncheckedIds || checkedAll || currentId || filterCreatedAt ||
+      fromDate || toDate || productOnly !== this.state.productOnly ||
+      isAdvS !== this.state.advancedSearch
+    );
+
+    if (stateChange) {
+      this.setState({
+        filterCreatedAt,
+        ui: {
+          checkedIds,
+          uncheckedIds,
+          checkedAll,
+          currentId,
+          number_of_results,
+          fromDate,
+          toDate
+        },
+        productOnly,
+        advancedSearch: isAdvS
+      });
+    }
+  }
+
+  onChange(state) {
+    const type = this.props.type + 's';
+    const elementsState = (state && state.elements && state.elements[type]) || {};
+    const { elements, page, pages, perPage, totalElements } = elementsState;
+
+    let currentElement;
+    if(!state.currentElement || state.currentElement.type == this.props.type) {
+      currentElement = state.currentElement
+    }
+
+    const elementsDidChange = elements && ! deepEqual(elements, this.state.elements);
+    const currentElementDidChange = !deepEqual(currentElement, this.state.currentElement);
+
+    const nextState = { page, pages, perPage, totalElements, currentElement }
+    if (elementsDidChange) { nextState.elements = elements; }
+    if (elementsDidChange || currentElementDidChange) { this.setState(nextState); }
+  }
+
+  initState() {
+    this.onChange(ElementStore.getState());
+  }
+
+  collapseSample(sampleCollapseAll) {
+    this.setState({sampleCollapseAll: !sampleCollapseAll})
+  }
+
+  changeSort() {
+    let {moleculeSort} = this.state
+    moleculeSort = !moleculeSort
+    this.setState({
+      moleculeSort
+    }, () => ElementActions.changeSorting(moleculeSort))
+  }
+
+  handlePaginationSelect(eventKey) {
+    const {pages} = this.state;
+    const {type} = this.props;
+
+    if(eventKey > 0 && eventKey <= pages) {
+      this.setState({
+        page: eventKey
+      }, () => UIActions.setPagination({type, page: this.state.page}));
+    }
+  }
+
+  pagination() {
+
+    if(pages <= 1) {
+      return;
+    }
+
+    const {page, pages} = this.state;
+    let items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="First" onClick={() => this.handlePaginationSelect(1)} />);
+    if (page>1) {
+      items.push(<Pagination.Prev key="Prev" onClick={() => this.handlePaginationSelect(page - 1)} />);
+    }
+    for (let _page = minPage; _page <= maxPage; _page=_page+1) {
+      items.push(
+        <Pagination.Item
+          key={`eltPage${_page}`}
+          active={_page === page}
+          onClick={() => this.handlePaginationSelect(_page)}>
+            {_page}
+        </Pagination.Item>
+      );
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="Ell" />);
+    }
+    if (page==pages) {
+      items.push(<Pagination.Next key="Next" onClick={() => this.handlePaginationSelect(page+1)} />);
+    }
+    items.push(<Pagination.Last key="Last" onClick={() => this.handlePaginationSelect(pages)} />);
+
+    return (
+      <div className="list-pagination">
+      <Pagination>
+        { items }
+      </Pagination>
+      </div>
+    )
+  }
+
+  handleNumberOfResultsChange(event, query=false) {
+    const { value } = event.target;
+    const { type } = this.props;
+    console.log(type);
+    if (parseInt(value, 10) > 0) {
+      UIActions.changeNumberOfResultsShown(value);
+      if (query === true) ElementActions.refreshElements(type);
+    }
+  }
+
+  handleKeyDown(event) {
+    switch (event.keyCode) {
+      case 13: // Enter
+        stopEvent(event);
+        break;
+      default:
+        break;
+    }
+  }
+
+  numberOfResultsInput() {
+    const { ui } = this.state
+    return (
+      <Form horizontal className='list-show-count'>
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl type="text" style={{textAlign: 'center', zIndex: 0}}
+              onChange={event => this.handleNumberOfResultsChange(event, false)}
+              onBlur={event => this.handleNumberOfResultsChange(event, true)}
+              onKeyDown={event => this.handleKeyDown(event)}
+              value={ui.number_of_results ? ui.number_of_results : 0} />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  toggleProductOnly() {
+    UIActions.setProductOnly(!this.state.productOnly);
+  }
+
+  changeDateFilter() {
+    let { filterCreatedAt } = this.state;
+    filterCreatedAt = !filterCreatedAt;
+    UIActions.setFilterCreatedAt(filterCreatedAt);
+  }
+
+  setFromDate(fromDate) {
+    if (this.state.fromDate !== fromDate) UIActions.setFromDate(fromDate);
+  }
+
+  setToDate(toDate) {
+    if (this.state.toDate !== toDate) UIActions.setToDate(toDate);
+  }
+
+  renderHeader() {
+    const {
+      sampleCollapseAll,
+      moleculeSort, ui,
+      advancedSearch, productOnly
+    } = this.state;
+    const { fromDate, toDate } = ui;
+    const { type, showReport } = this.props;
+
+    const collapseIcon = sampleCollapseAll ? 'chevron-right' : 'chevron-down';
+
+    let switchBtnTitle = 'Change sorting to sort by ';
+    let checkedLbl = 'Molecule';
+    let uncheckedLbl = 'Sample';
+    if (advancedSearch) {
+      switchBtnTitle += (moleculeSort ? 'order of input' : 'sample last updated');
+      checkedLbl = 'Updated';
+      uncheckedLbl = 'Order';
+    } else {
+      switchBtnTitle += (moleculeSort ? 'Sample' : 'Molecule');
+    }
+
+    let sampleHeader = (<span />);
+    if (type === 'sample') {
+      const color = productOnly ? '#5cb85c' : 'currentColor';
+      sampleHeader = (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <Switch
+            checked={moleculeSort}
+            style={{ marginTop: '3px', width: '85px' }}
+            onChange={this.changeSort}
+            title={switchBtnTitle}
+            checkedChildren={checkedLbl}
+            unCheckedChildren={uncheckedLbl}
+          />
+          &nbsp;&nbsp;
+          <button
+            style={{ border: 'none' }}
+            onClick={this.toggleProductOnly}
+          >
+            <i
+              style={{ cursor: 'pointer', color }}
+              className="fa fa-lg fa-product-hunt"
+            />
+          </button>
+          &nbsp;&nbsp;
+          <Glyphicon
+            glyph={collapseIcon}
+            title="Collapse/Uncollapse"
+            onClick={() => this.collapseSample(sampleCollapseAll)}
+            style={{
+              fontSize: '20px',
+              cursor: 'pointer',
+              color: '#337ab7',
+              top: 0
+            }}
+          />
+        </div>
+      );
+    }
+    const dateTitle = this.state.filterCreatedAt === true ? 'filter by creation date' : 'filter by update date';
+    const btnIcon = this.state.filterCreatedAt === true ? 'fa-calendar-o' : 'fa-calendar';
+
+    const inchiTooltip = <Tooltip id="date_tooltip">{dateTitle}</Tooltip>;
+    const dateIcon = <i className={`fa ${btnIcon}`} />;
+
+    const headerRight = (
+      <div className="header-right" style={{paddingRight: '25px'}}>
+        <OverlayTrigger placement="top" overlay={inchiTooltip}>
+          <button style={{ border: 'none' }} onClick={this.changeDateFilter} >
+            {dateIcon}
+          </button>
+        </OverlayTrigger>
+        <div className="sample-list-from-date">
+          <DatePicker
+            selected={fromDate}
+            placeholderText="From"
+            onChange={this.setFromDate}
+            popperPlacement="bottom-start"
+            isClearable
+            dateFormat="DD-MM-YY"
+          />
+        </div>
+        <div className="sample-list-to-date">
+          <DatePicker
+            selected={toDate}
+            placeholderText="To"
+            popperPlacement="bottom"
+            onChange={this.setToDate}
+            isClearable
+            dateFormat="DD-MM-YY"
+          />
+        </div>
+        &nbsp;&nbsp;
+        {sampleHeader}
+      </div>
+    );
+
+
+    return (
+      <div className="table-header" >
+        <div className="select-all">
+          <ElementAllCheckbox type={type} ui={ui} showReport={showReport} />
+        </div>
+        {headerRight}
+      </div>
+    );
+  }
+
+  renderEntries() {
+    const {
+      elements,
+      ui,
+      currentElement,
+      sampleCollapseAll,
+      moleculeSort
+    } = this.state
+
+    const { overview, type } = this.props;
+    let elementsTableEntries = null;
+
+    if (type === 'sample') {
+      elementsTableEntries = (
+        <ElementsTableSampleEntries collapseAll={sampleCollapseAll}
+          elements={elements} currentElement={currentElement}
+          showDragColumn={!overview} ui={ui} moleculeSort={moleculeSort}
+          onChangeCollapse={(checked) => this.collapseSample(!checked)}
+        />
+      );
+    } else {
+      elementsTableEntries = (
+        <ElementsTableEntries
+          elements={elements} currentElement={currentElement}
+          showDragColumn={!overview} ui={ui}
+        />
+      );
+    }
+
+    return (
+      <div className="list-elements">
+        {elementsTableEntries}
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div className="list-container">
+        {this.renderHeader()}
+        {this.renderEntries()}
+        <div className="list-container-bottom">
+          <Row>
+            <Col sm={6}>{this.pagination()}</Col>
+            <Col sm={6}>{this.numberOfResultsInput()}</Col>
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/ElementsTableEntries.js b/app/packs/src/components/ElementsTableEntries.js
new file mode 100644
index 000000000..f466a56ac
--- /dev/null
+++ b/app/packs/src/components/ElementsTableEntries.js
@@ -0,0 +1,396 @@
+import React, {Component} from 'react';
+import SVG from 'react-inlinesvg';
+import { Tooltip, OverlayTrigger, Table, Popover } from 'react-bootstrap';
+import { filter } from 'lodash';
+import ElementContainer from './ElementContainer'
+import ElementCheckbox from './ElementCheckbox';
+import ElementCollectionLabels from './ElementCollectionLabels';
+import ElementAnalysesLabels from './ElementAnalysesLabels';
+import ArrayUtils from './utils/ArrayUtils';
+
+import UIStore from './stores/UIStore';
+import ElementStore from './stores/ElementStore';
+import KeyboardStore from './stores/KeyboardStore';
+
+import DragDropItemTypes from './DragDropItemTypes';
+import classnames from 'classnames';
+import XTdCont from './extra/ElementsTableEntriesXTdCont';
+import { elementShowOrNew } from './routesUtils';
+import SvgWithPopover from './common/SvgWithPopover';
+import UserStore from './stores/UserStore';
+import { PublishedTag } from './PublishCommon';
+
+const reactionPublished = (element) => {
+  if (element.type === 'reaction') {
+    return (
+      <PublishedTag element={element} />
+    );
+  }
+  return (<span />);
+};
+
+
+export default class ElementsTableEntries extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      keyboardElementIndex: null
+    }
+
+    this.entriesOnKeyDown = this.entriesOnKeyDown.bind(this)
+  }
+
+  componentDidMount() {
+    KeyboardStore.listen(this.entriesOnKeyDown)
+  }
+
+  componentWillUnmount() {
+    KeyboardStore.unlisten(this.entriesOnKeyDown)
+  }
+
+  entriesOnKeyDown(state) {
+    let context = state.context
+    const {elements} = this.props;
+
+    if (elements[0] == null || context != elements[0].type)
+      return false
+
+    let documentKeyDownCode = state.documentKeyDownCode
+    let {keyboardElementIndex} = this.state
+
+    switch(documentKeyDownCode) {
+      case 13: // Enter
+      case 39: // Right
+        if (keyboardElementIndex != null && elements[keyboardElementIndex] != null) {
+          this.showDetails(elements[keyboardElementIndex])
+        }
+        break
+
+      case 38: // Up
+        if (keyboardElementIndex > 0) {
+          keyboardElementIndex--
+        } else {
+          keyboardElementIndex = 0
+        }
+        break
+      case 40: // Down
+        if (keyboardElementIndex == null) {
+          keyboardElementIndex = 0
+        } else if (keyboardElementIndex < elements.length - 1){
+          keyboardElementIndex++
+        }
+
+        break
+    }
+    this.setState({keyboardElementIndex})
+  }
+
+  isElementChecked(element) {
+    let {checkedIds, uncheckedIds, checkedAll} = this.props.ui;
+    return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))
+      || ArrayUtils.isValInArray(checkedIds || [], element.id);
+  }
+
+  isElementSelected(element) {
+    const {currentElement} = this.props;
+    return (currentElement && currentElement.id == element.id);
+  }
+
+  isCurrEleDropType(type) {
+    const { currentElement } = ElementStore.getState();
+    const targets = {
+      sample: ['reaction', 'wellplate'],
+      reaction: ['research_plan'],
+      wellplate: ['screen'],
+      generalProcedure: ['reaction'],
+    };
+    return type && currentElement && targets[type].includes(currentElement.type)
+  }
+
+  showDetails(element) {
+    const { currentCollection, isSync } = UIStore.getState();
+    const { id, type } = element;
+    const uri = isSync
+      ? `/scollection/${currentCollection.id}/${type}/${id}`
+      : `/collection/${currentCollection.id}/${type}/${id}`;
+    Aviator.navigate(uri, { silent: true });
+    const e = { type, params: { collectionID: currentCollection.id } };
+    e.params[`${type}ID`] = id;
+
+    const genericEls = (UserStore.getState() && UserStore.getState().genericEls) || [];
+    if (genericEls.find(el => el.name == type)) {
+      e.klassType = 'GenericEl';
+    }
+
+    elementShowOrNew(e)
+  }
+
+  dragHandle(element) {
+    const sourceType = this.dropSourceType(element);
+    return (
+      <ElementContainer
+        key={element.id}
+        sourceType={sourceType}
+        element={element}
+      />
+    );
+  }
+
+  dropSourceType(el) {
+    let sourceType = '';
+    const isDropForSample =
+      el.type === 'sample' && this.isCurrEleDropType('sample');
+    const isDropForWellPlate =
+      el.type === 'wellplate' && this.isCurrEleDropType('wellplate');
+    const isDropForResearchPlan =
+      el.type === 'reaction' && this.isCurrEleDropType('reaction');
+    const isDropForGP = el.type === 'reaction' && el.role === 'gp' &&
+      this.isCurrEleDropType('generalProcedure');
+
+    if (isDropForSample) {
+      sourceType = DragDropItemTypes.SAMPLE;
+    } else if (isDropForWellPlate) {
+      sourceType = DragDropItemTypes.WELLPLATE;
+    } else if (isDropForResearchPlan) {
+      sourceType = DragDropItemTypes.REACTION;
+    } else if (isDropForGP) {
+      sourceType = DragDropItemTypes.GENERALPROCEDURE;
+    }
+    return sourceType;
+  }
+
+  topSecretIcon(element) {
+    if (element.type == 'sample' && element.is_top_secret == true) {
+      const tooltip = (<Tooltip id="top_secret_icon">Top secret</Tooltip>);
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <i className="fa fa-user-secret"></i>
+        </OverlayTrigger>
+      )
+    }
+  }
+
+  previewColumn(element) {
+    const {ui} = this.props;
+    const classNames = classnames(
+      {
+        'molecule': element.type == 'sample'
+      },
+      {
+        'reaction': element.type == 'reaction'
+      },
+      {
+        'molecule-selected': element.type == 'sample' && this.isElementSelected(element)
+      },
+      {
+        'reaction': element.type == 'reaction' && this.isElementSelected(element)
+      },
+      {
+        'research_plan': element.type == 'research_plan'
+      }
+    );
+
+    let svgContainerStyle = {
+      verticalAlign: 'middle',
+      textAlign: 'center',
+      cursor: 'pointer'
+    };
+    let tdExtraContents = [];
+    for (let j=0;j < XTdCont.count;j++){
+      let NoName = XTdCont["content"+j];
+      tdExtraContents.push(<NoName element={element}/>);
+    }
+
+    const {showPreviews} = UIStore.getState();
+    const clickToShowDetails = e => this.showDetails(element);
+    if (showPreviews && (element.type == 'reaction')) {
+      return (
+        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
+          <SVG src={element.svgPath} className={classNames} key={element.svgPath}/>
+          {tdExtraContents.map((e)=>{return e;})}
+        </td>
+      );
+    } else if (element.type === 'research_plan') {
+      if (element.thumb_svg !== 'not available') {
+        return (
+          <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
+            <img src={`data:image/png;base64,${element.thumb_svg}`} alt="" style={{ cursor: 'pointer' }} />
+            {tdExtraContents.map((e) => { return e; })}
+          </td>
+        );
+      }
+      return (
+        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
+          {tdExtraContents.map((e) => { return e; })}
+        </td>
+      );
+    }
+    return <td style={{display:'none', cursor: 'pointer'}} onClick={e => this.showDetails(element)}/>;
+  }
+
+  dragColumn(element) {
+    const {showDragColumn} = this.props;
+    if(showDragColumn) {
+      return (
+        <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
+          {this.dragHandle(element)}
+        </td>
+      );
+    } else {
+     return <td style={{display:'none'}}></td>;
+    }
+  }
+
+  reactionStatus(element) {
+    if (element.type === 'reaction' && element.status) {
+      const tooltip = (
+        <Tooltip id={`reaction_${element.status}`}>
+          {element.status} Reaction
+        </Tooltip>
+      );
+
+      let icon = null;
+      switch (element.status) {
+        case 'Planned':
+          icon = <i className="fa fa-clock-o c-bs-warning" />;
+          break;
+        case 'Running':
+          icon = (
+            <span
+              style={{ width: '12px', height: '14px', lineHeight: '14px' }}
+              className="fa fa-stack"
+            >
+              <i className="fa fa-stack-1x fa-hourglass-1 running-1 c-bs-warning" />
+              <i className="fa fa-stack-1x fa-hourglass-2 running-2 c-bs-warning" />
+              <i className="fa fa-stack-1x fa-hourglass-3 running-3 c-bs-warning" />
+            </span>
+          );
+          break;
+        case 'Done':
+          icon = <i className="fa fa-hourglass-3 c-bs-primary" />;
+          break;
+        case 'Analyses Pending':
+          icon = <i className="fa fa-ellipsis-h c-bs-primary" />;
+          break;
+        case 'Successful':
+          icon = <i className="fa fa-check-circle-o c-bs-success" />;
+          break;
+        case 'Not Successful':
+          icon = <i className="fa fa-times-circle-o c-bs-danger" />;
+          break;
+        default:
+          break;
+      }
+
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <div>{icon}</div>
+        </OverlayTrigger>
+      );
+    }
+  }
+
+  reactionRole(element) {
+    let tooltip = null;
+    if (element.type == 'reaction') {
+      switch (element.role) {
+        case "gp":
+          tooltip = <Tooltip id="roleTp">General Procedure</Tooltip>;
+          return (
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <i className="fa fa-home c-bs-primary"/>
+            </OverlayTrigger>
+          )
+          break;
+        case "parts":
+          tooltip = <Tooltip id="roleTp">Parts of General Procedure</Tooltip>;
+          return (
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <i className="fa fa-bookmark c-bs-success"/>
+            </OverlayTrigger>
+          )
+          break;
+        case "single":
+          tooltip = <Tooltip id="roleTp">Single</Tooltip>;
+          return (
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <i className="fa fa-asterisk c-bs-danger"/>
+            </OverlayTrigger>
+          )
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  sampleAnalysesLabels(element) {
+    if (element.type == 'sample') {
+      return (
+        <ElementAnalysesLabels element={element} key={element.id+"_analyses"}/>
+      )
+    }
+  }
+
+  render() {
+    const {elements} = this.props;
+    let {keyboardElementIndex} = this.state
+
+    return (
+      <Table className="elements" bordered hover style={{borderTop: 0}}>
+        <tbody>
+        {elements.map((element, index) => {
+          const sampleMoleculeName = (element.type == 'sample') ? element.molecule.iupac_name: '';
+          let style = {};
+          if (this.isElementSelected(element) ||
+             (keyboardElementIndex != null && keyboardElementIndex == index)) {
+            style = {
+            color: '#000',
+            background: '#ddd',
+            border: '4px solid #337ab7'
+            }
+          }
+
+          return (
+            <tr key={index} style={style}>
+              <td width="30px">
+                <ElementCheckbox element={element} key={element.id} checked={this.isElementChecked(element)}/><br/>
+              </td>
+              <td onClick={e => this.showDetails(element)} style={{ cursor: 'pointer' }} width={element.type === 'research_plan' ? '280px': 'unset'}>
+                <div>
+                  {
+                      <SvgWithPopover
+                        hasPop={['reaction'].includes(element.type)}
+                        previewObject={{
+                          txtOnly: element.title(),
+                          isSVG: true,
+                          src: element.svgPath
+                        }}
+                        popObject={{
+                          title: (element.type === 'reaction' && element.short_label) || '',
+                          src: element.svgPath,
+                          height: '26vh',
+                          width: '52vw' }}
+                      />
+                  }
+                  {this.reactionStatus(element)}
+                  {' '}
+                  {this.reactionRole(element)}
+                  <br />
+                  {sampleMoleculeName}
+                  {reactionPublished(element)}
+                  <ElementCollectionLabels element={element} key={element.id}/>
+                  {this.sampleAnalysesLabels(element)}
+                  {this.topSecretIcon(element)}
+                </div>
+              </td>
+              {this.previewColumn(element)}
+              {this.dragColumn(element)}
+            </tr>
+          )
+        })}
+        </tbody>
+      </Table>
+    );
+  }
+}
diff --git a/app/packs/src/components/ElementsTableSampleEntries.js b/app/packs/src/components/ElementsTableSampleEntries.js
new file mode 100644
index 000000000..261a21465
--- /dev/null
+++ b/app/packs/src/components/ElementsTableSampleEntries.js
@@ -0,0 +1,442 @@
+import React, { Component } from 'react';
+import {
+  Table, Button, Tooltip, OverlayTrigger, Label
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import ElementCheckbox from 'src/apps/mydb/elements/list/ElementCheckbox';
+import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
+import ElementAnalysesLabels from 'src/apps/mydb/elements/labels/ElementAnalysesLabels';
+import ElementReactionLabels from 'src/apps/mydb/elements/labels/ElementReactionLabels';
+import ElementWellplateLabels from 'src/apps/mydb/elements/labels/ElementWellplateLabels';
+import GenericElementLabels from 'src/apps/mydb/elements/labels/GenericElementLabels';
+import PubchemLabels from 'src/components/pubchem/PubchemLabels';
+import ChemrepoLabels from 'src/apps/mydb/elements/labels/ChemrepoLabels';
+import ComputedPropLabel from 'src/apps/mydb/elements/labels/ComputedPropLabel';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import ElementContainer from 'src/apps/mydb/elements/list/ElementContainer';
+
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import KeyboardStore from 'src/stores/alt/stores/KeyboardStore';
+
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import SampleName from 'src/components/common/SampleName';
+import { sampleShowOrNew } from 'src/utilities/routesUtils';
+import SvgWithPopover from 'src/components/common/SvgWithPopover';
+import { ShowUserLabels } from 'src/components/UserLabels';
+import CommentIcon from 'src/components/comments/CommentIcon';
+
+import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';
+
+import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
+
+const buildFlattenSampleIds = (displayedMoleculeGroup) => {
+  let flatIndex = 0;
+  const flattenSamplesId = [];
+
+  displayedMoleculeGroup.forEach((groupSample, index) => {
+    const length = displayedMoleculeGroup[index].numSamples;
+    for (let i = 0; i < length; i++) {
+      flattenSamplesId[flatIndex + i] = groupSample[i].id;
+    }
+    flatIndex += length;
+  });
+
+  return flattenSamplesId;
+};
+
+const showDetails = (id) => {
+  const { currentCollection, isSync } = UIStore.getState();
+  const uri = `/${isSync ? 's' : ''}collection/${currentCollection.id}/sample/${id}`;
+  Aviator.navigate(uri, { silent: true });
+  sampleShowOrNew({ params: { sampleID: id, collectionID: currentCollection.id } });
+};
+
+const targets = {
+  sample: ['reaction', 'wellplate', 'device', 'research_plan'],
+  molecule: ['reaction'],
+};
+
+const isCurrEleDropType = (sourceType, targetType) => {
+  if (['molecule', 'sample'].includes(sourceType) && !['wellplate', 'device', 'research_plan'].includes(targetType)) {
+    return sourceType && targetType;
+  }
+  return sourceType && targetType && targets[sourceType].includes(targetType);
+};
+
+const dragColumn = (element, showDragColumn, sourceType, targetType) => {
+  if (showDragColumn) {
+    return (
+      <td style={{ verticalAlign: 'middle', textAlign: 'center' }} >
+        <ElementContainer
+          key={element.id}
+          sourceType={isCurrEleDropType(sourceType, targetType) ? sourceType : ''}
+          element={element}
+        />
+      </td>
+    );
+  }
+  return null;
+};
+
+const TopSecretIcon = ({ element }) => {
+  if (element.type === 'sample' && element.is_top_secret === true) {
+    const tooltip = (<Tooltip id="top_secret_icon">Top secret</Tooltip>);
+    return (
+      <OverlayTrigger placement="top" overlay={tooltip}>
+        <i className="fa fa-user-secret" />
+      </OverlayTrigger>
+    );
+  }
+  return null;
+};
+
+TopSecretIcon.propTypes = {
+  element: PropTypes.object,
+};
+
+const XvialIcon = ({ label }) => {
+  return (label !== '') ? (
+    <i
+      className="icon-xvial"
+      style={{ marginRight: '5px', fontSize: '20px' }}
+    />
+  ) : null;
+};
+
+XvialIcon.propTypes = {
+  label: PropTypes.string,
+};
+
+XvialIcon.defaultProps = {
+  label: ''
+};
+
+const showDecoupledIcon = (sample) => (sample.decoupled ? (
+  <div className="decoupled-icon" onClick={(e) => e.stopPropagation()}>
+    <OverlayTrigger placement="top" overlay={<Tooltip id="tip_decoupled_icon">is decoupled from molecule</Tooltip>}>
+      <Label><i className="fa fa-chain-broken" aria-hidden="true" /></Label>
+    </OverlayTrigger>
+  </div>
+) : null);
+
+const overlayToggle = <Tooltip id="toggle_molecule">Toggle Molecule</Tooltip>;
+
+const svgPreview = (showPreviews, sample) => (
+  <div style={{ float: 'left' }}>
+    {
+      showPreviews
+        ? <SvgWithPopover
+          hasPop
+          previewObject={{
+            txtOnly: '',
+            isSVG: true,
+            src: sample.svgPath
+          }}
+          popObject={{
+            title: sample.molecule_iupac_name,
+            src: sample.svgPath,
+            height: '26vh',
+            width: '52vw',
+          }}
+        />
+        : null
+    }
+  </div>
+);
+
+const MoleculeHeader = ({ sample, show, showDragColumn, onClick, targetType }) => {
+  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+
+  const { collId, showPreviews } = UIStore.getState();
+  return (
+    <tr
+      style={{ backgroundColor: '#F5F5F5', cursor: 'pointer' }}
+      onClick={onClick}
+    >
+      {sample.molecule?.inchikey === 'DUMMY' && sample.molfile == null ?
+        (<td colSpan="3" style={{ position: 'relative ' }} ><div><h4>(No-structure sample)</h4></div></td>) :
+        (
+          <td colSpan="2" style={{ position: 'relative ' }} >
+            {svgPreview(showPreviews, sample)}
+            <div style={{ position: 'absolute', right: '3px', top: '14px' }} >
+              <OverlayTrigger placement="bottom" overlay={overlayToggle} >
+                <span style={{ fontSize: 15, color: '#337ab7', lineHeight: '10px' }} >
+                  <i className={`glyphicon ${showIndicator}`} />
+                </span>
+              </OverlayTrigger>
+            </div>
+            <div style={{ paddingLeft: 5, wordWrap: 'break-word' }} >
+              <h4><SampleName sample={sample} /></h4>
+            </div>
+            <div style={{ position: 'absolute', top: '10px', right: '25px', float: 'right' }} >
+              <ChemrepoLabels chemrepoId={sample.molecule.chem_repo && sample.molecule.chem_repo.id} />
+              <PubchemLabels element={sample} />
+              <ChemotionTag tagData={sample.pubchem_tag} />
+            </div>
+            <div style={{ position: 'absolute', bottom: '10px', right: '25px', float: 'right' }} >
+              <ComputedPropLabel cprops={sample.molecule_computed_props} />
+            </div>
+          </td>
+        )
+      }
+      {sample.molecule?.inchikey === 'DUMMY' && sample.molfile == null ?
+        null : dragColumn(sample, showDragColumn, DragDropItemTypes.MOLECULE, targetType)}
+    </tr>
+  );
+}
+
+export default class ElementsTableSampleEntries extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      displayedMoleculeGroup: [],
+      moleculeGroupsShown: [],
+      flattenSamplesId: [],
+      keyboardIndex: null,
+      keyboardSeletectedElementId: null,
+    };
+
+    this.sampleOnKeyDown = this.sampleOnKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    KeyboardStore.listen(this.sampleOnKeyDown);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const displayedMoleculeGroup = [];
+    const { currentElement } = ElementStore.getState();
+    const { elements } = nextProps;
+    const moleculelist = {};
+    elements.forEach((sample) => {
+      let samples = [];
+      let molId = '';
+      if (sample.decoupled && sample.molfile) {
+        molId = `M${sample.id}`;
+      } else if (sample.stereo == null) {
+        molId = `M${sample.molecule.id}_any_any`;
+      } else {
+        molId = `M${sample.molecule.id}_${sample.stereo.abs || 'any'}_${sample.stereo.rel || 'any'}`;
+      }
+      if (moleculelist[molId]) {
+        samples = moleculelist[molId];
+      }
+      samples.push(sample);
+      moleculelist[molId] = samples;
+    });
+    Object.keys(moleculelist).forEach((moleculeId, idx) => {
+      displayedMoleculeGroup.push(moleculelist[moleculeId]);
+      let numSamples = moleculelist[moleculeId].length;
+      if (nextProps.moleculeSort && numSamples > 3) { numSamples = 3; }
+      displayedMoleculeGroup[idx].numSamples = numSamples;
+    })
+    this.setState({
+      displayedMoleculeGroup,
+      targetType: currentElement && currentElement.type,
+      flattenSamplesId: buildFlattenSampleIds(displayedMoleculeGroup)
+    }, this.forceUpdate());
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { collapseAll, showDragColumn, moleculeSort, currentElement, elements, ui } = this.props;
+    const { checkedAll, checkedIds, uncheckedIds } = ui;
+    const nextUi = nextProps.ui;
+    return collapseAll !== nextProps.collapseAll // Bool
+      || showDragColumn !== nextProps.showDragColumn // Bool
+      || moleculeSort !== nextProps.moleculeSort // Bool
+      || currentElement !== nextProps.currentElement // instance of Sample
+      || elements !== nextProps.elements // Arr
+      || checkedAll !== nextUi.checkedAll // Bool
+      || checkedIds !== nextUi.checkedIds // Immutable List
+      || uncheckedIds !== nextUi.uncheckedIds // Immutable List
+      || this.state.keyboardIndex !== nextState.keyboardIndex // int
+      || this.state.keyboardSeletectedElementId !== nextState.keyboardSeletectedElementId; // int
+  }
+
+  componentWillUnmount() {
+    KeyboardStore.unlisten(this.sampleOnKeyDown);
+  }
+
+  sampleOnKeyDown(state) {
+    const context = state.context;
+    if (context != 'sample') { return false; }
+
+    const documentKeyDownCode = state.documentKeyDownCode;
+    let { keyboardIndex, keyboardSeletectedElementId, flattenSamplesId } = this.state;
+
+    switch (documentKeyDownCode) {
+      case 13: // Enter
+      case 39: // Right
+        if (keyboardIndex != null && keyboardSeletectedElementId != null) {
+          showDetails(keyboardSeletectedElementId);
+        }
+        break;
+      case 38: // Up
+        if (keyboardIndex > 0) {
+          keyboardIndex--;
+        } else {
+          keyboardIndex = 0;
+        }
+        break;
+      case 40: // Down
+        if (keyboardIndex == null) {
+          keyboardIndex = 0;
+        } else if (keyboardIndex < (flattenSamplesId.length - 1)) {
+          keyboardIndex++;
+        }
+        break;
+      default:
+        break;
+    }
+
+    keyboardSeletectedElementId = flattenSamplesId[keyboardIndex];
+    this.setState({ keyboardIndex, keyboardSeletectedElementId });
+  }
+
+  showMoreSamples(index) {
+    const { displayedMoleculeGroup } = this.state;
+    let length = displayedMoleculeGroup[index].numSamples;
+    length += 3;
+    if (displayedMoleculeGroup[index].length < length) {
+      length = displayedMoleculeGroup[index].length;
+    }
+    displayedMoleculeGroup[index].numSamples = length;
+
+    this.setState({
+      displayedMoleculeGroup,
+      flattenSamplesId: buildFlattenSampleIds(displayedMoleculeGroup)
+    }, this.forceUpdate());
+  }
+
+
+  handleMoleculeToggle(moleculeName) {
+    let { moleculeGroupsShown } = this.state;
+    if (!moleculeGroupsShown.includes(moleculeName)) {
+      moleculeGroupsShown = moleculeGroupsShown.concat(moleculeName);
+    } else {
+      moleculeGroupsShown = moleculeGroupsShown.filter(item => item !== moleculeName);
+    }
+    this.setState({ moleculeGroupsShown }, this.forceUpdate());
+    this.props.onChangeCollapse(false);
+  }
+
+  isElementChecked(element) {
+    const { checkedIds, uncheckedIds, checkedAll } = this.props.ui;
+    return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))
+      || ArrayUtils.isValInArray(checkedIds || [], element.id);
+  }
+
+  isElementSelected(element) {
+    const { currentElement } = this.props;
+    return (currentElement && currentElement.id === element.id);
+  }
+
+
+  renderSamples(samples, index) {
+    const { keyboardSeletectedElementId, displayedMoleculeGroup } = this.state;
+    const { showDragColumn } = this.props;
+    const length = samples.length;
+    const numSamples = displayedMoleculeGroup[index].numSamples;
+
+    const sampleRows = samples.slice(0, numSamples).map((sample, ind) => {
+      const selected = this.isElementSelected(sample);
+      const style = (selected || keyboardSeletectedElementId === sample.id) ? {
+        color: '#fff', background: '#337ab7'
+      } : {};
+
+      return (
+        <tr key={ind} style={style}>
+          <td width="30px">
+            <ElementCheckbox
+              element={sample}
+              key={sample.id}
+              checked={this.isElementChecked(sample)}
+            />
+          </td>
+          <td
+            style={{ cursor: 'pointer' }}
+            onClick={showDetails.bind(this, sample.id)}
+          >
+            {sample.title(selected)}
+            <div style={{ float: 'right', display: 'flex', alignItems: 'center' }}>
+              <CommentIcon commentCount={sample.comment_count} />
+              {showDecoupledIcon(sample)}
+              <ShowUserLabels element={sample} />
+              <XvialIcon label={(sample.tag.taggable_data.xvial && sample.tag.taggable_data.xvial.num) || ''} />
+              <LabelPublication element={sample} key={sample.id + "_publication"} />
+              <PublishedTag element={sample} />
+              <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+              <ElementWellplateLabels element={sample} key={`${sample.id}_wellplate`} />
+              <GenericElementLabels element={sample} key={`${sample.id}_element`} />
+              <ElementCollectionLabels element={sample} key={`${sample.id}`} />
+              <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+              <TopSecretIcon element={sample} />
+            </div>
+          </td>
+          {dragColumn(sample, showDragColumn, DragDropItemTypes.SAMPLE, this.state.targetType)}
+        </tr>
+      );
+    });
+
+    if (numSamples < length) {
+      const showMoreSamples = (
+        <tr key={`${index}_showMore`}><td colSpan="3" style={{ padding: 0 }} >
+          <Button
+            bsStyle="info"
+            onClick={() => this.showMoreSamples(index)}
+            style={{ fontSize: '14px', width: '100%', float: 'left', borderRadius: '0px' }}
+          >Show more samples</Button>
+        </td></tr>
+      );
+      sampleRows.push(showMoreSamples);
+    }
+
+    return sampleRows;
+  }
+
+  renderMoleculeGroup(moleculeGroup, index) {
+    const { showDragColumn, collapseAll } = this.props;
+    const { moleculeGroupsShown, targetType } = this.state;
+    const molecule = moleculeGroup[0].molecule;
+    const moleculeName = molecule.iupac_name || molecule.inchistring;
+    const showGroup = !moleculeGroupsShown.includes(moleculeName) && !collapseAll;
+
+    return (
+      <tbody key={index}>
+        <MoleculeHeader
+          sample={moleculeGroup[0]}
+          show={showGroup}
+          showDragColumn={showDragColumn}
+          onClick={() => this.handleMoleculeToggle(moleculeName)}
+          targetType={targetType}
+        />
+        {showGroup ? this.renderSamples(moleculeGroup, index) : null}
+      </tbody>
+    );
+  }
+
+  render() {
+    const { displayedMoleculeGroup } = this.state;
+    return (
+      <Table className="sample-entries" >
+        {Object.keys(displayedMoleculeGroup).map((group, index) => {
+          const moleculeGroup = displayedMoleculeGroup[group];
+          const numSamples = displayedMoleculeGroup[group].numSamples;
+          return this.renderMoleculeGroup(moleculeGroup, index, numSamples);
+        })}
+      </Table>
+    );
+  }
+}
+
+ElementsTableSampleEntries.propTypes = {
+  onChangeCollapse: PropTypes.func,
+  collapseAll: PropTypes.bool,
+  elements: PropTypes.array,
+  currentElement: PropTypes.object,
+  showDragColumn: PropTypes.bool,
+  ui: PropTypes.object,
+  moleculeSort: PropTypes.bool,
+};
diff --git a/app/packs/src/components/ElementsTableSettings.js b/app/packs/src/components/ElementsTableSettings.js
new file mode 100644
index 000000000..7aaa9fca4
--- /dev/null
+++ b/app/packs/src/components/ElementsTableSettings.js
@@ -0,0 +1,188 @@
+import React from 'react';
+import Immutable from 'immutable';
+import {Popover, Button, FormGroup, Checkbox, OverlayTrigger} from 'react-bootstrap';
+import _ from 'lodash';
+
+import TabLayoutContainer from './TabLayoutContainer';
+
+import UserActions from './actions/UserActions';
+import UIActions from './actions/UIActions';
+
+import UIStore from './stores/UIStore';
+import UserStore from './stores/UserStore';
+
+export default class ElementsTableSettings extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: props.visible,
+      hidden: props.hidden,
+      currentType: '',
+      showSampleExternalName: false,
+      tableSchemePreviews: true
+    }
+
+    this.handleOnExit = this.handleOnExit.bind(this);
+    this.handleToggleSampleExt = this.handleToggleSampleExt.bind(this);
+    this.handleToggleScheme = this.handleToggleScheme.bind(this);
+    this.onChangeUser = this.onChangeUser.bind(this);
+    this.onChangeUI = this.onChangeUI.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChangeUser);
+    UIStore.listen(this.onChangeUI);
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onChangeUser);
+    UIStore.unlisten(this.onChangeUI);
+  }
+
+  onChangeUI(state) {
+    const tableSchemePreviews = state.showPreviews;
+
+    if (this.state.tableSchemePreviews != tableSchemePreviews) {
+      this.setState({ tableSchemePreviews });
+    }
+  }
+
+  onChangeUser(state) {
+    let { currentType, showSampleExternalName } = this.state;
+    let showExt = showSampleExternalName;
+    if (state.profile && state.profile.show_external_name) {
+      showExt = state.profile.show_external_name;
+    }
+
+    if (currentType != state.currentType || showSampleExternalName != showExt) {
+      this.setState({
+        currentType: state.currentType,
+        showSampleExternalName: showExt
+      })
+    }
+  }
+
+  handleOnExit() {
+    this.updateLayout();
+
+    if (this.state.currentType == "sample" || this.state.currentType == "reaction") {
+      const show_previews = UIStore.getState().showPreviews;
+      const cur_previews = this.state.tableSchemePreviews;
+      if (cur_previews != show_previews) {
+        UIActions.toggleShowPreviews(cur_previews);
+
+      }
+
+    }
+
+    const storeExt = UserStore.getState().profile.show_external_name;
+    if (this.state.showSampleExternalName != storeExt) {
+      UserActions.updateUserProfile(
+        { show_external_name: this.state.showSampleExternalName }
+      );
+    }
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      visible: nextProps.visible,
+      hidden: nextProps.hidden
+    });
+  }
+
+  handleToggleScheme() {
+    const { tableSchemePreviews } = this.state;
+    this.setState({ tableSchemePreviews: !tableSchemePreviews });
+  }
+
+  handleToggleSampleExt() {
+    const { showSampleExternalName } = this.state;
+    this.setState({ showSampleExternalName: !showSampleExternalName });
+  }
+
+  updateLayout() {
+    const { visible, hidden } = this.layout.state;
+    const layout = {};
+
+    visible.forEach((value, index) => {
+      layout[value] = (index + 1);
+    });
+    hidden.forEach((value, index) => {
+      if (value !== 'hidden') layout[value] = (- index - 1)
+    });
+
+    const userProfile = UserStore.getState().profile;
+    _.set(userProfile, 'data.layout', layout);
+    UserActions.updateUserProfile(userProfile);
+  }
+
+  render() {
+    const {
+      visible, hidden, currentType,
+      tableSchemePreviews, showSampleExternalName
+    } = this.state;
+
+    const wd = 35 + ((visible && visible.size * 50) || 0) + ((hidden && hidden.size * 50) || 0);
+
+    let sampleSettings = (<span />);
+    if (currentType == "sample" || currentType == "reaction") {
+      sampleSettings = (
+        <div>
+          <h3 className="popover-title">Settings</h3>
+          <div className="popover-content">
+            <FormGroup>
+              <Checkbox onChange={this.handleToggleScheme}
+                        checked={tableSchemePreviews} >
+                Show schemes images
+              </Checkbox>
+            </FormGroup>
+            <FormGroup>
+              <Checkbox onChange={this.handleToggleSampleExt}
+                        checked={showSampleExternalName} >
+                Show sample external name on title
+              </Checkbox>
+            </FormGroup>
+          </div>
+        </div>
+      )
+    }
+    const popoverSettings = (
+      <Popover
+        className="collection-overlay"
+        id="popover-layout"
+        style={{ maxWidth: 'none', width: `${wd}px` }}
+      >
+        <div>
+          <h3 className="popover-title">Table Layout</h3>
+          <div className="popover-content">
+            <TabLayoutContainer
+              visible={visible}
+              hidden={hidden}
+              ref={(n) => { this.layout = n; }}
+            />
+          </div>
+        </div>
+        {sampleSettings}
+      </Popover>
+    )
+
+    return (
+      <OverlayTrigger
+        trigger="click"
+        placement="left"
+        overlay={popoverSettings}
+        rootClose
+        onExit={this.handleOnExit}
+      >
+        <Button
+          bsSize="xsmall"
+          style={{ margin: '10px 10px 10px 0', float: 'right' }}
+        >
+          <i className="fa fa-sliders" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
diff --git a/app/packs/src/components/ExportSamplesBtn.js b/app/packs/src/components/ExportSamplesBtn.js
new file mode 100644
index 000000000..97881598e
--- /dev/null
+++ b/app/packs/src/components/ExportSamplesBtn.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import CollectionsFetcher from './fetchers/CollectionsFetcher';
+
+export default class ExportSamplesBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { startExport: false };
+  }
+
+  handleExport(type, id) {
+    this.setState({ startExport: true });
+    CollectionsFetcher.expotSamples(type, id)
+      .then(() => { this.setState({ startExport: false }); })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  render() {
+    const { type, id } = this.props;
+    const { startExport } = this.state;
+    return (
+      <Button bsStyle="info" onClick={() => this.handleExport(type, id)}>
+        Export samples{startExport ? <span>&nbsp;<i className="fa fa-spin fa-spinner" /></span> : null}
+      </Button>
+    );
+  }
+}
+
+ExportSamplesBtn.propTypes = {
+  type: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired
+};
diff --git a/app/packs/src/components/FastInput.js b/app/packs/src/components/FastInput.js
new file mode 100644
index 000000000..302e46c58
--- /dev/null
+++ b/app/packs/src/components/FastInput.js
@@ -0,0 +1,105 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useRef } from 'react';
+import { InputGroup, OverlayTrigger, FormGroup, SplitButton, Tooltip, MenuItem } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import NotificationActions from './actions/NotificationActions';
+import BaseFetcher from './fetchers/BaseFetcher';
+import LoadingActions from './actions/LoadingActions';
+
+const apiCall = (cas, src = 'cas') => (src === 'cas' ? `https://commonchemistry.cas.org/api/detail?cas_rn=${cas}` : `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${cas}/property/CanonicalSMILES/JSON`);
+
+const FastInput = (props) => {
+  const inputCas = useRef('');
+  const notify = (_params) => {
+    NotificationActions.add({
+      title: _params.title,
+      message: _params.msg,
+      level: _params.lvl,
+      position: 'tc',
+      dismissible: 'button',
+      autoDismiss: 5,
+      uid: uuid.v4()
+    });
+  };
+
+  const searchSmile = () => {
+    LoadingActions.start();
+    props.fnHandle(inputCas.current.value);
+  };
+
+  const search = () => {
+    let params = {
+      apiEndpoint: apiCall(inputCas.current.value),
+      requestMethod: 'get',
+      jsonTranformation: json => json
+    };
+    LoadingActions.start();
+    BaseFetcher.withoutBodyData(params).then((cjson) => {
+      if (cjson.message) {
+        params = {
+          apiEndpoint: apiCall(inputCas.current.value, 'pubchem'),
+          requestMethod: 'get',
+          jsonTranformation: json => json
+        };
+        BaseFetcher.withoutBodyData(params).then((pjson) => {
+          if (pjson.Fault) {
+            notify({ title: 'CAS Error', lvl: 'error', msg: pjson.Fault.Code });
+          } else {
+            props.fnHandle(pjson.PropertyTable.Properties[0].CanonicalSMILES);
+          }
+        }).catch((err) => {
+          notify({ title: 'CAS Error', lvl: 'error', msg: err });
+        });
+      } else {
+        props.fnHandle(cjson.smile);
+      }
+    }).catch((err) => {
+      notify({ title: 'CAS Error', lvl: 'error', msg: err });
+    }).finally(() => {
+      LoadingActions.stop();
+      inputCas.current.value = '';
+    });
+  };
+
+  const sbTitle = (
+    <span>
+      <span className="fi-tit">Fast create by</span>
+      <input className="fi-txt" type="text" ref={inputCas} />
+    </span>
+  );
+
+  return (
+    <OverlayTrigger
+      placement="top"
+      delayShow={500}
+      overlay={<Tooltip id="_fast_create_btn">Fast create by CAS RN (with dashes) or SMILES</Tooltip>}
+    >
+      <FormGroup className="fast-input">
+        <InputGroup bsSize="small">
+          <SplitButton
+            id="_fast_create_btn_split"
+            pullRight
+            bsStyle="default"
+            bsSize="xsmall"
+            onToggle={(isOpen, e) => { if (e) { e.stopPropagation(); } }}
+            title={sbTitle}
+            onClick={(e) => { e.stopPropagation(); }}
+            className="fi-btn"
+          >
+            <MenuItem onSelect={(eventKey, e) => { e.stopPropagation(); search(); }}>
+              by CAS
+            </MenuItem>
+            <MenuItem onSelect={(eventKey, e) => { e.stopPropagation(); searchSmile(); }}>
+              by SMILES
+            </MenuItem>
+          </SplitButton>
+        </InputGroup>
+      </FormGroup>
+    </OverlayTrigger>
+  );
+};
+
+FastInput.propTypes = { fnHandle: PropTypes.func.isRequired };
+
+export default FastInput;
diff --git a/app/packs/src/components/FocusNovnc.js b/app/packs/src/components/FocusNovnc.js
new file mode 100644
index 000000000..996f5ce7a
--- /dev/null
+++ b/app/packs/src/components/FocusNovnc.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { ButtonToolbar, Button, ButtonGroup } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+export default class FocusNovnc extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleCursor = this.handleCursor.bind(this);
+  }
+
+  handleFocus() {
+    this.props.handleFocus();
+  }
+
+  handleBlur() {
+    this.props.handleBlur();
+  }
+
+  handleCursor() {
+    this.props.handleCursor();
+  }
+
+  render() {
+    const { connected, isNotFocused, forceCursor } = this.props;
+    const focusedColor = 'btn btn-xs btn-success m-4';
+    const blurredColor = 'btn btn-xs btn-danger m-4';
+    const normalColor = 'btn btn-xs m-2';
+    const somePadding = { padding: '0 0 5px 5px' };
+    const BlurBtn = () => (
+      <Button
+        className={(!isNotFocused || !connected) ? normalColor : blurredColor}
+        disabled={isNotFocused || !connected}
+        onClick={this.handleBlur}
+      > {(!isNotFocused || !connected) ? 'Blur' : 'Blurred'}
+      </Button>
+    );
+    const FocusBtn = () => (
+      <Button
+        className={(isNotFocused || !connected) ? normalColor : focusedColor}
+        disabled={!isNotFocused || !connected}
+        onClick={this.handleFocus}
+      > {isNotFocused ? 'Focus' : 'Focused'}
+      </Button>
+    );
+    const UsersConnected = () => (
+      <span className="title">
+        <i className="fa fa-eye">
+          {this.props.watching}
+        </i>
+        &nbsp;
+        <i className="fa fa-pencil-square-o">
+          {this.props.using}
+        </i>
+      </span>);
+
+    return (
+      <ButtonToolbar>
+        <ButtonGroup style={somePadding}>
+          <BlurBtn />
+          <FocusBtn />
+        </ButtonGroup>
+
+        <Button
+          className={(!forceCursor) ? normalColor : focusedColor}
+          onClick={this.handleCursor}
+          title="force mouse cursor"
+        >
+          <span className="fa-stack ">
+            <i className="fa fa-desktop" aria-hidden="true" />
+            <i className="fa fa-mouse-pointer text-danger" aria-hidden="true" />
+          </span>
+        </Button>
+
+        {connected ? <UsersConnected /> : null}
+      </ButtonToolbar>
+
+    );
+  }
+}
+
+FocusNovnc.propTypes = {
+  watching: PropTypes.number.isRequired,
+  using: PropTypes.number.isRequired,
+  isNotFocused: PropTypes.bool.isRequired,
+  connected: PropTypes.bool.isRequired,
+  forceCursor: PropTypes.bool.isRequired,
+  handleBlur: PropTypes.func.isRequired,
+  handleFocus: PropTypes.func.isRequired,
+  handleCursor: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/FormatComponent.js b/app/packs/src/components/FormatComponent.js
new file mode 100644
index 000000000..5e89501eb
--- /dev/null
+++ b/app/packs/src/components/FormatComponent.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Accordion, Button } from 'react-bootstrap';
+import QuillViewer from 'src/components/QuillViewer';
+
+import PanelHeader from 'src/components/common/PanelHeader';
+
+const tryParse = function TryParseToJson(obj) {
+  if (typeof obj === 'object') return obj;
+  return JSON.parse(obj);
+};
+
+function ElementAnalyses({ element, idx }) {
+  const children = element.children.map(x => (
+    <ElementAnalyses key={x.id} element={x} />
+  ));
+
+  let analyses = element.analyses.map((x) => {
+    let kind = x.extended_metadata.kind || '';
+    kind = (kind.split('|')[1] || kind).trim();
+    const header = `Analysis name: ${x.name} - Type: ${kind}`;
+    return (
+      <Panel key={x.id}>
+        <Panel.Heading>
+          {header}
+        </Panel.Heading>
+        <Panel.Body>
+          <QuillViewer value={tryParse(x.extended_metadata.content)} />
+        </Panel.Body>
+      </Panel>
+    );
+  });
+
+  if (element.analyses.length === 0) {
+    analyses = (
+      <p> This {element.type} does not have any analysis.</p>
+    );
+  }
+
+  return (
+    <Panel
+      key={element.id}
+      eventKey={idx}
+    >
+      <Panel.Heading>
+        {`${element.type}: ${element.short_label}`}
+      </Panel.Heading>
+      <Panel.Body>
+      {children}
+      {analyses}
+      </Panel.Body>
+    </Panel>
+  );
+}
+
+function FormatComponentHeader({ onClose, onSave, onFormat }) {
+  const closeBtn = (
+    <Button
+      key="closeBtn"
+      onClick={onClose}
+      bsStyle="danger"
+      bsSize="xsmall"
+      className="button-right"
+    >
+      <i className="fa fa-times" />
+    </Button>
+  );
+  const saveBtn = (
+    <Button
+      key="saveBtn"
+      onClick={onSave}
+      bsStyle="warning"
+      bsSize="xsmall"
+      className="button-right"
+    >
+      <i className="fa fa-floppy-o" />
+    </Button>
+  );
+  const formatBtn = (
+    <Button
+      key="formatBtn"
+      onClick={onFormat}
+      bsStyle="info"
+      bsSize="xsmall"
+      className="button-right"
+    >
+      <i className="fa fa-magic" />
+    </Button>
+  );
+  const btns = [closeBtn, saveBtn, formatBtn];
+
+  return <PanelHeader title="Analyses Formatting" btns={btns} />;
+}
+
+function FormatComponent({
+  list, bsStyle, onSave, onFormat, onClose
+}) {
+  const elements = list.map((el, idx) => (
+    <ElementAnalyses key={el.id} element={el} idx={idx} />
+  ));
+  const header = (
+    <FormatComponentHeader
+      onSave={onSave}
+      onFormat={onFormat}
+      onClose={onClose}
+    />
+  );
+
+  return (
+    <Panel
+      bsStyle={bsStyle}
+      className="format-analysis-panel"
+    >
+      <Panel.Heading>
+        {header}
+      </Panel.Heading>
+      <Panel.Body>
+        <Accordion>{elements}</Accordion>
+      </Panel.Body>
+    </Panel>
+  );
+}
+
+ElementAnalyses.propTypes = {
+  element: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    short_label: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+    children: PropTypes.arrayOf(PropTypes.object),
+    analyses: PropTypes.arrayOf(PropTypes.object)
+  }).isRequired,
+  idx: PropTypes.number
+};
+
+ElementAnalyses.defaultProps = {
+  idx: null
+};
+
+FormatComponentHeader.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  onFormat: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+FormatComponent.propTypes = {
+  list: PropTypes.arrayOf(PropTypes.object).isRequired,
+  bsStyle: PropTypes.string,
+  onSave: PropTypes.func.isRequired,
+  onFormat: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+FormatComponent.defaultProps = {
+  bsStyle: 'info'
+};
+
+export default FormatComponent;
diff --git a/app/packs/src/components/FormatContainer.js b/app/packs/src/components/FormatContainer.js
new file mode 100644
index 000000000..b235fa767
--- /dev/null
+++ b/app/packs/src/components/FormatContainer.js
@@ -0,0 +1,172 @@
+/* eslint-disable no-param-reassign */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import FormatComponent from 'src/apps/mydb/elements/details/formats/FormatComponent';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ReportStore from 'src/stores/alt/stores/ReportStore';
+import { formatAnalysisContent } from 'src/utilities/ElementUtils';
+
+function extractAnalyses(listEls) {
+  const listObjs = [];
+  listEls.forEach((el) => {
+    let obj = {};
+    if (el.type === 'sample') {
+      obj = {
+        type: 'Sample',
+        id: el.id,
+        short_label: el.short_label,
+        analyses: _.cloneDeep(el.analyses),
+        children: []
+      };
+      listObjs.push(obj);
+    } else if (el.type === 'reaction') {
+      let rAna = [];
+      const ana = el.container.children
+        .filter(x => x.container_type === 'analyses')[0];
+      if (ana) {
+        rAna = ana.children.filter(x => x.container_type === 'analysis');
+      }
+
+      let samplesAna = [];
+      samplesAna = samplesAna.concat(extractAnalyses(el.starting_materials));
+      samplesAna = samplesAna.concat(extractAnalyses(el.products));
+
+      obj = {
+        type: 'Reaction',
+        id: el.id,
+        short_label: el.short_label,
+        analyses: _.cloneDeep(rAna),
+        children: samplesAna
+      };
+
+      listObjs.push(obj);
+    }
+  });
+
+  return listObjs;
+}
+
+export default class FormatContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedObjTags: { sampleIds: [], reactionIds: [] },
+      defaultObjTags: { sampleIds: [], reactionIds: [] },
+      selectedObjs: [],
+      isSaved: true
+    };
+
+    this.onChangeUI = this.onChangeUI.bind(this);
+    this.onChangeRp = this.onChangeRp.bind(this);
+    this.onFormat = this.onFormat.bind(this);
+    this.onSave = this.onSave.bind(this);
+    this.onClose = this.onClose.bind(this);
+  }
+
+  componentDidMount() {
+    ReportStore.listen(this.onChangeRp);
+    UIStore.listen(this.onChangeUI);
+    this.onChangeUI(UIStore.getState());
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onChangeUI);
+    ReportStore.unlisten(this.onChangeRp);
+  }
+
+  onChangeUI(state) {
+    const { selectedObjTags, defaultObjTags } = this.state;
+    ReportActions.updateCheckedTags.defer({
+      uiState: state,
+      reportState: { selectedObjTags, defaultObjTags }
+    });
+  }
+
+  onChangeRp(state) {
+    const selectedObjs = extractAnalyses(state.selectedObjs);
+
+    this.setState({
+      selectedObjs,
+      selectedObjTags: state.selectedObjTags,
+      defaultObjTags: state.defaultObjTags
+    });
+  }
+
+  onFormat() {
+    let selectedObjs = _.cloneDeep(this.state.selectedObjs);
+
+    const formatAnalyses = (el) => {
+      (el.analyses || []).forEach((ana) => {
+        const { content } = ana.extended_metadata;
+        if (typeof content === 'string') {
+          ana.extended_metadata.content = JSON.parse(content);
+        }
+
+        ana.extended_metadata.content = formatAnalysisContent(ana);
+      });
+    };
+
+    selectedObjs = selectedObjs.map((obj) => {
+      formatAnalyses(obj);
+      if (obj.type === 'Reaction') formatAnalyses(obj.children);
+
+      return obj;
+    });
+
+    const isSaved = _.isEqual(selectedObjs, this.state.selectedObjs);
+
+    this.setState({ selectedObjs, isSaved });
+  }
+
+  onSave() {
+    const { selectedObjs } = this.state;
+    const flattenObjs = (objs) => {
+      const flattenedObjs = objs.reduce((acc, cur) => {
+        if (cur.children && cur.children.length > 0) {
+          acc = acc.concat(cur.analyses);
+          return acc.concat(flattenObjs(cur.children));
+        }
+
+        return acc.concat(cur.analyses);
+      }, []);
+
+      return flattenedObjs;
+    };
+
+    const objs = flattenObjs(selectedObjs);
+
+    objs.forEach(obj => ElementActions.updateContainerContent(obj));
+
+    this.setState({ selectedObjs, isSaved: true });
+  }
+
+  onClose() {
+    DetailActions.close(this.props.format, this.state.isSaved);
+  }
+
+  render() {
+    const { selectedObjs, isSaved } = this.state;
+
+    return (
+      <FormatComponent
+        list={selectedObjs}
+        onFormat={this.onFormat}
+        bsStyle={isSaved ? 'primary' : 'info'}
+        onSave={this.onSave}
+        onClose={this.onClose}
+      />
+    );
+  }
+}
+
+FormatContainer.propTypes = {
+  format: PropTypes.shape.isRequired
+};
+
+/* eslint-enable no-param-reassign */
diff --git a/app/packs/src/components/GeneralProcedureDnD.js b/app/packs/src/components/GeneralProcedureDnD.js
new file mode 100644
index 000000000..acf4b1d74
--- /dev/null
+++ b/app/packs/src/components/GeneralProcedureDnD.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions.js';
+import { UrlSilentNavigation } from 'src/utilities/ElementUtils';
+
+const updRxnOriName = (oriRxn, sourceTag) => {
+  const nextRxn = oriRxn;
+  nextRxn.origin = sourceTag;
+  nextRxn.name = nextRxn.extractNameFromOri(sourceTag);
+  nextRxn.changed = true;
+  return nextRxn;
+};
+
+const gpTarget = {
+  drop(targetProps, monitor) {
+    const sourceProps = monitor.getItem();
+    const source = sourceProps.element;
+    const sourceTag = { id: source.id, short_label: source.short_label };
+    const oriRxn = targetProps.reaction;
+    const nextRxn = updRxnOriName(oriRxn, sourceTag);
+    DetailActions.changeCurrentElement(oriRxn, nextRxn);
+  },
+};
+
+const gpDropCollect = (connect, monitor) => (
+  {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+    canDrop: monitor.canDrop(),
+  }
+);
+
+const dndStyle = (canDrop, isOver) => {
+  const style = {};
+  if (canDrop) {
+    style.borderStyle = 'dashed';
+    style.borderWidth = 2;
+    style.opacity = 0.5;
+  }
+  if (isOver) {
+    style.borderColor = '#337ab7';
+    style.opacity = 0.2;
+  }
+  return style;
+};
+
+const showReaction = (reaction) => {
+  UrlSilentNavigation(reaction);
+  ElementActions.fetchReactionById(reaction.id);
+}
+
+const GpContent = ({ reaction }) => (
+  reaction.origin && reaction.origin.short_label
+    ? <span className="c-bs-primary gp-content">
+      <span className="spacer-10" />
+      <a role="link" onClick={() => { showReaction(reaction.origin) }}>{reaction.origin.short_label}</a>
+    </span>
+    : null
+);
+
+const GeneralProcedureDnd = ({ connectDropTarget, isOver, canDrop,
+  reaction }) => {
+  const style = dndStyle(canDrop, isOver);
+
+  return (
+    reaction.role === 'parts'
+      ? compose(connectDropTarget)(
+        <div style={style} className="gp-drop-zone">
+          <i className="fa fa-home c-bs-primary gp-icon" />
+          <GpContent reaction={reaction} />
+        </div>,
+      )
+      : null
+  );
+};
+
+export default compose(
+  DropTarget(DragDropItemTypes.GENERALPROCEDURE, gpTarget, gpDropCollect),
+)(GeneralProcedureDnd);
diff --git a/app/packs/src/components/GraphContainer.js b/app/packs/src/components/GraphContainer.js
new file mode 100644
index 000000000..a916710ba
--- /dev/null
+++ b/app/packs/src/components/GraphContainer.js
@@ -0,0 +1,117 @@
+/* eslint-disable no-param-reassign */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Button, Accordion } from 'react-bootstrap';
+
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ReportStore from 'src/stores/alt/stores/ReportStore';
+
+import ComputedPropsGraphContainer from 'src/components/computedProps/ComputedPropsGraphContainer';
+
+export default class GraphContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedObjTags: { sampleIds: [], reactionIds: [] },
+      defaultObjTags: { sampleIds: [], reactionIds: [] },
+      selectedComputedProps: []
+    };
+
+    this.onChangeUI = this.onChangeUI.bind(this);
+    this.onChangeRp = this.onChangeRp.bind(this);
+
+    this.onClose = this.onClose.bind(this);
+  }
+
+  componentDidMount() {
+    ReportStore.listen(this.onChangeRp);
+    UIStore.listen(this.onChangeUI);
+    this.onChangeUI(UIStore.getState());
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onChangeUI);
+    ReportStore.unlisten(this.onChangeRp);
+  }
+
+  onClose() {
+    DetailActions.close(this.props.graph, true);
+  }
+
+  onChangeUI(state) {
+    const { selectedObjTags, defaultObjTags } = this.state;
+    ReportActions.updateCheckedTags.defer({
+      uiState: state,
+      reportState: { selectedObjTags, defaultObjTags }
+    });
+  }
+
+  onChangeRp(state) {
+    const { selectedObjTags, defaultObjTags } = state;
+    const selectedComputedProps = [];
+    state.selectedObjs.filter(s => s.molecule_computed_props).forEach((s) => {
+      const cprops = s.molecule_computed_props.sort((a, b) => (
+        a.updated_at - b.updated_at
+      ));
+      const cprop = {
+        name: s.short_label,
+        svgPath: `/images/samples/${s.sample_svg_file}`,
+        props: cprops[cprops.length - 1]
+      };
+      selectedComputedProps.push(cprop);
+    });
+
+    this.setState({
+      selectedComputedProps,
+      selectedObjTags,
+      defaultObjTags
+    });
+  }
+
+  render() {
+    const { selectedComputedProps } = this.state;
+    const header = (
+      <div>
+        {'Graph'}
+        <div className="button-right">
+          <Button
+            key="closeBtn"
+            onClick={this.onClose}
+            bsStyle="danger"
+            bsSize="xsmall"
+            className="button-right"
+          >
+            <i className="fa fa-times" />
+          </Button>
+        </div>
+      </div>
+    );
+
+    return (
+      <Panel
+        bsStyle="primary"
+      >
+        <Panel.Heading>
+          {header}
+        </Panel.Heading>
+        <Panel.Body>
+          <Accordion>
+            <ComputedPropsGraphContainer
+              show
+              style={{ overflowY: 'auto', maxHeight: 'calc(100vh - 303px)' }}
+              graphData={selectedComputedProps}
+            />
+          </Accordion>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+GraphContainer.propTypes = {
+  graph: PropTypes.object.isRequired
+};
diff --git a/app/packs/src/components/GroupElement.js b/app/packs/src/components/GroupElement.js
new file mode 100644
index 000000000..3b36d42d1
--- /dev/null
+++ b/app/packs/src/components/GroupElement.js
@@ -0,0 +1,213 @@
+import React from 'react';
+import { ButtonGroup, OverlayTrigger, Popover, Nav, NavDropdown, NavItem, MenuItem, Glyphicon, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel, Col, Row } from 'react-bootstrap';
+import UsersFetcher from './fetchers/UsersFetcher';
+import Select from 'react-select';
+import _ from 'lodash';
+
+export default class GroupElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: props.currentState.currentUser || { name: 'unknown' },
+      showUsers: false,
+      showRowAdd: false,
+    };
+
+    this.toggleUsers = this.toggleUsers.bind(this);
+    this.toggleRowAdd = this.toggleRowAdd.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  toggleUsers() {
+    this.setState({
+      showUsers: !this.state.showUsers
+    })
+  }
+
+  toggleRowAdd() {
+    this.setState({
+      showRowAdd: !this.state.showRowAdd
+    })
+  }
+
+  handleSelectUser(val) {
+    if (val) {
+      this.setState({ selectedUsers: val });
+    }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        let usersEntries = res.users.filter(u => u.user_type === 'Person')
+          .map((u) => {
+            return {
+              value: u.id,
+              name: u.name,
+              label: u.name + " (" + u.abb + ")"
+            }
+          });
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  renderDeleteButton(type, groupRec, userRec) {
+    let msg = 'remove yourself from the group';
+    if (type === 'user') {
+      if (userRec.id === this.state.currentUser.id) {
+        msg = 'remove yourself from the group';
+      } else {
+        msg = `remove user: ${userRec.name}`;
+      }
+    } else {
+      msg = `remove group: ${groupRec.name}`;
+    }
+
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} ?<br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(type, groupRec, userRec)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
+            No
+          </Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <ButtonGroup className="actions">
+        <OverlayTrigger
+          animation
+          placement="right"
+          root
+          trigger="focus"
+          overlay={popover}
+        >
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(groupRec, userRec)}>
+            <i className="fa fa-trash-o" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+  }
+
+  renderAdminButtons(group) {
+    const { selectedUsers, showRowAdd } = this.state;
+    if (group.admins && group.admins.length > 0 && group.admins[0].id === this.state.currentUser.id) {
+      return (
+        <td>
+          <Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-list" onClick={this.toggleUsers} />&nbsp;&nbsp;
+          <Button bsSize="xsmall" type="button" bsStyle="success" className="fa fa-plus" onClick={this.toggleRowAdd} />&nbsp;&nbsp;
+          {this.renderDeleteButton('group', group)}
+          <span className={'collapse' + (showRowAdd ? 'in' : '')}>
+            <Select.AsyncCreatable
+              multi
+              isLoading
+              backspaceRemoves
+              value={selectedUsers}
+              valueKey="value"
+              labelKey="label"
+              matchProp="name"
+              placeholder="Select users"
+              promptTextCreator={this.promptTextCreator}
+              loadOptions={this.loadUserByName}
+              onChange={this.handleSelectUser}
+            />
+            <Button bsSize="xsmall" type="button" bsStyle="warning" onClick={() => this.addUser(group)}>Save to group</Button>
+          </span>
+        </td>
+      );
+    }
+    return (
+      <td><Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-list" onClick={this.toggleUsers} /></td>
+    );
+  }
+
+  renderUserButtons(groupRec, userRec = null) {
+    if ((groupRec.admins && groupRec.admins.length > 0 && groupRec.admins[0].id === this.state.currentUser.id) || userRec.id === this.state.currentUser.id) {
+      return this.renderDeleteButton('user', groupRec, userRec);
+    }
+    return (<div />);
+  }
+
+  // confirm action after pressing yes
+  // if type is group, call deleteGroup api, if type is user, call deleteUser api
+  confirmDelete(type, groupRec, userRec) {
+    switch (type) {
+      case 'group':
+        this.props.onDeleteGroup(groupRec.id)
+        break;
+      case 'user':
+        this.props.onDeleteUser(groupRec, userRec);
+        break;
+      default:
+        break;
+    }
+  }
+
+  // add multiple users
+  // replace with response result and then setState (with forceUpdate)
+  addUser(groupRec) {
+    const { selectedUsers} = this.state;
+
+    const userIds = [];
+    selectedUsers.map((g) => {
+      userIds.push(g.value);
+      return true;
+    });
+    
+    UsersFetcher.updateGroup({ id: groupRec.id, destroy_group: false, add_users: userIds })
+      .then((group) => {
+        const idx = _.findIndex(this.props.currentGroup, function (o) { return o.id == group.group.id; });
+        this.props.currentGroup.splice(idx, 1, group.group);
+        this.setState({ selectedUsers: null });
+        this.props.onChangeData(this.props.currentGroup);
+      });
+  }
+
+  render() {
+    const { groupElement } = this.props;
+    const { showUsers: showInfo } = this.state;
+    return (
+      <tbody key={`tbody_${groupElement.id}`}>
+        <tr key={`row_${groupElement.id}`} style={{ fontWeight: 'bold' }}>
+          <td>{groupElement.name}</td>
+          <td>{groupElement.initials}</td>
+          <td>{groupElement.admins && groupElement.admins.length > 0 && groupElement.admins[0].name}</td>
+          {this.renderAdminButtons(groupElement)}
+        </tr>
+        <tr className={'collapse' + (showInfo ? 'in' : '')}>
+          <td colSpan="4">
+            <Table>
+              <tbody>
+                {groupElement.users.map(u => (
+                  <tr key={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
+                    <td width="20%">{u.name}</td>
+                    <td width="10%">{u.initials}</td>
+                    <td width="20%"></td>
+                    <td width="50%">{this.renderUserButtons(groupElement, u)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          </td>
+        </tr>
+      </tbody>);
+  }
+}
diff --git a/app/packs/src/components/List.js b/app/packs/src/components/List.js
new file mode 100644
index 000000000..ef7ccfcde
--- /dev/null
+++ b/app/packs/src/components/List.js
@@ -0,0 +1,299 @@
+import Immutable from 'immutable';
+import React from 'react';
+import { Col, Nav, NavItem, Row, Tab, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import KeyboardActions from './actions/KeyboardActions';
+import UIActions from './actions/UIActions';
+import UserActions from './actions/UserActions';
+import MatrixCheck from './common/MatrixCheck';
+import ElementsTable from './ElementsTable';
+import ElementsTableSettings from './ElementsTableSettings';
+import ElementStore from './stores/ElementStore';
+import UIStore from './stores/UIStore';
+import UserStore from './stores/UserStore';
+import ArrayUtils from './utils/ArrayUtils';
+
+
+function getSortedHash(inputHash) {
+  const resultHash = {};
+
+  const keys = Object.keys(inputHash);
+  keys.sort((a, b) => inputHash[a] - inputHash[b]).forEach((k) => {
+    resultHash[k] = inputHash[k];
+  });
+  return resultHash;
+}
+
+function getArrayFromLayout(layout, isVisible) {
+  let array = Immutable.List();
+  let sortedLayout = layout;
+
+  if (isVisible == true) {
+    sortedLayout = getSortedHash(sortedLayout);
+  }
+
+  Object.keys(sortedLayout).forEach((key, idx) => {
+    const order = sortedLayout[key];
+    if (isVisible && order < 0) { return; }
+    if (!isVisible && order > 0) { return; }
+
+    if (isVisible == true) {
+      array = array.set(idx + 1, key);
+    } else {
+      array = array.set(Math.abs(order), key);
+    }
+  });
+
+  array = array.filter(n => n != undefined);
+  return array;
+}
+
+export default class List extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      totalElements: {},
+      visible: Immutable.List(),
+      hidden: Immutable.List(),
+      genericEls: [],
+      currentTab: 0,
+      totalCheckedElements: {},
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onChangeUser = this.onChangeUser.bind(this);
+    this.onChangeUI = this.onChangeUI.bind(this);
+    this.initState = this.initState.bind(this);
+    this.handleTabSelect = this.handleTabSelect.bind(this);
+  }
+
+  componentDidMount() {
+    ElementStore.listen(this.onChange);
+    UserStore.listen(this.onChangeUser);
+    UIStore.listen(this.onChangeUI);
+
+    this.initState();
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.overview !== this.props.overview ||
+    nextProps.showReport !== this.props.showReport ||
+    nextProps.totalElements !== this.state.totalElements ||
+    nextState.visible !== this.state.visible ||
+    nextState.hidden !== this.state.hidden ||
+    nextState.currentTab !== this.state.currentTab;
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.onChange);
+    UserStore.unlisten(this.onChangeUser);
+    UIStore.unlisten(this.onChangeUI);
+  }
+
+  onChange(state) {
+    const { totalElements } = this.state;
+    Object.keys(state.elements).forEach((key) => {
+      totalElements[key] = state.elements[key].totalElements;
+    });
+
+    this.setState({
+      totalElements
+    });
+  }
+
+  onChangeUser(state) {
+    let visible = '';
+    let hidden = '';
+    let currentTabIndex = 0;
+
+    const { currentType } = state;
+    let type = state.currentType;
+
+    if (typeof (state.profile) !== 'undefined' && state.profile &&
+      typeof (state.profile.data) !== 'undefined' && state.profile.data) {
+      visible = getArrayFromLayout(state.profile.data.layout, true);
+      hidden = getArrayFromLayout(state.profile.data.layout, false);
+      currentTabIndex = visible.findIndex(e => e === currentType);
+      if (type === '') { type = visible.get(0); }
+    }
+    if (hidden.size === 0) {
+      hidden = ArrayUtils.pushUniq(hidden, 'hidden');
+    }
+
+    if (currentTabIndex < 0) currentTabIndex = 0;
+
+    if (typeof type !== 'undefined' && type != null) {
+      KeyboardActions.contextChange.defer(type);
+    }
+
+    this.setState({
+      currentTab: currentTabIndex,
+      genericEls: state.genericEls || [],
+      visible,
+      hidden
+    });
+  }
+
+
+  onChangeUI(state) {
+    const { totalCheckedElements } = this.state;
+    let forceUpdate = false;
+    // const genericNames = (genericEls && genericEls.map(el => el.name)) || [];
+    let klasses = [];
+    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
+      klasses = UIStore.getState().klasses;
+    }
+    const elNames = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].concat(klasses);
+
+    elNames.forEach((type) => {
+      const elementUI = state[type] || {
+        checkedAll: false, checkedIds: [], uncheckedIds: [], currentId: null
+      };
+      const element = ElementStore.getState().elements[`${type}s`];
+      const nextCount = elementUI.checkedAll ?
+        (element.totalElements - elementUI.uncheckedIds.size) :
+        elementUI.checkedIds.size;
+      if (!forceUpdate && nextCount !== (totalCheckedElements[type] || 0)) { forceUpdate = true; }
+      totalCheckedElements[type] = nextCount;
+    });
+
+    this.setState(previousState => ({ ...previousState, totalCheckedElements }));
+    // could not use shouldComponentUpdate because state.totalCheckedElements
+    // has already changed independently of setstate
+    if (forceUpdate) { this.forceUpdate(); }
+  }
+
+  handleTabSelect(tab) {
+    UserActions.selectTab(tab);
+
+    // TODO sollte in tab action handler
+    const uiState = UIStore.getState();
+    const type = this.state.visible.get(tab);
+
+    if (!uiState[type] || !uiState[type].page) { return; }
+
+    const { page } = uiState[type];
+
+    UIActions.setPagination({ type, page });
+
+    KeyboardActions.contextChange(type);
+  }
+
+  initState() {
+    this.onChange(ElementStore.getState());
+  }
+
+  getSortedHash(inputHash) {
+    var resultHash = {};
+
+    var keys = Object.keys(inputHash);
+    keys.sort(function (a, b) {
+      return inputHash[a] - inputHash[b]
+    }).forEach(function (k) {
+      resultHash[k] = inputHash[k];
+    });
+    return resultHash;
+  }
+
+  getArrayFromLayout(layout, isVisible) {
+    let array = Immutable.List();
+
+    if (isVisible == true) {
+      layout = this.getSortedHash(layout);
+    }
+
+    Object.keys(layout).forEach(function (key, idx) {
+      const order = layout[key]
+      if (isVisible && order < 0) { return; }
+      if (!isVisible && order > 0) { return; }
+
+      if (isVisible == true) {
+        array = array.set(idx+1, key)
+      } else {
+        array = array.set(Math.abs(order), key)
+      }
+    })
+
+    array = array.filter( n => ["sample", "reaction"].includes(n));
+    return array;
+  }
+
+  render() {
+    const {
+      visible, hidden, currentTab, totalCheckedElements
+    } = this.state;
+    const constEls = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'];
+    const { overview, showReport } = this.props;
+    const elementState = this.state;
+
+    const navItems = [];
+    const tabContents = [];
+    for (let i = 0; i < visible.size; i += 1) {
+      const value = visible.get(i);
+
+      let iconClass = `icon-${value}`;
+      let ttl = (<Tooltip id="_tooltip_history" className="left_tooltip">{value && (value.replace('_', ' ').replace(/(^\w|\s\w)/g, m => m.toUpperCase()))}</Tooltip>);
+
+      if (!constEls.includes(value)) {
+        const genericEl = (this.state.genericEls &&
+                           this.state.genericEls.find(el => el.name === value)) || {};
+        iconClass = `${genericEl.icon_name} icon_generic_nav`;
+        ttl = (<Tooltip id="_tooltip_history" className="left_tooltip">{genericEl.label}<br />{genericEl.desc}</Tooltip>);
+      }
+
+
+      const navItem = (
+        <NavItem eventKey={i} key={`${value}_navItem`}>
+          <OverlayTrigger delayShow={500} placement="top" overlay={ttl}>
+            <i className={iconClass} />
+          </OverlayTrigger>
+          <span style={{ paddingLeft: 5 }}>
+            {elementState.totalElements &&
+                      elementState.totalElements[`${value}s`]}
+            ({totalCheckedElements[value] || 0})
+          </span>
+        </NavItem>
+      );
+      const tabContent = (
+        <Tab.Pane eventKey={i} key={`${value}_tabPanel`}>
+          <ElementsTable
+            overview={overview}
+            showReport={showReport}
+            type={value}
+          />
+        </Tab.Pane>
+      );
+
+      navItems.push(navItem);
+      tabContents.push(tabContent);
+    }
+
+    return (
+      <Tab.Container
+        id="tabList"
+        defaultActiveKey={0}
+        activeKey={currentTab}
+        onSelect={this.handleTabSelect}
+      >
+        <Row className="clearfix">
+          <Col sm={12}>
+            <Nav bsStyle="tabs">
+              {navItems}
+              &nbsp;&nbsp;&nbsp;
+              <ElementsTableSettings
+                visible={visible}
+                hidden={hidden}
+                ref={(m) => { this.elementsTableSettings = m; }}
+              />
+            </Nav>
+          </Col>
+          <Col sm={12}>
+            <Tab.Content animation>
+              {tabContents}
+            </Tab.Content>
+          </Col>
+        </Row>
+      </Tab.Container>
+    );
+  }
+}
diff --git a/app/packs/src/components/LiteratureCommon.js b/app/packs/src/components/LiteratureCommon.js
new file mode 100644
index 000000000..b4c0b8fc6
--- /dev/null
+++ b/app/packs/src/components/LiteratureCommon.js
@@ -0,0 +1,237 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, FormControl, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
+import uuid from 'uuid';
+import Literature from 'src/models/Literature';
+import { CitationType, CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';
+import Cite from 'citation-js';
+
+const RefByUserInfo = ({ info, litype }) => {
+  if (typeof (info) === 'undefined' || !info || info.length === 0) {
+    return (<div />);
+  }
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={
+        <Tooltip id={`ref_by_user_${uuid.v4()}`} className="left_tooltip bs_tooltip">
+          Reference added by
+          {
+            Object.keys(info).map(lid => (litype[lid] ? ` ${info[lid]} (${CitationTypeMap[litype[lid]].def})` : info[lid])).join(', ')
+          }
+        </Tooltip>
+      }
+    >
+      <i className="fa fa-book" aria-hidden="true" />
+    </OverlayTrigger>
+  );
+};
+
+
+// const Cite = require('citation-js');
+
+const LiteralType = ({ val, handleInputChange, disabled = false }) => (
+  <FormControl
+    componentClass="select"
+    onChange={event => handleInputChange('litype', event)}
+    placeholder="type"
+    value={val}
+    disabled={disabled}
+  >
+    {CitationType.map(e => (<option key={`_litype_opt_${e}`} value={e}>{CitationTypeMap[e].def}</option>))}
+  </FormControl>
+);
+
+const LiteratureInput = ({ literature, handleInputChange, field, placeholder }) => (
+  <FormControl
+    type="text"
+    onChange={event => handleInputChange(field, event)}
+    placeholder={placeholder}
+    value={literature[field] || ''}
+  />
+);
+
+const isLiteratureValid = literature => (
+  literature.title !== '' && literature.url.concat(literature.doi) !== ''
+);
+
+const AddButton = ({ onLiteratureAdd, literature, title }) => (
+  <Button
+    bsStyle="success"
+    bsSize="small"
+    onClick={() => onLiteratureAdd(literature)}
+    style={{ marginTop: 2 }}
+    disabled={!isLiteratureValid(literature)}
+    title={title}
+  >
+    <i className="fa fa-plus" />
+  </Button>
+);
+
+AddButton.propTypes = {
+  onLiteratureAdd: PropTypes.func.isRequired,
+  literature: PropTypes.instanceOf(Literature).isRequired,
+  title: PropTypes.string,
+};
+
+AddButton.defaultProps = {
+  title: 'add citation'
+};
+
+const literatureUrl = (literature) => {
+  const { url } = literature;
+  if (url.match(/https?\:\/\//)) {
+    return url;
+  }
+  return `//${url}`;
+};
+
+const sanitizeDoi = (doi) => {
+  const m = doi.match(/(?:\.*10\.)(\S+)\s*/);
+  return m ? '10.'.concat(m[1]) : null;
+};
+
+const doiValid = (doi) => {
+  const sanitized = sanitizeDoi(doi);
+  return sanitized && sanitized.match(/10.\w+\/\S+/) && true;
+};
+
+const literatureContent = (literature, onlyText) => {
+  let content;
+  if (literature.refs && literature.refs.bibliography) {
+    const { bibliography } = literature.refs;
+    content = bibliography;
+  } else if (literature.refs && literature.refs.bibtex) {
+    let litBibtex = literature.refs.bibtex;
+    if (litBibtex.split('{').length > 1) {
+      let indexData = litBibtex.split('{')[1];
+      indexData = indexData.substr(0, indexData.lastIndexOf(','));
+      litBibtex = litBibtex.replace(indexData, indexData.replace(/[^a-zA-Z0-9\-_]/g, ''));
+    }
+    const citation = new Cite(litBibtex);
+    if (onlyText) {
+      content = citation.format('bibliography', { format: 'text', template: 'apa' });
+    } else {
+      content = (
+        <div>
+          {citation.format('bibliography', { format: 'text', template: 'apa' })}
+        </div>
+      );
+    }
+  } else if (onlyText) {
+    content = literature.title || ' ';
+  } else {
+    content = <span>{literature.title}{literature.year ? `, ${literature.year}` : null}</span>;
+  }
+  return content;
+};
+
+const Citation = ({ literature }) => {
+  const {
+    title, doi, url, isbn
+  } = literature;
+  const formatedDoi = doi ? `https://dx.doi.org/${sanitizeDoi(doi)}` : null;
+  const link = formatedDoi || url || isbn;
+  const content = literatureContent(literature);
+  return (
+    <a href={link} target="_blank" rel="noopener noreferrer" title={title} style={{ wordBreak: 'break-word' }} onClick={e => e.stopPropagation()}>{content}</a>
+  );
+};
+Citation.propTypes = {
+  literature: PropTypes.any.isRequired,
+};
+
+const CitationUserRow = ({ literature, userId }) => (
+  <span>added by {userId && literature.user_id === userId ? 'me' : literature.user_name}
+    &nbsp;
+    {(typeof literature.litype == 'undefined' || literature.litype == null || literature.litype == '') ? '' : `, type: ${literature.litype}`}
+  </span>
+);
+
+CitationUserRow.propTypes = {
+  literature: PropTypes.instanceOf(Literature).isRequired,
+  userId: PropTypes.number,
+};
+CitationUserRow.defaultProps = {
+  userId: 0,
+};
+
+const groupByCitation = literatures => (
+  literatures.keySeq().toArray().sort((i, j) => {
+    // group by literature id then sort by user id
+    const a = literatures.get(i);
+    const b = literatures.get(j);
+    return ((a.id === b.id) ? (a.user_id - b.user_id) : (a.id - b.id));
+  }).reduce((acc, currentValue, i, array) => {
+    // duplicate first row of each literature group
+    acc.push(currentValue);
+    if (i > 0) {
+      const a = literatures.get(array[i]);
+      const b = literatures.get(array[i - 1]);
+      if (a.id !== b.id) { acc.push(currentValue); }
+    } else { acc.push(currentValue); }
+    return acc;
+  }, [])
+);
+
+const sortByElement = literatures => (
+  literatures.keySeq().toArray().sort((i, j) => {
+    // group by literature id then sort by user id
+    const a = literatures.get(i);
+    const b = literatures.get(j);
+    if (a.element_id === b.element_id && a.element_type === b.element_type) {
+      return (a.id - b.id);
+    }
+    return (a.element_id - b.element_id);
+  }).reduce((acc, currentValue, i, array) => {
+    // duplicate first row of each literature group
+    acc.push(currentValue);
+    if (i > 0) {
+      const a = literatures.get(array[i]);
+      const b = literatures.get(array[i - 1]);
+      if (a.id !== b.id || (a.element_id !== b.element_id || a.element_type !== b.element_type)) {
+        acc.push(currentValue);
+      }
+    } else { acc.push(currentValue); }
+    return acc;
+  }, [])
+);
+
+const sortByReference = literatures => (
+  literatures.keySeq().toArray().sort((i, j) => {
+    // group by literature id then sort by user id
+    const a = literatures.get(i);
+    const b = literatures.get(j);
+    if (a.id === b.id) {
+      return ((a.element_id === b.element_id && a.element_type === b.element_type) ?
+        (a.user_id - b.user_id) : (a.element_updated_at - b.element_updated_at));
+    }
+    return (a.id - b.id);
+  }).reduce((acc, currentValue, i, array) => {
+    // duplicate first row of each literature group
+    acc.push(currentValue);
+    if (i > 0) {
+      const a = literatures.get(array[i]);
+      const b = literatures.get(array[i - 1]);
+      if (a.id !== b.id) { acc.push(currentValue); }
+    } else { acc.push(currentValue); }
+    return acc;
+  }, [])
+);
+
+export {
+  Citation,
+  CitationUserRow,
+  doiValid,
+  sanitizeDoi,
+  literatureUrl,
+  AddButton,
+  isLiteratureValid,
+  LiteratureInput,
+  groupByCitation,
+  sortByElement,
+  sortByReference,
+  literatureContent,
+  LiteralType,
+  RefByUserInfo
+};
diff --git a/app/packs/src/components/LiteratureDetails.js b/app/packs/src/components/LiteratureDetails.js
new file mode 100644
index 000000000..76af5c7e8
--- /dev/null
+++ b/app/packs/src/components/LiteratureDetails.js
@@ -0,0 +1,526 @@
+import React, { Component } from 'react';
+import Clipboard from 'clipboard';
+import PropTypes from 'prop-types';
+import {
+  Table,
+  PanelGroup,
+  Button,
+  Panel,
+  ListGroup,
+  ListGroupItem,
+  Row,
+  Col,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+import Immutable from 'immutable';
+import { uniqBy } from 'lodash';
+import {
+  Citation,
+  CitationUserRow,
+  doiValid,
+  sanitizeDoi,
+  AddButton,
+  LiteratureInput,
+  sortByElement,
+  LiteralType,
+  literatureContent
+} from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
+import Literature from 'src/models/Literature';
+import LiteratureMap from 'src/models/LiteratureMap';
+import LiteraturesFetcher from 'src/fetchers/LiteraturesFetcher';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import PanelHeader from 'src/components/common/PanelHeader';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+
+const Cite = require('citation-js');
+
+const CloseBtn = ({ onClose }) => (
+  <Button
+    key="closeBtn"
+    onClick={onClose}
+    bsStyle="danger"
+    bsSize="xsmall"
+    className="button-right"
+  >
+    <i className="fa fa-times" />
+  </Button>
+);
+
+CloseBtn.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+const clipboardTooltip = () => (
+  <Tooltip id="assign_button">copy to clipboard</Tooltip>
+);
+
+const ElementLink = ({ literature }) => {
+  const {
+    external_label,
+    short_label,
+    name,
+    element_type,
+    element_id,
+  } = literature;
+  const type = element_type && element_type.toLowerCase();
+  return (
+    <Button
+      title={`${external_label ? external_label.concat(' - ') : ''}${name}`}
+      onClick={() => {
+        const { uri, namedParams } = Aviator.getCurrentRequest();
+        const uriArray = uri.split(/\//);
+        if (type && element_id) {
+          Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/${type}/${element_id}`);
+        }
+      }}
+    >
+      <i className={element_type ? 'icon-'.concat(type) : ''} />
+      &nbsp; {short_label}
+    </Button>
+  );
+};
+ElementLink.propTypes = {
+  literature: PropTypes.instanceOf(Literature).isRequired,
+};
+
+const ElementTypeLink = ({ literature, type }) => {
+  const {
+    count
+  } = literature;
+  return (
+    <Button title={`cited in ${count} ${type}${count && count > 1 ? 's' : ''}`}>
+      <i className={`icon-${type}`} />
+      &nbsp; {count}
+    </Button>
+  );
+};
+ElementTypeLink.propTypes = {
+  literature: PropTypes.instanceOf(Literature).isRequired,
+  type: PropTypes.string
+};
+ElementTypeLink.defaultProps = {
+  type: 'sample'
+};
+
+const CitationTable = ({ rows, sortedIds, userId, removeCitation }) => (
+  <Table>
+    <tbody>
+      {sortedIds.map((id, k, ids) => {
+        const citation = rows.get(id);
+        const prevCit = (k > 0) ? rows.get(ids[k - 1]) : null;
+        const sameRef = prevCit && prevCit.id === citation.id;
+        const sameElement = prevCit && prevCit.element_id === citation.element_id && prevCit.element_type === citation.element_type;
+        return sameRef && sameElement ? (
+          <tr key={`header-${id}-${citation.id}`} className={`collapse cit_${citation.id}-${citation.element_type}_${citation.element_id}`}>
+            <td />
+            <td className="padding-right">
+              <CitationUserRow literature={citation} userId={userId} />
+            </td>
+            <td>
+              <Button
+                bsSize="small"
+                bsStyle="danger"
+                onClick={() => removeCitation(citation)}
+              >
+                <i className="fa fa-trash-o" />
+              </Button>
+            </td>
+          </tr>
+        ) : (
+          <tr key={id} className={``}>
+            <td>{sameElement ? null : <ElementLink literature={citation} />}</td>
+            <td className="padding-right">
+              <Citation literature={citation} />
+            </td>
+            <td>
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  </Table>
+);
+
+export default class LiteratureDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...this.props.literatureMap,
+      literature: Literature.buildEmpty(),
+      sorting: 'element',
+      sortedIds: [],
+      selectedRefs: new Immutable.Map()
+    };
+    this.onClose = this.onClose.bind(this);
+    this.handleUIStoreChange = this.handleUIStoreChange.bind(this);
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleLiteratureAdd = this.handleLiteratureAdd.bind(this);
+    this.handleLiteratureRemove = this.handleLiteratureRemove.bind(this);
+    this.fetchDOIMetadata = this.fetchDOIMetadata.bind(this);
+  }
+
+  componentDidMount() {
+    const { currentCollection, sample, reaction } = UIStore.getState();
+    LiteraturesFetcher.fetchReferencesByCollection(currentCollection).then((literatures) => {
+      this.setState(prevState => ({
+        ...prevState,
+        ...literatures,
+        currentCollection,
+        sample: { ...sample },
+        reaction: { ...reaction },
+
+      }));
+    });
+    UIStore.listen(this.handleUIStoreChange);
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+    UIStore.unlisten(this.handleUIStoreChange);
+  }
+
+  onClose() {
+    DetailActions.close(this.props.literatureMap, true);
+  }
+
+  handleUIStoreChange(state) {
+    const cCol = this.state.currentCollection;
+    const { currentCollection, sorting } = state;
+
+    if (cCol && currentCollection &&
+      (cCol.id !== currentCollection.id || cCol.is_sync_to_me !== currentCollection.is_sync_to_me)
+    ) {
+      LiteraturesFetcher.fetchReferencesByCollection(currentCollection).then((literatures) => {
+
+        this.setState(prevState => ({
+          ...prevState,
+          ...literatures,
+          currentCollection,
+          sample: {},
+          reaction: {},
+        }));
+      });
+      return null;
+    }
+    const { sample, reaction } = state;
+    const prevSample = this.state.sample;
+    const prevReaction = this.state.reaction;
+
+    if (prevSample.checkedIds !== sample.checkedIds
+      || prevSample.unCheckedIds !== sample.unCheckedIds
+      || prevSample.checkedAll !== sample.checkedAll
+      || prevReaction.checkedIds !== reaction.checkedIds
+      || prevReaction.unCheckedIds !== reaction.unCheckedIds
+      || prevReaction.checkedAll !== reaction.checkedAll
+    ) {
+      const params = {
+        sample,
+        reaction,
+        id: currentCollection.id,
+        is_sync_to_me: currentCollection.is_sync_to_me
+
+      };
+      LiteraturesFetcher.postReferencesByUIState(params).then((selectedRefs) => {
+        const sortedIds = sortByElement(selectedRefs);
+        this.setState(prevState => ({
+          ...prevState,
+          selectedRefs,
+          currentCollection,
+          sample: { ...sample },
+          reaction: { ...reaction },
+          sortedIds
+        }));
+      });
+    }
+    return null;
+  }
+
+  handleLiteratureRemove(literature) {
+    const { element_type, element_id } = literature;
+    LiteraturesFetcher.deleteElementReference({ element: { type: element_type.toLowerCase(), id: element_id }, literature })
+      .then(() => {
+        this.setState(prevState => ({
+          ...prevState,
+          literatures: prevState.selectedRefs.delete(literature.literal_id),
+          sortedIds: sortByElement(prevState.selectedRefs.delete(literature.literal_id))
+        }));
+      });
+  }
+
+  handleInputChange(type, event) {
+    const { literature } = this.state;
+    const { value } = event.target;
+    switch (type) {
+      case 'url':
+        literature.url = value;
+        break;
+      case 'title':
+        literature.title = value;
+        break;
+      case 'doi':
+        literature.doi = value;
+        break;
+      case 'litype':
+        literature.litype = value;
+        break;
+      default:
+        break;
+    }
+    this.setState(prevState => ({ ...prevState, literature }));
+  }
+
+  handleLiteratureAdd(literature) {
+    const { doi } = literature;
+
+    const { currentCollection, sample, reaction } = UIStore.getState();
+    const params = {
+      sample,
+      reaction,
+      id: currentCollection.id,
+      is_sync_to_me: currentCollection.is_sync_to_me,
+      ref: { ...literature, doi: sanitizeDoi(doi || '') }
+    };
+    LiteraturesFetcher.postReferencesByUIState(params).then((selectedRefs) => {
+      this.setState(prevState => ({
+        ...prevState,
+        selectedRefs,
+        currentCollection,
+        sample: { ...sample },
+        reaction: { ...reaction },
+        sortedIds: sortByElement(selectedRefs),
+      }));
+    });
+  }
+
+  fetchDOIMetadata() {
+    const { doi } = this.state.literature;
+    NotificationActions.removeByUid('literature');
+    Cite.async(sanitizeDoi(doi)).then((json) => {
+      if (json.data && json.data.length > 0) {
+        const citation = new Cite(json.data[0]);
+        const { title, year } = json.data[0];
+        this.setState(prevState => ({
+          ...prevState,
+          literature: {
+            ...prevState.literature,
+            title,
+            year,
+            refs: {
+              citation,
+              bibtex: citation.format('bibtex')
+            }
+          }
+        }));
+        this.handleLiteratureAdd(this.state.literature);
+      }
+    }).catch(() => {
+      const notification = {
+        title: 'Add References for selected Elements',
+        message: `unable to fetch metadata for this doi: ${doi}`,
+        level: 'error',
+        dismissible: 'button',
+        autoDismiss: 5,
+        position: 'tr',
+        uid: 'literature'
+      };
+      NotificationActions.add(notification);
+    });
+  }
+
+  render() {
+    const {
+      sampleRefs,
+      reactionRefs,
+      selectedRefs,
+      sortedIds,
+      currentCollection,
+      literature
+    } = this.state;
+    const { currentUser } = UserStore.getState();
+    const label = currentCollection ? currentCollection.label : null
+    let contentSamples = '';
+    sampleRefs.forEach((citation) => {
+      contentSamples = `${contentSamples}\n${literatureContent(citation, true)}`;
+    });
+    let contentReactions = '';
+    reactionRefs.forEach((citation) => {
+      contentReactions = `${contentReactions}\n${literatureContent(citation, true)}`;
+    });
+    const elements = [];
+    let contentElements = '';
+
+    selectedRefs.forEach((citation) => {
+      elements.push(literatureContent(citation, true));
+    });
+
+    uniqBy(elements).forEach((element) => {
+      contentElements = `${contentElements}\n${element}`;
+    });
+
+    return (
+      <Panel
+        bsStyle="info"
+        className="format-analysis-panel"
+      >
+        <Panel.Heading>
+          <PanelHeader
+            title={`Literature Management for collection '${label}'`}
+            btns={[<CloseBtn key="close tab" onClose={this.onClose} />]}
+          />
+        </Panel.Heading>
+        <Panel.Body>
+          <PanelGroup accordion defaultActiveKey="1">
+            <Panel
+              eventKey="2"
+              collapsible="true"
+            >
+              <Panel.Heading>
+                <Row>
+                  <Col md={11} style={{ paddingRight: 0 }}>
+                    <Panel.Title toggle>
+                      References for Samples
+                    </Panel.Title>
+                  </Col>
+                  <Col md={1}>
+                    <Panel.Title>
+                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
+                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentSamples} >
+                          <i className="fa fa-clipboard" />
+                        </Button>
+                      </OverlayTrigger>
+                    </Panel.Title>
+                  </Col>
+                </Row>
+              </Panel.Heading>
+              <Panel.Body collapsible="true">
+                <Table>
+                  <thead><tr><th width="10%" /><th width="80%" /><th width="10%" /></tr></thead>
+                  <tbody>
+                    {sampleRefs.map(lit => (
+                      <tr key={`sampleRef-${lit.id}`}>
+                        <td><ElementTypeLink literature={lit} type="sample" /></td>
+                        <td className="padding-right">
+                          <Citation literature={lit} />
+                        </td>
+                        <td />
+                      </tr>
+                    ))}
+                  </tbody>
+                </Table>
+              </Panel.Body>
+            </Panel>
+            <Panel
+              eventKey="3"
+              collapsible="true"
+            >
+              <Panel.Heading>
+                <Row>
+                  <Col md={11} style={{ paddingRight: 0 }}>
+                    <Panel.Title toggle>
+                      References for Reactions
+                    </Panel.Title>
+                  </Col>
+                  <Col md={1}>
+                    <Panel.Title>
+                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
+                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentReactions} >
+                          <i className="fa fa-clipboard" />
+                        </Button>
+                      </OverlayTrigger>
+                    </Panel.Title>
+                  </Col>
+                </Row>
+              </Panel.Heading>
+              <Panel.Body collapsible="true">
+                <Table>
+                  <thead><tr><th width="10%" /><th width="80%" /><th width="10%" /></tr></thead>
+                  <tbody>
+                    {reactionRefs.map(lit => (
+                      <tr key={`reactionRef-${lit.id}`}>
+                        <td><ElementTypeLink literature={lit} type="reaction" /></td>
+                        <td className="padding-right">
+                          <Citation literature={lit} />
+                        </td>
+                        <td />
+                      </tr>
+                    ))}
+                  </tbody>
+                </Table>
+              </Panel.Body>
+            </Panel>
+            <Panel
+              eventKey="4"
+              collapsible="true"
+            >
+              <Panel.Heading>
+                <Row>
+                  <Col md={11} style={{ paddingRight: 0 }}>
+                    <Panel.Title toggle>
+                      References for selected Elements
+                    </Panel.Title>
+                  </Col>
+                  <Col md={1}>
+                    <Panel.Title>
+                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
+                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentElements} >
+                          <i className="fa fa-clipboard" />
+                        </Button>
+                      </OverlayTrigger>
+                    </Panel.Title>
+                  </Col>
+                </Row>
+              </Panel.Heading>
+              <Panel.Body collapsible="true">
+                <ListGroup>
+                  <ListGroupItem>
+                    <Row>
+                      <Col md={8} style={{ paddingRight: 0 }}>
+                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="doi" placeholder="DOI: 10.... or  http://dx.doi.org/10... or 10. ..." />
+                      </Col>
+                      <Col md={3} style={{ paddingRight: 0 }}>
+                        <LiteralType handleInputChange={this.handleInputChange} disabled={false} val={literature.litype} />
+                      </Col>
+                      <Col md={1} style={{ paddingRight: 0 }}>
+                        <Button
+                          bsStyle="success"
+                          bsSize="small"
+                          style={{ marginTop: 2 }}
+                          onClick={this.fetchDOIMetadata}
+                          title="fetch metadata for this doi and add citation to selection"
+                          disabled={!doiValid(literature.doi)}
+                        >
+                          <i className="fa fa-plus" />
+                        </Button>
+                      </Col>
+                      <Col md={12} style={{ paddingRight: 0 }}>
+                        <Citation literature={literature} />
+                      </Col>
+                      <Col md={7} style={{ paddingRight: 0 }}>
+                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="title" placeholder="Title..." />
+                      </Col>
+                      <Col md={4} style={{ paddingRight: 0 }}>
+                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="url" placeholder="URL..." />
+                      </Col>
+                      <Col md={1}>
+                        <AddButton onLiteratureAdd={this.handleLiteratureAdd} literature={literature} title="add citation to selection" />
+                      </Col>
+                    </Row>
+                  </ListGroupItem>
+                </ListGroup>
+                <CitationTable rows={selectedRefs} sortedIds={sortedIds} removeCitation={this.handleLiteratureRemove} userId={currentUser.id} />
+              </Panel.Body>
+            </Panel>
+          </PanelGroup>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+LiteratureDetails.propTypes = {
+  literatureMap: PropTypes.instanceOf(LiteratureMap).isRequired
+};
diff --git a/app/packs/src/components/Material.js b/app/packs/src/components/Material.js
new file mode 100644
index 000000000..54b32e4b1
--- /dev/null
+++ b/app/packs/src/components/Material.js
@@ -0,0 +1,860 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Radio,
+  FormControl,
+  Button,
+  InputGroup,
+  OverlayTrigger,
+  Tooltip,
+  Checkbox,
+} from 'react-bootstrap';
+import { DragSource, DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo';
+import SampleName from 'src/components/common/SampleName';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import { UrlSilentNavigation, SampleCode } from 'src/utilities/ElementUtils';
+import { correctPrefix, validDigit } from 'src/utilities/MathUtils';
+import Reaction from 'src/models/Reaction';
+import Sample from 'src/models/Sample';
+import { permitCls, permitOn } from 'src/components/common/uis';
+
+const matSource = {
+  beginDrag(props) {
+    return props;
+  },
+};
+
+const matTarget = {
+  drop(tagProps, monitor) {
+    const { dropSample, dropMaterial } = tagProps;
+    const srcItem = monitor.getItem();
+    const srcType = monitor.getItemType();
+
+    if (srcType === DragDropItemTypes.SAMPLE) {
+      dropSample(
+        srcItem.element,
+        tagProps.material,
+        tagProps.materialGroup,
+      );
+    } else if (srcType === DragDropItemTypes.MOLECULE) {
+      dropSample(
+        srcItem.element,
+        tagProps.material,
+        tagProps.materialGroup,
+        null,
+        true,
+      );
+    } else if (srcType === DragDropItemTypes.MATERIAL) {
+      dropMaterial(
+        srcItem.material,
+        srcItem.materialGroup,
+        tagProps.material,
+        tagProps.materialGroup,
+      );
+    }
+  },
+  canDrop(tagProps, monitor) {
+    const srcType = monitor.getItemType();
+    const isCorrectType = srcType === DragDropItemTypes.MATERIAL
+      || srcType === DragDropItemTypes.SAMPLE
+      || srcType === DragDropItemTypes.MOLECULE;
+    return isCorrectType;
+  },
+};
+
+const matSrcCollect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const matTagCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+});
+
+const notApplicableInput = () => (
+  <td>
+    <FormControl
+      bsClass="bs-form--compact form-control"
+      bsSize="small"
+      style={{ textAlign: 'center' }}
+      type="text"
+      value="n/a"
+      disabled
+    />
+  </td>
+);
+
+const iupacNameTooltip = material => (
+  <Tooltip id="iupac_name_tooltip" className="left_tooltip">
+    <table>
+      <tbody>
+        <tr><td>IUPAC&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.molecule.iupac_name || ''}</td></tr>
+        <tr><td>Name&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.name || ''}</td></tr>
+        <tr><td>Ext.Label&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.external_label || ''}</td></tr>
+      </tbody>
+    </table>
+  </Tooltip>);
+
+const refreshSvgTooltip = <Tooltip id="refresh_svg_tooltip">Refresh reaction diagram</Tooltip>;
+
+const AddtoDescToolTip = <Tooltip id="tp-spl-code" className="left_tooltip">Add to description or additional information for publication and purification details</Tooltip>;
+
+const solvConcentration = (material, solventVolume) => {
+  const concn = ((material.amount_l / solventVolume) * 100).toFixed(1);
+  if (isNaN(concn) || !isFinite(concn)) { return 'n.d.'; }
+  return `${concn}%`;
+};
+
+class Material extends Component {
+  constructor(props) {
+    super(props);
+
+    this.createParagraph = this.createParagraph.bind(this);
+    this.handleAmountUnitChange = this.handleAmountUnitChange.bind(this);
+    this.handleMetricsChange = this.handleMetricsChange.bind(this);
+    this.handleCoefficientChange = this.handleCoefficientChange.bind(this);
+  }
+
+  handleMaterialClick(sample) {
+    const { reaction } = this.props;
+    UrlSilentNavigation(sample);
+    sample.updateChecksum();
+    ElementActions.showReactionMaterial({ sample, reaction });
+  }
+
+  materialVolume(material) {
+    if (material.contains_residues) { return notApplicableInput(); }
+    const { density, molarity_value, molarity_unit, has_density, has_molarity } = material;
+    const tooltip = has_density || has_molarity ?
+      (
+        <Tooltip id="density_info">
+          {has_density ? `density = ${density}` : `molarity = ${molarity_value} ${molarity_unit}`}
+        </Tooltip>
+      )
+      : <Tooltip id="density_info">no density or molarity defined</Tooltip>;
+
+    const metricPrefixes = ['m', 'n', 'u'];
+    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[1]) > -1) ? material.metrics[1] : 'm';
+
+    return (
+      <td>
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <div>
+            <NumeralInputWithUnitsCompo
+              key={material.id}
+              value={material.amount_l}
+              unit="l"
+              metricPrefix={metric}
+              metricPrefixes={metricPrefixes}
+              precision={3}
+              disabled={!permitOn(this.props.reaction) || ((this.props.materialGroup !== 'products') && !material.reference && this.props.lockEquivColumn)}
+              onChange={e => this.handleAmountUnitChange(e, material.amount_l)}
+              onMetricsChange={this.handleMetricsChange}
+              bsStyle={material.amount_unit === 'l' ? 'success' : 'default'}
+            />
+          </div>
+        </OverlayTrigger>
+      </td>
+    );
+  }
+
+
+  materialLoading(material, showLoadingColumn) {
+    if (!showLoadingColumn) {
+      return false;
+    } else if (!material.contains_residues) {
+      return notApplicableInput();
+    }
+
+    return (
+      <td>
+        <NumeralInputWithUnitsCompo
+          key={material.id}
+          value={material.loading}
+          unit="mmol/g"
+          metricPrefix="n"
+          metricPrefixes={['n']}
+          bsStyle={material.error_loading ? 'error' : 'success'}
+          precision={3}
+          disabled={!permitOn(this.props.reaction) || (this.props.materialGroup === 'products' || (!material.reference && this.props.lockEquivColumn))}
+          onChange={loading => this.handleLoadingChange(loading)}
+        />
+      </td>
+    );
+  }
+
+  materialRef(material) {
+    return (
+      this.props.materialGroup === 'products'
+        ? <td />
+        : <td>
+          <Radio
+            disabled={!permitOn(this.props.reaction)}
+            name="reference"
+            checked={material.reference}
+            onChange={e => this.handleReferenceChange(e)}
+            bsSize="xsmall"
+            style={{ margin: 0 }}
+          />
+        </td>
+    );
+  }
+
+  materialShowLabel(material, style = { padding: '5px 4px' }) {
+    return (
+      <Button
+        active
+        style={style}
+        onClick={e => this.handleShowLabelChange(e)}
+        bsStyle={material.show_label ? 'success' : 'primary'}
+        bsSize="small"
+        title={material.show_label ? 'Switch to structure' : 'Switch to label'}
+      >{material.show_label ? 'l' : 's'}
+      </Button>
+    );
+  }
+
+  equivalentOrYield(material) {
+    const { reaction, materialGroup } = this.props;
+    if (materialGroup === 'products') {
+      const refMaterial = reaction.getReferenceMaterial();
+      let calculateYield = material.equivalent;
+      if (reaction.hasPolymers()) {
+        calculateYield = `${((material.equivalent || 0) * 100).toFixed(0)}%`;
+      } else if (refMaterial && (refMaterial.decoupled || material.decoupled)) {
+        calculateYield = 'n.a.';
+      } else {
+        calculateYield = `${((material.equivalent <= 1 ? material.equivalent || 0 : 1) * 100).toFixed(0)}%`;
+      }
+      return (
+        <div>
+          <FormControl
+            name="yield"
+            type="text"
+            bsClass="bs-form--compact form-control"
+            bsSize="small"
+            value={calculateYield}
+            disabled
+          />
+        </div>
+      );
+    }
+    return (
+      <NumeralInputWithUnitsCompo
+        precision={4}
+        value={material.equivalent}
+        disabled={!permitOn(this.props.reaction) || ((((material.reference || false) && material.equivalent) !== false) || this.props.lockEquivColumn)}
+        onChange={e => this.handleEquivalentChange(e)}
+      />
+    );
+  }
+
+  handleExternalLabelChange(event) {
+    const value = event.target.value;
+    if (this.props.onChange) {
+      const e = {
+        type: 'externalLabelChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        externalLabel: value
+      };
+      this.props.onChange(e);
+    }
+  }
+
+  handleExternalLabelCompleted() {
+    if (this.props.onChange) {
+      const event = {
+        type: 'externalLabelCompleted'
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleReferenceChange(e) {
+    const value = e.target.value;
+    if (this.props.onChange) {
+      const event = {
+        type: 'referenceChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        value
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleShowLabelChange(e) {
+    const value = e.target.checked;
+    if (this.props.onChange) {
+      const event = {
+        type: 'showLabelChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        value
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleAmountChange(e) {
+    if (this.props.onChange && e) {
+      const event = {
+        amount: e,
+        type: 'amountChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleAmountTypeChange(e) {
+    if (this.props.onChange && e) {
+      const event = {
+        amountType: e,
+        type: 'amountTypeChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleCoefficientChange(e) {
+    const { onChange, materialGroup } = this.props;
+    const coefficient = e.value;
+    if (onChange) {
+      const event = {
+        coefficient,
+        type: 'coefficientChanged',
+        materialGroup,
+        sampleID: this.materialId()
+      };
+      onChange(event);
+    }
+  }
+
+  handleAmountUnitChange(e, value) {
+    if (e.value === value) return;
+    if (this.props.onChange && e) {
+      const event = {
+        amount: e,
+        type: 'amountUnitChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleMetricsChange(e) {
+    if (this.props.onChange && e) {
+      const event = {
+        metricUnit: e.metricUnit,
+        metricPrefix: e.metricPrefix,
+        type: 'MetricsChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleLoadingChange(newLoading) {
+    this.props.material.residues[0].custom_info.loading = newLoading.value;
+
+    // just recalculate value in mg using the new loading value
+    if (this.props.onChange) {
+      const event = {
+        type: 'amountChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        amount: this.props.material.amount
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleEquivalentChange(e) {
+    const equivalent = e.value;
+    if (this.props.onChange && e) {
+      const event = {
+        type: 'equivalentChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        equivalent
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  createParagraph(m) {
+    const { materialGroup } = this.props;
+    let molName = m.molecule_name_hash.label;
+    if (!molName) { molName = m.molecule.iupac_name; }
+    if (!molName) { molName = m.molecule.sum_formular; }
+
+    const gUnit = correctPrefix(m.amount_g, 3);
+    const lUnit = correctPrefix(m.amount_l, 3);
+    const molUnit = correctPrefix(m.amount_mol, 3); // ELN issue#829
+
+    const grm = gUnit ? `${gUnit}g, ` : '';
+    const vol = lUnit ? `${lUnit}L, ` : '';
+    const solVol = vol.substr(0, vol.length - 2);
+    const mol = molUnit ? `${molUnit}mol, ` : '';
+    const mlt = m.molarity_value === 0.0 ?
+      '' : `${validDigit(m.molarity_value, 3)}${m.molarity_unit}, `;
+    const eqv = `${validDigit(m.equivalent, 3)}`;
+    const yld = `${Math.round(m.equivalent * 100)}%`;
+
+    switch (materialGroup) {
+      case 'purification_solvents':
+      case 'solvents': {
+        return `${molName} (${solVol})`;
+      }
+      case 'products': {
+        return `${molName} (${grm}${vol}${mol}${mlt}${yld} yield)`;
+      }
+      default: {
+        return `${molName} (${grm}${vol}${mol}${mlt}${eqv} equiv)`;
+      }
+    }
+  }
+
+  handleAddToDesc(material) {
+    if (this.props.onChange) {
+      const event = {
+        type: 'addToDesc',
+        paragraph: this.createParagraph(material),
+      };
+      this.props.onChange(event);
+    }
+  }
+
+  handleDrySolventChange(event) {
+    const value = event.target.checked;
+    if (this.props.onChange) {
+      const e = {
+        type: 'drysolventChanged',
+        materialGroup: this.props.materialGroup,
+        sampleID: this.materialId(),
+        dry_solvent: value
+      };
+      this.props.onChange(e);
+    }
+  }
+
+  materialId() {
+    return this.material().id;
+  }
+
+  material() {
+    return this.props.material;
+  }
+
+  generalMaterial(props, style) {
+    const { material, deleteMaterial, connectDragSource, connectDropTarget,
+      showLoadingColumn, reaction } = props;
+    const isTarget = material.amountType === 'target';
+    const massBsStyle = material.amount_unit === 'g' ? 'success' : 'default';
+    const mol = material.amount_mol;
+    //const concn = mol / reaction.solventVolume;
+    const mw = material.decoupled ?
+      (material.molecular_mass) : (material.molecule && material.molecule.molecular_weight);
+
+    const metricPrefixes = ['m', 'n', 'u'];
+    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[0]) > -1) ? material.metrics[0] : 'm';
+    const metricPrefixesMol = ['m', 'n'];
+    const metricMol = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[2]) > -1) ? material.metrics[2] : 'm';
+    const metricPrefixesMolConc = ['m', 'n'];
+    const metricMolConc = (material.metrics && material.metrics.length > 3 && metricPrefixes.indexOf(material.metrics[3]) > -1) ? material.metrics[3] : 'm';
+
+    const inputsStyle = {
+      paddingRight: 2,
+      paddingLeft: 2,
+    };
+
+    return (
+      <tr className="general-material">
+        {compose(connectDragSource, connectDropTarget)(
+          <td className={`drag-source ${permitCls(reaction)}`} style={style}>
+            <span className="text-info fa fa-arrows" />
+          </td>,
+          { dropEffect: 'copy' }
+        )}
+
+        <td style={{ width: '22%', maxWidth: '50px' }}>
+          {this.materialNameWithIupac(material)}
+        </td>
+
+        {this.materialRef(material)}
+
+        <td style={{ inputsStyle }}>
+          {this.materialShowLabel(material)}
+        </td>
+
+        <td style={{ inputsStyle }}>
+          {this.switchTargetReal(isTarget)}
+        </td>
+
+        <td style={{ width: '1%', maxWidth: '5px' }}>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="reaction-coefficient-info"> Reaction Coefficient </Tooltip>}>
+            <div>
+              <NumeralInputWithUnitsCompo
+                key={material.id}
+                value={material.coefficient}
+                onChange={this.handleCoefficientChange}
+                name="coefficient"
+              />
+            </div>
+          </OverlayTrigger>
+        </td>
+
+        <td>
+          <OverlayTrigger
+            delay="100"
+            placement="top"
+            overlay={
+              <Tooltip id="molecular-weight-info">{this.generateMolecularWeightTooltipText(material,reaction)}</Tooltip>
+            }>
+            <div>
+              <NumeralInputWithUnitsCompo
+                key={material.id}
+                value={material.amount_g}
+                unit="g"
+                metricPrefix={metric}
+                metricPrefixes={metricPrefixes}
+                precision={4}
+                disabled={!permitOn(reaction) || (this.props.materialGroup !== 'products' && !material.reference && this.props.lockEquivColumn)}
+                onChange={e => this.handleAmountUnitChange(e, material.amount_g)}
+                onMetricsChange={this.handleMetricsChange}
+                bsStyle={material.error_mass ? 'error' : massBsStyle}
+                name="molecular-weight"
+              />
+            </div>
+          </OverlayTrigger>
+        </td>
+
+        {this.materialVolume(material)}
+
+        <td>
+          <NumeralInputWithUnitsCompo
+            key={material.id}
+            value={material.amount_mol}
+            unit="mol"
+            metricPrefix={metricMol}
+            metricPrefixes={metricPrefixesMol}
+            precision={4}
+            disabled={!permitOn(reaction) || (this.props.materialGroup === 'products' || (!material.reference && this.props.lockEquivColumn))}
+            onChange={e => this.handleAmountUnitChange(e, material.amount_mol)}
+            onMetricsChange={this.handleMetricsChange}
+            bsStyle={material.amount_unit === 'mol' ? 'success' : 'default'}
+          />
+        </td>
+
+        {this.materialLoading(material, showLoadingColumn)}
+
+        <td>
+          <NumeralInputWithUnitsCompo
+            key={material.id}
+            value={material.concn}
+            unit="mol/l"
+            metricPrefix={metricMolConc}
+            metricPrefixes={metricPrefixesMolConc}
+            precision={4}
+            disabled
+            onChange={e => this.handleAmountUnitChange(e, material.concn)}
+            onMetricsChange={this.handleMetricsChange}
+          />
+        </td>
+
+        <td>
+          {this.equivalentOrYield(material)}
+        </td>
+        <td>
+          <Button
+            disabled={!permitOn(reaction)}
+            bsStyle="danger"
+            bsSize="small"
+            disabled={this.props.reaction.is_published == true}
+            onClick={() => deleteMaterial(material)}
+          >
+            <i className="fa fa-trash-o" />
+          </Button>
+        </td>
+      </tr>
+    );
+  }
+
+  generateMolecularWeightTooltipText(sample, reaction) {
+    const isProduct = reaction.products.includes(sample)
+    const molecularWeight = sample.decoupled ?
+      (sample.molecular_mass) : (sample.molecule && sample.molecule.molecular_weight);
+    let theoreticalMassPart = "";
+    if (isProduct && sample.maxAmount) {
+      theoreticalMassPart = `, max theoretical mass: ${Math.round(sample.maxAmount * 10000) / 10} mg`
+    }
+    return `molar mass: ${molecularWeight} g/mol` + theoreticalMassPart;
+  }
+
+  toggleTarget(isTarget) {
+    if (this.props.materialGroup !== 'products') {
+      this.handleAmountTypeChange(!isTarget ? 'target' : 'real');
+    }
+  }
+
+  solventMaterial(props, style) {
+    const { material, deleteMaterial, connectDragSource,
+      connectDropTarget, reaction } = props;
+    const isTarget = material.amountType === 'target';
+    const mw = material.molecule && material.molecule.molecular_weight
+    const drySolvTooltip = <Tooltip>Dry Solvent</Tooltip>;
+    return (
+      <tr className="solvent-material">
+        {compose(connectDragSource, connectDropTarget)(
+          <td className={`drag-source ${permitCls(reaction)}`} style={style}>
+            <span className="text-info fa fa-arrows" />
+          </td>,
+          { dropEffect: 'copy' }
+        )}
+
+        <td style={{ width: '25%', maxWidth: '50px' }}>
+          {this.materialNameWithIupac(material)}
+        </td>
+        <td>
+          <OverlayTrigger placement="top" overlay={drySolvTooltip}>
+            <Checkbox
+              checked={material.dry_solvent}
+              onChange={(event) => this.handleDrySolventChange(event)}
+            />
+          </OverlayTrigger>
+        </td>
+        <td>
+          {this.switchTargetReal(isTarget)}
+        </td>
+
+        <td>
+          <InputGroup>
+            <OverlayTrigger
+              placement="top"
+              overlay={<Tooltip id="molecular-weight-info">{material.amount_g} g - {mw} g/mol</Tooltip>}
+            >
+              <div>
+                <FormControl
+                  disabled={!permitOn(reaction)}
+                  type="text"
+                  bsClass="bs-form--compact form-control"
+                  bsSize="small"
+                  value={material.external_label}
+                  placeholder={material.molecule.iupac_name}
+                  onChange={event => this.handleExternalLabelChange(event)}
+                />
+              </div>
+            </OverlayTrigger>
+            <InputGroup.Button>
+              <OverlayTrigger placement="bottom" overlay={refreshSvgTooltip}>
+                <Button
+                  disabled={!permitOn(reaction)}
+                  active
+                  disabled={this.props.reaction.is_published == true}
+                  onClick={e => this.handleExternalLabelCompleted(e)}
+                  bsSize="small"
+                ><i className="fa fa-refresh" /></Button>
+              </OverlayTrigger>
+            </InputGroup.Button>
+          </InputGroup>
+        </td>
+
+        {this.materialVolume(material)}
+
+        <td>
+          <FormControl
+            type="text"
+            bsClass="bs-form--compact form-control"
+            bsSize="small"
+            value={solvConcentration(material, props.reaction.solventVolume)}
+            disabled
+          />
+        </td>
+
+        <td>
+          <Button
+            disabled={!permitOn(reaction)}
+            bsStyle="danger"
+            bsSize="small"
+            disabled={this.props.reaction.is_published == true}
+            onClick={() => deleteMaterial(material)}
+          ><i className="fa fa-trash-o" /></Button>
+        </td>
+      </tr>
+    );
+  }
+
+  switchTargetReal(isTarget, style = { padding: '5px 4px' }) {
+    return (
+      <Button
+        disabled={!permitOn(this.props.reaction)}
+        active
+        style={style}
+        onClick={() => this.toggleTarget(isTarget)}
+        disabled={this.props.reaction.is_published == true}
+        bsStyle={isTarget ? 'success' : 'primary'}
+        bsSize="small"
+      >{isTarget ? 't' : 'r'}</Button>
+    );
+  }
+
+  materialNameWithIupac(material) {
+    const { index, materialGroup, reaction } = this.props;
+    // Skip shortLabel for reactants and solvents/purification_solvents
+    const skipIupacName = (
+      materialGroup === 'reactants' ||
+      materialGroup === 'solvents' ||
+      materialGroup === 'purification_solvents'
+    );
+    let materialName = '';
+    let moleculeIupacName = '';
+    const iupacStyle = {
+      display: 'block',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%'
+    };
+
+    const idCheck = /^\d+$/;
+
+    if (skipIupacName) {
+      let materialDisplayName = material.molecule_iupac_name || material.name;
+      if (materialGroup === 'solvents' || materialGroup === 'purification_solvents') {
+        materialDisplayName = material.external_label || materialDisplayName;
+      }
+      if (materialDisplayName === null || materialDisplayName === '') {
+        materialDisplayName = (
+          <span>
+            <SampleName sample={material} />
+          </span>
+        );
+      }
+
+      if (idCheck.test(material.id)) {
+        materialName = (
+          <a
+            role="link"
+            tabIndex={0}
+            onClick={() => this.handleMaterialClick(material)}
+            style={{ cursor: 'pointer' }}
+          ><span className="reaction-material-link">{materialDisplayName}</span></a>
+        );
+      } else {
+        materialName = <span>{materialDisplayName}</span>;
+      }
+    } else {
+      moleculeIupacName = material.molecule_iupac_name;
+      const materialDisplayName = material.title() === ''
+        ? <SampleName sample={material} />
+        : material.title();
+      materialName = (
+        <a
+          role="link"
+          tabIndex={0}
+          onClick={() => this.handleMaterialClick(material)}
+          style={{ cursor: 'pointer' }}
+        ><span className="reaction-material-link">{materialDisplayName}</span></a>
+      );
+
+      if (material.isNew) { materialName = materialDisplayName; }
+    }
+    let br = <br />;
+    if (moleculeIupacName === '') {
+      iupacStyle.display = 'none';
+      br = '';
+    }
+    const serialCode = SampleCode(index, materialGroup);
+
+    const addToDesc = (e) => {
+      e.stopPropagation();
+      this.handleAddToDesc(material);
+    };
+
+    return (
+      <OverlayTrigger placement="bottom" overlay={iupacNameTooltip(material)} >
+        <div style={{ display: 'inline-block', maxWidth: '100%' }}>
+          <div className="inline-inside">
+            <OverlayTrigger placement="top" overlay={AddtoDescToolTip}>
+              <Button bsStyle="primary" bsSize="xsmall" onClick={addToDesc} disabled={!permitOn(reaction)}>
+                {serialCode}
+              </Button>
+            </OverlayTrigger>&nbsp;
+            {materialName}
+          </div>
+          <span style={iupacStyle}>
+            {moleculeIupacName}
+          </span>
+        </div>
+      </OverlayTrigger>
+    );
+  }
+
+  render() {
+    const {
+      material, isDragging, canDrop, isOver, materialGroup
+    } = this.props;
+    const style = { padding: '0' };
+    if (isDragging) { style.opacity = 0.3; }
+    if (canDrop) {
+      style.borderStyle = 'dashed';
+      style.borderWidth = 2;
+    }
+    if (isOver) {
+      style.borderColor = '#337ab7';
+      style.opacity = 0.6;
+      style.backgroundColor = '#337ab7';
+    }
+
+    if (this.props.materialGroup === 'products') {
+      material.amountType = 'real'; // always take real amount for product
+    }
+    const sp = materialGroup === 'solvents' || materialGroup === 'purification_solvents';
+    const component = sp ?
+      this.solventMaterial(this.props, style) :
+      this.generalMaterial(this.props, style);
+
+    return component;
+  }
+}
+
+export default compose(
+  DragSource(
+    DragDropItemTypes.MATERIAL,
+    matSource,
+    matSrcCollect,
+  ),
+  DropTarget(
+    [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE, DragDropItemTypes.MATERIAL],
+    matTarget,
+    matTagCollect,
+  ),
+)(Material);
+
+Material.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  material: PropTypes.instanceOf(Sample).isRequired,
+  materialGroup: PropTypes.string.isRequired,
+  deleteMaterial: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  showLoadingColumn: PropTypes.bool.isRequired,
+  index: PropTypes.number,
+  isDragging: PropTypes.bool,
+  canDrop: PropTypes.bool,
+  isOver: PropTypes.bool,
+  lockEquivColumn: PropTypes.bool.isRequired
+};
diff --git a/app/packs/src/components/MaterialCalculations.js b/app/packs/src/components/MaterialCalculations.js
new file mode 100644
index 000000000..a35d7f1c8
--- /dev/null
+++ b/app/packs/src/components/MaterialCalculations.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+// import PropTypes from 'prop-types';
+import { FormControl } from 'react-bootstrap';
+
+import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo';
+
+const source = {
+  beginDrag(props) {
+    return props;
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+});
+
+export default class MaterialCalculations extends Component {
+
+  notApplicableInput(inputsStyle) {
+    return (
+      <td style={inputsStyle}>
+        <FormControl type="text"
+          value="N / A"
+          disabled={true}
+        />
+      </td>
+    )
+  }
+
+  materialVolume(material, inputsStyle) {
+
+    const metricPrefixes = ['m', 'n', 'u'];
+    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[1]) > -1) ? material.metrics[1] : 'm';
+
+    if (material.contains_residues)
+      return this.notApplicableInput(inputsStyle);
+    else
+      return (
+        <td style={inputsStyle}>
+          <NumeralInputWithUnitsCompo
+            key={material.id}
+            value={material.amount_ml || ''}
+            unit='l'
+            metricPrefix={metric}
+            metricPrefixes={metricPrefixes}
+            onChange={(amount) => this.handleAmountChange(amount)}
+          />
+        </td>
+      )
+  }
+
+  render() {
+    const { material, deleteMaterial, isDragging, connectDragSource } = this.props;
+
+    const metricPrefixes = ['m', 'n', 'u'];
+    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[0]) > -1) ? material.metrics[0] : 'm';
+
+    const metricPrefixesMol = ['m', 'n'];
+    const metricMol = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[2]) > -1) ? material.metrics[2] : 'm';
+
+    const inputsStyle = {
+      paddingTop: 15,
+      paddingRight: 2,
+      paddingLeft: 2,
+    };
+
+    return <tr>
+      <td style={inputsStyle}></td>
+      <td style={inputsStyle}></td>
+      <td style={inputsStyle}></td>
+      <td style={inputsStyle}><label>Adjusted: </label></td>
+      <td style={inputsStyle}>
+        <NumeralInputWithUnitsCompo
+          key={material.id}
+          value={material.adjusted_amount_g}
+          unit='g'
+          metricPrefix={metric}
+          metricPrefixes={metricPrefixes}
+          precision={5}
+          disabled
+          readOnly
+        />
+      </td>
+
+      {this.materialVolume(material, inputsStyle)}
+
+      <td style={inputsStyle}>
+        <NumeralInputWithUnitsCompo
+          key={'adjusted_amount_mol' + material.id.toString()}
+          value={material.adjusted_amount_mol}
+          unit='mol'
+          metricPrefix={metricMol}
+          metricPrefixes={metricPrefixesMol}
+          precision={4}
+          disabled
+          readOnly
+        />
+      </td>
+
+      <td style={inputsStyle}>
+        <NumeralInputWithUnitsCompo
+          key={'adjusted_loading' + material.id.toString()}
+          value={material.adjusted_loading}
+          unit='mmol/g'
+          metricPrefix='n'
+          metricPrefixes={['n']}
+          precision={3}
+          disabled
+          readOnly
+        />
+      </td>
+
+      <td style={inputsStyle}>
+        <FormControl
+          type="text"
+          value={`${((material.adjusted_equivalent || 0) * 100).toFixed(1)} %`}
+          disabled
+        />
+      </td>
+      <td></td>
+    </tr>
+  }
+}
diff --git a/app/packs/src/components/MaterialGroup.js b/app/packs/src/components/MaterialGroup.js
new file mode 100644
index 000000000..816980598
--- /dev/null
+++ b/app/packs/src/components/MaterialGroup.js
@@ -0,0 +1,335 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Glyphicon, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import VirtualizedSelect from 'react-virtualized-select';
+import Material from 'src/apps/mydb/elements/details/reactions/schemeTab/Material';
+import MaterialCalculations from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialCalculations';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import MoleculesFetcher from 'src/fetchers/MoleculesFetcher';
+import Molecule from 'src/models/Molecule';
+import Reaction from 'src/models/Reaction';
+import { defaultMultiSolventsSmilesOptions } from 'src/components/staticDropdownOptions/options';
+import { ionic_liquids } from 'src/components/staticDropdownOptions/ionic_liquids';
+import { reagents_kombi } from 'src/components/staticDropdownOptions/reagents_kombi';
+import { permitOn } from 'src/components/common/uis';
+import HelpInfo from 'src/components/common/HelpInfo';
+
+const MaterialGroup = ({
+  materials, materialGroup, deleteMaterial, onChange,
+  showLoadingColumn, reaction, addDefaultSolvent, headIndex,
+  dropMaterial, dropSample, switchEquiv, lockEquivColumn
+}) => {
+  const contents = [];
+  let index = headIndex;
+  if (materials && materials.length > 0) {
+    materials.forEach((material) => {
+      index += 1;
+      contents.push((
+        <Material
+          reaction={reaction}
+          onChange={onChange}
+          key={material.id}
+          material={material}
+          materialGroup={materialGroup}
+          showLoadingColumn={showLoadingColumn}
+          deleteMaterial={m => deleteMaterial(m, materialGroup)}
+          index={index}
+          dropMaterial={dropMaterial}
+          dropSample={dropSample}
+          lockEquivColumn={lockEquivColumn}
+        />
+      ));
+
+      if (materialGroup === 'products' &&
+        material.adjusted_loading &&
+        material.error_mass) {
+        contents.push((
+          <MaterialCalculations
+            material={material}
+            materialGroup={materialGroup}
+            index={index}
+          />
+        ));
+      }
+    });
+  }
+
+  if (materialGroup === 'solvents' ||
+    materialGroup === 'purification_solvents') {
+    return (
+      <SolventsMaterialGroup
+        contents={contents}
+        materialGroup={materialGroup}
+        reaction={reaction}
+        addDefaultSolvent={addDefaultSolvent}
+      />
+    );
+  }
+
+  return (
+    <GeneralMaterialGroup
+      contents={contents}
+      materialGroup={materialGroup}
+      showLoadingColumn={showLoadingColumn}
+      reaction={reaction}
+      addDefaultSolvent={addDefaultSolvent}
+      switchEquiv={switchEquiv}
+      lockEquivColumn={lockEquivColumn}
+    />
+  );
+};
+
+const switchEquivTooltip = () => (
+  <Tooltip id="assign_button">Lock/unlock Equiv <br /> for target amounts</Tooltip>
+);
+
+const SwitchEquivButton = (lockEquivColumn, switchEquiv) => {
+  return (
+    <OverlayTrigger placement="top" overlay={switchEquivTooltip()} >
+      <Button
+        id="lock_equiv_column_btn"
+        bsSize="xsmall"
+        bsStyle={lockEquivColumn ? 'warning' : 'default'}
+        onClick={switchEquiv}
+      >
+        <i className={lockEquivColumn ? 'fa fa-lock' : 'fa fa-unlock'} />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const GeneralMaterialGroup = ({
+  contents, materialGroup, showLoadingColumn, reaction, addDefaultSolvent,
+  switchEquiv, lockEquivColumn
+}) => {
+  const isReactants = materialGroup === 'reactants';
+  let headers = {
+    ref: 'Ref',
+    group: 'Starting materials',
+    show_label: 'L/S',
+    tr: 'T/R',
+    mass: 'Mass',
+    reaction_coefficient: 'Coeff',
+    amount: 'Amount',
+    loading: 'Loading',
+    concn: 'Conc',
+    vol: 'Vol',
+    eq: 'Equiv'
+  };
+
+  const reagentList = [];
+  let reagentDd = <span />;
+  const createReagentForReaction = (event) => {
+    const smi = event.value;
+    MoleculesFetcher.fetchBySmi(smi)
+      .then((result) => {
+        const molecule = new Molecule(result);
+        molecule.density = molecule.density || 0;
+        addDefaultSolvent(molecule, null, materialGroup, event.label);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  };
+
+  if (isReactants) {
+    headers = { group: 'Reactants' };
+    Object.keys(reagents_kombi).forEach((x) => {
+      reagentList.push({
+        label: x,
+        value: reagents_kombi[x]
+      });
+    });
+    reagentDd = (
+      <VirtualizedSelect
+        disabled={!permitOn(reaction)}
+        className="reagents-select"
+        name="Reagents"
+        multi={false}
+        options={reagentList}
+        placeholder="Reagents"
+        onChange={createReagentForReaction}
+      />
+    );
+  }
+
+  if (materialGroup === 'products') {
+    headers.group = 'Products';
+    headers.eq = 'Yield';
+  }
+
+  const refTHead = (materialGroup !== 'products') ? headers.ref : null;
+  /**
+   * Add a (not yet persisted) sample to a material group
+   * of the given reaction
+   */
+  const addSampleButton = (
+    <Button
+      disabled={!permitOn(reaction)}
+      bsStyle="success"
+      bsSize="xs"
+      onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
+    >
+      <Glyphicon glyph="plus" />
+    </Button>
+  );
+
+  return (
+    <div>
+      <table width="100%" className="reaction-scheme">
+        <colgroup>
+          <col style={{ width: '4%' }} />
+          <col style={{ width: showLoadingColumn ? '8%' : '15%' }} />
+          <col style={{ width: '4%' }} />
+          <col style={{ width: '2%' }} />
+          <col style={{ width: '2%' }} />
+          <col style={{ width: showLoadingColumn ? '3%' : '4%' }} />
+          <col style={{ width: showLoadingColumn ? '10%' : '11%' }} />
+          {showLoadingColumn && <col style={{ width: '11%' }} />}
+          <col style={{ width: showLoadingColumn ? '10%' : '11%' }} />
+          <col style={{ width: showLoadingColumn ? '12%' : '13%' }} />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>{addSampleButton}</th>
+            <th>{headers.group}</th>
+            {isReactants && <th colSpan={showLoadingColumn ? 9 : 8}>{reagentDd}</th>}
+            {!isReactants && <th>{refTHead}</th>}
+            <th>{headers.show_label}</th>
+            {!isReactants && <th style={{ padding: '3px 3px' }}>{headers.tr}</th>}
+            {!isReactants && <th style={{ padding: '3px 3px' }}>{headers.reaction_coefficient}</th>}
+            {!isReactants && <th>{headers.amount}</th>}
+            {!isReactants && <th />}
+            {!isReactants && <th />}
+            {showLoadingColumn && !isReactants && <th>{headers.loading}</th>}
+            {!isReactants && <th>{headers.concn}</th>}
+            {!isReactants && permitOn(reaction) && <th>{headers.eq} {!isReactants && materialGroup !== 'products' && SwitchEquivButton(lockEquivColumn, switchEquiv)}</th> }
+          </tr>
+        </thead>
+        <tbody>
+          {contents.map(item => item)}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+
+const SolventsMaterialGroup = ({
+  contents, materialGroup, reaction, addDefaultSolvent
+}) => {
+  const addSampleButton = (
+    <Button
+      disabled={!permitOn(reaction)}
+      bsStyle="success"
+      bsSize="xs"
+      onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
+    >
+      <Glyphicon glyph="plus" />
+    </Button>
+  );
+
+  const createDefaultSolventsForReaction = (event) => {
+    const solvent = event.value;
+    // MoleculesFetcher.fetchByMolfile(solvent.molfile)
+    const smi = solvent.smiles;
+    MoleculesFetcher.fetchBySmi(smi)
+      .then((result) => {
+        const molecule = new Molecule(result);
+        const d = molecule.density;
+        const solventDensity = solvent.density || 1;
+        molecule.density = (d && d > 0) || solventDensity;
+        addDefaultSolvent(molecule, null, materialGroup, solvent.external_label);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  };
+
+  const solventOptions = Object.keys(ionic_liquids).reduce(
+    (solvents, ionicLiquid) => solvents.concat({
+      label: ionicLiquid,
+      value: {
+        external_label: ionicLiquid,
+        smiles: ionic_liquids[ionicLiquid],
+        density: 1.0,
+        drySolvent: false
+      }
+    }), defaultMultiSolventsSmilesOptions
+  );
+
+  return (
+    <div>
+      <table width="100%" className="reaction-scheme">
+        <thead>
+          <tr>
+            <th width="4%">{addSampleButton}</th>
+            <th width="21%" style={{ paddingRight: '10px' }}>
+              <VirtualizedSelect
+                disabled={!permitOn(reaction)}
+                className="solvents-select"
+                name="default solvents"
+                multi={false}
+                options={solventOptions}
+                placeholder="Default solvents"
+                onChange={createDefaultSolventsForReaction}
+              />
+            </th>
+            <th width="2%" title="Dry Solvent">DS</th>
+            <th width="4%">T/R</th>
+            <th width="24%">Label</th>
+            <th width="13%">Vol</th>
+            <th width="13%">Vol ratio</th>
+            <th width="3%" />
+          </tr>
+        </thead>
+        <tbody>
+          {contents.map(item => item)}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+MaterialGroup.propTypes = {
+  materialGroup: PropTypes.string.isRequired,
+  headIndex: PropTypes.number.isRequired,
+  materials: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  deleteMaterial: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  showLoadingColumn: PropTypes.bool,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  addDefaultSolvent: PropTypes.func.isRequired,
+  dropMaterial: PropTypes.func.isRequired,
+  dropSample: PropTypes.func.isRequired,
+  switchEquiv: PropTypes.func.isRequired,
+  lockEquivColumn: PropTypes.bool
+};
+
+GeneralMaterialGroup.propTypes = {
+  materialGroup: PropTypes.string.isRequired,
+  showLoadingColumn: PropTypes.bool,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  addDefaultSolvent: PropTypes.func.isRequired,
+  contents: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  switchEquiv: PropTypes.func.isRequired,
+  lockEquivColumn: PropTypes.bool
+};
+
+SolventsMaterialGroup.propTypes = {
+  materialGroup: PropTypes.string.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  addDefaultSolvent: PropTypes.func.isRequired,
+  contents: PropTypes.arrayOf(PropTypes.shape).isRequired
+};
+
+MaterialGroup.defaultProps = {
+  showLoadingColumn: false,
+  lockEquivColumn: false
+};
+
+GeneralMaterialGroup.defaultProps = {
+  showLoadingColumn: false,
+  lockEquivColumn: false
+};
+
+
+export { MaterialGroup, GeneralMaterialGroup, SolventsMaterialGroup };
diff --git a/app/packs/src/components/MaterialGroupContainer.js b/app/packs/src/components/MaterialGroupContainer.js
new file mode 100644
index 000000000..e4550299f
--- /dev/null
+++ b/app/packs/src/components/MaterialGroupContainer.js
@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import { MaterialGroup } from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup';
+import Reaction from 'src/models/Reaction';
+
+
+const target = {
+  drop(tagProps, monitor) {
+    const { dropSample, dropMaterial } = tagProps;
+    const srcItem = monitor.getItem();
+    const srcType = monitor.getItemType();
+    if (srcType === DragDropItemTypes.SAMPLE) {
+      dropSample(
+        srcItem.element,
+        tagProps.material,
+        tagProps.materialGroup,
+      );
+    } else if (srcType === DragDropItemTypes.MOLECULE) {
+      dropSample(
+        srcItem.element,
+        tagProps.material,
+        tagProps.materialGroup,
+        null,
+        true,
+      );
+    } else if (srcType === DragDropItemTypes.MATERIAL) {
+      dropMaterial(
+        srcItem.material,
+        srcItem.materialGroup,
+        tagProps.material,
+        tagProps.materialGroup,
+      );
+    }
+  },
+  canDrop(tagProps, monitor) {
+    const srcType = monitor.getItemType();
+    const isCorrectType = srcType === DragDropItemTypes.MATERIAL
+      || srcType === DragDropItemTypes.SAMPLE
+      || srcType === DragDropItemTypes.MOLECULE;
+    const noMaterial = tagProps.materials.length === 0;
+    return noMaterial && isCorrectType;
+  },
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+});
+
+class MaterialGroupContainer extends Component {
+  render() {
+    const {
+      materials, materialGroup, showLoadingColumn, headIndex,
+      isOver, canDrop, connectDropTarget,
+      deleteMaterial, onChange, reaction, dropSample, dropMaterial, switchEquiv, lockEquivColumn
+    } = this.props;
+    const style = {
+      padding: '2px 5px',
+    };
+    if (isOver && canDrop) {
+      style.borderStyle = 'dashed';
+      style.borderColor = '#337ab7';
+    } else if (canDrop) {
+      style.borderStyle = 'dashed';
+    }
+
+    return connectDropTarget(
+      <div style={style}>
+        <MaterialGroup
+          reaction={reaction}
+          onChange={onChange}
+          materials={materials}
+          materialGroup={materialGroup}
+          showLoadingColumn={showLoadingColumn}
+          deleteMaterial={deleteMaterial}
+          addDefaultSolvent={dropSample}
+          dropSample={dropSample}
+          dropMaterial={dropMaterial}
+          headIndex={headIndex}
+          switchEquiv={switchEquiv}
+          lockEquivColumn={lockEquivColumn}
+        />
+      </div>,
+    );
+  }
+}
+
+export default DropTarget(
+  [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE, DragDropItemTypes.MATERIAL],
+  target,
+  collect,
+)(MaterialGroupContainer);
+
+MaterialGroupContainer.propTypes = {
+  materials: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  headIndex: PropTypes.number.isRequired,
+  materialGroup: PropTypes.string.isRequired,
+  deleteMaterial: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dropSample: PropTypes.func.isRequired,
+  dropMaterial: PropTypes.func.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  showLoadingColumn: PropTypes.bool,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
+  switchEquiv: PropTypes.func,
+  lockEquivColumn: PropTypes.bool
+};
+
+MaterialGroupContainer.defaultProps = {
+  showLoadingColumn: false,
+  switchEquiv: () => null,
+  lockEquivColumn: false
+};
diff --git a/app/packs/src/components/MoleculeModerator.js b/app/packs/src/components/MoleculeModerator.js
new file mode 100644
index 000000000..a9c31598d
--- /dev/null
+++ b/app/packs/src/components/MoleculeModerator.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import { Navbar, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
+
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import LoadingModal from 'src/components/common/LoadingModal';
+import MoleculeModeratorComponent from 'src/apps/moleculeModerator/MoleculeModeratorComponent';
+import MoleculesFetcher from 'src/fetchers/MoleculesFetcher';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import Notifications from 'src/components/Notifications';
+
+const pageNav = (
+  <Navbar fixedTop>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="/">Home</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Text>
+        Molecule Moderator
+      </Navbar.Text>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+const pageNotify = (title, level, message) => {
+  const notification = {
+    title,
+    message,
+    level,
+    dismissible: 'button',
+    autoDismiss: 5,
+    position: 'tc',
+    uid: 'moderator'
+  };
+  NotificationActions.add(notification);
+};
+
+class MoleculeModerator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      molecule: null,
+      showStructureEditor: false,
+      msg: { show: false, level: null, message: null },
+    };
+
+    this.handleEditor = this.handleEditor.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleEditorSave = this.handleEditorSave.bind(this);
+    this.onSave = this.onSave.bind(this);
+  }
+
+  onSave() {
+    LoadingActions.start();
+    let { molecule } = this.state;
+    const { msg } = this.state;
+    MoleculesFetcher.updateMolfileSVG(molecule).then((json) => {
+      if (json.msg.level !== 'error') {
+        ({ molecule } = json);
+      }
+      msg.show = true;
+      msg.level = json.msg.level;
+      msg.message = json.msg.message;
+      this.setState({ molecule, msg, showStructureEditor: false });
+      LoadingActions.stop();
+      pageNotify('Save', msg.level, msg.message);
+    });
+  }
+
+  handleEditor(show) {
+    this.setState({ showStructureEditor: show });
+  }
+
+  handleSearch() {
+    LoadingActions.start();
+    const { msg } = this.state;
+    MoleculesFetcher.getByInChiKey(this.refInChiKey.value.trim())
+      .then((result) => {
+        msg.show = true;
+        msg.level = result ? 'info' : 'error';
+        msg.message = result ? 'Record found!' : 'No record found!';
+        this.setState({ msg, molecule: result.molecule, showStructureEditor: false });
+        LoadingActions.stop();
+        pageNotify('Search', msg.level, msg.message);
+      }).catch((errorMessage) => {
+        msg.show = true;
+        msg.level = 'error';
+        msg.message = errorMessage;
+        this.setState({ msg });
+        LoadingActions.stop();
+        pageNotify('Search', msg.level, msg.message);
+      });
+  }
+
+  handleEditorSave(molfile, svg_file = null, config = null) {
+    const { molecule } = this.state;
+    molecule.molfile = molfile;
+    const smiles = config ? config.smiles : null;
+    const isChemdraw = !!smiles;
+    MoleculesFetcher.renewSVGFile(molecule.id, svg_file, isChemdraw).then((json) => {
+      molecule.molecule_svg_file = json.svg_path;
+      this.setState({ molecule, showStructureEditor: false });
+    });
+  }
+
+  render() {
+    const formSearch = (
+      <form>
+        <FormGroup controlId="frmCtrlInChiKey">
+          <ControlLabel>InChiKey</ControlLabel>
+          <FormControl type="text" placeholder="Enter text" inputRef={(ref) => { this.refInChiKey = ref; }} />
+        </FormGroup>
+        <Button onClick={this.handleSearch}>Search&nbsp;<i className="fa fa-search" aria-hidden="true" /></Button>
+      </form>
+    );
+
+    const pageComponent = this.state.molecule ?
+      (<MoleculeModeratorComponent
+        molecule={this.state.molecule}
+        showStructureEditor={this.state.showStructureEditor}
+        handleEditorSave={this.handleEditorSave}
+        handleEditor={this.handleEditor}
+        onSave={this.onSave}
+      />) : <div />;
+
+    return (
+      <div>
+        {pageNav}
+        <div className="container" style={{ marginTop: '60px' }}>
+          {formSearch}
+          <hr />
+        </div>
+        {pageComponent}
+        <Notifications />
+        <LoadingModal />
+      </div>
+    );
+  }
+}
+
+export default MoleculeModerator;
diff --git a/app/packs/src/components/MoleculeModeratorComponent.js b/app/packs/src/components/MoleculeModeratorComponent.js
new file mode 100644
index 000000000..f18b24afc
--- /dev/null
+++ b/app/packs/src/components/MoleculeModeratorComponent.js
@@ -0,0 +1,314 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col, Panel, Button, Row, FormControl, Table, Popover, ButtonGroup, Modal, OverlayTrigger, Tooltip, Form, FormGroup, InputGroup } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import { findIndex } from 'lodash';
+import StructureEditorModal from './structure_editor/StructureEditorModal';
+import MoleculesFetcher from './fetchers/MoleculesFetcher';
+
+export default class MoleculeModeratorComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false,
+      isNew: false,
+      molName: {},
+      molNames: (this.props.molecule && this.props.molecule.molecule_names) || []
+    };
+    this.handleStructureEditorSave = this.handleStructureEditorSave.bind(this);
+    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.confirmDelete = this.confirmDelete.bind(this);
+    this.handleShowModal = this.handleShowModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.onSaveName = this.onSaveName.bind(this);
+    this.onAddName = this.onAddName.bind(this);
+  }
+
+
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        molNames: (this.props.molecule && this.props.molecule.molecule_names) || []
+      });
+    }
+  }
+  onAddName() {
+    const molName = {
+      id: -1,
+      description: 'defined by user',
+      name: ''
+    };
+    this.setState({
+      molName,
+      isNew: true,
+      show: true
+    });
+  }
+ 
+  onSaveName() {
+    const { molecule } = this.props;
+    const { molNames, molName, isNew } = this.state;
+
+    const name = this.m_name.value.trim();
+    if (name == '') {
+      // eslint-disable-next-line no-alert
+      alert('Please input name!');
+      return false;
+    }
+
+    molName.name = name;
+
+    const params = {
+      id: molecule.id,
+      name_id: molName.id,
+      description: molName.description,
+      name
+    };
+
+    MoleculesFetcher.saveMoleculeName(params).then((result) => {
+      if (result.error) {
+        console.log(result);
+        alert(result.error);
+      } else {
+        if (isNew == true) {
+          molNames.push(result);
+        } else {
+          const idx = findIndex(molNames, o => o.id === molName.id);
+          molNames.splice(idx, 1, molName);
+        }
+        this.setState({
+          show: false,
+          molNames
+        });
+      }
+    });
+    return true;
+  }
+
+  handleStructureEditorCancel() {
+    this.props.handleEditor(false);
+  }
+
+  handleStructureEditorSave(molfile, svg_file = null, config = null) {
+    this.props.handleEditorSave(molfile, svg_file, config);
+  }
+
+  handleSave() {
+    this.props.onSave();
+  }
+
+  handleShowModal(nameObj, isNew = false) {
+    this.setState({
+      show: true,
+      isNew,
+      molName: nameObj
+    });
+  }
+
+  handleCloseModal() {
+    this.setState({
+      show: false
+    });
+  }
+
+  confirmDelete(nameObj) {
+    const { molNames } = this.state;
+    const params = { id: nameObj.id };
+    MoleculesFetcher.deleteMoleculeName(params).then((result) => {
+      if (result.error) {
+        console.log(result);
+        alert(result.error);
+      } else {
+        const idx = findIndex(molNames, o => o.id === nameObj.id);
+        molNames.splice(idx, 1);
+        this.setState({
+          molNames
+        });
+      }
+    });
+  }
+
+  renderDeleteButton(nameObj) {
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        delete this molecule name <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(nameObj)}>
+          Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
+          No
+          </Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <ButtonGroup className="actions">
+        <OverlayTrigger
+          animation
+          placement="right"
+          root
+          trigger="focus"
+          overlay={popover}
+        >
+          <Button bsSize="xsmall" bsStyle="danger" >
+            <i className="fa fa-trash-o" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+  }
+
+
+  renderEditButton(nameObj) {
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Edit molecule name</Tooltip>}>
+        <Button bsSize="xsmall" bsStyle="primary" type="button" onClick={() => this.handleShowModal(nameObj)} >
+          <i className="fa fa-pencil-square-o" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+
+  renderModal() {
+    const { show, isNew, molName } = this.state;
+    return (
+      <Modal show={show} onHide={this.handleCloseModal}>
+        <Modal.Header closeButton>
+          <Modal.Title>{isNew ? 'Create Molecule Name' : 'Edit Molecule Name'}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>
+                {isNew ? 'Create Molecule Name' : 'Edit Molecule Name'}
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Form horizontal className="input-form">
+                <FormGroup controlId="formControlId">
+                  <InputGroup>
+                    <InputGroup.Addon>Attr.</InputGroup.Addon>
+                    <FormControl type="text" defaultValue={molName.description} readOnly />
+                  </InputGroup>
+                </FormGroup>
+                <FormGroup controlId="formControlName">
+                  <InputGroup>
+                    <InputGroup.Addon>Molecule name</InputGroup.Addon>
+                    <FormControl type="text" defaultValue={molName.name} inputRef={(ref) => { this.m_name = ref; }} />
+                  </InputGroup>
+                </FormGroup>
+              </Form>
+              <Button bsSize="small" type="button" bsStyle="warning" onClick={() => this.onSaveName()}>Save</Button>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+
+      </Modal>
+    );
+  }
+
+  render() {
+    const { molNames } = this.state;
+    const componentEditor = (
+      <div className="search-structure-draw">
+        <StructureEditorModal
+          showModal={this.props.showStructureEditor}
+          onSave={this.handleStructureEditorSave}
+          onCancel={this.handleStructureEditorCancel}
+          molfile={this.props.molecule.molfile}
+        />
+      </div>
+    );
+
+    const tbodyHeader = (
+      <thead>
+        <tr>
+          <td width="5%">#</td>
+          <td width="15%">Action &nbsp;
+            <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add new molecule name</Tooltip>}>
+              <Button bsSize="xsmall" bsStyle="success" onClick={() => this.onAddName()}>
+                <i className="fa fa-plus" />
+              </Button>
+            </OverlayTrigger>
+          </td>
+          <td width="20%">Attr.</td>
+          <td width="60%">Moledule Name</td>
+        </tr>
+      </thead>
+    );
+
+    const tbodyContent = molNames.map((na, i) => (
+      <tr key={`row_${na.id}`} id={`row_${na.id}`}>
+        <td>{i + 1}</td>
+        <td>
+          { this.renderDeleteButton(na) }
+          &nbsp;
+          { this.renderEditButton(na) }
+        </td>
+        <td>{na.description}</td>
+        <td>{na.name}</td>
+      </tr>
+    ));
+
+    return (
+      <div>
+        {componentEditor}
+        <div className="container">
+          <Panel>
+            <Panel.Heading>
+              <b>InChIKey:</b>&nbsp;{this.props.molecule.inchikey}
+              &nbsp;(<b>Chemotion molecule id:</b>&nbsp;{this.props.molecule.id})
+              <br />
+              <b>Canonical SMILES:</b>&nbsp;{this.props.molecule.cano_smiles}
+            </Panel.Heading>
+            <Panel.Body>
+              <Row>
+                <Col md={12}>
+                  <Button bsStyle="primary" bsSize="sm" onClick={() => this.props.handleEditor(true)}>Open Editor&nbsp;<i className="fa fa-pencil" aria-hidden="true" /></Button>&nbsp;
+                  <Button bsStyle="warning" bsSize="sm" onClick={() => this.handleSave()}>Update molfile and svg&nbsp;<i className="fa fa-floppy-o" aria-hidden="true" /></Button>
+                </Col>
+              </Row>
+              <Row>
+                <Col md={4}>
+                  <b>molfile:</b><br />
+                  <FormControl componentClass="textarea" placeholder="textarea" value={this.props.molecule.molfile} readOnly style={{ minHeight: 'calc(50vh)' }} />
+                </Col>
+                <Col md={8}>
+                  <b>svg:</b><br />
+                  <div className="svg-container">
+                    <SVG key={this.props.molecule.molecule_svg_file} src={`/images/molecules/${this.props.molecule.molecule_svg_file}`} className="molecule-mid" />
+                  </div>
+                </Col>
+              </Row>
+              &nbsp;
+              <Row>
+                <Col md={12}>
+                  <Table>
+                    {tbodyHeader}
+                    <tbody>
+                      {tbodyContent}
+                    </tbody>
+                  </Table>
+                </Col>
+              </Row>
+              { this.renderModal() }
+            </Panel.Body>
+          </Panel>
+        </div>
+      </div>
+    );
+  }
+}
+
+MoleculeModeratorComponent.propTypes = {
+  molecule: PropTypes.object,
+  showStructureEditor: PropTypes.bool.isRequired,
+  handleEditorSave: PropTypes.func.isRequired,
+  handleEditor: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/NMRiumDisplayer.js b/app/packs/src/components/NMRiumDisplayer.js
new file mode 100644
index 000000000..e9419754c
--- /dev/null
+++ b/app/packs/src/components/NMRiumDisplayer.js
@@ -0,0 +1,472 @@
+import React from 'react';
+import base64 from 'base-64';
+import { Modal, Button } from 'react-bootstrap';
+import { FN } from '@complat/react-spectra-editor';
+import SpectraStore from './stores/SpectraStore';
+import SpectraActions from './actions/SpectraActions';
+import LoadingActions from './actions/LoadingActions';
+import UIFetcher from './fetchers/UIFetcher';
+import { parseBase64ToArrayBuffer } from './utils/FetcherHelper';
+import Attachment from './models/Attachment';
+import { SpectraOps } from './utils/quillToolbarSymbol';
+
+export default class NMRiumDisplayer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...SpectraStore.getState(),
+      nmriumData: null,
+    };
+
+    this.iframeRef = React.createRef();
+
+    this.onChange = this.onChange.bind(this);
+    this.receiveMessage = this.receiveMessage.bind(this);
+    this.handleNMRDisplayerLoaded = this.handleNMRDisplayerLoaded.bind(this);
+    this.sendJcampDataToNMRDisplayer = this.sendJcampDataToNMRDisplayer.bind(this);
+    this.loadNMRDisplayerHostInfo = this.loadNMRDisplayerHostInfo.bind(this);
+    this.requestDataToBeSaved = this.requestDataToBeSaved.bind(this);
+    this.requestPreviewImage = this.requestPreviewImage.bind(this);
+    this.savingNMRiumWrapperData = this.savingNMRiumWrapperData.bind(this);
+    this.saveOp = this.saveOp.bind(this);
+
+    this.findDisplayingSpectra = this.findDisplayingSpectra.bind(this);
+    this.findDisplayingSpectrumID = this.findDisplayingSpectrumID.bind(this);
+    this.buildPeaksBody = this.buildPeaksBody.bind(this);
+    this.readNMRiumData = this.readNMRiumData.bind(this);
+
+    this.loadNMRDisplayerHostInfo();
+  }
+
+  componentDidMount() {
+    SpectraStore.listen(this.onChange);
+
+    window.addEventListener('message', this.receiveMessage);
+  }
+
+  componentWillUnmount() {
+    SpectraStore.unlisten(this.onChange);
+  }
+
+  handleNMRDisplayerLoaded() {
+    const isIframeLoaded = true;
+    this.setState({
+      isIframeLoaded,
+    }, () => {
+      this.sendJcampDataToNMRDisplayer();
+    });
+  }
+
+  onChange(newState) {
+    const origState = this.state;
+    this.setState({ ...origState, ...newState });
+    this.sendJcampDataToNMRDisplayer();
+  }
+
+  getSpcInfo() {
+    const { spcInfos, spcIdx } = this.state;
+    const sis = spcInfos.filter((x) => x.idx === spcIdx);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+    return si;
+  }
+
+  loadNMRDisplayerHostInfo() {
+    UIFetcher.fetchNMRDisplayerHost().then((response) => {
+      const { protocol, host, port } = response;
+      let nmriumOrigin = `${protocol}://${host}`;
+      let nmriumWrapperHost = `${protocol}://${host}`;
+      if (port) {
+        nmriumOrigin = `${nmriumOrigin}:${port}`;
+        nmriumWrapperHost = `${nmriumWrapperHost}:${port}`;
+      }
+      this.setState({ nmriumWrapperHost, nmriumOrigin });
+    });
+  }
+
+  receiveMessage(event) {
+    const { nmriumWrapperHost, nmriumOrigin } = this.state;
+    if (nmriumWrapperHost === undefined || nmriumWrapperHost === '') {
+      return;
+    }
+
+    if (event.origin === nmriumOrigin && event.data) {
+      const eventData = event.data;
+      const eventDataType = eventData.type;
+
+      if (eventDataType === 'nmr-wrapper:data-change') {
+
+        const nmrWrapperActionType = eventData.data.actionType;
+        if (nmrWrapperActionType !== '') {
+          const nmriumData = eventData.data.data;
+          const { version } = nmriumData;
+          if (version > 3) {
+            this.setState({ nmriumData: nmriumData.data });
+          }
+          else {
+            this.setState({ nmriumData });
+          }
+        }
+      } else if (eventDataType === 'nmr-wrapper:action-response') {
+        const nmrWrapperDataType = eventData.data.type;
+        if (nmrWrapperDataType === 'exportSpectraViewerAsBlob') {
+          const blobData = eventData.data.data.blob;
+          this.savingNMRiumWrapperData(blobData);
+        }
+      }
+    }
+  }
+
+  requestDataToBeSaved() {
+    this.requestPreviewImage();
+  }
+
+  requestPreviewImage() {
+    const iframeCurrent = this.iframeRef.current;
+    if (!iframeCurrent) {
+      return;
+    }
+    const { contentWindow } = iframeCurrent;
+    const dataToBeSent = {
+      type: 'exportSpectraViewerAsBlob',
+    };
+    contentWindow.postMessage({ type: 'nmr-wrapper:action-request', data: dataToBeSent }, '*');
+  }
+
+  sendJcampDataToNMRDisplayer() {
+    LoadingActions.start.defer();
+    const { fetchedFiles, isIframeLoaded, spcInfos } = this.state;
+    if (isIframeLoaded && fetchedFiles && fetchedFiles.files && fetchedFiles.files.length > 0) {
+      LoadingActions.stop.defer();
+
+      const listFileContents = fetchedFiles.files;
+      if (this.iframeRef.current
+        && listFileContents.length > 0
+        && listFileContents.length === spcInfos.length) {
+        const dataToBeSent = this.buildDataToBeSent(listFileContents, spcInfos);
+        const { contentWindow } = this.iframeRef.current;
+        if (contentWindow) {
+          contentWindow.postMessage({ type: 'nmr-wrapper:load', data: dataToBeSent }, '*');
+        }
+      }
+    } else {
+      LoadingActions.stop.defer();
+    }
+  }
+
+  buildDataToBeSent(files, spectraInfos) {
+    const { sample } = this.props;
+    const nmriumData = this.readNMRiumData(files, spectraInfos);
+    if (nmriumData) {
+      const data = { data: nmriumData, type: 'nmrium' };
+      return data;
+    }
+
+    const data = { data: [], type: 'file' };
+    for (let index = 0; index < files.length; index += 1) {
+      const fileToBeShowed = files[index].file;
+      const bufferData = parseBase64ToArrayBuffer(fileToBeShowed);
+      const spcInfo = spectraInfos[index];
+      const fileName = spcInfo.label;
+      const blobToBeSent = new Blob([bufferData]);
+      const dataItem = new File([blobToBeSent], fileName);
+      data.data.push(dataItem);
+    }
+    if (sample) {
+      const { molfile } = sample;
+      const fileName =`${sample.id}.mol`;
+      const blobToBeSent = new Blob([molfile]);
+      const dataItem = new File([blobToBeSent], fileName);
+      data.data.push(dataItem);
+    }
+    return data;
+  }
+
+  readNMRiumData(files, spectraInfos) {
+    const arrNMRiumSpecs = spectraInfos.filter((spc) => spc.label.includes('.nmrium'));
+    if (!arrNMRiumSpecs || arrNMRiumSpecs.length === 0) {
+      return false;
+    }
+
+    const nmriumSpec = arrNMRiumSpecs[0];
+
+    const arrNMRiumFiles = files.filter((file) => file.id === nmriumSpec.idx);
+    if (!arrNMRiumFiles || arrNMRiumFiles.length === 0) {
+      return false;
+    }
+
+    const nmriumDataEncoded = arrNMRiumFiles[0].file;
+    const decodedData = base64.decode(nmriumDataEncoded);
+    const nmriumData = JSON.parse(decodedData);
+    return nmriumData;
+  }
+
+  savingNMRiumWrapperData(imageBlobData = false) {
+    const { nmriumData } = this.state;
+    if (nmriumData === null || !imageBlobData) {
+      return;
+    }
+
+    const specInfo = this.getSpcInfo();
+    if (!specInfo) {
+      return;
+    }
+
+    const { label } = specInfo;
+    const specLabelParts = label.split('.');
+    const fileNameWithoutExt = specLabelParts[0];
+
+    const imageAttachment = this.prepareImageAttachment(imageBlobData, fileNameWithoutExt);
+    const nmriumAttachment = this.prepareNMRiunDataAttachment(nmriumData, fileNameWithoutExt);
+    const listFileNameToBeDeleted = [imageAttachment.filename, nmriumAttachment.filename];
+    const datasetToBeUpdated = this.prepareDatasets(listFileNameToBeDeleted);
+    if (!datasetToBeUpdated) {
+      return;
+    }
+
+    this.prepareAnalysisMetadata(nmriumData);
+
+    const { sample, handleSampleChanged } = this.props;
+
+    datasetToBeUpdated.attachments.push(imageAttachment);
+    datasetToBeUpdated.attachments.push(nmriumAttachment);
+
+    const cb = () => (
+      this.saveOp()
+    );
+    handleSampleChanged(sample, cb);
+  }
+
+  prepareDatasets(fileNameToBeDeleted = []) {
+    const specInfo = this.getSpcInfo();
+    const { sample } = this.props;
+
+    const datasetContainers = sample.datasetContainers();
+    const listDatasetFiltered = datasetContainers.filter((e) => specInfo.idDt === e.id);
+    if (listDatasetFiltered.length === 0) {
+      return false;
+    }
+
+    const datasetToBeUpdated = listDatasetFiltered[0];
+    const datasetAttachments = datasetToBeUpdated.attachments;
+    datasetAttachments.forEach((att) => {
+      if (fileNameToBeDeleted.includes(att.filename)) {
+        att.is_deleted = true;
+      }
+    });
+    datasetToBeUpdated.attachments = datasetAttachments;
+    return datasetToBeUpdated;
+  }
+
+  prepareNMRiunDataAttachment(nmriumData, fileNameNoExt) {
+    const spaceIndent = 0;
+    const dataAsJson = JSON.stringify(
+      nmriumData,
+      (key, value) => (ArrayBuffer.isView(value) ? Array.from(value) : value),
+      spaceIndent,
+    );
+    const blobData = new Blob([dataAsJson], { type: 'text/plain' });
+    const fileName = `${fileNameNoExt}.nmrium`;
+    blobData.name = fileName;
+    const dataAttachment = Attachment.fromFile(blobData);
+    return dataAttachment;
+  }
+
+  prepareImageAttachment(blobData, fileNameNoExt) {
+    const fileName = `${fileNameNoExt}.svg`;
+    const blobDataToBeSaved = blobData;
+    blobDataToBeSaved.name = fileName;
+    const imageAttachment = Attachment.fromFile(blobDataToBeSaved);
+    imageAttachment.thumb = true;
+    return imageAttachment;
+  }
+
+  prepareAnalysisMetadata(nmriumData) {
+    const buildPeaksBodyObject = this.buildPeaksBody(nmriumData);
+    const { peaksBody, layout } = buildPeaksBodyObject;
+
+    if (peaksBody === '' || layout === '') {
+      return '';
+    }
+
+    const layoutOpsObj = SpectraOps[layout];
+
+    if (!layoutOpsObj) {
+      return '';
+    }
+
+    const { sample } = this.props;
+    const specInfo = this.getSpcInfo();
+
+    const analysesContainers = sample.analysesContainers();
+
+    const ops = [
+      ...layoutOpsObj.head(''),
+      { insert: peaksBody },
+      ...layoutOpsObj.tail(),
+    ];
+    analysesContainers.forEach((analyses) => {
+      if (analyses.id !== specInfo.idAe) return;
+      analyses.children.forEach((ai) => {
+        if (ai.id !== specInfo.idAi) return;
+        ai.extended_metadata.content.ops = [ // eslint-disable-line
+          ...ai.extended_metadata.content.ops,
+          ...ops,
+        ];
+      });
+    });
+  }
+
+  buildPeaksBody(nmriumData) {
+    const displayingSpectra = this.findDisplayingSpectra(nmriumData);
+    if (displayingSpectra.length <= 0) {
+      return { peaksBody: '', layout: '' };
+    }
+
+    const firstSpectrum = displayingSpectra[0];
+    const { info } = firstSpectrum;
+    if (info) {
+      const { dimension } = info;
+      if (dimension === 2) {
+        return { peaksBody: '', layout: '' };
+      }
+    }
+
+    const firstSpectrumPeaks = firstSpectrum.peaks;
+    const { values } = firstSpectrumPeaks;
+    const peaks = values;
+    const layout = firstSpectrum.nucleus;
+    const shift = { enable: false, peak: false, ref: { label: false, name: '---', value: 0 } };
+    const decimal = 2;
+    const peaksBody = FN.peaksBody({
+      peaks, layout, decimal, shift
+    });
+    return { peaksBody, layout };
+  }
+
+  findDisplayingSpectra(nmriumData) {
+    const { spectra, correlations } = nmriumData;
+    const displayingSpectrumID = this.findDisplayingSpectrumID(correlations);
+    if (displayingSpectrumID) {
+      const displayingSpectra = spectra.filter((spectrum) => {
+        const { id } = spectrum;
+        return id === displayingSpectrumID;
+      });
+      return displayingSpectra;
+    }
+
+    const nonFIDSpectra = spectra.filter((spectrum) => {
+      const { info } = spectrum;
+      const { isFid } = info;
+      return isFid === false;
+    });
+    return nonFIDSpectra;
+  }
+
+  findDisplayingSpectrumID(correlations) {
+    if (!correlations) {
+      return false;
+    }
+
+    try {
+      const { values } = correlations;
+      if (values.length > 0) {
+        const firstValue = values[0];
+        const { link } = firstValue;
+        if (link.length > 0) {
+          const firstLink = link[0];
+          const { experimentID } = firstLink;
+          return experimentID;
+        }
+      }
+      return false;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  saveOp() {
+    SpectraActions.ToggleModalNMRDisplayer.defer();
+    const { handleSubmit } = this.props;
+    handleSubmit()
+  }
+
+  renderNMRium(nmriumWrapperHost) {
+    return (
+      <Modal.Body>
+        <iframe
+          id="nmrium_wrapper"
+          className="spectra-editor"
+          src={nmriumWrapperHost}
+          allowFullScreen
+          ref={this.iframeRef}
+          onLoad={this.handleNMRDisplayerLoaded}
+        />
+      </Modal.Body>
+    );
+  }
+
+  renderModalTitle() {
+    const { nmriumData } = this.state;
+    let hasSpectra = false;
+    if (nmriumData && nmriumData.spectra.length > 0) {
+      hasSpectra = true;
+    }
+
+    return (
+      <Modal.Header>
+        <Button
+          bsStyle="danger"
+          bsSize="small"
+          className="button-right"
+          onClick={() => {
+            SpectraActions.ToggleModalNMRDisplayer.defer();
+          }}
+        >
+          <span>
+            <i className="fa fa-times" />
+            {' '}
+            Close without Save
+          </span>
+        </Button>
+        {
+          hasSpectra ?
+          (
+            <Button
+              bsStyle="success"
+              bsSize="small"
+              className="button-right"
+              onClick={() => {
+                this.requestDataToBeSaved()
+              }}
+            >
+              <span>
+                <i className="fa fa-floppy-o" />
+                {' '}
+                Close with Save
+              </span>
+            </Button>
+          ) : null
+        }
+      </Modal.Header>
+    );
+  }
+
+  render() {
+    const { showModalNMRDisplayer, nmriumWrapperHost } = this.state;
+
+    return (
+      <div className="spectra-editor">
+        <Modal
+          show={showModalNMRDisplayer}
+          dialogClassName="spectra-editor-dialog"
+          animation
+          onHide={this.closeOp}
+        >
+          {this.renderModalTitle()}
+          {this.renderNMRium(nmriumWrapperHost)}
+        </Modal>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/Navigation.js b/app/packs/src/components/Navigation.js
new file mode 100644
index 000000000..2fce00a42
--- /dev/null
+++ b/app/packs/src/components/Navigation.js
@@ -0,0 +1,158 @@
+import React from 'react';
+import { Nav, Navbar, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import UserAuth from './UserAuth';
+import Search from './search/Search';
+import ManagingActions from './managing_actions/ManagingActions';
+import ContextActions from './contextActions/ContextActions';
+import UserStore from './stores/UserStore';
+import UIStore from './stores/UIStore'
+import UserActions from './actions/UserActions';
+import UIActions from './actions/UIActions';
+import ElementActions from './actions/ElementActions';
+import NavNewSession from '../libHome/NavNewSession'
+import NavHead from '../libHome/NavHead'
+import DocumentHelper from '../components/utils/DocumentHelper';
+import NavigationModal from './NavigationModal';
+import SearchFilter from './search/SearchFilter.js'
+
+const colMenuTooltip = <Tooltip id="col_menu_tooltip">Toggle sidebar</Tooltip>;
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null,
+      genericEls: null,
+      showAdvancedSearch: false,
+      modalProps: {
+        show: false,
+        title: "",
+        component: "",
+        action: null,
+        listSharedCollections: false,
+      },
+      omniauthProviders: []
+    }
+    this.onChange = this.onChange.bind(this);
+    this.onUIChange = this.onUIChange.bind(this);
+    this.toggleCollectionTree = this.toggleCollectionTree.bind(this);
+    this.updateModalProps = this.updateModalProps.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIChange)
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+    UserActions.fetchGenericEls();
+    UserActions.fetchOmniauthProviders();
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIChange)
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    let newId = state.currentUser ? state.currentUser.id : null
+    let oldId =this.state.currentUser ?  this.state.currentUser.id : null
+    if (newId !== oldId){
+      this.setState({
+        currentUser: state.currentUser
+      });
+    }
+    if (this.state.genericEls === null) {
+      this.setState({
+        genericEls: state.genericEls
+      });
+    }
+    if (state.omniauthProviders !== this.state.omniauthProviders) {
+      this.setState({
+        omniauthProviders: state.omniauthProviders
+      });
+    }
+  }
+
+  onUIChange(state) {
+    this.setState({
+      modalProps: state.modalParams,
+      showAdvancedSearch: state.showAdvancedSearch
+    });
+  }
+
+  toggleCollectionTree() {
+    this.props.toggleCollectionTree();
+  }
+
+  token(){
+    return DocumentHelper.getMetaContent("csrf-token")
+  }
+
+  updateModalProps(modalProps) {
+    this.setState({
+      modalProps: modalProps
+    });
+  }
+
+  advancedSearch(filters, authors) {
+    const uiState = UIStore.getState();
+    const selection = {
+      elementType: 'all',
+      advanced_params: filters,
+      authors_params: authors,
+      search_by_method: 'advanced',
+      page_size: uiState.number_of_results
+    };
+    UIActions.setSearchSelection(selection);
+    ElementActions.fetchBasedOnSearchSelectionAndCollection({
+      selection,
+      collectionId: uiState.currentCollection.id,
+      isSync: uiState.isSync
+    });
+  }
+
+  navHeader() {
+    return (
+      <Navbar.Header className="collec-tree">
+        <Navbar.Text style={{cursor: "pointer"}}>
+          <OverlayTrigger placement="right" delayShow={1000} overlay={colMenuTooltip}>
+            <i  className="fa fa-list" style={{fontStyle: "normal"}}
+                onClick={this.toggleCollectionTree} />
+          </OverlayTrigger>
+        </Navbar.Text>
+        <Navbar.Text />
+        <NavHead />
+      </Navbar.Header>
+    )
+  }
+
+  render() {
+    const { modalProps, showAdvancedSearch, genericEls, omniauthProviders } = this.state;
+    const { profile } = UserStore.getState();
+    // const { customClass } = (profile && profile.data) || {};
+    const customClass = 'btn-unified'
+
+    return (this.state.currentUser
+      ? <Navbar fluid className='navbar-custom'>
+          {this.navHeader()}
+          <Nav navbar className='navbar-form'>
+            <Search />
+            <ManagingActions updateModalProps={this.updateModalProps} customClass={customClass} genericEls={genericEls} />
+            <ContextActions updateModalProps={this.updateModalProps} customClass={customClass} />
+            <NavigationModal {...modalProps} />
+          </Nav>
+          <UserAuth/>
+          <div style={{clear: "both"}} />
+          <SearchFilter searchFunc={this.advancedSearch}
+            show={showAdvancedSearch}/>
+        </Navbar>
+      : <Navbar fluid className='navbar-custom'>
+          {this.navHeader()}
+          <Nav navbar className='navbar-form'>
+            <Search noSubmit={false} />
+          </Nav>
+          <NavNewSession authenticityToken={this.token()} omniauthProviders={omniauthProviders}/>
+          <div style={{clear: "both"}} />
+        </Navbar>
+    )
+  }
+}
diff --git a/app/packs/src/components/NavigationModal.js b/app/packs/src/components/NavigationModal.js
new file mode 100644
index 000000000..4bbfd922a
--- /dev/null
+++ b/app/packs/src/components/NavigationModal.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import UIActions from 'src/stores/alt/actions/UIActions';
+
+function NavigationModal({
+  show, title, component, customModal, ...props
+}) {
+  const Component = component;
+  if (!show) return (<span />);
+
+  return (
+    <Modal
+      dialogClassName={customModal}
+      animation={false}
+      show={show}
+      onHide={() => UIActions.hideModal()}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>
+          {title}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Component onHide={() => UIActions.hideModal()} {...props} />
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+NavigationModal.propTypes = {
+  show: PropTypes.bool,
+  customModal: PropTypes.string,
+  component: PropTypes.func,
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+};
+
+NavigationModal.defaultProps = {
+  show: false,
+  customModal: '',
+  component: null,
+  title: '',
+};
+
+export default NavigationModal;
diff --git a/app/packs/src/components/Notifications.js b/app/packs/src/components/Notifications.js
index 9cdf1f3ca..a5239a509 100644
--- a/app/packs/src/components/Notifications.js
+++ b/app/packs/src/components/Notifications.js
@@ -14,7 +14,7 @@ class Notifications extends Component {
   render() {
     return (
       <div>
-        <NotificationSystem ref={(notification) => { this.notificationSystem = notification; }} />
+        <NotificationSystem key={uuid.v4()} ref={(notification) => { this.notificationSystem = notification; }} />
       </div>
     );
   }
diff --git a/app/packs/src/components/NovncStatus.js b/app/packs/src/components/NovncStatus.js
new file mode 100644
index 000000000..5110cdd77
--- /dev/null
+++ b/app/packs/src/components/NovncStatus.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ConnectedBtn = () => (<span>
+  <i
+    className="fa fa-check-circle-o"
+    aria-hidden="true"
+    style={{ color: '#90ee90', float: 'right', fontSize: '20px' }}
+  />
+</span>);
+
+const DisconnectedBtn = () => (<span>
+  <i
+    className="fa fa-times-circle-o"
+    aria-hidden="true"
+    style={{ color: 'red', float: 'right', fontSize: '20px' }}
+  />
+</span>
+);
+
+export { ConnectedBtn, DisconnectedBtn };
diff --git a/app/packs/src/components/NumeralInput.js b/app/packs/src/components/NumeralInput.js
new file mode 100644
index 000000000..e0210c41b
--- /dev/null
+++ b/app/packs/src/components/NumeralInput.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Numeral from 'numeral';
+import {
+  FormGroup,
+  FormControl,
+  ControlLabel,
+  InputGroup,
+} from 'react-bootstrap';
+
+export default class NumeralInput extends Component {
+  constructor(props) {
+    super(props);
+
+    let { value } = props;
+    this.state = {
+      numeralValue: this._convertValueToNumeralValue(value)
+    };
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let { value } = nextProps;
+    this.setState({
+      numeralValue: this._convertValueToNumeralValue(value)
+    });
+  }
+
+  _convertValueToNumeralValue(value) {
+    let { numeralFormat } = this.props;
+    let numeralValue = null;
+
+    try {
+      numeralValue = Numeral(value).format(numeralFormat);
+    } catch (err) {
+      console.log(`Error in NumeralInput component: ${err}`);
+    }
+
+    return numeralValue;
+  }
+
+  //TODO fix issue that cursor is behind, when numeral inserts a comma:
+  // containing comas need to be compared to previous amount
+  _handleInputValueChange(event) {
+    const inputField = event.target;
+    const { value, selectionStart } = inputField;
+    const formatedValue = this._convertValueToNumeralValue(value);
+    const unformatedValue = Numeral().unformat(formatedValue);
+    const { onChange } = this.props;
+
+    this.setState(
+      { numeralValue: formatedValue },
+      () => { inputField.selectionStart = selectionStart; }
+    );
+    onChange(unformatedValue);
+  }
+
+  render() {
+    let { bsSize, bsStyle, addonAfter, buttonAfter, label, disabled } = this.props;
+    let { numeralValue } = this.state;
+    let addonAfterWrapper, buttonAfterWrapper;
+    if (addonAfter) {
+      addonAfterWrapper = <InputGroup.Addon>{addonAfter}</InputGroup.Addon>;
+    }
+
+    if(buttonAfter) {
+      buttonAfterWrapper = <InputGroup.Button>{buttonAfter}</InputGroup.Button>;
+    }
+
+    return (
+      <FormGroup>
+        <ControlLabel>{label}</ControlLabel>
+        <InputGroup>
+          <FormControl type='text'  value={numeralValue || ''} bsSize={bsSize}
+            bsStyle={bsStyle}
+            disabled={disabled}
+            onChange={ event => this._handleInputValueChange(event)} />
+          {buttonAfterWrapper}
+          {addonAfterWrapper}
+        </InputGroup>
+      </FormGroup>
+    );
+  }
+}
+
+NumeralInput.defaultProps = {
+  numeralFormat: '',
+  value: 0,
+  onChange: () => {
+  }
+};
+
+NumeralInput.propTypes = {
+  onChange: PropTypes.func,
+  numeralFormat: PropTypes.string,
+  disabled: PropTypes.bool,
+  addonAfter: PropTypes.node,
+  buttonAfter: PropTypes.node,
+  label: PropTypes.node,
+  bsSize: PropTypes.string,
+  bsStyle: PropTypes.string,
+};
diff --git a/app/packs/src/components/NumeralInputWithUnits.js b/app/packs/src/components/NumeralInputWithUnits.js
new file mode 100644
index 000000000..97b3ac9a7
--- /dev/null
+++ b/app/packs/src/components/NumeralInputWithUnits.js
@@ -0,0 +1,89 @@
+import React, {Component} from 'react';
+import {DropdownButton, MenuItem} from 'react-bootstrap';
+import NumeralInput from './NumeralInput';
+
+export default class NumeralInputWithUnits extends Component {
+  constructor(props) {
+    super(props);
+
+    let {value, unit} = props;
+    this.state ={
+      unit: unit,
+      value: value
+    };
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let { value, unit } = nextProps;
+    this.setState({
+      unit: unit,
+      value: value
+    })
+  }
+
+  _handleUnitSelect(nextUnit) {
+    let { value, unit } = this.state;
+    let convertedValue = value;
+    if(this.props.convertValueFromUnitToNextUnit) {
+      convertedValue = this.props.convertValueFromUnitToNextUnit(unit, nextUnit, value);
+    }
+
+    this.setState({
+      unit: nextUnit,
+      value: convertedValue
+    }, () => this._onChangeCallback());
+  }
+
+  _handleValueChange(value) {
+    this.setState({
+      value
+    }, () => this._onChangeCallback());
+  }
+
+  _renderUnitsAsMenuItems() {
+    let {units} = this.props;
+    return units.map((unit, index) => {
+      return (
+        <MenuItem key={'unit_' + index} onSelect={() => this._handleUnitSelect(unit)}>
+          {unit}
+        </MenuItem>
+      );
+    });
+  }
+
+  _renderDropdownButtonAddon(title) {
+    return (
+      <DropdownButton id="dropdown-button-addon" title={title}>
+        {this._renderUnitsAsMenuItems()}
+      </DropdownButton>
+    );
+  }
+
+  _onChangeCallback() {
+    if(this.props.onChange) {
+      this.props.onChange(this.state);
+    }
+  }
+
+// TODO fix css-issue with wrong z-index
+  render() {
+    let {units, bsSize, bsStyle, label, numeralFormat, key, disabled} = this.props;
+    let {unit, value} = this.state;
+
+    let buttonAfter = (units.length > 1) ? this._renderDropdownButtonAddon(unit) : '';
+    let addonAfter = (units.length == 1) ? unit : '';
+    return (
+      <NumeralInput key={key} buttonAfter={buttonAfter} addonAfter={addonAfter}
+        onChange={(value) => this._handleValueChange(value)}
+        value={value} bsSize={bsSize} bsStyle={bsStyle} label={label}
+        disabled={disabled} numeralFormat={numeralFormat}/>
+    );
+  }
+}
+
+NumeralInputWithUnits.defaultProps = {
+  value: 0,
+  numeralFormat: '',
+  units: []
+};
diff --git a/app/packs/src/components/NumeralInputWithUnitsCompo.js b/app/packs/src/components/NumeralInputWithUnitsCompo.js
new file mode 100644
index 000000000..8adc2cff3
--- /dev/null
+++ b/app/packs/src/components/NumeralInputWithUnitsCompo.js
@@ -0,0 +1,243 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormControl, ControlLabel, InputGroup, Button } from 'react-bootstrap';
+import { metPreConv, metPrefSymbols } from 'src/utilities/metricPrefix';
+
+export default class NumeralInputWithUnitsCompo extends Component {
+  constructor(props) {
+    super(props);
+
+    const { value, block, metricPrefix, precision } = props;
+    this.state = {
+      value,
+      block,
+      metricPrefix: metricPrefix || 'n',
+      currentPrecision: precision,
+      valueString: 0,
+      showString: false,
+    };
+  }
+
+  componentDidMount() {
+    this.forceUpdate();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { value, block } = nextProps;
+    this.setState({ value, block });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const hasChanged = nextProps.value !== this.props.value
+      || nextProps.block !== this.props.block
+      || nextProps.metricPrefix !== this.props.metricPrefix
+      || nextProps.bsStyle !== this.props.bsStyle
+      || nextProps.disabled !== this.props.disabled
+      || nextState.value !== this.state.value
+      || nextState.block !== this.state.block
+      || nextState.metricPrefix !== this.state.metricPrefix
+      || nextState.currentPrecision !== this.state.currentPrecision
+      || nextState.valueString !== this.state.valueString
+      || nextState.showString !== this.state.showString
+      || nextProps.label !== this.props.label
+      || nextProps.unit !== this.props.unit;
+    return hasChanged;
+  }
+
+  _handleValueChange(value) {
+    this.setState({ value }, () => this._onChangeCallback());
+  }
+
+  _handleInputValueChange(event) {
+    const inputField = event.target;
+    inputField.focus();
+    const { value, selectionStart } = inputField;
+    let { valueString } = this.state;
+    let newValue = value;
+    const { metricPrefix } = this.state;
+    const lastChar = value[selectionStart - 1] || '';
+
+    if (lastChar !== '' && !lastChar.match(/-|\d|\.|(,)/)) return false;
+    // if (value[0] !== '0') { newValue = '0'.concat(newValue); }
+
+    const md = lastChar.match(/-|\d/);
+    const mc = lastChar.match(/\.|(,)/);
+
+    if (mc && mc[1]) {
+      newValue = `${value.slice(0, selectionStart - 1)}.${value.slice(selectionStart)}`;
+      // } else if (value === '00') { // else if (value === '0.' || value === '00') {
+      //   newValue = '0.0';
+    }
+
+    newValue = newValue.replace('--', '');
+    newValue = newValue.replace('..', '.');
+    const matchMinus = newValue.match(/\d+(-+)\d*/);
+    if (matchMinus && matchMinus[1]) newValue = newValue.replace(matchMinus[1], '');
+
+    if (md || mc) { valueString = newValue; }
+
+    this.setState(
+      {
+        value: metPreConv(newValue, metricPrefix, 'n'),
+        showString: true,
+        valueString,
+      },
+      () => { this._onChangeCallback(); inputField.selectionStart = selectionStart; }
+    );
+    return null;
+  }
+
+  _handleInputValueFocus() {
+    const { value, metricPrefix } = this.state;
+    this.setState({
+      currentPrecision: undefined,
+      showString: true,
+      valueString: metPreConv(value, 'n', metricPrefix) || 0,
+    });
+  }
+
+  _handleInputValueBlur() {
+    this.setState({
+      currentPrecision: this.props.precision,
+      showString: false,
+    }, () => this._onChangeCallback());
+  }
+
+  handleInputDoubleClick() {
+    if (this.state.block) {
+      this.setState({
+        block: false,
+        value: 0,
+      });
+    }
+  }
+
+  _onChangeCallback() {
+    if (this.props.onChange) {
+      this.props.onChange({ ...this.state, unit: this.props.unit });
+    }
+  }
+
+  togglePrefix() {
+    const { metricPrefixes } = this.props;
+    let ind = metricPrefixes.indexOf(this.state.metricPrefix);
+    if (ind < metricPrefixes.length - 1) {
+      ind += 1;
+    } else {
+      ind = 0;
+    }
+    this.setState({
+      metricPrefix: metricPrefixes[ind]
+    });
+
+    this.props.onMetricsChange && this.props.onMetricsChange({ ...this.state, metricUnit: this.props.unit, metricPrefix: metricPrefixes[ind] });
+  }
+
+  render() {
+    const {
+      bsSize, bsStyle, disabled, label, unit, name
+    } = this.props;
+    const {
+      showString, value, metricPrefix,
+      currentPrecision, valueString, block,
+    } = this.state;
+    const mp = metPrefSymbols[metricPrefix];
+    const nanOrInfinity = isNaN(value) || !isFinite(value);
+    const val = () => {
+      if (!showString && nanOrInfinity) {
+        return 'n.d.';
+      } else if (!showString) {
+        return metPreConv(value, 'n', metricPrefix).toPrecision(currentPrecision);
+      }
+      return valueString;
+    };
+    const inputDisabled = disabled ? true : block;
+    // BsStyle-s for Input and buttonAfter have differences
+    const bsStyleBtnAfter = bsStyle === 'error' ? 'danger' : bsStyle;
+    const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : null;
+    if (unit !== 'n') {
+      const prefixSwitch = (
+        <InputGroup.Button>
+          <Button
+            disabled={inputDisabled}
+            active
+            onClick={() => { this.togglePrefix(); }}
+            bsStyle={bsStyleBtnAfter}
+            bsSize={bsSize}
+          >
+            {mp + unit}
+          </Button>
+        </InputGroup.Button>
+      );
+
+      return (
+        <div className={`numeric-input-unit_${this.props.unit}`}>
+          {labelWrap}
+          <InputGroup
+            onDoubleClick={event => this.handleInputDoubleClick(event)}
+          >
+            <FormControl
+              type="text"
+              bsClass="bs-form--compact form-control"
+              disabled={inputDisabled}
+              bsSize={bsSize}
+              bsStyle={bsStyle}
+              value={val() || ''}
+              onChange={event => this._handleInputValueChange(event)}
+              onFocus={event => this._handleInputValueFocus(event)}
+              onBlur={event => this._handleInputValueBlur(event)}
+              name={name}
+            />
+            {prefixSwitch}
+          </InputGroup>
+        </div>
+      );
+    }
+    return (
+      <div className="numeric-input-unit">
+        {labelWrap}
+        <div onDoubleClick={event => this.handleInputDoubleClick(event)}>
+          <FormControl
+            type="text"
+            bsClass="bs-form--compact form-control"
+            disabled={inputDisabled}
+            bsSize={bsSize}
+            bsStyle={bsStyle}
+            value={val() || ''}
+            onChange={event => this._handleInputValueChange(event)}
+            onFocus={event => this._handleInputValueFocus(event)}
+            onBlur={event => this._handleInputValueBlur(event)}
+            onDoubleClick={event => this.handleInputDoubleClick(event)}
+            name={name}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+NumeralInputWithUnitsCompo.propTypes = {
+  onChange: PropTypes.func,
+  onMetricsChange: PropTypes.func,
+  unit: PropTypes.string,
+  units: PropTypes.array,
+  metricPrefix: PropTypes.string,
+  metricPrefixes: PropTypes.array,
+  precision: PropTypes.number,
+  disabled: PropTypes.bool,
+  label: PropTypes.node,
+  bsSize: PropTypes.string,
+  bsStyle: PropTypes.string,
+  name: PropTypes.string
+};
+
+NumeralInputWithUnitsCompo.defaultProps = {
+  unit: 'n',
+  value: 0,
+  units: [],
+  disabled: false,
+  block: false,
+  bsSize: 'small',
+  bsStyle: 'default',
+  name: ''
+};
diff --git a/app/packs/src/components/PermissionIcons.js b/app/packs/src/components/PermissionIcons.js
new file mode 100644
index 000000000..b678256c8
--- /dev/null
+++ b/app/packs/src/components/PermissionIcons.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PermissionIcons = ({pl}) =>{
+  return(pl>-1 ?
+    <span>
+      <i className="fa fa-newspaper-o"></i>
+      &nbsp;{pl>0 ? <i className="fa fa-pencil-square-o"></i> : null}
+      &nbsp;{pl>1 ? <i className="fa fa-share-alt"></i> : null}
+      &nbsp;{pl>2 ? <i className="fa fa-trash"></i> : null}
+      &nbsp;{pl>3 ? <i className="fa fa-download"></i> : null}
+      &nbsp;{pl>4 ? <i className="fa fa-exchange"></i> : null}
+    </span>
+    : null
+  )
+}
+
+PermissionIcons.propTypes = {
+  pl: PropTypes.number.isRequired,
+}
+
+export default PermissionIcons;
diff --git a/app/packs/src/components/PolymerSection.js b/app/packs/src/components/PolymerSection.js
new file mode 100644
index 000000000..834557fd0
--- /dev/null
+++ b/app/packs/src/components/PolymerSection.js
@@ -0,0 +1,297 @@
+import React from 'react';
+import { FormGroup, ControlLabel, FormControl, Radio, Row, Col } from 'react-bootstrap';
+import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo'
+import ElementalCompositionGroup from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalCompositionGroup'
+import NotificationActions from 'src/stores/alt/actions/NotificationActions'
+import Select from 'react-select'
+
+export default class PolymerSection extends React.Component {
+
+  handleAmountChanged(amount) {
+    this.props.parent.handleAmountChanged(amount);
+  }
+
+  handleCustomInfoNumericChanged(e, name, residue, sample) {
+    residue.custom_info[name] = e.value;
+
+    // make calculations if loading was changed
+    if (name == 'loading') {
+
+      this.handleAmountChanged(sample.amount);
+      if (residue.custom_info.loading_type == 'external')
+        sample.external_loading = e.value;
+
+      let errorMessage;
+      if (e.value == 0.0)
+        errorMessage = 'Loading can not be 0. Please define a value.'
+
+      let mw_defined = sample.molecule.molecular_weight;
+      let value_to_check = e.value * mw_defined;
+
+      if (value_to_check > 1000.0) {
+        errorMessage = 'Combination of loading and molecular weight is wrong\
+         (MW*L > 1.0)'
+      }
+
+      if (errorMessage)
+        NotificationActions.add({
+          message: errorMessage,
+          level: 'error'
+        });
+
+    } else {
+      this.props.parent.handleSampleChanged(sample);
+    }
+  }
+
+  handleCustomInfoChanged(e, residue, sample) {
+    residue.custom_info[e.target.name] = e.target.value;
+
+    if (e.target.name == "formula") {
+      if (e.target.value) {
+        sample.formulaChanged = true;
+      }
+    }
+
+    this.props.parent.handleSampleChanged(sample);
+  }
+
+  handlePRadioChanged(e, residue, sample) {
+    residue.custom_info['loading_type'] = e.target.value;
+
+    if (e.target.value == 'external') {
+      sample.loading = sample.external_loading;
+    }
+    else {
+      let e_compositon = sample.elemental_compositions.find(function (item) {
+        return item.composition_type == e.target.value
+      });
+
+      if (e_compositon)
+        sample.loading = e_compositon.loading;
+    }
+
+    this.props.parent.handleSampleChanged(sample);
+  }
+
+  handlePolymerTypeSelectChanged(value, residue, sample) {
+    residue.custom_info['polymer_type'] = value;
+    delete residue.custom_info['surface_type'];
+
+    // tell parent (SampleDetails) component about changes
+    this.props.parent.handleSampleChanged(sample);
+  }
+
+  handleSurfaceTypeSelectChanged(value, residue, sample) {
+    residue.custom_info['surface_type'] = value;
+    delete residue.custom_info['polymer_type'];
+    this.props.parent.handleSampleChanged(sample);
+  }
+
+
+  checkInputStatus(sample, key) {
+    if (sample['error_' + key]) {
+      return 'error';
+    } else {
+      return 'success';
+    }
+  }
+
+  polymerFormula(sample, residue) {
+    return (
+      <FormGroup>
+        <ControlLabel>Formula</ControlLabel>
+        <FormControl type="text"
+          value={residue.custom_info.formula || ''}
+          name="formula"
+          key={'polymer_formula_input' + sample.id.toString()}
+          onChange={(e) => this.handleCustomInfoChanged(e, residue, sample)}
+        />
+      </FormGroup>
+    )
+  }
+
+  customInfoRadio(label, value, residue, sample) {
+    let additionalLoadingInput = false;
+
+    if (value == 'external') {
+      let disabled = !(residue.custom_info.loading_type == value);
+      additionalLoadingInput = (
+        <td width="50%" className="loading-input visible-hd">
+          <NumeralInputWithUnitsCompo
+            value={sample.loading}
+            unit='mmol/g'
+            metricPrefix='n'
+            metricPrefixes={['n']}
+            precision={3}
+            key={'polymer_loading_input' + sample.id.toString()}
+            name="polymer_loading"
+            // TODO: enable again
+            //bsStyle={this.checkInputStatus(sample, 'loading')}
+            onChange={(e) => this.handleCustomInfoNumericChanged(e, 'loading', residue, sample)}
+            disabled={disabled}
+            readOnly={disabled}
+          />
+        </td>
+      )
+    }
+
+    let rel_composition = sample.elemental_compositions.find(function (item) {
+      return item.composition_type == value
+    });
+    let rel_loading = rel_composition && rel_composition.loading;
+
+    return (
+      <tr>
+        <td>
+          <FormGroup>
+            <Radio onChange={(e) => this.handlePRadioChanged(e, residue, sample)}
+              checked={residue.custom_info.loading_type == value}
+              name="loading_type"
+              key={value + sample.id.toString() + 'loading_type'}
+              value={value}
+              disabled={value != 'external' && !rel_loading}
+            >{label}</Radio>
+          </FormGroup>
+        </td>
+        {additionalLoadingInput}
+      </tr>
+    )
+  }
+
+  polymerLoading(sample, residue) {
+    if (sample.reaction_product)
+      return false;
+
+    return (
+      <table width="100%" key={'polymer_loading' + sample.id.toString()}>
+        <thead>
+          <tr>
+            <th>
+              <label>Loading according to:</label>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.customInfoRadio("Mass difference", "mass_diff", residue, sample)}
+          {this.customInfoRadio("100% conversion", "full_conv", residue, sample)}
+          {this.customInfoRadio("Elemental analyses", "found", residue, sample)}
+          {this.customInfoRadio("External estimation", "external", residue, sample)}
+          <tr className="hidden-hd">
+            <td>
+              <NumeralInputWithUnitsCompo
+                value={sample.loading}
+                unit='mmol/g'
+                metricPrefix='n'
+                metricPrefixes={['n']}
+                precision={3}
+                key={'polymer_loading_input' + sample.id.toString()}
+                name="polymer_loading"
+                bsStyle={this.checkInputStatus(sample, 'loading')}
+                onChange={(e) => this.handleCustomInfoNumericChanged(e, 'loading', residue, sample)}
+                disabled={residue.custom_info.loading_type != 'external'}
+                readOnly={residue.custom_info.loading_type != 'external'}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+
+  polymerType(sample, residue) {
+    let selectOptions = [
+      { label: 'Polystyrene', value: 'polystyrene' },
+      { label: 'Polyethyleneglycol', value: 'polyethyleneglycol' },
+      { label: 'Self-defined', value: 'self_defined' }
+    ];
+
+    return (
+      <Select
+        options={selectOptions}
+        simpleValue
+        key={"polymer_type" + sample.id.toString()}
+        name="polymer_type"
+        value={residue.custom_info.polymer_type}
+        clearable={false}
+        onChange={(v) => this.handlePolymerTypeSelectChanged(v, residue, sample)}
+      />
+    )
+  }
+
+  surfaceType(sample, residue) {
+    let selectOptions = [
+      { label: 'Glass', value: 'glass' },
+      { label: 'Si native oxide', value: 'si Native Oxide' },
+      { label: 'Si, 5nm Ti, 100nm Au', value: 'si, 5nm Ti, 100nm Au' }
+    ];
+
+    return (
+      <Select
+        options={selectOptions}
+        simpleValue
+        key={`surface_type_${sample.id}`}
+        name="surface_type"
+        value={residue.custom_info.surface_type}
+        clearable={false}
+        onChange={(v) => this.handleSurfaceTypeSelectChanged(v, residue, sample)}
+      />
+    )
+  }
+
+  polymerCrossLinkage(sample, residue) {
+    return (
+      <FormGroup>
+        <ControlLabel>Cross-linkage</ControlLabel>
+        <FormControl type="text"
+          value={residue.custom_info.cross_linkage || ''}
+          name="cross_linkage"
+          key={'cross_linkage' + sample.id.toString()}
+          onChange={(e) => this.handleCustomInfoChanged(e, residue, sample)}
+        />
+      </FormGroup>
+    )
+  }
+
+  render() {
+    let sample = this.props.sample || {}
+    let residue = sample.residues[0];
+
+    if (!this.props.show)
+      return false;
+
+    return (
+      <div className="polymer-section">
+        <Row>
+          <Col md={6}>
+            <label>Polymer type</label>
+            {this.polymerType(sample, residue)}
+          </Col>
+          <Col md={6}>
+            <label>Surface type</label>
+            {this.surfaceType(sample, residue)}
+          </Col>
+        </Row>
+        <br />
+        <Row>
+          <Col md={6}>
+            {this.polymerCrossLinkage(sample, residue)}
+          </Col>
+          <Col md={6}>
+            {this.polymerFormula(sample, residue)}
+          </Col>
+        </Row>
+        <Row>
+          <Col md={8}>
+            <ElementalCompositionGroup
+              handleSampleChanged={(s) => this.props.parent.handleSampleChanged(s)}
+              sample={sample} />
+          </Col>
+          <Col md={4}>
+            {this.polymerLoading(sample, residue)}
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/PrivateNoteElement.js b/app/packs/src/components/PrivateNoteElement.js
new file mode 100644
index 000000000..acc285116
--- /dev/null
+++ b/app/packs/src/components/PrivateNoteElement.js
@@ -0,0 +1,116 @@
+/* eslint-disable object-shorthand, no-trailing-spaces, 
+object-property-newline, semi, react/no-unused-prop-types, react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, FormControl, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import PrivateNoteFetcher from './fetchers/PrivateNoteFetcher';
+import PrivateNote from './models/PrivateNote';
+
+export default class PrivateNoteElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      note: undefined,
+      isSaving: false
+    };
+  }
+
+  componentDidMount() {
+    const { element } = this.props;
+    this.fetchNote(element);
+  }
+
+  fetchNote(element) {
+    if (element === undefined || element.is_new) {
+      return;
+    }
+
+    PrivateNoteFetcher.fetchByNoteableId(element.id, element.type).then((note) => {
+      if (note != null) {
+        this.setState({ note: note });
+      }
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  handleInputChange(value) {
+    let { note } = this.state;
+    if (note === undefined) {
+      note = PrivateNote.buildEmpty();
+    }
+    note.content = value;
+    this.setState({ note: note });
+  }
+
+  saveNote() {
+    const { note } = this.state;
+    const { element } = this.props;
+    if (!element || !note) {
+      return;
+    }
+    this.setState({isSaving: true})
+    if (!note.created_at) {
+      const params = { 
+        content: note.content, noteable_id: element.id, 
+        noteable_type: element.type 
+      };
+      PrivateNoteFetcher.create(params).then((newNote) => {
+        this.setState({ note: newNote, isSaving: false });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        this.setState({isSaving: false})
+      });
+    } else {
+      PrivateNoteFetcher.update(note).then((newNote) => {
+        this.setState({ note: newNote, isSaving: false });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        this.setState({isSaving: false})
+      });
+    }
+  }
+
+  render() {
+    const { note, isSaving } = this.state;
+    const content = note ? note.content : '';
+    let disabled = this.props.disabled || false;
+    const { element } = this.props;
+    if (element && element.is_new) {
+      disabled = true;
+    }
+
+    return (
+      <FormGroup>
+        <OverlayTrigger
+          placement="top"
+          overlay={
+            <Tooltip id='private-note'>Only you can see this note</Tooltip>
+          }
+        >
+          <ControlLabel>
+            Private Note <span className="glyphicon glyphicon-info-sign" />
+          </ControlLabel>
+        </OverlayTrigger>
+
+        <i>{isSaving ? " saving your note" : ""}</i>
+        
+        <FormControl
+          componentClass="textarea"
+          ref={(input) => { this.noteInput = input; }}
+          placeholder={content}
+          value={content}
+          onChange={e => this.handleInputChange(e.target.value)}
+          rows={2}
+          disabled={disabled}
+          onBlur={() => this.saveNote()}
+        />
+      </FormGroup>
+    )
+  }
+}
+
+PrivateNoteElement.propTypes = {
+  element: PropTypes.object,
+  handlePrivateNoteChanged: PropTypes.func,
+};
diff --git a/app/packs/src/components/PubchemLabels.js b/app/packs/src/components/PubchemLabels.js
new file mode 100644
index 000000000..cba940964
--- /dev/null
+++ b/app/packs/src/components/PubchemLabels.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PubchemLabels = ({element}) =>{
+  let cid = element.pubchem_tag && element.pubchem_tag.pubchem_cid
+  let labelStyle = {
+    display: 'inline-block',
+    marginLeft: "5px",
+    marginRight: "5px"
+  };
+  if (!cid || isNaN(cid)) {labelStyle.WebkitFilter = "grayscale(100%)"}
+  const handleOnClick = (e) => {
+    if (cid && !isNaN(cid)){
+      window.open("https://pubchem.ncbi.nlm.nih.gov/compound/" + cid, '_blank')
+    }
+    e.stopPropagation()
+  }
+  return (
+    <span style={labelStyle} onClick={handleOnClick}>
+      <img src="/images/wild_card/pubchem.svg" className="pubchem-logo" />
+    </span>
+  )
+}
+
+PubchemLabels.propTypes = {
+  element: PropTypes.object,
+}
+
+export default PubchemLabels;
diff --git a/app/packs/src/components/PubchemLcss.js b/app/packs/src/components/PubchemLcss.js
new file mode 100644
index 000000000..585536ccb
--- /dev/null
+++ b/app/packs/src/components/PubchemLcss.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Button, Row, Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { concat, uniqBy } from 'lodash';
+import PubchemSigns from 'src/components/pubchem/PubchemSigns';
+
+const PubchemLcss = ({
+  cid, informArray
+}) => {
+  const sourceRoot = 'https://pubchem.ncbi.nlm.nih.gov';
+  let imgWH = 70 * (4 / 9);
+  let imgs = [];
+
+  const picArry = informArray.filter(info => info.Name === 'Pictogram(s)');
+
+  if (picArry.length > 0) {
+    picArry.map((p) => {
+      const makeups = p.Value.StringWithMarkup;
+      makeups.map((ms) => {
+        const extract = ms.Markup.map(m => ({ src: m.URL.replace(sourceRoot, ''), title: m.Extra }));
+        imgs = concat(imgs, extract);
+      });
+    });
+  } else {
+    informArray.map((inform) => {
+      const htmlDoc = new DOMParser().parseFromString(inform.StringValue, 'text/html');
+      const extract = [].slice.call(htmlDoc.querySelectorAll('img')).map((g) => {
+        return { src: g.getAttribute('src'), title: g.title };
+      });
+      imgs = concat(imgs, extract);
+      return true;
+    });
+  }
+
+  imgs = uniqBy(imgs, 'src');
+  if (imgs.length < 5) {
+    imgWH = 70 * (3 / 4);
+  }
+  const signs = imgs.map((img, idx) => <PubchemSigns key={`pubchem_sign_${idx + 1}`} objPath={img.src} objTitle={img.title} objWidth={imgWH} objHeight={imgWH} />);
+
+  return (
+    <div>
+      <Row>
+        <Col md={12}>
+          {signs}
+        </Col>
+      </Row>
+      <Row>
+        <Col md={12}>
+          <Button style={{ border: 'none' }} bsSize="xsmall" onClick={() => { window.open(`${sourceRoot}/compound/${cid}#datasheet=lcss&section=Top`, '_blank'); }}>
+            <img src="/images/wild_card/pubchem.svg" style={{ height: '1.5vh' }} alt="" />&nbsp;
+            <i className="lcss-link">
+              Source: European Chemicals Agency (ECHA)<br />
+              Read more about Safety Summary from PubChem
+            </i>
+          </Button>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+PubchemLcss.propTypes = {
+  cid: PropTypes.number.isRequired,
+  informArray: PropTypes.arrayOf(PropTypes.shape({
+    ReferenceNumber: PropTypes.number.isRequired,
+    Name: PropTypes.string.isRequired,
+    StringValue: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+export default PubchemLcss;
diff --git a/app/packs/src/components/PubchemSigns.js b/app/packs/src/components/PubchemSigns.js
new file mode 100644
index 000000000..7d35a5b41
--- /dev/null
+++ b/app/packs/src/components/PubchemSigns.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PubchemSigns = ({
+  objPath, objWidth, objHeight, objTitle
+}) => {
+  const objScale = 1;
+  return (
+    <svg
+      width={objWidth}
+      height={objHeight}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>{objTitle}</title>;
+      <g transform={`scale(${objScale})`}>
+        <image xlinkHref={objPath} width="100%" height="100%" />
+      </g>
+    </svg>
+  );
+};
+
+PubchemSigns.propTypes = {
+  objPath: PropTypes.string.isRequired,
+  objWidth: PropTypes.number,
+  objHeight: PropTypes.number,
+  objTitle: PropTypes.string
+};
+
+PubchemSigns.defaultProps = {
+  objWidth: 70,
+  objHeight: 70,
+  objTitle: ''
+};
+
+export default PubchemSigns;
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
new file mode 100644
index 000000000..7d5191d0b
--- /dev/null
+++ b/app/packs/src/components/PublishCommon.js
@@ -0,0 +1,328 @@
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+  OverlayTrigger,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Aviator from 'aviator';
+import Sample from './models/Sample';
+import { sampleShowOrNew, reactionShow } from './routesUtils';
+import Reaction from './models/Reaction';
+import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '5px',
+  marginRight: '5px'
+};
+
+const handleClick = (e, id, clickType) => {
+  e.preventDefault();
+  e.stopPropagation();
+  const uri = Aviator.getCurrentURI();
+  const uriArray = uri.split(/\//);
+  switch (clickType) {
+    case 'Reaction':
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
+      reactionShow({ params: { reactionID: id } });
+      break;
+
+    default:
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
+      sampleShowOrNew({ params: { sampleID: id } });
+      break;
+  }
+};
+const validateYield = (reaction) => {
+  const result = [];
+  const products = reaction.products || [];
+  products.forEach((product) => {
+    const val = ((product.equivalent || 0) * 100).toFixed(0);
+    if (val === '0') result.push({ name: 'product-yield', value: false, message: `[Product] ${product.molecule_iupac_name}: yield is 0` });
+  });
+  if (result.length !== 0 && result.length === products.length) return result;
+  return [];
+};
+
+const validateMolecule = (element) => {
+  const validates = [];
+  const sample = element;
+  const analyses = sample.analysisArray();
+  analyses.forEach((al) => {
+    const status = al.extended_metadata.status || '';
+    const kind = al.extended_metadata.kind || '';
+    if (status !== 'Confirmed') {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
+    }
+    if (kind === '' || (kind.split('|').length < 2)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
+    }
+    if (!isNmrPass(al, sample)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
+    }
+    if (!isDatasetPass(al)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
+    }
+  });
+  return validates;
+};
+
+const PublishBtnReaction = ({ reaction, showModal }) => {
+  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
+  // NB set publishedId to true to hide it
+  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
+  const notPublishable = reaction.notPublishable; // false or [samples]
+  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
+  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
+  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
+  return (
+    (!publishedId && !tagData.publication) ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
+      >
+        <Button
+          // style={{ display: 'none' }}
+          bsStyle="success"
+          bsSize="xsmall"
+          className="button-right"
+          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
+          onClick={() => showModal(!isDisabled)}
+          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
+        >
+          <i className="fa fa-paper-plane" />
+        </Button>
+      </OverlayTrigger>
+    ) : <span />
+  );
+};
+
+PublishBtnReaction.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
+
+const PublishBtn = ({ sample, showModal }) => {
+  const tagData = (sample.tag && sample.tag.taggable_data) || {};
+
+  const publishedId = tagData.public_sample;
+  const isPoly = sample._contains_residues;
+
+  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
+    >
+      <Button
+        bsStyle="success"
+        bsSize="xsmall"
+        className="button-right"
+        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+        onClick={() => showModal(!isPoly)}
+        // disabled={isPoly}
+        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
+      >
+        <i className="fa fa-paper-plane" />
+      </Button>
+    </OverlayTrigger>
+  ) : <span />;
+};
+
+PublishBtn.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  sample: PropTypes.instanceOf(Sample).isRequired,
+};
+
+const ReviewPublishBtn = ({ element, showComment, validation }) => {
+  const tagData = (element.tag && element.tag.taggable_data) || {};
+  const publishedId = tagData.public_sample || tagData.public_reaction;
+  const isDecline = (tagData && tagData.decline === true) || false;
+  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
+
+  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
+  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
+                    >
+                      <Button
+                        bsStyle="danger"
+                        bsSize="xsmall"
+                        className="button-right"
+                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+                        onClick={() => validation(element)}
+                      >
+                        <i className="fa fa-paper-plane" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />);
+  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
+                    >
+                      <Button
+                        bsSize="xsmall"
+                        bsStyle="success"
+                        target="_blank"
+                        className="button-right"
+                        onClick={showComment}
+                      >
+                        <i className="fa fa-comments" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />)
+  return (
+    <span>
+    {reviewBtn}
+    {commentBtn}
+    </span>
+  )
+};
+
+
+const PublishedTag = ({ element }) => {
+  const tag = (element && element.tag) || {};
+  const tagData = (tag && tag.taggable_data) || {};
+  const tagType = tag.taggable_type;
+  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
+  let tip = '';
+  let publishedId;
+  switch (tagType) {
+    case 'Reaction':
+      publishedId = tagData.public_reaction;
+      if (isPending) {
+        tip = 'Reaction is being reviewed';
+      } else {
+        tip = 'Reaction has been published';
+      }
+      break;
+
+    default:
+      publishedId = tagData.public_sample;
+      if (isPending) {
+        tip = 'Sample is being reviewed';
+      } else {
+        tip = 'Sample has been published';
+      }
+      break;
+  }
+  return (
+    publishedId ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="data public">{tip}</Tooltip>}
+      >
+        <Button
+          bsSize="xsmall"
+          bsStyle={isPending ? 'warning' : 'danger'}
+          style={labelStyle}
+          onClick={event => handleClick(event, publishedId, tagType)}
+        >
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    ) : null
+  );
+};
+
+PublishedTag.propTypes = {
+  element: PropTypes.object,
+};
+
+const LabelPublication = ({ element }) => {
+  const publication = element.tag && element.tag.taggable_data &&
+    element.tag.taggable_data.publication;
+
+  if (!publication) { return null; }
+
+  const time = new Date(publication.published_at || publication.doi_reg_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const contributor = publication.contributors && publication.contributors.name;
+  const publishedBy = publication.creators && publication.creators[0] &&
+    publication.creators[0].name;
+  let tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
+  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
+    element.publication.taggable_data.scheme_only === true) || false;
+  let openUrl = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`;
+  let btnStyle = 'default';
+  if (!publication.published_at && element.publication) {
+    const pub = element.publication;
+    let pubCreatedAt = new Date(pub.created_at);
+    pubCreatedAt = `${pubCreatedAt.getDate()}-${pubCreatedAt.getMonth() + 1}-${pubCreatedAt.getFullYear()} `;
+    tooltipText = `Submitted by ${contributor == null ? publishedBy : contributor} on ${pubCreatedAt}`;
+    openUrl = `/pid/${element.publication.id}`;
+    btnStyle = 'success';
+  }
+  if (publication.published_at || element.publication) {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
+        onClick={e => e.stopPropagation()}
+      >
+        <Button bsSize="xsmall" bsStyle={btnStyle} style={labelStyle} onClick={() => { window.open(openUrl, '_blank'); }}>
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return <span />;
+};
+
+LabelPublication.propTypes = {
+  element: PropTypes.object,
+};
+
+
+const ChemotionTag = ({ tagData, firstOnly = false }) => {
+  const chemotionTag = tagData.chemotion;
+  if (!chemotionTag) { return null; }
+  const { chemotion_first, last_published_at, doi } = chemotionTag;
+  if (firstOnly && !chemotion_first) { return null; }
+  const time = new Date(chemotion_first || last_published_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
+    : `Last published on ${formattedTime}`;
+  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
+
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
+      <a
+        style={labelStyle}
+        // bsSize="xsmall"
+        // bsStyle="default"
+        target="_blank"
+        href={`https://dx.doi.org/${doi}`}
+      >
+        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
+        {first}
+        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
+      </a>
+
+
+
+    </OverlayTrigger>
+  );
+};
+
+
+ChemotionTag.propTypes = {
+  tagData: PropTypes.object,
+};
+ChemotionTag.defaultProps = {
+  tagData: {},
+};
+
+export {
+  LabelPublication,
+  PublishedTag,
+  ChemotionTag,
+  PublishBtn,
+  PublishBtnReaction,
+  ReviewPublishBtn,
+  validateMolecule,
+  validateYield
+};
diff --git a/app/packs/src/components/PublishReactionContainers.js b/app/packs/src/components/PublishReactionContainers.js
new file mode 100644
index 000000000..3746a575c
--- /dev/null
+++ b/app/packs/src/components/PublishReactionContainers.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  PanelGroup,
+  Panel,
+  Button,
+} from 'react-bootstrap';
+import ContainerComponent from './ContainerComponent';
+import PrintCodeButton from './common/PrintCodeButton';
+import Reaction from './models/Reaction';
+
+export default class PublishReactionContainers extends Component {
+  constructor(props) {
+    super();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      activeContainer: 0
+    };
+
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({ activeContainer: key });
+  }
+
+  render() {
+    const {reaction, activeContainer} = this.state;
+    const {readOnly} = this.props;
+
+    let containerHeader = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          {container.name}
+          {titleKind}
+          {titleStatus}
+          <Button
+            bsSize="xsmall"
+            bsStyle="danger"
+            className="button-right"
+            disabled={readOnly}
+            onClick={() => this.handleOnClickRemove(container)}
+          >
+            <i className="fa fa-trash" />
+          </Button>
+          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
+        </div>
+      )
+    };
+
+    let containerHeaderDeleted = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          <strike>
+            {container.name}
+            {titleKind}
+            {titleStatus}
+          </strike>
+          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
+                  onClick={() => this.handleUndo(container)}>
+            <i className="fa fa-undo"></i>
+          </Button>
+        </div>
+      )
+    };
+
+    if (reaction.container != null && reaction.container.children) {
+      const analyses_container = reaction.container.children.filter(element => (
+        ~element.container_type.indexOf('analyses')
+      ));
+
+      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
+        return (
+          <div>
+            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
+              {analyses_container[0].children.map((container, key) => {
+                if (container.is_deleted) {
+                  return (
+                    <Panel
+                      eventKey={key}
+                      key={`reaction_container_deleted_${container.id}`}
+                    >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                    </Panel>
+                  );
+                }
+
+                return (
+                  <Panel
+                    eventKey={key}
+                    key={`reaction_container_${container.id}`}
+                    onClick={this.handleAccordionOpen.bind(this, key)}
+                  >
+                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
+                    <Panel.Body collapsible>
+                      <ContainerComponent
+                        readOnly={readOnly}
+                        container={container}
+                        onChange={this.handleChange.bind(this, container)}
+                      />
+                    </Panel.Body>
+                  </Panel>
+                );
+              })}
+            </PanelGroup>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          style={{ marginBottom: '10px' }}
+          className="noAnalyses-warning"
+        >
+          There are currently no Analyses.
+        </div>
+      );
+    }
+
+    return (
+      <div className="noAnalyses-warning">
+        There are currently no Analyses.
+      </div>
+    );
+  }
+}
+
+PublishReactionContainers.propTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
new file mode 100644
index 000000000..b65e01315
--- /dev/null
+++ b/app/packs/src/components/PublishReactionModal.js
@@ -0,0 +1,940 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel,
+  PanelGroup,
+  Button,
+  Modal,
+  Table,
+  OverlayTrigger, FormGroup,
+  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
+  Form,
+  Grid,
+  ControlLabel
+} from 'react-bootstrap';
+import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
+import Select from 'react-select';
+import Immutable from 'immutable';
+import { validateYield } from './PublishCommon';
+import Reaction from './models/Reaction';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import ReactionsFetcher from './fetchers/ReactionsFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, isNmrPass, isDatasetPass, PublishTypeAs, OrcidIcon } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
+import CollaboratorFetcher from '../components/fetchers/CollaboratorFetcher';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
+import { contentToText } from './utils/quillFormat';
+import { CitationTypeMap, CitationTypeEOL } from './CitationType';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
+);
+
+const skimAnalysis = (sample) => {
+  const analyses = sample.analysisArray();
+  const publishedAnalyses = analyses.filter(a =>
+    (a.extended_metadata &&
+      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+  return publishedAnalyses.filter(a =>
+    (a.extended_metadata &&
+      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+};
+
+const publishOptions = { f: 'full', s: 'scheme-only' };
+
+export default class PublishReactionModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      selectedUsers: [],
+      selectedReviewers: [],
+      showSelectionReviewer: false,
+      collaborations: [],
+      showPreview: false,
+      showScheme: false,
+      currentUser,
+      showRinchi: false,
+      showProp: false,
+      showTlc: false,
+      selectedRefs: [],
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: [],
+      noSolvent: false,
+      noAmountYield: false,
+      noEmbargo: false,
+      schemeDesc: true,
+      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
+    };
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handlePublishReaction = this.handlePublishReaction.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
+    this.handleNoAmountYieldCheck = this.handleNoAmountYieldCheck.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
+    this.handleYieldChange = this.handleYieldChange.bind(this);
+    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
+    this.handleUnitChange = this.handleUnitChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  handleInputChange(type, event) {
+    const { reaction } = this.state;
+    switch (type) {
+      case 'temperature':
+        reaction.temperature.userText = event.target.value;
+        break;
+      case 'temperatureUnit':
+        reaction.temperature = reaction.convertTemperature(event);
+        break;
+      case 'duration':
+        reaction.durationDisplay = { nextValue: event.target.value };
+        break;
+      case 'durationUnit':
+        reaction.durationDisplay = { nextUnit: true };
+        break;
+      default:
+        break;
+    }
+    this.setState({ reaction });
+  }
+
+  handleYieldChange(p, event) {
+    const { value } = event.target;
+    if (!isNaN(value)) {
+      const { reaction } = this.state;
+      const { products } = reaction;
+      const product = products.find(e => e.id === p.id);
+      if (typeof product !== 'undefined') {
+        product.equivalent = (value / 100);
+        products.splice(products.findIndex(e => e.id === p.id), 1, product);
+        reaction.products = products;
+        this.setState({ reaction });
+      }
+    }
+  }
+
+  handlePropertiesChange(type, event) {
+    if (type === 'temperature') {
+      this.handleInputChange(type, event);
+    }
+    if (type === 'duration') {
+      const { value } = event.target;
+      if (!isNaN(value)) {
+        this.handleInputChange(type, event);
+      }
+    }
+    if (type === 'schemeDesc') {
+      this.setState({ schemeDesc: !this.state.schemeDesc });
+    }
+  }
+
+  handleUnitChange(type, event) {
+    let index;
+    let unit;
+    switch (type) {
+      case 'temperatureUnit':
+        index = Reaction.temperature_unit.indexOf(event);
+        unit = Reaction.temperature_unit[(index + 1) % 3];
+        this.handleInputChange('temperatureUnit', unit);
+        break;
+      case 'durationUnit':
+        this.handleInputChange('durationUnit', event);
+        break;
+      default:
+        break;
+    }
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  handleNoSolventCheck() {
+    this.setState({ noSolvent: !this.state.noSolvent });
+  }
+
+  handleNoEmbargoCheck() {
+    this.setState({ noEmbargo: !this.state.noEmbargo });
+  }
+
+  handleNoAmountYieldCheck() {
+    this.setState({ noAmountYield: !this.state.noAmountYield });
+  }
+
+  loadBundles() {
+    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
+      const cols = result.repository || [];
+      this.setState({ bundles: cols });
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  loadMyCollaborations() {
+    CollaboratorFetcher.fetchMyCollaborations()
+      .then((result) => { this.setState({ collaborations: result.authors }); });
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
+    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
+      <div>  -{currentUser.current_affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br /> {aff} </div>);
+  }
+
+  handleSelectReviewer(val) {
+    if (val) { this.setState({ selectedReviewers: val }); }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleAnalysesChecked(analysis, elementType) {
+    const { reaction } = this.state;
+
+    reaction.changed = true;
+    if (elementType === 'Reaction') {
+      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+      // Find the index of the element and then replace
+      const index = findIndex(elements, { id: analysis.id });
+      if (index !== -1) {
+        elements.splice(index, 1, analysis);
+        this.setState(prevState => ({ ...prevState, reaction }));
+      }
+    }
+    if (elementType === 'Product') {
+      const analysesReactionProducts = reaction.products;
+      analysesReactionProducts.forEach((product) => {
+        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        // Find the index of the element and then replace
+        const index = findIndex(elements, { id: analysis.id });
+        if (index !== -1) {
+          elements.splice(index, 1, analysis);
+          this.setState(prevState => ({ ...prevState, reaction }));
+        }
+      });
+    }
+    this.props.onHandleAnalysesCheck(this.state.reaction);
+  }
+
+  validateAnalyses() {
+    let pas = this.state.reaction.products.reduce(
+      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(this.state.reaction)
+    );
+    if (pas.length === 0) {
+      return false;
+    }
+
+    pas = AnalysisIdstoPublish(this.state.reaction);
+    if (pas.length > 0) {
+      return true;
+    }
+
+    const { reaction } = this.state;
+    const { products } = reaction;
+    for (let i = 0; i < products.length; i += 1) {
+      const pa = skimAnalysis(products[i]);
+      if (pa.length > 0) { return true; }
+    }
+
+    return false;
+  }
+
+  handlePublishReaction() {
+    const {
+      selectedLicense, cc0Consent, publishType, selectedUsers
+    } = this.state;
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
+      return true;
+    }
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
+      alert("Please add an author or check 'add me as author'.");
+      return true;
+    }
+
+    const { reaction } = this.state;
+    if (isFullyPublish) {
+      const { samples } = reaction;
+      for (let i = 0; i < samples.length; i += 1) {
+        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
+      }
+    }
+
+    LoadingActions.start();
+    RepositoryActions.publishReaction({
+      isFullyPublish,
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      reviewers: this.state.selectedReviewers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      schemeDesc: this.state.schemeDesc,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide(false);
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reReaction) => {
+        this.props.onPublishRefreshClose(reReaction, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishReactionReserveDois({
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reaction) => {
+        this.props.onPublishRefreshClose(reaction, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+    const authorCount = selectedUsers && selectedUsers.length;
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>);
+    });
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  addReviewers() {
+    const { selectedReviewers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+
+    return (
+      <div >
+        <h5><b>Additional Reviewers:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select reviewers from my collaboration"
+          backspaceRemoves
+          value={selectedReviewers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectReviewer}
+        />
+        <div>
+          {reviewerInfo}
+        </div>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="60%" />
+            <th width="40%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            let { litype } = citation;
+            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
+              litype = 'uncategorized';
+            }
+            const chkDisabled = litype === 'uncategorized';
+            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
+            return (
+              <tr key={id}>
+                <td className="padding-right" style={{ display: 'inline-flex;' }}>
+                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
+                  >
+                    <span>
+                      <Checkbox
+                        disabled={chkDisabled}
+                        checked={selectedRefs.includes(id)}
+                        onChange={() => { this.handleRefCheck(id); }}
+                      >
+                        <span>Add to publication</span><br />
+                        <span>({CitationTypeMap[litype].def})</span>
+                      </Checkbox>
+                    </span>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  handlePublishTypeChange(e) {
+    const { publishType } = this.state;
+    publishType.selected = e;
+    this.setState({ publishType });
+  }
+
+  validatePub(isFullyPublish = true) {
+    const { reaction, noEmbargo, selectedEmbargo } = this.state;
+    let validates = [];
+    if (isFullyPublish) {
+      validates.push({ name: 'embargo', value: selectedEmbargo !== '-1' || (selectedEmbargo === '-1' && noEmbargo), message: 'No embargo bundle' });
+      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+      const desc = contentToText(reaction.description).trim() || '';
+      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
+      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
+      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
+      const hasSv =
+        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
+      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
+      const hasProduct = reaction.products && reaction.products.length > 0;
+      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
+
+      (reaction.starting_materials || []).forEach((st) => {
+        if (!st.amount || !st.amount.value) {
+          validates.push({ name: 'starting_materials-amount', value: false, message: `[Starting material] ${st.molecule_iupac_name}: amount is 0` });
+        }
+      });
+      if (!this.state.noAmountYield) {
+        (reaction.products || []).forEach((prod) => {
+          if (!prod.amount || !prod.amount.value) {
+            validates.push({ name: 'product-amount', value: false, message: `[Product] ${prod.molecule_iupac_name}: amount is 0` });
+          }
+        });
+      }
+    } else {
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+    }
+    validates = this.state.noAmountYield ? validates : validates.concat(validateYield(reaction));
+    return validates;
+  }
+
+  render() {
+    const { show } = this.props;
+    const {
+      reaction, selectedUsers, selectedReviewers, selectedRefs, publishType, bundles
+    } = this.state;
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
+    const validateInfo = this.validatePub(isFullyPublish);
+    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
+    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
+    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
+    const validated = !!(validateObjs && validateObjs.length === 0);
+
+    let selectedAnalysesCount = (this.state.reaction.analyses || [])
+      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
+      && a.extended_metadata.kind)).length;
+
+    const productDOI = product => (
+      <tr key={`doi-product-row-${product.id}`}>
+        <td>
+          Product {product.name}
+        </td>
+        <td>
+          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    const productAnalysesDOI = analysis => (
+      <tr key={`doi-product-analysis-row-${analysis.id}`}>
+        <td>
+          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
+        </td>
+        <td>
+          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    if (show) {
+      const analysesView = [];
+      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+
+      selectedAnalysesCount = (analysesReaction || []).filter(a =>
+        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
+
+      const analysesViewReaction = analysesReaction.map(analysis => (
+        <PublishAnalysesTag
+          reaction={reaction}
+          analysis={analysis}
+          key={`reaction_${analysis.id}`}
+          analysesType="Reaction"
+          handleAnalysesChecked={this.handleAnalysesChecked}
+        />
+      ));
+      analysesView.push(analysesViewReaction);
+
+      const analysesReactionProductsDOIs = [];
+      const analysesReactionProducts = reaction.products;
+
+      analysesReactionProducts.forEach((product) => {
+        const arrP = [];
+        arrP.push(product);
+        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
+        analysesView.push(tmpProduct);
+
+        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        const tmpTag = tmp.map(analysis => (
+          <PublishAnalysesTag
+            reaction={reaction}
+            analysis={analysis}
+            key={`reaction_product_${analysis.id}`}
+            analysesType="Product"
+            handleAnalysesChecked={this.handleAnalysesChecked}
+            product={product}
+          />
+        ));
+        analysesView.push(tmpTag);
+        analysesReactionProductsDOIs.push(productDOI(product));
+        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
+        selectedAnalysesCount += (tmp || []).filter(a =>
+          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
+            && ((a.extended_metadata.status || '') === 'Confirmed')
+            && (isNmrPass(a, product))
+            && (isDatasetPass(a))
+          )).length;
+      });
+
+      const {
+        selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
+      } = this.state;
+
+      const publishTypeAs = {
+        ...publishType,
+        onChange: this.handlePublishTypeChange
+      };
+
+
+      const opts = [];
+      bundles.forEach((col) => {
+        const tag = col.taggable_data || {};
+        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
+      });
+
+      const awareEmbargo = selectedEmbargo === '-1' ? (
+        <Checkbox
+          onChange={() => { this.handleNoEmbargoCheck(); }}
+          checked={noEmbargo}
+          className={`display-${isFullyPublish}`}
+        >
+          <span>
+            I know that the data that is submitted without the selection of an embargo
+            bundle will be published immediately after a successful review.
+          </span>
+        </Checkbox>
+      ) : <div />;
+
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
+            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
+              <Grid style={{ width: '100%' }}>
+                <Col sm={6} lg={6}>
+                  <Form inline>
+                    <FormGroup controlId="frmCtrlPublishType">
+                      <ControlLabel>
+                        Publish Reaction as
+                      </ControlLabel>{' '}
+                      <PublishTypeAs {...publishTypeAs} />
+                    </FormGroup>
+                  </Form>
+                </Col>
+                <Col sm={6} lg={6}>
+                  {' '}
+                </Col>
+              </Grid>
+            </Modal.Header>
+            <Modal.Body style={{
+              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
+            }}
+            >
+              <EmbargoCom
+                opts={opts}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <FormGroup>
+                <Col md={12} sm={12}>
+                  <div style={{
+                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
+                }}>{validateMsg}
+                  </div>
+                </Col>
+              </FormGroup>
+              <div className={`display-${isFullyPublish}`}>
+                <ReactionInfo
+                  reaction={reaction}
+                  toggleScheme={this.toggleScheme}
+                  showScheme={this.state.showScheme}
+                  isPublic={false}
+                  toggleRinchi={this.toggleRinchi}
+                  showRinchi={this.state.showRinchi}
+                  toggleProp={this.toggleProp}
+                  showProp={this.state.showProp}
+                  toggleTlc={this.toggleTlc}
+                  showTlc={this.state.showTlc}
+                />
+              </div>
+              <div className={`display-${!isFullyPublish}`}>
+                <ReactionSchemeOnlyInfo
+                  reaction={reaction}
+                  isPublic={false}
+                  schemeDesc={this.state.schemeDesc}
+                  onYieldChange={this.handleYieldChange}
+                  onPropertiesChange={this.handlePropertiesChange}
+                  onUnitChange={this.handleUnitChange}
+                />
+              </div>
+              <Checkbox
+                onChange={() => { this.handleNoSolventCheck(); }}
+                checked={this.state.noSolvent}
+                className={`display-${isFullyPublish}`}
+              >
+                <span>This reaction has no solvents</span>
+              </Checkbox>
+              <Checkbox
+                onChange={() => { this.handleNoAmountYieldCheck(); }}
+                checked={this.state.noAmountYield}
+                className={`display-${isFullyPublish}`}
+              >
+                <span>Skip amount and yield validation (the product has no amount and yield)</span>
+              </Checkbox>
+              {awareEmbargo}
+              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
+                <Panel
+                  eventKey="2"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <div>
+                      <Row>
+                        <Col md={12}>
+                          <h5>
+                            <b>Datasets: </b>
+                            <br />
+                          </h5>
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col md={12}>
+                          <PanelGroup
+                            accordion
+                            id={`panelgroup_ds_${reaction.id}`}
+                            defaultActiveKey={0}
+                          >
+                            {flatten(analysesView)}
+                          </PanelGroup>
+                        </Col>
+                      </Row>
+                    </div>
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="3"
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="5"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle>
+                      <h4> Select References ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="6">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.addReviewers()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+            </Modal.Body>
+            <Modal.Footer style={{ padding: '6px' }}>
+              <Button onClick={() => this.props.onHide(false)}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
+                Publish Reaction
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishReactionModal.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+  onHandleAnalysesCheck: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
new file mode 100644
index 000000000..e26cfadd6
--- /dev/null
+++ b/app/packs/src/components/PublishSampleModal.js
@@ -0,0 +1,600 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel, PanelGroup, Modal, Table,
+  ListGroupItem, ListGroup, Button, Checkbox,
+  OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import Select from 'react-select';
+import Immutable from 'immutable';
+import { sortedUniq } from 'lodash';
+
+import Sample from './models/Sample';
+import SampleDetailsContainers from './SampleDetailsContainers';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import SamplesFetcher from './fetchers/SamplesFetcher';
+import CollaboratorFetcher from './fetchers/CollaboratorFetcher';
+import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
+import EmbargoFetcher from './fetchers/EmbargoFetcher';
+import { CitationTypeMap, CitationTypeEOL } from './CitationType';
+
+export default class PublishSampleModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { sample } = props;
+    this.state = {
+      sample,
+      selectedUsers: [],
+      selectedReviewers: [],
+      showSelectionUser: false,
+      showSelectionAnalysis: false,
+      showPreview: false,
+      currentUser,
+      selectedRefs: [],
+      collaborations: [],
+      showSelectionReviewer: false,
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: [],
+      noEmbargo: false
+    };
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handleSampleChanged = this.handleSampleChanged.bind(this);
+    this.handlePublishSample = this.handlePublishSample.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      sample: nextProps.sample,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  loadBundles() {
+    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
+      const cols = result.repository || [];
+      this.setState({ bundles: cols });
+    });
+  }
+
+  loadMyCollaborations() {
+    CollaboratorFetcher.fetchMyCollaborations()
+    .then((result) => {
+      this.setState({
+        collaborations: result.authors
+      });
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  handleSelectReviewer(val) {
+    if (val) { this.setState({ selectedReviewers: val }); }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handleSampleChanged(sample) {
+    this.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  validateAnalyses() {
+    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
+  validateSubmission() {
+    const { sample, selectedEmbargo, noEmbargo } = this.state;
+    if (selectedEmbargo === '-1' && !noEmbargo) return false;
+    const analyses = sample.analysisArray();
+    if (!this.validateAnalyses()) {
+      return false;
+    }
+
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  handlePublishSample() {
+    const { selectedLicense, cc0Consent } = this.state;
+    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
+    // const reviewerCount = this.state.selectedReviewers && this.state.selectedReviewers.length;
+    const plural = authorCount > 0 ? 's' : '';
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (!this.validateSubmission()) {
+      alert('Submission Check fail. Please review your data and re-submit.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${plural}`);
+      return true;
+    }
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
+      alert("Please add an author or check 'add me as author.'");
+      return true;
+    }
+
+    const analyses = this.state.sample.analysisArray();
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
+          (isDatasetPass(a))))); // fail if Dataset check fail
+
+    const { sample } = this.state;
+    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
+
+    LoadingActions.start();
+    RepositoryActions.publishSample({
+      // sample: this.state.sample,
+      sample,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      reviewers: this.state.selectedReviewers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide();
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((reSample) => {
+        this.props.onPublishRefreshClose(reSample, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishSampleReserveDois({
+      sample: this.state.sample,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((sample) => {
+        this.props.onPublishRefreshClose(sample, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
+    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
+      <div>  -{currentUser.current_affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  addReviewers() {
+    const { selectedReviewers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+
+    return (
+      <div >
+        <h5><b>Additional Reviewers:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select reviewers from my collaboration"
+          backspaceRemoves
+          value={selectedReviewers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectReviewer}
+        />
+        <div>
+          {reviewerInfo}
+        </div>
+      </div>
+    );
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="60%" />
+            <th width="40%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            let { litype } = citation;
+            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
+              litype = 'uncategorized';
+            }
+            const chkDisabled = litype === 'uncategorized';
+            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
+            return (
+              <tr key={id}>
+                <td className="padding-right">
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
+                  >
+                    <span>
+                      <Checkbox
+                        disabled={chkDisabled}
+                        checked={selectedRefs.includes(id)}
+                        onChange={() => { this.handleRefCheck(id); }}
+                      >
+                        <span>Add to publication</span><br />
+                        <span>({CitationTypeMap[litype].def})</span>
+                      </Checkbox>
+                    </span>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  handleNoEmbargoCheck() {
+    this.setState({ noEmbargo: !this.state.noEmbargo });
+  }
+
+  render() {
+    const { show, onHide, sample } = this.props;
+    const { bundles } = this.state;
+    const canPublish = this.validateSubmission(); // this.validateAnalyses();
+    const {
+      showPreview,
+      selectedUsers,
+      selectedReviewers,
+      selectedRefs
+    } = this.state;
+    const analyses = sample.analysisArray();
+    const selectedAnalysesCount = analyses.filter(
+      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
+
+    const { molecule } = sample;
+
+    const {
+      selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
+    } = this.state;
+
+    const awareEmbargo = selectedEmbargo === '-1' ? (
+      <Checkbox
+        onChange={() => { this.handleNoEmbargoCheck(); }}
+        checked={noEmbargo}
+      >
+        <span>
+          I know that the data that is submitted without the selection of an embargo
+          bundle will be published immediately after a successful review.
+        </span>
+      </Checkbox>
+    ) : <div />;
+
+    if (show) {
+      const opts = [];
+      bundles.forEach((col) => {
+        const tag = col.taggable_data || {};
+        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
+      });
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Publish Sample
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
+              <EmbargoCom
+                opts={opts}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <Panel>
+                <Panel.Body>
+                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
+                </Panel.Body>
+              </Panel>
+              {awareEmbargo}
+              <PanelGroup accordion id="publish-sample-config">
+                <Panel
+                  eventKey="2"
+                >
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <SampleDetailsContainers
+                      readOnly
+                      publish
+                      sample={sample}
+                      handleSampleChanged={this.handleSampleChanged}
+                    />
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="3">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="5">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select References ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="6">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.addReviewers()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+              {showPreview ? null : null}
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={() => onHide()}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
+                Publish Sample
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishSampleModal.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/ReactionDescriptionEditor.js b/app/packs/src/components/ReactionDescriptionEditor.js
new file mode 100644
index 000000000..265b4bd53
--- /dev/null
+++ b/app/packs/src/components/ReactionDescriptionEditor.js
@@ -0,0 +1,231 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+
+import _ from 'lodash';
+import Delta from 'quill-delta';
+
+import TextTemplateStore from './stores/TextTemplateStore';
+import TextTemplateActions from './actions/TextTemplateActions';
+
+import DynamicToolbarEditor from './react_quill/DynamicToolbarEditor';
+import BaseToolbar from './react_quill/BaseToolbar';
+
+import TextTemplateToolbar from './text_template_toolbar/TextTemplateToolbar';
+import ToolbarTemplateCreator from './text_template_toolbar/ToolbarTemplateCreator';
+
+const toolbarOptions = [
+  'bold', 'italic', 'underline',
+  'header', 'script',
+  'list', 'bullet',
+];
+
+export default class ReactionDescriptionEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const templateStore = TextTemplateStore.getState();
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = templateStore;
+    const fetchedTemplates = fetchedPredefinedTemplates.toJS();
+    this.state = {
+      fetchedNames: Object.keys(fetchedTemplates),
+      predefinedTemplateNames: predefinedTemplateNames.toJS(),
+      fetchedPredefinedTemplates: fetchedTemplates,
+      updateTemplate: false
+    };
+
+    this.fetchPredefinedTemplates = this.fetchPredefinedTemplates.bind(this);
+
+    this.onChangeTemplateStore = this.onChangeTemplateStore.bind(this);
+    this.onChangeContent = this.onChangeContent.bind(this);
+    this.applyTemplate = this.applyTemplate.bind(this);
+    this.updateTextTemplates = this.updateTextTemplates.bind(this);
+
+    this.quillOnChange = this.quillOnChange.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateStore.listen(this.onChangeTemplateStore);
+
+    TextTemplateActions.fetchPredefinedTemplateNames();
+
+    const { template } = this.props;
+    const namesToFetch = Object.values(template).flat();
+    this.fetchPredefinedTemplates(namesToFetch);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { template } = this.props;
+    const namesToFetch = Object.values(template).flat();
+
+    if (!this.state.updateTemplate && Object.keys(template).length !== 0) {
+      // this.fetchPredefinedTemplates(namesToFetch);
+      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        updateTemplate: true
+      });
+    } else if (this.props.template !== prevProps.template && this.state.updateTemplate) {
+      const prevnamesToFetch = Object.values(prevProps.template).flat();
+
+      if (prevnamesToFetch.length !== namesToFetch.length) {
+        // this.fetchPredefinedTemplates(namesToFetch);
+        TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    TextTemplateStore.unlisten(this.onChangeTemplateStore);
+  }
+
+  onChangeTemplateStore(state) {
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = state;
+    const { fetchedNames } = this.state;
+    const fetchedTemplates = fetchedPredefinedTemplates.toJS();
+
+    const templateStoreFetched = Object.keys(fetchedTemplates);
+    const fetched = [...new Set(fetchedNames.concat(templateStoreFetched))];
+    this.setState({
+      fetchedNames: fetched,
+      predefinedTemplateNames: predefinedTemplateNames.toJS(),
+      fetchedPredefinedTemplates: fetchedTemplates
+    });
+  }
+
+  onChangeContent(quillEditor) {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(quillEditor.getContents());
+    }
+  }
+
+  fetchPredefinedTemplates(names) {
+    if (!names || names.length === 0) return;
+
+    const { fetchedNames } = this.state;
+    const namesToFetch = names.filter(n => !fetchedNames.includes(n));
+    if (namesToFetch.length === 0) return;
+
+    const fetched = [...new Set(fetchedNames.concat(names))];
+    this.setState({ fetchedNames: fetched }, () => {
+      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
+    });
+  }
+
+  quillOnChange(content, delta, source, editor) {
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    this.onChangeContent(editor);
+  }
+
+  applyTemplate(macro) {
+    const check = ('ops' in macro) && Array.isArray(macro.ops);
+    if (!check) return;
+
+    if (this.reactQuillRef.current == null) {
+      return;
+    }
+
+    const quill = this.reactQuillRef.current.getEditor();
+    const range = quill.getSelection();
+    if (!range) return;
+
+    let contents = quill.getContents();
+    let elementOps = macro.ops;
+    const insertDelta = new Delta(elementOps);
+    if (range.index > 0) {
+      elementOps = [{ retain: range.index }].concat(elementOps);
+    }
+    const macroDelta = new Delta(elementOps);
+    contents = contents.compose(macroDelta);
+    quill.setContents(contents);
+    range.length = 0;
+    range.index += insertDelta.length();
+    quill.setSelection(range);
+
+    this.onChangeContent(quill);
+  }
+
+  updateTextTemplates(template) {
+    const { updateTextTemplates } = this.props;
+    updateTextTemplates(template);
+  }
+
+  render() {
+    const { predefinedTemplateNames, fetchedPredefinedTemplates } = this.state;
+    const { template, readOnly, value, reactQuillRef } = this.props;
+    this.reactQuillRef = reactQuillRef;
+
+    const templateCreatorPopover = (
+      <Popover
+        id="popover-positioned-top"
+        title="Custom toolbar"
+        className="analyses-template-creator"
+      >
+        <ToolbarTemplateCreator
+          template={template}
+          templateOptions={predefinedTemplateNames}
+          updateTextTemplates={this.updateTextTemplates}
+        />
+      </Popover>
+    );
+
+    return (
+      <DynamicToolbarEditor
+        theme="snow"
+        formats={toolbarOptions}
+        style={{ height: '100%' }}
+        ref={this.reactQuillRef}
+        onChange={this.quillOnChange}
+        value={value}
+        readOnly={readOnly}
+      >
+        <BaseToolbar />
+        <TextTemplateToolbar
+          template={template}
+          predefinedTemplates={fetchedPredefinedTemplates}
+          applyTemplate={this.applyTemplate}
+        />
+        <OverlayTrigger
+          trigger="click"
+          placement="top"
+          rootClose
+          overlay={templateCreatorPopover}
+          onHide={this.onCloseTemplateCreator}
+        >
+          <span className="ql-formats">
+            <button>
+              <span className="fa fa-cog" />
+            </button>
+          </span>
+        </OverlayTrigger>
+      </DynamicToolbarEditor>
+    );
+  }
+}
+
+ReactionDescriptionEditor.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  template: PropTypes.object,
+  value: PropTypes.object,
+  /* eslint-enable react/forbid-prop-types */
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func,
+  updateTextTemplates: PropTypes.func,
+  reactQuillRef: PropTypes.object
+};
+
+ReactionDescriptionEditor.defaultProps = {
+  readOnly: false,
+  template: {},
+  value: {},
+  onChange: null,
+  updateTextTemplates: null,
+  reactQuillRef: {}
+};
diff --git a/app/packs/src/components/ReactionDetails.js b/app/packs/src/components/ReactionDetails.js
new file mode 100644
index 000000000..e0aa6da91
--- /dev/null
+++ b/app/packs/src/components/ReactionDetails.js
@@ -0,0 +1,736 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Col, Panel, ListGroupItem, ButtonToolbar, Button,
+  Tabs, Tab, OverlayTrigger, Tooltip,
+  Row, Alert, Label
+} from 'react-bootstrap';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
+import { findIndex, cloneDeep } from 'lodash';
+import uuid from 'uuid';
+import ElementCollectionLabels from './ElementCollectionLabels';
+import ElementAnalysesLabels from './ElementAnalysesLabels';
+import ElementActions from './actions/ElementActions';
+import DetailActions from './actions/DetailActions';
+import LoadingActions from './actions/LoadingActions';
+import RepositoryActions from './actions/RepositoryActions';
+import ReactionDetailsLiteratures from './DetailsTabLiteratures';
+import ReactionDetailsContainers from './ReactionDetailsContainers';
+import SampleDetailsContainers from './SampleDetailsContainers';
+import ReactionDetailsScheme from './ReactionDetailsScheme';
+import ReactionDetailsProperties from './ReactionDetailsProperties';
+import GreenChemistry from './green_chem/GreenChemistry';
+import Utils from './utils/Functions';
+import PrintCodeButton from './common/PrintCodeButton';
+import XTabs from './extra/ReactionDetailsXTabs';
+import UIStore from './stores/UIStore';
+import UserStore from './stores/UserStore';
+import UIActions from './actions/UIActions';
+import { setReactionByType } from './ReactionDetailsShare';
+import { sampleShowOrNew } from './routesUtils';
+import ReactionSvgFetcher from './fetchers/ReactionSvgFetcher';
+import ConfirmClose from './common/ConfirmClose';
+import { rfValueFormat } from './utils/ElementUtils';
+import ExportSamplesBtn from './ExportSamplesBtn';
+import CopyElementModal from './common/CopyElementModal';
+import { permitOn } from './common/uis';
+import { addSegmentTabs } from './generic/SegmentDetails';
+import Immutable from 'immutable';
+import ElementDetailSortTab from './ElementDetailSortTab';
+import ScifinderSearch from './scifinder/ScifinderSearch';
+
+import PublishReactionModal from './PublishReactionModal';
+import {
+  PublishedTag,
+  LabelPublication,
+  PublishBtnReaction,
+  ReviewPublishBtn,
+  validateMolecule,
+  validateYield
+} from './PublishCommon';
+import ReactionDetailsRepoComment from './ReactionDetailsRepoComment';
+import { contentToText } from './utils/quillFormat';
+import HelpInfo from './common/HelpInfo';
+
+export default class ReactionDetails extends Component {
+  constructor(props) {
+    super(props);
+
+    const { reaction } = props;
+    const publication = reaction.tag && reaction.tag.taggable_data
+      && reaction.tag.taggable_data.publication
+    this.state = {
+      reaction,
+      literatures: reaction.literatures,
+      activeTab: UIStore.getState().reaction.activeTab,
+      visible: Immutable.List(),
+      sfn: UIStore.getState().hasSfn,
+      showPublishReactionModal: false,
+      commentScreen: false
+    };
+
+    // remarked because of #466 reaction load image issue (Paggy 12.07.2018)
+    // if(reaction.hasMaterials()) {
+    //   this.updateReactionSvg();
+    // }
+
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.handleReactionChange = this.handleReactionChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
+    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
+    this.handlePublishReactionModal = this.handlePublishReactionModal.bind(this);
+    this.forcePublishRefreshClose = this.forcePublishRefreshClose.bind(this);
+    this.handleCommentScreen = this.handleCommentScreen.bind(this);
+    this.handleFullScreen = this.handleFullScreen.bind(this);
+    this.handleValidation = this.handleValidation.bind(this);
+    this.handleResetValidation = this.handleResetValidation.bind(this);
+    this.handleModalAnalysesCheck = this.handleModalAnalysesCheck.bind(this);
+    if(!reaction.reaction_svg_file) {
+      this.updateReactionSvg();
+    }
+  }
+
+  onUIStoreChange(state) {
+    if (state.reaction.activeTab != this.state.activeTab){
+      this.setState({
+        activeTab: state.reaction.activeTab
+      })
+    }
+  }
+
+
+  componentDidMount() {
+    UIStore.listen(this.onUIStoreChange)
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { reaction } = this.state;
+    const nextReaction = nextProps.reaction;
+
+    if (nextReaction.id !== reaction.id ||
+        nextReaction.can_publish !== reaction.can_publish ||
+        nextReaction.can_update !== reaction.can_update ||
+        nextReaction.updated_at !== reaction.updated_at ||
+        nextReaction.reaction_svg_file !== reaction.reaction_svg_file ||
+        nextReaction.changed || nextReaction.editedSample) {
+      this.setState(prevState => ({ ...prevState, reaction: nextReaction }));
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const nextReaction = nextProps.reaction;
+    const nextActiveTab = nextState.activeTab;
+    const nextVisible = nextState.visible;
+    const { reaction, activeTab, visible } = this.state;
+    return (
+      nextReaction.can_publish !== reaction.can_publish ||
+      nextReaction.can_update !== reaction.can_update ||
+      nextReaction.id !== reaction.id ||
+      nextReaction.updated_at !== reaction.updated_at ||
+      nextReaction.reaction_svg_file !== reaction.reaction_svg_file ||
+      !!nextReaction.changed || !!nextReaction.editedSample ||
+      nextActiveTab !== activeTab || nextVisible !== visible ||
+      nextState.commentScreen !== this.state.commentScreen ||
+      nextProps.fullScreen !== this.props.fullScreen ||
+      ((nextState.reaction.validates || false)) ||
+      nextState.showPublishReactionModal !== this.state.showPublishReactionModal
+    );
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIStoreChange);
+  }
+
+  forcePublishRefreshClose(reaction, show) {
+    this.setState({ reaction, showPublishReactionModal: show });
+    this.forceUpdate();
+  }
+
+  handleModalAnalysesCheck(reaction) {
+    this.setState({ reaction });
+  }
+
+  handleValidation(element) {
+    let validates = [];
+    const reaction = element;
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+    reaction.publication.taggable_data.scheme_only === true) || false;
+    if ((reaction.rxno || '') === '' && schemeOnly === false) {
+      validates.push({ name: 'reaction_type', value: false, message: 'Reaction Type is missing.' });
+    }
+    const duration = (reaction.duration || '').split(' ').shift();
+    if (duration === '' || (duration === reaction.duration)) {
+      validates.push({ name: 'duration', value: false, message: 'No duration' });
+    }
+    const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+    if (!hasTemperature) {
+      validates.push({ name: 'temperature', value: false, message: 'Temperature is missing' });
+    }
+    const desc = contentToText(reaction.description).trim() || '';
+    if (desc === '' && schemeOnly === false) {
+      validates.push({ name: 'description', value: false, message: 'Description is missing' });
+    }
+
+    if (schemeOnly === false) {
+      let hasAnalyses = (reaction.container.children.filter(c => c.container_type === 'analyses')[0].children.length > 0);
+      const startingMaterisls = (reaction.starting_materials || []);
+      if (startingMaterisls.length < 1) {
+        validates.push({ name: 'start_material', value: false, message: 'Start material is missing' });
+      }
+      startingMaterisls.forEach((st) => {
+        if (!st.amount || !st.amount.value) {
+          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
+        }
+      });
+      const products = (reaction.products || []);
+      if (products.length < 1) {
+        validates.push({ name: 'product', value: false, message: 'Product is missing' });
+      }
+      products.forEach((pt) => {
+        if (pt.analysisArray().length > 0) {
+          hasAnalyses = true;
+        }
+        const validatePt = validateMolecule(pt);
+        if (validatePt.length > 0) {
+          validates = validates.concat(validatePt);
+        }
+      });
+      if (!hasAnalyses) {
+        validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
+      }
+    }
+    if (validates.length > 0) {
+      reaction.validates = validates;
+      this.setState({ reaction });
+    } else {
+      LoadingActions.start();
+      RepositoryActions.reviewPublish(element);
+    }
+  }
+
+  handleResetValidation() {
+    const { reaction } = this.state;
+    reaction.validates = [];
+    this.setState({ reaction });
+  }
+
+  handleCommentScreen() {
+    this.setState({ commentScreen: true });
+    this.props.toggleCommentScreen(true);
+  }
+
+  handleFullScreen() {
+    this.setState({ commentScreen: false });
+    this.props.toggleFullScreen();
+  }
+
+  handlePublishReactionModal(show) {
+    this.setState({ showPublishReactionModal: show });
+  }
+
+  updateReactionSvg() {
+    const {reaction} = this.state;
+    const materialsSvgPaths = {
+      starting_materials: reaction.starting_materials.map(material => material.svgPath),
+      reactants: reaction.reactants.map(material => material.svgPath),
+      products: reaction.products.map(material => [material.svgPath, material.equivalent])
+    };
+
+    const solvents = reaction.solvents.map((s) => {
+      const name = s.preferred_label;
+      return name;
+    }).filter(s => s);
+  }
+
+  onUIStoreChange(state) {
+    if (state.reaction.activeTab != this.state.activeTab) {
+      this.setState({
+        activeTab: state.reaction.activeTab
+      });
+    }
+  }
+
+  handleSubmit(closeView = false) {
+    LoadingActions.start();
+
+    const { reaction } = this.state;
+    if (reaction && reaction.isNew) {
+      ElementActions.createReaction(reaction);
+    } else {
+      ElementActions.updateReaction(reaction, closeView);
+    }
+
+    if (reaction.is_new || closeView) {
+      DetailActions.close(reaction, true);
+    }
+  }
+
+  reactionIsValid() {
+    const {reaction} = this.state;
+    return reaction.hasMaterials() && reaction.SMGroupValid();
+  }
+
+  handleReactionChange(reaction, options={}) {
+    reaction.changed = true;
+    if(options.schemaChanged) {
+      this.setState({ reaction }, () => this.updateReactionSvg());
+    } else {
+      this.setState({ reaction });
+    }
+  }
+
+  handleInputChange(type, event) {
+    let value;
+    if (type === 'temperatureUnit' || type === 'temperatureData' ||
+      type === 'description' || type === 'role' || type === 'observation' || type === 'durationUnit' || type === 'duration' || type === 'rxno') {
+      value = event;
+    } else if (type === 'rfValue') {
+      value = rfValueFormat(event.target.value) || '';
+    } else {
+      value = event.target.value;
+    }
+
+    const { reaction } = this.state;
+
+    const { newReaction, options } = setReactionByType(reaction, type, value);
+    this.handleReactionChange(newReaction, options);
+  }
+
+  handleProductClick(product) {
+    const uri = Aviator.getCurrentURI();
+    const uriArray = uri.split(/\//);
+    Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${product.id}`, { silent: true });
+    sampleShowOrNew({ params: { sampleID: product.id} });
+  }
+
+  handleProductChange(product, cb) {
+    let {reaction} = this.state
+
+    reaction.updateMaterial(product)
+    reaction.changed = true
+
+    this.setState({ reaction }, cb)
+  }
+
+  productLink(product) {
+    return (
+      <span>
+        Analysis:
+        &nbsp;
+        <span className="pseudo-link"
+           onClick={() => this.handleProductClick(product)}
+           style={{cursor: 'pointer'}}
+           title="Open sample window">
+          <i className="icon-sample" />&nbsp;{product.title()}
+        </span>
+      </span>
+    )
+  }
+
+  productData(reaction) {
+    const { products } = this.state.reaction;
+
+    const tabs = products.map((product, key) => {
+      const title = this.productLink(product);
+      const setState = () => this.handleProductChange(product);
+      const handleSampleChanged = (_, cb) => this.handleProductChange(product, cb);
+      return (
+        <Tab
+          key={product.id}
+          eventKey={key}
+          title={title}
+        >
+          <SampleDetailsContainers
+            sample={product}
+            setState={setState}
+            handleSampleChanged={handleSampleChanged}
+            handleSubmit={this.handleSubmit}
+            style={{ marginTop: 10 }}
+            publish={reaction.is_published}
+          />
+        </Tab>
+      );
+    });
+    const reactionTab = <span>Analysis:&nbsp;<i className="icon-reaction" />&nbsp;{reaction.short_label}</span>;
+    return (
+      <Tabs
+        id="data-detail-tab"
+        style={{ marginTop: '10px' }}
+        unmountOnExit
+      >
+        {tabs}
+        <Tab eventKey={4.1} title={reactionTab}>
+          <ListGroupItem style={{ paddingBottom: 20 }}>
+            <ReactionDetailsContainers
+              reaction={reaction}
+              parent={this}
+              readOnly={!permitOn(reaction)}
+              handleSubmit={this.handleSubmit}
+            />
+          </ListGroupItem>
+        </Tab>
+      </Tabs>
+    );
+  }
+
+  extraTab(ind) {
+    const reaction = this.state.reaction || {};
+    const num = ind;
+    const NoName = XTabs["content"+num];
+    const TabName = XTabs["title"+num];
+    return (
+      <Tab eventKey={ind + 5} title={TabName} key={`sampleDetailsTab${ind + 3}`} >
+        <ListGroupItem style={{ paddingBottom: 20 }}>
+          <NoName reaction={reaction} />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  reactionSVG(reaction) {
+    if(!reaction.svgPath) {
+      return false;
+    } else {
+      const svgProps = reaction.svgPath.substr(reaction.svgPath.length - 4) === '.svg' ? { svgPath: reaction.svgPath } : { svg: reaction.reaction_svg_file }
+      return (
+        <SvgFileZoomPan
+          duration={300}
+          resize={true}
+          {...svgProps}
+        />)
+    }
+  }
+
+  reactionHeader(reaction) {
+    let hasChanged = reaction.changed ? '' : 'none'
+    const titleTooltip = `Created at: ${reaction.created_at} \n Updated at: ${reaction.updated_at}`;
+
+    const { currentCollection } = UIStore.getState();
+    const defCol = currentCollection && currentCollection.is_shared === false &&
+      currentCollection.is_locked === false && currentCollection.label !== 'All' ? currentCollection.id : null;
+
+
+    const copyBtn = (reaction.can_copy === true && !reaction.isNew) ? (
+      <CopyElementModal
+        element={reaction}
+        defCol={defCol}
+      />
+    ) : null;
+
+    const colLabel = reaction.isNew ? null : (
+      <ElementCollectionLabels element={reaction} key={reaction.id} placement="right" />
+    );
+    if (reaction.is_published) {
+      hasChanged = 'none';
+    }
+
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+      reaction.publication.taggable_data.scheme_only === true) || false;
+
+
+
+    return (
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
+          <span><i className="icon-reaction"/>&nbsp;{reaction.title()}</span>
+        </OverlayTrigger>
+        <ConfirmClose el={reaction} forceClose={reaction.is_published} />
+        <OverlayTrigger placement="bottom"
+            overlay={<Tooltip id="saveReaction">Save and Close Reaction</Tooltip>}>
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit(true)}
+            disabled={!permitOn(reaction) || !this.reactionIsValid() || reaction.isNew}
+            style={{ display: hasChanged }}
+          >
+            <i className="fa fa-floppy-o" />
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="bottom"
+            overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}>
+          <Button bsStyle="warning" bsSize="xsmall" className="button-right"
+              onClick={() => this.handleSubmit()}
+              disabled={!permitOn(reaction) || !this.reactionIsValid()}
+              style={{display: hasChanged}} >
+            <i className="fa fa-floppy-o "></i>
+          </Button>
+        </OverlayTrigger>
+        {copyBtn}
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={this.handleFullScreen}
+          >
+            <i className="fa fa-expand" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="generateReport">Generate Report</Tooltip>}
+        >
+          <Button
+            bsStyle="success"
+            bsSize="xsmall"
+            className="button-right"
+            disabled={reaction.changed || reaction.isNew}
+            title={(reaction.changed || reaction.isNew) ?
+              "Report can be generated after reaction is saved."
+              : "Generate report for this reaction"}
+            onClick={() => Utils.downloadFile({
+              contents: "/api/v1/reports/docx?id=" + reaction.id,
+              name: reaction.name
+            })}
+          >
+            <i className="fa fa-cogs" />
+          </Button>
+        </OverlayTrigger>
+        <div style={{display: "inline-block", marginLeft: "10px"}}>
+          {colLabel}
+          <ElementAnalysesLabels element={reaction} key={reaction.id+"_analyses"}/>
+          { schemeOnly ? <span>&nbsp;<Label>scheme only</Label></span> : '' }
+        </div>
+        <PublishBtnReaction
+          reaction={reaction}
+          showModal={this.handlePublishReactionModal}
+        />
+        <ReviewPublishBtn element={reaction} showComment={this.handleCommentScreen} validation={this.handleValidation} />
+        <div style={{ display: "inline-block", marginLeft: "10px" }}>
+          <PublishedTag element={reaction} />
+          <LabelPublication element={reaction} />
+        </div>
+      </div>
+    );
+  }
+
+  handleSelect(key) {
+    UIActions.selectTab({tabKey: key, type: 'reaction'});
+    this.setState({
+      activeTab: key
+    })
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({ visible })
+  }
+
+  updateReactionSvg() {
+    const { reaction } = this.state;
+    const materialsSvgPaths = {
+      starting_materials: reaction.starting_materials.map(material => material.svgPath),
+      reactants: reaction.reactants.map(material => material.svgPath),
+      products: reaction.products.map(material => [material.svgPath, material.equivalent])
+    };
+
+    const solvents = reaction.solvents.map((s) => {
+      const name = s.preferred_label;
+      return name;
+    }).filter(s => s);
+
+    let temperature = reaction.temperature_display;
+    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature)) {
+      temperature = `${temperature} ${reaction.temperature.valueUnit}`;
+    }
+
+    ReactionSvgFetcher.fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, reaction.duration, reaction.conditions).then((result) => {
+      reaction.reaction_svg_file = result.reaction_svg;
+      this.setState(reaction);
+    });
+  }
+
+  handleSegmentsChange(se) {
+    const { reaction } = this.state;
+    const { segments } = reaction;
+    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
+    reaction.segments = segments;
+    reaction.changed = true;
+    this.setState({ reaction });
+  }
+
+  render() {
+    const { reaction } = this.state;
+    const { visible } = this.state;
+    const tabContentsMap = {
+      scheme: (
+        <Tab eventKey="scheme" title="Scheme"  key={`scheme_${reaction.id}`}>
+          <ReactionDetailsScheme
+            reaction={reaction}
+            onReactionChange={(reaction, options) => this.handleReactionChange(reaction, options)}
+            onInputChange={(type, event) => this.handleInputChange(type, event)}
+            />
+        </Tab>
+      ),
+      properties: (
+        <Tab eventKey="properties" title="Properties" key={`properties_${reaction.id}`}>
+          <ReactionDetailsProperties
+            reaction={reaction}
+            onReactionChange={r => this.handleReactionChange(r)}
+            onInputChange={(type, event) => this.handleInputChange(type, event)}
+            key={reaction.checksum}
+          />
+        </Tab>
+      ),
+      references: (
+        <Tab eventKey="references" title="References" key={`references_${reaction.id}`}>
+          <ReactionDetailsLiteratures
+            element={reaction}
+            literatures={reaction.isNew === true ? reaction.literatures : null}
+            onElementChange={r => this.handleReactionChange(r)}
+          />
+        </Tab>
+      ),
+      analyses: (
+        <Tab eventKey="analyses" title="Analyses" key={`analyses_${reaction.id}`}>
+          {this.productData(reaction)}
+        </Tab>
+      ),
+/*
+      green_chemistry: (
+        <Tab eventKey="green_chemistry" title="Green Chemistry" key={`green_chem_${reaction.id}`}>
+          <GreenChemistry
+            reaction={reaction}
+            onReactionChange={this.handleReactionChange}
+          />
+        </Tab>
+      )
+*/
+    };
+
+    const tabTitlesMap = {
+      green_chemistry: 'Green Chemistry'
+    }
+
+    for (let j = 0; j < XTabs.count; j += 1) {
+      if (XTabs[`on${j}`](reaction)) {
+        const NoName = XTabs[`content${j}`];
+        tabContentsMap[`xtab_${j}`] = (
+          <Tab eventKey={`xtab_${j}`} key={`xtab_${j}`} title={XTabs[`title${j}`]} >
+            <ListGroupItem style={{ paddingBottom: 20 }} >
+              <NoName reaction={reaction} />
+            </ListGroupItem>
+          </Tab>
+        );
+        tabTitlesMap[`xtab_${j}`] = XTabs[`title${j}`];
+      }
+    }
+
+    addSegmentTabs(reaction, this.handleSegmentsChange, tabContentsMap);
+    const stb = [];
+    const tabContents = [];
+    visible.forEach((value) => {
+      const tabContent = tabContentsMap[value];
+      if (tabContent) { tabContents.push(tabContent); }
+      stb.push(value);
+    });
+
+    let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+    segmentKlasses =
+      segmentKlasses.filter(s => s.element_klass && s.element_klass.name === reaction.type);
+    segmentKlasses.forEach((klass) => {
+      const visIdx = visible.indexOf(klass.label);
+      const idx = findIndex(reaction.segments, o => o.segment_klass_id === klass.id);
+      if (visIdx < 0 && idx > -1) {
+        const tabContent = tabContentsMap[klass.label];
+        if (tabContent) { tabContents.push(tabContent); }
+        stb.push(klass.label);
+      }
+    });
+
+    const { showPublishReactionModal } = this.state;
+    const submitLabel = (reaction && reaction.isNew) ? 'Create' : 'Save';
+    const exportButton = (reaction && reaction.isNew) ? null : <ExportSamplesBtn type="reaction" id={reaction.id} />;
+
+    const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
+      this.state.activeTab) || visible[0];
+    const panelStylePre = reaction.isPendingToSave ? 'info' : 'primary';
+    const publication = reaction.tag && reaction.tag.taggable_data &&
+      reaction.tag.taggable_data.publication;
+    const panelStyle = publication ? 'success' : panelStylePre;
+
+    const validateObjs = reaction.validates && reaction.validates.filter(v => v.value === false);
+    const validationBlock = (validateObjs && validateObjs.length > 0) ? (
+      <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
+        <strong>Submission Alert</strong>&nbsp;&nbsp;
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
+        <br />
+        {
+          validateObjs.map(m => (
+            <div key={uuid.v1()}>{m.message}</div>
+          ))
+        }
+      </Alert>
+    ) : null;
+    const schemeTitle = <span>Scheme&nbsp;<HelpInfo source={reaction.is_published ? 'x' : 'scheme'} place="right" /></span>;
+    return (
+      <Panel
+        className="element-panel-detail"
+        bsStyle={panelStyle}
+      >
+        <Panel.Heading>{this.reactionHeader(reaction)}{validationBlock}</Panel.Heading>
+        <Panel.Body>
+          <Row><Col md={this.props.fullScreen && this.state.commentScreen ? 6 : 12}>
+            <div className={this.props.fullScreen ? 'full' : 'base'}>
+          {this.reactionSVG(reaction)}
+            <PublishReactionModal
+                show={showPublishReactionModal}
+                reaction={cloneDeep(reaction)}
+                onHide={this.handlePublishReactionModal}
+                onPublishRefreshClose={this.forcePublishRefreshClose}
+                onHandleAnalysesCheck={this.handleModalAnalysesCheck}
+            />
+          <ElementDetailSortTab
+            type="reaction"
+            availableTabs={Object.keys(tabContentsMap)}
+            tabTitles={tabTitlesMap}
+            onTabPositionChanged={this.onTabPositionChanged}
+          />
+          {this.state.sfn ? <ScifinderSearch el={reaction} /> : null}
+          <Tabs activeKey={activeTab} onSelect={this.handleSelect.bind(this)} id="reaction-detail-tab">
+            {tabContents}
+          </Tabs>
+          <hr />
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(reaction)}>
+              Close
+            </Button>
+            <Button id="submit-reaction-btn" bsStyle="warning" onClick={() => this.handleSubmit()} disabled={!permitOn(reaction) || !this.reactionIsValid()}>
+              {submitLabel}
+            </Button>
+            {exportButton}
+          </ButtonToolbar>
+            </div>
+          </Col>
+            {
+              this.props.fullScreen && this.state.commentScreen ?
+                <Col md={6}>
+                  <div className={this.props.fullScreen ? 'full' : 'base'}>
+                    <ReactionDetailsRepoComment reactionId={reaction.id} />
+                  </div>
+                </Col>
+                :
+                <div />
+            }
+          </Row>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+ReactionDetails.propTypes = {
+  reaction: PropTypes.object,
+  toggleFullScreen: PropTypes.func,
+  toggleCommentScreen: PropTypes.func.isRequired,
+  fullScreen: PropTypes.bool.isRequired,
+  validates: PropTypes.array
+}
diff --git a/app/packs/src/components/ReactionDetailsContainers.js b/app/packs/src/components/ReactionDetailsContainers.js
new file mode 100644
index 000000000..94e5d0435
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsContainers.js
@@ -0,0 +1,470 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  PanelGroup,
+  Panel,
+  Button,
+  OverlayTrigger, SplitButton, ButtonGroup, MenuItem, Tooltip
+} from 'react-bootstrap';
+import Container from 'src/models/Container';
+import ContainerComponent from 'src/components/container/ContainerComponent';
+import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import QuillViewer from 'src/components/QuillViewer';
+import ImageModal from 'src/components/common/ImageModal';
+import { hNmrCount, cNmrCount, instrumentText } from 'src/utilities/ElementUtils';
+import { contentToText } from 'src/utilities/quillFormat';
+import { chmoConversions } from 'src/components/OlsComponent';
+import { previewContainerImage } from 'src/utilities/imageHelper';
+import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import SpectraActions from 'src/stores/alt/actions/SpectraActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
+import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
+
+import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
+
+const nmrMsg = (reaction, container) => {
+  const ols = container.extended_metadata?.kind?.split('|')[0].trim();
+  if (ols !== chmoConversions.nmr_1h?.termId && ols !== chmoConversions?.nmr_13c?.termId) {
+    return '';
+  }
+  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
+
+  if ((container.extended_metadata.kind || '').split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+    const msg = hNmrCount(nmrStr);
+    return (<div style={{ display: 'inline', color: 'black' }}>&nbsp;(<sup>1</sup>H: {msg})</div>);
+  } else if ((container.extended_metadata.kind || '').split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+    const msg = cNmrCount(nmrStr);
+    return (<div style={{ display: 'inline', color: 'black' }}>&nbsp;(<sup>13</sup>C: {msg})</div>);
+  }
+};
+
+const SpectraEditorBtn = ({
+  element, spcInfos, hasJcamp, hasChemSpectra,
+  toggleSpectraModal, confirmRegenerate,
+  toggleNMRDisplayerModal, hasNMRium,
+}) => (
+  <span>
+    <OverlayTrigger
+      placement="bottom"
+      delayShow={500}
+      overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
+    >{spcInfos.length > 0 ? (
+      <ButtonGroup className="button-right">
+        <SplitButton
+          id="spectra-editor-split-button"
+          pullRight
+          bsStyle="info"
+          bsSize="xsmall"
+          title={<i className="fa fa-area-chart" />}
+          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+          onClick={toggleSpectraModal}
+          disabled={!(spcInfos.length > 0) || !hasChemSpectra}
+        >
+          <MenuItem
+            id="regenerate-spectra"
+            key="regenerate-spectra"
+            onSelect={(eventKey, event) => {
+              event.stopPropagation();
+              confirmRegenerate(event);
+            }}
+            disabled={!hasJcamp || !element.can_update}
+          >
+            <i className="fa fa-refresh" /> Reprocess
+          </MenuItem>
+        </SplitButton>
+      </ButtonGroup>
+      ) : (
+        <Button
+          bsStyle="warning"
+          bsSize="xsmall"
+          className="button-right"
+          onClick={confirmRegenerate}
+          disabled={!hasJcamp || !element.can_update || !hasChemSpectra}
+        >
+          <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
+      </Button>
+    )}
+    </OverlayTrigger>
+    {
+      hasNMRium ? (
+        <OverlayTrigger
+          placement="top"
+          delayShow={500}
+          overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
+        >
+          <ButtonGroup className="button-right">
+            <Button
+              id="spectra-editor-split-button"
+              pullRight
+              bsStyle="info"
+              bsSize="xsmall"
+              onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+              onClick={toggleNMRDisplayerModal}
+              disabled={!hasJcamp || !element.can_update}
+            >
+              <i className="fa fa-bar-chart"/>
+            </Button>
+          </ButtonGroup>
+        </OverlayTrigger>
+      ) : null
+    }
+  </span>
+);
+
+SpectraEditorBtn.propTypes = {
+  element: PropTypes.object,
+  hasJcamp: PropTypes.bool,
+  spcInfos: PropTypes.array,
+  hasChemSpectra: PropTypes.bool,
+  toggleSpectraModal: PropTypes.func.isRequired,
+  confirmRegenerate: PropTypes.func.isRequired,
+  toggleNMRDisplayerModal: PropTypes.func.isRequired,
+  hasNMRium: PropTypes.bool,
+};
+
+SpectraEditorBtn.defaultProps = {
+  hasJcamp: false,
+  spcInfos: [],
+  element: {},
+  hasChemSpectra: false,
+  hasEditedJcamp: false,
+  hasNMRium: false,
+};
+
+export default class ReactionDetailsContainers extends Component {
+  constructor(props) {
+    super();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      activeContainer: 0
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.handleUndo = this.handleUndo.bind(this);
+    this.handleOnClickRemove = this.handleOnClickRemove.bind(this);
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+    this.handleSpChange = this.handleSpChange.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateActions.fetchTextTemplates('reaction');
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  handleChange(container) {
+    const { reaction } = this.state;
+
+    this.props.parent.handleReactionChange(reaction);
+  }
+
+  handleSpChange(reaction, cb) {
+    this.props.parent.handleReactionChange(reaction);
+    cb();
+  }
+
+  handleUndo(container) {
+    const { reaction } = this.state;
+    container.is_deleted = false;
+    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
+  }
+
+  handleAdd() {
+    const { reaction } = this.state;
+    const container = Container.buildEmpty();
+    container.container_type = 'analysis';
+    container.extended_metadata.content = { ops: [{ insert: '' }] };
+
+    if (reaction.container.children.length === 0) {
+      const analyses = Container.buildEmpty();
+      analyses.container_type = 'analyses';
+      reaction.container.children.push(analyses);
+    }
+
+    reaction.container.children.filter(element => (
+      ~element.container_type.indexOf('analyses')
+    ))[0].children.push(container);
+
+    const newKey = reaction.container.children.filter(element => (
+      ~element.container_type.indexOf('analyses')
+    ))[0].children.length - 1;
+
+    this.handleAccordionOpen(newKey);
+    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
+  }
+
+  handleOnClickRemove(container) {
+    if (confirm('Delete the container?')) {
+      this.handleRemove(container);
+    }
+  }
+
+  headerBtnGroup(container, reaction, readOnly) {
+    const jcampIds = JcampIds(container);
+    const hasJcamp = jcampIds.orig.length > 0;
+    const confirmRegenerate = (e) => {
+      e.stopPropagation();
+      if (confirm('Regenerate spectra?')) {
+        LoadingActions.start();
+        SpectraActions.Regenerate(jcampIds, this.handleChange);
+      }
+    };
+
+    const spcInfos = BuildSpcInfos(reaction, container);
+    const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
+    const toggleSpectraModal = (e) => {
+      e.stopPropagation();
+      SpectraActions.ToggleModal();
+      SpectraActions.LoadSpectra.defer(spcInfos);
+    };
+
+    //process open NMRium
+    const toggleNMRDisplayerModal = (e) => {
+      const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(reaction, container);
+      e.stopPropagation();
+      SpectraActions.ToggleModalNMRDisplayer();
+      SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
+    }
+
+    const { chmos } = UserStore.getState();
+    const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
+
+    return (
+      <div className="upper-btn">
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          className="button-right"
+          disabled={readOnly}
+          onClick={() => this.handleOnClickRemove(container)}
+        >
+          <i className="fa fa-trash" />
+        </Button>
+        <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
+        <SpectraEditorBtn
+          element={reaction}
+          hasJcamp={hasJcamp}
+          spcInfos={spcInfos}
+          hasChemSpectra={hasChemSpectra}
+          toggleSpectraModal={toggleSpectraModal}
+          confirmRegenerate={confirmRegenerate}
+          toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+          hasNMRium={hasNMRium}
+        />
+      </div>
+    );
+  };
+
+
+  handleRemove(container) {
+    const { reaction } = this.state;
+
+    container.is_deleted = true;
+    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({ activeContainer: key });
+  }
+
+  addButton() {
+    const { readOnly } = this.props;
+    if (!readOnly) {
+      return (
+        <Button
+          className="button-right"
+          bsSize="xsmall"
+          bsStyle="success"
+          onClick={this.handleAdd}
+        >
+          Add analysis
+        </Button>
+      );
+    }
+
+    return (<span />);
+  }
+
+  render() {
+    const { reaction, activeContainer } = this.state;
+    const { readOnly } = this.props;
+
+    const containerHeader = (container) => {
+      let kind = container.extended_metadata.kind || '';
+      kind = (kind.split('|')[1] || kind).trim();
+      const insText = instrumentText(container);
+      const previewImg = previewContainerImage(container);
+      const status = container.extended_metadata.status || '';
+      const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
+      const contentOneLine = {
+        ops: content.ops.map((x) => {
+          const c = Object.assign({}, x);
+          if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
+          return c;
+        }),
+      };
+      let hasPop = true;
+      let fetchNeeded = false;
+      let fetchId = 0;
+      if (previewImg.startsWith('data:image')) {
+        fetchNeeded = true;
+        fetchId = container.preview_img.id;
+      } else {
+        hasPop = false;
+      }
+
+      return (
+        <div className="analysis-header order" style={{ width: '100%' }}>
+          <div className="preview">
+            <ImageModal
+              hasPop={hasPop}
+              previewObject={{
+                src: previewImg
+              }}
+              popObject={{
+                title: container.name,
+                src: previewImg,
+                fetchNeeded,
+                fetchId
+              }}
+            />
+          </div>
+          <div className="abstract">
+            {
+              this.headerBtnGroup(container, reaction, readOnly)
+            }
+            <div className="lower-text">
+              <div className="main-title">{container.name}</div>
+              <div className="sub-title">Type: {kind}</div>
+              <div className="sub-title">Status: {status} {nmrMsg(reaction, container)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}</div>
+              <div className="desc sub-title">
+                <span style={{ float: 'left', marginRight: '5px' }}>
+                  Content:
+                </span>
+                <QuillViewer value={contentOneLine} />
+              </div>
+
+            </div>
+          </div>
+        </div>
+      )
+    };
+
+    const containerHeaderDeleted = (container) => {
+      const kind = container.extended_metadata.kind && container.extended_metadata.kind !== '';
+      const titleKind = kind ? (` - Type: ${(container.extended_metadata.kind.split('|')[1] || container.extended_metadata.kind).trim()}`) : '';
+
+      const status = container.extended_metadata.status && container.extended_metadata.status != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata.status) : '';
+
+      return (
+        <div style={{ width: '100%' }}>
+          <strike>
+            {container.name}
+            {titleKind}
+            {titleStatus}
+          </strike>
+          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
+            onClick={() => this.handleUndo(container)}>
+            <i className="fa fa-undo"></i>
+          </Button>
+        </div>
+      )
+    };
+
+    if (reaction.container != null && reaction.container.children) {
+      const analyses_container = reaction.container.children.filter(element => (
+        ~element.container_type.indexOf('analyses')
+      ));
+
+      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
+        return (
+          <div>
+            <div style={{ marginBottom: '10px' }}>
+              &nbsp;{this.addButton()}
+            </div>
+            <PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={activeContainer} onSelect={this.handleAccordionOpen} accordion>
+              {analyses_container[0].children.map((container, key) => {
+                if (container.is_deleted) {
+                  return (
+                    <Panel
+                      eventKey={key}
+                      key={`reaction_container_deleted_${container.id}`}
+                    >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                    </Panel>
+                  );
+                }
+
+                return (
+                  <Panel
+                    eventKey={key}
+                    key={`reaction_container_${container.id}`}
+                  >
+                    <Panel.Heading>
+                      <Panel.Title toggle>
+                        {containerHeader(container)}
+                      </Panel.Title>
+                    </Panel.Heading>
+                    <Panel.Body collapsible="true">
+                      <ContainerComponent
+                        disabled={readOnly}
+                        readOnly={readOnly}
+                        templateType="reaction"
+                        container={container}
+                        onChange={this.handleChange.bind(this, container)}
+                      />
+                      <ViewSpectra
+                        sample={reaction}
+                        handleSampleChanged={this.handleSpChange}
+                        handleSubmit={this.props.handleSubmit}
+                      />
+                      <NMRiumDisplayer
+                        sample={reaction}
+                        handleSampleChanged={this.handleSpChange}
+                        handleSubmit={this.props.handleSubmit}
+                      />
+                    </Panel.Body>
+                  </Panel>
+                );
+              })}
+            </PanelGroup>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          style={{ marginBottom: '10px' }}
+          className="noAnalyses-warning"
+        >
+          There are currently no Analyses.
+          {this.addButton()}
+        </div>
+      );
+    }
+
+    return (
+      <div className="noAnalyses-warning">
+        There are currently no Analyses.
+      </div>
+    );
+  }
+}
+
+ReactionDetailsContainers.propTypes = {
+  readOnly: PropTypes.bool,
+  parent: PropTypes.object,
+  handleSubmit: PropTypes.func
+};
diff --git a/app/packs/src/components/ReactionDetailsDuration.js b/app/packs/src/components/ReactionDetailsDuration.js
new file mode 100644
index 000000000..5ec30de36
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsDuration.js
@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Row, Col, FormGroup, ControlLabel, FormControl, Button,
+  InputGroup, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import 'moment-precise-range-plugin';
+import Clipboard from 'clipboard';
+import { permitOn } from './common/uis';
+import HelpInfo from '../components/common/HelpInfo';
+
+export default class ReactionDetailsDuration extends Component {
+  constructor(props) {
+    super(props);
+    props.reaction.convertDurationDisplay();
+    this.setCurrentTime = this.setCurrentTime.bind(this);
+    this.copyToDuration = this.copyToDuration.bind(this);
+    this.handleDurationChange = this.handleDurationChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.reaction) { return; }
+    nextProps.reaction.convertDurationDisplay();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  setCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const { reaction } = this.props;
+    const wrappedEvent = { target: { value: currentTime } };
+    this.props.onInputChange(type, wrappedEvent);
+    if (type === 'timestampStart' && (reaction.status === 'Planned' || !reaction.status)) {
+      this.props.onInputChange('status', { target: { value: 'Running' } });
+    } else if (type === 'timestampStop' && reaction.status === 'Running') {
+      this.props.onInputChange('status', { target: { value: 'Done' } });
+    }
+  }
+
+  changeDurationUnit() {
+    this.props.onInputChange('duration', { nextUnit: true });
+  }
+
+  copyToDuration() {
+    this.props.onInputChange('duration', { fromStartStop: true });
+  }
+
+  handleDurationChange(event) {
+    const nextValue = event.target.value && event.target.value.replace(',', '.');
+    if (!isNaN(nextValue) || nextValue === '') {
+      this.props.onInputChange('duration', { nextValue });
+    }
+  }
+
+  render() {
+    const { reaction } = this.props;
+    const durationCalc = reaction && reaction.durationCalc();
+    const timePlaceholder = 'DD/MM/YYYY hh:mm:ss';
+    return (
+      <Row className="small-padding">
+        <Col md={3} sm={6}>
+          <FormGroup>
+            <ControlLabel>Start</ControlLabel>
+            <InputGroup>
+              <FormControl
+                type="text"
+                value={reaction.timestamp_start || ''}
+                disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_start')}
+                placeholder={timePlaceholder}
+                onChange={event => this.props.onInputChange('timestampStart', event)}
+              />
+              <InputGroup.Button>
+                <Button disabled={!permitOn(reaction)} active style={{ padding: '6px' }} onClick={() => this.setCurrentTime('timestampStart')}>
+                  <i className="fa fa-clock-o" aria-hidden="true" />
+                </Button>
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </Col>
+        <Col md={3} sm={6}>
+          <FormGroup>
+            <ControlLabel>Stop</ControlLabel>
+            <InputGroup>
+              <FormControl
+                type="text"
+                value={reaction.timestamp_stop || ''}
+                disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_stop')}
+                placeholder={timePlaceholder}
+                onChange={event => this.props.onInputChange('timestampStop', event)}
+              />
+              <InputGroup.Button>
+                <Button disabled={!permitOn(reaction)} active style={{ padding: '6px' }} onClick={() => this.setCurrentTime('timestampStop')}>
+                  <i className="fa fa-clock-o" aria-hidden="true" />
+                </Button>
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </Col>
+        <Col md={3} sm={6}>
+          <FormGroup>
+            {reaction.is_published ? <ControlLabel>Duration</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Duration</ControlLabel>} source="requiredField" />}
+            <InputGroup>
+              <FormControl type="text" value={durationCalc || ''} disabled placeholder="Duration" />
+              <InputGroup.Button>
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={<Tooltip id="copy_duration_to_clipboard">copy to clipboard</Tooltip>}
+                >
+                  <Button disabled={!permitOn(reaction)} active className="clipboardBtn" data-clipboard-text={durationCalc || ' '}>
+                    <i className="fa fa-clipboard" aria-hidden="true" />
+                  </Button>
+                </OverlayTrigger>
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={<Tooltip id="copy_durationCalc_to_duration">use this duration<br />(rounded to precision 1)</Tooltip>}
+                >
+                  <Button disabled={!permitOn(reaction)} active className="clipboardBtn" onClick={() => this.copyToDuration()}>
+                    <i className="fa fa-arrow-right" aria-hidden="true" />
+                  </Button>
+                </OverlayTrigger>
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </Col>
+        <Col md={3} sm={6}>
+          <FormGroup>
+            <ControlLabel>&nbsp;</ControlLabel>
+            <InputGroup>
+              <FormControl
+                disabled={!permitOn(reaction)}
+                type="text"
+                value={reaction.durationDisplay.dispValue || ''}
+                inputRef={this.refDuration}
+                placeholder="Input Duration..."
+                onChange={event => this.handleDurationChange(event)}
+              />
+              <InputGroup.Button>
+                <OverlayTrigger placement="bottom" overlay={<Tooltip id="switch_duration_unit">switch duration unit</Tooltip>}>
+                  <Button disabled={!permitOn(reaction)} bsStyle="success" onClick={() => this.changeDurationUnit()}>
+                    {reaction.durationUnit}
+                  </Button>
+                </OverlayTrigger>
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ReactionDetailsDuration.propTypes = {
+  reaction: PropTypes.object,
+  onInputChange: PropTypes.func
+};
+
+ReactionDetailsDuration.defaultProps = {
+  reaction: {},
+  onInputChange: () => {}
+};
diff --git a/app/packs/src/components/ReactionDetailsMainProperties.js b/app/packs/src/components/ReactionDetailsMainProperties.js
new file mode 100644
index 000000000..280009069
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsMainProperties.js
@@ -0,0 +1,187 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Col,
+  FormGroup,
+  FormControl,
+  ControlLabel,
+  OverlayTrigger,
+  Button,
+  Tooltip,
+  InputGroup,
+  Grid,
+  Row
+} from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import Reaction from 'src/models/Reaction';
+import { statusOptions } from 'src/components/staticDropdownOptions/options';
+import LineChartContainer from 'src/components/lineChart/LineChartContainer';
+import EditableTable from 'src/components/lineChart/EditableTable';
+import { permitOn } from 'src/components/common/uis';
+
+// For REPO
+import HelpInfo from 'src/components/common/HelpInfo';
+
+export default class ReactionDetailsMainProperties extends Component {
+  constructor(props) {
+    super(props);
+    const { temperature } = props && props.reaction;
+    this.state = {
+      showTemperatureChart: false,
+      temperature,
+    };
+    this.toggleTemperatureChart = this.toggleTemperatureChart.bind(this);
+    this.updateTemperature = this.updateTemperature.bind(this);
+    this.temperatureUnit = props.reaction.temperature.valueUnit;
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      temperature: nextProps.reaction.temperature,
+    });
+
+    this.temperatureUnit = nextProps.reaction.temperature.valueUnit;
+  }
+
+  updateTemperature(newData) {
+    const { temperature } = this.state;
+    temperature.data = newData;
+    this.setState({ temperature });
+    this.props.onInputChange('temperatureData', temperature);
+  }
+
+  toggleTemperatureChart() {
+    const { showTemperatureChart } = this.state;
+    this.setState({ showTemperatureChart: !showTemperatureChart });
+  }
+
+  changeUnit() {
+    const index = Reaction.temperature_unit.indexOf(this.temperatureUnit);
+    const unit = Reaction.temperature_unit[(index + 1) % 3];
+    this.props.onInputChange('temperatureUnit', unit);
+  }
+
+  render() {
+    const { reaction, onInputChange } = this.props;
+    const temperatureTooltip = (
+      <Tooltip id="show_temperature">Show temperature chart</Tooltip>
+    );
+
+    const temperatureDisplay = reaction.temperature_display;
+    const { showTemperatureChart, temperature } = this.state;
+    const tempUnitLabel = `Temperature (${this.temperatureUnit})`;
+
+    let TempChartRow = <span />;
+    if (showTemperatureChart) {
+      TempChartRow = (
+        <Col md={12}>
+          <div style={{ width: '74%', float: 'left' }}>
+            <LineChartContainer
+              data={temperature}
+              xAxis="Time"
+              yAxis={tempUnitLabel}
+            />
+          </div>
+          <div style={{ width: '25%', float: 'left' }}>
+            <EditableTable
+              temperature={temperature}
+              updateTemperature={this.updateTemperature}
+            />
+          </div>
+        </Col>
+      );
+    }
+
+    return (
+      <Grid fluid style={{ paddingLeft: 'unset' }}>
+        <Row>
+          <Col md={6}>
+            <FormGroup>
+              <ControlLabel>Name</ControlLabel>
+              <FormControl
+                id={uuid.v4()}
+                name="reaction_name"
+                type="text"
+                value={reaction.name || ''}
+                placeholder="Name..."
+                disabled={!permitOn(reaction) || reaction.isMethodDisabled('name')}
+                onChange={event => onInputChange('name', event)}
+              />
+            </FormGroup>
+          </Col>
+          <Col md={3}>
+            <FormGroup>
+              <ControlLabel>Status</ControlLabel>
+              <Select
+                className="status-select reaction-status-change"
+                name="status"
+                key={reaction.status}
+                multi={false}
+                options={statusOptions}
+                value={reaction.status}
+                disabled={!permitOn(reaction) || reaction.isMethodDisabled('status')}
+                onChange={(event) => {
+                  const wrappedEvent = {
+                    target: { value: event && event.value },
+                  };
+                  onInputChange('status', wrappedEvent);
+                }}
+              />
+            </FormGroup>
+          </Col>
+          <Col md={3}>
+            <FormGroup>
+              {reaction.is_published ? <ControlLabel>Temperature</ControlLabel> : <HelpInfo optionalElement={<ControlLabel>Temperature</ControlLabel>} source="requiredField" />}
+              <InputGroup>
+                <InputGroup.Button>
+                  <OverlayTrigger placement="bottom" overlay={temperatureTooltip}>
+                    <Button
+                      disabled={!permitOn(reaction)}
+                      active
+                      className="clipboardBtn"
+                      onClick={this.toggleTemperatureChart}
+                    >
+                      <i className="fa fa-area-chart" />
+                    </Button>
+                  </OverlayTrigger>
+                </InputGroup.Button>
+                <FormControl
+                  type="text"
+                  value={temperatureDisplay || ''}
+                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('temperature')}
+                  placeholder="Temperature..."
+                  onChange={event => onInputChange('temperature', event)}
+                />
+                <InputGroup.Button>
+                  <Button
+                    disabled={!permitOn(reaction)}
+                    bsStyle="success"
+                    onClick={() => this.changeUnit()}
+                  >
+                    {this.temperatureUnit}
+                  </Button>
+                </InputGroup.Button>
+              </InputGroup>
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          {TempChartRow}
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+ReactionDetailsMainProperties.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  reaction: PropTypes.object,
+  onInputChange: PropTypes.func
+};
+
+ReactionDetailsMainProperties.defaultProps = {
+  reaction: {},
+  onInputChange: () => {}
+};
diff --git a/app/packs/src/components/ReactionDetailsProperties.js b/app/packs/src/components/ReactionDetailsProperties.js
new file mode 100644
index 000000000..6945dba3d
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsProperties.js
@@ -0,0 +1,180 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Row, Col, FormGroup, ControlLabel, FormControl, MenuItem,
+  ListGroupItem, ListGroup, InputGroup, DropdownButton
+} from 'react-bootstrap';
+import Select from 'react-select';
+import 'moment-precise-range-plugin';
+import Clipboard from 'clipboard';
+import { dangerousProductsOptions } from './staticDropdownOptions/options';
+import ReactionDetailsMainProperties from './ReactionDetailsMainProperties';
+import StringTag from './StringTag';
+import { solventsTL } from './utils/reactionPredefined';
+import OlsTreeSelect from './OlsComponent';
+import { permitOn } from './common/uis';
+import HelpInfo from '../components/common/HelpInfo';
+
+export default class ReactionDetailsProperties extends Component {
+  constructor(props) {
+    super(props);
+    props.reaction.convertDurationDisplay();
+
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.handleOnReactionChange = this.handleOnReactionChange.bind(this);
+    this.handleOnSolventSelect = this.handleOnSolventSelect.bind(this);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.reaction) { return; }
+    nextProps.reaction.convertDurationDisplay();
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  handleOnReactionChange(reaction) {
+    this.props.onReactionChange(reaction);
+  }
+
+  handleMultiselectChange(type, selectedOptions) {
+    const values = selectedOptions.map(option => option.value);
+    const wrappedEvent = { target: { value: values } };
+    this.props.onInputChange(type, wrappedEvent);
+  }
+
+  handleOnSolventSelect(eventKey) {
+    const { reaction } = this.props;
+
+    let val;
+    if (eventKey > solventsTL.length) {
+      val = '';
+    } else {
+      const key = Object.keys(solventsTL[eventKey])[0];
+      val = solventsTL[eventKey][key];
+    }
+
+    reaction.tlc_solvents = val;
+    this.handleOnReactionChange(reaction);
+  }
+
+  render() {
+    const { reaction } = this.props;
+    const solventsItems = solventsTL.map((x, i) => {
+      const val = Object.keys(x)[0];
+      return (
+        <MenuItem key={i} eventKey={i}>
+          <StringTag key={i} string={val} />
+        </MenuItem>
+      )
+    });
+
+    solventsItems.unshift(
+      <MenuItem key={solventsTL.length + 1} eventKey={solventsTL.length + 1}>
+        -
+      </MenuItem>
+    );
+
+    return (
+      <div>
+        <ListGroup>
+          <ListGroupItem>
+            <div className="reaction-scheme-props">
+              <ReactionDetailsMainProperties
+                reaction={reaction}
+                onInputChange={(type, event) => this.props.onInputChange(type, event)}
+              />
+            </div>
+            <FormGroup>
+              {reaction.is_published ? <ControlLabel>Type (Name Reaction Ontology)</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Type (Name Reaction Ontology)</ControlLabel>} source="requiredField" />}
+              <OlsTreeSelect
+                selectName="rxno"
+                selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
+                onSelectChange={event => this.props.onInputChange('rxno', event.trim())}
+                selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
+              />
+            </FormGroup>
+            <Row>
+              <Col md={12}>
+                <div><b>Dangerous Products</b></div>
+                <Select
+                  name="dangerous_products"
+                  multi
+                  options={dangerousProductsOptions}
+                  value={reaction.dangerous_products}
+                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('dangerous_products')}
+                  onChange={selectedOptions => this.handleMultiselectChange('dangerousProducts', selectedOptions)}
+                />
+              </Col>
+            </Row>
+          </ListGroupItem>
+          <ListGroupItem>
+            <h4 className="list-group-item-heading" >TLC-Control</h4>
+            <Row>
+              <Col md={6}>
+                <FormGroup>
+                  <ControlLabel>Solvents (parts)</ControlLabel>
+                  <FormGroup>
+                    <InputGroup>
+                      <DropdownButton
+                        disabled={!permitOn(reaction)}
+                        componentClass={InputGroup.Button}
+                        id="solvents_dd"
+                        title=""
+                        onSelect={this.handleOnSolventSelect}
+                      >
+                        { solventsItems }
+                      </DropdownButton>
+                      <FormControl
+                        style={{ zIndex: 0 }}
+                        type="text"
+                        value={reaction.tlc_solvents || ''}
+                        disabled={!permitOn(reaction) || reaction.isMethodDisabled('tlc_solvents')}
+                        placeholder="Solvents as parts..."
+                        onChange={event => this.props.onInputChange('tlc_solvents', event)}
+                      />
+                    </InputGroup>
+                  </FormGroup>
+                </FormGroup>
+              </Col>
+              <Col md={6}>
+                <FormGroup>
+                  <ControlLabel>Rf-Value</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={reaction.rf_value || ''}
+                    disabled={!permitOn(reaction) || reaction.isMethodDisabled('rf_value')}
+                    placeholder="Rf-Value..."
+                    onChange={event => this.props.onInputChange('rfValue', event)}
+                  />
+                </FormGroup>
+              </Col>
+            </Row>
+            <Row>
+              <Col md={12}>
+                <FormGroup>
+                  <ControlLabel>TLC-Description</ControlLabel>
+                  <FormControl
+                    componentClass="textarea"
+                    value={reaction.tlc_description || ''}
+                    disabled={!permitOn(reaction) || reaction.isMethodDisabled('tlc_description')}
+                    placeholder="TLC-Description..."
+                    onChange={event => this.props.onInputChange('tlcDescription', event)}
+                  />
+                </FormGroup>
+              </Col>
+            </Row>
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+}
+
+ReactionDetailsProperties.propTypes = {
+  reaction: PropTypes.object,
+  onReactionChange: PropTypes.func,
+  onInputChange: PropTypes.func
+};
diff --git a/app/packs/src/components/ReactionDetailsPurification.js b/app/packs/src/components/ReactionDetailsPurification.js
new file mode 100644
index 000000000..2aa1a67d0
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsPurification.js
@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, FormGroup } from 'react-bootstrap';
+import Select from 'react-select';
+import 'moment-precise-range-plugin';
+import { purificationOptions } from './staticDropdownOptions/options';
+import MaterialGroupContainer from './MaterialGroupContainer';
+import QuillEditor from './QuillEditor';
+import QuillViewer from './QuillViewer';
+import Sample from './models/Sample';
+import { observationPurification, solventsTL } from './utils/reactionPredefined';
+import { permitOn } from './common/uis';
+import PrivateNoteElement from './PrivateNoteElement';
+import HelpInfo from '../components/common/HelpInfo';
+
+function dummy() { return true; }
+
+export default class ReactionDetailsPurification extends Component {
+  constructor(props) {
+    super(props);
+    this.handlePurificationChange = this.handlePurificationChange.bind(this);
+    this.handleOnReactionChange = this.handleOnReactionChange.bind(this);
+    this.handleOnSolventSelect = this.handleOnSolventSelect.bind(this);
+    this.handlePSolventChange = this.handlePSolventChange.bind(this);
+    this.deletePSolvent = this.deletePSolvent.bind(this);
+    this.dropPSolvent = this.dropPSolvent.bind(this);
+  }
+
+  handleOnReactionChange(reaction) {
+    this.props.onReactionChange(reaction);
+  }
+
+  handlePurificationChange(selected) {
+    if (selected.length === 0) {
+      return this.handleMultiselectChange('purification', selected);
+    }
+
+    const obs = observationPurification;
+    const { reaction } = this.props;
+
+    const selectedVal = selected[selected.length - 1].value;
+    const predefinedObs = obs.filter(x =>
+      Object.keys(x).filter(k =>
+        k.toLowerCase().localeCompare(selectedVal.toLowerCase()) === 0,
+      ).length > 0,
+    );
+
+    if (predefinedObs.length > 0) {
+      const values = selected.map(option => option.value);
+      reaction.purification = values;
+
+      const predefined = predefinedObs[0][selectedVal.toLowerCase()];
+      reaction.concat_text_observation(predefined);
+
+      this.handleOnReactionChange(reaction);
+    } else {
+      this.handleMultiselectChange('purification', selected);
+    }
+
+    return 0;
+  }
+
+  handlePSolventChange(changeEvent) {
+    const { sampleID, amount } = changeEvent;
+    const { reaction, onReactionChange } = this.props;
+    const updatedSample = reaction.sampleById(sampleID);
+    updatedSample.setAmount(amount);
+    onReactionChange(reaction);
+  }
+
+  deletePSolvent(material) {
+    const { reaction, onReactionChange } = this.props;
+    reaction.deleteMaterial(material, 'purification_solvents');
+    onReactionChange(reaction);
+  }
+
+  dropPSolvent(srcSample, tagMaterial, tagGroup, extLabel) {
+    const { reaction, onReactionChange } = this.props;
+    const splitSample = Sample.buildNew(srcSample, reaction.collection_id, tagGroup);
+    splitSample.short_label = tagGroup.slice(0, -1);
+    splitSample.external_label = extLabel;
+    reaction.addMaterialAt(splitSample, null, tagMaterial, tagGroup);
+    onReactionChange(reaction, { schemaChanged: true });
+  }
+
+  handleMultiselectChange(type, selectedOptions) {
+    const values = selectedOptions.map(option => option.value);
+    const wrappedEvent = { target: { value: values } };
+    this.props.onInputChange(type, wrappedEvent);
+  }
+
+  handleOnSolventSelect(eventKey) {
+    const { reaction } = this.props;
+    let val;
+    if (eventKey > solventsTL.length) {
+      val = '';
+    } else {
+      const key = Object.keys(solventsTL[eventKey])[0];
+      val = solventsTL[eventKey][key];
+    }
+    reaction.tlc_solvents = val;
+    this.handleOnReactionChange(reaction);
+  }
+
+  render() {
+    const { reaction, onInputChange, additionQuillRef } = this.props;
+    return (
+      <span>
+        <Row>
+          <Col md={12}>
+            <div><b>Purification</b></div>
+            <Select
+              className="status-select"
+              style={{ zIndex: 10 }}
+              name="purification"
+              multi
+              disabled={!permitOn(reaction) || reaction.isMethodDisabled('purification')}
+              options={purificationOptions}
+              onChange={this.handlePurificationChange}
+              value={reaction.purification}
+            />
+          </Col>
+        </Row>
+        <Row style={{ marginTop: '10px' }}>
+          <Col md={12}>
+            <div><b>Purification Solvents</b></div>
+            <MaterialGroupContainer
+              reaction={reaction}
+              materialGroup="purification_solvents"
+              materials={reaction.purification_solvents}
+              dropMaterial={dummy}
+              deleteMaterial={this.deletePSolvent}
+              dropSample={this.dropPSolvent}
+              showLoadingColumn={!!reaction.hasPolymers()}
+              onChange={this.handlePSolventChange}
+              headIndex={0}
+            />
+          </Col>
+        </Row>
+        <Row style={{ marginTop: '10px' }}>
+          <Col md={12}>
+            <FormGroup>
+              <div><b>Additional information for publication and purification details</b>&nbsp;<HelpInfo source={reaction.is_published ? 'x' : 'additionalInformation'} place="right" /></div>
+              <div className="quill-resize">
+                {
+                  permitOn(reaction) ?
+                    <QuillEditor
+                      ref={additionQuillRef}
+                      value={reaction.observation}
+                      height="100%"
+                      disabled={!permitOn(reaction) || reaction.isMethodDisabled('observation')}
+                      onChange={event => onInputChange('observation', event)}
+                    /> : <QuillViewer value={reaction.observation} />
+                }
+              </div>
+            </FormGroup>
+            <PrivateNoteElement element={reaction} disabled={!reaction.can_update} />
+          </Col>
+        </Row>
+      </span>
+    );
+  }
+}
+
+ReactionDetailsPurification.propTypes = {
+  reaction: PropTypes.object,
+  onReactionChange: PropTypes.func,
+  onInputChange: PropTypes.func,
+  additionQuillRef: PropTypes.object
+};
+
+ReactionDetailsPurification.defaultProps = {
+  reaction: {},
+  onReactionChange: () => {},
+  onInputChange: () => {},
+  additionQuillRef: {}
+};
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
new file mode 100644
index 000000000..cc218ffaa
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsRepoComment.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import ReviewStore from '../components/stores/ReviewStore';
+import ReviewActions from '../components/actions/ReviewActions';
+import RepoReactionDetails from '../libHome/RepoReactionDetails';
+
+export default class ReactionDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reaction: null
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    ReviewStore.listen(this.onStoreChange);
+    ReviewActions.displayReviewReaction(this.props.reactionId);
+  }
+
+  componentWillUnmount() {
+    ReviewStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleReviewUpdate(review) {
+    this.setState({ review });
+  }
+
+  render() {
+    const { reaction, review_info } = this.state;
+    return reaction && reaction.publication ?
+      (
+        <RepoReactionDetails
+          reaction={reaction}
+          canComment
+          review_info={review_info}
+          onReviewUpdate={this.handleReviewUpdate}
+          review={this.state.review || {}}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+ReactionDetailsRepoComment.propTypes = {
+  reactionId: PropTypes.number.isRequired,
+};
diff --git a/app/packs/src/components/ReactionDetailsScheme.js b/app/packs/src/components/ReactionDetailsScheme.js
new file mode 100644
index 000000000..5ee6f11fb
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsScheme.js
@@ -0,0 +1,1004 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ListGroup, ListGroupItem, FormGroup, ControlLabel, FormControl,
+  Row, Col, Collapse, Button, ButtonGroup
+} from 'react-bootstrap';
+import Select from 'react-select';
+import Delta from 'quill-delta';
+import MaterialGroupContainer from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroupContainer';
+import Sample from 'src/models/Sample';
+import Reaction from 'src/models/Reaction';
+import Molecule from 'src/models/Molecule';
+import ReactionDetailsMainProperties from 'src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties';
+import ReactionDetailsPurification from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification';
+
+import QuillViewer from 'src/components/QuillViewer';
+import ReactionDescriptionEditor from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDescriptionEditor';
+
+import GeneralProcedureDnd from 'src/apps/mydb/elements/details/reactions/schemeTab/GeneralProcedureDnD';
+import { rolesOptions, conditionsOptions } from 'src/components/staticDropdownOptions/options';
+import OlsTreeSelect from 'src/components/OlsComponent';
+import ReactionDetailsDuration from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration';
+import { permitOn } from 'src/components/common/uis';
+
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
+import TextTemplateStore from 'src/stores/alt/stores/TextTemplateStore';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+
+import HelpInfo from 'src/components/common/HelpInfo';
+
+export default class ReactionDetailsScheme extends Component {
+  constructor(props) {
+    super(props);
+
+    const { reaction } = props;
+
+    const textTemplate = TextTemplateStore.getState().reactionDescription;
+    this.state = {
+      reaction,
+      lockEquivColumn: false,
+      cCon: false,
+      reactionDescTemplate: textTemplate.toJS(),
+      open: true
+    };
+
+    this.reactQuillRef = React.createRef();
+    this.additionQuillRef = React.createRef();
+
+    this.handleTemplateChange = this.handleTemplateChange.bind(this);
+
+    this.onReactionChange = this.onReactionChange.bind(this);
+    this.onChangeRole = this.onChangeRole.bind(this);
+    this.renderRole = this.renderRole.bind(this);
+    this.addSampleTo = this.addSampleTo.bind(this);
+    this.dropMaterial = this.dropMaterial.bind(this);
+    this.dropSample = this.dropSample.bind(this);
+    this.switchEquiv = this.switchEquiv.bind(this);
+    this.handleOnConditionSelect = this.handleOnConditionSelect.bind(this);
+    this.updateTextTemplates = this.updateTextTemplates.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateStore.listen(this.handleTemplateChange);
+
+    TextTemplateActions.fetchTextTemplates('reaction');
+    TextTemplateActions.fetchTextTemplates('reactionDescription');
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { reaction } = nextProps;
+    this.setState({ reaction });
+  }
+
+  componentWillUnmount() {
+    TextTemplateStore.unlisten(this.handleTemplateChange);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  updateTextTemplates(textTemplate) {
+    TextTemplateActions.updateTextTemplates('reactionDescription', textTemplate);
+  }
+
+  dropSample(srcSample, tagMaterial, tagGroup, extLabel, isNewSample = false) {
+    const { reaction } = this.state;
+    let splitSample;
+
+    if (srcSample instanceof Molecule || isNewSample) {
+      // Create new Sample with counter
+      splitSample = Sample.buildNew(srcSample, reaction.collection_id, tagGroup);
+    } else if (srcSample instanceof Sample) {
+      if (tagGroup === 'reactants' || tagGroup === 'solvents') {
+        // Skip counter for reactants or solvents
+        splitSample = srcSample.buildChildWithoutCounter();
+        splitSample.short_label = tagGroup.slice(0, -1);
+      } else {
+        splitSample = srcSample.buildChild();
+      }
+    }
+    splitSample.show_label = (splitSample.decoupled && !splitSample.molfile) ? true : splitSample.show_label;
+    if (tagGroup == 'solvents') {
+      splitSample.reference = false;
+    }
+
+    this.insertSolventExtLabel(splitSample, tagGroup, extLabel);
+    reaction.addMaterialAt(splitSample, null, tagMaterial, tagGroup);
+    this.onReactionChange(reaction, { schemaChanged: true });
+  }
+
+  insertSolventExtLabel(splitSample, materialGroup, external_label) {
+    if (external_label && materialGroup === 'solvents' && !splitSample.external_label) {
+      splitSample.external_label = external_label;
+    }
+  }
+
+  onChangeRole(e) {
+    const { onInputChange } = this.props;
+    const value = e && e.value;
+    onInputChange('role', value);
+  }
+
+  switchEquiv() {
+    const { lockEquivColumn } = this.state;
+    this.setState({ lockEquivColumn: !lockEquivColumn });
+  }
+
+  handleOnConditionSelect(eventKey) {
+    const { reaction } = this.props;
+    const val = eventKey.value;
+    if (reaction.conditions == null || reaction.conditions.length === 0) {
+      reaction.conditions = `${val} `;
+    } else {
+      reaction.conditions += `\n${val} `;
+    }
+    this.props.onReactionChange(reaction, { schemaChanged: true });
+  }
+
+  renderGPDnD() {
+    const { reaction } = this.props;
+    return (
+      <GeneralProcedureDnd
+        reaction={reaction}
+      />
+    );
+  }
+
+  renderRolesOptions(opt) {
+    const className = `fa ${opt.icon} ${opt.bsStyle}`;
+    return (
+      <span>
+        <i className={className} />
+        <span className="spacer-10" />
+        {opt.label}
+      </span>
+    );
+  }
+
+  renderRoleSelect() {
+    const { role } = this.props.reaction;
+    return (
+      <Select
+        disabled={!permitOn(this.props.reaction)}
+        name="role"
+        options={rolesOptions}
+        optionRenderer={this.renderRolesOptions}
+        multi={false}
+        clearable
+        value={role}
+        onChange={this.onChangeRole}
+      />
+    );
+  }
+
+  renderRole() {
+    const { role } = this.props.reaction;
+    const accordTo = role === 'parts' ? 'According to' : null;
+    return (
+      <span>
+        <Col md={3} style={{ paddingLeft: '6px' }}>
+          <FormGroup>
+            <ControlLabel>Role</ControlLabel>
+            {this.renderRoleSelect()}
+          </FormGroup>
+        </Col>
+        <Col md={3} style={{ paddingLeft: '6px' }}>
+          <FormGroup>
+            <ControlLabel>{accordTo}</ControlLabel>
+            {this.renderGPDnD()}
+          </FormGroup>
+        </Col>
+      </span>
+    );
+  }
+
+  deleteMaterial(material, materialGroup) {
+    const { reaction } = this.state;
+    reaction.deleteMaterial(material, materialGroup);
+
+    // only reference of 'starting_materials' or 'reactants' triggers updatedReactionForReferenceChange
+    // only when reaction.referenceMaterial not exist triggers updatedReactionForReferenceChange
+    const referenceRelatedGroup = ['starting_materials', 'reactants'];
+    if (referenceRelatedGroup.includes(materialGroup) && (!reaction.referenceMaterial)) {
+      if (reaction[materialGroup].length === 0) {
+        const refMaterialGroup = materialGroup === 'starting_materials' ? 'reactants' : 'starting_materials';
+        if (reaction[refMaterialGroup].length > 0) {
+          const event = {
+            type: 'referenceChanged',
+            refMaterialGroup,
+            sampleID: reaction[refMaterialGroup][0].id,
+            value: 'on'
+          };
+          this.updatedReactionForReferenceChange(event);
+        }
+      } else {
+        const event = {
+          type: 'referenceChanged',
+          materialGroup,
+          sampleID: reaction[materialGroup][0].id,
+          value: 'on'
+        };
+        this.updatedReactionForReferenceChange(event);
+      }
+    }
+
+    this.onReactionChange(reaction, { schemaChanged: true });
+  }
+
+  dropMaterial(srcMat, srcGroup, tagMat, tagGroup) {
+    const { reaction } = this.state;
+    reaction.moveMaterial(srcMat, srcGroup, tagMat, tagGroup);
+    this.onReactionChange(reaction, { schemaChanged: true });
+  }
+
+  onReactionChange(reaction, options = {}) {
+    this.props.onReactionChange(reaction, options);
+  }
+
+  handleTemplateChange(state) {
+    this.setState({
+      reactionDescTemplate: state.reactionDescription.toJS()
+    });
+  }
+
+  handleMaterialsChange(changeEvent) {
+    switch (changeEvent.type) {
+      case 'referenceChanged':
+        this.onReactionChange(
+          this.updatedReactionForReferenceChange(changeEvent)
+        );
+        break;
+      case 'showLabelChanged':
+        this.onReactionChange(
+          this.updatedReactionForShowLabelChange(changeEvent)
+        );
+        break;
+      case 'amountChanged':
+        this.onReactionChange(
+          this.updatedReactionForAmountChange(changeEvent)
+        );
+        break;
+      case 'amountUnitChanged':
+        this.onReactionChange(
+          this.updatedReactionForAmountUnitChange(changeEvent)
+        );
+        break;
+      case 'MetricsChanged':
+        this.onReactionChange(
+          this.updatedReactionForMetricsChange(changeEvent)
+        );
+        break;
+      case 'loadingChanged':
+        this.onReactionChange(
+          this.updatedReactionForLoadingChange(changeEvent)
+        );
+        break;
+      case 'coefficientChanged':
+        this.onReactionChange(
+          this.updatedReactionForCoefficientChange(changeEvent)
+        );
+        break;
+      case 'amountTypeChanged':
+        this.onReactionChange(
+          this.updatedReactionForAmountTypeChange(changeEvent)
+        );
+        break;
+      case 'equivalentChanged':
+        this.onReactionChange(
+          this.updatedReactionForEquivalentChange(changeEvent)
+        );
+        break;
+      case 'externalLabelChanged':
+        this.onReactionChange(
+          this.updatedReactionForExternalLabelChange(changeEvent)
+        );
+        break;
+      case 'drysolventChanged':
+        this.onReactionChange(
+          this.updatedReactionForDrySolventChange(changeEvent)
+        );
+        break;
+      case 'externalLabelCompleted':
+        const { reaction } = this.state;
+        this.onReactionChange(reaction, { schemaChanged: true });
+        break;
+      case 'addToDesc':
+        this.addSampleTo(changeEvent, 'description');
+        this.addSampleTo(changeEvent, 'observation');
+        break;
+      default:
+        break;
+    }
+  }
+
+  addSampleTo(e, type) {
+    const { paragraph } = e;
+    let quillEditor = this.reactQuillRef.current.editor;
+    if (type === 'observation') quillEditor = this.additionQuillRef.current.editor;
+    const range = quillEditor.getSelection();
+    if (range) {
+      let contents = quillEditor.getContents();
+      let insertOps = [{ insert: paragraph }];
+      const insertDelta = new Delta(insertOps);
+      if (range.index > 0) {
+        insertOps = [{ retain: range.index }].concat(insertOps);
+      }
+      const elementDelta = new Delta(insertOps);
+      contents = contents.compose(elementDelta);
+      quillEditor.setContents(contents);
+      range.length = 0;
+      range.index += insertDelta.length();
+      quillEditor.setSelection(range);
+      this.props.onInputChange(type, new Delta(contents));
+    }
+  }
+
+  updatedReactionForExternalLabelChange(changeEvent) {
+    const { sampleID, externalLabel } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.external_label = externalLabel;
+
+    return this.updatedReactionWithSample(this.updatedSamplesForExternalLabelChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForDrySolventChange(changeEvent) {
+    const { sampleID, dry_solvent } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.dry_solvent = dry_solvent;
+
+    return this.updatedReactionWithSample(this.updatedSamplesForDrySolventChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForReferenceChange(changeEvent) {
+    const { sampleID } = changeEvent;
+    const { reaction } = this.state;
+    const sample = reaction.sampleById(sampleID);
+
+    reaction.markSampleAsReference(sampleID);
+
+    return this.updatedReactionWithSample(this.updatedSamplesForReferenceChange.bind(this), sample);
+  }
+
+  updatedReactionForShowLabelChange(changeEvent) {
+    const { sampleID, value } = changeEvent;
+    const { reaction } = this.state;
+    const sample = reaction.sampleById(sampleID);
+
+    reaction.toggleShowLabelForSample(sampleID);
+    this.onReactionChange(reaction, { schemaChanged: true });
+
+    return this.updatedReactionWithSample(this.updatedSamplesForShowLabelChange.bind(this), sample);
+  }
+
+  updatedReactionForAmountChange(changeEvent) {
+    const { sampleID, amount } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    // normalize to milligram
+    updatedSample.setAmountAndNormalizeToGram(amount);
+
+    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForAmountUnitChange(changeEvent) {
+    const { sampleID, amount } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+    // normalize to milligram
+    // updatedSample.setAmountAndNormalizeToGram(amount);
+    updatedSample.setAmount(amount);
+
+    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForMetricsChange(changeEvent) {
+    const { sampleID, metricUnit, metricPrefix } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+    updatedSample.setUnitMetrics(metricUnit, metricPrefix);
+
+    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForLoadingChange(changeEvent) {
+    const { sampleID, amountType } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.amountType = amountType;
+
+    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForAmountTypeChange(changeEvent) {
+    const { sampleID, amountType } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.amountType = amountType;
+
+    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForCoefficientChange(changeEvent) {
+    const { sampleID, coefficient } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.coefficient = coefficient;
+    this.updatedReactionForEquivalentChange(changeEvent);
+
+    return this.updatedReactionWithSample(this.updatedSamplesForCoefficientChange.bind(this), updatedSample);
+  }
+
+  updatedReactionForEquivalentChange(changeEvent) {
+    const { sampleID, equivalent } = changeEvent;
+    const updatedSample = this.props.reaction.sampleById(sampleID);
+
+    updatedSample.equivalent = equivalent;
+
+    return this.updatedReactionWithSample(this.updatedSamplesForEquivalentChange.bind(this), updatedSample);
+  }
+
+  calculateEquivalent(refM, updatedSample) {
+    if (!refM.contains_residues) {
+      NotificationActions.add({
+        message: 'Cannot perform calculations for loading and equivalent',
+        level: 'error'
+      });
+
+      return 1.0;
+    }
+
+    if (!refM.loading) {
+      NotificationActions.add({
+        message: 'Please set non-zero starting material loading',
+        level: 'error'
+      });
+
+      return 0.0;
+    }
+
+    let loading = refM.residues[0].custom_info.loading;
+    let mass_koef = updatedSample.amount_g / refM.amount_g;
+    let mwb = updatedSample.molecule.molecular_weight;
+    let mwa = refM.molecule.molecular_weight;
+    let mw_diff = mwb - mwa;
+    let equivalent = (1000.0 / loading) * (mass_koef - 1.0) / mw_diff;
+
+    if (equivalent < 0.0 || equivalent > 1.0 || isNaN(equivalent) || !isFinite(equivalent)) {
+      equivalent = 1.0;
+    }
+
+    return equivalent;
+  }
+
+  checkMassMolecule(referenceM, updatedS) {
+    let errorMsg;
+    let mFull;
+    const mwb = updatedS.decoupled ? (updatedS.molecular_mass || 0) : updatedS.molecule.molecular_weight;
+
+    // mass check apply to 'polymers' only
+    if (!updatedS.contains_residues) {
+      mFull = referenceM.amount_mol * mwb;
+      const maxTheoAmount = mFull * (updatedS.coefficient || 1.0 / referenceM.coefficient || 1.0);
+      if (updatedS.amount_g > maxTheoAmount) {
+        errorMsg = 'Experimental mass value is larger than possible\n' +
+          'by 100% conversion! Please check your data.';
+      }
+    } else {
+      const mwa = referenceM.decoupled ? (referenceM.molecular_mass || 0) : referenceM.molecule.molecular_weight;
+      const deltaM = mwb - mwa;
+      const massA = referenceM.amount_g;
+      mFull = massA + (referenceM.amount_mol * deltaM);
+      const massExperimental = updatedS.amount_g;
+
+      if (deltaM > 0) { // expect weight gain
+        if (massExperimental > mFull) {
+          errorMsg = 'Experimental mass value is larger than possible\n' +
+            'by 100% conversion! Please check your data.';
+        } else if (massExperimental < massA) {
+          errorMsg = 'Material loss! ' +
+            'Experimental mass value is less than possible!\n' +
+            'Please check your data.';
+        }
+      } else if (massExperimental < mFull) { // expect weight loss
+        errorMsg = 'Experimental mass value is less than possible\n' +
+          'by 100% conversion! Please check your data.';
+      }
+    }
+
+    updatedS.maxAmount = mFull;
+
+    if (errorMsg && !updatedS.decoupled) {
+      updatedS.error_mass = true;
+      NotificationActions.add({
+        message: errorMsg,
+        level: 'error',
+      });
+    } else {
+      updatedS.error_mass = false;
+    }
+
+    return { mFull, errorMsg };
+  }
+
+  checkMassPolymer(referenceM, updatedS, massAnalyses) {
+    const equivalent = this.calculateEquivalent(referenceM, updatedS);
+    updatedS.equivalent = equivalent;
+    let fconv_loading = referenceM.amount_mol / updatedS.amount_g * 1000.0;
+    updatedS.residues[0].custom_info['loading_full_conv'] = fconv_loading;
+    updatedS.residues[0].custom_info['loading_type'] = 'mass_diff';
+
+    let newAmountMol;
+
+    if (equivalent < 0.0 || equivalent > 1.0) {
+      updatedS.adjusted_equivalent = equivalent > 1.0 ? 1.0 : 0.0;
+      updatedS.adjusted_amount_mol = referenceM.amount_mol
+      updatedS.adjusted_loading = fconv_loading;
+      updatedS.adjusted_amount_g = updatedS.amount_g;
+      newAmountMol = referenceM.amount_mol;
+    }
+
+    newAmountMol = referenceM.amount_mol * equivalent;
+    const newLoading = (newAmountMol / updatedS.amount_g) * 1000.0;
+
+    updatedS.residues[0].custom_info.loading = newLoading;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  triggerNotification(isDecoupled) {
+    if (!isDecoupled) {
+      const errorMsg = 'Experimental mass value is larger than possible\n'
+      + 'by 100% conversion! Please check your data.';
+      NotificationActions.add({
+        message: errorMsg,
+        level: 'error',
+      });
+    }
+  }
+
+  updatedSamplesForAmountChange(samples, updatedSample, materialGroup) {
+    const { referenceMaterial } = this.props.reaction;
+    const { lockEquivColumn } = this.state;
+    let stoichiometryCoeff = 1.0;
+
+    return samples.map((sample) => {
+      stoichiometryCoeff = (sample.coefficient || 1.0) / (referenceMaterial?.coefficient || 1.0);
+      if (referenceMaterial) {
+        if (sample.id === updatedSample.id) {
+          if (!updatedSample.reference && referenceMaterial.amount_value) {
+            if (materialGroup === 'products') {
+              const massAnalyses = this.checkMassMolecule(referenceMaterial, updatedSample);
+              if (updatedSample.contains_residues) {
+                this.checkMassPolymer(referenceMaterial, updatedSample, massAnalyses);
+                return sample;
+              }
+              sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
+              // yield taking into account stoichiometry:
+              sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol / stoichiometryCoeff;
+            } else {
+              if (!lockEquivColumn) {
+                sample.equivalent = sample.amount_g / sample.maxAmount;
+              } else {
+                if (referenceMaterial && referenceMaterial.amount_value) {
+                  sample.setAmountAndNormalizeToGram({
+                    value: sample.equivalent * referenceMaterial.amount_mol,
+                    unit: 'mol',
+                  });
+                } else if (sample.amount_value) {
+                  sample.setAmountAndNormalizeToGram({
+                    value: sample.equivalent * sample.amount_mol,
+                    unit: 'mol'
+                  });
+                }
+
+              }
+            }
+          } else {
+            if (materialGroup === 'products') {
+              sample.equivalent = 0.0;
+            } else {
+              sample.equivalent = 1.0;
+            }
+          }
+        } else {
+          if (!lockEquivColumn || materialGroup === 'products') {
+            // calculate equivalent, don't touch real amount
+            sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
+            // yield taking into account stoichiometry:
+            sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol / stoichiometryCoeff;
+          } else {
+            //sample.amount_mol = sample.equivalent * referenceMaterial.amount_mol;
+            if (referenceMaterial && referenceMaterial.amount_value) {
+              sample.setAmountAndNormalizeToGram({
+                value: sample.equivalent * referenceMaterial.amount_mol,
+                unit: 'mol',
+              });
+            }
+          }
+        }
+
+        if ((materialGroup === 'starting_materials' || materialGroup === 'reactants') && !sample.reference) {
+          // eslint-disable-next-line no-param-reassign
+          sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol;
+        } else if (materialGroup === 'products' && (sample.equivalent < 0.0 || isNaN(sample.equivalent) || !isFinite(sample.equivalent))) {
+          // if (materialGroup === 'products' && (sample.equivalent < 0.0 || sample.equivalent > 1.0 || isNaN(sample.equivalent) || !isFinite(sample.equivalent))) {
+          // eslint-disable-next-line no-param-reassign
+          sample.equivalent = 1.0;
+        } else if (materialGroup === 'products' && (sample.amount_mol === 0 || referenceMaterial.amount_mol === 0)) {
+          // eslint-disable-next-line no-param-reassign
+          sample.equivalent = 0.0;
+        } else if (materialGroup === 'products' && sample.amount_g > sample.maxAmount) {
+          // eslint-disable-next-line no-param-reassign
+          sample.equivalent = 1;
+          this.triggerNotification(sample.decoupled);
+        }
+      }
+
+      if (materialGroup === 'products') {
+        if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
+          sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
+        }
+      }
+      return sample;
+    });
+  }
+
+  updatedSamplesForEquivalentChange(samples, updatedSample, materialGroup) {
+    const { referenceMaterial } = this.props.reaction;
+    return samples.map((sample) => {
+      if (sample.id === updatedSample.id && updatedSample.equivalent) {
+        sample.equivalent = updatedSample.equivalent;
+        if (referenceMaterial && referenceMaterial.amount_value) {
+          sample.setAmountAndNormalizeToGram({
+            value: updatedSample.equivalent * referenceMaterial.amount_mol,
+            unit: 'mol',
+          });
+        } else if (sample.amount_value) {
+          sample.setAmountAndNormalizeToGram({
+            value: updatedSample.equivalent * sample.amount_mol,
+            unit: 'mol'
+          });
+        }
+      }
+      if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
+        /* eslint-disable no-param-reassign, no-unused-expressions */
+        if (materialGroup === 'products') {
+          sample.maxAmount = referenceMaterial.amount_mol * (sample.coefficient || 1.0) / (referenceMaterial.coefficient || 1.0) * sample.molecule_molecular_weight;
+          sample.equivalent = sample.maxAmount !== 0 ? (sample.amount_g / sample.maxAmount) : 0;
+          if (sample.amount_g > sample.maxAmount) {
+            sample.equivalent = 1;
+            this.triggerNotification(sample.decoupled);
+          }
+        } else {
+          // NB: sample equivalent independant of coeff
+          if (sample.reference) {
+            sample.equivalent = sample.reference ? 1 : 0;
+          } else {
+            sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol;
+          }
+        }
+      }
+      return sample;
+    });
+  }
+
+  updatedSamplesForExternalLabelChange(samples, updatedSample) {
+    const { referenceMaterial } = this.props.reaction;
+    return samples.map((sample) => {
+      if (sample.id === updatedSample.id) {
+        sample.external_label = updatedSample.external_label;
+      }
+      return sample;
+    });
+  }
+
+  updatedSamplesForDrySolventChange(samples, updatedSample) {
+    const { referenceMaterial } = this.props.reaction;
+
+    return samples.map((sample) => {
+      if (sample.id === updatedSample.id) {
+        sample.dry_solvent = updatedSample.dry_solvent;
+      }
+      return sample;
+    });
+  }
+
+  updatedSamplesForShowLabelChange(samples, referenceMaterial) {
+    return samples;
+  }
+
+  /* eslint-disable class-methods-use-this, no-param-reassign */
+  updatedSamplesForCoefficientChange(samples, updatedSample) {
+    return samples.map((sample) => {
+      if (sample.id === updatedSample.id) {
+        // set sampple.coefficient to default value, if user set coeff. value to zero
+        if (updatedSample.coefficient % 1 !== 0 || updatedSample.coefficient === 0) {
+          updatedSample.coefficient = 1;
+          sample.coefficient = updatedSample.coefficient;
+          NotificationActions.add({
+            message: 'The sample coefficient should be a positive integer',
+            level: 'error'
+          });
+        } else {
+          sample.coefficient = updatedSample.coefficient;
+        }
+        const rId = sample.belongTo ? sample.belongTo.id : null;
+        ElementActions.setRefreshCoefficient(sample.id, sample.coefficient, rId);
+      }
+      return sample;
+    });
+  }
+
+  updatedSamplesForReferenceChange(samples, referenceMaterial, materialGroup) {
+    return samples.map((sample) => {
+      if (sample.id === referenceMaterial.id) {
+        sample.equivalent = 1.0;
+        sample.reference = true;
+      } else {
+        if (sample.amount_value) {
+          const referenceAmount = referenceMaterial.amount_mol;
+          if (referenceMaterial && referenceAmount) {
+            if (materialGroup === 'products') {
+              sample.equivalent = sample.amount_mol * (referenceMaterial.coefficient || 1) / (referenceAmount * (sample.coefficient || 1));
+            } else {
+              sample.equivalent = sample.amount_mol / referenceAmount;
+            }
+          }
+        }
+        sample.reference = false;
+      }
+      return sample;
+    });
+  }
+
+  updatedReactionWithSample(updateFunction, updatedSample) {
+    const { reaction } = this.state;
+    reaction.starting_materials = updateFunction(reaction.starting_materials, updatedSample, 'starting_materials');
+    reaction.reactants = updateFunction(reaction.reactants, updatedSample, 'reactants');
+    reaction.solvents = updateFunction(reaction.solvents, updatedSample, 'solvents');
+    reaction.products = updateFunction(reaction.products, updatedSample, 'products');
+    return reaction;
+  }
+
+  solventCollapseBtn() {
+    const { open } = this.state;
+    const arrow = open
+      ? <i className="fa fa-angle-double-up" />
+      : <i className="fa fa-angle-double-down" />;
+    return (
+      <ButtonGroup vertical block>
+        <Button
+          bsSize="xsmall"
+          style={{ backgroundColor: '#ddd' }}
+          onClick={() => this.setState({ open: !open })}
+        >{arrow} &nbsp; Solvents
+        </Button>
+      </ButtonGroup>
+    );
+  }
+
+  conditionsCollapseBtn() {
+    const { cCon } = this.state;
+    const arrow = cCon
+      ? <i className="fa fa-angle-double-up" />
+      : <i className="fa fa-angle-double-down" />;
+    return (
+      <ButtonGroup vertical block>
+        <Button
+          bsSize="xsmall"
+          style={{ backgroundColor: '#ddd' }}
+          onClick={() => this.setState({ cCon: !cCon })}
+        >{arrow} &nbsp; Conditions
+        </Button>
+      </ButtonGroup>
+    );
+  }
+
+  render() {
+    const {
+      reaction,
+      lockEquivColumn,
+      reactionDescTemplate
+    } = this.state;
+    const minPadding = { padding: '1px 2px 2px 0px' };
+    if (reaction.editedSample !== undefined) {
+      if (reaction.editedSample.amountType === 'target') {
+        this.updatedSamplesForEquivalentChange(reaction.samples, reaction.editedSample);
+      } else { // real amount, so that we update amount in mmol
+        this.updatedSamplesForAmountChange(reaction.samples, reaction.editedSample);
+      }
+      reaction.editedSample = undefined;
+    } else {
+      const { referenceMaterial } = this.props.reaction;
+      reaction.products.map((sample) => {
+        sample.concn = sample.amount_mol / reaction.solventVolume;
+        if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
+          if (sample.contains_residues) {
+            sample.maxAmount = referenceMaterial.amount_g + (referenceMaterial.amount_mol
+              * (sample.molecule.molecular_weight - referenceMaterial.molecule.molecular_weight));
+          }
+        }
+      });
+    }
+
+    if ((typeof (lockEquivColumn) !== 'undefined' && !lockEquivColumn) || !reaction.changed) {
+      reaction.starting_materials.map((sample) => {
+        sample.concn = sample.amount_mol / reaction.solventVolume;
+      });
+      reaction.reactants.map((sample) => {
+        sample.concn = sample.amount_mol / reaction.solventVolume;
+      });
+    }
+
+    // if no reference material then mark first starting material
+    const refM = this.props.reaction.starting_materials[0];
+    if (!this.props.reaction.referenceMaterial && refM) {
+      reaction.markSampleAsReference(refM.id);
+    }
+
+    const headReactants = reaction.starting_materials.length ?? 0;
+
+    return (
+      <div>
+        <ListGroup fill="true">
+          <ListGroupItem style={minPadding}>
+            <MaterialGroupContainer
+              reaction={reaction}
+              materialGroup="starting_materials"
+              materials={reaction.starting_materials}
+              dropMaterial={this.dropMaterial}
+              deleteMaterial={
+                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
+              }
+              dropSample={this.dropSample}
+              showLoadingColumn={!!reaction.hasPolymers()}
+              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
+              switchEquiv={this.switchEquiv}
+              lockEquivColumn={this.state.lockEquivColumn}
+              headIndex={0}
+            />
+          </ListGroupItem>
+          <ListGroupItem style={minPadding} >
+            <MaterialGroupContainer
+              reaction={reaction}
+              materialGroup="reactants"
+              materials={reaction.reactants}
+              dropMaterial={this.dropMaterial}
+              deleteMaterial={
+                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
+              }
+              dropSample={this.dropSample}
+              showLoadingColumn={!!reaction.hasPolymers()}
+              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
+              switchEquiv={this.switchEquiv}
+              lockEquivColumn={lockEquivColumn}
+              headIndex={headReactants}
+            />
+          </ListGroupItem>
+          <ListGroupItem style={minPadding}>
+
+            <MaterialGroupContainer
+              reaction={reaction}
+              materialGroup="products"
+              materials={reaction.products}
+              dropMaterial={this.dropMaterial}
+              deleteMaterial={
+                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
+              }
+              dropSample={this.dropSample}
+              showLoadingColumn={!!reaction.hasPolymers()}
+              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
+              switchEquiv={this.switchEquiv}
+              lockEquivColumn={this.state.lockEquivColumn}
+              headIndex={0}
+            />
+          </ListGroupItem>
+          <ListGroupItem style={minPadding}>
+            {this.solventCollapseBtn()}
+            <Collapse in={this.state.open}>
+              <div>
+                <MaterialGroupContainer
+                  reaction={reaction}
+                  materialGroup="solvents"
+                  materials={reaction.solvents}
+                  dropMaterial={this.dropMaterial}
+                  deleteMaterial={
+                    (material, materialGroup) => this.deleteMaterial(material, materialGroup)
+                  }
+                  dropSample={this.dropSample}
+                  showLoadingColumn={!!reaction.hasPolymers()}
+                  onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
+                  switchEquiv={this.switchEquiv}
+                  lockEquivColumn={this.state.lockEquivColumn}
+                  headIndex={0}
+                />
+              </div>
+            </Collapse>
+          </ListGroupItem>
+          <ListGroupItem style={minPadding}>
+            {this.conditionsCollapseBtn()}
+            <Collapse in={this.state.cCon}>
+              <div>
+                <Select
+                  disabled={!permitOn(reaction)}
+                  name="default_conditions"
+                  multi={false}
+                  options={conditionsOptions}
+                  onChange={this.handleOnConditionSelect}
+                />
+                <FormControl
+                  componentClass="textarea"
+                  rows="4"
+                  value={reaction.conditions || ''}
+                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('conditions')}
+                  placeholder="Conditions..."
+                  onChange={event => this.props.onInputChange('conditions', event)}
+                />
+              </div>
+            </Collapse>
+          </ListGroupItem>
+        </ListGroup>
+        <ListGroup>
+          <ListGroupItem>
+            <div className="reaction-scheme-props">
+              <ReactionDetailsMainProperties
+                reaction={reaction}
+                onInputChange={(type, event) => this.props.onInputChange(type, event)}
+              />
+            </div>
+            <ReactionDetailsDuration
+              reaction={reaction}
+              onInputChange={(type, event) => this.props.onInputChange(type, event)}
+            />
+            <Row>
+              <Col md={6}>
+                <FormGroup>
+                  {reaction.is_published ? <ControlLabel>Type (Name Reaction Ontology)</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Type (Name Reaction Ontology)</ControlLabel>} source="requiredField" />}
+                  <OlsTreeSelect
+                    selectName="rxno"
+                    selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
+                    onSelectChange={event => this.props.onInputChange('rxno', event.trim())}
+                    selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
+                  />
+                </FormGroup>
+              </Col>
+              {this.renderRole()}
+            </Row>
+            <Row>
+              <Col md={12}>
+                <FormGroup>
+                  {reaction.is_published ? <ControlLabel>Description</ControlLabel> : <span><HelpInfo optionalElement={<ControlLabel>Description</ControlLabel>} source="requiredField" />&nbsp;<HelpInfo source="description" place="right" /></span>}
+                  <div className="quill-resize">
+                    {
+                      permitOn(reaction) ?
+                        <ReactionDescriptionEditor
+                          height="100%"
+                          reactQuillRef={this.reactQuillRef}
+                          template={reactionDescTemplate}
+                          value={reaction.description}
+                          updateTextTemplates={this.updateTextTemplates}
+                          onChange={event => this.props.onInputChange('description', event)}
+                        /> : <QuillViewer value={reaction.description} />
+                    }
+                  </div>
+                </FormGroup>
+              </Col>
+            </Row>
+            <ReactionDetailsPurification
+              reaction={reaction}
+              onReactionChange={r => this.onReactionChange(r)}
+              onInputChange={(type, event) => this.props.onInputChange(type, event)}
+              additionQuillRef={this.additionQuillRef}
+            />
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+}
+
+ReactionDetailsScheme.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  onReactionChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/components/ReactionDetailsShare.js b/app/packs/src/components/ReactionDetailsShare.js
new file mode 100644
index 000000000..7abafeb07
--- /dev/null
+++ b/app/packs/src/components/ReactionDetailsShare.js
@@ -0,0 +1,78 @@
+const setReactionByType = (reaction, type, value) => {
+  let options = {};
+
+  switch (type) {
+    case 'name':
+      reaction.name = value;
+      break;
+    case 'observation':
+      reaction.observation = value;
+      break;
+    case 'status':
+      reaction.status = value;
+      break;
+    case 'description':
+      reaction.description = value;
+      options = { schemaChanged: false }
+      break;
+    case 'purification':
+      reaction.purification = value;
+      break;
+    case 'tlc_solvents':
+      reaction.tlc_solvents = value;
+      break;
+    case 'rfValue':
+      reaction.rf_value = value;
+      break;
+    case 'timestampStart':
+      reaction.timestamp_start = value;
+      break;
+    case 'timestampStop':
+      reaction.timestamp_stop = value;
+      break;
+    case 'tlcDescription':
+      reaction.tlc_description = value;
+      break;
+    case 'temperature':
+      reaction.temperature.userText = value;
+      options = {schemaChanged: true}
+      break;
+    case 'temperatureUnit':
+      reaction.temperature = reaction.convertTemperature(value);
+      options = {schemaChanged: true}
+      break;
+    case 'temperatureData':
+      reaction.temperature = value;
+      options = {schemaChanged: true}
+      break;
+    case 'dangerousProducts':
+      reaction.dangerous_products = value;
+      break;
+    case 'conditions':
+      reaction.conditions = value;
+      options = {schemaChanged: true}
+      break;
+    case 'solvent':
+      reaction.solvent = value;
+      options = {schemaChanged: true}
+      break;
+    case 'role':
+      reaction.role = value;
+      reaction.name = reaction.nameFromRole(value);
+      break;
+    case 'duration':
+      reaction.durationDisplay = value;
+      options = { schemaChanged: true }
+      break;
+    case 'rxno':
+      reaction.rxno = value;
+      break;
+    case 'variations':
+      reaction.variations = value;
+      break;
+  }
+
+  return { newReaction: reaction, options: options }
+}
+
+export {setReactionByType}
diff --git a/app/packs/src/components/SampleDetails.js b/app/packs/src/components/SampleDetails.js
new file mode 100644
index 000000000..b25e1e1be
--- /dev/null
+++ b/app/packs/src/components/SampleDetails.js
@@ -0,0 +1,1534 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, ButtonToolbar,
+  InputGroup, FormGroup, FormControl,
+  Panel, ListGroup, ListGroupItem, Glyphicon, Tabs, Tab, Row, Col,
+  Tooltip, OverlayTrigger, DropdownButton, MenuItem,
+  ControlLabel, Modal, Alert, Checkbox
+} from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import Clipboard from 'clipboard';
+import Select from 'react-select';
+import { cloneDeep, findIndex } from 'lodash';
+import uuid from 'uuid';
+import classNames from 'classnames';
+import Immutable from 'immutable';
+
+import ElementActions from './actions/ElementActions';
+import ElementStore from './stores/ElementStore';
+import DetailActions from './actions/DetailActions';
+import LoadingActions from './actions/LoadingActions';
+import RepositoryActions from './actions/RepositoryActions';
+
+import UIStore from './stores/UIStore';
+import UserStore from './stores/UserStore';
+import UIActions from './actions/UIActions';
+import QcActions from './actions/QcActions';
+import QcStore from './stores/QcStore';
+
+import ElementCollectionLabels from './ElementCollectionLabels';
+import ElementAnalysesLabels from './ElementAnalysesLabels';
+import PubchemLabels from './PubchemLabels';
+import ElementReactionLabels from './ElementReactionLabels';
+import SampleDetailsContainers from './SampleDetailsContainers';
+
+import XLabels from './extra/SampleDetailsXLabels';
+import XTabs from './extra/SampleDetailsXTabs';
+
+import StructureEditorModal from './structure_editor/StructureEditorModal';
+import PublishSampleModal from './PublishSampleModal';
+
+import Sample from './models/Sample';
+import Container from './models/Container';
+import PolymerSection from './PolymerSection';
+import ElementalCompositionGroup from './ElementalCompositionGroup';
+import ToggleSection from './common/ToggleSection';
+import SampleName from './common/SampleName';
+import ClipboardCopyText from './common/ClipboardCopyText';
+import SampleForm from './SampleForm';
+import ComputedPropsContainer from './computed_props/ComputedPropsContainer';
+import ComputedPropLabel from './computed_props/ComputedPropLabel';
+import Utils from './utils/Functions';
+import PrintCodeButton from './common/PrintCodeButton';
+import SampleDetailsLiteratures from './DetailsTabLiteratures';
+import MoleculesFetcher from './fetchers/MoleculesFetcher';
+import PubchemLcss from './PubchemLcss';
+import QcMain from './qc/QcMain';
+import { chmoConversions } from './OlsComponent';
+import ConfirmClose from './common/ConfirmClose';
+import { EditUserLabels, ShowUserLabels } from './UserLabels';
+import CopyElementModal from './common/CopyElementModal';
+import NotificationActions from './actions/NotificationActions';
+import MatrixCheck from './common/MatrixCheck';
+import AttachmentFetcher from './fetchers/AttachmentFetcher';
+import NmrSimTab from './nmr_sim/NmrSimTab';
+import FastInput from './FastInput';
+import ScifinderSearch from './scifinder/ScifinderSearch';
+import ElementDetailSortTab from './ElementDetailSortTab';
+import { addSegmentTabs } from './generic/SegmentDetails';
+import RepoXvialButton from './common/RepoXvialButton';
+import {
+  PublishedTag,
+  LabelPublication,
+  PublishBtn,
+  ReviewPublishBtn,
+  validateMolecule,
+} from './PublishCommon';
+import SampleDetailsRepoComment from './SampleDetailsRepoComment';
+
+const MWPrecision = 6;
+
+const decoupleCheck = (sample) => {
+  if (!sample.decoupled && sample.molecule && sample.molecule.id === '_none_') {
+    NotificationActions.add({
+      title: 'Error on Sample creation', message: 'The molecule structure is required!', level: 'error', position: 'tc'
+    });
+    LoadingActions.stop();
+    return false;
+  }
+  if (sample.decoupled && sample.sum_formula.trim() === '') { sample.sum_formula = 'undefined structure'; }
+  if (!sample.decoupled) { sample.sum_formula = ''; }
+  return true;
+};
+
+const rangeCheck = (field, sample) => {
+  if (sample[`${field}_lowerbound`] && sample[`${field}_lowerbound`] !== ''
+    && sample[`${field}_upperbound`] && sample[`${field}_upperbound`] !== ''
+    && Number.parseFloat(sample[`${field}_upperbound`]) < Number.parseFloat(sample[`${field}_lowerbound`])) {
+    NotificationActions.add({
+      title: `Error on ${field.replace(/(^\w{1})|(_{1}\w{1})/g, match => match.toUpperCase())}`, message: 'range lower bound must be less than or equal to range upper', level: 'error', position: 'tc'
+    });
+    LoadingActions.stop();
+    return false;
+  }
+  return true;
+};
+
+export default class SampleDetails extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sample: props.sample,
+      reaction: null,
+      materialGroup: null,
+      showStructureEditor: false,
+      loadingMolecule: false,
+      showElementalComposition: false,
+      showChemicalIdentifiers: false,
+      activeTab: UIStore.getState().sample.activeTab,
+      qrCodeSVG: '',
+      isCasLoading: false,
+      showMolfileModal: false,
+      smileReadonly: !((typeof props.sample.molecule.inchikey === 'undefined') || props.sample.molecule.inchikey == null || props.sample.molecule.inchikey === 'DUMMY'),
+      quickCreator: false,
+      showInchikey: false,
+      pageMessage: null,
+      visible: Immutable.List(),
+      startExport: false,
+      sfn: UIStore.getState().hasSfn,
+      showPublishSampleModal: false,
+      commentScreen: false,
+      xvial: (props.sample && props.sample.tag && props.sample.tag.taggable_data && props.sample.tag.taggable_data.xvial && props.sample.tag.taggable_data.xvial.num) || '',
+      currentUser: UserStore.getState().currentUser || {}
+    };
+
+    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+    this.enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
+    this.enableSampleDecoupled = MatrixCheck(currentUser.matrix, 'sampleDecoupled');
+    this.enableNmrSim = MatrixCheck(currentUser.matrix, 'nmrSim');
+
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.clipboard = new Clipboard('.clipboardBtn');
+    this.addManualCas = this.addManualCas.bind(this);
+    this.handleMolfileShow = this.handleMolfileShow.bind(this);
+    this.handleMolfileClose = this.handleMolfileClose.bind(this);
+    this.handleSampleChanged = this.handleSampleChanged.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.toggleInchi = this.toggleInchi.bind(this);
+    this.fetchQcWhenNeeded = this.fetchQcWhenNeeded.bind(this);
+    this.customizableField = this.customizableField.bind(this);
+    this.decoupleMolecule = this.decoupleMolecule.bind(this);
+    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
+    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
+    this.decoupleChanged = this.decoupleChanged.bind(this);
+    this.handleFastInput = this.handleFastInput.bind(this);
+    this.showPublishSampleModal = this.showPublishSampleModal.bind(this);
+    this.forcePublishRefreshClose = this.forcePublishRefreshClose.bind(this);
+    this.handleCommentScreen = this.handleCommentScreen.bind(this);
+    this.handleFullScreen = this.handleFullScreen.bind(this);
+    this.handleValidation = this.handleValidation.bind(this);
+    this.handleResetValidation = this.handleResetValidation.bind(this);
+    this.handleAssociateClick = this.handleAssociateClick.bind(this);
+    this.handleRepoXvial = this.handleRepoXvial.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIStoreChange);
+    const { activeTab } = this.state;
+    this.fetchQcWhenNeeded(activeTab);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.sample.isNew && (typeof (nextProps.sample.molfile) === 'undefined' || ((nextProps.sample.molfile || '').length === 0))
+        || (typeof (nextProps.sample.molfile) !== 'undefined' && nextProps.sample.molecule.inchikey == 'DUMMY')) {
+      this.setState({
+        smileReadonly: false,
+      });
+    } else {
+      this.setState({
+        smileReadonly: true,
+      });
+    }
+    this.setState({
+      sample: nextProps.sample,
+      loadingMolecule: false,
+      isCasLoading: false,
+    });
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+    UIStore.unlisten(this.onUIStoreChange);
+  }
+
+  onUIStoreChange(state) {
+    if (state.sample.activeTab !== this.state.activeTab) {
+      this.setState(previousState => ({
+        ...previousState, activeTab: state.sample.activeTab
+      }));
+    }
+  }
+
+  forcePublishRefreshClose(sample, show) {
+    this.setState({ sample, showPublishSampleModal: show });
+    this.forceUpdate();
+  }
+
+  handleAssociateClick() {
+    const { sample } = this.state;
+    ElementActions.tryFetchReactionById(sample.tag.taggable_data.reaction_id);
+    sample.validates = [];
+    this.setState({ sample });
+  }
+
+  handleValidation(element) {
+    let validates = [];
+    const sample = element;
+    if (sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.reaction_id) {
+      validates.push({ name: `sample [${sample.name}]`, value: false, message: `${sample.name} is associated with a Reaction.` });
+    } else {
+      const analyses = sample.analysisArray();
+      if (analyses.length < 1) {
+        validates.push({ name: `sample [${sample.name}]`, value: false, message: 'Analyses data is missing.' });
+      } else {
+        const validatePt = validateMolecule(sample);
+        if (validatePt.length > 0) {
+          validates = validates.concat(validatePt);
+        }
+      }
+    }
+    if (validates.length > 0) {
+      sample.validates = validates;
+      this.setState({ sample });
+    } else {
+      LoadingActions.start();
+      RepositoryActions.reviewPublish(element);
+    }
+  }
+
+  handleResetValidation() {
+    const { sample } = this.state;
+    sample.validates = [];
+    this.setState({ sample });
+  }
+
+  handleCommentScreen() {
+    this.setState({ commentScreen: true });
+    this.props.toggleCommentScreen(true);
+  }
+
+  handleFullScreen() {
+    this.setState({ commentScreen: false });
+    this.props.toggleFullScreen();
+  }
+
+  handleMolfileShow() {
+    this.setState({
+      showMolfileModal: true
+    });
+  }
+
+  handleMolfileClose() {
+    this.setState({
+      showMolfileModal: false
+    });
+  }
+
+  handleSampleChanged(sample, cb) {
+    this.setState({
+      sample,
+    }, cb);
+  }
+
+  handleAmountChanged(amount) {
+    const { sample } = this.state;
+    sample.setAmountAndNormalizeToGram(amount);
+    this.setState({ sample });
+  }
+
+  handleImportedReadoutChanged(e) {
+    const { sample } = this.state;
+    sample.imported_readout = e.target.value;
+    this.setState({
+      sample
+    });
+  }
+
+  handleRepoXvial(elementId, xvial) {
+    this.setState({ xvial });
+    ElementActions.refreshElements('sample');
+  }
+
+
+  showStructureEditor() {
+    this.setState({
+      showStructureEditor: true
+    });
+  }
+
+  hideStructureEditor() {
+    this.setState({
+      showStructureEditor: false
+    });
+  }
+
+  toggleInchi() {
+    const { showInchikey } = this.state;
+    this.setState({ showInchikey: !showInchikey });
+  }
+
+  handleFastInput(smi) {
+    this.setState({ showChemicalIdentifiers: true }, () => {
+      this.smilesInput.value = smi;
+      this.handleMoleculeBySmile();
+    });
+  }
+
+  handleMoleculeBySmile() {
+    const smi = this.smilesInput.value;
+    const { sample } = this.state;
+
+    MoleculesFetcher.fetchBySmi(smi)
+      .then((result) => {
+        if (!result || result == null) {
+          NotificationActions.add({
+            title: 'Error on Sample creation', message: `Cannot create molecule with this smiles! [${smi}]`, level: 'error', position: 'tc'
+          });
+        } else {
+          sample.molfile = result.molfile;
+          sample.molecule_id = result.id;
+          sample.molecule = result;
+          this.molfileInput.value = result.molfile;
+          this.inchistringInput.value = result.inchistring;
+          this.setState({
+            quickCreator: true,
+            sample,
+            smileReadonly: true,
+            pageMessage: result.ob_log
+          });
+          ElementActions.refreshElements('sample');
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      }).finally(() => LoadingActions.stop());
+  }
+
+  decoupleMolecule() {
+    const { sample } = this.state;
+    MoleculesFetcher.decouple(sample.molfile, sample.sample_svg_file, sample.decoupled)
+      .then((result) => {
+        sample.molecule = result;
+        sample.molecule_id = result.id;
+        this.setState({
+          sample, pageMessage: result.ob_log
+        });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  decoupleChanged(e) {
+    const { sample } = this.state;
+    sample.decoupled = e.target.checked;
+    if (!sample.decoupled) {
+      sample.sum_formula = '';
+    } else {
+      if (sample.sum_formula.trim() === '') sample.sum_formula = 'undefined structure';
+      if (sample.residues && sample.residues[0] && sample.residues[0].custom_info) {
+        sample.residues[0].custom_info.polymer_type = 'self_defined';
+        delete sample.residues[0].custom_info.surface_type;
+      }
+    }
+    if (!sample.decoupled && ((sample.molfile || '') === '')) {
+      this.handleSampleChanged(sample);
+    } else {
+      this.handleSampleChanged(sample, this.decoupleMolecule);
+    }
+  }
+
+  handleStructureEditorSave(molfile, svg_file = null, config = null, editor = 'ketcher') {
+    const { sample } = this.state;
+    sample.molfile = molfile;
+    const smiles = (config && sample.molecule) ? config.smiles : null;
+    sample.contains_residues = molfile.indexOf(' R# ') > -1;
+    sample.formulaChanged = true;
+    this.setState({ loadingMolecule: true });
+    if (!smiles || smiles === '') {
+      MoleculesFetcher.fetchByMolfile(molfile, svg_file, editor, sample.decoupled)
+        .then((result) => {
+          sample.molecule = result;
+          sample.molecule_id = result.id;
+          this.setState({
+            sample, smileReadonly: true, pageMessage: result.ob_log, loadingMolecule: false
+          });
+        }).catch((errorMessage) => {
+          alert('Cannot create molecule!');
+          console.log(`handleStructureEditorSave exception of fetchByMolfile: ${errorMessage}`);
+        });
+    } else {
+      MoleculesFetcher.fetchBySmi(smiles, svg_file, molfile, editor)
+        .then((result) => {
+          if (!result || result == null) {
+            alert('Cannot create molecule!');
+          } else {
+            sample.molecule = result;
+            sample.molecule_id = result.id;
+            this.setState({
+              sample, smileReadonly: true, pageMessage: result.ob_log, loadingMolecule: false
+            });
+          }
+        }).catch((errorMessage) => {
+          alert('Cannot create molecule!');
+          console.log(`handleStructureEditorSave exception of fetchBySmi: ${errorMessage}`);
+        });
+    }
+    this.hideStructureEditor();
+  }
+
+  handleStructureEditorCancel() {
+    this.hideStructureEditor();
+  }
+
+  handleSubmit(closeView = false) {
+    LoadingActions.start();
+    const { sample } = this.state;
+    if (!decoupleCheck(sample)) return;
+    if (!rangeCheck('boiling_point', sample)) return;
+    if (!rangeCheck('melting_point', sample)) return;
+    if (sample.belongTo && sample.belongTo.type === 'reaction') {
+      const reaction = sample.belongTo;
+      reaction.editedSample = sample;
+      const materialGroup = sample.matGroup;
+      if (sample.isNew) {
+        ElementActions.createSampleForReaction(sample, reaction, materialGroup);
+      } else {
+        ElementActions.updateSampleForReaction(sample, reaction, closeView);
+      }
+    } else if (sample.belongTo && sample.belongTo.type === 'wellplate') {
+      const wellplate = sample.belongTo;
+      ElementActions.updateSampleForWellplate(sample, wellplate);
+    } else if (sample.isNew) {
+      ElementActions.createSample(sample, closeView);
+    } else {
+      sample.cleanBoilingMelting();
+      ElementActions.updateSample(new Sample(sample), closeView);
+    }
+
+    if (sample.is_new || closeView) {
+      DetailActions.close(sample, true);
+    }
+    sample.updateChecksum();
+  }
+
+  structureEditorButton(isDisabled) {
+    return (
+      // eslint-disable-next-line react/jsx-no-bind
+      <Button onClick={this.showStructureEditor.bind(this)} disabled={isDisabled}>
+        <Glyphicon glyph="pencil" />
+      </Button>
+    );
+  }
+
+  showPublishSampleModal(show) {
+    this.setState({showPublishSampleModal: show});
+    this.forceUpdate();
+  }
+
+  svgOrLoading(sample) {
+    let svgPath = '';
+    if (this.state.loadingMolecule) {
+      svgPath = '/images/wild_card/loading-bubbles.svg';
+    } else {
+      svgPath = sample.svgPath;
+    }
+    let className = svgPath ? 'svg-container' : 'svg-container-empty'
+    return (
+      sample.can_update
+        ? <div className={className}
+               onClick={this.showStructureEditor.bind(this)}>
+            <Glyphicon className="pull-right" glyph='pencil'/>
+            <SVG key={svgPath} src={svgPath} className="molecule-mid"/>
+          </div>
+        : <div className={className}>
+            <SVG key={svgPath} src={svgPath} className="molecule-mid"/>
+          </div>
+    );
+  }
+
+  sampleAverageMW(sample) {
+    let mw = sample.molecule_molecular_weight;
+    if(mw)
+      return <ClipboardCopyText text={`${mw.toFixed(MWPrecision)} g/mol`} />;
+    else
+      return '';
+  }
+
+  sampleExactMW(sample) {
+    let mw = sample.molecule_exact_molecular_weight
+    if(mw)
+      return <ClipboardCopyText text={`Exact mass: ${mw.toFixed(MWPrecision)} g/mol`} />;
+    else
+      return '';
+  }
+
+  initiateAnalysisButton(sample) {
+    return (
+      <div style={{ display: 'inline-block', marginLeft: '100px' }}>
+        <DropdownButton id="InitiateAnalysis" bsStyle="info" bsSize="xsmall" title="Initiate Analysis">
+          <MenuItem eventKey="1" onClick={() => this.initiateAnalysisWithKind(sample, chmoConversions.nmr_1h.termId)}>{chmoConversions.nmr_1h.label}</MenuItem>
+          <MenuItem eventKey="2" onClick={() => this.initiateAnalysisWithKind(sample, chmoConversions.nmr_13c.termId)}>{chmoConversions.nmr_13c.label}</MenuItem>
+          <MenuItem eventKey="3" onClick={() => this.initiateAnalysisWithKind(sample, 'Others')}>others</MenuItem>
+          <MenuItem eventKey="4" onClick={() => this.initiateAnalysisWithKind(sample, 'Others2x')}>others 2x</MenuItem>
+          <MenuItem eventKey="5" onClick={() => this.initiateAnalysisWithKind(sample, 'Others3x')}>others 3x</MenuItem>
+        </DropdownButton>
+      </div>
+    );
+  }
+
+  initiateAnalysisWithKind(sample, kind) {
+    let analysis = '';
+    let a1 = Container.buildAnalysis(chmoConversions.others.value),
+        a2 = Container.buildAnalysis(chmoConversions.others.value),
+        a3 = Container.buildAnalysis(chmoConversions.others.value);
+    switch(kind) {
+      case chmoConversions.nmr_1h.termId:
+        analysis = Container.buildAnalysis(chmoConversions.nmr_1h.value);
+        sample.addAnalysis(analysis);
+        ElementActions.updateSample(sample);
+        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + analysis.id + "&type=nmr_analysis&size=small"})
+        break;
+      case chmoConversions.nmr_13c.termId:
+        analysis = Container.buildAnalysis(chmoConversions.nmr_13c.value);
+        sample.addAnalysis(analysis);
+        ElementActions.updateSample(sample);
+        Utils.downloadFile({ contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + analysis.id + "&type=nmr_analysis&size=small" })
+        break;
+      case "Others":
+        sample.addAnalysis(a1);
+        ElementActions.updateSample(sample);
+        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&type=analysis&size=small"})
+        break;
+      case "Others2x":
+        sample.addAnalysis(a1);
+        sample.addAnalysis(a2);
+        ElementActions.updateSample(sample);
+        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&analyses_ids[]=" + a2.id  + "&type=analysis&size=small"})
+        break;
+      case "Others3x":
+        sample.addAnalysis(a1);
+        sample.addAnalysis(a2);
+        sample.addAnalysis(a3);
+        ElementActions.updateSample(sample);
+        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&analyses_ids[]=" + a2.id + "&analyses_ids[]=" + a3.id + "&type=analysis&size=small"})
+        break;
+    }
+  }
+
+  sampleHeader(sample) {
+    const saveBtnDisplay = sample.isEdited ? '' : 'none';
+    const titleTooltip = `Created at: ${sample.created_at} \n Updated at: ${sample.updated_at}`;
+
+    const { currentCollection } = UIStore.getState();
+    const defCol = currentCollection && currentCollection.is_shared === false &&
+      currentCollection.is_locked === false && currentCollection.label !== 'All' ? currentCollection.id : null;
+
+    const copyBtn = (sample.can_copy && !sample.isNew) ? (
+      <CopyElementModal
+        element={sample}
+        defCol={defCol}
+      />
+    ) : null;
+
+    const colLabel = sample.isNew ? null : (
+      <ElementCollectionLabels element={sample} key={sample.id} placement="right" />
+    );
+
+    const decoupleCb = sample.can_update && this.enableSampleDecoupled ? (
+      <Checkbox className="sample-header-decouple" checked={sample.decoupled} onChange={e => this.decoupleChanged(e)}>
+        Decoupled
+      </Checkbox>
+    ) : null;
+
+    const isPub = !!((sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.publication && sample.tag.taggable_data.publication.published_at));
+    return (
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
+          <span><i className="icon-sample" />{sample.title()}</span>
+        </OverlayTrigger>
+        <ConfirmClose el={sample} />
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveCloseSample">Save and Close Sample</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit(true)}
+            style={{ display: saveBtnDisplay }}
+            disabled={!this.sampleIsValid() || !sample.can_update}
+          >
+            <i className="fa fa-floppy-o" />
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveSample">Save Sample</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit()}
+            style={{ display: saveBtnDisplay }}
+            disabled={!this.sampleIsValid() || !sample.can_update}
+          >
+            <i className="fa fa-floppy-o" />
+          </Button>
+        </OverlayTrigger>
+        {copyBtn}
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.props.toggleFullScreen()}
+          >
+            <i className="fa fa-expand" />
+          </Button>
+        </OverlayTrigger>
+        <PrintCodeButton element={sample} />
+        {sample.isNew ? <FastInput fnHandle={this.handleFastInput} /> : null}
+        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
+        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
+        {decoupleCb}
+        <div style={{ display: 'inline-block', marginLeft: '10px' }}>
+          <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+          {colLabel}
+          <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+          <PubchemLabels element={sample} />
+          <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
+          <PublishedTag element={sample} />
+          <LabelPublication element={sample} />
+          {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
+        </div>
+        <ShowUserLabels element={sample} />
+      </div>
+    );
+  }
+
+  transferToDeviceButton(sample) {
+    return (
+      <Button bsSize="xsmall"
+        onClick={() => {
+          const {selectedDeviceId, devices} = ElementStore.getState().elements.devices
+          const device = devices.find((d) => d.id === selectedDeviceId)
+          ElementActions.addSampleToDevice(sample, device, {save: true})
+        }}
+        style={{marginLeft: 25}}
+      >
+        Transfer to Device
+      </Button>
+    )
+  }
+
+  sampleInfo(sample) {
+    const style = { height: '200px' };
+    let pubchemLcss = (sample.pubchem_tag && sample.pubchem_tag.pubchem_lcss && sample.pubchem_tag.pubchem_lcss.Record) || null;
+    if (pubchemLcss && pubchemLcss.Reference) {
+      const echa = pubchemLcss.Reference.filter(e => e.SourceName === 'European Chemicals Agency (ECHA)').map(e => e.ReferenceNumber);
+      if (echa.length > 0) {
+        pubchemLcss = pubchemLcss.Section.find(e => e.TOCHeading === 'Safety and Hazards') || [];
+        pubchemLcss = pubchemLcss.Section.find(e => e.TOCHeading === 'Hazards Identification') || [];
+        pubchemLcss = pubchemLcss.Section[0].Information.filter(e => echa.includes(e.ReferenceNumber)) || null;
+      } else pubchemLcss = null;
+    }
+    const pubchemCid = sample.pubchem_tag && sample.pubchem_tag.pubchem_cid ?
+      sample.pubchem_tag.pubchem_cid : 0;
+    const lcssSign = pubchemLcss && !sample.decoupled ?
+      <PubchemLcss cid={pubchemCid} informArray={pubchemLcss} /> : <div />;
+
+    return (
+      <Row style={style}>
+        <Col md={4}>
+          <h4><SampleName sample={sample} /></h4>
+          <h5>{this.sampleAverageMW(sample)}</h5>
+          <h5>{this.sampleExactMW(sample)}</h5>
+          {lcssSign}
+        </Col>
+        <Col md={8}>
+          {this.svgOrLoading(sample)}
+        </Col>
+      </Row>
+    );
+  }
+
+  moleculeInchi(sample) {
+    if (typeof (this.inchistringInput) !== 'undefined' && this.inchistringInput
+        && typeof (sample.molecule_inchistring) !== 'undefined' && sample.molecule_inchistring) {
+      this.inchistringInput.value = sample.molecule_inchistring;
+    }
+    const inchiLabel = this.state.showInchikey ? 'InChIKey' : 'InChI';
+    const inchiTooltip = <Tooltip id="inchi_tooltip">toggle InChI/InChIKey</Tooltip>;
+
+    return (
+      <InputGroup className="sample-molecule-identifier">
+        <InputGroup.Button>
+          <OverlayTrigger placement="top" overlay={inchiTooltip}>
+            <Button
+              active
+              onClick={this.toggleInchi}
+            >
+              {inchiLabel}
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <FormGroup controlId="inchistringInput">
+          <FormControl
+            type="text"
+            inputRef={(m) => { this.inchistringInput = m; }}
+            key={sample.id}
+            value={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ''}
+            defaultValue={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ''}
+            disabled
+            readOnly
+          />
+        </FormGroup>
+        <InputGroup.Button>
+          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
+            <Button active className="clipboardBtn" data-clipboard-text={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ' '}>
+              <i className="fa fa-clipboard" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+      </InputGroup>
+    );
+  }
+
+  clipboardTooltip() {
+    return(
+      <Tooltip id="assign_button">copy to clipboard</Tooltip>
+    )
+  }
+
+  moleculeCreatorTooltip() {
+    return(
+      <Tooltip id="assign_button">create molecule</Tooltip>
+    )
+  }
+
+  moleculeCanoSmiles(sample) {
+    if (this.state.smileReadonly && typeof (this.smilesInput) !== 'undefined'
+       && this.smilesInput && typeof (sample.molecule_cano_smiles) !== 'undefined'
+       && sample.molecule_cano_smiles) {
+      this.smilesInput.value = sample.molecule_cano_smiles;
+    }
+    return (
+      <InputGroup className='sample-molecule-identifier'>
+        <InputGroup.Addon>Canonical SMILES</InputGroup.Addon>
+        <FormGroup controlId="smilesInput">
+          <FormControl
+            type="text"
+            id="smilesInput"
+            inputRef={(m) => { this.smilesInput = m; }}
+            defaultValue={sample.molecule_cano_smiles || ''}
+            disabled={this.state.smileReadonly}
+            readOnly={this.state.smileReadonly}
+          />
+        </FormGroup>
+        <InputGroup.Button>
+          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
+            <Button active className="clipboardBtn" data-clipboard-text={sample.molecule_cano_smiles || ' '}>
+              <i className="fa fa-clipboard" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <InputGroup.Button>
+          <OverlayTrigger placement="bottom" overlay={this.moleculeCreatorTooltip()}>
+            <Button
+              active
+              className="clipboardBtn"
+              id="smile-create-molecule"
+              disabled={this.state.smileReadonly}
+              readOnly={this.state.smileReadonly}
+              onClick={() => this.handleMoleculeBySmile()}
+            >
+              <i className="fa fa-save" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+      </InputGroup>
+    );
+  }
+
+  moleculeMolfile(sample) {
+    if (typeof (this.molfileInput) !== 'undefined' && this.molfileInput
+        && typeof (sample.molfile) !== 'undefined' && sample.molfile) {
+      this.molfileInput.value = sample.molfile;
+    }
+
+    const textAreaStyle = { height: '35px', overflow: 'auto', whiteSpace: 'pre' };
+
+    return (
+      <InputGroup className="sample-molecule-identifier">
+        <InputGroup.Addon>Molfile</InputGroup.Addon>
+        <FormGroup controlId="molfileInput">
+          <FormControl
+            componentClass="textarea"
+            style={textAreaStyle}
+            inputRef={(m) => { this.molfileInput = m; }}
+            defaultValue={sample.molfile || ''}
+            disabled
+            readOnly
+          />
+        </FormGroup>
+        <InputGroup.Button>
+          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
+            <Button active className="clipboardBtn" data-clipboard-text={sample.molfile || ' '} >
+              <i className="fa fa-clipboard" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <InputGroup.Button>
+          <Button active className="clipboardBtn" onClick={this.handleMolfileShow}><i className="fa fa-file-text" /></Button>
+        </InputGroup.Button>
+      </InputGroup>
+    )
+  }
+
+  addManualCas(e) {
+    DetailActions.updateMoleculeCas(this.props.sample, e.value);
+  }
+
+  moleculeCas() {
+    const { sample, isCasLoading } = this.state;
+    const { molecule, xref } = sample;
+    const cas = xref ? xref.cas : '';
+    const casLabel = cas && cas.label ? cas.label : '';
+    let casArr = [];
+    if (molecule && molecule.cas) {
+      casArr = molecule.cas.map(c => Object.assign({ label: c }, { value: c }));
+    }
+    const onChange = e => this.updateCas(e);
+    const onOpen = e => this.onCasSelectOpen(e, casArr);
+
+    return (
+      <InputGroup className="sample-molecule-identifier">
+        <InputGroup.Addon>CAS</InputGroup.Addon>
+        <Select.Creatable
+          name="cas"
+          multi={false}
+          options={casArr}
+          onChange={onChange}
+          onOpen={onOpen}
+          onNewOptionClick={this.addManualCas}
+          isLoading={isCasLoading}
+          value={cas}
+          disabled={!sample.can_update}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
+            <Button active className="clipboardBtn" data-clipboard-text={casLabel}><i className="fa fa-clipboard" /></Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+      </InputGroup>
+    );
+  }
+
+  updateCas(e) {
+    let sample = this.state.sample;
+    sample.xref = { ...sample.xref, cas: e };
+    this.setState({ sample });
+  }
+
+  onCasSelectOpen(e, casArr) {
+    if(casArr.length === 0) {
+      this.setState({isCasLoading: true})
+      DetailActions.getMoleculeCas(this.state.sample)
+    }
+  }
+
+
+  handleSegmentsChange(se) {
+    const { sample } = this.state;
+    const { segments } = sample;
+    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
+    sample.segments = segments;
+    this.setState({ sample });
+  }
+
+  customizableField() {
+    const { xref } = this.state.sample;
+    const {
+      cas,
+      optical_rotation,
+      rfvalue,
+      rfsovents,
+      supplier,
+      private_notes,
+      ...customKeys
+    } = cloneDeep(xref || {});
+
+    if (Object.keys(customKeys).length === 0) return null;
+    return (
+      Object.keys(customKeys).map(key => (
+        <tr key={`field_${key}`}>
+          <td colSpan="4">
+            <FormGroup>
+              <ControlLabel>{key}</ControlLabel>
+              <FormControl type="text" defaultValue={customKeys[key] || ''} onChange={e => this.updateKey(key, e)} />
+            </FormGroup>
+          </td>
+        </tr>
+      ))
+    );
+  }
+
+  updateKey(key, e) {
+    const { sample } = this.state;
+    sample.xref[key] = e.target.value;
+    this.setState({ sample });
+  }
+
+  handleElementalSectionToggle() {
+    this.setState({
+      showElementalComposition: !this.state.showElementalComposition
+    });
+  }
+
+  handleChemIdentSectionToggle() {
+    this.setState({
+      showChemicalIdentifiers: !this.state.showChemicalIdentifiers
+    });
+  }
+
+  elementalPropertiesItemHeader(sample) {
+    let label;
+    if (sample.contains_residues) {
+      label = 'Polymer section';
+      if (!this.state.showElementalComposition) {
+        label += ' / Elemental composition';
+      }
+    } else {
+      label = 'Elemental composition';
+    }
+
+    return (
+      <ListGroupItem onClick={() => this.handleElementalSectionToggle()}>
+        <Col className="padding-right elem-composition-header" md={6}>
+          <label>{label}</label>
+        </Col>
+        <div className="col-md-6">
+          <ToggleSection show={this.state.showElementalComposition} />
+        </div>
+      </ListGroupItem>
+    );
+  }
+
+  elementalPropertiesItemContent(sample, materialGroup, show) {
+    if (!show) return false;
+
+    if (sample.contains_residues) {
+      return (
+        <ListGroupItem className="ea-section">
+          <PolymerSection
+            sample={sample}
+            parent={this}
+            show={sample.contains_residues}
+            materialGroup={materialGroup}
+          />
+        </ListGroupItem>
+      );
+    }
+    return (
+      <ListGroupItem className="ea-section">
+        <Row>
+          <Col md={6}>
+            <ElementalCompositionGroup
+              handleSampleChanged={s => this.handleSampleChanged(s)}
+              sample={sample}
+            />
+          </Col>
+        </Row>
+      </ListGroupItem>
+    );
+  }
+
+  elementalPropertiesItem(sample) {
+    // avoid empty ListGroupItem
+    if (!sample.molecule_formula) {
+      return false;
+    }
+
+    const { showElementalComposition, materialGroup } = this.state;
+
+    return (
+      <div width="100%" className="polymer-section">
+        {this.elementalPropertiesItemHeader(sample)}
+
+        {this.elementalPropertiesItemContent(sample, materialGroup, showElementalComposition)}
+      </div>
+    );
+  }
+
+  chemicalIdentifiersItemHeader(sample) {
+    return (
+      <ListGroupItem onClick={() => this.handleChemIdentSectionToggle()}>
+        <Col className="padding-right chem-identifiers-header" md={6}>
+          <b>Chemical identifiers</b>
+          { sample.decoupled &&
+            <span className="text-danger">
+              &nbsp;[decoupled]
+            </span>
+          }
+        </Col>
+        <div className="col-md-6">
+          <ToggleSection show={this.state.showChemicalIdentifiers} />
+        </div>
+      </ListGroupItem>
+    );
+  }
+
+  chemicalIdentifiersItemContent(sample, show) {
+    if (!show) return false;
+    return (
+      <ListGroupItem>
+        {this.moleculeInchi(sample)}
+        {this.moleculeCanoSmiles(sample)}
+        {this.moleculeMolfile(sample)}
+        {this.moleculeCas()}
+      </ListGroupItem>
+    );
+  }
+
+  chemicalIdentifiersItem(sample) {
+    const show = this.state.showChemicalIdentifiers;
+    return (
+      <div
+        width="100%"
+        className={classNames({
+          'chem-identifiers-section': true,
+          decoupled: sample.decoupled
+        })}
+      >
+        {this.chemicalIdentifiersItemHeader(sample)}
+        {this.chemicalIdentifiersItemContent(sample, show)}
+      </div>
+    );
+  }
+
+  samplePropertiesTab(ind) {
+    const sample = this.state.sample || {};
+
+    return (
+      <Tab eventKey={ind} title="Properties" key={'Props' + sample.id.toString()}>
+        <ListGroupItem>
+          <SampleForm
+            sample={sample}
+            parent={this}
+            customizableField={this.customizableField}
+            enableSampleDecoupled={this.enableSampleDecoupled}
+            decoupleMolecule={this.decoupleMolecule}
+          />
+        </ListGroupItem>
+        <EditUserLabels element={sample} />
+        {this.elementalPropertiesItem(sample)}
+        {this.chemicalIdentifiersItem(sample)}
+      </Tab>
+    );
+  }
+
+  sampleContainerTab(ind) {
+    const { sample, currentUser } = this.state;
+    const isPub = !!(sample.publication && sample.publication.published_at);
+    return (
+      <Tab eventKey={ind} title="Analyses" key={'Container' + sample.id.toString()}>
+        <ListGroupItem style={{ paddingBottom: 20 }}>
+          <SampleDetailsContainers
+            sample={sample}
+            setState={(sample) => {this.setState(sample)}}
+            handleSampleChanged={this.handleSampleChanged}
+            handleSubmit={this.handleSubmit}
+            fromSample
+            publish={isPub}
+            isReviewer={!!currentUser.is_reviewer}
+          />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  sampleLiteratureTab(ind) {
+    const { sample } = this.state;
+    if (!sample) { return null; }
+    return (
+      <Tab
+        eventKey={ind}
+        title="References"
+        key={`Literature_${sample.id}`}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }} >
+          <SampleDetailsLiteratures
+            element={sample}
+          />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  sampleImportReadoutTab(ind) {
+    let sample = this.state.sample || {};
+    return (
+      <Tab
+        eventKey={ind}
+        title="Results"
+        key={`Results${sample.id.toString()}`}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }}>
+          <FormGroup controlId="importedReadoutInput">
+            <ControlLabel>Imported Readout</ControlLabel>
+            <InputGroup>
+              <FormControl
+                type="text"
+                value={sample.imported_readout || ''}
+                disabled
+                readOnly
+              />
+            </InputGroup>
+          </FormGroup>
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  moleculeComputedProps(ind) {
+    const { sample } = this.state;
+    const key = "computed_props_" + sample.id.toString();
+    if (!this.enableComputedProps) return <span key={key} />;
+
+    const title = (
+      <span>
+        <ComputedPropLabel cprops={sample.molecule_computed_props} />
+        &nbsp; Computed Properties
+      </span>
+    );
+
+    return (
+      <Tab
+        eventKey={ind}
+        title={title}
+        key={key}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }}>
+          <ComputedPropsContainer sample={sample} />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  fetchQcWhenNeeded(key) {
+    if (key !== 'qc_curation') return;
+    const { infers } = QcStore.getState();
+    const { sample } = this.state;
+    let isInStore = false;
+    infers.forEach((i) => {
+      if (i.sId === sample.id) isInStore = true;
+    });
+    if (isInStore) return;
+    QcActions.setLoading.defer();
+    QcActions.loadInfers.defer({ sample });
+  }
+
+  qualityCheckTab(ind) {
+    const { sample } = this.state;
+    if (!sample) { return null; }
+    return (
+      <Tab
+        eventKey={ind}
+        title="QC & curation"
+        key={`QC_${sample.id}_${ind}`}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }} >
+          <QcMain
+            sample={sample}
+          />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  nmrSimTab(ind) {
+    const { sample } = this.state;
+    if (!sample) { return null; }
+    return (
+      <Tab
+        eventKey={ind}
+        title="NMR Simulation"
+        key={`NMR_${sample.id}_${ind}`}
+      >
+        <ListGroupItem style={{ paddingBottom: 20 }} >
+          <NmrSimTab
+            sample={sample}
+          />
+        </ListGroupItem>
+      </Tab>
+    );
+  }
+
+  extraLabels() {
+    let labels = [];
+    for (let j = 0; j < XLabels.count; j += 1) {
+      labels.push(XLabels[`content${j}`]);
+    }
+    return labels;
+  }
+
+  sampleIsValid() {
+    const { sample, loadingMolecule, quickCreator } = this.state;
+    return (sample.isValid && !loadingMolecule) || sample.is_scoped == true || quickCreator;
+  }
+
+  saveBtn(sample, closeView = false) {
+    let submitLabel = (sample && sample.isNew) ? 'Create' : 'Save';
+    const isDisabled = !sample.can_update;
+    if (closeView) submitLabel += ' and close';
+
+    return (
+      <Button
+        id="submit-sample-btn"
+        bsStyle="warning"
+        onClick={() => this.handleSubmit(closeView)}
+        disabled={!this.sampleIsValid() || isDisabled}
+      >
+        {submitLabel}
+      </Button>
+    );
+  }
+
+  handleExportAnalyses(sample) {
+    this.setState({ startExport: true });
+    AttachmentFetcher.downloadZipBySample(sample.id)
+      .then(() => { this.setState({ startExport: false }); })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  sampleFooter() {
+    const { sample, startExport } = this.state;
+    const belongToReaction = sample.belongTo && sample.belongTo.type === 'reaction';
+    const hasAnalyses = !!(sample.analyses && sample.analyses.length > 0);
+    const downloadAnalysesBtn = (sample.isNew || !hasAnalyses) ? null : (
+      <Button bsStyle="info" disabled={!this.sampleIsValid() } onClick={() => this.handleExportAnalyses(sample)}>
+        Download Analysis {startExport ? <span>&nbsp;<i className="fa fa-spin fa-spinner" /></span> : null}
+      </Button>
+    );
+
+    const saveAndCloseBtn = belongToReaction && !sample.isNew ? this.saveBtn(sample, true) : null;
+    return (
+      <ButtonToolbar>
+        <Button bsStyle="primary" onClick={() => DetailActions.close(sample)}>
+          Close
+        </Button>
+        {this.saveBtn(sample)}
+        {saveAndCloseBtn}
+        {downloadAnalysesBtn}
+      </ButtonToolbar>
+    );
+  }
+
+  structureEditorModal(sample) {
+    const molfile = sample.molfile;
+    const hasParent = sample && sample.parent_id;
+    const hasChildren = sample && sample.children_count > 0;
+    return (
+      <StructureEditorModal
+        key={sample.id}
+        showModal={this.state.showStructureEditor}
+        onSave={this.handleStructureEditorSave.bind(this)}
+        onCancel={this.handleStructureEditorCancel.bind(this)}
+        molfile={molfile}
+        hasParent={hasParent}
+        hasChildren={hasChildren}
+      />
+    );
+  }
+
+  handleSelect(eventKey) {
+    UIActions.selectTab({ tabKey: eventKey, type: 'sample' });
+    this.fetchQcWhenNeeded(eventKey);
+  }
+
+  renderMolfileModal() {
+    const textAreaStyle = {
+      width: '500px',
+      height: '640px',
+      margin: '30px',
+      whiteSpace: 'pre-line',
+    };
+    if (this.state.showMolfileModal) {
+      let molfile = this.molfileInput.value;
+      molfile = molfile.replace(/\r?\n/g, '<br />');
+      return (
+        <Modal
+          show={this.state.showMolfileModal}
+          dialogClassName="importChemDrawModal"
+          onHide={this.handleMolfileClose}
+        >
+
+          <Modal.Header closeButton>
+            <Modal.Title>Molfile</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <div>
+              <FormGroup controlId="molfileInputModal">
+                <FormControl
+                  componentClass="textarea"
+                  style={textAreaStyle}
+                  readOnly={true}
+                  disabled={true}
+                  inputRef={(m) => { this.molfileInputModal = m; }}
+                  defaultValue={this.molfileInput.value || ''}
+                />
+              </FormGroup>
+            </div>
+            <div>
+              <Button bsStyle="warning" onClick={this.handleMolfileClose}>
+                Close
+              </Button>
+            </div>
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return (<div />);
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  isRepoSecretExternalLabel() {
+    const sample = this.state.sample || {};
+    const currentUser = this.state.currentUser || {};
+    if (sample.is_repo_public) {
+      if (currentUser.is_reviewer || currentUser.id === sample.created_by) return false;
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    const sample = this.state.sample || {};
+    const { visible } = this.state;
+    const tabContentsMap = {
+      properties: this.samplePropertiesTab('properties'),
+      analyses: this.sampleContainerTab('analyses'),
+      references: this.sampleLiteratureTab('references'),
+      results: this.sampleImportReadoutTab('results'),
+      qc_curation: this.qualityCheckTab('qc_curation')
+    };
+
+    if (this.enableComputedProps) {
+      tabContentsMap.computed_props = this.moleculeComputedProps('computed_props');
+    }
+
+    if (this.enableNmrSim) {
+      tabContentsMap.nmr_sim = this.nmrSimTab('nmr_sim');
+    }
+
+    const tabTitlesMap = {
+      qc_curation: 'QC & Curation',
+      computed_props: 'Computed Props',
+      nmr_sim: 'NMR Simulation'
+    };
+
+    let { showPublishSampleModal } = this.state
+
+    for (let j = 0; j < XTabs.count; j += 1) {
+      if (XTabs[`on${j}`](sample)) {
+        const NoName = XTabs[`content${j}`];
+        tabContentsMap[`xtab_${j}`] = (
+          <Tab eventKey={`xtab_${j}`} key={`xtab_${j}`} title={XTabs[`title${j}`]} >
+            <ListGroupItem style={{ paddingBottom: 20 }} >
+              <NoName sample={sample} />
+            </ListGroupItem>
+          </Tab>
+        );
+        tabTitlesMap[`xtab_${j}`] = XTabs[`title${j}`];
+      }
+    }
+
+    addSegmentTabs(sample, this.handleSegmentsChange, tabContentsMap);
+    const stb = [];
+    const tabContents = [];
+    visible.forEach((value) => {
+      const tabContent = tabContentsMap[value];
+      if (tabContent) { tabContents.push(tabContent); }
+      stb.push(value);
+    });
+
+    let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+    segmentKlasses =
+      segmentKlasses.filter(s => s.element_klass && s.element_klass.name === sample.type);
+    segmentKlasses.forEach((klass) => {
+      const visIdx = visible.indexOf(klass.label);
+      const idx = findIndex(sample.segments, o => o.segment_klass_id === klass.id);
+      if (visIdx < 0 && idx > -1) {
+        const tabContent = tabContentsMap[klass.label];
+        if (tabContent) { tabContents.push(tabContent); }
+        stb.push(klass.label);
+      }
+    });
+
+    const validateObjs = sample.validates && sample.validates.filter(v => v.value === false);
+    let validationBlock = null;
+    if (validateObjs && validateObjs.length > 0) {
+      const validateAssociate = sample.validates && sample.validates.filter(v => v.value === false && v.message.includes('associated'));
+      if (validateAssociate && validateAssociate.length > 0) {
+        validationBlock = (
+          <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
+            <strong>Submission Alert</strong>
+            <p>
+              This sample is associated with a Reaction and can not be published alone.
+            </p>
+            <Button bsSize="xsmall" onClick={() => this.handleAssociateClick()}>Go to Reaction&nbsp;<i className="icon-reaction" /></Button>
+            <span>&nbsp;&nbsp;or&nbsp;&nbsp;</span>
+            <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
+          </Alert>
+        );
+      } else {
+        validationBlock = (
+          <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
+            <strong>Submission Alert</strong>&nbsp;&nbsp;
+            <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
+            <br />
+            {
+              validateObjs.map(m => (
+                <div key={uuid.v1()}>{m.message}</div>
+              ))
+            }
+          </Alert>
+        );
+      }
+    }
+
+    const { pageMessage } = this.state;
+    const messageBlock = (pageMessage &&
+      (pageMessage.error.length > 0 || pageMessage.warning.length > 0)) ? (
+        <Alert bsStyle="warning" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
+          <strong>Structure Alert</strong>&nbsp;
+          <Button bsSize="xsmall" bsStyle="warning" onClick={() => this.setState({ pageMessage: null })}>Close Alert</Button>
+          <br />
+          {
+            pageMessage.error.map(m => (
+              <div key={uuid.v1()}>{m}</div>
+            ))
+          }
+          {
+            pageMessage.warning.map(m => (
+              <div key={uuid.v1()}>{m}</div>
+            ))
+          }
+        </Alert>
+      ) : null;
+
+    const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
+     this.state.activeTab) || visible.get(0);
+    const publication = sample.tag && sample.tag.taggable_data &&
+      sample.tag.taggable_data.publication;
+
+    return (
+      <Panel
+        className="element-panel-detail"
+        bsStyle={publication ? 'success' : (sample.isPendingToSave ? 'info' : 'primary')}
+      >
+        <Panel.Heading>{this.sampleHeader(sample)}{messageBlock}{validationBlock}</Panel.Heading>
+        <Panel.Body>
+          <Row><Col md={this.props.fullScreen && this.state.commentScreen ? 6 : 12}>
+            <div className={this.props.fullScreen ? 'full' : 'base'}>
+          {this.sampleInfo(sample)}
+          <ListGroup>
+            <ElementDetailSortTab
+              type="sample"
+              availableTabs={Object.keys(tabContentsMap)}
+              tabTitles={tabTitlesMap}
+              onTabPositionChanged={this.onTabPositionChanged}
+            />
+            {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
+            <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
+              {tabContents}
+            </Tabs>
+          <PublishSampleModal
+            show={showPublishSampleModal}
+            sample={sample}
+            onHide={() => this.showPublishSampleModal(false)}
+            onPublishRefreshClose={this.forcePublishRefreshClose}
+          />
+          </ListGroup>
+          {this.sampleFooter()}
+          {this.structureEditorModal(sample)}
+          {this.renderMolfileModal()}
+            </div>
+          </Col>
+            {
+              this.props.fullScreen && this.state.commentScreen ?
+                <Col md={6}>
+                  <div className={this.props.fullScreen ? 'full' : 'base'}>
+                    <SampleDetailsRepoComment sampleId={sample.id} />
+                  </div>
+                </Col>
+                :
+                <div />
+            }
+          </Row>
+        </Panel.Body>
+      </Panel>
+    )
+  }
+}
+
+SampleDetails.propTypes = {
+  sample: PropTypes.object,
+  toggleFullScreen: PropTypes.func,
+  toggleCommentScreen: PropTypes.func.isRequired,
+  fullScreen: PropTypes.bool.isRequired
+}
diff --git a/app/packs/src/components/SampleDetailsContainers.js b/app/packs/src/components/SampleDetailsContainers.js
new file mode 100644
index 000000000..c6b1487c2
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsContainers.js
@@ -0,0 +1,284 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+import Container from 'src/models/Container';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import { reOrderArr } from 'src/utilities/DndControl';
+import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
+
+import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
+import {
+  RndNotAvailable, RndNoAnalyses,
+  RndOrder, RndEdit
+} from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom';
+
+import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
+
+export default class SampleDetailsContainers extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      activeAnalysis: UIStore.getState().sample.activeAnalysis,
+      mode: 'edit',
+    };
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.addButton = this.addButton.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleUndo = this.handleUndo.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+    this.handleMove = this.handleMove.bind(this);
+    this.toggleAddToReport = this.toggleAddToReport.bind(this);
+    this.toggleMode = this.toggleMode.bind(this);
+    this.isEqCId = this.isEqCId.bind(this);
+    this.indexedContainers = this.indexedContainers.bind(this);
+    this.buildEmptyAnalyContainer = this.buildEmptyAnalyContainer.bind(this);
+    this.sortedContainers = this.sortedContainers.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIStoreChange);
+    TextTemplateActions.fetchTextTemplates('sample');
+  }
+
+  // componentWillReceiveProps(nextProps) {
+  // }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIStoreChange);
+  }
+
+  onUIStoreChange(state) {
+    if (state.sample.activeAnalysis !== this.state.activeAnalysis) {
+      this.setState({ activeAnalysis: state.sample.activeAnalysis });
+    }
+  }
+
+  handleChange(container) {
+    const { sample } = this.props;
+    // const analyses = sample.container.children.find(child => (
+    //   child.container_type === 'analyses'
+    // ));
+    // analyses.children.map((child, ind) => {
+    //   if (child.container_type === 'analysis' && child.id === container.id) {
+    //     analyses.children[ind] = container;
+    //   }
+    //   return null;
+    // });
+
+    this.props.handleSampleChanged(sample);
+  }
+
+  handleAdd() {
+    const { sample } = this.props;
+    const newContainer = this.buildEmptyAnalyContainer();
+
+    const sortedConts = this.sortedContainers(sample);
+    const newSortConts = [...sortedConts, newContainer];
+    const newIndexedConts = this.indexedContainers(newSortConts);
+
+    sample.analysesContainers()[0].children = newIndexedConts;
+    this.props.setState(prevState => ({ ...prevState, sample }),
+      this.handleAccordionOpen(newContainer.id),
+    );
+  }
+
+  handleMove(source, target) {
+    const { sample } = this.props;
+
+    const sortedConts = this.sortedContainers(sample);
+    const newSortConts = reOrderArr(source, target, this.isEqCId, sortedConts);
+    const newIndexedConts = this.indexedContainers(newSortConts);
+
+    sample.analysesContainers()[0].children = newIndexedConts;
+    this.props.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  sortedContainers(sample) {
+    const containers = sample.analysesContainers()[0].children;
+    return ArrayUtils.sortArrByIndex(containers);
+  }
+
+  buildEmptyAnalyContainer() {
+    const newContainer = Container.buildEmpty();
+    newContainer.container_type = "analysis";
+    newContainer.extended_metadata.content = { ops: [{ insert: '\n' }] };
+    return newContainer;
+  }
+
+  isEqCId(container, tagEl) {
+    return container.id === tagEl.cId;
+  }
+
+  indexedContainers(containers) {
+    return containers.map((c, i) => {
+      const container = c;
+      container.extended_metadata.index = i;
+      return container;
+    });
+  }
+
+  handleRemove(container) {
+    const { sample } = this.props;
+    container.is_deleted = true;
+
+    this.props.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  handleUndo(container) {
+    const { sample } = this.props;
+    container.is_deleted = false;
+
+    this.props.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  handleAccordionOpen(newKey) {
+    this.setState((prevState) => {
+      const prevKey = prevState.activeAnalysis;
+      return {
+        ...prevState,
+        mode: 'edit',
+        activeAnalysis: prevKey === newKey ? 0 : newKey,
+      };
+    });
+  }
+
+  addButton() {
+    const { readOnly, sample } = this.props;
+    if (readOnly) {
+      return null;
+    }
+    return (
+      <Button
+        className="button-right"
+        bsSize="xsmall"
+        bsStyle="success"
+        onClick={this.handleAdd}
+        disabled={!sample.can_update}
+      >
+        <i className="fa fa-plus" />&nbsp;
+        Add analysis
+      </Button>
+    );
+  }
+
+  toggleAddToReport(container) {
+    if (this.props.publish) {
+      // TODO: use null and true because the Boolean value is coerced into string: check why
+      // container.extended_metadata.publish = container.extended_metadata.publish ? null : true;
+      if (container.extended_metadata.publish && (container.extended_metadata.publish === true || container.extended_metadata.publish === 'true')) {
+        container.extended_metadata.publish = false;
+      } else {
+        container.extended_metadata.publish = true;
+      }
+    } else {
+      container.extended_metadata.report = !container.extended_metadata.report;
+    }
+    this.handleChange(container);
+  }
+
+  toggleMode() {
+    const { mode } = this.state;
+    if (mode === 'edit') {
+      this.setState({ mode: 'order' });
+    } else {
+      this.setState({ mode: 'edit' });
+    }
+  }
+
+  render() {
+    const { activeAnalysis, mode } = this.state;
+    const {
+      readOnly, sample, handleSubmit, handleSampleChanged,
+    } = this.props;
+    const isDisabled = !sample.can_update;
+
+    if (sample.container == null) return <RndNotAvailable />;
+
+    const analyContainer = sample.analysesContainers();
+
+    if (analyContainer.length === 1 && analyContainer[0].children.length > 0) {
+      const orderContainers = ArrayUtils.sortArrByIndex(analyContainer[0].children);
+      let content = null;
+
+      if (mode === 'order') {
+        content = (
+          <RndOrder
+            sample={sample}
+            mode={mode}
+            orderContainers={orderContainers}
+            readOnly={readOnly}
+            isDisabled={isDisabled}
+            addButton={this.addButton}
+            handleRemove={this.handleRemove}
+            handleSubmit={handleSubmit}
+            handleMove={this.handleMove}
+            handleAccordionOpen={this.handleAccordionOpen}
+            handleUndo={this.handleUndo}
+            toggleAddToReport={this.toggleAddToReport}
+            toggleMode={this.toggleMode}
+            publish={this.props.publish}
+          />
+        );
+      } else {
+        content = (
+          <RndEdit
+            sample={sample}
+            mode={mode}
+            orderContainers={orderContainers}
+            activeAnalysis={activeAnalysis}
+            handleChange={this.handleChange}
+            handleUndo={this.handleUndo}
+            handleRemove={this.handleRemove}
+            handleSubmit={handleSubmit}
+            handleAccordionOpen={this.handleAccordionOpen}
+            toggleAddToReport={this.toggleAddToReport}
+            readOnly={readOnly}
+            isDisabled={isDisabled}
+            addButton={this.addButton}
+            toggleMode={this.toggleMode}
+            publish={this.props.publish}
+            isReviewer={this.props.isReviewer || false}
+          />
+        );
+      }
+
+      return (
+        <div>
+          {content}
+          <ViewSpectra
+            sample={sample}
+            handleSampleChanged={handleSampleChanged}
+            handleSubmit={handleSubmit}
+          />
+          <NMRiumDisplayer
+            sample={sample}
+            handleSampleChanged={handleSampleChanged}
+            handleSubmit={handleSubmit}
+          />
+        </div>
+      );
+    }
+    return (
+      <RndNoAnalyses
+        addButton={this.addButton}
+      />
+    );
+  }
+}
+
+SampleDetailsContainers.propTypes = {
+  readOnly: PropTypes.bool,
+  sample: PropTypes.object.isRequired,
+  handleSampleChanged: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  isReviewer: PropTypes.bool,
+};
+
+SampleDetailsContainers.defaultProps = {
+  readOnly: false,
+  isReviewer: false
+}
diff --git a/app/packs/src/components/SampleDetailsContainersAux.js b/app/packs/src/components/SampleDetailsContainersAux.js
new file mode 100644
index 000000000..7e693c33b
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsContainersAux.js
@@ -0,0 +1,511 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, Checkbox, OverlayTrigger, Tooltip,
+  MenuItem, SplitButton, ButtonGroup
+} from 'react-bootstrap';
+import QuillViewer from 'src/components/QuillViewer';
+import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import { stopBubble } from 'src/utilities/DomHelper';
+import ImageModal from 'src/components/common/ImageModal';
+import SpectraActions from 'src/stores/alt/actions/SpectraActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import { BuildSpcInfos, JcampIds, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
+import { hNmrCheckMsg, cNmrCheckMsg, msCheckMsg, instrumentText } from 'src/utilities/ElementUtils';
+import { contentToText } from 'src/utilities/quillFormat';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import { chmoConversions } from 'src/components/OlsComponent';
+import { previewContainerImage } from 'src/utilities/imageHelper';
+import MolViewerListBtn from 'src/components/viewer/MolViewerListBtn';
+import MolViewerSet from 'src/components/viewer/MolViewerSet';
+import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
+import MatrixCheck from 'src/components/common/MatrixCheck';
+
+import { PublishedTag } from './PublishCommon';
+import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
+
+const qCheckPass = () => (
+  <div style={{ display: 'inline', color: 'green' }}>
+    &nbsp;
+    <i className="fa fa-check" />
+  </div>
+);
+
+const qCheckFail = (msg, kind, atomNum = '') => (
+  <div style={{ display: 'inline', color: 'red' }}>
+    &nbsp;
+    (<sup>{atomNum}</sup>{kind} {msg})
+  </div>
+);
+
+const qCheckMsg = (sample, container) => {
+  if (sample.can_publish === false && sample.can_update === false) { return ''; }
+  if (sample.molecule && container.extended_metadata &&
+    ((typeof container.extended_metadata.kind === 'undefined' || container.extended_metadata.kind == null ||
+      container.extended_metadata.kind.split('|').length < 2) ||
+      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId
+        && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId
+        && !container.extended_metadata.kind.split('|')[1].includes('mass spectrometry'))
+    )) {
+    return '';
+  }
+  const str = container.extended_metadata && contentToText(container.extended_metadata.content);
+
+  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+    const msg = hNmrCheckMsg(sample.molecule_formula, str);
+    return msg === '' ? qCheckPass() : qCheckFail(msg, 'H', '1');
+  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+    const msg = cNmrCheckMsg(sample.molecule_formula, str);
+    return msg === '' ? qCheckPass() : qCheckFail(msg, 'C', '13');
+  } else if (container.extended_metadata.kind.split('|')[1].includes('mass spectrometry')) {
+    const msg = msCheckMsg(sample.molecule.exact_molecular_weight, str);
+    return msg === '' ? qCheckPass() : qCheckFail(msg, 'MS', '');
+  }
+  return '';
+};
+
+const isNMRKind = (container) => {
+  if (container.extended_metadata.kind) {
+    return container.extended_metadata.kind.includes('NMR');
+  }
+  return false;
+}
+
+const SpectraEditorBtn = ({
+  sample, spcInfos, hasJcamp, hasChemSpectra,
+  toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
+  toggleNMRDisplayerModal, hasNMRium, isReviewer
+}) => (
+  <span>
+    <OverlayTrigger
+    placement="bottom"
+    delayShow={500}
+    overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
+  >{spcInfos.length > 0 ? (
+    <ButtonGroup className="button-right">
+      <SplitButton
+        id="spectra-editor-split-button"
+        pullRight
+        bsStyle="info"
+        bsSize="xsmall"
+        title={<i className="fa fa-area-chart" />}
+        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+        onClick={toggleSpectraModal}
+        disabled={!(spcInfos.length > 0) || !hasChemSpectra}
+      >
+        <MenuItem
+          id="regenerate-spectra"
+          key="regenerate-spectra"
+          onSelect={(eventKey, event) => {
+            event.stopPropagation();
+            confirmRegenerate(event);
+          }}
+          disabled={!hasJcamp || !sample.can_update}
+        >
+          <i className="fa fa-refresh" /> Reprocess
+        </MenuItem>
+        {
+          hasEditedJcamp && isReviewer ?
+            (<MenuItem
+              id="regenerate-edited-spectra"
+              key="regenerate-edited-spectra"
+              onSelect={(eventKey, event) => {
+                event.stopPropagation();
+                confirmRegenerateEdited(event);
+              }}
+            >
+              <i className="fa fa-refresh" /> Regenerate .edit.jdx files
+            </MenuItem>) : <span></span>
+        }
+      </SplitButton>
+    </ButtonGroup>
+  ) : (
+    <Button
+      bsStyle="warning"
+      bsSize="xsmall"
+      className="button-right"
+      onClick={confirmRegenerate}
+      disabled={!hasJcamp || !sample.can_update || !hasChemSpectra}
+    >
+      <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
+    </Button>
+  )}
+  </OverlayTrigger>
+
+  {
+        hasNMRium ? (
+            <OverlayTrigger
+            placement="top"
+            delayShow={500}
+            overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
+            >
+                <ButtonGroup className="button-right">
+                    <Button
+                    id="spectra-editor-split-button"
+                    pullRight
+                    bsStyle="info"
+                    bsSize="xsmall"
+                    onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+                    onClick={toggleNMRDisplayerModal}
+                    disabled={!hasJcamp || !sample.can_update}
+                    >
+                    <i className="fa fa-bar-chart"/>
+                    </Button>
+                </ButtonGroup>
+            </OverlayTrigger>
+        ) : null
+    }
+  </span>
+);
+
+SpectraEditorBtn.propTypes = {
+  sample: PropTypes.object,
+  hasJcamp: PropTypes.bool,
+  spcInfos: PropTypes.array,
+  hasChemSpectra: PropTypes.bool,
+  toggleSpectraModal: PropTypes.func.isRequired,
+  confirmRegenerate: PropTypes.func.isRequired,
+  confirmRegenerateEdited: PropTypes.func.isRequired,
+  hasEditedJcamp: PropTypes.bool,
+  toggleNMRDisplayerModal: PropTypes.func.isRequired,
+  hasNMRium: PropTypes.bool,
+};
+
+SpectraEditorBtn.defaultProps = {
+  hasJcamp: false,
+  spcInfos: [],
+  sample: {},
+  hasChemSpectra: false,
+  hasEditedJcamp: false,
+  hasNMRium: false,
+};
+
+const editModeBtn = (toggleMode, isDisabled) => (
+  <Button
+    bsSize="xsmall"
+    bsStyle="primary"
+    onClick={toggleMode}
+    disabled={isDisabled}
+  >
+    <span>
+      <i className="fa fa-edit" />&nbsp;
+      Edit mode
+    </span>
+  </Button>
+);
+
+const orderModeBtn = (toggleMode, isDisabled) => (
+  <Button
+    bsSize="xsmall"
+    bsStyle="success"
+    onClick={toggleMode}
+    disabled={isDisabled}
+  >
+    <span>
+      <i className="fa fa-reorder" />&nbsp;
+      Order mode
+    </span>
+  </Button>
+);
+
+const AnalysisModeBtn = (mode, toggleMode, isDisabled) => {
+  switch (mode) {
+    case 'order':
+      return orderModeBtn(toggleMode, isDisabled);
+    default:
+      return editModeBtn(toggleMode, isDisabled);
+  }
+};
+
+const undoBtn = (container, mode, handleUndo) => {
+  const clickUndo = () => handleUndo(container);
+
+  if (mode === 'edit') {
+    return (
+      <Button
+        className="pull-right"
+        bsSize="xsmall"
+        bsStyle="danger"
+        onClick={clickUndo}
+      >
+        <i className="fa fa-undo" />
+      </Button>
+    );
+  }
+  return null;
+};
+
+const HeaderDeleted = ({ container, handleUndo, mode }) => {
+  const mKind = container.extended_metadata.kind;
+  const mStatus = container.extended_metadata.status;
+  const kind = (mKind && mKind !== '') ? ` - Type: ${(mKind.split('|')[1] || mKind).trim()}` : '';
+  const status = (mStatus && mStatus !== '') ? ` - Status: ${mStatus}` : '';
+
+  return (
+    <div className="analysis-header-delete">
+      <strike>
+        {container.name}
+        {kind}
+        {status}
+      </strike>
+      <div className="button-right undo-middle">
+        {undoBtn(container, mode, handleUndo)}
+      </div>
+    </div>
+  );
+};
+
+const headerBtnGroup = (
+  container, sample, mode, handleRemove, handleSubmit,
+  toggleAddToReport, isDisabled, readOnly,
+  publish, isReviewer
+) => {
+  if (mode !== 'edit') {
+    return null;
+  }
+
+  const inReport = container.extended_metadata.report;
+  const confirmDelete = (e) => {
+    e.stopPropagation();
+    if (confirm('Delete the analysis?')) {
+      handleRemove(container);
+    }
+  };
+  const onToggleAddToReport = (e) => {
+    e.stopPropagation();
+    toggleAddToReport(container);
+  };
+
+  // spcInfos = [ { value, label, title, idSp, idAe, idx, ... }, ...]
+  const spcInfos = BuildSpcInfos(sample, container);
+
+  const xm = container && container.extended_metadata;
+  const typeMissing = !xm.kind || ((xm.kind || '').split('|').length < 2);
+  const statusMissing = (xm.status || '') !== 'Confirmed';
+  const nmrMissing = !isNmrPass(container, sample);
+  const datasetMissing = !isDatasetPass(container);
+  const btnTip = () => {
+    const tip = [];
+    if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
+      if (typeMissing) tip.push('Type is invalid.');
+      if (statusMissing) tip.push('Status must be Confirmed.');
+      if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
+      if (datasetMissing) {
+        tip.push('Dataset is incomplete. Please check that: ');
+        tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
+        tip.push('2. the instrument field is not empty.');
+      }
+      return tip.join('\r\n');
+    }
+    return 'publish this analysis';
+  };
+
+  const addToLabelBtn = publish ? (
+   (xm.public_analysis ? null :
+     <OverlayTrigger
+       placement="left"
+       overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip()}</Tooltip>}
+     >
+       <div>
+      <Checkbox
+        onClick={onToggleAddToReport}
+        // TODO: use null and true because the Boolean value is coerced into string: check why
+            defaultChecked={(xm && (xm.publish && (xm.publish === true || xm.publish === 'true')) && !xm.public_analysis && xm.kind && !statusMissing && !nmrMissing && !datasetMissing) ? true : false}
+        disabled={!!xm.public_analysis || typeMissing || statusMissing || nmrMissing || datasetMissing}
+      >
+        {
+              (!!xm.public_analysis || typeMissing || statusMissing || nmrMissing || datasetMissing) ?
+                <span style={{ color: 'red' }}>Add to publication</span>
+                :
+                <span>Add to publication</span>
+        }
+      </Checkbox>
+      </div>
+    </OverlayTrigger>
+  )) : (
+    <Checkbox
+      onClick={onToggleAddToReport}
+      defaultChecked={inReport}
+      disabled={!sample.can_update}
+    >
+      <span>Add to Report</span>
+    </Checkbox>
+  );
+
+  const toggleSpectraModal = (e) => {
+    e.stopPropagation();
+    SpectraActions.ToggleModal();
+    SpectraActions.LoadSpectra.defer(spcInfos); // going to fetch files base on spcInfos
+  };
+
+  //process open NMRium
+  const toggleNMRDisplayerModal = (e) => {
+    const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(sample, container);
+    e.stopPropagation();
+    SpectraActions.ToggleModalNMRDisplayer();
+    SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
+  }
+
+  const jcampIds = JcampIds(container);
+  const hasJcamp = jcampIds.orig.length > 0;
+  const confirmRegenerate = (e) => {
+    e.stopPropagation();
+    if (confirm('Regenerate spectra?')) {
+      LoadingActions.start();
+      SpectraActions.Regenerate(jcampIds, handleSubmit);
+    }
+  };
+
+  const hasEditedJcamp = jcampIds.edited.length > 0;
+  const confirmRegenerateEdited = (e) => {
+    e.stopPropagation();
+    if (confirm('Regenerate edited spectra?\nWARNING: This process will override the simulated signals')) {
+      LoadingActions.start();
+      SpectraActions.RegenerateEdited(jcampIds, sample.molfile, () => {
+        LoadingActions.stop();
+      });
+    }
+  }
+
+  const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
+  const { chmos } = UserStore.getState();
+  const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
+
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  const enableMoleculeViewer = MatrixCheck(currentUser.matrix, MolViewerSet.PK);
+
+  return (
+    <div className="upper-btn">
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        className="button-right"
+        disabled={readOnly || isDisabled}
+        onClick={confirmDelete}
+      >
+        <i className="fa fa-trash" />
+      </Button>
+      <PrintCodeButton
+        element={sample}
+        analyses={[container]}
+        ident={container.id}
+      />
+      <SpectraEditorBtn
+        sample={sample}
+        hasJcamp={hasJcamp}
+        spcInfos={spcInfos}
+        hasChemSpectra={hasChemSpectra}
+        hasEditedJcamp={hasEditedJcamp}
+        toggleSpectraModal={toggleSpectraModal}
+        confirmRegenerate={confirmRegenerate}
+        confirmRegenerateEdited={confirmRegenerateEdited}
+        toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+        hasNMRium={hasNMRium}
+        isReviewer={isReviewer}
+        confirmRegenerateEdited={confirmRegenerateEdited}
+        toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+        hasNMRium={hasNMRium}
+      />
+      <span className="button-right">
+        <MolViewerListBtn el={sample} container={container} isPublic={false} disabled={!enableMoleculeViewer} />
+      </span>
+      <span
+        className="button-right add-to-report"
+        onClick={stopBubble}
+      >
+        {addToLabelBtn}
+      </span>
+    </div>
+  );
+};
+
+const HeaderNormal = ({
+  sample, container, mode, readOnly, isDisabled, serial,
+  handleRemove, handleSubmit, handleAccordionOpen, toggleAddToReport,
+  publish,isReviewer
+}) => {
+  const clickToOpen = () => handleAccordionOpen(serial);
+
+  let kind = container.extended_metadata.kind || '';
+  kind = (kind.split('|')[1] || kind).trim();
+  let insText = '';
+  if (typeof publish === 'undefined' || publish === null || publish === false) {
+    insText = instrumentText(container);
+  }
+  const status = container.extended_metadata.status || '';
+  const previewImg = previewContainerImage(container);
+  const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
+  const contentOneLine = {
+    ops: content.ops.map((x) => {
+      const c = Object.assign({}, x);
+      if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
+      return c;
+    }),
+  };
+  let hasPop = true;
+  let fetchNeeded = false;
+  let fetchId = 0;
+  if (previewImg.startsWith('data:image')) {
+    fetchNeeded = true;
+    fetchId = container.preview_img.id;
+  } else {
+    hasPop = false;
+  }
+  const nmrMissing = !isNmrPass(container, sample);
+
+  let statusChk = (status !== 'Confirmed' || nmrMissing);
+  if (sample.can_publish === false && sample.can_update === false) {
+    statusChk = false;
+  }
+
+  return (
+    <div
+      className={`analysis-header ${mode === 'edit' ? '' : 'order'}`}
+      onClick={clickToOpen}
+    >
+      <div className="preview">
+        <ImageModal
+          hasPop={hasPop}
+          previewObject={{
+            src: previewImg
+          }}
+          popObject={{
+            title: container.name,
+            src: previewImg,
+            fetchNeeded,
+            fetchId
+          }}
+        />
+      </div>
+      <div className="abstract">
+        {
+          headerBtnGroup(
+            container, sample, mode, handleRemove, handleSubmit,
+            toggleAddToReport, isDisabled, readOnly,
+            publish, isReviewer
+          )
+        }
+        <div className="lower-text">
+          <div className="main-title">
+            {container.name}
+          </div>
+          <div className="sub-title" style={kind === '' ? { color: 'red' } : null}>
+            Type: {kind}
+          </div>
+          <div className="sub-title">
+            <span style={statusChk ? { color: 'red' } : null}>Status:</span> {status} {qCheckMsg(sample, container)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}
+          </div>
+          <div className="desc sub-title">
+            <span style={{ float: 'left', marginRight: '5px' }}>
+              Content:
+            </span>
+            <QuillViewer value={contentOneLine} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { HeaderDeleted, HeaderNormal, AnalysisModeBtn };
diff --git a/app/packs/src/components/SampleDetailsContainersCom.js b/app/packs/src/components/SampleDetailsContainersCom.js
new file mode 100644
index 000000000..e46bc6db5
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsContainersCom.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import { PanelGroup, Panel } from 'react-bootstrap';
+import ContainerComponent from './ContainerComponent';
+import ContainerRow from './SampleDetailsContainersDnd';
+import {
+  HeaderDeleted,
+  HeaderNormal,
+  AnalysisModeBtn
+} from './SampleDetailsContainersAux';
+
+const RndNotAvailable = () => (
+  <div>
+    <p className="noAnalyses-warning">
+      Not available.
+    </p>
+  </div>
+);
+
+const RndNoAnalyses = ({ addButton }) => (
+  <div>
+    <p>{addButton()}</p>
+    <p className="noAnalyses-warning">
+      There are currently no Analyses.
+    </p>
+  </div>
+);
+
+const RndOrder = ({
+  sample, mode, readOnly, isDisabled, handleRemove, handleSubmit,
+  handleMove, handleUndo, handleAccordionOpen, toggleAddToReport, toggleMode,
+  orderContainers, addButton, publish
+}) => {
+  return (
+    <div>
+      <p>{AnalysisModeBtn(mode, toggleMode, isDisabled)}{addButton()}</p>
+      {
+        orderContainers.map((container, i) => {
+          const id = container.id || `fake_${i}`;
+          return (
+            <ContainerRow
+              sample={sample}
+              mode={mode}
+              container={container}
+              readOnly={readOnly}
+              isDisabled={isDisabled}
+              key={`${id}CRowOrder`}
+              addButton={addButton}
+              handleMove={handleMove}
+              handleRemove={handleRemove}
+              handleSubmit={handleSubmit}
+              handleAccordionOpen={handleAccordionOpen}
+              handleUndo={handleUndo}
+              toggleAddToReport={toggleAddToReport}
+              publish={publish}
+            />
+          );
+        })
+      }
+      <p>{addButton()}</p>
+    </div>
+  );
+};
+
+const panelOnSelect = () => {};
+
+const RndEdit = ({
+  sample, mode, handleRemove, handleSubmit, handleAccordionOpen,
+  toggleAddToReport, toggleMode, activeAnalysis, orderContainers, readOnly,
+  isDisabled, addButton, handleChange, handleUndo,
+  publish, isReviewer
+}) => {
+  const headerDeletedFunc = container => (
+    <HeaderDeleted
+      container={container}
+      handleUndo={handleUndo}
+      mode={mode}
+    />
+  );
+
+  const headerNormalFunc = (container, serial) => (
+    <HeaderNormal
+      sample={sample}
+      container={container}
+      mode={mode}
+      serial={serial}
+      handleUndo={handleUndo}
+      readOnly={readOnly}
+      isDisabled={isDisabled}
+      handleRemove={handleRemove}
+      handleSubmit={handleSubmit}
+      handleAccordionOpen={handleAccordionOpen}
+      toggleAddToReport={toggleAddToReport}
+      publish={publish}
+      isReviewer={isReviewer || false}
+    />
+  );
+
+  return (
+    <div>
+      { publish ? null :
+      <p>{AnalysisModeBtn(mode, toggleMode, isDisabled)}{addButton()}</p>
+      }
+      <PanelGroup
+        id="editable-analysis-list"
+        defaultActiveKey={0}
+        activeKey={activeAnalysis}
+        onSelect={panelOnSelect}
+        accordion
+      >
+        {orderContainers.map((container, i) => {
+          const id = container.id || `fake_${i}`;
+          if (container.is_deleted) {
+            return (
+              <Panel
+                eventKey={id}
+                key={`${id}CRowEdit`}
+              >
+                <Panel.Heading>{headerDeletedFunc(container)}</Panel.Heading>
+              </Panel>
+            );
+          }
+
+          return (
+            <Panel
+              eventKey={id}
+              key={`${id}CRowEdit`}
+            >
+              <Panel.Heading>{headerNormalFunc(container, id)}</Panel.Heading>
+              <Panel.Body collapsible>
+                <ContainerComponent
+                  templateType="sample"
+                  readOnly={readOnly}
+                  container={container}
+                  disabled={isDisabled}
+                  onChange={handleChange}
+                />
+              </Panel.Body>
+            </Panel>
+          );
+        })}
+      </PanelGroup>
+      <p>{addButton()}</p>
+    </div>
+  );
+};
+
+export { RndNotAvailable, RndNoAnalyses, RndOrder, RndEdit };
diff --git a/app/packs/src/components/SampleDetailsContainersDnd.js b/app/packs/src/components/SampleDetailsContainersDnd.js
new file mode 100644
index 000000000..85dd1e4cd
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsContainersDnd.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { DragSource, DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import { HeaderDeleted, HeaderNormal } from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux';
+
+const orderSource = {
+  beginDrag(props) {
+    const { container, sample } = props;
+    return { cId: container.id, sId: sample.id };
+  },
+};
+
+const orderTarget = {
+  drop(targetProps, monitor) {
+    const { container, sample, handleMove } = targetProps;
+    const tgTag = { cId: container.id, sId: sample.id };
+    const scTag = monitor.getItem();
+    if (tgTag.sId === scTag.sId && tgTag.cId !== scTag.cId) {
+      handleMove(scTag, tgTag);
+    }
+  },
+};
+
+const orderDragCollect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const orderDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+});
+
+const ContainerRow = ({
+  sample, container, mode, readOnly, isDisabled, handleRemove,
+  handleSubmit, handleAccordionOpen, toggleAddToReport, handleUndo,
+  connectDragSource, connectDropTarget, isDragging, isOver, canDrop, publish
+}) => {
+  const style = {};
+  if (canDrop) {
+    style.borderStyle = 'dashed';
+    style.borderWidth = 2;
+  }
+  if (isOver) {
+    style.borderColor = '#337ab7';
+  }
+  if (isDragging) {
+    style.opacity = 0.2;
+  }
+
+  const oPanelCN = container.is_deleted ? "order-panel-delete" : "order-panel";
+
+  return compose(connectDragSource, connectDropTarget)(
+    <div className={oPanelCN} style={style}>
+      <div className="dnd-btn">
+        <span className="text-info fa fa-arrows" />
+      </div>
+      {
+        container.is_deleted
+          ? <HeaderDeleted
+            container={container}
+            handleUndo={handleUndo}
+            mode={mode}
+          />
+          : <HeaderNormal
+            sample={sample}
+            container={container}
+            mode={mode}
+            handleUndo={handleUndo}
+            readOnly={readOnly}
+            isDisabled={isDisabled}
+            handleRemove={handleRemove}
+            handleSubmit={handleSubmit}
+            handleAccordionOpen={handleAccordionOpen}
+            toggleAddToReport={toggleAddToReport}
+            publish={publish}
+          />
+      }
+    </div>,
+  );
+};
+
+export default compose(
+  DragSource(DragDropItemTypes.CONTAINER, orderSource, orderDragCollect),
+  DropTarget(DragDropItemTypes.CONTAINER, orderTarget, orderDropCollect),
+)(ContainerRow);
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
new file mode 100644
index 000000000..b70cc6d64
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsRepoComment.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import ReviewStore from '../components/stores/ReviewStore';
+import RepoSampleDetails from '../libHome/RepoSampleDetails';
+import ReviewActions from './actions/ReviewActions';
+
+export default class SampleDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      element: null,
+      review_info: {}
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    ReviewStore.listen(this.onStoreChange);
+    LoadingActions.start();
+    ReviewActions.fetchSample(this.props.sampleId);
+  }
+
+  componentWillUnmount() {
+    ReviewStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleReviewUpdate(review) {
+    this.setState({ review });
+  }
+
+  render() {
+    const { element, review_info } = this.state;
+    return element && element.sample && element.publication ?
+      (
+        <RepoSampleDetails
+          element={element}
+          canComment
+          review_info={review_info}
+          onReviewUpdate={this.handleReviewUpdate}
+          review={this.state.review || {}}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+SampleDetailsRepoComment.propTypes = {
+  sampleId: PropTypes.number.isRequired,
+};
diff --git a/app/packs/src/components/SampleDetailsSolvents.js b/app/packs/src/components/SampleDetailsSolvents.js
new file mode 100644
index 000000000..5a54cc5e2
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsSolvents.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ListGroup, ListGroupItem, Collapse, Button, ButtonGroup
+} from 'react-bootstrap';
+import Sample from './models/Sample';
+import Molecule from './models/Molecule';
+import SampleDetailsSolventsDnd from './SampleDetailsSolventsDnd';
+
+
+export default class SampleDetailsSolvents extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { sample } = props;
+    this.state = {
+      open: false,
+      sample: sample
+    };
+
+    this.dropSample = this.dropSample.bind(this);
+    this.deleteSolvent = this.deleteSolvent.bind(this);
+    this.onChangeSolvent = this.onChangeSolvent.bind(this);
+  }
+
+  onChangeSolvent(solvent) {
+    const { sample } = this.state;
+    sample.updateSolvent(solvent);
+    this.props.onChange(sample);
+  }
+
+  dropSample(srcSample, tagMaterial, tagGroup, extLabel, isNewSample = false) {
+    const { sample } = this.state;
+    let splitSample;
+
+    if (srcSample instanceof Molecule || isNewSample) {
+      // Create new Sample with counter
+      splitSample = Sample.buildNew(srcSample, sample.collection_id, tagGroup);
+    } else if (srcSample instanceof Sample) {
+      splitSample = srcSample.buildChild();
+    }
+
+    sample.addSolvent(splitSample);
+    this.props.onChange(sample);
+  }
+
+  deleteSolvent(solvent) {
+    const { sample } = this.state;
+    sample.deleteSolvent(solvent);
+    this.props.onChange(sample);
+  }
+
+  solventCollapseBtn() {
+    const { open } = this.state;
+    const arrow = open
+      ? <i className="fa fa-angle-double-up" />
+      : <i className="fa fa-angle-double-down" />;
+    return (
+      <ButtonGroup vertical block>
+        <Button
+          id="Solvents"
+          bsSize="xsmall"
+          style={{ backgroundColor: '#ddd' }}
+          onClick={() => this.setState({ open: !open })}
+        >{arrow} &nbsp; Solvents
+        </Button>
+      </ButtonGroup>
+    );
+  }
+
+  render() {
+    const {
+      sample, isOver, canDrop
+    } = this.props;
+    const minPadding = { padding: '1px 2px 2px 0px' };
+    const style = {
+      padding: '2px 5px',
+    };
+    if (isOver && canDrop) {
+      style.borderStyle = 'dashed';
+      style.borderColor = '#337ab7';
+    } else if (canDrop) {
+      style.borderStyle = 'dashed';
+    }
+    return (
+      <div>
+        <ListGroup fill="true">
+          <ListGroupItem style={minPadding}>
+            { this.solventCollapseBtn() }
+            <Collapse in={this.state.open}>
+              <div>
+                <SampleDetailsSolventsDnd
+                  sample={sample}
+                  dropSample={this.dropSample}
+                  deleteSolvent={this.deleteSolvent}
+                  onChangeSolvent={this.onChangeSolvent}
+                />
+              </div>
+            </Collapse>
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+}
+
+SampleDetailsSolvents.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  onChange: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
+
+SampleDetailsSolvents.defaultProps = {
+  canDrop: true,
+  isOver: false
+};
diff --git a/app/packs/src/components/SampleDetailsSolventsDnd.js b/app/packs/src/components/SampleDetailsSolventsDnd.js
new file mode 100644
index 000000000..508abf73b
--- /dev/null
+++ b/app/packs/src/components/SampleDetailsSolventsDnd.js
@@ -0,0 +1,227 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, FormControl, Glyphicon
+} from 'react-bootstrap';
+import { DropTarget } from 'react-dnd';
+import VirtualizedSelect from 'react-virtualized-select';
+import DragDropItemTypes from './DragDropItemTypes';
+import Sample from './models/Sample';
+import Molecule from './models/Molecule';
+import MoleculesFetcher from './fetchers/MoleculesFetcher';
+import { ionic_liquids } from './staticDropdownOptions/ionic_liquids';
+import { defaultMultiSolventsSmilesOptions } from './staticDropdownOptions/options';
+
+const target = {
+  drop(tagProps, monitor) {
+    const { dropSample } = tagProps;
+    const srcItem = monitor.getItem();
+    const srcType = monitor.getItemType();
+    if (srcType === DragDropItemTypes.SAMPLE) {
+      dropSample(srcItem.element);
+    } else if (srcType === DragDropItemTypes.MOLECULE) {
+      dropSample(
+        srcItem.element,
+        null,
+        true,
+      );
+    }
+  },
+  canDrop(tagProps, monitor) {
+    const srcType = monitor.getItemType();
+    const isCorrectType = srcType === DragDropItemTypes.SAMPLE
+      || srcType === DragDropItemTypes.MOLECULE;
+    return isCorrectType;
+  },
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+const SolventDetails = ({solvent, deleteSolvent, onChangeSolvent}) => {
+  if (!solvent) {
+    return (<></>)
+  }
+
+  const changeLabel = (event) => {
+    solvent.label = event.target.value;
+    onChangeSolvent(solvent);
+  }
+
+  const changeRatio = (event) => {
+    solvent.ratio = event.target.value;
+    onChangeSolvent(solvent);
+  }
+
+  // onChangeRatio
+  return (
+    <tr>
+      <td width="5%"></td>
+      <td width="50%">
+        <FormControl
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          type="text"
+          name="solvent_label"
+          value={solvent.label}
+          onChange={changeLabel}
+          disabled
+        />
+      </td>
+      <td width="26%">
+        <FormControl
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          type="number"
+          name="solvent_ratio"
+          value={solvent.ratio}
+          onChange={changeRatio}
+        />
+      </td>
+      <td>
+        <Button
+          bsStyle="danger"
+          bsSize="small"
+          onClick={() => deleteSolvent(solvent)}
+        >
+          <i className="fa fa-trash-o" />
+        </Button>
+      </td>
+    </tr>
+  )
+};
+
+const SolventsGroup = ({
+  materialGroup, sample, addDefaultSolvent, deleteSolvent, onChangeSolvent
+}) => {
+  const contents = []
+  const sampleSolvents = sample.solvent
+  if (sampleSolvents && sampleSolvents.length > 0) {
+    let key = -1
+    sampleSolvents.forEach((solv) => {
+      key += 1
+      contents.push((
+        <SolventDetails
+          key={key}
+          solvent={solv}
+          deleteSolvent={deleteSolvent}
+          onChangeSolvent={onChangeSolvent}
+        />
+      ))
+    })
+  }
+
+  const createDefaultSolvents = (event) => {
+    const solvent = event.value;
+    // MoleculesFetcher.fetchByMolfile(solvent.molfile)
+    const smi = solvent.smiles;
+    MoleculesFetcher.fetchBySmi(smi)
+      .then((result) => {
+        const molecule = new Molecule(result);
+        const d = molecule.density;
+        const solventDensity = solvent.density || 1;
+        molecule.density = (d && d > 0) || solventDensity;
+        addDefaultSolvent(molecule, null, materialGroup, solvent.external_label);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  };
+
+  const solventOptions = Object.keys(ionic_liquids).reduce(
+    (solvents, ionicLiquid) => solvents.concat({
+      label: ionicLiquid,
+      value: {
+        external_label: ionicLiquid,
+        smiles: ionic_liquids[ionicLiquid],
+        density: 1.0
+      }
+    }), defaultMultiSolventsSmilesOptions
+  );
+
+  return (
+    <div>
+      <table width="100%" className="reaction-scheme">
+        <thead>
+          <tr>
+            <th width="5%"></th>
+            <th width="95%">
+              <VirtualizedSelect
+                className="solvents-select"
+                name="default solvents"
+                multi={false}
+                options={solventOptions}
+                placeholder="Select solvents or drag-n-drop molecules from the sample list"
+                onChange={createDefaultSolvents}
+              />
+            </th>
+          </tr>
+        </thead>
+      </table>
+      <table width="100%" className="reaction-scheme">
+        <thead>
+          <tr>
+            <th width="5%"></th>
+            <th width="50%">Label</th>
+            <th width="26%">Ratio</th>
+            <th width="3%" />
+          </tr>
+        </thead>
+        <tbody>
+          {contents.map(item => item)}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+class SampleDetailsSolventsDnd extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      sample,
+      isOver, canDrop, connectDropTarget, dropSample, deleteSolvent, onChangeSolvent
+    } = this.props;
+    const style = {
+      padding: '2px 5px',
+    };
+    if (isOver && canDrop) {
+      style.borderStyle = 'dashed';
+      style.borderColor = '#337ab7';
+    } else if (canDrop) {
+      style.borderStyle = 'dashed';
+    }
+    return connectDropTarget(
+      <div style={style}>
+        <SolventsGroup
+          sample={sample}
+          addDefaultSolvent={dropSample}
+          deleteSolvent={deleteSolvent}
+          onChangeSolvent={onChangeSolvent}
+          />
+      </div>
+    );
+  }
+}
+
+export default DropTarget(
+  [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE],
+  target,
+  collect,
+)(SampleDetailsSolventsDnd);
+
+SampleDetailsSolventsDnd.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  headIndex: PropTypes.number,
+  onChangeSolvent: PropTypes.func.isRequired,
+  dropSample: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
+  deleteSolvent: PropTypes.func.isRequired,
+}
diff --git a/app/packs/src/components/SampleForm.js b/app/packs/src/components/SampleForm.js
new file mode 100644
index 000000000..830c302ba
--- /dev/null
+++ b/app/packs/src/components/SampleForm.js
@@ -0,0 +1,675 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, Checkbox, FormGroup, FormControl, InputGroup, ControlLabel,
+  Table, Glyphicon, Tabs, Tab, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import Select from 'react-select';
+import DetailActions from './actions/DetailActions';
+import NumeralInputWithUnitsCompo from './NumeralInputWithUnitsCompo';
+import TextRangeWithAddon from './TextRangeWithAddon';
+import { solventOptions } from './staticDropdownOptions/options';
+import SampleDetailsSolvents from './SampleDetailsSolvents';
+import PrivateNoteElement from './PrivateNoteElement';
+import NotificationActions from './actions/NotificationActions';
+
+
+export default class SampleForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      molarityBlocked: (props.sample.molarity_value || 0) <= 0,
+      isMolNameLoading: false,
+      moleculeFormulaWas: props.sample.molecule_formula,
+    };
+
+    this.handleFieldChanged = this.handleFieldChanged.bind(this);
+    this.updateMolName = this.updateMolName.bind(this);
+    this.updateStereoAbs = this.updateStereoAbs.bind(this);
+    this.updateStereoRel = this.updateStereoRel.bind(this);
+    this.addMolName = this.addMolName.bind(this);
+    this.showStructureEditor = this.showStructureEditor.bind(this);
+    this.handleRangeChanged = this.handleRangeChanged.bind(this);
+    this.handleSolventChanged = this.handleSolventChanged.bind(this);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps() {
+    this.setState({ isMolNameLoading: false });
+  }
+
+  formulaChanged() {
+    return this.props.sample.molecule_formula !== this.state.moleculeFormulaWas;
+  }
+
+  handleAmountChanged(amount) {
+    this.props.sample.setAmount(amount);
+  }
+
+  handleMolarityChanged(molarity) {
+    this.props.sample.setMolarity(molarity);
+    this.setState({ molarityBlocked: false });
+  }
+
+  handleDensityChanged(density) {
+    this.props.sample.setDensity(density);
+    this.setState({ molarityBlocked: true });
+  }
+
+  handleMolecularMassChanged(mass) {
+    this.props.sample.setMolecularMass(mass);
+  }
+
+  handleSolventChanged(sample) {
+    this.props.parent.setState({ sample });
+  }
+
+  showStructureEditor() {
+    this.props.parent.setState({
+      showStructureEditor: true,
+    });
+  }
+
+
+  structureEditorButton(isDisabled) {
+    return (
+      <Button
+        onClick={this.showStructureEditor}
+        disabled={isDisabled}
+      >
+        <Glyphicon glyph="pencil" />
+      </Button>
+    );
+  }
+
+  // Info button display info message when one hover over it
+  infoButton() {
+    return (
+      <div>
+        <OverlayTrigger placement="top" overlay={this.infoMessage()}>
+          <Button
+            className="btn btn-circle btn-sm btn-info"
+          >
+            <Glyphicon glyph="info-sign" />
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+
+  infoMessage = () => (
+    <Tooltip id="assignButton">
+      Information mirrored to the reaction table describing the content of pure
+      compound or amount of pure compound in a given solution
+    </Tooltip>
+  )
+
+  // Input components of sample details should be disabled if detail level
+  // does not allow to read their content
+  topSecretCheckbox(sample) {
+    if (sample.can_update) {
+      return (
+        <Checkbox
+          inputRef={(ref) => { this.topSecretInput = ref; }}
+          checked={sample.is_top_secret}
+          onChange={e => this.handleFieldChanged('is_top_secret', e.target.checked)}
+        >
+          Top secret
+        </Checkbox>
+      );
+    }
+
+    return (<span />);
+  }
+
+  decoupledCheckbox(sample) {
+    if (sample.can_update) {
+      return (
+        <Checkbox
+          inputRef={(ref) => { this.decoupledInput = ref; }}
+          checked={sample.decoupled}
+          onChange={e => this.handleFieldChanged('decoupled', e.target.checked)}
+        >
+          Decoupled
+        </Checkbox>
+      );
+    }
+
+    return (<span />);
+  }
+
+  openMolName(sample) {
+    this.setState({ isMolNameLoading: true });
+    DetailActions.updateMoleculeNames(sample);
+  }
+
+  addMolName(moleculeName) {
+    this.setState({ isMolNameLoading: true });
+    DetailActions.updateMoleculeNames(this.props.sample, moleculeName.label);
+  }
+
+  updateMolName(e) {
+    const { sample } = this.props;
+    sample.molecule_name = e;
+    this.props.parent.setState({ sample });
+  }
+
+  updateStereoAbs(e) {
+    const { sample } = this.props;
+    if (!sample.stereo) sample.stereo = {};
+    sample.stereo.abs = e.value;
+    this.props.parent.setState({ sample });
+  }
+
+  updateStereoRel(e) {
+    const { sample } = this.props;
+    if (!sample.stereo) sample.stereo = {};
+    sample.stereo.rel = e.value;
+    this.props.parent.setState({ sample });
+  }
+
+  stereoAbsInput() {
+    const { sample } = this.props;
+
+    const absOptions = [
+      { label: 'any', value: 'any' },
+      { label: 'rac', value: 'rac' },
+      { label: 'meso', value: 'meso' },
+      { label: 'delta', value: 'delta' },
+      { label: 'lambda', value: 'lambda' },
+      { label: '(S)', value: '(S)' },
+      { label: '(R)', value: '(R)' },
+      { label: '(Sp)', value: '(Sp)' },
+      { label: '(Rp)', value: '(Rp)' },
+      { label: '(Sa)', value: '(Sa)' },
+      { label: '(Ra)', value: '(Ra)' },
+    ];
+
+    const value = sample.stereo ? sample.stereo.abs : 'any';
+
+    return (
+      <FormGroup style={{ width: '50%', paddingRight: '10px' }}>
+        <ControlLabel>Stereo Abs</ControlLabel>
+        <Select
+          name="stereoAbs"
+          clearable={false}
+          disabled={!sample.can_update}
+          options={absOptions}
+          onChange={this.updateStereoAbs}
+          value={value}
+        />
+      </FormGroup>
+    );
+  }
+
+  stereoRelInput() {
+    const { sample } = this.props;
+
+    const relOptions = [
+      { label: 'any', value: 'any' },
+      { label: 'syn', value: 'syn' },
+      { label: 'anti', value: 'anti' },
+      { label: 'p-geminal', value: 'p-geminal' },
+      { label: 'p-ortho', value: 'p-ortho' },
+      { label: 'p-meta', value: 'p-meta' },
+      { label: 'p-para', value: 'p-para' },
+      { label: 'cis', value: 'cis' },
+      { label: 'trans', value: 'trans' },
+      { label: 'fac', value: 'fac' },
+      { label: 'mer', value: 'mer' },
+    ];
+
+    const value = sample.stereo ? sample.stereo.rel : 'any';
+
+    return (
+      <FormGroup style={{ width: '50%' }}>
+        <ControlLabel>Stereo Rel</ControlLabel>
+        <Select
+          name="stereoRel"
+          clearable={false}
+          disabled={!sample.can_update}
+          options={relOptions}
+          onChange={this.updateStereoRel}
+          value={value}
+        />
+      </FormGroup>
+    );
+  }
+
+  moleculeInput() {
+    const { sample } = this.props;
+    const mnos = sample.molecule_names;
+    const mno = sample.molecule_name;
+    const newMolecule = !mno || sample._molecule.id !== mno.mid;
+    let moleculeNames = newMolecule ? [] : [mno];
+    if (sample && mnos) { moleculeNames = moleculeNames.concat(mnos); }
+    const onOpenMolName = () => this.openMolName(sample);
+    return (
+      <FormGroup style={{ width: '100%', paddingRight: '10px' }}>
+        <ControlLabel>Molecule</ControlLabel>
+        <InputGroup>
+          <Select.Creatable
+            name="moleculeName"
+            multi={false}
+            disabled={!sample.can_update}
+            options={moleculeNames}
+            onOpen={onOpenMolName}
+            onChange={this.updateMolName}
+            isLoading={this.state.isMolNameLoading}
+            value={!newMolecule && mno && mno.value}
+            onNewOptionClick={this.addMolName}
+            clearable={false}
+          />
+          <InputGroup.Button>
+            {this.structureEditorButton(!sample.can_update)}
+          </InputGroup.Button>
+        </InputGroup>
+      </FormGroup>
+    );
+  }
+
+  handleRangeChanged(field, lower, upper) {
+    const { sample } = this.props;
+    sample.updateRange(field, lower, upper);
+    this.props.parent.setState({ sample });
+  }
+
+  handleFieldChanged(field, e) {
+    const { sample } = this.props;
+    if (field === 'purity' && (e.value < 0 || e.value > 1)) {
+      e.value = 1;
+      sample[field] = e.value;
+      NotificationActions.add({
+        message: 'Purity value should be >= 0 and <=1',
+        level: 'error'
+      });
+    } else if (/amount/.test(field)) {
+      this.handleAmountChanged(e);
+    } else if (/molarity/.test(field)) {
+      this.handleMolarityChanged(e);
+    } else if (/density/.test(field)) {
+      this.handleDensityChanged(e);
+    } else if (/molecular_mass/.test(field)) {
+      this.handleMolecularMassChanged(e);
+    } else if (/^xref_/.test(field)) {
+      const key = field.split('xref_')[1];
+      sample.xref[key] = e;
+    } else if (e && (e.value || e.value === 0)) {
+      // for numeric inputs
+      sample[field] = e.value;
+    } else {
+      sample[field] = e;
+    }
+
+    sample.formulaChanged = this.formulaChanged();
+
+    if (field === 'decoupled') {
+      if (!sample[field]) {
+        sample.sum_formula = '';
+      } else {
+        if (sample.sum_formula.trim() === '') sample.sum_formula = 'undefined structure';
+        if (sample.residues && sample.residues[0] && sample.residues[0].custom_info) {
+          sample.residues[0].custom_info.polymer_type = 'self_defined';
+          delete sample.residues[0].custom_info.surface_type;
+        }
+      }
+      if (!sample[field] && ((sample.molfile || '') === '')) {
+        this.props.parent.setState({ sample });
+      } else {
+        this.props.parent.setState({ sample }, this.props.decoupleMolecule);
+      }
+    } else { this.props.parent.setState({ sample }); }
+  }
+
+  textInput(sample, field, label, disabled = false) {
+    return (
+      <FormGroup bsSize="small">
+        <ControlLabel>{label}</ControlLabel>
+        <FormControl
+          id={`txinput_${field}`}
+          type="text"
+          value={(/^xref_/.test(field) ? sample.xref[field.split('xref_')[1]] : sample[field]) || ''}
+          onChange={(e) => { this.handleFieldChanged(field, e.target.value); }}
+          disabled={disabled || !sample.can_update}
+          readOnly={disabled || !sample.can_update}
+        />
+      </FormGroup>
+    );
+  }
+
+  sampleSolvent(sample) {
+    return (
+      <Select
+        ref={(input) => { this.solventInput = input; }}
+        id="solventInput"
+        name="solvents"
+        style={{ marginBottom: '15px' }}
+        multi={false}
+        options={solventOptions}
+        value={sample.solvent}
+        disabled={!sample.can_update}
+        onChange={e => this.handleFieldChanged('solvent', e)}
+      />
+    );
+  }
+
+  attachedAmountInput(sample, size) {
+    if (!sample.contains_residues) return false;
+
+    return this.numInput(
+      sample, 'defined_part_amount', 'g',
+      ['m', 'n'], 4, 'Attached', 'attachedAmountMg',
+      true, 'Weight of the defined part'
+    );
+  }
+
+  numInput(
+    sample, field, unit, prefixes, precision, label, ref = '',
+    disabled = false, title = '', block = false, notApplicable = false
+  ) {
+    if (sample.contains_residues && unit === 'l') return false;
+    const value = !isNaN(sample[field]) ? sample[field] : null;
+
+    const mpx = unit === 'l' ? prefixes[1] : unit === 'mol' ? prefixes[2] : prefixes[0];
+    return (
+      <td key={field + sample.id.toString()}>
+        <NumeralInputWithUnitsCompo
+          value={notApplicable ? 'N/A' : value}
+          unit={unit}
+          label={label}
+          ref={ref}
+          metricPrefix={mpx}
+          metricPrefixes={prefixes}
+          precision={precision}
+          title={title}
+          disabled={disabled}
+          block={block}
+          bsStyle={unit && sample.amount_unit === unit ? 'success' : 'default'}
+          onChange={e => this.handleFieldChanged(field, e)}
+          id={`numInput_${field}`}
+        />
+      </td>
+    );
+  }
+
+  numInputWithoutTable(
+    sample, field, unit, prefixes, precision, label, ref = '',
+    disabled = false, title = '', block = false, notApplicable = false
+  ) {
+    if (sample.contains_residues && unit === 'l') return false;
+    const value = !isNaN(sample[field]) ? sample[field] : null;
+
+    const mpx = unit === 'l' ? prefixes[1] : unit === 'mol' ? prefixes[2] : prefixes[0];
+    return (
+      <NumeralInputWithUnitsCompo
+        key={field + sample.id.toString()}
+        value={notApplicable ? 'N/A' : value}
+        unit={unit}
+        label={label}
+        ref={ref}
+        metricPrefix={mpx}
+        metricPrefixes={prefixes}
+        precision={precision}
+        title={title}
+        disabled={disabled}
+        block={block}
+        bsStyle={unit && sample.amount_unit === unit ? 'success' : 'default'}
+        onChange={e => this.handleFieldChanged(field, e)}
+      />
+    );
+  }
+
+  sampleAmount(sample) {
+    const content = [];
+    const isDisabled = !sample.can_update;
+    const volumeBlocked = !sample.has_density && !sample.has_molarity;
+
+    if (sample.isMethodDisabled('amount_value') === false) {
+      // if (sample.isMethodRestricted('molecule') === true) {
+      //   content.push(this.numInput(sample, 'amount_g', 'g', ['m', 'n'],
+      //     4, 'Amount', 'massMgInput', isDisabled, ''));
+      // } else {
+      content.push(this.numInput(
+        sample, 'amount_g', 'g', ['m', 'n'],
+        4, 'Amount', 'massMgInput', isDisabled, ''
+      ));
+
+      if (!sample.contains_residues) {
+        content.push(this.numInput(
+          sample, 'amount_l', 'l',
+          ['m', 'u', 'n'], 5, '\u202F', 'l',
+          isDisabled, '', volumeBlocked
+        ));
+      }
+
+      content.push(this.numInput(
+        sample, 'amount_mol', 'mol',
+        ['m', 'n'], 4, '\u202F', 'amountInput', isDisabled, ''
+      ));
+
+      if (sample.contains_residues) {
+        content.push(this.attachedAmountInput(sample));
+      }
+
+      return content;
+    }
+
+    return (
+      <FormGroup>
+        <ControlLabel>Amount</ControlLabel>
+        <FormControl type="text" disabled defaultValue="***" readOnly />
+      </FormGroup>
+    );
+  }
+
+  sampleDescription(sample) {
+    return (
+      <FormGroup>
+        <ControlLabel>Description</ControlLabel>
+        <FormControl
+          componentClass="textarea"
+          ref={(input) => { this.descriptionInput = input; }}
+          placeholder={sample.description}
+          value={sample.description || ''}
+          onChange={e => this.handleFieldChanged('description', e.target.value)}
+          rows={2}
+          disabled={!sample.can_update}
+        />
+      </FormGroup>
+    );
+  }
+
+  render() {
+    const sample = this.props.sample || {};
+    const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
+    const isDisabled = !sample.can_update;
+    const polyDisabled = isPolymer || isDisabled;
+    const molarityBlocked = isDisabled ? true : this.state.molarityBlocked;
+    const densityBlocked = isDisabled ? true : !molarityBlocked;
+    const { enableSampleDecoupled } = this.props;
+    const isRepoSecretExternalLabel = this.props.parent.isRepoSecretExternalLabel();
+
+    const nameSection = isRepoSecretExternalLabel ?
+      (
+        <div className="name-form">
+          <div style={{ width: '50%' }}>
+            {this.textInput(sample, 'name', 'Name')}
+          </div>
+          <div style={{ width: '30%' }} hidden>
+            {this.textInput(sample, 'external_label', 'External label')}
+          </div>
+          <div style={{ width: '50%' }}>
+            <label htmlFor="solventInput">Solvent</label>
+            {this.sampleSolvent(sample)}
+          </div>
+        </div>
+      ) : (
+        <div className="name-form">
+          <div style={{ width: '30%' }}>
+            {this.textInput(sample, 'name', 'Name')}
+          </div>
+          <div style={{ width: '30%' }}>
+            {this.textInput(sample, 'external_label', 'External label')}
+          </div>
+          <div style={{ width: '40%' }}>
+            <label htmlFor="solventInput">Solvent</label>
+            {this.sampleSolvent(sample)}
+          </div>
+        </div>
+      );
+
+    return (
+      <Table responsive className="sample-form">
+        <tbody>
+          <tr>
+            <td colSpan="4">
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div style={{ width: '70%', display: 'flex' }}>
+                  {this.moleculeInput()}
+                  {this.stereoAbsInput()}
+                  {this.stereoRelInput()}
+                </div>
+                <div style={{ paddingLeft: '10px' }} className="top-secret-checkbox">
+                  {this.topSecretCheckbox(sample)}
+                </div>
+                {
+                  enableSampleDecoupled ? (
+                    <div className="decoupled-checkbox">{this.decoupledCheckbox(sample)}</div>
+                  ) : null
+                }
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <td colSpan="4">
+              <div className="name-form">
+                <div style={{ width: '25%' }}>
+                  {this.textInput(sample, 'name', 'Name')}
+                </div>
+                <div style={{ width: '25%', paddingLeft: '5px' }}>
+                  {this.textInput(sample, 'external_label', 'External label')}
+                </div>
+                <div style={{ width: '25%', paddingLeft: '5px' }}>
+                  <TextRangeWithAddon
+                    field="boiling_point"
+                    label="Boiling point"
+                    addon="°C"
+                    value={sample.boiling_point_display}
+                    disabled={polyDisabled}
+                    onChange={this.handleRangeChanged}
+                    tipOnText="Use space-separated value to input a Temperature range"
+                  />
+                </div>
+                <div style={{ width: '25%', paddingLeft: '5px' }}>
+                  <TextRangeWithAddon
+                    field="melting_point"
+                    label="Melting point"
+                    addon="°C"
+                    value={sample.melting_point_display}
+                    disabled={polyDisabled}
+                    onChange={this.handleRangeChanged}
+                    tipOnText="Use space-separated value to input a Temperature range"
+                  />
+                </div>
+                {/* <div style={{ width: '40%' }}>
+                  <label htmlFor="solventInput">Solvent</label>
+                  {this.sampleSolvent(sample)}
+                </div> */}
+              </div>
+            </td>
+          </tr>
+
+          { sample.decoupled &&
+            <tr>
+              {
+                this.numInput(sample, 'molecular_mass', 'g/mol', ['n'], 5, 'Molecular mass', '', isDisabled)
+              }
+              <td colSpan="3">
+                {
+                  this.textInput(sample, 'sum_formula', 'Sum formula')
+                }
+              </td>
+            </tr>
+          }
+
+          <tr className="visible-hd">
+            <td colSpan="6">
+              <table>
+                <tbody>
+                  <tr>
+                    <td style={{ width: '3%' }}>
+                      <div style={{ marginBottom: '15px' }}>
+                        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+                        <label style={{ height: '14px' }} />
+                        <InputGroup.Button id="email" name="email" type="email" placeholder="Email Address">
+                          {this.infoButton()}
+                        </InputGroup.Button>
+                      </div>
+                    </td>
+                    {this.sampleAmount(sample)}
+                    <td style={{ width: '47%' }}>
+                      <div className="name-form" style={{ marginBottom: '15px' }}>
+                        <Tabs style={{ width: '60%' }} id="tab-density-molarity" defaultActiveKey={sample.molarity_value !== 0 ? 'molarity' : 'density'}>
+                          <Tab eventKey="density" title="Density">
+                            {
+                              this.numInputWithoutTable(sample, 'density', 'g/ml', ['n'], 5, '', '', polyDisabled, '', false, isPolymer)
+                            }
+                          </Tab>
+                          <Tab eventKey="molarity" title="Molarity">
+                            {
+                              this.numInputWithoutTable(sample, 'molarity_value', 'M', ['n'], 5, '', '', polyDisabled, '', false, isPolymer)
+                            }
+                          </Tab>
+                        </Tabs>
+                        <div style={{ width: '40%', paddingLeft: '5px' }}>
+                          {
+                            this.numInputWithoutTable(sample, 'purity', 'n', ['n'], 5, 'Purity/Concentration', '', isDisabled)
+                          }
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan="4">
+              <SampleDetailsSolvents
+                sample={sample}
+                onChange={this.handleSolventChanged}
+              />
+            </td>
+          </tr>
+
+          <tr style={{ paddingTop: '15px' }}>
+            <td colSpan="4">{this.sampleDescription(sample)}</td>
+          </tr>
+          <tr>
+            <td colSpan="4">
+              {this.textInput(sample, 'location', 'Location')}
+            </td>
+          </tr>
+          <tr>
+            <td colSpan="4">
+              <PrivateNoteElement element={sample} disabled={!sample.can_update} />
+            </td>
+          </tr>
+          {this.props.customizableField()}
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+SampleForm.propTypes = {
+  sample: PropTypes.object,
+  parent: PropTypes.object,
+  customizableField: PropTypes.func.isRequired,
+  enableSampleDecoupled: PropTypes.bool,
+  decoupleMolecule: PropTypes.func.isRequired
+};
+
+SampleForm.defaultProps = { enableSampleDecoupled: false };
diff --git a/app/packs/src/components/ScreenDetails.js b/app/packs/src/components/ScreenDetails.js
new file mode 100644
index 000000000..ab29137cc
--- /dev/null
+++ b/app/packs/src/components/ScreenDetails.js
@@ -0,0 +1,330 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup, ControlLabel, FormControl, Panel, ListGroup, ListGroupItem,
+  ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab
+} from 'react-bootstrap';
+import StickyDiv from 'react-stickydiv';
+import { unionBy, findIndex } from 'lodash';
+
+import ElementCollectionLabels from './ElementCollectionLabels';
+import ScreenWellplates from './ScreenWellplates';
+import QuillEditor from './QuillEditor'
+import ScreenDetailsContainers from './ScreenDetailsContainers';
+import ElementActions from './actions/ElementActions';
+import DetailActions from './actions/DetailActions';
+import UIStore from './stores/UIStore';
+import UIActions from './actions/UIActions';
+import PrintCodeButton from './common/PrintCodeButton';
+import ConfirmClose from './common/ConfirmClose';
+import Immutable from 'immutable';
+import ElementDetailSortTab from './ElementDetailSortTab';
+import { addSegmentTabs } from './generic/SegmentDetails';
+import PrivateNoteElement from './PrivateNoteElement';
+
+export default class ScreenDetails extends Component {
+  constructor(props) {
+    super(props);
+    const {screen} = props;
+    this.state = {
+      screen,
+      activeTab: UIStore.getState().screen.activeTab,
+      visible: Immutable.List(),
+    }
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
+    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIStoreChange)
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIStoreChange)
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { screen } = nextProps;
+    this.setState({ screen });
+  }
+
+  onUIStoreChange(state) {
+    if (state.screen.activeTab != this.state.activeTab){
+      this.setState({
+        activeTab: state.screen.activeTab
+      })
+    }
+  }
+
+  handleSubmit() {
+    const { screen } = this.state;
+
+    if(screen.isNew) {
+      ElementActions.createScreen(screen);
+    } else {
+      ElementActions.updateScreen(screen);
+    }
+    if(screen.is_new) {
+      const force = true;
+      DetailActions.close(screen, force);
+    }
+  }
+
+  handleInputChange(type, event) {
+    const { screen } = this.state;
+    const value = event.target.value;
+    switch (type) {
+      case 'name':
+        screen.name = value;
+        break;
+      case 'requirements':
+        screen.requirements = value;
+        break;
+      case 'collaborator':
+        screen.collaborator = value;
+        break;
+      case 'conditions':
+        screen.conditions = value;
+        break;
+      case 'result':
+        screen.result = value;
+        break;
+      case 'description':
+        screen.description = value;
+        break;
+    }
+    this.setState({
+      screen: screen
+    });
+  }
+
+  handleSegmentsChange(se) {
+    const { screen } = this.state;
+    const { segments } = screen;
+    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
+    screen.segments = segments;
+    screen.changed = true;
+    this.setState({ screen });
+  }
+
+  dropWellplate(wellplate) {
+    const { screen } = this.state;
+    screen.wellplates = unionBy(screen.wellplates, [wellplate], 'id');
+    this.forceUpdate();
+  }
+
+  handleScreenChanged(screen) {
+    this.setState({ screen });
+  }
+
+  deleteWellplate(wellplate){
+    const {screen} = this.state;
+    const wellplateIndex = screen.wellplates.indexOf(wellplate);
+    screen.wellplates.splice(wellplateIndex, 1);
+
+    this.setState({ screen });
+  }
+
+  screenHeader(screen) {
+    let saveBtnDisplay = screen.isEdited ? '' : 'none';
+    const datetp = `Created at: ${screen.created_at} \n Updated at: ${screen.updated_at}`;
+
+    return (
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
+          <span>
+            <i className="icon-screen" />
+            &nbsp;<span>{screen.name}</span> &nbsp;
+          </span>
+        </OverlayTrigger>
+        <ElementCollectionLabels element={screen} placement="right"/>
+        <ConfirmClose el={screen} />
+        <OverlayTrigger placement="bottom"
+            overlay={<Tooltip id="saveScreen">Save Screen</Tooltip>}>
+          <Button bsStyle="warning" bsSize="xsmall" className="button-right"
+                  onClick={() => this.handleSubmit()}
+                  style={{display: saveBtnDisplay}} >
+            <i className="fa fa-floppy-o "></i>
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="bottom"
+            overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
+        <Button bsStyle="info" bsSize="xsmall" className="button-right"
+          onClick={() => this.props.toggleFullScreen()}>
+          <i className="fa fa-expand"></i>
+        </Button>
+        </OverlayTrigger>
+        <PrintCodeButton element={screen}/>
+      </div>
+    );
+  }
+
+  propertiesFields(screen){
+    const {wellplates, name, collaborator, result, conditions, requirements, description} = screen;
+
+    return(
+      <ListGroup fill="true">
+        <ListGroupItem>
+          <table width="100%"><tbody>
+            <tr>
+              <td width="50%" className="padding-right">
+                <FormGroup>
+                  <ControlLabel>Name</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={name || ''}
+                    onChange={event => this.handleInputChange('name', event)}
+                    disabled={screen.isMethodDisabled('name')}
+                  />
+                </FormGroup>
+              </td>
+              <td width="50%">
+                <FormGroup>
+                  <ControlLabel>Collaborator</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={collaborator || ''}
+                    onChange={event => this.handleInputChange('collaborator', event)}
+                    disabled={screen.isMethodDisabled('collaborator')}
+                  />
+                </FormGroup>
+              </td>
+            </tr>
+            <tr>
+              <td className="padding-right">
+                <FormGroup>
+                  <ControlLabel>Requirements</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={requirements || ''}
+                    onChange={event => this.handleInputChange('requirements', event)}
+                    disabled={screen.isMethodDisabled('requirements')}
+                  />
+                </FormGroup>
+              </td>
+              <td >
+                <FormGroup>
+                  <ControlLabel>Conditions</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={conditions || ''}
+                    onChange={event => this.handleInputChange('conditions', event)}
+                    disabled={screen.isMethodDisabled('conditions')}
+                  />
+                </FormGroup>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan="2">
+                <FormGroup>
+                  <ControlLabel>Result</ControlLabel>
+                  <FormControl
+                    type="text"
+                    value={result || ''}
+                    onChange={event => this.handleInputChange('result', event)}
+                    disabled={screen.isMethodDisabled('result')}
+                  />
+                </FormGroup>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan="2">
+                <FormGroup>
+                  <ControlLabel>Description</ControlLabel>
+                  <QuillEditor value={description}
+                    onChange={event => this.handleInputChange('description', {target: {value: event}})}
+                    disabled={screen.isMethodDisabled('description')}
+                  />
+                </FormGroup>
+                <PrivateNoteElement element={screen} disabled={screen.can_update}/> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
+              </td>
+            </tr>
+          </tbody></table>
+        </ListGroupItem>
+        <ListGroupItem>
+          <h4 className="list-group-item-heading">Wellplates</h4>
+          <ScreenWellplates
+            wellplates={wellplates}
+            dropWellplate={wellplate => this.dropWellplate(wellplate)}
+            deleteWellplate={wellplate => this.deleteWellplate(wellplate)}
+            />
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+
+  handleSelect(eventKey) {
+    UIActions.selectTab({tabKey: eventKey, type: 'screen'});
+    this.setState({
+      activeTab: eventKey
+    })
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({visible})
+  }
+
+  render() {
+    const { screen, visible } = this.state;
+    const submitLabel = screen.isNew ? 'Create' : 'Save';
+
+    const tabContentsMap = {
+      properties: (
+        <Tab eventKey="properties" title="Properties" key={`properties_${screen.id}`}>
+          {this.propertiesFields(screen)}
+        </Tab>
+      ),
+      analyses: (
+        <Tab eventKey="analyses" title="Analyses" key={`analyses_${screen.id}`}>
+          <ScreenDetailsContainers
+            screen={screen}
+            parent={this}
+          />
+        </Tab>
+      ),
+    };
+
+    const tabTitlesMap = {
+    };
+
+    addSegmentTabs(screen, this.handleSegmentsChange, tabContentsMap);
+
+    const tabContents = [];
+    visible.forEach((value) => {
+      const tabContent = tabContentsMap[value];
+      if (tabContent) { tabContents.push(tabContent); }
+    });
+
+    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
+
+    return (
+      <Panel bsStyle={screen.isPendingToSave ? 'info' : 'primary'}
+        className="eln-panel-detail">
+        <Panel.Heading>{this.screenHeader(screen)}</Panel.Heading>
+        <Panel.Body>
+          <ElementDetailSortTab
+            type="screen"
+            availableTabs={Object.keys(tabContentsMap)}
+            tabTitles={tabTitlesMap}
+            onTabPositionChanged={this.onTabPositionChanged}
+          />
+          <Tabs activeKey={activeTab} onSelect={key => this.handleSelect(key)} id="screen-detail-tab">
+             {tabContents}
+          </Tabs>
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(screen)}>Close</Button>
+            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>{submitLabel}</Button>
+          </ButtonToolbar>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+ScreenDetails.propTypes = {
+  screen: PropTypes.object,
+  toggleFullScreen: PropTypes.func,
+}
diff --git a/app/packs/src/components/ScreenDetailsContainers.js b/app/packs/src/components/ScreenDetailsContainers.js
new file mode 100644
index 000000000..43ae9e32c
--- /dev/null
+++ b/app/packs/src/components/ScreenDetailsContainers.js
@@ -0,0 +1,174 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { PanelGroup, Panel, Button } from 'react-bootstrap';
+
+import Container from './models/Container';
+import ContainerComponent from './ContainerComponent';
+import PrintCodeButton from './common/PrintCodeButton';
+
+import TextTemplateActions from './actions/TextTemplateActions';
+
+export default class ScreenDetailsContainers extends Component {
+  constructor(props) {
+    super();
+    const {screen} = props;
+    this.state = {
+      screen,
+      activeContainer: 0
+    };
+  }
+
+  componentDidMount() {
+    TextTemplateActions.fetchTextTemplates('screen');
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      screen: nextProps.screen
+    })
+  }
+
+  handleChange(container) {
+    const {screen} = this.state
+    this.props.parent.handleScreenChanged(screen)
+  }
+
+  handleAdd() {
+    const {screen} = this.state;
+    let container = Container.buildEmpty();
+    container.container_type = "analysis";
+
+    screen.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.push(container);
+
+    const newKey = screen.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.length - 1;
+
+    this.handleAccordionOpen(newKey);
+
+    this.props.parent.setState({screen: screen})
+  }
+
+  handleRemove(container) {
+    let {screen} = this.state;
+    container.is_deleted = true;
+
+    this.props.parent.setState({screen: screen})
+  }
+
+  handleUndo(container) {
+    let {screen} = this.state;
+    container.is_deleted = false;
+
+    this.props.parent.setState({screen: screen})
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({activeContainer: key});
+  }
+
+  addButton() {
+    const {readOnly} = this.props;
+    if(! readOnly) {
+      return (
+          <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
+            Add analysis
+          </Button>
+      )
+    }
+  }
+
+  render() {
+    const {screen, activeContainer} = this.state;
+    const {readOnly} = this.props;
+
+    let containerHeader = (container) =>
+      <p style={{width: '100%'}}>{container.name}
+        {(container.extended_metadata['kind'] && container.extended_metadata['kind'] != '') ?
+          (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
+        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
+        <Button bsSize="xsmall" bsStyle="danger"
+           className="button-right" disabled={readOnly}
+          onClick={() => {if(confirm('Delete the container?')) {this.handleRemove(container)}}}>
+          <i className="fa fa-trash"></i>
+        </Button>
+        <PrintCodeButton element={screen} analyses={[container]} ident={container.id}/>
+      </p>
+
+      let containerHeaderDeleted = (container) => <p style={{width: '100%'}}><strike>{container.name}
+        {(container.extended_metadata['kind'] && container.extended_metadata['kind'] != '') ?
+          (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
+        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
+        </strike>
+        <Button className="pull-right" bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(container)}>
+          <i className="fa fa-undo"></i>
+        </Button>
+        </p>
+
+    if(screen.container != null){
+
+      var analyses_container = screen.container.children.filter(element => ~element.container_type.indexOf('analyses'));
+
+      if(analyses_container.length == 1 && analyses_container[0].children.length > 0){
+        return (
+          <div>
+          <p>&nbsp;{this.addButton()}</p>
+          <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
+          {analyses_container[0].children.map((container, key) => {
+            if (container.is_deleted){
+              return (
+                <Panel eventKey={key}
+                    key={key} >
+                    <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                </Panel>
+                  );
+                }else {
+              return (
+                <Panel eventKey={key}
+                    key={key} onClick={() => this.handleAccordionOpen(key)}>
+                  <Panel.Heading>{containerHeader(container)}</Panel.Heading>
+                  <Panel.Body collapsible="true">
+                    <ContainerComponent
+                      templateType="screen"
+                      readOnly={readOnly}
+                      container={container}
+                      onChange={container => this.handleChange(container)}
+                    />
+                  </Panel.Body>
+                </Panel>
+              );
+            }
+
+            }
+          )}
+          </PanelGroup>
+          </div>
+        )
+      }else {
+        return (
+          <div>
+            <p className='noAnalyses-warning'>
+              There are currently no Analyses.
+              {this.addButton()}
+            </p>
+          </div>
+        )
+      }
+
+    }else{
+
+      return (
+        <div>
+          <p className='noAnalyses-warning'>
+            There are currently no Analyses.
+          </p>
+        </div>
+      )
+    }
+
+  }
+
+}
+
+ScreenDetailsContainers.propTypes = {
+  readOnly: PropTypes.bool,
+  parent: PropTypes.object,
+};
diff --git a/app/packs/src/components/ScreenWellplates.js b/app/packs/src/components/ScreenWellplates.js
new file mode 100644
index 000000000..764c9bcca
--- /dev/null
+++ b/app/packs/src/components/ScreenWellplates.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from './DragDropItemTypes';
+import UIStore from './stores/UIStore';
+import { wellplateShowOrNew } from './routesUtils';
+import QuillViewer from './QuillViewer';
+
+const target = {
+  drop(props, monitor){
+    const {dropWellplate} = props;
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    if (itemType == 'wellplate') {
+      dropWellplate(item.element);
+    }
+  },
+  canDrop(props, monitor){
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    if (itemType == 'wellplate') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class ScreenWellplates extends Component {
+  handleWellplateClick(wellplate) {
+    const {currentCollection,isSync} = UIStore.getState();
+    const wellplateID = wellplate.id
+    const uri = `/${isSync ? 's' : ''}collection/${currentCollection.id}/wellplate/${wellplateID}`;
+    Aviator.navigate(uri, { silent: true });
+    wellplateShowOrNew({ params: { wellplateID } });
+  }
+
+  render() {
+    const {wellplates, isOver, canDrop, connectDropTarget, deleteWellplate} = this.props;
+    const style = { padding: 10 };
+    if (isOver && canDrop) {
+      style.borderStyle = 'dashed';
+      style.borderColor = '#337ab7';
+    } else if (canDrop) {
+      style.borderStyle = 'dashed';
+    }
+    return connectDropTarget(
+      <div style={style}>
+        <table width="100%">
+          <thead><tr>
+            <th width="45%">Name</th>
+            <th width="50%">Description</th>
+            <th width="5%"></th>
+          </tr></thead>
+          <tbody>
+            {wellplates.map((wellplate, key) => {
+              return (
+                <tr key={key} style={{height: "80px", verticalAlign: 'middle'}}>
+                  <td>
+                    <a onClick={() => this.handleWellplateClick(wellplate)}
+                       style={{cursor: 'pointer'}}>
+                      {wellplate.name}
+                    </a>
+                  </td>
+                  <td>
+                    <QuillViewer
+                      value={wellplate.description}
+                      theme="bubble"
+                      height="44px"
+                    />
+                  </td>
+                  <td style={{verticalAlign: 'middle'}}>
+                    <Button bsStyle="danger" style={{marginLeft: "10px"}}
+                            onClick={() => deleteWellplate(wellplate)}>
+                      <i className="fa fa-trash-o"></i>
+                    </Button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default DropTarget(DragDropItemTypes.WELLPLATE, target, collect)(ScreenWellplates);
+
+ScreenWellplates.propTypes = {
+  wellplates: PropTypes.array.isRequired,
+  deleteWellplate: PropTypes.func.isRequired,
+  dropWellplate: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/components/StringTag.js b/app/packs/src/components/StringTag.js
new file mode 100644
index 000000000..39828558d
--- /dev/null
+++ b/app/packs/src/components/StringTag.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function StringTag({ string }) {
+  const arr = string.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|[^<]+/g);
+
+  const arrComponents = arr.map((val, idx) => {
+    const subVal = val.match(/<sub[^>]*>([^<]+)<\/sub>/);
+    if (subVal) return <sub key={`sub_${idx}`}>{ subVal[1] }</sub>;
+
+    const supVal = val.match(/<sup[^>]*>([^<]+)<\/sup>/);
+    if (supVal) return <sup key={`sup_${idx}`}>{ subVal[1] }</sup>;
+
+    return <span key={val}>{ val }</span>;
+  });
+
+  return <span>{ arrComponents }</span>;
+}
+
+StringTag.propTypes = {
+  string: PropTypes.string.isRequired,
+};
+
+export default StringTag;
diff --git a/app/packs/src/components/Switch.js b/app/packs/src/components/Switch.js
new file mode 100644
index 000000000..b622ba697
--- /dev/null
+++ b/app/packs/src/components/Switch.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default class Switch extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.toggle = this.toggle.bind(this)
+  }
+
+  toggle(checked) {
+    this.props.onChange(checked)
+  }
+
+  render() {
+    const {
+      checked,
+      checkedChildren,
+      classSize,
+      unCheckedChildren,
+      ...restProps
+    } = this.props
+
+    let className = "switch ";
+    className += checked ? "switch-checked" : "";
+    let innerClass = "switch-inner";
+    if (typeof (classSize) !== 'undefined' && classSize==='switchb') {
+      className = "switchb ";
+      className += checked ? "switchb-checked" : "";
+      innerClass = "switchb-inner";
+    }
+
+    return (
+      <span tabIndex="0" onClick={() => this.toggle(checked)}
+        className={className} {...restProps}>
+        <span className={innerClass}>
+          {checked ? checkedChildren : unCheckedChildren}
+        </span>
+      </span>
+    )
+  }
+}
diff --git a/app/packs/src/components/TabLayoutCell.js b/app/packs/src/components/TabLayoutCell.js
new file mode 100644
index 000000000..9947793cd
--- /dev/null
+++ b/app/packs/src/components/TabLayoutCell.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { DragSource, DropTarget } from 'react-dnd';
+import flow from 'lodash/flow';
+import UserStore from './stores/UserStore';
+
+import DragDropItemTypes from './DragDropItemTypes';
+
+const layoutSource = {
+  beginDrag(props) {
+    return props;
+  }
+};
+
+const layoutTarget = {
+  drop(props, monitor, component) {
+    props.moveLayout(monitor.getItem(), props);
+  }
+};
+
+class TabLayoutCell extends Component {
+
+  render() {
+    const {
+      connectDragSource, sourceType, isHidden, cell, connectDropTarget, isElementDetails, title
+    } = this.props;
+
+    const styleObj = {
+      fontSize: 12,
+      color: '#000000',
+      textAlign: 'center',
+      wordWrap: 'break-word'
+    };
+
+    const constEls = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'];
+    let iconCell = `icon-${cell}`;
+    let ttl = cell && (cell.replace('_', ' ').replace(/(^\w|\s\w)/g, m => m.toUpperCase()));
+    let ttd = '';
+
+    if (!constEls.includes(cell)) {
+      const genericEls = UserStore.getState().genericEls || [];
+      const genericEl = (genericEls && genericEls.find(el => el.name === cell)) || {};
+      iconCell = `${genericEl.icon_name}`;
+      ttl = genericEl.label;
+      ttd = genericEl.desc;
+    }
+
+    const layoutCell = isElementDetails ? (
+      <tr>
+        <td className={isHidden ? 'hidden-layout' : ''}>
+          <div style={{ width: '100%' }}>
+            <i style={styleObj}>{title === 'hidden' ? '-' : title}</i>
+          </div>
+        </td>
+      </tr>
+
+    ) : (
+      <td className={isHidden ? 'hidden-layout' : ''}>
+        <div><OverlayTrigger delayShow={500} placement="top" overlay={<Tooltip id="_tooltip_history" className="left_tooltip">{ttl}<br />{ttd}</Tooltip>}><i className={iconCell} /></OverlayTrigger></div>
+      </td>
+
+
+    );
+
+    if (sourceType === '') {
+      return layoutCell;
+    }
+    return connectDragSource(connectDropTarget(layoutCell), { dropEffect: 'copy' });
+  }
+}
+
+export default flow(
+  DragSource(DragDropItemTypes.LAYOUT, layoutSource, (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  })),
+  DropTarget(DragDropItemTypes.LAYOUT, layoutTarget, connect => ({
+    connectDropTarget: connect.dropTarget()
+  }))
+)(TabLayoutCell);
+
+TabLayoutCell.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  isHidden: PropTypes.bool.isRequired,
+  cell: PropTypes.string.isRequired,
+  index: PropTypes.any.isRequired,
+  moveLayout: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/components/TabLayoutContainer.js b/app/packs/src/components/TabLayoutContainer.js
new file mode 100644
index 000000000..16936ca3b
--- /dev/null
+++ b/app/packs/src/components/TabLayoutContainer.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+
+import ArrayUtils from './utils/ArrayUtils';
+import TabLayoutCell from './TabLayoutCell';
+
+export default class TabLayoutContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: Immutable.List(props.visible),
+      hidden: Immutable.List(props.hidden)
+    }
+
+    this.moveLayout = this.moveLayout.bind(this);
+  }
+
+  moveLayout(dragItem, hoverItem) {
+    let { visible, hidden } = this.state;
+
+    if (!dragItem.isHidden && hoverItem.isHidden && visible.size === 1) return;
+
+    if (dragItem.isHidden && dragItem.title === 'hidden') return
+
+    if (dragItem.isHidden) {
+      hidden = hidden.splice(dragItem.index, 1);
+    } else if (visible.size > 1) {
+      visible = visible.splice(dragItem.index, 1);
+    }
+
+    if (hoverItem.isHidden) {
+      hidden = hidden.splice(hoverItem.index, 0, dragItem.cell);
+    } else {
+      visible = visible.splice(hoverItem.index, 0, dragItem.cell);
+    }
+
+    if (hidden.size === 0) {
+      hidden = ArrayUtils.pushUniq(hidden, 'hidden');
+    } else if (hidden.size > 1) {
+      hidden = ArrayUtils.removeFromListByValue(hidden, 'hidden');
+    }
+
+    this.setState({ visible, hidden });
+  }
+
+  render() {
+    const { visible, hidden } = this.state;
+    const { isElementDetails, tabTitles } = this.props;
+    let moveLayout = this.moveLayout;
+
+    return (
+      <table className="layout-container">
+        <tbody>
+          {visible.map(function(e, index) {
+            const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
+            return (<TabLayoutCell key={index + "_visible"} cell={e}
+                                  isHidden={false} index={index}
+                                  title={tabTitles[e] || defTitle}
+                                  moveLayout={moveLayout}
+                                  isElementDetails={isElementDetails}/>)
+          })}
+          {hidden.map(function(e, index) {
+            const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
+            return (<TabLayoutCell key={index + "_hidden"} cell={e}
+                                  isHidden={true} index={index}
+                                  moveLayout={moveLayout}
+                                  title={tabTitles[e] || defTitle}
+                                  isElementDetails={isElementDetails}/>)
+          })}
+        </tbody>
+      </table>
+    )
+  }
+}
+
+TabLayoutContainer.propTypes = {
+  tabTitles: PropTypes.object,
+};
+
+TabLayoutContainer.defaultProps = {
+  tabTitles: {},
+};
diff --git a/app/packs/src/components/TextRangeWithAddon.js b/app/packs/src/components/TextRangeWithAddon.js
new file mode 100644
index 000000000..806f72524
--- /dev/null
+++ b/app/packs/src/components/TextRangeWithAddon.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ControlLabel, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
+
+export default class TextRangeWithAddon extends Component {
+  handleInputChange(e) {
+    const input = e.target;
+    input.focus();
+    const { value, selectionStart } = input;
+    let newValue = value;
+    const lastChar = value[selectionStart - 1] || '';
+    if (lastChar !== '' && !lastChar.match(/-|\d|\.| |(,)/)) {
+      const reg = new RegExp(lastChar, 'g');
+      newValue = newValue.replace(reg, '');
+      this.input.value = newValue;
+      return;
+    }
+    newValue = newValue.replace(/--/g, '');
+    newValue = newValue.replace(/,/g, '.');
+    newValue = newValue.replace(/\.+\./g, '.');
+    newValue = newValue.replace(/ - /g, ' ');
+    this.input.value = newValue;
+  }
+
+  handleInputFocus() {
+    this.input.value = this.input.value.trim().replace(/ – /g, ' ');
+  }
+
+  handleInputBlur() {
+    this.input.value = this.input.value.trim();
+    const result = this.input.value.match(/[-.0-9]+|[0-9]/g);
+    if (result) {
+      // eslint-disable-next-line no-restricted-globals
+      const nums = result.filter(r => !isNaN(r));
+      if (nums.length > 0) {
+        let lower = null;
+        let upper = null;
+        if (nums.length === 1) {
+          lower = nums.shift();
+          upper = lower;
+          this.input.value = Number.parseFloat(lower).toString();
+        } else {
+          lower = nums.shift();
+          upper = nums.pop();
+          this.input.value = (Number.parseFloat(lower).toString().concat(' – ', Number.parseFloat(upper))).trim();
+        }
+        this.props.onChange(this.props.field, Number.parseFloat(lower), Number.parseFloat(upper));
+      } else {
+        this.input.value = '';
+        this.props.onChange(this.props.field, '', '');
+      }
+    } else {
+      this.props.onChange(this.props.field, '', '');
+    }
+  }
+
+  render() {
+    const {
+      addon, disabled, label, tipOnText
+    } = this.props;
+    return (
+      <FormGroup bsSize="small">
+        <ControlLabel>{label}</ControlLabel>
+        <InputGroup>
+          <FormControl
+            title={tipOnText}
+            type="text"
+            disabled={disabled}
+            defaultValue={this.props.value || ''}
+            inputRef={(ref) => { this.input = ref; }}
+            onChange={event => this.handleInputChange(event)}
+            onFocus={() => this.handleInputFocus()}
+            onBlur={() => this.handleInputBlur()}
+          />
+          <InputGroup.Addon>{addon}</InputGroup.Addon>
+        </InputGroup>
+      </FormGroup>
+    );
+  }
+}
+
+TextRangeWithAddon.propTypes = {
+  field: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  addon: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  tipOnText: PropTypes.string
+};
+
+TextRangeWithAddon.defaultProps = {
+  label: '',
+  value: '',
+  addon: '',
+  disabled: false,
+  onChange: () => {},
+  tipOnText: ''
+};
diff --git a/app/packs/src/components/UserAuth.js b/app/packs/src/components/UserAuth.js
new file mode 100644
index 000000000..7c9cadd77
--- /dev/null
+++ b/app/packs/src/components/UserAuth.js
@@ -0,0 +1,625 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+import 'whatwg-fetch';
+import { ButtonGroup, OverlayTrigger, Popover, Nav, NavDropdown, NavItem, MenuItem, Glyphicon, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel, Col, Row } from 'react-bootstrap';
+import moment from 'moment';
+import Select from 'react-select';
+import _ from 'lodash';
+
+import UserActions from './actions/UserActions';
+import UserStore from './stores/UserStore';
+import Functions from './utils/Functions';
+import UsersFetcher from './fetchers/UsersFetcher';
+import MessagesFetcher from './fetchers/MessagesFetcher';
+import NotificationActions from '../components/actions/NotificationActions';
+import { UserLabelModal } from '../components/UserLabels';
+import MatrixCheck from '../components/common/MatrixCheck';
+import GroupElement from './GroupElement';
+import AuthorModal from './users/AuthorModal';
+
+export default class UserAuth extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: props.currentUser || { name: 'unknown' },
+      showModal: false,
+      showLabelModal: false,
+      showAuthorsModal: false,
+      currentGroups: [],
+      currentDevices: [],
+      selectedUsers: null,
+      showSubscription: false,
+      currentSubscriptions: [],
+      showDeviceMetadataModal: false,
+      device: {},
+      deviceMetadata: {
+        dates: []
+      }
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.handleShow = this.handleShow.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleLabelShow = this.handleLabelShow.bind(this);
+    this.handleLabelClose = this.handleLabelClose.bind(this);
+    this.handleAuthorsShow = this.handleAuthorsShow.bind(this);
+    this.handleAuthorsClose = this.handleAuthorsClose.bind(this);
+    this.handleSubscriptionShow = this.handleSubscriptionShow.bind(this);
+    this.handleSubscriptionClose = this.handleSubscriptionClose.bind(this);
+    this.handleDeviceMetadataModalShow = this.handleDeviceMetadataModalShow.bind(this);
+    this.handleDeviceMetadataModalClose = this.handleDeviceMetadataModalClose.bind(this);
+
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState({
+      currentUser: state.currentUser
+    });
+  }
+
+  logout() {
+    UserActions.logout();
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handlefetchDeviceMetadataByDeviceId(deviceID) {
+    UsersFetcher.fetchDeviceMetadataByDeviceId(deviceID)
+      .then((result) => {
+        if (result.device_metadata) {
+          this.setState({
+            deviceMetadata: result.device_metadata
+          });
+        }
+      });
+  }
+  // show modal
+  handleShow() {
+    UsersFetcher.fetchCurrentGroup()
+      .then((result) => {
+        this.setState({
+          currentGroups: result.currentGroups,
+          showModal: true,
+          selectedUsers: null
+        });
+      });
+    UsersFetcher.fetchCurrentDevices()
+      .then((result) => {
+        this.setState({
+          currentDevices: result.currentDevices
+        });
+      });
+  }
+
+  // hide modal
+  handleClose() {
+    this.setState({ showModal: false, selectedUsers: null });
+  }
+
+  handleDeviceMetadataModalShow(device) {
+    this.setState({
+      showDeviceMetadataModal: true,
+      device
+    });
+    this.handlefetchDeviceMetadataByDeviceId(device.id);
+  }
+
+  handleDeviceMetadataModalClose() {
+    this.setState({
+      showDeviceMetadataModal: false,
+      device: {},
+      deviceMetadata: {}
+    });
+  }
+
+  handleLabelShow() {
+    this.setState({
+      showLabelModal: true
+    });
+  }
+
+  handleLabelClose() {
+    this.setState({ showLabelModal: false });
+  }
+
+  handleAuthorsShow() {
+    this.setState({
+      showAuthorsModal: true,
+    });
+  }
+
+  handleAuthorsClose() {
+    this.setState({ showAuthorsModal: false });
+  }
+  // show modal Subscription
+  handleSubscriptionShow() {
+    MessagesFetcher.fetchChannelWithUser()
+      .then((result) => {
+        this.setState({
+          showSubscription: true,
+          currentSubscriptions: result.channels
+        });
+      });
+  }
+
+  // hide modal Subscription
+  handleSubscriptionClose() {
+    this.setState({ showSubscription: false });
+  }
+
+  // tooltip of yes/no confirmation
+  handleClick() {
+    this.setState({ show: !this.state.show });
+  }
+
+  // inputs of create new group
+  handleInputChange(type, ev) {
+    switch (type) {
+      case 'first':
+        this.setState({ groupFirstName: ev.currentTarget.value });
+        break;
+      case 'last':
+        this.setState({ groupLastName: ev.currentTarget.value });
+        break;
+      case 'abbr':
+        this.setState({ groupAbbreviation: ev.currentTarget.value });
+        break;
+      default:
+        break;
+    }
+  }
+
+  subscribe(node) {
+    const { currentSubscriptions } = this.state;
+
+    MessagesFetcher.subscribeChannel({ channel_id: node.id, subscribe: node.user_id == null })
+      .then((result) => {
+        if (result.error) {
+          // alert(result.error);
+          NotificationActions.add({
+            message: result.error,
+            level: 'error'
+          });
+        } else {
+          const actSubscription = _.filter(
+            this.state.currentSubscriptions,
+            o => o.id === result.channel_id
+          );
+          if (node.user_id != null) {
+            actSubscription[0].user_id = null;
+          } else {
+            actSubscription[0].user_id = result.user_id;
+          }
+          const idx = _.findIndex(this.state.currentSubscriptions, o => o.id === result.channel_id);
+          currentSubscriptions.splice(idx, 1, actSubscription[0]);
+          this.setState({ currentSubscriptions });
+        }
+      });
+  }
+
+  // create new group
+  // need to use the wording 'group_param' because of the definition of current api
+  createGroup() {
+    const {
+      groupFirstName, groupLastName, groupAbbreviation, currentUser, currentGroups
+    } = this.state;
+    const group_param = {
+      first_name: groupFirstName,
+      last_name: groupLastName,
+      name_abbreviation: groupAbbreviation,
+      users: [currentUser.id]
+    };
+
+    UsersFetcher.createGroup({ group_param })
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          currentGroups.push(result.group);
+          this.setState({
+            currentGroups,
+          });
+        }
+      });
+  }
+
+  renderDeviceButtons(device) {
+    return (
+      <td>
+        <Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-laptop" onClick={() => this.handleDeviceMetadataModalShow(device)} />&nbsp;&nbsp;
+      </td>
+    );
+  }
+
+  handleChange(currentGroups) {
+    this.setState({ currentGroups: currentGroups });
+  }
+
+  handleDeleteGroup = currentGroupId => {
+    const currentGroups = this.state.currentGroups.filter(cg => cg.id !== currentGroupId);
+    UsersFetcher.updateGroup({ id: currentGroupId, destroy_group: true })
+    this.setState({ currentGroups });
+  };
+
+  handleDeleteUser =(groupRec, userRec) => {
+    let { currentGroups, currentUser } = this.state;
+    UsersFetcher.updateGroup({ id: groupRec.id, destroy_group: false, rm_users: [userRec.id] })
+      .then((result) => {
+        const findIdx = _.findIndex(result.group.users, function (o) { return o.id == currentUser.id; });
+        const findAdmin = _.findIndex(result.group.admins, function (o) { return o.id == currentUser.id; });
+        if (findIdx == -1 && findAdmin == -1) {
+          currentGroups = _.filter(this.state.currentGroups, o => o.id != result.group.id);
+        } else {
+          const idx = _.findIndex(currentGroups, function (o) { return o.id == result.group.id; });
+          currentGroups.splice(idx, 1, result.group);
+        }
+        this.setState({ currentGroups: currentGroups });
+      });
+  }
+
+  // render modal
+  renderModal() {
+    const { showModal, currentGroups, currentDevices } = this.state;
+
+    const modalStyle = {
+      overflowY: 'auto',
+    };
+
+    let tBodyGroups = '';
+    let tBodyDevices = '';
+
+    if (Object.keys(currentGroups).length <= 0) {
+      tBodyGroups = '';
+    } else {
+      tBodyGroups = currentGroups ? currentGroups.map(g => (
+        <GroupElement groupElement={g} key={g.id} currentState={this.state}
+        currentGroup={this.state.currentGroups}
+        onDeleteGroup={this.handleDeleteGroup}
+        onDeleteUser={this.handleDeleteUser}
+        onChangeData={this.handleChange}></GroupElement>
+      )) : '';
+    }
+
+    if (Object.keys(currentDevices).length <= 0) {
+      tBodyDevices = '';
+    } else {
+      tBodyDevices = currentDevices ? currentDevices.map(g => (
+        <tbody key={`tbody_${g.id}`}>
+          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+            <td>{g.name}</td>
+            <td>{g.name_abbreviation}</td>
+            {this.renderDeviceButtons(g)}
+          </tr>
+        </tbody>
+      )) : '';
+    }
+
+    return (
+      <Modal
+        show={showModal}
+        dialogClassName="importChemDrawModal"
+        onHide={this.handleClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>My Groups & Devices</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={modalStyle}>
+          <div>
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Create new group
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Form inline>
+                  <FormGroup controlId="formInlineFname">
+                    <ControlLabel>Name</ControlLabel>&nbsp;&nbsp;
+                    <FormControl
+                      type="text"
+                      placeholder="eg: AK"
+                      onChange={this.handleInputChange.bind(this, 'first')}
+                    />
+                  </FormGroup>
+                  <FormGroup controlId="formInlineLname">
+                    <FormControl
+                      type="text"
+                      placeholder="J. Moriarty"
+                      onChange={this.handleInputChange.bind(this, 'last')}
+                    />
+                  </FormGroup>&nbsp;&nbsp;
+                  <FormGroup controlId="formInlineNameAbbr">
+                    <ControlLabel>Name abbreviation</ControlLabel>&nbsp;&nbsp;
+                    <FormControl
+                      type="text"
+                      placeholder="AK-JM"
+                      onChange={this.handleInputChange.bind(this, 'abbr')}
+                    />
+                  </FormGroup>&nbsp;&nbsp;
+                  <Button bsSize="xsmall" bsStyle="success" onClick={() => this.createGroup()}>
+                    Create new group
+                  </Button>
+                </Form>
+              </Panel.Body>
+            </Panel>
+            <Panel bsStyle="info">
+              <Panel.Heading>
+                <Panel.Title>
+                  My Groups
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="20%">Name</th>
+                      <th width="10%">Kürzel</th>
+                      <th width="20%">Admin by</th>
+                      <th width="50%">&nbsp;</th>
+                    </tr>
+                  </thead>
+                  {tBodyGroups}
+                </Table>
+              </Panel.Body>
+            </Panel>
+            <Panel bsStyle="info">
+              <Panel.Heading>
+                <Panel.Title>
+                  My Devices
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="40%">Name</th>
+                      <th width="10%">Kürzel</th>
+                      <th width="50%">&nbsp;</th>
+                    </tr>
+                  </thead>
+                  {tBodyDevices}
+                </Table>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  // render modal
+  renderSubscribeModal() {
+    if (this.state.showSubscription) {
+      const tbody = this.state.currentSubscriptions.map(g => (
+        <tr key={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+          <td width="10%" style={{ border: 'none' }}>
+            <Button
+              bsSize="xsmall"
+              bsStyle={g.user_id == null ? 'success' : 'default'}
+              onClick={() => this.subscribe(g)}
+            >
+              {g.user_id == null ? 'Subscribe' : 'Unsubscribe'}
+            </Button>
+          </td>
+          <td width="90%" style={{ border: 'none' }}><div>{g.subject}</div></td>
+        </tr>
+      ));
+
+      return (
+        <Modal
+          show={this.state.showSubscription}
+          onHide={this.handleSubscriptionClose}
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>My Subscription</Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              <Table>
+                <tbody>
+                  {tbody}
+                </tbody>
+              </Table>
+            </div>
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return (<div />);
+  }
+
+  renderDeviceMetadataModal() {
+    const { showDeviceMetadataModal, device, deviceMetadata } = this.state;
+    const title = 'Device Metadata';
+    return (
+      <Modal
+        show={showDeviceMetadataModal}
+        onHide={this.handleDeviceMetadataModalClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{device.name} Metadata</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>
+                {title}
+              </Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Form>
+                <FormGroup controlId="metadataFormDOI">
+                  <ControlLabel>DOI</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.doi}
+                    readonly="true"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormState">
+                  <ControlLabel>State</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.data_cite_state}
+                    readonly="true"
+                  />
+                </FormGroup>
+
+                <FormGroup controlId="metadataFormURL">
+                  <ControlLabel>URL</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.url}
+                    readonly="true"
+                  />
+                </FormGroup>
+
+                <FormGroup controlId="metadataFormLandingPage">
+                  <ControlLabel>Landing Page</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.landing_page}
+                    readonly="true"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormName">
+                  <ControlLabel>Name</ControlLabel>&nbsp;&nbsp;
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.name}
+                    readonly="true"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormPublicationYear">
+                  <ControlLabel>Publication Year</ControlLabel>
+                  <FormControl
+                    type="number"
+                    defaultValue={deviceMetadata.publication_year}
+                    readonly="true"
+                  />
+                </FormGroup>
+                <FormGroup controlId="metadataFormDescription">
+                  <ControlLabel>Description</ControlLabel>
+                  <FormControl
+                    type="text"
+                    defaultValue={deviceMetadata.description}
+                    readonly="true"
+                  />
+                </FormGroup>
+
+                {deviceMetadata.dates && deviceMetadata.dates.map((dateItem, index) => (
+                  <div key={index}>
+                    <Col smOffset={0} sm={6}>
+                      <FormGroup>
+                        <ControlLabel>Date</ControlLabel>
+                        <FormControl
+                          type="text"
+                          defaultValue={dateItem.date}
+                          readonly="true"
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col smOffset={0} sm={6}>
+                      <FormGroup>
+                        <ControlLabel>DateType</ControlLabel>
+                        <FormControl
+                          type="text"
+                          defaultValue={dateItem.dateType}
+                          readonly="true"
+                        />
+                      </FormGroup>
+                    </Col>
+                  </div>
+                ))}
+
+                <Row>
+                  <Col smOffset={0} sm={12}>
+                    <p class="text-right">
+                      DataCiteVersion: {deviceMetadata.data_cite_version}<br />
+                      DataCiteUpdatedAt: {moment(deviceMetadata.data_cite_updated_at).format('YYYY-MM-DD HH:mm')}<br />
+                    </p>
+                  </Col>
+                </Row>
+              </Form>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    const templatesLink = (
+      <MenuItem eventKey="2" href="/ketcher/common_templates">Template Management</MenuItem>
+    );
+    const moderatorLink = (
+      <MenuItem eventKey="6" href="/molecule_moderator">Molecule Moderator</MenuItem>
+    );
+
+    let userLabel = (<span />);
+    if (MatrixCheck(this.state.currentUser.matrix, 'userLabel')) {
+      userLabel = (<MenuItem onClick={this.handleLabelShow}>My Labels</MenuItem>);
+    }
+
+    return (
+      <div>
+        <Nav navbar pullRight>
+          <NavDropdown title={`${this.state.currentUser.name}`} id="bg-nested-dropdown">
+            <MenuItem eventKey="1" href="/pages/settings" >Account &amp; Profile</MenuItem>
+            {this.state.currentUser.is_templates_moderator ? templatesLink : null}
+            <MenuItem eventKey="3" href="/users/edit" >Change Password</MenuItem>
+            <MenuItem eventKey="5" href="/pages/affiliations" >My Affiliations</MenuItem>
+            {userLabel}
+            {
+              this.state.currentUser ?
+                <MenuItem eventKey="10" onClick={this.handleAuthorsShow}>My Collaboration</MenuItem> : null
+            }
+            {/* <MenuItem onClick={this.handleShow}>My Groups</MenuItem> */}
+            {/* <MenuItem onClick={this.handleSubscriptionShow}>My Subscriptions</MenuItem>
+                Disable for now as there is no subsciption channel yet (Paggy) */}
+            <MenuItem eventKey="12" href="/converter_admin" >Converter Profile</MenuItem>
+            {/* <MenuItem eventKey="7" href="/command_n_control" >My Devices</MenuItem> */}
+            {this.state.currentUser.molecule_editor ? moderatorLink : null}
+            {
+              this.state.currentUser && this.state.currentUser.is_article_editor ?
+                <MenuItem eventKey="8" href="/home/newseditor/new">News Editor</MenuItem> : null
+            }
+            {
+              this.state.currentUser && this.state.currentUser.is_howto_editor ?
+                <MenuItem eventKey="9" href="/home/howtoeditor/ein">How-To Editor</MenuItem> : null
+            }
+          </NavDropdown>
+          <NavItem onClick={() => this.logout()} style={{ marginRight: '5px' }} className="" title="Log out">
+            <Glyphicon glyph="log-out" />
+          </NavItem>
+        </Nav>
+        <AuthorModal show={this.state.showAuthorsModal} currentUser={this.state.currentUser} onHide={this.handleAuthorsClose} />
+        { this.renderModal() }
+        <UserLabelModal showLabelModal={this.state.showLabelModal} onHide={() => this.handleLabelClose()} />
+        {this.renderSubscribeModal()}
+        {this.renderDeviceMetadataModal()}
+      </div>
+    );
+  }
+}
+
+UserAuth.propTypes = {
+  currentUser: PropTypes.object,
+  selectUsers: PropTypes.bool,
+}
diff --git a/app/packs/src/components/UserInfoIcon.js b/app/packs/src/components/UserInfoIcon.js
new file mode 100644
index 000000000..a0c2c93d0
--- /dev/null
+++ b/app/packs/src/components/UserInfoIcon.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const UserInfoIcon = ({type}) =>{
+  switch(type) {
+    case 'Person':
+      return <i className="fa fa-user" aria-hidden="true"/>
+    case 'Group':
+      return <i className="fa fa-users" aria-hidden="true"/>
+    default:
+      return  <i className="fa fa-question" aria-hidden="true"/>
+  }
+}
+
+UserInfoIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+}
+
+export default UserInfoIcon;
diff --git a/app/packs/src/components/UserLabels.js b/app/packs/src/components/UserLabels.js
index 277ef1cdb..5175a8d6e 100644
--- a/app/packs/src/components/UserLabels.js
+++ b/app/packs/src/components/UserLabels.js
@@ -29,7 +29,6 @@ class UserLabelModal extends Component {
     this.handleEditLabelClick = this.handleEditLabelClick.bind(this);
   }
 
-
   componentDidMount() {
     UserStore.listen(this.onChange);
   }
diff --git a/app/packs/src/components/ViewSpectra.js b/app/packs/src/components/ViewSpectra.js
new file mode 100644
index 000000000..e057f87cf
--- /dev/null
+++ b/app/packs/src/components/ViewSpectra.js
@@ -0,0 +1,744 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { SpectraEditor, FN } from '@complat/react-spectra-editor';
+import { Modal, Well, Button } from 'react-bootstrap';
+import Select from 'react-select';
+import PropTypes from 'prop-types';
+import TreeSelect from 'antd/lib/tree-select';
+
+import LoadingActions from './actions/LoadingActions';
+import SpectraActions from './actions/SpectraActions';
+import ElementActions from './actions/ElementActions';
+import SpectraStore from './stores/SpectraStore';
+import { SpectraOps } from './utils/quillToolbarSymbol';
+import ResearchPlan from './models/ResearchPlan';
+
+const rmRefreshed = (analysis) => {
+  if (!analysis) return analysis;
+  const { refreshed, ...coreAnalysis } = analysis;
+  return coreAnalysis;
+};
+
+class ViewSpectra extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...SpectraStore.getState(),
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.writeCommon = this.writeCommon.bind(this);
+    this.writePeakOp = this.writePeakOp.bind(this);
+    this.writeMpyOp = this.writeMpyOp.bind(this);
+    this.writeCloseCommon = this.writeCloseCommon.bind(this);
+    this.writeClosePeakOp = this.writeClosePeakOp.bind(this);
+    this.writeCloseMpyOp = this.writeCloseMpyOp.bind(this);
+    this.saveOp = this.saveOp.bind(this);
+    this.saveCloseOp = this.saveCloseOp.bind(this);
+    this.refreshOp = this.refreshOp.bind(this);
+    this.closeOp = this.closeOp.bind(this);
+    this.predictOp = this.predictOp.bind(this);
+    this.buildOpsByLayout = this.buildOpsByLayout.bind(this);
+    this.renderSpectraEditor = this.renderSpectraEditor.bind(this);
+    this.renderEmpty = this.renderEmpty.bind(this);
+    this.renderTitle = this.renderTitle.bind(this);
+    this.formatPks = this.formatPks.bind(this);
+    this.getContent = this.getContent.bind(this);
+    this.getSpcInfo = this.getSpcInfo.bind(this);
+    this.getQDescVal = this.getQDescVal.bind(this);
+    this.buildOthers = this.buildOthers.bind(this);
+    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
+    this.updateROPredict = this.updateROPredict.bind(this);
+    this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
+  }
+
+  componentDidMount() {
+    SpectraStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    SpectraStore.unlisten(this.onChange);
+  }
+
+  onChange(newState) {
+    const origState = this.state;
+    this.setState({ ...origState, ...newState });
+  }
+
+  opsSolvent(shift) {
+    const { label } = shift.ref;
+
+    switch (label) {
+      case false:
+        return [];
+      case 'CDCl$3':
+        return [
+          { insert: 'CDCl' },
+          { insert: '3', attributes: { script: 'sub' } },
+          { insert: ', ' },
+        ];
+      case 'C$6D$1$2':
+        return [
+          { insert: 'C' },
+          { insert: '6', attributes: { script: 'sub' } },
+          { insert: 'D' },
+          { insert: '12', attributes: { script: 'sub' } },
+          { insert: ', ' },
+        ];
+      case 'CD2Cl2':
+      case 'CD$2Cl$2':
+        return [
+          { insert: 'CD' },
+          { insert: '2', attributes: { script: 'sub' } },
+          { insert: 'Cl' },
+          { insert: '2', attributes: { script: 'sub' } },
+          { insert: ', ' },
+        ];
+      case 'D$2O':
+        return [
+          { insert: 'D' },
+          { insert: '2', attributes: { script: 'sub' } },
+          { insert: 'O' },
+          { insert: ', ' },
+        ];
+      default:
+        return [{ insert: `${label}, ` }];
+    }
+  }
+
+  onDSSelectChange(e) {
+    const { value } = e;
+    const { spcInfos } = this.state;
+    const sis = spcInfos.filter(x => x.idDt === value);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+    SpectraActions.SelectIdx(si.idx, []);
+  }
+
+  getDSList() {
+    const { sample } = this.props;
+    const { spcInfos } = this.state;
+    const spcDts = spcInfos.map(e => e.idDt);
+    const dcs = sample.datasetContainers();
+    const dcss = dcs.filter(e => spcDts.includes(e.id));
+    return dcss;
+  }
+
+  isShowMultipleSelectFile(idx) {
+    const { spcMetas, arrSpcIdx } = this.state;
+    let spcs = false;
+    if (arrSpcIdx.length > 0) {
+      spcs = spcMetas.filter(x => arrSpcIdx.includes(x.idx));
+    }
+    else {
+      spcs = spcMetas.filter(x => x.idx === idx);
+    }
+
+    if (spcs && spcs.length > 0) {
+      const spc = spcs[0];
+      const { jcamp } = spc;
+      if (jcamp.layout === 'CYCLIC VOLTAMMETRY') {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  getContent() {
+    const { spcMetas, spcIdx, arrSpcIdx, spcInfos } = this.state;
+    if (arrSpcIdx.length > 0) {
+      const listMuliSpcs = [];
+      const listEntityFiles = [];
+      for (let i = 0; i < arrSpcIdx.length; i++) {
+        const idx = arrSpcIdx[i];
+        const spc = spcMetas.filter(x => x.idx === idx)[0];
+        if (spc) {
+          const { jcamp } = spc;
+          if (jcamp.layout !== 'CYCLIC VOLTAMMETRY') {
+            return spc;
+          }
+          listMuliSpcs.push(spc);
+        }
+        const entity = spcInfos.filter(x => x.idx === idx)[0];
+        if (entity) {
+          listEntityFiles.push(entity);
+        }
+      }
+      return { listMuliSpcs: listMuliSpcs, listEntityFiles: listEntityFiles };
+    }
+    else {
+      const sm = spcMetas.filter(x => x.idx === spcIdx)[0];
+      return sm || spcMetas[0] || { jcamp: null, predictions: null };
+    }
+  }
+
+  getSpcInfo(curveIdx = 0) {
+    const { spcInfos, spcIdx, arrSpcIdx } = this.state;
+    let selectedIdx = spcIdx;
+    if (arrSpcIdx.length > 0) {
+      selectedIdx = arrSpcIdx[curveIdx];
+    }
+    const sis = spcInfos.filter(x => x.idx === selectedIdx);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+    return si;
+  }
+
+  getQDescVal() {
+    const { sample } = this.props;
+    const { spcInfos, spcIdx } = this.state;
+    const sis = spcInfos.filter(x => x.idx === spcIdx);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+
+    const ops = sample.analysesContainers().map((ae) => {
+      if (ae.id !== si.idAe) return null;
+      return ae.children.map((ai) => {
+        if (ai.id !== si.idAi) return null;
+        return ai.extended_metadata.content.ops; // eslint-disable-line
+      }).filter(r => r !== null);
+    }).filter(r => r !== null)[0][0];
+    return ops;
+  }
+
+  formatPks({
+    peaks, shift, layout, isAscend, decimal, body,
+    isIntensity, integration
+  }) {
+    const layoutOpsObj = SpectraOps[layout];
+    if (!layoutOpsObj) {
+      return [];
+    }
+
+    const { jcamp } = this.getContent();
+    const { entity } = FN.buildData(jcamp);
+    const { features } = entity;
+    const { observeFrequency } = Array.isArray(features)
+      ? features[0]
+      : (features.editPeak || features.autoPeak);
+    const freq = Array.isArray(observeFrequency) ? observeFrequency[0] : observeFrequency;
+    const freqStr = freq ? `${parseInt(freq, 10)} MHz, ` : '';
+    // peaks
+    const { maxY, minY } = Array.isArray(features)
+      ? features[0]
+      : (features.editPeak || features.autoPeak);
+    const boundary = { maxY, minY };
+    const mBody = body || FN.peaksBody({
+      peaks, layout, decimal, shift, isAscend, isIntensity, boundary, integration
+    });
+
+    const { label, value, name } = shift.ref;
+    const solvent = label ? `${name.split('(')[0].trim()} [${value.toFixed(decimal)} ppm], ` : '';
+    return [
+      ...layoutOpsObj.head(freqStr, solvent),
+      { insert: mBody },
+      ...layoutOpsObj.tail(),
+    ];
+  }
+
+  formatMpy({
+    shift, isAscend, decimal,
+    integration, multiplicity, layout,
+  }) {
+    // obsv freq
+    const { jcamp } = this.getContent();
+    const { entity } = FN.buildData(jcamp);
+    const { features } = entity;
+    const { observeFrequency } = Array.isArray(features)
+      ? features[0]
+      : (features.editPeak || features.autoPeak);
+    const freq = Array.isArray(observeFrequency) ? observeFrequency[0] : observeFrequency;
+    const freqStr = freq ? `${parseInt(freq, 10)} MHz, ` : '';
+    // multiplicity
+    const { refArea, refFactor } = integration;
+    const shiftVal = multiplicity.shift;
+    const ms = multiplicity.stack;
+    const is = integration.stack;
+
+    const macs = ms.map((m) => {
+      const { peaks, mpyType, xExtent } = m;
+      const { xL, xU } = xExtent;
+      const it = is.filter(i => i.xL === xL && i.xU === xU)[0] || { area: 0 };
+      const area = (it.area * refFactor) / refArea;
+      const center = FN.calcMpyCenter(peaks, shiftVal, mpyType);
+      const xs = m.peaks.map(p => p.x).sort((a, b) => a - b);
+      const [aIdx, bIdx] = isAscend ? [0, xs.length - 1] : [xs.length - 1, 0];
+      const mxA = mpyType === 'm' ? (xs[aIdx] - shiftVal).toFixed(decimal) : 0;
+      const mxB = mpyType === 'm' ? (xs[bIdx] - shiftVal).toFixed(decimal) : 0;
+      return Object.assign({}, m, {
+        area, center, mxA, mxB,
+      });
+    }).sort((a, b) => (isAscend ? a.center - b.center : b.center - a.center));
+    let couplings = [].concat(...macs.map((m) => {
+      const c = m.center;
+      const type = m.mpyType;
+      const it = Math.round(m.area);
+      const js = [].concat(...m.js.map(j => (
+        [
+          { insert: 'J', attributes: { italic: true } },
+          { insert: ` = ${j.toFixed(1)} Hz` },
+          { insert: ', ' },
+        ]
+      )));
+      const atomCount = layout === '1H' ? `, ${it}H` : '';
+      const location = type === 'm' ? `${m.mxA}–${m.mxB}` : `${c.toFixed(decimal)}`;
+      return m.js.length === 0
+        ? [
+          { insert: `${location} (${type}${atomCount})` },
+          { insert: ', ' },
+        ]
+        : [
+          { insert: `${location} (${type}, ` },
+          ...js.slice(0, js.length - 1),
+          { insert: `${atomCount})` },
+          { insert: ', ' },
+        ];
+    }));
+    couplings = couplings.slice(0, couplings.length - 1);
+    const { label, value, name } = shift.ref;
+    const solvent = label ? `${name.split('(')[0].trim()} [${value.toFixed(decimal)} ppm], ` : '';
+    return [
+      { attributes: { script: 'super' }, insert: layout.slice(0, -1) },
+      { insert: `${layout.slice(-1)} NMR (${freqStr}${solvent}ppm) δ = ` },
+      ...couplings,
+      { insert: '.' },
+    ];
+  }
+
+  writeCommon({
+    peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
+    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt
+  }, isMpy = false) {
+    const { sample, handleSampleChanged } = this.props;
+    const si = this.getSpcInfo();
+    if (!si) return;
+
+    let ops = [];
+    if (['1H', '13C', '19F'].indexOf(layout) >= 0 && isMpy) {
+      ops = this.formatMpy({
+        multiplicity, integration, shift, isAscend, decimal, layout,
+      });
+    } else {
+      ops = this.formatPks({
+        peaks,
+        shift,
+        layout,
+        isAscend,
+        decimal,
+        body,
+        isIntensity,
+        integration
+      });
+    }
+
+    sample.analysesContainers().forEach((ae) => {
+      if (ae.id !== si.idAe) return;
+      ae.children.forEach((ai) => {
+        if (ai.id !== si.idAi) return;
+        ai.extended_metadata.content.ops = [ // eslint-disable-line
+          ...ai.extended_metadata.content.ops,
+          ...ops,
+        ];
+      });
+    });
+
+    const cb = () => (
+      this.saveOp({
+        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt
+      })
+    );
+    handleSampleChanged(sample, cb);
+  }
+
+  writePeakOp(params) {
+    const isMpy = false;
+    this.writeCommon(params, isMpy);
+  }
+
+  updateROPredict() {
+    const { sample } = this.props;
+    ElementActions.fetchSampleById(sample.id);
+  }
+
+  writeMpyOp(params) {
+    const isMpy = true;
+    this.writeCommon(params, isMpy);
+  }
+
+  saveOp({
+    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr = false
+  }) {
+    const { handleSubmit, sample } = this.props;
+    const { curveIdx } = curveSt;
+    const si = this.getSpcInfo(curveIdx);
+    if (!si) return;
+    const fPeaks = FN.rmRef(peaks, shift);
+    const peaksStr = FN.toPeakStr(fPeaks);
+    const predict = JSON.stringify(rmRefreshed(analysis));
+    const waveLengthStr = JSON.stringify(waveLength);
+    const cyclicvolta = JSON.stringify(cyclicvoltaSt);
+
+    LoadingActions.start.defer();
+    SpectraActions.SaveToFile.defer(
+      si,
+      peaksStr,
+      shift,
+      scan,
+      thres,
+      JSON.stringify(integration),
+      JSON.stringify(multiplicity),
+      predict,
+      sample.can_update === true ? handleSubmit : this.updateROPredict,
+      keepPred,
+      waveLengthStr,
+      cyclicvolta,
+      curveIdx,
+      simulatenmr,
+    );
+  }
+
+  refreshOp({
+    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+  }) {
+    this.saveOp({
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr: true
+    });
+  }
+
+  closeOp() {
+    SpectraActions.ToggleModal.defer();
+  }
+
+  writeCloseCommon(params, isMpy = false) {
+    this.writeCommon(params, isMpy);
+    this.closeOp();
+  }
+
+  writeClosePeakOp(params) {
+    const isMpy = false;
+    this.writeCommon(params, isMpy);
+    this.closeOp();
+  }
+
+  writeCloseMpyOp(params) {
+    const isMpy = true;
+    this.writeCommon(params, isMpy);
+    this.closeOp();
+  }
+
+  saveCloseOp({
+    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+  }) {
+    this.saveOp({
+      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
+    });
+    this.closeOp();
+  }
+
+  getPeaksByLayou(peaks, layout, multiplicity) {
+    if (['IR'].indexOf(layout) >= 0) return peaks;
+    if (['13C'].indexOf(layout) >= 0) return FN.CarbonFeatures(peaks, multiplicity);
+
+    const { stack, shift } = multiplicity;
+    const nmrMpyCenters = stack.map((stk) => {
+      const { mpyType, peaks } = stk;
+      return {
+        x: FN.CalcMpyCenter(peaks, shift, mpyType),
+        y: 0,
+      };
+    });
+    const defaultCenters = [{ x: -1000.0, y: 0 }];
+    return nmrMpyCenters.length > 0 ? nmrMpyCenters : defaultCenters;
+  }
+
+  predictOp({
+    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity,
+    layout,
+  }) {
+    const { handleSubmit, sample } = this.props;
+    const si = this.getSpcInfo();
+    if (!si) return;
+    const fPeaks = FN.rmRef(peaks, shift);
+    const peaksStr = FN.toPeakStr(fPeaks);
+    const predict = JSON.stringify(rmRefreshed(analysis));
+    const targetPeaks = this.getPeaksByLayou(peaks, layout, multiplicity);
+
+    // LoadingActions.start.defer();
+    SpectraActions.InferRunning.defer();
+    SpectraActions.InferSpectrum.defer(
+      si,
+      peaksStr,
+      shift,
+      scan,
+      thres,
+      JSON.stringify(integration),
+      JSON.stringify(multiplicity),
+      predict,
+      targetPeaks,
+      layout,
+      sample.can_update === true ? handleSubmit : this.updateROPredict,
+      keepPred,
+    );
+  }
+
+  buildOpsByLayout(et) {
+    if (this.props.sample && this.props.sample instanceof ResearchPlan) {
+      return [
+        { name: 'write & save', value: this.writeOp },
+        { name: 'write, save & close', value: this.writeCloseOp },
+      ];
+    }
+    const updatable = this.props.sample && this.props.sample.can_update;
+    let baseOps = updatable ? [
+      { name: 'write peak & save', value: this.writePeakOp },
+      { name: 'write peak, save & close', value: this.writeClosePeakOp },
+    ] : [];
+    const isNmr = updatable && ['1H', '13C', '19F'].indexOf(et.layout) >= 0;
+    if (isNmr) {
+      baseOps = [
+        ...baseOps,
+        { name: 'write multiplicity & save', value: this.writeMpyOp },
+        { name: 'write multiplicity, save & close', value: this.writeCloseMpyOp },
+      ];
+    }
+    if (et.layout === 'CYCLIC VOLTAMMETRY') {
+      return [
+        { name: 'save', value: this.saveOp },
+        { name: 'save & close', value: this.saveCloseOp },
+      ];
+    }
+    const saveable = updatable;
+    if (saveable) {
+      baseOps = [
+        ...baseOps,
+        { name: 'save', value: this.saveOp },
+        { name: 'save & close', value: this.saveCloseOp },
+      ];
+    }
+
+    // TO BE CHECKED
+    if (baseOps.length === 0) {
+      baseOps = [{ name: 'predict', value: this.predictOp }];
+    }
+
+    return baseOps;
+  }
+
+  buildOthers() {
+    const { others } = this.state;
+
+    return {
+      others,
+      addOthersCb: SpectraActions.AddOthers,
+    };
+  }
+
+  renderEmpty() {
+    const { fetched } = this.state;
+    const content = fetched
+      ? (
+        <Well onClick={this.closeOp}>
+          <i className="fa fa-exclamation-triangle fa-3x" />
+          <h3>No Spectra Found!</h3>
+          <h3>Please refresh the page!</h3>
+          <br />
+          <h5>Click here to close the window...</h5>
+        </Well>
+      )
+      : <i className="fa fa-refresh fa-spin fa-3x fa-fw" />;
+
+    return (
+      <div className="card-box">
+        {content}
+      </div>
+    );
+  }
+
+  renderInvalid() {
+    const { fetched } = this.state;
+    const content = fetched
+      ? (
+        <Well onClick={this.closeOp}>
+          <i className="fa fa-chain-broken fa-3x" />
+          <h3>Invalid spectrum!</h3>
+          <h3>Please delete it and upload a valid file!</h3>
+          <br />
+          <h5>Click here to close the window...</h5>
+        </Well>
+      )
+      : <i className="fa fa-refresh fa-spin fa-3x fa-fw" />;
+
+    return (
+      <div className="card-box">
+        {content}
+      </div>
+    );
+  }
+
+  renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles) {
+    const { sample } = this.props;
+    const {
+      entity, isExist,
+    } = FN.buildData(jcamp);
+
+    let currEntity = entity;
+
+    let multiEntities = false;
+    let entityFileNames = false;
+    if (!isExist) {
+      if (!listMuliSpcs || listMuliSpcs.length === 0) return this.renderInvalid();
+      listMuliSpcs = listMuliSpcs.filter((x => x !== undefined));
+      listEntityFiles = listEntityFiles.filter((x => x !== undefined));
+      multiEntities = listMuliSpcs.map((spc) => {
+        const {
+          entity
+        } = FN.buildData(spc.jcamp);
+        currEntity = entity;
+        return entity;
+      });
+      entityFileNames = listEntityFiles.map(x => x.label);
+    }
+
+    const others = this.buildOthers();
+    const operations = this.buildOpsByLayout(currEntity);
+    const descriptions = this.getQDescVal();
+    const forecast = {
+      btnCb: this.predictOp,
+      refreshCb: this.refreshOp,
+      molecule: 'molecule',
+      predictions,
+    };
+
+    return (
+      <Modal.Body>
+        {
+          !isExist && multiEntities.length == 0
+            ? this.renderInvalid()
+            : <SpectraEditor
+              entity={currEntity}
+              multiEntities={multiEntities}
+              entityFileNames={entityFileNames}
+              others={others}
+              operations={operations}
+              forecast={forecast}
+              molSvg={sample.svgPath}
+              descriptions={descriptions}
+              canChangeDescription
+              onDescriptionChanged={this.onSpectraDescriptionChanged}
+              userManualLink={{cv: 'https://chemotion.net/docs/chemspectra/cv'}}
+            />
+        }
+      </Modal.Body>
+    );
+  }
+
+  renderTitle(idx) {
+    const { spcInfos, arrSpcIdx } = this.state;
+    const si = this.getSpcInfo();
+    if (!si) return null;
+    const modalTitle = si ? `Spectra Editor - ${si.title}` : '';
+    const options = spcInfos.filter(x => x.idDt === si.idDt)
+      .map(x => ({ value: x.idx, label: x.label }));
+    // const onSelectChange = e => SpectraActions.SelectIdx(e.value);
+    const isShowMultiSelect = this.isShowMultipleSelectFile(idx);
+    const onSelectChange = value => {
+      if (Array.isArray(value)) {
+        const reversedValue = value.reverse();
+        SpectraActions.SelectIdx(reversedValue[0], reversedValue);
+      }
+      else {
+        SpectraActions.SelectIdx(value, []);
+      }
+    }
+    const dses = this.getDSList();
+    const dsOptions = dses.map(x => ({ value: x.id, label: x.name }));
+
+    return (
+      <div className="spectra-editor-title">
+        <span className="txt-spectra-editor-title">
+          {modalTitle}
+        </span>
+        <div style={{ display: 'inline-flex', margin: '0 0 0 100px' }} >
+          <Select
+            options={dsOptions}
+            value={si.idDt}
+            clearable={false}
+            style={{ width: 200 }}
+            onChange={e => this.onDSSelectChange(e)}
+          />
+          <TreeSelect
+            treeData={options}
+            value={isShowMultiSelect ? arrSpcIdx : idx}
+            treeCheckable={isShowMultiSelect}
+            style={{ width: 500 }}
+            maxTagCount={1}
+            onChange={onSelectChange} />
+        </div>
+        <Button
+          bsStyle="danger"
+          bsSize="small"
+          className="button-right"
+          onClick={this.closeOp}
+        >
+          <span>
+            <i className="fa fa-times" /> Close without Save
+          </span>
+        </Button>
+      </div>
+    );
+  }
+
+  onSpectraDescriptionChanged(value) {
+    const { spcInfos, spcIdx } = this.state;
+    const sis = spcInfos.filter(x => x.idx === spcIdx);
+    const si = sis.length > 0 ? sis[0] : spcInfos[0];
+    const { sample } = this.props;
+    sample.analysesContainers().forEach((ae) => {
+      if (ae.id !== si.idAe) return;
+      ae.children.forEach((ai) => {
+        if (ai.id !== si.idAi) return;
+        ai.extended_metadata.content.ops = value.ops;
+      });
+    });
+  }
+
+  render() {
+    const { showModal } = this.state;
+
+    const { jcamp, predictions, idx, listMuliSpcs, listEntityFiles } = this.getContent();
+    const dialogClassName = 'spectra-editor-dialog';
+    // WORKAROUND: react-stickydiv duplicates elements.
+    const specElements = Array.from(document.getElementsByClassName(dialogClassName));
+    if (specElements.length > 1) {
+      specElements.slice(1).forEach(el => el.parentNode.style.display = 'none'); // eslint-disable-line
+    }
+    // WORKAROUND: react-stickydiv duplicates elements.
+
+    return (
+      <div className="spectra-editor">
+        <Modal
+          show={showModal}
+          dialogClassName={dialogClassName}
+          animation
+          onHide={this.closeOp}
+        >
+          {
+            this.renderTitle(idx)
+          }
+          {
+            showModal && (jcamp || (listMuliSpcs && listMuliSpcs.length > 0))
+              ? this.renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles)
+              : this.renderEmpty()
+          }
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ViewSpectra.propTypes = {
+  sample: PropTypes.object.isRequired,
+  handleSampleChanged: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+};
+
+export default ViewSpectra;
diff --git a/app/packs/src/components/WelcomeMessage.js b/app/packs/src/components/WelcomeMessage.js
new file mode 100644
index 000000000..449e85c9d
--- /dev/null
+++ b/app/packs/src/components/WelcomeMessage.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Jumbotron } from 'react-bootstrap';
+import ReactMarkdown from 'react-markdown';
+
+function Message(props) {
+  const input = props.post;
+  if (input != null && input !== undefined) {
+    return (<Jumbotron>
+      <ReactMarkdown children={input} />
+    </Jumbotron>);
+  }
+  return null;
+}
+
+class WelcomeMessage extends Component {
+  state = {
+    post: null
+  }
+  componentDidMount() {
+    fetch('welcome-message.md')
+      .then((res) => {
+        if (res.ok) {
+          return res.text();
+        }
+        return null;
+      }).then(post => this.setState(state => ({ ...state, post })))
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+  render() {
+    const { post } = this.state;
+    return (
+      <Message post={post} />
+    );
+  }
+}
+export default WelcomeMessage;
diff --git a/app/packs/src/components/Well.js b/app/packs/src/components/Well.js
new file mode 100644
index 000000000..b10b159cd
--- /dev/null
+++ b/app/packs/src/components/Well.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SVG from 'react-inlinesvg';
+
+export default class Well extends Component {
+  render() {
+    const {sample, active} = this.props;
+
+    const className = (active) ? "well-molecule molecule-selected" : "well-molecule";
+    if (sample) {
+      return (
+        <div>
+          <SVG className={className} key={sample.id} src={sample.svgPath}/>
+        </div>
+      );
+    } else {
+      return <div></div>
+    }
+  }
+}
+
+Well.propTypes = {
+  sample: PropTypes.object
+};
diff --git a/app/packs/src/components/WellContainer.js b/app/packs/src/components/WellContainer.js
new file mode 100644
index 000000000..6f52fd5f8
--- /dev/null
+++ b/app/packs/src/components/WellContainer.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DragSource, DropTarget } from 'react-dnd';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import Well from 'src/apps/mydb/elements/details/wellplates/designerTab/Well';
+
+const wellSource = {
+  beginDrag(props) {
+    return props;
+  }
+};
+
+const wellTarget = {
+  canDrop(props, monitor) {
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    let canDrop = true;
+    if (itemType == 'sample' && props.well.sample) {
+      canDrop = false;
+    } else if (itemType == 'well' && !item.well.sample && !props.well.sample) {
+      canDrop = false;
+    }
+    return canDrop;
+  },
+  drop(props, monitor) {
+    const item = monitor.getItem();
+    const itemType = monitor.getItemType();
+    if (itemType == 'sample') {
+      props.dropSample(item.element, props.well);
+    } else if (itemType == 'well') {
+      props.swapWells(item.well, props.well);
+    }
+  }
+};
+
+const collectTarget = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+});
+
+class WellContainer extends Component {
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { active, hideOverlay } = this.props;
+    if (active && nextProps.isDragging) {
+      hideOverlay();
+    }
+  }
+
+  render() {
+    const { style, isDragging, connectDragSource, connectDropTarget, well, isOver, canDrop, active } = this.props;
+    const containerStyle = {
+      paddingTop: 9,
+      borderRadius: '50%',
+      float: 'left',
+      borderWidth: 4,
+      borderStyle: 'solid',
+      borderColor: 'lightgray',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      lineHeight: 2,
+      cursor: 'move',
+      backgroundColor: well.color_code || 'white'
+    };
+    if (active) {
+      containerStyle.backgroundColor = '#337ab7';
+      containerStyle.color = 'white';
+    }
+    if (isDragging) {
+      containerStyle.opacity = 0;
+    }
+    if (well.sample) {
+      containerStyle.borderColor = 'gray';
+    }
+    if (isOver && canDrop) {
+      containerStyle.borderStyle = 'dashed';
+      containerStyle.borderColor = '#337ab7';
+      containerStyle.opacity = 0;
+    } else if (canDrop) {
+      containerStyle.borderStyle = 'dashed';
+    }
+
+    return (
+      connectDragSource(connectDropTarget(
+        <div style={{ ...containerStyle, ...style }}>
+          <Well
+            active={active}
+            label={well.label}
+            sample={well.sample}
+          />
+        </div>
+      ))
+    );
+  }
+}
+
+export default DropTarget([DragDropItemTypes.WELL, DragDropItemTypes.SAMPLE], wellTarget, collectTarget)(DragSource(DragDropItemTypes.WELL, wellSource, collectSource)(WellContainer));
+
+WellContainer.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  swapWells: PropTypes.func.isRequired,
+  dropSample: PropTypes.func.isRequired,
+  well: PropTypes.object
+};
diff --git a/app/packs/src/components/WellOverlay.js b/app/packs/src/components/WellOverlay.js
new file mode 100644
index 000000000..e7a240282
--- /dev/null
+++ b/app/packs/src/components/WellOverlay.js
@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  Overlay,
+  ControlLabel,
+  FormGroup,
+  FormControl,
+  Col, InputGroup, ButtonGroup, Form,
+} from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import UIStore from './stores/UIStore';
+import { wellplateShowSample } from './routesUtils';
+import Select from 'react-select';
+import { CirclePicker } from 'react-color';
+
+const WellOverlay = ({show, well, placement, target, handleClose, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode}) => {
+  return (
+    <Overlay  rootClose
+              show={show}
+              target={target}
+              placement={placement}
+              onHide={() => handleClose()} >
+      <Popover title={title(handleClose)} id={'wellpop'+well.id}>
+        {content(well, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode)}
+      </Popover>
+    </Overlay>
+  );
+}
+
+const content = (well, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode) => {
+  const { sample } = well;
+  const bcStyle = {
+    backgroundColor: selectedColor || well.color_code
+  };
+  const wellLabels = well.label ? well.label.split(',') : [];
+  const isDisable = () => wellLabels.some(item => item === 'Molecular structure');
+
+  const labels = [{
+    label: 'Name',
+    value: 'Name',
+    disabled: isDisable()
+  }, {
+    label: 'External label',
+    value: 'External label',
+    disabled: isDisable()
+  }, {
+    label: 'Molecular structure',
+    value: 'Molecular structure',
+    disabled: (wellLabels.some(item => item !== 'Molecular structure'))
+  }];
+
+  return(
+    <div style={{width: 220, height: 850}}>
+      {renderWellContent(well, removeSampleFromWell)}
+      <div>
+        <hr style={{marginTop: 28, marginBottom: 10}}/>
+        <Select
+          id="label"
+          name="label"
+          multi
+          options={labels}
+          value={well.label}
+          onChange={e => handleWellLabel(e)}
+        />
+        &nbsp;
+        <FormGroup>
+          <ControlLabel>Readout</ControlLabel>
+          <FormControl componentClass="textarea"
+            disabled={true}
+            value={well.readout || ''}
+            style={{height: 80}}
+          />
+        </FormGroup>
+        <FormGroup>
+          <ControlLabel>Imported Readout</ControlLabel>
+          <FormControl componentClass="textarea"
+            disabled={true}
+            value={sampleImportedReadout(sample) || ''}
+            style={{height: 80}}
+          />
+        </FormGroup>
+        <FormGroup style={{ top: '50px' }} controlId="colorInput">
+          <Col componentClass={ControlLabel} sm={3}>
+            Select Color
+          </Col>
+          <Col sm={9}>
+            <InputGroup>
+              <InputGroup.Addon style={bcStyle}></InputGroup.Addon>
+              <FormControl
+                type="text"
+                readOnly
+                value={selectedColor || well.color_code}
+              />
+            </InputGroup>
+          </Col>
+        </FormGroup>
+        <FormGroup controlId="formHorizontalPicker">
+          <Col sm={12}>
+            <CirclePicker width="132%" onChangeComplete={e => handleColorPicker(e)} />
+          </Col>
+        </FormGroup>
+        <ButtonGroup style={{ top: '10px', bottom: '10px' }}>
+          <Button style={{ left: '80px' }} onClick={saveColorCode}>Save</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}
+
+const title = (handleClose) => {
+  return(
+    <div>
+      Well Details
+      <span className='pull-right' style={{marginRight: -8, marginTop: -3}}>
+        <Button bsSize='xsmall' onClick={() => handleClose()}>
+          <i className="fa fa-times"></i>
+        </Button>
+      </span>
+    </div>
+  )
+}
+
+const renderWellContent = (well, removeSampleFromWell) => {
+  const {sample} = well;
+  let svg, moleculeName, removeButton = '';
+  const namesStyle= {textAlign: 'center', marginTop: 5};
+  const svgContainerStyle = {
+    borderRadius: '50%',
+    height: 200,
+    width: 200,
+    border: '6px solid lightgray',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    lineHeight: 2
+  };
+  if (sample) {
+    svg = <SVG key={sample.id} className="molecule-mid" src={sample.svgPath}/>;
+    moleculeName = sample.molecule.iupac_name;
+    removeButton = (
+      <div className="pull-right">
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => removeSampleFromWell(well)}>
+          <span className="fa fa-trash-o"></span>
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div style={svgContainerStyle}>
+        {svg}
+      </div>
+      <div style={namesStyle}>
+        {sampleName(sample)}<br/>
+        {moleculeName}<br/>
+      </div>
+      {removeButton}
+    </div>
+  );
+}
+
+const sampleImportedReadout = (sample) => {
+  return sample
+    ? sample.imported_readout
+    : ''
+}
+
+const sampleName = (sample) => {
+  if(sample) {
+    let {name, external_label, short_label} = sample
+    let sampleNameLabel = `${name || ""} ${external_label || ""} ${short_label || ""}`
+    if(sample.isNew) {
+      return sampleNameLabel;
+    } else {
+      return (
+        <a onClick={() => handleSampleClick(sample)} style={{cursor: 'pointer'}}>
+          {sampleNameLabel}
+        </a>
+      );
+    }
+
+  }
+}
+
+const handleSampleClick = (sample) => {
+  const { params, uri } = Aviator.getCurrentRequest();
+  Aviator.navigate(`${uri}/sample/${sample.id}`, { silent: true });
+  wellplateShowSample({ params: { ...params, sampleID: sample.id } });
+}
+
+export default WellOverlay;
diff --git a/app/packs/src/components/Wellplate.js b/app/packs/src/components/Wellplate.js
new file mode 100644
index 000000000..06949dbad
--- /dev/null
+++ b/app/packs/src/components/Wellplate.js
@@ -0,0 +1,206 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import WellContainer from './WellContainer';
+import WellplateLabels from './WellplateLabels';
+import WellOverlay from './WellOverlay';
+import WellplatesFetcher from './fetchers/WellplatesFetcher';
+
+export default class Wellplate extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOverlay: false,
+      overlayTarget: {},
+      overlayWell: {},
+      overlayPlacement: 'right',
+      selectedColor: null
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.onScroll.bind(this));
+    document.getElementsByClassName('panel-body')[0].addEventListener('scroll', this.onScroll.bind(this));
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { show } = nextProps;
+    if (!show) {
+      this.hideOverlay();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll.bind(this));
+    document.getElementsByClassName('panel-body')[0].removeEventListener('scroll', this.onScroll.bind(this));
+  }
+
+  onScroll() {
+    const { showOverlay, overlayTarget, overlayWell } = this.state;
+    if (showOverlay) {
+      this.hideOverlay();
+      setTimeout(() => {
+        this.showOverlay(overlayTarget, overlayWell);
+      }, 700);
+    }
+  }
+
+  swapWells(firstWell, secondWell) {
+    const { handleWellsChange, wells } = this.props;
+    const firstWellId = wells.indexOf(firstWell);
+    const secondWellId = wells.indexOf(secondWell);
+    const temp = wells[firstWellId].sample;
+    wells[firstWellId].sample = wells[secondWellId].sample;
+    wells[secondWellId].sample = temp;
+    handleWellsChange(wells);
+  }
+
+  dropSample(droppedSample, well) {
+    const { handleWellsChange, wells } = this.props;
+    const wellId = wells.indexOf(well);
+    const sample = droppedSample.buildChild();
+    wells[wellId] = {
+      ...well,
+      sample
+    };
+    handleWellsChange(wells);
+  }
+
+  removeSampleFromWell(well) {
+    const { handleWellsChange, wells } = this.props;
+    const wellId = wells.indexOf(well);
+    wells[wellId] = {
+      ...well,
+      sample: null
+    };
+    handleWellsChange(wells);
+    this.hideOverlay();
+  }
+
+  hideOverlay() {
+    this.setState({
+      showOverlay: false,
+      selectedColor: null
+    });
+  }
+
+  showOverlay(key, well) {
+    const { cols } = this.props;
+    const isWellInUpperHalf = Math.ceil(cols / 2) > key % cols;
+    const placement = (isWellInUpperHalf) ? 'right' : 'left';
+    this.setState({
+      showOverlay: true,
+      overlayTarget: key,
+      overlayWell: well,
+      overlayPlacement: placement
+    });
+  }
+
+  setWellLabel(target) {
+    const { overlayWell } = this.state;
+    WellplatesFetcher.updateWellLabel({
+      id: overlayWell.id,
+      label: target.map(t => t.label).toString()
+    }).then((result) => {
+      overlayWell.label = result.label;
+      this.setState({ overlayWell });
+    });
+  }
+
+  toggleOverlay(key, well) {
+    const {showOverlay, overlayWell} = this.state;
+    if (showOverlay && overlayWell == well) {
+      this.hideOverlay();
+    } else {
+      this.showOverlay(key, well);
+    }
+  }
+
+  isWellActive(well) {
+    const {showOverlay, overlayWell} = this.state;
+    return (showOverlay && overlayWell == well);
+  }
+
+  saveColorCode() {
+    const { overlayWell, selectedColor } = this.state;
+    WellplatesFetcher.updateWellColorCode({
+      id: overlayWell.id,
+      color_code: selectedColor,
+    }).then((result) => {
+      overlayWell.color_code = result.color_code;
+      this.setState({ overlayWell });
+    });
+  }
+
+  setColorPicker(color) {
+    this.setState({ selectedColor: color.hex });
+  }
+
+  render() {
+    const {wells, size, cols, width, handleWellsChange} = this.props;
+    const {showOverlay, overlayTarget, overlayWell, overlayPlacement, selectedColor} = this.state;
+    const style = {
+      width: (cols + 1) * width,
+      height: ((size / cols) + 1) * width
+    };
+    const containerStyle = {
+      width: width,
+      height: width,
+      fontSize: 8
+    };
+
+    return (
+      <div style={style}>
+        <WellplateLabels
+          size={size}
+          cols={cols}
+          width={width}
+          type={'horizontal'}
+          />
+        <WellplateLabels
+          size={size}
+          cols={cols}
+          width={width}
+          type={'vertical'}
+          />
+        {wells.map((well, key) => {
+          return (
+            <div
+              key={key}
+              ref={key}
+              onClick={event => this.toggleOverlay(key, well)}
+              >
+              <WellContainer
+                well={well}
+                style={containerStyle}
+                swapWells={(firstWell, secondWell) => this.swapWells(firstWell, secondWell)}
+                dropSample={(sample, wellId) => this.dropSample(sample, wellId)}
+                active={this.isWellActive(well)}
+                hideOverlay={() => this.hideOverlay()}
+                />
+            </div>
+          );
+        })}
+        <WellOverlay
+          show={showOverlay}
+          well={overlayWell}
+          selectedColor={selectedColor}
+          placement={overlayPlacement}
+          target={() => ReactDOM.findDOMNode(this.refs[overlayTarget]).children[0]}
+          handleClose={() => this.hideOverlay()}
+          removeSampleFromWell={well => this.removeSampleFromWell(well)}
+          handleColorPicker={value => this.setColorPicker(value)}
+          saveColorCode={() => this.saveColorCode()}
+          handleWellLabel={value => this.setWellLabel(value)}
+        />
+      </div>
+    );
+  }
+}
+
+Wellplate.propTypes = {
+  size: PropTypes.number.isRequired,
+  wells: PropTypes.array.isRequired,
+  handleWellsChange: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/components/WellplateDetails.js b/app/packs/src/components/WellplateDetails.js
new file mode 100644
index 000000000..9e05d11fe
--- /dev/null
+++ b/app/packs/src/components/WellplateDetails.js
@@ -0,0 +1,279 @@
+import React, { Component } from 'react';
+import html2pdf from 'html2pdf.js/src';
+import PropTypes from 'prop-types';
+import {
+  Well, Panel, ListGroupItem, ButtonToolbar, Button,
+  Tabs, Tab, Tooltip, OverlayTrigger, Col, Row, Popover
+} from 'react-bootstrap';
+import { findIndex } from 'lodash';
+import LoadingActions from './actions/LoadingActions';
+import ElementCollectionLabels from './ElementCollectionLabels';
+import ElementActions from './actions/ElementActions';
+import DetailActions from './actions/DetailActions';
+import Wellplate from './Wellplate';
+import WellplateList from './WellplateList';
+import WellplateProperties from './WellplateProperties';
+import WellplateDetailsContainers from './WellplateDetailsContainers';
+import PrintCodeButton from './common/PrintCodeButton';
+import UIStore from './stores/UIStore';
+import UIActions from './actions/UIActions';
+import ConfirmClose from './common/ConfirmClose';
+import ExportSamplesBtn from './ExportSamplesBtn';
+import Immutable from 'immutable';
+import ElementDetailSortTab from './ElementDetailSortTab';
+import { addSegmentTabs } from './generic/SegmentDetails';
+import PrivateNoteElement from './PrivateNoteElement'
+
+const cols = 12;
+
+export default class WellplateDetails extends Component {
+  constructor(props) {
+    super(props);
+    const { wellplate } = props;
+    this.state = {
+      wellplate,
+      activeTab: UIStore.getState().wellplate.activeTab,
+      showWellplate: true,
+      visible: Immutable.List(),
+    };
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
+    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIStoreChange);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { wellplate } = this.state;
+    const nextWellplate = nextProps.wellplate;
+    if (nextWellplate.id !== wellplate.id || nextWellplate.updated_at !== wellplate.updated_at) {
+      this.setState({
+        wellplate: nextWellplate
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIStoreChange);
+  }
+
+  onUIStoreChange(state) {
+    if (state.wellplate.activeTab !== this.state.activeTab) {
+      this.setState({
+        activeTab: state.wellplate.activeTab
+      });
+    }
+  }
+
+  handleSegmentsChange(se) {
+    const { wellplate } = this.state;
+    const { segments } = wellplate;
+    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
+    wellplate.segments = segments;
+    wellplate.changed = true;
+    this.setState({ wellplate });
+  }
+
+  handleSubmit() {
+    const { wellplate } = this.state;
+    LoadingActions.start();
+    if (wellplate.isNew) {
+      ElementActions.createWellplate(wellplate.serialize());
+    } else {
+      ElementActions.updateWellplate(wellplate.serialize());
+    }
+    if (wellplate.is_new) {
+      const force = true;
+      DetailActions.close(wellplate, force);
+    }
+    wellplate.updateChecksum();
+  }
+
+  handleWellplateChanged(wellplate) {
+    this.setState({
+      wellplate
+    });
+  }
+
+  handlePrint() {
+    const element = document.getElementById('wellplate-designer');
+    if (element) {
+      const opt = { filename: `${this.state.wellplate.name}-wells.pdf` };
+      html2pdf(element, opt);
+    }
+  }
+
+  handleWellsChange(wells) {
+    const { wellplate } = this.state;
+    wellplate.wells = wells;
+    this.setState({ wellplate });
+  }
+
+  handleChangeProperties(change) {
+    const { wellplate } = this.state;
+    const { type, value } = change;
+    switch (type) {
+      case 'name':
+        wellplate.name = value === '' ? 'New Wellplate' : value;
+        break;
+      case 'description':
+        wellplate.description = value;
+        break;
+      default:
+        break;
+    }
+    this.setState({ wellplate });
+  }
+
+  handleTabChange(eventKey) {
+    const showWellplate = (eventKey === 0);
+    this.setState(previousState => ({ ...previousState, activeTab: eventKey, showWellplate }));
+    UIActions.selectTab({ tabKey: eventKey, type: 'wellplate' });
+  }
+
+  wellplateHeader(wellplate) {
+    const saveBtnDisplay = wellplate.isEdited ? '' : 'none';
+    const datetp = `Created at: ${wellplate.created_at} \n Updated at: ${wellplate.updated_at}`;
+
+
+    return (
+      <div>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
+          <span>
+            <i className="icon-wellplate" />
+            &nbsp; <span>{wellplate.name}</span> &nbsp;
+          </span>
+        </OverlayTrigger>
+        <ElementCollectionLabels element={wellplate} placement="right" />
+        <ConfirmClose el={wellplate} />
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
+          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: saveBtnDisplay }}>
+            <i className="fa fa-floppy-o " />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
+          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.props.toggleFullScreen()}>
+            <i className="fa fa-expand" />
+          </Button>
+        </OverlayTrigger>
+        <PrintCodeButton element={wellplate} />
+      </div>
+    );
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({visible})
+  }
+
+  render() {
+    const {
+      wellplate, showWellplate, visible
+    } = this.state;
+    const {
+      wells, name, size, description
+    } = wellplate;
+    const submitLabel = wellplate.isNew ? 'Create' : 'Save';
+    const exportButton = (wellplate && wellplate.isNew) ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
+    const properties = { name, size, description };
+
+
+    const tabContentsMap = {
+      designer: (
+        <Tab eventKey="designer" title="Designer" key={`designer_${wellplate.id}`}>
+          <Row className="wellplate-detail">
+            <Col md={10}>
+              <Well id="wellplate-designer">
+                <Wellplate
+                  show={showWellplate}
+                  size={size}
+                  wells={wells}
+                  handleWellsChange={w => this.handleWellsChange(w)}
+                  cols={cols}
+                  width={60}
+                />
+              </Well>
+            </Col>
+          </Row>
+        </Tab>
+      ),
+      list: (
+        <Tab eventKey="list" title="List" key={`list_${wellplate.id}`}>
+          <Well>
+            <WellplateList
+              wells={wells}
+              handleWellsChange={w => this.handleWellsChange(w)}
+            />
+          </Well>
+        </Tab>
+      ),
+      properties: (
+        <Tab eventKey="properties" title="Properties" key={`properties_${wellplate.id}`}>
+          <WellplateProperties
+            {...properties}
+            changeProperties={c => this.handleChangeProperties(c)}
+          />
+          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} /> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
+        </Tab>
+      ),
+      analyses: (
+        <Tab eventKey="analyses" title="Analyses" key={`analyses_${wellplate.id}`}>
+          <ListGroupItem style={{ paddingBottom: 20 }}>
+            <WellplateDetailsContainers
+              wellplate={wellplate}
+              parent={this}
+            />
+          </ListGroupItem>
+        </Tab>
+      ),
+    };
+
+    const tabTitlesMap = {
+    }
+    addSegmentTabs(wellplate, this.handleSegmentsChange, tabContentsMap);
+
+    const tabContents = [];
+    visible.forEach((value) => {
+      const tabContent = tabContentsMap[value];
+      if (tabContent) { tabContents.push(tabContent); }
+    });
+
+    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
+
+    return (
+      <Panel bsStyle={wellplate.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail">
+        <Panel.Heading>{this.wellplateHeader(wellplate)}</Panel.Heading>
+        <Panel.Body>
+          <ElementDetailSortTab
+            type="wellplate"
+            availableTabs={Object.keys(tabContentsMap)}
+            tabTitles={tabTitlesMap}
+            onTabPositionChanged={this.onTabPositionChanged}
+          />
+          <Tabs activeKey={activeTab} onSelect={event => this.handleTabChange(event)} id="wellplateDetailsTab">
+            {tabContents}
+          </Tabs>
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>
+              Close
+            </Button>
+            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
+              {submitLabel}
+            </Button>
+            {exportButton}
+            <Button bsStyle="primary" onClick={() => this.handlePrint()}>
+              Print Wells
+            </Button>
+          </ButtonToolbar>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+WellplateDetails.propTypes = {
+  wellplate: PropTypes.object.isRequired,
+  toggleFullScreen: PropTypes.func,
+};
diff --git a/app/packs/src/components/WellplateDetailsContainers.js b/app/packs/src/components/WellplateDetailsContainers.js
new file mode 100644
index 000000000..b33c94817
--- /dev/null
+++ b/app/packs/src/components/WellplateDetailsContainers.js
@@ -0,0 +1,179 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {PanelGroup, Panel, Button, Row, Col} from 'react-bootstrap';
+import Container from './models/Container';
+import ContainerComponent from './ContainerComponent';
+import PrintCodeButton from './common/PrintCodeButton'
+
+import TextTemplateActions from './actions/TextTemplateActions';
+
+export default class WellplateDetailsContainers extends Component {
+  constructor(props) {
+    super();
+    const {wellplate} = props;
+    this.state = {
+      wellplate,
+      activeContainer: 0
+    };
+  }
+
+  componentDidMount() {
+    TextTemplateActions.fetchTextTemplates('wellplate');
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      wellplate: nextProps.wellplate
+    })
+  }
+
+  handleChange(container) {
+    const {wellplate} = this.state
+    this.props.parent.handleWellplateChanged(wellplate)
+  }
+
+  handleAdd() {
+    const {wellplate} = this.state;
+    let container = Container.buildEmpty();
+    container.container_type = "analysis";
+
+    wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.push(container);
+
+    const newKey = wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.length - 1;
+
+    this.handleAccordionOpen(newKey);
+
+    this.props.parent.setState({wellplate: wellplate})
+  }
+
+  handleRemove(container) {
+    let {wellplate} = this.state;
+    container.is_deleted = true;
+
+    this.props.parent.setState({wellplate: wellplate})
+  }
+
+  handleUndo(container) {
+    let {wellplate} = this.state;
+    container.is_deleted = false;
+
+    this.props.parent.setState({wellplate: wellplate})
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({activeContainer: key});
+  }
+
+  addButton() {
+    const {readOnly} = this.props;
+    if(! readOnly) {
+      return (
+          <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
+            Add analysis
+          </Button>
+      )
+    }
+  }
+
+  render() {
+    const {wellplate, activeContainer} = this.state;
+    const {readOnly} = this.props;
+
+    let containerHeader = (container) => <div style={{width: '100%'}}>
+        {container.name}
+        {(container.extended_metadata['kind'] &&
+           container.extended_metadata['kind'] != '')
+        ? (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
+        {(container.extended_metadata['status'] &&
+           container.extended_metadata['status'] != '')
+           ? (' - Status: ' + container.extended_metadata['status']) :''}
+        <Button bsSize="xsmall" bsStyle="danger"
+           className="button-right" disabled={readOnly}
+          onClick={() => {if(confirm('Delete the container?')) {
+            this.handleRemove(container)}}}>
+          <i className="fa fa-trash"></i>
+        </Button>
+        <PrintCodeButton element={wellplate} analyses={[container]}
+          ident={container.id}/>
+      </div>
+
+      let containerHeaderDeleted = (container) => <p style={{width: '100%'}}><strike>{container.name}
+        {(container.extended_metadata['kind'] &&
+            container.extended_metadata['kind'] != '')
+          ? (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
+        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
+        </strike>
+        <Button className="pull-right" bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(container)}>
+          <i className="fa fa-undo"></i>
+        </Button>
+        </p>
+
+    if(wellplate.container != null){
+
+      var analyses_container = wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'));
+
+      if(analyses_container.length == 1 && analyses_container[0].children.length > 0){
+        return (
+          <div>
+          <p>&nbsp;{this.addButton()}</p>
+          <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
+          {analyses_container[0].children.map((container, key) => {
+            if (container.is_deleted){
+              return (
+                <Panel eventKey={key}
+                    key={key} >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                </Panel>
+                  );
+                }else {
+              return (
+                <Panel eventKey={key}
+                    key={key} onClick={() => this.handleAccordionOpen(key)}>
+                  <Panel.Heading>{containerHeader(container)}</Panel.Heading>
+                  <Panel.Body collapsible="true">
+                    <ContainerComponent
+                      templateType="wellplate"
+                      readOnly={readOnly}
+                      container={container}
+                      onChange={container => this.handleChange(container)}
+                    />
+                  </Panel.Body>
+                </Panel>
+              );
+            }
+
+            }
+          )}
+          </PanelGroup>
+          </div>
+        )
+      }else {
+        return (
+          <div>
+            <p className='noAnalyses-warning'>
+              There are currently no Analyses.
+              {this.addButton()}
+            </p>
+          </div>
+        )
+      }
+
+    }else{
+
+      return (
+        <div>
+          <p className='noAnalyses-warning'>
+            There are currently no Analyses.
+          </p>
+        </div>
+      )
+    }
+
+  }
+
+}
+
+WellplateDetailsContainers.propTypes = {
+  readOnly: PropTypes.bool,
+  parent: PropTypes.object,
+};
diff --git a/app/packs/src/components/WellplateLabels.js b/app/packs/src/components/WellplateLabels.js
new file mode 100644
index 000000000..29773370b
--- /dev/null
+++ b/app/packs/src/components/WellplateLabels.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+
+export default class WellplateLabels extends Component {
+  render() {
+    const {size, cols, width, type} = this.props;
+    let style = {
+      width: width,
+      fontSize: 20,
+      fontWeight: 'bold'
+    };
+    if (type == 'horizontal') {
+      let labels = [];
+      for (let i = 0; i < cols; i ++) {
+        labels[i] = i + 1;
+      }
+      style = {
+        ...style,
+        float: 'left',
+        height: width / 2,
+        textAlign: 'center'
+      };
+      return (
+        <div>
+          {labels.map(label => <div style={style} key={label}>{label}</div>)}
+        </div>
+      );
+    } else if (type == 'vertical') {
+      const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+      let labels = [];
+      const rows = size / cols;
+      for (let i = 0; i < rows; i ++) {
+        labels[i] = alphabet[i];
+      }
+      style = {
+        ...style,
+        height: width,
+        lineHeight: 3,
+        verticalAlign: 'middle',
+        paddingLeft: 10
+      };
+      return (
+        <div style={{float: 'right', marginTop: width / 2}}>
+          {labels.map((label, key) => <div style={style} key={key}>{label}</div>)}
+        </div>
+      );
+    }
+  }
+}
diff --git a/app/packs/src/components/WellplateList.js b/app/packs/src/components/WellplateList.js
new file mode 100644
index 000000000..d16b3fefc
--- /dev/null
+++ b/app/packs/src/components/WellplateList.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table, FormControl } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+
+export default class WellplateList extends Component {
+  handleReadoutOfWellChange(event, well) {
+    const value = event.target.value;
+    const { wells, handleWellsChange } = this.props;
+    const wellId = wells.indexOf(well);
+    wells[wellId].readout = value;
+    handleWellsChange(wells);
+  }
+
+  render() {
+    const { wells } = this.props;
+    return (
+      <div>
+        <Table bordered hover condensed>
+          <thead>
+            <tr>
+              <th width="3%">#</th>
+              <th width="5%">Position</th>
+              <th width="5%">Molecule</th>
+              <th width="11%">Name</th>
+              <th width="11%">External Label</th>
+              <th width="15%">Sum-Formula</th>
+              <th width="25%">Readout</th>
+              <th width="25%">Imported Readout</th>
+            </tr>
+          </thead>
+          <tbody>
+            {wells.map((well, key) => {
+              const id = key + 1;
+              const { sample, position, readout } = well;
+              const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+              const positionY = alphabet[position.y - 1];
+              const positions = positionY + position.x;
+              let svgPath = '';
+              let sampleName = '';
+              let externalLabel = '';
+              let sum_formular = '';
+              let importedReadout = '';
+              let svgNode = '';
+              const style = {
+                resize: 'none',
+                height: 66
+              };
+              const inputContainerStyle = {
+                padding: 0
+              };
+              if (sample) {
+                svgPath = `/images/molecules/${sample.molecule.molecule_svg_file}`;
+                svgNode = <SVG className="molecule-small" src={svgPath} />;
+                const { external_label, short_label, imported_readout } = sample;
+                sampleName = `${short_label || ''}`;
+                externalLabel = `${external_label || ''}`;
+                importedReadout = imported_readout;
+                sum_formular = sample.molecule_formula;
+              }
+              return (
+                <tr key={key}>
+                  <td>{id}</td>
+                  <td>{positions}</td>
+                  <td>{svgNode}</td>
+                  <td>{sampleName}</td>
+                  <td>{externalLabel}</td>
+                  <td>{sum_formular}</td>
+                  <td style={inputContainerStyle}>
+                    <FormControl
+                      componentClass="textarea"
+                      style={style}
+                      value={readout || ''}
+                      onChange={event => this.handleReadoutOfWellChange(event, well)}
+                      className="no-margin"
+                    />
+                  </td>
+                  <td style={inputContainerStyle}>
+                    <FormControl
+                      componentClass="textarea"
+                      style={style}
+                      value={importedReadout || ''}
+                      disabled
+                      className="no-margin"
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </div>
+    );
+  }
+}
+
+WellplateList.propTypes = {
+  wells: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  handleWellsChange: PropTypes.func.isRequired
+};
diff --git a/app/packs/src/components/WellplateProperties.js b/app/packs/src/components/WellplateProperties.js
new file mode 100644
index 000000000..6bf7ba15b
--- /dev/null
+++ b/app/packs/src/components/WellplateProperties.js
@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {FormGroup, FormControl, ControlLabel} from 'react-bootstrap';
+
+import QuillEditor from './QuillEditor'
+
+export default class WellplateProperties extends Component {
+
+  handleInputChange(type, event) {
+    const {changeProperties} = this.props;
+    const {value} = event.target;
+    changeProperties({type: type, value: value});
+  }
+
+  render() {
+    const {name, size, description} = this.props;
+    return (
+      <table width="100%"><tbody>
+        <tr>
+          <td width="70%" className="padding-right">
+            <FormGroup>
+              <ControlLabel>Name</ControlLabel>
+              <FormControl type="text"
+                value={name || ''}
+                onChange={event => this.handleInputChange('name', event)}
+                disabled={name == '***'}
+              />
+            </FormGroup>
+          </td>
+          <td width="30%">
+            <FormGroup>
+              <ControlLabel>Size</ControlLabel>
+              <FormControl type="text"
+                value={size || ''}
+                onChange={event => this.handleInputChange('size', event)}
+                disabled
+              />
+            </FormGroup>
+          </td>
+        </tr>
+        <tr>
+          <td colSpan="2">
+            <FormGroup>
+              <ControlLabel>Description</ControlLabel>
+              <QuillEditor value={description}
+                onChange={event => this.handleInputChange('description', {target: {value: event}})}
+                disabled={description == '***'}
+              />
+            </FormGroup>
+          </td>
+        </tr>
+      </tbody></table>
+    );
+  }
+}
diff --git a/app/packs/src/components/actions/ClipboardActions.js b/app/packs/src/components/actions/ClipboardActions.js
new file mode 100644
index 000000000..2522bca23
--- /dev/null
+++ b/app/packs/src/components/actions/ClipboardActions.js
@@ -0,0 +1,32 @@
+import alt from '../alt';
+import SamplesFetcher from '../fetchers/SamplesFetcher';
+import WellplatesFetcher from '../fetchers/WellplatesFetcher';
+
+
+class ClipboardActions {
+  fetchSamplesByUIStateAndLimit(params, action) {
+    return (dispatch) => { SamplesFetcher.fetchSamplesByUIStateAndLimit(params)
+      .then((result) => {
+        dispatch({samples: result, collection_id: params.sample.collection_id, action: action});
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchWellplatesByUIState(params, action) {
+    return (dispatch) => { WellplatesFetcher.fetchWellplatesByUIState(params)
+      .then((result) => {
+        dispatch({wellplates: result, collection_id: params.wellplate.collection_id, action: action});
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchElementAndBuildCopy(sample, collection_id, action) {
+    sample.collection_id = collection_id;
+    return (
+      { samples: [sample], collection_id: collection_id, action: action}
+    )
+  }
+}
+export default alt.createActions(ClipboardActions);
diff --git a/app/packs/src/components/actions/CollectionActions.js b/app/packs/src/components/actions/CollectionActions.js
new file mode 100644
index 000000000..17d405a6b
--- /dev/null
+++ b/app/packs/src/components/actions/CollectionActions.js
@@ -0,0 +1,179 @@
+import alt from '../alt';
+import CollectionsFetcher from '../fetchers/CollectionsFetcher';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import UIStore from '../stores/UIStore';
+import Utils from '../utils/Functions';
+
+class CollectionActions {
+  fetchGenericEls() {
+    return (dispatch) => { UsersFetcher.fetchElementKlasses()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  takeOwnership(params) {
+    return (dispatch) => { CollectionsFetcher.takeOwnership(params)
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // TODO #2...centralized error handling maybe ErrorActions?
+  fetchLockedCollectionRoots() {
+    return (dispatch) => { CollectionsFetcher.fetchLockedRoots()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchUnsharedCollectionRoots() {
+    return (dispatch) => { CollectionsFetcher.fetchUnsharedRoots()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchSharedCollectionRoots() {
+    return (dispatch) => { CollectionsFetcher.fetchSharedRoots()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchRemoteCollectionRoots() {
+    return (dispatch) => { CollectionsFetcher.fetchRemoteRoots()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchSyncInCollectionRoots() {
+    return (dispatch) => { CollectionsFetcher.fetchSyncRemoteRoots()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  createSharedCollections(params) {
+    return (dispatch) => { CollectionsFetcher.createSharedCollections(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  bulkUpdateUnsharedCollections(params) {
+    return (dispatch) => { CollectionsFetcher.bulkUpdateUnsharedCollections(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateSharedCollection(params) {
+    return (dispatch) => { CollectionsFetcher.updateSharedCollection(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  createUnsharedCollection(params) {
+    return (dispatch) => { CollectionsFetcher.createUnsharedCollection(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  createSync(params){
+    return (dispatch) => { CollectionsFetcher.createSync(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  editSync(params){
+    return (dispatch) => { CollectionsFetcher.editSync(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+  deleteSync(params){
+    return (dispatch) => { CollectionsFetcher.deleteSync(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+  rejectSync(params){
+    return (dispatch) => { CollectionsFetcher.deleteSync(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+  rejectShared(params){
+    return (dispatch) => { CollectionsFetcher.rejectShared(params)
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateCollectrionTree(visibleRootsIds) {
+    return visibleRootsIds
+  }
+
+  downloadReport(tab){
+    const {currentCollection} = UIStore.getState();
+
+    Utils.downloadFile({contents: "/api/v1/reports/excel?id=" + currentCollection.id +"&tab="+tab});
+  }
+
+  exportCollectionsToFile(params) {
+    return (dispatch) => { CollectionsFetcher.createExportJob(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  importCollectionsFromFile(params) {
+    return (dispatch) => { CollectionsFetcher.createImportJob(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+}
+
+export default alt.createActions(CollectionActions);
diff --git a/app/packs/src/components/actions/ComputeTaskActions.js b/app/packs/src/components/actions/ComputeTaskActions.js
new file mode 100644
index 000000000..ec0ab76f5
--- /dev/null
+++ b/app/packs/src/components/actions/ComputeTaskActions.js
@@ -0,0 +1,47 @@
+/* eslint-disable class-methods-use-this */
+import alt from '../alt';
+import ComputeTaskFetcher from '../fetchers/ComputeTaskFetcher';
+
+class ComputeTaskActions {
+  fetchAll() {
+    return (dispatch) => {
+      ComputeTaskFetcher.fetchAll().then(res => (
+        dispatch(res)
+      )).catch((err) => {
+        console.log(err);
+      });
+    };
+  }
+
+  checkState(taskId) {
+    return (dispatch) => {
+      ComputeTaskFetcher.checkState(taskId).then(res => (
+        dispatch(res)
+      )).catch((err) => {
+        console.log(err);
+      });
+    };
+  }
+
+  revokeTask(taskId) {
+    return (dispatch) => {
+      ComputeTaskFetcher.revokeTask(taskId).then(res => (
+        dispatch(res)
+      )).catch((err) => {
+        console.log(err);
+      });
+    };
+  }
+
+  deleteTask(taskId) {
+    return (dispatch) => {
+      ComputeTaskFetcher.deleteTask(taskId).then(res => (
+        dispatch(res)
+      )).catch((err) => {
+        console.log(err);
+      });
+    };
+  }
+}
+
+export default alt.createActions(ComputeTaskActions);
diff --git a/app/packs/src/components/actions/DetailActions.js b/app/packs/src/components/actions/DetailActions.js
new file mode 100644
index 000000000..814a6351f
--- /dev/null
+++ b/app/packs/src/components/actions/DetailActions.js
@@ -0,0 +1,59 @@
+import alt from 'src/stores/alt/alt'
+import _ from 'lodash'
+import MoleculesFetcher from 'src/fetchers/MoleculesFetcher'
+
+class DetailActions {
+  select(index) {
+    return index
+  }
+
+  close(deleteEl, force = false) {
+    return { deleteEl, force }
+  }
+
+  confirmDelete(confirm) {
+    return confirm
+  }
+
+  changeCurrentElement(oriEl, nextEl) {
+    return { oriEl, nextEl }
+  }
+
+  getMoleculeCas(sample) {
+    return (dispatch) => {
+      MoleculesFetcher.fetchCas(sample.molecule.inchikey)
+        .then((result) => {
+          sample.molecule = result
+          dispatch(sample)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  updateMoleculeNames(sample, newMolName = '') {
+    const inchikey = sample.molecule.inchikey;
+    if (!inchikey) { return null; }
+
+    return (dispatch) => {
+      MoleculesFetcher
+        .updateNames(inchikey, newMolName)
+        .then((result) => {
+          const mn = result.find(r => r.name === newMolName);
+          if (mn) sample.molecule_name = { label: mn.name, value: mn.id };
+          sample.molecule_names = result;
+          dispatch(sample);
+        })
+        .catch(errorMessage => console.log(errorMessage));
+    };
+  }
+
+  updateMoleculeCas(sample, newCas = '') {
+    const m = sample.molecule;
+    m.cas = [...m.cas, newCas];
+    sample.molecule = m;
+    return sample;
+  }
+}
+
+export default alt.createActions(DetailActions)
diff --git a/app/packs/src/components/actions/ElementActions.js b/app/packs/src/components/actions/ElementActions.js
new file mode 100644
index 000000000..ae72af912
--- /dev/null
+++ b/app/packs/src/components/actions/ElementActions.js
@@ -0,0 +1,828 @@
+/* eslint-disable class-methods-use-this */
+import alt from '../alt';
+
+import UIActions from './UIActions';
+import UserActions from './UserActions';
+
+import NotificationActions from './NotificationActions';
+import UIFetcher from '../fetchers/UIFetcher';
+import SamplesFetcher from '../fetchers/SamplesFetcher';
+import MoleculesFetcher from '../fetchers/MoleculesFetcher';
+import ReactionsFetcher from '../fetchers/ReactionsFetcher';
+import WellplatesFetcher from '../fetchers/WellplatesFetcher';
+import CollectionsFetcher from '../fetchers/CollectionsFetcher';
+import ScreensFetcher from '../fetchers/ScreensFetcher';
+import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
+import SearchFetcher from '../fetchers/SearchFetcher';
+import DeviceFetcher from '../fetchers/DeviceFetcher';
+import ContainerFetcher from '../fetchers/ContainerFetcher';
+import GenericElsFetcher from '../fetchers/GenericElsFetcher';
+import PrivateNoteFetcher from '../fetchers/PrivateNoteFetcher'
+
+import GenericEl from '../models/GenericEl';
+import Sample from '../models/Sample';
+import Reaction from '../models/Reaction';
+import Wellplate from '../models/Wellplate';
+import Screen from '../models/Screen';
+import ResearchPlan from '../models/ResearchPlan';
+import Report from '../models/Report';
+import Format from '../models/Format';
+import Graph from '../models/Graph';
+import ComputeTask from '../models/ComputeTask';
+import DeviceControl from '../models/DeviceControl';
+import LiteratureMap from '../models/LiteratureMap';
+import Prediction from '../models/Prediction';
+import ReactionSvgFetcher from '../fetchers/ReactionSvgFetcher';
+
+import _ from 'lodash';
+
+const handleFetch = (dispatch, fetch) => {
+  return fetch()
+    .then((result) => {
+      dispatch(result)
+    })
+    .catch((errorMessage) => {
+      console.log(errorMessage)
+    })
+}
+
+class ElementActions {
+  // -- Devices --
+  fetchAllDevices() {
+    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.fetchAll())
+  }
+
+  fetchDeviceById(deviceId) {
+    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.fetchById(deviceId))
+  }
+
+  createDevice () {
+    return null
+  }
+
+  changeActiveAccordionDevice(key) {
+    return (dispatch) => dispatch(key)
+  }
+
+  changeSelectedDeviceId(device) {
+    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.changeSelectedDevice(device))
+  }
+
+  setSelectedDeviceId(deviceId) {
+    return (dispatch) => dispatch(deviceId)
+  }
+
+  toggleDeviceType(device, type) {
+    return (dispatch) => dispatch({device, type})
+  }
+
+  saveDevice(device) {
+    if (device.isNew) {
+      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.create(device))
+    } else {
+      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.update(device))
+    }
+  }
+
+  deleteDevice(device) {
+    if (!device.isNew) {
+      DeviceFetcher.delete(device)
+    }
+    return (dispatch) => dispatch(device)
+  }
+
+  addSampleToDevice(sample, device, options) {
+    return (dispatch) => dispatch({sample, device, options})
+  }
+
+  addSampleWithAnalysisToDevice(sample, analysis, device) {
+    return (dispatch) => dispatch({sample, analysis, device})
+  }
+
+  removeSampleFromDevice(sample, device) {
+    return (dispatch) => dispatch({sample, device})
+  }
+
+  toggleTypeOfDeviceSample(device, sample, type) {
+    return (dispatch) => dispatch({device, sample, type})
+  }
+
+  changeDeviceProp(device, prop, value) {
+    return (dispatch) => dispatch({device, prop, value})
+  }
+
+  fetchDeviceAnalysisById(analysisId) {
+    return (dispatch) => {
+      DeviceFetcher.fetchAnalysisById(analysisId)
+      .then(analysis => {
+        DeviceFetcher.fetchById(analysis.deviceId)
+        .then(device => {
+          dispatch({analysis, device})
+        })
+      })
+    }
+  }
+
+  openDeviceAnalysis(device, type) {
+    return (dispatch) => dispatch({device, type})
+  }
+
+  saveDeviceAnalysis(analysis) {
+    if (analysis.isNew) {
+      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.createAnalysis(analysis))
+    } else {
+      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.updateAnalysis(analysis))
+    }
+  }
+
+  createDeviceAnalysis(deviceId, analysisType) {
+    return (dispatch) => {
+      DeviceFetcher.fetchById(deviceId)
+      .then((device) => {
+        dispatch({device, analysisType})
+      })
+    }
+  }
+
+  generateExperimentConfig(experiment) {
+    return (dispatch) =>
+      handleFetch(dispatch, () => DeviceFetcher.generateExperimentConfig(experiment))
+  }
+
+  duplicateAnalysisExperiment(analysis, experiment) {
+    return (dispatch) =>
+      DeviceFetcher.fetchById(analysis.deviceId)
+      .then((device) => {
+        dispatch({device, analysis, experiment})
+      })
+  }
+
+  changeAnalysisExperimentProp(analysis, experiment, prop, value) {
+    return (dispatch) => dispatch({analysis, experiment, prop, value})
+  }
+
+  deleteAnalysisExperiment(analysis, experiment) {
+    return (dispatch) =>
+      DeviceFetcher.fetchById(analysis.deviceId)
+      .then((device) => {
+        dispatch({device, analysis, experiment})
+      })
+  }
+
+  showDeviceControl() {
+    return DeviceControl.buildEmpty()
+  }
+
+  // -- Search --
+
+  fetchBasedOnSearchSelectionAndCollection(params) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+    return (dispatch) => {
+      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
+        .then((result) => {
+          dispatch(result);
+          NotificationActions.removeByUid(uid);
+        }).catch((errorMessage) => { console.log(errorMessage); });
+    };
+
+
+  }
+
+  // -- Generic --
+  fetchGenericElsByCollectionId(id, queryParams = {}, collectionIsSync = false, elementType) {
+    return (dispatch) => {
+      GenericElsFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
+        .then((result) => { dispatch({ result, type: elementType }); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  generateEmptyGenericEl(collectionId, type) {
+    return (dispatch) => {
+      GenericElsFetcher.fetchElementKlass(type)
+        .then((result) => { dispatch(GenericEl.buildEmpty(collectionId, result.klass)); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  fetchGenericElById(id, type) {
+    return (dispatch) => {
+      GenericElsFetcher.fetchById(id)
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  createGenericEl(params) {
+    return (dispatch) => {
+      GenericElsFetcher.create(params)
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  updateGenericEl(params) {
+    return (dispatch) => {
+      GenericElsFetcher.update(params)
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  fetchSamplesByCollectionId(id, queryParams = {}, collectionIsSync = false,
+      moleculeSort = false) {
+    return (dispatch) => {
+      SamplesFetcher.fetchByCollectionId(id, queryParams, collectionIsSync, moleculeSort)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchReactionsByCollectionId(id, queryParams={}, collectionIsSync = false) {
+    return (dispatch) => { ReactionsFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchWellplatesByCollectionId(id, queryParams={}, collectionIsSync = false) {
+    return (dispatch) => { WellplatesFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchScreensByCollectionId(id, queryParams={}, collectionIsSync = false) {
+    return (dispatch) => { ScreensFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+
+  fetchResearchPlansByCollectionId(id, queryParams={}, collectionIsSync = false) {
+    return (dispatch) => { ResearchPlansFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // -- Samples --
+
+  fetchSampleById(id) {
+    return (dispatch) => { SamplesFetcher.fetchById(id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  createSample(params, closeView = false) {
+    return (dispatch) => { SamplesFetcher.create(params)
+      .then((result) => {
+        dispatch({ element: result, closeView })
+      });};
+  }
+
+  createSampleForReaction(sample, reaction, materialGroup) {
+    return (dispatch) => { SamplesFetcher.create(sample)
+      .then((newSample) => {
+        dispatch({newSample, reaction, materialGroup})
+      });};
+  }
+
+  handleSvgReactionChange(reaction) {
+    const materialsSvgPaths = {
+      starting_materials: reaction.starting_materials.map(material => material.svgPath),
+      reactants: reaction.reactants.map(material => material.svgPath),
+      products: reaction.products.map(material => [material.svgPath, material.equivalent])
+    };
+
+    const solvents = reaction.solvents.map((s) => {
+      const name = s.preferred_label;
+      return name;
+    }).filter(s => s);
+
+    let temperature = reaction.temperature_display;
+    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature)) {
+      temperature = `${temperature} ${reaction.temperature.valueUnit}`;
+    }
+
+    return () => { ReactionSvgFetcher.fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, reaction.duration, reaction.conditions)
+      .then((result) => {
+        reaction.reaction_svg_file = result.reaction_svg;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  editReactionSample(reactionID, sampleID) {
+    return (dispatch) => { SamplesFetcher.fetchById(sampleID)
+      .then((result) => {
+        dispatch({sample: result, reaction: reactionID });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateSampleForReaction(sample, reaction, closeView = true) {
+    return (dispatch) => { SamplesFetcher.update(sample)
+      .then((newSample) => {
+        reaction.updateMaterial(newSample);
+        reaction.changed = true;
+        dispatch({ reaction, sample: newSample, closeView })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateSample(params, closeView = false) {
+    return (dispatch) => { SamplesFetcher.update(params)
+      .then((result) => {
+        dispatch({ element: result, closeView })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  generateEmptySample(collection_id) {
+    return  Sample.buildEmpty(collection_id)
+  }
+
+  splitAsSubsamples(ui_state) {
+    return (dispatch) => { SamplesFetcher.splitAsSubsamples(ui_state)
+      .then((result) => {
+        dispatch(ui_state);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  copySampleFromClipboard(collection_id) {
+    return  collection_id;
+  }
+
+  addSampleToMaterialGroup(params) {
+    return  params;
+  }
+
+  showReactionMaterial(params) {
+    return (dispatch) => { SamplesFetcher.fetchById(params.sample.id)
+      .then((result) => {
+        params.sample = result
+        dispatch(params);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+    }
+  }
+
+  importSamplesFromFile(params) {
+    return (dispatch) => { SamplesFetcher.importSamplesFromFile(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  importReactionsFromChemScanner(params) {
+    return (dispatch) => {
+      ReactionsFetcher.importFromChemScanner(params).then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  importSamplesFromFileConfirm(params) {
+    return (dispatch) => { SamplesFetcher.importSamplesFromFileConfirm(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // -- Molecules --
+
+  fetchMoleculeByMolfile(molfile, svg_file = null) {
+    return (dispatch) => { MoleculesFetcher.fetchByMolfile(molfile, svg_file)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // -- Reactions --
+
+  fetchReactionById(id) {
+    return (dispatch) => { ReactionsFetcher.fetchById(id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  tryFetchReactionById(id) {
+    return (dispatch) => {
+      ReactionsFetcher.fetchById(id)
+                      .then((result) => {
+                        dispatch(result)
+                      }).catch((errorMessage) => {
+                        console.log(errorMessage)
+                      })
+    }
+  }
+
+  tryFetchWellplateById(id) {
+    return (dispatch) => {
+      WellplatesFetcher.fetchById(id)
+                      .then((result) => {
+                        dispatch(result)
+                      }).catch((errorMessage) => {
+                        console.log(errorMessage)
+                      })
+    }
+  }
+
+  tryFetchGenericElById(id) {
+    return (dispatch) => {
+      GenericElsFetcher.fetchById(id)
+                      .then((result) => {
+                        dispatch(result)
+                      }).catch((errorMessage) => {
+                        console.log(errorMessage)
+                      })
+    }
+  }
+  closeWarning() {
+    return null
+  }
+
+  createReaction(params) {
+    return (dispatch) => { ReactionsFetcher.create(params)
+      .then((result) => {
+        dispatch(result)
+      });};
+  }
+
+  updateReaction(params, closeView = false) {
+    return (dispatch) => { ReactionsFetcher.update(params)
+      .then((result) => {
+        dispatch({ element: result, closeView })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  generateEmptyReaction(collection_id) {
+    return  Reaction.buildEmpty(collection_id)
+  }
+
+  copyReactionFromId(id) {
+    return (dispatch) => { ReactionsFetcher.fetchById(id)
+    .then((result) => {
+      dispatch(result);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });};
+  }
+
+  copyReaction(reaction, colId) {
+    return (dispatch) => { ReactionsFetcher.fetchById(reaction.id)
+      .then((result) => {
+        dispatch({ reaction: result, colId: colId });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  copyElement(element, colId) {
+    return (
+      { element: element, colId: colId }
+    )
+  }
+
+  openReactionDetails(reaction) {
+    return  reaction;
+  }
+
+  // -- Wellplates --
+  splitAsSubwellplates(ui_state) {
+    return (dispatch) => {
+      WellplatesFetcher.splitAsSubwellplates(ui_state)
+      .then((result) => {
+        dispatch(ui_state);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  bulkCreateWellplatesFromSamples(params) {
+    let { collection_id, samples, wellplateCount } = params;
+
+    // wellplateCount correction
+    if(wellplateCount > Math.ceil(samples.length / 96)) {
+      wellplateCount = Math.ceil(samples.length / 96)
+    }
+
+    // build wellplate objects from samples
+    let wellplates = [];
+    _.range(wellplateCount ).forEach((i) => {
+      wellplates[i] = Wellplate.buildFromSamplesAndCollectionId(_.compact(samples.slice(96*i, 96*(i+1))), collection_id).serialize();
+    });
+
+    return (dispatch) => { WellplatesFetcher.bulkCreateWellplates({wellplates: wellplates})
+      .then(() => {
+        dispatch();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  generateWellplateFromClipboard(collection_id) {
+    return  collection_id;
+  }
+
+  generateEmptyWellplate(collection_id) {
+    return  Wellplate.buildEmpty(collection_id);
+  }
+
+  createWellplate(wellplate) {
+    return (dispatch) => { WellplatesFetcher.create(wellplate)
+      .then(result => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  editWellplateSample(wellplateID, sampleID) {
+    return (dispatch) => { SamplesFetcher.fetchById(sampleID)
+      .then((result) => {
+        dispatch({sample: result, wellplate: wellplateID });
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateWellplate(wellplate) {
+    return (dispatch) => { WellplatesFetcher.update(wellplate)
+      .then(result => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateSampleForWellplate(sample, wellplate) {
+    return (dispatch) => { SamplesFetcher.update(sample)
+      .then((newSample) => {
+        dispatch(wellplate)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchWellplateById(id) {
+    return (dispatch) => { WellplatesFetcher.fetchById(id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+
+  // -- Screens --
+
+  generateScreenFromClipboard(collection_id) {
+    return  collection_id;
+  }
+
+
+  fetchScreenById(id) {
+    return (dispatch) => { ScreensFetcher.fetchById(id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  generateEmptyScreen(collection_id) {
+    return  Screen.buildEmpty(collection_id);
+  }
+
+  createScreen(params) {
+    return (dispatch) => { ScreensFetcher.create(params)
+      .then(result => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateScreen(params) {
+    return (dispatch) => { ScreensFetcher.update(params)
+      .then(result => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // -- ResearchPlans --
+
+  fetchResearchPlanById(id) {
+    return (dispatch) => { ResearchPlansFetcher.fetchById(id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  updateResearchPlan(params) {
+    return (dispatch) => { ResearchPlansFetcher.update(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  generateEmptyResearchPlan(collection_id) {
+    return ResearchPlan.buildEmpty(collection_id);
+  }
+
+  createResearchPlan(params) {
+    return (dispatch) => { ResearchPlansFetcher.create(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  // -- Report --
+  showReportContainer() {
+    return  Report.buildEmpty()
+  }
+
+  showFormatContainer() {
+    return Format.buildEmpty();
+  }
+
+  showComputedPropsGraph() {
+    return Graph.buildEmptyScatter();
+  }
+
+  showComputedPropsTasks() {
+    return ComputeTask.buildEmpty();
+  }
+
+  showLiteratureDetail() {
+    return LiteratureMap.buildEmpty();
+  }
+
+  // -- Prediction --
+  showPredictionContainer() {
+    return Prediction.buildEmpty();
+  }
+
+  // -- General --
+
+  refreshElements(type) {
+    return  type
+  }
+
+  deleteElements(options) {
+    return  (dispatch)=> {
+    dispatch(options);
+    UIActions.uncheckWholeSelection();
+    UserActions.fetchCurrentUser();}
+  }
+
+  removeElements() {
+    return  ;
+  }
+
+  // Current Element
+  setCurrentElement(newCurrentElement) {
+    return newCurrentElement;
+  }
+
+  deselectCurrentElement() {
+    return null;
+  }
+
+  // - ...
+  deleteElementsByUIState(params) {
+    return (dispatch) => {
+      UIFetcher.fetchByUIState(params, 'DELETE')
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  updateElementsCollection(params) {
+    return (dispatch) => {
+      CollectionsFetcher.updateElementsCollection(params)
+        .then(() => { dispatch(); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  assignElementsCollection(params) {
+    return (dispatch) => {
+      CollectionsFetcher.assignElementsCollection(params)
+        .then(() => { dispatch(); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  removeElementsCollection(params) {
+    return (dispatch) => {
+      CollectionsFetcher.removeElementsCollection(params)
+        .then(() => { dispatch(); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  changeSorting(sort) {
+    return sort;
+  }
+
+  updateContainerContent(params) {
+    return (dispatch) => {
+      ContainerFetcher.updateContainerContent(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  computePropsFromSmiles(sampleId) {
+    return (dispatch) => {
+      MoleculesFetcher.computePropsFromSmiles(sampleId)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  refreshComputedProp(cprop) {
+    return cprop;
+  }
+
+  // -- Private Note --
+  createPrivateNote(params) {
+    return (dispatch) => {
+      PrivateNoteFetcher.create(params).then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+    };
+  }
+
+  updatePrivateNote(note) {
+    return (dispatch) => {
+      PrivateNoteFetcher.update(note).then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+    };
+  }
+}
+
+export default alt.createActions(ElementActions);
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/components/actions/EmbargoActions.js
new file mode 100644
index 000000000..1d8cfe0c9
--- /dev/null
+++ b/app/packs/src/components/actions/EmbargoActions.js
@@ -0,0 +1,129 @@
+import alt from '../alt';
+import EmbargoFetcher from '../fetchers/EmbargoFetcher';
+
+class EmbargoActions {
+
+  displayEmbargo(id) {
+    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+
+  getEmbargoElements(id) {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoElements(id)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getEmbargoElement(cid, el) {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoElement(cid, el)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  moveEmbargo(id, newEmbargo, element) {
+    return (dispatch) => {
+      EmbargoFetcher.moveEmbargo(id, newEmbargo, element)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  assignEmbargo(newEmbargo, element) {
+    return (dispatch) => {
+      EmbargoFetcher.assignEmbargo(newEmbargo, element)
+        .then((result) => {
+          dispatch(result)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  fetchEmbargoBundle() {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+
+  displayReviewEmbargo(type, id) {
+    return (dispatch) => {
+      EmbargoFetcher.repoFetchEmbargoElement(type, id)
+      .then((result) => {
+        dispatch({ id, element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  releaseEmbargo(id) {
+    return (dispatch) => {
+      EmbargoFetcher.releaseEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  deleteEmbargo(id) {
+    return (dispatch) => {
+      EmbargoFetcher.deleteEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+
+  generateEmbargoAccount(id) {
+    return (dispatch) => {
+      EmbargoFetcher.generateEmbargoAccount(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  getEmbargoBundle() {
+    return (dispatch) => {
+      EmbargoFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+}
+
+export default alt.createActions(EmbargoActions);
\ No newline at end of file
diff --git a/app/packs/src/components/actions/InboxActions.js b/app/packs/src/components/actions/InboxActions.js
new file mode 100644
index 000000000..dadd1b121
--- /dev/null
+++ b/app/packs/src/components/actions/InboxActions.js
@@ -0,0 +1,86 @@
+import alt from '../alt';
+import InboxFetcher from '../fetchers/InboxFetcher';
+import AttachmentFetcher from '../fetchers/AttachmentFetcher';
+import ContainerFetcher from '../fetchers/ContainerFetcher';
+
+class InboxActions {
+  deleteContainerLinkUnselected(params) {
+    return (dispatch) => { ContainerFetcher.deleteContainerLinkUnselected(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      }); };
+  }
+
+  toggleInboxModal() {
+    return null
+  }
+
+  fetchInbox() {
+    return (dispatch) => {
+      InboxFetcher.fetchInbox(false)
+      .then((result) => {
+        dispatch(result.inbox);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchInboxCount() {
+    return (dispatch) => {
+      InboxFetcher.fetchInbox(true)
+      .then((result) => {
+        dispatch(result.inbox);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  removeAttachmentFromList(attachment){
+    return attachment;
+  }
+
+  removeUnlinkedAttachmentFromList(attachment){
+    return attachment;
+  }
+
+  removeDatasetFromList(dataset){
+    return dataset;
+  }
+
+  deleteAttachment(params) {
+    return (dispatch) => { AttachmentFetcher.deleteAttachment(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  deleteContainerLink(params) {
+    return (dispatch) => { AttachmentFetcher.deleteContainerLink(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  deleteContainer(params) {
+    return (dispatch) => { ContainerFetcher.deleteContainer(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  backToInbox(attachment){
+    return attachment
+  }
+
+}
+
+export default alt.createActions(InboxActions);
diff --git a/app/packs/src/components/actions/KeyboardActions.js b/app/packs/src/components/actions/KeyboardActions.js
new file mode 100644
index 000000000..856d6e27d
--- /dev/null
+++ b/app/packs/src/components/actions/KeyboardActions.js
@@ -0,0 +1,13 @@
+import alt from 'src/stores/alt/alt'
+
+class KeyboardActions {
+  documentKeyDown(keyCode) {
+    return keyCode
+  }
+
+  contextChange(context) {
+    return context
+  }
+}
+
+export default alt.createActions(KeyboardActions)
diff --git a/app/packs/src/components/actions/LoadingActions.js b/app/packs/src/components/actions/LoadingActions.js
new file mode 100644
index 000000000..cf7d6e3bf
--- /dev/null
+++ b/app/packs/src/components/actions/LoadingActions.js
@@ -0,0 +1,25 @@
+import alt from '../alt';
+
+class LoadingActions {
+  start() {
+    return null;
+  }
+
+  stop() {
+    return null;
+  }
+
+  startLoadingWithProgress(filename) {
+    return filename;
+  }
+
+  stopLoadingWithProgress(filename) {
+    return filename;
+  }
+
+  updateLoadingProgress(filename, progress) {
+    return { filename: filename, progress: progress };
+  }
+}
+
+export default alt.createActions(LoadingActions);
diff --git a/app/packs/src/components/actions/NmrSimActions.js b/app/packs/src/components/actions/NmrSimActions.js
new file mode 100644
index 000000000..2858eb58d
--- /dev/null
+++ b/app/packs/src/components/actions/NmrSimActions.js
@@ -0,0 +1,25 @@
+import alt from '../alt';
+import NmrSimFetcher from '../fetchers/NmrSimFetcher';
+
+class NmrSimActions {
+  updateNmrdb(type, needToFetch, id) {
+    if (needToFetch) {
+      return (dispatch) => {
+        NmrSimFetcher.fetchNmrdbById(id)
+        .then((result) => {
+          dispatch({ type, spectrum: result });
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+      };
+    }
+    const spectrum = false;
+    return { type, spectrum };
+  }
+
+  resetNMR() {
+    return null;
+  }
+}
+
+export default alt.createActions(NmrSimActions);
diff --git a/app/packs/src/components/actions/NotificationActions.js b/app/packs/src/components/actions/NotificationActions.js
new file mode 100644
index 000000000..392bf12fc
--- /dev/null
+++ b/app/packs/src/components/actions/NotificationActions.js
@@ -0,0 +1,50 @@
+import alt from 'src/stores/alt/alt';
+
+class NotificationActions {
+  add(notification) {
+    return notification;
+  }
+
+  remove(notification) {
+    return notification;
+  }
+
+  removeByUid(uid) {
+    return uid;
+  }
+
+  setComponentReference(input) {
+    return input;
+  }
+
+  uploadErrorNotify(message) {
+    return message;
+  }
+
+  notifyExImportStatus(title, status) {
+    const params = {
+      title: title,
+      message: "The task has been submitted: this might take a while but you will be notified as soon as it is completed.",
+      level: "info",
+      dismissible: true,
+      uid: "export_collection",
+      position: "tr",
+      autoDismiss: 5
+    };
+
+    switch(status) {
+      case 204:
+        break;
+      case 401:
+        params.message = `Unauthorized: you do not have the permission to ${type} this collection`;
+        params.level = 'error';
+        break;
+      default:
+        params.message = `An issue occured with your ${type} (status ${status}); please contact the administrators of the site if the problem persists.`;
+        params.level = 'error';
+    }
+    return this.add(params);
+  }
+}
+
+export default alt.createActions(NotificationActions);
diff --git a/app/packs/src/components/actions/PermissionActions.js b/app/packs/src/components/actions/PermissionActions.js
new file mode 100644
index 000000000..54b6a4636
--- /dev/null
+++ b/app/packs/src/components/actions/PermissionActions.js
@@ -0,0 +1,16 @@
+import alt from '../alt';
+import PermissionsFetcher from '../fetchers/PermissionsFetcher';
+
+class PermissionActions {
+  fetchPermissionStatus(params) {
+    return (dispatch) => { PermissionsFetcher.fetchPermissionStatus(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+}
+
+export default alt.createActions(PermissionActions);
diff --git a/app/packs/src/components/actions/PredictionActions.js b/app/packs/src/components/actions/PredictionActions.js
new file mode 100644
index 000000000..f0ad3ac97
--- /dev/null
+++ b/app/packs/src/components/actions/PredictionActions.js
@@ -0,0 +1,83 @@
+import _ from 'lodash';
+
+import alt from '../alt';
+import UIFetcher from '../fetchers/UIFetcher';
+import PredictionsFetcher from '../fetchers/PredictionsFetcher';
+
+class PredictionActions {
+  infer(targets, template) { // eslint-disable-line class-methods-use-this
+    const smis = targets.map(t => t.molecule_cano_smiles);
+    const target = { smis };
+
+    return (dispatch) => {
+      PredictionsFetcher
+        .fetchInfer(target, template)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  updateActiveKey(key) { // eslint-disable-line class-methods-use-this
+    return key;
+  }
+
+  updateTemplate(template) { // eslint-disable-line class-methods-use-this
+    return template;
+  }
+
+  updateUI(combState) { // eslint-disable-line class-methods-use-this
+    const { uiState, predictionState } = combState;
+    const { sample, currentCollection } = uiState;
+    const { inputEls, defaultEls } = predictionState;
+    const sampleMemoryIds = inputEls ? inputEls.map(e => e.id) : [];
+    const sampleDefaultIds = defaultEls ? defaultEls.map(e => e.id) : [];
+    const sampleCheckedIds = sample.checkedIds.toArray();
+    const dfSIds = _.difference(sampleCheckedIds, sampleMemoryIds)
+      .filter(id => !sampleDefaultIds.includes(id));
+
+    const elementAdded = dfSIds.length > 0 || sample.checkedAll;
+    const elementSubs = _.difference(sampleMemoryIds, sampleCheckedIds).length > 0;
+    const selectedTags = { sampleIds: [...sampleMemoryIds], reactionIds: [] };
+
+    if (elementAdded) {
+      return (dispatch) => {
+        UIFetcher.loadReport(
+          {
+            sample, reaction: {}, currentCollection, selectedTags,
+          },
+          'lists',
+        ).then((rsp) => {
+          const newSpls = rsp.samples.filter(x => !x.in_browser_memory);
+          const allSpls = [...newSpls, ...inputEls, ...defaultEls];
+          const result = { samples: allSpls };
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+      };
+    } else if (elementSubs) {
+      return (dispatch) => {
+        const inpSpls = inputEls.filter(e => sampleCheckedIds.indexOf(e.id) >= 0);
+        const allSpls = [...defaultEls, ...inpSpls];
+        const result = { samples: allSpls };
+        dispatch(result);
+      };
+    }
+    return (dispatch) => {
+      dispatch(false);
+    };
+  }
+
+  remove(el) { // eslint-disable-line class-methods-use-this
+    return el;
+  }
+
+  reset() { // eslint-disable-line class-methods-use-this
+    return null;
+  }
+}
+
+export default alt.createActions(PredictionActions);
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
new file mode 100644
index 000000000..3e4f4c9ff
--- /dev/null
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -0,0 +1,326 @@
+import alt from '../alt';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import NotificationActions from './NotificationActions';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import EmbargoFetcher from '../fetchers/EmbargoFetcher';
+import SearchFetcher from '../fetchers/SearchFetcher';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+
+class PublicActions {
+  refreshPubElements(type) {
+    return type;
+  }
+
+  close(deleteEl) {
+    return { deleteEl }
+  }
+
+  displayCollection(id) {
+    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
+      .then((result) => {
+        dispatch({colData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getMolecules(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getReactions(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchMolecules(pageParams={}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchReactions(pageParams = {}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function (notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => {
+      PublicFetcher.searchPublicReactions(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        NotificationActions.removeByUid(uid);
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublished() {
+    return (dispatch) => {
+      PublicFetcher.fetchLastPublished()
+      .then((result) => {
+        dispatch(result.last_published)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublishedSample(){
+    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
+      .then((result) => {
+        dispatch(result.sample)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  openRepositoryPage(page) {
+    if (page) {
+      return page
+    } else {
+      return ""
+    }
+  }
+
+  displayDataset(id) {
+    return (dispatch) => { PublicFetcher.fetchDataset(id)
+      .then((result) => {
+        dispatch({dataset: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayMolecule(id, anchor = '', advFlag = false, advType = '', advVal = '', listType = RepoNavListTypes.SAMPLE) {
+    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
+      .then((result) => {
+        dispatch({moleculeData: result, id: id, anchor: anchor, listType})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReaction(id) {
+    return (dispatch) => { PublicFetcher.fetchReaction(id)
+      .then((result) => {
+        dispatch({reactionData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  articles() {
+    return (dispatch) => {
+      fetch('/newsroom/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({data: json});
+      }).catch((errorMessage) => {
+        dispatch({ data: [] });
+      });
+    };
+  }
+
+  editArticle(key) {
+    if (key === 'new') {
+      return (dispatch) => {
+          dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  displayArticle(key) {
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  howtos() {
+    return (dispatch) => {
+      fetch('/howto/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ data: json });
+        }).catch((errorMessage) => {
+          // console.log(errorMessage);
+          dispatch({ data: [] });
+        });
+    };
+  }
+
+  editHowTo(key) {
+    if (key === 'ein') {
+      return (dispatch) => {
+        dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  displayHowTo(key) {
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+        }}
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  selectPublicCollection() {
+    return (dispatch) => {
+      PublicFetcher.selectPublicCollection()
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); })
+    }
+  }
+
+  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
+    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  publishedStatics() {
+    return (dispatch) => {
+      PublicFetcher.publishedStatics()
+        .then((result) => {
+          dispatch(result.published_statics)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  handleReviewModal(show) {
+    return show;
+  }
+
+
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+  fetchBasedOnSearchSelectionAndCollection(params) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+    return (dispatch) => {
+      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
+        .then((result) => {
+          dispatch(result);
+          NotificationActions.removeByUid(uid);
+        }).catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+}
+
+export default alt.createActions(PublicActions)
diff --git a/app/packs/src/components/actions/QcActions.js b/app/packs/src/components/actions/QcActions.js
new file mode 100644
index 000000000..3177fe591
--- /dev/null
+++ b/app/packs/src/components/actions/QcActions.js
@@ -0,0 +1,25 @@
+import alt from 'src/stores/alt/alt';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+
+class QcActions {
+  setLoading() {
+    return null;
+  }
+
+  loadInfers({ sample }) {
+    const sId = sample.id;
+    const atts = sample.attachments();
+    const ids = atts.map(att => (
+      att.aasm_state === 'json' && att.filename.includes('.infer.json')
+        ? att.id : null
+    )).filter(r => r != null);
+
+    return (dispatch) => {
+      AttachmentFetcher.fetchFiles(ids)
+        .then(result => dispatch({ result, sId }))
+        .catch(err => console.log(err)); // eslint-disable-line
+    };
+  }
+}
+
+export default alt.createActions(QcActions);
diff --git a/app/packs/src/components/actions/ReportActions.js b/app/packs/src/components/actions/ReportActions.js
new file mode 100644
index 000000000..91f4b22db
--- /dev/null
+++ b/app/packs/src/components/actions/ReportActions.js
@@ -0,0 +1,171 @@
+import _ from 'lodash';
+import alt from '../alt';
+import AttachmentFetcher from '../fetchers/AttachmentFetcher';
+import ReportsFetcher from '../fetchers/ReportsFetcher';
+import ReportTemplateFetcher from '../fetchers/ReportTemplateFetcher';
+import UIFetcher from '../fetchers/UIFetcher';
+import { GetTypeIds, LoadPreviewIds } from '../utils/ReportHelper';
+
+class ReportActions {
+  updateImgFormat = value => value
+  updateTemplate = value => value
+
+  updateSplSettings = target => target
+  toggleSplSettingsCheckAll = () => null
+
+  updateRxnSettings = target => target
+  toggleRxnSettingsCheckAll = () => null
+
+  updateSiRxnSettings = target => target
+  toggleSiRxnSettingsCheckAll = () => null
+
+  updateConfigs = target => target
+  toggleConfigsCheckAll = () => null
+
+  generateReport = report => (dispatch) => {
+    ReportsFetcher.create(report)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  updateDefaultTags = dTags => dTags
+  move = ({ sourceTag, targetTag }) => ({ sourceTag, targetTag })
+
+  getArchives = () => (dispatch) => {
+    ReportsFetcher.fetchArchives()
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  updateProcessQueue = oriQueue => (dispatch) => {
+    ReportsFetcher.fetchDownloadable(oriQueue)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  updateFileName = e => e.target.value
+  updateFileDescription = e => e.target.value
+  updateActiveKey = key => key
+  downloadReport = (id, template) => ({ id, template })
+
+  clone = (archive) => {
+    const sampleIds = GetTypeIds(archive.objects, 'sample');
+    const reactionIds = GetTypeIds(archive.objects, 'reaction');
+    const uiState = {
+      sample: { checkedIds: sampleIds },
+      reaction: { checkedIds: reactionIds },
+    };
+    return (dispatch) => {
+      UIFetcher.loadReport(uiState, 'lists')
+        .then((result) => {
+          dispatch({ objs: result, archive, defaultObjTags: { sampleIds, reactionIds } });
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  delete = archive => (dispatch) => {
+    ReportsFetcher.deleteArchive(archive.id)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  remove = target => target
+  reset = () => null
+  updMSVal = (moleculeId, value) => ({ moleculeId, value })
+
+  updateThumbNails = attIds => (dispatch) => {
+    AttachmentFetcher.fetchThumbnails(attIds)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  fetchTemplates = () => (dispatch) => {
+    ReportTemplateFetcher.fetchTemplates()
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  updateCheckedTags = ({ uiState, reportState }) => {
+    const { sample, reaction, currentCollection } = uiState;
+    const { selectedObjTags, defaultObjTags } = reportState;
+    const sampleCheckedIds = sample.checkedIds.toArray();
+    const reactionCheckedIds = reaction.checkedIds.toArray();
+    const { sampleIds, reactionIds } = selectedObjTags;
+    const dfSIds = _.difference(sampleCheckedIds, sampleIds)
+      .filter(id => !defaultObjTags.sampleIds.includes(id));
+    const dfRIds = _.difference(reactionCheckedIds, reactionIds)
+      .filter(id => !defaultObjTags.reactionIds.includes(id));
+
+    const elementAdded = dfSIds.length > 0 || dfRIds.length > 0
+      || sample.checkedAll || reaction.checkedAll;
+
+    const elementSubs = _.difference(sampleIds, sampleCheckedIds).length > 0
+      || _.difference(reactionIds, reactionCheckedIds).length > 0;
+
+    if (elementAdded) {
+      return (dispatch) => {
+        UIFetcher.loadReport(
+          {
+            sample, reaction, currentCollection, selectedTags: selectedObjTags,
+          },
+          'lists',
+        ).then((result) => {
+          const newTags = {
+            sampleIds: result.samples.map(e => e.id),
+            reactionIds: result.reactions.map(e => e.id)
+          };
+          dispatch({ newTags, newObjs: result });
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+      };
+    } else if (elementSubs) {
+      return (dispatch) => {
+        const newTags = {
+          sampleIds: sampleCheckedIds,
+          reactionIds: reactionCheckedIds
+        };
+        const result = { samples: [], reactions: [] };
+        dispatch({ newTags, newObjs: result });
+      };
+    }
+    return (dispatch) => {
+      dispatch({ newTags: false, newObjs: false });
+    };
+  }
+
+  loadRreview = ({ reportState }) => {
+    const state = LoadPreviewIds(reportState);
+    return (dispatch) => {
+      UIFetcher.loadReport(state, 'elements')
+        .then((result) => {
+          dispatch({ objs: result });
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+}
+
+
+export default alt.createActions(ReportActions);
diff --git a/app/packs/src/components/actions/RepositoryActions.js b/app/packs/src/components/actions/RepositoryActions.js
new file mode 100644
index 000000000..80dd4d530
--- /dev/null
+++ b/app/packs/src/components/actions/RepositoryActions.js
@@ -0,0 +1,65 @@
+import alt from '../alt';
+
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+
+class RepositoryActions {
+  publishSample(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  reviewPublish(element) {
+    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
+      .then((result) => {
+        dispatch({ element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishSampleReserveDois(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishReaction(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  publishReactionReserveDois(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+}
+
+export default alt.createActions(RepositoryActions);
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
new file mode 100644
index 000000000..27fa68c62
--- /dev/null
+++ b/app/packs/src/components/actions/ReviewActions.js
@@ -0,0 +1,89 @@
+import alt from '../alt';
+import ReviewFetcher from '../fetchers/ReviewFetcher';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+class ReviewActions {
+  handleReviewModal(show, action) {
+    return { show, action };
+  }
+
+  updateReview(review) {
+    return review;
+  }
+
+  fetchSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(`SampleDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+    }
+  }
+
+  displayReviewReaction(id) {
+    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  reviewPublish(id, type, comment, action, checklist, reviewComments) {
+    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
+      .then((result) => {
+        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action, review_info: result.review_info })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+
+  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
+    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+
+  updateComment(id, type, comments) {
+    return (dispatch) => {
+      RepositoryFetcher.updateComment(id, type, comments)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+}
+export default alt.createActions(ReviewActions);
diff --git a/app/packs/src/components/actions/SpectraActions.js b/app/packs/src/components/actions/SpectraActions.js
new file mode 100644
index 000000000..27fc00abc
--- /dev/null
+++ b/app/packs/src/components/actions/SpectraActions.js
@@ -0,0 +1,132 @@
+import base64 from 'base-64';
+
+import alt from '../alt';
+import AttachmentFetcher from '../fetchers/AttachmentFetcher';
+import ElementActions from '../actions/ElementActions';
+
+class SpectraActions {
+  ToggleModal() {
+    return null;
+  }
+
+  LoadSpectra(spcInfos) {
+    const idxs = spcInfos && spcInfos.map(si => si.idx);
+    if (idxs.length === 0) {
+      return null;
+    }
+
+    return (dispatch) => {
+      AttachmentFetcher.fetchFiles(idxs)
+        .then((fetchedFiles) => {
+          dispatch({ fetchedFiles, spcInfos });
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+
+  Regenerate(jcampIds, cb) {
+    return (dispatch) => {
+      AttachmentFetcher.regenerateSpectrum(jcampIds)
+        .then(() => {
+          dispatch();
+          cb();
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+
+  SaveToFile(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict, cb, keepPred = false, waveLengthStr, cyclicvolta, curveIdx = 0, simulatenmr = false) {
+    return (dispatch) => {
+      AttachmentFetcher.saveSpectrum(spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr)
+        .then((fetchedFiles) => {
+          dispatch({ fetchedFiles, spcInfo });
+          cb();
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+
+  WriteStart(payload) {
+    return payload;
+  }
+
+  WriteStop() {
+    return null;
+  }
+
+  InferRunning() {
+    return null;
+  }
+
+  InferSpectrum(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict,
+    targetPeaks, layout,
+    cb, keepPred = false,
+  ) {
+    return (dispatch) => {
+      AttachmentFetcher.inferSpectrum(
+        spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity,
+        predict, targetPeaks, layout, keepPred
+      ).then((fetchedFiles) => {
+        dispatch({ fetchedFiles, spcInfo });
+        cb();
+      }).catch((errorMessage) => {
+        console.log(errorMessage); // eslint-disable-line
+      });
+    };
+  }
+
+  SelectIdx(spcIdx, arrSpcIdx = []) {
+    return { spcIdx, arrSpcIdx };
+  }
+
+  AddOthers(payload) {
+    const jcamps = payload.jcamps || [];
+    const jcamp = jcamps[0];
+
+    return (dispatch) => {
+      AttachmentFetcher.fetchJcamp({ file: jcamp })
+        .then((rsp) => {
+          dispatch(rsp);
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+
+  RegenerateEdited(jcampIds, molfile, cb) {
+    return (dispatch) => {
+      AttachmentFetcher.regenerateEditedSpectrum(jcampIds, molfile)
+        .then(() => {
+          dispatch();
+          cb();
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+
+  ToggleModalNMRDisplayer() {
+    return null;
+  }
+
+  LoadSpectraForNMRDisplayer(spcInfos) {
+    const idxs = spcInfos && spcInfos.map(si => si.idx);
+    if (idxs.length === 0) {
+      return null;
+    }
+
+    return (dispatch) => {
+      AttachmentFetcher.fetchFiles(idxs)
+        .then((fetchedFiles) => {
+          dispatch({ fetchedFiles, spcInfos });
+        }).catch((errorMessage) => {
+          console.log(errorMessage); // eslint-disable-line
+        });
+    };
+  }
+}
+
+export default alt.createActions(SpectraActions);
diff --git a/app/packs/src/components/actions/SuggestionActions.js b/app/packs/src/components/actions/SuggestionActions.js
new file mode 100644
index 000000000..58de3b85e
--- /dev/null
+++ b/app/packs/src/components/actions/SuggestionActions.js
@@ -0,0 +1,15 @@
+import alt from '../alt';
+import SuggestionsFetcher from '../fetchers/SuggestionsFetcher';
+
+class SuggestionActions {
+  fetchSuggestions(endpoint, query) {
+    return (dispatch) => {  SuggestionsFetcher.fetchSuggestions(endpoint, query)
+      .then((suggestions) => {
+        dispatch(suggestions);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+}
+
+export default alt.createActions(SuggestionActions);
diff --git a/app/packs/src/components/actions/TextTemplateActions.js b/app/packs/src/components/actions/TextTemplateActions.js
new file mode 100644
index 000000000..a5ca5fd65
--- /dev/null
+++ b/app/packs/src/components/actions/TextTemplateActions.js
@@ -0,0 +1,44 @@
+/* eslint-disable class-methods-use-this */
+import alt from '../alt';
+import TextTemplatesFetcher from '../fetchers/TextTemplatesFetcher';
+
+class TextTemplateActions {
+  fetchTextTemplates(elementName) {
+    return (dispatch) => {
+      TextTemplatesFetcher.fetchTextTemplates(elementName)
+        .then(result => dispatch(result))
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  fetchPredefinedTemplateNames() {
+    return (dispatch) => {
+      TextTemplatesFetcher.fetchPredefinedTemplateNames()
+        .then(result => dispatch(result))
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  fetchPredefinedTemplateByNames(names) {
+    return (dispatch) => {
+      TextTemplatesFetcher.fetchPredefinedTemplateByNames(names)
+        .then(result => dispatch(result))
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  updateTextTemplates(elName, templates) {
+    return (dispatch) => {
+      TextTemplatesFetcher.updateTextTemplates(elName, templates)
+        .then((result) => {
+          if (result) {
+            dispatch({ [elName]: templates });
+          }
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+}
+
+export default alt.createActions(TextTemplateActions);
diff --git a/app/packs/src/components/actions/UIActions.js b/app/packs/src/components/actions/UIActions.js
new file mode 100644
index 000000000..26599cadd
--- /dev/null
+++ b/app/packs/src/components/actions/UIActions.js
@@ -0,0 +1,138 @@
+import alt from 'src/stores/alt/alt';
+import UIFetcher from 'src/fetchers/UIFetcher';
+
+// An element object has a type and an id, e.g., {type: 'sample', id: 1}
+class UIActions {
+  initialize() {
+    return (dispatch) => {
+      UIFetcher.initialize()
+        .then(json => dispatch(json))
+        .catch(err => console.log(err)); // eslint-disable-line
+    };
+  }
+
+  showCollectionManagement() {
+    return null;
+  }
+
+  toggleCollectionManagement() {
+    return null;
+  }
+
+  showElements() {
+    return null;
+  }
+
+  showDeviceManagement() {
+    return null
+  }
+
+  closeDeviceManagement() {
+    return null
+  }
+
+  selectTab(params) {
+    return params;
+  }
+
+  selectActiveAnalysis(index) {
+    return index;
+  }
+
+  toggleAdvancedSearch(show) {
+    return show
+  }
+
+  selectCollection(collection) {
+    return collection
+  }
+
+  selectSyncCollection(syncCollection) {
+    return syncCollection
+  }
+
+  checkAllElements(params) {
+    return params;
+  }
+
+  toggleShowPreviews(show) {
+    return show;
+  }
+
+  checkElement(params) {
+    return params;
+  }
+
+  uncheckAllElements(params) {
+    return params;
+  }
+
+  uncheckWholeSelection() {
+    return null;
+  }
+
+  uncheckElement(element) {
+    return element;
+  }
+
+  selectElement(element) {
+    return element;
+  }
+
+  deselectAllElementsOfType(type) {
+    return type;
+  }
+
+  deselectAllElements() {
+    return null;
+  }
+
+  setPagination(pagination) {
+    return pagination;
+  }
+
+  setSearchSelection(selection) {
+    return selection;
+  }
+
+  selectCollectionWithoutUpdating(collection) {
+    return collection;
+  }
+
+  clearSearchSelection() {
+    return null;
+  }
+
+  changeNumberOfResultsShown(value) {
+    return value;
+  }
+
+  updateModalProps(params) {
+    return params
+  }
+
+  hideModal() {
+    return null
+  }
+
+  setFilterCreatedAt(filterCreatedAt) {
+    return filterCreatedAt;
+  }
+
+  setFromDate(date) {
+    return date;
+  }
+
+  setToDate(date) {
+    return date;
+  }
+
+  setProductOnly(bool) {
+    return bool;
+  }
+
+  rerenderGenericWorkflow(params) { return params; }
+  showGenericWorkflowModal(show) { return show; }
+}
+
+export default alt.createActions(UIActions);
diff --git a/app/packs/src/components/actions/UserActions.js b/app/packs/src/components/actions/UserActions.js
new file mode 100644
index 000000000..81be1caf8
--- /dev/null
+++ b/app/packs/src/components/actions/UserActions.js
@@ -0,0 +1,159 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import SegmentsFetcher from '../fetchers/SegmentsFetcher';
+import GenericDSsFetcher from '../fetchers/GenericDSsFetcher';
+
+import cookie from 'react-cookie'
+import DocumentHelper from '../utils/DocumentHelper';
+
+class UserActions {
+  fetchOlsRxno() {
+    return (dispatch) => {
+      UsersFetcher.fetchOls('rxno')
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchOlsChmo() {
+    return (dispatch) => {
+      UsersFetcher.fetchOls('chmo')
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  fetchCurrentUser() {
+    return (dispatch) => { UsersFetcher.fetchCurrentUser()
+      .then((result) => {
+        dispatch(result.user);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchGenericEls() {
+    return (dispatch) => { UsersFetcher.fetchElementKlasses()
+      .then((roots) => {
+        dispatch(roots);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+
+  logout() {
+    fetch('/users/sign_out', {
+      method: 'delete',
+      credentials: 'same-origin',
+      data: {authenticity_token: DocumentHelper.getMetaContent("csrf-token")}
+    })
+    .then(response => {
+      Aviator.navigate('/', { silent: true });
+      location.href = '/';
+      location.reload();
+      // location = '/home';
+    });
+  }
+
+  fetchProfile() {
+    return (dispatch) => {
+      UsersFetcher.fetchProfile()
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  selectTab(tab) {
+    return  tab;
+  }
+
+  updateUserProfile(params) {
+    return (dispatch) => { UsersFetcher.updateUserProfile(params)
+      .then((result) => {
+        dispatch(result);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  fetchUserLabels() {
+    return (dispatch) => {
+      UsersFetcher.listUserLabels(true)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchEditors() {
+    return (dispatch) => {
+      UsersFetcher.listEditors()
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchNoVNCDevices() {
+    return (dispatch) => {
+      UsersFetcher.fetchNoVNCDevices()
+        .then(result => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+  fetchSegmentKlasses() {
+    return (dispatch) => {
+      SegmentsFetcher.fetchKlass()
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchDatasetKlasses() {
+    return (dispatch) => {
+      GenericDSsFetcher.fetchKlass()
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+  fetchOmniauthProviders() {
+    return (dispatch) => {
+      UsersFetcher.fetchOmniauthProviders()
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); });
+    }
+  }
+}
+
+export default alt.createActions(UserActions);
diff --git a/app/packs/src/components/alt.js b/app/packs/src/components/alt.js
new file mode 100644
index 000000000..841ebc346
--- /dev/null
+++ b/app/packs/src/components/alt.js
@@ -0,0 +1,5 @@
+// alt initialization
+const Alt = require('alt');
+const alt = new Alt();
+
+module.exports = alt;
diff --git a/app/packs/src/components/chemscanner/ChemScanner.js b/app/packs/src/components/chemscanner/ChemScanner.js
new file mode 100644
index 000000000..a492ab4be
--- /dev/null
+++ b/app/packs/src/components/chemscanner/ChemScanner.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import RootContainer from './containers/RootContainer';
+import configureStore from './store/configureStore';
+
+export const store = configureStore();
+
+export const ChemScanner = props => (
+  <Provider store={store}>
+    <RootContainer {...props} />
+  </Provider>
+);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chemScannerDOM = document.getElementById('ChemScanner');
+  if (chemScannerDOM) ReactDOM.render(<ChemScanner />, chemScannerDOM);
+});
diff --git a/app/packs/src/components/chemscanner/actions/ActionTypes.js b/app/packs/src/components/chemscanner/actions/ActionTypes.js
new file mode 100644
index 000000000..6c7b36d10
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/ActionTypes.js
@@ -0,0 +1,79 @@
+export const SET_CDD_INSTANCE = 'SET_CDD_INSTANCE';
+export const SCAN_FILE_FOR_MOLECULES = 'SCAN_FILE_FOR_MOLECULES';
+export const SCAN_FILE_FOR_REACTIONS = 'SCAN_FILE_FOR_REACTIONS';
+
+export const HIDE_FILE = 'HIDE_FILE';
+export const HIDE_SCHEME = 'HIDE_SCHEME';
+export const HIDE_MOLECULE = 'HIDE_MOLECULE';
+export const HIDE_REACTION = 'HIDE_REACTION';
+
+export const APPROVE_FILE = 'APPROVE_FILE';
+export const APPROVE_SCHEME = 'APPROVE_SCHEME';
+
+export const EDIT_MOLECULE_COMMENT = 'EDIT_MOLECULE_COMMENT';
+export const EDIT_REACTION_COMMENT = 'EDIT_REACTION_COMMENT';
+
+export const SELECT_MOLECULE = 'SELECT_MOLECULE';
+export const SELECT_REACTION = 'SELECT_REACTION';
+
+export const CLEAN_UP = 'CLEAN_UP';
+export const CLEAN_UP_REQUEST_SVG = 'CLEAN_UP_REQUEST_SVG';
+
+export const CHANGE_VIEW = 'CHANGE_VIEW';
+export const VIEW_SCANNED_FILES = 'VIEW_SCANNED_FILES';
+export const VIEW_ABBREVIATION = 'VIEW_ABBREVIATION';
+export const VIEW_FILE_STORAGE = 'VIEW_FILE_STORAGE';
+export const VIEW_ARCHIVED_MANAGEMENT = 'VIEW_ARCHIVED_MANAGEMENT';
+
+export const UPDATE_REAGENTS_SMILES = 'UPDATE_REAGENTS_SMILES';
+
+export const GET_CURRENT_VERSION = 'GET_CURRENT_VERSION';
+
+export const SET_LOADING = 'SET_LOADING';
+export const UNSET_LOADING = 'UNSET_LOADING';
+export const SET_IMPORT = 'SET_IMPORT';
+export const UNSET_IMPORT = 'UNSET_IMPORT';
+export const SET_NOTIFICATION = 'SET_NOTIFICATION';
+export const RESET_NOTIFICATION = 'RESET_NOTIFICATION';
+
+export const RETRIEVE_STORED_FILES = 'RETRIEVE_STORED_FILES';
+export const GET_SCANNED_OUTPUT = 'GET_SCANNED_OUTPUT';
+export const RESCAN_STORED_FILE = 'RESCAN_STORED_FILE';
+export const DELETE_STORED_FILE = 'DELETE_STORED_FILE';
+export const DOWNLOAD_STORED_FILE = 'DOWNLOAD_STORED_FILE';
+export const MARK_CORRECT = 'MARK_CORRECT';
+export const UPLOAD_TO_STORE = 'UPLOAD_TO_STORE';
+
+export const GET_SCHEME_PREVIEW = 'GET_SCHEME_PREVIEW';
+export const SAVE_PNG = 'SAVE_PNG';
+
+export const UPDATE_METADATA = 'UPDATE_METADATA';
+export const IMPORT_DATA = 'IMPORT_DATA';
+export const UPDATE_ITEM_FIELD = 'UPDATE_ITEM_FIELD';
+
+export const TOGGLE_ALIAS_POLYMER = 'TOGGLE_ALIAS_POLYMER';
+
+export const SET_EDITING_MOLECULE_ID = 'SET_EDITING_MOLECULE_ID';
+
+export const FETCH_SVG = 'FETCH_SVG';
+
+export const TOGGLE_FILE_EXPAND = 'TOGGLE_FILE_EXPAND';
+export const TOGGLE_SCHEME_EXPAND = 'TOGGLE_SCHEME_EXPAND';
+
+export const SET_ARCHIVED_VALUE = 'SET_ARCHIVED_VALUE';
+
+export const DEFAULT = 'DEFAULT';
+
+export const REMOVE_FILE = 'REMOVE_FILE';
+
+export const REMOVE_MOLECULE = 'REMOVE_MOLECULE';
+export const REMOVE_REACTION = 'REMOVE_REACTION';
+
+export const TOGGLE_RESIN_IN_REACTION = 'TOGGLE_RESIN_IN_REACTION';
+export const TOGGLE_MOLECULE_RESIN = 'TOGGLE_MOLECULE_RESIN';
+
+export const TOGGLE_ABB_VIEW = 'TOGGLE_ABB_VIEW';
+
+export const ADD_REAGENTS_SMILES = 'ADD_REAGENTS_SMILES';
+
+export const DELETE_FILE = 'DELETE_FILE';
diff --git a/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js b/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
new file mode 100644
index 000000000..2cccb1426
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
@@ -0,0 +1,5 @@
+import * as types from 'src/apps/chemscanner/actions/ActionTypes';
+
+const setCddInstance = cdd => ({ type: types.SET_CDD_INSTANCE, cdd });
+
+export default setCddInstance;
diff --git a/app/packs/src/components/chemscanner/actions/fileActions.js b/app/packs/src/components/chemscanner/actions/fileActions.js
new file mode 100644
index 000000000..4fc00ec63
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/fileActions.js
@@ -0,0 +1,113 @@
+import { fromJS } from 'immutable';
+import uuid from 'uuid';
+
+import * as types from './ActionTypes';
+import { CALL_API } from '../middleware/api';
+
+import { isPngImage, isSvgImage } from '../utils';
+
+export const scanFileNormalizer = (res, store) => {
+  const { schemes } = res;
+  if (!schemes) return fromJS(res);
+
+  const cddInstance = store.getState().get('chemdrawInstance');
+  if (!cddInstance) return fromJS(res);
+
+  schemes.filter(s => s.imageData).forEach((scheme) => {
+    const { imageData } = scheme;
+    const isPng = isPngImage(imageData);
+    const isSvg = isSvgImage(imageData);
+
+    if (isPng || isSvg) {
+      const type = isPng ? 'image/png' : 'image/svg+xml';
+
+      const blob = new Blob([imageData], { type });
+      /* eslint-disable-next-line no-param-reassign */
+      scheme.imageData = window.URL.createObjectURL(blob);
+
+      /* eslint-disable-next-line no-param-reassign */
+      scheme.isSaved = true;
+
+      return;
+    }
+
+    const cdxmlRegex = new RegExp('<?xml.*');
+
+    if (cdxmlRegex.test(scheme.imageData)) {
+      cddInstance.loadCDXML(imageData);
+    } else {
+      cddInstance.loadB64CDX(imageData);
+    }
+
+    const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
+    const pngb64 = `data:image/png;base64,${b64png}`;
+    cddInstance.clear();
+
+    /* eslint-disable-next-line no-param-reassign */
+    scheme.pictureData = pngb64;
+
+    const blob = new Blob([pngb64], { type: 'image/png' });
+    /* eslint-disable-next-line no-param-reassign */
+    scheme.imageData = window.URL.createObjectURL(blob);
+  });
+
+  return fromJS(res);
+};
+
+export const scanFile = (files, getMol) => (dispatch) => {
+  const data = new FormData();
+  data.append('get_mol', getMol);
+  files.forEach(file => data.append(uuid.v4(), file));
+  const actionType = getMol ? types.SCAN_FILE_FOR_MOLECULES : types.SCAN_FILE_FOR_REACTIONS;
+
+  return dispatch({
+    type: actionType,
+    [CALL_API]: {
+      endpoint: '/api/v1/public_chemscanner/upload',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        body: data
+      }
+    }
+  });
+};
+
+export const updateReagents = (reactionId, updateInfo) => dispatch => (
+  dispatch({
+    type: types.UPDATE_REAGENTS_SMILES,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner/reagent_smiles',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ reactionId, updateInfo })
+      }
+    },
+  })
+);
+
+export const saveImage = imageList => dispatch => (
+  dispatch({
+    type: types.SAVE_PNG,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/save_png',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ image_list: imageList })
+      }
+    },
+  })
+);
+
+export const removeFile = fileUid => ({ type: types.HIDE_FILE, fileUid });
diff --git a/app/packs/src/components/chemscanner/actions/index.js b/app/packs/src/components/chemscanner/actions/index.js
new file mode 100644
index 000000000..77aa9e066
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/index.js
@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import files from './files';
+import chemdrawItems from './chemdrawItems';
+import images from './images';
+
+export default combineReducers({
+  files,
+  chemdrawItems,
+  images
+});
diff --git a/app/packs/src/components/chemscanner/actions/scannedItemActions.js b/app/packs/src/components/chemscanner/actions/scannedItemActions.js
new file mode 100644
index 000000000..6015ba029
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/scannedItemActions.js
@@ -0,0 +1,37 @@
+import * as types from '../actions/ActionTypes';
+
+export const removeMolecule = (id, fileUid, schemeIdx) => ({
+  type: types.HIDE_MOLECULE, id, fileUid, schemeIdx
+});
+
+export const removeReaction = (id, fileUid, schemeIdx) => ({
+  type: types.HIDE_REACTION, id, fileUid, schemeIdx
+});
+
+export const editReactionComment = (id, fileUid, schemeIdx, comment) => ({
+  type: types.EDIT_REACTION_COMMENT, id, fileUid, schemeIdx, comment
+});
+
+export const editMoleculeComment = (id, fileUid, schemeIdx, comment) => ({
+  type: types.EDIT_MOLECULE_COMMENT, id, fileUid, schemeIdx, comment
+});
+
+export const selectMolecule = (id, fileUid, schemeIdx) => ({
+  type: types.SELECT_MOLECULE, id, fileUid, schemeIdx
+});
+
+export const selectReaction = (id, fileUid, schemeIdx) => ({
+  type: types.SELECT_REACTION, id, fileUid, schemeIdx
+});
+
+//export const setResin = (id, fileUid, cdUid, atomId) => ({
+//  type: types.SET_RESIN, id, fileUid, cdUid, atomId
+//});
+
+export const toggleResinInReaction = (fileUid, cdUid, rId, molId, atomId) => ({
+  type: types.TOGGLE_RESIN_IN_REACTION, fileUid, cdUid, rId, molId, atomId
+});
+
+export const toggleMoleculeResin = (fileUid, cdUid, molId, atomId) => ({
+  type: types.TOGGLE_MOLECULE_RESIN, fileUid, cdUid, molId, atomId
+});
diff --git a/app/packs/src/components/chemscanner/actions/storedFileActions.js b/app/packs/src/components/chemscanner/actions/storedFileActions.js
new file mode 100644
index 000000000..4e6c48631
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/storedFileActions.js
@@ -0,0 +1,315 @@
+import uuid from 'uuid';
+
+import * as types from './ActionTypes';
+import { scanFileNormalizer } from './fileActions';
+import { CALL_API } from '../middleware/api';
+
+export const retrieveStoredFiles = () => dispatch => (
+  dispatch({
+    type: types.RETRIEVE_STORED_FILES,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/all',
+      options: {
+        credentials: 'same-origin',
+        method: 'post'
+      }
+    }
+  })
+);
+
+export const getScannedOutputs = (ids, type, display) => dispatch => (
+  dispatch({
+    type: types.GET_SCANNED_OUTPUT,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/get_outputs',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, display })
+      },
+    }
+  })
+);
+
+export const hideItems = (ids, type) => dispatch => (
+  dispatch({ type: types[`HIDE_${type.toLocaleUpperCase()}`], ids })
+);
+
+export const approveItems = (ids, type, val) => dispatch => (
+  dispatch({
+    type: types[`APPROVE_${type.toLocaleUpperCase()}`],
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/approve',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, val })
+      },
+    }
+  })
+);
+
+export const rescanFiles = ids => dispatch => (
+  dispatch({
+    type: types.RESCAN_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/rescan',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids })
+      },
+    }
+  })
+);
+
+export const deleteItems = (ids, type, itemVersion) => dispatch => (
+  dispatch({
+    type: types.DELETE_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/delete',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, version: itemVersion || '' })
+      },
+    }
+  })
+);
+
+export const downloadFile = id => dispatch => (
+  dispatch({
+    type: types.DOWNLOAD_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/download/',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+      },
+    }
+  })
+);
+
+export const uploadToStore = files => (dispatch) => {
+  const data = new FormData();
+  for (let i = 0; i < files.length; i += 1) data.append(uuid.v4(), files[i]);
+
+  return dispatch({
+    type: types.UPLOAD_TO_STORE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/upload',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        body: data
+      }
+    }
+  });
+};
+
+export const saveImage = imageList => (
+  fetch('/api/v1/chemscanner_storage/save_png', {
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'post',
+    body: JSON.stringify({ image_list: imageList })
+  })
+);
+
+export const fetchPreview = id => (
+  fetch('/api/v1/chemscanner_storage/scheme_image', {
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'post',
+    body: JSON.stringify({ id })
+  }).then(res => res.json())
+);
+
+export const getPreview = id => dispatch => (
+  dispatch({
+    type: types.GET_SCHEME_PREVIEW,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/scheme_image',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+      },
+    }
+  })
+);
+
+export const updateMetadata = (id, type, extendedMetadata) => dispatch => (
+  dispatch({
+    type: types.UPDATE_METADATA,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/update_metadata',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id, type, data: extendedMetadata })
+      },
+    }
+  })
+);
+
+export const importData = (data, collection, maintainShortLabel) => dispatch => (
+  dispatch({
+    type: types.IMPORT_DATA,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/import',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ data, collection, maintainShortLabel })
+      }
+    }
+  })
+);
+
+export const updateItemField = (id, type, field, value) => dispatch => (
+  dispatch({
+    type: types.UPDATE_ITEM_FIELD,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/update_output',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id, type, field, value
+        })
+      }
+    }
+  })
+);
+
+export const toggleAliasPolymer = (moleculeId, atomIdx) => dispatch => (
+  dispatch({
+    type: types.TOGGLE_ALIAS_POLYMER,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/toggle_polymer',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ moleculeId, atomIdx })
+      }
+    }
+  })
+);
+
+export const fetchSvg = (moleculeIds, reactionIds) => dispatch => (
+  dispatch({
+    type: types.FETCH_SVG,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/fetch_svg',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ moleculeIds, reactionIds })
+      }
+    }
+  })
+);
+
+export const beilsteinExport = ids => (
+  fetch('/api/v1/chemscanner_storage/beilstein_export', {
+    credentials: 'same-origin',
+    method: 'post',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ ids })
+  })
+);
+
+export const setArchivedValue = (ids, value) => dispatch => (
+  dispatch({
+    type: types.SET_ARCHIVED_VALUE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/set_archived',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, value })
+      },
+    }
+  })
+);
+
+export const setExpand = (id, type, value) => dispatch => (
+  dispatch({
+    type: types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`] || types.DEFAULT,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/set_expanded',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ type, id, value })
+      },
+    }
+  })
+);
diff --git a/app/packs/src/components/chemscanner/actions/uiActions.js b/app/packs/src/components/chemscanner/actions/uiActions.js
new file mode 100644
index 000000000..2ea85cbfc
--- /dev/null
+++ b/app/packs/src/components/chemscanner/actions/uiActions.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-prototype-builtins */
+
+import * as types from './ActionTypes';
+import { CALL_API } from '../middleware/api';
+
+export const changeView = view => dispatch => (
+  dispatch({ type: types.CHANGE_VIEW, view })
+);
+
+export const getCurrentVersion = () => dispatch => (
+  dispatch({
+    type: types.GET_CURRENT_VERSION,
+    [CALL_API]: {
+      endpoint: '/api/v1/public_chemscanner/ui/version',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+      },
+    }
+  })
+);
diff --git a/app/packs/src/components/chemscanner/components/AbbreviationManagement.js b/app/packs/src/components/chemscanner/components/AbbreviationManagement.js
new file mode 100644
index 000000000..f0f61d012
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/AbbreviationManagement.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+import {
+  ControlLabel, Button, Radio,
+  Form, FormGroup, FormControl,
+} from 'react-bootstrap';
+
+export default class AbbreviationManagement extends React.Component {
+  constructor() {
+    super();
+
+    this.createAbbreviation = this.createAbbreviation.bind(this);
+    this.onAbbGridReady = this.onAbbGridReady.bind(this);
+    this.onSuperatomGridReady = this.onSuperatomGridReady.bind(this);
+  }
+
+  onAbbGridReady(e) {
+    const { onGridReady } = this.props;
+    onGridReady(e, true);
+  }
+
+  onSuperatomGridReady(e) {
+    const { onGridReady } = this.props;
+    onGridReady(e, false);
+  }
+
+  createAbbreviation() {
+    const { createAbbreviation, newAbb } = this.props;
+    const abb = this.abbRef.value;
+    const smiles = this.smilesRef.value;
+
+    createAbbreviation(abb, smiles, newAbb);
+  }
+
+  render() {
+    const {
+      abbColumnDefs, superatomColumnDefs, abbreviations, superatoms,
+      defaultColDef, newAbb, changeTypeCreate
+    } = this.props;
+
+    const newText = newAbb ? 'Abbreviation' : 'Superatom';
+
+    const abbreviationStyle = {
+      width: '70%',
+      marginRight: '5px',
+      height: 'calc(100vh - 150px)'
+    };
+    const superatomStyle = {
+      width: '30%',
+      marginRight: '5px',
+      height: 'calc(100vh - 150px)'
+    };
+
+    return (
+      <div style={{ marginTop: '20px' }}>
+        <div className="chemscanner-abb-view-header">
+          <Form inline style={{ marginRight: '20px' }}>
+            <FormGroup controlId="formInlineName" style={{ marginRight: '20px' }}>
+              <ControlLabel>{newText}</ControlLabel>
+              <FormControl
+                type="text"
+                placeholder={newText}
+                inputRef={(r) => { this.abbRef = r; }}
+                style={{ marginLeft: '10px', marginRight: '10px' }}
+              />
+            </FormGroup>
+            <FormGroup controlId="formInlineEmail">
+              <ControlLabel>SMILES</ControlLabel>
+              {' '}
+              <FormControl
+                type="text"
+                placeholder="SMILES"
+                inputRef={(r) => { this.smilesRef = r; }}
+              />
+            </FormGroup>
+          </Form>
+          <Form inline>
+            <FormGroup>
+              <Radio
+                inline
+                value="similar"
+                checked={newAbb}
+                onChange={changeTypeCreate}
+              >
+                Abbreviation
+              </Radio>
+              <Radio
+                inline
+                value="similar"
+                checked={!newAbb}
+                onChange={changeTypeCreate}
+              >
+                Superatom
+              </Radio>
+            </FormGroup>
+            <Button
+              bsSize="small"
+              onClick={this.createAbbreviation}
+              style={{ marginLeft: '20px' }}
+            >
+              Create
+            </Button>
+          </Form>
+        </div>
+        <br />
+        <div className="abbreviation-management">
+          <div className="ag-theme-balham" style={abbreviationStyle}>
+            <AgGridReact
+              pagination
+              paginationAutoPageSize
+              floatingFilter
+              columnDefs={abbColumnDefs}
+              defaultColDef={defaultColDef || {}}
+              rowData={abbreviations}
+              onGridReady={this.onAbbGridReady}
+            />
+          </div>
+          <div className="ag-theme-balham" style={superatomStyle}>
+            <AgGridReact
+              pagination
+              paginationAutoPageSize
+              floatingFilter
+              columnDefs={superatomColumnDefs}
+              defaultColDef={defaultColDef || {}}
+              rowData={superatoms}
+              onGridReady={this.onSuperatomGridReady}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AbbreviationManagement.propTypes = {
+  abbColumnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  superatomColumnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultColDef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  abbreviations: PropTypes.arrayOf(PropTypes.object).isRequired,
+  superatoms: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onGridReady: PropTypes.func.isRequired,
+  newAbb: PropTypes.bool.isRequired,
+  changeTypeCreate: PropTypes.func.isRequired,
+  createAbbreviation: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/ArchivedManagement.js b/app/packs/src/components/chemscanner/components/ArchivedManagement.js
new file mode 100644
index 000000000..40e021cd4
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ArchivedManagement.js
@@ -0,0 +1,142 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { AgGridReact } from 'ag-grid-react';
+
+export default class ArchivedManagement extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+
+    this.activedColumnDefs = [
+      {
+        headerName: 'Actived File',
+        field: 'fileName',
+        width: 250,
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+    ];
+    this.archivedColumnDefs = [
+      {
+        headerName: 'Archived File',
+        field: 'fileName',
+        width: 250,
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+    ];
+
+    this.onActivedGridReady = this.onActivedGridReady.bind(this);
+    this.onArchivedGridReady = this.onArchivedGridReady.bind(this);
+
+    this.setArchived = this.setArchived.bind(this);
+    this.setActived = this.setActived.bind(this);
+  }
+
+  componentDidUpdate() {
+    if (this.activedGridApi && this.activedGridColumnApi) {
+      this.activedGridColumnApi.autoSizeColumns();
+    }
+
+    if (this.archivedGridApi && this.archivedGridColumnApi) {
+      this.archivedGridColumnApi.autoSizeColumns();
+    }
+  }
+
+  onActivedGridReady(params) {
+    this.activedGridApi = params.api;
+    this.activedGridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+  }
+
+  onArchivedGridReady(params) {
+    this.archivedGridApi = params.api;
+    this.archivedGridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+  }
+
+  setArchived() {
+    if (!this.activedGridApi) return;
+
+    const fileIds = this.activedGridApi.getSelectedRows().map(s => s.id);
+    this.props.setArchivedValue(fileIds, true);
+  }
+
+  setActived() {
+    if (!this.archivedGridApi) return;
+
+    const fileIds = this.archivedGridApi.getSelectedRows().map(s => s.id);
+    this.props.setArchivedValue(fileIds, false);
+  }
+
+  render() {
+    const { archivedFiles, activedFiles } = this.props;
+    const gridStyle = {
+      height: 'calc(100vh - 100px)', flex: 1
+    };
+    const buttonStyle = {
+      width: '33px',
+      margin: '5px',
+      textAlign: 'center',
+      alignSelf: 'center',
+      color: 'rgba(0, 0, 0, 0.54)'
+    };
+
+    return (
+      <div style={{ display: 'flex', margin: '10px' }}>
+        <div className="ag-theme-balham" style={gridStyle}>
+          <AgGridReact
+            id="activedFilesGrid"
+            columnDefs={this.activedColumnDefs}
+            rowData={activedFiles}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            onGridReady={this.onActivedGridReady}
+          />
+        </div>
+        <div style={buttonStyle}>
+          <button className="btn btn-xs" onClick={this.setArchived}>
+            <i className="fa fa-arrow-circle-right fa-2x" />
+          </button>
+          &nbsp; &nbsp;
+          <button className="btn btn-xs" onClick={this.setActived}>
+            <i className="fa fa-arrow-circle-left fa-2x" />
+          </button>
+        </div>
+        <div className="ag-theme-balham" style={gridStyle}>
+          <AgGridReact
+            id="archivedFilesGrid"
+            columnDefs={this.archivedColumnDefs}
+            rowData={archivedFiles}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            onGridReady={this.onArchivedGridReady}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ArchivedManagement.propTypes = {
+  archivedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  activedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js b/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
new file mode 100644
index 000000000..9ce6f25b5
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, ControlLabel, Checkbox,
+  FormControl, FormGroup, Modal
+} from 'react-bootstrap';
+
+import TreeSelect from 'antd/lib/tree-select';
+
+export default class ChemscannerImportModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      newLabel: null,
+      options: [],
+      maintainShortLabel: true,
+      selected: null,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.toggleMaintainShortLabel = this.toggleMaintainShortLabel.bind(this);
+    this.onSelectChange = this.onSelectChange.bind(this);
+    this.handleImport = this.handleImport.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchCollections().then((res) => {
+      this.setState({ options: res.all_as_tree });
+    });
+  }
+
+  onSelectChange(id) {
+    this.setState({ selected: id });
+  }
+
+  onChange(e) {
+    if (!e.target) return;
+
+    this.setState({ newLabel: e.target.value });
+  }
+
+  handleImport() {
+    const { selectedItems, closeModal, importData } = this.props;
+    const { selected, newLabel, maintainShortLabel } = this.state;
+
+    closeModal();
+
+    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
+    const collection = { id: selected, newCollection: newLabel };
+    importData(data, collection, maintainShortLabel);
+  }
+
+  toggleMaintainShortLabel() {
+    this.setState({ maintainShortLabel: !this.state.maintainShortLabel });
+  }
+
+  render() {
+    const { show, selectedItems, closeModal } = this.props;
+
+    const showModal = show && selectedItems.length > 0;
+
+    const {
+      options, newLabel, selected, maintainShortLabel
+    } = this.state;
+
+    const btnText = newLabel ? (
+      `Create collection "${newLabel}" and Import`
+    ) : (
+      'Import'
+    );
+
+    return (
+      <Modal show={showModal}>
+        <Modal.Header>
+          <Modal.Title>Import to Collection</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormGroup>
+            <ControlLabel>Select a Collection</ControlLabel>
+            <TreeSelect
+              treeData={options}
+              value={selected}
+              onChange={this.onSelectChange}
+              style={{ width: '100%' }}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>or Create a new Collection</ControlLabel>
+            <FormControl
+              type="text"
+              placeholder="-- Please insert collection name --"
+              onChange={this.onChange}
+            />
+          </FormGroup>
+          <FormGroup>
+            <Checkbox
+              checked={maintainShortLabel}
+              onChange={this.toggleMaintainShortLabel}
+            >
+              Maintain reaction short label
+            </Checkbox>
+          </FormGroup>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={closeModal}>Close</Button>
+          <Button
+            bsStyle="warning"
+            style={{ float: 'left' }}
+            onClick={this.handleImport}
+            disabled={!(newLabel || selected)}
+          >
+            {btnText}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ChemscannerImportModal.propTypes = {
+  show: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.object),
+  fetchCollections: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  importData: PropTypes.func.isRequired,
+};
+
+ChemscannerImportModal.defaultProps = {
+  show: false,
+  selectedItems: []
+};
diff --git a/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js b/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
new file mode 100644
index 000000000..f7490dddc
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Clipboard from 'clipboard';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+
+export default class CopyClipboardBtn extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { identifier } = props;
+    const { fileUid, cdUid, id } = identifier;
+    this.ddId = `clipboard-dropdown-${fileUid}-${cdUid}-${id}`;
+  }
+
+  componentDidMount() {
+    const { container } = this.props;
+    const ddDiv = document.getElementById(this.ddId).parentNode;
+    const elements = ddDiv.getElementsByTagName('a');
+
+    if (container) {
+      this.clipboard = new Clipboard(elements, { container });
+    } else {
+      this.clipboard = new Clipboard(elements);
+    }
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  render() {
+    const {
+      smi, mdl, inchi, inchiKey
+    } = this.props;
+    const clipboardIcon = (<i className="fa fa-clipboard" />);
+
+    return (
+      <DropdownButton
+        title={clipboardIcon}
+        className="clipboard-btn left-btn btn btn-xs"
+        id={this.ddId}
+      >
+        <MenuItem eventKey="1" data-clipboard-text={smi}>SMILES</MenuItem>
+        <MenuItem eventKey="2" data-clipboard-text={mdl}>Molfile</MenuItem>
+        <MenuItem eventKey="3" data-clipboard-text={inchi}>InChI</MenuItem>
+        <MenuItem eventKey="4" data-clipboard-text={inchiKey}>InChIKey</MenuItem>
+      </DropdownButton>
+    );
+  }
+}
+
+CopyClipboardBtn.propTypes = {
+  smi: PropTypes.string.isRequired,
+  mdl: PropTypes.string.isRequired,
+  inchi: PropTypes.string.isRequired,
+  inchiKey: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  identifier: PropTypes.object.isRequired,
+  container: PropTypes.instanceOf(Element)
+};
+
+CopyClipboardBtn.defaultProps = {
+  container: null
+};
diff --git a/app/packs/src/components/chemscanner/components/DeleteBtn.js b/app/packs/src/components/chemscanner/components/DeleteBtn.js
new file mode 100644
index 000000000..d1a23b213
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/DeleteBtn.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class DeleteBtn extends React.Component {
+  constructor() {
+    super();
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick(e) {
+    const { param, onClick } = this.props;
+    e.stopPropagation();
+    e.preventDefault();
+    onClick(param);
+  }
+
+  render() {
+    const { pullLeft } = this.props;
+    const className = pullLeft ? 'left-btn' : 'right-btn';
+
+    return (
+      <button
+        className={`${className} btn btn-xs`}
+        onClick={this.onClick}
+      >
+        <i className="fa fa-times" />
+      </button>
+    );
+  }
+}
+
+DeleteBtn.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  pullLeft: PropTypes.bool,
+  param: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
+};
+
+DeleteBtn.defaultProps = {
+  pullLeft: false,
+};
diff --git a/app/packs/src/components/chemscanner/components/EditCommentBtn.js b/app/packs/src/components/chemscanner/components/EditCommentBtn.js
new file mode 100644
index 000000000..fff28342d
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/EditCommentBtn.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Popover, FormControl } from 'react-bootstrap';
+
+export default class EditCommentBtn extends React.Component {
+  constructor() {
+    super();
+
+    this.onChangeComment = this.onChangeComment.bind(this);
+  }
+
+  onChangeComment() {
+    const comment = this.commentRef.value;
+
+    const {
+      onChangeComment, cdUid, itemId
+    } = this.props;
+    onChangeComment(cdUid, itemId, comment);
+  }
+
+  render() {
+    const {
+      comment, cdUid, itemId
+    } = this.props;
+
+    const commentPopover = (
+      <Popover id={`${cdUid}-${itemId}-comment`} title="Comment">
+        <FormControl
+          componentClass="textarea"
+          defaultValue={comment}
+          inputRef={(r) => { this.commentRef = r; }}
+          rows={6}
+        />
+      </Popover>
+    );
+
+    return (
+      <div>
+        <OverlayTrigger
+          trigger="click"
+          placement="left"
+          rootClose
+          onExit={this.onChangeComment}
+          overlay={commentPopover}
+          container={this}
+        >
+          <button type="button" className="clipboardBtn right-btn btn btn-xs">
+            <i className="fa fa-comment" />
+          </button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+EditCommentBtn.propTypes = {
+  onChangeComment: PropTypes.func.isRequired,
+  comment: PropTypes.string.isRequired,
+  itemId: PropTypes.number.isRequired,
+  cdUid: PropTypes.string.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/EditMdlBtn.js b/app/packs/src/components/chemscanner/components/EditMdlBtn.js
new file mode 100644
index 000000000..57801b00f
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/EditMdlBtn.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+
+export default class EditMdlBtn extends React.Component {
+  constructor() {
+    super();
+
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  onSelect(id) {
+    this.props.openKetcher(id);
+  }
+
+  render() {
+    const { options, identifier } = this.props;
+
+    if (options.length === 0 || !identifier) return <span />;
+
+    const icon = (<i className="fa fa-pencil" />);
+    const ddId = `dropdown-edit-mdl-${identifier}`;
+
+    return (
+      <DropdownButton
+        id={ddId}
+        title={icon}
+        className="clipboard-btn left-btn btn btn-xs"
+      >
+        {options.map(option => (
+          <MenuItem
+            key={option.value}
+            eventKey={option.value}
+            onSelect={this.onSelect}
+          >
+            {option.title}
+          </MenuItem>
+        ))}
+      </DropdownButton>
+    );
+  }
+}
+
+EditMdlBtn.propTypes = {
+  identifier: PropTypes.number,
+  openKetcher: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.object),
+};
+
+EditMdlBtn.defaultProps = {
+  options: [],
+  identifier: 0,
+};
diff --git a/app/packs/src/components/chemscanner/components/EditableText.js b/app/packs/src/components/chemscanner/components/EditableText.js
new file mode 100644
index 000000000..5e3afafcd
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/EditableText.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class EditableText extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { editing: false };
+
+    this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+
+  handleBlur(e) {
+    const { id, field, onFinishUpdate } = this.props;
+    if (!id) return;
+
+    const newValue = e.target.value;
+    this.setState({ editing: false }, onFinishUpdate(id, field, newValue));
+  }
+
+  handleDoubleClick() {
+    if (!this.props.id) return;
+
+    this.setState({ editing: true });
+  }
+
+  render() {
+    const { field, value } = this.props;
+    const { editing } = this.state;
+
+    let cellContent = value;
+    if (editing) {
+      cellContent = (
+        <input
+          style={{ width: '100%' }}
+          defaultValue={value}
+          onBlur={this.handleBlur}
+        />
+      );
+    }
+
+    return (
+      <div onDoubleClick={this.handleDoubleClick}>
+        <b>{field}: </b>
+        {cellContent}
+      </div>
+    );
+  }
+}
+
+EditableText.propTypes = {
+  id: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onFinishUpdate: PropTypes.func.isRequired
+};
+
+EditableText.defaultProps = {
+  id: 0,
+};
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js b/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
new file mode 100644
index 000000000..bfc38d30f
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Button, DropdownButton, MenuItem,
+  OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+
+function FileItemActionsHeader({
+  deleteItems, beilsteinExport, openImportModal,
+  rescanFiles, uploadInput, showSelectedItems,
+  setArchived, unsetArchived
+}) {
+  if (!uploadInput) return <span />;
+
+  const uploadTooltip = <Tooltip id="cs-show-files">Upload</Tooltip>;
+  const openUpload = () => uploadInput.current.click();
+
+  const rescanTooltip = <Tooltip id="cs-rescan-files">Rescan Files</Tooltip>;
+  const deleteTooltip = <Tooltip id="cs-rescan-files">Delete Items</Tooltip>;
+
+  const dropdownTitle = <i className="fa fa-eye" />;
+  const exportTitle = <i className="fa fa-cloud-upload" />;
+
+  const toggleArchiveTitle = <i className="fa fa-archive" />;
+
+  return (
+    <div>
+      <OverlayTrigger placement="top" overlay={deleteTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          style={{ float: 'right' }}
+          onClick={deleteItems}
+        >
+          <i className="fa fa-trash" />
+        </Button>
+      </OverlayTrigger>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          bsStyle="info"
+          pullRight
+          id="cs-show-multiple-items-dropdown"
+          title={dropdownTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={() => showSelectedItems('reactions')}
+          >
+            Show Reactions
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={() => showSelectedItems('molecules')}
+          >
+            Show Molecules
+          </MenuItem>
+        </DropdownButton>
+      </div>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          pullRight
+          id="cs-show-multiple-items-dropdown"
+          title={exportTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={openImportModal}
+          >
+            Import to ELN
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={beilsteinExport}
+          >
+            Beilstein export
+          </MenuItem>
+        </DropdownButton>
+      </div>
+      <OverlayTrigger placement="top" overlay={rescanTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="primary"
+          style={{ float: 'right', marginRight: '5px' }}
+          onClick={rescanFiles}
+        >
+          <i className="fa fa-refresh" />
+        </Button>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={uploadTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="success"
+          style={{ float: 'right', marginRight: '5px' }}
+          onClick={openUpload}
+        >
+          <i className="fa fa-plus-circle" />
+        </Button>
+      </OverlayTrigger>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          pullRight
+          id="cs-toggle-archive-dropdown"
+          title={toggleArchiveTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={setArchived}
+          >
+            Set archive
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={unsetArchived}
+          >
+            Unset archive
+          </MenuItem>
+        </DropdownButton>
+      </div>
+    </div>
+  );
+}
+
+FileItemActionsHeader.propTypes = {
+  uploadInput: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  rescanFiles: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  beilsteinExport: PropTypes.func.isRequired,
+  openImportModal: PropTypes.func.isRequired,
+  showSelectedItems: PropTypes.func.isRequired,
+  setArchived: PropTypes.func.isRequired,
+  unsetArchived: PropTypes.func.isRequired,
+};
+
+FileItemActionsHeader.defaultProps = {
+  uploadInput: null
+};
+
+export default FileItemActionsHeader;
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js b/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
new file mode 100644
index 000000000..1221dba3b
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
@@ -0,0 +1,260 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Button, DropdownButton, MenuItem,
+  OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+
+const DeleteBtn = ({ deleteItems }) => {
+  const deleteTooltip = <Tooltip id="cs-delete-item">Delete</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={deleteTooltip}>
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        style={{ float: 'right', marginLeft: '5px' }}
+        onClick={deleteItems}
+      >
+        <i className="fa fa-trash" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+DeleteBtn.propTypes = {
+  deleteItems: PropTypes.func.isRequired,
+};
+
+const DownloadBtn = ({ data, downloadFile }) => {
+  const { type } = data;
+
+  let visibility = '';
+  if (type !== 'File') visibility = 'hidden';
+
+  const style = {
+    float: 'right',
+    marginLeft: '5px',
+    visibility,
+    width: '35px'
+  };
+
+  const tooltipId = `cs-download-${type}-${data.id}-tooltip`;
+  const downloadTooltip = <Tooltip id={tooltipId}>Download</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={downloadTooltip}>
+      <Button
+        bsSize="xsmall"
+        style={style}
+        onClick={downloadFile}
+      >
+        <i className="fa fa-download" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+DownloadBtn.propTypes = {
+  downloadFile: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired
+};
+
+const ShowHideBtn = ({
+  data, showReactions, showMolecules, hideItems
+}) => {
+  const { type, id, schemeCount } = data;
+  const children = data.children || [];
+
+  if (type === 'File') {
+    const noScheme = !schemeCount;
+    const hasNestedFile = children.length === 0 || (
+      children.length > 0 && children[0].type !== 'File'
+    );
+
+    if (noScheme && hasNestedFile) return <span />;
+  }
+
+  let tooltip;
+  let button;
+
+  if (data.show) {
+    button = (
+      <Button
+        bsSize="xsmall"
+        bsStyle="warning"
+        style={{ float: 'right', marginLeft: '5px', width: '35px' }}
+        onClick={hideItems}
+      >
+        <i className="fa fa-eye-slash" />
+      </Button>
+    );
+
+    tooltip = <Tooltip id="cs-hide-file">Hide</Tooltip>;
+  } else {
+    const ddId = `cs-show-${type}-${id}-dropdown`;
+
+    const title = <i className="fa fa-eye" />;
+
+    button = (
+      <div style={{ float: 'right', marginLeft: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          bsStyle="info"
+          pullRight
+          id={ddId}
+          title={title}
+        >
+          <MenuItem eventKey="1" onClick={showReactions}>Show Reactions</MenuItem>
+          <MenuItem eventKey="2" onClick={showMolecules}>Show Molecules</MenuItem>
+        </DropdownButton>
+      </div>
+    );
+
+    tooltip = <Tooltip id="cs-show-file">Show</Tooltip>;
+  }
+
+  return (
+    <OverlayTrigger placement="top" overlay={tooltip}>
+      {button}
+    </OverlayTrigger>
+  );
+};
+
+ShowHideBtn.propTypes = {
+  showReactions: PropTypes.func.isRequired,
+  showMolecules: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired
+};
+
+const RescanBtn = ({ data, rescanFiles }) => {
+  const { type, parentId } = data;
+  let visibility = '';
+  if (type !== 'File' || parentId) visibility = 'hidden';
+
+  const rescanTooltip = <Tooltip id="cs-rescan-file">Rescan File</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={rescanTooltip}>
+      <Button
+        bsSize="xsmall"
+        bsStyle="primary"
+        style={{ float: 'right', marginLeft: '5px', visibility }}
+        onClick={rescanFiles}
+      >
+        <i className="fa fa-refresh" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+RescanBtn.propTypes = {
+  rescanFiles: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+};
+
+class FileItemsActionsRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.rescanFiles = this.rescanFiles.bind(this);
+    this.showReactions = this.showReactions.bind(this);
+    this.showMolecules = this.showMolecules.bind(this);
+    this.hideItems = this.hideItems.bind(this);
+    this.deleteItems = this.deleteItems.bind(this);
+    this.downloadFile = this.downloadFile.bind(this);
+  }
+
+  rescanFiles() {
+    const { rescanFiles, data } = this.props;
+
+    rescanFiles([data.id]);
+  }
+
+  showReactions() {
+    const { showItems, data } = this.props;
+    const { id, type } = data;
+
+    showItems([id], type, 'reactions');
+  }
+
+  showMolecules() {
+    const { showItems, data } = this.props;
+    const { id, type } = data;
+
+    showItems([id], type, 'molecules');
+  }
+
+  hideItems() {
+    const { hideItems, data } = this.props;
+    const { id, type } = data;
+
+    hideItems([id], type);
+  }
+
+  deleteItems() {
+    const { deleteItems, data } = this.props;
+    const { id, type, version } = data;
+
+    deleteItems([id], type, version);
+  }
+
+  downloadFile() {
+    const { downloadFile, data } = this.props;
+    const { id } = data;
+
+    downloadFile(id).then(res => (
+      res.response.blob()
+    )).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = data.fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    });
+  }
+
+  render() {
+    const { version, data } = this.props;
+    const { type } = data;
+
+    if (type.startsWith('Item')) return <span />;
+
+    return (
+      <div style={{ marginTop: '1px' }}>
+        <DeleteBtn deleteItems={this.deleteItems} data={data} />
+        <ShowHideBtn
+          showReactions={this.showReactions}
+          showMolecules={this.showMolecules}
+          hideItems={this.hideItems}
+          data={data}
+        />
+        <DownloadBtn downloadFile={this.downloadFile} data={data} />
+        <RescanBtn
+          rescanFiles={this.rescanFiles}
+          version={version}
+          data={data}
+        />
+      </div>
+    );
+  }
+}
+
+FileItemsActionsRenderer.propTypes = {
+  version: PropTypes.string.isRequired,
+  rescanFiles: PropTypes.func.isRequired,
+  showItems: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  downloadFile: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemsActionsRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js b/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
new file mode 100644
index 000000000..b9f18c544
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
@@ -0,0 +1,97 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemApproveFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { isApproved: null };
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    const { isApproved } = this.state;
+    let newValue;
+    if (isApproved === null) {
+      newValue = true;
+    } else if (isApproved) {
+      newValue = false;
+    } else {
+      newValue = null;
+    }
+
+    this.setState({ isApproved: newValue }, this.props.filterChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.data.isApproved === this.state.isApproved;
+  }
+
+  isFilterActive() {
+    return this.state.isApproved !== null;
+  }
+
+  render() {
+    const { isApproved } = this.state;
+
+    let tooltipText;
+    let bsStyle;
+    let icon;
+    let style = {};
+    if (isApproved === null) {
+      tooltipText = 'Show All';
+      bsStyle = 'default';
+      icon = 'check';
+      style = { color: '#ccc' };
+    } else if (isApproved) {
+      tooltipText = 'Show Approved';
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      tooltipText = 'Show Not Approved';
+      bsStyle = 'warning';
+      icon = 'check-circle-o';
+    }
+
+    const tooltipId = 'cs-approve--filter-tooltip';
+    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" style={{ width: '50px' }} >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <OverlayTrigger placement="top" overlay={tooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle={bsStyle}
+                onClick={this.onChange}
+                style={style}
+              >
+                <i className={`fa fa-${icon}`} />
+              </Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemApproveFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemApproveFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js b/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
new file mode 100644
index 000000000..2d19ad634
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemApproveRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.approveItem = this.approveItem.bind(this);
+  }
+
+  approveItem() {
+    const { approveItems, data } = this.props;
+    const { type, id, isApproved } = data;
+
+    const val = !(isApproved || false);
+    approveItems([id], type, val);
+  }
+
+  render() {
+    const { data } = this.props;
+    const { type, id, isApproved } = data;
+
+    if (type.startsWith('Item')) return <span />;
+    if (type === 'File' && !data.children) return <span />;
+
+    const tooltipId = `cs-approve-${type}-${id}-tooltip`;
+    const tooltip = <Tooltip id={tooltipId}>Approve</Tooltip>;
+
+    let bsStyle;
+    let icon;
+    if (isApproved) {
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      bsStyle = 'default';
+      icon = 'check-circle-o';
+    }
+
+    return (
+      <div style={{ marginTop: '-2px', paddingLeft: '15px' }}>
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <Button bsSize="xsmall" bsStyle={bsStyle} onClick={this.approveItem}>
+            <i className={`fa fa-${icon}`} />
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+FileItemApproveRenderer.propTypes = {
+  approveItems: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemApproveRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js b/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
new file mode 100644
index 000000000..57be6256e
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
@@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Form, ControlLabel, Button } from 'react-bootstrap';
+
+import _ from 'lodash';
+
+class FileItemFileNameFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { text: '', showArchived: false };
+
+    this.inputRef = React.createRef();
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+    this.toggleArchived = this.toggleArchived.bind(this);
+    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
+  }
+
+  onChange(event) {
+    const newValue = event.target.value;
+    if (this.state.text === newValue) return;
+
+    this.setState({ text: newValue }, this.debouncedChangedCallback);
+  }
+
+  getModel() {
+    const { text, showArchived } = this.state;
+    return { text, showArchived };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    const showArchived = model ? model.showArchived : false;
+
+    this.setState({ text, showArchived });
+  }
+
+  toggleArchived() {
+    this.setState({ showArchived: !this.state.showArchived }, this.debouncedChangedCallback);
+  }
+
+  doesFilterPass(params) {
+    const { text, showArchived } = this.state;
+
+    let iter = params.node;
+    while (iter.level > 0) iter = iter.parent;
+
+    const { fileName, extendedMetadata } = iter.data;
+    const passText = fileName.includes(text);
+    let { archived } = extendedMetadata;
+    if (archived == null) archived = false;
+
+    // If showArchived, check passText
+    if (showArchived) return passText;
+
+    // Otherwise, archived items will not passed
+    return passText && !archived;
+  }
+
+  isFilterActive() { return true; }
+
+  afterGuiAttached() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    const { showArchived } = this.state;
+
+    let textArchive;
+    let icon;
+    if (showArchived) {
+      textArchive = 'Hide';
+      icon = (
+        <span className="fa-stack" style={{ fontSize: '0.63em' }}>
+          <i className="fa fa-archive fa-stack-1x" />
+          <i className="fa fa-ban fa-stack-2x text-danger" />
+        </span>
+      );
+    } else {
+      textArchive = 'Show';
+      icon = (<i className="fa fa-archive" />);
+    }
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" >
+          <div className="ag-input-wrapper file-filter" style={{ margin: '4px 4px 1px 4px' }}>
+            <div style={{ display: 'contents' }}>
+              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
+                <ControlLabel style={{ marginRight: '30px' }}>
+                  File Name
+                </ControlLabel>
+                <input
+                  ref={this.inputRef}
+                  value={this.state.text}
+                  onChange={this.onChange}
+                  style={{ width: '65%' }}
+                  className="ag-filter-filter"
+                  placeholder="Filter ..."
+                />
+              </Form>
+            </div>
+            <div style={{ display: 'contents' }}>
+              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
+                <ControlLabel style={{ marginRight: '5px', width: '89px' }}>
+                  {textArchive} Archived
+                </ControlLabel>
+                <Button bsSize="xsmall" onClick={this.toggleArchived}>
+                  {icon}
+                </Button>
+              </Form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemFileNameFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemFileNameFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js b/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
new file mode 100644
index 000000000..510a003ab
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemImportedFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { isImported: null };
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    const { isImported } = this.state;
+    let newValue;
+    if (isImported === null) {
+      newValue = true;
+    } else if (isImported) {
+      newValue = false;
+    } else {
+      newValue = null;
+    }
+
+    this.setState({ isImported: newValue }, this.props.filterChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.data.isImported === this.state.isImported;
+  }
+
+  isFilterActive() {
+    return this.state.isImported !== null;
+  }
+
+  render() {
+    const { isImported } = this.state;
+
+    let tooltipText;
+    let bsStyle;
+    let icon;
+    let style = {};
+
+    if (isImported === null) {
+      tooltipText = 'Show All';
+      bsStyle = 'default';
+      icon = 'check';
+      style = { color: '#ccc' };
+    } else if (isImported) {
+      tooltipText = 'Show Transferred';
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      tooltipText = 'Show Not Transferred';
+      bsStyle = 'warning';
+      icon = 'check-circle-o';
+    }
+
+    const tooltipId = 'cs-imported-filter-tooltip';
+    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" style={{ width: '50px' }} >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <OverlayTrigger placement="top" overlay={tooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle={bsStyle}
+                onClick={this.onChange}
+                style={style}
+              >
+                <i className={`fa fa-${icon}`} />
+              </Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemImportedFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemImportedFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js b/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
new file mode 100644
index 000000000..f69f379b7
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const FileItemImportedRenderer = ({ data }) => {
+  const { type, isImported } = data;
+  if (type.endsWith('Summary')) return <span />;
+
+  let style;
+  let icon;
+
+  if (isImported) {
+    style = { color: '#5cb85c' };
+    icon = 'check-circle';
+  } else {
+    style = {};
+    icon = 'check-circle-o';
+  }
+
+  return (
+    <div style={{ paddingLeft: '30px' }}>
+      <i style={style} className={`fa fa-${icon}`} />
+    </div>
+  );
+};
+
+FileItemImportedRenderer.propTypes = {
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemImportedRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js b/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
new file mode 100644
index 000000000..89a766149
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
@@ -0,0 +1,269 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ControlLabel, FormControl, Panel, Radio } from 'react-bootstrap';
+
+import PreviewFileZoomPan from './PreviewFileZoomPan';
+
+const PreviewEditor = ({ imageData, fileName }) => {
+  if (!imageData) return <span />;
+
+  return (
+    <Panel style={{ marginBottom: '0px', minHeight: '400px' }}>
+      <Panel.Heading>{fileName}</Panel.Heading>
+      <Panel.Body>
+        <PreviewFileZoomPan
+          imageURL={imageData}
+          duration={200}
+        />
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+PreviewEditor.propTypes = {
+  imageData: PropTypes.string,
+  fileName: PropTypes.string.isRequired,
+};
+
+PreviewEditor.defaultProps = {
+  imageData: '',
+};
+
+const InfoEditor = ({ fileName, data }) => {
+  const {
+    domain, type, format, doi
+  } = data;
+
+  return (
+    <Panel style={{ marginBottom: '0px' }}>
+      <Panel.Heading>{fileName}</Panel.Heading>
+      <Panel.Body>
+        <table className="cs-extended-metadata-table">
+          <tbody>
+            <tr>
+              <td style={{ width: '55px' }}>
+                <ControlLabel>Domain</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="organic"
+                  defaultChecked={domain === 'organic'}
+                >
+                  Organic
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="inorganic"
+                  defaultChecked={domain === 'inorganic'}
+                >
+                  Inorganic
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="solidPhase"
+                  defaultChecked={domain === 'solidPhase'}
+                >
+                  Solid Phase
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="heteroCyclic"
+                  defaultChecked={domain === 'heteroCyclic'}
+                >
+                  Hetero cyclic
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>Type</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="typeGroup"
+                  defaultValue="published"
+                  defaultChecked={type === 'published'}
+                >
+                  Published
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="typeGroup"
+                  defaultValue="unpublished"
+                  defaultChecked={type === 'unpublished'}
+                >
+                  Never published
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>Format</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="supportingInformation"
+                  defaultChecked={format === 'supportingInformation'}
+                >
+                  Supporting Information
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="manuscript"
+                  defaultChecked={format === 'manuscript'}
+                >
+                  Manuscript
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="review"
+                  defaultChecked={format === 'review'}
+                >
+                  Review
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="report"
+                  defaultChecked={format === 'report'}
+                >
+                  Report
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>DOI</ControlLabel>
+              </td>
+              <td colSpan={4}>
+                <FormControl
+                  type="text"
+                  id="doi_info"
+                  defaultValue={doi || ''}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+InfoEditor.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+  fileName: PropTypes.string.isRequired,
+};
+
+class FileItemInformationEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.containerRef = React.createRef();
+
+    this.focus = this.focus.bind(this);
+  }
+
+  componentDidMount() {
+    this.focus();
+  }
+
+  componentDidUpdate() {
+    this.focus();
+  }
+
+  componentWillUnmount() {
+    const { type, data } = this.props;
+
+    const extData = data.extendedMetadata || {};
+
+    let query = 'input[name="domainGroup"]:checked';
+    const domain = this.containerRef.current.querySelector(query);
+    if (domain) {
+      extData.domain = domain.value;
+    } else {
+      delete extData.domain;
+    }
+
+    query = 'input[name="typeGroup"]:checked';
+    const typeInfo = this.containerRef.current.querySelector(query);
+    if (typeInfo) {
+      extData.type = typeInfo.value;
+    } else {
+      delete extData.type;
+    }
+
+    query = 'input[name="formatGroup"]:checked';
+    const format = this.containerRef.current.querySelector(query);
+    if (format) {
+      extData.format = format.value;
+    } else {
+      delete extData.format;
+    }
+
+    const doi = this.containerRef.current.querySelector('#doi_info');
+    if (doi) {
+      extData.doi = doi.value;
+    } else {
+      delete extData.doi;
+    }
+
+    data.extendedMetadata = extData;
+    this.props.doneEditing(type, data);
+  }
+
+  getValue() {
+    return this.props.data.type;
+  }
+
+  focus() {
+    if (this.containerRef.current) this.containerRef.current.focus();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isPopup() {
+    return true;
+  }
+
+  render() {
+    const { data, type } = this.props;
+    const { fileName, imageData, extendedMetadata } = data;
+
+    let editor = <span />;
+    if (type === 'preview') {
+      editor = <PreviewEditor imageData={imageData} fileName={fileName} />;
+    } else if (type === 'info') {
+      editor = <InfoEditor data={extendedMetadata} fileName={fileName} />;
+    }
+
+    return (
+      <div ref={this.containerRef}>
+        {editor}
+      </div>
+    );
+  }
+}
+
+FileItemInformationEditor.propTypes = {
+  type: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+  doneEditing: PropTypes.func.isRequired
+};
+
+export default FileItemInformationEditor;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js b/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
new file mode 100644
index 000000000..dac058d0e
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+
+class FileItemInformationRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.getPreview = this.getPreview.bind(this);
+
+    this.setPreviewEdit = this.setPreviewEdit.bind(this);
+    this.setInfoEdit = this.setInfoEdit.bind(this);
+  }
+
+  getPreview() {
+    const { getPreview, node } = this.props;
+    const { id, type, schemeId } = node.data;
+    const itemId = type === 'Scheme' ? id : schemeId;
+    if (!itemId) return;
+
+    getPreview(itemId);
+  }
+
+  setPreviewEdit() {
+    const { setEdit, rowIndex, node } = this.props;
+    const {
+      id, type, schemeId, imageData
+    } = node.data;
+
+    const itemId = type === 'Scheme' ? id : schemeId;
+    if (!itemId) return;
+
+    const shouldFetch = !imageData;
+    setEdit(rowIndex, itemId, shouldFetch, 'preview');
+  }
+
+  setInfoEdit() {
+    const { setEdit, rowIndex, node } = this.props;
+    const { id } = node.data;
+    if (!id) return;
+
+    setEdit(rowIndex, id, false, 'info');
+  }
+
+  render() {
+    const { node } = this.props;
+    const { extendedMetadata, type, schemeCount } = node.data;
+
+    let previewOverlayBtn = <span />;
+
+    if (type === 'Scheme' || (type === 'File' && schemeCount === 1)) {
+      previewOverlayBtn = (
+        <Button
+          bsSize="xsmall"
+          onClick={this.setPreviewEdit}
+          style={{ marginRight: '5px', width: '25px' }}
+        >
+          <i className="fa fa-picture-o" />
+        </Button>
+      );
+    }
+
+    let extendedInfo = <span />;
+    if (type === 'File' && node.data.children) {
+      extendedInfo = (
+        <Button
+          bsSize="xsmall"
+          bsStyle="info"
+          style={{ marginRight: '5px', width: '25px' }}
+          onClick={this.setInfoEdit}
+        >
+          <i className="fa fa-info-circle" />
+        </Button>
+      );
+    }
+
+    let warningOverlay = <span />;
+    if (extendedMetadata) {
+      const { warnings } = extendedMetadata;
+
+      if (warnings && warnings.length > 0) {
+        const popoverId = `${node.data.id}-${type}-warning-popover`;
+        const warningPopover = (
+          <Popover id={popoverId}>
+            <ul>
+              {/* eslint-disable-next-line react/no-array-index-key */}
+              {warnings.map((w, idx) => <li key={idx}>{w}</li>)}
+            </ul>
+          </Popover>
+        );
+
+        warningOverlay = (
+          <OverlayTrigger trigger="click" placement="left" overlay={warningPopover}>
+            <Button bsSize="xsmall" bsStyle="warning" style={{ width: '25px' }}>
+              <i className="fa fa-exclamation-circle" />
+            </Button>
+          </OverlayTrigger>
+        );
+      }
+    }
+
+    return (
+      <div style={{ marginTop: '-2px' }}>
+        {previewOverlayBtn}
+        {warningOverlay}
+        {extendedInfo}
+      </div>
+    );
+  }
+}
+
+FileItemInformationRenderer.propTypes = {
+  getPreview: PropTypes.func.isRequired,
+  setEdit: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired
+};
+
+export default FileItemInformationRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js b/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
new file mode 100644
index 000000000..a110ffb7a
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import _ from 'lodash';
+
+class FileItemVersionFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { text: '' };
+
+    this.inputRef = React.createRef();
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
+  }
+
+  onChange(event) {
+    const newValue = event.target.value;
+    if (this.state.text === newValue) return;
+
+    this.setState({ text: newValue }, this.debouncedChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.node.data.version === this.state.text;
+  }
+
+  isFilterActive() {
+    return this.state.text;
+  }
+
+  afterGuiAttached() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <input
+              ref={this.inputRef}
+              value={this.state.text}
+              onChange={this.onChange}
+              className="ag-filter-filter"
+              placeholder="Filter ..."
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemVersionFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemVersionFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileStorage.js b/app/packs/src/components/chemscanner/components/FileStorage.js
new file mode 100644
index 000000000..fe15715ad
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/FileStorage.js
@@ -0,0 +1,351 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { AgGridReact } from 'ag-grid-react';
+
+import FileItemActionsHeader from './FileItemActionsHeader';
+
+import FileItemActionsRenderer from './FileItemActionsRenderer';
+import FileItemApproveRenderer from './FileItemApproveRenderer';
+import FileItemImportedRenderer from './FileItemImportedRenderer';
+import FileItemInformationRenderer from './FileItemInformationRenderer';
+
+import FileItemApproveFilter from './FileItemApproveFilter';
+import FileItemImportedFilter from './FileItemImportedFilter';
+import FileItemVersionFilter from './FileItemVersionFilter';
+import FileItemFileNameFilter from './FileItemFileNameFilter';
+
+import FileItemInformationEditor from './FileItemInformationEditor';
+
+import {
+  buildRowData,
+  versionGetter,
+  fileNameGetter,
+  getNodeChildDetails,
+} from './fileStorageUtils';
+
+export default class FileStorage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: false,
+      editingType: null,
+      rowIndex: -1,
+    };
+
+    this.uploadInput = React.createRef();
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.rescanFiles = this.rescanFiles.bind(this);
+    this.deleteItems = this.deleteItems.bind(this);
+    this.beilsteinExport = this.beilsteinExport.bind(this);
+    this.showSelectedItems = this.showSelectedItems.bind(this);
+    this.openImportModal = this.openImportModal.bind(this);
+
+    this.setInformationEditing = this.setInformationEditing.bind(this);
+    this.doneEditing = this.doneEditing.bind(this);
+    this.toggleExpand = this.toggleExpand.bind(this);
+
+    this.setArchived = this.setArchived.bind(this);
+    this.unsetArchived = this.unsetArchived.bind(this);
+
+    this.columnDefs = [
+      {
+        headerName: 'File',
+        field: 'file',
+        filterFramework: FileItemFileNameFilter,
+        width: 250,
+        valueGetter: fileNameGetter,
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionFilteredOnly: true,
+        cellRenderer: 'agGroupCellRenderer',
+        cellRendererParams: {
+          suppressCount: true,
+          checkbox: params => ['File', 'Scheme'].includes(params.data.type),
+        }
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+      {
+        headerName: 'Version',
+        width: 110,
+        suppressSizeToFit: true,
+        filterFramework: FileItemVersionFilter,
+        valueGetter: versionGetter,
+      },
+      {
+        headerName: 'Approved',
+        width: 100,
+        suppressSizeToFit: true,
+        filterFramework: FileItemApproveFilter,
+        cellRendererFramework: FileItemApproveRenderer,
+        cellRendererParams: { approveItems: props.approveItems },
+        field: 'isApproved'
+      },
+      {
+        headerName: 'Transferred',
+        width: 110,
+        suppressSizeToFit: true,
+        filterFramework: FileItemImportedFilter,
+        cellRendererFramework: FileItemImportedRenderer,
+        field: 'isImported'
+      },
+      {
+        headerName: 'Information',
+        field: 'information',
+        width: 115,
+        suppressSizeToFit: true,
+        cellRendererFramework: FileItemInformationRenderer,
+        editable: true,
+        cellEditorFramework: FileItemInformationEditor,
+        cellEditorParams: () => ({
+          type: this.state.editingType,
+          doneEditing: this.doneEditing,
+        }),
+        cellRendererParams: {
+          getPreview: props.getPreview,
+          setEdit: this.setInformationEditing,
+        },
+      },
+      {
+        headerName: '',
+        field: '',
+        width: 250,
+        filter: false,
+        headerClass: 'chemscanner-filestorage-action-header',
+        headerComponentFramework: FileItemActionsHeader,
+        headerComponentParams: {
+          uploadInput: this.uploadInput,
+          rescanFiles: this.rescanFiles,
+          deleteItems: this.deleteItems,
+          beilsteinExport: this.beilsteinExport,
+          showSelectedItems: this.showSelectedItems,
+          openImportModal: this.openImportModal,
+          setArchived: this.setArchived,
+          unsetArchived: this.unsetArchived
+        },
+        cellClass: 'chemscanner-filestorage-action-row',
+        cellRendererFramework: FileItemActionsRenderer,
+        cellRendererParams: {
+          version: props.version,
+          showItems: props.showItems,
+          rescanFiles: props.rescanFiles,
+          hideItems: props.hideItems,
+          downloadFile: props.downloadFile,
+          deleteItems: props.deleteItems
+        },
+      }
+    ];
+  }
+
+  componentDidUpdate() {
+    if (!this.gridApi || !this.gridColumnApi) return;
+
+    this.gridApi.sizeColumnsToFit();
+
+    const { rowIndex, editing } = this.state;
+    if (!editing) return;
+
+    this.gridApi.startEditingCell({ rowIndex, colKey: 'information' });
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+    this.gridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+
+    // Must get the filter in order to trigger the filterChangedCallback
+    const fileFilter = this.gridApi.getFilterInstance('file');
+    if (!fileFilter) return;
+    this.gridApi.onFilterChanged();
+  }
+
+  setInformationEditing(rowIndex, itemId, shouldFetch, type) {
+    if (!this.gridApi) return;
+
+    const getPreview = () => this.props.getPreview(itemId);
+
+    if (shouldFetch) {
+      this.setState({ editing: true, editingType: type, rowIndex }, getPreview);
+    } else {
+      this.setState({ editing: true, editingType: type, rowIndex });
+    }
+  }
+
+  setArchived() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.setArchivedValue(fileIds, true);
+  }
+
+  unsetArchived() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.setArchivedValue(fileIds, false);
+  }
+
+  rescanFiles() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.rescanFiles(fileIds);
+  }
+
+  deleteItems() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    ['File', 'Scheme'].forEach((type) => {
+      const selectedItems = selected.filter(i => i.type === type);
+
+      const versionMap = {};
+      selectedItems.forEach((item) => {
+        const { id } = item;
+        const version = item.version || '';
+        const arr = versionMap[version];
+
+        if (arr) {
+          arr.push(id);
+        } else {
+          versionMap[version] = [id];
+        }
+      });
+
+      Object.keys(versionMap).forEach((version) => {
+        const ids = versionMap[version];
+        if (ids.length === 0) return;
+
+        this.props.deleteItems(ids, type, version);
+      });
+    });
+  }
+
+  beilsteinExport() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const selectedItems = selected.filter(i => i.type === 'File' && !i.parentId);
+
+    this.props.beilsteinExport(selectedItems.map(s => s.id));
+  }
+
+  showSelectedItems(showType) {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const ids = [];
+    selected.forEach((item) => {
+      const { type, schemeId, id } = item;
+      if (type === 'File' && schemeId) {
+        ids.push(item.schemeId);
+      } else if (type === 'Scheme') {
+        ids.push(id);
+      }
+    });
+
+    this.props.showItems(ids, 'Scheme', showType);
+  }
+
+  openImportModal() {
+    if (!this.gridApi) return;
+
+    const selectedRows = this.gridApi.getSelectedRows();
+    const files = selectedRows.filter(r => r.type === 'File');
+    const schemes = selectedRows.filter(r => r.type === 'Scheme');
+
+    this.props.openImportModal(files.concat(schemes));
+  }
+
+  doneEditing(editingType, data) {
+    if (editingType !== 'info') return;
+
+    const { id, type, extendedMetadata } = data;
+
+    this.setState({
+      editing: false, editingType: null, rowIndex: -1
+    }, () => this.props.updateMetadata(id, type, extendedMetadata));
+  }
+
+  toggleExpand(e) {
+    this.props.toggleExpand(e.data);
+  }
+
+  render() {
+    const {
+      files, schemes, reactions, molecules, uploadToStore
+    } = this.props;
+
+    const rowData = buildRowData(files, schemes, reactions, molecules);
+
+    const uploadFileToStore = (e) => {
+      uploadToStore(e.target.files);
+      this.uploadInput.current.value = '';
+    };
+
+    return (
+      <div style={{ margin: '20px 15px 0px 10px' }}>
+        <input
+          type="file"
+          multiple="multiple"
+          style={{ display: 'none' }}
+          ref={this.uploadInput}
+          onChange={uploadFileToStore}
+        />
+        <div className="ag-theme-balham" style={{ height: 'calc(100vh - 120px)' }}>
+          <AgGridReact
+            id="fileStorageGrid"
+            columnDefs={this.columnDefs}
+            rowData={rowData}
+            enableGroupEdit
+            groupSelectsFiltered
+            onRowGroupOpened={this.toggleExpand}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            suppressRowClickSelection
+            getNodeChildDetails={getNodeChildDetails}
+            onGridReady={this.onGridReady}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+FileStorage.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  schemes: PropTypes.instanceOf(List).isRequired,
+  reactions: PropTypes.instanceOf(List).isRequired,
+  molecules: PropTypes.instanceOf(List).isRequired,
+  version: PropTypes.string,
+  approveItems: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  beilsteinExport: PropTypes.func.isRequired,
+  downloadFile: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  getPreview: PropTypes.func.isRequired,
+  rescanFiles: PropTypes.func.isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+  showItems: PropTypes.func.isRequired,
+  openImportModal: PropTypes.func.isRequired,
+  updateMetadata: PropTypes.func.isRequired,
+  uploadToStore: PropTypes.func.isRequired,
+  toggleExpand: PropTypes.func.isRequired,
+};
+
+FileStorage.defaultProps = {
+  version: ''
+};
diff --git a/app/packs/src/components/chemscanner/components/HeaderMenu.js b/app/packs/src/components/chemscanner/components/HeaderMenu.js
new file mode 100644
index 000000000..0984c6f3c
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/HeaderMenu.js
@@ -0,0 +1,441 @@
+import { List } from 'immutable';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import 'whatwg-fetch';
+import XLSX from 'xlsx';
+
+import {
+  ButtonGroup,
+  Button,
+  DropdownButton,
+  MenuItem,
+  OverlayTrigger
+} from 'react-bootstrap';
+
+import { catalyst } from 'src/components/staticDropdownOptions/reagents/catalyst';
+import { chiralAuxiliaries } from 'src/components/staticDropdownOptions/reagents/chiral_auxiliaries';
+import { couplingReagents } from 'src/components/staticDropdownOptions/reagents/coupling_reagents';
+import { fluorination } from 'src/components/staticDropdownOptions/reagents/fluorination';
+import { halogenationBrClI } from 'src/components/staticDropdownOptions/reagents/halogenation_BrClI';
+import { ionicLiquids } from 'src/components/staticDropdownOptions/reagents/ionic_liquids';
+import { lewisAcids } from 'src/components/staticDropdownOptions/reagents/lewis_acids';
+import { ligands } from 'src/components/staticDropdownOptions/reagents/ligands';
+import { metallorganics } from 'src/components/staticDropdownOptions/reagents/metallorganics';
+import { orgBases } from 'src/components/staticDropdownOptions/reagents/org_bases';
+import { organoboron } from 'src/components/staticDropdownOptions/reagents/organoboron';
+import { organocatalysts } from 'src/components/staticDropdownOptions/reagents/organocatalysts';
+import { oxidation } from 'src/components/staticDropdownOptions/reagents/oxidation';
+import { phaseTransferReagents } from 'src/components/staticDropdownOptions/reagents/phase_transfer_reagents';
+import { reducingReagents } from 'src/components/staticDropdownOptions/reagents/reducing_reagents';
+import { solvents } from 'src/components/staticDropdownOptions/reagents/solvents';
+
+import SmiSelect from 'src/apps/chemscanner/components/SmiSelect';
+import HelpPopover from 'src/apps/chemscanner/components/HelpPopover';
+
+import NotificationContainer from 'src/apps/chemscanner/containers/NotificationContainer';
+
+import {
+  extractMoleculeFromGroup,
+  generateExcelMoleculeRow,
+  generateExcelReactionRow
+} from 'src/apps/chemscanner/utils';
+
+import {
+  getSchemeMolecules,
+  getReactionReagents,
+  getReactionGroups
+} from '../reactionUtils';
+
+const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
+
+const allReagents = Object.assign(
+  {}, ionicLiquids, catalyst, ligands,
+  chiralAuxiliaries, couplingReagents, halogenationBrClI, fluorination,
+  orgBases, lewisAcids, organocatalysts, organoboron, metallorganics,
+  oxidation, reducingReagents, phaseTransferReagents
+);
+
+const supportTypes = (files) => {
+  let support = true;
+
+  for (let i = 0; i < files.length; i += 1) {
+    const file = files[i];
+    const extension = file.name.split('.').pop();
+
+    if (!SUPPORTED_FILE_TYPES.includes(extension)) support = false;
+  }
+
+  return support;
+};
+
+export default class HeaderMenu extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      disabled: true,
+      selectedReactionId: 0,
+      selectedSolvents: [],
+      selectedReagents: []
+    };
+
+    this.clickUploadMolecule = this.clickUploadMolecule.bind(this);
+    this.clickUploadReaction = this.clickUploadReaction.bind(this);
+
+    this.scanFilesForMolecules = this.scanFilesForMolecules.bind(this);
+    this.scanFilesForReactions = this.scanFilesForReactions.bind(this);
+    this.updateReagents = this.updateReagents.bind(this);
+
+    this.exportCml = this.exportCml.bind(this);
+    this.exportExcel = this.exportExcel.bind(this);
+
+    this.changeScannedFileView = this.changeScannedFileView.bind(this);
+    this.changeAbbreviationView = this.changeAbbreviationView.bind(this);
+    this.changeFileStorageView = this.changeFileStorageView.bind(this);
+    this.changeArchivedManagementView = this.changeArchivedManagementView.bind(this);
+
+    this.solventValues = Object.keys(solvents).map(k => solvents[k]);
+    this.allReagentValues = Object.keys(allReagents).map(k => allReagents[k]);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { reactions, molecules } = nextProps;
+
+    let rId = this.state.selectedReactionId;
+    const selectedR = reactions.filter(r => r.get('selected'));
+    const disabled = selectedR.size !== 1 || !selectedR.get(0).get('id');
+
+    const selectedReagents = [];
+    const selectedSolvents = [];
+
+    if (!disabled && selectedR.size === 1) {
+      const reaction = selectedR.get(0);
+      rId = reaction.get('id');
+      const reactionMolecules = getSchemeMolecules(reaction, molecules);
+      const reagents = getReactionReagents(reaction, reactionMolecules);
+
+      reagents.forEach((m) => {
+        const canoSmiles = m.get('canoSmiles');
+
+        if (this.solventValues.includes(canoSmiles)) {
+          selectedSolvents.push(canoSmiles);
+        } else if (this.allReagentValues.includes(canoSmiles)) {
+          selectedReagents.push(canoSmiles);
+        }
+      });
+    }
+
+    this.setState({
+      selectedReactionId: rId,
+      selectedSolvents,
+      selectedReagents,
+      disabled
+    });
+  }
+
+  exportCml() {
+    const { reactions, molecules } = this.props;
+
+    let selectedR = reactions.filter(r => r.get('selected'));
+    let selectedM = molecules.filter(r => r.get('selected'));
+    if (selectedR.size === 0 && selectedM.size === 0) {
+      selectedR = reactions.filter(r => r.get('externalId'));
+      selectedM = molecules.filter(m => m.get('externalId'));
+    }
+
+    const simpleReactions = selectedR.map((r) => {
+      const {
+        reactants, reagents, solvents, products
+      } = getReactionGroups(r, molecules);
+
+      return {
+        id: r.get('id'),
+        reactants: extractMoleculeFromGroup(reactants.toJS()),
+        reagents: extractMoleculeFromGroup(reagents.toJS()),
+        solvents: extractMoleculeFromGroup(solvents.toJS()),
+        products: extractMoleculeFromGroup(products.toJS()),
+        yield: r.get('yield') || '',
+        time: r.get('time') || '',
+        temperature: r.get('temperature') || '',
+        description: r.get('description') || ''
+      };
+    });
+
+    const simpleMolecules = selectedM.toJS().map(m => ({
+      id: m.id,
+      mdl: m.mdl,
+    }));
+
+    fetch('/api/v1/public_chemscanner/export/cml', {
+      credentials: 'same-origin',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: 'post',
+      body: JSON.stringify({ reactions: simpleReactions, molecules: simpleMolecules })
+    }).then((response) => {
+      if (response.ok === false) return null;
+
+      return response.json();
+    }).then((res) => {
+      if (!res) return;
+
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      ['reactions', 'molecules'].forEach((group) => {
+        const url = window.URL.createObjectURL(new Blob([res[group]]));
+        a.href = url;
+        a.download = `chemscanner_${group}.cml`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+      });
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  exportExcel() {
+    const { reactions, molecules } = this.props;
+    let selectedR = reactions.filter(r => r.get('selected'));
+    let selectedM = molecules.filter(r => r.get('selected'));
+    if (selectedR.size === 0 && selectedM.size === 0) {
+      selectedR = reactions.filter(r => r.get('externalId'));
+      selectedM = molecules.filter(m => m.get('externalId'));
+    }
+
+    const wb = {};
+    wb.SheetNames = [];
+    wb.Sheets = {};
+
+    const moleculeSheet = 'Molecules';
+    const moleculeRows = selectedM.toJS().reduce((rows, mol) => {
+      rows.push(generateExcelMoleculeRow(mol));
+      return rows;
+    }, [['Smiles', 'MDL', 'InChI', 'InChIKey', 'Description']]);
+    const moleculeWs = XLSX.utils.aoa_to_sheet(moleculeRows);
+    wb.SheetNames.push(moleculeSheet);
+    wb.Sheets[moleculeSheet] = moleculeWs;
+
+    const reactionSheet = 'Reactions';
+    const reactionRows = selectedR.reduce((rows, immuReaction) => {
+      const reaction = immuReaction.toJS();
+
+      const {
+        reactants, reagents, solvents, products
+      } = getReactionGroups(immuReaction, molecules);
+
+      reaction.reactants = reactants;
+      reaction.reagents = reagents;
+      reaction.solvents = solvents;
+      reaction.products = products;
+
+      rows.push(generateExcelReactionRow(reaction));
+
+      return rows;
+    }, [[
+      'ReactionSmiles', 'Temperature', 'Yield', 'Time',
+      'Reaction Description', 'Reaction Steps',
+      'Reactants SDF', 'Reagents SDF', 'Products SDF',
+      'Reactants Description', 'Products Description',
+    ]]);
+    const reactionWs = XLSX.utils.aoa_to_sheet(reactionRows);
+    wb.SheetNames.push(reactionSheet);
+    wb.Sheets[reactionSheet] = reactionWs;
+
+    XLSX.writeFile(wb, 'chemscanner.xlsx', { bookSST: true });
+  }
+
+  scanFilesForMolecules() {
+    const { showNotification, scanFile } = this.props;
+    const { files } = this.molInput;
+
+    if (supportTypes(files)) {
+      scanFile(Array.from(files), true);
+    } else {
+      const fileTypes = SUPPORTED_FILE_TYPES.join(', ').toUpperCase();
+      const notification = `Supported types: ${fileTypes}`;
+
+      showNotification(notification);
+    }
+
+    this.molInput.value = '';
+  }
+
+  scanFilesForReactions() {
+    const { showNotification, scanFile } = this.props;
+    const { files } = this.reactionInput;
+
+    if (supportTypes(files)) {
+      scanFile(Array.from(files), false);
+    } else {
+      const fileTypes = SUPPORTED_FILE_TYPES.join(', ').toUpperCase();
+      const notification = `Supported types: ${fileTypes}`;
+
+      showNotification(notification);
+    }
+
+    this.reactionInput.value = '';
+  }
+
+  updateReagents({ value, type }) {
+    const { updateReagents } = this.props;
+    const { selectedReactionId } = this.state;
+
+    const newSmiles = value.split(',');
+    const selectedType = `selected${type[0].toUpperCase()}${type.substring(1)}`;
+    const selectedSmiles = this.state[selectedType];
+
+    const removedSmiles = selectedSmiles.filter(smi => !newSmiles.includes(smi));
+    const addedSmiles = newSmiles.filter(smi => !selectedSmiles.includes(smi));
+
+    const updateInfo = { add: addedSmiles, remove: removedSmiles };
+    updateReagents(selectedReactionId, updateInfo);
+  }
+
+  clickUploadMolecule() {
+    this.molInput.click();
+    document.getElementById('chemscanner-scan-file-dd').click();
+  }
+
+  clickUploadReaction() {
+    this.reactionInput.click();
+    document.getElementById('chemscanner-scan-file-dd').click();
+  }
+
+  changeScannedFileView() {
+    this.props.changeScannedFileView();
+  }
+
+  changeAbbreviationView() {
+    this.props.changeAbbreviationView();
+  }
+
+  changeFileStorageView() {
+    this.props.changeFileStorageView();
+  }
+
+  changeArchivedManagementView() {
+    this.props.changeArchivedManagementView();
+  }
+
+  render() {
+    const { cleanUp } = this.props;
+    const { disabled, selectedReagents, selectedSolvents } = this.state;
+
+    const helpPopover = <HelpPopover style={{ maxWidth: '800px' }} />;
+
+    return (
+      <div className="chemscanner-menu">
+        <OverlayTrigger
+          trigger="click"
+          placement="left"
+          rootClose
+          overlay={helpPopover}
+        >
+          <Button style={{ position: 'absolute', right: '35px', top: '10px' }}>
+            <i className="fa fa-question-circle" />
+          </Button>
+        </OverlayTrigger>
+        <NotificationContainer />
+        <input
+          type="file"
+          multiple="multiple"
+          style={{ display: 'none' }}
+          ref={(molInput) => { this.molInput = molInput; }}
+          onChange={this.scanFilesForMolecules}
+        />
+        <input
+          type="file"
+          multiple="multiple"
+          style={{ display: 'none' }}
+          ref={(reactionInput) => { this.reactionInput = reactionInput; }}
+          onChange={this.scanFilesForReactions}
+        />
+        <ButtonGroup>
+          <DropdownButton
+            title="Scan File"
+            id="chemscanner-scan-file-dd"
+          >
+            <MenuItem className="chemscanner-menu-item" onSelect={this.clickUploadReaction}>
+              Scan for reactions
+            </MenuItem>
+            <MenuItem className="chemscanner-menu-item" onSelect={this.clickUploadMolecule}>
+              Scan for molecules
+            </MenuItem>
+          </DropdownButton>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button onClick={cleanUp}>Clean Up</Button>
+        </ButtonGroup>
+        <div style={{ width: '160px' }}>
+          <SmiSelect
+            disabled={disabled}
+            obj={solvents}
+            type="solvents"
+            value={selectedSolvents}
+            onSelect={this.updateReagents}
+          />
+        </div>
+        <div style={{ width: '200px' }}>
+          <SmiSelect
+            disabled={disabled}
+            obj={allReagents}
+            onSelect={this.updateReagents}
+            value={selectedReagents}
+            type="reagents"
+            optionHeight={80}
+          />
+        </div>
+        <ButtonGroup style={{ marginRight: '5px' }}>
+          <DropdownButton title="Export" id="chemscanner-export-dd">
+            <MenuItem eventKey="1" onSelect={this.exportCml}>CML</MenuItem>
+            <MenuItem eventKey="2" onSelect={this.exportExcel}>Excel</MenuItem>
+          </DropdownButton>
+        </ButtonGroup>
+        <ButtonGroup>
+          <DropdownButton title="View" id="chemscanner-export-dd">
+            <MenuItem
+              eventKey="1"
+              onSelect={this.changeScannedFileView}
+            >
+              Scanned Files
+            </MenuItem>
+            <MenuItem
+              eventKey="2"
+              onSelect={this.changeAbbreviationView}
+            >
+              Abbreviation/Superatom
+            </MenuItem>
+            <MenuItem
+              eventKey="3"
+              onSelect={this.changeFileStorageView}
+            >
+              File Storage
+            </MenuItem>
+            <MenuItem
+              eventKey="4"
+              onSelect={this.changeArchivedManagementView}
+            >
+              Archived Management
+            </MenuItem>
+          </DropdownButton>
+        </ButtonGroup>
+      </div>
+    );
+  }
+}
+
+HeaderMenu.propTypes = {
+  reactions: PropTypes.instanceOf(List).isRequired,
+  molecules: PropTypes.instanceOf(List).isRequired,
+  scanFile: PropTypes.func.isRequired,
+  showNotification: PropTypes.func.isRequired,
+  cleanUp: PropTypes.func.isRequired,
+  changeScannedFileView: PropTypes.func.isRequired,
+  changeAbbreviationView: PropTypes.func.isRequired,
+  changeFileStorageView: PropTypes.func.isRequired,
+  changeArchivedManagementView: PropTypes.func.isRequired,
+  updateReagents: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/HelpPopover.js b/app/packs/src/components/chemscanner/components/HelpPopover.js
new file mode 100644
index 000000000..2075d9746
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/HelpPopover.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Popover } from 'react-bootstrap';
+
+const HelpPopover = props => (
+  <Popover id="chemscanner-help-popover" title="How to Use" {...props} >
+    <strong>Scan File</strong>
+    <p>
+      Retrieve reaction(s)/molecule(s) from file(s).
+      Current support file types: CDX, CDXML, DOC, DOCX, ZIP.
+    </p>
+    <strong>Clean Up</strong>
+    <p>
+      Clean up molecule(s) structure.
+      All structures will be cleaned up if no molecule(s)/reaction(s) are selected.
+    </p>
+    <strong>Export</strong>
+    <p>
+      Export selected elements to CML or Excel.
+      All elements will be exported if none are selected.
+    </p>
+    <strong>Add solvents/reagents <i><b>(Only for logged-in users)</b></i></strong>
+    <p>
+      Solvents/Reagents from the list will be added to the selected reaction(s).
+    </p>
+    <strong>View</strong>
+    <p>
+      Switching View between abbreviations/superatoms management,
+      uploaded file storage management and scanned elements.
+    </p>
+    <ul>
+      <li><b>Scanned Files:</b> View scanned molecules/reactions</li>
+      <li>
+        <b>Abbreviation/Superatom:</b> Abbreviations and superatoms management.
+        <b> Only logged-in users can edit</b>
+      </li>
+      <li>
+        <b>File Storage:</b> Uploaded files, scanned files management.
+        <b> Only for logged-in users</b>
+      </li>
+    </ul>
+  </Popover>
+);
+
+export default HelpPopover;
diff --git a/app/packs/src/components/chemscanner/components/ImportModal.js b/app/packs/src/components/chemscanner/components/ImportModal.js
new file mode 100644
index 000000000..02afc7054
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ImportModal.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, ControlLabel,
+  FormControl, FormGroup, Modal
+} from 'react-bootstrap';
+
+import TreeSelect from 'antd/lib/tree-select';
+
+export default class ImportModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      newLabel: null,
+      options: [],
+      selected: null,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onSelectChange = this.onSelectChange.bind(this);
+    this.handleImport = this.handleImport.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchCollections().then((res) => {
+      this.setState({ options: res.all_as_tree });
+    });
+  }
+
+  onSelectChange(id) {
+    this.setState({ selected: id });
+  }
+
+  onChange(e) {
+    if (!e.target) return;
+
+    this.setState({ newLabel: e.target.value });
+  }
+
+  handleImport() {
+    const { selectedItems, closeModal, importData } = this.props;
+    const { selected, newLabel } = this.state;
+
+    closeModal();
+
+    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
+    const collection = { id: selected, newCollection: newLabel };
+    importData(data, collection);
+  }
+
+  render() {
+    const { show, selectedItems, closeModal } = this.props;
+
+    const showModal = show && selectedItems.length > 0;
+
+    const { options, newLabel, selected } = this.state;
+
+    const btnText = newLabel ? (
+      `Create collection "${newLabel}" and Import`
+    ) : (
+      'Import'
+    );
+
+    return (
+      <Modal show={showModal}>
+        <Modal.Header>
+          <Modal.Title>Import to Collection</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormGroup>
+            <ControlLabel>Select a Collection</ControlLabel>
+            <TreeSelect
+              treeData={options}
+              value={selected}
+              onChange={this.onSelectChange}
+              style={{ width: '100%' }}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>or Create a new Collection</ControlLabel>
+            <FormControl
+              type="text"
+              placeholder="-- Please insert collection name --"
+              onChange={this.onChange}
+            />
+          </FormGroup>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={closeModal}>Close</Button>
+          <Button
+            bsStyle="warning"
+            style={{ float: 'left' }}
+            onClick={this.handleImport}
+            disabled={!(newLabel || selected)}
+          >
+            {btnText}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ImportModal.propTypes = {
+  show: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.object),
+  fetchCollections: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  importData: PropTypes.func.isRequired,
+};
+
+ImportModal.defaultProps = {
+  show: false,
+  selectedItems: []
+};
diff --git a/app/packs/src/components/chemscanner/components/LoadingModal.js b/app/packs/src/components/chemscanner/components/LoadingModal.js
new file mode 100644
index 000000000..760a1470f
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/LoadingModal.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+
+const LoadingModal = ({ loading }) => (
+  <Modal className="loading-modal" animation show={loading}>
+    <i className="fa fa-refresh fa-spin fa-3x fa-fw" />
+  </Modal>
+);
+
+LoadingModal.propTypes = {
+  loading: PropTypes.bool,
+};
+
+LoadingModal.defaultProps = {
+  loading: false
+};
+
+export default LoadingModal;
diff --git a/app/packs/src/components/chemscanner/components/MainContent.js b/app/packs/src/components/chemscanner/components/MainContent.js
new file mode 100644
index 000000000..b6827ce36
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/MainContent.js
@@ -0,0 +1,185 @@
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Badge,
+  PanelGroup,
+  Panel
+} from 'react-bootstrap';
+
+import PreviewFileZoomPan from './PreviewFileZoomPan';
+import ScannedItemsContainer from '../containers/ScannedItemsContainer';
+import StructureEditorModal from '../../structure_editor/StructureEditorModal';
+
+import DeleteBtn from './DeleteBtn';
+
+const groupListByVersion = (list) => {
+  const hash = {};
+
+  list.forEach((el) => {
+    const version = el.get('version');
+    const val = hash[version] || [];
+    val.push(el);
+    hash[version] = val;
+  });
+
+  return Object.keys(hash).map(k => hash[k]);
+};
+
+const FileContent = ({ schemes, modal }) => (
+  <React.Fragment>
+    {schemes.map((scheme) => {
+      const uid = scheme.get('fileUuid');
+      const idx = scheme.get('index');
+      const imageURL = scheme.get('imageData');
+
+      const display = scheme.get('display');
+      if (!display) return <span key={`${uid}-${idx}`} />;
+
+      const objectQuery = display.substring(0, display.length - 1);
+      const extIds = scheme.get(`${objectQuery}ExtIds`).filter(i => i);
+
+      return (
+        <div key={`${uid}-${idx}`} id={`chemscanner-content-file-${uid}-${idx}`}>
+          <PreviewFileZoomPan
+            imageURL={imageURL}
+            duration={200}
+          />
+          <ScannedItemsContainer
+            schemeIdx={idx}
+            fileUid={uid}
+            extIds={extIds}
+            display={display}
+            modal={modal}
+          />
+        </div>
+      );
+    })}
+  </React.Fragment>
+);
+
+FileContent.propTypes = {
+  schemes: PropTypes.instanceOf(Array).isRequired,
+  modal: PropTypes.string.isRequired,
+};
+
+const MainContent = (props) => {
+  const {
+    files, schemes, reactions, molecules, modal, removeFile,
+    editingMoleculeId, saveMoleculeMdl, closeEditorModal
+  } = props;
+
+  const displayFile = files.filter((file) => {
+    const uid = file.get('uuid');
+
+    const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
+    const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
+
+    return fileReactions.size > 0 || fileMolecules.size > 0;
+  });
+
+  let mdl;
+  let showStructureEditor = !!editingMoleculeId;
+  if (showStructureEditor) {
+    const mIdx = molecules.findIndex(m => m.get('id') === editingMoleculeId);
+    if (mIdx === -1) {
+      showStructureEditor = false;
+    } else {
+      mdl = molecules.get(mIdx).get('mdl');
+    }
+  }
+  const structureEditor = (
+    <StructureEditorModal
+      showModal={showStructureEditor}
+      onSave={saveMoleculeMdl}
+      onCancel={closeEditorModal}
+      molfile={mdl}
+    />
+  );
+
+  if (displayFile.size === 0) return (<div>{structureEditor}</div>);
+
+  return (
+    <PanelGroup
+      defaultActiveKey="0"
+      className="chemscanner-files-list"
+      id="chemscanner-files-list"
+    >
+      {displayFile.map((file, index) => {
+        const name = file.get('fileName');
+        const uid = file.get('uuid');
+
+        const fileSchemes = schemes.filter(s => s.get('fileUuid') === uid)
+                                   .filter(s => s.get('display'));
+        const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
+        const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
+
+        if (fileReactions.size === 0 && fileMolecules.size === 0) {
+          return <span key={uid} />;
+        }
+
+        const schemesByVersion = groupListByVersion(fileSchemes);
+
+        return (
+          <React.Fragment key={uid}>
+            {schemesByVersion.map(schemesArr => (
+              <Panel
+                key={`${uid}-${schemesArr[0].get('version')}`}
+                eventKey={index}
+                defaultExpanded
+              >
+                {structureEditor}
+                <Panel.Heading
+                  style={{
+                    position: 'sticky',
+                    top: '0px',
+                    zIndex: 2,
+                    border: '1px solid #ddd',
+                    borderTopLeftRadius: '0px',
+                    borderTopRightRadius: '0px'
+                  }}
+                >
+                  <Panel.Title toggle>
+                    <Badge
+                      style={{ marginRight: '10px', marginTop: '-3px' }}
+                    >
+                      {schemesArr[0].get('version')}
+                    </Badge>
+                    {name}
+                    {
+                      <DeleteBtn
+                        param={{ fileUid: uid }}
+                        onClick={removeFile}
+                      />
+                    }
+                  </Panel.Title>
+                </Panel.Heading>
+                <Panel.Body collapsible>
+                  <FileContent
+                    file={file}
+                    schemes={schemesArr}
+                    modal={modal}
+                  />
+                </Panel.Body>
+              </Panel>
+            ))}
+          </React.Fragment>
+        );
+      })}
+    </PanelGroup>
+  );
+};
+
+MainContent.propTypes = {
+  files: PropTypes.instanceOf(Immutable.List).isRequired,
+  schemes: PropTypes.instanceOf(Immutable.List).isRequired,
+  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
+  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
+  editingMoleculeId: PropTypes.number.isRequired,
+  saveMoleculeMdl: PropTypes.func.isRequired,
+  closeEditorModal: PropTypes.func.isRequired,
+  modal: PropTypes.string.isRequired,
+  removeFile: PropTypes.func.isRequired,
+};
+
+export default MainContent;
diff --git a/app/packs/src/components/chemscanner/components/MoleculeDescription.js b/app/packs/src/components/chemscanner/components/MoleculeDescription.js
new file mode 100644
index 000000000..79f2bc5ba
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/MoleculeDescription.js
@@ -0,0 +1,129 @@
+import Immutable from 'immutable';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label, Button } from 'react-bootstrap';
+
+import EditableText from './EditableText';
+
+class PolymerLabel extends React.Component {
+  constructor() {
+    super();
+
+    this.onClickLabel = this.onClickLabel.bind(this);
+  }
+
+  onClickLabel() {
+    const { onClick, atomId } = this.props;
+    onClick(atomId);
+  }
+
+  render() {
+    const { label, isPolymer } = this.props;
+    if (!label) return <span />;
+
+    return (
+      <Button
+        bsSize="xsmall"
+        onClick={this.onClickLabel}
+        bsStyle={isPolymer ? 'info' : 'default'}
+      >
+        {label}
+      </Button>
+    );
+  }
+}
+
+PolymerLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  atomId: PropTypes.number.isRequired,
+  isPolymer: PropTypes.bool
+};
+
+PolymerLabel.defaultProps = {
+  isPolymer: false
+};
+
+function MoleculeDescription({
+  molecule, label, toggleAliasPolymer, updateMoleculeField
+}) {
+  const description = {
+    label: molecule.get('label'),
+    description: molecule.get('description'),
+  };
+  const mId = molecule.get('id');
+
+  const setPolymer = (atomIdx) => {
+    if (!mId) return;
+
+    toggleAliasPolymer(mId, atomIdx);
+  };
+
+  Object.keys(description).forEach((k) => {
+    const value = description[k];
+    if (!value) delete description[k];
+  });
+
+  const aliases = molecule.get('aliases').toJS();
+  const polymers = (
+    molecule.get('extendedMetadata').get('polymer') || Immutable.List()
+  ).toJS();
+
+  const descLength = Object.keys(description).length;
+  const aliasesLength = Object.keys(aliases).length;
+  if (descLength === 0 && aliasesLength === 0) return <span />;
+
+  let aliasList = <span />;
+  const aliasesKeys = Object.keys(aliases);
+  if (aliasesKeys.length > 0) {
+    aliasList = (
+      <li key="alias">
+        <b>alias: </b>
+        {aliasesKeys.map(k => (
+          <PolymerLabel
+            key={k}
+            label={aliases[k]}
+            onClick={setPolymer}
+            atomId={parseInt(k, 10)}
+            isPolymer={polymers.includes(parseInt(k, 10))}
+          />
+        ))}
+      </li>
+    );
+  }
+
+  let moleculeLabel = <span />;
+  if (label) moleculeLabel = <Label>{label}</Label>;
+
+  return (
+    <div style={{ maxWidth: '30%' }}>
+      {moleculeLabel}
+      <ul>
+        {Object.keys(description).map(k => (
+          <li key={k}>
+            <EditableText
+              field={k}
+              value={description[k].toString()}
+              id={molecule.get('id')}
+              onFinishUpdate={updateMoleculeField}
+            />
+          </li>
+        ))}
+        {aliasList}
+      </ul>
+    </div>
+  );
+}
+
+MoleculeDescription.propTypes = {
+  molecule: PropTypes.instanceOf(Immutable.Map).isRequired,
+  toggleAliasPolymer: PropTypes.func.isRequired,
+  updateMoleculeField: PropTypes.func.isRequired,
+  label: PropTypes.string
+};
+
+MoleculeDescription.defaultProps = {
+  label: '',
+};
+
+export default MoleculeDescription;
diff --git a/app/packs/src/components/chemscanner/components/MoleculeDetails.js b/app/packs/src/components/chemscanner/components/MoleculeDetails.js
new file mode 100644
index 000000000..eec1cf5c5
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/MoleculeDetails.js
@@ -0,0 +1,61 @@
+import { pascalize } from 'humps';
+import Immutable from 'immutable';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class MoleculeDetails extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      expand: false
+    };
+
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { expand } = this.state;
+    this.setState({ expand: !expand });
+  }
+
+  render() {
+    const { molecule } = this.props;
+    let details = molecule.get('details');
+    if (!details) return <span />;
+
+    details = details.toJS();
+    const detailsList = Object.keys(details).filter(k => details[k]).map(k => (
+      <li key={k}> <b>{`${pascalize(k)}: `}</b> {details[k]} </li>
+    ));
+
+    if (detailsList.length === 0) return <span />;
+
+    const detailsUl = <ul> {detailsList} </ul>;
+
+    const { expand } = this.state;
+    const iconClass = expand ? 'fa-angle-down' : 'fa-angle-right';
+    const iconText = expand ? 'Hide' : 'More';
+
+    return (
+      <div className="perkin-eln-details-container">
+        <div className="eln-click">
+          <button
+            className="expand-btn btn btn-xs"
+            onClick={this.onClick}
+          >
+            <i className={`fa ${iconClass} fa-lg`} />
+            &nbsp;&nbsp;
+            <span><b>{iconText} Details</b></span>
+          </button>
+        </div>
+        <div className="perkin-eln-details">
+          {expand ? detailsUl : <span />}
+        </div>
+      </div>
+    );
+  }
+}
+
+MoleculeDetails.propTypes = {
+  molecule: PropTypes.instanceOf(Immutable.Map).isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js b/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
new file mode 100644
index 000000000..c359f7fe8
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+
+const optimizeHeight = (imgWidth, imgHeight) => {
+  if (imgHeight < 300) return `${imgHeight}px`;
+
+  return imgWidth > imgHeight ? '300px' : '400px';
+};
+
+export default class PreviewFileZoomPan extends React.PureComponent {
+  constructor() {
+    super();
+
+    this.state = {
+      type: '',
+      imageContent: ''
+    };
+
+    this.setPreviewRef = (el) => {
+      this.previewDiv = el;
+    };
+
+    this.isSvg = true;
+    this.centeringImage = this.centeringImage.bind(this);
+    this.displayURL = this.displayURL.bind(this);
+  }
+
+  componentDidMount() {
+    // setTimeout(this.centeringImage, 300);
+
+    const { imageURL } = this.props;
+    this.displayURL(imageURL);
+  }
+
+  componentWillReceiveProps(newProps) {
+    const { imageURL } = newProps;
+    this.displayURL(imageURL);
+  }
+
+  componentDidUpdate() {
+    setTimeout(this.centeringImage, 300);
+  }
+
+  displayURL(url) {
+    fetch(url).then(r => r.blob()).then((blob) => {
+      const myReader = new FileReader();
+      const { type } = blob;
+
+      myReader.onload = () => {
+        this.setState({ imageContent: myReader.result, type }, this.centeringImage);
+      };
+
+      myReader.readAsText(blob);
+    });
+  }
+
+  centeringImage() {
+    const svgEl = this.previewDiv.querySelector('#svg-file-container');
+    const imgSelector = this.isSvg ? 'g > svg' : '#png-img-svg';
+    const imgEl = svgEl.querySelector(imgSelector);
+    if (!imgEl) return;
+
+    const svgWidth = Math.floor(svgEl.getBoundingClientRect().width);
+
+    let imgWidth;
+    let imgHeight;
+
+    if (this.isSvg) {
+      imgWidth = Math.floor(imgEl.getBoundingClientRect().width);
+      imgHeight = Math.floor(imgEl.getBoundingClientRect().height);
+      svgEl.setAttribute('viewBox', `0 0 ${imgWidth} ${imgHeight}`);
+
+      // SCALE SVG
+      const height = optimizeHeight(imgWidth, imgHeight);
+      svgEl.setAttribute('height', height);
+
+      return;
+    }
+
+    const dummyImg = this.previewDiv.querySelector('#dummy-img');
+    dummyImg.style.display = 'block';
+    imgWidth = window.getComputedStyle(dummyImg).getPropertyValue('width');
+    imgHeight = window.getComputedStyle(dummyImg).getPropertyValue('height');
+
+    // SCALE Picture
+    const intWidth = parseInt(imgWidth, 10);
+    const intHeight = parseInt(imgHeight, 10);
+    imgHeight = optimizeHeight(intWidth, intHeight);
+
+    dummyImg.style.display = 'none';
+
+    if (svgWidth > imgWidth) {
+      const xOffset = `${(svgWidth - imgWidth) / 2}`;
+      imgEl.setAttribute('x', xOffset);
+    } else {
+      imgEl.setAttribute('width', svgWidth);
+    }
+
+    imgEl.setAttribute('height', imgHeight);
+    svgEl.style.height = `${imgHeight}`;
+  }
+
+  render() {
+    const { duration } = this.props;
+    const { imageContent, type } = this.state;
+
+    if (imageContent.length === 0 || type.length === 0) return <span />;
+
+    let svg = imageContent;
+
+    if (type === 'image/png') {
+      this.isSvg = false;
+
+      svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <image id="png-img-svg" xlink:href="${imageContent}" width="100%" height="100%" />
+        </svg>
+      `;
+    } else {
+      svg = imageContent;
+    }
+
+    let dummyImg = (<span />);
+    if (!this.isSvg) {
+      dummyImg = (<img id="dummy-img" alt="" src={imageContent} />);
+    }
+
+    return (
+      <div
+        ref={this.setPreviewRef}
+        style={{
+          position: 'sticky',
+          top: '44px',
+          zIndex: 2,
+          background: 'white',
+        }}
+      >
+        {dummyImg}
+        <SvgFileZoomPan svg={svg} duration={duration} />
+      </div>
+    );
+  }
+}
+
+PreviewFileZoomPan.propTypes = {
+  imageURL: PropTypes.string.isRequired,
+  duration: PropTypes.number,
+};
+
+PreviewFileZoomPan.defaultProps = {
+  duration: 200,
+};
diff --git a/app/packs/src/components/chemscanner/components/ReactionDescription.js b/app/packs/src/components/chemscanner/components/ReactionDescription.js
new file mode 100644
index 000000000..ff6aa68ce
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ReactionDescription.js
@@ -0,0 +1,165 @@
+import Immutable from 'immutable';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
+import MoleculeDescription from './MoleculeDescription';
+import EditableText from './EditableText';
+
+export default class ReactionDescription extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.updateReactionField = this.updateReactionField.bind(this);
+    this.updateMoleculeField = this.updateMoleculeField.bind(this);
+  }
+
+  updateReactionField(id, field, value) {
+    this.props.updateItemField(id, 'reactions', field, value);
+  }
+
+  updateMoleculeField(id, field, value) {
+    this.props.updateItemField(id, 'molecules', field, value);
+  }
+
+  render() {
+    const {
+      reaction, reactants, reagents, solvents, products, toggleAliasPolymer
+    } = this.props;
+
+    const rDesc = {
+      description: reaction.get('description'),
+      temperature: reaction.get('temperature'),
+      time: reaction.get('time'),
+      yield: reaction.get('yield')
+    };
+
+    Object.keys(rDesc).forEach((k) => {
+      if (!rDesc[k]) delete rDesc[k];
+    });
+
+    const status = reaction.get('status');
+    let statusClass;
+    switch (status) {
+      case 'Failed':
+        statusClass = 'danger';
+        break;
+      case 'Planned': {
+        statusClass = 'info';
+        break;
+      }
+      default:
+        statusClass = 'success';
+    }
+    const statusLabel = <Label bsStyle={statusClass}>{status}</Label>;
+
+    const steps = reaction.get('steps').toJS();
+    const rId = reaction.get('externalId');
+
+    return (
+      <React.Fragment>
+        <div style={{ maxWidth: '30%' }}>
+          <Label>reaction</Label>
+          <ul>
+            <li key="scanned-reaction-status">
+              <b>status: </b>
+              {statusLabel}
+            </li>
+            {Object.keys(rDesc).map(k => (
+              <li key={k}>
+                <EditableText
+                  field={k}
+                  value={rDesc[k].toString()}
+                  id={reaction.get('id')}
+                  onFinishUpdate={this.updateReactionField}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+        {reactants.map((m, idx) => (
+          <MoleculeDescription
+            key={`reactant_${m.get('externalId')}`}
+            label={`Reactant ${idx + 1}`}
+            molecule={m}
+            toggleAliasPolymer={toggleAliasPolymer}
+            updateMoleculeField={this.updateMoleculeField}
+          />
+        ))}
+        {reagents.filter(m => m.get('externalId')).map((m, idx) => (
+          <MoleculeDescription
+            key={`reagent_${m.get('externalId')}`}
+            label={`Reagent ${idx + 1}`}
+            molecule={m}
+            toggleAliasPolymer={toggleAliasPolymer}
+            updateMoleculeField={this.updateMoleculeField}
+          />
+        ))}
+        {solvents.filter(m => m.get('externalId')).map((m, idx) => (
+          <MoleculeDescription
+            key={`solvent_${m.get('externalId')}`}
+            label={`Solvent ${idx + 1}`}
+            molecule={m}
+            toggleAliasPolymer={toggleAliasPolymer}
+            updateMoleculeField={this.updateMoleculeField}
+          />
+        ))}
+        {products.map((m, idx) => (
+          <MoleculeDescription
+            key={`product_${m.get('externalId')}`}
+            label={`Product ${idx + 1}`}
+            molecule={m}
+            toggleAliasPolymer={toggleAliasPolymer}
+            updateMoleculeField={this.updateMoleculeField}
+          />
+        ))}
+        {steps.map(step => (
+          <div
+            key={`reaction-${rId}-${step.stepNumber}`}
+            style={{ maxWidth: '40%' }}
+          >
+            <Label bsStyle="info">step {step.stepNumber}</Label>
+            <ul>
+              {
+                ['description', 'temperature', 'time'].map((prop) => {
+                  const val = step[prop];
+                  const key = `reaction-${rId}-step-${step.number}-${prop}`;
+                  if (!val || val === '\n') return <span key={key} />;
+
+                  return (
+                    <li key={key}>
+                      <EditableText
+                        field={prop}
+                        value={val}
+                        id={reaction.get('id')}
+                        onFinishUpdate={this.updateReactionField}
+                      />
+                    </li>
+                  );
+                })
+              }
+              <li key={`reaction-${rId}-step-${step.number}-reagents`}>
+                <b>reagents: </b>
+                <ul>
+                  {step.reagentSmiles.map(x => (
+                    <li key={`${rId}-${step.number}-${x}`}>{x}</li>
+                  ))}
+                </ul>
+              </li>
+            </ul>
+          </div>
+        ))}
+      </React.Fragment>
+    );
+  }
+}
+
+ReactionDescription.propTypes = {
+  reaction: PropTypes.instanceOf(Immutable.Map).isRequired,
+  reactants: PropTypes.instanceOf(Immutable.List).isRequired,
+  reagents: PropTypes.instanceOf(Immutable.List).isRequired,
+  solvents: PropTypes.instanceOf(Immutable.List).isRequired,
+  products: PropTypes.instanceOf(Immutable.List).isRequired,
+  toggleAliasPolymer: PropTypes.func.isRequired,
+  updateItemField: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/ReactionDetails.js b/app/packs/src/components/chemscanner/components/ReactionDetails.js
new file mode 100644
index 000000000..2bc9a3cd3
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ReactionDetails.js
@@ -0,0 +1,103 @@
+import { pascalize } from 'humps';
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Label } from 'react-bootstrap';
+
+export default class ReactionDetails extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      expand: false
+    };
+
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { expand } = this.state;
+    this.setState({ expand: !expand });
+  }
+
+  render() {
+    const { reaction } = this.props;
+    const details = reaction.get('details').toJS() || {};
+
+    const reactionDetails = Object.keys(details).reduce((acc, dKey) => {
+      const arr = details[dKey];
+      if (arr.length === 0) return acc;
+
+      const keyList = arr.map((detail, idx) => (
+        <div key={`${dKey}-${idx}`}>
+          <Label>{pascalize(dKey)}</Label>
+          <ul>
+            {Object.keys(detail).filter(k => detail[k]).map(k => (
+              <li key={k}> <b>{`${pascalize(k)}: `}</b> {detail[k]} </li>
+            ))}
+          </ul>
+        </div>
+      ));
+
+      return acc.concat(keyList);
+    }, []);
+
+    const detailsList = [
+      'reactants', 'reagents', 'solvents', 'products'
+    ].reduce((acc, group) => {
+      const groupMol = this.props[group];
+      if (!groupMol || groupMol.size === 0) return acc;
+
+      const keyList = groupMol.reduce((mAcc, m, idx) => {
+        let mDetails = m.get('details');
+        if (!mDetails) return mAcc;
+
+        mDetails = mDetails.toJS();
+        const mDetailEls = Object.keys(mDetails).filter(k => mDetails[k]).map(k => (
+          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetails[k]} </li>
+        ));
+        if (mDetailEls.length === 0) return mAcc;
+
+        mAcc.push((
+          <div key={m.get('id')}>
+            <Label>{`${group.slice(0, -1)} ${idx + 1}`}</Label>
+            <ul>
+              {mDetailEls}
+            </ul>
+          </div>
+        ));
+
+        return mAcc;
+      }, []);
+
+      return acc.concat(keyList);
+    }, reactionDetails);
+
+    if (detailsList.length === 0) return <span />;
+
+    const { expand } = this.state;
+    const iconClass = expand ? 'fa-angle-down' : 'fa-angle-right';
+    const iconText = expand ? 'Hide' : 'More';
+
+    return (
+      <div className="perkin-eln-details-container">
+        <div className="eln-click">
+          <button
+            className="expand-btn btn btn-xs"
+            onClick={this.onClick}
+          >
+            <i className={`fa ${iconClass} fa-lg`} />
+            &nbsp;&nbsp;
+            <span><b>{iconText} Details</b></span>
+          </button>
+        </div>
+        <div className="perkin-eln-details">
+          {expand ? detailsList : <span />}
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactionDetails.propTypes = {
+  reaction: PropTypes.instanceOf(Immutable.Map).isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/Root.js b/app/packs/src/components/chemscanner/components/Root.js
new file mode 100644
index 000000000..17e4d5428
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/Root.js
@@ -0,0 +1,103 @@
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import scriptLoader from 'react-async-script-loader';
+import { Grid, Row, Col } from 'react-bootstrap';
+
+import AbbreviationContainer from 'src/apps/chemscanner/containers/AbbreviationContainer';
+import HeaderMenuContainer from 'src/apps/chemscanner/containers/HeaderMenuContainer';
+import MainContentContainer from 'src/apps/chemscanner/containers/MainContentContainer';
+import LoadingModalContainer from 'src/apps/chemscanner/containers/LoadingModalContainer';
+
+class Root extends Component {
+  componentDidMount() {
+    const {
+      isScriptLoaded, isScriptLoadSucceed, attachEditor,
+      getCurrentVersion
+    } = this.props;
+
+    getCurrentVersion();
+
+    const check = isScriptLoaded && isScriptLoadSucceed;
+    if (!check) return;
+
+    attachEditor('chemscanner-cdjs-container');
+  }
+
+  UNSAFE_componentWillReceiveProps({
+    isScriptLoaded,
+    isScriptLoadSucceed,
+    attachEditor
+  }) {
+    const check = (
+      isScriptLoaded && isScriptLoadSucceed && !this.props.isScriptLoaded
+    );
+    if (!check) return;
+
+    attachEditor('chemscanner-cdjs-container');
+  }
+
+  render() {
+    const { modal, ui } = this.props;
+    const view = ui.get('view');
+
+    let viewContainer = <span />;
+    switch (view) {
+      case types.VIEW_SCANNED_FILES:
+        viewContainer = <MainContentContainer modal={modal} />;
+        break;
+      case types.VIEW_ABBREVIATION:
+        viewContainer = <AbbreviationContainer />;
+        break;
+      case types.VIEW_FILE_STORAGE:
+        viewContainer = <FileStorageContainer />;
+        break;
+      case types.VIEW_ARCHIVED_MANAGEMENT:
+        viewContainer = <ArchivedManagementContainer />;
+        break;
+      default:
+        break;
+    }
+
+    return (
+      <Grid fluid className="chemscanner-grid">
+        <div id="chemscanner-cdjs-container" />
+        <Row style={{ position: 'relative', zIndex: '9' }}>
+          <Col xs={18} md={12}>
+            <HeaderMenuContainer />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={18} md={12} className="chemscanner-files-contents">
+            {abbView ?
+              <AbbreviationContainer /> :
+              <MainContentContainer modal={modal} />
+            }
+          </Col>
+        </Row>
+        <Row>
+          <LoadingModalContainer />
+          <ImportModalContainer />
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+Root.propTypes = {
+  ui: PropTypes.instanceOf(Immutable.Map).isRequired,
+  isScriptLoaded: PropTypes.bool.isRequired,
+  isScriptLoadSucceed: PropTypes.bool.isRequired,
+  attachEditor: PropTypes.func.isRequired,
+  getCurrentVersion: PropTypes.func.isRequired,
+  modal: PropTypes.string
+};
+
+Root.defaultProps = {
+  modal: ''
+};
+
+const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
+// const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
+
+export default scriptLoader(scriptUrl)(Root);
diff --git a/app/packs/src/components/chemscanner/components/ScannedMolecules.js b/app/packs/src/components/chemscanner/components/ScannedMolecules.js
new file mode 100644
index 000000000..a7d34944f
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ScannedMolecules.js
@@ -0,0 +1,150 @@
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+
+import DeleteBtn from './DeleteBtn';
+import SelectBtn from './SelectBtn';
+import CopyClipboardBtn from './CopyClipboardBtn';
+import EditMdlBtn from './EditMdlBtn';
+import MoleculeDescription from './MoleculeDescription';
+import MoleculeDetails from './MoleculeDetails';
+
+import { sortMoleculesByClone } from '../utils';
+
+const renderSvg = (svg) => {
+  const newSvg = svg.replace(/height="[^"]+"/, '').replace(/width="[^"]+"/, 'width="100%"');
+  return newSvg.replace(/height='[^']+'/, '').replace(/width='[^']+'/, 'width="100%"');
+};
+
+export default class ScannedMolecules extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.editComment = this.editComment.bind(this);
+    this.removeItem = this.removeItem.bind(this);
+    this.selectItem = this.selectItem.bind(this);
+    this.updateMoleculeField = this.updateMoleculeField.bind(this);
+  }
+
+  selectItem(id) {
+    const { fileUid, schemeIdx, selectItem } = this.props;
+    selectItem('molecules', fileUid, schemeIdx, id);
+  }
+
+  removeItem({ id }) {
+    const { fileUid, schemeIdx, removeItem } = this.props;
+    removeItem('molecules', fileUid, schemeIdx, id);
+  }
+
+  editComment(schemeIdx, id, comment) {
+    const { fileUid, editComment } = this.props;
+    editComment('molecules', fileUid, schemeIdx, id, comment);
+  }
+
+  updateMoleculeField(id, field, value) {
+    this.props.updateItemField(id, 'molecules', field, value);
+  }
+
+  render() {
+    const {
+      fileUid, schemeIdx, extIds, modal, molecules,
+      toggleAliasPolymer, editMoleculeMdl
+    } = this.props;
+
+    const externalIds = extIds.filter(id => id);
+    const moleculeList = molecules.filter(m => (
+      m.get('fileUuid') === fileUid &&
+        m.get('schemeIdx') === schemeIdx &&
+        !m.get('abbreviation') &&
+        externalIds.includes(m.get('externalId'))
+    ));
+    if (moleculeList.length === 0) return <span />;
+
+    const container = document.getElementById(modal);
+
+    const sortedMoleculeList = sortMoleculesByClone(moleculeList);
+
+    return (
+      <ListGroup>
+        {sortedMoleculeList.map((molecule, idx) => {
+          const id = molecule.get('externalId');
+          const mId = molecule.get('id');
+          const selected = molecule.get('selected') || false;
+          const className = `scanned-item ${selected ? 'selected-item' : ''}`;
+
+          let childrenStyle = {};
+          const cloneFrom = molecule.get('cloneFrom');
+          if (cloneFrom && idx > 0) {
+            const prevMolecule = sortedMoleculeList.get(idx - 1);
+            const prevExtId = prevMolecule.get('externalId');
+            const prevCloneFrom = prevMolecule.get('cloneFrom');
+
+            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
+              childrenStyle = {
+                marginLeft: '20px', border: '2px dashed #1d5e83'
+              };
+            }
+          }
+
+          const mdlOptions = [{ title: 'Molecule', value: mId }];
+
+          return (
+            <ListGroupItem
+              key={`${fileUid}-${id}`}
+              className={className}
+              style={childrenStyle}
+            >
+              <DeleteBtn pullLeft param={{ id }} onClick={this.removeItem} />
+              <CopyClipboardBtn
+                identifier={{ fileUid, id }}
+                smi={molecule.get('canoSmiles')}
+                mdl={molecule.get('mdl')}
+                inchi={molecule.get('inchistring') || ''}
+                inchiKey={molecule.get('inchikey') || ''}
+                container={container}
+              />
+              <EditMdlBtn
+                openKetcher={editMoleculeMdl}
+                options={mdlOptions}
+                identifier={mId}
+              />
+              <SelectBtn
+                itemId={id}
+                selected={selected}
+                schemeIdx={schemeIdx}
+                onClick={this.selectItem}
+              />
+              <div className="scanned-molecule-desc">
+                <div>
+                  <SvgFileZoomPan svg={renderSvg(molecule.get('svg'))} duration={200} />
+                </div>
+                <MoleculeDescription
+                  molecule={molecule}
+                  toggleAliasPolymer={toggleAliasPolymer}
+                  updateMoleculeField={this.updateMoleculeField}
+                />
+              </div>
+              <MoleculeDetails molecule={molecule} />
+            </ListGroupItem>
+          );
+        })}
+      </ListGroup>
+    );
+  }
+}
+
+ScannedMolecules.propTypes = {
+  modal: PropTypes.string.isRequired,
+  fileUid: PropTypes.string.isRequired,
+  schemeIdx: PropTypes.number.isRequired,
+  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
+  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
+  removeItem: PropTypes.func.isRequired,
+  selectItem: PropTypes.func.isRequired,
+  editComment: PropTypes.func.isRequired,
+  toggleAliasPolymer: PropTypes.func.isRequired,
+  updateItemField: PropTypes.func.isRequired,
+  editMoleculeMdl: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/ScannedReactions.js b/app/packs/src/components/chemscanner/components/ScannedReactions.js
new file mode 100644
index 000000000..d04e4c254
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/ScannedReactions.js
@@ -0,0 +1,200 @@
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+
+import DeleteBtn from './DeleteBtn';
+import SelectBtn from './SelectBtn';
+import CopyClipboardBtn from './CopyClipboardBtn';
+import EditMdlBtn from './EditMdlBtn';
+import ReactionDescription from './ReactionDescription';
+import ReactionDetails from './ReactionDetails';
+
+import { getReactionGroups } from '../reactionUtils';
+
+const mapListMdl = arr => arr.map(m => `$MOL\n${m.get('mdl')}`).join('\n');
+
+const getMdlOptions = (groups, name) => (
+  groups.reduce((arr, m, idx) => (
+    arr.concat([{ title: `${name} ${idx + 1}`, value: m.get('id') }])
+  ), [])
+);
+
+export default class ScannedReactions extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.removeItem = this.removeItem.bind(this);
+    this.selectItem = this.selectItem.bind(this);
+  }
+
+  selectItem(id) {
+    const { fileUid, schemeIdx, selectItem } = this.props;
+    selectItem('reactions', fileUid, schemeIdx, id);
+  }
+
+  removeItem({ id }) {
+    const { fileUid, schemeIdx, removeItem } = this.props;
+    removeItem('reactions', fileUid, schemeIdx, id);
+  }
+
+  editComment(id, comment) {
+    const { fileUid, schemeIdx, editComment } = this.props;
+    editComment('reactions', fileUid, schemeIdx, id, comment);
+  }
+
+  render() {
+    const {
+      fileUid, schemeIdx, extIds, modal, reactions, molecules,
+      updateItemField, toggleAliasPolymer, editMoleculeMdl
+    } = this.props;
+
+    const displayReactions = reactions.filter(r => (
+      r.get('fileUuid') === fileUid &&
+        r.get('schemeIdx') === schemeIdx &&
+        extIds.includes(r.get('externalId'))
+    ));
+
+    if (displayReactions.length === 0) return <span />;
+
+    const container = document.getElementById(modal);
+
+    return (
+      <ListGroup>
+        {displayReactions.map((reaction, idx) => {
+          const {
+            reactants, reagents, solvents, products
+          } = getReactionGroups(reaction, molecules);
+
+          const listInchi = [reactants, reagents, solvents, products].reduce((arr, group) => (
+            arr.concat(group.map(m => m.get('inchistring')).toArray())
+          ), []).join('\n');
+
+          const listInchiKey = [reactants, reagents, solvents, products].reduce((arr, group) => (
+            arr.concat(group.map(m => m.get('inchikey')).toArray())
+          ), []).join('\n');
+
+          const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
+          const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
+          const reagentSmiles = reagents.concat(solvents).map(m => (
+            m.get('canoSmiles')
+          )).join('.');
+
+          const reactionSmiles = [
+            reactantSmiles,
+            reagentSmiles,
+            productSmiles,
+          ].join('>');
+
+          const rId = reaction.get('externalId');
+          const reactantSize = reactants.size + reagents.size;
+
+          const listMDL = [
+            mapListMdl(reactants),
+            mapListMdl(reagents),
+            mapListMdl(solvents),
+            mapListMdl(products)
+          ].join('\n');
+
+          let editMdlOptions = [];
+          editMdlOptions = editMdlOptions.concat(getMdlOptions(reactants, 'Reactant'));
+          editMdlOptions = editMdlOptions.concat(getMdlOptions(reagents, 'Reagent'));
+          editMdlOptions = editMdlOptions.concat(getMdlOptions(solvents, 'Solvent'));
+          editMdlOptions = editMdlOptions.concat(getMdlOptions(products, 'Product'));
+
+          const rxn = `$RXN\n\n\n\n  ${reactantSize} ${products.size}\n${listMDL}`;
+          const selected = reaction.get('selected') || false;
+          const selectedClassName = selected ? 'selected-item' : '';
+
+          const rSvg = reaction.get('svg');
+          const viewBox = rSvg.match(/viewBox="(.*)"/)[1];
+          let svgDivStyle = {};
+          if (viewBox) {
+            const svgWidth = parseInt(viewBox.split(' ')[2], 10) || -1;
+            if (svgWidth > 0) svgDivStyle = { width: (svgWidth * (2 / 3)) };
+          }
+
+          let childrenStyle = {};
+          const cloneFrom = reaction.get('cloneFrom');
+          if (cloneFrom && idx > 0) {
+            const prevReaction = displayReactions.get(idx - 1);
+            const prevExtId = prevReaction.get('externalId');
+            const prevCloneFrom = prevReaction.get('cloneFrom');
+
+            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
+              childrenStyle = {
+                marginLeft: '20px', border: '2px dashed #1d5e83'
+              };
+            }
+          }
+
+          return (
+            <ListGroupItem
+              key={`${fileUid}-${rId}`}
+              className={`scanned-item ${selectedClassName}`}
+              style={childrenStyle}
+            >
+              <DeleteBtn param={{ id: rId }} onClick={this.removeItem} pullLeft />
+              <CopyClipboardBtn
+                identifier={{ fileUid, id: rId }}
+                smi={reactionSmiles}
+                mdl={rxn}
+                inchi={listInchi}
+                inchiKey={listInchiKey}
+                container={container}
+              />
+              <EditMdlBtn
+                openKetcher={editMoleculeMdl}
+                options={editMdlOptions}
+                identifier={reaction.get('id')}
+              />
+              <SelectBtn
+                itemId={rId}
+                schemeIdx={schemeIdx}
+                selected={selected}
+                onClick={this.selectItem}
+              />
+              <div className="scanned-reaction-desc">
+                <div style={svgDivStyle}>
+                  <SvgFileZoomPan svg={rSvg} duration={200} />
+                </div>
+                <ReactionDescription
+                  reaction={reaction}
+                  reactants={reactants}
+                  reagents={reagents}
+                  solvents={solvents}
+                  products={products}
+                  toggleAliasPolymer={toggleAliasPolymer}
+                  updateItemField={updateItemField}
+                />
+              </div>
+              <ReactionDetails
+                reaction={reaction}
+                reactants={reactants}
+                reagents={reagents}
+                solvents={solvents}
+                products={products}
+              />
+            </ListGroupItem>
+          );
+        })}
+      </ListGroup>
+    );
+  }
+}
+
+ScannedReactions.propTypes = {
+  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
+  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
+  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
+  schemeIdx: PropTypes.number.isRequired,
+  modal: PropTypes.string.isRequired,
+  fileUid: PropTypes.string.isRequired,
+  removeItem: PropTypes.func.isRequired,
+  selectItem: PropTypes.func.isRequired,
+  editComment: PropTypes.func.isRequired,
+  toggleAliasPolymer: PropTypes.func.isRequired,
+  updateItemField: PropTypes.func.isRequired,
+  editMoleculeMdl: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/chemscanner/components/SelectBtn.js b/app/packs/src/components/chemscanner/components/SelectBtn.js
new file mode 100644
index 000000000..4d31c68d9
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/SelectBtn.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class SelectBtn extends React.Component {
+  constructor() {
+    super();
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { itemId, onClick } = this.props;
+    onClick(itemId);
+  }
+
+  render() {
+    const { selected } = this.props;
+    const className = selected ? 'fa-check-circle' : 'fa-check-circle-o';
+
+    return (
+      <button
+        className="left-btn btn btn-xs"
+        onClick={this.onClick}
+      >
+        <i className={`fa ${className}`} />
+      </button>
+    );
+  }
+}
+
+SelectBtn.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  itemId: PropTypes.number.isRequired,
+  schemeIdx: PropTypes.number.isRequired,
+  selected: PropTypes.bool.isRequired
+};
diff --git a/app/packs/src/components/chemscanner/components/SmiSelect.js b/app/packs/src/components/chemscanner/components/SmiSelect.js
new file mode 100644
index 000000000..f7260235d
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/SmiSelect.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import VirtualizedSelect from 'react-virtualized-select';
+
+export default class SmiSelect extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  onSelect(selected) {
+    const { onSelect, type } = this.props;
+    onSelect({ value: selected, type });
+  }
+
+  render() {
+    const {
+      obj, type, disabled, value
+    } = this.props;
+    const options = [];
+    const editedSmi = [];
+
+    Object.keys(obj).forEach((k) => {
+      const smi = obj[k];
+      const opt = { label: k, value: smi };
+      options.push(opt);
+
+      if (value.indexOf(smi) > -1) {
+        editedSmi.push(smi);
+      }
+    });
+
+    return (
+      <VirtualizedSelect
+        multi
+        disabled={disabled}
+        onChange={this.onSelect}
+        options={options}
+        placeholder={`Add ${type}`}
+        simpleValue
+        {...this.props}
+        value={editedSmi.join(',')}
+      />
+    );
+  }
+}
+
+SmiSelect.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  obj: PropTypes.object.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.string),
+  disabled: PropTypes.bool,
+  onSelect: PropTypes.func.isRequired
+};
+
+SmiSelect.defaultProps = {
+  type: '',
+  value: [],
+  disabled: true
+};
diff --git a/app/packs/src/components/chemscanner/components/fileStorageUtils.js b/app/packs/src/components/chemscanner/components/fileStorageUtils.js
new file mode 100644
index 000000000..ead4d38f2
--- /dev/null
+++ b/app/packs/src/components/chemscanner/components/fileStorageUtils.js
@@ -0,0 +1,302 @@
+import { List, Map } from 'immutable';
+
+const selectFileChildren = (rowNode) => {
+  const { data, selected } = rowNode;
+
+  const isFileSelected = data.type === 'File';
+  if (!isFileSelected) return;
+
+  const { childrenAfterGroup } = rowNode;
+  if (!childrenAfterGroup) return;
+
+  const childrenSchemes = rowNode.childrenAfterGroup.filter(node => (
+    node.data.type === 'Scheme'
+  ));
+  const childrenFiles = rowNode.childrenAfterGroup.filter(node => (
+    node.data.type === 'File'
+  ));
+
+  childrenSchemes.forEach(node => node.setSelected(selected));
+  childrenFiles.forEach((node) => {
+    node.setSelected(selected);
+    selectFileChildren(node);
+  });
+};
+
+export const onRowSelected = (event) => {
+  selectFileChildren(event.node);
+};
+
+export const versionGetter = n => (n.data.type === 'Item' ? '' : n.data.version);
+export const fileNameGetter = n => (n.data[`${n.data.type.toLowerCase()}Name`]);
+
+export const getNodeChildDetails = (rowItem) => {
+  const { children, fileName, type } = rowItem;
+  if (!children || children.length === 0) return null;
+
+  let { expanded } = rowItem;
+  if (expanded == null) expanded = !(type === 'ItemSummary');
+
+  return {
+    group: true,
+    expanded,
+    children,
+    key: fileName
+  };
+};
+
+const addChildren = (file, child) => {
+  const children = file.children || [];
+  children.push(child);
+
+  // eslint-disable-next-line no-param-reassign
+  file.children = children;
+};
+
+const buildFileTree = (files) => {
+  const fileMap = {};
+  const jsFiles = [];
+
+  files.forEach((immuFile) => {
+    const file = immuFile.toJS();
+    file.type = 'File';
+
+    const extMData = file.extendedMetadata;
+    let expanded;
+    // eslint-disable-next-line prefer-destructuring
+    if (extMData) expanded = extMData.expanded;
+    if (expanded == null) expanded = true;
+    file.expanded = expanded;
+
+    const { id } = file;
+    fileMap[id] = file;
+
+    jsFiles.push(file);
+  });
+
+  jsFiles.forEach((file) => {
+    const { parentId } = file;
+    if (!parentId) return;
+
+    const parent = fileMap[parentId];
+    if (parent.display && !file.display) {
+      /* eslint-disable no-param-reassign */
+      file.display = parent.display;
+      file.show = parent.show;
+
+      const { expanded } = parent;
+      if (expanded != null) file.expanded = expanded;
+      /* eslint-enable no-param-reassign */
+    }
+
+    addChildren(parent, file);
+  });
+
+  const fileTree = Object.keys(fileMap).sort((a, b) => b - a).reduce((arr, fileId) => {
+    const file = fileMap[fileId];
+    const { parentId } = file;
+    if (parentId) return arr;
+
+    arr.push(file);
+    return arr;
+  }, []);
+
+  return { fileTree, fileMap };
+};
+
+const buildFileSchemeTree = (fileTree, fileMap, schemes, reactions, molecules) => {
+  const schemeArr = [];
+
+  schemes.forEach((immuScheme) => {
+    const scheme = immuScheme.toJS();
+
+    const extMData = immuScheme.get('extendedMetadata');
+    let expanded;
+    if (extMData) expanded = extMData.get('expanded');
+    if (expanded == null) expanded = true;
+    scheme.expanded = expanded;
+
+    schemeArr.push(scheme);
+
+    const { version, imageData } = scheme;
+    scheme.type = 'Scheme';
+
+    const file = fileMap[scheme.sourceId];
+    if (!file) return;
+
+    const { fileName } = file;
+
+    const noFileSchemes = schemes.filter(s => s.get('sourceId') === file.id).size;
+    file.schemeCount = noFileSchemes;
+    file.version = version;
+
+    let leaf = file;
+    if (noFileSchemes > 1) {
+      scheme.schemeName = `Scheme ${scheme.index + 1}`;
+      scheme.fileName = fileName;
+      addChildren(file, scheme);
+      leaf = scheme;
+    } else if (noFileSchemes === 1) {
+      file.schemeId = scheme.id;
+      file.schemeExtendedMetadata = scheme.extendedMetadata;
+      file.imageData = imageData;
+
+      if (scheme.show) file.show = true;
+    }
+
+    const type = 'Item';
+    const schemeMolecules = molecules.filter(m => m.get('schemeId') === scheme.id);
+    const schemeReactions = reactions.filter(r => r.get('schemeId') === scheme.id);
+
+    const approvedReactions = schemeReactions.filter(r => r.get('isApproved'));
+    const approvedMolecules = schemeMolecules.filter(m => m.get('isApproved'));
+    if (approvedReactions.size === schemeReactions.size &&
+        approvedMolecules.size === schemeMolecules.size) {
+      scheme.isApproved = true;
+    } else {
+      scheme.isApproved = false;
+    }
+
+    const importedReactions = schemeReactions.filter(r => r.get('importedId'));
+    const importedMolecules = schemeMolecules.filter(m => m.get('importedId'));
+    if (importedReactions.size === schemeReactions.size &&
+        importedMolecules.size === schemeMolecules.size) {
+      scheme.isImported = true;
+    } else {
+      scheme.isImported = false;
+    }
+
+    let moleculesWarnings = [];
+    const moleculeArr = [];
+    schemeMolecules.forEach((m) => {
+      const moleculeRow = {
+        id: m.get('id'),
+        type,
+        itemType: 'Molecule',
+        fileName,
+        isApproved: m.get('isApproved'),
+        isImported: !!m.get('importedId'),
+        itemName: `Molecule ${m.get('id')}`,
+      };
+
+      const extData = (m.get('extendedMetadata') || Map());
+      const warnings = (extData.get('warnings') || List()).toJS();
+      if (warnings.length > 0) {
+        const mWarnings = warnings.map(w => `Molecule ${m.get('id')}: ${w}`);
+        moleculesWarnings = moleculesWarnings.concat(mWarnings);
+
+        moleculeRow.extendedMetadata = { warnings };
+      }
+
+      moleculeArr.push(moleculeRow);
+    });
+
+    const moleculeSummary = {
+      fileName,
+      itemsummaryName: `Molecules: ${scheme.moleculeCount}`,
+      type: 'ItemSummary',
+      itemType: 'Molecule',
+      version
+    };
+    if (moleculesWarnings.length > 0) {
+      moleculeSummary.extendedMetadata = { warnings: moleculesWarnings };
+    }
+    if (moleculeArr.length > 0) moleculeSummary.children = moleculeArr;
+    addChildren(leaf, moleculeSummary);
+
+    let reactionsWarnings = [];
+    const reactionArr = [];
+    schemeReactions.forEach((r) => {
+      const reactionRow = {
+        type,
+        id: r.get('id'),
+        itemType: 'Reaction',
+        fileName,
+        isApproved: r.get('isApproved'),
+        itemName: `Reaction ${r.get('id')}`,
+        isImported: !!r.get('importedId'),
+      };
+
+      const extData = (r.get('extendedMetadata') || Map());
+      const warnings = (extData.get('warnings') || List()).toJS();
+      if (warnings.length > 0) {
+        const rWarnings = warnings.map(w => `Reaction ${r.get('id')}: ${w}`);
+        reactionsWarnings = reactionsWarnings.concat(rWarnings);
+
+        reactionRow.extendedMetadata = { warnings };
+      }
+
+      reactionArr.push(reactionRow);
+    });
+
+    const reactionSummary = {
+      fileName,
+      itemsummaryName: `Reactions: ${scheme.reactionCount}`,
+      type: 'ItemSummary',
+      itemType: 'Reaction',
+      version
+    };
+    if (reactionsWarnings.length > 0) {
+      reactionSummary.extendedMetadata = { warnings: reactionsWarnings };
+    }
+    if (reactionArr.length > 0) reactionSummary.children = reactionArr;
+    addChildren(leaf, reactionSummary);
+  });
+
+  return schemeArr;
+};
+
+export const buildRowData = (files, schemes, reactions, molecules) => {
+  const { fileTree, fileMap } = buildFileTree(files);
+  const schemeArr = buildFileSchemeTree(fileTree, fileMap, schemes, reactions, molecules);
+
+  // Dectect file approve
+  Object.values(fileMap).forEach((file) => {
+    const fileSchemes = schemeArr.filter(s => s.sourceId === file.id);
+
+    const numApprovedSchemes = fileSchemes.filter(s => s.isApproved).length;
+    if (fileSchemes.length === numApprovedSchemes && numApprovedSchemes > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = false;
+    }
+
+    const numImportedSchemes = fileSchemes.filter(s => s.isImported).length;
+    if (fileSchemes.length === numImportedSchemes && numImportedSchemes > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = false;
+    }
+  });
+
+  Object.values(fileMap).forEach((file) => {
+    const { children } = file;
+    if (!children || children.length === 0) return;
+
+    if (children[0].type !== 'File') return;
+
+    const numApprovedChildren = children.filter(f => f.isApproved).length;
+    if (children.length === numApprovedChildren && numApprovedChildren > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = false;
+    }
+
+    const numImportedChildren = children.filter(f => f.isImported).length;
+    if (children.length === numImportedChildren && numImportedChildren > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = false;
+    }
+  });
+
+  return fileTree;
+};
diff --git a/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js b/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
new file mode 100644
index 000000000..ab4d100da
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
@@ -0,0 +1,197 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import 'whatwg-fetch';
+
+import AbbreviationManagement from 'src/apps/chemscanner/components/AbbreviationManagement';
+
+function RemoveRowBtn({ onClick, node }) {
+  const col = node.columnApi.getColumn('abb');
+  const { headerName } = col.colDef;
+  const newAbb = headerName === 'Abbreviation';
+
+  return (
+    <Button
+      active
+      onClick={() => onClick(node.data, newAbb)}
+      bsSize="xsmall"
+    >
+      <i className="fa fa-minus" />
+    </Button>
+  );
+}
+
+RemoveRowBtn.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+};
+
+export default class AbbreviationManagementContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      abbreviations: [],
+      superatoms: [],
+      newAbb: true,
+    };
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.changeTypeCreate = this.changeTypeCreate.bind(this);
+    this.removeRow = this.removeRow.bind(this);
+    this.createAbbreviation = this.createAbbreviation.bind(this);
+  }
+
+  componentDidMount() {
+    fetch('/api/v1/public_chemscanner/abbreviations/all', {
+      credentials: 'same-origin',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: 'post',
+      body: JSON.stringify({ pageSize: 10, page: 1 })
+    }).then((response) => {
+      if (response.ok === false) {
+        return { abbreviations: [], superatoms: [] };
+      }
+
+      return response.json();
+    }).then((res) => {
+      const { abbreviations, superatoms } = res;
+
+      const abbData = Object.keys(abbreviations).map(k => (
+        { abb: k, smi: abbreviations[k] }
+      ));
+      const superatomData = Object.keys(superatoms).map(satom => (
+        { abb: satom, smi: superatoms[satom] }
+      ));
+
+      this.setState({
+        abbreviations: abbData,
+        superatoms: superatomData,
+      });
+    });
+  }
+
+  onGridReady(e, newAbb) {
+    e.api.sizeColumnsToFit();
+
+    if (newAbb) {
+      this.abbGridApi = e.api;
+    } else {
+      this.superatomGridApi = e.api;
+    }
+  }
+
+  changeTypeCreate() {
+    const { newAbb } = this.state;
+    this.setState({ newAbb: !newAbb });
+  }
+
+  removeRow(data, newAbb) {
+    const gridApi = newAbb ? this.abbGridApi : this.superatomGridApi;
+
+    fetch('/api/v1/chemscanner/abbreviations/remove', {
+      credentials: 'same-origin',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: 'post',
+      body: JSON.stringify({ data, newAbb })
+    }).then((response) => {
+      if (response.ok === false) return { abbreviations: [] };
+      return response.json();
+    }).then((res) => {
+      if (!res) return;
+
+      const { abbreviations } = res;
+      if (abbreviations.length === 0) return;
+
+      const dataList = [];
+      gridApi.forEachNode((rowNode) => {
+        if (abbreviations.includes(rowNode.data.abb)) {
+          dataList.push(rowNode.data);
+        }
+      });
+
+      gridApi.updateRowData({ remove: dataList });
+    });
+  }
+
+  createAbbreviation(abb, smiles, newAbb) {
+    const gridApi = newAbb ? this.abbGridApi : this.superatomGridApi;
+    if (!gridApi) return;
+
+    fetch('/api/v1/chemscanner/abbreviations/add', {
+      credentials: 'same-origin',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: 'post',
+      body: JSON.stringify({ abb, smiles, newAbb })
+    }).then((response) => {
+      if (response.ok === false) return {};
+      return response.json();
+    }).then((res) => {
+      if (!res) return;
+
+      const keys = Object.keys(res);
+      if (keys.length === 0) return;
+
+      const abbreviations = keys.map(k => ({ abb: k, smi: res[k] }));
+      gridApi.updateRowData({
+        add: abbreviations,
+        addIndex: 0
+      });
+    });
+  }
+
+  render() {
+    const { abbreviations, superatoms, newAbb } = this.state;
+
+    const deleteCol = {
+      headerName: '',
+      field: 'type',
+      filter: false,
+      cellRendererFramework: RemoveRowBtn,
+      cellRendererParams: {
+        onClick: this.removeRow
+      },
+      headerComponentParams: { headerName: '' }
+    };
+
+    const abbColumnDefs = [
+      { ...deleteCol, width: 15 },
+      { headerName: 'Abbreviation', field: 'abb', width: 120 },
+      { headerName: 'SMILES', field: 'smi' },
+    ];
+
+    const superatomColumnDefs = [
+      { ...deleteCol, width: 40, filter: false },
+      { headerName: 'Superatom', field: 'abb', width: 120 },
+      { headerName: 'SMILES', field: 'smi' },
+    ];
+    const defaultColDef = {
+      filter: true,
+      resizable: true,
+    };
+
+    return (
+      <AbbreviationManagement
+        onGridReady={this.onGridReady}
+        abbColumnDefs={abbColumnDefs}
+        superatomColumnDefs={superatomColumnDefs}
+        defaultColDef={defaultColDef}
+        newAbb={newAbb}
+        abbreviations={abbreviations}
+        superatoms={superatoms}
+        changeTypeCreate={this.changeTypeCreate}
+        createAbbreviation={this.createAbbreviation}
+      />
+    );
+  }
+}
diff --git a/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js b/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
new file mode 100644
index 000000000..b90e67d8e
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
@@ -0,0 +1,61 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { setArchivedValue } from '../actions/storedFileActions';
+import * as types from '../actions/ActionTypes';
+
+import ArchivedManagement from '../components/ArchivedManagement';
+
+const mapStateToProps = state => ({
+  files: state.get('files'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  setArchivedValue: (ids, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(setArchivedValue(ids, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+function ArchivedManagementContainer(props) {
+  const { files } = props;
+  const setArchivedValueFunc = props.setArchivedValue;
+
+  const archivedFiles = [];
+  const activedFiles = [];
+
+  files.forEach((f) => {
+    const file = f.toJS();
+    const { archived } = file.extendedMetadata;
+
+    if (archived == null || archived === false) {
+      activedFiles.push(file);
+    } else {
+      archivedFiles.push(file);
+    }
+  });
+
+  return (
+    <ArchivedManagement
+      archivedFiles={archivedFiles}
+      activedFiles={activedFiles}
+      setArchivedValue={setArchivedValueFunc}
+    />
+  );
+}
+
+ArchivedManagementContainer.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ArchivedManagementContainer);
diff --git a/app/packs/src/components/chemscanner/containers/FileStorageContainer.js b/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
new file mode 100644
index 000000000..bc26ca3a3
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
@@ -0,0 +1,230 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+import base64 from 'base-64';
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  deleteItems,
+  beilsteinExport,
+  downloadFile,
+  getScannedOutputs,
+  hideItems,
+  approveItems,
+  retrieveStoredFiles,
+  rescanFiles,
+  saveImage,
+  uploadToStore,
+  fetchPreview,
+  updateMetadata,
+  setArchivedValue,
+  setExpand,
+  // updatePreview
+} from '../actions/storedFileActions';
+import * as types from '../actions/ActionTypes';
+
+import FileStorage from '../components/FileStorage';
+
+import { isPngImage, isSvgImage } from '../utils';
+
+const mapStateToProps = state => ({
+  files: state.get('files'),
+  schemes: state.get('schemes'),
+  reactions: state.get('reactions'),
+  molecules: state.get('molecules'),
+  ui: state.get('ui'),
+  cddInstance: state.get('chemdrawInstance'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch,
+  retrieveStoredFiles: () => dispatch(retrieveStoredFiles()),
+  uploadToStore: (files) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(uploadToStore(files)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  rescanFiles: (ids) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(rescanFiles(ids)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  setArchivedValue: (ids, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(setArchivedValue(ids, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  showItems: (ids, type, display) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(getScannedOutputs(ids, type, display)).then((action) => {
+      const scannedSchemes = action.response.get('schemes');
+      if (!scannedSchemes || scannedSchemes.size === 0) {
+        dispatch({ type: types.UNSET_LOADING });
+        return;
+      }
+
+      const imageList = scannedSchemes.reduce((arr, scheme) => {
+        const imageData = scheme.get('pictureData') || '';
+        const id = scheme.get('id');
+        if (imageData.length === 0 || !id) return arr;
+
+        const isSaved = scheme.get('isSaved') || false;
+        if (isSaved) return arr;
+
+        const uuid = scheme.get('uuid');
+        arr.push({ id, fileUuid: uuid, imageData });
+        return arr;
+      }, []);
+
+      if (imageList.length > 0) {
+        saveImage(imageList);
+      }
+
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  hideItems: (ids, type) => dispatch(hideItems(ids, type)),
+  downloadFile: id => dispatch(downloadFile(id)),
+  toggleExpand: (data) => {
+    const { id, type } = data;
+    const value = !data.expanded;
+
+    const actionType = types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`];
+    if (actionType) dispatch(setExpand(id, type, value));
+
+    return null;
+  },
+  openImportModal: data => dispatch({ type: types.SET_IMPORT, data }),
+  deleteItems: (ids, type, version) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(deleteItems(ids, type, version)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  beilsteinExport: (ids) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return beilsteinExport(ids).then(res => res.json()).then((res) => {
+      const listFiles = res.files || [];
+
+      listFiles.forEach((file) => {
+        const raw = base64.decode(file.b64 || '');
+        const { length } = raw;
+        const ab = new ArrayBuffer(length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < length; i += 1) ia[i] = raw.charCodeAt(i);
+        const blob = new Blob([ab], { type: 'application/zip' });
+
+        const a = document.createElement('a');
+        a.style = 'display: none';
+        document.body.appendChild(a);
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = file.name;
+        a.click();
+        window.URL.revokeObjectURL(url);
+      });
+
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  approveItems: (ids, type, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(approveItems(ids, type, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  updateMetadata: (id, type, extendedMetadata) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(updateMetadata(id, type, extendedMetadata)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  getPreview: (id) => {
+    const { dispatch } = dispatchProps;
+    dispatch({ type: types.SET_LOADING });
+
+    return fetchPreview(id).then((res) => {
+      let imageData = res.image_data;
+      if (!imageData) return dispatch({ type: types.UNSET_LOADING });
+
+      const isPng = isPngImage(imageData);
+      const isSvg = isSvgImage(imageData);
+
+      let type = isPng ? 'image/png' : 'image/svg+xml';
+      if (!isPng && !isSvg) {
+        type = 'image/png';
+        const { cddInstance } = stateProps;
+
+        if (RegExp('<?xml.*').test(imageData)) {
+          cddInstance.loadCDXML(imageData);
+        } else {
+          cddInstance.loadB64CDX(imageData);
+        }
+
+        const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
+        imageData = `data:image/png;base64,${b64png}`;
+        cddInstance.clear();
+
+        saveImage([{ id, imageData }]);
+      }
+
+      const blob = new Blob([imageData], { type });
+      const objUrl = window.URL.createObjectURL(blob);
+
+      dispatch({ type: types.GET_SCHEME_PREVIEW, imageData: objUrl, id });
+
+      return dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+class FileStorageContainer extends React.Component {
+  componentDidMount() {
+    this.props.retrieveStoredFiles();
+  }
+
+  render() {
+    const { files, schemes, ui } = this.props;
+    const version = ui.get('version');
+    const reload = ui.get('reloadGrid');
+
+    return (
+      <FileStorage
+        {...this.props}
+        files={files}
+        schemes={schemes}
+        version={version}
+        reload={reload}
+      />
+    );
+  }
+}
+
+FileStorageContainer.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  schemes: PropTypes.instanceOf(List).isRequired,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(FileStorageContainer);
diff --git a/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js b/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
new file mode 100644
index 000000000..7001a8e2c
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { scanFile, updateReagents } from '../actions/fileActions';
+import { saveImage } from '../actions/storedFileActions';
+import { changeView } from '../actions/uiActions';
+import * as types from '../actions/ActionTypes';
+import HeaderMenu from '../components/HeaderMenu';
+
+const HeaderMenuContainer = props => <HeaderMenu {...props} />;
+
+const mapStateToProps = state => ({
+  reactions: state.get('reactions'),
+  molecules: state.get('molecules'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  scanFile: (files, getMol) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(scanFile(files, getMol)).then((action) => {
+      dispatch({ type: types.UNSET_LOADING });
+
+      const scannedSchemes = action.response.get('schemes');
+      if (!scannedSchemes || scannedSchemes.size === 0) return;
+
+      const imageList = scannedSchemes.reduce((arr, scheme) => {
+        const imageData = scheme.get('pictureData');
+        if (!imageData) return arr;
+
+        const id = scheme.get('id');
+        if (imageData.length === 0 || !id) return arr;
+
+        const isSaved = scheme.get('isSaved') || false;
+        if (isSaved) return arr;
+
+        const uuid = scheme.get('uuid');
+        arr.push({ id, fileUuid: uuid, imageData });
+        return arr;
+      }, []);
+
+      if (imageList.length === 0) return;
+
+      saveImage(imageList);
+    });
+  },
+  cleanUp: () => (
+    new Promise((resolve) => {
+      dispatch({ type: types.SET_LOADING });
+      resolve();
+    }).then(() => dispatch({
+      type: types.CLEAN_UP
+    })).then(() => dispatch({
+      type: types.UNSET_LOADING
+    }))
+  ),
+  showNotification: notification => dispatch({
+    type: types.SET_NOTIFICATION, notification
+  }),
+  resetNotification: () => dispatch({ type: types.RESET_NOTIFICATION }),
+  toggleAbbView: () => dispatch({ type: types.TOGGLE_ABB_VIEW }),
+  changeScannedFileView: () => dispatch(changeView(types.VIEW_SCANNED_FILES)),
+  changeAbbreviationView: () => dispatch(changeView(types.VIEW_ABBREVIATION)),
+  changeFileStorageView: () => dispatch(changeView(types.VIEW_FILE_STORAGE)),
+  changeArchivedManagementView: () => dispatch(changeView(types.VIEW_ARCHIVED_MANAGEMENT)),
+  updateReagents: (reactionId, updateInfo) => {
+    if (reactionId === 0) return;
+
+    dispatch(updateReagents(reactionId, updateInfo));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HeaderMenuContainer);
diff --git a/app/packs/src/components/chemscanner/containers/ImportModalContainer.js b/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
new file mode 100644
index 000000000..697c963fb
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import * as types from '../actions/ActionTypes';
+
+import { importData } from '../actions/storedFileActions';
+import ImportModal from '../components/ChemscannerImportModal';
+
+const ImportModalContainer = props => <ImportModal {...props} />;
+
+const fetchCollections = () => (
+  fetch('/api/v1/collections/all_as_tree', {
+    credentials: 'same-origin',
+    method: 'GET',
+  }).then(res => res.json())
+);
+
+const mapStateToProps = state => ({
+  show: state.get('ui').get('import'),
+  selectedItems: state.get('ui').get('selected'),
+  fetchCollections,
+});
+
+const mapDispatchToProps = dispatch => ({
+  closeModal: () => dispatch({ type: types.UNSET_IMPORT }),
+  importData: (data, collection, maintainShortLabel) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(importData(data, collection, maintainShortLabel)).then(() => (
+      dispatch({ type: types.UNSET_LOADING })
+    ));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ImportModalContainer);
diff --git a/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js b/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
new file mode 100644
index 000000000..22f6d65e1
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import LoadingModal from 'src/apps/chemscanner/components/LoadingModal';
+
+const LoadingModalContainer = props => <LoadingModal {...props} />;
+
+const mapStateToProps = state => ({
+  loading: state.get('ui').get('loading'),
+});
+
+export default connect(mapStateToProps)(LoadingModalContainer);
diff --git a/app/packs/src/components/chemscanner/containers/MainContentContainer.js b/app/packs/src/components/chemscanner/containers/MainContentContainer.js
new file mode 100644
index 000000000..a5a7d1d6a
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/MainContentContainer.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import MainContent from '../components/MainContent';
+
+import { removeFile } from '../actions/fileActions';
+
+import * as types from '../actions/ActionTypes';
+
+import { updateItemField, fetchSvg } from '../actions/storedFileActions';
+
+const MainContentContainer = props => <MainContent {...props} />;
+
+const mapStateToProps = state => ({
+  files: state.get('files'),
+  schemes: state.get('schemes'),
+  reactions: state.get('reactions'),
+  molecules: state.get('molecules'),
+  editingMoleculeId: state.get('ui').get('editingMoleculeId'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch,
+  removeFile: ({ fileUid }) => dispatch(removeFile(fileUid)),
+  closeEditorModal: () => dispatch({
+    type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0
+  }),
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  saveMoleculeMdl: (mdl) => {
+    const { dispatch } = dispatchProps;
+    const id = stateProps.editingMoleculeId;
+
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(updateItemField(id, 'molecules', 'mdl', mdl)).then(() => {
+      dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0 });
+    }).then(() => dispatch(fetchSvg([id]))).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(MainContentContainer);
diff --git a/app/packs/src/components/chemscanner/containers/NotificationContainer.js b/app/packs/src/components/chemscanner/containers/NotificationContainer.js
new file mode 100644
index 000000000..18e220fa6
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/NotificationContainer.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Alert } from 'react-bootstrap';
+
+import { scanFile } from 'src/apps/chemscanner/actions/fileActions';
+import * as types from 'src/apps/chemscanner/actions/ActionTypes';
+
+class Notification extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      show: !(props.notification.trim() === '')
+    };
+
+    this.handleDismiss = this.handleDismiss.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    this.setState({
+      show: !(newProps.notification.trim() === '')
+    });
+  }
+
+  handleDismiss() {
+    this.setState({ show: false });
+  }
+
+  render() {
+    const { notification } = this.props;
+    const { show } = this.state;
+
+    if (!show) return <span />;
+
+    return (
+      <Alert
+        bsStyle="danger"
+        className="chemscanner-alert-notification"
+        onDismiss={this.handleDismiss}
+      >
+        {notification}
+      </Alert>
+    );
+  }
+}
+
+Notification.propTypes = {
+  notification: PropTypes.string
+};
+
+Notification.defaultProps = {
+  notification: ''
+};
+
+const NotificationContainer = props => <Notification {...props} />;
+
+const mapStateToProps = state => ({
+  notification: state.get('ui').get('notification'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  scanFile: (files, getMol) => {
+    dispatch({ type: types.SET_LOADING });
+    dispatch(scanFile(files, getMol)).then(() => dispatch({
+      type: types.UNSET_LOADING
+    }));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NotificationContainer);
diff --git a/app/packs/src/components/chemscanner/containers/RootContainer.js b/app/packs/src/components/chemscanner/containers/RootContainer.js
new file mode 100644
index 000000000..9bb12cfa6
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/RootContainer.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import Root from 'src/apps/chemscanner/components/Root';
+import setCddInstance from 'src/apps/chemscanner/actions/chemdrawInstanceActions';
+
+const RootContainer = props => <Root {...props} />;
+
+const mapStateToProps = state => ({
+  ui: state.get('ui'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  attachEditor: (id) => {
+    const config = {
+      id,
+      viewonly: true,
+      licenseUrl: '/cdjs/sample/ChemDraw-JS-License.xml',
+      config: {
+        properties: {
+          StyleSheet: 'ACS Document 1996',
+          chemservice: 'https://chemdrawdirect.perkinelmer.cloud/rest/'
+        }
+      },
+      callback: cdd => dispatch(setCddInstance(cdd)),
+      errorCallback: e => console.log(e),
+    };
+
+    // eslint-disable-next-line no-undef
+    perkinelmer.ChemdrawWebManager.attach(config);
+  },
+  getCurrentVersion: () => dispatch(getCurrentVersion()),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RootContainer);
diff --git a/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js b/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
new file mode 100644
index 000000000..4826671d2
--- /dev/null
+++ b/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as types from '../actions/ActionTypes';
+
+import ScannedMolecules from '../components/ScannedMolecules';
+import ScannedReactions from '../components/ScannedReactions';
+
+import {
+  removeMolecule,
+  removeReaction,
+  editMoleculeComment,
+  editReactionComment,
+  selectMolecule,
+  selectReaction,
+} from '../actions/scannedItemActions';
+
+import { updateItemField, toggleAliasPolymer } from '../actions/storedFileActions';
+
+const ScannedItemsContainer = (props) => {
+  const { display } = props;
+
+  if (display === 'molecules') return <ScannedMolecules {...props} />;
+  if (display !== 'reactions') return <span />;
+
+  return <ScannedReactions {...props} />;
+};
+
+const mapStateToProps = state => ({
+  reactions: state.get('reactions'),
+  molecules: state.get('molecules'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  editComment: (itemType, fileUid, schemeIdx, id, comment) => {
+    if (itemType === 'molecules') {
+      dispatch(editMoleculeComment(id, fileUid, schemeIdx, comment));
+    } else if (itemType === 'reactions') {
+      dispatch(editReactionComment(id, fileUid, schemeIdx, comment));
+    }
+  },
+  removeItem: (itemType, fileUid, schemeIdx, id) => {
+    if (itemType === 'molecules') {
+      dispatch(removeMolecule(id, fileUid, schemeIdx));
+    } else if (itemType === 'reactions') {
+      dispatch(removeReaction(id, fileUid, schemeIdx));
+    }
+  },
+  selectItem: (itemType, fileUid, schemeIdx, id) => {
+    if (itemType === 'molecules') {
+      dispatch(selectMolecule(id, fileUid, schemeIdx));
+    } else if (itemType === 'reactions') {
+      dispatch(selectReaction(id, fileUid, schemeIdx));
+    }
+  },
+  updateItemField: (id, type, field, value) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(updateItemField(id, type, field, value)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  toggleAliasPolymer: (moleculeId, atomIdx) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(toggleAliasPolymer(moleculeId, atomIdx)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  editMoleculeMdl: (moleculeId) => {
+    if (!moleculeId) return;
+
+    dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId });
+  }
+});
+
+ScannedItemsContainer.propTypes = {
+  display: PropTypes.string.isRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScannedItemsContainer);
diff --git a/app/packs/src/components/chemscanner/middleware/api.js b/app/packs/src/components/chemscanner/middleware/api.js
new file mode 100644
index 000000000..3582f5b24
--- /dev/null
+++ b/app/packs/src/components/chemscanner/middleware/api.js
@@ -0,0 +1,38 @@
+import 'whatwg-fetch';
+import { camelizeKeys } from 'humps';
+
+export const CALL_API = 'Call API';
+
+const callApi = (endpoint, options = {}) => (
+  fetch(endpoint, options).then((response) => {
+    if (!response.ok) return Promise.reject(response);
+
+    const contentType = response.headers.get('content-type');
+    const jsonType = contentType.indexOf('application/json') !== -1;
+
+    if (jsonType) {
+      return response.json().then(json => camelizeKeys(json));
+    }
+
+    return response;
+  })
+);
+
+export default store => next => (action) => {
+  const api = action[CALL_API];
+  if (typeof api === 'undefined') {
+    return next(action);
+  }
+
+  const { endpoint, options } = api;
+  let { normalizer } = api;
+  if (typeof endpoint !== 'string') {
+    throw new Error('Specify a string endpoint URL.');
+  }
+  if (!normalizer) normalizer = res => res;
+
+  return callApi(endpoint, options).then(response => next({
+    response: normalizer(response, store, action.type),
+    ...action
+  }));
+};
diff --git a/app/packs/src/components/chemscanner/middleware/chemdraw.js b/app/packs/src/components/chemscanner/middleware/chemdraw.js
new file mode 100644
index 000000000..ee861f41b
--- /dev/null
+++ b/app/packs/src/components/chemscanner/middleware/chemdraw.js
@@ -0,0 +1,119 @@
+import * as types from 'src/apps/chemscanner/actions/ActionTypes';
+import { CALL_API } from 'src/apps/chemscanner/middleware/api';
+import { extractReactionFromId } from 'src/apps/chemscanner/utils';
+
+const cleanUpPromise = (cddInstance, mdl) => {
+  const loadPromise = new Promise((resolve) => {
+    cddInstance.clear();
+    cddInstance.loadMOL(mdl, (cdxml, err) => {
+      if (!err) resolve(cdxml);
+    });
+  });
+
+  return loadPromise.then(() => {
+    const version = cddInstance.getVersion().split('.')[0];
+
+    if (version === '18') {
+      cddInstance.g.instanceHub.chemDraw.handleCommand('selectAll');
+      cddInstance.g.instanceHub.chemDraw.handleCommand('cleanStructure');
+    } else {
+      const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
+      const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
+      selectAll.handleCommand();
+      clean.handleCommand();
+    }
+
+    return new Promise(resolve => cddInstance.getMOL(mol => resolve(mol)));
+  });
+};
+
+export default store => next => (action) => {
+  const { type } = action;
+  if (type !== types.CLEAN_UP) return next(action);
+
+  const molecules = store.getState().get('molecules');
+  const reactions = store.getState().get('reactions');
+  const cddInstance = store.getState().get('chemdrawInstance');
+
+  let selectedMolecules = molecules.filter(m => m.get('selected') || false);
+  let selectedReactions = reactions.filter(m => m.get('selected') || false);
+
+  if (selectedMolecules.size === 0 && selectedReactions.size === 0) {
+    selectedMolecules = molecules;
+    selectedReactions = reactions;
+  }
+
+  const promiseChain = selectedMolecules.reduce((chain, m) => (
+    chain.then((chainRes) => {
+      const mdl = m.get('mdl');
+
+      return cleanUpPromise(cddInstance, mdl).then((cleanedMdl) => {
+        const id = m.get('id');
+        chainRes.push({ mid: id, mdl: cleanedMdl });
+        return chainRes;
+      });
+    })
+  ), Promise.resolve([]));
+
+  return selectedReactions.reduce((chain, r) => (
+    ['reactants', 'reagents', 'products'].reduce((rChain, group) => {
+      const groupMol = r.get(group) || [];
+      const rId = r.get('id');
+
+      return groupMol.reduce((gChain, m) => (
+        gChain.then((chainRes) => {
+          const mdl = m.get('mdl');
+
+          return cleanUpPromise(cddInstance, mdl).then((cleanedMdl) => {
+            const id = m.get('id');
+            chainRes.push({
+              rId, group, mid: id, mdl: cleanedMdl
+            });
+            return chainRes;
+          });
+        })
+      ), rChain);
+    }, chain)
+  ), promiseChain).then((resArray) => {
+    const molArray = [];
+    const reactionArray = [];
+
+    resArray.forEach((res) => {
+      const {
+        group, mdl, mid, rId
+      } = res;
+
+      if (!rId) {
+        molArray.push(res);
+        return;
+      }
+
+      const reaction = reactionArray.find(r => r.id === rId);
+      if (reaction) {
+        const molecule = reaction[group].find(m => m.id === mid);
+        molecule.mdl = mdl;
+      } else {
+        const simpleReaction = extractReactionFromId(reactions, rId);
+        const molecule = simpleReaction[group].find(m => m.id === mid);
+        molecule.mdl = mdl;
+        reactionArray.push(simpleReaction);
+      }
+    });
+
+    return next({
+      type,
+      [CALL_API]: {
+        endpoint: '/api/v1/public_chemscanner/svg/mdl',
+        options: {
+          credentials: 'same-origin',
+          method: 'post',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ molecules: molArray, reactions: reactionArray })
+        }
+      }
+    });
+  });
+};
diff --git a/app/packs/src/components/chemscanner/reactionUtils.js b/app/packs/src/components/chemscanner/reactionUtils.js
new file mode 100644
index 000000000..bf940d5cc
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reactionUtils.js
@@ -0,0 +1,41 @@
+export const getSchemeMolecules = (reaction, molecules) => {
+  const fileUid = reaction.get('fileUuid');
+  const schemeIdx = reaction.get('schemeIdx');
+
+  return molecules.filter(m => (
+    m.get('schemeIdx') === schemeIdx && m.get('fileUuid') === fileUid
+  ));
+};
+
+export const getReactionReactants = (reaction, reactionMolecules) => {
+  const ids = reaction.get('reactantExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionReagents = (reaction, reactionMolecules) => {
+  const ids = reaction.get('reagentExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionSolvents = (reaction, reactionMolecules) => {
+  const ids = reaction.get('solventExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionProducts = (reaction, reactionMolecules) => {
+  const ids = reaction.get('productExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionGroups = (reaction, molecules) => {
+  const reactionMolecules = getSchemeMolecules(reaction, molecules);
+
+  const reactants = getReactionReactants(reaction, reactionMolecules);
+  const reagents = getReactionReagents(reaction, reactionMolecules);
+  const solvents = getReactionSolvents(reaction, reactionMolecules);
+  const products = getReactionProducts(reaction, reactionMolecules);
+
+  return {
+    reactants, reagents, solvents, products
+  };
+};
diff --git a/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js b/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
new file mode 100644
index 000000000..d2a5441c9
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
@@ -0,0 +1,8 @@
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const chemdrawInstance = createReducer(null, {
+  [types.SET_CDD_INSTANCE]: (state, action) => action.cdd,
+});
+
+export default chemdrawInstance;
diff --git a/app/packs/src/components/chemscanner/reducers/files.js b/app/packs/src/components/chemscanner/reducers/files.js
new file mode 100644
index 000000000..53232e1df
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/files.js
@@ -0,0 +1,155 @@
+import { fromJS, List, Map } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const scanFile = (state, action) => {
+  const { response } = action;
+  if (!response) return state;
+
+  return state.concat(response.get('files') || []);
+};
+
+const files = createReducer(List(), {
+  [types.SCAN_FILE_FOR_MOLECULES]: scanFile,
+  [types.SCAN_FILE_FOR_REACTIONS]: scanFile,
+  [types.DELETE_STORED_FILE]: (state, action) => {
+    const source = action.response.get('source');
+    if (!source) return state;
+
+    return state.filterNot(f => (
+      source.includes(f.get('id')) || source.includes(f.get('parentId'))
+    ));
+  },
+  [types.GET_SCANNED_OUTPUT]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const outputFiles = response.get('files');
+    let newState = state;
+
+    outputFiles.forEach((file) => {
+      const idx = newState.findIndex(f => f.get('id') === file.get('id'));
+      if (idx < 0) return;
+
+      newState = newState.update(idx, f => f.merge(file).set('show', true));
+    });
+
+    return newState;
+  },
+  [types.RETRIEVE_STORED_FILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const storedFiles = response.files;
+    if (!storedFiles) return state;
+
+    const curIds = state.map(f => f.get('id'));
+    const newFiles = storedFiles.filter(f => !curIds.includes(f.id));
+
+    return state.concat(fromJS(newFiles));
+  },
+  [types.MARK_CORRECT]: (state, action) => {
+    const { uuid } = action;
+    const idx = state.findIndex(f => f.get('uuid') === uuid);
+
+    return state.updateIn(idx, f => f.set('correct', true));
+  },
+  [types.RESCAN_STORED_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const newFiles = response.get('files');
+    if (!newFiles || newFiles.size === 0) return state;
+
+    return state.concat(newFiles);
+  },
+  [types.UPLOAD_TO_STORE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const outputFiles = response.files;
+    if (!outputFiles) return state;
+
+    return state.concat(fromJS(outputFiles));
+  },
+  [types.HIDE_FILE]: (state, action) => {
+    const { fileUid } = action;
+    const ids = action.ids || [];
+
+    return state.map((f) => {
+      const checkFileUid = fileUid && f.get('uuid') === fileUid;
+      const checkIds = ids.includes(f.get('id') || 0);
+
+      if (checkFileUid || checkIds) {
+        return f.set('display', '').set('show', false);
+      }
+
+      return f;
+    });
+  },
+  [types.APPROVE_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('files');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((f) => {
+      if (ids.includes(f.get('id'))) return f.set('isApproved', val || false);
+
+      return f;
+    });
+  },
+  [types.UPDATE_METADATA]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const request = JSON.parse(action['Call API'].options.body);
+    const { id, data } = request;
+
+    const idx = state.findIndex(f => f.get('id') === id);
+    if (idx < 0) return state;
+
+    return state.update(idx, f => f.set('extendedMetadata', data));
+  },
+  [types.TOGGLE_FILE_EXPAND]: (state, action) => {
+    const { id } = action;
+    if (!id) return state;
+
+    const idx = state.findIndex(f => f.get('id') === id);
+    if (idx < 0) return state;
+
+    return state.update(idx, (f) => {
+      let expanded = f.get('expanded');
+      if (expanded == null) expanded = true;
+
+      let metadata = f.get('extendedMetadata') || Map();
+      metadata = metadata.set('expanded', !expanded);
+
+      return f.set('extendedMetadata', metadata).set('expanded', !expanded);
+    });
+  },
+  [types.SET_ARCHIVED_VALUE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const request = JSON.parse(action['Call API'].options.body);
+    const { ids, value } = request;
+    if (!ids) return state;
+
+    return state.map((f) => {
+      const id = f.get('id');
+      if (!ids.includes(id)) return f;
+
+      let metadata = f.get('extendedMetadata');
+      if (metadata == null) metadata = Map();
+      metadata = metadata.set('archived', value);
+
+      return f.set('extendedMetadata', metadata);
+    });
+  },
+});
+
+export default files;
diff --git a/app/packs/src/components/chemscanner/reducers/index.js b/app/packs/src/components/chemscanner/reducers/index.js
new file mode 100644
index 000000000..2423aadc7
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/index.js
@@ -0,0 +1,17 @@
+import { combineReducers } from 'redux-immutable';
+
+import files from './files';
+import schemes from './schemes';
+import reactions from './reactions';
+import molecules from './molecules';
+import chemdrawInstance from './chemdrawInstance';
+import ui from './ui';
+
+export default combineReducers({
+  ui,
+  chemdrawInstance,
+  files,
+  schemes,
+  reactions,
+  molecules,
+});
diff --git a/app/packs/src/components/chemscanner/reducers/molecules.js b/app/packs/src/components/chemscanner/reducers/molecules.js
new file mode 100644
index 000000000..d79918beb
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/molecules.js
@@ -0,0 +1,235 @@
+import { List, fromJS } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const molecules = createReducer(List(), {
+  [types.CLEAN_UP]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const cleanedMolecules = response.molecules;
+    if (!cleanedMolecules || cleanedMolecules.length === 0) return state;
+
+    return state.withMutations((mapState) => {
+      cleanedMolecules.forEach((cm) => {
+        const mIndex = mapState.findIndex(m => m.get('id') === cm.id);
+        mapState.update(mIndex, m => m.mergeDeep(cm));
+      });
+    });
+  },
+  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const { reaction } = response;
+
+    const addedMolecules = response.molecules || [];
+    let newState = state.concat(fromJS(addedMolecules));
+
+    const { removedIds } = reaction;
+    newState = newState.filter(m => !removedIds.includes(m.get('id')));
+
+    return newState;
+  },
+  [types.HIDE_FILE]: (state, action) => {
+    // If not logged-in, remove reactions. Otherwise, keep it since we need
+    // reactions information for FileStorage grid
+    const firstMolecule = state.get(0);
+    if (firstMolecule.get('id')) return state;
+
+    const { fileUid } = action;
+    const ids = action.ids || [];
+
+    let newState = state.filterNot(m => m.get('fileUid') === fileUid);
+    if (ids.length > 0) {
+      newState = newState.filterNot(m => ids.includes(m.get('schemeId')));
+    }
+
+    return newState;
+  },
+  [types.HIDE_SCHEME]: (state, action) => {
+    // If not logged-in, remove reactions. Otherwise, keep it since we need
+    // reactions information for FileStorage grid
+    const firstMolecule = state.get(0);
+    if (firstMolecule.get('id')) return state;
+
+    const ids = action.ids || [];
+    return state.filterNot(m => ids.includes(m.get('schemeId')));
+  },
+  [types.DELETE_STORED_FILE]: (state, action) => {
+    const fileUid = action.response;
+    return state.filterNot(m => m.get('uid') === fileUid);
+  },
+  [types.HIDE_MOLECULE]: (state, action) => {
+    const { fileUid, schemeIdx, id } = action;
+    return state.filterNot(m => (
+      m.get('externalId') === id &&
+        m.get('schemeIdx') === schemeIdx &&
+        m.get('fileUuid') === fileUid
+    ));
+  },
+  [types.SCAN_FILE_FOR_MOLECULES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    return state.concat(response.get('molecules') || []);
+  },
+  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    return state.concat(response.get('molecules') || []);
+  },
+  [types.GET_SCANNED_OUTPUT]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const scannedMolecules = response.get('molecules');
+    if (!scannedMolecules) return state;
+
+    let newState = state;
+    scannedMolecules.forEach((molecule) => {
+      const idx = newState.findIndex(sm => sm.get('id') === molecule.get('id'));
+      if (idx < 0) {
+        newState = newState.push(molecule);
+      } else {
+        newState = newState.update(idx, m => m.merge(molecule));
+      }
+    });
+
+    return newState;
+  },
+  [types.RESCAN_STORED_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    return state.concat(response.get('molecules') || []);
+  },
+  [types.SELECT_MOLECULE]: (state, action) => {
+    const { id, fileUid, schemeIdx } = action;
+    const mIndex = state.findIndex(m => (
+      m.get('externalId') === id &&
+        m.get('fileUuid') === fileUid &&
+        m.get('schemeIdx') === schemeIdx
+    ));
+    if (mIndex < 0) return state;
+
+    return state.update(mIndex, (m) => {
+      const selected = m.get('selected') || false;
+      return m.set('selected', !selected);
+    });
+  },
+  [types.TOGGLE_MOLECULE_RESIN]: (state, action) => {
+    const {
+      fileUid, cdUid, molId, atomId
+    } = action;
+    const mIndex = state.findIndex(m => (
+      m.get('id') === molId && m.get('fileUid') === fileUid && m.get('cdUid') === cdUid
+    ));
+    if (mIndex < 0) return state;
+
+    return state.update(mIndex, m => m.updateIn(['alias'], (aliases) => {
+      const index = aliases.findIndex(alias => alias.get('id') === atomId);
+      return aliases.update(index, (alias) => {
+        const resin = alias.get('resin') || false;
+        return alias.set('resin', !resin);
+      });
+    }));
+  },
+  [types.RETRIEVE_STORED_FILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const storedMolecules = response.molecules;
+    if (!storedMolecules) return state;
+
+    const curIds = state.map(f => f.get('id'));
+    const newMolecules = storedMolecules.filter(s => !curIds.includes(s.id));
+
+    return state.concat(fromJS(newMolecules));
+  },
+  [types.APPROVE_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('molecules');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((m) => {
+      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
+
+      return m;
+    });
+  },
+  [types.APPROVE_SCHEME]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('molecules');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((m) => {
+      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
+
+      return m;
+    });
+  },
+  [types.UPDATE_ITEM_FIELD]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const {
+      id, type, field, value
+    } = JSON.parse(action['Call API'].options.body);
+    if (type !== 'molecules') return state;
+
+    const mIndex = state.findIndex(m => m.get('id') === id);
+    if (mIndex < 0) return state;
+
+    return state.update(mIndex, m => m.set(field, value));
+  },
+  [types.TOGGLE_ALIAS_POLYMER]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const request = JSON.parse(action['Call API'].options.body);
+    const { moleculeId, atomIdx } = request;
+
+    const idx = state.findIndex(m => m.get('id') === moleculeId);
+    if (idx < 0) return state;
+
+    return state.update(idx, (m) => {
+      let extData = m.get('extendedMetadata');
+
+      let polymers = extData.get('polymer') || List();
+      if (polymers.includes(atomIdx)) {
+        polymers = polymers.filter(x => x === atomIdx.toString());
+      } else {
+        polymers = polymers.push(atomIdx);
+      }
+
+      extData = extData.set('polymer', polymers);
+      return m.set('extendedMetadata', extData);
+    });
+  },
+  [types.FETCH_SVG]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    let newState = state;
+
+    response.molecules.forEach((molecule) => {
+      const mIndex = newState.findIndex(m => m.get('id') === molecule.id);
+      if (mIndex < 0) return;
+
+      newState = newState.update(mIndex, m => m.set('svg', molecule.svg));
+    });
+
+    return newState;
+  },
+});
+
+export default molecules;
diff --git a/app/packs/src/components/chemscanner/reducers/reactions.js b/app/packs/src/components/chemscanner/reducers/reactions.js
new file mode 100644
index 000000000..e8ef1a3d7
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/reactions.js
@@ -0,0 +1,240 @@
+import { List, fromJS } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const reactions = createReducer(List(), {
+  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
+    const { response } = action;
+    const { reaction } = response;
+    if (!reaction) return state;
+
+    const { id, svg, reagentExternalIds } = reaction;
+
+    const rIndex = state.findIndex(r => r.get('id') === id);
+    if (rIndex < 0) return state;
+
+    return state.update(rIndex, r => (
+      r.set('svg', svg).set('reagentExtIds', fromJS(reagentExternalIds))
+    ));
+  },
+  [types.CLEAN_UP]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const cleanedReactions = response.reactions;
+    if (!cleanedReactions || cleanedReactions.length === 0) return state;
+
+    return state.withMutations((mapState) => {
+      cleanedReactions.forEach((cr) => {
+        const rIndex = mapState.findIndex(r => r.get('id') === cr.id);
+        mapState.update(rIndex, (r) => {
+          let newR = r.set('svg', cr.svg);
+          ['reactants', 'reagents', 'products'].forEach((group) => {
+            const molGroup = newR.get(group);
+            cr[group].forEach((cm) => {
+              const mIdx = molGroup.findIndex(mm => mm.get('id') === cm.id);
+              newR = newR.updateIn([group, mIdx], m => m.mergeDeep(cm));
+            });
+          });
+
+          return newR;
+        });
+      });
+    });
+  },
+  [types.EDIT_REACTION_COMMENT]: (state, action) => {
+    const {
+      id, fileUid, cdUid, comment
+    } = action;
+    const rIndex = state.findIndex(r => (
+      r.get('fileUid') === fileUid && r.get('cdUid') === cdUid && r.get('id') === id
+    ));
+    if (rIndex < 0) return state;
+
+    return state.update(rIndex, r => r.set('comment', comment));
+  },
+  [types.HIDE_FILE]: (state, action) => {
+    // If not logged-in, remove reactions. Otherwise, keep it since we need
+    // reactions information for FileStorage grid
+    const firstReaction = state.get(0);
+    if (firstReaction.get('id')) return state;
+
+    const { fileUid } = action;
+    const ids = action.ids || [];
+
+    let newState = state.filterNot(r => r.get('fileUid') === fileUid);
+    newState = newState.filterNot(r => ids.includes(r.get('schemeId')));
+
+    return newState;
+  },
+  [types.HIDE_SCHEME]: (state, action) => {
+    // If not logged-in, remove reactions. Otherwise, keep it since we need
+    // reactions information for FileStorage grid
+    const firstReaction = state.get(0);
+    if (firstReaction.get('id')) return state;
+
+    const ids = action.ids || [];
+    return state.filterNot(r => ids.includes(r.get('schemeId')));
+  },
+  [types.DELETE_FILE]: (state, action) => {
+    const fileUid = action.response;
+    return state.filterNot(m => m.get('uid') === fileUid);
+  },
+  [types.HIDE_REACTION]: (state, action) => {
+    const { id, fileUid, schemeIdx } = action;
+    return state.filterNot(r => (
+      r.get('fileUuid') === fileUid &&
+        r.get('externalId') === id &&
+        r.get('schemeIdx') === schemeIdx
+    ));
+  },
+  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    return state.concat(response.get('reactions') || []);
+  },
+  [types.GET_SCANNED_OUTPUT]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const scannedReactions = response.get('reactions');
+    if (!scannedReactions) return state;
+
+    let newState = state;
+    scannedReactions.forEach((reaction) => {
+      const idx = newState.findIndex(sr => sr.get('id') === reaction.get('id'));
+      if (idx < 0) {
+        newState = newState.push(reaction);
+      } else {
+        newState = newState.update(idx, r => r.merge(reaction));
+      }
+    });
+
+    return newState;
+  },
+  [types.RESCAN_STORED_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    return state.concat(response.get('reactions') || []);
+  },
+  [types.SELECT_REACTION]: (state, action) => {
+    const { id, fileUid, schemeIdx } = action;
+    const rIndex = state.findIndex(r => (
+      r.get('fileUuid') === fileUid &&
+        r.get('schemeIdx') === schemeIdx &&
+        r.get('externalId') === id
+    ));
+    if (rIndex < 0) return state;
+
+    return state.update(rIndex, (r) => {
+      const selected = r.get('selected') || false;
+      return r.set('selected', !selected);
+    });
+  },
+  [types.TOGGLE_RESIN_IN_REACTION]: (state, action) => {
+    const {
+      fileUid, cdUid, rId, molId, atomId
+    } = action;
+
+    const rIndex = state.findIndex(r => (
+      r.get('id') === rId && r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
+    ));
+    if (rIndex < 0) return state;
+
+    const findMol = (reaction, mId) => {
+      const rGroup = ['reactants', 'reagents', 'products'];
+      return rGroup.reduce((map, group) => {
+        const idx = reaction.get(group).findIndex(m => m.get('id') === mId);
+        if (idx < 0) return map;
+
+        return { [group]: idx };
+      }, {});
+    };
+
+    const molPos = findMol(state.get(rIndex), molId);
+    const group = Object.keys(molPos)[0];
+    const groupIdx = molPos[group];
+
+    return state.update(rIndex, r => r.updateIn([group, groupIdx, 'alias'], (aliases) => {
+      const index = aliases.findIndex(alias => alias.get('id') === atomId);
+      return aliases.update(index, (alias) => {
+        const resin = alias.get('resin') || false;
+        return alias.set('resin', !resin);
+      });
+    }));
+  },
+  [types.RETRIEVE_STORED_FILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const storedReactions = response.reactions;
+    if (!storedReactions) return state;
+
+    const curIds = state.map(f => f.get('id'));
+    const newReactions = storedReactions.filter(s => !curIds.includes(s.id));
+
+    return state.concat(fromJS(newReactions));
+  },
+  [types.APPROVE_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('reactions');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((r) => {
+      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
+
+      return r;
+    });
+  },
+  [types.APPROVE_SCHEME]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('reactions');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((r) => {
+      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
+
+      return r;
+    });
+  },
+  [types.UPDATE_ITEM_FIELD]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const {
+      id, type, field, value
+    } = JSON.parse(action['Call API'].options.body);
+    if (type !== 'reactions') return state;
+
+    const rIndex = state.findIndex(r => r.get('id') === id);
+    if (rIndex < 0) return state;
+
+    return state.update(rIndex, r => r.set(field, value));
+  },
+  [types.FETCH_SVG]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    let newState = state;
+
+    response.reactions.forEach((reaction) => {
+      const rIndex = newState.findIndex(r => r.get('id') === reaction.id);
+      if (rIndex < 0) return;
+
+      newState = newState.update(rIndex, r => r.set('svg', reaction.svg));
+    });
+
+    return newState;
+  },
+});
+
+export default reactions;
diff --git a/app/packs/src/components/chemscanner/reducers/root.js b/app/packs/src/components/chemscanner/reducers/root.js
new file mode 100644
index 000000000..2423aadc7
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/root.js
@@ -0,0 +1,17 @@
+import { combineReducers } from 'redux-immutable';
+
+import files from './files';
+import schemes from './schemes';
+import reactions from './reactions';
+import molecules from './molecules';
+import chemdrawInstance from './chemdrawInstance';
+import ui from './ui';
+
+export default combineReducers({
+  ui,
+  chemdrawInstance,
+  files,
+  schemes,
+  reactions,
+  molecules,
+});
diff --git a/app/packs/src/components/chemscanner/reducers/schemes.js b/app/packs/src/components/chemscanner/reducers/schemes.js
new file mode 100644
index 000000000..506578089
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/schemes.js
@@ -0,0 +1,176 @@
+import { List, Map, fromJS } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const addSchemes = (state, action) => {
+  const { response } = action;
+  if (!response) return state;
+
+  let outputSchemes = response.get('schemes') || List();
+  if (outputSchemes.size === 0) return state;
+
+  outputSchemes = outputSchemes.map(s => s.delete('pictureData'));
+
+  return state.concat(outputSchemes);
+};
+
+const revokeImageData = (scheme) => {
+  const imageData = scheme.get('imageData');
+  if (!imageData || !imageData.startsWith('blob:')) return;
+
+  window.URL.revokeObjectURL(imageData);
+};
+
+const schemes = createReducer(List(), {
+  [types.SCAN_FILE_FOR_MOLECULES]: addSchemes,
+  [types.SCAN_FILE_FOR_REACTIONS]: addSchemes,
+  [types.GET_SCANNED_OUTPUT]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const outputSchemes = response.get('schemes') || [];
+    let newState = state;
+
+    outputSchemes.forEach((scheme) => {
+      const idx = newState.findIndex(s => s.get('id') === scheme.get('id'));
+      if (idx < 0) return;
+
+      const newScheme = scheme.delete('pictureData').set('show', true);
+      newState = newState.update(idx, s => s.merge(newScheme));
+    });
+
+    return newState;
+  },
+  [types.RETRIEVE_STORED_FILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const storedSchemes = response.schemes;
+    if (!storedSchemes) return state;
+
+    const curIds = state.map(f => f.get('id'));
+    const newSchemes = storedSchemes.filter(s => !curIds.includes(s.id));
+
+    return state.concat(fromJS(newSchemes));
+  },
+  [types.RESCAN_STORED_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const newSchemes = response.get('schemes');
+    if (!newSchemes || newSchemes.size === 0) return state;
+
+    return state.concat(newSchemes);
+  },
+  [types.HIDE_FILE]: (state, action) => {
+    const { fileUid } = action;
+    const ids = action.ids || [];
+
+    let newState = state;
+    if (fileUid) {
+      const deleteIdx = [];
+      newState = state.map((s, idx) => {
+        if (s.get('fileUuid') === fileUid) {
+          deleteIdx.push(idx);
+          return s.set('display', '').set('show', false);
+        }
+
+        return s;
+      });
+
+      // Delete if not logged-in user
+      const firstScheme = newState.get(0);
+      if (firstScheme && !firstScheme.get('id')) {
+        deleteIdx.reverse().forEach((idx) => {
+          const s = newState.get(idx);
+          revokeImageData(s);
+          newState = newState.delete(idx);
+        });
+      }
+    }
+
+    if (ids.length > 0) {
+      newState = state.map((s) => {
+        const check = (
+          ids.includes(s.get('sourceId')) || ids.includes(s.get('id'))
+        );
+        if (check) return s.set('display', '').set('show', false);
+
+        return s;
+      });
+    }
+
+    return newState;
+  },
+  [types.HIDE_SCHEME]: (state, action) => {
+    const ids = action.ids || [];
+
+    return state.map(s => (
+      ids.includes(s.get('id')) ? s.set('display', '').set('show', false) : s
+    ));
+  },
+  [types.DELETE_STORED_FILE]: (state, action) => {
+    const source = action.response.get('source') || [];
+    const scheme = action.response.get('scheme') || [];
+    if (!source && !scheme) return state;
+
+    state.filter(s => source.includes(s.get('sourceId'))).forEach(s => revokeImageData(s));
+    state.filter(s => scheme.includes(s.get('id'))).forEach(s => revokeImageData(s));
+
+    const newState = state.filterNot(s => source.includes(s.get('sourceId')));
+    return newState.filterNot(s => scheme.includes(s.get('id')));
+  },
+  [types.GET_SCHEME_PREVIEW]: (state, action) => {
+    const { id, imageData } = action;
+    const idx = state.findIndex(s => s.get('id') === id);
+
+    return state.update(idx, s => s.set('imageData', imageData));
+  },
+  [types.APPROVE_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('schemes');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((s) => {
+      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
+
+      return s;
+    });
+  },
+  [types.APPROVE_SCHEME]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('schemes');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((s) => {
+      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
+
+      return s;
+    });
+  },
+  [types.TOGGLE_SCHEME_EXPAND]: (state, action) => {
+    const { id } = action;
+    if (!id) return state;
+
+    const idx = state.findIndex(s => s.get('id') === id);
+    if (idx < 0) return state;
+
+    return state.update(idx, (s) => {
+      const expanded = s.get('expanded') || false;
+
+      let metadata = s.get('extendedMetadata') || Map();
+      metadata = metadata.set('expanded', !expanded);
+
+      return s.set('extendedMetadata', metadata).set('expanded', !expanded);
+    });
+  }
+});
+
+export default schemes;
diff --git a/app/packs/src/components/chemscanner/reducers/ui.js b/app/packs/src/components/chemscanner/reducers/ui.js
new file mode 100644
index 000000000..810243395
--- /dev/null
+++ b/app/packs/src/components/chemscanner/reducers/ui.js
@@ -0,0 +1,49 @@
+import { Map, fromJS } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const defaultState = Map({
+  view: types.VIEW_SCANNED_FILES,
+  loading: false,
+  import: false,
+  reloadGrid: false,
+  version: '',
+  allVersion: [],
+  selected: [],
+  editingMoleculeId: 0,
+  notification: ''
+});
+
+const ui = createReducer(defaultState, {
+  [types.CHANGE_VIEW]: (state, action) => state.set('view', action.view),
+  [types.GET_CURRENT_VERSION]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const { version, listVersion } = action.response;
+    let newState = state;
+
+    if (version) newState = newState.set('version', version);
+    if (listVersion) {
+      newState = newState.set('allVersion', fromJS(listVersion));
+      newState = newState.set('view', types.VIEW_FILE_STORAGE);
+    }
+
+    return newState;
+  },
+  [types.RETRIEVE_STORED_FILES]: state => state.set('reloadGrid', true),
+  [types.SET_LOADING]: state => state.set('loading', true),
+  [types.UNSET_LOADING]: state => state.set('loading', false),
+  [types.SET_IMPORT]: (state, action) => (
+    state.set('import', true).set('selected', action.data)
+  ),
+  [types.UNSET_IMPORT]: state => state.set('import', false),
+  [types.SET_NOTIFICATION]: (state, action) => state.set('notification', action.notification),
+  [types.RESET_NOTIFICATION]: state => state.set('notification', ''),
+  [types.SET_EDITING_MOLECULE_ID]: (state, action) => (
+    state.set('editingMoleculeId', action.moleculeId || 0)
+  ),
+});
+
+export default ui;
diff --git a/app/packs/src/components/chemscanner/store/configureStore.js b/app/packs/src/components/chemscanner/store/configureStore.js
new file mode 100644
index 000000000..762ab44e8
--- /dev/null
+++ b/app/packs/src/components/chemscanner/store/configureStore.js
@@ -0,0 +1,14 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+
+import api from '../middleware/api';
+import chemdraw from '../middleware/chemdraw';
+import rootReducer from '../reducers/root';
+
+const configureStore = preloadedState => createStore(
+  rootReducer,
+  preloadedState,
+  applyMiddleware(thunk, chemdraw, api)
+);
+
+export default configureStore;
diff --git a/app/packs/src/components/chemscanner/utils.js b/app/packs/src/components/chemscanner/utils.js
new file mode 100644
index 000000000..27d67029b
--- /dev/null
+++ b/app/packs/src/components/chemscanner/utils.js
@@ -0,0 +1,162 @@
+/* eslint-disable no-prototype-builtins */
+import { fromJS } from 'immutable';
+
+export const generateExcelReactionRow = (reaction) => {
+  const {
+    reactants, reagents, solvents, products
+  } = reaction;
+
+  const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
+  const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
+
+  const reagentSmiles = reagents.concat(solvents).map(m => (
+    m.get('canoSmiles')
+  )).join('.');
+
+  const reactionSmiles = [
+    reactantSmiles,
+    reagentSmiles,
+    productSmiles,
+  ].join('>');
+
+  const reactantsSdf = reactants.map(m => m.get('mdl')).join('\n$$$$\n');
+  const reagentsSdf = reagents.map(m => m.get('mdl')).join('\n$$$$\n');
+  const productsSdf = products.map(m => m.get('mdl')).join('\n$$$$\n');
+
+  const assembleDesc = (arr, m, idx) => {
+    if (!m.description) return arr;
+
+    return arr.concat([
+      `reactant ${idx + 1}`,
+      `  ${m.description}`
+    ]);
+  };
+
+  const reactantsDesc = reactants.reduce(assembleDesc, []).join('\n');
+  const productsDesc = products.reduce(assembleDesc, []).join('\n');
+
+  const reactionSteps = reaction.steps.reduce((arr, step) => {
+    const lines = ['description', 'temperature', 'time'].reduce((lineArr, prop) => {
+      const val = step[prop];
+      if (!val || val === '\n') return lineArr;
+      lineArr.push(`  ${prop}: ${val}`);
+
+      return lineArr;
+    }, []);
+
+    lines.unshift(`step ${step.number}`);
+    lines.push(`  reagents: ${step.reagentSmiles.join(',')}`);
+
+    return arr.concat(lines);
+  }, []).join('\n');
+
+  return [
+    reactionSmiles,
+    reaction.temperature,
+    reaction.yield,
+    reaction.time,
+    reaction.description,
+    reactionSteps,
+    reactantsSdf,
+    reagentsSdf,
+    productsSdf,
+    reactantsDesc,
+    productsDesc
+  ];
+};
+
+export const generateExcelMoleculeRow = mol => ([
+  mol.smi,
+  mol.mdl,
+  mol.inchistring,
+  mol.inchikey,
+  mol.description
+]);
+
+export const extractMoleculeFromGroup = molGroup => molGroup.map(m => ({
+  id: m.id,
+  mdl: m.mdl,
+  description: m.description,
+}));
+
+export const extractReaction = (reaction) => {
+  const reagentsSmiles = [].concat(
+    (reaction.abbreviations || []).map(abb => abb.smi),
+    (reaction.addedReagentsSmi || []),
+    (reaction.addedSolventsSmi || []),
+  ).filter(x => x);
+
+  return {
+    id: reaction.id,
+    reactants: extractMoleculeFromGroup(reaction.reactants),
+    reagents: extractMoleculeFromGroup(reaction.reagents),
+    products: extractMoleculeFromGroup(reaction.products),
+    reagents_smiles: reagentsSmiles
+  };
+};
+
+export const extractReactionFromId = (reactions, rid) => {
+  const reaction = reactions.findLast(r => r.get('id') === rid).toJS();
+  return extractReaction(reaction);
+};
+
+export const createReducer = (initialState, handlers) => (
+  function reducer(state = initialState, action) {
+    if (handlers.hasOwnProperty(action.type)) {
+      return handlers[action.type](state, action);
+    }
+
+    return state;
+  }
+);
+
+export const sortMoleculesByClone = (molecules) => {
+  const cloneMap = {};
+  const cloneCountMap = {};
+
+  const rootMolecules = [];
+  const childrenMolecules = [];
+
+  molecules.forEach((m, idx) => {
+    const cloneFrom = m.get('cloneFrom');
+
+    if (cloneFrom) {
+      cloneMap[idx] = cloneFrom;
+      const count = cloneCountMap[cloneFrom] || 0;
+      cloneCountMap[cloneFrom] = count + 1;
+      childrenMolecules.push(m);
+    } else {
+      rootMolecules.push(m);
+    }
+  });
+
+  const newMolecules = new Array(molecules.size).fill(0);
+
+  let pos = 0;
+  const positionMap = {};
+  rootMolecules.forEach((m) => {
+    const extId = m.get('externalId');
+    newMolecules[pos] = m;
+    positionMap[extId] = pos;
+    pos += (cloneCountMap[extId] || 0) + 1;
+  });
+
+  const positionCountMap = {};
+  childrenMolecules.forEach((m) => {
+    const cloneFrom = m.get('cloneFrom');
+    pos = positionCountMap[cloneFrom] || 0;
+    newMolecules[positionMap[cloneFrom] + pos + 1] = m;
+    positionCountMap[cloneFrom] = pos + 1;
+  });
+
+  return fromJS(newMolecules);
+};
+
+export const isPngImage = (imageData) => {
+  const pngB64Begin = 'data:image/png;base64';
+  return RegExp(`${pngB64Begin},.*`).test(imageData);
+};
+
+export const isSvgImage = imageData => (
+  RegExp('.*<svg').test(imageData.slice(0, 200))
+);
diff --git a/app/packs/src/components/chemspectra/ChemSpectra.js b/app/packs/src/components/chemspectra/ChemSpectra.js
new file mode 100644
index 000000000..c314a513d
--- /dev/null
+++ b/app/packs/src/components/chemspectra/ChemSpectra.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { ChemSpectraClient } from '@complat/chem-spectra-client';
+
+const domLoadedCb = () => {
+  const csElement = document.getElementById('ChemSpectra');
+
+  if (csElement) {
+    ReactDOM.render(
+      <ChemSpectraClient />,
+      csElement,
+    );
+  }
+};
+
+document.addEventListener(
+  'DOMContentLoaded',
+  domLoadedCb,
+);
diff --git a/app/packs/src/components/chemspectra/ChemSpectraEditor.js b/app/packs/src/components/chemspectra/ChemSpectraEditor.js
new file mode 100644
index 000000000..ffecdddc4
--- /dev/null
+++ b/app/packs/src/components/chemspectra/ChemSpectraEditor.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { ChemSpectraClient } from '@complat/chem-spectra-client';
+
+const domLoadedCb = () => {
+  const csElement = document.getElementById('ChemSpectraEditor');
+
+  if (csElement) {
+    ReactDOM.render(
+      <ChemSpectraClient editorOnly />,
+      csElement,
+    );
+  }
+};
+
+document.addEventListener(
+  'DOMContentLoaded',
+  domLoadedCb,
+);
diff --git a/app/packs/src/components/collection_management/MyCollections.js b/app/packs/src/components/collection_management/MyCollections.js
new file mode 100644
index 000000000..2b30afba9
--- /dev/null
+++ b/app/packs/src/components/collection_management/MyCollections.js
@@ -0,0 +1,368 @@
+import React from 'react';
+import Tree from 'react-ui-tree';
+import { Button, ButtonGroup, FormControl, Modal } from 'react-bootstrap';
+import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import UserInfoIcon from 'src/apps/mydb/collections/UserInfoIcon';
+import PermissionIcons from 'src/apps/mydb/collections/PermissionIcons'
+
+export default class MyCollections extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: { id: null },
+      deleted_ids: [],
+
+      tree: {
+        label: 'My Collections',
+        id: -1,
+        children: [{}]
+      },
+      modalProps: {
+        show: false,
+        title: "",
+        component: "",
+        action: null,
+        collection: {},
+        selectUsers: true,
+        isChange: false
+      }
+    }
+    this.addSubcollection=this.addSubcollection.bind(this);
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    CollectionStore.listen(this.onStoreChange)
+    CollectionActions.fetchUnsharedCollectionRoots()
+  }
+
+  componentWillUnmount() {
+    CollectionStore.unlisten(this.onStoreChange)
+  }
+
+  onStoreChange(state) {
+    let children = state.unsharedRoots.length > 0 ? state.unsharedRoots : [{}];
+
+    this.setState({
+      tree: {
+        label: 'My Collections',
+        id: -1,
+        children: children
+      }
+    });
+  }
+
+  handleChange(tree) {
+    this.setState({
+      tree: tree,
+      isChange: true
+    });
+  }
+
+  isActive(node) {
+    return node === this.state.active ? "node is-active" : "node";
+  }
+
+  hasChildren(node) {
+    return node.children && node.children.length > 0
+  }
+
+  label(node) {
+    if (node.id == -1) {
+      return (
+        <FormControl
+        value ="My Collections"
+        type="text"
+        className="root-label"
+        disabled/>);
+    } else {
+      return (
+        <FormControl
+          className="collection-label"
+          type="text"
+          value={node.label || ''}
+          onChange={(e) => { this.handleLabelChange(e, node) }}
+        />
+      )
+    }
+  }
+
+  handleLabelChange(e, node) {
+    node.label = e.target.value;
+    this.setState({
+      tree: this.state.tree
+    });
+  }
+
+  // TODO: confirmation before start the updating process?
+  bulkUpdate() {
+    // filter empty objects
+    let collections = this.state.tree.children.filter((child) => {
+      return child.label
+    });
+
+    let params = {
+      collections: collections,
+      deleted_ids: this.state.deleted_ids
+    }
+
+    CollectionActions.bulkUpdateUnsharedCollections(params);
+  }
+
+  actions(node) {
+    if (node.id == -1) {
+      const { isChange } = this.state;
+      return (
+        <div className="root-actions">
+          {isChange && <Button
+          id="save-collections-button"
+          bsSize="xsmall"
+          bsStyle="warning"
+          onMouseDown={(e)=>{e.stopPropagation();}}
+          onClick={this.bulkUpdate.bind(this)}> Save </Button>}
+          {this.addCollectionButton(node)}
+        </div>
+      )
+    } else {
+      return (
+        <ButtonGroup className="actions">
+          <Button
+            id="sync-users-btn"
+            bsSize="xsmall"
+            bsStyle="primary"
+            disabled={node.isNew === true}
+            onClick={() => this.doSync(node, 'CreateSync')}
+          >
+            <i className="fa fa-plus"></i> <i className="fa fa-share-alt"></i>
+          </Button>
+
+          {this.addSubcollectionButton(node)}
+
+          <Button
+            bsSize="xsmall"
+            bsStyle="danger"
+            id={`delete-collection-button_${node.id}`}
+            onClick={this.deleteCollection.bind(this, node)}
+          >
+            <i className="fa fa-trash-o"></i>
+          </Button>
+        </ButtonGroup>
+      )
+    }
+  }
+
+  renderSync(node) {
+    let syncOut = node.sync_collections_users;
+    let users = [];
+
+    if (syncOut) {
+      users = syncOut.map((collection, ind) => {
+        return (
+          <div className="node">
+            <span key={ind} className="collection-sync-info">
+              <UserInfoIcon type={collection.type} /> {collection.name}
+              &nbsp; <PermissionIcons pl={collection.permission_level} />
+            </span>
+            <ButtonGroup className="actions">
+              <Button bsSize="xsmall" bsStyle="primary"
+                onClick={() => this.doSync(collection, 'EditSync')}>
+                <i className="fa fa-share-alt">edit</i>
+              </Button>
+              <Button bsSize="xsmall" bsStyle="danger"
+                onClick={() => CollectionActions.deleteSync({ id: collection.id, is_syncd: false })}
+              >
+                <i className="fa fa-share-alt" /> <i className="fa fa-trash-o"></i>
+              </Button>
+            </ButtonGroup>
+
+
+          </div>
+        )
+      })
+    }
+    return (
+      <div>{users.map(u => u)}</div>
+    )
+  }
+
+  doSync(node, action) {
+    let { modalProps, active } = this.state
+    modalProps.title = action == "CreateSync"
+      ? "Synchronize '" + node.label + "'"
+      : "Edit Synchronization"
+    modalProps.show = true
+    modalProps.action = action
+    modalProps.collection = node
+    modalProps.selectUsers = action == "CreateSync"
+      ? true
+      : false
+    active = node
+    this.setState({ modalProps, active })
+  }
+
+  addCollectionButton(node) {
+    return (
+      <Button
+        id="add-new-collection-button"
+        bsSize="xsmall"
+        bsStyle="success"
+        onClick={(e)=>{this.addSubcollection(node);}}
+        onMouseDown={(e)=>{e.stopPropagation();}}
+      >
+        <i className="fa fa-plus"></i>
+      </Button>
+    )
+  }
+
+  addSubcollectionButton(node) {
+    return (
+      <Button
+        id={`add-subcollection-to-collection_${node.id}`}
+        bsSize="xsmall"
+        bsStyle="success"
+        onClick={this.addSubcollection.bind(this, node)}
+      >
+        <i className="fa fa-plus"></i>
+      </Button>
+    )
+  }
+
+  addSubcollection(node) {
+    if (node.children) {
+      node.children.push({
+        id: Math.random(),
+        label: 'New Collection',
+        isNew: true
+      });
+    } else {
+      node.children = [{
+        id: Math.random(),
+        label: 'New Collection',
+        isNew: true
+      }];
+    }
+  }
+
+  deleteCollection(node) {
+    let children = node.children || [];
+    let parent = this.findParentById(this.state.tree, node.id);
+
+    this.removeNodeById(parent, node.id)
+    this.appendChildrenToParent(parent, children)
+
+    if (!node.isNew) {
+      let deleted_ids = this.state.deleted_ids.concat([node.id])
+
+      this.setState({
+        deleted_ids: deleted_ids
+      })
+    }
+  }
+
+  appendChildrenToParent(parent, children) {
+    if (children.length > 0) {
+      children.forEach((child) => {
+        parent.children.push(child);
+      });
+    } else if (parent.label == 'My Collections') {
+      parent.children.push({});
+    }
+  }
+
+  findParentById(root, id) {
+    if (!root.children) {
+      root.children = [];
+      return null;
+    }
+
+    let children = root.children;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].id == id) {
+        return root;
+      } else {
+        let parent = this.findParentById(children[i], id);
+        if (parent) {
+          return parent
+        }
+      }
+    }
+  }
+
+  removeNodeById(parent, id) {
+    parent.children = parent.children.filter((child) => {
+      return child.id != id
+    });
+  }
+
+  onClickNode(node) {
+    if (node.is_locked) {
+      this.setState({
+        active: { id: null }
+      });
+    } else {
+      this.setState({
+        active: node
+      });
+    }
+  }
+
+  handleModalHide() {
+    this.setState({
+      modalProps: {
+        show: false,
+        title: "",
+        component: "",
+        action: null,
+        collection: {},
+        selectUsers: true,
+      }
+    });
+  }
+
+  renderNode(node) {
+    if (!Object.keys(node).length == 0) {
+      return (
+        <div>
+          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
+            {this.label(node)}
+            {this.actions(node)}
+          </span>
+          {this.renderSync(node)}
+        </div>
+      );
+    }
+  }
+  render() {
+    let mPs = this.state.modalProps
+    let mPsC = mPs.collection
+    return (
+      <div className="tree">
+        <Tree
+          paddingLeft={20}                         // left padding for children nodes in pixels
+          tree={this.state.tree}                   // tree object
+          isNodeCollapsed={this.isNodeCollapsed}
+          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
+          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
+        />
+        <Modal animation show={mPs.show} onHide={this.handleModalHide.bind(this)}>
+          <Modal.Header closeButton>
+            <Modal.Title>{mPs.title}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ManagingModalSharing collectionId={mPsC.id}
+              onHide={this.handleModalHide.bind(this)}
+              permissionLevel={mPsC.permission_level}
+              sampleDetailLevel={mPsC.sample_detail_level} reactionDetailLevel={mPsC.reaction_detail_level}
+              wellplateDetailLevel={mPsC.wellplate_detail_level} screenDetailLevel={mPsC.screen_detail_level}
+              selectUsers={mPs.selectUsers}
+              collAction={mPs.action} />
+          </Modal.Body>
+        </Modal>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/collection_management/MySharedCollections.js b/app/packs/src/components/collection_management/MySharedCollections.js
new file mode 100644
index 000000000..da2b0acc8
--- /dev/null
+++ b/app/packs/src/components/collection_management/MySharedCollections.js
@@ -0,0 +1,300 @@
+import React from 'react';
+import Tree from 'react-ui-tree';
+import { Button, ButtonGroup, FormControl, Modal } from 'react-bootstrap';
+import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+
+export default class MySharedCollections extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: { id: null },
+      deleted_ids: [],
+
+      tree: {
+        label: 'My Shared Collections',
+        id: -1,
+        children: [{}]
+      },
+      modalProps: {
+        show: false,
+        title: "",
+        component: "",
+        action: null
+      }
+    }
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    CollectionStore.listen(this.onStoreChange)
+    CollectionActions.fetchSharedCollectionRoots()
+  }
+
+  componentWillUnmount() {
+    CollectionStore.unlisten(this.onStoreChange)
+  }
+
+  onStoreChange(state) {
+    let children = state.sharedRoots.length > 0 ? state.sharedRoots : [{}];
+
+    this.setState({
+      tree: {
+        label: 'My Shared Collections',
+        children: children
+      }
+    });
+  }
+
+  handleChange(tree) {
+    let oldTree = this.state.tree
+    let children = oldTree.children
+    children.map((child, i) => {
+      if ('label' in tree && typeof (tree.label) == 'string' && tree.label == child.label) {
+        children[i] = tree
+        return
+      }
+    });
+    oldTree.children = children
+    this.setState({
+      tree: oldTree
+    });
+
+  }
+
+  isActive(node) {
+    return node === this.state.active ? "node is-active" : "node";
+  }
+
+  hasChildren(node) {
+    return node.children && node.children.length > 0
+  }
+
+  label(node) {
+    if (node.label == "My Shared Collections") {
+      return (
+        <FormControl 
+        value ="My Shared Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
+    } else if (node.is_locked) {
+      return (
+        <FormControl className="collection-label" type="text"
+          disabled
+          value={node.label || ''}
+        />
+      )
+
+    } else {
+      return (
+        <FormControl className="collection-label" type="text"
+          value={node.label || ''}
+          onChange={(e) => { this.handleLabelChange(e, node) }}
+        />
+      )
+    }
+  }
+
+  handleLabelChange(e, node) {
+    node.label = e.target.value;
+    this.setState({
+      tree: this.state.tree
+    });
+  }
+
+  // TODO: confirmation before start the updating process?
+  bulkUpdate() {
+    // filter empty objects
+    let collections = this.state.tree.children.filter((child) => {
+      return child.label
+    });
+
+    let params = {
+      collections: collections,
+      deleted_ids: this.state.deleted_ids
+    }
+
+    CollectionActions.bulkUpdateUnsharedCollections(params);
+  }
+
+  actions(node) {
+    if (node.label == "My Shared Collections") {
+      return (
+        <div className="root-actions">
+          <Button bsSize="xsmall" bsStyle="warning"
+            onClick={this.bulkUpdate.bind(this)}
+            onMouseDown={(e)=>{e.stopPropagation();}}
+            >
+            Update
+          </Button>
+        </div>
+      )
+    } else if (!node.is_locked) {
+      return (
+        <ButtonGroup className="actions">
+          <Button bsSize="xsmall" bsStyle="primary"
+            onClick={() => this.editShare(node)}>
+            <i className="fa fa-share-alt"></i>
+          </Button>
+          <Button bsSize="xsmall" bsStyle="danger" onClick={this.deleteCollection.bind(this, node)}>
+            <i className="fa fa-trash-o"></i>
+          </Button>
+        </ButtonGroup>
+      )
+    }
+  }
+
+  editShare(node) {
+    let { modalProps, active } = this.state
+    modalProps.title = "Update Share Settings for '" + node.label + "'"
+    modalProps.show = true
+    active = node
+    this.setState({ modalProps, active })
+  }
+  deleteCollection(node) {
+    let children = node.children || [];
+    let parent = this.findParentById(this.state.tree, node.id);
+
+    this.removeNodeById(parent, node.id)
+    this.appendChildrenToParent(parent, children)
+
+    if (!node.isNew) {
+      let deleted_ids = this.state.deleted_ids.concat([node.id])
+
+      this.setState({
+        deleted_ids: deleted_ids
+      })
+    }
+  }
+
+  appendChildrenToParent(parent, children) {
+    if (children.length > 0) {
+      children.forEach((child) => {
+        parent.children.push(child);
+      });
+    } else if (parent.label == 'My Shared Collections') {
+      parent.children.push({});
+    }
+  }
+
+  findParentById(root, id) {
+    if (!root.children) {
+      root.children = [];
+      return null;
+    }
+
+    let children = root.children;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].id == id) {
+        return root;
+      } else {
+        let parent = this.findParentById(children[i], id);
+        if (parent) {
+          return parent
+        }
+      }
+    }
+  }
+
+  removeNodeById(parent, id) {
+    parent.children = parent.children.filter((child) => {
+      return child.id != id
+    });
+  }
+
+  onClickNode(node) {
+    if (node.is_locked) {
+      this.setState({
+        active: { id: null }
+      });
+    } else {
+      this.setState({
+        active: node
+      });
+    }
+  }
+
+  handleModalHide() {
+    this.setState({
+      modalProps: {
+        show: false,
+        title: "",
+        component: "",
+        action: null
+      }
+    });
+  }
+
+  renderNode(node) {
+    if (!Object.keys(node).length == 0) {
+      if (node.is_locked) {
+        return (
+          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
+            {this.label(node)}
+            {this.actions(node)}
+          </span>
+        )
+      } else {
+        return (
+          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
+            {this.label(node)}
+            {this.actions(node)}
+          </span>
+        );
+
+      }
+
+    }
+  }
+
+
+
+  render() {
+    let actNode = this.state.active
+    let trees = () => this.state.tree.children.map((e, i) => {
+      return (
+        <Tree
+          key={i}
+          paddingLeft={20}                         // left padding for children nodes in pixels
+          tree={e}                   // tree object
+          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
+          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
+        />
+      )
+    })
+
+    return (
+      <div className="tree">
+        <Tree
+          paddingLeft={20}                         // left padding for children nodes in pixels
+          tree={{
+            label: 'My Shared Collections',
+            id: -1,
+          }}                   // tree object
+          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
+          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
+        />
+        {trees()}
+        <Modal animation show={this.state.modalProps.show} onHide={this.handleModalHide.bind(this)}>
+          <Modal.Header closeButton>
+            <Modal.Title>{this.state.modalProps.title}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ManagingModalSharing collectionId={actNode.id}
+              onHide={this.handleModalHide.bind(this)}
+              permissionLevel={actNode.permission_level}
+              sampleDetailLevel={actNode.sample_detail_level} reactionDetailLevel={actNode.reaction_detail_level}
+              wellplateDetailLevel={actNode.wellplate_detail_level} screenDetailLevel={actNode.screen_detail_level}
+              selectUsers={false}
+              collAction="Update" />
+          </Modal.Body>
+        </Modal>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/collection_management/SharedWithMeCollections.js b/app/packs/src/components/collection_management/SharedWithMeCollections.js
new file mode 100644
index 000000000..6d96879ac
--- /dev/null
+++ b/app/packs/src/components/collection_management/SharedWithMeCollections.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import Tree from 'react-ui-tree';
+import { Button, ButtonGroup, FormControl, OverlayTrigger, Popover } from 'react-bootstrap';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+
+export default class SharedWithMeCollections extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tree: {
+        label: 'Shared with me Collections',
+        id: -1,
+        children: [{}]
+      }
+    }
+    this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    CollectionStore.listen(this.onStoreChange)
+    CollectionActions.fetchRemoteCollectionRoots()
+  }
+
+  componentWillUnmount() {
+    CollectionStore.unlisten(this.onStoreChange)
+  }
+
+  onStoreChange(state) {
+    const children = state.remoteRoots.length > 0 ? state.remoteRoots : [{}];
+
+    children.map((child) => {
+      if (child.is_locked) {
+        let label = '';
+        if (child.shared_by != null) {
+          label = `by ${child.shared_by.initials} (${child.shared_by.name})`;
+        }
+        if (child.shared_to != null) {
+          label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;
+        }
+        child.label = label;
+      }
+      return child;
+    });
+
+    this.setState({
+      tree: {
+        label: 'Shared with me Collections',
+        children
+      }
+    });
+  }
+
+  handleClick() {
+    this.setState({ show: !this.state.show });
+  }
+
+  label(node) {
+    if(node.label == "Shared with me Collections") {
+      return (
+        <FormControl 
+        value ="Synchronized with me Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
+    } else {
+      return (
+        <FormControl
+          className="collection-label"
+          type="text"
+          disabled
+          value={node.label || ''}
+        />
+      )
+    }
+  }
+
+  actions(node) {
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        delete collection: <br /> {node.label} ?<br />
+        <ButtonGroup>
+          <Button bsStyle="danger" bsSize="xsmall" onClick={() => CollectionActions.rejectShared({ id: node.id })}>
+          Yes
+          </Button>
+          <Button bsStyle="warning" bsSize="xsmall" onClick={this.handleClick} >
+          No
+          </Button>
+        </ButtonGroup>
+      </Popover>
+    );
+
+    if (!node.is_locked && node.label !== 'Shared with me Collections') {
+      if (typeof (node.shared_to) === 'undefined' || !node.shared_to) {
+        return (
+          <ButtonGroup className="actions">
+            <OverlayTrigger
+              animation
+              placement="bottom"
+              root
+              trigger="focus"
+              overlay={popover}
+            >
+              <Button bsSize="xsmall" bsStyle="danger" >
+                <i className="fa fa-trash-o" />
+              </Button>
+            </OverlayTrigger>
+          </ButtonGroup>
+        )
+      }
+    }
+    return (
+      <div />
+    )
+  }
+
+  renderNode(node) {
+    if (!Object.keys(node).length == 0) {
+      return (
+        <span className="node">
+          {this.label(node)}
+          {this.actions(node)}
+        </span>
+      );
+    }
+    return (
+      <div />
+    )
+  }
+
+  render() {
+    const trees = () => this.state.tree.children.map((e, i) => {
+      return (
+        <Tree
+          key={i}
+          draggable={false}
+          paddingLeft={20}
+          tree={e}
+          renderNode={this.renderNode.bind(this)}
+        />
+      )
+    })
+
+    return (
+      <div className="tree">
+        <Tree
+          draggable={false}
+          paddingLeft={20}
+          tree={{
+            label: 'Shared with me Collections',
+            id: -1,
+          }}
+          renderNode={this.renderNode.bind(this)}
+        />
+        {trees()}
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/collection_management/SyncWithMeCollections.js b/app/packs/src/components/collection_management/SyncWithMeCollections.js
new file mode 100644
index 000000000..3e232d5e0
--- /dev/null
+++ b/app/packs/src/components/collection_management/SyncWithMeCollections.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import Tree from 'react-ui-tree';
+import { Button, ButtonGroup, FormControl, OverlayTrigger, Popover } from 'react-bootstrap';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+
+export default class SyncWithMeCollections extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tree: {
+        label: 'Synchronized with me Collections',
+        id: -1,
+        children: [{}],
+      }
+    }
+    this.onStoreChange = this.onStoreChange.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    CollectionStore.listen(this.onStoreChange)
+    CollectionActions.fetchSyncInCollectionRoots()
+  }
+
+  componentWillUnmount() {
+    CollectionStore.unlisten(this.onStoreChange)
+  }
+
+  onStoreChange(state) {
+    const children = state.syncInRoots.length > 0 ? state.syncInRoots : [{}];
+    children.map((child) => {
+      if (child.is_locked) {
+        let label = '';
+        if (child.shared_by != null) {
+          label = `by ${child.shared_by.initials} (${child.shared_by.name})`;
+        }
+        if (child.shared_to != null) {
+          label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;
+        }
+        child.label = label;
+      }
+      return child;
+    });
+
+    this.setState({
+      tree: {
+        label: 'Synchronized with me Collections',
+        children
+      }
+    });
+  }
+
+  handleClick() {
+    this.setState({ show: !this.state.show });
+  }
+
+  label(node) {
+    if (node.root) {
+      return (
+        <FormControl 
+        value ="Synchronized with me Collections" 
+        type="text" 
+        className="root-label" 
+        disabled/>);
+    }
+    return (
+      <FormControl
+        className="collection-label"
+        type="text"
+        disabled
+        value={node.label || ''}
+      />
+    )
+  }
+
+  actions(node) {
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        delete collection: <br /> {node.label} ?<br />
+        <ButtonGroup>
+          <Button bsStyle="danger" bsSize="xsmall" onClick={() => CollectionActions.rejectSync({ id: node.id, is_syncd: true })}>
+          Yes
+          </Button>
+          <Button bsStyle="warning" bsSize="xsmall" onClick={this.handleClick} >
+          No
+          </Button>
+        </ButtonGroup>
+      </Popover>
+    );
+    if (!node.is_locked && node.label !== 'Synchronized with me Collections') {
+      if (typeof (node.user) !== 'undefined' && node.user.type === 'Person') {
+        return (
+          <ButtonGroup className="actions">
+            <OverlayTrigger
+              animation
+              placement="bottom"
+              onExit={document.body.click()}
+              root
+              trigger="focus"
+              overlay={popover}
+            >
+              <Button bsSize="xsmall" bsStyle="danger" >
+                <i className="fa fa-trash-o" />
+              </Button>
+            </OverlayTrigger>
+          </ButtonGroup>
+        )
+      }
+    }
+    return (
+      <div />
+    )
+  }
+
+  renderNode(node) {
+    if (!Object.keys(node).length == 0) {
+      return (
+        <span className="node">
+          {this.label(node)}
+          {this.actions(node)}
+        </span>
+      );
+    }
+    return (
+      <div />
+    )
+  }
+
+  render() {
+    const trees = () => this.state.tree.children.map((e, i) => {
+      return (
+        <Tree
+          key={i}
+          draggable={false}
+          paddingLeft={20}
+          tree={e}
+          renderNode={this.renderNode.bind(this)}
+        />
+      )
+    })
+
+    return (
+      <div className="tree">
+        <Tree
+          draggable={false}
+          paddingLeft={20}
+          tree={{
+            label: 'Synchronized with me Collections',
+            root: true,
+            id: -1,
+            path: -1
+          }}
+          renderNode={this.renderNode.bind(this)}
+        />
+        {trees()}
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/common/CustomTextEditor.js b/app/packs/src/components/common/CustomTextEditor.js
new file mode 100644
index 000000000..a1486db99
--- /dev/null
+++ b/app/packs/src/components/common/CustomTextEditor.js
@@ -0,0 +1,52 @@
+import React from 'react'
+
+export default class CustomTextEditor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: this.props.value
+        };
+    }
+    // The following workaround is necessary to prevent React Data Grid from
+    // setting input data to the wrong cell when cellRangeSelection is used.
+    // https://github.com/adazzle/react-data-grid/issues/1460#issuecomment-461552949
+    componentDidMount() {
+        document.addEventListener('mousedown', this.handleMouseDown, true);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleMouseDown, true);
+    }
+    handleMouseDown = (e) => {
+        e.stopPropagation();
+        this.props.onCommit();
+    }
+    
+    getValue() {
+        const key = this.props.column.key;
+        return { [key]: this.state.value };
+    }
+
+    handleChange = (e) => {
+        this.setState({ value: e.target.value });
+    };
+
+    getInputNode() {
+        return this.refs.input;
+    }
+
+    disableContainerStyles() {
+        return true;
+    }
+
+    render() {
+        return (<input
+            ref="input"
+            value={this.state.value}
+            onChange={this.handleChange}
+            style={{
+                width: this.props.column.width,
+                height: this.props.height
+            }}
+        />);
+    }
+}
\ No newline at end of file
diff --git a/app/packs/src/components/common/RepoMetadataModal.js b/app/packs/src/components/common/RepoMetadataModal.js
new file mode 100644
index 000000000..7defa8a65
--- /dev/null
+++ b/app/packs/src/components/common/RepoMetadataModal.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+export default class RepoMetadataModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false,
+      metadata: []
+    };
+    this.loadMetadata = this.loadMetadata.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadMetadata();
+  }
+
+  loadMetadata() {
+    const { elementId, elementType } = this.props;
+    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
+      this.setState({ metadata: result.metadata });
+    });
+  }
+
+  render() {
+    const { modalShow, metadata } = this.state;
+    const { elementId, elementType } = this.props;
+    return (
+      <div>
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
+        >
+          <Button
+            onClick={() => this.setState({ modalShow: true })}
+            style={{ marginLeft: '5px' }}
+          >
+            <i className="fa fa-file-code-o" />&nbsp;
+            Metadata
+          </Button>
+        </OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="news-preview-dialog"
+        >
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              <h4>
+                <Label>
+                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
+                </Label>
+              </h4>
+            </div>
+            <div style={{
+              maxHeight: '50vh',
+              overflow: 'auto',
+              whiteSpace: 'pre',
+              backgroundColor: 'black',
+              color: 'white',
+              fontFamily: 'monospace'
+            }}
+            >
+              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
+            </div>
+            <br />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
+              > Download
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+RepoMetadataModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired
+};
diff --git a/app/packs/src/components/common/RepoPreviewImage.js b/app/packs/src/components/common/RepoPreviewImage.js
new file mode 100644
index 000000000..7827481ed
--- /dev/null
+++ b/app/packs/src/components/common/RepoPreviewImage.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageModal from './ImageModal';
+import RepoSpectraBtn from './RepoSpectra';
+
+const RepoPreviewImage = (props) => {
+  const {
+    element, analysis, isLogin, previewImg, title
+  } = props;
+  let hasPop = true;
+  let fetchNeeded = false;
+  let fetchId = 0;
+  let fetchFilename = '';
+  let imageStyle = { style: { cursor: 'default' } };
+  if (previewImg.startsWith('data:image')) {
+    fetchNeeded = true;
+    fetchId = analysis.preview_img.id;
+    fetchFilename = analysis.preview_img.filename;
+  } else {
+    hasPop = false;
+    imageStyle = { style: { cursor: 'default', display: 'none' } };
+  }
+  return (
+    <div className="preview">
+      <div className="spectra" {...imageStyle}>
+        <RepoSpectraBtn element={element} analysis={analysis} isLogin={isLogin} />
+      </div>
+      <ImageModal
+        imageStyle={imageStyle}
+        hasPop={hasPop}
+        previewObject={{ src: previewImg }}
+        popObject={{
+          title, src: previewImg, fetchNeeded, fetchId, fetchFilename
+        }}
+      />
+    </div>
+  );
+};
+
+RepoPreviewImage.propTypes = {
+  element: PropTypes.object,
+  analysis: PropTypes.object,
+  isLogin: PropTypes.bool,
+  previewImg: PropTypes.string.isRequired,
+  title: PropTypes.string
+};
+
+RepoPreviewImage.defaultProps = {
+  isLogin: false,
+  title: ''
+};
+
+export default RepoPreviewImage;
diff --git a/app/packs/src/components/common/RepoPublicComment.js b/app/packs/src/components/common/RepoPublicComment.js
new file mode 100644
index 000000000..7753daeb4
--- /dev/null
+++ b/app/packs/src/components/common/RepoPublicComment.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl, Label } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import PublicActions from '../actions/PublicActions';
+
+export default class RepoPublicComment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false
+    };
+    this.updateComment = this.updateComment.bind(this);
+  }
+
+  updateComment() {
+    const { id, type, pageType, pageId } = this.props;
+    RepositoryFetcher.reviewerComment(id, type, this.commentInput.value)
+      .then((result) => {
+        this.setState({ modalShow: false });
+        if (pageType === 'reactions') {
+          PublicActions.displayReaction(pageId || id);
+        } else {
+          PublicActions.displayMolecule(pageId);
+        }
+      });
+  }
+
+  render() {
+    const { modalShow } = this.state;
+    const { isReviewer, userInfo, title } = this.props;
+    const defaultAttrs = {
+      style: {
+        height: '400px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    let btnTbl = (<span />);
+    let commentModal = (<span />);
+    const style = { height: '20px', width: '20px', borderRadius: '50%', border: '1px' };
+    const hasComment = userInfo != '';
+
+    if (hasComment === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data</Tooltip>}>
+          <Button bsSize="xsmall" bsStyle="warning" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    } else if (hasComment === false && isReviewer === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data (edit)</Tooltip>}>
+          <Button bsSize="xsmall" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    }
+
+    if (isReviewer === true) {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <FormControl
+              componentClass="textarea"
+              defaultValue={userInfo || ''}
+              {...defaultAttrs}
+              inputRef={(m) => { this.commentInput = m; }}
+            />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => this.updateComment()}
+              > Update
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      );
+    } else {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto', whiteSpace: 'pre-wrap' }}>
+            {userInfo}
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return (
+      <span>
+        {btnTbl}
+        {commentModal}
+      </span>
+    );
+  }
+}
+
+RepoPublicComment.propTypes = {
+  id: PropTypes.number.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  userInfo: PropTypes.string,
+  isReviewer: PropTypes.bool,
+  type: PropTypes.string,
+  pageId: PropTypes.number,
+  pageType: PropTypes.string,
+  title: PropTypes.string
+};
+
+RepoPublicComment.defaultProps = {
+  isReviewer: false,
+  type: '',
+  pageId: null,
+  pageType: 'reactions',
+  userInfo: '',
+  title: ''
+};
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
new file mode 100644
index 000000000..6389f2285
--- /dev/null
+++ b/app/packs/src/components/common/RepoReviewAuthorsModal.js
@@ -0,0 +1,522 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Checkbox, Table } from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import { findIndex, filter, uniq, flattenDeep } from 'lodash';
+import { OrcidIcon } from '../../libHome/RepoCommon';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import SelectionField from '../common/SelectionField';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
+import ReviewActions from '../actions/ReviewActions';
+import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+
+const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
+const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation from this Publication</Tooltip>;
+
+const lineAff = (creator, aid, affs, onDeleteAff) => {
+  const removeBtn = (
+    <OverlayTrigger placement="right" overlay={removeAffTooltip} >
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        onClick={() => onDeleteAff(creator, aid)}
+      >
+        <i className="fa fa-trash-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+  return (
+    <tr key={uuid.v4()} style={{ lineHeight: '2em' }}>
+      <td colSpan="4" width="90%">{affs[aid]}</td>
+      <td align="right" width="10%">{ removeBtn }</td>
+    </tr>
+  );
+};
+
+const secAff = (fields, g, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
+  return (
+    <tr className="aff-line" style={{ lineHeight: '2em' }}>
+      <td width="30%">
+        <SelectionField
+          options={departments}
+          value={(fields[`${g.id}@line_department`]) || ''}
+          field={`${g.id}@line_department`}
+          placeholder="e.g. Institute of Organic Chemistry"
+          onChange={onInputChange}
+          isCreatable
+        />
+      </td>
+      <td width="40%">
+        <SelectionField
+          options={organizations}
+          value={(fields[`${g.id}@line_organization`]) || ''}
+          field={`${g.id}@line_organization`}
+          placeholder="e.g. Karlsruhe Institute of Technology"
+          onChange={onInputChange}
+          isCreatable
+        />
+      </td>
+      <td width="20%">
+        <SelectionField
+          options={countries}
+          value={(fields[`${g.id}@line_country`]) || ''}
+          field={`${g.id}@line_country`}
+          onChange={onInputChange}
+          placeholder="e.g. Germany"
+        />
+      </td>
+      <td width="10%" align="right" >
+        <OverlayTrigger placement="right" overlay={addAffTooltip} >
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={() => onAddAff(g)}
+          >
+            <i className="fa fa-plus" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+      </td>
+    </tr>
+  );
+};
+
+const affbody = (taggData, creator, fields, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
+  const affs = taggData.affiliations || {};
+  const mainAff = creator.affiliationIds && creator.affiliationIds.length > 0 ?
+    creator.affiliationIds.map(aid => lineAff(creator, aid, affs, onDeleteAff)) : '';
+  const moreAff = secAff(fields, creator, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) || '';
+
+  return (
+    <span>
+      {mainAff}
+      {moreAff}
+    </span>
+  );
+
+}
+
+export default class RepoReviewAuthorsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      taggData: null,
+      modalShow: false,
+      selectedAuthors: null,
+      collaborations: [],
+      countries: [],
+      fields: {},
+      organizations: [],
+      departments: [],
+    };
+
+    this.handleSelectAuthors = this.handleSelectAuthors.bind(this);
+    this.loadCollaborations = this.loadCollaborations.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.onAddAff = this.onAddAff.bind(this);
+    this.onDeleteAff = this.onDeleteAff.bind(this);
+    this.onAddNewAuthor = this.onAddNewAuthor.bind(this);
+    this.onSave = this.onSave.bind(this);
+    this.loadOrcid = this.loadOrcid.bind(this);
+    this.handleDeleteAuthor = this.handleDeleteAuthor.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadCollaborations();
+    PublicFetcher.affiliations('countries').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ countries: affOption });
+    });
+    PublicFetcher.affiliations('organizations').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ organizations: affOption });
+    });
+    PublicFetcher.affiliations('departments').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ departments: affOption });
+    });
+  }
+
+  componentWillUnmount() {
+    this.setState({
+      taggData: null
+    });
+  }
+
+  onAddNewAuthor() {
+    const { selectedAuthors, collaborations } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
+    const { affiliations, creators, affiliation_ids, author_ids } = taggData;
+
+    const coidx = findIndex(collaborations, o => o.id === selectedAuthors.value);
+    const selCol = collaborations[coidx];
+    const affIds = selCol.current_affiliations.map(ca => (ca.id));
+
+    selCol.current_affiliations.map((ca) => {
+      affiliations[ca.id] = [ca.department, ca.organization, ca.country].join(', ');
+    });
+
+    const newAuthor = {
+      id: selCol.id,
+      familyName: selCol.last_name,
+      givenName: selCol.first_name,
+      name: selCol.name,
+      ORCID: selCol.orcid,
+      affiliationIds: affIds
+    };
+
+    creators.push(newAuthor);
+
+    //collaborations.splice(coidx, 1);
+
+    taggData.creators = creators;
+    taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids.concat(affIds)));
+    author_ids.push(newAuthor.id);
+    taggData.author_ids = author_ids;
+    taggData.affiliations = affiliations;
+    this.setState({ taggData, selectedAuthors: null });
+  }
+
+  onAddAff(g) {
+    const { fields } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
+    const department = fields[`${g.id}@line_department`];
+    const organization = fields[`${g.id}@line_organization`];
+    const country = fields[`${g.id}@line_country`];
+    const { affiliations, creators, affiliation_ids } = taggData;
+
+    const params = {
+      department, organization, country
+    };
+    UsersFetcher.findAndCreateAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          affiliations[result.id] = result.aff_output;
+          g.affiliationIds.push(result.id);
+          const idx = findIndex(creators, o => o.id === g.id);
+          // authors.splice(idx, 1, result.user);
+          fields[`${g.id}@line_department`] = '';
+          fields[`${g.id}@line_organization`] = '';
+          fields[`${g.id}@line_country`] = '';
+          taggData.affiliations = affiliations;
+          affiliation_ids.push(result.id);
+          taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids));
+          taggData.creators[idx] = g;
+
+          this.setState({ taggData, fields });
+        }
+      });
+  }
+
+  onDeleteAff(g, aid) {
+    const taggData = this.state.taggData || this.props.taggData;
+    const { creators } = taggData;
+
+    const ax = findIndex(g.affiliationIds, o => o.id === aid);
+    g.affiliationIds.splice(ax, 1);
+    const cx = findIndex(creators, o => o.id === g.id);
+    taggData.creators[cx] = g;
+    this.setState({ taggData });
+  }
+
+  onSave() {
+    const { taggData } = this.state;
+    const { element } = this.props;
+
+    if (taggData == null) {
+      alert('no changes!');
+      return true;
+    }
+
+    const { creators } = taggData;
+    const authorCount = (creators || []).length;
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
+      return true;
+    }
+
+    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.element_id || element.id, elementType: element.element_type || element.elementType })
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          if (element.elementType === 'Reaction') {
+            ReviewActions.displayReviewReaction(element.id);
+          } else if (element.elementType === 'Sample') {
+            ReviewActions.displayReviewSample(element.id);
+          }
+          this.setState({ taggData: null, modalShow: false });
+        }
+      });
+    return true;
+  }
+
+  loadOrcid() {
+    const taggData = this.state.taggData || this.props.taggData;
+    const { creators, contributors, author_ids } = taggData;
+    let ids = [];
+    ids.push(contributors.id);
+    ids = ids.concat(author_ids);
+    CollaboratorFetcher.loadOrcidByUserId({ ids }).then((result) => {
+      const orcids = result.orcids || [];
+      const cx = findIndex(orcids, o => o.id === contributors.id);
+      if (cx > -1) {
+        contributors.ORCID = orcids[cx].orcid;
+      }
+
+      creators.forEach((creator, idx) => {
+        const cix = findIndex(orcids, o => o.id === creator.id);
+        if (cix > -1) {
+          creators[idx].ORCID = orcids[cix].orcid;
+        }
+      });
+      taggData.creators = creators;
+      taggData.contributors = contributors;
+      this.setState({ taggData });
+    });
+  }
+
+  handleInputChange(type, ev) {
+    let { fields } = this.state;
+    switch (type) {
+      case 'country':
+        fields.country = ev && ev.value;
+        break;
+      case 'organization':
+        fields.organization = ev && ev.value;
+        break;
+      case 'department':
+        fields.department = ev && ev.value;
+        break;
+      default:
+        if (typeof fields === 'undefined') {
+          fields = {};
+        }
+        fields[type] = ev && ev.value;
+    }
+    this.setState({ fields });
+  }
+
+
+  handleSelectAuthors(val) {
+    if (val) { this.setState({ selectedAuthors: val }); }
+  }
+
+  loadCollaborations() {
+    CollaboratorFetcher.fetchMyCollaborations()
+      .then((result) => {
+        this.setState({
+          collaborations: result.authors
+        });
+      });
+  }
+
+  handleDeleteAuthor(author) {
+    const taggData = this.state.taggData || this.props.taggData;
+    const { creators, author_ids } = taggData;
+    taggData.creators = filter(creators, o => o.id !== author.id);
+    taggData.author_ids = filter(author_ids, o => o !== author.id);
+    this.setState({
+      taggData
+    });
+  }
+
+  contributor() {
+    const taggData = this.state.taggData || this.props.taggData;
+    const contributors = taggData?.contributors || {};
+
+    const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
+    const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
+      <div key={uuid.v4()}>  -{contributors.affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br /> {aff} </div>);
+
+  }
+
+
+  handleClose() {
+    this.setState({ taggData: null, modalShow: false })
+  }
+
+  selectUsers() {
+    const { selectedAuthors, collaborations } = this.state;
+    const taggData = this.state.taggData || this.props.taggData || {};
+    const creators = taggData?.creators || [];
+    const author_ids = taggData?.author_ids || [];
+
+    const affiliations = taggData.affiliations || [];
+    let defaultSelectedAuthors = [];
+
+    const filterCol = (collaborations || []).filter(({ id }) => !(author_ids || []).includes(id));
+
+    const options = filterCol.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    if (selectedAuthors == null) {
+      defaultSelectedAuthors = creators.map(au => (
+        { label: au.name, value: au.id }
+      ));
+    } else {
+      defaultSelectedAuthors = selectedAuthors;
+    }
+
+    const authorInfo = creators && creators.map((author) => {
+      const orcid = author.ORCID == null ? '' : <OrcidIcon orcid={author.ORCID} />;
+
+      const affIds = author.affiliationIds || [];
+      const aff = affIds.map(id => (
+        <div key={uuid.v4()}>  -{affiliations[id]}</div>
+      ));
+      return (<div key={uuid.v4()}>{orcid}{author.name}<br />{aff}<br /></div>);
+    });
+
+    const authorCount = (creators || []).length;
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
+        </Checkbox>
+        <InputGroup>
+          <InputGroup.Addon>My Collaboration(s)</InputGroup.Addon>
+          <Select
+            searchable
+            placeholder="Select authors from my collaboration"
+            backspaceRemoves
+            value={defaultSelectedAuthors}
+            defaultValue={defaultSelectedAuthors}
+            valueKey="value"
+            labelKey="label"
+            matchProp="name"
+            options={options}
+            onChange={this.handleSelectAuthors}
+          />
+          <InputGroup.Button>
+            <Button bsStyle="success" onClick={() => this.onAddNewAuthor()}>
+              <i className="fa fa-plus" />
+              Add to Author List
+            </Button>
+          </InputGroup.Button>
+        </InputGroup>
+      </div>
+    );
+  }
+
+  render() {
+    const { modalShow, countries, organizations, departments, fields } = this.state;
+    const { element, disabled } = this.props;
+    const taggData = this.state.taggData || this.props.taggData;
+    const creators = taggData?.creators || [];
+    if (this.props.schemeOnly === true) {
+      return '';
+    }
+
+    let tbody = '';
+
+    tbody = creators.map(creator => (
+      <tbody key={`tbody_${uuid.v1()}`}>
+        <tr key={`tbody_${uuid.v1()}`}>
+          <td>
+            <DeleteConfirmBtn
+              label={creator.name}
+              onClickYes={() => this.handleDeleteAuthor(creator)}
+            />
+            &nbsp;
+          </td>
+          <td>{creator.name}</td>
+          <td><OrcidIcon orcid={creator.ORCID} />{creator.ORCID}</td>
+          <td>
+            {affbody(taggData, creator, fields, countries, organizations, departments, this.onAddAff, this.onDeleteAff, this.handleInputChange)}
+          </td>
+        </tr>
+
+      </tbody>
+    ));
+
+    let btn = (<Button style={{ marginLeft: '5px' }} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-users" />&nbsp;Publication Authors</Button>);
+    if (element?.element_type === 'Collection' || disabled === true) {
+      btn = (<Button disabled={disabled} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-plus" />&nbsp;Add Authors</Button>);
+    }
+
+    return (
+      <span>
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}>{btn}</OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={this.handleClose}
+          dialogClassName="author-modal-dialog"
+        >
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              {this.contributor()}
+              {this.selectUsers()}
+            </div>
+            <br />
+            <div>
+              <Table responsive condensed hover>
+                <thead>
+                  <tr style={{ backgroundColor: '#ddd' }}>
+                    <th width="5%">Action</th>
+                    <th width="10%">Name</th>
+                    <th width="15%">ORCID</th>
+                    <th width="70%">
+                      <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                        <tbody>
+                          <tr>
+                            <td style={{ padding: 'unset' }} width="90%">Affiliation</td>
+                            <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
+                          </tr>
+                        </tbody>
+                      </Table>
+                    </th>
+                  </tr>
+                </thead>
+                { tbody }
+              </Table>
+            </div>
+
+            <ButtonToolbar>
+              <Button bsStyle="warning" onClick={() => this.handleClose()}> Close</Button>
+              <Button
+                bsStyle="info"
+                onClick={() => this.loadOrcid()}
+              > get ORCID
+              </Button>
+              <Button
+                bsStyle="success"
+                onClick={() => this.onSave()}
+              > Save
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </span>
+    );
+  }
+}
+
+RepoReviewAuthorsModal.propTypes = {
+  element: PropTypes.object,
+  review_info: PropTypes.object,
+  disabled: PropTypes.bool,
+  schemeOnly: PropTypes.bool,
+  taggData: PropTypes.object.isRequired,
+};
+
+RepoReviewAuthorsModal.defaultProps = {
+  review_info: {},
+  schemeOnly: false,
+  disabled: false,
+  taggData: {}
+};
diff --git a/app/packs/src/components/common/RepoSpectra.js b/app/packs/src/components/common/RepoSpectra.js
new file mode 100644
index 000000000..0922cbf56
--- /dev/null
+++ b/app/packs/src/components/common/RepoSpectra.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
+import { BuildSpcInfos } from '../utils/SpectraHelper';
+import SpectraActions from '../actions/SpectraActions';
+import ViewSpectra from '../ViewSpectra';
+import NotificationActions from '../actions/NotificationActions';
+
+const RepoSpectraBtn = (props) => {
+  const { element, analysis } = props;
+  if (element == null || analysis == null) return null;
+  const spcInfos = BuildSpcInfos(element, analysis);
+  if (spcInfos.length < 1) return null;
+  const toggleSpectraModal = (e) => {
+    e.stopPropagation();
+    if (!props.isLogin) {
+      NotificationActions.add({
+        title: 'View Spectra', message: 'Please log in first.', level: 'warning', position: 'tc'
+      });
+    } else {
+      SpectraActions.ToggleModal();
+      SpectraActions.LoadSpectra.defer(spcInfos);
+    }
+  };
+  return (
+    <span>
+      <OverlayTrigger placement="top" delayShow={500} overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}>
+        <Button
+          bsSize="xsmall"
+          className="button-right"
+          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+          onClick={toggleSpectraModal}
+          disabled={!(spcInfos.length > 0)}
+        >
+          <i className="fa fa-area-chart" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+      <ViewSpectra sample={element} handleSampleChanged={() => { }} handleSubmit={() => { }} />
+    </span>
+  );
+};
+
+RepoSpectraBtn.propTypes = { element: PropTypes.object, analysis: PropTypes.object, isLogin: PropTypes.bool };
+RepoSpectraBtn.defaultProps = { isLogin: false };
+
+export default RepoSpectraBtn;
diff --git a/app/packs/src/components/common/RepoUserComment.js b/app/packs/src/components/common/RepoUserComment.js
new file mode 100644
index 000000000..a1f14dd38
--- /dev/null
+++ b/app/packs/src/components/common/RepoUserComment.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+export default class RepoUserComment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false
+    };
+    this.sendEmail = this.sendEmail.bind(this);
+  }
+
+  sendEmail() {
+    const { id, type, pageType, pageId } = this.props;
+    RepositoryFetcher.userComment(id, type, pageId || id, pageType, this.commentInput.value)
+      .then((result) => {
+        this.setState({ modalShow: false });
+      });
+  }
+
+  render() {
+    const { modalShow } = this.state;
+    const { id, isLogin, title } = this.props;
+    const defaultAttrs = {
+      style: {
+        height: '400px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    if (isLogin) {
+      return (
+        <span>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
+            <Button bsSize="xsmall" onClick={() => this.setState({ modalShow: true })}>
+              <i className="fa fa-envelope-o" />
+            </Button>
+          </OverlayTrigger>
+          <Modal
+            show={modalShow}
+            onHide={() => this.setState({ modalShow: false })}
+            dialogClassName="pub-info-dialog"
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Comments for the reviewers
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body style={{ overflow: 'auto' }}>
+              {title}
+              <FormControl
+                componentClass="textarea"
+                {...defaultAttrs}
+                inputRef={(m) => { this.commentInput = m; }}
+              />
+              <br />
+              <ButtonToolbar>
+                <Button
+                  bsStyle="warning"
+                  onClick={() => this.setState({ modalShow: false })}
+                > Close
+                </Button>
+                <Button
+                  bsStyle="primary"
+                  onClick={() => this.sendEmail()}
+                > Send to Chemotion Reviewers
+                </Button>
+              </ButtonToolbar>
+            </Modal.Body>
+          </Modal>
+        </span>
+      );
+    }
+    return (<span />);
+  }
+}
+
+RepoUserComment.propTypes = {
+  id: PropTypes.number.isRequired,
+  isLogin: PropTypes.bool,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  pageType: PropTypes.string,
+  pageId: PropTypes.number
+};
+
+RepoUserComment.defaultProps = {
+  isLogin: false,
+  type: '',
+  title: '',
+  pageType: 'reactions',
+  pageId: null
+};
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
new file mode 100644
index 000000000..46d94dede
--- /dev/null
+++ b/app/packs/src/components/common/RepoXvialButton.js
@@ -0,0 +1,327 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Modal,
+  Button,
+  OverlayTrigger,
+  Tooltip,
+  FormControl,
+} from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import NotificationActions from '../actions/NotificationActions';
+import { CompoundList } from '../chemrepo/ma/MAModals';
+
+const registedCompoundTooltip = (
+  <div className="repo-xvial-info">
+    For availability please contact the Compound Platform team (
+    <span className="env">
+      <i className="fa fa-envelope-o" aria-hidden="true" />
+    </span>
+    ). An explanation can be accessed via our Youtube channel&nbsp;
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"
+    >
+      <i className="fa fa-youtube-play youtube" />
+    </a>
+    &nbsp;or on our how-to pages
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"
+    >
+      <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
+    </a>
+  </div>
+);
+
+export default class RepoXvialButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataModalShow: false,
+      requestModalShow: false,
+      newData: props.data,
+    };
+    this.save = this.save.bind(this);
+    this.remove = this.remove.bind(this);
+    this.request = this.request.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.checkRequest = this.checkRequest.bind(this);
+    this.selectXvial = this.selectXvial.bind(this);
+    this.setNewData = this.setNewData.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.data !== prevProps.data) {
+      this.setNewData(this.props.data);
+    }
+  }
+
+  setNewData(newData) {
+    this.setState({ newData });
+  }
+
+  selectXvial(xid) {
+    this.setNewData(xid);
+  }
+
+  checkRequest() {
+    if (this.props.isLogin) {
+      this.setState({ requestModalShow: true });
+    } else {
+      NotificationActions.add({
+        title: 'Request to the Compound-Platform.eu',
+        message: 'Please log in to send the request.',
+        level: 'warning',
+        position: 'tc',
+      });
+    }
+  }
+
+  save() {
+    const { newData } = this.state;
+    const { elementId, saveCallback } = this.props;
+    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
+      this.closeModal();
+      saveCallback(elementId, newData);
+    });
+  }
+
+  remove() {
+    const { elementId, saveCallback } = this.props;
+    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
+      this.closeModal();
+      saveCallback(elementId, '');
+    });
+  }
+
+  request() {
+    const { elementId } = this.props;
+    RepositoryFetcher.compound(elementId, this.rInput.value, 'request').then(
+      () => {
+        this.closeModal();
+        NotificationActions.add({
+          title: 'Request to the Compound-Platform.eu',
+          message: 'Your request has been emailed to the Compound-Platform',
+          level: 'info',
+          position: 'tc',
+        });
+      }
+    );
+  }
+
+  closeModal() {
+    this.setState({
+      dataModalShow: false,
+      requestModalShow: false,
+      newData: this.props.data,
+    });
+  }
+
+  render() {
+    const { dataModalShow, requestModalShow, newData } = this.state;
+    const { isEditable, isLogin, data, allowRequest, xvialCom } = this.props;
+    const hasData = !!(data && data !== '');
+    const compoundLink = hasData ? (
+      <OverlayTrigger
+        placement="top"
+        overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}
+      >
+        <Button
+          bsStyle="link"
+          bsSize="xsmall"
+          onClick={() => {
+            window.open('https://compound-platform.eu/home', '_blank');
+          }}
+        >
+          X-Vial: Sample available
+        </Button>
+      </OverlayTrigger>
+    ) : null;
+    const dataModal = (
+      <Modal
+        bsSize="large"
+        show={dataModalShow}
+        onHide={() => this.closeModal()}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Compound X-vial number</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormControl type="text" value={newData} readOnly />
+          {CompoundList(xvialCom, newData, this.selectXvial)}
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; The currently stored data:{' '}
+            <span style={{ background: '#d1e7dd', color: '#0f5132' }}>
+              highlighted with a color
+            </span>
+            .
+          </div>
+          <div>
+            <i className="fa fa-info-circle" aria-hidden="true" />
+            &nbsp; Click on a row to select the X-Vial. Remember to press the
+            &#39;Save&#39; button if you wish to save the selection.
+          </div>
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>
+            Cancel
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => this.save()}>
+            Save
+          </Button>
+          &nbsp;
+          <Button bsStyle="danger" onClick={() => this.remove()}>
+            Remove X-Vial
+          </Button>
+        </Modal.Body>
+      </Modal>
+    );
+    const requestModal = (
+      <Modal
+        show={requestModalShow}
+        onHide={() => this.closeModal()}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Request compound</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormControl
+            style={{ height: '300px' }}
+            componentClass="textarea"
+            inputRef={(m) => {
+              this.rInput = m;
+            }}
+            placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email."
+          />
+          <br />
+          <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
+            <b>Data privacy statement</b> This contact form can be used to get
+            in contact to the team of the molecule archive. The information that
+            you enter into the form is sent - along with the email address and
+            your name that you entered with the registration to chemotion
+            repository - to the management team of the compound platform only.
+            The data is not stored, the information is available per email only.
+            People in the management team handle your request as confidential
+            information. No other services or third parties are included.
+          </p>
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>
+            Close
+          </Button>
+          &nbsp;
+          <Button bsStyle="primary" onClick={() => this.request()}>
+            Send request to the Compound-Platform
+          </Button>
+        </Modal.Body>
+      </Modal>
+    );
+    const editLink = isEditable ? (
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          <Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>
+        }
+      >
+        <a
+          onClick={() => this.setState({ dataModalShow: true })}
+          rel="noopener noreferrer"
+        >
+          <i className="fa fa-pencil" />
+        </a>
+      </OverlayTrigger>
+    ) : null;
+    const requestLink =
+      allowRequest && hasData ? (
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}
+        >
+          <a onClick={() => this.checkRequest()} rel="noopener noreferrer">
+            <i className="fa fa-envelope-o" />
+          </a>
+        </OverlayTrigger>
+      ) : null;
+    const info = requestLink ? (
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement="top"
+        overlay={
+          <Tooltip
+            id="registed_compound_tooltip"
+            className="left_tooltip bs_tooltip"
+          >
+            {registedCompoundTooltip}
+          </Tooltip>
+        }
+      >
+        <a rel="noopener noreferrer">
+          <i className="fa fa-info-circle" aria-hidden="true" />
+        </a>
+      </OverlayTrigger>
+    ) : null;
+    if (!isLogin) {
+      if (compoundLink) {
+        return (
+          <span className="xvial-pub-elem">
+            <span>
+              <i className="icon-xvial" aria-hidden="true" />
+              {compoundLink}
+              {requestLink}
+              {info}
+            </span>
+          </span>
+        );
+      }
+      return null;
+    }
+    if (compoundLink) {
+      return (
+        <span className="xvial-pub-elem">
+          <span>
+            <i className="icon-xvial" aria-hidden="true" />
+            {compoundLink}
+            {editLink}
+            {requestLink}
+            {info}
+          </span>
+          {dataModal}
+          {requestModal}
+        </span>
+      );
+    }
+    if (editLink) {
+      return (
+        <span className="xvial-pub-elem">
+          <span>
+            <i className="icon-xvial" aria-hidden="true" />
+            {editLink}
+          </span>
+          {dataModal}
+        </span>
+      );
+    }
+    return null;
+  }
+}
+
+RepoXvialButton.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  isEditable: PropTypes.bool,
+  isLogin: PropTypes.bool,
+  allowRequest: PropTypes.bool,
+  data: PropTypes.string,
+  saveCallback: PropTypes.func,
+};
+
+RepoXvialButton.defaultProps = {
+  isEditable: false,
+  isLogin: false,
+  allowRequest: false,
+  data: null,
+  saveCallback: () => {},
+};
diff --git a/app/packs/src/components/common/SvgWithPopover.js b/app/packs/src/components/common/SvgWithPopover.js
index ef27667c4..8645b39b3 100644
--- a/app/packs/src/components/common/SvgWithPopover.js
+++ b/app/packs/src/components/common/SvgWithPopover.js
@@ -20,7 +20,7 @@ export default class SvgWithPopover extends Component {
       >
         {
           previewObject.isSVG
-          ? 
+          ?
           <div style={{ height: popObject.height, width: popObject.width }}>
             <SvgFileZoomPan
               svgPath={popObject.src}
diff --git a/app/packs/src/components/computedProps/ComputedPropsGraph.js b/app/packs/src/components/computedProps/ComputedPropsGraph.js
index d5dc7374f..06fd24d2f 100644
--- a/app/packs/src/components/computedProps/ComputedPropsGraph.js
+++ b/app/packs/src/components/computedProps/ComputedPropsGraph.js
@@ -14,6 +14,11 @@ const previewStyle = {
   width: '200px'
 };
 
+const previewStyle = {
+  background: 'white',
+  width: '200px'
+};
+
 export default class ComputedPropsGraph extends React.Component {
   constructor(props) {
     super(props);
diff --git a/app/packs/src/components/computed_props/ComputedPropLabel.js b/app/packs/src/components/computed_props/ComputedPropLabel.js
new file mode 100644
index 000000000..4e1eee92f
--- /dev/null
+++ b/app/packs/src/components/computed_props/ComputedPropLabel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import UserStore from 'src/stores/alt/stores/UserStore';
+import MatrixCheck from 'src/components/common/MatrixCheck';
+
+const ComputedPropLabel = ({ cprops }) => {
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  const enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
+  if (!enableComputedProps) return <span />;
+
+  if (!cprops || cprops.length === 0) return <span />;
+  cprops.sort((a, b) => a.updated_at - b.updated_at);
+  const { status } = cprops[cprops.length - 1];
+
+  let statusIcon = '';
+  const style = {};
+  if (['success','completed'].includes(status)) {
+    statusIcon = 'fa-calculator';
+    style.color = 'green';
+  } else if (status === 'pending') {
+    statusIcon = 'fa-ellipsis-h';
+    style.color = '#f0ad4e';
+  } else if (status === 'started') {
+    statusIcon = 'fa-spinner fa-spin';
+    style.color = '#5bc0de';
+  } else if (status === 'failure') {
+    statusIcon = 'fa-calculator';
+    style.color = 'black';
+  }
+
+  return (
+    <i className={`fa ${statusIcon}`} style={style} />
+  );
+};
+
+ComputedPropLabel.propTypes = {
+  cprops: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default ComputedPropLabel;
diff --git a/app/packs/src/components/computed_props/ComputedPropsContainer.js b/app/packs/src/components/computed_props/ComputedPropsContainer.js
new file mode 100644
index 000000000..a8c8459ab
--- /dev/null
+++ b/app/packs/src/components/computed_props/ComputedPropsContainer.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonGroup, Button, ControlLabel } from 'react-bootstrap';
+
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+
+import ComputedPropsGraphContainer from 'src/components/computedProps/ComputedPropsGraphContainer';
+import SampleComputedProps from 'src/components/computedProps/SampleComputedProps';
+import { ConfirmModal } from 'src/components/common/ConfirmModal';
+
+export default class ComputedPropsContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showGraph: false,
+      compute: false
+    };
+
+    this.onClickComputeBtn = this.onClickComputeBtn.bind(this);
+    this.computePropsFromSmiles = this.computePropsFromSmiles.bind(this);
+    this.toggleGraph = this.toggleGraph.bind(this);
+  }
+
+  onClickComputeBtn() {
+    this.setState({ compute: true });
+  }
+
+  computePropsFromSmiles(shouldPerform) {
+    if (shouldPerform) {
+      const { sample } = this.props;
+      ElementActions.computePropsFromSmiles(sample.id);
+    }
+
+    this.setState({ compute: false });
+  }
+
+  toggleGraph() {
+    this.setState({ showGraph: !this.state.showGraph });
+  }
+
+  render() {
+    const { sample } = this.props;
+    const cprops = sample.molecule_computed_props || [];
+    let lastCProp = null;
+
+    if (cprops && cprops.length > 0) {
+      cprops.sort((a, b) => a.updated_at - b.updated_at);
+      lastCProp = cprops[cprops.length - 1];
+    }
+
+    const { compute, showGraph } = this.state;
+    let text = 'Show Graph';
+    let arrow = <i className="fa fa-angle-double-down" />;
+
+    if (showGraph) {
+      text = 'Hide Graph';
+      arrow = <i className="fa fa-angle-double-up" />;
+    }
+    const confirmText = (
+      <ControlLabel>Would you like to simulate this molecule ?</ControlLabel>
+    );
+
+    return (
+      <div>
+        <SampleComputedProps cprops={cprops} />
+        <Button
+          bsStyle="success"
+          bsSize="small"
+          className="button-right"
+          onClick={this.onClickComputeBtn}
+          style={{ marginTop: '10px', marginBottom: '10px' }}
+        >
+          <i className="fa fa-paper-plane" />
+          &nbsp;&nbsp; Compute
+        </Button>
+        <ButtonGroup vertical block>
+          <Button
+            bsSize="xsmall"
+            style={{ marginBottom: '20px', backgroundColor: '#ddd' }}
+            onClick={this.toggleGraph}
+          >
+            {text} &nbsp; {arrow}
+          </Button>
+        </ButtonGroup>
+        <ComputedPropsGraphContainer
+          show={showGraph}
+          graphData={[{ name: sample.short_label, props: lastCProp }]}
+        />
+        <ConfirmModal
+          showModal={compute}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.computePropsFromSmiles}
+        />
+      </div>
+    );
+  }
+}
+
+ComputedPropsContainer.propTypes = {
+  sample: PropTypes.object.isRequired,
+};
diff --git a/app/packs/src/components/computed_props/ComputedPropsGraph.js b/app/packs/src/components/computed_props/ComputedPropsGraph.js
new file mode 100644
index 000000000..06fd24d2f
--- /dev/null
+++ b/app/packs/src/components/computed_props/ComputedPropsGraph.js
@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  XYPlot, HorizontalGridLines, VerticalGridLines,
+  XAxis, YAxis, Hint, DiscreteColorLegend, MarkSeries,
+} from 'react-vis';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+
+import Highlight from 'src/components/computedProps/Highlight';
+import CustomAxisLabel from 'src/components/computedProps/CustomAxisLabel';
+
+const previewStyle = {
+  background: 'white',
+  width: '200px'
+};
+
+const previewStyle = {
+  background: 'white',
+  width: '200px'
+};
+
+export default class ComputedPropsGraph extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hintValue: null,
+      svgPath: null,
+      lastDrawLocation: null,
+    };
+
+    this.setHint = this.setHint.bind(this);
+    this.removeHint = this.removeHint.bind(this);
+  }
+
+  setHint(value) {
+    const { svgPath, ...hintValue } = value;
+    this.setState({ hintValue, svgPath });
+  }
+
+  removeHint() {
+    this.setState({ hintValue: null, svgPath: null });
+  }
+
+  render() {
+    const {
+      data, show, xAxis, yAxis, referencePoints
+    } = this.props;
+
+    if (!show || data.length === 0) return <span />;
+
+    const refData = referencePoints.filter(ref => ref.x && ref.y);
+
+    const { hintValue, svgPath, lastDrawLocation } = this.state;
+
+    const xAxisLabel = xAxis.label || 'LUMO';
+    const yAxisLabel = yAxis.label || 'ESP';
+
+    let xDomain = xAxis.range;
+    let yDomain = yAxis.range;
+    if (lastDrawLocation) {
+      xDomain = [lastDrawLocation.left, lastDrawLocation.right];
+      yDomain = [lastDrawLocation.bottom, lastDrawLocation.top];
+    }
+
+    const dataInfo = {
+      color: '#79c7e3',
+      title: 'Data'
+    };
+    const refInfo = {
+      color: '#1a3177',
+      title: 'Reference'
+    };
+
+    return (
+      <div>
+        <div style={{ float: 'left' }}>
+          <XYPlot
+            height={450}
+            width={450}
+            xDomain={xDomain}
+            yDomain={yDomain}
+            margin={{
+              left: 55, right: 10, top: 10, bottom: 55
+            }}
+          >
+            <VerticalGridLines />
+            <HorizontalGridLines />
+            <XAxis />
+            <YAxis />
+            <Highlight
+              onBrushEnd={area => this.setState({ lastDrawLocation: area })}
+            />
+            <MarkSeries
+              data={data}
+              onValueMouseOver={this.setHint}
+              onValueMouseOut={this.removeHint}
+              color={dataInfo.color}
+            />
+            <MarkSeries
+              data={refData}
+              onValueMouseOver={this.setHint}
+              onValueMouseOut={this.removeHint}
+              color={refInfo.color}
+            />
+            {hintValue && (
+              <Hint value={hintValue}>
+                <div className="rv-hint__content" style={previewStyle}>
+                  <div>
+                    <SvgFileZoomPan
+                      svgPath={svgPath}
+                      duration={300}
+                      resize
+                    />
+                  </div>
+                  <div className="rv-hint__content">
+                    {Object.keys(hintValue).map(key => (
+                      <div key={`rv-hint${key}`}>
+                        <span className="rv-hint__title">
+                          {key}
+                        </span>
+                        {': '}
+                        <span className="rv-hint__value">
+                          {hintValue[key]}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </Hint>
+            )}
+            <CustomAxisLabel title={`${xAxisLabel} (${xAxis.unit})`} xAxis />
+            <CustomAxisLabel title={`${yAxisLabel} (${yAxis.unit})`} />
+          </XYPlot>
+        </div>
+        <div style={{ float: 'right' }}>
+          <DiscreteColorLegend
+            width={105}
+            items={[dataInfo, refInfo]}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ComputedPropsGraph.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  show: PropTypes.bool.isRequired,
+  xAxis: PropTypes.object.isRequired,
+  yAxis: PropTypes.object.isRequired,
+  referencePoints: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // referenceDesc: PropTypes.string.isRequired,
+};
diff --git a/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js b/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
new file mode 100644
index 000000000..2cf321444
--- /dev/null
+++ b/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
@@ -0,0 +1,329 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import Select from 'react-select';
+import {
+  Grid, Row, Col, Button, ControlLabel, Form, FormGroup, FormControl
+} from 'react-bootstrap';
+
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
+
+import ComputedPropsGraph from 'src/components/computedProps/ComputedPropsGraph';
+import GraphReferenceTable from 'src/components/computedProps/GraphReferenceTable';
+
+const etlReferences = [
+  { x: -1.8, y: 50, type: 'reference' },
+  { x: -1.8, y: 90, type: 'reference' },
+  { x: -2.2, y: 50, type: 'reference' },
+  { x: -2.0, y: 10, type: 'reference' },
+  { x: -1.6, y: 10, type: 'reference' },
+  { x: -1.4, y: 50, type: 'reference' }
+];
+
+const defaultTemplate = {
+  name: 'Default',
+  xAxisType: 'lumo',
+  yAxisType: 'mean_abs_potential',
+  referenceDesc: 'Compounds are interesting as material for the ' +
+    'Electron Transport Layer (ETL)',
+  referencePoints: etlReferences,
+};
+
+const graphSettings = {
+  mean_abs_potential: { label: 'ESP', unit: 'mV', range: [0, 400] },
+  lumo: { label: 'LUMO', unit: 'eV', range: [-7, 2] },
+  homo: { label: 'HOMO', unit: 'eV', range: [-12, 0] },
+  ip: { label: 'IP', unit: 'eV', range: [2, 10] },
+  ea: { label: 'EA', unit: 'eV', range: [-2, 6] },
+  dipol_debye: { label: 'Dipol', unit: 'debye', range: [0, 14] },
+};
+
+export default class ComputedPropsGraphContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      curTemplateIdx: 0,
+      graphTemplates: [],
+    };
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.onTemplateChange = this.onTemplateChange.bind(this);
+    this.onXAxisChange = this.onXAxisChange.bind(this);
+    this.onYAxisChange = this.onYAxisChange.bind(this);
+
+    this.updateReferences = this.updateReferences.bind(this);
+    this.saveTemplate = this.saveTemplate.bind(this);
+    this.deleteTemplate = this.deleteTemplate.bind(this);
+    this.onDescChange = this.onDescChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+  }
+
+  UNSAFE_componentWillReceiveProps() {
+    this.onUserChange();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange() {
+    const userState = UserStore.getState();
+    const profileData = _.get(userState, 'profile.data', {});
+    const graphTemplates = _.get(
+      profileData,
+      'computed_props.graph_templates',
+      [defaultTemplate]
+    );
+
+    const curTemplateIdx = _.get(profileData, 'computed_props.cur_template_idx', 0);
+    this.setState({ graphTemplates, curTemplateIdx });
+  }
+
+  onXAxisChange(xAxis) {
+    const { curTemplateIdx, graphTemplates } = this.state;
+    const newGraphTemplates = graphTemplates.map((templ, idx) => {
+      if (idx === curTemplateIdx) {
+        const newTempl = _.cloneDeep(templ);
+        newTempl.xAxisType = xAxis.value;
+        return newTempl;
+      }
+      return templ;
+    });
+
+    this.setState({ graphTemplates: newGraphTemplates });
+  }
+
+  onYAxisChange(yAxis) {
+    const { curTemplateIdx, graphTemplates } = this.state;
+    const newGraphTemplates = graphTemplates.map((templ, idx) => {
+      if (idx === curTemplateIdx) {
+        const newTempl = _.cloneDeep(templ);
+        newTempl.yAxisType = yAxis.value;
+        return newTempl;
+      }
+      return templ;
+    });
+
+    this.setState({ graphTemplates: newGraphTemplates });
+  }
+
+  onDescChange(e) {
+    const { curTemplateIdx, graphTemplates } = this.state;
+    const desc = e.target.value;
+    const newGraphTemplates = graphTemplates.map((templ, idx) => {
+      if (idx === curTemplateIdx) {
+        const newTempl = _.cloneDeep(templ);
+        newTempl.referenceDesc = desc;
+        return newTempl;
+      }
+      return templ;
+    });
+
+    this.setState({ graphTemplates: newGraphTemplates });
+  }
+
+  onTemplateChange(template) {
+    const { graphTemplates } = this.state;
+    const tIdx = graphTemplates.findIndex(t => t.name === template.label);
+    if (tIdx > -1) {
+      this.setState({ curTemplateIdx: tIdx });
+    } else {
+      const newTempl = {
+        name: template.label,
+        xAxisType: 'lumo',
+        yAxisType: 'mean_abs_potential',
+        referenceDesc: '',
+        referencePoints: [],
+      };
+
+      graphTemplates.push(newTempl);
+      this.setState({
+        graphTemplates,
+        curTemplateIdx: graphTemplates.length - 1,
+      });
+    }
+  }
+
+  updateReferences(refs) {
+    const { curTemplateIdx, graphTemplates } = this.state;
+    const newGraphTemplates = graphTemplates.map((templ, idx) => {
+      if (idx === curTemplateIdx) {
+        const newTempl = _.cloneDeep(templ);
+        newTempl.referencePoints = refs;
+        return newTempl;
+      }
+      return templ;
+    });
+
+    this.setState({ graphTemplates: newGraphTemplates });
+  }
+
+  saveTemplate() {
+    const userProfile = UserStore.getState().profile;
+    const { graphTemplates, curTemplateIdx } = this.state;
+    _.set(userProfile, 'data.computed_props.graph_templates', graphTemplates);
+    _.set(userProfile, 'data.computed_props.cur_template_idx', curTemplateIdx);
+    UserActions.updateUserProfile(userProfile);
+  }
+
+  deleteTemplate() {
+    const userProfile = UserStore.getState().profile;
+    const { graphTemplates } = this.state;
+    const { curTemplateIdx } = this.state;
+    const newGraphTemplates = _.cloneDeep(graphTemplates);
+    newGraphTemplates.splice(curTemplateIdx, 1);
+    const newTemplateIdx = curTemplateIdx > 1 ? (curTemplateIdx - 1) : 0;
+    _.set(userProfile, 'data.computed_props.graph_templates', newGraphTemplates);
+    _.set(userProfile, 'data.computed_props.cur_template_idx', newTemplateIdx);
+    UserActions.updateUserProfile(userProfile);
+  }
+
+  render() {
+    const { show, graphData, style } = this.props;
+    if (!show || graphData.length === 0) return <span />;
+
+    const { curTemplateIdx, graphTemplates } = this.state;
+    const template = graphTemplates.size === 0 ?
+      defaultTemplate :
+      graphTemplates[curTemplateIdx];
+
+    const xAxisType = template.xAxisType || 'lumo';
+    const yAxisType = template.yAxisType || 'mean_abs_potential';
+    const xAxis = graphSettings[xAxisType] || graphSettings.lumo;
+    const yAxis = graphSettings[yAxisType] || graphSettings.mean_abs_potential;
+
+    const { referenceDesc } = template;
+    const referencePoints = template.referencePoints || etlReferences;
+    if (referencePoints.length === 0) {
+      referencePoints.push({ x: '', y: '', type: 'reference' });
+    }
+
+    const data = graphData.filter(dat => dat.props).map(dat => ({
+      name: dat.name,
+      svgPath: dat.svgPath,
+      x: _.get(dat, `props.${xAxisType}`, dat.props.lumo),
+      y: _.get(dat, `props.${yAxisType}`, dat.props.mean_abs_potential),
+    }));
+
+    const axisSelectOptions = Object.keys(graphSettings).map(k => (
+      { label: graphSettings[k].label, value: k }
+    ));
+    const templateOptions = graphTemplates.map((templ, idx) => (
+      { label: templ.name, value: idx }
+    ));
+
+    return (
+      <Grid fluid style={style}>
+        <Row className="show-grid">
+          <Col xs={18} md={12}>
+            <ComputedPropsGraph
+              xAxis={xAxis}
+              yAxis={yAxis}
+              show={show}
+              data={data}
+              style={style}
+              referencePoints={referencePoints}
+              referenceDesc={referenceDesc}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={9} md={6}>
+            <GraphReferenceTable
+              xLabel={xAxis.label}
+              yLabel={yAxis.label}
+              data={referencePoints}
+              updateData={this.updateReferences}
+            />
+          </Col>
+          <Col xs={9} md={6}>
+            <Form horizontal>
+              <FormGroup controlId="formInlineTemplate">
+                <Col componentClass={ControlLabel} sm={4}>
+                  Template
+                </Col>
+                <Col sm={8}>
+                  <Select.Creatable
+                    onChange={this.onTemplateChange}
+                    value={curTemplateIdx}
+                    options={templateOptions}
+                    clearable={false}
+                    promptTextCreator={label => `Create new ${label} template`}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formInlineXAxis">
+                <Col componentClass={ControlLabel} sm={4}>
+                  X Axis
+                </Col>
+                <Col sm={8}>
+                  <Select
+                    onChange={this.onXAxisChange}
+                    value={xAxisType}
+                    clearable={false}
+                    options={axisSelectOptions}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formInlineYAxis">
+                <Col componentClass={ControlLabel} sm={4}>
+                  Y Axis
+                </Col>
+                <Col sm={8}>
+                  <Select
+                    onChange={this.onYAxisChange}
+                    value={yAxisType}
+                    clearable={false}
+                    options={axisSelectOptions}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup controlId="formInlineRefDesc">
+                <Col componentClass={ControlLabel} sm={4}>
+                  References Description
+                </Col>
+                <Col sm={8}>
+                  <FormControl
+                    componentClass="textarea"
+                    type="description"
+                    placeholder="Description"
+                    value={referenceDesc}
+                    style={{ height: '193px' }}
+                    onChange={e => this.onDescChange(e)}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup style={{ marginBottom: 0 }}>
+                <Col sm={12}>
+                  <Button bsStyle="info" onClick={this.saveTemplate}>
+                    Save Template
+                  </Button>
+                  {' '}
+                  <Button bsStyle="danger" onClick={this.deleteTemplate}>
+                    Delete Template
+                  </Button>
+                </Col>
+              </FormGroup>
+            </Form>
+          </Col>
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+ComputedPropsGraphContainer.propTypes = {
+  graphData: PropTypes.arrayOf(PropTypes.object).isRequired,
+  show: PropTypes.bool.isRequired,
+  style: PropTypes.object,
+};
+
+ComputedPropsGraphContainer.defaultProps = {
+  style: {}
+}
diff --git a/app/packs/src/components/computed_props/CustomAxisLabel.js b/app/packs/src/components/computed_props/CustomAxisLabel.js
new file mode 100644
index 000000000..4f3c7b51d
--- /dev/null
+++ b/app/packs/src/components/computed_props/CustomAxisLabel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CustomAxisLabel({
+  marginTop, marginLeft, innerWidth, innerHeight, title, xAxis
+}) {
+  const yLabelOffset = {
+    y: marginTop + (innerHeight / 2) + (title.length * 2),
+    x: 10
+  };
+
+  const xLabelOffset = {
+    x: (marginLeft + (innerWidth / 2)) - (title.length * 4),
+    y: (innerHeight * 1.1) + 10
+  };
+
+  const transform = xAxis
+    ? `translate(${xLabelOffset.x}, ${xLabelOffset.y})`
+    : `translate(${yLabelOffset.x}, ${yLabelOffset.y}) rotate(-90)`;
+
+  return (
+    <g transform={transform}>
+      <text className="unselectable axis-labels" style={{ fill: '#6b6b76' }}>
+        {title}
+      </text>
+    </g>
+  );
+}
+
+CustomAxisLabel.propTypes = {
+  title: PropTypes.string.isRequired,
+  xAxis: PropTypes.bool.isRequired,
+};
+
+CustomAxisLabel.defaultProps = {
+  xAxis: false
+}
+
+CustomAxisLabel.displayName = 'CustomAxisLabel';
+CustomAxisLabel.requiresSVG = true;
+
+export default CustomAxisLabel;
diff --git a/app/packs/src/components/computed_props/GraphReferenceTable.js b/app/packs/src/components/computed_props/GraphReferenceTable.js
new file mode 100644
index 000000000..e31d341f2
--- /dev/null
+++ b/app/packs/src/components/computed_props/GraphReferenceTable.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+import { Button } from 'react-bootstrap';
+
+function TableEditBtn({ dataLength, onEditBtnClick, node }) {
+  const isAdd = node.rowIndex === dataLength;
+  const btnIcon = isAdd ? 'fa-plus' : 'fa-minus';
+
+  return (
+    <Button
+      active
+      onClick={() => onEditBtnClick(node.rowIndex)}
+      bsSize="xsmall"
+    >
+      <i className={`fa ${btnIcon}`} />
+    </Button>
+  );
+}
+
+TableEditBtn.propTypes = {
+  dataLength: PropTypes.number.isRequired,
+  onEditBtnClick: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+};
+
+export default class GraphReferenceTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onRefsChanged = this.onRefsChanged.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onEditBtnClick = this.onEditBtnClick.bind(this);
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+  }
+
+  componentDidUpdate() {
+    if (this.gridColumnApi) this.autoSizeAll();
+  }
+
+  onGridReady(params) {
+    this.gridColumnApi = params.columnApi;
+  }
+
+  onRefsChanged(params) {
+    const { data, updateData } = this.props;
+    const refs = [...data];
+    refs[params.rowIndex] = params.data;
+
+    updateData(refs);
+  }
+
+  onEditBtnClick(rIdx) {
+    const { data, updateData } = this.props;
+    const isAdd = rIdx === (data.length - 1);
+    const refs = [...data];
+
+    if (isAdd) {
+      refs.push({ x: '', y: '', type: 'reference' });
+    } else {
+      refs.splice(rIdx, 1);
+    }
+
+    updateData(refs);
+  }
+
+  autoSizeAll() {
+    if (!this.api) return;
+    setTimeout(() => {
+      const allColumnIds = [];
+      this.gridColumnApi.getAllColumns().forEach((column) => {
+        allColumnIds.push(column.colId);
+      });
+
+      this.gridColumnApi.autoSizeColumns(allColumnIds);
+    }, 0);
+  }
+
+  render() {
+    const { xLabel, yLabel, data } = this.props;
+    const columnDefs = [
+      {
+        headerName: xLabel,
+        field: 'x',
+        editable: true,
+        cellEditor: 'agTextCellEditor',
+      },
+      {
+        headerName: yLabel,
+        field: 'y',
+        editable: true,
+        cellEditor: 'agTextCellEditor',
+      },
+      {
+        headerName: '',
+        field: 'type',
+        editable: false,
+        cellRendererFramework: TableEditBtn,
+        cellRendererParams: {
+          dataLength: data.length - 1,
+          onEditBtnClick: this.onEditBtnClick
+        },
+        headerComponentParams: { headerName: '' }
+      },
+    ];
+
+    return (
+      <div className="ag-theme-material">
+        <AgGridReact
+          columnDefs={columnDefs}
+          rowData={data}
+          domLayout="autoHeight"
+          onGridReady={this.onGridReady}
+          onCellValueChanged={this.onRefsChanged}
+        />
+      </div>
+    );
+  }
+}
+
+GraphReferenceTable.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateData: PropTypes.func.isRequired,
+  xLabel: PropTypes.string.isRequired,
+  yLabel: PropTypes.string.isRequired,
+};
diff --git a/app/packs/src/components/computed_props/Highlight.js b/app/packs/src/components/computed_props/Highlight.js
new file mode 100644
index 000000000..bef947927
--- /dev/null
+++ b/app/packs/src/components/computed_props/Highlight.js
@@ -0,0 +1,238 @@
+import React from 'react';
+import { ScaleUtils, AbstractSeries } from 'react-vis';
+
+function cropDimension(loc, startLoc, minLoc, maxLoc) {
+  if (loc < startLoc) {
+    return {
+      start: Math.max(loc, minLoc),
+      stop: startLoc
+    };
+  }
+
+  return {
+    stop: Math.min(loc, maxLoc),
+    start: startLoc
+  };
+}
+
+export default class Highlight extends AbstractSeries {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      drawing: false,
+      drawArea: {
+        top: 0, right: 0, bottom: 0, left: 0
+      },
+      x_start: 0,
+      y_start: 0,
+      xMode: false,
+      yMode: false,
+      xyMode: false
+    };
+
+    this.stopDrawing = this.stopDrawing.bind(this);
+    this.onParentMouseDown = this.onParentMouseDown.bind(this);
+    this.getMousePosition = this.getMousePosition.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mouseup', this.stopDrawing);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.stopDrawing);
+  }
+
+  getDrawArea(loc) {
+    const { innerWidth, innerHeight } = this.props;
+    const {
+      drawArea, xStart, yStart, xMode, yMode, xyMode
+    } = this.state;
+    const { x, y } = loc;
+    let out = drawArea;
+
+    if (xMode || xyMode) {
+      const { start, stop } = cropDimension(x, xStart, 0, innerWidth);
+      out = {
+        ...out,
+        left: start,
+        right: stop
+      };
+    }
+    if (yMode || xyMode) {
+      const { start, stop } = cropDimension(y, yStart, 0, innerHeight);
+      out = {
+        ...out,
+        top: innerHeight - start,
+        bottom: innerHeight - stop
+      };
+    }
+    return out;
+  }
+
+  onParentMouseDown(e) {
+    const { innerHeight, innerWidth, onBrushStart } = this.props;
+    const { x, y } = this.getMousePosition(e);
+    const yRect = innerHeight - y;
+
+    if (x < 0 && y >= 0) {
+      this.setState({
+        yMode: true,
+        drawing: true,
+        drawArea: {
+          top: yRect,
+          right: innerWidth,
+          bottom: yRect,
+          left: 0
+        },
+        yStart: y
+      });
+    } else if (x >= 0 && y < 0) {
+      this.setState({
+        xMode: true,
+        drawing: true,
+        drawArea: {
+          top: innerHeight,
+          right: x,
+          bottom: 0,
+          left: x
+        },
+        xStart: x
+      });
+    } else if (x >= 0 && y >= 0) {
+      this.setState({
+        xyMode: true,
+        drawing: true,
+        drawArea: {
+          top: yRect,
+          right: x,
+          bottom: yRect,
+          left: x
+        },
+        xStart: x,
+        yStart: y
+      });
+    }
+
+    if (onBrushStart) {
+      onBrushStart(e);
+    }
+  }
+
+  // onParentTouchStart(e) {
+  //   e.preventDefault();
+  //   this.onParentMouseDown(e);
+  // }
+
+  stopDrawing() {
+    this.setState({
+      xMode: false,
+      yMode: false,
+      xyMode: false
+    });
+
+    if (!this.state.drawing) {
+      return;
+    }
+
+    const { onBrushEnd } = this.props;
+    const { drawArea } = this.state;
+    const xScale = ScaleUtils.getAttributeScale(this.props, 'x');
+    const yScale = ScaleUtils.getAttributeScale(this.props, 'y');
+
+    // Clear the draw area
+    this.setState({
+      drawing: false,
+      drawArea: {
+        top: 0, right: 0, bottom: 0, left: 0
+      },
+      xStart: 0,
+      yStart: 0
+    });
+
+    if (Math.abs(drawArea.right - drawArea.left) < 5) {
+      onBrushEnd(null);
+      return;
+    }
+
+    const domainArea = {
+      bottom: yScale.invert(drawArea.top),
+      right: xScale.invert(drawArea.right),
+      top: yScale.invert(drawArea.bottom),
+      left: xScale.invert(drawArea.left)
+    };
+
+    if (onBrushEnd) {
+      onBrushEnd(domainArea);
+    }
+  }
+
+  getMousePosition(e) {
+    const { marginLeft, marginTop, innerHeight } = this.props;
+
+    const locX = e.nativeEvent.offsetX - marginLeft;
+    const locY = (innerHeight + marginTop) - e.nativeEvent.offsetY;
+
+    return { x: locX, y: locY };
+  }
+
+  onParentMouseMove(e) {
+    const { drawing } = this.state;
+
+    if (drawing) {
+      const pos = this.getMousePosition(e);
+      const newDrawArea = this.getDrawArea(pos);
+      this.setState({ drawArea: newDrawArea });
+    }
+  }
+
+  render() {
+    const {
+      marginLeft, marginTop, innerWidth, innerHeight, color, opacity
+    } = this.props;
+
+    const {
+      drawArea: {
+        left, right, top, bottom
+      }
+    } = this.state;
+
+    return (
+      <g
+        transform={`translate(${marginLeft}, ${marginTop})`}
+        className="highlight-container"
+      >
+        <rect
+          opacity="0"
+          x={0}
+          y={0}
+          width={innerWidth}
+          height={innerHeight}
+        />
+        <rect
+          pointerEvents="none"
+          opacity={opacity}
+          fill={color}
+          x={left}
+          y={bottom}
+          width={right - left}
+          height={top - bottom}
+        />
+      </g>
+    );
+  }
+}
+
+const defaultProps = {
+  allow: 'x',
+  color: 'rgb(77, 182, 172)',
+  opacity: 0.3
+};
+
+Highlight.defaultProps = {
+  ...AbstractSeries,
+  ...defaultProps
+};
+
+Highlight.displayName = 'ComputedPropsGraphHighlight';
diff --git a/app/packs/src/components/computed_props/NoComputedProps.js b/app/packs/src/components/computed_props/NoComputedProps.js
new file mode 100644
index 000000000..c4f3844cc
--- /dev/null
+++ b/app/packs/src/components/computed_props/NoComputedProps.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+function NoComputedProps({ computeFunc }) {
+  return (
+    <span>
+      No computed properties found.
+      <Button
+        bsStyle="success"
+        bsSize="small"
+        className="button-right"
+        onClick={computeFunc}
+      >
+        <i className="fa fa-paper-plane" />
+        &nbsp;&nbsp; Compute
+      </Button>
+    </span>
+  );
+}
+
+NoComputedProps.propTypes = {
+  computeFunc: PropTypes.func.isRequired,
+};
+
+export default NoComputedProps;
diff --git a/app/packs/src/components/computed_props/SampleComputedProps.js b/app/packs/src/components/computed_props/SampleComputedProps.js
new file mode 100644
index 000000000..d4a4697f1
--- /dev/null
+++ b/app/packs/src/components/computed_props/SampleComputedProps.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+function dateFormatter(params) {
+  const dateTime = new Date(params.value);
+  const options = { year: 'numeric', month: 'short', day: 'numeric' };
+  return dateTime.toLocaleDateString('en-GB', options);
+}
+
+export default class SampleComputedProps extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onGridReady = this.onGridReady.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.gridApi) this.gridApi.setRowData(nextProps.cprops);
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+  }
+
+  render() {
+    const { cprops } = this.props;
+    if (cprops.length === 0) {
+      return (
+        <span>No computed properties found. </span>
+      );
+    }
+
+    const columnDefs = [
+      {
+        headerName: 'MaP',
+        headerTooltip: 'Maximum Potential',
+        field: 'max_potential',
+        width: 67,
+      },
+      {
+        headerName: 'MiP',
+        headerTooltip: 'Minimum Potential',
+        field: 'min_potential',
+        width: 63,
+      },
+      {
+        headerName: 'MeP',
+        headerTooltip: 'Mean Potential',
+        field: 'mean_potential',
+        width: 66,
+      },
+      {
+        headerName: 'MeAbsP',
+        headerTooltip: 'Mean Absolute Potential',
+        width: 88,
+        field: 'mean_abs_potential',
+      },
+      {
+        headerName: 'HOMO',
+        field: 'homo',
+        width: 80,
+      },
+      {
+        headerName: 'LUMO',
+        field: 'lumo',
+        width: 77,
+      },
+      {
+        headerName: 'IP',
+        field: 'ip',
+        width: 53,
+      },
+      {
+        headerName: 'EA',
+        field: 'ea',
+        width: 55,
+      },
+      {
+        headerName: 'Dipol',
+        field: 'dipol_debye',
+        width: 72,
+      },
+      {
+        headerName: 'S1',
+        valueGetter: params => params.data.tddft.s1_energy,
+        width: 55,
+      },
+      {
+        headerName: 'T1',
+        valueGetter: params => params.data.tddft.t1_energy,
+        width: 55,
+      },
+      {
+        headerName: 'deltaEST',
+        valueGetter: params => params.data.tddft.delta_est,
+        width: 90,
+      },
+      {
+        headerName: 'Singlet osc str.',
+        valueGetter: params => params.data.tddft.s1_osc,
+        width: 125,
+      },
+      {
+        headerName: 'TADF rate',
+        valueGetter: params => params.data.tddft.tadf_rate,
+        width: 105,
+      },
+      {
+        headerName: 'Date',
+        headerTooltip: 'Request Date',
+        field: 'created_at',
+        width: 81,
+        valueFormatter: dateFormatter,
+      },
+    ];
+
+    return (
+      <div className="ag-theme-balham">
+        <AgGridReact
+          onGridReady={this.onGridReady}
+          enableColResize
+          suppressCellSelection
+          columnDefs={columnDefs}
+          editable={false}
+          rowData={cprops}
+          domLayout="autoHeight"
+        />
+      </div>
+    );
+  }
+}
+
+SampleComputedProps.propTypes = {
+  cprops: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
diff --git a/app/packs/src/components/contextActions/ContextActions.js b/app/packs/src/components/contextActions/ContextActions.js
index efa1e7108..0f017b4b2 100644
--- a/app/packs/src/components/contextActions/ContextActions.js
+++ b/app/packs/src/components/contextActions/ContextActions.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup } from 'react-bootstrap';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import CreateButton from 'src/components/contextActions/CreateButton';
-import ReportUtilButton from 'src/components/contextActions/ReportUtilButton';
-import ExportImportButton from 'src/components/contextActions/ExportImportButton';
-import ScanCodeButton from 'src/components/contextActions/ScanCodeButton';
-import NoticeButton from 'src/components/contextActions/NoticeButton';
-import InboxButton from 'src/components/contextActions/InboxButton';
-import { PermissionConst } from 'src/utilities/PermissionConst';
-import SampleTaskNavigationElement from 'src/components/sampleTaskInbox/SampleTaskNavigationElement';
+import UIStore from './../stores/UIStore';
+import CreateButton from './CreateButton';
+import ReportUtilButton from './ReportUtilButton';
+import ExportImportButton from './ExportImportButton';
+import ScanCodeButton from './ScanCodeButton';
+import NoticeButton from './NoticeButton';
+import InboxButton from './InboxButton';
+//import DeviceButton from './DeviceButton'
+import { PermissionConst } from '../utils/PermissionConst';
 
 export default class ContextActions extends React.Component {
   constructor(props) {
@@ -17,15 +17,15 @@ export default class ContextActions extends React.Component {
     const uiState = UIStore.getState();
     this.state = {
       uiState
-    };
+    }
   }
 
   componentDidMount() {
-    UIStore.listen((state) => this.onChange(state));
+    UIStore.listen(state => this.onChange(state));
   }
 
   componentWillUnmount() {
-    UIStore.unlisten((state) => this.onChange(state));
+    UIStore.unlisten(state => this.onChange(state));
   }
 
   onChange(state) {
@@ -36,26 +36,27 @@ export default class ContextActions extends React.Component {
   }
 
   isCreateDisabled() {
-    const { currentCollection } = this.state.uiState;
-    return currentCollection && ((currentCollection.label == 'All' && currentCollection.is_locked)
-      || (currentCollection.is_shared && currentCollection.is_synchronized == false) || (currentCollection.is_sync_to_me && currentCollection.permission_level != PermissionConst.Write));
+    const {currentCollection} = this.state.uiState;
+    return currentCollection && ((currentCollection.label == 'All' && currentCollection.is_locked) || 
+    (currentCollection.is_shared && currentCollection.is_synchronized == false) ||  (currentCollection.is_sync_to_me && currentCollection.permission_level != PermissionConst.Write)) ;
   }
 
   isDisabled() {
-    const { currentCollection } = this.state.uiState;
+    const {currentCollection} = this.state.uiState
 
     if (currentCollection) {
-      if ((currentCollection.label == 'All' && currentCollection.is_locked)
-        || (currentCollection.is_shared == true && currentCollection.permission_level < PermissionConst.ImportElements)) { return true; }
+      if ((currentCollection.label == 'All'  && currentCollection.is_locked) ||
+          (currentCollection.is_shared == true && currentCollection.permission_level < PermissionConst.ImportElements))
+      return true
     }
 
-    return false;
+    return false
   }
 
   render() {
     const { updateModalProps, customClass } = this.props;
     return (
-      <div style={{ display: 'inline', float: 'left', marginRight: 10 }}>
+      <div style={{ display: 'inline', float: 'left' }}>
         <ButtonGroup>
           <ExportImportButton
             isDisabled={this.isDisabled()}
@@ -67,16 +68,13 @@ export default class ContextActions extends React.Component {
         <ButtonGroup style={{ marginLeft: '10px' }}>
           <CreateButton isDisabled={this.isCreateDisabled()} customClass={customClass} />
         </ButtonGroup>
-        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
+        <ButtonGroup style={{ marginLeft: '10px' }}>
           <ScanCodeButton customClass={customClass} />
-        </ButtonGroup> */}
+        </ButtonGroup>
         {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <InboxButton />
         </ButtonGroup> */}
-        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
-          <SampleTaskNavigationElement />
-        </ButtonGroup> */}
-        <ButtonGroup style={{ marginLeft: '20px' }}>
+        <ButtonGroup style={{ marginLeft: '10px' }}>
           <NoticeButton />
         </ButtonGroup>
       </div>
diff --git a/app/packs/src/components/contextActions/ExportImportButton.js b/app/packs/src/components/contextActions/ExportImportButton.js
index 813b1fb53..67d355721 100644
--- a/app/packs/src/components/contextActions/ExportImportButton.js
+++ b/app/packs/src/components/contextActions/ExportImportButton.js
@@ -1,92 +1,52 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, MenuItem, Glyphicon } from 'react-bootstrap';
-
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ModalImport from 'src/components/contextActions/ModalImport';
-import ModalExport from 'src/components/contextActions/ModalExport';
-import ModalReactionExport from 'src/components/contextActions/ModalReactionExport';
-import ModalExportCollection from 'src/components/contextActions/ModalExportCollection';
-import ModalExportRadarCollection from 'src/components/contextActions/ModalExportRadarCollection';
-import ModalImportCollection from 'src/components/contextActions/ModalImportCollection';
-import { elementShowOrNew } from 'src/utilities/routesUtils.js';
-
-function ExportImportButton({ isDisabled, updateModalProps, customClass }) {
-  const showRadar = UIStore.getState().hasRadar ? (
-    <>
+import { Dropdown, Button, MenuItem, Glyphicon } from 'react-bootstrap';
+
+import CollectionActions from '../actions/CollectionActions';
+import ElementActions from '../actions/ElementActions';
+import UIActions from '../actions/UIActions';
+import ModalImport from './ModalImport';
+import ModalImportChemScanner from './ModalImportChemScanner';
+import ModalExport from './ModalExport';
+import ModalReactionExport from './ModalReactionExport';
+import ModalExportCollection from './ModalExportCollection';
+import ModalImportCollection from './ModalImportCollection';
+
+const ExportImportButton = ({ isDisabled, updateModalProps, customClass }) => (
+  <Dropdown id='export-dropdown'>
+    <Dropdown.Toggle className={customClass}>
+      <Glyphicon glyph="import"/> <Glyphicon glyph="export"/>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <MenuItem onSelect={() => exportFunction(updateModalProps)}
+        title='Export to spreadsheet'>
+        Export samples from selection
+      </MenuItem>
+      <MenuItem onSelect={() => exportReactionFunction(updateModalProps)}
+        title='Export reaction smiles to csv'>
+        Export reactions from selection
+      </MenuItem>
       <MenuItem divider />
-      <MenuItem
-        onSelect={() => editMetadataFunction()}
-        disabled={isDisabled}
-        title="Edit metadata"
-      >
-        Edit collection metadata
+      <MenuItem onSelect={() => importSampleFunction(updateModalProps)} disabled={isDisabled}
+        title='Import from spreadsheet or sdf'>
+        Import samples to collection
       </MenuItem>
-      <MenuItem
-        onSelect={() => exportCollectionToRadarFunction(updateModalProps)}
-        disabled={isDisabled}
-        title="Export to RADAR"
-      >
-        Publish current collection via RADAR
+      <MenuItem divider />
+      <MenuItem onSelect={() => exportCollectionFunction(updateModalProps)}
+        title='Export as ZIP archive'>
+        Export collections
       </MenuItem>
-    </>
-  ) : <span />;
-
-  return (
-    <Dropdown id="export-dropdown">
-      <Dropdown.Toggle className={customClass}>
-        <Glyphicon glyph="import" />
-        <Glyphicon glyph="export" />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        <MenuItem
-          onSelect={() => exportFunction(updateModalProps)}
-          title="Export to spreadsheet"
-        >
-          Export samples from selection
-        </MenuItem>
-        <MenuItem
-          onSelect={() => exportReactionFunction(updateModalProps)}
-          title="Export reaction smiles to csv"
-        >
-          Export reactions from selection
-        </MenuItem>
-        <MenuItem divider />
-        <MenuItem
-          onSelect={() => importSampleFunction(updateModalProps, false)}
-          disabled={isDisabled}
-          title="Import from spreadsheet or sdf"
-        >
-          Import samples to collection
-        </MenuItem>
-        <MenuItem
-          onSelect={() => importSampleFunction(updateModalProps, true)}
-          disabled={isDisabled}
-          title="Import chemicals from spreadsheet"
-        >
-          Import chemicals to collection
-        </MenuItem>
-        <MenuItem divider />
-        <MenuItem
-          onSelect={() => exportCollectionFunction(updateModalProps)}
-          title="Export as ZIP archive"
-        >
-          Export collections
-        </MenuItem>
-        <MenuItem
-          onSelect={() => importCollectionFunction(updateModalProps)}
-          title="Import collections from ZIP archive"
-        >
-          Import collections
-        </MenuItem>
-
-        {showRadar}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-}
+      {/* <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
+        title='Import collections from ZIP archive'>
+        Import collections
+      </MenuItem> */}
+      {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
+      {/*   title='Import from Docs'> */}
+      {/*   Import elements from Docs */}
+      {/* </MenuItem> */}
+    </Dropdown.Menu>
+  </Dropdown>
+);
 
 ExportImportButton.propTypes = {
   isDisabled: PropTypes.bool,
@@ -97,8 +57,9 @@ ExportImportButton.defaultProps = {
   isDisabled: false,
   customClass: null,
 };
-const importSampleFunction = (updateModalProps, importAsChemical) => {
-  const title = importAsChemical ? 'Import Chemicals from File' : 'Import Samples from File';
+
+const importSampleFunction = (updateModalProps) => {
+  const title = "Import Samples from File";
   const component = ModalImport;
   const action = ElementActions.importSamplesFromFile;
   const listSharedCollections = false;
@@ -112,31 +73,46 @@ const importSampleFunction = (updateModalProps, importAsChemical) => {
   updateModalProps(modalProps);
 };
 
+const importChemScannerFunction = (updateModalProps) => {
+  const title = 'Import Elements from Docs';
+  const component = ModalImportChemScanner;
+  const listSharedCollections = false;
+  const modalProps = {
+    show: true,
+    title,
+    component,
+    customModal: 'importChemDrawModal',
+    listSharedCollections,
+  };
+
+  updateModalProps(modalProps);
+};
+
 const exportFunction = (updateModalProps) => {
-  const title = 'Select Data to Export';
+  const title = "Select Data to Export";
   const component = ModalExport;
   const modalProps = {
     show: true,
     title,
     component,
-    customModal: 'exportModal'
+    customModal: "exportModal"
   };
   updateModalProps(modalProps);
-};
+}
 
 const exportReactionFunction = (updateModalProps) => {
   const component = ModalReactionExport;
   const modalProps = {
     show: true,
-    title: 'Reaction Smiles Export',
+    title: "Reaction Smiles Export",
     component,
-    customModal: 'exportModal'
+    customModal: "exportModal"
   };
   updateModalProps(modalProps);
-};
+}
 
 const exportCollectionFunction = (updateModalProps) => {
-  const title = 'Export Collections as ZIP archive';
+  const title = "Export Collections as ZIP archive";
   const component = ModalExportCollection;
   const action = CollectionActions.exportCollectionsToFile;
   const full = false;
@@ -152,10 +128,10 @@ const exportCollectionFunction = (updateModalProps) => {
   };
 
   updateModalProps(modalProps);
-};
+}
 
 const importCollectionFunction = (updateModalProps) => {
-  const title = 'Import Collections from ZIP archive';
+  const title = "Import Collections from ZIP archive";
   const component = ModalImportCollection;
   const action = CollectionActions.importCollectionsFromFile;
   const listSharedCollections = false;
@@ -171,33 +147,4 @@ const importCollectionFunction = (updateModalProps) => {
   updateModalProps(modalProps);
 };
 
-const editMetadataFunction = () => {
-  const { currentCollection, isSync } = UIStore.getState();
-  const uri = isSync
-    ? `/scollection/${currentCollection.id}/metadata`
-    : `/collection/${currentCollection.id}/metadata`;
-  Aviator.navigate(uri, { silent: true });
-
-  elementShowOrNew({
-    type: 'metadata',
-    params: { collectionID: currentCollection.id }
-  });
-};
-
-const exportCollectionToRadarFunction = (updateModalProps) => {
-  const title = "Publish current collection via RADAR";
-  const component = ModalExportRadarCollection;
-  const action = CollectionActions.exportCollectionToRadar;
-
-  const modalProps = {
-    show: true,
-    title,
-    component,
-    action,
-    editAction: editMetadataFunction
-  };
-
-  updateModalProps(modalProps);
-};
-
-export default ExportImportButton;
+export default ExportImportButton
diff --git a/app/packs/src/components/contextActions/ModalExport.js b/app/packs/src/components/contextActions/ModalExport.js
index 9272bb255..4f097ace9 100644
--- a/app/packs/src/components/contextActions/ModalExport.js
+++ b/app/packs/src/components/contextActions/ModalExport.js
@@ -1,11 +1,9 @@
 import React from 'react';
-import {
-  Button, ButtonToolbar, DropdownButton, MenuItem
-} from 'react-bootstrap';
-import CheckBoxs from 'src/components/common/CheckBoxs';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import ReportsFetcher from 'src/fetchers/ReportsFetcher';
+import { Button, ButtonToolbar, DropdownButton, MenuItem } from 'react-bootstrap';
+import CheckBoxs from '../common/CheckBoxs';
+import UIStore from './../stores/UIStore';
+import UserStore from './../stores/UserStore';
+import ReportsFetcher from './../fetchers/ReportsFetcher';
 
 const filterUIState = (uiState) => {
   const {
@@ -42,91 +40,61 @@ export default class ModalExport extends React.Component {
     this.state = {
       columns: {
         sample: [
-          { value: 'cas', text: 'cas', checked: true },
-          { value: ['sample_svg_file', 'molecule_svg_file'], text: 'image', checked: false },
-          { value: 'name', text: 'name', checked: true },
-          { value: 'molecule_name', text: 'molecule name', checked: false },
-          { value: 'external_label', text: 'external label', checked: true },
-          { value: 'short_label', text: 'short label', checked: false },
-          { value: 'description', text: 'description', checked: false },
-          { value: ['real_amount_value', 'real_amount_unit'], text: 'real amount', checked: true },
-          { value: ['target_amount_value', 'target_amount_unit'], text: 'target amount', checked: false },
-          { value: ['molarity_value', 'molarity_unit'], text: 'molarity', checked: false },
-          { value: 'density', text: 'density', checked: false },
-          { value: 'molfile', text: 'molfile', checked: false },
-          //  {value: "purity", text: "purity", checked: false},
-          { value: "solvent", text: "solvent", checked: false },
-          { value: "location", text: "location", checked: false },
-          { value: "is_top_secret", text: "is top secret?", checked: false },
-          { value: "dry_solvent", text: "dry solvent", checked: false },
-          //  {value: "ancestry", text: "ancestry", checked: false},
-          { value: 'imported_readout', text: 'imported readout', checked: false },
-          //  {value: "identifier", text: "identifier", checked: false},
-          { value: 'melting_point', text: 'melting point', checked: false },
-          { value: 'boiling_point', text: 'boiling point', checked: false },
-          { value: 'created_at', text: 'created at', checked: true },
-          { value: 'updated_at', text: 'updated at', checked: false },
-          { value: 'user_labels', text: 'user labels', checked: false },
-          { value: 'literature', text: 'literature', checked: false },
+          {value: ["sample_svg_file", "molecule_svg_file"], text: "image", checked: false},
+          {value: "name", text: "name", checked: true},
+          {value: "molecule_name", text: "molecule name", checked: false},
+          {value: "external_label", text: "external label", checked: true},
+          {value: "short_label", text: "short label", checked: false},
+          {value: "description", text: "description", checked: false},
+          {value: ["real_amount_value", "real_amount_unit"], text: "real amount", checked: true},
+          {value: ["target_amount_value", "target_amount_unit"], text: "target amount", checked: false},
+          {value: ["molarity_value", "molarity_unit"], text: "molarity", checked: false},
+          {value: "density", text: "density", checked: false},
+          {value: "molfile", text: "molfile", checked: false},
+        //  {value: "purity", text: "purity", checked: false},
+          {value: "solvent", text: "solvent", checked: false},
+          {value: "location", text: "location", checked: false},
+          {value: "is_top_secret", text: "is top secret?", checked: false},
+        //  {value: "ancestry", text: "ancestry", checked: false},
+          {value: "imported_readout", text: "imported readout", checked: false},
+        //  {value: "identifier", text: "identifier", checked: false},
+          {value: "melting_point", text: "melting point", checked: false},
+          {value: "boiling_point", text: "boiling point", checked: false},
+          {value: "created_at", text: "created at", checked: true},
+          {value: "updated_at", text: "updated at", checked: false},
+          {value: "user_labels", text: "user labels", checked: false},
+          {value: "literature", text: "literature", checked: false},
         ],
         molecule: [
-          { value: 'cano_smiles', text: 'canonical smiles', checked: true },
-          { value: 'inchistring', text: 'InChIstring', checked: false },
-          { value: 'inchikey', text: 'InChIkey', checked: false },
-          { value: 'sum_formular', text: 'sum formula', checked: false },
-          { value: 'molecular_weight', text: 'molecular weight', checked: false },
+          {value: "cano_smiles", text: "canonical smiles", checked: true},
+          {value: "inchistring", text: "InChIstring", checked: false},
+          {value: "inchikey", text: "InChIkey", checked: false},
+          {value: "sum_formular", text: "sum formula", checked: false},
+          {value: "molecular_weight", text: "molecular weight", checked: false},
         ],
         reaction: [
-          { value: 'name', text: 'reaction name', checked: true },
-          { value: 'short_label', text: 'r short label', checked: true },
-          { value: 'reference', text: 'reference', checked: false },
-          { value: 'equivalent', text: 'equivalent', checked: false },
+          {value: "name", text: "reaction name", checked: true},
+          {value: "short_label", text: "r short label", checked: true},
+          {value: "reference", text: "reference", checked: false},
+          {value: "equivalent", text: "equivalent", checked: false},
         ],
         wellplate: [
-          { value: 'name', text: 'wellplate name', checked: false },
-          { value: 'position_x', text: 'well x', checked: false },
-          { value: 'position_y', text: 'well y', checked: false },
+          {value: "name", text: "wellplate name", checked: false},
+          {value: "position_x", text: "well x", checked: false},
+          {value: "position_y", text: "well y", checked: false},
         ],
         analyses: [
-          { value: 'name', text: 'analysis name', checked: false },
-          { value: 'description', text: 'analysis description', checked: false },
-          { value: 'kind', text: 'analysis type', checked: false },
-          { value: 'content', text: 'analysis content', checked: false },
-          { value: 'status', text: 'analysis status', checked: false },
-          { value: 'uuid', text: 'uuid', checked: false },
-          { value: 'dataset name', text: 'dataset name', checked: false },
-          { value: 'dataset description', text: 'dataset description', checked: false },
-          { value: 'instrument', text: 'instrument', checked: false },
-          { value: 'filename', text: 'file name', checked: false },
-          { value: 'checksum', text: 'file checksum', checked: false },
-        ],
-        chemicals: [
-          { value: 'status', text: 'status', checked: false },
-          { value: 'vendor', text: 'vendor', checked: false },
-          { value: 'order_number', text: 'order number', checked: false },
-          { value: 'amount', text: 'amount', checked: false },
-          { value: 'price', text: 'price', checked: false },
-          { value: 'person', text: 'person', checked: false },
-          { value: 'required_date', text: 'required date', checked: false },
-          { value: 'ordered_date', text: 'ordered date', checked: false },
-          { value: 'required_by', text: 'required by', checked: false },
-          { value: ['safety_sheet_link_merck', 'safety_sheet_link_thermofischer'], text: 'safety sheet link', checked: false },
-          { value: ['product_link_merck', 'product_link_thermofischer'], text: 'product link', checked: false },
-          { value: 'pictograms', text: 'pictograms', checked: false },
-          { value: 'h_statements', text: 'h statements', checked: false },
-          { value: 'p_statements', text: 'p statements', checked: false },
-          { value: 'host_building', text: 'host building', checked: false },
-          { value: 'host_room', text: 'host room', checked: false },
-          { value: 'host_cabinet', text: 'host cabinet', checked: false },
-          { value: 'host_group', text: 'host group', checked: false },
-          { value: 'owner', text: 'owner', checked: false },
-          { value: 'current_building', text: 'current building', checked: false },
-          { value: 'current_room', text: 'current room', checked: false },
-          { value: 'current_cabinet', text: 'current cabinet', checked: false },
-          { value: 'current_group', text: 'current group', checked: false },
-          { value: 'borrowed_by', text: 'borrowed by', checked: false },
-          { value: 'disposal_info', text: 'disposal info', checked: false },
-          { value: 'important_notes', text: 'important notes', checked: false },
+          { value: "name", text: "analysis name", checked: false },
+          { value: "description", text: "analysis description", checked: false },
+          { value: "kind", text: "analysis type", checked: false },
+          { value: "content", text: "analysis content", checked: false },
+          { value: "status", text: "analysis status", checked: false },
+          { value: "uuid", text: "uuid", checked: false },
+          { value: "dataset name", text: "dataset name", checked: false },
+          { value: "dataset description", text: "dataset description", checked: false },
+          { value: "instrument", text: "instrument", checked: false },
+          { value: "filename", text: "file name", checked: false },
+          { value: "checksum", text: "file checksum", checked: false },
         ],
       },
       checkedAllColumns: {
@@ -137,7 +105,7 @@ export default class ModalExport extends React.Component {
         analysis: false,
       },
     };
-    this.handleClick = this.handleClick.bind(this);
+    this.handleClick = this.handleClick.bind(this)
   }
 
   toggleColumns(text, checked, section) {
@@ -149,7 +117,7 @@ export default class ModalExport extends React.Component {
         }
         return col
       })
-      return { ...prevState, columns }
+      return {...prevState, columns}
     })
   }
 
@@ -173,10 +141,6 @@ export default class ModalExport extends React.Component {
     this.toggleColumns(text, checked, 'analyses');
   }
 
-  toggleColumnsChemicals(text, checked) {
-    this.toggleColumns(text, checked, 'chemicals');
-  }
-
   toggleColumnsAll(section) {
     this.setState((prevState) => {
       const { columns, checkedAllColumns } = prevState;
@@ -208,33 +172,22 @@ export default class ModalExport extends React.Component {
     this.toggleColumnsAll('analyses');
   }
 
-  toggleColumnsAllChemicals(text, checked) {
-    this.toggleColumnsAll('chemicals');
-  }
-
   buttonBar() {
     const { onHide } = this.props;
-    const chemicalColumns = this.filteredColumns();
-    const sdfChemicalExport = chemicalColumns.chemicals.length !== 0;
     return (
       <ButtonToolbar>
         <div className="pull-right">
           <ButtonToolbar>
             <Button bsStyle="primary" onClick={onHide}>Cancel</Button>
-            <DropdownButton
-              dropup
-              bsStyle="warning"
-              id="md-export-dropdown"
-              title="XLSX/SD Export"
-              onSelect={this.handleClick}
-            >
+            <DropdownButton dropup bsStyle="warning" id="md-export-dropdown"
+                title="XLSX/SD Export" onSelect={this.handleClick}>
               <MenuItem eventKey="1">XLSX Export</MenuItem>
-              <MenuItem eventKey="2" disabled={sdfChemicalExport}>SDF Export</MenuItem>
+              <MenuItem eventKey="2">SDF Export</MenuItem>
             </DropdownButton>
           </ButtonToolbar>
         </div>
       </ButtonToolbar>
-    );
+    )
   }
 
   handleClick(e) {
@@ -271,44 +224,38 @@ export default class ModalExport extends React.Component {
       <div>
         <div className='export-container'>
           <h4>Sample properties</h4>
-          <CheckBoxs items={this.state.columns.sample}
+          <CheckBoxs  items={this.state.columns.sample}
             toggleCheckbox={this.toggleColumnsSample.bind(this)}
             toggleCheckAll={this.toggleColumnsAllSample.bind(this)}
             checkedAll={this.state.checkedAllColumns.sample}
           />
           <h4>Molecule properties</h4>
-          <CheckBoxs items={this.state.columns.molecule}
+          <CheckBoxs  items={this.state.columns.molecule}
             toggleCheckbox={this.toggleColumnsMolecule.bind(this)}
             toggleCheckAll={this.toggleColumnsAllMolecule.bind(this)}
             checkedAll={this.state.checkedAllColumns.molecule}
           />
           <h4>Reaction properties</h4>
-          <CheckBoxs items={this.state.columns.reaction}
+          <CheckBoxs  items={this.state.columns.reaction}
             toggleCheckbox={this.toggleColumnsReaction.bind(this)}
             toggleCheckAll={this.toggleColumnsAllReaction.bind(this)}
             checkedAll={this.state.checkedAllColumns.reaction}
           />
           <h4>Wellplate and well properties</h4>
-          <CheckBoxs items={this.state.columns.wellplate}
+          <CheckBoxs  items={this.state.columns.wellplate}
             toggleCheckbox={this.toggleColumnsWellplate.bind(this)}
             toggleCheckAll={this.toggleColumnsAllWellplate.bind(this)}
             checkedAll={this.state.checkedAllColumns.wellplate}
           />
           <h4>Analyses</h4>
-          <CheckBoxs items={this.state.columns.analyses}
+          <CheckBoxs  items={this.state.columns.analyses}
             toggleCheckbox={this.toggleColumnsAnalyses.bind(this)}
             toggleCheckAll={this.toggleColumnsAllAnalyses.bind(this)}
             checkedAll={this.state.checkedAllColumns.analyses}
           />
-          <h4>Chemicals</h4>
-          <CheckBoxs items={this.state.columns.chemicals}
-            toggleCheckbox={this.toggleColumnsChemicals.bind(this)}
-            toggleCheckAll={this.toggleColumnsAllChemicals.bind(this)}
-            checkedAll={this.state.checkedAllColumns.chemicals}
-          />
         </div>
         {this.buttonBar()}
       </div>
-    );
+    )
   }
 }
diff --git a/app/packs/src/components/contextActions/ModalImportChemScanner.js b/app/packs/src/components/contextActions/ModalImportChemScanner.js
new file mode 100644
index 000000000..d0384927a
--- /dev/null
+++ b/app/packs/src/components/contextActions/ModalImportChemScanner.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import { Button, ButtonToolbar } from 'react-bootstrap';
+
+import { ChemScanner, store } from '../chemscanner/ChemScanner';
+
+import ElementActions from '../actions/ElementActions';
+
+export default class ModalImportChemScanner extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.importAll = this.importAll.bind(this);
+    this.importSelected = this.importSelected.bind(this);
+  }
+
+  importAll() {
+    const reactions = store.getState().get('reactions').toJS();
+    const molecules = store.getState().get('molecules').toJS();
+
+    ElementActions.importReactionsFromChemScanner({ reactions, molecules });
+    this.props.onHide();
+  }
+
+  importSelected() {
+    const reactions = store.getState().get('reactions').filter(r => r.selected).toJS();
+    const molecules = store.getState().get('molecules').filter(m => m.selected).toJS();
+
+    ElementActions.importReactionsFromChemScanner({ reactions, molecules });
+    this.props.onHide();
+  }
+
+  render() {
+    const { onHide } = this.props;
+
+    return (
+      <div>
+        <div id="chemscannerModal" className="chemscannerModal">
+          <ChemScanner modal="chemscannerModal" />
+        </div>
+        <ButtonToolbar style={{ marginTop: '10px' }}>
+          <Button bsStyle="primary" onClick={onHide}>Cancel</Button>
+          <Button bsStyle="warning" onClick={this.importSelected} >
+            Import Selected
+          </Button>
+          <Button bsStyle="warning" onClick={this.importAll} >
+            Import All
+          </Button>
+        </ButtonToolbar>
+      </div>
+    );
+  }
+}
+
+ModalImportChemScanner.propTypes = {
+  onHide: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 71d940d57..0dfcef140 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -1,26 +1,15 @@
 import React from 'react';
-import {
-  PanelGroup, Panel, Button, Modal, Table
-} from 'react-bootstrap';
+import { PanelGroup, Panel, Button, Modal, Table } from 'react-bootstrap';
 import 'whatwg-fetch';
 import _ from 'lodash';
-import MessagesFetcher from 'src/fetchers/MessagesFetcher';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import InboxActions from 'src/stores/alt/actions/InboxActions';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import CalendarActions from 'src/stores/alt/actions/CalendarActions';
-import InboxStore from 'src/stores/alt/stores/InboxStore';
-import { formatDate } from 'src/utilities/timezoneHelper';
+import MessagesFetcher from '../fetchers/MessagesFetcher';
+import CollectionActions from '../actions/CollectionActions';
+import NotificationActions from '../actions/NotificationActions';
+import InboxActions from '../actions/InboxActions';
+import ReportActions from '../actions/ReportActions';
+import ElementActions from '../actions/ElementActions';
 
-const changeUrl = (url, urlTitle) => (url ? (
-  <a href={url} target="_blank" rel="noopener noreferrer">
-    {urlTitle || url}
-  </a>
-) : (
-  <span />
-));
+const changeUrl = (url, urlTitle) => (url ? <a href={url} target="_blank" rel="noopener noreferrer">{urlTitle || url}</a> : <span />);
 
 const handleNotification = (nots, act, needCallback = true) => {
   nots.forEach((n) => {
@@ -28,20 +17,15 @@ const handleNotification = (nots, act, needCallback = true) => {
       NotificationActions.removeByUid(n.id);
     }
     if (act === 'add') {
-      const infoTimeString = formatDate(n.created_at);
-
-      const newText = n.content.data
-        .split('\n')
-        .map((i) => <p key={`${infoTimeString}-${i}`}>{i}</p>);
+      const time = new Date().getTime();
+      const newText = n.content.data.split('\n').map(i => <p key={`${time + i}`}>{i}</p>);
       const { url, urlTitle } = n.content;
       if (url) {
-        newText[newText.length] = (
-          <p key={`${infoTimeString}-${url}`}>{changeUrl(url, urlTitle)}</p>
-        );
+        newText[newText.length] = <p key={`${new Date().getTime()}-${url}`}>{changeUrl(url, urlTitle)}</p>;
       }
 
       const notification = {
-        title: `From ${n.sender_name} on ${infoTimeString}`,
+        title: `From ${n.sender_name} on ${n.updated_at}`,
         message: newText,
         level: n.content.level || 'warning',
         dismissible: 'button',
@@ -49,30 +33,26 @@ const handleNotification = (nots, act, needCallback = true) => {
         position: n.content.position || 'tr',
         uid: n.id,
         action: {
-          label: (
-            <span>
-              <i className="fa fa-check" aria-hidden="true" />
-              &nbsp;&nbsp;Got it
-            </span>
-          ),
+          label: <span><i className="fa fa-check" aria-hidden="true" />&nbsp;&nbsp;Got it</span>,
           callback() {
             if (needCallback) {
               const params = { ids: [] };
               params.ids[0] = n.id;
               MessagesFetcher.acknowledgedMessage(params);
+              // .then((result) => { console.log(JSON.stringify(result)); });
             }
-          },
-        },
+          }
+        }
       };
       NotificationActions.add(notification);
 
-      const { currentPage, itemsPerPage } = InboxStore.getState();
-
       switch (n.content.action) {
         case 'CollectionActions.fetchRemoteCollectionRoots':
           CollectionActions.fetchRemoteCollectionRoots();
           break;
         case 'CollectionActions.fetchSyncInCollectionRoots':
+        case 'Repository_ReviewRequest':
+        case 'Repository_Published':
           CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'Repository_ReviewRequest':
@@ -80,7 +60,7 @@ const handleNotification = (nots, act, needCallback = true) => {
           // CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'InboxActions.fetchInbox':
-          InboxActions.fetchInbox({ currentPage, itemsPerPage });
+          InboxActions.fetchInbox();
           break;
         case 'ReportActions.updateProcessQueue':
           ReportActions.updateProcessQueue([parseInt(n.content.report_id, 10)]);
@@ -96,31 +76,20 @@ const handleNotification = (nots, act, needCallback = true) => {
           CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'ElementActions.fetchResearchPlanById':
-          ElementActions.fetchResearchPlanById(
-            parseInt(n.content.research_plan_id, 10)
-          );
-          break;
-        case 'CalendarActions.navigateToElement':
-          CalendarActions.navigateToElement(
-            n.content.eventable_type,
-            n.content.eventable_id
-          );
+          ElementActions.fetchResearchPlanById(parseInt(n.content.research_plan_id, 10));
           break;
         default:
-        //
+          //
       }
     }
   });
 };
 
 const createUpgradeNotification = (serverVersion, localVersion) => {
-  const content = [
-    'Dear ELNer,',
-    'A new version has been released. Please reload this page to enjoy the latest updates.',
+  const content = ['Dear ELNer,', 'A new version has been released. Please reload this page to enjoy the latest updates.',
     'Thank you and have a nice day  :)',
     '--------------------------',
-    `Your version: ${localVersion}`,
-    `Current version: ${serverVersion}`,
+    `Your version: ${localVersion}`, `Current version: ${serverVersion}`,
     '--------------------------',
   ].join('\n');
   const contentJson = { data: content };
@@ -134,9 +103,9 @@ const createUpgradeNotification = (serverVersion, localVersion) => {
   const infoTimeString = new Date().toLocaleDateString('de-DE', options);
   const not = {
     id: -1,
-    sender_name: 'System Administrator',
-    updated_at: infoTimeString,
-    content: contentJson,
+    sender_name: 'System Adminstrator',
+    updated_at: `${infoTimeString}`,
+    content: contentJson
   };
   handleNotification([not], 'add', false);
 };
@@ -163,7 +132,6 @@ export default class NoticeButton extends React.Component {
 
   componentDidMount() {
     this.envConfiguration();
-    this.startActivityDetection();
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -172,8 +140,8 @@ export default class NoticeButton extends React.Component {
 
     const notIds = _.map(nots, 'id');
     const nextNotIds = _.map(nextNots, 'id');
-    const newMessages = _.filter(nextNots, (o) => !_.includes(notIds, o.id));
-    const remMessages = _.filter(nots, (o) => !_.includes(nextNotIds, o.id));
+    const newMessages = _.filter(nextNots, o => !_.includes(notIds, o.id));
+    const remMessages = _.filter(nots, o => !_.includes(nextNotIds, o.id));
 
     if (Object.keys(newMessages).length > 0) {
       handleNotification(newMessages, 'add');
@@ -181,22 +149,13 @@ export default class NoticeButton extends React.Component {
     if (Object.keys(remMessages).length > 0) {
       handleNotification(remMessages, 'rem');
     }
-    if (
-      nextState.serverVersion
-      && nextState.localVersion
+    if (nextState.serverVersion && nextState.localVersion
       && nextState.serverVersion !== this.state.serverVersion
-      && nextState.serverVersion !== nextState.localVersion
-    ) {
-      const serverVer = nextState.serverVersion.substring(
-        nextState.serverVersion.indexOf('-') + 1,
-        nextState.serverVersion.indexOf('.js')
-      );
-      const localVer = nextState.localVersion.substring(
-        nextState.localVersion.indexOf('-') + 1,
-        nextState.localVersion.indexOf('.js')
-      );
+      && nextState.serverVersion !== nextState.localVersion) {
+      const serverVer = nextState.serverVersion.substring(nextState.serverVersion.indexOf('-') + 1, nextState.serverVersion.indexOf('.js'));
+      const localVer = nextState.localVersion.substring(nextState.localVersion.indexOf('-') + 1, nextState.localVersion.indexOf('.js'));
       if (serverVer !== localVer) {
-        // createUpgradeNotification(serverVer, localVer);
+        createUpgradeNotification(serverVer, localVer);
       }
     }
 
@@ -204,30 +163,6 @@ export default class NoticeButton extends React.Component {
   }
 
   componentWillUnmount() {
-    this.stopActivityDetection();
-  }
-
-  handleShow() {
-    MessagesFetcher.fetchMessages(0).then((result) => {
-      result.messages.sort((a, b) => a.id - b.id);
-      this.setState({ showModal: true, dbNotices: result.messages });
-    });
-  }
-
-  handleHide() {
-    this.setState({ showModal: false });
-  }
-
-  startActivityDetection() {
-    const { messageEnable } = this.state;
-    if (messageEnable === true) {
-      this.interval = setInterval(this.messageFetch.bind(this), this.state.messageAutoInterval);
-      document.addEventListener('mousemove', this.detectActivity);
-      document.addEventListener('click', this.detectActivity);
-    }
-  }
-
-  stopActivityDetection() {
     const { messageEnable } = this.state;
     if (messageEnable === true) {
       document.removeEventListener('mousemove', this.detectActivity, false);
@@ -240,39 +175,45 @@ export default class NoticeButton extends React.Component {
     // use 'application' (not 'application-') as keyword because there is a
     // difference between production and development environment
     const documentIndex = 'application';
-    const applicationTag = _.filter(
-      document.scripts,
-      (s) => s.src.indexOf(documentIndex) > -1
-    );
-    const applicationTagValue = applicationTag[0].src.substr(
-      applicationTag[0].src.indexOf(documentIndex)
-    );
-    MessagesFetcher.configuration().then((result) => {
-      this.setState({
-        messageEnable: result.messageEnable === 'true',
-        messageAutoInterval: result.messageAutoInterval,
-        idleTimeout: result.idleTimeout,
-        localVersion: applicationTagValue,
+    const applicationTag = _.filter(document.scripts, s => s.src.indexOf(documentIndex) > -1);
+    const applicationTagValue = applicationTag[0].src.substr(applicationTag[0].src
+      .indexOf(documentIndex));
+    MessagesFetcher.configuration()
+      .then((result) => {
+        this.setState({
+          messageEnable: result.messageEnable === 'true',
+          messageAutoInterval: result.messageAutoInterval,
+          idleTimeout: result.idleTimeout,
+          localVersion: applicationTagValue
+        });
+        const { messageEnable, messageAutoInterval } = this.state;
+
+        if (messageEnable === true) {
+          this.interval = setInterval(() => this.messageFetch(), messageAutoInterval);
+          document.addEventListener('mousemove', this.detectActivity);
+          document.addEventListener('click', this.detectActivity);
+        } else {
+          this.messageFetch();
+        }
       });
-      const { messageEnable, messageAutoInterval } = this.state;
-
-      if (messageEnable === true) {
-        this.interval = setInterval(
-          () => this.messageFetch(),
-          messageAutoInterval
-        );
-        document.addEventListener('mousemove', this.detectActivity);
-        document.addEventListener('click', this.detectActivity);
-      } else {
-        this.messageFetch();
-      }
-    });
   }
 
   detectActivity() {
     this.setState({ lastActivityTime: new Date() });
   }
 
+  handleShow() {
+    MessagesFetcher.fetchMessages(0)
+      .then((result) => {
+        result.messages.sort((a, b) => (a.id - b.id));
+        this.setState({ showModal: true, dbNotices: result.messages });
+      });
+  }
+
+  handleHide() {
+    this.setState({ showModal: false });
+  }
+
   messageAck(idx, ackAll) {
     let { dbNotices } = this.state;
     const params = {
@@ -283,34 +224,28 @@ export default class NoticeButton extends React.Component {
     } else {
       params.ids[0] = idx;
     }
-    MessagesFetcher.acknowledgedMessage(params).then((result) => {
-      const ackIds = _.map(result.ack, 'id');
-      dbNotices = _.filter(
-        this.state.dbNotices,
-        (o) => !_.includes(ackIds, o.id)
-      );
-      dbNotices.sort((a, b) => a.id - b.id);
-      this.setState({
-        dbNotices,
+    MessagesFetcher.acknowledgedMessage(params)
+      .then((result) => {
+        const ackIds = _.map(result.ack, 'id');
+        dbNotices = _.filter(this.state.dbNotices, o => !_.includes(ackIds, o.id));
+        dbNotices.sort((a, b) => (a.id - b.id));
+        this.setState({
+          dbNotices
+        });
       });
-    });
   }
 
   messageFetch() {
     const { lastActivityTime, idleTimeout } = this.state;
     const clientLastActivityTime = new Date(lastActivityTime).getTime();
     const currentTime = new Date().getTime();
-    const remainTime = Math.floor(
-      (currentTime - clientLastActivityTime) / 1000
-    );
+    const remainTime = Math.floor((currentTime - clientLastActivityTime) / 1000);
     if (remainTime < idleTimeout) {
-      MessagesFetcher.fetchMessages(0).then((result) => {
-        result.messages.sort((a, b) => a.id - b.id);
-        this.setState({
-          dbNotices: result.messages,
-          serverVersion: result.version,
+      MessagesFetcher.fetchMessages(0)
+        .then((result) => {
+          result.messages.sort((a, b) => (a.id - b.id));
+          this.setState({ dbNotices: result.messages, serverVersion: result.version });
         });
-      });
     }
   }
 
@@ -329,10 +264,8 @@ export default class NoticeButton extends React.Component {
         <Table>
           <tbody>
             <tr>
-              <td
-                style={{ border: '0px', width: '100vw', textAlign: 'center' }}
-              >
-                No new notifications.
+              <td style={{ border: '0px', width: '100vw', textAlign: 'center' }}>
+                No new messages.
               </td>
             </tr>
           </tbody>
@@ -341,147 +274,99 @@ export default class NoticeButton extends React.Component {
     );
 
     if (Object.keys(dbNotices).length > 0) {
-      bMessages = dbNotices.map((not, index) => {
-        const infoTimeString = formatDate(not.created_at);
-
-        const newText = not.content.data
-          .split('\n')
-          .map((i) => <p key={`${infoTimeString}-${i}`}>{i}</p>);
-
-        const { url, urlTitle } = not.content;
-        if (url) {
-          newText.push(
-            <p key={`${infoTimeString}-${url}`}>{changeUrl(url, urlTitle)}</p>
-          );
-        }
-
-        return (
-          <Panel
-            key={`panel-modal-body-${not.id}`}
-            eventKey={index}
-            collapsible="true"
-            defaultExpanded
-            ref={(pl) => {
-              this[`myPl${index}`] = pl;
-            }}
-          >
-            <Panel.Heading>
-              <i className="fa fa-commenting-o" aria-hidden="true" />
-              &nbsp;
-              {not.subject}
-              &nbsp;&nbsp;
-              <span>
-                <strong>From: </strong>
-                {not.sender_name}
-              </span>
-              &nbsp;&nbsp;
-              <span>
-                <strong>Created On: </strong>
-                {formatDate(not.created_at)}
-              </span>
-            </Panel.Heading>
-            <Panel.Body>
-              <Table>
-                <tbody>
-                  <tr>
-                    <td width="10%">
-                      <Button
-                        id={`notice-button-ack-${not.id}`}
-                        key={`notice-button-ack-${not.id}`}
-                        onClick={() => this.messageAck(not.id, false)}
-                      >
-                        <i className="fa fa-check" aria-hidden="true" />
-                        &nbsp;Got it
-                      </Button>
-                    </td>
-                    <td width="90%">{newText}</td>
-                  </tr>
-                </tbody>
-              </Table>
-            </Panel.Body>
-          </Panel>
-        );
-      });
+      bMessages = dbNotices.map((not, index) => (
+        <Panel
+          key={`panel-modal-body-${not.id}`}
+          eventKey={index}
+          collapsible="true"
+          defaultExpanded
+          ref={(pl) => {
+            this[`myPl${index}`] = pl;
+          }}
+        >
+          <Panel.Heading>
+            <i className="fa fa-commenting-o" aria-hidden="true" />&nbsp;{not.subject}&nbsp;&nbsp;
+            <span><strong>From: </strong>{not.sender_name}</span>&nbsp;&nbsp;
+            <span><strong>Created On: </strong>{not.created_at}</span>
+          </Panel.Heading>
+          <Panel.Body>
+            <Table>
+              <tbody>
+                <tr>
+                  <td width="10%">
+                    <Button
+                      id={`notice-button-ack-${not.id}`}
+                      key={`notice-button-ack-${not.id}`}
+                      onClick={() => this.messageAck(not.id, false)}
+                    >
+                      <i className="fa fa-check" aria-hidden="true" />&nbsp;Got it
+                    </Button>
+                  </td>
+                  <td width="90%">
+                    { not.content.data }
+                    <br />
+                    {changeUrl(not.content.url, not.content.url_title)}
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+          </Panel.Body>
+        </Panel>
+      ));
     }
 
-    return <PanelGroup id="panel-group-modal-body">{bMessages}</PanelGroup>;
+    return (
+      <PanelGroup
+        id="panel-group-modal-body"
+      >
+        { bMessages }
+      </PanelGroup>
+    );
   }
 
   renderModal() {
     if (this.state.showModal) {
       return (
-        <Modal
-          show={this.state.showModal}
-          onHide={this.handleHide}
-          dialogClassName="noticeModal"
-        >
+        <Modal show={this.state.showModal} onHide={this.handleHide} dialogClassName="noticeModal">
           <Modal.Header closeButton>
-            <Modal.Title>Unread Notifications</Modal.Title>
+            <Modal.Title>Unread Messages</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ overflow: 'auto' }}>
             {this.renderBody()}
           </Modal.Body>
           <Modal.Footer>
-            <Button
-              id="notice-button-ack-all"
-              key="notice-button-ack-all"
-              onClick={() => this.messageAck(0, true)}
-            >
-              <i className="fa fa-check" aria-hidden="true" />
-              &nbsp;Mark all notifications as read
-            </Button>
+            <Button id="notice-button-ack-all" key="notice-button-ack-all" onClick={() => this.messageAck(0, true)}><i className="fa fa-check" aria-hidden="true" />&nbsp;Mark all messages as read</Button>
           </Modal.Footer>
         </Modal>
       );
     }
-    return <div />;
+    return (<div />);
   }
 
   render() {
     const noticeNum = Object.keys(this.state.dbNotices).length;
-    let btnStyle = 'default';
-    let btnClass = 'fa fa-bell-o fa-lg';
+    let btnStyle = 'warning';
+    let btnClass = 'fa fa-commenting-o fa-lg';
 
-    if (noticeNum > 0) {
-      btnStyle = 'warning';
-      btnClass = 'fa fa-bell fa-lg';
+    if (noticeNum <= 0) {
+      btnStyle = 'default';
+      btnClass = 'fa fa-comment-o fa-lg';
     }
 
     return (
-      <div style={{ position: 'relative', marginLeft: '-10px' }}>
-        <Button
-          id="notice-button"
-          bsStyle={btnStyle}
-          onClick={this.handleShow}
-          style={{
-            height: '34px',
-            width: '40px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginBottom: '.04px',
-          }}
-        >
-          <i
-            className={btnClass}
-            style={{
-              left: '20px'
-            }}
-          />
-          {noticeNum > 0 && (
-            <span
-              className="badge badge-pill"
-              style={{
-                top: '25px',
-                left: '25px',
-                fontSize: '8px',
-                position: 'absolute'
-              }}
-            >
-              {noticeNum}
-            </span>
-          )}
-        </Button>
+      <div>
+        {
+          noticeNum <= 0 ? <span className="badge badge-pill">{noticeNum}</span> :
+          <Button
+            id="notice-button"
+            bsStyle={btnStyle}
+            onClick={this.handleShow}
+            style={{ height: '34px', width: '36px' }}
+          >
+            <i className={btnClass} />&nbsp;
+            <span className="badge badge-pill" style={{ top: '6px', left: '-10px', fontSize: '8px' }}>{noticeNum}</span>
+          </Button>
+        }
         {this.renderModal()}
       </div>
     );
diff --git a/app/packs/src/components/contextActions/ReportUtilButton.js b/app/packs/src/components/contextActions/ReportUtilButton.js
index 7ed171495..1df6b1d1b 100644
--- a/app/packs/src/components/contextActions/ReportUtilButton.js
+++ b/app/packs/src/components/contextActions/ReportUtilButton.js
@@ -3,9 +3,9 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import MatrixCheck from 'src/components/common/MatrixCheck';
+import ElementActions from '../actions/ElementActions';
+import UserStore from '../stores/UserStore';
+import MatrixCheck from '../common/MatrixCheck';
 
 const showReportContainer = () => {
   ElementActions.showReportContainer();
@@ -74,10 +74,10 @@ const ReportUtilButton = ({ customClass, isDisabled=false  }) => {
           Format Analyses
         </MenuItem>
         <MenuItem onSelect={ElementActions.showLiteratureDetail} title="Reference Manager">
-          Reference Manager
+          Literature
         </MenuItem>
-        {/* {graph}
-        {task} */}
+        {graph}
+        {task}
         {divider}
         {predDiv}
       </Dropdown.Menu>
diff --git a/app/packs/src/components/elements/ElementField.js b/app/packs/src/components/elements/ElementField.js
new file mode 100644
index 000000000..84f51e279
--- /dev/null
+++ b/app/packs/src/components/elements/ElementField.js
@@ -0,0 +1,332 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Popover, Col, Checkbox, Panel, Form, ButtonGroup, OverlayTrigger, FormGroup, FormControl, ControlLabel, InputGroup } from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import { ButtonTooltip, genUnitSup } from '../../admin/generic/Utils';
+import GroupFields from './GroupFields';
+import TextFormula from '../generic/TextFormula';
+import TableDef from '../generic/TableDef';
+
+const BaseFieldTypes = [
+  { value: 'integer', name: 'integer', label: 'Integer' },
+  { value: 'text', name: 'text', label: 'Text' },
+  { value: 'textarea', name: 'textarea', label: 'Text area' },
+  { value: 'select', name: 'select', label: 'Select' },
+  { value: 'checkbox', name: 'checkbox', label: 'Checkbox' },
+  { value: 'system-defined', name: 'system-defined', label: 'System-Defined' },
+  { value: 'formula-field', name: 'formula-field', label: 'Formula-Field' },
+];
+
+const ElementFieldTypes = [
+  { value: 'drag_molecule', name: 'drag_molecule', label: 'Drag Molecule' },
+  { value: 'drag_sample', name: 'drag_sample', label: 'Drag Sample' },
+  { value: 'input-group', name: 'input-group', label: 'Input Group' },
+  { value: 'text-formula', name: 'text-formula', label: 'Text-Formula' },
+  { value: 'table', name: 'table', label: 'Table' },
+  { value: 'upload', name: 'upload', label: 'Upload' },
+];
+
+const SegmentFieldTypes = [
+  { value: 'input-group', name: 'input-group', label: 'Input Group' },
+  { value: 'text-formula', name: 'text-formula', label: 'Text-Formula' },
+  { value: 'drag_molecule', name: 'drag_molecule', label: 'Drag Molecule' },
+  { value: 'table', name: 'table', label: 'Table' },
+  { value: 'upload', name: 'upload', label: 'Upload' },
+];
+
+class ElementField extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+    this.handelDelete = this.handelDelete.bind(this);
+    this.handleMove = this.handleMove.bind(this);
+    this.handleAddDummy = this.handleAddDummy.bind(this);
+    this.handleCond = this.handleCond.bind(this);
+    this.updSubField = this.updSubField.bind(this);
+  }
+
+  updSubField(layerKey, field, cb) {
+    this.props.onFieldSubFieldChange(layerKey, field, cb);
+  }
+
+  handleChange(e, orig, fe, lk, fc, tp) {
+    if ((tp === 'select' || tp === 'system-defined') && e === null) { return; }
+    this.props.onChange(e, orig, fe, lk, fc, tp);
+  }
+
+  handleMove(element) {
+    const { l, f, isUp } = element;
+    this.props.onMove(l, f, isUp);
+  }
+
+  handleAddDummy(element) {
+    this.props.onDummyAdd(element);
+  }
+
+  handleCond(field, lk) {
+    this.props.onShowFieldCond(field, lk);
+    //this.setState({ showFieldRestriction: true, element: element });
+  }
+
+  handelDelete(delStr, delKey, delRoot) {
+    this.props.onDelete(delStr, delKey, delRoot);
+  }
+
+  handleDrop(e) {
+    this.props.onDrop(e);
+  }
+
+  availableUnits(val) {
+    const { unitsSystem } = this.props;
+    const us = (unitsSystem.fields || []).find(e => e.field === val);
+    if (us === undefined) return null;
+    const tbl = us.units.map(e => (<div key={uuid.v4()}>{genUnitSup(e.label)}<br /></div>));
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left"><b><u>available units</u></b><br />{tbl}</Popover>
+    );
+    return (
+      <OverlayTrigger animation placement="top" root trigger={['hover', 'focus', 'click']} overlay={popover}>
+        <Button bsSize="xs"><i className="fa fa-table" aria-hidden="true" /></Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderDeleteButton(delStr, delKey, delRoot) {
+    const msg = `remove this field: [${delKey}] from layer [${delRoot}] `;
+    const popover = (
+      <Popover id="popover-positioned-scrolling-left">
+        {msg} <br />
+        <div className="btn-toolbar">
+          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handelDelete(delStr, delKey, delRoot)}>
+            Yes
+          </Button><span>&nbsp;&nbsp;</span>
+          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
+            No
+          </Button>
+        </div>
+      </Popover>
+    );
+
+    return (
+      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
+        <Button bsSize="xs" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+      </OverlayTrigger>
+    );
+  }
+
+  renderDummyFieldGroup(f) {
+    return (
+      <FormGroup controlId={`frmCtrlFid_${this.props.layerKey}_${f.field}`}>
+        <Col componentClass={ControlLabel} sm={3}>{`(${f.type})`}</Col>
+        <Col sm={9}><FormControl type="text" name={`f_${f.field}`} defaultValue={`${f.type},  an invisible entry (${f.field})`} disabled /></Col>
+      </FormGroup>
+    );
+  }
+
+  renderTextFieldGroup(f, label, field) {
+    return (
+      <FormGroup controlId={`frmCtrlFid_${this.props.layerKey}_${f.field}_${field}`}>
+        <Col componentClass={ControlLabel} sm={3}>{label}</Col>
+        <Col sm={9}>
+          <FormControl
+            type="text"
+            name={`f_${field}`}
+            defaultValue={f[field]}
+            disabled={field === 'field'}
+            onChange={event => this.handleChange(event, f[field], f.field, this.props.layerKey, field, 'text')}
+          />
+        </Col>
+      </FormGroup>
+    );
+  }
+
+  renderComponent() {
+    const { unitsSystem, layerKey, genericType, allLayers } = this.props;
+    const unitConfig = (unitsSystem.fields || []).map(_c =>
+      ({ value: _c.field, name: _c.label, label: _c.label }));
+    let typeOpts = BaseFieldTypes;
+    switch (genericType) {
+      case 'Element':
+        typeOpts = BaseFieldTypes.concat(ElementFieldTypes);
+        break;
+      case 'Segment':
+        typeOpts = BaseFieldTypes.concat(SegmentFieldTypes);
+        break;
+      default:
+        typeOpts = BaseFieldTypes;
+    }
+    typeOpts.sort((a, b) => a.value.localeCompare(b.value));
+    const f = this.props.field;
+    const hasCond = (f && f.cond_fields && f.cond_fields.length > 0) || false;
+    const btnCond = hasCond ?
+      (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(f, layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
+      (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(f, layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />)
+    const formulaField = (f.type === 'formula-field') ? (
+      <FormGroup controlId="formControlFieldType">
+        <Col componentClass={ControlLabel} sm={3}>Formula</Col>
+        <Col sm={9}>
+          <div style={{ display: 'flex' }}>
+            <span style={{ width: '100%' }}>
+              <FormControl
+                type="text"
+                name="f_label"
+                defaultValue={f.formula}
+                onChange={event => this.handleChange(event, f.label, f.field, this.props.layerKey, 'formula', 'text')}
+              />
+            </span>
+          </div>
+        </Col>
+      </FormGroup>)
+      : (<div />);
+    const selectOptions = (f.type === 'select' || f.type === 'system-defined') ? (
+      <FormGroup controlId="formControlFieldType">
+        <Col componentClass={ControlLabel} sm={3}>{f.type === 'select' ? 'Options' : <span />}</Col>
+        <Col sm={9}>
+          <div style={{ display: 'flex' }}>
+            <span style={{ width: '100%' }}>
+              <Select
+                className="drop-up"
+                name={f.field}
+                multi={false}
+                options={f.type === 'select' ? this.props.select_options : unitConfig}
+                value={f.option_layers || ''}
+                onChange={event => this.handleChange(event, f.option_layers, f.field, layerKey, 'option_layers', f.type)}
+              />
+            </span>
+            {f.type === 'select' ? null : this.availableUnits(f.option_layers)}
+          </div>
+        </Col>
+      </FormGroup>)
+      : (<div />);
+    const skipRequired = ['Segment', 'Dataset'].includes(genericType) || !['integer', 'text'].includes(f.type) ? { display: 'none' } : {};
+    const groupOptions = ['input-group'].includes(f.type) ? (
+      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_sub_fields`}>
+        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
+        <Col sm={9}>
+          <GroupFields layerKey={layerKey} field={f} updSub={this.updSubField} unitsFields={(unitsSystem.fields || [])} />
+        </Col>
+      </FormGroup>
+    ) : null;
+    const tableOptions = ['table'].includes(f.type) ? (
+      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_sub_fields`}>
+        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
+        <Col sm={9}>
+          <TableDef genericType={genericType} layerKey={layerKey} field={f} updSub={this.updSubField} unitsFields={(unitsSystem.fields || [])} />
+          <InputGroup>
+            <InputGroup.Addon>Tables per row</InputGroup.Addon>
+            <FormControl componentClass="select" defaultValue={f.cols || 1} onChange={event => this.handleChange(event, f.cols, f.field, layerKey, 'cols', f.cols)} >
+              <option value={1}>1</option>
+              <option value={2}>2</option>
+            </FormControl>
+          </InputGroup>
+        </Col>
+      </FormGroup>
+    ) : null;
+    const textFormula = ['text-formula'].includes(f.type) ? (
+      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_text_sub_fields`}>
+        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
+        <Col sm={9}>
+          <TextFormula layerKey={layerKey} field={f} updSub={this.updSubField} allLayers={allLayers} />
+        </Col>
+      </FormGroup>
+    ) : null;
+    return (
+      <div>
+        <Panel>
+          <Panel.Heading className="template_panel_heading">
+            <Panel.Title toggle>
+              {this.props.position}&nbsp;
+              {['dummy'].includes(f.type) ? '(dummy field)' : f.field}
+            </Panel.Title>
+            <ButtonGroup bsSize="xsmall">
+              {btnCond}
+              <ButtonTooltip tip="Move Up" fnClick={this.handleMove} element={{ l: layerKey, f: f.field, isUp: true }} fa="fa-arrow-up" place="top" disabled={this.props.position === 1} />
+              <ButtonTooltip tip="Move Down" fnClick={this.handleMove} element={{ l: layerKey, f: f.field, isUp: false }} fa="fa-arrow-down" place="top" />
+              {this.renderDeleteButton('Field', f.field, layerKey)}
+              <ButtonTooltip tip="Add Dummy field" fnClick={this.handleAddDummy} element={{ l: layerKey, f: f.field }} fa="fa fa-plus-circle" place="top" />
+            </ButtonGroup>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              <Form horizontal className="default_style">
+                {['dummy'].includes(f.type) ? this.renderDummyFieldGroup(f) : null}
+                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Field Name', 'field') : null}
+                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Display Name', 'label') : null}
+                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Hover Info', 'description') : null}
+                {
+                  ['dummy'].includes(f.type) ? null : (
+                    <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_type`}>
+                      <Col componentClass={ControlLabel} sm={3}>Type</Col>
+                      <Col sm={9}>
+                        <div style={{ display: 'flex' }}>
+                          <span style={{ width: '100%' }}>
+                            <Select
+                              className="drop-up"
+                              name={f.field}
+                              multi={false}
+                              options={typeOpts}
+                              value={f.type}
+                              onChange={event => this.handleChange(event, f.type, f.field, layerKey, 'type', 'select')}
+                            />
+                          </span>
+                        </div>
+                      </Col>
+                    </FormGroup>)
+                  }
+                { groupOptions }
+                { tableOptions }
+                { selectOptions }
+                { formulaField }
+                { textFormula }
+                {
+                  ['dummy'].includes(f.type) ? null : (
+                    <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_required`} style={skipRequired}>
+                      <Col componentClass={ControlLabel} sm={3}>
+                        Required
+                      </Col>
+                      <Col sm={9}>
+                        <Checkbox
+                          checked={f.required}
+                          onChange={event => this.handleChange(event, f.required, f.field, layerKey, 'required', 'checkbox')}
+                        />
+                      </Col>
+                    </FormGroup>)
+                }
+                {['integer', 'text'].includes(f.type) ? this.renderTextFieldGroup(f, 'Placeholder', 'placeholder') : null}
+              </Form>
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    );
+  }
+
+  render() { return <Col md={12}>{this.renderComponent()}</Col>; }
+}
+
+ElementField.propTypes = {
+  genericType: PropTypes.string, // PropTypes.arrayOf(PropTypes.object),
+  layerKey: PropTypes.string.isRequired,
+  select_options: PropTypes.array.isRequired,
+  position: PropTypes.number.isRequired,
+  field: PropTypes.shape({
+    field: PropTypes.string,
+    type: PropTypes.string,
+    label: PropTypes.string,
+  }).isRequired,
+  onDrop: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  unitsSystem: PropTypes.object,
+  onFieldSubFieldChange: PropTypes.func.isRequired,
+  onDummyAdd: PropTypes.func.isRequired,
+  onShowFieldCond: PropTypes.func.isRequired,
+};
+
+ElementField.defaultProps = { genericType: 'Element', unitsSystem: [] };
+
+export { ElementField, ElementFieldTypes };
diff --git a/app/packs/src/components/elements/ElementFieldDragSource.js b/app/packs/src/components/elements/ElementFieldDragSource.js
new file mode 100644
index 000000000..62550e2d6
--- /dev/null
+++ b/app/packs/src/components/elements/ElementFieldDragSource.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from '../../components/DragDropItemTypes';
+
+const listSource = {
+  beginDrag(props) {
+    console.log('begin Drag');
+    console.log(props.field);
+    return { field: props.field, layerKey: props.layerKey };
+  },
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const ElementFieldDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
+
+export default DragSource(DragDropItemTypes.ELEMENT_FIELD, listSource, collectSource)(ElementFieldDragSource);
+
+ElementFieldDragSource.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/elements/ElementFieldDropTarget.js b/app/packs/src/components/elements/ElementFieldDropTarget.js
new file mode 100644
index 000000000..caf06404f
--- /dev/null
+++ b/app/packs/src/components/elements/ElementFieldDropTarget.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../DragDropItemTypes';
+
+const fieldTarget = {
+  drop(targetProps, monitor) {
+    const targetTag = { field: targetProps.field, layerKey: targetProps.layerKey };
+    const sourceProps = monitor.getItem();
+    console.log('drop--:', sourceProps);
+    console.log('drop--:', monitor);
+    const sourceTag = { field: sourceProps.field, layerKey: sourceProps.layerKey };
+    //if (targetTag.field !== sourceTag.field) {
+      targetProps.onDrop({ sourceTag, targetTag });
+    //}
+  },
+  canDrop(targetProps, monitor) {
+    //console.log('canDrop--:', monitor.getItem());
+    return true;
+  },
+  hover(props, monitor, component) {
+    //console.log('hover--:', monitor.getItem());
+  }
+};
+
+const fieldDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+
+class ElementFieldDropTarget extends Component {
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className}><div className="indicator" />DROP   here</div>);
+  }
+}
+
+export default DropTarget(
+  DragDropItemTypes.ELEMENT_FIELD,
+  fieldTarget, fieldDropCollect
+)(ElementFieldDropTarget);
+
+ElementFieldDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/components/elements/GroupFields.js b/app/packs/src/components/elements/GroupFields.js
new file mode 100644
index 000000000..cbc89994c
--- /dev/null
+++ b/app/packs/src/components/elements/GroupFields.js
@@ -0,0 +1,216 @@
+/* eslint-disable react/forbid-prop-types */
+import { AgGridReact } from 'ag-grid-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, FormGroup, FormControl } from 'react-bootstrap';
+import GenericSubField from '../models/GenericSubField';
+import DefinedRenderer from '../generic/DefinedRenderer';
+
+const AddRowBtn = ({ addRow }) => (
+  <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+);
+
+AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
+
+const DelRowBtn = ({ delRow, node }) => {
+  const { data } = node;
+  const btnClick = () => {
+    delRow(data);
+  };
+  return (<Button onClick={btnClick} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>);
+};
+
+DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+const TypeSelect = ({ selType, node }) => (
+  <FormGroup bsSize="small" style={{ marginRight: '-10px', marginLeft: '-10px' }}>
+    <FormControl componentClass="select" placeholder="select the type" onChange={e => selType(e, node)} defaultValue={node.data.type}>
+      <option value="label">label</option>
+      <option value="number">number</option>
+      <option value="text">text</option>
+      <option value="system-defined">System-Defined</option>
+    </FormControl>
+  </FormGroup>
+);
+
+TypeSelect.propTypes = { selType: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+export default class GroupFields extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      unitConfig: props.unitsFields.map(e => ({ value: e.field, name: e.label, label: e.label }))
+    };
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.selType = this.selType.bind(this);
+    this.selDefined = this.selDefined.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+    this.columnDefs = [
+      {
+        headerName: 'Id',
+        field: 'id',
+        editable: false,
+        minWidth: 50,
+        width: 50,
+      },
+      {
+        headerName: 'Data Type',
+        field: 'type',
+        editable: false,
+        minWidth: 150,
+        width: 150,
+        cellRendererFramework: TypeSelect,
+        cellRendererParams: { selType: this.selType },
+      },
+      {
+        headerName: 'Default Value',
+        field: 'value',
+        editable: (e) => { if (e.data.type === 'system-defined') return false; return true; },
+        minWidth: 250,
+        cellRenderer: 'systemDefinedRenderer',
+        cellRendererParams: { unitConfig: this.state.unitConfig, selDefined: this.selDefined },
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: 'Option Layers(hidden)',
+        field: 'option_layers',
+        width: 10,
+        hide: true,
+      },
+      {
+        headerName: 'Value System(hidden)',
+        field: 'value_system',
+        width: 10,
+        hide: true,
+      },
+      {
+        headerName: '',
+        colId: 'actions',
+        headerComponentFramework: AddRowBtn,
+        headerComponentParams: { addRow: this.addRow },
+        cellRendererFramework: DelRowBtn,
+        cellRendererParams: { delRow: this.delRow },
+        editable: false,
+        filter: false,
+        minWidth: 48,
+        width: 48,
+        suppressSizeToFit: true,
+        pinned: 'left'
+      },
+    ];
+    this.frameworkComponents = {
+      systemDefinedRenderer: DefinedRenderer
+    };
+  }
+
+  componentDidUpdate() {
+    this.autoSizeAll();
+  }
+
+  onGridReady(e) {
+    this.gridApi = e.api;
+    this.autoSizeAll();
+  }
+
+  onCellValueChanged(params) {
+    const { oldValue, newValue } = params;
+    if (oldValue === newValue) return;
+    this.refresh();
+  }
+
+  autoSizeAll() {
+    if (!this.gridApi) return;
+    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
+  }
+
+  delRow() {
+    const selectedData = this.gridApi.getSelectedRows();
+    this.gridApi.applyTransaction({ remove: selectedData });
+    this.refresh();
+  }
+
+  addRow() {
+    const newSub = new GenericSubField({ type: 'text', value: '' });
+    const idx = this.gridApi.getDisplayedRowCount();
+    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
+    this.refresh();
+  }
+
+  selType(e, node) {
+    const { data } = node;
+    if (e.target.value === data.type) { return; }
+    data.type = e.target.value;
+    data.value = '';
+    const { unitConfig } = this.state;
+    if (data.type === 'system-defined') {
+      data.option_layers = (unitConfig || [])[0].value;
+      data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
+        .units || [])[0].key;
+    } else {
+      delete data.option_layers;
+      delete data.value_system;
+    }
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.sub_fields = rows;
+    this.gridApi.setRowData(rows);
+    updSub(layerKey, field, () => {});
+  }
+
+  selDefined(e, node) {
+    const { data } = node;
+    if (e.target.value === data.option_layers) { return; }
+    data.option_layers = e.target.value;
+    data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
+      .units || [])[0].key;
+    this.refresh();
+  }
+
+  refresh() {
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.sub_fields = rows;
+    updSub(layerKey, field, () => {});
+  }
+
+  render() {
+    const { field } = this.props;
+    const sub = field.sub_fields || [];
+    return (
+      <div>
+        <div style={{ fontSize: '10px' }}>
+          <b>Input Group: </b>
+          define the fields which are grouped together and display as one field;<br />
+          note: &#39;System-Defined&#39; represents the Unit field which
+          has one input field and one unit converter.
+        </div>
+        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
+          <AgGridReact
+            enableColResize
+            columnDefs={this.columnDefs}
+            rowSelection="single"
+            onGridReady={this.onGridReady}
+            rowData={sub}
+            singleClickEdit
+            stopEditingWhenGridLosesFocus
+            frameworkComponents={this.frameworkComponents}
+            domLayout="autoHeight"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+GroupFields.propTypes = {
+  layerKey: PropTypes.string.isRequired,
+  field: PropTypes.object.isRequired,
+  updSub: PropTypes.func.isRequired,
+  unitsFields: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
diff --git a/app/packs/src/components/elements/UserCounter.js b/app/packs/src/components/elements/UserCounter.js
new file mode 100644
index 000000000..ed590685f
--- /dev/null
+++ b/app/packs/src/components/elements/UserCounter.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Row, Col, Panel, Button, FormControl } from 'react-bootstrap';
+import uuid from 'uuid';
+import UserStore from '../stores/UserStore';
+import UserActions from '../actions/UserActions';
+import AdminFetcher from '../fetchers/AdminFetcher';
+import UsersFetcher from '../fetchers/UsersFetcher';
+
+export default class UserCounter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { currentUser: null, klasses: [] };
+    this.onChange = this.onChange.bind(this);
+    this.fetchKlasses = this.fetchKlasses.bind(this);
+    this.handleCounterChange = this.handleCounterChange.bind(this);
+    this.handleUpdate = this.handleUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+    this.fetchKlasses();
+  }
+
+  onChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) {
+      this.setState({ currentUser: state.currentUser });
+      this.fetchKlasses();
+    }
+  }
+
+
+  handleCounterChange(key, value) {
+    const { currentUser } = this.state;
+    const counters = (currentUser && currentUser.counters) || {};
+    counters[key] = value;
+    currentUser.counters = counters;
+    this.setState({ currentUser });
+  }
+
+  handleUpdate(type) {
+    const { currentUser } = this.state;
+    const counters = (currentUser && currentUser.counters) || {};
+    UsersFetcher.updateUserCounter({
+      type,
+      counter: counters[type] || 0
+    }).then(() => { document.location.href = '/'; }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  fetchKlasses() {
+    AdminFetcher.fetchElementKlasses()
+      .then((result) => {
+        const genericEntities = result && result.klass.filter(u => u.is_generic === true);
+        this.setState({ klasses: genericEntities || [] });
+      });
+  }
+
+  render() {
+    const { currentUser, klasses } = this.state;
+    const counterBody = (klasses || []).filter(k => k.is_active === true).map((klass) => {
+      const counter = parseInt((currentUser && currentUser.counters[klass.name]) || 0, 10);
+      const nextNum = `${currentUser && currentUser.initials}-${klass.klass_prefix}${counter + 1}`;
+      return (
+        <div key={uuid.v1()} style={{ marginTop: 10 }}>
+          <Row key={uuid.v1()}>
+            <Col sm={2}>{klass.label}</Col>
+            <Col sm={1}>{klass.klass_prefix}</Col>
+            <Col sm={3}>
+              <FormControl type="number" value={counter} onChange={e => this.handleCounterChange(klass.name, e.target.value)} min={0} />
+            </Col>
+            <Col sm={2}>{nextNum}</Col>
+            <Col sm={4}><Button bsStyle="primary" onClick={() => this.handleUpdate(klass.name)}>Update counter</Button></Col>
+          </Row>
+        </div>
+      );
+    });
+    if (klasses && klasses.length === 0) return (<span />);
+    return (
+      <Panel>
+        <Panel.Heading><Panel.Title>Element Counter</Panel.Title></Panel.Heading>
+        <Panel.Body>
+          <Row>
+            <Col sm={2}><b><u>Element Label</u></b></Col>
+            <Col sm={1}><b><u>Prefix</u></b></Col>
+            <Col sm={3}><b><u>Counter starts at</u></b></Col>
+            <Col sm={2}><b><u>Next Label</u></b></Col>
+            <Col sm={4}>&nbsp;</Col>
+          </Row>
+          {counterBody}
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('UserCounter');
+  if (domElement) { ReactDOM.render(<UserCounter />, domElement); }
+});
diff --git a/app/packs/src/components/examples/NumeralInputWithUnitsExample.js b/app/packs/src/components/examples/NumeralInputWithUnitsExample.js
new file mode 100644
index 000000000..c39257b71
--- /dev/null
+++ b/app/packs/src/components/examples/NumeralInputWithUnitsExample.js
@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import NumeralInput from '../NumeralInput'
+import NumeralInputWithUnits from '../NumeralInputWithUnits'
+
+export default class NumeralInputWithUnitsExample extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let ajaxCall = (unit, nextUnit, value) => {
+      let convertedValue = value;
+      if (unit && nextUnit && unit != nextUnit) {
+        switch (unit) {
+          case 'g':
+            if (nextUnit == 'mol') {
+              convertedValue = value * 2;
+            }
+            break;
+          case 'mol':
+            if (nextUnit == 'g') {
+              convertedValue = value / 2;
+            }
+            break;
+        }
+      }
+
+      return convertedValue;
+    };
+    return (
+      <div>
+        NumeralInput-Component with success and large and defaultValue
+        <NumeralInput bsStyle='success' bsSize='large' value='10'/>
+        NumeralInput-Component with defaultValue and numeralFormat
+        <NumeralInput value='10.2' numeralFormat='0,0.0'/>
+        NumeralInputWithUnits-Component with no props ~= NumeralInput-Component
+        <NumeralInputWithUnits />
+        NumeralInputWithUnits-Component with just one unit
+        <NumeralInputWithUnits units={['t']}/>
+        NumeralInputWithUnits-Component with unit-select and convertCallback
+        <NumeralInputWithUnits units={['g', 'mol']}
+                               convertValueFromUnitToNextUnit={(unit, nextUnit, value) => ajaxCall(unit, nextUnit, value)}/>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/fetchers/AdminFetcher.js b/app/packs/src/components/fetchers/AdminFetcher.js
new file mode 100644
index 000000000..178554f35
--- /dev/null
+++ b/app/packs/src/components/fetchers/AdminFetcher.js
@@ -0,0 +1,427 @@
+import 'whatwg-fetch';
+import BaseFetcher from './BaseFetcher';
+
+export default class AdminFetcher {
+  static fetchUnitsSystem() {
+    return fetch('/units_system/units_system.json', {
+      credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' }
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchLocalCollector() {
+    return fetch('/api/v1/admin/listLocalCollector/all.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static checkDiskSpace() {
+    return fetch('/api/v1/admin/disk.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDevices() {
+    return fetch('/api/v1/admin/listDevices/all.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDeviceById(deviceId) {
+    return fetch(`/api/v1/admin/device/${deviceId}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDeviceMetadataByDeviceId(deviceId) {
+    return fetch(`/api/v1/admin/deviceMetadata/${deviceId}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static postDeviceMetadata(params) {
+    return fetch('/api/v1/admin/deviceMetadata', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static syncDeviceMetadataToDataCite(params) {
+    return fetch(`/api/v1/admin/deviceMetadata/${params.device_id}/sync_to_data_cite`, {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static testSFTP(params) {
+    return fetch('/api/v1/admin/sftpDevice/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static removeDeviceMethod(params) {
+    return fetch('/api/v1/admin/removeDeviceMethod/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateDeviceMethod(params) {
+    return fetch('/api/v1/admin/updateDeviceMethod/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static editNovncSettings(params) {
+    return fetch('/api/v1/admin/editNovncSettings/', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then((response) => {
+      if (response.status === 204) { return ''; }
+      return 'error';
+    });
+  }
+
+  static resetUserPassword(params) {
+    return fetch('/api/v1/admin/resetPassword/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createUserAccount(params) {
+    return fetch('/api/v1/admin/newUser/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateUser(params) {
+    return fetch('/api/v1/admin/updateUser/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUsers() {
+    return fetch('/api/v1/admin/listUsers/all.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateAccount(params) {
+    return fetch('/api/v1/admin/updateAccount/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static olsTermDisableEnable(params) {
+    return fetch('/api/v1/admin/olsEnableDisable/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then((response) => {
+      if (response.status === 204) {
+        return true;
+      }
+    });
+  }
+
+  static importOlsTerms(file) {
+    const data = new FormData();
+    data.append('file', file);
+
+    return fetch('/api/v1/admin/importOlsTerms/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchGroupsDevices(type) {
+    return fetch(`/api/v1/admin/group_device/list?type=${type}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateGroup(params = {}) {
+    return fetch(`/api/v1/admin/group_device/update/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUsersByNameType(name, type) {
+    return fetch(`/api/v1/admin/group_device/name.json?type=${type}&name=${name}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createGroupDevice(params = {}) {
+    return fetch('/api/v1/admin/group_device/create', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUserGroupByName(name) {
+    return fetch(`/api/v1/admin/matrix/find_user.json?name=${name}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchMatrices() {
+    return fetch('/api/v1/admin/matrix/list.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateMatrice(params) {
+    return fetch('/api/v1/admin/matrix/update/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateMatriceJson(params) {
+    return fetch('/api/v1/admin/matrix/update_json/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static exec(path, method) {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: path, requestMethod: method, jsonTranformation: json => json
+    });
+  }
+
+  static genericKlass(params, path) {
+    return BaseFetcher.withBodyData({
+      apiEndpoint: `/api/v1/admin/${path}/`, requestMethod: 'POST', bodyData: params, jsonTranformation: json => json
+    });
+  }
+
+  static fetchElementKlasses() {
+    return this.exec('/api/v1/generic_elements/klasses_all.json', 'GET');
+  }
+
+  static updateGElTemplates(params) {
+    return this.genericKlass(params, 'update_element_template');
+  }
+
+  static createElementKlass(params) {
+    return this.genericKlass(params, 'create_element_klass');
+  }
+
+  static updateElementKlass(params) {
+    return this.genericKlass(params, 'update_element_klass');
+  }
+
+  static activeInActiveElementKlass(params) {
+    return this.genericKlass(params, 'de_active_element_klass');
+  }
+
+  static deleteElementKlass(params) {
+    return this.genericKlass(params, 'delete_element_klass');
+  }
+
+  static createSegmentKlass(params) {
+    return this.genericKlass(params, 'create_segment_klass');
+  }
+
+  static updateSegmentKlass(params) {
+    return this.genericKlass(params, 'update_segment_klass');
+  }
+
+  static deleteSegmentKlass(id) {
+    return this.exec(`/api/v1/admin/delete_segment_klass/${id}`, 'DELETE');
+  }
+
+  static deActiveSegmentKlass(params) {
+    return this.genericKlass(params, 'de_active_segment_klass');
+  }
+
+  static updateSegmentTemplate(params) {
+    return this.genericKlass(params, 'update_segment_template');
+  }
+
+  static deleteKlassRevision(params) {
+    return this.genericKlass(params, 'delete_klass_revision');
+  }
+
+  static deleteGenericRevision(id) {
+    return this.exec(`/api/v1/admin/delete_generic_revision/${id}`, 'DELETE');
+  }
+
+  static listSegmentKlass(params = {}) {
+    const api = params.is_active === undefined ? '/api/v1/admin/list_segment_klass.json' : `/api/v1/admin/list_segment_klass.json?is_active=${params.is_active}`;
+    return this.exec(api, 'GET');
+  }
+
+  static listDatasetKlass(params = {}) {
+    const api = params.is_active === undefined ? '/api/v1/admin/list_dataset_klass.json' : `/api/v1/admin/list_dataset_klass.json?is_active=${params.is_active}`;
+    return this.exec(api, 'GET');
+  }
+
+  static deActiveDatasetKlass(params) {
+    return this.genericKlass(params, 'de_active_dataset_klass');
+  }
+
+  static updateDatasetTemplate(params) {
+    return this.genericKlass(params, 'update_dataset_template');
+  }
+
+  static fetchJobs() {
+    return fetch('/api/v1/admin/jobs', {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+
+  static restartJob(id) {
+    return fetch('/api/v1/admin/jobs/restart/', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(id)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+
+  static fetchKlassRevisions(id, klass) {
+    return this.exec(`/api/v1/admin/klass_revisions.json?id=${id}&klass=${klass}`, 'GET');
+  }
+}
diff --git a/app/packs/src/components/fetchers/ArticleFetcher.js b/app/packs/src/components/fetchers/ArticleFetcher.js
new file mode 100644
index 000000000..4c8d151e7
--- /dev/null
+++ b/app/packs/src/components/fetchers/ArticleFetcher.js
@@ -0,0 +1,111 @@
+import 'whatwg-fetch';
+
+export default class ArticleFetcher {
+  static initial() {
+    const promise = fetch('/api/v1/public/article_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdate(params) {
+    const promise = fetch('/api/v1/articles/create_or_update/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static delete(params) {
+    const promise = fetch(`/api/v1/articles/${params.key}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static initialHowTo() {
+    const promise = fetch('/api/v1/public/howto_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdateHowTo(params) {
+    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static deleteHowTo(params) {
+    const promise = fetch('/api/v1/articles/delete_howto', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static updateEditorImage(file, editorType) {
+    const data = new FormData();
+    data.append('file[]', file.file, file.name);
+    data.append('editor_type', editorType);
+    const promise = fetch('/api/v1/articles/editor_image', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/AttachmentFetcher.js b/app/packs/src/components/fetchers/AttachmentFetcher.js
new file mode 100644
index 000000000..7c6acbac4
--- /dev/null
+++ b/app/packs/src/components/fetchers/AttachmentFetcher.js
@@ -0,0 +1,523 @@
+import 'whatwg-fetch';
+import { camelizeKeys, decamelizeKeys } from 'humps';
+
+import Attachment from '../models/Attachment';
+import NotificationActions from '../actions/NotificationActions';
+import SparkMD5 from 'spark-md5';
+import LoadingActions from '../actions/LoadingActions';
+
+const fileFromAttachment = (attachment, containerId) => {
+  const { file } = attachment;
+  file.id = attachment.id;
+  file.attachable_id = containerId;
+  file.attachable_type = 'Container';
+  return file;
+};
+
+export default class AttachmentFetcher {
+
+  static fetchImageAttachment(params) {
+    const promise = fetch(`/api/v1/attachments/image/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'GET'
+    }).then(response => response.blob())
+      .then(blob => ({ type: blob.type, data: URL.createObjectURL(blob) }))
+      .catch((errorMessage) => { console.log(errorMessage); });
+    return promise;
+  }
+
+  static fetchThumbnail(params) {
+    let promise = fetch(`/api/v1/attachments/thumbnail/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'GET'
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static fetchThumbnails(ids) {
+    let promise = fetch('/api/v1/attachments/thumbnails/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ids }),
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static fetchFiles(ids) {
+    let promise = fetch('/api/v1/attachments/files/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ids }),
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static fetchJcamp(target) {
+    const { file, mass, mol } = target;
+    const data = new FormData();
+    data.append('file', file);
+    data.append('molfile', mol);
+    data.append('mass', mass);
+
+    let promise = fetch('/api/v1/chemspectra/file/convert', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data,
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static getFileListfrom(container) {
+    if (container == null) return [];
+    const allFiles = [];
+    this.filterAllAttachments(allFiles, container.children);
+    return allFiles
+  }
+
+  static filterAllAttachments(files, containers) {
+    containers.forEach((container) => {
+      const tmpArray = (container.attachments || []).filter(a => a.is_new)
+        .map(a => fileFromAttachment(a, container.id));
+      files.push.apply(files, tmpArray);
+
+      if (container.children && container.children.length > 0) {
+        this.filterAllAttachments(files, container.children);
+      }
+    });
+  }
+
+  static updateAttachables(files, attachableType, attachableId, dels) {
+    const data = new FormData();
+    files.forEach((file) => {
+      data.append('files[]', file.file, file.name);
+    });
+    data.append('attachable_type', attachableType);
+    data.append('attachable_id', attachableId);
+    dels.forEach((f) => {
+      data.append('del_files[]', f.id);
+    });
+    return () => fetch('/api/v1/attachable/update_attachments_attachable', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      if (response.ok === false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status === 413) {
+          msg += 'File size limit exceeded.';
+        } else {
+          msg += response.statusText;
+        }
+        NotificationActions.add({ message: msg, level: 'error', position: 'tc' });
+      }
+    });
+  }
+
+  static uploadToInbox(attachments) {
+    const data = new FormData();
+    const files = (attachments).filter(f => f.is_new)
+      .map(f => fileFromAttachment(f, null));
+    files.forEach((file) => {
+      data.append(file.id || file.name, file);
+    });
+    return () => fetch('/api/v1/attachments/upload_to_inbox', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      if (response.ok === false) {
+        let msg = 'Files uploading to Inbox failed: ';
+        if (response.status === 413) {
+          msg += 'File size limit exceeded.';
+        } else {
+          msg += response.statusText;
+        }
+        NotificationActions.add({
+          message: msg,
+          level: 'error'
+        });
+      }
+    });
+  }
+
+  static uploadFiles(files) {
+    const data = new FormData()
+    files.forEach((file) => {
+      data.append(file.id || file.name, file);
+    });
+    return () => fetch('/api/v1/attachments/upload_dataset_attachments', {
+      credentials: 'same-origin',
+      contentType: 'application/json',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      if (response.ok == false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status == 413) {
+          msg += 'File size limit exceeded.'
+        } else {
+          msg += response.statusText;
+        }
+        NotificationActions.add({
+          message: msg,
+          level: 'error'
+        });
+      }
+    })
+  }
+
+  static uploadCompleted(filename, key, checksum) {
+    return () => fetch('/api/v1/attachments/upload_chunk_complete', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ filename: filename, key: key, checksum: checksum }),
+    }).then(response => response.json())
+      .then((response) => {
+      LoadingActions.stopLoadingWithProgress(filename);
+      if (response.ok == false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status == 413) {
+          msg += 'File size limit exceeded.';
+        } else {
+          msg += response.statusText;
+        }
+
+        NotificationActions.add({
+          message: msg,
+          level: 'error'
+        });
+      }
+    })
+  };
+
+  static uploadChunk(chunk, counter, key, progress, filename) {
+    let body = { file: chunk, counter: counter, key: key };
+    const formData = new FormData();
+    for (const name in body) {
+      formData.append(name, body[name]);
+    }
+    return () => fetch('/api/v1/attachments/upload_chunk', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: formData
+    })
+      .then(response => response.json())
+      .then((response) => {
+        LoadingActions.updateLoadingProgress(filename, progress);
+        if (response.ok == false) {
+          const msg = `Chunk uploading failed: ${response.statusText}`;
+          NotificationActions.add({
+            message: msg,
+            level: 'error'
+          });
+        }
+      });
+  };
+
+  static async uploadFile(file) {
+    LoadingActions.startLoadingWithProgress(file.name);
+    const chunkSize = 100 * 1024 * 1024;
+    const chunksCount = file.size % chunkSize == 0
+      ? file.size / chunkSize
+      : Math.floor(file.size / chunkSize) + 1;
+    let beginingOfTheChunk = 0;
+    let endOfTheChunk = chunkSize;
+    let tasks = [];
+    const key = file.id;
+    let spark = new SparkMD5.ArrayBuffer();
+    let totalStep = chunksCount + 1;
+    for (let counter = 1; counter <= chunksCount; counter++) {
+      let chunk = file.slice(beginingOfTheChunk, endOfTheChunk);
+      tasks.push(this.uploadChunk(chunk, counter, key, counter/totalStep, file.name)());
+      spark.append(await this.getFileContent(chunk));
+      beginingOfTheChunk = endOfTheChunk;
+      endOfTheChunk += chunkSize;
+    }
+
+    let checksum = spark.end();
+    return Promise.all(tasks).then(() => {
+      return this.uploadCompleted(file.name, key, checksum)();
+    });
+  }
+
+  static getFileContent(file) {
+    let promise = new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.onload = function (event) {
+        let buffer = new Uint8Array(event.target.result);
+        resolve(buffer);
+      };
+
+      reader.readAsArrayBuffer(file);
+    });
+
+    return promise;
+  }
+
+  static deleteAttachment(params) {
+    let promise = fetch(`/api/v1/attachments/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return new Attachment(json.attachment);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static deleteContainerLink(params) {
+    let promise = fetch(`/api/v1/attachments/link/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return new Attachment(json.attachment);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static downloadZip(id) {
+    let file_name = 'dataset.zip'
+    return fetch(`/api/v1/attachments/zip/${id}`, {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition')
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        let matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          file_name = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob()
+    }).then((blob) => {
+      const a = document.createElement("a");
+      a.style = "display: none";
+      document.body.appendChild(a);
+      let url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = file_name
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static downloadZipBySample(sampleId) {
+    let fileName = 'dataset.zip';
+    return fetch(`/api/v1/attachments/sample_analyses/${sampleId}`, {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition');
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          fileName = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static saveSpectrum(attId, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr) {
+    const params = {
+      attachmentId: attId,
+      peaksStr,
+      shiftSelectX: shift.peak.x,
+      shiftRefName: shift.ref.name,
+      shiftRefValue: shift.ref.value,
+      scan,
+      thres,
+      integration,
+      multiplicity,
+      predict,
+      keepPred,
+      waveLength: waveLengthStr,
+      cyclicvolta: cyclicvolta,
+      curveIdx: curveIdx,
+      simulatenmr: simulatenmr,
+    };
+
+    const promise = fetch(
+      '/api/v1/attachments/save_spectrum/',
+      {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers:
+        {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(decamelizeKeys(params)),
+      },
+    )
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static inferSpectrum(attId, peaksStr, shift, scan, thres, integration, multiplicity, predict, peaks, layout, keepPred) {
+    const params = {
+      attachmentId: attId,
+      peaksStr,
+      shiftSelectX: shift.peak.x,
+      shiftRefName: shift.ref.name,
+      shiftRefValue: shift.ref.value,
+      scan,
+      thres,
+      integration,
+      multiplicity,
+      predict,
+      keepPred,
+      peaks: JSON.stringify(peaks),
+      shift: JSON.stringify(shift),
+      layout,
+    };
+
+    const promise = fetch(
+      '/api/v1/attachments/infer/',
+      {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers:
+        {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(decamelizeKeys(params)),
+      },
+    )
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static regenerateSpectrum(jcampIds) {
+    const promise = fetch(
+      '/api/v1/attachments/regenerate_spectrum/',
+      {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers:
+        {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          original: jcampIds.orig,
+          generated: jcampIds.gene,
+        }),
+      },
+    )
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static regenerateEditedSpectrum(jcampIds, molfile) {
+    const promise = fetch(
+      '/api/v1/attachments/regenerate_edited_spectrum/',
+      {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers:
+          {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+        body: JSON.stringify({
+          edited: jcampIds.edited,
+          molfile: molfile
+        }),
+      },
+    )
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/BaseFetcher.js b/app/packs/src/components/fetchers/BaseFetcher.js
new file mode 100644
index 000000000..268aafb71
--- /dev/null
+++ b/app/packs/src/components/fetchers/BaseFetcher.js
@@ -0,0 +1,76 @@
+import 'whatwg-fetch';
+
+import UIStore from '../stores/UIStore';
+
+export default class BaseFetcher {
+  /**
+   * @param {Object} params = { apiEndpoint, requestMethod, bodyData, jsonTranformation }
+   */
+  static withBodyData(params) {
+    const { apiEndpoint, requestMethod, bodyData, jsonTranformation } = params;
+    let promise = fetch(apiEndpoint, {
+      credentials: 'same-origin',
+      method: requestMethod,
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(bodyData)
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return jsonTranformation(json)
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  /**
+   * @param {Object} params = { apiEndpoint, requestMethod, jsonTranformation }
+   */
+  static withoutBodyData(params) {
+    const { apiEndpoint, requestMethod, jsonTranformation } = params;
+
+    let promise = fetch(apiEndpoint, {
+      credentials: 'same-origin',
+      method: requestMethod
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return jsonTranformation(json)
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false, type = 'samples', ElKlass) {
+    const page = queryParams.page || 1;
+    const perPage = queryParams.per_page || UIStore.getState().number_of_results;
+    const filterCreatedAt = queryParams.filterCreatedAt === true ? '&filter_created_at=true' : '&filter_created_at=false';
+    const fromDate = queryParams.fromDate ? `&from_date=${queryParams.fromDate.unix()}` : '';
+    const toDate = queryParams.toDate ? `&to_date=${queryParams.toDate.unix()}` : '';
+    const product_only = queryParams.productOnly === true ? `&product_only=true` : '&product_only=false';
+    const api = `/api/v1/${type}.json?${isSync ? 'sync_' : ''}` +
+              `collection_id=${id}&page=${page}&per_page=${perPage}&` +
+              `${fromDate}${toDate}${filterCreatedAt}${product_only}`;
+    let addQuery = type === 'samples' ?
+      `&product_only=${queryParams.productOnly || false}&molecule_sort=${queryParams.moleculeSort ? 1 : 0}`
+      : '';
+    addQuery = type === 'generic_elements' ? `&el_type=${queryParams.name}` : '';
+    return fetch(api.concat(addQuery), {
+      credentials: 'same-origin'
+    }).then(response => (
+      response.json().then(json => ({
+        elements: json[type].map(r => (new ElKlass(r))),
+        totalElements: parseInt(response.headers.get('X-Total'), 10),
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
+      }))
+    )).catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/CollaboratorFetcher.js b/app/packs/src/components/fetchers/CollaboratorFetcher.js
new file mode 100644
index 000000000..a3a417960
--- /dev/null
+++ b/app/packs/src/components/fetchers/CollaboratorFetcher.js
@@ -0,0 +1,128 @@
+import 'whatwg-fetch';
+
+export default class CollaboratorFetcher {
+
+  static fetchMyCollaborations() {
+    return fetch('/api/v1/collaborators/list', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static AddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/add', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createAddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/create', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static addCollaboratorAff(params = {}) {
+    return fetch('/api/v1/collaborators/add_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteCollaboration(params) {
+    return fetch('/api/v1/collaborators/delete', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteCollaboratorAff(params) {
+    return fetch('/api/v1/collaborators/delete_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static refreshOrcidAff(params) {
+    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static loadOrcidByUserId(params) {
+    return fetch('/api/v1/collaborators/load_orcid', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUsersByNameFirst(name, first, email) {
+    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}&email=${email}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchandAddCollaboratorByOrcid(orcid) {
+    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/CollectionsFetcher.js b/app/packs/src/components/fetchers/CollectionsFetcher.js
new file mode 100644
index 000000000..7a1ee3d0d
--- /dev/null
+++ b/app/packs/src/components/fetchers/CollectionsFetcher.js
@@ -0,0 +1,369 @@
+import 'whatwg-fetch';
+import BaseFetcher from 'src/fetchers/BaseFetcher';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import { downloadBlob } from 'src/utilities/FetcherHelper';
+
+export default class CollectionsFetcher {
+  static takeOwnership(params) {
+    let sync = params.isSync ? "syncC" : "c"
+    let promise = fetch(`/api/v1/${sync}ollections/take_ownership/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'POST'
+    })
+
+    return promise;
+  }
+
+  static fetchGenericEls() {
+    const promise = fetch('/api/v1/collections/locked.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static fetchLockedRoots() {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: '/api/v1/collections/locked.json',
+      requestMethod: 'GET',
+      jsonTranformation: (json) => { return json }
+    });
+  }
+
+  static fetchUnsharedRoots() {
+    let promise = fetch('/api/v1/collections/roots.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static fetchSharedRoots() {
+    let promise = fetch('/api/v1/collections/shared_roots.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static fetchRemoteRoots() {
+    let promise = fetch('/api/v1/collections/remote_roots.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+  static fetchSyncRemoteRoots() {
+    let promise = fetch('/api/v1/syncCollections/sync_remote_roots.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static createSharedCollections(params) {
+    return fetch('/api/v1/collections/shared/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    });
+  }
+
+  static createSync(params) {
+    return fetch('/api/v1/syncCollections/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        collection_attributes: params.collection_attributes,
+        user_ids: params.user_ids,
+        id: params.id,
+      })
+    });
+  }
+
+  static editSync(params) {
+    let promise = fetch('/api/v1/syncCollections/' + params.id, {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        collection_attributes: params.collection_attributes,
+        user_ids: params.user_ids,
+      })
+    })
+
+    return promise;
+  }
+
+  static deleteSync(params) {
+    let promise = fetch('/api/v1/syncCollections/' + params.id, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        is_syncd: params.is_syncd
+      })
+    })
+    return promise;
+  }
+
+  static bulkUpdateUnsharedCollections(params) {
+    let promise = fetch('/api/v1/collections', {
+      credentials: 'same-origin',
+      method: 'PATCH',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        collections: params.collections,
+        deleted_ids: params.deleted_ids
+      })
+    })
+
+    return promise;
+  }
+
+  static rejectShared(params) {
+    const promise = fetch('/api/v1/collections/reject_shared', {
+      credentials: 'same-origin',
+      method: 'PATCH',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id: params.id
+      })
+    })
+    return promise;
+  }
+
+  static updateSharedCollection(params) {
+    let promise = fetch('/api/v1/collections/shared/' + params.id, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        collection_attributes: params.collection_attributes,
+      })
+    })
+
+    return promise;
+  }
+
+  static createUnsharedCollection(params) {
+    let promise = fetch('/api/v1/collections/unshared/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        label: params.label
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static updateElementsCollection(params) {
+    return fetch('/api/v1/collections/elements/', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: params.ui_state,
+        collection_id: params.collection_id,
+        is_sync_to_me: params.is_sync_to_me,
+        newCollection: params.newLabel,
+      })
+    }).then(response => response)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static assignElementsCollection(params) {
+    return fetch('/api/v1/collections/elements/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: params.ui_state,
+        collection_id: params.collection_id,
+        is_sync_to_me: params.is_sync_to_me,
+        newCollection: params.newLabel,
+      })
+    }).then(response => response)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static expotSamples(type, id) {
+    const fileName = `${type.charAt(0).toUpperCase() + type.substring(1)}_${id}_Samples Excel.xlsx`;
+    return fetch(`/api/v1/reports/excel_${type}?id=${id}`, {
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
+    }).then((response) => {
+      if (response.ok) { return response.blob(); }
+      throw Error(response.statusText);
+    }).then((blob) => {
+      downloadBlob(fileName, blob);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static removeElementsCollection(params) {
+    return fetch('/api/v1/collections/elements/', {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: params.ui_state,
+      })
+    }).then(response => response)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createExportJob(params) {
+    return fetch('/api/v1/collections/exports/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then((response) => {
+      NotificationActions.notifyExImportStatus('Collection export', response.status);
+      if (response.ok) { return true; }
+      throw new Error(response.status);
+    }).catch((errorMessage) => { throw new Error(errorMessage); });
+  }
+
+  static createImportJob(params) {
+    const data = new FormData();
+    data.append('file', params.file);
+
+    return fetch('/api/v1/collections/imports/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data
+    }).then((response) => {
+      NotificationActions.notifyExImportStatus('Collection import', response.status);
+      if (response.ok) { return true; }
+      throw new Error(response.status);
+    }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchTabsLayout(params) {
+    let promise = fetch('/api/v1/collections/tab_segments/' + params.id, {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static createTabsSegment(params) {
+    return fetch('/api/v1/collections/tabs/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id: params.currentCollectionId,
+        segments: params.layoutSegments
+      })
+    }).then(response => response)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateTabsLayout(params) {
+    return fetch('/api/v1/collections/tabs/', {
+      credentials: 'same-origin',
+      method: 'PATCH',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id: params.cId,
+        segment: params.segment
+      })
+    }).then(response => response)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/ComputeTaskFetcher.js b/app/packs/src/components/fetchers/ComputeTaskFetcher.js
new file mode 100644
index 000000000..9ed165539
--- /dev/null
+++ b/app/packs/src/components/fetchers/ComputeTaskFetcher.js
@@ -0,0 +1,46 @@
+import 'whatwg-fetch';
+import { camelizeKeys } from 'humps';
+
+import LoadingActions from '../actions/LoadingActions';
+
+export default class ComputeTaskFetcher {
+  static fetchAll() {
+    return fetch('/api/v1/compute_tasks/all', {
+      method: 'GET',
+      credentials: 'same-origin',
+    }).then(res => res.json()).then(json => (
+      camelizeKeys(json.compute_tasks || [])
+    )).catch(err => console.log(err));
+  }
+
+  static checkState(taskId) {
+    return fetch(`/api/v1/compute_tasks/${taskId}/check`, {
+      method: 'GET',
+      credentials: 'same-origin',
+    }).then(res => res.json()).then((json) => {
+      LoadingActions.stop.defer();
+      return camelizeKeys(json.check[0]);
+    }).catch(err => console.log(err));
+  }
+
+  static revokeTask(taskId) {
+    return fetch(`/api/v1/compute_tasks/${taskId}/revoke`, {
+      method: 'GET',
+      credentials: 'same-origin',
+    }).then(res => res.json()).then((json) => {
+      LoadingActions.stop.defer();
+      return camelizeKeys(json.revoke[0]);
+    }).catch(err => console.log(err));
+  }
+
+  static deleteTask(taskId) {
+    return fetch(`/api/v1/compute_tasks/${taskId}`, {
+      method: 'DELETE',
+      credentials: 'same-origin',
+    }).then(res => res.json()).then((json) => {
+      LoadingActions.stop.defer();
+      return camelizeKeys(json);
+    }).catch(err => console.log(err));
+  }
+}
+
diff --git a/app/packs/src/components/fetchers/ContainerFetcher.js b/app/packs/src/components/fetchers/ContainerFetcher.js
new file mode 100644
index 000000000..509e29574
--- /dev/null
+++ b/app/packs/src/components/fetchers/ContainerFetcher.js
@@ -0,0 +1,63 @@
+import 'whatwg-fetch';
+import _ from 'lodash';
+
+export default class ContainerFetcher {
+  // Remove container id of unseletced attachemnts(the attachemnts not in Inbox)
+  static deleteContainerLinkUnselected(params) {
+    const promise = fetch('/api/v1/containers/', {
+      credentials: 'same-origin',
+      method: 'PATCH',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        container_id: params.id,
+        attachments: params.attachments
+      })
+    }).then(response => response.json()).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static deleteContainer(container) {
+    const promise = fetch(`/api/v1/containers/${container.id}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then(response => response.json()).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static updateContainerContent(container) {
+    let content = _.cloneDeep(container.extended_metadata.content);
+    if (typeof content === 'string') {
+      content = JSON.parse(content);
+    }
+
+    const promise = fetch(`/api/v1/containers/${container.id}`, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        container_id: container.id,
+        content
+      })
+    }).then(response => response.json()).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/ConverterFetcher.js b/app/packs/src/components/fetchers/ConverterFetcher.js
new file mode 100644
index 000000000..a7097aa62
--- /dev/null
+++ b/app/packs/src/components/fetchers/ConverterFetcher.js
@@ -0,0 +1,107 @@
+import 'whatwg-fetch';
+
+const converter_app_url = '/api/v1/converter';
+
+export default class ConverterFetcher {
+  static deleteProfile(profile) {
+    const requestOptions = { method: 'DELETE' };
+    return fetch(`/api/v1/converter/profiles/${profile.id}`, requestOptions)
+      .then((response) => {
+        if (!response.ok) { throw response; }
+        return response;
+      });
+  }
+
+  static fetchProfiles() {
+    return fetch('/api/v1/converter/profiles', {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then((response) => {
+      if (response.status === 200) {
+        return response.json();
+      }
+      return null;
+    })
+      .then(json => json)
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+
+  static fetchOptions() {
+    return fetch('/api/v1/converter/options', {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then((response) => {
+      if (response.status === 200) {
+        return response.json();
+      }
+      return null;
+    })
+      .then(json => json)
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+
+  static fetchTables(file) {
+    const data = new FormData();
+    data.append('file[]', file);
+    return fetch('/api/v1/converter/tables', {
+      credentials: 'same-origin',
+      contentType: 'application/json',
+      method: 'POST',
+      body: data,
+    }).then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return null;
+    })
+      .then(json => json)
+      .catch((errorMessage) => { console.error(errorMessage); });
+  }
+
+
+  static createProfile(profile) {
+    const requestOptions = {
+      method: 'POST',
+      body: JSON.stringify(profile),
+      headers: { 'Content-Type': 'application/json' }
+    };
+
+    let ok;
+    return fetch('/api/v1/converter/profiles', requestOptions)
+      .then((response) => {
+        ok = response.ok;
+        return response.json();
+      })
+      .then((info) => {
+        if (ok) {
+          return info;
+        }
+        throw info;
+      });
+  }
+
+
+  static updateProfile(profile) {
+    const requestOptions = {
+      method: 'PUT',
+      body: JSON.stringify(profile),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    };
+
+    let ok;
+    return fetch(`/api/v1/converter/profiles/${profile.id}`, requestOptions)
+      .then((response) => {
+        // eslint-disable-next-line prefer-destructuring
+        ok = response.ok;
+        return response.json();
+      })
+      .then((info) => {
+        if (ok) {
+          return info;
+        }
+        throw new Error(info);
+      });
+  }
+}
diff --git a/app/packs/src/components/fetchers/DeviceFetcher.js b/app/packs/src/components/fetchers/DeviceFetcher.js
new file mode 100644
index 000000000..19b37167b
--- /dev/null
+++ b/app/packs/src/components/fetchers/DeviceFetcher.js
@@ -0,0 +1,92 @@
+import BaseFetcher from 'src/fetchers/BaseFetcher'
+import Device from 'src/models/Device'
+import DeviceAnalysis from 'src/models/DeviceAnalysis'
+import _ from 'lodash'
+
+export default class DeviceFetcher {
+  static fetchAll() {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: '/api/v1/devices/',
+      requestMethod: 'GET',
+      jsonTranformation: (json) => json.devices.map(device => new Device(device))
+    })
+  }
+
+  static fetchById(deviceId) {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: `/api/v1/devices/${deviceId}`,
+      requestMethod: 'GET',
+      jsonTranformation: (json) => new Device(json.device)
+    })
+  }
+
+  static create(device) {
+    return BaseFetcher.withBodyData({
+      apiEndpoint: '/api/v1/devices',
+      requestMethod: 'POST',
+      bodyData: device,
+      jsonTranformation: (json) => new Device(json.device)
+    })
+  }
+
+  static changeSelectedDevice(device) {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: `/api/v1/devices/${device.id}/selected`,
+      requestMethod: 'POST',
+      jsonTranformation: (json) => json
+    })
+  }
+
+  static update(device) {
+    return BaseFetcher.withBodyData({
+      apiEndpoint: `/api/v1/devices/${device.id}`,
+      requestMethod: 'PUT',
+      bodyData: device.serialize(),
+      jsonTranformation: (json) => new Device(json.device)
+    })
+  }
+
+  static delete(device) {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: `/api/v1/devices/${device.id}`,
+      requestMethod: 'DELETE',
+      jsonTranformation: (json) => { new Device(json.device) }
+    })
+  }
+
+  static fetchAnalysisById(analysisId) {
+    return BaseFetcher.withoutBodyData({
+      apiEndpoint: `/api/v1/devices_analysis/${analysisId}`,
+      requestMethod: 'GET',
+      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
+    })
+  }
+
+  static createAnalysis(analysis) {
+    return BaseFetcher.withBodyData({
+      apiEndpoint: `/api/v1/devices_analysis`,
+      requestMethod: 'POST',
+      bodyData: analysis.serialize(),
+      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
+    })
+  }
+
+  static updateAnalysis(analysis) {
+    const { deviceId, sampleId, analysisType, experiments } = analysis
+    return BaseFetcher.withBodyData({
+      apiEndpoint: `/api/v1/devices_analysis/${analysis.id}`,
+      requestMethod: 'PUT',
+      bodyData: analysis.serialize(),
+      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
+    })
+  }
+
+  static generateExperimentConfig(experiment) {
+    return BaseFetcher.withBodyData({
+      apiEndpoint: `/api/v1/icon_nmr/config`,
+      requestMethod: 'POST',
+      bodyData: experiment.buildConfig(),
+      jsonTranformation: (json) => json
+    })
+  }
+}
diff --git a/app/packs/src/components/fetchers/EditorFetcher.js b/app/packs/src/components/fetchers/EditorFetcher.js
new file mode 100644
index 000000000..e36729c64
--- /dev/null
+++ b/app/packs/src/components/fetchers/EditorFetcher.js
@@ -0,0 +1,29 @@
+import 'whatwg-fetch';
+
+export default class EditorFetcher {
+  static initial() {
+    const promise = fetch('/api/v1/editor/initial.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static startEditing(params) {
+    const promise = fetch('/api/v1/editor/start/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
new file mode 100644
index 000000000..f74ffe9ae
--- /dev/null
+++ b/app/packs/src/components/fetchers/EmbargoFetcher.js
@@ -0,0 +1,128 @@
+import 'whatwg-fetch';
+
+export default class EmbargoFetcher {
+  static fetchEmbargoElements(id) {
+    const api = `/api/v1/public/col_list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElement(cid, el) {
+    const api =
+      `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargo(id) {
+    const api = `/api/v1/public/embargo.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteEmbargo(id) {
+    const api = '/api/v1/repository/embargo/delete';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static moveEmbargo(id, newEmbargo, element) {
+    const api = '/api/v1/repository/embargo/move';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static refreshEmbargo(emb) {
+    const api = '/api/v1/repository/embargo/refresh';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id: emb.id, collection_id: emb.element_id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static assignEmbargo(embargoVal, element) {
+    const api = '/api/v1/repository/assign_embargo';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ new_embargo: embargoVal, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static releaseEmbargo(id) {
+    const api = '/api/v1/repository/embargo/release';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static generateEmbargoAccount(id) {
+    const api = '/api/v1/repository/embargo/account';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static repoFetchEmbargoElements(id) {
+    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static repoFetchEmbargoElement(type, id) {
+    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoCollections(isSubmit = false) {
+    const api = '/api/v1/repository/embargo_list.json';
+    return fetch(api, {
+      method: 'post',
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        is_submit: isSubmit
+      })
+    })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
new file mode 100644
index 000000000..8d07f4ae4
--- /dev/null
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -0,0 +1,65 @@
+import 'whatwg-fetch';
+
+export default class GenericBaseFetcher {
+  static exec(path, method) {
+    return fetch(`/api/v1/${path}`, { credentials: 'same-origin', method })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static execData(params, path, method = 'POST') {
+    console.log(`/api/v1/${path}`);
+    return fetch(`/api/v1/${path}`, {
+      credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deActivateKlass(params) {
+    return fetch('/api/v1/generic_elements/de_activate_klass', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deleteKlass(params) {
+    return fetch(`/api/v1/generic_elements/delete_klass/${params.id}`, {
+      credentials: 'same-origin', method: 'DELETE', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static deleteKlassRevision(params) {
+    return fetch('/api/v1/generic_elements/delete_klass_revision', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchKlassRevisions(id, klass) {
+    return fetch(`/api/v1/generic_elements/klass_revisions.json?id=${id}&klass=${klass}`, { credentials: 'same-origin' })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static fetchUnitsSystem() {
+    return fetch('/units_system/units_system.json', { credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' } })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static updateTemplate(params) {
+    return fetch('/api/v1/generic_elements/update_template', {
+      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/components/fetchers/GenericDSsFetcher.js b/app/packs/src/components/fetchers/GenericDSsFetcher.js
new file mode 100644
index 000000000..7ca7c646b
--- /dev/null
+++ b/app/packs/src/components/fetchers/GenericDSsFetcher.js
@@ -0,0 +1,19 @@
+import GenericBaseFetcher from './GenericBaseFetcher';
+
+export default class GenericDSsFetcher extends GenericBaseFetcher {
+  static exec(path, method) { return super.exec(`generic_dataset/${path}`, method); }
+  static execData(params, path) { return super.execData(params, `generic_dataset/${path}`); }
+
+  static fetchKlass() {
+    return this.exec('klasses.json', 'GET');
+  }
+
+  static listDatasetKlass(params = {}) {
+    const api = params.is_active === undefined ? 'list_dataset_klass.json' : `list_dataset_klass.json?is_active=${params.is_active}`;
+    return this.exec(api, 'GET');
+  }
+
+  static updateDatasetTemplate(params) {
+    return super.updateTemplate({ ...params, klass: 'DatasetKlass' }, 'update_dataset_template');
+  }
+}
diff --git a/app/packs/src/components/fetchers/GenericElsFetcher.js b/app/packs/src/components/fetchers/GenericElsFetcher.js
new file mode 100644
index 000000000..de5c2f216
--- /dev/null
+++ b/app/packs/src/components/fetchers/GenericElsFetcher.js
@@ -0,0 +1,145 @@
+import 'whatwg-fetch';
+import GenericEl from '../models/GenericEl';
+import AttachmentFetcher from './AttachmentFetcher';
+import BaseFetcher from './BaseFetcher';
+import GenericBaseFetcher from './GenericBaseFetcher';
+
+export default class GenericElsFetcher extends GenericBaseFetcher {
+  static exec(path, method) { return super.exec(`generic_elements/${path}`, method); }
+  static execData(params, path) { return super.execData(params, `generic_elements/${path}`); }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'generic_elements', GenericEl);
+  }
+
+  static fetchById(id) {
+    const promise = fetch(`/api/v1/generic_elements/${id}.json`, {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then((json) => {
+        const genericEl = new GenericEl(json.element);
+        genericEl.attachments = json.attachments;
+        if (json.error) {
+          genericEl.type = null; // `${id}:error:GenericEl ${id} is not accessible!`;
+        }
+        return genericEl;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static uploadGenericFiles(element, id, type, hasAttach = false, isElement = false) {
+    const segFiles = (element.segments || []).filter(seg => seg.files && seg.files.length > 0).length === 0;
+    if (!isElement && !hasAttach && segFiles === true) return Promise.resolve(true);
+    if (isElement && segFiles === true && (typeof element.files === 'undefined' || (element.files || []).length === 0)
+      && (typeof element.attachments === 'undefined' || (element.attachments || []).length === 0)) return Promise.resolve(true);
+    if (!isElement && hasAttach && segFiles === true && (element.attachments || []).length === 0) return Promise.resolve(true);
+
+    const data = new FormData();
+    data.append('att_id', id);
+    data.append('att_type', type);
+
+    const segMap = {};
+    if (isElement === true && element.files && element.files.length > 0) {
+      const elMap = {};
+      elMap[id] = { type: 'ElementProps', id, files: [] };
+      (element.files || []).forEach((file) => {
+        data.append('elfiles[]', file.file.file, file.uid);
+        elMap[id].files.push({ uid: file.uid, filename: file.file.name });
+      });
+      data.append('elInfo', JSON.stringify(elMap));
+    }
+    if (hasAttach === true && element.attachments && element.attachments.length > 0) {
+      const newFiles = (element.attachments || []).filter(a => a.is_new && !a.is_deleted);
+      const delFiles = (element.attachments || []).filter(a => !a.is_new && a.is_deleted);
+      (newFiles || []).forEach((file) => {
+        data.append('attfiles[]', file.file, file.name);
+      });
+      (delFiles || []).forEach((f) => {
+        data.append('delfiles[]', f.id);
+      });
+    }
+    (element.segments || []).forEach((segment) => {
+      segMap[segment.segment_klass_id] = { type: 'SegmentProps', id, files: [] };
+      (segment.files || []).forEach((file) => {
+        data.append('sefiles[]', file.file.file, file.uid);
+        segMap[segment.segment_klass_id].files.push({ uid: file.uid, filename: file.file.name });
+      });
+    });
+    data.append('seInfo', JSON.stringify(segMap));
+    return fetch('/api/v1/generic_elements/upload_generics_files', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then(response => response).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static updateOrCreate(genericEl, action = 'create') {
+    const files = AttachmentFetcher.getFileListfrom(genericEl.container);
+    const method = action === 'create' ? 'post' : 'put';
+    const api = action === 'create' ? '/api/v1/generic_elements/' : `/api/v1/generic_elements/${genericEl.id}`;
+    const promise = () => fetch(api, {
+      credentials: 'same-origin',
+      method,
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(genericEl.serialize())
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(genericEl, json.element.id, 'Element', true, true)
+        .then(() => this.fetchById(json.element.id)))
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    if (files.length > 0) {
+      let tasks = [];
+      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+    return promise();
+  }
+
+  static update(genericEl) {
+    return this.updateOrCreate(genericEl, 'update');
+  }
+
+  static create(genericEl) {
+    return this.updateOrCreate(genericEl, 'create');
+  }
+
+  static createElementKlass(params) {
+    return this.execData(params, 'create_element_klass');
+  }
+
+  static fetchElementRevisions(id) {
+    return this.exec(`element_revisions.json?id=${id}`, 'GET');
+  }
+
+  static fetchElementKlasses() {
+    return this.exec('klasses_all.json', 'GET');
+  }
+
+  static fetchElementKlass(klassName) {
+    return this.exec(`klass.json?name=${klassName}`, 'GET');
+  }
+
+  static fetchSegmentRevisions(id) {
+    return this.exec(`segment_revisions.json?id=${id}`, 'GET');
+  }
+
+  static deleteRevisions(params) {
+    return this.execData(params, 'delete_revision');
+  }
+
+  static updateElementKlass(params) {
+    return this.execData(params, 'update_element_klass');
+  }
+
+  static updateGElTemplates(params) {
+    return super.updateTemplate({ ...params, klass: 'ElementKlass' }, 'update_element_template');
+  }
+}
diff --git a/app/packs/src/components/fetchers/InboxFetcher.js b/app/packs/src/components/fetchers/InboxFetcher.js
new file mode 100644
index 000000000..ecb94f921
--- /dev/null
+++ b/app/packs/src/components/fetchers/InboxFetcher.js
@@ -0,0 +1,45 @@
+export default class InboxFetcher {
+  static fetchInbox(isCntOnly = false) {
+    const promise = fetch(`/api/v1/inbox?cnt_only=${isCntOnly}`, {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static fetchMatchingSamples(searchString) {
+    const promise = fetch(`/api/v1/inbox/samples?search_string=${searchString}`, {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static assignToAnalysis(attachmentId, sampleId) {
+    const promise = fetch(`/api/v1/inbox/samples/${attachmentId}?attachment_id=${sampleId}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/InstrumentsFetcher.js b/app/packs/src/components/fetchers/InstrumentsFetcher.js
new file mode 100644
index 000000000..275ae48d6
--- /dev/null
+++ b/app/packs/src/components/fetchers/InstrumentsFetcher.js
@@ -0,0 +1,12 @@
+import 'whatwg-fetch';
+
+export default class InstrumentsFetcher {
+  static fetchInstrumentsForCurrentUser(query) {
+    return fetch(
+      `/api/v1/instruments/${encodeURIComponent(query)}`,
+      { credentials: 'same-origin' }
+    ).then(response => response.json())
+      .then(json => json.instruments)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/LiteraturesFetcher.js b/app/packs/src/components/fetchers/LiteraturesFetcher.js
new file mode 100644
index 000000000..7ab0cdc05
--- /dev/null
+++ b/app/packs/src/components/fetchers/LiteraturesFetcher.js
@@ -0,0 +1,114 @@
+import 'whatwg-fetch';
+import Immutable from 'immutable';
+import Literature from '../models/Literature';
+
+export default class LiteraturesFetcher {
+  static fetchElementReferences(element, is_all = false) {
+    if (!element || element.isNew) {
+      return Promise.resolve(Immutable.List())
+    }
+    const { type, id } = element;
+    return fetch(`/api/v1/literatures?element_type=${type}&element_id=${id}&is_all=${is_all}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json.literatures)
+      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .then(literatures => literatures.map(literature => new Literature(literature)))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static postElementReference(params) {
+    const { element, literature } = params;
+    const { type, id } = element;
+    if (!element || element.isNew) {
+      return Promise.resolve(Immutable.List())
+    }
+    return fetch('/api/v1/literatures', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ element_type: type, element_id: id, ref: literature })
+    }).then(response => response.json())
+      .then((json) => { if (json.error) { throw json; } return json.literatures; })
+      .then(literatures => literatures.map(lits => new Literature(lits)))
+      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
+  }
+
+  static deleteElementReference(params) {
+    const { element, literature } = params;
+    const { type, id } = element;
+    const refId = literature.literal_id;
+    return fetch(`/api/v1/literatures?id=${refId}&element_type=${type}&element_id=${id}`, {
+      credentials: 'same-origin',
+      method: 'delete',
+      headers: {
+        Accept: 'application/json',
+      },
+    }).then(response => response.json())
+      .then((json) => { if (json.error) { throw json; } })
+      .catch((errorMessage) => { throw errorMessage; });
+  }
+
+  static updateReferenceType(params) {
+    return fetch('/api/v1/literatures', {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then((json) => { if (json.error) { throw json; } return json.literatures; })
+      .then(literatures => literatures.map(lits => new Literature(lits)))
+      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
+  }
+
+  static fetchDOIMetadata(doi) {
+    return fetch(`/api/v1/literatures/doi/metadata?doi=${encodeURIComponent(doi)}`, {
+      credentials: 'same-origin',
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReferencesByCollection(params) {
+    return fetch(`/api/v1/literatures/collection?id=${params.id}&is_sync_to_me=${params.is_sync_to_me || false}`, {
+      credentials: 'same-origin',
+    }).then(response => response.json())
+      .then((json) => {
+        const {
+          collectionRefs,
+          sampleRefs,
+          reactionRefs,
+          researchPlanRefs,
+        } = json;
+        return {
+          collectionRefs: Immutable.List(collectionRefs.map(lit => new Literature(lit))),
+          sampleRefs: Immutable.List(sampleRefs.map(lit => new Literature(lit))),
+          reactionRefs: Immutable.List(reactionRefs.map(lit => new Literature(lit))),
+          researchPlanRefs: Immutable.List(researchPlanRefs.map(lit => new Literature(lit))),
+        };
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static postReferencesByUIState(params, method = 'post') {
+    return fetch(`/api/v1/literatures/ui_state`, {
+      credentials: 'same-origin',
+      method,
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json.selectedRefs.map(lit => new Literature(lit)))
+      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/MessagesFetcher.js b/app/packs/src/components/fetchers/MessagesFetcher.js
new file mode 100644
index 000000000..a85206fce
--- /dev/null
+++ b/app/packs/src/components/fetchers/MessagesFetcher.js
@@ -0,0 +1,84 @@
+import 'whatwg-fetch';
+
+export default class MessagesFetcher {
+  static configuration() {
+    return fetch('/api/v1/messages/config.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchMessages(isAck) {
+    return fetch(`/api/v1/messages/list.json?is_ack=${isAck}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchSpectraMessages(isAck) {
+    return fetch(`/api/v1/messages/spectra.json?is_ack=${isAck}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchChannels(channelType) {
+    return fetch(`/api/v1/messages/channels.json?channel_type=${channelType}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchChannelWithUser() {
+    return fetch('/api/v1/messages/channels_user.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static channelIndividualUsers() {
+    return fetch('/api/v1/messages/channel_individual.json', {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static acknowledgedMessage(params) {
+    return fetch('/api/v1/messages/ack/', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static subscribeChannel(params) {
+    return fetch('/api/v1/messages/subscribe/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static createMessage(params) {
+    return fetch('/api/v1/messages/new/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/components/fetchers/MoleculesFetcher.js b/app/packs/src/components/fetchers/MoleculesFetcher.js
new file mode 100644
index 000000000..969d5457d
--- /dev/null
+++ b/app/packs/src/components/fetchers/MoleculesFetcher.js
@@ -0,0 +1,124 @@
+import 'whatwg-fetch';
+
+export default class MoleculesFetcher {
+  static fetchSciFinder(params) {
+    return fetch('/api/v1/molecules/sf', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static fetchByMolfile(molfile, svgfile, editor = 'ketcher', decoupled = false) {
+    return fetch('/api/v1/molecules', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        molfile, svg_file: svgfile, editor, decoupled
+      })
+    }).then(response => response.json()).then(json => json)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static fetchBySmi(smi, svgfile, molfile, editor = 'ketcher') {
+    return fetch('/api/v1/molecules/smiles', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        smiles: smi, svg_file: svgfile, layout: molfile, editor
+      })
+    }).then(response => response.json()).then(json => json)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static fetchCas(inchikey) {
+    return fetch(`/api/v1/molecules/cas?inchikey=${inchikey}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static updateNames(inchikey, newMolName = '') {
+    return fetch(`/api/v1/molecules/names?inchikey=${inchikey}` +
+      `&new_name=${escape(newMolName)}`, {
+      credentials: 'same-origin',
+    }).then(response => response.json()).then(json => json.molecules)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static computePropsFromSmiles(sampleId) {
+    return fetch('/api/v1/molecules/compute', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ sampleId })
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static getByInChiKey(inchikey) {
+    return fetch('/api/v1/molecules/inchikey', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ inchikey })
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static renewSVGFile(id, svgFile, isChemdraw = false) {
+    return fetch('/api/v1/molecules/svg', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, svg_file: svgFile, is_chemdraw: isChemdraw })
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static updateMolfileSVG(molecule) {
+    return fetch('/api/v1/molecules/editor', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        id: molecule.id, molfile: molecule.molfile, svg_file: molecule.molecule_svg_file
+      })
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static deleteMoleculeName(params) {
+    return fetch('/api/v1/molecules/delete_name', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static saveMoleculeName(params) {
+    return fetch('/api/v1/molecules/save_name', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .catch(errorMessage => console.log(errorMessage));
+  }
+
+  static decouple(molfile, svgfile, decoupled = false) {
+    return fetch('/api/v1/molecules/decouple', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ molfile, svg_name: svgfile, decoupled })
+    }).then(response => response.json()).then(json => json)
+      .catch(errorMessage => console.log(errorMessage));
+  }
+}
diff --git a/app/packs/src/components/fetchers/NmrSimFetcher.js b/app/packs/src/components/fetchers/NmrSimFetcher.js
new file mode 100644
index 000000000..ed4e956c6
--- /dev/null
+++ b/app/packs/src/components/fetchers/NmrSimFetcher.js
@@ -0,0 +1,16 @@
+import 'whatwg-fetch';
+
+export default class NmrSimFetcher {
+  static fetchNmrdbById(id) {
+    const promise = fetch(`/api/v1/simulation/nmrdb?molecule_id=${id}`, {
+      credentials: 'same-origin',
+      method: 'GET',
+    })
+      .then(response => response.json()).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/PermissionsFetcher.js b/app/packs/src/components/fetchers/PermissionsFetcher.js
new file mode 100644
index 000000000..8baf870df
--- /dev/null
+++ b/app/packs/src/components/fetchers/PermissionsFetcher.js
@@ -0,0 +1,17 @@
+import 'whatwg-fetch';
+
+export default class PermissionsFetcher {
+  static fetchPermissionStatus(params) {
+    return fetch('/api/v1/permissions/status/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/PredictionsFetcher.js b/app/packs/src/components/fetchers/PredictionsFetcher.js
new file mode 100644
index 000000000..1d5cd7267
--- /dev/null
+++ b/app/packs/src/components/fetchers/PredictionsFetcher.js
@@ -0,0 +1,37 @@
+import 'whatwg-fetch';
+
+import NotificationActions from '../actions/NotificationActions';
+
+export default class PredictionsFetcher {
+  static fetchInfer(smis, template) {
+    const path = template === 'predictProducts' ? 'products' : 'reactants' ;
+    const promise = fetch(`/api/v1/prediction/${path}`, {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(smis),
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      if (json.error) {
+        NotificationActions.add.defer({
+          message: json.error,
+          level: 'error'
+        });
+      } else {
+        NotificationActions.add.defer({
+          message: 'Prediction Success!',
+          level: 'success'
+        });
+      }
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/PrivateNoteFetcher.js b/app/packs/src/components/fetchers/PrivateNoteFetcher.js
new file mode 100644
index 000000000..e9b97c5ec
--- /dev/null
+++ b/app/packs/src/components/fetchers/PrivateNoteFetcher.js
@@ -0,0 +1,68 @@
+import 'whatwg-fetch';
+import PrivateNote from '../models/PrivateNote';
+
+// improved function for classifying strings - to fix research_plan being an invalid noteable type
+// takes into account any _ in strings and returns string: String_test => StringTest
+function classify(string) {
+  if (string.includes('_')) {
+    var substrings = string.split('_');
+    for (let i=0; i<substrings.length; i++) {
+      substrings[i] = substrings[i].charAt(0).toUpperCase() + substrings[i].slice(1);
+    }
+    string = substrings.join('')
+  }
+  else {
+    string = string.charAt(0).toUpperCase() + string.slice(1);
+  }
+  return string;
+}
+
+export default class PrivateNoteFetcher {
+  static fetchById(id) {
+    return fetch(`/api/v1/private_notes/${id}.json`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchByNoteableId(noteable_id, noteable_type) {
+    return fetch(`/api/v1/private_notes?noteable_id=${noteable_id}&noteable_type=${classify(noteable_type)}`, {
+      credentials: 'same-origin',
+    }).then(response => response.json())
+      .then(json => new PrivateNote(json.note))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static create(prms) {
+    const params = { ...prms };
+    if (prms.noteable_type) {
+      params.noteable_type = classify(prms.noteable_type);
+    }
+    return fetch('/api/v1/private_notes/create', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => new PrivateNote(json.note))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static update(privateNote) {
+    return fetch(`/api/v1/private_notes/${privateNote.id}`, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(privateNote.serialize())
+    }).then(response => response.json())
+      .then(json => new PrivateNote(json.note))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
new file mode 100644
index 000000000..a21464274
--- /dev/null
+++ b/app/packs/src/components/fetchers/PublicFetcher.js
@@ -0,0 +1,261 @@
+import 'whatwg-fetch';
+import _ from 'lodash';
+import Molecule from '../models/Molecule';
+import Reaction from '../models/Reaction';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+
+export default class PublicFetcher {
+  static fetchPublicMolecules(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const listType = params.listType || RepoNavListTypes.SAMPLE;
+    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&req_xvial=${listType === RepoNavListTypes.MOLECULE_ARCHIVE}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        molecules: json.molecules.map(m => new Molecule(m)),
+        page: parseInt(response.headers.get('X-Page')),
+        pages: parseInt(response.headers.get('X-Total-Pages')),
+        perPage: parseInt(response.headers.get('X-Per-Page')),
+        listType
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchPublicReactions(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const schemeOnly = params.schemeOnly || false;
+    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
+
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        reactions: json.reactions.map(m => new Reaction(m)),
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchAdvancedValues(advType, name) {
+    return fetch(`/api/v1/public/find_adv_values.json?name=${name}&adv_type=${advType}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicMolecules(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
+        page: json.publicMolecules.page,
+        totalElements: json.publicMolecules.totalElements,
+        perPage: json.publicMolecules.perPage,
+        listType: params.listType
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicReactions(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
+        page: json.publicReactions.page,
+        totalElements: json.publicReactions.totalElements,
+        perPage: json.publicReactions.perPage,
+        listType: params.listType
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublished() {
+    const api = '/api/v1/public/last_published.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublishedSample() {
+    const api = '/api/v1/public/last_published_sample.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDataset(id) {
+    const api = `/api/v1/public/dataset.json?id=${id}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
+    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
+    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReaction(id) {
+    const api = `/api/v1/public/reaction.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static queryPid(params) {
+    const api = `/api/v1/public/pid/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: params.id
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static queryInchikey(params) {
+    const api = `/api/v1/public/inchikey/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          inchikey: params.inchikey,
+          type: params.type,
+          version: params.version
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static selectPublicCollection() {
+    return fetch(
+      '/api/v1/public/collection.json',
+      { credentials: 'same-origin' }
+    ).then((response) => { return response.json(); })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static publishedStatics() {
+    const api = '/api/v1/public/published_statics';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then((response) => {
+      return response.json();
+    })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static affiliations(type) {
+    const api = `/api/v1/public/affiliations/${type}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static downloadZip(id) {
+    let fileName = 'dataset.zip';
+    return fetch(`/api/v1/public/download/dataset?id=${id}`, {
+      credentials: 'same-origin', method: 'GET',
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition');
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          fileName = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/components/fetchers/ReactionSvgFetcher.js b/app/packs/src/components/fetchers/ReactionSvgFetcher.js
new file mode 100644
index 000000000..3ec80ce77
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReactionSvgFetcher.js
@@ -0,0 +1,28 @@
+import 'whatwg-fetch';
+
+export default class ReactionSvgFetcher {
+
+  static fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, duration, conditions) {
+    const promise = fetch('/api/v1/reaction_svg', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        materials_svg_paths: materialsSvgPaths,
+        temperature,
+        duration,
+        solvents,
+        conditions: (typeof conditions === 'string') ? conditions : '',
+      })
+    }).then((response) => {
+      return response.status == 201 ? response.json() : {}
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/ReactionsFetcher.js b/app/packs/src/components/fetchers/ReactionsFetcher.js
new file mode 100644
index 000000000..b1d2e8be6
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReactionsFetcher.js
@@ -0,0 +1,102 @@
+import 'whatwg-fetch';
+import { indexOf, split } from 'lodash';
+import Immutable from 'immutable';
+
+import BaseFetcher from './BaseFetcher';
+import Reaction from '../models/Reaction';
+import UIStore from '../stores/UIStore';
+import AttachmentFetcher from './AttachmentFetcher';
+import Literature from '../models/Literature';
+import GenericElsFetcher from './GenericElsFetcher';
+import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
+
+// TODO: Extract common base functionality into BaseFetcher
+export default class ReactionsFetcher {
+  static fetchById(id) {
+    return fetch(`/api/v1/reactions/${id}.json`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then((json) => {
+        if (json.hasOwnProperty("reaction")) {
+          const reaction = new Reaction(json.reaction);
+          if (json.literatures && json.literatures.length > 0) {
+            const tliteratures = json.literatures.map(literature => new Literature(literature));
+            const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
+            reaction.literatures = lits;
+          }
+          reaction.publication = json.publication || {};
+          return new Reaction(defaultAnalysisPublish(reaction));
+        }
+        const rReaction = new Reaction(json.reaction);
+        rReaction.publication = json.publication || {};
+        if (json.error) {
+          rReaction.id = `${id}:error:Reaction ${id} is not accessible!`;
+        }
+        return new Reaction(defaultAnalysisPublish(rReaction));
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'reactions', Reaction);
+  }
+
+  static create(r, method = 'post') {
+    const reaction = defaultAnalysisPublish(r);
+    const reactionFiles = AttachmentFetcher.getFileListfrom(reaction.container);
+    let productsFiles = [];
+    reaction.products.forEach((prod) => {
+      const files = AttachmentFetcher.getFileListfrom(prod.container);
+      productsFiles = [...productsFiles, ...files];
+    });
+    const allFiles = reactionFiles.concat(productsFiles);
+
+    const promise = () => fetch(`/api/v1/reactions/${method === 'post' ? '' : reaction.id}`, {
+      credentials: 'same-origin',
+      method,
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(reaction.serialize())
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(reaction, json.reaction.id, 'Reaction')
+        .then(() => this.fetchById(json.reaction.id))).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    if (allFiles.length > 0) {
+      let tasks = [];
+      allFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+    return promise();
+  }
+
+  static update(reaction) {
+    return ReactionsFetcher.create(reaction, 'put');
+  }
+
+  static importFromChemScanner({ reactions, molecules }) {
+    const promise = fetch('/api/v1/reactions/import_chemscanner', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactions,
+        molecules,
+        collection_id: UIStore.getState().currentCollection.id,
+      })
+    }).then(response => response.json()).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/ReportTemplateFetcher.js b/app/packs/src/components/fetchers/ReportTemplateFetcher.js
new file mode 100644
index 000000000..30a9fc346
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReportTemplateFetcher.js
@@ -0,0 +1,119 @@
+import 'whatwg-fetch';
+
+import NotificationActions from '../actions/NotificationActions';
+
+export default class ReportTemplateFetcher {
+
+  static fetchTemplates() {
+    let promise = fetch('/api/v1/report_templates/', {
+      credentials: 'same-origin',
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static fetchTemplateById(id) {
+    let promise = fetch(`/api/v1/report_templates/${id}`, {
+      credentials: 'same-origin',
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static createTemplate(params) {
+    const data = new FormData()
+    data.append('name', params.name);
+    data.append('report_type', params.report_type);
+    if (params.attachment) {
+      data.append('file', params.attachment);
+    }
+    return () => fetch('/api/v1/report_templates', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      if (response.ok == false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status == 413) {
+          msg += 'File size limit exceeded.'
+        } else {
+          msg += response.statusText;
+        }
+        NotificationActions.add({
+          message: msg,
+          level: 'error'
+        });
+      }
+    })
+  }
+
+  static updateTemplate(params) {
+    const data = new FormData()
+    data.append('id', params.id);
+    data.append('name', params.name);
+    data.append('report_type', params.report_type);
+    data.append('attachment_id', params.attachment_id);
+    if (params.attachment) {
+      data.append('file', params.attachment);
+    }
+    return () => fetch(`/api/v1/report_templates/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'put',
+      body: data
+    }).then((response) => {
+      if (response.ok == false) {
+        let msg = 'Files uploading failed: ';
+        if (response.status == 413) {
+          msg += 'File size limit exceeded.'
+        } else {
+          msg += response.statusText;
+        }
+        NotificationActions.add({
+          message: msg,
+          level: 'error'
+        });
+      }
+    })
+  }
+
+  static deleteAttachment(params) {
+    let promise = fetch(`/api/v1/report_templates/${params.id}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return new Attachment(json.attachment);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/ReportsFetcher.js b/app/packs/src/components/fetchers/ReportsFetcher.js
new file mode 100644
index 000000000..98c61e20f
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReportsFetcher.js
@@ -0,0 +1,142 @@
+import 'whatwg-fetch';
+import _ from 'lodash';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+
+export default class ReportsFetcher {
+  static getDois(elements) {
+    let promise = fetch('/api/v1/reports/dois/', {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ elements }),
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+      return promise;
+  }
+  static fetchArchives() {
+    let promise = fetch('/api/v1/archives/all', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static deleteArchive(archive_id) {
+    let promise = fetch(`/api/v1/archives/${archive_id}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+    })
+      .then((response) => {
+        if (response.status == 200) { return archive_id }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static fetchDownloadable(ids) {
+    let promise = fetch('/api/v1/archives/downloadable/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ ids: ids }),
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static create(report) {
+    let promise = fetch('/api/v1/reports', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(report),
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        NotificationActions.add({
+          title: json.error,
+          message: 'Please reload the page to try it again!',
+          level: 'error',
+          dismissible: 'button',
+          position: 'tr',
+        });
+
+        return null;
+      }
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static createDownloadFile(params, filename, route = 'export_samples_from_selections') {
+    let file_name = filename
+    let promise = fetch(`/api/v1/reports/${route}`, {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/vnd.ms-excel, chemical/x-mdl-sdfile, text/csv, application/zip, application/octet-stream',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params),
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition')
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        let matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          file_name = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob()
+    }).then((blob) => {
+      const a = document.createElement("a");
+      a.style = "display: none";
+      document.body.appendChild(a);
+      let url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = file_name
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+}
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
new file mode 100644
index 000000000..ea7a1557f
--- /dev/null
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -0,0 +1,386 @@
+import 'whatwg-fetch';
+import Sample from '../models/Sample';
+import Reaction from '../models/Reaction';
+import NotificationActions from '../actions/NotificationActions';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray()
+    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    .map(x => x.id)
+);
+
+export default class RepositoryFetcher {
+
+  static reviewPublish(element) {
+    const { id, type } = element;
+    return fetch('/api/v1/repository/reviewing/submit', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .then((json) => {
+        if (typeof json.reaction !== 'undefined') {
+          json.reaction.can_publish = false;
+          json.reaction.can_update = false;
+          return new Reaction(json.reaction);
+        } else if (type === 'sample') {
+          json.sample.can_publish = false;
+          json.sample.can_update = false;
+          return new Sample(json.sample);
+        }
+        return null;
+    })
+    .catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishSample(params, option = null) {
+    const { sample, coauthors, reviewers, refs, embargo, license, addMe } = params;
+    const analysesIds = AnalysisIdstoPublish(sample);
+    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        sampleId: sample.id,
+        analysesIds,
+        coauthors,
+        reviewers,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish sample fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_sample_error'};
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.sample.can_publish = true;
+        json.sample.can_update = true;
+      }
+      return new Sample(json.sample);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishReactionScheme(params) {
+    const {
+      reaction, coauthors, reviewers, embargo, license, addMe, schemeDesc
+    } = params;
+    return fetch('/api/v1/repository/publishReactionScheme', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        temperature: reaction.temperature,
+        duration: reaction.durationDisplay,
+        products: reaction.products,
+        schemeDesc,
+        coauthors,
+        reviewers,
+        embargo,
+        license,
+        addMe
+      })
+    })
+      .then(response => (response.json()))
+      .then((json) => {
+        if (json.error) {
+          const notification = {
+            title: 'Publish reaction scheme fail',
+            message: `Error: ${json.error}`,
+            level: 'error',
+            dismissible: 'button',
+            autoDismiss: 6,
+            position: 'tr',
+            uid: 'publish_reaction_error'
+          };
+          NotificationActions.add(notification);
+          return null;
+        }
+        return new Reaction(json.reaction);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static publishReaction(params, option = null) {
+    const { reaction, coauthors, reviewers, refs, embargo, license, isFullyPublish, addMe } = params;
+    if (!isFullyPublish) return this.publishReactionScheme(params);
+    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(reaction)
+    )
+    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        analysesIds,
+        coauthors,
+        reviewers,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish reaction fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_reaction_error'
+        };
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.reaction.can_publish = true;
+        json.reaction.can_update = true;
+      }
+      return new Reaction(json.reaction);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+
+
+  static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
+    const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
+    const paramSearchValue = (searchValue && searchValue !== '') ? `&search_value=${searchValue}` : '';
+    const api = `/api/v1/repository/list.json?type=${type}&state=${state}${paramSearchType}${paramSearchValue}&page=${page}&per_page=${perPage}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        elements: json.elements,
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
+        selectType: type,
+        selectState: state,
+        searchType,
+        searchValue
+      })))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static fetchReaction(id, isPublic) {
+    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchSample(id, isPublic) {
+    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static saveComments(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comments', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static repoReviewPublish(id, type, comment, action, checklist = {}, reviewComments) {
+    let api = '';
+    if (action === 'Comments') {
+      api = '/api/v1/repository/reviewing/comments';
+    } else if (action === 'Accept') {
+      api = '/api/v1/repository/reviewing/accepted';
+    } else if (action === 'Approve') {
+      api = '/api/v1/repository/reviewing/approved';
+    } else if (action === 'Review') {
+      api = '/api/v1/repository/reviewing/reviewed';
+    } else if (action === 'Submit') {
+      api = '/api/v1/repository/reviewing/submit';
+    } else if (action === 'Decline') {
+      api = '/api/v1/repository/reviewing/declined';
+    } else {
+      // return;
+    }
+
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id, type, comment, checklist, reviewComments
+      })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static fetchReviewSearchOptions(searchType, elementType, state) {
+    return fetch(`/api/v1/repository/review_search_options.json?type=${searchType}&element_type=${elementType}&state=${state}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static previewMetadata(id, type) {
+    return fetch('/api/v1/repository/metadata/preview', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static userComment(id, type, pageId, pageType, comment) {
+    return fetch('/api/v1/repository/comment/user_comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, pageId, pageType, comment })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static reviewerComment(id, type, comment) {
+    return fetch('/api/v1/repository/comment/reviewer', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comment })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static updateComment(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static saveRepoAuthors(params = {}) {
+    return fetch('/api/v1/repository/save_repo_authors', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static zipPreviewMetadata(id, type) {
+    const currentTime = Math.floor(Date.now() / 1000);
+    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
+    return fetch('/api/v1/repository/metadata/preview_zip', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then((response) => {
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static compound(id, data, action = 'request') {
+    const api = `/api/v1/repository/compound/${action}`;
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, data })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+}
diff --git a/app/packs/src/components/fetchers/ResearchPlansFetcher.js b/app/packs/src/components/fetchers/ResearchPlansFetcher.js
new file mode 100644
index 000000000..e3c2f7bea
--- /dev/null
+++ b/app/packs/src/components/fetchers/ResearchPlansFetcher.js
@@ -0,0 +1,224 @@
+import 'whatwg-fetch';
+import _ from 'lodash';
+import ResearchPlan from '../models/ResearchPlan';
+import AttachmentFetcher from './AttachmentFetcher';
+import BaseFetcher from './BaseFetcher';
+import GenericElsFetcher from './GenericElsFetcher';
+
+import { getFileName, downloadBlob } from '../utils/FetcherHelper'
+
+export default class ResearchPlansFetcher {
+  static fetchById(id) {
+    let promise = fetch('/api/v1/research_plans/' + id + '.json', {
+        credentials: 'same-origin'
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        const rResearchPlan = new ResearchPlan(json.research_plan);
+        rResearchPlan.attachments = json.attachments;
+        if (json.error) {
+          rResearchPlan.id = `${id}:error:ResearchPlan ${id} is not accessible!`;
+        }
+        return rResearchPlan;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+
+    return promise;
+  }
+
+  static fetchByCollectionId(id, queryParams={}, isSync = false) {
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'research_plans', ResearchPlan);
+  }
+
+  static create(researchPlan) {
+    const promise = fetch('/api/v1/research_plans/', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(researchPlan.serialize())
+    }).then(response => response.json()).then(json => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
+      .then(() => this.fetchById(json.research_plan.id))).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static update(researchPlan) {
+    const containerFiles = AttachmentFetcher.getFileListfrom(researchPlan.container);
+    const promise = () => fetch(`/api/v1/research_plans/${researchPlan.id}`, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(researchPlan.serialize())
+    }).then(response => response.json()).then(json => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
+      .then(() => this.fetchById(json.research_plan.id))).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    
+    if (containerFiles.length > 0) {
+      let tasks = [];
+      containerFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+    return promise();
+  }
+
+  static updateSVGFile(svg_file, isChemdraw = false) {
+    let promise = ()=> fetch('/api/v1/research_plans/svg', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ svg_file: svg_file, is_chemdraw: isChemdraw })
+    }).then((response) => {
+      return response.json()
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise();
+  }
+
+  static updateImageFile(image_file, replace) {
+    var data = new FormData();
+    data.append('file', image_file);
+
+    if (replace) {
+      data.append('replace', replace);
+    }
+
+    let promise = ()=> fetch('/api/v1/research_plans/image', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      return response.json()
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise();
+  }
+
+  static export(researchPlan, exportFormat) {
+    let file_name
+    const promise = fetch(`/api/v1/research_plans/${researchPlan.id}/export/?export_format=${exportFormat}`, {
+      credentials: 'same-origin',
+      method: 'get',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.ok) {
+        file_name = getFileName(response)
+        return response.blob()
+      } else {
+        console.log(response);
+      }
+    }).then((blob) => {
+      downloadBlob(file_name, blob)
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static exportTable(researchPlan, field) {
+    let file_name
+    const promise = fetch(`/api/v1/research_plans/${researchPlan.id}/export_table/${field.id}/`, {
+      credentials: 'same-origin',
+      method: 'get',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.ok) {
+        file_name = getFileName(response)
+        return response.blob()
+      } else {
+        throw Error(response.statusText);
+      }
+    }).then((blob) => {
+      downloadBlob(file_name, blob)
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static fetchTableSchemas() {
+    return fetch('/api/v1/research_plans/table_schemas/', {
+      credentials: 'same-origin',
+      method: 'get',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw Error(response.statusText);
+      }
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static createTableSchema(name, value) {
+    return fetch('/api/v1/research_plans/table_schemas/', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ name, value })
+    }).then(response => {
+      return response.json()
+    }).catch((errorMessage) => {
+      console.log(errorMessage)
+    })
+  }
+
+  static deleteTableSchema(id) {
+    return fetch('/api/v1/research_plans/table_schemas/' + id, {
+      credentials: 'same-origin',
+      method: 'delete',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    }).then(response => {
+      return response.json()
+    }).catch((errorMessage) => {
+      console.log(errorMessage)
+    })
+  }
+
+  static postResearchPlanMetadata(params) {
+    return fetch('/api/v1/research_plan_metadata', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/ResidueFetcher.js b/app/packs/src/components/fetchers/ResidueFetcher.js
new file mode 100644
index 000000000..7ee41de73
--- /dev/null
+++ b/app/packs/src/components/fetchers/ResidueFetcher.js
@@ -0,0 +1,26 @@
+import 'whatwg-fetch';
+
+export default class ResidueFetcher {
+  static fetchByMolfile(molfile, svg_file) {
+    let promise = fetch('/api/v1/residues', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        molfile: molfile,
+        svg_file: svg_file
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/fetchers/ReviewFetcher.js b/app/packs/src/components/fetchers/ReviewFetcher.js
new file mode 100644
index 000000000..8fcb2a7d3
--- /dev/null
+++ b/app/packs/src/components/fetchers/ReviewFetcher.js
@@ -0,0 +1,4 @@
+import 'whatwg-fetch';
+
+export default class ReviewFetcher {
+};
\ No newline at end of file
diff --git a/app/packs/src/components/fetchers/SamplesFetcher.js b/app/packs/src/components/fetchers/SamplesFetcher.js
new file mode 100644
index 000000000..84232203e
--- /dev/null
+++ b/app/packs/src/components/fetchers/SamplesFetcher.js
@@ -0,0 +1,215 @@
+import 'whatwg-fetch';
+
+import Sample from '../models/Sample';
+import UIStore from '../stores/UIStore';
+import NotificationActions from '../actions/NotificationActions';
+import AttachmentFetcher from './AttachmentFetcher';
+import BaseFetcher from './BaseFetcher';
+import GenericElsFetcher from './GenericElsFetcher';
+
+import Container from '../models/Container';
+import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
+
+export default class SamplesFetcher {
+  static fetchSamplesByUIStateAndLimit(params) {
+    const limit = params.limit ? limit : null;
+
+    return fetch('/api/v1/samples/ui_state/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: {
+          all: params.sample.all,
+          included_ids: params.sample.included_ids,
+          excluded_ids: params.sample.excluded_ids,
+          collection_id: params.sample.collection_id
+        },
+        limit: params.limit
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json.samples.map((s) => new Sample(s));
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchById(id) {
+    let promise = fetch('/api/v1/samples/' + id + '.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        const rSample = new Sample(json.sample);
+        if (json.error) {
+          rSample.id = `${id}:error:Sample ${id} is not accessible!`;
+        }
+        return new Sample(defaultAnalysisPublish(rSample));
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false, moleculeSort = false) {
+    queryParams.moleculeSort = moleculeSort;
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'samples', Sample);
+  }
+
+  static update(s) {
+    const sample = defaultAnalysisPublish(s);
+    let files = AttachmentFetcher.getFileListfrom(sample.container)
+    let promise = ()=> fetch('/api/v1/samples/' + sample.id, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(sample.serialize())
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    if (files.length > 0) {
+      let tasks = [];
+      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+
+    return promise();
+  }
+
+  static create(s) {
+    const sample = defaultAnalysisPublish(s);
+    let files = AttachmentFetcher.getFileListfrom(sample.container)
+    let promise = ()=> fetch('/api/v1/samples', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(sample.serialize())
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    if (files.length > 0) {
+      let tasks = [];
+      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file)));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+
+    return promise();
+  }
+
+  static splitAsSubsamples(params) {
+    let promise = fetch('/api/v1/samples/subsamples/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: {
+          sample: {
+            all: params.sample.checkedAll,
+            included_ids: params.sample.checkedIds,
+            excluded_ids: params.sample.uncheckedIds
+          },
+          currentCollectionId: params.currentCollection.id
+        }
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static importSamplesFromFile(params) {
+
+    var data = new FormData();
+    data.append("file", params.file);
+    data.append("currentCollectionId", params.currentCollectionId);
+
+    let promise = fetch('/api/v1/samples/import/', {
+      credentials: 'same-origin',
+      method: 'post',
+      body: data
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static importSamplesFromFileConfirm(params) {
+    let promise = fetch('/api/v1/samples/confirm_import/', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        currentCollectionId: params.currentCollectionId,
+        rows: params.rows,
+        mapped_keys: params.mapped_keys,
+      })
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      for (let i = 0; i < json.error_messages.length; i++) {
+        NotificationActions.add({
+          message: json.error_messages[i],
+          level: 'error',
+          autoDismiss: 10
+        });
+      };
+
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static updateXvial(id, type, data) {
+    return fetch('/api/v1/samples/xvial/update', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, data })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+}
diff --git a/app/packs/src/components/fetchers/ScreensFetcher.js b/app/packs/src/components/fetchers/ScreensFetcher.js
new file mode 100644
index 000000000..44a12ba75
--- /dev/null
+++ b/app/packs/src/components/fetchers/ScreensFetcher.js
@@ -0,0 +1,83 @@
+import 'whatwg-fetch';
+import Screen from '../models/Screen';
+import UIStore from '../stores/UIStore'
+import AttachmentFetcher from './AttachmentFetcher'
+import BaseFetcher from './BaseFetcher';
+
+export default class ScreensFetcher {
+  static fetchById(id) {
+    let promise = fetch('/api/v1/screens/' + id + '.json', {
+      credentials: 'same-origin'
+    })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        const rScreen = new Screen(json.screen);
+        if (json.error) {
+          rScreen.id = `${id}:error:Screen ${id} is not accessible!`;
+        }
+        return rScreen;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'screens', Screen);
+  }
+
+  static update(screen) {
+    let files = AttachmentFetcher.getFileListfrom(screen.container)
+
+    let promise = () => fetch('/api/v1/screens/' + screen.id, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(screen.serialize())
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return new Screen(json.screen);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    if(files.length > 0 ){
+        return AttachmentFetcher.uploadFiles(files)().then(()=> promise());
+    }else{
+      return promise()
+    }
+
+  }
+
+  static create(screen) {
+    let files = AttachmentFetcher.getFileListfrom(screen.container)
+
+    let promise = () => fetch('/api/v1/screens/', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(screen.serialize())
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return new Screen(json.screen);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    if(files.length > 0){
+      return AttachmentFetcher.uploadFiles(files)().then(()=> promise());
+    }else{
+      return promise()
+    }
+
+  }
+}
diff --git a/app/packs/src/components/fetchers/SearchFetcher.js b/app/packs/src/components/fetchers/SearchFetcher.js
new file mode 100644
index 000000000..cc520dd89
--- /dev/null
+++ b/app/packs/src/components/fetchers/SearchFetcher.js
@@ -0,0 +1,68 @@
+import 'whatwg-fetch';
+import Sample from '../models/Sample';
+import Reaction from '../models/Reaction';
+import Wellplate from '../models/Wellplate';
+import Screen from '../models/Screen';
+import GenericEl from '../models/GenericEl';
+import ResearchPlan from '../models/ResearchPlan';
+
+export default class SearchFetcher {
+  static fetchBasedOnSearchSelectionAndCollection(params) {
+    const { selection, collectionId, page, isSync, moleculeSort, isPublic } = params;
+    return fetch(`/api/v1/search/${selection.elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId,
+        page: page || 1,
+        per_page: selection.page_size,
+        is_sync: isSync || false,
+        molecule_sort: moleculeSort || false,
+        is_public: isPublic || false,
+      })
+    }).then(response => response.json())
+      .then((json) => {
+        const { samples, reactions, wellplates, screens, research_plans } = json;
+        const result = { ...json };
+
+        Object.keys(json).forEach((key) => {
+          switch (key) {
+            case 'samples':
+              if (samples && samples.totalElements && samples.totalElements > 0) {
+                result.samples.elements = samples.elements.map(s => (new Sample(s)));
+              } else { result.samples = { elements: [], totalElements: 0, ids: [] }; }
+              break;
+            case 'reactions':
+              if (reactions && reactions.totalElements && reactions.totalElements > 0) {
+                result.reactions.elements = reactions.elements.map(r => (new Reaction(r)));
+              } else { result.reactions = { elements: [], totalElements: 0, ids: [] }; }
+              break;
+            case 'wellplates':
+              if (wellplates && wellplates.totalElements && wellplates.totalElements > 0) {
+                result.wellplates.elements = wellplates.elements.map(s => (new Wellplate(s)));
+              } else { result.wellplates = { elements: [], totalElements: 0, ids: [] }; }
+              break;
+            case 'screens':
+              if (screens && screens.totalElements && screens.totalElements > 0) {
+                result.screens.elements = screens.elements.map(s => (new Screen(s)));
+              } else { result.screens = { elements: [], totalElements: 0, ids: [] }; }
+              break;
+            case 'research_plans':
+              if (research_plans && research_plans.totalElements && research_plans.totalElements > 0) {
+                result.research_plans.elements = research_plans.elements.map(s => (new ResearchPlan(s)));
+              } else { result.research_plans = { elements: [], totalElements: 0, ids: [] }; }
+              break;
+              default:
+              result[`${key}`].elements = json[`${key}`].elements.map(s => (new GenericEl(s)));
+          }
+        });
+
+        return result;
+      }).catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/SegmentsFetcher.js b/app/packs/src/components/fetchers/SegmentsFetcher.js
new file mode 100644
index 000000000..b0f8158d3
--- /dev/null
+++ b/app/packs/src/components/fetchers/SegmentsFetcher.js
@@ -0,0 +1,15 @@
+export default class SegmentsFetcher {
+  static fetchKlass(elementName = null) {
+    let api = '';
+    if (elementName == null) {
+      api = '/api/v1/segments/klasses.json';
+    } else {
+      api = `/api/v1/segments/klasses.json?element=${elementName}`;
+    }
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/components/fetchers/SuggestionsFetcher.js b/app/packs/src/components/fetchers/SuggestionsFetcher.js
new file mode 100644
index 000000000..3c735a81a
--- /dev/null
+++ b/app/packs/src/components/fetchers/SuggestionsFetcher.js
@@ -0,0 +1,12 @@
+import 'whatwg-fetch';
+
+export default class SuggestionsFetcher {
+  static fetchSuggestionsForCurrentUser(elementType, query, collectId, isSync = false) {
+    return fetch(
+      `/api/v1/suggestions/${elementType}?query=${encodeURIComponent(query)}&collection_id=${collectId}&is_sync=${isSync}`,
+      { credentials: 'same-origin' }
+    ).then(response => response.json())
+      .then(json => json.suggestions)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/TextTemplatesFetcher.js b/app/packs/src/components/fetchers/TextTemplatesFetcher.js
new file mode 100644
index 000000000..f84ee480a
--- /dev/null
+++ b/app/packs/src/components/fetchers/TextTemplatesFetcher.js
@@ -0,0 +1,81 @@
+import 'whatwg-fetch';
+
+import { camelize, decamelize } from 'humps';
+
+const shallowCamelizeKeys = (obj) => {
+  return Object.keys(obj).reduce((newObj, key) => {
+    // eslint-disable-next-line no-param-reassign
+    newObj[camelize(key)] = obj[key];
+    return newObj;
+  }, {});
+};
+
+export default class TextTemplatesFetcher {
+  static fetchTextTemplates(elementName) {
+    return fetch(`/api/v1/text_templates/by_type?type=${decamelize(elementName)}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => shallowCamelizeKeys(json))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchPredefinedTemplateNames() {
+    return fetch('/api/v1/text_templates/predefinedNames', {
+      credentials: 'same-origin',
+      method: 'GET'
+    }).then(response => response.json())
+      .then(json => json.text_templates)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchPredefinedTemplateByNames(names) {
+    const params = names.map(n => `name[]=${encodeURIComponent(n)}`).join('&');
+
+    return fetch(`/api/v1/text_templates/by_name?${params}`, {
+      credentials: 'same-origin',
+      method: 'GET'
+    }).then(response => response.json())
+      .then(json => json.text_templates)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updateTextTemplates(elementName, template) {
+    return fetch('/api/v1/text_templates/update', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ data: template, type: decamelize(elementName) })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static updatePredefinedTemplates(template) {
+    const method = template.id ? 'PUT' : 'POST';
+
+    return fetch('/api/v1/text_templates/predefined_text_template', {
+      credentials: 'same-origin',
+      method,
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(template)
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deletePredefinedTemplateByName(name) {
+    return fetch(`/api/v1/text_templates/by_name?name=${name}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/UIFetcher.js b/app/packs/src/components/fetchers/UIFetcher.js
new file mode 100644
index 000000000..afa2cb177
--- /dev/null
+++ b/app/packs/src/components/fetchers/UIFetcher.js
@@ -0,0 +1,69 @@
+import 'whatwg-fetch';
+import { camelizeKeys } from 'humps';
+
+import Sample from 'src/models/Sample';
+import Reaction from 'src/models/Reaction';
+
+export default class UIFetcher {
+  static initialize() {
+    const promise = fetch('/api/v1/ui/initialize', {
+      credentials: 'same-origin',
+    }).then(response => response.json())
+      .then(json => camelizeKeys(json))
+      .catch(err => console.log(err)); // eslint-disable-line
+
+    return promise;
+  }
+
+  static fetchByUIState(params, method = 'POST') {
+    return fetch('/api/v1/ui_state/', {
+      credentials: 'same-origin',
+      method,
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then((json) => {
+        if (method === 'DELETE') { return json; }
+        const samples = json.samples.map(s => new Sample(s));
+        const reactions = json.reactions.map(r => new Reaction(r));
+        return { samples, reactions };
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static loadReport(params, loadType) {
+    const tParams = Object.assign({}, params, { loadType });
+
+    return fetch('/api/v1/ui_state/load_report', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(tParams),
+    }).then(response => response.json())
+      .then((json) => {
+        const samples = json.samples.map(s => new Sample(s));
+        const reactions = json.reactions.map(r => new Reaction(r));
+        return { samples, reactions };
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchNMRDisplayerHost() {
+    return fetch('/api/v1/chemspectra/nmrium_wrapper/host_name', {
+      credentials: 'same-origin',
+      method: 'GET',
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+}
diff --git a/app/packs/src/components/fetchers/UsersFetcher.js b/app/packs/src/components/fetchers/UsersFetcher.js
new file mode 100644
index 000000000..da41f3afa
--- /dev/null
+++ b/app/packs/src/components/fetchers/UsersFetcher.js
@@ -0,0 +1,118 @@
+import 'whatwg-fetch';
+
+export default class CollaboratorFetcher {
+
+  static fetchMyCollaborations() {
+    return fetch('/api/v1/collaborators/list', {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static AddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/add', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static createAddMyCollaboration(params = {}) {
+    return fetch('/api/v1/collaborators/create', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+
+  static addCollaboratorAff(params = {}) {
+    return fetch('/api/v1/collaborators/add_aff', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static deleteCollaboration(params) {
+    return fetch('/api/v1/collaborators/delete', {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static deleteCollaboratorAff(params) {
+    return fetch('/api/v1/collaborators/delete_aff', {
+      credentials: 'same-origin',
+      method: 'PUT',
+    });
+  }
+
+  static refreshOrcidAff(params) {
+    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+
+  static loadOrcidByUserId(params) {
+    return fetch('/api/v1/collaborators/load_orcid', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchUsersByNameFirst(name, first, email) {
+    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}&email=${email}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchandAddCollaboratorByOrcid(orcid) {
+    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/packs/src/components/fetchers/WellplatesFetcher.js b/app/packs/src/components/fetchers/WellplatesFetcher.js
new file mode 100644
index 000000000..fded0338d
--- /dev/null
+++ b/app/packs/src/components/fetchers/WellplatesFetcher.js
@@ -0,0 +1,189 @@
+import 'whatwg-fetch';
+import Wellplate from '../models/Wellplate';
+import UIStore from '../stores/UIStore';
+import AttachmentFetcher from './AttachmentFetcher';
+import BaseFetcher from './BaseFetcher';
+import GenericElsFetcher from './GenericElsFetcher';
+
+export default class WellplatesFetcher {
+  static fetchById(id) {
+    let promise = fetch('/api/v1/wellplates/' + id + '.json', {
+        credentials: 'same-origin'
+      })
+      .then((response) => {
+        return response.json();
+      }).then((json) => {
+        if (json.error) {
+          return new Wellplate({ id: `${id}:error:Wellplate ${id} is not accessible!`, wells: [], is_new: true });
+        }
+        return new Wellplate(json.wellplate);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
+    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'wellplates', Wellplate);
+  }
+
+  static bulkCreateWellplates(params) {
+    let promise = fetch('/api/v1/wellplates/bulk', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static update(params) {
+    const wellplate = new Wellplate(params);
+    const files = AttachmentFetcher.getFileListfrom(wellplate.container);
+    const promise = () => fetch(`/api/v1/wellplates/${wellplate.id}`, {
+      credentials: 'same-origin',
+      method: 'put',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(wellplate.serialize())
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(params, json.wellplate.id, 'Wellplat')
+        .then(() => this.fetchById(json.wellplate.id))).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+      
+    if (files.length > 0) {
+      let tasks = [];
+      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+    return promise();
+  }
+
+  static create(params) {
+    const files = AttachmentFetcher.getFileListfrom(params.container);
+    const promise = () => fetch('/api/v1/wellplates/', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => GenericElsFetcher.uploadGenericFiles(params, json.wellplate.id, 'Wellplat')
+        .then(() => this.fetchById(json.wellplate.id))).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+      
+    if (files.length > 0) {
+      let tasks = [];
+      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => {
+        return promise();
+      });
+    }
+    return promise();
+  }
+
+  static fetchWellplatesByUIState(params) {
+    return fetch('/api/v1/wellplates/ui_state/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: {
+          all: params.wellplate.all,
+          included_ids: params.wellplate.included_ids,
+          excluded_ids: params.wellplate.excluded_ids,
+          collection_id: params.wellplate.collection_id
+        }
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      return json.wellplates.map((w) => new Wellplate(w));
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static splitAsSubwellplates(params) {
+    const promise = fetch('/api/v1/wellplates/subwellplates/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ui_state: {
+          wellplate: {
+            all: params.wellplate.checkedAll,
+            included_ids: params.wellplate.checkedIds,
+            excluded_ids: params.wellplate.uncheckedIds
+          },
+          currentCollectionId: params.currentCollection.id
+        }
+      })
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+
+    return promise;
+  }
+
+  static updateWellLabel(params) {
+    let promise = fetch('/api/v1/wellplates/well_label', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+
+  static updateWellColorCode(params) {
+    let promise = fetch('/api/v1/wellplates/well_color_code', {
+      credentials: 'same-origin',
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then((response) => {
+      return response.json();
+    }).then((json) => {
+      return json;
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
+  }
+}
diff --git a/app/packs/src/components/generic/AttrChk.js b/app/packs/src/components/generic/AttrChk.js
new file mode 100644
index 000000000..dcf73721f
--- /dev/null
+++ b/app/packs/src/components/generic/AttrChk.js
@@ -0,0 +1,21 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox, FormGroup } from 'react-bootstrap';
+
+const AttrChk = (props) => {
+  const { chkAttr, node, attrOpts } = props;
+  return (
+    <FormGroup bsSize="small" className="generic_tbl_chks">
+      {attrOpts.map(e => <Checkbox key={e.value} inline checked={node.data.value.includes(e.value)} onChange={() => chkAttr(e.value, !(node.data.value.includes(e.value)), node)}>{e.label}</Checkbox>)}
+    </FormGroup>
+  );
+};
+
+AttrChk.propTypes = {
+  chkAttr: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+  attrOpts: PropTypes.array.isRequired,
+};
+
+export default AttrChk;
diff --git a/app/packs/src/components/generic/DefinedRenderer.js b/app/packs/src/components/generic/DefinedRenderer.js
new file mode 100644
index 000000000..44ccec8c1
--- /dev/null
+++ b/app/packs/src/components/generic/DefinedRenderer.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import SystemSelect from './SystemSelect';
+import { molOptions, samOptions } from '../../admin/generic/Utils';
+import AttrChk from './AttrChk';
+
+const DefinedRenderer = (props) => {
+  const {
+    unitConfig, node, selDefined, chkAttr
+  } = props;
+  if (node.data.type === 'system-defined') return <SystemSelect unitConfig={unitConfig} selDefined={selDefined} node={node} />;
+  if (node.data.type === 'drag_molecule') return <AttrChk chkAttr={chkAttr} node={node} attrOpts={molOptions} />;
+  if (node.data.type === 'drag_sample') return <AttrChk chkAttr={chkAttr} node={node} attrOpts={samOptions} />;
+  return node.data.value || null;
+};
+
+export default DefinedRenderer;
diff --git a/app/packs/src/components/generic/DropLinkRenderer.js b/app/packs/src/components/generic/DropLinkRenderer.js
new file mode 100644
index 000000000..d543c6cbc
--- /dev/null
+++ b/app/packs/src/components/generic/DropLinkRenderer.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Aviator from 'aviator';
+import UIStore from '../stores/UIStore';
+
+const linkSample = (type, id) => {
+  const { currentCollection, isSync } = UIStore.getState();
+  const collectionUrl = (!isNaN(id)) ?
+    `${currentCollection.id}/${type}/${id}` : `${currentCollection.id}/${type}`;
+  Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
+};
+
+const DropLinkRenderer = (props) => {
+  const { sField, node } = props;
+  const dId = ((node.data[sField.id] || {}).value || {}).el_id || '';
+  const dVal = ((node.data[sField.id] || {}).value || {}).el_short_label || ' ';
+  if (dId === '') return <div />;
+  return (
+    <a role="link" onClick={() => linkSample('sample', dId)} style={{ cursor: 'pointer' }}>
+      <span className="reaction-material-link">{dVal}</span>
+    </a>
+  );
+};
+
+DropLinkRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default DropLinkRenderer;
diff --git a/app/packs/src/components/generic/DropRenderer.js b/app/packs/src/components/generic/DropRenderer.js
new file mode 100644
index 000000000..9f71b0ed9
--- /dev/null
+++ b/app/packs/src/components/generic/DropRenderer.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cloneDeep } from 'lodash';
+import GenericElTableDropTarget from './GenericElTableDropTarget';
+
+const DropRenderer = (props) => {
+  const {
+    opt, sField, onChange, node
+  } = props;
+  if (!['drag_molecule', 'drag_sample'].includes(sField.type)) return null;
+  const { data } = node;
+  opt.dndItems = [sField.type.split('_')[1]];
+  opt.sField = sField;
+  opt.data = data;
+  const oopt = cloneDeep(opt);
+  return (
+    <div className="drop_generic_properties drop_generic_table_wrap">
+      <GenericElTableDropTarget opt={oopt} onDrop={onChange} />
+    </div>
+  );
+};
+
+DropRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  opt: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default DropRenderer;
diff --git a/app/packs/src/components/generic/DropTextRenderer.js b/app/packs/src/components/generic/DropTextRenderer.js
new file mode 100644
index 000000000..747e51053
--- /dev/null
+++ b/app/packs/src/components/generic/DropTextRenderer.js
@@ -0,0 +1,25 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const DropTextRenderer = (props) => {
+  const { attr, sField, node } = props;
+  let displayValue = ((node.data[sField.id] || {}).value || {})[`el_${attr.value}`] || '';
+  displayValue = (attr.value === 'molecular_weight' && displayValue !== '') ? displayValue.toFixed(6) : displayValue;
+  return (
+    <OverlayTrigger placement="top" overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}>
+      <div role="button" data-clipboard-text={displayValue} className="clipboardBtn" style={{ wordBreak: 'break-all', cursor: 'copy' }}>
+        {displayValue}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+DropTextRenderer.propTypes = {
+  attr: PropTypes.object.isRequired,
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default DropTextRenderer;
diff --git a/app/packs/src/components/generic/FieldSelect.js b/app/packs/src/components/generic/FieldSelect.js
new file mode 100644
index 000000000..3e0e5de17
--- /dev/null
+++ b/app/packs/src/components/generic/FieldSelect.js
@@ -0,0 +1,34 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import GridSelect from './GridSelect';
+
+const FieldSelect = (props) => {
+  const { allLayers, selField, types, node, tableText } = props;
+  const allFileds = ((allLayers.find(e => e.key === node.data.layer) || {}).fields || []).filter(e => (types || ['text']).includes(e.type));
+  const all = allFileds.map(e => ({ key: e.field, val: e.field, lab: e.field }));
+
+  if (tableText && tableText === true) {
+    const tableFileds = ((allLayers.find(e => e.key === node.data.layer) || {}).fields || []).filter(e => e.type === 'table');
+    tableFileds.forEach((tbl) => {
+      ((tbl.sub_fields || []).filter(e => e.type === 'text') || []).forEach((sf) => {
+        const tfl = { key: `${tbl.field}${sf.id}`, val: `${tbl.field}[@@]${sf.id}`, lab: `${tbl.field}.${sf.col_name}` };
+        all.push(tfl);
+      });
+    });
+  }
+  const dVal = node.data.field;
+  return <GridSelect all={all} onChange={selField} node={node} dVal={dVal} />;
+};
+
+FieldSelect.propTypes = {
+  allLayers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  types: PropTypes.arrayOf(String).isRequired,
+  tableText: PropTypes.bool,
+  selField: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+};
+
+FieldSelect.defaultProps = { tableText: false };
+
+export default FieldSelect;
diff --git a/app/packs/src/components/generic/GenericElCommon.js b/app/packs/src/components/generic/GenericElCommon.js
new file mode 100644
index 000000000..c1dfab5fe
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElCommon.js
@@ -0,0 +1,402 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Col, PanelGroup, Row } from 'react-bootstrap';
+import { sortBy, findIndex } from 'lodash';
+import uuid from 'uuid';
+import { genUnits, unitConversion } from '../../admin/generic/Utils';
+import Attachment from '../models/Attachment';
+import {
+  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
+  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
+  GenPropertiesTextArea, GenPropertiesUpload, GenDummy, GenTextFormula, GenPropertiesTable
+} from './GenericPropertiesFields';
+
+const UploadInputChange = (properties, event, field, layer) => {
+  const files = [];
+  const fieldObj = properties.layers[`${layer}`].fields.find(e => e.field === field) || {};
+  const value = fieldObj.value || {};
+  switch (event.action) {
+    case 'l': {
+      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
+      const label = event && event.val && event.val.target && event.val.target.value;
+      if (value.files[valIdx] && label) value.files[valIdx].label = label;
+      break;
+    }
+    case 'f': {
+      (event.val || []).forEach((file) => {
+        const uid = uuid.v4();
+        if (typeof value.files === 'undefined' || value.files === null) value.files = [];
+        value.files.push({ uid, filename: file.name });
+        files.push({ uid, filename: file.name, file: Attachment.fromFile(file) });
+      });
+      break;
+    }
+    case 'd': {
+      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
+      if (valIdx >= 0 && value.files && value.files.length > 0) value.files.splice(valIdx, 1);
+      return [value, files, event.uid];
+    }
+    default:
+      console.log(event);
+  }
+  return [value, files];
+};
+
+
+const ShowProperties = (fObj, layers) => {
+  let showField = true;
+  if (fObj && fObj.cond_fields && fObj.cond_fields.length > 0) {
+    showField = false;
+    for (let i = 0; i < fObj.cond_fields.length; i += 1) {
+      const cond = fObj.cond_fields[i] || {};
+      const { layer, field, value } = cond;
+      if (field && field !== '') {
+        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field) || {};
+        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
+        (['true', 'yes', 't', '1'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) !== 'undefined' && fd.value === true)))) {
+          showField = true;
+          break;
+        } else if (['text', 'select'].includes(fd && fd.type) && (typeof (fd && fd.value) !== 'undefined' && ((fd && fd.value) || '').trim() == (value || '').trim())) {
+          showField = true;
+          break;
+        }
+      }
+    }
+  }
+  return showField;
+};
+
+const GenProperties = (opt) => {
+  const fieldProps = { ...opt, dndItems: [] };
+  const type = fieldProps.type.split('_');
+  if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text';
+
+  switch (type[0]) {
+    case 'checkbox':
+      return GenPropertiesCheckbox(fieldProps);
+    case 'formula-field':
+      return GenPropertiesCalculate(fieldProps);
+    case 'select':
+      return GenPropertiesSelect(fieldProps);
+    case 'drag':
+      fieldProps.dndItems = [...fieldProps.dndItems, type[1]];
+      return GenPropertiesDrop(fieldProps);
+    case 'integer':
+      return GenPropertiesNumber(fieldProps);
+    case 'system-defined':
+      return GenPropertiesSystemDefined(fieldProps);
+    case 'input-group':
+      return GenPropertiesInputGroup(fieldProps);
+    case 'textarea':
+      return GenPropertiesTextArea(fieldProps);
+    case 'upload':
+      return GenPropertiesUpload(fieldProps);
+    case 'dummy':
+      return GenDummy();
+    case 'table':
+      return GenPropertiesTable(fieldProps);
+    case 'text-formula':
+      return GenTextFormula(fieldProps);
+    default:
+      return GenPropertiesText(fieldProps);
+  }
+};
+
+const GenPropertiesSearch = opt => GenProperties({ ...opt, isSearchCriteria: true });
+
+class GenPropertiesLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubChange = this.handleSubChange.bind(this);
+  }
+
+  handleChange(e, f, k, t) {
+    this.props.onChange(e, f, k, t);
+  }
+
+  handleSubChange(e, id, f, valueOnly = false) {
+    const sub = f.sub_fields.find(m => m.id === id);
+    if (!valueOnly) {
+      if (e.type === 'system-defined') {
+        const units = genUnits(e.option_layers);
+        let uIdx = units.findIndex(u => u.key === e.value_system);
+        if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+        sub.value_system = units.length > 0 ? units[uIdx].key : '';
+        sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
+      } else {
+        sub.value = e.target.value;
+      }
+    }
+    const { layer } = this.props;
+    const obj = { f, sub };
+    this.props.onSubChange(layer.key, obj, valueOnly);
+  }
+
+  handleClick(keyLayer, obj, val) {
+    const units = genUnits(obj.option_layers);
+    let uIdx = units.findIndex(e => e.key === val);
+    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+    const update = obj;
+    update.value_system = units.length > 0 ? units[uIdx].key : '';
+    this.props.onClick(keyLayer, update);
+  }
+
+  views() {
+    const {
+      layer, selectOptions, id, layers, canUpdate
+    } = this.props;
+    const { cols, fields, key } = layer;
+    const perRow = cols || 1;
+    const col = Math.floor(12 / perRow);
+    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
+    const vs = [];
+    let op = [];
+    let newRow = 0;
+    let rowId = 1;
+    (fields || []).forEach((f, i) => {
+      if (ShowProperties(f, layers)) {
+        const unit = genUnits(f.option_layers)[0] || {};
+        const tabCol = (f.cols || 1) * 1;
+        const rCol = (f.type === 'table') ? (12 / (tabCol || 1)) : col;
+        newRow = (f.type === 'table') ? newRow += (perRow / (tabCol || 1)) : newRow += 1;
+
+        if (newRow > perRow) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+          newRow = (f.type === 'table') ? newRow = (perRow / (tabCol || 1)) : newRow = 1;
+        }
+        const eachCol = (
+          <Col key={`prop_${key}_${f.priority}_${f.field}`} md={rCol} lg={rCol} className={f.type === 'table' ? '' : klaz}>
+            <GenProperties
+              key={`${id}_${layer}_${f.field}_GenPropertiesLayer`}
+              layers={layers}
+              id={id}
+              layer={layer}
+              f_obj={f}
+              label={f.label}
+              value={f.value || ''}
+              description={f.description || ''}
+              type={f.type || 'text'}
+              field={f.field || 'field'}
+              formula={f.formula || ''}
+              options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
+              onChange={event => this.handleChange(event, f.field, key, f.type)}
+              onSubChange={this.handleSubChange}
+              isEditable
+              readOnly={!canUpdate || false}
+              isRequired={f.required || false}
+              placeholder={f.placeholder || ''}
+              option_layers={f.option_layers}
+              value_system={f.value_system || unit.key}
+              onClick={() => this.handleClick(key, f, (f.value_system || unit.key))}
+            />
+          </Col>
+        );
+        op.push(eachCol);
+        if (newRow % perRow === 0) newRow = 0;
+        if ((newRow === 0) || (fields.length === (i + 1))) {
+          vs.push(<Row key={rowId}>{op}</Row>);
+          rowId += 1;
+          op = [];
+        }
+      } else if (fields.length === (i + 1)) {
+        vs.push(<Row key={rowId}>{op}</Row>);
+        rowId += 1;
+        op = [];
+      }
+    });
+    return vs;
+  }
+
+  render() {
+    let bs = this.props.layer.color ? this.props.layer.color : 'default';
+    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
+    if (bs === 'none') bs = 'default';
+    const cl = this.props.layer.style ? this.props.layer.style : 'panel_generic_heading';
+    const panelHeader = this.props.layer.label === '' ? (<span />) : (
+      <Panel.Heading className={cl} >
+        <Panel.Title toggle>{this.props.layer.label}</Panel.Title>
+      </Panel.Heading>
+    );
+    return (
+      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
+        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
+          {panelHeader}
+          <Panel.Collapse>
+            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </PanelGroup>
+    );
+  }
+}
+
+GenPropertiesLayer.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  layer: PropTypes.object,
+  selectOptions: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onSubChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  layers: PropTypes.object.isRequired,
+  canUpdate: PropTypes.bool
+};
+
+GenPropertiesLayer.defaultProps = {
+  id: 0, selectOptions: {}, onClick: () => {}, canUpdate: true
+};
+
+class GenPropertiesLayerSearchCriteria extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubChange = this.handleSubChange.bind(this);
+  }
+
+  handleChange(e, f, k, t) {
+    this.props.onChange(e, f, k, t);
+  }
+
+  handleSubChange(e, id, f) {
+    const sub = f.sub_fields.find(m => m.id === id);
+    if (e.type === 'system-defined') {
+      const units = genUnits(e.option_layers);
+      let uIdx = units.findIndex(u => u.key === e.value_system);
+      if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+      sub.value_system = units.length > 0 ? units[uIdx].key : '';
+      sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
+    } else {
+      sub.value = e.target.value;
+    }
+    const { layer } = this.props;
+    const obj = { f, sub };
+    this.props.onSubChange(layer.key, obj);
+  }
+
+  views() {
+    const { layer, selectOptions, layers } = this.props;
+    const { cols, fields, key } = layer;
+    const perRow = cols || 1;
+    const col = Math.floor(12 / perRow);
+    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
+    const vs = [];
+    let op = [];
+    (fields || []).forEach((f, i) => {
+      const unit = genUnits(f.option_layers)[0] || {};
+      const eCol = (
+        <Col key={`prop_${key}_${f.priority}_${f.field}`} md={col} lg={col} className={klaz}>
+          <GenPropertiesSearch
+            f_obj={f}
+            label={f.label}
+            value={f.value || ''}
+            type={f.type || 'text'}
+            field={f.field || 'field'}
+            options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
+            onChange={event => this.handleChange(event, f.field, key, f.type)}
+            onSubChange={this.handleSubChange}
+            option_layers={f.option_layers}
+            value_system={f.value_system || unit.key}
+            isEditable
+            readOnly={false}
+            isRequired={false}
+            layers={layers}
+          />
+        </Col>
+      );
+      op.push(eCol);
+      if (((i + 1) % perRow === 0) || (fields.length === (i + 1))) {
+        vs.push(<Row key={`prop_row_${key}_${f.priority}_${f.field}`}>{op}</Row>);
+        op = [];
+      }
+    });
+    return vs;
+  }
+
+  render() {
+    return (
+      <Panel className="panel_generic_properties" defaultExpanded>
+        <Panel.Heading><Panel.Title toggle>{this.props.layer.label}</Panel.Title></Panel.Heading>
+        <Panel.Collapse><Panel.Body>{this.views()}</Panel.Body></Panel.Collapse>
+      </Panel>
+    );
+  }
+}
+
+GenPropertiesLayerSearchCriteria.propTypes = {
+  layer: PropTypes.object,
+  selectOptions: PropTypes.object,
+  onSubChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  layers: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+GenPropertiesLayerSearchCriteria.defaultProps = {
+  selectOptions: {}
+};
+
+const LayersLayout = (layers, options, funcChange, funcSubChange = () => {}, funcClick = () => {}, layout = [], id = 0, canUpdate = false) => {
+  const sortedLayers = sortBy(layers, l => l.position) || [];
+  sortedLayers.forEach((layer) => {
+    if (typeof layer.cond_fields === 'undefined' || layer.cond_fields == null || layer.cond_fields.length === 0) {
+      const ig = (
+        <GenPropertiesLayer
+          id={id}
+          key={layer.key}
+          layer={layer}
+          onChange={funcChange}
+          onSubChange={funcSubChange}
+          selectOptions={options}
+          onClick={funcClick}
+          layers={layers}
+          canUpdate={canUpdate}
+        />
+      );
+      layout.push(ig);
+    } else if (layer.cond_fields && layer.cond_fields.length > 0) {
+      let showLayer = false;
+
+      for (let i = 0; i < layer.cond_fields.length; i += 1) {
+        const cond = layer.cond_fields[i] || {};
+        const fd = ((layers[cond.layer] || {}).fields || []).find(f => f.field === cond.field) || {};
+        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((cond.value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
+        (['true', 'yes', 't', '1'].includes((cond.value || '').trim().toLowerCase()) && (typeof fd.value !== 'undefined' && fd.value === true)))) {
+          showLayer = true;
+          break;
+        } else if (['text', 'select'].includes(fd.type) && (typeof (fd && fd.value) !== 'undefined' && (fd.value || '').trim() == (cond.value || '').trim())) {
+          showLayer = true;
+          break;
+        }
+      }
+
+      if (showLayer === true) {
+        const igs = (
+          <GenPropertiesLayer
+            id={id}
+            key={layer.key}
+            layer={layer}
+            onChange={funcChange}
+            onSubChange={funcSubChange}
+            selectOptions={options}
+            onClick={funcClick}
+            layers={layers}
+            canUpdate={canUpdate}
+          />
+        );
+        layout.push(igs);
+      }
+    }
+  });
+
+  return layout;
+};
+
+export {
+  LayersLayout,
+  GenProperties,
+  UploadInputChange,
+  GenPropertiesLayer,
+  GenPropertiesLayerSearchCriteria
+};
diff --git a/app/packs/src/components/generic/GenericElCriteriaModal.js b/app/packs/src/components/generic/GenericElCriteriaModal.js
new file mode 100644
index 000000000..1be467b89
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElCriteriaModal.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+
+function GenericElCriteriaModal(props) {
+  const Component = props.component;
+  if (!props.show) return (<span />);
+  return (
+    <Modal
+      dialogClassName="generic_criteria_modal"
+      animation={false}
+      show={props.show}
+      onHide={props.onHide}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>
+          {props.title}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {Component}
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+GenericElCriteriaModal.propTypes = {
+  show: PropTypes.bool,
+  component: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element
+  ]),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  onHide: PropTypes.func,
+};
+
+GenericElCriteriaModal.defaultProps = {
+  show: false,
+  component: null,
+  title: '',
+  onHide: () => {}
+};
+
+export default GenericElCriteriaModal;
diff --git a/app/packs/src/components/generic/GenericElDropTarget.js b/app/packs/src/components/generic/GenericElDropTarget.js
new file mode 100644
index 000000000..3cee94c35
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElDropTarget.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { DropTarget } from 'react-dnd';
+import Aviator from 'aviator';
+import { Tooltip, OverlayTrigger, Popover } from 'react-bootstrap';
+import UIStore from '../stores/UIStore';
+
+const handleSampleClick = (type, id) => {
+  const { currentCollection, isSync } = UIStore.getState();
+  if (!isNaN(id)) type += `/${id}`;
+  const collectionUrl = `${currentCollection.id}/${type}`;
+  Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
+};
+
+const show = (opt, iconClass) => {
+  if (opt.value && opt.value.el_id) {
+    const tips = opt.value.el_tip && opt.value.el_tip.split('@@');
+    const tip1 = (tips && tips.length >= 1 && tips[0]) || '';
+    const tip2 = (tips && tips.length >= 2 && tips[1]) || '';
+    const tit = (<div>{tip1}<br />{tip2}</div>);
+    const pop = (
+      <Popover id="popover-svg" title={tit} style={{ maxWidth: 'none', maxHeight: 'none' }}>
+        <img src={opt.value.el_svg} style={{ height: '26vh', width: '26vh' }} alt="" />
+      </Popover>
+    );
+    let label = opt.value.el_label;
+    const simg = (path, tip, txt) => ((path && path !== '') ? (
+      <div className="s-img">
+        <OverlayTrigger trigger={['hover']} placement="left" rootClose onHide={null} overlay={pop}>
+          <img src={path} alt="" />
+        </OverlayTrigger>&nbsp;<span className="data">{txt}</span>
+      </div>
+    ) : (<OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>{tip1}<br />{tip2}</Tooltip>}><div className="data">{txt}</div></OverlayTrigger>));
+    if (opt.value.el_type === 'sample') {
+      if (opt.value.is_new !== true) {
+        label = (
+          <a role="link" onClick={() => handleSampleClick(opt.value.el_type, opt.value.el_id)} style={{ cursor: 'pointer' }}>
+            <span className="reaction-material-link">{label}</span>
+          </a>
+        );
+      }
+    }
+    return simg(opt.value.el_svg, opt.value.el_tip, label);
+  }
+  return (<span className={`icon-${iconClass} indicator`} />);
+};
+
+const source = (type, props, id) => {
+  let isAssoc = false;
+  const taggable = (props && props.tag && props.tag.taggable_data) || {};
+  if (taggable.element && taggable.element.id === id) {
+    isAssoc = false;
+  } else {
+    isAssoc = !!(taggable.reaction_id || taggable.wellplate_id || taggable.element);
+  }
+
+  switch (type) {
+    case 'molecule':
+      return {
+        el_id: props.molecule.id,
+        el_type: 'molecule',
+        el_label: props.molecule_name_label,
+        el_tip: `${props.molecule.inchikey}@@${props.molecule.cano_smiles}`,
+      };
+    case 'sample':
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: isAssoc == true ? 1 : 0,
+        isAssoc,
+        el_type: 'sample',
+        el_label: props.short_label,
+        el_tip: props.short_label,
+      };
+    default:
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: 0,
+        el_type: props.type,
+        el_label: props.short_label,
+        el_tip: props.short_label,
+      };
+  }
+};
+
+const dropTarget = {
+  drop(targetProps, monitor) {
+    const sourceProps = monitor.getItem().element;
+    const sourceTag = source(targetProps.opt.type.split('_')[1], sourceProps, targetProps.opt.id);
+    targetProps.onDrop(sourceTag);
+  },
+  canDrop(targetProps, monitor) {
+    return true;
+  },
+};
+
+const dropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class GenericElDropTarget extends Component {
+  render() {
+    const {
+      connectDropTarget, isOver, canDrop, opt
+    } = this.props;
+    const iconClass = (opt.dndItems && opt.dndItems[0] === 'molecule' ? 'sample' : opt.dndItems[0]);
+    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className}>{show(opt, iconClass)}</div>);
+  }
+}
+
+export default
+DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElDropTarget);
+
+GenericElDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/components/generic/GenericElTableDropTarget.js b/app/packs/src/components/generic/GenericElTableDropTarget.js
new file mode 100644
index 000000000..acd39b633
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElTableDropTarget.js
@@ -0,0 +1,130 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { DropTarget } from 'react-dnd';
+import { Tooltip, OverlayTrigger, Popover, Button } from 'react-bootstrap';
+import { previewAttachmentImage } from '../utils/imageHelper';
+
+const base = (opt, iconClass, onDrop = () => {}, params = {}) => {
+  if (opt.value && opt.value.el_id) {
+    const label = opt.value.el_label;
+    const svg = (opt.value.el_svg && opt.value.el_svg.endsWith('.svg')) ? opt.value.el_svg : previewAttachmentImage({});
+    const pop = (
+      <Popover id="popover-svg" title={label} style={{ maxWidth: 'none', maxHeight: 'none' }}>
+        <img src={svg} style={{ height: '26vh', width: '26vh' }} alt="" />
+      </Popover>
+    );
+    const simg = (path, txt) => ((path && path !== '') ? (
+      <div className="s-img">
+        <OverlayTrigger delayShow={1000} trigger={['hover']} placement="top" rootClose onHide={null} overlay={pop}>
+          <img className="generic_grid_img" src={path} alt="" />
+        </OverlayTrigger>
+        <div className="del_btn">
+          <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()}>remove this molecule</Tooltip>}>
+            <Button className="btn_del" bsSize="xsmall" onClick={() => onDrop({}, params)} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+          </OverlayTrigger>
+        </div>
+      </div>
+    ) : (<div className="data" style={{ width: '4vw' }}>{txt}</div>));
+    return simg(svg, label);
+  }
+  return (<span className={`icon-${iconClass} indicator`} style={{ width: '4vw' }} />);
+};
+
+const show = (opt, iconClass, onDrop) => {
+  if (opt.type === 'table') {
+    const sField = opt.sField || {};
+    const subVal = opt.data[sField.id];
+    const { data } = opt;
+    return base(subVal, iconClass, onDrop, { sField, data });
+  }
+  return base(opt, iconClass);
+};
+
+const source = (type, props, id) => {
+  let isAssoc = false;
+  const taggable = (props && props.tag && props.tag.taggable_data) || {};
+  if (taggable.element && taggable.element.id === id) {
+    isAssoc = false;
+  } else {
+    isAssoc = !!(taggable.reaction_id || taggable.wellplate_id || taggable.element);
+  }
+
+  switch (type) {
+    case 'molecule':
+      return {
+        el_id: props.molecule.id,
+        el_type: 'molecule',
+        el_label: props.molecule.cano_smiles || props.molecule_formula || props.molecule_name_label,
+        el_inchikey: props.molecule.inchikey,
+        el_smiles: props.molecule.cano_smiles,
+        el_iupac: props.molecule.iupac_name,
+        el_molecular_weight: props.molecule.molecular_weight,
+        el_svg: `/images/molecules/${props.molecule.molecule_svg_file}`,
+      };
+    case 'sample':
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: 1,
+        isAssoc,
+        el_type: 'sample',
+        el_label: props.short_label,
+        el_short_label: props.short_label,
+        el_name: props.name,
+        el_external_label: props.external_label,
+        el_molecular_weight: props.molecule_molecular_weight,
+        el_svg: props.sample_svg_file ? `/images/samples/${props.sample_svg_file}` : `/images/molecules/${props.molecule.molecule_svg_file}`,
+      };
+    default:
+      return {
+        el_id: props.id,
+        is_new: true,
+        cr_opt: 0,
+        el_type: props.type,
+        el_label: props.short_label,
+      };
+  }
+};
+
+const dropTarget = {
+  drop(targetProps, monitor) {
+    const sourceProps = monitor.getItem().element;
+    const type = targetProps.opt.sField.type.split('_')[1];
+    const sourceTag = source(type, sourceProps, targetProps.opt.id);
+    targetProps.onDrop(sourceTag, targetProps.opt);
+  },
+  canDrop(targetProps, monitor) {
+    return true;
+  },
+};
+
+const dropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+class GenericElTableDropTarget extends Component {
+  render() {
+    const {
+      connectDropTarget, isOver, canDrop, opt, onDrop
+    } = this.props;
+    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className} style={{ display: 'inline-flex', justifyContent: 'center' }}>{show(opt, 'sample', onDrop)}</div>);
+  }
+}
+
+export default
+DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElTableDropTarget);
+
+GenericElTableDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+  opt: PropTypes.object.isRequired,
+  onDrop: PropTypes.func
+};
+
+GenericElTableDropTarget.defaultProps = { onDrop: () => {} };
diff --git a/app/packs/src/components/generic/GenericElementLabels.js b/app/packs/src/components/generic/GenericElementLabels.js
new file mode 100644
index 000000000..fd353b9ba
--- /dev/null
+++ b/app/packs/src/components/generic/GenericElementLabels.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Label, Modal, Button } from 'react-bootstrap';
+import ElementActions from '../actions/ElementActions';
+import ElementStore from '../stores/ElementStore';
+import UserStore from '../stores/UserStore';
+
+export default class GenericElementLabels extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { showWarning: false, clicked: false };
+    this.handleOnClick = this.handleOnClick.bind(this);
+    this.closeWarning = this.closeWarning.bind(this);
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    ElementStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    ElementStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    if (this.state.showWarning !== state.elementWarning) {
+      this.setState({ showWarning: state.elementWarning });
+    }
+  }
+
+  closeWarning() {
+    this.setState({ showWarning: false });
+    ElementActions.closeWarning();
+  }
+
+  handleOnClick(e) {
+    const { element } = this.props;
+    const elInfo = element.tag.taggable_data.element || {};
+    ElementActions.tryFetchGenericElById(elInfo.id);
+    this.setState({ clicked: true });
+    e.stopPropagation();
+  }
+
+  render() {
+    const { element } = this.props;
+    if (!element.tag || !element.tag.taggable_data || !element.tag.taggable_data.element) {
+      return (<span />);
+    }
+    const elInfo = element.tag.taggable_data.element;
+    const klasses = UserStore.getState().genericEls;
+    const klass = (klasses && klasses.find(el => el.name === elInfo.type)) || {};
+    const { showWarning, clicked } = this.state;
+    return (
+      <div style={{ display: 'inline-block' }}>
+        <div onClick={this.handleOnClick}>
+          <span className="collection-label" key={element.id}>
+            <Label><i className={`${klass.icon_name}`} /></Label>
+          </span>
+        </div>
+        <div className="center">
+          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
+            <Modal.Header closeButton>
+              <Modal.Title>No Access to Element</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>Sorry, you cannot access this Element.</Modal.Body>
+            <Modal.Footer>
+              <Button onClick={this.closeWarning}>Close</Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/generic/GenericPropertiesFields.js b/app/packs/src/components/generic/GenericPropertiesFields.js
new file mode 100644
index 000000000..21a1a1d72
--- /dev/null
+++ b/app/packs/src/components/generic/GenericPropertiesFields.js
@@ -0,0 +1,391 @@
+import React from 'react';
+import { Checkbox, FormGroup, FormControl, Button, Tooltip, OverlayTrigger, InputGroup, Radio, Modal, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import { filter } from 'lodash';
+import Select from 'react-select';
+import Dropzone from 'react-dropzone';
+import GenericElDropTarget from './GenericElDropTarget';
+import { genUnit, genUnitSup, FieldLabel, unitConvToBase } from '../../admin/generic/Utils';
+import TableRecord from './TableRecord';
+import Utils from '../utils/Functions';
+
+const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
+const GenTextFormula = (opt) => {
+  const { layers } = opt;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const subs = [];
+  (opt.f_obj && opt.f_obj.text_sub_fields).map((e) => {
+    const { layer, field, separator } = e;
+    if (field && field !== '') {
+      if (field.includes('[@@]')) {
+        const fds = field.split('[@@]');
+        if (fds && fds.length === 2) {
+          const fdt = ((layers[layer] || {}).fields || []).find(f => f.field === fds[0] && f.type === 'table');
+          ((fdt && fdt.sub_values) || []).forEach((svv) => {
+            if (svv && svv[fds[1]] && svv[fds[1]] !== '') { subs.push(svv[fds[1]]); subs.push(separator); }
+          });
+        }
+      } else {
+        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field);
+        if (fd && fd.value && fd.value !== '') { subs.push(fd.value); subs.push(separator); }
+      }
+    }
+    return true;
+  });
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={subs.join('')}
+        className="readonly"
+        readOnly
+        required={false}
+      />
+    </FormGroup>
+  );
+};
+
+const GenDummy = () => (
+  <FormGroup className="text_generic_properties">
+    <FormControl type="text" className="dummy" readOnly />
+  </FormGroup>
+);
+
+const GenPropertiesTextArea = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        componentClass="textarea"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+      />
+    </FormGroup>
+  );
+};
+
+const renderListGroupItem = (opt, attachment) => {
+  const delBtn = (
+    <Button bsSize="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
+      <i className="fa fa-times" aria-hidden="true" />
+    </Button>
+  );
+  const filename = attachment.aid ? (<a onClick={() => Utils.downloadFile({ contents: `/api/v1/attachments/${attachment.aid}`, name: attachment.filename })} style={{ cursor: 'pointer' }}>{attachment.filename}</a>) : attachment.filename;
+  return (
+    <div className="generic_grid">
+      <div>
+        <div>{delBtn}</div>
+        <div className="generic_grid_row">{filename}</div>
+        <div className="generic_grid_row">
+          <FormGroup bsSize="small">
+            <FormControl
+              type="text"
+              value={attachment.label || ''}
+              onChange={e => opt.onChange({
+                ...opt.value, action: 'l', uid: attachment.uid, val: e
+              })}
+            />
+          </FormGroup>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const GenPropertiesUpload = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const attachments = (opt.value && opt.value.files) || [];
+  if (opt.isSearchCriteria) return (<div>(This is an upload)</div>);
+
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <Dropzone
+          id="dropzone"
+          onDrop={e => opt.onChange({
+            ...opt.value, action: 'f', val: e
+          })}
+          style={{ height: 30, width: '100%', border: '3px dashed lightgray' }}>
+          <div style={{ textAlign: 'center', paddingTop: 6, color: 'gray' }}>
+            Drop File, or Click to Select.
+          </div>
+        </Dropzone>
+      </FormControl.Static>
+      <ListGroup>
+        {attachments.map(attachment => (
+          <ListGroupItem key={attachment.id} className="generic_files">
+            {renderListGroupItem(opt, attachment)}
+          </ListGroupItem>
+          ))}
+      </ListGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesText = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.readOnly ? '' : opt.placeholder}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesCheckbox = opt => (
+  <FormGroup>
+    <Checkbox
+      name={opt.field}
+      checked={opt.value}
+      onChange={opt.onChange}
+      disabled={opt.readOnly}
+    >
+      <FormControl.Static>{opt.label}</FormControl.Static>
+    </Checkbox>
+  </FormGroup>
+);
+
+const GenPropertiesSelect = (opt) => {
+  const options = opt.options.map(op => ({ value: op.key, name: op.key, label: op.label }));
+  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
+  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
+  className = `${className} status-select`;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <Select
+        isClearable
+        menuContainerStyle={{ position: 'absolute' }}
+        name={opt.field}
+        multi={false}
+        options={options}
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        disabled={opt.readOnly}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesCalculate = (opt) => {
+  const fields = (opt.layer && opt.layer.fields) || [];
+  let showVal = 0;
+  let showTxt = null;
+  let newFormula = opt.formula;
+
+  const calFields = filter(fields, o => (o.type === 'integer' || o.type === 'system-defined'));
+  const regF = /[a-zA-Z0-9]+/gm;
+  // eslint-disable-next-line max-len
+  const varFields = (opt.formula && opt.formula.match(regF)) ? opt.formula.match(regF).sort((a, b) => b.length - a.length) : [];
+
+  varFields.forEach((fi) => {
+    if (!isNaN(fi)) return;
+
+    const tmpField = calFields.find(e => e.field === fi);
+    if (typeof tmpField === 'undefined' || tmpField == null) {
+      newFormula = newFormula.replace(fi, 0);
+    } else {
+      newFormula = (tmpField.type === 'system-defined') ? newFormula.replace(fi, parseFloat(unitConvToBase(tmpField) || 0)) : newFormula.replace(fi, parseFloat(tmpField.value || 0));
+    }
+  });
+
+  if (opt.type === 'formula-field') {
+    try {
+      showVal = eval(newFormula);
+      showTxt = !isNaN(showVal) ? parseFloat(showVal.toFixed(5)) : 0;
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        showTxt = e.message;
+      }
+    }
+  }
+
+  const fieldHeader = opt.label === '' ? null : (<FieldLabel label={opt.label} desc={opt.description} />);
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="text"
+          value={showTxt}
+          onChange={opt.onChange}
+          className="readonly"
+          readOnly="readonly"
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="update_calculation_field">adjust</Tooltip>}
+          >
+            <Button active className="clipboardBtn" onClick={() => opt.onChange(showTxt)}>
+              <i className="fa fa-arrow-right" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <FormControl
+          type="text"
+          value={opt.value}
+          onChange={opt.onChange}
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesNumber = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <FormControl
+        type="number"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+        min={1}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesSystemDefined = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="number"
+          value={opt.value}
+          onChange={opt.onChange}
+          className={className}
+          readOnly={opt.readOnly}
+          required={opt.isRequired}
+          placeholder={opt.placeholder}
+          min={1}
+        />
+        <InputGroup.Button>
+          <Button disabled={opt.readOnly} active onClick={opt.onClick} bsStyle="success">
+            {genUnitSup(genUnit(opt.option_layers, opt.value_system).label) || ''}
+          </Button>
+        </InputGroup.Button>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesTable = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <TableRecord key={`grid_${opt.f_obj.field}`} opt={opt} />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesInputGroup = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const fLab = e => <div key={uuid.v4()} className="form-control g_input_group_label">{e.value}</div>;
+  const fTxt = e => <FormControl className="g_input_group" key={e.id} type={e.type} name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} />;
+  const fUnit = e => (
+    <span key={`${e.id}_GenPropertiesInputGroup`} className="input-group" style={{ width: '100%' }}>
+      <FormControl key={e.id} type="number" name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} min={1} />
+      <InputGroup.Button>
+        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} bsStyle="success">
+          {genUnitSup(genUnit(e.option_layers, e.value_system).label) || ''}
+        </Button>
+      </InputGroup.Button>
+    </span>
+  );
+  const subs = opt.f_obj && opt.f_obj.sub_fields && opt.f_obj.sub_fields.map((e) => {
+    if (e.type === 'label') { return fLab(e); } if (e.type === 'system-defined') { return fUnit(e); } return fTxt(e);
+  });
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup style={{ display: 'flex' }}>
+        {subs}
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesDrop = (opt) => {
+  const className = opt.isRequired ? 'drop_generic_properties field_required' : 'drop_generic_properties';
+
+  let createOpt = null;
+  if (opt.value.is_new === true) {
+    createOpt = (
+      <div className="sample_radios">
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>associate with this sample</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>split from the sample first and then associate with it</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>duplicate the sample first and then associate with it</Tooltip>}>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</Radio>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <div className={className}>
+          <GenericElDropTarget opt={opt} onDrop={opt.onChange} />
+          {createOpt}
+          <div>
+            <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>remove</Tooltip>}>
+              <Button className="btn_del" bsStyle="danger" bsSize="xsmall" onClick={() => opt.onChange({})} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </FormControl.Static>
+    </FormGroup>
+  );
+};
+
+export {
+  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
+  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
+  GenPropertiesTextArea, GenDummy, GenPropertiesUpload, GenTextFormula, GenPropertiesTable
+};
diff --git a/app/packs/src/components/generic/GridBtn.js b/app/packs/src/components/generic/GridBtn.js
new file mode 100644
index 000000000..6b7c1f4ea
--- /dev/null
+++ b/app/packs/src/components/generic/GridBtn.js
@@ -0,0 +1,40 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import GridDnD from './GridDnD';
+
+const AddRowBtn = ({ addRow }) => (
+  <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()} >add entry</Tooltip>}>
+    <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+  </OverlayTrigger>
+);
+
+AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
+
+const DelRowBtn = ({ delRow, node }) => {
+  const { data } = node;
+  return (
+    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()} >remove</Tooltip>}>
+      <Button onClick={() => delRow(data)} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>
+    </OverlayTrigger>);
+};
+
+DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+const NullRowBtn = () => (<div className="grid-btn-none"><span className="fa fa-arrows" /></div>);
+
+const DnDRowBtn = ({
+  moveRow, field, type, node
+}) => (
+  <GridDnD field={field} type={type} rowValue={node.data} handleMove={moveRow} />
+);
+
+DnDRowBtn.propTypes = {
+  moveRow: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  node: PropTypes.object.isRequired
+};
+export { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn };
diff --git a/app/packs/src/components/generic/GridDnD.js b/app/packs/src/components/generic/GridDnD.js
new file mode 100644
index 000000000..f2166646a
--- /dev/null
+++ b/app/packs/src/components/generic/GridDnD.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { DragSource, DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+
+const orderSource = {
+  beginDrag(props) {
+    const { field, rowValue } = props;
+    return { fid: field, rId: rowValue.id };
+  },
+};
+
+const orderTarget = {
+  drop(props, monitor) {
+    const { field, rowValue, handleMove } = props;
+    const tar = { fid: field, rId: rowValue.id };
+    const src = monitor.getItem();
+    if (tar.fid === src.fid && tar.rId !== src.rId) handleMove(src.rId, tar.rId);
+  },
+};
+
+const orderDragCollect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const orderDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+});
+
+const GridDnD = ({
+  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
+}) => {
+  const className = `generic_grid_dnd${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}${isDragging ? ' is-dragging' : ''}`;
+  return compose(connectDragSource, connectDropTarget)(<div className={className}><div className="dnd-btn"><span className="text-info fa fa-arrows" /></div></div>);
+};
+
+export default compose(
+  DragSource(s => s.type, orderSource, orderDragCollect),
+  DropTarget(s => s.type, orderTarget, orderDropCollect)
+)(GridDnD);
diff --git a/app/packs/src/components/generic/GridEntry.js b/app/packs/src/components/generic/GridEntry.js
new file mode 100644
index 000000000..b5e05fd40
--- /dev/null
+++ b/app/packs/src/components/generic/GridEntry.js
@@ -0,0 +1,74 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import { FormControl, InputGroup } from 'react-bootstrap';
+
+const setCell = (columnDef, rowValue) => {
+  const {
+    type, field, onCellChange, cellRenderer, cellParams
+  } = columnDef;
+  switch (type) {
+    case 'text':
+      return (
+        <FormControl type="text" value={rowValue[field] || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
+      );
+    case 'system-defined':
+      return (
+        <InputGroup>
+          <FormControl type="number" value={rowValue[field].value || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
+          <InputGroup.Button>
+            {cellRenderer({ ...cellParams, node: { data: rowValue } })}
+          </InputGroup.Button>
+        </InputGroup>
+      );
+    case 'drag_molecule':
+    case 'drag_sample':
+    case 'dnd':
+      return (cellRenderer({ ...cellParams, node: { data: rowValue } }));
+    default:
+      return <span />;
+  }
+};
+
+const ColumnHeader = (columnDefs) => {
+  const ch = [];
+  const h = (col, idx) => {
+    const {
+      width, headerName, headerComponent, headerParams
+    } = col;
+    const colCss = {};
+    if (width) { Object.assign(colCss, { width, minWidth: width }); }
+    return (
+      <div key={`column_header_${col.colId || col.field}_${idx}`} className="generic_grid_header" style={colCss}>
+        {headerComponent ? headerComponent(headerParams) : null}
+        <div style={colCss}>{headerName}</div>
+      </div>
+    );
+  };
+  columnDefs.forEach((col, idx) => ch.push(h(col, idx)));
+  return (<div className="generic_grid" style={{ borderBottom: '1px solid #ccc' }}><div>{ch}</div></div>);
+};
+
+const ColumnRow = (columnDefs, rowValue) => {
+  const ch = [];
+  const h = (col, val, idx) => {
+    const {
+      field, width, cellParams, cellRenderer
+    } = col;
+    const colCss = {};
+    if (width) { Object.assign(colCss, { width, minWidth: width }); }
+    return (
+      <div key={`column_row_${val.id}_${col.colId || col.field}_${idx}`} className="generic_grid_row" style={colCss}>
+        {field ? (setCell(col, val) || '') : (cellRenderer({ ...cellParams, node: { data: val } }) || '')}
+      </div>
+    );
+  };
+  columnDefs.forEach((col, idx) => ch.push(h(col, rowValue, idx)));
+  return (<div key={`column_row_${rowValue.id}`} className="generic_grid"><div>{ch}</div></div>);
+};
+
+const NoRow = (values) => {
+  if (values && values.length > 0) return null;
+  return (<div className="generic_grid"><div><div className="generic_grid_row" style={{ width: '100%' }}>(No data)</div></div></div>);
+};
+
+export { ColumnHeader, ColumnRow, NoRow };
diff --git a/app/packs/src/components/generic/GridSelect.js b/app/packs/src/components/generic/GridSelect.js
new file mode 100644
index 000000000..69fc3fdd2
--- /dev/null
+++ b/app/packs/src/components/generic/GridSelect.js
@@ -0,0 +1,30 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, FormControl } from 'react-bootstrap';
+
+const GridSelect = (props) => {
+  const {
+    all, onChange, node, dVal
+  } = props;
+  return (
+    <FormGroup bsSize="small" style={{ marginRight: '-10px', marginLeft: '-10px' }}>
+      <FormControl componentClass="select" placeholder="select..." onChange={e => onChange(e, node)} defaultValue={dVal}>
+        {all.map(e => <option key={e.key} value={e.val}>{e.lab}</option>)}
+      </FormControl>
+    </FormGroup>
+  );
+};
+
+GridSelect.propTypes = {
+  all: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    val: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    lab: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })).isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+  dVal: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default GridSelect;
diff --git a/app/packs/src/components/generic/LayerSelect.js b/app/packs/src/components/generic/LayerSelect.js
new file mode 100644
index 000000000..64a9fe16f
--- /dev/null
+++ b/app/packs/src/components/generic/LayerSelect.js
@@ -0,0 +1,19 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import GridSelect from './GridSelect';
+
+const LayerSelect = (props) => {
+  const { allLayers, selLayer, node } = props;
+  const all = allLayers.map(e => ({ key: e.key, val: e.key, lab: e.key }));
+  const dVal = node.data.layer;
+  return <GridSelect all={all} onChange={selLayer} node={node} dVal={dVal} />;
+};
+
+LayerSelect.propTypes = {
+  allLayers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selLayer: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+};
+
+export default LayerSelect;
diff --git a/app/packs/src/components/generic/PreviewModal.js b/app/packs/src/components/generic/PreviewModal.js
new file mode 100644
index 000000000..948ed9ec7
--- /dev/null
+++ b/app/packs/src/components/generic/PreviewModal.js
@@ -0,0 +1,75 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import Preview from '../../admin/generic/Preview';
+
+export default class PreviewModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { revisions: [] };
+    this.handleClose = this.handleClose.bind(this);
+    this.setRevisions = this.setRevisions.bind(this);
+    this.retriveRevision = this.retriveRevision.bind(this);
+    this.delRevision = this.delRevision.bind(this);
+    this.fetchRevisions = this.fetchRevisions.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { element, showModal } = this.props;
+    if ((showModal !== prevProps.showModal && showModal) || (element.id !== prevProps.element.id)) {
+      this.fetchRevisions();
+    }
+  }
+
+  setRevisions(revisions) {
+    this.setState({ revisions });
+  }
+
+  fetchRevisions() {
+    const { fetcher, fetcherFn, element } = this.props;
+    fetcher[fetcherFn](element.id).then((result) => {
+      (result.revisions || []).map(r => Object.assign(r, { released_at: r.created_at }));
+      this.setState({ revisions: result.revisions });
+    });
+  }
+
+  handleClose() {
+    this.props.fnClose();
+  }
+
+  retriveRevision(revision, cb) {
+    this.props.fnRetrive(revision, cb);
+  }
+
+  delRevision(revision) {
+    this.props.fnDelete({ id: revision.id }, this.fetchRevisions);
+  }
+
+  render() {
+    const { showModal } = this.props;
+    const { revisions } = this.state;
+    return (
+      <Modal backdrop="static" dialogClassName="importChemDrawModal" show={showModal} onHide={() => this.handleClose()}>
+        <Modal.Header closeButton><Modal.Title>History</Modal.Title></Modal.Header>
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div className="col-md-12">
+            <Preview revisions={revisions} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} src="properties" />
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+PreviewModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  fnClose: PropTypes.func.isRequired,
+  fnRetrive: PropTypes.func,
+  element: PropTypes.object,
+  fetcher: PropTypes.func.isRequired,
+  fetcherFn: PropTypes.string.isRequired,
+  fnDelete: PropTypes.func.isRequired
+};
+
+PreviewModal.defaultProps = { element: {}, fnRetrive: () => {} };
diff --git a/app/packs/src/components/generic/SamOption.js b/app/packs/src/components/generic/SamOption.js
new file mode 100644
index 000000000..dfa433af2
--- /dev/null
+++ b/app/packs/src/components/generic/SamOption.js
@@ -0,0 +1,53 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
+
+const SamOption = (props) => {
+  const { sField, node, onChange } = props;
+  const { data } = node;
+  const fValue = (data[sField.id] && data[sField.id].value) || {};
+  if (!fValue.is_new) return <div />;
+  const rUUID = uuid.v4();
+  return (
+    <div className="generic_sam_options">
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>associate with this sample</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          disabled={fValue.isAssoc}
+          checked={fValue.cr_opt === 0}
+          onChange={() => onChange({ node, subField: sField, crOpt: 0 })}
+        >
+          Current
+        </Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>split from the sample first and then associate with it</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 1}
+          onChange={() => onChange({ node, subField: sField, crOpt: 1 })}
+        >
+          Split
+        </Radio>
+      </OverlayTrigger>
+      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>duplicate the sample first and then associate with it</Tooltip>}>
+        <Radio
+          name={`dropS_${rUUID}`}
+          checked={fValue.cr_opt === 2}
+          onChange={() => onChange({ node, subField: sField, crOpt: 2 })}
+        >
+          Copy
+        </Radio>
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+SamOption.propTypes = {
+  sField: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+export default SamOption;
diff --git a/app/packs/src/components/generic/SystemSelect.js b/app/packs/src/components/generic/SystemSelect.js
new file mode 100644
index 000000000..c24d4fd3a
--- /dev/null
+++ b/app/packs/src/components/generic/SystemSelect.js
@@ -0,0 +1,19 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import GridSelect from './GridSelect';
+
+const SystemSelect = (props) => {
+  const { unitConfig, selDefined, node } = props;
+  const all = unitConfig.map(e => ({ key: e.value, val: e.value, lab: e.label }));
+  const dVal = node.data.option_layers;
+  return <GridSelect all={all} onChange={selDefined} node={node} dVal={dVal} />;
+};
+
+SystemSelect.propTypes = {
+  unitConfig: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selDefined: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired,
+};
+
+export default SystemSelect;
diff --git a/app/packs/src/components/generic/TableDef.js b/app/packs/src/components/generic/TableDef.js
new file mode 100644
index 000000000..b2a963977
--- /dev/null
+++ b/app/packs/src/components/generic/TableDef.js
@@ -0,0 +1,218 @@
+/* eslint-disable react/forbid-prop-types */
+import { AgGridReact } from 'ag-grid-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import GenericSubField from '../models/GenericSubField';
+import { AddRowBtn, DelRowBtn } from './GridBtn';
+import TypeSelect from './TypeSelect';
+import DefinedRenderer from './DefinedRenderer';
+
+export default class TableDef extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      unitConfig: props.unitsFields.map(e => ({ value: e.field, name: e.label, label: e.label }))
+    };
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.selType = this.selType.bind(this);
+    this.selDefined = this.selDefined.bind(this);
+    this.chkAttr = this.chkAttr.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+    this.tblType = props.genericType === 'Element' ? ['drag_molecule', 'drag_sample', 'text', 'system-defined'] : ['drag_molecule', 'text', 'system-defined'];
+    this.columnDefs = [
+      {
+        headerName: 'Id',
+        field: 'id',
+        editable: false,
+        minWidth: 50,
+        width: 50,
+      },
+      {
+        headerName: 'Column Heading',
+        field: 'col_name',
+        editable: true,
+        minWidth: 150,
+        width: 150,
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: 'Column Type',
+        field: 'type',
+        editable: false,
+        minWidth: 150,
+        width: 150,
+        cellRendererFramework: TypeSelect,
+        cellRendererParams: { all: this.tblType.map(e => ({ key: e, val: e, lab: e })), selType: this.selType },
+      },
+      {
+        headerName: 'Default Value',
+        field: 'value',
+        editable: (e) => { if (['drag_molecule', 'drag_sample', 'system-defined'].includes(e.data.type)) return false; return true; },
+        minWidth: 350,
+        cellRenderer: 'definedRenderer',
+        cellRendererParams: { unitConfig: this.state.unitConfig, selDefined: this.selDefined, chkAttr: this.chkAttr },
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: 'Option Layers(hidden)',
+        field: 'option_layers',
+        width: 10,
+        hide: true,
+      },
+      {
+        headerName: 'Value System(hidden)',
+        field: 'value_system',
+        width: 10,
+        hide: true,
+      },
+      {
+        headerName: '',
+        colId: 'actions',
+        headerComponentFramework: AddRowBtn,
+        headerComponentParams: { addRow: this.addRow },
+        cellRendererFramework: DelRowBtn,
+        cellRendererParams: { delRow: this.delRow },
+        editable: false,
+        filter: false,
+        minWidth: 48,
+        width: 48,
+        suppressSizeToFit: true,
+        pinned: 'left'
+      },
+    ];
+    this.frameworkComponents = {
+      definedRenderer: DefinedRenderer
+    };
+  }
+
+  componentDidUpdate() {
+    this.autoSizeAll();
+  }
+
+  onGridReady(e) {
+    this.gridApi = e.api;
+    this.autoSizeAll();
+  }
+
+  onCellValueChanged(params) {
+    const { oldValue, newValue } = params;
+    if (oldValue === newValue) return;
+    this.refresh();
+  }
+
+  autoSizeAll() {
+    if (!this.gridApi) return;
+    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
+  }
+
+  delRow() {
+    const selectedData = this.gridApi.getSelectedRows();
+    this.gridApi.applyTransaction({ remove: selectedData });
+    this.refresh();
+  }
+
+  addRow() {
+    const newSub = new GenericSubField({ col_name: '', type: 'text', value: '' });
+    const idx = this.gridApi.getDisplayedRowCount();
+    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
+    this.refresh();
+  }
+
+  selType(e, node) {
+    const { data } = node;
+    if (e.target.value === data.type) { return; }
+    data.type = e.target.value;
+    data.value = '';
+    const { unitConfig } = this.state;
+    if (data.type === 'system-defined') {
+      data.option_layers = (unitConfig || [])[0].value;
+      data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
+        .units || [])[0].key;
+    } else {
+      delete data.option_layers;
+      delete data.value_system;
+    }
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.sub_fields = rows;
+    this.gridApi.setRowData(rows);
+    updSub(layerKey, field, () => {});
+  }
+
+  chkAttr(val, chk, node) {
+    const { data } = node;
+    const search = new RegExp(`${val};`, 'gi');
+    if (chk) {
+      data.value = data.value.concat(`${val};`);
+    } else {
+      data.value = data.value.replace(search, '');
+    }
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.sub_fields = rows;
+    this.gridApi.setRowData(rows);
+    updSub(layerKey, field, () => {});
+  }
+
+  selDefined(e, node) {
+    const { data } = node;
+    if (e.target.value === data.option_layers) { return; }
+    data.option_layers = e.target.value;
+    data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
+      .units || [])[0].key;
+    this.refresh();
+  }
+
+  refresh() {
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.sub_fields = rows;
+    updSub(layerKey, field, () => {});
+  }
+
+  render() {
+    const { field } = this.props;
+    const sub = field.sub_fields || [];
+    return (
+      <div>
+        <div style={{ fontSize: '10px' }}>
+          <b>Table: </b>
+          define a table with the column type as <b>drag_molecule, drag_sample(only available</b>
+          <b> for generic element), text or system-defined</b>;<br />
+          note: <b>drag_sample</b> stands for Sample and contains at least its image and
+          short label information; <b>system-defined</b> represents the unit field, which
+          has an input field and a unit converter.
+        </div>
+        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
+          <AgGridReact
+            defaultColDef={{ resizable: true }}
+            enableColResize
+            columnDefs={this.columnDefs}
+            rowSelection="single"
+            onGridReady={this.onGridReady}
+            rowData={sub}
+            singleClickEdit
+            stopEditingWhenGridLosesFocus
+            frameworkComponents={this.frameworkComponents}
+            domLayout="autoHeight"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+TableDef.propTypes = {
+  genericType: PropTypes.string.isRequired,
+  layerKey: PropTypes.string.isRequired,
+  field: PropTypes.object.isRequired,
+  updSub: PropTypes.func.isRequired,
+  unitsFields: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
diff --git a/app/packs/src/components/generic/TableRecord.js b/app/packs/src/components/generic/TableRecord.js
new file mode 100644
index 000000000..1a0b2e95c
--- /dev/null
+++ b/app/packs/src/components/generic/TableRecord.js
@@ -0,0 +1,229 @@
+/* eslint-disable no-empty */
+/* eslint-disable react/forbid-prop-types */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Numeral from 'numeral';
+import GenericSubField from '../models/GenericSubField';
+import { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn } from './GridBtn';
+import { ColumnHeader, ColumnRow, NoRow } from './GridEntry';
+import UConverterRenderer from './UConverterRenderer';
+import { genUnits, unitConversion, molOptions, samOptions } from '../../admin/generic/Utils';
+import DropRenderer from './DropRenderer';
+import DropTextRenderer from './DropTextRenderer';
+import DropLinkRenderer from './DropLinkRenderer';
+import SampOption from './SamOption';
+import DragDropItemTypes from '../DragDropItemTypes';
+
+export default class TableRecord extends React.Component {
+  constructor(props) {
+    super(props);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.moveRow = this.moveRow.bind(this);
+    this.onCellChange = this.onCellChange.bind(this);
+    this.onUnitClick = this.onUnitClick.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+    this.onChk = this.onChk.bind(this);
+    this.getColumns = this.getColumns.bind(this);
+  }
+
+  onCellChange(params) {
+    const { e, columnDef, rowValue } = params;
+    const newValue = e.target.value;
+    const oldValue = rowValue[columnDef.field].value;
+    if (oldValue === newValue) return;
+    if (columnDef.type === 'text') {
+      rowValue[columnDef.field] = newValue;
+    }
+    if (columnDef.type === 'system-defined') {
+      if (isNaN(newValue)) return;
+      rowValue[columnDef.field].value = Numeral(newValue).value();
+    }
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const idx = subVals.findIndex(s => s.id === rowValue.id);
+    subVals.splice(idx, 1, rowValue);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  onUnitClick(subField, node) {
+    const { data } = node;
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === data.id);
+    const units = genUnits(subField.option_layers);
+    let uIdx = units.findIndex(u => u.key === subVal[subField.id].value_system);
+    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
+    const vs = units.length > 0 ? units[uIdx].key : '';
+    const v = unitConversion(subField.option_layers, vs, subVal[subField.id].value);
+    subVal[subField.id] = { value: v, value_system: vs };
+    const idx = subVals.findIndex(s => s.id === data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  onDrop(targetProps, targetOpt) {
+    const { opt } = this.props;
+    const subField = targetOpt.sField;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === targetOpt.data.id);
+    subVal[subField.id] = { value: targetProps };
+    const idx = subVals.findIndex(s => s.id === targetOpt.data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  onChk(params) {
+    const { node, subField, crOpt } = params;
+    const { opt } = this.props;
+    const subVals = opt.f_obj.sub_values || [];
+    const subVal = subVals.find(s => s.id === node.data.id);
+    node.data[subField.id].value.cr_opt = crOpt;
+    subVal[subField.id] = { value: node.data[subField.id].value };
+    const idx = subVals.findIndex(s => s.id === node.data.id);
+    subVals.splice(idx, 1, subVal);
+    opt.f_obj.sub_values = subVals;
+    opt.onSubChange(subField, subField.id, opt.f_obj, true);
+  }
+
+  getColumns() {
+    const { opt } = this.props;
+    const sValues = (opt.f_obj.sub_values || []);
+    let columnDefs = [];
+    (opt.f_obj.sub_fields || []).forEach((sF) => {
+      let colDef = {
+        type: sF.type, headerName: sF.col_name, field: sF.id
+      };
+      const colDefExt = [];
+      if (sF.type === 'text') {
+        colDef = Object.assign({}, colDef, {
+          editable: true, onCellChange: this.onCellChange
+        });
+      }
+      if (sF.type === 'system-defined') {
+        const cellParams = { sField: sF, onChange: this.onUnitClick };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: UConverterRenderer, cellParams, onCellChange: this.onCellChange
+        });
+      }
+      if (sF.type === 'drag_molecule') {
+        const cellParams = { sField: sF, opt, onChange: this.onDrop };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
+        });
+        const conf = ((sF.value || '').split(';') || []);
+        conf.forEach((c) => {
+          const attr = molOptions.find(m => m.value === c);
+          if (attr) {
+            const ext = {
+              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
+            };
+            colDefExt.push(ext);
+          }
+        });
+      }
+      if (sF.type === 'drag_sample') {
+        const sOpt = sValues.filter(o => o[sF.id] && o[sF.id].value && o[sF.id].value.is_new);
+        const cellParams = { sField: sF, opt, onChange: this.onDrop };
+        colDef = Object.assign({}, colDef, {
+          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
+        });
+        const addOption = {
+          colId: 'sam_option', editable: false, type: 'text', headerName: '', cellRenderer: SampOption, cellParams: { sField: sF, onChange: this.onChk }, width: '3vw'
+        };
+        if (sOpt.length > 0) colDefExt.push(addOption);
+        const addLink = {
+          colId: 'sam_link', editable: false, type: 'text', headerName: 'Short label', cellRenderer: DropLinkRenderer, cellParams: { sField: sF }, width: '5vw'
+        };
+        colDefExt.push(addLink);
+        const conf = ((sF.value || '').split(';') || []);
+        conf.forEach((c) => {
+          const attr = samOptions.find(m => m.value === c);
+          if (attr) {
+            const ext = {
+              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
+            };
+            colDefExt.push(ext);
+          }
+        });
+      }
+      columnDefs.push(colDef);
+      if (colDefExt.length > 0) columnDefs = columnDefs.concat(colDefExt);
+    });
+    const act = {
+      type: 'button',
+      headerName: '',
+      colId: opt.f_obj.field,
+      headerComponent: AddRowBtn,
+      headerParams: { addRow: this.addRow },
+      cellRenderer: DelRowBtn,
+      cellParams: { delRow: this.delRow },
+      width: 'unset',
+    };
+    columnDefs.splice(0, 0, act);
+    const dtype = `${DragDropItemTypes.GENERIC_GRID}_${opt.layer.key}_${opt.f_obj.field}`;
+    const move = {
+      type: 'dnd',
+      field: opt.f_obj.field,
+      headerName: '',
+      colId: `${opt.f_obj.field}_dnd`,
+      headerComponent: NullRowBtn,
+      cellRenderer: DnDRowBtn,
+      cellParams: { moveRow: this.moveRow, field: opt.f_obj.field, type: dtype },
+      width: 'unset',
+    };
+    columnDefs.splice(0, 0, move);
+    return columnDefs;
+  }
+
+  moveRow(source, target) {
+    const { opt } = this.props;
+    const alles = opt.f_obj.sub_values;
+    const sid = alles.findIndex(e => e.id === source);
+    const tid = alles.findIndex(e => e.id === target);
+    const temp = alles[sid];
+    alles[sid] = alles[tid];
+    alles[tid] = temp;
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  delRow(rowData) {
+    const { opt } = this.props;
+    opt.f_obj.sub_values = opt.f_obj.sub_values.filter(s => s.id !== rowData.id);
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  addRow() {
+    const { opt } = this.props;
+    const subFields = opt.f_obj.sub_fields || [];
+    const newSub = new GenericSubField();
+    subFields.map((e) => {
+      if (e.type === 'text') return Object.assign(newSub, { [e.id]: '' });
+      return Object.assign(newSub, { [e.id]: { value: '', value_system: e.value_system } });
+    });
+    opt.f_obj.sub_values = opt.f_obj.sub_values || [];
+    opt.f_obj.sub_values.push(newSub);
+    opt.onSubChange(0, 0, opt.f_obj, true);
+  }
+
+  render() {
+    const { opt } = this.props;
+    const columnDefs = this.getColumns();
+    if (opt.isSearchCriteria) return (<div>(This is a table)</div>);
+    if ((opt.f_obj.sub_fields || []).length < 1) return null;
+    return (
+      <div>
+        {ColumnHeader(columnDefs)}
+        <div>{NoRow(opt.f_obj.sub_values)}</div>
+        <div>{(opt.f_obj.sub_values || []).map(s => ColumnRow(columnDefs, s))}</div>
+      </div>
+    );
+  }
+}
+
+TableRecord.propTypes = {
+  opt: PropTypes.object.isRequired,
+};
diff --git a/app/packs/src/components/generic/TextFormula.js b/app/packs/src/components/generic/TextFormula.js
new file mode 100644
index 000000000..ec21b3299
--- /dev/null
+++ b/app/packs/src/components/generic/TextFormula.js
@@ -0,0 +1,203 @@
+/* eslint-disable react/forbid-prop-types */
+import { AgGridReact } from 'ag-grid-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import GenericSubField from '../models/GenericSubField';
+import LayerSelect from './LayerSelect';
+import FieldSelect from './FieldSelect';
+
+const AddRowBtn = ({ addRow }) => (
+  <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+);
+
+AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
+
+const DelRowBtn = ({ delRow, node }) => {
+  const { data } = node;
+  const btnClick = () => {
+    delRow(data);
+  };
+  return (<Button onClick={btnClick} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>);
+};
+
+DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
+
+export default class TextFormula extends React.Component {
+  constructor(props) {
+    super(props);
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+    this.onGridReady = this.onGridReady.bind(this);
+    this.delRow = this.delRow.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.selLayer = this.selLayer.bind(this);
+    this.selField = this.selField.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.onCellValueChanged = this.onCellValueChanged.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { field, allLayers } = this.props;
+    const sub = field.text_sub_fields || [];
+    if (this.props.allLayers !== prevProps.allLayers) {
+      const columnDefs = this.gridApi.getColumnDefs();
+      columnDefs.find(c => c.field === 'layer').cellRendererParams.allLayers = allLayers;
+      columnDefs.find(c => c.field === 'field').cellRendererParams.allLayers = allLayers;
+      this.gridApi.setColumnDefs(columnDefs);
+    }
+    this.gridApi && this.gridApi.setRowData(sub);
+  }
+
+  onGridReady(e) {
+    this.gridApi = e.api;
+    this.gridColumnApi = e.columnApi;
+    const columnDefs = [
+      {
+        rowDrag: true,
+        resizable: true,
+        headerName: 'Id',
+        field: 'id',
+        editable: false,
+        minWidth: 100,
+        width: 100,
+      },
+      {
+        headerName: 'Layer',
+        field: 'layer',
+        editable: false,
+        minWidth: 150,
+        width: 150,
+        cellRendererFramework: LayerSelect,
+        cellRendererParams: { allLayers: this.props.allLayers, selLayer: this.selLayer },
+      },
+      {
+        headerName: 'Field (type: text)',
+        field: 'field',
+        editable: false,
+        minWidth: 250,
+        cellRendererFramework: FieldSelect,
+        cellRendererParams: { allLayers: this.props.allLayers, selField: this.selField, types: ['text'], tableText: true },
+      },
+      {
+        headerName: 'Separator',
+        field: 'separator',
+        editable: true,
+        minWidth: 80,
+        width: 80,
+        onCellValueChanged: this.onCellValueChanged
+      },
+      {
+        headerName: '',
+        colId: 'actions',
+        headerComponentFramework: AddRowBtn,
+        headerComponentParams: { addRow: this.addRow },
+        cellRendererFramework: DelRowBtn,
+        cellRendererParams: { delRow: this.delRow },
+        editable: false,
+        filter: false,
+        minWidth: 48,
+        width: 48,
+        suppressSizeToFit: true,
+        pinned: 'left'
+      },
+    ];
+    this.gridApi.setColumnDefs(columnDefs);
+    this.autoSizeAll();
+  }
+
+  onCellValueChanged(params) {
+    const { oldValue, newValue } = params;
+    if (oldValue === newValue) return;
+    this.refresh();
+  }
+
+  delRow() {
+    const selectedData = this.gridApi.getSelectedRows();
+    this.gridApi.applyTransaction({ remove: selectedData });
+    this.refresh();
+  }
+
+  addRow() {
+    const { allLayers } = this.props;
+    const lys = allLayers.filter(e => (e.fields || []).filter(f => f.type === 'text').length > 0);
+    const ly = (lys.length > 0 && lys[0].key) || '';
+    const fd = ly === '' ? '' : ((allLayers.find(e => e.key === ly) || {}).fields || []).filter(e => e.type === 'text')[0].field;
+    const newSub = new GenericSubField({ layer: ly, field: fd, separator: '.' });
+    const idx = this.gridApi.getDisplayedRowCount();
+    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
+    this.refresh();
+  }
+
+  selLayer(e, node) {
+    const { data } = node;
+    if (e.target.value === data.layer) { return; }
+    data.layer = e.target.value;
+    const { allLayers } = this.props;
+    const ly = data.layer;
+    const fdf = ((allLayers.find(l => l.key === ly) || {}).fields || []).filter(l => l.type === 'text') || [];
+    const fd = (fdf.length > 0 && fdf[0].field) || '';
+    data.field = fd;
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.text_sub_fields = rows;
+    this.gridApi.setRowData(rows);
+    updSub(layerKey, field, () => {});
+  }
+
+  selField(e, node) {
+    const { data } = node;
+    if (e.target.value === data.field) { return; }
+    data.field = e.target.value;
+    this.refresh();
+  }
+
+  refresh() {
+    const { updSub, layerKey, field } = this.props;
+    const rows = [];
+    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
+    field.text_sub_fields = rows;
+    updSub(layerKey, field, () => {});
+  }
+
+  autoSizeAll() {
+    if (!this.gridApi) return;
+    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
+  }
+
+  render() {
+    const { field } = this.props;
+    const sub = field.text_sub_fields || [];
+    return (
+      <div>
+        <div style={{ fontSize: '10px' }}>
+          <b>Text-Formula: </b>
+          select the text fields which are combined together with separator
+        </div>
+        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
+          <AgGridReact
+            enableColResize
+            defaultColDef={{ suppressMovable: true }}
+            rowSelection="single"
+            onGridReady={this.onGridReady}
+            rowData={sub}
+            singleClickEdit
+            stopEditingWhenGridLosesFocus
+            rowDragManaged
+            onRowDragEnd={this.refresh}
+            domLayout="autoHeight"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+TextFormula.propTypes = {
+  layerKey: PropTypes.string.isRequired,
+  field: PropTypes.object.isRequired,
+  updSub: PropTypes.func.isRequired,
+  allLayers: PropTypes.arrayOf(PropTypes.object)
+};
+
+TextFormula.defaultProps = { allLayers: [] };
diff --git a/app/packs/src/components/generic/TypeSelect.js b/app/packs/src/components/generic/TypeSelect.js
new file mode 100644
index 000000000..4393207d7
--- /dev/null
+++ b/app/packs/src/components/generic/TypeSelect.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import GridSelect from './GridSelect';
+
+const TypeSelect = (props) => {
+  const { all, selType, node } = props;
+  const dVal = node.data.type;
+  return <GridSelect all={all} onChange={selType} node={node} dVal={dVal} />;
+};
+
+TypeSelect.propTypes = {
+  all: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selType: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default TypeSelect;
diff --git a/app/packs/src/components/generic/UConverterRenderer.js b/app/packs/src/components/generic/UConverterRenderer.js
new file mode 100644
index 000000000..7e1c3aa4c
--- /dev/null
+++ b/app/packs/src/components/generic/UConverterRenderer.js
@@ -0,0 +1,24 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { genUnit, genUnitSup } from '../../admin/generic/Utils';
+
+const UConverterRenderer = (props) => {
+  const { sField, onChange, node } = props;
+  if (sField.type !== 'system-defined') return null;
+  const { data } = node;
+  return (
+    <Button key={`ucr_${data.id}`} active onClick={() => onChange(sField, node)} bsStyle="success">
+      {genUnitSup(genUnit(sField.option_layers, data[sField.id].value_system).label) || ''}
+    </Button>
+  );
+};
+
+UConverterRenderer.propTypes = {
+  sField: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  node: PropTypes.object.isRequired
+};
+
+export default UConverterRenderer;
diff --git a/app/packs/src/components/green_chem/GreenChemistry.js b/app/packs/src/components/green_chem/GreenChemistry.js
new file mode 100644
index 000000000..8e38ea040
--- /dev/null
+++ b/app/packs/src/components/green_chem/GreenChemistry.js
@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+import Reaction from 'src/models/Reaction';
+import GreenMaterialGroup from 'src/apps/mydb/elements/details/reactions/greenChemistryTab/GreenMaterialGroup';
+import GreenMetrics from 'src/apps/mydb/elements/details/reactions/greenChemistryTab/GreenMetrics';
+
+
+export default class GreenChemistry extends Component {
+  constructor() {
+    super();
+
+    this.updateGroupData = this.updateGroupData.bind(this);
+  }
+
+  updateGroupData() {
+    const { reaction, onReactionChange } = this.props;
+    onReactionChange(reaction, { schemaChanged: false });
+  }
+
+  render() {
+    const { reaction, onReactionChange } = this.props;
+
+    const data = [
+      { segment: 'Oil refining', factor: '< 0.1' },
+      { segment: 'Bulk chemicals', factor: '< 1 - 5' },
+      { segment: 'Fine chemicals', factor: '5 - 50' },
+      { segment: 'Pharmaceuticals', factor: '25 - > 100' },
+    ];
+
+    const columnDefs = [
+      {
+        headerName: 'Industry Segment',
+        field: 'segment',
+      },
+      {
+        headerName: 'E factor (kg waste per kg product)',
+        field: 'factor',
+        width: 148,
+      },
+    ];
+
+    const defaultColDef = {
+      editable: false,
+      width: 120,
+    };
+
+    return (
+      <div className="green-chemistry">
+        <GreenMetrics reaction={reaction} />
+        <GreenMaterialGroup
+          group="starting_materials"
+          materials={reaction.starting_materials}
+          onChange={this.updateGroupData}
+        />
+        <GreenMaterialGroup
+          group="reactants"
+          materials={reaction.reactants}
+          onChange={this.updateGroupData}
+        />
+        <GreenMaterialGroup
+          group="products"
+          materials={reaction.products}
+          onChange={this.updateGroupData}
+        />
+        <GreenMaterialGroup
+          group="solvents"
+          materials={reaction.solvents}
+          onChange={this.updateGroupData}
+        />
+        <GreenMaterialGroup
+          group="purification_solvents"
+          materials={reaction.purification_solvents}
+          onChange={this.updateGroupData}
+        />
+        <div className="metrics-refs">
+          <div className="ag-theme-balham">
+            <b>E factor: </b>
+            <a href="https://doi.org/10.1039/C6GC02157C">The E Factor 25 Years on: The Rise of Green Chemistry and Sustainability. </a>
+            <i>Sheldon, Roger A.  Green Chemistry 19, Nr. 1 (3. Januar 2017): 18–43.</i>
+            <br />
+            <br />
+            <b>Atom economy (AE): </b>
+            <a href="https://doi.org/10.1126/science.1962206">The Atom Economy -- a Search for Synthetic Efficiency. </a>
+            <i>Trost, B. M. Science 254, Nr. 5037 (6. Dezember 1991): 1471–77.</i>
+            <br />
+            <br />
+            <b style={{ color: 'rgba(0, 0, 0, 0.54)' }}>
+              Atom economy has a value between 0 (bad) - 1 (very good)
+            </b>
+          </div>
+          <div className="e-factor-refs ag-theme-balham">
+            <AgGridReact
+              enableColResize
+              columnDefs={columnDefs}
+              defaultColDef={defaultColDef}
+              headerHeight={68}
+              rowData={data}
+              domLayout="autoHeight"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+GreenChemistry.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  onReactionChange: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/green_chem/GreenMaterialGroup.js b/app/packs/src/components/green_chem/GreenMaterialGroup.js
new file mode 100644
index 000000000..280a09bdf
--- /dev/null
+++ b/app/packs/src/components/green_chem/GreenMaterialGroup.js
@@ -0,0 +1,181 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { AgGridReact } from 'ag-grid-react';
+import { Checkbox } from 'react-bootstrap';
+
+import Sample from 'src/models/Sample';
+import SampleName from 'src/components/common/SampleName';
+
+function floatFormatter(params) {
+  if (isNaN(params.value)) {
+    return 0;
+  }
+  return (params.value || 0).toFixed(4);
+}
+
+function MaterialNameWithIupac({ group, node }) {
+  const material = node.data;
+  const skipIupacName = (
+    group === 'reactants' ||
+    group === 'solvents' ||
+    group === 'purification_solvents'
+  );
+
+  let materialName = '';
+  let moleculeIupacName = '';
+
+  if (skipIupacName) {
+    materialName = material.molecule_iupac_name || material.name;
+    if (group === 'solvents' || group === 'purification_solvents') {
+      materialName = material.external_label || '';
+    }
+    if (materialName === null || materialName === '') {
+      materialName = <SampleName sample={material} />;
+    }
+  } else {
+    moleculeIupacName = material.molecule_iupac_name;
+    materialName = material.title() === '' ?
+      <SampleName sample={material} /> :
+      material.title();
+  }
+
+  return (
+    <div>
+      <div>{materialName}</div>
+      <div>{moleculeIupacName}</div>
+    </div>
+  );
+}
+
+function WasteCheckbox({ node, toggleWaste }) {
+  const material = node.data;
+  return (
+    <div className="waste-chkbx">
+      <Checkbox
+        checked={material.waste || false}
+        onChange={() => toggleWaste(material)}
+      />
+    </div>
+  );
+}
+
+export default class GreenMaterialGroup extends React.Component {
+  constructor() {
+    super();
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.onCoefficientChanged = this.onCoefficientChanged.bind(this);
+    this.toggleWaste = this.toggleWaste.bind(this);
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+  }
+
+  componentDidUpdate() {
+    this.autoSizeAll();
+  }
+
+  onGridReady(params) {
+    this.api = params.api;
+  }
+
+  autoSizeAll() {
+    if (!this.api) return;
+    setTimeout(() => {
+      this.api.sizeColumnsToFit();
+      this.api.resetRowHeights();
+    }, 0);
+  }
+
+  onCoefficientChanged(params) {
+    const { materials, onChange } = this.props;
+    const material = materials[params.rowIndex];
+    material.coefficient = params.value;
+
+    onChange();
+  }
+
+  toggleWaste(material) {
+    const { materials, onChange } = this.props;
+    material.waste = !(material.waste || false);
+    this.api.refreshCells();
+    onChange();
+  }
+
+  render() {
+    const {
+      group, materials
+    } = this.props;
+    if (materials && materials.length === 0) return <span />;
+
+    const isProduct = group === 'products';
+    const contents = [];
+
+    const columnDefs = [
+      {
+        headerName: _.startCase(group),
+        width: 170,
+        cellRendererFramework: MaterialNameWithIupac,
+        cellRendererParams: { group },
+      },
+      { headerName: "Mass", field: "amount_g", valueFormatter: floatFormatter },
+      {
+        headerName: "Volume",
+        field: "amount_l",
+        valueFormatter: floatFormatter,
+        width: 86,
+      },
+      {
+        headerName: "Moles",
+        field: "amount_mol",
+        width: 76,
+        valueFormatter: floatFormatter,
+      },
+      {
+        headerName: 'Equiv.',
+        field: 'equivalent',
+        width: 76,
+        valueFormatter: floatFormatter
+      },
+      {
+        headerName: group === 'products' ? 'Waste' : 'Recyclable',
+        field: 'waste',
+        width: 104,
+        cellRendererFramework: WasteCheckbox,
+        cellRendererParams: { toggleWaste: this.toggleWaste },
+      },
+      {
+        headerName: 'Coeff',
+        field: 'coefficient',
+        width: 72,
+        editable: true,
+        cellEditor: 'agTextCellEditor',
+      },
+    ];
+
+    const defaultColDef = {
+      editable: false,
+      width: 71,
+      autoHeight: true,
+    };
+
+    return (
+      <div className="ag-theme-balham">
+        <AgGridReact
+          enableColResize
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          onGridReady={this.onGridReady}
+          rowData={materials}
+          domLayout="autoHeight"
+          onCellValueChanged={this.onCoefficientChanged}
+        />
+      </div>
+    );
+  }
+}
+
+GreenMaterialGroup.propTypes = {
+  group: PropTypes.string.isRequired,
+  materials: PropTypes.arrayOf(PropTypes.instanceOf(Sample)).isRequired,
+  onChange: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/green_chem/GreenMetrics.js b/app/packs/src/components/green_chem/GreenMetrics.js
new file mode 100644
index 000000000..7b1007b98
--- /dev/null
+++ b/app/packs/src/components/green_chem/GreenMetrics.js
@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AgGridReact } from 'ag-grid-react';
+
+import Reaction from 'src/models/Reaction';
+
+function getWaste(samples) {
+  return samples.filter(s => s.waste);
+}
+
+function getNonWaste(samples) {
+  return (samples || []).filter(s => s == null || !s.waste);
+}
+
+function sumReducer(acc, cur) {
+  return acc + cur;
+}
+
+function floatFormatter(params) {
+  const { value } = params;
+  return value === '' ? value : value.toFixed(2);
+}
+
+export default class GreenMetrics extends React.Component {
+  constructor() {
+    super();
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.autoSizeAll = this.autoSizeAll.bind(this);
+  }
+
+  componentDidUpdate() {
+    this.autoSizeAll();
+  }
+
+  onGridReady(params) {
+    this.api = params.api;
+  }
+
+  autoSizeAll() {
+    if (!this.api) return;
+    setTimeout(() => {
+      this.api.sizeColumnsToFit();
+    }, 0);
+  }
+
+  render() {
+    const { reaction } = this.props;
+    const startsAmount = reaction.starting_materials
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const selectedStartsAmount = getNonWaste(reaction.starting_materials)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+
+    const reactantsAmount = reaction.reactants
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const selectedReactantsAmount = getNonWaste(reaction.reactants)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+
+    const solventsAmount = reaction.solvents
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const selectedSolventsAmount = getNonWaste(reaction.solvents)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+
+    const pSolventsAmount = (reaction.purification_solvents || [])
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const selectedPSolventsAmount = getNonWaste(reaction.purification_solvents)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+
+    const prodsAmount = (reaction.products || [])
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const selectedProductsAmount = getNonWaste(reaction.products)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+    const wastedProductsAmount = getWaste(reaction.products)
+      .map(x => x.amount_g).reduce(sumReducer, 0);
+
+    const sef = (startsAmount + reactantsAmount + solventsAmount - prodsAmount) / prodsAmount;
+    const cef = (
+      startsAmount + reactantsAmount + solventsAmount +
+      pSolventsAmount - prodsAmount
+    ) / prodsAmount;
+    const cuef = (
+      selectedStartsAmount + selectedReactantsAmount + selectedSolventsAmount +
+      selectedPSolventsAmount - selectedProductsAmount - wastedProductsAmount
+    ) / selectedProductsAmount;
+
+    const aesm = reaction.starting_materials
+      .map(x => x.molecule_molecular_weight * x.coefficient)
+      .reduce(sumReducer, 0);
+    const aep = reaction.products
+      .map(x => x.molecule_molecular_weight * x.coefficient)
+      .reduce(sumReducer, 0);
+    const caep = getNonWaste(reaction.products)
+      .map(x => x.molecule_molecular_weight * x.coefficient)
+      .reduce(sumReducer, 0);
+    const aer = reaction.reactants
+      .map(x => x.equivalent < 0.3 ? 0 : (x.molecule_molecular_weight * x.coefficient))
+      .reduce(sumReducer, 0);
+    const caer = getNonWaste(reaction.reactants)
+      .map(x => x.equivalent < 0.3 ? 0 : (x.molecule_molecular_weight * x.coefficient))
+      .reduce(sumReducer, 0);
+    const ae = (aep / (aesm + aer));
+    const cae = (caep / (aesm + caer));
+
+    const data = [{
+      sef: sef || '',
+      cef: cef || '',
+      cuef: cuef || '',
+      ae: ae,
+      cae: cae,
+    }];
+
+    const columnDefs = [
+      {
+        headerName: 'Simple E factor (sEF)',
+        field: 'sef',
+      },
+      {
+        headerName: 'Complete E factor (cEF)',
+        field: 'cef',
+      },
+      {
+        headerName: 'Custom E factor',
+        field: 'cuef',
+      },
+      {
+        headerName: 'Atom economy (AE)',
+        field: 'ae',
+      },
+      {
+        headerName: 'Custom Atom economy',
+        field: 'cae',
+      },
+    ];
+
+    const defaultColDef = {
+      editable: false,
+      valueFormatter: floatFormatter,
+    };
+
+    return (
+      <div className="green-metrics ag-theme-balham">
+        <AgGridReact
+          enableColResize
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          rowData={data}
+          onGridReady={this.onGridReady}
+          headerHeight={68}
+          domLayout="autoHeight"
+        />
+      </div>
+    );
+  }
+}
+
+GreenMetrics.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired
+};
diff --git a/app/packs/src/components/inbox/AttachmentContainer.js b/app/packs/src/components/inbox/AttachmentContainer.js
new file mode 100644
index 000000000..80f3a76ad
--- /dev/null
+++ b/app/packs/src/components/inbox/AttachmentContainer.js
@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { DragSource } from 'react-dnd';
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import InboxActions from '../actions/InboxActions';
+import DragDropItemTypes from '../DragDropItemTypes';
+import Utils from '../utils/Functions';
+
+import MoveToAnalysisButton from './MoveToAnalysisButton';
+
+const dataSource = {
+  beginDrag(props) {
+    return props;
+  }
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+});
+
+const handleAttachmentDownload = attachment => Utils.downloadFile({
+  contents: `/api/v1/attachments/${attachment && attachment.id}`, name: attachment && attachment.filename
+});
+
+class AttachmentContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deletingTooltip: false,
+    };
+  }
+
+
+  toggleTooltip() {
+    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
+  }
+
+  render() {
+    const { connectDragSource, sourceType, attachment, largerInbox } = this.props;
+    if (sourceType !== DragDropItemTypes.DATA && sourceType !== DragDropItemTypes.UNLINKED_DATA) {
+      return null;
+    }
+
+    const textStyle = {
+      display: 'block',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'clip',
+      maxWidth: '100%',
+      cursor: 'move'
+    };
+
+    if (largerInbox === true) {
+      textStyle.marginTop = '6px';
+      textStyle.marginBottom = '6px';
+    }
+
+    const trash = (
+      <span>
+        <i className="fa fa-trash-o" onClick={() => this.toggleTooltip()} style={{ cursor: "pointer" }}>&nbsp;</i>
+        {this.state.deletingTooltip ? (
+          <Tooltip placement="bottom" className="in" id="tooltip-bottom">
+            Delete this attachment?
+            <ButtonGroup>
+              <Button
+                bsStyle="danger"
+                bsSize="xsmall"
+                onClick={() => InboxActions.deleteAttachment(attachment)}
+              >
+                Yes
+              </Button>
+              <Button
+                bsStyle="warning"
+                bsSize="xsmall"
+                onClick={() => this.toggleTooltip()}
+              >
+                No
+              </Button>
+            </ButtonGroup>
+          </Tooltip>
+        ) : null}
+      </span>
+    );
+
+    const filenameTooltip = (
+      <Tooltip
+        id="filename_tooltip"
+        className="tooltip"
+        style={{ maxWidth: '100%' }}
+      >
+        <p>
+          {attachment.filename}
+        </p>
+      </Tooltip>);
+
+    return connectDragSource(
+      <div style={textStyle}>
+        &nbsp;&nbsp;{trash}&nbsp;
+        <i className="fa fa-download" onClick={() => handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }} />
+        &nbsp;&nbsp;
+        {largerInbox ? (
+          <MoveToAnalysisButton
+            attachment={attachment}
+            largerInbox={largerInbox}
+            sourceType={sourceType}
+          />
+          ) : null }
+        <OverlayTrigger placement="top" overlay={filenameTooltip} >
+          <span
+            className="text-info fa fa-arrows"
+            style={{ maxWidth: '100%' }}
+          >
+            &nbsp; {attachment.filename}
+          </span>
+        </OverlayTrigger>
+        <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
+          {moment(attachment.created_at).format('DD.MM.YYYY HH:mm') }
+        </span>
+      </div>,
+      { dropEffect: 'move' }
+    );
+  }
+}
+
+export default DragSource(
+  props => props.sourceType,
+  dataSource,
+  collectSource
+)(AttachmentContainer);
+
+AttachmentContainer.propTypes = {
+  attachment: PropTypes.object.isRequired,
+  connectDragSource: PropTypes.func.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  largerInbox: PropTypes.bool,
+  sourceType: PropTypes.string,
+};
+
+AttachmentContainer.defaultProps = {
+  largerInbox: false,
+  sourceType: ''
+};
diff --git a/app/packs/src/components/inbox/DatasetContainer.js b/app/packs/src/components/inbox/DatasetContainer.js
new file mode 100644
index 000000000..1c8be3e74
--- /dev/null
+++ b/app/packs/src/components/inbox/DatasetContainer.js
@@ -0,0 +1,151 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { DragSource } from 'react-dnd';
+import { Button, ButtonGroup, Tooltip } from 'react-bootstrap';
+import AttachmentContainer from './AttachmentContainer';
+import DragDropItemTypes from '../DragDropItemTypes';
+import InboxActions from '../actions/InboxActions';
+
+const dataSource = {
+  beginDrag(props) {
+    return props;
+  }
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+});
+
+class DatasetContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      deletingTooltip: false,
+    }
+  }
+
+  attachmentCount() {
+    return (this.props.dataset && this.props.dataset.attachments &&
+     this.props.dataset.attachments.length) || 0;
+  }
+
+  deleteDataset() {
+    if (this.attachmentCount() === 0) {
+      InboxActions.deleteContainerLinkUnselected(this.props.dataset);
+      InboxActions.deleteContainer(this.props.dataset);
+    } else {
+      this.toggleTooltip();
+    }
+  }
+
+  confirmDeleteDataset() {
+    InboxActions.deleteContainerLinkUnselected(this.props.dataset);
+    InboxActions.deleteContainer(this.props.dataset);
+    this.toggleTooltip();
+  }
+
+  confirmDeleteAttachments() {
+    this.toggleTooltip();
+  }
+
+  toggleTooltip() {
+    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
+  }
+
+  render() {
+    const { connectDragSource, sourceType, dataset, largerInbox } = this.props;
+
+    if (sourceType === DragDropItemTypes.DATASET) {
+      const { visible, deletingTooltip } = this.state;
+      const attachments = dataset.attachments.map(attachment => (
+        <AttachmentContainer
+          key={`attach_${attachment.id}`}
+          sourceType={DragDropItemTypes.DATA}
+          attachment={attachment}
+          largerInbox={largerInbox}
+        />
+      ));
+      const attCount = this.attachmentCount();
+      const textStyle = {
+        display: 'block',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'clip',
+        maxWidth: '100%',
+        cursor: 'move'
+      };
+
+      if (largerInbox === true) {
+        textStyle.marginTop = '6px';
+        textStyle.marginBottom = '6px';
+      }
+
+      const trash = this.props.cache.length === this.props.cache.length // Set it as always show
+        ? (
+          <span>
+            <i className="fa fa-trash-o" onClick={() => this.deleteDataset()} style={{ cursor: "pointer" }}>&nbsp;</i>
+            {deletingTooltip ? (
+              <Tooltip placement="bottom" className="in" id="tooltip-bottom">
+                Delete {attCount} attachment{attCount > 1 ? 's' : null }?
+                <ButtonGroup>
+                  <Button
+                    bsStyle="danger"
+                    bsSize="xsmall"
+                    onClick={() => this.confirmDeleteDataset()}
+                  >
+                    Yes
+                  </Button>
+                  <Button
+                    bsStyle="warning"
+                    bsSize="xsmall"
+                    onClick={() => this.toggleTooltip()}
+                  >
+                    No
+                  </Button>
+                </ButtonGroup>
+              </Tooltip>
+            ) : null}
+          </span>
+        ) : null;
+      return connectDragSource(
+        <div>
+          <div style={textStyle}>
+            &nbsp;{trash}&nbsp;
+            <i
+              className={`fa fa-folder${visible ? '-open' : ''}`}
+              onClick={() => this.setState(prevState => ({ ...prevState, visible: !visible }))}
+              style={{ cursor: 'pointer' }}
+            >&nbsp;&nbsp;
+              <span className="text-info fa fa-arrows">
+                &nbsp; {dataset.name}
+              </span>
+            </i>
+            <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
+              {moment(dataset.created_at).format('DD.MM.YYYY HH:mm') }
+            </span>
+          </div>
+          <div>{visible ? attachments : null}</div>
+        </div>,
+        { dropEffect: 'move' }
+      );
+    }
+
+    return null;
+  }
+}
+
+export default DragSource(props => props.sourceType, dataSource, collectSource)(DatasetContainer);
+
+DatasetContainer.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  sourceType: PropTypes.string.isRequired,
+  largerInbox: PropTypes.bool
+};
+
+DatasetContainer.defaultProps = {
+  largerInbox: false
+};
diff --git a/app/packs/src/components/inbox/DeviceBox.js b/app/packs/src/components/inbox/DeviceBox.js
new file mode 100644
index 000000000..50ed34fbf
--- /dev/null
+++ b/app/packs/src/components/inbox/DeviceBox.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DatasetContainer from './DatasetContainer';
+import DragDropItemTypes from '../DragDropItemTypes';
+import InboxActions from '../actions/InboxActions';
+import InboxStore from '../stores/InboxStore';
+
+export default class DeviceBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false
+    };
+  }
+
+  deleteDeviceBox(deviceBox) {
+    InboxActions.deleteContainer(deviceBox);
+  }
+
+  render() {
+    const { device_box, largerInbox } = this.props;
+    const { visible } = this.state;
+    const cache = InboxStore.getState().cache;
+
+    device_box.children.sort((a, b) => {
+      if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
+    });
+
+    const datasets = device_box.children.map((dataset) => {
+      return (
+        <DatasetContainer
+          key={`dataset_${dataset.id}`}
+          sourceType={DragDropItemTypes.DATASET}
+          dataset={dataset}
+          cache={cache}
+          largerInbox={largerInbox}
+        />
+      );
+    });
+
+    const textStyle = {
+      display: 'block',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%',
+      cursor: 'move'
+    };
+
+    return (
+      <div className="tree-view">
+        <div className="title" style={textStyle}>
+          {datasets.length === 0
+            ? (
+              <i
+                className="fa fa-trash-o"
+                onClick={() => this.deleteDeviceBox(device_box)}
+                style={{ cursor: 'pointer' }}
+              >&nbsp;&nbsp;
+              </i>
+            ) : null
+          }
+          <i
+            className={`fa fa-folder${visible ? '-open' : ''}`}
+            aria-hidden="true"
+            onClick={() => this.setState({ visible: !visible })}
+          > {device_box.name}
+          </i>
+        </div>
+        <div>{visible ? datasets : null}</div>
+      </div>
+    );
+  }
+}
+
+DeviceBox.propTypes = {
+  device_box: PropTypes.object.isRequired,
+  largerInbox: PropTypes.bool
+};
+
+DeviceBox.defaultProps = {
+  largerInbox: false
+};
diff --git a/app/packs/src/components/inbox/InboxModal.js b/app/packs/src/components/inbox/InboxModal.js
new file mode 100644
index 000000000..a43168011
--- /dev/null
+++ b/app/packs/src/components/inbox/InboxModal.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import Draggable from 'react-draggable';
+import { Badge, Button, Panel, Glyphicon } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import InboxStore from '../stores/InboxStore';
+import InboxActions from '../actions/InboxActions';
+import LoadingActions from '../actions/LoadingActions';
+
+import DeviceBox from '../inbox/DeviceBox';
+import UnsortedBox from '../inbox/UnsortedBox';
+
+import Xdiv from '../extra/CollectionTreeXdiv';
+
+export default class InboxModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const inboxState = InboxStore.getState();
+
+    this.state = {
+      inbox: inboxState.inbox,
+      inboxVisible: false,
+      numberOfAttachments: inboxState.numberOfAttachments,
+      visible: inboxState.inboxModalVisible
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onClickInbox = this.onClickInbox.bind(this);
+  }
+
+  componentDidMount() {
+    InboxStore.listen(this.onChange);
+    InboxActions.fetchInboxCount();
+  }
+
+  componentWillUnmount() {
+    InboxStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(state);
+    this.setState({ visible: state.inboxModalVisible });
+  }
+
+  onClickInbox() {
+    const { inboxVisible, inbox } = this.state;
+    this.setState({ inboxVisible: !inboxVisible });
+    if (!inbox.children) {
+      LoadingActions.start();
+      InboxActions.fetchInbox();
+    }
+  }
+
+  refreshInbox() {
+    LoadingActions.start();
+    InboxActions.fetchInbox();
+  }
+
+  lockedSubtrees() {
+    const roots = this.state.lockedRoots;
+
+    return this.subtrees(roots, null, false);
+  }
+
+  inboxSubtrees() {
+    const { inbox } = this.state;
+
+    let boxes = '';
+    if (inbox.children) {
+      inbox.children.sort((a, b) => {
+        if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
+      });
+      boxes = inbox.children.map(deviceBox => (
+        <DeviceBox key={`box_${deviceBox.id}`} device_box={deviceBox} largerInbox />
+      ));
+    }
+
+    return (
+      <div className="tree-view">
+        {boxes}
+        {inbox.unlinked_attachments
+          ? <UnsortedBox key="unsorted_box" unsorted_box={inbox.unlinked_attachments} largerInbox />
+          : ''
+        }
+      </div>
+    );
+  }
+
+  render() {
+    const { showCollectionTree } = this.props;
+    const { visible, inboxVisible } = this.state;
+
+    const extraDiv = [];
+    for (let j = 0; j < Xdiv.count; j += 1) {
+      const NoName = Xdiv[`Xdiv${j}`];
+      extraDiv.push(<NoName key={`Xdiv${j}`} />);
+    }
+
+    const panelClass = showCollectionTree ? 'small-col col-md-6' : 'small-col col-md-5';
+    const inboxDisplay = inboxVisible ? '' : 'none';
+
+    if (visible) {
+      return (
+        <Draggable
+          handle=".handle"
+          bounds="body"
+        >
+          <div
+            className={panelClass}
+            style={{ zIndex: 10, position: 'absolute', top: '70px', left: '10px' }}
+          >
+            <Panel bsStyle="primary" className="eln-panel-detail research-plan-details cursor">
+              <Panel.Heading className="cursor handle">
+                <i className="fa fa-inbox" onClick={() => this.onClickInbox()}> &nbsp; Inbox &nbsp;</i>
+                {
+                  this.state.numberOfAttachments > 0 ? <Badge> {this.state.numberOfAttachments} </Badge> : ''
+                }
+                <Button
+                  bsStyle="danger"
+                  bsSize="xsmall"
+                  className="button-right"
+                  onClick={InboxActions.toggleInboxModal}
+                >
+                  <i className="fa fa-times" />
+                </Button>
+                <Button
+                  bsStyle="success"
+                  bsSize="xsmall"
+                  className="button-right"
+                  onClick={() => this.refreshInbox()}
+                >
+                  <Glyphicon bsSize="small" glyph="refresh" />
+                </Button>
+              </Panel.Heading>
+              <Panel.Body>
+                <div>
+                  <div className="tree-view">
+                    <div className="title" style={{ backgroundColor: 'white', display: inboxVisible ? 'none' : '' }}>
+                      <i className="fa fa-inbox" onClick={() => this.onClickInbox()}> &nbsp; Fetch Inbox &nbsp;</i>
+                    </div>
+
+                  </div>
+                  <div className="tree-wrapper" style={{ display: inboxDisplay }}>
+                    { this.inboxSubtrees() }
+                  </div>
+                </div>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Draggable>
+
+      );
+    }
+    return null;
+  }
+}
+
+InboxModal.propTypes = {
+  showCollectionTree: PropTypes.bool.isRequired
+};
diff --git a/app/packs/src/components/inbox/MoveToAnalysisButton.js b/app/packs/src/components/inbox/MoveToAnalysisButton.js
new file mode 100644
index 000000000..b60f53fed
--- /dev/null
+++ b/app/packs/src/components/inbox/MoveToAnalysisButton.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip } from 'react-bootstrap';
+import InboxFetcher from '../fetchers/InboxFetcher';
+import InboxActions from '../actions/InboxActions';
+import DragDropItemTypes from '../DragDropItemTypes';
+
+export default class MoveToAnalysisButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTooltip: false,
+      loading: false,
+      matchingAnalyses: []
+    };
+  }
+
+  fetchMatchingSamples() {
+    this.setState({ loading: true });
+    const { attachment } = this.props;
+
+    InboxFetcher.fetchMatchingSamples(attachment.filename)
+      .then((result) => {
+        this.setState({ matchingAnalyses: result.samples, loading: false });
+      }).catch((errorMessage) => {
+        this.setState({ loading: false });
+        console.log(errorMessage);
+      });
+  }
+
+  toggleTooltip() {
+    const { showTooltip } = this.state;
+    if (showTooltip === false && this.matchingAnalysesCount() === 0) {
+      this.fetchMatchingSamples();
+    }
+
+    this.setState(prevState => ({ ...prevState, showTooltip: !prevState.showTooltip }));
+  }
+
+  matchingAnalysesCount() {
+    return (this.state.matchingAnalyses && this.state.matchingAnalyses.length) || 0;
+  }
+
+  removeAttachment() {
+    const { attachment, sourceType } = this.props;
+
+    switch (sourceType) {
+      default:
+        return false;
+      case DragDropItemTypes.DATA:
+        InboxActions.removeAttachmentFromList(attachment);
+        break;
+      case DragDropItemTypes.UNLINKED_DATA:
+        InboxActions.removeUnlinkedAttachmentFromList(attachment);
+        break;
+    }
+
+    return true;
+  }
+
+
+  moveToAnalysis(sampleId, attachmentId) {
+    InboxFetcher.assignToAnalysis(sampleId, attachmentId)
+      .then(() => {
+        this.removeAttachment();
+      }).catch((errorMessage) => {
+        this.setState({ loading: false });
+        console.log(errorMessage);
+      });
+    this.toggleTooltip();
+  }
+
+  renderAnalysesButtons() {
+    const { loading, matchingAnalyses } = this.state;
+    const { attachment } = this.props;
+
+    if (this.matchingAnalysesCount() === 0) {
+      if (loading === true) {
+        return (<div><i className="fa fa-refresh fa-spin" />&nbsp;loading...<br /></div>);
+      }
+      return (<div>No matching Samples found.<br /></div>);
+    }
+
+    return (
+      <div>
+        Move to Sample:<br />
+        { matchingAnalyses.map(sample => (
+          this.renderMoveButton(attachment, sample)
+          )) }
+      </div>
+    );
+  }
+
+  renderMoveButton(attachment, sample) {
+    return (
+      <div align="left" key={`btn_${sample.id}`}>
+        <Button
+          bsStyle="success"
+          bsSize="small"
+          onClick={() => this.moveToAnalysis(sample.id, attachment.id)}
+        >
+          <i className="fa fa-arrow-circle-right" aria-hidden="true" />&nbsp;
+          {sample.short_label} {sample.name} {sample.type}
+        </Button>
+        <br />
+      </div>
+    );
+  }
+
+  render() {
+    const { showTooltip } = this.state;
+
+    const abortButton = (
+      <div align="right">
+        <Button
+          bsStyle="warning"
+          bsSize="small"
+          onClick={() => this.toggleTooltip()}
+        >
+          <i className="fa fa-times-circle" aria-hidden="true" />&nbsp;
+          Abort
+        </Button>
+      </div>
+    );
+
+    return (
+      <span>
+        <i className="icon-sample" onClick={() => this.toggleTooltip()} style={{ cursor: "pointer" }}>&nbsp;</i>
+        {showTooltip ? (
+          <Tooltip placement="bottom" className="in" id="tooltip-bottom">
+            {this.renderAnalysesButtons()}
+            {abortButton}
+          </Tooltip>
+        ) : null}
+      </span>
+    );
+  }
+}
+
+MoveToAnalysisButton.propTypes = {
+  attachment: PropTypes.object.isRequired,
+  sourceType: PropTypes.string
+};
+
+MoveToAnalysisButton.defaultProps = {
+  sourceType: ''
+};
diff --git a/app/packs/src/components/inbox/UnsortedBox.js b/app/packs/src/components/inbox/UnsortedBox.js
new file mode 100644
index 000000000..6ffc5eb51
--- /dev/null
+++ b/app/packs/src/components/inbox/UnsortedBox.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+import AttachmentContainer from './AttachmentContainer';
+import DragDropItemTypes from '../DragDropItemTypes';
+
+import Container from '../models/Container';
+import UnsortedDatasetModal from './UnsortedDatasetModal';
+
+export default class UnsortedBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      modal: {
+        show: false,
+        datasetContainer: null
+      }
+    };
+  }
+
+  handleFileModalOpen(datasetContainer) {
+    const { modal } = this.state;
+    modal.datasetContainer = datasetContainer;
+    modal.show = true;
+    this.setState({ modal });
+  }
+
+  handleFileModalHide() {
+    const { modal } = this.state;
+    modal.datasetContainer = null;
+    modal.show = false;
+    this.setState({ modal });
+    document.body.className = document.body.className.replace('modal-open', '');
+  }
+
+  handleUploadButton() {
+    const datasetContainer = Container.buildEmpty();
+    datasetContainer.container_type = 'dataset';
+    this.handleFileModalOpen(datasetContainer);
+  }
+
+  render() {
+    const { unsorted_box, largerInbox } = this.props;
+    const { visible, modal } = this.state;
+
+    const attachments = visible ? unsorted_box.map((attachment) => {
+      return (
+        <AttachmentContainer
+          key={`attach_${attachment.id}`}
+          sourceType={DragDropItemTypes.UNLINKED_DATA}
+          attachment={attachment}
+          largerInbox={largerInbox}
+        />
+      );
+    })
+      :
+    <div />;
+
+    const folderClass = `fa fa-folder${visible ? '-open' : ''}`;
+
+    const uploadModal = (
+      <UnsortedDatasetModal
+        onHide={() => this.handleFileModalHide()}
+        show={modal.show}
+        datasetContainer={modal.datasetContainer}
+      />
+    );
+
+    const uploadButton = (
+      <Button style={{ position: 'absolute', right: 0 }} bsSize="xsmall" onClick={() => this.handleUploadButton()}>
+        <i className="fa fa-upload" aria-hidden="true" />
+      </Button>
+    );
+
+    return (
+      <div className="tree-view">
+        <div className="title">
+          <i
+            className={folderClass}
+            aria-hidden="true"
+            onClick={() => this.setState({ visible: !visible })}
+          > Unsorted
+          </i>
+          {' '}
+          {uploadButton}
+        </div>
+        <div> {attachments} </div>
+        {uploadModal}
+      </div>
+    );
+  }
+}
+
+UnsortedBox.propTypes = {
+  unsorted_box: PropTypes.array.isRequired,
+  largerInbox: PropTypes.bool
+};
+
+UnsortedBox.defaultProps = {
+  largerInbox: false
+};
diff --git a/app/packs/src/components/inbox/UnsortedDataset.js b/app/packs/src/components/inbox/UnsortedDataset.js
new file mode 100644
index 000000000..bdfadca67
--- /dev/null
+++ b/app/packs/src/components/inbox/UnsortedDataset.js
@@ -0,0 +1,191 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Table, ListGroup, ListGroupItem, Button, ButtonToolbar } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import Utils from 'src/utilities/Functions';
+
+import InboxActions from 'src/stores/alt/actions/InboxActions';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+import Attachment from 'src/models/Attachment';
+import Container from 'src/models/Container';
+import InboxStore from 'src/stores/alt/stores/InboxStore';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+
+export default class UnsortedDataset extends React.Component {
+  constructor(props) {
+    super();
+    const datasetContainer = Object.assign({}, props.datasetContainer);
+    this.state = {
+      datasetContainer
+    };
+  }
+
+  handleFileDrop(files) {
+    const { datasetContainer } = this.state;
+
+    const attachments = files.map(f => Attachment.fromFile(f));
+    const firstAttach = datasetContainer.attachments.length === 0;
+    datasetContainer.attachments = datasetContainer.attachments.concat(attachments);
+
+    if (firstAttach) {
+      const attachmentList = datasetContainer.attachments;
+      let attachName = attachmentList[attachmentList.length - 1].filename;
+      const splitted = attachName.split('.');
+      if (splitted.length > 1) {
+        splitted.splice(-1, 1);
+        attachName = splitted.join('.');
+      }
+      datasetContainer.name = attachName;
+    }
+
+    this.setState({ datasetContainer });
+  }
+
+  handleAttachmentDownload(attachment) {
+    Utils.downloadFile({ contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename });
+  }
+
+  handleAttachmentRemove(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+
+    datasetContainer.attachments[index].is_deleted = true;
+    this.setState({ datasetContainer });
+  }
+
+  handleUndo(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+
+    datasetContainer.attachments[index].is_deleted = false;
+    this.setState({ datasetContainer });
+  }
+
+  handleSave() {
+    const { datasetContainer } = this.state;
+    const { onModalHide } = this.props;
+    LoadingActions.start();
+    return AttachmentFetcher.uploadToInbox(datasetContainer.attachments
+      .filter(f => f.is_new && !f.is_deleted))()
+      .then(() => { onModalHide(); InboxActions.fetchInboxUnsorted(); });
+  }
+
+  listGroupItem(attachment) {
+    if (attachment.is_deleted) {
+      return (
+        <Table className="borderless">
+          <tbody>
+            <tr>
+              <td>
+                <strike>{attachment.filename}</strike>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Button
+                  bsSize="xsmall"
+                  bsStyle="danger"
+                  onClick={() => this.handleUndo(attachment)}
+                >
+                  <i className="fa fa-undo" />
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+      );
+    }
+
+    return (
+      <Table className="borderless">
+        <tbody>
+          <tr>
+            <td>
+              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {this.removeAttachmentButton(attachment)} &nbsp;
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+  }
+
+  attachments() {
+    const { datasetContainer } = this.state;
+    if (datasetContainer.attachments && datasetContainer.attachments.length > 0) {
+      return (
+        <ListGroup>
+          {datasetContainer.attachments.map((attachment) => {
+            return (
+              <ListGroupItem key={attachment.id}>
+                {this.listGroupItem(attachment)}
+              </ListGroupItem>
+            );
+          })}
+        </ListGroup>
+      );
+    }
+    return (
+      <div />
+    );
+  }
+
+  removeAttachmentButton(attachment) {
+    return (
+      <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove(attachment)}>
+        <i className="fa fa-trash-o" />
+      </Button>
+    );
+  }
+
+  dropzone() {
+    return (
+      <Dropzone
+        onDrop={files => this.handleFileDrop(files)}
+        style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
+      >
+        <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
+          Drop Files, or Click to Select.
+        </div>
+      </Dropzone>
+    );
+  }
+
+  render() {
+    const { onModalHide } = this.props;
+
+    return (
+      <Row>
+        <Col md={12}>
+          {this.attachments()}
+          {this.dropzone()}
+          <br />
+        </Col>
+        <Col md={12}>
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={() => onModalHide()}>Close</Button>
+            <Button
+              bsStyle="warning"
+              onClick={() => this.handleSave()}
+            >
+              Save
+            </Button>
+          </ButtonToolbar>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+UnsortedDataset.propTypes = {
+  onModalHide: PropTypes.func.isRequired,
+  datasetContainer: PropTypes.instanceOf(Container),
+};
+
+UnsortedDataset.defaultProps = {
+  datasetContainer: null,
+};
diff --git a/app/packs/src/components/inbox/UnsortedDatasetModal.js b/app/packs/src/components/inbox/UnsortedDatasetModal.js
new file mode 100644
index 000000000..c84739595
--- /dev/null
+++ b/app/packs/src/components/inbox/UnsortedDatasetModal.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import UnsortedDataset from 'src/apps/mydb/inbox/UnsortedDataset';
+import Container from 'src/models/Container';
+
+export default class UnsortedDatasetModal extends React.Component {
+  render() {
+    const { show, datasetContainer, onHide } = this.props;
+    if (show) {
+      return (
+        <div>
+          <Modal animation show={show} bsSize="large" onHide={() => onHide()}>
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Upload files to Inbox
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <UnsortedDataset
+                datasetContainer={datasetContainer}
+                onModalHide={() => onHide()}
+              />
+            </Modal.Body>
+          </Modal>
+        </div>
+      )
+    } else {
+      return <div></div>
+    }
+  }
+}
+
+UnsortedDatasetModal.propTypes = {
+  onHide: PropTypes.func.isRequired,
+  datasetContainer: PropTypes.instanceOf(Container),
+  show: PropTypes.bool.isRequired,
+};
+UnsortedDatasetModal.defaultProps = {
+  datasetContainer: null,
+};
diff --git a/app/packs/src/components/managing_actions/ChildOverlay.js b/app/packs/src/components/managing_actions/ChildOverlay.js
new file mode 100644
index 000000000..4020ec3c5
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ChildOverlay.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ListGroup } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const ChildOverlay = ({ dataList, overlayAttributes }) => {
+  return (
+    <div {...overlayAttributes}>
+      <ListGroup>
+        {dataList}
+      </ListGroup>
+    </div>
+  );
+};
+
+ChildOverlay.propTypes = {
+  dataList: PropTypes.object,
+  overlayAttributes: PropTypes.object
+};
+
+export default ChildOverlay;
diff --git a/app/packs/src/components/managing_actions/ManagingActionButtons.js b/app/packs/src/components/managing_actions/ManagingActionButtons.js
new file mode 100644
index 000000000..c53a378a1
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingActionButtons.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { DropdownButton, MenuItem, Button } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const MoveOrAssignButton = ({ assignDisabled, moveDisabled, onClick, customClass }) => (
+  <DropdownButton
+    bsStyle={customClass ? null : 'success'}
+    className={customClass}
+    title={<i className="fa fa-arrow-right" />}
+    id="move-or-assign-btn"
+    disabled={assignDisabled && moveDisabled}
+  >
+    <MenuItem onSelect={() => onClick('move')} disabled={moveDisabled}>
+      Move to Collection
+    </MenuItem>
+    <MenuItem onSelect={() => onClick('assign')} disabled={assignDisabled}>
+      Assign to Collection
+    </MenuItem>
+  </DropdownButton>
+);
+
+MoveOrAssignButton.propTypes = {
+  assignDisabled: PropTypes.bool,
+  moveDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  customClass: PropTypes.string,
+};
+
+MoveOrAssignButton.defaultProps = {
+  assignDisabled: false,
+  moveDisabled: false,
+  customClass: null,
+  onClick: () => null,
+};
+
+const RemoveOrDeleteButton = ({ removeDisabled, deleteDisabled, onClick, customClass }) => (
+  <DropdownButton
+    bsStyle={customClass ? null : 'warning'}
+    className={customClass}
+    title={<i className="fa fa-minus-square" />}
+    id="remove-or-delete-btn"
+    disabled={removeDisabled && deleteDisabled}
+  >
+    <MenuItem onSelect={() => onClick('remove')} disabled={removeDisabled}>
+      Remove from current Collection
+    </MenuItem>
+    <MenuItem onSelect={() => onClick('delete')} disabled={deleteDisabled}>
+      Remove from all Collections
+    </MenuItem>
+  </DropdownButton>
+);
+
+RemoveOrDeleteButton.propTypes = {
+  removeDisabled: PropTypes.bool,
+  deleteDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  customClass: PropTypes.string,
+};
+
+RemoveOrDeleteButton.defaultProps = {
+  deleteDisabled: false,
+  removeDisabled: false,
+  customClass: null,
+  onClick: () => null,
+};
+
+const ShareButton = ({ isDisabled, customClass, onClick }) => (
+  <Button
+    bsStyle={customClass ? null : 'info'}
+    id="share-btn"
+    disabled={isDisabled}
+    onClick={() => onClick('share')}
+    className={customClass}
+  >
+    <i className="fa fa-share-alt" />
+  </Button>
+);
+
+ShareButton.propTypes = {
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  customClass: PropTypes.string,
+};
+
+ShareButton.defaultProps = {
+  isDisabled: false,
+  customClass: null,
+  onClick: () => null,
+};
+
+export { MoveOrAssignButton, ShareButton, RemoveOrDeleteButton };
diff --git a/app/packs/src/components/managing_actions/ManagingActions.js b/app/packs/src/components/managing_actions/ManagingActions.js
new file mode 100644
index 000000000..00368cf00
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingActions.js
@@ -0,0 +1,249 @@
+import React from 'react';
+import { ButtonGroup } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { List } from 'immutable';
+import { ShareButton, MoveOrAssignButton, RemoveOrDeleteButton } from 'src/components/managingActions/ManagingActionButtons';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import PermissionStore from 'src/stores/alt/stores/PermissionStore';
+import PermissionActions from 'src/stores/alt/actions/PermissionActions';
+import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
+import ManagingModalCollectionActions from 'src/components/managingActions/ManagingModalCollectionActions';
+import ManagingModalDelete from 'src/components/managingActions/ManagingModalDelete';
+import ManagingModalRemove from 'src/components/managingActions/ManagingModalRemove';
+import ManagingModalTopSecret from 'src/components/managingActions/ManagingModalTopSecret';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import { elementNames } from 'src/apps/generic/Utils';
+
+const upState = (state) => {
+  const { sample, reaction, screen, wellplate, research_plan } = state;
+  const stateObj = {
+    sample: {
+      checkedAll: sample ? sample.checkedAll : false,
+      checkedIds: sample ? sample.checkedIds : List(),
+      uncheckedIds: sample ? sample.uncheckedIds : List(),
+    },
+    reaction: {
+      checkedAll: reaction ? reaction.checkedAll : false,
+      checkedIds: reaction ? reaction.checkedIds : List(),
+      uncheckedIds: reaction ? reaction.uncheckedIds : List(),
+    },
+    wellplate: {
+      checkedAll: wellplate ? wellplate.checkedAll : false,
+      checkedIds: wellplate ? wellplate.checkedIds : List(),
+      uncheckedIds: wellplate ? wellplate.uncheckedIds : List(),
+    },
+    screen: {
+      checkedAll: screen ? screen.checkedAll : false,
+      checkedIds: screen ? screen.checkedIds : List(),
+      uncheckedIds: screen ? screen.uncheckedIds : List(),
+    },
+    research_plan: {
+      checkedAll: research_plan ? research_plan.checkedAll : false,
+      checkedIds: research_plan ? research_plan.checkedIds : List(),
+      uncheckedIds: research_plan ? research_plan.uncheckedIds : List(),
+    }
+  };
+
+  // eslint-disable-next-line no-unused-expressions
+  elementNames(false).forEach((klass) => {
+    stateObj[`${klass}`] = {
+      checkedAll: state[`${klass}`] ? state[`${klass}`].checkedAll : false,
+      checkedIds: state[`${klass}`] ? state[`${klass}`].checkedIds : List(),
+      uncheckedIds: state[`${klass}`] ? state[`${klass}`].uncheckedIds : List(),
+    };
+  });
+
+  return (stateObj);
+};
+
+export default class ManagingActions extends React.Component {
+  constructor(props) {
+    super(props);
+    const { currentUser, genericEls } = UserStore.getState();
+    this.state = {
+      currentUser,
+      currentCollection: { id: 0 },
+      sharing_allowed: false,
+      deletion_allowed: false,
+      remove_allowed: false,
+      is_top_secret: false,
+      genericEls: [],
+      ...upState({})
+    };
+
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.onChange = this.onChange.bind(this);
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.onPermissionChange = this.onPermissionChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    UIStore.listen(this.onChange);
+    PermissionStore.listen(this.onPermissionChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+    UIStore.unlisten(this.onChange);
+    PermissionStore.unlisten(this.onPermissionChange);
+  }
+
+  onChange(state) {
+    const {
+      sample, reaction, screen, wellplate, research_plan, genericEl, currentCollection
+    } = state;
+    if (this.collectionChanged(state)) {
+      this.setState({
+        sharing_allowed: false,
+        deletion_allowed: false,
+        remove_allowed: false,
+        is_top_secret: false,
+        hasSel: false,
+        currentCollection
+      });
+    }
+    else if (this.checkUIState(state)) {
+      const hasSel = elementNames(true).find(el => (
+        state[el] && (state[el].checkedIds.size > 0 || state[el].checkedAll)));
+      PermissionActions.fetchPermissionStatus(state);
+      this.setState({
+        ...upState(state), hasSel
+      });
+    }
+  }
+
+  onUserChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) {
+      this.setState({
+        currentUser: state.currentUser,
+      });
+    }
+    if (typeof state.genericEls !== 'undefined' && state.genericEls !== null) {
+      this.setState({
+        genericEls: state.genericEls
+      });
+    }
+  }
+
+  onPermissionChange(state) {
+    this.setState({ ...state });
+  }
+
+  collectionChanged(state) {
+    const { currentCollection } = state;
+    if (typeof this.state.currentCollection === 'undefined' || this.state.currentCollection == null
+    || typeof currentCollection === 'undefined' || currentCollection == null) return false;
+
+    return this.state.currentCollection.id !== currentCollection.id ||
+      this.state.currentCollection.is_sync_to_me !== currentCollection.is_sync_to_me;
+  }
+
+  checkUIState(state) {
+    const genericNames = (this.state.genericEls && this.state.genericEls.map(el => el.name)) || [];
+    const elNames = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].concat(genericNames);
+    const result = elNames.find(el => (this.state[el] && state[el] && (
+      state[el].checkedIds !== this.state[el].checkedIds ||
+      state[el].checkedAll !== this.state[el].checkedAll ||
+      state[el].uncheckedIds !== this.state[el].uncheckedIds
+    )));
+    return result;
+  }
+
+  handleButtonClick(type) {
+    const modalProps = { show: true, action: '', listSharedCollections: false };
+    switch (type) {
+      case 'share':
+        if (!this.state.is_top_secret) {
+          modalProps.title = "Sharing";
+          modalProps.component = ManagingModalSharing;
+        } else {
+          modalProps.title = "Sharing not allowed";
+          modalProps.component = ManagingModalTopSecret;
+        }
+        break;
+      case 'move':
+        modalProps.title = "Move to Collection";
+        modalProps.component = ManagingModalCollectionActions;
+        modalProps.action = ElementActions.updateElementsCollection;
+        modalProps.listSharedCollections = true;
+        break;
+      case 'remove':
+        modalProps.title = "Remove selected elements from this Collection?";
+        modalProps.component = ManagingModalRemove;
+        modalProps.action = ElementActions.removeElementsCollection;
+        break;
+      case 'assign':
+        modalProps.title = "Assign to Collection";
+        modalProps.component = ManagingModalCollectionActions;
+        modalProps.action = ElementActions.assignElementsCollection;
+        modalProps.listSharedCollections = false;
+        break;
+      case 'delete':
+        modalProps.title = "Delete from all Collections?";
+        modalProps.component = ManagingModalDelete;
+        modalProps.action = ElementActions.deleteElements;
+        break;
+    };
+
+    this.props.updateModalProps(modalProps);
+  }
+
+  render() {
+    const {
+      currentCollection, sharing_allowed, deletion_allowed, remove_allowed, is_top_secret, hasSel
+    } = this.state;
+    const { is_locked, is_shared, sharer, is_sync_to_me, label } = currentCollection;
+    const isAll = is_locked && label === 'All';
+    const noSel = !hasSel
+
+    const moveDisabled = noSel || isAll;
+    const assignDisabled = noSel;
+    const removeDisabled = noSel || isAll || !deletion_allowed; //!remove_allowed
+    const deleteDisabled = noSel || !deletion_allowed;
+    const shareDisabled = noSel || !sharing_allowed;
+
+    return (
+      <div style={{ display: 'inline', float: 'left', marginRight: 10 }}>
+        <ButtonGroup>
+          <MoveOrAssignButton
+            assignDisabled={assignDisabled}
+            moveDisabled={moveDisabled}
+            onClick={this.handleButtonClick}
+            customClass={this.props.customClass}
+          />
+          <RemoveOrDeleteButton
+            removeDisabled={removeDisabled}
+            deleteDisabled={deleteDisabled}
+            onClick={this.handleButtonClick}
+            customClass={this.props.customClass}
+          />
+          {/*
+          <ShareButton
+            isDisabled={shareDisabled}
+            onClick={this.handleButtonClick}
+            customClass={this.props.customClass}
+          />
+          */}
+        </ButtonGroup>
+      </div>
+    );
+  }
+}
+
+ManagingActions.propTypes = {
+  updateModalProps: PropTypes.func.isRequired,
+  customClass: PropTypes.string,
+  genericEls: PropTypes.array
+};
+
+ManagingActions.defaultProps = {
+  customClass: null,
+  genericEls: []
+};
diff --git a/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js b/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
new file mode 100644
index 000000000..9b50836c7
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import Select from 'react-select'
+
+export default class ManagingModalCollectionActions extends React.Component {
+  constructor(props) {
+    super(props);
+    const options = this.collectionOptions();
+    this.state = {
+      newLabel: null,
+      options: options,
+      selected: null,
+    }
+    this.onSelectChange = this.onSelectChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  onSelectChange(e) {
+    let selected = e && e.value
+    this.setState((previousProps, previousState) => {
+      return { ...previousState, selected: selected }
+    });
+  }
+
+  writableColls(colls) {
+    return colls.map(coll => {
+      return coll.permission_level >= 1 ? coll : null;
+    }).filter(r => r != null);
+  }
+
+  collectionEntries() {
+    const cState = CollectionStore.getState();
+    const cUnshared = [...cState.lockedRoots, ...cState.unsharedRoots];
+    let cShared = [];
+    let cSynced = [];
+    if (this.props.listSharedCollections) {
+      cState.sharedRoots.map(sharedR => cShared = [...cShared, ...sharedR.children]);
+      cState.syncInRoots.map(syncInR => cSynced = [...cSynced, ...syncInR.children]);
+      cSynced = this.writableColls(cSynced);
+    }
+
+    if (cShared.length > 0) { cShared[0] = Object.assign(cShared[0], { first: true }); }
+    if (cSynced.length > 0) { cSynced[0] = Object.assign(cSynced[0], { first: true }); }
+
+    const cAll = [...cUnshared, ...cShared, ...cSynced];
+    let cAllTree = [];
+    this.makeTree(cAllTree, cAll, 0);
+    return cAllTree;
+  }
+
+  makeTree(tree, collections, depth) {
+    collections.forEach((collection, index) => {
+      tree.push({
+        id: collection.id,
+        label: collection.label,
+        depth: depth,
+        first: collection.first,
+        is_shared: collection.is_shared,
+        is_sync_to_me: collection.is_sync_to_me
+      });
+      if (collection.children && collection.children.length > 0) {
+        this.makeTree(tree, collection.children, depth + 1)
+      }
+    });
+  }
+
+  collectionOptions() {
+    const cAllTree = this.collectionEntries();
+    if (cAllTree.length === 0) return [];
+    const options = cAllTree.map(leaf => {
+      const indent = "\u00A0".repeat(leaf.depth * 3 + 1);
+      const className = leaf.first ? "separator" : "";
+      return {
+        value: `${leaf.id}-${leaf.is_sync_to_me ? "is_sync_to_me" : ""}`,
+        label: indent + leaf.label,
+        className: className
+      };
+    });
+    return options;
+  }
+
+  handleSubmit() {
+    const { selected, newLabel } = this.state;
+    const collection_id = selected && parseInt(selected.split("-")[0]);
+    const is_sync_to_me = selected && selected.split("-")[1] == "is_sync_to_me";
+    const ui_state = UIStore.getState();
+
+    this.props.action({
+      ui_state, collection_id, is_sync_to_me, newLabel
+    });
+    this.props.onHide();
+  }
+
+  submitButton() {
+    const { newLabel, selected } = this.state
+    const l = newLabel && newLabel.length
+    return l && l > 0 ? (
+      <Button bsStyle="warning" onClick={this.handleSubmit}>
+        Create collection &lsquo;{newLabel}&rsquo; and Submit
+      </Button>
+    ) : (
+      <Button bsStyle="warning" onClick={this.handleSubmit} disabled={!selected}>
+        Submit
+      </Button>
+    );
+  }
+
+  render() {
+    const { options, selected } = this.state;
+    const onChange = (e) => {
+      const val = e.target && e.target.value
+      this.setState((previousState) => {
+        return { ...previousState, newLabel: val }
+      });
+    }
+    return (
+      <div>
+        <FormGroup>
+          <ControlLabel>Select a Collection</ControlLabel>
+          <Select
+            options={options}
+            value={selected}
+            onChange={this.onSelectChange}
+            className="select-assign-collection"
+          />
+        </FormGroup>
+        <FormGroup style={{ display: 'none'}} >
+          <ControlLabel>or Create a new Collection</ControlLabel>
+          <FormControl
+            type="text"
+            placeholder="-- Please insert collection name --"
+            onChange={onChange}
+          />
+        </FormGroup>
+        {this.submitButton()}
+      </div>
+    )
+  }
+}
+
+ManagingModalCollectionActions.propTypes = {
+  action: PropTypes.func,
+  onHide: PropTypes.func,
+  listSharedCollections: PropTypes.bool,
+}
diff --git a/app/packs/src/components/managing_actions/ManagingModalDelete.js b/app/packs/src/components/managing_actions/ManagingModalDelete.js
new file mode 100644
index 000000000..86014abb7
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingModalDelete.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, ButtonToolbar, Checkbox, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
+
+export default class ManagingModalDelete extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deleteSubsamples: false,
+    };
+
+    this.handleCheck = this.handleCheck.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.onHide = this.onHide.bind(this);
+  }
+
+  onHide() {
+    this.props.onHide();
+  }
+
+  handleClick() {
+    const { onHide, action } = this.props;
+    action(this.state);
+    onHide();
+  }
+
+  handleCheck() {
+    const { deleteSubsamples } = this.state;
+
+    this.setState({
+      deleteSubsamples: !deleteSubsamples,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Checkbox
+          onChange={this.handleCheck}
+          checked={this.state.deleteSubsamples}
+        >
+          Also delete reaction associated samples&nbsp;
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="delete_reaction_samples_info">if left unchecked, only the solvent and reactant samples of the selected reactions will be deleted</Tooltip>}
+          >
+            <Label>?</Label>
+          </OverlayTrigger>
+        </Checkbox>
+        <ButtonToolbar>
+          <Button bsStyle="primary" onClick={this.onHide}>Cancel</Button>
+          <Button bsStyle="warning" onClick={this.handleClick}>Delete</Button>
+        </ButtonToolbar>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/components/managing_actions/ManagingModalRemove.js b/app/packs/src/components/managing_actions/ManagingModalRemove.js
new file mode 100644
index 000000000..0e91a9643
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingModalRemove.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonToolbar } from 'react-bootstrap';
+
+import UIStore from 'src/stores/alt/stores/UIStore';
+
+const ManagingModalRemove = ({ onHide, action }) => {
+  const ui_state = UIStore.getState();
+  return (
+    <ButtonToolbar>
+      <Button bsStyle="primary" onClick={() => onHide()}>Cancel</Button>
+      <Button
+        bsStyle="warning"
+        onClick={() => { action({ ui_state }); onHide(); }}
+      >
+        Remove
+      </Button>
+    </ButtonToolbar>
+  );
+};
+
+ManagingModalRemove.propTypes = {
+  onHide: PropTypes.func.isRequired,
+  action: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func
+  ]).isRequired
+};
+
+export default ManagingModalRemove;
diff --git a/app/packs/src/components/managing_actions/ManagingModalSharing.js b/app/packs/src/components/managing_actions/ManagingModalSharing.js
new file mode 100644
index 000000000..e9a114dbb
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingModalSharing.js
@@ -0,0 +1,433 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+import Select from 'react-select';
+
+import SharingShortcuts from 'src/components/managingActions/SharingShortcuts';
+
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import MatrixCheck from 'src/components/common/MatrixCheck';
+import { selectUserOptionFormater } from 'src/utilities/selectHelper';
+import { elementNames } from 'src/apps/generic/Utils';
+
+export default class ManagingModalSharing extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    // TODO update for new check/uncheck info
+    let { currentUser } = UserStore.getState();
+    this.state = {
+      currentUser: currentUser,
+      role: 'Pick a sharing role',
+      permissionLevel: props.permissionLevel,
+      sampleDetailLevel: props.sampleDetailLevel,
+      reactionDetailLevel: props.reactionDetailLevel,
+      wellplateDetailLevel: props.wellplateDetailLevel,
+      screenDetailLevel: props.screenDetailLevel,
+      elementDetailLevel: props.elementDetailLevel,
+      selectedUsers: null,
+    }
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.handleSharing = this.handleSharing.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+
+    this.loadUserByName = this.loadUserByName.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState({
+      currentUser: state.currentUser
+    })
+  }
+
+  isElementSelectionEmpty(element) {
+    return !element.checkedAll &&
+      element.checkedIds.size == 0 &&
+      element.uncheckedIds.size == 0;
+  }
+
+  isSelectionEmpty(uiState) {
+    let isSampleSelectionEmpty = this.isElementSelectionEmpty(uiState.sample);
+    let isReactionSelectionEmpty = this.isElementSelectionEmpty(uiState.reaction);
+    let isWellplateSelectionEmpty = this.isElementSelectionEmpty(uiState.wellplate);
+    let isScreenSelectionEmpty = this.isElementSelectionEmpty(uiState.screen);
+
+    let isElementSelectionEmpty = false;
+
+    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
+
+      // eslint-disable-next-line no-unused-expressions
+      elementNames(false).forEach((klass) => {
+        isElementSelectionEmpty = isElementSelectionEmpty && this.isElementSelectionEmpty(uiState[`${klass}`]);
+      });
+    }
+
+    return isSampleSelectionEmpty && isReactionSelectionEmpty &&
+      isWellplateSelectionEmpty && isScreenSelectionEmpty &&
+      isElementSelectionEmpty;
+  }
+
+  filterParamsWholeCollection(uiState) {
+    let collectionId = uiState.currentCollection.id;
+    let filterParams = {
+      sample: {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      },
+      reaction: {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      },
+      wellplate: {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      },
+      screen: {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      },
+      research_plan: {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      },
+      currentSearchSelection: uiState.currentSearchSelection
+    };
+
+    elementNames(false).forEach((klass) => {
+      filterParams[`${klass}`] = {
+        all: true,
+        included_ids: [],
+        excluded_ids: [],
+        collection_id: collectionId
+      };
+    });
+
+    return filterParams;
+  }
+
+  filterParamsFromUIState(uiState) {
+    let collectionId = uiState.currentCollection.id;
+
+    let filterParams = {
+      sample: {
+        all: uiState.sample.checkedAll,
+        included_ids: uiState.sample.checkedIds,
+        excluded_ids: uiState.sample.uncheckedIds,
+        collection_id: collectionId
+      },
+      reaction: {
+        all: uiState.reaction.checkedAll,
+        included_ids: uiState.reaction.checkedIds,
+        excluded_ids: uiState.reaction.uncheckedIds,
+        collection_id: collectionId
+      },
+      wellplate: {
+        all: uiState.wellplate.checkedAll,
+        included_ids: uiState.wellplate.checkedIds,
+        excluded_ids: uiState.wellplate.uncheckedIds,
+        collection_id: collectionId
+      },
+      screen: {
+        all: uiState.screen.checkedAll,
+        included_ids: uiState.screen.checkedIds,
+        excluded_ids: uiState.screen.uncheckedIds,
+        collection_id: collectionId
+      },
+      research_plan: {
+        all: uiState.research_plan.checkedAll,
+        included_ids: uiState.research_plan.checkedIds,
+        excluded_ids: uiState.research_plan.uncheckedIds,
+        collection_id: collectionId
+      },
+      currentSearchSelection: uiState.currentSearchSelection
+    };
+
+    elementNames(false).forEach((klass) => {
+      filterParams[`${klass}`] = {
+        all: uiState[`${klass}`].checkedAll,
+        included_ids: uiState[`${klass}`].checkedIds,
+        excluded_ids: uiState[`${klass}`].uncheckedIds,
+        collection_id: collectionId
+      };
+    });
+    return filterParams;
+  }
+
+  handleSharing() {
+    const {
+      permissionLevel, sampleDetailLevel, reactionDetailLevel,
+      wellplateDetailLevel, screenDetailLevel, elementDetailLevel
+    } = this.state;
+
+    const params = {
+      id: this.props.collectionId,
+      collection_attributes: {
+        permission_level: permissionLevel,
+        sample_detail_level: sampleDetailLevel,
+        reaction_detail_level: reactionDetailLevel,
+        wellplate_detail_level: wellplateDetailLevel,
+        screen_detail_level: screenDetailLevel,
+        element_detail_level: elementDetailLevel
+      },
+    };
+
+    if (this.props.collAction === "Create") {
+      const userIds = this.state.selectedUsers;
+      const uiState = UIStore.getState();
+      const currentCollection = uiState.currentCollection;
+      const filterParams =
+        this.isSelectionEmpty(uiState)
+          ? this.filterParamsWholeCollection(uiState)
+          : this.filterParamsFromUIState(uiState);
+      const fullParams = {
+        ...params,
+        elements_filter: filterParams,
+        user_ids: userIds,
+        currentCollection
+      };
+      CollectionActions.createSharedCollections(fullParams);
+    }
+
+    if (this.props.collAction === 'Update') { CollectionActions.updateSharedCollection(params); }
+
+    if (this.props.collAction === 'EditSync') { CollectionActions.editSync(params); }
+
+    if (this.props.collAction === 'CreateSync') {
+      const userIds = this.state.selectedUsers;
+      const fullParams = {
+        ...params,
+        user_ids: userIds,
+      };
+      CollectionActions.createSync(fullParams);
+    }
+
+    this.props.onHide();
+  }
+
+  handleShortcutChange(e) {
+    let val = e.target.value
+    let permAndDetLevs = {}
+    switch (val) {
+      case 'user':
+        permAndDetLevs = SharingShortcuts.user();
+        break;
+      case 'partner':
+        permAndDetLevs = SharingShortcuts.partner();
+        break;
+      case 'collaborator':
+        permAndDetLevs = SharingShortcuts.collaborator();
+        break;
+      case 'reviewer':
+        permAndDetLevs = SharingShortcuts.reviewer();
+        break;
+      case 'supervisor':
+        permAndDetLevs = SharingShortcuts.supervisor();
+        break;
+    }
+    this.setState({ ...permAndDetLevs, role: val });
+  }
+
+  handlePLChange(e) {
+    let val = e.target.value
+    this.setState({
+      role: 'Pick a sharing role',
+      permissionLevel: val
+    });
+  }
+
+  handleDLChange(e, elementType) {
+    let val = e.target.value
+    let state = {}
+    state[elementType + 'DetailLevel'] = val
+    state.role = 'Pick a sharing role'
+    this.setState(state)
+  }
+
+  handleSelectUser(val) {
+    if (val) {
+      this.setState({ selectedUsers: val })
+    }
+  }
+
+  loadUserByName(input) {
+    let { selectedUsers } = this.state;
+
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input, 'Person,Group')
+      .then((res) => selectUserOptionFormater(
+        { data: res, withType: true, currentUserId: this.state.currentUser.id }
+      )).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  selectUsers() {
+    let style = this.props.selectUsers ? {} : { display: 'none' };
+    let { selectedUsers } = this.state;
+
+    return (
+      <div style={style}>
+        <ControlLabel>Select Users to share with</ControlLabel>
+        <Select.AsyncCreatable id="share-users-select" multi={true} isLoading={true}
+          backspaceRemoves={true} value={selectedUsers}
+          valueKey="value" labelKey="label" matchProp="name"
+          promptTextCreator={this.promptTextCreator}
+          loadOptions={this.loadUserByName}
+          onChange={this.handleSelectUser}
+        />
+      </div>
+    )
+  }
+
+  render() {
+    const displayWarning = (this.state.permissionLevel || '') === '5' ? 'inline-block' : 'none';
+    return (
+      <div>
+        <FormGroup controlId="shortcutSelect">
+          <ControlLabel>Role</ControlLabel>
+          <FormControl componentClass="select"
+            placeholder="Pick a sharing role (optional)"
+            value={this.state.role || ''}
+            onChange={(e) => this.handleShortcutChange(e)}>
+            <option value='Pick a sharing role'>Pick a sharing role (optional)</option>
+            <option value='user'>User</option>
+            <option value='partner'>Partner</option>
+            <option value='collaborator'>Collaborator</option>
+            <option value='reviewer'>Reviewer</option>
+            <option value='supervisor'>Supervisor</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="permissionLevelSelect" id="permissionLevelSelect">
+          <ControlLabel>Permission level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handlePLChange(e)}
+            value={this.state.permissionLevel || ''}>
+            <option value='0'>Read</option>
+            <option value='1'>Write</option>
+            <option value='2'>Share</option>
+            <option value='3'>Delete</option>
+            <option value='4'>Import Elements</option>
+            <option value='5'>Pass ownership</option>
+          </FormControl>
+          <div style={{
+            color: '#d9534f', fontSize: '12px', paddingLeft: '8px', paddingTop: '4px', display: displayWarning
+          }}
+          >
+            <i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Transfering ownership applies for all sub collections.
+          </div>
+        </FormGroup>
+        <FormGroup controlId="sampleDetailLevelSelect">
+          <ControlLabel>Sample detail level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handleDLChange(e, 'sample')}
+            value={this.state.sampleDetailLevel || ''}>
+            <option value='0'>Molecular mass of the compound, external label</option>
+            <option value='1'>Molecule, structure</option>
+            <option value='2'>Analysis Result + Description</option>
+            <option value='3'>Analysis Datasets</option>
+            <option value='10'>Everything</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="reactionDetailLevelSelect">
+          <ControlLabel>Reaction detail level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handleDLChange(e, 'reaction')}
+            value={this.state.reactionDetailLevel || ''}>
+            <option value='0'>Observation, description, calculation</option>
+            <option value='10'>Everything</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="wellplateDetailLevelSelect">
+          <ControlLabel>Wellplate detail level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handleDLChange(e, 'wellplate')}
+            value={this.state.wellplateDetailLevel || ''}>
+            <option value='0'>Wells (Positions)</option>
+            <option value='1'>Readout</option>
+            <option value='10'>Everything</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="screenDetailLevelSelect">
+          <ControlLabel>Screen detail level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handleDLChange(e, 'screen')}
+            value={this.state.screenDetailLevel || ''}>
+            <option value='0'>Name, description, condition, requirements</option>
+            <option value='10'>Everything</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="screenDetailLevelSelect">
+          <ControlLabel>Element detail level</ControlLabel>
+          <FormControl componentClass="select"
+            onChange={(e) => this.handleDLChange(e, 'element')}
+            value={this.state.elementDetailLevel || ''}>
+            <option value='10'>Everything</option>
+          </FormControl>
+        </FormGroup>
+        {this.selectUsers()}
+        <br />
+        <Button id="create-sync-shared-col-btn" bsStyle="warning" onClick={this.handleSharing}>{this.props.collAction} Shared Collection</Button>
+      </div>
+    )
+  }
+}
+
+ManagingModalSharing.propTypes = {
+  collectionId: PropTypes.number,
+  collAction: PropTypes.string,
+  selectUsers: PropTypes.bool,
+  permissionLevel: PropTypes.number,
+  sampleDetailLevel: PropTypes.number,
+  reactionDetailLevel: PropTypes.number,
+  wellplateDetailLevel: PropTypes.number,
+  screenDetailLevel: PropTypes.number,
+  elementDetailLevel: PropTypes.number,
+  onHide: PropTypes.func.isRequired,
+  listSharedCollections: PropTypes.bool
+};
+
+ManagingModalSharing.defaultProps = {
+  collectionId: null,
+  collAction: "Create",
+  selectUsers: true,
+  permissionLevel: 0,
+  sampleDetailLevel: 0,
+  reactionDetailLevel: 0,
+  wellplateDetailLevel: 0,
+  screenDetailLevel: 0,
+  elementDetailLevel: 10
+};
diff --git a/app/packs/src/components/managing_actions/ManagingModalTopSecret.js b/app/packs/src/components/managing_actions/ManagingModalTopSecret.js
new file mode 100644
index 000000000..4a086aab7
--- /dev/null
+++ b/app/packs/src/components/managing_actions/ManagingModalTopSecret.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class ManagingModalTopSecret extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        One of the selected elements contains one or several samples marked as top secret.
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/models/AnalysesExperiment.js b/app/packs/src/components/models/AnalysesExperiment.js
new file mode 100644
index 000000000..f8a1a84e8
--- /dev/null
+++ b/app/packs/src/components/models/AnalysesExperiment.js
@@ -0,0 +1,90 @@
+import Element from 'src/models/Element'
+import uuid from 'uuid';
+
+export default class AnalysesExperiment extends Element {
+  constructor({
+    id, devices_analysis_id, holder_id, status, solvent, experiment, priority, on_day, sample_analysis_id,
+    number_of_scans, sweep_width, time, analysis_barcode, sample_short_label, sample_id, devices_sample_id
+  }) {
+    const analysis = {
+      id: id,
+      deviceAnalysisId: devices_analysis_id,
+      holderId: holder_id,
+      status: status,
+      solvent: solvent,
+      experiment: experiment,
+      priority: priority,
+      onDay: on_day,
+      numberOfScans: number_of_scans,
+      sweepWidth: sweep_width,
+      time: time,
+      analysisBarcode: analysis_barcode,
+      sampleShortLabel: sample_short_label,
+      sampleId: sample_id,
+      deviceSampleId: devices_sample_id,
+      sampleAnalysisId: sample_analysis_id,
+    }
+    super(analysis)
+  }
+
+  static buildEmpty(sampleId, sampleShortLabel, sampleAnalysisId, deviceSampleId) {
+    return new AnalysesExperiment({
+      id: uuid.v1(),
+      devices_sample_id: deviceSampleId,
+      devices_analysis_id: null,
+      holder_id: null,
+      status: "",
+      solvent: "",
+      experiment: "",
+      priority: false,
+      on_day: true,
+      number_of_scans: 0,
+      sweep_width: 0,
+      time: "",
+      analysis_barcode: "",
+      sample_short_label: sampleShortLabel,
+      sample_id: sampleId,
+      sample_analysis_id: sampleAnalysisId,
+    })
+  }
+
+  serialize() {
+    const serialized = super.serialize({
+      devices_analysis_id: this.deviceAnalysisId,
+      holder_id: this.holderId,
+      status: this.status,
+      solvent: this.solvent,
+      experiment: this.experiment,
+      priority: this.priority,
+      on_day: this.onDay,
+      number_of_scans: parseInt(this.numberOfScans, 10),
+      sweep_width: parseInt(this.sweepWidth, 10),
+      time: this.time,
+      sample_id: this.sampleId,
+      devices_sample_id: this.deviceSampleId,
+      sample_analysis_id: this.sampleAnalysisId,
+    })
+    return serialized
+  }
+
+  buildConfig() {
+    const configMap = {
+      'SOLVENT': this.solvent,
+      'EXPERIMENT': this.experiment,
+      'NAME': this.sampleShortLabel,
+      'BARCODE': this.analysisBarcode,
+      'PARAMETERS': `ns, ${this.numberOfScans}, sw, ${this.sweepWidth}`
+    }
+    const conditionedNight = !this.onDay ? { 'NIGHT': null } : {}
+    const conditionedPriority = this.priority ? { 'PRIORITY': null } : {}
+    return {
+      sample_id: this.sampleId,
+      data: [{
+        ...configMap,
+        ...conditionedNight,
+        ...conditionedPriority
+      }]
+    }
+  }
+}
+
diff --git a/app/packs/src/components/models/Analysis.js b/app/packs/src/components/models/Analysis.js
new file mode 100644
index 000000000..55c734e31
--- /dev/null
+++ b/app/packs/src/components/models/Analysis.js
@@ -0,0 +1,66 @@
+import Element from 'src/models/Element';
+
+export default class Analysis extends Element {
+  static buildEmpty() {
+    return new Analysis({
+      name: 'new Analysis',
+      type: 'analysis',
+      kind: '',
+      status: '',
+      content: '',
+      description: '',
+      datasets: [],
+      bar_code: null,
+      qr_code: null,
+      bruker_code: null
+    })
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get type() {
+    return this._type;
+  }
+
+  set type(type) {
+    this._type = type;
+  }
+
+  get datasets() {
+    return this._datasets || [];
+  }
+
+  set datasets(datasets) {
+    this._datasets = datasets.map(dataset => new Dataset(dataset));
+  }
+
+  updateDataset(changedDataset) {
+    this._datasets.find(dataset => {
+      if (dataset.id == changedDataset.id) {
+        const datasetId = this.datasets.indexOf(dataset);
+        this.datasets[datasetId] = changedDataset;
+      }
+    });
+  }
+
+  serialize() {
+    return super.serialize({
+      name: this.name,
+      kind: this.kind,
+      status: this.status,
+      content: this.content,
+      description: this.description,
+      datasets: this.datasets.map(d => d.serialize()),
+      bar_code: this.barcode,
+      qr_code: this.qr_code,
+      bruker_code: this.bruker_code
+    })
+  }
+
+}
diff --git a/app/packs/src/components/models/Attachment.js b/app/packs/src/components/models/Attachment.js
new file mode 100644
index 000000000..71c58783b
--- /dev/null
+++ b/app/packs/src/components/models/Attachment.js
@@ -0,0 +1,36 @@
+import Element from './Element';
+
+export default class Attachment extends Element {
+
+  static fromFile(file) {
+    return new Attachment(
+      {
+        file: file,
+        name: file.name,
+        filename: file.name,
+        identifier: file.id,
+        is_deleted: false,
+      }
+    )
+  }
+
+  get preview() {
+    return this._preview;
+  }
+
+  set preview(preview) {
+    this._preview = preview;
+  }
+
+  serialize() {
+    return super.serialize({
+      filename: this.filename,
+      identifier: this.identifier,
+      file: this.file,
+      thumb: this.thumb,
+      content_type: this.content_type,
+      is_deleted: this.is_deleted,
+    })
+  }
+
+}
diff --git a/app/packs/src/components/models/ComputeTask.js b/app/packs/src/components/models/ComputeTask.js
new file mode 100644
index 000000000..77c5f69a8
--- /dev/null
+++ b/app/packs/src/components/models/ComputeTask.js
@@ -0,0 +1,7 @@
+import Element from './Element';
+
+export default class ComputeTask extends Element {
+  static buildEmpty() {
+    return new ComputeTask({ type: 'task' });
+  }
+}
diff --git a/app/packs/src/components/models/Container.js b/app/packs/src/components/models/Container.js
new file mode 100644
index 000000000..7416126e1
--- /dev/null
+++ b/app/packs/src/components/models/Container.js
@@ -0,0 +1,55 @@
+import Element from 'src/models/Element';
+
+export default class Container extends Element {
+  static buildEmpty() {
+    return new Container({
+      name: 'new',
+      children: [],
+      attachments: [],
+      is_deleted: false,
+      description: '',
+      extended_metadata: {
+        report: true,
+      },
+      container_type: '',
+    });
+  }
+
+  static buildAnalysis(kind = 'other', name = '') {
+    var analysis = this.buildEmpty()
+    analysis.container_type = "analysis"
+    analysis.extended_metadata['kind'] = kind
+    analysis.name = name
+    return analysis
+  }
+
+  static init() {
+    var root = this.buildEmpty();
+    root.container_type = 'root';
+
+    var analyses = this.buildEmpty();
+    analyses.container_type = 'analyses';
+
+    root.children.push(analyses);
+
+    return root;
+  }
+
+  name() {
+    return this.name;
+  }
+
+  serialize() {
+    return super.serialize({
+      id: this.id,
+      name: this.name,
+      children: this.children,
+      attachments: this.attachments.map(a => a.serialize()),
+      is_new: this.isNew || false,
+      is_deleted: this.deleted || false,
+      description: this.description,
+      extended_metadata: this.extended_metadata,
+      container_type: this.container_type,
+    })
+  }
+}
diff --git a/app/packs/src/components/models/Device.js b/app/packs/src/components/models/Device.js
new file mode 100644
index 000000000..57efdd687
--- /dev/null
+++ b/app/packs/src/components/models/Device.js
@@ -0,0 +1,47 @@
+import Element from 'src/models/Element';
+import DeviceAnalysis from 'src/models/DeviceAnalysis';
+import DeviceSample from 'src/models/DeviceSample';
+
+export default class Device extends Element {
+  constructor({ id, title, code, types, user_id, samples, devices_analyses }) {
+    const device = {
+      id,
+      title,
+      code,
+      types,
+      user_id,
+      type: 'device',
+      samples: samples.map(s => new DeviceSample(s)),
+      devicesAnalyses: devices_analyses.map(analysis => new DeviceAnalysis(analysis))
+    }
+    super(device)
+  }
+
+  checksum() {
+    return super.checksum(
+      ['user_id', 'id', 'is_new', 'isNew', 'isEdited', 'isPendingToSave', 'devicesAnalyses', 'samples']
+    )
+  }
+
+  static buildEmpty() {
+    return new Device({
+      type: 'device',
+      code: "",
+      types: [],
+      samples: [],
+      title: "New Device",
+      devices_analyses: []
+    })
+  }
+
+  serialize() {
+    const serialized = super.serialize({
+      id: this.id,
+      code: this.code,
+      types: this.types,
+      samples: this.samples.map(s => s.serialize()),
+      title: this.title,
+    })
+    return serialized
+  }
+}
diff --git a/app/packs/src/components/models/DeviceAnalysis.js b/app/packs/src/components/models/DeviceAnalysis.js
new file mode 100644
index 000000000..eb0fd8492
--- /dev/null
+++ b/app/packs/src/components/models/DeviceAnalysis.js
@@ -0,0 +1,39 @@
+import Element from 'src/models/Element'
+import AnalysesExperiment from 'src/models/AnalysesExperiment'
+import _ from 'lodash'
+
+export default class DeviceAnalysis extends Element {
+  constructor({
+    id, device_id, analysis_type, title, experiments
+  }) {
+    const analysis = {
+      id: id,
+      deviceId: device_id,
+      experiments: experiments.map((e) => new AnalysesExperiment(e)),
+      type: 'deviceAnalysis',
+      analysisType: analysis_type,
+      title,
+    }
+    super(analysis)
+  }
+
+  static buildEmpty(deviceId, analysisType) {
+    return new DeviceAnalysis({
+      device_id: deviceId,
+      experiments: [],
+      type: 'deviceAnalysis',
+      analysis_type: analysisType,
+      title: `${deviceId}: NMR`,
+    })
+  }
+
+  serialize() {
+    const serialized = super.serialize({
+      device_id: this.deviceId,
+      experiments: this.experiments.map((e) => e.serialize()),
+      analysis_type: this.analysisType,
+      title: this.title,
+    })
+    return serialized
+  }
+}
diff --git a/app/packs/src/components/models/DeviceControl.js b/app/packs/src/components/models/DeviceControl.js
new file mode 100644
index 000000000..30a1ce8ba
--- /dev/null
+++ b/app/packs/src/components/models/DeviceControl.js
@@ -0,0 +1,11 @@
+import Element from 'src/models/Element';
+
+export default class DeviceControl extends Element {
+
+  static buildEmpty() {
+    return new DeviceControl({
+      type: 'deviceCtrl',
+    })
+  }
+
+}
diff --git a/app/packs/src/components/models/DeviceSample.js b/app/packs/src/components/models/DeviceSample.js
new file mode 100644
index 000000000..086939b98
--- /dev/null
+++ b/app/packs/src/components/models/DeviceSample.js
@@ -0,0 +1,35 @@
+import Element from 'src/models/Element';
+import uuid from 'uuid';
+
+export default class DeviceSample extends Element {
+  constructor({ id, device_id, sample_id, types, short_label }) {
+    const deviceSample = {
+      id,
+      deviceId: device_id,
+      sampleId: sample_id,
+      types,
+      shortLabel: short_label,
+    }
+    super(deviceSample)
+  }
+
+  static buildEmpty(deviceId, sample) {
+    return new DeviceSample({
+      id: uuid.v1(),
+      device_id: deviceId,
+      sample_id: sample.id,
+      short_label: sample.short_label,
+      types: [],
+    })
+  }
+
+  serialize() {
+    const serialized = super.serialize({
+      id: this.id,
+      device_id: this.deviceId,
+      sample_id: this.sampleId,
+      types: this.types,
+    })
+    return serialized
+  }
+}
diff --git a/app/packs/src/components/models/Element.js b/app/packs/src/components/models/Element.js
new file mode 100644
index 000000000..411ce36ef
--- /dev/null
+++ b/app/packs/src/components/models/Element.js
@@ -0,0 +1,90 @@
+import uuid from 'uuid';
+import sha256 from 'sha256';
+import _ from 'lodash';
+
+export default class Element {
+
+  constructor(args) {
+    Object.assign(this, args);
+    if(!this.id) {
+      this.id = Element.buildID();
+      this.is_new = true
+    }
+    this.updateChecksum();
+  }
+
+  isMethodDisabled(m) {
+    return this[m] == '***'
+  }
+
+  static buildID() {
+    return uuid.v1();
+  }
+
+  get isEdited() {
+    return this._checksum != this.checksum();
+  }
+
+  checksum(fieldsToOmit = []) {
+    return sha256(JSON.stringify(_.omit(_.omit(
+      this,
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', ...fieldsToOmit],
+    ), _.isEmpty)));
+  }
+
+  get getChecksum() {
+    return this._checksum
+  }
+
+  get isNew() {
+    return this.is_new == true
+  }
+
+  get isPendingToSave() {
+    return !_.isEmpty(this) && (this.isNew || this.isEdited);
+  }
+
+  updateChecksum(cs) {
+    if (cs) {
+      this._checksum = cs
+    } else {
+      this._checksum = this.checksum();
+    }
+  }
+
+  buildCopy() {
+    return new this.constructor(_.omit(this, 'id'))
+  }
+
+  clone() {
+    return new this.constructor(this);
+  }
+
+  // methods regarding sharing and detail levels
+  isRestricted() {
+    return this.is_restricted;
+  }
+
+  title() {
+    return this.name;
+  }
+
+  // base serializer
+  serialize(extraParams = {}) {
+    let params = {
+      id: this.id,
+      type: this.type,
+      is_new: this.isNew || false,
+      collection_id: this.collection_id
+    }
+    _.merge(params, extraParams);
+    let paramsWithoutNullEntries = _.omit(params, _.isNull);
+    let cleanParams = _.omit(paramsWithoutNullEntries, (x) => { return x == '***'})
+    return cleanParams;
+  }
+
+  // Default empty quill-delta
+  static quillDefault() {
+    return { ops: [{ insert: '\n' }] };
+  }
+}
diff --git a/app/packs/src/components/models/Format.js b/app/packs/src/components/models/Format.js
new file mode 100644
index 000000000..4602e5fb5
--- /dev/null
+++ b/app/packs/src/components/models/Format.js
@@ -0,0 +1,7 @@
+import Element from 'src/models/Element';
+
+export default class Format extends Element {
+  static buildEmpty() {
+    return new Format({ type: 'format' });
+  }
+}
diff --git a/app/packs/src/components/models/GenericDS.js b/app/packs/src/components/models/GenericDS.js
new file mode 100644
index 000000000..f681894c4
--- /dev/null
+++ b/app/packs/src/components/models/GenericDS.js
@@ -0,0 +1,63 @@
+import Element from './Element';
+
+export default class GenericDS extends Element {
+  static buildEmpty(klass, containerId) {
+    const template = (klass && klass.properties_release) || {};
+    return new GenericDS({
+      dataset_klass_id: klass && klass.id,
+      element_type: 'Container',
+      element_id: containerId,
+      properties: template,
+      klass_ols: klass.ols_term_id,
+      klass_label: klass.label,
+      changed: false
+    });
+  }
+
+  serialize() {
+    return super.serialize({
+      dataset_klass_id: this.dataset_klass_id,
+      element_type: 'Container',
+      element_id: this.element_id,
+      properties: this.properties,
+    });
+  }
+
+  get datasetKlassId() {
+    return this.dataset_klass_id;
+  }
+
+  /**
+   * @param {any} datasetKlassId
+   */
+  set datasetKlassId(datasetKlassId) {
+    this.dataset_klass_id = datasetKlassId;
+  }
+
+  get getProperties() {
+    return this.properties;
+  }
+
+  /**
+   * @param {any} properties
+   */
+  set setProperties(properties) {
+    this.properties = properties;
+  }
+
+  get klassOls() {
+    return this.klass_ols;
+  }
+
+  set klassOls(klassOls) {
+    this.klass_ols = klassOls;
+  }
+
+  get klassLabel() {
+    return this.klass_label;
+  }
+
+  set klassLabel(klassLabel) {
+    this.klass_label = klassLabel;
+  }
+}
diff --git a/app/packs/src/components/models/GenericEl.js b/app/packs/src/components/models/GenericEl.js
new file mode 100644
index 000000000..0909f321c
--- /dev/null
+++ b/app/packs/src/components/models/GenericEl.js
@@ -0,0 +1,157 @@
+import { isEmpty, filter } from 'lodash';
+import Element from './Element';
+import Container from './Container';
+import UserStore from '../stores/UserStore';
+import Segment from './Segment';
+
+export default class GenericEl extends Element {
+
+  // eslint-disable-next-line camelcase
+  static buildEmpty(collection_id, klass) {
+    const template = (klass && klass.properties_release) || {};
+    return new GenericEl({
+      collection_id,
+      type: klass.name,
+      element_klass_id: this.element_klass_id || (klass && klass.id),
+      short_label: GenericEl.buildNewShortLabel(klass),
+      name: `New ${klass.label}`,
+      container: Container.init(),
+      properties: template,
+      element_klass: klass,
+      can_copy: false,
+      properties_release: [],
+      attachments: [],
+      files: [],
+      segments: []
+    });
+  }
+
+  serialize() {
+    return super.serialize({
+      name: this.name,
+      can_copy: true,
+      klassType: 'GenericEl',
+      element_klass: this.element_klass,
+      element_klass_id: this._element_klass_id,
+      properties: this.properties,
+      container: this.container,
+      attachments: this.attachments,
+      files: this.files,
+      segments: this.segments.map(s => s.serialize())
+    });
+  }
+
+  static buildNewShortLabel(klass) {
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) { return `new_${klass.label}`; }
+    return `${currentUser.initials}-${klass.klass_prefix}${parseInt(currentUser.counters[klass.name] || 0, 10) + 1}`;
+  }
+
+
+  buildCopy(params = {}) {
+    const copy = super.buildCopy();
+    Object.assign(copy, params);
+    copy.short_label = GenericEl.buildNewShortLabel(copy.element_klass);
+    copy.can_update = true;
+    copy.can_copy = false;
+    return copy;
+  }
+
+  static copyFromCollectionId(element, collection_id) {
+    const params = {
+      collection_id,
+      role: 'parts',
+      timestamp_start: '',
+      timestamp_stop: '',
+      rf_value: 0.00,
+      status: '',
+    }
+    const copy = element.buildCopy(params);
+    copy.origin = { id: element.id, short_label: element.short_label };
+    //copy.name = copy.nameFromRole(copy.role);
+    return copy;
+  }
+
+  get klassType() {
+    return 'GenericEl'
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get label() {
+    return (this.element_klass && this.element_klass.label) || '';
+  }
+
+  get desc() {
+    return (this.element_klass && this.element_klass.desc) || '';
+  }
+
+  get element_klass() {
+    return this._element_klass;
+  }
+
+  set element_klass(klass) {
+    this._element_klass = klass;
+  }
+
+  get klassName() {
+    return this._klass_name;
+  }
+  set klassName(klassName) {
+    this._klass_name = klassName;
+  }
+
+
+  get properties() {
+    return this._properties;
+  }
+
+  set properties(properties) {
+    this._properties = properties;
+  }
+
+  get element_klass_id() {
+    return this._element_klass_id;
+  }
+
+  set element_klass_id(element_klass_id) {
+    this._element_klass_id = element_klass_id;
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+
+  title() {
+    return `${this.short_label}     ${this.name}` ;
+  }
+
+  get isPendingToSave() {
+    return !isEmpty(this) && (this.isNew || this.changed);
+  }
+
+  isValidated() {
+    const validName = !!(this.name && this.name.trim() !== '');
+    const layers = filter(this.properties && this.properties.layers, l => l.parent == null || l.parent.trim().length === 0) || [];
+
+    // required fileds, draggable only
+    const fieldsDrag = layers.flatMap(l => l.fields).filter(f => f.required && f.type.includes('drag_'));
+    const vaildFieldsDrag = fieldsDrag.length === fieldsDrag.filter(f => f.value && f.value.el_id).length;
+
+    // required fileds, excludes draggable
+    const fields = layers.flatMap(l => l.fields).filter(f => f.required && !f.type.includes('drag_'));
+    const vaildFields = fields.length === fields.filter(f => f.value && f.value.trim() !== '').length;
+
+    return validName && vaildFieldsDrag && vaildFields;
+  }
+}
diff --git a/app/packs/src/components/models/GenericSubField.js b/app/packs/src/components/models/GenericSubField.js
new file mode 100644
index 000000000..c72231ace
--- /dev/null
+++ b/app/packs/src/components/models/GenericSubField.js
@@ -0,0 +1,10 @@
+import uuid from 'uuid';
+
+export default class GenericSubField {
+  constructor(args) {
+    Object.assign(this, args);
+    if (!this.id) { this.id = GenericSubField.buildID(); }
+  }
+
+  static buildID() { return uuid.v1(); }
+}
diff --git a/app/packs/src/components/models/Graph.js b/app/packs/src/components/models/Graph.js
new file mode 100644
index 000000000..81dc243c8
--- /dev/null
+++ b/app/packs/src/components/models/Graph.js
@@ -0,0 +1,7 @@
+import Element from 'src/models/Element';
+
+export default class Graph extends Element {
+  static buildEmptyScatter() {
+    return new Graph({ type: 'graph', graphType: 'scatter' });
+  }
+}
diff --git a/app/packs/src/components/models/Literature.js b/app/packs/src/components/models/Literature.js
new file mode 100644
index 000000000..94b733a30
--- /dev/null
+++ b/app/packs/src/components/models/Literature.js
@@ -0,0 +1,33 @@
+import Element from 'src/models/Element';
+import { CitationType } from 'src/components/CitationType';
+
+export default class Literature extends Element {
+  static buildEmpty() {
+    return new Literature({
+      title: '',
+      url: '',
+      doi: '',
+      isbn: '',
+      litype: CitationType[0],
+      type: 'literature',
+      is_new: false,
+      refs: {},
+      element_type: ''
+    })
+  }
+
+  serialize() {
+    return ({
+      id: this.id,
+      title: this.title,
+      url: this.url,
+      doi: this.doi,
+      isbn: this.isbn,
+      litype: this.litype,
+      type: this.type,
+      is_new: this.isNew || false,
+      refs: this.refs || {},
+      element_type: this.element_type
+    });
+  }
+}
diff --git a/app/packs/src/components/models/LiteratureMap.js b/app/packs/src/components/models/LiteratureMap.js
new file mode 100644
index 000000000..116073ebd
--- /dev/null
+++ b/app/packs/src/components/models/LiteratureMap.js
@@ -0,0 +1,100 @@
+import uuid from 'uuid';
+import sha256 from 'sha256';
+import _ from 'lodash';
+import Immutable from 'immutable';
+
+export default class LiteratureMap {
+
+  constructor(args) {
+    Object.assign(this, args);
+    if(!this.id) {
+      this.id = LiteratureMap.buildID();
+      this.is_new = true
+      this.type = 'literature_map'
+    }
+    this.updateChecksum();
+  }
+
+  static buildEmpty() {
+    return new LiteratureMap({
+      collectionRefs: Immutable.List(),
+      sampleRefs: Immutable.List(),
+      reactionRefs: Immutable.List(),
+      researchPlanRefs: Immutable.List(),
+      selectedRefs: Immutable.List(),
+      collection_id: null,
+      is_sync: false
+    });
+  }
+
+  static buildID() {
+    return uuid.v1();
+  }
+
+  get isEdited() {
+    return this._checksum != this.checksum();
+  }
+
+  checksum(fieldsToOmit = []) {
+    return sha256(JSON.stringify(_.omit(_.omit(
+      this,
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'sealed', ...fieldsToOmit],
+    ), _.isEmpty)));
+  }
+
+  get getChecksum() {
+    return this._checksum
+  }
+
+  get isNew() {
+    return this.is_new === true
+  }
+
+  get isPendingToSave() {
+    return !_.isEmpty(this) && (this.isNew || this.isEdited);
+  }
+
+  title() {
+    return 'Literature';
+  }
+
+  updateChecksum(cs) {
+    if (cs) {
+      this._checksum = cs
+    } else {
+      this._checksum = this.checksum();
+    }
+  }
+
+  buildCopy() {
+    return new this.constructor(_.omit(this, 'id'))
+  }
+
+  clone() {
+    return new this.constructor(this);
+  }
+
+  // methods regarding sharing and detail levels
+  isRestricted() {
+    return this.is_restricted;
+  }
+
+  // base serializer
+  serialize(extraParams = {}) {
+    const params = {
+      id: this.id,
+      type: this.type,
+      is_new: this.isNew || false,
+      collection_id: this.collection_id
+    };
+    _.merge(params, extraParams);
+    const paramsWithoutNullEntries = _.omit(params, _.isNull);
+    const cleanParams = _.omit(paramsWithoutNullEntries, x => (x === '***'));
+    return cleanParams;
+  }
+
+  // Default empty quill-delta
+  static quillDefault() {
+    return { "ops": [{ "insert": "" }] }
+  }
+}
diff --git a/app/packs/src/components/models/Molecule.js b/app/packs/src/components/models/Molecule.js
new file mode 100644
index 000000000..2e6e17a94
--- /dev/null
+++ b/app/packs/src/components/models/Molecule.js
@@ -0,0 +1,18 @@
+import Element from 'src/models/Element';
+
+export default class Molecule extends Element {
+  get svgPath() {
+    return this.molecule_svg_file && `/images/molecules/${this.molecule_svg_file}`
+  }
+
+  serialize() {
+    return ({
+      density: this.density,
+      melting_point: this.melting_point,
+      boiling_point: this.boiling_point,
+      inchistring: this.inchistring,
+      cano_smiles: this.cano_smiles,
+      inchikey: this.inchikey,
+    })
+  }
+}
diff --git a/app/packs/src/components/models/Prediction.js b/app/packs/src/components/models/Prediction.js
new file mode 100644
index 000000000..809ec47b1
--- /dev/null
+++ b/app/packs/src/components/models/Prediction.js
@@ -0,0 +1,11 @@
+import Element from './Element';
+
+export default class Prediction extends Element {
+  static buildEmpty() {
+    const prediction = new Prediction({
+      type: 'prediction',
+    });
+
+    return prediction;
+  }
+}
diff --git a/app/packs/src/components/models/PrivateNote.js b/app/packs/src/components/models/PrivateNote.js
new file mode 100644
index 000000000..95a08881a
--- /dev/null
+++ b/app/packs/src/components/models/PrivateNote.js
@@ -0,0 +1,58 @@
+/* eslint-disable no-underscore-dangle,  camelcase, semi,  no-unused-vars */
+import Element from './Element';
+
+export default class PrivateNote extends Element {
+  static buildEmpty() {
+    return new PrivateNote({
+      content: '',
+      noteable_id: null,
+      noteable_type: null,
+      created_by: null,
+      created_at: null,
+    });
+  }
+
+  static buildWithElement(element) {
+
+  }
+
+  get content() {
+    return this._content;
+  }
+
+  set content(content) {
+    this._content = content;
+  }
+
+  get noteable_id() {
+    return this._noteable_id;
+  }
+
+  set noteable_id(noteable_id) {
+    this._noteable_id = noteable_id;
+  }
+
+  get created_by() {
+    return this._created_by;
+  }
+  set created_by(created_by) {
+    this._created_by = created_by;
+  }
+
+  get noteable_type() {
+    return this._noteable_type;
+  }
+
+  set noteable_type(noteable_type) {
+    this._noteable_type = noteable_type;
+  }
+
+  serialize() {
+    return super.serialize({
+      content: this.content,
+      noteable_id: this.noteable_id,
+      noteable_type: this.noteable_type,
+      created_by: this.created_by
+    })
+  }
+}
diff --git a/app/packs/src/components/models/Reaction.js b/app/packs/src/components/models/Reaction.js
new file mode 100644
index 000000000..f44a5decc
--- /dev/null
+++ b/app/packs/src/components/models/Reaction.js
@@ -0,0 +1,978 @@
+import {
+  isEmpty,
+  round,
+  cloneDeep
+} from 'lodash';
+import Delta from 'quill-delta';
+import moment from 'moment';
+import 'moment-precise-range-plugin';
+
+import Element from 'src/models/Element';
+import Sample from 'src/models/Sample';
+import Container from 'src/models/Container';
+
+import UserStore from 'src/stores/alt/stores/UserStore';
+import Segment from 'src/models/Segment';
+
+import {
+  removeObsoleteMaterialsFromVariations,
+  addMissingMaterialsToVariations,
+  updateYields,
+  updateEquivalents,
+} from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils';
+
+const TemperatureUnit = ['°C', '°F', 'K'];
+
+const TemperatureDefault = {
+  valueUnit: '°C',
+  userText: '',
+  data: []
+};
+
+export const convertTemperature = (temperature, fromUnit, toUnit) => {
+  const conversionTable = {
+    'K': {
+      '°C': (t) => parseFloat(t) - 273.15,
+      '°F': (t) => (parseFloat(t) * 9 / 5) - 459.67
+    },
+    '°C': {
+      'K': (t) => parseFloat(t) + 273.15,
+      '°F': (t) => (parseFloat(t) * 1.8) + 32
+    },
+    '°F': {
+      'K': (t) => (parseFloat(t) + 459.67) * 5 / 9,
+      '°C': (t) => (parseFloat(t) - 32) / 1.8
+    }
+  };
+  return conversionTable[fromUnit][toUnit](temperature);
+};
+
+const MomentUnit = {
+  'Week(s)': 'weeks',
+  'Day(s)': 'days',
+  'Hour(s)': 'hours',
+  'Minute(s)': 'minutes',
+  'Second(s)': 'seconds',
+};
+
+const LegMomentUnit = {
+  'Year(s)': 'years',
+  'Month(s)': 'months',
+  ...MomentUnit
+};
+
+const DurationUnit = [
+  // 'Year(s)',
+  // 'Month(s)',
+  'Week(s)',
+  'Day(s)',
+  'Hour(s)',
+  'Minute(s)',
+  'Second(s)'
+];
+
+const DurationDefault = {
+  dispUnit: 'Hour(s)',
+  dispValue: '',
+  memValue: null,
+  memUnit: 'Hour(s)'
+};
+
+export const convertDuration = (value, unit, newUnit) => {
+  const d = moment.duration(Number.parseFloat(value), LegMomentUnit[unit])
+    .as(MomentUnit[newUnit]);
+  return round(d, 1).toString();
+};
+
+const durationDiff = (startAt, stopAt, precise = false) => {
+  if (startAt && stopAt) {
+    const start = moment(startAt, 'DD-MM-YYYY HH:mm:ss');
+    const stop = moment(stopAt, 'DD-MM-YYYY HH:mm:ss');
+    if (start < stop) {
+      return precise ? moment.preciseDiff(start, stop) : moment.duration(stop.diff(start));
+    }
+  }
+  return null;
+};
+
+const highestUnitFromDuration = (d, threshold = 1.0) => {
+  if (d.asWeeks() >= threshold) { return 'Week(s)'; }
+  if (d.asDays() >= threshold) { return 'Day(s)'; }
+  if (d.asHours() >= threshold) { return 'Hour(s)'; }
+  if (d.asMinutes() >= threshold) { return 'Minute(s)'; }
+  if (d.asSeconds() >= threshold) { return 'Second(s)'; }
+  return 'Hour(s)';
+};
+
+export default class Reaction extends Element {
+  static buildEmpty(collection_id) {
+    const reaction = new Reaction({
+      collection_id,
+      container: Container.init(),
+      dangerous_products: '',
+      conditions: '',
+      description: Reaction.quillDefault(),
+      duration: '',
+      durationDisplay: DurationDefault,
+      literatures: {},
+      research_plans: {},
+      name: '',
+      observation: Reaction.quillDefault(),
+      products: [],
+      publication: {},
+      purification: '',
+      purification_solvents: [],
+      reactants: [],
+      rf_value: 0.00,
+      role: '',
+      solvent: '',
+      solvents: [],
+      status: '',
+      starting_materials: [],
+      temperature: TemperatureDefault,
+      timestamp_start: '',
+      timestamp_stop: '',
+      tlc_description: '',
+      tlc_solvents: '',
+      type: 'reaction',
+      can_update: true,
+      can_copy: false,
+      variations: []
+    })
+
+    reaction.short_label = this.buildReactionShortLabel()
+    reaction.rxno = '';
+    return reaction
+  }
+
+  static buildReactionShortLabel() {
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) { return 'New Reaction'; }
+
+    const number = currentUser.reactions_count + 1;
+    const prefix = currentUser.reaction_name_prefix;
+    return `${currentUser.initials}-${prefix}${number}`;
+  }
+
+  get is_published() {
+    return this.publication && this.publication.state === 'completed';
+  }
+
+  static get temperature_unit() {
+    return TemperatureUnit;
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  serialize() {
+    return super.serialize({
+      collection_id: this.collection_id,
+      container: this.container,
+      description: this.description,
+      dangerous_products: this.dangerous_products,
+      conditions: this.conditions,
+      duration: this.duration,
+      durationDisplay: this.durationDisplay,
+      durationCalc: this.durationCalc(),
+      id: this.id,
+      is_published: this.is_published,
+      literatures: this.literatures,
+      research_plans: this.research_plans,
+      materials: {
+        starting_materials: this.starting_materials.map(s => s.serializeMaterial()),
+        reactants: this.reactants.map(s => s.serializeMaterial()),
+        solvents: this.solvents.map(s => s.serializeMaterial()),
+        purification_solvents: this.purification_solvents.map(s => s.serializeMaterial()),
+        products: this.products.map(s => s.serializeMaterial())
+      },
+      name: this.name,
+      observation: this.observation,
+      origin: this.origin,
+      publication: this.publication,
+      purification: this.purification,
+      tlc_solvents: this.tlc_solvents,
+      tlc_description: this.tlc_description,
+      reaction_svg_file: this.reaction_svg_file,
+      role: this.role,
+      rf_value: this.rf_value,
+      rxno: this.rxno,
+      short_label: this.short_label,
+      solvent: this.solvent,
+      status: this.status,
+      temperature: this.temperature,
+      timestamp_start: this.timestamp_start,
+      timestamp_stop: this.timestamp_stop,
+      segments: this.segments.map(s => s.serialize()),
+      variations: this.variations
+    });
+  }
+
+  set variations(variations) {
+    // variations data structure (also see Entities::ReactionVariationEntity):
+    // [
+    //   {
+    //     "id": <number>,
+    //     "properties": {
+    //         "temperature": {"value": <number>, "unit": <string>},
+    //         "duration": {"value": <number>, "unit": <string>}
+    //     },
+    //     "startingMaterials": {
+    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         ...
+    //     },
+    //     "reactants": {
+    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         ...
+    //     },
+    //     "products": {
+    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         ...
+    //     },
+    //     "solvents": {
+    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
+    //         ...
+    //     },
+    //   },
+    //   {
+    //     "id": "<number>",
+    //     ...
+    //   },
+    //   ...
+    // ]
+    if (!Array.isArray(variations) || !variations.length) {
+      this._variations = [];
+    } else {
+      const currentMaterials = {
+        startingMaterials: this.starting_materials,
+        reactants: this.reactants,
+        products: this.products,
+        solvents: this.solvents
+      };
+      // Keep set of materials up-to-date. Materials could have been added or removed in the scheme tab
+      // (of the reaction detail modal); these changes need to be reflected in the variations.
+      let updatedVariations = removeObsoleteMaterialsFromVariations(variations, currentMaterials);
+      updatedVariations = addMissingMaterialsToVariations(updatedVariations, currentMaterials);
+      // The products' yields need to be updated, since the products' amounts could have been edited in
+      // the variations tab (of the reaction detail modal).
+      updatedVariations = updateYields(updatedVariations, this.hasPolymers());
+      // A potential change in the reference material's amount needs to be reflected in the remaining materials' equivalents.
+      updatedVariations = updateEquivalents(updatedVariations);
+
+      this._variations = updatedVariations;
+    }
+  }
+
+  get variations() {
+    return this._variations;
+  }
+
+  // Reaction Duration
+
+  durationCalc() {
+    return durationDiff(this.timestamp_start, this.timestamp_stop, true);
+  }
+
+  get durationDisplay() {
+    return this._durationDisplay;
+  }
+
+  set durationDisplay(newDuration) {
+    const { fromStartStop, nextUnit, nextValue } = newDuration;
+    const {
+      dispUnit, memUnit, memValue
+    } = this._durationDisplay || {};
+
+    if (fromStartStop) {
+      const d = durationDiff(this.timestamp_start, this.timestamp_stop);
+      if (d) {
+        const dUnit = highestUnitFromDuration(d);
+        const val = d.as(MomentUnit[dUnit]);
+        const dispValue = round(val, 1).toString();
+        this._durationDisplay = {
+          dispUnit: dUnit,
+          dispValue,
+          memUnit: dUnit,
+          memValue: val.toString(),
+        };
+        this._duration = `${dispValue} ${dUnit}`;
+      }
+    } else if (nextValue || nextValue === '') {
+      this._durationDisplay = {
+        dispValue: nextValue,
+        dispUnit,
+        memUnit,
+        memValue: nextValue
+      };
+      this._duration = `${nextValue} ${dispUnit}`;
+    } else if (nextUnit) {
+      const index = DurationUnit.indexOf(this._durationDisplay.dispUnit);
+      const u = DurationUnit[(index + 1) % DurationUnit.length];
+      const dispValue = convertDuration(memValue, memUnit, u);
+      this._durationDisplay = {
+        dispUnit: u,
+        dispValue,
+        memUnit,
+        memValue
+      };
+      this._duration = `${dispValue} ${u}`;
+    }
+  }
+
+  get duration() {
+    return this._duration;
+  }
+
+  set duration(duration) {
+    this._duration = duration;
+  }
+
+  get durationUnit() {
+    return this._durationDisplay.dispUnit;
+  }
+
+  convertDurationDisplay() {
+    const duration = this._duration;
+    if (this._durationDisplay && this._durationDisplay.memValue !== '') { return null; }
+    const m = duration && duration.match(/(\d+\.?(\d+)?)\s+([\w()]+)/)
+    if (m) {
+      this._durationDisplay = {
+        dispUnit: m[3],
+        memUnit: m[3],
+        dispValue: m[1],
+        memValue: m[1],
+        ...this._durationDisplay
+      };
+      return null;
+    }
+    this._durationDisplay = { ...DurationDefault };
+    return null;
+  }
+
+  // Reaction Temperature
+
+  get temperature_display() {
+    const userText = this._temperature.userText;
+    if (userText !== '') { return userText; }
+
+    if (this._temperature.data.length === 0) { return ''; }
+
+    const arrayData = this._temperature.data;
+    const maxTemp = Math.max(...arrayData.map(o => o.value));
+    const minTemp = Math.min(...arrayData.map(o => o.value));
+
+    if (minTemp === maxTemp) { return minTemp; }
+    return `${minTemp} ~ ${maxTemp}`;
+  }
+
+
+  get temperature() {
+    return this._temperature
+  }
+
+  set temperature(temperature) {
+    this._temperature = temperature
+  }
+
+  get description_contents() {
+    return this.description.ops.map(s => s.insert).join()
+  }
+
+  get observation_contents() {
+    return this.observation.ops.map(s => s.insert).join()
+  }
+
+  concat_text_observation(content) {
+    const insertDelta = new Delta().insert(content);
+    const observationDelta = new Delta(this.observation);
+    const composedDelta = observationDelta.concat(insertDelta);
+    this.observation = composedDelta;
+  }
+
+  convertTemperature(newUnit) {
+    const temperature = this._temperature
+    const oldUnit = temperature.valueUnit;
+    temperature.valueUnit = newUnit;
+
+    // If userText is number only, treat as normal temperature value
+    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature.userText)) {
+      temperature.userText = convertTemperature(temperature.userText, oldUnit, newUnit).toFixed(2);
+
+      return temperature;
+    }
+
+    temperature.data.forEach((data, index, theArray) => {
+      theArray[index].value = convertTemperature(data.value, oldUnit, newUnit).toFixed(2);
+    });
+
+    return temperature;
+  }
+
+  get short_label() {
+    return this._short_label
+  }
+
+  set short_label(short_label) {
+    this._short_label = short_label
+  }
+
+  get tlc_solvents() {
+    return this._tlc_solvents
+  }
+
+  set tlc_solvents(solvents) {
+    this._tlc_solvents = solvents
+  }
+
+  get starting_materials() {
+    return this._starting_materials
+  }
+
+  set starting_materials(samples) {
+    this._starting_materials = this._coerceToSamples(samples);
+  }
+
+  get solvents() {
+    return this._solvents
+  }
+
+  set solvents(samples) {
+    this._solvents = this._coerceToSamples(samples);
+  }
+
+  get purification_solvents() {
+    return this._purification_solvents;
+  }
+
+  set purification_solvents(samples) {
+    this._purification_solvents = this._coerceToSamples(samples);
+  }
+
+  get reactants() {
+    return this._reactants
+  }
+
+  set reactants(samples) {
+    this._reactants = this._coerceToSamples(samples);
+  }
+
+  get products() {
+    return this._products
+  }
+
+  set products(samples) {
+    this._products = this._coerceToSamples(samples);
+  }
+
+  get publication() {
+    return this._publication
+  }
+
+  set publication(publication) {
+    this._publication = publication
+  }
+  get samples() {
+    return [
+      ...this.starting_materials || [],
+      ...this.reactants || [],
+      ...this.solvents || [],
+      ...this.purification_solvents || [],
+      ...this.products || [],
+    ];
+  }
+
+  buildCopy(params = {}) {
+    const copy = super.buildCopy();
+    Object.assign(copy, params);
+    copy.short_label = Reaction.buildReactionShortLabel();
+    copy.starting_materials = this.starting_materials.map(
+      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
+    );
+    copy.reactants = this.reactants.map(
+      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
+    );
+    copy.solvents = this.solvents.map(
+      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
+    );
+    copy.products = this.products.map(
+      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id, true, true, false)
+    );
+
+    copy.rebuildProductName();
+    copy.container = Container.init();
+    copy.can_update = true;
+    copy.can_copy = false;
+    return copy;
+  }
+
+
+  static copyFromReactionAndCollectionId(reaction, collection_id) {
+    const target = Segment.buildCopy(reaction.segments);
+    const params = {
+      collection_id,
+      role: 'parts',
+      segments: target,
+      timestamp_start: '',
+      segments: target,
+      timestamp_stop: '',
+      publication: {},
+      rf_value: 0.00,
+      status: '',
+    }
+    const copy = reaction.buildCopy(params);
+    copy.origin = { id: reaction.id, short_label: reaction.short_label };
+    copy.name = copy.nameFromRole(copy.role);
+    return copy;
+  }
+
+  title() {
+    const short_label = this.short_label ? this.short_label : ''
+    return this.name ? `${short_label} ${this.name}` : short_label
+  }
+
+  addMaterial(material, group) {
+    const materials = this[group];
+    const newMaterial = this.materialPolicy(material, null, group);
+    this[group] = [...materials, newMaterial];
+
+    this.rebuildReference(newMaterial);
+    this.setPositions(group);
+  }
+
+  addMaterialAt(srcMaterial, srcGp, tagMaterial, tagGp) {
+    const materials = this[tagGp];
+    const idx = materials.indexOf(tagMaterial);
+    const newSrcMaterial = this.materialPolicy(srcMaterial, srcGp, tagGp);
+
+    if (idx === -1) {
+      this[tagGp] = [...materials, newSrcMaterial];
+    } else {
+      this[tagGp] = [
+        ...materials.slice(0, idx),
+        newSrcMaterial,
+        ...materials.slice(idx),
+      ];
+    }
+
+    this.rebuildReference(newSrcMaterial);
+    this.setPositions(tagGp);
+  }
+
+  deleteMaterial(material, group) {
+    const materials = this[group];
+    const idx = materials.indexOf(material);
+    this[group] = [
+      ...materials.slice(0, idx),
+      ...materials.slice(idx + 1),
+    ];
+
+    this.rebuildReference(material);
+    this.setPositions(group);
+  }
+
+  swapMaterial(srcMaterial, tagMaterial, group) {
+    const srcIdx = this[group].indexOf(srcMaterial);
+    const tagIdx = this[group].indexOf(tagMaterial);
+    const groupWoSrc = [
+      ...this[group].slice(0, srcIdx),
+      ...this[group].slice(srcIdx + 1),
+    ];
+    const newGroup = [
+      ...groupWoSrc.slice(0, tagIdx),
+      srcMaterial,
+      ...groupWoSrc.slice(tagIdx),
+    ];
+    this[group] = newGroup.filter(o => o != null) || [];
+
+    this.rebuildReference(srcMaterial);
+    this.setPositions(group);
+  }
+
+  moveMaterial(srcMaterial, srcGp, tagMaterial, tagGp) {
+    if (srcGp === tagGp) {
+      this.swapMaterial(srcMaterial, tagMaterial, tagGp);
+    } else {
+      this.deleteMaterial(srcMaterial, srcGp);
+      this.addMaterialAt(srcMaterial, srcGp, tagMaterial, tagGp);
+    }
+  }
+
+  setPositions(group) {
+    this[group] = this[group].map((m, idx) => (
+      Object.assign({}, m, { position: idx })
+    ));
+  }
+
+  // We will process all reaction policy here
+  // If oldGroup = null -> drag new Sample into Reaction
+  // Else -> moving between Material Group
+  materialPolicy(material, oldGroup, newGroup) {
+    if (newGroup == "products") {
+      material.amountType = 'real';
+
+      // we don't want to copy loading from sample
+      if (material.contains_residues) {
+        material.loading = 0.0;
+      }
+
+      material.isSplit = false;
+      material.reaction_product = true;
+      material.equivalent = 0;
+      material.reference = false;
+
+      if (material.parent_id) {
+        material.start_parent = material.parent_id
+        material.parent_id = null
+      }
+    } else if (
+      newGroup === "reactants" || newGroup === "solvents" ||
+      newGroup === "purification_solvents"
+    ) {
+      if (newGroup === "solvents") {
+        material.reference = false;
+      }
+
+      // Temporary set true, to fit with server side logical
+      material.isSplit = true;
+      material.reaction_product = false;
+    } else if (newGroup == "starting_materials") {
+      material.isSplit = true;
+      material.reaction_product = false;
+
+      if (material.start_parent && material.parent_id == null) {
+        material.parent_id = material.start_parent
+      }
+    }
+
+    this.shortLabelPolicy(material, oldGroup, newGroup);
+    this.namePolicy(material, oldGroup, newGroup);
+    if (!material.coefficient || material.coefficient < 0) {
+      material.coefficient = 1.0;
+    }
+    material.waste = false;
+
+    return material;
+  }
+
+  shortLabelPolicy(material, oldGroup, newGroup) {
+    if (oldGroup) {
+      // Save previous short_label
+      material[`short_label_${oldGroup}`] = material.short_label;
+
+      // Reassign previous short_label if present
+      if (material[`short_label_${newGroup}`]) {
+        material.short_label = material[`short_label_${newGroup}`];
+        return 0;
+      }
+      // routines below are for exisiting samples moved a first time
+      if (newGroup === 'products') {
+        // products are new samples => build new short_label
+        material.short_label = Sample.buildNewShortLabel();
+      } else if (newGroup === 'starting_materials') {
+        if (oldGroup !== 'products') {
+          // if starting_materials from products, reuse product short_label (do nothing)
+          material.short_label = Sample.buildNewShortLabel();
+        }
+      }
+      // else when newGroup is reactant/solvent do nothing because not displayed (short_label set in BE)
+    } else {
+      if (newGroup === "starting_materials") {
+        if (material.split_label) { material.short_label = material.split_label; }
+      } else if (newGroup === "products") {
+        // products are new samples => build new short_label
+        material.short_label = Sample.buildNewShortLabel();
+      } else {
+        material.short_label = newGroup.slice(0, -1); // "reactant" or "solvent"
+      }
+    }
+  }
+
+  namePolicy(material, oldGroup, newGroup) {
+    this.rebuildProductName();
+
+    if (oldGroup && oldGroup == "products") {
+      // Blank name if FROM "products"
+      material.name = "";
+      return 0;
+    }
+
+    if (newGroup == "products") {
+      let productName = String.fromCharCode('A'.charCodeAt(0) + this.products.length);
+      material.name = this.short_label + "-" + productName;
+    }
+  }
+
+  rebuildProductName() {
+    let short_label = this.short_label
+    this.products.forEach(function (product, index, arr) {
+      let productName = String.fromCharCode('A'.charCodeAt(0) + index);
+      arr[index].name = short_label + "-" + productName;
+    })
+  }
+
+  rebuildReference(material) {
+    if (this.referenceMaterial) {
+      let referenceMaterial = this.referenceMaterial
+      let reference = this.starting_materials.find(function (m) {
+        return referenceMaterial.id === m.id;
+      })
+
+      // if referenceMaterial exists,
+      // referenceMaterialGroup must be either 'starting_materials' or 'reactants'
+      if (!reference) reference = this.reactants.find(m => m.id === referenceMaterial.id);
+
+      if (!reference && this.starting_materials.length > 0) {
+        this._setAsReferenceMaterial(this.starting_materials[0]);
+      } else {
+        this._updateEquivalentForMaterial(material);
+      }
+    }
+
+    this.products.forEach(function (product, index, arr) {
+      arr[index].reference = false;
+    })
+  }
+
+  _coerceToSamples(samples) {
+    return samples && samples.map(s => new Sample(s)) || []
+  }
+
+  sampleById(sampleID) {
+    return this.samples.find((sample) => {
+      return sample.id == sampleID;
+    })
+  }
+
+  get referenceMaterial() {
+    return this.samples.find((sample) => {
+      return sample.reference;
+    })
+  }
+
+  get sampleCount() {
+    return this.samples.length;
+  }
+
+  markSampleAsReference(sampleID) {
+    this.samples.forEach((sample) => {
+      sample.reference = sample.id == sampleID;
+    })
+  }
+
+  toggleShowLabelForSample(sampleID) {
+    const sample = this.sampleById(sampleID);
+    sample.show_label = ((sample.decoupled && !sample.molfile) ? true : !sample.show_label);
+  }
+
+  _setAsReferenceMaterial(sample) {
+    sample.equivalent = 1;
+    sample.reference = true;
+  }
+
+  _updateEquivalentForMaterial(sample) {
+    if (this.referenceMaterial && this.referenceMaterial.amount_mol) {
+      sample.equivalent = sample.amount_mol / this.referenceMaterial.amount_mol;
+    }
+  }
+
+  get svgPath() {
+    if (this.reaction_svg_file && this.reaction_svg_file != '***') {
+      if (this.reaction_svg_file.includes('<svg')) {
+        return this.reaction_svg_file
+      } else if (this.reaction_svg_file.substr(this.reaction_svg_file.length - 4) === '.svg') {
+        return `/images/reactions/${this.reaction_svg_file}`
+      }
+    }
+    else
+      return `images/wild_card/no_image_180.svg`
+  }
+
+  SMGroupValid() {
+    let result = true;
+    this.starting_materials.map((sample) => {
+      if (!sample.isValid)
+        result = false;
+    });
+
+    return result;
+  }
+
+  hasMaterials() {
+    return this.starting_materials.length > 0 || this.reactants.length > 0 || this.solvents.length > 0 || this.products.length > 0;
+  }
+
+  hasSample(sampleId) {
+    return this.samples.find((sample) => {
+      return sample.id == sampleId
+    });
+  }
+
+  hasPolymers() {
+    return this.samples.find((sample) => {
+      return sample.contains_residues
+    });
+  }
+
+  getReferenceMaterial() {
+    return this.referenceMaterial;
+  }
+
+  updateMaterial(material, refreshCoefficient) {
+    const cats = ['starting_materials', 'reactants', 'solvents', 'products'];
+    let i = 0;
+    let group;
+
+    while (i < cats.length) {
+      const groupName = `_${cats[i]}`;
+      group = this[groupName];
+      if (group) {
+        const index = group.findIndex(x => x.id === material.id);
+        if (index >= 0) {
+          const mat = new Sample(material);
+          mat.reference = group[index].reference;
+          mat.updateChecksum();
+          group[index] = mat;
+          break;
+        }
+      }
+
+      i += 1;
+    }
+    this.refreshEquivalent(material, refreshCoefficient);
+  }
+
+  refreshEquivalent(material, refreshCoefficient) {
+    let matGroup;
+    const refMat = this.samples.find((sample) => sample.reference);
+    if (refMat && refMat.amount_mol) {
+      ['_starting_materials', '_reactants', '_solvents', '_products'].forEach((g) => {
+        matGroup = this[g];
+        if (matGroup) {
+          this[g] = matGroup.map((mat) => {
+            const m = mat;
+            if (m.id === material.id) {
+              if (refreshCoefficient && m.id === refreshCoefficient.sId) {
+                m.coefficient = refreshCoefficient.coefficient;
+              }
+            }
+
+            if (g === '_products') {
+              const stoichiometryCoeff = (m.coefficient || 1.0) / (refMat?.coefficient || 1.0);
+              m.equivalent = m.amount_mol / refMat.amount_mol / stoichiometryCoeff;
+            } else {
+              m.equivalent = m.amount_mol / refMat.amount_mol;
+            }
+            return m;
+          });
+        }
+      });
+    }
+  }
+
+  // literatures
+
+  get literatures() {
+    return this._literatures || {};
+  }
+
+  get research_plans() {
+      return this._research_plans || {};
+    }
+
+  set literatures(literatures) {
+    this._literatures = literatures;
+  }
+
+  set research_plans(research_plans) {
+    this._research_plans = research_plans;
+  }
+
+  get totalVolume() {
+    let totalVolume = 0.0;
+    const materials = [...this.starting_materials,
+      ...this.reactants,
+      ...this.products,
+      ...this.solvents];
+    materials.map(m => totalVolume += m.amount_l);
+    return totalVolume;
+  }
+
+  get solventVolume() {
+    let solventVolume = 0.0;
+    const materials = [...this.solvents];
+    materials.map(m => solventVolume += m.amount_l);
+    return solventVolume;
+  }
+
+  // overwrite isPendingToSave method in models/Element.js
+  get isPendingToSave() {
+    return !isEmpty(this) && (this.isNew || this.changed);
+  }
+
+  extractNameFromOri(origin) {
+    const ori = origin || this.origin;
+    const oriSLabel = ori && ori.short_label;
+    const oriSLNum = oriSLabel ? oriSLabel.split('-').slice(-1)[0] : 'xx';
+    const name = `According to General Procedure ${oriSLNum}`;
+    return name;
+  }
+
+  nameFromRole(role) {
+    let name = this.name;
+    const sLabel = this.short_label;
+    const sLNum = sLabel ? sLabel.split('-').slice(-1)[0] : 'xx';
+
+    switch (role) {
+      case 'gp':
+        name = `General Procedure ${sLNum}`;
+        break;
+      case 'parts':
+        name = this.extractNameFromOri();
+        break;
+      case 'single':
+        name = `Single ${sLNum}`;
+        break;
+      default:
+        break;
+    }
+    return name;
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+
+  updateMaxAmountOfProducts() {
+    const startingMaterialsList = this.starting_materials.filter(sample => sample.reference);
+    if (startingMaterialsList.length == 0) { return; }
+    const referenceSample = startingMaterialsList[0];
+
+    this.products.forEach(product => product.calculateMaxAmount(referenceSample));
+
+  }
+
+  get notPublishable() {
+    // NB: in reaction samples, can_publish is only serialized for products
+    // const unpublishableSamples = this.samples.filter(s => !s.can_publish);
+    const unpublishableSamples = this.products.filter(s => !s.can_publish);
+    return unpublishableSamples.length > 0 && unpublishableSamples;
+  }
+
+  analysisArray() {
+    const analyses = this.container && this.container.children.find(c => (c && c.container_type === 'analyses'));
+    return analyses ? analyses.children : [];
+  }
+}
diff --git a/app/packs/src/components/models/Report.js b/app/packs/src/components/models/Report.js
new file mode 100644
index 000000000..a278b8c07
--- /dev/null
+++ b/app/packs/src/components/models/Report.js
@@ -0,0 +1,11 @@
+import Element from 'src/models/Element';
+
+export default class Report extends Element {
+  static buildEmpty() {
+    let report = new Report({
+      type: 'report'
+    });
+
+    return report;
+  }
+}
diff --git a/app/packs/src/components/models/ReportTemplate.js b/app/packs/src/components/models/ReportTemplate.js
new file mode 100644
index 000000000..8b6aaff4c
--- /dev/null
+++ b/app/packs/src/components/models/ReportTemplate.js
@@ -0,0 +1,27 @@
+import Element from './Element';
+
+export default class ReportTemplate extends Element {
+
+  constructor({id, name, report_type, attachment, attachment_id}) {
+    const reportTemplate = {
+      id,
+      name,
+      report_type,
+      attachment,
+      attachment_id,
+    }
+
+    super(reportTemplate)
+  }
+
+  serialize() {
+    return super.serialize({
+      id: this.id,
+      name: this.name,
+      report_type: this.report_type,
+      attachment: this.attachment,
+      attachment_id: this.attachment_id,
+    })
+  }
+
+}
diff --git a/app/packs/src/components/models/ResearchPlan.js b/app/packs/src/components/models/ResearchPlan.js
new file mode 100644
index 000000000..6e0fec042
--- /dev/null
+++ b/app/packs/src/components/models/ResearchPlan.js
@@ -0,0 +1,188 @@
+import { isEmpty } from 'lodash';
+import Element from './Element';
+import Container from './Container';
+import Segment from './Segment';
+
+const uuidv4 = require('uuid/v4');
+
+const columns = [
+  {
+    headerName: 'a',
+    field: 'a',
+    colId: 'a'
+  },
+  {
+    headerName: 'b',
+    field: 'b',
+    colId: 'b'
+  },
+  {
+    headerName: 'c',
+    field: 'c',
+    colId: 'c'
+  },
+  {
+    headerName: 'd',
+    field: 'd',
+    colId: 'd'
+  },
+  {
+    headerName: 'e',
+    field: 'e',
+    colId: 'e'
+  },
+  {
+    headerName: 'f',
+    field: 'f',
+    colId: 'f'
+  }
+];
+
+
+export default class ResearchPlan extends Element {
+  constructor(args) {
+    super(args);
+    this.mode = args.mode ? args.mode : 'view';
+  }
+
+  static buildEmpty(collectionId) {
+    return new ResearchPlan({
+      collection_id: collectionId,
+      type: 'research_plan',
+      name: 'New Research Plan',
+      body: [],
+      mode: 'edit',
+      container: Container.init(),
+      changed: true,
+      can_update: true,
+      attachments: [],
+      segments: []
+    });
+  }
+
+  serialize() {
+    return super.serialize({
+      name: this.name,
+      body: this.body,
+      attachments: this.attachments,
+      container: this.container,
+      segments: this.segments.map(s => s.serialize())
+    });
+  }
+
+
+  analysesContainers() {
+    if (this.container.children.length === 0) {
+      const analyses = Container.buildEmpty();
+      analyses.container_type = 'analyses';
+      this.container.children.push(analyses);
+    }
+    return this.container
+      .children
+      .filter(el => ~el.container_type.indexOf('analyses'));
+  }
+
+  addBodyField(type) {
+    switch (type) {
+      case 'richtext':
+        this.body.push({
+          id: uuidv4(),
+          type: 'richtext',
+          title: 'Text',
+          value: null
+        });
+        break;
+      case 'ketcher':
+        this.body.push({
+          id: uuidv4(),
+          type: 'ketcher',
+          value: {
+            svg_file: null,
+            thumb_svg: null
+          }
+        });
+        break;
+      case 'table':
+        this.body.push({
+          id: uuidv4(),
+          type: 'table',
+          value: {
+            columns,
+            rows: [
+              {
+                a: '', b: '', c: '', d: '', e: '', f: ''
+              },
+              {
+                a: '', b: '', c: '', d: '', e: '', f: ''
+              },
+              {
+                a: '', b: '', c: '', d: '', e: '', f: ''
+              },
+            ]
+          }
+        });
+        break;
+      case 'image':
+        this.body.push({
+          id: uuidv4(),
+          type: 'image',
+          value: {
+            file_name: null,
+            public_name: null,
+            zoom: null
+          }
+        });
+        break;
+      case 'sample':
+        this.body.push({
+          id: uuidv4(),
+          type: 'sample',
+          value: {
+            sample_id: null
+          }
+        });
+        break;
+      case 'reaction':
+        this.body.push({
+          id: uuidv4(),
+          type: 'reaction',
+          value: {
+            reaction_id: null
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  }
+
+  get svgPath() {
+    for (let i = 0; i < this.body.length; i += 1) {
+      if (this.body[i].type === 'ketcher') {
+        return `/images/research_plans/${this.body[i].value.svg_file}`;
+      }
+    }
+    return '/images/wild_card/no_image_180.svg';
+  }
+
+  // overwrite isPendingToSave method in models/Element.js
+  get isPendingToSave() {
+    return !isEmpty(this) && (this.isNew || this.changed);
+  }
+
+  get mode() {
+    return this._mode;
+  }
+
+  set mode(mode) {
+    this._mode = mode;
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+}
diff --git a/app/packs/src/components/models/Sample.js b/app/packs/src/components/models/Sample.js
new file mode 100644
index 000000000..72638cffa
--- /dev/null
+++ b/app/packs/src/components/models/Sample.js
@@ -0,0 +1,1155 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable camelcase */
+import React from 'react';
+import _ from 'lodash';
+
+import Element from 'src/models/Element';
+import Molecule from 'src/models/Molecule';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import Container from 'src/models/Container';
+import Segment from 'src/models/Segment';
+
+const prepareRangeBound = (args = {}, field) => {
+  const argsNew = args;
+  if (args[field] && typeof args[field] === 'string') {
+    const bounds = args[field].split(/\.{2,3}/);
+    if (!args[`${field}_upperbound`]) {
+      argsNew[`${field}_upperbound`] = Number.POSITIVE_INFINITY === Number(bounds[1]) ? null : Number(bounds[1]);
+    }
+    if (!args[`${field}_lowerbound`]) {
+      argsNew[`${field}_lowerbound`] = Number.NEGATIVE_INFINITY === Number(bounds[0]) ? null : Number(bounds[0]);
+    }
+    if (argsNew[`${field}_upperbound`] == null || argsNew[`${field}_upperbound`] == null) {
+      argsNew[`${field}_display`] = (argsNew[`${field}_lowerbound`] || '').toString().trim();
+    } else {
+      argsNew[`${field}_display`] = ((argsNew[`${field}_lowerbound`] || '')
+        .toString().concat(' – ', argsNew[`${field}_upperbound`])).trim();
+    }
+  }
+  return argsNew;
+};
+
+export default class Sample extends Element {
+  // isMethodRestricted(m) {
+  //   return false;
+  // }
+
+  constructor(args) {
+    let argsNew = args;
+    argsNew = prepareRangeBound(argsNew, 'boiling_point');
+    argsNew = prepareRangeBound(argsNew, 'melting_point');
+    super(argsNew);
+  }
+
+  cleanBoilingMelting() {
+    this.boiling_point = null;
+    this.melting_point = null;
+  }
+
+  static copyFromSampleAndCollectionId(
+    sample,
+    collection_id,
+    structure_only = false,
+    keepResidueInfo = false,
+    keepExternalLabel = true
+  ) {
+    const newSample = sample.buildCopy();
+    newSample.collection_id = collection_id;
+    if (sample.name) { newSample.name = sample.name; }
+    if (sample.external_label) { newSample.external_label = sample.external_label; }
+    if (structure_only) {
+      newSample.filterSampleData();
+      newSample.filterResidueData(true);
+      // reset boiling/melting points for products on reaction copy
+      newSample.updateRange('boiling_point', '', '');
+      newSample.updateRange('melting_point', '', '');
+    } else {
+      newSample.filterResidueData(keepResidueInfo);
+    }
+
+    if (keepExternalLabel == false) {
+      newSample.external_label = '';
+    }
+
+    if (sample.elemental_compositions) {
+      newSample.elemental_compositions = sample.elemental_compositions;
+    }
+
+    newSample.filterElementalComposition();
+    newSample.segments = Segment.buildCopy(sample.segments);
+    return newSample;
+  }
+
+  filterElementalComposition() {
+    const elemComp = (this.elemental_compositions || []).find((item) => {
+      if (item.composition_type == 'formula') {
+        item.id = null;
+        return item;
+      }
+    });
+    this.elemental_compositions = elemComp ? [elemComp] : [];
+    this.elemental_compositions.push({
+      composition_type: 'found',
+      data: {},
+      description: 'Experimental'
+    });
+    return this;
+  }
+
+  setDefaultResidue() {
+    // set default polymer data
+    this.residues = [
+      {
+        residue_type: 'polymer',
+        custom_info: {
+          formula: 'CH',
+          loading: null,
+          polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
+          loading_type: 'external',
+          external_loading: 0.0,
+          reaction_product: (this.reaction_product ? true : null),
+          cross_linkage: null
+        }
+      }
+    ];
+  }
+
+  filterResidueData(keepResidueInfo = false) {
+    if (this.contains_residues) {
+      if (keepResidueInfo) {
+        // only reset loading
+        this.residues.map((residue) => {
+          Object.assign(residue.custom_info, {
+            external_loading: 0.0,
+            loading: null,
+            loading_type: 'external'
+          });
+        });
+      } else {
+        // set default polymer data
+        this.residues.map((residue) => {
+          Object.assign(residue, {
+            residue_type: 'polymer',
+            custom_info: {
+              formula: 'CH',
+              loading: (residue.custom_info ? residue.custom_info.loading : null),
+              polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
+              loading_type: 'external',
+              external_loading: 0.0,
+              reaction_product: (this.reaction_product ? true : null),
+              cross_linkage: null
+            }
+          });
+        });
+      }
+    }
+    return this;
+  }
+
+  filterSampleData() {
+    // reset to default values
+    this.target_amount_value = 0;
+    this.real_amount_value = 0;
+    this.description = '';
+    this.purity = 1;
+    this.equivalent = 0;
+    this.imported_readout = '';
+
+    return this;
+  }
+
+  static buildNewShortLabel() {
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) { return 'NEW SAMPLE'; }
+    return `${currentUser.initials}-${currentUser.samples_count + 1}`;
+  }
+
+  static defaultStereo() {
+    return { abs: 'any', rel: 'any' };
+  }
+
+  static buildEmpty(collection_id) {
+    const sample = new Sample({
+      collection_id,
+      type: 'sample',
+      external_label: '',
+      target_amount_value: 0,
+      target_amount_unit: 'g',
+      molarity_value: 0,
+      molarity_unit: 'M',
+      metrics: 'mmmm',
+      description: '',
+      purity: 1,
+      density: 0,
+      solvent: [],
+      location: '',
+      molfile: '',
+      molecule: { id: '_none_' },
+      residues: [],
+      elemental_compositions: [{
+        composition_type: 'found',
+        data: {}
+      }],
+      imported_readout: '',
+      attached_amount_mg: '', // field for polymers calculations
+      container: Container.init(),
+      can_update: true,
+      can_copy: false,
+      stereo: Sample.defaultStereo(),
+      decoupled: false,
+      inventory_sample: false,
+      molecular_mass: 0,
+      sum_formula: '',
+      xref: {}
+    });
+
+    sample.short_label = Sample.buildNewShortLabel();
+    return sample;
+  }
+
+  getChildrenCount() {
+    return parseInt(Sample.children_count[this.id] || this.children_count, 10);
+  }
+
+  buildSplitShortLabel() {
+    const children_count = this.getChildrenCount() + 1;
+    return `${this.short_label}-${children_count}`;
+  }
+
+  buildCopy() {
+    const sample = super.buildCopy();
+    sample.short_label = Sample.buildNewShortLabel();
+    sample.container = Container.init();
+    sample.can_update = true;
+    sample.can_copy = false;
+    return sample;
+  }
+
+  static buildNew(sample, collectionId, matGroup = null) {
+    const newSample = Sample.buildEmpty(collectionId);
+
+    if (matGroup === 'reactants' || matGroup === 'solvents') {
+      newSample.short_label = matGroup.slice(0, -1);
+    }
+    if (sample instanceof Sample) {
+      newSample.molecule = sample.molecule;
+      newSample.sample_svg_file = sample.sample_svg_file;
+    } else {
+      newSample.molecule = sample;
+    }
+    if (sample.stereo) {
+      const { abs, rel } = sample.stereo;
+      newSample.stereo = { abs, rel };
+    }
+    newSample.residues = sample.residues || [];
+    newSample.contains_residues = sample.contains_residues;
+    newSample.filterResidueData(true);
+    newSample.density = sample.density;
+    newSample.metrics = sample.metrics;
+    newSample.molfile = sample.molfile || '';
+    return newSample;
+  }
+
+  buildChild() {
+    Sample.counter += 1;
+    const splitSample = this.buildChildWithoutCounter();
+    splitSample.short_label = splitSample.split_label;
+    Sample.children_count[this.id] = this.getChildrenCount() + 1;
+
+    return splitSample;
+  }
+
+  buildChildWithoutCounter() {
+    const splitSample = this.clone();
+    splitSample.parent_id = this.id;
+    splitSample.id = Element.buildID();
+
+    if (this.name) { splitSample.name = this.name; }
+    if (this.external_label) { splitSample.external_label = this.external_label; }
+    if (this.elemental_compositions) {
+      splitSample.elemental_compositions = this.elemental_compositions;
+    }
+    splitSample.created_at = null;
+    splitSample.updated_at = null;
+    splitSample.target_amount_value = 0;
+    splitSample.real_amount_value = null;
+    splitSample.is_split = true;
+    splitSample.is_new = true;
+    splitSample.split_label = splitSample.buildSplitShortLabel();
+    // Todo ???
+    splitSample.container = Container.init();
+    return splitSample;
+  }
+
+  get isSplit() {
+    return this.is_split;
+  }
+
+  set isSplit(is_split) {
+    this.is_split = is_split;
+  }
+
+  serialize() {
+    const serialized = super.serialize({
+      name: this.name,
+      external_label: this.external_label,
+      target_amount_value: this.target_amount_value,
+      target_amount_unit: this.target_amount_unit,
+      real_amount_value: this.real_amount_value,
+      real_amount_unit: this.real_amount_unit,
+      molarity_value: this.molarity_value,
+      molarity_unit: this.molarity_unit,
+      description: this.description,
+      purity: this.purity,
+      short_label: this.short_label,
+      solvent: this.solvent,
+      location: this.location,
+      molfile: this.molfile,
+      molecule: this.molecule && this.molecule.serialize(),
+      molecule_id: this.molecule && (this.molecule.id === '_none_' ? null : this.molecule.id),
+      molecule_name_id: this.molecule_name && this.molecule_name.value,
+      sample_svg_file: this.sample_svg_file,
+      is_top_secret: this.is_top_secret || false,
+      dry_solvent: this.dry_solvent,
+      parent_id: this.parent_id,
+      density: this.density,
+      metrics: this.metrics,
+      boiling_point_upperbound: this.boiling_point_upperbound,
+      boiling_point_lowerbound: this.boiling_point_lowerbound,
+      melting_point_upperbound: this.melting_point_upperbound,
+      melting_point_lowerbound: this.melting_point_lowerbound,
+      residues: this.residues,
+      elemental_compositions: this.elemental_compositions,
+      is_split: this.is_split || false,
+      is_new: this.is_new,
+      imported_readout: this.imported_readout,
+      container: this.container,
+      xref: this.xref,
+      stereo: this.stereo,
+      user_labels: this.user_labels || [],
+      decoupled: this.decoupled,
+      molecular_mass: this.molecular_mass,
+      sum_formula: this.sum_formula,
+      inventory_sample: this.inventory_sample,
+      segments: this.segments.map((s) => s.serialize()),
+      is_repo_public: this.is_repo_public
+    });
+
+    return serialized;
+  }
+
+  get is_top_secret() {
+    return this._is_top_secret;
+  }
+
+  set is_top_secret(is_top_secret) {
+    this._is_top_secret = is_top_secret;
+  }
+
+  get dry_solvent() {
+    return this._dry_solvent;
+  }
+
+  set dry_solvent(dry_solvent) {
+    this._dry_solvent = dry_solvent;
+  }
+
+  set contains_residues(value) {
+    this._contains_residues = value;
+    if (value) {
+      if (!this.residues.length) {
+        this.setDefaultResidue();
+      } else {
+        this.residues[0]._destroy = undefined;
+      }
+
+      this.elemental_compositions.map((item) => {
+        if (item.composition_type == 'formula') { item._destroy = true; }
+      });
+    } else {
+      // this.sample_svg_file = '';
+      if (this.residues.length) { this.residues[0]._destroy = true; } // delete residue info
+
+      this.elemental_compositions.map((item) => {
+        if (item.composition_type == 'loading') { item._destroy = true; }
+      });
+    }
+  }
+
+  get contains_residues() {
+    return this._contains_residues;
+  }
+
+  title() {
+    const { profile } = UserStore.getState();
+    const show_external_name = profile ? profile.show_external_name : false;
+    const show_sample_name = profile ? profile.show_sample_name : false;
+    const { external_label } = this;
+    const extLabelClass = 'label--bold';
+    const { name } = this;
+    const { short_label } = this;
+
+    const { currentUser } = UserStore.getState();
+    let isRepoSecret = false;
+    if (this.is_repo_public) {
+      if (currentUser.is_reviewer || currentUser.id === this.created_by) isRepoSecret = false;
+      else isRepoSecret = true;
+    }
+
+    if(show_external_name && !isRepoSecret) {
+      return (external_label ? <span className={extLabelClass}>{external_label}</span> : short_label);
+    } if (show_sample_name) {
+      return (name ? <span className={extLabelClass}>{name}</span> : short_label);
+    }
+    return short_label;
+  }
+
+  get molecule_name_label() {
+    return this.molecule_name_hash && this.molecule_name_hash.label;
+  }
+
+  get molecule_name() {
+    return this.molecule_name_hash;
+  }
+
+  set molecule_name(mno) {
+    this.molecule_name_hash = mno;
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get is_repo_public() {
+    return this._is_repo_public;
+  }
+
+  set is_repo_public(is_repo_public) {
+    this._is_repo_public = is_repo_public;
+  }
+
+  get short_label() {
+    return this._short_label;
+  }
+
+  set short_label(short_label) {
+    this._short_label = short_label;
+  }
+
+  get external_label() {
+    return this._external_label;
+  }
+
+  set external_label(label) {
+    this._external_label = label;
+  }
+
+  get preferred_label() {
+    return this._external_label || this.molecule.iupac_name || this.molecule_formula;
+  }
+
+  set preferred_label(label) {
+    this._preferred_label = label;
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map((s) => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+
+  showedName() {
+    return this.showed_name;
+  }
+
+  userLabels() {
+    return this.user_labels;
+  }
+
+  iupac_name_tag(length) {
+    const iupac_name = this.molecule.iupac_name || '';
+    return iupac_name.length > length
+      ? `${iupac_name.slice(0, length)}...`
+      : iupac_name;
+  }
+
+  get location() {
+    return this._location;
+  }
+
+  set location(location) {
+    this._location = location;
+  }
+
+  get description() {
+    return this._description;
+  }
+
+  set description(description) {
+    this._description = description;
+  }
+
+  get metrics() {
+    return this._metrics || 'mmmm';
+  }
+
+  set metrics(metrics) {
+    this._metrics = metrics;
+  }
+
+  get molarity_value() {
+    return this._molarity_value;
+  }
+
+  set molarity_value(molarity_value) {
+    this._molarity_value = molarity_value;
+  }
+
+  get molarity_unit() {
+    return this._molarity_unit;
+  }
+
+  set molarity_unit(molarity_unit) {
+    this._molarity_unit = molarity_unit;
+  }
+
+  get imported_readout() {
+    return this._imported_readout;
+  }
+
+  set imported_readout(imported_readout) {
+    this._imported_readout = imported_readout;
+  }
+
+  updateRange(field, lower, upper) {
+    this[`${field}_lowerbound`] = lower;
+    this[`${field}_upperbound`] = upper;
+    if (lower === '' && upper === '') {
+      this[`${field}_display`] = lower.toString();
+      this[field] = lower.toString();
+    } else if (lower === upper) {
+      this[`${field}_upperbound`] = '';
+      this[`${field}_display`] = lower.toString();
+      this[field] = lower.toString().concat('...', Number.POSITIVE_INFINITY);
+    } else {
+      this[`${field}_display`] = (lower.toString().concat(' – ', upper)).trim();
+      this[field] = lower.toString().concat('..', upper);
+    }
+  }
+
+  setAmount(amount) {
+    if (amount.unit && !isNaN(amount.value)) {
+      this.amount_value = amount.value;
+      this.amount_unit = amount.unit;
+    }
+  }
+
+  setUnitMetrics(unit, metricPrefix) {
+    const mp = metricPrefix || 'm';
+    if (unit === 'l') {
+      this.metrics = (this.metrics && this.metrics.replace(/(.{1}).{1}/, `$1${mp}`)) || 'mmmm';
+    } else if (unit === 'mol') {
+      this.metrics = (this.metrics && this.metrics.replace(/(.{2}).{1}/, `$1${mp}`)) || 'mmmm';
+    } else if (unit === 'mol/l') {
+      if (this.metrics && this.metrics.length === 3) {
+        this.metrics += mp;
+      } else {
+        this.metrics = (this.metrics && this.metrics.replace(/(.{3}).{1}/, `$1${mp}`)) || 'mmmm';
+      }
+    } else {
+      this.metrics = (this.metrics && this.metrics.replace(/(.{0}).{1}/, `$1${mp}`)) || 'mmmm';
+    }
+  }
+
+  setAmountAndNormalizeToGram(amount) {
+    this.amount_value = this.convertToGram(amount.value, amount.unit);
+    this.amount_unit = 'g';
+  }
+
+  setMetrics(metrics) {
+    this.metrics = metrics.value;
+  }
+
+  setDensity(density) {
+    this.density = density.value;
+    this.molarity_value = 0;
+  }
+
+  setMolecularMass(mass) {
+    this.molecular_mass = mass.value;
+  }
+
+  setUserLabels(userLabels) {
+    this.user_labels = userLabels;
+  }
+
+  setMolarity(molarity) {
+    this.molarity_value = molarity.value;
+    this.molarity_unit = molarity.unit;
+    this.density = 0;
+  }
+
+  get amountType() {
+    return this._current_amount_type || this.defaultAmountType();
+  }
+
+  set amountType(amount_type) {
+    this._current_amount_type = amount_type;
+  }
+
+  defaultAmountType() {
+    return (this.real_amount_value ? 'real' : 'target');
+  }
+
+  get defined_part_amount() {
+    const mw = this.molecule_molecular_weight;
+    return this.amount_mol * mw / 1000.0;
+  }
+
+  // amount proxy
+
+  get amount() {
+    return ({
+      value: this.amount_value,
+      unit: this.amount_unit
+    });
+  }
+
+  get amount_value() {
+    return this.amountType === 'real' ? this.real_amount_value : this.target_amount_value;
+  }
+
+  set amount_value(amount_value) {
+    if (this.amountType === 'real') {
+      this.real_amount_value = amount_value;
+    } else {
+      this.target_amount_value = amount_value;
+    }
+  }
+
+  get amount_unit() {
+    return (this.amountType === 'real' ? this.real_amount_unit : this.target_amount_unit) || 'g';
+  }
+
+  set amount_unit(amount_unit) {
+    if (this.amountType === 'real') {
+      this.real_amount_unit = amount_unit;
+    } else {
+      this.target_amount_unit = amount_unit;
+    }
+  }
+
+  get has_molarity() {
+    return this.molarity_value > 0 && this.density === 0;
+  }
+
+  get has_density() {
+    return this.density > 0 && this.molarity_value === 0;
+  }
+
+  // target amount
+
+  get target_amount_value() {
+    return this._target_amount_value;
+  }
+
+  set target_amount_value(amount_value) {
+    this._target_amount_value = amount_value;
+  }
+
+  get target_amount_unit() {
+    return this._target_amount_unit || 'g';
+  }
+
+  set target_amount_unit(amount_unit) {
+    this._target_amount_unit = amount_unit;
+  }
+
+  // real amount
+
+  get real_amount_value() {
+    return this._real_amount_value;
+  }
+
+  set real_amount_value(amount_value) {
+    this._real_amount_value = amount_value;
+  }
+
+  get real_amount_unit() {
+    return this._real_amount_unit || 'g';
+  }
+
+  set real_amount_unit(amount_unit) {
+    this._real_amount_unit = amount_unit;
+  }
+
+  get amount_g() {
+    return this.convertToGram(this.amount_value, this.amount_unit);
+  }
+
+  get amount_l() {
+    if (this.amount_unit === 'l') return this.amount_value;
+    return this.convertGramToUnit(this.amount_g, 'l');
+  }
+
+  get amount_mol() {
+    return this.convertGramToUnit(this.amount_g, 'mol');
+  }
+
+  // Menge in mmol = Menge (mg) * Reinheit  / Molmasse (g/mol)
+  // Volumen (ml) = Menge (mg) / Dichte (g/ml) / 1000
+  // Menge (mg)  = Volumen (ml) * Dichte (g/ml) * 1000
+  // Menge (mg) = Menge (mmol)  * Molmasse (g/mol) / Reinheit
+
+  convertGramToUnit(amount_g = 0, unit) {
+    if (this.contains_residues) {
+      const { loading } = this.residues[0].custom_info;
+      switch (unit) {
+        case 'g':
+          return amount_g;
+        case 'mol':
+          return (loading * amount_g) / 1000.0; // loading is always in mmol/g
+        default:
+          return amount_g;
+      }
+    } else {
+      switch (unit) {
+        case 'g':
+          return amount_g;
+        case 'l': {
+          if (this.has_molarity) {
+            const molecularWeight = this.molecule_molecular_weight;
+            const purity = this.purity || 1.0;
+            const molarity = this.molarity_value;
+            return (amount_g * purity) / (molarity * molecularWeight);
+          } if (this.has_density) {
+            const { density } = this;
+            return amount_g / (density * 1000);
+          }
+
+          return 0;
+        }
+        case 'mol': {
+          if (this.has_molarity) {
+            return this.amount_l * this.molarity_value;
+          }
+
+          const molecularWeight = this.molecule_molecular_weight;
+          const purity = this.purity || 1.0;
+          return (amount_g * purity) / molecularWeight;
+        }
+        default:
+          return amount_g;
+      }
+    }
+  }
+
+  convertToGram(amount_value, amount_unit) {
+    if (this.contains_residues) {
+      const amountValue = amount_value;
+      switch (amount_unit) {
+        case 'g':
+          return amountValue;
+        case 'mg':
+          return amountValue / 1000.0;
+        case 'mol': {
+          const { loading } = this.residues[0].custom_info;
+          if (!loading) return 0.0;
+
+          return (amountValue / loading) * 1000.0;
+        }
+        default:
+          return amountValue;
+      }
+    } else {
+      switch (amount_unit) {
+        case 'g':
+          return amount_value;
+        case 'mg':
+          return amount_value / 1000.0;
+        case 'l':
+          if (this.has_molarity) {
+            const molecularWeight = this.molecule_molecular_weight;
+            return amount_value * this.molarity_value * molecularWeight;
+          } if (this.has_density) {
+            return amount_value * (this.density || 1.0) * 1000;
+          }
+          return 0;
+        case 'mol':
+          const molecularWeight = this.molecule_molecular_weight;
+          return (amount_value / (this.purity || 1.0)) * molecularWeight;
+        default:
+          return amount_value;
+      }
+    }
+  }
+
+  get molecule_iupac_name() {
+    return this.molecule_name_hash && this.molecule_name_hash.label
+      || this.molecule && this.molecule.iupac_name;
+  }
+
+  set molecule_iupac_name(iupac_name) {
+    this.molecule.iupac_name = iupac_name;
+  }
+
+  get molecule_molecular_weight() {
+    if (this.decoupled) {
+      return this.molecular_mass;
+    }
+
+    return this.molecule && this.molecule.molecular_weight;
+  }
+
+  get molecule_exact_molecular_weight() {
+    return !this.decoupled && this.molecule && this.molecule.exact_molecular_weight;
+  }
+
+  get molecule_formula() {
+    if (this.decoupled) {
+      return (this.sum_formula && this.sum_formula.length) ? this.sum_formula : '';
+    }
+
+    return this.molecule && this.molecule.sum_formular;
+  }
+
+  get molecule_inchistring() {
+    return this.molecule && this.molecule.inchistring;
+  }
+
+  get molecule_inchikey() {
+    return this.molecule && this.molecule.inchikey;
+  }
+
+  get molecule_cano_smiles() {
+    return this.molecule && this.molecule.cano_smiles;
+  }
+
+  get purity() {
+    return this._purity;
+  }
+
+  set purity(purity) {
+    this._purity = purity;
+  }
+
+  get molecule() {
+    return this._molecule;
+  }
+
+  set molecule(molecule) {
+    this._molecule = new Molecule(molecule);
+    if (molecule.temp_svg) { this.sample_svg_file = molecule.temp_svg; }
+  }
+
+  get polymer_formula() {
+    return this.contains_residues && this.residues[0].custom_info.formula.toString();
+  }
+
+  get concat_formula() {
+    if (!this.molecule_formula) {
+      return '';
+    }
+
+    if (this.contains_residues) {
+      return this.molecule_formula + this.polymer_formula;
+    }
+
+    return this.molecule_formula;
+  }
+
+  get polymer_type() {
+    if (this.contains_residues) {
+      const info = this.residues[0].custom_info;
+      return (info.polymer_type ? info.polymer_type : info.surface_type).toString();
+    }
+    return false;
+  }
+
+  get loading() {
+    if (this.contains_residues) {
+      return this.residues[0].custom_info.loading;
+    }
+    return false;
+  }
+
+  set loading(loading) {
+    if (this.contains_residues) { this.residues[0].custom_info.loading = loading; }
+  }
+
+  get external_loading() {
+    if (this.contains_residues) {
+      return this.residues[0].custom_info.external_loading;
+    }
+    return false;
+  }
+
+  set external_loading(loading) {
+    if (this.contains_residues) {
+      this.residues[0].custom_info.external_loading = loading;
+    }
+  }
+
+  get error_loading() {
+    // TODO: temporary disabled
+    // return this.contains_residues && !this.loading && !this.reaction_product;
+    return false;
+  }
+
+  get isValid() {
+    return (this && ((this.molfile && !this.decoupled) || this.decoupled)
+      && !this.error_loading && !this.error_polymer_type);
+  }
+
+  get svgPath() {
+    if (this.show_label) {
+      return `svg_text/${this.labelText}`;
+    }
+
+    if (this.sample_svg_file) {
+      if (this.sample_svg_file === '***') {
+        return '/images/wild_card/no_image_180.svg';
+      }
+      return `/images/samples/${this.sample_svg_file}`;
+    }
+    return this.molecule && this.molecule.molecule_svg_file
+      ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
+  }
+  // todo: have a dedicated Material Sample subclass
+
+  get labelText() {
+    return this.name || this.molecule_formula || this.molecule.iupac_name;
+  }
+
+  get labelText() {
+    return this.name || this.molecule_formula || this.molecule.iupac_name;
+  }
+
+  set equivalent(equivalent) {
+    this._equivalent = equivalent;
+  }
+
+  get equivalent() {
+    return this._equivalent;
+  }
+
+  set scheme_yield(scheme_yield) {
+    this._scheme_yield = scheme_yield;
+  }
+
+  get scheme_yield() {
+    return this._scheme_yield;
+  }
+
+  set conc(conc) {
+    this._conc = conc;
+  }
+
+  get conc() {
+    return this._conc;
+  }
+
+  set maxAmount(maxAmount) {
+    this._maxAmount = maxAmount;
+  }
+
+  get maxAmount() {
+    return this._maxAmount;
+  }
+
+  serializeMaterial() {
+    const params = this.serialize();
+    const extra_params = {
+      equivalent: this.equivalent,
+      position: this.position,
+      reference: this.reference || false,
+      show_label: (this.decoupled && !this.molfile) ? true : (this.show_label || false),
+      waste: this.waste,
+      coefficient: this.coefficient,
+    };
+    _.merge(params, extra_params);
+    return params;
+  }
+
+  // Container & Analyses routines
+  addAnalysis(analysis) {
+    this.container.children.filter(
+      (element) => ~element.container_type.indexOf('analyses')
+    )[0].children.push(analysis);
+  }
+
+  attachments() {
+    let target = [];
+    this.datasetContainers().forEach((dt) => {
+      const atts = dt.attachments;
+      target = [...target, ...atts];
+    });
+    return target;
+  }
+
+  calculateMaxAmount(referenceSample) {
+    const refAmount = referenceSample.amount_mol;
+    const sampleCoeff = this.coefficient || 1.0;
+    const refCoeff = (referenceSample.coefficient || 1.0);
+    const coeffQuotient = sampleCoeff / refCoeff;
+
+    this.maxAmount = refAmount * coeffQuotient * this.molecule_molecular_weight;
+  }
+
+  get solvent() {
+    try {
+      // handle the old solvent data
+      const jsonSolvent = JSON.parse(this._solvent);
+      const solv = [];
+      if (jsonSolvent) {
+        solv.push(jsonSolvent);
+      }
+      return solv;
+    } catch (e) {
+      return this._solvent;
+    }
+  }
+
+  set solvent(solvent) {
+    this._solvent = solvent;
+  }
+
+  addSolvent(newSolvent) {
+    const { molecule } = newSolvent;
+    if (molecule) {
+      const tmpSolvents = [];
+      if (this.solvent) {
+        Object.assign(tmpSolvents, this.solvent);
+      }
+      const solventData = {
+        label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1
+      };
+      const filtered = tmpSolvents.find((solv) => (solv && solv.label === solventData.label
+          && solv.smiles === solventData.smiles
+          && solv.inchikey && solventData.inchikey));
+      if (!filtered) {
+        tmpSolvents.push(solventData);
+      }
+      this.solvent = tmpSolvents;
+    }
+  }
+
+  deleteSolvent(solventToDelete) {
+    const tmpSolvents = [];
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent);
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.label === solventToDelete.label
+        && solv.smiles === solventToDelete.smiles
+        && solv.inchikey === solventToDelete.inchikey));
+    if (filteredIndex >= 0) {
+      tmpSolvents.splice(filteredIndex, 1);
+    }
+    this.solvent = tmpSolvents;
+  }
+
+  updateSolvent(solventToUpdate) {
+    const tmpSolvents = [];
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent);
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.smiles === solventToUpdate.smiles
+        && solv.inchikey && solventToUpdate.inchikey));
+    if (filteredIndex >= 0) {
+      tmpSolvents[filteredIndex] = solventToUpdate;
+    }
+    this.solvent = tmpSolvents;
+  }
+
+  analysisArray() {
+    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
+    return analyses ? analyses.children : [];
+  }
+
+  get solvent() {
+    try {
+      //handle the old solvent data
+      const jsonSolvent = JSON.parse(this._solvent)
+      let solv = []
+      if (jsonSolvent) {
+        solv.push(jsonSolvent)
+      }
+      return solv
+    }
+    catch (e) {}
+    return this._solvent
+  }
+
+  set solvent(solvent) {
+    this._solvent = solvent
+  }
+
+  addSolvent(newSolvent) {
+    const molecule = newSolvent.molecule
+    if (molecule) {
+      let tmpSolvents = []
+      if (this.solvent) {
+        Object.assign(tmpSolvents, this.solvent)
+      }
+      const solventData = { label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1 }
+      const filtered = tmpSolvents.find((solv) => {
+        return (solv && solv.label === solventData.label &&
+          solv.smiles === solventData.smiles &&
+          solv.inchikey && solventData.inchikey)
+      })
+      if (!filtered) {
+        tmpSolvents.push(solventData)
+      }
+      this.solvent = tmpSolvents
+    }
+  }
+
+  deleteSolvent(solventToDelete) {
+    let tmpSolvents = []
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent)
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => {
+      return (solv.label === solventToDelete.label &&
+        solv.smiles === solventToDelete.smiles &&
+        solv.inchikey === solventToDelete.inchikey)
+    })
+    if (filteredIndex >= 0) {
+      tmpSolvents.splice(filteredIndex, 1);
+    }
+    this.solvent = tmpSolvents
+  }
+
+  updateSolvent(solventToUpdate) {
+    let tmpSolvents = []
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent)
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => {
+      return (solv.smiles === solventToUpdate.smiles &&
+        solv.inchikey && solventToUpdate.inchikey)
+    })
+    if (filteredIndex >= 0) {
+      tmpSolvents[filteredIndex] = solventToUpdate
+    }
+    this.solvent = tmpSolvents
+  }
+
+  analysisArray() {
+    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
+    return analyses ? analyses.children : [];
+  }
+}
+
+Sample.counter = 0;
+Sample.children_count = {};
diff --git a/app/packs/src/components/models/Screen.js b/app/packs/src/components/models/Screen.js
new file mode 100644
index 000000000..ff89ff570
--- /dev/null
+++ b/app/packs/src/components/models/Screen.js
@@ -0,0 +1,165 @@
+import Element from 'src/models/Element';
+import Wellplate from 'src/models/Wellplate';
+import Container from 'src/models/Container';
+import Segment from 'src/models/Segment';
+
+export default class Screen extends Element {
+  static buildEmpty(collectionID) {
+    const descriptionDefault = {
+      ops: [{ insert: '' }]
+    };
+
+    return new Screen({
+      collection_id: collectionID,
+      type: 'screen',
+      name: 'New Screen',
+      collaborator: '',
+      requirements: '',
+      conditions: '',
+      result: '',
+      description: descriptionDefault,
+      wellplates: [],
+      research_plans: [],
+      container: Container.init(),
+      segments: [],
+      component_graph_data: {
+        nodes: [],
+        edges: []
+      }
+    });
+  }
+
+  static buildFromWellplatesAndCollectionId(clipboardWellplates, collection_id) {
+    let descriptionDefault = {
+      ops: [{ insert: "" }]
+    };
+
+    return new Screen({
+      collection_id: collectionID,
+      type: 'screen',
+      name: 'New Screen with Wellplates',
+      collaborator: '',
+      requirements: '',
+      conditions: '',
+      result: '',
+      description: descriptionDefault,
+      wellplates: clipboardWellplates,
+      research_plans: [],
+      container: Container.init(),
+      segments: [],
+      component_graph_data: {
+        nodes: [],
+        edges: []
+      }
+    })
+  }
+
+  serialize() {
+    return super.serialize({
+      name: this.name,
+      collaborator: this.collaborator,
+      result: this.result,
+      conditions: this.conditions,
+      requirements: this.requirements,
+      description: this.description,
+      wellplate_ids: this.wellplateIDs,
+      research_plan_ids: this.researchPlanIDs,
+      container: this.container,
+      segments: this.segments.map(s => s.serialize()),
+      component_graph_data: this.component_graph_data
+    })
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get collaborator() {
+    return this._collaborator;
+  }
+
+  set collaborator(collaborator) {
+    this._collaborator = collaborator;
+  }
+
+  get requirements() {
+    return this._requirements;
+  }
+
+  set requirements(requirements) {
+    this._requirements = requirements;
+  }
+
+  get conditions() {
+    return this._conditions;
+  }
+
+  set conditions(conditions) {
+    this._conditions = conditions;
+  }
+
+  get result() {
+    return this._result;
+  }
+
+  set result(result) {
+    this._result = result;
+  }
+
+  get description() {
+    return this._description;
+  }
+
+  set description(description) {
+    this._description = description;
+  }
+
+  get wellplates() {
+    return this._wellplates;
+  }
+
+  set wellplates(wellplates) {
+    this._wellplates = wellplates.map(w => new Wellplate(w));
+  }
+
+  get wellplateIDs() {
+    return this._wellplates.map(w => w.id);
+  }
+
+  get researchPlanIDs() {
+    return this.research_plans.map(rp => rp.id);
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+
+  title() {
+    return this.name;
+  }
+
+  get componentGraphData() {
+    if (this.component_graph_data == {}) {
+      return { nodes: {}, edges: {} }
+    } else {
+      return this.component_graph_data
+    }
+  }
+
+  set componentGraphData(data) {
+    if (data == {}) {
+      console.debug('received empty component graph data!');
+      this.component_graph_data = { nodes: {}, edges: {} };
+    } else {
+      this.component_graph_data = data;
+    }
+  }
+}
diff --git a/app/packs/src/components/models/Segment.js b/app/packs/src/components/models/Segment.js
new file mode 100644
index 000000000..95d8c33ca
--- /dev/null
+++ b/app/packs/src/components/models/Segment.js
@@ -0,0 +1,73 @@
+import Element from './Element';
+
+export default class Segment extends Element {
+  static buildEmpty(klass) {
+    const template = (klass && klass.properties_release) || {};
+    return new Segment({
+      segment_klass_id: this.segment_klass_id || (klass && klass.id),
+      properties: template,
+      select_options: template.select_options || {},
+      segment_klass: klass,
+      properties_release: [],
+      files: []
+    });
+  }
+
+  serialize() {
+    return super.serialize({
+      klassType: 'Segment',
+      segment_klass: this.segment_klass,
+      segment_klass_id: this.segment_klass_id,
+      properties: this.properties,
+      files: this.files
+    });
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get segment_klass() {
+    return this._segment_klass;
+  }
+
+  set segment_klass(klass) {
+    this._segment_klass = klass;
+  }
+
+  get klassName() {
+    return this._klass_name;
+  }
+  set klassName(klassName) {
+    this._klass_name = klassName;
+  }
+
+
+  get properties() {
+    return this._properties;
+  }
+
+  set properties(properties) {
+    this._properties = properties;
+  }
+
+  get select_options() {
+    return this._select_options;
+  }
+
+  set select_options(select_options) {
+    this._select_options = select_options;
+  }
+
+  get segment_klass_id() {
+    return this._segment_klass_id;
+  }
+
+  set segment_klass_id(segment_klass_id) {
+    this._segment_klass_id = segment_klass_id;
+  }
+}
diff --git a/app/packs/src/components/models/StructureDef.js b/app/packs/src/components/models/StructureDef.js
new file mode 100644
index 000000000..1f87a9347
--- /dev/null
+++ b/app/packs/src/components/models/StructureDef.js
@@ -0,0 +1,101 @@
+export default class StructureDef {
+  constructor(args) {
+    Object.assign(this, args);
+
+    if (!this.getMolfileFunction) {
+      this.getMolfileFunction = this.defaultGetMolfileFunction;
+    }
+  }
+
+  defaultGetMolfileFunction() {
+    return new Promise((resolve) => {
+      const mf = this.editor.getMolfile();
+      resolve(mf);
+    });
+  }
+
+  getEditor() {
+    const frame = document.getElementById(this.id);
+    if (frame && ('contentDocument' in frame)) {
+      return frame.contentWindow[this.path];
+    }
+    return document.frames && document.frames[this.id] &&
+      document.frames[this.id].window[this.path];
+  }
+
+  get editor() {
+    return this.getEditorFunction ? this.getEditorFunction() : this.getEditor();
+  }
+
+  get molfile() {
+    const func = this.editor[this.getMfFuncName];
+    let result;
+    if (!func) { return null; }
+    if (this.getMfWithCallback) {
+      this.editor[this.getMfFuncName]((a) => { result = a; });
+    } else {
+      result = func();
+    }
+    return result;
+  }
+
+  set molfile(mf) {
+    if (this.setMolfileInFrame) {
+      const frame = document.getElementById(this.id);
+      if (frame && ('contentDocument' in frame)) {
+        if (frame.contentWindow[this.setMolfileInFrame] && mf) {
+          frame.contentWindow[this.setMolfileInFrame] = mf;
+        }
+      }
+    } else {
+      // eslint-disable-next-line no-unused-expressions
+      this.editor && this.editor[this.setMfFuncName] && this.editor[this.setMfFuncName](mf);
+    }
+  }
+
+  get svg() {
+    const func = this.editor[this.getSVGFuncName];
+    let result;
+    if (!func) { return null; }
+    if (this.getSVGWithCallback) {
+      this.editor[this.getSVGFuncName]((a) => { result = a; });
+    } else {
+      result = func();
+    }
+    return result;
+  }
+
+  fetchSVG() {
+    const func = this.editor[this.getSVGFuncName];
+    return new Promise((resolve, reject) => {
+      if (!func) { reject(new Error(`get ${'svg'} method missing`)); }
+      if (this.getSVGWithCallback) {
+        this.editor[this.getSVGFuncName]((a) => { resolve(a); });
+      } else {
+        resolve(func());
+      }
+    });
+  }
+
+  get smiles() {
+    const func = this.editor[this.getSmiFuncName];
+    if (!func) { return null; }
+    let result;
+    if (this.getSmiWithCallback) {
+      this.editor[this.getSmiFuncName]((a) => { result = a; });
+    } else {
+      result = func();
+    }
+    return result;
+  }
+
+  get info() {
+    return (
+      {
+        smiles: this.smiles || '',
+        inchikey: '',
+        inchi: '',
+      }
+    );
+  }
+}
diff --git a/app/packs/src/components/models/StructureEditor.js b/app/packs/src/components/models/StructureEditor.js
new file mode 100644
index 000000000..1d1747275
--- /dev/null
+++ b/app/packs/src/components/models/StructureEditor.js
@@ -0,0 +1,29 @@
+/* eslint-disable no-underscore-dangle */
+import uuid from 'uuid';
+import StructureDef from './StructureDef';
+
+export default class StructureEditor {
+  constructor(args) {
+    Object.assign(this, args);
+    if (!this.id) {
+      this.id = StructureEditor.buildID();
+    }
+    this.structureDef = this.buildStructureDef();
+  }
+
+  static buildID() {
+    return uuid.v1();
+  }
+
+  get structureDef() {
+    return this._structureDef;
+  }
+
+  set structureDef(structureDef) {
+    this._structureDef = structureDef;
+  }
+
+  buildStructureDef() {
+    return new StructureDef({ id: this.id, path: this.path, ...this.structure });
+  }
+}
diff --git a/app/packs/src/components/models/Well.js b/app/packs/src/components/models/Well.js
new file mode 100644
index 000000000..869262a9d
--- /dev/null
+++ b/app/packs/src/components/models/Well.js
@@ -0,0 +1,20 @@
+import Element from 'src/models/Element';
+import Sample from 'src/models/Sample';
+
+export default class Well extends Element {
+  serialize() {
+    return super.serialize({
+      position: this.position,
+      readouts: this.readouts || [],
+      sample: this.sample && new Sample(this.sample).serialize()
+    });
+  }
+
+  set sample(sample) {
+    this._sample = (sample) ? new Sample(sample) : null
+  }
+
+  get sample() {
+    return this._sample;
+  }
+}
diff --git a/app/packs/src/components/models/Wellplate.js b/app/packs/src/components/models/Wellplate.js
new file mode 100644
index 000000000..2387459ba
--- /dev/null
+++ b/app/packs/src/components/models/Wellplate.js
@@ -0,0 +1,126 @@
+import Element from './Element';
+import Well from './Well';
+import Sample from './Sample';
+import Container from './Container.js';
+import Segment from './Segment';
+
+export default class Wellplate extends Element {
+  constructor(args) {
+    super(args)
+    this.wells = this.initWellsWithPosition(this.wells, 96);
+    this._checksum = this.checksum();
+  }
+
+  static buildEmpty(collection_id) {
+    return new Wellplate(
+      {
+        collection_id: collection_id,
+        type: 'wellplate',
+        name: 'New Wellplate',
+        size: 96,
+        description: Wellplate.quillDefault(),
+        wells: [],
+        container: Container.init(),
+        segments: []
+      }
+    )
+  }
+
+  static buildFromSamplesAndCollectionId(clipboardSamples, collection_id) {
+    let samples = clipboardSamples.map(sample => {
+      return sample.buildChild();
+    });
+
+    let wells = samples.map(sample => {
+      return new Well({
+        sample: sample
+      });
+    })
+
+    return new Wellplate(
+      {
+        collection_id: collection_id,
+        type: 'wellplate',
+        name: 'New Wellplate',
+        size: 96,
+        description: Wellplate.quillDefault(),
+        wells: wells,
+        container: Container.init(),
+        segments: []
+      }
+    )
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
+  }
+
+  get description() {
+    return this._description;
+  }
+
+  set description(description) {
+    this._description = description;
+  }
+
+  get wells() {
+    return this._wells
+  }
+
+  set wells(wells) {
+    this._wells = wells.map(w => new Well(w));
+  }
+
+  set segments(segments) {
+    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+  }
+
+  get segments() {
+    return this._segments || [];
+  }
+
+  serialize() {
+    return super.serialize({
+      name: this.name,
+      size: this.size,
+      description: this.description,
+      wells: this.wells.map(w => w.serialize()),
+      container: this.container,
+      segments: this.segments.map(s => s.serialize())
+    })
+  }
+
+
+  // ---
+
+  initWellsWithPosition(wells, size) {
+    const placeholdersCount = size - wells.length;
+    const placeholders = Array(placeholdersCount).fill({});
+    let allWells = wells.concat(placeholders);
+    return allWells.map((well, i) => this.initWellWithPositionByIndex(well, i));
+  }
+
+  initWellWithPositionByIndex(well, i) {
+    return {
+      ...well,
+      position: this.calculatePositionOfWellByIndex(i)
+    }
+  }
+
+  calculatePositionOfWellByIndex(i) {
+    const cols = 12;
+    let remainder = (i + 1) % cols;
+    return {
+      x: (remainder == 0) ? cols : remainder,
+      y: Math.floor(i / cols) + 1
+    };
+  }
+
+  title() {
+    return this.name;
+  }
+}
diff --git a/app/packs/src/components/navigation/search/AutoCompleteInput.js b/app/packs/src/components/navigation/search/AutoCompleteInput.js
index 455bcb4a9..931a64f61 100644
--- a/app/packs/src/components/navigation/search/AutoCompleteInput.js
+++ b/app/packs/src/components/navigation/search/AutoCompleteInput.js
@@ -231,6 +231,11 @@ export default class AutoCompleteInput extends React.Component {
       this.setState({ value })
     }
 
+    if (!isString(value)) {
+      value = value.name;
+      this.setState({ value });
+    }
+
     if (!value || value.trim() === '') {
       this.setState({
         value: ''
@@ -255,7 +260,6 @@ export default class AutoCompleteInput extends React.Component {
       if (selectedName && selectedName.trim() != '' && this.state.value == selectedName)
         if (selectedSuggestion.search_by_method == 'element_short_label') {
           selection = {name: selectedSuggestion.name.name, search_by_method: `element_short_label_${selectedSuggestion.name.klass}`}
-
         } else {
           selection = selectedSuggestion
         }
diff --git a/app/packs/src/components/nmr_sim/LineChart.js b/app/packs/src/components/nmr_sim/LineChart.js
new file mode 100644
index 000000000..a9ff68d49
--- /dev/null
+++ b/app/packs/src/components/nmr_sim/LineChart.js
@@ -0,0 +1,190 @@
+import d3 from 'd3';
+/* global $ */
+
+class D3LineChart {
+  constructor() {
+    this.margin = {
+      top: 50,
+      bottom: 50,
+      right: 10,
+      left: 90,
+    };
+    this.width = 1000 - this.margin.left - this.margin.right;
+    this.height = 500 - this.margin.top - this.margin.bottom;
+  }
+
+  create(input) {
+    this.drawChart(input);
+  }
+
+  update(input) {
+    this.destroy(input.el);
+    this.drawChart(input);
+  }
+
+  destroy(el) {
+    d3.select(el).selectAll('svg').remove();
+  }
+
+  drawChart(props) {
+    const { data, el, type } = props;
+    const width = this.width;
+    const height = this.height;
+    const margin = this.margin;
+
+    const xExtent = d3.extent(data, d => d.x);
+    const yExtent = d3.extent(data, d => d.y);
+
+    const xScale = d3.scale.linear()
+                      .domain(xExtent)
+                      .range([width, 0]);
+    const yScale = d3.scale.linear()
+                      .domain(yExtent)
+                      .range([height, 0]);
+
+    const linePath = d3.svg.line()
+                   .x(d => xScale(d.x))
+                   .y(d => yScale(d.y));
+
+    const yFormat = d3.format('.2n');
+
+    const zoomed = () => {
+      svg.select('.x.axis').call(xAxis);
+      svg.select('.y.axis').call(yAxis);
+      svg.select('.x.grid')
+          .call(makeXaxis
+                  .tickSize(-height, 0, 0)
+                  .tickFormat(''));
+      svg.select('.y.grid')
+          .call(makeYaxis
+                  .tickSize(-width, 0, 0)
+                  .tickFormat(''));
+      svg.select('.line')
+          .attr('class', 'line')
+          .attr('d', linePath);
+    };
+
+    const zoom = d3.behavior.zoom()
+                    .x(xScale) // omit y
+                    .on('zoom', zoomed);
+
+    const resetZoom = () => {
+      d3.transition().duration(200).tween('zoom', () => {
+        const ix = d3.interpolate(xScale.domain(), xExtent);
+        d3.interpolate(yScale.domain(), yExtent);
+        return t => {
+          zoom.x(xScale.domain(ix(t))); // omit y
+          zoomed();
+        };
+      });
+    };
+
+    const svg = d3.select(el)
+                  .append('svg:svg')
+                  .attr('id', 'line-chart')
+                  .attr('width', width + margin.left + margin.right)
+                  .attr('height', height + margin.top + margin.bottom)
+                  .attr('viewBox', `0 0  ${width + margin.left + margin.right}
+                                         ${height + margin.top + margin.bottom}`)
+                  .attr('perserveAspectRatio', 'xMinYMid')
+                  .append('svg:g')
+                  .attr('transform', `translate(${margin.left}, ${margin.top})`)
+                  .call(zoom).on('dblclick.zoom', resetZoom);
+
+    svg.append('svg:rect')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('class', 'plot');
+
+    const xAxis = d3.svg.axis()
+                    .scale(xScale)
+                    .orient('bottom')
+                    .ticks(5);
+    const yAxis = d3.svg.axis()
+                    .scale(yScale)
+                    .orient('left')
+                    .ticks(5)
+                    .tickFormat(yFormat);
+    const makeXaxis = d3.svg.axis()
+                          .scale(xScale)
+                          .orient('bottom')
+                          .ticks(5);
+    const makeYaxis = d3.svg.axis()
+                          .scale(yScale)
+                          .orient('left')
+                          .ticks(5);
+
+    svg.append('svg:g')
+        .attr('class', 'x axis')
+        .attr('transform', `translate(0, ${height})`)
+        .call(xAxis);
+
+    svg.append('g')
+        .attr('class', 'y axis')
+        .call(yAxis);
+
+    svg.append('g')
+        .attr('class', 'x grid')
+        .attr('transform', `translate(0, ${height})`)
+        .call(makeXaxis
+                .tickSize(-height, 0, 0)
+                .tickFormat(''));
+
+    svg.append('g')
+        .attr('class', 'y grid')
+        .call(makeYaxis
+                .tickSize(-width, 0, 0)
+                .tickFormat(''));
+
+    svg.append('text')
+        .attr('text-anchor', 'middle')
+        .attr('transform', `translate(${0 - margin.left + 15}, ${height / 2})rotate(-90)`)
+        .text('Y(A.U)');
+    svg.append('text')
+        .attr('text-anchor', 'middle')  // this makes it easy to centre the text
+        .attr('transform', `translate(${width / 2}, ${height + margin.bottom})`)
+        .text('X(PPM)');
+
+    svg.append('svg:clipPath')
+        .attr('id', 'clip')
+        .append('svg:rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', width)
+        .attr('height', height);
+
+    const chartBody = svg.append('g')
+                          .attr('clip-path', 'url(#clip)');
+
+    chartBody.append('svg:path')
+              .datum(data)
+              .attr('class', 'line')
+              .attr('d', linePath);
+
+    // display type on the top-right corner
+    svg.append('text')
+        .attr('text-anchor', 'middle')
+        .attr('transform', `translate(${width - 50}, 30)`)
+        .text(`NMR ${type}`);
+    svg.append('rect')
+        .attr('transform', `translate(${width - 120}, 25)`)
+        .attr('width', 30)
+        .attr('height', 1)
+        .attr('class', 'line');
+
+    // responsive
+    const chart = $('#line-chart');
+    const aspect = chart.width() / chart.height();
+    const container = chart.parent();
+
+    $(window).on('resize', () => {
+      const targetWidth = container.width();
+      chart.attr('width', targetWidth);
+      chart.attr('height', Math.round(targetWidth / aspect));
+    }).trigger('resize');
+  }
+}
+
+const LineChart = new D3LineChart();
+
+export { LineChart };
diff --git a/app/packs/src/components/nmr_sim/LineChartWrapper.js b/app/packs/src/components/nmr_sim/LineChartWrapper.js
new file mode 100644
index 000000000..06949421d
--- /dev/null
+++ b/app/packs/src/components/nmr_sim/LineChartWrapper.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LineChart } from './LineChart';
+
+export default class LineChartWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.d3Ref = React.createRef();
+  }
+
+  componentDidMount() {
+    const node = this.d3Ref.current;
+
+    LineChart.create({
+      data: this.props.data,
+      type: this.props.type,
+      el: node,
+    });
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const node = this.d3Ref.current;
+
+    LineChart.update({
+      data: nextProps.data,
+      type: nextProps.type,
+      el: node,
+    });
+  }
+
+  componentWillUnmount() {
+    const node = this.d3Ref.current;
+
+    LineChart.destroy(node);
+  }
+
+  render() {
+    return (
+      <div
+        className="nmr-chart"
+        ref={this.d3Ref}
+      />
+    );
+  }
+}
+
+LineChartWrapper.propTypes = {
+  data: PropTypes.array,
+  type: PropTypes.string,
+};
diff --git a/app/packs/src/components/nmr_sim/NmrSimTab.js b/app/packs/src/components/nmr_sim/NmrSimTab.js
new file mode 100644
index 000000000..80d607203
--- /dev/null
+++ b/app/packs/src/components/nmr_sim/NmrSimTab.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import { Button, ButtonToolbar, ListGroup, ListGroupItem } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+import NmrSimActions from '../actions/NmrSimActions';
+import NmrSimStore from '../stores/NmrSimStore';
+import LineChartWrapper from './LineChartWrapper';
+import { ViewAtNmrdb, LinkToNmrdb } from './NmrdbReference';
+
+export default class NmrSimTab extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      nmrSpectrum: { data13C: [], data1H: [] },
+      nmrType: '13C',
+      synced: false,
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    NmrSimStore.listen(this.onChange);
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const sample = this.props.sample;
+    if (sample.molecule.id !== nextProps.sample.molecule.id) {
+      NmrSimActions.resetNMR.defer();
+    }
+  }
+
+  componentWillUnmount() {
+    NmrSimStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState({
+      nmrSpectrum: state.currentNmr,
+      nmrType: state.currentType,
+      synced: state.synced,
+    });
+  }
+
+  updateNmrdb(type) {
+    const sample = this.props.sample;
+    const spectrum = this.state.nmrSpectrum;
+    const needToFetch = spectrum.data13C.length + spectrum.data1H.length === 0;
+    NmrSimActions.updateNmrdb(type, needToFetch, sample.molecule.id);
+  }
+
+  showChartNmrdb(spectrum) {
+    const synced = this.state.synced;
+    const is13C = this.state.nmrType === '13C';
+    const data = is13C ? spectrum.data13C : spectrum.data1H;
+    return (
+      synced ? this.chartOrWarning(data) : null
+    );
+  }
+
+  chartOrWarning(data) {
+    return (
+      data.length !== 0
+        ? <LineChartWrapper data={data}
+                            type={this.state.nmrType}
+                            className="line-chart-wrapper" />
+        : this.warning()
+    );
+  }
+
+  warning() {
+    const type = this.state.nmrType;
+    const style = type === '13C' ? 'danger' : 'warning';
+    return (
+      <div>
+        <br />
+        <ListGroup>
+          <ListGroupItem bsStyle={style}>
+            Sorry, the {type} simulation is not available now. Please check directly on
+            <a target="_blank" href="https://www.nmrdb.org/">
+              <img src="/images/nmrdb_logo.jpg" alt="" width="80" />
+            </a>
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  render() {
+    const sample = this.props.sample;
+    const spectrum = this.state.nmrSpectrum;
+    const type = this.state.nmrType;
+    const smile = sample.molecule_cano_smiles || 'c1ccccc1CC';
+
+    return (
+      <div style={{ width: '100%' }}>
+        <ButtonToolbar>
+          <Button bsStyle="primary"
+                  onClick={ this.updateNmrdb.bind(this, '1H') }>
+            predict 1H NMR
+          </Button>
+          <Button bsStyle="success"
+                  onClick={ this.updateNmrdb.bind(this, '13C') }>
+            predict 13C NMR
+          </Button>
+          <ViewAtNmrdb is13C={type === '13C'}
+                       smile={smile} />
+        </ButtonToolbar>
+
+        {this.showChartNmrdb(spectrum)}
+
+        <br />
+        <ListGroupItem>
+          <LinkToNmrdb />
+        </ListGroupItem>
+      </div>
+    );
+  }
+
+}
+
+NmrSimTab.propTypes = {
+  sample: PropTypes.object,
+};
diff --git a/app/packs/src/components/nmr_sim/NmrdbReference.js b/app/packs/src/components/nmr_sim/NmrdbReference.js
new file mode 100644
index 000000000..056dc60c8
--- /dev/null
+++ b/app/packs/src/components/nmr_sim/NmrdbReference.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ViewAtNmrdb = ({ is13C, smile }) => {
+  const nmrdbLink = is13C
+    ? `http://www.nmrdb.org/service.php?name=nmr-13c-prediction&smiles=${smile}`
+    : `http://www.nmrdb.org/service.php?name=nmr-1h-prediction&smiles=${smile}`;
+  return (
+    <div className="nmr-icon">
+      <i>View directly on </i>
+      <a target="_blank" rel="noreferrer" href={nmrdbLink} className="nmr-icon-border">
+        <img src="/images/nmrdb_logo.jpg" alt="" width="80" />
+      </a>
+    </div>
+  );
+};
+
+const LinkToNmrdb = () => (
+  <div>
+    <i>Powered by <img src="/images/nmrdb_logo.jpg" alt="" width="80" /></i>
+    <br />
+    <h5>References</h5>
+    <p>Banfi, D.; Patiny, L. <a target="_blank" rel="noreferrer" href="https://doi.org/10.2533/chimia.2008.280">www.nmrdb.org: Resurrecting and processing NMR spectra on-line Chimia</a>, 2008, 62(4), 280-281.</p>
+    <p>Andrés M. Castillo, Luc Patiny and Julien Wist. <a target="_blank" rel="noreferrer" href="https://doi.org/10.1016/j.jmr.2010.12.008">Fast and Accurate Algorithm for the Simulation of NMR spectra of Large Spin Systems</a>. J of Magnetic Resonance 2011.</p>
+    <p>Aires-de-Sousa, M. Hemmer, J. Gasteiger, <a target="_blank" rel="noreferrer" href="https://doi.org/10.1021/ac010737m">Prediction of 1H NMR Chemical Shifts Using Neural Networks</a>, Analytical Chemistry, 2002, 74(1), 80-90.</p>
+    <p>Steinbeck, Christoph, Stefan Krause, and Stefan Kuhn, <a target="_blank" rel="noreferrer" href="https://doi.org/10.1021/ci0341363">NMRShiftDB Constructing a Free Chemical Information System with Open-Source Components</a>, J of chemical information and computer sciences, 2003, 43(6): 1733-1739.</p>
+  </div>
+);
+
+export { ViewAtNmrdb, LinkToNmrdb };
+
+ViewAtNmrdb.propTypes = {
+  is13C: PropTypes.bool,
+  smile: PropTypes.string,
+};
diff --git a/app/packs/src/components/nmr_sim/SampleDetailsTabName.js b/app/packs/src/components/nmr_sim/SampleDetailsTabName.js
new file mode 100644
index 000000000..f74af51a7
--- /dev/null
+++ b/app/packs/src/components/nmr_sim/SampleDetailsTabName.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default <div style={{ maxHeight: 25 }}>NMR</div>;
diff --git a/app/packs/src/components/prediction/Content.js b/app/packs/src/components/prediction/Content.js
new file mode 100644
index 000000000..680d042d7
--- /dev/null
+++ b/app/packs/src/components/prediction/Content.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import { Row, Col } from 'react-bootstrap';
+import UIActions from '../actions/UIActions';
+import PredictionActions from '../actions/PredictionActions';
+import ContentInputs from './ContentInputs';
+import ContentOutputs from './ContentOutputs';
+
+const styles = {
+  selectContainer: {
+    height: 50,
+  },
+};
+
+const templateOpts = () => (
+  [
+    { label: 'Predict Products', value: 'predictProducts' },
+    { label: 'Predict Starting Materials', value: 'predictReactants' },
+  ]
+);
+
+const onTemplateChange = (e) => {
+  PredictionActions.updateTemplate(e.value);
+  UIActions.uncheckWholeSelection.defer();
+};
+
+const ContentTemplate = template => (
+  <Row style={styles.selectContainer}>
+    <Col md={6} sm={12}>
+      <Select
+        options={templateOpts()}
+        value={template}
+        clearable={false}
+        onChange={onTemplateChange}
+      />
+    </Col>
+    <Col md={6} sm={12} />
+  </Row>
+);
+
+const Content = ({ template, els, outputEls }) => (
+  <div className="report-orders panel-workspace">
+    <br />
+    { ContentTemplate(template) }
+    { ContentInputs(template, els) }
+    <br />
+    { ContentOutputs(template, outputEls) }
+  </div>
+);
+
+Content.propTypes = {
+  template: PropTypes.string.isRequired,
+  els: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  outputEls: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default Content;
diff --git a/app/packs/src/components/prediction/ContentInputs.js b/app/packs/src/components/prediction/ContentInputs.js
new file mode 100644
index 000000000..d0db2cf5b
--- /dev/null
+++ b/app/packs/src/components/prediction/ContentInputs.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Panel } from 'react-bootstrap';
+
+const styles = {
+  svgContainer: {
+    height: 200,
+    overflowX: 'scroll',
+    overflowY: 'auto',
+    whiteSpace: 'nowrap',
+  },
+  svgBox: {
+    display: 'inline-block',
+    height: 100,
+    margin: 5,
+    width: 200,
+  },
+  svgTxt: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 180,
+  },
+  emptyBox: {
+    marginTop: 60,
+  },
+};
+
+const contentBlock = (els) => {
+  if (!els || els.length === 0) {
+    return (
+      <div style={styles.emptyBox}>
+        <h3> Please select samples. </h3>
+      </div>
+    );
+  }
+
+  return (
+    els.map(el => (
+      <div key={el.svgPath} style={styles.svgBox}>
+        <SVG src={el.svgPath} />
+        <p style={styles.svgTxt}>{ el.molecule_iupac_name }</p>
+        <p style={styles.svgTxt}>{ el.molecule_cano_smiles }</p>
+      </div>
+    ))
+  );
+};
+
+const ContentInputs = (template, els) => {
+  const titleFromTemplate = (tpl) => ({
+    'predictProducts': 'Input: Starting Materials (accept max 10 molecules)',
+    'predictReactants': 'Input: Product (accept max 1 molecule)',
+  })[tpl]
+  const titleStr = titleFromTemplate(template) || 'TBD';
+
+  return (
+    <Panel bsStyle="default" defaultExpanded>
+      <Panel.Heading>
+        <Panel.Title toggle>
+          { titleStr }
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Collapse>
+        <Panel.Body>
+          <div className="svg" style={styles.svgContainer}>
+            { contentBlock(els) }
+          </div>
+        </Panel.Body>
+      </Panel.Collapse>
+    </Panel>
+  );
+};
+
+export default ContentInputs;
diff --git a/app/packs/src/components/prediction/ContentOutputs.js b/app/packs/src/components/prediction/ContentOutputs.js
new file mode 100644
index 000000000..075fdf3fb
--- /dev/null
+++ b/app/packs/src/components/prediction/ContentOutputs.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+import { Panel } from 'react-bootstrap';
+
+const styles = {
+  container: {
+  },
+};
+
+const stripBStyle = idx => (idx % 2 === 0 ? 'primary' : 'info');
+
+const contentBlock = els => (
+  els.map((el, idx) => (
+    <div key={`${idx}-${el.id}`}>
+      <Panel bsStyle={stripBStyle(idx)}>
+        <Panel.Heading>
+          <Panel.Title>
+            Rank { el.rank }: { el.smiles.join('.') }
+          </Panel.Title>
+        </Panel.Heading>
+        <SvgFileZoomPan
+          svg={el.svg}
+          duration={300}
+          resize
+        />
+      </Panel>
+    </div>
+  ))
+);
+
+const ContentOutputs = (template, outputEls) => {
+  const titleFromTemplate = (tpl) => ({
+    'predictProducts': 'Output: Products',
+    'predictReactants': 'Output: Starting Materials',
+  })[tpl]
+  const titleStr = titleFromTemplate(template) || 'TBD';
+
+  return (
+    <Panel bsStyle="default" defaultExpanded>
+      <Panel.Heading>
+        <Panel.Title toggle>
+          { titleStr }
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Collapse>
+        <Panel.Body>
+          <div style={styles.container}>
+            { contentBlock(outputEls) }
+          </div>
+        </Panel.Body>
+      </Panel.Collapse>
+    </Panel>
+  );
+};
+
+export default ContentOutputs;
diff --git a/app/packs/src/components/prediction/PredictionComponent.js b/app/packs/src/components/prediction/PredictionComponent.js
new file mode 100644
index 000000000..7e6b7462b
--- /dev/null
+++ b/app/packs/src/components/prediction/PredictionComponent.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import PredictionActions from '../actions/PredictionActions';
+import UIActions from '../actions/UIActions';
+import DetailActions from '../actions/DetailActions';
+import LoadingActions from '../actions/LoadingActions';
+
+const clickToClose = (el) => {
+  DetailActions.close(el);
+};
+
+const CloseBtn = ({ el }) => {
+  const onClickToClose = () => clickToClose(el);
+
+  return (
+    <Button
+      bsStyle="danger"
+      bsSize="xsmall"
+      className="button-right"
+      onClick={onClickToClose}
+    >
+      <i className="fa fa-times" />
+    </Button>
+  );
+};
+
+const clickToReset = () => {
+  PredictionActions.reset();
+  UIActions.uncheckWholeSelection.defer();
+};
+
+const ResetBtn = () => (
+  <Button
+    bsStyle="info"
+    bsSize="xsmall"
+    className="button-right"
+    onClick={clickToReset}
+  >
+    <span><i className="fa fa-eraser" /> Reset</span>
+  </Button>
+);
+
+const PredictBtn = ({ inputEls, template }) => {
+  const onClick = () => {
+    LoadingActions.start.defer();
+    PredictionActions.infer.defer(inputEls, template);
+  };
+  const disableBtn = inputEls.length === 0;
+
+  return (
+    <Button
+      bsStyle="primary"
+      bsSize="xsmall"
+      className="button-right"
+      disabled={disableBtn}
+      onClick={onClick}
+    >
+      <span><i className="fa fa-file-text-o" /> Predict</span>
+    </Button>
+  );
+};
+
+PredictBtn.propTypes = {
+  inputEls: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export { CloseBtn, ResetBtn, PredictBtn };
diff --git a/app/packs/src/components/prediction/PredictionContainer.js b/app/packs/src/components/prediction/PredictionContainer.js
new file mode 100644
index 000000000..23db7625d
--- /dev/null
+++ b/app/packs/src/components/prediction/PredictionContainer.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Tabs, Tab } from 'react-bootstrap';
+import PredictionActions from '../actions/PredictionActions';
+import PredictionStore from '../stores/PredictionStore';
+import UIStore from '../stores/UIStore';
+
+import Content from './Content';
+import PanelHeader from '../common/PanelHeader';
+import { CloseBtn, ResetBtn, PredictBtn } from './PredictionComponent';
+
+class PredictionContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...PredictionStore.getState(),
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onChangeUI = this.onChangeUI.bind(this);
+    this.panelHeader = this.panelHeader.bind(this);
+  }
+
+  componentDidMount() {
+    PredictionStore.listen(this.onChange);
+    UIStore.listen(this.onChangeUI);
+    const uiState = UIStore.getState();
+    this.onChangeUI(uiState);
+  }
+
+  componentWillUnmount() {
+    PredictionStore.unlisten(this.onChange);
+    UIStore.unlisten(this.onChangeUI);
+  }
+
+  onChange(state) {
+    this.setState({ ...state });
+  }
+
+  onChangeUI(uiState) {
+    const combState = { uiState, predictionState: this.state };
+    PredictionActions.updateUI.defer(combState);
+  }
+
+  panelHeader() {
+    const { prediction } = this.props;
+    const { inputEls, template } = this.state;
+    const btns = [
+      <CloseBtn key="closeBtn" el={prediction} />,
+      <PredictBtn
+        key="predictBtn"
+        inputEls={inputEls}
+        template={template}
+      />,
+      <ResetBtn key="resetBtn" />,
+    ];
+    return <PanelHeader title="Synthesis Prediction" btns={btns} />;
+  }
+
+  selectTab(key) { // eslint-disable-line class-methods-use-this
+    PredictionActions.updateActiveKey(key);
+  }
+
+  render() {
+    const {
+      activeKey, template, inputEls, defaultEls, outputEls,
+    } = this.state;
+
+    const els = (defaultEls && inputEls) ? [...defaultEls, ...inputEls] : [];
+
+    return (
+      <Panel
+        bsStyle="default"
+      >
+        <Panel.Heading>{this.panelHeader()}</Panel.Heading>
+        <Tabs
+          activeKey={activeKey}
+          onSelect={this.selectTab}
+          id="prediction-tabs"
+        >
+          <Tab eventKey={0} title="Content">
+            <Content
+              template={template}
+              els={els}
+              outputEls={outputEls}
+            />
+          </Tab>
+        </Tabs>
+      </Panel>
+    );
+  }
+}
+
+PredictionContainer.propTypes = {
+  prediction: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default PredictionContainer;
diff --git a/app/packs/src/components/proxies/ElementPermissionProxy.js b/app/packs/src/components/proxies/ElementPermissionProxy.js
new file mode 100644
index 000000000..8378fee20
--- /dev/null
+++ b/app/packs/src/components/proxies/ElementPermissionProxy.js
@@ -0,0 +1,45 @@
+import Element from '../models/Element';
+import _ from 'lodash';
+
+export default class ElementPermissionProxy {
+  constructor(element) {
+    let elementMethodNames = Object.getOwnPropertyNames(Object.getPrototypeOf(element)).concat(Object.getOwnPropertyNames(element));
+
+    elementMethodNames.forEach((m) => {
+      Object.defineProperty(this, m, {
+        get: () => { return this.methodOrRestrictionPattern(element, m) },
+        set: (arg) => { element[m] = arg }
+      })
+    });
+
+    this.isMethodDisabled = (methodName) => {
+      return this.methodOrRestrictionPattern(element, methodName) == this.restrictionPattern;
+    };
+
+    // get "superclass methods" and define them on proxy
+    let rootMethodNames = Object.getOwnPropertyNames(Object.getPrototypeOf(new Element));
+
+    _.difference(rootMethodNames, elementMethodNames).forEach((m) => {
+      Object.defineProperty(this, m, {
+        get: () => { return element[m] },
+        set: (arg) => { element[m] = arg }
+      })
+    });
+
+    this.unwrap = () => {
+      return element;
+    }
+  }
+
+  methodOrRestrictionPattern(element, m) {
+    if(element.isRestricted() == true && element[m] == undefined) {
+      return this.restrictionPattern;
+    } else {
+      return element[m];
+    }
+  }
+
+  get restrictionPattern() {
+    return '***';
+  }
+}
diff --git a/app/packs/src/components/qc/QcMain.js b/app/packs/src/components/qc/QcMain.js
new file mode 100644
index 000000000..e635afd90
--- /dev/null
+++ b/app/packs/src/components/qc/QcMain.js
@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+import QcContent from 'src/apps/mydb/elements/details/samples/qcTab/components/QcContent';
+import QcActions from 'src/stores/alt/actions/QcActions';
+import QcStore from 'src/stores/alt/stores/QcStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+
+class QcMain extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...QcStore.getState(),
+      profile: UserStore.getState().profile,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.renderQcBtn = this.renderQcBtn.bind(this);
+    this.renderQcContent = this.renderQcContent.bind(this);
+  }
+
+  componentDidMount() {
+    QcStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    QcStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState({ ...state });
+  }
+
+  renderQcBtn() {
+    const { loading } = this.state;
+    const { sample } = this.props;
+    const handleOnClick = () => {
+      QcActions.setLoading();
+      QcActions.loadInfers.defer({ sample });
+    };
+    let iconClsName = 'fa fa-cog fa-1x';
+    if (loading) iconClsName += ' fa-spin fa-fw';
+    const bsStyle = loading ? 'warning' : 'primary';
+
+    return (
+      <Button
+        bsStyle={bsStyle}
+        bsSize="small"
+        onClick={handleOnClick}
+        disabled={loading}
+      >
+        <i className={iconClsName} />
+        <span className="g-marginLeft--10">Refresh</span>
+      </Button>
+    );
+  }
+
+  renderQcContent() {
+    const { infers, profile } = this.state;
+    const { sample } = this.props;
+    const infer = infers
+      .map(i => (i.sId === sample.id ? i : null))
+      .filter(r => r != null)[0];
+    if (!infer) return null;
+    let curation = profile ? profile.curation : 2;
+    if (curation === null) { curation = 2 }
+    return (
+      <QcContent
+        sample={sample}
+        infer={infer}
+        curation={curation}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderQcBtn()}
+        {this.renderQcContent()}
+      </div>
+    );
+  }
+}
+
+QcMain.propTypes = {
+  sample: PropTypes.object.isRequired,
+};
+
+export default QcMain;
diff --git a/app/packs/src/components/qc/components/QcContent.js b/app/packs/src/components/qc/components/QcContent.js
new file mode 100644
index 000000000..9450f182b
--- /dev/null
+++ b/app/packs/src/components/qc/components/QcContent.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AreaTitle from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/AreaTitle';
+import AreaSummary from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/AreaSummary';
+
+import BlockTitle from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockTitle';
+import BlockHnmr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockHnmr';
+import BlockCnmr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockCnmr';
+import BlockMS from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockMS';
+import BlockIr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockIr';
+import BlockEa from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockEa';
+import BlockConclusion from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockConclusion';
+
+import { prismQcs } from 'src/apps/mydb/elements/details/samples/qcTab/utils/qcs';
+import { evaluateMs } from 'src/apps/mydb/elements/details/samples/qcTab/utils/ms';
+import { evaluateIr } from 'src/apps/mydb/elements/details/samples/qcTab/utils/ir';
+import { evaluateNmr } from 'src/apps/mydb/elements/details/samples/qcTab/utils/nmr';
+
+const QcContent = ({ sample, infer, curation }) => {
+  const {
+    irQc, msQc, hnmrQc, cnmrQc,
+  } = prismQcs(sample, infer);
+  const sumFormula = sample.molecule_formula;
+
+  const ansHnmr = evaluateNmr(hnmrQc, sumFormula);
+  const ansCnmr = evaluateNmr(cnmrQc, sumFormula);
+  const ansMs = evaluateMs(msQc, sample);
+  const ansIr = evaluateIr(irQc);
+
+  return (
+    <div>
+      <div>
+        <AreaTitle
+          curation={curation}
+        />
+        <AreaSummary
+          curation={curation}
+          ansHnmr={ansHnmr}
+          ansCnmr={ansCnmr}
+          ansMs={ansMs}
+          ansIr={ansIr}
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <BlockTitle />
+        <BlockHnmr
+          ansHnmr={ansHnmr}
+        />
+        <BlockCnmr
+          ansCnmr={ansCnmr}
+        />
+        <BlockMS
+          ansMs={ansMs}
+        />
+        <BlockIr
+          ansIr={ansIr}
+        />
+        <BlockEa />
+        <BlockConclusion
+          ansHnmr={ansHnmr}
+          ansCnmr={ansCnmr}
+          ansMs={ansMs}
+          ansIr={ansIr}
+        />
+      </div>
+    </div>
+  );
+};
+
+QcContent.propTypes = {
+  sample: PropTypes.object.isRequired,
+  infer: PropTypes.object.isRequired,
+  curation: PropTypes.number.isRequired,
+};
+
+export default QcContent;
diff --git a/app/packs/src/components/qc/components/helper/icon.js b/app/packs/src/components/qc/components/helper/icon.js
new file mode 100644
index 000000000..1dd553540
--- /dev/null
+++ b/app/packs/src/components/qc/components/helper/icon.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Label, Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+const iconTp = margin => (
+  <Tooltip id="ans-tp">
+    max { margin } failure allowed.
+  </Tooltip>
+);
+
+const iconByBool = result => (
+  result
+    ? <Label bsStyle="success" className="label-qc">Pass</Label>
+    : <Label bsStyle="danger" className="label-qc">Fail</Label>
+);
+
+const iconByMargin = (result, margin = 0) => (
+  <OverlayTrigger placement="right" overlay={iconTp(margin)}>
+    { iconByBool(result) }
+  </OverlayTrigger>
+);
+
+const iconTpMs = (
+  <Tooltip id="ans-tp-ms">
+    Whether exact molecular mass is matched in the scan?
+  </Tooltip>
+);
+
+const iconMs = result => (
+  <OverlayTrigger placement="right" overlay={iconTpMs}>
+    { iconByBool(result) }
+  </OverlayTrigger>
+);
+
+const statusTp = txt => <Tooltip id="status-tp">{ txt }</Tooltip>;
+
+const iconStatus = (status) => {
+  switch (status) {
+    case 'accept':
+      return (
+        <OverlayTrigger placement="top" overlay={statusTp(status)}>
+          <i className="fa fa-check-circle-o" style={{ color: '#4caf50' }} />
+        </OverlayTrigger>
+      );
+    case 'warning':
+      return (
+        <OverlayTrigger placement="top" overlay={statusTp(status)}>
+          <i className="fa fa-exclamation-circle" style={{ color: '#ffc107' }} />
+        </OverlayTrigger>
+      );
+    case 'reject':
+      return (
+        <OverlayTrigger placement="top" overlay={statusTp(status)}>
+          <i className="fa fa-times-circle-o" style={{ color: '#e91e63' }} />
+        </OverlayTrigger>
+      );
+    case 'missing':
+      return (
+        <OverlayTrigger placement="top" overlay={statusTp(status)}>
+          <i className="fa fa-question-circle-o" style={{ color: '#5d4037' }} />
+        </OverlayTrigger>
+      );
+    case 'unknown':
+      return (
+        <OverlayTrigger placement="top" overlay={statusTp(status)}>
+          <i className="fa fa-question-circle-o" style={{ color: '#5d4037' }} />
+        </OverlayTrigger>
+      );
+    default:
+      return null;
+  }
+};
+
+export {
+  iconByMargin,
+  iconByBool,
+  iconMs,
+  iconStatus,
+};
diff --git a/app/packs/src/components/qc/components/helper/ir.js b/app/packs/src/components/qc/components/helper/ir.js
new file mode 100644
index 000000000..5ee78afa7
--- /dev/null
+++ b/app/packs/src/components/qc/components/helper/ir.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Table } from 'react-bootstrap';
+
+import { iconStatus } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+
+const colorStyles = [
+  { backgroundColor: '#FFFF00' },
+  { backgroundColor: '#87CEFA' },
+  { backgroundColor: '#FFB6C1' },
+  { backgroundColor: '#00FF00' },
+  { backgroundColor: '#E6E6FA' },
+  { backgroundColor: '#FFD700' },
+  { backgroundColor: '#F0FFFF' },
+  { backgroundColor: '#F5F5DC' },
+];
+
+const colorLabel = (idx) => {
+  const style = Object.assign(
+    {},
+    colorStyles[idx % 8],
+    { width: 20, borderRadius: 20, textAlign: 'center' },
+  );
+
+  return (
+    <div
+      style={style}
+    >
+      <span
+        className="txt-label"
+      >
+        {idx + 1}
+      </span>
+    </div>
+  );
+};
+
+const tableIr = (fgs) => {
+  if (!fgs) return null;
+
+  return (
+    <Table responsive striped condensed hover>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>SMARTS</th>
+          <th>Machine Confidence</th>
+          <th>Machine</th>
+          <th>Owner</th>
+        </tr>
+      </thead>
+      <tbody>
+        {
+          fgs
+            .sort((a, b) => b.confidence - a.confidence)
+            .map((fg, idx) => (
+              <tr key={`${fg}${idx}`}>
+                <td>{colorLabel(idx)}</td>
+                <td>{fg.sma}</td>
+                <td>{fg.confidence} %</td>
+                <td>{iconStatus(fg.status)}</td>
+                <td>{iconStatus(fg.statusOwner)}</td>
+              </tr>
+            ))
+        }
+      </tbody>
+    </Table>
+  );
+};
+
+export { tableIr }; // eslint-disable-line
diff --git a/app/packs/src/components/qc/components/helper/nmr.js b/app/packs/src/components/qc/components/helper/nmr.js
new file mode 100644
index 000000000..48b5ab7cc
--- /dev/null
+++ b/app/packs/src/components/qc/components/helper/nmr.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Table } from 'react-bootstrap';
+
+import { iconStatus } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+import { numFormat, realFormat } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
+
+const tableNmr = (shifts = []) => (
+  <Table responsive striped condensed hover>
+    <thead>
+      <tr>
+        <th>Atom</th>
+        <th>Prediction (ppm)</th>
+        <th>Real (ppm)</th>
+        <th>Diff (ppm)</th>
+        <th>Machine</th>
+        <th>Owner</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        shifts
+          .sort((a, b) => a.atom - b.atom)
+          .map((s, idx) => (
+            <tr key={`${s.atom}${idx}`}>
+              <td>{s.atom}</td>
+              <td>{numFormat(s.prediction)}</td>
+              <td>{realFormat(s.real, s.status)}</td>
+              <td>{realFormat(s.diff, s.status)}</td>
+              <td>{iconStatus(s.status)}</td>
+              <td>{iconStatus(s.statusOwner)}</td>
+            </tr>
+          ))
+      }
+    </tbody>
+  </Table>
+);
+
+const formatQV = (ops) => {
+  if (ops[0].insert === '\n') return ops.slice(1);
+  return ops;
+};
+
+export {
+  tableNmr,
+  formatQV,
+};
diff --git a/app/packs/src/components/qc/components/helper/qc_mol_view.js b/app/packs/src/components/qc/components/helper/qc_mol_view.js
new file mode 100644
index 000000000..1492fd499
--- /dev/null
+++ b/app/packs/src/components/qc/components/helper/qc_mol_view.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
+
+const QcMolView = ({ svg }) => {
+  if (!svg) return null;
+  return (
+    <div className="grid-qc-mol-view">
+      <SvgFileZoomPan
+        svg={svg}
+        duration={300}
+        resize
+      />
+    </div>
+  );
+};
+
+QcMolView.propTypes = {
+  svg: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+};
+
+QcMolView.defaultProps = {
+  svg: false,
+};
+
+export default QcMolView;
diff --git a/app/packs/src/components/qc/components/substance/BlockCnmr.js b/app/packs/src/components/qc/components/substance/BlockCnmr.js
new file mode 100644
index 000000000..ec2a4c4ab
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockCnmr.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Alert } from 'react-bootstrap';
+
+import QuillViewer from 'src/components/QuillViewer';
+import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
+import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+import {
+  tableNmr,
+  formatQV,
+} from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/nmr';
+
+const emptyBlock = () => (
+  <div className="card-qc">
+    <h5>
+      <span>2 Analysis of the provided digital NMR spectroscopy data: 13C NMR:</span>
+    </h5>
+    <div className="card-qc">
+      <Alert bsStyle="danger">
+        No Information. Please upload spectrum & make predictions in Spectra Editor.
+      </Alert>
+    </div>
+  </div>
+);
+
+const BlockCnmr = ({ ansCnmr }) => {
+  if (!ansCnmr.exist) return emptyBlock();
+  const { qck, qcp } = ansCnmr;
+  const {
+    shifts,
+    svg,
+    desc,
+    sigSent,
+    sigReal,
+    numAll,
+    numAcpMac,
+    numAcpOwn,
+    ansMac,
+    ansOwn,
+  } = qcp;
+  const {
+    countExpAtoms,
+    countIdnAtoms,
+    ansQck,
+  } = qck;
+
+  return (
+    <div className="card-qc">
+      <h5>
+        <span>2 Analysis of the provided digital NMR spectroscopy data: 13C NMR:</span>
+      </h5>
+      <div className="card-qc">
+        <div
+          style={{ display: 'inline' }}
+        >
+          <QuillViewer
+            value={formatQV(desc)}
+          />
+        </div>
+        <div>
+          <span>
+            Expected carbons: {countExpAtoms}.
+            Identified carbons: {countIdnAtoms}.
+          </span>
+          {iconByMargin(ansQck, 0)}
+        </div>
+        <div>
+          <span>
+            Signals detected: {sigSent}
+          </span>
+        </div>
+        <div>
+          <span>
+            Signals detected (NMRShiftDB): {sigReal}
+          </span>
+        </div>
+        <div>
+          <span>
+            Correctly assigned (machine):
+            ({numAcpMac}/{numAll})
+            {iconByMargin(ansMac, 1)}
+          </span>
+        </div>
+        <div>
+          <span>
+            Correctly assigned (owner):
+            ({numAcpOwn}/{numAll})
+            {iconByMargin(ansOwn, 0)}
+          </span>
+        </div>
+        <Panel
+          className="qc-detail-panel"
+          id="qc-detail-panel-cnmr"
+          defaultExpanded={false}
+        >
+          <Panel.Heading>
+            <Panel.Title className="qc-detail-panel-title" toggle>
+              13C NMR Prediction Detail
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              <QcMolView svg={svg} />
+              {tableNmr(shifts)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    </div>
+  );
+};
+
+BlockCnmr.propTypes = {
+  ansCnmr: PropTypes.object.isRequired,
+};
+
+export default BlockCnmr;
diff --git a/app/packs/src/components/qc/components/substance/BlockConclusion.js b/app/packs/src/components/qc/components/substance/BlockConclusion.js
new file mode 100644
index 000000000..36ce48432
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockConclusion.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
+import { iconByBool } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+
+const iconNmr = (ansNmr) => {
+  const { conclusion, conclusionOwn } = ansNmr;
+  if (!conclusion && conclusionOwn) {
+    return (
+      <Label bsStyle="success" className="label-qc">
+        Pass due to owner correction
+      </Label>
+    );
+  }
+  return iconByBool(conclusion);
+};
+
+const iconIr = (ansIr) => {
+  const { conclusion, conclusionOwn } = ansIr;
+  if (!conclusion && conclusionOwn) {
+    return (
+      <Label bsStyle="success" className="label-qc">
+        Pass due to owner correction
+      </Label>
+    );
+  }
+  return iconByBool(conclusion);
+};
+
+const BlockConclusion = ({
+  ansHnmr, ansCnmr, ansMs, ansIr,
+}) => (
+  <div>
+    <h4>
+      <span>Conclusion of the automated analysis check:</span>
+    </h4>
+    <div className="card-qc">
+      <p>
+        <span>1H NMR</span>
+        {iconNmr(ansHnmr)}
+      </p>
+      <p>
+        <span>13C NMR</span>
+        {iconNmr(ansCnmr)}
+      </p>
+      <p>
+        <span>MS</span>
+        {iconByBool(ansMs.conclusion)}
+      </p>
+      <p>
+        <span>IR</span>
+        {iconIr(ansIr)}
+      </p>
+    </div>
+    <br />
+  </div>
+);
+
+BlockConclusion.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+  ansCnmr: PropTypes.object.isRequired,
+  ansMs: PropTypes.object.isRequired,
+  ansIr: PropTypes.object.isRequired,
+};
+
+export default BlockConclusion;
diff --git a/app/packs/src/components/qc/components/substance/BlockEa.js b/app/packs/src/components/qc/components/substance/BlockEa.js
new file mode 100644
index 000000000..4779b02fa
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockEa.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BlockEa = () => (
+  <div className="card-qc">
+    <h5>
+      <span>5 Analysis of the provided EA analysis:</span>
+    </h5>
+    <div className="card-qc">
+      <p>TBD</p>
+    </div>
+    <br />
+  </div>
+);
+
+export default BlockEa;
diff --git a/app/packs/src/components/qc/components/substance/BlockHnmr.js b/app/packs/src/components/qc/components/substance/BlockHnmr.js
new file mode 100644
index 000000000..37c0ecaef
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockHnmr.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Alert } from 'react-bootstrap';
+
+import QuillViewer from 'src/components/QuillViewer';
+import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
+import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+import {
+  tableNmr,
+  formatQV,
+} from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/nmr';
+
+const emptyBlock = () => (
+  <div className="card-qc">
+    <h5>
+      <span>1. Analysis of the provided digital NMR spectroscopy data: 1H NMR:</span>
+    </h5>
+    <div className="card-qc">
+      <Alert bsStyle="danger">
+        No Information. Please upload spectrum & make predictions in Spectra Editor.
+      </Alert>
+    </div>
+  </div>
+);
+
+const BlockHnmr = ({ ansHnmr }) => {
+  if (!ansHnmr.exist) return emptyBlock();
+  const { qck, qcp } = ansHnmr;
+  const {
+    shifts,
+    svg,
+    desc,
+    sigSent,
+    sigReal,
+    numAll,
+    numAcpMac,
+    numAcpOwn,
+    ansMac,
+    ansOwn,
+  } = qcp;
+  const {
+    countExpAtoms,
+    countIdnAtoms,
+    ansQck,
+  } = qck;
+
+  return (
+    <div className="card-qc">
+      <h5>
+        <span>1. Analysis of the provided digital NMR spectroscopy data: 1H NMR:</span>
+      </h5>
+      <div className="card-qc">
+        <div
+          style={{ display: 'inline' }}
+        >
+          <QuillViewer
+            value={formatQV(desc)}
+          />
+        </div>
+        <div>
+          <span>
+            Expected protons: {countExpAtoms}.
+            Identified protons: {countIdnAtoms}.
+          </span>
+          {iconByMargin(ansQck, 0)}
+        </div>
+        <div>
+          <span>
+            Signals detected: {sigSent}
+          </span>
+        </div>
+        <div>
+          <span>
+            Signals detected (NMRShiftDB): {sigReal}
+          </span>
+        </div>
+        <div>
+          <span>
+            Correctly assigned (machine):
+            ({numAcpMac}/{numAll})
+            {iconByMargin(ansMac, 1)}
+          </span>
+        </div>
+        <div>
+          <span>
+            Correctly assigned (owner):
+            ({numAcpOwn}/{numAll})
+            {iconByMargin(ansOwn, 0)}
+          </span>
+        </div>
+        <Panel
+          className="qc-detail-panel"
+          id="qc-detail-panel-hnmr"
+          defaultExpanded={false}
+        >
+          <Panel.Heading>
+            <Panel.Title className="qc-detail-panel-title" toggle>
+              1H NMR Prediction Detail
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              <QcMolView svg={svg} />
+              {tableNmr(shifts)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    </div>
+  );
+};
+
+BlockHnmr.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+};
+
+export default BlockHnmr;
diff --git a/app/packs/src/components/qc/components/substance/BlockIr.js b/app/packs/src/components/qc/components/substance/BlockIr.js
new file mode 100644
index 000000000..11124654d
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockIr.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Panel, Alert } from 'react-bootstrap';
+
+import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
+import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+import { tableIr } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/ir';
+
+const emptyBlock = () => (
+  <div className="card-qc">
+    <h5>
+      <span>4 Analysis of the provided digital IR data:</span>
+    </h5>
+    <div className="card-qc">
+      <Alert bsStyle="danger">
+        No Information. Please upload spectra to Spectra Editor.
+      </Alert>
+    </div>
+  </div>
+);
+
+const BlockIr = ({ ansIr }) => {
+  if (!ansIr.exist) return emptyBlock();
+  const { qcp } = ansIr;
+  const {
+    fgs, svg, numFg, numFg80, numFg90,
+    posMac80, posOwn80, posMac90, posOwn90,
+    negMac90, negOwn90,
+    numMac, numOwn,
+    ansMac80, ansOwn80, ansMacF90, ansOwnF90,
+  } = qcp;
+
+  return (
+    <div className="card-qc">
+      <h5>
+        <span>4 Analysis of the provided digital IR data:</span>
+      </h5>
+      <div className="card-qc">
+        <div>
+          <span>Amount of functional groups given: {numFg}</span>
+        </div>
+        <div>
+          <span>
+            Amount of functional groups that were part of the routine and
+            accurracy &gt;80%: {numFg80 + numFg90}
+          </span>
+        </div>
+        <div>
+          <span>Output true machine (&gt;80%): </span>
+          {`${(posMac80 + posMac90)}/${(numMac)}`}
+          {iconByMargin(ansMac80, 1)}
+        </div>
+        <div>
+          <span>Output true owner (&gt;80%): </span>
+          {`${(posOwn80 + posOwn90)}/${(numOwn)}`}
+          {iconByMargin(ansOwn80, 1)}
+        </div>
+        <div>
+          <span>Output false machine (&gt;90%): </span>
+          {`${(negMac90)}/${(posMac90 + negMac90)}`}
+          {iconByMargin(ansMacF90, 0)}
+        </div>
+        <div>
+          <span>Output false owner (&gt; 90%): </span>
+          {`${(negOwn90)}/${(posOwn90 + negOwn90)}`}
+          {iconByMargin(ansOwnF90, 0)}
+        </div>
+        <Panel
+          className="qc-detail-panel"
+          id="qc-detail-panel-ir"
+          defaultExpanded={false}
+        >
+          <Panel.Heading>
+            <Panel.Title className="qc-detail-panel-title" toggle>
+              IR Prediction Detail
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              <QcMolView svg={svg} />
+              {tableIr(fgs)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    </div>
+  );
+};
+
+BlockIr.propTypes = {
+  ansIr: PropTypes.object.isRequired,
+};
+
+export default BlockIr;
diff --git a/app/packs/src/components/qc/components/substance/BlockMS.js b/app/packs/src/components/qc/components/substance/BlockMS.js
new file mode 100644
index 000000000..db31729b5
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockMS.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+
+import { iconMs } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
+
+const emptyBlock = () => (
+  <div className="card-qc">
+    <h5>
+      <span>3 Analysis of the provided digital mass spectrometry data:</span>
+    </h5>
+    <div className="card-qc">
+      <Alert bsStyle="danger">
+        No Information. Please upload spectra to Spectra Editor.
+      </Alert>
+    </div>
+  </div>
+);
+
+const BlockMS = ({ ansMs }) => {
+  if (!ansMs.exist) return emptyBlock();
+  const { qcp, conclusion } = ansMs;
+  const {
+    emMass,
+    scan,
+    desc,
+  } = qcp;
+
+  return (
+    <div className="card-qc">
+      <h5>
+        <span>3 Analysis of the provided digital mass spectrometry data:</span>
+      </h5>
+      <div className="card-qc">
+        <div>
+          <span>Identified Mass peaks (<i>m/z</i>) = </span>
+          {desc}
+        </div>
+        <div>
+          <span>Selected scan: {scan}.</span>
+        </div>
+        <div>
+          <span>Exact molecular mass = </span>
+          {emMass}
+        </div>
+        <div>
+          <span>Conclusion: </span>
+          {iconMs(conclusion)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+BlockMS.propTypes = {
+  ansMs: PropTypes.object.isRequired,
+};
+
+export default BlockMS;
diff --git a/app/packs/src/components/qc/components/substance/BlockTitle.js b/app/packs/src/components/qc/components/substance/BlockTitle.js
new file mode 100644
index 000000000..38fdcf62d
--- /dev/null
+++ b/app/packs/src/components/qc/components/substance/BlockTitle.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+const infoTp = (
+  <Tooltip id="tp-qc-info" className="card-qc">
+    <p>ChemSpectra (0.10)</p>
+    <p>NMRShiftDB (2.0)</p>
+    <p>ChemSpectraDeepIr (0.10)</p>
+  </Tooltip>
+);
+
+const BlockTitle = () => (
+  <div>
+    <h4>
+      <span className="underline-qc">
+        Analysis of digital research data for plausibility and Quality Control - QC
+      </span>
+    </h4>
+    <h4>
+      <span>Information </span>
+      <OverlayTrigger
+        placement="right"
+        overlay={infoTp}
+        style={{ marginLeft: '10px' }}
+      >
+        <i className="fa fa-info-circle" style={{ color: '#337ab7' }} />
+      </OverlayTrigger>
+    </h4>
+    <h4>
+      <span>Analysis</span>
+    </h4>
+  </div>
+);
+
+export default BlockTitle;
diff --git a/app/packs/src/components/qc/components/summary/AreaSummary.js b/app/packs/src/components/qc/components/summary/AreaSummary.js
new file mode 100644
index 000000000..e906743b3
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/AreaSummary.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import LineScore from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/LineScore';
+import {
+  LineTitle,
+  LineQcp,
+  LineQck,
+  LineDav,
+} from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/LineSummary';
+import { evalScore } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
+
+const AreaSummary = ({
+  ansHnmr, ansCnmr, ansMs, ansIr, curation,
+}) => {
+  const score = evalScore(ansHnmr, ansCnmr, ansMs, ansIr, curation);
+  return (
+    <div>
+      <div className="col-qcsum-l">
+        <LineTitle />
+        <LineDav
+          ansHnmr={ansHnmr}
+          ansCnmr={ansCnmr}
+          ansMs={ansMs}
+          ansIr={ansIr}
+        />
+        <LineQcp
+          ansHnmr={ansHnmr}
+          ansCnmr={ansCnmr}
+          ansMs={ansMs}
+          ansIr={ansIr}
+        />
+        <LineQck
+          ansHnmr={ansHnmr}
+          ansCnmr={ansCnmr}
+          ansMs={ansMs}
+        />
+      </div>
+      <div className="col-qcsum-r">
+        <LineScore score={score} />
+      </div>
+    </div>
+  );
+};
+
+AreaSummary.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+  ansCnmr: PropTypes.object.isRequired,
+  ansMs: PropTypes.object.isRequired,
+  ansIr: PropTypes.object.isRequired,
+  curation: PropTypes.number.isRequired,
+};
+
+export default AreaSummary;
diff --git a/app/packs/src/components/qc/components/summary/AreaTitle.js b/app/packs/src/components/qc/components/summary/AreaTitle.js
new file mode 100644
index 000000000..ce4661d84
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/AreaTitle.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { evalCurTitle } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
+
+const AreaTitle = ({ curation }) => (
+  <div>
+    <h4>
+      <span>
+        Curation aspects of available data
+      </span>
+    </h4>
+    <h4>
+      <span className="underline-qc">
+        {evalCurTitle(curation)}
+      </span>
+    </h4>
+  </div>
+);
+
+AreaTitle.propTypes = {
+  curation: PropTypes.number.isRequired,
+};
+
+export default AreaTitle;
diff --git a/app/packs/src/components/qc/components/summary/LineScore.js b/app/packs/src/components/qc/components/summary/LineScore.js
new file mode 100644
index 000000000..da574a5bd
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/LineScore.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import { evalMsg, evalLabel, evalScoreTxt } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
+
+const tpMsg = score => (
+  <Tooltip id="tp-msg">
+    {evalMsg(score)}
+  </Tooltip>
+);
+
+const LineScore = ({ score }) => {
+  const clsName = evalLabel(score);
+  const scoreTxt = evalScoreTxt(score);
+
+  return (
+    <OverlayTrigger placement="top" overlay={tpMsg(score)}>
+      <div className={clsName}>
+        <span className="txt-qcsum-score">{scoreTxt}</span>
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+LineScore.propTypes = {
+  score: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+};
+
+export default LineScore;
diff --git a/app/packs/src/components/qc/components/summary/LineSummary.js b/app/packs/src/components/qc/components/summary/LineSummary.js
new file mode 100644
index 000000000..5653b5618
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/LineSummary.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  BadgeSuccess,
+  BadgeFail,
+  BadgeDefault,
+} from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/common';
+
+/*
+const tpUv = (
+  <Tooltip id="tpUv">
+    UV
+  </Tooltip>
+);
+
+const tpXr = (
+  <Tooltip id="tpXr">
+    X-ray
+  </Tooltip>
+);
+*/
+
+const LineTitle = () => (
+  <div className="card-qcsum">
+    <span className="qc-title qc-placeholder">.</span>
+    <span><strong>1H</strong></span>
+    <span><strong>13C</strong></span>
+    <span><strong>MS</strong></span>
+    <span><strong>IR</strong></span>
+    <span><strong>UV</strong></span>
+    <span><strong>X-ray</strong></span>
+    <span><strong>Rf</strong></span>
+  </div>
+);
+
+const statusLabel = status => status ? <BadgeSuccess /> : <BadgeFail />;
+
+const LineQcp = ({
+  ansHnmr, ansCnmr, ansMs, ansIr,
+}) => (
+  <div className="card-qcsum">
+    <span className="qc-title">Data Evaluation</span>
+    <span>{statusLabel(ansHnmr.qcp.ansMac && ansHnmr.qcp.ansOwn)}</span>
+    <span>{statusLabel(ansCnmr.qcp.ansMac && ansCnmr.qcp.ansOwn)}</span>
+    <span>{statusLabel(ansMs.qcp.matchMass)}</span>
+    <span>{statusLabel(ansIr.qcp.ansMac80 && ansIr.qcp.ansOwn80 && ansIr.qcp.ansMacF90 && ansIr.qcp.ansOwnF90)}</span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+  </div>
+);
+
+LineQcp.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+  ansCnmr: PropTypes.object.isRequired,
+  ansMs: PropTypes.object.isRequired,
+  ansIr: PropTypes.object.isRequired,
+};
+
+const LineQck = ({ ansHnmr, ansCnmr, ansMs }) => (
+  <div className="card-qcsum">
+    <span className="qc-title">Analysis Check</span>
+    <span>{statusLabel(ansHnmr.qck.ansQck)}</span>
+    <span>{statusLabel(ansCnmr.qck.ansQck)}</span>
+    <span>{statusLabel(ansMs.qck.ansQck)}</span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+  </div>
+);
+
+LineQck.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+  ansCnmr: PropTypes.object.isRequired,
+  ansMs: PropTypes.object.isRequired,
+};
+
+const LineDav = ({
+  ansHnmr, ansCnmr, ansMs, ansIr,
+}) => (
+  <div className="card-qcsum">
+    <span className="qc-title">Data Availability</span>
+    <span>{statusLabel(ansHnmr.dav)}</span>
+    <span>{statusLabel(ansCnmr.dav)}</span>
+    <span>{statusLabel(ansMs.dav)}</span>
+    <span>{statusLabel(ansIr.dav)}</span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+    <span><BadgeDefault /></span>
+  </div>
+);
+
+LineDav.propTypes = {
+  ansHnmr: PropTypes.object.isRequired,
+  ansCnmr: PropTypes.object.isRequired,
+  ansMs: PropTypes.object.isRequired,
+  ansIr: PropTypes.object.isRequired,
+};
+
+export { LineTitle, LineQcp, LineQck, LineDav };
diff --git a/app/packs/src/components/qc/components/summary/common.js b/app/packs/src/components/qc/components/summary/common.js
new file mode 100644
index 000000000..59810d412
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/common.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const tpBadge = txt => (
+  <Tooltip id={`tp${txt}`}>
+    { txt }
+  </Tooltip>
+);
+
+const BadgeNotAvailable = () => (
+  <OverlayTrigger placement="top" overlay={tpBadge('Not Available!')}>
+    <div className="qc-dark" />
+  </OverlayTrigger>
+);
+
+const BadgeSuccess = () => (
+  <OverlayTrigger placement="top" overlay={tpBadge('Pass')}>
+    <div className="qc-success" />
+  </OverlayTrigger>
+);
+
+const BadgeFail = () => (
+  <OverlayTrigger placement="top" overlay={tpBadge('Fail')}>
+    <div className="qc-failure" />
+  </OverlayTrigger>
+);
+
+const BadgeDefault = () => (
+  <div className="qc-default" />
+);
+
+export {
+  BadgeNotAvailable,
+  BadgeSuccess,
+  BadgeFail,
+  BadgeDefault,
+};
diff --git a/app/packs/src/components/qc/components/summary/eval.js b/app/packs/src/components/qc/components/summary/eval.js
new file mode 100644
index 000000000..725f4cb4b
--- /dev/null
+++ b/app/packs/src/components/qc/components/summary/eval.js
@@ -0,0 +1,124 @@
+const evalMsg = (score) => {
+  if (score === 'incomplete analysis') {
+    return 'MS, 13C NMR and 1H NMR must exist.';
+  } else if (score <= -4) {
+    return 'Your data seems to contain errors according to your analysis. Please check the description of the analysis’ content.';
+  } else if (score <= -3) {
+    return 'Your analysis might be right, but we are unable to approve it without data and additional information. Please add data or refer your data to already submitted samples with full analysis.';
+  } else if (score <= -1) {
+    return 'Your analysis might be right, please add data to approve it.';
+  } else if (score <= 0) {
+    return 'Data to your analyses is detected but a reliable automated evaluation is not possible.';
+  } else if (score <= 4) {
+    return 'Check your data, the data does not reflect your analysis.';
+  } else if (score <= 7) {
+    return 'Check your data, the data does not reflect your analysis in a comprehensive way.';
+  } else if (score <= 9) {
+    return 'Your data is almost complete, please check for further data available.';
+  } else if (score <= 10) {
+    return 'Your data is consistent with the theoretically expected ones, thank you!';
+  }
+  return 'Unknown status.';
+};
+
+const isDisabled = ({ dav, qck, conclusionOwn }) => {
+  const { ansQck } = qck;
+  return dav === undefined && ansQck === undefined && conclusionOwn === undefined;
+};
+
+const isIncompDf = ({ dav, qck }) => qck && dav === undefined; // no dav, yes qck
+
+const isDavGood = ({ dav }) => !!dav;
+
+const isQckGood = ({ qck }) => qck.ansQck;
+
+const isQcpGood = ({ conclusionOwn }) => conclusionOwn;
+
+const isOnlyPrc = ({ dav, conclusionOwn }) => dav !== undefined && conclusionOwn === undefined;
+const isMorePrc = ({ dav, conclusionOwn }) => dav !== undefined && conclusionOwn !== undefined;
+
+const evalScoreStd1 = (ansHnmr, ansCnmr, ansMs, ansIr) => {
+  const isOneDavFail = !isDavGood(ansHnmr) || !isDavGood(ansCnmr) || !isDavGood(ansMs);
+  const isAllQckGood = isQckGood(ansHnmr) && isQckGood(ansCnmr) && isQckGood(ansMs);
+  const isQcpGoodBothHnmrCnmr = isQcpGood(ansHnmr) && isQcpGood(ansCnmr);
+  const isQcpGoodBothMsIr = isQcpGood(ansMs) && isQcpGood(ansIr);
+  const isQcpGoodHnmrOrCnmr = isQcpGood(ansHnmr) || isQcpGood(ansCnmr);
+  const isQcpGoodMsOrIr = isQcpGood(ansMs) || isQcpGood(ansIr);
+
+  if (isOneDavFail) return 'nonZeroDisabled';
+  if (!isDavGood(ansIr)
+    && isAllQckGood
+  ) return -2;
+  if (!isDavGood(ansIr)) return -4;
+
+  if (isAllQckGood
+    && isQcpGoodBothHnmrCnmr && isQcpGoodBothMsIr
+  ) return 10;
+
+  if (isAllQckGood
+    && isQcpGoodBothHnmrCnmr && isQcpGoodMsOrIr
+  ) return 9;
+
+  if (isAllQckGood
+    && isQcpGoodBothHnmrCnmr
+  ) return 8;
+
+  if (isAllQckGood
+    && isQcpGoodHnmrOrCnmr && isQcpGoodBothMsIr
+  ) return 7;
+
+  if (isAllQckGood
+    && isQcpGoodHnmrOrCnmr && isQcpGoodMsOrIr
+  ) return 6;
+
+  if (isAllQckGood
+    && isQcpGoodHnmrOrCnmr
+  ) return 5;
+
+  if (isAllQckGood
+    && isQcpGoodBothMsIr
+  ) return 4;
+
+  if (isAllQckGood
+    && isQcpGoodMsOrIr
+  ) return 3;
+
+  if (isAllQckGood) return 2;
+
+  return 0;
+};
+
+const evalScore = (ansHnmr, ansCnmr, ansMs, ansIr, curation) => {
+  switch (curation) {
+    case 1:
+      return 'Unknow curation.';
+    case 2:
+    default:
+      return evalScoreStd1(ansHnmr, ansCnmr, ansMs, ansIr);
+  }
+};
+
+const evalCurTitle = (curation) => {
+  switch (curation) {
+    case 1:
+      return 'No curation standard';
+    case 2:
+    default:
+      return 'Standard: Curation standard I: experimental organic chemistry';
+  }
+};
+
+const evalLabel = (score) => {
+  if (typeof score === 'string') return 'box-qcsum-score bc-bs-dark';
+  if (score === 0) return 'box-qcsum-score bc-bs-warning';
+  return score > 0
+    ? 'box-qcsum-score bc-bs-success'
+    : 'box-qcsum-score bc-bs-danger';
+};
+
+const evalScoreTxt = (score) => {
+  if (typeof score === 'string') return '-';
+  return score;
+};
+
+export { evalMsg, evalScore, evalLabel, evalScoreTxt, evalCurTitle };
diff --git a/app/packs/src/components/qc/utils/common.js b/app/packs/src/components/qc/utils/common.js
new file mode 100644
index 000000000..25c122a9b
--- /dev/null
+++ b/app/packs/src/components/qc/utils/common.js
@@ -0,0 +1,15 @@
+const numFormat = (input, digit = 2) => parseFloat(input).toFixed(digit);
+
+const realFormat = (val, status) => {
+  if (status === 'missing') {
+    return '- - -';
+  }
+  return numFormat(val);
+};
+
+const makeDav = (hasFiles, hasValidFiles) => {
+  if (hasFiles !== undefined) return hasValidFiles;
+  return undefined;
+};
+
+export { numFormat, realFormat, makeDav };
diff --git a/app/packs/src/components/qc/utils/ir.js b/app/packs/src/components/qc/utils/ir.js
new file mode 100644
index 000000000..76e1cf4b4
--- /dev/null
+++ b/app/packs/src/components/qc/utils/ir.js
@@ -0,0 +1,88 @@
+import { makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
+
+const makeQck = () => ({});
+
+const makeQcp = (pred) => {
+  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
+    return {};
+  }
+
+  const { fgs, svgs } = pred.output.result[0];
+  const svg = svgs ? svgs[0] : false;
+  let numFg = 0;
+  let numFg80 = 0;
+  let numFg90 = 0;
+  let posMac80 = 0;
+  let posOwn80 = 0;
+  let posMac90 = 0;
+  let posOwn90 = 0;
+  let negMac80 = 0;
+  let negOwn80 = 0;
+  let negMac90 = 0;
+  let negOwn90 = 0;
+  fgs.forEach((fg) => {
+    numFg += 1;
+    if (fg.confidence >= 90.0) {
+      numFg90 += 1;
+      fg.status === 'accept' ? posMac90 += 1 : negMac90 += 1; // eslint-disable-line
+      const ownAccept = (fg.statusOwner && fg.statusOwner === 'accept') ||
+        (!fg.statusOwner && fg.status === 'accept');
+      ownAccept ? posOwn90 += 1 : negOwn90 += 1; // eslint-disable-line
+    } else if (fg.confidence >= 80.0) {
+      numFg80 += 1;
+      fg.status === 'accept' ? posMac80 += 1 : negMac80 += 1; // eslint-disable-line
+      const ownAccept = (fg.statusOwner && fg.statusOwner === 'accept') ||
+        (!fg.statusOwner && fg.status === 'accept');
+      ownAccept ? posOwn80 += 1 : negOwn80 += 1; // eslint-disable-line
+    }
+  });
+
+  const numMac = posMac80 + posMac90 + negMac80 + negMac90;
+  const numOwn = posOwn80 + posOwn90 + negOwn80 + negOwn90;
+  const ansMac80 = numMac - posMac80 - posMac90 <= 1;
+  const ansOwn80 = numOwn - posOwn80 - posOwn90 <= 1;
+  const ansMacF90 = negMac90 - 0 <= 0;
+  const ansOwnF90 = negOwn90 - 0 <= 0;
+  return {
+    fgs,
+    svg,
+    numFg,
+    numFg80,
+    numFg90,
+    numMac,
+    numOwn,
+    ansMac80,
+    ansOwn80,
+    ansMacF90,
+    ansOwnF90,
+    posMac80,
+    posOwn80,
+    posMac90,
+    posOwn90,
+    negMac80,
+    negOwn80,
+    negMac90,
+    negOwn90,
+  };
+};
+
+const evaluateIr = (irQc) => {
+  const {
+    exist, hasFiles, hasValidFiles, pred,
+  } = irQc;
+
+  const dav = makeDav(hasFiles, hasValidFiles);
+  const qck = makeQck();
+  const qcp = makeQcp(pred);
+  const {
+    ansMac80, ansOwn80, ansMacF90, ansOwnF90,
+  } = qcp;
+  const conclusion = ansMac80 && ansOwn80 && ansMacF90 && ansOwnF90;
+  const conclusionOwn = ansOwn80 && ansOwnF90;
+
+  return {
+    exist, dav, qck, qcp, conclusion, conclusionOwn,
+  };
+};
+
+export { evaluateIr } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/ms.js b/app/packs/src/components/qc/utils/ms.js
new file mode 100644
index 000000000..bf8ac006e
--- /dev/null
+++ b/app/packs/src/components/qc/utils/ms.js
@@ -0,0 +1,71 @@
+import { FN } from '@complat/react-spectra-editor';
+
+import { makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
+import { contentToText } from 'src/utilities/quillFormat';
+import { emwInStr } from 'src/utilities/ElementUtils';
+
+const emm = s => s.molecule_exact_molecular_weight.toFixed(2);
+
+const isMatchMass = (xs, emMass) => {
+  const emw = parseFloat(emMass, 10);
+  const margin = 1.0;
+  let result = false;
+
+  xs.forEach((x) => {
+    if (Math.abs(x - (emw + 0.0)) <= margin) { result = true; }
+    if (Math.abs(x - (emw + 1.0)) <= margin) { result = true; } // eslint-disable-line
+    if (Math.abs(x - (emw + 23.0)) <= margin) { result = true; } // eslint-disable-line
+    if (Math.abs(x - (emw + 39.0)) <= margin) { result = true; } // eslint-disable-line
+  });
+
+  return result;
+};
+
+const getDesc = (xs, ys) => {
+  const maxY = Math.max(...ys);
+  const peaks = xs.map((x, idx) => ({ x, y: ys[idx] }));
+  const signal = FN.formatedMS(peaks, maxY);
+  return signal;
+};
+
+const makeQck = (ops, sample) => {
+  if (!ops) return {};
+  const emw = parseFloat(emm(sample), 10);
+  const opStr = contentToText({ ops });
+  const ansQck = emwInStr(emw, opStr);
+  return { ansQck };
+};
+
+const makeQcp = (pred, sample) => {
+  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
+    return {};
+  }
+
+  const { scan, xs, ys } = pred.output.result[0];
+
+  const emMass = emm(sample);
+  const matchMass = isMatchMass(xs, emMass);
+  const desc = getDesc(xs, ys); // TBD
+  return {
+    matchMass, emMass, scan, desc,
+  };
+};
+
+const evaluateMs = (msQc, sample) => {
+  const {
+    exist, hasFiles, hasValidFiles, ops, pred,
+  } = msQc;
+
+  const dav = makeDav(hasFiles, hasValidFiles);
+  const qck = makeQck(ops, sample);
+  const qcp = makeQcp(pred, sample);
+  const { matchMass } = qcp;
+  const conclusion = matchMass;
+  const conclusionOwn = matchMass;
+
+  return {
+    exist, dav, qck, qcp, conclusion, conclusionOwn,
+  };
+};
+
+export { evaluateMs } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/nmr.js b/app/packs/src/components/qc/utils/nmr.js
new file mode 100644
index 000000000..85f9bf278
--- /dev/null
+++ b/app/packs/src/components/qc/utils/nmr.js
@@ -0,0 +1,112 @@
+import { numFormat, makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
+
+import { contentToText } from 'src/utilities/quillFormat';
+import {
+  atomCountInFormula,
+  atomCountInNMRDescription,
+  atomCountCInNMRDescription,
+} from 'src/utilities/ElementUtils';
+
+const countSignal = (shifts) => {
+  const numAll = shifts.length;
+  let numAcpMac = 0;
+  let numWarMac = 0;
+  let numRjtMac = 0;
+  let numMisMac = 0;
+  let numAcpOwn = 0;
+  shifts.forEach((s) => {
+    if (s.status === 'accept') {
+      numAcpMac += 1;
+    } else if (s.status === 'warning') {
+      numWarMac += 1;
+    } else if (s.status === 'reject') {
+      numRjtMac += 1;
+    } else if (s.status === 'missing') {
+      numMisMac += 1;
+    }
+    const ownAccept = (s.statusOwner && s.statusOwner === 'accept') ||
+      (!s.statusOwner && s.status === 'accept');
+    if (ownAccept) {
+      numAcpOwn += 1;
+    }
+  });
+  return {
+    numAll, numAcpMac, numWarMac, numRjtMac, numMisMac, numAcpOwn,
+  };
+};
+
+const extractSignal = (shifts) => {
+  const reals = shifts.map(s => s.real)
+    .filter(r => (r != null && r !== 0)).sort((a, b) => a - b);
+  const sents = Array.from(new Set(reals)).sort((a, b) => a - b);
+
+  const sigSent = sents.map(s => numFormat(s)).join(', ');
+  const sigReal = reals.map(r => numFormat(r)).join(', ');
+
+  return {
+    sigSent, sigReal,
+  };
+};
+
+const makeQck = (sumFormula, ops, type) => {
+  if (!ops) return {};
+  const is1H = type === '1H NMR';
+  const countExpAtoms = is1H
+    ? atomCountInFormula(sumFormula, 'H')
+    : atomCountInFormula(sumFormula, 'C');
+  const opStr = contentToText({ ops });
+  const countIdnAtoms = is1H
+    ? atomCountInNMRDescription(opStr)
+    : atomCountCInNMRDescription(opStr);
+  const ansQck = (countExpAtoms - countIdnAtoms) === 0;
+  return { countExpAtoms, countIdnAtoms, ansQck };
+};
+
+const makeQcp = (pred, ops = []) => {
+  const desc = [{ insert: 'According to user: ' }, ...ops];
+  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
+    return { desc };
+  }
+  const { shifts, svgs } = pred.output.result[0];
+  const svg = svgs ? svgs[0] : false;
+  const {
+    sigSent, sigReal,
+  } = extractSignal(shifts);
+  const {
+    numAll, numAcpMac, numAcpOwn,
+  } = countSignal(shifts);
+  const ansMac = numAll - numAcpMac <= 1;
+  const ansOwn = numAll - numAcpOwn <= 0;
+  return {
+    shifts,
+    svg,
+    desc,
+    sigSent,
+    sigReal,
+    numAll,
+    numAcpMac,
+    numAcpOwn,
+    ansMac,
+    ansOwn,
+  };
+};
+
+const evaluateNmr = (nmrQc, sumFormula) => {
+  const {
+    exist, hasFiles, hasValidFiles, ops, type, pred,
+  } = nmrQc;
+
+  const dav = makeDav(hasFiles, hasValidFiles);
+  const qck = makeQck(sumFormula, ops, type);
+  const qcp = makeQcp(pred, ops);
+  const { ansQck } = qck;
+  const { ansMac, ansOwn } = qcp;
+  const conclusion = ansMac && ansOwn && ansQck;
+  const conclusionOwn = ansOwn && ansQck;
+
+  return {
+    exist, dav, qck, qcp, conclusion, conclusionOwn,
+  };
+};
+
+export { evaluateNmr } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/qcs.js b/app/packs/src/components/qc/utils/qcs.js
new file mode 100644
index 000000000..948bae7b4
--- /dev/null
+++ b/app/packs/src/components/qc/utils/qcs.js
@@ -0,0 +1,60 @@
+const extractInfer = (ai, files) => {
+  let targetPred = false;
+  let targetTyp = false;
+  let hasInfer = false;
+  let hasFiles = false;
+  let hasValidFiles = false;
+  const valids = ['json', 'peaked', 'edited'];
+  ai.children.forEach((dt) => {
+    hasFiles = dt.attachments.length > 0;
+    dt.attachments.forEach((att) => {
+      if (valids.indexOf(att.aasm_state) > -1) hasValidFiles = true;
+      if (att.aasm_state !== 'json') return;
+      if (!files) return;
+      const pred = files
+        .map(f => (f.id === att.id ? f : null))
+        .filter(r => r != null)[0];
+      if (!pred || pred.predictions.outline.code >= 300) return;
+      targetTyp = pred.predictions.output.result[0] &&
+        pred.predictions.output.result[0].type;
+      targetPred = pred.predictions;
+      hasInfer = true;
+    });
+  });
+  return {
+    pred: targetPred, type: targetTyp, hasInfer, hasFiles, hasValidFiles,
+  };
+};
+
+const buildQcs = (sample, infer) => {
+  const { files } = infer.result || {};
+  let irQc = {};
+  let msQc = {};
+  let hnmrQc = {};
+  let cnmrQc = {};
+  sample.container.children[0].children.forEach((ai) => {
+    const { content, kind } = ai.extended_metadata;
+    const { ops } = content;
+    const inferO = extractInfer(ai, files);
+    const { type } = inferO;
+    if ((!type || type === 'ms') && (kind && kind.includes('mass spectrometry'))) {
+      msQc = Object.assign({}, msQc, inferO, { ops, exist: true, type: 'Mass' });
+    } else if ((!type || type === 'nmr;13C;1d') && (kind && kind.includes('13C NMR'))) {
+      cnmrQc = Object.assign({}, cnmrQc, inferO, { ops, exist: true, type: '13C NMR' });
+    } else if ((!type || type === 'nmr;1H;1d') && (kind && kind.includes('1H NMR'))) {
+      hnmrQc = Object.assign({}, hnmrQc, inferO, { ops, exist: true, type: '1H NMR' });
+    } else if ((!type || type === 'ir') && (kind && kind.includes('IR'))) {
+      irQc = Object.assign({}, irQc, inferO, { ops, exist: true, type: 'IR' });
+    }
+  });
+  return {
+    irQc, msQc, hnmrQc, cnmrQc,
+  };
+};
+
+const prismQcs = (sample, infer) => {
+  const qcs = buildQcs(sample, infer);
+  return qcs;
+};
+
+export { prismQcs }; // eslint-disable-line
diff --git a/app/packs/src/components/react_quill/BaseToolbar.js b/app/packs/src/components/react_quill/BaseToolbar.js
new file mode 100644
index 000000000..4fbc6bd0f
--- /dev/null
+++ b/app/packs/src/components/react_quill/BaseToolbar.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const BaseToolbar = () => (
+  <React.Fragment>
+    <select className="ql-header" defaultValue="">
+      <option value="1" />
+      <option value="2" />
+      <option value="3" />
+      <option value="4" />
+      <option value="5" />
+      <option value="6" />
+      <option />
+    </select>
+    <button className="ql-bold" />
+    <button className="ql-italic" />
+    <button className="ql-underline" />
+    <button className="ql-list" value="ordered" />
+    <button className="ql-list" value="bullet" />
+    <button className="ql-script" value="sub" />
+    <button className="ql-script" value="super" />
+  </React.Fragment>
+);
+
+export default BaseToolbar;
diff --git a/app/packs/src/components/react_quill/DynamicToolbarEditor.js b/app/packs/src/components/react_quill/DynamicToolbarEditor.js
new file mode 100644
index 000000000..22a27ab47
--- /dev/null
+++ b/app/packs/src/components/react_quill/DynamicToolbarEditor.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactQuill from './ReactQuill';
+
+class DynamicToolbarEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+
+    this.toolbarId = `_${Math.random().toString(36).substr(2, 9)}`;
+    this.modules = {
+      toolbar: { container: `#${this.toolbarId}` },
+    };
+  }
+
+  render() {
+    const { innerRef, children, ...otherProps } = this.props;
+
+    return (
+      <div>
+        <div id={this.toolbarId}>
+          {children}
+        </div>
+        <ReactQuill modules={this.modules} {...otherProps} ref={innerRef} />
+      </div>
+    );
+  }
+}
+
+DynamicToolbarEditor.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default React.forwardRef((props, ref) => (
+  <DynamicToolbarEditor innerRef={ref} {...props} />
+));
diff --git a/app/packs/src/components/react_quill/ReactQuill.js b/app/packs/src/components/react_quill/ReactQuill.js
new file mode 100644
index 000000000..7c7b12d37
--- /dev/null
+++ b/app/packs/src/components/react_quill/ReactQuill.js
@@ -0,0 +1,497 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/sort-comp */
+/* eslint-disable react/forbid-prop-types */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+
+import Quill from 'quill';
+
+function postpone(fn) {
+  Promise.resolve().then(fn);
+}
+
+const isDelta = value => value && value.ops;
+
+const isEqualValue = (value, otherValue) => {
+  if (isDelta(value) && isDelta(otherValue)) {
+    return isEqual(value.ops, otherValue.ops);
+  }
+
+  return isEqual(value, otherValue);
+};
+
+const makeUnprivilegedEditor = (editor) => {
+  const e = editor;
+
+  return {
+    getHTML: () => e.root.innerHTML,
+    getLength: e.getLength.bind(e),
+    getText: e.getText.bind(e),
+    getContents: e.getContents.bind(e),
+    getSelection: e.getSelection.bind(e),
+    getBounds: e.getBounds.bind(e),
+  };
+};
+
+const setEditorTabIndex = (editor, tabIndex) => {
+  const check = (
+    editor == null || editor.scroll == null || editor.scroll.domNode == null
+  );
+  if (check) return;
+
+  // eslint-disable-next-line no-param-reassign
+  editor.scroll.domNode.tabIndex = tabIndex;
+};
+
+export default class ReactQuill extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      generation: 0,
+    };
+
+    this.dirtyProps = ['modules', 'formats', 'bounds', 'theme', 'children'];
+    this.cleanProps = [
+      'id', 'className', 'style', 'placeholder', 'tabIndex',
+      'onChange', 'onChangeSelection', 'onFocus', 'onBlur',
+      'onKeyPress', 'onKeyDown', 'onKeyUp'
+    ];
+    this.allProps = this.dirtyProps.concat(this.cleanProps);
+
+    this.isControlled = this.isControlled.bind(this);
+
+    this.value = this.isControlled() ? props.value : props.defaultValue;
+
+    this.shouldComponentRegenerate = this.shouldComponentRegenerate.bind(this);
+    this.validateProps = this.validateProps.bind(this);
+
+    this.getEditor = this.getEditor.bind(this);
+    this.getEditingArea = this.getEditingArea.bind(this);
+    this.getEditorConfig = this.getEditorConfig.bind(this);
+    this.getEditorContents = this.getEditorContents.bind(this);
+    this.getEditorSelection = this.getEditorSelection.bind(this);
+
+    this.setEditorContents = this.setEditorContents.bind(this);
+    this.setEditorReadOnly = this.setEditorReadOnly.bind(this);
+    this.setEditorSelection = this.setEditorSelection.bind(this);
+
+    this.createEditor = this.createEditor.bind(this);
+    this.destroyEditor = this.destroyEditor.bind(this);
+    this.hookEditor = this.hookEditor.bind(this);
+    this.instantiateEditor = this.instantiateEditor.bind(this);
+    this.unhookEditor = this.unhookEditor.bind(this);
+
+    this.renderEditingArea = this.renderEditingArea.bind(this);
+
+    this.focus = this.focus.bind(this);
+    this.blur = this.blur.bind(this);
+
+    this.onEditorChange = this.onEditorChange.bind(this);
+    this.onEditorChangeText = this.onEditorChangeText.bind(this);
+    this.onEditorChangeSelection = this.onEditorChangeSelection.bind(this);
+  }
+
+  componentDidMount() {
+    this.instantiateEditor();
+    this.setEditorContents(this.editor, this.getEditorContents());
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    this.validateProps(nextProps);
+
+    // If the editor hasn't been instantiated yet, or the component has been
+    // regenerated, we already know we should update.
+    if (!this.editor || this.state.generation !== nextState.generation) {
+      return true;
+    }
+
+    // Handle value changes in-place
+    if ('value' in nextProps) {
+      const prevContents = this.getEditorContents();
+      const nextContents = nextProps.value ? nextProps.value : '';
+
+      // NOTE: Seeing that Quill is missing a way to prevent edits, we have to
+      //       settle for a hybrid between controlled and uncontrolled mode. We
+      //       can't prevent the change, but we'll still override content
+      //       whenever `value` differs from current state.
+      // NOTE: Comparing an HTML string and a Quill Delta will always trigger a
+      //       change, regardless of whether they represent the same document.
+      if (!isEqualValue(nextContents, prevContents)) {
+        this.setEditorContents(this.editor, nextContents);
+      }
+    }
+
+    // Handle read-only changes in-place
+    if (nextProps.readOnly !== this.props.readOnly && nextProps.readOnly !== null) {
+      this.setEditorReadOnly(!nextProps.readOnly);
+    }
+
+    return Object.keys(this.props).some(propKey => (
+      !isEqual(nextProps[propKey], this.props[propKey])
+    ));
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // If we're changing one of the `dirtyProps`, the entire Quill Editor needs
+    // to be re-instantiated. Regenerating the editor will cause the whole tree,
+    // including the container, to be cleaned up and re-rendered from scratch.
+    // Store the contents so they can be restored later.
+    if (this.editor && this.shouldComponentRegenerate(prevProps)) {
+      const delta = this.editor.getContents();
+      const selection = this.editor.getSelection();
+      this.regenerationSnapshot = { delta, selection };
+
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ generation: this.state.generation + 1 });
+      this.destroyEditor();
+    }
+
+    // The component has been regenerated, so it must be re-instantiated, and
+    // its content must be restored to the previous values from the snapshot.
+    if (this.state.generation !== prevState.generation && this.regenerationSnapshot) {
+      const { delta, selection } = this.regenerationSnapshot;
+      delete this.regenerationSnapshot;
+
+      this.instantiateEditor();
+
+      const { editor } = this;
+      if (editor) {
+        editor.setContents(delta);
+        postpone(() => this.setEditorSelection(editor, selection));
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyEditor();
+  }
+
+  validateProps(props) {
+    let error;
+    if (this.lastDeltaChangeSet && this.lastDeltaChangeSet === props.value) {
+      error = 'You are passing the `delta` object from the `onChange` event ' +
+              'back as `value`. You most probably ' +
+              'want `editor.getContents()` instead. ';
+      throw new Error(error);
+    }
+
+    const noChild = React.Children.count(props.children);
+    error = null;
+    if (noChild) {
+      if (noChild > 1) {
+        error = 'The Quill editing area can only be composed ' +
+                'of a single React element.';
+      }
+
+      const child = React.Children.only(props.children);
+      if (child && child.type === 'textarea') {
+        error = 'Quill does not support editing on a <textarea>. ' +
+                'Use a <div> instead.';
+      }
+
+      if (error) throw new Error(error);
+    }
+  }
+
+  shouldComponentRegenerate(nextProps) {
+    return this.dirtyProps.some(prop => (
+      !isEqual(nextProps[prop], this.props[prop])
+    ));
+  }
+
+  getEditorConfig() {
+    return {
+      bounds: this.props.bounds,
+      formats: this.props.formats,
+      modules: this.props.modules,
+      placeholder: this.props.placeholder,
+      readOnly: this.props.readOnly,
+      scrollingContainer: this.props.scrollingContainer,
+      tabIndex: this.props.tabIndex,
+      theme: this.props.theme,
+    };
+  }
+
+  getEditor() {
+    if (this.editor == null) {
+      throw new Error('Accessing non-instantiated editor');
+    }
+
+    return this.editor;
+  }
+
+  getEditorContents() {
+    return this.value;
+  }
+
+  getEditorSelection() {
+    return this.selection;
+  }
+
+  getEditingArea() {
+    if (!this.editingArea) {
+      throw new Error('Instantiating on missing editing area');
+    }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const element = ReactDOM.findDOMNode(this.editingArea);
+    if (!element) {
+      throw new Error('Cannot find element for editing area');
+    }
+
+    if (element.nodeType === 3) {
+      throw new Error('Editing area cannot be a text node');
+    }
+
+    return element;
+  }
+
+  /* eslint-disable class-methods-use-this */
+  setEditorContents(editor, value) {
+    if (!editor) return;
+
+    this.value = value;
+    const sel = this.getEditorSelection();
+
+    if (typeof value === 'string') {
+      editor.setContents(editor.clipboard.convert(value));
+    } else {
+      editor.setContents(value);
+    }
+
+    postpone(() => this.setEditorSelection(editor, sel));
+  }
+
+  setEditorSelection(editor, range) {
+    this.selection = range;
+
+    if (range) {
+      // Validate bounds before applying.
+      const length = editor.getLength();
+
+      /* eslint-disable no-param-reassign */
+      range.index = Math.max(0, Math.min(range.index, length - 1));
+      range.length = Math.max(0, Math.min(range.length, (length - 1) - range.index));
+      /* eslint-enable no-param-reassign */
+
+      editor.setSelection(range);
+    }
+  }
+
+  setEditorReadOnly(editor, value) {
+    if (value) {
+      editor.disable();
+    } else {
+      editor.enable();
+    }
+  }
+
+  hookEditor(editor) {
+    // Expose the editor on change events via a weaker, unprivileged proxy
+    // object that does not allow accidentally modifying editor state.
+    this.unprivilegedEditor = makeUnprivilegedEditor(editor);
+    // Using `editor-change` allows picking up silent updates, like selection
+    // changes on typing.
+    editor.on('editor-change', this.onEditorChange);
+  }
+
+  unhookEditor(editor) {
+    editor.off('editor-change', this.onEditorChange);
+  }
+
+  createEditor(element, config) {
+    const editor = new Quill(element, config);
+
+    if (config.tabIndex != null) {
+      setEditorTabIndex(editor, config.tabIndex);
+    }
+
+    this.hookEditor(editor);
+    return editor;
+  }
+
+  isControlled() {
+    const { value } = this.props;
+    return value && value !== '';
+  }
+
+  destroyEditor() {
+    if (!this.editor) return;
+
+    this.unhookEditor(this.editor);
+    delete this.editor;
+  }
+
+  instantiateEditor() {
+    if (this.editor) return;
+
+    this.editor = this.createEditor(
+      this.getEditingArea(),
+      this.getEditorConfig()
+    );
+  }
+
+  onEditorChange(eventName, rangeOrDelta, oldRangeOrDelta, source) {
+    if (eventName === 'text-change' && this.editor && this.unprivilegedEditor) {
+      this.onEditorChangeText(
+        this.editor.root.innerHTML,
+        rangeOrDelta,
+        source,
+        this.unprivilegedEditor
+      );
+    } else if (eventName === 'selection-change' && this.unprivilegedEditor) {
+      this.onEditorChangeSelection(
+        rangeOrDelta,
+        source,
+        this.unprivilegedEditor
+      );
+    }
+  }
+
+  onEditorChangeText(value, delta, source, editor) {
+    if (!this.editor) return;
+
+    // We keep storing the same type of value as what the user gives us,
+    // so that value comparisons will be more stable and predictable.
+    const nextContents = isDelta(this.value)
+      ? editor.getContents()
+      : editor.getHTML();
+
+    if (nextContents !== this.getEditorContents()) {
+      // Taint this `delta` object, so we can recognize whether the user
+      // is trying to send it back as `value`, preventing a likely loop.
+      this.lastDeltaChangeSet = delta;
+
+      this.value = nextContents;
+
+      const { onChange } = this.props;
+      if (onChange) onChange(value, delta, source, editor);
+    }
+  }
+
+  onEditorChangeSelection(nextSelection, source, editor) {
+    if (!this.editor) return;
+
+    const currentSelection = this.getEditorSelection();
+    const hasGainedFocus = !currentSelection && nextSelection;
+    const hasLostFocus = currentSelection && !nextSelection;
+
+    if (isEqual(nextSelection, currentSelection)) return;
+
+    this.selection = nextSelection;
+    const { onChangeSelection } = this.props;
+    if (onChangeSelection) onChangeSelection(nextSelection, source, editor);
+
+    const { onFocus, onBlur } = this.props;
+    if (hasGainedFocus && onFocus) {
+      onFocus(nextSelection, source, editor);
+    } else if (hasLostFocus && onBlur) {
+      onBlur(nextSelection, source, editor);
+    }
+  }
+
+  focus() {
+    if (!this.editor) return;
+
+    this.editor.focus();
+  }
+
+  blur() {
+    if (!this.editor) return;
+
+    this.selection = null;
+    this.editor.blur();
+  }
+
+  renderEditingArea() {
+    const { children, preserveWhitespace } = this.props;
+    const { generation } = this.state;
+
+    const properties = {
+      key: generation,
+      ref: (instance) => {
+        this.editingArea = instance;
+      }
+    };
+
+    if (React.Children.count(children)) {
+      return React.cloneElement(
+        React.Children.only(children),
+        properties
+      );
+    }
+
+    return preserveWhitespace
+      ? <pre {...properties} />
+      : <div {...properties} />;
+  }
+
+  render() {
+    const {
+      id, style, className, onKeyPress, onKeyDown, onKeyUp
+    } = this.props;
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div
+        id={id}
+        style={style}
+        key={this.state.generation}
+        className={`quill ${className || ''}`}
+        onKeyPress={onKeyPress}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+      >
+        {this.renderEditingArea()}
+      </div>
+    );
+  }
+}
+
+ReactQuill.propTypes = {
+  bounds: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  children: PropTypes.element,
+  className: PropTypes.string,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  formats: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string,
+  modules: PropTypes.object,
+  onChange: PropTypes.func,
+  onChangeSelection: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.instanceOf(React.EventHanlder),
+  onKeyPress: PropTypes.instanceOf(React.EventHanlder),
+  onKeyUp: PropTypes.instanceOf(React.EventHanlder),
+  placeholder: PropTypes.string,
+  preserveWhitespace: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  scrollingContainer: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  theme: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+};
+
+ReactQuill.defaultProps = {
+  modules: {},
+  theme: 'snow',
+};
+
diff --git a/app/packs/src/components/react_quill/ToolbarDropdown.js b/app/packs/src/components/react_quill/ToolbarDropdown.js
new file mode 100644
index 000000000..a2b151447
--- /dev/null
+++ b/app/packs/src/components/react_quill/ToolbarDropdown.js
@@ -0,0 +1,134 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const dropdownSvg = (
+  <svg viewBox="0 0 18 18">
+    <polygon className="ql-stroke" points="7 11 9 13 11 11 7 11" />
+    <polygon className="ql-stroke" points="7 7 9 5 11 7 7 7" />
+  </svg>
+);
+
+export default class ToolbarDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { expanded: false };
+
+    this.pickerSpan = React.createRef();
+    this.pickerLabel = React.createRef();
+
+    const genId = Math.random().toString().substr(2, 10);
+    this.ddQuillId = `ql-dropdown-${genId}`;
+
+    const sheets = document.styleSheets;
+    this.sheet = sheets[sheets.length - 1];
+
+    this.getTextWidth = this.getTextWidth.bind(this);
+    this.toggleExpand = this.toggleExpand.bind(this);
+  }
+
+  componentDidMount() {
+    const cssRule = ".ql-snow .ql-picker."+this.ddQuillId+" .ql-picker-label::before, ."+this.ddQuillId+" .ql-picker.ql-size .ql-picker-item::before { content: attr(data-label); line-height: 25px; }";
+
+    try {
+      this.ruleId = this.sheet.insertRule(cssRule);
+    } catch (err) {
+      console.log(err);
+    }
+
+    const requiredWidth = this.getTextWidth() + 40;
+    this.pickerLabel.current.style.width = `${requiredWidth}px`;
+
+    window.addEventListener('click', (e) => {
+      if (!this.pickerSpan.current) return;
+
+      if (!this.pickerSpan.current.contains(e.target)) {
+        this.pickerSpan.current.classList.remove('ql-expanded');
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    try {
+      this.sheet.deleteRule(this.ruleId);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  getTextWidth(font = "500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") {
+    const canvas = this.canvas || (this.canvas = document.createElement('canvas'));
+    const context = canvas.getContext('2d');
+    context.font = font;
+    const metrics = context.measureText(this.props.label);
+    return metrics.width;
+  }
+
+  toggleExpand() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
+  render() {
+    const { items, onSelect } = this.props;
+    let ddLabel = this.props.label;
+    const itemValues = Object.values(items);
+    if (!ddLabel && itemValues.length > 0) {
+      [ddLabel] = itemValues;
+    }
+
+    const ddItems = Object.entries(items).map(([k, v]) => {
+      const onClick = () => onSelect(k, v);
+
+      return (
+        <span
+          className="ql-picker-item"
+          key={`mi_${v}`}
+          value={v}
+          onClick={onClick}
+        >
+          {k}
+        </span>
+      );
+    });
+
+    const { expanded } = this.state;
+    const expandedClass = expanded ? 'ql-expanded' : '';
+    const className = `${this.ddQuillId} ql-picker ${expandedClass}`;
+
+    return (
+      <span className="ql-formats">
+        <span
+          className={className}
+          ref={this.pickerSpan}
+          onClick={this.toggleExpand}
+        >
+          <span
+            className="ql-picker-label"
+            data-label={ddLabel}
+            ref={this.pickerLabel}
+          >
+            {dropdownSvg}
+          </span>
+          <span className="ql-picker-options">
+            {ddItems}
+          </span>
+        </span>
+      </span>
+    );
+  }
+}
+
+ToolbarDropdown.propTypes = {
+  label: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.object,
+  onSelect: PropTypes.func,
+};
+
+ToolbarDropdown.defaultProps = {
+  label: '',
+  items: {},
+  onSelect: null,
+};
diff --git a/app/packs/src/components/react_quill/ToolbarIcon.js b/app/packs/src/components/react_quill/ToolbarIcon.js
new file mode 100644
index 000000000..3554301d2
--- /dev/null
+++ b/app/packs/src/components/react_quill/ToolbarIcon.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ToolbarIcon extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { onClick } = this.props;
+    if (onClick) onClick();
+  }
+
+  render() {
+    const { icon } = this.props;
+    if (React.isValidElement(icon)) {
+      return (
+        <button
+          style={{ width: 'auto' }}
+          onClick={this.onClick}
+        >
+          {icon}
+        </button>
+      );
+    }
+
+    return (
+      <button
+        className={`ql_${icon}`}
+        style={{ width: 'auto' }}
+        onClick={this.onClick}
+      >
+        <span>
+          {icon.toUpperCase()}
+        </span>
+      </button>
+    );
+  }
+}
+
+ToolbarIcon.propTypes = {
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  onClick: PropTypes.func
+};
+
+ToolbarIcon.defaultProps = {
+  icon: <span />,
+  onClick: null
+};
diff --git a/app/packs/src/components/report/Archives.js b/app/packs/src/components/report/Archives.js
new file mode 100644
index 000000000..15c68c308
--- /dev/null
+++ b/app/packs/src/components/report/Archives.js
@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  Button,
+  Label,
+  PanelGroup,
+  Panel,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import { stopBubble } from 'src/utilities/DomHelper';
+
+const fileDescription = archive => (
+  archive.file_description
+    ? <p>{archive.file_description}</p>
+    : <p className="text-comment">No file description</p>
+);
+
+const clickDownloadReport = (e, archiveId, template) => {
+  e.stopPropagation();
+  ReportActions.downloadReport(archiveId, template);
+};
+
+const reportStatusBtn = (archive) => {
+  const { downloadable, id, template } = archive;
+  const onClickDownloadReport = e => clickDownloadReport(e, id, template);
+  const downloadTP = <Tooltip id="download-docx">Download</Tooltip>;
+  const processTP = (
+    <Tooltip id="wait-processing">
+      Processing the report. Please wait
+    </Tooltip>
+  );
+  const downloadBtn = (
+    <OverlayTrigger placement="top" overlay={downloadTP}>
+      <Button bsStyle="primary" bsSize="small" onClick={onClickDownloadReport}>
+        <i className="fa fa-download" />
+      </Button>
+    </OverlayTrigger>
+  );
+
+  const processBtn = (
+    <OverlayTrigger placement="top" overlay={processTP}>
+      <Button bsStyle="default" bsSize="small" onClick={stopBubble}>
+        <i className="fa fa-clock-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+
+  return downloadable ? downloadBtn : processBtn;
+};
+
+const clickToDelete = (e, archive) => {
+  e.stopPropagation();
+  if (confirm('Are you sure to delete this archive?')) {
+    ReportActions.delete(archive);
+  }
+};
+
+const deleteBtn = (archive) => {
+  const onClickToDelete = e => clickToDelete(e, archive);
+  const deleteTP = (
+    <Tooltip id="delete-tp">
+      Delete this archive.
+    </Tooltip>
+  );
+
+  const btn = (
+    <OverlayTrigger placement="top" overlay={deleteTP}>
+      <Button bsStyle="danger" bsSize="small" onClick={onClickToDelete}>
+        <i className="fa fa-times" />
+      </Button>
+    </OverlayTrigger>
+  );
+
+  return btn;
+};
+
+const clickToClone = (e, archive) => {
+  e.stopPropagation();
+  LoadingActions.start();
+  ReportActions.clone.defer(archive);
+  UIActions.uncheckWholeSelection.defer();
+};
+
+const cloneBtn = (archive) => {
+  const onClickToClone = e => clickToClone(e, archive);
+  const cloneTP = (
+    <Tooltip id="clone-tp">
+      Load data from this report.
+    </Tooltip>
+  );
+
+  const btn = (
+    <OverlayTrigger placement="top" overlay={cloneTP}>
+      <Button bsStyle="warning" bsSize="small" onClick={onClickToClone}>
+        <i className="fa fa-pencil" />
+      </Button>
+    </OverlayTrigger>
+  );
+
+  return btn;
+};
+
+const suiTooltip = () => (
+  <Tooltip id="sui-tp">Supporting Information</Tooltip>
+);
+
+const suiLabel = () => (
+  <OverlayTrigger placement="right" overlay={suiTooltip()}>
+    <Label bsStyle="info">SI</Label>
+  </OverlayTrigger>
+);
+
+const suiStdRxnLabelTooltip = () => (
+  <Tooltip id="sui-tp">Supporting Information - Standard Reaction</Tooltip>
+);
+
+const suiStdRxnLabel = () => (
+  <OverlayTrigger placement="right" overlay={suiStdRxnLabelTooltip()}>
+    <Label bsStyle="info">SI STD-RXN</Label>
+  </OverlayTrigger>
+);
+
+const spcTooltip = () => (
+  <Tooltip id="spc-tp">SI Spectrum</Tooltip>
+);
+
+const spcLabel = () => (
+  <OverlayTrigger placement="right" overlay={spcTooltip()}>
+    <Label bsStyle="info">SI-SPC</Label>
+  </OverlayTrigger>
+);
+
+const rxlTooltip = () => (
+  <Tooltip id="spc-tp">SI Reaction List Xlsx</Tooltip>
+);
+
+const rxlXlsxLabel = () => (
+  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
+    <Label bsStyle="info">SI-XLSX</Label>
+  </OverlayTrigger>
+);
+
+const rxlCsvLabel = () => (
+  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
+    <Label bsStyle="info">SI-CSV</Label>
+  </OverlayTrigger>
+);
+
+const rxlHtmlLabel = () => (
+  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
+    <Label bsStyle="info">SI-HTML</Label>
+  </OverlayTrigger>
+);
+
+const templateLable = (archive) => {
+  switch (archive.template.value) {
+    case 'standard':
+      return null;
+    case 'spectrum':
+      return spcLabel();
+    case 'supporting_information':
+      return suiLabel();
+    case 'supporting_information_std_rxn':
+      return suiStdRxnLabel();
+    case 'rxn_list_xlsx':
+      return rxlXlsxLabel();
+    case 'rxn_list_csv':
+      return rxlCsvLabel();
+    case 'rxn_list_html':
+      return rxlHtmlLabel();
+    default:
+      return null;
+  }
+};
+
+const title = (archive) => {
+  const newLabel = archive.unread
+    ? <Label bsStyle="warning">new</Label>
+    : null;
+
+  return (
+    <div style={{ width: '100%', lineHeight: '30px' }}>
+      {archive.file_name} {newLabel} {templateLable(archive)}
+      <div className="button-right">
+        {cloneBtn(archive)}
+        <span>&nbsp;</span>
+        {reportStatusBtn(archive)}
+        <span>&nbsp;</span>
+        {deleteBtn(archive)}
+      </div>
+    </div>
+  );
+};
+
+const Archives = ({ archives }) => {
+  const content = archives.map((archive, index) => (
+    <Panel
+      eventKey={index}
+      key={index}
+    >
+      <Panel.Heading>{title(archive)}</Panel.Heading>
+      {fileDescription(archive)}
+    </Panel>
+  ));
+
+  return (
+    <PanelGroup accordion>
+      {content}
+    </PanelGroup>
+  );
+};
+
+export default Archives;
diff --git a/app/packs/src/components/report/Config.js b/app/packs/src/components/report/Config.js
new file mode 100644
index 000000000..0c8285fbe
--- /dev/null
+++ b/app/packs/src/components/report/Config.js
@@ -0,0 +1,221 @@
+import React from 'react';
+import Select from 'react-select';
+import {
+  FormGroup, OverlayTrigger, ControlLabel, FormControl, Tooltip,
+  Row, Col
+} from 'react-bootstrap';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import CheckBoxs from 'src/components/common/CheckBoxs';
+
+const imgFormatOpts = () => (
+  [
+    { label: 'PNG', value: 'png' },
+    { label: 'EPS', value: 'eps' },
+    { label: 'EMF', value: 'emf' },
+  ]
+);
+
+const EpsWarning = ({ imgFormat }) => (
+  imgFormat === 'eps'
+    ? <p className="text-danger" style={{ paddingTop: 12 }}>
+      WARNING: EPS format is not supported by Microsoft Office
+    </p>
+    : null
+);
+
+const onImgFormatChange = (e) => {
+  ReportActions.updateImgFormat(e.value);
+};
+
+const ImgFormat = ({ imgFormat }) => (
+  <Row style={{ paddingBottom: 100 }} >
+    <Col md={3} sm={8}>
+      <label>Images format</label>
+      <Select
+        options={imgFormatOpts()}
+        value={imgFormat}
+        clearable={false}
+        style={{ width: 100 }}
+        onChange={onImgFormatChange}
+      />
+    </Col>
+    <Col md={9} sm={16}>
+      <label />
+      <EpsWarning imgFormat={imgFormat} />
+    </Col>
+  </Row>
+);
+
+const FileDescription = ({ fileDescription }) => (
+  <FormGroup>
+    <ControlLabel>File description</ControlLabel>
+    <FormControl
+      componentClass="textarea"
+      onChange={ReportActions.updateFileDescription}
+      rows={2}
+      value={fileDescription}
+    />
+  </FormGroup>
+);
+
+const fileNameRule = () => (
+  <Tooltip id="file-name-rule" >
+    <p>Max 40 characters.</p>
+    <p>allowed: a to z, A to Z, 0 to 9, -, _</p>
+  </Tooltip>
+);
+
+const FileName = ({ fileName }) => (
+  <FormGroup>
+    <OverlayTrigger overlay={fileNameRule()}>
+      <ControlLabel>
+        File Name
+      </ControlLabel>
+    </OverlayTrigger>
+    <FormControl
+      type="text"
+      value={fileName}
+      onChange={ReportActions.updateFileName}
+    />
+  </FormGroup>
+);
+
+const onTemplateChange = (e) => {
+  ReportActions.updateTemplate(e);
+};
+
+function TemplateRender(template, options) {
+  const templateOpts = options.map(item => ({ id: item.id, label: item.name, value: item.report_type }));
+
+  return (
+    <Row>
+      <Col md={6} sm={12}>
+        <label>Template Selection</label>
+        <Select
+          options={templateOpts}
+          value={template}
+          clearable={false}
+          onChange={onTemplateChange}
+        />
+      </Col>
+      <Col md={6} sm={12} />
+    </Row>
+  );
+}
+
+const toggleConfigs = (text, checked) => {
+  ReportActions.updateConfigs({ text, checked });
+};
+
+const toggleConfigsAll = () => {
+  ReportActions.toggleConfigsCheckAll();
+};
+
+const suiConfig = ({ template, configs, fileName, checkedAllConfigs,
+  fileDescription, options }) => {
+
+  const filteredConfigs = configs.filter(c => c.text === 'Show all chemicals in schemes (unchecked to show products only)');
+  return (
+    <div>
+      <br />
+      {TemplateRender(template, options)}
+      <br />
+      <FileName fileName={fileName} />
+      <FileDescription fileDescription={fileDescription} />
+      <CheckBoxs
+        items={filteredConfigs}
+        toggleCheckbox={toggleConfigs}
+        toggleCheckAll={toggleConfigsAll}
+        checkedAll={checkedAllConfigs}
+      />
+    </div>
+  );
+};
+
+const suiStdRxnConfig = ({
+  template, configs, fileName, checkedAllConfigs, fileDescription, options
+}) => {
+  const filteredConfigs = configs.filter(c => c.text === 'Show all chemicals in schemes (unchecked to show products only)');
+  return (
+    <div>
+      <br />
+      {TemplateRender(template, options)}
+      <br />
+      <FileName fileName={fileName} />
+      <FileDescription fileDescription={fileDescription} />
+      <CheckBoxs
+        items={filteredConfigs}
+        toggleCheckbox={toggleConfigs}
+        toggleCheckAll={toggleConfigsAll}
+        checkedAll={checkedAllConfigs}
+      />
+    </div>
+  );
+};
+
+const stdConfig = ({
+  template,
+  configs,
+  fileName,
+  checkedAllConfigs,
+  imgFormat,
+  fileDescription,
+  options
+}) => (
+  <div>
+    <br />
+    {TemplateRender(template, options)}
+    <br />
+    <FileName fileName={fileName} />
+    <FileDescription fileDescription={fileDescription} />
+    <CheckBoxs
+      items={configs}
+      toggleCheckbox={toggleConfigs}
+      toggleCheckAll={toggleConfigsAll}
+      checkedAll={checkedAllConfigs}
+    />
+    <ImgFormat imgFormat={imgFormat} />
+  </div>
+);
+
+const spcConfig = ({
+  template,
+  fileName,
+  fileDescription,
+  options
+}) => (
+  <div>
+    <br />
+    {TemplateRender(template, options)}
+    <br />
+    <FileName fileName={fileName} />
+    <FileDescription fileDescription={fileDescription} />
+  </div>
+);
+
+const rxlConfig = props => spcConfig(props);
+
+const doiConfig = props => spcConfig(props);
+
+const Config = (props) => {
+  switch (props.template.value) {
+    case 'standard':
+      return stdConfig(props);
+    case 'spectrum':
+      return spcConfig(props);
+    case 'supporting_information':
+      return suiConfig(props);
+    case 'supporting_information_std_rxn':
+      return suiStdRxnConfig(props);
+    case 'rxn_list_xlsx':
+    case 'rxn_list_csv':
+    case 'rxn_list_html':
+      return rxlConfig(props);
+    case 'doi_list_xlsx':
+      return doiConfig(props);
+    default:
+      return stdConfig(props);
+  }
+};
+
+export default Config;
diff --git a/app/packs/src/components/report/Orders.js b/app/packs/src/components/report/Orders.js
new file mode 100644
index 000000000..03fc0cf6e
--- /dev/null
+++ b/app/packs/src/components/report/Orders.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import ObjRow from 'src/apps/mydb/elements/details/reports/OrdersDnD';
+
+const allContent = ({ selectedObjs, template }) => (
+  selectedObjs.map(obj => (
+    <ObjRow
+      id={obj.id}
+      key={`${obj.type}${obj.id}`}
+      element={obj}
+      template={template}
+    />
+  ))
+);
+
+const suiContent = ({ selectedObjs, template }) => (
+  selectedObjs.map((obj) => {
+    if (obj.type === 'reaction') {
+      return (
+        <ObjRow
+          id={obj.id}
+          key={`${obj.type}${obj.id}`}
+          element={obj}
+          template={template}
+        />
+      );
+    }
+    return null;
+  }).filter(r => r != null)
+);
+
+const spcContent = props => suiContent(props);
+
+const rxlContent = props => suiContent(props);
+
+const doiContent = props => suiContent(props);
+
+const ordersContent = (props) => {
+  switch (props.template.value) {
+    case 'standard':
+      return allContent(props);
+    case 'spectrum':
+      return spcContent(props);
+    case 'supporting_information':
+    case 'supporting_information_std_rxn':
+      return suiContent(props);
+    case 'rxn_list_xlsx':
+    case 'rxn_list_csv':
+    case 'rxn_list_html':
+      return rxlContent(props);
+    case 'doi_list_xlsx':
+      return doiContent(props);
+    default:
+      return allContent(props);
+  }
+};
+
+const Orders = props => (
+  <div className="report-orders">
+    {ordersContent(props)}
+  </div>
+);
+
+export default Orders;
diff --git a/app/packs/src/components/report/OrdersDnD.js b/app/packs/src/components/report/OrdersDnD.js
new file mode 100644
index 000000000..2d45f6f7d
--- /dev/null
+++ b/app/packs/src/components/report/OrdersDnD.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { DragSource, DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+import { Panel, Button } from 'react-bootstrap';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import UIActions from 'src/stores/alt/actions/UIActions';
+
+const orderSource = {
+  beginDrag(props) {
+    return { id: props.id, type: props.element.type };
+  },
+};
+
+const orderTarget = {
+  drop(targetProps, monitor) {
+    const targetTag = { id: targetProps.id, type: targetProps.element.type };
+    const sourceProps = monitor.getItem();
+    const sourceTag = { id: sourceProps.id, type: sourceProps.type };
+    if (targetTag.type !== sourceTag.type || targetTag.id !== sourceTag.id) {
+      ReportActions.move({ sourceTag, targetTag });
+    }
+  },
+};
+
+const orderDragCollect = (connect, monitor) => (
+  {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging(),
+  }
+);
+
+const orderDropCollect = (connect, monitor) => (
+  {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+    canDrop: monitor.canDrop(),
+  }
+);
+
+const headerTitle = (el, icon) => {
+  const clickToRm = () => {
+    ReportActions.remove({ type: el.type, id: el.id });
+    UIActions.uncheckWholeSelection.defer();
+  };
+
+  return (
+    <span>
+      {el.title()} {icon}
+      <Button
+        bsStyle="danger"
+        bsSize="xsmall"
+        className="button-right"
+        onClick={clickToRm}
+      >
+        <i className="fa fa-times" />
+      </Button>
+    </span>
+  );
+};
+
+const ObjRow = ({ element, template, connectDragSource, connectDropTarget,
+  isDragging, isOver, canDrop }) => {
+  const style = {};
+  if (canDrop) {
+    style.borderStyle = 'dashed';
+    style.borderWidth = 2;
+  }
+  if (isOver) {
+    style.borderColor = '#337ab7';
+  }
+  if (isDragging) {
+    style.opacity = 0.2;
+  }
+
+  let bsStyle = 'default';
+  let icon = null;
+  const isStdTemplate = template === 'standard';
+  const { type, role } = element;
+  if (type === 'sample') {
+    bsStyle = 'success';
+  } else if (!isStdTemplate && type === 'reaction' && role === 'gp') {
+    bsStyle = 'primary';
+    icon = <i className="fa fa-home c-bs-info" />;
+  } else if (!isStdTemplate && type === 'reaction' && role === 'single') {
+    bsStyle = 'default';
+    icon = <i className="fa fa-asterisk c-bs-danger" />;
+  } else if (!isStdTemplate && type === 'reaction' && role === 'parts') {
+    bsStyle = 'info';
+    icon = <i className="fa fa-bookmark c-bs-success" />;
+  } else if (type === 'reaction') {
+    bsStyle = 'info';
+  }
+
+  return compose(connectDragSource, connectDropTarget)(
+    <div>
+      <Panel
+        style={style}
+        bsStyle={bsStyle}
+      >
+        <Panel.Heading>{headerTitle(element, icon)}</Panel.Heading>
+        <div className="row">
+          <div className="svg">
+            <SVG src={element.svgPath} key={element.svgPath} />
+          </div>
+          <div className="dnd-btn">
+            <span
+              style={{ fontSize: '18pt', cursor: 'move' }}
+              className="text-info fa fa-arrows"
+            />
+          </div>
+        </div>
+      </Panel>
+    </div>,
+  );
+};
+
+export default compose(
+  DragSource(DragDropItemTypes.GENERAL, orderSource, orderDragCollect),
+  DropTarget(DragDropItemTypes.GENERAL, orderTarget, orderDropCollect),
+)(ObjRow);
diff --git a/app/packs/src/components/report/Paramize.js b/app/packs/src/components/report/Paramize.js
new file mode 100644
index 000000000..3cd7ca7ae
--- /dev/null
+++ b/app/packs/src/components/report/Paramize.js
@@ -0,0 +1,51 @@
+const objTags = selectedObjs => (
+  selectedObjs.map(obj => ({ id: obj.id, type: obj.type }))
+);
+
+const abstractSettings = settings => (
+  settings.map(obj => (
+    { text: obj.text.replace(' ', '_'), checked: obj.checked }
+  ))
+);
+
+const abstractConfigs = configs => (
+  configs.map((obj) => {
+    switch (obj.text) {
+      case 'Page Break':
+        return { text: 'page_break', checked: obj.checked };
+      case 'Show all chemicals in schemes (unchecked to show products only)':
+        if (obj.checked) {
+          return { text: 'whole_diagram', checked: obj.checked };
+        }
+        return { text: 'product_diagram', checked: !obj.checked };
+      default:
+        return obj;
+    }
+  })
+);
+
+const paramize = (state) => {
+  const {
+    selectedObjs, splSettings, rxnSettings, configs, selMolSerials,
+    fileName, fileDescription, imgFormat, template, siRxnSettings,
+    prdAtts
+  } = state;
+
+  const params = {
+    objTags: objTags(selectedObjs),
+    splSettings: abstractSettings(splSettings),
+    rxnSettings: abstractSettings(rxnSettings),
+    siRxnSettings: siRxnSettings,
+    configs: abstractConfigs(configs),
+    prdAtts: prdAtts,
+    imgFormat: imgFormat?.value || imgFormat || 'png',
+    fileName,
+    fileDescription,
+    templateId: template.id || template,
+    templateType: template?.value,
+    molSerials: selMolSerials,
+  };
+  return params;
+};
+
+export default paramize;
diff --git a/app/packs/src/components/report/Previews.js b/app/packs/src/components/report/Previews.js
new file mode 100644
index 000000000..f919cb924
--- /dev/null
+++ b/app/packs/src/components/report/Previews.js
@@ -0,0 +1,159 @@
+import React from 'react';
+import { SectionReaction } from 'src/apps/mydb/elements/details/reports/SectionReaction';
+import SectionSample from 'src/apps/mydb/elements/details/reports/SectionSample';
+import SectionSiProcedures from 'src/apps/mydb/elements/details/reports/SectionSiProcedures';
+import SectionSiSynthesis from 'src/apps/mydb/elements/details/reports/SectionSiSynthesis';
+import SectionSpectrum from 'src/apps/mydb/elements/details/reports/SectionSpectrum';
+import SectionReactionList from 'src/apps/mydb/elements/details/reports/SectionReactionList';
+import SectionSiSynthesisStdRxn from 'src/apps/mydb/elements/details/reports/SectionSiSynthesisStdRxn';
+import SectionDoiList from 'src/components/report/SectionDoiList';
+
+const objToKeyValPairs = (obj = []) => (
+  obj.reduce((ob, { text, checked }) => {
+    const o = ob;
+    const oTitle = text.replace(/\s+/g, '').substring(0, 12);
+    o[oTitle] = checked;
+    return o;
+  }, {})
+);
+
+const stdPreviews = ({
+  previewObjs,
+  splSettings,
+  rxnSettings,
+  configs
+}) => {
+  const splSettingsPairs = objToKeyValPairs(splSettings);
+  const rxnSettingsPairs = objToKeyValPairs(rxnSettings);
+  const configsPairs = objToKeyValPairs(configs);
+
+  const objs = previewObjs.map((obj, i) => (
+    obj.type === 'sample'
+      ? <SectionSample
+        key={i}
+        sample={obj}
+        settings={splSettingsPairs}
+        configs={configsPairs}
+      />
+      : <SectionReaction
+        key={i}
+        reaction={obj}
+        settings={rxnSettingsPairs}
+        configs={configsPairs}
+      />
+  ));
+
+  return (
+    <div> {objs} </div>
+  );
+};
+
+const suiPreviews = ({ previewObjs, configs, molSerials, siRxnSettings }) => {
+  const configsPairs = objToKeyValPairs(configs);
+  const setPairs = objToKeyValPairs(siRxnSettings);
+
+  return (
+    <div>
+      <p>Experimental Part:</p>
+      <br />
+      <h4>1 Versions</h4>
+      <p>Version InChI (1.04), Version SMILES (Daylight)</p>
+      <br />
+      <h4>2 General remarks</h4>
+      <br />
+      <h4>3 General procedures</h4>
+      <SectionSiProcedures previewObjs={previewObjs} />
+      <br />
+      <h4>4 Synthesis</h4>
+      <SectionSiSynthesis
+        previewObjs={previewObjs}
+        configs={configsPairs}
+        molSerials={molSerials}
+        settings={setPairs}
+      />
+      <br />
+    </div>
+  );
+};
+
+const suiStdRxnPreviews = ({ previewObjs, configs, molSerials, siRxnSettings }) => {
+  const configsPairs = objToKeyValPairs(configs);
+  const setPairs = objToKeyValPairs(siRxnSettings);
+
+  return (
+    <div>
+      <p>Experimental Part:</p>
+      <br />
+      <h4>1 Versions</h4>
+      <p>Version InChI (1.04), Version SMILES (Daylight)</p>
+      <br />
+      <h4>2 General remarks</h4>
+      <br />
+      <h4>3 General procedures</h4>
+      <SectionSiProcedures previewObjs={previewObjs} />
+      <br />
+      <h4>4 Synthesis</h4>
+      <SectionSiSynthesisStdRxn
+        previewObjs={previewObjs}
+        configs={configsPairs}
+        molSerials={molSerials}
+        settings={setPairs}
+      />
+      <br />
+    </div>
+  );
+};
+
+const spcPreviews = ({ prdAtts, molSerials, attThumbNails }) => (
+  <div>
+    <SectionSpectrum
+      prdAtts={prdAtts}
+      molSerials={molSerials}
+      attThumbNails={attThumbNails}
+    />
+    <br />
+  </div>
+);
+
+const rxlPreviews = ({ previewObjs, molSerials }) => (
+  <SectionReactionList
+    objs={previewObjs}
+    molSerials={molSerials}
+  />
+);
+
+const doiPreviews = ({ selectedObjs, molSerials }) => (
+  <SectionDoiList
+    objs={selectedObjs}
+    molSerials={molSerials}
+  />
+);
+
+const previewsContent = (props) => {
+  switch (props.template.value) {
+    case 'standard':
+      return stdPreviews(props);
+    case 'spectrum':
+      return spcPreviews(props);
+    case 'supporting_information':
+      return suiPreviews(props);
+    case 'supporting_information_std_rxn':
+      return suiStdRxnPreviews(props);
+    case 'rxn_list_xlsx':
+    case 'rxn_list_csv':
+    case 'rxn_list_html':
+      return rxlPreviews(props);
+    case 'doi_list_xlsx':
+    return doiPreviews(props);
+    default:
+      return stdPreviews(props);
+  }
+};
+
+const Previews = props => (
+  <div className="report-preview">
+    {previewsContent(props)}
+  </div>
+);
+
+export default Previews;
diff --git a/app/packs/src/components/report/ReportComponent.js b/app/packs/src/components/report/ReportComponent.js
new file mode 100644
index 000000000..475d66d61
--- /dev/null
+++ b/app/packs/src/components/report/ReportComponent.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import paramize from 'src/apps/mydb/elements/details/reports/Paramize';
+
+const clickToClose = (report) => {
+  DetailActions.close(report);
+};
+
+const CloseBtn = ({ report }) => {
+  const onClickToClose = () => clickToClose(report);
+
+  return (
+    <Button
+      bsStyle="danger"
+      bsSize="xsmall"
+      className="button-right"
+      onClick={onClickToClose}
+    >
+      <i className="fa fa-times" />
+    </Button>
+  );
+};
+
+const clickToReset = () => {
+  ReportActions.reset();
+  UIActions.uncheckWholeSelection.defer();
+};
+
+const ResetBtn = () => (
+  <Button
+    bsStyle="info"
+    bsSize="xsmall"
+    className="button-right"
+    onClick={clickToReset}
+  >
+    <span><i className="fa fa-eraser" /> Reset</span>
+  </Button>
+);
+
+const generateReport = (allState, updateQueue) => {
+  const report = paramize(allState);
+  ReportActions.generateReport(report);
+};
+
+const GenerateReportBtn = ({ allState, updateQueue }) => {
+  const { selectedObjTags, defaultObjTags, splSettings, rxnSettings,
+    processingReport } = allState;
+
+  const hasObj = [...selectedObjTags.sampleIds,
+  ...selectedObjTags.reactionIds, ...defaultObjTags.sampleIds,
+  ...defaultObjTags.reactionIds].length !== 0;
+
+  const showGeneReportBtn = [...splSettings, ...rxnSettings].map((settting) => {
+    if (settting.checked) {
+      return true;
+    }
+    return null;
+  }).filter(r => r != null).length !== 0;
+
+  const onClick = () => generateReport(allState, updateQueue);
+
+  return (
+    !processingReport
+      ? <Button
+        bsStyle="primary"
+        bsSize="xsmall"
+        className="button-right"
+        disabled={!(showGeneReportBtn && hasObj)}
+        onClick={onClick}
+      >
+        <span><i className="fa fa-file-text-o" /> Generate</span>
+      </Button>
+      : <Button
+        bsStyle="danger"
+        bsSize="xsmall"
+        className="button-right"
+      >
+        <span><i className="fa fa-spinner fa-pulse fa-fw" /> Processing</span>
+      </Button>
+  );
+};
+
+export { CloseBtn, ResetBtn, GenerateReportBtn };
diff --git a/app/packs/src/components/report/ReportContainer.js b/app/packs/src/components/report/ReportContainer.js
new file mode 100644
index 000000000..234cb3561
--- /dev/null
+++ b/app/packs/src/components/report/ReportContainer.js
@@ -0,0 +1,208 @@
+import React, { Component } from 'react';
+import { Alert, Panel, Tabs, Tab } from 'react-bootstrap';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import ReportStore from 'src/stores/alt/stores/ReportStore';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import Setting from 'src/apps/mydb/elements/details/reports/Setting';
+import Previews from 'src/apps/mydb/elements/details/reports/Previews';
+import Orders from 'src/apps/mydb/elements/details/reports/Orders';
+import Serials from 'src/apps/mydb/elements/details/reports/Serials';
+import Archives from 'src/apps/mydb/elements/details/reports/Archives';
+import Config from 'src/apps/mydb/elements/details/reports/Config';
+import PanelHeader from 'src/components/common/PanelHeader';
+import { CloseBtn, ResetBtn, GenerateReportBtn } from 'src/apps/mydb/elements/details/reports/ReportComponent';
+
+const fetchPreviewTabs = [3, 4];
+
+export default class ReportContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...ReportStore.getState(),
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onChangeUI = this.onChangeUI.bind(this);
+    this.panelHeader = this.panelHeader.bind(this);
+    this.updateQueue = this.updateQueue.bind(this);
+  }
+
+  componentDidMount() {
+    ReportStore.listen(this.onChange);
+    UIStore.listen(this.onChangeUI);
+    const uiState = UIStore.getState();
+    this.onChangeUI(uiState);
+    ReportActions.getArchives.defer();
+    ReportActions.fetchTemplates.defer();
+  }
+
+  componentWillUnmount() {
+    ReportStore.unlisten(this.onChange);
+    UIStore.unlisten(this.onChangeUI);
+  }
+
+  onChange(state) {
+    this.setState({ ...state });
+  }
+
+  onChangeUI(uiState) {
+    // jump to config when in the preview
+    const { activeKey } = this.state;
+    if (fetchPreviewTabs.indexOf(activeKey) >= 0) {
+      ReportActions.updateActiveKey.defer(2);
+    }
+    // load list data only
+    const state = { uiState, reportState: this.state };
+    ReportActions.updateCheckedTags.defer(state);
+  }
+
+  panelHeader() {
+    const { report } = this.props;
+    const allState = this.state;
+    const btns = [
+      <CloseBtn key="closeBtn" report={report} />,
+      <GenerateReportBtn
+        key="generateReportBtn"
+        allState={allState}
+        updateQueue={this.updateQueue}
+      />,
+      <ResetBtn key="resetBtn" />,
+    ];
+    return <PanelHeader title="Report Generation" btns={btns} />;
+  }
+
+  selectTab(key) {
+    ReportActions.updateActiveKey(key);
+    if (fetchPreviewTabs.indexOf(key) >= 0) { // preview
+      LoadingActions.start.defer();
+      const reportState = ReportStore.getState();
+      ReportActions.loadRreview.defer({ reportState });
+    }
+  }
+
+  archivesTitle() {
+    const unreadIds = this.unreadIds();
+    const unReadBadge = unreadIds.length > 0
+      ? <span className="badge-danger">{unreadIds.length}</span>
+      : null;
+
+    return (
+      <span>Archive {unReadBadge}</span>
+    );
+  }
+
+  unreadIds() {
+    let ids = [];
+    this.state.archives.forEach((a) => {
+      if (a.unread) {
+        ids = [...ids, a.id];
+      }
+    });
+    return ids;
+  }
+
+  updateQueue() {
+    const { processings } = this.state;
+    if (processings.length > 0) {
+      ReportActions.updateProcessQueue.defer(processings);
+    }
+  }
+
+  render() {
+    const {
+      splSettings, checkedAllSplSettings, archives, activeKey,
+      rxnSettings, checkedAllRxnSettings, imgFormat, fileName,
+      configs, checkedAllConfigs, selectedObjs, selMolSerials,
+      siRxnSettings, checkedAllSiRxnSettings, fileDescription,
+      prdAtts, attThumbNails, previewObjs, templateOpts
+    } = this.state;
+
+    let { template } = this.state;
+    let alertTemplateNotFound = false;
+
+    if (templateOpts.length > 0 && template && typeof template != 'object') {
+      let templateOpt = templateOpts.find(x => x.id == template || x.report_type == template);
+      if (!templateOpt) {
+        alertTemplateNotFound = true;
+        templateOpt = templateOpts.find(x => x.report_type === 'standard')
+      }
+      template = { id: templateOpt.id, label: templateOpt.name, value: templateOpt.report_type };
+    }
+
+    const archivesTitle = this.archivesTitle();
+    const tabStyle = {padding: "15px", border: "1px solid #ddd", borderRadius: "4px"}
+    return (
+      <Panel
+        bsStyle="default"
+      >
+        {alertTemplateNotFound && (
+          <Alert variant="warning">
+            Report Template not found. Set to Standard. Please check your config settings.
+          </Alert>
+        )}
+        <Panel.Heading>{this.panelHeader()}</Panel.Heading>
+        <Tabs
+          activeKey={activeKey}
+          onSelect={this.selectTab}
+          id="report-tabs"
+          style={{padding:"15px"}}
+        >
+          <Tab eventKey={0} title="Config" style={tabStyle}>
+            <Config
+              imgFormat={imgFormat}
+              fileName={fileName}
+              fileDescription={fileDescription}
+              configs={configs}
+              checkedAllConfigs={checkedAllConfigs}
+              template={template}
+              handleTemplateChanged={this.handleTemplateChanged}
+              options={templateOpts}
+            />
+          </Tab>
+          <Tab eventKey={1} title="Setting" style={tabStyle}>
+            <Setting
+              template={template}
+              splSettings={splSettings}
+              checkedAllSplSettings={checkedAllSplSettings}
+              rxnSettings={rxnSettings}
+              checkedAllRxnSettings={checkedAllRxnSettings}
+              siRxnSettings={siRxnSettings}
+              checkedAllSiRxnSettings={checkedAllSiRxnSettings}
+            />
+          </Tab>
+
+          <Tab eventKey={2} title="Order" style={tabStyle}>
+            <div className="panel-fit-screen">
+              <Orders selectedObjs={selectedObjs} template={template} />
+            </div>
+          </Tab>
+          <Tab eventKey={3} title="Label" style={tabStyle}>
+            <div className="panel-fit-screen">
+              <Serials selMolSerials={selMolSerials} template={template} />
+            </div>
+          </Tab>
+          <Tab eventKey={4} title="Preview" style={tabStyle}>
+            <div className="panel-fit-screen">
+              <Previews
+                previewObjs={previewObjs}
+                splSettings={splSettings}
+                rxnSettings={rxnSettings}
+                siRxnSettings={siRxnSettings}
+                configs={configs}
+                template={template}
+                molSerials={selMolSerials}
+                prdAtts={prdAtts}
+                attThumbNails={attThumbNails}
+              />
+            </div>
+          </Tab>
+          <Tab eventKey={5} title={archivesTitle} style={tabStyle}>
+            <div className="panel-fit-screen">
+              <Archives archives={archives} />
+            </div>
+          </Tab>
+        </Tabs>
+      </Panel>
+    );
+  }
+}
diff --git a/app/packs/src/components/report/SectionReaction.js b/app/packs/src/components/report/SectionReaction.js
new file mode 100644
index 000000000..df27d8a36
--- /dev/null
+++ b/app/packs/src/components/report/SectionReaction.js
@@ -0,0 +1,366 @@
+import React, {Component} from 'react'
+import SVG from 'react-inlinesvg';
+import {Alert, Label, Table, Tooltip, OverlayTrigger} from 'react-bootstrap';
+import QuillViewer from 'src/components/QuillViewer';
+import { map } from 'lodash';
+
+const SectionReaction = ({reaction, settings, configs}) => {
+  const {description, literatures, starting_materials, reactants,
+         products, solvents, solvent, dangerous_products, purification,
+         observation, svgPath, tlc_description,
+         tlc_solvents, rf_value, status } = reaction;
+  const dangerousProducts = dangerous_products;
+
+  const has_analyses = !!(products.find((sample) => sample.analysesPresent()));
+
+  const showPuri = settings.purification
+    && purification
+    && purification.length !== 0;
+
+  const showDang = settings.dangerouspro
+    && dangerousProducts
+    && dangerousProducts.length !== 0;
+
+  return (
+    <div>
+      <Alert style={{ textAlign: 'center',
+                      backgroundColor: '#428bca',
+                      color:'white',
+                      border:'none'}}> {reaction.short_label}
+        <StatusContent status={status}/>
+      </Alert>
+
+      <SVGContent show={settings.diagram}
+                  svgPath={svgPath}
+                  isProductOnly={!configs.Showallchemi}
+                  products={products} />
+      <MaterialContent  show={settings.material}
+                        starting_materials={starting_materials}
+                        reactants={reactants}
+                        products={products} />
+      <SolventContent show={settings.material}
+                      solvents={solvents}
+                      solvent={solvent} />
+      <h4> Description </h4>
+      <DescriptionContent show={settings.description && description}
+                          description={description} />
+      <PurificationContent
+        show={showPuri}
+        puri={purification}
+      />
+      <br />
+      <DangerourProductsContent
+        show={showDang}
+        dang={dangerousProducts}
+      />
+      <br />
+      <TLCContent
+        show={settings.tlc && tlc_description}
+        tlcDescription={tlc_description}
+        tlcSolvents={tlc_solvents}
+        rfValue={rf_value}
+      />
+      <ObservationContent show={settings.observation && observation}
+                          observation={observation} />
+      <AnalysesContent show={settings.analysis && has_analyses}
+                       products={products} />
+      <LiteratureContent show={settings.literature && literatures && literatures.length != 0}
+                         literatures={literatures} />
+    </div>
+  )
+}
+
+const SVGContent = ({show, svgPath, products, isProductOnly}) => {
+  const productsSvg = products.map(s => {
+    const svg = s.svgPath;
+    return (<td key={s.id}><SVG src={svg}/></td>);
+  });
+
+  if(!show) {
+    return null;
+  }
+
+  return (
+    isProductOnly
+      ? <Table className='reaction-details'>
+          <tbody>
+            <tr>
+              { productsSvg }
+            </tr>
+          </tbody>
+        </Table>
+      : <SVG key={svgPath} src={svgPath} className='reaction-details'/>
+  )
+}
+
+const StatusContent = ({ status }) => {
+  let tooltip = null;
+  switch(status) {
+    case "Successful":
+      tooltip = (<Tooltip id="reaction_success">Successful Reaction</Tooltip>);
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <a style={{ marginLeft: '10px', padding: '3px', color: 'white' }} >
+            <i className="fa fa-check-circle" />
+          </a>
+        </OverlayTrigger>
+      );
+    case "Planned":
+      tooltip = (<Tooltip id="reaction_planned">Planned Reaction</Tooltip>);
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'orange' }} >
+            <i className="fa fa-clock-o" />
+          </a>
+        </OverlayTrigger>
+      );
+    case "Not Successful":
+      tooltip = (<Tooltip id="reaction_fail">Not Successful Reaction</Tooltip>);
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'red' }} >
+            <i className="fa fa-times-circle-o" />
+          </a>
+        </OverlayTrigger>
+      );
+    case "General Procedure":
+      tooltip = (<Tooltip id="general_procedure">General Procedure</Tooltip>);
+      return (
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'blue' }} >
+            <i className="fa fa-home" />
+          </a>
+        </OverlayTrigger>
+      );
+    default:
+      return null;
+  }
+};
+
+const MaterialContent = ({show, starting_materials, reactants, products}) => {
+  const materialCalc = (target, multi, precision) => {
+    return (target ? (target*multi).toFixed(precision) : " - ")
+  }
+
+  const equiv_or_yield = (s, isProduct) => {
+    return (
+      isProduct
+        ? materialCalc(s.equivalent*100, 1, 0).toString() + "%"
+        : materialCalc(s.equivalent, 1, 3)
+    )
+  }
+
+  const rows = (material, isProduct) => {
+    return (
+      typeof material != 'undefined'
+        ? material.map((sample, i) => {
+          return (
+            <tbody key={i}>
+              <tr>
+                <td colSpan="5">
+                  <i className="fa fa-arrow-circle-right" aria-hidden="true" />&nbsp;
+                  {sample.molecule_iupac_name}&nbsp;
+                  ({sample.name || sample.external_label || sample.short_label || ''})
+                </td>
+              </tr>
+              <tr>
+                <td style={{width: '20%'}}>{sample.molecule_formula}</td>
+                <td style={{width: '20%'}}>{materialCalc(sample.amount_g, 1, 3)}</td>
+                <td style={{width: '20%'}}>{materialCalc(sample.amount_l, 1000, 3)}</td>
+                <td style={{width: '20%'}}>{materialCalc(sample.amount_mol, 1000, 3)}</td>
+                <td style={{width: '20%'}}>{equiv_or_yield(sample, isProduct)}</td>
+              </tr>
+            </tbody>
+          )})
+        : null
+    );
+  };
+  const table = dataRows => (
+    <Table striped condensed hover>
+      <thead>
+        <tr>
+          <th>Formula</th>
+          <th>Mass(g)</th>
+          <th>Vol(ml)</th>
+          <th>Amount(mmol)</th>
+          <th>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    show ?
+      <div>
+        <h4><Label bsStyle="success"> Starting Materials </Label></h4>
+        <div> {table(rows(starting_materials, false))} </div>
+        <h4><Label bsStyle="warning"> Reactants </Label></h4>
+        <div> {table(rows(reactants, false))} </div>
+        <h4><Label bsStyle="danger"> Products </Label></h4>
+        <div> {table(rows(products, true))} </div>
+      </div>
+      : null
+  );
+};
+
+const SolventContent = ({ show, solvents, solvent }) => {
+  const volume = (s) => {
+    if (s.amount_l) {
+      return `(${s.amount_l * 1000}ml)`;
+    }
+    return '(0.0ml)';
+  };
+
+  const separator = (idx, last) => (
+    idx === last ? '' : ', '
+  );
+
+  const solventsData = () => {
+    const last = solvents.length - 1;
+    return solvents.map((s, i) => (
+      <pre key={i} className="noBorder display-inline no-padding">
+        {s.preferred_label + volume(s) + separator(i, last)}
+      </pre>
+    ));
+  };
+
+  const solventData = () => (
+    <pre className="noBorder display-inline no-padding">{solvent}</pre>
+  );
+
+  const displayContent = () => (
+    solvents.length !== 0 ? solventsData() : solventData()
+  );
+
+  return (
+    show
+      ? <div>
+        <h4 className="display-inline"> Solvent(s): </h4>
+        {displayContent()}
+        </div>
+      : null
+  );
+};
+
+const DescriptionContent = ({show, description}) => {
+  return show ? <QuillViewer value={description} /> : null;
+}
+
+const PurificationContent = ({ show, puri }) => {
+  const puriText = typeof puri === 'object' ? puri.join(', ') : puri;
+  return (
+    show
+      ? <div>
+          <h4 className="display-inline"> Type of Purification: </h4>
+          <pre className="noBorder display-inline no-padding">
+            {puriText}
+          </pre>
+        </div>
+      : null
+  );
+};
+
+const DangerourProductsContent = ({ show, dang }) => {
+  const dangText = typeof dang === 'object' ? dang.join(', ') : dang;
+  return (
+    show
+      ? <div>
+          <h4 className="display-inline"> Dangerous Products: </h4>
+          <pre className="noBorder display-inline no-padding">{dangText}</pre>
+        </div>
+      : null
+  );
+};
+
+const TLCContent = ({show, tlcDescription, tlcSolvents, rfValue}) => (
+  show
+    ? <div>
+        <div>
+        <h4 className="display-inline"> TLC - Control </h4>
+          <pre className="noBorder display-inline no-padding">
+            Rf-value: {rfValue} (Solvent: {tlcSolvents})
+          </pre>
+        </div>
+        <div className="g-marginLeft--10">
+          {tlcDescription}
+        </div>
+      </div>
+    : null
+);
+
+const ObservationContent = ({show, observation}) => {
+  return (
+    show
+      ? <div>
+          <h4>Additional information for publication and purification details</h4>
+          <QuillViewer value={observation} />
+        </div>
+      : null
+  )
+}
+
+const AnalysesContent = ({ show, products }) => {
+  const analyses = products.map((product, i) => (
+    product.analyses.map((analysis, j) => {
+      const content = analysis && analysis.extended_metadata
+        ? analysis.extended_metadata.content
+        : {};
+      const kind = analysis.kind ? `(${analysis.kind})` : '';
+      return (
+        analysis
+          ? <div key={i * 100 + j}>
+              <div className="noBorder g-marginLeft--20">
+                <p><u>{product.molecule.sum_formular}</u> ({kind})</p>
+                <div className="noBorder g-marginLeft--20">
+                  <QuillViewer value={content} />
+                  <p className="g-marginLeft--20">{analysis.description}</p>
+                </div>
+              </div>
+              <br/>
+            </div>
+          : null
+      );
+    })
+  ));
+  return (
+    show
+      ? <div>
+          <h4> Analysis </h4>
+          <div className="noBorder">{analyses}</div>
+        </div>
+      : null
+  );
+};
+
+const LiteratureContent = ({show, literatures}) => {
+  const rows = map(literatures,(literature, i) => {
+    return (
+      <tr key={i}>
+        <td>{literature.title}</td>
+        <td>{literature.url}</td>
+      </tr>
+    )
+  })
+  const table = <Table striped condensed hover>
+                  <thead>
+                    <tr>
+                      <th>Title</th>
+                      <th>URL</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows}
+                  </tbody>
+                </Table>
+  return (
+    show
+      ? <div>
+          <h4> Literatures </h4>
+          <div> {table} </div>
+        </div>
+      : null
+  )
+}
+
+export { SectionReaction, SVGContent, DescriptionContent };
diff --git a/app/packs/src/components/report/SectionReactionList.js b/app/packs/src/components/report/SectionReactionList.js
new file mode 100644
index 000000000..71463fa0c
--- /dev/null
+++ b/app/packs/src/components/report/SectionReactionList.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { UserSerial } from 'src/utilities/ReportHelper';
+
+const rlRowTp = (content, rowId) => (
+  <Tooltip id={rowId}>
+    <p>{content}</p>
+  </Tooltip>
+);
+
+const rlRowCont = (content, rowId) => {
+  const overlay = rlRowTp(content, rowId);
+  return (
+    <OverlayTrigger placement="top" overlay={overlay}>
+      <p>{content ? content.substring(0, 15) : ''}</p>
+    </OverlayTrigger>
+  );
+};
+
+const tableHeader = () => (
+  <thead>
+    <tr>
+      <th>Label</th>
+      <th>Image*</th>
+      <th>Name</th>
+      <th>InChI</th>
+      <th>InChIKey</th>
+      <th>Long-RInChIKey</th>
+      <th>Web-RInChIKey</th>
+      <th>Short-RInChIKey</th>
+    </tr>
+  </thead>
+);
+
+const rowContent = (p, long, short, web, molSerials, idx) => (
+  <tr>
+    <td className="one-line" >{UserSerial(p.molecule, molSerials)}</td>
+    <td className="one-line" >{}</td>
+    <td className="one-line" >{rlRowCont(p.showedName())}</td>
+    <td className="one-line" >{rlRowCont(p.molecule.inchikey)}</td>
+    <td className="one-line" >{rlRowCont(p.molecule.inchistring)}</td>
+    <td className="one-line" >{rlRowCont(long, idx)}</td>
+    <td className="one-line" >{rlRowCont(short, idx)}</td>
+    <td className="one-line" >{rlRowCont(web, idx)}</td>
+  </tr>
+);
+
+const tableBody = (objs, molSerials) => {
+  const contents = objs.map((r, idx) => {
+    if (r.type === 'reaction' && r.role !== 'gp') {
+      const long = r.rinchi_long_key;
+      const short = r.rinchi_short_key;
+      const web = r.rinchi_web_key;
+      return (
+        r.products.map(p => rowContent(p, long, short, web, molSerials, idx))
+      );
+    }
+    return null;
+  }).filter(r => r !== null);
+
+  return (
+    <tbody>{contents}</tbody>
+  );
+};
+
+const SectionReactionList = ({ objs, molSerials }) => (
+  <div>
+    <p>* Images are hidden in the preview.</p>
+    <Table striped bordered condensed hover>
+      {tableHeader()}
+      {tableBody(objs, molSerials)}
+    </Table>
+  </div>
+);
+
+export default SectionReactionList;
diff --git a/app/packs/src/components/report/SectionSample.js b/app/packs/src/components/report/SectionSample.js
new file mode 100644
index 000000000..f747c33a2
--- /dev/null
+++ b/app/packs/src/components/report/SectionSample.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Alert } from 'react-bootstrap';
+import QuillViewer from 'src/components/QuillViewer'
+
+const SectionSample = ({ sample, settings, configs }) => {
+  const { short_label, molecule_iupac_name, svgPath, analyses,
+    reaction_description, name, external_label } = sample;
+
+  return (
+    <div>
+      <Alert style={{
+        textAlign: 'center',
+        backgroundColor: '#000000',
+        color: 'white',
+        border: 'none'
+      }}
+      > {`${molecule_iupac_name} (${name || external_label || short_label})`}
+      </Alert>
+
+      <SVGContent
+        show={settings.diagram}
+        svgPath={svgPath}
+      />
+
+      <AnalysesContent
+        show={settings.analyses && analyses}
+        showRecDes={settings.reactiondesc && reaction_description}
+        analyses={analyses}
+        reactionDescription={reaction_description}
+      />
+    </div>
+  );
+};
+
+const SVGContent = ({ show, svgPath }) => {
+  if (!show) { return null; }
+  return <SVG key={svgPath} src={svgPath} className='sample-details' />
+}
+
+const AnalysesContent = ({ show, showRecDes, analyses, reactionDescription }) => {
+  const isReDesObj = typeof reactionDescription === "object";
+  const init = showRecDes && isReDesObj ? reactionDescription.ops : [];
+  const analysesParagraph = () => {
+    const dataMerged = analyses.reduce((sum, a) => {
+      let defaultContent = "{\"ops\":[{\"insert\":\"\"}]}"
+
+      let contentJSON = a.extended_metadata.content || JSON.parse(defaultContent)
+      return [...sum, ...contentJSON.ops];
+    }, init);
+    const data = dataMerged.map(d => {
+      d.insert = d.insert.replace(/\n/g, ' ');
+      return d;
+    });
+    return { ops: data };
+  };
+
+  return (
+    show
+      ? <div>
+        {<QuillViewer value={analysesParagraph()} />}
+      </div>
+      : null
+  );
+}
+
+export default SectionSample;
diff --git a/app/packs/src/components/report/SectionSiProcedures.js b/app/packs/src/components/report/SectionSiProcedures.js
new file mode 100644
index 000000000..e4f98b242
--- /dev/null
+++ b/app/packs/src/components/report/SectionSiProcedures.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { SVGContent, DescriptionContent } from 'src/apps/mydb/elements/details/reports/SectionReaction';
+import { rmDeltaRedundantSpaceBreak } from 'src/utilities/quillFormat';
+
+const Title = ({ el, counter }) => {
+  return (
+    <h5>
+      3.{counter} {el.name} ({el.short_label})
+    </h5>
+  );
+}
+
+const ProcedureRow = ({ el, counter }) => {
+  const clean_desc = rmDeltaRedundantSpaceBreak(el.description);
+  return (
+    <div>
+      <Title el={el} counter={counter} />
+      <SVGContent
+        show={true}
+        svgPath={el.svgPath}
+        products={[]}
+        isProductOnly={false}
+      />
+      <DescriptionContent show={true} description={clean_desc} />
+    </div>
+  );
+}
+
+const SectionSiProcedures = ({ previewObjs }) => {
+  let counter = 0;
+  const contents = previewObjs.map(obj => {
+    if (obj.type === 'reaction' && obj.role === 'gp') {
+      counter += 1;
+      return (
+        <ProcedureRow id={obj.id} key={obj.id} el={obj} counter={counter} />
+      );
+    }
+  });
+
+  return (
+    <div>
+      {contents}
+    </div>
+  );
+}
+
+export default SectionSiProcedures;
diff --git a/app/packs/src/components/report/SectionSiSynthesis.js b/app/packs/src/components/report/SectionSiSynthesis.js
new file mode 100644
index 000000000..cbfb363a2
--- /dev/null
+++ b/app/packs/src/components/report/SectionSiSynthesis.js
@@ -0,0 +1,418 @@
+import React from 'react';
+import _ from 'lodash';
+import { SVGContent } from 'src/apps/mydb/elements/details/reports/SectionReaction';
+import QuillViewer from 'src/components/QuillViewer';
+import { fixDigit, validDigit } from 'src/utilities/MathUtils';
+import { rmOpsRedundantSpaceBreak, frontBreak } from 'src/utilities/quillFormat';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import { Alphabet } from 'src/utilities/ElementUtils';
+import { UserSerial } from 'src/utilities/ReportHelper';
+
+const onlyBlank = (target) => {
+  if (target.length === 0) return true;
+  const content = target.map(t => t.insert).join('').replace(/\s+/, '');
+  return !content;
+};
+
+const deltaUserSerial = (molecule, molSerials) => {
+  const insert = UserSerial(molecule, molSerials);
+  return { insert, attributes: { bold: 'true' } };
+};
+
+const Title = ({ el, counter, molSerials }) => {
+  let title = [];
+  el.products.forEach((p, i) => {
+    const us = UserSerial(p.molecule, molSerials);
+    const key = `${i}-text`;
+    const comma = <span key={`${i}-comma`}>, </span>;
+    const smn = p.showedName();
+    title = smn
+      ? [...title, <span key={key}>{smn} (<b>{us}</b>)</span>, comma]
+      : [...title, <span key={key}>&quot;<b>NAME</b>&quot; (<b>{us}</b>)</span>, comma];
+  });
+  title = _.flatten(title).slice(0, -1);
+
+  return (
+    <h5>
+      <span>{title}</span>
+    </h5>
+  );
+};
+
+const deltaSampleMoleculeName = (s) => {
+  const smn = s.showedName();
+  if (smn) {
+    return { insert: smn };
+  }
+  return { attributes: { bold: 'true' }, insert: '"NAME"' };
+};
+
+const isDisableAll = (settings) => {
+  let status = false;
+  const settingKeys = Object.keys(settings);
+  settingKeys.forEach((key) => {
+    status = status || settings[key];
+  });
+  return !status;
+};
+
+const productEA = (p) => {
+  let ea = [];
+  p.elemental_compositions.forEach((ec) => {
+    if (ec.description === 'By molecule formula') {
+      for (let [k, v] of Object.entries(ec.data)) {
+        ea = [...ea, `${k}, ${v}`];
+      }
+    }
+    return null;
+  });
+  ea = ea.filter(r => r != null).join('; ');
+  return ea;
+};
+
+const prdIdentifier = (counter, mol, molSerials) => (
+  [
+    { insert: `{P${counter}|` },
+    deltaUserSerial(mol, molSerials),
+    { insert: '}' },
+  ]
+);
+
+const productContent = (products, settings, molSerials) => {
+  let content = [];
+  let counter = 0;
+
+  products.forEach((p) => {
+    const m = p.molecule;
+    const ea = productEA(p);
+    counter += 1;
+
+    const cas = p.xref && p.xref.cas ? p.xref.cas : '- ';
+    const deltaName = settings.Name ? [
+      { insert: 'Name ' },
+      ...prdIdentifier(counter, m, molSerials),
+      { insert: ': ' },
+      deltaSampleMoleculeName(p),
+      { insert: '; ' },
+    ] : [];
+
+    const pFormula = settings.Formula ? `Formula: ${m.sum_formular}; ` : '';
+    const pCAS = settings.CAS ? `CAS: ${cas}; ` : '';
+    const pMMass = settings.MolecularMas
+      ? `Molecular Mass: ${fixDigit(m.molecular_weight, 4)}; ` : '';
+    const pEMass = settings.ExactMass
+      ? `Exact Mass: ${fixDigit(m.exact_molecular_weight, 4)}; ` : '';
+    const pEA = settings.EA ? `EA: ${ea}.` : '';
+
+    const pSmiles = `Smiles: ${m.cano_smiles}`;
+    const pInChI = `InChIKey: ${m.inchikey}`;
+    const dSmiles = settings.Smiles
+      ? [{ insert: pSmiles }, { insert: '\n' }]
+      : [];
+    const dInChI = settings.InChI
+      ? [{ insert: pInChI }, { insert: '\n' }]
+      : [];
+
+    content = [...content, ...deltaName,
+    { insert: pFormula + pCAS + pMMass + pEMass + pEA },
+    { insert: '\n' },
+    ...dSmiles,
+    ...dInChI,
+    { insert: '\n' },
+    ];
+  });
+  return content;
+};
+
+const ProductsInfo = ({ products = [], settings, molSerials }) => {
+  const disableAll = isDisableAll(settings);
+  if (disableAll) return null;
+
+  const content = productContent(products, settings, molSerials);
+  return <QuillViewer value={{ ops: content }} />;
+};
+
+const stAndReContent = (el, prevContent, molSerials) => {
+  let counter = 0;
+  let content = prevContent;
+  [...el.starting_materials, ...el.reactants].forEach((elm) => {
+    counter += 1;
+    content = [...content,
+    { insert: `{${Alphabet(counter)}|` },
+    deltaUserSerial(elm.molecule, molSerials),
+    { insert: '} ' },
+    deltaSampleMoleculeName(elm),
+    { insert: ` (${validDigit(elm.amount_g, 3)} g, ${validDigit(elm.amount_mol * 1000, 3)} mmol, ${validDigit(elm.equivalent, 3)} equiv); ` }];
+  });
+  return { content };
+};
+
+const solventsContent = (el, prevContent) => {
+  let counter = 0;
+  let content = prevContent;
+  el.solvents.forEach((elm) => {
+    counter += 1;
+    content = [...content,
+    { insert: `{S${counter}` },
+    { insert: '} ' },
+    deltaSampleMoleculeName(elm),
+    { insert: ` (${validDigit(elm.amount_l * 1000, 2)} mL); ` }];
+  });
+  return { content };
+};
+
+const porductsContent = (el, prevContent, molSerials) => {
+  let counter = 0;
+  let content = prevContent;
+  content = [...content, { insert: 'Yield: ' }];
+  el.products.forEach((p) => {
+    const mol = p.molecule;
+    counter += 1;
+    content = [...content, ...prdIdentifier(counter, mol, molSerials),
+    { insert: ` = ${validDigit(p.equivalent * 100, 0)}%` },
+    { insert: ` (${validDigit(p.amount_g, 3)} g, ${validDigit(p.amount_mol * 1000, 3)} mmol)` },
+    { insert: '; ' }];
+  });
+  content = content.slice(0, -1);
+  content = [...content, { insert: '.' }];
+  return { content };
+};
+
+const materailsContent = (el, molSerials) => {
+  const content = [];
+  const stAndRe = stAndReContent(el, content, molSerials);
+  const solvCon = solventsContent(el, stAndRe.content);
+  const prodCon = porductsContent(el, solvCon.content, molSerials);
+
+  return prodCon.content;
+};
+
+const tlcContent = (el) => {
+  let content = [];
+  if (el.tlc_solvents) {
+    content = [{ attributes: { italic: 'true' }, insert: 'R' },
+    { attributes: { script: 'sub', italic: 'true' }, insert: 'f' },
+    { insert: ` = ${el.rf_value} (${el.tlc_solvents}).` }];
+  }
+  return content;
+};
+
+const obsvTlcContent = (el) => {
+  let content = [];
+  const ops = el.observation.ops || [];
+  content = [...ops, ...tlcContent(el)];
+  content = rmOpsRedundantSpaceBreak(content);
+  if (onlyBlank(content)) return [];
+  return frontBreak(content);
+};
+
+const rmHeadSpace = (content) => {
+  let els = content;
+  let head = null;
+  els.some((el) => {
+    head = el.insert.replace(/^\s+/, '');
+    if (!head) els = [...els.slice(1)];
+    return head;
+  });
+  if (onlyBlank(els) || !head) return [];
+  els[0].insert = head;
+
+  return els;
+};
+
+const rmTailSpace = (content) => {
+  let els = content;
+  let tail = null;
+  els.reverse().some((el) => {
+    tail = el.insert.replace(/\s*[,.;]*\s*$/, '');
+    if (!tail) els = [...els.slice(1)];
+    return tail;
+  });
+  if (onlyBlank(els) || !tail) return [];
+  els.reverse();
+  els[els.length - 1].insert = tail;
+
+  return els;
+};
+
+const opsTailWithSymbol = (els, symbol) => [...els, { insert: symbol }];
+
+const endingSymbol = (content, symbol) => {
+  if (onlyBlank(content)) return [];
+
+  let els = rmHeadSpace(content);
+  els = rmTailSpace(els);
+
+  if (onlyBlank(els)) return [];
+
+  return opsTailWithSymbol(els, symbol);
+};
+
+const analysesContent = (products) => {
+  let content = [];
+  products.forEach((p) => {
+    const sortAnalyses = ArrayUtils.sortArrByIndex(p.analyses);
+    sortAnalyses.forEach((a) => {
+      const data = a && a.extended_metadata
+        && a.extended_metadata.report
+        && a.extended_metadata.report === 'true'
+        ? a.extended_metadata.content
+        : { ops: [] };
+      content = [...content, ...endingSymbol(data.ops, '; ')];
+    });
+  });
+  if (onlyBlank(content)) return [];
+  content = rmOpsRedundantSpaceBreak(content);
+  content = [...content.slice(0, -1), { insert: '.' }];
+  return frontBreak(content);
+};
+
+const dangContent = (el) => {
+  if (el.dangerous_products.length === 0) return [];
+  let content = [{ attributes: { bold: 'true' }, insert: 'Attention! ' },
+  {
+    insert: 'The reaction includes the use of dangerous ' +
+      'chemicals, which have the following ' +
+      'classification: '
+  }];
+  el.dangerous_products.forEach((d) => {
+    content = [...content, { insert: d }, { insert: ', ' }];
+  });
+  content = content.slice(0, -1);
+  content = rmOpsRedundantSpaceBreak(content);
+  return content;
+};
+
+const DangerBlock = ({ el }) => {
+  const block = dangContent(el);
+  return block.length > 0 ? <QuillViewer value={{ ops: block }} /> : null;
+};
+
+const descContent = (el) => {
+  if (['gp', 'parts'].indexOf(el.role) >= 0) return [];
+  let block = rmOpsRedundantSpaceBreak(el.description.ops);
+  block = [{ insert: '\n' }, ...block, { insert: '\n' }];
+  return block;
+};
+
+const synNameContent = (el) => {
+  const title = el.name || el.short_label;
+  return [{ insert: `${title}: ` }];
+};
+
+const doiContent = (el) => {
+  let block = [];
+  const rdoi = el && el.tag && el.tag.taggable_data && el.tag.taggable_data.publication
+   && el.tag.taggable_data.publication.doi;
+   // prs = el.products || [];
+   // const pdois = prs.map {
+   //
+   // }
+  if (rdoi) {
+    block = [{
+      insert: `\n Additional information on the chemical synthesis is available via Chemotion repository: \n https://doi.org/${rdoi}\n`
+    }];
+  }
+  return block;
+};
+
+const ContentBlock = ({ el, molSerials }) => {
+  const synName = synNameContent(el);
+  const desc = descContent(el);
+  const materials = materailsContent(el, molSerials);
+  const obsvTlc = obsvTlcContent(el);
+  const analyses = analysesContent(el.products);
+  const dois = doiContent(el);
+  const block = [...synName, ...desc, ...materials, ...obsvTlc, ...analyses, ...dois];
+  return <QuillViewer value={{ ops: block }} />;
+};
+
+const docFragment = (input) => {
+  const t = document.createElement('template');
+  t.innerHTML = input;
+  try {
+    return t.content.childNodes[0].childNodes[1].childNodes[2].childNodes;
+  } catch (err) {
+    return null;
+  }
+};
+
+const bibContent = (bib, idx) => {
+  let delta = [{ insert: `[${idx + 1}] ` }];
+  const nodes = docFragment(bib);
+  if (!nodes) return [];
+  nodes.forEach((node) => {
+    const text = node.textContent;
+    let target = { insert: text };
+    if (node.nodeName === 'I') {
+      target = { attributes: { italic: 'true' }, insert: text };
+    } else if (node.nodeName === 'B') {
+      target = { attributes: { bold: 'true' }, insert: text };
+    }
+    delta = [...delta, target];
+  });
+  return [...delta, { insert: '\n' }];
+};
+
+const ZoteroBlock = ({ el }) => {
+  const refs = el.references || [];
+  let bibs = [];
+  refs.forEach((ref, idx) => {
+    bibs = [...bibs, ...bibContent(ref.bib, idx)];
+  });
+
+  return bibs.length > 0
+    ? <QuillViewer value={{ ops: bibs }} />
+    : null;
+};
+
+const SynthesisRow = ({ el, counter, configs, molSerials, settings }) => (
+  <div>
+    <Title el={el} counter={counter} molSerials={molSerials} />
+    <SVGContent
+      show
+      svgPath={el.svgPath}
+      products={el.products}
+      isProductOnly={!configs.Showallchemi}
+    />
+    <ProductsInfo
+      products={el.products}
+      settings={settings}
+      molSerials={molSerials}
+    />
+    <ContentBlock el={el} molSerials={molSerials} />
+    <DangerBlock el={el} />
+    <ZoteroBlock el={el} />
+  </div>
+);
+
+const SectionSiSynthesis = ({
+  previewObjs, configs, molSerials, settings,
+}) => {
+  let counter = 0;
+  const contents = previewObjs.map((obj) => {
+    if (obj.type === 'reaction' && obj.role !== 'gp') {
+      counter += 1;
+      return (
+        <SynthesisRow
+          id={obj.id}
+          key={obj.id}
+          el={obj}
+          counter={counter}
+          configs={configs}
+          molSerials={molSerials}
+          settings={settings}
+        />
+      );
+    }
+    return null;
+  }).filter(r => r !== null);
+
+  return (
+    <div>
+      {contents}
+    </div>
+  );
+};
+
+export default SectionSiSynthesis;
diff --git a/app/packs/src/components/report/SectionSiSynthesisStdRxn.js b/app/packs/src/components/report/SectionSiSynthesisStdRxn.js
new file mode 100644
index 000000000..66aa33299
--- /dev/null
+++ b/app/packs/src/components/report/SectionSiSynthesisStdRxn.js
@@ -0,0 +1,420 @@
+import React from 'react';
+import _ from 'lodash';
+import { SVGContent } from './SectionReaction';
+import QuillViewer from '../QuillViewer';
+import { fixDigit, validDigit } from '../utils/MathUtils';
+import { rmOpsRedundantSpaceBreak, frontBreak } from '../utils/quillFormat';
+import ArrayUtils from '../utils/ArrayUtils';
+import { Alphabet } from '../utils/ElementUtils';
+import { UserSerial, CapitalizeFirstLetter } from '../utils/ReportHelper';
+
+const onlyBlank = (target) => {
+  if (target.length === 0) return true;
+  const content = target.map(t => t.insert).join('').replace(/\s+/, '');
+  return !content;
+};
+
+const deltaUserSerial = (molecule, molSerials) => {
+  const insert = UserSerial(molecule, molSerials);
+  return { insert, attributes: { bold: 'true' } };
+};
+
+const Title = ({ el, counter, molSerials }) => {
+  let title = [];
+  el.products.forEach((p, i) => {
+    const us = UserSerial(p.molecule, molSerials);
+    const key = `${i}-text`;
+    const comma = <span key={`${i}-comma`}>, </span>;
+    const smn = i == 0 ? CapitalizeFirstLetter(p.showedName()) : p.showedName();
+    title = smn
+      ? [...title, <span key={key}>{smn} (<b>{us}</b>)</span>, comma]
+      : [...title, <span key={key}>&quot;<b>NAME</b>&quot; (<b>{us}</b>)</span>, comma];
+  });
+  title = _.flatten(title).slice(0, -1);
+
+  return (
+    <h5>
+      <span>{title}</span>
+    </h5>
+  );
+};
+
+const deltaSampleMoleculeName = (s) => {
+  const smn = s.showedName();
+  if (smn) {
+    return { insert: smn };
+  }
+  return { attributes: { bold: 'true' }, insert: '"NAME"' };
+};
+
+const isDisableAll = (settings) => {
+  let status = false;
+  const settingKeys = Object.keys(settings);
+  settingKeys.forEach((key) => {
+    status = status || settings[key];
+  });
+  return !status;
+};
+
+const productEA = (p) => {
+  let ea = [];
+  p.elemental_compositions.forEach((ec) => {
+    if (ec.description === 'By molecule formula') {
+      for (let [k, v] of Object.entries(ec.data)) {
+        ea = [...ea, `${k}, ${v}`];
+      }
+    }
+    return null;
+  });
+  ea = ea.filter(r => r != null).join('; ');
+  return ea;
+};
+
+const prdIdentifier = (counter, mol, molSerials) => (
+  [
+    { insert: `{P${counter}|` },
+    deltaUserSerial(mol, molSerials),
+    { insert: '}' },
+  ]
+);
+
+const productContent = (products, settings, molSerials) => {
+  let content = [];
+  let counter = 0;
+
+  products.forEach((p) => {
+    const m = p.molecule;
+    const ea = productEA(p);
+    counter += 1;
+
+    const cas = p.xref && p.xref.cas ? p.xref.cas.value : '- ';
+    const deltaName = settings.Name ? [
+      { insert: 'Name ' },
+      ...prdIdentifier(counter, m, molSerials),
+      { insert: ': ' },
+      deltaSampleMoleculeName(p),
+      { insert: '; ' },
+    ] : [];
+
+    const pFormula = settings.Formula ? `Formula: ${m.sum_formular}; ` : '';
+    const pCAS = settings.CAS ? `CAS: ${cas}; ` : '';
+    const pMMass = settings.MolecularMas
+      ? `Molecular Mass: ${fixDigit(m.molecular_weight, 4)}; ` : '';
+    const pEMass = settings.ExactMass
+      ? `Exact Mass: ${fixDigit(m.exact_molecular_weight, 4)}; ` : '';
+    const pEA = settings.EA ? `EA: ${ea}.` : '';
+
+    const pSmiles = `Smiles: ${m.cano_smiles}`;
+    const pInChI = `InChIKey: ${m.inchikey}`;
+    const dSmiles = settings.Smiles
+      ? [{ insert: pSmiles }, { insert: '\n' }]
+      : [];
+    const dInChI = settings.InChI
+      ? [{ insert: pInChI }, { insert: '\n' }]
+      : [];
+
+    content = [...content, ...deltaName,
+      { insert: pFormula + pCAS + pMMass + pEMass + pEA },
+      { insert: '\n' },
+      ...dSmiles,
+      ...dInChI,
+      { insert: '\n' },
+    ];
+  });
+  return content;
+};
+
+const ProductsInfo = ({ products = [], settings, molSerials }) => {
+  const disableAll = isDisableAll(settings);
+  if (disableAll) return null;
+
+  const content = productContent(products, settings, molSerials);
+  return <QuillViewer value={{ ops: content }} />;
+};
+
+const stAndReContent = (el, prevContent, molSerials) => {
+  let counter = 0;
+  let content = prevContent;
+  [...el.starting_materials, ...el.reactants].forEach((elm) => {
+    counter += 1;
+    content = [...content,
+      { insert: `{${Alphabet(counter)}|` },
+      deltaUserSerial(elm.molecule, molSerials),
+      { insert: '} ' },
+      deltaSampleMoleculeName(elm),
+      { insert: ` (${validDigit(elm.amount_g, 3)} g, ${validDigit(elm.amount_mol * 1000, 3)} mmol, ${validDigit(elm.equivalent, 3)} equiv); ` }];
+  });
+  return { content };
+};
+
+const solventsContent = (el, prevContent) => {
+  let counter = 0;
+  let content = prevContent;
+  el.solvents.forEach((elm) => {
+    counter += 1;
+    content = [...content,
+      { insert: `{S${counter}` },
+      { insert: '} ' },
+      deltaSampleMoleculeName(elm),
+      { insert: ` (${validDigit(elm.amount_l * 1000, 2)} mL); ` }];
+  });
+  return { content };
+};
+
+const porductsContent = (el, prevContent, molSerials) => {
+  let counter = 0;
+  let content = prevContent;
+  content = [...content, { insert: 'Yield: ' }];
+  el.products.forEach((p) => {
+    const mol = p.molecule;
+    counter += 1;
+    content = [...content, ...prdIdentifier(counter, mol, molSerials),
+      { insert: ` = ${validDigit(p.equivalent * 100, 0)}%` },
+      { insert: ` (${validDigit(p.amount_g, 3)} g, ${validDigit(p.amount_mol * 1000, 3)} mmol)` },
+      { insert: '; ' }];
+  });
+  content = content.slice(0, -1);
+  content = [...content, { insert: '.' }];
+  return { content };
+};
+
+const materailsContent = (el, molSerials) => {
+  const content = [];
+  const stAndRe = stAndReContent(el, content, molSerials);
+  const solvCon = solventsContent(el, stAndRe.content);
+  const prodCon = porductsContent(el, solvCon.content, molSerials);
+
+  return prodCon.content;
+};
+
+const tlcContent = (el) => {
+  let content = [];
+  if (el.tlc_solvents) {
+    content = [{ attributes: { italic: 'true' }, insert: 'R' },
+      { attributes: { script: 'sub', italic: 'true' }, insert: 'f' },
+      { insert: ` = ${el.rf_value} (${el.tlc_solvents}).` }];
+  }
+  return content;
+};
+
+const obsvTlcContent = (el) => {
+  let content = [];
+  const ops = el.observation.ops || [];
+  content = [...ops, ...tlcContent(el)];
+  content = rmOpsRedundantSpaceBreak(content);
+  if (onlyBlank(content)) return [];
+  return frontBreak(content);
+};
+
+const rmHeadSpace = (content) => {
+  let els = content;
+  let head = null;
+  els.some((el) => {
+    head = el.insert.replace(/^\s+/, '');
+    if (!head) els = [...els.slice(1)];
+    return head;
+  });
+  if (onlyBlank(els) || !head) return [];
+  els[0].insert = head;
+
+  return els;
+};
+
+const rmTailSpace = (content) => {
+  let els = content;
+  let tail = null;
+  els.reverse().some((el) => {
+    tail = el.insert.replace(/\s*[,.;]*\s*$/, '');
+    if (!tail) els = [...els.slice(1)];
+    return tail;
+  });
+  if (onlyBlank(els) || !tail) return [];
+  els.reverse();
+  els[els.length - 1].insert = tail;
+
+  return els;
+};
+
+const opsTailWithSymbol = (els, symbol) => [...els, { insert: symbol }];
+
+const endingSymbol = (content, symbol) => {
+  if (onlyBlank(content)) return [];
+
+  let els = rmHeadSpace(content);
+  els = rmTailSpace(els);
+
+  if (onlyBlank(els)) return [];
+
+  return opsTailWithSymbol(els, symbol);
+};
+
+const analysesContent = (products) => {
+  let content = [];
+  products.forEach((p) => {
+    let current = [];
+    const sortAnalyses = ArrayUtils.sortArrByIndex(p.analyses);
+    sortAnalyses.forEach((a) => {
+      const data = a && a.extended_metadata
+        && a.extended_metadata.report
+        && a.extended_metadata.report === 'true'
+        ? JSON.parse(a.extended_metadata.content)
+        : { ops: [] };
+      current = [...current, ...endingSymbol(data.ops, '; ')];
+    });
+    if (!onlyBlank(current)) {
+      current = rmOpsRedundantSpaceBreak(current);
+      content = [... content, { insert: '\n\n' }, ...current.slice(0, -1), { insert: '.' }];
+    }
+  });
+  if (onlyBlank(content)) return [];
+  return frontBreak(content);
+};
+
+const dangContent = (el) => {
+  if (el.dangerous_products.length === 0) return [];
+  let content = [{ attributes: { bold: 'true' }, insert: 'Attention! ' },
+    { insert: 'The reaction includes the use of dangerous ' +
+      'chemicals, which have the following ' +
+      'classification: ' }];
+  el.dangerous_products.forEach((d) => {
+    content = [...content, { insert: d }, { insert: ', ' }];
+  });
+  content = content.slice(0, -1);
+  content = rmOpsRedundantSpaceBreak(content);
+  return content;
+};
+
+const DangerBlock = ({ el }) => {
+  const block = dangContent(el);
+  return block.length > 0 ? <QuillViewer value={{ ops: block }} /> : null;
+};
+
+const descContent = (el) => {
+  if (['gp', 'parts'].indexOf(el.role) >= 0) return [];
+  let block = rmOpsRedundantSpaceBreak(el.description.ops);
+  block = [{ insert: '\n' }, ...block];
+  return block;
+};
+
+const synNameContent = (el) => {
+  if (['gp', 'parts'].indexOf(el.role) < 0) return [];
+  const title = el.name || el.short_label;
+  return [{ insert: `${title}: ` }];
+};
+
+const doiContent = (el) => {
+  let block = [];
+  const rdoi = el && el.tag && el.tag.taggable_data && el.tag.taggable_data.publication
+   && el.tag.taggable_data.publication.doi;
+   // prs = el.products || [];
+   // const pdois = prs.map {
+   //
+   // }
+  if (rdoi) {
+    block = [{
+      insert: `\n Additional information on the chemical synthesis is available via Chemotion repository: \n https://doi.org/${rdoi}\n`
+    }];
+  }
+  return block;
+};
+
+const ContentBlock = ({ el, molSerials }) => {
+  const synName = synNameContent(el);
+  const desc = descContent(el);
+  // const materials = materailsContent(el, molSerials);
+  const obsvTlc = obsvTlcContent(el);
+  const analyses = analysesContent(el.products);
+  const dois = doiContent(el);
+  const block = [...synName, ...desc, ...obsvTlc, ...analyses, ...dois];
+  return <QuillViewer value={{ ops: block }} />;
+};
+
+const docFragment = (input) => {
+  const t = document.createElement('template');
+  t.innerHTML = input;
+  try {
+    return t.content.childNodes[0].childNodes[1].childNodes[2].childNodes;
+  } catch (err) {
+    return null;
+  }
+};
+
+const bibContent = (bib, idx) => {
+  let delta = [{ insert: `[${idx + 1}] ` }];
+  const nodes = docFragment(bib);
+  if (!nodes) return [];
+  nodes.forEach((node) => {
+    const text = node.textContent;
+    let target = { insert: text };
+    if (node.nodeName === 'I') {
+      target = { attributes: { italic: 'true' }, insert: text };
+    } else if (node.nodeName === 'B') {
+      target = { attributes: { bold: 'true' }, insert: text };
+    }
+    delta = [...delta, target];
+  });
+  return [...delta, { insert: '\n' }];
+};
+
+const ZoteroBlock = ({ el }) => {
+  const refs = el.references || [];
+  let bibs = [];
+  refs.forEach((ref, idx) => {
+    bibs = [...bibs, ...bibContent(ref.bib, idx)];
+  });
+
+  return bibs.length > 0
+    ? <QuillViewer value={{ ops: bibs }} />
+    : null;
+};
+
+const SynthesisRow = ({ el, counter, configs, molSerials, settings }) => (
+  <div>
+    <Title el={el} counter={counter} molSerials={molSerials} />
+    <SVGContent
+      show
+      svgPath={el.svgPath}
+      products={el.products}
+      isProductOnly={!configs.Showallchemi}
+    />
+    <ProductsInfo
+      products={el.products}
+      settings={settings}
+      molSerials={molSerials}
+    />
+    <ContentBlock el={el} molSerials={molSerials} />
+    <DangerBlock el={el} />
+    <ZoteroBlock el={el} />
+  </div>
+);
+
+const SectionSiSynthesis = ({
+  previewObjs, configs, molSerials, settings,
+}) => {
+  let counter = 0;
+  const contents = previewObjs.map((obj) => {
+    if (obj.type === 'reaction' && obj.role !== 'gp') {
+      counter += 1;
+      return (
+        <SynthesisRow
+          id={obj.id}
+          key={obj.id}
+          el={obj}
+          counter={counter}
+          configs={configs}
+          molSerials={molSerials}
+          settings={settings}
+        />
+      );
+    }
+    return null;
+  }).filter(r => r !== null);
+
+  return (
+    <div>
+      {contents}
+    </div>
+  );
+};
+
+export default SectionSiSynthesis;
diff --git a/app/packs/src/components/report/SectionSpectrum.js b/app/packs/src/components/report/SectionSpectrum.js
new file mode 100644
index 000000000..182ae9d79
--- /dev/null
+++ b/app/packs/src/components/report/SectionSpectrum.js
@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+
+const TitleProduct = ({ prd, molSerials }) => {
+  const molId = prd.molId;
+  const serial = molSerials.map((ms) => {
+    if (molId === ms.mol.id) {
+      return ms.value;
+    }
+    return null;
+  }).filter(r => r !== null)[0];
+  const serialContent = serial ? `${serial}` : 'xx';
+
+  return (
+    <h5>
+      [{serialContent}] { prd.showedName }
+    </h5>
+  );
+};
+
+const Thumbnail = ({ thumb }) => {
+  const noAvaSvg = '/images/wild_card/not_available.svg';
+  const thumbImg = `data:image/png;base64,${thumb}`;
+  const previewImg = thumb ? thumbImg : noAvaSvg;
+  return <img src={previewImg} alt="" className="spectrum-thumbnail" />;
+};
+
+const isImg = (att) => {
+  const imgExts = ['jpg', 'jpeg', 'png'];
+  const ext = att.filename.split('.').pop().toLowerCase();
+  const idx = imgExts.indexOf(ext);
+  return idx >= 0;
+};
+
+const ContentAtts = ({ prd, attThumbNails }) => {
+  const contents = prd.atts.map((att, idx) => {
+    if (!isImg(att)) {
+      return null;
+    }
+    const key = `${idx}-${att.identifier}`;
+    const thumb = attThumbNails.map(tn => (
+      tn.id === att.id ? tn.thumbnail : null
+    )).filter(r => r !== null)[0];
+    return (
+      <div key={key}>
+        <div>{att.kind}</div>
+        <Thumbnail thumb={thumb || att.thumbnail} />
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      {contents}
+    </div>
+  );
+};
+
+const RowProduct = ({ prd, molSerials, attThumbNails }) => (
+  <div>
+    <TitleProduct prd={prd} molSerials={molSerials} />
+    <ContentAtts prd={prd} attThumbNails={attThumbNails} />
+  </div>
+);
+
+class SectionSpectrum extends Component {
+  componentDidMount() {
+    this.updateThumbNails();
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const prevProps = this.props;
+    const isChanged = !_.isEqual(prevProps, nextProps);
+    return isChanged;
+  }
+
+  UNSAFE_componentWillUpdate() {
+    this.updateThumbNails();
+  }
+
+  updateThumbNails() {
+    const { prdAtts } = this.props;
+    const attArrIds = prdAtts.map(prdAtt => (
+      prdAtt.atts.map(att => (
+        att.thumbnail ? null : att.id
+      ))
+    ));
+    const attIds = _.flattenDeep(attArrIds).filter(r => r !== null);
+    if (attIds.length > 0) {
+      ReportActions.updateThumbNails(attIds);
+    }
+  }
+
+  renderContents() {
+    const { molSerials, prdAtts, attThumbNails } = this.props;
+
+    const contents = prdAtts.map((prd, idx) => {
+      const key = `${idx}-${prd.sum_formular}`;
+      return (
+        <div key={key}>
+          <RowProduct
+            prd={prd}
+            molSerials={molSerials}
+            attThumbNails={attThumbNails}
+          />
+        </div>
+      );
+    });
+    return contents;
+  }
+
+  render() {
+    return (
+      <div>
+        { this.renderContents() }
+      </div>
+    );
+  }
+}
+
+export default SectionSpectrum;
diff --git a/app/packs/src/components/report/Serials.js b/app/packs/src/components/report/Serials.js
new file mode 100644
index 000000000..ba803158d
--- /dev/null
+++ b/app/packs/src/components/report/Serials.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Panel } from 'react-bootstrap';
+import Formula from 'src/components/common/Formula';
+import CommonInput from 'src/components/common/CommonInput';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+
+const Serial = ({ serial, counter }) => {
+  if (!serial) return null;
+  const mol = serial.mol;
+  const oddClass = counter % 2 === 1 ? 'order-even' : null;
+  const onCompleteEdit = val => ReportActions.updMSVal(mol.id, val);
+
+  return (
+    <Panel eventKey={counter} key={counter} >
+      <Panel.Body>
+        <div className="report-serial">
+          <div className={`order ${oddClass}`}>{counter + 1}</div>
+          <div className="svg">
+            <SVG src={mol.svgPath} key={mol.svgPath} />
+          </div>
+          <div className="info">
+            <p><Formula formula={mol.sumFormula} /></p>
+            <p>{mol.iupacName}</p>
+          </div>
+          <div className="input">
+            <CommonInput
+              value={serial.value}
+              key={mol.id}
+              placeholder="xx"
+              onCompleteEdit={onCompleteEdit}
+            />
+          </div>
+        </div>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const stdSerials = () => (<h5>Not applicable.</h5>);
+
+const suiSerials = (props) => {
+  const { selMolSerials, template } = props;
+  const contents = selMolSerials.map((molSer, i) => (
+    <Serial id={i} key={`ms-${molSer.mol.id}`} serial={molSer} counter={i} />
+  ));
+
+  return <div className="report-serials">{contents}</div>;
+};
+
+const spcSerials = props => suiSerials(props);
+
+const rxlSerials = props => suiSerials(props);
+
+const doiSerials = props => suiSerials(props);
+
+const Serials = (props) => {
+  switch (props.template.value) {
+    case 'standard':
+      return stdSerials();
+    case 'spectrum':
+      return spcSerials(props);
+    case 'supporting_information':
+    case 'supporting_information_std_rxn':
+      return suiSerials(props);
+    case 'rxn_list_xlsx':
+    case 'rxn_list_csv':
+    case 'rxn_list_html':
+      return rxlSerials(props);
+    case 'doi_list_xlsx':
+      return doiSerials(props);
+    default:
+      return stdSerials();
+  }
+};
+
+export default Serials;
diff --git a/app/packs/src/components/report/Setting.js b/app/packs/src/components/report/Setting.js
new file mode 100644
index 000000000..96f3b463f
--- /dev/null
+++ b/app/packs/src/components/report/Setting.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import { Panel } from 'react-bootstrap';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import CheckBoxs from 'src/components/common/CheckBoxs';
+
+const toggleSplSettings = (text, checked) => {
+  ReportActions.updateSplSettings({ text, checked });
+};
+
+const toggleSplSettingsAll = () => {
+  ReportActions.toggleSplSettingsCheckAll();
+};
+
+const toggleRxnSettings = (text, checked) => {
+  ReportActions.updateRxnSettings({ text, checked });
+};
+
+const toggleRxnSettingsAll = () => {
+  ReportActions.toggleRxnSettingsCheckAll();
+};
+
+const stdSetting = ({ splSettings, checkedAllSplSettings, rxnSettings,
+  checkedAllRxnSettings }) => (
+  <div>
+    <Panel bsStyle="default">
+      <Panel.Heading>
+        <Panel.Title>
+          Sample
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Body>
+        <CheckBoxs
+          items={splSettings}
+          toggleCheckbox={toggleSplSettings}
+          toggleCheckAll={toggleSplSettingsAll}
+          checkedAll={checkedAllSplSettings}
+        />
+      </Panel.Body>
+    </Panel>
+    <Panel bsStyle="default">
+      <Panel.Heading>
+        <Panel.Title>
+          Reaction
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Body>
+        <CheckBoxs
+          items={rxnSettings}
+          checkedAll={checkedAllRxnSettings}
+          toggleCheckbox={toggleRxnSettings}
+          toggleCheckAll={toggleRxnSettingsAll}
+        />
+      </Panel.Body>
+    </Panel>
+  </div>
+);
+
+const toggleSiRxnSettings = (text, checked) => {
+  ReportActions.updateSiRxnSettings({ text, checked });
+};
+
+const toggleSiRxnSettingsAll = () => {
+  ReportActions.toggleSiRxnSettingsCheckAll();
+};
+
+const suiSetting = ({ siRxnSettings, checkedAllSiRxnSettings }) => (
+  <div>
+    <Panel bsStyle="default">
+      <Panel.Heading>
+        <Panel.Title>
+          Synthesis Products Information
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Body>
+        <CheckBoxs
+          items={siRxnSettings}
+          checkedAll={checkedAllSiRxnSettings}
+          toggleCheckbox={toggleSiRxnSettings}
+          toggleCheckAll={toggleSiRxnSettingsAll}
+        />
+      </Panel.Body>
+    </Panel>
+  </div>
+);
+
+const spcSetting = () => (
+  <div>
+    <h5>Not applicable.</h5>
+  </div>
+);
+
+const rxlSetting = () => (
+  <div>
+    <h5>Not applicable.</h5>
+  </div>
+);
+
+const Setting = (props) => {
+  switch (props.template.value) {
+    case 'standard':
+      return stdSetting(props);
+    case 'spectrum':
+      return spcSetting();
+    case 'supporting_information':
+    case 'supporting_information_std_rxn':
+      return suiSetting(props);
+    case 'rxn_list_xlsx':
+    case 'rxn_list_csv':
+    case 'rxn_list_html':
+      return rxlSetting(props);
+    case 'doi_list_xlsx':
+      return rxlSetting(props);
+    default:
+      return stdSetting(props);
+  }
+};
+
+export default Setting;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetails.js b/app/packs/src/components/research_plan/ResearchPlanDetails.js
new file mode 100644
index 000000000..a00cf489f
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetails.js
@@ -0,0 +1,502 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Panel, ListGroup, ListGroupItem, ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem } from 'react-bootstrap';
+import { findIndex } from 'lodash';
+import ElementCollectionLabels from '../ElementCollectionLabels';
+import UIActions from '../actions/UIActions';
+import ElementActions from '../actions/ElementActions';
+import DetailActions from '../actions/DetailActions';
+import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
+import ResearchPlansLiteratures from '../DetailsTabLiteratures';
+import ResearchPlansMetadata from '../DetailsTabMetadata';
+import Attachment from '../models/Attachment';
+import Utils from '../utils/Functions';
+import LoadingActions from '../actions/LoadingActions';
+import ConfirmClose from '../common/ConfirmClose';
+import ResearchPlanDetailsAttachments from './ResearchPlanDetailsAttachments';
+import ResearchPlanDetailsBody from './ResearchPlanDetailsBody';
+import ResearchPlanDetailsName from './ResearchPlanDetailsName';
+import ResearchPlanDetailsContainers from './ResearchPlanDetailsContainers';
+import Immutable from 'immutable';
+import ElementDetailSortTab from '../ElementDetailSortTab';
+import { addSegmentTabs } from '../generic/SegmentDetails';
+import PrivateNoteElement from '../PrivateNoteElement';
+
+export default class ResearchPlanDetails extends Component {
+  constructor(props) {
+    super(props);
+    const { researchPlan } = props;
+    this.state = {
+      researchPlan,
+      update: false,
+      visible: Immutable.List(),
+    };
+    this.handleSwitchMode = this.handleSwitchMode.bind(this);
+    this.handleResearchPlanChange = this.handleResearchPlanChange.bind(this);
+    this.toggleFullScreen = this.toggleFullScreen.bind(this);
+    this.handleNameChange = this.handleNameChange.bind(this);
+    this.handleBodyChange = this.handleBodyChange.bind(this);
+    this.handleBodyAdd = this.handleBodyAdd.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
+    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { researchPlan } = nextProps;
+    this.setState({ researchPlan });
+  }
+
+  toggleFullScreen() {
+    this.props.toggleFullScreen();
+
+    // toogle update prop to notify react data grid for view change
+    this.setState({ update: !this.state.update });
+  }
+
+  handleResearchPlanChange(el) {
+    const researchPlan = el;
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  handleSegmentsChange(se) {
+    const { researchPlan } = this.state;
+    const { segments } = researchPlan;
+    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
+    researchPlan.segments = segments;
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  handleSwitchMode(mode) {
+    const { researchPlan } = this.state;
+    researchPlan.mode = mode;
+    this.setState({ researchPlan });
+  }
+
+  // handle functions
+
+  handleSubmit() {
+    const { researchPlan } = this.state;
+    LoadingActions.start();
+
+    if (researchPlan.isNew) {
+      ElementActions.createResearchPlan(researchPlan);
+    } else {
+      ElementActions.updateResearchPlan(researchPlan);
+    }
+
+    if (researchPlan.is_new) {
+      const force = true;
+      DetailActions.close(researchPlan, force);
+    }
+  }
+
+  handleSelect(eventKey) {
+    UIActions.selectTab({ tabKey: eventKey, type: 'research_plan' });
+    this.setState({
+      activeTab: eventKey
+    });
+  }
+
+  // handle name actions
+
+  handleNameChange(value) {
+    const { researchPlan } = this.state;
+    researchPlan.changed = true;
+    researchPlan.name = value;
+    this.setState({ researchPlan });
+  }
+
+  // handle body actions
+
+  handleBodyChange(value, id) {
+    const { researchPlan } = this.state;
+    const index = researchPlan.body.findIndex(field => field.id === id);
+    researchPlan.body[index].value = value;
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  handleBodyDrop(source, target) {
+    const { researchPlan } = this.state;
+    researchPlan.body.splice(target, 0, researchPlan.body.splice(source, 1)[0]);
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  handleBodyAdd(type) {
+    const { researchPlan } = this.state;
+    researchPlan.addBodyField(type);
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  handleBodyDelete(id) {
+    const { researchPlan } = this.state;
+    const index = researchPlan.body.findIndex(field => field.id === id);
+    researchPlan.body.splice(index, 1);
+    researchPlan.changed = true;
+    this.setState({ researchPlan });
+  }
+
+  // handle attachment actions
+
+  handleAttachmentDrop(files) {
+    const { researchPlan } = this.state;
+    researchPlan.changed = true;
+    files.map((file) => {
+      const attachment = Attachment.fromFile(file);
+      researchPlan.attachments.push(attachment);
+    });
+    this.setState({ researchPlan });
+  }
+
+  handleAttachmentDelete(attachment) {
+    const { researchPlan } = this.state;
+    const index = researchPlan.attachments.indexOf(attachment);
+    researchPlan.changed = true;
+    researchPlan.attachments[index].is_deleted = true;
+    this.setState({ researchPlan });
+  }
+
+  handleAttachmentUndoDelete(attachment) {
+    const { researchPlan } = this.state;
+    const index = researchPlan.attachments.indexOf(attachment);
+    researchPlan.attachments[index].is_deleted = false;
+    this.setState({ researchPlan });
+  }
+
+  handleAttachmentDownload(attachment) {
+    Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
+  }
+
+  handleAttachmentEdit(attachment) {
+    const { researchPlan } = this.state;
+
+    // update only this attachment
+    researchPlan.attachments.map((currentAttachment) => {
+      if (currentAttachment.id === attachment.id) return attachment;
+    });
+    this.setState({ researchPlan });
+    this.forceUpdate();
+  }
+
+  handleExport(exportFormat) {
+    const { researchPlan } = this.state;
+    ResearchPlansFetcher.export(researchPlan, exportFormat);
+  }
+
+  handleExportField(field) {
+    const { researchPlan } = this.props;
+    ResearchPlansFetcher.exportTable(researchPlan, field);
+  }
+
+  newItemByType(fieldName, value, type) {
+    switch (fieldName) {
+      case 'description':
+        return {
+          description: value,
+          descriptionType: type
+        }
+      case 'alternate_identifier':
+        return {
+          alternateIdentifier: value,
+          alternateIdentifierType: type
+        }
+      case 'related_identifier':
+        return {
+          relatedIdentifier: value,
+          relatedIdentifierType: type
+        }
+      }
+  }
+
+  handleCopyToMetadata(id, fieldName) {
+    const { researchPlan } = this.state;
+    const researchPlanMetadata = researchPlan.research_plan_metadata;
+    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
+    const index = researchPlan.body.findIndex(field => field.id === id);
+    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || ''
+    if (fieldName === 'name') {
+      researchPlanMetadata.title = researchPlan.name;
+      args.title = researchPlan.name.trim();
+    } else if (fieldName === 'subject') {
+      researchPlanMetadata.subject = value;
+      args.subject = value;
+    } else {
+      const type = researchPlan.body[index]?.title?.trim() || ''
+      const newItem = this.newItemByType(fieldName, value, type)
+
+      const currentCollection = researchPlanMetadata[fieldName] ? researchPlanMetadata[fieldName] : []
+      const newCollection = currentCollection.concat(newItem)
+      researchPlanMetadata[fieldName] = newCollection
+      args[`${fieldName}`] = researchPlanMetadata[fieldName]
+    }
+
+    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      }
+    });
+  }
+
+  // render functions
+
+  renderExportButton(disabled) {
+    return (
+      <Dropdown
+        id="research-plan-export-dropdown"
+        className="research-plan-export-dropdown dropdown-right pull-right"
+        disabled={disabled}
+      >
+        <Dropdown.Toggle>
+          Export
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onSelect={() => this.handleExport('docx')}>
+            as .docx
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('odt')}>
+            as .odt
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('html')}>
+            as HTML
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('markdown')}>
+            as Markdown
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('latex')}>
+            as LaTeX
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+
+  renderResearchPlanMain(researchPlan, update) {
+    return researchPlan.mode === 'edit' ? this.renderPropertiesTab(researchPlan, update) :
+      this.renderResearchPlanTab(researchPlan, update);
+  }
+
+  renderResearchPlanTab(researchPlan, update) {
+    const { name, body, changed } = researchPlan;
+    return (
+      <ListGroup fill="true">
+        <ListGroupItem >
+          {this.renderExportButton(changed)}
+          <ResearchPlanDetailsName
+            value={name}
+            disabled={researchPlan.isMethodDisabled('name')}
+            onChange={this.handleNameChange}
+            edit={false}
+          />
+          <ResearchPlanDetailsBody
+            body={body}
+            disabled={researchPlan.isMethodDisabled('body')}
+            onChange={this.handleBodyChange}
+            onDrop={this.handleBodyDrop.bind(this)}
+            onAdd={this.handleBodyAdd}
+            onDelete={this.handleBodyDelete.bind(this)}
+            onExport={this.handleExportField.bind(this)}
+            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
+            update={update}
+            edit={false}
+          />
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+
+  renderPropertiesTab(researchPlan, update) {
+    const { name, body } = researchPlan;
+    return (
+      <ListGroup fill="true">
+        <ListGroupItem >
+          <ResearchPlanDetailsName
+            value={name}
+            isNew={researchPlan.isNew}
+            disabled={researchPlan.isMethodDisabled('name')}
+            onChange={this.handleNameChange}
+            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
+            edit
+          />
+          <ResearchPlanDetailsBody
+            body={body}
+            disabled={researchPlan.isMethodDisabled('body')}
+            onChange={this.handleBodyChange.bind(this)}
+            onDrop={this.handleBodyDrop.bind(this)}
+            onAdd={this.handleBodyAdd}
+            onDelete={this.handleBodyDelete.bind(this)}
+            onExport={this.handleExportField.bind(this)}
+            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
+            isNew={researchPlan.isNew}
+            copyableFields={[
+              { title: 'Subject', fieldName: 'subject' },
+              { title: 'Alternate Identifier', fieldName: 'alternate_identifier' },
+              { title: 'Related Identifier', fieldName: 'related_identifier' },
+              { title: 'Description', fieldName: 'description' }
+            ]}
+            update={update}
+            edit
+          />
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+
+  renderAnalysesTab(researchPlan) {
+    return (
+      <ListGroup fill="true">
+        <ListGroupItem>
+          <ResearchPlanDetailsContainers
+            handleSubmit={this.handleSubmit}
+            researchPlan={researchPlan}
+            readOnly={false}
+            parent={this}
+          />
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+
+  renderAttachmentsTab(researchPlan) {
+    const { attachments } = researchPlan;
+    return (
+      <ListGroup fill="true">
+        <ListGroupItem >
+          <ResearchPlanDetailsAttachments
+            attachments={attachments}
+            onDrop={this.handleAttachmentDrop.bind(this)}
+            onDelete={this.handleAttachmentDelete.bind(this)}
+            onUndoDelete={this.handleAttachmentUndoDelete.bind(this)}
+            onDownload={this.handleAttachmentDownload.bind(this)}
+            onEdit={this.handleAttachmentEdit.bind(this)}
+            readOnly={false}
+          />
+        </ListGroupItem>
+      </ListGroup>
+    );
+  }
+
+  renderPanelHeading(researchPlan) {
+    const titleTooltip = `Created at: ${researchPlan.created_at} \n Updated at: ${researchPlan.updated_at}`;
+
+    return (
+      <Panel.Heading>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
+          <span>
+            <i className="fa fa-file-text-o" />
+            &nbsp; <span>{researchPlan.name}</span> &nbsp;
+          </span>
+        </OverlayTrigger>
+        <ElementCollectionLabels element={researchPlan} placement="right" />
+        <ConfirmClose el={researchPlan} />
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveresearch_plan">Save Research Plan</Tooltip>}>
+          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: (researchPlan.changed || false) ? '' : 'none' }}>
+            <i className="fa fa-floppy-o" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">Fullresearch_plan</Tooltip>}>
+          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={this.toggleFullScreen}>
+            <i className="fa fa-expand" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+      </Panel.Heading>
+    );
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  render() {
+    const { researchPlan, update, visible } = this.state;
+
+    let btnMode = <Button bsSize="xs" bsStyle="success" onClick={() => this.handleSwitchMode('edit')}>click to edit</Button>;
+    if (researchPlan.mode !== 'view') {
+      btnMode = <Button bsSize="xs" bsStyle="info" onClick={() => this.handleSwitchMode('view')}>click to view</Button>;
+    }
+
+    const tabContentsMap = {
+      research_plan: (
+        <Tab eventKey="research_plan" title="Research plan" key={`rp_${researchPlan.id}`}>
+          <div style={{ margin: '5px 0px 5px 5px' }}>
+            {btnMode}
+          </div>
+          {this.renderResearchPlanMain(researchPlan, update)}
+          <PrivateNoteElement element={researchPlan} disabled={researchPlan.can_update} />
+        </Tab>
+      ),
+      analyses: (
+        <Tab eventKey="analyses" title="Analyses" key={`analyses_${researchPlan.id}`}>
+          {this.renderAnalysesTab(researchPlan)}
+        </Tab>
+      ),
+      attachments: (
+        <Tab eventKey="attachments" title="Attachments" key={`attachments_${researchPlan.id}`}>
+          {this.renderAttachmentsTab(researchPlan)}
+        </Tab>
+      ),
+      references: (
+        <Tab eventKey="references" title="References" key={`lit_${researchPlan.id}`}>
+          <ResearchPlansLiteratures element={researchPlan} />
+        </Tab>
+      ),
+      metadata: (
+        <Tab eventKey={4} title="Metadata" disabled={researchPlan.isNew} key={`metadata_${researchPlan.id}`}>
+          <ResearchPlansMetadata
+            parentResearchPlan={researchPlan}
+            parentResearchPlanMetadata={researchPlan.research_plan_metadata}
+          />
+        </Tab>
+      ),
+    };
+
+    const tabTitlesMap = {
+      research_plan: 'Research Plan',
+      analyses: 'Analyses',
+      attachments: 'Attachments',
+      references: 'References',
+      metadata: 'Metadata',
+    };
+    addSegmentTabs(researchPlan, this.handleSegmentsChange, tabContentsMap);
+
+    const tabContents = [];
+    visible.forEach((value) => {
+      const tabContent = tabContentsMap[value];
+      if (tabContent) { tabContents.push(tabContent); }
+    });
+    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
+
+    return (
+      <Panel bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail research-plan-details">
+        {this.renderPanelHeading(researchPlan)}
+        <Panel.Body>
+          <ElementDetailSortTab
+            type="research_plan"
+            availableTabs={Object.keys(tabContentsMap)}
+            tabTitles={tabTitlesMap}
+            onTabPositionChanged={this.onTabPositionChanged}
+          />
+          <Tabs activeKey={activeTab} onSelect={key => this.handleSelect(key)} id="screen-detail-tab">
+            {tabContents}
+          </Tabs>
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(researchPlan)}>Close</Button>
+            {
+              researchPlan.changed ? <Button bsStyle="warning" onClick={() => this.handleSubmit()}>{researchPlan.isNew ? 'Create' : 'Save'}</Button> : <div />
+            }
+          </ButtonToolbar>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+ResearchPlanDetails.propTypes = {
+  researchPlan: PropTypes.object.isRequired,
+  toggleFullScreen: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js b/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
new file mode 100644
index 000000000..a028d8a0a
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+const buttonObjects = [
+  { label: 'Add Text Editor', type: 'richtext', icon: 'fa fa-file-text-o' },
+  { label: 'Add Table Editor', type: 'table', icon: 'fa fa-table' },
+  { label: 'Add Ketcher Editor', type: 'ketcher', icon: 'fa fa-pencil-square-o' },
+  { label: 'Add Image', type: 'image', icon: 'fa fa-picture-o' },
+  { label: 'Add Sample', type: 'sample', icon: 'icon-sample' },
+  { label: 'Add Reaction', type: 'reaction', icon: 'icon-reaction' },
+];
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class ResearchPlanDetailsAddField extends Component {
+  render() {
+    const { onAdd } = this.props;
+    return (
+      <span className="research-plan-field-drop-add-field">
+        <ButtonGroup bsSize="xsmall">
+          {
+            buttonObjects.map(button => (
+              <OverlayTrigger key={uuid.v4()} placement="top" overlay={<Tooltip id={`rp_tooptip_${button.type}`}>{button.label}</Tooltip>}>
+                <Button onClick={() => onAdd(button.type)} data-cy={`btn_${button.type}`}>
+                  <i className={button.icon} aria-hidden="true" />&nbsp;<i className="fa fa-plus" aria-hidden="true" />
+                </Button>
+              </OverlayTrigger>
+            ))
+          }
+        </ButtonGroup>
+      </span>
+    );
+  }
+}
+
+ResearchPlanDetailsAddField.propTypes = {
+  onAdd: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js b/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
new file mode 100644
index 000000000..48ef0fc50
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
@@ -0,0 +1,250 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+import { FormGroup, Button, Row, Col, Tooltip, ControlLabel, ListGroup, ListGroupItem, OverlayTrigger } from 'react-bootstrap';
+import { last, findKey, values } from 'lodash';
+import EditorFetcher from '../fetchers/EditorFetcher';
+import ImageModal from '../common/ImageModal';
+import SpinnerPencilIcon from '../common/SpinnerPencilIcon';
+import { previewAttachmentImage } from './../utils/imageHelper';
+
+const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
+const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
+const imageStyle = { position: 'absolute', width: 60, height: 60 };
+
+export default class ResearchPlanDetailsAttachments extends Component {
+  constructor(props) {
+    super(props);
+    const {
+      attachments, onDrop, onDelete, onUndoDelete, onDownload, onEdit
+    } = props;
+    this.state = {
+      onDrop,
+      onDelete,
+      onUndoDelete,
+      onDownload,
+      onEdit,
+      attachmentEditor: false,
+      extension: null,
+    };
+    this.editorInitial = this.editorInitial.bind(this);
+  }
+
+  componentDidMount() {
+    this.editorInitial();
+  }
+
+  editorInitial() {
+    EditorFetcher.initial()
+      .then((result) => {
+        this.setState({
+          attachmentEditor: result.installed,
+          extension: result.ext
+        });
+      });
+  }
+
+  documentType(filename) {
+    const { extension } = this.state;
+
+    const ext = last(filename.split('.'));
+    const docType = findKey(extension, o => o.includes(ext));
+
+    if (typeof (docType) === 'undefined' || !docType) {
+      return null;
+    }
+
+    return docType;
+  }
+
+  handleEdit(attachment) {
+    const { onEdit } = this.state;
+    const fileType = last(attachment.filename.split('.'));
+    const docType = this.documentType(attachment.filename);
+
+    EditorFetcher.startEditing({ attachment_id: attachment.id })
+      .then((result) => {
+        if (result.token) {
+          const url = `/editor?id=${attachment.id}&docType=${docType}&fileType=${fileType}&title=${attachment.filename}&key=${result.token}`;
+          window.open(url, '_blank');
+
+          attachment.aasm_state = 'oo_editing';
+          attachment.updated_at = new Date();
+
+          onEdit(attachment);
+        } else {
+          alert('Unauthorized to edit this file.');
+        }
+      });
+  }
+
+  renderRemoveAttachmentButton(attachment) {
+    const { onDelete } = this.state;
+
+    return (
+      <Button bsSize="xsmall" bsStyle="danger" className="button-right" onClick={() => onDelete(attachment)} disabled={this.props.readOnly}>
+        <i className="fa fa-trash-o" aria-hidden="true" />
+      </Button>
+    );
+  }
+
+  renderListGroupItem(attachment) {
+    const {
+      attachmentEditor, extension, onUndoDelete, onDownload
+    } = this.state;
+
+    const updateTime = new Date(attachment.updated_at);
+    updateTime.setTime(updateTime.getTime() + (15 * 60 * 1000));
+
+    const hasPop = false;
+    const fetchNeeded = false;
+    const fetchId = attachment.id;
+
+    const previewImg = previewAttachmentImage(attachment);
+    const isEditing = attachment.aasm_state === 'oo_editing' && new Date().getTime() < updateTime;
+
+    const docType = this.documentType(attachment.filename);
+    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
+    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
+
+    if (attachment.is_deleted) {
+      return (
+        <div>
+          <Row>
+            <Col md={1} />
+            <Col md={9}>
+              <strike>{attachment.filename}</strike>
+            </Col>
+            <Col md={2}>
+              <Button
+                bsSize="xsmall"
+                bsStyle="danger"
+                className="button-right"
+                onClick={() => onUndoDelete(attachment)}
+              >
+                <i className="fa fa-undo" aria-hidden="true" />
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <Row>
+          <Col md={1}>
+            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
+              <div className="preview" style={{ width: '60px', height: '60px' }} >
+                <ImageModal
+                  imageStyle={imageStyle}
+                  hasPop={hasPop}
+                  previewObject={{
+                    src: previewImg
+                  }}
+                  popObject={{
+                    title: attachment.filename,
+                    src: previewImg,
+                    fetchNeeded,
+                    fetchId
+                  }}
+                />
+              </div>
+            </div>
+          </Col>
+          <Col md={9}>
+            {attachment.filename}
+          </Col>
+          <Col md={2}>
+            {this.renderRemoveAttachmentButton(attachment)}
+            <OverlayTrigger placement="top" overlay={downloadTooltip} >
+              <Button
+                bsSize="xsmall"
+                className="button-right"
+                bsStyle="primary"
+                onClick={() => onDownload(attachment)}
+              >
+                <i className="fa fa-download" aria-hidden="true" />
+              </Button>
+            </OverlayTrigger>
+            <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))} >
+              <Button
+                style={{ display: styleEditorBtn }}
+                bsSize="xsmall"
+                className="button-right"
+                bsStyle="success"
+                disabled={editDisable}
+                onClick={() => this.handleEdit(attachment)}
+              >
+                <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
+              </Button>
+            </OverlayTrigger>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+
+  renderAttachments() {
+    const { attachments } = this.props;
+    if (attachments && attachments.length > 0) {
+      return (
+        <ListGroup>
+          {attachments.map(attachment => (
+            <ListGroupItem key={attachment.id}>
+              {this.renderListGroupItem(attachment)}
+            </ListGroupItem>
+            ))}
+        </ListGroup>
+      );
+    }
+    return (
+      <div>
+        There are currently no Datasets.<br />
+      </div>
+    );
+  }
+
+  renderDropzone() {
+    const { onDrop } = this.state;
+
+    return (
+      <div className={`research-plan-dropzone-${this.props.readOnly ? 'disable' : 'enable'}`}>
+        <Dropzone
+          onDrop={files => onDrop(files)}
+          className="zone"
+        >
+          Drop Files, or Click to Select.
+        </Dropzone>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col md={12}>
+          <FormGroup>
+            <ControlLabel>Files</ControlLabel>
+            {this.renderAttachments()}
+            {this.renderDropzone()}
+          </FormGroup>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ResearchPlanDetailsAttachments.propTypes = {
+  attachments: PropTypes.array,
+  onDrop: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onUndoDelete: PropTypes.func.isRequired,
+  onDownload: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool.isRequired
+};
+
+ResearchPlanDetailsAttachments.defaultProps = {
+  attachments: []
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js b/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
new file mode 100644
index 000000000..cc907166a
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ControlLabel, Row, Col } from 'react-bootstrap';
+import ResearchPlanDetailsAddField from './ResearchPlanDetailsAddField';
+import ResearchPlanDetailsDropTarget from './ResearchPlanDetailsDropTarget';
+import Field from './ResearchPlanDetailsField';
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class ResearchPlanDetailsBody extends Component {
+  render() {
+    const {
+      body, disabled, onChange, onDrop, onAdd, onDelete, onExport, update, edit, isNew,
+      copyableFields, onCopyToMetadata
+    } = this.props;
+
+    let tableIndex = 0;
+    const fields = body.map((field, index) => {
+      const item = (<Field
+        key={field.id}
+        field={field}
+        index={index}
+        disabled={disabled}
+        onChange={onChange.bind(this)}
+        onDrop={onDrop.bind(this)}
+        onDelete={onDelete.bind(this)}
+        onExport={onExport.bind(this)}
+        onCopyToMetadata={onCopyToMetadata.bind(this)}
+        update={update}
+        edit={edit}
+        tableIndex={tableIndex}
+        isNew={isNew}
+        copyableFields={copyableFields}
+      />);
+
+      if (field.type === 'table') tableIndex++;
+
+      return item;
+    });
+
+    let className = 'research-plan-body';
+    let bodyFooter;
+    if (edit) {
+      bodyFooter = (
+        <Row>
+          <Col md={12}>
+            <ResearchPlanDetailsDropTarget index={fields.length} />
+            <div>
+              <ControlLabel>Add field</ControlLabel>
+              <div>
+                <ResearchPlanDetailsAddField onAdd={onAdd} />
+              </div>
+            </div>
+          </Col>
+        </Row>
+      );
+    } else {
+      className += ' static';
+    }
+
+    return (
+      <div className={className}>
+        {fields}
+        {bodyFooter}
+      </div>
+    );
+  }
+}
+
+ResearchPlanDetailsBody.propTypes = {
+  body: PropTypes.array,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onDrop: PropTypes.func,
+  onDelete: PropTypes.func,
+  onExport: PropTypes.func,
+  onCopyToMetadata: PropTypes.func,
+  update: PropTypes.bool,
+  edit: PropTypes.bool,
+  isNew: PropTypes.bool,
+  copyableFields: PropTypes.arrayOf(PropTypes.object)
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js b/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
new file mode 100644
index 000000000..926760e31
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
@@ -0,0 +1,434 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { PanelGroup, Panel, Tooltip, Button, OverlayTrigger, SplitButton, ButtonGroup, MenuItem } from 'react-bootstrap';
+import Container from 'src/models/Container';
+import ContainerComponent from 'src/components/container/ContainerComponent';
+import QuillViewer from 'src/components/QuillViewer';
+import ImageModal from 'src/components/common/ImageModal';
+import { instrumentText } from 'src/utilities/ElementUtils';
+import { previewContainerImage } from 'src/utilities/imageHelper';
+import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import SpectraActions from 'src/stores/alt/actions/SpectraActions';
+import LoadingActions from 'src/stores/alt/actions/LoadingActions';
+import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
+import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
+
+import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
+
+import TextTemplateActions from '../actions/TextTemplateActions';
+
+const SpectraEditorBtn = ({
+  element, spcInfos, hasJcamp, hasChemSpectra,
+  toggleSpectraModal, confirmRegenerate,
+  toggleNMRDisplayerModal, hasNMRium,
+}) => (
+  <span>
+  <OverlayTrigger
+    placement="bottom"
+    delayShow={500}
+    overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
+  >{spcInfos.length > 0 ? (
+    <ButtonGroup className="button-right">
+      <SplitButton
+        id="spectra-editor-split-button"
+        pullRight
+        bsStyle="info"
+        bsSize="xsmall"
+        title={<i className="fa fa-area-chart" />}
+        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+        onClick={toggleSpectraModal}
+        disabled={!(spcInfos.length > 0) || !hasChemSpectra}
+      >
+        <MenuItem
+            id="regenerate-spectra"
+            key="regenerate-spectra"
+            onSelect={(eventKey, event) => {
+              event.stopPropagation();
+              confirmRegenerate(event);
+            }}
+            disabled={!hasJcamp || !element.can_update}
+          >
+            <i className="fa fa-refresh" /> Reprocess
+          </MenuItem>
+        </SplitButton>
+      </ButtonGroup>
+      ) : (
+        <Button
+          bsStyle="warning"
+          bsSize="xsmall"
+          className="button-right"
+          onClick={confirmRegenerate}
+          disabled={!hasJcamp || !element.can_update || !hasChemSpectra}
+        >
+          <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
+      </Button>
+    )}
+    </OverlayTrigger>
+    {
+      hasNMRium ? (
+        <OverlayTrigger
+          placement="top"
+          delayShow={500}
+          overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
+        >
+          <ButtonGroup className="button-right">
+            <Button
+              id="spectra-editor-split-button"
+              pullRight
+              bsStyle="info"
+              bsSize="xsmall"
+              onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+              onClick={toggleNMRDisplayerModal}
+              disabled={!hasJcamp}
+            >
+              <i className="fa fa-bar-chart"/>
+            </Button>
+          </ButtonGroup>
+        </OverlayTrigger>
+      ) : null
+    }
+  </span>
+);
+
+
+SpectraEditorBtn.propTypes = {
+  element: PropTypes.object,
+  hasJcamp: PropTypes.bool,
+  spcInfos: PropTypes.array,
+  hasChemSpectra: PropTypes.bool,
+  toggleSpectraModal: PropTypes.func.isRequired,
+  confirmRegenerate: PropTypes.func.isRequired,
+  toggleNMRDisplayerModal: PropTypes.func.isRequired,
+  hasNMRium: PropTypes.bool,
+};
+
+SpectraEditorBtn.defaultProps = {
+  hasJcamp: false,
+  spcInfos: PropTypes.array,
+  element: {},
+  hasChemSpectra: false,
+  hasNMRium: false,
+};
+
+export default class ResearchPlanDetailsContainers extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeContainer: 0
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSpChange = this.handleSpChange.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.handleUndo = this.handleUndo.bind(this);
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+  }
+
+  componentDidMount() {
+    TextTemplateActions.fetchTextTemplates('researchPlan');
+  }
+
+  handleChange() {
+    const { researchPlan } = this.props;
+    this.props.parent.handleResearchPlanChange(researchPlan);
+  }
+
+  handleSpChange(researchPlan, cb) {
+    this.props.parent.handleResearchPlanChange(researchPlan);
+    cb();
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({ activeContainer: key });
+  }
+
+  handleRemove(container) {
+    const { researchPlan } = this.props;
+    container.is_deleted = true;
+    this.props.parent.handleResearchPlanChange(researchPlan);
+  }
+
+  handleUndo(container) {
+    const { researchPlan } = this.props;
+    container.is_deleted = false;
+    this.props.parent.handleResearchPlanChange(researchPlan);
+  }
+
+  handleAdd() {
+    const { researchPlan } = this.props;
+    const container = Container.buildEmpty();
+    container.container_type = 'analysis';
+    container.extended_metadata.content = { ops: [{ insert: '' }] };
+
+    if (researchPlan.container.children.length === 0) {
+      const analyses = Container.buildEmpty();
+      analyses.container_type = 'analyses';
+      researchPlan.container.children.push(analyses);
+    }
+
+    researchPlan.container.children.filter(element => (
+      ~element.container_type.indexOf('analyses')
+    ))[0].children.push(container);
+
+    const newKey = researchPlan.container.children.filter(element => (
+      ~element.container_type.indexOf('analyses')
+    ))[0].children.length - 1;
+
+    this.handleAccordionOpen(newKey);
+    this.props.parent.handleResearchPlanChange(researchPlan);
+  }
+
+  headerBtnGroup(container, readOnly) {
+    const { researchPlan } = this.props;
+    const jcampIds = JcampIds(container);
+    const hasJcamp = jcampIds.orig.length > 0;
+    const confirmRegenerate = (e) => {
+      e.stopPropagation();
+      if (confirm('Regenerate spectra?')) {
+        LoadingActions.start();
+        SpectraActions.Regenerate(jcampIds, this.handleChange);
+      }
+    };
+    const spcInfos = BuildSpcInfos(researchPlan, container);
+    const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
+    const toggleSpectraModal = (e) => {
+      e.stopPropagation();
+      SpectraActions.ToggleModal();
+      SpectraActions.LoadSpectra.defer(spcInfos);
+    };
+
+    //process open NMRium
+    const toggleNMRDisplayerModal = (e) => {
+      const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(researchPlan, container);
+      e.stopPropagation();
+      SpectraActions.ToggleModalNMRDisplayer();
+      SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
+    }
+
+    const { chmos } = UserStore.getState();
+    const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
+
+    return (
+      <div className="upper-btn">
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          className="button-right"
+          disabled={readOnly}
+          onClick={() => this.handleRemove(container)}
+        >
+          <i className="fa fa-trash" />
+        </Button>
+        <SpectraEditorBtn
+          element={researchPlan}
+          hasJcamp={hasJcamp}
+          spcInfos={spcInfos}
+          hasChemSpectra={hasChemSpectra}
+          toggleSpectraModal={toggleSpectraModal}
+          confirmRegenerate={confirmRegenerate}
+          toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+          hasNMRium={hasNMRium}
+        />
+      </div>
+    );
+  }
+
+  addButton() {
+    const { readOnly } = this.props;
+    if (!readOnly) {
+      return (
+        <Button
+          className="button-right"
+          bsSize="xsmall"
+          bsStyle="success"
+          onClick={this.handleAdd}
+        >
+          Add analysis
+        </Button>
+      );
+    }
+
+    return (<span />);
+  }
+
+  render() {
+    const { researchPlan, readOnly } = this.props;
+    const { activeContainer } = this.state;
+
+    const containerHeader = (container) => {
+      let kind = container.extended_metadata.kind || '';
+      kind = (kind.split('|')[1] || kind).trim();
+      const insText = instrumentText(container);
+      const previewImg = previewContainerImage(container);
+      const status = container.extended_metadata.status || '';
+      const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
+      const contentOneLine = {
+        ops: content.ops.map((x) => {
+          const c = Object.assign({}, x);
+          if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
+          return c;
+        }),
+      };
+      let hasPop = true;
+      let fetchNeeded = false;
+      let fetchId = 0;
+      if (previewImg.startsWith('data:image')) {
+        fetchNeeded = true;
+        fetchId = container.preview_img.id;
+      } else {
+        hasPop = false;
+      }
+
+      return (
+        <div className="analysis-header order" style={{ width: '100%' }}>
+          <div className="preview">
+            <ImageModal
+              hasPop={hasPop}
+              previewObject={{
+                src: previewImg
+              }}
+              popObject={{
+                title: container.name,
+                src: previewImg,
+                fetchNeeded,
+                fetchId
+              }}
+            />
+          </div>
+          <div className="abstract">
+            {
+              this.headerBtnGroup(container, readOnly)
+            }
+            <div className="lower-text">
+              <div className="main-title">{container.name}</div>
+              <div className="sub-title">Type: {kind}</div>
+              <div className="sub-title">Status: {status} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}</div>
+
+              <div className="desc sub-title">
+                <span style={{ float: 'left', marginRight: '5px' }}>
+                  Content:
+                </span>
+                <QuillViewer value={contentOneLine} preview />
+              </div>
+
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    const containerHeaderDeleted = (container) => {
+      const kind = container.extended_metadata.kind && container.extended_metadata.kind !== '';
+      const titleKind = kind ? (` - Type: ${(container.extended_metadata.kind.split('|')[1] || container.extended_metadata.kind).trim()}`) : '';
+
+      const status = container.extended_metadata.status && container.extended_metadata.status !== '';
+      const titleStatus = status ? (` - Status: ${container.extended_metadata.status}`) : '';
+
+      return (
+        <div style={{ width: '100%' }}>
+          <strike>
+            {container.name}
+            {titleKind}
+            {titleStatus}
+          </strike>
+          <Button
+            className="pull-right"
+            bsSize="xsmall"
+            bsStyle="danger"
+            onClick={() => this.handleUndo(container)}
+          >
+            <i className="fa fa-undo" />
+          </Button>
+        </div>
+      );
+    };
+
+    if (researchPlan.container != null && researchPlan.container.children) {
+      const analysesContainer = researchPlan.container.children.filter(element => (
+        ~element.container_type.indexOf('analyses')
+      ));
+
+      if (analysesContainer.length === 1 && analysesContainer[0].children.length > 0) {
+        return (
+          <div>
+            <div style={{ marginBottom: '10px' }}>
+              &nbsp;{this.addButton()}
+            </div>
+            <PanelGroup id="research_plan-analyses-panel" defaultActiveKey={0} activeKey={activeContainer} onSelect={this.handleAccordionOpen} accordion>
+              {analysesContainer[0].children.map((container, key) => {
+                if (container.is_deleted) {
+                  return (
+                    <Panel
+                      eventKey={key}
+                      key={`research_plan_container_deleted_${container.id}`}
+                    >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                    </Panel>
+                  );
+                }
+
+                return (
+                  <Panel
+                    eventKey={key}
+                    key={`research_plan_container_${container.id}`}
+                  >
+                    <Panel.Heading>
+                      <Panel.Title toggle>
+                        {containerHeader(container)}
+                      </Panel.Title>
+                    </Panel.Heading>
+                    <Panel.Body collapsible>
+                      <ContainerComponent
+                        templateType="researchPlan"
+                        readOnly={readOnly}
+                        disabled={readOnly}
+                        container={container}
+                        onChange={this.handleChange}
+                      />
+                      <ViewSpectra
+                        sample={this.props.researchPlan}
+                        handleSampleChanged={this.handleSpChange}
+                        handleSubmit={this.props.handleSubmit}
+                      />
+                      <NMRiumDisplayer
+                        sample={this.props.researchPlan}
+                        handleSampleChanged={this.handleSpChange}
+                        handleSubmit={this.props.handleSubmit}
+                      />
+                    </Panel.Body>
+                  </Panel>
+                );
+              })}
+            </PanelGroup>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          style={{ marginBottom: '10px' }}
+          className="noAnalyses-warning"
+        >
+          There are currently no Analyses.
+          {this.addButton()}
+        </div>
+      );
+    }
+
+    return (
+      <div className="noAnalyses-warning">
+        There are currently no Analyses.
+      </div>
+    );
+  }
+}
+
+ResearchPlanDetailsContainers.propTypes = {
+  researchPlan: PropTypes.object.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  parent: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js b/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
new file mode 100644
index 000000000..8cb35055a
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+
+const spec = {
+  beginDrag(props) {
+    return {
+      index: props.index
+    };
+  },
+  endDrag(props, monitor) {
+    const target = monitor.getDropResult();
+    if (target) {
+      props.onDrop(props.index, target.index);
+    }
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+class ResearchPlanDetailsDragSource extends Component {
+  render() {
+    const { connectDragSource, index } = this.props;
+
+    return connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
+  }
+}
+
+export default
+DragSource(DragDropItemTypes.RESEARCH_PLAN_FIELD, spec, collect)(ResearchPlanDetailsDragSource);
+
+ResearchPlanDetailsDragSource.propTypes = {
+  index: PropTypes.number,
+  onChange: PropTypes.func,
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js b/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
new file mode 100644
index 000000000..2c83e940b
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from 'src/components/DragDropItemTypes';
+
+const spec = {
+  drop(props) {
+    return {
+      index: props.index
+    };
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+
+class ResearchPlanDetailsDropTarget extends Component {
+  render() {
+    const {
+      index, connectDropTarget, isOver, canDrop
+    } = this.props;
+
+    let className = 'research-plan-field-drop-target';
+
+    if (isOver) {
+      className += ' is-over';
+    }
+    if (canDrop) {
+      className += ' can-drop';
+    }
+
+    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
+  }
+}
+
+export default
+DropTarget(DragDropItemTypes.RESEARCH_PLAN_FIELD, spec, collect)(ResearchPlanDetailsDropTarget);
+
+ResearchPlanDetailsDropTarget.propTypes = {
+  index: PropTypes.number
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsField.js b/app/packs/src/components/research_plan/ResearchPlanDetailsField.js
new file mode 100644
index 000000000..f63bb6668
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsField.js
@@ -0,0 +1,198 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonGroup, Row, Col, ControlLabel, Tooltip, OverlayTrigger, DropdownButton, MenuItem } from 'react-bootstrap';
+import ResearchPlanDetailsDragSource from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsDragSource';
+import ResearchPlanDetailsDropTarget from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsDropTarget';
+import ResearchPlanDetailsFieldRichText from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldRichText';
+import ResearchPlanDetailsFieldKetcher from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldKetcher';
+import ResearchPlanDetailsFieldImage from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage';
+import ResearchPlanDetailsFieldTable from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTable';
+import ResearchPlanDetailsFieldSample from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldSample';
+import ResearchPlanDetailsFieldReaction from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldReaction';
+
+export default class ResearchPlanDetailsField extends Component {
+  render() {
+    const {
+      field, index, disabled, onChange, onDrop, onDelete, onExport, update, edit, tableIndex,
+      onCopyToMetadata, isNew, copyableFields
+    } = this.props;
+    let label;
+    let component;
+    const metadataTooltipText = 'Copy field content to Metadata';
+    switch (field.type) {
+      case 'richtext':
+        label = field?.title;
+        component =
+          (<ResearchPlanDetailsFieldRichText
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            edit={edit}
+          />);
+        break;
+      case 'ketcher':
+        label = 'Ketcher schema';
+        component =
+          (<ResearchPlanDetailsFieldKetcher
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            edit={edit}
+          />);
+        break;
+      case 'image':
+        label = 'Image';
+        component =
+          (<ResearchPlanDetailsFieldImage
+            attachments={this.props.attachments}
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            researchPlan={this.props.researchPlan}
+            edit={edit}/>);
+        break;
+      case 'table':
+        field.value.columns.forEach((item) => {
+          item.cellEditor = 'agTextCellEditor';
+          return item;
+        });
+        label = 'Table';
+        component =
+          (<ResearchPlanDetailsFieldTable
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            onExport={onExport}
+            update={update}
+            edit={edit}
+            tableIndex={tableIndex}
+          />);
+        break;
+      case 'sample':
+        label = 'Sample';
+        component =
+          (<ResearchPlanDetailsFieldSample
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            edit={edit}
+          />);
+        break;
+      case 'reaction':
+        label = 'Reaction';
+        component =
+          (<ResearchPlanDetailsFieldReaction
+            key={field.id}
+            field={field}
+            index={index}
+            disabled={disabled}
+            onChange={onChange.bind(this)}
+            edit={edit}
+          />);
+        break;
+      default:
+        label = '';
+        component = <div />;
+    }
+
+    let dropTarget;
+    let fieldHeader;
+    let copyToMetadataButton = '';
+    let className = 'research-plan-field';
+    if (edit) {
+      dropTarget = (
+        <Col md={12}>
+          <ResearchPlanDetailsDropTarget index={index} />
+        </Col>
+      );
+
+      if (field.type === 'richtext') {
+        copyToMetadataButton = (
+          <OverlayTrigger
+            placement="top"
+            delayShow={500}
+            overlay={<Tooltip id="metadataTooltip">{metadataTooltipText}</Tooltip>}
+          >
+            <ButtonGroup className="pull-right">
+              <DropdownButton
+                id="copyMetadataButton"
+                title=""
+                className="fa fa-laptop"
+                bsStyle="info"
+                bsSize="xsmall"
+                pullRight
+                disabled={isNew}
+              >
+                <li role="presentation" className="">Copy to Metadata field:</li>
+                <li role="separator" className="divider" />
+                {
+                  copyableFields.map(element => (
+                    <MenuItem
+                      key={element.fieldName}
+                      onClick={() => onCopyToMetadata(field.id, element.fieldName)}
+                    >
+                      {element.title}
+                    </MenuItem>
+                  ))
+                }
+              </DropdownButton>
+            </ButtonGroup>
+          </OverlayTrigger>
+        );
+      }
+
+      fieldHeader = (
+        <div className="research-plan-field-header">
+          {/* TODO: make label editable */}
+          <ControlLabel>{label}</ControlLabel>
+          <Button className="pull-right" bsStyle="danger" bsSize="xsmall" onClick={() => onDelete(field.id,this.props.attachments )} data-cy="researchplan-item-delete">
+            <i className="fa fa-times" />
+          </Button>
+          {copyToMetadataButton}
+          <ResearchPlanDetailsDragSource index={index} onDrop={onDrop.bind(this)} />
+        </div>
+      );
+    } else {
+      className += ' static';
+    }
+
+    return (
+      <Row>
+        {dropTarget}
+        <Col md={12}>
+          <div className={className}>
+            {fieldHeader}
+            {component}
+          </div>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ResearchPlanDetailsField.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onDrop: PropTypes.func,
+  onDelete: PropTypes.func,
+  onExport: PropTypes.func,
+  onCopyToMetadata: PropTypes.func,
+  isNew: PropTypes.bool,
+  copyableFields: PropTypes.arrayOf(PropTypes.object),
+  update: PropTypes.bool,
+  edit: PropTypes.bool,
+  attachments: PropTypes.array
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
new file mode 100644
index 000000000..ce7cf9ab8
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+import { FormControl, FormGroup, InputGroup } from 'react-bootstrap';
+import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
+
+export default class ResearchPlanDetailsFieldImage extends Component {
+  handleDrop(files) {
+    const { field, onChange } = this.props;
+    const imageFile = files[0];
+    const replace = field.value.public_name;
+
+    // upload new image
+    ResearchPlansFetcher.updateImageFile(imageFile, replace).then((value) => {
+      // update research plan
+      onChange(value, field.id);
+    });
+  }
+
+  handleResizeChange(event) {
+    const { field, onChange } = this.props;
+    field.value.zoom = event.target.value;
+    onChange(field.value, field.id);
+  }
+
+  renderEdit() {
+    const { field } = this.props;
+    let content;
+    if (field.value.public_name) {
+      const src = `/images/research_plans/${field.value.public_name}`;
+      const style = (field.value.zoom == null || typeof field.value.zoom === 'undefined'
+      || field.value.width === '') ? { width: 'unset' } : { width: `${field.value.zoom}%` };
+      content = (
+        <div className="image-container">
+          <img style={style} src={src} alt={field.value.file_name} />
+        </div>
+      );
+    } else {
+      content = <p>Drop Files, or Click to Select.</p>;
+    }
+    return (
+      <div>
+        <FormGroup style={{ width: '30%' }}>
+          <InputGroup>
+            <InputGroup.Addon>Zoom</InputGroup.Addon>
+            <FormControl
+              type="number"
+              max="100"
+              min="1"
+              placeholder="image zoom"
+              defaultValue={field.value.zoom}
+              onChange={event => this.handleResizeChange(event)}
+            />
+            <InputGroup.Addon>%</InputGroup.Addon>
+          </InputGroup>
+        </FormGroup>
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          onDrop={files => this.handleDrop(files)}
+          className="dropzone"
+        >
+          {content}
+        </Dropzone>
+      </div>
+    );
+  }
+
+  renderStatic() {
+    const { field } = this.props;
+    if (typeof (field.value.public_name) === 'undefined'
+    || field.value.public_name === null) {
+      return (
+        <div />
+      );
+    }
+    const src = `/images/research_plans/${field.value.public_name}`;
+    const style = (field.value.zoom == null || typeof field.value.zoom === 'undefined'
+    || field.value.width === '') ? { width: 'unset' } : { width: `${field.value.zoom}%` };
+
+    return (
+      <div className="image-container">
+        <img style={style} src={src} alt={field.value.file_name} />
+      </div>
+    );
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldImage.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
new file mode 100644
index 000000000..aaf335cbe
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Glyphicon } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
+import StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';
+
+export default class ResearchPlanDetailsFieldKetcher extends Component {
+  constructor(props) {
+    super(props);
+    const {
+      field, index, disabled, onChange
+    } = props;
+    this.state = {
+      field,
+      index,
+      disabled,
+      onChange,
+      showStructureEditor: false,
+      loadingMolecule: false,
+    };
+  }
+
+  showStructureEditor() {
+    this.setState({
+      showStructureEditor: true
+    });
+  }
+
+  hideStructureEditor() {
+    this.setState({
+      showStructureEditor: false
+    });
+  }
+
+  handleStructureEditorSave(sdf_file, svg_file, config = null) {
+    let { field, onChange } = this.state;
+
+    field.value = {
+      sdf_file,
+      svg_file
+    };
+
+    const smiles = config ? config.smiles : null;
+
+    this.setState({ loadingMolecule: true });
+
+    const isChemdraw = !!smiles;
+
+    ResearchPlansFetcher.updateSVGFile(svg_file, isChemdraw).then((json) => {
+      field.value.svg_file = json.svg_path;
+      this.setState({
+        field,
+        loadingMolecule: false
+      });
+      onChange(field.value, field.id);
+      this.hideStructureEditor();
+    });
+  }
+
+  handleStructureEditorCancel() {
+    this.hideStructureEditor();
+  }
+
+  renderStructureEditorModal(field) {
+    const { showStructureEditor } = this.state;
+    const molfile = field.value.sdf_file;
+
+    return (
+      <StructureEditorModal
+        key={field.id}
+        showModal={showStructureEditor}
+        onSave={this.handleStructureEditorSave.bind(this)}
+        onCancel={this.handleStructureEditorCancel.bind(this)}
+        molfile={molfile}
+      />
+    );
+  }
+
+  renderEdit() {
+    const { field } = this.state;
+    let className;
+    let svgPath;
+    if (field.value.svg_file) {
+      className = 'svg-container';
+      svgPath = `/images/research_plans/${field.value.svg_file}`;
+    } else {
+      className = 'svg-container-empty';
+      svgPath = '/images/wild_card/no_image_180.svg';
+    }
+    return (
+      <div className={className} onClick={this.showStructureEditor.bind(this)}>
+        <Glyphicon className="pull-right" glyph="pencil" />
+        <SVG key={svgPath} src={svgPath} className="molecule-mid" />
+        {this.renderStructureEditorModal(field)}
+      </div>
+    );
+  }
+
+  renderStatic() {
+    const { field } = this.props;
+    if (typeof (field.value.svg_file) === 'undefined'
+      || field.value.svg_file === null) {
+      return (
+        <div />
+      );
+    }
+    const svgPath = `/images/research_plans/${field.value.svg_file}`;
+    return (
+      <div className="image-container">
+        <img src={svgPath} alt="" />
+      </div>
+    );
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldKetcher.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
new file mode 100644
index 000000000..50df42b92
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../DragDropItemTypes';
+import ElementActions from '../actions/ElementActions';
+import { UrlSilentNavigation } from '../utils/ElementUtils';
+import ReactionsFetcher from '../fetchers/ReactionsFetcher';
+
+const spec = {
+  drop(props, monitor) {
+    const { field, onChange } = props;
+    onChange({ reaction_id: monitor.getItem().element.id }, field.id);
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+const hasAuth = (id) => {
+  if (typeof id === 'string' && id.includes('error')) return false; return true;
+};
+
+const noAuth = el => (
+  <div className="research-plan-no-auth">
+    <h4>{el.id.split(':')[2]}&nbsp;<i className="fa fa-eye-slash" aria-hidden="true" /></h4>
+  </div>
+);
+
+class ResearchPlanDetailsFieldReaction extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      idle: true,
+      reaction: {
+        id: null
+      }
+    };
+  }
+
+  componentDidMount() {
+    const { field } = this.props;
+    if (field && field.value && field.value.reaction_id && hasAuth(field.value.reaction_id)) {
+      this.fetch();
+    }
+  }
+
+  componentDidUpdate() {
+    const { field } = this.props;
+    const { idle, reaction } = this.state;
+    if (idle && field.value.reaction_id !== reaction.id && hasAuth(reaction.id)) {
+      this.setState({ idle: false }, this.fetch);
+    }
+  }
+
+  fetch() {
+    const { field } = this.props;
+    ReactionsFetcher.fetchById(field.value.reaction_id).then((reaction) => {
+      this.setState({ idle: true, reaction });
+    });
+  }
+
+  showReaction() {
+    const { reaction } = this.state;
+    UrlSilentNavigation(reaction);
+    ElementActions.fetchReactionById(reaction.id);
+  }
+
+  renderReaction(reaction) {
+    if (!hasAuth(reaction.id)) {
+      return noAuth(reaction);
+    }
+    const { edit } = this.props;
+    const title = reaction.title();
+    let link;
+    if (edit) {
+      link = (
+        <p className="float-left">
+          Reaction:
+          <a role="link" tabIndex={0} onClick={() => this.showReaction()} style={{ cursor: 'pointer' }}>
+            {title}
+          </a>
+        </p>
+      );
+    }
+    return (
+      <div className="research-plan-field-reaction">
+        {link}
+        <div className="image-container">
+          <img src={reaction.svgPath} alt={title} />
+          <p>{reaction.name}</p>
+        </div>
+      </div>
+    );
+  }
+
+  renderEdit() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const { reaction } = this.state;
+    if (!hasAuth(reaction.id)) {
+      return noAuth(reaction);
+    }
+    let className = 'drop-target';
+    if (isOver) className += ' is-over';
+    if (canDrop) className += ' can-drop';
+    return connectDropTarget(<div className={className}>{reaction.id ? this.renderReaction(reaction) : 'Drop reaction here.'}</div>);
+  }
+
+  renderStatic() {
+    const { reaction } = this.state;
+    return reaction.id ? this.renderReaction(reaction) : '';
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldReaction.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+};
+
+export
+default DropTarget(DragDropItemTypes.REACTION, spec, collect)(ResearchPlanDetailsFieldReaction);
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
new file mode 100644
index 000000000..04a5c85e5
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import QuillEditor from 'src/components/QuillEditor';
+import QuillViewer from 'src/components/QuillViewer';
+
+export default class ResearchPlanDetailsFieldRichText extends Component {
+
+  renderEdit() {
+    const {
+      field, disabled, onChange
+    } = this.props;
+
+    return (
+      <div className="quill-resize">
+        <QuillEditor
+          value={field.value}
+          height="100%"
+          onChange={value => onChange(value, field.id)}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+
+  renderStatic() {
+    const { field } = this.props;
+    return <QuillViewer value={field.value} />;
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldRichText.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+}
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
new file mode 100644
index 000000000..64ccc9be3
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../DragDropItemTypes';
+import ElementActions from '../actions/ElementActions';
+import { UrlSilentNavigation } from '../utils/ElementUtils';
+import SampleName from '../common/SampleName';
+import SamplesFetcher from '../fetchers/SamplesFetcher';
+
+const spec = {
+  drop(props, monitor) {
+    const { field, onChange } = props;
+    onChange({ sample_id: monitor.getItem().element.id }, field.id);
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+const hasAuth = (id) => {
+  if (typeof id === 'string' && id.includes('error')) return false; return true;
+};
+
+const noAuth = el => (
+  <div className="research-plan-no-auth">
+    <h4>{el.id.split(':')[2]}&nbsp;<i className="fa fa-eye-slash" aria-hidden="true" /></h4>
+  </div>
+);
+
+class ResearchPlanDetailsFieldSample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      idle: true,
+      sample: {
+        id: null
+      }
+    };
+  }
+
+  componentDidMount() {
+    const { field } = this.props;
+    if (field && field.value && field.value.sample_id && hasAuth(field.value.sample_id)) {
+      this.fetch();
+    }
+  }
+
+  componentDidUpdate() {
+    const { field } = this.props;
+    const { idle, sample } = this.state;
+    if (idle && field.value.sample_id !== sample.id && hasAuth(sample.id)) {
+      this.setState({ idle: false }, this.fetch);
+    }
+  }
+
+  fetch() {
+    const { field } = this.props;
+    SamplesFetcher.fetchById(field.value.sample_id).then((sample) => {
+      this.setState({ idle: true, sample });
+    });
+  }
+
+  showSample() {
+    const { sample } = this.state;
+    UrlSilentNavigation(sample);
+    ElementActions.fetchSampleById(sample.id);
+  }
+
+  // modified from sampleInfo in SampleDetails.js
+  renderSample(sample) {
+    if (!hasAuth(sample.id)) {
+      return noAuth(sample);
+    }
+    const { edit } = this.props;
+    const title = sample.title();
+    let link;
+    if (edit) {
+      link = (
+        <p>
+          Sample:
+          <a role="link" tabIndex={0} onClick={() => this.showSample()} style={{ cursor: 'pointer' }}>
+            {title}
+          </a>
+        </p>
+      );
+    }
+    return (
+      <div className="research-plan-field-image">
+        {link}
+        <div className="image-container">
+          <img src={sample.svgPath} alt={title} />
+          <SampleName sample={sample} />
+        </div>
+      </div>
+    );
+  }
+
+  renderEdit() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const { sample } = this.state;
+    if (!hasAuth(sample.id)) {
+      return noAuth(sample);
+    }
+    let className = 'drop-target';
+    if (isOver) className += ' is-over';
+    if (canDrop) className += ' can-drop';
+    return connectDropTarget(<div className={className}>{sample.id ? this.renderSample(sample) : 'Drop sample here.'}</div>);
+  }
+
+  renderStatic() {
+    const { sample } = this.state;
+    return sample.id ? this.renderSample(sample) : '';
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldSample.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+};
+
+export default DropTarget(DragDropItemTypes.SAMPLE, spec, collect)(ResearchPlanDetailsFieldSample);
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
new file mode 100644
index 000000000..2d3bda37d
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
@@ -0,0 +1,528 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Button } from 'react-bootstrap';
+import ResearchPlanDetailsFieldTableColumnNameModal from './ResearchPlanDetailsFieldTableColumnNameModal';
+import ResearchPlanDetailsFieldTableSchemasModal from './ResearchPlanDetailsFieldTableSchemasModal';
+import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
+import { AgGridReact } from 'ag-grid-react';
+import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
+import uniqueId from 'react-html-id';
+import CustomTextEditor from '../common/CustomTextEditor';
+
+// regexp to parse tap separated paste from the clipboard
+const defaultParsePaste = str => (
+  str.split(/\r\n|\n|\r/).map(row => row.split('\t'))
+);
+
+export default class ResearchPlanDetailsFieldTable extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      update: this.props.update,
+      columnNameModal: {
+        show: false,
+        colId: null
+      },
+      schemaModal: {
+        show: false
+      },
+      selection: {},
+      gridApi: {},
+      columnApi: {},
+      columnClicked: null,
+      rowClicked: null,
+      isDisable: true
+    };
+
+    uniqueId.enableUniqueIds(this)
+
+    this.ref = React.createRef();
+  }
+
+  componentDidUpdate() {
+    if (this.state.update !== this.props.update) {
+      this.setState({ update: this.props.update });
+    }
+  }
+
+  buildColumn(columnName) {
+    return {
+      key: columnName,
+      name: columnName,
+      editable: true,
+      resizable: true,
+      width: 200,
+      editor: CustomTextEditor
+    };
+  }
+
+  buildRow() {
+    return [];
+  }
+
+  handleColumnNameModalShow(action, colId) {
+    this.setState({
+      columnNameModal: {
+        show: true,
+        action,
+        colId
+      }
+    });
+  }
+
+  handleColumnNameModalSubmit(columnName) {
+    const { action, colId } = this.state.columnNameModal;
+
+    if (action === 'insert') {
+      this.handleColumnInsert(columnName);
+    } else if (action === 'rename') {
+      this.handleColumnRename(colId, columnName);
+    }
+
+    this.handleColumnNameModalHide();
+  }
+
+  handleColumnNameModalHide() {
+    this.setState({
+      columnNameModal: {
+        show: false,
+        action: null,
+        idx: null
+      }
+    });
+  }
+
+  handleColumnInsert(columnName) {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi } = this.state
+
+    let columnDefs = gridApi.getColumnDefs();
+    columnDefs.push({
+      headerName: columnName,
+      field: columnName,
+    });
+    gridApi.setColumnDefs(columnDefs);
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.columnStates = columnApi.getColumnState();
+
+    onChange(field.value, field.id);
+  }
+
+  handleColumnRename(colId, columnName) {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi } = this.state
+
+    let columnDefs = gridApi.getColumnDefs();
+    let columnChange = columnDefs.find(o => o.colId === colId);
+    columnChange.headerName = columnName;
+    gridApi.setColumnDefs(columnDefs);
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.columnStates = columnApi.getColumnState();
+
+    onChange(field.value, field.id);
+  }
+
+  handleColumnResize(columnIdx, width) {
+    const { field, onChange } = this.props;
+    field.value.columns[columnIdx]['width'] = width;
+    onChange(field.value, field.id);
+  }
+
+  handleColumnDelete(columnIdx) {
+    const { field, onChange } = this.props;
+    const columns = field.value.columns.slice();
+    columns.splice(columnIdx, 1);
+    field.value.columns = columns;
+    onChange(field.value, field.id);
+  }
+
+  handleRowInsert(rowIdx) {
+    const { field, onChange } = this.props;
+    field.value.rows.splice(rowIdx, 0, this.buildRow());
+    onChange(field.value, field.id);
+  }
+
+  handleRowDelete(rowIdx) {
+    const { field, onChange } = this.props;
+    field.value.rows.splice(rowIdx, 1);
+    onChange(field.value, field.id);
+  }
+
+  handleSchemaModalShow() {
+    ResearchPlansFetcher.fetchTableSchemas().then((json) => {
+      this.setState({
+        schemaModal: {
+          show: true,
+          schemas: json['table_schemas']
+        }
+      });
+    });
+  }
+
+  handleSchemasModalSubmit(schemaName) {
+    ResearchPlansFetcher.createTableSchema(schemaName, this.props.field.value).then(() => {
+      this.handleSchemaModalShow();
+    });
+  }
+
+  handleSchemasModalHide() {
+    this.setState({
+      schemaModal: {
+        show: false
+      }
+    });
+  }
+
+  handleSchemasModalUse(schema) {
+    const { field, onChange } = this.props;
+
+    onChange(schema.value, field.id);
+    this.handleSchemasModalHide();
+  }
+
+  handleSchemasModalDelete(schema) {
+    ResearchPlansFetcher.deleteTableSchema(schema.id).then(() => {
+      this.handleSchemaModalShow();
+    });
+  }
+
+  rowGetter(idx) {
+    return this.props.field.value.rows[idx];
+  }
+
+
+  cellValueChanged = () => {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi } = this.state
+
+    let rowData = [];
+    gridApi.forEachNode(node => rowData.push(node.data));
+    field.value.rows = rowData
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.columnStates = columnApi.getColumnState();
+
+    onChange(field.value, field.id);
+  }
+
+  onGridReady = (params) => {
+    this.setState({
+      gridApi: params.api,
+      columnApi: params.columnApi
+    });
+
+    const { field } = this.props;
+    params.columnApi.setColumnState(field.value.columnStates);
+  }
+
+  onSaveGridColumnState(params) {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi } = this.state
+
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.columnStates = columnApi.getColumnState();
+
+    onChange(field.value, field.id);
+  }
+
+  onSaveGridRow() {
+    const { field, onChange } = this.props;
+    const { gridApi } = this.state
+
+    let rowData = [];
+    gridApi.forEachNode(node => rowData.push(node.data));
+    field.value.rows = rowData
+
+    onChange(field.value, field.id);
+  }
+
+  addNewColumn() {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi } = this.state
+
+    let columnDefs = gridApi.getColumnDefs();
+    let columnName = this.nextUniqueId();
+    columnDefs.push({
+      headerName: columnName,
+      field: columnName,
+    });
+    gridApi.setColumnDefs(columnDefs);
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.columnStates = columnApi.getColumnState();
+
+    onChange(field.value, field.id);
+  }
+
+  addNewRow() {
+    const { field, onChange } = this.props;
+    const { gridApi } = this.state
+
+    gridApi.applyTransaction({
+      add: [{}],
+    });
+
+    let rowData = [];
+    gridApi.forEachNode(node => rowData.push(node.data));
+    field.value.columns = gridApi.getColumnDefs();
+    field.value.rows = rowData
+
+    onChange(field.value, field.id);
+  }
+
+  removeThisRow() {
+    const { field, onChange } = this.props;
+    const { gridApi, rowClicked } = this.state
+    let rowData = [];
+    gridApi.forEachNodeAfterFilterAndSort(node => {
+      rowData.push(node.data);
+    });
+    gridApi.applyTransaction({ remove: [rowData[rowClicked]] });
+
+    rowData = rowData.filter(function (value, index, arr) {
+      return index !== rowClicked;
+    });
+    field.value.rows = rowData
+
+    onChange(field.value, field.id);
+  }
+
+  removeThisColumn() {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi, columnClicked } = this.state
+    if (columnClicked) {
+      let columnDefs = gridApi.getColumnDefs();
+      columnDefs = columnDefs.filter(function (value, index, arr) {
+        return value.colId !== columnClicked;
+      });
+
+      gridApi.setColumnDefs(columnDefs);
+      field.value.columns = gridApi.getColumnDefs();
+      field.value.columnStates = columnApi.getColumnState();
+
+      onChange(field.value, field.id);
+    }
+  }
+
+  onCellContextMenu(params) {
+    this.setState({ columnClicked: params.column.colId, rowClicked: params.rowIndex });
+  }
+
+  handleRenameClick() {
+    const { columnClicked } = this.state;
+    if (columnClicked) {
+      this.handleColumnNameModalShow('rename', columnClicked);
+    }
+  }
+
+  handlePaste(event) {
+    const { field, onChange } = this.props;
+    const { gridApi, columnApi, columnClicked, rowClicked } = this.state;
+    onChange(field.value, field.id);
+
+    navigator.clipboard.readText()
+      .then(data => {
+        let lines = data.split(/\n/);
+        let cellData = [];
+        lines.forEach(element => {
+          cellData.push(element.split('\t'));
+        });
+
+
+        let columns = columnApi.getAllColumns();
+        let rowData = [];
+        gridApi.forEachNodeAfterFilterAndSort(node => {
+          rowData.push(node.data);
+        });
+
+        let rowIndex = 0;
+        for (let i = 0; i < rowData.length; i++) {
+          let row = [];
+          let startUpdate = false;
+          if (i >= rowClicked) {
+            let columnIndex = 0;
+            for (let j = 0; j < columns.length; j++) {
+              const element = columns[j];
+              if (startUpdate || element.colId === columnClicked) {
+                startUpdate = true;
+                rowData[i][element.colId] = cellData[rowIndex][columnIndex];
+                columnIndex++;
+              }
+            }
+            rowIndex++;
+          }
+        }
+
+        gridApi.applyTransaction({
+          update: rowData,
+        });
+
+        field.value.rows = rowData
+        onChange(field.value, field.id);
+      })
+      .catch(err => {
+        console.error('Failed to read clipboard contents: ', err);
+      });
+  }
+
+  handleInsertColumnClick() {
+    const { columnClicked } = this.state;
+    if (columnClicked) {
+      this.handleColumnNameModalShow('insert', columnClicked);
+    }
+  }
+
+  onCellMouseOver() {
+    this.setState({ isDisable: false });
+  }
+
+  onCellMouseOut() {
+    this.setState({ isDisable: true });
+  }
+
+  renderEdit() {
+    const { field, onExport } = this.props;
+    const { rows, columns } = field.value;
+    const { columnNameModal, schemaModal, isDisable } = this.state;
+
+    let contextMenuId = this.nextUniqueId();
+    const defaultColDef = {
+      resizable: true,
+      rowDrag: true,
+      sortable: true,
+      editable: true,
+      cellEditor: 'agTextCellEditor',
+      cellClass: 'cell-figure',
+    };
+
+    return (
+      <div>
+        <div className='research-plan-table-grid'>
+          <div id='myGrid' className='ag-theme-alpine'>
+            <ContextMenuTrigger id={contextMenuId} disable={isDisable}>
+              <AgGridReact
+                defaultColDef={defaultColDef}
+                columnDefs={columns}
+                rowData={rows}
+                domLayout='autoHeight'
+                onGridReady={this.onGridReady}
+                onCellEditingStopped={this.cellValueChanged}
+                rowDragManaged={true}
+                animateRows={true}
+                singleClickEdit={true}
+                stopEditingWhenGridLosesFocus={true}
+                rowHeight='37'
+                onSortChanged={this.onSaveGridColumnState.bind(this)}
+                onColumnResized={this.onSaveGridColumnState.bind(this)}
+                onColumnMoved={this.onSaveGridColumnState.bind(this)}
+                onCellMouseOver={this.onCellMouseOver.bind(this)}
+                onCellMouseOut={this.onCellMouseOut.bind(this)}
+                onRowDragEnd={this.onSaveGridRow.bind(this)}
+                onCellContextMenu={this.onCellContextMenu.bind(this)}
+                enableMultiRowDragging={true}
+                rowSelection='multiple'
+                suppressDragLeaveHidesColumns={true}
+              />
+            </ContextMenuTrigger>
+            <ContextMenu id={contextMenuId}>
+              <MenuItem onClick={this.handlePaste.bind(this)}>
+                Paste
+            </MenuItem>
+              <MenuItem onClick={this.handleRenameClick.bind(this)}>
+                Rename column
+            </MenuItem>
+              <MenuItem divider />
+              <MenuItem onClick={this.handleInsertColumnClick.bind(this)}>
+                Add new column
+            </MenuItem>
+              <MenuItem onClick={this.addNewRow.bind(this)}>
+                Add new row
+            </MenuItem>
+              <MenuItem divider />
+              <MenuItem onClick={this.removeThisColumn.bind(this)}>
+                Remove this column
+            </MenuItem>
+              <MenuItem onClick={this.removeThisRow.bind(this)}>
+                Remove this row
+            </MenuItem>
+            </ContextMenu>
+          </div>
+        </div>
+
+        <div className='research-plan-table-toolbar'>
+          <Row>
+            <Col xs={3}>
+              <Button bsSize='xsmall' onClick={this.handleSchemaModalShow.bind(this)}>
+                Table schemas
+              </Button>
+            </Col>
+            <Col xs={3} xsOffset={6}>
+              <Button bsSize='xsmall' onClick={() => onExport(field)}>
+                Export as Excel
+              </Button>
+            </Col>
+          </Row>
+        </div>
+        <ResearchPlanDetailsFieldTableColumnNameModal
+          modal={columnNameModal}
+          onSubmit={this.handleColumnNameModalSubmit.bind(this)}
+          onHide={this.handleColumnNameModalHide.bind(this)}
+          columns={columns} />
+        <ResearchPlanDetailsFieldTableSchemasModal
+          modal={schemaModal}
+          onSubmit={this.handleSchemasModalSubmit.bind(this)}
+          onHide={this.handleSchemasModalHide.bind(this)}
+          onUse={this.handleSchemasModalUse.bind(this)}
+          onDelete={this.handleSchemasModalDelete.bind(this)} />
+      </div>
+    );
+  }
+
+  renderStatic() {
+    const { field } = this.props;
+    const { columns, rows } = field.value;
+
+    const th = columns.map((column) => {
+      return <th key={column.colId}>{column.headerName}</th>;
+    });
+
+    const tr = rows.map((row, index) => {
+      const td = columns.map((column) => {
+        return <td style={{ 'height': '37px' }} key={column.colId}>{row[column.colId]}</td>;
+      });
+      return (
+        <tr key={index}>
+          {td}
+        </tr>
+      );
+    });
+
+    return (
+      <table className='table table-bordered'>
+        <thead>
+          <tr>
+            {th}
+          </tr>
+        </thead>
+        <tbody>
+          {tr}
+        </tbody>
+      </table>
+    );
+  }
+
+  render() {
+    if (this.props.edit) {
+      return this.renderEdit();
+    }
+    return this.renderStatic();
+  }
+}
+
+ResearchPlanDetailsFieldTable.propTypes = {
+  field: PropTypes.object,
+  index: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  update: PropTypes.bool,
+  edit: PropTypes.bool
+};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
new file mode 100644
index 000000000..aaae8de46
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ButtonToolbar, Button, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
+
+class ResearchPlanDetailsFieldTableColumnNameModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columnNameValue: '',
+      columnNameError: ''
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      const { modal, columns } = this.props;
+
+      let columnNameValue = '';
+      if (modal.action === 'rename') {
+        columnNameValue = columns.find(o => o.colId === modal.colId).headerName;
+      }
+
+      this.setState({
+        columnNameValue,
+        columnNameError: ''
+      });
+    }
+  }
+
+  handleColumnNameChange(event) {
+    this.setState({ columnNameValue: event.target.value });
+  }
+
+  handleSubmit() {
+    const { columns, onSubmit } = this.props;
+    const { columnNameValue } = this.state;
+    const keys = columns.map(column => column.headerName);
+
+    if (!columnNameValue) {
+      this.setState({ columnNameError: 'Please give a column name.' });
+    } else if (keys.indexOf(columnNameValue) > -1) {
+      this.setState({ columnNameError: 'A column with this title already exists.' });
+    } else {
+      this.setState({ columnNameError: '', columnNameValue: '' });
+      onSubmit(columnNameValue);
+    }
+  }
+
+  render() {
+    const { modal, onHide } = this.props;
+    const { columnNameValue, columnNameError } = this.state;
+
+    let title;
+    if (modal.action === 'insert') {
+      title = 'Insert column';
+    } else if (modal.action === 'rename') {
+      title = 'Rename column';
+    }
+
+    const validationState = columnNameError ? 'error' : null;
+
+    return (
+      <Modal animation show={modal.show} onHide={onHide}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            {title}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body >
+          <div>
+            <FormGroup validationState={validationState}>
+              <ControlLabel>Column name</ControlLabel>
+              <FormControl
+                type="text"
+                value={columnNameValue}
+                onChange={this.handleColumnNameChange.bind(this)}
+              />
+              <HelpBlock>{columnNameError}</HelpBlock>
+            </FormGroup>
+          </div>
+          <div>
+            <ButtonToolbar>
+              <Button bsStyle="warning" onClick={onHide}>
+                Cancel
+              </Button>
+              <Button bsStyle="primary" onClick={this.handleSubmit.bind(this)}>
+                {title}
+              </Button>
+            </ButtonToolbar>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+ResearchPlanDetailsFieldTableColumnNameModal.propTypes = {
+  modal: PropTypes.object,
+  columnName: PropTypes.string,
+  onSubmit: PropTypes.func,
+  onHide: PropTypes.func,
+  columns: PropTypes.array
+};
+
+export default ResearchPlanDetailsFieldTableColumnNameModal;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
new file mode 100644
index 000000000..5a8cf7b9e
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Modal, Button, FormGroup, ControlLabel, FormControl, HelpBlock, InputGroup } from 'react-bootstrap';
+
+class ResearchPlanDetailsFieldTableSchemasModal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      schemaNameValue: '',
+      schemaNameError: ''
+    };
+  }
+
+  handleSchemaNameChange(event) {
+    this.setState({ schemaNameValue: event.target.value });
+  }
+
+  handleSubmit() {
+    const { onSubmit } = this.props;
+    const { schemaNameValue } = this.state;
+
+    if (!schemaNameValue) {
+      this.setState({ schemaNameError: 'Please give a schema name.' });
+    } else {
+      this.setState({ schemaNameError: '', schemaNameValue: '' });
+      onSubmit(schemaNameValue);
+    }
+  }
+
+  render() {
+    const {
+      modal, onHide, onUse, onDelete
+    } = this.props;
+    const { schemaNameValue, schemaNameError } = this.state;
+
+    let schemaTable = null;
+    if (modal.schemas) {
+      schemaTable = modal.schemas.map((schema, index) => {
+        return (
+          <tr key={index}>
+            <td>{schema.name}</td>
+            <td>
+              {schema.value.columns.map(column => column.headerName).join(', ')}
+            </td>
+            <td>
+              {schema.value.rows.length}
+            </td>
+            <td>
+              <Button bsStyle="danger" bsSize="xsmall" onClick={() => onDelete(schema)}>
+                Delete
+              </Button>
+              <Button bsStyle="warning" bsSize="xsmall" onClick={() => onUse(schema)}>
+                Use
+              </Button>
+            </td>
+          </tr>
+        );
+      });
+    }
+
+    return (
+      <Modal animation show={modal.show} onHide={onHide}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            Table schemas
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body >
+          <div className="research-plan-table-schema-modal-create">
+            <FormGroup validationState={schemaNameError ? 'error' : null}>
+              <ControlLabel>Save current schema</ControlLabel>
+              <InputGroup>
+                <FormControl
+                  type="text"
+                  value={schemaNameValue}
+                  onChange={this.handleSchemaNameChange.bind(this)}
+                />
+                <InputGroup.Button>
+                  <Button bsStyle="success" onClick={this.handleSubmit.bind(this)}>
+                    Save
+                  </Button>
+                </InputGroup.Button>
+              </InputGroup>
+              <HelpBlock>{schemaNameError}</HelpBlock>
+            </FormGroup>
+          </div>
+          <div className="research-plan-table-schema-modal-table">
+            <h4>Stored schemas</h4>
+            <Table>
+              <thead>
+                <tr>
+                  <th style={{ width: '20%' }}>Name</th>
+                  <th style={{ width: '40%' }}>Columns</th>
+                  <th style={{ width: '20%' }}># Rows</th>
+                  <th style={{ width: '20%' }} />
+                </tr>
+              </thead>
+              <tbody>
+                {schemaTable}
+              </tbody>
+            </Table>
+          </div>
+          <div>
+            <Button bsStyle="default" onClick={onHide}>
+              Close
+            </Button>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+ResearchPlanDetailsFieldTableSchemasModal.propTypes = {
+  modal: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onHide: PropTypes.func,
+  onUse: PropTypes.func,
+  onDelete: PropTypes.func
+};
+
+export default ResearchPlanDetailsFieldTableSchemasModal;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsName.js b/app/packs/src/components/research_plan/ResearchPlanDetailsName.js
new file mode 100644
index 000000000..c54a11dfd
--- /dev/null
+++ b/app/packs/src/components/research_plan/ResearchPlanDetailsName.js
@@ -0,0 +1,68 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ControlLabel, FormControl, FormGroup, Row, Col, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
+
+export default class ResearchPlanDetailsName extends Component {
+  renderCopyToMetadataButton() {
+    const { isNew, onCopyToMetadata } = this.props;
+    const metadataTooltipText = 'Copy Name to Metadata';
+    return (
+      <OverlayTrigger
+        placement="top"
+        delayShow={500}
+        overlay={<Tooltip id="metadataTooltip">{metadataTooltipText}</Tooltip>}
+      >
+        <Button
+          id="copyMetadataButton"
+          title=""
+          className="fa fa-laptop pull-right"
+          bsStyle="info"
+          bsSize="xsmall"
+          onClick={() => onCopyToMetadata(null, 'name')}
+          disabled={isNew}
+        />
+      </OverlayTrigger>
+    );
+  }
+
+  render() {
+    const {
+      value, disabled, onChange, edit
+    } = this.props;
+    if (edit) {
+      return (
+        <div className="research-plan-name">
+          <Row>
+            <Col lg={8}>
+              <FormGroup>
+                <ControlLabel>Name</ControlLabel>
+                { this.renderCopyToMetadataButton() }
+                <FormControl
+                  type="text"
+                  value={value || ''}
+                  onChange={event => onChange(event.target.value)}
+                  disabled={disabled}
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+        </div>
+      );
+    }
+    return (
+      <div className="research-plan-name static">
+        <h1>{value}</h1>
+      </div>
+    );
+  }
+}
+
+ResearchPlanDetailsName.propTypes = {
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  isNew: PropTypes.bool,
+  onChange: PropTypes.func,
+  edit: PropTypes.bool,
+  onCopyToMetadata: PropTypes.func
+};
diff --git a/app/packs/src/components/routes.js b/app/packs/src/components/routes.js
new file mode 100644
index 000000000..d5dab1471
--- /dev/null
+++ b/app/packs/src/components/routes.js
@@ -0,0 +1,118 @@
+import * as routesUtils from 'src/utilities/routesUtils';
+import { elementNames } from 'src/apps/generic/Utils';
+
+const routes = {
+  '/': 'root',
+  target: {
+    root() { Aviator.navigate('/collection/all'); }
+  },
+
+  '/collection': {
+    target: {
+      show: routesUtils.collectionShow,
+      showCollectionManagement: routesUtils.collectionShowCollectionManagement
+    },
+    '/management': 'showCollectionManagement',
+    '/:collectionID': 'show'
+  },
+
+  '/scollection': {
+    target: {
+      show: routesUtils.scollectionShow,
+      showCollectionManagement: routesUtils.collectionShowCollectionManagement
+    },
+    '/management': 'showCollectionManagement',
+    '/:collectionID': 'show'
+  },
+
+  '/metadata': {
+    target: {
+      showMetadata: routesUtils.metadataShowOrNew
+    },
+    '/': 'showMetadata'
+  },
+
+  '/report': {
+    target: {
+      showReport: routesUtils.reportShowReport
+    },
+    '/': 'showReport'
+  },
+
+  '/sample': {
+    target: {
+      showOrNew: routesUtils.sampleShowOrNew
+    },
+    '/:sampleID': 'showOrNew'
+  },
+
+  '/reaction': {
+    target: {
+      show: routesUtils.reactionShow,
+      showSample: routesUtils.reactionShowSample
+    },
+    '/:reactionID': 'show',
+    '/sample/:sampleID': 'showSample',
+  },
+  '/wellplate': {
+    target: {
+      showOrNew: routesUtils.wellplateShowOrNew,
+      showSample: routesUtils.wellplateShowSample
+    },
+    '/:wellplateID': 'showOrNew',
+    '/sample/:sampleID': 'showSample',
+  },
+  '/screen': {
+    target: {
+      showOrNew: routesUtils.screenShowOrNew
+    },
+    '/:screenID': 'showOrNew'
+  },
+  '/devicesAnalysis': {
+    target: {
+      create: routesUtils.devicesAnalysisCreate,
+      show: routesUtils.devicesAnalysisShow
+    },
+    '/new/:deviceId/:analysisType': 'create',
+    '/:analysisId': 'show',
+  },
+  '/device': {
+    target: {
+      show: routesUtils.deviceShow,
+      showDeviceManagement: routesUtils.deviceShowDeviceManagement,
+    },
+    '/management': 'showDeviceManagement',
+    '/:deviceId': 'show',
+  },
+  '/research_plan': {
+    target: {
+      showOrNew: routesUtils.researchPlanShowOrNew
+    },
+    '/:research_planID': 'showOrNew'
+  },
+  '/fwdRxnPrediction': {
+    target: {
+      showFwdRxnPrediction: routesUtils.predictionShowFwdRxn
+    },
+    '/': 'showFwdRxnPrediction'
+  },
+  '/genericEl': {
+    target: {
+      showOrNew: routesUtils.genericElShowOrNew
+    },
+    '/:genericElID': 'showOrNew'
+  }
+};
+
+elementNames(false).forEach((klass) => {
+  const item = {};
+  item['target'] = { showOrNew: routesUtils.genericElShowOrNew };
+  item[`/:${klass}ID`] = 'showOrNew';
+  routes[`/${klass}`] = item;
+});
+
+export default function() {
+  Aviator.root = '/mydb';
+  Aviator.pushStateEnabled = true;
+  Aviator.setRoutes(routes);
+}
diff --git a/app/packs/src/components/routesUtils.js b/app/packs/src/components/routesUtils.js
new file mode 100644
index 000000000..813d37319
--- /dev/null
+++ b/app/packs/src/components/routesUtils.js
@@ -0,0 +1,315 @@
+import UIStore from 'src/stores/alt/stores/UIStore';
+import CollectionStore from 'src/stores/alt/stores/CollectionStore';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import { elementNames } from 'src/apps/generic/Utils';
+
+const collectionShow = (e) => {
+  UIActions.showElements.defer();
+  UserActions.fetchCurrentUser();
+  const { profile } = UserStore.getState();
+  if (!profile) {
+    UserActions.fetchProfile();
+  }
+  const uiState = UIStore.getState();
+  const currentSearchSelection = uiState.currentSearchSelection;
+  const collectionId = e.params['collectionID'];
+  let collectionPromise = null;
+  if (collectionId === 'all') {
+    collectionPromise = CollectionStore.findAllCollection();
+  } else {
+    collectionPromise = CollectionStore.findById(collectionId);
+  }
+
+  collectionPromise.then((result) => {
+    const collection = result && result.collection;
+
+    if (currentSearchSelection) {
+      UIActions.selectCollectionWithoutUpdating(collection);
+      ElementActions.fetchBasedOnSearchSelectionAndCollection({
+        selection: currentSearchSelection,
+        collectionId: collection.id,
+        isSync: !!collection.is_sync_to_me });
+    } else {
+      UIActions.selectCollection(collection);
+    }
+
+    // if (!e.params['sampleID'] && !e.params['reactionID'] &&
+        // !e.params['wellplateID'] && !e.params['screenID']) {
+    UIActions.uncheckAllElements({ type: 'sample', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'reaction', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'wellplate', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'screen', range: 'all' });
+    elementNames(false).forEach((klass) => { UIActions.uncheckAllElements({ type: klass, range: 'all' }); });
+    // }
+  });
+};
+
+const collectionShowCollectionManagement = () => {
+  UIActions.showCollectionManagement();
+};
+
+const scollectionShow = (e) => {
+  UIActions.showElements();
+  UserActions.fetchCurrentUser();
+  const { profile } = UserStore.getState();
+  if (!profile) {
+    UserActions.fetchProfile();
+  }
+  const uiState = UIStore.getState();
+  const currentSearchSelection = uiState.currentSearchSelection;
+  const collectionId = e.params['collectionID'];
+  let collectionPromise = null;
+  collectionPromise = CollectionStore.findBySId(collectionId);
+
+  collectionPromise.then((result) => {
+    const collection = result.sync_collections_user;
+
+    if (currentSearchSelection) {
+      UIActions.selectCollectionWithoutUpdating(collection);
+      ElementActions.fetchBasedOnSearchSelectionAndCollection({
+        selection: currentSearchSelection,
+        collectionId: collection.id,
+        isSync: !!collection.is_sync_to_me });
+    } else {
+      UIActions.selectSyncCollection(collection);
+    }
+
+    // if (!e.params['sampleID'] && !e.params['reactionID'] && !e.params['wellplateID'] && !e.params['screenID']) {
+    UIActions.uncheckAllElements({ type: 'sample', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'reaction', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'wellplate', range: 'all' });
+    UIActions.uncheckAllElements({ type: 'screen', range: 'all' });
+    elementNames(false).forEach((klass) => { UIActions.uncheckAllElements({ type: klass, range: 'all' }); });
+
+    // }
+  });
+};
+
+const reportShowReport = () => {
+  ElementActions.showReportContainer();
+};
+
+const predictionShowFwdRxn = () => {
+  ElementActions.showPredictionContainer();
+};
+
+const sampleShowOrNew = (e) => {
+  const { sampleID, collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState();
+  const index = selecteds.findIndex((el) => el.type === 'sample' && el.id === sampleID);
+
+  if (sampleID === 'new') {
+    ElementActions.generateEmptySample(collectionID);
+  } else if (sampleID === 'copy') {
+    ElementActions.copySampleFromClipboard.defer(collectionID);
+  } else if (index < 0) {
+    ElementActions.fetchSampleById(sampleID);
+  } else if (index !== activeKey) {
+    DetailActions.select(index);
+  }
+  // UIActions.selectTab(1);
+};
+
+const reactionShow = (e) => {
+  const { reactionID, collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState();
+  const index = selecteds.findIndex((el) => el.type === 'reaction' && el.id === reactionID);
+  // UIActions.selectTab(2);
+  if (reactionID === 'new') {
+    ElementActions.generateEmptyReaction(collectionID);
+  } else if (reactionID === 'copy') {
+    //ElementActions.copyReactionFromClipboard(collectionID);
+  } else if (index < 0) {
+    ElementActions.fetchReactionById(reactionID);
+  } else if (index !== activeKey) {
+    DetailActions.select(index);
+  }
+};
+
+const reactionShowSample = (e) => {
+  const { reactionID, sampleID } = e.params;
+  ElementActions.editReactionSample(reactionID, sampleID);
+};
+
+const wellplateShowOrNew = (e) => {
+  const { wellplateID, collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState();
+  const index = selecteds.findIndex((el) => el.type === 'wellplate' && el.id === wellplateID);
+
+  if (wellplateID === 'new') {
+    ElementActions.generateEmptyWellplate(collectionID);
+  } else if (wellplateID === 'template') {
+    ElementActions.generateWellplateFromClipboard.defer(collectionID);
+  } else if (index < 0) {
+    ElementActions.fetchWellplateById(wellplateID);
+  } else if (index !== activeKey) {
+    DetailActions.select(index);
+  }
+};
+
+const wellplateShowSample = (e) => {
+  const { wellplateID, sampleID } = e.params;
+  ElementActions.editWellplateSample(wellplateID, sampleID);
+};
+
+const screenShowOrNew = (e) => {
+  const { screenID, collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState();
+  const index = selecteds.findIndex((el) => el.type === 'screen' && el.id === screenID);
+
+  if (screenID === 'new') {
+    ElementActions.generateEmptyScreen(collectionID);
+  } else if (screenID === 'template') {
+    ElementActions.generateScreenFromClipboard.defer(collectionID);
+  } else if (index < 0) {
+    ElementActions.fetchScreenById(screenID);
+  } else if (index !== activeKey) {
+    DetailActions.select(index);
+  }
+};
+
+const devicesAnalysisCreate = (e) => {
+  const { deviceId, analysisType } = e.params;
+  ElementActions.createDeviceAnalysis(deviceId, analysisType);
+};
+
+const devicesAnalysisShow = (e) => {
+  const { analysisId } = e.params;
+  ElementActions.fetchDeviceAnalysisById(analysisId);
+};
+
+const deviceShow = (e) => {
+  const { deviceId } = e.params;
+  ElementActions.fetchDeviceById(deviceId);
+};
+
+const deviceShowDeviceManagement = () => {
+  UIActions.showDeviceManagement();
+};
+
+const researchPlanShowOrNew = (e) => {
+  const { research_planID, collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState();
+  const index = selecteds.findIndex(el => el.type === 'research_plan' && el.id === research_planID);
+
+  if (research_planID === 'new') {
+    ElementActions.generateEmptyResearchPlan(collectionID);
+  } else if (index < 0) {
+    ElementActions.fetchResearchPlanById(research_planID);
+  } else if (index !== activeKey) {
+    DetailActions.select(index);
+  }
+};
+
+const metadataShowOrNew = (e) => {
+  const { collectionID } = e.params;
+  const { selecteds, activeKey } = ElementStore.getState()
+
+  // check if the metadata detail tab is alredy open
+  const index = selecteds.findIndex(el => el.collection_id == collectionID)
+  if (index < 0) {
+    // not found, fetch the metadata from the server
+    ElementActions.fetchMetadata(collectionID);
+  } else if (index != activeKey) {
+    // not active, activate tab
+    DetailActions.select(index)
+  }
+};
+
+const genericElShowOrNew = (e, type) => {
+  const { collectionID } = e.params;
+  let itype = '';
+  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
+    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
+    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
+  } else {
+    itype = type;
+  }
+
+  const genericElID = e.params[`${itype}ID`];
+  if (genericElID === 'new') {
+    ElementActions.generateEmptyGenericEl(collectionID, itype);
+  } else if (genericElID === 'copy') {
+    //
+  } else {
+    ElementActions.fetchGenericElById(genericElID, itype);
+  }
+};
+
+const genericElShowOrNew = (e, type) => {
+  const { collectionID } = e.params;
+  let itype = '';
+  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
+    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
+    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
+  } else {
+    itype = type;
+  }
+
+  const genericElID = e.params[`${itype}ID`];
+  if (genericElID === 'new') {
+    ElementActions.generateEmptyGenericEl(collectionID, itype);
+  } else if (genericElID === 'copy') {
+    //
+  } else {
+    ElementActions.fetchGenericElById(genericElID, itype);
+  }
+};
+
+const elementShowOrNew = (e) => {
+  const type = e.type;
+  switch(type) {
+    case 'sample':
+      sampleShowOrNew(e);
+      break;
+    case 'reaction':
+      reactionShow(e);
+      break;
+    case 'wellplate':
+      wellplateShowOrNew(e);
+      break;
+    case 'screen':
+      screenShowOrNew(e);
+      break;
+    case 'research_plan':
+      researchPlanShowOrNew(e);
+      break;
+    case 'metadata':
+      metadataShowOrNew(e);
+      break;
+    default:
+      if (e && e.klassType == 'GenericEl') {
+        genericElShowOrNew(e, type);
+        break;
+      }
+      return null;
+  }
+  return null;
+};
+
+export {
+  collectionShow,
+  scollectionShow,
+  collectionShowCollectionManagement,
+  reportShowReport,
+  sampleShowOrNew,
+  reactionShow,
+  reactionShowSample,
+  wellplateShowOrNew,
+  wellplateShowSample,
+  screenShowOrNew,
+  devicesAnalysisCreate,
+  devicesAnalysisShow,
+  deviceShow,
+  deviceShowDeviceManagement,
+  researchPlanShowOrNew,
+  metadataShowOrNew,
+  elementShowOrNew,
+  predictionShowFwdRxn,
+  genericElShowOrNew
+};
diff --git a/app/packs/src/components/scifinder/ScifinderCredential.js b/app/packs/src/components/scifinder/ScifinderCredential.js
new file mode 100644
index 000000000..34d5bee7e
--- /dev/null
+++ b/app/packs/src/components/scifinder/ScifinderCredential.js
@@ -0,0 +1,45 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Panel, Row, Col } from 'react-bootstrap';
+import moment from 'moment';
+import uuid from 'uuid';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import NotificationActions from '../actions/NotificationActions';
+
+const ScifinderCredential = () => {
+  const [credential, setCredential] = useState({});
+  const notify = (_params) => {
+    NotificationActions.add({
+      title: _params.title, message: _params.msg, level: _params.lvl, position: 'tc', dismissible: 'button', uid: uuid.v4()
+    });
+  };
+
+  useEffect(() => {
+    UsersFetcher.scifinderCredential().then((json) => {
+      setCredential(json);
+    }).catch(err => notify({ title: 'SciFinder-n Error', lvl: 'error', msg: err }));
+  }, [credential.access_token]);
+
+  return (
+    <Panel>
+      <Panel.Heading><Panel.Title>SciFinder-n Credential</Panel.Title></Panel.Heading>
+      <Panel.Body>
+        <Row>
+          <Col sm={4}><b style={{ float: 'right' }}>Current token will expire at</b></Col>
+          <Col sm={4}>
+            { credential.expires_at ? `${moment(credential.expires_at).format('YYYY-MM-DD HH:mm:ss')} UTC` : '' }
+          </Col>
+          <Col sm={4}><Button bsStyle="primary" href={`${window.location.origin}/users/auth/oauth2`}>Get token</Button></Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+export default ScifinderCredential;
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('ScifinderCredential');
+  if (domElement) { ReactDOM.render(<ScifinderCredential />, domElement); }
+});
diff --git a/app/packs/src/components/search/AutoCompleteInput.js b/app/packs/src/components/search/AutoCompleteInput.js
new file mode 100644
index 000000000..931a64f61
--- /dev/null
+++ b/app/packs/src/components/search/AutoCompleteInput.js
@@ -0,0 +1,426 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormGroup, InputGroup, FormControl, Overlay, ListGroup, ListGroupItem, OverlayTrigger, Tooltip }
+  from 'react-bootstrap';
+import debounce from 'es6-promise-debounce';
+import { isString } from 'lodash';
+
+import KeyboardActions from 'src/stores/alt/actions/KeyboardActions';
+import KeyboardStore from 'src/stores/alt/stores/KeyboardStore';
+
+import UIActions from 'src/stores/alt/actions/UIActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+
+export default class AutoCompleteInput extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: '',
+      valueBeforeFocus: null,
+      showSuggestions: false,
+      suggestions: null,
+      suggestionFocus: null,
+      error: '',
+      inputWidth: 0,
+      inputDisabled: false,
+      timeoutReference: null,
+      keyboardContext: ''
+    }
+
+    this.onUIChange = this.onUIChange.bind(this)
+    this.overlayTarget = React.createRef();
+
+    this.timeout = 6e2 // 600ms timeout for input typing
+    this.doneTyping = this.doneTyping.bind(this)
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIChange)
+    this.initInputWidth()
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIChange);
+  }
+
+  onUIChange(state) {
+    let inputDisabled = false
+    let value = ''
+
+    if (state.currentSearchSelection) {
+      inputDisabled = true
+      let selection = state.currentSearchSelection
+
+      if (selection.search_by_method === "substring") {
+        value = selection.name
+      } else {
+        value = selection.search_by_method
+      }
+    }
+
+    this.setState({
+      value : value,
+      inputDisabled : inputDisabled
+    })
+  }
+
+  initInputWidth() {
+    const input = ReactDOM.findDOMNode(this.refs.input)
+    if (input) {
+      this.setState({ inputWidth: input.offsetWidth })
+    }
+  }
+
+  focusNewSuggestionIndex(direction=1) {
+    let {suggestions, suggestionFocus} = this.state
+    let length = suggestions.length
+    let sF = suggestionFocus == null ? length - 1 : suggestionFocus
+    let newSuggestionIndex = sF + direction
+    if (newSuggestionIndex >= length) {newSuggestionIndex = 0}
+    if (newSuggestionIndex < 0) {newSuggestionIndex = length - 1}
+    this.focusSuggestion(newSuggestionIndex)
+  }
+
+  focusSuggestion(newFocus) {
+    let {suggestions, suggestionFocus, value, valueBeforeFocus} = this.state
+    let newState = {}
+    let sF = !suggestionFocus ? 0 : suggestionFocus
+    if(!valueBeforeFocus) {
+      newState.valueBeforeFocus = value
+    }
+    newState.value = suggestions[newFocus].name
+
+    if (!isString(newState.value)) {
+      newState.value = suggestions[newFocus].name.name || suggestions[newFocus].name.value;
+    }
+
+    newState.suggestionFocus = newFocus
+    ReactDOM.findDOMNode(this.refs['suggestion_' + sF])
+            .classList.remove('active')
+    let newFocusDom = ReactDOM.findDOMNode(this.refs['suggestion_' + newFocus])
+    newFocusDom.classList.add('active')
+
+    this.setState(newState)
+
+    const listSuggestions = this.listSuggestions;
+
+    // Scroll to element
+    if (listSuggestions &&
+        (newFocusDom.offsetTop > (listSuggestions.scrollTop + listSuggestions.offsetHeight - 70) ||
+        (newFocusDom.offsetTop < listSuggestions.scrollTop))) {
+      listSuggestions.scrollTop = newFocusDom.offsetTop - (11 * listSuggestions.offsetTop);
+    }
+  }
+
+  resetComponent() {
+    this.setState({
+      value: '',
+      valueBeforeFocus: null,
+      showSuggestions: false,
+      suggestions: null,
+      suggestionFocus: null,
+      error: ''
+    })
+  }
+
+  // TODO implement continue fetching in the end of scroll
+  fetchSuggestions(value, show = true) {
+    let debounced = debounce(this.props.suggestions, 200)
+    debounced(value).then(result => {
+      let newState = {}
+      if(result?.length > 0) {
+        newState.suggestions = result
+        newState.showSuggestions = show
+      } else {
+        newState.suggestions = null
+        newState.error = "Nothing was found."
+        newState.suggestionFocus = null
+        newState.showSuggestions = false
+      }
+      this.setState(newState)
+    }).catch(error => console.log(error))
+  }
+
+  doneTyping() {
+    let {value} = this.state
+    if(!value) {
+      this.resetComponent()
+    } else {
+      // From https://gist.github.com/lsauer/1312860
+      // TODO Validate if the input is InChi, InChiKey or SMILES
+      this.fetchSuggestions(value)
+    }
+  }
+
+  // Keep chaging the input value until user finish typing
+  handleValueChange(event, doneTyping) {
+    let {value} = event.target
+    let {timeoutReference} = this.state
+
+    if(!value) {
+      this.resetComponent()
+    } else {
+      if (timeoutReference) {
+        clearTimeout(timeoutReference)
+      }
+
+      this.setState({
+        value: value,
+        timeoutReference: setTimeout(function(){
+                                      doneTyping()
+                                    }, this.timeout)
+      })
+    }
+  }
+
+  handleFocus() {
+    let keyboardState = KeyboardStore.getState()
+    this.setState({
+      keyboardContext: keyboardState.context
+    })
+
+    KeyboardActions.contextChange("search")
+  }
+
+  handleBlur() {
+    KeyboardActions.contextChange(this.state.keyboardContext)
+  }
+
+  handleKeyDown(event) {
+    let {value, valueBeforeFocus, showSuggestions, error, suggestions} =
+      this.state
+    let {onSelectionChange} = this.props
+    let newState = {}
+    switch(event.keyCode) {
+      case 13: // Enter
+        this.selectSuggestion()
+        event.preventDefault()
+        break
+      case 27: // ESC
+        this.abortAutoSelection()
+        event.preventDefault()
+        break
+      case 38: // Up
+        if(showSuggestions && !error) {
+          this.focusNewSuggestionIndex(-1)
+        }
+        event.preventDefault()
+        break
+      case 40: // Down
+        if(showSuggestions && !error) {
+          this.focusNewSuggestionIndex(+1)
+        } else if(suggestions) {
+          newState.showSuggestions = true
+        }
+        event.preventDefault()
+        break
+    }
+    this.setState(newState)
+  }
+
+  selectSuggestion() {
+    let {suggestions, suggestionFocus, timeoutReference, value} = this.state
+    let {onSelectionChange} = this.props
+    this.setState({
+      showSuggestions: false,
+      valueBeforeFocus: null
+    })
+    if (!isString(value) && value) {
+      value = value.name || value.value;
+      this.setState({ value })
+    }
+
+    if (!isString(value)) {
+      value = value.name;
+      this.setState({ value });
+    }
+
+    if (!value || value.trim() === '') {
+      this.setState({
+        value: ''
+      })
+      let {currentCollection, isSync} = UIStore.getState();
+      currentCollection['clearSearch'] = true
+      isSync ? UIActions.selectSyncCollection(currentCollection)
+        : UIActions.selectCollection(currentCollection);
+
+      return 0
+    }
+
+    let selection = {name: value, search_by_method: 'substring'}
+    if (suggestions && suggestionFocus != null && suggestions[suggestionFocus]) {
+      let selectedSuggestion = suggestions[suggestionFocus]
+      let selectedName = selectedSuggestion.name;
+
+      if (!isString(selectedName)) {
+        selectedName = selectedName.name;
+      }
+
+      if (selectedName && selectedName.trim() != '' && this.state.value == selectedName)
+        if (selectedSuggestion.search_by_method == 'element_short_label') {
+          selection = {name: selectedSuggestion.name.name, search_by_method: `element_short_label_${selectedSuggestion.name.klass}`}
+        } else {
+          selection = selectedSuggestion
+        }
+    }
+
+    clearTimeout(timeoutReference)
+    onSelectionChange(selection)
+  }
+
+  abortAutoSelection() {
+    let {valueBeforeFocus} = this.state
+    this.setState({
+      showSuggestions: false,
+      value: valueBeforeFocus,
+      valueBeforeFocus: null,
+      suggestionFocus: null
+    })
+  }
+
+  renderSuggestions() {
+    let {suggestions, error} = this.state
+    let types = {
+      chemotion_id: {icon: 'icon-sample', label: 'Chemotion Id'},
+      sample_name : {icon: 'icon-sample', label: 'Sample Name'},
+      sample_short_label : {icon: 'icon-sample', label: 'Sample Short Label'},
+      sample_external_label : {icon: 'icon-sample', label: 'Sample External Label'},
+      polymer_type : {icon: 'icon-polymer', label: 'Polymer'},
+      reaction_name : {icon: 'icon-reaction', label: 'Reaction name'},
+      reaction_status : {icon: 'icon-reaction', label: 'Reaction status'},
+      reaction_short_label : {icon: 'icon-reaction', label: 'Reaction label'},
+      reaction_rinchi_string: { icon: 'icon-reaction', label: 'Reaction RInChI' },
+      wellplate_name : {icon: 'icon-wellplate', label: 'Wellplate'},
+      screen_name : {icon: 'icon-screen', label: 'Screen'},
+      iupac_name : {icon: 'icon-sample', label: 'Molecule'},
+      inchistring : {icon: 'icon-sample', label: 'InChI'},
+      inchikey: { icon: 'icon-sample', label: 'InChIKey'},
+      cano_smiles : {icon: 'icon-sample', label: 'Canonical Smiles'},
+      sum_formula : {icon: 'icon-sample', label: 'Sum Formula'},
+      cas: { icon: 'icon-sample', label: 'cas' },
+      requirements : {icon: 'icon-screen', label: 'Requirement'},
+      conditions : {icon: 'icon-screen', label: 'Condition'},
+      element_short_label: {icon: 'icon-element', label: 'Element Short Label'},
+      embargo : {icon: 'fa fa-object-group', label: 'Embargo Bundle Number'}
+    }
+    if(suggestions) {
+      return (
+        <div>
+          { suggestions.map((suggestion, index) => {
+            let suggestionType = types[suggestion.search_by_method]
+            let icon = suggestionType ? suggestionType.icon : "";
+            if (suggestion.search_by_method == 'chemotion_id' && suggestion.name.startsWith('CRR-')) {
+              icon = 'icon-reaction';
+            }
+            let typeLabel = suggestionType ? suggestionType.label : ""
+            let name = '';
+
+            // Remove first "InchI" string in suggestion list
+            let inchiString = 'InChI=';
+            let inchiMatch = '';
+
+            if (suggestion.search_by_method === 'element_short_label') {
+              icon = suggestion.name.icon;
+              typeLabel = suggestion.name.label;
+              name = suggestion.name.name;
+            } else if (suggestion.search_by_method === 'cas') {
+              name = suggestion.name.value;
+            } else {
+              name = suggestion.name;
+              inchiMatch = suggestion.name.substring(0, inchiString.length)
+              if (inchiMatch === inchiString) {
+                suggestion.name = suggestion.name.replace(inchiString, "")
+              }
+            }
+
+
+            return (
+              <ListGroupItem
+                onClick={() => this.selectSuggestion()}
+                onMouseEnter={() => this.focusSuggestion(index)}
+                key={'suggestion_' + index}
+                ref={'suggestion_' + index}
+                header={name}
+                className="list-group-item-wrap"
+              >
+                <i className={icon} style={{marginRight: 2}}></i>
+                {typeLabel}
+              </ListGroupItem>
+            )
+          })}
+        </div>
+      )
+    } else if (error) {
+      return <ListGroupItem>{error}</ListGroupItem>
+    }
+    return <div />;
+  }
+
+  render() {
+    const {
+      value, showSuggestions, inputWidth, suggestions
+    } = this.state;
+    if (suggestions && suggestions.length > 6) { // show scroll after 6 results
+      this.props.suggestionsAttributes.className = 'scroll';
+    } else {
+      this.props.suggestionsAttributes.className = '';// hide scroll
+    }
+    const containerStyle = {
+      position: 'absolute',
+      width: inputWidth,
+      marginTop: -15,
+      marginLeft: -15,
+      zIndex: 2
+    };
+
+    const searchTooltip = <Tooltip id="search_tooltip">Search by IUPAC name, InChi, Smiles...</Tooltip>;
+
+    return (
+      <div style={{ position: 'relative' }} >
+        <FormGroup ref={this.overlayTarget}
+        >
+          <InputGroup >
+            <InputGroup.Button >
+              {this.props.buttonBefore}
+            </InputGroup.Button>
+              <OverlayTrigger placement="bottom" delayShow={1000} overlay={searchTooltip}>
+                <FormControl
+                  {...this.props.inputAttributes}
+                  disabled={this.state.inputDisabled || this.props.inputDisabled}
+                  type="text"
+                  value={this.props.defaultSearchValue || value || ''}
+                  autoComplete="off"
+                  ref="input"
+                  onFocus={() => this.handleFocus()}
+                  onBlur={() => this.handleBlur()}
+                  onChange={event => this.handleValueChange(event, this.doneTyping)}
+                  onKeyDown={event => this.handleKeyDown(event)}
+                />
+              </OverlayTrigger>
+            <InputGroup.Button>
+              {this.props.buttonAfter}
+            </InputGroup.Button>
+          </InputGroup>
+        </FormGroup>
+        <Overlay
+          show={showSuggestions}
+          onHide={() => this.abortAutoSelection()}
+          placement='bottom'
+          container={this}
+          rootClose={true}
+          target={this.overlayTarget.current}
+        >
+          <div style={{ ...containerStyle }} >
+            <ListGroup
+              {...this.props.suggestionsAttributes}
+              ref={(alist) => { this.listSuggestions = alist; }}
+            >
+              {this.renderSuggestions()}
+            </ListGroup>
+          </div>
+        </Overlay>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/search/Search.js b/app/packs/src/components/search/Search.js
new file mode 100644
index 000000000..6a06e00e8
--- /dev/null
+++ b/app/packs/src/components/search/Search.js
@@ -0,0 +1,340 @@
+import React from 'react';
+import {
+  Glyphicon, ButtonGroup, Button, DropdownButton, MenuItem,
+  Form, FormControl, Radio, Grid, Row, Col
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import AutoCompleteInput from './AutoCompleteInput';
+import StructureEditorModal from '../structure_editor/StructureEditorModal';
+import SuggestionsFetcher from '../fetchers/SuggestionsFetcher';
+import ElementActions from '../actions/ElementActions';
+import UIStore from '../stores/UIStore';
+import UIActions from '../actions/UIActions';
+import UserStore from '../stores/UserStore';
+import GenericElCriteriaModal from '../generic/GenericElCriteriaModal';
+import GenericElCriteria from '../generic/GenericElCriteria';
+import { clsInputGroup } from '../../admin/generic/Utils';
+
+export default class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elementType: 'all',
+      showStructureEditor: false,
+      queryMolfile: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      showGenericElCriteria: false,
+      genericEl: null
+    };
+    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
+    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
+    this.hideGenericElCriteria = this.hideGenericElCriteria.bind(this);
+    this.genericElSearch = this.genericElSearch.bind(this);
+  }
+
+  handleSelectionChange(selection) {
+    const uiState = UIStore.getState();
+    const { currentCollection } = uiState;
+    const collectionId = currentCollection ? currentCollection.id : null;
+    const isPublic = this.props.isPublic;
+    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
+    selection.elementType = this.state.elementType;
+    UIActions.setSearchSelection(selection);
+    selection.page_size = uiState.number_of_results;
+    ElementActions.fetchBasedOnSearchSelectionAndCollection(
+      { selection, collectionId, isSync, isPublic });
+  }
+
+  search(query) {
+    const { currentCollection } = UIStore.getState();
+    const id = currentCollection ? currentCollection.id : null;
+    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
+    return SuggestionsFetcher.fetchSuggestionsForCurrentUser(
+      this.state.elementType.toLowerCase(), query, id, isSync
+    );
+  }
+
+  structureSearch(molfile) {
+    const uiState = UIStore.getState();
+    const { currentCollection } = uiState;
+    const collectionId = currentCollection ? currentCollection.id : null;
+    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
+    const isPublic = this.props.isPublic;
+    let tanimoto = this.state.tanimotoThreshold;
+    if (tanimoto <= 0 || tanimoto > 1) { tanimoto = 0.3; }
+    const selection = {
+      elementType: this.state.elementType,
+      molfile,
+      search_type: this.state.searchType,
+      tanimoto_threshold: tanimoto,
+      page_size: uiState.number_of_results,
+      search_by_method: 'structure',
+      structure_search: true
+    };
+    UIActions.setSearchSelection(selection);
+    ElementActions.fetchBasedOnSearchSelectionAndCollection(
+      {
+        selection, collectionId, isSync, isPublic
+      });
+  }
+
+  genericElSearch() {
+    const uiState = UIStore.getState();
+    const { currentCollection } = uiState;
+    const collectionId = currentCollection ? currentCollection.id : null;
+    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
+    const { genericEl } = this.state;
+
+
+    const selection = {
+      elementType: this.state.elementType,
+      searchName: genericEl.search_name,
+      searchShowLabel: genericEl.search_short_label,
+      genericElName: genericEl.name,
+      search_by_method: genericEl.name,
+      genericElProperties: genericEl.properties,
+      searchProperties: genericEl.search_properties,
+      page_size: uiState.number_of_results
+    };
+
+    UIActions.setSearchSelection(selection);
+    ElementActions.fetchBasedOnSearchSelectionAndCollection({
+      selection,
+      genericElName: genericEl.name,
+      collectionId,
+      isSync,
+    });
+    this.setState({ showGenericElCriteria: false });
+  }
+
+  handleClearSearchSelection() {
+    const { currentCollection, isSync } = UIStore.getState();
+    this.setState({ elementType: 'all' })
+    currentCollection['clearSearch'] = true;
+    isSync ? UIActions.selectSyncCollection(currentCollection)
+      : UIActions.selectCollection(currentCollection);
+  }
+
+  showStructureEditor() {
+    this.setState({ showStructureEditor: true });
+  }
+
+  showAdvancedSearch() {
+    UIActions.toggleAdvancedSearch(true);
+  }
+
+  hideStructureEditor() {
+    this.setState({ showStructureEditor: false });
+  }
+
+  showGenericElCriteria() {
+    this.setState({ showGenericElCriteria: true });
+  }
+
+  hideGenericElCriteria() {
+    this.setState({ showGenericElCriteria: false });
+    this.handleClearSearchSelection();
+  }
+
+  handleElementSelection(event, element = null) {
+    if (event.startsWith('elements-')) {
+      this.showGenericElCriteria();
+      this.setState({ elementType: 'elements', genericEl: element });
+    } else {
+      this.setState({ elementType: event });
+    }
+  }
+
+  handleStructureEditorSave(molfile) {
+    if (molfile) { this.setState({ queryMolfile: molfile }); }
+    // Check if blank molfile
+    const molfileLines = molfile.match(/[^\r\n]+/g);
+    // If the first character ~ num of atoms is 0, we will not search
+    if (molfileLines[1].trim()[0] !== 0) {
+      this.structureSearch(molfile);
+    }
+    this.hideStructureEditor();
+  }
+
+  handleStructureEditorCancel() {
+    this.hideStructureEditor();
+  }
+
+  handleTanimotoChange(e) {
+    const val = e.target && e.target.value;
+    if (!isNaN(val - val)) {
+      this.setState({ tanimotoThreshold: val });
+    }
+  }
+
+  handleSearchTypeChange(e) {
+    this.setState({ searchType: e.target && e.target.value });
+  }
+
+  renderMenuItems() {
+    const elements = [
+      "All",
+      "Samples", "Reactions",
+      // "Wellplates", "Screens"
+    ]
+
+    const menu = elements.map(element => (
+      <MenuItem key={element} onSelect={() => this.handleElementSelection(element.toLowerCase())}>
+        {element}
+      </MenuItem>
+    ));
+
+    menu.push(<MenuItem key="divider" divider />);
+    menu.push(
+      <MenuItem key="advanced" onSelect={this.showAdvancedSearch}>
+        Advanced Search
+      </MenuItem>
+    );
+    menu.push(<MenuItem key="divider" divider />);
+    menu.push(
+      <MenuItem key="embargo" onSelect={() => this.handleElementSelection('embargo')}>
+        Embargo Bundle#
+      </MenuItem>
+    );
+
+    menu.push(<MenuItem key="divider-generic" divider />);
+
+    const genericEls = UserStore.getState().genericEls || [];
+    const profile = UserStore.getState().profile || {};
+
+    genericEls.forEach((el) => {
+      const idx = profile.data && profile.data.layout && profile.data.layout[el.name];
+      if (idx >= 0) {
+        menu.push(<MenuItem key={`menu-el-${el.name}`} onSelect={() => this.handleElementSelection(`elements-${el.name}`, el)}>{el.label}</MenuItem>);
+      }
+    });
+
+    return menu;
+  }
+
+  render() {
+    const { profile } = UserStore.getState();
+    // const { customClass } = (profile && profile.data) || {};
+    const customClass = '.btn-unified'
+
+    const buttonAfter = (
+      <ButtonGroup>
+        <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
+          <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
+        </Button>
+        <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
+          <i className="fa fa-times" />
+        </Button>
+      </ButtonGroup>
+    );
+
+    const submitAddons = (
+      <Grid><Row>
+        <Col sm={6} md={4}>
+          <Form inline>
+            <Radio
+              ref={(input) => { this.searchSimilarRadio = input; }}
+              value="similar"
+              checked={this.state.searchType === 'similar'}
+              onChange={e => this.handleSearchTypeChange(e)}
+            >
+              &nbsp; Similarity Search &nbsp;
+            </Radio>
+            &nbsp;&nbsp;
+            <FormControl
+              style={{ width: '40%' }}
+              type="text"
+              value={this.state.tanimotoThreshold}
+              ref={(input) => { this.searchTanimotoInput = input; }}
+              onChange={e => this.handleTanimotoChange(e)}
+            />
+          </Form>
+        </Col>
+        <Col sm={4} md={2}>
+          <Radio
+            ref={(input) => { this.searchSubstructureRadio = input; }}
+            value="sub"
+            checked={this.state.searchType === 'sub'}
+            onChange={e => this.handleSearchTypeChange(e)}
+          >
+            Substructure Search
+          </Radio>
+        </Col>
+      </Row></Grid>
+    );
+
+    const inputAttributes = {
+      placeholder: 'IUPAC, InChI, SMILES, RInChI...',
+      style: { minWidth: 200, maxWidth: 300 }
+    };
+
+    const suggestionsAttributes = {
+      style: {
+        marginTop: 15,
+        width: 398,
+        maxHeight: 400
+      }
+    };
+
+    let title = (<i className={`icon-${this.state.elementType.toLowerCase().slice(0, -1)}`} />);
+    if (this.state.elementType === 'all') title = 'All';
+    if (this.state.elementType === 'embargo') title = (<i className="fa fa-object-group" />);
+
+    const innerDropdown = (
+      <DropdownButton
+        className={customClass}
+        id="search-inner-dropdown"
+        title={title}
+        style={{ width: '50px' }}
+      >
+        {this.renderMenuItems()}
+      </DropdownButton>
+    );
+
+    const mofProps = {
+      show: this.state.showGenericElCriteria,
+      type: this.state.elementType,
+      component: <GenericElCriteria genericEl={clsInputGroup(this.state.genericEl)} onHide={this.hideGenericElCriteria} onSearch={this.genericElSearch} />,
+      title: `Please input your search criteria for ${this.state.elementType}`,
+      onHide: this.hideGenericElCriteria
+    };
+
+    return (
+      <div className="chemotion-search">
+        <div className="search-structure-draw">
+          <StructureEditorModal
+            showModal={this.state.showStructureEditor}
+            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
+            onCancel={this.handleStructureEditorCancel}
+            molfile={this.state.queryMolfile}
+            submitBtnText="Search"
+            submitAddons={submitAddons}
+          />
+        </div>
+        <div className="search-autocomplete">
+          <AutoCompleteInput
+            inputAttributes={inputAttributes}
+            suggestionsAttributes={suggestionsAttributes}
+            suggestions={input => this.search(input)}
+            ref={(input) => { this.autoComplete = input; }}
+            onSelectionChange={selection => this.handleSelectionChange(selection)}
+            buttonBefore={innerDropdown}
+            buttonAfter={buttonAfter}
+          />
+        </div>
+        {
+          this.state.showGenericElCriteria ? <GenericElCriteriaModal {...mofProps} /> : <div />
+        }
+      </div>
+    );
+  }
+}
+
+Search.propTypes = {
+  noSubmit: PropTypes.bool
+};
+
+Search.defaultProps = {
+  noSubmit: false,
+};
diff --git a/app/packs/src/components/search/SearchFilter.js b/app/packs/src/components/search/SearchFilter.js
new file mode 100644
index 000000000..2944f71bb
--- /dev/null
+++ b/app/packs/src/components/search/SearchFilter.js
@@ -0,0 +1,298 @@
+import React from 'react'
+import {Button, FormControl, ButtonGroup, OverlayTrigger, Tooltip} from 'react-bootstrap'
+import Select from 'react-select'
+import UIActions from 'src/stores/alt/actions/UIActions';
+import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
+
+export default class SearchFilter extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showFilters: props.show,
+      advValue: null,
+      advType: 'Authors',
+      filters: [
+        {
+          link: '',
+          match: '=', // to set default search type for adv search, allows users to search better!
+          field: {
+            table: 'samples',
+            column: 'name',
+            label: 'Sample Name',
+          },
+          value: '',
+        },
+      ],
+    };
+
+    this.listOptions = [
+      {
+        value: {
+          table: 'samples',
+          column: 'name',
+          label: 'Sample Name'
+        },
+        label: 'Sample Name'
+      },
+      {
+        value: {
+          table: 'samples',
+          column: 'short_label',
+          label: 'Sample Short Label'
+        },
+        label: 'Sample Short Label'
+      },
+      {
+        value: {
+          table: 'samples',
+          column: 'external_label',
+          label: 'Sample External Label'
+        },
+        label: 'Sample External Label'
+      },
+      {
+        value: {
+          table: 'samples',
+          column: 'xref',
+          opt: 'cas',
+          label: 'CAS'
+        },
+        label: 'CAS'
+      }
+    ];
+
+
+
+    this.andOrOps = [
+      { value: "AND", label: "AND" },
+      { value: "OR", label: "OR" }
+    ]
+
+    this.matchOps = [
+      { value: "=", label: "EXACT" },
+      { value: "LIKE", label: "LIKE (substring)" },
+      { value: "ILIKE", label: "LIKE (case insensitive substring)" },
+      { value: "NOT LIKE", label: "NOT LIKE (substring)" },
+      { value: "NOT ILIKE", label: "NOT LIKE (case insensitive substring)" }
+    ]
+
+    this.search = this.search.bind(this)
+    this.showFilters = this.showFilters.bind(this)
+    this.renderField = this.renderField.bind(this)
+    this.handleUpdateFilters = this.handleUpdateFilters.bind(this)
+    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
+    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({showFilters: nextProps.show})
+  }
+
+  showFilters(bool) {
+    let show = !this.state.showFilters
+    if (typeof(bool) == "boolean") {
+      show = bool
+      UIActions.toggleAdvancedSearch(bool)
+    }
+
+    this.setState({ showFilters: show })
+  }
+
+  loadAdvValuesByName(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleSelectAdvType(val) {
+    if (val) { this.setState({ advType: val, advValue: null }); }
+  }
+
+  handleSelectAdvValue(val) {
+    if (val) {
+      this.setState({ advValue: val });
+    }
+  }
+
+  handleUpdateFilters(idx, field, val) {
+    const { filters } = this.state;
+
+    filters[idx][field] = val;
+
+    const filter = filters[filters.length - 1];
+    const check = (filter.field && filter.value && filter.link) ||
+                (idx == 0 && filter.field && filter.value);
+
+    if (check) {
+      filters.push({ link: 'OR', match: 'EXACT', field: '', value: '' });
+    }
+
+    this.setState(filters);
+  }
+
+  search() {
+    let { filters, advType, advValue } = this.state;
+
+    // Remove invalid filter
+    filters = filters.filter((f, id) => {
+      return (f.field && f.link && f.value) ||
+        (id == 0 && f.field && f.value)
+    })
+
+    const advValIds = (advValue && advValue.map(val => (val.value))) || null;
+    this.setState({
+      showFilters: false,
+    }, this.props.searchFunc(filters, { type: advType, value: advValIds }));
+  }
+
+  renderField(val) {
+    return (val.label)
+  }
+
+  renderDynamicRow() {
+    let {filters} = this.state
+
+    let dynamicRow = ( <span /> )
+
+    if (filters.length > 1) {
+      let addedFilters = filters.filter((val, idx) => idx > 0)
+
+      dynamicRow = addedFilters.map((filter, idx) => {
+        let id = idx + 1
+        return (
+          <div key={"filter_" + idx} className="adv-search-row">
+            <span className="link-select">
+              <Select simpleValue options={this.andOrOps}
+                value={filter.link} clearable={false}
+                onChange={(val) => this.handleUpdateFilters(id, "link", val)} />
+            </span>
+            <span className="match-select">
+              <Select simpleValue options={this.matchOps}
+                value={filter.match} clearable={false}
+                onChange={(val) => this.handleUpdateFilters(id, "match", val)} />
+            </span>
+            <span className="field-select">
+              <Select simpleValue options={this.listOptions} clearable={false}
+                placeholder="Select search field" value={filter.field}
+                onChange={(val) => this.handleUpdateFilters(id, "field", val)} />
+            </span>
+            <FormControl type="text" value={filters.value}
+              componentClass="textarea" rows={2}
+              className="value-select" placeholder="Search value"
+              onChange={(e) => this.handleUpdateFilters(id, "value", e.target.value)}
+            />
+          </div>
+        )
+      })
+
+    }
+
+    return dynamicRow
+  }
+
+
+  renderAdvancedSearch() {
+    const { showFilters, advType, advValue } = this.state;
+    if (showFilters === true) {
+      this.listAdvOptions = [
+        {
+          value: 'Authors',
+          label: 'by authors'
+        },
+        {
+          value: 'Contributors',
+          label: 'by contributors'
+        }
+      ];
+      return (
+        <div className="adv-search-row">
+          <span style={{ flex: '0 0 127px' }} />
+          <span className="match-select">
+            <Select
+              simpleValue
+              searchable={false}
+              options={this.listAdvOptions}
+              placeholder="Select search field"
+              clearable={false}
+              valueKey="value"
+              labelKey="label"
+              onChange={this.handleSelectAdvType}
+              defaultValue="Authors"
+              value={advType}
+              className="o-author"
+            />
+          </span>
+          <span className="field-select-full">
+            <Select.Async
+              multi
+              isLoading
+              backspaceRemoves
+              value={advValue}
+              valueKey="value"
+              labelKey="label"
+              loadOptions={this.loadAdvValuesByName}
+              onChange={this.handleSelectAdvValue}
+              className="o-name"
+            />
+          </span>
+        </div>
+      );
+    }
+    return (<div />);
+  }
+
+  render() {
+    let {showFilters, currentOption, filters} = this.state
+    if (!showFilters) return (<span />)
+
+    return (
+      <div className="advanced-search">
+        <div>
+          <div className="adv-search-row">
+            <span style={{flex: "0 0 127px"}} />
+            <span className="match-select">
+              <Select simpleValue searchable={false} options={this.matchOps}
+                placeholder="Select search type" clearable={false}
+                value={filters[0].match}
+                onChange={(val) => this.handleUpdateFilters(0, "match", val)} />
+            </span>
+            <span className="field-select">
+              <Select simpleValue searchable={false} options={this.listOptions}
+                placeholder="Select search field" clearable={false}
+                value={filters[0].field} valueRenderer={this.renderField}
+                onChange={(val) => this.handleUpdateFilters(0, "field", val)} />
+            </span>
+            <FormControl type="text" value={filters[0].value}
+              componentClass="textarea"
+              className="value-select" placeholder="Search value"
+              onChange={(e) => this.handleUpdateFilters(0, "value", e.target.value)}
+            />
+          </div>
+          {this.renderDynamicRow()}
+          {this.renderAdvancedSearch()}
+        </div>
+        <div className="footer">
+          <Button bsStyle="primary" onClick={this.search}>
+            Search
+          </Button>
+          <Button bsStyle="warning" onClick={() => this.showFilters(false)}>
+            Close
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/packs/src/components/sharing/SharingShortcuts.js b/app/packs/src/components/sharing/SharingShortcuts.js
new file mode 100644
index 000000000..02291dec8
--- /dev/null
+++ b/app/packs/src/components/sharing/SharingShortcuts.js
@@ -0,0 +1,51 @@
+export default class SharingShortcuts {
+  static user() {
+    return {
+      permissionLevel: 3,
+      sampleDetailLevel: 10,
+      reactionDetailLevel: 10,
+      wellplateDetailLevel: 10,
+      screenDetailLevel: 10
+    }
+  }
+
+  static partner() {
+    return {
+      permissionLevel: 1,
+      sampleDetailLevel: 10,
+      reactionDetailLevel: 0,
+      wellplateDetailLevel: 10,
+      screenDetailLevel: 1
+    }
+  }
+
+  static collaborator() {
+    return {
+      permissionLevel: 0,
+      sampleDetailLevel: 1,
+      reactionDetailLevel: 0,
+      wellplateDetailLevel: 0,
+      screenDetailLevel: 0
+    }
+  }
+
+  static reviewer() {
+    return {
+      permissionLevel: 0,
+      sampleDetailLevel: 2,
+      reactionDetailLevel: 10,
+      wellplateDetailLevel: 1,
+      screenDetailLevel: 0
+    }
+  }
+
+  static supervisor() {
+    return {
+      permissionLevel: 4,
+      sampleDetailLevel: 10,
+      reactionDetailLevel: 10,
+      wellplateDetailLevel: 10,
+      screenDetailLevel: 10
+    }
+  }
+}
diff --git a/app/packs/src/components/sso/LoginOptions.js b/app/packs/src/components/sso/LoginOptions.js
new file mode 100644
index 000000000..1f512866d
--- /dev/null
+++ b/app/packs/src/components/sso/LoginOptions.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {
+  Row,
+  Col,
+  Grid,
+  Button
+} from 'react-bootstrap';
+import uuid from 'uuid';
+import UserStore from '../stores/UserStore';
+import UserActions from '../actions/UserActions';
+
+export default class LoginOptions extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      omniauthProviders: []
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchOmniauthProviders();
+  }
+
+  onChange(state) {
+    const { omniauthProviders } = this.state;
+    if (state?.omniauthProviders !== omniauthProviders) {
+      this.setState({
+        omniauthProviders: state.omniauthProviders
+      });
+    }
+  }
+
+  render() {
+    const { omniauthProviders } = this.state;
+    const keys = Object.keys(omniauthProviders);
+    if (keys.length === 0) return (<span />);
+    const items = keys.map((key) => (
+      <Col key={uuid.v1()} md={12 / keys.length} className="login-options">
+        <Button href={`/users/auth/${key}`}>
+          Login with &nbsp;
+          <img src={`/images/providers/${omniauthProviders[key].icon}`} className="kit-logo" alt={key} title={key} />
+        </Button>
+      </Col>
+    ));
+
+    return (
+      <Grid>
+        <Row>
+          {items}
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('LoginOptions');
+  if (domElement) { ReactDOM.render(<LoginOptions />, domElement); }
+});
diff --git a/app/packs/src/components/sso/OmniauthCredential.js b/app/packs/src/components/sso/OmniauthCredential.js
new file mode 100644
index 000000000..f97332855
--- /dev/null
+++ b/app/packs/src/components/sso/OmniauthCredential.js
@@ -0,0 +1,54 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Panel, Row, Col } from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import NotificationActions from '../actions/NotificationActions';
+
+function OmniauthCredential() {
+  const notify = (_params) => {
+    NotificationActions.add({
+      title: _params.title, message: _params.msg, level: _params.lvl, position: 'tc', dismissible: 'button', uid: uuid.v4()
+    });
+  };
+
+  const [providers, setProviders] = useState(() => {
+    UsersFetcher.fetchUserOmniauthProviders().then((json) => {
+      const userProviders = (json?.current_user?.providers) || {};
+
+      setProviders(userProviders);
+    }).catch((err) => notify({ title: 'Fetch User Providers Error', lvl: 'error', msg: err }));
+    return (providers);
+  });
+
+  let omniauthProviders = (<span />);
+
+  if (typeof omniauthProviders !== 'undefined' && omniauthProviders !== null) {
+    omniauthProviders = providers && Object.keys(providers).map((key) => (
+      <Row key={uuid.v1()}>
+        <Col key={uuid.v1()} md={2} />
+        <Col key={uuid.v1()} md={5}>{key}</Col>
+        <Col key={uuid.v1()} md={5}>{providers[key]}</Col>
+      </Row>
+    ));
+  }
+
+  return (
+    <Panel>
+      <Panel.Heading><Panel.Title>3rd-Party Credential</Panel.Title></Panel.Heading>
+      <Panel.Body>
+        {omniauthProviders}
+        <br />
+      </Panel.Body>
+    </Panel>
+  );
+}
+
+export default OmniauthCredential;
+
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('OmniauthCredential');
+  if (domElement) { ReactDOM.render(<OmniauthCredential />, domElement); }
+});
diff --git a/app/packs/src/components/staticDropdownOptions/options.js b/app/packs/src/components/staticDropdownOptions/options.js
index 5b116d6ba..3ebdf5aea 100644
--- a/app/packs/src/components/staticDropdownOptions/options.js
+++ b/app/packs/src/components/staticDropdownOptions/options.js
@@ -1,424 +1,322 @@
 export const solventOptions = [{
-  label: 'Acetic acid',
-  value: 'Acetic acid'
-}, {
-  label: 'Acetone',
-  value: 'Acetone'
-}, {
-  label: 'Acetonitrile',
-  value: 'Acetonitrile'
-}, {
-  label: 'Benzene',
-  value: 'Benzene'
-}, {
-  label: 'Butanol',
-  value: 'Butanol'
-}, {
-  label: 'Carbon tetrachloride (CCl4)',
-  value: 'Carbon tetrachloride'
-}, {
-  label: 'Chloroform',
-  value: 'Chloroform'
-}, {
-  label: 'Cyclohexane',
-  value: 'Cyclohexane'
-}, {
-  label: 'Diethyl ether',
-  value: 'Diethyl ether'
-}, {
-  label: 'Dimethyl sulfoxide (DMSO)',
-  value: 'Dimethyl sulfoxide'
-}, {
-  label: 'Dimethylformamide (DMF)',
-  value: 'Dimethylformamide'
-}, {
-  label: '1,4-Dioxane',
-  value: '1,4-Dioxane'
-}, {
-  label: 'Ethanol',
-  value: 'Ethanol'
-}, {
-  label: 'Ethyl acetate',
-  value: 'Ethyl acetate'
-}, {
-  label: 'Isopropanol',
-  value: 'Isopropanol'
-}, {
-  label: 'Methanol',
-  value: 'Methanol'
-}, {
-  label: 'Methylene chloride (DCM)',
-  value: 'Methylene chloride'
-}, {
-  label: 'Methyl tert-butyl ether (MTBE)',
-  value: 'Methyl tert-butyl ether'
-}, {
-  label: 'n-Hexane',
-  value: 'n-Hexane'
-}, {
-  label: 'N-Methyl-2-pyrrolidone (NMP)',
-  value: 'N-Methyl-2-pyrrolidone'
-}, {
-  label: 'Pentane',
-  value: 'Pentane'
-}, {
-  label: 'Pyridine',
-  value: 'Pyridine'
-}, {
-  label: 'Tetrahydrofuran (THF)',
-  value: 'Tetrahydrofuran'
-}, {
-  label: 'Toluene',
-  value: 'Toluene'
-}, {
-  label: 'Water',
-  value: 'Water'
-}, {
-  label: 'CDCl3',
-  value: 'CDCl3'
-}, {
-  label: 'MeOD-d4',
-  value: 'MeOD-d4'
-}, {
-  label: 'C6D6',
-  value: 'C6D6'
-}, {
-  label: 'D2O',
-  value: 'D2O'
-}];
+    label: 'Acetic acid',
+    value: 'Acetic acid'
+  }, {
+    label: 'Acetone',
+    value: 'Acetone'
+  }, {
+    label: 'Acetonitrile',
+    value: 'Acetonitrile'
+  }, {
+    label: 'Benzene',
+    value: 'Benzene'
+  }, {
+    label: 'Butanol',
+    value: 'Butanol'
+  }, {
+    label: 'Carbon tetrachloride (CCl4)',
+    value: 'Carbon tetrachloride'
+  }, {
+    label: 'Chloroform',
+    value: 'Chloroform'
+  }, {
+    label: 'Cyclohexane',
+    value: 'Cyclohexane'
+  }, {
+    label: 'Diethyl ether',
+    value: 'Diethyl ether'
+  }, {
+    label: 'Dimethyl sulfoxide (DMSO)',
+    value: 'Dimethyl sulfoxide'
+  }, {
+    label: 'Dimethylformamide (DMF)',
+    value: 'Dimethylformamide'
+  }, {
+    label: '1,4-Dioxane',
+    value: '1,4-Dioxane'
+  }, {
+    label: 'Ethanol',
+    value: 'Ethanol'
+  }, {
+    label: 'Ethyl acetate',
+    value: 'Ethyl acetate'
+  }, {
+    label: 'Isopropanol',
+    value: 'Isopropanol'
+  }, {
+    label: 'Methanol',
+    value: 'Methanol'
+  }, {
+    label: 'Methylene chloride (DCM)',
+    value: 'Methylene chloride'
+  }, {
+    label: 'Methyl tert-butyl ether (MTBE)',
+    value: 'Methyl tert-butyl ether'
+  }, {
+    label: 'n-Hexane',
+    value: 'n-Hexane'
+  }, {
+    label: 'N-Methyl-2-pyrrolidone (NMP)',
+    value: 'N-Methyl-2-pyrrolidone'
+  }, {
+    label: 'Pentane',
+    value: 'Pentane'
+  }, {
+    label: 'Pyridine',
+    value: 'Pyridine'
+  }, {
+    label: 'Tetrahydrofuran (THF)',
+    value: 'Tetrahydrofuran'
+  }, {
+    label: 'Toluene',
+    value: 'Toluene'
+  }, {
+    label: 'Water',
+    value: 'Water'
+  }, {
+    label: 'CDCl3',
+    value: 'CDCl3'
+  }, {
+    label: 'MeOD-d4',
+    value: 'MeOD-d4'
+  }, {
+    label: 'C6D6',
+    value: 'C6D6'
+  }, {
+    label: 'D2O',
+    value: 'D2O'
+  }];
+
 
 export const defaultMultiSolventsSmilesOptions = [{
   label: 'Acetic acid',
-  value: {
-    external_label: 'Acetic acid',
-    smiles: 'CC(O)=O',
-    density: 1.05
-  }
-}, {
+  value: { external_label: 'Acetic acid',
+           smiles: 'CC(O)=O',
+           density: 1.05 }
+  }, {
   label: 'Acetone',
-  value: {
-    external_label: 'Acetone',
-    smiles: 'CC(C)=O',
-    density: 0.79
-  }
-}, {
+  value: { external_label: 'Acetone',
+           smiles: 'CC(C)=O',
+           density: 0.79 }
+  }, {
   label: 'Acetonitrile',
-  value: {
-    external_label: 'Acetonitrile',
-    smiles: 'CC#N',
-    density: 0.78
-  }
-}, {
+  value: { external_label: 'Acetonitrile',
+           smiles: 'CC#N',
+           density: 0.78 }
+  }, {
   label: 'Argon',
-  value: {
-    external_label: 'Ar',
-    smiles: '[Ar]',
-    density: 0.001633
-  }
-}, {
+  value: { external_label: 'Ar',
+           smiles: '[Ar]',
+          density: 0.001633 }
+  }, {
   label: 'Benzene',
-  value: {
-    external_label: 'Benzene',
-    smiles: 'C1=CC=CC=C1',
-    density: 0.88
-  }
-}, {
-  label: '2-Butanone',
-  value: {
-    external_label: '2-Butanone',
-    smiles: 'CCC(=O)C',
-    density: 0.805
-  }
-}, {
+  value: { external_label: 'Benzene',
+           smiles: 'C1=CC=CC=C1',
+           density: 0.88 }
+  }, {
   label: 'n-Butanol',
-  value: {
-    external_label: 'n-Butanol',
-    smiles: 'CCCCO',
-    density: 0.81
-  }
-}, {
+  value: { external_label: 'n-Butanol',
+           smiles: 'CCCCO',
+           density: 0.81 }
+  }, {
   label: 'Carbon tetrachloride (CCl4)',
-  value: {
-    external_label: 'CCl4',
-    smiles: 'ClC(Cl)(Cl)Cl',
-    density: 1.594
-  }
-}, {
+  value: { external_label: 'CCl4',
+           smiles: 'ClC(Cl)(Cl)Cl',
+           density: 1.594 }
+  }, {
   label: 'Chloroform',
-  value: {
-    external_label: 'Chloroform',
-    smiles: 'ClC(Cl)Cl',
-    density: 1.48
-  }
-}, {
+  value: { external_label: 'Chloroform',
+           smiles: 'ClC(Cl)Cl',
+           density: 1.48 }
+  }, {
   label: 'Cyclohexane',
-  value: {
-    external_label: 'Cyclohexane',
-    smiles: 'C1CCCCC1',
-    density: 0.78
-  }
-}, {
+  value: { external_label: 'Cyclohexane',
+           smiles: 'C1CCCCC1',
+           density: 0.78 }
+  }, {
   label: 'Diethyl ether',
-  value: {
-    external_label: 'Diethyl ether',
-    smiles: 'CCOCC',
-    density: 0.71
-  }
-}, {
+  value: { external_label: 'Diethyl ether',
+           smiles: 'CCOCC',
+           density: 0.71 }
+  }, {
   label: 'Dimethyl sulfoxide (DMSO)',
-  value: {
-    external_label: 'DMSO',
-    smiles: 'CS(C)=O',
-    density: 1.10
-  }
-}, {
+  value: { external_label: 'DMSO',
+           smiles: 'CS(C)=O',
+           density: 1.10 }
+  }, {
   label: 'Dimethylformamide (DMF)',
-  value: {
-    external_label: 'DMF',
-    smiles: 'CN(C)C=O',
-    density: 0.95
-  }
-}, {
+  value: { external_label: 'DMF',
+           smiles: 'CN(C)C=O',
+           density: 0.95 }
+  }, {
   label: '1,4-Dioxane',
-  value: {
-    external_label: '1,4-Dioxane',
-    smiles: 'C1COCCO1',
-    density: 1.03
-  }
-}, {
+  value: { external_label: '1,4-Dioxane',
+           smiles: 'C1COCCO1',
+           density: 1.03 }
+  }, {
   label: 'Ethanol',
-  value: {
-    external_label: 'Ethanol',
-    smiles: 'OCC',
-    density: 0.789
-  }
-}, {
+  value: { external_label: 'Ethanol',
+           smiles: 'OCC',
+           density: 0.789 }
+  }, {
   label: 'Ethyl acetate',
-  value: {
-    external_label: 'Ethyl acetate',
-    smiles: 'CC(OCC)=O',
-    density: 0.894
-  }
-}, {
+  value: { external_label: 'Ethyl acetate',
+           smiles: 'CC(OCC)=O',
+           density: 0.894 }
+  }, {
   label: 'Isopropanol',
-  value: {
-    external_label: 'Isopropanol',
-    smiles: 'CC(O)C',
-    density: 0.78
-  }
-}, {
+  value: { external_label: 'Isopropanol',
+           smiles: 'CC(O)C',
+           density: 0.78 }
+  }, {
   label: 'Methanol',
-  value: {
-    external_label: 'Methanol',
-    smiles: 'CO',
-    density: 0.79
-  }
-}, {
+  value: { external_label: 'Methanol',
+           smiles: 'CO',
+           density: 0.79 }
+  }, {
   label: 'Methylene chloride (DCM)',
-  value: {
-    external_label: 'DCM',
-    smiles: 'ClCCl',
-    density: 1.33
-  }
-}, {
+  value: { external_label: 'DCM',
+           smiles: 'ClCCl',
+           density: 1.33 }
+  }, {
   label: 'Methyl tert-butyl ether (MTBE)',
-  value: {
-    external_label: 'MTBE',
-    smiles: 'O(C(C)(C)C)C',
-    density: 0.74
-  }
-}, {
+  value: { external_label: 'MTBE',
+           smiles: 'O(C(C)(C)C)C',
+           density: 0.74 }
+  }, {
   label: 'N2',
-  value: {
-    external_label: 'N2',
-    smiles: 'N#N',
-    density: 0.00125
-  }
-}, {
+  value: { external_label: 'N2',
+           smiles: 'N#N',
+           density: 0.00125 }
+  }, {
   label: 'n-Hexane',
-  value: {
-    external_label: 'n-Hexane',
-    smiles: 'CCCCCC',
-    density: 0.66
-  }
-}, {
+  value: { external_label: 'n-Hexane',
+           smiles: 'CCCCCC',
+           density: 0.66 }
+  }, {
   label: 'N-Methyl-2-pyrrolidone (NMP)',
-  value: {
-    external_label: 'NMP',
-    smiles: 'O=C1CCCN1C',
-    density: 1.03
-  }
-}, {
+  value: { external_label: 'NMP',
+           smiles: 'O=C1CCCN1C',
+           density: 1.03 }
+  }, {
   label: 'Pentane',
-  value: {
-    external_label: 'Pentane',
-    smiles: 'CCCCC',
-    density: 0.63
-  }
-}, {
+  value: { external_label: 'Pentane',
+           smiles: 'CCCCC',
+           density: 0.63 }
+  }, {
   label: 'Pyridine',
-  value: {
-    external_label: 'Pyridine',
-    smiles: 'C1=CC=NC=C1',
-    density: 0.98
-  }
-}, {
-  label: 'Tetramethylethylenediamine (TMEDA)',
-  value: {
-    external_label: 'TMEDA',
-    smiles: 'CN(C)CCN(C)C',
-    density: 0.775
-  }
-}, {
+  value: { external_label: 'Pyridine',
+           smiles: 'C1=CC=NC=C1',
+           density: 0.98 }
+  }, {
   label: 'Tetrahydrofuran (THF)',
-  value: {
-    external_label: 'THF',
-    smiles: 'C1CCCO1',
-    density: 0.889
-  }
-}, {
+  value: { external_label: 'THF',
+           smiles: 'C1CCCO1',
+           density: 0.889 }
+  }, {
   label: 'Toluene',
-  value: {
-    external_label: 'Toluene',
-    smiles: 'CC1=CC=CC=C1',
-    density: 0.87
-  }
-}, {
+  value: { external_label: 'Toluene',
+           smiles: 'CC1=CC=CC=C1',
+           density: 0.87 }
+  }, {
   label: 'Water',
-  value: {
-    external_label: 'Water',
-    smiles: '[H]O[H]',
-    density: 1.00
-  }
-}, {
+  value: { external_label: 'Water',
+           smiles: '[H]O[H]',
+           density: 1.00 }
+  }, {
   label: 'CDCl3',
-  value: {
-    external_label: 'CDCl3',
-    smiles: '[2H]C(Cl)(Cl)Cl',
-    density: 1.500
-  }
-}, {
+  value: { external_label: 'CDCl3',
+           smiles: '[2H]C(Cl)(Cl)Cl',
+           density: 1.500 }
+  }, {
   label: 'MeOD-d4',
-  value: {
-    external_label: 'MeOD-d4',
-    smiles: '[2H]OC([2H])([2H])[2H]',
-    density: 0.888
-  }
-}, {
+  value: { external_label: 'MeOD-d4',
+           smiles: '[2H]OC([2H])([2H])[2H]',
+           density: 0.888 }
+  }, {
   label: 'C6D6',
-  value: {
-    external_label: 'C6D6',
-    smiles: '[2H]c1c([2H])c([2H])c([2H])c([2H])c1[2H]',
-    density: 0.950
-  }
-}, {
+  value: { external_label: 'C6D6',
+           smiles: '[2H]c1c([2H])c([2H])c([2H])c([2H])c1[2H]',
+           density: 0.950 }
+  }, {
   label: 'D2O',
-  value: {
-    external_label: 'D2O',
-    smiles: '[2H]O[2H]',
-    density: 1.107
-  }
-}, {
-  label: 'Cyclopentane',
-  value: {
-    external_label: 'Cyclopentane',
-    smiles: 'C1CCCC1',
-    density: 0.74
-  }
-}, {
-  label: 'Nitromethane',
-  value: {
-    external_label: 'Nitromethane',
-    smiles: 'C[N+]([O-])=O',
-    density: 1.14
-  }
-}, {
-  label: 'Formic acid',
-  value: {
-    external_label: 'Formic acid',
-    smiles: 'O=CO',
-    density: 1.22
-  }
-}, {
-  label: 'n-octanol',
-  value: {
-    external_label: 'n-octanol',
-    smiles: 'CCCCCCCCO',
-    density: 0.817
-  }
-}, {
-  label: 'n-propanol',
-  value: {
-    external_label: 'n-propanol',
-    smiles: 'CCCO',
-    density: 0.8
-  }
-}, {
-  label: 'Dimethylacetamide',
-  value: {
-    external_label: 'Dimethylacetamide',
-    smiles: 'CC(N(C)C)=O',
-    density: 0.94
-  }
-}, {
-  label: '1,2-xylene',
-  value: {
-    external_label: '1,2-xylene',
-    smiles: 'CC1=CC=CC=C1C',
-    density: 0.8755
-  }
-}, {
-  label: '1,3-xylene',
-  value: {
-    external_label: '1,3-xylene',
-    smiles: 'CC1=CC=CC(C)=C1',
-    density: 0.8598
-  }
-}, {
-  label: '1,4-xylene',
-  value: {
-    external_label: '1,4-xylene',
-    smiles: 'CC1=CC=C(C)C=C1',
-    density: 0.8565
-  }
-}, {
-  label: 'Sulfolane',
-  value: {
-    external_label: 'Sulfolane',
-    smiles: 'O=S1(CCCC1)=O',
-    density: 1.261
-  }
-}, {
-  label: '2-methoxy ethanol',
-  value: {
-    external_label: '2-methoxy ethanol',
-    smiles: 'OCCOC',
-    density: 0.97
+  value: { external_label: 'D2O',
+           smiles: '[2H]O[2H]',
+           density: 1.107 }
+  }, {
+    label: 'Cyclopentane',
+    value: { external_label: 'Cyclopentane',
+             smiles: 'C1CCCC1',
+             density: 0.74 }
+  }, {
+    label: 'Nitromethane',
+    value: { external_label: 'Nitromethane',
+             smiles: 'C[N+]([O-])=O',
+             density: 1.14 }
+  }, {
+    label: 'Formic acid',
+    value: { external_label: 'Formic acid',
+             smiles: 'O=CO',
+             density: 1.22 }
+  }, {
+    label: 'n-octanol',
+    value: { external_label: 'n-octanol',
+             smiles: 'CCCCCCCCO',
+             density: 0.817 }
+  }, {
+    label: 'n-propanol',
+    value: { external_label: 'n-propanol',
+             smiles: 'CCCO	',
+             density: 0.8 }
+  }, {
+    label: 'Dimethylacetamide',
+    value: { external_label: 'Dimethylacetamide',
+             smiles: 'CC(N(C)C)=O',
+             density: 0.94 }
+  }, {
+    label: '1,2-xylene',
+    value: { external_label: '1,2-xylene',
+             smiles: 'CC1=CC=CC=C1C',
+             density: 0.8755 }
+  }, {
+    label: '1,3-xylene',
+    value: { external_label: '1,3-xylene',
+             smiles: 'CC1=CC=CC(C)=C1',
+             density: 0.8598 }
+  }, {
+    label: '1,4-xylene',
+    value: { external_label: '1,4-xylene',
+             smiles: 'CC1=CC=C(C)C=C1',
+             density: 0.8565 }
+  }, {
+    label: 'Sulfolane',
+    value: { external_label: 'Sulfolane',
+             smiles: 'O=S1(CCCC1)=O',
+             density: 1.261 }
+  }, {
+    label: '2-methoxy ethanol',
+    value: { external_label: '2-methoxy ethanol',
+             smiles: 'OCCOC',
+             density: 0.97 }
+  }, {
+    label: 'Carbon tribromide',
+    value: { external_label: 'Carbon tribromide',
+             smiles: 'BrC(Br)([H])Br',
+             density: 2.89 }
+  }, {
+    label: 'Cyclopentylmethylether',
+    value: { external_label: 'Cyclopentylmethylether',
+             smiles: 'COC1CCCC1',
+             density: 0.86 }
+  }, {
+    label: '1,2-Dichloroethane',
+    value: { external_label: '1,2-Dichloroethane',
+             smiles: 'ClCCCl',
+             density: 1.25 }
   }
-}, {
-  label: 'Carbon tribromide',
-  value: {
-    external_label: 'Carbon tribromide',
-    smiles: 'BrC(Br)([H])Br',
-    density: 2.89
-  }
-}, {
-  label: 'Cyclopentylmethylether',
-  value: {
-    external_label: 'Cyclopentylmethylether',
-    smiles: 'COC1CCCC1',
-    density: 0.86
-  }
-}, {
-  label: '1,2-Dichloroethane',
-  value: {
-    external_label: '1,2-Dichloroethane',
-    smiles: 'ClCCCl',
-    density: 1.25
-  }
-}
 ];
 
+
 export const purificationOptions = [{
   label: 'Flash-Chromatography',
   value: 'Flash-Chromatography'
@@ -434,24 +332,12 @@ export const purificationOptions = [{
 }, {
   label: 'Distillation',
   value: 'Distillation'
-}, {
-  label: 'Dialysis',
-  value: 'Dialysis'
-}, {
-  label: 'Filtration',
-  value: 'Filtration'
 }, {
   label: 'Sublimation',
   value: 'Sublimation'
 }, {
   label: 'Crystallisation',
   value: 'Crystallisation'
-}, {
-  label: 'Recrystallisation',
-  value: 'Recrystallisation'
-}, {
-  label: 'Precipitation',
-  value: 'Precipitation'
 }];
 
 export const statusOptions = [{
@@ -474,6 +360,7 @@ export const statusOptions = [{
   value: 'Not Successful',
 }];
 
+
 export const dangerousProductsOptions = [{
   label: 'Causes cancer',
   value: 'Causes cancer'
@@ -524,12 +411,14 @@ export const dangerousProductsOptions = [{
   value: 'Diverse (Class 9)'
 }];
 
+
+
 export const confirmOptions = [{
-  label: 'Confirmed',
-  value: 'Confirmed'
-}, {
-  label: 'Unconfirmed',
-  value: 'Unconfirmed'
+  label: "Confirmed",
+  value: "Confirmed"
+},{
+  label: "Unconfirmed",
+  value: "Unconfirmed"
 }];
 
 export const kindOptions = [{
@@ -676,13 +565,4 @@ export const conditionsOptions = [{
 }, {
   label: 'visible light',
   value: 'visible light'
-}, {
-  label: 'pH = value',
-  value: 'pH = value'
-}, {
-  label: 'pH < value',
-  value: 'pH &lt; value' /* &lt; renders < in HTML */
-}, {
-  label: 'pH > value',
-  value: 'pH &gt; value' /* &gt; renders > in HTML */
-}];
+}];
\ No newline at end of file
diff --git a/app/packs/src/components/staticDropdownOptions/reagents_kombi.js b/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
index 35a6b63ee..835a1b7c4 100644
--- a/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
+++ b/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
@@ -1,546 +1,546 @@
 export const reagents_kombi = {
-  ferrocene: '[CH-]1C=CC=C1.[CH-]1C=CC=C1.[Fe+2]',
+  "ferrocene": '[CH-]1C=CC=C1.[CH-]1C=CC=C1.[Fe+2]',
   "1,1'-Bis(diphenylphosphino)ferrocene": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
-  dppf: 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
+  "dppf": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
   "[1,1'-Bis(diphenylphosphino)ferrocene]palladium(II) dichloride": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
-  'Pd(dppf)Cl2': 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
-  '[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II) complex with dichloromethane': 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.ClCCl.Cl[Pd]Cl.[Fe+2]',
-  '(-)-10,2-Camphorsultam': 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
-  '(-)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  "Pd(dppf)Cl2": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
+  "[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II) complex with dichloromethane": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.ClCCl.Cl[Pd]Cl.[Fe+2]',
+  "(-)-10,2-Camphorsultam": 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
+  "(-)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
   "(-)-2,2'-Methylenebis[(3aS,8aR)-3a,8a-dihydro-8H-indeno[1,2-d]oxazole]": '[H][C@@]12N=C(CC3=N[C@]4([H])[C@](CC5=C4C=CC=C5)([H])O3)O[C@]1([H])CC6=C2C=CC=C6',
-  '(-)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane': 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
-  '(-)-B-Chlorodiisopinocampheylborane': 'CC1(C)C2CC(B(Cl)C3CC4CC(C3C)C4(C)C)C(C)C1C2',
-  '(-)-Benzotetramisole': 'C12=N[C@@H](C3=CC=CC=C3)CN1C4=CC=CC=C4S2',
-  '(-)-Isopinocampheylborane TMEDA Complex': 'B[C@H]1[C@H](C)C2C(C(C1)C2)(C)C.B[C@H]3[C@H](C)C4C(C(C3)C4)(C)C.CN(C)CCN(C)C',
-  '(-)-Sparteine': '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
-  '(+)-(5aR,10bS)-5a,10b-Dihydro-2-(2,4,6-trimethylphenyl)-4H,6H-indeno[2,1-b][1,2,4]triazolo[4,3-d][1,4]oxazinium Chloride Monohydrate': 'CC1=C(N2N=C3[N+]([C@]4([H])[C@](CC5=C4C=CC=C5)([H])OC3)=C2)C(C)=CC(C)=C1.[H]O[H].[Cl-]',
-  '(+)-10,2-Camphorsultam': 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
-  '(+)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  "(-)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane": 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
+  "(-)-B-Chlorodiisopinocampheylborane": 'CC1(C)C2CC(B(Cl)C3CC4CC(C3C)C4(C)C)C(C)C1C2',
+  "(-)-Benzotetramisole": 'C12=N[C@@H](C3=CC=CC=C3)CN1C4=CC=CC=C4S2',
+  "(-)-Isopinocampheylborane TMEDA Complex": 'B[C@H]1[C@H](C)C2C(C(C1)C2)(C)C.B[C@H]3[C@H](C)C4C(C(C3)C4)(C)C.CN(C)CCN(C)C',
+  "(-)-Sparteine": '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
+  "(+)-(5aR,10bS)-5a,10b-Dihydro-2-(2,4,6-trimethylphenyl)-4H,6H-indeno[2,1-b][1,2,4]triazolo[4,3-d][1,4]oxazinium Chloride Monohydrate": 'CC1=C(N2N=C3[N+]([C@]4([H])[C@](CC5=C4C=CC=C5)([H])OC3)=C2)C(C)=CC(C)=C1.[H]O[H].[Cl-]',
+  "(+)-10,2-Camphorsultam": 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
+  "(+)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
   "(+)-2,2'-Methylenebis[(3aR,8aS)-3a,8a-dihydro-8H-indeno[1,2-d]oxazole]": '[H][C@]12N=C(CC3=N[C@@]4([H])[C@@](CC5=C4C=CC=C5)([H])O3)O[C@@]1([H])CC6=C2C=CC=C6',
-  '(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane': 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
-  '(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2-methyl-2-phenyl-1,3-dioxolane': 'CC1(C2=CC=CC=C2)OC(C(C3=CC=CC=C3)(O)C4=CC=CC=C4)C(C(C5=CC=CC=C5)(O)C6=CC=CC=C6)O1',
-  '(+)-B-Chlorodiisopinocampheylborane': 'CN(C)CCN(C)C.CC1(C)C2CC(BC3CC4CC(C3C)C4(C)C)C(C)C1C2',
-  '(+)-Sparteine': '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
+  "(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane": 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
+  "(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2-methyl-2-phenyl-1,3-dioxolane": 'CC1(C2=CC=CC=C2)OC(C(C3=CC=CC=C3)(O)C4=CC=CC=C4)C(C(C5=CC=CC=C5)(O)C6=CC=CC=C6)O1',
+  "(+)-B-Chlorodiisopinocampheylborane": 'CN(C)CCN(C)C.CC1(C)C2CC(BC3CC4CC(C3C)C4(C)C)C(C)C1C2',
+  "(+)-Sparteine": '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
   "(±)-1,1'-Binaphthyl-2,2'-diyl Hydrogenphosphate": 'O=P1(OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)O',
-  '(±)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
-  '(1,10-Phenanthroline)(trifluoromethyl)(triphenylphosphine)copper(I)': '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.C45=CC=C6C=CC=NC6=C4N=CC=C5',
-  '(1,5-Cyclooctadiene)(methoxy)iridium(I)': '[Ir]OC.C1=C\\CC/C=C\\CC/1',
-  '(1,5-Cyclooctadiene)(pyridine)(tricyclohexylphosphine)iridium(I) Hexafluorophosphate': 'F[P-](F)(F)(F)(F)F.P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.[Ir+].C4=C\\CC/C=C\\CC/4.C5=NC=CC=C5',
+  "(±)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  "(1,10-Phenanthroline)(trifluoromethyl)(triphenylphosphine)copper(I)": '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.C45=CC=C6C=CC=NC6=C4N=CC=C5',
+  "(1,5-Cyclooctadiene)(methoxy)iridium(I)": '[Ir]OC.C1=C\\CC/C=C\\CC/1',
+  "(1,5-Cyclooctadiene)(pyridine)(tricyclohexylphosphine)iridium(I) Hexafluorophosphate": 'F[P-](F)(F)(F)(F)F.P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.[Ir+].C4=C\\CC/C=C\\CC/4.C5=NC=CC=C5',
   "(11bS)-2,6-Bis[bis[3,5-bis(trifluoromethyl)phenyl]hydroxymethyl]-3,5-dihydrospiro[4H-dinaphth[2,1-c:1',2'-e]azepine-4,4'-morpholinium] Bromide": 'OC(C1=C2C(C3=C4C=CC=CC4=CC(C(C5=CC(C(F)(F)F)=CC(C(F)(F)F)=C5)(C6=CC(C(F)(F)F)=CC(C(F)(F)F)=C6)O)=C3C(Br)[N]7(CCOCC7)C2)=C8C=CC=CC8=C1)(C9=CC(C(F)(F)F)=CC(C(F)(F)F)=C9)C%10=CC(C(F)(F)F)=CC(C(F)(F)F)=C%10',
-  '(11R,12R)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine': 'N[C@H]1[C@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
-  '(11S,12S)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine': 'N[C@@H]1[C@@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
-  '(1-Bromovinyl)trimethylsilane': 'C[Si](C)(C(Br)=C)C',
-  '(1E)-1-tert-Butoxy-1-(trimethylsilyloxy)propene': 'C/C=C(OC(C)(C)C)/O[Si](C)(C)C',
-  '(1R,2R)-(-)-1,2-Cyclohexanediamine': 'N[C@H]1[C@H](N)CCCC1',
+  "(11R,12R)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine": 'N[C@H]1[C@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
+  "(11S,12S)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine": 'N[C@@H]1[C@@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
+  "(1-Bromovinyl)trimethylsilane": 'C[Si](C)(C(Br)=C)C',
+  "(1E)-1-tert-Butoxy-1-(trimethylsilyloxy)propene": 'C/C=C(OC(C)(C)C)/O[Si](C)(C)C',
+  "(1R,2R)-(-)-1,2-Cyclohexanediamine": 'N[C@H]1[C@H](N)CCCC1',
   "(1R,2R)-(-)-N,N'-Dimethylcyclohexane-1,2-diamine": 'CN[C@H]1[C@H](NC)CCCC1',
-  '(1R,2R)-(+)-1,2-Diphenylethylenediamine': 'N[C@H](C1=CC=CC=C1)[C@@H](C2=CC=CC=C2)N',
-  '(1R,2R)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine': 'N[C@H](C1=C(C)C=C(C)C=C1C)[C@@H](C2=C(C)C=C(C)C=C2C)N',
-  '(1R,2R)-1,2-Bis(2-hydroxyphenyl)ethylenediamine': 'N[C@H](C1=CC=CC=C1O)[C@@H](C2=CC=CC=C2O)N',
+  "(1R,2R)-(+)-1,2-Diphenylethylenediamine": 'N[C@H](C1=CC=CC=C1)[C@@H](C2=CC=CC=C2)N',
+  "(1R,2R)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine": 'N[C@H](C1=C(C)C=C(C)C=C1C)[C@@H](C2=C(C)C=C(C)C=C2C)N',
+  "(1R,2R)-1,2-Bis(2-hydroxyphenyl)ethylenediamine": 'N[C@H](C1=CC=CC=C1O)[C@@H](C2=CC=CC=C2O)N',
   "(1R,2R)-N,N'-Bis(2-acetyl-3-oxo-2-butenylidene)-1,2-dimesitylethylenediaminato Cobalt(II)": 'CC1=C(C(C)=CC(C)=C1)[C@@H](/N=C/C=C(C(C)=O)\\C[O-])[C@@H](C2=C(C)C=C(C)C=C2C)/N=C/C=C(C(C)=O)\\C[O-].[Co+2]',
   "(1R,2R)-N,N'-Bis[3-oxo-2-(2,4,6-trimethylbenzoyl)butylidene]-1,2-diphenylethylenediaminato Cobalt(II)": '[O-]/C(C)=C(C(C1=C(C)C=C(C)C=C1C)=O)\\C=N\\[C@@H]([C@@H](C2=CC=CC=C2)/N=C/C(C(C3=C(C)C=C(C)C=C3C)=O)=C(C)\\[O-])C4=CC=CC=C4.[Co+2]',
   "(1R,2R)-N,N'-Dihydroxy-N,N'-bis(diphenylacetyl)cyclohexane-1,2-diamine": 'O=C(N(O)[C@H]1[C@H](N(O)C(C(C2=CC=CC=C2)C3=CC=CC=C3)=O)CCCC1)C(C4=CC=CC=C4)C5=CC=CC=C5',
-  '(1R,2R,4R,5R)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane': 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@@]3([H])C[C@@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@@](C3)([H])C2',
-  '(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol': 'C[C@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@@H](C3=CC=CC=C3)O',
-  '(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate': 'CCC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  '(1R,3R)-5-(Bromomethylene)-1,3-bis(tert-butyldimethylsilyloxy)cyclohexane': 'C[Si](O[C@H](C1)C[C@H](O[Si](C)(C(C)(C)C)C)CC1=CBr)(C(C)(C)C)C',
-  '(1R,3S,5R,7R,8aS)-7-Ethylhexahydro-1-(6-hydroxy-4-quinolinyl)-3,7-methano-1H-pyrrolo[2,1-c][1,4]oxazine': 'OC1=CC=C2N=CC=C([C@H]3O[C@](C4)([H])C[N@@]5[C@@]3([H])C[C@@]4(CC)C5)C2=C1',
-  '(1R,4R,5R)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane': 'CC1(C)S[C@@]2([H])[C@H](C)CC[C@]1([H])C2',
+  "(1R,2R,4R,5R)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@@]3([H])C[C@@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@@](C3)([H])C2',
+  "(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol": 'C[C@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@@H](C3=CC=CC=C3)O',
+  "(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate": 'CCC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  "(1R,3R)-5-(Bromomethylene)-1,3-bis(tert-butyldimethylsilyloxy)cyclohexane": 'C[Si](O[C@H](C1)C[C@H](O[Si](C)(C(C)(C)C)C)CC1=CBr)(C(C)(C)C)C',
+  "(1R,3S,5R,7R,8aS)-7-Ethylhexahydro-1-(6-hydroxy-4-quinolinyl)-3,7-methano-1H-pyrrolo[2,1-c][1,4]oxazine": 'OC1=CC=C2N=CC=C([C@H]3O[C@](C4)([H])C[N@@]5[C@@]3([H])C[C@@]4(CC)C5)C2=C1',
+  "(1R,4R,5R)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane": 'CC1(C)S[C@@]2([H])[C@H](C)CC[C@]1([H])C2',
   "(1S)-3-(1,10-Phenanthrolin-2-yl)-2'-phenyl-[1,1'-binaphthalen]-2-ol": 'OC1=C(C2=NC3=C4N=CC=CC4=CC=C3C=C2)C=C5C=CC=CC5=C1C6=C7C=CC=CC7=CC=C6C8=CC=CC=C8',
-  '(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol': 'C[C@@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@H](C3=CC=CC=C3)O',
-  '(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate': 'CCC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  '(1S,2S)-(-)-1,2-Diphenylethylenediamine': 'N[C@@H](C1=CC=CC=C1)[C@H](C2=CC=CC=C2)N',
-  '(1S,2S)-(+)-1,2-Cyclohexanediamine': 'N[C@@H]1[C@@H](N)CCCC1',
+  "(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol": 'C[C@@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@H](C3=CC=CC=C3)O',
+  "(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate": 'CCC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  "(1S,2S)-(-)-1,2-Diphenylethylenediamine": 'N[C@@H](C1=CC=CC=C1)[C@H](C2=CC=CC=C2)N',
+  "(1S,2S)-(+)-1,2-Cyclohexanediamine": 'N[C@@H]1[C@@H](N)CCCC1',
   "(1S,2S)-(+)-N,N'-Dimethylcyclohexane-1,2-diamine": 'CN[C@@H]1[C@@H](NC)CCCC1',
-  '(1S,2S)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine': 'N[C@@H](C1=C(C)C=C(C)C=C1C)[C@H](C2=C(C)C=C(C)C=C2C)N',
-  '(1S,2S)-1,2-Bis(2-hydroxyphenyl)ethylenediamine': 'N[C@@H](C1=CC=CC=C1O)[C@H](C2=CC=CC=C2O)N',
+  "(1S,2S)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine": 'N[C@@H](C1=C(C)C=C(C)C=C1C)[C@H](C2=C(C)C=C(C)C=C2C)N',
+  "(1S,2S)-1,2-Bis(2-hydroxyphenyl)ethylenediamine": 'N[C@@H](C1=CC=CC=C1O)[C@H](C2=CC=CC=C2O)N',
   "(1S,2S)-N,N'-Bis(2-acetyl-3-oxo-2-butenylidene)-1,2-dimesitylethylenediaminato Cobalt(II)": 'CC1=C(C(C)=CC(C)=C1)[C@H](/N=C/C=C(C(C)=O)\\C[O-])[C@H](C2=C(C)C=C(C)C=C2C)/N=C/C=C(C(C)=O)\\C[O-].[Co+2]',
   "(1S,2S)-N,N'-Bis[(R)-2-hydroxy-2'-phenyl-1,1'-binaphthyl-3-ylmethylene]-1,2-diphenylethylenediaminato Manganese(III) Acetate": 'CC([O-])=O.OC1=C(C([Mn+]2)=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N=C2C5=C(O)C(C6=C7C=CC=CC7=CC=C6C8=CC=CC=C8)=C9C=CC=CC9=C5)C=C%10C=CC=CC%10=C1C%11=C%12C=CC=CC%12=CC=C%11C%13=CC=CC=C%13',
   "(1S,2S)-N,N'-Bis[3-oxo-2-(2,4,6-trimethylbenzoyl)butylidene]-1,2-diphenylethylenediaminato Cobalt(II)": '[O-]/C(C)=C(C(C1=C(C)C=C(C)C=C1C)=O)\\C=N\\[C@H]([C@H](C2=CC=CC=C2)/N=C/C(C(C3=C(C)C=C(C)C=C3C)=O)=C(C)\\[O-])C4=CC=CC=C4.[Co+2]',
   "(1S,2S)-N,N'-Dihydroxy-N,N'-bis(diphenylacetyl)cyclohexane-1,2-diamine": 'O=C(N(O)[C@@H]1[C@@H](N(O)C(C(C2=CC=CC=C2)C3=CC=CC=C3)=O)CCCC1)C(C4=CC=CC=C4)C5=CC=CC=C5',
-  '(1S,2S,4S,5S)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane': 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@@H]2[C@]3([H])C[C@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@](C3)([H])C2',
-  '(1S,4S,5S)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane': 'CC1(C)S[C@]2([H])[C@@H](C)CC[C@@]1([H])C2',
-  '(2,5-Dimethylphenyl)magnesium Bromide': 'Br[Mg]C1=CC(C)=CC=C1C',
-  '(2-Bromo-4,5-dimethoxyphenoxy)trimethylsilane': 'C[Si](C)(OC1=CC(OC)=C(OC)C=C1Br)C',
-  '(2-Bromoallyl)trimethylsilane': 'C[Si](C)(CC(Br)=C)C',
-  '(2-Bromophenyl)(2,4,6-trimethylphenyl)iodonium triflate': 'CC1=C([I+]C2=CC=CC=C2Br)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
-  '(2-Bromophenyl)diphenylphosphine': 'BrC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  '(2-Bromophenylethynyl)trimethylsilane': 'C[Si](C)(C#CC1=CC=CC=C1Br)C',
-  '(2R,3R)-(-)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol': 'CC1(O[C@H]([C@@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
-  '(2R,3R)-(-)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene': 'C1(C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
-  '(2R,5R)-2,5-Diphenylpyrrolidine': '[C@@H]1(C2=CC=CC=C2)N[C@@H](C3=CC=CC=C3)CC1',
-  '(2R,8aS)-(+)-(Camphorylsulfonyl)oxaziridine': 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
-  '(2S)-N-[(1S)-1-(Hydroxydiphenylmethyl)-3-methylbutyl]-2-pyrrolidinecarboxamide': 'O=C([C@H]1NCCC1)N[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CC(C)C',
-  '(2S,3aS,7aS)-Octahydro-1H-indole-2-carboxylic Acid': 'O=C([C@H]1N[C@@]2([H])CCCC[C@@]2([H])C1)O',
-  '(2S,3R)-3,4-Dihydro-3-isopropyl-2-phenyl-2H-pyrimido[2,1-b]benzothiazole': 'CC([C@H]1[C@@H](C2=CC=CC=C2)N=C3SC4=CC=CC=C4N3C1)C',
-  '(2S,3S)-(-)-Bis(diphenylphosphino)butane': 'C[C@H](P(C1=CC=CC=C1)C2=CC=CC=C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)C',
-  '(2S,3S)-(+)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol': 'CC1(O[C@@H]([C@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
-  '(2S,3S)-(+)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene': 'C1(C2)[C@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
-  '(2S,5S)-(-)-2-tert-Butyl-3-methyl-5-benzyl-4-imidazolidinone': 'O=C1N(C)[C@@H](C(C)(C)C)N[C@H]1CC2=CC=CC=C2',
-  '(2S,5S)-2,5-Diphenylpyrrolidine': '[C@H]1(C2=CC=CC=C2)N[C@H](C3=CC=CC=C3)CC1',
-  '(2S,8aR)-(-)-(Camphorylsulfonyl)oxaziridine': 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
-  '(3,5-Dibromophenyl)triphenylsilane': 'BrC1=CC(Br)=CC([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=C1',
-  '(3-Bromopropoxy)(tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(OCCCBr)C',
-  '(3-Bromopropyl)trimethoxysilane': 'CO[Si](OC)(CCCBr)OC',
-  '(3-Chloropropyl)tris(trimethylsilyloxy)silane': 'C[Si](O[Si](O[Si](C)(C)C)(CCCCl)O[Si](C)(C)C)(C)C',
-  '(3-Mercaptopropyl)triethoxysilane': 'CCO[Si](OCC)(CCCS)OCC',
-  '(3-Mercaptopropyl)trimethoxysilane': 'CO[Si](OC)(CCCS)OC',
-  '(3-Phenyl-1H-inden-1-ylidene)bis(tricyclohexylphosphine)ruthenium(II) Dichloride': '[Ru+2]=C1C=C(C2=CC=CC=C2)C3=C1C=CC=C3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.P(C7CCCCC7)(C8CCCCC8)C9CCCCC9.[Cl-].[Cl-]',
-  '(4-(Isopropoxycarbonyl)phenyl)boronic acid': 'B(C1=CC=C(C=C1)C(=O)OC(C)C)(O)O',
-  '(4-Dimethylaminophenyl)di-tert-butylphosphine': 'CC(P(C1=CC=C(N(C)C)C=C1)C(C)(C)C)(C)C',
-  '(4-Nitrophenyl)(2,4,6-trimethylphenyl)iodonium triflate': 'CC1=C([I+]C2=CC=C([N+]([O-])=O)C=C2)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
-  '(4-Nitrophenyl)phenyliodonium triflate': 'O=[N+](C1=CC=C([I+]C2=CC=CC=C2)C=C1)[O-].O=S([O-])(C(F)(F)F)=O',
-  '(4R)-(+)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone': 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@H](C(C)C)N1',
-  '(4R,5R)-1,3-Dimethyl-4,5-diphenyl-2-[(S)-1-benzyl-2-hydroxyethylimino]imidazolidine': 'OC[C@H](CC1=CC=CC=C1)N=C2N(C)[C@H](C3=CC=CC=C3)[C@@H](C4=CC=CC=C4)N2C',
-  '(4S)-(-)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone': 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@H](C(C)C)N1',
+  "(1S,2S,4S,5S)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@@H]2[C@]3([H])C[C@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@](C3)([H])C2',
+  "(1S,4S,5S)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane": 'CC1(C)S[C@]2([H])[C@@H](C)CC[C@@]1([H])C2',
+  "(2,5-Dimethylphenyl)magnesium Bromide": 'Br[Mg]C1=CC(C)=CC=C1C',
+  "(2-Bromo-4,5-dimethoxyphenoxy)trimethylsilane": 'C[Si](C)(OC1=CC(OC)=C(OC)C=C1Br)C',
+  "(2-Bromoallyl)trimethylsilane": 'C[Si](C)(CC(Br)=C)C',
+  "(2-Bromophenyl)(2,4,6-trimethylphenyl)iodonium triflate": 'CC1=C([I+]C2=CC=CC=C2Br)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
+  "(2-Bromophenyl)diphenylphosphine": 'BrC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  "(2-Bromophenylethynyl)trimethylsilane": 'C[Si](C)(C#CC1=CC=CC=C1Br)C',
+  "(2R,3R)-(-)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol": 'CC1(O[C@H]([C@@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
+  "(2R,3R)-(-)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene": 'C1(C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
+  "(2R,5R)-2,5-Diphenylpyrrolidine": '[C@@H]1(C2=CC=CC=C2)N[C@@H](C3=CC=CC=C3)CC1',
+  "(2R,8aS)-(+)-(Camphorylsulfonyl)oxaziridine": 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
+  "(2S)-N-[(1S)-1-(Hydroxydiphenylmethyl)-3-methylbutyl]-2-pyrrolidinecarboxamide": 'O=C([C@H]1NCCC1)N[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CC(C)C',
+  "(2S,3aS,7aS)-Octahydro-1H-indole-2-carboxylic Acid": 'O=C([C@H]1N[C@@]2([H])CCCC[C@@]2([H])C1)O',
+  "(2S,3R)-3,4-Dihydro-3-isopropyl-2-phenyl-2H-pyrimido[2,1-b]benzothiazole": 'CC([C@H]1[C@@H](C2=CC=CC=C2)N=C3SC4=CC=CC=C4N3C1)C',
+  "(2S,3S)-(-)-Bis(diphenylphosphino)butane": 'C[C@H](P(C1=CC=CC=C1)C2=CC=CC=C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)C',
+  "(2S,3S)-(+)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol": 'CC1(O[C@@H]([C@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
+  "(2S,3S)-(+)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene": 'C1(C2)[C@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
+  "(2S,5S)-(-)-2-tert-Butyl-3-methyl-5-benzyl-4-imidazolidinone": 'O=C1N(C)[C@@H](C(C)(C)C)N[C@H]1CC2=CC=CC=C2',
+  "(2S,5S)-2,5-Diphenylpyrrolidine": '[C@H]1(C2=CC=CC=C2)N[C@H](C3=CC=CC=C3)CC1',
+  "(2S,8aR)-(-)-(Camphorylsulfonyl)oxaziridine": 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
+  "(3,5-Dibromophenyl)triphenylsilane": 'BrC1=CC(Br)=CC([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=C1',
+  "(3-Bromopropoxy)(tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(OCCCBr)C',
+  "(3-Bromopropyl)trimethoxysilane": 'CO[Si](OC)(CCCBr)OC',
+  "(3-Chloropropyl)tris(trimethylsilyloxy)silane": 'C[Si](O[Si](O[Si](C)(C)C)(CCCCl)O[Si](C)(C)C)(C)C',
+  "(3-Mercaptopropyl)triethoxysilane": 'CCO[Si](OCC)(CCCS)OCC',
+  "(3-Mercaptopropyl)trimethoxysilane": 'CO[Si](OC)(CCCS)OC',
+  "(3-Phenyl-1H-inden-1-ylidene)bis(tricyclohexylphosphine)ruthenium(II) Dichloride": '[Ru+2]=C1C=C(C2=CC=CC=C2)C3=C1C=CC=C3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.P(C7CCCCC7)(C8CCCCC8)C9CCCCC9.[Cl-].[Cl-]',
+  "(4-(Isopropoxycarbonyl)phenyl)boronic acid": 'B(C1=CC=C(C=C1)C(=O)OC(C)C)(O)O',
+  "(4-Dimethylaminophenyl)di-tert-butylphosphine": 'CC(P(C1=CC=C(N(C)C)C=C1)C(C)(C)C)(C)C',
+  "(4-Nitrophenyl)(2,4,6-trimethylphenyl)iodonium triflate": 'CC1=C([I+]C2=CC=C([N+]([O-])=O)C=C2)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
+  "(4-Nitrophenyl)phenyliodonium triflate": 'O=[N+](C1=CC=C([I+]C2=CC=CC=C2)C=C1)[O-].O=S([O-])(C(F)(F)F)=O',
+  "(4R)-(+)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone": 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@H](C(C)C)N1',
+  "(4R,5R)-1,3-Dimethyl-4,5-diphenyl-2-[(S)-1-benzyl-2-hydroxyethylimino]imidazolidine": 'OC[C@H](CC1=CC=CC=C1)N=C2N(C)[C@H](C3=CC=CC=C3)[C@@H](C4=CC=CC=C4)N2C',
+  "(4S)-(-)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone": 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@H](C(C)C)N1',
   "(4S,4'S)-2,2'-(Pentane-3,3'-diyl)bis(4-benzyl-4,5-dihydrooxazole)": 'CCC(C1=N[C@H](CO1)CC2=CC=CC=C2)(C3=N[C@H](CO3)CC4=CC=CC=C4)CC',
-  '(4S,5S)-1,3-Dimethyl-4,5-diphenyl-2-[(R)-1-benzyl-2-hydroxyethylimino]imidazolidine': 'OC[C@@H](CC1=CC=CC=C1)N=C2N(C)[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2C',
-  '(6-Chloro-1H-benzotriazol-1-yloxy)tripyrrolidinophosphonium Hexafluorophosphate': 'ClC1=CC=C2N=NN(O[P+](N3CCCC3)(N4CCCC4)N5CCCC5)C2=C1.F[P-](F)(F)(F)(F)F',
-  '(7-Azabenzotriazol-1-yloxy)tris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(ON1N=NC2=CC=CN=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  '(Bromodifluoromethyl)trimethylsilane': 'C[Si](C)(C(F)(Br)F)C',
-  '(Bromomethyl)trimethylsilane': 'C[Si](C)(CBr)C',
-  '(Chloromethyl)isopropoxydimethylsilane': 'C[Si](OC(C)C)(CCl)C',
-  '(Chloromethyl)trimethylsilane': 'C[Si](C)(CCl)C',
-  '(Diacetoxyiodo)benzene': 'O=C(OI(C1=CC=CC=C1)OC(C)=O)C',
-  '(Diethylamino)sulfur Trifluoride': 'CCN(S(F)(F)F)CC',
-  '(Difluoromethyl)trimethylsilane': 'C[Si](C)(C(F)F)C',
-  '(E)-Trimethyl(3,3,3-trifluoro-1-propenyl)silane': 'FC(F)(F)/C=C/[Si](C)(C)C',
-  '(Hexamethylbenzene)ruthenium(II) Dichloride': 'CC1=C(C)C(C)=C(C)C(C)=C1C.[Ru+2].[Cl-].[Cl-]',
-  '(Indenyl)titanium(IV) Trichloride': '[Ti+3]C1C=CC2=C1C=CC=C2.[Cl-].[Cl-].[Cl-]',
-  '(Iodomethyl)trimethylsilane': 'C[Si](C)(CI)C',
+  "(4S,5S)-1,3-Dimethyl-4,5-diphenyl-2-[(R)-1-benzyl-2-hydroxyethylimino]imidazolidine": 'OC[C@@H](CC1=CC=CC=C1)N=C2N(C)[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2C',
+  "(6-Chloro-1H-benzotriazol-1-yloxy)tripyrrolidinophosphonium Hexafluorophosphate": 'ClC1=CC=C2N=NN(O[P+](N3CCCC3)(N4CCCC4)N5CCCC5)C2=C1.F[P-](F)(F)(F)(F)F',
+  "(7-Azabenzotriazol-1-yloxy)tris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(ON1N=NC2=CC=CN=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  "(Bromodifluoromethyl)trimethylsilane": 'C[Si](C)(C(F)(Br)F)C',
+  "(Bromomethyl)trimethylsilane": 'C[Si](C)(CBr)C',
+  "(Chloromethyl)isopropoxydimethylsilane": 'C[Si](OC(C)C)(CCl)C',
+  "(Chloromethyl)trimethylsilane": 'C[Si](C)(CCl)C',
+  "(Diacetoxyiodo)benzene": 'O=C(OI(C1=CC=CC=C1)OC(C)=O)C',
+  "(Diethylamino)sulfur Trifluoride": 'CCN(S(F)(F)F)CC',
+  "(Difluoromethyl)trimethylsilane": 'C[Si](C)(C(F)F)C',
+  "(E)-Trimethyl(3,3,3-trifluoro-1-propenyl)silane": 'FC(F)(F)/C=C/[Si](C)(C)C',
+  "(Hexamethylbenzene)ruthenium(II) Dichloride": 'CC1=C(C)C(C)=C(C)C(C)=C1C.[Ru+2].[Cl-].[Cl-]',
+  "(Indenyl)titanium(IV) Trichloride": '[Ti+3]C1C=CC2=C1C=CC=C2.[Cl-].[Cl-].[Cl-]',
+  "(Iodomethyl)trimethylsilane": 'C[Si](C)(CI)C',
   "(m-Terphenyl-5'-yl)trimethylsilane": 'C[Si](C)(C1=CC(C2=CC=CC=C2)=CC(C3=CC=CC=C3)=C1)C',
-  '(Pentafluorophenyl)diphenylphosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  '(Pentamethylcyclopentadienyl)rhodium(III) Dichloride': '[Rh+2]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-]',
-  '(Pentamethylcyclopentadienyl)titanium(IV) Trichloride': '[Ti+3]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-].[Cl-]',
-  '(Perfluorohexyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  '(Perfluoro-n-octyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  '(Perfluoropropyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  '(Phenylthio)trimethylsilane': 'C[Si](C)(SC1=CC=CC=C1)C',
-  '(Phenylthiomethyl)trimethylsilane': 'C[Si](C)(CSC1=CC=CC=C1)C',
-  '(Piperidinium-1-ylmethyl)trifluoroborate': 'F[B-2](F)(C[NH+]1CCCCC1)F',
-  '(R)-(-)-1-(2-Pyrrolidinylmethyl)pyrrolidine': 'N1(C[C@@H]2NCCC2)CCCC1',
-  '(R)-(-)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine': 'CN1[C@@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
-  '(R)-(-)-4-Benzyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@@H](CC2=CC=CC=C2)N1C(CC)=O',
-  '(R)-(-)-4-Isopropyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@@H](C(C)C)N1C(CC)=O',
-  '(R)-(-)-4-Phenyl-2-oxazolidinone': 'O=C1OC[C@@H](C2=CC=CC=C2)N1',
-  '(R)-(-)-p-Toluenesulfinamide': 'CC1=CC=C([S@](N)=O)C=C1',
+  "(Pentafluorophenyl)diphenylphosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  "(Pentamethylcyclopentadienyl)rhodium(III) Dichloride": '[Rh+2]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-]',
+  "(Pentamethylcyclopentadienyl)titanium(IV) Trichloride": '[Ti+3]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-].[Cl-]',
+  "(Perfluorohexyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  "(Perfluoro-n-octyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  "(Perfluoropropyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  "(Phenylthio)trimethylsilane": 'C[Si](C)(SC1=CC=CC=C1)C',
+  "(Phenylthiomethyl)trimethylsilane": 'C[Si](C)(CSC1=CC=CC=C1)C',
+  "(Piperidinium-1-ylmethyl)trifluoroborate": 'F[B-2](F)(C[NH+]1CCCCC1)F',
+  "(R)-(-)-1-(2-Pyrrolidinylmethyl)pyrrolidine": 'N1(C[C@@H]2NCCC2)CCCC1',
+  "(R)-(-)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine": 'CN1[C@@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
+  "(R)-(-)-4-Benzyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@@H](CC2=CC=CC=C2)N1C(CC)=O',
+  "(R)-(-)-4-Isopropyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@@H](C(C)C)N1C(CC)=O',
+  "(R)-(-)-4-Phenyl-2-oxazolidinone": 'O=C1OC[C@@H](C2=CC=CC=C2)N1',
+  "(R)-(-)-p-Toluenesulfinamide": 'CC1=CC=C([S@](N)=O)C=C1',
   "(R)-(+)-2,2'-bis(diphenylphosphino)-1,1'-binaphthyl": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8',
   "(R)-(+)-2-Diphenylphosphino-2'-methoxy-1,1'-binaphthyl": 'COC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3P(C5=CC=CC=C5)C6=CC=CC=C6',
-  '(R)-(+)-Indoline-2-carboxylic Acid': 'O=C([C@@H]1NC2=C(C=CC=C2)C1)O',
-  '(R)-(+)-N,N-Dimethyl-1-ferrocenylethylamine': 'C[C@H]([C]1[CH][CH][CH][CH]1)N(C)C.[Fe].[CH]2[CH][CH][CH][CH]2',
-  '(R)-(+)-tert-Butylsulfinamide': 'CC(C)([S@](N)=O)C',
-  '(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol': 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3',
-  '(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether': 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3)(C)C',
-  '(R)-2-(Methoxymethyl)pyrrolidine': 'COC[C@@H]1NCCC1',
+  "(R)-(+)-Indoline-2-carboxylic Acid": 'O=C([C@@H]1NC2=C(C=CC=C2)C1)O',
+  "(R)-(+)-N,N-Dimethyl-1-ferrocenylethylamine": 'C[C@H]([C]1[CH][CH][CH][CH]1)N(C)C.[Fe].[CH]2[CH][CH][CH][CH]2',
+  "(R)-(+)-tert-Butylsulfinamide": 'CC(C)([S@](N)=O)C',
+  "(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol": 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3',
+  "(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether": 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3)(C)C',
+  "(R)-2-(Methoxymethyl)pyrrolidine": 'COC[C@@H]1NCCC1',
   "(R)-3,3'-Bis[[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]-1,1'-bi-2-naphthol": 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C6C=CC=CC6=C1C7=C8C=CC=CC8=CC(/C=N/[C@H](C9=CC=CC=C9)[C@H](N%10CC%11=C(C=CC=C%11)C%10)C%12=CC=CC=C%12)=C7O',
-  '(R)-4-Benzyl-2-oxazolidinone': 'O=C1OC[C@@H](CC2=CC=CC=C2)N1',
-  '(R)-4-Isopropyl-2-oxazolidinone': 'O=C1OC[C@@H](C(C)C)N1',
-  '(R)-4-Phenylthiazolidine-2-thione': 'S=C1SC[C@@H](C2=CC=CC=C2)N1',
-  '(R)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine': 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@]4([H])N1CCC4',
-  '(R)-N-(2-Benzoylphenyl)-1-benzylpyrrolidine-2-carboxamide': 'O=C([C@@H]1N(CC2=CC=CC=C2)CCC1)NC3=CC=CC=C3C(C4=CC=CC=C4)=O',
-  '(R,R)-(-)-2,3-Bis(tert-butylmethylphosphino)quinoxaline': 'C[P@@](C1=NC2=CC=CC=C2N=C1[P@@](C(C)(C)C)C)C(C)(C)C',
-  '(R,R)-(-)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane': 'CN(C[C@@H](OC)[C@H](OC)CN(C)C)C',
+  "(R)-4-Benzyl-2-oxazolidinone": 'O=C1OC[C@@H](CC2=CC=CC=C2)N1',
+  "(R)-4-Isopropyl-2-oxazolidinone": 'O=C1OC[C@@H](C(C)C)N1',
+  "(R)-4-Phenylthiazolidine-2-thione": 'S=C1SC[C@@H](C2=CC=CC=C2)N1',
+  "(R)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine": 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@]4([H])N1CCC4',
+  "(R)-N-(2-Benzoylphenyl)-1-benzylpyrrolidine-2-carboxamide": 'O=C([C@@H]1N(CC2=CC=CC=C2)CCC1)NC3=CC=CC=C3C(C4=CC=CC=C4)=O',
+  "(R,R)-(-)-2,3-Bis(tert-butylmethylphosphino)quinoxaline": 'C[P@@](C1=NC2=CC=CC=C2N=C1[P@@](C(C)(C)C)C)C(C)(C)C',
+  "(R,R)-(-)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane": 'CN(C[C@@H](OC)[C@H](OC)CN(C)C)C',
   "(R,R)-(-)-N,N'-Bis(3,5-di-tert-butylsalicylidene)-1,2-cyclohexanediamine": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@H](/N=C/C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3O)CCCC2',
   "(R,R)-(-)-N,N'-Bis(3,5-di-tert-butylsalicylidene)-1,2-cyclohexanediaminomanganese(III) Chloride": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=[N]([Mn+]/[N]2=C\\C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3O)\\[C@@]4([H])[C@@]2([H])CCCC4.[Cl-]',
   "(R,R)-(+)-2,2'-Isopropylidenebis(4-tert-butyl-2-oxazoline)": 'CC(C1=N[C@H](C(C)(C)C)CO1)(C2=N[C@H](C(C)(C)C)CO2)C',
-  '(R,R)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane': 'COC1=CC=CC=C1[P@](CC[P@@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
+  "(R,R)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane": 'COC1=CC=CC=C1[P@](CC[P@@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
   "(R,R)-2,2'-Isopropylidenebis(4-phenyl-2-oxazoline)": 'CC(C1=N[C@H](C2=CC=CC=C2)CO1)(C3=N[C@H](C4=CC=CC=C4)CO3)C',
-  '(R,R)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine': 'CC([C@H]1N=C(C2=CC=CC(C3=N[C@H](C(C)C)CO3)=N2)OC1)C',
-  '(R,R)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine': 'C1(C2=N[C@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@H](C5=CC=CC=C5)CO4)=CC=C1',
-  '(R,R)-2-Iodo-1,3-bis[1-(mesitylcarbamoyl)ethoxy]benzene': 'C[C@H](C(NC1=C(C)C=C(C)C=C1C)=O)OC2=C(I)C(O[C@@H](C(NC3=C(C)C=C(C)C=C3C)=O)C)=CC=C2',
-  '(R,R)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N[C@H](C2=CC=CC=C2)[C@H](N)C3=CC=CC=C3)=O)C=C1',
+  "(R,R)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine": 'CC([C@H]1N=C(C2=CC=CC(C3=N[C@H](C(C)C)CO3)=N2)OC1)C',
+  "(R,R)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine": 'C1(C2=N[C@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@H](C5=CC=CC=C5)CO4)=CC=C1',
+  "(R,R)-2-Iodo-1,3-bis[1-(mesitylcarbamoyl)ethoxy]benzene": 'C[C@H](C(NC1=C(C)C=C(C)C=C1C)=O)OC2=C(I)C(O[C@@H](C(NC3=C(C)C=C(C)C=C3C)=O)C)=CC=C2',
+  "(R,R)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N[C@H](C2=CC=CC=C2)[C@H](N)C3=CC=CC=C3)=O)C=C1',
   "(R,R,R)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a:3,4-a']dinaphthalen-4-yl)bis(1-phenylethyl)amine": 'C[C@@H](N(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)[C@@H](C6=CC=CC=C6)C)C7=CC=CC=C7',
   "(S)-(-)-1,1'-Binaphthyl-2,2'-diamine": 'NC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3N',
-  '(S)-(-)-1-Methyl-2-(1-piperidinomethyl)pyrrolidine': 'CN1[C@H](CN2CCCCC2)CCC1',
-  '(S)-(-)-2-(Diphenylmethyl)pyrrolidine': '[C@H]1(C(C2=CC=CC=C2)C3=CC=CC=C3)NCCC1',
+  "(S)-(-)-1-Methyl-2-(1-piperidinomethyl)pyrrolidine": 'CN1[C@H](CN2CCCCC2)CCC1',
+  "(S)-(-)-2-(Diphenylmethyl)pyrrolidine": '[C@H]1(C(C2=CC=CC=C2)C3=CC=CC=C3)NCCC1',
   "(S)-(-)-2-Amino-2'-hydroxy-1,1'-binaphthyl": 'OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3N',
-  '(S)-(-)-2-Aminomethyl-1-ethylpyrrolidine': 'CCN1[C@H](CN)CCC1',
-  '(S)-(-)-3-(tert-Butoxycarbonyl)-4-formyl-2,2-dimethyl-1,3-oxazolidine': 'CC1(C)OC[C@@H](C=O)N1C(OC(C)(C)C)=O',
+  "(S)-(-)-2-Aminomethyl-1-ethylpyrrolidine": 'CCN1[C@H](CN)CCC1',
+  "(S)-(-)-3-(tert-Butoxycarbonyl)-4-formyl-2,2-dimethyl-1,3-oxazolidine": 'CC1(C)OC[C@@H](C=O)N1C(OC(C)(C)C)=O',
   "(S)-(-)-3,3'-Dibromo-5,5',6,6',7,7',8,8'-octahydro-1,1'-bi-2-naphthol": 'OC1=C(Br)C=C2CCCCC2=C1C3=C4CCCCC4=CC(Br)=C3O',
-  '(S)-(-)-3-tert-Butoxycarbonyl-4-methoxycarbonyl-2,2-dimethyl-1,3-oxazolidine': 'CC1(C)OC[C@@H](C(OC)=O)N1C(OC(C)(C)C)=O',
+  "(S)-(-)-3-tert-Butoxycarbonyl-4-methoxycarbonyl-2,2-dimethyl-1,3-oxazolidine": 'CC1(C)OC[C@@H](C(OC)=O)N1C(OC(C)(C)C)=O',
   "(S)-(-)-5,5',6,6',7,7',8,8'-Octahydro-1,1'-bi-2-naphthol": 'OC1=CC=C2CCCCC2=C1C3=C4CCCCC4=CC=C3O',
-  '(S)-(-)-BINAP': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=C(C(C=CC=C4)=C4C=C3)C(C(C=CC=C5)=C5C=C6)=C6P(C7=CC=CC=C7)C8=CC=CC=C8',
-  '(S)-(-)-Indoline-2-carboxylic Acid': 'O=C([C@H]1NC2=C(C=CC=C2)C1)O',
-  '(S)-(-)-tert-Butylsulfinamide': 'CC(C)([S@@](N)=O)C',
-  '(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol': 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3CCCN3',
-  '(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether': 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@H]3NCCC3)(C)C',
-  '(S)-(+)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a': 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
+  "(S)-(-)-BINAP": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=C(C(C=CC=C4)=C4C=C3)C(C(C=CC=C5)=C5C=C6)=C6P(C7=CC=CC=C7)C8=CC=CC=C8',
+  "(S)-(-)-Indoline-2-carboxylic Acid": 'O=C([C@H]1NC2=C(C=CC=C2)C1)O',
+  "(S)-(-)-tert-Butylsulfinamide": 'CC(C)([S@@](N)=O)C',
+  "(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol": 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3CCCN3',
+  "(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether": 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@H]3NCCC3)(C)C',
+  "(S)-(+)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a": 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
   "3,4-a']dinaphthalen-4-yl)dimethylamine": 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
-  '(S)-(+)-1-(2-Pyrrolidinylmethyl)pyrrolidine': 'N1(C[C@H]2NCCC2)CCCC1',
+  "(S)-(+)-1-(2-Pyrrolidinylmethyl)pyrrolidine": 'N1(C[C@H]2NCCC2)CCCC1',
   "(S)-(+)-1,1'-Binaphthyl-2,2'-diyl Bis(trifluoromethanesulfonate)": 'O=S(C(F)(F)F)(OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3OS(C(F)(F)F)(=O)=O)=O',
   "(S)-(+)-1,1'-Binaphthyl-2,2'-diyl Hydrogen Phosphate": 'O=P1(OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)O',
-  '(S)-(+)-2-(Anilinomethyl)pyrrolidine': '[C@H]1(CNC2=CC=CC=C2)NCCC1',
-  '(S)-(+)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine': 'CN1[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
-  '(S)-(+)-4-Benzyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=CC=C2)N1C(CC)=O',
-  '(S)-(+)-4-Isopropyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@H](C(C)C)N1C(CC)=O',
-  '(S)-(+)-4-Phenyl-2-oxazolidinone': 'O=C1OC[C@H](C2=CC=CC=C2)N1',
+  "(S)-(+)-2-(Anilinomethyl)pyrrolidine": '[C@H]1(CNC2=CC=CC=C2)NCCC1',
+  "(S)-(+)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine": 'CN1[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
+  "(S)-(+)-4-Benzyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=CC=C2)N1C(CC)=O',
+  "(S)-(+)-4-Isopropyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@H](C(C)C)N1C(CC)=O',
+  "(S)-(+)-4-Phenyl-2-oxazolidinone": 'O=C1OC[C@H](C2=CC=CC=C2)N1',
   "(S)-(+)-6,6'-Dibromo-1,1'-bi-2-naphthol": 'OC1=CC=C2C=C(Br)C=CC2=C1C3=C4C=CC(Br)=CC4=CC=C3O',
-  '(S)-(+)-p-Toluenesulfinamide': 'CC1=CC=C([S@@](N)=O)C=C1',
+  "(S)-(+)-p-Toluenesulfinamide": 'CC1=CC=C([S@@](N)=O)C=C1',
   "(S)-[4-(Pyridin-4-yl)-4,5-dihydro-3H-dinaphtho[2,1-c:1',2'-e]azepine-2,6-diyl]bis[bis[4-(tert-butyl)phenyl]methanol]": 'OC(C1=C2CN(C3=CC=NC=C3)CC4=C(C(C5=CC=C(C(C)(C)C)C=C5)(C6=CC=C(C(C)(C)C)C=C6)O)C=C7C=CC=CC7=C4C2=C8C=CC=CC8=C1)(C9=CC=C(C(C)(C)C)C=C9)C%10=CC=C(C(C)(C)C)C=C%10',
-  '(S)-2-(Aminomethyl)pyrrolidine': 'NC[C@H]1NCCC1',
-  '(S)-2-(Methoxymethyl)pyrrolidine': 'COC[C@H]1NCCC1',
+  "(S)-2-(Aminomethyl)pyrrolidine": 'NC[C@H]1NCCC1',
+  "(S)-2-(Methoxymethyl)pyrrolidine": 'COC[C@H]1NCCC1',
   "(S)-2,2'-Dimethoxy-1,1'-binaphthyl": 'COC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3OC',
-  '(S)-2,4-Diphenyl-4,5-dihydrooxazole': 'C1(C2=CC=CC=C2)=N[C@@H](C3=CC=CC=C3)CO1',
-  '(S)-2-[(1-Methyl-2-pyrrolidinyl)methyl]isoindoline Dihydrochloride': 'CN1[C@H](CN2CC3=C(C=CC=C3)C2)CCC1.[H]Cl.[H]Cl',
+  "(S)-2,4-Diphenyl-4,5-dihydrooxazole": 'C1(C2=CC=CC=C2)=N[C@@H](C3=CC=CC=C3)CO1',
+  "(S)-2-[(1-Methyl-2-pyrrolidinyl)methyl]isoindoline Dihydrochloride": 'CN1[C@H](CN2CC3=C(C=CC=C3)C2)CCC1.[H]Cl.[H]Cl',
   "(S)-3,3'-Dibromo-1,1'-bi-2-naphthol": 'OC1=C(Br)C=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC(Br)=C3O',
   "(S)-3,3'-Dibromo-2,2'-dimethoxy-1,1'-binaphthyl": 'COC1=C(Br)C=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC(Br)=C3OC',
   "(S)-3-[1-(4-Methoxybenzenesulfonyl)-(4S,5S)-4,5-diphenyl-4,5-dihydro-1H-imidazol-2-yl]-1,1'-binaphthalene-2,2'-diyl Hydrogen Phosphate": 'O=P1(OC2=C(C3=N[C@@H](C4=CC=CC=C4)[C@H](C5=CC=CC=C5)N3S(=O)(C6=CC=C(OC)C=C6)=O)C=C7C=CC=CC7=C2C8=C9C=CC=CC9=CC=C8O1)O',
-  '(S)-4-(4-Aminobenzyl)-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=C(N)C=C2)N1',
-  '(S)-4-Benzyl-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=CC=C2)N1',
-  '(S)-4-Isopropyl-2-oxazolidinone': 'O=C1OC[C@H](C(C)C)N1',
-  '(S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine': 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
-  '(S)-4-Isopropylthiazolidine-2-thione': 'S=C1SC[C@H](C(C)C)N1',
-  '(S)-4-Phenylthiazolidine-2-thione': 'S=C1SC[C@H](C2=CC=CC=C2)N1',
-  '(S)-4-tert-Butyl-2-(2-pyridyl)oxazoline': 'CC([C@@H]1N=C(C2=NC=CC=C2)OC1)(C)C',
-  '(S)-5-(Pyrrolidin-2-yl)-1H-tetrazole': 'C1([C@H]2NCCC2)=NN=NN1',
-  '(S)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine': 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@]4([H])N1CCC4',
-  '(S)-Benzyl-2-[4-(trifluoromethyl)phenyl]-6,7-dihydro-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate': 'FC(C1=CC=C([N+]2=C(CC3=CC=CC=C3)N4C(CCC4)=N2)C=C1)(F)F.F[B-](F)(F)F',
+  "(S)-4-(4-Aminobenzyl)-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=C(N)C=C2)N1',
+  "(S)-4-Benzyl-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=CC=C2)N1',
+  "(S)-4-Isopropyl-2-oxazolidinone": 'O=C1OC[C@H](C(C)C)N1',
+  "(S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine": 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
+  "(S)-4-Isopropylthiazolidine-2-thione": 'S=C1SC[C@H](C(C)C)N1',
+  "(S)-4-Phenylthiazolidine-2-thione": 'S=C1SC[C@H](C2=CC=CC=C2)N1',
+  "(S)-4-tert-Butyl-2-(2-pyridyl)oxazoline": 'CC([C@@H]1N=C(C2=NC=CC=C2)OC1)(C)C',
+  "(S)-5-(Pyrrolidin-2-yl)-1H-tetrazole": 'C1([C@H]2NCCC2)=NN=NN1',
+  "(S)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine": 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@]4([H])N1CCC4',
+  "(S)-Benzyl-2-[4-(trifluoromethyl)phenyl]-6,7-dihydro-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate": 'FC(C1=CC=C([N+]2=C(CC3=CC=CC=C3)N4C(CCC4)=N2)C=C1)(F)F.F[B-](F)(F)F',
   "(S,S)-(-)-2,2'-Isopropylidenebis(4-tert-butyl-2-oxazoline)": 'CC(C1=N[C@@H](C(C)(C)C)CO1)(C2=N[C@@H](C(C)(C)C)CO2)C',
-  '(S,S)-(+)-2,3-Bis(tert-butylmethylphosphino)quinoxaline': 'C[P@](C1=NC2=CC=CC=C2N=C1[P@](C(C)(C)C)C)C(C)(C)C',
-  '(S,S)-(+)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane': 'CN(C[C@H](OC)[C@@H](OC)CN(C)C)C',
-  '(S,S)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane': 'COC1=CC=CC=C1[P@@](CC[P@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
-  '(S,S)-1,2-Bis[(tert-butyl)methylphosphino]ethane Bis(borane)': 'C[P@@](CC[P@@](C(C)(C)C)C)C(C)(C)C.B.B',
+  "(S,S)-(+)-2,3-Bis(tert-butylmethylphosphino)quinoxaline": 'C[P@](C1=NC2=CC=CC=C2N=C1[P@](C(C)(C)C)C)C(C)(C)C',
+  "(S,S)-(+)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane": 'CN(C[C@H](OC)[C@@H](OC)CN(C)C)C',
+  "(S,S)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane": 'COC1=CC=CC=C1[P@@](CC[P@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
+  "(S,S)-1,2-Bis[(tert-butyl)methylphosphino]ethane Bis(borane)": 'C[P@@](CC[P@@](C(C)(C)C)C)C(C)(C)C.B.B',
   "(S,S)-2,2'-Isopropylidenebis(4-phenyl-2-oxazoline)": 'CC(C1=N[C@@H](C2=CC=CC=C2)CO1)(C3=N[C@@H](C4=CC=CC=C4)CO3)C',
-  '(S,S)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine': 'CC([C@@H]1N=C(C2=CC=CC(C3=N[C@@H](C(C)C)CO3)=N2)OC1)C',
-  '(S,S)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine': 'C1(C2=N[C@@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@@H](C5=CC=CC=C5)CO4)=CC=C1',
-  '(S,S)-4,6-Bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene': 'CC1=C(C2=N[C@@H](C(C)C)CO2)C=C(C3=N[C@@H](C(C)C)CO3)C(C)=C1',
-  '(S,S)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N[C@@H](C2=CC=CC=C2)[C@@H](N)C3=CC=CC=C3)=O)C=C1',
+  "(S,S)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine": 'CC([C@@H]1N=C(C2=CC=CC(C3=N[C@@H](C(C)C)CO3)=N2)OC1)C',
+  "(S,S)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine": 'C1(C2=N[C@@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@@H](C5=CC=CC=C5)CO4)=CC=C1',
+  "(S,S)-4,6-Bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene": 'CC1=C(C2=N[C@@H](C(C)C)CO2)C=C(C3=N[C@@H](C(C)C)CO3)C(C)=C1',
+  "(S,S)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N[C@@H](C2=CC=CC=C2)[C@@H](N)C3=CC=CC=C3)=O)C=C1',
   "(S,S,S)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a:3,4-a']dinaphthalen-4-yl)bis(1-phenylethyl)amine": 'C[C@H](N(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)[C@H](C6=CC=CC=C6)C)C7=CC=CC=C7',
-  '(tert-Butyldimethylsilyl)acetylene': 'C#C[Si](C)(C(C)(C)C)C',
-  '(tert-Butyldimethylsilyloxy)malononitrile': 'N#CC(O[Si](C)(C(C)(C)C)C)C#N',
-  '(Trifluoroacetyl)benzotriazole': 'O=C(C1=C2N=NNC2=CC=C1)C(F)(F)F',
-  '(Trifluoromethyl)trimethylsilane': 'C[Si](C)(C(F)(F)F)C',
-  '(Trifluoromethyl)tris(triphenylphosphine)copper(I)': '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  '(Triphenylphosphine)gold(I) Chloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[Au+].[Cl-]',
-  '[(4-Bromobenzyl)oxy](tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(OCC1=CC=C(Br)C=C1)C',
-  '[(4-Methoxyphenyl)ethynyl]trimethylsilane': 'C[Si](C)(C#CC1=CC=C(OC)C=C1)C',
+  "(tert-Butyldimethylsilyl)acetylene": 'C#C[Si](C)(C(C)(C)C)C',
+  "(tert-Butyldimethylsilyloxy)malononitrile": 'N#CC(O[Si](C)(C(C)(C)C)C)C#N',
+  "(Trifluoroacetyl)benzotriazole": 'O=C(C1=C2N=NNC2=CC=C1)C(F)(F)F',
+  "(Trifluoromethyl)trimethylsilane": 'C[Si](C)(C(F)(F)F)C',
+  "(Trifluoromethyl)tris(triphenylphosphine)copper(I)": '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  "(Triphenylphosphine)gold(I) Chloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[Au+].[Cl-]',
+  "[(4-Bromobenzyl)oxy](tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(OCC1=CC=C(Br)C=C1)C',
+  "[(4-Methoxyphenyl)ethynyl]trimethylsilane": 'C[Si](C)(C#CC1=CC=C(OC)C=C1)C',
   "[(R)-2,2'-Bis(diphenylphosphino)-1,1'-binaphthyl]ruthenium(II) Dichloride": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8.[Ru+2].[Cl-].[Cl-]',
   "[(S)-2,2'-Bis(diphenylphosphino)-1,1'-binaphthyl]ruthenium(II) Dichloride": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8.[Ru+2].[Cl-].[Cl-]',
-  '[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II)': 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
-  'PdCl2(dppf)': 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
-  '[1,2-Bis(diphenylphosphino)ethane]nickel(II) Dichloride': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
-  '[1,2-Bis(diphenylphosphino)ethane]palladium(II) Dichloride': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Pd+2].[Cl-].[Cl-]',
-  '[1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene]triphenylphosphine Nickel(II) Dichloride': 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)C(C(C)C)=CC=C1)C.[Ni+2].[Cl-].[Cl-]',
-  '[1,3-Bis(diphenylphosphino)propane]nickel(II) Dichloride': 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
-  '[3-(6-Aminohexylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCNCCCCCCN)OC',
-  '[3-(Diethylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCN(CC)CC)OC',
-  '[3-(N,N-Dimethylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCN(C)C)OC',
-  '[3-(Trimethoxysilyl)propyl]succinic Anhydride': 'O=C(O1)C(CCC[Si](OC)(OC)OC)CC1=O',
-  '[Bis(trifluoroacetoxy)iodo]benzene': 'O=C(OI(C1=CC=CC=C1)OC(C(F)(F)F)=O)C(F)(F)F',
-  '[Bis(trifluoroacetoxy)iodo]pentafluorobenzene': 'FC1=C(I(OC(C(F)(F)F)=O)OC(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
-  '[Di-tert-butyl(chloro)phosphine]palladium(II) Dichloride': 'ClP(C(C)(C)C)C(C)(C)C.[Pd+2].[Cl-].[Cl-]',
-  '[Hydroxy(tosyloxy)iodo]benzene': 'O=S(OI(C1=CC=CC=C1)O)(C2=CC=C(C)C=C2)=O',
-  '1-(2,4,6-Triisopropylbenzenesulfonyl)-1,2,4-triazole': 'O=S(N1N=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
-  '1-(2,4,6-Triisopropylbenzenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
-  '1-(2-Hydroxyethyl)-3-methylimidazolium Chloride': 'C[N+]1=CN(CCO)C=C1.[Cl-]',
-  '1-(2-Hydroxyethyl)-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCO)C=C1.F[B-](F)(F)F',
-  '1-(2-Mesitylene)-1,3-butanedione': 'CC(CC(C1=C(C)C=C(C)C=C1C)=O)=O',
-  '1-(2-Mesitylenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C(C(C)=CC(C)=C2)=C2C)=O',
-  '1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide': 'CCN=C=NCCCN(C)C',
-  EDC: 'CCN=C=NCCCN(C)C',
-  '1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide Hydrochloride': 'CCN=C=NCCCN(C)C.[H]Cl',
-  'EDC HCl': 'CCN=C=NCCCN(C)C.[H]Cl',
-  '1-(4-Bromophenyl)-1,3-butanedione': 'CC(CC(C1=CC=C(Br)C=C1)=O)=O',
-  '1-(4-Chlorophenyl)-4,4,4-trifluoro-1,3-butanedione': 'O=C(C1=CC=C(Cl)C=C1)CC(C(F)(F)F)=O',
-  '1-(4-Fluorophenyl)-1,3-butanedione': 'CC(CC(C1=CC=C(F)C=C1)=O)=O',
-  '1-(4-tert-Butylphenyl)-3-(4-methoxyphenyl)-1,3-propanedione': 'O=C(C1=CC=C(C(C)(C)C)C=C1)CC(C2=CC=C(OC)C=C2)=O',
-  '1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Hexafluorophosphate': 'ClC(N1CCCC1)=[N+]2CCCC2.F[P-](F)(F)(F)(F)F',
-  '1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Tetrafluoroborate': 'ClC(N1CCCC1)=[N+]2CCCC2.F[B-](F)(F)F',
-  '1-(Cyanomethyl)piperidinium Tetrafluoroborate': 'N#CC[NH+]1CCCCC1.F[B-](F)(F)F',
-  '1-(Heptafluorobutyryl)imidazole': 'O=C(N1C=CN=C1)C(F)(F)C(F)(F)C(F)(F)F',
-  '1-(p-Toluenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C2=CC=C(C)C=C2)=O',
-  '1-(Trifluoroacetyl)-4-(dimethylamino)pyridinium Trifluoroacetate': 'CN(C1=CC=[N+](C(C(F)(F)F)=O)C=C1)C.O=C([O-])C(F)(F)F',
-  '1-(Trifluoroacetyl)imidazole': 'O=C(N1C=CN=C1)C(F)(F)F',
-  '1-(Trifluoroacetyl)piperidine': 'O=C(N1CCCCC1)C(F)(F)F',
-  '1-(Trifluoromethanesulfonyl)-1H-benzotriazole': 'O=S(N1N=NC2=CC=CC=C21)(C(F)(F)F)=O',
-  '1-(Trifluoromethanesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C(F)(F)F)=O',
-  '1-(Triisopropylsilyl)-1-propyne': 'CC#C[Si](C(C)C)(C(C)C)C(C)C',
-  '1-(Trimethoxysilyl)naphthalene': 'CO[Si](C1=C2C=CC=CC2=CC=C1)(OC)OC',
-  '1-(Trimethylsilyl)-1-pentyne': 'CCCC#C[Si](C)(C)C',
-  '1-(Trimethylsilyl)-1-propyne': 'CC#C[Si](C)(C)C',
+  "[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II)": 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
+  "PdCl2(dppf)": 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
+  "[1,2-Bis(diphenylphosphino)ethane]nickel(II) Dichloride": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
+  "[1,2-Bis(diphenylphosphino)ethane]palladium(II) Dichloride": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Pd+2].[Cl-].[Cl-]',
+  "[1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene]triphenylphosphine Nickel(II) Dichloride": 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)C(C(C)C)=CC=C1)C.[Ni+2].[Cl-].[Cl-]',
+  "[1,3-Bis(diphenylphosphino)propane]nickel(II) Dichloride": 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
+  "[3-(6-Aminohexylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCNCCCCCCN)OC',
+  "[3-(Diethylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCN(CC)CC)OC',
+  "[3-(N,N-Dimethylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCN(C)C)OC',
+  "[3-(Trimethoxysilyl)propyl]succinic Anhydride": 'O=C(O1)C(CCC[Si](OC)(OC)OC)CC1=O',
+  "[Bis(trifluoroacetoxy)iodo]benzene": 'O=C(OI(C1=CC=CC=C1)OC(C(F)(F)F)=O)C(F)(F)F',
+  "[Bis(trifluoroacetoxy)iodo]pentafluorobenzene": 'FC1=C(I(OC(C(F)(F)F)=O)OC(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
+  "[Di-tert-butyl(chloro)phosphine]palladium(II) Dichloride": 'ClP(C(C)(C)C)C(C)(C)C.[Pd+2].[Cl-].[Cl-]',
+  "[Hydroxy(tosyloxy)iodo]benzene": 'O=S(OI(C1=CC=CC=C1)O)(C2=CC=C(C)C=C2)=O',
+  "1-(2,4,6-Triisopropylbenzenesulfonyl)-1,2,4-triazole": 'O=S(N1N=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
+  "1-(2,4,6-Triisopropylbenzenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
+  "1-(2-Hydroxyethyl)-3-methylimidazolium Chloride": 'C[N+]1=CN(CCO)C=C1.[Cl-]',
+  "1-(2-Hydroxyethyl)-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCO)C=C1.F[B-](F)(F)F',
+  "1-(2-Mesitylene)-1,3-butanedione": 'CC(CC(C1=C(C)C=C(C)C=C1C)=O)=O',
+  "1-(2-Mesitylenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C(C(C)=CC(C)=C2)=C2C)=O',
+  "1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide": 'CCN=C=NCCCN(C)C',
+  "EDC": 'CCN=C=NCCCN(C)C',
+  "1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide Hydrochloride": 'CCN=C=NCCCN(C)C.[H]Cl',
+  "EDC HCl": 'CCN=C=NCCCN(C)C.[H]Cl',
+  "1-(4-Bromophenyl)-1,3-butanedione": 'CC(CC(C1=CC=C(Br)C=C1)=O)=O',
+  "1-(4-Chlorophenyl)-4,4,4-trifluoro-1,3-butanedione": 'O=C(C1=CC=C(Cl)C=C1)CC(C(F)(F)F)=O',
+  "1-(4-Fluorophenyl)-1,3-butanedione": 'CC(CC(C1=CC=C(F)C=C1)=O)=O',
+  "1-(4-tert-Butylphenyl)-3-(4-methoxyphenyl)-1,3-propanedione": 'O=C(C1=CC=C(C(C)(C)C)C=C1)CC(C2=CC=C(OC)C=C2)=O',
+  "1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Hexafluorophosphate": 'ClC(N1CCCC1)=[N+]2CCCC2.F[P-](F)(F)(F)(F)F',
+  "1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Tetrafluoroborate": 'ClC(N1CCCC1)=[N+]2CCCC2.F[B-](F)(F)F',
+  "1-(Cyanomethyl)piperidinium Tetrafluoroborate": 'N#CC[NH+]1CCCCC1.F[B-](F)(F)F',
+  "1-(Heptafluorobutyryl)imidazole": 'O=C(N1C=CN=C1)C(F)(F)C(F)(F)C(F)(F)F',
+  "1-(p-Toluenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C2=CC=C(C)C=C2)=O',
+  "1-(Trifluoroacetyl)-4-(dimethylamino)pyridinium Trifluoroacetate": 'CN(C1=CC=[N+](C(C(F)(F)F)=O)C=C1)C.O=C([O-])C(F)(F)F',
+  "1-(Trifluoroacetyl)imidazole": 'O=C(N1C=CN=C1)C(F)(F)F',
+  "1-(Trifluoroacetyl)piperidine": 'O=C(N1CCCCC1)C(F)(F)F',
+  "1-(Trifluoromethanesulfonyl)-1H-benzotriazole": 'O=S(N1N=NC2=CC=CC=C21)(C(F)(F)F)=O',
+  "1-(Trifluoromethanesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C(F)(F)F)=O',
+  "1-(Triisopropylsilyl)-1-propyne": 'CC#C[Si](C(C)C)(C(C)C)C(C)C',
+  "1-(Trimethoxysilyl)naphthalene": 'CO[Si](C1=C2C=CC=CC2=CC=C1)(OC)OC',
+  "1-(Trimethylsilyl)-1-pentyne": 'CCCC#C[Si](C)(C)C',
+  "1-(Trimethylsilyl)-1-propyne": 'CC#C[Si](C)(C)C',
   "1,1'-(2,6-Pyridinediyl)bis(3-methylimidazolium) Dibromide": 'C[N+]1=CN(C2=NC(N3C=C[N+](C)=C3)=CC=C2)C=C1.[Br-].[Br-]',
-  '1,1,1,3,3,3-Hexafluoroisopropyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OC(C(F)(F)F)C(F)(F)F)=O',
-  '1,1,1,3,3-Pentamethyldisiloxane': 'C[SiH](C)O[Si](C)(C)C',
-  '1,1,1,3,5,5,5-Heptamethyl-3-[(trimethylsilyl)oxy]trisiloxane': 'C[Si](O[Si](O[Si](C)(C)C)(C)O[Si](C)(C)C)(C)C',
-  '1,1,1,3,5,5,5-Heptamethyltrisiloxane': 'C[Si](C)(C)O[SiH](C)O[Si](C)(C)C',
-  '1,1,1,3,5,7,7,7-Octamethyltetrasiloxane': 'C[Si](C)(C)O[SiH](C)O[SiH](C)O[Si](C)(C)C',
-  '1,1,1,5,5,5-Hexamethyl-3-[(trimethylsilyl)oxy]-3-vinyltrisiloxane': 'C=C[Si](O[Si](C)(C)C)(O[Si](C)(C)C)O[Si](C)(C)C',
-  '1,1,1,5,5,5-Hexamethyl-3-phenyl-3-(trimethylsilyloxy)trisiloxane': 'C[Si](O[Si](O[Si](C)(C)C)(C1=CC=CC=C1)O[Si](C)(C)C)(C)C',
-  '1,1,2,2-Tetrachloro-1,2-dimethyldisilane': 'C[Si](Cl)(Cl)[Si](Cl)(Cl)C',
-  '1,1,2,2-Tetraphenyldisilane': '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)[SiH](C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,1,2,3,4,5-Hexaphenylsilole': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)[Si]1(C6=CC=CC=C6)C7=CC=CC=C7',
-  '1,1,3,3,5,5,7,7,9,9,11,11,13,13-Tetradecamethylheptasiloxane': 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
-  '1,1,3,3,5,5,7,7,9,9,11,11-Dodecamethylhexasiloxane': 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
-  '1,1,3,3,5,5-Hexaethoxy-1,3,5-trisilacyclohexane': 'CCO[Si]1(OCC)C[Si](OCC)(OCC)C[Si](OCC)(OCC)C1',
-  '1,1,3,3,5,5-Hexamethyltrisiloxane': 'C[SiH](C)O[Si](C)(C)O[SiH](C)C',
-  '1,1,3,3-Tetramethyl-1,3-diphenyldisiloxane': 'C[Si](C1=CC=CC=C1)(C)O[Si](C)(C)C2=CC=CC=C2',
-  '1,1,3,3-Tetramethyldisiloxane': 'C[SiH](C)O[SiH](C)C',
-  '1,1,3,3-Tetramethylguanidine': 'N=C(N(C)C)N(C)C',
-  '1,1,4,7,10,10-Hexamethyltriethylenetetramine': 'CN(CCN(C)C)CCN(C)CCN(C)C',
-  '1,1,5,5-Tetrafluoro-2,4-pentanedione': 'O=C(CC(C(F)F)=O)C(F)F',
-  '1,10-Phenanthroline Monohydrate': '[H]O[H].C12=CC=C3C=CC=NC3=C1N=CC=C2',
-  '1,10-Phenanthroline-5,6-dione': 'O=C1C2=C(N=CC=C2)C3=C(C=CC=N3)C1=O',
+  "1,1,1,3,3,3-Hexafluoroisopropyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OC(C(F)(F)F)C(F)(F)F)=O',
+  "1,1,1,3,3-Pentamethyldisiloxane": 'C[SiH](C)O[Si](C)(C)C',
+  "1,1,1,3,5,5,5-Heptamethyl-3-[(trimethylsilyl)oxy]trisiloxane": 'C[Si](O[Si](O[Si](C)(C)C)(C)O[Si](C)(C)C)(C)C',
+  "1,1,1,3,5,5,5-Heptamethyltrisiloxane": 'C[Si](C)(C)O[SiH](C)O[Si](C)(C)C',
+  "1,1,1,3,5,7,7,7-Octamethyltetrasiloxane": 'C[Si](C)(C)O[SiH](C)O[SiH](C)O[Si](C)(C)C',
+  "1,1,1,5,5,5-Hexamethyl-3-[(trimethylsilyl)oxy]-3-vinyltrisiloxane": 'C=C[Si](O[Si](C)(C)C)(O[Si](C)(C)C)O[Si](C)(C)C',
+  "1,1,1,5,5,5-Hexamethyl-3-phenyl-3-(trimethylsilyloxy)trisiloxane": 'C[Si](O[Si](O[Si](C)(C)C)(C1=CC=CC=C1)O[Si](C)(C)C)(C)C',
+  "1,1,2,2-Tetrachloro-1,2-dimethyldisilane": 'C[Si](Cl)(Cl)[Si](Cl)(Cl)C',
+  "1,1,2,2-Tetraphenyldisilane": '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)[SiH](C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,1,2,3,4,5-Hexaphenylsilole": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)[Si]1(C6=CC=CC=C6)C7=CC=CC=C7',
+  "1,1,3,3,5,5,7,7,9,9,11,11,13,13-Tetradecamethylheptasiloxane": 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
+  "1,1,3,3,5,5,7,7,9,9,11,11-Dodecamethylhexasiloxane": 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
+  "1,1,3,3,5,5-Hexaethoxy-1,3,5-trisilacyclohexane": 'CCO[Si]1(OCC)C[Si](OCC)(OCC)C[Si](OCC)(OCC)C1',
+  "1,1,3,3,5,5-Hexamethyltrisiloxane": 'C[SiH](C)O[Si](C)(C)O[SiH](C)C',
+  "1,1,3,3-Tetramethyl-1,3-diphenyldisiloxane": 'C[Si](C1=CC=CC=C1)(C)O[Si](C)(C)C2=CC=CC=C2',
+  "1,1,3,3-Tetramethyldisiloxane": 'C[SiH](C)O[SiH](C)C',
+  "1,1,3,3-Tetramethylguanidine": 'N=C(N(C)C)N(C)C',
+  "1,1,4,7,10,10-Hexamethyltriethylenetetramine": 'CN(CCN(C)C)CCN(C)CCN(C)C',
+  "1,1,5,5-Tetrafluoro-2,4-pentanedione": 'O=C(CC(C(F)F)=O)C(F)F',
+  "1,10-Phenanthroline Monohydrate": '[H]O[H].C12=CC=C3C=CC=NC3=C1N=CC=C2',
+  "1,10-Phenanthroline-5,6-dione": 'O=C1C2=C(N=CC=C2)C3=C(C=CC=N3)C1=O',
   "1,1'-Bi-2-naphthol": 'OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3O',
   "1,1'-Carbonyldi(1,2,4-triazole)": 'O=C(N1N=CN=C1)N2N=CN=C2',
   "1,1'-Carbonyldiimidazole": 'O=C(N1C=CN=C1)N2C=CN=C2',
   "1,1'-Difluoro-2,2'-bipyridinium Bis(tetrafluoroborate)": 'F[N+]1=CC=CC=C1C2=CC=CC=[N+]2F.F[B-](F)(F)F.F[B-](F)(F)F',
-  '1,1-Dimethyl-1,3-dihydrobenzo[c][1,2]oxasilole': 'C[Si]1(C)OCC2=CC=CC=C12',
-  '1,1-Dimethylpropylmagnesium chloride': 'Cl[Mg]C(C)(C)CC',
+  "1,1-Dimethyl-1,3-dihydrobenzo[c][1,2]oxasilole": 'C[Si]1(C)OCC2=CC=CC=C12',
+  "1,1-Dimethylpropylmagnesium chloride": 'Cl[Mg]C(C)(C)CC',
   "1,1'-Oxalyldiimidazole": 'O=C(N1C=CN=C1)C(N2C=CN=C2)=O',
-  '1,2,3,4,5-Pentamethylcyclopentadiene': 'CC1C(C)=C(C)C(C)=C1C',
-  '1,2,3,4,5-Pentaphenyl-1,3-cyclopentadiene': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1C6=CC=CC=C6',
-  '1,2,3,4-Tetrahydroquinoline': 'C12=C(NCCC2)C=CC=C1',
-  '1,2,3,4-Tetraphenyl-1,3-cyclopentadiene': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1',
-  '1,2,4-Triazole': 'N1N=CN=C1',
-  '1,2-Benzenedisulfonic Imide': 'O=S(C1=CC=CC=C1S2(=O)=O)(N2)=O',
-  '1,2-Bis(3-indenyl)ethane': 'C1(CCC2=CCC3=C2C=CC=C3)=CCC4=C1C=CC=C4',
+  "1,2,3,4,5-Pentamethylcyclopentadiene": 'CC1C(C)=C(C)C(C)=C1C',
+  "1,2,3,4,5-Pentaphenyl-1,3-cyclopentadiene": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1C6=CC=CC=C6',
+  "1,2,3,4-Tetrahydroquinoline": 'C12=C(NCCC2)C=CC=C1',
+  "1,2,3,4-Tetraphenyl-1,3-cyclopentadiene": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1',
+  "1,2,4-Triazole": 'N1N=CN=C1',
+  "1,2-Benzenedisulfonic Imide": 'O=S(C1=CC=CC=C1S2(=O)=O)(N2)=O',
+  "1,2-Bis(3-indenyl)ethane": 'C1(CCC2=CCC3=C2C=CC=C3)=CCC4=C1C=CC=C4',
   "1,2-Bis(4'-methyl-2,2'-bipyridin-4-yl)ethane": 'CC1=CC(C2=NC=CC(CCC3=CC(C4=NC=CC(C)=C4)=NC=C3)=C2)=NC=C1',
-  '1,2-Bis(dimethylphosphino)ethane': 'CP(CCP(C)C)C',
-  '1,2-Bis(diphenylphosphino)benzene': 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=CC=C1P(C4=CC=CC=C4)C5=CC=CC=C5',
-  '1,2-Bis(diphenylphosphino)ethane': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,2-Bis(phenylsulfinyl)ethane Palladium(II) Diacetate': 'O=S(CCS(C1=CC=CC=C1)=O)C2=CC=CC=C2.CC([O-])=O.CC([O-])=O.[Pd+2]',
-  '1,2-Bis(tert-butylthio)ethane Borane': 'CC(SCCSC(C)(C)C)(C)C.B',
-  '1,2-Bis(trichlorosilyl)ethane': 'Cl[Si](CC[Si](Cl)(Cl)Cl)(Cl)Cl',
-  '1,2-Bis(triethoxysilyl)ethane': 'CCO[Si](CC[Si](OCC)(OCC)OCC)(OCC)OCC',
-  '1,2-Bis(trimethylsilyl)benzene': 'C[Si](C1=CC=CC=C1[Si](C)(C)C)(C)C',
-  '1,2-Bis[bis(pentafluorophenyl)phosphino]ethane': 'FC1=C(F)C(F)=C(F)C(F)=C1P(CCP(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F)C4=C(F)C(F)=C(F)C(F)=C4F',
-  '1,2-Dibromo-1,1,2,2-tetrachloroethane': 'ClC(Cl)(Br)C(Cl)(Br)Cl',
-  '1,2-Dibromo-1,1,2,2-tetrafluoroethane': 'FC(F)(Br)C(F)(Br)F',
-  '1,2-Dichlorotetramethyldisilane': 'Cl[Si](C)(C)[Si](C)(C)Cl',
-  '1,2-Dimethyl-3-propylimidazolium Iodide': 'CCC[N+]1=C(C)N(C)C=C1.[I-]',
-  '1,2-Phenylenediamine': 'NC1=CC=CC=C1N',
-  '1,2-xylene': 'CC1=CC=CC=C1C',
-  '1,3,5,7-Cyclooctatetraene': 'C1=C\\C=C/C=C\\C=C/1',
-  '1,3,5-Cycloheptatriene': 'C1=CC=CC=CC1',
-  '1,3,5-Trimethylbenzene': 'CC1=CC(C)=CC(C)=C1',
-  '1,3,5-Tris(3,3,3-trifluoropropyl)-1,3,5-trimethylcyclotrisiloxane': 'C[Si]1(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O1',
-  '1,3-Bis(2,4,6-trimethylphenyl)imidazolinium Chloride': 'CC1=C([N+]2=CN(C3=C(C)C=C(C)C=C3C)CC2)C(C)=CC(C)=C1.[Cl-]',
-  '1,3-Bis(2,6-diisopropylphenyl)-1,3,2-diazaphospholidine 2-Oxide': 'CC(C1=C(N2P(N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)=O)C(C(C)C)=CC=C1)C',
-  '1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene': 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C',
-  '1,3-Bis(2,6-diisopropylphenyl)imidazolidin-2-ylidene': 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C',
-  '1,3-Bis(2,6-diisopropylphenyl)imidazolinium Chloride': 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C.[Cl-]',
-  '1,3-Bis(2,6-diisopropylphenyl)imidazolium Chloride': 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
-  '1,3-Bis(4-hydroxybutyl)tetramethyldisiloxane': 'OCCCC[Si](C)(C)O[Si](C)(C)CCCCO',
-  '1,3-Bis(4-methoxyphenyl)-1,3-propanedione': 'O=C(C1=CC=C(OC)C=C1)CC(C2=CC=C(OC)C=C2)=O',
-  '1,3-Bis(chloromethyl)tetramethyldisiloxane': 'ClC[Si](C)(C)O[Si](C)(C)CCl',
-  '1,3-Bis(diphenylphosphino)propane': 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,3-Bis[(di-tert-butylphosphino)oxy]benzene': 'CC(P(OC1=CC(OP(C(C)(C)C)C(C)(C)C)=CC=C1)C(C)(C)C)(C)C',
-  '1,3-Bis[(trimethylsilyl)ethynyl]benzene': 'C[Si](C#CC1=CC(C#C[Si](C)(C)C)=CC=C1)(C)C',
-  '1,3-Di(1-adamantyl)imidazolinium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)CC1',
-  '1,3-Di(1-adamantyl)imidazolium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)C=C1',
-  '1,3-Di(2-pyridyl)-1,3-propanedione': 'O=C(C1=NC=CC=C1)CC(C2=NC=CC=C2)=O',
-  '1,3-Dibromo-5,5-dimethylhydantoin': 'O=C(N1Br)N(Br)C(C)(C)C1=O',
-  '1,3-Dicyclohexylimidazolium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C2CCCCC2)=CN(C3CCCCC3)C=C1',
-  '1,3-Diiodo-5,5-dimethylhydantoin': 'O=C(N1I)N(I)C(C)(C)C1=O',
-  '1,3-Diisopropylimidazolinium Tetrafluoroborate': 'CC([N+]1=CN(C(C)C)CC1)C.F[B-](F)(F)F',
-  '1,3-Diisopropylimidazolium Tetrafluoroborate': 'CC([N+]1=CN(C(C)C)C=C1)C.F[B-](F)(F)F',
-  '1,3-Dimesitylimidazol-2-ylidene': 'CC1=CC(C)=CC(C)=C1N2[C]N(C3=C(C)C=C(C)C=C3C)C=C2',
-  '1,3-Dimesitylimidazolium Chloride': 'CC1=CC(C)=CC(C)=C1[N+]2=CN(C3=C(C)C=C(C)C=C3C)C=C2.[Cl-]',
-  '1,3-Dimethoxy-1,1,3,3-tetraphenyldisiloxane': 'CO[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O[Si](C3=CC=CC=C3)(OC)C4=CC=CC=C4',
-  '1,3-Dimethylimidazolium Chloride': 'C[N+]1=CN(C)C=C1.[Cl-]',
-  '1,3-Dimethylimidazolium Dimethyl Phosphate': 'C[N+]1=CN(C)C=C1.O=P(OC)([O-])OC',
-  '1,3-Dimethylimidazolium Iodide': 'C[N+]1=CN(C)C=C1.[I-]',
-  '1,3-Dimethylimidazolium Methyl Sulfate': 'C[N+]1=CN(C)C=C1.O=S(OC)([O-])=O',
-  '1,3-Diphenyl-1,3-propanedione': 'O=C(C1=CC=CC=C1)CC(C2=CC=CC=C2)=O',
-  '1,3-Di-tert-butylimidazol-2-ylidene': 'CC(N1[C]N(C(C)(C)C)C=C1)(C)C',
-  '1,3-Di-tert-butylimidazolium Tetrafluoroborate': 'CC([N+]1=CN(C(C)(C)C)C=C1)(C)C.F[B-](F)(F)F',
-  '1,3-Divinyltetramethyldisiloxane': 'C=C[Si](C)(C)O[Si](C)(C)C=C',
-  '1,3-xylene': 'CC1=CC=CC(C)=C1',
-  '1,4,7,10,13,16-Hexaazacyclooctadecane': 'N1CCNCCNCCNCCNCCNCC1',
-  '1,4,7,10,13,16-Hexaazacyclooctadecane Hexahydrochloride': '[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCCNCCNCC1',
-  '1,4,7,10-Tetraazacyclododecane': 'N1CCNCCNCCNCC1',
-  '1,4,7,10-Tetraazacyclododecane Tetrahydrochloride': '[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCC1',
-  '1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetic Acid': 'O=C(O)CN1CCN(CC(O)=O)CCN(CC(O)=O)CCN(CC(O)=O)CC1',
-  '1,4,7,10-Tetrabenzyl-1,4,7,10-tetraazacyclododecane': 'N1(CC2=CC=CC=C2)CCN(CC3=CC=CC=C3)CCN(CC4=CC=CC=C4)CCN(CC5=CC=CC=C5)CC1',
-  '1,4,7-Triazacyclononane': 'N1CCNCCNCC1',
-  '1,4,7-Trimethyl-1,4,7-triazacyclononane (stabilized with NaHCO3)': 'CN1CCN(C)CCN(C)CC1',
-  '1,4,8,11-Tetramethyl-1,4,8,11-tetraazacyclotetradecane': 'CN1CCN(C)CCCN(C)CCN(C)CCC1',
-  '1,4-Bis(dimethylsilyl)benzene': 'C[SiH](C1=CC=C([SiH](C)C)C=C1)C',
-  '1,4-Bis(diphenylphosphino)butane': 'P(CCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,4-Bis(trimethylsilyl)-1,3-butadiyne': 'C[Si](C#CC#C[Si](C)(C)C)(C)C',
-  '1,4-Cyclohexadiene': 'C1=CCC=CC1',
-  '1,4-Cyclohexadiene (stabilized with BHT)': 'C1=CCC=CC1',
+  "1,2-Bis(dimethylphosphino)ethane": 'CP(CCP(C)C)C',
+  "1,2-Bis(diphenylphosphino)benzene": 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=CC=C1P(C4=CC=CC=C4)C5=CC=CC=C5',
+  "1,2-Bis(diphenylphosphino)ethane": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,2-Bis(phenylsulfinyl)ethane Palladium(II) Diacetate": 'O=S(CCS(C1=CC=CC=C1)=O)C2=CC=CC=C2.CC([O-])=O.CC([O-])=O.[Pd+2]',
+  "1,2-Bis(tert-butylthio)ethane Borane": 'CC(SCCSC(C)(C)C)(C)C.B',
+  "1,2-Bis(trichlorosilyl)ethane": 'Cl[Si](CC[Si](Cl)(Cl)Cl)(Cl)Cl',
+  "1,2-Bis(triethoxysilyl)ethane": 'CCO[Si](CC[Si](OCC)(OCC)OCC)(OCC)OCC',
+  "1,2-Bis(trimethylsilyl)benzene": 'C[Si](C1=CC=CC=C1[Si](C)(C)C)(C)C',
+  "1,2-Bis[bis(pentafluorophenyl)phosphino]ethane": 'FC1=C(F)C(F)=C(F)C(F)=C1P(CCP(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F)C4=C(F)C(F)=C(F)C(F)=C4F',
+  "1,2-Dibromo-1,1,2,2-tetrachloroethane": 'ClC(Cl)(Br)C(Cl)(Br)Cl',
+  "1,2-Dibromo-1,1,2,2-tetrafluoroethane": 'FC(F)(Br)C(F)(Br)F',
+  "1,2-Dichlorotetramethyldisilane": 'Cl[Si](C)(C)[Si](C)(C)Cl',
+  "1,2-Dimethyl-3-propylimidazolium Iodide": 'CCC[N+]1=C(C)N(C)C=C1.[I-]',
+  "1,2-Phenylenediamine": 'NC1=CC=CC=C1N',
+  "1,2-xylene": 'CC1=CC=CC=C1C',
+  "1,3,5,7-Cyclooctatetraene": 'C1=C\\C=C/C=C\\C=C/1',
+  "1,3,5-Cycloheptatriene": 'C1=CC=CC=CC1',
+  "1,3,5-Trimethylbenzene": 'CC1=CC(C)=CC(C)=C1',
+  "1,3,5-Tris(3,3,3-trifluoropropyl)-1,3,5-trimethylcyclotrisiloxane": 'C[Si]1(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O1',
+  "1,3-Bis(2,4,6-trimethylphenyl)imidazolinium Chloride": 'CC1=C([N+]2=CN(C3=C(C)C=C(C)C=C3C)CC2)C(C)=CC(C)=C1.[Cl-]',
+  "1,3-Bis(2,6-diisopropylphenyl)-1,3,2-diazaphospholidine 2-Oxide": 'CC(C1=C(N2P(N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)=O)C(C(C)C)=CC=C1)C',
+  "1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene": 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C',
+  "1,3-Bis(2,6-diisopropylphenyl)imidazolidin-2-ylidene": 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C',
+  "1,3-Bis(2,6-diisopropylphenyl)imidazolinium Chloride": 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C.[Cl-]',
+  "1,3-Bis(2,6-diisopropylphenyl)imidazolium Chloride": 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
+  "1,3-Bis(4-hydroxybutyl)tetramethyldisiloxane": 'OCCCC[Si](C)(C)O[Si](C)(C)CCCCO',
+  "1,3-Bis(4-methoxyphenyl)-1,3-propanedione": 'O=C(C1=CC=C(OC)C=C1)CC(C2=CC=C(OC)C=C2)=O',
+  "1,3-Bis(chloromethyl)tetramethyldisiloxane": 'ClC[Si](C)(C)O[Si](C)(C)CCl',
+  "1,3-Bis(diphenylphosphino)propane": 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,3-Bis[(di-tert-butylphosphino)oxy]benzene": 'CC(P(OC1=CC(OP(C(C)(C)C)C(C)(C)C)=CC=C1)C(C)(C)C)(C)C',
+  "1,3-Bis[(trimethylsilyl)ethynyl]benzene": 'C[Si](C#CC1=CC(C#C[Si](C)(C)C)=CC=C1)(C)C',
+  "1,3-Di(1-adamantyl)imidazolinium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)CC1',
+  "1,3-Di(1-adamantyl)imidazolium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)C=C1',
+  "1,3-Di(2-pyridyl)-1,3-propanedione": 'O=C(C1=NC=CC=C1)CC(C2=NC=CC=C2)=O',
+  "1,3-Dibromo-5,5-dimethylhydantoin": 'O=C(N1Br)N(Br)C(C)(C)C1=O',
+  "1,3-Dicyclohexylimidazolium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C2CCCCC2)=CN(C3CCCCC3)C=C1',
+  "1,3-Diiodo-5,5-dimethylhydantoin": 'O=C(N1I)N(I)C(C)(C)C1=O',
+  "1,3-Diisopropylimidazolinium Tetrafluoroborate": 'CC([N+]1=CN(C(C)C)CC1)C.F[B-](F)(F)F',
+  "1,3-Diisopropylimidazolium Tetrafluoroborate": 'CC([N+]1=CN(C(C)C)C=C1)C.F[B-](F)(F)F',
+  "1,3-Dimesitylimidazol-2-ylidene": 'CC1=CC(C)=CC(C)=C1N2[C]N(C3=C(C)C=C(C)C=C3C)C=C2',
+  "1,3-Dimesitylimidazolium Chloride": 'CC1=CC(C)=CC(C)=C1[N+]2=CN(C3=C(C)C=C(C)C=C3C)C=C2.[Cl-]',
+  "1,3-Dimethoxy-1,1,3,3-tetraphenyldisiloxane": 'CO[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O[Si](C3=CC=CC=C3)(OC)C4=CC=CC=C4',
+  "1,3-Dimethylimidazolium Chloride": 'C[N+]1=CN(C)C=C1.[Cl-]',
+  "1,3-Dimethylimidazolium Dimethyl Phosphate": 'C[N+]1=CN(C)C=C1.O=P(OC)([O-])OC',
+  "1,3-Dimethylimidazolium Iodide": 'C[N+]1=CN(C)C=C1.[I-]',
+  "1,3-Dimethylimidazolium Methyl Sulfate": 'C[N+]1=CN(C)C=C1.O=S(OC)([O-])=O',
+  "1,3-Diphenyl-1,3-propanedione": 'O=C(C1=CC=CC=C1)CC(C2=CC=CC=C2)=O',
+  "1,3-Di-tert-butylimidazol-2-ylidene": 'CC(N1[C]N(C(C)(C)C)C=C1)(C)C',
+  "1,3-Di-tert-butylimidazolium Tetrafluoroborate": 'CC([N+]1=CN(C(C)(C)C)C=C1)(C)C.F[B-](F)(F)F',
+  "1,3-Divinyltetramethyldisiloxane": 'C=C[Si](C)(C)O[Si](C)(C)C=C',
+  "1,3-xylene": 'CC1=CC=CC(C)=C1',
+  "1,4,7,10,13,16-Hexaazacyclooctadecane": 'N1CCNCCNCCNCCNCCNCC1',
+  "1,4,7,10,13,16-Hexaazacyclooctadecane Hexahydrochloride": '[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCCNCCNCC1',
+  "1,4,7,10-Tetraazacyclododecane": 'N1CCNCCNCCNCC1',
+  "1,4,7,10-Tetraazacyclododecane Tetrahydrochloride": '[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCC1',
+  "1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetic Acid": 'O=C(O)CN1CCN(CC(O)=O)CCN(CC(O)=O)CCN(CC(O)=O)CC1',
+  "1,4,7,10-Tetrabenzyl-1,4,7,10-tetraazacyclododecane": 'N1(CC2=CC=CC=C2)CCN(CC3=CC=CC=C3)CCN(CC4=CC=CC=C4)CCN(CC5=CC=CC=C5)CC1',
+  "1,4,7-Triazacyclononane": 'N1CCNCCNCC1',
+  "1,4,7-Trimethyl-1,4,7-triazacyclononane (stabilized with NaHCO3)": 'CN1CCN(C)CCN(C)CC1',
+  "1,4,8,11-Tetramethyl-1,4,8,11-tetraazacyclotetradecane": 'CN1CCN(C)CCCN(C)CCN(C)CCC1',
+  "1,4-Bis(dimethylsilyl)benzene": 'C[SiH](C1=CC=C([SiH](C)C)C=C1)C',
+  "1,4-Bis(diphenylphosphino)butane": 'P(CCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,4-Bis(trimethylsilyl)-1,3-butadiyne": 'C[Si](C#CC#C[Si](C)(C)C)(C)C',
+  "1,4-Cyclohexadiene": 'C1=CCC=CC1',
+  "1,4-Cyclohexadiene (stabilized with BHT)": 'C1=CCC=CC1',
   "1,4-Di[[2,2':6',2''-terpyridin]-4'-yl]benzene": 'C1(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)=CC=C(C5=CC(C6=NC=CC=C6)=NC(C7=NC=CC=C7)=C5)C=C1',
-  '1,4-Diazabicyclo[2.2.2]octane': 'N1(CC2)CCN2CC1',
-  '1,4-Dimethyl-1,2,4-triazolium Iodide': 'CN1C=N[N+](C)=C1.[I-]',
-  '1,4-dioxane': 'C1COCCO1',
-  '1,4-xylene': 'CC1=CC=C(C)C=C1',
-  '1,5,7-Triazabicyclo[4.4.0]dec-5-ene': 'N12CCCN=C1NCCC2',
-  '1,5,9-Triazacyclododecane': 'N1CCCNCCCNCCC1',
-  '1,5-Bis(diphenylphosphino)pentane': 'P(CCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,5-Cyclooctadiene': 'C1=C\\CC/C=C\\CC/1',
+  "1,4-Diazabicyclo[2.2.2]octane": 'N1(CC2)CCN2CC1',
+  "1,4-Dimethyl-1,2,4-triazolium Iodide": 'CN1C=N[N+](C)=C1.[I-]',
+  "1,4-dioxane": 'C1COCCO1',
+  "1,4-xylene": 'CC1=CC=C(C)C=C1',
+  "1,5,7-Triazabicyclo[4.4.0]dec-5-ene": 'N12CCCN=C1NCCC2',
+  "1,5,9-Triazacyclododecane": 'N1CCCNCCCNCCC1',
+  "1,5-Bis(diphenylphosphino)pentane": 'P(CCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,5-Cyclooctadiene": 'C1=C\\CC/C=C\\CC/1',
   "1,5-Cyclooctadiene [stabilized with Octadecyl 3-(3',5'-Di-tert-butyl-4'-hydroxyphenyl)propionate]": 'C1=C\\CC/C=C\\CC/1',
-  '1,5-Diazabicyclo[4.3.0]-5-nonene': 'N12CCCN=C1CCC2',
-  '1,5-Diazabicyclo[4.3.0]non-5-ene': 'N12CCCN=C1CCC2',
-  '1,5-Dichloro-1,1,3,3,5,5-hexamethyltrisiloxane': 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(Cl)C',
-  '1,5-Dimethyl-2,4-bis[2-(trimethylsilyl)ethynyl]benzene': 'C[Si](C#CC1=C(C)C=C(C)C(C#C[Si](C)(C)C)=C1)(C)C',
-  '1,5-Hexadiene': 'C=CCCC=C',
-  '1,6-Bis(diphenylphosphino)hexane': 'P(CCCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  '1,7-Dichloro-1,1,3,3,5,5,7,7-octamethyltetrasiloxane': 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(C)O[Si](C)(Cl)C',
-  '1,8-Bis(dimethylamino)naphthalene': 'CN(C1=CC=CC2=CC=CC(N(C)C)=C12)C',
-  '1,8-Bis(diphenylphosphino)naphthalene': 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=C4C(P(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC4=CC=C1',
-  '1,8-Diazabicyclo[5.4.0]-7-undecene': 'N12CCCCCC1=NCCC2',
-  '1,8-Diazabicyclo[5.4.0]-7-undecene Hydrogen Tribromide': 'N12CCCCCC1=NCCC2.[H+].[Br-].[Br-].[Br-]',
-  '1,8-Diazabicyclo[5.4.0]undec-7-ene': 'N12CCCCCC1=NCCC2',
-  '1-[2-(Di-tert-butylphosphino)phenyl]-3,5-diphenyl-1H-pyrazole': 'CC(P(C1=CC=CC=C1N2N=C(C3=CC=CC=C3)C=C2C4=CC=CC=C4)C(C)(C)C)(C)C',
-  '1-[3-(Trimethoxysilyl)propyl]urea': 'O=C(N)NCCC[Si](OC)(OC)OC',
-  '1-[Bis(trifluoromethanesulfonyl)methyl]-2,3,4,5,6-pentafluorobenzene': 'FC1=C(C(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
-  '10-Methyl-9-phenylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  '10-Methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=CC3=C1C=CC=C3.O=Cl(=O)([O-])=O',
-  '1-Acetoxy-5-bromo-1,2-benziodoxol-3(1H)-one': 'O=C1OI(OC(C)=O)C2=CC=C(Br)C=C12',
-  '1-Allyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CC=C)C=C1.[Cl-]',
-  '1-Bromo-3-(trimethylsilyl)benzene': 'C[Si](C1=CC(Br)=CC=C1)(C)C',
-  '1-Bromo-4-(trimethylsilyl)benzene': 'C[Si](C1=CC=C(Br)C=C1)(C)C',
-  '1-Butyl-1-methylpiperidinium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1(CCCC)CCCCC1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  '1-Butyl-1-methylpiperidinium Bromide': 'C[N+]1(CCCC)CCCCC1.[Br-]',
-  '1-Butyl-1-methylpyrrolidinium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1(CCCC)CCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  '1-Butyl-1-methylpyrrolidinium Bromide': 'C[N+]1(CCCC)CCCC1.[Br-]',
-  '1-Butyl-1-methylpyrrolidinium Chloride': 'C[N+]1(CCCC)CCCC1.[Cl-]',
-  '1-Butyl-1-methylpyrrolidinium Dicyanamide': 'C[N+]1(CCCC)CCCC1.N#C[N-]C#N',
-  '1-Butyl-1-methylpyrrolidinium Trifluoromethanesulfonate': 'C[N+]1(CCCC)CCCC1.O=S(C(F)(F)F)([O-])=O',
-  '1-Butyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CCCC',
-  '1-Butyl-2,3-dimethylimidazolium Chloride': 'C[N+]1=C(C)N(CCCC)C=C1.[Cl-]',
-  '1-Butyl-2,3-dimethylimidazolium Hexafluorophosphate': 'C[N+]1=C(C)N(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Butyl-2,3-dimethylimidazolium Tetrafluoroborate': 'C[N+]1=C(C)N(CCCC)C=C1.F[B-](F)(F)F',
-  '1-Butyl-2,3-dimethylimidazolium Trifluoromethanesulfonate': 'C[N+]1=C(C)N(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Butyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  '1-Butyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCC)C=C1.[Br-]',
-  '1-Butyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCC)C=C1.[Cl-]',
-  '1-Butyl-3-methylimidazolium Dicyanamide': 'C[N+]1=CN(CCCC)C=C1.N#C[N-]C#N',
-  '1-Butyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Butyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CCCC)C=C1.[I-]',
-  '1-Butyl-3-methylimidazolium Methanesulfonate': 'C[N+]1=CN(CCCC)C=C1.CS(=O)([O-])=O',
-  '1-Butyl-3-methylimidazolium Methyl Sulfate': 'C[N+]1=CN(CCCC)C=C1.O=S(OC)([O-])=O',
-  '1-Butyl-3-methylimidazolium Tetrachloroferrate': 'C[N+]1=CN(CCCC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
-  '1-Butyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCCC)C=C1.F[B-](F)(F)F',
-  '1-Butyl-3-methylimidazolium Thiocyanate': 'C[N+]1=CN(CCCC)C=C1.[S-]C#N',
-  '1-Butyl-3-methylimidazolium Tribromide': 'C[N+]1=CN(CCCC)C=C1.[Br-].[Br-].[Br-]',
-  '1-Butyl-3-methylimidazolium Tricyanomethanide': 'C[N+]1=CN(CCCC)C=C1.N#C[C-](C#N)C#N',
-  '1-Butyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate': 'C[N+]1=CN(CCCC)C=C1.FC([B-](F)(F)F)(F)F',
-  '1-Butyl-3-methylimidazolium Trifluoroacetate': 'C[N+]1=CN(CCCC)C=C1.O=C([O-])C(F)(F)F',
-  '1-Butyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Butyl-3-methylpyridinium Bromide': 'CC1=C[N+](CCCC)=CC=C1.[Br-]',
-  '1-Butyl-3-methylpyridinium Chloride': 'CC1=C[N+](CCCC)=CC=C1.[Cl-]',
-  '1-Butyl-4-methylpyridinium Bromide': 'CC1=CC=[N+](CCCC)C=C1.[Br-]',
-  '1-Butyl-4-methylpyridinium Chloride': 'CC1=CC=[N+](CCCC)C=C1.[Cl-]',
-  '1-Butyl-4-methylpyridinium Hexafluorophosphate': 'CC1=CC=[N+](CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Butylpyridinium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CCCC[N+]1=CC=CC=C1',
-  '1-Butylpyridinium Bromide': 'CCCC[N+]1=CC=CC=C1.[Br-]',
-  '1-Butylpyridinium Chloride': 'CCCC[N+]1=CC=CC=C1.[Cl-]',
-  '1-Butylpyridinium Hexafluorophosphate': 'CCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
-  '1-Butylpyridinium Tetrafluoroborate': 'CCCC[N+]1=CC=CC=C1.F[B-](F)(F)F',
-  '1-Chloro-2-iodoethane': 'ICCCl',
-  '1-Cyclohexyl-3-(2-morpholinoethyl)carbodiimide Metho-p-toluenesulfonate': 'C[N+]1(CCN=C=NC2CCCCC2)CCOCC1.O=S(C3=CC=C(C)C=C3)([O-])=O',
-  '1-Cyclopentenylboronic Acid': 'OB(C1=CCCC1)O',
-  '1-Decyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCCCCCCCC)C=C1.O=S(C(F)(F)F)([N-]S(C(F)(F)F)(=O)=O)=O',
-  '1-Decyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Br-]',
-  '1-Decyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Cl-]',
-  '1-Ethoxycarbonyl-2-ethoxy-1,2-dihydroquinoline': 'CCOC1N(C(OCC)=O)C2=C(C=CC=C2)C=C1',
-  '1-Ethyl-1-methylpyrrolidinium Bromide': 'C[N+]1(CC)CCCC1.[Br-]',
-  '1-Ethyl-1-methylpyrrolidinium Tetrafluoroborate': 'C[N+]1(CC)CCCC1.F[B-](F)(F)F',
-  '1-Ethyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CC',
-  '1-Ethyl-2-methylpyridinium Bromide': 'CC1=CC=CC=[N+]1CC.[Br-]',
-  '1-Ethyl-3-(hydroxymethyl)pyridinium Ethyl Sulfate': 'OCC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
-  '1-Ethyl-3-methylimidazolium Acetate': 'C[N+]1=CN(CC)C=C1.CC([O-])=O',
-  '1-Ethyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  '1-Ethyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CC)C=C1.[Br-]',
-  '1-Ethyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CC)C=C1.[Cl-]',
-  '1-Ethyl-3-methylimidazolium Dicyanamide': 'CCN1C=[N+](C)C=C1.N#C[N-]C#N',
-  '1-Ethyl-3-methylimidazolium Diethyl Phosphate': 'C[N+]1=CN(CC)C=C1.O=P(OCC)([O-])OCC',
-  '1-Ethyl-3-methylimidazolium Ethyl Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(OCC)([O-])=O',
-  '1-Ethyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CC)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Ethyl-3-methylimidazolium Hydrogen Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(O)([O-])=O',
-  '1-Ethyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CC)C=C1.[I-]',
-  '1-Ethyl-3-methylimidazolium Methanesulfonate': 'C[N+]1=CN(CC)C=C1.CS(=O)([O-])=O',
-  '1-Ethyl-3-methylimidazolium Methyl Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(OC)([O-])=O',
-  '1-Ethyl-3-methylimidazolium Nitrate': 'C[N+]1=CN(CC)C=C1.[O-][N+]([O-])=O',
-  '1-Ethyl-3-methylimidazolium Tetrachloroferrate': 'C[N+]1=CN(CC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
-  '1-Ethyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CC)C=C1.F[B-](F)(F)F',
-  '1-Ethyl-3-methylimidazolium Thiocyanate': 'C[N+]1=CN(CC)C=C1.[S-]C#N',
-  '1-Ethyl-3-methylimidazolium Tricyanomethanide': 'C[N+]1=CN(CC)C=C1.N#C[C-](C#N)C#N',
-  '1-Ethyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate': 'C[N+]1=CN(CC)C=C1.FC([B-](F)(F)F)(F)F',
-  '1-Ethyl-3-methylimidazolium Trifluoroacetate': 'C[N+]1=CN(CC)C=C1.O=C([O-])C(F)(F)F',
-  '1-Ethyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Ethyl-3-methylimidazolium p-Toluenesulfonate': 'C[N+]1=CN(CC)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  '1-Ethyl-3-methylpyridinium Bis(trifluoromethanesulfonyl)imide': 'CC1=CC=C[N+](CC)=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  '1-Ethyl-3-methylpyridinium Ethyl Sulfate': 'CC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
-  '1-Ethyl-4-methylpyridinium Bromide': 'CC1=CC=[N+](CC)C=C1.[Br-]',
-  '1-Ethylpyridinium Bromide': 'CC[N+]1=CC=CC=C1.[Br-]',
-  '1-Ethylpyridinium Chloride': 'CC[N+]1=CC=CC=C1.[Cl-]',
-  '1-Fluoro-2,4,6-trimethylpyridinium Tetrafluoroborate': 'CC1=[N+](F)C(C)=CC(C)=C1.F[B-](F)(F)F',
-  '1-Fluoro-2,4,6-trimethylpyridinium Trifluoromethanesulfonate': 'CC1=[N+](F)C(C)=CC(C)=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Fluoro-2,6-dichloropyridinium Tetrafluoroborate': 'ClC1=[N+](F)C(Cl)=CC=C1.F[B-](F)(F)F',
-  '1-Fluoro-3,3-dimethyl-1,2-benziodoxole': 'CC1(C)OI(F)C2=CC=CC=C12',
-  '1-Fluoropyridinium Tetrafluoroborate': 'F[N+]1=CC=CC=C1.F[B-](F)(F)F',
-  '1-Fluoropyridinium Trifluoromethanesulfonate': 'F[N+]1=CC=CC=C1.O=S(C(F)(F)F)([O-])=O',
-  '1H-Benzotriazol-1-yloxytripyrrolidinophosphonium Hexafluorophosphate': 'F[P-](F)(F)(F)(F)F.N1([P+](N2CCCC2)(ON3N=NC4=CC=CC=C43)N5CCCC5)CCCC1',
-  '1H-Benzotriazol-1-yloxytris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(ON1N=NC2=CC=CC=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  '1H-Cyclopenta[l]phenanthrene': 'C12=CC=CC=C1C(CC=C3)=C3C4=C2C=CC=C4',
-  '1-Hexyl-2,3-dimethylimidazolium Iodide': 'C[N+]1=C(C)N(CCCCCC)C=C1.[I-]',
-  '1-Hexyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCCCC)C=C1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  '1-Hexyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCCCC)C=C1.[Br-]',
-  '1-Hexyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCCCC)C=C1.[Cl-]',
-  '1-Hexyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CCCCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Hexyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CCCCCC)C=C1.[I-]',
-  '1-Hexyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCCCCC)C=C1.F[B-](F)(F)F',
-  '1-Hexyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CCCCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Hexylpyridinium Hexafluorophosphate': 'CCCCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
-  '1-Hydroxy-6-(trifluoromethyl)benzotriazole': 'FC(C1=CC=C2N=NN(O)C2=C1)(F)F',
-  '1-Methoxy-3-(trimethylsilyloxy)-1,3-butadiene': 'C=C(O[Si](C)(C)C)/C=C/OC',
-  '1-Methyl-1-[4-(diphenylphosphino)benzyl]pyrrolidinium Bromide': 'C[N+]1(CC2=CC=C(P(C3=CC=CC=C3)C4=CC=CC=C4)C=C2)CCCC1.[Br-]',
-  '1-Methyl-1-propylpiperidinium Bis(fluorosulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCCC1',
-  '1-Methyl-1-propylpiperidinium Bromide': 'CCC[N+]1(C)CCCCC1.[Br-]',
-  '1-Methyl-1-propylpyrrolidinium Bis(trifluoromethanesulfonyl)imide': 'O=S(NS(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCC1',
-  '1-Methyl-2-pyrrolidinone': 'O=C1CCCN1C',
-  '1-Methyl-3-n-octylimidazolium Bromide': 'CCCCCCCC[N+]1=CN(C)C=C1.[Br-]',
-  '1-Methyl-3-n-octylimidazolium Chloride': 'CCCCCCCC[N+]1=CN(C)C=C1.[Cl-]',
-  '1-Methyl-3-n-octylimidazolium Hexafluorophosphate': 'CCCCCCCC[N+]1=CN(C)C=C1.F[P-](F)(F)(F)(F)F',
-  '1-Methyl-3-n-octylimidazolium Tetrafluoroborate': 'CCCCCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  '1-Methyl-3-n-octylimidazolium Trifluoromethanesulfonate': 'CCCCCCCC[N+]1=CN(C)C=C1.O=S(C(F)(F)F)([O-])=O',
-  '1-Methyl-3-pentylimidazolium Bromide': 'CCCCC[N+]1=CN(C)C=C1.[Br-]',
-  '1-Methyl-3-pentylimidazolium Tetrafluoroborate': 'CCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  '1-Methyl-3-propylimidazolium Bromide': 'CCC[N+]1=CN(C)C=C1.[Br-]',
-  '1-Methyl-3-propylimidazolium Chloride': 'CCC[N+]1=CN(C)C=C1.[Cl-]',
-  '1-Methyl-3-propylimidazolium Iodide': 'CCC[N+]1=CN(C)C=C1.[I-]',
-  '1-Methyl-3-propylimidazolium Tetrafluoroborate': 'CCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  '1-Phenyl-1,3-butanedione': 'CC(CC(C1=CC=CC=C1)=O)=O',
-  '1-Phenyl-2-(trimethylsilyl)acetylene': 'C[Si](C#CC1=CC=CC=C1)(C)C',
-  '1-Propylpyridinium Chloride': 'CCC[N+]1=CC=CC=C1.[Cl-]',
-  '1-Trifluoromethyl-1,2-benziodoxol-3(1H)-one': 'O=C1OI(C(F)(F)F)C2=CC=CC=C12',
-  '1-Trifluoromethyl-3,3-dimethyl-1,2-benziodoxole': 'CC1(C)OI(C(F)(F)F)C2=CC=CC=C12',
-  '2-(1H-1,2,4-Triazol-3-yl)pyridine': 'C1(C2=NNC=N2)=NC=CC=C1',
-  '2-(2-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC(C=CC=C1)=C1B(N2)NC3=CC=CC4=C3C2=CC=C4',
-  '2-(2-Chloro-6-fluorophenyl)ethylamine hydrochloride': 'NCCC1=C(F)C=CC=C1Cl.[H]Cl',
-  '2-(2-Hydroxyphenyl)benzothiazole': 'OC1=CC=CC=C1C2=NC3=CC=CC=C3S2',
-  '2-(2-Hydroxyphenyl)benzoxazole': 'OC1=CC=CC=C1C2=NC3=CC=CC=C3O2',
-  '2-(2-Pyridyl)benzoxazole': 'C1(C2=NC=CC=C2)=NC3=CC=CC=C3O1',
-  '2-(2-Pyridyl)indole': 'C(N1)(C2=NC=CC=C2)=CC3=C1C=CC=C3',
-  '2-(3,4-Epoxycyclohexyl)ethyltrimethoxysilane': 'CO[Si](OC)(CCC1CC(O2)C2CC1)OC',
-  '2-(3-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC1=CC=CC(B(N2)NC3=CC=CC4=C3C2=CC=C4)=C1',
-  '2-(4-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC1=CC=C(C=C1)B(N2)NC3=CC=CC4=CC=CC2=C43',
-  '2-(4-Thiazolyl)benzimidazole': 'C1(C2=CSC=N2)=NC3=CC=CC=C3N1',
-  '2-(5-Norbornene-2,3-dicarboximido)-1,1,3,3-tetramethyluronium Tetrafluoroborate': 'CN(C)C(N(C)C)=[O+]N(C1=O)C(C2C1C3C=CC2C3)=O.F[B-](F)(F)F',
+  "1,5-Diazabicyclo[4.3.0]-5-nonene": 'N12CCCN=C1CCC2',
+  "1,5-Diazabicyclo[4.3.0]non-5-ene": 'N12CCCN=C1CCC2',
+  "1,5-Dichloro-1,1,3,3,5,5-hexamethyltrisiloxane": 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(Cl)C',
+  "1,5-Dimethyl-2,4-bis[2-(trimethylsilyl)ethynyl]benzene": 'C[Si](C#CC1=C(C)C=C(C)C(C#C[Si](C)(C)C)=C1)(C)C',
+  "1,5-Hexadiene": 'C=CCCC=C',
+  "1,6-Bis(diphenylphosphino)hexane": 'P(CCCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "1,7-Dichloro-1,1,3,3,5,5,7,7-octamethyltetrasiloxane": 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(C)O[Si](C)(Cl)C',
+  "1,8-Bis(dimethylamino)naphthalene": 'CN(C1=CC=CC2=CC=CC(N(C)C)=C12)C',
+  "1,8-Bis(diphenylphosphino)naphthalene": 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=C4C(P(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC4=CC=C1',
+  "1,8-Diazabicyclo[5.4.0]-7-undecene": 'N12CCCCCC1=NCCC2',
+  "1,8-Diazabicyclo[5.4.0]-7-undecene Hydrogen Tribromide": 'N12CCCCCC1=NCCC2.[H+].[Br-].[Br-].[Br-]',
+  "1,8-Diazabicyclo[5.4.0]undec-7-ene": 'N12CCCCCC1=NCCC2',
+  "1-[2-(Di-tert-butylphosphino)phenyl]-3,5-diphenyl-1H-pyrazole": 'CC(P(C1=CC=CC=C1N2N=C(C3=CC=CC=C3)C=C2C4=CC=CC=C4)C(C)(C)C)(C)C',
+  "1-[3-(Trimethoxysilyl)propyl]urea": 'O=C(N)NCCC[Si](OC)(OC)OC',
+  "1-[Bis(trifluoromethanesulfonyl)methyl]-2,3,4,5,6-pentafluorobenzene": 'FC1=C(C(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
+  "10-Methyl-9-phenylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  "10-Methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=CC3=C1C=CC=C3.O=Cl(=O)([O-])=O',
+  "1-Acetoxy-5-bromo-1,2-benziodoxol-3(1H)-one": 'O=C1OI(OC(C)=O)C2=CC=C(Br)C=C12',
+  "1-Allyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CC=C)C=C1.[Cl-]',
+  "1-Bromo-3-(trimethylsilyl)benzene": 'C[Si](C1=CC(Br)=CC=C1)(C)C',
+  "1-Bromo-4-(trimethylsilyl)benzene": 'C[Si](C1=CC=C(Br)C=C1)(C)C',
+  "1-Butyl-1-methylpiperidinium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1(CCCC)CCCCC1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  "1-Butyl-1-methylpiperidinium Bromide": 'C[N+]1(CCCC)CCCCC1.[Br-]',
+  "1-Butyl-1-methylpyrrolidinium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1(CCCC)CCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "1-Butyl-1-methylpyrrolidinium Bromide": 'C[N+]1(CCCC)CCCC1.[Br-]',
+  "1-Butyl-1-methylpyrrolidinium Chloride": 'C[N+]1(CCCC)CCCC1.[Cl-]',
+  "1-Butyl-1-methylpyrrolidinium Dicyanamide": 'C[N+]1(CCCC)CCCC1.N#C[N-]C#N',
+  "1-Butyl-1-methylpyrrolidinium Trifluoromethanesulfonate": 'C[N+]1(CCCC)CCCC1.O=S(C(F)(F)F)([O-])=O',
+  "1-Butyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CCCC',
+  "1-Butyl-2,3-dimethylimidazolium Chloride": 'C[N+]1=C(C)N(CCCC)C=C1.[Cl-]',
+  "1-Butyl-2,3-dimethylimidazolium Hexafluorophosphate": 'C[N+]1=C(C)N(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Butyl-2,3-dimethylimidazolium Tetrafluoroborate": 'C[N+]1=C(C)N(CCCC)C=C1.F[B-](F)(F)F',
+  "1-Butyl-2,3-dimethylimidazolium Trifluoromethanesulfonate": 'C[N+]1=C(C)N(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Butyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "1-Butyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCC)C=C1.[Br-]',
+  "1-Butyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCC)C=C1.[Cl-]',
+  "1-Butyl-3-methylimidazolium Dicyanamide": 'C[N+]1=CN(CCCC)C=C1.N#C[N-]C#N',
+  "1-Butyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Butyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CCCC)C=C1.[I-]',
+  "1-Butyl-3-methylimidazolium Methanesulfonate": 'C[N+]1=CN(CCCC)C=C1.CS(=O)([O-])=O',
+  "1-Butyl-3-methylimidazolium Methyl Sulfate": 'C[N+]1=CN(CCCC)C=C1.O=S(OC)([O-])=O',
+  "1-Butyl-3-methylimidazolium Tetrachloroferrate": 'C[N+]1=CN(CCCC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
+  "1-Butyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCCC)C=C1.F[B-](F)(F)F',
+  "1-Butyl-3-methylimidazolium Thiocyanate": 'C[N+]1=CN(CCCC)C=C1.[S-]C#N',
+  "1-Butyl-3-methylimidazolium Tribromide": 'C[N+]1=CN(CCCC)C=C1.[Br-].[Br-].[Br-]',
+  "1-Butyl-3-methylimidazolium Tricyanomethanide": 'C[N+]1=CN(CCCC)C=C1.N#C[C-](C#N)C#N',
+  "1-Butyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate": 'C[N+]1=CN(CCCC)C=C1.FC([B-](F)(F)F)(F)F',
+  "1-Butyl-3-methylimidazolium Trifluoroacetate": 'C[N+]1=CN(CCCC)C=C1.O=C([O-])C(F)(F)F',
+  "1-Butyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Butyl-3-methylpyridinium Bromide": 'CC1=C[N+](CCCC)=CC=C1.[Br-]',
+  "1-Butyl-3-methylpyridinium Chloride": 'CC1=C[N+](CCCC)=CC=C1.[Cl-]',
+  "1-Butyl-4-methylpyridinium Bromide": 'CC1=CC=[N+](CCCC)C=C1.[Br-]',
+  "1-Butyl-4-methylpyridinium Chloride": 'CC1=CC=[N+](CCCC)C=C1.[Cl-]',
+  "1-Butyl-4-methylpyridinium Hexafluorophosphate": 'CC1=CC=[N+](CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Butylpyridinium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CCCC[N+]1=CC=CC=C1',
+  "1-Butylpyridinium Bromide": 'CCCC[N+]1=CC=CC=C1.[Br-]',
+  "1-Butylpyridinium Chloride": 'CCCC[N+]1=CC=CC=C1.[Cl-]',
+  "1-Butylpyridinium Hexafluorophosphate": 'CCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
+  "1-Butylpyridinium Tetrafluoroborate": 'CCCC[N+]1=CC=CC=C1.F[B-](F)(F)F',
+  "1-Chloro-2-iodoethane": 'ICCCl',
+  "1-Cyclohexyl-3-(2-morpholinoethyl)carbodiimide Metho-p-toluenesulfonate": 'C[N+]1(CCN=C=NC2CCCCC2)CCOCC1.O=S(C3=CC=C(C)C=C3)([O-])=O',
+  "1-Cyclopentenylboronic Acid": 'OB(C1=CCCC1)O',
+  "1-Decyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCCCCCCCC)C=C1.O=S(C(F)(F)F)([N-]S(C(F)(F)F)(=O)=O)=O',
+  "1-Decyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Br-]',
+  "1-Decyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Cl-]',
+  "1-Ethoxycarbonyl-2-ethoxy-1,2-dihydroquinoline": 'CCOC1N(C(OCC)=O)C2=C(C=CC=C2)C=C1',
+  "1-Ethyl-1-methylpyrrolidinium Bromide": 'C[N+]1(CC)CCCC1.[Br-]',
+  "1-Ethyl-1-methylpyrrolidinium Tetrafluoroborate": 'C[N+]1(CC)CCCC1.F[B-](F)(F)F',
+  "1-Ethyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CC',
+  "1-Ethyl-2-methylpyridinium Bromide": 'CC1=CC=CC=[N+]1CC.[Br-]',
+  "1-Ethyl-3-(hydroxymethyl)pyridinium Ethyl Sulfate": 'OCC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
+  "1-Ethyl-3-methylimidazolium Acetate": 'C[N+]1=CN(CC)C=C1.CC([O-])=O',
+  "1-Ethyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "1-Ethyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CC)C=C1.[Br-]',
+  "1-Ethyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CC)C=C1.[Cl-]',
+  "1-Ethyl-3-methylimidazolium Dicyanamide": 'CCN1C=[N+](C)C=C1.N#C[N-]C#N',
+  "1-Ethyl-3-methylimidazolium Diethyl Phosphate": 'C[N+]1=CN(CC)C=C1.O=P(OCC)([O-])OCC',
+  "1-Ethyl-3-methylimidazolium Ethyl Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(OCC)([O-])=O',
+  "1-Ethyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CC)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Ethyl-3-methylimidazolium Hydrogen Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(O)([O-])=O',
+  "1-Ethyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CC)C=C1.[I-]',
+  "1-Ethyl-3-methylimidazolium Methanesulfonate": 'C[N+]1=CN(CC)C=C1.CS(=O)([O-])=O',
+  "1-Ethyl-3-methylimidazolium Methyl Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(OC)([O-])=O',
+  "1-Ethyl-3-methylimidazolium Nitrate": 'C[N+]1=CN(CC)C=C1.[O-][N+]([O-])=O',
+  "1-Ethyl-3-methylimidazolium Tetrachloroferrate": 'C[N+]1=CN(CC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
+  "1-Ethyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CC)C=C1.F[B-](F)(F)F',
+  "1-Ethyl-3-methylimidazolium Thiocyanate": 'C[N+]1=CN(CC)C=C1.[S-]C#N',
+  "1-Ethyl-3-methylimidazolium Tricyanomethanide": 'C[N+]1=CN(CC)C=C1.N#C[C-](C#N)C#N',
+  "1-Ethyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate": 'C[N+]1=CN(CC)C=C1.FC([B-](F)(F)F)(F)F',
+  "1-Ethyl-3-methylimidazolium Trifluoroacetate": 'C[N+]1=CN(CC)C=C1.O=C([O-])C(F)(F)F',
+  "1-Ethyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Ethyl-3-methylimidazolium p-Toluenesulfonate": 'C[N+]1=CN(CC)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  "1-Ethyl-3-methylpyridinium Bis(trifluoromethanesulfonyl)imide": 'CC1=CC=C[N+](CC)=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "1-Ethyl-3-methylpyridinium Ethyl Sulfate": 'CC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
+  "1-Ethyl-4-methylpyridinium Bromide": 'CC1=CC=[N+](CC)C=C1.[Br-]',
+  "1-Ethylpyridinium Bromide": 'CC[N+]1=CC=CC=C1.[Br-]',
+  "1-Ethylpyridinium Chloride": 'CC[N+]1=CC=CC=C1.[Cl-]',
+  "1-Fluoro-2,4,6-trimethylpyridinium Tetrafluoroborate": 'CC1=[N+](F)C(C)=CC(C)=C1.F[B-](F)(F)F',
+  "1-Fluoro-2,4,6-trimethylpyridinium Trifluoromethanesulfonate": 'CC1=[N+](F)C(C)=CC(C)=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Fluoro-2,6-dichloropyridinium Tetrafluoroborate": 'ClC1=[N+](F)C(Cl)=CC=C1.F[B-](F)(F)F',
+  "1-Fluoro-3,3-dimethyl-1,2-benziodoxole": 'CC1(C)OI(F)C2=CC=CC=C12',
+  "1-Fluoropyridinium Tetrafluoroborate": 'F[N+]1=CC=CC=C1.F[B-](F)(F)F',
+  "1-Fluoropyridinium Trifluoromethanesulfonate": 'F[N+]1=CC=CC=C1.O=S(C(F)(F)F)([O-])=O',
+  "1H-Benzotriazol-1-yloxytripyrrolidinophosphonium Hexafluorophosphate": 'F[P-](F)(F)(F)(F)F.N1([P+](N2CCCC2)(ON3N=NC4=CC=CC=C43)N5CCCC5)CCCC1',
+  "1H-Benzotriazol-1-yloxytris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(ON1N=NC2=CC=CC=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  "1H-Cyclopenta[l]phenanthrene": 'C12=CC=CC=C1C(CC=C3)=C3C4=C2C=CC=C4',
+  "1-Hexyl-2,3-dimethylimidazolium Iodide": 'C[N+]1=C(C)N(CCCCCC)C=C1.[I-]',
+  "1-Hexyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCCCC)C=C1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  "1-Hexyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCCCC)C=C1.[Br-]',
+  "1-Hexyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCCCC)C=C1.[Cl-]',
+  "1-Hexyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CCCCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Hexyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CCCCCC)C=C1.[I-]',
+  "1-Hexyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCCCCC)C=C1.F[B-](F)(F)F',
+  "1-Hexyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CCCCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Hexylpyridinium Hexafluorophosphate": 'CCCCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
+  "1-Hydroxy-6-(trifluoromethyl)benzotriazole": 'FC(C1=CC=C2N=NN(O)C2=C1)(F)F',
+  "1-Methoxy-3-(trimethylsilyloxy)-1,3-butadiene": 'C=C(O[Si](C)(C)C)/C=C/OC',
+  "1-Methyl-1-[4-(diphenylphosphino)benzyl]pyrrolidinium Bromide": 'C[N+]1(CC2=CC=C(P(C3=CC=CC=C3)C4=CC=CC=C4)C=C2)CCCC1.[Br-]',
+  "1-Methyl-1-propylpiperidinium Bis(fluorosulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCCC1',
+  "1-Methyl-1-propylpiperidinium Bromide": 'CCC[N+]1(C)CCCCC1.[Br-]',
+  "1-Methyl-1-propylpyrrolidinium Bis(trifluoromethanesulfonyl)imide": 'O=S(NS(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCC1',
+  "1-Methyl-2-pyrrolidinone": 'O=C1CCCN1C',
+  "1-Methyl-3-n-octylimidazolium Bromide": 'CCCCCCCC[N+]1=CN(C)C=C1.[Br-]',
+  "1-Methyl-3-n-octylimidazolium Chloride": 'CCCCCCCC[N+]1=CN(C)C=C1.[Cl-]',
+  "1-Methyl-3-n-octylimidazolium Hexafluorophosphate": 'CCCCCCCC[N+]1=CN(C)C=C1.F[P-](F)(F)(F)(F)F',
+  "1-Methyl-3-n-octylimidazolium Tetrafluoroborate": 'CCCCCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  "1-Methyl-3-n-octylimidazolium Trifluoromethanesulfonate": 'CCCCCCCC[N+]1=CN(C)C=C1.O=S(C(F)(F)F)([O-])=O',
+  "1-Methyl-3-pentylimidazolium Bromide": 'CCCCC[N+]1=CN(C)C=C1.[Br-]',
+  "1-Methyl-3-pentylimidazolium Tetrafluoroborate": 'CCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  "1-Methyl-3-propylimidazolium Bromide": 'CCC[N+]1=CN(C)C=C1.[Br-]',
+  "1-Methyl-3-propylimidazolium Chloride": 'CCC[N+]1=CN(C)C=C1.[Cl-]',
+  "1-Methyl-3-propylimidazolium Iodide": 'CCC[N+]1=CN(C)C=C1.[I-]',
+  "1-Methyl-3-propylimidazolium Tetrafluoroborate": 'CCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  "1-Phenyl-1,3-butanedione": 'CC(CC(C1=CC=CC=C1)=O)=O',
+  "1-Phenyl-2-(trimethylsilyl)acetylene": 'C[Si](C#CC1=CC=CC=C1)(C)C',
+  "1-Propylpyridinium Chloride": 'CCC[N+]1=CC=CC=C1.[Cl-]',
+  "1-Trifluoromethyl-1,2-benziodoxol-3(1H)-one": 'O=C1OI(C(F)(F)F)C2=CC=CC=C12',
+  "1-Trifluoromethyl-3,3-dimethyl-1,2-benziodoxole": 'CC1(C)OI(C(F)(F)F)C2=CC=CC=C12',
+  "2-(1H-1,2,4-Triazol-3-yl)pyridine": 'C1(C2=NNC=N2)=NC=CC=C1',
+  "2-(2-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC(C=CC=C1)=C1B(N2)NC3=CC=CC4=C3C2=CC=C4',
+  "2-(2-Chloro-6-fluorophenyl)ethylamine hydrochloride": 'NCCC1=C(F)C=CC=C1Cl.[H]Cl',
+  "2-(2-Hydroxyphenyl)benzothiazole": 'OC1=CC=CC=C1C2=NC3=CC=CC=C3S2',
+  "2-(2-Hydroxyphenyl)benzoxazole": 'OC1=CC=CC=C1C2=NC3=CC=CC=C3O2',
+  "2-(2-Pyridyl)benzoxazole": 'C1(C2=NC=CC=C2)=NC3=CC=CC=C3O1',
+  "2-(2-Pyridyl)indole": 'C(N1)(C2=NC=CC=C2)=CC3=C1C=CC=C3',
+  "2-(3,4-Epoxycyclohexyl)ethyltrimethoxysilane": 'CO[Si](OC)(CCC1CC(O2)C2CC1)OC',
+  "2-(3-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC1=CC=CC(B(N2)NC3=CC=CC4=C3C2=CC=C4)=C1',
+  "2-(4-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC1=CC=C(C=C1)B(N2)NC3=CC=CC4=CC=CC2=C43',
+  "2-(4-Thiazolyl)benzimidazole": 'C1(C2=CSC=N2)=NC3=CC=CC=C3N1',
+  "2-(5-Norbornene-2,3-dicarboximido)-1,1,3,3-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N(C1=O)C(C2C1C3C=CC2C3)=O.F[B-](F)(F)F',
   "2-(Dicyclohexylphosphino)-2'-(dimethylamino)biphenyl": 'CN(C1=CC=CC=C1C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C',
-  '2-(Dicyclohexylphosphino)biphenyl': 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3CCCCC3)C4CCCCC4',
-  '2-(Dimethylvinylsilyl)pyridine': 'C=C[Si](C1=NC=CC=C1)(C)C',
-  '2-(Diphenylphosphino)benzaldehyde': 'O=CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  '2-(Diphenylphosphino)benzoic Acid': 'O=C(O)C1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  '2-(Diphenylphosphino)benzonitrile': 'N#CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  '2-(Diphenylphosphino)biphenyl': 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3=CC=CC=C3)C4=CC=CC=C4',
-  '2-(Di-tert-butylphosphino)biphenyl': 'CC(P(C1=CC=CC=C1C2=CC=CC=C2)C(C)(C)C)(C)C',
-  '2-(Trimethylsilylethynyl)thiophene': 'C[Si](C#CC1=CC=CS1)(C)C',
+  "2-(Dicyclohexylphosphino)biphenyl": 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3CCCCC3)C4CCCCC4',
+  "2-(Dimethylvinylsilyl)pyridine": 'C=C[Si](C1=NC=CC=C1)(C)C',
+  "2-(Diphenylphosphino)benzaldehyde": 'O=CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  "2-(Diphenylphosphino)benzoic Acid": 'O=C(O)C1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  "2-(Diphenylphosphino)benzonitrile": 'N#CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  "2-(Diphenylphosphino)biphenyl": 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3=CC=CC=C3)C4=CC=CC=C4',
+  "2-(Di-tert-butylphosphino)biphenyl": 'CC(P(C1=CC=CC=C1C2=CC=CC=C2)C(C)(C)C)(C)C',
+  "2-(Trimethylsilylethynyl)thiophene": 'C[Si](C#CC1=CC=CS1)(C)C',
   "2,2'-(Methylimino)bis(N,N-di-n-octylacetamide)": 'CN(CC(N(CCCCCCCC)CCCCCCCC)=O)CC(N(CCCCCCCC)CCCCCCCC)=O',
-  '2,2,2-Trifluoro-1,1-ethanediol': 'OC(O)C(F)(F)F',
-  '2,2,2-Trifluoroethyl Methanesulfonate': 'CS(=O)(OCC(F)(F)F)=O',
-  '2,2,2-Trifluoroethyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OCC(F)(F)F)=O',
-  '2,2,2-Trifluoroethyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCC(F)(F)F)=O)C=C1',
-  '2,2,2-Trifluoro-N,N-dimethylacetamide': 'O=C(N(C)C)C(F)(F)F',
-  '2,2,3,3,3-Pentafluoropropyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCC(F)(F)C(F)(F)F)=O)C=C1',
-  '2,2,6,6-Tetramethylpiperidine': 'CC1(C)CCCC(C)(C)N1',
-  '2,2,6,6-Tetramethylpiperidine 1-Oxyl': 'CC1(C)CCCC(C)(C)N1[O]',
-  '2,2,6,6-Tetramethylpiperidine 1-Oxyl Free Radical': 'CC1(C)CCCC(C)(C)N1[O]',
+  "2,2,2-Trifluoro-1,1-ethanediol": 'OC(O)C(F)(F)F',
+  "2,2,2-Trifluoroethyl Methanesulfonate": 'CS(=O)(OCC(F)(F)F)=O',
+  "2,2,2-Trifluoroethyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OCC(F)(F)F)=O',
+  "2,2,2-Trifluoroethyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCC(F)(F)F)=O)C=C1',
+  "2,2,2-Trifluoro-N,N-dimethylacetamide": 'O=C(N(C)C)C(F)(F)F',
+  "2,2,3,3,3-Pentafluoropropyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCC(F)(F)C(F)(F)F)=O)C=C1',
+  "2,2,6,6-Tetramethylpiperidine": 'CC1(C)CCCC(C)(C)N1',
+  "2,2,6,6-Tetramethylpiperidine 1-Oxyl": 'CC1(C)CCCC(C)(C)N1[O]',
+  "2,2,6,6-Tetramethylpiperidine 1-Oxyl Free Radical": 'CC1(C)CCCC(C)(C)N1[O]',
   "2,2':6',2''-Terpyridine": 'C1(C2=NC(C3=NC=CC=C3)=CC=C2)=NC=CC=C1',
   "2,2':6',2''-Terpyridine-4'-carboxylic Acid": 'O=C(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)O',
-  '2,2′-Bipyridinium chlorochromate': '[O-][Cr](=O)(Cl)=O.[O-][Cr](=O)(Cl)=O.C1(C2=CC=CC=[NH+]2)=CC=CC=[NH+]1',
+  "2,2′-Bipyridinium chlorochromate": '[O-][Cr](=O)(Cl)=O.[O-][Cr](=O)(Cl)=O.C1(C2=CC=CC=[NH+]2)=CC=CC=[NH+]1',
   "2,2'-Bi(1,8-naphthyridine)": 'C1(C2=NC3=NC=CC=C3C=C2)=NC4=NC=CC=C4C=C1',
   "2,2'-Bi-4-lepidine": 'CC1=CC(C2=NC3=CC=CC=C3C(C)=C2)=NC4=C1C=CC=C4',
   "2,2'-Bicinchoninic Acid Dipotassium Salt Hydrate": 'O=C([O-])C1=CC(C2=NC3=CC=CC=C3C(C([O-])=O)=C2)=NC4=CC=CC=C14.[H]O[H].[K+].[K+]',
@@ -560,161 +560,161 @@ export const reagents_kombi = {
   "2,2'-Bis(diphenylphosphino)biphenyl": 'C1(C2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
   "2,2'-Carbonylbis(3,5-dioxo-4-methyl-1,2,4-oxadiazolidine)": 'O=C(N(C(N1C)=O)OC1=O)N(C(N2C)=O)OC2=O',
   "2,2'-Diamino-4,4'-bithiazole": 'NC1=NC(C2=CSC(N)=N2)=CS1',
-  '2,2-Difluoro-2-(fluorosulfonyl)acetic Acid': 'O=C(O)C(F)(F)S(=O)(F)=O',
-  '2,2-Difluoroethyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OCC(F)F)=O',
-  '2,2-Difluoroethylamine': 'NCC(F)F',
-  '2,2-Dimethyl-6,6,7,7,8,8,8-heptafluoro-3,5-octanedione': 'CC(C)(C)C(CC(C(F)(F)C(F)(F)C(F)(F)F)=O)=O',
-  '2,2-Dimethylpropylmagnesium chloride': 'Cl[Mg]CC(C)(C)C',
+  "2,2-Difluoro-2-(fluorosulfonyl)acetic Acid": 'O=C(O)C(F)(F)S(=O)(F)=O',
+  "2,2-Difluoroethyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OCC(F)F)=O',
+  "2,2-Difluoroethylamine": 'NCC(F)F',
+  "2,2-Dimethyl-6,6,7,7,8,8,8-heptafluoro-3,5-octanedione": 'CC(C)(C)C(CC(C(F)(F)C(F)(F)C(F)(F)F)=O)=O',
+  "2,2-Dimethylpropylmagnesium chloride": 'Cl[Mg]CC(C)(C)C',
   "2,2'-Dipyridyl Disulfide": 'C1(SSC2=NC=CC=C2)=NC=CC=C1',
   "2,2'-Methylenebisbenzothiazole": 'C1(CC2=NC3=CC=CC=C3S2)=NC4=CC=CC=C4S1',
-  '2,3,7,8,12,13,17,18-Octaethylporphyrin': 'CCC1=C(CC)C2=NC1=CC3=C(CC)C(CC)=C(N3)C=C4C(CC)=C(CC)C(C=C5C(CC)=C(CC)C(N5)=C2)=N4',
-  '2,3,7,8,12,13,17,18-Octafluoro-5,10,15,20-tetrakis(pentafluorophenyl)porphyrin': 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C(F)=C(F)C(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C(F)=C(F)C5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C(F)=C7F)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=C(F)C(F)=C2N9)=N3',
-  '2,3-Dimethyl-1-propylimidazolium Bis(trifluoromethanesulfonyl)imide': 'CN1C(C)=[N+](CCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  '2,3-Lutidine': 'CC1=NC=CC=C1C',
-  '2,4,4,6-Tetrabromo-2,5-cyclohexadienone': 'BrC1=CC(Br)(Br)C=C(Br)C1=O',
-  '2,4,5-Trichlorophenol': 'OC1=CC(Cl)=C(Cl)C=C1Cl',
-  '2,4,6,8-Tetramethyl-2,4,6,8-tetravinylcyclotetrasiloxane': 'C=CO1(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]1',
-  '2,4,6,8-Tetramethylcyclotetrasiloxane': 'CO1[SiH2]O(C)[SiH2]O(C)[SiH2]O(C)[SiH2]1',
-  '2,4,6-Tri(2-pyridyl)-1,3,5-triazine': 'C1(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=N1',
-  '2,4,6-Tri(4-pyridyl)-1,3,5-triazine': 'C1(C2=CC=NC=C2)=NC(C3=CC=NC=C3)=NC(C4=CC=NC=C4)=N1',
-  '2,4,6-Trichlorobenzoyl Chloride': 'O=C(Cl)C1=C(Cl)C=C(Cl)C=C1Cl',
-  '2,4,6-Triisopropylbenzenesulfonyl Chloride': 'O=S(C1=C(C(C)C)C=C(C(C)C)C=C1C(C)C)(Cl)=O',
-  '2,4,6-Trimethylpyridinium p-Toluenesulfonate': 'CC1=[NH+]C(C)=CC(C)=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  '2,4,6-Tris(3,4,5-trifluorophenyl)boroxin': 'FC1=C(F)C(F)=CC(B2OB(C3=CC(F)=C(F)C(F)=C3)OB(C4=CC(F)=C(F)C(F)=C4)O2)=C1',
-  '2,4-Dibromo-6-[(E)-[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]phenol': 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C(Br)C=C1Br',
-  '2,4-Dibromo-6-[[[[(4S,5S)-4,5-dihydro-4,5-diphenyl-1-tosyl-1H-imidazol-2-yl]methyl][(S)-1-phenylethyl]amino]methyl]phenol': 'OC1=C(CN(CC2=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2S(=O)(C5=CC=C(C)C=C5)=O)[C@H](C6=CC=CC=C6)C)C=C(Br)C=C1Br',
-  '2,4-Lutidine': 'CC1=NC=CC(C)=C1',
-  '2,4-Mesitylenedisulfonyl Dichloride': 'CC1=C(S(=O)(Cl)=O)C(C)=CC(C)=C1S(=O)(Cl)=O',
-  '2,5-Bis(4-bromophenyl)-1,1-dimethyl-3,4-diphenylsilole': 'C[Si]1(C)C(C2=CC=C(Br)C=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=C(Br)C=C5',
-  '2,5-Bis[(trimethylsilyl)ethynyl]thiophene': 'C[Si](C#CC1=CC=C(C#C[Si](C)(C)C)S1)(C)C',
-  '2,5-Dibromo-1,1,3,4-tetraphenylsilole': 'BrC1=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C(Br)[Si]1(C4=CC=CC=C4)C5=CC=CC=C5',
-  '2,5-Dibromo-1,1-dimethyl-3,4-diphenylsilole': 'C[Si]1(C)C(Br)=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C1Br',
-  '2,5-Diphenylpyridine': 'C1(C2=CC=CC=C2)=NC=C(C3=CC=CC=C3)C=C1',
-  '2,5-Lutidine': 'CC1=NC=C(C)C=C1',
-  '2,5-Norbornadiene': 'C12C=CC(C2)C=C1',
-  '2,6-Bis(2-benzimidazolyl)pyridine': 'C1(C2=NC3=CC=CC=C3N2)=NC(C4=NC5=CC=CC=C5N4)=CC=C1',
-  '2,6-Bis(2-pyridyl)-4(1H)-pyridone': 'O=C1C=C(C2=NC=CC=C2)NC(C3=NC=CC=C3)=C1',
-  '2,6-Bis[(2,2,6,6-tetramethyl-1-piperidinyl)methyl]phenylboronic Acid': 'OB(C1=C(CN2C(C)(C)CCCC2(C)C)C=CC=C1CN3C(C)(C)CCCC3(C)C)O',
-  '2,6-Bis[(2R,4S,5S)-1-benzyl-4,5-diphenylimidazolidin-2-yl]pyridine': 'C1([C@@H]2N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2CC5=CC=CC=C5)=NC([C@@H]6N[C@@H](C7=CC=CC=C7)[C@H](C8=CC=CC=C8)N6CC9=CC=CC=C9)=CC=C1',
-  '2,6-Bis[(2S,4S)-4-methyl-5,5-diphenyloxazolidin-2-yl]pyridine': 'C[C@@H]1N[C@H](C2=CC=CC([C@@H]3OC(C4=CC=CC=C4)(C5=CC=CC=C5)[C@H](C)N3)=N2)OC1(C6=CC=CC=C6)C7=CC=CC=C7',
-  '2,6-Bis[(2S,5S)-4,4-diphenyl-1-aza-3-oxabicyclo[3.3.0]octan-2-yl]pyridine': '[H][C@]12C(C3=CC=CC=C3)(C4=CC=CC=C4)O[C@@H](C5=CC=CC([C@H]6N7CCC[C@@]7([H])C(C8=CC=CC=C8)(C9=CC=CC=C9)O6)=N5)N1CCC2',
-  '2,6-Di(1-pyrazolyl)pyridine': 'C1(N2N=CC=C2)=NC(N3N=CC=C3)=CC=C1',
-  '2,6-Di(2H-1,2,3-triazol-4-yl)pyridine': 'C1(C2=NNN=C2)=NC(C3=NNN=C3)=CC=C1',
-  '2,6-Dimethyl-3,5-heptanedione': 'CC(C)C(CC(C(C)C)=O)=O',
-  '2,6-Lutidine': 'CC1=NC(C)=CC=C1',
-  '2,8,9-Triisobutyl-2,5,8,9-tetraaza-1-phosphabicyclo[3.3.3]undecane': 'CC(C)CN1CCN2CCN(CC(C)C)P1N(CC(C)C)CC2',
-  '2,8,9-Triisopropyl-2,5,8,9-tetraaza-1-phosphabicyclo[3,3,3]undecane': 'CC(N1CCN2CCN(C(C)C)P1N(C(C)C)CC2)C',
-  '2,8-Difluoro-5-(trifluoromethyl)-5H-dibenzo[b,d]thiophen-5-ium Trifluoromethanesulfonate': 'FC([S+]1C2=CC=C(F)C=C2C3=CC(F)=CC=C31)(F)F.O=S(C(F)(F)F)([O-])=O',
-  '2,9-Dibutyl-1,10-phenanthroline': 'CCCCC1=NC2=C3N=C(CCCC)C=CC3=CC=C2C=C1',
-  '2,9-Dichloro-1,10-phenanthroline': 'ClC1=NC2=C3N=C(Cl)C=CC3=CC=C2C=C1',
-  '2,9-Diphenyl-1,10-phenanthroline': 'C1(C2=CC=CC=C2)=NC3=C4N=C(C5=CC=CC=C5)C=CC4=CC=C3C=C1',
-  '2-[(2,2,6,6-Tetramethyl-1-piperidyl)methyl]phenylboronic Acid': 'OB(C1=CC=CC=C1CN2C(C)(C)CCCC2(C)C)O',
-  '2-[N,N-Bis(trifluoromethanesulfonyl)amino]-5-chloropyridine': 'ClC1=CN=C(N(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C=C1',
-  '2-Acetylcyclohexanone': 'O=C1C(C(C)=O)CCCC1',
-  '2-Acetylcyclopentanone': 'O=C1C(C(C)=O)CCC1',
-  '2-Bromo-1,10-phenanthroline': 'BrC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  '2-Bromo-1-ethylpyridinium Tetrafluoroborate': 'CC[N+]1=CC=CC=C1Br.F[B-](F)(F)F',
-  '2-Bromo-2-cyano-N,N-dimethylacetamide': 'O=C(N(C)C)C(Br)C#N',
-  '2-Chloro-1,10-phenanthroline': 'ClC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  '2-Chloro-1,3,2-dioxaphospholane': 'ClP1OCCO1',
-  '2-Chloro-1,3-bis(2,6-diisopropylphenyl)-1H-imidazolium Chloride': 'CC(C1=C([N+]2=C(Cl)N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
-  '2-Chloro-1,3-dimethylimidazolinium Chloride': 'C[N+]1=C(Cl)N(C)CC1.[Cl-]',
-  '2-Chloro-1,3-dimethylimidazolinium Hexafluorophosphate': 'C[N+]1=C(Cl)N(C)CC1.F[P-](F)(F)(F)(F)F',
-  '2-Chloro-1,3-dimethylimidazolinium Tetrafluoroborate': 'C[N+]1=C(Cl)N(C)CC1.F[B-](F)(F)F',
-  '2-Chloro-1-methylpyridinium Iodide': 'C[N+]1=CC=CC=C1Cl.[I-]',
-  '2-Chloro-1-methylpyridinium p-Toluenesulfonate': 'C[N+]1=CC=CC=C1Cl.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  '2-Chloro-4H-1,3,2-benzodioxaphosphorin-4-one': 'O=C1OP(Cl)OC2=CC=CC=C12',
-  '2-Cyanoethyltriethoxysilane': 'CCO[Si](OCC)(CCC#N)OCC',
+  "2,3,7,8,12,13,17,18-Octaethylporphyrin": 'CCC1=C(CC)C2=NC1=CC3=C(CC)C(CC)=C(N3)C=C4C(CC)=C(CC)C(C=C5C(CC)=C(CC)C(N5)=C2)=N4',
+  "2,3,7,8,12,13,17,18-Octafluoro-5,10,15,20-tetrakis(pentafluorophenyl)porphyrin": 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C(F)=C(F)C(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C(F)=C(F)C5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C(F)=C7F)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=C(F)C(F)=C2N9)=N3',
+  "2,3-Dimethyl-1-propylimidazolium Bis(trifluoromethanesulfonyl)imide": 'CN1C(C)=[N+](CCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "2,3-Lutidine": 'CC1=NC=CC=C1C',
+  "2,4,4,6-Tetrabromo-2,5-cyclohexadienone": 'BrC1=CC(Br)(Br)C=C(Br)C1=O',
+  "2,4,5-Trichlorophenol": 'OC1=CC(Cl)=C(Cl)C=C1Cl',
+  "2,4,6,8-Tetramethyl-2,4,6,8-tetravinylcyclotetrasiloxane": 'C=CO1(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]1',
+  "2,4,6,8-Tetramethylcyclotetrasiloxane": 'CO1[SiH2]O(C)[SiH2]O(C)[SiH2]O(C)[SiH2]1',
+  "2,4,6-Tri(2-pyridyl)-1,3,5-triazine": 'C1(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=N1',
+  "2,4,6-Tri(4-pyridyl)-1,3,5-triazine": 'C1(C2=CC=NC=C2)=NC(C3=CC=NC=C3)=NC(C4=CC=NC=C4)=N1',
+  "2,4,6-Trichlorobenzoyl Chloride": 'O=C(Cl)C1=C(Cl)C=C(Cl)C=C1Cl',
+  "2,4,6-Triisopropylbenzenesulfonyl Chloride": 'O=S(C1=C(C(C)C)C=C(C(C)C)C=C1C(C)C)(Cl)=O',
+  "2,4,6-Trimethylpyridinium p-Toluenesulfonate": 'CC1=[NH+]C(C)=CC(C)=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  "2,4,6-Tris(3,4,5-trifluorophenyl)boroxin": 'FC1=C(F)C(F)=CC(B2OB(C3=CC(F)=C(F)C(F)=C3)OB(C4=CC(F)=C(F)C(F)=C4)O2)=C1',
+  "2,4-Dibromo-6-[(E)-[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]phenol": 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C(Br)C=C1Br',
+  "2,4-Dibromo-6-[[[[(4S,5S)-4,5-dihydro-4,5-diphenyl-1-tosyl-1H-imidazol-2-yl]methyl][(S)-1-phenylethyl]amino]methyl]phenol": 'OC1=C(CN(CC2=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2S(=O)(C5=CC=C(C)C=C5)=O)[C@H](C6=CC=CC=C6)C)C=C(Br)C=C1Br',
+  "2,4-Lutidine": 'CC1=NC=CC(C)=C1',
+  "2,4-Mesitylenedisulfonyl Dichloride": 'CC1=C(S(=O)(Cl)=O)C(C)=CC(C)=C1S(=O)(Cl)=O',
+  "2,5-Bis(4-bromophenyl)-1,1-dimethyl-3,4-diphenylsilole": 'C[Si]1(C)C(C2=CC=C(Br)C=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=C(Br)C=C5',
+  "2,5-Bis[(trimethylsilyl)ethynyl]thiophene": 'C[Si](C#CC1=CC=C(C#C[Si](C)(C)C)S1)(C)C',
+  "2,5-Dibromo-1,1,3,4-tetraphenylsilole": 'BrC1=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C(Br)[Si]1(C4=CC=CC=C4)C5=CC=CC=C5',
+  "2,5-Dibromo-1,1-dimethyl-3,4-diphenylsilole": 'C[Si]1(C)C(Br)=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C1Br',
+  "2,5-Diphenylpyridine": 'C1(C2=CC=CC=C2)=NC=C(C3=CC=CC=C3)C=C1',
+  "2,5-Lutidine": 'CC1=NC=C(C)C=C1',
+  "2,5-Norbornadiene": 'C12C=CC(C2)C=C1',
+  "2,6-Bis(2-benzimidazolyl)pyridine": 'C1(C2=NC3=CC=CC=C3N2)=NC(C4=NC5=CC=CC=C5N4)=CC=C1',
+  "2,6-Bis(2-pyridyl)-4(1H)-pyridone": 'O=C1C=C(C2=NC=CC=C2)NC(C3=NC=CC=C3)=C1',
+  "2,6-Bis[(2,2,6,6-tetramethyl-1-piperidinyl)methyl]phenylboronic Acid": 'OB(C1=C(CN2C(C)(C)CCCC2(C)C)C=CC=C1CN3C(C)(C)CCCC3(C)C)O',
+  "2,6-Bis[(2R,4S,5S)-1-benzyl-4,5-diphenylimidazolidin-2-yl]pyridine": 'C1([C@@H]2N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2CC5=CC=CC=C5)=NC([C@@H]6N[C@@H](C7=CC=CC=C7)[C@H](C8=CC=CC=C8)N6CC9=CC=CC=C9)=CC=C1',
+  "2,6-Bis[(2S,4S)-4-methyl-5,5-diphenyloxazolidin-2-yl]pyridine": 'C[C@@H]1N[C@H](C2=CC=CC([C@@H]3OC(C4=CC=CC=C4)(C5=CC=CC=C5)[C@H](C)N3)=N2)OC1(C6=CC=CC=C6)C7=CC=CC=C7',
+  "2,6-Bis[(2S,5S)-4,4-diphenyl-1-aza-3-oxabicyclo[3.3.0]octan-2-yl]pyridine": '[H][C@]12C(C3=CC=CC=C3)(C4=CC=CC=C4)O[C@@H](C5=CC=CC([C@H]6N7CCC[C@@]7([H])C(C8=CC=CC=C8)(C9=CC=CC=C9)O6)=N5)N1CCC2',
+  "2,6-Di(1-pyrazolyl)pyridine": 'C1(N2N=CC=C2)=NC(N3N=CC=C3)=CC=C1',
+  "2,6-Di(2H-1,2,3-triazol-4-yl)pyridine": 'C1(C2=NNN=C2)=NC(C3=NNN=C3)=CC=C1',
+  "2,6-Dimethyl-3,5-heptanedione": 'CC(C)C(CC(C(C)C)=O)=O',
+  "2,6-Lutidine": 'CC1=NC(C)=CC=C1',
+  "2,8,9-Triisobutyl-2,5,8,9-tetraaza-1-phosphabicyclo[3.3.3]undecane": 'CC(C)CN1CCN2CCN(CC(C)C)P1N(CC(C)C)CC2',
+  "2,8,9-Triisopropyl-2,5,8,9-tetraaza-1-phosphabicyclo[3,3,3]undecane": 'CC(N1CCN2CCN(C(C)C)P1N(C(C)C)CC2)C',
+  "2,8-Difluoro-5-(trifluoromethyl)-5H-dibenzo[b,d]thiophen-5-ium Trifluoromethanesulfonate": 'FC([S+]1C2=CC=C(F)C=C2C3=CC(F)=CC=C31)(F)F.O=S(C(F)(F)F)([O-])=O',
+  "2,9-Dibutyl-1,10-phenanthroline": 'CCCCC1=NC2=C3N=C(CCCC)C=CC3=CC=C2C=C1',
+  "2,9-Dichloro-1,10-phenanthroline": 'ClC1=NC2=C3N=C(Cl)C=CC3=CC=C2C=C1',
+  "2,9-Diphenyl-1,10-phenanthroline": 'C1(C2=CC=CC=C2)=NC3=C4N=C(C5=CC=CC=C5)C=CC4=CC=C3C=C1',
+  "2-[(2,2,6,6-Tetramethyl-1-piperidyl)methyl]phenylboronic Acid": 'OB(C1=CC=CC=C1CN2C(C)(C)CCCC2(C)C)O',
+  "2-[N,N-Bis(trifluoromethanesulfonyl)amino]-5-chloropyridine": 'ClC1=CN=C(N(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C=C1',
+  "2-Acetylcyclohexanone": 'O=C1C(C(C)=O)CCCC1',
+  "2-Acetylcyclopentanone": 'O=C1C(C(C)=O)CCC1',
+  "2-Bromo-1,10-phenanthroline": 'BrC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  "2-Bromo-1-ethylpyridinium Tetrafluoroborate": 'CC[N+]1=CC=CC=C1Br.F[B-](F)(F)F',
+  "2-Bromo-2-cyano-N,N-dimethylacetamide": 'O=C(N(C)C)C(Br)C#N',
+  "2-Chloro-1,10-phenanthroline": 'ClC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  "2-Chloro-1,3,2-dioxaphospholane": 'ClP1OCCO1',
+  "2-Chloro-1,3-bis(2,6-diisopropylphenyl)-1H-imidazolium Chloride": 'CC(C1=C([N+]2=C(Cl)N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
+  "2-Chloro-1,3-dimethylimidazolinium Chloride": 'C[N+]1=C(Cl)N(C)CC1.[Cl-]',
+  "2-Chloro-1,3-dimethylimidazolinium Hexafluorophosphate": 'C[N+]1=C(Cl)N(C)CC1.F[P-](F)(F)(F)(F)F',
+  "2-Chloro-1,3-dimethylimidazolinium Tetrafluoroborate": 'C[N+]1=C(Cl)N(C)CC1.F[B-](F)(F)F',
+  "2-Chloro-1-methylpyridinium Iodide": 'C[N+]1=CC=CC=C1Cl.[I-]',
+  "2-Chloro-1-methylpyridinium p-Toluenesulfonate": 'C[N+]1=CC=CC=C1Cl.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  "2-Chloro-4H-1,3,2-benzodioxaphosphorin-4-one": 'O=C1OP(Cl)OC2=CC=CC=C12',
+  "2-Cyanoethyltriethoxysilane": 'CCO[Si](OCC)(CCC#N)OCC',
   "2-Dicyclohexylphosphino-2',4',6'-triisopropylbiphenyl": 'CC(C1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(C(C)C)=CC(C(C)C)=C1)C',
   "2-Dicyclohexylphosphino-2',6'-diisopropoxybiphenyl": 'CC(OC1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(OC(C)C)=CC=C1)C',
   "2-Dicyclohexylphosphino-2',6'-dimethoxybiphenyl": 'COC1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(OC)=CC=C1',
   "2-Di-tert-butylphosphino-2',4',6'-triisopropylbiphenyl": 'CC(C1=C(C2=CC=CC=C2P(C(C)(C)C)C(C)(C)C)C(C(C)C)=CC(C(C)C)=C1)C',
-  '2-Fluoro-1-methylpyridinium p-Toluenesulfonate': 'C[N+]1=CC=CC=C1F.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  '2-Furoyltrifluoroacetone': 'O=C(CC(C1=CC=CO1)=O)C(F)(F)F',
-  '2-Hydroxy-2-azaadamantane': 'ON1C2CC3CC(C2)CC1C3',
-  '2-Hydroxybenzaldehyde Phenylhydrazone': 'OC1=CC=CC=C1/C=N/NC2=CC=CC=C2',
-  '2-Hydroxybenzoic Acid': 'O=C(O)C1=CC=CC=C1O',
-  '2-Hydroxypyridine N-Oxide': 'OC1=CC=CC=[N+]1[O-]',
-  '2-Iodosobenzoic Acid': 'O=C(O)C1=CC=CC=C1I=O',
-  '2-Iodoxybenzoic acid': 'O=C(O)C1=CC=CC=C1I(=O)=O',
-  '2-methoxy ethanol': 'OCCOC',
-  '2-Methyl-1,10-phenanthroline': 'CC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  '2-Methyl-6-nitrobenzoic Anhydride': 'O=C(OC(C1=C([N+]([O-])=O)C=CC=C1C)=O)C2=C([N+]([O-])=O)C=CC=C2C',
-  '2-Methylbenzo[e]indene': 'N/A',
-  '2-Methylcyclopenta[l]phenanthrene': 'CC1=CC2=C3CC=CC=C3C4=C(C2=C1)C=CC=C4',
-  '2-Nitrophenylarsonic Acid': 'O=[As](C1=CC=CC=C1[N+]([O-])=O)(O)O',
-  '2-Norbornene': 'C12C=CC(C2)CC1',
-  '2-Phenylethylboronic Acid': 'OB(CCC1=CC=CC=C1)O',
-  '2-Salicylideneaminophenol': 'OC1=CC=CC=C1/N=C/C2=CC=CC=C2O',
-  '2-tert-Butyl-1,1,3,3-tetramethylguanidine': 'CN(C)C(N(C)C)=NC(C)(C)C',
-  '2-Trimethylsilyloxy-1,3-butadiene': 'C=C(O[Si](C)(C)C)C=C',
-  '2-Trimethylsilylthiophene': 'C[Si](C1=CC=CS1)(C)C',
-  '3-(2-Aminoethylamino)propyltrimethoxysilane': 'CO[Si](OC)(CCCNCCN)OC',
-  '3-(Diethoxyphosphoryloxy)-1,2,3-benzotriazin-4(3H)-one': 'O=C1N(OP(OCC)(OCC)=O)N=NC2=CC=CC=C12',
-  '3-(Dimethylsilyloxy)-1,1,5,5-tetramethyl-3-phenyltrisiloxane': 'C[SiH](C)O[Si](C1=CC=CC=C1)(O[SiH](C)C)O[SiH](C)C',
-  '3-(Diphenylphosphino)-1-propylamine': 'NCCCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  '3-(Triallylsilyl)propyl Acrylate': 'C=CC(OCCC[Si](CC=C)(CC=C)CC=C)=O',
-  '3-(Triallylsilyl)propyl Methacrylate': 'CC(C(OCCC[Si](CC=C)(CC=C)CC=C)=O)=C',
-  '3-(Triethoxysilyl)propyl Isocyanate': 'CCO[Si](CCCN=C=O)(OCC)OCC',
-  '3-(Trimethoxysilyl)propyl Acrylate': 'C=CC(OCCC[Si](OC)(OC)OC)=O',
-  '3-(Trimethoxysilyl)propyl Methacrylate': 'CC(C(OCCC[Si](OC)(OC)OC)=O)=C',
-  '3-(Trimethylsilylethynyl)thiophene': 'C[Si](C#CC1=CSC=C1)(C)C',
+  "2-Fluoro-1-methylpyridinium p-Toluenesulfonate": 'C[N+]1=CC=CC=C1F.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  "2-Furoyltrifluoroacetone": 'O=C(CC(C1=CC=CO1)=O)C(F)(F)F',
+  "2-Hydroxy-2-azaadamantane": 'ON1C2CC3CC(C2)CC1C3',
+  "2-Hydroxybenzaldehyde Phenylhydrazone": 'OC1=CC=CC=C1/C=N/NC2=CC=CC=C2',
+  "2-Hydroxybenzoic Acid": 'O=C(O)C1=CC=CC=C1O',
+  "2-Hydroxypyridine N-Oxide": 'OC1=CC=CC=[N+]1[O-]',
+  "2-Iodosobenzoic Acid": 'O=C(O)C1=CC=CC=C1I=O',
+  "2-Iodoxybenzoic acid": 'O=C(O)C1=CC=CC=C1I(=O)=O',
+  "2-methoxy ethanol": 'OCCOC',
+  "2-Methyl-1,10-phenanthroline": 'CC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  "2-Methyl-6-nitrobenzoic Anhydride": 'O=C(OC(C1=C([N+]([O-])=O)C=CC=C1C)=O)C2=C([N+]([O-])=O)C=CC=C2C',
+  "2-Methylbenzo[e]indene": 'N/A',
+  "2-Methylcyclopenta[l]phenanthrene": 'CC1=CC2=C3CC=CC=C3C4=C(C2=C1)C=CC=C4',
+  "2-Nitrophenylarsonic Acid": 'O=[As](C1=CC=CC=C1[N+]([O-])=O)(O)O',
+  "2-Norbornene": 'C12C=CC(C2)CC1',
+  "2-Phenylethylboronic Acid": 'OB(CCC1=CC=CC=C1)O',
+  "2-Salicylideneaminophenol": 'OC1=CC=CC=C1/N=C/C2=CC=CC=C2O',
+  "2-tert-Butyl-1,1,3,3-tetramethylguanidine": 'CN(C)C(N(C)C)=NC(C)(C)C',
+  "2-Trimethylsilyloxy-1,3-butadiene": 'C=C(O[Si](C)(C)C)C=C',
+  "2-Trimethylsilylthiophene": 'C[Si](C1=CC=CS1)(C)C',
+  "3-(2-Aminoethylamino)propyltrimethoxysilane": 'CO[Si](OC)(CCCNCCN)OC',
+  "3-(Diethoxyphosphoryloxy)-1,2,3-benzotriazin-4(3H)-one": 'O=C1N(OP(OCC)(OCC)=O)N=NC2=CC=CC=C12',
+  "3-(Dimethylsilyloxy)-1,1,5,5-tetramethyl-3-phenyltrisiloxane": 'C[SiH](C)O[Si](C1=CC=CC=C1)(O[SiH](C)C)O[SiH](C)C',
+  "3-(Diphenylphosphino)-1-propylamine": 'NCCCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "3-(Triallylsilyl)propyl Acrylate": 'C=CC(OCCC[Si](CC=C)(CC=C)CC=C)=O',
+  "3-(Triallylsilyl)propyl Methacrylate": 'CC(C(OCCC[Si](CC=C)(CC=C)CC=C)=O)=C',
+  "3-(Triethoxysilyl)propyl Isocyanate": 'CCO[Si](CCCN=C=O)(OCC)OCC',
+  "3-(Trimethoxysilyl)propyl Acrylate": 'C=CC(OCCC[Si](OC)(OC)OC)=O',
+  "3-(Trimethoxysilyl)propyl Methacrylate": 'CC(C(OCCC[Si](OC)(OC)OC)=O)=C',
+  "3-(Trimethylsilylethynyl)thiophene": 'C[Si](C#CC1=CSC=C1)(C)C',
   "3,3'-Iminobis(N,N-dimethylpropylamine)": 'CN(C)CCCNCCCN(C)C',
   "3,3'-Methylenebis(1-tert-butyl-3-imidazolium Bromide)": 'CC(N1C=C[N+](C[N+]2=CN(C(C)(C)C)C=C2)=C1)(C)C.[Br-].[Br-]',
   "3,3'-Methylenebis[1-(2,6-diisopropylphenyl)-3-imidazolium Bromide]": 'CC(C1=C(N2C=C[N+](C[N+]3=CN(C4=C(C(C)C)C=CC=C4C(C)C)C=C3)=C2)C(C(C)C)=CC=C1)C.[Br-].[Br-]',
-  '3,4,7,8-Tetramethyl-1,10-phenanthroline': 'CC1=C(C)C2=CC=C3C(C)=C(C)C=NC3=C2N=C1',
-  '3,4-Diacetyl-2,5-hexanedione': 'CC(C(C(C)=O)C(C(C)=O)C(C)=O)=O',
-  '3,4-Dihydro-2H-pyrido[1,2-a]pyrimidin-2-one': 'O=C1N=C(C=CC=C2)N2CC1',
-  '3,4-Dihydro-3-hydroxy-4-oxo-1,2,3-benzotriazine': 'O=C1N(O)N=NC2=CC=CC=C12',
-  '3,4-Lutidine': 'CC1=C(C)C=CN=C1',
-  '3,5,6,8-Tetrabromo-1,10-phenanthroline': 'BrC1=CC2=C(Br)C(Br)=C3C=C(Br)C=NC3=C2N=C1',
-  '3,5-Bis(trifluoromethyl)phenylboronic Acid': 'OB(C1=CC(C(F)(F)F)=CC(C(F)(F)F)=C1)O',
-  '3,5-Di(2-pyridyl)pyrazole': 'C1(C2=NC=CC=C2)=NNC(C3=NC=CC=C3)=C1',
-  '3,5-Heptanedione': 'CCC(CC(CC)=O)=O',
-  '3,5-Lutidine': 'CC1=CC(C)=CN=C1',
-  '3,6-Di(2-pyridyl)-1,2,4,5-tetrazine': 'C1(C2=NC=CC=C2)=NN=C(C3=NC=CC=C3)N=N1',
-  '3,8-Dibromo-1,10-phenanthroline': 'BrC1=CC2=CC=C3C=C(Br)C=NC3=C2N=C1',
-  '3-[(Dimethylsilyl)oxy]-1,1,3,5,5-pentamethyltrisiloxane': 'C[SiH](C)O[Si](C)(O[SiH](C)C)O[SiH](C)C',
-  '3-[[Dimethyl(vinyl)silyl]oxy]-1,1,5,5-tetramethyl-3-phenyl-1,5-divinyltrisiloxane': 'C=C[Si](C)(C)O[Si](C1=CC=CC=C1)(O[Si](C)(C)C=C)O[Si](C)(C)C=C',
-  '3-[[tert-Butyl(dimethyl)silyl]oxy]-1-propanol': 'OCCCO[Si](C)(C(C)(C)C)C',
-  '3-Aminopropyltriethoxysilane': 'CCO[Si](OCC)(CCCN)OCC',
-  '3-Aminopropyltrimethoxysilane': 'CO[Si](OC)(CCCN)OC',
-  '3-Bromo-1-(trimethylsilyl)-1-propyne': 'C[Si](C#CCBr)(C)C',
-  '3-Bromo-1,10-phenanthroline': 'BrC1=CC2=CC=C3C=CC=NC3=C2N=C1',
-  '3-Chloroacetylacetone': 'CC(C(Cl)C(C)=O)=O',
-  '3-Chloroperoxybenzoic acid': 'C1=CC(=CC(=C1)Cl)C(=O)OO',
-  '3-Chloropropyltriethoxysilane': 'CCO[Si](OCC)(CCCCl)OCC',
-  '3-Ethyl-2,4-pentanedione': 'CC(C(CC)C(C)=O)=O',
-  '3-Glycidyloxypropyltrimethoxysilane': 'CO[Si](OC)(CCCOCC1CO1)OC',
-  '3-Mercaptopropyl(dimethoxy)methylsilane': 'C[Si](OC)(CCCS)OC',
-  '3-Methyl-1-phenyl-2-phospholene 1-Oxide': 'CC(CC1)=CP1(C2=CC=CC=C2)=O',
-  '3-Methyl-2,4-pentanedione': 'CC(C(C)C(C)=O)=O',
-  '3-Nitro-1,2,4-triazole': 'O=[N+](C1=NNC=N1)[O-]',
-  '3-Phenyl-2,4-pentanedione': 'CC(C(C1=CC=CC=C1)C(C)=O)=O',
-  '3-Pyridinecarboxylic Anhydride': 'O=C(OC(C1=CC=CN=C1)=O)C2=CC=CN=C2',
-  '3-Quinolineboronic acid': 'OB(C1=CC2=CC=CC=C2N=C1)O',
-  '3-Tolylboronic acid': 'CC1=CC=CC(B(O)O)=C1',
-  '3-Trimethoxysilylpropyl Chloride': 'CO[Si](CCCCl)(OC)OC',
-  '3-Trimethylsilyl-2-propyn-1-ol': 'OCC#C[Si](C)(C)C',
+  "3,4,7,8-Tetramethyl-1,10-phenanthroline": 'CC1=C(C)C2=CC=C3C(C)=C(C)C=NC3=C2N=C1',
+  "3,4-Diacetyl-2,5-hexanedione": 'CC(C(C(C)=O)C(C(C)=O)C(C)=O)=O',
+  "3,4-Dihydro-2H-pyrido[1,2-a]pyrimidin-2-one": 'O=C1N=C(C=CC=C2)N2CC1',
+  "3,4-Dihydro-3-hydroxy-4-oxo-1,2,3-benzotriazine": 'O=C1N(O)N=NC2=CC=CC=C12',
+  "3,4-Lutidine": 'CC1=C(C)C=CN=C1',
+  "3,5,6,8-Tetrabromo-1,10-phenanthroline": 'BrC1=CC2=C(Br)C(Br)=C3C=C(Br)C=NC3=C2N=C1',
+  "3,5-Bis(trifluoromethyl)phenylboronic Acid": 'OB(C1=CC(C(F)(F)F)=CC(C(F)(F)F)=C1)O',
+  "3,5-Di(2-pyridyl)pyrazole": 'C1(C2=NC=CC=C2)=NNC(C3=NC=CC=C3)=C1',
+  "3,5-Heptanedione": 'CCC(CC(CC)=O)=O',
+  "3,5-Lutidine": 'CC1=CC(C)=CN=C1',
+  "3,6-Di(2-pyridyl)-1,2,4,5-tetrazine": 'C1(C2=NC=CC=C2)=NN=C(C3=NC=CC=C3)N=N1',
+  "3,8-Dibromo-1,10-phenanthroline": 'BrC1=CC2=CC=C3C=C(Br)C=NC3=C2N=C1',
+  "3-[(Dimethylsilyl)oxy]-1,1,3,5,5-pentamethyltrisiloxane": 'C[SiH](C)O[Si](C)(O[SiH](C)C)O[SiH](C)C',
+  "3-[[Dimethyl(vinyl)silyl]oxy]-1,1,5,5-tetramethyl-3-phenyl-1,5-divinyltrisiloxane": 'C=C[Si](C)(C)O[Si](C1=CC=CC=C1)(O[Si](C)(C)C=C)O[Si](C)(C)C=C',
+  "3-[[tert-Butyl(dimethyl)silyl]oxy]-1-propanol": 'OCCCO[Si](C)(C(C)(C)C)C',
+  "3-Aminopropyltriethoxysilane": 'CCO[Si](OCC)(CCCN)OCC',
+  "3-Aminopropyltrimethoxysilane": 'CO[Si](OC)(CCCN)OC',
+  "3-Bromo-1-(trimethylsilyl)-1-propyne": 'C[Si](C#CCBr)(C)C',
+  "3-Bromo-1,10-phenanthroline": 'BrC1=CC2=CC=C3C=CC=NC3=C2N=C1',
+  "3-Chloroacetylacetone": 'CC(C(Cl)C(C)=O)=O',
+  "3-Chloroperoxybenzoic acid": 'C1=CC(=CC(=C1)Cl)C(=O)OO',
+  "3-Chloropropyltriethoxysilane": 'CCO[Si](OCC)(CCCCl)OCC',
+  "3-Ethyl-2,4-pentanedione": 'CC(C(CC)C(C)=O)=O',
+  "3-Glycidyloxypropyltrimethoxysilane": 'CO[Si](OC)(CCCOCC1CO1)OC',
+  "3-Mercaptopropyl(dimethoxy)methylsilane": 'C[Si](OC)(CCCS)OC',
+  "3-Methyl-1-phenyl-2-phospholene 1-Oxide": 'CC(CC1)=CP1(C2=CC=CC=C2)=O',
+  "3-Methyl-2,4-pentanedione": 'CC(C(C)C(C)=O)=O',
+  "3-Nitro-1,2,4-triazole": 'O=[N+](C1=NNC=N1)[O-]',
+  "3-Phenyl-2,4-pentanedione": 'CC(C(C1=CC=CC=C1)C(C)=O)=O',
+  "3-Pyridinecarboxylic Anhydride": 'O=C(OC(C1=CC=CN=C1)=O)C2=CC=CN=C2',
+  "3-Quinolineboronic acid": 'OB(C1=CC2=CC=CC=C2N=C1)O',
+  "3-Tolylboronic acid": 'CC1=CC=CC(B(O)O)=C1',
+  "3-Trimethoxysilylpropyl Chloride": 'CO[Si](CCCCl)(OC)OC',
+  "3-Trimethylsilyl-2-propyn-1-ol": 'OCC#C[Si](C)(C)C',
   "4-([2,2':6',2''-Terpyridin]-4'-yl)benzoic Acid": 'O=C(O)C1=CC=C(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)C=C1',
-  '4-(4,6-Dimethoxy-1,3,5-triazin-2-yl)-4-methylmorpholinium Chloride': 'C[N+]1(C2=NC(OC)=NC(OC)=N2)CCOCC1.[Cl-]',
+  "4-(4,6-Dimethoxy-1,3,5-triazin-2-yl)-4-methylmorpholinium Chloride": 'C[N+]1(C2=NC(OC)=NC(OC)=N2)CCOCC1.[Cl-]',
   "4'-(4-Bromophenyl)-2,2':6',2''-terpyridine": 'BrC1=CC=C(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)C=C1',
-  '4-(4-Dimethylaminophenylazo)phenylarsonic Acid Hydrochloride': 'O=[As](C1=CC=C(/N=N/C2=CC=C(N(C)C)C=C2)C=C1)(O)O.[H]Cl',
+  "4-(4-Dimethylaminophenylazo)phenylarsonic Acid Hydrochloride": 'O=[As](C1=CC=C(/N=N/C2=CC=C(N(C)C)C=C2)C=C1)(O)O.[H]Cl',
   "4'-(4-Pyridyl)-2,2':6',2''-terpyridine": 'C1(C2=NC(C3=NC=CC=C3)=CC(C4=CC=NC=C4)=C2)=NC=CC=C1',
   "4-(Bromomethyl)-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CBr)=C2)=NC=C1',
   "4-(Chloromethyl)-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CCl)=C2)=NC=C1',
-  '4-(Dimethylamino)phenyldiphenylphosphine': 'CN(C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1)C',
-  '4-(Dimethylamino)pyridine': 'CN(C1=CC=NC=C1)C',
-  '4-(Diphenylphosphino)benzoic Acid': 'O=C(O)C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1',
-  '4-(N,N-Dimethylamino)phenylboronic acid': 'CN(C)C1=CC=C(B(O)O)C=C1',
-  '4-(Trimethylsilyl)-3-butyn-2-one': 'CC(C#C[Si](C)(C)C)=O',
-  '4-(Trimethylsilyl)diphenylacetylene': 'C[Si](C1=CC=C(C#CC2=CC=CC=C2)C=C1)(C)C',
-  '4,4,4-Trifluoro-1-(2-naphthyl)-1,3-butanedione': 'O=C(C1=CC=C2C=CC=CC2=C1)CC(C(F)(F)F)=O',
-  '4,4,4-Trifluoro-1-(2-thienyl)-1,3-butanedione': 'O=C(C1=CC=CS1)CC(C(F)(F)F)=O',
-  '4,4,4-Trifluoro-1-(4-methoxyphenyl)-1,3-butanedione': 'O=C(C1=CC=C(OC)C=C1)CC(C(F)(F)F)=O',
-  '4,4,4-Trifluoro-1-(p-tolyl)-1,3-butanedione': 'O=C(C1=CC=C(C)C=C1)CC(C(F)(F)F)=O',
-  '4,4,4-Trifluoro-1-phenyl-1,3-butanedione': 'O=C(C1=CC=CC=C1)CC(C(F)(F)F)=O',
-  '4,4,5,5-Tetramethyl-1,3,2-dioxaphospholane 2-Oxide': 'CC1(C)C(C)(C)OP(O1)=O',
+  "4-(Dimethylamino)phenyldiphenylphosphine": 'CN(C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1)C',
+  "4-(Dimethylamino)pyridine": 'CN(C1=CC=NC=C1)C',
+  "4-(Diphenylphosphino)benzoic Acid": 'O=C(O)C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1',
+  "4-(N,N-Dimethylamino)phenylboronic acid": 'CN(C)C1=CC=C(B(O)O)C=C1',
+  "4-(Trimethylsilyl)-3-butyn-2-one": 'CC(C#C[Si](C)(C)C)=O',
+  "4-(Trimethylsilyl)diphenylacetylene": 'C[Si](C1=CC=C(C#CC2=CC=CC=C2)C=C1)(C)C',
+  "4,4,4-Trifluoro-1-(2-naphthyl)-1,3-butanedione": 'O=C(C1=CC=C2C=CC=CC2=C1)CC(C(F)(F)F)=O',
+  "4,4,4-Trifluoro-1-(2-thienyl)-1,3-butanedione": 'O=C(C1=CC=CS1)CC(C(F)(F)F)=O',
+  "4,4,4-Trifluoro-1-(4-methoxyphenyl)-1,3-butanedione": 'O=C(C1=CC=C(OC)C=C1)CC(C(F)(F)F)=O',
+  "4,4,4-Trifluoro-1-(p-tolyl)-1,3-butanedione": 'O=C(C1=CC=C(C)C=C1)CC(C(F)(F)F)=O',
+  "4,4,4-Trifluoro-1-phenyl-1,3-butanedione": 'O=C(C1=CC=CC=C1)CC(C(F)(F)F)=O',
+  "4,4,5,5-Tetramethyl-1,3,2-dioxaphospholane 2-Oxide": 'CC1(C)C(C)(C)OP(O1)=O',
   "4,4'-Bis(5-hexyl-2-thienyl)-2,2'-bipyridyl": 'CCCCCCC1=CC=C(C2=CC(C3=NC=CC(C4=CC=C(CCCCCC)S4)=C3)=NC=C2)S1',
   "4,4'-Bis(chloromethyl)-2,2'-bipyridyl": 'ClCC1=CC(C2=NC=CC(CCl)=C2)=NC=C1',
   "4,4'-Bis(hydroxymethyl)-2,2'-bipyridine": 'OCC1=CC(C2=NC=CC(CO)=C2)=NC=C1',
@@ -725,65 +725,65 @@ export const reagents_kombi = {
   "4,4'-Dimethyl-2,2'-bipyridyl 1-Oxide": 'CC1=CC(C2=CC(C)=CC=[N+]2[O-])=NC=C1',
   "4,4'-Dinonyl-2,2'-bipyridyl": 'CCCCCCCCCC1=CC(C2=NC=CC(CCCCCCCCC)=C2)=NC=C1',
   "4,4'-Di-tert-butyl-2,2'-bipyridyl": 'CC(C1=CC(C2=NC=CC(C(C)(C)C)=C2)=NC=C1)(C)C',
-  '4,5-Bis(diphenylphosphino)-9,9-dimethylxanthene': 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2',
-  '4,5-Diazafluoren-9-one': 'O=C1C2=CC=CN=C2C3=C1C=CC=N3',
-  '4,5-Diazafluorene-9-one O-(p-Toluenesulfonyl)oxime': 'O=S(ON=C1C2=CC=CN=C2C3=C1C=CC=N3)(C4=CC=C(C)C=C4)=O',
-  '4,6-Bis(diphenylphosphino)phenoxazine': 'C(C=CC=C1N2)(P(C3=CC=CC=C3)C4=CC=CC=C4)=C1OC5=C2C=CC=C5P(C6=CC=CC=C6)C7=CC=CC=C7',
-  '4,6-Diphenylthieno[3,4-d]-1,3-dioxol-2-one 5,5-Dioxide': 'O=C(OC1=C2C3=CC=CC=C3)OC1=C(C4=CC=CC=C4)S2(=O)=O',
-  '4,7-Dibromo-1,10-phenanthroline Hydrate': 'BrC1=CC=NC2=C3N=CC=C(Br)C3=CC=C12.[H]O[H]',
-  '4,7-Dichloro-1,10-phenanthroline Hydrate': 'ClC1=CC=NC2=C3N=CC=C(Cl)C3=CC=C12.[H]O[H]',
-  '4,7-Dihydroxy-1,10-phenanthroline': 'OC1=CC=NC2=C3N=CC=C(O)C3=CC=C12',
-  '4,7-Dimethyl-1,10-phenanthroline': 'CC1=CC=NC2=C3N=CC=C(C)C3=CC=C12',
+  "4,5-Bis(diphenylphosphino)-9,9-dimethylxanthene": 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2',
+  "4,5-Diazafluoren-9-one": 'O=C1C2=CC=CN=C2C3=C1C=CC=N3',
+  "4,5-Diazafluorene-9-one O-(p-Toluenesulfonyl)oxime": 'O=S(ON=C1C2=CC=CN=C2C3=C1C=CC=N3)(C4=CC=C(C)C=C4)=O',
+  "4,6-Bis(diphenylphosphino)phenoxazine": 'C(C=CC=C1N2)(P(C3=CC=CC=C3)C4=CC=CC=C4)=C1OC5=C2C=CC=C5P(C6=CC=CC=C6)C7=CC=CC=C7',
+  "4,6-Diphenylthieno[3,4-d]-1,3-dioxol-2-one 5,5-Dioxide": 'O=C(OC1=C2C3=CC=CC=C3)OC1=C(C4=CC=CC=C4)S2(=O)=O',
+  "4,7-Dibromo-1,10-phenanthroline Hydrate": 'BrC1=CC=NC2=C3N=CC=C(Br)C3=CC=C12.[H]O[H]',
+  "4,7-Dichloro-1,10-phenanthroline Hydrate": 'ClC1=CC=NC2=C3N=CC=C(Cl)C3=CC=C12.[H]O[H]',
+  "4,7-Dihydroxy-1,10-phenanthroline": 'OC1=CC=NC2=C3N=CC=C(O)C3=CC=C12',
+  "4,7-Dimethyl-1,10-phenanthroline": 'CC1=CC=NC2=C3N=CC=C(C)C3=CC=C12',
   "4'-[(tert-Butyldimethylsilyloxy)methyl]-2,2,2-trifluoroacetophenone": 'O=C(C1=CC=C(CO[Si](C)(C(C)(C)C)C)C=C1)C(F)(F)F',
-  '4-[2,2,2-Trifluoro-1-[(trimethylsilyl)oxy]ethyl]morpholine': 'C[Si](OC(N1CCOCC1)C(F)(F)F)(C)C',
-  '4-[2-[2-(4-Iodophenoxy)ethoxy]carbonyl]benzoyloxy-2,2,6,6-tetramethylpiperidin-1-oxyl': '[O]N1C(C)(C)CC(OC(C2=CC=CC=C2C(OCCOC3=CC=C(I)C=C3)=O)=O)CC1(C)C',
-  '4-Acetamido-2,2,6,6-tetramethyl-1-oxopiperidinium Tetrafluoroborate': 'O=[N+]1C(C)(C)CC(NC(C)=O)CC1(C)C.F[B-](F)(F)F',
-  '4-Acetamido-2,2,6,6-tetramethylpiperidine 1-Oxyl': 'CC1(C)CC(NC(C)=O)CC(C)(C)N1[O]',
+  "4-[2,2,2-Trifluoro-1-[(trimethylsilyl)oxy]ethyl]morpholine": 'C[Si](OC(N1CCOCC1)C(F)(F)F)(C)C',
+  "4-[2-[2-(4-Iodophenoxy)ethoxy]carbonyl]benzoyloxy-2,2,6,6-tetramethylpiperidin-1-oxyl": '[O]N1C(C)(C)CC(OC(C2=CC=CC=C2C(OCCOC3=CC=C(I)C=C3)=O)=O)CC1(C)C',
+  "4-Acetamido-2,2,6,6-tetramethyl-1-oxopiperidinium Tetrafluoroborate": 'O=[N+]1C(C)(C)CC(NC(C)=O)CC1(C)C.F[B-](F)(F)F',
+  "4-Acetamido-2,2,6,6-tetramethylpiperidine 1-Oxyl": 'CC1(C)CC(NC(C)=O)CC(C)(C)N1[O]',
   "4'-Bromo-2,2':6',2''-terpyridine": 'BrC1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1',
-  '4-Bromotetraphenylsilane': 'BrC1=CC=C([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)C=C1',
+  "4-Bromotetraphenylsilane": 'BrC1=CC=C([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)C=C1',
   "4'-Chloro-2,2':6',2''-terpyridine": 'ClC1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1',
-  '4-Chlorophenyl Phosphorodichloridate': 'O=P(Cl)(Cl)OC1=CC=C(Cl)C=C1',
-  '4-Dimethylamino-1-neopentylpyridinium Chloride': 'CC(C)(C)C[N+]1=CC=C(N(C)C)C=C1.[Cl-]',
-  '4-Dimethylaminopyridine': 'CN(C1=CC=NC=C1)C',
-  '4-Dimethylaminopyridinium Bromide Perbromide': 'CN(C)C1=CC=[NH+]C=C1.Br[Br-]Br',
-  '4-Ethyl-4-methylmorpholinium Bromide': 'C[N+]1(CC)CCOCC1.[Br-]',
-  '4-Fluoro-N-salicylideneaniline': 'OC1=CC=CC=C1/C=N/C2=CC=C(F)C=C2',
-  '4-Fluorophenylmagnesium Bromide': 'Br[Mg]C1=CC=C(F)C=C1',
-  '4-Hydroxy-2,2,6,6-tetramethylpiperidine 1-Oxyl Benzoate': 'CC1(C)CC(OC(C2=CC=CC=C2)=O)CC(C)(C)N1[O]',
-  '4-Hydroxy-3-nitrophenylarsonic Acid': 'O=[As](C1=CC=C(O)C([N+]([O-])=O)=C1)(O)O',
+  "4-Chlorophenyl Phosphorodichloridate": 'O=P(Cl)(Cl)OC1=CC=C(Cl)C=C1',
+  "4-Dimethylamino-1-neopentylpyridinium Chloride": 'CC(C)(C)C[N+]1=CC=C(N(C)C)C=C1.[Cl-]',
+  "4-Dimethylaminopyridine": 'CN(C1=CC=NC=C1)C',
+  "4-Dimethylaminopyridinium Bromide Perbromide": 'CN(C)C1=CC=[NH+]C=C1.Br[Br-]Br',
+  "4-Ethyl-4-methylmorpholinium Bromide": 'C[N+]1(CC)CCOCC1.[Br-]',
+  "4-Fluoro-N-salicylideneaniline": 'OC1=CC=CC=C1/C=N/C2=CC=C(F)C=C2',
+  "4-Fluorophenylmagnesium Bromide": 'Br[Mg]C1=CC=C(F)C=C1',
+  "4-Hydroxy-2,2,6,6-tetramethylpiperidine 1-Oxyl Benzoate": 'CC1(C)CC(OC(C2=CC=CC=C2)=O)CC(C)(C)N1[O]',
+  "4-Hydroxy-3-nitrophenylarsonic Acid": 'O=[As](C1=CC=C(O)C([N+]([O-])=O)=C1)(O)O',
   "4-Hydroxymethyl-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CO)=C2)=NC=C1',
-  '4-Hydroxyphenylarsonic Acid': 'O=[As](C1=CC=C(O)C=C1)(O)O',
-  '4-Methoxy-2,2,6,6-tetramethylpiperidine 1-Oxyl': 'CC1(C)CC(OC)CC(C)(C)N1[O]',
-  '4-Methoxycarbonylphenylboronic acid': 'B(C1=CC=C(C=C1)C(=O)OC)(O)O',
-  '4-Methylmorpholine N-Oxide': 'C[N+]1([O-])CCOCC1',
-  '4-Nitrophenol': 'OC1=CC=C([N+]([O-])=O)C=C1',
-  '4-Nitrophenyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OC1=CC=C([N+]([O-])=O)C=C1)=O',
-  '4-Pyrrolidinopyridine': 'C1(N2CCCC2)=CC=NC=C1',
-  '4-tert-Butyl-2,6-dimethylphenylsulfur Trifluoride': 'CC1=C(S(F)(F)F)C(C)=CC(C(C)(C)C)=C1',
-  '4-Trifluoromethylbenzoic Anhydride': 'O=C(OC(C1=CC=C(C(F)(F)F)C=C1)=O)C2=CC=C(C(F)(F)F)C=C2',
-  '4-Trimethylsilyl-3-butyn-2-ol': 'CC(O)C#C[Si](C)(C)C',
-  '5-(Trimethylsilyl)-1,2,3,4,5-pentamethyl-1,3-cyclopentadiene': 'CC1([Si](C)(C)C)C(C)=C(C)C(C)=C1C',
-  '5,10,15,20-Tetra(4-pyridyl)porphyrin': 'C1(C2=CC=NC=C2)=C3C=CC(C(C4=CC=NC=C4)=C5C=CC(N5)=C(C6=CC=NC=C6)C(C=C7)=NC7=C(C8=CC=NC=C8)C9=CC=C1N9)=N3',
-  '5,10,15,20-Tetrakis(2,4,6-trimethylphenyl)porphyrin': 'CC1=C(C2=C3C=CC(C(C4=C(C)C=C(C)C=C4C)=C(N5)C=CC5=C(C6=C(C)C=C(C)C=C6C)C7=NC(C=C7)=C(C8=C(C)C=C(C)C=C8C)C9=CC=C2N9)=N3)C(C)=CC(C)=C1',
-  '5,10,15,20-Tetrakis(2,6-dichlorophenyl)porphyrin': 'ClC1=C(C2=C3C=CC(C(C4=C(Cl)C=CC=C4Cl)=C(N5)C=CC5=C(C6=C(Cl)C=CC=C6Cl)C7=NC(C=C7)=C(C8=C(Cl)C=CC=C8Cl)C9=CC=C2N9)=N3)C(Cl)=CC=C1',
-  '5,10,15,20-Tetrakis(3,5-dihydroxyphenyl)porphyrin': 'OC1=CC(O)=CC(C2=C3C=CC(C(C4=CC(O)=CC(O)=C4)=C(N5)C=CC5=C(C6=CC(O)=CC(O)=C6)C7=NC(C=C7)=C(C8=CC(O)=CC(O)=C8)C9=CC=C2N9)=N3)=C1',
-  '5,10,15,20-Tetrakis(3,5-dimethoxyphenyl)porphyrin': 'COC1=CC(OC)=CC(C2=C3C=CC(C(C4=CC(OC)=CC(OC)=C4)=C(N5)C=CC5=C(C6=CC(OC)=CC(OC)=C6)C7=NC(C=C7)=C(C8=CC(OC)=CC(OC)=C8)C9=CC=C2N9)=N3)=C1',
-  '5,10,15,20-Tetrakis(4-carboxymethyloxyphenyl)porphyrin': 'O=C(COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OCC(O)=O)C=C4)=C(N5)C=CC5=C(C6=CC=C(OCC(O)=O)C=C6)C7=NC(C=C7)=C(C8=CC=C(OCC(O)=O)C=C8)C9=CC=C2N9)=N3)C=C1)O',
-  '5,10,15,20-Tetrakis(4-hydroxyphenyl)porphyrin': 'OC1=CC=C(C2=C3C=CC(C(C4=CC=C(O)C=C4)=C(N5)C=CC5=C(C6=CC=C(O)C=C6)C7=NC(C=C7)=C(C8=CC=C(O)C=C8)C9=CC=C2N9)=N3)C=C1',
-  '5,10,15,20-Tetrakis(4-methoxyphenyl)porphyrin': 'COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OC)C=C4)=C(N5)C=CC5=C(C6=CC=C(OC)C=C6)C7=NC(C=C7)=C(C8=CC=C(OC)C=C8)C9=CC=C2N9)=N3)C=C1',
-  '5,10,15,20-Tetrakis(pentafluorophenyl)porphyrin': 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C=CC(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C=CC5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C=C7)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=CC=C2N9)=N3',
-  '5,10,15,20-Tetrakis(p-tolyl)porphyrin': 'CC1=CC=C(C2=C3C=CC(C(C4=CC=C(C)C=C4)=C(N5)C=CC5=C(C6=CC=C(C)C=C6)C7=NC(C=C7)=C(C8=CC=C(C)C=C8)C9=CC=C2N9)=N3)C=C1',
+  "4-Hydroxyphenylarsonic Acid": 'O=[As](C1=CC=C(O)C=C1)(O)O',
+  "4-Methoxy-2,2,6,6-tetramethylpiperidine 1-Oxyl": 'CC1(C)CC(OC)CC(C)(C)N1[O]',
+  "4-Methoxycarbonylphenylboronic acid": 'B(C1=CC=C(C=C1)C(=O)OC)(O)O',
+  "4-Methylmorpholine N-Oxide": 'C[N+]1([O-])CCOCC1',
+  "4-Nitrophenol": 'OC1=CC=C([N+]([O-])=O)C=C1',
+  "4-Nitrophenyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OC1=CC=C([N+]([O-])=O)C=C1)=O',
+  "4-Pyrrolidinopyridine": 'C1(N2CCCC2)=CC=NC=C1',
+  "4-tert-Butyl-2,6-dimethylphenylsulfur Trifluoride": 'CC1=C(S(F)(F)F)C(C)=CC(C(C)(C)C)=C1',
+  "4-Trifluoromethylbenzoic Anhydride": 'O=C(OC(C1=CC=C(C(F)(F)F)C=C1)=O)C2=CC=C(C(F)(F)F)C=C2',
+  "4-Trimethylsilyl-3-butyn-2-ol": 'CC(O)C#C[Si](C)(C)C',
+  "5-(Trimethylsilyl)-1,2,3,4,5-pentamethyl-1,3-cyclopentadiene": 'CC1([Si](C)(C)C)C(C)=C(C)C(C)=C1C',
+  "5,10,15,20-Tetra(4-pyridyl)porphyrin": 'C1(C2=CC=NC=C2)=C3C=CC(C(C4=CC=NC=C4)=C5C=CC(N5)=C(C6=CC=NC=C6)C(C=C7)=NC7=C(C8=CC=NC=C8)C9=CC=C1N9)=N3',
+  "5,10,15,20-Tetrakis(2,4,6-trimethylphenyl)porphyrin": 'CC1=C(C2=C3C=CC(C(C4=C(C)C=C(C)C=C4C)=C(N5)C=CC5=C(C6=C(C)C=C(C)C=C6C)C7=NC(C=C7)=C(C8=C(C)C=C(C)C=C8C)C9=CC=C2N9)=N3)C(C)=CC(C)=C1',
+  "5,10,15,20-Tetrakis(2,6-dichlorophenyl)porphyrin": 'ClC1=C(C2=C3C=CC(C(C4=C(Cl)C=CC=C4Cl)=C(N5)C=CC5=C(C6=C(Cl)C=CC=C6Cl)C7=NC(C=C7)=C(C8=C(Cl)C=CC=C8Cl)C9=CC=C2N9)=N3)C(Cl)=CC=C1',
+  "5,10,15,20-Tetrakis(3,5-dihydroxyphenyl)porphyrin": 'OC1=CC(O)=CC(C2=C3C=CC(C(C4=CC(O)=CC(O)=C4)=C(N5)C=CC5=C(C6=CC(O)=CC(O)=C6)C7=NC(C=C7)=C(C8=CC(O)=CC(O)=C8)C9=CC=C2N9)=N3)=C1',
+  "5,10,15,20-Tetrakis(3,5-dimethoxyphenyl)porphyrin": 'COC1=CC(OC)=CC(C2=C3C=CC(C(C4=CC(OC)=CC(OC)=C4)=C(N5)C=CC5=C(C6=CC(OC)=CC(OC)=C6)C7=NC(C=C7)=C(C8=CC(OC)=CC(OC)=C8)C9=CC=C2N9)=N3)=C1',
+  "5,10,15,20-Tetrakis(4-carboxymethyloxyphenyl)porphyrin": 'O=C(COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OCC(O)=O)C=C4)=C(N5)C=CC5=C(C6=CC=C(OCC(O)=O)C=C6)C7=NC(C=C7)=C(C8=CC=C(OCC(O)=O)C=C8)C9=CC=C2N9)=N3)C=C1)O',
+  "5,10,15,20-Tetrakis(4-hydroxyphenyl)porphyrin": 'OC1=CC=C(C2=C3C=CC(C(C4=CC=C(O)C=C4)=C(N5)C=CC5=C(C6=CC=C(O)C=C6)C7=NC(C=C7)=C(C8=CC=C(O)C=C8)C9=CC=C2N9)=N3)C=C1',
+  "5,10,15,20-Tetrakis(4-methoxyphenyl)porphyrin": 'COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OC)C=C4)=C(N5)C=CC5=C(C6=CC=C(OC)C=C6)C7=NC(C=C7)=C(C8=CC=C(OC)C=C8)C9=CC=C2N9)=N3)C=C1',
+  "5,10,15,20-Tetrakis(pentafluorophenyl)porphyrin": 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C=CC(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C=CC5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C=C7)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=CC=C2N9)=N3',
+  "5,10,15,20-Tetrakis(p-tolyl)porphyrin": 'CC1=CC=C(C2=C3C=CC(C(C4=CC=C(C)C=C4)=C(N5)C=CC5=C(C6=CC=C(C)C=C6)C7=NC(C=C7)=C(C8=CC=C(C)C=C8)C9=CC=C2N9)=N3)C=C1',
   "5,5'-Bis(trifluoromethyl)-2,2'-bipyridyl": 'FC(C1=CN=C(C2=NC=C(C(F)(F)F)C=C2)C=C1)(F)F',
   "5,5''-Bis(trimethylstannyl)-2,2':5',2''-terthiophene": 'C[Sn](C1=CC=C(C2=CC=C(C3=CC=C([Sn](C)(C)C)S3)S2)S1)(C)C',
   "5,5'-Dibromo-2,2'-bipyridyl": 'BrC1=CN=C(C2=NC=C(Br)C=C2)C=C1',
   "5,5-Dibromomeldrum's Acid": 'O=C(OC(C)(C)O1)C(Br)(Br)C1=O',
   "5,5'-Dimethyl-2,2'-bipyridyl": 'CC1=CN=C(C2=NC=C(C)C=C2)C=C1',
-  '5,6-Dimethyl-1,10-phenanthroline': 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1C',
-  '5-Bromo-1,10-phenanthroline': 'BrC1=C2C=CC=NC2=C3N=CC=CC3=C1',
-  '5-Chloro-1,10-phenanthroline': 'ClC1=C2C=CC=NC2=C3N=CC=CC3=C1',
-  '5-Methyl-1,10-phenanthroline Hydrate': 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1.[H]O[H]',
-  '5-Nitro-1,10-phenanthroline': 'O=[N+](C1=C2C=CC=NC2=C3N=CC=CC3=C1)[O-]',
-  '5-Sulfosalicylic Acid Dihydrate': 'OC1=CC=C(S(=O)(O)=O)C=C1C(O)=O.[H]O[H].[H]O[H]',
+  "5,6-Dimethyl-1,10-phenanthroline": 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1C',
+  "5-Bromo-1,10-phenanthroline": 'BrC1=C2C=CC=NC2=C3N=CC=CC3=C1',
+  "5-Chloro-1,10-phenanthroline": 'ClC1=C2C=CC=NC2=C3N=CC=CC3=C1',
+  "5-Methyl-1,10-phenanthroline Hydrate": 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1.[H]O[H]',
+  "5-Nitro-1,10-phenanthroline": 'O=[N+](C1=C2C=CC=NC2=C3N=CC=CC3=C1)[O-]',
+  "5-Sulfosalicylic Acid Dihydrate": 'OC1=CC=C(S(=O)(O)=O)C=C1C(O)=O.[H]O[H].[H]O[H]',
   "6,10-Dibenzyl-N,N'-dimethyl-N,N,N',N'-tetrakis(4-methylbenzyl)-1,4-dioxaspiro[4.5]decane-(2R,3R)-diylbis(methylammonium) Bis(tetrafluoroborate)": 'C[N+](CC1=CC=C(C)C=C1)(CC2=CC=C(C)C=C2)(C)[C@@H]3OC4(C(CC5=CC=CC=C5)CCCC4(CC6=CC=CC=C6)[N+](CC7=CC=C(C)C=C7)(CC8=CC=C(C)C=C8)(C)C)OC3.F[B-](F)(F)F.F[B-](F)(F)F',
   "6,10-Dibenzyl-N,N'-dimethyl-N,N,N',N'-tetrakis(4-methylbenzyl)-1,4-dioxaspiro[4.5]decane-(2S,3S)-diylbis(methylammonium) Tetrafluoroborate": 'C[N+](CC1=CC=C(C)C=C1)(CC2=CC=C(C)C=C2)(C)[C@H]3OC4(C(CC5=CC=CC=C5)CCCC4(CC6=CC=CC=C6)[N+](CC7=CC=C(C)C=C7)(CC8=CC=C(C)C=C8)(C)C)OC3.F[B-](F)(F)F.F[B-](F)(F)F',
   "6,6'-Bis(chloromethyl)-2,2'-bipyridyl": 'ClCC1=CC=CC(C2=NC(CCl)=CC=C2)=N1',
@@ -791,712 +791,712 @@ export const reagents_kombi = {
   "6,6'-Dibromo-2,2'-bipyridyl": 'BrC1=CC=CC(C2=NC(Br)=CC=C2)=N1',
   "6,6'-Dicyano-2,2'-bipyridyl": 'N#CC1=CC=CC(C2=NC(C#N)=CC=C2)=N1',
   "6,6'-Dimethyl-2,2'-bipyridyl": 'CC1=CC=CC(C2=NC(C)=CC=C2)=N1',
-  '6,7-Dihydro-2-(2,4,6-trimethylphenyl)-5H-pyrrolo[2,1-c]-1,2,4-triazolium Perchlorate': 'CC1=C([N+]2=CN3C(CCC3)=N2)C(C)=CC(C)=C1.O=Cl(=O)([O-])=O',
-  '6,7-Dihydro-2-pentafluorophenyl-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate': 'FC1=C(F)C(F)=C(F)C(F)=C1[N+]2=CN3C(CCC3)=N2.F[B-](F)(F)F',
-  '6,8-Bis(benzylthio)octanoic Acid': 'O=C(O)CCCCC(SCC1=CC=CC=C1)CCSCC2=CC=CC=C2',
+  "6,7-Dihydro-2-(2,4,6-trimethylphenyl)-5H-pyrrolo[2,1-c]-1,2,4-triazolium Perchlorate": 'CC1=C([N+]2=CN3C(CCC3)=N2)C(C)=CC(C)=C1.O=Cl(=O)([O-])=O',
+  "6,7-Dihydro-2-pentafluorophenyl-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate": 'FC1=C(F)C(F)=C(F)C(F)=C1[N+]2=CN3C(CCC3)=N2.F[B-](F)(F)F',
+  "6,8-Bis(benzylthio)octanoic Acid": 'O=C(O)CCCCC(SCC1=CC=CC=C1)CCSCC2=CC=CC=C2',
   "6-Bromo-2,2'-bipyridyl": 'BrC1=CC=CC(C2=NC=CC=C2)=N1',
   "6-Bromo-4,4'-dimethyl-2,2'-bipyridyl": 'CC1=CC(C2=NC(Br)=CC(C)=C2)=NC=C1',
-  '6-Methyl-2,4-heptanedione': 'CC(CC(CC(C)C)=O)=O',
-  '7-Methyl-1,5,7-triazabicyclo[4.4.0]dec-5-ene': 'CN1C2=NCCCN2CCC1',
-  '8-Ethylquinoline N-oxide': 'CCC1=CC=CC2=CC=C[N+]([O-])=C12',
-  '8-Quinolineboronic acid': 'OB(C1=C(N=CC=C2)C2=CC=C1)O',
-  '9-(2,5-Dimethylphenyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC(C)=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  '9-(2,6-Dimethylphenyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  '9-(2-Biphenylyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3C4=CC=CC=C4)C5=C1C=CC=C5.O=Cl(=O)([O-])=O',
-  '9-Azajulolidine': 'N1(CCC2)CCCC3=CN=CC2=C31',
-  '9H,9H-Triacontafluoro-8,10-heptadecanedione': 'O=C(CC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  '9-Mesityl-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  '9-Mesityl-2,7,10-trimethylacridinium Perchlorate': 'C[N+]1=C2C=CC(C)=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC(C)=C4.O=Cl(=O)([O-])=O',
-  '9-Methyl-3,4-dihydro-2H-pyrido[1,2-a]pyrimidin-2-one': 'O=C1N=C(C(C)=CC=C2)N2CC1',
-  Acenaphthylene: 'C12=CC=CC3=C1C(C=C2)=CC=C3',
-  'acetic acid': 'CC(O)=O',
-  'Acetic Acid (1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester': 'CC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  'Acetic Acid (1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester': 'CC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  acetone: 'CC(C)=O',
-  acetonitrile: 'CC#N',
-  Acetylacetone: 'CC(CC(C)=O)=O',
-  AlkylFluor: 'FC(N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N+]1C(C(C(C)C)=CC=C3)=C3C(C)C.F[B-](F)(F)F',
-  'Allyl(chloromethyl)dimethylsilane': 'C[Si](CCl)(CC=C)C',
-  'Allyl(tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(CC=C)C',
-  Allylchlorodimethylsilane: 'C[Si](Cl)(CC=C)C',
-  'Allylmagnesium Bromide': 'Br[Mg]CC=C',
-  'Allylmagnesium Chloride': 'Cl[Mg]CC=C',
-  Allyloxytrimethylsilane: 'C[Si](C)(OCC=C)C',
-  'Allylpalladium(II) Chloride': '[Pd+]CC=C.[Cl-]',
-  Allyltriethoxysilane: 'CCO[Si](OCC)(CC=C)OCC',
-  Allyltriethylsilane: 'CC[Si](CC)(CC=C)CC',
-  Allyltriisopropylsilane: 'CC([Si](C(C)C)(CC=C)C(C)C)C',
-  Allyltrimethoxysilane: 'CO[Si](OC)(CC=C)OC',
-  Allyltrimethylsilane: 'C[Si](C)(CC=C)C',
-  Allyltriphenyltin: 'C=CC[Sn](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  'Allyltris(trimethylsilyloxy)silane': 'C[Si](O[Si](O[Si](C)(C)C)(CC=C)O[Si](C)(C)C)(C)C',
-  'aluminium bromide': '[Al+3].[Br-].[Br-].[Br-]',
-  'Aluminium chloride': 'Cl[Al](Cl)Cl',
-  'Aluminium hydroxide': '[OH-].[Al+3].[OH-].[OH-]',
-  'aluminium iodide': '[Al+3].[I-].[I-].[I-]',
-  'Aluminum Bromide Anhydrous': '[Al+3].[Br-].[Br-].[Br-]',
-  'Aluminum Glycinate': 'NCC([O-])=O.NCC([O-])=O.NCC([O-])=O.[Al+3]',
-  'Aluminum Isopropoxide': 'CC([O-])C.CC([O-])C.CC([O-])C.[Al+3]',
-  'Aluminum(III) Bromide': '[Al+3].[Br-].[Br-].[Br-]',
-  'Aluminum(III) Chloride': '[Al+3].[Cl-].[Cl-].[Cl-]',
-  'Aminomethanesulfonic Acid': 'O=S(CN)(O)=O',
-  Ammonia: 'N',
-  'ammonium actetate': 'CC([O-])=O.[NH4+]',
-  'ammonium bromide': '[NH4+].[Br-]',
-  'ammonium carbamate': 'NC([O-])=O.[NH4+]',
-  'Ammonium Cerium(IV) Nitrate': '[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[NH4+].[Ce+4]',
-  'ammonium chloride': '[NH4+].[Cl-]',
-  'Ammonium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[NH4+].[NH4+]',
-  'ammonium fluoride': '[NH4+].[F-]',
-  'ammonium formate': 'O=C[O-].[NH4+]',
-  'ammonium hydrogensulfate': '[O-]S(=O)(O)=O.[NH4+]',
-  'Ammonium hydroxide': '[NH4+].[OH-]',
-  'Ammonium phosphomolybdate hydrate': 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[NH4+]',
-  'Ammonium sulfate': 'O=S([O-])([O-])=O.[NH4+].[NH4+]',
-  'ammonium tetrafluoroborate': 'F[B-](F)(F)F.[NH4+]',
-  ammoniumthiosulfate: 'O=S([O-])([O-])=S.[NH4+].[NH4+]',
-  'Amyltriethylammonium Bis(trifluoromethanesulfonyl)imide': 'CCC[N+](CCC)(CCC)CCC.FC(F)(F)S([N-]S(C(F)(F)F)(=O)=O)(=O)=O',
-  'B(CH3)3': 'CB(C)C',
-  'B(OH)3': 'OB(O)O',
-  'Barium hydroxide': '[Ba+2].[OH-].[OH-]',
-  'Barium hydroxide octahydrate': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ba+2].[OH-].[OH-]',
-  'Barium tert-butoxide': 'CC(C)([O-])C.CC(C)([O-])C.[Ba+2]',
-  Bathophenanthroline: 'C1(C2=CC=CC=C2)=CC=NC3=C4N=CC=C(C5=CC=CC=C5)C4=CC=C13',
-  'Bathophenanthrolinedisulfonic Acid Disodium Salt Hydrate': 'O=S(C1=NC2=C3N=CC=C(C4=CC=CC=C4)C3=CC=C2C(C5=CC=CC=C5)=C1S(=O)([O-])=O)([O-])=O.[H]O[H].[Na+].[Na+]',
-  benzene: 'C1=CC=CC=C1',
-  'Benzeneruthenium(II) Chloride': '[Ru+2].C1=CC=CC=C1.[Cl-].[Cl-]',
-  'Benzenesulfonic Acid Anhydrous': 'O=S(C1=CC=CC=C1)(O)=O',
-  'Benzenesulfonic Acid Monohydrate': 'O=S(C1=CC=CC=C1)(O)=O.[H]O[H]',
-  'Benzoic Acid': 'O=C(O)C1=CC=CC=C1',
-  'Benzoyl peroxide': 'O=C(OOC(C1=CC=CC=C1)=O)C2=CC=CC=C2',
-  'Benzoyl(phenyliodonio)(trifluoromethanesulfonyl)methanide': 'O=S([C-](C(C1=CC=CC=C1)=O)[I+]C2=CC=CC=C2)(C(F)(F)F)=O',
-  'Benzylcetyldimethylammonium Chloride Hydrate': 'C[N+](CCCCCCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
-  'Benzyldimethyltetradecylammonium Chloride Hydrate': 'CCCCCCCCCCCCCC[N+](C)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
-  'Benzyldodecyldimethylammonium Bromide': 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[Br-]',
-  'Benzyldodecyldimethylammonium Chloride Dihydrate': 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[H]O[H].[Cl-]',
-  'Benzylmagnesium Bromide': 'Br[Mg]CC1=CC=CC=C1',
-  'Benzylmagnesium Chloride': 'Cl[Mg]CC1=CC=CC=C1',
-  'Benzyltributylammonium Bromide': 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Br-]',
-  'Benzyltributylammonium Chloride': 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Cl-]',
-  'Benzyltriethylammonium Borohydride': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[BH4-]',
-  'Benzyltriethylammonium Bromide': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Br-]',
-  'Benzyltriethylammonium Chloride': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Cl-]',
-  'Benzyltriethylammonium Iodide': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[I-]',
-  'Benzyltrimethylammonium Bromide': 'C[N+](C)(CC1=CC=CC=C1)C.[Br-]',
-  'Benzyltrimethylammonium Chloride': 'C[N+](C)(CC1=CC=CC=C1)C.[Cl-]',
-  'Benzyltrimethylammonium Dichloroiodate': 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-]Cl',
-  'Benzyltrimethylammonium Hydroxide': 'C[N+](C)(CC1=CC=CC=C1)C.[OH-]',
-  'Benzyltrimethylammonium Tetrachloroiodate': 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-](Cl)(Cl)Cl',
-  'Benzyltrimethylammonium Tribromide': 'C[N+](C)(CC1=CC=CC=C1)C.[Br-].[Br-].[Br-]',
-  Benzyltrimethylsilane: 'C[Si](C)(CC1=CC=CC=C1)C',
-  BERYLLIUM: '[Be]',
-  'BERYLLIUM HYDROXIDE': '[Be+2].[OH-].[OH-]',
-  BF3: 'FB(F)F',
-  'Bicinchoninic Acid Disodium Salt Hydrate': 'O=C([O-])C1=C(C2=C(C([O-])=O)C3=CC=CC=C3N=C2)C=NC4=CC=CC=C14.[H]O[H].[Na+].[Na+]',
-  'Bis(1,3-propanediamine) Copper(II) Dichloride': 'NCCCN.NCCCN.[Cu+2].[Cl-].[Cl-]',
-  'Bis(1,5-cyclooctadiene)nickel(0)': '[Ni].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
-  'Bis(1,5-cyclooctadiene)rhodium(I) Tetrafluoroborate': 'F[B-](F)(F)F.[Rh+].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
-  'Bis(2,4,6-trimethylpyridine)bromonium Hexafluorophosphate': 'CC1=CC(C)=C([BrH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
-  'Bis(2,4,6-trimethylpyridine)iodonium Hexafluorophosphate': 'CC1=CC(C)=C([IH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
-  'Bis(2,4-pentanedionato)bis(2-propanolato)titanium(IV)': 'CC(/C=C(C)\\[O-])=O.CC(/C=C(C)\\[O-])=O.[O-]C(C)C.[O-]C(C)C.[Ti+4]',
-  'Bis(2,4-pentanedionato)cobalt(II)': 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O',
-  'Bis(2,4-pentanedionato)cobalt(II) Dihydrate': 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O.O',
-  'Bis(2,4-pentanedionato)manganese(II) Dihydrate': 'CC(/C=C([O-])/C)=O.CC(/C=C([O-])/C)=O.[Mn+2].O.O',
-  'Bis(2,4-pentanedionato)molybdenum(VI) Dioxide': 'CC(/C=C([O-])/C)=O.C/C([O-])=C/C(C)=O.[Mo+6].[O-2].[O-2]',
-  'Bis(2,4-pentanedionato)nickel(II) Hydrate': 'O=C(/C=C([O-])/C)C.O=C(/C=C([O-])/C)C.[Ni+2].O',
-  'Bis(2,4-pentanedionato)vanadium(IV) Oxide': 'CC(/C=C([O-])/C)=O.[O-]/C(C)=C\\C(C)=O.[V+4].[O-2]',
-  'Bis(2-hydroxyethyl)dimethylammonium Chloride': 'C[N+](CCO)(CCO)C.[Cl-]',
-  'Bis(4-bromophenyl)iodonium triflate': 'BrC1=CC=C([I+]C2=CC=C(Br)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  'Bis(4-fluorophenyl)iodonium triflate': 'FC1=CC=C([I+]C2=CC=C(F)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  'Bis(4-methoxyphenyl) Selenoxide': 'O=[Se](C1=CC=C(OC)C=C1)C2=CC=C(OC)C=C2',
-  'Bis(4-methylphenyl)iodonium triflate': 'CC1=CC=C([I+]C2=CC=C(C)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  'Bis(4-nitrophenyl) Carbonate': 'O=C(OC1=CC=C([N+]([O-])=O)C=C1)OC2=CC=C([N+]([O-])=O)C=C2',
-  'Bis(acetato)aqua[(S,S)-4,6-bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene]rhodium': 'CC1=CC(C)=C(C2=N[C@H](CO2)C(C)C)C=C1C3=N[C@@H](C(C)C)CO3.CC([O-])=O.[O-]C(C)=O.[Rh+2].O',
-  'Bis(acetonitrile)palladium(II) Dichloride': 'CC#N.CC#N.[Pd+2].[Cl-].[Cl-]',
-  'Bis(benzonitrile)palladium(II) Dichloride': 'N#CC1=CC=CC=C1.N#CC2=CC=CC=C2.[Pd+2].[Cl-].[Cl-]',
-  'Bis(chloromethyl)dimethylsilane': 'C[Si](CCl)(CCl)C',
-  'Bis(dibenzylideneacetone)palladium(0)': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
-  'Pd(dba)2': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
-  'Bis(diphenylphosphino)methane': 'P(CP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  'Bis(hexafluoroacetylacetonato)nickel(II) Hydrate': 'O=C(/C=C(C(F)(F)F)\\[O-])C(F)(F)F.[O-]/C(C(F)(F)F)=C\\C(C(F)(F)F)=O.[Ni+2]',
-  'Bis(pentafluorophenyl) Carbonate': 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)OC2=C(F)C(F)=C(F)C(F)=C2F',
-  'Bis(pentafluorophenyl)dimethylsilane': 'C[Si](C1=C(F)C(F)=C(F)C(F)=C1F)(C2=C(F)C(F)=C(F)C(F)=C2F)C',
-  'Bis(pentafluorophenyl)phenylphosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=CC=CC=C3',
-  'Bis(pinacolato)diboron': 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
-  BPin: 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
-  'Bis(pyridine)iodonium tetrafluoroborate': '[IH+]C1=NC=CC=C1.F[B-](F)(F)F.C2=NC=CC=C2',
-  'Bis(tert-butylcarbonyloxy)iodobenzene': 'IC1=CC=CC(OC(C(C)(C)C)=O)=C1OC(C(C)(C)C)=O',
-  'Bis(tetrabutylammonium) Dichromate': 'CCCC[N+](CCCC)(CCCC)CCCC.CCCC[N+](CCCC)(CCCC)CCCC.O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O',
-  'Bis(trichlorosilyl)acetylene': 'Cl[Si](C#C[Si](Cl)(Cl)Cl)(Cl)Cl',
-  'Bis(tricyclohexylphosphine)nickel(II) Dichloride': 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Ni+2].[Cl-].[Cl-]',
-  'Bis(tricyclohexylphosphine)palladium(II) Dichloride': 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Pd+2].[Cl-].[Cl-]',
-  'Bis(trifluoro-2,4-pentanedionato)cobalt(II) Hydrate': 'C/C([O-])=C/C(C(F)(F)F)=O.C/C([O-])=C/C(C(F)(F)F)=O.[Co+2]',
-  'Bis(trifluoromethanesulfonyl)imide': 'O=S(C(F)(F)F)(NS(=O)(C(F)(F)F)=O)=O',
-  'Bis(trimethylsilyl) Sulfide': 'C[Si](S[Si](C)(C)C)(C)C',
-  'Bis(trimethylsilyl)acetylene': 'C[Si](C#C[Si](C)(C)C)(C)C',
-  'Bis(trimethylsilyl)bromomethane': 'BrC([Si](C)(C)C)[Si](C)(C)C',
-  'Bis(trimethylsilyl)methane': 'C[Si](C[Si](C)(C)C)(C)C',
-  'Bis(trimethylsilyl)methylamine': 'CN([Si](C)(C)C)[Si](C)(C)C',
-  'Bis(tri-o-tolylphosphine)palladium(II) Dichloride': 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C.CC4=CC=CC=C4P(C5=CC=CC=C5C)C6=CC=CC=C6C.[Pd+2].[Cl-].[Cl-]',
-  'Bis(triphenylphosphine)nickel(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Ni+2].[Cl-].[Cl-]',
-  'Bis(triphenylphosphine)palladium(II) Diacetate': 'CC([O-])=O.CC([O-])=O.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2]',
-  'Bis(triphenylphosphine)palladium(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2].[Cl-].[Cl-]',
-  'Bis(triphenylsilyl) chromate': 'O=[Cr](O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3)(O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=O',
-  'Bis(tri-tert-butylphosphine)palladium(0)': 'CC(P(C(C)(C)C)C(C)(C)C)(C)C.CC(P(C(C)(C)C)C(C)(C)C)(C)C.[Pd]',
-  'Bis[1,2-bis(diphenylphosphino)ethane]palladium(0)': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(CCP(C5=CC=CC=C5)C6=CC=CC=C6)(C7=CC=CC=C7)C8=CC=CC=C8.[Pd]',
-  'Bis[2-(diphenylphosphino)phenyl] Ether': 'C1(OC2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
-  'Bis[2-(trimethylsilyloxy)ethyl] Ether': 'C[Si](OCCOCCO[Si](C)(C)C)(C)C',
-  'Bis[2-carboxyethylgermanium(IV)] Sesquioxide': 'O=[Ge](CCC(O)=O)O[Ge](CCC(O)=O)=O',
-  'Bis[3-(trimethoxysilyl)propyl]amine': 'CO[Si](CCCNCCC[Si](OC)(OC)OC)(OC)OC',
-  'Bis[di-tert-butyl(4-dimethylaminophenyl)phosphine]palladium(0)': 'CN(C1=CC=C(P(C(C)(C)C)C(C)(C)C)C=C1)C.CN(C2=CC=C(P(C(C)(C)C)C(C)(C)C)C=C2)C.[Pd]',
-  'Bis[tris(2,4-pentanedionato)titanium(IV)] Hexachlorotitanate(IV)': 'Cl[Ti-2](Cl)(Cl)(Cl)(Cl)Cl.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.[Ti+4].[Ti+4]',
-  'BISMUTH HYDROXIDE': '[Bi+3].[OH-].[OH-].[OH-]',
-  'Bismuth Tripotassium Dicitrate': 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[Bi+5].[K+].[K+].[K+]',
-  Bistrifluoroacetamide: 'O=C(C(F)(F)F)NC(C(F)(F)F)=O',
-  'Borane - 2-Methylpyridine Complex': 'CC1=NC=CC=C1.B',
-  'Borane - 5-Ethyl-2-methylpyridine Complex': 'CC1=NC=C(CC)C=C1.B',
-  'Borane - Ammonia Complex': 'B.N',
-  'Borane - Diisopropylamine Complex': 'CC(C)NC(C)C.B',
-  'Borane - Morpholine Complex': 'O1CCNCC1.B',
-  'Borane - Pyridine Complex': 'C1=CN=CC=C1.B',
-  'Borane - Tetrahydrofuran Complex': 'B.C1COCC1',
-  'Borane - tert-Butylamine Complex': 'NC(C)(C)C.B',
-  'Boron Trichloride': 'ClB(Cl)Cl',
-  'Boron Trifluoride': 'FB(F)F',
-  'Boron Trifluoride - Methanol Reagent': 'FB(F)F.CO',
-  'Boron Trifluoride - Propanol Reagent': 'FB(F)F.CCCO',
-  Bromine: 'BrBr',
-  'Bromine - 1,4-Dioxane Complex': 'BrBr.O1CCOCC1',
-  'Bromo[(2,6-pyridinediyl)bis(3-methyl-1-imidazolyl-2-ylidene)]nickel Bromide': 'CN(C=CN12)C1=[Ni-3](Br)=C3N(C)C=CN3C4=CC=CC2=N4.[Br-]',
-  'Bromo[[1,3-bis[(4S,5S)-1-benzoyl-4,5-diphenyl-2-imidazolin-2-yl]benzene]palladium(II)]': 'O=C(N1[C@@H](C2=CC=CC=C2)[C@H](C3=CC=CC=C3)N=C1C4=CC(C5=N[C@@H](C6=CC=CC=C6)[C@H](C7=CC=CC=C7)N5C(C8=CC=CC=C8)=O)=CC=C4)C9=CC=CC=C9.[Pd+]Br',
-  'Bromoacetic Acid': 'O=C(O)CBr',
-  'Bromocholine Bromide': 'BrCC[N+](C)(C)C.[Br-]',
-  'Bromodicarbonyl[bis[2-(diisopropylphosphino)ethyl]amine]manganese(I)': '[C]=O.[C]=O.CC(P(CCNCCP(C(C)C)C(C)C)C(C)C)C.[Mn]Br',
-  'Bromodimethylsulfonium Bromide': 'C[S+](Br)C.[Br-]',
-  Bromotrichloromethane: 'ClC(Cl)(Br)Cl',
-  Bromotrimethylsilane: 'Br[Si](C)(C)C',
-  'Bromotripyrrolidinophosphonium Hexafluorophosphate': 'Br[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
-  'Bromotris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(Br)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  'Butylboronic Acid': 'CCCCB(O)O',
-  Butyllithium: 'CCCC[Li]',
-  'Butylmagnesium Bromide': 'Br[Mg]CCCC',
-  'Butylmagnesium Chloride': 'Cl[Mg]CCCC',
-  'Butyltin Trichloride': 'CCCC[Sn](Cl)(Cl)Cl',
-  'Cacodylic Acid': 'O=[As](C)(C)O',
-  'CADMIUM HYDROXIDE': '[Cd+2].[OH-].[OH-]',
-  'CALCIUM BROMIDE HYDRATE': '[H]O[H].[Ca+2].[Br-].[Br-]',
-  'calcium carbonate': '[O-]C([O-])=O.[Ca+2]',
-  'calcium chloride': '[Ca+2].[Cl-].[Cl-]',
-  'calcium hydride': '[Ca+2].[H-].[H-]',
-  'Calcium peroxide': '[O-][O-].[Ca+2]',
-  'calcium sulfate': 'O=S([O-])([O-])=O.[Ca+2]',
-  'Calcium L-Threonate': 'O[C@H]([C@H](CO)O)C([O-])=O.O[C@H]([C@H](CO)O)C([O-])=O.[Ca+2]',
-  'Carbamylcholine Chloride': 'C[N+](C)(C)CCOC(N)=O.[Cl-]',
-  'Carbon Tetrabromide': 'BrC(Br)(Br)Br',
-  'carbon tetrachloride': 'ClC(Cl)(Cl)Cl',
-  'Carbon Tetraiodide': 'IC(I)(I)I',
-  'carbon tribromide': 'BrC(Br)([H])Br',
-  'Carbonyl(dihydrido)tris(triphenylphosphine)ruthenium(II)': '[C]=O.[H][Ru][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  'Carbonylchlorobis(triphenylphosphine)iridium(I)': '[C]=O.[Ir]Cl.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6',
-  'Carbonylhydridotris(triphenylphosphine)iridium(I)': '[C]=O.[Ir][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  Cerium: '[Ce]',
-  'Cerium tetrahydroxide': '[Ce+4].[OH-].[OH-].[OH-].[OH-]',
-  'cerium trihydroxide': '[Ce+3].[OH-].[OH-].[OH-]',
-  'Cerium(III) Acetate Hydrate': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.[H]O[H].[Ce+3]',
-  'CERIUM(III) CHLORIDE HEPTAHYDRATE': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ce+3].[Cl-].[Cl-].[Cl-]',
-  'Cerium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ce+3]',
-  'Cesium Acetate': 'CC([O-])=O.[Cs+]',
-  'cesium bromide': '[Cs+].[Br-]',
-  'Cesium Carbonate': '[O-]C([O-])=O.[Cs+].[Cs+]',
-  'Cesium Fluoride': '[Cs+].[F-]',
-  'Cesium hydroxide': '[Cs+].[OH-]',
-  'Cesium Pivalate': 'CC(C)(C)C([O-])=O.[Cs+]',
-  'cesium sulfate': 'O=S([O-])([O-])=O.[Cs+].[Cs+]',
-  'Chloramine B Hydrate': 'O=S([N-]Cl)(C1=CC=CC=C1)=O.O.[Na+]',
-  'Chloramine T Trihydrate': 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[H]O[H].[H]O[H].[H]O[H].[Na+]',
-  Chloranil: 'O=C(C(Cl)=C1Cl)C(Cl)=C(Cl)C1=O',
-  'Chloro(1,5-cyclooctadiene)iridium(I)': '[Ir]Cl.C1=C\\CC/C=C\\CC/1',
-  'Chloro(1,5-cyclooctadiene)rhodium(I)': '[Rh]Cl.C1=C\\CC/C=C\\CC/1',
-  'Chloro(1,5-hexadiene)rhodium(I)': 'C=CCCC=C.[Rh]Cl',
-  'Chloro(2-dicyclohexylphosphino-2′,4′,6′-triisopropyl-1,1′-biphenyl)[2-(2′-amino-1,1′-biphenyl)]palladium(II)': 'Cl[Pd]1(C2=CC=CC=C2C3=CC=CC=C3N1)P(C4CCCCC4)(C5=CC=CC=C5C6=C(C(C)C)C=C(C(C)C)C=C6C(C)C)C7CCCCC7',
-  'Chloro(3-chloropropyl)dimethylsilane': 'C[Si](CCCCl)(Cl)C',
-  'Chloro(hexyl)dimethylsilane': 'C[Si](CCCCCC)(Cl)C',
-  'Chloro(methyl)(phenyl)(vinyl)silane': 'C=C[Si](C)(Cl)C1=CC=CC=C1',
-  'Chloro(pentamethylcyclopentadienyl)ruthenium(II)': 'CC1=C([Ru]Cl)C(C)(C)C(C)=C1C',
-  'Chloro[(tri-tert-butylphosphine)-2-(2-aminobiphenyl)]palladium(II)': 'NC1([Pd+2])=CC=CC=C1C2=CC=CC=C2.CC(P(C(C)(C)C)(Cl)C(C)(C)C)(C)C',
-  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](acetanilide)palladium(II)]': 'CC(NC1=CC=CC=C1)=O.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethyl-3,5-dimethoxybenzylamine)palladium(II)]': 'COC1=CC(OC)=CC(CN(C)C)=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethylbenzylamine)palladium(II)]': 'CN(C)CC1=CC=CC=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  'Chloro[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene]copper(I)': 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=[Cu-2]Cl)C(C(C)C)=CC=C1)C',
-  'Chloroacetic Acid': 'O=C(O)CCl',
-  'Chlorobis(cyclooctene)iridium(I)': '[Ir]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
-  'Chlorobis(cyclooctene)rhodium(I)': '[Rh]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
-  'Chlorobis(ethylene)iridium(I)': 'Cl[Ir-4]12(CC2)CC1',
-  'Chlorobis(ethylene)rhodium(I)': 'Cl[Rh-4]12(CC2)CC1',
-  'Chlorobis[dicyclohexyl(phenyl)phosphino](o-tolyl)nickel(II)': 'CC1=CC=CC=C1[Ni-2](P(C2CCCCC2)(C3CCCCC3)C4=CC=CC=C4)(Cl)P(C5CCCCC5)(C6CCCCC6)C7=CC=CC=C7',
-  'Chlorocholine Chloride': 'ClCC[N+](C)(C)C.[Cl-]',
-  Chlorodicyclohexylphosphine: 'ClP(C1CCCCC1)C2CCCCC2',
-  'Chlorodifluoroacetic Acid': 'O=C(O)C(F)(Cl)F',
-  Chlorodiisopropylphosphine: 'CC(P(Cl)C(C)C)C',
-  Chlorodimethylvinylsilane: 'C=C[Si](C)(Cl)C',
-  Chlorodiphenylphosphine: 'ClP(C1=CC=CC=C1)C2=CC=CC=C2',
-  Chloroform: 'ClC(Cl)Cl',
-  Chloromethyldimethylphenylsilane: 'C[Si](C)(CCl)C1=CC=CC=C1',
+  "6-Methyl-2,4-heptanedione": 'CC(CC(CC(C)C)=O)=O',
+  "7-Methyl-1,5,7-triazabicyclo[4.4.0]dec-5-ene": 'CN1C2=NCCCN2CCC1',
+  "8-Ethylquinoline N-oxide": 'CCC1=CC=CC2=CC=C[N+]([O-])=C12',
+  "8-Quinolineboronic acid": 'OB(C1=C(N=CC=C2)C2=CC=C1)O',
+  "9-(2,5-Dimethylphenyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC(C)=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  "9-(2,6-Dimethylphenyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  "9-(2-Biphenylyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3C4=CC=CC=C4)C5=C1C=CC=C5.O=Cl(=O)([O-])=O',
+  "9-Azajulolidine": 'N1(CCC2)CCCC3=CN=CC2=C31',
+  "9H,9H-Triacontafluoro-8,10-heptadecanedione": 'O=C(CC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  "9-Mesityl-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  "9-Mesityl-2,7,10-trimethylacridinium Perchlorate": 'C[N+]1=C2C=CC(C)=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC(C)=C4.O=Cl(=O)([O-])=O',
+  "9-Methyl-3,4-dihydro-2H-pyrido[1,2-a]pyrimidin-2-one": 'O=C1N=C(C(C)=CC=C2)N2CC1',
+  "Acenaphthylene": 'C12=CC=CC3=C1C(C=C2)=CC=C3',
+  "acetic acid": 'CC(O)=O',
+  "Acetic Acid (1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester": 'CC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  "Acetic Acid (1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester": 'CC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  "acetone": 'CC(C)=O',
+  "acetonitrile": 'CC#N',
+  "Acetylacetone": 'CC(CC(C)=O)=O',
+  "AlkylFluor": 'FC(N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N+]1C(C(C(C)C)=CC=C3)=C3C(C)C.F[B-](F)(F)F',
+  "Allyl(chloromethyl)dimethylsilane": 'C[Si](CCl)(CC=C)C',
+  "Allyl(tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(CC=C)C',
+  "Allylchlorodimethylsilane": 'C[Si](Cl)(CC=C)C',
+  "Allylmagnesium Bromide": 'Br[Mg]CC=C',
+  "Allylmagnesium Chloride": 'Cl[Mg]CC=C',
+  "Allyloxytrimethylsilane": 'C[Si](C)(OCC=C)C',
+  "Allylpalladium(II) Chloride": '[Pd+]CC=C.[Cl-]',
+  "Allyltriethoxysilane": 'CCO[Si](OCC)(CC=C)OCC',
+  "Allyltriethylsilane": 'CC[Si](CC)(CC=C)CC',
+  "Allyltriisopropylsilane": 'CC([Si](C(C)C)(CC=C)C(C)C)C',
+  "Allyltrimethoxysilane": 'CO[Si](OC)(CC=C)OC',
+  "Allyltrimethylsilane": 'C[Si](C)(CC=C)C',
+  "Allyltriphenyltin": 'C=CC[Sn](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Allyltris(trimethylsilyloxy)silane": 'C[Si](O[Si](O[Si](C)(C)C)(CC=C)O[Si](C)(C)C)(C)C',
+  "aluminium bromide": '[Al+3].[Br-].[Br-].[Br-]',
+  "Aluminium chloride": 'Cl[Al](Cl)Cl',
+  "Aluminium hydroxide": '[OH-].[Al+3].[OH-].[OH-]',
+  "aluminium iodide": '[Al+3].[I-].[I-].[I-]',
+  "Aluminum Bromide Anhydrous": '[Al+3].[Br-].[Br-].[Br-]',
+  "Aluminum Glycinate": 'NCC([O-])=O.NCC([O-])=O.NCC([O-])=O.[Al+3]',
+  "Aluminum Isopropoxide": 'CC([O-])C.CC([O-])C.CC([O-])C.[Al+3]',
+  "Aluminum(III) Bromide": '[Al+3].[Br-].[Br-].[Br-]',
+  "Aluminum(III) Chloride": '[Al+3].[Cl-].[Cl-].[Cl-]',
+  "Aminomethanesulfonic Acid": 'O=S(CN)(O)=O',
+  "Ammonia": 'N',
+  "ammonium actetate": 'CC([O-])=O.[NH4+]',
+  "ammonium bromide": '[NH4+].[Br-]',
+  "ammonium carbamate": 'NC([O-])=O.[NH4+]',
+  "Ammonium Cerium(IV) Nitrate": '[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[NH4+].[Ce+4]',
+  "ammonium chloride": '[NH4+].[Cl-]',
+  "Ammonium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[NH4+].[NH4+]',
+  "ammonium fluoride": '[NH4+].[F-]',
+  "ammonium formate": 'O=C[O-].[NH4+]',
+  "ammonium hydrogensulfate": '[O-]S(=O)(O)=O.[NH4+]',
+  "Ammonium hydroxide": '[NH4+].[OH-]',
+  "Ammonium phosphomolybdate hydrate": 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[NH4+]',
+  "Ammonium sulfate": 'O=S([O-])([O-])=O.[NH4+].[NH4+]',
+  "ammonium tetrafluoroborate": 'F[B-](F)(F)F.[NH4+]',
+  "ammoniumthiosulfate": 'O=S([O-])([O-])=S.[NH4+].[NH4+]',
+  "Amyltriethylammonium Bis(trifluoromethanesulfonyl)imide": 'CCC[N+](CCC)(CCC)CCC.FC(F)(F)S([N-]S(C(F)(F)F)(=O)=O)(=O)=O',
+  "B(CH3)3": 'CB(C)C',
+  "B(OH)3": 'OB(O)O',
+  "Barium hydroxide": '[Ba+2].[OH-].[OH-]',
+  "Barium hydroxide octahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ba+2].[OH-].[OH-]',
+  "Barium tert-butoxide": 'CC(C)([O-])C.CC(C)([O-])C.[Ba+2]',
+  "Bathophenanthroline": 'C1(C2=CC=CC=C2)=CC=NC3=C4N=CC=C(C5=CC=CC=C5)C4=CC=C13',
+  "Bathophenanthrolinedisulfonic Acid Disodium Salt Hydrate": 'O=S(C1=NC2=C3N=CC=C(C4=CC=CC=C4)C3=CC=C2C(C5=CC=CC=C5)=C1S(=O)([O-])=O)([O-])=O.[H]O[H].[Na+].[Na+]',
+  "benzene": 'C1=CC=CC=C1',
+  "Benzeneruthenium(II) Chloride": '[Ru+2].C1=CC=CC=C1.[Cl-].[Cl-]',
+  "Benzenesulfonic Acid Anhydrous": 'O=S(C1=CC=CC=C1)(O)=O',
+  "Benzenesulfonic Acid Monohydrate": 'O=S(C1=CC=CC=C1)(O)=O.[H]O[H]',
+  "Benzoic Acid": 'O=C(O)C1=CC=CC=C1',
+  "Benzoyl peroxide": 'O=C(OOC(C1=CC=CC=C1)=O)C2=CC=CC=C2',
+  "Benzoyl(phenyliodonio)(trifluoromethanesulfonyl)methanide": 'O=S([C-](C(C1=CC=CC=C1)=O)[I+]C2=CC=CC=C2)(C(F)(F)F)=O',
+  "Benzylcetyldimethylammonium Chloride Hydrate": 'C[N+](CCCCCCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
+  "Benzyldimethyltetradecylammonium Chloride Hydrate": 'CCCCCCCCCCCCCC[N+](C)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
+  "Benzyldodecyldimethylammonium Bromide": 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[Br-]',
+  "Benzyldodecyldimethylammonium Chloride Dihydrate": 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[H]O[H].[Cl-]',
+  "Benzylmagnesium Bromide": 'Br[Mg]CC1=CC=CC=C1',
+  "Benzylmagnesium Chloride": 'Cl[Mg]CC1=CC=CC=C1',
+  "Benzyltributylammonium Bromide": 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Br-]',
+  "Benzyltributylammonium Chloride": 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Cl-]',
+  "Benzyltriethylammonium Borohydride": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[BH4-]',
+  "Benzyltriethylammonium Bromide": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Br-]',
+  "Benzyltriethylammonium Chloride": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Cl-]',
+  "Benzyltriethylammonium Iodide": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[I-]',
+  "Benzyltrimethylammonium Bromide": 'C[N+](C)(CC1=CC=CC=C1)C.[Br-]',
+  "Benzyltrimethylammonium Chloride": 'C[N+](C)(CC1=CC=CC=C1)C.[Cl-]',
+  "Benzyltrimethylammonium Dichloroiodate": 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-]Cl',
+  "Benzyltrimethylammonium Hydroxide": 'C[N+](C)(CC1=CC=CC=C1)C.[OH-]',
+  "Benzyltrimethylammonium Tetrachloroiodate": 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-](Cl)(Cl)Cl',
+  "Benzyltrimethylammonium Tribromide": 'C[N+](C)(CC1=CC=CC=C1)C.[Br-].[Br-].[Br-]',
+  "Benzyltrimethylsilane": 'C[Si](C)(CC1=CC=CC=C1)C',
+  "BERYLLIUM": '[Be]',
+  "BERYLLIUM HYDROXIDE": '[Be+2].[OH-].[OH-]',
+  "BF3": 'FB(F)F',
+  "Bicinchoninic Acid Disodium Salt Hydrate": 'O=C([O-])C1=C(C2=C(C([O-])=O)C3=CC=CC=C3N=C2)C=NC4=CC=CC=C14.[H]O[H].[Na+].[Na+]',
+  "Bis(1,3-propanediamine) Copper(II) Dichloride": 'NCCCN.NCCCN.[Cu+2].[Cl-].[Cl-]',
+  "Bis(1,5-cyclooctadiene)nickel(0)": '[Ni].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
+  "Bis(1,5-cyclooctadiene)rhodium(I) Tetrafluoroborate": 'F[B-](F)(F)F.[Rh+].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
+  "Bis(2,4,6-trimethylpyridine)bromonium Hexafluorophosphate": 'CC1=CC(C)=C([BrH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
+  "Bis(2,4,6-trimethylpyridine)iodonium Hexafluorophosphate": 'CC1=CC(C)=C([IH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
+  "Bis(2,4-pentanedionato)bis(2-propanolato)titanium(IV)": 'CC(/C=C(C)\\[O-])=O.CC(/C=C(C)\\[O-])=O.[O-]C(C)C.[O-]C(C)C.[Ti+4]',
+  "Bis(2,4-pentanedionato)cobalt(II)": 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O',
+  "Bis(2,4-pentanedionato)cobalt(II) Dihydrate": 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O.O',
+  "Bis(2,4-pentanedionato)manganese(II) Dihydrate": 'CC(/C=C([O-])/C)=O.CC(/C=C([O-])/C)=O.[Mn+2].O.O',
+  "Bis(2,4-pentanedionato)molybdenum(VI) Dioxide": 'CC(/C=C([O-])/C)=O.C/C([O-])=C/C(C)=O.[Mo+6].[O-2].[O-2]',
+  "Bis(2,4-pentanedionato)nickel(II) Hydrate": 'O=C(/C=C([O-])/C)C.O=C(/C=C([O-])/C)C.[Ni+2].O',
+  "Bis(2,4-pentanedionato)vanadium(IV) Oxide": 'CC(/C=C([O-])/C)=O.[O-]/C(C)=C\\C(C)=O.[V+4].[O-2]',
+  "Bis(2-hydroxyethyl)dimethylammonium Chloride": 'C[N+](CCO)(CCO)C.[Cl-]',
+  "Bis(4-bromophenyl)iodonium triflate": 'BrC1=CC=C([I+]C2=CC=C(Br)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  "Bis(4-fluorophenyl)iodonium triflate": 'FC1=CC=C([I+]C2=CC=C(F)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  "Bis(4-methoxyphenyl) Selenoxide": 'O=[Se](C1=CC=C(OC)C=C1)C2=CC=C(OC)C=C2',
+  "Bis(4-methylphenyl)iodonium triflate": 'CC1=CC=C([I+]C2=CC=C(C)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  "Bis(4-nitrophenyl) Carbonate": 'O=C(OC1=CC=C([N+]([O-])=O)C=C1)OC2=CC=C([N+]([O-])=O)C=C2',
+  "Bis(acetato)aqua[(S,S)-4,6-bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene]rhodium": 'CC1=CC(C)=C(C2=N[C@H](CO2)C(C)C)C=C1C3=N[C@@H](C(C)C)CO3.CC([O-])=O.[O-]C(C)=O.[Rh+2].O',
+  "Bis(acetonitrile)palladium(II) Dichloride": 'CC#N.CC#N.[Pd+2].[Cl-].[Cl-]',
+  "Bis(benzonitrile)palladium(II) Dichloride": 'N#CC1=CC=CC=C1.N#CC2=CC=CC=C2.[Pd+2].[Cl-].[Cl-]',
+  "Bis(chloromethyl)dimethylsilane": 'C[Si](CCl)(CCl)C',
+  "Bis(dibenzylideneacetone)palladium(0)": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
+  "Pd(dba)2": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
+  "Bis(diphenylphosphino)methane": 'P(CP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "Bis(hexafluoroacetylacetonato)nickel(II) Hydrate": 'O=C(/C=C(C(F)(F)F)\\[O-])C(F)(F)F.[O-]/C(C(F)(F)F)=C\\C(C(F)(F)F)=O.[Ni+2]',
+  "Bis(pentafluorophenyl) Carbonate": 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)OC2=C(F)C(F)=C(F)C(F)=C2F',
+  "Bis(pentafluorophenyl)dimethylsilane": 'C[Si](C1=C(F)C(F)=C(F)C(F)=C1F)(C2=C(F)C(F)=C(F)C(F)=C2F)C',
+  "Bis(pentafluorophenyl)phenylphosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=CC=CC=C3',
+  "Bis(pinacolato)diboron": 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
+  "BPin": 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
+  "Bis(pyridine)iodonium tetrafluoroborate": '[IH+]C1=NC=CC=C1.F[B-](F)(F)F.C2=NC=CC=C2',
+  "Bis(tert-butylcarbonyloxy)iodobenzene": 'IC1=CC=CC(OC(C(C)(C)C)=O)=C1OC(C(C)(C)C)=O',
+  "Bis(tetrabutylammonium) Dichromate": 'CCCC[N+](CCCC)(CCCC)CCCC.CCCC[N+](CCCC)(CCCC)CCCC.O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O',
+  "Bis(trichlorosilyl)acetylene": 'Cl[Si](C#C[Si](Cl)(Cl)Cl)(Cl)Cl',
+  "Bis(tricyclohexylphosphine)nickel(II) Dichloride": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Ni+2].[Cl-].[Cl-]',
+  "Bis(tricyclohexylphosphine)palladium(II) Dichloride": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Pd+2].[Cl-].[Cl-]',
+  "Bis(trifluoro-2,4-pentanedionato)cobalt(II) Hydrate": 'C/C([O-])=C/C(C(F)(F)F)=O.C/C([O-])=C/C(C(F)(F)F)=O.[Co+2]',
+  "Bis(trifluoromethanesulfonyl)imide": 'O=S(C(F)(F)F)(NS(=O)(C(F)(F)F)=O)=O',
+  "Bis(trimethylsilyl) Sulfide": 'C[Si](S[Si](C)(C)C)(C)C',
+  "Bis(trimethylsilyl)acetylene": 'C[Si](C#C[Si](C)(C)C)(C)C',
+  "Bis(trimethylsilyl)bromomethane": 'BrC([Si](C)(C)C)[Si](C)(C)C',
+  "Bis(trimethylsilyl)methane": 'C[Si](C[Si](C)(C)C)(C)C',
+  "Bis(trimethylsilyl)methylamine": 'CN([Si](C)(C)C)[Si](C)(C)C',
+  "Bis(tri-o-tolylphosphine)palladium(II) Dichloride": 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C.CC4=CC=CC=C4P(C5=CC=CC=C5C)C6=CC=CC=C6C.[Pd+2].[Cl-].[Cl-]',
+  "Bis(triphenylphosphine)nickel(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Ni+2].[Cl-].[Cl-]',
+  "Bis(triphenylphosphine)palladium(II) Diacetate": 'CC([O-])=O.CC([O-])=O.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2]',
+  "Bis(triphenylphosphine)palladium(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2].[Cl-].[Cl-]',
+  "Bis(triphenylsilyl) chromate": 'O=[Cr](O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3)(O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=O',
+  "Bis(tri-tert-butylphosphine)palladium(0)": 'CC(P(C(C)(C)C)C(C)(C)C)(C)C.CC(P(C(C)(C)C)C(C)(C)C)(C)C.[Pd]',
+  "Bis[1,2-bis(diphenylphosphino)ethane]palladium(0)": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(CCP(C5=CC=CC=C5)C6=CC=CC=C6)(C7=CC=CC=C7)C8=CC=CC=C8.[Pd]',
+  "Bis[2-(diphenylphosphino)phenyl] Ether": 'C1(OC2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
+  "Bis[2-(trimethylsilyloxy)ethyl] Ether": 'C[Si](OCCOCCO[Si](C)(C)C)(C)C',
+  "Bis[2-carboxyethylgermanium(IV)] Sesquioxide": 'O=[Ge](CCC(O)=O)O[Ge](CCC(O)=O)=O',
+  "Bis[3-(trimethoxysilyl)propyl]amine": 'CO[Si](CCCNCCC[Si](OC)(OC)OC)(OC)OC',
+  "Bis[di-tert-butyl(4-dimethylaminophenyl)phosphine]palladium(0)": 'CN(C1=CC=C(P(C(C)(C)C)C(C)(C)C)C=C1)C.CN(C2=CC=C(P(C(C)(C)C)C(C)(C)C)C=C2)C.[Pd]',
+  "Bis[tris(2,4-pentanedionato)titanium(IV)] Hexachlorotitanate(IV)": 'Cl[Ti-2](Cl)(Cl)(Cl)(Cl)Cl.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.[Ti+4].[Ti+4]',
+  "BISMUTH HYDROXIDE": '[Bi+3].[OH-].[OH-].[OH-]',
+  "Bismuth Tripotassium Dicitrate": 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[Bi+5].[K+].[K+].[K+]',
+  "Bistrifluoroacetamide": 'O=C(C(F)(F)F)NC(C(F)(F)F)=O',
+  "Borane - 2-Methylpyridine Complex": 'CC1=NC=CC=C1.B',
+  "Borane - 5-Ethyl-2-methylpyridine Complex": 'CC1=NC=C(CC)C=C1.B',
+  "Borane - Ammonia Complex": 'B.N',
+  "Borane - Diisopropylamine Complex": 'CC(C)NC(C)C.B',
+  "Borane - Morpholine Complex": 'O1CCNCC1.B',
+  "Borane - Pyridine Complex": 'C1=CN=CC=C1.B',
+  "Borane - Tetrahydrofuran Complex": 'B.C1COCC1',
+  "Borane - tert-Butylamine Complex": 'NC(C)(C)C.B',
+  "Boron Trichloride": 'ClB(Cl)Cl',
+  "Boron Trifluoride": 'FB(F)F',
+  "Boron Trifluoride - Methanol Reagent": 'FB(F)F.CO',
+  "Boron Trifluoride - Propanol Reagent": 'FB(F)F.CCCO',
+  "Bromine": 'BrBr',
+  "Bromine - 1,4-Dioxane Complex": 'BrBr.O1CCOCC1',
+  "Bromo[(2,6-pyridinediyl)bis(3-methyl-1-imidazolyl-2-ylidene)]nickel Bromide": 'CN(C=CN12)C1=[Ni-3](Br)=C3N(C)C=CN3C4=CC=CC2=N4.[Br-]',
+  "Bromo[[1,3-bis[(4S,5S)-1-benzoyl-4,5-diphenyl-2-imidazolin-2-yl]benzene]palladium(II)]": 'O=C(N1[C@@H](C2=CC=CC=C2)[C@H](C3=CC=CC=C3)N=C1C4=CC(C5=N[C@@H](C6=CC=CC=C6)[C@H](C7=CC=CC=C7)N5C(C8=CC=CC=C8)=O)=CC=C4)C9=CC=CC=C9.[Pd+]Br',
+  "Bromoacetic Acid": 'O=C(O)CBr',
+  "Bromocholine Bromide": 'BrCC[N+](C)(C)C.[Br-]',
+  "Bromodicarbonyl[bis[2-(diisopropylphosphino)ethyl]amine]manganese(I)": '[C]=O.[C]=O.CC(P(CCNCCP(C(C)C)C(C)C)C(C)C)C.[Mn]Br',
+  "Bromodimethylsulfonium Bromide": 'C[S+](Br)C.[Br-]',
+  "Bromotrichloromethane": 'ClC(Cl)(Br)Cl',
+  "Bromotrimethylsilane": 'Br[Si](C)(C)C',
+  "Bromotripyrrolidinophosphonium Hexafluorophosphate": 'Br[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
+  "Bromotris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(Br)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  "Butylboronic Acid": 'CCCCB(O)O',
+  "Butyllithium": 'CCCC[Li]',
+  "Butylmagnesium Bromide": 'Br[Mg]CCCC',
+  "Butylmagnesium Chloride": 'Cl[Mg]CCCC',
+  "Butyltin Trichloride": 'CCCC[Sn](Cl)(Cl)Cl',
+  "Cacodylic Acid": 'O=[As](C)(C)O',
+  "CADMIUM HYDROXIDE": '[Cd+2].[OH-].[OH-]',
+  "CALCIUM BROMIDE HYDRATE": '[H]O[H].[Ca+2].[Br-].[Br-]',
+  "calcium carbonate": '[O-]C([O-])=O.[Ca+2]',
+  "calcium chloride": '[Ca+2].[Cl-].[Cl-]',
+  "calcium hydride": '[Ca+2].[H-].[H-]',
+  "Calcium peroxide": '[O-][O-].[Ca+2]',
+  "calcium sulfate": 'O=S([O-])([O-])=O.[Ca+2]',
+  "Calcium L-Threonate": 'O[C@H]([C@H](CO)O)C([O-])=O.O[C@H]([C@H](CO)O)C([O-])=O.[Ca+2]',
+  "Carbamylcholine Chloride": 'C[N+](C)(C)CCOC(N)=O.[Cl-]',
+  "Carbon Tetrabromide": 'BrC(Br)(Br)Br',
+  "carbon tetrachloride": 'ClC(Cl)(Cl)Cl',
+  "Carbon Tetraiodide": 'IC(I)(I)I',
+  "carbon tribromide": 'BrC(Br)([H])Br',
+  "Carbonyl(dihydrido)tris(triphenylphosphine)ruthenium(II)": '[C]=O.[H][Ru][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  "Carbonylchlorobis(triphenylphosphine)iridium(I)": '[C]=O.[Ir]Cl.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6',
+  "Carbonylhydridotris(triphenylphosphine)iridium(I)": '[C]=O.[Ir][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  "Cerium": '[Ce]',
+  "Cerium tetrahydroxide": '[Ce+4].[OH-].[OH-].[OH-].[OH-]',
+  "cerium trihydroxide": '[Ce+3].[OH-].[OH-].[OH-]',
+  "Cerium(III) Acetate Hydrate": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.[H]O[H].[Ce+3]',
+  "CERIUM(III) CHLORIDE HEPTAHYDRATE": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ce+3].[Cl-].[Cl-].[Cl-]',
+  "Cerium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ce+3]',
+  "Cesium Acetate": 'CC([O-])=O.[Cs+]',
+  "cesium bromide": '[Cs+].[Br-]',
+  "Cesium Carbonate": '[O-]C([O-])=O.[Cs+].[Cs+]',
+  "Cesium Fluoride": '[Cs+].[F-]',
+  "Cesium hydroxide": '[Cs+].[OH-]',
+  "Cesium Pivalate": 'CC(C)(C)C([O-])=O.[Cs+]',
+  "cesium sulfate": 'O=S([O-])([O-])=O.[Cs+].[Cs+]',
+  "Chloramine B Hydrate": 'O=S([N-]Cl)(C1=CC=CC=C1)=O.O.[Na+]',
+  "Chloramine T Trihydrate": 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[H]O[H].[H]O[H].[H]O[H].[Na+]',
+  "Chloranil": 'O=C(C(Cl)=C1Cl)C(Cl)=C(Cl)C1=O',
+  "Chloro(1,5-cyclooctadiene)iridium(I)": '[Ir]Cl.C1=C\\CC/C=C\\CC/1',
+  "Chloro(1,5-cyclooctadiene)rhodium(I)": '[Rh]Cl.C1=C\\CC/C=C\\CC/1',
+  "Chloro(1,5-hexadiene)rhodium(I)": 'C=CCCC=C.[Rh]Cl',
+  "Chloro(2-dicyclohexylphosphino-2′,4′,6′-triisopropyl-1,1′-biphenyl)[2-(2′-amino-1,1′-biphenyl)]palladium(II)": 'Cl[Pd]1(C2=CC=CC=C2C3=CC=CC=C3N1)P(C4CCCCC4)(C5=CC=CC=C5C6=C(C(C)C)C=C(C(C)C)C=C6C(C)C)C7CCCCC7',
+  "Chloro(3-chloropropyl)dimethylsilane": 'C[Si](CCCCl)(Cl)C',
+  "Chloro(hexyl)dimethylsilane": 'C[Si](CCCCCC)(Cl)C',
+  "Chloro(methyl)(phenyl)(vinyl)silane": 'C=C[Si](C)(Cl)C1=CC=CC=C1',
+  "Chloro(pentamethylcyclopentadienyl)ruthenium(II)": 'CC1=C([Ru]Cl)C(C)(C)C(C)=C1C',
+  "Chloro[(tri-tert-butylphosphine)-2-(2-aminobiphenyl)]palladium(II)": 'NC1([Pd+2])=CC=CC=C1C2=CC=CC=C2.CC(P(C(C)(C)C)(Cl)C(C)(C)C)(C)C',
+  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](acetanilide)palladium(II)]": 'CC(NC1=CC=CC=C1)=O.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethyl-3,5-dimethoxybenzylamine)palladium(II)]": 'COC1=CC(OC)=CC(CN(C)C)=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethylbenzylamine)palladium(II)]": 'CN(C)CC1=CC=CC=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  "Chloro[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene]copper(I)": 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=[Cu-2]Cl)C(C(C)C)=CC=C1)C',
+  "Chloroacetic Acid": 'O=C(O)CCl',
+  "Chlorobis(cyclooctene)iridium(I)": '[Ir]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
+  "Chlorobis(cyclooctene)rhodium(I)": '[Rh]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
+  "Chlorobis(ethylene)iridium(I)": 'Cl[Ir-4]12(CC2)CC1',
+  "Chlorobis(ethylene)rhodium(I)": 'Cl[Rh-4]12(CC2)CC1',
+  "Chlorobis[dicyclohexyl(phenyl)phosphino](o-tolyl)nickel(II)": 'CC1=CC=CC=C1[Ni-2](P(C2CCCCC2)(C3CCCCC3)C4=CC=CC=C4)(Cl)P(C5CCCCC5)(C6CCCCC6)C7=CC=CC=C7',
+  "Chlorocholine Chloride": 'ClCC[N+](C)(C)C.[Cl-]',
+  "Chlorodicyclohexylphosphine": 'ClP(C1CCCCC1)C2CCCCC2',
+  "Chlorodifluoroacetic Acid": 'O=C(O)C(F)(Cl)F',
+  "Chlorodiisopropylphosphine": 'CC(P(Cl)C(C)C)C',
+  "Chlorodimethylvinylsilane": 'C=C[Si](C)(Cl)C',
+  "Chlorodiphenylphosphine": 'ClP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Chloroform": 'ClC(Cl)Cl',
+  "Chloromethyldimethylphenylsilane": 'C[Si](C)(CCl)C1=CC=CC=C1',
   "Chloro-N,N,N',N'-tetramethylformamidinium Hexafluorophosphate": 'C[N+](C)=C(Cl)N(C)C.F[P-](F)(F)(F)(F)F',
   "Chloronitrosyl[N,N'-bis(3,5-di-tert-butylsalicylidene)-1,1,2,2-tetramethylethylenediaminato]ruthenium(IV)": '[O-]C1=C(/C=N/C(C)(C)C(C)(C)/N=C/C2=C([O-])C(C(C)(C)C)=CC(C(C)(C)C)=C2)C=C(C(C)(C)C)C=C1C(C)(C)C.[N-]=O.[Ru+4].[Cl-]',
-  Chloropentamethyldisilane: 'C[Si](C)(C)[Si](C)(Cl)C',
-  Chlorotriethoxysilane: 'CCO[Si](OCC)(Cl)OCC',
-  'Chlorotripyrrolidinophosphonium Hexafluorophosphate': 'Cl[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
-  Choline: 'OCC[N+](C)(C)C',
-  'Choline Chloride': 'OCC[N+](C)(C)C.[Cl-]',
-  'Choline hydroxide': 'OCC[N+](C)(C)C.[OH-]',
-  Chromium: '[Cr]',
-  'CHROMIUM (III) HYDROXIDE N-HYDRATE': '[OH-].[Cr+3].[OH-].[OH-]',
-  'Chromium(VI) oxide': '[Cr+6].[O-2].[O-2].[O-2]',
-  Cinchonidine: 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
-  'Cinchonidine Dihydrochloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]Cl',
-  'Cinchonidine Sulfate Dihydrate': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
-  Cinchonine: 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
-  'Cinchonine Hydrochloride Hydrate': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]O[H]',
-  'Citric Acid': 'OC(C(O)=O)(CC(O)=O)CC(O)=O',
-  Cobalt: '[Co]',
-  'Cobalt hydroxide': '[Co+2].[OH-].[OH-]',
-  'cobalt trihydroxide': '[Co+3].[OH-].[OH-].[OH-]',
-  Copper: '[Cu]',
-  'copper (I) bromide': '[Cu+].[Br-]',
-  'copper (I) chloride': '[Cu+].[Cl-]',
-  'copper (II) bromide': '[Cu+2].[Br-].[Br-]',
-  'copper (II) chloride': '[Cu+2].[Cl-].[Cl-]',
-  'copper (II) iodide': '[Cu+2].[I-].[I-]',
-  'copper fluoride': '[Cu+2].[F-].[F-]',
-  'Copper sulfate': 'O=S([O-])([O-])=O.[Cu+2]',
-  'Copper(I) 2-Thiophenecarboxylate': 'O=C(C1=CC=CS1)[O-].[Cu+]',
-  'Copper(I) Acetate': 'CC([O-])=O.[Cu+]',
-  'Copper(I) Cyanide': '[C-]#N.[Cu+]',
-  'Copper(I) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.[Cu+]',
-  'Copper(I) Trifluoromethanethiolate': '[S-]C(F)(F)F.[Cu+]',
-  'copper(I)bromide DMS-complex': 'CSC.[Cu+].[Br-]',
-  'Copper(I)iodide': '[Cu+].[I-]',
-  'Copper(II) Acetate Monohydrate': 'CC([O-])=O.CC([O-])=O.[H]O[H].[Cu+2]',
-  'Copper(II) Tetrafluoroborate': 'F[B-](F)(F)F.F[B-](F)(F)F.[Cu+2]',
-  'Copper(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Cu+2]',
-  'Croconic Acid': 'OC1=C(C(C(C1=O)=O)=O)O',
-  'Cumene Hydroperoxide': 'CC(C1=CC=C(OO)C=C1)C',
-  'Cupric hydroxide': '[Cu+2].[OH-].[OH-]',
-  Cyanomethylenetributylphosphorane: 'CCCCP(CCCC)(CCCC)=CC#N',
-  'Cyanuric Chloride': 'ClC1=NC(Cl)=NC(Cl)=N1',
-  cyclohexane: 'C1CCCCC1',
-  'Cyclohexyl(dimethoxy)methylsilane': 'C[Si](OC)(C1CCCCC1)OC',
-  'Cyclohexylboronic Acid': 'OB(C1CCCCC1)O',
-  Cyclohexyldiphenylphosphine: 'P(C1=CC=CC=C1)(C2CCCCC2)C3=CC=CC=C3',
-  'Cyclohexylmagnesium Bromide': 'Br[Mg]C1CCCCC1',
-  'Cyclohexyltrimethylammonium Bis(trifluoromethanesulfonyl)imide': 'C[N+](C)(C)C1CCCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  Cyclooctene: 'C1=C\\CCCCCC/1',
-  'Cyclopentadienyl Thallium': '[Tl]C1=CC=CC1',
-  'Cyclopentadienylbis(triphenylphosphine)ruthenium(II) Chloride': '[Ru+]C1=CC=CC1.P(C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(C5=CC=CC=C5)(C6=CC=CC=C6)C7=CC=CC=C7.[Cl-]',
-  'Cyclopentadienyliron Dicarbonyl Dimer': '[C]=O.[C]=O.[Fe]C1=CC=CC1',
-  'Cyclopentadienyltitanium(IV) Trichloride': '[Ti+3]C1=CC=CC1.[Cl-].[Cl-].[Cl-]',
-  cyclopentane: 'C1CCCC1',
-  'Cyclopentylboronic Acid': 'OB(C1CCCC1)O',
-  'Cyclopentylmagnesium Bromide': 'Br[Mg]C1CCCC1',
-  Cyclopentylmethylether: 'COC1CCCC1',
-  'Cyclopropylmagnesium Bromide': 'Br[Mg]C1CC1',
-  'D-(-)-Leucinol': 'N[C@H](CC(C)C)CO',
-  'D-(+)-Threonine': 'N[C@H]([C@@H](O)C)C(O)=O',
-  'D-Alanine': 'N[C@H](C)C(O)=O',
-  Decamethylcyclopentasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Decamethyltetrasiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  Decyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCC)OCC',
-  Decyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCC)OC',
-  'Decyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCC)C.[Br-]',
-  'Decyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCC)C.[Cl-]',
-  'Dehydroacetic Acid': 'CC(C(C(C=C(O1)C)=O)C1=O)=O',
-  'Dess-Martin periodinane (DMP)': 'O=C(O1)C2=CC=CC=C2I1(OC(C)=O)(OC(C)=O)OC(C)=O',
-  'Di(N-succinimidyl) Carbonate': 'O=C(ON1C(CCC1=O)=O)ON2C(CCC2=O)=O',
-  'Di-1-adamantylphosphine': 'C12CC3(PC45CC6CC(C5)CC(C6)C4)CC(C2)CC(C3)C1',
-  'Di-2-pyridyl Carbonate': 'O=C(OC1=NC=CC=C1)OC2=NC=CC=C2',
-  Diacetoxydimethylsilane: 'C[Si](OC(C)=O)(OC(C)=O)C',
-  'Diallyldimethylammonium Chloride': 'C[N+](CC=C)(CC=C)C.[Cl-]',
-  Diallyldimethylsilane: 'C[Si](CC=C)(CC=C)C',
-  'Dibenzo[a,e]cyclooctene': 'C12=CC=CC=C1/C=C\\C3=CC=CC=C3/C=C\\2',
-  'Dibenzyl L-Tartrate': 'O[C@H]([C@H](C(OCC1=CC=CC=C1)=O)O)C(OCC2=CC=CC=C2)=O',
-  'Dibromoisocyanuric Acid': 'O=C(N(Br)C(N1)=O)N(Br)C1=O',
-  'Dibutyltin Bis(trifluoromethanesulfonate)': 'CCCC[Sn+2]CCCC.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O',
-  'Dibutyltin Diacetate': 'CCCC[Sn+2]CCCC.CC([O-])=O.CC([O-])=O',
-  'Dibutyltin Dichloride': 'CCCC[Sn](Cl)(Cl)CCCC',
-  'Dibutyltin Dilaurate': 'CCCC[Sn+2]CCCC.CCCCCCCCCCCC([O-])=O.CCCCCCCCCCCC([O-])=O',
-  'Dibutyltin Oxide': 'CCCC[Sn](CCCC)=O',
-  'Dichloramine B': 'O=S(N(Cl)Cl)(C1=CC=CC=C1)=O',
-  'Dichloramine T': 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[Na+]',
-  'Dichloro(1,10-phenanthroline)copper(II)': 'Cl[Cu]Cl.C12=CC=C3C=CC=NC3=C1N=CC=C2',
-  'Dichloro(diethylamino)phosphine': 'CCN(P(Cl)Cl)CC',
-  'Dichloro(methyl)(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](Cl)(Cl)C',
-  'Dichloro(methyl)-n-octylsilane': 'CCCCCCCC[Si](Cl)(Cl)C',
+  "Chloropentamethyldisilane": 'C[Si](C)(C)[Si](C)(Cl)C',
+  "Chlorotriethoxysilane": 'CCO[Si](OCC)(Cl)OCC',
+  "Chlorotripyrrolidinophosphonium Hexafluorophosphate": 'Cl[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
+  "Choline": 'OCC[N+](C)(C)C',
+  "Choline Chloride": 'OCC[N+](C)(C)C.[Cl-]',
+  "Choline hydroxide": 'OCC[N+](C)(C)C.[OH-]',
+  "Chromium": '[Cr]',
+  "CHROMIUM (III) HYDROXIDE N-HYDRATE": '[OH-].[Cr+3].[OH-].[OH-]',
+  "Chromium(VI) oxide": '[Cr+6].[O-2].[O-2].[O-2]',
+  "Cinchonidine": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
+  "Cinchonidine Dihydrochloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]Cl',
+  "Cinchonidine Sulfate Dihydrate": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
+  "Cinchonine": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
+  "Cinchonine Hydrochloride Hydrate": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]O[H]',
+  "Citric Acid": 'OC(C(O)=O)(CC(O)=O)CC(O)=O',
+  "Cobalt": '[Co]',
+  "Cobalt hydroxide": '[Co+2].[OH-].[OH-]',
+  "cobalt trihydroxide": '[Co+3].[OH-].[OH-].[OH-]',
+  "Copper": '[Cu]',
+  "copper (I) bromide": '[Cu+].[Br-]',
+  "copper (I) chloride": '[Cu+].[Cl-]',
+  "copper (II) bromide": '[Cu+2].[Br-].[Br-]',
+  "copper (II) chloride": '[Cu+2].[Cl-].[Cl-]',
+  "copper (II) iodide": '[Cu+2].[I-].[I-]',
+  "copper fluoride": '[Cu+2].[F-].[F-]',
+  "Copper sulfate": 'O=S([O-])([O-])=O.[Cu+2]',
+  "Copper(I) 2-Thiophenecarboxylate": 'O=C(C1=CC=CS1)[O-].[Cu+]',
+  "Copper(I) Acetate": 'CC([O-])=O.[Cu+]',
+  "Copper(I) Cyanide": '[C-]#N.[Cu+]',
+  "Copper(I) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.[Cu+]',
+  "Copper(I) Trifluoromethanethiolate": '[S-]C(F)(F)F.[Cu+]',
+  "copper(I)bromide DMS-complex": 'CSC.[Cu+].[Br-]',
+  "Copper(I)iodide": '[Cu+].[I-]',
+  "Copper(II) Acetate Monohydrate": 'CC([O-])=O.CC([O-])=O.[H]O[H].[Cu+2]',
+  "Copper(II) Tetrafluoroborate": 'F[B-](F)(F)F.F[B-](F)(F)F.[Cu+2]',
+  "Copper(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Cu+2]',
+  "Croconic Acid": 'OC1=C(C(C(C1=O)=O)=O)O',
+  "Cumene Hydroperoxide": 'CC(C1=CC=C(OO)C=C1)C',
+  "Cupric hydroxide": '[Cu+2].[OH-].[OH-]',
+  "Cyanomethylenetributylphosphorane": 'CCCCP(CCCC)(CCCC)=CC#N',
+  "Cyanuric Chloride": 'ClC1=NC(Cl)=NC(Cl)=N1',
+  "cyclohexane": 'C1CCCCC1',
+  "Cyclohexyl(dimethoxy)methylsilane": 'C[Si](OC)(C1CCCCC1)OC',
+  "Cyclohexylboronic Acid": 'OB(C1CCCCC1)O',
+  "Cyclohexyldiphenylphosphine": 'P(C1=CC=CC=C1)(C2CCCCC2)C3=CC=CC=C3',
+  "Cyclohexylmagnesium Bromide": 'Br[Mg]C1CCCCC1',
+  "Cyclohexyltrimethylammonium Bis(trifluoromethanesulfonyl)imide": 'C[N+](C)(C)C1CCCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "Cyclooctene": 'C1=C\\CCCCCC/1',
+  "Cyclopentadienyl Thallium": '[Tl]C1=CC=CC1',
+  "Cyclopentadienylbis(triphenylphosphine)ruthenium(II) Chloride": '[Ru+]C1=CC=CC1.P(C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(C5=CC=CC=C5)(C6=CC=CC=C6)C7=CC=CC=C7.[Cl-]',
+  "Cyclopentadienyliron Dicarbonyl Dimer": '[C]=O.[C]=O.[Fe]C1=CC=CC1',
+  "Cyclopentadienyltitanium(IV) Trichloride": '[Ti+3]C1=CC=CC1.[Cl-].[Cl-].[Cl-]',
+  "cyclopentane": 'C1CCCC1',
+  "Cyclopentylboronic Acid": 'OB(C1CCCC1)O',
+  "Cyclopentylmagnesium Bromide": 'Br[Mg]C1CCCC1',
+  "Cyclopentylmethylether": 'COC1CCCC1',
+  "Cyclopropylmagnesium Bromide": 'Br[Mg]C1CC1',
+  "D-(-)-Leucinol": 'N[C@H](CC(C)C)CO',
+  "D-(+)-Threonine": 'N[C@H]([C@@H](O)C)C(O)=O',
+  "D-Alanine": 'N[C@H](C)C(O)=O',
+  "Decamethylcyclopentasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Decamethyltetrasiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  "Decyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCC)OCC',
+  "Decyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCC)OC',
+  "Decyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCC)C.[Br-]',
+  "Decyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCC)C.[Cl-]',
+  "Dehydroacetic Acid": 'CC(C(C(C=C(O1)C)=O)C1=O)=O',
+  "Dess-Martin periodinane (DMP)": 'O=C(O1)C2=CC=CC=C2I1(OC(C)=O)(OC(C)=O)OC(C)=O',
+  "Di(N-succinimidyl) Carbonate": 'O=C(ON1C(CCC1=O)=O)ON2C(CCC2=O)=O',
+  "Di-1-adamantylphosphine": 'C12CC3(PC45CC6CC(C5)CC(C6)C4)CC(C2)CC(C3)C1',
+  "Di-2-pyridyl Carbonate": 'O=C(OC1=NC=CC=C1)OC2=NC=CC=C2',
+  "Diacetoxydimethylsilane": 'C[Si](OC(C)=O)(OC(C)=O)C',
+  "Diallyldimethylammonium Chloride": 'C[N+](CC=C)(CC=C)C.[Cl-]',
+  "Diallyldimethylsilane": 'C[Si](CC=C)(CC=C)C',
+  "Dibenzo[a,e]cyclooctene": 'C12=CC=CC=C1/C=C\\C3=CC=CC=C3/C=C\\2',
+  "Dibenzyl L-Tartrate": 'O[C@H]([C@H](C(OCC1=CC=CC=C1)=O)O)C(OCC2=CC=CC=C2)=O',
+  "Dibromoisocyanuric Acid": 'O=C(N(Br)C(N1)=O)N(Br)C1=O',
+  "Dibutyltin Bis(trifluoromethanesulfonate)": 'CCCC[Sn+2]CCCC.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O',
+  "Dibutyltin Diacetate": 'CCCC[Sn+2]CCCC.CC([O-])=O.CC([O-])=O',
+  "Dibutyltin Dichloride": 'CCCC[Sn](Cl)(Cl)CCCC',
+  "Dibutyltin Dilaurate": 'CCCC[Sn+2]CCCC.CCCCCCCCCCCC([O-])=O.CCCCCCCCCCCC([O-])=O',
+  "Dibutyltin Oxide": 'CCCC[Sn](CCCC)=O',
+  "Dichloramine B": 'O=S(N(Cl)Cl)(C1=CC=CC=C1)=O',
+  "Dichloramine T": 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[Na+]',
+  "Dichloro(1,10-phenanthroline)copper(II)": 'Cl[Cu]Cl.C12=CC=C3C=CC=NC3=C1N=CC=C2',
+  "Dichloro(diethylamino)phosphine": 'CCN(P(Cl)Cl)CC',
+  "Dichloro(methyl)(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](Cl)(Cl)C',
+  "Dichloro(methyl)-n-octylsilane": 'CCCCCCCC[Si](Cl)(Cl)C',
   "Dichloro(N,N,N',N'-tetramethylethylenediamine)zinc(II)": 'CN(C)CCN(C)C.Cl[Zn]Cl',
-  'Dichloro(p-cymene)ruthenium(II)': 'CC1=CC=C(C(C)C)C=C1.Cl[Ru]Cl',
-  'Dichloro[9,9-dimethyl-4,5-bis(diphenylphosphino)xanthene]palladium(II)': 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2.Cl[Pd]Cl',
-  'Dichloroacetic Acid': 'O=C(O)C(Cl)Cl',
-  Dichlorocyclohexylmethylsilane: 'C[Si](Cl)(Cl)C1CCCCC1',
-  Dichlorodecylmethylsilane: 'C[Si](Cl)(Cl)CCCCCCCCCC',
-  Dichlorododecylmethylsilane: 'C[Si](Cl)(Cl)CCCCCCCCCCCC',
-  Dichlorohexylmethylsilane: 'C[Si](Cl)(Cl)CCCCCC',
-  dichloromethane: 'ClCCl',
-  Dichloromethylvinylsilane: 'C=C[Si](Cl)(Cl)C',
-  Dichlorophenylphosphine: 'ClP(Cl)C1=CC=CC=C1',
-  'Dichlorotitanium Diisopropoxide': 'Cl[Ti+2]Cl.CC([O-])C.CC([O-])C',
-  'Dicobalt Octacarbonyl': '[CH-]=O.[CH-]=O.[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[Co].[Co+2]',
-  'Dicumyl peroxide': 'CC(OOC(C)(C1=CC=CC=C1)C)(C2=CC=CC=C2)C',
-  'Dicyclohexyl(2,4,6-triisopropylphenyl)phosphine': 'CC(C1=C(P(C2CCCCC2)C3CCCCC3)C(C(C)C)=CC(C(C)C)=C1)C',
-  'Dicyclohexyl(trifluoromethanesulfonyloxy)borane': 'O=S(OB(C1CCCCC1)C2CCCCC2)(C(F)(F)F)=O',
-  'Dicyclohexylamine Borane': 'C1(NC2CCCCC2)CCCCC1.B',
-  Dicyclohexylphenylphosphine: 'P(C1CCCCC1)(C2CCCCC2)C3=CC=CC=C3',
-  Dicyclopentadiene: 'C12C=CCC1C3C=CC2C3',
-  'Dicyclopentyl(dimethoxy)silane': 'CO[Si](C1CCCC1)(C2CCCC2)OC',
-  'Didecyldimethylammonium Bromide': 'C[N+](CCCCCCCCCC)(CCCCCCCCCC)C.[Br-]',
-  'Didodecyldimethylammonium Chloride': 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Cl-]',
-  'Diethoxy(methyl)phenylsilane': 'C[Si](OCC)(OCC)C1=CC=CC=C1',
-  Diethoxydimethylsilane: 'C[Si](OCC)(OCC)C',
-  Diethoxydiphenylsilane: 'CCO[Si](C1=CC=CC=C1)(OCC)C2=CC=CC=C2',
-  Diethoxymethylsilane: 'C[SiH](OCC)OCC',
-  Diethoxymethylvinylsilane: 'C=C[Si](OCC)(OCC)C',
-  'Diethyl (Bromodifluoromethyl)phosphonate': 'FC(Br)(P(OCC)(OCC)=O)F',
-  'Diethyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate': 'O=C(C1=C(C)NC(C)=C(C(OCC)=O)C1)OCC',
+  "Dichloro(p-cymene)ruthenium(II)": 'CC1=CC=C(C(C)C)C=C1.Cl[Ru]Cl',
+  "Dichloro[9,9-dimethyl-4,5-bis(diphenylphosphino)xanthene]palladium(II)": 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2.Cl[Pd]Cl',
+  "Dichloroacetic Acid": 'O=C(O)C(Cl)Cl',
+  "Dichlorocyclohexylmethylsilane": 'C[Si](Cl)(Cl)C1CCCCC1',
+  "Dichlorodecylmethylsilane": 'C[Si](Cl)(Cl)CCCCCCCCCC',
+  "Dichlorododecylmethylsilane": 'C[Si](Cl)(Cl)CCCCCCCCCCCC',
+  "Dichlorohexylmethylsilane": 'C[Si](Cl)(Cl)CCCCCC',
+  "dichloromethane": 'ClCCl',
+  "Dichloromethylvinylsilane": 'C=C[Si](Cl)(Cl)C',
+  "Dichlorophenylphosphine": 'ClP(Cl)C1=CC=CC=C1',
+  "Dichlorotitanium Diisopropoxide": 'Cl[Ti+2]Cl.CC([O-])C.CC([O-])C',
+  "Dicobalt Octacarbonyl": '[CH-]=O.[CH-]=O.[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[Co].[Co+2]',
+  "Dicumyl peroxide": 'CC(OOC(C)(C1=CC=CC=C1)C)(C2=CC=CC=C2)C',
+  "Dicyclohexyl(2,4,6-triisopropylphenyl)phosphine": 'CC(C1=C(P(C2CCCCC2)C3CCCCC3)C(C(C)C)=CC(C(C)C)=C1)C',
+  "Dicyclohexyl(trifluoromethanesulfonyloxy)borane": 'O=S(OB(C1CCCCC1)C2CCCCC2)(C(F)(F)F)=O',
+  "Dicyclohexylamine Borane": 'C1(NC2CCCCC2)CCCCC1.B',
+  "Dicyclohexylphenylphosphine": 'P(C1CCCCC1)(C2CCCCC2)C3=CC=CC=C3',
+  "Dicyclopentadiene": 'C12C=CCC1C3C=CC2C3',
+  "Dicyclopentyl(dimethoxy)silane": 'CO[Si](C1CCCC1)(C2CCCC2)OC',
+  "Didecyldimethylammonium Bromide": 'C[N+](CCCCCCCCCC)(CCCCCCCCCC)C.[Br-]',
+  "Didodecyldimethylammonium Chloride": 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Cl-]',
+  "Diethoxy(methyl)phenylsilane": 'C[Si](OCC)(OCC)C1=CC=CC=C1',
+  "Diethoxydimethylsilane": 'C[Si](OCC)(OCC)C',
+  "Diethoxydiphenylsilane": 'CCO[Si](C1=CC=CC=C1)(OCC)C2=CC=CC=C2',
+  "Diethoxymethylsilane": 'C[SiH](OCC)OCC',
+  "Diethoxymethylvinylsilane": 'C=C[Si](OCC)(OCC)C',
+  "Diethyl (Bromodifluoromethyl)phosphonate": 'FC(Br)(P(OCC)(OCC)=O)F',
+  "Diethyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate": 'O=C(C1=C(C)NC(C)=C(C(OCC)=O)C1)OCC',
   "Diethyl 2,2':6',2''-Terpyridine-4'-phosphonate": 'O=P(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)(OCC)OCC',
-  'Diethyl Cyanophosphonate': 'N#CP(OCC)(OCC)=O',
-  'diethyl ether': 'CCOCC',
-  Et2O: 'CCOCC',
-  'Diethyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OCC)=O)O)C(OCC)=O',
-  'Diethyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OCC)=O)O)C(OCC)=O',
-  'Diethyl(2-methoxyethyl)methylammonium Bis(fluorosulfonyl)imide': 'FC(F)(F)S(=O)([N-]S(=O)(C(F)(F)F)=O)=O.C[N+](CC)(CC)CCOC',
-  'Diethyl(isopropyl)silanol': 'O[Si](CC)(CC)C(C)C',
-  Diethylamine: 'CCNCC',
-  NEt2: 'CCNCC',
-  'Diethyldimethylammonium hydroxide': 'C[N+](CC)(CC)C.[OH-]',
-  Diethylenetriamine: 'NCCNCCN',
-  Diethylphenylphosphine: 'CCP(CC)C1=CC=CC=C1',
-  'Difluoroacetic Acid': 'O=C(O)C(F)F',
-  'Difluoroacetic Anhydride': 'O=C(OC(C(F)F)=O)C(F)F',
-  'Difluoromethyl 2-Pyridyl Sulfone': 'O=S(C1=NC=CC=C1)(C(F)F)=O',
-  'Difluoromethyl Phenyl Sulfide': 'FC(SC1=CC=CC=C1)F',
-  'Difluoromethyl Phenyl Sulfone': 'O=S(C1=CC=CC=C1)(C(F)F)=O',
-  'Dihydrogen hexahydroxyplatinate': 'O[Pt-2](O)(O)(O)(O)O.[H+].[H+]',
-  Diisobutyldimethoxysilane: 'CO[Si](CC(C)C)(CC(C)C)OC',
-  'Diisopropyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
-  'Diisopropyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
-  Diisopropylamine: 'CC(NC(C)C)C',
-  DIPA: 'CC(NC(C)C)C',
-  'Dilauryldimethylammonium Bromide': 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Br-]',
-  'Dilithium Tetrachlorocopper(II)': 'Cl[Cu-](Cl)(Cl)Cl.Cl[Cu-](Cl)(Cl)Cl.[Li+].[Li+]',
-  'Dimesitylammonium Pentafluorobenzenesulfonate': 'CC1=CC(C)=CC(C)=C1[NH2+]C2=C(C)C=C(C)C=C2C.O=S(C3=C(F)C(F)=C(F)C(F)=C3F)([O-])=O',
-  Dimesitylfluoroborane: 'CC1=CC(C)=CC(C)=C1B(F)C2=C(C)C=C(C)C=C2C',
-  'Dimethoxy(methyl)(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](OC)(OC)C',
-  'Dimethoxy(methyl)silane': 'C[SiH](OC)OC',
-  Dimethoxydimethylsilane: 'C[Si](OC)(OC)C',
-  Dimethoxydiphenylsilane: 'CO[Si](C1=CC=CC=C1)(OC)C2=CC=CC=C2',
-  'Dimethoxydi-p-tolylsilane': 'CC1=CC=C([Si](OC)(OC)C2=CC=C(C)C=C2)C=C1',
-  Dimethoxymethylvinylsilane: 'C=C[Si](OC)(OC)C',
+  "Diethyl Cyanophosphonate": 'N#CP(OCC)(OCC)=O',
+  "diethyl ether": 'CCOCC',
+  "Et2O": 'CCOCC',
+  "Diethyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OCC)=O)O)C(OCC)=O',
+  "Diethyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OCC)=O)O)C(OCC)=O',
+  "Diethyl(2-methoxyethyl)methylammonium Bis(fluorosulfonyl)imide": 'FC(F)(F)S(=O)([N-]S(=O)(C(F)(F)F)=O)=O.C[N+](CC)(CC)CCOC',
+  "Diethyl(isopropyl)silanol": 'O[Si](CC)(CC)C(C)C',
+  "Diethylamine": 'CCNCC',
+  "NEt2": 'CCNCC',
+  "Diethyldimethylammonium hydroxide": 'C[N+](CC)(CC)C.[OH-]',
+  "Diethylenetriamine": 'NCCNCCN',
+  "Diethylphenylphosphine": 'CCP(CC)C1=CC=CC=C1',
+  "Difluoroacetic Acid": 'O=C(O)C(F)F',
+  "Difluoroacetic Anhydride": 'O=C(OC(C(F)F)=O)C(F)F',
+  "Difluoromethyl 2-Pyridyl Sulfone": 'O=S(C1=NC=CC=C1)(C(F)F)=O',
+  "Difluoromethyl Phenyl Sulfide": 'FC(SC1=CC=CC=C1)F',
+  "Difluoromethyl Phenyl Sulfone": 'O=S(C1=CC=CC=C1)(C(F)F)=O',
+  "Dihydrogen hexahydroxyplatinate": 'O[Pt-2](O)(O)(O)(O)O.[H+].[H+]',
+  "Diisobutyldimethoxysilane": 'CO[Si](CC(C)C)(CC(C)C)OC',
+  "Diisopropyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
+  "Diisopropyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
+  "Diisopropylamine": 'CC(NC(C)C)C',
+  "DIPA": 'CC(NC(C)C)C',
+  "Dilauryldimethylammonium Bromide": 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Br-]',
+  "Dilithium Tetrachlorocopper(II)": 'Cl[Cu-](Cl)(Cl)Cl.Cl[Cu-](Cl)(Cl)Cl.[Li+].[Li+]',
+  "Dimesitylammonium Pentafluorobenzenesulfonate": 'CC1=CC(C)=CC(C)=C1[NH2+]C2=C(C)C=C(C)C=C2C.O=S(C3=C(F)C(F)=C(F)C(F)=C3F)([O-])=O',
+  "Dimesitylfluoroborane": 'CC1=CC(C)=CC(C)=C1B(F)C2=C(C)C=C(C)C=C2C',
+  "Dimethoxy(methyl)(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](OC)(OC)C',
+  "Dimethoxy(methyl)silane": 'C[SiH](OC)OC',
+  "Dimethoxydimethylsilane": 'C[Si](OC)(OC)C',
+  "Dimethoxydiphenylsilane": 'CO[Si](C1=CC=CC=C1)(OC)C2=CC=CC=C2',
+  "Dimethoxydi-p-tolylsilane": 'CC1=CC=C([Si](OC)(OC)C2=CC=C(C)C=C2)C=C1',
+  "Dimethoxymethylvinylsilane": 'C=C[Si](OC)(OC)C',
   "Dimethyl 2,2'-Bipyridine-4,4'-dicarboxylate": 'O=C(C1=CC(C2=NC=CC(C(OC)=O)=C2)=NC=C1)OC',
   "Dimethyl 2,2'-Bipyridine-6,6'-dicarboxylate": 'O=C(C1=CC=CC(C2=NC(C(OC)=O)=CC=C2)=N1)OC',
-  'Dimethyl Sulfide Borane': 'CSC.B',
-  'Dimethyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OC)=O)O)C(OC)=O',
-  'Dimethyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC)=O)O)C(OC)=O',
-  Dimethylamin: 'CNC',
-  NMe2: 'CNC',
-  'Dimethylamine Borane': 'CNC.B',
-  'Dimethylbis(phenylethynyl)silane': 'C[Si](C#CC1=CC=CC=C1)(C)C#CC2=CC=CC=C2',
-  'Dimethyldimyristylammonium Bromide': 'CCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCC.[Br-]',
-  'Dimethyldioctadecylammonium Bromide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[Br-]',
-  'Dimethyldioctadecylammonium Iodide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[I-]',
-  'Dimethyldioctylammonium Bromide': 'CCCCCCCC[N+](C)(C)CCCCCCCC.[Br-]',
-  'Dimethyldipalmitylammonium Bromide': 'CCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCC.[Br-]',
-  Dimethyldiphenylsilane: 'C[Si](C1=CC=CC=C1)(C)C2=CC=CC=C2',
-  Dimethyldivinylsilane: 'C=C[Si](C)(C)C=C',
-  Dimethylformamide: 'CN(C)C=O',
-  DMF: 'CN(C)C=O',
-  'Dimethylphenylphosphine Borane': 'CP(C)C1=CC=CC=C1.B',
-  Dimethylphenylsilane: 'C[SiH](C)C1=CC=CC=C1',
-  'Dimethylthiophosphinoyl Chloride': 'ClP(C)(C)=S',
-  'Dimethyltin Dichloride': 'C[Sn](Cl)(Cl)C',
-  'Dimethyltin Oxide': 'C[Sn](C)=O',
-  Dimethyltitanocene: 'C[Ti]C.c1cccc1.c2cccc2',
-  'Di-n-octyltin Oxide': 'CCCCCCCC[Sn](CCCCCCCC)=O',
-  'Diphenyl-2-pyridylphosphine': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=NC=CC=C3',
-  'Diphenylammonium Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.C1([NH2+]C2=CC=CC=C2)=CC=CC=C1',
-  'Diphenylbis(phenylethynyl)silane': 'C1(C#C[Si](C2=CC=CC=C2)(C3=CC=CC=C3)C#CC4=CC=CC=C4)=CC=CC=C1',
-  Diphenyldichlorogermane: 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
-  'Diphenyliodonium chloride': 'C1([I+]C2=CC=CC=C2)=CC=CC=C1.[Cl-]',
-  'Diphenylphosphine Oxide': 'O=P(C1=CC=CC=C1)C2=CC=CC=C2',
-  'Diphenylphosphinic Chloride': 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
-  'Diphenylphosphoryl Azide': 'O=P(C1=CC=CC=C1)(N=[N+]=[N-])C2=CC=CC=C2',
-  Diphenylpropylphosphine: 'CCCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  Diphenylsilane: 'C1([SiH2]C2=CC=CC=C2)=CC=CC=C1',
-  Diphenylsilanediol: 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O',
-  'Diphosphoryl Chloride': 'O=P(OP(O)(O)=O)(Cl)O',
-  Dipivaloylmethane: 'CC(C)(C)C(CC(C(C)(C)C)=O)=O',
+  "Dimethyl Sulfide Borane": 'CSC.B',
+  "Dimethyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OC)=O)O)C(OC)=O',
+  "Dimethyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC)=O)O)C(OC)=O',
+  "Dimethylamin": 'CNC',
+  "NMe2": 'CNC',
+  "Dimethylamine Borane": 'CNC.B',
+  "Dimethylbis(phenylethynyl)silane": 'C[Si](C#CC1=CC=CC=C1)(C)C#CC2=CC=CC=C2',
+  "Dimethyldimyristylammonium Bromide": 'CCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCC.[Br-]',
+  "Dimethyldioctadecylammonium Bromide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[Br-]',
+  "Dimethyldioctadecylammonium Iodide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[I-]',
+  "Dimethyldioctylammonium Bromide": 'CCCCCCCC[N+](C)(C)CCCCCCCC.[Br-]',
+  "Dimethyldipalmitylammonium Bromide": 'CCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCC.[Br-]',
+  "Dimethyldiphenylsilane": 'C[Si](C1=CC=CC=C1)(C)C2=CC=CC=C2',
+  "Dimethyldivinylsilane": 'C=C[Si](C)(C)C=C',
+  "Dimethylformamide": 'CN(C)C=O',
+  "DMF": 'CN(C)C=O',
+  "Dimethylphenylphosphine Borane": 'CP(C)C1=CC=CC=C1.B',
+  "Dimethylphenylsilane": 'C[SiH](C)C1=CC=CC=C1',
+  "Dimethylthiophosphinoyl Chloride": 'ClP(C)(C)=S',
+  "Dimethyltin Dichloride": 'C[Sn](Cl)(Cl)C',
+  "Dimethyltin Oxide": 'C[Sn](C)=O',
+  "Dimethyltitanocene": 'C[Ti]C.c1cccc1.c2cccc2',
+  "Di-n-octyltin Oxide": 'CCCCCCCC[Sn](CCCCCCCC)=O',
+  "Diphenyl-2-pyridylphosphine": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=NC=CC=C3',
+  "Diphenylammonium Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.C1([NH2+]C2=CC=CC=C2)=CC=CC=C1',
+  "Diphenylbis(phenylethynyl)silane": 'C1(C#C[Si](C2=CC=CC=C2)(C3=CC=CC=C3)C#CC4=CC=CC=C4)=CC=CC=C1',
+  "Diphenyldichlorogermane": 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
+  "Diphenyliodonium chloride": 'C1([I+]C2=CC=CC=C2)=CC=CC=C1.[Cl-]',
+  "Diphenylphosphine Oxide": 'O=P(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Diphenylphosphinic Chloride": 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
+  "Diphenylphosphoryl Azide": 'O=P(C1=CC=CC=C1)(N=[N+]=[N-])C2=CC=CC=C2',
+  "Diphenylpropylphosphine": 'CCCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Diphenylsilane": 'C1([SiH2]C2=CC=CC=C2)=CC=CC=C1',
+  "Diphenylsilanediol": 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O',
+  "Diphosphoryl Chloride": 'O=P(OP(O)(O)=O)(Cl)O',
+  "Dipivaloylmethane": 'CC(C)(C)C(CC(C(C)(C)C)=O)=O',
   "Dipotassium (R)-1,1'-Binaphthyl-2,2'-disulfonate": 'O=S(C1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3S(=O)([O-])=O)([O-])=O.[K+].[K+]',
   "Dipyrido[3,2-a:2',3'-c]phenazine": 'C12=CC=CN=C1C3=NC=CC=C3C4=NC5=CC=CC=C5N=C42',
-  'Di-sec-butylmagnesium - Lithium Chloride': 'CCC([Mg]C(C)CC)C.[Li+].[Cl-]',
-  'Di-tert-butyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate': 'O=C(C1=C(C)NC(C)=C(C(OC(C)(C)C)=O)C1)OC(C)(C)C',
-  'Di-tert-butyl Peroxide': 'CC(OOC(C)(C)C)(C)C',
-  DTBP: 'CC(OOC(C)(C)C)(C)C',
-  'Di-tert-butyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC(C)(C)C)=O)O)C(OC(C)(C)C)=O',
-  'Di-tert-butylchlorophosphine': 'ClP(C(C)(C)C)C(C)(C)C',
-  'Di-tert-butylmethylphosphonium Tetraphenylborate': 'C[PH+](C(C)(C)C)C(C)(C)C.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  'Di-tert-butylphenylphosphine': 'CC(P(C(C)(C)C)C1=CC=CC=C1)(C)C',
-  'Di-tert-Butylsilane': 'CC([SiH2]C(C)(C)C)(C)C',
-  'DL-Dithiothreitol': 'SC[C@H]([C@@H](CO)O)S',
-  'DL-Lactic Acid': 'OC(C)C(O)=O',
-  'DL-Malic Acid': 'OC(CC(O)=O)C(O)=O',
-  'DL-α-Lipoic Acid': 'O=C(CCCCC1SSCC1)O',
-  'D-Methionine': 'N[C@H](CCSC)C(O)=O',
-  DMSO: 'CS(C)=O',
-  Dodecamethylcyclohexasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Dodecamethylpentasiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  Dodecyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCCCC)OCC',
-  Dodecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCC)OC',
-  'Dodecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCC)C.[Br-]',
-  'Dodecyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCCCC)C.[Cl-]',
-  'D-Phenylalanine': 'N[C@H](CC1=CC=CC=C1)C(O)=O',
-  'D-Pipecolic Acid': 'O=C(O)C1CCCCN1',
-  'D-Proline': 'O=C(O)[C@@H]1NCCC1',
-  'D-Tryptophan': 'N[C@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
-  ethanol: 'OCC',
-  EtOH: 'OCC',
-  Ethoxydiphenylphosphine: 'CCOP(C1=CC=CC=C1)C2=CC=CC=C2',
-  Ethoxytriethylsilane: 'CC[Si](CC)(OCC)CC',
+  "Di-sec-butylmagnesium - Lithium Chloride": 'CCC([Mg]C(C)CC)C.[Li+].[Cl-]',
+  "Di-tert-butyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate": 'O=C(C1=C(C)NC(C)=C(C(OC(C)(C)C)=O)C1)OC(C)(C)C',
+  "Di-tert-butyl Peroxide": 'CC(OOC(C)(C)C)(C)C',
+  "DTBP": 'CC(OOC(C)(C)C)(C)C',
+  "Di-tert-butyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC(C)(C)C)=O)O)C(OC(C)(C)C)=O',
+  "Di-tert-butylchlorophosphine": 'ClP(C(C)(C)C)C(C)(C)C',
+  "Di-tert-butylmethylphosphonium Tetraphenylborate": 'C[PH+](C(C)(C)C)C(C)(C)C.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Di-tert-butylphenylphosphine": 'CC(P(C(C)(C)C)C1=CC=CC=C1)(C)C',
+  "Di-tert-Butylsilane": 'CC([SiH2]C(C)(C)C)(C)C',
+  "DL-Dithiothreitol": 'SC[C@H]([C@@H](CO)O)S',
+  "DL-Lactic Acid": 'OC(C)C(O)=O',
+  "DL-Malic Acid": 'OC(CC(O)=O)C(O)=O',
+  "DL-α-Lipoic Acid": 'O=C(CCCCC1SSCC1)O',
+  "D-Methionine": 'N[C@H](CCSC)C(O)=O',
+  "DMSO": 'CS(C)=O',
+  "Dodecamethylcyclohexasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Dodecamethylpentasiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  "Dodecyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCCCC)OCC',
+  "Dodecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCC)OC',
+  "Dodecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCC)C.[Br-]',
+  "Dodecyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCCCC)C.[Cl-]',
+  "D-Phenylalanine": 'N[C@H](CC1=CC=CC=C1)C(O)=O',
+  "D-Pipecolic Acid": 'O=C(O)C1CCCCN1',
+  "D-Proline": 'O=C(O)[C@@H]1NCCC1',
+  "D-Tryptophan": 'N[C@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
+  "ethanol": 'OCC',
+  "EtOH": 'OCC',
+  "Ethoxydiphenylphosphine": 'CCOP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Ethoxytriethylsilane": 'CC[Si](CC)(OCC)CC',
   "Ethyl (11bR)-4-Amino-2,6-bis(3,5-di-tert-butylphenyl)-4,5-dihydro-3H-cyclohepta[1,2-a:7,6-a']dinaphthalene-4-carboxylate": 'O=C(C1(N)CC2=C(C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3)C=C4C=CC=CC4=C2C5=C6C=CC=CC6=CC(C7=CC(C(C)(C)C)=CC(C(C)(C)C)=C7)=C5C1)OCC',
-  'Ethyl 1-Hydroxy-1H-1,2,3-triazole-4-carboxylate': 'O=C(C1=CN(O)N=N1)OCC',
-  'ethyl acetate': 'CC(OCC)=O',
-  'Ethyl Chloroglyoxylate': 'O=C(Cl)C(OCC)=O',
-  'Ethyl chlorooxoacetate': 'O=C(OCC)C(Cl)=O',
-  'Ethyl Cyano(hydroxyimino)acetate': 'O=C(OCC)/C(C#N)=N/O',
-  Ethylamine: 'NCC',
-  'Ethylamine Hydrochloride': 'NCC.[H]Cl',
-  'Ethylboronic Acid': 'CCB(O)O',
-  Ethyldiphenylphosphine: 'CCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  'Ethylene diamine': 'NCCN',
-  'Ethylenediaminetetraacetic Acid': 'O=C(CN(CCN(CC(O)=O)CC(O)=O)CC(O)=O)O',
-  'Ethylenedithiobis(trimethylsilane)': 'C[Si](C)(C)SCCS[Si](C)(C)C',
-  Ethyllithium: '[Li]CC',
-  'Ethylmagnesium Bromide': 'Br[Mg]CC',
-  'Ethylmagnesium Chloride': 'Cl[Mg]CC',
-  'Ethyltrimethylammonium Iodide': 'C[N+](C)(CC)C.[I-]',
-  Europium: '[Eu]',
+  "Ethyl 1-Hydroxy-1H-1,2,3-triazole-4-carboxylate": 'O=C(C1=CN(O)N=N1)OCC',
+  "ethyl acetate": 'CC(OCC)=O',
+  "Ethyl Chloroglyoxylate": 'O=C(Cl)C(OCC)=O',
+  "Ethyl chlorooxoacetate": 'O=C(OCC)C(Cl)=O',
+  "Ethyl Cyano(hydroxyimino)acetate": 'O=C(OCC)/C(C#N)=N/O',
+  "Ethylamine": 'NCC',
+  "Ethylamine Hydrochloride": 'NCC.[H]Cl',
+  "Ethylboronic Acid": 'CCB(O)O',
+  "Ethyldiphenylphosphine": 'CCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Ethylene diamine": 'NCCN',
+  "Ethylenediaminetetraacetic Acid": 'O=C(CN(CCN(CC(O)=O)CC(O)=O)CC(O)=O)O',
+  "Ethylenedithiobis(trimethylsilane)": 'C[Si](C)(C)SCCS[Si](C)(C)C',
+  "Ethyllithium": '[Li]CC',
+  "Ethylmagnesium Bromide": 'Br[Mg]CC',
+  "Ethylmagnesium Chloride": 'Cl[Mg]CC',
+  "Ethyltrimethylammonium Iodide": 'C[N+](C)(CC)C.[I-]',
+  "Europium": '[Eu]',
   "Fluoro-N,N,N',N'-tetramethylformamidinium Hexafluorophosphate": 'C[N+](C)=C(F)N(C)C.F[P-](F)(F)(F)(F)F',
-  'Folic Acid Hydrate': 'O=C(O)C(NC(C1=CC=C(NCC2=NC3=C(N=C2)N=C(N)NC3=O)C=C1)=O)CCC(O)=O.[H]O[H]',
-  'Formic acid': 'O=CO',
-  'Fumaric Acid': 'O=C(O)/C=C/C(O)=O',
-  'Gallic Acid Hydrate': 'OC1=CC(C(O)=O)=CC(O)=C1O.[H]O[H]',
-  'Glycolic Acid': 'OCC(O)=O',
-  Gold: '[Au]',
-  'Gold hydroxide': '[Au+3].[OH-].[OH-].[OH-]',
-  Hafnium: '[Hf]',
-  'Hafnium(IV) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Hf+4]',
-  'Heptafluorobutyric Anhydride': 'O=C(OC(C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)F',
-  'Heptafluorobutyryl Chloride': 'O=C(Cl)C(F)(F)C(F)(F)C(F)(F)F',
-  'Heptylmagnesium Bromide': 'Br[Mg]CCCCCCC',
-  Hexachlorodisilane: 'Cl[Si](Cl)(Cl)[Si](Cl)(Cl)Cl',
-  Hexadecamethylcyclooctasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Hexadecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCCCCCC)OC',
-  'Hexadecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Br-]',
-  'Hexadecyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Cl-]',
-  'Hexadecyltrimethylammonium hydroxide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
-  'Hexadecyltrimethylammonium Hydroxide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
-  Hexafluoroacetylacetone: 'O=C(C(F)(F)C(CF)=O)C(F)(F)F',
-  'Hexamethonium hydroxide': 'C[N+](CCCCCC[N+](C)(C)C)(C)C.[OH-].[OH-]',
-  Hexamethylbenzene: 'CC1=C(C)C(C)=C(C)C(C)=C1C',
-  Hexamethylcyclotrisiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Hexamethyldisilane: 'C[Si](C)(C)[Si](C)(C)C',
-  Hexamethyldisiloxane: 'C[Si](C)(C)O[Si](C)(C)C',
-  Hexamethylditin: 'C[Sn](C)(C)[Sn](C)(C)C',
-  Hexamethylenetetramine: 'N12CN3CN(C2)CN(C3)C1',
-  Hexaphenylcyclotrisiloxane: 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O2)=CC=CC=C1',
-  Hexaphenyldisilane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
-  Hexaphenyldisiloxane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
-  'Hexylboronic Acid': 'CCCCCCB(O)O',
-  Hexyllithium: '[Li]CCCCCC',
-  'Hexylmagnesium Bromide': 'Br[Mg]CCCCCC',
-  Hexyltriethoxysilane: 'CCO[Si](OCC)(CCCCCC)OCC',
-  Hexyltrimethoxysilane: 'CO[Si](OC)(CCCCCC)OC',
-  'Hexyltrimethylammonium Bromide': 'C[N+](C)(CCCCCC)C.[Br-]',
-  'Hydriodic Acid': '[H]I',
-  HI: '[H]I',
-  'Hydrochloric Acid': '[H]Cl',
-  HCl: '[H]Cl',
-  'Hydrogen Bromide': '[H]Br',
-  'Hydrogen Chloride': '[H]Cl',
-  'Hydrogen peroxide': '[H]OO[H]',
-  H2O2: '[H]OO[H]',
-  'Hydroquinidine Hydrochloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)CC)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl',
-  'Hydroxylamine-O-sulfonic Acid': 'NOS(O)(=O)=O',
-  'I0801 (S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine (ca. 6% in Toluene, ca. 0.1mol/L)': 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
-  'IF5-Pyridine-HF': '[H]F.FI(F)(F)(F)F.C1=CN=CC=C1',
-  Imidazole: 'C1=NC=CN1',
-  'Imidazolium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=[NH+]C=CN1.C2=[NH+]C=CN2',
-  Indan: 'C12=C(CCC2)C=CC=C1',
-  Indene: 'C12=C(CC=C2)C=CC=C1',
-  'INDIUM HYDROXIDE': '[In+3].[OH-].[OH-].[OH-]',
-  Indoline: 'C12=C(NCC2)C=CC=C1',
-  Iodine: 'II',
-  'Iodobenzene Diacetate': 'IC1=CC=CC=C1.CC(O)=O.CC(O)=O',
-  'Iodomesitylene Diacetate': 'CC1=C(I)C(C)=CC(C)=C1.CC(O)=O.CC(O)=O',
-  Iodosodilactone: 'O=C1OI2C3=C1C=CC=C3C(O2)=O',
-  Iridium: '[Ir]',
-  'Iridium(III) Chloride Hydrate': '[H]O[H].[Ir+3].[Cl-].[Cl-].[Cl-]',
-  Iron: '[Fe]',
-  Fe: '[Fe]',
-  'Iron hydroxide': '[Fe+3].[OH-].[OH-].[OH-]',
-  FeOH: '[Fe+3].[OH-].[OH-].[OH-]',
-  'Iron(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Fe+2]',
-  'Iron(III) Chloride': '[Fe+3].[Cl-].[Cl-].[Cl-]',
-  FeCl3: '[Fe+3].[Cl-].[Cl-].[Cl-]',
+  "Folic Acid Hydrate": 'O=C(O)C(NC(C1=CC=C(NCC2=NC3=C(N=C2)N=C(N)NC3=O)C=C1)=O)CCC(O)=O.[H]O[H]',
+  "Formic acid": 'O=CO',
+  "Fumaric Acid": 'O=C(O)/C=C/C(O)=O',
+  "Gallic Acid Hydrate": 'OC1=CC(C(O)=O)=CC(O)=C1O.[H]O[H]',
+  "Glycolic Acid": 'OCC(O)=O',
+  "Gold": '[Au]',
+  "Gold hydroxide": '[Au+3].[OH-].[OH-].[OH-]',
+  "Hafnium": '[Hf]',
+  "Hafnium(IV) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Hf+4]',
+  "Heptafluorobutyric Anhydride": 'O=C(OC(C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)F',
+  "Heptafluorobutyryl Chloride": 'O=C(Cl)C(F)(F)C(F)(F)C(F)(F)F',
+  "Heptylmagnesium Bromide": 'Br[Mg]CCCCCCC',
+  "Hexachlorodisilane": 'Cl[Si](Cl)(Cl)[Si](Cl)(Cl)Cl',
+  "Hexadecamethylcyclooctasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Hexadecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCCCCCC)OC',
+  "Hexadecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Br-]',
+  "Hexadecyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Cl-]',
+  "Hexadecyltrimethylammonium hydroxide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
+  "Hexadecyltrimethylammonium Hydroxide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
+  "Hexafluoroacetylacetone": 'O=C(C(F)(F)C(CF)=O)C(F)(F)F',
+  "Hexamethonium hydroxide": 'C[N+](CCCCCC[N+](C)(C)C)(C)C.[OH-].[OH-]',
+  "Hexamethylbenzene": 'CC1=C(C)C(C)=C(C)C(C)=C1C',
+  "Hexamethylcyclotrisiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Hexamethyldisilane": 'C[Si](C)(C)[Si](C)(C)C',
+  "Hexamethyldisiloxane": 'C[Si](C)(C)O[Si](C)(C)C',
+  "Hexamethylditin": 'C[Sn](C)(C)[Sn](C)(C)C',
+  "Hexamethylenetetramine": 'N12CN3CN(C2)CN(C3)C1',
+  "Hexaphenylcyclotrisiloxane": 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O2)=CC=CC=C1',
+  "Hexaphenyldisilane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
+  "Hexaphenyldisiloxane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
+  "Hexylboronic Acid": 'CCCCCCB(O)O',
+  "Hexyllithium": '[Li]CCCCCC',
+  "Hexylmagnesium Bromide": 'Br[Mg]CCCCCC',
+  "Hexyltriethoxysilane": 'CCO[Si](OCC)(CCCCCC)OCC',
+  "Hexyltrimethoxysilane": 'CO[Si](OC)(CCCCCC)OC',
+  "Hexyltrimethylammonium Bromide": 'C[N+](C)(CCCCCC)C.[Br-]',
+  "Hydriodic Acid": '[H]I',
+  "HI": '[H]I',
+  "Hydrochloric Acid": '[H]Cl',
+  "HCl": '[H]Cl',
+  "Hydrogen Bromide": '[H]Br',
+  "Hydrogen Chloride": '[H]Cl',
+  "Hydrogen peroxide": '[H]OO[H]',
+  "H2O2": '[H]OO[H]',
+  "Hydroquinidine Hydrochloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)CC)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl',
+  "Hydroxylamine-O-sulfonic Acid": 'NOS(O)(=O)=O',
+  "I0801 (S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine (ca. 6% in Toluene, ca. 0.1mol/L)": 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
+  "IF5-Pyridine-HF": '[H]F.FI(F)(F)(F)F.C1=CN=CC=C1',
+  "Imidazole": 'C1=NC=CN1',
+  "Imidazolium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=[NH+]C=CN1.C2=[NH+]C=CN2',
+  "Indan": 'C12=C(CCC2)C=CC=C1',
+  "Indene": 'C12=C(CC=C2)C=CC=C1',
+  "INDIUM HYDROXIDE": '[In+3].[OH-].[OH-].[OH-]',
+  "Indoline": 'C12=C(NCC2)C=CC=C1',
+  "Iodine": 'II',
+  "Iodobenzene Diacetate": 'IC1=CC=CC=C1.CC(O)=O.CC(O)=O',
+  "Iodomesitylene Diacetate": 'CC1=C(I)C(C)=CC(C)=C1.CC(O)=O.CC(O)=O',
+  "Iodosodilactone": 'O=C1OI2C3=C1C=CC=C3C(O2)=O',
+  "Iridium": '[Ir]',
+  "Iridium(III) Chloride Hydrate": '[H]O[H].[Ir+3].[Cl-].[Cl-].[Cl-]',
+  "Iron": '[Fe]',
+  "Fe": '[Fe]',
+  "Iron hydroxide": '[Fe+3].[OH-].[OH-].[OH-]',
+  "FeOH": '[Fe+3].[OH-].[OH-].[OH-]',
+  "Iron(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Fe+2]',
+  "Iron(III) Chloride": '[Fe+3].[Cl-].[Cl-].[Cl-]',
+  "FeCl3": '[Fe+3].[Cl-].[Cl-].[Cl-]',
   "Ishikawa's Reagent": 'FC(N(CC)CC)(C(C(F)(F)F)F)F',
-  'Isobutylboronic Acid': 'CC(C)CB(O)O',
-  Isobutyllithium: '[Li]CC(C)C',
-  'Isobutylmagnesium Bromide': 'Br[Mg]CC(C)C',
-  isopropanpol: 'CC(O)C',
-  iPr: 'CC(O)C',
-  'Isopropenyloxytris(trimethylsilyl)silane': 'C[Si]([Si]([Si](C)(C)C)(OC(C)=C)[Si](C)(C)C)(C)C',
-  'isopropyl alcohol': 'CC(O)C',
-  'Isopropylboronic Acid': 'CC(B(O)O)C',
-  Isopropyldiphenylphosphine: 'CC(P(C1=CC=CC=C1)C2=CC=CC=C2)C',
-  Isopropyllithium: '[Li]C(C)C',
-  'Isopropylmagnesium Bromide': 'Br[Mg]C(C)C',
-  'Isopropylmagnesium Chloride': 'Cl[Mg]C(C)C',
-  'Isopropylmagnesium Chloride - Lithium Chloride': 'Cl[Mg]C(C)C.[Li+].[Cl-]',
-  'Isopropylmagnesium chloride lithium chloride complex': '[Mg+]C(C)C.[Li+].[Cl-].[Cl-]',
-  'L-(-)-Threonine': 'N[C@@H]([C@H](O)C)C(O)=O',
-  'L-(+)-Leucinol': 'N[C@@H](CC(C)C)CO',
-  'L-(+)-Tartaric Acid': 'O[C@H]([C@H](C(O)=O)O)C(O)=O',
-  'L-Alanine': 'N[C@@H](C)C(O)=O',
-  Lanthanum: '[La]',
-  'LANTHANUM HYDROXIDE': '[La+3].[OH-].[OH-].[OH-]',
-  'Lanthanum(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[La+3]',
-  'L-Ascorbic Acid': 'OC([C@H](O1)[C@H](CO)O)=C(O)C1=O',
-  'L-Azetidine-2-carboxylic Acid': 'O=C(C1NCC1)O',
-  'LEAD HYDROXIDE': '[Pb+2].[OH-].[OH-]',
-  'Lead Tetraacetate': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
-  'Pb(OAc)4': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
-  'Lead(II) Iodide': '[Pb+2].[I-].[I-]',
-  'Lithium (E)-4-oxopent-2-en-2-olate': 'C/C([O-])=C\\C(C)=O.[Li+]',
-  'Lithium 2,2,6,6-tetramethylpiperidide': 'CC1(C)CCCC(C)(C)[N-]1.[Li+]',
-  'Lithium Acetylide Ethylenediamine Complex': 'NCCN.[C-]#[C-].[Li+].[Li+]',
-  'Lithium Aluminum Hydride': '[Li+].[Al+3].[H-].[H-].[H-].[H-]',
-  'Lithium amide': '[Li+].[NH2-]',
-  'Lithium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[Li+]',
-  'Lithium Borohydride': '[Li+].[BH4-]',
-  LiBH4: '[Li+].[BH4-]',
-  'lithium bromid': '[Li+].[Br-]',
-  LiBr: '[Li+].[Br-]',
-  'lithium chloride': '[Li+].[Cl-]',
-  LiCl: '[Li+].[Cl-]',
-  'Lithium dicyclohexylamide': 'C1([N-]C2CCCCC2)CCCCC1.[Li+]',
-  'Lithium diethylamide': 'CC[N-]CC.[Li+]',
-  'Lithium Diisopropylamide': 'CC([N-]C(C)C)C.[Li+]',
-  LDA: 'CC([N-]C(C)C)C.[Li+]',
-  'Lithium dimethylamide': 'C[N-]C.[Li+]',
-  'Lithium Diphenylphosphide (ca. 0.5mol/L in Tetrahydrofuran)': 'C1([P-]C2=CC=CC=C2)=CC=CC=C1.[Li+]',
-  'Lithium ethoxide': 'CC[O-].[Li+]',
-  'Lithium hydroxide': '[Li+].[OH-]',
-  LiOH: '[Li+].[OH-]',
-  'Lithium isopropoxide': 'CC([O-])C.[Li+]',
-  'Lithium methoxide': 'C[O-].[Li+]',
-  LiOMe: 'C[O-].[Li+]',
-  'Lithium peroxide': '[O-][O-].[Li+].[Li+]',
-  'lithium tetrafluoroborate': 'F[B-](F)(F)F.[Li+]',
-  LiBF4: 'F[B-](F)(F)F.[Li+]',
-  'Lithium Triethylborohydride': 'CC[BH-](CC)CC.[Li+]',
-  'Lithium triisobutyl(2,2,6,6 tetramethylpiperdino)aluminate': 'CC1(C)CCCC(C)(C)N1[Al-](CC(C)C)(CC(C)C)CC(C)C.[Li+]',
-  'Lithium trimethylsilanolate': '[O-][Si](C)(C)C.[Li+]',
-  'Lithium Tri-tert-butoxyaluminum Hydride': 'CC(O[Al](OC(C)(C)C)OC(C)(C)C)(C)C.[Li+].[H-]',
-  'Lithium tert-butoxide': 'CC(C)([O-])C.[Li+]',
-  'Lithium tert-Butoxide': 'CC(C)([O-])C.[Li+]',
-  'L-Lactic Acid': 'OC(C)C(O)=O',
-  'L-Methionine': 'N[C@@H](CCSC)C(O)=O',
-  'L-Phenylalanine': 'N[C@@H](CC1=CC=CC=C1)C(O)=O',
-  'L-Pipecolic Acid': 'O=C(O)C1CCCCN1',
-  'L-Prolinamide': 'O=C(N)[C@H]1NCCC1',
-  'L-Prolinanilide': 'O=C(NC1=CC=CC=C1)[C@H]2NCCC2',
-  'L-Proline': 'O=C(O)[C@H]1NCCC1',
-  'L-Thioproline': 'O=C(O)[C@H]1NCCC1=S',
-  'L-Tryptophan': 'N[C@@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
-  'Magnesium bis(diisopropyl)amide': 'CC([N-]C(C)C)C.CC([N-]C(C)C)C.[Mg+2]',
-  'Magnesium bis(hexamethyldisilazide)': 'C[Si](C)(C)[N-][Si](C)(C)C.C[Si](C)(C)[N-][Si](C)(C)C.[Mg+2]',
-  'magnesium bromide': '[Mg+2].[Br-].[Br-]',
-  MgBr2: '[Mg+2].[Br-].[Br-]',
-  'magnesium carbonate': '[O-]C([O-])=O.[Mg+2]',
-  MgCO3: '[O-]C([O-])=O.[Mg+2]',
-  'magnesium chloride': '[Mg+2].[Cl-].[Cl-]',
-  MgCl2: '[Mg+2].[Cl-].[Cl-]',
-  'Magnesium di-tert-butoxide': 'CC(C)([O-])C.CC(C)([O-])C.[Mg+2]',
-  'Magnesium ethoxide': 'CC[O-].CC[O-].[Mg+2]',
-  'Mg(OEt)2': 'CC[O-].CC[O-].[Mg+2]',
-  'MAGNESIUM HYDROXIDE': '[Mg+2].[OH-].[OH-]',
-  'Mg(OH)2': '[Mg+2].[OH-].[OH-]',
-  'magnesium iodide': '[Mg+2].[I-].[I-]',
-  MgI2: '[Mg+2].[I-].[I-]',
-  'Magnesium methoxide': 'C[O-].C[O-].[Mg+2]',
-  'Mg(OMe)2': 'C[O-].C[O-].[Mg+2]',
-  'magnesium permanganate': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
-  'Mg(MnO4)2': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
-  'Magnesium permanganate hydrate': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[H]O[H].[Mg+2]',
-  'Magnesium peroxide': '[O-][O-].[Mg+2]',
-  'magnesium sulfate': 'O=S([O-])([O-])=O.[Mg+2]',
-  MgSO4: 'O=S([O-])([O-])=O.[Mg+2]',
-  'Maleic Acid': 'O=C(O)/C=C\\C(O)=O',
-  'Malonic Acid': 'O=C(O)CC(O)=O',
-  Manganese: '[Mn]',
-  'manganese molybdate': 'O=[Mo]([O-])([O-])=O.[Mn+2]',
-  'manganese perchlorate': 'O=Cl(=O)([O-])=O.O=Cl(=O)([O-])=O.[Mn+2]',
-  'manganese sulfate': 'O=S([O-])([O-])=O.[Mn+2]',
-  MnSO4: 'O=S([O-])([O-])=O.[Mn+2]',
-  'Manganese(II) Bis(trifluoromethanesulfonyl)imide': 'FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.[Mn+2]',
-  'Manganese(II) Chloride Tetrahydrate': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mn+2].[Cl-].[Cl-]',
-  'meso-Tetraphenylchlorin': 'C1(C2=CC=CC=C2)=C(N3)CCC3=C(C4=CC=CC=C4)C5=NC(C=C5)=C(C6=CC=CC=C6)C(N7)=CC=C7C(C8=CC=CC=C8)=C9CCC1=N9',
-  Methallyltrimethylsilane: 'C[Si](C)(CC(C)=C)C',
-  'Methanesulfonic Acid': 'CS(=O)(O)=O',
-  methanol: 'CO',
-  MeOH: 'CO',
-  'Methoxydimethyl(phenyl)silane': 'C[Si](C)(OC)C1=CC=CC=C1',
-  Methoxydiphenylphosphine: 'COP(C1=CC=CC=C1)C2=CC=CC=C2',
-  'Methoxymethyl(diphenyl)phosphine Oxide': 'COCP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
-  Methoxymethyltrimethylsilane: 'C[Si](C)(COC)C',
-  Methoxytrimethylsilane: 'C[Si](C)(OC)C',
+  "Isobutylboronic Acid": 'CC(C)CB(O)O',
+  "Isobutyllithium": '[Li]CC(C)C',
+  "Isobutylmagnesium Bromide": 'Br[Mg]CC(C)C',
+  "isopropanpol": 'CC(O)C',
+  "iPr": 'CC(O)C',
+  "Isopropenyloxytris(trimethylsilyl)silane": 'C[Si]([Si]([Si](C)(C)C)(OC(C)=C)[Si](C)(C)C)(C)C',
+  "isopropyl alcohol": 'CC(O)C',
+  "Isopropylboronic Acid": 'CC(B(O)O)C',
+  "Isopropyldiphenylphosphine": 'CC(P(C1=CC=CC=C1)C2=CC=CC=C2)C',
+  "Isopropyllithium": '[Li]C(C)C',
+  "Isopropylmagnesium Bromide": 'Br[Mg]C(C)C',
+  "Isopropylmagnesium Chloride": 'Cl[Mg]C(C)C',
+  "Isopropylmagnesium Chloride - Lithium Chloride": 'Cl[Mg]C(C)C.[Li+].[Cl-]',
+  "Isopropylmagnesium chloride lithium chloride complex": '[Mg+]C(C)C.[Li+].[Cl-].[Cl-]',
+  "L-(-)-Threonine": 'N[C@@H]([C@H](O)C)C(O)=O',
+  "L-(+)-Leucinol": 'N[C@@H](CC(C)C)CO',
+  "L-(+)-Tartaric Acid": 'O[C@H]([C@H](C(O)=O)O)C(O)=O',
+  "L-Alanine": 'N[C@@H](C)C(O)=O',
+  "Lanthanum": '[La]',
+  "LANTHANUM HYDROXIDE": '[La+3].[OH-].[OH-].[OH-]',
+  "Lanthanum(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[La+3]',
+  "L-Ascorbic Acid": 'OC([C@H](O1)[C@H](CO)O)=C(O)C1=O',
+  "L-Azetidine-2-carboxylic Acid": 'O=C(C1NCC1)O',
+  "LEAD HYDROXIDE": '[Pb+2].[OH-].[OH-]',
+  "Lead Tetraacetate": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
+  "Pb(OAc)4": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
+  "Lead(II) Iodide": '[Pb+2].[I-].[I-]',
+  "Lithium (E)-4-oxopent-2-en-2-olate": 'C/C([O-])=C\\C(C)=O.[Li+]',
+  "Lithium 2,2,6,6-tetramethylpiperidide": 'CC1(C)CCCC(C)(C)[N-]1.[Li+]',
+  "Lithium Acetylide Ethylenediamine Complex": 'NCCN.[C-]#[C-].[Li+].[Li+]',
+  "Lithium Aluminium Hydride": '[Li+].[AlH4-]',
+  "Lithium Amide": '[Li+].[NH2-]',
+  "Lithium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[Li+]',
+  "Lithium Borohydride": '[Li+].[BH4-]',
+  "LiBH4": '[Li+].[BH4-]',
+  "lithium bromid": '[Li+].[Br-]',
+  "LiBr": '[Li+].[Br-]',
+  "lithium chloride": '[Li+].[Cl-]',
+  "LiCl": '[Li+].[Cl-]',
+  "Lithium dicyclohexylamide": 'C1([N-]C2CCCCC2)CCCCC1.[Li+]',
+  "Lithium diethylamide": 'CC[N-]CC.[Li+]',
+  "Lithium Diisopropylamide": 'CC([N-]C(C)C)C.[Li+]',
+  "LDA": 'CC([N-]C(C)C)C.[Li+]',
+  "Lithium dimethylamide": 'C[N-]C.[Li+]',
+  "Lithium Diphenylphosphide (ca. 0.5mol/L in Tetrahydrofuran)": 'C1([P-]C2=CC=CC=C2)=CC=CC=C1.[Li+]',
+  "Lithium ethoxide": 'CC[O-].[Li+]',
+  "Lithium hydroxide": '[Li+].[OH-]',
+  "LiOH": '[Li+].[OH-]',
+  "Lithium isopropoxide": 'CC([O-])C.[Li+]',
+  "Lithium methoxide": 'C[O-].[Li+]',
+  "LiOMe": 'C[O-].[Li+]',
+  "Lithium peroxide": '[O-][O-].[Li+].[Li+]',
+  "lithium tetrafluoroborate": 'F[B-](F)(F)F.[Li+]',
+  "LiBF4": 'F[B-](F)(F)F.[Li+]',
+  "Lithium Triethylborohydride": 'CC[BH-](CC)CC.[Li+]',
+  "Lithium triisobutyl(2,2,6,6 tetramethylpiperdino)aluminate": 'CC1(C)CCCC(C)(C)N1[Al-](CC(C)C)(CC(C)C)CC(C)C.[Li+]',
+  "Lithium trimethylsilanolate": '[O-][Si](C)(C)C.[Li+]',
+  "Lithium Tri-tert-butoxyaluminum Hydride": 'CC(O[Al](OC(C)(C)C)OC(C)(C)C)(C)C.[Li+].[H-]',
+  "Lithium tert-butoxide": 'CC(C)([O-])C.[Li+]',
+  "Lithium tert-Butoxide": 'CC(C)([O-])C.[Li+]',
+  "L-Lactic Acid": 'OC(C)C(O)=O',
+  "L-Methionine": 'N[C@@H](CCSC)C(O)=O',
+  "L-Phenylalanine": 'N[C@@H](CC1=CC=CC=C1)C(O)=O',
+  "L-Pipecolic Acid": 'O=C(O)C1CCCCN1',
+  "L-Prolinamide": 'O=C(N)[C@H]1NCCC1',
+  "L-Prolinanilide": 'O=C(NC1=CC=CC=C1)[C@H]2NCCC2',
+  "L-Proline": 'O=C(O)[C@H]1NCCC1',
+  "L-Thioproline": 'O=C(O)[C@H]1NCCC1=S',
+  "L-Tryptophan": 'N[C@@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
+  "Magnesium bis(diisopropyl)amide": 'CC([N-]C(C)C)C.CC([N-]C(C)C)C.[Mg+2]',
+  "Magnesium bis(hexamethyldisilazide)": 'C[Si](C)(C)[N-][Si](C)(C)C.C[Si](C)(C)[N-][Si](C)(C)C.[Mg+2]',
+  "magnesium bromide": '[Mg+2].[Br-].[Br-]',
+  "MgBr2": '[Mg+2].[Br-].[Br-]',
+  "magnesium carbonate": '[O-]C([O-])=O.[Mg+2]',
+  "MgCO3": '[O-]C([O-])=O.[Mg+2]',
+  "magnesium chloride": '[Mg+2].[Cl-].[Cl-]',
+  "MgCl2": '[Mg+2].[Cl-].[Cl-]',
+  "Magnesium di-tert-butoxide": 'CC(C)([O-])C.CC(C)([O-])C.[Mg+2]',
+  "Magnesium ethoxide": 'CC[O-].CC[O-].[Mg+2]',
+  "Mg(OEt)2": 'CC[O-].CC[O-].[Mg+2]',
+  "MAGNESIUM HYDROXIDE": '[Mg+2].[OH-].[OH-]',
+  "Mg(OH)2": '[Mg+2].[OH-].[OH-]',
+  "magnesium iodide": '[Mg+2].[I-].[I-]',
+  "MgI2": '[Mg+2].[I-].[I-]',
+  "Magnesium methoxide": 'C[O-].C[O-].[Mg+2]',
+  "Mg(OMe)2": 'C[O-].C[O-].[Mg+2]',
+  "magnesium permanganate": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
+  "Mg(MnO4)2": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
+  "Magnesium permanganate hydrate": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[H]O[H].[Mg+2]',
+  "Magnesium peroxide": '[O-][O-].[Mg+2]',
+  "magnesium sulfate": 'O=S([O-])([O-])=O.[Mg+2]',
+  "MgSO4": 'O=S([O-])([O-])=O.[Mg+2]',
+  "Maleic Acid": 'O=C(O)/C=C\\C(O)=O',
+  "Malonic Acid": 'O=C(O)CC(O)=O',
+  "Manganese": '[Mn]',
+  "manganese molybdate": 'O=[Mo]([O-])([O-])=O.[Mn+2]',
+  "manganese perchlorate": 'O=Cl(=O)([O-])=O.O=Cl(=O)([O-])=O.[Mn+2]',
+  "manganese sulfate": 'O=S([O-])([O-])=O.[Mn+2]',
+  "MnSO4": 'O=S([O-])([O-])=O.[Mn+2]',
+  "Manganese(II) Bis(trifluoromethanesulfonyl)imide": 'FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.[Mn+2]',
+  "Manganese(II) Chloride Tetrahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mn+2].[Cl-].[Cl-]',
+  "meso-Tetraphenylchlorin": 'C1(C2=CC=CC=C2)=C(N3)CCC3=C(C4=CC=CC=C4)C5=NC(C=C5)=C(C6=CC=CC=C6)C(N7)=CC=C7C(C8=CC=CC=C8)=C9CCC1=N9',
+  "Methallyltrimethylsilane": 'C[Si](C)(CC(C)=C)C',
+  "Methanesulfonic Acid": 'CS(=O)(O)=O',
+  "methanol": 'CO',
+  "MeOH": 'CO',
+  "Methoxydimethyl(phenyl)silane": 'C[Si](C)(OC)C1=CC=CC=C1',
+  "Methoxydiphenylphosphine": 'COP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Methoxymethyl(diphenyl)phosphine Oxide": 'COCP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
+  "Methoxymethyltrimethylsilane": 'C[Si](C)(COC)C',
+  "Methoxytrimethylsilane": 'C[Si](C)(OC)C',
   "Methyl 2,2':6',2''-Terpyridine-4'-carboxylate": 'O=C(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)OC',
-  'Methyl 3-(Trimethylsilyloxy)crotonate': 'C/C(O[Si](C)(C)C)=C/C(OC)=O',
-  'Methyl Chlorodifluoroacetate': 'O=C(OC)C(F)(Cl)F',
-  'Methyl Chloroglyoxylate': 'O=C(Cl)C(OC)=O',
-  'Methyl chlorooxoacetate': 'O=C(OC)C(Cl)=O',
-  'Methyl Difluoro(fluorosulfonyl)acetate': 'O=C(OC)C(F)(F)S(=O)(F)=O',
-  'Methyl(diphenyl)phosphine Oxide': 'CP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
-  Methylamine: 'NC',
-  'Methylboronic Acid': 'CB(O)O',
-  'Methyl-d3-magnesium iodide': '[2H]C([Mg]I)([2H])[2H]',
-  Methyldiphenylphosphine: 'CP(C1=CC=CC=C1)C2=CC=CC=C2',
-  Methyldiphenylsilane: 'C[SiH](C1=CC=CC=C1)C2=CC=CC=C2',
-  'methylene chloride': 'ClCCl',
-  'Methyllithium lithium bromide': '[Li]C.[Li+].[Br-]',
-  'Methylmagnesium Bromide': 'Br[Mg]C',
-  MeMgBr: 'Br[Mg]C',
-  'Methylmagnesium chloride': 'Cl[Mg]C',
-  MeMgCl: 'Cl[Mg]C',
-  'Methylmagnesium Iodide': 'I[Mg]C',
-  MeMgI: 'I[Mg]C',
-  'Methyltri-n-octylammonium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC',
-  'Methyltri-n-octylammonium Chloride': 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.[Cl-]',
-  'Methyltri-n-octylammonium Hydrogen Sulfate': 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.O=S(O)([O-])=O',
-  'Methyltriphenylarsonium Iodide': 'C[As+](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[I-]',
-  Molybdenum: '[Mo]',
-  'Monobutyltin Oxide': 'CCCC[SnH]=O',
-  'Monosodium Bromoisocyanurate Hydrate': 'BrC([N-]C(N1)=O)=NC1=O.[Na+]',
-  Morpholine: 'C1CNCCO1',
-  'Morpholinosulfur Trifluoride': 'FS(F)(F)N1CCOCC1',
-  'm-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=CC(C)=C1',
-  'N-(2-Pyridyl)bis(trifluoromethanesulfonimide)': 'O=S(N(C1=NC=CC=C1)S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  'N-(2-Thiophenesulfonyl)-L-prolinamide': 'O=C(NS(=O)(C1=CC=CS1)=O)[C@H]2NCCC2',
-  'N-(9-Deoxy-epi-cinchonidin-9-yl)picolinamide': 'O=C(N[C@H]([C@H]1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
-  'N-(9-Deoxy-epi-cinchonin-9-yl)picolinamide': 'O=C(N[C@@H](C1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
-  'N-(Trifluoromethylthio)phthalimide': 'O=C(N1SC(F)(F)F)C2=CC=CC=C2C1=O',
+  "Methyl 3-(Trimethylsilyloxy)crotonate": 'C/C(O[Si](C)(C)C)=C/C(OC)=O',
+  "Methyl Chlorodifluoroacetate": 'O=C(OC)C(F)(Cl)F',
+  "Methyl Chloroglyoxylate": 'O=C(Cl)C(OC)=O',
+  "Methyl chlorooxoacetate": 'O=C(OC)C(Cl)=O',
+  "Methyl Difluoro(fluorosulfonyl)acetate": 'O=C(OC)C(F)(F)S(=O)(F)=O',
+  "Methyl(diphenyl)phosphine Oxide": 'CP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
+  "Methylamine": 'NC',
+  "Methylboronic Acid": 'CB(O)O',
+  "Methyl-d3-magnesium iodide": '[2H]C([Mg]I)([2H])[2H]',
+  "Methyldiphenylphosphine": 'CP(C1=CC=CC=C1)C2=CC=CC=C2',
+  "Methyldiphenylsilane": 'C[SiH](C1=CC=CC=C1)C2=CC=CC=C2',
+  "methylene chloride": 'ClCCl',
+  "Methyllithium lithium bromide": '[Li]C.[Li+].[Br-]',
+  "Methylmagnesium Bromide": 'Br[Mg]C',
+  "MeMgBr": 'Br[Mg]C',
+  "Methylmagnesium chloride": 'Cl[Mg]C',
+  "MeMgCl": 'Cl[Mg]C',
+  "Methylmagnesium Iodide": 'I[Mg]C',
+  "MeMgI": 'I[Mg]C',
+  "Methyltri-n-octylammonium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC',
+  "Methyltri-n-octylammonium Chloride": 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.[Cl-]',
+  "Methyltri-n-octylammonium Hydrogen Sulfate": 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.O=S(O)([O-])=O',
+  "Methyltriphenylarsonium Iodide": 'C[As+](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[I-]',
+  "Molybdenum": '[Mo]',
+  "Monobutyltin Oxide": 'CCCC[SnH]=O',
+  "Monosodium Bromoisocyanurate Hydrate": 'BrC([N-]C(N1)=O)=NC1=O.[Na+]',
+  "Morpholine": 'C1CNCCO1',
+  "Morpholinosulfur Trifluoride": 'FS(F)(F)N1CCOCC1',
+  "m-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=CC(C)=C1',
+  "N-(2-Pyridyl)bis(trifluoromethanesulfonimide)": 'O=S(N(C1=NC=CC=C1)S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  "N-(2-Thiophenesulfonyl)-L-prolinamide": 'O=C(NS(=O)(C1=CC=CS1)=O)[C@H]2NCCC2',
+  "N-(9-Deoxy-epi-cinchonidin-9-yl)picolinamide": 'O=C(N[C@H]([C@H]1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
+  "N-(9-Deoxy-epi-cinchonin-9-yl)picolinamide": 'O=C(N[C@@H](C1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
+  "N-(Trifluoromethylthio)phthalimide": 'O=C(N1SC(F)(F)F)C2=CC=CC=C2C1=O',
   "N,N,N',N'-Tetraethylethylenediamine": 'CCN(CC)CCN(CC)CC',
   "N,N,N',N'-Tetrakis(2-pyridylmethyl)ethylenediamine": 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CCN(CC3=NC=CC=C3)CC4=NC=CC=C4',
   "N,N,N',N'-Tetramethyl-1,3-diaminopropane": 'CN(C)CCCN(C)C',
@@ -1516,86 +1516,86 @@ export const reagents_kombi = {
   "N,N'-Bis(salicylidene)-1,2-propanediamine": 'CC(/N=C/C1=CC=CC=C1O)C/N=C/C2=CC=CC=C2O',
   "N,N'-Bis(salicylidene)-1,3-propanediamine": 'OC1=CC=CC=C1/C=N/CCC/N=C/C2=CC=CC=C2O',
   "N,N'-Bis(salicylidene)ethylenediamine": 'OC1=CC=CC=C1/C=N/CC/N=C/C2=CC=CC=C2O',
-  'N,N-Dichloro-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N(Cl)Cl)=O)C=C1',
+  "N,N-Dichloro-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N(Cl)Cl)=O)C=C1',
   "N,N'-Dicyclohexyl-1,2-ethanediamine Hydrate": '[H]O[H].C1(NCCNC2CCCCC2)CCCCC1',
   "N,N'-Dicyclohexylcarbodiimide": 'C1(N=C=NC2CCCCC2)CCCCC1',
-  DCC: 'C1(N=C=NC2CCCCC2)CCCCC1',
-  'N,N-Diethylaniline Borane': 'CCN(CC)C1=CC=CC=C1.B',
+  "DCC": 'C1(N=C=NC2CCCCC2)CCCCC1',
+  "N,N-Diethylaniline Borane": 'CCN(CC)C1=CC=CC=C1.B',
   "N,N'-Diisopropylcarbodiimide": 'CC(N=C=NC(C)C)C',
-  DIC: 'CC(N=C=NC(C)C)C',
-  'N,N-Diisopropylethylamine': 'CCN(C(C)C)C(C)C',
-  DIPEA: 'CCN(C(C)C)C(C)C',
-  'N,N-Diisopropylmethylamine': 'CN(C(C)C)C(C)C',
+  "DIC": 'CC(N=C=NC(C)C)C',
+  "N,N-Diisopropylethylamine": 'CCN(C(C)C)C(C)C',
+  "DIPEA": 'CCN(C(C)C)C(C)C',
+  "N,N-Diisopropylmethylamine": 'CN(C(C)C)C(C)C',
   "N,N'-Dimethylethylenediamine": 'CNCCNC',
-  'N,N-Dimethyl-N-(methylsulfanylmethylene)ammonium Iodide': 'CSC=[N+](C)C.[I-]',
+  "N,N-Dimethyl-N-(methylsulfanylmethylene)ammonium Iodide": 'CSC=[N+](C)C.[I-]',
   "N,N'-Diphenylethylenediamine": 'C1(NCCNC2=CC=CC=C2)=CC=CC=C1',
   "N,N'-Di-tert-butylcarbodiimide": 'CC(N=C=NC(C)(C)C)(C)C',
   "N,N'-Di-tert-butylethylenediamine": 'CC(NCCNC(C)(C)C)(C)C',
   "N-[(11bS)-4,5-Dihydro-3H-dinaphtho[2,1-c:1',2'-e]azepin-2-yl]trifluoromethanesulfonamide": 'O=S(C(F)(F)F)(NC1=C2CNCC3=CC=C4C=CC=CC4=C3C2=C5C=CC=CC5=C1)=O',
-  'N-[(9S)-8α-Cinchonan-9-yl]quinoline-8-sulfonamide': 'O=S(C1=C2N=CC=CC2=CC=C1)(N[C@H]([C@@H]3C[C@H]4[C@H](C[N@@]3CC4)C=C)C5=CC=NC6=CC=CC=C56)=O',
-  'N-[2-(Trimethylsilyl)ethoxycarbonyloxy]succinimide': 'O=C(N1OC(OCC[Si](C)(C)C)=O)CCC1=O',
-  'N-Benzylcinchonidinium Chloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
-  'N-Benzylcinchoninium Chloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
-  'N-Benzylquinidinium Chloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
-  'N-Benzylquininium Chloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
-  'N-Bromoacetamide': 'CC(NBr)=O',
-  'N-Bromophthalimide': 'O=C(N1Br)C2=CC=CC=C2C1=O',
-  'N-Bromosaccharin': 'O=C1N(Br)S(=O)(C2=C1C=CC=C2)=O',
-  'N-Bromosuccinimide': 'O=C(N1Br)CCC1=O',
-  NBS: 'O=C(N1Br)CCC1=O',
-  'n-Butanol': 'CCCCO',
-  'n-Butyllithium solution': '[Li]CCCC',
-  BuLi: '[Li]CCCC',
-  'N-Chlorobenzenesulfonamide sodium salt': 'O=S(C1=CC=CC=C1)([N-]Cl)=O.[Na+]',
-  'N-Chlorophthalimide': 'O=C(N1Cl)C2=CC=CC=C2C1=O',
-  'N-Chlorosaccharin': 'O=C1N(Cl)S(=O)(C2=C1C=CC=C2)=O',
-  'N-Chlorosuccinimide': 'O=C(N1Cl)CCC1=O',
-  NCS: 'O=C(N1Cl)CCC1=O',
-  Neodymium: '[Nd]',
-  'NEODYMIUM HYDRATE': '[H]O[H].[Nd]',
-  'Neodymium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Nd+3]',
-  'N-Ethyldiisopropylamine': 'CC(N(CC)C(C)C)C',
-  'N-Fluorobenzenesulfonimide': 'FN(S(=O)(C1=CC=CC=C1)=O)S(=O)(C2=CC=CC=C2)=O',
+  "N-[(9S)-8α-Cinchonan-9-yl]quinoline-8-sulfonamide": 'O=S(C1=C2N=CC=CC2=CC=C1)(N[C@H]([C@@H]3C[C@H]4[C@H](C[N@@]3CC4)C=C)C5=CC=NC6=CC=CC=C56)=O',
+  "N-[2-(Trimethylsilyl)ethoxycarbonyloxy]succinimide": 'O=C(N1OC(OCC[Si](C)(C)C)=O)CCC1=O',
+  "N-Benzylcinchonidinium Chloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
+  "N-Benzylcinchoninium Chloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
+  "N-Benzylquinidinium Chloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
+  "N-Benzylquininium Chloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
+  "N-Bromoacetamide": 'CC(NBr)=O',
+  "N-Bromophthalimide": 'O=C(N1Br)C2=CC=CC=C2C1=O',
+  "N-Bromosaccharin": 'O=C1N(Br)S(=O)(C2=C1C=CC=C2)=O',
+  "N-Bromosuccinimide": 'O=C(N1Br)CCC1=O',
+  "NBS": 'O=C(N1Br)CCC1=O',
+  "n-Butanol": 'CCCCO',
+  "n-Butyllithium solution": '[Li]CCCC',
+  "BuLi": '[Li]CCCC',
+  "N-Chlorobenzenesulfonamide sodium salt": 'O=S(C1=CC=CC=C1)([N-]Cl)=O.[Na+]',
+  "N-Chlorophthalimide": 'O=C(N1Cl)C2=CC=CC=C2C1=O',
+  "N-Chlorosaccharin": 'O=C1N(Cl)S(=O)(C2=C1C=CC=C2)=O',
+  "N-Chlorosuccinimide": 'O=C(N1Cl)CCC1=O',
+  "NCS": 'O=C(N1Cl)CCC1=O',
+  "Neodymium": '[Nd]',
+  "NEODYMIUM HYDRATE": '[H]O[H].[Nd]',
+  "Neodymium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Nd+3]',
+  "N-Ethyldiisopropylamine": 'CC(N(CC)C(C)C)C',
+  "N-Fluorobenzenesulfonimide": 'FN(S(=O)(C1=CC=CC=C1)=O)S(=O)(C2=CC=CC=C2)=O',
   "N-Fluoro-N'-(chloromethyl)triethylenediamine Bis(tetrafluoroborate)": 'F[N+]1(CC2)CC[N+]2(CCl)CC1.F[B-](F)(F)F.F[B-](F)(F)F',
-  'n-hexane': 'CCCCCC',
-  'N-Hydroxy-5-norbornene-2,3-dicarboximide': 'O=C(C1C2C3C=CC1C3)N(O)C2=O',
-  'N-Hydroxyphthalimide': 'O=C(N1O)C2=CC=CC=C2C1=O',
-  'N-Hydroxysuccinimide': 'O=C(N1O)CCC1=O',
-  'N-Hydroxysulfosuccinimide Sodium': 'O=C(N1O)C(S(=O)([O-])=O)CC1=O.[Na+]',
-  'N-Hydroxytetrachlorophthalimide': 'O=C(N1O)C2=C(Cl)C(Cl)=C(Cl)C(Cl)=C2C1=O',
-  Nickel: '[Ni]',
-  'Nickel peroxide': '[O-][O-].[Ni+2]',
-  'Nickel(II) Benzenesulfonate Hexahydrate': 'O=S(C1=CC=CC=C1)([O-])=O.O=S(C2=CC=CC=C2)([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
-  'NICKEL(II) HYDROXIDE': '[Ni+2].[OH-].[OH-]',
-  'Nickel(II) peroxide hydrate ': '[O-][O-].[H]O[H].[Ni+2]',
-  'Nickel(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ni+2]',
-  'Nickel(II) p-Toluenesulfonate Hexahydrate': 'CC1=CC=C(S(=O)([O-])=O)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
-  'Niobium hydroxide oxide': '[Nb+5].[Nb+5].[Nb+5].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2]',
-  'N-Iodosaccharin': 'O=C1N(I)S(=O)(C2=C1C=CC=C2)=O',
-  'N-Iodosuccinimide': 'O=C(N1I)CCC1=O',
+  "n-hexane": 'CCCCCC',
+  "N-Hydroxy-5-norbornene-2,3-dicarboximide": 'O=C(C1C2C3C=CC1C3)N(O)C2=O',
+  "N-Hydroxyphthalimide": 'O=C(N1O)C2=CC=CC=C2C1=O',
+  "N-Hydroxysuccinimide": 'O=C(N1O)CCC1=O',
+  "N-Hydroxysulfosuccinimide Sodium": 'O=C(N1O)C(S(=O)([O-])=O)CC1=O.[Na+]',
+  "N-Hydroxytetrachlorophthalimide": 'O=C(N1O)C2=C(Cl)C(Cl)=C(Cl)C(Cl)=C2C1=O',
+  "Nickel": '[Ni]',
+  "Nickel peroxide": '[O-][O-].[Ni+2]',
+  "Nickel(II) Benzenesulfonate Hexahydrate": 'O=S(C1=CC=CC=C1)([O-])=O.O=S(C2=CC=CC=C2)([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
+  "NICKEL(II) HYDROXIDE": '[Ni+2].[OH-].[OH-]',
+  "Nickel(II) peroxide hydrate ": '[O-][O-].[H]O[H].[Ni+2]',
+  "Nickel(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ni+2]',
+  "Nickel(II) p-Toluenesulfonate Hexahydrate": 'CC1=CC=C(S(=O)([O-])=O)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
+  "Niobium hydroxide oxide": '[Nb+5].[Nb+5].[Nb+5].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2]',
+  "N-Iodosaccharin": 'O=C1N(I)S(=O)(C2=C1C=CC=C2)=O',
+  "N-Iodosuccinimide": 'O=C(N1I)CCC1=O',
   "N'-Isopropylidene-2-nitrobenzenesulfonohydrazide": 'O=S(C1=CC=CC=C1[N+]([O-])=O)(NN=C(C)C)=O',
-  'Nitric acid': 'O[N+]([O-])=O',
-  HNO3: 'O[N+]([O-])=O',
-  'Nitrilotriacetic Acid': 'O=C(O)CN(CC(O)=O)CC(O)=O',
-  nitromethane: 'C[N+]([O-])=O',
-  MeNO2: 'C[N+]([O-])=O',
-  'Nitrosyl tetrafluoroborate': 'F[B-](F)(F)(N=O)F',
-  'N-Methylbis(trifluoroacetamide)': 'O=C(C(F)(F)F)N(C)C(C(F)(F)F)=O',
-  'N-Methyl-N-(trifluoromethylthio)aniline': 'FC(F)(F)SN(C)C1=CC=CC=C1',
-  'n-octanol': 'CCCCCCCCO',
-  'n-Octyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCCCCCCCC)=O)C=C1',
-  'n-Octylboronic Acid': 'CCCCCCCCB(O)O',
-  'n-Octylmagnesium Bromide': 'Br[Mg]CCCCCCCC',
-  'n-Octyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCC)C.[Br-]',
-  'n-Octyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCC)C.[Cl-]',
-  'Norbornadiene Rhodium(I) Chloride': 'C12C=CC(C2)C=C1.[Rh+].[Cl-]',
-  'N-Phenylbis(trifluoromethanesulfonimide)': 'O=S(N(S(=O)(C(F)(F)F)=O)C1=CC=CC=C1)(C(F)(F)F)=O',
-  'n-propanol': 'CCCO',
-  'N-Salicylideneaniline': 'OC1=CC=CC=C1/C=N/C2=CC=CC=C2',
-  'N-tert-Butyl-5-methylisoxazolium Perchlorate': 'CC1=CC=[N+](C(C)(C)C)O1.O=Cl(=O)([O-])=O',
-  'N-tert-Butylbenzenesulfenamide': 'CC(NSC1=CC=CC=C1)(C)C',
-  'N-tert-Butylbenzenesulfinimidoyl Chloride': 'CC(/N=S(Cl)/C1=CC=CC=C1)(C)C',
-  'N-Trimethylsilylimidazole': 'C[Si](N1C=NC=C1)(C)C',
+  "Nitric acid": 'O[N+]([O-])=O',
+  "HNO3": 'O[N+]([O-])=O',
+  "Nitrilotriacetic Acid": 'O=C(O)CN(CC(O)=O)CC(O)=O',
+  "nitromethane": 'C[N+]([O-])=O',
+  "MeNO2": 'C[N+]([O-])=O',
+  "Nitrosyl tetrafluoroborate": 'F[B-](F)(F)(N=O)F',
+  "N-Methylbis(trifluoroacetamide)": 'O=C(C(F)(F)F)N(C)C(C(F)(F)F)=O',
+  "N-Methyl-N-(trifluoromethylthio)aniline": 'FC(F)(F)SN(C)C1=CC=CC=C1',
+  "n-octanol": 'CCCCCCCCO',
+  "n-Octyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCCCCCCCC)=O)C=C1',
+  "n-Octylboronic Acid": 'CCCCCCCCB(O)O',
+  "n-Octylmagnesium Bromide": 'Br[Mg]CCCCCCCC',
+  "n-Octyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCC)C.[Br-]',
+  "n-Octyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCC)C.[Cl-]',
+  "Norbornadiene Rhodium(I) Chloride": 'C12C=CC(C2)C=C1.[Rh+].[Cl-]',
+  "N-Phenylbis(trifluoromethanesulfonimide)": 'O=S(N(S(=O)(C(F)(F)F)=O)C1=CC=CC=C1)(C(F)(F)F)=O',
+  "n-propanol": 'CCCO',
+  "N-Salicylideneaniline": 'OC1=CC=CC=C1/C=N/C2=CC=CC=C2',
+  "N-tert-Butyl-5-methylisoxazolium Perchlorate": 'CC1=CC=[N+](C(C)(C)C)O1.O=Cl(=O)([O-])=O',
+  "N-tert-Butylbenzenesulfenamide": 'CC(NSC1=CC=CC=C1)(C)C',
+  "N-tert-Butylbenzenesulfinimidoyl Chloride": 'CC(/N=S(Cl)/C1=CC=CC=C1)(C)C',
+  "N-Trimethylsilylimidazole": 'C[Si](N1C=NC=C1)(C)C',
   "O-(3,4-Dihydro-4-oxo-1,2,3-benzotriazin-3-yl)-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=CC=C2C1=O.F[B-](F)(F)F',
   "O-(6-Chlorobenzotriazol-1-yl)-N,N,N',N'-tetramethyluronium Hexafluorophosphate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=C(Cl)C=C21.F[P-](F)(F)(F)(F)F',
   "O-(6-Chlorobenzotriazol-1-yl)-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=C(Cl)C=C21.F[B-](F)(F)F',
@@ -1608,654 +1608,652 @@ export const reagents_kombi = {
   "O-[(Ethoxycarbonyl)cyanomethylenamino]-N,N,N',N'-tetramethyluronium Hexafluorophosphate": 'CN(C)C(N(C)C)=[O+]/N=C(C(OCC)=O)\\C#N.F[P-](F)(F)(F)(F)F',
   "O-[(Ethoxycarbonyl)cyanomethylenamino]-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]/N=C(C(OCC)=O)\\C#N.F[B-](F)(F)F',
   "O-[2-Oxo-1(2H)-pyridyl]-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1C=CC=CC1=O.F[B-](F)(F)F',
-  'o-Chloramine T': 'CC1=CC=CC=C1S([N-]Cl)(=O)=O.[Na+]',
-  Octadecamethylcyclononasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Octadecyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCCCCCCCCCC)OCC',
-  Octadecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCCCCCCCC)OC',
-  'Octakis(dimethylsilyloxy)octasilsesquioxane': 'C[SiH](C)O[Si]1(O[Si]2(O[SiH](C)C)O[Si](O3)(O[SiH](C)C)O[Si](O4)(O[SiH](C)C)O[Si]5(O[SiH](C)C)O2)O[Si]3(O[SiH](C)C)O[Si]4(O[SiH](C)C)O[Si](O5)(O[SiH](C)C)O1',
-  Octamethylcyclotetrasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  Octamethyltrisiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  Octaphenylcyclotetrasiloxane: 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O[Si](C8=CC=CC=C8)(C9=CC=CC=C9)O2)=CC=CC=C1',
-  Octaphenyloctasilsesquioxane: 'C1([Si]2(O3)O[Si](O[Si](O4)(C5=CC=CC=C5)O[Si](O6)(C7=CC=CC=C7)O8)(C9=CC=CC=C9)O[Si]8(C%10=CC=CC=C%10)O[Si]3(C%11=CC=CC=C%11)O[Si]6(C%12=CC=CC=C%12)O[Si]4(C%13=CC=CC=C%13)O2)=CC=CC=C1',
-  Osmium: '[Os]',
-  'Osmium Tetroxide': '[Os+8].[O-2].[O-2].[O-2].[O-2]',
-  OsO4: '[Os+8].[O-2].[O-2].[O-2].[O-2]',
-  'O-TBDPS-D-Thr-N-Boc-L-tert-Leu-Diphenylphosphine': 'O=C(OC(C)(C)C)N[C@@H](C(C)(C)C)C(N[C@H]([C@@H](O[Si](C1=CC=CC=C1)(C(C)(C)C)C2=CC=CC=C2)C)CP(C3=CC=CC=C3)C4=CC=CC=C4)=O',
-  'O-tert-Butyl-L-threonine': 'N[C@@H]([C@H](OC(C)(C)C)C)C(O)=O',
-  'o-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=CC=C1C',
-  'Oxalyl bromide': 'O=C(Br)C(Br)=O',
-  'Oxalyl Chloride': 'O=C(Cl)C(Cl)=O',
-  Oxone: '[O-]S(=O)(=O)[O-].[O-]S(=O)(=O)O.[O-]OS(=O)(=O)O.[O-]OS(=O)(=O)O.[K+].[K+].[K+].[K+].[K+]',
-  Oxygen: 'OO',
-  O2: 'OO',
-  Ozone: 'O=[O+][O-]',
-  O3: 'O=[O+][O-]',
-  'Palladium Carbon': '[Pd]',
-  'Pd-C': '[Pd]',
-  PdC: '[Pd]',
-  'Pd/C': '[Pd]',
-  'Palladium hydroxide': '[Pd+2].[OH-].[OH-]',
-  'Pd(OH)2': '[Pd+2].[OH-].[OH-]',
-  'Palladium(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Pd+2]',
-  'Pd(OAc)2': 'CC([O-])=O.CC([O-])=O.[Pd+2]',
-  'Palladium(II) Chloride': '[Pd+2].[Cl-].[Cl-]',
-  PdCl2: '[Pd+2].[Cl-].[Cl-]',
-  'Palladium(II) Trifluoroacetate': 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Pd+2]',
-  'Palmitic Acid': 'CCCCCCCCCCCCCCCC(O)=O',
-  'p-Cymene': 'CC1=CC=C(C(C)C)C=C1',
-  'Pentadecylmagnesium Bromide': 'Br[Mg]CCCCCCCCCCCCCCC',
-  'Pentafluoroanilinium Trifluoromethanesulfonate': 'F[N+](F)(F)C1=CC=CC(F)=C1F.O=S(C(F)(F)F)([O-])=O',
-  'Pentafluorobenzoyl Chloride': 'O=C(Cl)C1=C(F)C(F)=C(F)C(F)=C1F',
-  Pentafluorophenol: 'OC1=C(F)C(F)=C(F)C(F)=C1F',
-  'Pentafluorophenyl 4-Nitrobenzenesulfonate': 'O=S(C1=CC=C([N+]([O-])=O)C=C1)(OC2=C(F)C(F)=C(F)C(F)=C2F)=O',
-  'Pentafluorophenyl Trifluoroacetate': 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)C(F)(F)F',
-  'Pentafluoropropionic Anhydride': 'O=C(OC(C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)F',
-  pentane: 'CCCCC',
-  'Pentylboronic Acid': 'CCCCCB(O)O',
-  'Pentylmagnesium Bromide': 'Br[Mg]CCCCC',
-  'Pentylmagnesium chloride': 'Cl[Mg]CCCCC',
-  Pentyltriethoxysilane: 'CCO[Si](OCC)(CCCCC)OCC',
-  'Periodic acid': 'O=I(=O)(O)=O',
-  HIO4: 'O=I(=O)(O)=O',
-  Perylene: 'C12=CC=CC(C3=CC=CC4=C3C5=CC=C4)=C1C5=CC=C2',
-  'PhenoFluor™ Mix': '[Cs]F.Cl[C+](N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N]1C(C(C(C)C)=CC=C3)=C3C(C)C.[Cl-]',
-  'Phenol nitroprusside solution': 'O=N[Fe-2](C#N)(C#N)(C#N)(C#N)C#N.OC1=CC=CC=C1',
-  'Phenyl Trifluoromethyl Sulfone': 'O=S(C(F)(F)F)(C1=CC=CC=C1)=O',
-  'Phenyl Trifluoromethyl Sulfoxide': 'O=S(C1=CC=CC=C1)C(F)(F)F',
-  'Phenyl[3-(trifluoromethyl)phenyl]iodonium triflate': 'FC(C1=CC([I+]C2=CC=CC=C2)=CC=C1)(F)F.O=S([O-])(C(F)(F)F)=O',
-  'Phenylarsine Oxide': 'O=[As]C1=CC=CC=C1',
-  'Phenylarsonic Acid': 'O=[As](C1=CC=CC=C1)(O)O',
-  'Phenylgermanium Trichloride': 'Cl[Ge](Cl)(Cl)C1=CC=CC=C1',
-  'Phenylmagnesium Bromide': 'Br[Mg]C1=CC=CC=C1',
-  'Phenylmagnesium Chloride': 'Cl[Mg]C1=CC=CC=C1',
-  'Phenylmagnesium Iodide': 'I[Mg]C1=CC=CC=C1',
-  'Phenylphosphonic Dichloride': 'O=P(C1=CC=CC=C1)(Cl)Cl',
-  Phenylsilane: '[SiH3]C1=CC=CC=C1',
-  'Phenyltin Trichloride': 'Cl[Sn](Cl)(Cl)C1=CC=CC=C1',
-  'Phosphomolybdic acid': 'O=[Mo](OP(O)(O)=O)(O)=O',
-  'Phosphomolybdic Acid Ethanol Solution': 'O=[Mo](OP(O)(O)=O)(O)=O.CCO',
-  'Phosphomolybdic Acid Hydrate': 'O=[Mo](OP(O)(O)=O)(O)=O.[H]O[H]',
-  'Phosphorus(V) oxychloride': 'ClP(Cl)(Cl)=O',
-  'Phosphoryl chloride': 'O=P(Cl)(Cl)Cl',
-  'Phthalic Acid': 'O=C(O)C1=CC=CC=C1C(O)=O',
-  Phthalocyanine: 'C1(C2=N3)=C(C=CC=C1)C(N2)=NC4=NC(C5=C4C=CC=C5)=NC(N6)=C7C=CC=CC7=C6N=C8C9=C(C=CC=C9)C3=N8',
-  Piperidine: 'N1CCCCC1',
-  Platinum: '[Pt]',
-  'Platinum(IV) Oxide': '[Pt+4].[O-2].[O-2]',
-  'Potassium (2-Formylphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC=C1C=O)F.[K+]',
-  'Potassium (2-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC=C1OC)F.[K+]',
-  'Potassium (3-Cyanophenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC(C#N)=C1)F.[K+]',
-  'Potassium (3-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC(OC)=C1)F.[K+]',
-  'Potassium (3-Nitrophenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC([N+]([O-])=O)=C1)F.[K+]',
-  'Potassium (4-Cyanophenyl)trifluoroborate': 'F[B-](F)(C1=CC=C(C#N)C=C1)F.[K+]',
-  'Potassium (4-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=C(OC)C=C1)F.[K+]',
-  'Potassium (Acetoxymethyl)trifluoroborate': 'F[B-](F)(COC(C)=O)F.[K+]',
-  'Potassium (Bromomethyl)trifluoroborate': 'F[B-](F)(CBr)F.[K+]',
-  'Potassium (Iodomethyl)trifluoroborate': 'F[B-](F)(CI)F.[K+]',
-  'Potassium (Methoxymethyl)trifluoroborate': 'F[B-](F)(COC)F.[K+]',
-  'Potassium [[(tert-Butoxycarbonyl)amino]methyl]trifluoroborate': 'F[B-](F)(CNC(OC(C)(C)C)=O)F.[K+]',
-  'Potassium 2-iodo-5-methylbenzenesulfonate': 'O=S(C1=CC(C)=CC=C1I)([O-])=O.[K+]',
-  'Potassium 2-Thienyltrifluoroborate': 'F[B-](F)(C1=CC=CS1)F.[K+]',
-  'Potassium 3-Pyridyltrifluoroborate': 'F[B-](F)(C1=CC=CN=C1)F.[K+]',
-  'Potassium 4-Pyridyltrifluoroborate': 'F[B-](F)(C1=CC=NC=C1)F.[K+]',
-  'potassium acetate': 'CC([O-])=O.[K+]',
-  KOAc: 'CC([O-])=O.[K+]',
-  'Potassium Allyltrifluoroborate': 'F[B-](F)(CC=C)F.[K+]',
-  'Potassium Bis(1-pyrazolyl)borohydride': 'N1([BH2-]N2N=CC=C2)N=CC=C1.[K+]',
-  'Potassium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[K+]',
-  'Potassium Borohydride': '[K+].[BH4-]',
-  KBH4: '[K+].[BH4-]',
-  'Potassium butanolate': 'CC([O-])(C)C.[K+]',
-  'potassium carbonate': '[O-]C([O-])=O.[K+].[K+]',
-  K2CO3: '[O-]C([O-])=O.[K+].[K+]',
-  'potassium chloride': '[K+].[Cl-]',
-  KCl: '[K+].[Cl-]',
-  'Potassium cyanide': '[C-]#N.[K+]',
-  KCN: '[C-]#N.[K+]',
-  'Potassium Cyclopropyltrifluoroborate': 'F[B-](F)(C1CC1)F.[K+]',
-  'Potassium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[K+].[K+]',
-  'Potassium ethoxide': 'CC[O-].[K+]',
-  'potassium fluoride': '[K+].[F-]',
-  KF: '[K+].[F-]',
-  'Potassium Hexafluoroarsenate': 'F[As-](F)(F)(F)(F)F.[K+]',
-  'Potassium hydroxide': '[K+].[OH-]',
-  'Potassium hydroxide solution': '[K+].[OH-]',
-  KOH: '[K+].[OH-]',
-  'potassium iodide': '[K+].[I-]',
-  KI: '[K+].[I-]',
-  'Potassium methoxide': 'C[O-].[K+]',
-  KOMe: 'C[O-].[K+]',
-  'Potassium monopersulfate triple salt': 'OS(=O)(=O)[O-].OS(=O)(=O)O[O-].OS(=O)(=O)O[O-].[O-]S(=O)(=O)[O-].[K+].[K+].[K+].[K+].[K+]',
-  'Potassium nitrate': '[N+](=O)([O-])[O-].[K+]',
-  KNO3: '[N+](=O)([O-])[O-].[K+]',
-  'Potassium permanganate': 'O=[Mn](=O)(=O)([K])=O',
-  KMnO4: 'O=[Mn](=O)(=O)([K])=O',
-  'Potassium Perrhenate': 'O=[Re](=O)([O-])=O.[K+]',
-  'Potassium perruthenate': 'O=[Ru](=O)([O-])=O.[K+]',
-  'potassium persulfate': '[O-]S(=O)(OOS(=O)([O-])=O)=O.[K+].[K+]',
-  'Potassium Phenyltrifluoroborate': 'F[B-](F)(C1=CC=CC=C1)F.[K+]',
-  'Potassium Trifluoro(trifluoromethyl)borate': 'FC([B-](F)(F)F)(F)F.[K+]',
-  'Potassium Trifluoroacetate': 'O=C([O-])C(F)(F)F.[K+]',
-  'Potassium Trimethoxy(trifluoromethyl)borate': 'FC([B-](OC)(OC)OC)(F)F.[K+]',
-  'Potassium trimethylsilanolate': '[O-][Si](C)(C)C.[K+]',
-  'Potassium Tris(1-pyrazolyl)borohydride': '[BH-](N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3.[K+]',
-  'Potassium Vinyltrifluoroborate': 'F[B-](F)(C=C)F.[K+]',
-  'Potassium o-Tolyltrifluoroborate': 'F[B-](F)(C1=CC=CC=C1C)F.[K+]',
-  'Potassium p-Tolyltrifluoroborate': 'F[B-](F)(C1=CC=C(C)C=C1)F.[K+]',
-  'Potassium tert-Butoxide': 'CC(C)([O-])C.[K+]',
-  'Potassium tert-Pentoxide': 'CCC(C)([O-])C.[K+]',
-  'Propionic Acid': 'CCC(O)=O',
-  'Propylboronic Acid': 'CCCB(O)O',
-  'Propylmagnesium Bromide': 'Br[Mg]CCC',
-  'Propylmagnesium chloride': 'Cl[Mg]CCC',
-  'p-Toluenesulfonic Acid Monohydrate': 'CC1=CC=C(S(=O)(O)=O)C=C1.[H]O[H]',
-  'p-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=C(C)C=C1',
-  Pyridine: 'C1=CN=CC=C1',
-  'Pyridine - Sulfur Trioxide Complex': 'O=S(=O)=O.C1=CC=NC=C1',
-  'Pyridine Iodine Monochloride': 'IC1=NC=CC=C1Cl',
-  'Pyridine-2-sulfonyl Fluoride': 'O=S(C1=NC=CC=C1)(F)=O',
-  'Pyridinium 3-Nitrobenzenesulfonate': 'O=S(C1=CC=CC([N+]([O-])=O)=C1)([O-])=O.C2=CC=CC=[NH+]2',
-  'Pyridinium Bromide Perbromide': 'BrBr.C1=[NH+]C=CC=C1.[Br-]',
-  'Pyridinium chlorochromate': '[O-][Cr](=O)(Cl)=O.C1=CC=CC=[NH+]1',
-  'Pyridinium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=CC=CC=[NH+]1.C2=CC=CC=[NH+]2',
-  'Pyridinium Fluorochromate': '[O-][Cr](=O)(F)=O.C1=CC=CC=[NH+]1',
-  'Pyridinium p-Toluenesulfonate': 'CC1=CC=C(S(=O)([O-])=O)C=C1.C2=CC=CC=[NH+]2',
-  'Pyrimidine-2-sulfonyl Fluoride': 'O=S(C1=NC=CC=N1)(F)=O',
-  Quincoridine: 'OC[C@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
-  Quincorine: 'OC[C@@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
-  Quinidine: 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
-  'Quinidine Sulfate Dihydrate': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
-  Quinine: 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
-  'Quinine Hydrochloride Dihydrate': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl.[H]O[H].[H]O[H]',
-  'Quinolinium Dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C12=CC=C[NH+]=C1C=CC=C2.C34=CC=C[NH+]=C3C=CC=C4',
-  Quinuclidine: 'N12CCC(CC2)CC1',
-  Rhenium: '[Re]',
-  Rhodium: '[Rh]',
-  'rhodium trihydroxide': '[Rh+3].[OH-].[OH-].[OH-]',
-  'Rhodium(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Rh+2]',
-  'Rhodium(II) Octanoate': 'CCCCCCCC([O-])=O.CCCCCCCC([O-])=O.[Rh+2]',
-  'RHODIUM(III) OXIDE HYDRATE': '[H]O[H].[Rh+3].[Rh+3].[O-2].[O-2].[O-2]',
-  'Rubidium hydroxide': '[Rb+].[OH-]',
-  Ruthenium: '[Ru]',
-  'Ruthenium(III) Chloride': '[Ru+3].[Cl-].[Cl-].[Cl-]',
-  RuCl3: '[Ru+3].[Cl-].[Cl-].[Cl-]',
+  "o-Chloramine T": 'CC1=CC=CC=C1S([N-]Cl)(=O)=O.[Na+]',
+  "Octadecamethylcyclononasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Octadecyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCCCCCCCCCC)OCC',
+  "Octadecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCCCCCCCC)OC',
+  "Octakis(dimethylsilyloxy)octasilsesquioxane": 'C[SiH](C)O[Si]1(O[Si]2(O[SiH](C)C)O[Si](O3)(O[SiH](C)C)O[Si](O4)(O[SiH](C)C)O[Si]5(O[SiH](C)C)O2)O[Si]3(O[SiH](C)C)O[Si]4(O[SiH](C)C)O[Si](O5)(O[SiH](C)C)O1',
+  "Octamethylcyclotetrasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Octamethyltrisiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  "Octaphenylcyclotetrasiloxane": 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O[Si](C8=CC=CC=C8)(C9=CC=CC=C9)O2)=CC=CC=C1',
+  "Octaphenyloctasilsesquioxane": 'C1([Si]2(O3)O[Si](O[Si](O4)(C5=CC=CC=C5)O[Si](O6)(C7=CC=CC=C7)O8)(C9=CC=CC=C9)O[Si]8(C%10=CC=CC=C%10)O[Si]3(C%11=CC=CC=C%11)O[Si]6(C%12=CC=CC=C%12)O[Si]4(C%13=CC=CC=C%13)O2)=CC=CC=C1',
+  "Osmium": '[Os]',
+  "Osmium Tetroxide": '[Os+8].[O-2].[O-2].[O-2].[O-2]',
+  "OsO4": '[Os+8].[O-2].[O-2].[O-2].[O-2]',
+  "O-TBDPS-D-Thr-N-Boc-L-tert-Leu-Diphenylphosphine": 'O=C(OC(C)(C)C)N[C@@H](C(C)(C)C)C(N[C@H]([C@@H](O[Si](C1=CC=CC=C1)(C(C)(C)C)C2=CC=CC=C2)C)CP(C3=CC=CC=C3)C4=CC=CC=C4)=O',
+  "O-tert-Butyl-L-threonine": 'N[C@@H]([C@H](OC(C)(C)C)C)C(O)=O',
+  "o-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=CC=C1C',
+  "Oxalyl bromide": 'O=C(Br)C(Br)=O',
+  "Oxalyl Chloride": 'O=C(Cl)C(Cl)=O',
+  "Oxone": '[O-]S(=O)(=O)[O-].[O-]S(=O)(=O)O.[O-]OS(=O)(=O)O.[O-]OS(=O)(=O)O.[K+].[K+].[K+].[K+].[K+]',
+  "Oxygen": 'OO',
+  "O2": 'OO',
+  "Ozone": 'O=[O+][O-]',
+  "O3": 'O=[O+][O-]',
+  "Palladium Carbon": '[Pd]',
+  "Pd-C": '[Pd]',
+  "PdC": '[Pd]',
+  "Pd/C": '[Pd]',
+  "Palladium hydroxide": '[Pd+2].[OH-].[OH-]',
+  "Pd(OH)2": '[Pd+2].[OH-].[OH-]',
+  "Palladium(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Pd+2]',
+  "Pd(OAc)2": 'CC([O-])=O.CC([O-])=O.[Pd+2]',
+  "Palladium(II) Chloride": '[Pd+2].[Cl-].[Cl-]',
+  "PdCl2": '[Pd+2].[Cl-].[Cl-]',
+  "Palladium(II) Trifluoroacetate": 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Pd+2]',
+  "Palmitic Acid": 'CCCCCCCCCCCCCCCC(O)=O',
+  "p-Cymene": 'CC1=CC=C(C(C)C)C=C1',
+  "Pentadecylmagnesium Bromide": 'Br[Mg]CCCCCCCCCCCCCCC',
+  "Pentafluoroanilinium Trifluoromethanesulfonate": 'F[N+](F)(F)C1=CC=CC(F)=C1F.O=S(C(F)(F)F)([O-])=O',
+  "Pentafluorobenzoyl Chloride": 'O=C(Cl)C1=C(F)C(F)=C(F)C(F)=C1F',
+  "Pentafluorophenol": 'OC1=C(F)C(F)=C(F)C(F)=C1F',
+  "Pentafluorophenyl 4-Nitrobenzenesulfonate": 'O=S(C1=CC=C([N+]([O-])=O)C=C1)(OC2=C(F)C(F)=C(F)C(F)=C2F)=O',
+  "Pentafluorophenyl Trifluoroacetate": 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)C(F)(F)F',
+  "Pentafluoropropionic Anhydride": 'O=C(OC(C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)F',
+  "pentane": 'CCCCC',
+  "Pentylboronic Acid": 'CCCCCB(O)O',
+  "Pentylmagnesium Bromide": 'Br[Mg]CCCCC',
+  "Pentylmagnesium chloride": 'Cl[Mg]CCCCC',
+  "Pentyltriethoxysilane": 'CCO[Si](OCC)(CCCCC)OCC',
+  "Periodic acid": 'O=I(=O)(O)=O',
+  "HIO4": 'O=I(=O)(O)=O',
+  "Perylene": 'C12=CC=CC(C3=CC=CC4=C3C5=CC=C4)=C1C5=CC=C2',
+  "PhenoFluor™ Mix": '[Cs]F.Cl[C+](N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N]1C(C(C(C)C)=CC=C3)=C3C(C)C.[Cl-]',
+  "Phenol nitroprusside solution": 'O=N[Fe-2](C#N)(C#N)(C#N)(C#N)C#N.OC1=CC=CC=C1',
+  "Phenyl Trifluoromethyl Sulfone": 'O=S(C(F)(F)F)(C1=CC=CC=C1)=O',
+  "Phenyl Trifluoromethyl Sulfoxide": 'O=S(C1=CC=CC=C1)C(F)(F)F',
+  "Phenyl[3-(trifluoromethyl)phenyl]iodonium triflate": 'FC(C1=CC([I+]C2=CC=CC=C2)=CC=C1)(F)F.O=S([O-])(C(F)(F)F)=O',
+  "Phenylarsine Oxide": 'O=[As]C1=CC=CC=C1',
+  "Phenylarsonic Acid": 'O=[As](C1=CC=CC=C1)(O)O',
+  "Phenylgermanium Trichloride": 'Cl[Ge](Cl)(Cl)C1=CC=CC=C1',
+  "Phenylmagnesium Bromide": 'Br[Mg]C1=CC=CC=C1',
+  "Phenylmagnesium Chloride": 'Cl[Mg]C1=CC=CC=C1',
+  "Phenylmagnesium Iodide": 'I[Mg]C1=CC=CC=C1',
+  "Phenylphosphonic Dichloride": 'O=P(C1=CC=CC=C1)(Cl)Cl',
+  "Phenylsilane": '[SiH3]C1=CC=CC=C1',
+  "Phenyltin Trichloride": 'Cl[Sn](Cl)(Cl)C1=CC=CC=C1',
+  "Phosphomolybdic acid": 'O=[Mo](OP(O)(O)=O)(O)=O',
+  "Phosphomolybdic Acid Ethanol Solution": 'O=[Mo](OP(O)(O)=O)(O)=O.CCO',
+  "Phosphomolybdic Acid Hydrate": 'O=[Mo](OP(O)(O)=O)(O)=O.[H]O[H]',
+  "Phosphorus(V) oxychloride": 'ClP(Cl)(Cl)=O',
+  "Phosphoryl chloride": 'O=P(Cl)(Cl)Cl',
+  "Phthalic Acid": 'O=C(O)C1=CC=CC=C1C(O)=O',
+  "Phthalocyanine": 'C1(C2=N3)=C(C=CC=C1)C(N2)=NC4=NC(C5=C4C=CC=C5)=NC(N6)=C7C=CC=CC7=C6N=C8C9=C(C=CC=C9)C3=N8',
+  "Piperidine": 'N1CCCCC1',
+  "Platinum": '[Pt]',
+  "Platinum(IV) Oxide": '[Pt+4].[O-2].[O-2]',
+  "Potassium (2-Formylphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC=C1C=O)F.[K+]',
+  "Potassium (2-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC=C1OC)F.[K+]',
+  "Potassium (3-Cyanophenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC(C#N)=C1)F.[K+]',
+  "Potassium (3-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC(OC)=C1)F.[K+]',
+  "Potassium (3-Nitrophenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC([N+]([O-])=O)=C1)F.[K+]',
+  "Potassium (4-Cyanophenyl)trifluoroborate": 'F[B-](F)(C1=CC=C(C#N)C=C1)F.[K+]',
+  "Potassium (4-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=C(OC)C=C1)F.[K+]',
+  "Potassium (Acetoxymethyl)trifluoroborate": 'F[B-](F)(COC(C)=O)F.[K+]',
+  "Potassium (Bromomethyl)trifluoroborate": 'F[B-](F)(CBr)F.[K+]',
+  "Potassium (Iodomethyl)trifluoroborate": 'F[B-](F)(CI)F.[K+]',
+  "Potassium (Methoxymethyl)trifluoroborate": 'F[B-](F)(COC)F.[K+]',
+  "Potassium [[(tert-Butoxycarbonyl)amino]methyl]trifluoroborate": 'F[B-](F)(CNC(OC(C)(C)C)=O)F.[K+]',
+  "Potassium 2-iodo-5-methylbenzenesulfonate": 'O=S(C1=CC(C)=CC=C1I)([O-])=O.[K+]',
+  "Potassium 2-Thienyltrifluoroborate": 'F[B-](F)(C1=CC=CS1)F.[K+]',
+  "Potassium 3-Pyridyltrifluoroborate": 'F[B-](F)(C1=CC=CN=C1)F.[K+]',
+  "Potassium 4-Pyridyltrifluoroborate": 'F[B-](F)(C1=CC=NC=C1)F.[K+]',
+  "potassium acetate": 'CC([O-])=O.[K+]',
+  "KOAc": 'CC([O-])=O.[K+]',
+  "Potassium Allyltrifluoroborate": 'F[B-](F)(CC=C)F.[K+]',
+  "Potassium Bis(1-pyrazolyl)borohydride": 'N1([BH2-]N2N=CC=C2)N=CC=C1.[K+]',
+  "Potassium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[K+]',
+  "Potassium Borohydride": '[K+].[BH4-]',
+  "KBH4": '[K+].[BH4-]',
+  "Potassium butanolate": 'CC([O-])(C)C.[K+]',
+  "potassium carbonate": '[O-]C([O-])=O.[K+].[K+]',
+  "K2CO3": '[O-]C([O-])=O.[K+].[K+]',
+  "potassium chloride": '[K+].[Cl-]',
+  "KCl": '[K+].[Cl-]',
+  "Potassium cyanide": '[C-]#N.[K+]',
+  "KCN": '[C-]#N.[K+]',
+  "Potassium Cyclopropyltrifluoroborate": 'F[B-](F)(C1CC1)F.[K+]',
+  "Potassium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[K+].[K+]',
+  "Potassium ethoxide": 'CC[O-].[K+]',
+  "potassium fluoride": '[K+].[F-]',
+  "KF": '[K+].[F-]',
+  "Potassium Hexafluoroarsenate": 'F[As-](F)(F)(F)(F)F.[K+]',
+  "Potassium hydroxide": '[K+].[OH-]',
+  "Potassium hydroxide solution": '[K+].[OH-]',
+  "KOH": '[K+].[OH-]',
+  "potassium iodide": '[K+].[I-]',
+  "KI": '[K+].[I-]',
+  "Potassium methoxide": 'C[O-].[K+]',
+  "KOMe": 'C[O-].[K+]',
+  "Potassium monopersulfate triple salt": 'OS(=O)(=O)[O-].OS(=O)(=O)O[O-].OS(=O)(=O)O[O-].[O-]S(=O)(=O)[O-].[K+].[K+].[K+].[K+].[K+]',
+  "Potassium nitrate": '[N+](=O)([O-])[O-].[K+]',
+  "KNO3": '[N+](=O)([O-])[O-].[K+]',
+  "Potassium permanganate": 'O=[Mn](=O)(=O)([K])=O',
+  "KMnO4": 'O=[Mn](=O)(=O)([K])=O',
+  "Potassium Perrhenate": 'O=[Re](=O)([O-])=O.[K+]',
+  "Potassium perruthenate": 'O=[Ru](=O)([O-])=O.[K+]',
+  "potassium persulfate": '[O-]S(=O)(OOS(=O)([O-])=O)=O.[K+].[K+]',
+  "Potassium Phenyltrifluoroborate": 'F[B-](F)(C1=CC=CC=C1)F.[K+]',
+  "Potassium Trifluoro(trifluoromethyl)borate": 'FC([B-](F)(F)F)(F)F.[K+]',
+  "Potassium Trifluoroacetate": 'O=C([O-])C(F)(F)F.[K+]',
+  "Potassium Trimethoxy(trifluoromethyl)borate": 'FC([B-](OC)(OC)OC)(F)F.[K+]',
+  "Potassium trimethylsilanolate": '[O-][Si](C)(C)C.[K+]',
+  "Potassium Tris(1-pyrazolyl)borohydride": '[BH-](N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3.[K+]',
+  "Potassium Vinyltrifluoroborate": 'F[B-](F)(C=C)F.[K+]',
+  "Potassium o-Tolyltrifluoroborate": 'F[B-](F)(C1=CC=CC=C1C)F.[K+]',
+  "Potassium p-Tolyltrifluoroborate": 'F[B-](F)(C1=CC=C(C)C=C1)F.[K+]',
+  "Potassium tert-Butoxide": 'CC(C)([O-])C.[K+]',
+  "Potassium tert-Pentoxide": 'CCC(C)([O-])C.[K+]',
+  "Propionic Acid": 'CCC(O)=O',
+  "Propylboronic Acid": 'CCCB(O)O',
+  "Propylmagnesium Bromide": 'Br[Mg]CCC',
+  "Propylmagnesium chloride": 'Cl[Mg]CCC',
+  "p-Toluenesulfonic Acid Monohydrate": 'CC1=CC=C(S(=O)(O)=O)C=C1.[H]O[H]',
+  "p-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=C(C)C=C1',
+  "Pyridine": 'C1=CN=CC=C1',
+  "Pyridine - Sulfur Trioxide Complex": 'O=S(=O)=O.C1=CC=NC=C1',
+  "Pyridine Iodine Monochloride": 'IC1=NC=CC=C1Cl',
+  "Pyridine-2-sulfonyl Fluoride": 'O=S(C1=NC=CC=C1)(F)=O',
+  "Pyridinium 3-Nitrobenzenesulfonate": 'O=S(C1=CC=CC([N+]([O-])=O)=C1)([O-])=O.C2=CC=CC=[NH+]2',
+  "Pyridinium Bromide Perbromide": 'BrBr.C1=[NH+]C=CC=C1.[Br-]',
+  "Pyridinium chlorochromate": '[O-][Cr](=O)(Cl)=O.C1=CC=CC=[NH+]1',
+  "Pyridinium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=CC=CC=[NH+]1.C2=CC=CC=[NH+]2',
+  "Pyridinium Fluorochromate": '[O-][Cr](=O)(F)=O.C1=CC=CC=[NH+]1',
+  "Pyridinium p-Toluenesulfonate": 'CC1=CC=C(S(=O)([O-])=O)C=C1.C2=CC=CC=[NH+]2',
+  "Pyrimidine-2-sulfonyl Fluoride": 'O=S(C1=NC=CC=N1)(F)=O',
+  "Quincoridine": 'OC[C@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
+  "Quincorine": 'OC[C@@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
+  "Quinidine": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
+  "Quinidine Sulfate Dihydrate": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
+  "Quinine": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
+  "Quinine Hydrochloride Dihydrate": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl.[H]O[H].[H]O[H]',
+  "Quinolinium Dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C12=CC=C[NH+]=C1C=CC=C2.C34=CC=C[NH+]=C3C=CC=C4',
+  "Quinuclidine": 'N12CCC(CC2)CC1',
+  "Rhenium": '[Re]',
+  "Rhodium": '[Rh]',
+  "rhodium trihydroxide": '[Rh+3].[OH-].[OH-].[OH-]',
+  "Rhodium(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Rh+2]',
+  "Rhodium(II) Octanoate": 'CCCCCCCC([O-])=O.CCCCCCCC([O-])=O.[Rh+2]',
+  "RHODIUM(III) OXIDE HYDRATE": '[H]O[H].[Rh+3].[Rh+3].[O-2].[O-2].[O-2]',
+  "Rubidium hydroxide": '[Rb+].[OH-]',
+  "Ruthenium": '[Ru]',
+  "Ruthenium(III) Chloride": '[Ru+3].[Cl-].[Cl-].[Cl-]',
+  "RuCl3": '[Ru+3].[Cl-].[Cl-].[Cl-]',
   "Salcomine [=N,N'-Bis(salicylidene)ethylenediiminocobalt(II)]": '[O-]C(C=CC=C1)=C1/C=N/CC/N=C/C2=CC=CC=C2[O-].[Co+2]',
-  Samarium: '[Sm]',
-  'Samarium(II) Iodide': '[Sm+2].[I-].[I-]',
-  Scandium: '[Sc]',
-  'Scandium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sc+3]',
-  'sec-Butyllithium': '[Li]C(C)CC',
-  'sec-Butylmagnesium Bromide': 'Br[Mg]C(C)CC',
-  'sec-Butylmagnesium chloride': 'Cl[Mg]C(C)CC',
-  'sec-Butylmagnesium Chloride - Lithium Chloride': 'Cl[Mg]C(C)CC.[Li+].[Cl-]',
-  'Selenium dioxide': 'O=[Se]=O',
-  SeO2: 'O=[Se]=O',
-  'S-Ethyl Trifluorothioacetate': 'O=C(SCC)C(F)(F)F',
-  Silver: '[Ag]',
-  'Silver Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.[Ag+]',
-  'Silver(I) Trifluoromethanethiolate': '[S-]C(F)(F)F.[Ag+]',
-  'Silver(II) picolinate': 'O=C([O-])C1=NC=CC=C1.O=C([O-])C2=NC=CC=C2.[Ag+2]',
-  'Silver(II) Pyridine-2-carboxylate': 'O=C(C1=NC=CC=C1)[O-].O=C(C2=NC=CC=C2)[O-].[Ag+2]',
-  'Sodium bicarbonate': 'C(=O)(O)[O-].[Na+]',
-  'Sodium (Trihydroxy)phenylborate': 'O[B-](O)(O)C1=CC=CC=C1.[Na+]',
-  'Sodium amide': '[Na+].[NH2-]',
-  NaNH2: '[Na+].[NH2-]',
-  'Sodium ascorbate': '[O-]C([C@H](O1)[C@H](CO)O)=C(O)C1=O.[Na+]',
-  'sodium azide': '[N-]=[N+]=[N-].[Na+]',
-  NaN3: '[N-]=[N+]=[N-].[Na+]',
-  'Sodium Bis(2-methoxyethoxy)aluminum Dihydride': 'COCCO[Al+]OCCOC.[Na+].[H-].[H-]',
-  'Sodium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[Na+]',
-  'Sodium Borohydride': '[Na+].[BH4-]',
-  NaBH4: '[Na+].[BH4-]',
-  'sodium bromate': 'O=Br([O-])=O.[Na+]',
-  'sodium bromide': '[Na+].[Br-]',
-  NaBr: '[Na+].[Br-]',
-  'Sodium Bromodifluoroacetate': 'O=C([O-])C(F)(Br)F.[Na+]',
-  'sodium carbonate': '[O-]C([O-])=O.[Na+].[Na+]',
-  Na2CO3: '[O-]C([O-])=O.[Na+].[Na+]',
-  'Sodium carbonate decahydrate': '[O-]C([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
-  'sodium chloride': '[Na+].[Cl-]',
-  NaCl: '[Na+].[Cl-]',
-  'Sodium Chlorodifluoroacetate': 'O=C([O-])C(F)(Cl)F.[Na+]',
-  'Sodium Cyanoborohydride': '[BH3-]C#N.[Na+]',
-  'sodium cycanide': '[C-]#N.[Na+]',
-  NaCN: '[C-]#N.[Na+]',
-  'sodium D,L lactate': 'OC(C)C([O-])=O.[Na+]',
-  'Sodium Dichloroisocyanurate': 'ClN1C([N-]C(N(C1=O)Cl)=O)=O.[Na+]',
-  'Sodium dichloroisocyanurate dihydrate': 'O=C1N=C([O-])N(Cl)C(N1Cl)=O.O.O.[Na+]',
-  'Sodium dichromate dihydrate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[H]O[H].[H]O[H].[Na+].[Na+]',
-  'Sodium Diphenylphosphinobenzene-3-sulfonate': 'O=S(C1=CC(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=C1)([O-])=O.[Na+]',
-  'Sodium Ethoxide': 'CC[O-].[Na+]',
-  NaOEt: 'CC[O-].[Na+]',
-  'sodium fluoride': '[Na+].[F-]',
-  NaF: '[Na+].[F-]',
-  'Sodium hydride': '[NaH]',
-  NaH: '[NaH]',
-  'sodium hydrogen difluoride': '[Na+].[H+].[F-].[F-]',
-  'Sodium hydrogen periodate': 'O=I(=O)([O-])=O.O=I(=O)([O-])=O.[Na+].[H+]',
-  'Sodium Hydroxide': '[Na+].[OH-]',
-  NaOH: '[Na+].[OH-]',
-  'Sodium Hypochlorite Pentahydrate': 'Cl[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+]',
-  'Sodium iodide': '[Na+].[I-]',
-  NaI: '[Na+].[I-]',
-  'sodium L-tartrate': 'O[C@H]([C@H](C([O-])=O)O)C([O-])=O.[Na+].[Na+]',
-  'Sodium Methoxide': 'C[O-].[Na+]',
-  NaOMe: 'C[O-].[Na+]',
-  'Sodium nitrate': '[N+](=O)([O-])[O-].[Na+]',
-  NaNO3: '[N+](=O)([O-])[O-].[Na+]',
-  'Sodium percarbonate': 'O=C(O[O-])[O-].[Na+].[Na+]',
-  'sodium perchlorate': 'O=Cl(=O)([O-])=O.[Na+]',
-  'Sodium permanganate': 'O=[Mn](=O)([O-])=O.[Na+]',
-  NaMnO4: 'O=[Mn](=O)([O-])=O.[Na+]',
-  'Sodium peroxide': '[O-][O-].[Na+].[Na+]',
-  Na2O2: '[O-][O-].[Na+].[Na+]',
-  'sodium persulfate': '[O-]S(=O)(OOS(=O)([O-])=O)=O.[Na+].[Na+]',
-  'Sodium phosphomolybdate hydrate': 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[Na+]',
-  'sodium sulfite': 'O=S([O-])[O-].[Na+].[Na+]',
-  'Sodium Tellurite Pentahydrate': 'O=[Te]([O-])[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
-  'sodium tetraborate': 'O[B-]12OBO[B-](OBO2)(O)O1.[Na+].[Na+]',
-  'Sodium Tetrachloropalladate(II)': 'Cl[Pd-2](Cl)(Cl)Cl.[Na+].[Na+]',
-  'Sodium Tetrafluoroborate': 'F[B-](F)(F)F.[Na+]',
-  'Sodium Triacetoxyborohydride': 'O=C(O[BH-](OC(C)=O)OC(C)=O)C.[Na+]',
-  'Sodium Trifluoroacetate': 'O=C([O-])C(F)(F)F.[Na+]',
-  'Sodium Trifluoromethanesulfinate': 'O=S(C(F)(F)F)[O-].[Na+]',
-  'Sodium trimethylsilanolate': '[O-][Si](C)(C)C.[Na+]',
-  'Sodium Tris(1,1,1,3,3,3-hexafluoroisopropoxy)borohydride': 'FC(F)(C(C(F)(F)F)O[BH-](OC(C(F)(F)F)C(F)(F)F)OC(C(F)(F)F)C(F)(F)F)F.[Na+]',
-  'Sodium tert-Butoxide': 'CC(C)([O-])C.[Na+]',
-  'Sodium tert-Pentoxide': 'CCC(C)([O-])C.[Na+]',
-  'Sorbic Acid': 'C/C=C/C=C/C(O)=O',
-  'Strontium hydroxide': '[Sr+2].[OH-].[OH-]',
-  'STRONTIUM HYDROXIDE OCTAHYDRATE': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Sr+2].[OH-].[OH-]',
-  'Strontium peroxide': '[O-][O-].[Sr+2]',
-  'Succinic Acid': 'O=C(O)CCC(O)=O',
-  'Sulfanilic Acid': 'O=S(O)(C1=CC=C(N)C=C1)=O',
-  sulfolane: 'O=S1(CCCC1)=O',
-  'Sulfur Trioxide': 'O=S(=O)=O',
-  SO3: 'O=S(=O)=O',
-  'Sulfur Trioxide - Triethylamine Complex': 'O=S(=O)=O.CCN(CC)CC',
-  'Sulfuric acid': 'O=S(O)(O)=O',
-  H2SO4: 'O=S(O)(O)=O',
-  'Sulfuryl chloride': 'O=S(Cl)(Cl)=O',
-  SO2Cl2: 'O=S(Cl)(Cl)=O',
-  'Tebbe reagent': 'C[Al-]1(C[Ti+2][Cl+]1)C.[cH-]1cccc1.[cH-]1cccc1',
-  'Telluric Acid': 'O=[Te](O)(O)=O',
-  'Tellurium(IV) Oxide': '[Te+4].[O-2].[O-2]',
-  Terbium: '[Tb]',
-  'tert-Butyl hydroperoxide': 'CC(C)(OO)C',
-  TBHP: 'CC(C)(OO)C',
-  'tert-Butyl Hydroperoxide': 'CC(C)(OO)C',
-  'tert-Butyldimethylsilane': 'C[SiH](C(C)(C)C)C',
-  'tert-Butyldimethylsilanol': 'O[Si](C)(C(C)(C)C)C',
-  'tert-Butyldiphenylsilane': 'CC([SiH](C1=CC=CC=C1)C2=CC=CC=C2)(C)C',
-  'tert-Butyllithium': '[Li]C(C)(C)C',
-  tBuLi: '[Li]C(C)(C)C',
-  'tert-Butylmagnesium Chloride': 'Cl[Mg]C(C)(C)C',
-  'tert-Butylmethoxyphenylsilyl Bromide': 'CO[Si](C(C)(C)C)(Br)C1=CC=CC=C1',
-  'Tetra(decyl)ammonium Bromide': 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[Br-]',
-  Tetraallyltin: 'C=CC[Sn](CC=C)(CC=C)CC=C',
-  'Tetraamylammonium Bromide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Br-]',
-  'Tetraamylammonium Chloride': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Cl-]',
-  'Tetraamylammonium Iodide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[I-]',
-  Tetrabromofluorescein: 'O=C1OC2(C3=C(OC4=C2C=CC(O)=C4)C=C(O)C=C3)C5=C1C(Br)=C(Br)C(Br)=C5Br',
-  'Tetrabutyl Orthosilicate': 'CCCCO[Si](OCCCC)(OCCCC)OCCCC',
-  'Tetrabutyl Orthotitanate': 'CCCCO[Ti](OCCCC)(OCCCC)OCCCC',
-  'Tetrabutyl Orthotitanate Tetramer': '[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[Ti+4].[Ti+4].[O-2].[O-2].[Ti+4].[O-2].[Ti+4]',
-  'Tetrabutylammonium (meta)periodate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=I(=O)([O-])=O',
-  'Tetrabutylammonium Acetate': 'CCCC[N+](CCCC)(CCCC)CCCC.CC([O-])=O',
-  'Tetrabutylammonium Bifluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[H]F.[F-]',
-  'Tetrabutylammonium Borohydride': 'CCCC[N+](CCCC)(CCCC)CCCC.[BH4-]',
-  'Tetrabutylammonium Bromide': 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-]',
-  'Tetrabutylammonium Chloride': 'CCCC[N+](CCCC)(CCCC)CCCC.[Cl-]',
-  'Tetrabutylammonium chlorochromate': 'CCCC[N+](CCCC)(CCCC)CCCC.[O-][Cr](=O)(Cl)=O',
-  'Tetrabutylammonium Difluorotriphenylstannate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[Sn-](C1=CC=CC=C1)(C2=CC=CC=C2)(F)C3=CC=CC=C3',
-  'Tetrabutylammonium Dihydrogen Trifluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[H+].[H+].[F-].[F-].[F-]',
-  'Tetrabutylammonium ethoxide': 'CCCC[N+](CCCC)(CCCC)CCCC.CC[O-]',
-  'Tetrabutylammonium Fluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[F-]',
-  'Tetrabutylammonium Fluoride Hydrate': 'CCCC[N+](CCCC)(CCCC)CCCC.[H]O[H].[F-]',
-  'Tetrabutylammonium Hexafluorophosphate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
-  'Tetrabutylammonium Hydrogen Sulfate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(O)([O-])=O',
-  'Tetrabutylammonium hydroxide': 'CCCC[N+](CCCC)(CCCC)CCCC.[OH-]',
-  'Tetrabutylammonium Iodide': 'CCCC[N+](CCCC)(CCCC)CCCC.[I-]',
-  'Tetrabutylammonium methoxide': 'CCCC[N+](CCCC)(CCCC)CCCC.C[O-]',
-  'Tetrabutylammonium Perchlorate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=Cl(=O)([O-])=O',
-  'Tetrabutylammonium Perrhenate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=[Re](=O)([O-])=O',
-  'Tetrabutylammonium Tetrafluoroborate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
-  'Tetrabutylammonium Tetraphenylborate': 'CCCC[N+](CCCC)(CCCC)CCCC.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  'Tetrabutylammonium Thiocyanate': 'CCCC[N+](CCCC)(CCCC)CCCC.[S-]C#N',
-  'Tetrabutylammonium Tribromide': 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-].[Br-].[Br-]',
-  'Tetrabutylammonium Trifluoromethanesulfonate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(C(F)(F)F)([O-])=O',
-  'Tetrabutylammonium Triiodide': 'CCCC[N+](CCCC)(CCCC)CCCC.[I-].[I-].[I-]',
-  Tetrabutylgermane: 'CCCC[Ge](CCCC)(CCCC)CCCC',
-  'Tetrabutylphosphonium Bromide': 'CCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  'Tetrabutylphosphonium Chloride': 'CCCC[P+](CCCC)(CCCC)CCCC.[Cl-]',
-  'Tetrabutylphosphonium Hexafluorophosphate': 'CCCC[P+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
-  'Tetrabutylphosphonium Hydroxide': 'CCCC[P+](CCCC)(CCCC)CCCC.[OH-]',
-  'Tetrabutylphosphonium malonate': 'CCCC[P+](CCCC)(CCCC)CCCC.CCCC[P+](CCCC)(CCCC)CCCC.O=C([O-])CC([O-])=O',
-  'Tetrabutylphosphonium Tetrafluoroborate': 'CCCC[P+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
-  Tetrabutyltin: 'CCCC[Sn](CCCC)(CCCC)CCCC',
-  Tetracyanoethylene: 'N#CC(C#N)=C(C#N)C#N',
-  Tetradecamethylcycloheptasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  'Tetradecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCCCC)C.[Br-]',
-  'Tetraethyl 1,4,8,11-Tetraazacyclotetradecane-1,4,8,11-tetraacetate': 'O=C(OCC)CN1CCN(CC(OCC)=O)CCCN(CC(OCC)=O)CCN(CC(OCC)=O)CCC1',
-  'Tetraethyl Orthosilicate': 'CCO[Si](OCC)(OCC)OCC',
-  'Tetraethylammonium Borohydride': 'CC[N+](CC)(CC)CC.[BH4-]',
-  'Tetraethylammonium Bromide': 'CC[N+](CC)(CC)CC.[Br-]',
-  'Tetraethylammonium Chloride': 'CC[N+](CC)(CC)CC.[Cl-]',
-  'Tetraethylammonium Fluoride Tetrahydrofluoride': 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[H]F.[F-]',
-  'Tetraethylammonium Fluoride Trihydrofluoride': 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[F-]',
-  'Tetraethylammonium Hydroxide': 'CC[N+](CC)(CC)CC.[OH-]',
-  'Tetraethylammonium Iodide': 'CC[N+](CC)(CC)CC.[I-]',
-  'Tetraethylammonium Nitrate': 'CC[N+](CC)(CC)CC.[O-][N+]([O-])=O',
-  'Tetraethylammonium Tetrafluoroborate': 'CC[N+](CC)(CC)CC.F[B-](F)(F)F',
-  'Tetraethylammonium Trifluoromethanesulfonate': 'CC[N+](CC)(CC)CC.O=S(C(F)(F)F)([O-])=O',
-  'Tetraethylammonium p-Toluenesulfonate': 'CC[N+](CC)(CC)CC.CC1=CC=C(S(=O)([O-])=O)C=C1',
-  Tetraethylgermane: 'CC[Ge](CC)(CC)CC',
-  'Tetraethylphosphonium Bromide': 'CC[P+](CC)(CC)CC.[Br-]',
-  'Tetraethylphosphonium Hexafluorophosphate': 'CC[P+](CC)(CC)CC.F[P-](F)(F)(F)(F)F',
-  'Tetraethylphosphonium Tetrafluoroborate': 'CC[P+](CC)(CC)CC.F[B-](F)(F)F',
-  Tetraethylsilane: 'CC[Si](CC)(CC)CC',
-  'Tetrafluoroboronic acid diethylether complex': 'F[B-](F)(F)F.CCOCC.[H+]',
-  'Tetraheptylammonium Bromide': 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[Br-]',
-  'Tetraheptylammonium Iodide': 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[I-]',
-  'Tetrahexylammonium Bromide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[Br-]',
-  'Tetrahexylammonium Hydrogen Sulfate': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.O=S(O)([O-])=O',
-  'Tetrahexylammonium Hydroxide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[OH-]',
-  'Tetrahexylammonium Iodide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[I-]',
-  Tetrahydroxydiboron: 'OB(O)B(O)O',
-  tetrahydroxytitanium: 'O[Ti](O)(O)O',
-  'Tetraisobutyl Orthotitanate': 'CC(C)CO[Ti](OCC(C)C)(OCC(C)C)OCC(C)C',
-  'Tetraisopropyl Orthosilicate': 'CC(O[Si](OC(C)C)(OC(C)C)OC(C)C)C',
-  'Tetraisopropyl Orthotitanate': 'CC(O[Ti](OC(C)C)(OC(C)C)OC(C)C)C',
-  'Tetrakis(2,4-pentanedionato)titanium(IV)': '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]CCC.[O-]CCC.[Ti+4]',
-  'Tetrakis(acetonitrile)copper(I) Hexafluorophosphate': 'CC#N.CC#N.CC#N.CC#N.F[P-](F)(F)(F)(F)F.[Cu+]',
-  'Tetrakis(acetonitrile)copper(I) Tetrafluoroborate': 'CC#N.CC#N.CC#N.CC#N.F[B-](F)(F)F.[Cu+]',
-  'Tetrakis(acetonitrile)palladium(II) Bis(trifluoromethanesulfonate)': 'CC#N.CC#N.CC#N.CC#N.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Pd+2]',
-  'Tetrakis(decyl)ammonium hydroxide': 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[OH-]',
-  'Tetrakis(dimethylamino)titanium(IV)': 'CN([Ti](N(C)C)(N(C)C)N(C)C)C',
-  'Tetrakis(dimethylsilyl)silane': 'C[SiH]([Si]([SiH](C)C)([SiH](C)C)[SiH](C)C)C',
-  'Tetrakis(dimethylsilyloxy)silane': 'C[SiH](O[Si](O[SiH](C)C)(O[SiH](C)C)O[SiH](C)C)C',
-  'Tetrakis(hydroxymethyl)phosphonium Chloride': 'OC[P+](CO)(CO)CO.[Cl-]',
-  'Tetrakis(hydroxymethyl)phosphonium Sulfate': 'OC[P+](CO)(CO)CO.OC[P+](CO)(CO)CO.O=S([O-])([O-])=O',
-  'Tetrakis(trimethylsilyl)silane': 'C[Si]([Si]([Si](C)(C)C)([Si](C)(C)C)[Si](C)(C)C)(C)C',
-  'Tetrakis(triphenylphosphine)palladium(0)': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  Tetrakis: 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  'Pd(Ph3)4': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  'Tetrakis[dimethyl(vinyl)silyl] Orthosilicate': 'C=C[Si](O[Si](O[Si](C)(C)C=C)(O[Si](C)(C)C=C)O[Si](C)(C)C=C)(C)C',
-  'Tetramethylammonium Acetate': 'C[N+](C)(C)C.CC([O-])=O',
-  'Tetramethylammonium Borohydride': 'C[N+](C)(C)C.[BH4-]',
-  'Tetramethylammonium Bromide': 'C[N+](C)(C)C.[Br-]',
-  'Tetramethylammonium Chloride': 'C[N+](C)(C)C.[Cl-]',
-  'Tetramethylammonium Dichloroiodate': 'C[N+](C)(C)C.Cl[I-]Cl',
-  'Tetramethylammonium Fluoride Tetrahydrate': 'C[N+](C)(C)C.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[F-]',
-  'Tetramethylammonium Hexafluorophosphate': 'C[N+](C)(C)C.F[P-](F)(F)(F)(F)F',
-  'Tetramethylammonium Hydroxide': 'C[N+](C)(C)C.[OH-]',
-  'Tetramethylammonium Iodide': 'C[N+](C)(C)C.[I-]',
-  'Tetramethylammonium Sulfate': 'C[N+](C)(C)C.C[N+](C)(C)C.O=S([O-])([O-])=O',
-  'Tetramethylammonium Tetrafluoroborate': 'C[N+](C)(C)C.F[B-](F)(F)F',
-  'Tetramethylammonium Triacetoxyborohydride': 'C[N+](C)(C)C.O=C(O[BH-](OC(C)=O)OC(C)=O)C',
-  'Tetramethylethylenediamine (TMEDA)': 'CN(C)CCN(C)C',
-  Tetramethylgermane: 'C[Ge](C)(C)C',
-  Tetramethylsilane: 'C[Si](C)(C)C',
-  TMS: 'C[Si](C)(C)C',
-  'Tetra-n-octylammonium Bromide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
-  'Tetra-n-octylammonium Iodide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[I-]',
-  'Tetra-n-octylphosphonium Bromide': 'CCCCCCCC[P+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
-  'Tetraoctylammonium hydroxide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[OH-]',
-  'Tetrapentylammonium hydroxide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[OH-]',
-  'Tetraphenyl Lead': 'C1([Pb](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  'Tetraphenylarsonium Chloride Hydrochloride Hydrate': '[H]O[H].[H]Cl.C1([As+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
-  Tetraphenylcyclopentadienone: 'O=C1C(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=CC=C5',
-  Tetraphenylgermane: 'C1([Ge](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  'Tetraphenylphosphonium Bromide': 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Br-]',
-  'Tetraphenylphosphonium Chloride': 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
-  Tetraphenylporphyrin: 'C1(C2=CC=CC=C2)=C3C=CC(C(C4=CC=CC=C4)=C5C=CC(N5)=C(C6=CC=CC=C6)C(C=C7)=NC7=C(C8=CC=CC=C8)C9=CC=C1N9)=N3',
-  Tetraphenylsilane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  Tetraphenyltin: 'C1([Sn](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  'Tetrapropyl Orthosilicate': 'CCCO[Si](OCCC)(OCCC)OCCC',
-  'Tetrapropylammonium Bromide': 'CCC[N+](CCC)(CCC)CCC.[Br-]',
-  'Tetrapropylammonium Chloride': 'CCC[N+](CCC)(CCC)CCC.[Cl-]',
-  'Tetrapropylammonium Hydroxide': 'CCC[N+](CCC)(CCC)CCC.[OH-]',
-  'Tetrapropylammonium Iodide': 'CCC[N+](CCC)(CCC)CCC.[I-]',
-  'Tetrapropylammonium Perruthenate': 'CCC[N+](CCC)(CCC)CCC.O=[Ru](=O)([O-])=O',
-  'Thallium(III) Trifluoroacetate': 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Tl+3]',
-  THF: 'C1CCCO1',
-  'Thioacetic Acid': 'CC(O)=S',
-  'Thioglycolic Acid': 'SCC(O)=O',
-  'Thionyl Chloride': 'O=S(Cl)Cl',
-  'Thiophosphoryl Chloride': 'OP(O)(Cl)=S',
-  Thulium: '[Tm]',
-  'Thulium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Tm+3]',
-  'tin hydroxide': '[Sn+4].[OH-].[OH-].[OH-].[OH-]',
-  'Tin(II) 2-Ethylhexanoate': 'CCCCC(CC)C([O-])=O.CCCCC(CC)C([O-])=O.[Sn+2]',
-  'Tin(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sn+2]',
-  'Tin(IV) Chloride': '[Sn+4].[Cl-].[Cl-].[Cl-].[Cl-]',
-  Titanium: '[Ti]',
-  'titanium hydroxide': '[Ti+4].[OH-].[OH-].[OH-].[OH-]',
-  'Titanium(IV) Chloride': '[Ti+4].[Cl-].[Cl-].[Cl-].[Cl-]',
-  'TMS-Imidazole (=N-Trimethylsilylimidazole)': 'C[Si](N1C=NC=C1)(C)C',
-  toluene: 'CC1=CC=CC=C1',
-  'trans,trans-1,5-Bis(4-fluorophenyl)-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(F)C=C1)/C=C/C2=CC=C(F)C=C2',
-  'trans,trans-1,5-Bis(4-methoxyphenyl)-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(OC)C=C1)/C=C/C2=CC=C(OC)C=C2',
-  'trans,trans-1,5-Bis[4-(trifluoromethyl)phenyl]-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(C(F)(F)F)C=C1)/C=C/C2=CC=C(C(F)(F)F)C=C2',
-  'trans,trans-1,5-Diphenyl-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2',
-  'trans-1,2-Bis(diphenylphosphino)ethylene': 'P(/C=C/P(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  'trans-2,6-Diisopropyl-N-(2-pyridylmethylene)aniline': 'CC(C1=C(C(C(C)C)=CC=C1)/N=C/C2=NC=CC=C2)C',
-  'trans-2-Butene-1,4-bis(triphenylphosphonium Chloride)': 'C1([P+](C/C=C/C[P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1.[Cl-].[Cl-]',
-  'trans-4-(tert-Butyldiphenylsilyloxy)-L-proline': 'O=C(O)[C@H]1NC[C@H](O[Si](C2=CC=CC=C2)(C(C)(C)C)C3=CC=CC=C3)C1',
-  'trans-4-Fluoro-L-proline': 'O=C(O)[C@H]1NC[C@H](F)C1',
-  'Tri(2-furyl)phosphine': 'P(C1=CC=CO1)(C2=CC=CO2)C3=CC=CO3',
-  'Tri(2-thienyl)phosphine': 'P(C1=CC=CS1)(C2=CC=CS2)C3=CC=CS3',
-  'Tri(cyclohexa-2,5-dien-1-yl)silane': '[SiH](C1C=CCC=C1)(C2C=CCC=C2)C3C=CCC=C3',
-  'Tri(m-tolyl)phosphine': 'CC1=CC(P(C2=CC=CC(C)=C2)C3=CC=CC(C)=C3)=CC=C1',
-  'Tri(o-tolyl)phosphine': 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C',
-  'Tri(p-tolyl)phosphine': 'CC1=CC=C(P(C2=CC=C(C)C=C2)C3=CC=C(C)C=C3)C=C1',
-  Triacetoxyborohydride: 'O=C(O[BH-](OC(C)=O)OC(C)=O)C',
-  Triacetoxyethylsilane: 'CC[Si](OC(C)=O)(OC(C)=O)OC(C)=O',
-  'Triallyl(methyl)silane': 'C[Si](CC=C)(CC=C)CC=C',
-  'Triallyl(phenyl)silane': 'C=CC[Si](CC=C)(CC=C)C1=CC=CC=C1',
-  Tribenzylsilane: '[SiH](CC1=CC=CC=C1)(CC2=CC=CC=C2)CC3=CC=CC=C3',
-  'Tribromoacetic Acid': 'O=C(O)C(Br)(Br)Br',
-  'Tributyl borate': 'B(OCCCC)(OCCCC)OCCCC',
-  'Tributyl(2-methoxyethyl)phosphonium Bis(trifluoromethanesulfonyl)imide': 'CCCC[P+](CCCC)(CCCC)CCOC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
-  'Tributyl(cyanomethyl)phosphonium Chloride': 'N#CC[P+](CCCC)(CCCC)CCCC.[Cl-]',
-  'Tributyl(ethyl)phosphonium Diethyl Phosphate': 'CC[P+](CCCC)(CCCC)CCCC.O=P(OCC)([O-])OCC',
-  'Tributyl(methyl)ammonium Dicyanamide': '[H]C(C([H])([H])C([H])([H])C([H])([H])[H])([H])[N+](C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H])(C([H])([H])[H])C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H].[N-]=C=NC#N',
-  Tributylamine: 'CCCCN(CCCC)CCCC',
-  Tributylchlorosilane: 'Cl[Si](CCCC)(CCCC)CCCC',
-  'Tributyldodecylphosphonium Bromide': 'CCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  'Tributylhexadecylphosphonium Bromide': 'CCCCCCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  'Tributylmethylammonium Bis(trifluoromethanesulfonyl)imide': 'FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F.C[N+](CCCC)(CCCC)CCCC',
-  'Tributylmethylammonium Chloride': 'C[N+](CCCC)(CCCC)CCCC.[Cl-]',
-  'Tributylmethylphosphonium Bis(trifluoromethanesulfonyl)imide': 'C[P+](CCCC)(CCCC)CCCC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
-  'Tributylmethylphosphonium Iodide': 'C[P+](CCCC)(CCCC)CCCC.[I-]',
-  'Tributyl-n-octylphosphonium Bromide': 'CCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  'Tributylphosphine Oxide': 'CCCCP(CCCC)(CCCC)=O',
-  Tributylsilane: 'CCCC[SiH](CCCC)CCCC',
-  'Tributylsulfonium Iodide': 'CCCC[S+](CCCC)CCCC.[I-]',
-  'Tricarbonyl(cyclooctatetraene)iron': '[C]=O.[C]=O.[C]=O.[Fe].C1=C\\C=C/C=C\\C=C/1',
-  'Trichloro(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](Cl)(Cl)Cl',
-  'Trichloro-2-cyanoethylsilane': 'N#CCC[Si](Cl)(Cl)Cl',
-  'Trichloroacetic Acid': 'O=C(O)C(Cl)(Cl)Cl',
-  Trichlorocyclopentylsilane: 'Cl[Si](Cl)(Cl)C1CCCC1',
-  'Trichloroisocyanuric Acid': 'O=C(N(Cl)C(N1Cl)=O)N(Cl)C1=O',
-  'Trichloromethanesulfonyl Chloride': 'O=S(C(Cl)(Cl)Cl)(Cl)=O',
-  Tricyclohexylphosphine: 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3',
-  'Tricyclohexylphosphonium Tetrafluoroborate': 'F[B-](F)(F)F.[PH+](C1CCCCC1)(C2CCCCC2)C3CCCCC3',
-  'Triethoxy(3-glycidyloxypropyl)silane': 'CCO[Si](OCC)(OCC)CCCOCC1CO1',
-  'Triethoxy(pentafluorophenyl)silane': 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](OCC)(OCC)OCC',
-  'Triethoxy(propyl)silane': 'CCC[Si](OCC)(OCC)OCC',
-  'Triethoxy[2-(7-oxabicyclo[4.1.0]heptan-3-yl)ethyl]silane': 'CCO[Si](OCC)(OCC)CCC1CC2OC2CC1',
-  'Triethoxy-1H,1H,2H,2H-tridecafluoro-n-octylsilane': 'F[SiH2]C(F)(F)CC(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(OCC)(OCC)OCC',
-  Triethoxyethylsilane: 'CC[Si](OCC)(OCC)OCC',
-  Triethoxyfluorosilane: 'F[Si](OCC)(OCC)OCC',
-  Triethoxymethylsilane: 'C[Si](OCC)(OCC)OCC',
-  'Triethoxy-n-octylsilane': 'CCCCCCCC[Si](OCC)(OCC)OCC',
-  Triethoxyphenylsilane: 'CCO[Si](OCC)(OCC)C1=CC=CC=C1',
-  Triethoxyvinylsilane: 'C=C[Si](OCC)(OCC)OCC',
-  'Triethyl 2-Fluoro-2-phosphonoacetate': 'O=C(OCC)C(F)P(OCC)(OCC)=O',
-  'Triethyl(trifluoromethyl)silane': 'FC([Si](CC)(CC)CC)(F)F',
-  Triethylamine: 'CCN(CC)CC',
-  'Triethylamine Borane': 'CCN(CC)CC.B',
-  'Triethylamine Trihydrofluoride': 'CCN(CC)CC.[H]F.[H]F.[H]F',
-  Triethylchlorogermane: 'Cl[Ge](CC)(CC)CC',
-  Triethylenetetramine: 'NCCNCCNCCN',
-  'Triethylmethylammonium Chloride': 'C[N+](CC)(CC)CC.[Cl-]',
-  'Triethylmethylammonium hydroxide': 'C[N+](CC)(CC)CC.[OH-]',
-  'Triethylphenylammonium Chloride': 'CC[N+](CC)(CC)C1=CC=CC=C1.[Cl-]',
-  Triethylsilane: 'CC[SiH](CC)CC',
-  TES: 'CC[SiH](CC)CC',
-  Triethylsilanol: 'O[Si](CC)(CC)CC',
-  Triethylsilylacetylene: 'C#C[Si](CC)(CC)CC',
-  'Triethylsulfonium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC[S+](CC)CC',
-  Triethylvinylsilane: 'C=C[Si](CC)(CC)CC',
-  'Trifluoroacetic Acid': 'O=C(O)C(F)(F)F',
-  TFA: 'O=C(O)C(F)(F)F',
-  'Trifluoroacetic Anhydride': 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
-  TFAA: 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
-  'Trifluoroacetyl Triflate': 'O=S(OC(C(F)(F)F)=O)(C(F)(F)F)=O',
-  Trifluoroacetylacetone: 'O=C(CC(C)=O)C(F)(F)F',
-  'Trifluoroboronic acid diethyletherate': 'FB(F)F.CCOCC',
-  Trifluoromethanesulfonanilide: 'O=S(C(F)(F)F)(NC1=CC=CC=C1)=O',
-  'Trifluoromethanesulfonic Acid': 'O=S(C(F)(F)F)(O)=O',
-  'Trifluoromethanesulfonic Anhydride': 'O=S(C(F)(F)F)(OS(C(F)(F)F)(=O)=O)=O',
-  'Trifluoromethanesulfonyl Chloride': 'O=S(C(F)(F)F)(Cl)=O',
-  'Trihexyl(tetradecyl)phosphonium Chloride': 'CCCCCCCCCCCCCC[P+](CCCCCC)(CCCCCC)CCCCCC.[Cl-]',
-  'Trihexyl(tetradecyl)phosphonium Dicyanamide': 'CCCCCC[P+](CCCCCC)(CCCCCC)CCCCCCCCCCCCCC.N#C[N-]C#N',
-  Trihexylphosphine: 'CCCCCCP(CCCCCC)CCCCCC',
-  Trihexylsilane: 'CCCCCC[SiH](CCCCCC)CCCCCC',
-  'Triisopropyl[(trimethylsilyl)ethynyl]silane': 'C[Si](C#C[Si](C(C)C)(C(C)C)C(C)C)(C)C',
-  Triisopropylsilane: 'CC([SiH](C(C)C)C(C)C)C',
-  Triisopropylsilylacetylene: 'C#C[Si](C(C)C)(C(C)C)C(C)C',
-  'Trimagnesium Dicitrate Nonahydrate': 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mg+2].[Mg+2].[Mg+2]',
-  'Trimethoxy(1H,1H,2H,2H-tridecafluoro-n-octyl)silane': 'FC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)(F)CC[Si](OC)(OC)OC',
-  'Trimethoxy(2-phenylethyl)silane': 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
-  'Trimethoxy(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](OC)(OC)OC',
-  'Trimethoxy(4-methoxyphenyl)silane': 'COC1=CC=C([Si](OC)(OC)OC)C=C1',
-  'Trimethoxy(methyl)silane': 'C[Si](OC)(OC)OC',
-  'Trimethoxy(phenylethyl)silane': 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
-  'Trimethoxy(propyl)silane': 'CCC[Si](OC)(OC)OC',
-  'Trimethoxy[3-(methylamino)propyl]silane': 'CNCCC[Si](OC)(OC)OC',
-  'Trimethoxy[3-(phenylamino)propyl]silane': 'CO[Si](OC)(OC)CCCNC1=CC=CC=C1',
-  'Trimethoxy-n-octylsilane': 'CCCCCCCC[Si](OC)(OC)OC',
-  Trimethoxyphenylsilane: 'CO[Si](OC)(OC)C1=CC=CC=C1',
+  "Samarium": '[Sm]',
+  "Samarium(II) Iodide": '[Sm+2].[I-].[I-]',
+  "Scandium": '[Sc]',
+  "Scandium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sc+3]',
+  "sec-Butyllithium": '[Li]C(C)CC',
+  "sec-Butylmagnesium Bromide": 'Br[Mg]C(C)CC',
+  "sec-Butylmagnesium chloride": 'Cl[Mg]C(C)CC',
+  "sec-Butylmagnesium Chloride - Lithium Chloride": 'Cl[Mg]C(C)CC.[Li+].[Cl-]',
+  "Selenium dioxide": 'O=[Se]=O',
+  "SeO2": 'O=[Se]=O',
+  "S-Ethyl Trifluorothioacetate": 'O=C(SCC)C(F)(F)F',
+  "Silver": '[Ag]',
+  "Silver Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.[Ag+]',
+  "Silver(I) Trifluoromethanethiolate": '[S-]C(F)(F)F.[Ag+]',
+  "Silver(II) picolinate": 'O=C([O-])C1=NC=CC=C1.O=C([O-])C2=NC=CC=C2.[Ag+2]',
+  "Silver(II) Pyridine-2-carboxylate": 'O=C(C1=NC=CC=C1)[O-].O=C(C2=NC=CC=C2)[O-].[Ag+2]',
+  "Sodium (Trihydroxy)phenylborate": 'O[B-](O)(O)C1=CC=CC=C1.[Na+]',
+  "Sodium amide": '[Na+].[NH2-]',
+  "NaNH2": '[Na+].[NH2-]',
+  "Sodium ascorbate": '[O-]C([C@H](O1)[C@H](CO)O)=C(O)C1=O.[Na+]',
+  "sodium azide": '[N-]=[N+]=[N-].[Na+]',
+  "NaN3": '[N-]=[N+]=[N-].[Na+]',
+  "Sodium Bis(2-methoxyethoxy)aluminum Dihydride": 'COCCO[Al+]OCCOC.[Na+].[H-].[H-]',
+  "Sodium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[Na+]',
+  "Sodium Borohydride": '[Na+].[BH4-]',
+  "NaBH4": '[Na+].[BH4-]',
+  "sodium bromate": 'O=Br([O-])=O.[Na+]',
+  "sodium bromide": '[Na+].[Br-]',
+  "NaBr": '[Na+].[Br-]',
+  "Sodium Bromodifluoroacetate": 'O=C([O-])C(F)(Br)F.[Na+]',
+  "sodium carbonate": '[O-]C([O-])=O.[Na+].[Na+]',
+  "Na2CO3": '[O-]C([O-])=O.[Na+].[Na+]',
+  "Sodium carbonate decahydrate": '[O-]C([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
+  "sodium chloride": '[Na+].[Cl-]',
+  "NaCl": '[Na+].[Cl-]',
+  "Sodium Chlorodifluoroacetate": 'O=C([O-])C(F)(Cl)F.[Na+]',
+  "Sodium Cyanoborohydride": '[BH3-]C#N.[Na+]',
+  "sodium cycanide": '[C-]#N.[Na+]',
+  "NaCN": '[C-]#N.[Na+]',
+  "sodium D,L lactate": 'OC(C)C([O-])=O.[Na+]',
+  "Sodium Dichloroisocyanurate": 'ClN1C([N-]C(N(C1=O)Cl)=O)=O.[Na+]',
+  "Sodium dichloroisocyanurate dihydrate": 'O=C1N=C([O-])N(Cl)C(N1Cl)=O.O.O.[Na+]',
+  "Sodium dichromate dihydrate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[H]O[H].[H]O[H].[Na+].[Na+]',
+  "Sodium Diphenylphosphinobenzene-3-sulfonate": 'O=S(C1=CC(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=C1)([O-])=O.[Na+]',
+  "Sodium Ethoxide": 'CC[O-].[Na+]',
+  "NaOEt": 'CC[O-].[Na+]',
+  "sodium fluoride": '[Na+].[F-]',
+  "NaF": '[Na+].[F-]',
+  "Sodium hydride": '[NaH]',
+  "NaH": '[NaH]',
+  "sodium hydrogen difluoride": '[Na+].[H+].[F-].[F-]',
+  "Sodium hydrogen periodate": 'O=I(=O)([O-])=O.O=I(=O)([O-])=O.[Na+].[H+]',
+  "Sodium Hydroxide": '[Na+].[OH-]',
+  "NaOH": '[Na+].[OH-]',
+  "Sodium Hypochlorite Pentahydrate": 'Cl[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+]',
+  "Sodium iodide": '[Na+].[I-]',
+  "NaI": '[Na+].[I-]',
+  "sodium L-tartrate": 'O[C@H]([C@H](C([O-])=O)O)C([O-])=O.[Na+].[Na+]',
+  "Sodium Methoxide": 'C[O-].[Na+]',
+  "NaOMe": 'C[O-].[Na+]',
+  "Sodium nitrate": '[N+](=O)([O-])[O-].[Na+]',
+  "NaNO3": '[N+](=O)([O-])[O-].[Na+]',
+  "Sodium percarbonate": 'O=C(O[O-])[O-].[Na+].[Na+]',
+  "sodium perchlorate": 'O=Cl(=O)([O-])=O.[Na+]',
+  "Sodium permanganate": 'O=[Mn](=O)([O-])=O.[Na+]',
+  "NaMnO4": 'O=[Mn](=O)([O-])=O.[Na+]',
+  "Sodium peroxide": '[O-][O-].[Na+].[Na+]',
+  "Na2O2": '[O-][O-].[Na+].[Na+]',
+  "sodium persulfate": '[O-]S(=O)(OOS(=O)([O-])=O)=O.[Na+].[Na+]',
+  "Sodium phosphomolybdate hydrate": 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[Na+]',
+  "sodium sulfite": 'O=S([O-])[O-].[Na+].[Na+]',
+  "Sodium Tellurite Pentahydrate": 'O=[Te]([O-])[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
+  "sodium tetraborate": 'O[B-]12OBO[B-](OBO2)(O)O1.[Na+].[Na+]',
+  "Sodium Tetrachloropalladate(II)": 'Cl[Pd-2](Cl)(Cl)Cl.[Na+].[Na+]',
+  "Sodium Tetrafluoroborate": 'F[B-](F)(F)F.[Na+]',
+  "Sodium Triacetoxyborohydride": 'O=C(O[BH-](OC(C)=O)OC(C)=O)C.[Na+]',
+  "Sodium Trifluoroacetate": 'O=C([O-])C(F)(F)F.[Na+]',
+  "Sodium Trifluoromethanesulfinate": 'O=S(C(F)(F)F)[O-].[Na+]',
+  "Sodium trimethylsilanolate": '[O-][Si](C)(C)C.[Na+]',
+  "Sodium Tris(1,1,1,3,3,3-hexafluoroisopropoxy)borohydride": 'FC(F)(C(C(F)(F)F)O[BH-](OC(C(F)(F)F)C(F)(F)F)OC(C(F)(F)F)C(F)(F)F)F.[Na+]',
+  "Sodium tert-Butoxide": 'CC(C)([O-])C.[Na+]',
+  "Sodium tert-Pentoxide": 'CCC(C)([O-])C.[Na+]',
+  "Sorbic Acid": 'C/C=C/C=C/C(O)=O',
+  "Strontium hydroxide": '[Sr+2].[OH-].[OH-]',
+  "STRONTIUM HYDROXIDE OCTAHYDRATE": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Sr+2].[OH-].[OH-]',
+  "Strontium peroxide": '[O-][O-].[Sr+2]',
+  "Succinic Acid": 'O=C(O)CCC(O)=O',
+  "Sulfanilic Acid": 'O=S(O)(C1=CC=C(N)C=C1)=O',
+  "sulfolane": 'O=S1(CCCC1)=O',
+  "Sulfur Trioxide": 'O=S(=O)=O',
+  "SO3": 'O=S(=O)=O',
+  "Sulfur Trioxide - Triethylamine Complex": 'O=S(=O)=O.CCN(CC)CC',
+  "Sulfuric acid": 'O=S(O)(O)=O',
+  "H2SO4": 'O=S(O)(O)=O',
+  "Sulfuryl chloride": 'O=S(Cl)(Cl)=O',
+  "SO2Cl2": 'O=S(Cl)(Cl)=O',
+  "Tebbe reagent": 'C[Al-]1(C[Ti+2][Cl+]1)C.[cH-]1cccc1.[cH-]1cccc1',
+  "Telluric Acid": 'O=[Te](O)(O)=O',
+  "Tellurium(IV) Oxide": '[Te+4].[O-2].[O-2]',
+  "Terbium": '[Tb]',
+  "tert-Butyl hydroperoxide": 'CC(C)(OO)C',
+  "TBHP": 'CC(C)(OO)C',
+  "tert-Butyl Hydroperoxide": 'CC(C)(OO)C',
+  "tert-Butyldimethylsilane": 'C[SiH](C(C)(C)C)C',
+  "tert-Butyldimethylsilanol": 'O[Si](C)(C(C)(C)C)C',
+  "tert-Butyldiphenylsilane": 'CC([SiH](C1=CC=CC=C1)C2=CC=CC=C2)(C)C',
+  "tert-Butyllithium": '[Li]C(C)(C)C',
+  "tBuLi": '[Li]C(C)(C)C',
+  "tert-Butylmagnesium Chloride": 'Cl[Mg]C(C)(C)C',
+  "tert-Butylmethoxyphenylsilyl Bromide": 'CO[Si](C(C)(C)C)(Br)C1=CC=CC=C1',
+  "Tetra(decyl)ammonium Bromide": 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[Br-]',
+  "Tetraallyltin": 'C=CC[Sn](CC=C)(CC=C)CC=C',
+  "Tetraamylammonium Bromide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Br-]',
+  "Tetraamylammonium Chloride": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Cl-]',
+  "Tetraamylammonium Iodide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[I-]',
+  "Tetrabromofluorescein": 'O=C1OC2(C3=C(OC4=C2C=CC(O)=C4)C=C(O)C=C3)C5=C1C(Br)=C(Br)C(Br)=C5Br',
+  "Tetrabutyl Orthosilicate": 'CCCCO[Si](OCCCC)(OCCCC)OCCCC',
+  "Tetrabutyl Orthotitanate": 'CCCCO[Ti](OCCCC)(OCCCC)OCCCC',
+  "Tetrabutyl Orthotitanate Tetramer": '[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[Ti+4].[Ti+4].[O-2].[O-2].[Ti+4].[O-2].[Ti+4]',
+  "Tetrabutylammonium (meta)periodate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=I(=O)([O-])=O',
+  "Tetrabutylammonium Acetate": 'CCCC[N+](CCCC)(CCCC)CCCC.CC([O-])=O',
+  "Tetrabutylammonium Bifluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[H]F.[F-]',
+  "Tetrabutylammonium Borohydride": 'CCCC[N+](CCCC)(CCCC)CCCC.[BH4-]',
+  "Tetrabutylammonium Bromide": 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-]',
+  "Tetrabutylammonium Chloride": 'CCCC[N+](CCCC)(CCCC)CCCC.[Cl-]',
+  "Tetrabutylammonium chlorochromate": 'CCCC[N+](CCCC)(CCCC)CCCC.[O-][Cr](=O)(Cl)=O',
+  "Tetrabutylammonium Difluorotriphenylstannate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[Sn-](C1=CC=CC=C1)(C2=CC=CC=C2)(F)C3=CC=CC=C3',
+  "Tetrabutylammonium Dihydrogen Trifluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[H+].[H+].[F-].[F-].[F-]',
+  "Tetrabutylammonium ethoxide": 'CCCC[N+](CCCC)(CCCC)CCCC.CC[O-]',
+  "Tetrabutylammonium Fluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[F-]',
+  "Tetrabutylammonium Fluoride Hydrate": 'CCCC[N+](CCCC)(CCCC)CCCC.[H]O[H].[F-]',
+  "Tetrabutylammonium Hexafluorophosphate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
+  "Tetrabutylammonium Hydrogen Sulfate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(O)([O-])=O',
+  "Tetrabutylammonium hydroxide": 'CCCC[N+](CCCC)(CCCC)CCCC.[OH-]',
+  "Tetrabutylammonium Iodide": 'CCCC[N+](CCCC)(CCCC)CCCC.[I-]',
+  "Tetrabutylammonium methoxide": 'CCCC[N+](CCCC)(CCCC)CCCC.C[O-]',
+  "Tetrabutylammonium Perchlorate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=Cl(=O)([O-])=O',
+  "Tetrabutylammonium Perrhenate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=[Re](=O)([O-])=O',
+  "Tetrabutylammonium Tetrafluoroborate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
+  "Tetrabutylammonium Tetraphenylborate": 'CCCC[N+](CCCC)(CCCC)CCCC.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Tetrabutylammonium Thiocyanate": 'CCCC[N+](CCCC)(CCCC)CCCC.[S-]C#N',
+  "Tetrabutylammonium Tribromide": 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-].[Br-].[Br-]',
+  "Tetrabutylammonium Trifluoromethanesulfonate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(C(F)(F)F)([O-])=O',
+  "Tetrabutylammonium Triiodide": 'CCCC[N+](CCCC)(CCCC)CCCC.[I-].[I-].[I-]',
+  "Tetrabutylgermane": 'CCCC[Ge](CCCC)(CCCC)CCCC',
+  "Tetrabutylphosphonium Bromide": 'CCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  "Tetrabutylphosphonium Chloride": 'CCCC[P+](CCCC)(CCCC)CCCC.[Cl-]',
+  "Tetrabutylphosphonium Hexafluorophosphate": 'CCCC[P+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
+  "Tetrabutylphosphonium Hydroxide": 'CCCC[P+](CCCC)(CCCC)CCCC.[OH-]',
+  "Tetrabutylphosphonium malonate": 'CCCC[P+](CCCC)(CCCC)CCCC.CCCC[P+](CCCC)(CCCC)CCCC.O=C([O-])CC([O-])=O',
+  "Tetrabutylphosphonium Tetrafluoroborate": 'CCCC[P+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
+  "Tetrabutyltin": 'CCCC[Sn](CCCC)(CCCC)CCCC',
+  "Tetracyanoethylene": 'N#CC(C#N)=C(C#N)C#N',
+  "Tetradecamethylcycloheptasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  "Tetradecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCCCC)C.[Br-]',
+  "Tetraethyl 1,4,8,11-Tetraazacyclotetradecane-1,4,8,11-tetraacetate": 'O=C(OCC)CN1CCN(CC(OCC)=O)CCCN(CC(OCC)=O)CCN(CC(OCC)=O)CCC1',
+  "Tetraethyl Orthosilicate": 'CCO[Si](OCC)(OCC)OCC',
+  "Tetraethylammonium Borohydride": 'CC[N+](CC)(CC)CC.[BH4-]',
+  "Tetraethylammonium Bromide": 'CC[N+](CC)(CC)CC.[Br-]',
+  "Tetraethylammonium Chloride": 'CC[N+](CC)(CC)CC.[Cl-]',
+  "Tetraethylammonium Fluoride Tetrahydrofluoride": 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[H]F.[F-]',
+  "Tetraethylammonium Fluoride Trihydrofluoride": 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[F-]',
+  "Tetraethylammonium Hydroxide": 'CC[N+](CC)(CC)CC.[OH-]',
+  "Tetraethylammonium Iodide": 'CC[N+](CC)(CC)CC.[I-]',
+  "Tetraethylammonium Nitrate": 'CC[N+](CC)(CC)CC.[O-][N+]([O-])=O',
+  "Tetraethylammonium Tetrafluoroborate": 'CC[N+](CC)(CC)CC.F[B-](F)(F)F',
+  "Tetraethylammonium Trifluoromethanesulfonate": 'CC[N+](CC)(CC)CC.O=S(C(F)(F)F)([O-])=O',
+  "Tetraethylammonium p-Toluenesulfonate": 'CC[N+](CC)(CC)CC.CC1=CC=C(S(=O)([O-])=O)C=C1',
+  "Tetraethylgermane": 'CC[Ge](CC)(CC)CC',
+  "Tetraethylphosphonium Bromide": 'CC[P+](CC)(CC)CC.[Br-]',
+  "Tetraethylphosphonium Hexafluorophosphate": 'CC[P+](CC)(CC)CC.F[P-](F)(F)(F)(F)F',
+  "Tetraethylphosphonium Tetrafluoroborate": 'CC[P+](CC)(CC)CC.F[B-](F)(F)F',
+  "Tetraethylsilane": 'CC[Si](CC)(CC)CC',
+  "Tetrafluoroboronic acid diethylether complex": 'F[B-](F)(F)F.CCOCC.[H+]',
+  "Tetraheptylammonium Bromide": 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[Br-]',
+  "Tetraheptylammonium Iodide": 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[I-]',
+  "Tetrahexylammonium Bromide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[Br-]',
+  "Tetrahexylammonium Hydrogen Sulfate": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.O=S(O)([O-])=O',
+  "Tetrahexylammonium Hydroxide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[OH-]',
+  "Tetrahexylammonium Iodide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[I-]',
+  "Tetrahydroxydiboron": 'OB(O)B(O)O',
+  "tetrahydroxytitanium": 'O[Ti](O)(O)O',
+  "Tetraisobutyl Orthotitanate": 'CC(C)CO[Ti](OCC(C)C)(OCC(C)C)OCC(C)C',
+  "Tetraisopropyl Orthosilicate": 'CC(O[Si](OC(C)C)(OC(C)C)OC(C)C)C',
+  "Tetraisopropyl Orthotitanate": 'CC(O[Ti](OC(C)C)(OC(C)C)OC(C)C)C',
+  "Tetrakis(2,4-pentanedionato)titanium(IV)": '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]CCC.[O-]CCC.[Ti+4]',
+  "Tetrakis(acetonitrile)copper(I) Hexafluorophosphate": 'CC#N.CC#N.CC#N.CC#N.F[P-](F)(F)(F)(F)F.[Cu+]',
+  "Tetrakis(acetonitrile)copper(I) Tetrafluoroborate": 'CC#N.CC#N.CC#N.CC#N.F[B-](F)(F)F.[Cu+]',
+  "Tetrakis(acetonitrile)palladium(II) Bis(trifluoromethanesulfonate)": 'CC#N.CC#N.CC#N.CC#N.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Pd+2]',
+  "Tetrakis(decyl)ammonium hydroxide": 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[OH-]',
+  "Tetrakis(dimethylamino)titanium(IV)": 'CN([Ti](N(C)C)(N(C)C)N(C)C)C',
+  "Tetrakis(dimethylsilyl)silane": 'C[SiH]([Si]([SiH](C)C)([SiH](C)C)[SiH](C)C)C',
+  "Tetrakis(dimethylsilyloxy)silane": 'C[SiH](O[Si](O[SiH](C)C)(O[SiH](C)C)O[SiH](C)C)C',
+  "Tetrakis(hydroxymethyl)phosphonium Chloride": 'OC[P+](CO)(CO)CO.[Cl-]',
+  "Tetrakis(hydroxymethyl)phosphonium Sulfate": 'OC[P+](CO)(CO)CO.OC[P+](CO)(CO)CO.O=S([O-])([O-])=O',
+  "Tetrakis(trimethylsilyl)silane": 'C[Si]([Si]([Si](C)(C)C)([Si](C)(C)C)[Si](C)(C)C)(C)C',
+  "Tetrakis(triphenylphosphine)palladium(0)": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  "Tetrakis": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  "Pd(Ph3)4": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  "Tetrakis[dimethyl(vinyl)silyl] Orthosilicate": 'C=C[Si](O[Si](O[Si](C)(C)C=C)(O[Si](C)(C)C=C)O[Si](C)(C)C=C)(C)C',
+  "Tetramethylammonium Acetate": 'C[N+](C)(C)C.CC([O-])=O',
+  "Tetramethylammonium Borohydride": 'C[N+](C)(C)C.[BH4-]',
+  "Tetramethylammonium Bromide": 'C[N+](C)(C)C.[Br-]',
+  "Tetramethylammonium Chloride": 'C[N+](C)(C)C.[Cl-]',
+  "Tetramethylammonium Dichloroiodate": 'C[N+](C)(C)C.Cl[I-]Cl',
+  "Tetramethylammonium Fluoride Tetrahydrate": 'C[N+](C)(C)C.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[F-]',
+  "Tetramethylammonium Hexafluorophosphate": 'C[N+](C)(C)C.F[P-](F)(F)(F)(F)F',
+  "Tetramethylammonium Hydroxide": 'C[N+](C)(C)C.[OH-]',
+  "Tetramethylammonium Iodide": 'C[N+](C)(C)C.[I-]',
+  "Tetramethylammonium Sulfate": 'C[N+](C)(C)C.C[N+](C)(C)C.O=S([O-])([O-])=O',
+  "Tetramethylammonium Tetrafluoroborate": 'C[N+](C)(C)C.F[B-](F)(F)F',
+  "Tetramethylammonium Triacetoxyborohydride": 'C[N+](C)(C)C.O=C(O[BH-](OC(C)=O)OC(C)=O)C',
+  "Tetramethylgermane": 'C[Ge](C)(C)C',
+  "Tetramethylsilane": 'C[Si](C)(C)C',
+  "TMS": 'C[Si](C)(C)C',
+  "Tetra-n-octylammonium Bromide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
+  "Tetra-n-octylammonium Iodide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[I-]',
+  "Tetra-n-octylphosphonium Bromide": 'CCCCCCCC[P+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
+  "Tetraoctylammonium hydroxide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[OH-]',
+  "Tetrapentylammonium hydroxide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[OH-]',
+  "Tetraphenyl Lead": 'C1([Pb](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Tetraphenylarsonium Chloride Hydrochloride Hydrate": '[H]O[H].[H]Cl.C1([As+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
+  "Tetraphenylcyclopentadienone": 'O=C1C(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=CC=C5',
+  "Tetraphenylgermane": 'C1([Ge](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Tetraphenylphosphonium Bromide": 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Br-]',
+  "Tetraphenylphosphonium Chloride": 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
+  "Tetraphenylporphyrin": 'C1(C2=CC=CC=C2)=C3C=CC(C(C4=CC=CC=C4)=C5C=CC(N5)=C(C6=CC=CC=C6)C(C=C7)=NC7=C(C8=CC=CC=C8)C9=CC=C1N9)=N3',
+  "Tetraphenylsilane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Tetraphenyltin": 'C1([Sn](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  "Tetrapropyl Orthosilicate": 'CCCO[Si](OCCC)(OCCC)OCCC',
+  "Tetrapropylammonium Bromide": 'CCC[N+](CCC)(CCC)CCC.[Br-]',
+  "Tetrapropylammonium Chloride": 'CCC[N+](CCC)(CCC)CCC.[Cl-]',
+  "Tetrapropylammonium Hydroxide": 'CCC[N+](CCC)(CCC)CCC.[OH-]',
+  "Tetrapropylammonium Iodide": 'CCC[N+](CCC)(CCC)CCC.[I-]',
+  "Tetrapropylammonium Perruthenate": 'CCC[N+](CCC)(CCC)CCC.O=[Ru](=O)([O-])=O',
+  "Thallium(III) Trifluoroacetate": 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Tl+3]',
+  "THF": 'C1CCCO1',
+  "Thioacetic Acid": 'CC(O)=S',
+  "Thioglycolic Acid": 'SCC(O)=O',
+  "Thionyl Chloride": 'O=S(Cl)Cl',
+  "Thiophosphoryl Chloride": 'OP(O)(Cl)=S',
+  "Thulium": '[Tm]',
+  "Thulium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Tm+3]',
+  "tin hydroxide": '[Sn+4].[OH-].[OH-].[OH-].[OH-]',
+  "Tin(II) 2-Ethylhexanoate": 'CCCCC(CC)C([O-])=O.CCCCC(CC)C([O-])=O.[Sn+2]',
+  "Tin(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sn+2]',
+  "Tin(IV) Chloride": '[Sn+4].[Cl-].[Cl-].[Cl-].[Cl-]',
+  "Titanium": '[Ti]',
+  "titanium hydroxide": '[Ti+4].[OH-].[OH-].[OH-].[OH-]',
+  "Titanium(IV) Chloride": '[Ti+4].[Cl-].[Cl-].[Cl-].[Cl-]',
+  "TMS-Imidazole (=N-Trimethylsilylimidazole)": 'C[Si](N1C=NC=C1)(C)C',
+  "toluene": 'CC1=CC=CC=C1',
+  "trans,trans-1,5-Bis(4-fluorophenyl)-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(F)C=C1)/C=C/C2=CC=C(F)C=C2',
+  "trans,trans-1,5-Bis(4-methoxyphenyl)-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(OC)C=C1)/C=C/C2=CC=C(OC)C=C2',
+  "trans,trans-1,5-Bis[4-(trifluoromethyl)phenyl]-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(C(F)(F)F)C=C1)/C=C/C2=CC=C(C(F)(F)F)C=C2',
+  "trans,trans-1,5-Diphenyl-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2',
+  "trans-1,2-Bis(diphenylphosphino)ethylene": 'P(/C=C/P(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  "trans-2,6-Diisopropyl-N-(2-pyridylmethylene)aniline": 'CC(C1=C(C(C(C)C)=CC=C1)/N=C/C2=NC=CC=C2)C',
+  "trans-2-Butene-1,4-bis(triphenylphosphonium Chloride)": 'C1([P+](C/C=C/C[P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1.[Cl-].[Cl-]',
+  "trans-4-(tert-Butyldiphenylsilyloxy)-L-proline": 'O=C(O)[C@H]1NC[C@H](O[Si](C2=CC=CC=C2)(C(C)(C)C)C3=CC=CC=C3)C1',
+  "trans-4-Fluoro-L-proline": 'O=C(O)[C@H]1NC[C@H](F)C1',
+  "Tri(2-furyl)phosphine": 'P(C1=CC=CO1)(C2=CC=CO2)C3=CC=CO3',
+  "Tri(2-thienyl)phosphine": 'P(C1=CC=CS1)(C2=CC=CS2)C3=CC=CS3',
+  "Tri(cyclohexa-2,5-dien-1-yl)silane": '[SiH](C1C=CCC=C1)(C2C=CCC=C2)C3C=CCC=C3',
+  "Tri(m-tolyl)phosphine": 'CC1=CC(P(C2=CC=CC(C)=C2)C3=CC=CC(C)=C3)=CC=C1',
+  "Tri(o-tolyl)phosphine": 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C',
+  "Tri(p-tolyl)phosphine": 'CC1=CC=C(P(C2=CC=C(C)C=C2)C3=CC=C(C)C=C3)C=C1',
+  "Triacetoxyborohydride": 'O=C(O[BH-](OC(C)=O)OC(C)=O)C',
+  "Triacetoxyethylsilane": 'CC[Si](OC(C)=O)(OC(C)=O)OC(C)=O',
+  "Triallyl(methyl)silane": 'C[Si](CC=C)(CC=C)CC=C',
+  "Triallyl(phenyl)silane": 'C=CC[Si](CC=C)(CC=C)C1=CC=CC=C1',
+  "Tribenzylsilane": '[SiH](CC1=CC=CC=C1)(CC2=CC=CC=C2)CC3=CC=CC=C3',
+  "Tribromoacetic Acid": 'O=C(O)C(Br)(Br)Br',
+  "Tributyl borate": 'B(OCCCC)(OCCCC)OCCCC',
+  "Tributyl(2-methoxyethyl)phosphonium Bis(trifluoromethanesulfonyl)imide": 'CCCC[P+](CCCC)(CCCC)CCOC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
+  "Tributyl(cyanomethyl)phosphonium Chloride": 'N#CC[P+](CCCC)(CCCC)CCCC.[Cl-]',
+  "Tributyl(ethyl)phosphonium Diethyl Phosphate": 'CC[P+](CCCC)(CCCC)CCCC.O=P(OCC)([O-])OCC',
+  "Tributyl(methyl)ammonium Dicyanamide": '[H]C(C([H])([H])C([H])([H])C([H])([H])[H])([H])[N+](C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H])(C([H])([H])[H])C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H].[N-]=C=NC#N',
+  "Tributylamine": 'CCCCN(CCCC)CCCC',
+  "Tributylchlorosilane": 'Cl[Si](CCCC)(CCCC)CCCC',
+  "Tributyldodecylphosphonium Bromide": 'CCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  "Tributylhexadecylphosphonium Bromide": 'CCCCCCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  "Tributylmethylammonium Bis(trifluoromethanesulfonyl)imide": 'FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F.C[N+](CCCC)(CCCC)CCCC',
+  "Tributylmethylammonium Chloride": 'C[N+](CCCC)(CCCC)CCCC.[Cl-]',
+  "Tributylmethylphosphonium Bis(trifluoromethanesulfonyl)imide": 'C[P+](CCCC)(CCCC)CCCC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
+  "Tributylmethylphosphonium Iodide": 'C[P+](CCCC)(CCCC)CCCC.[I-]',
+  "Tributyl-n-octylphosphonium Bromide": 'CCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  "Tributylphosphine Oxide": 'CCCCP(CCCC)(CCCC)=O',
+  "Tributylsilane": 'CCCC[SiH](CCCC)CCCC',
+  "Tributylsulfonium Iodide": 'CCCC[S+](CCCC)CCCC.[I-]',
+  "Tricarbonyl(cyclooctatetraene)iron": '[C]=O.[C]=O.[C]=O.[Fe].C1=C\\C=C/C=C\\C=C/1',
+  "Trichloro(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](Cl)(Cl)Cl',
+  "Trichloro-2-cyanoethylsilane": 'N#CCC[Si](Cl)(Cl)Cl',
+  "Trichloroacetic Acid": 'O=C(O)C(Cl)(Cl)Cl',
+  "Trichlorocyclopentylsilane": 'Cl[Si](Cl)(Cl)C1CCCC1',
+  "Trichloroisocyanuric Acid": 'O=C(N(Cl)C(N1Cl)=O)N(Cl)C1=O',
+  "Trichloromethanesulfonyl Chloride": 'O=S(C(Cl)(Cl)Cl)(Cl)=O',
+  "Tricyclohexylphosphine": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3',
+  "Tricyclohexylphosphonium Tetrafluoroborate": 'F[B-](F)(F)F.[PH+](C1CCCCC1)(C2CCCCC2)C3CCCCC3',
+  "Triethoxy(3-glycidyloxypropyl)silane": 'CCO[Si](OCC)(OCC)CCCOCC1CO1',
+  "Triethoxy(pentafluorophenyl)silane": 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](OCC)(OCC)OCC',
+  "Triethoxy(propyl)silane": 'CCC[Si](OCC)(OCC)OCC',
+  "Triethoxy[2-(7-oxabicyclo[4.1.0]heptan-3-yl)ethyl]silane": 'CCO[Si](OCC)(OCC)CCC1CC2OC2CC1',
+  "Triethoxy-1H,1H,2H,2H-tridecafluoro-n-octylsilane": 'F[SiH2]C(F)(F)CC(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(OCC)(OCC)OCC',
+  "Triethoxyethylsilane": 'CC[Si](OCC)(OCC)OCC',
+  "Triethoxyfluorosilane": 'F[Si](OCC)(OCC)OCC',
+  "Triethoxymethylsilane": 'C[Si](OCC)(OCC)OCC',
+  "Triethoxy-n-octylsilane": 'CCCCCCCC[Si](OCC)(OCC)OCC',
+  "Triethoxyphenylsilane": 'CCO[Si](OCC)(OCC)C1=CC=CC=C1',
+  "Triethoxyvinylsilane": 'C=C[Si](OCC)(OCC)OCC',
+  "Triethyl 2-Fluoro-2-phosphonoacetate": 'O=C(OCC)C(F)P(OCC)(OCC)=O',
+  "Triethyl(trifluoromethyl)silane": 'FC([Si](CC)(CC)CC)(F)F',
+  "Triethylamine": 'CCN(CC)CC',
+  "Triethylamine Borane": 'CCN(CC)CC.B',
+  "Triethylamine Trihydrofluoride": 'CCN(CC)CC.[H]F.[H]F.[H]F',
+  "Triethylchlorogermane": 'Cl[Ge](CC)(CC)CC',
+  "Triethylenetetramine": 'NCCNCCNCCN',
+  "Triethylmethylammonium Chloride": 'C[N+](CC)(CC)CC.[Cl-]',
+  "Triethylmethylammonium hydroxide": 'C[N+](CC)(CC)CC.[OH-]',
+  "Triethylphenylammonium Chloride": 'CC[N+](CC)(CC)C1=CC=CC=C1.[Cl-]',
+  "Triethylsilane": 'CC[SiH](CC)CC',
+  "TES": 'CC[SiH](CC)CC',
+  "Triethylsilanol": 'O[Si](CC)(CC)CC',
+  "Triethylsilylacetylene": 'C#C[Si](CC)(CC)CC',
+  "Triethylsulfonium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC[S+](CC)CC',
+  "Triethylvinylsilane": 'C=C[Si](CC)(CC)CC',
+  "Trifluoroacetic Acid": 'O=C(O)C(F)(F)F',
+  "TFA": 'O=C(O)C(F)(F)F',
+  "Trifluoroacetic Anhydride": 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
+  "TFAA": 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
+  "Trifluoroacetyl Triflate": 'O=S(OC(C(F)(F)F)=O)(C(F)(F)F)=O',
+  "Trifluoroacetylacetone": 'O=C(CC(C)=O)C(F)(F)F',
+  "Trifluoroboronic acid diethyletherate": 'FB(F)F.CCOCC',
+  "Trifluoromethanesulfonanilide": 'O=S(C(F)(F)F)(NC1=CC=CC=C1)=O',
+  "Trifluoromethanesulfonic Acid": 'O=S(C(F)(F)F)(O)=O',
+  "Trifluoromethanesulfonic Anhydride": 'O=S(C(F)(F)F)(OS(C(F)(F)F)(=O)=O)=O',
+  "Trifluoromethanesulfonyl Chloride": 'O=S(C(F)(F)F)(Cl)=O',
+  "Trihexyl(tetradecyl)phosphonium Chloride": 'CCCCCCCCCCCCCC[P+](CCCCCC)(CCCCCC)CCCCCC.[Cl-]',
+  "Trihexyl(tetradecyl)phosphonium Dicyanamide": 'CCCCCC[P+](CCCCCC)(CCCCCC)CCCCCCCCCCCCCC.N#C[N-]C#N',
+  "Trihexylphosphine": 'CCCCCCP(CCCCCC)CCCCCC',
+  "Trihexylsilane": 'CCCCCC[SiH](CCCCCC)CCCCCC',
+  "Triisopropyl[(trimethylsilyl)ethynyl]silane": 'C[Si](C#C[Si](C(C)C)(C(C)C)C(C)C)(C)C',
+  "Triisopropylsilane": 'CC([SiH](C(C)C)C(C)C)C',
+  "Triisopropylsilylacetylene": 'C#C[Si](C(C)C)(C(C)C)C(C)C',
+  "Trimagnesium Dicitrate Nonahydrate": 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mg+2].[Mg+2].[Mg+2]',
+  "Trimethoxy(1H,1H,2H,2H-tridecafluoro-n-octyl)silane": 'FC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)(F)CC[Si](OC)(OC)OC',
+  "Trimethoxy(2-phenylethyl)silane": 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
+  "Trimethoxy(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](OC)(OC)OC',
+  "Trimethoxy(4-methoxyphenyl)silane": 'COC1=CC=C([Si](OC)(OC)OC)C=C1',
+  "Trimethoxy(methyl)silane": 'C[Si](OC)(OC)OC',
+  "Trimethoxy(phenylethyl)silane": 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
+  "Trimethoxy(propyl)silane": 'CCC[Si](OC)(OC)OC',
+  "Trimethoxy[3-(methylamino)propyl]silane": 'CNCCC[Si](OC)(OC)OC',
+  "Trimethoxy[3-(phenylamino)propyl]silane": 'CO[Si](OC)(OC)CCCNC1=CC=CC=C1',
+  "Trimethoxy-n-octylsilane": 'CCCCCCCC[Si](OC)(OC)OC',
+  "Trimethoxyphenylsilane": 'CO[Si](OC)(OC)C1=CC=CC=C1',
   "Trimethyl 2,2':6',2''-Terpyridine-4,4',4''-tricarboxylate": 'O=C(C1=CC(C2=NC(C3=NC=CC(C(OC)=O)=C3)=CC(C(OC)=O)=C2)=NC=C1)OC',
-  'Trimethyl(2-pyridyl)tin': 'C[Sn](C)(C)C1=NC=CC=C1',
-  'Trimethyl(4-pyridyl)tin': 'C[Sn](C)(C)C1=CC=NC=C1',
-  'Trimethyl(heptafluoropropyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)F',
-  'Trimethyl(nonafluorobutyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  'Trimethyl(pentafluoroethyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)F',
-  'Trimethyl(pentafluorophenyl)silane': 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](C)(C)C',
-  'Trimethyl(tridecafluorohexyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  'Trimethyl[2-[(trimethylsilyl)methyl]benzyl]ammonium Iodide': 'C[Si](CC1=CC=CC=C1C[N+](C)(C)C)(C)C.[I-]',
-  'Trimethyl[3-(trimethoxysilyl)propyl]ammonium Chloride': 'CO[Si](CCC[N+](C)(C)C)(OC)OC.[Cl-]',
-  'Trimethylamine Borane': 'CN(C)C.B',
-  'Trimethylamine N-Oxide': 'C[N+](C)([O-])C',
-  'Trimethylamine N-Oxide Dihydrate': 'C[N+](C)([O-])C.[H]O[H].[H]O[H]',
-  Trimethylchlorogermane: 'Cl[Ge](C)(C)C',
-  Trimethylethoxysilane: 'CCO[Si](C)(C)C',
-  'Trimethylnonylammonium Bromide': 'CCCCCCCCC[N+](C)(C)C.[Br-]',
-  'Trimethylphenylammonium Bromide': 'C[N+](C)(C)C1=CC=CC=C1.[Br-]',
-  'Trimethylphenylammonium Chloride': 'C[N+](C)(C)C1=CC=CC=C1.[Cl-]',
-  'Trimethylphenylammonium Hydroxide': 'C[N+](C)(C)C1=CC=CC=C1.[OH-]',
-  'Trimethylphenylammonium Tribromide': 'C[N+](C)(C)C1=CC=CC=C1.[Br-].[Br-].[Br-]',
-  Trimethylphenylsilane: 'C[Si](C)(C)C1=CC=CC=C1',
-  Trimethylphosphine: 'CP(C)C',
-  'Trimethylpropylammonium Bis(trifluoromethanesulfonyl)imide': 'CCC[N+](C)(C)C.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  'Trimethylpropylammonium Bromide': 'CCC[N+](C)(C)C.[Br-]',
-  'Trimethylsilyl Chloride': 'C[Si](C)(Cl)C',
-  TMSCl: 'C[Si](C)(Cl)C',
-  'TMS-chloride': 'C[Si](C)(Cl)C',
-  'Trimethylsilyl Azide': 'C[Si](C)(N=[N+]=[N-])C',
-  'TMS-Azide': 'C[Si](C)(N=[N+]=[N-])C',
-  TMSA: 'C[Si](C)(N=[N+]=[N-])C',
-  TMSN3: 'C[Si](C)(N=[N+]=[N-])C',
-  'Trimethylsilyl Acetate': 'CC(O[Si](C)(C)C)=O',
-  'Trimethylsilyl Difluoro(fluorosulfonyl)acetate': 'O=C(O[Si](C)(C)C)C(F)(F)S(=O)(F)=O',
-  'Trimethylsilyl Propionate': 'CCC(O[Si](C)(C)C)=O',
-  'Trimethylsilyl Trifluoroacetate': 'O=C(O[Si](C)(C)C)C(F)(F)F',
-  Trimethylsilylacetylene: 'C#C[Si](C)(C)C',
-  Trimethylsilylcyclopentadiene: 'C[Si](C1=CC=CC1)(C)C',
-  'Trimethylsilylketene Ethyl Trimethylsilyl Acetal': 'C[Si](/C=C(OCC)/O[Si](C)(C)C)(C)C',
-  'Trimethylsilylmethylmagnesium Chloride': 'Cl[Mg]C[Si](C)(C)C',
-  'Trimethylstearylammonium Bromide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)C.[Br-]',
-  'Trimethylsulfonium Iodide': 'C[S+](C)C.[I-]',
-  'Trimethyltetradecylammonium Chloride': 'CCCCCCCCCCCCCC[N+](C)(C)C.[Cl-]',
-  'Trimethyltin Chloride': 'C[Sn](C)(Cl)C',
-  'Tri-n-octylphosphine': 'CCCCCCCCP(CCCCCCCC)CCCCCCCC',
-  'Tri-n-octylphosphine Oxide': 'CCCCCCCCP(CCCCCCCC)(CCCCCCCC)=O',
-  'Trioctylmethylammonium Chloride': 'C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Cl-]',
-  'Triphenyl Phosphite': 'P(OC1=CC=CC=C1)(OC2=CC=CC=C2)OC3=CC=CC=C3',
-  Triphenylantimony: '[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  'Triphenylantimony Diacetate': 'CC(O)=O.CC(O)=O.[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  'Triphenylantimony Dichloride': 'Cl[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)(Cl)C3=CC=CC=C3',
-  'Triphenylantimony Oxide': 'O=[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylarsine: '[As](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylchlorogermane: 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylphosphine: 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  'Triphenylphosphine Borane': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.B',
-  'Triphenylphosphine Oxide': 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  'Triphenylphosphine Selenide': '[Se]=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylsilane: '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylsilanol: 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphenylvinylsilane: 'C=C[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  Triphosgene: 'ClC(Cl)(OC(OC(Cl)(Cl)Cl)=O)Cl',
-  'Tris(1-pyrazolyl)methane': 'C(N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3',
+  "Trimethyl(2-pyridyl)tin": 'C[Sn](C)(C)C1=NC=CC=C1',
+  "Trimethyl(4-pyridyl)tin": 'C[Sn](C)(C)C1=CC=NC=C1',
+  "Trimethyl(heptafluoropropyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)F',
+  "Trimethyl(nonafluorobutyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  "Trimethyl(pentafluoroethyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)F',
+  "Trimethyl(pentafluorophenyl)silane": 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](C)(C)C',
+  "Trimethyl(tridecafluorohexyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  "Trimethyl[2-[(trimethylsilyl)methyl]benzyl]ammonium Iodide": 'C[Si](CC1=CC=CC=C1C[N+](C)(C)C)(C)C.[I-]',
+  "Trimethyl[3-(trimethoxysilyl)propyl]ammonium Chloride": 'CO[Si](CCC[N+](C)(C)C)(OC)OC.[Cl-]',
+  "Trimethylamine Borane": 'CN(C)C.B',
+  "Trimethylamine N-Oxide": 'C[N+](C)([O-])C',
+  "Trimethylamine N-Oxide Dihydrate": 'C[N+](C)([O-])C.[H]O[H].[H]O[H]',
+  "Trimethylchlorogermane": 'Cl[Ge](C)(C)C',
+  "Trimethylethoxysilane": 'CCO[Si](C)(C)C',
+  "Trimethylnonylammonium Bromide": 'CCCCCCCCC[N+](C)(C)C.[Br-]',
+  "Trimethylphenylammonium Bromide": 'C[N+](C)(C)C1=CC=CC=C1.[Br-]',
+  "Trimethylphenylammonium Chloride": 'C[N+](C)(C)C1=CC=CC=C1.[Cl-]',
+  "Trimethylphenylammonium Hydroxide": 'C[N+](C)(C)C1=CC=CC=C1.[OH-]',
+  "Trimethylphenylammonium Tribromide": 'C[N+](C)(C)C1=CC=CC=C1.[Br-].[Br-].[Br-]',
+  "Trimethylphenylsilane": 'C[Si](C)(C)C1=CC=CC=C1',
+  "Trimethylphosphine": 'CP(C)C',
+  "Trimethylpropylammonium Bis(trifluoromethanesulfonyl)imide": 'CCC[N+](C)(C)C.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  "Trimethylpropylammonium Bromide": 'CCC[N+](C)(C)C.[Br-]',
+  "Trimethylsilyl Chloride": 'C[Si](C)(Cl)C',
+  "TMSCl": 'C[Si](C)(Cl)C',
+  "TMS-chloride": 'C[Si](C)(Cl)C',
+  "Trimethylsilyl Azide": 'C[Si](C)(N=[N+]=[N-])C',
+  "TMS-Azide": 'C[Si](C)(N=[N+]=[N-])C',
+  "TMSA": 'C[Si](C)(N=[N+]=[N-])C',
+  "TMSN3": 'C[Si](C)(N=[N+]=[N-])C',
+  "Trimethylsilyl Acetate": 'CC(O[Si](C)(C)C)=O',
+  "Trimethylsilyl Difluoro(fluorosulfonyl)acetate": 'O=C(O[Si](C)(C)C)C(F)(F)S(=O)(F)=O',
+  "Trimethylsilyl Propionate": 'CCC(O[Si](C)(C)C)=O',
+  "Trimethylsilyl Trifluoroacetate": 'O=C(O[Si](C)(C)C)C(F)(F)F',
+  "Trimethylsilylacetylene": 'C#C[Si](C)(C)C',
+  "Trimethylsilylcyclopentadiene": 'C[Si](C1=CC=CC1)(C)C',
+  "Trimethylsilylketene Ethyl Trimethylsilyl Acetal": 'C[Si](/C=C(OCC)/O[Si](C)(C)C)(C)C',
+  "Trimethylsilylmethylmagnesium Chloride": 'Cl[Mg]C[Si](C)(C)C',
+  "Trimethylstearylammonium Bromide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)C.[Br-]',
+  "Trimethylsulfonium Iodide": 'C[S+](C)C.[I-]',
+  "Trimethyltetradecylammonium Chloride": 'CCCCCCCCCCCCCC[N+](C)(C)C.[Cl-]',
+  "Trimethyltin Chloride": 'C[Sn](C)(Cl)C',
+  "Tri-n-octylphosphine": 'CCCCCCCCP(CCCCCCCC)CCCCCCCC',
+  "Tri-n-octylphosphine Oxide": 'CCCCCCCCP(CCCCCCCC)(CCCCCCCC)=O',
+  "Trioctylmethylammonium Chloride": 'C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Cl-]',
+  "Triphenyl Phosphite": 'P(OC1=CC=CC=C1)(OC2=CC=CC=C2)OC3=CC=CC=C3',
+  "Triphenylantimony": '[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylantimony Diacetate": 'CC(O)=O.CC(O)=O.[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylantimony Dichloride": 'Cl[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)(Cl)C3=CC=CC=C3',
+  "Triphenylantimony Oxide": 'O=[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylarsine": '[As](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylchlorogermane": 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylphosphine": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylphosphine Borane": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.B',
+  "Triphenylphosphine Oxide": 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylphosphine Selenide": '[Se]=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylsilane": '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylsilanol": 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphenylvinylsilane": 'C=C[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  "Triphosgene": 'ClC(Cl)(OC(OC(Cl)(Cl)Cl)=O)Cl',
+  "Tris(1-pyrazolyl)methane": 'C(N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3',
   "Tris(2,2'-bipyridyl)ruthenium(II) Chloride Hexahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].C1(C2=NC=CC=C2)=NC=CC=C1.C3(C4=NC=CC=C4)=NC=CC=C3.C5(C6=NC=CC=C6)=NC=CC=C5.[Ru+2].[Cl-].[Cl-]',
-  'Tris(2,4-di-tert-butylphenyl) Phosphite': 'CC(C1=CC=C(OP(OC2=CC=C(C(C)(C)C)C=C2C(C)(C)C)OC3=CC=C(C(C)(C)C)C=C3C(C)(C)C)C(C(C)(C)C)=C1)(C)C',
-  'Tris(2,4-pentanedionato)cobalt(III)': 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Co+3]',
-  'Tris(2,4-pentanedionato)iron(III)': '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Fe+3]',
-  'Tris(2,4-pentanedionato)manganese(III)': 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Mn+3]',
-  'Tris(2,6-dimethoxyphenyl)phosphine': 'COC1=C(P(C2=C(OC)C=CC=C2OC)C3=C(OC)C=CC=C3OC)C(OC)=CC=C1',
-  'Tris(2-aminoethyl)amine': 'NCCN(CCN)CCN',
-  'Tris(2-benzimidazolylmethyl)amine': 'N(CC1=NC2=CC=CC=C2N1)(CC3=NC4=CC=CC=C4N3)CC5=NC6=CC=CC=C6N5',
-  'Tris(2-carboxyethyl)phosphine Hydrochloride': 'O=C(CCP(CCC(O)=O)CCC(O)=O)O.[H]Cl',
-  'Tris(2-methoxyphenyl)phosphine': 'COC1=CC=CC=C1P(C2=CC=CC=C2OC)C3=CC=CC=C3OC',
-  'Tris(2-phenylpyridinato)iridium(III)': 'C1(C2=CC=CC=C2)=NC=CC=C1.C3(C4=CC=CC=C4)=NC=CC=C3.C5(C6=CC=CC=C6)=NC=CC=C5.[Ir]',
-  'Tris(2-pyridylmethyl)amine': 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CC3=NC=CC=C3',
-  'Tris(3,5-dimethyl-1-pyrazolyl)methane': 'CC1=CC(C)=NN1C(N2N=C(C)C=C2C)N3N=C(C)C=C3C',
-  'Tris(3-hydroxypropyltriazolylmethyl)amine': 'OCCCC(N(C(CCCO)C1=CNN=N1)C(CCCO)C2=CNN=N2)C3=CNN=N3',
-  'Tris(4-fluorophenyl)phosphine': 'FC1=CC=C(P(C2=CC=C(F)C=C2)C3=CC=C(F)C=C3)C=C1',
-  'Tris(4-methoxyphenyl)phosphine': 'COC1=CC=C(P(C2=CC=C(OC)C=C2)C3=CC=C(OC)C=C3)C=C1',
-  'Tris(dibenzoylmethanato) Iron': '[O-]/C(C1=CC=CC=C1)=C\\C(C2=CC=CC=C2)=O.[O-]/C(C3=CC=CC=C3)=C\\C(C4=CC=CC=C4)=O.[O-]/C(C5=CC=CC=C5)=C\\C(C6=CC=CC=C6)=O.[Fe+3]',
-  'Tris(dibenzylideneacetone)dipalladium(0)': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
-  'Pd2(dba)3': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
-  'Tris(diethylamino)phosphine': 'CCN(P(N(CC)CC)N(CC)CC)CC',
-  'Tris(hydroxymethyl)aminomethane': 'NC(CO)(CO)CO',
-  'Tris(pentafluorophenyl)phosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F',
-  'Tris(trimethylsilyloxy)silane': 'C[Si](O[SiH](O[Si](C)(C)C)O[Si](C)(C)C)(C)C',
-  'Tris(triphenylphosphine)rhodium(I) Chloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Rh+].[Cl-]',
-  'Tris(triphenylphosphine)ruthenium(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Ru+2].[Cl-].[Cl-]',
-  'Tris[(1-benzyl-1H-1,2,3-triazol-4-yl)methyl]amine': 'N(CC1=CN(CC2=CC=CC=C2)N=N1)(CC3=CN(CC4=CC=CC=C4)N=N3)CC5=CN(CC6=CC=CC=C6)N=N5',
-  'Tris[2-(dimethylamino)ethyl]amine': 'CN(CCN(CCN(C)C)CCN(C)C)C',
-  'Tris[3,5-bis(trifluoromethyl)phenyl]phosphine': 'FC(C1=CC(C(F)(F)F)=CC(P(C2=CC(C(F)(F)F)=CC(C(F)(F)F)=C2)C3=CC(C(F)(F)F)=CC(C(F)(F)F)=C3)=C1)(F)F',
-  'Trisodium Paraperiodate': 'O=I([O-])([O-])(O)(O)[O-].[Na+].[Na+].[Na+]',
-  'Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetate': 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCN(CC([O-])=O)CC1',
-  'Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7-triacetate': 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCNCC1',
-  'Tri-tert-butylphosphonium Tetrafluoroborate': 'CC([PH+](C(C)(C)C)C(C)(C)C)(C)C.F[B-](F)(F)F',
-  Tungsten: '[W]',
-  'Urea hydrogen peroxide': 'NC(N)=O.OO',
-  Vanadium: '[V]',
-  'Vinylmagnesium Bromide': 'Br[Mg]C=C',
-  Vinyltrimethoxysilane: 'CO[Si](OC)(C=C)OC',
-  Vinyltrimethylsilane: 'C[Si](C)(C=C)C',
-  'Vinyltris(2-methoxyethoxy)silane': 'COCCO[Si](OCCOC)(C=C)OCCOC',
-  water: '[H]O[H]',
-  Ytterbium: '[Yb]',
-  'Ytterbium(III) Trifluoromethanesulfonate Hydrate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[H]O[H].[Yb+3]',
-  Yttrium: '[Y]',
-  'Zinc Bromide': '[Zn+2].[Br-].[Br-]',
-  'Zinc Chloride': '[Zn+2].[Cl-].[Cl-]',
-  'Zinc peroxide': '[O-][O-].[Zn+2]',
-  'Zinc(II) Bis(trifluoromethanesulfinate) Dihydrate': 'O=S(C(F)(F)F)[O-].O=S(C(F)(F)F)[O-].[H]O[H].[H]O[H].[Zn+2]',
-  'Zinc(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Zn+2]',
-  'zink hydroxide': '[Zn+2].[OH-].[OH-]',
-  'zink stannate': 'O=[Sn]([O-])[O-].[Zn+2]',
-  Zirconium: '[Zr]',
-  'Zirconium hydroxide': '[Zr+4].[OH-].[OH-].[OH-].[OH-]',
-  'α-Methyl-L-proline': 'O=C(O)[C@@]1(C)NCCC1',
-  'β-Isocupreidine': '[H][C@@](C1([H])[H])(C([H])([H])C2([H])[H])[C@@]3(C([H])([H])C([H])([H])[H])O[C@](C4=C(C([H])=C5O[H])C(C([H])=C5[H])=NC([H])=C4[H])([H])[C@]1([H])[N@@]2C3([H])[H]',
-  'Di-tert-butyl dicarbonate': 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
-  Boc2O: 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
-  'N-(9H-Fluoren-9-ylmethoxycarbonyloxy)succinimide': 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
-  'Fmoc-Osu': 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
+  "Tris(2,4-di-tert-butylphenyl) Phosphite": 'CC(C1=CC=C(OP(OC2=CC=C(C(C)(C)C)C=C2C(C)(C)C)OC3=CC=C(C(C)(C)C)C=C3C(C)(C)C)C(C(C)(C)C)=C1)(C)C',
+  "Tris(2,4-pentanedionato)cobalt(III)": 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Co+3]',
+  "Tris(2,4-pentanedionato)iron(III)": '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Fe+3]',
+  "Tris(2,4-pentanedionato)manganese(III)": 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Mn+3]',
+  "Tris(2,6-dimethoxyphenyl)phosphine": 'COC1=C(P(C2=C(OC)C=CC=C2OC)C3=C(OC)C=CC=C3OC)C(OC)=CC=C1',
+  "Tris(2-aminoethyl)amine": 'NCCN(CCN)CCN',
+  "Tris(2-benzimidazolylmethyl)amine": 'N(CC1=NC2=CC=CC=C2N1)(CC3=NC4=CC=CC=C4N3)CC5=NC6=CC=CC=C6N5',
+  "Tris(2-carboxyethyl)phosphine Hydrochloride": 'O=C(CCP(CCC(O)=O)CCC(O)=O)O.[H]Cl',
+  "Tris(2-methoxyphenyl)phosphine": 'COC1=CC=CC=C1P(C2=CC=CC=C2OC)C3=CC=CC=C3OC',
+  "Tris(2-phenylpyridinato)iridium(III)": 'C1(C2=CC=CC=C2)=NC=CC=C1.C3(C4=CC=CC=C4)=NC=CC=C3.C5(C6=CC=CC=C6)=NC=CC=C5.[Ir]',
+  "Tris(2-pyridylmethyl)amine": 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CC3=NC=CC=C3',
+  "Tris(3,5-dimethyl-1-pyrazolyl)methane": 'CC1=CC(C)=NN1C(N2N=C(C)C=C2C)N3N=C(C)C=C3C',
+  "Tris(3-hydroxypropyltriazolylmethyl)amine": 'OCCCC(N(C(CCCO)C1=CNN=N1)C(CCCO)C2=CNN=N2)C3=CNN=N3',
+  "Tris(4-fluorophenyl)phosphine": 'FC1=CC=C(P(C2=CC=C(F)C=C2)C3=CC=C(F)C=C3)C=C1',
+  "Tris(4-methoxyphenyl)phosphine": 'COC1=CC=C(P(C2=CC=C(OC)C=C2)C3=CC=C(OC)C=C3)C=C1',
+  "Tris(dibenzoylmethanato) Iron": '[O-]/C(C1=CC=CC=C1)=C\\C(C2=CC=CC=C2)=O.[O-]/C(C3=CC=CC=C3)=C\\C(C4=CC=CC=C4)=O.[O-]/C(C5=CC=CC=C5)=C\\C(C6=CC=CC=C6)=O.[Fe+3]',
+  "Tris(dibenzylideneacetone)dipalladium(0)": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
+  "Pd2(dba)3": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
+  "Tris(diethylamino)phosphine": 'CCN(P(N(CC)CC)N(CC)CC)CC',
+  "Tris(hydroxymethyl)aminomethane": 'NC(CO)(CO)CO',
+  "Tris(pentafluorophenyl)phosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F',
+  "Tris(trimethylsilyloxy)silane": 'C[Si](O[SiH](O[Si](C)(C)C)O[Si](C)(C)C)(C)C',
+  "Tris(triphenylphosphine)rhodium(I) Chloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Rh+].[Cl-]',
+  "Tris(triphenylphosphine)ruthenium(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Ru+2].[Cl-].[Cl-]',
+  "Tris[(1-benzyl-1H-1,2,3-triazol-4-yl)methyl]amine": 'N(CC1=CN(CC2=CC=CC=C2)N=N1)(CC3=CN(CC4=CC=CC=C4)N=N3)CC5=CN(CC6=CC=CC=C6)N=N5',
+  "Tris[2-(dimethylamino)ethyl]amine": 'CN(CCN(CCN(C)C)CCN(C)C)C',
+  "Tris[3,5-bis(trifluoromethyl)phenyl]phosphine": 'FC(C1=CC(C(F)(F)F)=CC(P(C2=CC(C(F)(F)F)=CC(C(F)(F)F)=C2)C3=CC(C(F)(F)F)=CC(C(F)(F)F)=C3)=C1)(F)F',
+  "Trisodium Paraperiodate": 'O=I([O-])([O-])(O)(O)[O-].[Na+].[Na+].[Na+]',
+  "Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetate": 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCN(CC([O-])=O)CC1',
+  "Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7-triacetate": 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCNCC1',
+  "Tri-tert-butylphosphonium Tetrafluoroborate": 'CC([PH+](C(C)(C)C)C(C)(C)C)(C)C.F[B-](F)(F)F',
+  "Tungsten": '[W]',
+  "Urea hydrogen peroxide": 'NC(N)=O.OO',
+  "Vanadium": '[V]',
+  "Vinylmagnesium Bromide": 'Br[Mg]C=C',
+  "Vinyltrimethoxysilane": 'CO[Si](OC)(C=C)OC',
+  "Vinyltrimethylsilane": 'C[Si](C)(C=C)C',
+  "Vinyltris(2-methoxyethoxy)silane": 'COCCO[Si](OCCOC)(C=C)OCCOC',
+  "water": '[H]O[H]',
+  "Ytterbium": '[Yb]',
+  "Ytterbium(III) Trifluoromethanesulfonate Hydrate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[H]O[H].[Yb+3]',
+  "Yttrium": '[Y]',
+  "Zinc Bromide": '[Zn+2].[Br-].[Br-]',
+  "Zinc Chloride": '[Zn+2].[Cl-].[Cl-]',
+  "Zinc peroxide": '[O-][O-].[Zn+2]',
+  "Zinc(II) Bis(trifluoromethanesulfinate) Dihydrate": 'O=S(C(F)(F)F)[O-].O=S(C(F)(F)F)[O-].[H]O[H].[H]O[H].[Zn+2]',
+  "Zinc(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Zn+2]',
+  "zink hydroxide": '[Zn+2].[OH-].[OH-]',
+  "zink stannate": 'O=[Sn]([O-])[O-].[Zn+2]',
+  "Zirconium": '[Zr]',
+  "Zirconium hydroxide": '[Zr+4].[OH-].[OH-].[OH-].[OH-]',
+  "α-Methyl-L-proline": 'O=C(O)[C@@]1(C)NCCC1',
+  "β-Isocupreidine": '[H][C@@](C1([H])[H])(C([H])([H])C2([H])[H])[C@@]3(C([H])([H])C([H])([H])[H])O[C@](C4=C(C([H])=C5O[H])C(C([H])=C5[H])=NC([H])=C4[H])([H])[C@]1([H])[N@@]2C3([H])[H]',
+  "Di-tert-butyl dicarbonate": 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
+  "Boc2O": 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
+  "N-(9H-Fluoren-9-ylmethoxycarbonyloxy)succinimide": 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
+  "Fmoc-Osu": 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
 };
diff --git a/app/packs/src/components/stores/ClipboardStore.js b/app/packs/src/components/stores/ClipboardStore.js
new file mode 100644
index 000000000..b31835723
--- /dev/null
+++ b/app/packs/src/components/stores/ClipboardStore.js
@@ -0,0 +1,45 @@
+import alt from 'src/stores/alt/alt';
+import ClipboardActions from 'src/stores/alt/actions/ClipboardActions';
+import Aviator from 'aviator';
+
+class ClipboardStore {
+  constructor() {
+    this.state = {
+      samples: [],
+      wellplates: []
+    };
+
+    this.bindListeners({
+      handleFetchSamplesByUIStateAndLimit: [ClipboardActions.fetchSamplesByUIStateAndLimit, ClipboardActions.fetchElementAndBuildCopy],
+      handleFetchWellplatesByUIState: ClipboardActions.fetchWellplatesByUIState
+    })
+  }
+
+  handleFetchSamplesByUIStateAndLimit(result) {
+    this.state.samples = result.samples;
+
+    switch(result.action) {
+      case 'template_wellplate':
+        Aviator.navigate(result.isSync
+          ? `/scollection/${result.collection_id}/wellplate/template`
+          : `/collection/${result.collection_id}/wellplate/template`);
+        break;
+      case 'copy_sample':
+        Aviator.navigate(result.isSync
+          ? `/scollection/${result.collection_id}/sample/copy`
+          : `/collection/${result.collection_id}/sample/copy`);
+    }
+  }
+
+  handleFetchWellplatesByUIState(result) {
+    this.state.wellplates = result.wellplates;
+    switch(result.action) {
+      case 'template_screen':
+        Aviator.navigate(result.isSync
+          ? `/scollection/${result.collection_id}/screen/template`
+          : `/collection/${result.collection_id}/screen/template`);
+    }
+  }
+}
+
+export default alt.createStore(ClipboardStore, 'ClipboardStore');
diff --git a/app/packs/src/components/stores/CollectionStore.js b/app/packs/src/components/stores/CollectionStore.js
new file mode 100644
index 000000000..cb6d78574
--- /dev/null
+++ b/app/packs/src/components/stores/CollectionStore.js
@@ -0,0 +1,191 @@
+import alt from 'src/stores/alt/alt';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+
+
+class CollectionStore {
+  constructor() {
+    this.state = {
+      genericEls: [],
+      unsharedRoots: [],
+      sharedRoots: [],
+      remoteRoots: [],
+      lockedRoots: [],
+      syncInRoots: [],
+      visibleRootsIds: [],
+    };
+
+
+    this.bindListeners({
+      handleTakeOwnership: CollectionActions.takeOwnership,
+      //handleFetchGenericEls: CollectionActions.fetchGenericEls,
+      handleFetchLockedCollectionRoots: CollectionActions.fetchLockedCollectionRoots,
+      handleFetchUnsharedCollectionRoots: CollectionActions.fetchUnsharedCollectionRoots,
+      handleFetchSharedCollectionRoots: CollectionActions.fetchSharedCollectionRoots,
+      handleFetchRemoteCollectionRoots: CollectionActions.fetchRemoteCollectionRoots,
+      handleFetchSyncInCollectionRoots: CollectionActions.fetchSyncInCollectionRoots,
+      handleCreateSharedCollections: CollectionActions.createSharedCollections,
+      handleBulkUpdateUnsharedCollections: CollectionActions.bulkUpdateUnsharedCollections,
+      handleUpdateSharedCollection: CollectionActions.updateSharedCollection,
+      handleCreateUnsharedCollection: [
+        CollectionActions.createUnsharedCollection,
+        CollectionActions.createSync,
+        CollectionActions.editSync,
+        CollectionActions.deleteSync
+      ],
+      handleRejectSharedCollection: CollectionActions.rejectShared,
+      handleRejectSyncdCollection: CollectionActions.rejectSync,
+      handleUpdateCollectrionTree: CollectionActions.updateCollectrionTree
+    })
+  }
+
+  handleTakeOwnership() {
+    CollectionActions.fetchUnsharedCollectionRoots();
+    CollectionActions.fetchSharedCollectionRoots();
+    CollectionActions.fetchRemoteCollectionRoots();
+    CollectionActions.fetchSyncInCollectionRoots();
+  }
+
+  //handleFetchGenericEls(result) {
+  //  console.log(result);
+  //  this.state.genericEls = result.genericEls;
+  //}
+
+  handleFetchLockedCollectionRoots(results) {
+    this.state.lockedRoots = results.collections;
+  }
+
+  handleFetchUnsharedCollectionRoots(results) {
+    this.state.unsharedRoots = results.collections;
+  }
+
+  handleFetchSharedCollectionRoots(results) {
+    this.state.sharedRoots = results?.collections;
+  }
+
+  handleFetchRemoteCollectionRoots(results) {
+    this.state.remoteRoots = results.collections;
+  }
+
+  handleFetchSyncInCollectionRoots(results) {
+    this.state.syncInRoots = results.syncCollections;
+  }
+  handleCreateSharedCollections() {
+    CollectionActions.fetchUnsharedCollectionRoots();
+    CollectionActions.fetchSharedCollectionRoots();
+    CollectionActions.fetchRemoteCollectionRoots();
+  }
+
+  handleBulkUpdateUnsharedCollections() {
+    CollectionActions.fetchUnsharedCollectionRoots();
+    CollectionActions.fetchSharedCollectionRoots();
+    CollectionActions.fetchRemoteCollectionRoots();
+  }
+
+  handleUpdateSharedCollection() {
+    CollectionActions.fetchSharedCollectionRoots();
+  }
+
+  handleCreateUnsharedCollection(results) {
+    CollectionActions.fetchUnsharedCollectionRoots();
+  }
+
+  handleUpdateCollectrionTree(visibleRootsIds) {
+    this.state.visibleRootsIds = visibleRootsIds
+  }
+
+  handleRejectSharedCollection(results) {
+    CollectionActions.fetchRemoteCollectionRoots();
+  }
+  handleRejectSyncdCollection(results) {
+    CollectionActions.fetchSyncInCollectionRoots();
+  }
+
+  // 'repository' methods; returns a promise
+  static findById(collectionId) {
+    let state = this.state;
+    let roots = state.unsharedRoots.concat(state.sharedRoots).concat(state.remoteRoots).concat(state.lockedRoots);
+
+    let foundCollection = roots.filter((root) => {
+      return root.id == collectionId;
+    }).pop();
+
+    let promise;
+
+    // if not loaded already fetch collection from backend
+    if (!foundCollection) {
+      // TODO maybe move to CollectionsFetcher
+      promise = fetch('/api/v1/collections/' + collectionId, {
+        credentials: 'same-origin',
+        method: 'GET'
+      }).then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    } else {
+      promise = new Promise((resolve) => {
+        resolve({ collection: foundCollection });
+      });
+    }
+    return promise;
+  }
+  static findBySId(collectionId) {
+    let roots = this.state.syncInRoots;
+    let foundCollection = roots.filter((root) => {
+      return root.id == collectionId;
+    }).pop();
+    let promise;
+    if (!foundCollection) {
+      promise = fetch('/api/v1/syncCollections/' + collectionId, {
+        credentials: 'same-origin',
+        method: 'GET'
+      }).then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    } else {
+      promise = new Promise((resolve) => {
+        resolve({ collection: foundCollection });
+      });
+    }
+    return promise;
+  }
+
+
+  static findAllCollection() {
+    let state = this.state;
+    let roots = state.lockedRoots;
+
+    let foundCollection = roots.filter((root) => {
+      return root.label == 'All';
+    }).pop();
+
+    let promise;
+
+    // if not loaded already fetch collection from backend
+    if (!foundCollection) {
+      promise = fetch('/api/v1/collections/all/', {
+        credentials: 'same-origin',
+        method: 'GET'
+      }).then((response) => {
+        return response.json()
+      }).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    } else {
+      promise = new Promise((resolve) => {
+        resolve({ collection: foundCollection });
+      });
+    }
+    return promise;
+  }
+}
+
+export default alt.createStore(CollectionStore, 'CollectionStore');
diff --git a/app/packs/src/components/stores/ComputeTaskStore.js b/app/packs/src/components/stores/ComputeTaskStore.js
new file mode 100644
index 000000000..9bf10374f
--- /dev/null
+++ b/app/packs/src/components/stores/ComputeTaskStore.js
@@ -0,0 +1,38 @@
+import alt from '../alt';
+
+import ComputeTaskActions from '../actions/ComputeTaskActions';
+
+class ComputeTaskStore {
+  constructor() {
+    this.state = {
+      tasks: [],
+    };
+
+    this.bindListeners({
+      handleFetchAll: ComputeTaskActions.fetchAll,
+      handleUpdateTask: [
+        ComputeTaskActions.checkState,
+        ComputeTaskActions.revokeTask,
+      ],
+      handleDeleteTask: ComputeTaskActions.deleteTask
+    });
+  }
+
+  handleFetchAll(tasks) {
+    this.state.tasks = tasks;
+  }
+
+  handleUpdateTask(newTask) {
+    const { tasks } = this.state;
+    this.state.tasks = tasks.map(task => (
+      task.id === newTask.id ? { ...newTask } : task
+    ));
+  }
+
+  handleDeleteTask(deletedTask) {
+    const { tasks } = this.state;
+    this.state.tasks = tasks.filter(task => task.id !== deletedTask.id);
+  }
+}
+
+export default alt.createStore(ComputeTaskStore, 'ComputeTaskStore');
diff --git a/app/packs/src/components/stores/ElementStore.js b/app/packs/src/components/stores/ElementStore.js
new file mode 100644
index 000000000..5975d98d4
--- /dev/null
+++ b/app/packs/src/components/stores/ElementStore.js
@@ -0,0 +1,1461 @@
+import {
+  last,
+  slice,
+  intersectionWith,
+  findIndex
+} from 'lodash';
+import Aviator from 'aviator';
+import alt from 'src/stores/alt/alt';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ClipboardStore from 'src/stores/alt/stores/ClipboardStore';
+import Sample from 'src/models/Sample';
+import Reaction from 'src/models/Reaction';
+import Wellplate from 'src/models/Wellplate';
+import Screen from 'src/models/Screen';
+
+import Device from 'src/models/Device';
+import Container from 'src/models/Container';
+import AnalysesExperiment from 'src/models/AnalysesExperiment';
+import DeviceAnalysis from 'src/models/DeviceAnalysis';
+import DeviceSample from 'src/models/DeviceSample';
+import SamplesFetcher from 'src/fetchers/SamplesFetcher';
+import DeviceFetcher from 'src/fetchers/DeviceFetcher';
+import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
+import WellplatesFetcher from 'src/fetchers/WellplatesFetcher';
+import ScreensFetcher from 'src/fetchers/ScreensFetcher';
+import ModalImportConfirm from 'src/components/contextActions/ModalImportConfirm';
+
+import { elementShowOrNew } from 'src/utilities/routesUtils';
+
+import DetailActions from 'src/stores/alt/actions/DetailActions';
+import { SameEleTypId, UrlSilentNavigation } from 'src/utilities/ElementUtils';
+import { chmoConversions } from 'src/components/OlsComponent';
+import MatrixCheck from 'src/components/common/MatrixCheck';
+import GenericEl from 'src/models/GenericEl';
+
+import MessagesFetcher from 'src/fetchers/MessagesFetcher';
+
+import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
+
+
+const fetchOls = (elementType) => {
+  switch (elementType) {
+    case 'reaction':
+      UserActions.fetchOlsRxno();
+      UserActions.fetchOlsChmo();
+      break;
+    default:
+      UserActions.fetchOlsChmo();
+      break;
+  }
+};
+
+class ElementStore {
+  constructor() {
+    const elements = {
+      samples: {
+        elements: [],
+        totalElements: 0,
+        page: null,
+        pages: null,
+        perPage: null
+      },
+      reactions: {
+        elements: [],
+        totalElements: 0,
+        page: null,
+        pages: null,
+        perPage: null
+      },
+      wellplates: {
+        elements: [],
+        totalElements: 0,
+        page: null,
+        pages: null,
+        perPage: null
+      },
+      screens: {
+        elements: [],
+        totalElements: 0,
+        page: null,
+        pages: null,
+        perPage: null
+      },
+      devices: {
+        devices: [],
+        activeAccordionDevice: 0,
+        selectedDeviceId: -1
+      },
+      research_plans: {
+        elements: [],
+        totalElements: 0,
+        page: null,
+        pages: null,
+        perPage: null
+      },
+    };
+
+    this.state = {
+      elements,
+      currentElement: null,
+      elementWarning: false,
+      moleculeSort: false,
+      // formerly from DetailStore
+      selecteds: [],
+      refreshCoefficient: [],
+      activeKey: 0,
+      deletingElement: null,
+    };
+
+    this.bindListeners({
+      handleFetchAllDevices: ElementActions.fetchAllDevices,
+      handleFetchDeviceById: ElementActions.fetchDeviceById,
+      handleCreateDevice: ElementActions.createDevice,
+      handleSaveDevice: ElementActions.saveDevice,
+      handleDeleteDevice: ElementActions.deleteDevice,
+      handleToggleDeviceType: ElementActions.toggleDeviceType,
+      handleChangeActiveAccordionDevice: ElementActions.changeActiveAccordionDevice,
+      handleChangeSelectedDeviceId: ElementActions.changeSelectedDeviceId,
+      handleSetSelectedDeviceId: ElementActions.setSelectedDeviceId,
+      handleSetRefreshCoefficient: ElementActions.setRefreshCoefficient,
+      handleAddSampleToDevice: ElementActions.addSampleToDevice,
+      handleAddSampleWithAnalysisToDevice: ElementActions.addSampleWithAnalysisToDevice,
+      handleRemoveSampleFromDevice: ElementActions.removeSampleFromDevice,
+      handleToggleTypeOfDeviceSample: ElementActions.toggleTypeOfDeviceSample,
+      handleChangeDeviceProp: ElementActions.changeDeviceProp,
+      handleFetchDeviceAnalysisById: ElementActions.fetchDeviceAnalysisById,
+      handleSaveDeviceAnalysis: ElementActions.saveDeviceAnalysis,
+      handleOpenDeviceAnalysis: ElementActions.openDeviceAnalysis,
+      handleCreateDeviceAnalysis: ElementActions.createDeviceAnalysis,
+      handleChangeAnalysisExperimentProp: ElementActions.changeAnalysisExperimentProp,
+      handleDeleteAnalysisExperiment: ElementActions.deleteAnalysisExperiment,
+      handleDuplicateAnalysisExperiment: ElementActions.duplicateAnalysisExperiment,
+
+      handleFetchBasedOnSearchSelection: ElementActions.fetchBasedOnSearchSelectionAndCollection,
+
+      handleFetchGenericElsByCollectionId: ElementActions.fetchGenericElsByCollectionId,
+      handleFetchGenericElById: ElementActions.fetchGenericElById,
+      handleCreateGenericEl: ElementActions.createGenericEl,
+
+      handleFetchSamplesByCollectionId: ElementActions.fetchSamplesByCollectionId,
+      handleFetchReactionsByCollectionId: ElementActions.fetchReactionsByCollectionId,
+      handleFetchWellplatesByCollectionId: ElementActions.fetchWellplatesByCollectionId,
+      handleFetchScreensByCollectionId: ElementActions.fetchScreensByCollectionId,
+      handlefetchResearchPlansByCollectionId: ElementActions.fetchResearchPlansByCollectionId,
+
+      handleFetchSampleById: ElementActions.fetchSampleById,
+      handleCreateSample: ElementActions.createSample,
+      handleCreateSampleForReaction: ElementActions.createSampleForReaction,
+      handleEditReactionSample: ElementActions.editReactionSample,
+      handleEditWellplateSample: ElementActions.editWellplateSample,
+      handleUpdateSampleForReaction: ElementActions.updateSampleForReaction,
+      handleUpdateSampleForWellplate: ElementActions.updateSampleForWellplate,
+      handleCopySampleFromClipboard: ElementActions.copySampleFromClipboard,
+      handleAddSampleToMaterialGroup: ElementActions.addSampleToMaterialGroup,
+      handleShowReactionMaterial: ElementActions.showReactionMaterial,
+      handleImportSamplesFromFile: ElementActions.importSamplesFromFile,
+      handleImportSamplesFromFileConfirm: ElementActions.importSamplesFromFileConfirm,
+
+      handleSetCurrentElement: ElementActions.setCurrentElement,
+      handleDeselectCurrentElement: ElementActions.deselectCurrentElement,
+      handleChangeSorting: ElementActions.changeSorting,
+      handleChangeElementsFilter: ElementActions.changeElementsFilter,
+
+      handleFetchReactionById: ElementActions.fetchReactionById,
+      handleTryFetchById: [
+        ElementActions.tryFetchReactionById,
+        ElementActions.tryFetchWellplateById,
+        ElementActions.tryFetchGenericElById
+      ],
+      handleCloseWarning: ElementActions.closeWarning,
+      handleCreateReaction: ElementActions.createReaction,
+      handleCopyReactionFromId: ElementActions.copyReactionFromId,
+      handleCopyReaction: ElementActions.copyReaction,
+      handleCopyElement: ElementActions.copyElement,
+      handleOpenReactionDetails: ElementActions.openReactionDetails,
+
+      handleBulkCreateWellplatesFromSamples:
+        ElementActions.bulkCreateWellplatesFromSamples,
+      handleFetchWellplateById: ElementActions.fetchWellplateById,
+      handleImportWellplateSpreadsheet: ElementActions.importWellplateSpreadsheet,
+      handleCreateWellplate: ElementActions.createWellplate,
+      handleGenerateWellplateFromClipboard:
+        ElementActions.generateWellplateFromClipboard,
+      handleGenerateScreenFromClipboard:
+        ElementActions.generateScreenFromClipboard,
+
+      handleAddResearchPlanToScreen: ElementActions.addResearchPlanToScreen,
+      handleFetchScreenById: ElementActions.fetchScreenById,
+      handleCreateScreen: ElementActions.createScreen,
+
+      handlefetchResearchPlanById: ElementActions.fetchResearchPlanById,
+      handleCreateResearchPlan: ElementActions.createResearchPlan,
+      handleImportWellplateIntoResearchPlan: ElementActions.importWellplateIntoResearchPlan,
+      handleImportTableFromSpreadsheet: ElementActions.importTableFromSpreadsheet,
+
+      handleCreatePrivateNote: ElementActions.createPrivateNote,
+      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
+
+      handleCreatePrivateNote: ElementActions.createPrivateNote,
+      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
+
+      // FIXME ElementStore listens to UIActions?
+      handleUnselectCurrentElement: UIActions.deselectAllElements,
+      handleSetPagination: UIActions.setPagination,
+
+      handleRefreshElements: ElementActions.refreshElements,
+      handleGenerateEmptyElement:
+        [
+          ElementActions.generateEmptyGenericEl,
+          ElementActions.generateEmptyWellplate,
+          ElementActions.generateEmptyScreen,
+          ElementActions.generateEmptyResearchPlan,
+          ElementActions.generateEmptySample,
+          ElementActions.generateEmptyReaction,
+          ElementActions.showReportContainer,
+          ElementActions.showFormatContainer,
+          ElementActions.showComputedPropsGraph,
+          ElementActions.showComputedPropsTasks,
+          ElementActions.showDeviceControl,
+          ElementActions.showLiteratureDetail,
+          ElementActions.showPredictionContainer,
+        ],
+      handleFetchMoleculeByMolfile: ElementActions.fetchMoleculeByMolfile,
+      handleFetchMetadata: ElementActions.fetchMetadata,
+      handleDeleteElements: ElementActions.deleteElements,
+
+      handleUpdateElementsCollection: ElementActions.updateElementsCollection,
+      handleAssignElementsCollection: ElementActions.assignElementsCollection,
+      handleRemoveElementsCollection: ElementActions.removeElementsCollection,
+      handleSplitAsSubsamples: ElementActions.splitAsSubsamples,
+      handleSplitAsSubwellplates: ElementActions.splitAsSubwellplates,
+      // formerly from DetailStore
+      handleSelect: DetailActions.select,
+      handleClose: DetailActions.close,
+      handleDeletingElements: ElementActions.deleteElementsByUIState,
+      handleConfirmDelete: DetailActions.confirmDelete,
+      handleChangeCurrentElement: DetailActions.changeCurrentElement,
+      handleGetMoleculeCas: DetailActions.getMoleculeCas,
+      handleUpdateMoleculeNames: DetailActions.updateMoleculeNames,
+      handleUpdateMoleculeCas: DetailActions.updateMoleculeCas,
+      handleUpdateLinkedElement: [
+        ElementActions.updateReaction,
+        ElementActions.updateSample,
+        RepositoryActions.publishSample,
+        RepositoryActions.publishReaction,
+        RepositoryActions.publishSampleReserveDois,
+        RepositoryActions.publishReactionReserveDois,
+        RepositoryActions.reviewPublish,
+      ],
+      handleRefreshSyncCollections: [
+        RepositoryActions.reviewPublish,
+        RepositoryActions.publishSample,
+        RepositoryActions.publishReaction,
+      ],
+      handleUpdateElement: [
+        // ElementActions.updateReaction,
+        // ElementActions.updateSample,
+        ElementActions.updateWellplate,
+        ElementActions.updateScreen,
+        ElementActions.updateResearchPlan,
+        ElementActions.updateGenericEl,
+      ],
+      handleUpdateEmbeddedResearchPlan: ElementActions.updateEmbeddedResearchPlan,
+      handleRefreshComputedProp: ElementActions.refreshComputedProp,
+    });
+  }
+
+  handleFetchAllDevices(devices) {
+    this.state.elements['devices'].devices = devices
+  }
+
+  handleFetchDeviceById(device) {
+    this.state.currentElement = device
+  }
+
+  findDeviceIndexById(deviceId) {
+    const { devices } = this.state.elements['devices']
+    return devices.findIndex((e) => e.id === deviceId)
+  }
+
+  handleSaveDevice(device) {
+    const { devices } = this.state.elements['devices']
+    const deviceKey = devices.findIndex((e) => e._checksum === device._checksum)
+    if (deviceKey === -1) {
+      this.state.elements['devices'].devices.push(device)
+    } else {
+      this.state.elements['devices'].devices[deviceKey] = device
+    }
+  }
+
+  handleToggleDeviceType({ device, type }) {
+    if (device.types.includes(type)) {
+      device.types = device.types.filter((e) => e !== type)
+    } else {
+      device.types.push(type)
+    }
+    const deviceKey = this.findDeviceIndexById(device.id)
+    this.state.elements['devices'].devices[deviceKey] = device
+  }
+
+  handleCreateDevice() {
+    const { devices } = this.state.elements['devices']
+    const newDevice = Device.buildEmpty()
+    const newKey = devices.length
+    this.state.elements['devices'].activeAccordionDevice = newKey
+    this.state.elements['devices'].devices.push(newDevice)
+  }
+
+  handleDeleteDevice(device) {
+    const { devices, activeAccordionDevice } = this.state.elements['devices']
+    this.state.elements['devices'].devices = devices.filter((e) => e.id !== device.id)
+  }
+
+  handleAddSampleToDevice({ sample, device, options = { save: false } }) {
+    const deviceSample = DeviceSample.buildEmpty(device.id, sample)
+    device.samples.push(deviceSample)
+    if (options.save) {
+      ElementActions.saveDevice(device)
+      ElementActions.fetchDeviceById.defer(device.id)
+    }
+  }
+
+  handleAddSampleWithAnalysisToDevice({ sample, analysis, device }) {
+    // Note: #735
+    // this handleAddSampleWithAnalysisToDevice is unused so far but we still update '1H NMR' to the new type from OLS-chmo
+    // and 'NMR'(type) of DeviceSample as well
+    const kind = (analysis.kind || '').split('|')[0].trim();
+    switch (kind) {
+      case chmoConversions.nmr_1h.termId:
+        // add sample to device
+        const deviceSample = DeviceSample.buildEmpty(device.id, { id: sample.id, short_label: sample.short_label })
+        deviceSample.types = [chmoConversions.nmr_1h.value]
+        device.samples.push(deviceSample)
+        DeviceFetcher.update(device)
+          .then(device => {
+            const savedDeviceSample = last(device.samples)
+            // add sampleAnalysis to experiments
+            let deviceAnalysis = device.devicesAnalyses.find(a => a.analysisType === chmoConversions.nmr_1h.value)
+            if (!deviceAnalysis) {
+              deviceAnalysis = DeviceAnalysis.buildEmpty(device.id, chmoConversions.nmr_1h.value)
+            }
+            const newExperiment = AnalysesExperiment.buildEmpty(sample.id, sample.short_label, analysis.id, savedDeviceSample.id)
+            deviceAnalysis.experiments.push(newExperiment)
+            ElementActions.saveDeviceAnalysis.defer(deviceAnalysis)
+          })
+        break
+    }
+  }
+
+  handleToggleTypeOfDeviceSample({ device, sample, type }) {
+    const sampleKey = device.samples.findIndex(s => s.id === sample.id)
+    if (sample.types.includes(type)) {
+      sample.types = sample.types.filter(t => t !== type)
+    } else {
+      sample.types.push(type)
+    }
+    device.samples[sampleKey] = sample
+  }
+
+  handleOpenDeviceAnalysis({ device, type }) {
+    switch (type) {
+      case "NMR":
+        const { currentCollection, isSync } = UIStore.getState();
+        const deviceAnalysis = device.devicesAnalyses.find((a) => a.analysisType === "NMR")
+
+        // update Device in case of sample was added by dnd and device was not saved
+        device.updateChecksum()
+        ElementActions.saveDevice(device)
+
+        if (deviceAnalysis) {
+          Aviator.navigate(isSync
+            ? `/scollection/${currentCollection.id}/devicesAnalysis/${deviceAnalysis.id}`
+            : `/collection/${currentCollection.id}/devicesAnalysis/${deviceAnalysis.id}`
+          )
+        } else {
+          Aviator.navigate(isSync
+            ? `/scollection/${currentCollection.id}/devicesAnalysis/new/${device.id}/${type}`
+            : `/collection/${currentCollection.id}/devicesAnalysis/new/${device.id}/${type}`
+          )
+        }
+        break
+    }
+  }
+
+  handleRemoveSampleFromDevice({ sample, device }) {
+    device.samples = device.samples.filter((e) => e.id !== sample.id)
+    const deviceKey = this.findDeviceIndexById(device.id)
+    this.state.elements['devices'].devices[deviceKey] = device
+  }
+
+  handleChangeDeviceProp({ device, prop, value }) {
+    device[prop] = value
+    const deviceKey = this.findDeviceIndexById(device.id)
+    this.state.elements['devices'].devices[deviceKey] = device
+  }
+
+  handleChangeActiveAccordionDevice(key) {
+    this.state.elements['devices'].activeAccordionDevice = key
+  }
+
+  handleChangeSelectedDeviceId(deviceId) {
+    this.state.elements['devices'].selectedDeviceId = deviceId
+  }
+
+  handleSetSelectedDeviceId(deviceId) {
+    this.state.elements['devices'].selectedDeviceId = deviceId
+  }
+
+  handleSetRefreshCoefficient(obj) {
+    this.setState({ refreshCoefficient: [obj] });
+  }
+
+  //TODO move these in Element Action ??
+  createSampleAnalysis(sampleId, type) {
+    return new Promise((resolve, reject) => {
+      SamplesFetcher.fetchById(sampleId)
+        .then(sample => {
+          let analysis = Container.buildAnalysis(chmoConversions.others.value);
+          switch (type) {
+            case chmoConversions.nmr_1h.termId:
+              analysis = Container.buildAnalysis(chmoConversions.nmr_1h.value)
+              break
+          }
+          sample.addAnalysis(analysis)
+          SamplesFetcher.update(sample)
+          resolve(analysis)
+        })
+    })
+  }
+
+  createAnalysisExperiment(deviceSample, deviceAnalysis) {
+    return new Promise((resolve, reject) => {
+      this.createSampleAnalysis(deviceSample.sampleId, deviceAnalysis.analysisType)
+        .then(sampleAnalysis => {
+          const experiment = AnalysesExperiment.buildEmpty(
+            deviceSample.sampleId,
+            deviceSample.shortLabel,
+            sampleAnalysis.id,
+            deviceSample.id
+          )
+          resolve(experiment)
+        })
+    })
+  }
+
+  handleCreateDeviceAnalysis({ device, analysisType }) {
+    const analysis = DeviceAnalysis.buildEmpty(device.id, analysisType)
+    const samplesOfAnalysisType = device.samples.filter(s => s.types.includes(analysisType))
+    const promises = samplesOfAnalysisType.map(s => this.createAnalysisExperiment(s, analysis))
+    Promise.all(promises)
+      .then(experiments => {
+        experiments.map(experiment => analysis.experiments.push(experiment))
+        ElementActions.saveDeviceAnalysis(analysis)
+      })
+  }
+
+  handleFetchDeviceAnalysisById({ analysis, device }) {
+    const { experiments } = analysis
+    const samplesOfAnalysisType = device.samples.filter(s => s.types.includes(analysis.analysisType))
+    const samplesWithoutOld = slice(samplesOfAnalysisType, experiments.length)
+    const promises = samplesWithoutOld.map(s => this.createAnalysisExperiment(s, analysis))
+    Promise.all(promises)
+      .then(experiments => {
+        experiments.map(experiment => analysis.experiments.push(experiment))
+        ElementActions.saveDeviceAnalysis(analysis)
+      })
+  }
+
+  handleSaveDeviceAnalysis(analysis) {
+    const { currentCollection, isSync } = UIStore.getState();
+    this.state.currentElement = analysis
+
+    Aviator.navigate(isSync
+      ? `/scollection/${currentCollection.id}/devicesAnalysis/${analysis.id}`
+      : `/collection/${currentCollection.id}/devicesAnalysis/${analysis.id}`
+    )
+  }
+
+  handleChangeAnalysisExperimentProp({ analysis, experiment, prop, value }) {
+    const experimentKey = analysis.experiments.findIndex((e) => e.id === experiment.id)
+    analysis.experiments[experimentKey][prop] = value
+    this.state.currentElement = analysis
+  }
+
+  handleDeleteAnalysisExperiment({ device, analysis, experiment }) {
+    const sample = device.samples.find(s => s.id === experiment.deviceSampleId)
+    const sampleKey = device.samples.findIndex(s => s.id === experiment.deviceSampleId)
+    device.samples[sampleKey].types = sample.types.filter(t => t !== analysis.analysisType)
+    ElementActions.saveDevice(device)
+    ElementActions.fetchDeviceAnalysisById.defer(analysis.id)
+  }
+
+  handleDuplicateAnalysisExperiment({ device, analysis, experiment }) {
+    const sample = device.samples.find(s => s.id === experiment.deviceSampleId)
+    const newSample = DeviceSample.buildEmpty(analysis.deviceId, { id: sample.sampleId, short_label: sample.shortLabel })
+    newSample.types = [analysis.analysisType]
+    device.samples.push(newSample)
+    ElementActions.saveDevice(device)
+    ElementActions.fetchDeviceAnalysisById.defer(analysis.id)
+  }
+
+  // SEARCH
+
+  handleFetchBasedOnSearchSelection(result) {
+    Object.keys(result).forEach((key) => {
+      this.state.elements[key] = result[key];
+    });
+  }
+
+  handlefetchBasedOnStructureAndCollection(result) {
+    Object.keys(result).forEach((key) => {
+      this.state.elements[key] = result[key];
+    });
+  }
+
+  // -- Elements --
+  handleDeleteElements(options) {
+    this.waitFor(UIStore.dispatchToken);
+    const ui_state = UIStore.getState();
+    const { sample, reaction, wellplate, screen, research_plan, currentCollection } = ui_state;
+    const selecteds = this.state.selecteds.map(s => ({ id: s.id, type: s.type }));
+    const params = {
+      options,
+      sample,
+      reaction,
+      wellplate,
+      screen,
+      research_plan,
+      currentCollection,
+      selecteds
+    };
+
+    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
+      const { klasses } = UIStore.getState();
+
+      // eslint-disable-next-line no-unused-expressions
+      klasses && klasses.forEach((klass) => {
+        params[`${klass}`] = ui_state[`${klass}`];
+      });
+    }
+
+    ElementActions.deleteElementsByUIState(params);
+  }
+
+  handleUpdateElementsCollection() {
+    CollectionActions.fetchUnsharedCollectionRoots();
+    UIActions.uncheckWholeSelection.defer();
+    this.fetchElementsByCollectionIdandLayout();
+  }
+
+  handleAssignElementsCollection() {
+    CollectionActions.fetchUnsharedCollectionRoots();
+    UIActions.uncheckWholeSelection.defer();
+    this.fetchElementsByCollectionIdandLayout();
+  }
+
+  handleRemoveElementsCollection() {
+    // CollectionActions.fetchUnsharedCollectionRoots();
+    // UIActions.clearSearchSelection.defer()
+    UIActions.uncheckWholeSelection.defer();
+    this.waitFor(UIStore.dispatchToken)
+
+    this.fetchElementsByCollectionIdandLayout();
+  }
+
+  fetchElementsByCollectionIdandLayout() {
+    const { currentSearchSelection, currentCollection } = UIStore.getState();
+    const isSync = !!(currentCollection && currentCollection.is_sync_to_me);
+    if (currentSearchSelection != null) {
+      const { currentType } = UserStore.getState();
+      this.handleRefreshElements(currentType);
+    } else {
+      const { profile } = UserStore.getState();
+      if (profile && profile.data && profile.data.layout) {
+        const { layout } = profile.data;
+        if (layout.sample && layout.sample > 0) { this.handleRefreshElements('sample'); }
+        if (layout.reaction && layout.reaction > 0) { this.handleRefreshElements('reaction'); }
+        if (layout.wellplate && layout.wellplate > 0) { this.handleRefreshElements('wellplate'); }
+        if (layout.screen && layout.screen > 0) { this.handleRefreshElements('screen'); }
+        if (!isSync && layout.research_plan && layout.research_plan > 0) { this.handleRefreshElements('research_plan'); }
+
+
+        const { currentUser, genericEls } = UserStore.getState();
+        if (MatrixCheck(currentUser.matrix, 'genericElement')) {
+          // eslint-disable-next-line no-unused-expressions
+          const genericNames = (genericEls.map(el => el.name)) || [];
+          genericNames.forEach((klass) => {
+            if (layout[`${klass}`] && layout[`${klass}`] > 0) { this.handleRefreshElements(klass); }
+          });
+        }
+      }
+    }
+  }
+
+  handleFetchGenericElsByCollectionId(result) {
+    //const klassName = result.element_klass && result.element_klass.name;
+    let type = result.type;
+    if (typeof type === 'undefined' || type == null) {
+      type = (result.result.elements && result.result.elements.length > 0 && result.result.elements[0].type) || result.result.type;
+    }
+    this.state.elements[`${type}s`] = result.result;
+  }
+
+  handleFetchGenericElById(result) {
+    this.changeCurrentElement(result);
+  }
+
+  handleCreateGenericEl(genericEl) {
+    UserActions.fetchCurrentUser();
+    this.handleRefreshElements((genericEl.element_klass && genericEl.element_klass.name) || 'genericEl');
+    //this.handleRefreshElements('genericEl');
+    this.navigateToNewElement(genericEl, 'GenericEl');
+  }
+
+  handleFetchSamplesByCollectionId(result) {
+    this.state.elements.samples = result;
+  }
+
+  handleFetchReactionsByCollectionId(result) {
+    this.state.elements.reactions = result;
+  }
+
+  handleFetchWellplatesByCollectionId(result) {
+    this.state.elements.wellplates = result;
+  }
+
+  handleFetchScreensByCollectionId(result) {
+    this.state.elements.screens = result;
+  }
+
+  handlefetchResearchPlansByCollectionId(result) {
+    this.state.elements.research_plans = result;
+  }
+
+  // -- Samples --
+
+  handleFetchSampleById(result) {
+    if (!this.state.currentElement || this.state.currentElement._checksum != result._checksum) {
+      this.changeCurrentElement(result);
+    }
+  }
+
+  handleCreateSample({ element, closeView }) {
+    UserActions.fetchCurrentUser();
+    fetchOls('sample');
+    this.handleRefreshElements('sample');
+    if (!closeView) {
+      this.navigateToNewElement(element);
+    }
+  }
+
+  handleCreateSampleForReaction({ newSample, reaction, materialGroup }) {
+    UserActions.fetchCurrentUser();
+    reaction.addMaterial(newSample, materialGroup);
+    this.handleRefreshElements('sample');
+    ElementActions.handleSvgReactionChange(reaction);
+    this.changeCurrentElement(reaction);
+  }
+
+  handleEditReactionSample(result) {
+    const sample = result.sample;
+    sample.belongTo = result.reaction;
+    this.changeCurrentElement(sample);
+  }
+
+  handleEditWellplateSample(result) {
+    const sample = result.sample;
+    sample.belongTo = result.wellplate;
+    this.changeCurrentElement(sample);
+  }
+
+  handleUpdateSampleForReaction({ reaction, sample, closeView }) {
+    // UserActions.fetchCurrentUser();
+    ElementActions.handleSvgReactionChange(reaction);
+    if (closeView) {
+      this.changeCurrentElement(reaction);
+    } else {
+      this.changeCurrentElement(sample);
+    }
+
+    // TODO: check if this is needed with the new handling of changing CE
+    // maybe this.handleRefreshElements is enough
+    this.handleUpdateElement(sample);
+  }
+
+  handleUpdateLinkedElement({ element, closeView }) {
+    if (closeView) {
+      this.deleteCurrentElement(element);
+    } else {
+      this.changeCurrentElement(element);
+    }
+    this.handleUpdateElement(element);
+  }
+
+  handleRefreshSyncCollections() {
+    CollectionActions.fetchSyncInCollectionRoots();
+  }
+
+  handleUpdateSampleForWellplate(wellplate) {
+    // UserActions.fetchCurrentUser()
+    this.state.currentElement = null;
+    this.handleRefreshElements('sample');
+
+    const wellplateID = wellplate.id;
+    ElementActions.fetchWellplateById(wellplateID);
+  }
+
+  handleSplitAsSubsamples(ui_state) {
+    ElementActions.fetchSamplesByCollectionId(
+      ui_state.currentCollection.id, {},
+      ui_state.isSync, this.state.moleculeSort
+    );
+  }
+
+  handleSplitAsSubwellplates(ui_state) {
+    ElementActions.fetchWellplatesByCollectionId(ui_state.currentCollection.id);
+    ElementActions.fetchSamplesByCollectionId(
+      ui_state.currentCollection.id, {},
+      ui_state.isSync, this.state.moleculeSort
+    );
+  }
+
+  // Molecules
+  handleFetchMoleculeByMolfile(result) {
+    // Attention: This is intended to update SampleDetails
+    this.state.currentElement.molecule = result;
+    // this.state.currentElement.molfile = result.molfile;
+    this.state.currentElement.molecule_id = result.id;
+    this.handleRefreshElements('sample');
+  }
+
+  // Samples with residues
+  handleFetchResidueByMolfile(result) {
+    // Attention: This is intended to update SampleDetails
+    //this.state.currentElement.molecule = result;
+    this.state.currentElement.sample = result;
+    this.handleRefreshElements('sample');
+  }
+
+  handleCopySampleFromClipboard(collection_id) {
+    const clipboardSamples = ClipboardStore.getState().samples;
+    if (clipboardSamples && clipboardSamples.length > 0) {
+      this.changeCurrentElement(Sample.copyFromSampleAndCollectionId(clipboardSamples[0], collection_id, true));
+    }
+  }
+
+  /**
+   * @param {Object} params = { reaction, materialGroup }
+   */
+  handleAddSampleToMaterialGroup(params) {
+    const { materialGroup } = params
+    let { reaction } = params
+
+    let sample = Sample.buildEmpty(reaction.collection_id)
+    sample.molfile = sample.molfile || ''
+    sample.molecule = sample.molecule == undefined ? sample : sample.molecule
+    sample.sample_svg_file = sample.sample_svg_file
+    sample.belongTo = reaction;
+    sample.matGroup = materialGroup;
+    reaction.changed = true;
+    this.changeCurrentElement(sample);
+  }
+
+  handleShowReactionMaterial(params) {
+    const { reaction, sample, coefficient } = params;
+    const { selecteds } = this.state;
+    sample.belongTo = reaction;
+    const obj = {
+      sId: sample.id,
+      rId: reaction.id,
+      coefficient
+    };
+    this.setState((prevState) => {
+      const updatedCoefficient = [...prevState.refreshCoefficient];
+      let found = false;
+      selecteds.forEach((element) => {
+        if (element.type === 'reaction' && element.id === obj.rid) {
+          found = true;
+        }
+      });
+      if (!found) {
+        updatedCoefficient.push(obj);
+      }
+      return { refreshCoefficient: updatedCoefficient };
+    });
+    this.changeCurrentElement(sample);
+  }
+
+  handleImportSamplesFromFile(data) {
+    if (data.sdf) {
+      UIActions.updateModalProps.defer({
+        show: true,
+        component: ModalImportConfirm,
+        title: "Sample Import Confirmation",
+        action: null,
+        listSharedCollections: false,
+        customModal: "custom-modal",
+        data: data.data,
+        //raw_data: data.raw_data,
+        custom_data_keys: data.custom_data_keys,
+        mapped_keys: data.mapped_keys,
+        collection_id: data.collection_id,
+      })
+    } else {
+      this.handleRefreshElements('sample');
+    }
+
+    this.handleRefreshElements('sample');
+  }
+
+  handleImportSamplesFromFileConfirm(data) {
+    if (data.sdf) {
+      this.handleRefreshElements('sample');
+    }
+  }
+
+  // -- Wellplates --
+
+  handleBulkCreateWellplatesFromSamples() {
+    this.handleRefreshElements('wellplate');
+    this.handleRefreshElements('sample');
+  }
+
+  handleFetchWellplateById(result) {
+    this.changeCurrentElement(result);
+    // this.state.currentElement = result;
+    // this.navigateToNewElement(result)
+  }
+
+  handleImportWellplateSpreadsheet(result) {
+    if (result.error) { return; }
+
+    const { selecteds } = this.state;
+
+    const index = this.elementIndex(selecteds, result);
+    const newSelecteds = this.updateElement(result, index);
+    this.setState({ selecteds: newSelecteds });
+  }
+
+  handleCreateWellplate(wellplate) {
+    fetchOls('wellplate');
+    this.handleRefreshElements('wellplate');
+    this.navigateToNewElement(wellplate);
+  }
+
+  handleGenerateWellplateFromClipboard(collection_id) {
+    let clipboardSamples = ClipboardStore.getState().samples;
+
+    this.changeCurrentElement(Wellplate.buildFromSamplesAndCollectionId(clipboardSamples, collection_id));
+    //this.state.currentElement = Wellplate.buildFromSamplesAndCollectionId(clipboardSamples, collection_id);
+  }
+  // -- Screens --
+
+  handleAddResearchPlanToScreen(screen) {
+    fetchOls('screen');
+    this.handleRefreshElements('screen');
+    this.navigateToNewElement(screen);
+  }
+
+  handleFetchScreenById(result) {
+    if (!this.state.currentElement || this.state.currentElement._checksum != result._checksum) {
+      this.changeCurrentElement(result);
+      //this.state.currentElement = result;
+    }
+  }
+
+  handleCreateScreen(screen) {
+    fetchOls('screen');
+    this.handleRefreshElements('screen');
+    this.navigateToNewElement(screen);
+  }
+
+  handleGenerateScreenFromClipboard(collection_id) {
+    let clipboardWellplates = ClipboardStore.getState().wellplates;
+    this.changeCurrentElement(Screen.buildFromWellplatesAndCollectionId(clipboardWellplates, collection_id));
+  }
+
+  // -- ResearchPlans --
+
+  handlefetchResearchPlanById(result) {
+    this.changeCurrentElement(result);
+    //this.state.currentElement = result;
+  }
+
+  handleCreateResearchPlan(research_plan) {
+    this.handleRefreshElements('research_plan');
+    this.navigateToNewElement(research_plan);
+  }
+
+  handleImportWellplateIntoResearchPlan(result) {
+    if (result.error) { return; }
+
+    const { selecteds } = this.state;
+
+    const index = this.elementIndex(selecteds, result);
+    const newSelecteds = this.updateElement(result, index);
+    this.setState({ selecteds: newSelecteds });
+  }
+
+  handleImportTableFromSpreadsheet(result) {
+    if (result.error) { return; }
+
+    const { selecteds } = this.state;
+
+    const index = this.elementIndex(selecteds, result);
+    const newSelecteds = this.updateElement(result, index);
+    this.setState({ selecteds: newSelecteds });
+  }
+
+  // -- Reactions --
+
+  handleFetchReactionById(result) {
+    if (!this.state.currentElement || (this.state.currentElement && this.state.currentElement._checksum) != result._checksum) {
+      this.changeCurrentElement(result);
+      this.state.elements.reactions.elements = this.refreshReactionsListForSpecificReaction(result);
+      //  this.navigateToNewElement(result);
+    }
+  }
+
+  refreshReactionsListForSpecificReaction(newReaction) {
+    return this.state.elements.reactions.elements.map(reaction => {
+      return reaction.id === newReaction.id
+        ? newReaction
+        : reaction
+    });
+  }
+
+  handleTryFetchById(result) {
+    if (result.hasOwnProperty("error")) {
+      this.state.elementWarning = true
+    } else {
+      this.changeCurrentElement(result);
+      // this.state.currentElement = result
+      this.navigateToNewElement(result)
+    }
+  }
+
+  handleCloseWarning() {
+    this.state.elementWarning = false
+  }
+
+
+  handleCreateReaction(reaction) {
+    UserActions.fetchCurrentUser();
+    fetchOls('reaction');
+    this.handleRefreshElements('reaction');
+    this.navigateToNewElement(reaction);
+  }
+
+  handleCopyReactionFromId(reaction) {
+    this.waitFor(UIStore.dispatchToken);
+    const uiState = UIStore.getState();
+    this.changeCurrentElement(Reaction.copyFromReactionAndCollectionId(reaction, uiState.currentCollection.id));
+  }
+
+  handleCopyReaction(result) {
+    this.changeCurrentElement(Reaction.copyFromReactionAndCollectionId(result.reaction, result.colId));
+    Aviator.navigate(`/collection/${result.colId}/reaction/copy`);
+  }
+
+  handleCopyElement(result) {
+    this.changeCurrentElement(GenericEl.copyFromCollectionId(result.element, result.colId));
+    Aviator.navigate(`/collection/${result.colId}/${result.element.type}/copy`);
+  }
+
+  handleOpenReactionDetails(reaction) {
+    this.changeCurrentElement(reaction);
+    this.handleRefreshElements('sample')
+  }
+
+  // -- Reactions Literatures --
+
+  handleCreateReactionLiterature(result) {
+    this.state.currentElement.literatures.push(result);
+  }
+
+  handleDeleteReactionLiterature(reactionId) {
+    ElementActions.fetchLiteraturesByReactionId(reactionId);
+    this.handleRefreshElements('reaction');
+  }
+
+  handleFetchLiteraturesByReactionId(result) {
+    this.state.currentElement.literatures = result.literatures;
+  }
+
+  // -- Generic --
+
+  navigateToNewElement(element = {}, klassType = '') {
+    this.waitFor(UIStore.dispatchToken);
+    const { type, id } = element;
+    const { uri, namedParams } = Aviator.getCurrentRequest();
+    const uriArray = uri.split(/\//);
+    if (!type) {
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}`, { silent: true });
+      return null;
+    }
+    namedParams[`${type}ID`] = id;
+    Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/${type}/${id}`, { silent: true });
+    elementShowOrNew({ type, klassType, params: namedParams });
+    return null;
+  }
+
+  handleGenerateEmptyElement(element) {
+    const { currentElement } = this.state;
+
+    const newElementOfSameTypeIsPresent =
+      currentElement && currentElement.isNew && currentElement.type ==
+      element.type;
+    if (!newElementOfSameTypeIsPresent) {
+      this.changeCurrentElement(element);
+    }
+  }
+
+  handleUnselectCurrentElement() {
+    this.state.currentElement = null;
+  }
+
+  handleSetPagination(pagination) {
+    this.waitFor(UIStore.dispatchToken);
+    this.handleRefreshElements(pagination.type);
+  }
+
+  handleRefreshElements(type) {
+    this.waitFor(UIStore.dispatchToken);
+    const uiState = UIStore.getState();
+    if (!uiState.currentCollection || !uiState.currentCollection.id) return;
+    if (typeof uiState[type] === 'undefined') return;
+
+    const { page } = uiState[type];
+    const { moleculeSort } = this.state;
+    if (this.state.elements[`${type}s`]) {
+      this.state.elements[`${type}s`].page = page;
+    }
+
+    // TODO if page changed -> fetch
+    // if there is a currentSearchSelection
+    //    we have to execute the respective action
+    const { currentSearchSelection } = uiState;
+
+    if (currentSearchSelection != null) {
+      currentSearchSelection.page_size = uiState.number_of_results;
+      ElementActions.fetchBasedOnSearchSelectionAndCollection.defer({
+        selection: currentSearchSelection,
+        collectionId: uiState.currentCollection.id,
+        page,
+        isSync: uiState.isSync,
+        moleculeSort
+      });
+    } else {
+      const per_page = uiState.number_of_results;
+      const { fromDate, toDate, productOnly } = uiState;
+      const params = { page, per_page, fromDate, toDate, productOnly, name: type };
+      const fnName = type.split('_').map(x => x[0].toUpperCase() + x.slice(1)).join("") + 's';
+      let fn = `fetch${fnName}ByCollectionId`;
+      const allowedActions = [
+        'fetchSamplesByCollectionId',
+        'fetchReactionsByCollectionId',
+        'fetchWellplatesByCollectionId',
+        'fetchScreensByCollectionId',
+        'fetchResearchPlansByCollectionId'
+      ];
+      if (allowedActions.includes(fn)) {
+        ElementActions[fn](uiState.currentCollection.id, params, uiState.isSync, moleculeSort);
+      } else {
+        ElementActions.fetchGenericElsByCollectionId(uiState.currentCollection.id, params, uiState.isSync, type);
+        ElementActions.fetchSamplesByCollectionId(uiState.currentCollection.id, params, uiState.isSync, moleculeSort);
+      }
+    }
+
+    MessagesFetcher.fetchSpectraMessages(0).then((result) => {
+      result.messages.sort((a, b) => (a.id - b.id));
+      const messages = result.messages;
+      if (messages && messages.length > 0) {
+        const lastMsg = messages[0]
+        this.setState({ spectraMsg: lastMsg })
+      }
+    })
+  }
+
+
+  // CurrentElement
+  handleSetCurrentElement(result) {
+    this.changeCurrentElement(result);
+  }
+
+  handleDeselectCurrentElement() {
+    this.changeCurrentElement(null);
+  }
+
+  handleChangeSorting(sort) {
+    this.state.moleculeSort = sort;
+    this.waitFor(UIStore.dispatchToken);
+    this.handleRefreshElements('sample');
+  }
+
+  handleChangeElementsFilter(filter) {
+    const userState = UserStore.getState();
+    if (!userState.profile.filters) {
+      userState.profile.data.filters = {};
+    }
+    userState.profile.data.filters[filter.name] = {
+      sort: filter.sort,
+      group: filter.group,
+      direction: filter.direction,
+    };
+
+    this.handleRefreshElements(filter.name);
+  }
+
+  // //////////////////////
+  // formerly DetailStore
+  // TODO: clean this section
+  handleSelect(index) {
+    this.resetCurrentElement(index, this.state.selecteds);
+  }
+
+  handleClose({ deleteEl, force }) {
+    // Currently ignore report "isPendingToSave"
+    const deletableTyps = ['report', 'prediction'];
+    const isDeletableTyps = deletableTyps.indexOf(deleteEl.type) >= 0;
+    if (force || isDeletableTyps || this.isDeletable(deleteEl)) {
+      this.deleteCurrentElement(deleteEl);
+    } else {
+      this.setState({ deletingElement: deleteEl });
+    }
+  }
+
+  handleConfirmDelete(confirm) {
+    const deleteEl = this.state.deletingElement
+    if (confirm) {
+      this.deleteCurrentElement(deleteEl)
+    }
+    this.setState({ deletingElement: null })
+  }
+
+  handleChangeCurrentElement({ oriEl, nextEl }) {
+    const { selecteds } = this.state;
+    const index = this.elementIndex(selecteds, nextEl);
+    this.synchronizeElements(oriEl);
+
+    if (index === -1) {
+      this.state.activeKey = selecteds.length;
+      this.state.selecteds = this.addElement(nextEl);
+    } else {
+      this.state.activeKey = index;
+      this.state.selecteds = this.updateElement(nextEl, index);
+    }
+
+    return true
+  }
+
+  changeCurrentElement(nextEl) {
+    const { selecteds } = this.state;
+    const index = this.elementIndex(selecteds, nextEl);
+    this.synchronizeElements(this.state.currentElement);
+
+    if (index === -1) {
+      this.state.activeKey = selecteds.length;
+      if (nextEl) this.state.selecteds = this.addElement(nextEl);
+    } else {
+      this.state.activeKey = index;
+      this.state.selecteds = this.updateElement(nextEl, index);
+    }
+    // this.synchronizeElements(this.state.currentElement);
+    this.state.currentElement = nextEl;
+  }
+
+
+  handleGetMoleculeCas(updatedSample) {
+    const selecteds = this.state.selecteds;
+    const index = this.elementIndex(selecteds, updatedSample)
+    const newSelecteds = this.updateElement(updatedSample, index)
+    this.setState({ selecteds: newSelecteds })
+  }
+
+  UpdateMolecule(updatedSample) {
+    if (updatedSample) {
+      const selecteds = this.state.selecteds;
+      const index = this.elementIndex(selecteds, updatedSample);
+      const newSelecteds = this.updateElement(updatedSample, index);
+      this.setState({ selecteds: newSelecteds });
+    }
+  }
+
+  UpdateResearchPlanAttaches(updatedResearchPlan) {
+    const { selecteds } = this.state;
+    ResearchPlansFetcher.fetchById(updatedResearchPlan.id)
+      .then((result) => {
+        result.mode = 'edit';
+        this.changeCurrentElement(result);
+        const index = this.elementIndex(selecteds, result);
+        const newSelecteds = this.updateElement(result, index);
+        this.setState({ selecteds: newSelecteds });
+      });
+  }
+
+  handleUpdateResearchPlanAttaches(updatedResearchPlan) {
+    this.UpdateResearchPlanAttaches(updatedResearchPlan);
+  }
+
+  UpdateWellplateAttaches(updatedWellplate) {
+    const { selecteds } = this.state;
+    WellplatesFetcher.fetchById(updatedWellplate.id)
+      .then((result) => {
+        this.changeCurrentElement(result);
+        const index = this.elementIndex(selecteds, result);
+        const newSelecteds = this.updateElement(result, index);
+        this.setState({ selecteds: newSelecteds });
+      });
+  }
+
+  handleUpdateWellplateAttaches(updatedWellplate) {
+    this.UpdateWellplateAttaches(updatedWellplate);
+  }
+
+  UpdateScreen(updatedScreen) {
+    const { selecteds } = this.state;
+    ScreensFetcher.fetchById(updatedScreen.id)
+      .then((result) => {
+        this.changeCurrentElement(result);
+        const index = this.elementIndex(selecteds, result);
+        const newSelecteds = this.updateElement(result, index);
+        this.setState({ selecteds: newSelecteds });
+      });
+  }
+
+  handleUpdateScreen(updatedScreen) {
+    this.UpdateScreen(updatedScreen);
+  }
+
+  handleUpdateMoleculeNames(updatedSample) {
+    this.UpdateMolecule(updatedSample);
+  }
+
+  handleUpdateMoleculeCas(updatedSample) {
+    this.UpdateMolecule(updatedSample);
+  }
+
+  handleUpdateElement(updatedElement) {
+    switch (updatedElement.type) {
+      case 'sample':
+        fetchOls('sample');
+        this.handleRefreshElements('sample');
+        break;
+      case 'reaction':
+        fetchOls('reaction');
+        this.handleRefreshElements('reaction');
+        this.handleRefreshElements('sample');
+        break;
+      case 'screen':
+        fetchOls('screen');
+        this.handleRefreshElements('screen');
+        this.handleUpdateScreen(updatedElement);
+        break;
+      case 'research_plan':
+        this.handleRefreshElements('research_plan');
+        this.handleUpdateResearchPlanAttaches(updatedElement);
+        break;
+      case 'wellplate':
+        fetchOls('wellplate');
+        this.handleRefreshElements('wellplate');
+        this.handleUpdateWellplateAttaches(updatedElement);
+        this.handleRefreshElements('sample');
+        break;
+      case 'genericEl':
+        this.handleRefreshElements('genericEl');
+        break;
+      default:
+        this.changeCurrentElement(updatedElement);
+        this.handleRefreshElements(updatedElement.type);
+        break;
+    }
+
+    return true;
+  }
+
+  handleUpdateEmbeddedResearchPlan() {
+    this.handleRefreshElements('research_plan');
+  }
+
+  synchronizeElements(previous) {
+    const { selecteds, refreshCoefficient } = this.state;
+
+    if (previous instanceof Sample) {
+      const rId = previous.tag && previous.tag.taggable_data
+        && previous.tag.taggable_data.reaction_id;
+      const openedReaction = selecteds.find(el => SameEleTypId(el, { type: 'reaction', id: rId }));
+      if (openedReaction) {
+        if (refreshCoefficient && refreshCoefficient.length > 0) {
+          refreshCoefficient.forEach((element) => {
+            if (element.sId === previous.id) {
+              openedReaction.updateMaterial(previous, element);
+            }
+          });
+
+          // For REPO
+          const freeze = (openedReaction && openedReaction.publication && openedReaction.publication.taggable_data &&
+            openedReaction.publication.taggable_data.scheme_only === true && (openedReaction.publication.state !== 'declined' || openedReaction.publication.state !== 'withdrawn')) || false;
+          if (freeze === false) {
+            openedReaction.updateMaterial(previous);
+          }
+
+        } else {
+          openedReaction.updateMaterial(previous);
+        }
+        if (previous.isPendingToSave) {
+          openedReaction.changed = previous.isPendingToSave;
+        }
+      }
+    }
+
+    if (previous instanceof Reaction) {
+      const samples = previous.samples;
+      selecteds.map((nextSample) => {
+        const previousSample = samples.find(s => SameEleTypId(nextSample, s));
+        if (previousSample) {
+          nextSample.amount_value = previousSample.amount_value;
+          nextSample.amount_unit = previousSample.amount_unit;
+          nextSample.container = previousSample.container;
+          nextSample.density = previousSample.density;
+          nextSample._molarity_unit = previousSample._molarity_unit;
+          nextSample._molarity_value = previousSample._molarity_value;
+        }
+        return nextSample;
+      });
+    }
+
+    return previous;
+  }
+
+  addElement(addEl) {
+    const selecteds = this.state.selecteds
+    return [...selecteds, addEl]
+  }
+
+  updateElement(updateEl, index) {
+    const { selecteds } = this.state;
+    return [
+      ...selecteds.slice(0, index),
+      updateEl,
+      ...selecteds.slice(index + 1)
+    ];
+  }
+
+  deleteElement(deleteEl) {
+    return this.state.selecteds.filter(el => !SameEleTypId(el, deleteEl));
+  }
+
+  elementIndex(selecteds, newSelected) {
+    let index = -1;
+    if (newSelected) {
+      selecteds.forEach((s, i) => {
+        if (SameEleTypId(s, newSelected)) { index = i; }
+      });
+    }
+    return index;
+  }
+
+  resetCurrentElement(newKey, newSelecteds) {
+    const newCurrentElement = newKey < 0 ? newSelecteds[0] : newSelecteds[newKey]
+
+    if (newSelecteds.length === 0) {
+      this.changeCurrentElement(null);
+    } else {
+      this.changeCurrentElement(newCurrentElement);
+    }
+
+    UrlSilentNavigation(newCurrentElement)
+    return true
+  }
+
+  deleteCurrentElement(deleteEl) {
+    const newSelecteds = this.deleteElement(deleteEl)
+    let left = this.state.activeKey - 1
+    if (left < 0) left = 0;
+    this.setState({ selecteds: newSelecteds });
+    this.resetCurrentElement(left, newSelecteds);
+  }
+
+  isDeletable(deleteEl) {
+    return deleteEl && deleteEl.isPendingToSave ? false : true
+  }
+
+  handleDeletingElements(response) {
+    const elements = response && response.selecteds;
+    const { currentElement } = this.state;
+    const currentNotDeleted = intersectionWith([currentElement], elements, SameEleTypId)[0];
+    const newSelecteds = intersectionWith(this.state.selecteds, elements, SameEleTypId);
+    const ui_state = UIStore.getState();
+
+    if (currentNotDeleted) {
+      const currentIdx = findIndex(newSelecteds, o => o.id === currentElement.id) || 0;
+      this.setState({ selecteds: newSelecteds, activeKey: currentIdx });
+    } else {
+      this.setState({ selecteds: newSelecteds }, this.resetCurrentElement(-1, newSelecteds));
+    }
+
+    this.fetchElementsByCollectionIdandLayout();
+  }
+
+  handleRefreshComputedProp(cprop) {
+    const { selecteds, currentElement } = this.state;
+    const samples = selecteds.concat([currentElement]).filter(x => (
+      x instanceof Sample && x.id == cprop.sample_id
+    ));
+    if (samples.length === 0) return this.handleRefreshElements('sample');
+
+    samples.forEach(el => {
+      const found = el.molecule_computed_props && el.molecule_computed_props.find(x => x.id == cprop.id);
+      if (!found) {
+        el.molecule_computed_props && el.molecule_computed_props.push(cprop);
+        return;
+      }
+
+      const foundDate = Date.parse(found.updated_at);
+      const propDate = Date.parse(cprop.updated_at);
+      if (propDate > foundDate) {
+        found.max_potential = cprop.max_potential;
+        found.min_potential = cprop.min_potential;
+        found.mean_potential = cprop.mean_potential;
+        found.lumo = cprop.lumo;
+        found.homo = cprop.homo;
+        found.ip = cprop.ip;
+        found.ea = cprop.ea;
+        found.dipol_debye = cprop.dipol_debye;
+        found.mean_abs_potential = cprop.mean_abs_potential;
+        found.status = cprop.status;
+      }
+    });
+
+    this.handleRefreshElements('sample');
+  }
+
+  // End of DetailStore
+  /////////////////////
+
+  // -- Private Note --
+  handleCreatePrivateNote(note) {
+    this.state.currentElement.private_note = note
+    this.changeCurrentElement(this.state.currentElement)
+  }
+
+  handleUpdatePrivateNote(note) {
+    this.state.currentElement.private_note = note
+    this.changeCurrentElement(this.state.currentElement)
+  }
+
+  // -- Metadata --
+
+  handleFetchMetadata(metadata) {
+    this.changeCurrentElement(metadata);
+  }
+}
+
+export default alt.createStore(ElementStore, 'ElementStore');
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
new file mode 100644
index 000000000..3a9c3490e
--- /dev/null
+++ b/app/packs/src/components/stores/EmbargoStore.js
@@ -0,0 +1,119 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import EmbargoActions from '../actions/EmbargoActions';
+import PublicActions from '../actions/PublicActions';
+
+class EmbargoStore {
+  constructor() {
+    this.selectEmbargoId;
+    this.bundles = [];
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.review_info == {};
+    this.element = null;
+    // this.elements = [];
+
+    this.bindListeners({
+      handleEmbargoMove: EmbargoActions.moveEmbargo,
+      handleEmbargoAssign: EmbargoActions.assignEmbargo,
+      handleEmbargoRelease: [EmbargoActions.releaseEmbargo, EmbargoActions.deleteEmbargo],
+      handleFetchBundles: EmbargoActions.fetchEmbargoBundle,
+      handleDisplayEmbargoElement: EmbargoActions.displayReviewEmbargo,
+      handleGetEmbargoElements: EmbargoActions.getEmbargoElements,
+      handleGetEmbargoElement: EmbargoActions.getEmbargoElement,
+      handleClose: PublicActions.close,
+    });
+  }
+
+  handleClose({ deleteEl }) {
+    this.setState({ currentElement: null });
+  }
+
+  handleDisplayEmbargoElement(result) {
+    const publication = result?.element?.publication || {};
+    if (result?.element?.review_info?.review_level === 0) {
+      Aviator.navigate('/home/');
+    } else {
+      const elementType = (result.element.sample ? 'sample' : 'reaction');
+      this.setState({
+        selectEmbargo: result.element.selectEmbargo,
+        guestPage: 'embargo',
+        elementType,
+        queryId: result.id,
+        currentElement: result.element,
+        review: publication?.review || {},
+        review_info: result.element?.review_info
+      });
+      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
+    }
+  }
+
+  handleGetEmbargoElement(results) {
+    this.setState({ element: results })
+  }
+
+
+  handleEmbargoRelease(result) {
+    EmbargoActions.fetchEmbargoBundle();
+  }
+
+  handleEmbargoAssign(result) {
+    if (result.error) {
+      alert(result.error);
+    } else {
+      alert(result.message);
+      // refresh embargo list
+      EmbargoActions.getEmbargoBundle();
+      // refresh element list
+      PublicActions.getElements(
+        this.selectType, this.selectState, this.searchType,
+        this.searchValue, this.page, this.perPage
+      );
+    }
+  }
+
+  handleEmbargoMove(results) {
+    const { col_id, is_new_embargo, new_embargo, message } = results.result;
+    if (is_new_embargo === true) {
+      this.bundles.push(new_embargo);
+    }
+    alert(message);
+    EmbargoActions.getEmbargoElements(col_id);
+  }
+
+
+  handleRefreshEmbargoBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push(col);
+      });
+    }
+    this.setState({ bundles, current_user });
+  }
+  handleFetchBundles(result) {
+    const bundles = result.repository || [];
+    // eslint-disable-next-line camelcase
+    const { current_user } = result;
+    this.setState({
+      guestPage: 'embargo', bundles, current_user, elements: [], element: null
+    });
+  }
+
+  handleGetEmbargoElements(results) {
+    const { elements, current_user, embargo_id, embargo } = results;
+    this.setState({
+      selectEmbargoId: embargo_id,
+      selectEmbargo: embargo,
+      elements,
+      element: null,
+      currentUser: current_user
+    });
+  }
+}
+
+export default alt.createStore(EmbargoStore, 'EmbargoStore');
diff --git a/app/packs/src/components/stores/InboxStore.js b/app/packs/src/components/stores/InboxStore.js
new file mode 100644
index 000000000..57fdae3cb
--- /dev/null
+++ b/app/packs/src/components/stores/InboxStore.js
@@ -0,0 +1,208 @@
+import _ from 'lodash';
+import alt from '../alt';
+import InboxActions from '../actions/InboxActions';
+import ElementActions from '../actions/ElementActions';
+import DetailActions from '../actions/DetailActions';
+import ElementStore from './ElementStore';
+
+class InboxStore {
+  constructor() {
+    this.state = {
+      inbox: {},
+      cache: [],
+      deleteEl: null,
+      numberOfAttachments: 0,
+      inboxModalVisible: false
+    };
+
+    this.bindListeners({
+      handleToggleInboxModal: InboxActions.toggleInboxModal,
+      handleFetchInbox: InboxActions.fetchInbox,
+      handleFetchInboxCount: InboxActions.fetchInboxCount,
+      handleRemoveAttachmentFromList: InboxActions.removeAttachmentFromList,
+      handleRemoveUnlinkedAttachmentFromList: InboxActions.removeUnlinkedAttachmentFromList,
+      handleRemoveDatasetFromList: InboxActions.removeDatasetFromList,
+      handleDeleteAttachment: InboxActions.deleteAttachment,
+      handleDeleteContainer: InboxActions.deleteContainer,
+      handleBackToInbox: InboxActions.backToInbox,
+      handleDeleteContainerLink: InboxActions.deleteContainerLink,
+
+      handleUpdateCreateElementDict: [
+        ElementActions.createSample,
+        ElementActions.updateSample,
+        ElementActions.createReaction,
+      ],
+      handleUpdateCreateElement: [
+        ElementActions.updateReaction,
+        ElementActions.createWellplate,
+        ElementActions.updateWellplate,
+        ElementActions.createScreen,
+        ElementActions.updateScreen,
+      ],
+      handleClose: DetailActions.close,
+      handleConfirmDelete: DetailActions.confirmDelete,
+      handleDeleteElement: ElementActions.deleteElementsByUIState
+    });
+  }
+
+  handleToggleInboxModal() {
+    const { inboxModalVisible } = this.state;
+    this.setState({ inboxModalVisible: !inboxModalVisible });
+    this.emitChange();
+  }
+
+  handleFetchInbox(result) {
+    this.state.inbox = result;
+    this.sync();
+    this.countAttachments();
+  }
+
+  handleFetchInboxCount(result) {
+    this.state.numberOfAttachments = result.inbox_count;
+  }
+
+  handleRemoveAttachmentFromList(attachment) {
+    const { inbox } = this.state;
+
+    inbox.children.forEach((deviceBox) => {
+      deviceBox.children.forEach((dataset) => {
+        const index = dataset.attachments.indexOf(attachment);
+        if (index !== -1) {
+          dataset.attachments.splice(index, 1);
+          this.state.cache.push(attachment);
+        }
+      });
+    });
+    this.setState(inbox);
+    this.countAttachments();
+  }
+
+  handleRemoveUnlinkedAttachmentFromList(attachment) {
+    const { inbox } = this.state;
+
+    const index = inbox.unlinked_attachments.indexOf(attachment);
+    if (index !== -1) {
+      inbox.unlinked_attachments.splice(index, 1);
+      this.state.cache.push(attachment);
+    }
+
+    this.setState(inbox);
+    this.countAttachments();
+  }
+
+  handleRemoveDatasetFromList(dataset) {
+    let inbox = this.state.inbox;
+
+    inbox.children.forEach(device_box => {
+      var index = device_box.children.indexOf(dataset)
+      if(index != -1){
+        device_box.children[index].attachments.forEach(attachment => {
+          this.state.cache.push(attachment)
+        })
+        device_box.children[index].attachments = []
+      }
+    })
+
+    this.setState(inbox)
+    this.countAttachments();
+  }
+
+  handleDeleteAttachment(result) {
+    InboxActions.fetchInbox();
+  }
+
+  handleDeleteContainerLink(result) {
+    InboxActions.fetchInbox();
+  }
+
+  handleDeleteContainer(result) {
+    InboxActions.fetchInbox();
+  }
+
+  handleBackToInbox(attachment) {
+    var attachments = this.state.cache.filter(function(item) {
+      if (item.id == attachment.id){
+        return item
+      }
+    })
+
+    if (attachments.length == 1) {
+      var index = this.state.cache.indexOf(attachments[0])
+      this.state.cache.splice(index, 1)
+      InboxActions.fetchInbox()
+    }else{
+      InboxActions.deleteContainerLink(attachment)
+    }
+  }
+
+  getAttachments(containers, all_attachments) {
+    if (containers) {
+      containers.forEach(container => {
+        all_attachments.push.apply(all_attachments, container.attachments)
+        this.getAttachments(container.children, all_attachments)
+      })
+    }
+    return all_attachments
+  }
+
+  updateCache(attachments) {
+    this.state.cache = _.differenceBy(this.state.cache, attachments, 'id')
+  }
+
+  handleUpdateCreateElementDict({ element, closeView }) {
+    this.handleUpdateCreateElement(element);
+  }
+
+  handleUpdateCreateElement(element) {
+    if (element && element.isEdited && element.container) {
+      const all_attachments = this.getAttachments(element.container.children, [])
+      this.updateCache(all_attachments);
+      InboxActions.fetchInbox();
+    }
+  }
+
+  handleClose({deleteEl, force}) {
+    this.state.deleteEl = deleteEl
+  }
+
+  handleConfirmDelete(confirm) {
+    if(confirm){
+      this.handleUpdateCreateElement(this.state.deleteEl)
+    }
+    this.state.deleteEl = null
+  }
+
+  handleDeleteElement(result) {
+    // if (!result || !result.selecteds) { return null; }
+    this.waitFor(ElementStore.dispatchToken);
+    const { selecteds } = ElementStore.getState();
+    selecteds.forEach(element => this.handleUpdateCreateElement(element));
+  }
+
+  sync() {
+    let inbox = this.state.inbox
+
+    inbox.children.forEach(device_box => {
+      device_box.children.forEach(dataset => {
+        dataset.attachments = _.differenceBy(dataset.attachments, this.state.cache, 'id')
+      })
+    })
+    inbox.unlinked_attachments = _.differenceBy(inbox.unlinked_attachments, this.state.cache, 'id')
+
+    this.setState(inbox)
+  }
+
+  countAttachments() {
+    let count = 0;
+    const inbox = this.state.inbox
+    inbox.children.forEach(device_box => {
+      device_box.children.forEach(dataset => {
+        count += dataset.attachments.length
+      })
+    });
+    count += inbox.unlinked_attachments.length
+    this.state.numberOfAttachments = count;
+  }
+}
+
+export default alt.createStore(InboxStore, 'InboxStore');
diff --git a/app/packs/src/components/stores/KeyboardStore.js b/app/packs/src/components/stores/KeyboardStore.js
new file mode 100644
index 000000000..3c4107768
--- /dev/null
+++ b/app/packs/src/components/stores/KeyboardStore.js
@@ -0,0 +1,26 @@
+import alt from 'src/stores/alt/alt';
+import KeyboardActions from 'src/stores/alt/actions/KeyboardActions';
+
+class KeyboardStore {
+  constructor() {
+    this.state = {
+      context: "sample",
+      documentKeyDownCode: null
+    };
+
+    this.bindListeners({
+      handleDocumentKeyDown: KeyboardActions.documentKeyDown,
+      handleContextChange: KeyboardActions.contextChange
+    })
+  }
+
+  handleDocumentKeyDown(keyCode) {
+    this.state.documentKeyDownCode = keyCode
+  }
+
+  handleContextChange(context) {
+    this.state.context = context
+  }
+}
+
+export default alt.createStore(KeyboardStore, 'KeyboardStore');
diff --git a/app/packs/src/components/stores/LoadingStore.js b/app/packs/src/components/stores/LoadingStore.js
new file mode 100644
index 000000000..df82da44f
--- /dev/null
+++ b/app/packs/src/components/stores/LoadingStore.js
@@ -0,0 +1,112 @@
+import alt from '../alt';
+import LoadingActions from '../actions/LoadingActions';
+import ReportActions from '../actions/ReportActions';
+import ElementActions from '../actions/ElementActions';
+import InboxActions from '../actions/InboxActions';
+import PredictionActions from '../actions/PredictionActions';
+import RepositoryActions from '../actions/RepositoryActions';
+import PublicActions from '../actions/PublicActions';
+import ReviewActions from '../actions/ReviewActions';
+
+class LoadingStore {
+  constructor() {
+    this.loading = false;
+    this.state = { filePool: [] };
+
+    this.bindListeners({
+      handleStart: LoadingActions.start,
+      handleStop:
+        [
+          LoadingActions.stop,
+          ReportActions.clone,
+          ReportActions.updateCheckedTags,
+          ReportActions.loadRreview,
+          ElementActions.createGenericEl,
+          ElementActions.updateGenericEl,
+          ElementActions.createSampleForReaction,
+          ElementActions.updateSampleForReaction,
+          ElementActions.updateSampleForWellplate,
+          ElementActions.createSample,
+          ElementActions.updateSample,
+          ElementActions.createReaction,
+          ElementActions.updateReaction,
+          ElementActions.createResearchPlan,
+          ElementActions.updateResearchPlan,
+          ElementActions.createWellplate,
+          ElementActions.updateWellplate,
+          InboxActions.fetchInbox,
+          PredictionActions.infer,
+          RepositoryActions.reviewPublish,
+          ReviewActions.updateComment,
+          ReviewActions.reviewPublish,
+          ReviewActions.fetchSample,
+          ReviewActions.displayReviewReaction,
+          PublicActions.getSearchReactions,
+          PublicActions.getSearchMolecules,
+          PublicActions.getReactions,
+          PublicActions.getMolecules,
+        ],
+      handleStartLoadingWithProgress: LoadingActions.startLoadingWithProgress,
+      handleStopLoadingWithProgress: LoadingActions.stopLoadingWithProgress,
+      handleUpdateLoadingProgress: LoadingActions.updateLoadingProgress,
+    });
+  }
+
+  handleStart() {
+    this.setState({ loading: true });
+  }
+
+  handleStop() {
+    this.setState({ loading: false });
+  }
+
+  handleStartLoadingWithProgress(filename) {
+    let { filePool } = this.state;
+    if (!filePool) {
+      filePool = [{ filename: filename, progress: 0 }];
+    }
+    else {
+      const filter = filePool.filter(value => value.filename === filename);
+      if (filter.length === 0) {
+        const value = { filename: filename, progress: 0 };
+        filePool.push(value);
+      }
+    }
+
+    if (filePool.length > 0) {
+      this.setState({ loadingWithProgress: true, filePool: filePool });
+    }
+  }
+
+  handleStopLoadingWithProgress(filename) {
+    const { filePool } = this.state;
+    if (filePool) {
+      filePool.forEach((file, index, object) => {
+        if (file.filename === filename) {
+          object.splice(index, 1);
+        }
+      });
+
+      if (filePool.length === 0) {
+        this.setState({ loadingWithProgress: false, filePool: [] });
+      }
+      else {
+        this.setState({ filePool: filePool });
+      }
+    }
+  }
+
+  handleUpdateLoadingProgress(value) {
+    const { filePool } = this.state;
+    if (filePool) {
+      filePool.forEach(file => {
+        if (file.filename === value.filename) {
+          file.progress = value.progress;
+        }
+      });
+      this.setState({ filePool: filePool });
+    }
+  }
+}
+
+export default alt.createStore(LoadingStore, 'LoadingStore');
diff --git a/app/packs/src/components/stores/NmrSimStore.js b/app/packs/src/components/stores/NmrSimStore.js
new file mode 100644
index 000000000..fb3131059
--- /dev/null
+++ b/app/packs/src/components/stores/NmrSimStore.js
@@ -0,0 +1,63 @@
+import alt from '../alt';
+import NmrSimActions from '../actions/NmrSimActions';
+
+import Jcampconverter from 'jcampconverter';
+
+class NmrSimStore {
+  constructor() {
+    this.state = {
+      currentNmr: { data13C: [], data1H: [] },
+      currentType: '13C',
+      synced: false,
+    };
+
+    this.bindListeners({
+      handleUpdateNmrdb: NmrSimActions.updateNmrdb,
+      handleResetNMR: NmrSimActions.resetNMR,
+    });
+  }
+
+  handleUpdateNmrdb({ type, spectrum }) {
+    this.state.currentType = type;
+    this.state.synced = true;
+    if (spectrum) {
+      if (spectrum.response_1h) {
+        const data1h = this.decodeNmrdb1H(JSON.parse(spectrum.response_1h));
+        this.assignNmrdb(data1h, '1H');
+      }
+      if (spectrum.response_13c) {
+        const data13C = this.decodeNmrdb13C(JSON.parse(spectrum.response_13c));
+        this.assignNmrdb(data13C, '13C');
+      }
+    }
+  }
+
+  decodeNmrdb13C(response) {
+    const jcamp = response.result.spectrum13C.jcamp.value;
+    return Jcampconverter.convert(jcamp, { xy: true }).spectra[0].data[0];
+  }
+
+  decodeNmrdb1H(response) {
+    const jcamp = response.jcamp.value;
+    return Jcampconverter.convert(jcamp, { xy: true }).spectra[0].data[0];
+  }
+
+  assignNmrdb(spectrum, type) {
+    const data = [];
+    for (let i = 0; i < spectrum.y.length; i++) {
+      data.push({ x: spectrum.x[i], y: spectrum.y[i] });
+    }
+    if (type === '13C') {
+      this.state.currentNmr.data13C = data;
+    } else {
+      this.state.currentNmr.data1H = data;
+    }
+  }
+
+  handleResetNMR() {
+    this.state.currentNmr = { data13C: [], data1H: [] };
+    this.state.synced = false;
+  }
+}
+
+export default alt.createStore(NmrSimStore, 'NmrSimStore');
diff --git a/app/packs/src/components/stores/NotificationStore.js b/app/packs/src/components/stores/NotificationStore.js
new file mode 100644
index 000000000..785d7c1b6
--- /dev/null
+++ b/app/packs/src/components/stores/NotificationStore.js
@@ -0,0 +1,103 @@
+import alt from '../alt';
+import NotificationActions from '../actions/NotificationActions';
+import ElementActions from '../actions/ElementActions';
+
+
+class NotificationStore {
+  constructor() {
+    this.state = {
+      notificationSystem: null
+    }
+
+    this.bindListeners({
+      handleAdd: NotificationActions.add,
+      handleRemove: NotificationActions.remove,
+      handleRemoveByUid: NotificationActions.removeByUid,
+      handleNotificationImportSamplesFromFile: ElementActions.importSamplesFromFile,
+      handleUploadErrorNotify: NotificationActions.uploadErrorNotify,
+      handleSetComponentReference: NotificationActions.setComponentReference
+    })
+  }
+
+  handleAdd(notification) {
+    this.state.notificationSystem.addNotification(notification)
+  }
+
+  handleRemove(notification) {
+    this.state.notificationSystem.removeNotification(notification)
+  }
+
+  handleRemoveByUid(uid) {
+    this.state.notificationSystem.removeNotification(uid)
+  }
+
+  handleClearNotifications() {
+    this.state.notificationSystem.clearNotifications();
+  }
+
+  handleNotificationImportSamplesFromFile(result) {
+    let num = result.data.length;
+    let status = result.status;
+    let sdf = result.sdf
+    let message = result.message;
+    this.handleRemoveByUid("import_samples_upload");
+    let notification = {
+      title: "Oops!",
+      message: message + "\n Please check the file and try again.",
+      level: "error",
+      position: "bl",
+      autoDismiss: 0
+    }
+    if (sdf) {
+      if (status == "ok") {
+        notification = {
+          title: "Success",
+          message: message,
+          level: "success",
+          position: "bl",
+          autoDismiss: 10
+        }
+      } else if (status == "failed"){
+      } else if (status == "error"){
+      } else if (status == "invalid"){
+        notification.message = message;
+      }
+    } else {
+      if (status == "ok") {
+        notification = {
+          title: "Success",
+          message: "The "+num+" samples have been imported successfully",
+          level: "success",
+          position: "bl",
+          autoDismiss: 10
+        }
+      } else if (status == "failed"){
+      } else if (status == "error"){
+      } else if (status == "invalid"){
+        notification.message = message;
+      }
+    }
+
+    this.handleAdd(notification);
+  }
+
+  handleSetComponentReference(ref) {
+    this.state.notificationSystem = ref;
+  }
+
+  handleUploadErrorNotify(message) {
+    // this.handleRemoveByUid('import_samples_upload');
+    this.handleClearNotifications();
+
+    const notification = {
+      title: 'Error',
+      message,
+      level: 'error',
+      uid: 'import_reactions_upload',
+      position: 'bl'
+    };
+    this.handleAdd(notification);
+  }
+}
+
+export default alt.createStore(NotificationStore, 'NotificationStore');
diff --git a/app/packs/src/components/stores/PermissionStore.js b/app/packs/src/components/stores/PermissionStore.js
new file mode 100644
index 000000000..58d20dd84
--- /dev/null
+++ b/app/packs/src/components/stores/PermissionStore.js
@@ -0,0 +1,27 @@
+import alt from 'src/stores/alt/alt';
+import PermissionActions from 'src/stores/alt/actions/PermissionActions';
+
+class PermissionStore {
+  constructor() {
+    this.state = {
+      is_top_secret: false,
+      sharing_allowed: false,
+      deletion_allowed: false,
+      remove_allowed: false,
+    };
+
+    this.bindListeners({
+      handleFetchPermissionStatus: PermissionActions.fetchPermissionStatus
+    })
+  }
+
+
+  handleFetchPermissionStatus(result) {
+    if (result.is_top_secret != null) {this.state.is_top_secret = result.is_top_secret}
+    if (result.sharing_allowed !=null) {this.state.sharing_allowed = result.sharing_allowed}
+    if (result.deletion_allowed !=null) {this.state.deletion_allowed = result.deletion_allowed}
+    if (result.remove_allowed !=null) {this.state.remove_allowed = result.remove_allowed}
+  }
+}
+
+export default alt.createStore(PermissionStore, 'PermissionStore');
diff --git a/app/packs/src/components/stores/PredictionStore.js b/app/packs/src/components/stores/PredictionStore.js
new file mode 100644
index 000000000..2ac052838
--- /dev/null
+++ b/app/packs/src/components/stores/PredictionStore.js
@@ -0,0 +1,84 @@
+import { difference, uniq } from 'lodash';
+
+import alt from '../alt';
+import PredictionActions from '../actions/PredictionActions';
+
+class PredictionStore {
+  constructor() {
+    this.activeKey = 0;
+    this.template = 'predictProducts';
+    this.inputEls = [];
+    this.defaultEls = [];
+    this.outputEls = [];
+
+    this.bindListeners({
+      handleInfer: PredictionActions.infer,
+      handleUpdateActiveKey: PredictionActions.updateActiveKey,
+      handleUpdateTemplate: PredictionActions.updateTemplate,
+      handleUpdateUI: PredictionActions.updateUI,
+      handleRemove: PredictionActions.remove,
+      handleReset: PredictionActions.reset,
+    });
+  }
+
+  handleInfer(results) {
+    if (results.error) {
+      this.setState({ outputEls: [] });
+    }
+
+    const outputEls = results.products || results.reactants || [];
+    this.setState({ outputEls });
+  }
+
+  handleUpdateActiveKey(activeKey) {
+    this.setState({ activeKey });
+  }
+
+  handleUpdateTemplate(template) {
+    this.setState({
+      activeKey: 0,
+      template,
+      inputEls: [],
+      defaultEls: [],
+      outputEls: [],
+    });
+  }
+
+  handleUpdateUI(result) {
+    if (!result) return null;
+    const { samples } = result;
+    if (!samples) return null;
+    const defaultSmis = this.defaultEls.map(x => x.molecule.cano_smiles);
+    const rspSmis = samples.map(x => x.molecule.cano_smiles);
+    let uniqLoadSmis = difference(rspSmis, defaultSmis);
+    uniqLoadSmis = uniq(uniqLoadSmis);
+
+    let inputEls = samples.filter((x, idx) => ( // avoid 2 samples with the same smiles
+      rspSmis.indexOf(x.molecule.cano_smiles) === idx
+    ));
+    const maxNumEls = this.template === 'predictProducts' ? 10 : 1;
+    inputEls = inputEls.map(x => ( // avoid including defaultSmis
+      uniqLoadSmis.indexOf(x.molecule.cano_smiles) >= 0 ? x : null
+    )).filter(r => r != null).filter((val, idx) => idx < maxNumEls);
+
+    this.setState({ inputEls });
+    return null;
+  }
+
+  handleRemove(el) {
+    const inputEls = this.inputEls.filter(x => x.id !== el.id);
+    this.setState({ inputEls });
+  }
+
+  handleReset() {
+    this.setState({
+      activeKey: 0,
+      template: 'predictProducts',
+      inputEls: [],
+      defaultEls: [],
+      outputEls: [],
+    });
+  }
+}
+
+export default alt.createStore(PredictionStore, 'PredictionStore');
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
new file mode 100644
index 000000000..34cbe97a4
--- /dev/null
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -0,0 +1,283 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import PublicActions from '../actions/PublicActions';
+import UIActions from '../actions/UIActions';
+import RepoNavListTypes from '../../libHome/RepoNavListTypes';
+
+class PublicStore {
+  constructor() {
+    this.molecules = [];
+    this.reactions = [];
+    this.page = 1;
+    this.pages = 1;
+    this.perPage = 10;
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.publishedStatics = [];
+    this.lastPublished;
+    this.lastPublishedSample;
+    this.guestPage = "";
+    this.currentElement = null;
+    this.queryId = -1;
+    this.news = {};
+    this.articles = [];
+    this.howto = {};
+    this.howtos = [];
+    // this.bundles = [];
+    this.showReviewModal = false;
+    this.reviewData = {};
+
+    this.bindListeners({
+      handleGetMolecules: PublicActions.getMolecules,
+      handleGetReactions: PublicActions.getReactions,
+      handleSearchMolecules: PublicActions.getSearchMolecules,
+      handleSearchReactions: PublicActions.getSearchReactions,
+      handlePublishedStatics: PublicActions.publishedStatics,
+      handleLastPublished: PublicActions.lastPublished,
+      handleLastPublishedSample: PublicActions.lastPublishedSample,
+      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
+      handleDisplayDataset: PublicActions.displayDataset,
+      handleDisplayMolecule: PublicActions.displayMolecule,
+      handleDisplayReaction: PublicActions.displayReaction,
+      handleReceiveSearchresult: PublicActions.fetchBasedOnSearchSelectionAndCollection,
+      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
+      handleClose: PublicActions.close,
+      handleArticles: PublicActions.articles,
+      handleEditArticle: PublicActions.editArticle,
+      handleDisplayArticle: PublicActions.displayArticle,
+      handleHowTos: PublicActions.howtos,
+      handleEditHowTo: PublicActions.editHowTo,
+      handleDisplayHowTo: PublicActions.displayHowTo,
+      handleGetElements: PublicActions.getElements,
+      handleRefreshPubElements: PublicActions.refreshPubElements,
+      handleDisplayCollection: PublicActions.displayCollection,
+
+    });
+  }
+
+  handleRefreshPubElements(type) {
+    const pageType = type.split('=');
+    PublicActions[`get${pageType[0]}`]({ page: this.page, perPage: this.perPage, listType: pageType[1] });
+  }
+
+  handleClose({ deleteEl }) {
+    this.setState({
+      currentElement: null
+    });
+    if (this.guestPage === 'embargo') {
+      Aviator.navigate('/embargo', { silent: true });
+    } else if (this.guestPage === 'review') {
+      Aviator.navigate('/review', { silent: true });
+    } else {
+      Aviator.navigate('/publications', { silent: true });
+    }
+  }
+
+  handleClearSearchSelection() {
+    PublicActions.getMolecules.defer();
+  }
+
+  handleGetMolecules(results) {
+    const {
+      molecules, page, pages, perPage, listType
+    } = results;
+    this.setState({
+      molecules, page, pages, perPage, listType, guestPage: 'publications'
+    });
+  }
+
+  handleGetReactions(results) {
+    const {
+      reactions, page, pages, perPage
+    } = results;
+    const listType = (reactions && reactions[0] && reactions[0].taggable_data.scheme_only ? 'scheme' : 'reaction') || 'reaction';
+    this.setState({
+      reactions, page, pages, perPage, listType, guestPage: 'publications'
+    });
+  }
+
+  handleSearchMolecules(results) {
+    const {
+      molecules, page, perPage, totalElements, listType
+    } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      molecules, page, pages, perPage, listType
+    });
+  }
+
+  handleSearchReactions(results) {
+    const {
+      reactions, page, perPage, totalElements, listType
+    } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      reactions, page, pages, perPage, listType
+    });
+  }
+
+  handlePublishedStatics(publishedStatics) {
+    if (publishedStatics) {
+      this.setState({ publishedStatics });
+    }
+  }
+
+  handleLastPublished(lastPublished) {
+    if (lastPublished) {
+      this.setState({ lastPublished });
+    }
+  }
+
+  handleLastPublishedSample(lastPublishedSample) {
+    if (lastPublishedSample) {
+      this.setState({ lastPublishedSample });
+    }
+  }
+
+  handleOpenRepositoryPage(page) {
+    const pageType = page.split('=');
+    this.setState({
+      guestPage: pageType[0], currentElement: null, listType: pageType[1], elementType: null
+    });
+  }
+
+  handleDisplayDataset(result) {
+    this.setState({
+      guestPage: 'dataset',
+      elementType: 'dataset',
+      queryId: result.id,
+      currentElement: result.dataset
+    });
+    Aviator.navigate(`/publications/datasets/${result.id}`, { silent: true });
+  }
+
+  handleDisplayMolecule(moleculeList) {
+    let cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
+
+    if (this.molecules.length > 0) {
+      cb = () => {};
+      this.setState({ molecules: this.molecules });
+    }
+
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'molecule',
+      queryId: moleculeList.id,
+      currentElement: moleculeList.moleculeData,
+      listType: moleculeList.listType
+    }, cb());
+    const suf = (moleculeList.anchor && moleculeList.anchor !== 'undefined') ? `#${moleculeList.anchor}` : '';
+    Aviator.navigate(`/publications/molecules/${moleculeList.id}${suf}`, { silent: true });
+  }
+
+  handleDisplayReaction(reactionList) {
+    const listType = reactionList.reactionData.publication.taggable_data.scheme_only ?
+      RepoNavListTypes.SCHEME : RepoNavListTypes.REACTION;
+    let cb = () => PublicActions.getReactions();
+
+    if (this.reactions.length > 0) {
+      cb = () => {};
+      this.setState({ reactions: this.reactions });
+    }
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'reaction',
+      queryId: reactionList.id,
+      currentElement: reactionList.reactionData,
+      listType
+    }, cb());
+    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
+  }
+
+  handleReceiveSearchresult(result) {
+    this.setState({ ...result.publicMolecules });
+  }
+
+  handleArticles(result) {
+    this.setState({
+      guestPage: 'newsroom',
+      articles: result.data
+    });
+  }
+
+  handleEditArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    news.article = news.article ? news.article : [];
+    this.setState({
+      guestPage: 'newseditor',
+      news,
+    });
+  }
+
+  handleDisplayArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    this.setState({
+      guestPage: 'newsreader',
+      news,
+    });
+  }
+
+  handleHowTos(result) {
+    this.setState({
+      guestPage: 'howto',
+      howtos: result.data
+    });
+  }
+
+  handleEditHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    howto.article = howto.article ? howto.article : [];
+    this.setState({
+      guestPage: 'howtoeditor',
+      howto,
+    });
+  }
+
+  handleDisplayHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    this.setState({
+      guestPage: 'howtoreader',
+      howto,
+    });
+  }
+
+
+  handleDisplayCollection(collectionList) {
+    this.setState({
+      guestPage: 'collection',
+      elementType: 'collection',
+      queryId: collectionList.id,
+      selectEmbargo: collectionList.colData && collectionList.colData.col
+    });
+    Aviator.navigate(`/publications/collections/${collectionList.id}`, { silent: true });
+  }
+
+
+  handleGetElements(results) {
+    const {
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    } = results;
+    this.setState({
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    });
+  }
+
+
+  handleUnitsSystem(result) {
+    this.setState({ unitsSystem: result });
+  }
+}
+
+export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/packs/src/components/stores/QcStore.js b/app/packs/src/components/stores/QcStore.js
new file mode 100644
index 000000000..82de276c0
--- /dev/null
+++ b/app/packs/src/components/stores/QcStore.js
@@ -0,0 +1,33 @@
+import alt from 'src/stores/alt/alt';
+import QcActions from 'src/stores/alt/actions/QcActions';
+
+class QcStore {
+  constructor() {
+    this.infers = [];
+    this.loading = false;
+
+    this.bindListeners({
+      handleLoadInfers: QcActions.loadInfers,
+      handleSetLoading: QcActions.setLoading,
+    });
+  }
+
+  handleSetLoading() {
+    this.setState({ loading: true });
+  }
+
+  handleLoadInfers({ result, sId }) {
+    const infer = { sId, result };
+    const prevInfers = this.infers
+      .map(i => ((i.sId !== sId) ? i : null))
+      .filter(r => r != null);
+    const nextInfers = [...prevInfers, infer];
+
+    this.setState({
+      loading: false,
+      infers: nextInfers,
+    });
+  }
+}
+
+export default alt.createStore(QcStore, 'QcStore');
diff --git a/app/packs/src/components/stores/RStore.js b/app/packs/src/components/stores/RStore.js
new file mode 100644
index 000000000..976eedd00
--- /dev/null
+++ b/app/packs/src/components/stores/RStore.js
@@ -0,0 +1,34 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import ReviewActions from '../actions/ReviewActions';
+import EmbargoActions from '../actions/EmbargoActions';
+
+class RStore {
+  constructor() {
+    this.bindListeners({
+      navigateReview: [ReviewActions.displayReviewSample, ReviewActions.displayReviewReaction],
+      navigateEmbargoReview: [EmbargoActions.displayReviewEmbargo],
+    });
+  }
+
+  navigate(page, result) {
+    const elementType = (result.element.sample ? 'sample' : 'reaction');
+    const subPage = page === 'embargo' ? elementType : `review_${elementType}`;
+    if (result.element && result.element?.review_info?.review_level === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({ guestPage: page });
+      Aviator.navigate(`/${page}/${subPage}/${result.id}`, { silent: true });
+    }
+  }
+
+  navigateEmbargoReview(result) {
+    this.navigate('embargo', result);
+  }
+
+  navigateReview(result) {
+    this.navigate('review', result);
+  }
+}
+
+export default alt.createStore(RStore, 'RStore');
diff --git a/app/packs/src/components/stores/ReportStore.js b/app/packs/src/components/stores/ReportStore.js
new file mode 100644
index 000000000..e09c64496
--- /dev/null
+++ b/app/packs/src/components/stores/ReportStore.js
@@ -0,0 +1,733 @@
+import moment from 'moment';
+import _ from 'lodash';
+import alt from 'src/stores/alt/alt';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import Utils from 'src/utilities/Functions';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import UserActions from 'src/stores/alt/actions/UserActions';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import { reOrderArr } from 'src/utilities/DndControl';
+import { UpdateSelectedObjs, OrderPreviewObjs } from 'src/utilities/ReportHelper';
+
+class ReportStore {
+  constructor() {
+    this.splSettings = [
+      { checked: true, text: 'diagram' },
+      { checked: true, text: 'collection' },
+      { checked: true, text: 'analyses' },
+      { checked: true, text: 'reaction description' },
+      { checked: true, text: 'literature' },
+    ];
+    this.rxnSettings = [
+      { checked: true, text: 'diagram' },
+      { checked: true, text: 'material' },
+      { checked: true, text: 'description' },
+      { checked: true, text: 'purification' },
+      { checked: true, text: 'dangerous products' },
+      { checked: true, text: 'tlc' },
+      { checked: true, text: 'observation' },
+      { checked: true, text: 'analysis' },
+      { checked: true, text: 'literature' },
+      { checked: true, text: 'variations' },
+    ];
+    this.siRxnSettings = [
+      { checked: true, text: 'Name' },
+      { checked: true, text: 'CAS' },
+      { checked: true, text: 'Formula' },
+      { checked: true, text: 'Smiles' },
+      { checked: true, text: 'InChI' },
+      { checked: true, text: 'Molecular Mass' },
+      { checked: true, text: 'Exact Mass' },
+      { checked: true, text: 'EA' },
+    ];
+    this.configs = [
+      { checked: true, text: 'Page Break' },
+      { checked: true, text: 'Show all chemicals in schemes (unchecked to show products only)' },
+    ];
+    this.checkedAllSplSettings = true;
+    this.checkedAllRxnSettings = true;
+    this.checkedAllSiRxnSettings = true;
+    this.checkedAllConfigs = true;
+    this.processingReport = false;
+    this.defaultObjTags = { sampleIds: [], reactionIds: [] };
+    this.selectedObjTags = { sampleIds: [], reactionIds: [] };
+    this.selectedObjs = [];
+    this.previewObjs = [];
+    this.selMolSerials = [];
+    this.imgFormat = 'png';
+    this.archives = [];
+    this.fileDescription = '';
+    this.activeKey = 0;
+    this.processings = [];
+    this.template = {};
+    this.prdAtts = [];
+    this.attThumbNails = [];
+    this.fileName = '';
+    this.templateOpts = [];
+    this.dois = [];
+
+    this.bindListeners({
+      handleUpdateSplSettings: ReportActions.updateSplSettings,
+      handleToggleSplSettingsCheckAll: ReportActions.toggleSplSettingsCheckAll,
+      handleUpdateRxnSettings: ReportActions.updateRxnSettings,
+      handleToggleRxnSettingsCheckAll: ReportActions.toggleRxnSettingsCheckAll,
+      handleUpdateSiRxnSettings: ReportActions.updateSiRxnSettings,
+      handleToggleSiRxnSettingsCheckAll: ReportActions.toggleSiRxnSettingsCheckAll,
+      handleUpdateConfigs: ReportActions.updateConfigs,
+      handleToggleConfigsCheckAll: ReportActions.toggleConfigsCheckAll,
+      handleGenerateReport: ReportActions.generateReport,
+      handleUpdateCheckedTags: ReportActions.updateCheckedTags,
+      handleMove: ReportActions.move,
+      handleUpdateImgFormat: ReportActions.updateImgFormat,
+      handleGetArchives: ReportActions.getArchives,
+      handleUpdateFileName: ReportActions.updateFileName,
+      handleUpdateFileDescription: ReportActions.updateFileDescription,
+      handleUpdateActiveKey: ReportActions.updateActiveKey,
+      handleDownloadReport: ReportActions.downloadReport,
+      handleUpdateProcessQueue: ReportActions.updateProcessQueue,
+      handleUpdateTemplate: ReportActions.updateTemplate,
+      handleClone: ReportActions.clone,
+      handleDelete: ReportActions.delete,
+      hadnleRemove: ReportActions.remove,
+      hadnleReset: [ReportActions.reset, UserActions.fetchCurrentUser],
+      handleUpdMSVal: ReportActions.updMSVal,
+      handleUpdateThumbNails: ReportActions.updateThumbNails,
+      handleUpdateDefaultTags: ReportActions.updateDefaultTags,
+      handleLoadRreview: ReportActions.loadRreview,
+      handleFetchTemplate: ReportActions.fetchTemplates
+    });
+  }
+
+  handleUpdateImgFormat(value) {
+    this.setState({ imgFormat: value });
+  }
+
+  handleUpdateTemplate(value) {
+    const newSelectedObjs = this.orderObjsForTemplate(value);
+    // const molSerials = this.updMolSerials(newSelectedObjs, value);
+    const newPrdAtts = this.extractPrdAtts(newSelectedObjs);
+    this.setState({
+      template: value,
+      fileName: this.initFileName(value),
+      selectedObjs: newSelectedObjs,
+      prdAtts: newPrdAtts,
+    });
+  }
+
+  orderObjsForTemplate(template, oldObjs = null) {
+    const oldSelectedObjs = oldObjs || this.selectedObjs;
+    if (template !== 'standard') {
+      let frontObjs = [];
+      let rearObjs = [];
+      oldSelectedObjs.forEach((obj) => {
+        if (obj.type === 'reaction' && obj.role === 'gp') {
+          frontObjs = [...frontObjs, obj];
+        } else {
+          rearObjs = [...rearObjs, obj];
+        }
+      });
+      return [...frontObjs, ...rearObjs];
+    }
+    return oldSelectedObjs;
+  }
+
+  handleUpdateSplSettings(target) {
+    this.setState({
+      splSettings: this.splSettings.map((s) => {
+        if (s.text === target.text) {
+          return Object.assign({}, s, { checked: !target.checked });
+        }
+        return s;
+      }),
+    });
+  }
+
+  handleToggleSplSettingsCheckAll() {
+    const newCheckValue = !this.checkedAllSplSettings;
+    this.setState({
+      splSettings: this.splSettings.map(s => (
+        Object.assign({}, s, { checked: newCheckValue })
+      )),
+      checkedAllSplSettings: newCheckValue,
+    });
+  }
+
+  handleUpdateRxnSettings(target) {
+    this.setState({
+      rxnSettings: this.rxnSettings.map((s) => {
+        if (s.text === target.text) {
+          return Object.assign({}, s, { checked: !target.checked });
+        }
+        return s;
+      }),
+    });
+  }
+
+  handleToggleRxnSettingsCheckAll() {
+    const newCheckValue = !this.checkedAllRxnSettings;
+    this.setState({
+      rxnSettings: this.rxnSettings.map(s => (
+        Object.assign({}, s, { checked: newCheckValue })
+      )),
+      checkedAllRxnSettings: newCheckValue,
+    });
+  }
+
+  handleUpdateSiRxnSettings(target) {
+    this.setState({
+      siRxnSettings: this.siRxnSettings.map((s) => {
+        if (s.text === target.text) {
+          return Object.assign({}, s, { checked: !target.checked });
+        }
+        return s;
+      }),
+    });
+  }
+
+  handleToggleSiRxnSettingsCheckAll() {
+    const newCheckValue = !this.checkedAllSiRxnSettings;
+    this.setState({
+      siRxnSettings: this.siRxnSettings.map(s => (
+        Object.assign({}, s, { checked: newCheckValue })
+      )),
+      checkedAllSiRxnSettings: newCheckValue,
+    });
+  }
+
+  handleUpdateConfigs(target) {
+    this.setState({
+      configs: this.configs.map((s) => {
+        if (s.text === target.text) {
+          return Object.assign({}, s, { checked: !target.checked });
+        }
+        return s;
+      }),
+    });
+  }
+
+  handleToggleConfigsCheckAll() {
+    const newCheckValue = !this.checkedAllConfigs;
+    this.setState({
+      configs: this.configs.map(s => (
+        Object.assign({}, s, { checked: newCheckValue })
+      )),
+      checkedAllConfigs: newCheckValue,
+    });
+  }
+
+  handleGenerateReport(result) {
+    const newArchives = [result.report, ...this.archives];
+    this.setState({
+      processingReport: !this.processingReport,
+      activeKey: 5,
+      archives: newArchives,
+      processings: this.getProcessings(newArchives),
+      fileName: this.initFileName(this.template),
+    });
+    this.loadingIcon();
+  }
+
+  getProcessings(archives) {
+    let ids = [];
+    archives.forEach((a) => {
+      if (!a.downloadable) {
+        ids = [...ids, a.id];
+      }
+    });
+    return ids;
+  }
+
+  loadingIcon() {
+    setTimeout(() => this.setState({
+      processingReport: false,
+    }), 2500);
+  }
+
+  mergeMemoryFetchObjs(newObjs) {
+    const fetchSpls = newObjs.samples.filter(x => !x.in_browser_memory);
+    const fetchRxns = newObjs.reactions.filter(x => !x.in_browser_memory);
+    let memSpls = [];
+    let memRxns = [];
+    this.selectedObjs.forEach((x) => {
+      x.type === 'sample'
+        ? memSpls = [...memSpls, x]
+        : memRxns = [...memRxns, x]
+    });
+    return {
+      samples: [...fetchSpls, ...memSpls],
+      reactions: [...fetchRxns, ...memRxns],
+    };
+  }
+
+  handleUpdateCheckedTags({ newTags, newObjs }) {
+    if (!newTags && !newObjs) return null;
+    const targetObjs = this.mergeMemoryFetchObjs(newObjs);
+    const newSelectedObjs = UpdateSelectedObjs(
+      newTags,
+      targetObjs,
+      this.defaultObjTags,
+      this.selectedObjs,
+    );
+    const finalObjs = this.orderObjsForTemplate(this.template, newSelectedObjs);
+    const molSerials = this.updMolSerials(finalObjs);
+    const newPrdAtts = this.extractPrdAtts(finalObjs);
+    this.setState({
+      selectedObjTags: newTags,
+      selectedObjs: finalObjs,
+      prdAtts: newPrdAtts,
+      selMolSerials: molSerials,
+    });
+  }
+
+  isEqTypeId(a, b) {
+    return a.type === b.type && a.id === b.id;
+  }
+
+  handleMove({ sourceTag, targetTag }) {
+    const oldObjs = this.selectedObjs || [];
+    const newObjs = reOrderArr(sourceTag, targetTag, this.isEqTypeId, oldObjs);
+    const finalObjs = this.orderObjsForTemplate(this.template, newObjs);
+    // const molSerials = this.updMolSerials(finalObjs);
+    const newPrdAtts = this.extractPrdAtts(finalObjs);
+    this.setState({
+      selectedObjs: finalObjs,
+      prdAtts: newPrdAtts,
+    });
+  }
+
+  stdReportPrefix(initial) {
+    if (initial) return initial;
+    const { currentUser } = UserStore.getState();
+    if (!currentUser) return '';
+    return currentUser.initials || '';
+  }
+
+  initFileName(template, initial) {
+    let prefix = 'Supporting_Information_';
+    let datetime = moment().format('YYYY-MM-DD[H]HH[M]mm[S]ss');
+
+    switch (template.value) {
+      case 'standard':
+        prefix = this.stdReportPrefix(initial);
+        datetime = moment().format('YYYYMMDD');
+        break;
+      case 'spectrum':
+        prefix = 'Spectra_';
+        break;
+      case 'supporting_information':
+        prefix = 'Supporting_Information_';
+        break;
+      case 'supporting_information_std_rxn':
+        prefix = 'Supporting_Information_Standard_Reaction_';
+        break;
+      case 'rxn_list_xlsx':
+      case 'rxn_list_csv':
+      case 'rxn_list_html':
+        prefix = 'Reaction_List_';
+        break;
+      case 'doi_list_xlsx':
+        prefix = 'DOI_List_';
+        break;
+      default:
+        prefix = '';
+        break;
+    }
+
+    return prefix + datetime;
+  }
+
+  handleGetArchives({ archives }) {
+    this.setState({ archives });
+  }
+
+  handleUpdateFileName(value) {
+    const validValue = this.validName(value);
+    this.setState({ fileName: validValue });
+  }
+
+  validName(text) {
+    let name = text.substring(0, 40);
+    name = name.replace(/[^a-zA-Z0-9\-_]/g, '');
+    return name;
+  }
+
+  handleUpdateFileDescription(value) {
+    this.setState({ fileDescription: value });
+  }
+
+  handleUpdateActiveKey(key) {
+    this.setState({ activeKey: key });
+  }
+
+  handleDownloadReport({ id, template }) {
+    let ext = 'docx';
+    switch (template) {
+      case 'rxn_list_xlsx':
+      case 'doi_list_xlsx':
+        ext = 'xlsx';
+        break;
+      case 'rxn_list_csv':
+        ext = 'csv';
+        break;
+      case 'rxn_list_html':
+        ext = 'html';
+        break;
+      case 'standard':
+      case 'spectrum':
+      case 'supporting_information':
+      case 'supporting_information_std_rxn':
+      default:
+        ext = 'docx';
+        break;
+    }
+
+    const target = `id=${JSON.stringify(id)}&ext=${ext}`;
+    this.markReaded(id);
+    Utils.downloadFile({
+      contents: `/api/v1/download_report/file?${target}`,
+    });
+  }
+
+  markReaded(id) {
+    const newArchives = this.archives.map((archive) => {
+      const a = Object.assign({}, archive);
+      if (archive.id === id) a.unread = false;
+      return a;
+    });
+    this.setState({ archives: newArchives });
+  }
+
+  handleUpdateProcessQueue(result) {
+    const updatedArchives = result.archives;
+    const updatedIds = updatedArchives.map(a => a.id);
+    const newProcessings = this.processings.filter(x => updatedIds.indexOf(x) === -1);
+    const newArchives = this.archives.map((a) => {
+      const index = updatedIds.indexOf(a.id);
+      return index === -1 ? a : updatedArchives[index];
+    });
+    this.setState({
+      archives: newArchives,
+      processings: newProcessings,
+    });
+  }
+
+  orderObjsForArchive(objs, order) {
+    return order.map(od => objs.find(obj => this.isEqTypeId(obj, od)))
+      .filter(r => r != null);
+  }
+
+  handleClone(result) {
+    const { objs, archive, defaultObjTags } = result;
+    const { template, file_description, img_format, configs } = archive;
+    const ss = archive.sample_settings;
+    const rs = archive.reaction_settings;
+    const siRs = archive.si_reaction_settings;
+    const newObjs = UpdateSelectedObjs(defaultObjTags, objs, defaultObjTags);
+    const orderedArObjs = this.orderObjsForArchive(newObjs, archive.objects);
+    const orderedArTpObjs = this.orderObjsForTemplate(template, orderedArObjs);
+    const molSerials = archive.mol_serials ||
+      this.updMolSerials(orderedArTpObjs);
+    const newPrdAtts = this.extractPrdAtts(orderedArTpObjs);
+
+    this.setState({
+      activeKey: 0,
+      template,
+      fileDescription: file_description,
+      fileName: this.initFileName(template),
+      imgFormat: img_format,
+      checkedAllSplSettings: false,
+      checkedAllRxnSettings: false,
+      checkedAllSiRxnSettings: false,
+      checkedAllConfigs: false,
+      splSettings:
+        [
+          { text: 'diagram', checked: ss.diagram },
+          { text: 'collection', checked: ss.collection },
+          { text: 'analyses', checked: ss.analyses },
+          { text: 'reaction description', checked: ss.reaction_description },
+          { text: 'literature', checked: ss.literature },
+        ],
+      rxnSettings:
+        [
+          { text: 'diagram', checked: rs.diagram },
+          { text: 'material', checked: rs.material },
+          { text: 'description', checked: rs.description },
+          { text: 'purification', checked: rs.purification },
+          { text: 'dangerous products', checked: this.boolOrUdfTrue(rs.dangerous_products) },
+          { text: 'tlc', checked: rs.tlc },
+          { text: 'observation', checked: rs.observation },
+          { text: 'analysis', checked: rs.analysis },
+          { text: 'literature', checked: rs.literature },
+        ],
+      siRxnSettings:
+        [
+          { checked: siRs.Name, text: 'Name' },
+          { checked: siRs.CAS, text: 'CAS' },
+          { checked: siRs.Formula, text: 'Formula' },
+          { checked: siRs.Smiles, text: 'Smiles' },
+          { checked: siRs.InChI, text: 'InChI' },
+          { checked: siRs['Molecular Mass'], text: 'Molecular Mass' },
+          { checked: siRs['Exact Mass'], text: 'Exact Mass' },
+          { checked: siRs.EA, text: 'EA' },
+        ],
+      configs:
+        [
+          { text: 'Page Break', checked: configs.page_break },
+          { text: 'Show all chemicals in schemes (unchecked to show products only)', checked: configs.page_break },
+        ],
+      defaultObjTags,
+      selectedObjTags: { sampleIds: [], reactionIds: [] },
+      selectedObjs: orderedArTpObjs,
+      prdAtts: newPrdAtts,
+      selMolSerials: molSerials,
+    });
+  }
+
+  boolOrUdfTrue(inp) {
+    if (inp === undefined) {
+      return true;
+    }
+    return inp;
+  }
+
+  hadnleRemove(target) {
+    let dTags = this.defaultObjTags;
+    let sTags = this.selectedObjTags;
+    const currentObjs = this.selectedObjs;
+    if (target.type === 'sample') {
+      const tmpSDTags = dTags.sampleIds.filter(e => e !== target.id);
+      const tmpSSTags = sTags.sampleIds.filter(e => e !== target.id);
+      dTags = {
+        sampleIds: [...tmpSDTags, ...tmpSSTags],
+        reactionIds: [...dTags.reactionIds, ...sTags.reactionIds]
+      };
+    } else if (target.type === 'reaction') {
+      const tmpRDTags = dTags.reactionIds.filter(e => e !== target.id);
+      const tmpRSTags = sTags.reactionIds.filter(e => e !== target.id);
+      dTags = {
+        sampleIds: [...dTags.sampleIds, ...sTags.sampleIds],
+        reactionIds: [...tmpRDTags, ...tmpRSTags]
+      };
+    }
+    dTags = { sampleIds: Array.from(new Set(dTags.sampleIds)), reactionIds: Array.from(new Set(dTags.reactionIds)) };
+    sTags = { sampleIds: [], reactionIds: [] };
+    const newObjs = UpdateSelectedObjs(sTags, currentObjs, dTags, currentObjs);
+    const finalObjs = this.orderObjsForTemplate(this.template, newObjs);
+    // const molSerials = this.updMolSerials(finalObjs);
+    const newPrdAtts = this.extractPrdAtts(finalObjs);
+
+    this.setState({
+      defaultObjTags: dTags,
+      selectedObjTags: sTags,
+      selectedObjs: finalObjs,
+      prdAtts: newPrdAtts,
+    });
+  }
+
+  hadnleReset(user) {
+    const { initials } = user || {};
+    this.setState({
+      activeKey: 0,
+      template: 'standard',
+      fileDescription: '',
+      fileName: this.initFileName('standard', initials),
+      imgFormat: 'png',
+      checkedAllSplSettings: true,
+      checkedAllRxnSettings: true,
+      checkedAllSiRxnSettings: true,
+      checkedAllConfigs: true,
+      splSettings:
+        [
+          { text: 'diagram', checked: true },
+          { text: 'collection', checked: true },
+          { text: 'analyses', checked: true },
+          { text: 'reaction description', checked: true },
+          { text: 'literature', checked: true },
+        ],
+      rxnSettings:
+        [
+          { text: 'diagram', checked: true },
+          { text: 'material', checked: true },
+          { text: 'description', checked: true },
+          { text: 'purification', checked: true },
+          { text: 'dangerous products', checked: true },
+          { text: 'tlc', checked: true },
+          { text: 'observation', checked: true },
+          { text: 'analysis', checked: true },
+          { text: 'literature', checked: true },
+        ],
+      siRxnSettings:
+        [
+          { checked: true, text: 'Name' },
+          { checked: true, text: 'CAS' },
+          { checked: true, text: 'Formula' },
+          { checked: true, text: 'Smiles' },
+          { checked: true, text: 'InChI' },
+          { checked: true, text: 'Molecular Mass' },
+          { checked: true, text: 'Exact Mass' },
+          { checked: true, text: 'EA' },
+        ],
+      configs:
+        [
+          { text: 'Page Break', checked: true },
+          { text: 'Show all chemicals in schemes (unchecked to show products only)', checked: true },
+        ],
+      defaultObjTags: { sampleIds: [], reactionIds: [] },
+      selectedObjTags: { sampleIds: [], reactionIds: [] },
+      selectedObjs: [],
+      selMolSerials: [],
+      prdAtts: [],
+      attThumbNails: [],
+    });
+  }
+
+  handleDelete(deletedId) {
+    const newArchives = this.archives.map(a => (
+      a.id !== deletedId ? a : null
+    )).filter(r => r != null);
+
+    this.setState({ archives: newArchives });
+  }
+
+  updMolSerials(objs, template) {
+    const currentTemplate = template || this.template;
+    if (currentTemplate === 'standard') return [];
+    if (objs.length === 0) return this.selMolSerials;
+
+    return this.extractMolSerials(objs);
+  }
+
+  extractMolSerials(objs) {
+    const oldSelMolSerials = this.selMolSerials;
+    const newSelMols = this.msMolFromSelected(objs);
+
+    const newSelMolSerials = newSelMols.map((newMol) => {
+      const unchangedMolSerial = oldSelMolSerials.find(osm => (
+        osm && osm.mol.id === newMol.id
+      ));
+      return unchangedMolSerial || { mol: newMol, value: null };
+    });
+
+    if (newSelMolSerials.length === 0) return this.selMolSerials;
+
+    return newSelMolSerials;
+  }
+
+  nonGpRxns(objs) {
+    return objs.map((obj) => {
+      if (obj.type === 'reaction' && obj.role !== 'gp') {
+        return obj;
+      }
+      return null;
+    }).filter(r => r !== null);
+  }
+
+  msMolFromSelected(objs) {
+    const rxns = this.nonGpRxns(objs);
+    let msMols = [];
+
+    rxns.forEach((o) => {
+      const samples = [...o.starting_materials, ...o.reactants, ...o.products];
+      samples.forEach((s) => {
+        msMols = [...msMols, this.createMSMol(s.molecule)];
+      });
+    });
+    msMols = ArrayUtils.uniqSortById(msMols);
+    return msMols;
+  }
+
+  createMSMol(molecule) {
+    return {
+      id: molecule.id,
+      svgPath: molecule.svgPath,
+      sumFormula: molecule.sum_formular,
+      iupacName: molecule.iupac_name,
+    };
+  }
+
+  handleUpdMSVal({ moleculeId, value }) {
+    const newSelMolSerials = this.selMolSerials.map((ms) => {
+      if (ms.mol.id === moleculeId) {
+        return Object.assign({}, ms, { value });
+      }
+      return ms;
+    });
+    this.setState({ selMolSerials: newSelMolSerials });
+  }
+
+  extractPrdAtts(selectedObjs) {
+    if (selectedObjs.length > 0) {
+      const prdAtts = selectedObjs.map((obj) => {
+        if (obj.role !== 'gp') {
+          return this.extractPrdsAtts(obj);
+        }
+        return null;
+      }).filter(r => r !== null);
+      return [].concat(...prdAtts).filter(r => r.atts.length !== 0);
+    }
+    return [];
+  }
+
+  extractPrdsAtts(obj) {
+    if (obj.type === 'reaction') {
+      return obj.products.map((prd) => {
+        const prdId = prd.id;
+        const { iupac_name, sum_formular, id } = prd.molecule;
+        const atts = this.extractAtts(prd);
+        const showedName = prd.showedName();
+        return Object.assign(
+          {}, { atts, prdId, iupac_name, sum_formular, molId: id, showedName },
+        );
+      });
+    }
+    return null;
+  }
+
+  extractAtts(prd) {
+    const atts = prd.container.children[0].children.map((container) => {
+      const isReport = container.extended_metadata.report;
+      if (!isReport) return null;
+      const kind = container.extended_metadata.kind;
+      return container.children.map(analysis => (
+        analysis.attachments.map(att => (
+          Object.assign({}, att, { kind })
+        ))
+      ));
+    });
+    return _.flattenDeep(atts).filter(r => r !== null);
+  }
+
+  handleUpdateThumbNails(result) {
+    const thumbs = result.thumbnails;
+    this.setState({ attThumbNails: thumbs });
+  }
+
+  handleUpdateDefaultTags(defaultTags) {
+    this.setState({ defaultTags });
+    // TODO: update selectedObjs?
+  }
+
+  handleLoadRreview({ objs }) {
+    if (!objs) return null;
+    const { samples, reactions } = objs;
+    let previewObjs = OrderPreviewObjs(
+      this.previewObjs, this.selectedObjs, [...samples, ...reactions],
+    );
+    previewObjs = this.orderObjsForTemplate(this.template, previewObjs);
+    const molSerials = this.updMolSerials(previewObjs);
+    const newPrdAtts = this.extractPrdAtts(previewObjs);
+    this.setState({
+      previewObjs,
+      prdAtts: newPrdAtts,
+      selMolSerials: molSerials,
+    });
+    return null;
+  }
+
+  handleFetchTemplate(result) {
+    const templates = result.templates;
+    this.setState({ templateOpts: templates, template: templates[0] });
+  }
+}
+
+export default alt.createStore(ReportStore, 'ReportStore');
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
new file mode 100644
index 000000000..6ceb589b1
--- /dev/null
+++ b/app/packs/src/components/stores/ReviewStore.js
@@ -0,0 +1,158 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import ReviewActions from '../actions/ReviewActions';
+import PublicActions from '../actions/PublicActions';
+import EmbargoActions from '../actions/EmbargoActions';
+
+class ReviewStore {
+  constructor() {
+    this.showReviewModal = false;
+    this.reviewData = {};
+    this.btnAction = '';
+    //this.bundles = [];
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.currentElement = null;
+    this.review = {};
+    this.review_info = {}
+
+    this.bindListeners({
+      handleReviewModal: ReviewActions.handleReviewModal,
+      handleDisplayReviewReaction: ReviewActions.displayReviewReaction,
+      handleDisplayReviewSample: ReviewActions.displayReviewSample,
+      handelReviewPublish: ReviewActions.reviewPublish,
+      handleGetElements: ReviewActions.getElements,
+      handelUpdateComment: ReviewActions.updateComment,
+      handleUnitsSystem: ReviewActions.fetchUnitsSystem,
+      handleReviewUpdate: ReviewActions.updateReview,
+      handleFetchSample: ReviewActions.fetchSample,
+      handleClose: PublicActions.close,
+      handleRefreshEmbargoBundles: EmbargoActions.getEmbargoBundle,
+      handleEmbargoAssign: EmbargoActions.assignEmbargo,
+    });
+  }
+
+  handleClose({ deleteEl }) {
+    this.setState({
+      currentElement: null
+    });
+  }
+
+  handleEmbargoAssign(result) {
+    if (result.error) {
+      alert(result.error);
+    } else {
+      alert(result.message);
+      // refresh embargo list
+      EmbargoActions.getEmbargoBundle();
+      // refresh element list
+      ReviewActions.getElements(
+        this.selectType, this.selectState, this.searchType,
+        this.searchValue, this.page, this.perPage
+      );
+    }
+  }
+
+  handleRefreshEmbargoBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push(col);
+      });
+    }
+    this.setState({ bundles, current_user });
+  }
+
+  handleUnitsSystem(result) {
+    this.setState({ unitsSystem: result });
+  }
+
+
+  handleReviewUpdate(review) {
+    this.setState({ review: review });
+  }
+
+  handleFetchSample(data) {
+    if (data.sample && data?.review_info?.review_level === 0) {
+    } else {
+      this.setState({
+        currentElement: data || {},
+        element: data || {},
+        elementType: 'sample',
+        review_info: data?.review_info || {},
+        review: data?.publication?.review || {},
+      });
+    }
+  }
+
+
+  handleGetElements(results) {
+    const {
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
+    } = results;
+    this.setState({
+      elements, page, perPage, pages, selectType, selectState, searchType, searchValue, showReviewModal: false
+    });
+  }
+
+  handleReviewModal(result) {
+    this.setState({ showReviewModal: result.show, btnAction: result.action });
+  }
+
+  handelUpdateComment(result) {
+    this.setState({ review: result.review, showReviewModal: false });
+  }
+
+  handelReviewPublish(results) {
+    // const { history, checklist, reviewComments } = results.review;
+    this.setState({ review: results.review, showReviewModal: false, review_info: results.review_info });
+    ReviewActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
+  }
+
+  handleDisplayReviewReaction(result) {
+    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
+    if (result.element && result.element?.review_info?.review_level === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({
+        guestPage: 'review',
+        elementType: 'reaction',
+        queryId: result?.id || 0,
+        reaction: result?.element?.reaction || {},
+        currentElement: result?.element || {},
+        showReviewModal: false,
+        review: publication?.review || {},
+        review_info: result?.element?.review_info || {},
+      });
+      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
+    }
+  }
+
+  handleDisplayReviewSample(result) {
+    const publication = (result.element && result.element.publication) || {};
+
+    if (result.element && result.element?.review_info?.review_level === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({
+        guestPage: 'review',
+        elementType: 'sample',
+        queryId: result.id || 0,
+        currentElement: result?.element || {},
+        showReviewModal: false,
+        review: publication?.review || {},
+        review_info: result?.element?.review_info || {},
+      });
+      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
+    }
+  }
+
+
+};
+
+
+export default alt.createStore(ReviewStore, 'ReviewStore');
diff --git a/app/packs/src/components/stores/SpectraStore.js b/app/packs/src/components/stores/SpectraStore.js
new file mode 100644
index 000000000..f8e2e6130
--- /dev/null
+++ b/app/packs/src/components/stores/SpectraStore.js
@@ -0,0 +1,206 @@
+import base64 from 'base-64';
+import { FN } from '@complat/react-spectra-editor';
+
+import alt from '../alt';
+import SpectraActions from '../actions/SpectraActions';
+
+const defaultPred = {
+  outline: {},
+  output: { result: [] },
+};
+
+class SpectraStore {
+  constructor() {
+    this.spcMetas = [];
+    this.spcInfos = [];
+    this.spcIdx = 0;
+    this.arrSpcIdx = [];
+    this.showModal = false;
+    this.fetched = false;
+    this.writing = false;
+    this.others = [];
+    this.showModalNMRDisplayer = false;
+
+    this.bindListeners({
+      handleToggleModal: SpectraActions.ToggleModal,
+      handleLoadSpectra: SpectraActions.LoadSpectra,
+      handleSaveToFile: SpectraActions.SaveToFile,
+      handleRegenerate: SpectraActions.Regenerate,
+      handleInferSpectrum: SpectraActions.InferSpectrum,
+      handleInferRunning: SpectraActions.InferRunning,
+      handleWriteStart: SpectraActions.WriteStart,
+      handleWriteStop: SpectraActions.WriteStop,
+      handleSelectIdx: SpectraActions.SelectIdx,
+      handleAddOthers: SpectraActions.AddOthers,
+      handleRegenerateEdited: SpectraActions.RegenerateEdited,
+      handleToggleModalNMRDisplayer: SpectraActions.ToggleModalNMRDisplayer,
+      handleLoadSpectraForNMRDisplayer: SpectraActions.LoadSpectraForNMRDisplayer,
+    });
+  }
+
+  decodeSpectrum(target) { // eslint-disable-line class-methods-use-this
+    const { file, predictions, id } = target;
+    if (!file) return null;
+    let spectrum = { predictions: defaultPred, idx: id };
+    if (predictions.outline && predictions.outline.code) {
+      spectrum = Object.assign({}, spectrum, { predictions });
+    }
+
+    try {
+      const raw = base64.decode(file);
+      const jcamp = FN.ExtractJcamp(raw);
+      if (!jcamp.spectra) return null;
+      spectrum = Object.assign({}, spectrum, { jcamp });
+    } catch (err) {
+      console.log('stores/SpectraStore.js: decodeSpectrum error!');
+      return null;
+    }
+
+    return spectrum; // spectrum = { predictions: {…}, jcamp: {…} }
+  }
+
+  decodeSpectra(fetchedFiles = {}) {
+    const { files } = fetchedFiles;
+    if (!files) return [];
+    const returnFiles = files.map(f => this.decodeSpectrum(f)).filter(r => r !== null);
+    if (returnFiles === null || returnFiles === undefined) {
+      return [];
+    }
+    return returnFiles.sort(function(a, b) {
+      return b.idx - a.idx;
+    });
+  }
+
+  handleToggleModal() {
+    this.setState({
+      spcMetas: [],
+      spcInfos: [],
+      showModal: !this.showModal,
+      fetched: false,
+      others: [],
+    });
+  }
+
+  handleLoadSpectra({ fetchedFiles, spcInfos }) {
+    const spcMetas = this.decodeSpectra(fetchedFiles);
+    let newArrSpcIdx = spcMetas.map(spci => (
+      spci.idx
+    )).filter(r => r !== null);
+    if (newArrSpcIdx.length <= 1) {
+      newArrSpcIdx = [];
+    }
+    this.setState({
+      spcInfos,
+      spcMetas,
+      fetched: true,
+      spcIdx: (spcMetas[0].idx || 0),
+      others: [],
+      arrSpcIdx: newArrSpcIdx,
+    });
+  }
+
+  handleSaveToFile({ fetchedFiles, spcInfo = defaultPred }) {
+    const fetchedSpcMetas = this.decodeSpectra(fetchedFiles);
+    const fsm = fetchedSpcMetas.length > 0 ? fetchedSpcMetas[0] : null;
+    if (!fsm) return;
+    const fetchedIdx = fsm.idx;
+    const prevIdx = spcInfo.idx;
+    const fsi = Object.assign({}, spcInfo, { idx: fetchedIdx }); //  shortcut
+    const { spcInfos, spcMetas, arrSpcIdx } = this;
+    const newSpcInfos = spcInfos.map(si => (
+      si.idx === prevIdx ? fsi : si
+    )).filter(r => r !== null);
+    const newSpcMetas = spcMetas.map(sm => (
+      sm.idx === prevIdx ? fsm : sm
+    )).filter(r => r !== null);
+    const newArrSpcIdx = arrSpcIdx.map(spci => (
+      spci === prevIdx ? fetchedIdx : spci
+    )).filter(r => r !== null);
+    this.setState({
+      spcInfos: newSpcInfos,
+      spcMetas: newSpcMetas,
+      fetched: true,
+      spcIdx: fetchedIdx,
+      others: [],
+      arrSpcIdx: newArrSpcIdx,
+    });
+  }
+
+  handleRegenerate() {
+    // no further process needed.
+  }
+
+  handleRegenerateEdited() {
+    // no further process needed.
+  }
+
+  handleWriteStart(payload) {
+    this.replacePredictions(defaultPred);
+    this.setState({
+      writing: payload,
+      others: [],
+    });
+  }
+
+  handleWriteStop() {
+    this.setState({
+      writing: false,
+      others: [],
+    });
+  }
+
+  handleInferRunning() {
+    const targetPreds = Object.assign({}, defaultPred, { running: true });
+    this.replacePredictions(targetPreds);
+  }
+
+  handleInferSpectrum(props) {
+    this.handleSaveToFile(props);
+    const preds = props.fetchedFiles.predict || defaultPred;
+    const targetPreds = Object.assign({}, preds, { refreshed: true });
+    this.replacePredictions(targetPreds);
+  }
+
+  handleSelectIdx(payload) {
+    const { spcIdx, arrSpcIdx } = payload;
+    this.setState({ spcIdx, arrSpcIdx, others: [] });
+  }
+
+  replacePredictions(predictions) {
+    const { spcIdx } = this;
+    const spcMetas = this.spcMetas.map(x => (
+      x.idx === spcIdx
+        ? Object.assign({}, x, { predictions })
+        : x
+    ));
+    this.setState({ spcMetas, others: [] });
+  }
+
+  handleAddOthers(rsp) {
+    const origData = base64.decode(rsp.jcamp);
+    const jcampData = FN.ExtractJcamp(origData);
+    this.setState({ others: [jcampData] });
+  }
+
+  handleToggleModalNMRDisplayer() {
+    this.setState({
+      spcMetas: [],
+      spcInfos: [],
+      showModalNMRDisplayer: !this.showModalNMRDisplayer,
+      fetched: false,
+      others: [],
+    })
+  }
+
+  handleLoadSpectraForNMRDisplayer({ fetchedFiles, spcInfos }) {
+    this.setState({
+      spcInfos,
+      fetchedFiles,
+      fetched: true,
+    });
+  }
+
+
+}
+
+export default alt.createStore(SpectraStore, 'SpectraStore');
diff --git a/app/packs/src/components/stores/SuggestionStore.js b/app/packs/src/components/stores/SuggestionStore.js
new file mode 100644
index 000000000..bd0dec25e
--- /dev/null
+++ b/app/packs/src/components/stores/SuggestionStore.js
@@ -0,0 +1,20 @@
+import alt from 'src/stores/alt/alt';
+import SuggestionActions from 'src/stores/alt/actions/SuggestionActions';
+
+class SuggestionStore {
+  constructor() {
+    this.state = {
+      suggestions: []
+    };
+
+    this.bindListeners({
+      handleFetchSuggestions: SuggestionActions.fetchSuggestions
+    })
+  }
+
+  handleFetchSuggestions(suggestions) {
+    this.state.suggestions = suggestions;
+  }
+}
+
+export default alt.createStore(SuggestionStore, 'SuggestionStore');
diff --git a/app/packs/src/components/stores/TextTemplateStore.js b/app/packs/src/components/stores/TextTemplateStore.js
new file mode 100644
index 000000000..82f87e5b3
--- /dev/null
+++ b/app/packs/src/components/stores/TextTemplateStore.js
@@ -0,0 +1,57 @@
+import { Map, OrderedSet, fromJS } from 'immutable';
+
+import alt from '../alt';
+
+import TextTemplateActions from '../actions/TextTemplateActions';
+
+class TextTemplateStore {
+  constructor() {
+    this.state = {
+      sample: Map(),
+      reaction: Map(),
+      screen: Map(),
+      wellplate: Map(),
+      researchPlan: Map(),
+      reactionDescription: Map(),
+      predefinedTemplateNames: OrderedSet(),
+      fetchedPredefinedTemplates: Map()
+    };
+
+    this.bindListeners({
+      handleFetchTextTemplates: TextTemplateActions.fetchTextTemplates,
+      handleFetchPredefinedTemplateNames: TextTemplateActions.fetchPredefinedTemplateNames,
+      handleUpdateTextTemplates: TextTemplateActions.updateTextTemplates,
+      handleFetchTemplateByNames: TextTemplateActions.fetchPredefinedTemplateByNames,
+    });
+  }
+
+  handleFetchTextTemplates(templates) {
+    Object.keys(templates).forEach((templateType) => {
+      const templateVal = templates[templateType];
+      this.state[templateType] = fromJS(templateVal);
+    });
+  }
+
+  handleUpdateTextTemplates(templates) {
+    Object.keys(templates).forEach((templateType) => {
+      const templateVal = templates[templateType];
+      this.state[templateType] = fromJS(templateVal);
+    });
+  }
+
+  handleFetchPredefinedTemplateNames(names) {
+    const { predefinedTemplateNames } = this.state;
+    this.state.predefinedTemplateNames = predefinedTemplateNames.concat(OrderedSet(names));
+  }
+
+  handleFetchTemplateByNames(templates) {
+    let fetchedTemplates = this.state.fetchedPredefinedTemplates;
+    templates.forEach((template) => {
+      fetchedTemplates = fetchedTemplates.set(template.name, fromJS(template));
+    });
+
+    this.state.fetchedPredefinedTemplates = fetchedTemplates;
+  }
+}
+
+export default alt.createStore(TextTemplateStore, 'TextTemplateStore');
diff --git a/app/packs/src/components/stores/UIStore.js b/app/packs/src/components/stores/UIStore.js
new file mode 100644
index 000000000..ff56483de
--- /dev/null
+++ b/app/packs/src/components/stores/UIStore.js
@@ -0,0 +1,441 @@
+import { List, fromJS } from 'immutable';
+import alt from 'src/stores/alt/alt';
+
+import UIActions from 'src/stores/alt/actions/UIActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import ElementStore from 'src/stores/alt/stores/ElementStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import ArrayUtils from 'src/utilities/ArrayUtils';
+import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
+
+class UIStore {
+  constructor() {
+    this.state = {
+      sample: {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+        activeTab: 0,
+        activeAnalysis: 0,
+      },
+      reaction: {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+        activeTab: 0,
+        activeAnalysis: 0,
+      },
+      wellplate: {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+        activeTab: 0,
+      },
+      screen: {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+        activeTab: 0,
+      },
+      research_plan: {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+      },
+      showPreviews: true,
+      showAdvancedSearch: false,
+      filterCreatedAt: true,
+      fromDate: null,
+      toDate: null,
+      productOnly: false,
+      number_of_results: 15,
+      currentCollection: null,
+      currentSearchSelection: null,
+      showCollectionManagement: false,
+      showDeviceManagement: false,
+      isSync: false,
+      showModal: false,
+      modalParams: {},
+      hasChemSpectra: false,
+      hasNmriumWrapper: false,
+      matrices: {}
+    };
+
+    // console.log(this.state.klasses);
+    // // eslint-disable-next-line no-unused-expressions
+    // this.state.klasses && this.state.klasses.forEach((klass) => {
+    //   this.state[`${klass}`] = {
+    //     checkedAll: false,
+    //     checkedIds: List(),
+    //     uncheckedIds: List(),
+    //     currentId: null,
+    //     page: 1,
+    //     activeTab: 0,
+    //   };
+    // });
+
+    this.bindListeners({
+      handleInitialize: UIActions.initialize,
+      handleSelectTab: UIActions.selectTab,
+      handleSelectActiveAnalysis: UIActions.selectActiveAnalysis,
+
+      handleSelectCollection: UIActions.selectCollection,
+      handleSelectSyncCollection: UIActions.selectSyncCollection,
+      handleCheckAllElements: UIActions.checkAllElements,
+      handleToggleShowPreviews: UIActions.toggleShowPreviews,
+      handleToggleAdvancedSearch: UIActions.toggleAdvancedSearch,
+      handleCheckElement: UIActions.checkElement,
+      handleUncheckElement: UIActions.uncheckElement,
+      handleUncheckAllElements: UIActions.uncheckAllElements,
+      handleDeselectAllElementsOfType: UIActions.deselectAllElementsOfType,
+      handleSelectElement: UIActions.selectElement,
+      handleSetPagination: UIActions.setPagination,
+      handleDeselectAllElements: UIActions.deselectAllElements,
+      handleSetSearchSelection: UIActions.setSearchSelection,
+      handleSelectCollectionWithoutUpdating:
+        UIActions.selectCollectionWithoutUpdating,
+      handleClearSearchSelection: UIActions.clearSearchSelection,
+      handleShowCollectionManagement: UIActions.showCollectionManagement,
+      handleShowElements: UIActions.showElements,
+      handleToggleCollectionManagement: UIActions.toggleCollectionManagement,
+      handleUncheckWholeSelection: UIActions.uncheckWholeSelection,
+      handleChangeNumberOfResultsShown: UIActions.changeNumberOfResultsShown,
+      handleShowDeviceManagement: UIActions.showDeviceManagement,
+      handleCloseDeviceManagement: UIActions.closeDeviceManagement,
+      handleShowModalChange: UIActions.updateModalProps,
+      handleHideModal: UIActions.hideModal,
+      handleSetFilterCreatedAt: UIActions.setFilterCreatedAt,
+      handleSetFromDate: UIActions.setFromDate,
+      handleSetToDate: UIActions.setToDate,
+      handleSetProductOnly: UIActions.setProductOnly,
+      handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
+      handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
+      handleSelectPublicCollection: PublicActions.selectPublicCollection,
+      handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
+      handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
+
+    });
+  }
+
+  handleInitialize(result) {
+    this.setState(result);
+    const { klasses } = result;
+    klasses?.forEach((klass) => {
+      this.state[`${klass}`] = {
+        checkedAll: false,
+        checkedIds: List(),
+        uncheckedIds: List(),
+        currentId: null,
+        page: 1,
+        activeTab: 0,
+      };
+    });
+  }
+
+  handleRerenderGenericWorkflow(params) {
+    this.state.propGenericWorkflow = params;
+    if (params.toggle) { this.state.showGenericWorkflow = !this.state.showGenericWorkflow; }
+  }
+
+  handleShowGenericWorkflowModal(show) {
+    this.state.showGenericWorkflow = show;
+  }
+
+  handleToggleCollectionManagement() {
+    this.state.showCollectionManagement = !this.state.showCollectionManagement;
+  }
+
+  handleShowCollectionManagement() {
+    this.state.showCollectionManagement = true;
+  }
+
+  handleShowDeviceManagement() {
+    this.state.showDeviceManagement = true
+  }
+
+  handleCloseDeviceManagement() {
+    this.state.showDeviceManagement = false
+  }
+
+  handleShowElements() {
+    this.state.showCollectionManagement = false;
+  }
+
+  handleSelectTab(params = {}) {
+    let type = params.type || "sample"
+    let tabKey = params.tabKey || 0
+    this.state[type].activeTab = tabKey;
+  }
+
+  handleSelectActiveAnalysis(index) {
+    this.state.sample.activeAnalysis = index;
+  }
+
+  handleCheckAllElements(params) {
+    this.waitFor(ElementStore.dispatchToken);
+
+    let { type, range } = params;
+    let { elements } = ElementStore.getState();
+
+    if (range == 'all') {
+      if (this.state.currentSearchSelection && elements[type + "s"].ids) {
+        let ids = elements[type + "s"].ids
+        this.state[type].checkedAll = false
+        this.state[type].checkedIds = List(ids)
+        this.state[type].uncheckedIds = List()
+      } else {
+        this.state[type].checkedAll = true;
+        this.state[type].checkedIds = List();
+        this.state[type].uncheckedIds = List();
+      }
+    } else if (range == 'current') {
+      let curPageIds = elements[type + "s"].elements.reduce(
+        function (a, b) { return a.concat(b); }, []
+      ).map((e) => { return e.id });
+      this.state[type].checkedAll = false;
+      this.state[type].uncheckedIds = List();
+      let checked = this.state[type].checkedIds
+      // Remove duplicates, conserve sorting
+      if (checked.size > 0) {
+        let checkedMap = checked.reduce(function (mp, e) { mp[e] = 1; return mp }, {})
+        for (var i = 0; i < curPageIds.length; i++) {
+          if (!checkedMap[curPageIds[i]]) {
+            checked = checked.push(curPageIds[i]);
+          }
+        }
+        this.state[type].checkedIds = checked;
+      } else {
+        this.state[type].checkedIds = List(curPageIds);
+      }
+    } else {
+      this.handleUncheckAllElements(params)
+    }
+  }
+
+  handleToggleShowPreviews(show) {
+    if (show == null) show = !this.state.showPreviews;
+    this.state.showPreviews = show;
+  }
+
+  handleToggleAdvancedSearch(show) {
+    if (show == null) show = !this.state.showAdvancedSearch
+    this.state.showAdvancedSearch = show;
+  }
+
+  handleUncheckAllElements(params) {
+    let { type, range } = params;
+
+    if (this.state[type]) {
+      this.state[type].checkedAll = false;
+      this.state[type].checkedIds = List();
+      this.state[type].uncheckedIds = List();
+    }
+  }
+
+  handleUncheckWholeSelection() {
+    this.handleUncheckAllElements({ type: 'sample', range: 'all' });
+    this.handleUncheckAllElements({ type: 'screen', range: 'all' });
+    this.handleUncheckAllElements({ type: 'reaction', range: 'all' });
+    this.handleUncheckAllElements({ type: 'wellplate', range: 'all' });
+    this.handleUncheckAllElements({ type: 'research_plan', range: 'all' });
+    this.state.klasses?.forEach((klass) => { this.handleUncheckAllElements({ type: klass, range: 'all' }); });
+  }
+
+  handleCheckElement(element) {
+    let type = element.type;
+
+    if (this.state[type].checkedAll) {
+      this.state[type].uncheckedIds =
+        ArrayUtils.removeFromListByValue(this.state[type].uncheckedIds,
+          element.id);
+    }
+    else {
+      this.state[type].checkedIds =
+        ArrayUtils.pushUniq(this.state[type].checkedIds, element.id);
+    }
+
+  }
+
+  handleUncheckElement(element) {
+    let type = element.type;
+
+    if (this.state[type].checkedAll) {
+      this.state[type].uncheckedIds =
+        ArrayUtils.pushUniq(this.state[type].uncheckedIds, element.id);
+    }
+    else {
+      this.state[type].checkedIds =
+        ArrayUtils.removeFromListByValue(this.state[type].checkedIds,
+          element.id);
+    }
+  }
+
+  handleDeselectAllElementsOfType(type) {
+    this.state[type].currentId = null;
+  }
+
+  handleDeselectAllElements() {
+    this.state.sample.currentId = null;
+    this.state.reaction.currentId = null;
+    this.state.wellplate.currentId = null;
+    this.state.research_plan.currentId = null;
+  }
+
+  handleSelectElement(element) {
+    this.state[element.type].currentId = element.id;
+  }
+
+  handleSelectCollection(collection, hasChanged = false) {
+    const state = this.state;
+    const isSync = collection && collection.is_sync_to_me ? true : false;
+    const { filterCreatedAt, fromDate, toDate, productOnly } = state;
+
+    if (!hasChanged) {
+      hasChanged = !state.currentCollection;
+      hasChanged = hasChanged || state.currentCollection.id != collection.id;
+      hasChanged = hasChanged || isSync != state.isSync;
+      hasChanged = hasChanged || state.currentSearchSelection != null;
+    }
+
+    if (collection && collection['clearSearch']){
+      this.handleClearSearchSelection();
+      hasChanged = true;
+      collection['clearSearch'] = undefined;
+    }
+
+    if(hasChanged && collection && !collection.noFetch) {
+      this.state.isSync = isSync;
+      this.state.currentCollection = collection;
+      const per_page = state.number_of_results;
+      const params = { per_page, filterCreatedAt, fromDate, toDate, productOnly };
+
+      const { profile } = UserStore.getState();
+      if (profile && profile.data && profile.data.layout) {
+        const { layout } = profile.data;
+        if (layout.sample && layout.sample > 0) {
+          ElementActions.fetchSamplesByCollectionId(
+            collection.id, Object.assign(params, { page: state.sample.page }),
+            isSync, ElementStore.getState().moleculeSort
+          );
+        }
+        if (layout.reaction && layout.reaction > 0) {
+          ElementActions.fetchReactionsByCollectionId(
+            collection.id, Object.assign(params, { page: state.reaction.page }),
+            isSync
+          );
+        }
+        if (layout.wellplate && layout.wellplate > 0) {
+          ElementActions.fetchWellplatesByCollectionId(
+            collection.id, Object.assign(params, { page: state.wellplate.page }),
+            isSync
+          );
+        }
+        if (layout.screen && layout.screen > 0) {
+          ElementActions.fetchScreensByCollectionId(
+            collection.id, Object.assign(params, { page: state.screen.page }),
+            isSync
+          );
+        }
+        if (!isSync && layout.research_plan && layout.research_plan > 0) {
+          ElementActions.fetchResearchPlansByCollectionId(
+            collection.id,
+            Object.assign(params, { page: state.research_plan.page }),
+          );
+        }
+
+        Object.keys(layout).filter(l => !['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].includes(l)).forEach((key) => {
+          if (typeof layout[key] !== 'undefined' && layout[key] > 0) {
+            const page = state[key] ? state[key].page : 1;
+            ElementActions.fetchGenericElsByCollectionId(
+              collection.id,
+              Object.assign(params, { page, name: key }),
+              isSync,
+              key
+            );
+          }
+        });
+      }
+    }
+  }
+
+  handleSelectSyncCollection(collection) {
+    this.handleSelectCollection(collection)
+  }
+
+  // FIXME this method is also defined in ElementStore
+  handleSetPagination(pagination) {
+    let { type, page } = pagination;
+    this.state[type].page = page;
+  }
+
+  handleSetSearchSelection(selection) {
+    this.state.currentSearchSelection = selection;
+  }
+
+  handleSelectCollectionWithoutUpdating(collection) {
+    this.state.currentCollection = collection;
+    this.state.isSync = collection.is_sync_to_me ? true : false;
+  }
+
+  handleClearSearchSelection() {
+    this.state.currentSearchSelection = null;
+    this.state.showAdvancedSearch = false;
+  }
+
+  handleChangeNumberOfResultsShown(value) {
+    this.state.number_of_results = value;
+  }
+  handleShowModalChange(params) {
+    this.state.showModal = params.show ? true : false
+    this.state.modalParams = params
+  }
+
+  handleHideModal() {
+    this.state.showModal = false
+    this.state.modalParams = {
+      show: false,
+      title: "",
+      component: "",
+      action: null
+    }
+  }
+
+  handleSetFilterCreatedAt(filterCreatedAt) {
+    this.state.filterCreatedAt = filterCreatedAt;
+    if (this.state.fromDate != null || this.state.toDate != null) {
+      this.handleSelectCollection(this.state.currentCollection, true);
+    }
+  }
+
+  handleSetFromDate(fromDate) {
+    this.state.fromDate = fromDate;
+    this.handleSelectCollection(this.state.currentCollection, true);
+  }
+
+  handleSetToDate(toDate) {
+    this.state.toDate = toDate;
+    this.handleSelectCollection(this.state.currentCollection, true);
+  }
+
+  handleSetProductOnly(productOnly) {
+    this.state.productOnly = productOnly;
+    this.handleSelectCollection(this.state.currentCollection, true);
+  }
+
+  handleSelectPublicCollection(result) {
+    this.state.currentCollection = result;
+    this.state.isSync = result.is_sync;
+  }
+}
+
+export default alt.createStore(UIStore, 'UIStore');
diff --git a/app/packs/src/components/stores/UserStore.js b/app/packs/src/components/stores/UserStore.js
new file mode 100644
index 000000000..efb3c317b
--- /dev/null
+++ b/app/packs/src/components/stores/UserStore.js
@@ -0,0 +1,111 @@
+import alt from 'src/stores/alt/alt';
+import _ from 'lodash';
+import UserActions from 'src/stores/alt/actions/UserActions';
+
+class UserStore {
+  constructor() {
+    this.state = {
+      currentUser: null,
+      profile: null,
+      // TODO: currentTab and currentType should be in UIStore
+      currentTab: 0,
+      currentType: '',
+      devices: [],
+      rxnos: [],
+      chmos: [],
+      labels: [],
+      genericEls: [],
+      segmentKlasses: [],
+      dsKlasses: [],
+      matriceConfigs: [],
+      omniauthProviders: []
+    };
+
+    this.bindListeners({
+      handleFetchOlsRxno: UserActions.fetchOlsRxno,
+      handleFetchOlsChmo: UserActions.fetchOlsChmo,
+      handleFetchGenericEls: UserActions.fetchGenericEls,
+      handleFetchCurrentUser: UserActions.fetchCurrentUser,
+      handleFetchUserLabels: UserActions.fetchUserLabels,
+      handleFetchProfile: UserActions.fetchProfile,
+      handleFetchEditors: UserActions.fetchEditors,
+      handleSelectTab: UserActions.selectTab,
+      handleUpdateUserProfile: UserActions.updateUserProfile,
+      handleFetchNoVNCDevices: UserActions.fetchNoVNCDevices,
+      handleSegementKlasses: UserActions.fetchSegmentKlasses,
+      handleDatasetKlasses: UserActions.fetchDatasetKlasses,
+      handleOmniauthProviders: UserActions.fetchOmniauthProviders
+    });
+  }
+
+  handleFetchUserLabels(result) {
+    this.state.labels = result.labels;
+  }
+
+  handleFetchEditors(result) {
+    this.state.matriceConfigs = result.matrices;
+  }
+
+  handleFetchOlsRxno(result) {
+    this.state.rxnos = result.ols_terms;
+  }
+
+  handleFetchOlsChmo(result) {
+    this.state.chmos = result.ols_terms;
+  }
+
+  handleFetchGenericEls(result) {
+    this.state.genericEls = result.klass;
+  }
+
+  handleFetchCurrentUser(result) {
+    this.state.currentUser = result
+ }
+
+  handleFetchProfile(result) {
+    this.state.profile = result;
+    const { layout } = this.state.profile.data;
+    if (this.state.currentType === '') {
+      const { currentTab } = this.state
+      const type = Object.keys(layout).filter((e) => {
+        return layout[e] === currentTab + 1
+      })[0]
+      this.state.currentType = type
+    }
+  }
+
+  handleUpdateUserProfile(result) {
+    if (this.state.profile && result) {
+      this.state.profile = result
+    }
+  }
+
+  handleSelectTab(tab) {
+    const { layout } = this.state.profile.data;
+    const type = Object.keys(layout).filter((e) => {
+      return layout[e] === tab + 1
+    })[0]
+
+    this.state.currentTab = tab
+    this.state.currentType = type
+  }
+
+  handleFetchNoVNCDevices(devices) {
+    if (devices) { this.state.devices = devices; }
+  }
+
+  handleSegementKlasses(result) {
+    this.state.segmentKlasses = result.klass;
+  }
+
+  handleDatasetKlasses(result) {
+    this.state.dsKlasses = result.klass;
+  }
+
+  handleOmniauthProviders(result) {
+    this.state.omniauthProviders = result.omniauth_providers;
+    this.state.extraRules = result.extra_rules;
+  }
+}
+
+export default alt.createStore(UserStore, 'UserStore');
diff --git a/app/packs/src/components/structure_editor/ChemDrawEditor.js b/app/packs/src/components/structure_editor/ChemDrawEditor.js
new file mode 100644
index 000000000..4a653c8ce
--- /dev/null
+++ b/app/packs/src/components/structure_editor/ChemDrawEditor.js
@@ -0,0 +1,86 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable no-undef */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import StructureEditor from '../models/StructureEditor';
+import loadScripts from './loadScripts';
+
+const LoadingModal = (props) => {
+  const { loading } = props;
+  return (
+    <Modal className="chemdraw-loading" animation show={loading}>
+      <img src="/images/chemdraw.png" alt="ChemDraw" title="ChemDraw" />
+      <div>Initializing...</div>
+      <i className="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true" />
+    </Modal>
+  );
+};
+
+LoadingModal.propTypes = { loading: PropTypes.bool };
+LoadingModal.defaultProps = { loading: false };
+
+class ChemDrawEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { loading: true };
+    this.cdAttached = this.cdAttached.bind(this);
+    this.cdFailed = this.cdFailed.bind(this);
+    this.loaded = this.loaded.bind(this);
+  }
+
+  componentDidMount() {
+    const { editor } = this.props;
+    const { extJs, id } = editor;
+    loadScripts({
+      es: extJs, id, cbError: () => loadError(id), cbLoaded: () => this.loaded()
+    });
+  }
+
+  cdAttached(cd) {
+    const { editor, molfile } = this.props;
+    editor.structureDef.getEditorFunction = () => cd;
+    if (molfile) {
+      editor.structureDef.molfile = molfile;
+    }
+    this.setState({ loading: false }, this.props.parent.setState({ editor }));
+  }
+
+  cdFailed() {
+    this.setState({ loading: false });
+  }
+
+  loaded() {
+    const { editor } = this.props;
+    const { id } = editor;
+    const extConf = editor.extConf || { };
+    if (!extConf.properties) extConf.properties = { StyleSheet: 'ACS Document 1996', chemservice: 'https://chemdrawdirect.perkinelmer.cloud/rest' };
+    const licenseUrl = editor.license || '';
+    perkinelmer.ChemdrawWebManager.attach({
+      id,
+      config: extConf,
+      callback: e => this.cdAttached(e),
+      errorCallback: this.cdFailed,
+      licenseUrl
+    });
+  }
+
+  render() {
+    const { iH, editor } = this.props;
+    return (
+      <div id={editor.id} style={{ height: iH }}>
+        <LoadingModal loading={this.state.loading} />
+      </div>
+    );
+  }
+}
+
+ChemDrawEditor.propTypes = {
+  editor: PropTypes.instanceOf(StructureEditor).isRequired,
+  parent: PropTypes.object.isRequired,
+  molfile: PropTypes.string,
+  iH: PropTypes.string.isRequired
+};
+
+ChemDrawEditor.defaultProps = { molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n' };
+export default ChemDrawEditor;
diff --git a/app/packs/src/components/structure_editor/KetcherEditor.js b/app/packs/src/components/structure_editor/KetcherEditor.js
new file mode 100644
index 000000000..b17ebad79
--- /dev/null
+++ b/app/packs/src/components/structure_editor/KetcherEditor.js
@@ -0,0 +1,28 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const KetcherEditor = (props) => {
+  const {
+    editor, fh, fs, molfile
+  } = props;
+  const initMol = molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n';
+  if (editor && editor.structureDef && editor.structureDef.editor) {
+    editor.structureDef.editor.setMolecule(initMol);
+  }
+  return (
+    <div>
+      <iframe id={editor.id} src={editor.extSrc} title={editor.label} height={fh} width="100%" style={fs} />
+    </div>
+  );
+};
+
+KetcherEditor.propTypes = {
+  molfile: PropTypes.string,
+  editor: PropTypes.object.isRequired,
+  fh: PropTypes.string.isRequired,
+  fs: PropTypes.object.isRequired
+};
+
+export default KetcherEditor;
diff --git a/app/packs/src/components/structure_editor/MarvinjsEditor.js b/app/packs/src/components/structure_editor/MarvinjsEditor.js
new file mode 100644
index 000000000..c8662dc74
--- /dev/null
+++ b/app/packs/src/components/structure_editor/MarvinjsEditor.js
@@ -0,0 +1,83 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import StructureEditor from '../models/StructureEditor';
+import loadScripts from './loadScripts';
+
+const LoadingModal = (props) => {
+  const { loading } = props;
+  return (
+    <Modal className="chemdraw-loading" animation show={loading}>
+      <i className="fa fa-spinner fa-pulse fa-3x fa-fw" />
+      <span className="sr-only">Initializing...</span>
+    </Modal>
+  );
+};
+
+LoadingModal.propTypes = { loading: PropTypes.bool };
+LoadingModal.defaultProps = { loading: false };
+
+class MarvinjsEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { loading: true };
+    this.attachEditor = this.attachEditor.bind(this);
+    this.loadError = this.loadError.bind(this);
+    this.attachError = this.attachError.bind(this);
+  }
+
+  componentDidMount() {
+    const { editor } = this.props;
+    const { extJs, id } = editor;
+    loadScripts({
+      es: extJs, id, cbError: () => this.loadError(), cbLoaded: () => this.attachEditor()
+    });
+  }
+
+  loadError() {
+    this.attachError('Internal Server Error!');
+  }
+
+  attached(mv) {
+    this.setState({ loading: false });
+    const { editor } = this.props;
+    const molfile = this.props.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n';
+    mv.sketcherInstance.setDisplaySettings({ toolbars: 'reporting' });
+    mv.sketcherInstance.importStructure('mol', molfile).then(() => {}, (error) => { alert(error); }).catch((error) => { alert(error); });
+    editor.structureDef.getEditorFunction = () => mv;
+    this.props.parent.setState({ editor });
+  }
+
+  attachError(e) {
+    this.setState({ loading: false });
+    alert(`Marvin JS is failed to load or attach! Error: ${e}`);
+  }
+
+  attachEditor() {
+    // eslint-disable-next-line no-undef
+    MarvinJSUtil.getPackage('#mvs').then((mv) => {
+      mv.onReady(() => { this.attached(mv); });
+    }, (error) => { this.attachError(error); });
+  }
+
+  render() {
+    const { iH, editor } = this.props;
+    return (
+      <div>
+        <iframe title="Marvin JS" id="mvs" src={editor.extSrc} className="sketcher-frame" height={iH} width="100%" />
+        <LoadingModal loading={this.state.loading} />
+      </div>
+    );
+  }
+}
+
+MarvinjsEditor.propTypes = {
+  editor: PropTypes.instanceOf(StructureEditor).isRequired,
+  parent: PropTypes.object.isRequired,
+  molfile: PropTypes.string,
+  iH: PropTypes.string.isRequired
+};
+
+MarvinjsEditor.defaultProps = { molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n' };
+export default MarvinjsEditor;
diff --git a/app/packs/src/components/structure_editor/StructureEditorContent.js b/app/packs/src/components/structure_editor/StructureEditorContent.js
new file mode 100644
index 000000000..33f4d287e
--- /dev/null
+++ b/app/packs/src/components/structure_editor/StructureEditorContent.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import scriptLoader from 'react-async-script-loader';
+
+
+class StructureEditorContent extends React.Component {
+  constructor(props) {
+    super(props);
+    const { completionCallback, errorCallback } = this.props;
+    this.state = {
+      completionCallback, errorCallback
+    }
+   this.attachEditor = this.attachEditor.bind(this)
+  }
+
+  UNSAFE_componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
+    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
+      if (isScriptLoadSucceed) {
+        setTimeout(this.attachEditor, 3000);
+      }
+    }
+  }
+
+  componentDidMount() {
+    const { isScriptLoaded, isScriptLoadSucceed } = this.props
+    if (isScriptLoaded && isScriptLoadSucceed) {
+      this.attachEditor();
+      this.attachEditor();
+    }
+  }
+
+  attachEditor() {
+    const { completionCallback, errorCallback } = this.props;
+
+    perkinelmer.ChemdrawWebManager.attach({
+        id: 'chemdrawjs-container',
+        config: window.userConfiguration,
+        element: this.chemdrawcont,
+        callback: ()=> alert('done'),
+        errorCallback: ()=> alert('de'),
+        licenseUrl: 'license.xml',
+        // loadConfigFromUrl: 'cdjs/chemdrawweb/configuration.json',
+        // preservePageInfo: false,
+        // viewonly: true,
+      });
+  }
+
+
+  render() {
+    return (
+      <div
+        ref={(input) => {this.chemdrawcont = input }}
+        // id="chemdrawjs-container"
+        style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '70vh' }}
+      />
+    );
+  }
+}
+export default scriptLoader(
+  [
+    "cdjs/chemdrawweb/chemdrawweb.js",
+  ]
+)(StructureEditorContent)
+
+
+// export default StructureEditorContent;
diff --git a/app/packs/src/components/structure_editor/StructureEditorMap.js b/app/packs/src/components/structure_editor/StructureEditorMap.js
new file mode 100644
index 000000000..f93e7c2ee
--- /dev/null
+++ b/app/packs/src/components/structure_editor/StructureEditorMap.js
@@ -0,0 +1,44 @@
+import StructureEditor from 'src/models/StructureEditor';
+
+const EditorListParams = [
+  {
+    id: 'ifkecther', // iframe id attribute
+    value: 'ketcher', // editor dropdown value
+    label: 'ketcher-rails', // displayed name in editor dropdown selector
+    src: '/ketcher', // iframe src attribute
+    title: 'ketcher-rails structure editor', // iframe title attribute
+    path: 'ketcher', // path to editor in frame.contentWindow
+    setMolfileInFrame: false, // false or var name: molfile can be saved in a document var until the edito is loaded
+    setMfFuncName: 'setMolecule',
+    getMfFuncName: 'getMolfile',
+    getMfWithCallback: false,
+    // getSmiFuncName: 'getSmiles',
+    // getSmiWithCallback: false,
+    getSVGFuncName: 'getSVG',
+    getSVGWithCallback: false,
+  },
+  // TODO mv additional editor configs to user profile
+  // {
+  //   id: 'ifChemDraw',
+  //   value: 'chemdraw',
+  //   label: 'ChemDrawJS',
+  //   src: 'cdjs/sample/index0.html',
+  //   title: 'ChemDrawJS editor',
+  //   path: 'cddInstance',
+  //   setMolfileInFrame: 'molfileInput',
+  //   // setMfFuncName: 'loadMOL',
+  //   getMfFuncName: 'getMOL',
+  //   getMfWithCallback: true,
+  //   getSmiFuncName: 'getSMILES',
+  //   getSmiWithCallback: true,
+  //   getSVGFuncName: 'getSVG',
+  //   getSVGWithCallback: true,
+  // }
+];
+
+const EditorList = EditorListParams.reduce((acc, args) => {
+  acc[args.value] = new StructureEditor(args);
+  return acc;
+}, new Map());
+
+export { EditorListParams, EditorList };
diff --git a/app/packs/src/components/structure_editor/StructureEditorModal.js b/app/packs/src/components/structure_editor/StructureEditorModal.js
new file mode 100644
index 000000000..5d2a6c006
--- /dev/null
+++ b/app/packs/src/components/structure_editor/StructureEditorModal.js
@@ -0,0 +1,292 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  ButtonToolbar,
+  Modal,
+  Panel,
+  FormGroup,
+  ControlLabel
+} from 'react-bootstrap';
+import Select from 'react-select';
+import UserStore from '../stores/UserStore';
+import UIStore from '../stores/UIStore';
+import StructureEditor from '../models/StructureEditor';
+import EditorAttrs from './StructureEditorSet';
+import ChemDrawEditor from './ChemDrawEditor';
+import MarvinjsEditor from './MarvinjsEditor';
+import KetcherEditor from './KetcherEditor';
+import loadScripts from './loadScripts';
+
+const EditorList = (props) => {
+  const { options, fnChange, value } = props;
+  return (
+    <FormGroup>
+      <div className="col-lg-2 col-md-2"><ControlLabel>Structure Editor</ControlLabel></div>
+      <div className="col-lg-6 col-md-8">
+        <Select
+          className="status-select"
+          name="editor selection"
+          clearable={false}
+          options={options}
+          onChange={fnChange}
+          value={value}
+        />
+      </div>
+      <div className="col-lg-4 col-md-2">{' '}</div>
+    </FormGroup>
+  );
+};
+
+EditorList.propTypes = {
+  value: PropTypes.string.isRequired,
+  fnChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const WarningBox = ({ handleCancelBtn, hideWarning, show }) => (show ?
+  (
+    <Panel bsStyle="info">
+      <Panel.Heading>
+        <Panel.Title>
+          Parents/Descendants will not be changed!
+        </Panel.Title>
+      </Panel.Heading>
+      <Panel.Body>
+        <p>This sample has parents or descendants, and they will not be changed.</p>
+        <p>Are you sure?</p>
+        <br />
+        <Button bsStyle="danger" onClick={handleCancelBtn} className="g-marginLeft--10">
+          Cancel
+        </Button>
+        <Button bsStyle="warning" onClick={hideWarning} className="g-marginLeft--10">
+          Continue Editing
+        </Button>
+      </Panel.Body>
+    </Panel>
+  ) : null
+);
+
+WarningBox.propTypes = {
+  handleCancelBtn: PropTypes.func.isRequired,
+  hideWarning: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+};
+
+export default class StructureEditorModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: props.showModal,
+      showWarning: props.hasChildren || props.hasParent,
+      molfile: props.molfile,
+      matriceConfigs: [],
+      editor: new StructureEditor({ ...EditorAttrs.ketcher, id: 'ketcher' })
+    };
+    this.editors = { ketcher: this.state.editor };
+    this.handleEditorSelection = this.handleEditorSelection.bind(this);
+    this.onChangeUser = this.onChangeUser.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChangeUser);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      showModal: nextProps.showModal,
+      molfile: nextProps.molfile
+    });
+  }
+
+  onChangeUser(state) {
+    let grantEditors = (state.matriceConfigs || []).map(u => u.configs) || [];
+    const availableEditors = UIStore.getState().structureEditors || {};
+    if (Object.keys(availableEditors.editors || {}).length > 0) {
+      grantEditors = grantEditors.map((g) => {
+        const available = availableEditors.editors[g.editor];
+        if (available) {
+          if (available.extJs && available.extJs.length > 0) {
+            loadScripts({
+              es: available.extJs,
+              id: g.editor,
+              cbError: () => alert(`${g.editor} failed to load!`),
+              cbLoaded: () => {}
+            });
+          }
+          return Object.assign({}, {
+            [g.editor]: new StructureEditor({
+              ...EditorAttrs[g.editor], ...available, ...g, id: g.editor
+            })
+          });
+        }
+        return null;
+      });
+      this.editors = [{ ketcher: new StructureEditor({ ...EditorAttrs.ketcher, id: 'ketcher' }) }].concat(grantEditors).reduce((acc, args) => {
+        return Object.assign({}, acc, args);
+      }, {});
+    }
+  }
+
+  initializeEditor() {
+    const { editor, molfile } = this.state;
+    if (editor) { editor.structureDef.molfile = molfile; }
+  }
+
+  handleEditorSelection(e) {
+    this.setState(prevState => ({ ...prevState, editor: this.editors[e.value] }));
+  }
+
+  handleCancelBtn() {
+    this.hideModal();
+    if (this.props.onCancel) { this.props.onCancel(); }
+  }
+
+  handleSaveBtn() {
+    const { editor } = this.state;
+    const structure = editor.structureDef;
+    if (editor.id === 'marvinjs') {
+      structure.editor.sketcherInstance.exportStructure('mol').then((mMol) => {
+        const editorImg = new structure.editor.ImageExporter({ imageType: 'image/svg' });
+        editorImg.render(mMol).then((svg) => {
+          this.setState({ showModal: false, showWarning: this.props.hasChildren || this.props.hasParent }, () => { if (this.props.onSave) { this.props.onSave(mMol, svg, null, editor.id); } });
+        }, (error) => { alert(`MarvinJS image generated fail: ${error}`); });
+      }, (error) => { alert(`MarvinJS molfile generated fail: ${error}`); });
+    } else if (editor.id === 'ketcher2') {
+      structure.editor.getMolfile().then((molfile) => {
+        structure.editor.generateImage(molfile, { outputFormat: 'svg' }).then((imgfile) => {
+          imgfile.text().then((text) => {
+            this.setState({ showModal: false, showWarning: this.props.hasChildren || this.props.hasParent }, () => { if (this.props.onSave) { this.props.onSave(molfile, text, { smiles: '' }, editor.id); } });
+          });
+        });
+      });
+    } else {
+      const { molfile, info } = structure;
+      structure.fetchSVG().then((svg) => {
+        this.setState({
+          showModal: false,
+          showWarning: this.props.hasChildren || this.props.hasParent
+        }, () => { if (this.props.onSave) { this.props.onSave(molfile, svg, info, editor.id); } });
+      });
+    }
+  }
+
+  hideModal() {
+    this.setState({
+      showModal: false,
+      showWarning: this.props.hasChildren || this.props.hasParent
+    });
+  }
+
+  hideWarning() {
+    this.setState({ showWarning: false });
+  }
+
+  render() {
+    const handleSaveBtn = !this.props.onSave ? null : this.handleSaveBtn.bind(this);
+    const { cancelBtnText, submitBtnText } = this.props;
+    const submitAddons = this.props.submitAddons ? this.props.submitAddons : '';
+    const { editor, showWarning, molfile } = this.state;
+    const iframeHeight = showWarning ? '0px' : '730px';
+    const iframeStyle = showWarning ? { border: 'none' } : {};
+    const buttonToolStyle = showWarning ? { marginTop: '20px', display: 'none' } : { marginTop: '20px' };
+
+    let useEditor = (
+      <div>
+        <iframe
+          id={editor.id}
+          src={editor.src}
+          title={`${editor.title}`}
+          height={iframeHeight}
+          width="100%"
+          style={iframeStyle}
+          ref={(f) => { this.ifr = f; }}
+        />
+      </div>
+    );
+    if (!showWarning && editor.id === 'ketcher2') {
+      useEditor =
+        <KetcherEditor editor={this.editors.ketcher2} fh={iframeHeight} fs={iframeStyle} molfile={molfile} />;
+    }
+    if (!showWarning && editor.id === 'chemdraw') {
+      useEditor =
+        <ChemDrawEditor editor={this.editors.chemdraw} molfile={molfile} parent={this} iH={iframeHeight} />;
+    }
+    let citeMarvin = null;
+    if (!showWarning && editor.id === 'marvinjs') {
+      useEditor =
+        <MarvinjsEditor editor={this.editors.marvinjs} molfile={molfile} parent={this} iH={iframeHeight} />;
+      citeMarvin = (
+        <a href="https://chemaxon.com/" target="_blank" rel="noreferrer">
+          <img alt="Marvin JS" src="/marvinjs/powered_by_chemaxon.png" style={{ width: '256px', cursor: 'pointer' }} />
+        </a>
+      );
+    }
+    const editorOptions = Object.keys(this.editors).map(e => ({ value: e, name: this.editors[e].label, label: this.editors[e].label }));
+    return (
+      <div>
+        <Modal
+          dialogClassName={this.state.showWarning ? '' : 'structure-editor-modal'}
+          animation
+          show={this.state.showModal}
+          onLoad={this.initializeEditor.bind(this)}
+          onHide={this.handleCancelBtn.bind(this)}
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              <EditorList
+                value={editor.id}
+                fnChange={this.handleEditorSelection}
+                options={editorOptions}
+              />
+              {citeMarvin}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body >
+            <WarningBox
+              handleCancelBtn={this.handleCancelBtn.bind(this)}
+              hideWarning={this.hideWarning.bind(this)}
+              show={!!showWarning}
+            />
+            {useEditor}
+            <div style={buttonToolStyle}>
+              <ButtonToolbar>
+                <Button bsStyle="warning" onClick={this.handleCancelBtn.bind(this)}>
+                  {cancelBtnText}
+                </Button>
+                {!handleSaveBtn ? null : (
+                  <Button bsStyle="primary" onClick={handleSaveBtn} style={{ marginRight: '20px' }} >
+                    {submitBtnText}
+                  </Button>
+                )}
+                {!handleSaveBtn ? null : submitAddons}
+              </ButtonToolbar>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+StructureEditorModal.propTypes = {
+  molfile: PropTypes.string,
+  showModal: PropTypes.bool,
+  hasChildren: PropTypes.bool,
+  hasParent: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onSave: PropTypes.func,
+  submitBtnText: PropTypes.string,
+  cancelBtnText: PropTypes.string,
+};
+
+StructureEditorModal.defaultProps = {
+  molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n',
+  showModal: false,
+  hasChildren: false,
+  hasParent: false,
+  onCancel: () => {},
+  onSave: () => {},
+  submitBtnText: 'Save',
+  cancelBtnText: 'Cancel',
+};
diff --git a/app/packs/src/components/structure_editor/StructureEditorSet.js b/app/packs/src/components/structure_editor/StructureEditorSet.js
new file mode 100644
index 000000000..9194343ef
--- /dev/null
+++ b/app/packs/src/components/structure_editor/StructureEditorSet.js
@@ -0,0 +1,53 @@
+const EditorAttrs =
+{
+  ketcher:
+  {
+    label: 'ketcher-rails',
+    src: '/ketcher',
+    structure:
+    {
+      path: 'ketcher',
+      setMolfileInFrame: false,
+      setMfFuncName: 'setMolecule',
+      getMfFuncName: 'getMolfile',
+      getMfWithCallback: false,
+      getSVGFuncName: 'getSVG',
+      getSVGWithCallback: false
+    }
+  },
+  ketcher2:
+  {
+    structure:
+    {
+      path: 'ketcher',
+      setMolfileInFrame: false,
+      setMfFuncName: 'setMolecule',
+      getMfFuncName: 'getMolfile',
+      getMfWithCallback: false,
+    }
+  },
+  chemdraw:
+  {
+    structure:
+    {
+      getMfFuncName: 'getMOL',
+      setMfFuncName: 'loadMOL',
+      getSVGFuncName: 'getSVG',
+      getMfWithCallback: true,
+      setMolfileInFrame: false,
+      getMolfileFunction: 'getMOL',
+      getSVGWithCallback: true,
+    }
+  },
+  marvinjs:
+  {
+    structure:
+    {
+      getMfWithCallback: true,
+      getSVGFuncName: 'render',
+      getSVGWithCallback: true
+    }
+  }
+};
+
+export default EditorAttrs;
diff --git a/app/packs/src/components/structure_editor/loadScripts.js b/app/packs/src/components/structure_editor/loadScripts.js
new file mode 100644
index 000000000..9e4aa16d6
--- /dev/null
+++ b/app/packs/src/components/structure_editor/loadScripts.js
@@ -0,0 +1,44 @@
+const loadScript = (props) => {
+  const scriptId = `_sdjs_${props.id}`;
+  const obScript = document.getElementById(scriptId);
+  if (!obScript) {
+    const script = document.createElement('script');
+    script.src = props.src;
+    script.id = scriptId;
+    document.head.appendChild(script);
+    script.onload = () => {
+      if (props.loaded) props.loaded();
+    };
+    script.onerror = () => {
+      const rmScript = document.getElementById(scriptId);
+      rmScript.parentNode.removeChild(rmScript);
+      if (props.error) props.error();
+    };
+  }
+  if (obScript) {
+    if (obScript && props.loaded) props.loaded();
+  }
+};
+
+const loadScripts = (props) => {
+  const {
+    es, id, cbError, cbLoaded
+  } = props;
+  const idx = props.idx || 0;
+  const loadId = `${id}_${idx}`;
+  const src = es[idx];
+  if (es.length === (idx + 1)) {
+    loadScript({
+      error: cbError, loaded: cbLoaded, src, id: loadId
+    });
+  } else {
+    const params = {
+      es, id, cbError, cbLoaded, idx: idx + 1
+    };
+    loadScript({
+      error: cbError, loaded: loadScripts(params), src, id: loadId
+    });
+  }
+};
+
+export default loadScripts;
diff --git a/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js b/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
new file mode 100644
index 000000000..bf3e88871
--- /dev/null
+++ b/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ToolbarIcon from '../react_quill/ToolbarIcon';
+import TextTemplateIcon from '../../admin/text_templates/TextTemplateIcon';
+import ToolbarDropdown from '../react_quill/ToolbarDropdown';
+
+const getNamesFromTemplate = (template) => {
+  if (!template) return [];
+
+  // eslint-disable-next-line no-underscore-dangle
+  const iconNames = template._toolbar || [];
+  const dropdownNames = {};
+  Object.keys(template).filter(k => k !== '_toolbar').forEach((k) => {
+    dropdownNames[k] = template[k];
+  });
+
+  return [iconNames, dropdownNames];
+};
+
+const TextTemplateToolbar = ({
+  template, predefinedTemplates, applyTemplate
+}) => {
+  const [iconNames, dropdownNames] = getNamesFromTemplate(template);
+
+  return (
+    <React.Fragment>
+      {iconNames.map((name) => {
+        const predefinedTemplate = predefinedTemplates[name];
+        if (!predefinedTemplate) return <span key={name} />;
+
+        const onClick = () => applyTemplate(predefinedTemplate.data || {});
+        const icon = <TextTemplateIcon template={predefinedTemplate} />;
+
+        return (
+          <ToolbarIcon
+            key={`icon_${name}`}
+            icon={icon}
+            template={predefinedTemplate}
+            onClick={onClick}
+          />
+        );
+      })}
+      {Object.keys(dropdownNames).map((label) => {
+        const items = {};
+        dropdownNames[label].forEach((k) => {
+          items[k.toUpperCase()] = k;
+        });
+        const onSelect = (_k, v) => {
+          const predefinedTemplate = predefinedTemplates[v];
+          if (predefinedTemplate) {
+            applyTemplate(predefinedTemplate.data || {});
+          }
+        };
+        const dropdownLabel = dropdownNames[label];
+        return (
+          <ToolbarDropdown
+            key={`dd_${label}`}
+            label={label !== '' ? label : `${dropdownLabel[0]} `}
+            items={items}
+            onSelect={onSelect}
+          />
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+TextTemplateToolbar.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  template: PropTypes.object,
+  predefinedTemplates: PropTypes.object,
+  applyTemplate: PropTypes.func,
+};
+
+TextTemplateToolbar.defaultProps = {
+  template: {},
+  predefinedTemplates: [],
+  applyTemplate: null
+};
+
+export default TextTemplateToolbar;
diff --git a/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js b/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
new file mode 100644
index 000000000..7b9fe6285
--- /dev/null
+++ b/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
@@ -0,0 +1,260 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, FormControl } from 'react-bootstrap';
+import Select from 'react-select3';
+// import { template } from 'lodash';
+
+const customStyles = {
+  container: ({ marginLeft, ...css }) => ({
+    marginLeft: '100px',
+    marginRight: '35px',
+    ...css
+  }),
+  menu: ({ width, ...css }) => ({ width: '465px', ...css })
+};
+
+const getIconAndDropdown = (template) => {
+  const dropdownTemplates = Object.keys(template).filter(k => (
+    k !== '_toolbar'
+  )).map((k, idx) => (
+    { id: idx + 1, name: k, data: template[k] }
+  ));
+
+  // eslint-disable-next-line no-underscore-dangle
+  const toolbarTemplate = template._toolbar || [];
+  return [toolbarTemplate, dropdownTemplates];
+};
+
+export default class ToolbarTemplateCreator extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toolbarSelectRef = React.createRef();
+
+    const [iconTemplates, dropdownTemplates] = getIconAndDropdown(props.template);
+    this.state = { iconTemplates, dropdownTemplates };
+
+    this.toolbarDdSelectRefs = dropdownTemplates.map(dd => ({
+      id: dd.id,
+      ref: React.createRef()
+    }));
+    this.toolbarTitleRefs = dropdownTemplates.map(dd => ({
+      id: dd.id,
+      ref: React.createRef()
+    }));
+    this.id = dropdownTemplates.length + 1;
+
+    this.setTitleRef = this.setTitleRef.bind(this);
+    this.onChangeDropdown = this.onChangeDropdown.bind(this);
+
+    this.createDropdownTemplate = this.createDropdownTemplate.bind(this);
+    this.removeDropdownTemplate = this.removeDropdownTemplate.bind(this);
+    this.saveUserTemplates = this.saveUserTemplates.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    const [iconTemplates, dropdownTemplates] = getIconAndDropdown(newProps.template);
+    this.toolbarDdSelectRefs = dropdownTemplates.map(dd => ({
+      id: dd.id,
+      ref: React.createRef()
+    }));
+    this.toolbarTitleRefs = dropdownTemplates.map(dd => ({
+      id: dd.id,
+      ref: React.createRef()
+    }));
+    this.id = dropdownTemplates.length + 1;
+
+    this.setState({ iconTemplates, dropdownTemplates });
+  }
+
+  onChangeDropdown(type, e, id) {
+    const { dropdownTemplates } = this.state;
+
+    const tempOnChange = dropdownTemplates.filter(template => template.id === id);
+    if (type === 'DropdownName') {
+      tempOnChange[0].name = e.target.value;
+    } else {
+      const dataValues = [];
+      if (e !== null) {
+        e.forEach((object) => {
+          const tabContent = object.value;
+          if (tabContent) { dataValues.push(tabContent); }
+        });
+        tempOnChange[0].data = dataValues;
+      }
+    }
+  }
+
+  setTitleRef(id, ref) {
+    const refIdx = this.toolbarTitleRefs.findIndex(r => r.id === id);
+    if (refIdx < 0) return;
+
+    const titleRef = this.toolbarTitleRefs[refIdx];
+    titleRef.ref = ref;
+    this.toolbarTitleRefs[refIdx] = titleRef;
+  }
+
+  createDropdownTemplate() {
+    const { dropdownTemplates } = this.state;
+
+    this.toolbarDdSelectRefs.push({ id: this.id, ref: React.createRef() });
+    this.toolbarTitleRefs.push({ id: this.id, ref: React.createRef() });
+
+    const newDd = { id: this.id, name: '', data: [] };
+    this.setState({
+      dropdownTemplates: dropdownTemplates.concat([newDd])
+    });
+    this.id += 1;
+  }
+
+  removeDropdownTemplate(template) {
+    const { dropdownTemplates } = this.state;
+    const newDropdowTemplates = dropdownTemplates.filter(dd => (
+      dd.id !== template.id
+    ));
+
+    this.setState({ dropdownTemplates: newDropdowTemplates }, () => {
+      this.toolbarDdSelectRefs = this.toolbarDdSelectRefs.filter(ref => (
+        ref.id !== template.id
+      ));
+      this.toolbarTitleRefs = this.toolbarTitleRefs.filter(ref => (
+        ref.id !== template.id
+      ));
+    });
+  }
+
+  saveUserTemplates() {
+    const { updateTextTemplates } = this.props;
+    if (!updateTextTemplates) return;
+
+    const iconTemplates = this.toolbarSelectRef.current.state.value;
+    const userTemplate = { _toolbar: iconTemplates.map(n => n.value) };
+
+    const { dropdownTemplates } = this.state;
+    dropdownTemplates.forEach((template) => {
+      const selectRefs = this.toolbarDdSelectRefs.filter(r => r.id === template.id);
+      const titleRefs = this.toolbarTitleRefs.filter(r => r.id === template.id);
+      if (selectRefs.length === 0 || titleRefs.length === 0) return;
+
+      const selectRef = selectRefs[0].ref;
+      const selectedValue = selectRef.current.state.value;
+
+      const tempName = template.name;
+      userTemplate[tempName] = selectedValue.map(v => v.value);
+    });
+    this.setState({ dropdownTemplates });
+    updateTextTemplates(userTemplate);
+  }
+
+  render() {
+    const { templateOptions } = this.props;
+    const options = templateOptions.map(n => ({ label: n, value: n }));
+
+    const { iconTemplates, dropdownTemplates } = this.state;
+    const iconSelected = iconTemplates.map(n => ({ label: n, value: n }));
+
+    const dropdownTemplateSelector = dropdownTemplates.map((template) => {
+      const { name, id } = template;
+      const selectRef = this.toolbarDdSelectRefs.filter(r => (
+        r.id === template.id
+      ))[0];
+      const titleRef = this.toolbarTitleRefs.filter(r => (
+        r.id === template.id
+      ))[0];
+      if (!selectRef || !titleRef) return <span />;
+
+      const ddSelected = template.data.map(n => ({ label: n, value: n }));
+      const removeDropdown = () => this.removeDropdownTemplate(template);
+
+      return (
+        <div
+          key={`ttc_dd_${name}_${id}`}
+          style={{ marginTop: '10px' }}
+        >
+          <hr />
+          <FormControl
+            style={{ float: 'left', width: '90px', marginRight: '10px' }}
+            // inputRef={(ref) => { this.setTitleRef(id, ref); }}
+            onChange={e => this.onChangeDropdown('DropdownName', e, id)}
+            ref={titleRef.ref}
+            type="text"
+            defaultValue={name}
+          />
+          <Button
+            bsStyle="danger"
+            bsSize="xs"
+            onClick={removeDropdown}
+            style={{ float: 'right', width: '25px', marginLeft: '10px' }}
+          >
+            <i className="fa fa-trash" />
+          </Button>
+          <Select
+            styles={customStyles}
+            ref={selectRef.ref}
+            options={options}
+            defaultValue={ddSelected}
+            onChange={e => this.onChangeDropdown('DropdownData', e, id)}
+            isMulti
+            isSearchable
+            closeMenuOnSelect={false}
+          />
+        </div>
+      );
+    });
+
+    return (
+      <div style={{ width: '600px' }}>
+        <div>
+          <Button
+            bsStyle="success"
+            onClick={this.saveUserTemplates}
+          >
+            Save
+          </Button>
+          &nbsp;&nbsp;
+          <Button
+            bsStyle="info"
+            onClick={this.createDropdownTemplate}
+          >
+            New dropdown
+          </Button>
+        </div>
+        <hr />
+        <div style={{ marginTop: '10px' }}>
+          <FormControl
+            style={{ float: 'left', marginRight: '10px', width: '90px' }}
+            type="text"
+            disabled
+            defaultValue="Toolbar"
+          />
+          <div style={{ marginRight: '35px' }}>
+            <Select
+              ref={this.toolbarSelectRef}
+              styles={customStyles}
+              defaultValue={iconSelected}
+              options={options}
+              isMulti
+              isSearchable
+              closeMenuOnSelect={false}
+            />
+          </div>
+        </div>
+        {dropdownTemplateSelector}
+      </div>
+    );
+  }
+}
+
+ToolbarTemplateCreator.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  template: PropTypes.object,
+  templateOptions: PropTypes.arrayOf(PropTypes.string),
+  /* eslint-enable react/forbid-prop-types */
+  updateTextTemplates: PropTypes.func
+};
+
+ToolbarTemplateCreator.defaultProps = {
+  template: {},
+  templateOptions: [],
+  updateTextTemplates: null
+};
diff --git a/app/packs/src/components/utils/ArrayUtils.js b/app/packs/src/components/utils/ArrayUtils.js
new file mode 100644
index 000000000..abcb42897
--- /dev/null
+++ b/app/packs/src/components/utils/ArrayUtils.js
@@ -0,0 +1,60 @@
+import { uniq } from 'lodash';
+
+export default class ArrayUtils {
+  static pushUniq(list, value) {
+    if (!list.includes(value)) {
+      return list.push(value);
+    }
+  }
+
+  static removeFromListByValue(list, value) {
+    let index = list.indexOf(value);
+
+    return this.removeFromListByIndex(list, index);
+  }
+
+  static removeFromListByIndex(list, index) {
+    if (index != -1) {
+      return list.splice(index, 1);
+    }else {
+      return list;
+    }
+  }
+
+  static isValInArray(array, value) {
+    let index = array.indexOf(value);
+
+    if(index != -1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  static isValNotInArray(array, value) {
+    return !ArrayUtils.isValInArray(array, value)
+  }
+
+  static flatten2D(array_2d) {
+    return array_2d.reduce((a, b) => a.concat(b), []);
+  }
+
+  static sortArrByIndex(arr) {
+    return arr.concat().sort((a, b) => {
+      const aIndex = parseInt(a.extended_metadata.index, 10);
+      const bIndex = parseInt(b.extended_metadata.index, 10);
+      if (isNaN(aIndex)) return false;
+      if (isNaN(bIndex)) return true;
+      return aIndex - bIndex;
+    });
+  }
+
+  static uniqSortById(items) {
+    let ids = items.map(a => a.id);
+    ids = uniq(ids).sort((a, b) => a - b);
+    const output = ids.map(id => (
+      items.find(item => item.id === id)
+    )).filter(r => r);
+    return output;
+  }
+}
diff --git a/app/packs/src/components/utils/DndControl.js b/app/packs/src/components/utils/DndControl.js
new file mode 100644
index 000000000..16a0a6c6a
--- /dev/null
+++ b/app/packs/src/components/utils/DndControl.js
@@ -0,0 +1,27 @@
+const isEqId = (a, b) => {
+  return a.id === b.id;
+}
+
+const findArrIndex = (tagEl, criteria, arr = []) => {
+  let elIndex;
+  arr.forEach( (el, i) => {
+    if(criteria(el, tagEl)) {
+      elIndex = i;
+    }
+  });
+  return elIndex;
+}
+
+const reOrderArr = (sourceTagEl, targetTagEl, criteria, arr = []) => {
+  const sourceIndex = findArrIndex(sourceTagEl, criteria, arr);
+  const targetIndex = findArrIndex(targetTagEl, criteria, arr);
+  const arrWoSource = [...arr.slice(0, sourceIndex),
+                        ...arr.slice(sourceIndex + 1)];
+  const newArr = [ ...arrWoSource.slice(0, targetIndex),
+                    arr[sourceIndex],
+                    ...arrWoSource.slice(targetIndex)]
+                      .filter(o => o != null) || [];
+  return newArr;
+}
+
+export { reOrderArr, isEqId };
diff --git a/app/packs/src/components/utils/DocumentHelper.js b/app/packs/src/components/utils/DocumentHelper.js
new file mode 100644
index 000000000..59e1cab21
--- /dev/null
+++ b/app/packs/src/components/utils/DocumentHelper.js
@@ -0,0 +1,15 @@
+var DocumentHelper = {
+  getMetaContent: function(name) {
+    var metas = document.getElementsByTagName('meta');
+ 
+    for (var i=0; i<metas.length; i++) {
+      if (metas[i].getAttribute("name") == name) {
+        return metas[i].getAttribute("content");
+      }
+    }
+ 
+    return "";
+  }
+}
+ 
+module.exports = DocumentHelper;
\ No newline at end of file
diff --git a/app/packs/src/components/utils/DomHelper.js b/app/packs/src/components/utils/DomHelper.js
new file mode 100644
index 000000000..efb7475a9
--- /dev/null
+++ b/app/packs/src/components/utils/DomHelper.js
@@ -0,0 +1,11 @@
+const stopBubble = (e) => {
+  e.stopPropagation();
+};
+
+const stopEvent = (e) => {
+  if (!e) return;
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+export { stopBubble, stopEvent };
diff --git a/app/packs/src/components/utils/ElementUtils.js b/app/packs/src/components/utils/ElementUtils.js
new file mode 100644
index 000000000..07f1c72b2
--- /dev/null
+++ b/app/packs/src/components/utils/ElementUtils.js
@@ -0,0 +1,559 @@
+import Aviator from 'aviator';
+import _ from 'lodash';
+import { deltaToMarkdown, markdownToDelta } from 'src/utilities/deltaMarkdownConverter';
+import { searchAndReplace } from 'src/utilities/markdownUtils';
+import MatrixCheck from 'src/components/common/MatrixCheck';
+
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+
+import { contentToText } from 'src/utilities/quillFormat';
+import { chmoConversions } from 'src/components/OlsComponent';
+
+
+const rfValueFormat = (input) => {
+  if (typeof input !== 'string') { return input; }
+  let result = input;
+  (input.match(/[0]+[,]\d+/mg) || []).forEach((rf) => {
+    result = result.replace(rf, rf.replace(',', '.'));
+  });
+  return result;
+};
+
+const atomCountInFormula = (formula, e = 'H') => {
+  if (typeof formula !== 'string') { return 0; }
+  const regStr = `${e}\\d*`;
+  const re = new RegExp(regStr);
+  const hForm = re.exec(formula);
+  if (!hForm) { return 0; }
+  const count = hForm[0].slice(1);
+  if (count.length === 0) { return 1; }
+  return parseInt(count, 10);
+};
+
+const reduceByPeak = (splitData) => {
+  let within = 0;
+  return splitData.split(/(\(|\)|,)/).reduce(
+    (acc, cv) => {
+      if (within === 0) {
+        if (cv === ',') {
+          acc.push('');
+          return acc;
+        } else if (cv && cv.match(/[^\d]?\.[^\d]/)) {
+          acc.push('.');
+          return acc;
+        }
+      }
+      if (cv === '(') {
+        within += 1;
+      } else if (cv === ')') {
+        within -= 1;
+      }
+      acc[acc.length - 1] += cv;
+      return acc;
+    },
+    ['']
+  );
+};
+
+const splitDotPhrase = (phrases) => {
+  let within = 0;
+  return phrases.split(/(\(|\[\]|\)|\d\.\d|\.)/).reduce(
+    (acc, cv) => {
+      if (within === 0) {
+        if (cv && cv.match(/\d\.\d/)) {
+          //
+        } else if (cv === '.') {
+          acc.push('');
+          return acc;
+        }
+      }
+      if (cv === '(' || cv === '[') {
+        within += 1;
+      } else if (cv === ')' || cv === ']') {
+        within -= 1;
+      }
+      acc[acc.length - 1] += cv;
+      return acc;
+    },
+    ['']
+  );
+};
+
+const countHWithinBracket = (peakContent) => {
+  const bracketContent = peakContent && peakContent.match(/\((.*\d+[^C]*H.*)\)/);
+  if (!bracketContent) { return false; }
+
+  const simpleCount = bracketContent[1].match(/(^|[^\w])(\d+(\.\d+)?)\s*H\b/);
+  if (simpleCount) { return parseFloat(simpleCount[2], 10); }
+
+  return false;
+};
+
+const countCWithinBracket = (peakContent) => {
+  const bracketContent = peakContent && peakContent.match(/\((.*\d+[^C]*C.*)\)/);
+  if (!bracketContent) { return false; }
+
+  const simpleCount = bracketContent[1].match(/(^|[^\w])(\d+(\.\d+)?)\s*C/);
+  if (simpleCount) { return parseFloat(simpleCount[2], 10); }
+
+  const xCount = bracketContent[1].match(/(\d+(\.\d+)?)\s*(×|x)\s*./);
+  if (xCount) { return parseFloat(xCount[1], 10); }
+
+  return false;
+};
+
+const atomCountInNMRDescription = (nmrStr) => {
+  const phraseArr = splitDotPhrase(nmrStr);
+  const count = reduceByPeak(phraseArr[0]).reduce((acc, peak) => {
+    const hs = countHWithinBracket(peak);
+    if (hs) { return acc + hs; }
+    return acc;
+  }, 0);
+  const missed = countHWithinBracket(phraseArr[1]);
+  if (missed) { return parseFloat((missed + count).toFixed(5)); }
+
+  return parseFloat(count.toFixed(5));
+};
+
+const atomCountCInNMRDescription = (cNmrStr) => {
+  const m = cNmrStr.match(/\s*(=|:|δ)(.*)\S/);
+  if (!m) { return 0; }
+
+  const phraseArr = splitDotPhrase(m[2]);
+  const count = reduceByPeak(phraseArr[0]).reduce((acc, peak) => {
+    if (!peak.match(/\d/)) { return acc; }
+    const cwb = countCWithinBracket(peak);
+    if (cwb) { return acc + cwb; }
+    return acc + 1;
+  }, 0);
+  const missed = countCWithinBracket(phraseArr[1]);
+  if (missed) { return count + missed; }
+
+  return count;
+};
+
+
+const hNmrCount = (nmrStr) => {
+  if (typeof (nmrStr) !== 'string') {
+    return '';
+  }
+  return atomCountInNMRDescription(nmrStr);
+};
+
+const cNmrCount = (nmrStr) => {
+  if (typeof (nmrStr) !== 'string') {
+    return '';
+  }
+  return atomCountCInNMRDescription(nmrStr);
+};
+
+const hNmrCheckMsg = (formula, nmrStr) => {
+  if (typeof (formula) !== 'string' || typeof (nmrStr) !== 'string') {
+    return '';
+  }
+  const countInFormula = atomCountInFormula(formula, 'H');
+  const countInDesc = atomCountInNMRDescription(nmrStr);
+
+  if (countInFormula !== countInDesc) {
+    return ` count: ${countInDesc}/${countInFormula}`;
+  }
+  return '';
+};
+
+const cNmrCheckMsg = (formula, nmrStr) => {
+  if (typeof (formula) !== 'string' || typeof (nmrStr) !== 'string') {
+    return '';
+  }
+  const countInFormula = atomCountInFormula(formula, 'C');
+  const countInDesc = atomCountCInNMRDescription(nmrStr);
+  if (countInFormula !== countInDesc) {
+    return ` count: ${countInDesc}/${countInFormula}`;
+  }
+  return '';
+};
+
+const isEmwInMargin = (diff) => {
+  const margin = 1.0;
+  return diff <= margin
+    || Math.abs(diff - 1) <= margin
+    || Math.abs(diff - 23) <= margin
+    || Math.abs(diff - 39) <= margin;
+};
+
+const emwInStr = (emw, msStr) => {
+  const peaks = msStr.split(/,|:|;|=/).map((s) => {
+    const t = s.replace('found', '')
+      .replace(/[\(\[\{](.*?)[\)\]\}]/g, '')
+      .replace(/\s/g, '');
+    return t.match(/[a-zA-Z]/) ? 0 : parseFloat(t);
+  });
+
+  let detected = false;
+
+  peaks.forEach((p) => {
+    const diff = Math.abs(p - emw);
+    if (isEmwInMargin(diff)) detected = true;
+  });
+  return detected;
+};
+
+const msCheckMsg = (exactMolWeight, msStr) => {
+  if (typeof (exactMolWeight) !== 'number' || typeof (msStr) !== 'string') {
+    return '';
+  }
+
+  const detected = emwInStr(exactMolWeight, msStr);
+  return detected ? '' : ' exact weight not found';
+};
+
+const SameEleTypId = (orig, next) => {
+  if (orig && next && orig.type === next.type && orig.id === next.id) {
+    return true;
+  }
+  return false;
+};
+
+const UrlSilentNavigation = (element) => {
+  const { currentCollection, isSync } = UIStore.getState();
+  if (element) {
+    let elementString = `${element.type}`;
+    if (!isNaN(element.id)) elementString += `/${element.id}`;
+
+    const collectionUrl = `${currentCollection.id}/${elementString}`;
+    Aviator.navigate(
+      isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`,
+      { silent: true },
+    );
+  } else {
+    const cId = currentCollection.id;
+    Aviator.navigate(
+      isSync ? `/scollection/${cId}/` : `/collection/${cId}/`,
+      { silent: true },
+    );
+  }
+};
+
+const markdownChemicalFormular = (text) => {
+  text = text.replace(/(C|H|O|N|S)(\d+)/g, '$1<sub>$2</sub>');
+  return text;
+};
+
+const commonFormatPattern = [
+  {
+    pattern: '(,{0,1})( {0,1})(\\d+\\.){0,1}(\\d+) {0,1}H([^\\d\\w])',
+    replace: '$1 $3$4H$5'
+  },
+  {
+    pattern: ' CDC(l|L)3,',
+    replace: ' CDCl<sub>3</sub>,'
+  },
+  {
+    pattern: 'J {0,1}= {0,1}(\\d+)',
+    replace: '*J* = $1'
+  },
+  {
+    pattern: '(\\d+),(\\d+)',
+    replace: '$1.$2'
+  },
+  {
+    pattern: '\\) {0,1}, {0,1}',
+    replace: '), '
+  },
+  {
+    pattern: '\\) (\\d+)',
+    replace: '), $1'
+  },
+  {
+    pattern: '(\\d+) - (\\d+)',
+    replace: '$1–$2'
+  },
+  {
+    pattern: '(\\d+) ([\\u2013-\\u2015]) (\\d+)',
+    replace: '$1$2$3'
+  },
+];
+
+const sampleAnalysesFormatPattern = {
+  '_chmo:0000595': [
+    {
+      pattern: '(\\W|^)13 {0,1}C( |-)NMR',
+      replace: '$1<sup>13</sup>C NMR'
+    },
+    {
+      pattern: '<sup>13</sup>C-NMR',
+      replace: '<sup>13</sup>C NMR'
+    },
+    {
+      pattern: '(\\d+) C',
+      replace: '$1C'
+    },
+  ],
+  _13cnmr: [
+    {
+      pattern: '(\\W|^)13 {0,1}C( |-)NMR',
+      replace: '$1<sup>13</sup>C NMR'
+    },
+    {
+      pattern: '<sup>13</sup>C-NMR',
+      replace: '<sup>13</sup>C NMR'
+    },
+    {
+      pattern: '(\\d+) C',
+      replace: '$1C'
+    },
+  ],
+  '_chmo:0000593': [
+    {
+      pattern: '(\\W|^)1 {0,1}H( |-)NMR',
+      replace: '$1<sup>1</sup>H NMR'
+    },
+    {
+      pattern: '<sup>1</sup>H-NMR',
+      replace: '<sup>1</sup>H NMR'
+    },
+  ],
+  _1hnmr: [
+    {
+      pattern: '(\\W|^)1 {0,1}H( |-)NMR',
+      replace: '$1<sup>1</sup>H NMR'
+    },
+    {
+      pattern: '<sup>1</sup>H-NMR',
+      replace: '<sup>1</sup>H NMR'
+    },
+  ],
+  '_chmo:0001075': [
+    {
+      pattern: '(\\W|^)(C|H|O|N|S) (\\d{2})',
+      replace: '$1$2, $3'
+    },
+    {
+      pattern: '(\\d\\.\\d\\d) {0,1},',
+      replace: '$1;'
+    },
+  ],
+  _ea: [
+    {
+      pattern: '(\\W|^)(C|H|O|N|S) (\\d{2})',
+      replace: '$1$2, $3'
+    },
+    {
+      pattern: '(\\d\\.\\d\\d) {0,1},',
+      replace: '$1;'
+    },
+  ],
+  '_chmo:0000630': [
+    {
+      pattern: '(\\W|^)cm-1',
+      replace: '$1cm<sup>–1</sup>'
+    },
+    {
+      pattern: '(\\W|^)cm<sup>-1</sup>',
+      replace: '$1cm<sup>–1</sup>'
+    },
+  ],
+  _ir: [
+    {
+      pattern: '(\\W|^)cm-1',
+      replace: '$1cm<sup>–1</sup>'
+    },
+    {
+      pattern: '(\\W|^)cm<sup>-1</sup>',
+      replace: '$1cm<sup>–1</sup>'
+    },
+  ],
+  'chmo:0000470': [
+    {
+      pattern: '(\\W)m/z(\\W|$)',
+      replace: '$1*m/z*$2'
+    },
+    {
+      pattern: '(\\W)calc\\.(\\W|$)',
+      replace: '$1calcd$2'
+    },
+    {
+      pattern: '(\\W)calcd(\\W|$)',
+      replace: '$1Calcd$2'
+    },
+    {
+      pattern: '\\. HRMS(\\W)',
+      replace: '; HRMS$1'
+    },
+    {
+      pattern: ', found',
+      replace: '. Found'
+    },
+    {
+      pattern: 'HRMS \\(((C|H|O|N|S)(\\d{1,2}))+\\)',
+      replace: markdownChemicalFormular
+    },
+  ],
+  _mass: [
+    {
+      pattern: '(\\W)m/z(\\W|$)',
+      replace: '$1*m/z*$2'
+    },
+    {
+      pattern: '(\\W)calc\\.(\\W|$)',
+      replace: '$1calcd$2'
+    },
+    {
+      pattern: '(\\W)calcd(\\W|$)',
+      replace: '$1Calcd$2'
+    },
+    {
+      pattern: '\\. HRMS(\\W)',
+      replace: '; HRMS$1'
+    },
+    {
+      pattern: ', found',
+      replace: '. Found'
+    },
+    {
+      pattern: 'HRMS \\(((C|H|O|N|S)(\\d{1,2}))+\\)',
+      replace: markdownChemicalFormular
+    },
+  ]
+};
+
+const formatAnalysisContent = function autoFormatAnalysisContentByPattern(analysis) {
+  const content = _.cloneDeep(analysis.extended_metadata.content);
+  let kind = analysis.extended_metadata.kind || '';
+  kind = kind.split('|')[0] || kind;
+  const type = `_${kind.toLowerCase().replace(/ /g, '')}`;
+  let md = deltaToMarkdown(content);
+  let formatPattern = (sampleAnalysesFormatPattern[type] || []);
+  formatPattern = formatPattern.concat(commonFormatPattern);
+  formatPattern.forEach((patt) => {
+    md = searchAndReplace(md, patt.pattern, patt.replace);
+  });
+
+  return markdownToDelta(md);
+};
+
+const Alphabet = (input = 1) => {
+  const num = parseInt(input, 10);
+  const index = num >= 1 && num <= 26 ? num - 1 : 25;
+  const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  return alphabets[index];
+};
+
+const SampleCode = (index, materialGp) => {
+  switch (materialGp) {
+    case 'solvents':
+      return `S${index}`;
+    case 'purification_solvents':
+      return `PS${index}`;
+    case 'products':
+      return `P${index}`;
+    default:
+      return Alphabet(index);
+  }
+};
+
+const instrumentText = (analysis) => {
+  if (typeof analysis === 'undefined' || analysis == null ||
+    typeof analysis.children === 'undefined' || analysis.children == null || analysis.children.length === 0) {
+    return '';
+  }
+  let ttlIns = [];
+  if (analysis.children && analysis.children.length > 0) {
+    ttlIns = _.filter(analysis.children, o => o.extended_metadata &&
+      o.extended_metadata.instrument && o.extended_metadata.instrument.trim().length > 0);
+  }
+  return ` Instrument: ${ttlIns.length}/${analysis.children.length}`;
+};
+
+const getElementSegments = (elementName, tabs) => {
+  let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
+  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
+  let labels = segmentKlasses.filter(s => s.element_klass.name == elementName).map(s => s.label);
+  if (!MatrixCheck(currentUser.matrix, 'segment')) {
+    return tabs.filter((key) => !labels.includes(key));
+  }
+  return _.uniq(tabs.concat(labels));
+}
+
+// the requirements for file types as given
+const isFileTypePass = (analysisType, attachments) => {
+  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
+  const nmrType = ['jcamp', 'dx', 'jdx'];
+  let files = [];
+  switch (analysisType) {
+    case '1H NMR':
+    case chmoConversions.nmr_1h.termId:
+    case '13C NMR':
+    case chmoConversions.nmr_13c.termId:
+    case '15N NMR':
+    case 'NMR':
+    case 'IR':
+    case chmoConversions.ir.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    case 'EA':
+    case chmoConversions.ea.termId:
+    case 'X-Ray':
+    case 'Crystall-Structure':
+    case chmoConversions.crystal_structure.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    default:
+      break;
+  }
+  return true;
+};
+
+// at least one dataset has to be attached
+// in dataset: instrument has to be given
+const isDatasetPass = (analysis) => {
+  const dataset = analysis.children;
+  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
+  if (attachments.length < 1) return false;
+  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
+  if (instruments.length < 1) return false;
+  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
+  if (files.length < 1) return false;
+  return true;
+};
+
+const isNmrPass = (analysis, sample) => {
+  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
+  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  }
+  return true;
+};
+
+export {
+  rfValueFormat,
+  hNmrCheckMsg,
+  cNmrCheckMsg,
+  hNmrCount,
+  cNmrCount,
+  msCheckMsg,
+  SameEleTypId,
+  UrlSilentNavigation,
+  sampleAnalysesFormatPattern,
+  commonFormatPattern,
+  Alphabet,
+  SampleCode,
+  formatAnalysisContent,
+  atomCountInFormula,
+  atomCountInNMRDescription,
+  atomCountCInNMRDescription,
+  emwInStr,
+  instrumentText,
+  getElementSegments,
+  isNmrPass,
+  isDatasetPass,
+};
diff --git a/app/packs/src/components/utils/FetcherHelper.js b/app/packs/src/components/utils/FetcherHelper.js
new file mode 100644
index 000000000..895099497
--- /dev/null
+++ b/app/packs/src/components/utils/FetcherHelper.js
@@ -0,0 +1,38 @@
+import base64 from 'base-64';
+
+const getFileName = (response) => {
+  const disposition = response.headers.get('Content-Disposition');
+
+  if (disposition && disposition.indexOf('attachment') !== -1) {
+    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+    const matches = filenameRegex.exec(disposition);
+    if (matches != null && matches[1]) {
+      return matches[1].replace(/['"]/g, '');
+    }
+  }
+}
+
+const downloadBlob = (file_name, blob) => {
+  const url = window.URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.style = 'display: none';
+  a.href = url;
+  a.download = file_name;
+
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+};
+
+const parseBase64ToArrayBuffer = (encodedData) => {
+  const decodedData = base64.decode(encodedData);
+  const bufferLength = decodedData.length;
+  let bytesArray = new Uint8Array(bufferLength);
+  for (let i = 0; i < bufferLength; i++) {
+    bytesArray[i] = decodedData.charCodeAt(i);
+  }
+  return bytesArray.buffer;
+};
+
+export { getFileName, downloadBlob, parseBase64ToArrayBuffer };
diff --git a/app/packs/src/components/utils/Functions.js b/app/packs/src/components/utils/Functions.js
new file mode 100644
index 000000000..21bf45ca5
--- /dev/null
+++ b/app/packs/src/components/utils/Functions.js
@@ -0,0 +1,30 @@
+const Functions = {
+  getMetaContent(name) {
+    const metas = document.getElementsByTagName('meta');
+
+    for (var i = 0; i<metas.length; i++) {
+      if (metas[i].getAttribute("name") == name) {
+        return metas[i].getAttribute("content");
+      }
+    }
+
+    return '';
+  },
+
+  downloadFile(file) {
+    const { contents, name } = file;
+    const link = document.createElement('a');
+    link.download = name;
+    link.href = contents;
+    const event = new window.MouseEvent('click', {
+      'view': window,
+      'bubbles': true,
+      'cancelable': true
+    });
+    link.dispatchEvent(event);
+  },
+
+
+};
+
+module.exports = Functions;
diff --git a/app/packs/src/components/utils/MathUtils.js b/app/packs/src/components/utils/MathUtils.js
new file mode 100644
index 000000000..6cbbbc875
--- /dev/null
+++ b/app/packs/src/components/utils/MathUtils.js
@@ -0,0 +1,64 @@
+const fixDigit = (input, precision) => {
+  const output = input || 0.0;
+  return output.toFixed(precision);
+};
+
+const precLimit = (precision) => {
+  if (precision > 20) {
+    return 20;
+  } else if (precision < 0) {
+    return 0;
+  }
+  return precision;
+};
+
+const largerThanOne = (num, headLen, tailLen, precision) => {
+  if ((precision - headLen) < 0) {
+    return num.toFixed(0);
+  }
+  return num.toFixed(precLimit(precision - headLen));
+};
+
+const smallerThanOne = (num, tailLen, precision) => {
+  if (num === 0.0) {
+    return num.toFixed(precLimit(precision - 1));
+  }
+  return num.toFixed(precLimit(precision + tailLen));
+};
+
+const validDigit = (input, precision) => {
+  const num = input || 0.0;
+  const numStr = num.toFixed(10).toString().split('.');
+  const headLen = numStr[0].replace(/^[0]+/g, '').length;
+  const tailLen = numStr[1].replace(/[1-9]+\d*/g, '').length;
+  if (num >= 1.0) {
+    return largerThanOne(num, headLen, tailLen, precision);
+  }
+  return smallerThanOne(num, tailLen, precision);
+};
+
+const correctPrefix = (input, precision) => {
+  if (input === 0.0) { return false; }
+  if (input >= 1.0) { return `${validDigit(input, precision)} `; }
+  if (input >= 0.001) { return `${validDigit(input * 1000, precision)} m`; }
+  return `${validDigit(input * 1000000, precision)} \u03BC`;
+};
+
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0 || bytes == null) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / (k ** i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+export {
+  fixDigit,
+  validDigit,
+  correctPrefix,
+  formatBytes,
+};
diff --git a/app/packs/src/components/utils/PermissionConst.js b/app/packs/src/components/utils/PermissionConst.js
new file mode 100644
index 000000000..dc00b946b
--- /dev/null
+++ b/app/packs/src/components/utils/PermissionConst.js
@@ -0,0 +1,8 @@
+export const PermissionConst = {
+    Read: 0,
+    Write: 1,
+    Share: 2,
+    Delete: 3,
+    ImportElements: 4,
+    PassOwnerShip: 5
+}
\ No newline at end of file
diff --git a/app/packs/src/components/utils/ReportHelper.js b/app/packs/src/components/utils/ReportHelper.js
new file mode 100644
index 000000000..69ffe383c
--- /dev/null
+++ b/app/packs/src/components/utils/ReportHelper.js
@@ -0,0 +1,106 @@
+const keepObjsAsIds = (oriSelectedObjs, newElems, ids, type, defaultTags) => {
+  const allObjs = oriSelectedObjs.concat(newElems)
+    .filter(obj => obj != null) || [];
+  const allObjIds = allObjs.map(obj => `${obj.id}_${obj.type}`);
+  return allObjs.map((obj, pos) => {
+    const identifier = `${obj.id}_${obj.type}`;
+    if (allObjIds.indexOf(identifier) !== pos) { // rm duplicate
+      return null;
+    }
+    if (obj.type !== type) {
+      return obj;
+    }
+    if (obj.type === type && ids.indexOf(obj.id) !== -1) {
+      return obj;
+    }
+    if (defaultTags[`${obj.type}Ids`].indexOf(obj.id) !== -1) {
+      return obj;
+    }
+    return null;
+  }).filter(obj => obj != null) || [];
+};
+
+const UpdateSelectedObjs = (newTags, newObjs, defaultTags, oriObjs = []) => {
+  const { sampleIds, reactionIds } = newTags;
+  const { samples, reactions } = newObjs;
+  let selectedObjs = keepObjsAsIds(oriObjs,
+    samples, sampleIds, 'sample', defaultTags);
+  selectedObjs = keepObjsAsIds(selectedObjs,
+    reactions, reactionIds, 'reaction', defaultTags);
+  return selectedObjs;
+};
+
+const GetTypeIds = (objs, type) => {
+  return objs.map((obj) => {
+    if (obj.type === type) {
+      return obj.id;
+    }
+    return null;
+  }).filter(r => r !== null);
+};
+
+const UserSerial = (molecule, molSerials = []) => {
+  let output = 'xx';
+  molSerials.forEach((ms) => {
+    if (ms.mol.id === molecule.id && ms.value) output = ms.value;
+  });
+  return output;
+};
+
+const OrderPreviewObjs = (oriPreviewObjs, selectedObjs, newPreviewObjs) => {
+  const previewObjs = [...oriPreviewObjs, ...newPreviewObjs];
+  return (
+    selectedObjs.map(o => (
+      previewObjs.map(
+        p => ((p.id === o.id && p.type === o.type) ? p : null)
+      ).filter(r => r !== null)[0]
+    )).filter(r => r !== null)
+  );
+};
+
+const LoadPreviewIds = (reportState) => {
+  const { selectedObjTags, defaultObjTags, previewObjs } = reportState;
+  const sids = [...selectedObjTags.sampleIds, ...defaultObjTags.sampleIds];
+  const rids = [...selectedObjTags.reactionIds, ...defaultObjTags.reactionIds];
+  let psids = [];
+  let prids = [];
+  previewObjs.forEach((o) => {
+    if (o.type === 'sample') {
+      psids = [...psids, o.id];
+    } else {
+      prids = [...prids, o.id];
+    }
+  });
+  const lsids = sids.filter(x => !psids.includes(x));
+  const lrids = rids.filter(x => !prids.includes(x));
+  const targets = {
+    sample: { checkedIds: lsids },
+    reaction: { checkedIds: lrids },
+  };
+  return targets;
+};
+
+const CapitalizeFirstLetter = (str) => {
+  if (str && str.length > 0) {
+    let charIdxs = [];
+    [...str].forEach((t, idx) => {
+      if (/^[a-zA-Z]$/.test(t)) {
+        charIdxs = [...charIdxs, idx];
+      }
+    });
+    const charIdx = charIdxs[0];
+    if (charIdx >= 0) {
+      return (
+        str.slice(0, charIdx) +
+        str.charAt(charIdx).toUpperCase() +
+        str.slice(charIdx + 1)
+      );
+    }
+  }
+  return str
+};
+
+export {
+  UpdateSelectedObjs, GetTypeIds, UserSerial, OrderPreviewObjs, LoadPreviewIds,
+  CapitalizeFirstLetter,
+};
diff --git a/app/packs/src/components/utils/SpectraHelper.js b/app/packs/src/components/utils/SpectraHelper.js
new file mode 100644
index 000000000..3b3aa1cb9
--- /dev/null
+++ b/app/packs/src/components/utils/SpectraHelper.js
@@ -0,0 +1,160 @@
+const acceptables = ['jdx', 'dx', 'jcamp', 'mzml', 'mzxml', 'raw', 'cdf', 'zip'];
+
+const JcampIds = (container) => {
+  let origJcampIds = [];
+  let geneJcampIds = [];
+  let editedJcampsIds = [];
+
+  container.children.forEach((dt) => {
+    dt.attachments.forEach((att) => {
+      try {
+        const fns = att.filename.split('.');
+        const ext = fns[fns.length - 1];
+        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
+        const typ = fns.length > 1 ? fns[fns.length - 2] : false;
+        const notOrig = typ === 'peak' || typ === 'edit';
+        if (isJcamp) {
+          if (notOrig) {
+            geneJcampIds = [...geneJcampIds, att.id];
+            editedJcampsIds = [...editedJcampsIds, att.id];
+          } else {
+            origJcampIds = [...origJcampIds, att.id];
+          }
+        }
+      } catch (err) {
+        // just ignore
+      }
+    });
+  });
+  return { orig: origJcampIds, gene: geneJcampIds, edited: editedJcampsIds };
+};
+
+const extractJcampFiles = (container) => {
+  let files = [];
+  container.children.forEach((dt) => {
+    dt.attachments.forEach((att) => {
+      try {
+        const fns = att.filename.split('.');
+        const ext = fns[fns.length - 1];
+        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
+        const isApp = [
+          'idle', 'queueing', 'done',
+          'backup', 'image',
+          'failure', 'non_jcamp',
+        ].indexOf(att.aasm_state) < 0;
+        if (isJcamp && isApp) {
+          const file = Object.assign({}, att, {
+            idDt: dt.id,
+          });
+          files = [...files, file];
+        }
+      } catch (err) {
+        // just ignore
+      }
+    });
+  });
+  return files;
+};
+
+const extractJcampWithFailedFiles = (container) => {
+  let files = [];
+  container.children.forEach((dt) => {
+    dt.attachments.forEach((att) => {
+      try {
+        const fns = att.filename.split('.');
+        const ext = fns[fns.length - 1];
+        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
+        const isApp = [
+          'idle', 'queueing', 'done',
+          'backup', 'image','non_jcamp',
+        ].indexOf(att.aasm_state) < 0;
+        if (isJcamp && isApp) {
+          const file = Object.assign({}, att, {
+            idDt: dt.id,
+          });
+          files = [...files, file];
+        }
+      } catch (err) {
+        // just ignore
+      }
+    });
+  });
+  return files;
+};
+
+const extractNMRiumFiles = (container) => {
+  let files = [];
+  container.children.forEach((dt) => {
+    dt.attachments.forEach((att) => {
+      try {
+        const fns = att.filename.split('.');
+        const ext = fns[fns.length - 1];
+        const isNMRium = ext.toLowerCase() === 'nmrium';
+
+        if (isNMRium) {
+          const file = Object.assign({}, att, {
+            idDt: dt.id,
+          });
+          files = [...files, file];
+        }
+      } catch (err) {
+        // just ignore
+      }
+    });
+  });
+  return files;
+};
+
+const extractAnalysesId = (sample, container) => {
+  let idAe = null;
+  sample && sample.analysesContainers().forEach((ae) => {
+    ae.children.forEach((ai) => {
+      if (container.id === ai.id) {
+        idAe = ae.id;
+      }
+    });
+  });
+  return idAe;
+};
+
+const BuildSpcInfos = (sample, container) => {
+  if (!sample || !container) return [];
+  const files = extractJcampFiles(container);
+  if (files.length < 1) return [];
+  const idAe = extractAnalysesId(sample, container);
+  return files.map(file => (
+    {
+      value: null,
+      label: file.filename,
+      title: sample.short_label,
+      idSp: sample.id,
+      idAe,
+      idAi: container.id,
+      idDt: file.idDt,
+      idx: file.id,
+    }
+  ));
+};
+
+const BuildSpcInfosForNMRDisplayer = (sample, container) => {
+  if (!sample || !container) return [];
+  let files = extractJcampWithFailedFiles(container);
+  const nmriumFiles = extractNMRiumFiles(container);
+  files.push(...nmriumFiles);
+  if (files.length < 1) return [];
+  const idAe = extractAnalysesId(sample, container);
+  return files.map(file => (
+    {
+      value: null,
+      label: file.filename,
+      title: sample.short_label,
+      idSp: sample.id,
+      idAe,
+      idAi: container.id,
+      idDt: file.idDt,
+      idx: file.id,
+    }
+  ));
+};
+
+export { BuildSpcInfos, BuildSpcInfosForNMRDisplayer, JcampIds }; // eslint-disable-line
diff --git a/app/packs/src/components/utils/deltaMarkdownConverter.js b/app/packs/src/components/utils/deltaMarkdownConverter.js
new file mode 100644
index 000000000..b62914aa7
--- /dev/null
+++ b/app/packs/src/components/utils/deltaMarkdownConverter.js
@@ -0,0 +1,226 @@
+/*eslint-disable no-param-reassign*/
+
+import _ from 'lodash';
+import Delta from 'quill-delta';
+import commonmark from 'commonmark';
+
+const dtConverter = {
+  inline: {
+    bold: ['**', '**'],
+    italic: ['*', '*'],
+    underline: ['<u>', '</u>']
+  },
+  script: {
+    super: ['<sup>', '</sup>'],
+    sub: ['<sub>', '</sub>']
+  },
+  block: {
+    header: {
+      1() { return '# '; },
+      2() { return '## '; },
+      3() { return '### '; },
+      4() { return '#### '; },
+      5() { return '##### '; },
+      6() { return '###### '; }
+    },
+    list: {
+      bullet() { return '* '; },
+      ordered(count) {
+        return `${count}. `;
+      }
+    }
+  }
+};
+
+const deltaToMarkdown = (delta) => {
+  let mdString = '';
+
+  _.cloneDeep(delta).ops.forEach((op) => {
+    let text = op.insert;
+
+    Object.keys(op.attributes || {}).sort().forEach((attr) => {
+      const attrVal = op.attributes[attr];
+      if (dtConverter.inline[attr]) {
+        const open = dtConverter.inline[attr][0];
+        const close = dtConverter.inline[attr][1];
+        const replaceText = `$1${open}$2${close}$3`;
+        text = text.replace(/(\s*)(.*)(\s*)/, replaceText);
+      } else if (dtConverter.script[attrVal]) {
+        const open = dtConverter.script[attrVal][0];
+        const close = dtConverter.script[attrVal][1];
+        text = `${open}${text}${close}`;
+      } else if (dtConverter.block[attr]) {
+        let groupCount;
+        if (attrVal === 'ordered') {
+          const reg = /((?=\d+\. )(?:[^\n]*\n[^\n]*$)|(?!\d+\. )[^\n]*$)/g;
+          const lastLine = mdString.match(reg)[0];
+          const lastOrder = lastLine.match(/^(\d+)\. .*\n/) || 0;
+          if (lastOrder) {
+            groupCount = parseInt(lastOrder[1], 10);
+            groupCount += 1;
+          } else {
+            groupCount = 1;
+          }
+        }
+        const md = dtConverter.block[attr][attrVal](groupCount);
+        const regex = /(^|\n)([^\n]*)$/g;
+        const repText = `$1${md}$2`;
+        mdString = mdString.replace(regex, repText);
+      }
+    });
+
+    mdString += text;
+  });
+
+  // \n is considered as a soft-break in markdown, use \n\n to indicate new line
+  mdString = mdString.replace(/\n/g, '\n\n');
+  // However in list group, only \n is used
+  mdString = mdString.replace(/(\d+\. [^\n]*)\n{2}(?=\d+\. )/g, '$1\n');
+  mdString = mdString.replace(/(\* [^\n]*)\n{2}(?=\* )/g, '$1\n');
+
+  return mdString;
+};
+
+const changeAttribute = (attributes, event, attribute, value) => {
+  if (event.entering) {
+    attributes[attribute] = value;
+  } else {
+    attributes = _.unset(attributes, attribute);
+  }
+};
+
+const applyAttribute = (node, event, attributes, attribute) => {
+  if (typeof attribute === 'string') {
+    changeAttribute(attributes, event, attribute, true);
+  } else if (typeof attribute === 'function') {
+    attribute(node, event, attributes);
+  }
+};
+
+const mdConverter = [
+  { filter: 'emph', attribute: 'italic' },
+  { filter: 'strong', attribute: 'bold' },
+  {
+    filter: 'html_inline',
+    makeDelta: (event, attributes) => {
+      const { node } = event;
+      const tag = (node.literal.match(/<(\/)?([^>/]*)>/g) || [])[0];
+
+      switch (tag) {
+        case '<u>':
+          changeAttribute(attributes, event, 'underline', true);
+          break;
+        case '<sub>':
+          changeAttribute(attributes, event, 'script', 'sub');
+          break;
+        case '<sup>':
+          changeAttribute(attributes, event, 'script', 'super');
+          break;
+        case '</u>':
+          attributes = _.unset(attributes, 'underline');
+          break;
+        case '</sub>':
+          attributes = _.unset(attributes, 'script');
+          break;
+        case '</sup>':
+          attributes = _.unset(attributes, 'script');
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  {
+    filter: 'text',
+    makeDelta: (event, attributes) => {
+      if (_.isEmpty(attributes)) {
+        return { insert: event.node.literal };
+      }
+      return { insert: event.node.literal, attributes: { ...attributes } };
+    }
+  },
+  {
+    filter: 'softbreak',
+    makeDelta: (event, attributes) => {
+      if (_.isEmpty(attributes)) {
+        return { insert: ' ' };
+      }
+      return { insert: ' ', attributes: { ...attributes } };
+    }
+  },
+  // block
+  {
+    filter: 'heading',
+    lineAttribute: true,
+    makeDelta: (event, attributes) => {
+      if (event.entering) {
+        return null;
+      }
+      return {
+        insert: '\n',
+        attributes: { ...attributes, header: event.node.level }
+      };
+    }
+  },
+  {
+    filter: 'list',
+    lineAttribute: true,
+    attribute: (node, event, attributes) => {
+      changeAttribute(attributes, event, 'list', node.listType);
+    }
+  },
+  {
+    filter: 'paragraph',
+    lineAttribute: true,
+    makeDelta: (event, attributes) => {
+      if (event.entering) {
+        return null;
+      }
+
+      if (_.isEmpty(attributes)) {
+        return { insert: '\n' };
+      }
+      return { insert: '\n', attributes: { ...attributes } };
+    }
+  },
+];
+
+const markdownToDelta = (md) => {
+  const parsed = new commonmark.Parser().parse(md);
+  const walker = parsed.walker();
+  let event;
+  const deltas = [];
+  const attributes = {};
+  const lineAttributes = {};
+
+  event = walker.next();
+  while (event !== null) {
+    const { node } = event;
+    const mdConv = mdConverter.filter(x => x.filter === node.type);
+    for (let i = 0; i < mdConv.length; i += 1) {
+      const converter = mdConv[i];
+      const attr = converter.lineAttribute ? lineAttributes : attributes;
+      applyAttribute(node, event, attr, converter.attribute);
+      if (converter.makeDelta) {
+        const delta = converter.makeDelta(event, attr);
+        if (delta) deltas.push(delta);
+      }
+    }
+    event = walker.next();
+  }
+
+  const endNewLine = deltas[deltas.length - 1].insert.indexOf('\n') === -1;
+  if (_.isEmpty(deltas) || endNewLine) {
+    deltas.push({ insert: '\n' });
+  }
+  const delta = new Delta().compose(new Delta(deltas));
+
+  return delta;
+};
+
+export {
+  deltaToMarkdown,
+  markdownToDelta
+};
+
+/* eslint-enable no-param-reassign */
diff --git a/app/packs/src/components/utils/imageHelper.js b/app/packs/src/components/utils/imageHelper.js
new file mode 100644
index 000000000..1c486d795
--- /dev/null
+++ b/app/packs/src/components/utils/imageHelper.js
@@ -0,0 +1,28 @@
+const previewContainerImage = (
+  container,
+  noAttSvg = '/images/wild_card/no_attachment.svg',
+  noAvaSvg = '/images/wild_card/not_available.svg'
+) => {
+  const rawImg = (container.preview_img || {}).preview;
+  switch (rawImg) {
+    case null:
+    case undefined:
+      return noAttSvg;
+    case 'not available':
+      return noAvaSvg;
+    default:
+      return `data:image/png;base64,${rawImg}`;
+  }
+};
+
+const previewAttachmentImage = (
+  attachment,
+  noAvaSvg = '/images/wild_card/not_available.svg'
+) => {
+  if (attachment.thumb) {
+    return `/images/thumbnail/${attachment.identifier}`;
+  }
+  return noAvaSvg;
+};
+
+export { previewContainerImage, previewAttachmentImage };
diff --git a/app/packs/src/components/utils/markdownUtils.js b/app/packs/src/components/utils/markdownUtils.js
new file mode 100644
index 000000000..b23f0532f
--- /dev/null
+++ b/app/packs/src/components/utils/markdownUtils.js
@@ -0,0 +1,18 @@
+const searchAndReplace = (md, pattern, regexReplace) => {
+  const regexMatch = new RegExp(pattern, 'g');
+
+  const match = md.match(regexMatch);
+  if (typeof regexReplace === 'function' && match != null) {
+    const funcOutput = regexReplace(match[0]);
+    md = md.replace(match, funcOutput);
+  } else {
+    md = md.replace(regexMatch, regexReplace);
+  }
+
+  return md;
+};
+
+export {
+  searchAndReplace,
+};
+
diff --git a/app/packs/src/components/utils/metricPrefix.js b/app/packs/src/components/utils/metricPrefix.js
new file mode 100644
index 000000000..e84a912fb
--- /dev/null
+++ b/app/packs/src/components/utils/metricPrefix.js
@@ -0,0 +1,21 @@
+const metPrefSymbols = {
+  u: '\u03BC', // micro
+  m: 'm',      // milli
+  c: 'c',      // centi
+  d: 'd',      // deci
+  n: '',       // none
+  k: 'k'       // kilo
+};
+
+const metPref = {
+  u:    0.000001,
+  m:    0.001,
+  c:    0.01,
+  d:     0.1,
+  n:     1.0,
+  k:  1000.0,
+};
+
+const metPreConv = (value, fromMP, toMP) => (metPref[fromMP] / metPref[toMP]) * value;
+
+export { metPreConv, metPrefSymbols };
diff --git a/app/packs/src/components/utils/quillFormat.js b/app/packs/src/components/utils/quillFormat.js
new file mode 100644
index 000000000..b1f1acd50
--- /dev/null
+++ b/app/packs/src/components/utils/quillFormat.js
@@ -0,0 +1,83 @@
+import _ from 'lodash';
+
+const contentToText = (content) => {
+  if (typeof (content) === 'undefined' || !content ||
+    typeof (content.ops) === 'undefined' || !content.ops) {
+    return '';
+  }
+  return (content.ops || []).reduce((txt, operation) => {
+    if (typeof operation.insert !== 'string') { return txt + ' ' };
+    return txt + operation.insert;
+  }, '');
+};
+
+const keepSupSub = (value) => {
+  const content = [];
+  value.ops.forEach((op) => {
+    if (typeof op.insert === 'string' && op.insert !== '\n') {
+      if (op.attributes
+            && op.attributes.script
+            && (op.attributes.script === 'super'
+                || op.attributes.script === 'sub')) {
+        content.push({
+          insert: op.insert,
+          attributes: { script: op.attributes.script }
+        });
+      } else {
+        content.push({ insert: op.insert });
+      }
+    }
+  });
+  content.filter(op => op).push({ insert: '\n' });
+  // NB: what is this for?
+  // if (content.length === 1) {
+  //   content.unshift({ insert: '-' });
+  // }
+  return content;
+};
+
+const rmRedundantSpaceBreak = (target) => {
+  return target.replace(/\n/g, '').replace(/\s\s+/g, ' ');
+};
+
+const rmOpsRedundantSpaceBreak = (ops) => {
+  const clearOps = ops.map((op) => {
+    op.insert = rmRedundantSpaceBreak(op.insert);
+    return op;
+  });
+  return clearOps;
+};
+
+const rmDeltaRedundantSpaceBreak = (delta) => {
+  const clearOps = rmOpsRedundantSpaceBreak(delta.ops);
+  return { ops: clearOps };
+};
+
+const frontBreak = (content) => {
+  const res = [{ insert: '\n' }, ...content];
+  return res;
+};
+
+const mapValueToGroupRegex = (content, matchedGroup) => {
+  let newContent = _.cloneDeep(content);
+  matchedGroup.forEach((m, idx) => {
+    newContent = newContent.map((d) => {
+      const patt = `#{${idx + 1}}`;
+      const insertString = d.insert;
+      const dd = { ...d };
+      dd.insert = insertString.replace(patt, m || '');
+      return dd;
+    });
+  });
+
+  return newContent;
+};
+
+export {
+  contentToText,
+  keepSupSub,
+  rmDeltaRedundantSpaceBreak,
+  rmOpsRedundantSpaceBreak,
+  rmRedundantSpaceBreak,
+  frontBreak,
+};
diff --git a/app/packs/src/components/utils/quillToolbarSymbol.js b/app/packs/src/components/utils/quillToolbarSymbol.js
new file mode 100644
index 000000000..432e6f87e
--- /dev/null
+++ b/app/packs/src/components/utils/quillToolbarSymbol.js
@@ -0,0 +1,682 @@
+import React from 'react';
+
+const minusRender = name => (
+  <span key={`${name}_key`} id={`${name}_id`} style={{ marginRight: '10px', cursor: 'pointer' }}>
+    <i className="fa fa-minus" />
+  </span>
+);
+
+const reactionToolbarSymbol = [
+  {
+    name: 'ndash',
+    ops: [
+      { insert: '–' },
+    ],
+    render: minusRender,
+  },
+  {
+    name: 'water-free',
+    ops: [
+      { insert: 'The reaction has been conducted in dry glass ware under inert atmosphere.' },
+    ],
+  },
+  {
+    name: 'resin-solvent',
+    ops: [
+      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was swollen in xx mL of SOLVENT for xx min at room temperature.' },
+    ],
+  },
+  {
+    name: 'resin-solvent-reagent',
+    ops: [
+      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was filled into a 10 mL crimp cap vial and was swollen in xx mL of SOLVENT. After xx min, xxx.x mg of REAGENT (XX.X mmol, XX.X equiv.) and XX.X mg of REAGENT (XX.X mg, XX.X mmol, X.XX equiv.) were added. The reaction mixture was shaken at XX °C for XX h.' },
+    ],
+  },
+  {
+    name: 'hand-stop',
+    ops: [
+      { insert: 'After complete conversion of the starting material, the reaction was quenched ' },
+      {
+        insert: 'via',
+        attributes: { italic: true },
+      },
+      { insert: ' careful addition of saturated NaHCO' },
+      {
+        insert: '3',
+        attributes: { script: 'sub' },
+      },
+      { insert: '-solution.' },
+    ],
+  },
+  {
+    name: 'reaction-procedure',
+    ops: [
+      { insert: 'The reaction mixture was poured into a glass funnel with filter paper and the polymer beads were washed XX times according to the following procedure: (1) SOLVENT [x repetitions] (2)  SOLVENT [x repetitions] (3)  SOLVENT [x repetitions] (4)  SOLVENT [x repetitions] (5)  SOLVENT [x repetitions].' },
+    ],
+  },
+  {
+    name: 'gpx-a',
+    ops: [
+      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
+    ],
+  },
+  {
+    name: 'gpx-b',
+    ops: [
+      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
+    ],
+  },
+  {
+    name: 'washed-nahco3',
+    ops: [
+      { insert: 'The reaction mixture was poured into a separation funnel and the organic layer was washed successively with xx mL of NaHCO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '3',
+      },
+      { insert: '-solution, xx mL of brine and xx mL of water. The aqueous layers were recombined and reextracted with ethyl acetate.\nThe organic layers were collected and were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  {
+    name: 'acidified-hcl',
+    ops: [
+      { insert: 'The reaction mixture was poured into a separation funnel and was acidified by the addition of 1 M HCl. The aqueous layer was collected and adjusted to pH 8-9 by addition of saturated NaHCO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '3',
+      },
+      { insert: '-solution. xx mL of SOLVENT were added and the aqueous phase was extracted three times. After washing with brine and water, the organic layers were collected and were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  {
+    name: 'tlc-control',
+    ops: [
+      { insert: 'The progress of the reaction was observed via TLC control (cyclohexane:ethyl acetate; xx:xx; R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX).' },
+    ],
+  },
+  {
+    name: 'dried',
+    ops: [
+      { insert: 'The combined organic layers were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  {
+    name: 'isolated',
+    ops: [
+      { insert: 'The target compound was isolated by filtering of the resulting mixture through a glass funnel and was washed AMOUNT times with SOLVENT.' },
+    ],
+  },
+  {
+    name: 'residue-purified',
+    ops: [
+      { insert: 'The crude residue was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+  {
+    name: 'residue-adsorbed',
+    ops: [
+      { insert: 'The crude residue was adsorbed on a small amount of silica gel/Celite and was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+  {
+    name: 'residue-dissolved',
+    ops: [
+      { insert: 'The crude residue was dissolved in a small amount of SOLVENT and was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless STATE in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+];
+
+const ops1HHead = (freqStr = '', solvent = '') => (
+  [
+    { attributes: { script: 'super' }, insert: '1' },
+    { insert: `H NMR (${freqStr}${solvent}ppm) δ = ` },
+  ]
+);
+
+const ops13CHead = (freqStr = '', solvent = '') => (
+  [
+    { attributes: { script: 'super' }, insert: '13' },
+    { insert: `C NMR (${freqStr}${solvent}ppm) δ = ` },
+  ]
+);
+
+const ops19FHead = (freqStr = '', solvent = '') => (
+  [
+    { attributes: { script: 'super' }, insert: '19' },
+    { insert: `F NMR (${freqStr}${solvent}ppm) δ = ` },
+  ]
+);
+
+const opsCommonTail = () => (
+  [
+    { insert: '. ' },
+  ]
+);
+
+const opsIRHead = () => (
+  [
+    { insert: 'IR (ATR, ṽ) = ' },
+  ]
+);
+
+const opsIRTail = () => (
+  [
+    { insert: ' cm' },
+    { attributes: { script: 'super' }, insert: '–1' },
+    { insert: '. ' },
+  ]
+);
+
+const opsRAMANHead = () => (
+  [
+    { insert: 'RAMAN (ṽ) = ' },
+  ]
+);
+
+const opsRAMANTail = () => (
+  [
+    { insert: ' cm' },
+    { attributes: { script: 'super' }, insert: '–1' },
+    { insert: '. ' },
+  ]
+);
+
+const opsUVVISHead = () => (
+  [
+    { insert: 'UV-VIS (absorption, solvent), λmax = ' },
+  ]
+);
+
+const opsHPLCUVVISHead = () => (
+  [
+    { insert: 'HPLC UV/VIS (λmax) = ' },
+  ]
+);
+
+const opsUVVISTail = () => (
+  [
+    { insert: ' nm' },
+    { insert: '. ' },
+  ]
+);
+
+const opsHPLCUVVISTail = () => (
+  [
+    { insert: ' ' },
+    { insert: '. ' },
+  ]
+);
+
+const sampleAnalysesContentSymbol = [
+  {
+    name: 'ndash',
+    render: minusRender,
+    ops: [
+      { insert: '–' },
+    ],
+  },
+  {
+    name: 'h-nmr',
+    ops: ops1HHead([]),
+  },
+  {
+    name: 'c-nmr',
+    ops: ops13CHead([]),
+  },
+  {
+    name: 'ir',
+    ops: [...opsIRHead(), ...opsIRTail()],
+  },
+  {
+    name: 'uv',
+    ops: [
+      { insert: 'UV-VIS (CH' },
+      { attributes: { script: 'sub' }, insert: '2' },
+      { insert: 'Cl' },
+      { attributes: { script: 'sub' }, insert: '2' },
+      { insert: '), λ' },
+      { attributes: { script: 'sub' }, insert: 'max' },
+      { insert: '(log ε) = .' },
+    ],
+  },
+  {
+    name: 'ea',
+    ops: [
+      { insert: 'EA (): Calcd C ; H ; N ; O . Found C ; H ; N ; O .' },
+    ],
+  },
+];
+
+const opsMSHead = (solventOps = []) => ( // eslint-disable-line
+  []
+);
+
+const opsMSTail = () => (
+  []
+);
+
+const SpectraOps = {
+  PLAIN: { head: [], tail: [] },
+  '1H': { head: ops1HHead, tail: opsCommonTail },
+  '13C': { head: ops13CHead, tail: opsCommonTail },
+  '19F': { head: ops19FHead, tail: opsCommonTail },
+  IR: { head: opsIRHead, tail: opsIRTail },
+  RAMAN: { head: opsRAMANHead, tail: opsRAMANTail },
+  'UV/VIS': { head: opsUVVISHead, tail: opsUVVISTail },
+  'HPLC UV/VIS': { head: opsHPLCUVVISHead, tail: opsHPLCUVVISTail },
+  MS: { head: opsMSHead, tail: opsMSTail },
+};
+
+const reactionAnalysesMacros = {
+  ndash: {
+    ops: [
+      { insert: '–' },
+    ],
+  },
+  'water-free': {
+    ops: [
+      { insert: 'The reaction has been conducted in dry glass ware under inert atmosphere.' },
+    ],
+  },
+  'resin-solvent': {
+    ops: [
+      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was swollen in xx mL of SOLVENT for xx min at room temperature.' },
+    ],
+  },
+  'resin-solvent-reagent': {
+    ops: [
+      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was filled into a 10 mL crimp cap vial and was swollen in xx mL of SOLVENT. After xx min, xxx.x mg of REAGENT (XX.X mmol, XX.X equiv.) and XX.X mg of REAGENT (XX.X mg, XX.X mmol, X.XX equiv.) were added. The reaction mixture was shaken at XX °C for XX h.' },
+    ],
+  },
+  'hand-stop': {
+    ops: [
+      { insert: 'After complete conversion of the starting material, the reaction was quenched ' },
+      {
+        insert: 'via',
+        attributes: { italic: true },
+      },
+      { insert: ' careful addition of saturated NaHCO' },
+      {
+        insert: '3',
+        attributes: { script: 'sub' },
+      },
+      { insert: '-solution.' },
+    ],
+  },
+  'reaction-procedure': {
+    ops: [
+      { insert: 'The reaction mixture was poured into a glass funnel with filter paper and the polymer beads were washed XX times according to the following procedure: (1) SOLVENT [x repetitions] (2)  SOLVENT [x repetitions] (3)  SOLVENT [x repetitions] (4)  SOLVENT [x repetitions] (5)  SOLVENT [x repetitions].' },
+    ],
+  },
+  'gpx-a': {
+    ops: [
+      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
+    ],
+  },
+  'gpx-b': {
+    ops: [
+      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
+    ],
+  },
+  'washed-nahco3': {
+    ops: [
+      { insert: 'The reaction mixture was poured into a separation funnel and the organic layer was washed successively with xx mL of NaHCO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '3',
+      },
+      { insert: '-solution, xx mL of brine and xx mL of water. The aqueous layers were recombined and reextracted with ethyl acetate.\nThe organic layers were collected and were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  'acidified-hcl': {
+    ops: [
+      { insert: 'The reaction mixture was poured into a separation funnel and was acidified by the addition of 1 M HCl. The aqueous layer was collected and adjusted to pH 8-9 by addition of saturated NaHCO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '3',
+      },
+      { insert: '-solution. xx mL of SOLVENT were added and the aqueous phase was extracted three times. After washing with brine and water, the organic layers were collected and were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  'tlc-control': {
+    ops: [
+      { insert: 'The progress of the reaction was observed via TLC control (cyclohexane:ethyl acetate; xx:xx; R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX).' },
+    ],
+  },
+  dried: {
+    ops: [
+      { insert: 'The combined organic layers were dried by the addition of Na' },
+      {
+        attributes: { script: 'sub' },
+        insert: '2',
+      },
+      { insert: 'SO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '/MgSO' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
+    ],
+  },
+  isolated: {
+    ops: [
+      { insert: 'The target compound was isolated by filtering of the resulting mixture through a glass funnel and was washed AMOUNT times with SOLVENT.' },
+    ],
+  },
+  'residue-purified': {
+    ops: [
+      { insert: 'The crude residue was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+  'residue-adsorbed': {
+    ops: [
+      { insert: 'The crude residue was adsorbed on a small amount of silica gel/Celite and was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+  'residue-dissolved': {
+    ops: [
+      { insert: 'The crude residue was dissolved in a small amount of SOLVENT and was purified ' },
+      {
+        attributes: { italic: true },
+        insert: 'via',
+      },
+      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless STATE in xx% yield (xx mg, xx mmol). R' },
+      {
+        attributes: {
+          italic: true,
+          script: 'sub',
+        },
+        insert: 'f = ',
+      },
+      { insert: '0.XX (cyclohexane:ethyl acetate).' },
+    ],
+  },
+};
+
+const sampleAnalysesMacros = {
+  ndash: {
+    ops: [
+      { insert: '–' },
+    ],
+  },
+  'h-nmr': {
+    ops: ops1HHead([]),
+  },
+  'c-nmr': {
+    ops: ops13CHead([]),
+  },
+  ir: {
+    ops: [...opsIRHead(), ...opsIRTail()],
+  },
+  uv: {
+    ops: [
+      { insert: 'UV-VIS (CH' },
+      { attributes: { script: 'sub' }, insert: '2' },
+      { insert: 'Cl' },
+      { attributes: { script: 'sub' }, insert: '2' },
+      { insert: '), λ' },
+      { attributes: { script: 'sub' }, insert: 'max' },
+      { insert: '(log ε) = .' },
+    ],
+  },
+  ea: {
+    ops: [
+      { insert: 'EA (): Calcd C ; H ; N ; O . Found C ; H ; N ; O .' },
+    ],
+  },
+  ei: {
+    ops: [
+      { insert: 'MS (EI, 70 eV, XX °C), m/z (%):' },
+    ],
+  },
+  fab: {
+    ops: [
+      { insert: 'MS (FAB, 3-NBA), m/z (%):' },
+    ],
+  },
+  esi: {
+    ops: [
+      { insert: 'MS (ESI), m/z (%):' },
+    ],
+  },
+  apci: {
+    ops: [
+      { insert: 'MS (APCI, CH' },
+      {
+        attributes: { script: 'sub' },
+        insert: '3',
+      },
+      { insert: 'COONH' },
+      {
+        attributes: { script: 'sub' },
+        insert: '4',
+      },
+      { insert: '), m/z (%): ' },
+    ],
+  },
+  asap: {
+    ops: [
+      { insert: 'MS (ASAP), m/z (%):' },
+    ],
+  },
+  maldi: {
+    ops: [
+      { insert: 'MS (MALDI-TOF), m/z (%):' },
+    ],
+  },
+  'm+': {
+    ops: [
+      { insert: '[M]' },
+      { insert: '+', attributes: { script: 'super' } },
+    ],
+  },
+  hr: {
+    ops: [
+      { insert: 'HRMS (): calcd , found .' },
+    ],
+  },
+  'hr-ei': {
+    ops: [
+      { insert: 'HRMS–EI ' },
+      { insert: '(m/z)', attributes: { italic: true } },
+      { insert: ': [M]' },
+      { insert: '+', attributes: { script: 'super' } },
+      { insert: ' calcd for ' },
+      { insert: 'MASS', attributes: { bold: true } },
+      { insert: '; found ' },
+      { insert: 'MASS', attributes: { bold: true } },
+      { insert: '.' },
+    ],
+  },
+  'hr-fab': {
+    ops: [
+      { insert: 'HRMS–FAB ' },
+      { insert: '(m/z)', attributes: { italic: true } },
+      { insert: ': [M + H]' },
+      { insert: '+', attributes: { script: 'super' } },
+      { insert: ' calcd for ' },
+      { insert: 'MASS', attributes: { bold: true } },
+      { insert: '; found ' },
+      { insert: 'MASS', attributes: { bold: true } },
+      { insert: '.' },
+    ],
+  },
+};
+
+const defaultMacroToolbar = ['ndash', 'h-nmr', 'c-nmr', 'ir', 'uv', 'ea'];
+const defaultMacroDropdown = {
+  MS: [
+    'ei', 'fab', 'esi', 'apci', 'asap', 'maldi', 'm+', 'hr', 'hr-ei', 'hr-fab'
+  ]
+};
+
+export {
+  reactionToolbarSymbol,
+  sampleAnalysesContentSymbol,
+  SpectraOps,
+  sampleAnalysesMacros,
+  reactionAnalysesMacros,
+  defaultMacroDropdown,
+  defaultMacroToolbar
+};
diff --git a/app/packs/src/components/utils/reactionPredefined.js b/app/packs/src/components/utils/reactionPredefined.js
new file mode 100644
index 000000000..e99949f4a
--- /dev/null
+++ b/app/packs/src/components/utils/reactionPredefined.js
@@ -0,0 +1,12 @@
+const observationPurification = [
+  { 'flash-chromatography': 'The obtained crude product was purified via flash-chromatography on silica gel using cyclohexane/ethyl acetate 20:1 to 4:1.' },
+  { hplc: 'The obtained crude product was purified via HPLC using MeCN/H₂O 10:1.' },
+];
+
+const solventsTL = [
+  { cyclohexane: 'cyclohexane/ethyl acetate 20:1' },
+  { 'CH<sub>2</sub>Cl<sub>2</sub>': 'CH₂Cl₂/MeOH 20:1' },
+  { 'NEt<sub>3</sub>': 'cyclohexane/ethyl acetate 20:1 + 1% NEt₃' },
+];
+
+export { solventsTL, observationPurification };
diff --git a/app/packs/src/fetchers/CollectionsFetcher.js b/app/packs/src/fetchers/CollectionsFetcher.js
index 6c54a61f7..7a1ee3d0d 100644
--- a/app/packs/src/fetchers/CollectionsFetcher.js
+++ b/app/packs/src/fetchers/CollectionsFetcher.js
@@ -14,6 +14,18 @@ export default class CollectionsFetcher {
     return promise;
   }
 
+  static fetchGenericEls() {
+    const promise = fetch('/api/v1/collections/locked.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then((json) => {
+        return json;
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
   static fetchLockedRoots() {
     return BaseFetcher.withoutBodyData({
       apiEndpoint: '/api/v1/collections/locked.json',
diff --git a/app/packs/src/libCnC/CnC.js b/app/packs/src/libCnC/CnC.js
new file mode 100644
index 000000000..144d59638
--- /dev/null
+++ b/app/packs/src/libCnC/CnC.js
@@ -0,0 +1,273 @@
+import React from 'react';
+import RFB from '@novnc/novnc/lib/rfb';
+import { Grid, Row, Col } from 'react-bootstrap';
+import { uniq } from 'lodash';
+
+import DeviceActions from 'src/stores/alt/actions/UserActions';
+import DeviceStore from 'src/stores/alt/stores/UserStore';
+import FocusNovnc from 'src/apps/commandAndControl/FocusNovnc';
+import Navigation from 'src/apps/commandAndControl/Navigation';
+import UsersFetcher from 'src/fetchers/UsersFetcher';
+import { ConnectedBtn, DisconnectedBtn } from 'src/apps/commandAndControl/NovncStatus';
+
+// Timeout before disconnection when not focused
+const TIME_DISCO = 180000;
+// Timeout before bluring when focused and mouse has left the canvas
+const TIME_BLUR = 55000;
+// Interval to query connection counter
+const TIME_CONN = 4000;
+
+class CnC extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      devices: [],
+      selected: {},
+      showDeviceList: true,
+      connected: false,
+      rfb: null,
+      isNotFocused: true,
+      show: false,
+      watching: 0,
+      using: 0,
+      autoBlur: null,
+      autoDisconnect: null,
+      forceCursor: false,
+      connections: null,
+    };
+    this.UserStoreChange = this.UserStoreChange.bind(this);
+    this.toggleDeviceList = this.toggleDeviceList.bind(this);
+
+    this.connect = this.connect.bind(this);
+    this.connected = this.connected.bind(this);
+    this.disconnected = this.disconnected.bind(this);
+    this.autoDisconnect = this.autoDisconnect.bind(this);
+
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleCursor = this.handleCursor.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.clearTimers = this.clearTimers.bind(this);
+
+    this.fetchConnections = this.fetchConnections.bind(this);
+  }
+
+  componentDidMount() {
+    DeviceStore.listen(this.UserStoreChange);
+    DeviceActions.fetchNoVNCDevices();
+  }
+
+  shouldComponentUpdate(nextState) {
+    return this.state.connected !== nextState.connected
+      || this.state.rfb !== nextState.rfb
+      || this.state.selected.id !== nextState.selected.id
+      || this.state.isNotFocused !== nextState.isNotFocused;
+  }
+
+  componentWillUnmount() {
+    DeviceStore.unlisten(this.UserStoreChange);
+    this.disconnect();
+  }
+
+  UserStoreChange(UserStoreState) {
+    this.setState(prevState => ({ ...prevState, devices: UserStoreState.devices }));
+  }
+
+  connected() {
+    this.setState({ connected: true });
+  }
+
+  disconnected() {
+    this.setState({ connected: false });
+  }
+
+  clearTimers() {
+    clearTimeout(this.state.autoBlur);
+    clearTimeout(this.state.autoDisconnect);
+  }
+
+  handleFocus() {
+    if (!this.state.rfb) { return; }
+    const tempRFB = this.state.rfb;
+    tempRFB.viewOnly = false;
+    this.clearTimers();
+    this.setState({ rfb: tempRFB, isNotFocused: false });
+  }
+
+  handleBlur() {
+    if (!this.state.rfb) { return; }
+    const tempRFB = this.state.rfb;
+    tempRFB.viewOnly = true;
+    this.clearTimers();
+    const disconnectTime = setTimeout(this.autoDisconnect, TIME_DISCO);
+    this.setState({ rfb: tempRFB, isNotFocused: true, autoDisconnect: disconnectTime });
+  }
+
+  handleCursor() {
+    this.setState({ forceCursor: !this.state.forceCursor });
+  }
+
+  handleMouseEnter() {
+    if (!this.state.rfb || this.state.isNotFocused) { return; }
+    this.clearTimers();
+  }
+
+  handleMouseLeave() {
+    if (this.state.isNotFocused) { return; }
+    this.clearTimers();
+    const blurTime = setTimeout(this.handleBlur, TIME_BLUR);
+    this.setState({ autoBlur: blurTime });
+  }
+
+  connect() {
+    this.disconnect();
+    const { id, novnc } = this.state.selected;
+    if (!this.canvas || !id || !novnc) { return; }
+
+    const rfb = new RFB(
+      this.canvas,
+      novnc.target,
+      {
+        repeaterID: '',
+        shared: true,
+        credentials: { password: novnc.password },
+      }
+    );
+    rfb.viewOnly = true;
+    rfb.reconnect = true;
+    rfb.show_dot = true;
+    rfb.addEventListener('connect', () => this.connected());
+    rfb.addEventListener('disconnect', () => this.disconnected());
+    this.setState(prevState => ({
+      ...prevState,
+      rfb,
+      isNotFocused: true,
+      connections: setInterval(this.fetchConnections, TIME_CONN)
+    }));
+  }
+
+  fetchConnections() {
+    const {
+      selected, isNotFocused
+    } = this.state;
+    fetch(`/api/v1/devices/current_connection?id=${selected.id}&status=${isNotFocused}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then((json) => {
+        let using = 0;
+        let watching = 0;
+        const data = uniq(json.result).map(line => line.split(','));
+        const conn = Object.fromEntries(data);
+
+        Object.keys(conn).forEach((k) => {
+          if (conn[k] === '0') { using += 1; }
+          if (conn[k] === '1') { watching += 1; }
+        });
+        this.setState({ using, watching });
+      });
+  }
+
+  autoDisconnect() {
+    clearInterval(this.state.connections);
+    this.state.rfb.disconnect();
+  }
+
+  disconnect() {
+    clearInterval(this.state.connections);
+    if (!this.state.rfb) {
+      return;
+    }
+    this.state.rfb.disconnect();
+    this.setState(prevState => ({ ...prevState, rfb: null }));
+  }
+
+  toggleDeviceList() {
+    const { showDeviceList } = this.state;
+    this.setState({
+      showDeviceList: !showDeviceList,
+      indicatorClassName: showDeviceList ? 'fa fa-chevron-circle-right' : 'fa fa-chevron-circle-left',
+      mainContentClassName: showDeviceList ? 'small-col full-main' : 'small-col main-content'
+    });
+  }
+
+  deviceClick(device) {
+    UsersFetcher.fetchNoVNCDevices(device.id)
+      .then(devices => this.setState(
+        prevState => ({ ...prevState, selected: devices[0] }),
+        this.connect
+      ));
+  }
+
+  tree(dev, selectedId) {
+    return (
+      <Col className="small-col collec-tree">
+        <div className="tree-view">
+          <div className="title" style={{ backgroundColor: 'white' }}>
+            <i className="fa fa-list" /> &nbsp;&nbsp; Devices
+          </div>
+        </div>
+        <div className="tree-wrapper">
+          {dev.map((device, index) => (
+            <div
+              className="tree-view"
+              key={`device${device.id}`}
+              onClick={() => this.deviceClick(device)}
+              role="button"
+              tabIndex={index === 0 ? 0 : -1}
+            >
+              <div
+                className={`title ${selectedId === device.id ? 'selected' : null}`}
+
+              >
+                {device.name}
+                {selectedId === device.id && this.state.connected ? <ConnectedBtn /> : null}
+                {selectedId === device.id && !this.state.connected ? <DisconnectedBtn /> : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Col>
+    );
+  }
+
+  render() {
+    const {
+      devices, selected, showDeviceList,
+      isNotFocused, connected, watching, using, forceCursor
+    } = this.state;
+
+    return (
+      <div>
+        <Grid fluid>
+          <Row className="card-navigation">
+            <Navigation toggleDeviceList={this.toggleDeviceList} />
+          </Row>
+          <Row className="card-content container-fluid" >
+            {showDeviceList ? this.tree(devices, selected.id) : null}
+            <Col className="small-col main-content" >
+              <FocusNovnc
+                isNotFocused={isNotFocused}
+                handleFocus={this.handleFocus}
+                handleBlur={this.handleBlur}
+                connected={connected}
+                watching={watching}
+                using={using}
+                forceCursor={forceCursor}
+                handleCursor={this.handleCursor}
+              />
+              <div
+                className={forceCursor ? 'force-mouse-pointer' : ''}
+                ref={(ref) => { this.canvas = ref; }}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+              />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default CnC;
diff --git a/app/packs/src/libCnC/Navigation.js b/app/packs/src/libCnC/Navigation.js
new file mode 100644
index 000000000..34bd9a259
--- /dev/null
+++ b/app/packs/src/libCnC/Navigation.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Nav, Navbar, MenuItem, NavDropdown } from 'react-bootstrap';
+
+import UserAuth from 'src/components/navigation/UserAuth';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import UserActions from 'src/stores/alt/actions/UserActions';
+
+import NavNewSession from 'src/components/navigation/NavNewSession';
+import DocumentHelper from 'src/utilities/DocumentHelper';
+
+const NavHead = () => (
+  <Navbar.Brand>
+    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
+      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
+      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
+      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
+      <MenuItem divider />
+      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
+    </NavDropdown>
+  </Navbar.Brand>
+);
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.toggleDeviceList = this.toggleDeviceList.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
+  }
+
+  toggleDeviceList() {
+    this.props.toggleDeviceList();
+  }
+
+  navHeader() {
+    return (
+      <Navbar.Header className="collec-tree">
+        <Navbar.Text style={{ cursor: "pointer" }}>
+          <i
+            className="fa fa-list"
+            style={{ fontStyle: "normal" }}
+            onClick={this.toggleDeviceList}
+          />
+        </Navbar.Text>
+        <Navbar.Text />
+        <NavHead />
+      </Navbar.Header>
+    );
+  }
+
+  render() {
+    const { modalProps } = this.state;
+
+    return this.state.currentUser ? (
+      <Navbar fluid className="navbar-custom">
+        {this.navHeader()}
+        <Nav navbar className="navbar-form">
+        </Nav>
+        <UserAuth />
+        <div style={{ clear: 'both' }} />
+      </Navbar>
+    ) : (
+      <Navbar fluid className="navbar-custom" >
+        {this.navHeader()}
+        <Nav navbar className="navbar-form" />
+        <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />
+        <div style={{ clear: 'both' }} />
+      </Navbar>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
new file mode 100644
index 000000000..131a826fd
--- /dev/null
+++ b/app/packs/src/libHome/Home.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Grid, Row } from 'react-bootstrap';
+import Aviator from 'aviator';
+
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import WelcomeMessage from '../components/WelcomeMessage';
+
+import initPublicRoutes from './homeRoutes';
+
+import Navigation from './Navigation';
+import XHome from '../components/extra/HomeXHome';
+import Notifications from '../components/Notifications';
+import RepoEmbargo from './RepoEmbargo';
+import RepoCollection from './RepoCollection';
+import RepoHome from './RepoHome';
+import RepoPubl from './RepoPubl';
+import RepoReview from './RepoReview';
+import RepoAbout from './RepoAbout';
+import RepoContact from './RepoContact';
+import RepoDirective from './RepoDirective';
+import RepoNewsroom from './RepoNewsroom';
+import RepoNewsReader from './RepoNewsReader';
+import RepoNewsEditor from './RepoNewsEditor';
+import RepoHowTo from './RepoHowTo';
+import RepoHowToReader from './RepoHowToReader';
+import RepoHowToEditor from './RepoHowToEditor';
+
+import PublicStore from '../components/stores/PublicStore';
+import RStore from '../components/stores/RStore';
+import RepoElementDetails from './RepoElementDetails';
+import NavFooter from './NavFooter';
+import LoadingModal from '../components/common/LoadingModal';
+
+const extraHomes = () => {
+  const homes = [];
+  const count = XHome.count || 0;
+  for (let j = 0; j < count; j += 1) {
+    homes.push(XHome[`content${j}`]);
+  }
+  return homes;
+};
+
+class Home extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      guestPage: null
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    RStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+    RStore.unlisten(this.onChange);
+  }
+
+  onChange(publicState) {
+    if ((publicState.guestPage && publicState.guestPage !== this.state.guestPage)
+    || (publicState.listType && publicState.listType !== this.state.listType)) {
+      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
+    }
+  }
+
+  renderGuestPage() {
+    switch (this.state.guestPage) {
+      case 'moleculeArchive':
+        return <RepoPubl listType="moleculeArchive" />;
+      case 'newseditor':
+        return <RepoNewsEditor />;
+      case 'newsreader':
+        return <RepoNewsReader />;
+      case 'newsroom':
+        return <RepoNewsroom />;
+      case 'howtoeditor':
+        return <RepoHowToEditor />;
+      case 'howtoreader':
+        return <RepoHowToReader />;
+      case 'howto':
+        return <RepoHowTo />;
+      case 'about':
+        return <RepoAbout />;
+      case 'contact':
+        return <RepoContact />;
+      case 'publications':
+        return <RepoPubl listType={this.state.listType || ''} />;
+      case 'review':
+        return <RepoReview />;
+      case 'collection':
+        return <RepoCollection />;
+      case 'embargo':
+        return <RepoEmbargo />;
+      case 'dataset':
+      case 'molecule':
+        return <RepoElementDetails />;
+      case 'home':
+        return <RepoHome />;
+      case 'welcome':
+        return <RepoHome />;
+      case 'directive':
+        return <RepoDirective />;
+      default:
+        return <RepoHome />;
+    }
+  }
+
+  renderNavFooter() {
+    switch (this.state.guestPage) {
+      case 'publications':
+      case 'review':
+      case 'embargo':
+      case 'newseditor':
+      case 'newsreader':
+      case 'newsroom':
+      case 'howtoeditor':
+      case 'howtoreader':
+      case 'howto':
+        return <span />;
+      default:
+        return <NavFooter />;
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        { XHome.count && XHome.count > 0
+          ? extraHomes().map((Annex, i) => <Annex key={`Annex_${i}`} />)
+          : (
+            <div>
+              <Grid fluid>
+                <Row className="card-navigation">
+                  <Navigation />
+                  <Notifications />
+                </Row>
+                <Row style={{ margin: '10px' }}>
+                  {this.renderGuestPage()}
+                </Row>
+              </Grid>
+              {this.renderNavFooter()}
+            </div>
+          )
+        }
+        <LoadingModal />
+      </div>
+    );
+  }
+}
+
+const HomeWithDnD = DragDropContext(HTML5Backend)(Home);
+document.addEventListener('DOMContentLoaded', () => {
+  const domElement = document.getElementById('Home');
+  if (domElement) {
+    ReactDOM.render(<HomeWithDnD />, domElement);
+    initPublicRoutes();
+    Aviator.dispatch();
+  }
+});
diff --git a/app/packs/src/libHome/NavNewSession.js b/app/packs/src/libHome/NavNewSession.js
new file mode 100644
index 000000000..d89fbb267
--- /dev/null
+++ b/app/packs/src/libHome/NavNewSession.js
@@ -0,0 +1,55 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import {
+  Button,
+  FormGroup,
+  FormControl,
+  Glyphicon,
+  Navbar,
+  NavItem,
+  Nav,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+
+function NewSession({ authenticityToken, omniauthProviders }) {
+  const items = omniauthProviders && Object.keys(omniauthProviders).map((key) => (
+    <Button key={uuid.v4()} className="omniauth-btn" style={{ textAlign: 'left', marginRight: '10px' }} href={`/users/auth/${key}`}>
+      Login with &nbsp;
+      <img src={`/images/providers/${omniauthProviders[key].icon}`} alt={key} title={key} />
+    </Button>
+
+  ));
+
+  return (
+    <div>
+      <Nav pullRight><NavItem href="/users/sign_up"> or Sign Up </NavItem></Nav>
+      <Navbar.Form pullRight>
+        <form id="new_user" className="new_user" action="/users/sign_in" acceptCharset="UTF-8" method="post">
+          <input name="utf8" value="✓" type="hidden" />
+          <input name="authenticity_token" value={authenticityToken} type="hidden" />
+          <OverlayTrigger placement="left" overlay={<Tooltip id="login_tooltip">Log in with email or name abbreviation(case-senstive)</Tooltip>}>
+            <FormGroup>
+              <FormControl id="user_login" type="text" placeholder="Email or name abbreviation" name="user[login]" />
+            </FormGroup>
+          </OverlayTrigger>
+          <FormGroup>
+            <FormControl id="user_password" type="password" name="user[password]" placeholder="password" />
+          </FormGroup>
+          <Button type="submit" bsStyle="primary">
+            <Glyphicon glyph="log-in" />
+          </Button>
+        </form>
+      </Navbar.Form>
+      <Navbar.Form pullRight>{items}</Navbar.Form>
+    </div>
+  );
+}
+
+NewSession.propTypes = {
+  authenticityToken: PropTypes.string.isRequired,
+};
+
+export default NewSession;
\ No newline at end of file
diff --git a/app/packs/src/libHome/RepoAbout.js b/app/packs/src/libHome/RepoAbout.js
new file mode 100644
index 000000000..3c0b7c04c
--- /dev/null
+++ b/app/packs/src/libHome/RepoAbout.js
@@ -0,0 +1,195 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+
+const RepoAbout = () => {
+  const bodyStyle = {
+    maxHeight: 'calc(100vh - 262px)',
+    overflowY: 'auto',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '6px',
+    padding: '30px',
+    textAlign: 'center'
+  };
+
+  return (
+    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+      <Col md={3} />
+      <Col md={6}>
+        <Panel style={{ border: 'none' }}>
+          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
+            <CardIcons />
+          </Panel.Heading>
+          <Panel.Body style={bodyStyle}>
+            <CardAbout />
+          </Panel.Body>
+        </Panel>
+      </Col>
+      <Col md={3} />
+    </Row>
+  );
+};
+
+const CardIcons = () =>
+  (
+    <div className="card-icons">
+      <Col md={4}>
+        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/chemotion_full.svg" alt="" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/dfg_logo.png" alt="" />
+      </Col>
+    </div>
+  );
+
+const CardAbout = () =>
+  (
+    <div>
+      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
+      <br />
+      <h2>Project description and mission</h2>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          The repository Chemotion was developed as a freely available infrastructure for the
+          publication of research data in order to increase the amount of available data and
+          to improve the quality of the information obtained and published.
+        </p>
+        <p>
+          The aim of Chemotion repository is to make a substantial contribution to securing
+          research results in a cost-efficient and simple manner, to support scientists, in
+          particular chemists, in their efforts to generate FAIR data and to increase the
+          visibility of research data in the domain of chemistry.
+        </p>
+        <p>
+          Free access to and free use of scientific data is one principle of this project
+          allowing and promoting collaborative work and scientific exchange among scientists.
+          We think that openly available data is the prerequisite for better science in terms
+          of more efficient and sustainable work but also with respect to a faster progress of
+          science in general.
+        </p>
+        <p>
+          To date, a lot of research data in chemistry is not made available due to technical
+          limitations and missing infrastructure. Chemotion repository can be used to overcome
+          these limitations - providing an option for the chemistry community to collect and
+          share data on chemical reactions and analytical data of chemical compounds. The
+          repository can be used to build data collections as an alternative to commercial
+          databases.
+        </p>
+        <p>
+          The mission of Chemotion repository is supported by its host institution KIT and
+          the science data center MoMaF as well as the National Research Data Infrastructure
+          NFDI4Chem.
+        </p>
+      </div>
+      <br />
+      <h2>Chemotion repository and related projects</h2>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          Chemotion repository is one of several projects that are built to support research
+          data management in chemistry.
+          It can be used as stand alone software for the publication of research data or it
+          can be used in combination with chemotion ELN (electronic lab notebook), an open source
+          software for the documentation of research data. Both system are being developed on the
+          same technological level which allows a combination of recording and documentation as
+          well as publication and storage of data sets. The ELN enables a fast and easy transfer
+          of selected research data to the repository as a requirement for efficient strategies
+          for the publication of research data.
+        </p>
+      </div>
+      <br />
+      <h3>Imprint</h3>
+      <h4>Karlsruhe Institute of Technology</h4>
+      <h4>Leader of the research group</h4>
+      <p>Prof. Stefan Bräse </p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
+      <p>76131 Karlsruhe </p>
+      <p>Germany</p>
+      <br />
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
+      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
+      <p>76344 Eggenstein-Leopoldshafen</p>
+      <p>Phone: +49 721 608 42903</p>
+      <p>Fax: +49 721 608 48581</p>
+      <br />
+      <p />
+      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
+      <br />
+      <h4>Office Campus North (KIT)</h4>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
+      <p>Hermann-von-Helmholtz-Platz 1</p>
+      <p>76344 Eggenstein-Leopoldshafen </p>
+      <p>Germany</p>
+      <p>Phone: +49 721 608 24697 </p>
+      <br />
+      <h4>Authors</h4>
+      <p>Prof. Stefan Braese</p>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <br />
+      <h3>Copyright Notices</h3>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          Unless otherwise stated, <i>chemotion-repository</i> and/or its contributors own
+          the intellectual property rights in the website and material on the website.
+          Subject to the license below, all these intellectual property rights are reserved.
+          <br />
+          Each content contributed and published by a user can be made available under one of
+          the following licenses that the contributing user has chosen during the publication
+          process:
+        </p>
+        <ul>
+          <li>
+            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg" style={{ borderStyle: 'none' }} alt="CC BY SA" />{' '}
+              Creative Commons Attribution-ShareAlike 4.0 International License
+            </a>
+          </li>
+          <li>
+            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by/4.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg" style={{ borderStyle: 'none' }} alt="CC BY" />{' '}
+              Creative Commons Attribution 4.0
+            </a>
+          </li>
+          <li>
+            <a rel="license noopener noreferrer external" target="_blank" href="http://creativecommons.org/publicdomain/zero/1.0/" >
+              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg" style={{ borderStyle: 'none' }} alt="CC0" />{' '}
+              CC0 1.0 Universal
+            </a>
+          </li>
+        </ul>
+        <p>
+          The contributing user may select the type of license during the publication process or
+          choose not to apply any license.
+          Contributors should be aware that some research data is not suitable for a licensing
+          option as it may be in the public domain. Public domain data should be added without a
+          license if this is apparent.
+        </p>
+        <p>
+          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
+          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
+        </p>
+        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
+        <br />
+      </div>
+
+      <h3>Content</h3>
+      <div style={{ textAlign: 'justify' }} >
+        <p>
+          All texts, pictures and other information published here are subject to
+          copyright. The logo may not be used without the prior consent
+          of the working group.
+          A change of the logo is not permitted. The contents of our website are
+          created with the utmost care. Nevertheless, no guarantee for topicality
+          and completeness can be taken over. The Compound Platform does not
+          assume any responsibility for any web content connected by a link,
+          as this is not its own content.
+        </p>
+      </div>
+    </div>
+  );
+
+export default RepoAbout;
diff --git a/app/packs/src/libHome/RepoCardIntro.js b/app/packs/src/libHome/RepoCardIntro.js
new file mode 100644
index 000000000..53a81cd3f
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardIntro.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Col, Row } from 'react-bootstrap';
+import RepoCardLatestPublish from './RepoCardLatestPublish';
+
+const RepoCardIntro = ({ lastPublished }) => (
+  <div className="repo-intro">
+    <Row>
+      <Col lg={12} md={12} sm={12}>
+        <h1>Repository for samples, reactions and related research data</h1>
+      </Col>
+    </Row>
+    <Row className="row-bottom">
+      <Col lg={4} md={4} sm={12}>
+        <div className="card-well-competition card-nfdi4chem">
+          <h4>
+            this repository is part of the strategy of
+          </h4>
+          <img
+            className="icon-nfdi4chem"
+            src="/images/repo/NFDI4Chem_logo.svg"
+            key="NFDI4Chem"
+            alt="NFDI4Chem"
+          />
+        </div>
+      </Col>
+      <Col lg={8} md={8} sm={12}>
+        <RepoCardLatestPublish lastPublished={lastPublished} />
+      </Col>
+    </Row>
+  </div>
+);
+
+export default RepoCardIntro;
diff --git a/app/packs/src/libHome/RepoCardLatestPublish.js b/app/packs/src/libHome/RepoCardLatestPublish.js
new file mode 100644
index 000000000..486606373
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardLatestPublish.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Carousel } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import PublicActions from '../components/actions/PublicActions';
+
+const timeInterval = (_date) => {
+  let date = _date;
+  if (!date) { return null; }
+  switch (typeof date) {
+    case 'number':
+      break;
+    case 'string':
+      date = +new Date(date);
+      break;
+    case 'object':
+      if (date.constructor === Date) date = date.getTime();
+      break;
+    default:
+      date = +new Date();
+  }
+  const seconds = Math.floor((new Date() - date) / 1000);
+  const intrvlTypes = [
+    [31536000, 'year', 'a'],
+    [2592000, 'month', 'a'],
+    [604800, 'week', 'a'],
+    [86400, 'day', 'a'],
+    [3600, 'hour', 'an'],
+    [60, 'minute', 'a'],
+    [1, 'second', 'a'],
+  ];
+  let intrvlCount = 0;
+  const intrvlType = intrvlTypes.find((e) => {
+    intrvlCount = Math.floor(seconds / e[0]);
+    return intrvlCount >= 1;
+  });
+  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
+};
+
+const RepoCardLatestPublish = ({ lastPublished }) => {
+  if (lastPublished) {
+    const { sample, reaction } = lastPublished;
+    const svgPathSample = sample.sample_svg_file
+      ? `/images/samples/${sample.sample_svg_file}`
+      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
+    const pubTagSample = sample.tag || {};
+    const svgPathReaction = reaction
+      ? `/images/reactions/${reaction.reaction_svg_file}`
+      : '/images/no_image_180.svg';
+    const pubTagReaction = reaction.tag || {};
+    return (
+      <div className="card-well-competition card-latest">
+        <Carousel className="carl-spt" indicators={false} interval={6000}>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
+                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
+                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardLatestPublish;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
new file mode 100644
index 000000000..4c9be0e6e
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import CountUp from 'react-countup';
+import Aviator from 'aviator';
+
+const RepoCardMoleculeArchive = (params) => {
+  const { publishedStatics } = params;
+  let count = 0;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    count = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'xvial'))?.e_cnt || 0;
+  }
+  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
+  return (
+    <Row className="repo-statistic">
+      <Col lg={12} md={12} sm={12}>
+        <h3>archive for materials</h3>
+      </Col>
+      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <Row className="rl">
+            <OverlayTrigger placement="top" overlay={tooltipView}>
+              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
+                <i className="icon-sample" />
+              </Button>
+            </OverlayTrigger>
+            <div className="tit">Samples</div>
+          </Row>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <div className="rr">
+            <div className="cnt">
+              <CountUp end={count} />{' '}
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
+                  published
+                </Button>
+              </OverlayTrigger>
+            </div>
+            <div className="italic-desc">Compounds</div>
+          </div>
+        </Col>
+      </Col>
+      <Col lg={12} md={12} sm={12}>
+        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
+          <img
+            className="icon-molecule-archive2"
+            src="/images/repo/molecule-archive-logo-weiss.svg"
+            key="chemotion_full"
+            alt="Molecule Archive"
+          />
+        </Col>
+        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
+          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
+        </Col>
+      </Col>
+    </Row>
+  );
+};
+
+export default RepoCardMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/libHome/RepoCardStaticsBoard.js
new file mode 100644
index 000000000..708d97d56
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardStaticsBoard.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const RepoCardStaticsBoard = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
+    const pubPage = {
+      sample: `publications=${RepoNavListTypes.SAMPLE}`,
+      reaction: `publications=${RepoNavListTypes.REACTION}`
+    };
+    return (
+      <Row className="repo-statistic">
+        <Col lg={12} md={12} sm={12}>
+          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                  <i className="icon-sample" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Samples</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                  <i className="icon-reaction" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="fa fa-area-chart i-ext" aria-hidden />
+              <div className="tit">Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
+              <div style={{ display: 'flex' }}>
+                <div>Top 3:&nbsp;&nbsp;</div>
+                <div className="italic-desc">
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
+                  <br />
+                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
+                  <br />
+                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardStaticsBoard;
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
new file mode 100644
index 000000000..1e8e35dbf
--- /dev/null
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -0,0 +1,242 @@
+import React, { Component } from 'react';
+import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import uuid from 'uuid';
+import RepoCollectionDetails from './RepoCollectionDetails';
+import PublicStore from '../components/stores/PublicStore';
+import { MetadataModal, InfoModal } from './RepoEmbargoModal';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
+
+const SvgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+const infoTag = (el, la) => {
+  let authorInfo = '';
+  authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{el.published_by}</div></div>);
+  return (
+    <Row key={`list-reaction-info-${el.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`${el.type === 'Reaction' ? 'CRR' : 'CRS'}-${el.pub_id}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div className="item_xvial">{la}</div>
+        </div>
+      </OverlayTrigger>
+      {authorInfo}
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{el.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{el.ana_cnt || 0}</div>
+      </div>
+    </Row>
+  );
+};
+
+const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null, fetchEmbargoElement = () => {}) => {
+  if (!el) {
+    return '';
+  }
+  let listClass;
+  if (el.type === 'Reaction') {
+    listClass = (element?.publication && element.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
+  } else {
+    listClass = (element?.published_samples && element.published_samples[0] && element.published_samples[0].sample_id === el.id) ? 'list_focus_on' : 'list_focus_off';
+  }
+  return (
+    <Col md={element ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => fetchEmbargoElement(cid, el)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${el.id}`}>
+          <Col md={12}>
+            <SVG src={SvgPath(el.svg, el.type)} className="layout_svg_reaction" key={el.svg} height={300} />
+          </Col>
+        </Row>
+        {infoTag(el, la)}
+      </div>
+    </Col>
+  );
+};
+
+export default class RepoCollection extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      element: null,
+      selectEmbargo: null,
+      showInfoModal: false,
+      showMetadataModal: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleInfoShow = this.handleInfoShow.bind(this);
+    this.handleInfoClose = this.handleInfoClose.bind(this);
+    this.handleMetadataShow = this.handleMetadataShow.bind(this);
+    this.handleMetadataClose = this.handleMetadataClose.bind(this);
+    this.fetchEmbargoElement = this.fetchEmbargoElement.bind(this);
+    this.fetchEmbargoElements = this.fetchEmbargoElements.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.elements && state.elements != this.state.elements) {
+      this.setState({ elements: state.elements });
+    }
+    if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {
+      this.setState({ selectEmbargo: state.selectEmbargo });
+      this.fetchEmbargoElements(state.selectEmbargo.element_id);
+    }
+
+    if (state.element !== this.state.element) {
+      this.setState({ element: state.element });
+    }
+  }
+
+  fetchEmbargoElements(embargoId) {
+    EmbargoFetcher.fetchEmbargoElements(embargoId)
+      .then((result) => {
+        if (!result.error) {
+          const {
+            elements, current_user, embargo
+          } = result;
+          this.setState({
+            selectEmbargo: embargo,
+            elements,
+            currentUser: current_user
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  fetchEmbargoElement(cid, el) {
+    EmbargoFetcher.fetchEmbargoElement(cid, el)
+      .then((result) => {
+        if (!result.error) { this.setState({ element: result }); }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  handleInfoShow() {
+    this.setState({ showInfoModal: true });
+  }
+
+  handleInfoClose() {
+    this.setState({ showInfoModal: false });
+  }
+
+  handleMetadataShow() {
+    this.setState({ showMetadataModal: true });
+  }
+
+  handleMetadataClose() {
+    this.setState({ showMetadataModal: false });
+  }
+
+  renderSearch() {
+    const { selectEmbargo, elements } = this.state;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+
+    const actionButtons =
+      (
+        <span style={{ float: 'right' }}>
+          <ButtonToolbar>
+            <Button
+              id="all-info-button"
+              disabled={selectEmbargo === null || (elements && elements.length === 0)}
+              onClick={() => this.handleMetadataShow()}
+            >
+              <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
+            </Button>
+            <Button
+              id="all-info-button"
+              disabled={selectEmbargo === null || (elements && elements.length === 0)}
+              onClick={() => this.handleInfoShow()}
+            >
+              <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
+            </Button>
+            <Button href="/home/publications" target="_blank">
+              back to all publications
+            </Button>
+          </ButtonToolbar>
+        </span>
+      );
+    const filterDropdown = (
+      <ButtonGroup>
+        {actionButtons}
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        <span><b>The data on this page refers to the data collection: &nbsp;{la}&nbsp;</b></span>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      elements, element, currentUser, showInfoModal, selectEmbargo, showMetadataModal
+    } = this.state;
+    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={element ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch()}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div className="public-list" style={{ backgroundColor: '#efefef' }}>
+            <Table className="sample-entries">
+              <tbody>
+                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element, this.fetchEmbargoElement)) }
+              </tbody>
+            </Table>
+          </div>
+        </Col>
+        <Col md={element ? 8 : 0}>
+          <div className="public-element">
+            <RepoCollectionDetails element={element} />
+          </div>
+          <InfoModal
+            key="info-modal"
+            showModal={showInfoModal}
+            selectEmbargo={selectEmbargo}
+            onCloseFn={this.handleInfoClose}
+            editable
+          />
+          <MetadataModal
+            key="metadata-modal"
+            showModal={showMetadataModal}
+            label={la}
+            metadata={metadata}
+            onCloseFn={this.handleMetadataClose}
+            elementId={id}
+            elementType="Collection"
+          />
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
new file mode 100644
index 000000000..85eeb1168
--- /dev/null
+++ b/app/packs/src/libHome/RepoCollectionDetails.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoCollectionDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+    this.loadSVG = this.loadSVG.bind(this);
+  }
+
+  componentDidMount() {
+    const { element } = this.state;
+    if (element) {
+      this.loadSVG(element);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.element !== prevProps.element) {
+      this.loadSVG(this.props.element);
+    }
+  }
+
+  loadSVG(element) {
+    this.setState({ element });
+  }
+
+  switchTypeRender() {
+    const { element } = this.props;
+    if (typeof (element) === 'undefined' || !element) {
+      return <span />;
+    }
+    const elementType = element && element.elementType;
+
+    switch (elementType) {
+      case 'reaction': return <RepoReactionDetails isPublished reaction={element} />;
+      case 'molecule': return <RepoSampleDetails isPublished element={element} />;
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>);
+  }
+}
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
new file mode 100644
index 000000000..2378f7c8c
--- /dev/null
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -0,0 +1,2386 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { replace } from 'lodash';
+import {
+  Button,
+  Checkbox,
+  Col,
+  ControlLabel,
+  Form,
+  FormControl,
+  FormGroup,
+  Grid,
+  InputGroup,
+  Label,
+  OverlayTrigger,
+  Panel,
+  Row,
+  Table,
+  Tooltip
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Clipboard from 'clipboard';
+import moment from 'moment';
+import Select from 'react-select';
+import uuid from 'uuid';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
+import { RepoCommentBtn } from 'repo-review-ui';
+import ContainerComponent from './ContainerComponent';
+import Formula from '../components/common/Formula';
+import HelpInfo from '../components/common/HelpInfo';
+import PubchemLabels from '../components/PubchemLabels';
+import QuillViewer from '../components/QuillViewer';
+import { ChemotionTag } from '../components/PublishCommon';
+import Sample from '../components/models/Sample';
+import Reaction from '../components/models/Reaction';
+import PrintCodeButton from '../components/common/PrintCodeButton';
+import { stopBubble } from '../components/utils/DomHelper';
+import RepoContainerDatasets from './RepoContainerDatasets';
+import ImageModal from '../components/common/ImageModal';
+import Utils from '../components/utils/Functions';
+import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from '../components/utils/ElementUtils';
+import { contentToText } from '../components/utils/quillFormat';
+import { chmoConversions } from '../components/OlsComponent';
+import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
+import InputButtonField from '../components/common/InputButtonField';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import PublicActions from '../components/actions/PublicActions';
+import RepoUserComment from '../components/common/RepoUserComment';
+import RepoPublicComment from '../components/common/RepoPublicComment';
+import { previewContainerImage } from '../components/utils/imageHelper';
+import RepoXvialButton from '../components/common/RepoXvialButton';
+import RepoPreviewImage from '../components/common/RepoPreviewImage';
+import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
+import RepoSegment from './RepoSegment';
+import RepoMolViewerBtn from './RepoMolViewerBtn';
+import RepoMolViewerListBtn from './RepoMolViewerListBtn';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
+
+const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
+
+const CollectionDesc = (props) => {
+  let { label } = props;
+  if (typeof label !== 'string') return null;
+  if (label.match(/Reviewing/)) {
+    label = 'Reviewing';
+  } else if (label.match(/Element To Review/)) {
+    label = 'Element To Review';
+  } else if (label.match(/Reviewed/)) {
+    label = 'Reviewed';
+  }
+  const descs = {
+    Chemotion: 'Collection of all the samples and reactions, with analytical datasets, published on the Chemotion-Repository.',
+    'Scheme-only reactions': 'Collections of published scheme-only reactions (no associated analytical data).',
+    'My Published Elements': 'Collection of the published samples and reactions you submitted. The samples/reactions that were embargoed are placed in sub-folders.',
+    'Pending Publications': 'Collection of the samples and reactions you have submitted and are currently being reviewed.',
+    Reviewing: 'Collection of the samples and reactions that have been reviewed by a reviewer and needs revision from your side.',
+    'Element To Review': 'Collection of the samples and reactions that currently have to be reviewed.',
+    Reviewed: 'Collection of the samples and reactions that were reviewed and sent back to the submitters for revision/corrections (Read-Only). Waiting for resubmission.',
+    'Embargoed Publications': 'Collection under an embargo: the collection can only be released and its elements made public after all its elements have been accepted by a reviewer.'
+  };
+  const desc = descs[label];
+  if (desc === undefined) return null;
+  return (
+    <div style={{ float: 'right' }}>
+      <OverlayTrigger placement="right" overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
+        <i className="fa fa-info-circle" />
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+const resizableSvg = (path, extra = null) => (
+  <div className="preview-table" style={{ cursor: 'row-resize' }}>
+    {extra}
+    <SvgFileZoomPan svgPath={path} duration={300} resize />
+  </div>
+);
+
+const ChemotionId = props => (
+  <h5>
+    <b>{props.type?.replace(/^\w/, c => c.toUpperCase())} ID:&nbsp;</b>
+    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
+      {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
+    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
+  </h5>
+);
+ChemotionId.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
+};
+
+const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
+
+
+const AuthorTitle = (authorIds) => {
+  if (authorIds && authorIds.length > 1) {
+    return 'Authors:';
+  }
+  if (authorIds && authorIds.length === 1) {
+    return 'Author:';
+  }
+  return '';
+};
+
+const NewsroomTemplate = {
+  title: '', content: {}, article: []
+};
+
+const HomeFeature = props => (
+  <div className="feature-block">
+    <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
+    <p>
+      {props.intro}
+    </p>
+  </div>
+);
+
+HomeFeature.propTypes = {
+  fa: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  intro: PropTypes.string.isRequired
+};
+
+const LicenseLegalCode = (cp) => {
+  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+  switch (cp) {
+    case 'CC BY-SA':
+      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+      break;
+    case 'CC BY':
+      presentLicense = 'Creative Commons Attribution 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
+      break;
+    case 'CC0':
+      presentLicense = 'CC0 1.0 Universal';
+      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
+      break;
+    case 'No License':
+      presentLicense = 'No License';
+      presentHref = '';
+      break;
+    default:
+      break;
+  }
+  return <span><b>{presentLicense}</b>&nbsp;{presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a>}</span>;
+};
+
+const nmrMsg = (sample, container) => {
+  if (sample.molecule && container.extended_metadata &&
+    (typeof container.extended_metadata.kind === 'undefined' ||
+      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
+    )) {
+    return '';
+  }
+  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
+
+  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
+  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
+  }
+  return '';
+};
+
+// the requirements for file types as given
+const isFileTypePass = (analysisType, attachments) => {
+  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
+  const nmrType = ['jcamp', 'dx', 'jdx'];
+  let files = [];
+  switch (analysisType) {
+    case '1H NMR':
+    case chmoConversions.nmr_1h.termId:
+    case '13C NMR':
+    case chmoConversions.nmr_13c.termId:
+    case '15N NMR':
+    case 'NMR':
+    case 'IR':
+    case chmoConversions.ir.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    case 'EA':
+    case chmoConversions.ea.termId:
+    case 'X-Ray':
+    case 'Crystall-Structure':
+    case chmoConversions.crystal_structure.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    default:
+      break;
+  }
+  return true;
+};
+
+// at least one dataset has to be attached
+// in dataset: instrument has to be given
+const isDatasetPass = (analysis) => {
+  const dataset = analysis.children;
+  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
+  if (attachments.length < 1) return false;
+  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
+  if (instruments.length < 1) return false;
+  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
+  if (files.length < 1) return false;
+  return true;
+};
+
+const isNmrPass = (analysis, sample) => {
+  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
+  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  }
+  return true;
+};
+
+const DownloadMetadataBtn = (l) => {
+  const contentUrl = `/api/v1/public/metadata/download?type=${l.type.toLowerCase()}&id=${l.id}`;
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        onClick={() => Utils.downloadFile({
+          contents: contentUrl
+        })}
+      >
+        <i className="fa fa-file-code-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+
+const DownloadJsonBtn = (l) => {
+  const contentUrl = `/api/v1/public/metadata/download_json?type=${l.type.toLowerCase()}&id=${l.id}`;
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download JSON-LD</Tooltip>}
+    >
+      <Button
+        style={{ backgroundColor: 'grey', color:'white', marginLeft: '5px' }}
+        bsSize="xsmall"
+        onClick={() => Utils.downloadFile({
+          contents: contentUrl
+        })}
+      >
+        JSON-LD
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const DownloadDOICsv = (e, a) => {
+  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
+  const dois = [];
+  dois.push(['Reserved DOIs', '']);
+  dois.push(['', '']);
+
+  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
+  a.forEach((an) => {
+    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+  });
+
+  if (e.type === 'reaction') {
+    // product(sample)
+    if (e.products !== null && e.products.length > 0) {
+      e.products.forEach((p) => {
+        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
+        p.analysisArray().forEach((an) => {
+          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+        });
+      });
+    }
+  }
+  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
+};
+
+class EmbargoCom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false
+    };
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  handleEmbargoChange(e) {
+    this.props.onEmbargoChange(e.value);
+  }
+
+  handleLicenseChange(e) {
+    this.props.onLicenseChange(e.value);
+  }
+
+  handleCC0ConsentChange(e, type) {
+    this.props.onCC0ConsentChange(e.target.checked, type);
+  }
+
+  render() {
+    const defaultBundles = [
+      { value: '-1', name: 'no', label: 'No embargo' },
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+    const licenses = [
+      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
+      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
+      { name: 'CC0', value: 'CC0', label: 'CC0' },
+      { name: 'No License', value: 'No License', label: 'No License' }
+    ];
+
+    const bundles = defaultBundles.concat(this.props.opts);
+    const description = [
+      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
+      'Please use one bundle for data that belongs to the same publication.',
+      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
+    ].join(' ');
+    const { isShow } = this.state;
+    const embargoDesc = isShow ? (
+      <div style={{
+        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
+      }}
+      >
+        <b>Embargo Bundle</b>&#58;&nbsp;{description}
+      </div>
+    ) : (null);
+
+    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
+    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
+    const deed = (
+      <div style={{
+        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
+      }}
+      >
+        {LicenseLegalCode(this.props.selectedLicense)}
+        {
+        this.props.selectedLicense === 'CC0' ?
+          (
+            <div stye={{ width: '100%' }}>
+              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
+                {cc0Consent1}
+              </Checkbox>
+              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
+                {cc0Consent2}
+              </Checkbox>
+            </div>
+          )
+          :
+          (null)
+      }
+      </div>
+    );
+
+    return (
+      <div>
+        <Form horizontal style={{ display: 'flex' }}>
+          <div style={{ width: '20%', textAlign: 'right' }}>
+            <ControlLabel>Choose license&nbsp;</ControlLabel>
+          </div>
+          <div style={{ width: '20%' }}>
+            <Select
+              value={this.props.selectedLicense}
+              onChange={e => this.handleLicenseChange(e)}
+              options={licenses}
+              className="select-assign-collection"
+            />
+          </div>
+          <div style={{ width: '40%', textAlign: 'right' }}>
+            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
+            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
+              <i className="fa fa-question-circle" aria-hidden="true" />
+            </div>&nbsp;
+          </div>
+          <div style={{ width: '40%' }}>
+            <Select
+              value={this.props.selectedValue}
+              onChange={e => this.handleEmbargoChange(e)}
+              options={bundles}
+              className="select-assign-collection"
+            />
+          </div>
+        </Form>
+        {embargoDesc}
+        {deed}
+      </div >
+    );
+  }
+}
+
+EmbargoCom.propTypes = {
+  opts: PropTypes.array,
+  selectedValue: PropTypes.string.isRequired,
+  onEmbargoChange: PropTypes.func.isRequired,
+  selectedLicense: PropTypes.string,
+  onLicenseChange: PropTypes.func.isRequired,
+  onCC0ConsentChange: PropTypes.func.isRequired,
+  cc0Deed: PropTypes.shape({
+    consent1: PropTypes.bool.isRequired,
+    consent2: PropTypes.bool.isRequired
+  })
+};
+
+EmbargoCom.defaultProps = {
+  opts: [],
+  selectedLicense: 'CC BY-SA',
+  cc0Deed: { consent1: false, consent2: false }
+};
+
+const PublishTypeAs = props => (
+  <div style={{ display: 'inline' }}>
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
+      <i className="fa fa-question-circle" aria-hidden="true" />
+    </OverlayTrigger>&nbsp;
+    <DropdownButtonSelection
+      options={props.options}
+      selected={props.selected}
+      placeholder="Select publication type..."
+      onSelect={e => props.onChange(e)}
+    />
+  </div>
+);
+
+PublishTypeAs.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string),
+  selected: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+PublishTypeAs.defaultProps = {
+  options: [],
+  selected: 'full',
+};
+
+
+const ElStateLabel = (state) => {
+  let stateStyle;
+  switch (state) {
+    case 'reviewed':
+      stateStyle = 'info';
+      break;
+    case 'pending':
+      stateStyle = 'warning';
+      break;
+    case 'accepted':
+      stateStyle = 'success';
+      break;
+    default:
+      stateStyle = 'default';
+  }
+  return <Label bsStyle={stateStyle}>{state}</Label>;
+};
+
+
+const MoveEmbargoedBundle = (element, onMoveClick) => {
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
+      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
+    </OverlayTrigger>
+  );
+};
+
+const ElSubmitTime = (submitAt) => {
+  const time = new Date(submitAt);
+  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
+};
+
+const SvgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+const ElAspect = (e, onClick, user = null, owner, currentElement = null, onMoveClick) => {
+  if (!e) {
+    return '';
+  }
+  let listClass;
+  if (e.type === 'Reaction') {
+    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  } else {
+    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  }
+  const schemeOnly = (e && e.scheme_only === true) || false;
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => onClick(e.type.toLowerCase(), e.id)}
+    >
+      <td style={{ position: 'relative' }} >
+        <span className="review_element_label">
+          <i className={`icon-${e.type.toLowerCase()}`} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
+        &nbsp;{user !== null && user.id != owner ? '' : MoveEmbargoedBundle(e, onMoveClick)}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const SampleExactMW = (em) => {
+  if (em) {
+    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
+  }
+  return '';
+};
+
+const DateFormatYMDLong = (params) => {
+  const dateTime = new Date(params);
+  const options = {
+    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
+  };
+  return dateTime.toLocaleDateString('en-GB', options);
+};
+
+const DateFormatDMYTime = (dt) => {
+  if (dt == null || typeof dt === 'undefined') return '';
+  try {
+    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
+    if (m.isValid()) {
+      return dt;
+    }
+    const dtJSON = new Date(dt).toJSON();
+    const dtISO = new Date(Date.parse(dt)).toISOString();
+    if (dtISO === dtJSON) {
+      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
+    }
+    return '';
+  } catch (e) {
+    return '';
+  }
+};
+
+const EditorTips = () => (
+  <ol>
+    {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
+    <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
+    <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
+    <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
+  </ol>
+);
+
+const BackSoonPage = () => {
+  return (
+    <div>
+      <h1>We&rsquo;ll be back soon!</h1>
+      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
+      <h3>
+        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
+      </h3>
+      <h3>
+        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
+      </h3>
+      <h4>&mdash; ComPlat Team</h4>
+    </div>
+  );
+};
+
+const ShowIndicator = (show) => {
+  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+};
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '2px',
+  marginRight: '2px'
+};
+
+const IconToMyDB = ({
+  id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
+}) => {
+  const dt = isPublished ? 'publication' : 'review';
+  if (isLogin) {
+    return (
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">{tooltipTitle}</Tooltip>}>
+        <Button className="animation-ring" bsStyle="link" href={`/mydb/scollection/${dt}/${type}/${id}`} target="_blank">
+          <i className={`icon-${type}`} />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return (<span className="wrap-ring"><i className={`icon-${type}`} /></span>);
+};
+
+IconToMyDB.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  tooltipTitle: PropTypes.string,
+  isLogin: PropTypes.bool,
+  isPublished: PropTypes.bool,
+};
+
+IconToMyDB.defaultProps = {
+  tooltipTitle: 'Link to My DB',
+  isLogin: false,
+  isPublished: true,
+};
+
+
+const ChecklistPanel = ({
+  checklist, isReviewer, review_info
+}) => {
+  const dglr = checklist?.glr?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'brown' }} />) : (<i className="fa fa-square-o" style={{ color: 'brown' }} />);
+  const dtbl = checklist?.tbl?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'blue' }} />) : (<i className="fa fa-square-o" style={{ color: 'blue' }} />);
+  const ddes = checklist?.des?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'orange' }} />) : (<i className="fa fa-square-o" style={{ color: 'orange' }} />);
+  const dafm = checklist?.afm?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'green' }} />) : (<i className="fa fa-square-o" style={{ color: 'green' }} />);
+  const dact = checklist?.act?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'purple' }} />) : (<i className="fa fa-square-o" style={{ color: 'purple' }} />);
+  const dohd = checklist?.ohd?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
+
+
+  if (isReviewer === true || review_info?.groupleader == true) {
+    const leaders = review_info?.leaders?.length > 0 ? `additional reviewer(s): ${review_info?.leaders?.join(', ')}` : '';
+    const isGL = review_info?.leaders?.length > 0 ? (<OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">group leader review</Tooltip>}>{dglr}</OverlayTrigger>) : '';
+    return (
+      <div>
+        {isGL}&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">table values</Tooltip>}>{dtbl}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">description</Tooltip>}>{ddes}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis format</Tooltip>}>{dafm}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis content</Tooltip>}>{dact}</OverlayTrigger>&nbsp;
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">on hold</Tooltip>}>{dohd}</OverlayTrigger>&nbsp;
+        &nbsp;{leaders}
+      </div>
+    );
+  }
+  return (<div />);
+};
+
+ChecklistPanel.propTypes = {
+  checklist: PropTypes.object,
+  isReviewer: PropTypes.bool,
+};
+
+ChecklistPanel.defaultProps = {
+  checklist: {},
+  isReviewer: false
+};
+
+const SidToPubChem = ({ sid }) => {
+  let labelStyle = {
+    // display: 'inline-block',
+    marginLeft: '2px',
+    marginRight: '2px',
+    //position: 'absolute',
+  };
+  if (!sid || isNaN(sid)) {
+    labelStyle.WebkitFilter = "grayscale(100%)"
+  }
+  const handleOnClick = (e) => {
+    if (sid && !isNaN(sid)){
+      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
+    }
+    e.stopPropagation()
+  }
+
+  if (sid && !isNaN(sid)){
+    return (
+      <span style={labelStyle} onClick={handleOnClick}>
+        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
+      </span>
+    )
+    }else {
+      return <span />
+  }
+}
+
+SidToPubChem.propTypes = {
+  sid: PropTypes.string
+};
+
+
+const OrcidIcon = ({ orcid }) => {
+  if (typeof orcid === 'undefined' || orcid === null) {
+    return (<span />);
+  }
+  const handleOnClick = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <a href={`https://orcid.org/${orcid}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
+      <img src="/images/wild_card/ORCIDiD_iconvector.svg" className="orcid-logo" alt="ORCID" title="ORCID" />
+    </a>
+  );
+};
+
+OrcidIcon.propTypes = {
+  orcid: PropTypes.string
+};
+
+OrcidIcon.defaultProps = {
+  orcid: null
+};
+
+const ElementIcon = (elementType) => {
+  switch (elementType) {
+    case 'Reaction':
+      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    case 'Sample':
+      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    default:
+      return <div />;
+  }
+};
+
+const AnalysesTypeJoinLabel = (analyses, type) => {
+  const regExp = /\(([^)]+)\)/;
+  const analysesTypeJoin = analyses.map((analysis) => {
+    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
+    if (kind === '') {
+      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    }
+    return kind;
+  }).join(', ');
+
+  return analysesTypeJoin === '' ? analysesTypeJoin :
+    (
+      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
+        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
+      </div>
+    );
+};
+
+const CalcDuration = (reaction) => {
+  let duration = null;
+
+  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
+    return reaction.duration;
+  }
+
+  if (reaction.timestamp_start && reaction.timestamp_stop) {
+    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
+    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
+    if (start < stop) {
+      duration = moment.preciseDiff(start, stop);
+    }
+  }
+  if (duration == null) {
+    return '';
+  }
+  return duration;
+};
+
+const AuthorList = ({ creators, affiliationMap }) => {
+  return (
+    <span>
+      {creators.map(
+        (creator, i) => (
+          <span key={`auth_${creator.id}_${uuid.v4()}`}>
+            {i === 0 ? null : ' - '}<OrcidIcon orcid={creator.ORCID} />{creator.name}
+            <sup>
+              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
+            </sup>
+          </span>
+        )
+      )}
+    </span>
+  );
+};
+
+AuthorList.propTypes = {
+  creators: PropTypes.array,
+  affiliationMap: PropTypes.object,
+};
+
+AuthorList.defaultProps = {
+  creators: [],
+  affiliationMap: {},
+};
+
+const ContributorInfo = ({ contributor, showHelp }) => {
+  if (!contributor.name) {
+    return <div />;
+  }
+  const contributorBlock = !showHelp ? (
+    <h5><b>Contributor: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}</h5>
+  ) : (
+    <h5>
+      <b>Contributor&nbsp;<HelpInfo source="contributor" place="right" />: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}
+    </h5>
+  );
+  return (
+    <div>
+      {contributorBlock}
+      <div>
+        {contributor.affiliations && contributor.affiliations.map((e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>)}
+      </div>
+    </div>
+  );
+};
+
+ContributorInfo.propTypes = {
+  contributor: PropTypes.object,
+  showHelp: PropTypes.bool
+};
+
+ContributorInfo.defaultProps = {
+  contributor: {},
+  showHelp: false
+};
+
+const AffiliationList = ({ affiliations, affiliationMap }) => {
+  const names = [];
+  Object.keys(affiliationMap).map((affiliationId) => {
+    const ind = affiliationMap[affiliationId];
+    names[ind] = affiliations[affiliationId];
+    return null;
+  });
+  return (
+    <div>
+      {names.map(
+        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
+      )}
+    </div>
+  );
+}
+AffiliationList.propTypes = {
+  affiliations: PropTypes.object,
+  affiliationMap: PropTypes.object,
+};
+
+AffiliationList.defaultProps = {
+  affiliations: {},
+  affiliationIds: {},
+};
+
+class ClipboardCopyLink extends Component {
+  constructor(props) {
+    super(props)
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+      >
+        <div role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn clip-copy" >{this.props.text}</div>
+      </OverlayTrigger>
+    );
+  }
+}
+
+class ClipboardCopyBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">{this.props.tooltip || 'copy to clipboard'}</Tooltip>}
+      >
+        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
+          <i className="fa fa-clipboard" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
+
+const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
+  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
+  if (sample_svg_file && sample_svg_file != '') {
+    svgPath = `/images/samples/${sample_svg_file}`;
+  }
+  const tagData = molecule.tag && molecule.tag.taggable_data;
+  const pubchemInfo = {
+    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
+  };
+  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
+    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
+  const registedCompoundTooltip = (
+    <div>
+      For availability please contact the Compound Platform team with the blue button given below. An explanation can be accessed via our Youtube channel&nbsp;
+      <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play" style={{ color: 'red', fontSize: '150%' }} /></a>&nbsp;
+      or on our how-to pages
+      <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
+    </div>
+  );
+  return (
+    <Row>
+      <Col sm={4} md={4} lg={4}>
+        {resizableSvg(svgPath)}
+      </Col>
+      <Col sm={8} md={8} lg={8}>
+        {nameOrFormula}
+        <br />
+        <span style={hideInfo(molecule)}>
+          <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
+          <h5><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+          <h5><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+          <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
+        </span>
+        {
+          hasXvial ?
+            <div className="repo-registed-compound-desc">
+              A physical sample of this molecule was registered to the Molecule Archive of the
+              Compound Platform&nbsp;
+              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
+                <i className="fa fa-info-circle" aria-hidden="true" />
+              </OverlayTrigger>
+            </div> : null
+        }
+        <h5>
+          <b>Crosslinks: </b>
+          &nbsp;&nbsp;
+          <PubchemLabels element={pubchemInfo} />
+          <ChemotionTag tagData={tagData} />
+        </h5>
+      </Col>
+    </Row>
+  );
+};
+
+const RenderAnalysisHeader = (props) => {
+  const {
+    element, isPublic, isLogin, isReviewer, updateRepoXvial, xvialCom, userInfo, reactionId, literatures
+  } = props;
+  const svgPath = `/images/samples/${element.sample_svg_file}`;
+  let doiLink = '';
+  const molecule = element.molecule || {};
+  if (isPublic) {
+    doiLink = element.tag && element.tag.taggable_data && element.tag.taggable_data.publication && element.tag.taggable_data.publication.doi;
+  } else {
+    doiLink = (element.doi && element.doi.full_doi) || '';
+  }
+  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+    ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
+    : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
+
+  const iupacUserDefined = element.showed_name == (molecule.iupac_name)
+    ? <span />
+    : <h5><b>Name: </b> {element.showed_name} </h5>;
+
+  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
+  const crsId = (element.publication && element.publication.id) || '';
+  const xvial = (element.tag && element.tag.taggable_data && element.tag.taggable_data.xvial && element.tag.taggable_data.xvial.num) || '';
+  const references = literatures ? literatures.map(lit => (
+    <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+      <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
+      <Citation key={lit.id} literature={lit} />
+    </li>
+  )) : [];
+  return (
+    <div>
+      <br />
+      <Row style={rinchiStyle}>
+        <Col sm={6} md={6} lg={6}>
+          {resizableSvg(svgPath)}
+        </Col>
+        <Col sm={6} md={6} lg={6}>
+          <span className="repo-pub-sample-header">
+            <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={element.id} type="sample" /></span>&nbsp;
+            <span className="repo-pub-title"><b>Product</b></span>&nbsp;
+            <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={element.id} data={xvial} saveCallback={updateRepoXvial} xvialCom={xvialCom} />
+            <RepoPublicComment isReviewer={isReviewer} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} userInfo={userInfo} pageType="reactions" pageId={reactionId} />&nbsp;
+            <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
+            <br /><br />
+          </span>
+          <span style={hideInfo(molecule)}>
+            {nameOrFormula}
+            {iupacUserDefined}
+            <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
+            <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
+            <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
+            <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
+          </span>
+          <h6><b>Sample DOI: </b>
+            {
+              isPublic ?
+              (
+                <span className="sub-title" inline="true">
+                  <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+                    {doiLink}
+                  </Button>
+                  <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                  <DownloadMetadataBtn type="sample" id={element.id} />
+                  <DownloadJsonBtn type="sample" id={element.id} />
+                </span>
+              )
+              :
+              (
+                <span className="sub-title" inline="true">
+                  {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                </span>
+              )
+            }
+          </h6>
+          <h6>
+            <b>Sample ID: </b>
+            <Button key={`reaction-jumbtn-${element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
+              CRS-{crsId}
+            </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
+          </h6>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          <h5><b>Reference{references.length > 1 ? 's' : null} in the Literature: </b></h5>
+          <ul style={{ listStyle: 'none' }}>{references}</ul>
+          <RepoSegment segments={element.segments} />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
+  <span
+    role="presentation"
+    className="label label-default"
+    style={{
+      backgroundColor: '#777777',
+      color: 'white',
+      fontSize: 'smaller',
+      fontWeight: 'bold',
+      cursor: 'pointer',
+      borderRadius: 'unset'
+    }}
+    onClick={onClick}
+  >
+    {name} &nbsp;<i className={`fa fa-caret-${indicatorStyle}`} aria-hidden="true" />
+  </span>
+);
+
+ToggleIndicator.propTypes = {
+  indicatorStyle: PropTypes.string,
+  name: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+ToggleIndicator.defaultProps = {
+  indicatorStyle: '',
+  name: '',
+};
+
+
+const ReactionTable = ({
+  reaction, toggle, show, bodyAttrs, canComment, isPublic = true, isReview = false
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+  const showIndicator = (show) ? 'down' : 'right';
+
+  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+    reaction.publication.taggable_data.scheme_only === true) || false;
+
+  if (isPublic) {
+    ({ schemes } = reaction);
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s);
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s);
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s);
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s);
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => {
+    return (target ? (target * multi).toFixed(precision) : ' - ')
+  }
+
+  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        if (schemeOnly === true) {
+          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`;
+        } else {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
+        }
+        break;
+      case 'solvents':
+        if (isPublic) {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
+        } else {
+          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`;
+        }
+        break;
+      default:
+        val = materialCalc(s.equivalent, 1, 3)
+    }
+    return (
+      val
+    );
+  };
+
+  const rows = (samples, isReview = false) => {
+    let currentType = '';
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          const rLabel = (sample.short_label || '').concat('   ', sample.name || '');
+          const useName = isPublic ? (sample.molecule_iupac_name || sample.iupac_name || sample.sum_formular) : (sample.molecule_iupac_name);
+          let label = isReview ? (<span>{rLabel}<br />{useName}</span>) : useName;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (currentType === 'products') ? (<tr><td colSpan="6"><b>{matType}</b></td><td style={{ fontWeight: 'bold', textAlign: 'center' }}>Yield</td></tr>) : (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    );
+  };
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount [mg]</th>
+          <th style={{ textAlign: 'center' }}>Volume [mL]</th>
+          <th style={{ textAlign: 'center' }}>Amount [mmol]</th>
+          <th style={{ textAlign: 'center' }}>Equiv</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes, isReview))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionRinChiKey = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorRinchi = (show) ? 'down' : 'right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionProperties = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorProp = (show) ? 'down' : 'right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status: </b>{reaction.status}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Duration: </b>{CalcDuration(reaction)}
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionTlc = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorTlc = (show) ? 'down' : 'right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.rf_value && reaction.rf_value !== '0' ? reaction.rf_value : ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
+              <Col sm={10} md={10} lg={10}>
+                <div style={{ whiteSpace: 'pre' }}>
+                  {reaction.tlc_description || ''}
+                </div>
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const InputFieldYield = (props) => {
+  return (
+    <FormGroup>
+      <InputGroup>
+        <FormControl
+          type="text"
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          value={props.value || 0}
+          placeholder="Input Yield..."
+          onChange={event => props.onInputChange(props.product, event)}
+        />
+        <InputGroup.Addon>%</InputGroup.Addon>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const InputFieldDuration = props =>
+  (
+    <InputButtonField
+      label="Duration"
+      value={props.durationValue || ''}
+      field="duration"
+      btnValue={props.durationUnit || ''}
+      btnField="durationUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch duration unit"
+    />
+  );
+
+const InputFieldTemperture = props =>
+  (
+    <InputButtonField
+      label="Temperature"
+      value={props.temperatureDisplay || ''}
+      field="temperature"
+      btnValue={props.temperatureUnit || ''}
+      btnField="temperatureUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch temperature unit"
+    />
+  );
+
+const ReactionTableEdit = ({
+  reaction, bodyAttrs, isPublic = true,
+  onInputChange
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+
+  if (isPublic) {
+    schemes = reaction.schemes;
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s)
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
+  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        val = materialCalc(s.equivalent * 100, 1, 0);
+        break;
+      default:
+        return <div />;
+    }
+    return (
+      <Form inline>
+        <InputFieldYield
+          value={val}
+          product={s}
+          onInputChange={onInputChange}
+        />
+      </Form>
+    );
+  };
+
+  const rows = (samples) => {
+    let currentType = '';
+
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    )
+  };
+
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount(g)</th>
+          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
+          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
+          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <Label>Reaction Table</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionPropertiesEdit = ({
+  reaction, bodyAttrs,
+  onInputChange, onUnitChange
+}) =>
+  (
+    <span>
+      <Label>Properties</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status</b><div>{reaction.status}</div>
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldTemperture
+                  temperatureDisplay={reaction.temperature_display}
+                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldDuration
+                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
+                  durationUnit={reaction.durationUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+
+const ReactionSchemeOnlyInfo = ({
+  reaction, isPublic = true, schemeDesc,
+  onYieldChange, onPropertiesChange, onUnitChange
+}) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTableEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              isPublic={isPublic}
+              onInputChange={onYieldChange}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <Checkbox
+              checked={schemeDesc}
+              onChange={() => { onPropertiesChange('schemeDesc'); }}
+            >
+              <span>add the description field?</span>
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionPropertiesEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              onInputChange={onPropertiesChange}
+              onUnitChange={onUnitChange}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
+  toggleRinchi, showRinchi,
+  toggleProp, showProp,
+  toggleTlc, showTlc,
+  schemeOnly = false, onToggle = () => {}
+ }) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+  const content = reaction.description;
+  const additionInfo = reaction.observation;
+
+  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
+
+  const descQV = contentlength > 0 ?
+  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
+  const addQV = additionlength > 0 ?
+  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
+
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  if (schemeOnly) {
+    return (
+      <RepoReactionSchemeInfo
+        reaction={reaction}
+        svgPath={svgPath}
+        showScheme={showScheme}
+        showRinchi={showRinchi}
+        showProp={showProp}
+        bodyAttrs={bodyAttrs}
+        onToggle={onToggle}
+      />
+    );
+  }
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTable
+              reaction={reaction}
+              toggle={toggleScheme}
+              show={showScheme}
+              isPublic={isPublic}
+              isReview={false}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+            <div className="desc small-p">
+              {addQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={reaction}
+              toggle={toggleRinchi}
+              show={showRinchi}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionProperties
+              reaction={reaction}
+              toggle={toggleProp}
+              show={showProp}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTlc
+              reaction={reaction}
+              toggle={toggleTlc}
+              show={showTlc}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const AnalysisHeaderSample = ({ sample, sampleType }) => {
+  const svgPath = `/images/samples/${sample.sample_svg_file}`;
+  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
+  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
+  return (
+    <div className="svg-container">
+      <Row style={rinchiStyle}>
+        <Col sm={4} md={4} lg={4}>
+          <SVG key={svgPath} src={svgPath} className="sample-details" />
+        </Col>
+        <Col sm={8} md={8} lg={8}>
+          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
+          <b> Sample DOI: </b>
+          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+            {doiLink}
+          </Button>
+          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+          <DownloadMetadataBtn type="sample" id={sample.id} />
+          <DownloadJsonBtn type="sample" id={sample.id} />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+AnalysisHeaderSample.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  sampleType: PropTypes.string,
+};
+
+AnalysisHeaderSample.defaultProps = {
+  sample: {},
+  sampleType: '',
+};
+
+class RenderPublishAnalysesPanel extends Component {
+  header() {
+    const {
+      analysis, isPublic, userInfo, isLogin, isReviewer, pageId, type, pageType, element
+    } = this.props;
+    const content = analysis.extended_metadata['content'];
+    const previewImg = previewContainerImage(analysis);
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    const doiLink = (isPublic === false) ? (
+      <div className="sub-title" inline="true">
+        <b>Analysis DOI: </b>
+        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+      </div>
+    ) : (
+      <div className="sub-title" inline="true">
+        <b>Analysis DOI: </b>
+        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+          {analysis.dataset_doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+        <DownloadMetadataBtn type="container" id={analysis.id} />
+        <DownloadJsonBtn type="container" id={analysis.id} />
+      </div>
+    );
+
+    const insText = instrumentText(analysis);
+    const crdLink = (isPublic === false) ? (
+      <div className="sub-title" inline="true">
+        <b>Reaction ID: </b>
+        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+          CRD-{analysis.pub_id}
+        </Button>
+        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{insText}
+
+      </div >
+    ) : (
+      <div className="sub-title" inline="true">
+        <b>Reaction ID: </b>
+        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+          CRD-{analysis.pub_id}
+        </Button>
+        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+      </div >
+    );
+
+    return (
+      <div className="repo-analysis-header">
+        <RepoPreviewImage
+          element={element}
+          analysis={analysis}
+          isLogin={isLogin}
+          previewImg={previewImg}
+          title={kind}
+        />
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title">
+              <b>{kind}</b>&nbsp;<RepoMolViewerListBtn el={element} container={analysis} isPublic={isPublic} />
+              <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
+              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
+            </div>
+            {doiLink}
+            {crdLink}
+          </div>
+          <div className="desc small-p expand-p">
+            <OverlayTrigger placement="bottom" overlay={<Tooltip id="_tip_dataset_quill_viewer">copy to clipboard</Tooltip>}>
+              <div className="repo-quill-viewer" tabIndex={0} role="button" onClick={() => { navigator.clipboard.writeText(contentToText(content)); }}>
+                <QuillViewer value={content} />
+              </div>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {this.header()}
+        <div>
+          <b>Datasets</b>
+          <RepoContainerDatasets
+            container={this.props.analysis}
+            isPublic={this.props.isPublic}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+class RenderPublishAnalyses extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  header() {
+    const { analysis } = this.props;
+    const content = analysis.extended_metadata['content'];
+    const previewImg = previewContainerImage(analysis);
+
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    let hasPop = true;
+    let fetchNeeded = false;
+    let fetchId = 0;
+    let fetchFilename = '';
+    if (previewImg.startsWith('data:image')) {
+      fetchNeeded = true;
+      fetchId = analysis.preview_img.id;
+      fetchFilename = analysis.preview_img.filename;
+    } else {
+      hasPop = false;
+    }
+
+    return (
+      <div
+        className="analysis-header"
+      >
+        <div className="preview">
+          <ImageModal
+            hasPop={hasPop}
+            previewObject={{
+              src: previewImg
+            }}
+            popObject={{
+              title: kind,
+              src: previewImg,
+              fetchNeeded,
+              fetchId,
+              fetchFilename
+            }}
+          />
+        </div>
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title" inline="true">
+              <b>Analysis DOI: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+                {analysis.dataset_doi}
+              </Button>
+              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+              <DownloadMetadataBtn type="container" id={analysis.id} />
+              <DownloadJsonBtn type="container" id={analysis.id} />
+            </div>
+            <div className="sub-title" inline="true">
+              <b>Reaction ID: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+                CRD-{ analysis.pub_id }
+              </Button>
+              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+            </div>
+            <div className="desc small-p">
+              <b>Content: </b> &nbsp;&nbsp;
+              <ClipboardCopyLink text={contentToText(content)}>
+              <QuillViewer value={content}  />
+            </ClipboardCopyLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { analysis, expanded, elementType } = this.props;
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    const AffiliationMap = (affiliationIds) => {
+      const aId = affiliationIds.length > 0 ? ([].concat.apply(...affiliationIds)) : [];
+      const affiliationMap = {};
+      let aCount = 0;
+      aId.map((e) => {
+        if (!affiliationMap[e]) {
+          aCount += 1;
+          affiliationMap[e] = aCount;
+        }
+      });
+      return affiliationMap;
+    };
+    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids || []);
+    const time = new Date(this.props.publication && this.props.publication.published_at);
+    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    return (
+      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
+        <Panel.Heading style={{ border: 'unset' }}>
+          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
+            <LicenseIcon
+              license={this.props.license}
+              hasCoAuthors={(this.props.publication.author_ids.length > 1)}
+            />
+          </h4>
+          <p>&nbsp;</p>
+          <b>{kind}</b>&nbsp;
+          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
+            <small><b>{ElementIcon(elementType)}</b></small>
+          </div>
+          <h5>
+            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
+            <AuthorList
+              creators={this.props.publication.creators}
+              affiliationMap={affiliationMap}
+            />
+          </h5>
+          <AffiliationList
+            affiliations={this.props.publication.affiliations}
+            affiliationMap={affiliationMap}
+          />
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
+            {this.header()}
+            <Col md={12}>
+              <b>Datasets</b>
+              <RepoContainerDatasets
+                container={this.props.analysis}
+                isPublic={this.props.isPublic}
+              />
+            </Col>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    );
+  }
+}
+
+RenderPublishAnalyses.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  elementType: PropTypes.string.isRequired,
+  license: PropTypes.string.isRequired,
+  publication: PropTypes.shape({
+    author_ids: PropTypes.arrayOf(PropTypes.number),
+    creators: PropTypes.arrayOf(PropTypes.object),
+    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
+    affiliations: PropTypes.object,
+    published_at: PropTypes.string,
+  }).isRequired,
+  isPublic: PropTypes.bool.isRequired
+};
+
+class PublishAnalysesTag extends Component {
+  constructor(props) {
+    super(props);
+    const { reaction, analysis, analysesType, product } = props;
+    this.state = {
+      reaction,
+      analysis,
+      analysesType,
+      product
+    };
+    this.handleCheck = this.handleCheck.bind(this);
+  }
+
+  handleCheck(e, elementType) {
+    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
+      e.extended_metadata.publish = false;
+    } else {
+      e.extended_metadata.publish = true;
+    }
+    this.props.handleAnalysesChecked(e, elementType);
+  }
+
+  generateTitle() {
+    const {
+      reaction, analysis, analysesType, product
+    } = this.state;
+    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
+    const { content } = analysis.extended_metadata;
+    const status = analysis.extended_metadata.status || '';
+    const previewImg = previewContainerImage(analysis);
+    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
+
+    let statusMissing = false;
+    let nmrMissing = false;
+    let datasetMissing = false;
+    if (analysesType === 'Product') {
+      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
+      nmrMissing = !isNmrPass(analysis, product);
+      datasetMissing = !isDatasetPass(analysis);
+    }
+    const constructBtnTip = () => {
+      const tip = [];
+      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
+        if (typeMissing) tip.push('Type is invalid.');
+        if (statusMissing) tip.push('Status must be Confirmed.');
+        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
+        if (datasetMissing) {
+          tip.push('Dataset is incomplete. Please check that: ');
+          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
+          tip.push('2. the instrument field is not empty.');
+        }
+        return tip.join('\r\n');
+      }
+      return 'publish this analysis';
+    };
+    const btnTip = constructBtnTip();
+
+    let statusChk = false;
+    let statusMsg = '';
+    let typeChk = false;
+    if (analysesType === 'Product') {
+      statusChk = (status !== 'Confirmed' || nmrMissing);
+      statusMsg = nmrMsg(product, analysis);
+      typeChk = (kind === '');
+    }
+
+    if (!analysis.extended_metadata.kind) {
+      analysis.extended_metadata.publish = false;
+    }
+    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
+      && !statusMissing && !nmrMissing && !datasetMissing) || false;
+    let analysesIcon = '';
+    switch (analysesType) {
+      case 'Reaction':
+        analysesIcon = <i className="icon-reaction" />;
+        break;
+      case 'Product':
+        analysesIcon = <i className="icon-sample" />;
+        break;
+      default:
+        analysesIcon = '';
+    }
+
+    return (
+      <div
+        className="analysis-header order"
+      >
+        <div className="preview">
+          <img src={previewImg} alt="preview" />
+        </div>
+        <div className="abstract">
+          <div className="upper-btn">
+            <div
+              className="button-right"
+            >
+              &nbsp;{analysesIcon}
+            </div>
+            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
+            <span
+              className="button-right add-to-report"
+              onClick={stopBubble}
+            >
+              <OverlayTrigger
+                placement="left"
+                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
+              >
+                <div>
+                  <Checkbox
+                    onChange={() => { this.handleCheck(analysis, analysesType); }}
+                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
+                    defaultChecked={isPublish}
+                  >
+                    {
+                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
+                        <span style={{ color: 'red' }}>Add to publication</span>
+                      :
+                        <span>Add to publication</span>
+                    }
+                  </Checkbox>
+                </div>
+              </OverlayTrigger>
+            </span>
+          </div>
+          <div className="lower-text">
+            <div className="main-title">
+              {analysis.name}
+            </div>
+            {
+              typeChk ?
+                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
+                :
+                <div className="sub-title">Type: {kind}</div>
+            }
+            {
+              statusChk ?
+                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
+                :
+                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
+            }
+            <div className="desc sub-title">
+              <span style={{ float: 'left', marginRight: '5px' }}>
+                Content:
+              </span>
+              <QuillViewer value={content} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
+        <Panel.Heading>
+          <Panel.Title toggle>
+            {this.generateTitle()}
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body collapsible>
+          <ContainerComponent readOnly container={this.props.analysis} />
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+PublishAnalysesTag.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  analysis: PropTypes.object.isRequired,
+  analysesType: PropTypes.string,
+  handleAnalysesChecked: PropTypes.func.isRequired,
+  product: PropTypes.object
+};
+PublishAnalysesTag.defaultProps = {
+  analysesType: '',
+  product: null
+};
+
+RenderPublishAnalysesPanel.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  type: PropTypes.string.isRequired,
+  userInfo: PropTypes.string,
+  isPublic: PropTypes.bool,
+  isLogin: PropTypes.bool,
+  isReviewer: PropTypes.bool,
+  pageId: PropTypes.number,
+  pageType: PropTypes.string
+};
+
+RenderPublishAnalysesPanel.defaultProps = {
+  userInfo: '',
+  isPublic: true,
+  isLogin: false,
+  isReviewer: false,
+  pageId: null,
+  pageType: 'reactions'
+};
+
+ReactionTable.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object,
+  isPublic: PropTypes.bool.isRequired
+};
+
+ReactionTable.defaultProps = {
+  isPublic: true,
+  showScheme: false
+};
+
+ReactionRinChiKey.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionProperties.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionTlc.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+const DatasetDetail = ({ isPublished, element }) => {
+  const { molecule } = element;
+  molecule.tag = {
+    taggable_data: { pubchem_cid: molecule.pubchem_cid }
+  };
+
+  const moleculeView = molecule.inchikey === null ? (<span />) : (<MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />);
+  const datasetView = !element ? (
+    <span>There is no published dataset</span>
+  ) : (
+    <RenderPublishAnalyses
+      key={`${element.id}-${element.updated_at}`}
+      analysis={element.dataset}
+      expanded
+      elementType="Sample"
+      license={element.license}
+      publication={element.publication}
+      isPublic={isPublished}
+    />
+  );
+
+  return (
+    <Grid>
+      {moleculeView}
+      <br /><br />
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          {datasetView}
+        </Col>
+      </Row>
+    </Grid>
+  );
+};
+
+DatasetDetail.propTypes = {
+  element: PropTypes.object.isRequired, isPublished: PropTypes.bool.isRequired
+};
+
+const ClosePanel = ({ element }) => (
+  <div>
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        className="button-right"
+        onClick={() => PublicActions.close(element, true)}
+      >
+        <i className="fa fa-times" />
+      </Button>
+    </OverlayTrigger>
+  </div>
+);
+
+ClosePanel.propTypes = {
+  element: PropTypes.object.isRequired,
+};
+
+const CommentBtn = (props) => {
+  const {
+    canComment,
+    review_info,
+    onShow,
+    field,
+    review,
+    orgInfo
+  } = props;
+
+  if (!canComment) return '';
+  return (
+    <span>
+      <RepoCommentBtn
+        field={field}
+        review={review}
+        review_info={review_info}
+        orgInfo={orgInfo}
+        onShow={() => onShow(true, field, orgInfo)}
+      />&nbsp;
+    </span>
+  );
+};
+
+CommentBtn.propTypes = {
+  canComment: PropTypes.bool.isRequired,
+  review: PropTypes.object.isRequired,
+  review_info: PropTypes.object,
+  onShow: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  orgInfo: PropTypes.string.isRequired
+};
+
+CommentBtn.defaultProps = {
+  review_info: {}
+};
+
+
+const Doi = (props) => {
+  const {
+    type, id, doi, isPublished
+  } = props;
+  let data = '';
+  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
+  if (isPublished) {
+    data = (
+      <span>
+        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
+          {doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
+        <DownloadMetadataBtn type={type} id={id} />
+        <DownloadJsonBtn type={type} id={id} />
+      </span>
+    );
+  } else {
+    data = (
+      <span>
+        {doi?.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi?.full_doi}`} />
+      </span>
+    );
+  }
+
+  return (
+    <h5>
+      <b>{title}&nbsp;</b>
+      {data}
+    </h5>
+  );
+};
+
+Doi.propTypes = {
+  type: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  doi: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export {
+  AnalysisHeaderSample,
+  AnalysesTypeJoinLabel,
+  AffiliationList,
+  AuthorList,
+  AuthorTitle,
+  BackSoonPage,
+  CalcDuration,
+  ChemotionId,
+  ClipboardCopyLink,
+  ClipboardCopyBtn,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  DateFormatYMDLong,
+  DateFormatDMYTime,
+  DatasetDetail,
+  Doi,
+  DownloadDOICsv,
+  DownloadMetadataBtn,
+  DownloadJsonBtn,
+  EditorTips,
+  ElementIcon,
+  ElStateLabel,
+  ElSubmitTime,
+  ElAspect,
+  EmbargoCom,
+  IconToMyDB,
+  ChecklistPanel,
+  isNmrPass,
+  isDatasetPass,
+  HomeFeature,
+  MoleculeInfo,
+  NewsroomTemplate,
+  PublishAnalysesTag,
+  PublishTypeAs,
+  ReactionSchemeOnlyInfo,
+  ReactionInfo,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalyses,
+  RenderPublishAnalysesPanel,
+  resizableSvg,
+  SchemeWord,
+  SidToPubChem,
+  OrcidIcon,
+  ShowIndicator,
+  SvgPath,
+  ToggleIndicator,
+  CollectionDesc
+};
diff --git a/app/packs/src/libHome/RepoContact.js b/app/packs/src/libHome/RepoContact.js
new file mode 100644
index 000000000..1c44e4b30
--- /dev/null
+++ b/app/packs/src/libHome/RepoContact.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Well, Col, Row } from 'react-bootstrap';
+
+const RepoContact = () => {
+  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />kit.edu</span>;
+  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
+  return (
+    <div >
+      <br /><br /><br />
+      <Well style={{ width: '90%', margin: 'auto' }}>
+        <Row>
+          <Col md={6}>
+            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
+              <tbody>
+                <tr><td><h3>Complat</h3><br /><br /></td></tr>
+                <tr><td>{institute}</td></tr>
+                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
+                <tr><td>Building 341</td></tr>
+                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
+                <tr><td>Germany<br /><br /></td></tr>
+                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
+                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
+                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
+              </tbody>
+            </table>
+          </Col>
+          <Col md={6}>
+            <iframe
+              title="Complat location"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
+              style={{
+                width: '80%', height: 400, frameborder: '0', margin: 'auto'
+              }}
+            />
+          </Col>
+        </Row>
+      </Well>
+      <br /><br /><br />
+    </div>
+  );
+};
+
+export default RepoContact;
diff --git a/app/packs/src/libHome/RepoContainerDatasets.js b/app/packs/src/libHome/RepoContainerDatasets.js
new file mode 100644
index 000000000..09d3a3149
--- /dev/null
+++ b/app/packs/src/libHome/RepoContainerDatasets.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
+import ContainerDatasetModal from '../components/ContainerDatasetModal';
+import ContainerDatasetField from '../components/ContainerDatasetField';
+
+export default class RepoContainerDatasets extends Component {
+  constructor(props) {
+    super(props);
+    const { container } = props;
+    this.state = {
+      container,
+      modal: {
+        show: false,
+        dataset_container: null
+      }
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    });
+  }
+
+  handleModalOpen(datasetContainer) {
+    const { modal } = this.state;
+    modal.dataset_container = datasetContainer;
+    modal.show = true;
+    this.setState({ modal });
+  }
+
+  handleModalHide() {
+    const { modal } = this.state;
+    modal.show = false;
+    modal.dataset_container = null;
+    this.setState({ modal });
+    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
+    document.body.className = document.body.className.replace('modal-open', '');
+  }
+
+  render() {
+    const { container, modal } = this.state;
+
+    if (container.children.length > 0) {
+      return (
+        <div>
+          <ListGroup style={{ marginBottom: 20 }}>
+            {container.children.map((datasetContainer) => {
+              return (
+                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} className="repo-analysis-listgroup">
+                  <ContainerDatasetField
+                    dataset_container={datasetContainer}
+                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
+                    disabled
+                    isPublic={this.props.isPublic}
+                  />
+                </ListGroupItem>
+              );
+            })}
+          </ListGroup>
+          <hr style={{ borderColor: '#ddd' }} />
+          <ContainerDatasetModal
+            onHide={() => this.handleModalHide()}
+            show={modal.show}
+            readOnly
+            dataset_container={modal.dataset_container}
+            disabled
+          />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
+          <h5>There are currently no Datasets.</h5>
+        </Well>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoDirective.js b/app/packs/src/libHome/RepoDirective.js
new file mode 100644
index 000000000..de44abfb5
--- /dev/null
+++ b/app/packs/src/libHome/RepoDirective.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+import { Parser } from 'html-to-react';
+
+export default class RepoDirective extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      content: <div />
+    };
+  }
+
+  componentDidMount() {
+    fetch('/directives/directives.html', { credentials: 'same-origin' })
+      .then(res => res.text())
+      .then((html) => {
+        // const parser = new HtmlToReactParser();
+        this.setState({ content: Parser().parse(html) });
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  render() {
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={3} />
+        <Col md={6}>
+          <Panel>
+            <Panel.Heading>
+              <Panel.Title>Directive to use the service</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
+              {this.state.content}
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={3} />
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
new file mode 100644
index 000000000..63b7d16d8
--- /dev/null
+++ b/app/packs/src/libHome/RepoElementDetails.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import { DatasetDetail } from './RepoCommon';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoElementDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentElement: PublicStore.getState().currentElement,
+      elementType: PublicStore.getState().elementType
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType, listType } = this.state;
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'dataset': return <DatasetDetail isPublished element={currentElement} />;
+      case 'molecule': return (
+        <RepoSampleDetails
+          isPublished
+          element={currentElement}
+          review_info={this.state.review_info}
+          review={this.state.review || {}}
+          listType={listType}
+        />);
+      case 'reaction': return (
+        <RepoReactionDetails
+          isPublished
+          reaction={currentElement}
+          review_info={this.state.review_info}
+          review={this.state.review || {}}
+        />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none', maxHeight: '80%' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
new file mode 100644
index 000000000..56af4c12e
--- /dev/null
+++ b/app/packs/src/libHome/RepoEmbargo.js
@@ -0,0 +1,386 @@
+import React, { Component } from 'react';
+import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
+import Select from 'react-select';
+import { filter } from 'lodash';
+import RepoEmbargoDetails from './RepoEmbargoDetails';
+import EmbargoActions from '../components/actions/EmbargoActions';
+import EmbargoStore from '../components/stores/EmbargoStore';
+import { ElAspect } from './RepoCommon';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import { MetadataModal, InfoModal } from './RepoEmbargoModal';
+import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
+import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
+
+export default class RepoEmbargo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      current_user: {},
+      currentElement: null,
+      moveElement: {},
+      newEmbargo: null,
+      selectEmbargo: null,
+      bundles: [],
+      showConfirmModal: false,
+      showMoveModal: false,
+      showInfoModal: false,
+      showAuthorModal: false,
+      showMetadataModal: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
+    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
+    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
+    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
+    this.handleMoveShow = this.handleMoveShow.bind(this);
+    this.handleMoveClose = this.handleMoveClose.bind(this);
+    this.handleInfoShow = this.handleInfoShow.bind(this);
+    this.handleInfoClose = this.handleInfoClose.bind(this);
+    this.handleAuthorShow = this.handleAuthorShow.bind(this);
+    this.handleAuthorClose = this.handleAuthorClose.bind(this);
+    this.handleMetadataShow = this.handleMetadataShow.bind(this);
+    this.handleMetadataClose = this.handleMetadataClose.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  componentDidMount() {
+    EmbargoStore.listen(this.onChange);
+    EmbargoActions.fetchEmbargoBundle();
+  }
+
+  componentWillUnmount() {
+    EmbargoStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    let { selectEmbargo, elements, current_user, currentElement, bundles } = this.state;
+    if (state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id) {
+      ({ selectEmbargo } = state);
+    }
+    if (state.elements) { ({ elements } = state); }
+    if (state.current_user) { ({ current_user } = state); }
+    if (!state.currentElement && !this.state.currentElement) {
+      currentElement = null;
+    } else {
+      ({ currentElement } = state);
+    }
+    if (state.bundles) { ({ bundles } = state); }
+    if ((selectEmbargo?.id !== this.state.selectEmbargo?.id)
+      || (JSON.stringify(elements) !== JSON.stringify(this.state.elements))
+      || (current_user?.id !== this.state.current_user?.id)
+      || (currentElement !== this.state.currentElement)
+      || (bundles !== this.state.bundles)) {
+      const validSelect = bundles?.find(b => b.element_id === selectEmbargo?.element_id);
+      if (typeof (validSelect) === 'undefined') {
+        this.setState(prevState => ({ ...prevState, selectEmbargo: null, elements, current_user, currentElement, bundles }));
+      } else {
+        EmbargoFetcher.refreshEmbargo(selectEmbargo || {})
+          .then((result) => {
+            if (!result.error) this.setState(prevState => ({ ...prevState, selectEmbargo: result, elements, current_user, currentElement, bundles }), EmbargoActions.getEmbargoElements(selectEmbargo.element_id));
+          }).catch((errorMessage) => {
+            console.log(errorMessage);
+          });
+      }
+    }
+  }
+
+  onClickDelete() {
+    this.setState({ showConfirmModal: true });
+  }
+
+  handleMoveShow(element) {
+    this.setState({ showMoveModal: true, moveElement: element });
+  }
+
+  handleMoveClose() {
+    this.setState({ showMoveModal: false, moveElement: {} });
+  }
+
+  handleInfoShow() {
+    this.setState({ showInfoModal: true });
+  }
+
+  handleInfoClose() {
+    this.setState({ showInfoModal: false });
+  }
+
+  handleAuthorShow() {
+    this.setState({ showAuthorModal: true });
+  }
+
+  handleAuthorClose() {
+    this.setState({ showAuthorModal: false });
+  }
+
+  handleMetadataShow() {
+    this.setState({ showMetadataModal: true });
+  }
+
+  handleMetadataClose() {
+    this.setState({ showMetadataModal: false });
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ newEmbargo: selectedValue });
+    }
+  }
+
+  handleElementSelection(eventKey, event) {
+    if (eventKey) {
+      const { bundles } = this.state;
+      const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
+      this.setState({ selectEmbargo }, EmbargoActions.getEmbargoElements(eventKey.value));
+    }
+  }
+
+  handleEmbargoAccount() {
+    const { selectEmbargo, current_user } = this.state;
+
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else if (current_user.id !== selectEmbargo.published_by) {
+      alert('only the submitter can generate a temporary account!');
+    } else {
+      EmbargoActions.generateEmbargoAccount(selectEmbargo.element_id);
+      alert(`A temporary account for [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been created. The details have been sent to you by e-mail.`);
+    }
+  }
+
+  handleEmbargoRelease() {
+    const { selectEmbargo, current_user } = this.state;
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else if (current_user.id !== selectEmbargo.published_by) {
+      alert('only the submitter can perform the release!');
+    } else {
+      EmbargoActions.releaseEmbargo(selectEmbargo.element_id);
+      alert(`The embargo on [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been released!`);
+    }
+  }
+
+  handleEmbargoDelete(shouldPerform) {
+    if (shouldPerform) {
+      const { selectEmbargo, current_user } = this.state;
+      if (selectEmbargo === null) {
+        alert('Please select an embargo first!');
+      } else if (current_user.id !== selectEmbargo.published_by) {
+        alert('only the submitter can delete the release!');
+      } else {
+        EmbargoActions.deleteEmbargo(selectEmbargo.element_id);
+      }
+    }
+    this.setState({ showConfirmModal: false });
+  }
+
+  handleMoveEmbargo() {
+    const { selectEmbargo, moveElement, newEmbargo } = this.state;
+    EmbargoActions.moveEmbargo(selectEmbargo.element_id, newEmbargo, moveElement);
+    this.setState({ showMoveModal: false });
+  }
+
+  rendeActionBtn(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const actionButtons = (!selectEmbargo || !current_user || (current_user.id !== selectEmbargo.published_by)) ? <span /> :
+      (
+        <span>
+          <ButtonToolbar>
+            <Button
+              bsStyle="primary"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || elements.length === 0}
+              onClick={() => this.handleEmbargoAccount()}
+            >
+              <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
+            </Button>
+            <Button
+              bsStyle="warning"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
+              onClick={() => this.handleEmbargoRelease()}
+            >
+              <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
+            </Button>
+            <Button
+              bsStyle="danger"
+              id="all-inner-button"
+              disabled={selectEmbargo === null || elements.length !== 0}
+              onClick={() => this.onClickDelete()}
+            >
+              <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
+            </Button>
+          </ButtonToolbar>
+        </span>
+      );
+    const filterDropdown = (
+      <ButtonGroup>
+        {actionButtons}
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  renderSearch(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const options = [];
+    bundles?.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const filterDropdown = (
+      <div className="home-adv-search">
+        <Select
+          value={selectEmbargo && selectEmbargo.element_id}
+          onChange={e => this.handleElementSelection(e)}
+          options={options}
+          style={{ width: '180px' }}
+          clearable={false}
+        />
+        <ButtonGroup>
+          <Button
+            id="all-info-button"
+            disabled={selectEmbargo === null || elements?.length === 0}
+            onClick={() => this.handleMetadataShow()}
+          >
+            <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
+          </Button>
+          <Button
+            id="all-info-button"
+            disabled={selectEmbargo === null || elements?.length === 0}
+            onClick={() => this.handleInfoShow()}
+          >
+            <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
+          </Button>
+          <RepoReviewAuthorsModal
+            element={selectEmbargo}
+            disabled={selectEmbargo === null || elements?.length === 0}
+            schemeOnly={false}
+            taggData={selectEmbargo?.taggable_data}
+          />
+
+        </ButtonGroup>
+      </div>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+  renderMoveModal() {
+    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
+    const options = [
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+
+    bundles?.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const allBundles = filter(options, b => b.value !== (selectEmbargo == null ? '' : selectEmbargo.element_id));
+
+    return (
+      <Modal
+        show={showMoveModal}
+        dialogClassName="move-embargo-dialog"
+        onHide={this.handleMoveClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.taggable_data.label}] to :
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <div>
+                  <Select
+                    value={this.state.newEmbargo}
+                    onChange={e => this.handleEmbargoChange(e)}
+                    options={allBundles}
+                    className="select-assign-collection"
+                  />
+                  <br />
+                  <ButtonToolbar>
+                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
+                  </ButtonToolbar>
+                </div>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    const {
+      elements, bundles, currentElement, currentUser, showConfirmModal, showInfoModal, selectEmbargo, showMetadataModal
+    } = this.state;
+    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
+    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
+    const owner = (selectEmbargo && selectEmbargo.published_by) || 0;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch(bundles)}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div>
+            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+              <Table striped className="review-entries">
+                <tbody striped="true" bordered="true" hover="true">
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, EmbargoActions.displayReviewEmbargo, currentUser, owner, currentElement, this.handleMoveShow)) }
+                </tbody>
+              </Table>
+            </div>
+            {this.rendeActionBtn(bundles)}
+          </div>
+          <ConfirmModal
+            showModal={showConfirmModal}
+            title="Warning"
+            content="Are you sure that you want to delete this ?"
+            onClick={this.handleEmbargoDelete}
+          />
+        </Col>
+        <Col className="review-element" md={currentElement ? 8 : 0}>
+          <RepoEmbargoDetails currentElement={currentElement} />
+          { this.renderMoveModal() }
+
+          <InfoModal
+            showModal={showInfoModal}
+            selectEmbargo={selectEmbargo}
+            onCloseFn={this.handleInfoClose}
+          />
+          <MetadataModal
+            showModal={showMetadataModal}
+            label={la}
+            metadata={metadata}
+            onCloseFn={this.handleMetadataClose}
+            elementId={id}
+            elementType="Collection"
+          />
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
new file mode 100644
index 000000000..f5205fce2
--- /dev/null
+++ b/app/packs/src/libHome/RepoEmbargoDetails.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import EmbargoStore from '../components/stores/EmbargoStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoEmbargoDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    EmbargoStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    EmbargoStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { elementType } = this.state;
+    const { currentElement } = this.props;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction':
+        return (
+          <RepoReactionDetails
+            reaction={currentElement.reaction}
+            canComment
+            review_info={this.state.review_info}
+            showComment={false}
+            btnAction={this.state.btnAction}
+            isReview={false}
+            review={this.state.review}
+          />);
+      case 'sample':
+        return (
+          <RepoSampleDetails
+            element={currentElement}
+            canComment
+            btnAction={this.state.btnAction}
+            review_info={this.state.review_info}
+            showComment={false}
+            review={this.state.review}
+          />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>);
+  }
+}
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
new file mode 100644
index 000000000..c25ad2e27
--- /dev/null
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { AffiliationMap } from 'repo-review-ui';
+import Utils from '../components/utils/Functions';
+import {
+  AffiliationList,
+  AuthorList,
+  ContributorInfo,
+  DownloadMetadataBtn
+} from './RepoCommon';
+
+const Doi = (props) => {
+  const { type, id, doi } = props;
+  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
+  const data = (
+    <span>
+      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>{doi}</Button>
+      <DownloadMetadataBtn type={type} id={id} />
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_clipboard">copy to clipboard</Tooltip>}>
+        <Button onClick={() => { navigator.clipboard.writeText(`https://dx.doi.org/${doi}`); }} bsSize="xsmall" >
+          <i className="fa fa-clipboard" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    </span>
+  );
+  return (
+    <h5>
+      <b>{title} </b>
+      {data}
+    </h5>
+  );
+};
+
+const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {
+  const contentUrl = `/api/v1/public/metadata/download?type=${elementType.toLowerCase()}&id=${elementId}`;
+  return (
+    <div>
+      <Modal
+        show={showModal}
+        onHide={onCloseFn}
+        dialogClassName="news-preview-dialog"
+      >
+        <Modal.Body style={{ overflow: 'auto' }}>
+          <div><h4><Label>{label}</Label></h4></div>
+          <div style={{ maxHeight: '50vh', overflow: 'auto', whiteSpace: 'pre', backgroundColor: 'black', color: 'white', fontFamily: 'monospace' }}>
+            {metadata}
+          </div>
+          <br />
+          <ButtonToolbar>
+            <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
+            <Button bsStyle="primary" onClick={() => Utils.downloadFile({ contents: contentUrl })}> Download</Button>
+          </ButtonToolbar>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+MetadataModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired
+};
+
+const ElementDoi = (edois, isPublished) => {
+  if (edois == null || typeof edois === 'undefined' || edois.length === 0) { return (<div />); }
+  const dois = edois.map(edoi => (<div key={`${edoi.element_type}_${edoi.element_id}`}><Doi type={edoi.element_type} id={edoi.element_id} doi={edoi.doi || ''} isPublished={isPublished} /></div>));
+  return (<div>{dois}</div>);
+};
+
+const InfoModal = ({ showModal, selectEmbargo, onCloseFn, editable=false }) => {
+  const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};
+  const affiliationMap = AffiliationMap(tag.affiliation_ids);
+  const doi = tag.col_doi || '';
+  const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
+  const isPublished = true;
+  const author_ids = tag.author_ids || [];
+  const id = (selectEmbargo && selectEmbargo.element_id) || 0;
+  return (
+    <Modal show={showModal} onHide={onCloseFn} bsSize="large">
+      <Modal.Header closeButton>
+        <Modal.Title>
+          <h4><Label>{la}</Label></h4>
+          <ContributorInfo contributor={tag.contributors} />
+          <h5>
+            <b>Author{author_ids.length > 1 ? 's' : ''}: </b>
+            <AuthorList creators={tag.creators} affiliationMap={affiliationMap} />
+          </h5>
+          <AffiliationList
+            affiliations={tag.affiliations}
+            affiliationMap={affiliationMap}
+          />
+          <Doi type="collection" id={id} doi={doi} isPublished={isPublished} />
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body style={{ height: '50vh', overflow: 'auto' }}>
+        <div>
+          {ElementDoi(tag.element_dois, isPublished)}
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonToolbar>
+          <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
+        </ButtonToolbar>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export { MetadataModal, InfoModal };
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
new file mode 100644
index 000000000..db15c8c37
--- /dev/null
+++ b/app/packs/src/libHome/RepoHome.js
@@ -0,0 +1,240 @@
+import React, { Component } from 'react';
+import { Col, Row, Thumbnail } from 'react-bootstrap';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoCardStaticsBoard from './RepoCardStaticsBoard';
+import RepoCardIntro from './RepoCardIntro';
+import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
+
+const PartnersInfo = (info) => {
+  const { header, img, content } = info;
+  const imgSrc = `/images/repo/${img}`;
+
+  return (
+    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
+      <div className="info">
+        <h4>{header}</h4>
+        <p>{content}</p>
+      </div>
+    </Thumbnail>
+  );
+};
+
+const Infos = [
+  {
+    header: 'Database API',
+    img: 'OAI.png',
+    content: 'The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.',
+  }, {
+    header: 'KIT Stiftung',
+    img: 'KITStiftung.png',
+    content: 'The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.',
+  }, {
+    header: 're3data',
+    img: 're3data.png',
+    content: 'Karlsruhe Institute of Technology Registry of Research Data Repositories',
+  }, {
+    header: 'Inchitrust',
+    img: 'InChITRUST.png',
+    content: 'The KIT has a Supporter Membership.',
+  }, {
+    header: 'Datacite',
+    img: 'DataCite.png',
+    content: 'Helping you to find, access, and reuse data.',
+  }, {
+    header: 'Pubmed',
+    img: 'pubchem.jpg',
+    content: 'All compounds are automatically registered with PubChem.',
+  }, {
+    header: 'Thomson Reuters',
+    img: 'DCIbadge.png',
+    content: 'Datasets are automatically registered at the Data Citation Index.',
+  }, {
+    header: 'DFG',
+    img: 'ri_logo.png',
+    content: 'Listed in the DFG catalogue for Research Infrastructures.',
+  }
+];
+
+class RepoHome extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    PublicActions.lastPublished();
+    PublicActions.publishedStatics();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(PublicState) {
+    if (PublicState.lastPublished || PublicState.publishedStatics) {
+      this.setState(prevState => ({
+        ...prevState,
+        lastPublished: PublicState.lastPublished,
+        publishedStatics: PublicState.publishedStatics
+      }));
+    }
+  }
+
+  render() {
+    const features = {
+      metadata: {
+        fa: 'fa fa-file-code-o',
+        title: 'Metadata',
+        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme.'
+      },
+      doi: {
+        fa: 'fa fa-id-card-o',
+        title: 'DOI',
+        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
+      },
+      license: {
+        fa: 'fa fa-creative-commons',
+        title: 'Licenses',
+        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
+      },
+      embargo: {
+        fa: 'fa fa-ban',
+        title: 'Embargo',
+        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
+      },
+      // usage: {
+      //   fa: 'fa fa-bar-chart',
+      //   title: 'Usage',
+      //   intro: 'Assess your research data and track the published research data......'
+      // },
+      oai: {
+        fa: 'fa fa-tasks',
+        title: 'OAI Provider',
+        intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
+      },
+      dataQuality: {
+        fa: 'fa fa-diamond',
+        title: 'Data Quality',
+        intro: 'Release your research data and pass an internal review that ensures data quality.'
+      },
+      peer: {
+        fa: 'fa fa-external-link',
+        title: 'Peer review',
+        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
+      },
+      store: {
+        fa: 'fa fa-database',
+        title: 'Storage',
+        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
+      },
+      api: {
+        fa: 'fa fa-connectdevelop',
+        title: 'APIs',
+        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
+      }
+    };
+
+    return (
+      <Row className="repo-welcome">
+        <Col lg={12} md={12} sm={12} style={{ display: 'flex', justifyContent: 'center' }}>
+          <img
+            className="icon-chemotion"
+            src="/images/repo/Chemotion-V1.png"
+            key="chemotion_full"
+            alt="Chemotion Repository"
+          />
+        </Col>
+        <Col md={12} sm={12}>
+          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+            <Col md={3} sm={12}>
+              <RepoCardMoleculeArchive publishedStatics={this.state.publishedStatics} />
+            </Col>
+            <Col md={6} sm={12}>
+              <RepoCardIntro lastPublished={this.state.lastPublished} />
+            </Col>
+            <Col md={3} sm={12}>
+              <RepoCardStaticsBoard publishedStatics={this.state.publishedStatics} />
+            </Col>
+          </div>
+        </Col>
+        <Col md={12} sm={12}>
+          <Row>
+            <Col md={2} sm={12}>&nbsp;</Col>
+            <Col md={8} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Features
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.oai.fa} title={features.oai.title} intro={features.oai.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
+                </Col>
+              </Row>
+            </Col>
+            <Col md={2} sm={12}>&nbsp;</Col>
+          </Row>
+          <Row className="card-partners">
+            <Col md={12} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Partners, Affiliations, APIs
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="partner-row" >
+                    { Infos.map((info, index) => PartnersInfo(info, index)) }
+                  </div>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default RepoHome;
diff --git a/app/packs/src/libHome/RepoHowTo.js b/app/packs/src/libHome/RepoHowTo.js
new file mode 100644
index 000000000..00c109964
--- /dev/null
+++ b/app/packs/src/libHome/RepoHowTo.js
@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div style={{ position: 'relative' }}>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (howto) => {
+  let imageUrl = '';
+  if (typeof (howto) !== 'undefined' && howto
+    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+    imageUrl = `/howto/${howto.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      {
+        imageUrl === '' ?
+          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
+            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+          </div>
+          :
+          <img
+            src={imageUrl}
+            style={{
+              display: 'block',
+              width: '100%',
+              height: 'auto'
+            }}
+            alt=""
+          />
+      }
+    </div>
+  );
+};
+
+export default class RepoHowTo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howtos: PublicStore.getState().howtos || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.howtos();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howtos) {
+      this.setState(prevState => ({
+        ...prevState, howtos: state.howtos
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initialHowTo()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_howto_editor
+        });
+      });
+  }
+
+  render() {
+    let { howtos } = this.state;
+    const { isEditor } = this.state;
+    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
+    howtos = orderBy(
+      howtos,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return howtos.length > 0 ? (
+      <Row className="howto_page">
+        <Col lg={12} md={12}>
+          <NewsList howtos={howtos} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) :
+      <Row className="howto_page" style={{ textAlign: 'center' }}>
+        <Col md={12}>
+          <BackSoonPage />
+        </Col>
+      </Row>;
+  }
+}
+
+const NewsColSmall = (param) => {
+  const { howto, isEditor } = param;
+  return (
+    <Col lg={12} md={12} sm={12} className="news_column">
+      <div className="news_card_content">
+        <div className="news_card_s">
+          <Col md={4} sm={12}>{mainImage(howto)}</Col>
+          <Col md={8} sm={12}>
+            <div className="card_info">
+              <div className="info">
+                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
+                <div className="news_content_card_s">
+                  <p />
+                  {howto.firstParagraph}
+                  <p />
+                </div>
+              </div>
+            </div>
+            <div className="read">
+              {renderEditRead(howto, isEditor)}
+            </div>
+          </Col>
+        </div>
+        <div className="news_card_badge_s">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
+          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
+          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
+        </div>
+      </div>
+    </Col>
+  );
+};
+
+const NewsList = (param) => {
+  const { howtos } = param;
+  return howtos.length > 0 ? (
+    <Row>
+      <Col md={1} />
+      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
+        <Row>
+          {
+            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
+          }
+        </Row>
+      </Col>
+      <Col md={1} />
+    </Row>
+  ) : <div />;
+};
+
diff --git a/app/packs/src/libHome/RepoHowToDragSource.js b/app/packs/src/libHome/RepoHowToDragSource.js
new file mode 100644
index 000000000..0873b66a2
--- /dev/null
+++ b/app/packs/src/libHome/RepoHowToDragSource.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const listSource = {
+  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
+
+export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
+
+RepoHowToDragSource.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoHowToDropTarget.js b/app/packs/src/libHome/RepoHowToDropTarget.js
new file mode 100644
index 000000000..09efb95a6
--- /dev/null
+++ b/app/packs/src/libHome/RepoHowToDropTarget.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const stelleTarget = {
+  drop(targetProps, monitor) {
+    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
+    const sourceProps = monitor.getItem();
+    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
+    if (targetTag.sid !== sourceTag.sid) {
+      targetProps.onDrop({ sourceTag, targetTag });
+    }
+  }
+};
+
+const stelleDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+
+class RepoHowToDropTarget extends Component {
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
+  }
+}
+
+export default DropTarget(
+  DragDropItemTypes.HOWTO,
+  stelleTarget, stelleDropCollect
+)(RepoHowToDropTarget);
+
+RepoHowToDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoHowToEditor.js b/app/packs/src/libHome/RepoHowToEditor.js
new file mode 100644
index 000000000..7feca87b5
--- /dev/null
+++ b/app/packs/src/libHome/RepoHowToEditor.js
@@ -0,0 +1,435 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoHowToEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { howto } = this.state;
+    howto.article.push(stelle({ art: e }));
+    this.setState(howto);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { howto } = this.state;
+    const { article } = howto;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    howto.article = article;
+    this.setState(howto);
+  }
+
+  onStelleRemove(e) {
+    const { howto } = this.state;
+    howto.article.splice(e, 1);
+    this.setState(howto);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { howto } = this.state;
+    switch (art) {
+      case 'quill':
+        howto.article[sid].quill = e;
+        this.setState(howto);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.howto && state.howto.key) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, howto: { title: '', content: {}, article: [] }
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { howto } = this.state;
+    switch (type) {
+      case 'title':
+        howto.title = event.currentTarget.value;
+        break;
+      case 'content':
+        howto.content = event;
+        break;
+      case 'published_at':
+        howto.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        howto.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ howto });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { howto } = this.state;
+    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      howto.published_at = DateFormatDMYTime(howto.published_at);
+    }
+    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      howto.firstParagraph = extractIntro(howto.article);
+      ArticleFetcher.createOrUpdateHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              howto: { title: '', content: {}, article: [] },
+              message: { type: 'success', content: 'Send to How-To successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { howto } = this.state;
+      ArticleFetcher.deleteHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { howto } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'howto')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          howto.article[sid].pfad = result.pfad_image;
+          this.setState(howto);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { howto } = this.state;
+    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>How-To Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            {
+              imageUrl === '' ?
+                <div style={{ textAlign: 'center' }}>
+                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+                </div>
+              :
+                <img
+                  src={imageUrl}
+                  style={{
+                    display: 'block',
+                    maxHeight: '100%',
+                    maxWidth: '100%',
+                  }}
+                  alt=""
+                />
+            }
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { howto } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'howto')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            howto.cover_image = result.cover_image;
+            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      howto,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
+    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
+    const stelles = howto.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="howto"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={howto}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>How-To Editor</b></h2>
+              <p>
+                Give Chemotion readers some advice
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={howto.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoHowToReader.js b/app/packs/src/libHome/RepoHowToReader.js
new file mode 100644
index 000000000..4728c4c69
--- /dev/null
+++ b/app/packs/src/libHome/RepoHowToReader.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoHowToReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howto) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    } else {
+      return (
+        <div style={{ textAlign: 'center', height: 'auto' }}>
+          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+        </div>
+      );
+    }
+
+    return (
+      <span>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { howto } = this.state;
+    return (
+      <Row className="howto_page">
+        <Col md={2} />
+        <Col md={8} sm={12}>
+          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+            <Panel.Heading>
+              <Row>
+                <Col md={6} sm={12}>
+                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
+                  <div className="news_author">
+                    <i className="fa fa-user-circle" aria-hidden="true" />
+                    &nbsp;{howto.creator_name}
+                    <p />
+                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
+                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
+                  </div>
+                </Col>
+                <Col md={6} sm={12}>
+                  {this.coverImage()}
+                </Col>
+                <Col md={12} sm={12}>
+                  <div style={{ position: 'relative', marginTop: '10px' }}>
+                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
+                  </div>
+                </Col>
+              </Row>
+              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
+            </Panel.Heading>
+            <Panel.Body>
+              <Col lg={1} md={2}><div /></Col>
+              <Col lg={10} md={8} sm={12}>
+                <div className="news_quillviewer">
+                  {
+                    howto.article ?
+                    howto.article.map((s) => {
+                      if (s.art === 'txt') {
+                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                      }
+                      if (s.art === 'img') {
+                        return (
+                          <div key={uuid.v4()}>
+                            <img src={`/howto/${s.pfad}`} alt="" />
+                            <br />
+                          </div>
+                        );
+                      }
+                    }) : <div />
+                  }
+                </div>
+              </Col>
+              <Col lg={1} md={2}><div /></Col>
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={2} />
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoMolViewerBtn.js b/app/packs/src/libHome/RepoMolViewerBtn.js
new file mode 100644
index 000000000..e4654361b
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerBtn.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+import RepoMolViewerModal from './RepoMolViewerModal';
+
+const viewButtonTip = _short => <Tooltip id={uuid.v4()}>{_short}</Tooltip>;
+
+export default class RepoMolViewerBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { show: false };
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    const { show } = this.state;
+    this.setState({ show: !show });
+  }
+
+  render() {
+    const { fileContent, isPublic } = this.props;
+    const { show } = this.state;
+
+    const tooltip = viewButtonTip('Click to see structure in Viewer');
+
+    return (
+      <>
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <Button className="button-right" bsSize="xsmall" bsStyle="info" onClick={e => this.handleModalOpen(e, true)}>
+            <i className="fa fa-cube" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+        {
+          show ?
+            <RepoMolViewerModal
+              fileContent={fileContent}
+              handleModalOpen={e => this.handleModalOpen(e, false)}
+              show={show}
+              isPublic={isPublic}
+            /> : null
+        }
+      </>
+    );
+  }
+}
+
+RepoMolViewerBtn.propTypes = {
+  fileContent: PropTypes.string.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerListBtn.js b/app/packs/src/libHome/RepoMolViewerListBtn.js
new file mode 100644
index 000000000..bc36b689a
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerListBtn.js
@@ -0,0 +1,81 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { filter } from 'lodash';
+import RepoMolViewerListModal from './RepoMolViewerListModal';
+import ArrayUtils from '../components/utils/ArrayUtils';
+
+export default class RepoMolViewerListBtn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { openModal: false };
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+    this.renderBtn = this.renderBtn.bind(this);
+  }
+
+  handleModalOpen(e) {
+    if (e) { e.stopPropagation(); }
+    const { openModal } = this.state;
+    this.setState({ openModal: !openModal });
+  }
+
+  renderBtn(disabled) {
+    const btnStyle = disabled ? 'default' : 'info';
+    const tipDesc = disabled ? ' (Nothing to view)' : '';
+    const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
+    const className = this.props.isPublic ? '' : '';
+    return (
+      <OverlayTrigger
+        placement="top"
+        delayShow={500}
+        overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
+      >
+        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick}>
+          <i className="fa fa-cube" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  render() {
+    const { el, container, isPublic } = this.props;
+    const { openModal } = this.state;
+    if (!el) return null;
+
+    if (container?.children?.length < 1) { return this.renderBtn(true); }
+
+    let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+
+    datasetContainer = datasetContainer?.map((dc) => {
+      const ds = Object.assign({}, dc);
+      const { attachments } = ds;
+      ds.attachments = attachments?.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment?.filename?.match(/\.([^.]+)$/) && attachment?.filename?.match(/\.([^.]+)$/)[1]?.toLowerCase()));
+      if (ds.attachments.length > 0) return ds;
+      return null;
+    });
+
+    datasetContainer = datasetContainer.filter(dc => dc !== null);
+    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
+
+    return (
+      <>
+        {this.renderBtn(false)}
+        <RepoMolViewerListModal
+          handleModalOpen={this.handleModalOpen}
+          show={openModal}
+          title={el.short_label}
+          datasetContainer={datasetContainer}
+          isPublic={isPublic}
+        />
+      </>
+    );
+  }
+}
+
+RepoMolViewerListBtn.propTypes = {
+  el: PropTypes.object.isRequired,
+  container: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerListModal.js b/app/packs/src/libHome/RepoMolViewerListModal.js
new file mode 100644
index 000000000..62680753b
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerListModal.js
@@ -0,0 +1,117 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+
+export default class RepoMolViewerListModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: null,
+      activeKey: 1
+    };
+
+    this.list = this.list.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleFile = this.handleFile.bind(this);
+  }
+
+  handleSelect(e, activeKey) {
+    e.stopPropagation();
+    this.setState({ activeKey });
+  }
+
+  handleFile(e, attachment, ds) {
+    e.stopPropagation();
+    this.setState({ selected: { ...attachment, dsName: ds.name } });
+  }
+
+  list() {
+    const { datasetContainer } = this.props;
+    const { selected, activeKey } = this.state;
+    const defaultActiveKey = datasetContainer[0].id;
+    return (
+      <PanelGroup
+        accordion
+        id="accordion-controlled-example"
+        defaultActiveKey={defaultActiveKey}
+        style={{ width: '100%', height: 'calc(100vh - 200px)', overflow: 'auto' }}
+      >
+        {
+          datasetContainer.map((ds) => {
+            const { attachments } = ds;
+            return (
+              <Panel key={ds.id} eventKey={ds.id} onClick={e => this.handleSelect(e, ds.id)}>
+                <Panel.Heading>
+                  <Panel.Title toggle>{`Dataset: ${ds.name}`}</Panel.Title>
+                </Panel.Heading>
+                <Panel.Body style={{ padding: '0px' }} collapsible>
+                  <Nav bsStyle="pills" stacked activeKey={activeKey}>
+                    {
+                      attachments.map(attachment => (
+                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => this.handleFile(e, attachment, ds)}>
+                          <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
+                        </NavItem>
+                      ))
+                    }
+                  </Nav>
+                </Panel.Body>
+              </Panel>
+            );
+          })
+        }
+      </PanelGroup>
+    );
+  }
+
+  handleModal(e) {
+    if (e) e.stopPropagation();
+    const { handleModalOpen } = this.props;
+    handleModalOpen();
+  }
+
+  render() {
+    const {
+      show, isPublic, datasetContainer
+    } = this.props;
+    let { selected } = this.state;
+    if (!selected) {
+      const ds = datasetContainer[0];
+      const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
+      selected = { ...file, dsName: ds.name };
+    }
+
+    const filePath = isPublic ?
+      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
+      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
+
+    if (show) {
+      return (
+        <Modal backdrop="static" animation dialogClassName="file-viewer-modal" show={show} onHide={e => this.handleModal(e)}>
+          <Modal.Header onClick={e => e.stopPropagation()} closeButton>
+            <Modal.Title>Dataset: {selected.dsName} / File: {selected?.filename}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body onClick={e => e.stopPropagation()}>
+            <Col md={2} sm={2} lg={2}>
+              {this.list()}
+            </Col>
+            <Col md={10} sm={10} lg={10}>
+              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
+                <ReactNglViewer fileName={selected?.filename} filePath={filePath} />
+              </div>
+            </Col>
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return <span />;
+  }
+}
+
+RepoMolViewerListModal.propTypes = {
+  datasetContainer: PropTypes.array.isRequired,
+  isPublic: PropTypes.bool.isRequired,
+  show: PropTypes.bool.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+};
diff --git a/app/packs/src/libHome/RepoMolViewerModal.js b/app/packs/src/libHome/RepoMolViewerModal.js
new file mode 100644
index 000000000..165c3d2eb
--- /dev/null
+++ b/app/packs/src/libHome/RepoMolViewerModal.js
@@ -0,0 +1,38 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'react-bootstrap';
+import { ReactNglViewer } from 'react-nglviewer';
+
+const RepoMolViewerModal = (props) => {
+  const {
+    fileContent, show, title, handleModalOpen
+  } = props;
+  const filePath = new Blob([fileContent], { type: 'text/plain' });
+  if (show) {
+    return (
+      <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={() => handleModalOpen(false)}>
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
+            <ReactNglViewer fileName={`${title}.mol`} filePath={filePath} />
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+  return <span />;
+};
+
+RepoMolViewerModal.propTypes = {
+  fileContent: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
+  title: PropTypes.string,
+};
+
+RepoMolViewerModal.defaultProps = { title: 'Structure Viewer' };
+
+export default RepoMolViewerModal;
diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/libHome/RepoMoleculeArchive.js
new file mode 100644
index 000000000..4feba19f4
--- /dev/null
+++ b/app/packs/src/libHome/RepoMoleculeArchive.js
@@ -0,0 +1,98 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import uuid from 'uuid';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import PublicActions from '../components/actions/PublicActions';
+import Formula from '../components/common/Formula';
+import PubchemLabels from '../components/PubchemLabels';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const infoTag = (molecule) => {
+  const pubData = (molecule && molecule.pub_id) || '';
+  return (
+    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <div className="home_wrapper_item">
+        <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
+      </div>
+    </Row>
+  );
+};
+
+const RepoMoleculeArchive = (props) => {
+  const {
+    molecule, currentElement, isPubElement, advFlag, advType, advValue
+  } = props;
+  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+  const svgPathSample = molecule.sample_svg_file
+    ? `/images/samples/${molecule.sample_svg_file}`
+    : `/images/molecules/${molecule.molecule_svg_file}`;
+  const pubchemInfo = pubchemTag(molecule);
+  return (
+    <Col xs={12} sm={12} md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue, RepoNavListTypes.MOLECULE_ARCHIVE)}>
+      <div className={`home_archive ${listClass}`}>
+        <div className="svg_border">
+          <SVG src={svgPathSample} className="archive_svg_molecule" key={svgPathSample} />
+        </div>
+        <div className="content">
+          <div className="info">
+            <div className="border">
+              <div className="dl">
+                Formula
+              </div>
+              <div className="dr"><Formula formula={molecule.sum_formular} />
+                {' '}
+                <span className="repo-pub-list-icons">
+                  {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
+                </span>
+              </div>
+            </div>
+            <div className="border">
+              <div className="dl">Provided by</div>
+              <div className="dr">{molecule.xvial_archive[0]?.provided_by}</div>
+            </div>
+            <div className="border">
+              <div className="dl">Group</div>
+              <div className="dr">{molecule.xvial_archive[0]?.group || 'Stefan Bräse Group'}</div>
+            </div>
+          </div>
+          <div>
+            {infoTag(molecule)}
+          </div>
+        </div>
+      </div>
+    </Col>
+  );
+};
+
+RepoMoleculeArchive.propTypes = {
+  molecule: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+};
+
+RepoMoleculeArchive.defaultProps = {
+  isPubElement: false,
+  currentElement: null
+};
+
+export default RepoMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoMoleculeList.js b/app/packs/src/libHome/RepoMoleculeList.js
new file mode 100644
index 000000000..2d83219f9
--- /dev/null
+++ b/app/packs/src/libHome/RepoMoleculeList.js
@@ -0,0 +1,94 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import uuid from 'uuid';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
+import PublicActions from '../components/actions/PublicActions';
+import Formula from '../components/common/Formula';
+import PubchemLabels from '../components/PubchemLabels';
+import { xvialTag, svgTag } from './RepoPubCommon';
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const infoTag = (molecule) => {
+  const pubData = (molecule && molecule.pub_id) || '';
+  return (
+    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
+        </div>
+      </OverlayTrigger>
+      <div className="home_wrapper_item">
+        <div>Author</div><div className="item_xvial">{molecule.author_name}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
+      </div>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>X-Vial</div><div className="item_xvial">{xvialTag(molecule)}</div>
+        </div>
+      </OverlayTrigger>
+    </Row>
+  );
+};
+
+const RepoMoleculeList = (props) => {
+  const {
+    molecule, currentElement, isPubElement, advFlag, advType, advValue
+  } = props;
+  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+  const svgPathSample = molecule.sample_svg_file
+    ? `/images/samples/${molecule.sample_svg_file}`
+    : `/images/molecules/${molecule.molecule_svg_file}`;
+  const pubchemInfo = pubchemTag(molecule);
+  return (
+    <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${molecule.id}`}>
+          <Col md={2}>
+            {svgTag(svgPathSample, 'molecule', true)}
+          </Col>
+          <Col md={10}>
+            <Row><Formula formula={molecule.sum_formular} /></Row>
+            <Row>
+              {molecule.iupac_name}
+              <span className="repo-pub-list-icons">{pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }</span>
+            </Row>
+          </Col>
+        </Row>
+        {infoTag(molecule)}
+      </div>
+    </Col>
+  );
+};
+
+RepoMoleculeList.propTypes = {
+  molecule: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+};
+
+RepoMoleculeList.defaultProps = {
+  isPubElement: false,
+  currentElement: null
+};
+
+export default RepoMoleculeList;
diff --git a/app/packs/src/libHome/RepoNavListTypes.js b/app/packs/src/libHome/RepoNavListTypes.js
new file mode 100644
index 000000000..9e766f5e7
--- /dev/null
+++ b/app/packs/src/libHome/RepoNavListTypes.js
@@ -0,0 +1,6 @@
+export default Object.freeze({
+  MOLECULE_ARCHIVE: 'moleculeArchive',
+  REACTION: 'reaction',
+  SAMPLE: 'sample',
+  SCHEME: 'scheme'
+});
diff --git a/app/packs/src/libHome/RepoNewsEditor.js b/app/packs/src/libHome/RepoNewsEditor.js
new file mode 100644
index 000000000..99218a3f8
--- /dev/null
+++ b/app/packs/src/libHome/RepoNewsEditor.js
@@ -0,0 +1,427 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoNewsEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { news } = this.state;
+    news.article.push(stelle({ art: e }));
+    this.setState(news);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { news } = this.state;
+    const { article } = news;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    news.article = article;
+    this.setState(news);
+  }
+
+  onStelleRemove(e) {
+    const { news } = this.state;
+    news.article.splice(e, 1);
+    this.setState(news);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { news } = this.state;
+    switch (art) {
+      case 'quill':
+        news.article[sid].quill = e;
+        this.setState(news);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.news && state.news.key) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, news: NewsroomTemplate
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { news } = this.state;
+    switch (type) {
+      case 'title':
+        news.title = event.currentTarget.value;
+        break;
+      case 'content':
+        news.content = event;
+        break;
+      case 'published_at':
+        news.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        news.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ news });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { news } = this.state;
+    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      news.published_at = DateFormatDMYTime(news.published_at);
+    }
+    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      news.firstParagraph = extractIntro(news.article);
+      ArticleFetcher.createOrUpdate(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              news: NewsroomTemplate,
+              message: { type: 'success', content: 'Send to Newsroom successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { news } = this.state;
+      ArticleFetcher.delete(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { news } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'newsroom')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          news.article[sid].pfad = result.pfad_image;
+          this.setState(news);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { news } = this.state;
+    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>News Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            <img
+              src={imageUrl}
+              style={{
+                display: 'block',
+                maxHeight: '100%',
+                maxWidth: '100%',
+              }}
+              alt=""
+            />
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { news } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'newsroom')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            news.cover_image = result.cover_image;
+            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      news,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
+    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
+
+    const stelles = news.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="newsroom"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={news}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>Newsroom Editor</b></h2>
+              <p>
+                Chemotion NEWS
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={news.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoNewsReader.js b/app/packs/src/libHome/RepoNewsReader.js
new file mode 100644
index 000000000..0e83e02d7
--- /dev/null
+++ b/app/packs/src/libHome/RepoNewsReader.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoNewsReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.news) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+    return (
+      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { news } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
+        <Col md={12} >
+          <Col md={2} />
+          <Col md={8} sm={12}>
+            <div className="chemotion_news">
+              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
+              &nbsp;Chemotion&nbsp;News
+            </div>
+          </Col>
+          <Col md={2} />
+        </Col>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+                <Panel.Heading>
+                  <Row>
+                    <Col md={6} sm={12}>
+                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
+                      <div className="news_author">
+                        <i className="fa fa-user-circle" aria-hidden="true" />
+                        &nbsp;{news.creator_name}
+                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
+                      </div>
+                    </Col>
+                    <Col md={6} sm={12}>
+                      {this.coverImage()}
+                    </Col>
+                  </Row>
+                  <br />
+                  <div className="heading_separator" />
+                </Panel.Heading>
+                <Panel.Body>
+                  <Col lg={1} md={2}><div /></Col>
+                  <Col lg={10} md={8} sm={12}>
+                    <div className="news_quillviewer">
+                      {
+                        news.article ?
+                          news.article.map((s) => {
+                            if (s.art === 'txt') {
+                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                            }
+                            if (s.art === 'img') {
+                              return (
+                                <div key={uuid.v4()}>
+                                  <img src={`/newsroom/${s.pfad}`} alt="" />
+                                  <br />
+                                </div>
+                              );
+                            }
+                          }) : <div />
+                      }
+                    </div>
+                  </Col>
+                  <Col lg={1} md={2}><div /></Col>
+                </Panel.Body>
+              </Panel>
+            </Col>
+            <Col md={2} />
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoNewsroom.js b/app/packs/src/libHome/RepoNewsroom.js
new file mode 100644
index 000000000..19e9f6020
--- /dev/null
+++ b/app/packs/src/libHome/RepoNewsroom.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy, slice } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div className="readedit">
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="readedit">
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (article) => {
+  let imageUrl = '/images/chemnews.png';
+  if (typeof (article) !== 'undefined' && article
+   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
+    imageUrl = `/newsroom/${article.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      <img
+        src={imageUrl}
+        style={{
+          display: 'block',
+          width: '100%',
+          height: 'auto',
+        }}
+        alt=""
+      />
+    </div>
+  );
+};
+
+export default class RepoNewsroom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      articles: PublicStore.getState().articles || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.articles();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.articles) {
+      this.setState(prevState => ({
+        ...prevState, articles: state.articles
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initial()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_article_editor
+        });
+      });
+  }
+
+  render() {
+    let { articles } = this.state;
+    const { isEditor } = this.state;
+    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
+    articles = orderBy(
+      articles,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return articles.length > 0 ? (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <LatestNews article={articles[0]} isEditor={isEditor} />
+            </Col>
+            <Col md={2} />
+          </Row>
+          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
+  }
+}
+
+const LatestNews = ({ article, isEditor }) => {
+  return (
+    <div className="news_latest_block">
+      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
+      <Col md={4} sm={12}>{mainImage(article)}</Col>
+      <Col md={8} sm={12}>
+        <Col md={12} sm={12}>
+          <span className="news_title">{article.title}</span>
+          <div className="news_content">
+            <p />
+            {article.firstParagraph}
+            <p />
+          </div>
+          <div>
+            {renderEditRead(article, isEditor)}
+          </div>
+        </Col>
+        <Col md={12} sm={12}>
+          <div className="heading_separator" />
+          <div className="news_author">
+            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
+            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
+          </div>
+        </Col>
+      </Col>
+    </div>
+  );
+};
+
+const NewsList = ({ articles, isEditor }) => {
+  return articles.length > 0 ? (
+    <Row>
+      <Col md={2} />
+      <Col md={8} sm={12}>
+        <Row>
+          <div className="news_time_box">
+            {
+              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
+            }
+          </div>
+        </Row>
+      </Col>
+      <Col md={2} />
+    </Row>
+  ) : <div />;
+};
+
+const NewsTBox = ({ article, isEditor }) => {
+  return (
+    <ul>
+      <li>
+        <span />
+        <div className="title">{article.title}</div>
+        <div className="content">{article.firstParagraph}</div>
+
+        <div className="author">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
+          {renderEditRead(article, isEditor)}
+        </div>
+        <div className="created_at">
+          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
+        </div>
+      </li>
+    </ul>
+  );
+};
diff --git a/app/packs/src/libHome/RepoPubCommon.js b/app/packs/src/libHome/RepoPubCommon.js
new file mode 100644
index 000000000..b92f9a1e0
--- /dev/null
+++ b/app/packs/src/libHome/RepoPubCommon.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
+
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
+const svgTag = (path, klassName, isPop, popW = '26vw') => {
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: `${popW}` }} />
+    </Popover>
+  );
+  return isPop ? (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} /></div>
+    </OverlayTrigger>
+  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
+};
+
+export { xvialTag, svgTag };
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
new file mode 100644
index 000000000..f88bfa304
--- /dev/null
+++ b/app/packs/src/libHome/RepoPubl.js
@@ -0,0 +1,709 @@
+import React, { Component } from 'react';
+import {
+  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
+  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
+  FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
+  Tabs, Tab
+} from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import UIActions from '../components/actions/UIActions';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepoElementDetails from './RepoElementDetails';
+import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+import AutoCompleteInput from '../components/search/AutoCompleteInput';
+import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
+import LoadingActions from '../components/actions/LoadingActions';
+import RepoReactionList from './RepoReactionList';
+import RepoMoleculeList from './RepoMoleculeList';
+import RepoMoleculeArchive from './RepoMoleculeArchive';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const renderMoleculeArchive =
+  (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
+    <RepoMoleculeArchive
+      key={molecule.id}
+      molecule={molecule}
+      currentElement={currentElement}
+      isPubElement={isPubElement}
+      advFlag={advFlag}
+      advValue={advValue}
+      advType={advType}
+    />
+  );
+
+const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
+  <RepoMoleculeList
+    molecule={molecule}
+    currentElement={currentElement}
+    isPubElement={isPubElement}
+    advFlag={advFlag}
+    advValue={advValue}
+    advType={advType}
+  />
+);
+
+const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
+  <RepoReactionList
+    element={element}
+    currentElement={currentElement}
+    isPubElement={isPubElement}
+    schemeOnly={schemeOnly}
+  />
+);
+
+const hints = {
+  reaction: {
+    title: 'Reactions',
+    content: 'Reaction entries contain information on the reaction details, the reagents, reactants and products of a reaction and a description of the protocols. Successful reactions are proven by the characterization of the obtained target compounds.'
+  },
+  sample: {
+    title: 'Samples',
+    content: 'Sample entries contain information and properties of the provided sample as well as the characterization of the sample by analytical measurements.'
+  },
+  scheme: {
+    title: 'Scheme-only reactions',
+    content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
+  },
+  moleculeArchive: {
+    title: 'Physical samples',
+    content: 'A physical sample was registered to the Molecule Archive of the Compound Platform and can be requested from there.'
+  }
+};
+
+const overTip = tab => (
+  <Tooltip id="t_tip" className="left_tooltip bs_tooltip">
+    <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;{hints[tab].content}
+  </Tooltip>
+);
+
+const TabTip = props => (
+  <OverlayTrigger
+    placement="bottom"
+    overlay={overTip(props.tab)}
+  >
+    <div>{hints[props.tab].title}</div>
+  </OverlayTrigger>
+);
+
+export default class RepoPubl extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // ...PublicStore.getState(),
+      page: 1,
+      perPage: 10,
+      showStructureEditor: false,
+      isSearch: false,
+      defaultSearchValue: null,
+      selectType: 'all',
+      inputDisabled: false,
+      queryMolfile: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      listType: props.listType || RepoNavListTypes.REACTION,
+      advFlag: false,
+      advType: 'Authors',
+      advValue: [],
+      selectUsers: [],
+      key: uuid.v4(),
+      showSearch: false
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.changeSort = this.changeSort.bind(this);
+    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
+    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
+    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
+    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
+    this.advSearchClick = this.advSearchClick.bind(this);
+    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
+    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleShowSearch = this.handleShowSearch.bind(this);
+  }
+
+  componentDidMount() {
+    PublicActions.selectPublicCollection.defer();
+    PublicStore.listen(this.onChange);
+    // PublicActions.getReactions.defer();
+    PublicActions.fetchUnitsSystem.defer();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSearchTypeChange(e) {
+    this.setState({ searchType: e.target && e.target.value });
+  }
+
+  handleStructureEditorCancel() {
+    this.setState({ isSearch: false });
+    this.hideStructureEditor();
+  }
+
+  showStructureEditor() {
+    this.setState({ showStructureEditor: true });
+  }
+
+  hideStructureEditor() {
+    this.setState({ showStructureEditor: false });
+  }
+
+  showAdvancedSearch() {
+    this.setState({ advFlag: true });
+  }
+
+  handleSelectAdvType(val) {
+    if (val) { this.setState({ advType: val, advValue: null }); }
+  }
+
+  onPerPageChange(e) {
+    this.setState({ perPage: e.target.value }, () => this.getList());
+  }
+
+  getList(ps = {}) {
+    const {
+      advFlag, advType, advValue,
+      isSearch,
+      selectType, selection,
+      page, perPage, listType
+    } = this.state;
+    let params = {
+      advFlag,
+      advType,
+      advValue,
+      elementType: selectType,
+      page,
+      perPage,
+      selection,
+      listType,
+      ...ps
+    };
+    LoadingActions.start();
+    if (isSearch) {
+      switch (listType) {
+        case RepoNavListTypes.REACTION:
+          PublicActions.getSearchReactions(params);
+          break;
+        case RepoNavListTypes.MOLECULE_ARCHIVE:
+        case RepoNavListTypes.SAMPLE:
+          PublicActions.getSearchMolecules(params);
+          break;
+        case RepoNavListTypes.SCHEME:
+          params = { ...params, collectionId: 'schemeOnly' };
+          PublicActions.getSearchReactions(params);
+          break;
+        default:
+      }
+      return;
+    }
+    switch (listType) {
+      case RepoNavListTypes.REACTION:
+        params = { ...params, schemeOnly: false };
+        PublicActions.getReactions(params);
+        break;
+      case RepoNavListTypes.MOLECULE_ARCHIVE:
+      case RepoNavListTypes.SAMPLE:
+        PublicActions.getMolecules(params);
+        break;
+      case RepoNavListTypes.SCHEME:
+        params = { ...params, schemeOnly: true };
+        PublicActions.getReactions(params);
+        break;
+      default:
+        PublicActions.getReactions(params);
+    }
+    UIActions.clearSearchSelection();
+  }
+
+  handleClearSearchSelection() {
+    this.setState({
+      defaultSearchValue: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      queryMolfile: null,
+      isSearch: false,
+      key: uuid.v4(),
+      page: 1
+    }, () => this.getList());
+  }
+
+  handleElementSelection(event) {
+    this.setState({ selectType: event.toLowerCase() });
+  }
+
+  handleShowSearch() {
+    const { showSearch, advFlag } = this.state;
+    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
+  }
+
+  closeAdvancedSearch() {
+    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
+  }
+
+
+  loadAdvValuesByName(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  changeSort(e) {
+    this.setState({
+      page: 1,
+      listType: e
+    }, () => this.getList());
+  }
+
+  renderMenuItems() {
+    const elements = [
+      'All', 'Samples', 'Reactions'
+    ];
+
+    const menu = elements.map(element => (
+      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
+        {element}
+      </MenuItem>
+    ));
+
+    return menu;
+  }
+
+  handleTanimotoChange(e) {
+    const val = e.target && e.target.value;
+    if (!isNaN(val - val)) {
+      this.setState({ tanimotoThreshold: val });
+    }
+  }
+
+  handleSelectionChange(selection) {
+    this.setState({
+      isSearch: true,
+      selection,
+      page: 1
+    }, () => this.getList());
+  }
+
+  structureSearch(molfile) {
+    const { searchType, tanimotoThreshold } = this.state;
+
+    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
+    const selection = {
+      molfile,
+      search_type: searchType,
+      tanimoto_threshold: tanimoto,
+      search_by_method: 'structure',
+      structure_search: true
+    };
+
+    this.setState(
+      {
+        isSearch: true,
+        selection,
+        page: 1,
+        defaultSearchValue: 'structure',
+        queryMolfile: molfile
+      },
+      () => this.getList()
+    );
+  }
+
+  handleStructureEditorSave(molfile) {
+    this.hideStructureEditor();
+    if (molfile) {
+      const molfileLines = molfile.match(/[^\r\n]+/g);
+      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
+        this.structureSearch(molfile);
+      } else {
+        // TODO: clear search?
+      }
+    }
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  onPaginationSelect(eventKey) {
+    const { pages } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      this.setState({ page: eventKey }, () => this.getList());
+    }
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+
+  renderSwitch() {
+    const { listType } = this.state;
+    if (listType === RepoNavListTypes.MOLECULE_ARCHIVE) {
+      return (
+        <Tabs
+          activeKey={listType}
+          onSelect={this.changeSort}
+          id="element-list-type"
+        >
+          <Tab eventKey={RepoNavListTypes.MOLECULE_ARCHIVE} title={<TabTip tab="moleculeArchive" />} />
+        </Tabs>
+      );
+    }
+    return (
+      <Tabs
+        activeKey={listType}
+        onSelect={this.changeSort}
+        id="element-list-type"
+      >
+        <Tab eventKey={RepoNavListTypes.REACTION} title={<TabTip tab={RepoNavListTypes.REACTION} />} />
+        <Tab eventKey={RepoNavListTypes.SAMPLE} title={<TabTip tab={RepoNavListTypes.SAMPLE} />} />
+        <Tab eventKey={RepoNavListTypes.SCHEME} title={<TabTip tab={RepoNavListTypes.SCHEME} />} />
+      </Tabs>
+    );
+  }
+
+  renderSelectValues() {
+    const { advValue } = this.state;
+    return (
+      <Select.Async
+        multi
+        isLoading
+        backspaceRemoves
+        value={advValue}
+        valueKey="value"
+        labelKey="label"
+        loadOptions={this.loadAdvValuesByName}
+        onChange={this.handleSelectAdvValue}
+      />
+    );
+  }
+
+  handleSelectAdvValue(val) {
+    if (val) {
+      this.setState({ advValue: val });
+    }
+  }
+
+  advSearchClick() {
+    this.setState({ page: 1 }, () => this.getList());
+  }
+
+  renderAdvancedSearch() {
+    const { advFlag, advType, advValue } = this.state;
+    if (advFlag === true) {
+      this.listOptions = [
+        { value: 'Authors', label: 'by authors' },
+        { value: 'Ontologies', label: 'by analysis type' },
+        { value: 'Embargo', label: 'by Embargo Bundle#' }
+      ];
+      return (
+        <div className="home-adv-search">
+          <div>
+            <Select
+              simpleValue
+              searchable={false}
+              options={this.listOptions}
+              placeholder="Select search field"
+              clearable={false}
+              valueKey="value"
+              labelKey="label"
+              onChange={this.handleSelectAdvType}
+              defaultValue="Authors"
+              value={advType}
+              className="o-author"
+            />
+          </div>
+          <div>
+            <Select.Async
+              multi
+              isLoading
+              backspaceRemoves
+              value={advValue}
+              valueKey="value"
+              labelKey="label"
+              loadOptions={this.loadAdvValuesByName}
+              onChange={this.handleSelectAdvValue}
+              className="o-name"
+            />
+          </div>
+          <div className="btns-grp">
+            <ButtonGroup>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
+                <Button onClick={this.advSearchClick}>
+                  <i className="fa fa-search" />
+                </Button>
+              </OverlayTrigger>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
+                <Button onClick={this.closeAdvancedSearch}>
+                  <i className="fa fa-times" />
+                </Button>
+              </OverlayTrigger>
+            </ButtonGroup>
+          </div>
+        </div>
+      );
+    }
+    return (<div />);
+  }
+
+  renderSearch() {
+    const { isSearch, defaultSearchValue } = this.state;
+    const customClass = '.btn-unified';
+
+    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
+    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
+
+    const buttonAfter = (
+      <ButtonGroup className="home-search">
+        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
+          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
+            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
+          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+
+    const submitAddons = (
+      <Grid>
+        <Row>
+          <Col sm={6} md={4}>
+            <Form inline>
+              <Radio
+                ref={(input) => { this.searchSimilarRadio = input; }}
+                value="similar"
+                checked={this.state.searchType === 'similar'}
+                onChange={e => this.handleSearchTypeChange(e)}
+              >
+                &nbsp; Similarity Search &nbsp;
+              </Radio>
+              &nbsp;&nbsp;
+              <FormControl
+                style={{ width: '40%' }}
+                type="text"
+                value={this.state.tanimotoThreshold}
+                ref={(input) => { this.searchTanimotoInput = input; }}
+                onChange={e => this.handleTanimotoChange(e)}
+              />
+            </Form>
+          </Col>
+          <Col sm={4} md={2}>
+            <Radio
+              ref={(input) => { this.searchSubstructureRadio = input; }}
+              value="sub"
+              checked={this.state.searchType === 'sub'}
+              onChange={e => this.handleSearchTypeChange(e)}
+            >
+              Substructure Search
+            </Radio>
+          </Col>
+        </Row>
+      </Grid>
+    );
+
+    const inputAttributes = {
+      placeholder: 'IUPAC, InChI, SMILES, ...',
+      style: { minWidth: 168, maxWidth: 268 }
+    };
+
+    const suggestionsAttributes = {
+      style: {
+        marginTop: 15,
+        width: 398,
+        maxHeight: 400
+      }
+    };
+
+    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
+
+    const innerDropdown = (
+      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
+        <DropdownButton
+          style={{ borderRadius: 'unset' }}
+          id="search-inner-dropdown"
+          title={this.state.selectType === 'all' ? 'All' :
+          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
+        >
+          {this.renderMenuItems()}
+        </DropdownButton>
+      </OverlayTrigger>
+    );
+
+    return (
+      <div className="chemotion-search">
+        <div className="search-structure-draw">
+          <StructureEditorModal
+            showModal={this.state.showStructureEditor}
+            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
+            onCancel={this.handleStructureEditorCancel}
+            molfile={this.state.queryMolfile}
+            submitBtnText="Search"
+            submitAddons={submitAddons}
+          />
+        </div>
+        {
+          this.state.showSearch ?
+          (
+            <span>
+              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
+              </Button>
+              <div className="search-autocomplete">
+                <AutoCompleteInput
+                  key={this.state.key}
+                  inputAttributes={inputAttributes}
+                  inputDisabled={isSearch}
+                  defaultSearchValue={defaultSearchValue}
+                  suggestionsAttributes={suggestionsAttributes}
+                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
+                    this.state.selectType.toLowerCase(), input, 'public', false)}
+                  ref={(input) => { this.autoComplete = input; }}
+                  onSelectionChange={selection => this.handleSelectionChange(selection)}
+                  buttonBefore={innerDropdown}
+                  buttonAfter={buttonAfter}
+                />
+              </div>
+            </span>
+          ) :
+          (
+            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
+            </Button>
+          )
+        }
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      molecules, listType, reactions, currentElement, showSearch, advFlag, advType, advValue
+    } = this.state;
+    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
+      this.state.currentElement.publication.published_at) || (
+      this.state.currentElement && this.state.currentElement.published_samples
+      && this.state.currentElement.published_samples.length > 0 &&
+      this.state.currentElement.published_samples[0].published_at
+    )));
+    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
+    const elementList = () => {
+      switch (listType) {
+        case RepoNavListTypes.MOLECULE_ARCHIVE:
+          return (molecules || []).map(m => renderMoleculeArchive(m, currentElement, isPubElement, advFlag, advType, advValue));
+        case RepoNavListTypes.REACTION:
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+        case RepoNavListTypes.SAMPLE:
+          return (molecules || []).map(m => renderMolecule(m, currentElement, isPubElement, advFlag, advType, advValue));
+        case RepoNavListTypes.SCHEME:
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));
+        default:
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+      }
+    };
+
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={isPubElement === true ? 4 : 12}>
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
+            <Navbar.Form pullLeft>
+              {this.renderSearch()}
+            </Navbar.Form>
+            <Navbar.Form pullLeft>
+              {this.renderAdvancedSearch()}
+            </Navbar.Form>
+            <Navbar.Form style={{ marginBottom: 'unset' }} pullRight>
+              {this.renderSwitch()}
+            </Navbar.Form>
+          </Navbar>
+
+          <div className={listClass} style={{ backgroundColor: '#efefef' }}>
+            <Table className="sample-entries">
+              <tbody>
+                {elementList()}
+              </tbody>
+            </Table>
+          </div>
+          <div className="list-container-bottom">
+            <Row>
+              <Col sm={8}>{this.pagination()}</Col>
+              <Col sm={4}>{this.perPageInput()}</Col>
+            </Row>
+          </div>
+        </Col>
+        <Col md={isPubElement === true ? 8 : 0}>
+          <div className="public-element">
+            <RepoElementDetails />
+          </div>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
new file mode 100644
index 000000000..40c0e1938
--- /dev/null
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -0,0 +1,792 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col, Button, Jumbotron } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { head, filter } from 'lodash';
+import { RepoCommentModal } from 'repo-review-ui';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AuthorList,
+  AuthorTitle,
+  AffiliationList,
+  CalcDuration,
+  ChemotionId,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  ClipboardCopyBtn,
+  Doi,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalysesPanel,
+  IconToMyDB,
+  AnalysesTypeJoinLabel,
+  SchemeWord,
+  resizableSvg,
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from '../components/actions/PublicActions';
+import ReviewActions from '../components/actions/ReviewActions';
+import DateInfo from '../components/chemrepo/DateInfo';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import PublicAnchor from '../components/chemrepo/PublicAnchor';
+import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
+import UserCommentModal from '../components/chemrepo/UserCommentModal';
+import QuillViewer from '../components/QuillViewer';
+import {
+  Citation,
+  literatureContent,
+  RefByUserInfo,
+} from '../components/LiteratureCommon';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import Sample from '../components/models/Sample';
+import RepoSegment from './RepoSegment';
+
+export default class RepoReactionDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showScheme: true,
+      showRinchi: false,
+      showProp: true,
+      showTlc: true,
+      showSA: true,
+      showRA: {},
+      // showReviewModal: false,
+      // btnAction: '',
+      showCommentModal: false,
+      commentField: '',
+      originInfo: '',
+    };
+
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.toggleSA = this.toggleSA.bind(this);
+    this.toggleRA = this.toggleRA.bind(this);
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  toggleSA() {
+    const { showSA } = this.state;
+    this.setState({ showSA: !showSA });
+  }
+
+  toggleRA(idx = -1) {
+    const { showRA } = this.state;
+    if (idx in showRA && showRA[idx] === false) {
+      showRA[idx] = true;
+    } else {
+      showRA[idx] = false;
+    }
+    this.setState({ showRA });
+  }
+
+  handleToggle(type) {
+    switch (type) {
+      case 'Scheme':
+        this.toggleScheme();
+        break;
+      case 'Rinchi':
+        this.toggleRinchi();
+        break;
+      case 'Prop':
+        this.toggleProp();
+        break;
+      default:
+        break;
+    }
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    ReviewActions.handleReviewModal(showReviewModal, btnAction);
+  }
+
+  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
+    LoadingActions.start();
+    ReviewActions.reviewPublish(
+      elementId,
+      'reaction',
+      comment,
+      action,
+      checklist,
+      reviewComments
+    );
+    // this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo,
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof cinfo[field] === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = comment;
+    cinfo[field].origInfo = origInfo;
+
+    ReviewActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  updateRepoXvial() {
+    PublicActions.displayReaction(this.props.reaction.id);
+    PublicActions.refreshPubElements('Reactions');
+  }
+
+  reactionInfo(reaction) {
+    const { showScheme, showRinchi, showProp, showTlc } = this.state;
+    const { canComment, review_info, review } = this.props;
+
+    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+    const content = reaction.description;
+    const additionInfo = reaction.observation;
+
+    const descContent =
+      content && content.ops && content.ops.length > 0 && content.ops[0].insert
+        ? content.ops[0].insert.trim()
+        : '';
+    let descQV = (
+      <span>
+        <b>Description:</b>
+        <QuillViewer value={content} preview />
+      </span>
+    );
+    if (descContent === '') descQV = '';
+
+    const addinfoContent =
+      additionInfo &&
+      additionInfo.ops &&
+      additionInfo.ops.length > 0 &&
+      additionInfo.ops[0].insert
+        ? additionInfo.ops[0].insert.trim()
+        : '';
+    let addQV = (
+      <span>
+        <b>Additional information for publication and purification details:</b>
+        <QuillViewer value={additionInfo} preview />
+      </span>
+    );
+    if (addinfoContent === '') addQV = '';
+
+    const temperature = reaction.temperature
+      ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}`
+      : '';
+    const duration = CalcDuration(reaction);
+    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
+    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${
+      reaction.rf_value || ''
+    }]; TLC-Description: [${reaction.tlc_description || ''}]`;
+
+    const bodyAttrs = {
+      style: {
+        fontSize: '90%',
+        paddingBottom: 'unset',
+      },
+    };
+    const schemeOnly =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data &&
+        reaction.publication.taggable_data.scheme_only === true) ||
+      false;
+    if (schemeOnly) {
+      if (canComment) {
+        return (
+          <RepoReactionSchemeInfo
+            reaction={reaction}
+            svgPath={svgPath}
+            showScheme={showScheme}
+            showRinchi={showRinchi}
+            showProp={showProp}
+            bodyAttrs={bodyAttrs}
+            onToggle={this.handleToggle}
+            review_info={review_info}
+            onComment={this.handleCommentBtn}
+            propInfo={properties}
+            canComment={canComment}
+          />
+        );
+      }
+      return (
+        <RepoReactionSchemeInfo
+          reaction={reaction}
+          svgPath={svgPath}
+          showScheme={showScheme}
+          showRinchi={showRinchi}
+          showProp={showProp}
+          bodyAttrs={bodyAttrs}
+          onToggle={this.handleToggle}
+          canComment={canComment}
+        />
+      );
+    }
+    return (
+      <Panel style={{ marginBottom: '4px' }}>
+        <Panel.Body style={{ paddingBottom: '1px' }}>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              {resizableSvg(svgPath)}
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn
+                {...this.props}
+                field="Reaction Table"
+                orgInfo="<Reaction Table>"
+                onShow={this.handleCommentBtn}
+              />
+              <ReactionTable
+                reaction={reaction}
+                toggle={this.toggleScheme}
+                show={showScheme}
+                isPublic
+                isReview={this.props.isReview}
+                bodyAttrs={bodyAttrs}
+                canComment={canComment}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <div className="desc small-p">
+                <CommentBtn
+                  {...this.props}
+                  field="Description"
+                  orgInfo={descContent}
+                  onShow={this.handleCommentBtn}
+                />
+                {descQV}
+              </div>
+              <div className="desc small-p">
+                <CommentBtn
+                  {...this.props}
+                  field="Additional information"
+                  orgInfo={addinfoContent}
+                  onShow={this.handleCommentBtn}
+                />
+                {addQV}
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <ReactionRinChiKey
+                reaction={reaction}
+                toggle={this.toggleRinchi}
+                show={showRinchi}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn
+                {...this.props}
+                field="Properties"
+                orgInfo={properties}
+                onShow={this.handleCommentBtn}
+              />
+              <ReactionProperties
+                reaction={reaction}
+                toggle={this.toggleProp}
+                show={showProp}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn
+                {...this.props}
+                field="TLC-Control"
+                orgInfo={tlc}
+                onShow={this.handleCommentBtn}
+              />
+              <ReactionTlc
+                reaction={reaction}
+                toggle={this.toggleTlc}
+                show={showTlc}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+
+  renderAnalysisView(
+    container,
+    type,
+    product = null,
+    idx = -1,
+    isLogin = false,
+    isReviewer = false,
+    references = []
+  ) {
+    if (typeof container === 'undefined' || !container) return <span />;
+
+    const analyses = ArrayUtils.sortArrByIndex(
+      head(filter(container.children, (o) => o.container_type === 'analyses'))
+        .children
+    );
+    const show = this.state.showRA[idx] || true;
+    if (typeof analyses === 'undefined' || !analyses || analyses.length === 0) {
+      return <div />;
+    }
+    const pdInfos =
+      (this.props.reaction.infos &&
+        this.props.reaction.infos.pd_infos &&
+        this.props.reaction.infos.pd_infos[product && product.id]) ||
+      '';
+    const productHeader =
+      typeof product !== 'undefined' && product ? (
+        <RenderAnalysisHeader
+          key={`reaction-product-header-${product.id}`}
+          reactionId={this.props.reaction.id}
+          element={product}
+          isPublic={this.props.isPublished}
+          isLogin={isLogin}
+          isReviewer={isReviewer}
+          userInfo={pdInfos}
+          updateRepoXvial={() => this.updateRepoXvial()}
+          xvialCom={product.xvialCom}
+          literatures={references}
+        />
+      ) : (
+        <span />
+      );
+    const specSample =
+      type === 'Sample' && typeof product !== 'undefined' && product
+        ? new Sample(product)
+        : null;
+    const analysesView = analyses.map((analysis) => {
+      const kind =
+        analysis.extended_metadata &&
+        analysis.extended_metadata.kind &&
+        analysis.extended_metadata['kind'].split('|').pop().trim();
+      const anaInfo =
+        (this.props.reaction.infos &&
+          this.props.reaction.infos.ana_infos &&
+          this.props.reaction.infos.ana_infos[analysis.id]) ||
+        '';
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn
+            {...this.props}
+            field={`Analysis_${analysis.id}`}
+            orgInfo={kind}
+            onShow={this.handleCommentBtn}
+          />
+          <RenderPublishAnalysesPanel
+            key={`${type}_${analysis.id}`}
+            userInfo={anaInfo}
+            analysis={analysis}
+            type="Container"
+            pageType="reactions"
+            pageId={this.props.reaction.id}
+            isPublic={this.props.isPublished}
+            isLogin={isLogin}
+            isReviewer={isReviewer}
+            element={specSample}
+          />
+        </span>
+      );
+    });
+
+    return (
+      <div>
+        <span
+          role="presentation"
+          className="label label-default"
+          style={{
+            backgroundColor: '#777777',
+            color: 'white',
+            fontSize: 'smaller',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+          }}
+          onClick={() => this.toggleRA(idx)}
+        >
+          Analyses &nbsp;
+          <i className={`glyphicon ${show}`} />
+          <i className={`fa fa-caret-${show ? 'down' : 'right'}`} />
+        </span>
+        <span
+          className="label"
+          style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
+        >
+          {AnalysesTypeJoinLabel(analyses, type)}
+        </span>
+        <Panel
+          style={{ border: 'none' }}
+          id={`collapsible_${type}_analyses`}
+          expanded={show}
+          defaultExpanded
+          onToggle={() => {}}
+        >
+          <Panel.Collapse>
+            <Panel.Body
+              style={{
+                fontSize: '90%',
+                backgroundColor: '#f5f5f5',
+                padding: '4',
+              }}
+            >
+              {productHeader}
+              {analysesView}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProductAnalysisView(
+    products,
+    isLogin = false,
+    isReviewer = false,
+    references = []
+  ) {
+    if (typeof products === 'undefined' || !products || products.length === 0) {
+      return <span />;
+    }
+    const prdReferences = (_sid, _references) =>
+      _references
+        ? _references.filter(
+            (r) => r.element_type === 'Sample' && r.element_id === _sid
+          )
+        : [];
+    return products.map((product, idx) => (
+      <div key={`product-${product.id}`}>
+        {this.renderAnalysisView(
+          product.container,
+          'Sample',
+          product,
+          idx,
+          isLogin,
+          isReviewer,
+          prdReferences(product.id, references)
+        )}
+      </div>
+    ));
+  }
+
+  render() {
+    const {
+      reaction,
+      isPublished,
+      canComment,
+      review_info,
+      showComment,
+      review,
+      canClose,
+    } = this.props;
+    let { buttons } = this.props;
+    if (typeof reaction === 'undefined' || !reaction) {
+      return <div />;
+    }
+
+    const taggData =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data) ||
+      {};
+    const pubData = (reaction && reaction.publication) || {};
+    const doi = (reaction && reaction.doi) || {};
+
+    const aId = [].concat.apply([], taggData.affiliation_ids);
+    const affiliationMap = {};
+    const { literatures } = reaction;
+    const references = literatures
+      ? literatures.map((lit) => (
+          <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+            <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />
+            &nbsp;
+            <i className={`icon-${lit.element_type.toLowerCase()}`} />
+            &nbsp;
+            <Citation key={lit.id} literature={lit} />
+          </li>
+        ))
+      : [];
+    const refArray = [];
+    let referencesText = '';
+    if (literatures) {
+      literatures.forEach((lit) => {
+        const content = literatureContent(lit, true);
+        refArray.push(content);
+      });
+      referencesText = refArray.join('');
+    }
+
+    let aCount = 0;
+    aId.map((e) => {
+      if (!affiliationMap[e]) {
+        aCount += 1;
+        affiliationMap[e] = aCount;
+      }
+    });
+    const license = taggData.license || 'CC BY-SA';
+
+    const schemeOnly =
+      (reaction &&
+        reaction.publication &&
+        reaction.publication.taggable_data &&
+        reaction.publication.taggable_data.scheme_only === true) ||
+      false;
+
+    let showDOI = (
+      <Doi
+        type="reaction"
+        id={reaction.id}
+        doi={isPublished ? taggData.doi : doi}
+        isPublished={isPublished}
+      />
+    );
+    if (schemeOnly) {
+      buttons = ['Decline', 'Comments', 'Accept'];
+      showDOI = '';
+    }
+
+    if (
+      review_info?.groupleader === true &&
+      review_info?.preapproved !== true
+    ) {
+      buttons = ['Comments', 'Review', 'Approve'];
+    }
+
+    const idyLogin =
+      typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
+    const idyReview =
+      typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
+    const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
+
+    let embargo = <span />;
+    const colDoiPrefix = isPublished
+      ? taggData.doi?.split('/')[0]
+      : doi?.full_doi?.split('/')[0];
+    if (reaction.embargo) {
+      const embargoLink = isPublished
+        ? `/inchikey/collection/${reaction.embargo}`
+        : `/embargo/reaction/${reaction.id}`;
+      embargo = (
+        <span>
+          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
+          &nbsp;
+          <Button
+            key="embargo-link-btn"
+            bsStyle="link"
+            href={embargoLink}
+            target="_blank"
+            style={{ padding: '0px 0px' }}
+          >
+            <i className="fa fa-database" />
+            &nbsp;&nbsp;{reaction.embargo}
+          </Button>
+          <ClipboardCopyBtn
+            text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`}
+            tooltip="retrieve and copy collection DOI"
+          />
+        </span>
+      );
+    }
+    return (
+      <div style={{ border: 'none' }}>
+        <div>
+          <Jumbotron key={`reaction-${reaction.id}`}>
+            <PublicAnchor doi={taggData.doi} isPublished={isPublished} />
+            {canComment ? (
+              <RepoReviewButtonBar
+                element={{ id: reaction.id, elementType: 'Reaction' }}
+                buttons={buttons}
+                buttonFunc={this.handleReviewBtn}
+                review_info={review_info}
+                showComment={showComment}
+                taggData={taggData}
+                schemeOnly={schemeOnly}
+                currComment={
+                  (review?.history &&
+                    review?.history.length > 0 &&
+                    review?.history.slice(-1).pop()) ||
+                  {}
+                }
+              />
+            ) : (
+              ''
+            )}
+            {canClose ? <ClosePanel element={reaction} /> : ''}
+            <h4>
+              <IconToMyDB
+                isLogin={idyLogin}
+                isPublished={isPublished}
+                id={reaction.id}
+                type="reaction"
+              />
+              {schemeOnly ? <SchemeWord /> : ''}&nbsp;
+              <DateInfo
+                isPublished={isPublished}
+                preText="Reaction"
+                pubData={pubData}
+                tagData={taggData}
+              />
+              &nbsp;
+              <LicenseIcon
+                license={license}
+                hasCoAuthors={
+                  taggData.author_ids && taggData.author_ids.length > 1
+                }
+              />
+              <PublicCommentModal
+                isReviewer={idyReview}
+                id={reaction.id}
+                type="Reaction"
+                title={`Reaction, CRR-${pubData.id}`}
+                userInfo={userInfo}
+              />
+              &nbsp;
+              <UserCommentModal
+                isLogin={idyLogin}
+                id={reaction.id}
+                type="Reaction"
+                title={`Reaction, CRR-${pubData.id}`}
+              />
+            </h4>
+            <br />
+            <ContributorInfo
+              contributor={taggData.contributors}
+              showHelp={schemeOnly}
+            />
+            <h5>
+              <b>{AuthorTitle(taggData.author_ids)} </b>
+              <AuthorList
+                creators={taggData.creators}
+                affiliationMap={affiliationMap}
+              />
+            </h5>
+            <AffiliationList
+              affiliations={taggData.affiliations}
+              affiliationMap={affiliationMap}
+            />
+            {showDOI}
+            <ChemotionId id={pubData.id} type="reaction" />
+            {embargo}
+            <h5>
+              <CommentBtn
+                {...this.props}
+                field="Reference"
+                orgInfo={referencesText}
+                onShow={this.handleCommentBtn}
+              />
+              <b>
+                Reference{references.length > 1 ? 's' : null} in the Literature:{' '}
+              </b>
+              <ul style={{ listStyle: 'none' }}>{references}</ul>
+            </h5>
+            <br />
+            <h5>{this.reactionInfo(reaction)}</h5>
+            <RepoSegment segments={reaction.segments} />
+            {schemeOnly
+              ? ''
+              : this.renderAnalysisView(
+                  reaction.container,
+                  'Reaction',
+                  null,
+                  -1,
+                  idyLogin,
+                  idyReview
+                )}
+            {schemeOnly
+              ? ''
+              : this.renderProductAnalysisView(
+                  reaction.products,
+                  idyLogin,
+                  idyReview,
+                  literatures
+                )}
+          </Jumbotron>
+        </div>
+        {canComment ? (
+          <div>
+            <RepoCommentModal
+              show={this.state.showCommentModal}
+              elementId={reaction.id}
+              elementType="reaction"
+              field={this.state.commentField}
+              orgInfo={this.state.originInfo}
+              review={this.props.review}
+              review_info={review_info}
+              onUpdate={this.handleSubmitComment}
+              onHide={() => this.setState({ showCommentModal: false })}
+            />
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}
+
+RepoReactionDetails.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  btnAction: PropTypes.string,
+  review_info: PropTypes.object,
+  showComment: PropTypes.bool,
+  isReview: PropTypes.bool,
+  review: PropTypes.object,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+  onReviewUpdate: PropTypes.func,
+};
+
+RepoReactionDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  review_info: {},
+  showComment: true,
+  btnAction: '',
+  isReview: false,
+  review: {},
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  onReviewUpdate: () => {},
+};
diff --git a/app/packs/src/libHome/RepoReactionList.js b/app/packs/src/libHome/RepoReactionList.js
new file mode 100644
index 000000000..e9ecd2856
--- /dev/null
+++ b/app/packs/src/libHome/RepoReactionList.js
@@ -0,0 +1,106 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import uuid from 'uuid';
+import SVG from 'react-inlinesvg';
+import PropTypes from 'prop-types';
+import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
+import PublicActions from '../components/actions/PublicActions';
+
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
+const svgTag = (path, klassName, isPubElement) => {
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
+    </Popover>
+  );
+  return isPubElement ? (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} height={300} /></div>
+    </OverlayTrigger>
+  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
+};
+
+const infoTag = (reaction, schemeOnly) => {
+  const pubData = (reaction && reaction.pub_id) || '';
+  const taggData = (reaction && reaction.taggable_data) || {};
+
+  let authorInfo = '';
+  if (taggData && taggData.creators && taggData.creators.length > 0) {
+    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{taggData.creators[0] && taggData.creators[0].name}</div></div>);
+  } else if (taggData && taggData.contributors) {
+    authorInfo = (<div className="home_wrapper_item"><div>Contributor</div><div className="item_xvial">{taggData.contributors.name}</div></div>);
+  } else {
+    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div /></div>);
+  }
+
+  return (
+    <Row key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>ID</div><div className="item_xvial">{`CRR-${pubData}`}</div>
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>Embargo</div><div className="item_xvial">{reaction.embargo}</div>
+        </div>
+      </OverlayTrigger>
+      {authorInfo}
+      <div className="home_wrapper_item">
+        <div>Published on</div><div className="item_xvial">{reaction.published_at}</div>
+      </div>
+      <div className="home_wrapper_item">
+        <div>Analyses</div><div className="item_xvial">{reaction.ana_cnt || 0}</div>
+      </div>
+      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
+        <div className="home_wrapper_item">
+          <div>X-Vial</div><div className="item_xvial">{xvialTag(reaction)}</div>
+        </div>
+      </OverlayTrigger>
+    </Row>
+  );
+};
+const RepoReactionList = (props) => {
+  const {
+    element, currentElement, isPubElement, schemeOnly
+  } = props;
+  const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <Col md={isPubElement === true ? 12 : 6} key={`list-reaction-${element.id}`} onClick={() => PublicActions.displayReaction(element.id)}>
+      <div className={`home_reaction ${listClass}`}>
+        <Row key={`list-reaction-svg-${element.id}`}>
+          <Col md={12}>
+            {svgTag(element.svgPath, 'reaction', isPubElement)}
+          </Col>
+        </Row>
+        {infoTag(element, schemeOnly, listClass)}
+      </div>
+    </Col>
+  );
+};
+
+RepoReactionList.propTypes = {
+  element: PropTypes.object.isRequired,
+  currentElement: PropTypes.object,
+  isPubElement: PropTypes.bool,
+  schemeOnly: PropTypes.bool
+};
+
+RepoReactionList.defaultProps = {
+  isPubElement: false,
+  schemeOnly: false,
+  currentElement: null
+};
+
+export default RepoReactionList;
diff --git a/app/packs/src/libHome/RepoReactionSchemeInfo.js b/app/packs/src/libHome/RepoReactionSchemeInfo.js
new file mode 100644
index 000000000..1cd458041
--- /dev/null
+++ b/app/packs/src/libHome/RepoReactionSchemeInfo.js
@@ -0,0 +1,81 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import {
+  Panel,
+  Row,
+  Col
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { CommentBtn, ReactionTable, ReactionRinChiKey, resizableSvg } from './RepoCommon';
+import QuillViewer from '../components/QuillViewer';
+
+const RepoReactionSchemeInfo = (props) => {
+  const content = props.reaction.description;
+  const contentlength = (content && content.ops && content.ops.length > 0
+    && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const descQV = contentlength > 0 ?
+    (<span><b>Description:</b><QuillViewer value={content} /></span>) : null;
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            {resizableSvg(props.svgPath)}
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
+            <ReactionTable
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Scheme')}
+              show={props.showScheme}
+              isPublic
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Rinchi')}
+              show={props.showRinchi}
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+RepoReactionSchemeInfo.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  svgPath: PropTypes.string.isRequired,
+  showScheme: PropTypes.bool.isRequired,
+  showRinchi: PropTypes.bool.isRequired,
+  showProp: PropTypes.bool.isRequired,
+  bodyAttrs: PropTypes.object.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  review_info: PropTypes.object,
+  propInfo: PropTypes.string,
+  onComment: PropTypes.func,
+  canComment: PropTypes.bool,
+};
+
+RepoReactionSchemeInfo.defaultProps = {
+  review_info: 0,
+  propInfo: '',
+  onComment: () => {},
+  canComment: false
+};
+
+export default RepoReactionSchemeInfo;
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
new file mode 100644
index 000000000..f168c18fd
--- /dev/null
+++ b/app/packs/src/libHome/RepoReview.js
@@ -0,0 +1,515 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import Select from 'react-select';
+import { filter } from 'lodash';
+import { RepoReviewModal } from 'repo-review-ui';
+import RepoReviewDetails from './RepoReviewDetails';
+import ReviewActions from '../components/actions/ReviewActions';
+import EmbargoActions from '../components/actions/EmbargoActions';
+import ReviewStore from '../components/stores/ReviewStore';
+import UserStore from '../components/stores/UserStore';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import LoadingActions from '../components/actions/LoadingActions';
+
+import { SvgPath, ElStateLabel, ElSubmitTime, SchemeWord, ChecklistPanel } from './RepoCommon';
+// import RepoReviewModal from '../components/common/RepoReviewModal';
+
+const renderElement = (e, currentElement, embargoBtn) => {
+  if (e.type === 'Reaction') {
+    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+    const schemeOnly = (e && e.scheme_only === true) || false;
+    return (
+      <tr
+        key={e.id}
+        className={listClass}
+        onClick={() => ReviewActions.displayReviewReaction(e.id)}
+      >
+        <td style={{ position: 'relative' }} >
+          <span className="review_element_label">
+            <i className="icon-reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+          </span>
+          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+          &nbsp;{embargoBtn}
+          <div>
+            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+            <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}}  />
+          </div>
+        </td>
+      </tr>
+    );
+  }
+  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => ReviewActions.displayReviewSample(e.id)}
+    >
+      <td style={{ position: 'relative' }}>
+        <span className="review_element_label">
+          <i className="icon-sample" />&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+        &nbsp;{embargoBtn}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+          <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const defaultState = 'pending';
+
+export default class RepoReview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 10,
+      elements: [],
+      currentElement: null,
+      showReviewModal: false,
+      reviewData: {},
+      selectType: 'All',
+      searchType: 'All',
+      searchValue: '',
+      listTypeOptions: [],
+      selectState: defaultState,
+      bundles: [],
+      btnAction: '',
+      showEmbargoModal: false,
+      selectedElement: null,
+      selectedEmbargo: null
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleSelectType = this.handleSelectType.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+    this.handleSearchNameInput = this.handleSearchNameInput.bind(this);
+    this.onEmbargoBtnClick = this.onEmbargoBtnClick.bind(this);
+    this.onEmbargoBtnSave = this.onEmbargoBtnSave.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    ReviewStore.listen(this.onChange);
+    ReviewActions.getElements.defer();
+    EmbargoActions.getEmbargoBundle(); // added to ReviewStore
+    ReviewActions.fetchUnitsSystem.defer();
+  }
+
+  componentWillUnmount() {
+    ReviewStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
+    LoadingActions.start();
+    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
+    // this.props.onHide(false);
+  }
+
+  handleReviewUpdate(e, col, rr) {
+    const { review } = this.state;
+    const checklist = rr.checklist || {};
+    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
+    checklist[col].status = e.target.checked;
+    review.checklist = checklist;
+    ReviewActions.updateReview(review);
+  }
+
+  onPerPageChange(e) {
+    const {
+      page, selectType, selectState, searchType, searchValue
+    } = this.state;
+    const perPage = e.target.value;
+    this.setState({ perPage });
+    ReviewActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
+  }
+
+  onPaginationSelect(eventKey) {
+    const {
+      pages, perPage, selectType, selectState, searchType, searchValue
+    } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      ReviewActions.getElements(
+        selectType, selectState, searchType, searchValue,
+        eventKey, perPage
+      );
+    }
+  }
+
+  onEmbargoBtnClick(e, element) {
+    e.preventDefault();
+    e.stopPropagation();
+    const selectedElement = !this.state.showEmbargoModal ? element : null;
+    this.setState({ showEmbargoModal: !this.state.showEmbargoModal, selectedElement });
+  }
+
+  onEmbargoBtnSave(e, element) {
+    const { selectedEmbargo, selectedElement } = this.state;
+    if (selectedEmbargo === null) {
+      return alert('Please select an embargo first!');
+    }
+    EmbargoActions.assignEmbargo(selectedEmbargo.value, selectedElement);
+    this.onEmbargoBtnClick(e, element);
+    return true;
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+  handleSelectType(val) {
+    const { selectType, selectState, perPage } = this.state;
+    if (val && (val === 'Submitter' || val === 'Embargo')) {
+      RepositoryFetcher.fetchReviewSearchOptions(val, selectType, selectState).then((res) => {
+        const options = res && res.result && res.result
+          .map(u => ({ value: u.key, name: u.name, label: u.label }));
+        this.setState({ listTypeOptions: options });
+        ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    } else {
+      ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
+    }
+  }
+
+  handleSearchNameInput(event) {
+    const { value } = event.target;
+    if (value) {
+      this.setState({ searchValue: value });
+    }
+  }
+
+  handleSelectAdvValue(val) {
+    const {
+      perPage, selectType, selectState, searchType
+    } = this.state;
+    if (val) {
+      this.setState({ page: 1, searchValue: val });
+      ReviewActions.getElements(selectType, selectState, searchType, val, 1, perPage);
+    }
+  }
+
+  handleElementSelection(t, event) {
+    const { perPage, searchType, searchValue } = this.state;
+    if (t === 'type') {
+      this.setState({ selectType: event });
+      ReviewActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
+    } else if (t === 'state') {
+      this.setState({ selectState: event });
+      ReviewActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
+    }
+  }
+
+  handleKeyDown(event) {
+    const {
+      perPage, selectType, selectState, searchType, searchValue
+    } = this.state;
+    switch (event.keyCode) {
+      case 13: // Enter
+        ReviewActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }
+
+  loadValuesByType(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return RepositoryFetcher.fetchReviewSearchValues(this.state.searchType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  renderMenuItems(t, elements) {
+    const menu = elements.map(element => (
+      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
+        {element}
+      </MenuItem>
+    ));
+    return menu;
+  }
+
+  renderSearch() {
+    const { searchType, searchValue, listTypeOptions } = this.state;
+
+    const customClass = '.btn-unified';
+    const optSearchType = ['All', 'Samples', 'Reactions'];
+    const optSearchState = ['All', 'pending', 'reviewed', 'accepted'];
+
+    this.listOptions = [
+      { value: 'All', label: 'filter by' },
+      { value: 'Name', label: 'name' },
+      { value: 'Embargo', label: 'embargo' },
+      { value: 'Submitter', label: 'submitter' },
+    ];
+
+    const filterDropdown = (
+      <ButtonGroup className="home-search" style={{ display: 'flex' }}>
+        <DropdownButton
+          className={customClass}
+          id="type-inner-dropdown"
+          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
+        >
+          {this.renderMenuItems('type', optSearchType)}
+        </DropdownButton>
+        <DropdownButton
+          className={customClass}
+          id="state-inner-dropdown"
+          title={this.state.selectState}
+        >
+          {this.renderMenuItems('state', optSearchState)}
+        </DropdownButton>
+      </ButtonGroup>
+    );
+
+    const searchTypeTbl = (
+      <Select
+        simpleValue
+        searchable={false}
+        options={this.listOptions}
+        placeholder="Select search field"
+        clearable={false}
+        valueKey="value"
+        labelKey="label"
+        onChange={this.handleSelectType}
+        defaultValue="All"
+        value={searchType}
+        className="o-author"
+      />
+    );
+
+    let searchValueTbl = (<div />);
+    switch (searchType) {
+      case 'Embargo':
+      case 'Submitter':
+        searchValueTbl = (
+          <Select
+            simpleValue
+            searchable
+            options={listTypeOptions}
+            placeholder="Select..."
+            valueKey="value"
+            labelKey="label"
+            onChange={this.handleSelectAdvValue}
+            value={searchValue}
+            className="o-name"
+          />
+        );
+        break;
+      case 'Name':
+        searchValueTbl = (
+          <FormControl
+            type="text"
+            placeholder="Name..."
+            value={this.state.searchValue || ''}
+            onChange={event => this.handleSearchNameInput(event)}
+            onKeyDown={event => this.handleKeyDown(event)}
+          />
+        );
+        break;
+      default:
+        searchValueTbl = (<div />);
+    }
+
+    const searchTbl = (
+      <div className="home-adv-search">
+        <div style={{ display: 'flex' }}>
+          { filterDropdown }
+          { searchTypeTbl }
+          { searchValueTbl }
+        </div>
+      </div>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {searchTbl}
+      </div>
+    );
+  }
+
+  renderEmabrgoModal() {
+    const { showEmbargoModal, bundles, selectedElement, selectedEmbargo } = this.state;
+
+    const options = [
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+
+    bundles.forEach((col) => {
+      const tag = col.taggable_data || {};
+      options.push({ value: col.element_id, name: tag.label, label: tag.label });
+    });
+
+    const allBundles = filter(options, b => b.value !== (selectedEmbargo == null ? '' : selectedEmbargo.element_id));
+
+    const element = selectedElement || {};
+    return (
+      <Modal backdrop="static" show={showEmbargoModal}>
+        <Modal.Header><Modal.Title>{element.type}: [{element.title}]</Modal.Title></Modal.Header>
+        <Modal.Body>
+          <Panel bsStyle="success">
+            <Panel.Heading>
+              <Panel.Title>Movee {element.type} [{element.title}] to :</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              <Select
+                value={this.state.selectedEmbargo}
+                onChange={e => this.setState({ selectedEmbargo: e })}
+                options={allBundles}
+                className="select-assign-collection"
+              />
+              <br />
+              <ButtonToolbar>
+                <Button bsStyle="warning" onClick={e => this.onEmbargoBtnClick(e, element)}>Cancel</Button>
+                <Button bsStyle="primary" onClick={e => this.onEmbargoBtnSave(e, element)}>Move Embargoed Bundle</Button>
+              </ButtonToolbar>
+            </Panel.Body>
+          </Panel>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+
+  renderReviewModal() {
+    const { showReviewModal, reviewData, review_info, review, currentElement, elementType, btnAction } = this.state;
+    const rrr = {};
+    rrr['review_info'] = review_info;
+    rrr['review'] = review;
+    rrr['btnAction'] = btnAction;
+    rrr['elementType'] = elementType;
+    if (elementType === 'sample') {
+      rrr['elementId'] = currentElement?.sample?.id;
+    } else {
+      rrr['elementId'] = currentElement?.reaction?.id;
+    }
+
+    return (
+      <RepoReviewModal
+        show={showReviewModal}
+        data={rrr}
+        onSubmit={this.handleSubmitReview}
+        onUpdate={this.handleReviewUpdate}
+        onHide={() => this.setState({ showReviewModal: false })}
+      />
+    );
+  }
+
+  render() {
+    const { elements, currentElement } = this.state;
+    const { currentUser } = UserStore.getState();
+    const embargoBtn = (element) => {
+      if (element.state === 'reviewed' && element.embargo === '' && element.submitter_id === currentUser.id) {
+        return (
+          <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to an embargoed bundle</Tooltip>}>
+            <Button bsSize="xsmall" onClick={e => this.onEmbargoBtnClick(e, element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
+          </OverlayTrigger>
+        );
+      }
+      return null;
+    };
+    return (
+      <div>
+        <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+          <Col md={currentElement ? 4 : 12} >
+            <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+              {this.renderSearch()}
+              <div style={{ clear: 'both' }} />
+            </Navbar>
+            <div>
+              <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+                <Table striped className="review-entries">
+                  <tbody striped="true" bordered="true" hover="true">
+                    {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement, embargoBtn(r))) }
+                  </tbody>
+                </Table>
+              </div>
+              <div className="list-container-bottom">
+                <Row>
+                  <Col sm={8}>{this.pagination()}</Col>
+                  <Col sm={4}>{this.perPageInput()}</Col>
+                </Row>
+              </div>
+            </div>
+          </Col>
+          <Col className="review-element" md={currentElement ? 8 : 0}>
+            <RepoReviewDetails />
+            {this.renderEmabrgoModal()}
+          </Col>
+        </Row>
+        {this.renderReviewModal()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
new file mode 100644
index 000000000..136bb8b59
--- /dev/null
+++ b/app/packs/src/libHome/RepoReviewButtonBar.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Button,
+  ButtonToolbar,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import RepoMetadataModal from '../components/common/RepoMetadataModal';
+import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
+
+const showButton = (btn, func, pubState, review_info) => {
+  let title = btn;
+  let btnBsStyle = '';
+  let btnIcon = '';
+  let btnTooltip = '';
+
+  switch (btn) {
+    case 'Accept':
+      btnBsStyle = 'primary';
+      btnIcon = 'fa fa-paper-plane';
+      btnTooltip = 'Accept publication';
+      break;
+    case 'Approve':
+      btnBsStyle = 'primary';
+      btnIcon = 'fa fa-paper-plane';
+      btnTooltip = 'Accept publication by group leader';
+      break;
+    case 'Review':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-exchange';
+      btnTooltip = 'Review publication, modification required for submitter';
+      break;
+    case 'Submit':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-play';
+      btnTooltip = 'Submit for publication';
+      break;
+    case 'Decline':
+      btnBsStyle = 'default';
+      btnIcon = 'fa fa-eject';
+      if (review_info?.review_level === 2) {
+        btnTooltip = 'Withdraw publication';
+        title = 'Withdraw';
+      } else if (review_info?.review_level === 3) {
+        btnTooltip = 'Reject publication';
+        title = 'Reject';
+      }
+      break;
+    default:
+      break;
+  }
+  return ((review_info?.review_level === 3 && pubState === 'pending' && btn !== 'Submit') ||
+  (pubState === 'pending' && btn !== 'Submit' && review_info?.preapproved !== true && btn !== 'Accept' && btn !== 'Decline' && review_info?.groupleader === true) ||
+  (review_info?.submitter === true && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
+    <OverlayTrigger
+      key={`ot_${title}`}
+      placement="top"
+      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
+    >
+      <Button
+        bsStyle={btnBsStyle}
+        onClick={() => func(true, btn)}
+      >
+        <i className={btnIcon} />&nbsp;{title}
+      </Button>
+    </OverlayTrigger>
+  ) : <span key={`span_${title}`} />;
+};
+
+const showCommentButton = (btn, func, currComment) => {
+  const hasComments = (currComment && currComment.comment && currComment.comment.length > 0) || false;
+  return (
+    <OverlayTrigger
+      key="ot_comments"
+      placement="top"
+      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
+    >
+      <Button
+        bsStyle={hasComments ? 'success' : 'default'}
+        onClick={() => func(true, btn)}
+      >
+        <i className="fa fa-comments" />&nbsp;
+        Comments
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const RepoReviewButtonBar = props =>
+  (
+    <ButtonToolbar>
+      {
+        props.showComment === true && props.buttons.filter(b => b === 'Comments').map(b =>
+          showCommentButton(b, props.buttonFunc, (props.currComment)))
+      }
+      {
+        props.showComment === true && props.buttons.filter(b => b !== 'Comments').map(b =>
+          showButton(b, props.buttonFunc, props.currComment.state, props.review_info))
+      }
+      <RepoMetadataModal
+        elementId={props.element.id}
+        elementType={props.element.elementType.toLowerCase()}
+      />
+      <RepoReviewAuthorsModal element={props.element} review_info={props.review_info} schemeOnly={props.schemeOnly} taggData={props.taggData} />
+    </ButtonToolbar>
+  );
+
+RepoReviewButtonBar.propTypes = {
+  element: PropTypes.shape({
+    id: PropTypes.number,
+    elementType: PropTypes.string
+  }).isRequired,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+  buttonFunc: PropTypes.func,
+  review_info: PropTypes.object,
+  showComment: PropTypes.bool,
+  schemeOnly: PropTypes.bool,
+  currComment: PropTypes.object,
+  taggData: PropTypes.object
+};
+
+
+RepoReviewButtonBar.defaultProps = {
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  buttonFunc: () => { },
+  review_info: {},
+  showComment: true,
+  schemeOnly: false,
+  currComment: {},
+  taggData: {}
+};
+
+export default RepoReviewButtonBar;
diff --git a/app/packs/src/libHome/RepoReviewCommon.js b/app/packs/src/libHome/RepoReviewCommon.js
new file mode 100644
index 000000000..34f6e5e81
--- /dev/null
+++ b/app/packs/src/libHome/RepoReviewCommon.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+import { startsWith } from 'lodash';
+import moment from 'moment';
+import { RepoReviewTimeFormat } from 'repo-review-ui';
+
+const AffiliationMap = (affiliationIds) => {
+  const aId = [].concat.apply([], affiliationIds);
+  const affiliationMap = {};
+  let aCount = 0;
+  aId.map((e) => {
+    if (!affiliationMap[e]) {
+      aCount += 1;
+      affiliationMap[e] = aCount;
+    }
+  });
+  return affiliationMap;
+};
+
+const CommentComponent = (field, history) => {
+  const submitHis = history.filter(h => h.type === 'submit' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
+  const reviewHis = history.filter(h => h.type === 'reviewed' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
+
+  const current = (submitHis.length > 0) ? submitHis.pop() : null;
+  const previous = (reviewHis.length > 0) ? reviewHis.pop() : null;
+  const submitField = (current && current.comments && current.comments[`${field}`]) || {};
+  const reviewField = (previous && previous.comments && previous.comments[`${field}`]) || {};
+
+  let keep = true;
+  let submitFieldTime = null;
+  let reviewFieldTime = null;
+  if (current && previous) {
+    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
+      submitFieldTime = moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss');
+    } else {
+      submitFieldTime = new Date(submitField.timestamp);
+    }
+
+    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
+      reviewFieldTime = moment(reviewField.timestamp, 'DD-MM-YYYY HH:mm:ss');
+    } else {
+      reviewFieldTime = new Date(reviewField.timestamp);
+    }
+    keep = reviewFieldTime > submitFieldTime;
+  }
+
+  const submitTbl = (current ?
+    (
+      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
+        <strong>{submitField.username} ({RepoReviewTimeFormat(submitField.timestamp)})</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{submitField.comment}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+  const reviewTbl = (previous ?
+    (
+      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
+        <strong>{reviewField.username} ({RepoReviewTimeFormat(reviewField.timestamp)})</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{reviewField.comment}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+
+  const tbl = keep ? (<span>{reviewTbl}{submitTbl}</span>) : (<span>{submitTbl}{reviewTbl}</span>);
+  return tbl;
+};
+
+const CommentDisplay = ({ elReview, commentKey, history }) => {
+  let objectKey = commentKey;
+  if (startsWith(commentKey, 'Reaction_Analysis_')) {
+    objectKey = 'Reaction Analysis';
+  } else if (startsWith(commentKey, 'Product_Analysis_')) {
+    objectKey = 'Product Analysis';
+  } else if (startsWith(commentKey, 'Analysis_')) {
+    objectKey = 'Analysis';
+  }
+
+  if (elReview) {
+    switch (objectKey) {
+      case 'Summary':
+        return CommentComponent(elReview.comment, 'Review Summary', null);
+      case 'Reference':
+      case 'Reaction Table':
+      case 'Description':
+      case 'Additional information':
+      case 'Properties':
+      case 'TLC-Control':
+      case 'Reaction Analysis':
+      case 'Product Analysis':
+      case 'Analysis':
+        return (elReview.comments && elReview.comments[commentKey]) ?
+          CommentComponent(objectKey, history) : <div />;
+      default:
+        return <div />;
+    }
+  }
+  return <div />;
+};
+
+CommentDisplay.propTypes = {
+  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  commentKey: PropTypes.string.isRequired,
+  history: PropTypes.array
+};
+
+CommentDisplay.defaultProps = {
+  elReview: null,
+  history: []
+};
+
+export {
+  AffiliationMap,
+  CommentComponent,
+  CommentDisplay
+};
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
new file mode 100644
index 000000000..efafcd440
--- /dev/null
+++ b/app/packs/src/libHome/RepoReviewDetails.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import ReviewStore from '../components/stores/ReviewStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoReviewDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element,
+      review: {},
+      btnAction: '',
+      review_info: {},
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    ReviewStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    ReviewStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction':
+        return (
+          <RepoReactionDetails
+            reaction={currentElement.reaction}
+            canComment
+            review_info={this.state.review_info}
+            btnAction={this.state.btnAction}
+            isReview={true}
+            review={this.state.review}
+          />);
+      case 'sample':
+        return (
+          <RepoSampleDetails
+            element={currentElement}
+            canComment
+            btnAction={this.state.btnAction}
+            review_info={this.state.review_info}
+            review={this.state.review}
+          />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
new file mode 100644
index 000000000..45739c2f3
--- /dev/null
+++ b/app/packs/src/libHome/RepoSample.js
@@ -0,0 +1,325 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Jumbotron, Panel } from 'react-bootstrap';
+import { AffiliationMap } from 'repo-review-ui';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AffiliationList,
+  AnalysesTypeJoinLabel,
+  AuthorList,
+  CommentBtn,
+  ContributorInfo,
+  ClipboardCopyBtn,
+  IconToMyDB,
+  RenderPublishAnalysesPanel,
+  SidToPubChem,
+  ToggleIndicator,
+  ElStateLabel,
+} from './RepoCommon';
+import DateInfo from '../components/chemrepo/DateInfo';
+import LicenseIcon from '../components/chemrepo/LicenseIcon';
+import MAPanel from '../components/chemrepo/MoleculeArchive';
+import PublicActions from '../components/actions/PublicActions';
+import PublicAnchor from '../components/chemrepo/PublicAnchor';
+import PublicSample from '../components/chemrepo/PublicSample';
+import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
+import RepoSegment from './RepoSegment';
+import Sample from '../components/models/Sample';
+import UserCommentModal from '../components/chemrepo/UserCommentModal';
+
+const scrollView = () => {
+  const anchor = window.location.hash.split('#')[1];
+  if (anchor) {
+    const anchorElement = document.getElementById(anchor);
+    if (anchorElement) {
+      anchorElement.scrollIntoView({ block: 'start', behavior: 'auto' });
+    }
+  }
+};
+export default class RepoSample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expandSA: true,
+      expandSG: '',
+    };
+    this.panelRef = React.createRef();
+    this.materialRef = React.createRef();
+    this.handleAnalysesLink = this.handleAnalysesLink.bind(this);
+    this.handleMaterialLink = this.handleMaterialLink.bind(this);
+    this.toggleSA = this.toggleSA.bind(this);
+    this.renderAnalyses = this.renderAnalyses.bind(this);
+  }
+
+  componentDidMount() {
+    scrollView();
+  }
+
+  componentDidUpdate() {
+    scrollView();
+  }
+
+  handleAnalysesLink() {
+    this.panelRef.current.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  handleMaterialLink() {
+    this.materialRef.current.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  toggleSA() {
+    const { expandSA } = this.state;
+    this.setState({ expandSA: !expandSA });
+  }
+
+  updateRepoXvial(elementId) {
+    const { listType } = this.props;
+    PublicActions.displayMolecule(elementId, '', false, '', '', listType);
+    PublicActions.refreshPubElements(`Molecules=${listType}`);
+  }
+
+  renderAnalyses(analyses) {
+    const { sample } = this.props;
+    const specSample = new Sample(sample);
+    specSample.container = sample.analyses;
+    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
+    return orderAnalyses.map((analysis) => {
+      const userInfo =
+        (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
+      const kind = (analysis.extended_metadata['kind'] || '')
+        .split('|')
+        .pop()
+        .trim();
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn
+            {...this.props}
+            field={`Analysis_${analysis.id}`}
+            orgInfo={kind}
+            onShow={this.props.handleCommentBtn}
+          />
+          <RenderPublishAnalysesPanel
+            key={analysis.id}
+            userInfo={userInfo}
+            analysis={analysis}
+            isPublic={this.props.isPublished}
+            isLogin={this.props.isLogin}
+            isReviewer={this.props.isReviewer}
+            type="Container"
+            pageType="molecules"
+            pageId={sample.molecule_id}
+            element={specSample}
+          />
+        </span>
+      );
+    });
+  }
+
+  render() {
+    const {
+      sample,
+      pubData,
+      tagData,
+      isPublished,
+      isLogin,
+      isReviewer,
+      element,
+    } = this.props;
+    const { xvialCom } = element;
+    const { expandSA } = this.state;
+    const affiliationMap = AffiliationMap(sample.affiliation_ids);
+
+    const iupacUserDefined =
+      sample.showed_name == sample.molecule_iupac ||
+      sample.showed_name == null ? (
+        <span />
+      ) : (
+        <h5>
+          <b>Name: </b> {sample.showed_name}{' '}
+        </h5>
+      );
+    const userInfo = sample.pub_info || '';
+    const analyses =
+      (sample.analyses &&
+        sample.analyses.children &&
+        sample.analyses.children.length > 0 &&
+        sample.analyses.children[0].children) ||
+      [];
+    let embargo = null;
+    let colDoiPrefix = sample?.doi || '';
+    colDoiPrefix =
+      typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
+    colDoiPrefix = colDoiPrefix.split('/')[0];
+    if (sample.embargo) {
+      const embargoLink = isPublished
+        ? `/inchikey/collection/${sample.embargo}`
+        : `/embargo/sample/${sample.id}`;
+      embargo = (
+        <span>
+          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
+          &nbsp;
+          <Button
+            key="embargo-link-btn"
+            bsStyle="link"
+            href={embargoLink}
+            target="_blank"
+            style={{ padding: '0px 0px' }}
+          >
+            <i className="fa fa-database" />
+            &nbsp;&nbsp;{sample.embargo}
+          </Button>
+          <ClipboardCopyBtn
+            text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`}
+            tooltip="retrieve and copy collection DOI"
+          />
+        </span>
+      );
+    }
+
+    return (
+      <Jumbotron key={`sample-${sample.id}`}>
+        <PublicAnchor doi={sample.doi} isPublished={isPublished} />
+        <span className="repo-pub-sample-header">
+          <span className="repo-pub-title">
+            <IconToMyDB
+              isLogin={isLogin}
+              isPublished={isPublished}
+              id={sample.id}
+              type="sample"
+            />
+          </span>
+          &nbsp;
+          <span className="repo-pub-title">
+            <DateInfo
+              isPublished={isPublished}
+              preText="Sample"
+              pubData={pubData}
+              tagData={tagData}
+            />
+          </span>
+          &nbsp;
+          <SidToPubChem sid={sample.sid} />
+          &nbsp;
+          <span className="repo-public-user-comment">
+            <PublicCommentModal
+              isReviewer={isReviewer}
+              id={sample.id}
+              type="Sample"
+              title={sample.showed_name}
+              userInfo={userInfo}
+              pageType="molecules"
+              pageId={sample.molecule_id}
+            />
+            &nbsp;
+            <UserCommentModal
+              isLogin={isLogin}
+              id={sample.id}
+              type="Sample"
+              title={sample.showed_name}
+              pageType="molecules"
+              pageId={sample.molecule_id}
+            />
+            &nbsp;
+          </span>
+          {ElStateLabel(sample.embargo)}
+        </span>
+        <br />
+        {iupacUserDefined}
+        <ContributorInfo contributor={sample.contributors} />
+        <h5>
+          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
+          <AuthorList
+            creators={sample.creators}
+            affiliationMap={affiliationMap}
+          />
+        </h5>
+        <AffiliationList
+          affiliations={sample.affiliations}
+          affiliationMap={affiliationMap}
+        />
+        <br />
+        <PublicSample
+          {...this.props}
+          embargo={embargo}
+          handleAnalysesLink={this.handleAnalysesLink}
+          handleMaterialLink={this.handleMaterialLink}
+        />
+        <br />
+        <br />
+        <div ref={this.materialRef}>
+          <MAPanel
+            isEditable={isReviewer}
+            isLogin={isLogin}
+            allowRequest
+            elementId={sample.id}
+            data={sample.xvial}
+            saveCallback={() => this.updateRepoXvial(sample.molecule_id)}
+            xvialCom={xvialCom}
+          />
+          &nbsp;
+        </div>
+        <RepoSegment segments={sample.segments} />
+        <span className="repo-pub-sample-header">
+          <div ref={this.panelRef}>
+            <ToggleIndicator
+              onClick={this.toggleSA}
+              name="Analyses"
+              indicatorStyle={expandSA ? 'down' : 'right'}
+            />
+          </div>
+          <span
+            className="label"
+            style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
+          >
+            {AnalysesTypeJoinLabel(
+              ArrayUtils.sortArrByIndex(analyses),
+              'Sample'
+            )}
+          </span>
+          <LicenseIcon
+            license={sample.license}
+            hasCoAuthors={sample.author_ids.length > 1}
+          />
+        </span>
+        <Panel
+          style={{ border: 'none' }}
+          id="collapsible-panel-sample-analyses"
+          expanded={expandSA}
+          defaultExpanded={expandSA}
+          onToggle={() => {}}
+        >
+          <Panel.Collapse>
+            <Panel.Body
+              style={{
+                fontSize: '90%',
+                backgroundColor: '#f5f5f5',
+                padding: '4',
+              }}
+            >
+              {this.renderAnalyses(analyses)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </Jumbotron>
+    );
+  }
+}
+
+RepoSample.propTypes = {
+  sample: PropTypes.object.isRequired,
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+  canComment: PropTypes.bool,
+  handleCommentBtn: PropTypes.func,
+  isLogin: PropTypes.bool,
+  isReviewer: PropTypes.bool,
+};
+
+RepoSample.defaultProps = {
+  canComment: false,
+  isLogin: false,
+  isReviewer: false,
+  handleCommentBtn: () => {},
+};
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
new file mode 100644
index 000000000..c5234508e
--- /dev/null
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -0,0 +1,218 @@
+import React, { Component } from 'react';
+import { Panel } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { RepoCommentModal } from 'repo-review-ui';
+import {
+  ClosePanel,
+  MoleculeInfo,
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import ReviewActions from '../components/actions/ReviewActions';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import RepoSample from './RepoSample';
+
+export default class RepoSampleDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showReviewModal: false,
+      showCommentModal: false,
+      commentField: '',
+      originInfo: '',
+    };
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    ReviewActions.handleReviewModal(showReviewModal, btnAction);
+  }
+
+  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
+    LoadingActions.start();
+    ReviewActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
+    // this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = comment;
+    cinfo[field].origInfo = origInfo;
+    ReviewActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  render() {
+    const {
+      element,
+      isPublished,
+      canComment,
+      review_info,
+      showComment,
+      review,
+      canClose,
+    } = this.props;
+
+    let { buttons } = this.props;
+
+
+    const history = review?.history || [];
+    if (typeof (element) === 'undefined' || !element) {
+      return <div />;
+    }
+    if (review_info?.groupleader === true && review_info?.preapproved !== true) {
+      buttons = ['Comments', 'Review', 'Approve'];
+    }
+
+    const {
+      molecule, isLogin, isReviewer, xvialCom
+    } = element;
+
+    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
+    const idyReview = typeof isReviewer === 'undefined' ? false : isReviewer;
+    let samples = [];
+    let pubData = {};
+    let tagData = {};
+    let { sample } = element;
+    let hasXvial = false;
+    if (isPublished) {
+      samples = element.published_samples;
+      sample = samples.find(x => x !== undefined) || {};
+      sample.id = sample.sample_id;
+      hasXvial = samples.filter(s => s !== undefined && s.xvial && s.xvial !== '').length > 0;
+    } else {
+      samples.push(element.sample);
+      pubData = element.publication;
+    }
+
+    tagData = (pubData?.taggable_data) || {};
+    const details = (samples || []).map((s) => {
+      if (isPublished) {
+        pubData = {
+          id: s.pub_id
+        };
+        tagData = {
+          published_at: s.published_at,
+          doi_reg_at: s.doi_reg_at
+        };
+      }
+      const el = {
+        id: s.id || s.sample_id,
+        decoupled: s.decoupled,
+        sid: s.sid,
+        short_label: s.short_label || '',
+        xvial: s.xvial,
+        embargo: s.embargo,
+        pub_info: s.pub_info,
+        ana_infos: s.ana_infos,
+        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
+        affiliations: s.affiliations || tagData.affiliations,
+        literatures: s.literatures || element.literatures,
+        license: s.license || tagData.license || 'CC BY-SA',
+        author_ids: s.author_ids || tagData.author_ids || [],
+        contributors: s.contributors || tagData.contributors,
+        creators: s.creators || tagData.creators,
+        doi: s.doi || element.doi,
+        reaction_ids: s.reaction_ids || [],
+        showed_name: s.showed_name,
+        molecule_iupac: molecule.iupac_name || [],
+        molecule_id: molecule.id,
+        analyses: s.analyses || element.analyses || [],
+        segments: s.segments || []
+      };
+
+      return (
+        <RepoSample
+          key={el.id}
+          sample={el}
+          pubData={pubData}
+          tagData={tagData}
+          handleCommentBtn={this.handleCommentBtn}
+          isLogin={idyLogin}
+          isReviewer={idyReview}
+          {...this.props}
+        />
+      );
+    });
+
+    return (
+      <Panel style={{ border: 'none' }} >
+        <Panel.Body>
+          {
+            canComment ?
+              <RepoReviewButtonBar
+                element={{ id: sample.id, elementType: 'Sample' }}
+                buttonFunc={this.handleReviewBtn}
+                review_info={review_info}
+                showComment={showComment}
+                currComment={(history && history.slice(-1).pop()) || {}}
+                buttons={buttons}
+                taggData={tagData}
+              /> : ''
+          }
+          {canClose ? <ClosePanel element={sample} /> : ''}
+          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} xvialCom={xvialCom} />
+          <div>
+            {details}
+          </div>
+          {
+            canComment ?
+              <div>
+                <RepoCommentModal
+                  show={this.state.showCommentModal}
+                  elementId={sample.id}
+                  elementType="Sample"
+                  field={this.state.commentField}
+                  orgInfo={this.state.originInfo}
+                  review_info={review_info}
+                  review={review || {}}
+                  onUpdate={this.handleSubmitComment}
+                  onHide={() => this.setState({ showCommentModal: false })}
+                />
+              </div> : ''
+          }
+
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+RepoSampleDetails.propTypes = {
+  element: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  btnAction: PropTypes.string,
+  review_info: PropTypes.object,
+  showComment: PropTypes.bool,
+  review: PropTypes.object,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+  onReviewUpdate: PropTypes.func,
+};
+
+RepoSampleDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  btnAction: '',
+  review_info: {},
+  showComment: true,
+  review: {},
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  onReviewUpdate: () => {},
+};
diff --git a/app/packs/src/libHome/RepoSegment.js b/app/packs/src/libHome/RepoSegment.js
new file mode 100644
index 000000000..6842f7aec
--- /dev/null
+++ b/app/packs/src/libHome/RepoSegment.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { LayerPlain } from 'chem-generic-ui-viewer';
+import { ToggleIndicator } from './RepoCommon';
+
+const listSegment = (props) => {
+  const [toggle, setToggle] = useState(true);
+  return (
+    <span key={`_repo_sample_sg.id_${props.id}`}>
+      <ToggleIndicator onClick={() => setToggle(!toggle)} name={props.klass_label} indicatorStyle={toggle ? 'down' : 'right'} />
+      {
+        toggle ?
+          <LayerPlain
+            layers={props.properties.layers}
+            options={props.properties.select_options || {}}
+            id={props.idx}
+          /> : <div />
+      }
+    </span>
+  );
+};
+
+const RepoSegment = (props) => {
+  const { segments } = props;
+  if (segments.length < 1) return null;
+  return <div className="generic_segments_repo">{segments.map((s, idx) => listSegment({ ...s, idx }))}</div>;
+};
+
+RepoSegment.propTypes = { segments: PropTypes.oneOfType([PropTypes.array]) };
+RepoSegment.defaultProps = { segments: [] };
+
+export default RepoSegment;
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index c0a36ca22..72638cffa 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -927,6 +927,10 @@ export default class Sample extends Element {
     return this.name || this.molecule_formula || this.molecule.iupac_name;
   }
 
+  get labelText() {
+    return this.name || this.molecule_formula || this.molecule.iupac_name;
+  }
+
   set equivalent(equivalent) {
     this._equivalent = equivalent;
   }
@@ -1070,6 +1074,77 @@ export default class Sample extends Element {
     return analyses ? analyses.children : [];
   }
 
+  get solvent() {
+    try {
+      //handle the old solvent data
+      const jsonSolvent = JSON.parse(this._solvent)
+      let solv = []
+      if (jsonSolvent) {
+        solv.push(jsonSolvent)
+      }
+      return solv
+    }
+    catch (e) {}
+    return this._solvent
+  }
+
+  set solvent(solvent) {
+    this._solvent = solvent
+  }
+
+  addSolvent(newSolvent) {
+    const molecule = newSolvent.molecule
+    if (molecule) {
+      let tmpSolvents = []
+      if (this.solvent) {
+        Object.assign(tmpSolvents, this.solvent)
+      }
+      const solventData = { label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1 }
+      const filtered = tmpSolvents.find((solv) => {
+        return (solv && solv.label === solventData.label &&
+          solv.smiles === solventData.smiles &&
+          solv.inchikey && solventData.inchikey)
+      })
+      if (!filtered) {
+        tmpSolvents.push(solventData)
+      }
+      this.solvent = tmpSolvents
+    }
+  }
+
+  deleteSolvent(solventToDelete) {
+    let tmpSolvents = []
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent)
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => {
+      return (solv.label === solventToDelete.label &&
+        solv.smiles === solventToDelete.smiles &&
+        solv.inchikey === solventToDelete.inchikey)
+    })
+    if (filteredIndex >= 0) {
+      tmpSolvents.splice(filteredIndex, 1);
+    }
+    this.solvent = tmpSolvents
+  }
+
+  updateSolvent(solventToUpdate) {
+    let tmpSolvents = []
+    if (this.solvent) {
+      Object.assign(tmpSolvents, this.solvent)
+    }
+
+    const filteredIndex = tmpSolvents.findIndex((solv) => {
+      return (solv.smiles === solventToUpdate.smiles &&
+        solv.inchikey && solventToUpdate.inchikey)
+    })
+    if (filteredIndex >= 0) {
+      tmpSolvents[filteredIndex] = solventToUpdate
+    }
+    this.solvent = tmpSolvents
+  }
+
   analysisArray() {
     const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
     return analyses ? analyses.children : [];
diff --git a/app/packs/src/repo/fetchers/CollaboratorFetcher.js b/app/packs/src/repo/fetchers/CollaboratorFetcher.js
index a3a417960..da41f3afa 100644
--- a/app/packs/src/repo/fetchers/CollaboratorFetcher.js
+++ b/app/packs/src/repo/fetchers/CollaboratorFetcher.js
@@ -56,43 +56,33 @@ export default class CollaboratorFetcher {
   static deleteCollaboration(params) {
     return fetch('/api/v1/collaborators/delete', {
       credentials: 'same-origin',
-      method: 'POST',
+      method: 'PUT',
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
   }
 
   static deleteCollaboratorAff(params) {
     return fetch('/api/v1/collaborators/delete_aff', {
       credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
+      method: 'PUT',
+    });
   }
 
   static refreshOrcidAff(params) {
     return fetch('/api/v1/collaborators/refresh_orcid_aff', {
       credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
+    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+    return promise;
   }
 
 
diff --git a/app/packs/src/stores/alt/stores/CollectionStore.js b/app/packs/src/stores/alt/stores/CollectionStore.js
index e943ae5ee..cb6d78574 100644
--- a/app/packs/src/stores/alt/stores/CollectionStore.js
+++ b/app/packs/src/stores/alt/stores/CollectionStore.js
@@ -17,6 +17,7 @@ class CollectionStore {
 
     this.bindListeners({
       handleTakeOwnership: CollectionActions.takeOwnership,
+      //handleFetchGenericEls: CollectionActions.fetchGenericEls,
       handleFetchLockedCollectionRoots: CollectionActions.fetchLockedCollectionRoots,
       handleFetchUnsharedCollectionRoots: CollectionActions.fetchUnsharedCollectionRoots,
       handleFetchSharedCollectionRoots: CollectionActions.fetchSharedCollectionRoots,
@@ -44,6 +45,11 @@ class CollectionStore {
     CollectionActions.fetchSyncInCollectionRoots();
   }
 
+  //handleFetchGenericEls(result) {
+  //  console.log(result);
+  //  this.state.genericEls = result.genericEls;
+  //}
+
   handleFetchLockedCollectionRoots(results) {
     this.state.lockedRoots = results.collections;
   }
diff --git a/app/packs/src/stores/alt/stores/ElementStore.js b/app/packs/src/stores/alt/stores/ElementStore.js
index 13d977210..5975d98d4 100644
--- a/app/packs/src/stores/alt/stores/ElementStore.js
+++ b/app/packs/src/stores/alt/stores/ElementStore.js
@@ -201,6 +201,9 @@ class ElementStore {
       handleCreatePrivateNote: ElementActions.createPrivateNote,
       handleUpdatePrivateNote: ElementActions.updatePrivateNote,
 
+      handleCreatePrivateNote: ElementActions.createPrivateNote,
+      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
+
       // FIXME ElementStore listens to UIActions?
       handleUnselectCurrentElement: UIActions.deselectAllElements,
       handleSetPagination: UIActions.setPagination,
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
index fd25308b4..ff56483de 100644
--- a/app/packs/src/stores/alt/stores/UIStore.js
+++ b/app/packs/src/stores/alt/stores/UIStore.js
@@ -71,6 +71,19 @@ class UIStore {
       matrices: {}
     };
 
+    // console.log(this.state.klasses);
+    // // eslint-disable-next-line no-unused-expressions
+    // this.state.klasses && this.state.klasses.forEach((klass) => {
+    //   this.state[`${klass}`] = {
+    //     checkedAll: false,
+    //     checkedIds: List(),
+    //     uncheckedIds: List(),
+    //     currentId: null,
+    //     page: 1,
+    //     activeTab: 0,
+    //   };
+    // });
+
     this.bindListeners({
       handleInitialize: UIActions.initialize,
       handleSelectTab: UIActions.selectTab,
diff --git a/app/packs/src/utilities/routesUtils.js b/app/packs/src/utilities/routesUtils.js
index 7df91e801..813d37319 100644
--- a/app/packs/src/utilities/routesUtils.js
+++ b/app/packs/src/utilities/routesUtils.js
@@ -241,6 +241,26 @@ const genericElShowOrNew = (e, type) => {
   }
 };
 
+const genericElShowOrNew = (e, type) => {
+  const { collectionID } = e.params;
+  let itype = '';
+  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
+    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
+    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
+  } else {
+    itype = type;
+  }
+
+  const genericElID = e.params[`${itype}ID`];
+  if (genericElID === 'new') {
+    ElementActions.generateEmptyGenericEl(collectionID, itype);
+  } else if (genericElID === 'copy') {
+    //
+  } else {
+    ElementActions.fetchGenericElById(genericElID, itype);
+  }
+};
+
 const elementShowOrNew = (e) => {
   const type = e.type;
   switch(type) {
diff --git a/app/proxies/element_permission_proxy.rb b/app/proxies/element_permission_proxy.rb
index d88db02ca..f611f4f2c 100644
--- a/app/proxies/element_permission_proxy.rb
+++ b/app/proxies/element_permission_proxy.rb
@@ -16,6 +16,10 @@ def can_copy?
     @policy&.try(:copy?)
   end
 
+  def can_copy?
+    @policy&.try(:copy?)
+  end
+
   def read_dataset?
     detail_level >= 3
   end
diff --git a/app/serializers/computed_props_serializer.rb b/app/serializers/computed_props_serializer.rb
new file mode 100644
index 000000000..81ffc4937
--- /dev/null
+++ b/app/serializers/computed_props_serializer.rb
@@ -0,0 +1,7 @@
+class ComputedPropsSerializer < ActiveModel::Serializer
+  attributes :id, :sample_id, :status, :updated_at
+
+  def updated_at
+    object.updated_at.strftime("%m/%d/%Y %H:%M")
+  end
+end
diff --git a/app/serializers/detail_levels/element.rb b/app/serializers/detail_levels/element.rb
new file mode 100644
index 000000000..a0150d117
--- /dev/null
+++ b/app/serializers/detail_levels/element.rb
@@ -0,0 +1,20 @@
+class DetailLevels::Element
+    def base_attributes
+      [
+        :id, :type, :name, :properties, :created_by, :created_at, :updated_at, :container, :short_label, :can_copy, :uuid, :klass_uuid
+      ]
+    end
+
+    def level0_attributes
+      base_attributes
+    end
+
+    def level1_attributes
+      level0_attributes
+    end
+
+    def list_removed_attributes
+      [
+      ]
+    end
+  end
diff --git a/app/serializers/element_level_list_serializable.rb b/app/serializers/element_level_list_serializable.rb
new file mode 100644
index 000000000..00c01f401
--- /dev/null
+++ b/app/serializers/element_level_list_serializable.rb
@@ -0,0 +1,17 @@
+module ElementLevelListSerializable
+  extend ActiveSupport::Concern
+
+  included do
+    has_one :element_klass
+  end
+
+  class_methods do
+    def list_restricted_methods
+      DetailLevels::Element.new.list_removed_attributes.each do |attr|
+        define_method(attr) do
+          nil
+        end
+      end
+    end
+  end
+end
diff --git a/app/serializers/element_level_serializable.rb b/app/serializers/element_level_serializable.rb
new file mode 100644
index 000000000..fdac2aa58
--- /dev/null
+++ b/app/serializers/element_level_serializable.rb
@@ -0,0 +1,29 @@
+module ElementLevelSerializable
+  extend ActiveSupport::Concern
+
+  included do
+    attributes *DetailLevels::Element.new.base_attributes
+    def initialize(element, nested_detail_levels)
+      original_initialize(element)
+      @nested_dl = nested_detail_levels
+    end
+
+    def type
+      'element'
+    end
+
+    def is_restricted
+      true
+    end
+  end
+
+  class_methods do
+    def define_restricted_methods_for_level(level)
+      (DetailLevels::Element.new.base_attributes - DetailLevels::Element.new.public_send("level#{level}_attributes")).each do |attr|
+        define_method(attr) do
+          '***'
+        end
+      end
+    end
+  end
+end
diff --git a/app/serializers/element_list_serializer.rb b/app/serializers/element_list_serializer.rb
new file mode 100644
index 000000000..3272ec250
--- /dev/null
+++ b/app/serializers/element_list_serializer.rb
@@ -0,0 +1,12 @@
+class ElementListSerializer
+end
+
+class ElementListSerializer::Level10 < ElementSerializer::Level10
+  include ElementLevelListSerializable
+  list_restricted_methods
+end
+
+class ElementListSerializer::Level0 < ElementSerializer::Level0
+  include ElementLevelListSerializable
+  list_restricted_methods
+end
diff --git a/app/serializers/element_serializer.rb b/app/serializers/element_serializer.rb
new file mode 100644
index 000000000..44e08e8e2
--- /dev/null
+++ b/app/serializers/element_serializer.rb
@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+# Element Serializer
+class ElementSerializer < ActiveModel::Serializer
+  attributes *DetailLevels::Element.new.base_attributes
+
+  has_one :container, serializer: ContainerSerializer
+  has_one :element_klass
+  has_one :tag
+  has_many :segments
+
+  def created_at
+    object.created_at.strftime('%d.%m.%Y, %H:%M')
+  end
+
+  def updated_at
+    object.updated_at.strftime('%d.%m.%Y, %H:%M')
+  end
+
+  def el_type
+    object.element_klass.name
+  end
+
+  def set_table(field, field_table_objs, obj)
+    col_ids = field_table_objs.map { |x| x.values[0] }
+    col_ids.each do |col_id|
+      field['sub_values'].each do |sub_value|
+        next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+        find_obj = obj.constantize.find_by(id: sub_value[col_id]['value']['el_id'])
+        next unless find_obj.present?
+
+        case obj
+        when 'Molecule'
+          sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_obj.molecule_svg_file)
+          sub_value[col_id]['value']['el_inchikey'] = find_obj.inchikey
+          sub_value[col_id]['value']['el_smiles'] = find_obj.cano_smiles
+          sub_value[col_id]['value']['el_iupac'] = find_obj.iupac_name
+          sub_value[col_id]['value']['el_molecular_weight'] = find_obj.molecular_weight
+        when 'Sample'
+          sub_value[col_id]['value']['el_svg'] = find_obj.get_svg_path
+          sub_value[col_id]['value']['el_label'] = find_obj.short_label
+          sub_value[col_id]['value']['el_short_label'] = find_obj.short_label
+          sub_value[col_id]['value']['el_name'] = find_obj.name
+          sub_value[col_id]['value']['el_external_label'] = find_obj.external_label
+          sub_value[col_id]['value']['el_molecular_weight'] = find_obj.decoupled ? find_obj.molecular_mass : find_obj.molecule.molecular_weight
+        end
+      end
+    end
+    field
+  end
+
+  def properties
+    object.properties['layers']&.keys.each do |key|
+      # layer = object.properties[key]
+      field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
+      field_sample_molecules.each do |field|
+        idx = object.properties['layers'][key]['fields'].index(field)
+        sid = field.dig('value', 'el_id')
+        next unless sid.present?
+
+        el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
+        next unless el.present?
+        next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
+
+        object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
+        object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
+        object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
+      end
+
+      field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+      field_tables.each do |field|
+        idx = object.properties['layers'][key]['fields'].index(field)
+        next unless field['sub_values'].present? && field['sub_fields'].present?
+
+        field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+        object.properties['layers'][key]['fields'][idx] = set_table(field, field_table_molecules, 'Molecule') if field_table_molecules.present?
+
+        field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }
+        object.properties['layers'][key]['fields'][idx] = set_table(field, field_table_samples, 'Sample') if field_table_samples.present?
+      end
+    end
+    object.properties
+  end
+
+  def can_copy
+    true
+  end
+
+  def type
+    object.element_klass.name # 'genericEl' #object.type
+  end
+
+  def is_restricted
+    false
+  end
+
+  class Level0 < ActiveModel::Serializer
+    include ElementLevelSerializable
+    define_restricted_methods_for_level(0)
+  end
+end
+
+class ElementSerializer::Level10 < ElementSerializer
+  alias_method :original_initialize, :initialize
+  def initialize(element, nested_detail_levels)
+    original_initialize(element)
+    @nested_dl = nested_detail_levels
+  end
+end
diff --git a/config/compound_open_data.yml.example b/config/compound_open_data.yml.example
new file mode 100644
index 000000000..40fe4e345
--- /dev/null
+++ b/config/compound_open_data.yml.example
@@ -0,0 +1,5 @@
+development:
+  :allowed_uids: [123,456]
+
+production:
+  :allowed_uids: [123,456]
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index c08871443..eb92e1bf6 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -7,6 +7,8 @@
 
 # Add additional assets to the asset load path
 # Rails.application.config.assets.paths << Emoji.images_path
+# Add Yarn node_modules folder to the asset load path.
+# Rails.application.config.assets.paths << Rails.root.join('node_modules')
 
 # Add Yarn node_modules folder to the asset load path.
 # The env var NODE_MODULES_PATH is a hack only used by the Docker dev setup.
diff --git a/config/omniauth.yml.example b/config/omniauth.yml.example
new file mode 100644
index 000000000..93124a3e1
--- /dev/null
+++ b/config/omniauth.yml.example
@@ -0,0 +1,60 @@
+development:
+  :github:
+    :enable:
+    :client_id:
+    :client_secret:
+  :openid_connect:
+    :enable:
+    :client_id:
+    :client_secret:
+    :host:
+    :scheme:
+    :authorization_endpoint:
+    :token_endpoint:
+    :redirect_uri:
+    :issuer:
+  :orcid:
+    :enable:
+    :client_id:
+    :client_secret:
+    :member:
+    :sandbox:
+    :scope: '/read-limited'
+  :chemotion_orcid:
+    :enable:
+    :client_id:
+    :client_secret:
+    :member:
+    :sandbox:
+    :scope: '/read-limited'
+    :redirect_uri:
+production:
+  :github:
+    :enable:
+    :client_id:
+    :client_secret:
+  :openid_connect:
+    :enable:
+    :client_id:
+    :client_secret:
+    :host:
+    :scheme:
+    :authorization_endpoint:
+    :token_endpoint:
+    :redirect_uri:
+    :issuer:
+  :orcid:
+    :enable:
+    :client_id:
+    :client_secret:
+    :member:
+    :sandbox:
+    :scope: '/read-limited'
+  :chemotion_orcid:
+    :enable:
+    :client_id:
+    :client_secret:
+    :member:
+    :sandbox:
+    :scope: '/read-limited'
+    :redirect_uri:
diff --git a/config/profile_default.yml b/config/profile_default.yml
index 5a538c6c0..f00a142bd 100644
--- a/config/profile_default.yml
+++ b/config/profile_default.yml
@@ -87,7 +87,6 @@ production:
         3
       :references:
         4
-
     :layout_detail_wellplate:
       :properties:
         1
diff --git a/db/migrate/20210216132619_create_report_templates.rb b/db/migrate/20210216132619_create_report_templates.rb
index 5556b9748..40028dce0 100644
--- a/db/migrate/20210216132619_create_report_templates.rb
+++ b/db/migrate/20210216132619_create_report_templates.rb
@@ -8,8 +8,8 @@ def change
       t.references :attachment, index: true, foreign_key: true
     end
 
-    add_reference :reports, :report_templates, index: true 
-    change_column_null :report_templates, :name, false 
+    add_reference :reports, :report_templates, index: true
+    change_column_null :report_templates, :name, false
     change_column_null :report_templates, :report_type, false
   end
 end
diff --git a/db/migrate/20220712100000_add_segment_klass_identifier.rb b/db/migrate/20220712100000_add_segment_klass_identifier.rb
new file mode 100644
index 000000000..76b880ad5
--- /dev/null
+++ b/db/migrate/20220712100000_add_segment_klass_identifier.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# Add column identifier into segment_klasses
+class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
+  def self.up
+    execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
+    add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
+  end
+
+  def self.down
+    remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
+  end
+end
diff --git a/db/migrate/20220920000006_embargo_accepted_collection.rb b/db/migrate/20220920000006_embargo_accepted_collection.rb
new file mode 100644
index 000000000..f0cb33200
--- /dev/null
+++ b/db/migrate/20220920000006_embargo_accepted_collection.rb
@@ -0,0 +1,27 @@
+class EmbargoAcceptedCollection < ActiveRecord::Migration[5.2]
+  def change
+    chemotion_user = User.chemotion_user
+    reviewer_ids = User.reviewer_ids
+    embargo_accepted_collection = Collection.create(user_id: chemotion_user.id, label: 'Embargo Accepted', is_synchronized: true)
+
+    reviewer_ids.each do |uid|
+      SyncCollectionsUser.find_or_create_by(user_id: uid, shared_by_id: chemotion_user.id, collection_id: embargo_accepted_collection.id,
+        permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10)
+    end
+
+    list = Publication.where(state: ['accepted'], element_type: ['Sample', 'Reaction'])
+
+    list.each do |pub|
+      element = pub.element
+      case pub.element_type
+      when 'Sample'
+        CollectionsSample
+      when 'Reaction'
+        CollectionsReaction
+      end.insert_in_collection(
+        element.id,
+        [embargo_accepted_collection.id]
+      )
+    end
+  end
+end
diff --git a/db/seeds/development/devices.seed.rb b/db/seeds/development/devices.seed.rb
index e00966421..61c0e68ce 100644
--- a/db/seeds/development/devices.seed.rb
+++ b/db/seeds/development/devices.seed.rb
@@ -57,7 +57,6 @@ def touch_files
     # create dummy data file for Dv1 - file collection
 	  file = Pathname.new(DIR1).join("#{na}-#{Time.now.to_i}")
     FileUtils.touch(file)
-
     # create dummy folder with 1 file for Dv1 - folder collection
     dir = Pathname.new(DIR2).join("#{na}-#{Time.now.to_i}")
     file = dir.join('dummy')
diff --git a/db/seeds/shared/admin.seed.rb b/db/seeds/shared/admin.seed.rb
index 615564fef..04a42ac7a 100644
--- a/db/seeds/shared/admin.seed.rb
+++ b/db/seeds/shared/admin.seed.rb
@@ -7,7 +7,7 @@
   type: 'Admin'
 }
 
-user = User.find_by(type: 'Admin', name_abbreviation: 'ADM') || User.create!(attributes) 
+user = User.find_by(type: 'Admin', name_abbreviation: 'ADM') || User.create!(attributes)
 user.update!(account_active: true)
 user.update!(confirmed_at: DateTime.now)
 
diff --git a/lib/analyses/converter.rb b/lib/analyses/converter.rb
new file mode 100644
index 000000000..bcda1a419
--- /dev/null
+++ b/lib/analyses/converter.rb
@@ -0,0 +1,272 @@
+require 'net/http'
+require 'uri'
+require 'json'
+require 'date'
+
+module Analyses
+  class Converter
+    def self.logger
+      @@converter_logger ||= Logger.new(File.join(Rails.root, 'log', 'converter.log'))
+    end
+
+    def self.uri(api_name)
+      url = Rails.configuration.converter.url
+      "#{url}#{api_name}"
+    end
+
+    def self.timeout
+      Rails.configuration.try(:converter).try(:timeout) || 30
+    end
+
+    def self.extname
+      '.jdx'
+    end
+
+    def self.client_id
+      Rails.configuration.converter.profile || ''
+    end
+
+    def self.secret_key
+      Rails.configuration.converter.secret_key || ''
+    end
+
+    def self.auth
+      { username: client_id, password: secret_key }
+    end
+
+    def self.date_time
+      DateTime.now.strftime('%Q')
+    end
+
+    def self.signature(jbody)
+      md5 = Digest::MD5.new
+      md5.update jbody
+      mdhex = md5.hexdigest
+      mdall = mdhex << secret_key
+      @signature = Digest::SHA1.hexdigest mdall
+    end
+
+    def self.header(opt={})
+      opt || {}
+    end
+
+    def self.vor_conv(id)
+      conf = Rails.configuration.try(:converter).try(:url)
+      oa = Attachment.find(id)
+      folder = Rails.root.join('tmp', 'uploads', 'converter')
+      Dir.mkdir(folder) unless File.exist?(folder)
+      return nil if conf.nil? || oa.nil? || folder.nil?
+
+      {a: oa, f: folder }
+    end
+
+    def self.collect_metadata(zip_file)
+      dsr = []
+      ols = nil
+      zip_file.each do |entry|
+        next unless entry.name == 'metadata/converter.json'
+
+        metadata = entry.get_input_stream.read.force_encoding('UTF-8')
+        jdata = JSON.parse(metadata)
+
+        ols = jdata['ols']
+        matches = jdata['matches']
+        matches&.each do |match|
+          idf = match['identifier']
+          idr = match['result']
+          dsr.push(layer: idf['outputLayer'], field: idf['outputKey'], value: idr['value']) if idf&.class == Hash && idr&.class == Hash && !idf['outputLayer'].nil? && !idf['outputKey'].nil? && !idr['value'].nil?
+        end
+      end
+      { d: dsr, o: ols }
+    end
+
+    def self.handle_response(oat, response)
+      dsr = []
+      ols = nil
+      begin
+        tmp_file = Tempfile.new(encoding: 'ascii-8bit')
+        tmp_file.write(response.parsed_response)
+        tmp_file.rewind
+        name = response&.headers['content-disposition']&.split('=')&.last
+        att = Attachment.new(
+          filename: name,
+          file_path: tmp_file.path,
+          attachable_id: oat.attachable_id,
+          attachable_type: 'Container',
+          created_by: oat.created_by,
+          created_for: oat.created_for
+        )
+        att.save!
+        primary_store = Rails.configuration.storage.primary_store
+        att.update!(storage: primary_store)
+
+        Zip::File.open(tmp_file.path) do |zip_file|
+          res = Analyses::Converter.collect_metadata(zip_file) if name.split('.')&.last == 'zip'
+          ols = res[:o] unless res&.dig(:o).nil?
+          dsr.push(res[:d]) unless res&.dig(:d).nil?
+        end
+        dsr.flatten!
+        Analyses::Converter.ts('write', att.attachable_id, ols: ols, info: dsr) if dsr.length.positive? && name.split('.')&.last == 'zip'
+      rescue StandardError => e
+        raise e
+      ensure
+        tmp_file&.close
+      end
+    end
+
+    def self.process(data)
+      response = nil
+      begin
+        ofile = Rails.root.join(data[:f], data[:a].filename)
+        FileUtils.cp(data[:a].store.path, ofile)
+        File.open(ofile, 'r') do |f|
+          body = { file: f }
+
+          response = HTTParty.post(
+            uri('conversions'),
+            basic_auth: auth,
+            body: body,
+            timeout: timeout
+          )
+        end
+
+        if response.ok?
+          Analyses::Converter.handle_response(data[:a], response)
+        else
+          Analyses::Converter.logger.error ["Converter Response Error: id: [#{data[:a]&.id}], filename: [#{data[:a]&.filename}], response: #{response}"].join($INPUT_RECORD_SEPARATOR)
+        end
+        response
+      rescue StandardError => e
+        raise e
+      ensure
+        FileUtils.rm_f(ofile)
+      end
+    end
+
+    def self.jcamp_converter(id)
+      resp = nil
+      begin
+        data = Analyses::Converter.vor_conv(id)
+        return if data.nil?
+
+        resp = Analyses::Converter.process(data)
+
+        resp&.success? ? 'done' : 'failure'
+      rescue StandardError => e
+        Analyses::Converter.logger.error ["jcamp_converter fail: #{id}", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
+      ensure
+        resp&.success? ? 'done' : 'failure'
+      end
+    end
+
+    def self.generate_ds(att_id)
+      dsr_info = Analyses::Converter.fetch_dsr(att_id)
+      begin
+        return unless dsr_info && dsr_info[:info]&.length.positive?
+
+        dataset = Analyses::Converter.build_ds(att_id, dsr_info[:ols])
+        Analyses::Converter.update_ds(dataset, dsr_info[:info])
+      rescue StandardError => e
+        Analyses::Converter.logger.error ["Att ID: #{att_id}, OLS: #{dsr_info[:ols]}", "DSR: #{dsr_info[:info]}", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
+      ensure
+        Analyses::Converter.clean_dsr(att_id)
+      end
+    end
+
+    def self.build_ds(att_id, ols)
+      cds = Container.find_by(id: att_id)
+      dataset = Dataset.find_by(element_type: 'Container', element_id: cds.id)
+      return dataset unless dataset.nil?
+
+      klass = DatasetKlass.find_by(ols_term_id: ols)
+      return if klass.nil?
+
+      uuid = SecureRandom.uuid
+      props = klass.properties_release
+      props['uuid'] = uuid
+      props['eln'] = Chemotion::Application.config.version
+      props['klass'] = 'Dataset'
+      Dataset.create!(
+        uuid: uuid,
+        dataset_klass_id: klass.id,
+        element_type: 'Container',
+        element_id: cds.id,
+        properties: props,
+        properties_release: klass.properties_release,
+        klass_uuid: klass.uuid
+      )
+    end
+
+    def self.update_ds(dataset, dsr)
+      layers = dataset.properties['layers'] || {}
+      new_prop = dataset.properties
+      dsr.each do |ds|
+        layer = layers[ds[:layer]]
+        fields = layer['fields'].select{ |f| f['field'] == ds[:field] }
+        fi = fields&.first
+        idx = layer['fields'].find_index(fi)
+        fi['value'] = ds[:value]
+        new_prop['layers'][ds[:layer]]['fields'][idx] = fi
+      end
+      dataset.properties = new_prop
+      dataset.save!
+    end
+
+    def self.ts(method, identifier, params = nil)
+      Rails.cache.send(method, "#{Analyses::Converter.new.class.name}#{identifier}", params)
+    end
+
+    def self.fetch_dsr(att_id)
+      Analyses::Converter.ts('read', att_id)
+    end
+
+    def self.clean_dsr(att_id)
+      Analyses::Converter.ts('delete', att_id)
+    end
+
+    def self.fetch_options
+      options = { basic_auth: auth, timeout: timeout }
+      response = HTTParty.get(uri('options'), options)
+      response.parsed_response if response.code == 200
+    end
+
+    def self.delete_profile(id)
+      options = { basic_auth: auth, timeout: timeout }
+      response = HTTParty.delete(uri('profiles') + '/' + id, options)
+      response.parsed_response if response.code == 200
+    end
+
+    def self.create_profile(data)
+      options = { basic_auth: auth, timeout: timeout, body: data.to_json, headers: { 'Content-Type' => 'application/json' } }
+      response = HTTParty.post(uri('profiles'), options)
+      response.parsed_response if response.code == 201
+    end
+
+    def self.update_profile(data)
+      options = { basic_auth: auth, timeout: timeout, body: data.to_json, headers: { 'Content-Type' => 'application/json' } }
+      response = HTTParty.put(uri('profiles') + '/' + data[:id], options)
+      response.parsed_response if response.code == 200
+    end
+
+    def self.fetch_profiles
+      options = { basic_auth: auth, timeout: timeout }
+      response = HTTParty.get(uri('profiles'), options)
+      response.parsed_response if response.code == 200
+    end
+
+    def self.create_tables(tmpfile)
+      res = {}
+      File.open(tmpfile.path, 'r') do |file|
+        body = { file: file }
+        response = HTTParty.post(
+          uri('tables'),
+          basic_auth: auth,
+          body: body,
+          timeout: timeout
+        )
+        res = response.parsed_response
+      end
+      res
+    end
+  end
+end
diff --git a/lib/export/export_excel.rb b/lib/export/export_excel.rb
index e766e88e7..bf5fda771 100644
--- a/lib/export/export_excel.rb
+++ b/lib/export/export_excel.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'export_table'
 
 module Export
@@ -112,7 +114,6 @@ def literatures_info(ids)
       output = output.join("\n")
       output
     end
-
     def filter_with_permission_and_detail_level(sample)
       # return all data if sample/chemical in own collection
       if sample['shared_sync'] == 'f' || sample['shared_sync'] == false
diff --git a/lib/import/import_sdf.rb b/lib/import/import_sdf.rb
index 214198a47..78e54a21c 100644
--- a/lib/import/import_sdf.rb
+++ b/lib/import/import_sdf.rb
@@ -82,6 +82,10 @@ def error_messages
     @message[:error_messages]
   end
 
+  def error_messages
+    @message[:error_messages]
+  end
+
   def status
     @message[:error].empty? && 'ok' || 'error'
   end
diff --git a/lib/reporter/docx/detail_sample.rb b/lib/reporter/docx/detail_sample.rb
index e697730f8..df3d2b52c 100644
--- a/lib/reporter/docx/detail_sample.rb
+++ b/lib/reporter/docx/detail_sample.rb
@@ -60,6 +60,20 @@ def literatures
         output
       end
 
+      def literatures
+        output = []
+        liters = obj.literatures
+        return [] if liters.empty?
+
+        liters.each do |l|
+          bib = l[:refs] && l[:refs]['bibtex']
+          bb = DataCite::LiteraturePaser.parse_bibtex!(bib, id)
+          bb = DataCite::LiteraturePaser.get_metadata(bb, l[:doi], id) unless bb.class == BibTeX::Entry
+          output.push(DataCite::LiteraturePaser.report_hash(l, bb)) if bb.class == BibTeX::Entry
+        end
+        output
+      end
+      
       def init_item
         item = []
         need_rxn_desc = @spl_settings[:reaction_description]
diff --git a/package_postinstall.sh b/package_postinstall.sh
index fd525085e..92bc65126 100755
--- a/package_postinstall.sh
+++ b/package_postinstall.sh
@@ -1,5 +1,4 @@
 #!/usr/bin/env bash
-
 ## package.json postinstall script
 
 set -euo pipefail
diff --git a/public/welcome-message-sample.md b/public/welcome-message-sample.md
index 4ef9c48f4..770234f1f 100644
--- a/public/welcome-message-sample.md
+++ b/public/welcome-message-sample.md
@@ -8,6 +8,10 @@
 ##### Chemotion-ELN is an electronic lab notebook that allows you to document your research. To help you get started with the ELN, we have summarised important links and information here.
 
 * Subscribe to our [Mailing List](#link goes here) to receive all updates on the Chemotion-ELN instance.
+<<<<<<< HEAD
 * Visit our documentation and user manual [Chemotion Docs](https://chemotion.net/docs) to inform yourself about ELN functions and features.
+=======
+* Visit our documentation and user manual [Chemotionsaurus](https://eln.chemotion.net/chemotionsaurus/docs/eln/videos_eln) to inform yourself about ELN functions and features.
+>>>>>>> Repo update (#45)
 * If you face any issue with the ELN or have any queries, please contact our [Helpdesk](https://helpdesk.nfdi4chem.de/).
 * You can report bugs or raise wishes for new features by adding a new issue to our [Github Repository](https://github.com/ComPlat/chemotion_ELN).
diff --git a/spec/api/collection_api_spec.rb b/spec/api/collection_api_spec.rb
index da480131f..e6c58f380 100644
--- a/spec/api/collection_api_spec.rb
+++ b/spec/api/collection_api_spec.rb
@@ -761,6 +761,7 @@
 
         it 'responds with 401 status code' do
           status = post '/api/v1/collections/imports', params: file_upload
+<<<<<<< HEAD
           expect(response.status).to eq(401)
         end
       end
@@ -801,6 +802,8 @@
 
         it 'with a valid collection id, but without existing metadata' do
           post '/api/v1/collections/%s/metadata' % c1.id, params: post_params
+=======
+>>>>>>> Repo update (#45)
           expect(response.status).to eq(401)
         end
       end
diff --git a/spec/api/delayed_job_api_spec.rb b/spec/api/delayed_job_api_spec.rb
new file mode 100644
index 000000000..000b4aaf1
--- /dev/null
+++ b/spec/api/delayed_job_api_spec.rb
@@ -0,0 +1,42 @@
+require 'rails_helper'
+
+describe Chemotion::AdminAPI do
+  context 'with authorized admin user logged in' do
+    let!(:admin1) { create(:admin) }
+
+    before do
+      allow_any_instance_of(WardenAuthentication).to receive(:current_user).and_return(admin1)
+    end
+
+    describe 'DelayedJob' do
+      before(:all) do
+        jobObj = RefreshElementTagJob.new
+        jobObj.perform
+        Delayed::Job.enqueue jobObj
+      end
+
+      it 'list queued jobs' do
+        get '/api/v1/admin/jobs'
+        json_response = JSON.parse(response.body)
+        expect(json_response).not_to be_empty
+        expect(response.status).to eq 200
+      end
+
+      # in test Delayed Jobs will not automatically recover from errors -> rescue
+      xit 'let job fail' do
+        jobObjFail = TestFailureJob.new
+        jobObjFail.perform
+      rescue RuntimeError => e
+        Delayed::Job.enqueue jobObjFail
+        success, failure = Delayed::Worker.new.work_off
+        expect([success, failure]).to eq [2, 2]
+      end
+
+      it 'restart (failed) job' do
+        put '/api/v1/admin/jobs/restart', params: { id: Delayed::Job.select(:id).where(queue: 'test') }
+      rescue RuntimeError => e
+        expect(response.status).to eq 200
+      end
+    end
+  end
+end
diff --git a/spec/api/inbox_api_spec.rb b/spec/api/inbox_api_spec.rb
index a9c202371..e162e5706 100644
--- a/spec/api/inbox_api_spec.rb
+++ b/spec/api/inbox_api_spec.rb
@@ -27,7 +27,11 @@
 
         before { get "/api/v1/inbox/samples?search_string=#{search_string}" }
 
+<<<<<<< HEAD
         it 'return fitting samples' do
+=======
+        it 'return fitting samples' do 
+>>>>>>> Repo update (#45)
           expect(JSON.parse(response.body)['samples'].size).to eq(2)
         end
       end
@@ -46,12 +50,17 @@
           before { post "/api/v1/inbox/samples/#{sample_2.id}", params: params, as: :json }
 
           it 'return moved samples' do
+<<<<<<< HEAD
+=======
+            puts response.body
+>>>>>>> Repo update (#45)
             expect(JSON.parse(response.body)['container']['container_type']).to eq('dataset')
             expect(JSON.parse(response.body)['container']['attachments'].count).to eq(1)
           end
         end
       end
     end
+<<<<<<< HEAD
 
     describe 'GET /api/v1/inbox' do
       context 'when fetching the inbox' do
@@ -97,5 +106,7 @@
         end
       end
     end
+=======
+>>>>>>> Repo update (#45)
   end
 end
diff --git a/spec/api/literature_api_spec.rb b/spec/api/literature_api_spec.rb
index bc9336374..44976dcd4 100644
--- a/spec/api/literature_api_spec.rb
+++ b/spec/api/literature_api_spec.rb
@@ -52,9 +52,17 @@
     end
   end
 
+<<<<<<< HEAD
   describe 'POST /api/v1/literatures' do
     context 'with valid parameters' do
       before { post '/api/v1/literatures', params: params }
+=======
+    describe 'GET /api/v1/literatures' do
+      context 'with valid parameters' do
+        before do
+          get '/api/v1/literatures', params: { element_id: r1.id, element_type: 'reaction' }
+        end
+>>>>>>> Repo update (#45)
 
       it 'responds 201' do
         expect(response).to have_http_status :created
@@ -71,6 +79,7 @@
     end
   end
 
+<<<<<<< HEAD
   describe 'DELETE /api/v1/literatures' do
     let!(:element_id) { -1 }
     let(:params) do
@@ -80,6 +89,11 @@
         id: literal.id,
       }
     end
+=======
+    describe 'POST /api/v1/literatures' do
+      context 'with valid parameters' do
+        before { post '/api/v1/literatures', params: params }
+>>>>>>> Repo update (#45)
 
     context 'with valid parameter' do
       let!(:literal)    { create(:literal, literature: l1, element: r1, user: user) }
diff --git a/spec/api/private_note_api.spec.rb b/spec/api/private_note_api.spec.rb
index 1e9a62f23..4bcda516f 100644
--- a/spec/api/private_note_api.spec.rb
+++ b/spec/api/private_note_api.spec.rb
@@ -2,6 +2,7 @@
 
 require 'rails_helper'
 
+<<<<<<< HEAD
 RSpec.shared_examples 'an unauthorized response' do
   it 'returns 401 status code' do
     expect(response).to have_http_status(:unauthorized)
@@ -20,11 +21,26 @@
   let!(:research_plan) { create(:research_plan, collections: [unauthorized_user_collection]) }
 
   context 'unauthorized user, ' do
+=======
+describe Chemotion::PrivateNoteAPI do
+  let!(:unauthorized_user) { create(:person) }
+  let!(:author_user) { create(:person) }
+  let!(:c) { create(:collection, user: unauthorized_user, is_shared: false) }
+  let!(:c2) { create(:collection, user: author_user, is_shared: false) }
+  let!(:r) { create(:reaction, collections: [c]) }
+  let!(:s) { create(:sample, collections: [c]) }
+  let!(:sc) { create(:screen, collections: [c]) }
+  let!(:w) { create(:wellplate, collections: [c]) }
+  let!(:rp) { create(:research_plan, collections: [c]) }
+
+  context "unauthorized user, " do
+>>>>>>> Repo update (#45)
     before do
       allow_any_instance_of(WardenAuthentication).to receive(:current_user).and_return(unauthorized_user)
     end
 
     describe 'GET /api/v1/private_notes/:id' do
+<<<<<<< HEAD
       let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
 
       before do
@@ -32,18 +48,37 @@
       end
 
       it_behaves_like 'an unauthorized response'
+=======
+      let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+
+      before do
+        get "/api/v1/private_notes/#{note_1.id}"
+      end
+
+      it 'returns 401 status code' do
+        expect(response.status).to eq 401
+      end
+>>>>>>> Repo update (#45)
     end
 
     describe 'PUT /api/v1/private_notes/:id' do
       context 'update with only content' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'test note',
+=======
+        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -57,10 +92,28 @@
             content: 'test note',
             noteable_id: sample.id,
             noteable_type: 'Sample',
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+
+      context 'with sample' do
+        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note',
+            noteable_id: s.id,
+            noteable_type: 'Sample'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -74,10 +127,28 @@
             content: 'test note reaction',
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+
+      context 'with reaction' do
+        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note q',
+            noteable_id: r.id,
+            noteable_type: 'Reaction'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -91,10 +162,28 @@
             content: 'test note screen',
             noteable_id: screen.id,
             noteable_type: 'Screen',
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+
+      context 'with screen' do
+        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note screen',
+            noteable_id: sc.id,
+            noteable_type: 'Screen'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -108,10 +197,28 @@
             content: 'test note wellplate',
             noteable_id: wellplate.id,
             noteable_type: 'Wellplate',
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+  
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+
+      context 'with wellplate' do
+        let(:note_1) { create(:private_note, noteable: sc, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note wellplate',
+            noteable_id: w.id,
+            noteable_type: 'Wellplate'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -125,10 +232,28 @@
             content: 'test note research plan',
             noteable_id: research_plan.id,
             noteable_type: 'ResearchPlan',
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+    
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+
+      context 'with research plan' do
+        let(:note_1) { create(:private_note, noteable: w, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'test note research plan',
+            noteable_id: rp.id,
+            noteable_type: 'ResearchPlan'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -144,6 +269,27 @@
       end
 
       it_behaves_like 'an unauthorized response'
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+      
+        it 'returns 401 status code' do
+          expect(response.status).to eq 401
+        end
+      end
+    end
+    
+    describe 'DELETE /api/v1/private_notes/:id' do
+      let(:note_1) { create(:private_note, content: 'test', noteable: r, user_id: author_user.id) }
+
+      before do
+        delete "/api/v1/private_notes/#{note_1.id}"
+      end
+
+      it 'returns 401 status code' do
+        expect(response.status).to eq 401
+      end
+>>>>>>> Repo update (#45)
     end
   end
 
@@ -153,10 +299,17 @@
     end
 
     describe 'GET /api/v1/private_notes/:id' do
+<<<<<<< HEAD
       let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
 
       before do
         get "/api/v1/private_notes/#{note1.id}"
+=======
+      let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+
+      before do
+        get "/api/v1/private_notes/#{note_1.id}"
+>>>>>>> Repo update (#45)
       end
 
       it 'api run success' do
@@ -165,6 +318,7 @@
 
       it 'returned data' do
         n = JSON.parse(response.body)['note'].symbolize_keys
+<<<<<<< HEAD
         expect(n[:id]).to eq(note1.id)
       end
     end
@@ -175,6 +329,18 @@
 
         before do
           post '/api/v1/private_notes', params: params
+=======
+        expect(n[:id]).to eq(note_1.id)
+      end
+    end
+
+    describe 'POST /api/v1/private_notes/create' do
+      context 'with content' do
+        let(:params) { { content: 'test note', noteable_id: r.id, noteable_type: 'Reaction' } }
+
+        before do
+          post "/api/v1/private_notes/create", params: params
+>>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note (on unaccessible element)' do
@@ -187,13 +353,22 @@
         let(:params) do
           {
             content: 'test note sample',
+<<<<<<< HEAD
             noteable_id: sample.id,
             noteable_type: 'Sample',
+=======
+            noteable_id: s.id,
+            noteable_type: 'Sample'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
+=======
+          post "/api/v1/private_notes/create", params: params
+>>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -204,7 +379,11 @@
         it 'is valid in sample' do
           note = PrivateNote.find_by(content: 'test note sample')
           s1 = Sample.find_by(id: note.noteable_id)
+<<<<<<< HEAD
           expect(s1.id).to eq(sample.id)
+=======
+          expect(s1.id).to eq(s.id)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -212,13 +391,22 @@
         let(:params) do
           {
             content: 'test note reaction',
+<<<<<<< HEAD
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
+=======
+            noteable_id: r.id,
+            noteable_type: 'Reaction'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
+=======
+          post "/api/v1/private_notes/create", params: params
+>>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -229,7 +417,11 @@
         it 'is valid in reaction' do
           note = PrivateNote.find_by(content: 'test note reaction')
           r1 = Reaction.find(note.noteable_id)
+<<<<<<< HEAD
           expect(r1.id).to eq(reaction.id)
+=======
+          expect(r1.id).to eq(r.id)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -237,13 +429,22 @@
         let(:params) do
           {
             content: 'test note screen',
+<<<<<<< HEAD
             noteable_id: screen.id,
             noteable_type: 'Screen',
+=======
+            noteable_id: sc.id,
+            noteable_type: 'Screen'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
+=======
+          post "/api/v1/private_notes/create", params: params
+>>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -254,7 +455,11 @@
         it 'is valid in screen' do
           note = PrivateNote.find_by(content: 'test note screen')
           sc1 = Screen.find(note.noteable_id)
+<<<<<<< HEAD
           expect(sc1.id).to eq(screen.id)
+=======
+          expect(sc1.id).to eq(sc.id)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -262,13 +467,22 @@
         let(:params) do
           {
             content: 'test note wellplate',
+<<<<<<< HEAD
             noteable_id: wellplate.id,
             noteable_type: 'Wellplate',
+=======
+            noteable_id: w.id,
+            noteable_type: 'Wellplate'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
+=======
+          post "/api/v1/private_notes/create", params: params
+>>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -279,7 +493,11 @@
         it 'is valid in wellplate' do
           note = PrivateNote.find_by(content: 'test note wellplate')
           w1 = Wellplate.find(note.noteable_id)
+<<<<<<< HEAD
           expect(w1.id).to eq(wellplate.id)
+=======
+          expect(w1.id).to eq(w.id)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -287,15 +505,26 @@
         let(:params) do
           {
             content: 'test note research plan',
+<<<<<<< HEAD
             noteable_id: research_plan.id,
             noteable_type: 'ResearchPlan',
+=======
+            noteable_id: rp.id,
+            noteable_type: 'ResearchPlan'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
         end
 
+=======
+          post "/api/v1/private_notes/create", params: params
+        end
+  
+>>>>>>> Repo update (#45)
         it 'is able to create a new note' do
           note = PrivateNote.find_by(content: 'test note research plan')
           expect(note).not_to be_nil
@@ -304,41 +533,71 @@
         it 'is valid in research plan' do
           note = PrivateNote.find_by(content: 'test note research plan')
           rp1 = ResearchPlan.find(note.noteable_id)
+<<<<<<< HEAD
           expect(rp1.id).to eq(research_plan.id)
+=======
+          expect(rp1.id).to eq(rp.id)
+>>>>>>> Repo update (#45)
         end
       end
     end
 
     describe 'PUT /api/v1/private_notes/:id' do
       context 'with only content' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note',
+=======
+        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
         it "is able to update note's content" do
           note = PrivateNote.find(note1.id)
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+>>>>>>> Repo update (#45)
           expect(note.content).to eq('update test note')
         end
       end
 
       context 'with sample' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note sample',
             noteable_id: sample.id,
             noteable_type: 'Sample',
+=======
+        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note sample',
+            # noteable: s
+            noteable_id: s.id,
+            noteable_type: 'Sample'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -346,20 +605,38 @@
           note = PrivateNote.find(note1.id)
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note sample', sample.id, 'Sample'])
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note sample', s.id, 'Sample'])
+>>>>>>> Repo update (#45)
         end
       end
 
       context 'with reaction' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: sample, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note reaction',
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
+=======
+        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note reaction',
+            noteable_id: r.id,
+            noteable_type: 'Reaction'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -368,20 +645,39 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note reaction', reaction.id, 'Reaction'])
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+          puts "note:: #{note}"
+          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note reaction', r.id, 'Reaction'])
+>>>>>>> Repo update (#45)
         end
       end
 
       context 'with screen' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: sample, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note screen',
             noteable_id: screen.id,
             noteable_type: 'Screen',
+=======
+        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note screen',
+            noteable_id: sc.id,
+            noteable_type: 'Screen'
+>>>>>>> Repo update (#45)
           }
         end
 
         before do
+<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -390,10 +686,20 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note screen', screen.id, 'Screen'])
+=======
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+          puts "note:: #{note}"
+          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note screen', sc.id, 'Screen'])
+>>>>>>> Repo update (#45)
         end
       end
 
       context 'with wellplate' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: screen, user_id: author_user.id) }
         let(:params) do
           {
@@ -412,10 +718,30 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note wellplate', wellplate.id, 'Wellplate'])
+=======
+        let(:note_1) { create(:private_note, noteable: sc, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note wellplate',
+            noteable_id: w.id,
+            noteable_type: 'Wellplate'
+          }
+        end
+  
+        before do
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+  
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+          puts "note:: #{note}"
+          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note wellplate', w.id, 'Wellplate'])
+>>>>>>> Repo update (#45)
         end
       end
 
       context 'with research plan' do
+<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: wellplate, user_id: author_user.id) }
         let(:params) do
           {
@@ -434,11 +760,31 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note research plan', research_plan.id, 'ResearchPlan'])
+=======
+        let(:note_1) { create(:private_note, noteable: w, user_id: author_user.id) }
+        let(:params) do
+          {
+            content: 'update test note research plan',
+            noteable_id: rp.id,
+            noteable_type: 'ResearchPlan'
+          }
+        end
+  
+        before do
+          put "/api/v1/private_notes/#{note_1.id}", params: params
+        end
+  
+        it "is able to update note's content" do
+          note = PrivateNote.find(note_1.id)
+          puts "note:: #{note}"
+          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note research plan', rp.id, 'ResearchPlan'])
+>>>>>>> Repo update (#45)
         end
       end
     end
 
     describe 'DELETE /api/v1/private_notes/:id' do
+<<<<<<< HEAD
       let(:note1) do
         create(:private_note, content: 'test', noteable: reaction, user_id: author_user.id)
       end
@@ -448,6 +794,17 @@
       end
 
       it 'is able to delete private note' do
+=======
+      let(:note_1) do
+        create(:private_note, content: 'test', noteable: r, user_id: author_user.id)
+      end
+
+      before do
+        delete "/api/v1/private_notes/#{note_1.id}"
+      end
+
+      it "is able to delete private note" do
+>>>>>>> Repo update (#45)
         note = PrivateNote.find_by(content: 'test')
         expect(note).to be_nil
       end
diff --git a/spec/api/report_api_spec.rb b/spec/api/report_api_spec.rb
index c82c00732..fe06a1999 100644
--- a/spec/api/report_api_spec.rb
+++ b/spec/api/report_api_spec.rb
@@ -48,7 +48,10 @@
     describe 'GET /api/v1/reports/docx' do
       before do
         params = { id: r1.id.to_s }
+<<<<<<< HEAD
 
+=======
+>>>>>>> Repo update (#45)
         get '/api/v1/reports/docx', params: params
       end
 
@@ -75,7 +78,10 @@
           checkedAll: false
         }
       end
+<<<<<<< HEAD
 
+=======
+>>>>>>> Repo update (#45)
       let(:params) do
         {
           exportType: 2,
@@ -94,9 +100,13 @@
             analyses: [],
             molecule: %w[cano_smiles],
             reaction: %w[name short_label],
+<<<<<<< HEAD
             sample: %w[name external_label real_amount_value real_amount_unit created_at],
             sample_analyses: [],
             wellplate: []
+=======
+            sample: %w[name external_label real_amount_value real_amount_unit created_at]
+>>>>>>> Repo update (#45)
           }
         }
       end
@@ -114,19 +124,30 @@
           post(
             '/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
+<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
+=======
+            headers: { 'CONTENT_TYPE' => 'application/json' }
+>>>>>>> Repo update (#45)
           )
         end
 
         it 'returns correct sdf' do
+<<<<<<< HEAD
 
+=======
+>>>>>>> Repo update (#45)
           expect(response['Content-Type']).to eq('chemical/x-mdl-sdfile')
           expect(response['Content-Disposition']).to include('.sdf')
           msdf = IO.read(Rails.root.join('spec', 'fixtures', 'mof_v2000_1.sdf'))
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
+<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
+=======
+          expect(sdf).to eq(msdf)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -136,7 +157,11 @@
           post(
             '/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
+<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
+=======
+            headers: { 'CONTENT_TYPE' => 'application/json' }
+>>>>>>> Repo update (#45)
           )
         end
 
@@ -147,7 +172,11 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
+<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
+=======
+          expect(sdf).to eq(msdf)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -156,7 +185,11 @@
           params[:uiState][:sample][:checkedIds] = [sample_3.id]
           post('/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
+<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
+=======
+            headers: { 'CONTENT_TYPE' => 'application/json' }
+>>>>>>> Repo update (#45)
           )
         end
 
@@ -167,7 +200,11 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
+<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
+=======
+          expect(sdf).to eq(msdf)
+>>>>>>> Repo update (#45)
         end
       end
 
@@ -176,7 +213,11 @@
           params[:uiState][:sample][:checkedIds] = [sample_4.id]
           post('/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
+<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
+=======
+            headers: { 'CONTENT_TYPE' => 'application/json' }
+>>>>>>> Repo update (#45)
           )
         end
 
@@ -187,7 +228,11 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
+<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
+=======
+          expect(sdf).to eq(msdf)
+>>>>>>> Repo update (#45)
         end
       end
     end
@@ -236,10 +281,17 @@
         }
         post(
            '/api/v1/reports/export_samples_from_selections',
+<<<<<<< HEAD
            params: params, as: :json,
            headers: {
              'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
              'CONTENT-TYPE' => 'application/json'
+=======
+           params: params.to_json, 
+           headers: {
+             'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+             'CONTENT_TYPE' => 'application/json'
+>>>>>>> Repo update (#45)
            }
         )
       end
@@ -346,7 +398,11 @@
           params: params.to_json,
           headers: {
             'HTTP_ACCEPT' => 'text/plain, text/csv',
+<<<<<<< HEAD
             'CONTENT-TYPE' => 'application/json'
+=======
+            'CONTENT_TYPE' => 'application/json'
+>>>>>>> Repo update (#45)
           }
         )
         expect(response['Content-Type']).to eq('text/csv')
@@ -489,6 +545,7 @@
           ],
           imgFormat: 'png',
           fileName: fileName,
+<<<<<<< HEAD
           molSerials: [
             { mol: { id: 1, svgPath: "1a.svg", sumFormula: "C6H6", iupacName: "benzene" }, value: "1a" }
           ],
@@ -514,20 +571,57 @@
               kind: "GCMS"
             }
           ],
+=======
+          molSerials: "[{\"mol\":{\"id\":1, \"svgPath\":\"1a.svg\", \
+            \"sumFormula\":\"C6H6\", \"iupacName\":\"benzene\"}, \
+            \"value\":\"1a\"}]",
+          prdAtts: "{\"atts\": \
+                      [ \
+                        { \
+                          \"id\":2, \
+                          \"attachable_id\":121, \
+                          \"attachable_type\":\"Report\", \
+                          \"filename\":\"kit_logo.png\", \
+                          \"identifier\":\"123\", \
+                          \"checksum\":\"456\", \
+                          \"storage\":\"local\", \
+                          \"created_by\":1, \
+                          \"created_for\":1, \
+                          \"version\":0, \
+                          \"created_at\":\"2018-01-03T15:24:19.751Z\", \
+                          \"updated_at\":\"2018-01-03T15:24:28.686Z\", \
+                          \"content_type\":\"image/png\", \
+                          \"bucket\":\"1\", \
+                          \"key\":\"987\", \
+                          \"thumb\":true, \
+                          \"folder\":\"\", \
+                          \"kind\":\"GCMS\" \
+                        } \
+                      ] \
+                    }",
+>>>>>>> Repo update (#45)
           templateId: 1
         }
       end
 
       it 'returns a created -standard- report' do
         params[:template] = 'standard'
+<<<<<<< HEAD
         post '/api/v1/reports', params: params, as: :json
+=======
+        post '/api/v1/reports', params: params
+>>>>>>> Repo update (#45)
 
         expect(response.body).to include(fileName)
       end
 
       it 'returns a created -supporting_information- report' do
         params[:template] = 'supporting_information'
+<<<<<<< HEAD
         post '/api/v1/reports', params: params, as: :json
+=======
+        post '/api/v1/reports', params: params
+>>>>>>> Repo update (#45)
         expect(response.body).to include(fileName)
       end
     end
diff --git a/spec/api/report_template_api_spec.rb b/spec/api/report_template_api_spec.rb
index 558cebb93..ec21ae607 100644
--- a/spec/api/report_template_api_spec.rb
+++ b/spec/api/report_template_api_spec.rb
@@ -10,7 +10,11 @@
 
     before do
       allow_any_instance_of(WardenAuthentication).to(
+<<<<<<< HEAD
         receive(:current_user).and_return(user),
+=======
+        receive(:current_user).and_return(user)
+>>>>>>> Repo update (#45)
       )
     end
 
@@ -21,15 +25,25 @@
 
       it 'returns a list report template' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['templates'].count,
+=======
+          JSON.parse(response.body)['templates'].count
+>>>>>>> Repo update (#45)
         ).to eq 2
 
         expect(
           JSON.parse(response.body)['templates'].collect do |e|
             [e['id'], e['name']]
+<<<<<<< HEAD
           end,
         ).to match_array(
           ReportTemplate.pluck(:id, :name),
+=======
+          end
+        ).to match_array(
+          ReportTemplate.pluck(:id, :name)
+>>>>>>> Repo update (#45)
         )
       end
     end
@@ -39,21 +53,35 @@
         params = {
           name: 'Report template',
           report_type: 'Report template type',
+<<<<<<< HEAD
           file: :template_upload,
+=======
+          file: :template_upload
+>>>>>>> Repo update (#45)
         }
         post(
           '/api/v1/report_templates',
           params: params.to_json,
           headers: {
+<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['error'],
+=======
+          JSON.parse(response.body)['error']
+>>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -62,12 +90,23 @@
       before do
         delete(
           "/api/v1/report_templates/#{report_template1.id}",
+<<<<<<< HEAD
+=======
+          headers: {
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['error'],
+=======
+          JSON.parse(response.body)['error']
+>>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -77,15 +116,25 @@
         get(
           "/api/v1/report_templates/#{report_template1.id}",
           headers: {
+<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['error'],
+=======
+          JSON.parse(response.body)['error']
+>>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -100,27 +149,46 @@
           "/api/v1/report_templates/#{report_template1.id}",
           params: params.to_json,
           headers: {
+<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['error'],
+=======
+          JSON.parse(response.body)['error']
+>>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
   end
 
   context 'with Admin user logged in' do
+<<<<<<< HEAD
     let(:admin) { create(:admin) }
     let!(:report_template1) { create(:report_template) }
 
     before do
       allow_any_instance_of(WardenAuthentication).to(
         receive(:current_user).and_return(admin),
+=======
+    let(:admin) { create(:admin, type: Admin) }
+    let!(:report_template1) { create(:report_template) }
+   
+    before do
+      allow_any_instance_of(WardenAuthentication).to(
+        receive(:current_user).and_return(admin)
+>>>>>>> Repo update (#45)
       )
     end
 
@@ -128,23 +196,39 @@
       before do
         params = {
           name: 'Report template',
+<<<<<<< HEAD
           report_type: 'Report template type',
           file: fixture_file_upload(Rails.root.join('spec/fixtures/upload.png')),
+=======
+          report_type: 'Report template type'
+>>>>>>> Repo update (#45)
         }
         post(
           '/api/v1/report_templates',
           params: params,
           headers: {
+<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns true' do
+<<<<<<< HEAD
         expect(admin.is_a?(Admin)).to be true
         expect(
           JSON.parse(response.body),
+=======
+        expect(admin.is_a?(Admin)). to be true
+        expect(
+          JSON.parse(response.body)
+>>>>>>> Repo update (#45)
         ).to be true
       end
     end
@@ -153,12 +237,23 @@
       before do
         delete(
           "/api/v1/report_templates/#{report_template1.id}",
+<<<<<<< HEAD
+=======
+          headers: {
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error true' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body),
+=======
+          JSON.parse(response.body)
+>>>>>>> Repo update (#45)
         ).to be true
       end
     end
@@ -168,15 +263,25 @@
         get(
           "/api/v1/report_templates/#{report_template1.id}",
           headers: {
+<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns report template' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body)['template']['id'],
+=======
+          JSON.parse(response.body)['template']['id']
+>>>>>>> Repo update (#45)
         ).to eq report_template1.id
       end
     end
@@ -185,6 +290,7 @@
       before do
         params = {
           name: 'Report template',
+<<<<<<< HEAD
           report_type: 'Report template type',
           file: fixture_file_upload(Rails.root.join('spec/fixtures/upload.png')),
         }
@@ -195,17 +301,33 @@
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
+=======
+          report_type: 'Report template type'
+        }
+        put(
+          "/api/v1/report_templates/#{report_template1.id}", 
+          params: params,
+          headers: {
+            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
+            'CONTENT_TYPE' => 'multipart/form-data'
+          }
+>>>>>>> Repo update (#45)
         )
       end
 
       it 'returns true' do
         expect(
+<<<<<<< HEAD
           JSON.parse(response.body),
         ).to be true
       end
 
       it 'file was saved as attachment' do
         expect(Attachment.find(ReportTemplate.find(report_template1.id).attachment_id).filename).to eq('upload.png')
+=======
+          JSON.parse(response.body)
+        ).to eq true
+>>>>>>> Repo update (#45)
       end
     end
   end
diff --git a/spec/api/research_plan_api_spec.rb b/spec/api/research_plan_api_spec.rb
index 936187035..123c0c0f7 100644
--- a/spec/api/research_plan_api_spec.rb
+++ b/spec/api/research_plan_api_spec.rb
@@ -31,6 +31,34 @@
       end
     end
 
+<<<<<<< HEAD
+=======
+    describe 'GET /api/v1/research_plans' do
+      let!(:c) { create(:collection, label: 'C1', user: user, is_shared: false) }
+      let(:rp) { create(:research_plan) }
+      let!(:research_plan_metadata) { create(:research_plan_metadata) }
+
+   before do
+        rp.research_plan_metadata = research_plan_metadata
+        CollectionsResearchPlan.create!(research_plan: rp, collection: c)
+      end
+
+      it 'returns serialized research_plans of logged in user' do
+        get '/api/v1/research_plans'
+        first_rp = JSON.parse(response.body)['research_plans'].first
+        expect(response.status).to eq 200
+        expect(first_rp).to include(
+          'type' => 'research_plan',
+          'name' => rp.name
+        )
+        expect(first_rp['research_plan_metadata']).to include(
+            'id' => research_plan_metadata.id,
+            'doi' => research_plan_metadata.doi
+        )
+      end
+    end
+
+>>>>>>> Repo update (#45)
     describe 'POST /api/v1/research_plans' do
       context 'with valid parameters' do
         let(:params) do
@@ -46,7 +74,11 @@
           }
         end
 
+<<<<<<< HEAD
         before { post '/api/v1/research_plans', params: params, as: :json}
+=======
+        before { post '/api/v1/research_plans', params: params,  as: :json}
+>>>>>>> Repo update (#45)
 
         it 'is able to create a new research plan' do
           rp = ResearchPlan.find_by(name: 'test')
diff --git a/spec/api/research_plan_metadata_api_spec.rb b/spec/api/research_plan_metadata_api_spec.rb
index adf29263a..6a284ff37 100644
--- a/spec/api/research_plan_metadata_api_spec.rb
+++ b/spec/api/research_plan_metadata_api_spec.rb
@@ -49,8 +49,13 @@
           },
           geo_location: {
             geoLocationPoint: {
+<<<<<<< HEAD
               pointLongitude: Faker::Address.longitude.to_s,
               pointLatitude: Faker::Address.latitude.to_s
+=======
+              pointLongitude: Faker::Address.longitude,
+              pointLatitude: Faker::Address.latitude
+>>>>>>> Repo update (#45)
             }
           },
           funding_reference: {
diff --git a/spec/factories/admins.rb b/spec/factories/admins.rb
index 9513230c5..2e504d1fe 100644
--- a/spec/factories/admins.rb
+++ b/spec/factories/admins.rb
@@ -2,4 +2,4 @@
   factory :admin, class: 'Admin', parent: :user do
     type { 'Admin' }
   end
-end
\ No newline at end of file
+end
diff --git a/spec/factories/groups.rb b/spec/factories/groups.rb
index 46a5d108c..2793eb457 100644
--- a/spec/factories/groups.rb
+++ b/spec/factories/groups.rb
@@ -3,7 +3,6 @@
     type { 'Group' }
     first_name { 'gro' }
     last_name { 'up' }
-
     counters do
       {
         samples: 0,
diff --git a/spec/factories/persons.rb b/spec/factories/persons.rb
index 9d79581ff..af489ce5a 100644
--- a/spec/factories/persons.rb
+++ b/spec/factories/persons.rb
@@ -3,7 +3,6 @@
     type { 'Person' }
     first_name { 'John' }
     last_name { 'Doe' }
-
     counters do
       {
         samples: 0,
@@ -12,4 +11,4 @@
       }
     end
   end
-end
\ No newline at end of file
+end
diff --git a/spec/features/collection_management_spec.rb b/spec/features/collection_management_spec.rb
index c64a77fe4..8d11357c9 100644
--- a/spec/features/collection_management_spec.rb
+++ b/spec/features/collection_management_spec.rb
@@ -16,6 +16,7 @@
 
       find_by_id('add-new-collection-button').click
 
+      find('div.root-actions').find(:xpath, '..').all('button')[0].click
       # input collection name
       new_collection = all('input.collection-label.form-control').last
       new_collection.click
diff --git a/spec/fixtures/images/reaction.svg b/spec/fixtures/images/reaction.svg
index 61ffb4906..da916cc95 100644
--- a/spec/fixtures/images/reaction.svg
+++ b/spec/fixtures/images/reaction.svg
@@ -2,7 +2,7 @@
   width="1560" height="440" >
   <rect  width="1560" height="440" stroke-width="1" stroke="white" fill="none"/>
   <svg width="100%"  viewBox="0 0 657 435.0" >
-  <title>Reaction 1</title> <g transform='translate(50, 0)'><g transform='scale(1)'> <g transform='translate(10, 138)'> 
+  <title>Reaction 1</title> <g transform='translate(50, 0)'><g transform='scale(1)'> <g transform='translate(10, 138)'>
 <line x1="40.0" y1="100.0" x2="40.0" y2="60.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="47.2" y1="94.0" x2="47.2" y2="66.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="40.0" y1="60.0" x2="74.6" y2="40.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
@@ -12,7 +12,7 @@
 <line x1="109.3" y1="100.0" x2="74.6" y2="120.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="100.5" y1="96.8" x2="76.2" y2="110.8" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="74.6" y1="120.0" x2="40.0" y2="100.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
-</g> </g></g><g transform='translate(289, 0)'><g transform='scale(0.75)'> <g transform='translate(10, 68)'> 
+</g> </g></g><g transform='translate(289, 0)'><g transform='scale(0.75)'> <g transform='translate(10, 68)'>
 <line x1="40.0" y1="100.0" x2="40.0" y2="60.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="47.2" y1="94.0" x2="47.2" y2="66.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="40.0" y1="60.0" x2="74.6" y2="40.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
@@ -35,7 +35,7 @@
  </g> <g transform='translate(259, 218)'> <svg font-family="sans-serif">
   <text text-anchor="middle" x="99" y="30" font-size="21.1">37.5 °C, 12.3 h</text>
 </svg>
- </g><g transform='translate(498, 0)'><g transform='scale(1)'> <g transform='translate(10, 138)'> 
+ </g><g transform='translate(498, 0)'><g transform='scale(1)'> <g transform='translate(10, 138)'>
 <line x1="40.0" y1="100.0" x2="40.0" y2="60.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="47.2" y1="94.0" x2="47.2" y2="66.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
 <line x1="40.0" y1="60.0" x2="74.6" y2="40.0" stroke="rgb(0,0,0)" stroke-width="2.0"></line>
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index 66648dfce..f1ac3fb5c 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -6,12 +6,21 @@
 require 'webmock/rspec'
 
 require 'factory_bot_rails'
+<<<<<<< HEAD
 require 'faker'
+=======
+>>>>>>> Repo update (#45)
 require 'capybara'
 require 'webdrivers'
 # require 'capybara/rspec'
 require 'rails_helper'
 
+<<<<<<< HEAD
+=======
+
+Webdrivers.logger.level = :DEBUG
+
+>>>>>>> Repo update (#45)
 Capybara.register_driver :selenium do |app|
   http_client = Selenium::WebDriver::Remote::Http::Default.new(
     open_timeout: nil,
@@ -49,6 +58,7 @@
 inchi_path = '/rest/pug/compound/inchikey/'
 
 RSpec.configure do |config|
+<<<<<<< HEAD
   config.after do |example|
     if example.metadata[:type] == :feature && example.exception.present?
       metadata = example.metadata
@@ -56,6 +66,9 @@
       save_screenshot(filename)
     end
   end
+=======
+  config.example_status_persistence_file_path = "spec/examples.txt"
+>>>>>>> Repo update (#45)
 
   config.include FactoryBot::Syntax::Methods
 
@@ -91,11 +104,19 @@
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/YMWUJEATGCHHMB-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})
+<<<<<<< HEAD
 
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/UHOVQNZJYSORNB-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})
 
+=======
+    
+    stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/UHOVQNZJYSORNB-UHFFFAOYSA-N/record/JSON')
+      .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
+      .to_return(status: 200, body: '', headers: {})
+      
+>>>>>>> Repo update (#45)
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/PNNRZXFUPQQZSO-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})

From da11a3999707ab99d43f343dc9c9aa524a71ad71 Mon Sep 17 00:00:00 2001
From: Pei Chi Huang <pei-chi.huang@kit.edu>
Date: Wed, 7 Jun 2023 11:03:07 +0200
Subject: [PATCH 240/258] Update README.md

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 3739e61e4..000a9f15d 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,6 @@ of the **[Karlsruhe Institute of Technology]**.
     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-
 ---
 
 ## Acknowledgments

From 1b8546f0c4a085df7d31e2be99b3c9e4a1015651 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 12 Jun 2023 10:18:35 +0200
Subject: [PATCH 241/258] remove unused code

---
 .../javascripts/components/PublishCommon.js   |  316 ---
 .../components/PublishReactionContainers.js   |  150 --
 .../components/PublishReactionModal.js        |  839 ------
 .../components/PublishSampleModal.js          |  509 ----
 .../components/ReactionDetailsRepoComment.js  |   91 -
 .../components/SampleDetailsRepoComment.js    |   92 -
 .../components/actions/PublicActions.js       |  394 ---
 .../components/actions/RepositoryActions.js   |   65 -
 .../components/common/DeleteConfirmBtn.js     |   53 -
 .../common/DropdownButtonSelection.js         |   38 -
 .../components/common/InputButtonField.js     |   62 -
 .../components/common/NewsPreviewModal.js     |   33 -
 .../components/common/RepoCommentBtn.js       |   57 -
 .../components/common/RepoCommentModal.js     |   94 -
 .../components/common/RepoMetadataModal.js    |   91 -
 .../components/common/RepoReviewModal.js      |  146 --
 .../components/common/SelectionField.js       |   62 -
 .../components/fetchers/ArticleFetcher.js     |  111 -
 .../components/fetchers/PublicFetcher.js      |  229 --
 .../components/fetchers/RepositoryFetcher.js  |  382 ---
 .../components/report/SectionDoiList.js       |   89 -
 .../components/stores/PublicStore.js          |  425 ---
 .../components/users/AuthorModal.js           |  516 ----
 .../utils/defaultAnalysisPublish.js           |   52 -
 .../javascripts/libHome/ContainerComponent.js |   98 -
 app/assets/javascripts/libHome/NavFooter.js   |   24 -
 app/assets/javascripts/libHome/Navigation.js  |  136 -
 app/assets/javascripts/libHome/RepoAbout.js   |  164 --
 app/assets/javascripts/libHome/RepoCommon.js  | 2302 -----------------
 app/assets/javascripts/libHome/RepoContact.js |   43 -
 .../libHome/RepoContainerDatasets.js          |   79 -
 .../javascripts/libHome/RepoDirective.js      |   41 -
 .../javascripts/libHome/RepoElementDetails.js |   70 -
 app/assets/javascripts/libHome/RepoEmbargo.js |  278 --
 .../javascripts/libHome/RepoEmbargoDetails.js |   47 -
 app/assets/javascripts/libHome/RepoHome.js    |  476 ----
 app/assets/javascripts/libHome/RepoHowTo.js   |  177 --
 .../libHome/RepoHowTo/EditorBtn.js            |   67 -
 .../libHome/RepoHowTo/EditorImage.js          |   43 -
 .../libHome/RepoHowTo/EditorRichText.js       |   30 -
 .../libHome/RepoHowTo/EditorStelle.js         |   84 -
 .../libHome/RepoHowToDragSource.js            |   21 -
 .../libHome/RepoHowToDropTarget.js            |   41 -
 .../javascripts/libHome/RepoHowToEditor.js    |  435 ----
 .../javascripts/libHome/RepoHowToReader.js    |  124 -
 .../javascripts/libHome/RepoNewsEditor.js     |  427 ---
 .../javascripts/libHome/RepoNewsReader.js     |  123 -
 .../javascripts/libHome/RepoNewsroom.js       |  186 --
 app/assets/javascripts/libHome/RepoPubl.js    |  713 -----
 .../libHome/RepoReactionDetails.js            |  556 ----
 .../libHome/RepoReactionSchemeInfo.js         |   87 -
 app/assets/javascripts/libHome/RepoReview.js  |  236 --
 .../libHome/RepoReviewButtonBar.js            |  129 -
 .../javascripts/libHome/RepoReviewCommon.js   |   98 -
 .../javascripts/libHome/RepoReviewDetails.js  |   76 -
 app/assets/javascripts/libHome/RepoSample.js  |  150 --
 .../javascripts/libHome/RepoSampleDetails.js  |  236 --
 app/assets/javascripts/libHome/homeRoutes.js  |  219 --
 app/packs/src/components/ContainerDataset.js  |    1 -
 59 files changed, 12913 deletions(-)
 delete mode 100644 app/assets/javascripts/components/PublishCommon.js
 delete mode 100644 app/assets/javascripts/components/PublishReactionContainers.js
 delete mode 100644 app/assets/javascripts/components/PublishReactionModal.js
 delete mode 100644 app/assets/javascripts/components/PublishSampleModal.js
 delete mode 100644 app/assets/javascripts/components/ReactionDetailsRepoComment.js
 delete mode 100644 app/assets/javascripts/components/SampleDetailsRepoComment.js
 delete mode 100644 app/assets/javascripts/components/actions/PublicActions.js
 delete mode 100644 app/assets/javascripts/components/actions/RepositoryActions.js
 delete mode 100644 app/assets/javascripts/components/common/DeleteConfirmBtn.js
 delete mode 100644 app/assets/javascripts/components/common/DropdownButtonSelection.js
 delete mode 100644 app/assets/javascripts/components/common/InputButtonField.js
 delete mode 100644 app/assets/javascripts/components/common/NewsPreviewModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoCommentBtn.js
 delete mode 100644 app/assets/javascripts/components/common/RepoCommentModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoMetadataModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoReviewModal.js
 delete mode 100644 app/assets/javascripts/components/common/SelectionField.js
 delete mode 100644 app/assets/javascripts/components/fetchers/ArticleFetcher.js
 delete mode 100644 app/assets/javascripts/components/fetchers/PublicFetcher.js
 delete mode 100644 app/assets/javascripts/components/fetchers/RepositoryFetcher.js
 delete mode 100644 app/assets/javascripts/components/report/SectionDoiList.js
 delete mode 100644 app/assets/javascripts/components/stores/PublicStore.js
 delete mode 100644 app/assets/javascripts/components/users/AuthorModal.js
 delete mode 100644 app/assets/javascripts/components/utils/defaultAnalysisPublish.js
 delete mode 100644 app/assets/javascripts/libHome/ContainerComponent.js
 delete mode 100644 app/assets/javascripts/libHome/NavFooter.js
 delete mode 100644 app/assets/javascripts/libHome/Navigation.js
 delete mode 100644 app/assets/javascripts/libHome/RepoAbout.js
 delete mode 100644 app/assets/javascripts/libHome/RepoCommon.js
 delete mode 100644 app/assets/javascripts/libHome/RepoContact.js
 delete mode 100644 app/assets/javascripts/libHome/RepoContainerDatasets.js
 delete mode 100644 app/assets/javascripts/libHome/RepoDirective.js
 delete mode 100644 app/assets/javascripts/libHome/RepoElementDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoEmbargo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoEmbargoDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHome.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToDragSource.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToDropTarget.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToEditor.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToReader.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsEditor.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsReader.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsroom.js
 delete mode 100644 app/assets/javascripts/libHome/RepoPubl.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReactionDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReview.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewButtonBar.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewCommon.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoSample.js
 delete mode 100644 app/assets/javascripts/libHome/RepoSampleDetails.js
 delete mode 100644 app/assets/javascripts/libHome/homeRoutes.js

diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/assets/javascripts/components/PublishCommon.js
deleted file mode 100644
index 1604f1ae5..000000000
--- a/app/assets/javascripts/components/PublishCommon.js
+++ /dev/null
@@ -1,316 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Tooltip,
-  OverlayTrigger,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Aviator from 'aviator';
-import Sample from './models/Sample';
-import { sampleShowOrNew, reactionShow } from './routesUtils';
-import Reaction from './models/Reaction';
-import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '5px',
-  marginRight: '5px'
-};
-
-const handleClick = (e, id, clickType) => {
-  e.preventDefault();
-  e.stopPropagation();
-  const uri = Aviator.getCurrentURI();
-  const uriArray = uri.split(/\//);
-  switch (clickType) {
-    case 'Reaction':
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
-      reactionShow({ params: { reactionID: id } });
-      break;
-
-    default:
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
-      sampleShowOrNew({ params: { sampleID: id } });
-      break;
-  }
-};
-
-const validateMolecule = (element) => {
-  const validates = [];
-  const sample = element;
-  const analyses = sample.analysisArray();
-  analyses.forEach((al) => {
-    const status = al.extended_metadata.status || '';
-    const kind = al.extended_metadata.kind || '';
-    if (status !== 'Confirmed') {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
-    }
-    if (kind === '' || (kind.split('|').length < 2)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
-    }
-    if (!isNmrPass(al, sample)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
-    }
-    if (!isDatasetPass(al)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
-    }
-  });
-  return validates;
-};
-
-const PublishBtnReaction = ({ reaction, showModal }) => {
-  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
-  // NB set publishedId to true to hide it
-  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
-  const notPublishable = reaction.notPublishable; // false or [samples]
-  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
-  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
-  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
-  return (
-    (!publishedId && !tagData.publication) ? (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
-      >
-        <Button
-          // style={{ display: 'none' }}
-          bsStyle="success"
-          bsSize="xsmall"
-          className="button-right"
-          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
-          onClick={() => showModal(!isDisabled)}
-          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
-        >
-          <i className="fa fa-paper-plane" />
-        </Button>
-      </OverlayTrigger>
-    ) : <span />
-  );
-};
-
-PublishBtnReaction.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
-
-const PublishBtn = ({ sample, showModal }) => {
-  const tagData = (sample.tag && sample.tag.taggable_data) || {};
-
-  const publishedId = tagData.public_sample;
-  const isPoly = sample._contains_residues;
-
-  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
-    >
-      <Button
-        bsStyle="success"
-        bsSize="xsmall"
-        className="button-right"
-        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-        onClick={() => showModal(!isPoly)}
-        // disabled={isPoly}
-        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
-      >
-        <i className="fa fa-paper-plane" />
-      </Button>
-    </OverlayTrigger>
-  ) : <span />;
-};
-
-PublishBtn.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  sample: PropTypes.instanceOf(Sample).isRequired,
-};
-
-const ReviewPublishBtn = ({ element, showComment, validation }) => {
-  const tagData = (element.tag && element.tag.taggable_data) || {};
-  const publishedId = tagData.public_sample || tagData.public_reaction;
-  const isDecline = (tagData && tagData.decline === true) || false;
-  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
-
-  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
-  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
-                    >
-                      <Button
-                        bsStyle="danger"
-                        bsSize="xsmall"
-                        className="button-right"
-                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-                        onClick={() => validation(element)}
-                      >
-                        <i className="fa fa-paper-plane" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />);
-  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
-                    >
-                      <Button
-                        bsSize="xsmall"
-                        bsStyle="success"
-                        target="_blank"
-                        className="button-right"
-                        onClick={showComment}
-                      >
-                        <i className="fa fa-comments" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />)
-  return (
-    <span>
-    {reviewBtn}
-    {commentBtn}
-    </span>
-  )
-};
-
-
-const PublishedTag = ({ element }) => {
-  const tag = (element && element.tag) || {};
-  const tagData = (tag && tag.taggable_data) || {};
-  const tagType = tag.taggable_type;
-  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
-  let tip = '';
-  let publishedId;
-  switch (tagType) {
-    case 'Reaction':
-      publishedId = tagData.public_reaction;
-      if (isPending) {
-        tip = 'Reaction is being reviewed';
-      } else {
-        tip = 'Reaction has been published';
-      }
-      break;
-
-    default:
-      publishedId = tagData.public_sample;
-      if (isPending) {
-        tip = 'Sample is being reviewed';
-      } else {
-        tip = 'Sample has been published';
-      }
-      break;
-  }
-  return (
-    publishedId ? (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="data public">{tip}</Tooltip>}
-      >
-        <Button
-          bsSize="xsmall"
-          bsStyle={isPending ? 'warning' : 'danger'}
-          style={labelStyle}
-          onClick={event => handleClick(event, publishedId, tagType)}
-        >
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    ) : null
-  );
-};
-
-PublishedTag.propTypes = {
-  element: PropTypes.object,
-};
-
-const LabelPublication = ({ element }) => {
-  const publication = element.tag && element.tag.taggable_data &&
-    element.tag.taggable_data.publication;
-
-  if (!publication) { return null; }
-
-  const time = new Date(publication.published_at || publication.doi_reg_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const contributor = publication.contributors && publication.contributors.name;
-  const publishedBy = publication.creators && publication.creators[0] && publication.creators[0].name;
-  const tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
-  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
-    element.publication.taggable_data.scheme_only === true) || false;
-  const pubDoi = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`
-
-
-  if (publication.published_at) {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
-        onClick={e => e.stopPropagation()}
-      >
-        <Button
-          bsSize="xsmall"
-          bsStyle="default"
-          style={labelStyle}
-          target="_blank"
-          href={pubDoi}
-        >
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  } else {
-    return (<span />);
-  }
-}
-
-LabelPublication.propTypes = {
-  element: PropTypes.object,
-}
-
-
-const ChemotionTag = ({ tagData, firstOnly = false }) => {
-  const chemotionTag = tagData.chemotion;
-  if (!chemotionTag) { return null; }
-  const { chemotion_first, last_published_at, doi } = chemotionTag;
-  if (firstOnly && !chemotion_first) { return null; }
-  const time = new Date(chemotion_first || last_published_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
-    : `Last published on ${formattedTime}`;
-  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
-
-
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
-      <a
-        style={labelStyle}
-        // bsSize="xsmall"
-        // bsStyle="default"
-        target="_blank"
-        href={`https://dx.doi.org/${doi}`}
-      >
-        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
-        {first}
-        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
-      </a>
-
-
-
-    </OverlayTrigger>
-  );
-};
-
-
-ChemotionTag.propTypes = {
-  tagData: PropTypes.object,
-};
-ChemotionTag.defaultProps = {
-  tagData: {},
-};
-
-module.exports = {
-  LabelPublication,
-  PublishedTag,
-  ChemotionTag,
-  PublishBtn,
-  PublishBtnReaction,
-  ReviewPublishBtn,
-  validateMolecule,
-};
diff --git a/app/assets/javascripts/components/PublishReactionContainers.js b/app/assets/javascripts/components/PublishReactionContainers.js
deleted file mode 100644
index 3746a575c..000000000
--- a/app/assets/javascripts/components/PublishReactionContainers.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  PanelGroup,
-  Panel,
-  Button,
-} from 'react-bootstrap';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton';
-import Reaction from './models/Reaction';
-
-export default class PublishReactionContainers extends Component {
-  constructor(props) {
-    super();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      activeContainer: 0
-    };
-
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({ activeContainer: key });
-  }
-
-  render() {
-    const {reaction, activeContainer} = this.state;
-    const {readOnly} = this.props;
-
-    let containerHeader = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          {container.name}
-          {titleKind}
-          {titleStatus}
-          <Button
-            bsSize="xsmall"
-            bsStyle="danger"
-            className="button-right"
-            disabled={readOnly}
-            onClick={() => this.handleOnClickRemove(container)}
-          >
-            <i className="fa fa-trash" />
-          </Button>
-          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
-        </div>
-      )
-    };
-
-    let containerHeaderDeleted = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          <strike>
-            {container.name}
-            {titleKind}
-            {titleStatus}
-          </strike>
-          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
-                  onClick={() => this.handleUndo(container)}>
-            <i className="fa fa-undo"></i>
-          </Button>
-        </div>
-      )
-    };
-
-    if (reaction.container != null && reaction.container.children) {
-      const analyses_container = reaction.container.children.filter(element => (
-        ~element.container_type.indexOf('analyses')
-      ));
-
-      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
-        return (
-          <div>
-            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
-              {analyses_container[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Panel
-                      eventKey={key}
-                      key={`reaction_container_deleted_${container.id}`}
-                    >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                    </Panel>
-                  );
-                }
-
-                return (
-                  <Panel
-                    eventKey={key}
-                    key={`reaction_container_${container.id}`}
-                    onClick={this.handleAccordionOpen.bind(this, key)}
-                  >
-                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
-                    <Panel.Body collapsible>
-                      <ContainerComponent
-                        readOnly={readOnly}
-                        container={container}
-                        onChange={this.handleChange.bind(this, container)}
-                      />
-                    </Panel.Body>
-                  </Panel>
-                );
-              })}
-            </PanelGroup>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          style={{ marginBottom: '10px' }}
-          className="noAnalyses-warning"
-        >
-          There are currently no Analyses.
-        </div>
-      );
-    }
-
-    return (
-      <div className="noAnalyses-warning">
-        There are currently no Analyses.
-      </div>
-    );
-  }
-}
-
-PublishReactionContainers.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/assets/javascripts/components/PublishReactionModal.js
deleted file mode 100644
index ca2b1dd86..000000000
--- a/app/assets/javascripts/components/PublishReactionModal.js
+++ /dev/null
@@ -1,839 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel,
-  PanelGroup,
-  Button,
-  Modal,
-  Table,
-  Popover,
-  OverlayTrigger, FormGroup,
-  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
-  Form,
-  Grid,
-  ControlLabel
-} from 'react-bootstrap';
-import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
-import Select from 'react-select';
-import Immutable from 'immutable';
-
-import Reaction from './models/Reaction';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import ReactionsFetcher from './fetchers/ReactionsFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass, PublishTypeAs } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import { contentToText } from './utils/quillFormat';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
-);
-
-const skimAnalysis = (sample) => {
-  const analyses = sample.analysisArray();
-  const publishedAnalyses = analyses.filter(a =>
-    (a.extended_metadata &&
-      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-  return publishedAnalyses.filter(a =>
-    (a.extended_metadata &&
-      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-};
-
-const publishOptions = {
-  f: 'full',
-  s: 'scheme-only'
-};
-
-export default class PublishReactionModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      selectedUsers: [],
-      collaborations: [],
-      showPreview: false,
-      showScheme: false,
-      currentUser,
-      showRinchi: false,
-      showProp: false,
-      showTlc: false,
-      selectedRefs: [],
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: [],
-      noSolvent: false,
-      schemeDesc: false,
-      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
-    };
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handlePublishReaction = this.handlePublishReaction.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
-    this.handleYieldChange = this.handleYieldChange.bind(this);
-    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
-    this.handleUnitChange = this.handleUnitChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  handleInputChange(type, event) {
-    const { reaction } = this.state;
-    switch (type) {
-      case 'temperature':
-        reaction.temperature.userText = event.target.value;
-        break;
-      case 'temperatureUnit':
-        reaction.temperature = reaction.convertTemperature(event);
-        break;
-      case 'duration':
-        reaction.durationDisplay = { nextValue: event.target.value };
-        break;
-      case 'durationUnit':
-        reaction.durationDisplay = { nextUnit: true };
-        break;
-      default:
-        break;
-    }
-    this.setState({ reaction });
-  }
-
-  handleYieldChange(p, event) {
-    const { value } = event.target;
-    if (!isNaN(value)) {
-      const { reaction } = this.state;
-      const { products } = reaction;
-      const product = products.find(e => e.id === p.id);
-      if (typeof product !== 'undefined') {
-        product.equivalent = (value / 100);
-        products.splice(products.findIndex(e => e.id === p.id), 1, product);
-        reaction.products = products;
-        this.setState({ reaction });
-      }
-    }
-  }
-
-  handlePropertiesChange(type, event) {
-    if (type === 'temperature') {
-      this.handleInputChange(type, event);
-    }
-    if (type === 'duration') {
-      const { value } = event.target;
-      if (!isNaN(value)) {
-        this.handleInputChange(type, event);
-      }
-    }
-    if (type === 'schemeDesc') {
-      this.setState({ schemeDesc: !this.state.schemeDesc });
-    }
-  }
-
-  handleUnitChange(type, event) {
-    let index;
-    let unit;
-    switch (type) {
-      case 'temperatureUnit':
-        index = Reaction.temperature_unit.indexOf(event);
-        unit = Reaction.temperature_unit[(index + 1) % 3];
-        this.handleInputChange('temperatureUnit', unit);
-        break;
-      case 'durationUnit':
-        this.handleInputChange('durationUnit', event);
-        break;
-      default:
-        break;
-    }
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  handleNoSolventCheck() {
-    this.setState({ noSolvent: !this.state.noSolvent });
-  }
-
-  loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const aff = currentUser && currentUser.affiliations && Object.keys(currentUser.affiliations).map(k => (
-      <div>  -{currentUser.affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5> {currentUser.name} <br/> {aff} </div>)
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handleAnalysesChecked(analysis, elementType) {
-    const { reaction } = this.state;
-
-    reaction.changed = true;
-    if (elementType === 'Reaction') {
-      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-      // Find the index of the element and then replace
-      const index = findIndex(elements, { id: analysis.id });
-      if (index !== -1) {
-        elements.splice(index, 1, analysis);
-        this.setState(prevState => ({ ...prevState, reaction }));
-      }
-    }
-    if (elementType === 'Product') {
-      const analysesReactionProducts = reaction.products;
-      analysesReactionProducts.forEach((product) => {
-        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        // Find the index of the element and then replace
-        const index = findIndex(elements, { id: analysis.id });
-        if (index !== -1) {
-          elements.splice(index, 1, analysis);
-          this.setState(prevState => ({ ...prevState, reaction }));
-        }
-      });
-    }
-    this.props.onHandleAnalysesCheck(this.state.reaction);
-  }
-
-  validateAnalyses() {
-    let pas = this.state.reaction.products.reduce(
-      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(this.state.reaction)
-    );
-    if (pas.length === 0) {
-      return false;
-    }
-
-    pas = AnalysisIdstoPublish(this.state.reaction);
-    if (pas.length > 0) {
-      return true;
-    }
-
-    const { reaction } = this.state;
-    const { products } = reaction;
-    for (let i = 0; i < products.length; i += 1) {
-      const pa = skimAnalysis(products[i]);
-      if (pa.length > 0) { return true; }
-    }
-
-    return false;
-  }
-
-  handlePublishReaction() {
-    const { selectedLicense, cc0Consent, publishType, selectedUsers} = this.state;
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
-      return true;
-    }
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
-      alert("Please add an author or check 'add me as author'.");
-      return true;
-    }
-
-    const { reaction } = this.state;
-    if (isFullyPublish) {
-      const { samples } = reaction;
-      for (let i = 0; i < samples.length; i += 1) {
-        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
-      }
-    }
-
-    LoadingActions.start();
-    RepositoryActions.publishReaction({
-      isFullyPublish,
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      schemeDesc: this.state.schemeDesc,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide(false);
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reReaction) => {
-        this.props.onPublishRefreshClose(reReaction, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishReactionReserveDois({
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reaction) => {
-        this.props.onPublishRefreshClose(reaction, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-    const authorCount = selectedUsers && selectedUsers.length;
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const aff = u && u.affiliations && u.affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{a.label}<br/>{aff}<br/></div>)
-    });
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="80%" />
-            <th width="20%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            return (
-              <tr key={id}>
-                <td className="padding-right" style={{ display: 'inline-flex;' }}>
-                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
-                  >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  handlePublishTypeChange(e) {
-    const { publishType } = this.state;
-    publishType.selected = e;
-    this.setState({ publishType });
-  }
-
-  validatePub(isFullyPublish = true) {
-    const { reaction } = this.state;
-    const validates = [];
-    if (isFullyPublish) {
-      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-      const desc = contentToText(reaction.description).trim() || '';
-      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
-      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
-      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
-      const hasSv =
-        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
-      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
-      const hasProduct = reaction.products && reaction.products.length > 0;
-      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
-
-      (reaction.starting_materials || []).forEach((st) => {
-        if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      (reaction.products || []).forEach((prod) => {
-        if (!prod.amount || !prod.amount.value) {
-          validates.push({ name: 'product-amount', value: false, message: `${prod.molecule_iupac_name}: amount is 0` });
-        }
-      });
-    } else {
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-    }
-    return validates;
-  }
-
-  render() {
-    const { show } = this.props;
-    const {
-      reaction, selectedUsers, selectedRefs, publishType
-    } = this.state;
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
-    const validateInfo = this.validatePub(isFullyPublish);
-    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
-    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
-    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
-    const validated = !!(validateObjs && validateObjs.length === 0);
-
-    let selectedAnalysesCount = (this.state.reaction.analyses || [])
-      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
-      && a.extended_metadata.kind)).length;
-
-    const productDOI = product => (
-      <tr key={`doi-product-row-${product.id}`}>
-        <td>
-          Product {product.name}
-        </td>
-        <td>
-          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    const productAnalysesDOI = analysis => (
-      <tr key={`doi-product-analysis-row-${analysis.id}`}>
-        <td>
-          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
-        </td>
-        <td>
-          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    if (show) {
-      const analysesView = [];
-      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-
-      selectedAnalysesCount = (analysesReaction || []).filter(a =>
-        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
-
-      const analysesViewReaction = analysesReaction.map(analysis => (
-        <PublishAnalysesTag
-          reaction={reaction}
-          analysis={analysis}
-          key={`reaction_${analysis.id}`}
-          analysesType="Reaction"
-          handleAnalysesChecked={this.handleAnalysesChecked}
-        />
-      ));
-      analysesView.push(analysesViewReaction);
-
-      const analysesReactionProductsDOIs = [];
-      const analysesReactionProducts = reaction.products;
-
-      analysesReactionProducts.forEach((product) => {
-        const arrP = [];
-        arrP.push(product);
-        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
-        analysesView.push(tmpProduct);
-
-        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        const tmpTag = tmp.map(analysis => (
-          <PublishAnalysesTag
-            reaction={reaction}
-            analysis={analysis}
-            key={`reaction_product_${analysis.id}`}
-            analysesType="Product"
-            handleAnalysesChecked={this.handleAnalysesChecked}
-            product={product}
-          />
-        ));
-        analysesView.push(tmpTag);
-        analysesReactionProductsDOIs.push(productDOI(product));
-        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
-        selectedAnalysesCount += (tmp || []).filter(a =>
-          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
-            && ((a.extended_metadata.status || '') === 'Confirmed')
-            && (isNmrPass(a, product))
-            && (isDatasetPass(a))
-          )).length;
-      });
-
-      const {
-        selectedEmbargo, selectedLicense, cc0Consent
-      } = this.state;
-
-      const publishTypeAs = {
-        ...publishType,
-        onChange: this.handlePublishTypeChange
-      };
-
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
-            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
-              <Grid style={{ width: '100%' }}>
-                <Col sm={6} lg={6}>
-                  <Form inline>
-                    <FormGroup controlId="frmCtrlPublishType">
-                      <ControlLabel>
-                        Publish Reaction as
-                      </ControlLabel>{' '}
-                      <PublishTypeAs {...publishTypeAs} />
-                    </FormGroup>
-                  </Form>
-                </Col>
-                <Col sm={6} lg={6}>
-                  {' '}
-                </Col>
-              </Grid>
-            </Modal.Header>
-            <Modal.Body style={{
-              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
-            }}
-            >
-              <EmbargoCom
-                opts={this.state.bundles}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <FormGroup>
-                <Col md={12} sm={12}>
-                  <div style={{
-                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
-                }}>{validateMsg}
-                  </div>
-                </Col>
-              </FormGroup>
-              <div className={`display-${isFullyPublish}`}>
-                <ReactionInfo
-                  reaction={reaction}
-                  toggleScheme={this.toggleScheme}
-                  showScheme={this.state.showScheme}
-                  isPublic={false}
-                  toggleRinchi={this.toggleRinchi}
-                  showRinchi={this.state.showRinchi}
-                  toggleProp={this.toggleProp}
-                  showProp={this.state.showProp}
-                  toggleTlc={this.toggleTlc}
-                  showTlc={this.state.showTlc}
-                />
-              </div>
-              <div className={`display-${!isFullyPublish}`}>
-                <ReactionSchemeOnlyInfo
-                  reaction={reaction}
-                  isPublic={false}
-                  schemeDesc={this.state.schemeDesc}
-                  onYieldChange={this.handleYieldChange}
-                  onPropertiesChange={this.handlePropertiesChange}
-                  onUnitChange={this.handleUnitChange}
-                />
-              </div>
-              <Checkbox
-                onChange={() => { this.handleNoSolventCheck(); }}
-                checked={this.state.noSolvent}
-                className={`display-${isFullyPublish}`}
-              >
-                <span>This reaction has no solvents</span>
-              </Checkbox>
-              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
-                <Panel
-                  eventKey="2"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <div>
-                      <Row>
-                        <Col md={12}>
-                          <h5>
-                            <b>Datasets: </b>
-                            <br />
-                          </h5>
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col md={12}>
-                          <PanelGroup accordion id={`panelgroup_ds_${reaction.id}`} defaultActiveKey={0}>
-                            {flatten(analysesView)}
-                          </PanelGroup>
-                        </Col>
-                      </Row>
-                    </div>
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="3"
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="5"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-            </Modal.Body>
-            <Modal.Footer style={{ padding: '6px' }}>
-              <Button onClick={() => this.props.onHide(false)}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
-                Publish Reaction
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishReactionModal.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-  onHandleAnalysesCheck: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/assets/javascripts/components/PublishSampleModal.js
deleted file mode 100644
index 7f0930f03..000000000
--- a/app/assets/javascripts/components/PublishSampleModal.js
+++ /dev/null
@@ -1,509 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel, PanelGroup, Modal, Table,
-  ListGroupItem, ListGroup, Button, Checkbox,
-  Popover, OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-import Select from 'react-select';
-import Immutable from 'immutable';
-import { sortedUniq } from 'lodash';
-
-import Sample from './models/Sample';
-import SampleDetailsContainers from './SampleDetailsContainers';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import { MoleculeInfo, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import SamplesFetcher from './fetchers/SamplesFetcher';
-import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-
-export default class PublishSampleModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { sample } = props;
-    this.state = {
-      sample,
-      selectedUsers: [],
-      showSelectionUser: false,
-      showSelectionAnalysis: false,
-      showPreview: false,
-      currentUser,
-      selectedRefs: [],
-      collaborations: [],
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: []
-    };
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handleSampleChanged = this.handleSampleChanged.bind(this);
-    this.handlePublishSample = this.handlePublishSample.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      sample: nextProps.sample,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
-    });
-  }
-
-  loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handleSampleChanged(sample) {
-    this.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  validateAnalyses() {
-    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
-  validateSubmission() {
-    const { sample } = this.state;
-    const analyses = sample.analysisArray();
-
-    if (!this.validateAnalyses()) {
-      return false;
-    }
-
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  handlePublishSample() {
-    const { selectedLicense, cc0Consent } = this.state;
-    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
-    const plural = authorCount > 0 ? 's' : '';
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (!this.validateSubmission()) {
-      alert('Submission Check fail. Please review your data and re-submit.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${plural}`);
-      return true;
-    }
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
-      alert("Please add an author or check 'add me as author.'");
-      return true;
-    }
-
-    const analyses = this.state.sample.analysisArray();
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
-          (isDatasetPass(a))))); // fail if Dataset check fail
-
-    const { sample } = this.state;
-    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
-
-    LoadingActions.start();
-    RepositoryActions.publishSample({
-      // sample: this.state.sample,
-      sample,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide();
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((reSample) => {
-        this.props.onPublishRefreshClose(reSample, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishSampleReserveDois({
-      sample: this.state.sample,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((sample) => {
-        this.props.onPublishRefreshClose(sample, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const aff = currentUser && currentUser.affiliations && Object.keys(currentUser.affiliations).map(k => (
-      <div>  -{currentUser.affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5> {currentUser.name} <br/> {aff} </div>)
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const aff = u && u.affiliations && u.affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{a.label}<br/>{aff}<br/></div>)
-    });
-
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="80%" />
-            <th width="20%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            return (
-              <tr key={id}>
-                <td className="padding-right">
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
-                  >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  render() {
-    const { show, onHide, sample } = this.props;
-    const canPublish = this.validateSubmission(); // this.validateAnalyses();
-    const {
-      showPreview,
-      selectedUsers,
-      selectedRefs
-    } = this.state;
-    const analyses = sample.analysisArray();
-    const selectedAnalysesCount = analyses.filter(
-      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
-
-    const { molecule } = sample;
-
-    const {
-      selectedEmbargo, selectedLicense, cc0Consent
-    } = this.state;
-
-    if (show) {
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Publish Sample
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
-              <EmbargoCom
-                opts={this.state.bundles}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <Panel>
-                <Panel.Body>
-                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
-                </Panel.Body>
-              </Panel>
-              <PanelGroup accordion id="publish-sample-config">
-                <Panel
-                  eventKey="2"
-                >
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <SampleDetailsContainers
-                      readOnly
-                      publish
-                      sample={sample}
-                      handleSampleChanged={this.handleSampleChanged}
-                    />
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="3">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="5">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-              {showPreview ? null : null}
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={() => onHide()}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
-                Publish Sample
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishSampleModal.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
deleted file mode 100644
index a4ef0d9f4..000000000
--- a/app/assets/javascripts/components/ReactionDetailsRepoComment.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from '../libHome/RepoReactionDetails';
-
-export default class ReactionDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      reaction: null,
-      reviewLevel: 0,
-      pubState: '',
-      submitter: ''
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    RepositoryFetcher.fetchReaction(this.props.reactionId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewReaction
-        if (data.reaction && data.reaction.reviewLevel === 0) {
-          console.log(data);
-        } else {
-          let comments = {};
-          let summary = '';
-          let feedback = '';
-          let pubState = '';
-
-          if (data.reaction && data.reaction.publication) {
-            const { publication } = data.reaction;
-            pubState = publication.state;
-
-            if (publication.review) {
-              const pr = publication.review;
-              comments = pr.comments ? pr.comments : {};
-              summary = pr.summary ? pr.summary : '';
-              feedback = pr.feedback ? pr.feedback : '';
-            }
-          }
-          this.setState({
-            reaction: data.reaction,
-            reviewLevel: data.reviewLevel,
-            commentInfo: comments,
-            summaryInfo: summary,
-            feedbackInfo: feedback,
-            pubState,
-            submitter: data.pub_name,
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`ReactionDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  render() {
-    const { reaction } = this.state;
-    return reaction && reaction.publication ?
-      (
-        <RepoReactionDetails
-          reaction={reaction}
-          canComment
-          reviewLevel={this.state.reviewLevel}
-          submitter={this.state.submitter}
-          pubState={this.state.pubState}
-          comments={this.state.commentInfo ? this.state.commentInfo : {}}
-          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-ReactionDetailsRepoComment.propTypes = {
-  reactionId: PropTypes.number.isRequired,
-};
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/assets/javascripts/components/SampleDetailsRepoComment.js
deleted file mode 100644
index 58b65cfad..000000000
--- a/app/assets/javascripts/components/SampleDetailsRepoComment.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoSampleDetails from '../libHome/RepoSampleDetails';
-
-export default class SampleDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      element: null,
-      reviewLevel: 0,
-      pubState: '',
-      submitter: ''
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    RepositoryFetcher.fetchSample(this.props.sampleId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewSample
-        if (data.sample && data.reviewLevel === 0) {
-          console.log(data);
-        } else {
-          let comments = {};
-          let summary = '';
-          let feedback = '';
-          let pubState = '';
-
-          if (data.sample && data.publication) {
-            const { publication } = data;
-            pubState = publication.state;
-
-            if (publication.review) {
-              const pr = publication.review;
-              comments = pr.comments ? pr.comments : {};
-              summary = pr.summary ? pr.summary : '';
-              feedback = pr.feedback ? pr.feedback : '';
-            }
-          }
-          this.setState({
-            element: data,
-            commentInfo: comments,
-            summaryInfo: summary,
-            feedbackInfo: feedback,
-            submitter: data.pub_name,
-            reviewLevel: data.reviewLevel,
-            pubState
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`SampleDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  render() {
-    const { element } = this.state;
-    return element && element.sample && element.publication ?
-      (
-        <RepoSampleDetails
-          element={element}
-          canComment
-          reviewLevel={this.state.reviewLevel}
-          submitter={this.state.submitter}
-          pubState={this.state.pubState}
-          comments={this.state.commentInfo ? this.state.commentInfo : {}}
-          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-SampleDetailsRepoComment.propTypes = {
-  sampleId: PropTypes.number.isRequired,
-};
diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
deleted file mode 100644
index f2688e5f4..000000000
--- a/app/assets/javascripts/components/actions/PublicActions.js
+++ /dev/null
@@ -1,394 +0,0 @@
-import alt from '../alt'
-import PublicFetcher from '../fetchers/PublicFetcher'
-import NotificationActions from './NotificationActions';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-class PublicActions {
-
-  close(deleteEl) {
-    return { deleteEl }
-  }
-
-  getMolecules(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getReactions(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchMolecules(pageParams={}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchReactions(pageParams = {}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function (notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => {
-      PublicFetcher.searchPublicReactions(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        NotificationActions.removeByUid(uid);
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublished() {
-    return (dispatch) => {
-      PublicFetcher.fetchLastPublished()
-      .then((result) => {
-        dispatch(result.last_published)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublishedSample(){
-    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
-      .then((result) => {
-        dispatch(result.sample)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  openRepositoryPage(page) {
-    if (page) {
-      return page
-    } else {
-      return ""
-    }
-  }
-
-  displayDataset(id) {
-    return (dispatch) => { PublicFetcher.fetchDataset(id)
-      .then((result) => {
-        dispatch({dataset: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayMolecule(id, advFlag = false, advType = '', advVal = '') {
-    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
-      .then((result) => {
-        dispatch({moleculeData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReaction(id) {
-    return (dispatch) => { PublicFetcher.fetchReaction(id)
-      .then((result) => {
-        dispatch({reactionData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  articles() {
-    return (dispatch) => {
-      fetch('/newsroom/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({data: json});
-      }).catch((errorMessage) => {
-        dispatch({ data: [] });
-      });
-    };
-  }
-
-  editArticle(key) {
-    if (key === 'new') {
-      return (dispatch) => {
-          dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  displayArticle(key) {
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  howtos() {
-    return (dispatch) => {
-      fetch('/howto/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ data: json });
-        }).catch((errorMessage) => {
-          // console.log(errorMessage);
-          dispatch({ data: [] });
-        });
-    };
-  }
-
-  editHowTo(key) {
-    if (key === 'ein') {
-      return (dispatch) => {
-        dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  displayHowTo(key) {
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-        }}
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  selectPublicCollection() {
-    return (dispatch) => {
-      PublicFetcher.selectPublicCollection()
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); })
-    }
-  }
-
-  getElements(type='All', state='pending', page=1, perPage=10) {
-    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, page, perPage)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewReaction(id) {
-    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewSample(id) {
-    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  reviewPublish(id, type, comments, summary, feedback, action) {
-    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comments, summary, feedback, action)
-      .then((result) => {
-        dispatch({ id :id, element: result, type: type, comments: comments, summary: summary, feedback: feedback, action: action })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  displayReviewEmbargo(type, id) {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElement(type, id)
-      .then((result) => {
-        dispatch({ id, element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  generateEmbargoAccount(id) {
-    return (dispatch) => {
-      RepositoryFetcher.generateEmbargoAccount(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  fetchEmbargoBundle() {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-
-  releaseEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.releaseEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  deleteEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.deleteEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  moveEmbargo(id, newEmbargo, element) {
-    return (dispatch) => {
-      RepositoryFetcher.moveEmbargo(id, newEmbargo, element)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  getEmbargoElements(id) {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElements(id)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  publishedStatics() {
-    return (dispatch) => {
-      PublicFetcher.publishedStatics()
-        .then((result) => {
-          dispatch(result.published_statics)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  updateComment(id, type, comments) {
-    return (dispatch) => {
-      RepositoryFetcher.updateComment(id, type, comments)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-}
-
-export default alt.createActions(PublicActions)
diff --git a/app/assets/javascripts/components/actions/RepositoryActions.js b/app/assets/javascripts/components/actions/RepositoryActions.js
deleted file mode 100644
index 80dd4d530..000000000
--- a/app/assets/javascripts/components/actions/RepositoryActions.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import alt from '../alt';
-
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-
-class RepositoryActions {
-  publishSample(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  reviewPublish(element) {
-    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
-      .then((result) => {
-        dispatch({ element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishSampleReserveDois(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishReaction(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  publishReactionReserveDois(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-}
-
-export default alt.createActions(RepositoryActions);
diff --git a/app/assets/javascripts/components/common/DeleteConfirmBtn.js b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
deleted file mode 100644
index afd1f3ef2..000000000
--- a/app/assets/javascripts/components/common/DeleteConfirmBtn.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonGroup,
-  OverlayTrigger,
-  Popover
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-const DeleteConfirmBtn = (props) => {
-  const popover = (
-    <Popover id="popover-positioned-scrolling-left">
-      delete: <br /> {props.label} ?<br />
-      <ButtonGroup>
-        <Button bsStyle="danger" bsSize="xsmall" onClick={() => props.onClickYes()} >
-          Yes
-        </Button>&nbsp;
-        <Button bsStyle="warning" bsSize="xsmall" onClick={() => props.onClickNo()} >
-          No
-        </Button>
-      </ButtonGroup>
-    </Popover>
-  );
-  return (
-    <ButtonGroup className="actions">
-      <OverlayTrigger
-        animation
-        placement={props.tipPlacement}
-        root
-        trigger="focus"
-        overlay={popover}
-      >
-        <Button bsSize="xsmall" bsStyle="danger" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    </ButtonGroup>
-  );
-};
-
-DeleteConfirmBtn.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClickYes: PropTypes.func.isRequired,
-  onClickNo: PropTypes.func,
-  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left'])
-};
-
-DeleteConfirmBtn.defaultProps = {
-  onClickNo: () => { },
-  tipPlacement: 'right'
-};
-
-export default DeleteConfirmBtn;
diff --git a/app/assets/javascripts/components/common/DropdownButtonSelection.js b/app/assets/javascripts/components/common/DropdownButtonSelection.js
deleted file mode 100644
index 1d03a4771..000000000
--- a/app/assets/javascripts/components/common/DropdownButtonSelection.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-
-const DropdownButtonSelection = props =>
-  (
-    <DropdownButton
-      title={props.selected || props.placeholder}
-      key={props.selected}
-      id={`dropdown-${uuid.v4()}`}
-      onSelect={props.onSelect}
-    >
-      {
-        props.options.map(element => (
-          <MenuItem key={element} eventKey={element} disabled={props.disabled}>
-            {element}
-          </MenuItem>
-        ))
-      }
-    </DropdownButton>
-  );
-
-DropdownButtonSelection.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  selected: PropTypes.string,
-  onSelect: PropTypes.func,
-  disabled: PropTypes.bool
-};
-
-DropdownButtonSelection.defaultProps = {
-  selected: null,
-  onSelect: null,
-  disabled: false
-};
-
-export default DropdownButtonSelection;
diff --git a/app/assets/javascripts/components/common/InputButtonField.js b/app/assets/javascripts/components/common/InputButtonField.js
deleted file mode 100644
index da8e5b8e5..000000000
--- a/app/assets/javascripts/components/common/InputButtonField.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {
-  FormGroup,
-  ControlLabel,
-  InputGroup,
-  FormControl,
-  OverlayTrigger,
-  Tooltip,
-  Button
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-
-const InputButtonField = props =>
-  (
-    <FormGroup>
-      <ControlLabel>{props.label}</ControlLabel>
-      <InputGroup>
-        <FormControl
-          type="text"
-          value={props.value}
-          placeholder={props.placeholder}
-          onChange={event => props.onInputChange(props.field, event)}
-        />
-        <InputGroup.Button>
-          <OverlayTrigger
-            placement={props.tipPlacement}
-            overlay={<Tooltip id={`tooltip-${uuid.v4()}`}>{props.btnTip}</Tooltip>}
-          >
-            <Button
-              bsStyle="success"
-              onClick={() => props.onBtnClick(props.btnField, props.btnValue || '')}
-            >
-              {props.btnValue}
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-      </InputGroup>
-    </FormGroup>
-
-  );
-
-InputButtonField.propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  btnValue: PropTypes.string.isRequired,
-  btnField: PropTypes.string.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onBtnClick: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  btnTip: PropTypes.string,
-  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
-};
-
-InputButtonField.defaultProps = {
-  placeholder: 'Please input...',
-  btnTip: 'click here',
-  tipPlacement: 'top'
-};
-
-export default InputButtonField;
diff --git a/app/assets/javascripts/components/common/NewsPreviewModal.js b/app/assets/javascripts/components/common/NewsPreviewModal.js
deleted file mode 100644
index e7be6488c..000000000
--- a/app/assets/javascripts/components/common/NewsPreviewModal.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Panel, Modal } from 'react-bootstrap';
-import QuillViewer from '../../components/QuillViewer';
-
-const NewsPreviewModal = ({ showModal, article, onClick }) => {
-  return (
-    <Modal animation show={showModal} dialogClassName="news-preview-dialog" onHide={() => onClick(false)}>
-      <Modal.Body>
-        <div>
-          <div className="ribbon ribbon-top-right"><span>Preview</span></div>
-          <Panel className="newseditor_review">
-            <Panel.Heading>
-              <span>{article.title}</span>
-              <div className="news_author">
-                <img src="/images/logo.png" alt="Preview" />&nbsp;
-                &nbsp;Creator
-                &nbsp;&nbsp;&nbsp;<i className="fa fa-pencil" aria-hidden="true" />&nbsp;Created Date
-              </div>
-              <br />
-              <div className="heading_separator" />
-            </Panel.Heading>
-            <Panel.Body>
-              <QuillViewer value={article.content} />
-            </Panel.Body>
-          </Panel>
-          <div className="ribbon ribbon-bottom-left"><span>Preview</span></div>
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-};
-
-export default NewsPreviewModal;
diff --git a/app/assets/javascripts/components/common/RepoCommentBtn.js b/app/assets/javascripts/components/common/RepoCommentBtn.js
deleted file mode 100644
index 7d8646594..000000000
--- a/app/assets/javascripts/components/common/RepoCommentBtn.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { CommentComponent } from '../../libHome/RepoReviewCommon';
-
-const RepoCommentBtn = (props) => {
-  const {
-    field, orgInfo, onShow, comments, submitter, reviewLevel, state
-  } = props;
-
-  const hasComment = field in comments;
-  let comment = (comments && comments[field]) ? CommentComponent(comments[field].comment, 'Reviewer: ', comments[field].feedback, `${submitter}: `) : <div />;
-
-  if (hasComment === false) {
-    comment = '';
-  }
-  const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
-
-  if (isEditable === false) {
-    return <span>{comment}</span>;
-  }
-
-  return (
-    <span>
-      <Button
-        bsStyle={hasComment ? 'success' : 'default'}
-        bsSize="xsmall"
-        onClick={() => onShow(true, field, orgInfo)}
-      >
-        <i className="fa fa-comment" />
-      </Button>
-      {comment}
-    </span>
-  );
-};
-
-RepoCommentBtn.propTypes = {
-  onShow: PropTypes.func.isRequired,
-  comments: PropTypes.object,
-  field: PropTypes.string,
-  orgInfo: PropTypes.string,
-  state: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  submitter: PropTypes.string,
-  textAreaAttr: PropTypes.object
-};
-
-RepoCommentBtn.defaultProps = {
-  comments: null,
-  field: '',
-  orgInfo: '',
-  state: '',
-  reviewLevel: 0,
-  submitter: ''
-};
-
-export default RepoCommentBtn;
diff --git a/app/assets/javascripts/components/common/RepoCommentModal.js b/app/assets/javascripts/components/common/RepoCommentModal.js
deleted file mode 100644
index f2f2caf7f..000000000
--- a/app/assets/javascripts/components/common/RepoCommentModal.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl } from 'react-bootstrap';
-
-export default class RepoCommentModal extends React.Component {
-  render() {
-    const {
-      elementId, elementType, show, onHide, onUpdate, field, orgInfo,
-      commentObj, textAreaAttrs, state, reviewLevel
-    } = this.props;
-
-    const defaultAttrs = {
-      style: {
-        height: '100px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-    let comment = '';
-    if (typeof (commentObj) !== 'undefined') {
-      if (reviewLevel === 2) {
-        comment = commentObj.feedback;
-      } else {
-        comment = commentObj.comment;
-      }
-    }
-
-    const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
-    if (show) {
-      return (
-        <div>
-          <Modal
-            show
-            onHide={() => onHide(false, field)}
-            bsSize="large"
-            backdrop="static"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Comment on: {field}
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              {orgInfo}
-              <br />
-              <FormControl
-                componentClass="textarea"
-                {...textAreaAttrs || defaultAttrs}
-                defaultValue={comment || ''}
-                inputRef={(m) => { this.commentInput = m; }}
-              />
-              <ButtonToolbar>
-                <Button
-                  onClick={() => onHide(false)}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  disabled={!isEditable}
-                  onClick={() =>
-                    onUpdate(elementId, elementType, field, this.commentInput.value, orgInfo, true)}
-                >
-                  Update
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoCommentModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired,
-  show: PropTypes.bool,
-  field: PropTypes.string,
-  commentObj: PropTypes.object,
-  orgInfo: PropTypes.string,
-  state: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  submitter: PropTypes.string,
-  onUpdate: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoCommentModal.defaultProps = {
-  show: false,
-  reviewLevel: 0,
-  submitter: '',
-  field: '',
-  orgInfo: '',
-  state: ''
-};
diff --git a/app/assets/javascripts/components/common/RepoMetadataModal.js b/app/assets/javascripts/components/common/RepoMetadataModal.js
deleted file mode 100644
index 7defa8a65..000000000
--- a/app/assets/javascripts/components/common/RepoMetadataModal.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-export default class RepoMetadataModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false,
-      metadata: []
-    };
-    this.loadMetadata = this.loadMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadMetadata();
-  }
-
-  loadMetadata() {
-    const { elementId, elementType } = this.props;
-    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
-      this.setState({ metadata: result.metadata });
-    });
-  }
-
-  render() {
-    const { modalShow, metadata } = this.state;
-    const { elementId, elementType } = this.props;
-    return (
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
-        >
-          <Button
-            onClick={() => this.setState({ modalShow: true })}
-            style={{ marginLeft: '5px' }}
-          >
-            <i className="fa fa-file-code-o" />&nbsp;
-            Metadata
-          </Button>
-        </OverlayTrigger>
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="news-preview-dialog"
-        >
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              <h4>
-                <Label>
-                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
-                </Label>
-              </h4>
-            </div>
-            <div style={{
-              maxHeight: '50vh',
-              overflow: 'auto',
-              whiteSpace: 'pre',
-              backgroundColor: 'black',
-              color: 'white',
-              fontFamily: 'monospace'
-            }}
-            >
-              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
-            </div>
-            <br />
-            <ButtonToolbar>
-              <Button
-                bsStyle="warning"
-                onClick={() => this.setState({ modalShow: false })}
-              > Close
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
-              > Download
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-RepoMetadataModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired
-};
diff --git a/app/assets/javascripts/components/common/RepoReviewModal.js b/app/assets/javascripts/components/common/RepoReviewModal.js
deleted file mode 100644
index f83d034b1..000000000
--- a/app/assets/javascripts/components/common/RepoReviewModal.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl, Table } from 'react-bootstrap';
-
-const renderComments = (comments, submitter = '') => {
-  let commentsTbl = null;
-  if (comments && Object.keys(comments).length > 0) {
-    commentsTbl = Object.keys(comments).map((key, idx) => {
-      const info = comments[key];
-      return (
-        <tr key={key}>
-          <td style={{ width: '3%' }}>{idx + 1}</td>
-          <td style={{ width: '13%' }}>{key}</td>
-          <td style={{ width: '28%' }}>{info.origInfo}</td>
-          <td style={{ width: '28%' }}>{info.comment}</td>
-          <td style={{ width: '28%' }}>{info.feedback}</td>
-        </tr>
-      );
-    });
-  }
-
-  return (
-    <Table striped bordered hover>
-      <thead>
-        <tr>
-          <th width="3%">#</th>
-          <th width="13%">Column</th>
-          <th width="28%">Information</th>
-          <th width="28%">Review Comments</th>
-          <th width="28%">{submitter} Feedback</th>
-        </tr>
-      </thead>
-      <tbody>
-        {commentsTbl}
-      </tbody>
-    </Table>
-  );
-};
-
-export default class RepoReviewModal extends React.Component {
-  render() {
-    const {
-      show, elementId, action, onSubmit, onHide, summary, feedback, state, reviewLevel, submitter,
-      comments
-    } = this.props;
-
-    const isEditable = ((reviewLevel === 3 && state === 'pending') || (reviewLevel === 2 && state === 'reviewed')) || false;
-
-    let title = action;
-    if (reviewLevel === 2 && action === 'Decline') {
-      title = 'Withdraw';
-    } else if (reviewLevel === 3 && action === 'Decline') {
-      title = 'Reject';
-    }
-
-    if (show) {
-      return (
-        <div>
-          <Modal
-            show
-            onHide={() => onHide(false)}
-            bsSize="large"
-            backdrop="static"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                {title}
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <div id="div-modal-body" style={{ maxHeight: 'calc(100vh - 300px)', overflow: 'auto' }}>
-                {renderComments(comments, submitter)}
-                <br />
-                Review Summary
-                <FormControl
-                  componentClass="textarea"
-                  style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
-                  defaultValue={summary || ''}
-                  readOnly={!isEditable || reviewLevel === 2}
-                  disabled={!isEditable || reviewLevel === 2}
-                  inputRef={(m) => { this.summaryInput = m; }}
-                />
-                <br />
-                {submitter} Summary
-                <FormControl
-                  componentClass="textarea"
-                  style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
-                  defaultValue={feedback || ''}
-                  readOnly={!isEditable || reviewLevel === 3}
-                  disabled={!isEditable || reviewLevel === 3}
-                  inputRef={(m) => { this.feedbackInput = m; }}
-                />
-              </div>
-              <br />
-              <ButtonToolbar>
-                <Button
-                  bsStyle="warning"
-                  onClick={() => onHide(false)}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  disabled={!isEditable}
-                  onClick={() =>
-                    onSubmit(
-                      elementId,
-                      comments,
-                      this.summaryInput.value,
-                      this.feedbackInput.value,
-                      action
-                    )
-                  }
-                > {title}
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoReviewModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  action: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-  comments: PropTypes.object,
-  summary: PropTypes.string,
-  feedback: PropTypes.string,
-  state: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  submitter: PropTypes.string,
-  onSubmit: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoReviewModal.defaultProps = {
-  show: false,
-  reviewLevel: 0,
-  summary: '',
-  feedback: '',
-  submitter: '',
-  state: ''
-};
diff --git a/app/assets/javascripts/components/common/SelectionField.js b/app/assets/javascripts/components/common/SelectionField.js
deleted file mode 100644
index 0637dc06a..000000000
--- a/app/assets/javascripts/components/common/SelectionField.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {
-  FormGroup,
-  ControlLabel,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import Select from 'react-select';
-
-const SelectionField = (props) => {
-  const label = props.label && props.label !== '' ?
-    <ControlLabel>{props.label}</ControlLabel> : '';
-  if (props.isCreatable) {
-    return (
-      <FormGroup>
-        {label}
-        <Select.Creatable
-          name={`select-${uuid.v4()}`}
-          options={props.options}
-          placeholder={props.placeholder}
-          multi={false}
-          isClearable
-          value={props.value}
-          onChange={event => props.onChange(props.field, event)}
-          promptTextCreator={p => `Create new ${p} ${props.label}`}
-        />
-      </FormGroup>
-    );
-  }
-  return (
-    <FormGroup>
-      {label}
-      <Select
-        name={`select-${uuid.v4()}`}
-        options={props.options}
-        placeholder={props.placeholder}
-        multi={false}
-        isClearable
-        value={props.value}
-        onChange={event => props.onChange(props.field, event)}
-      />
-    </FormGroup>
-  );
-};
-
-SelectionField.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.shape).isRequired,
-  value: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  isCreatable: PropTypes.bool
-};
-
-SelectionField.defaultProps = {
-  label: '',
-  placeholder: 'Please select...',
-  isCreatable: false
-};
-
-export default SelectionField;
diff --git a/app/assets/javascripts/components/fetchers/ArticleFetcher.js b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
deleted file mode 100644
index 4c8d151e7..000000000
--- a/app/assets/javascripts/components/fetchers/ArticleFetcher.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ArticleFetcher {
-  static initial() {
-    const promise = fetch('/api/v1/public/article_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdate(params) {
-    const promise = fetch('/api/v1/articles/create_or_update/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static delete(params) {
-    const promise = fetch(`/api/v1/articles/${params.key}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static initialHowTo() {
-    const promise = fetch('/api/v1/public/howto_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdateHowTo(params) {
-    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static deleteHowTo(params) {
-    const promise = fetch('/api/v1/articles/delete_howto', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static updateEditorImage(file, editorType) {
-    const data = new FormData();
-    data.append('file[]', file.file, file.name);
-    data.append('editor_type', editorType);
-    const promise = fetch('/api/v1/articles/editor_image', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-}
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
deleted file mode 100644
index 56c71c556..000000000
--- a/app/assets/javascripts/components/fetchers/PublicFetcher.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import 'whatwg-fetch'
-import _ from 'lodash'
-import Molecule from '../models/Molecule';
-import Reaction from '../models/Reaction';
-
-export default class PublicFetcher {
-  static fetchPublicMolecules(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
-
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        molecules: json.molecules.map(m => new Molecule(m)),
-        page: parseInt(response.headers.get('X-Page')),
-        pages: parseInt(response.headers.get('X-Total-Pages')),
-        perPage: parseInt(response.headers.get('X-Per-Page'))
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchPublicReactions(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const schemeOnly = params.schemeOnly || false;
-    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
-
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        reactions: json.reactions.map(m => new Reaction(m)),
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchAdvancedValues(advType, name) {
-    return fetch(`/api/v1/public/find_adv_valuess.json?name=${name}&adv_type=${advType}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicMolecules(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
-        page: json.publicMolecules.page,
-        totalElements: json.publicMolecules.totalElements,
-        perPage: json.publicMolecules.perPage
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicReactions(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
-        page: json.publicReactions.page,
-        totalElements: json.publicReactions.totalElements,
-        perPage: json.publicReactions.perPage
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublished() {
-    const api = '/api/v1/public/last_published.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublishedSample() {
-    const api = '/api/v1/public/last_published_sample.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDataset(id) {
-    const api = `/api/v1/public/dataset.json?id=${id}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
-    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
-    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReaction(id) {
-    const api = `/api/v1/public/reaction.json?id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static queryPid(params) {
-    const api = `/api/v1/public/pid/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id: params.id
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static queryInchikey(params) {
-    const api = `/api/v1/public/inchikey/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          inchikey: params.inchikey,
-          type: params.type,
-          version: params.version
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static selectPublicCollection() {
-    return fetch(
-      '/api/v1/public/collection.json',
-      { credentials: 'same-origin' }
-    ).then((response) => { return response.json(); })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static publishedStatics() {
-    const api = '/api/v1/public/published_statics';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then((response) => {
-      return response.json();
-    })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static affiliations(type) {
-    const api = `/api/v1/public/affiliations/${type}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
deleted file mode 100644
index 0af446a60..000000000
--- a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
+++ /dev/null
@@ -1,382 +0,0 @@
-import 'whatwg-fetch';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import NotificationActions from '../actions/NotificationActions';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray()
-    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    .map(x => x.id)
-);
-
-export default class RepositoryFetcher {
-  static generateEmbargoAccount(id) {
-    const api = '/api/v1/repository/embargo/account';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static releaseEmbargo(id) {
-    const api = '/api/v1/repository/embargo/release';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static deleteEmbargo(id) {
-    const api = '/api/v1/repository/embargo/delete';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static moveEmbargo(id, newEmbargo, element) {
-    const api = '/api/v1/repository/embargo/move';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static reviewPublish(element) {
-    const { id, type } = element;
-    return fetch('/api/v1/repository/reviewing/submit', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .then((json) => {
-        if (typeof json.reaction !== 'undefined') {
-          json.reaction.can_publish = false;
-          json.reaction.can_update = false;
-          return new Reaction(json.reaction);
-        } else if (type === 'sample') {
-          json.sample.can_publish = false;
-          json.sample.can_update = false;
-          return new Sample(json.sample);
-        }
-        return null;
-    })
-    .catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishSample(params, option = null) {
-    const { sample, coauthors, refs, embargo, license, addMe } = params;
-    const analysesIds = AnalysisIdstoPublish(sample);
-    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        sampleId: sample.id,
-        analysesIds,
-        coauthors,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish sample fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_sample_error'
-        };
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.sample.can_publish = true;
-        json.sample.can_update = true;
-      }
-      return new Sample(json.sample);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishReactionScheme(params) {
-    const {
-      reaction, coauthors, embargo, license, addMe, schemeDesc
-    } = params;
-    return fetch('/api/v1/repository/publishReactionScheme', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        temperature: reaction.temperature,
-        duration: reaction.durationDisplay,
-        products: reaction.products,
-        schemeDesc,
-        coauthors,
-        embargo,
-        license,
-        addMe
-      })
-    })
-      .then(response => (response.json()))
-      .then((json) => {
-        if (json.error) {
-          const notification = {
-            title: 'Publish reaction scheme fail',
-            message: `Error: ${json.error}`,
-            level: 'error',
-            dismissible: 'button',
-            autoDismiss: 6,
-            position: 'tr',
-            uid: 'publish_reaction_error'
-          };
-          NotificationActions.add(notification);
-          return null;
-        }
-        return new Reaction(json.reaction);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static publishReaction(params, option = null) {
-    const { reaction, coauthors, refs, embargo, license, isFullyPublish, addMe } = params;
-    if (!isFullyPublish) return this.publishReactionScheme(params);
-    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(reaction)
-    )
-    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        analysesIds,
-        coauthors,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish reaction fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_reaction_error'
-        };
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.reaction.can_publish = true;
-        json.reaction.can_update = true;
-      }
-      return new Reaction(json.reaction);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchEmbargoCollections() {
-    const api = '/api/v1/repository/embargo_list.json';
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElements(id) {
-    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReviewElements(type, state, page, perPage) {
-    const api = `/api/v1/repository/list.json?type=${type}&state=${state}&page=${page}&per_page=${perPage}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        elements: json.elements,
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
-        selectType: type,
-        selectState: state
-      })))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElement(type, id) {
-    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReaction(id, isPublic) {
-    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchSample(id, isPublic) {
-    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static saveComments(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comments', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static updateComment(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  static repoReviewPublish(id, type, comments, summary, feedback, action) {
-    let api = '';
-    if (action === 'Comments') {
-      api = '/api/v1/repository/reviewing/comments';
-    } else if (action === 'Accept') {
-      api = '/api/v1/repository/reviewing/accepted';
-    } else if (action === 'Review') {
-      api = '/api/v1/repository/reviewing/reviewed';
-    } else if (action === 'Submit') {
-      api = '/api/v1/repository/reviewing/submit';
-    } else if (action === 'Decline') {
-      api = '/api/v1/repository/reviewing/declined';
-    } else {
-      // return;
-    }
-
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id, type, comments, summary, feedback
-      })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static previewMetadata(id, type) {
-    return fetch('/api/v1/repository/metadata/preview', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static zipPreviewMetadata(id, type) {
-    const currentTime = Math.floor(Date.now() / 1000);
-    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
-    return fetch('/api/v1/repository/metadata/preview_zip', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then((response) => {
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/assets/javascripts/components/report/SectionDoiList.js b/app/assets/javascripts/components/report/SectionDoiList.js
deleted file mode 100644
index 283a60f82..000000000
--- a/app/assets/javascripts/components/report/SectionDoiList.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import ReportActions from '../actions/ReportActions';
-import ReportStore from '../stores/ReportStore';
-import { UserSerial } from '../utils/ReportHelper';
-import ReportsFetcher from '../fetchers/ReportsFetcher';
-
-
-const svgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-export default class SectionDoiList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      objs: props.objs,
-      molSerials: props.molSerials,
-      dois: []
-    };
-
-    this.initGetDoi = this.initGetDoi.bind(this);
-  }
-  componentDidMount() {
-    this.initGetDoi();
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (nextProps.objs && nextProps.objs.length > 0) {
-      if (this.state.objs.length !== nextProps.objs.length) {
-        this.setState({ objs: nextProps.objs });
-        this.initGetDoi();
-      }
-    }
-    return true;
-  }
-
-  initGetDoi() {
-    ReportsFetcher.getDois(this.props.objs)
-      .then((result) => {
-        this.setState({
-          dois: result.dois
-        })
-      });
-  }
-
-  render() {
-    const { dois } = this.state;
-    let doiTbl = <span />
-    if (dois && dois.length > 0) {
-      doiTbl = dois.map((e) => {
-        let ds = <div />;
-        if (typeof (e.dois) !== 'undefined' && e.dois && e.dois.length > 0) {
-          ds = e.dois.map(d => d == null ? <div/> : (<div>{d}<br /></div>) )
-        }
-        return (
-          <tr key={e.element_id}>
-            <td style={{ width: '30%' }}>
-              <div>
-                <SVG src={svgPath(e.svg, e.element_type)} className="molecule-mid" key={e.svg} />
-              </div>
-            </td>
-            <td style={{ width: '70%' }}>{ds}</td>
-          </tr>
-        )
-      });
-    }
-    return (
-      <Table striped bordered hover>
-        <thead>
-          <tr>
-            <th width="30%">SVG</th>
-            <th width="70%">DOI</th>
-          </tr>
-        </thead>
-        <tbody>
-          { doiTbl }
-        </tbody>
-      </Table>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
deleted file mode 100644
index b9a612a9f..000000000
--- a/app/assets/javascripts/components/stores/PublicStore.js
+++ /dev/null
@@ -1,425 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import PublicActions from '../actions/PublicActions';
-import SearchActions from '../actions/ElementActions';
-import UIActions from '../actions/UIActions';
-
-class PublicStore {
-  constructor() {
-    this.molecules = [];
-    this.reactions = [];
-    this.page = 1;
-    this.pages = 1;
-    this.perPage = 10;
-    this.selectType;
-    this.selectState;
-    this.selectEmbargoId;
-    this.publishedStatics = [];
-    this.lastPublished;
-    this.lastPublishedSample;
-    this.guestPage = "";
-    this.currentElement = null;
-    this.queryId = -1;
-    this.news = {};
-    this.articles = [];
-    this.howto = {};
-    this.howtos = [];
-    this.bundles = [];
-
-    this.bindListeners({
-      handleGetMolecules: PublicActions.getMolecules,
-      handleGetReactions: PublicActions.getReactions,
-      handleSearchMolecules: PublicActions.getSearchMolecules,
-      handleSearchReactions: PublicActions.getSearchReactions,
-      handlePublishedStatics: PublicActions.publishedStatics,
-      handleLastPublished: PublicActions.lastPublished,
-      handleLastPublishedSample: PublicActions.lastPublishedSample,
-      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
-      handleDisplayDataset: PublicActions.displayDataset,
-      handleDisplayMolecule: PublicActions.displayMolecule,
-      handleDisplayReaction: PublicActions.displayReaction,
-      handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
-      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
-      handleClose: PublicActions.close,
-      handleArticles: PublicActions.articles,
-      handleEditArticle: PublicActions.editArticle,
-      handleDisplayArticle: PublicActions.displayArticle,
-      handleHowTos: PublicActions.howtos,
-      handleEditHowTo: PublicActions.editHowTo,
-      handleDisplayHowTo: PublicActions.displayHowTo,
-      handleGetElements: PublicActions.getElements,
-      handleGetEmbargoElements: PublicActions.getEmbargoElements,
-      handleDisplayReviewReaction: PublicActions.displayReviewReaction,
-      handleDisplayReviewSample: PublicActions.displayReviewSample,
-      handelReviewPublish: PublicActions.reviewPublish,
-      handelUpdateComment: PublicActions.updateComment,
-      handleFetchBundles: PublicActions.fetchEmbargoBundle,
-      handleDisplayEmbargoElement: PublicActions.displayReviewEmbargo,
-      handleEmbargoRelease: [PublicActions.releaseEmbargo, PublicActions.deleteEmbargo],
-      handleEmbargoMove: PublicActions.moveEmbargo,
-    });
-  }
-
-
-  handleClose({ deleteEl }) {
-    this.setState({
-      currentElement: null
-    });
-    if (this.guestPage === 'embargo') {
-      Aviator.navigate('/embargo', { silent: true });
-    } else if (this.guestPage === 'review') {
-      Aviator.navigate('/review', { silent: true });
-    } else {
-      Aviator.navigate('/publications', { silent: true });
-    }
-  }
-
-  handleClearSearchSelection(){
-    PublicActions.getMolecules.defer();
-  }
-
-  handleGetMolecules(results) {
-    const { molecules, page, pages, perPage } = results;
-    this.setState({ molecules, page, pages, perPage });
-  }
-
-  handleGetReactions(results) {
-    const { reactions, page, pages, perPage } = results;
-    this.setState({ reactions, page, pages, perPage });
-  }
-
-  handleSearchMolecules(results) {
-    const { molecules, page, perPage, totalElements } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      molecules, page, pages, perPage
-    });
-  }
-
-  handleSearchReactions(results) {
-    const {
-      reactions, page, perPage, totalElements
-    } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      reactions, page, pages, perPage
-    });
-  }
-
-  handlePublishedStatics(publishedStatics) {
-    if (publishedStatics) {
-      this.setState({ publishedStatics });
-    }
-  }
-
-  handleLastPublished(lastPublished) {
-    if (lastPublished) {
-      this.setState({ lastPublished });
-    }
-  }
-
-  handleLastPublishedSample(lastPublishedSample){
-    if (lastPublishedSample) {
-      this.setState({ lastPublishedSample });
-    }
-  }
-
-  handleOpenRepositoryPage(page) {
-    this.setState({ guestPage: page, currentElement: null });
-  }
-
-  handleDisplayDataset(result) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'dataset',
-      queryId: result.id,
-      currentElement: result.dataset
-    });
-    Aviator.navigate(`/publications/datasets/${result.id}`,
-      { silent: true });
-  }
-
-  handleDisplayMolecule(moleculeList) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'molecule',
-      queryId: moleculeList.id,
-      currentElement: moleculeList.moleculeData
-    });
-    Aviator.navigate(`/publications/molecules/${moleculeList.id}`, { silent: true });
-  }
-
-  handleDisplayReaction(reactionList) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'reaction',
-      queryId: reactionList.id,
-      currentElement: reactionList.reactionData
-    });
-    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
-  }
-
-  handleReceiveSearchresult(result) {
-    this.setState({ ...result.publicMolecules });
-  }
-
-  handleArticles(result) {
-    this.setState({
-      guestPage: 'newsroom',
-      articles: result.data
-    });
-  }
-
-  handleEditArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    news.article = news.article ? news.article : [];
-    this.setState({
-      guestPage: 'newseditor',
-      news,
-    });
-  }
-
-  handleDisplayArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    this.setState({
-      guestPage: 'newsreader',
-      news,
-    });
-  }
-
-  handleHowTos(result) {
-    this.setState({
-      guestPage: 'howto',
-      howtos: result.data
-    });
-  }
-
-  handleEditHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    howto.article = howto.article ? howto.article : [];
-    this.setState({
-      guestPage: 'howtoeditor',
-      howto,
-    });
-  }
-
-  handleDisplayHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    this.setState({
-      guestPage: 'howtoreader',
-      howto,
-    });
-  }
-
-  handleGetElements(results) {
-    const { elements, page, perPage, pages, selectType, selectState } = results;
-    this.setState({ elements, page, perPage, pages, selectType, selectState });
-  }
-
-  handleGetEmbargoElements(results) {
-    const { elements, current_user, embargo_id } = results;
-    this.setState({
-      selectEmbargoId: embargo_id,
-      elements,
-      currentElement: null,
-      currentUser: current_user
-    });
-  }
-
-  handelUpdateComment(result) {
-    this.setState({ commentInfo: result.comments });
-  }
-
-  handelReviewPublish(results) {
-    let newState = '';
-    switch (results.action) {
-      case 'Submit':
-        newState = 'pending';
-        break;
-      case 'Review':
-        newState = 'reviewed';
-        break;
-      case 'Accept':
-        newState = 'completed';
-        break;
-      case 'Reject':
-        newState = 'rejected';
-        break;
-      default:
-        newState = 'pending';
-    }
-
-    if (results.action == 'Comments') {
-      this.setState({
-        commentInfo: results.comments,
-        summaryInfo: results.summary,
-        feedbackInfo: results.feedback
-      });
-      } else {
-      this.setState({
-        pubState: newState,
-        commentInfo: results.comments,
-        summaryInfo: results.summary,
-        feedbackInfo: results.feedback
-      });
-      }
-
-    PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.page, this.perPage);
-  }
-
-  handleDisplayReviewReaction(result) {
-    let comments = {};
-    let summary = '';
-    let feedback = '';
-    let pubState = '';
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-      if (result.element && result.element.reaction &&
-        result.element.reaction.publication) {
-        const { publication } = result.element.reaction;
-        pubState = publication.state;
-
-        if (publication.review) {
-          const pr = publication.review;
-          comments = pr.comments ? pr.comments : {};
-          summary = pr.summary ? pr.summary : '';
-          feedback = pr.feedback ? pr.feedback : '';
-        }
-      }
-
-      this.setState({
-        guestPage: 'review',
-        elementType: 'reaction',
-        queryId: result.id,
-        currentElement: result.element,
-        commentInfo: comments,
-        summaryInfo: summary,
-        feedbackInfo: feedback,
-        submitter: result.element.pub_name,
-        reviewLevel: result.element.reviewLevel,
-        pubState
-      });
-      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
-    }
-  }
-
-  handleDisplayReviewSample(result) {
-    let comments = {};
-    let summary = '';
-    let feedback = '';
-    let pubState = '';
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-      if (result.element &&
-        result.element.publication) {
-        const { publication } = result.element;
-        pubState = publication.state;
-
-        if (publication.review) {
-          const pr = publication.review;
-          comments = pr.comments ? pr.comments : {};
-          summary = pr.summary ? pr.summary : '';
-          feedback = pr.feedback ? pr.feedback : '';
-        }
-      }
-      this.setState({
-        guestPage: 'review',
-        elementType: 'sample',
-        queryId: result.id,
-        currentElement: result.element,
-        commentInfo: comments,
-        summaryInfo: summary,
-        feedbackInfo: feedback,
-        submitter: result.element.pub_name,
-        reviewLevel: result.element.reviewLevel,
-        pubState
-      });
-      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
-    }
-  }
-
-  handleFetchBundles(result) {
-    const cols = result.repository;
-    const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push({ value: col.id, name: col.label, label: col.label });
-      });
-      this.setState({
-        bundles, current_user, elements: [], currentElement: null
-      });
-    } else {
-      this.setState({
-        bundles: [], current_user, elements: [], currentElement: null
-      });
-    }
-  }
-
-  handleDisplayEmbargoElement(result) {
-    let comments = {};
-    let summary = '';
-    let feedback = '';
-    let pubState = '';
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home/');
-    } else {
-      if (result.element &&
-        result.element.publication) {
-        const { publication } = result.element;
-        pubState = publication.state;
-
-        if (publication.review) {
-          const pr = publication.review;
-          comments = pr.comments ? pr.comments : {};
-          summary = pr.summary ? pr.summary : '';
-          feedback = pr.feedback ? pr.feedback : '';
-        }
-      }
-
-      const elementType = (result.element.sample ? 'sample' : 'reaction');
-
-      this.setState({
-        guestPage: 'embargo',
-        elementType,
-        queryId: result.id,
-        currentElement: result.element,
-        commentInfo: comments,
-        summaryInfo: summary,
-        feedbackInfo: feedback,
-        pubState,
-        reviewLevel: result.element.reviewLevel
-      });
-      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
-    }
-  }
-
-  handleEmbargoRelease(result) {
-    PublicActions.fetchEmbargoBundle();
-  }
-
-  handleEmbargoMove(results) {
-    const { col_id, is_new_embargo, new_embargo, message } = results.result;
-    if (is_new_embargo === true) {
-      this.bundles.push({value: new_embargo.id, name: new_embargo.label, label: new_embargo.label });
-    }
-    alert(message);
-    PublicActions.getEmbargoElements(col_id);
-  }
-}
-
-export default alt.createStore(PublicStore, 'PublicStore')
diff --git a/app/assets/javascripts/components/users/AuthorModal.js b/app/assets/javascripts/components/users/AuthorModal.js
deleted file mode 100644
index 8ce17612c..000000000
--- a/app/assets/javascripts/components/users/AuthorModal.js
+++ /dev/null
@@ -1,516 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
-import { findIndex, filter } from 'lodash';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import SelectionField from '../common/SelectionField';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
-
-const sortList = data => data.sort((a, b) => a.name.localeCompare(b.name));
-const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
-const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation</Tooltip>;
-const addAffTooltip = <Tooltip id="addAff_tooltip">Add new affiliation</Tooltip>;
-
-const lineAff = (g, aff, onDeleteAff, handleInputChange) => {
-
-  let removeBtn = '';
-  if (g.type === 'Collaborator') {
-    removeBtn = (
-      <OverlayTrigger placement="right" overlay={removeAffTooltip} >
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          onClick={() => onDeleteAff(aff, g)}
-        >
-          <i className="fa fa-times" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-
-  return (
-    <tr>
-      <td width="30%">{aff.department}</td>
-      <td width="30%">{aff.organization}</td>
-      <td width="30%">{aff.country}</td>
-      <td width="10%">
-        { removeBtn }
-      </td>
-    </tr>
-  );
-}
-
-export default class AuthorModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      countries: [],
-      organizations: [],
-      departments: [],
-      authors: [],
-      users: [],
-      fields: {},
-      showNewUser: false
-    };
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.findUsers = this.findUsers.bind(this);
-    this.handleAddUser = this.handleAddUser.bind(this);
-    this.handleHide = this.handleHide.bind(this);
-    this.onAddAff = this.onAddAff.bind(this);
-    this.onDeleteAff = this.onDeleteAff.bind(this);
-  }
-
-  componentDidMount() {
-    UsersFetcher.fetchMyCollaborations()
-      .then((result) => {
-        if (result.authors && result.authors.length > 0) {
-          this.setState({ authors: sortList(result.authors) });
-        } else {
-          this.setState({ authors: [], users: [], fields: {}, showNewUser: false });
-        }
-      });
-    PublicFetcher.affiliations('countries').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
-      this.setState({ countries: affOption });
-    });
-    PublicFetcher.affiliations('organizations').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
-      this.setState({ organizations: affOption });
-    });
-    PublicFetcher.affiliations('departments').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a })).filter(a => a.value && a.value.length > 1);
-      this.setState({ departments: affOption });
-    });
-  }
-
-  componentDidUpdate() {
-  }
-
-  handleHide() {
-    this.setState({ users: [], fields: {}, showNewUser: false });
-    this.props.onHide();
-  }
-
-  // inputs of create new group
-  handleInputChange(type, ev) {
-    let { fields } = this.state;
-    switch (type) {
-      case 'firstName':
-        fields.firstName = ev.currentTarget.value;
-        break;
-      case 'lastName':
-        fields.lastName = ev.currentTarget.value;
-        break;
-      case 'abbr':
-        fields.abbr = ev.currentTarget.value;
-        break;
-      case 'country':
-        fields.country = ev && ev.value;
-        break;
-      case 'organization':
-        fields.organization = ev && ev.value;
-        break;
-      case 'department':
-        fields.department = ev && ev.value;
-        break;
-      case 'search_key':
-        fields.search_key = ev.currentTarget.value;
-        break;
-      default:
-        if (typeof fields === 'undefined') {
-          fields = {};
-        }
-        fields[type] = ev && ev.value;
-    }
-    this.setState({ fields });
-  }
-
-  findUsers() {
-    const { fields } = this.state;
-    if ((!fields.firstName || fields.firstName.trim() === '') && (!fields.lastName || fields.lastName.trim() === '')) {
-      alert('Please input First Name or Last Name');
-      return false;
-    }
-    UsersFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '')
-      .then((result) => {
-        if (result.users && result.users.length > 0) {
-          this.setState({
-            users: sortList(result.users),
-            showNewUser: false,
-            fields: {}
-          });
-        } else {
-          this.setState({ showNewUser: true, users: [] });
-        }
-      });
-    return true;
-  }
-
-  handleAddUser(u) {
-    const { authors } = this.state;
-    UsersFetcher.AddMyCollaboration({ id: u.id })
-      .then((result) => {
-        authors.push(result.user);
-        this.setState({
-          authors: sortList(authors), users: [], fields: {}, showNewUser: false
-        });
-      });
-  }
-
-  createAdd() {
-    const { fields, authors } = this.state;
-
-    const nilFields = [];
-    if (!fields.firstName || fields.firstName.trim() === '') {
-      nilFields.push('First Name');
-    }
-    if (!fields.lastName || fields.lastName.trim() === '') {
-      nilFields.push('Last Name');
-    }
-    if (!fields.country || fields.country.trim() === '') {
-      nilFields.push('Country');
-    }
-    if (!fields.organization || fields.organization.trim() === '') {
-      nilFields.push('Organization');
-    }
-    if (!fields.department || fields.department.trim() === '') {
-      nilFields.push('Department');
-    }
-    if (nilFields.length > 0) {
-      alert(`Please input ${nilFields.join()}!`);
-      return false;
-    }
-
-    UsersFetcher.createAddMyCollaboration(fields)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          authors.push(result.user);
-          this.setState({
-            authors: sortList(authors), users: [], fields: {}
-          });
-        }
-      });
-    return true;
-  }
-
-  handleDeleteCollaborator(c) {
-    const { authors } = this.state;
-    UsersFetcher.deleteCollaboration({ id: c.id })
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          this.setState({
-            authors: filter(authors, o => o.id !== c.id)
-          });
-        }
-      });
-  }
-
-  onAddAff(g) {
-    const { authors, fields } = this.state;
-    const department = fields[`${g.id}@line_department`];
-    const organization = fields[`${g.id}@line_organization`];
-    const country = fields[`${g.id}@line_country`];
-    const params = { id: g.id, department, organization, country };
-
-
-    UsersFetcher.addCollaboratorAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          const idx = findIndex(authors, o => o.id === result.user.id);
-          authors.splice(idx, 1, result.user);
-          fields[`${g.id}@line_department`] = '';
-          fields[`${g.id}@line_organization`] = '';
-          fields[`${g.id}@line_country`] = '';
-          this.setState({ authors, fields });
-        }
-      });
-  }
-
-  onDeleteAff(a, g) {
-    const { authors } = this.state;
-
-    const params = { user_id: g.id, aff_id: a.id };
-
-    UsersFetcher.deleteCollaboratorAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          const idx = findIndex(authors, o => o.id === result.user.id);
-          authors.splice(idx, 1, result.user);
-
-          this.setState({ authors });
-        }
-      });
-  }
-
-  render() {
-    const { authors, users, showNewUser } = this.state;
-
-    const modalStyle = {
-      overflowY: 'auto',
-    };
-
-    let tbody = '';
-
-    const searchTbody = (users || []).map(g => (
-      <tbody key={`tbody_${g.id}`}>
-        <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-          <td>
-            <OverlayTrigger placement="right" overlay={addUserTooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle="warning"
-                onClick={() => this.handleAddUser(g)}
-              >
-                <i className="fa fa-floppy-o" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-            &nbsp;
-          </td>
-          <td>{g.name}</td>
-          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].department : ''}</td>
-          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].organization : ''}</td>
-          <td>{g.affiliations && g.affiliations.length > 0 ? g.affiliations[0].country : ''}</td>
-        </tr>
-      </tbody>
-    ));
-
-    if (Object.keys(authors).length <= 0) {
-      tbody = '';
-    } else {
-      tbody = authors.map(g => (
-        <tbody key={`tbody_${g.id}`}>
-          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-            <td>
-              <DeleteConfirmBtn
-                label={g.name}
-                onClickYes={() => this.handleDeleteCollaborator(g)}
-              />
-              &nbsp;
-            </td>
-            <td>{g.name}</td>
-            <td>
-              <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                <tbody>
-                  {
-                    g.affiliations && g.affiliations.length > 0 ?
-                      g.affiliations.map(a =>
-                      lineAff(g, a, this.onDeleteAff, this.handleInputChange)) : ' '
-                  }
-                  {
-                    g.type === 'Collaborator' ?
-                      (
-                        <tr>
-                          <td width="30%">
-                            <SelectionField
-                              options={this.state.departments}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || ''}
-                              field={`${g.id}@line_department`}
-                              placeholder="e.g. Institute of Organic Chemistry"
-                              onChange={this.handleInputChange}
-                              isCreatable
-                            />
-                          </td>
-                          <td width="30%">
-                            <SelectionField
-                              options={this.state.organizations}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || ''}
-                              field={`${g.id}@line_organization`}
-                              placeholder="e.g. Karlsruhe Institute of Technology"
-                              onChange={this.handleInputChange}
-                              isCreatable
-                            />
-                          </td>
-                          <td width="30%">
-                            <SelectionField
-                              options={this.state.countries}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_country`]) || ''}
-                              field={`${g.id}@line_country`}
-                              placeholder="e.g. Germany"
-                              onChange={this.handleInputChange}
-                            />
-                          </td>
-                          <td width="10%">
-                            <OverlayTrigger placement="right" overlay={addAffTooltip} >
-                              <Button
-                                bsSize="xsmall"
-                                bsStyle="success"
-                                onClick={() => this.onAddAff(g)}
-                              >
-                                <i className="fa fa-plus" aria-hidden="true" />
-                              </Button>
-                            </OverlayTrigger>
-                          </td>
-                        </tr>
-                      ) : ' '
-                  }
-                </tbody>
-              </Table>
-            </td>
-          </tr>
-        </tbody>
-      ));
-    }
-
-    let newAff = '';
-    if (showNewUser === true) {
-      newAff = (
-        <Form>
-          <SelectionField
-            label="Country"
-            options={this.state.countries}
-            value={this.state.fields.country || ''}
-            field="country"
-            placeholder="e.g. Germany"
-            onChange={this.handleInputChange}
-          />
-          <SelectionField
-            label="Organization"
-            options={this.state.organizations}
-            value={this.state.fields.organization || ''}
-            field="organization"
-            placeholder="e.g. Karlsruhe Institute of Technology"
-            onChange={this.handleInputChange}
-            isCreatable
-          />
-          <SelectionField
-            label="Department"
-            options={this.state.departments}
-            value={this.state.fields.department || ''}
-            field="department"
-            placeholder="e.g. Institute of Organic Chemistry"
-            onChange={this.handleInputChange}
-            isCreatable
-          />
-          <Button bsSize="small" bsStyle="warning" onClick={() => this.createAdd()}>
-            <i className="fa fa-file" aria-hidden="true" />&nbsp;
-            Create and Save to my collaboration
-          </Button>
-        </Form>
-      );
-    }
-
-    const newUserPanel = (
-      <Panel bsStyle="success">
-        <Panel.Heading>
-          <Panel.Title>
-            Add new collaborator
-          </Panel.Title>
-        </Panel.Heading>
-        <Panel.Body>
-          <Col md={4}>
-            <Form>
-              <FormGroup controlId="formInlineName">
-                <ControlLabel>First Name</ControlLabel>
-                <FormControl
-                  type="text"
-                  placeholder="eg: AK"
-                  value={this.state.fields.firstName || ''}
-                  onChange={e => this.handleInputChange('firstName', e)}
-                />
-              </FormGroup>
-              <FormGroup controlId="formInlineName">
-                <ControlLabel>Last Name</ControlLabel>
-                <FormControl
-                  type="text"
-                  placeholder="J. Moriarty"
-                  value={this.state.fields.lastName || ''}
-                  onChange={e => this.handleInputChange('lastName', e)}
-                />
-              </FormGroup>
-              <FormGroup controlId="formInlineNameAbbr">
-                <Button bsSize="small" bsStyle="success" onClick={() => this.findUsers()}>
-                  <i className="fa fa-search" aria-hidden="true" />&nbsp;
-                  Find
-                </Button>
-              </FormGroup>
-            </Form>
-          </Col>
-          <Col md={8}>
-            {newAff}
-          </Col>
-        </Panel.Body>
-      </Panel>
-    );
-
-    return (
-      <Modal
-        show={this.props.show}
-        dialogClassName="importChemDrawModal"
-        onHide={this.handleHide}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>My Collaboration</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={modalStyle}>
-          <div>
-            { newUserPanel }
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Search Result
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="10%">Action</th>
-                      <th width="20%">Name</th>
-                      <th width="20%">Department</th>
-                      <th width="20%">Organization</th>
-                      <th width="20%">Country</th>
-                    </tr>
-                  </thead>
-                  { searchTbody }
-                </Table>
-              </Panel.Body>
-            </Panel>
-            <Panel bsStyle="info">
-              <Panel.Heading>
-                <Panel.Title>
-                  My Collaboration
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="5%">Action</th>
-                      <th width="20%">Name</th>
-                      <th width="75%">
-                        <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                          <tbody>
-                            <td width="30%">Department</td>
-                            <td width="30%">Organization</td>
-                            <td width="30%">Country</td>
-                            <td width="10%">&nbsp;</td>
-                          </tbody>
-                        </Table>
-                      </th>
-                    </tr>
-                  </thead>
-                  { tbody }
-                </Table>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-AuthorModal.propTypes = {
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
deleted file mode 100644
index 759167573..000000000
--- a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { isNmrPass, isDatasetPass } from '../../libHome/RepoCommon';
-
-const applyPublish = (el) => {
-  const ext = [];
-  el.analysisArray().forEach((ana) => {
-    const a = ana;
-    if (ana.extended_metadata &&
-      (((ana.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((ana.extended_metadata.status || '') === 'Confirmed') && // && // fail if status is not set to Confirmed
-        (isNmrPass(ana, el)) && // fail if NMR check fail
-        (isDatasetPass(ana))
-      )) {
-      if (typeof ana.extended_metadata.publish === 'undefined') {
-        a.extended_metadata.publish = true;
-      }
-    }
-    ext.push(a);
-  });
-  return ext;
-};
-
-const defaultAnalysisPublish = (el) => {
-  const element = el;
-  switch (el.type) {
-    case 'sample': {
-      const ext = applyPublish(element);
-      if (ext.length > 0) {
-        const analyses = element.container.children.find(c => (c && c.container_type === 'analyses'));
-        analyses.children = ext;
-      }
-      break;
-    }
-    case 'reaction': {
-      // reset analysis.publish of products
-      if (typeof el.products !== 'undefined' && el.products.length > 0) {
-        element.products.forEach((p) => {
-          const prodAna = applyPublish(p);
-          if (prodAna.length > 0) {
-            const analyses = p.container.children.find(c => (c && c.container_type === 'analyses'));
-            analyses.children = prodAna;
-          }
-        });
-      }
-      break;
-    }
-    default:
-      break;
-  }
-  return element;
-};
-
-export default defaultAnalysisPublish;
diff --git a/app/assets/javascripts/libHome/ContainerComponent.js b/app/assets/javascripts/libHome/ContainerComponent.js
deleted file mode 100644
index 0c19871fd..000000000
--- a/app/assets/javascripts/libHome/ContainerComponent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, {Component} from 'react';
-import {Col, FormControl,FormGroup, ControlLabel} from 'react-bootstrap';
-import Select from 'react-select'
-import ContainerDatasets from '../components/ContainerDatasets';
-import QuillViewer from '../components/QuillViewer'
-
-import {sampleAnalysesContentSymbol} from '../components/utils/quillToolbarSymbol'
-import {confirmOptions} from '../components/staticDropdownOptions/options';
-
-export default class ContainerComponent extends Component {
-  constructor(props) {
-    super();
-    const {container} = props;
-    this.state = {
-      container
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    });
-  }
-
-
-
-  render() {
-    const {container} = this.state;
-
-    let quill = (
-        <QuillViewer value={container.extended_metadata['content']} />
-      )
-
-
-    return (
-      <div className="small-p">
-        {/* <Col md={4}>
-          <label>Name</label>
-          <FormControl
-            type="text"
-            label="Name"
-            value={container.name || '***'}
-            disabled/>
-        </Col>
-        <Col md={4}>
-          <div style={{marginBottom: 11}}>
-            <label>Type</label>
-            <Select
-              name='kind'
-              multi={false}
-              options={kindOptions}
-              value={container.extended_metadata['kind']}
-              disabled
-
-              />
-          </div>
-        </Col>
-        <Col md={4}>
-          <div style={{marginBottom: 11}}>
-            <label>Status</label>
-            <Select
-              name='status'
-              multi={false}
-              options={confirmOptions}
-              value={container.extended_metadata['status']}
-              disabled
-
-            />
-          </div>
-        </Col> */}
-        {/* <Col md={12}>
-        <FormGroup>
-          <ControlLabel>Content</ControlLabel>
-          {quill}
-        </FormGroup>
-          <FormGroup>
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              label="Description"
-              value={container.description || ''}
-              disabled
-              />
-          </FormGroup>
-        </Col> */}
-        <Col md={12}>
-          <label>Datasets</label>
-          <ContainerDatasets
-            container={container}
-            readOnly
-            disabled
-            onChange={container => this.props.onChange(container)}
-            />
-        </Col>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/NavFooter.js b/app/assets/javascripts/libHome/NavFooter.js
deleted file mode 100644
index a1e4c8073..000000000
--- a/app/assets/javascripts/libHome/NavFooter.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Nav, NavItem } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-
-const NavFooter = () => {
-  return (
-    <Nav justified>
-      <NavItem eventKey="21" role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')}>
-        Home
-      </NavItem>
-      <NavItem eventKey="22" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/publications')}>
-        Publications
-      </NavItem>
-      <NavItem eventKey="23" title="Item" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/about')} >
-        About
-      </NavItem>
-      <NavItem eventKey="24" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/directive')} >
-        Terms of service
-      </NavItem>
-    </Nav>
-  );
-};
-
-export default NavFooter;
diff --git a/app/assets/javascripts/libHome/Navigation.js b/app/assets/javascripts/libHome/Navigation.js
deleted file mode 100644
index 09fbcc1bf..000000000
--- a/app/assets/javascripts/libHome/Navigation.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from 'react';
-import { Nav, Navbar, NavItem, Label } from 'react-bootstrap';
-import UserAuth from '../components/UserAuth';
-import ManagingActions from '../components/managing_actions/ManagingActions';
-import ContextActions from '../components/contextActions/ContextActions';
-import UserStore from '../components/stores/UserStore';
-import UIStore from '../components/stores/UIStore';
-import UserActions from '../components/actions/UserActions';
-import UIActions from '../components/actions/UIActions';
-import ElementActions from '../components/actions/ElementActions';
-import NavNewSession from './NavNewSession';
-import NavHead from './NavHead';
-import DocumentHelper from '../components/utils/DocumentHelper';
-import NavigationModal from '../components/NavigationModal';
-import PublicActions from '../components/actions/PublicActions';
-
-export default class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: null,
-      modalProps: {
-        show: false,
-        title: '',
-        component: '',
-        action: null,
-        listSharedCollections: false,
-      }
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onUIChange = this.onUIChange.bind(this);
-    // this.toggleCollectionTree = this.toggleCollectionTree.bind(this)
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIChange);
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIChange);
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
-  }
-
-  onUIChange(state) {
-    this.setState({
-      modalProps: state.modalParams,
-    });
-  }
-
-  // toggleCollectionTree() {
-  //   this.props.toggleCollectionTree();
-  // }
-
-  token() { return DocumentHelper.getMetaContent("csrf-token") }
-
-  updateModalProps(modalProps) { this.setState({ modalProps }); }
-
-  navHeader() {
-    return (
-      <Navbar.Header className="collec-tree">
-        <Navbar.Text style={{cursor: "pointer"}}>
-          {/* <i  className="fa fa-list" style={{fontStyle: "normal"}}
-              onClick={this.toggleCollectionTree} /> */}
-        </Navbar.Text>
-        <Navbar.Text />
-        <NavHead />
-      </Navbar.Header>
-    )
-  }
-
-  render() {
-    const { modalProps, currentUser } = this.state;
-
-    let userBar = (<span />);
-    if (currentUser) {
-      userBar = (<UserAuth />);
-    } else {
-      userBar = (<NavNewSession authenticityToken={this.token()} />);
-    }
-    // const logo = <img height={50} alt="Chemotion-Repository" src="/images/repo/chemotion_full.svg"/>
-    return (
-      <Navbar fluid className="navbar-custom">
-        <Navbar.Header>
-          <Navbar.Brand>
-            <a role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')} >
-              Chemotion-Repository</a>
-          </Navbar.Brand>
-          <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-          {userBar}
-          <Nav>
-            {currentUser ?
-              <NavItem eventKey={1} href="/mydb" className="white-nav-item">
-                My DB
-              </NavItem>
-              : null }
-            <NavItem eventKey={2} onClick={() => Aviator.navigate('/home/publications')} className="white-nav-item" >
-              Publications
-            </NavItem>
-            { currentUser ?
-              <NavItem eventKey={3} onClick={() => Aviator.navigate('/home/review')} className="white-nav-item" >
-                Review
-              </NavItem> : null
-            }
-            {currentUser ?
-              <NavItem eventKey={6} onClick={() => Aviator.navigate('/home/embargo')} className="white-nav-item" >
-                Embargoed Publications
-              </NavItem> : null
-            }
-            {
-              true ?
-                <NavItem eventKey={4} onClick={() => Aviator.navigate('/home/newsroom')} className="white-nav-item">
-                  Newsroom&nbsp;<i className="fa fa-bullhorn" aria-hidden="true" />
-                </NavItem> : null
-            }
-            {
-              true ?
-                <NavItem eventKey={5} onClick={() => Aviator.navigate('/home/howto')} className="white-nav-item">
-                  How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
-                </NavItem> : null
-            }
-          </Nav>
-        </Navbar.Collapse>
-      </Navbar>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoAbout.js b/app/assets/javascripts/libHome/RepoAbout.js
deleted file mode 100644
index c9acbacd1..000000000
--- a/app/assets/javascripts/libHome/RepoAbout.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-
-const RepoAbout = () => {
-  const bodyStyle = {
-    maxHeight: 'calc(100vh - 262px)',
-    overflowY: 'auto',
-    backgroundColor: '#f5f5f5',
-    borderRadius: '6px',
-    padding: '30px',
-    textAlign: 'center'
-  };
-
-  return (
-    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-      <Col md={3} />
-      <Col md={6}>
-        <Panel style={{ border: 'none' }}>
-          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
-            <CardIcons />
-          </Panel.Heading>
-          <Panel.Body style={bodyStyle}>
-            <CardAbout />
-          </Panel.Body>
-        </Panel>
-      </Col>
-      <Col md={3} />
-    </Row>
-  );
-};
-
-const CardIcons = () =>
-  (
-    <div className="card-icons">
-      <Col md={4}>
-        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/chemotion_full.svg" alt="" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/dfg_logo.png" alt="" />
-      </Col>
-    </div>
-  );
-
-const CardAbout = () =>
-  (
-    <div>
-      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
-      <br />
-      <h1>Brief project description</h1>
-      <div style={{ textAlign: 'justify' }}>
-        <p>This project aims for the development of a freely available
-          infrastructure for research data management through the development
-          of two independent IT systems namely an electronic laboratory notebook
-          (ELN) and a chemistry web repository. With the tools that will be
-          established by our project group it will be possible to integrate
-          modern web-techniques into the routine work of academic researchers,
-           thereby increasing the amount of available data and improving the
-           quality of the information obtained and published.
-        </p>
-        <p>The aim of this project is to make a substantial contribution to
-          securing research results in a cost-effective and simple manner,
-          and to optimally network in particular chemists (initially with each
-            other and in a second step with other disciplines). The new model
-             provides a combination of recording and documentation as well as
-             publication and storage of data sets.
-        </p>
-        <p>The necessary IT structures for modern documentation of
-          research data are developed within the scope of this project,
-          will be summarized in an electronic laboratory notebook (ELN) and will
-           be provided and distributed as OPEN SOURCE. The ELN will be completed
-           by the establishment and hosting of the web-repository, for which a
-           direct connection to the ELN enables a fast and easy transfer of
-           selected research information.
-        </p>
-        <p>Free access and free use by academic researchers is
-          one principle of this project allowing and promoting collaborative
-          work and scientific exchange among scientists.
-        </p>
-      </div>
-      <br />
-      <h3>Imprint</h3>
-      <h4>Karlsruhe Institute of Technology</h4>
-      <h4>Leader of the research group</h4>
-      <p>Prof. Stefan Bräse </p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
-      <p>76131 Karlsruhe </p>
-      <p>Germany</p>
-      <br />
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
-      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
-      <p>76344 Eggenstein-Leopoldshafen</p>
-      <p>Phone: +49 721 608 42903</p>
-      <p>Fax: +49 721 608 48581</p>
-      <br />
-      <p />
-      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
-      <br />
-      <h4>Office Campus North (KIT)</h4>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
-      <p>Hermann-von-Helmholtz-Platz 1</p>
-      <p>76344 Eggenstein-Leopoldshafen </p>
-      <p>Germany</p>
-      <p>Phone: +49 721 608 24697 </p>
-      <br />
-      <h4>Authors</h4>
-      <p>Prof. Stefan Braese</p>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <br />
-      <h3>Copyright Notices</h3>
-      <div style={{ textAlign: 'justify' }}>
-        <p>
-          During the submission process, the submitter of a publication can choose,
-          between several CC licenses, which license to apply to the submitted work.
-          As the result, the content of this repository database
-          (including the submitted publication files) is partly licensed under:
-        </p>
-        <ul>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">
-              <img src="/images/creative_common/cc-by-sa.svg" alt="cc-by-sa-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution-ShareAlike 4.0 International License (default),
-          </li>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
-              <img src="/images/creative_common/cc-by.svg" alt="cc-by-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution 4.0 International License, and
-          </li>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
-              <img src="/images/creative_common/cc-zero.svg" alt="cc-zero" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Universal License
-          </li>
-        </ul>
-        <p>
-          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
-          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
-        </p>
-        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
-        <br />
-      </div>
-
-      <h3>Content</h3>
-      <div style={{ textAlign: 'justify' }} >
-        <p>
-          All texts, pictures and other information published here are subject to
-          copyright. The logo may not be used without the prior consent
-          of the working group.
-          A change of the logo is not permitted. The contents of our website are
-          created with the utmost care. Nevertheless, no guarantee for topicality
-          and completeness can be taken over. The Compound Platform does not
-          assume any responsibility for any web content connected by a link,
-          as this is not its own content.
-        </p>
-      </div>
-    </div>
-  );
-
-export default RepoAbout;
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
deleted file mode 100644
index 4e2657c17..000000000
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ /dev/null
@@ -1,2302 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { replace, startsWith, filter, flatMap, map } from 'lodash';
-import {
-  Button,
-  Checkbox,
-  Col,
-  ControlLabel,
-  Form,
-  FormControl,
-  FormGroup,
-  Grid,
-  InputGroup,
-  Label,
-  OverlayTrigger,
-  Panel,
-  Row,
-  Table,
-  Tooltip,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Clipboard from 'clipboard';
-import moment from 'moment';
-import Select from 'react-select';
-import uuid from 'uuid';
-import ContainerComponent from './ContainerComponent';
-import Formula from '../components/common/Formula';
-import PubchemLabels from '../components/PubchemLabels';
-import QuillViewer from '../components/QuillViewer';
-import { ChemotionTag } from '../components/PublishCommon';
-import Sample from '../components/models/Sample';
-import Reaction from '../components/models/Reaction';
-import PrintCodeButton from '../components/common/PrintCodeButton';
-import { stopBubble } from '../components/utils/DomHelper';
-import RepoContainerDatasets from './RepoContainerDatasets';
-import ImageModal from '../components/common/ImageModal';
-import Utils from '../components/utils/Functions';
-import { hNmrCheckMsg, cNmrCheckMsg } from '../components/utils/ElementUtils';
-import { contentToText } from '../components/utils/quillFormat';
-import { chmoConversions } from '../components/OlsComponent';
-import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
-import InputButtonField from '../components/common/InputButtonField';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import PublicActions from '../components/actions/PublicActions';
-import RepoCommentBtn from '../components/common/RepoCommentBtn';
-
-const ChemotionId = props => (
-  <h5>
-    <b>ID: </b>
-    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
-      {props.type === 'reaction' ? 'CRR' : 'CSR'}-{props.id}
-    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
-  </h5>
-);
-ChemotionId.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
-};
-
-const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
-
-
-const AuthorTitle = (authorIds) => {
-  if (authorIds && authorIds.length > 1) {
-    return 'Authors:';
-  }
-  if (authorIds && authorIds.length === 1) {
-    return 'Author:';
-  }
-  return '';
-}
-
-const NewsroomTemplate = {
-  title: '', content: {}, article: []
-};
-
-const RequiredLabel = (props) => {
-  return (
-    <OverlayTrigger
-      placement={props.placement}
-      overlay={<Tooltip id={uuid.v4()}>This field is required for publication</Tooltip >}
-    >
-      <i className="fa fa-exclamation-circle field_required" aria-hidden="true" />
-    </OverlayTrigger >
-  );
-};
-
-RequiredLabel.propTypes = {
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired
-};
-
-const HomeFeature = (props) => {
-  return (
-    <div className="feature-block">
-      <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
-      <p>
-        {props.intro}
-      </p>
-    </div>
-  );
-};
-
-HomeFeature.propTypes = {
-  fa: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  intro: PropTypes.string.isRequired
-};
-
-const LicenseLegalCode = (cp) => {
-  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-  switch (cp) {
-    case 'CC BY-SA':
-      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-      break;
-    case 'CC BY':
-      presentLicense = 'Creative Commons Attribution 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
-      break;
-    case 'CC0':
-      presentLicense = 'CC0 1.0 Universal';
-      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
-      break;
-    default:
-      break;
-  }
-  return <span><b>{presentLicense}</b>&nbsp;<a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a></span>;
-};
-
-const nmrMsg = (sample, container) => {
-  if (sample.molecule && container.extended_metadata &&
-    (typeof container.extended_metadata.kind === 'undefined' ||
-      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
-    )) {
-    return '';
-  }
-  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
-
-  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
-    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
-  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
-    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
-  }
-  return '';
-};
-
-// the requirements for file types as given
-const isFileTypePass = (analysisType, attachments) => {
-  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
-  const nmrType = ['jcamp', 'dx', 'jdx'];
-  let files = [];
-  switch (analysisType) {
-    case '1H NMR':
-    case chmoConversions.nmr_1h.termId:
-    case '13C NMR':
-    case chmoConversions.nmr_13c.termId:
-    case '15N NMR':
-    case 'NMR':
-    case 'IR':
-    case chmoConversions.ir.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    case 'EA':
-    case chmoConversions.ea.termId:
-    case 'X-Ray':
-    case 'Crystall-Structure':
-    case chmoConversions.crystal_structure.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    default:
-      break;
-  }
-  return true;
-};
-
-// at least one dataset has to be attached
-// in dataset: instrument has to be given
-const isDatasetPass = (analysis) => {
-  const dataset = analysis.children;
-  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
-  if (attachments.length < 1) return false;
-  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
-  if (instruments.length < 1) return false;
-  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
-  if (files.length < 1) return false;
-  return true;
-};
-
-const isNmrPass = (analysis, sample) => {
-  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
-  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
-    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
-    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  }
-  return true;
-};
-
-const DownloadMetadataBtn = (l) => {
-  const contentUrl = `/api/v1/public/metadata/download?type=${l.type}&id=${l.id}`;
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        onClick={() => Utils.downloadFile({
-          contents: contentUrl
-        })}
-      >
-        <i className="fa fa-file-code-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const DownloadDOICsv = (e, a) => {
-  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
-  const dois = [];
-  dois.push(['Reserved DOIs', '']);
-  dois.push(['', '']);
-
-  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
-  a.forEach((an) => {
-    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-  });
-
-  if (e.type === 'reaction') {
-    // product(sample)
-    if (e.products !== null && e.products.length > 0) {
-      e.products.forEach((p) => {
-        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
-        p.analysisArray().forEach((an) => {
-          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-        });
-      });
-    }
-  }
-  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
-};
-
-class EmbargoCom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShow: false
-    };
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  handleEmbargoChange(e) {
-    this.props.onEmbargoChange(e.value);
-  }
-
-  handleLicenseChange(e) {
-    this.props.onLicenseChange(e.value);
-  }
-
-  handleCC0ConsentChange(e, type) {
-    this.props.onCC0ConsentChange(e.target.checked, type);
-  }
-
-  render() {
-    const defaultBundles = [
-      { value: '-1', name: 'no', label: 'No embargo' },
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-    const licenses = [
-      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
-      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
-      { name: 'CC0', value: 'CC0', label: 'CC0' }
-    ];
-
-    const bundles = defaultBundles.concat(this.props.opts);
-    const description = [
-      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
-      'Please use one bundle for data that belongs to the same publication.',
-      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
-    ].join(' ');
-    const { isShow } = this.state;
-    const embargoDesc = isShow ? (
-      <div style={{
-        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
-      }}
-      >
-        <b>Embargo Bundle</b>&#58;&nbsp;{description}
-      </div>
-    ) : (null);
-
-    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
-    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
-    const deed = (
-      <div style={{
-        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
-      }}
-      >
-        {LicenseLegalCode(this.props.selectedLicense)}
-        {
-        this.props.selectedLicense === 'CC0' ?
-          (
-            <div stye={{ width: '100%' }}>
-              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
-                {cc0Consent1}
-              </Checkbox>
-              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
-                {cc0Consent2}
-              </Checkbox>
-            </div>
-          )
-          :
-          (null)
-      }
-      </div>
-    );
-
-    return (
-      <div>
-        <Form horizontal style={{ display: 'flex' }}>
-          <div style={{ width: '20%', textAlign: 'right' }}>
-            <ControlLabel>Choose license&nbsp;</ControlLabel>
-          </div>
-          <div style={{ width: '20%' }}>
-            <Select
-              value={this.props.selectedLicense}
-              onChange={e => this.handleLicenseChange(e)}
-              options={licenses}
-              className="select-assign-collection"
-            />
-          </div>
-          <div style={{ width: '40%', textAlign: 'right' }}>
-            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
-            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
-              <i className="fa fa-question-circle" aria-hidden="true" />
-            </div>&nbsp;
-          </div>
-          <div style={{ width: '40%' }}>
-            <Select
-              value={this.props.selectedValue}
-              onChange={e => this.handleEmbargoChange(e)}
-              options={bundles}
-              className="select-assign-collection"
-            />
-          </div>
-        </Form>
-        {embargoDesc}
-        {deed}
-      </div >
-    );
-  }
-}
-
-EmbargoCom.propTypes = {
-  opts: PropTypes.array,
-  selectedValue: PropTypes.string.isRequired,
-  onEmbargoChange: PropTypes.func.isRequired,
-  selectedLicense: PropTypes.string,
-  onLicenseChange: PropTypes.func.isRequired,
-  onCC0ConsentChange: PropTypes.func.isRequired,
-  cc0Deed: PropTypes.shape({
-    consent1: PropTypes.bool.isRequired,
-    consent2: PropTypes.bool.isRequired
-  })
-};
-
-EmbargoCom.defaultProps = {
-  opts: [],
-  selectedLicense: 'CC BY-SA',
-  cc0Deed: { consent1: false, consent2: false }
-};
-
-const PublishTypeAs = (props) => {
-  return (
-    <div style={{ display: 'inline' }}>
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
-        <i className="fa fa-question-circle" aria-hidden="true" />
-      </OverlayTrigger>&nbsp;
-      <DropdownButtonSelection
-        options={props.options}
-        selected={props.selected}
-        placeholder="Select publication type..."
-        onSelect={e => props.onChange(e)}
-      />
-    </div>
-  );
-};
-
-PublishTypeAs.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string),
-  selected: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-};
-
-PublishTypeAs.defaultProps = {
-  options: [],
-  selected: 'full',
-};
-
-
-const ElStateLabel = (state) => {
-  let stateStyle;
-  switch (state) {
-    case 'reviewed':
-      stateStyle = 'info';
-      break;
-    case 'pending':
-      stateStyle = 'warning';
-      break;
-    case 'accepted':
-      stateStyle = 'success';
-      break;
-    default:
-      stateStyle = 'default';
-  }
-  return <Label bsStyle={stateStyle}>{state}</Label>;
-};
-
-
-const MoveEmbargoedBundle = (element, onMoveClick) => {
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
-      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
-    </OverlayTrigger>
-  );
-};
-
-const ElSubmitTime = (submitAt) => {
-  const time = new Date(submitAt);
-  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
-};
-
-const SvgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) => {
-  if (!e) {
-    return '';
-  }
-  let listClass;
-  if (e.type === 'Reaction') {
-    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  } else {
-    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  }
-  const schemeOnly = (e && e.scheme_only === true) || false;
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => onClick(e.type.toLowerCase(), e.id)}
-    >
-      <td style={{ position: 'relative' }} >
-        <span className="review_element_label">
-          <IconToMyDB isLogin id={e.id} type={e.type.toLowerCase()} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
-        &nbsp;{user !== null && user.type === 'Anonymous' ? '' : MoveEmbargoedBundle(e, onMoveClick)}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const SampleExactMW = (em) => {
-  if (em) {
-    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
-  }
-  return '';
-};
-
-const DateFormatYMDLong = (params) => {
-  const dateTime = new Date(params);
-  const options = {
-    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
-  };
-  return dateTime.toLocaleDateString('en-GB', options);
-};
-
-const DateFormatDMYTime = (dt) => {
-  if (dt == null || typeof dt === 'undefined') return '';
-  try {
-    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
-    if (m.isValid()) {
-      return dt;
-    }
-    const dtJSON = new Date(dt).toJSON();
-    const dtISO = new Date(Date.parse(dt)).toISOString();
-    if (dtISO === dtJSON) {
-      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
-    }
-    return '';
-  } catch (e) {
-    return '';
-  }
-};
-
-const EditorTips = () => {
-  return (
-    <ol>
-      {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
-      <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
-      <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
-    </ol>
-  );
-};
-
-const BackSoonPage = () => {
-  return (
-    <div>
-      <h1>We&rsquo;ll be back soon!</h1>
-      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
-      <h3>
-        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
-      </h3>
-      <h3>
-        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
-      </h3>
-      <h4>&mdash; ComPlat Team</h4>
-    </div>
-  );
-};
-
-const ShowIndicator = (show) => {
-  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-};
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '2px',
-  marginRight: '2px'
-};
-
-const IconLicense = (cp, hasCoAuthors = false) => {
-  const presentStyle = { marginTop: '-10px', height: '31px', width: '88px' };
-  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-  let presentPath = '/images/creative_common/cc-by-sa.svg';
-  const cc0Alt = [
-    'To the extent possible under law, the',
-    (hasCoAuthors ? 'persons' : 'person'),
-    'who associated CC0 with this work',
-    (hasCoAuthors ? 'have' : 'has'),
-    'waived all copyright and related or neighboring rights to this work.'
-  ].join(' ');
-
-  switch (cp) {
-    case 'CC BY-SA':
-      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by-sa.svg';
-      break;
-    case 'CC BY':
-      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by.svg';
-      break;
-    case 'CC0':
-      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
-      presentAlt = cc0Alt;
-      presentPath = '/images/creative_common/cc-zero.svg';
-      break;
-    default:
-      break;
-  }
-  return <a rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
-};
-
-const IconToMyDB = ({
-  id, type, tooltipTitle = 'Link to My DB', isLogin = false
-}) => {
-  if (isLogin) {
-    return (
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipTitle}</Tooltip>}>
-        <a
-          style={labelStyle}
-          target="_blank"
-          rel="noreferrer noopener"
-          href={`/mydb/collection/all/${type}/${id}`}
-        >
-          <i className={`icon-${type}`} style={{ fontSize: '1.6em' }} />
-        </a>
-      </OverlayTrigger>
-    );
-  }
-  return (<span style={labelStyle}><i className={`icon-${type}`} style={{ fontSize: '1.6em' }} /></span>);
-};
-
-IconToMyDB.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-  tooltipTitle: PropTypes.string,
-  isLogin: PropTypes.bool,
-}
-
-IconToMyDB.defaultProps = {
-  tooltipTitle: 'Link to My DB',
-  isLogin: false
-}
-
-const SidToPubChem = ({ sid }) => {
-  let labelStyle = {
-    // display: 'inline-block',
-    marginLeft: '2px',
-    marginRight: '2px',
-    //position: 'absolute',
-    fontSize: 'xx-large'
-  };
-  if (!sid || isNaN(sid)) {
-    labelStyle.WebkitFilter = "grayscale(100%)"
-  }
-  const handleOnClick = (e) => {
-    if (sid && !isNaN(sid)){
-      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
-    }
-    e.stopPropagation()
-  }
-
-  if (sid && !isNaN(sid)){
-    return (
-      <span style={labelStyle} onClick={handleOnClick}>
-        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
-      </span>
-    )
-    }else {
-      return <span />
-  }
-}
-
-SidToPubChem.propTypes = {
-  sid: PropTypes.string
-}
-
-const ElementIcon = (elementType) => {
-  switch (elementType) {
-    case 'Reaction':
-      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    case 'Sample':
-      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    default:
-      return <div />;
-  }
-};
-
-const AnalysesTypeJoinLabel = (analyses, type) => {
-  const regExp = /\(([^)]+)\)/;
-  const analysesTypeJoin = analyses.map((analysis) => {
-    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
-    if (kind === '') {
-      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    }
-    return kind;
-  }).join(', ');
-
-  return analysesTypeJoin === '' ? analysesTypeJoin :
-    (
-      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
-        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
-      </div>
-    );
-};
-
-const PreviewImage = (container) => {
-  const rawImg = container.preview_img;
-  const noAttSvg = '/images/wild_card/no_attachment.svg';
-  const noAvaSvg = '/images/wild_card/not_available.svg';
-  switch (rawImg) {
-    case null:
-    case undefined:
-      return noAttSvg;
-    case 'not available':
-      return noAvaSvg;
-    default:
-      return `data:image/png;base64,${rawImg}`;
-  }
-};
-
-const CalcDuration = (reaction) => {
-  let duration = null;
-
-  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
-    return reaction.duration;
-  }
-
-  if (reaction.timestamp_start && reaction.timestamp_stop) {
-    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
-    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
-    if (start < stop) {
-      duration = moment.preciseDiff(start, stop);
-    }
-  }
-  if (duration == null) {
-    return '';
-  }
-  return duration;
-};
-
-const AuthorList = ({ creators, affiliationMap }) => {
-  return (
-    <span>
-      {creators.map(
-        (creator, i) => (
-          <span key={`auth_${creator.id}_${uuid.v4()}`}>
-            {i === 0 ? null : ' - '}{creator.name}
-            <sup>
-              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
-            </sup>
-          </span>
-        )
-      )}
-    </span>
-  );
-};
-
-AuthorList.propTypes = {
-  creators: PropTypes.array,
-  affiliationMap: PropTypes.object,
-};
-
-AuthorList.defaultProps = {
-  creators: [],
-  affiliationMap: {},
-};
-
-const ContributorInfo = ({ contributor }) => {
-  if (!contributor.name) {
-    return <div />;
-  }
-  return (
-    <div>
-      <h5>
-        <b>Contributor: </b>{contributor.name}
-      </h5>
-      <div>
-        {contributor.affiliations && contributor.affiliations.map(
-          (e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-ContributorInfo.propTypes = {
-  contributor: PropTypes.object,
-};
-
-ContributorInfo.defaultProps = {
-  contributor: {},
-};
-
-const AffiliationList = ({ affiliations, affiliationMap }) => {
-  const names = [];
-  Object.keys(affiliationMap).map((affiliationId) => {
-    const ind = affiliationMap[affiliationId];
-    names[ind] = affiliations[affiliationId];
-    return null;
-  });
-  return (
-    <div>
-      {names.map(
-        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
-      )}
-    </div>
-  );
-}
-AffiliationList.propTypes = {
-  affiliations: PropTypes.object,
-  affiliationMap: PropTypes.object,
-};
-
-AffiliationList.defaultProps = {
-  affiliations: {},
-  affiliationIds: {},
-};
-
-class ClipboardCopyLink extends Component {
-  constructor(props) {
-    super(props)
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
-      >
-        <div style={{ display: 'inline' }} role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn" >{this.props.text}</div>
-      </OverlayTrigger>
-    );
-  }
-}
-
-class ClipboardCopyBtn extends Component {
-  constructor(props) {
-    super(props)
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
-      >
-        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
-          <i className="fa fa-clipboard" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
-
-
-
-const MoleculeInfo = ({ molecule, sample_svg_file='' }) => {
-  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
-  if (sample_svg_file && sample_svg_file != '') {
-    svgPath = `/images/samples/${sample_svg_file}`;
-  }
-  const tagData = molecule.tag && molecule.tag.taggable_data;
-  const pubchemInfo = {
-    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
-  };
-  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
-    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
-  return (
-    <Row>
-      <Col sm={4} md={4} lg={4}>
-        <SVG key={svgPath} src={svgPath} className="molecule-mid" />
-      </Col>
-      <Col sm={8} md={8} lg={8}>
-        {nameOrFormula}
-        <br />
-        <h5><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-        <h5><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-        <h5><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
-        <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
-        <br />
-        <h5>
-          <b>Crosslinks: </b>
-          &nbsp;&nbsp;
-          <PubchemLabels element={pubchemInfo} />
-          <ChemotionTag tagData={tagData} />
-        </h5>
-      </Col>
-    </Row>
-  );
-};
-
-class RenderAnalysisHeader extends Component {
-  constructor(props) {
-    super();
-  }
-
-  render() {
-    const svgPath = `/images/samples/${this.props.element.sample_svg_file}`;
-    let doiLink = '';
-    if (this.props.isPublic) {
-      doiLink = this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.publication && this.props.element.tag.taggable_data.publication.doi;
-    } else {
-      doiLink = (this.props.element.doi && this.props.element.doi.full_doi) || '';
-    }
-
-    const nameOrFormula = this.props.element.molecule.iupac_name && this.props.element.molecule.iupac_name !== ''
-      ? <span><b>IUPAC Name: </b> {this.props.element.molecule.iupac_name} (<Formula formula={this.props.element.molecule.sum_formular} />)</span>
-      : <span><b>Formula: </b> <Formula formula={this.props.element.molecule.sum_formular} /></span>;
-
-    const iupacUserDefined = this.props.element.showed_name == this.props.element.molecule.iupac_name
-      ? <span />
-      : <h5><b>Name: </b> {this.props.element.showed_name} </h5>;
-
-
-    const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
-    const crsId = (this.props.element.publication && this.props.element.publication.id) || '';
-    return (
-      <div>
-        <div>
-          <br />
-          <Row style={rinchiStyle}>
-            <Col sm={6} md={6} lg={6}>
-              <SVG key={svgPath} src={svgPath} className="reaction-details" />
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <h5>
-                <IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" />
-              <b>Product </b><br /><br />
-                  {nameOrFormula}
-                  {iupacUserDefined}
-              </h5>
-              <h6><b>Canonical Smiles: </b> <ClipboardCopyLink text={this.props.element.molecule.cano_smiles} /></h6>
-              <h6><b>Inchi: </b> <ClipboardCopyLink text={this.props.element.molecule.inchistring} /></h6>
-              <h6><b>Inchikey: </b> <ClipboardCopyLink text={this.props.element.molecule.inchikey} /></h6>
-              <h6><b>Exact Mass: </b> {SampleExactMW(this.props.element.molecule.exact_molecular_weight)}</h6>
-              <h6><b>DOI: </b>
-                {
-                  this.props.isPublic ?
-                  (
-                    <span className="sub-title" inline="true">
-                      <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-                        {doiLink}
-                      </Button>
-                      <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                      <DownloadMetadataBtn type="sample" id={this.props.element.id} />
-                    </span>
-                  )
-                  :
-                  (
-                    <span className="sub-title" inline="true">
-                      {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                    </span>
-                  )
-                }
-              </h6>
-              <h6>
-                <b>ID: </b>
-                <Button key={`reaction-jumbtn-${this.props.element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
-                  CRS-{crsId}
-                </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
-              </h6>
-
-            </Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
-
-const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
-  <span
-    role="presentation"
-    className="label label-default"
-    style={{
-      backgroundColor: '#777777',
-      color: 'white',
-      fontSize: 'smaller',
-      fontWeight: 'bold',
-      cursor: 'pointer'
-    }}
-    onClick={onClick}
-  >
-    {name} &nbsp;<i className={`glyphicon ${indicatorStyle}`} />
-  </span>
-);
-
-ToggleIndicator.propTypes = {
-  indicatorStyle: PropTypes.string,
-  name: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-};
-
-ToggleIndicator.defaultProps = {
-  indicatorStyle: '',
-  name: '',
-};
-
-
-const ReactionTable = ({
-  reaction, toggle, show, bodyAttrs, isPublic = true
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-
-  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-    reaction.publication.taggable_data.scheme_only === true) || false;
-
-  if (isPublic) {
-    schemes = reaction.schemes;
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s)
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => {
-    return (target ? (target * multi).toFixed(precision) : ' - ')
-  }
-
-  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        if (schemeOnly === true) {
-          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`
-        } else {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
-        }
-        break;
-      case 'solvents':
-        if (isPublic) {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
-        } else {
-          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`
-        }
-        break;
-      default:
-        val = materialCalc(s.equivalent, 1, 3)
-    }
-    return (
-      val
-    )
-  }
-
-  const rows = (samples) => {
-    let currentType = '';
-
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    )
-  };
-
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionRinChiKey = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorRinchi = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionProperties = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorProp = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status: </b>{reaction.status}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Duration: </b>{CalcDuration(reaction)}
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionTlc = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorTlc = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.rf_value || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
-              <Col sm={10} md={10} lg={10}>
-                <div style={{ whiteSpace: 'pre' }}>
-                  {reaction.tlc_description || ''}
-                </div>
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const InputFieldYield = (props) => {
-  return (
-    <FormGroup>
-      <InputGroup>
-        <FormControl
-          type="text"
-          bsClass="bs-form--compact form-control"
-          bsSize="small"
-          value={props.value || 0}
-          placeholder="Input Yield..."
-          onChange={event => props.onInputChange(props.product, event)}
-        />
-        <InputGroup.Addon>%</InputGroup.Addon>
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const InputFieldDuration = props =>
-  (
-    <InputButtonField
-      label="Duration"
-      value={props.durationValue || ''}
-      field="duration"
-      btnValue={props.durationUnit || ''}
-      btnField="durationUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch duration unit"
-    />
-  );
-
-const InputFieldTemperture = props =>
-  (
-    <InputButtonField
-      label="Temperature"
-      value={props.temperatureDisplay || ''}
-      field="temperature"
-      btnValue={props.temperatureUnit || ''}
-      btnField="temperatureUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch temperature unit"
-    />
-  );
-
-const ReactionTableEdit = ({
-  reaction, bodyAttrs, isPublic = true,
-  onInputChange
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-
-  if (isPublic) {
-    schemes = reaction.schemes;
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s)
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
-  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        val = materialCalc(s.equivalent * 100, 1, 0);
-        break;
-      default:
-        return <div />;
-    }
-    return (
-      <Form inline>
-        <InputFieldYield
-          value={val}
-          product={s}
-          onInputChange={onInputChange}
-        />
-      </Form>
-    );
-  };
-
-  const rows = (samples) => {
-    let currentType = '';
-
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    )
-  };
-
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <Label>Reaction Table</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionPropertiesEdit = ({
-  reaction, bodyAttrs,
-  onInputChange, onUnitChange
-}) =>
-  (
-    <span>
-      <Label>Properties</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status</b><div>{reaction.status}</div>
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldTemperture
-                  temperatureDisplay={reaction.temperature_display}
-                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldDuration
-                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
-                  durationUnit={reaction.durationUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-
-const ReactionSchemeOnlyInfo = ({
-  reaction, isPublic = true, schemeDesc,
-  onYieldChange, onPropertiesChange, onUnitChange
-}) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTableEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              isPublic={isPublic}
-              onInputChange={onYieldChange}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <Checkbox
-              checked={schemeDesc}
-              onChange={() => { onPropertiesChange('schemeDesc'); }}
-            >
-              <span>add the description field?</span>
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionPropertiesEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              onInputChange={onPropertiesChange}
-              onUnitChange={onUnitChange}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
-  toggleRinchi, showRinchi,
-  toggleProp, showProp,
-  toggleTlc, showTlc,
-  schemeOnly = false, onToggle = () => {}
- }) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-  const content = reaction.description;
-  const additionInfo = reaction.observation;
-
-  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
-
-  const descQV = contentlength > 0 ?
-  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
-  const addQV = additionlength > 0 ?
-  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
-
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  if (schemeOnly) {
-    return (
-      <RepoReactionSchemeInfo
-        reaction={reaction}
-        svgPath={svgPath}
-        showScheme={showScheme}
-        showRinchi={showRinchi}
-        showProp={showProp}
-        bodyAttrs={bodyAttrs}
-        onToggle={onToggle}
-      />
-    );
-  }
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTable
-              reaction={reaction}
-              toggle={toggleScheme}
-              show={showScheme}
-              isPublic={isPublic}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-            <div className="desc small-p">
-              {addQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={reaction}
-              toggle={toggleRinchi}
-              show={showRinchi}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionProperties
-              reaction={reaction}
-              toggle={toggleProp}
-              show={showProp}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTlc
-              reaction={reaction}
-              toggle={toggleTlc}
-              show={showTlc}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const AnalysisHeaderSample = ({ sample, sampleType }) => {
-  const svgPath = `/images/samples/${sample.sample_svg_file}`;
-  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
-  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
-  return (
-    <div className="svg-container">
-      <Row style={rinchiStyle}>
-        <Col sm={4} md={4} lg={4}>
-          <SVG key={svgPath} src={svgPath} className="sample-details" />
-        </Col>
-        <Col sm={8} md={8} lg={8}>
-          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
-          <b> DOI: </b>
-          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-            {doiLink}
-          </Button>
-          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-          <DownloadMetadataBtn type="sample" id={sample.id} />
-        </Col>
-      </Row>
-    </div>
-  );
-};
-AnalysisHeaderSample.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  sampleType: PropTypes.string,
-};
-
-AnalysisHeaderSample.defaultProps = {
-  sample: {},
-  sampleType: '',
-};
-
-class RenderPublishAnalysesPanel extends Component {
-  header() {
-    const { analysis, isPublic } = this.props;
-    const content = analysis.extended_metadata['content'];
-    const previewImg = PreviewImage(analysis);
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    let hasPop = true;
-    let fetchNeeded = false;
-    let fetchId = 0;
-    let fetchFilename = '';
-    if (analysis.preview_img && analysis.preview_img !== undefined && analysis.preview_img !== 'not available') {
-      const containerAttachments = filter(analysis.children, o => o.attachments.length > 0);
-      const atts = flatMap(map(containerAttachments, 'attachments'));
-      const imageThumb = filter(atts, o => o.thumb === true && startsWith(o.content_type, 'image/'));
-      if (imageThumb && imageThumb.length > 0) {
-        fetchNeeded = true;
-        fetchId = imageThumb[0].id;
-        fetchFilename = imageThumb[0].filename;
-      }
-    } else {
-      hasPop = false;
-    }
-
-    const doiLink = (isPublic === false) ? (
-      <div className="sub-title" inline="true">
-        <b>DOI: </b>
-        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-      </div>
-      ) : (
-      <div className="sub-title" inline="true">
-        <b>DOI: </b>
-        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-          {analysis.dataset_doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-        <DownloadMetadataBtn type="container" id={analysis.id} />
-      </div>
-    )
-
-    return (
-      <div
-        className="analysis-header"
-        style={{ height: 'unset' }}
-      >
-        <div className="preview">
-          <ImageModal
-            hasPop={hasPop}
-            preivewObject={{
-              src: previewImg
-            }}
-            popObject={{
-              title: kind,
-              src: previewImg,
-              fetchNeeded,
-              fetchId,
-              fetchFilename
-            }}
-          />
-        </div>
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title">
-              <b>{kind}</b>
-            </div>
-            {doiLink}
-            <div className="sub-title" inline="true">
-              <b>ID: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-              CRD-{ analysis.pub_id }
-              </Button>
-              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-            </div>
-          </div>
-          <div className="desc small-p expand-p" style={{ marginLeft: '10px' }}>
-            <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content} />
-            </ClipboardCopyLink>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {this.header()}
-        <Col md={12}>
-          <b>Datasets</b>
-          <RepoContainerDatasets
-            container={this.props.analysis}
-          />
-        </Col>
-      </div>
-    );
-  }
-}
-
-class RenderPublishAnalyses extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  header() {
-    const analysis = this.props.analysis;
-    const content = analysis.extended_metadata['content'];
-    const rawImg = analysis.preview_img;
-    const noAttSvg = '/images/wild_card/no_attachment.svg';
-    const noAvaSvg = '/images/wild_card/not_available.svg';
-    let previewImg = rawImg;
-    switch (rawImg) {
-      case null:
-      case undefined:
-        previewImg = noAttSvg;
-        break;
-      case 'not available':
-        previewImg = noAvaSvg;
-        break;
-      default:
-        previewImg = `data:image/png;base64,${rawImg}`;
-    }
-
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    let hasPop = true;
-    let fetchNeeded = false;
-    let fetchId = 0;
-    let fetchFilename = '';
-    if (analysis.preview_img && analysis.preview_img !== undefined && analysis.preview_img !== 'not available') {
-      const containerAttachments = filter(analysis.children, o => o.attachments.length > 0);
-      const atts = flatMap(map(containerAttachments, 'attachments'));
-      const imageThumb = filter(atts, o => o.thumb === true && startsWith(o.content_type, 'image/'));
-      if (imageThumb && imageThumb.length > 0) {
-        fetchNeeded = true;
-        fetchId = imageThumb[0].id;
-        fetchFilename = imageThumb[0].filename;
-      }
-    } else {
-      hasPop = false;
-    }
-
-    return (
-      <div
-        className="analysis-header"
-      >
-        <div className="preview">
-          <ImageModal
-            hasPop={hasPop}
-            preivewObject={{
-              src: previewImg
-            }}
-            popObject={{
-              title: kind,
-              src: previewImg,
-              fetchNeeded,
-              fetchId,
-              fetchFilename
-            }}
-          />
-        </div>
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title" inline="true">
-              <b>DOI: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-                {analysis.dataset_doi}
-              </Button>
-              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-              <DownloadMetadataBtn type="container" id={analysis.id} />
-            </div>
-            <div className="sub-title" inline="true">
-              <b>ID: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-                CRD-{ analysis.pub_id }
-              </Button>
-              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-            </div>
-            <div className="desc small-p">
-              <b>Content: </b> &nbsp;&nbsp;
-              <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content}  />
-            </ClipboardCopyLink>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { analysis, expanded, elementType } = this.props;
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    const AffiliationMap = (affiliationIds) => {
-      const aId = [].concat.apply(...affiliationIds);
-      const affiliationMap = {};
-      let aCount = 0;
-      aId.map((e) => {
-        if (!affiliationMap[e]) {
-          aCount += 1;
-          affiliationMap[e] = aCount;
-        }
-      });
-      return affiliationMap;
-    };
-    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids);
-    const time = new Date(this.props.publication && this.props.publication.published_at);
-    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (
-      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
-        <Panel.Heading style={{ border: 'unset' }}>
-          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            {IconLicense(this.props.license, (this.props.publication.author_ids.length > 1))}
-          </h4>
-          <p>&nbsp;</p>
-          <b>{kind}</b>&nbsp;
-          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
-            <small><b>{ElementIcon(elementType)}</b></small>
-          </div>
-          <h5>
-            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
-            <AuthorList
-              creators={this.props.publication.creators}
-              affiliationMap={affiliationMap}
-            />
-          </h5>
-          <AffiliationList
-            affiliations={this.props.publication.affiliations}
-            affiliationMap={affiliationMap}
-          />
-        </Panel.Heading>
-        <Panel.Collapse>
-          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
-            {this.header()}
-            <Col md={12}>
-              <b>Datasets</b>
-              <RepoContainerDatasets
-                container={this.props.analysis}
-              />
-            </Col>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    );
-  }
-}
-
-RenderPublishAnalyses.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  elementType: PropTypes.string.isRequired,
-  license: PropTypes.string.isRequired,
-  publication: PropTypes.shape({
-    author_ids: PropTypes.arrayOf(PropTypes.number),
-    creators: PropTypes.arrayOf(PropTypes.object),
-    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
-    affiliations: PropTypes.object,
-    published_at: PropTypes.string,
-  }).isRequired
-};
-
-class PublishAnalysesTag extends Component {
-  constructor(props) {
-    super(props);
-    const { reaction, analysis, analysesType, product } = props;
-    this.state = {
-      reaction,
-      analysis,
-      analysesType,
-      product
-    };
-    this.handleCheck = this.handleCheck.bind(this);
-  }
-
-  handleCheck(e, elementType) {
-    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
-      e.extended_metadata.publish = false;
-    } else {
-      e.extended_metadata.publish = true;
-    }
-    this.props.handleAnalysesChecked(e, elementType);
-  }
-
-  generateTitle() {
-    const {
-      reaction, analysis, analysesType, product
-    } = this.state;
-    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
-    const { content } = analysis.extended_metadata;
-    const status = analysis.extended_metadata.status || '';
-    const previewImg = PreviewImage(analysis);
-    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
-
-    let statusMissing = false;
-    let nmrMissing = false;
-    let datasetMissing = false;
-    if (analysesType === 'Product') {
-      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
-      nmrMissing = !isNmrPass(analysis, product);
-      datasetMissing = !isDatasetPass(analysis);
-    }
-    const constructBtnTip = () => {
-      const tip = [];
-      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
-        if (typeMissing) tip.push('Type is invalid.');
-        if (statusMissing) tip.push('Status must be Confirmed.');
-        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
-        if (datasetMissing) {
-          tip.push('Dataset is incomplete. Please check that: ');
-          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
-          tip.push('2. the instrument field is not empty.');
-        }
-        return tip.join('\r\n');
-      }
-      return 'publish this analysis';
-    };
-    const btnTip = constructBtnTip();
-
-    let statusChk = false;
-    let statusMsg = '';
-    let typeChk = false;
-    if (analysesType === 'Product') {
-      statusChk = (status !== 'Confirmed' || nmrMissing);
-      statusMsg = nmrMsg(product, analysis);
-      typeChk = (kind === '');
-    }
-
-    if (!analysis.extended_metadata.kind) {
-      analysis.extended_metadata.publish = false;
-    }
-    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
-      && !statusMissing && !nmrMissing && !datasetMissing) || false;
-    let analysesIcon = '';
-    switch (analysesType) {
-      case 'Reaction':
-        analysesIcon = <i className="icon-reaction" />;
-        break;
-      case 'Product':
-        analysesIcon = <i className="icon-sample" />;
-        break;
-      default:
-        analysesIcon = '';
-    }
-
-    return (
-      <div
-        className="analysis-header order"
-      >
-        <div className="preview">
-          <img src={previewImg} alt="preview" />
-        </div>
-        <div className="abstract">
-          <div className="upper-btn">
-            <div
-              className="button-right"
-            >
-              &nbsp;{analysesIcon}
-            </div>
-            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
-            <span
-              className="button-right add-to-report"
-              onClick={stopBubble}
-            >
-              <OverlayTrigger
-                placement="left"
-                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
-              >
-                <div>
-                  <Checkbox
-                    onChange={() => { this.handleCheck(analysis, analysesType); }}
-                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
-                    defaultChecked={isPublish}
-                  >
-                    {
-                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
-                        <span style={{ color: 'red' }}>Add to publication</span>
-                      :
-                        <span>Add to publication</span>
-                    }
-                  </Checkbox>
-                </div>
-              </OverlayTrigger>
-            </span>
-          </div>
-          <div className="lower-text">
-            <div className="main-title">
-              {analysis.name}
-            </div>
-            {
-              typeChk ?
-                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
-                :
-                <div className="sub-title">Type: {kind}</div>
-            }
-            {
-              statusChk ?
-                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
-                :
-                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
-            }
-            <div className="desc sub-title">
-              <span style={{ float: 'left', marginRight: '5px' }}>
-                Content:
-              </span>
-              <QuillViewer value={content}  />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
-        <Panel.Heading>
-          <Panel.Title toggle>
-            {this.generateTitle()}
-          </Panel.Title>
-        </Panel.Heading>
-        <Panel.Body collapsible>
-          <ContainerComponent readOnly container={this.props.analysis} />
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-PublishAnalysesTag.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  analysis: PropTypes.object.isRequired,
-  analysesType: PropTypes.string,
-  handleAnalysesChecked: PropTypes.func.isRequired,
-  product: PropTypes.object
-};
-PublishAnalysesTag.defaultProps = {
-  analysesType: '',
-  product: null
-};
-
-RenderPublishAnalysesPanel.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  isPublic: PropTypes.bool,
-};
-
-RenderPublishAnalysesPanel.defaultProps = {
-  isPublic: true
-};
-
-ReactionTable.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object,
-  isPublic: PropTypes.bool.isRequired
-};
-
-ReactionTable.defaultProps = {
-  isPublic: true,
-  showScheme: false
-};
-
-ReactionRinChiKey.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionProperties.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionTlc.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-const DatasetDetail = ({ element }) => {
-  const { molecule } = element;
-  molecule.tag = {
-    taggable_data: { pubchem_cid: molecule.pubchem_cid }
-  };
-
-  const datasetView = !element ? (
-    <span>There is no published dataset</span>
-  ) : (
-    <RenderPublishAnalyses
-      key={`${element.id}-${element.updated_at}`}
-      analysis={element.dataset}
-      expanded
-      elementType="Sample"
-      license={element.license}
-      publication={element.publication}
-    />
-  );
-
-  return (
-    <Grid>
-      <MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />
-      <br /><br />
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          {datasetView}
-        </Col>
-      </Row>
-    </Grid>
-  );
-};
-
-DatasetDetail.propTypes = {
-  element: PropTypes.object.isRequired,
-};
-
-const ClosePanel = ({ element }) => (
-  <div>
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        className="button-right"
-        onClick={() => PublicActions.close(element, true)}
-      >
-        <i className="fa fa-times" />
-      </Button>
-    </OverlayTrigger>
-  </div>
-);
-
-ClosePanel.propTypes = {
-  element: PropTypes.object.isRequired,
-};
-
-const CommentBtn = (props) => {
-  const {
-    canComment,
-    reviewLevel,
-    submitter,
-    pubState,
-    comments,
-    onShow,
-    field,
-    orgInfo
-  } = props;
-
-  if (!canComment) return '';
-  return (
-    <span>
-      <RepoCommentBtn
-        field={field}
-        comments={comments}
-        orgInfo={orgInfo}
-        reviewLevel={reviewLevel}
-        state={pubState}
-        submitter={submitter}
-        onShow={() => onShow(true, field, orgInfo)}
-      />&nbsp;
-    </span>
-  );
-};
-
-CommentBtn.propTypes = {
-  canComment: PropTypes.bool.isRequired,
-  reviewLevel: PropTypes.number.isRequired,
-  submitter: PropTypes.string.isRequired,
-  pubState: PropTypes.string.isRequired,
-  comments: PropTypes.object.isRequired,
-  onShow: PropTypes.func.isRequired,
-  field: PropTypes.string.isRequired,
-  orgInfo: PropTypes.string.isRequired
-};
-
-const Doi = (props) => {
-  const {
-    type, id, doi, isPublished
-  } = props;
-
-  let data = '';
-
-  if (isPublished) {
-    data = (
-      <span>
-        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
-          {doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
-        <DownloadMetadataBtn type={type} id={id} />
-      </span>
-    );
-  } else {
-    data = (
-      <span>
-        {doi.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi.full_doi}`} />
-      </span>
-    );
-  }
-
-  return (
-    <h5>
-      <b>DOI: </b>
-      {data}
-    </h5>
-  );
-};
-
-Doi.propTypes = {
-  type: PropTypes.string.isRequired,
-  id: PropTypes.number.isRequired,
-  doi: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]).isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
-const DateInfo = (props) => {
-  const {
-    pubData, tagData, isPublished
-  } = props;
-
-  let time = '';
-  let formattedTime = '';
-
-  if (isPublished) {
-    time = new Date(tagData && (tagData.published_at || tagData.doi_reg_at));
-    formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
-  }
-
-  time = new Date(pubData && pubData.updated_at);
-  formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  return (<span><b>Submitted on </b> <i>{formattedTime}</i></span>);
-};
-
-DateInfo.propTypes = {
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
-export {
-  AnalysisHeaderSample,
-  AnalysesTypeJoinLabel,
-  AffiliationList,
-  AuthorList,
-  AuthorTitle,
-  BackSoonPage,
-  CalcDuration,
-  ChemotionId,
-  ClipboardCopyLink,
-  ClipboardCopyBtn,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  DateFormatYMDLong,
-  DateFormatDMYTime,
-  DatasetDetail,
-  DateInfo,
-  Doi,
-  DownloadDOICsv,
-  DownloadMetadataBtn,
-  EditorTips,
-  ElementIcon,
-  ElStateLabel,
-  ElSubmitTime,
-  ElAspect,
-  EmbargoCom,
-  IconLicense,
-  IconToMyDB,
-  isNmrPass,
-  isDatasetPass,
-  HomeFeature,
-  MoleculeInfo,
-  NewsroomTemplate,
-  PreviewImage,
-  PublishAnalysesTag,
-  PublishTypeAs,
-  ReactionSchemeOnlyInfo,
-  ReactionInfo,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalyses,
-  RenderPublishAnalysesPanel,
-  RequiredLabel,
-  SchemeWord,
-  SidToPubChem,
-  ShowIndicator,
-  SvgPath,
-  ToggleIndicator,
-};
diff --git a/app/assets/javascripts/libHome/RepoContact.js b/app/assets/javascripts/libHome/RepoContact.js
deleted file mode 100644
index 028a6eadb..000000000
--- a/app/assets/javascripts/libHome/RepoContact.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Well, Col, Row } from 'react-bootstrap';
-
-const RepoContact = () => {
-  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />ioc.kit.edu</span>;
-  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
-  return (
-    <div >
-      <br /><br /><br />
-      <Well style={{ width: '90%', margin: 'auto' }}>
-        <Row>
-          <Col md={6}>
-            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
-              <tbody>
-                <tr><td><h3>Complat</h3><br /><br /></td></tr>
-                <tr><td>{institute}</td></tr>
-                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
-                <tr><td>Building 341</td></tr>
-                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
-                <tr><td>Germany<br /><br /></td></tr>
-                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
-                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
-                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
-              </tbody>
-            </table>
-          </Col>
-          <Col md={6}>
-            <iframe
-              title="Complat location"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
-              style={{
-                width: '80%', height: 400, frameborder: '0', margin: 'auto'
-              }}
-            />
-          </Col>
-        </Row>
-      </Well>
-      <br /><br /><br />
-    </div>
-  );
-};
-
-export default RepoContact;
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
deleted file mode 100644
index 8c4ca3b26..000000000
--- a/app/assets/javascripts/libHome/RepoContainerDatasets.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
-import ContainerDatasetModal from '../components/ContainerDatasetModal';
-import ContainerDatasetField from '../components/ContainerDatasetField';
-
-export default class RepoContainerDatasets extends Component {
-  constructor(props) {
-    super(props);
-    const { container } = props;
-    this.state = {
-      container,
-      modal: {
-        show: false,
-        dataset_container: null
-      }
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    });
-  }
-
-  handleModalOpen(datasetContainer) {
-    const { modal } = this.state;
-    modal.dataset_container = datasetContainer;
-    modal.show = true;
-    this.setState({ modal });
-  }
-
-  handleModalHide() {
-    const { modal } = this.state;
-    modal.show = false;
-    modal.dataset_container = null;
-    this.setState({ modal });
-    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
-    document.body.className = document.body.className.replace('modal-open', '');
-  }
-
-  render() {
-    const { container, modal } = this.state;
-
-    if (container.children.length > 0) {
-      return (
-        <div>
-          <ListGroup style={{ marginBottom: 20 }}>
-            {container.children.map((datasetContainer) => {
-              return (
-                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} style={{ border: 'none', backgroundColor: 'transparent' }}>
-                  <ContainerDatasetField
-                    dataset_container={datasetContainer}
-                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
-                    disabled
-                  />
-                </ListGroupItem>
-              );
-            })}
-          </ListGroup>
-          <hr style={{ borderColor: '#ddd' }} />
-          <ContainerDatasetModal
-            onHide={() => this.handleModalHide()}
-            show={modal.show}
-            readOnly
-            dataset_container={modal.dataset_container}
-            disabled
-          />
-        </div>
-      );
-    }
-    return (
-      <div>
-        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
-          <h5>There are currently no Datasets.</h5>
-        </Well>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoDirective.js b/app/assets/javascripts/libHome/RepoDirective.js
deleted file mode 100644
index 8712595b1..000000000
--- a/app/assets/javascripts/libHome/RepoDirective.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-import { Parser } from 'html-to-react';
-
-export default class RepoDirective extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      content: <div />
-    };
-  }
-
-  componentDidMount() {
-    fetch('/directives/directives.html', { credentials: 'same-origin' })
-      .then(res => res.text())
-      .then((html) => {
-        // const parser = new HtmlToReactParser();
-        this.setState({ content: Parser().parse(html) });
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  render() {
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={3} />
-        <Col md={6}>
-          <Panel>
-            <Panel.Heading>
-              <Panel.Title>Directive to use the service</Panel.Title>
-            </Panel.Heading>
-            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
-              {this.state.content}
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={3} />
-      </Row>
-    );
-  }
-};
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
deleted file mode 100644
index abf6329ee..000000000
--- a/app/assets/javascripts/libHome/RepoElementDetails.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import { DatasetDetail } from './RepoCommon';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoElementDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentElement: {}
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-
-    switch (elementType) {
-      case 'dataset': return <DatasetDetail element={currentElement} />;
-      case 'molecule': return (
-        <RepoSampleDetails
-          isPublished
-          element={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          submitter={this.state.submitter}
-          pubState={this.state.pubState}
-          comments={this.state.commentInfo ? this.state.commentInfo : {}}
-          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-        />);
-      case 'reaction': return (
-        <RepoReactionDetails
-          isPublished
-          reaction={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          submitter={this.state.submitter}
-          pubState={this.state.pubState}
-          comments={this.state.commentInfo ? this.state.commentInfo : {}}
-          summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-          feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-        />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none', maxHeight: '80%' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoEmbargo.js b/app/assets/javascripts/libHome/RepoEmbargo.js
deleted file mode 100644
index 7a5f934c7..000000000
--- a/app/assets/javascripts/libHome/RepoEmbargo.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
-import Select from 'react-select';
-import { findIndex, filter } from 'lodash';
-import RepoEmbargoDetails from './RepoEmbargoDetails';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { ElAspect } from './RepoCommon';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-
-const renderMenuItems = (bundles) => {
-  if (bundles.length < 1) return <div />;
-  const menu = bundles.map(bundle => (
-    <MenuItem key={bundle.value} eventKey={bundle.value}>
-      {bundle.label}
-    </MenuItem>
-  ));
-  return menu;
-};
-
-export default class RepoEmbargo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      current_user: {},
-      currentElement: null,
-      moveElement: {},
-      newEmbargo: null,
-      selectEmbargo: null,
-      bundles: [],
-      showConfirmModal: false,
-      showMoveModal: false,
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
-    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
-    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
-    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
-    this.handleMoveShow = this.handleMoveShow.bind(this);
-    this.handleMoveClose = this.handleMoveClose.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    this.loadBundles();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-    if (this.state.selectEmbargo !== null) {
-      const vaildSelect = state.bundles.find(b => b.value === this.state.selectEmbargo.value);
-      if (typeof (vaildSelect) === 'undefined') {
-        this.setState({ selectEmbargo: null });
-      }
-    }
-  }
-
-  onClickDelete() {
-    this.setState({ showConfirmModal: true });
-  }
-
-
-  handleMoveShow(element) {
-    this.setState({
-      showMoveModal: true,
-      moveElement: element
-    });
-  }
-
-  handleMoveClose() {
-    this.setState({ showMoveModal: false, moveElement: {} });
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ newEmbargo: selectedValue });
-    }
-  }
-
-  handleElementSelection(eventKey, event) {
-    const { bundles } = this.state;
-    const selectEmbargo = bundles.find(b => b.value === eventKey);
-    this.setState({ selectEmbargo });
-    PublicActions.getEmbargoElements(eventKey);
-  }
-
-  handleEmbargoAccount() {
-    const { selectEmbargo } = this.state;
-
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else {
-      PublicActions.generateEmbargoAccount(selectEmbargo.value);
-      alert(`A temporary account for [${selectEmbargo.label}] has been created. The details have been sent to you by e-mail.`);
-    }
-  }
-
-  handleEmbargoRelease() {
-    const { selectEmbargo } = this.state;
-
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else {
-      PublicActions.releaseEmbargo(selectEmbargo.value);
-      alert(`The embargo on [${selectEmbargo.label}] has been released!`);
-    }
-  }
-
-  handleEmbargoDelete(shouldPerform) {
-    if (shouldPerform) {
-      const { selectEmbargo } = this.state;
-      if (selectEmbargo === null) {
-        alert('Please select an embargo first!');
-      } else {
-        PublicActions.deleteEmbargo(selectEmbargo.value);
-      }
-    }
-    this.setState({ showConfirmModal: false });
-  }
-
-  handleMoveEmbargo() {
-    const { selectEmbargo, moveElement, newEmbargo } = this.state;
-    PublicActions.moveEmbargo(selectEmbargo.value, newEmbargo, moveElement);
-    this.setState({ showMoveModal: false });
-  }
-
-  loadBundles() {
-    PublicActions.fetchEmbargoBundle();
-  }
-
-  renderSearch(bundles) {
-    const { selectEmbargo, elements, current_user } = this.state;
-    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const customClass = '.btn-unified';
-    const actionButtons = current_user.type === 'Anonymous' ? <span /> :
-      (
-        <span>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length === 0}
-            onClick={() => this.handleEmbargoAccount()}
-          >
-            <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
-          </Button>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
-            onClick={() => this.handleEmbargoRelease()}
-          >
-            <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
-          </Button>
-          <Button
-            bsStyle="danger"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length !== 0}
-            onClick={() => this.onClickDelete()}
-          >
-            <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
-          </Button>
-        </span>
-      );
-    const filterDropdown = (
-      <ButtonGroup>
-        <DropdownButton
-          className={customClass}
-          id="embargo-inner-dropdown"
-          title={selectEmbargo === null ? 'Embargo Bundle' : selectEmbargo.label}
-          style={{ width: '180px' }}
-          onSelect={this.handleElementSelection}
-        >
-          {renderMenuItems(bundles)}
-        </DropdownButton>
-        {actionButtons}
-      </ButtonGroup>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-
-  // render modal
-  renderMoveModal() {
-    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
-    const defaultBundles = [
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-    const allBundles = defaultBundles.concat(filter(bundles, b => b.name !== (selectEmbargo == null ? '' : selectEmbargo.name)));
-
-    return (
-      <Modal
-        show={showMoveModal}
-        dialogClassName="move-embargo-dialog"
-        onHide={this.handleMoveClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div>
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.label}] to :
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <div>
-                  <Select
-                    value={this.state.newEmbargo}
-                    onChange={e => this.handleEmbargoChange(e)}
-                    options={allBundles}
-                    className="select-assign-collection"
-                  />
-                  <br />
-                  <ButtonToolbar>
-                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
-                  </ButtonToolbar>
-                </div>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    const {
-      elements, bundles, currentElement, currentUser, showConfirmModal
-    } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch(bundles)}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, currentElement, this.handleMoveShow)) }
-                </tbody>
-              </Table>
-            </div>
-          </div>
-          <ConfirmModal
-            showModal={showConfirmModal}
-            title="Warning"
-            content="Are you sure that you want to delete this ?"
-            onClick={this.handleEmbargoDelete}
-          />
-        </Col>
-        <Col
-          className="review-element"
-          md={currentElement ? 8 : 0}
-        >
-          <RepoEmbargoDetails />
-          { this.renderMoveModal() }
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoEmbargoDetails.js b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
deleted file mode 100644
index 89d33cae8..000000000
--- a/app/assets/javascripts/libHome/RepoEmbargoDetails.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoEmbargoDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction': return <RepoReactionDetails reaction={currentElement.reaction} />;
-      case 'sample': return <RepoSampleDetails element={currentElement} />;
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>);
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/assets/javascripts/libHome/RepoHome.js
deleted file mode 100644
index 512a53cc3..000000000
--- a/app/assets/javascripts/libHome/RepoHome.js
+++ /dev/null
@@ -1,476 +0,0 @@
-import React, {Component} from 'react'
-import { Label, Col, Row, Panel, ButtonToolbar, Button, Carousel, Thumbnail, Table, Well} from 'react-bootstrap'
-import SVG from 'react-inlinesvg'
-
-import PublicActions from '../components/actions/PublicActions'
-import PublicStore from '../components/stores/PublicStore'
-import { HomeFeature } from './RepoCommon';
-
-const PartnersInfo = (info) => {
-  const { header, img, content } = info
-  const imgSrc = `/images/repo/${img}`
-
-  return (
-    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
-      <div className="info">
-        <h4>{header}</h4>
-        <p>{content}</p>
-      </div>
-    </Thumbnail>
-  );
-}
-
-const Infos = [
-  {
-    header: "Database API",
-    img: "OAI.png",
-    content: "The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.",
-  }, {
-    header: "KIT Stiftung",
-    img: "KITStiftung.png",
-    content: "The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.",
-  }, {
-    header: "re3data",
-    img: "re3data.png",
-    content: "Karlsruhe Institute of Technology Registry of Research Data Repositories",
-  }, {
-    header: "Inchitrust",
-    img: "InChITRUST.png",
-    content: "The KIT has a Supporter Membership.",
-  }, {
-    header: "Datacite",
-    img: "DataCite.png",
-    content: "Helping you to find, access, and reuse data.",
-  }, {
-    header: "Pubmed",
-    img: "pubchem.jpg",
-    content: "All compounds are automatically registered with PubChem.",
-  }, {
-    header: "Thomson Reuters",
-    img: "DCIbadge.png",
-    content: "Datasets are automatically registered at the Data Citation Index.",
-  }, {
-    header: "DFG",
-    img: "ri_logo.png",
-    content: "Listed in the DFG catalogue for Research Infrastructures.",
-  }
-]
-
-const timeInterval = (date) => {
-  if (!date) { return null; }
-  switch (typeof date) {
-    case 'number':
-      break;
-    case 'string':
-      date = +new Date(date);
-      break;
-    case 'object':
-      if (date.constructor === Date) date = date.getTime();
-      break;
-    default:
-      date = +new Date();
-  }
-  let seconds = Math.floor((new Date() - date) / 1000);
-  let intrvlTypes = [
-    [31536000, 'year', 'a'],
-    [2592000, 'month', 'a'],
-    [604800, 'week', 'a'],
-    [86400, 'day', 'a'],
-    [3600, 'hour', 'an'],
-    [60, 'minute', 'a'],
-    [1, 'second', 'a'],
-  ]
-  let intrvlCount = 0
-  let intrvlType = intrvlTypes.find((e) => {
-    intrvlCount = Math.floor(seconds / e[0])
-    return intrvlCount >= 1
-  })
-  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
-}
-
-const CardLatestPublish = ({ lastPublished }) => {
-  if (lastPublished) {
-    const { sample, reaction } = lastPublished;
-    const svgPathSample = sample.sample_svg_file
-      ? `/images/samples/${sample.sample_svg_file}`
-      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
-    const pubTagSample = sample.tag || {};
-    const svgPathReaction = reaction
-      ? `/images/reactions/${reaction.reaction_svg_file}`
-      : '/images/no_image_180.svg';
-    const pubTagReaction = reaction.tag || {};
-    const spanStyle = {
-      color: 'black', textShadow: 'none', textAlign: 'justify', fontSize: 'medium'
-    };
-
-
-    return (
-      <div className="card-well-competition">
-        <Carousel className="carl-spt" indicators={false} interval={6000}>
-          <Carousel.Item className="carl-spt-item">
-            <a title="Click to view details" style={{ cursor: 'pointer' }} onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
-              <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
-            </a>
-            <Carousel.Caption className="caption">
-              <span style={spanStyle}>Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}</span>
-            </Carousel.Caption>
-          </Carousel.Item>
-          <Carousel.Item className="carl-spt-item">
-            <a title="Click to view details" style={{ cursor: 'pointer' }} onClick={() => PublicActions.displayReaction(reaction.id)}>
-              <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
-            </a>
-            <Carousel.Caption className="caption">
-    <span style={spanStyle}>Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}</span>
-            </Carousel.Caption>
-          </Carousel.Item>
-        </Carousel>
-      </div>
-    );
-  }
-  return <div />;
-};
-
-const CardSample = ({ lastPublishedSample }) => {
-  const sample = lastPublishedSample;
-  let svgPath = '/images/no_image_180.svg';
-  // let href = ''
-
-  if (sample) {
-    svgPath = sample.svgPath
-      ? `/images/samples/${sample.sample_svg_file}`
-      : `/images/molecules/${sample.molecule.molecule_svg_file}`
-    // href = `/molecules/${sample.molecule.id}`;
-    const pubTag = sample.tag && sample.tag.taggable_data['publication'] || {}
-
-    return (
-      <div className="card-well">
-        <div style={{ backgroundColor: 'white' }}>
-          <SVG style={{ backgroundColor: 'white' }} src={svgPath} key={svgPath}/>
-        </div>
-        <p style={{ textAlign: 'centered' }}>Published { timeInterval(pubTag.published_at || pubTag.doi_reg_at || pubTag.queued_at)} by {pubTag.creators[0].name}</p>
-        <ButtonToolbar>
-          <Button
-            onClick={() =>PublicActions.displayMolecule(sample.molecule.id)}
-            bsStyle="primary"
-            // href={href}
-          >
-            View
-          </Button>
-        </ButtonToolbar>
-      </div>
-    )
-  }
-  return (
-    <div className="card-well">
-      <SVG src={'/images/wild_card/no_image_180.svg'} />
-
-      <ButtonToolbar>
-        <Button bsStyle="primary" >
-          View
-        </Button>
-      </ButtonToolbar>
-    </div>
-  )
-}
-
-const CardIntro = () => {
-  return (
-    <div className="card-well">
-      <ImgTitle />
-    </div>
-  )
-}
-
-const ImgTitle = () => {
-  return (
-    <Row>
-      <Col md={6}>
-        <img
-          className="icon-chemotion"
-          src="/images/repo/chemotion_full.svg"
-          key="chemotion_full"
-          alt="icon"
-        />
-      </Col>
-      <Col md={6}>
-        <h2 className="repository-for" >
-          Repository for molecules, reactions and research data
-        </h2>
-      </Col>
-      <Col md={12} >
-        <h3>Visibility and Impact</h3>
-        <ul>
-          <li>
-            Publish your structures, attach your characterization data, and make them citable via DOI
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            Long-term archival - from scientists for scientists
-          </li>
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Now, publish your Reactions</i>
-          </li>
-        </ul>
-      </Col>
-    </Row>
-  )
-}
-
-const StaticsBoard = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-
-    const csInfo = {
-      borderBottomWidth: '6px', paddingLeft: 'unset', paddingRight: 'unset', borderColor: '#3a9fd3', marginBottom: '10px'
-    };
-    const csHead = {
-      backgroundColor: 'unset', color: 'unset', fontSize: '2rem', border: 'none', textAlign: 'center', paddingLeft: 'unset', paddingRight: 'unset'
-    };
-
-    return (
-      <Row className="card-well-competition">
-        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
-            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder' }}>
-              <div style={{ fontSize: '6rem' }}><i className="icon-sample" /></div>
-              <div style={{ fontSize: '1.6rem' }}>Samples</div>
-            </Row>
-          </Col>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
-            <Row style={{ textAlign: 'left' }}>
-              <div style={{ fontSize: '1.6rem', color: '#3a9fd3', marginBottom: '-14px' }}>published</div>
-              <div style={{ fontSize: '4rem' }}>{stsSample.e_cnt}</div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
-            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder' }}>
-              <div style={{ fontSize: '6rem' }}><i className="icon-reaction" /></div>
-              <div style={{ fontSize: '1.6rem' }}>Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={csHead}>
-            <Row style={{ textAlign: 'left' }}>
-              <div style={{ fontSize: '1.6rem', color: '#3a9fd3', marginBottom: '-14px' }}>published</div>
-              <div style={{ fontSize: '4rem' }}>{stsReaction.e_cnt}</div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info" style={csInfo}>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={{ ...csHead, padding: '0px' }}>
-            <Row style={{ lineHeight: 'normal', fontWeight: 'bolder', display: 'inline' }}>
-              <div style={{ fontSize: '5rem' }}><i className="fa fa-area-chart" aria-hidden /></div>
-              <div style={{ fontSize: '1.6rem' }}>Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={6} md={6} sm={6} className="panel-heading" style={{ ...csHead, padding: '0px' }}>
-            <Row style={{ textAlign: 'left' }}>
-              <div style={{ fontSize: '4rem' }}>{stsAnalysisCnt}</div>
-              <div style={{ fontSize: '1.4rem', fontStyle: 'italic', display: 'inline-block' }}>Top 3:&nbsp;&nbsp;
-                <span style={{ float: 'right' }}>
-                  <div className="italic-desc">{stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}</div>
-                  <div className="italic-desc">{stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}</div>
-                  <div className="italic-desc">{stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}</div>
-                </span>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
-class RepoHome extends Component {
-  constructor(props) {
-    super()
-    this.state = {
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.lastPublished();
-    PublicActions.publishedStatics();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(PublicState) {
-    if (PublicState.lastPublished || PublicState.publishedStatics) {
-      this.setState(prevState => ({
-        ...prevState,
-        lastPublished: PublicState.lastPublished,
-        publishedStatics: PublicState.publishedStatics
-      }));
-    }
-  }
-
-  render() {
-    const features = {
-      metadata: {
-        fa: 'fa fa-file-code-o',
-        title: 'Metadata',
-        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme 4.0.'
-      },
-      doi: {
-        fa: 'fa fa-id-card-o',
-        title: 'DOI',
-        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
-      },
-      license: {
-        fa: 'fa fa-creative-commons',
-        title: 'Licenses',
-        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
-      },
-      embargo: {
-        fa: 'fa fa-ban',
-        title: 'Embargo',
-        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
-      },
-      // usage: {
-      //   fa: 'fa fa-bar-chart',
-      //   title: 'Usage',
-      //   intro: 'Assess your research data and track the published research data......'
-      // },
-      // oai: {
-      //   fa: 'fa fa-tasks',
-      //   title: 'OAI Provider',
-      //   intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
-      // },
-      dataQuality: {
-        fa: 'fa fa-diamond',
-        title: 'Data Quality',
-        intro: 'Release your research data and pass an internal review that ensures data quality.'
-      },
-      peer: {
-        fa: 'fa fa-external-link',
-        title: 'Peer review',
-        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
-      },
-      store: {
-        fa: 'fa fa-database',
-        title: 'Storage',
-        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
-      },
-      api: {
-        fa: 'fa fa-connectdevelop',
-        title: 'APIs',
-        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
-      }
-    };
-
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={12}>
-          <Row>
-            <Col md={3} sm={12}>
-              <CardLatestPublish lastPublished={this.state.lastPublished} />
-            </Col>
-            <Col md={6} sm={12}>
-              <CardIntro />
-            </Col>
-            <Col md={3} sm={12}>
-              <StaticsBoard publishedStatics={this.state.publishedStatics} />
-            </Col>
-          </Row>
-          <Row>
-            <Col md={2} sm={12}>&nbsp;</Col>
-            <Col md={8} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Features
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={2} sm={12}>
-                  <div />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
-                </Col>
-                <Col md={2} sm={12}>
-                  <div />
-                </Col>
-              </Row>
-            </Col>
-            <Col md={2} sm={12}>&nbsp;</Col>
-          </Row>
-          <Row className="card-partners">
-            <Col md={12} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Partners, Affiliations, APIs
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="partner-row" >
-                    { Infos.map((info, index) => PartnersInfo(info, index)) }
-                  </div>
-                </Col>
-              </Row>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-export default RepoHome;
diff --git a/app/assets/javascripts/libHome/RepoHowTo.js b/app/assets/javascripts/libHome/RepoHowTo.js
deleted file mode 100644
index 00c109964..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div style={{ position: 'relative' }}>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (howto) => {
-  let imageUrl = '';
-  if (typeof (howto) !== 'undefined' && howto
-    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-    imageUrl = `/howto/${howto.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      {
-        imageUrl === '' ?
-          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
-            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-          </div>
-          :
-          <img
-            src={imageUrl}
-            style={{
-              display: 'block',
-              width: '100%',
-              height: 'auto'
-            }}
-            alt=""
-          />
-      }
-    </div>
-  );
-};
-
-export default class RepoHowTo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howtos: PublicStore.getState().howtos || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.howtos();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howtos) {
-      this.setState(prevState => ({
-        ...prevState, howtos: state.howtos
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initialHowTo()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_howto_editor
-        });
-      });
-  }
-
-  render() {
-    let { howtos } = this.state;
-    const { isEditor } = this.state;
-    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
-    howtos = orderBy(
-      howtos,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return howtos.length > 0 ? (
-      <Row className="howto_page">
-        <Col lg={12} md={12}>
-          <NewsList howtos={howtos} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) :
-      <Row className="howto_page" style={{ textAlign: 'center' }}>
-        <Col md={12}>
-          <BackSoonPage />
-        </Col>
-      </Row>;
-  }
-}
-
-const NewsColSmall = (param) => {
-  const { howto, isEditor } = param;
-  return (
-    <Col lg={12} md={12} sm={12} className="news_column">
-      <div className="news_card_content">
-        <div className="news_card_s">
-          <Col md={4} sm={12}>{mainImage(howto)}</Col>
-          <Col md={8} sm={12}>
-            <div className="card_info">
-              <div className="info">
-                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
-                <div className="news_content_card_s">
-                  <p />
-                  {howto.firstParagraph}
-                  <p />
-                </div>
-              </div>
-            </div>
-            <div className="read">
-              {renderEditRead(howto, isEditor)}
-            </div>
-          </Col>
-        </div>
-        <div className="news_card_badge_s">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
-          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
-          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
-        </div>
-      </div>
-    </Col>
-  );
-};
-
-const NewsList = (param) => {
-  const { howtos } = param;
-  return howtos.length > 0 ? (
-    <Row>
-      <Col md={1} />
-      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
-        <Row>
-          {
-            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
-          }
-        </Row>
-      </Col>
-      <Col md={1} />
-    </Row>
-  ) : <div />;
-};
-
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
deleted file mode 100644
index a503ce392..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
+++ /dev/null
@@ -1,67 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import uuid from 'uuid';
-
-const fa = klass => (<i className={klass} aria-hidden="true" />);
-const FaBtn = props => (
-  <OverlayTrigger placement={props.place} overlay={<Tooltip id={uuid.v4()}>{props.tip}</Tooltip>}>
-    <Button bsStyle={props.bsStyle} bsSize={props.bsSize} onClick={props.onClick} >
-      {props.txt}&nbsp;{fa(props.fa)}
-    </Button>
-  </OverlayTrigger>
-);
-FaBtn.propTypes = {
-  tip: PropTypes.string.isRequired,
-  txt: PropTypes.string.isRequired,
-  fa: PropTypes.string,
-  place: PropTypes.string,
-  bsStyle: PropTypes.string,
-  bsSize: PropTypes.string,
-  onClick: PropTypes.func,
-};
-FaBtn.defaultProps = {
-  fa: '',
-  place: 'top',
-  bsStyle: 'primary',
-  bsSize: 'small',
-  onClick: null,
-};
-
-const EditorBtn = props => (
-  <div className="editor-btn">
-    <FaBtn tip="Add Text Section" txt="Add" fa="fa fa-file-text-o" onClick={() => props.onClick('txt')} />
-    <FaBtn tip="Add Image Section" txt="Add" fa="fa fa-picture-o" onClick={() => props.onClick('img')} />
-  </div>
-);
-
-EditorBtn.propTypes = {
-  onClick: PropTypes.func,
-};
-
-EditorBtn.defaultProps = {
-  onClick: null,
-};
-
-const EditorBaseBtn = props => (
-  <div className="editor-btn">
-    {/* <FaBtn tip="Preview" txt="Preview" bsStyle="info" onClick={onClick} /> */}
-    <FaBtn tip="Save" txt="Save" bsStyle="success" onClick={() => props.onClick('save')} />
-    <FaBtn tip="Delete" txt="Delete" bsStyle="danger" onClick={() => props.onClick('delete')} />
-  </div>
-);
-
-EditorBaseBtn.propTypes = {
-  onClick: PropTypes.func,
-};
-
-EditorBaseBtn.defaultProps = {
-  onClick: null,
-};
-
-module.exports = {
-  FaBtn,
-  EditorBtn,
-  EditorBaseBtn,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
deleted file mode 100644
index b1f1609f4..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-
-export default class EditorImage extends Component {
-  handleDrop(files) {
-    if (files && files.length > 0) {
-      this.props.onChange('pfad', files);
-    }
-  }
-  render() {
-    return (
-      <div style={{ backgroundColor: 'white' }}>
-        <Dropzone
-          accept="image/*"
-          multiple={false}
-          onDrop={files => this.handleDrop(files)}
-          className="dropzone"
-        >
-          {
-            this.props.pfad !== '' ?
-              <div className="image-container">
-                <img src={`/${this.props.editor_type}/${this.props.pfad}`} alt="" />
-              </div>
-              : <p>Drop Files, or Click to Select.</p>
-          }
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-EditorImage.propTypes = {
-  pfad: PropTypes.string,
-  onChange: PropTypes.func,
-  editor_type: PropTypes.string,
-};
-
-EditorImage.defaultProps = {
-  pfad: '',
-  onChange: null,
-  editor_type: '',
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
deleted file mode 100644
index d3c05b6c5..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import QuillEditor from '../../components/QuillEditor';
-
-export default class EditorRichText extends Component {
-  handleChange(e) {
-    this.props.onChange('quill', e);
-  }
-  render() {
-    return (
-      <div style={{ backgroundColor: 'white' }}>
-        <QuillEditor
-          value={this.props.quill}
-          onChange={e => this.handleChange(e)}
-          extraToolbarOptions={[['link'], [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]]}
-        />
-      </div>
-    );
-  }
-}
-
-EditorRichText.propTypes = {
-  quill: PropTypes.object,
-  onChange: PropTypes.func,
-};
-
-EditorRichText.defaultProps = {
-  quill: null,
-  onChange: null,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
deleted file mode 100644
index 1af6593d7..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col } from 'react-bootstrap';
-import RepoHowToDragSource from '../RepoHowToDragSource';
-import RepoHowToDropTarget from '../RepoHowToDropTarget';
-import EditorRichText from '../RepoHowTo/EditorRichText';
-import EditorImage from '../RepoHowTo/EditorImage';
-import { FaBtn } from './EditorBtn';
-
-export default class EditorStelle extends Component {
-  handleChange(t, e) {
-    this.props.onChange(t, e, this.props.sid);
-  }
-
-  renderComponent() {
-    let label = '';
-    let component = <div />;
-    switch (this.props.stelle.art) {
-      case 'txt':
-        label = (<div className="editor-stelle">Text Section</div>);
-        component =
-          (<EditorRichText
-            quill={this.props.stelle.quill}
-            onChange={(t, e) => this.handleChange(t, e)}
-            sid={this.props.sid}
-            editor_type={this.props.editor_type}
-          />);
-        break;
-      case 'img':
-        label = (<div className="editor-stelle">Image Section</div>);
-        component =
-          (<EditorImage
-            pfad={this.props.stelle.pfad}
-            onChange={(t, e) => this.handleChange(t, e)}
-            sid={this.props.sid}
-            editor_type={this.props.editor_type}
-          />);
-        break;
-      default:
-    }
-
-    return (
-      <div>
-        {label}
-        {component}
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12} sm={12}>
-          <RepoHowToDropTarget
-            sid={this.props.sid}
-            stelle={this.props.stelle}
-            onDrop={this.props.onDrop}
-          />
-        </Col>
-        <Col md={12} sm={12}>
-          <div className="pull-right">
-            <FaBtn tip="remove this section" txt="" fa="fa fa-trash-o" bsStyle="danger" bsSize="xsmall" onClick={() => this.props.onRemove(this.props.sid)} />
-          </div>
-          <RepoHowToDragSource sid={this.props.sid} stelle={this.props.stelle} />
-          {this.renderComponent()}
-        </Col>
-      </Row>
-    );
-  }
-}
-
-EditorStelle.propTypes = {
-  sid: PropTypes.number.isRequired,
-  stelle: PropTypes.shape({
-    art: PropTypes.string,
-    quill: PropTypes.object,
-    pfad: PropTypes.string,
-  }).isRequired,
-  onDrop: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  editor_type: PropTypes.string.isRequired,
-};
-
diff --git a/app/assets/javascripts/libHome/RepoHowToDragSource.js b/app/assets/javascripts/libHome/RepoHowToDragSource.js
deleted file mode 100644
index 0873b66a2..000000000
--- a/app/assets/javascripts/libHome/RepoHowToDragSource.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const listSource = {
-  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
-
-export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
-
-RepoHowToDragSource.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowToDropTarget.js b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
deleted file mode 100644
index 09efb95a6..000000000
--- a/app/assets/javascripts/libHome/RepoHowToDropTarget.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const stelleTarget = {
-  drop(targetProps, monitor) {
-    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
-    const sourceProps = monitor.getItem();
-    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
-    if (targetTag.sid !== sourceTag.sid) {
-      targetProps.onDrop({ sourceTag, targetTag });
-    }
-  }
-};
-
-const stelleDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-
-class RepoHowToDropTarget extends Component {
-  render() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
-  }
-}
-
-export default DropTarget(
-  DragDropItemTypes.HOWTO,
-  stelleTarget, stelleDropCollect
-)(RepoHowToDropTarget);
-
-RepoHowToDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowToEditor.js b/app/assets/javascripts/libHome/RepoHowToEditor.js
deleted file mode 100644
index 7feca87b5..000000000
--- a/app/assets/javascripts/libHome/RepoHowToEditor.js
+++ /dev/null
@@ -1,435 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoHowToEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { howto } = this.state;
-    howto.article.push(stelle({ art: e }));
-    this.setState(howto);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { howto } = this.state;
-    const { article } = howto;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    howto.article = article;
-    this.setState(howto);
-  }
-
-  onStelleRemove(e) {
-    const { howto } = this.state;
-    howto.article.splice(e, 1);
-    this.setState(howto);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { howto } = this.state;
-    switch (art) {
-      case 'quill':
-        howto.article[sid].quill = e;
-        this.setState(howto);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.howto && state.howto.key) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, howto: { title: '', content: {}, article: [] }
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { howto } = this.state;
-    switch (type) {
-      case 'title':
-        howto.title = event.currentTarget.value;
-        break;
-      case 'content':
-        howto.content = event;
-        break;
-      case 'published_at':
-        howto.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        howto.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ howto });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { howto } = this.state;
-    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      howto.published_at = DateFormatDMYTime(howto.published_at);
-    }
-    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      howto.firstParagraph = extractIntro(howto.article);
-      ArticleFetcher.createOrUpdateHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              howto: { title: '', content: {}, article: [] },
-              message: { type: 'success', content: 'Send to How-To successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { howto } = this.state;
-      ArticleFetcher.deleteHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { howto } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'howto')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          howto.article[sid].pfad = result.pfad_image;
-          this.setState(howto);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { howto } = this.state;
-    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>How-To Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            {
-              imageUrl === '' ?
-                <div style={{ textAlign: 'center' }}>
-                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-                </div>
-              :
-                <img
-                  src={imageUrl}
-                  style={{
-                    display: 'block',
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                  }}
-                  alt=""
-                />
-            }
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { howto } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'howto')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            howto.cover_image = result.cover_image;
-            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      howto,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
-    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
-    const stelles = howto.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="howto"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={howto}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>How-To Editor</b></h2>
-              <p>
-                Give Chemotion readers some advice
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={howto.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoHowToReader.js b/app/assets/javascripts/libHome/RepoHowToReader.js
deleted file mode 100644
index 4728c4c69..000000000
--- a/app/assets/javascripts/libHome/RepoHowToReader.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoHowToReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howto) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    } else {
-      return (
-        <div style={{ textAlign: 'center', height: 'auto' }}>
-          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-        </div>
-      );
-    }
-
-    return (
-      <span>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { howto } = this.state;
-    return (
-      <Row className="howto_page">
-        <Col md={2} />
-        <Col md={8} sm={12}>
-          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-            <Panel.Heading>
-              <Row>
-                <Col md={6} sm={12}>
-                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
-                  <div className="news_author">
-                    <i className="fa fa-user-circle" aria-hidden="true" />
-                    &nbsp;{howto.creator_name}
-                    <p />
-                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
-                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
-                  </div>
-                </Col>
-                <Col md={6} sm={12}>
-                  {this.coverImage()}
-                </Col>
-                <Col md={12} sm={12}>
-                  <div style={{ position: 'relative', marginTop: '10px' }}>
-                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
-                  </div>
-                </Col>
-              </Row>
-              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
-            </Panel.Heading>
-            <Panel.Body>
-              <Col lg={1} md={2}><div /></Col>
-              <Col lg={10} md={8} sm={12}>
-                <div className="news_quillviewer">
-                  {
-                    howto.article ?
-                    howto.article.map((s) => {
-                      if (s.art === 'txt') {
-                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                      }
-                      if (s.art === 'img') {
-                        return (
-                          <div key={uuid.v4()}>
-                            <img src={`/howto/${s.pfad}`} alt="" />
-                            <br />
-                          </div>
-                        );
-                      }
-                    }) : <div />
-                  }
-                </div>
-              </Col>
-              <Col lg={1} md={2}><div /></Col>
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={2} />
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsEditor.js b/app/assets/javascripts/libHome/RepoNewsEditor.js
deleted file mode 100644
index 99218a3f8..000000000
--- a/app/assets/javascripts/libHome/RepoNewsEditor.js
+++ /dev/null
@@ -1,427 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoNewsEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { news } = this.state;
-    news.article.push(stelle({ art: e }));
-    this.setState(news);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { news } = this.state;
-    const { article } = news;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    news.article = article;
-    this.setState(news);
-  }
-
-  onStelleRemove(e) {
-    const { news } = this.state;
-    news.article.splice(e, 1);
-    this.setState(news);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { news } = this.state;
-    switch (art) {
-      case 'quill':
-        news.article[sid].quill = e;
-        this.setState(news);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.news && state.news.key) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, news: NewsroomTemplate
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { news } = this.state;
-    switch (type) {
-      case 'title':
-        news.title = event.currentTarget.value;
-        break;
-      case 'content':
-        news.content = event;
-        break;
-      case 'published_at':
-        news.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        news.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ news });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { news } = this.state;
-    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      news.published_at = DateFormatDMYTime(news.published_at);
-    }
-    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      news.firstParagraph = extractIntro(news.article);
-      ArticleFetcher.createOrUpdate(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              news: NewsroomTemplate,
-              message: { type: 'success', content: 'Send to Newsroom successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { news } = this.state;
-      ArticleFetcher.delete(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { news } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'newsroom')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          news.article[sid].pfad = result.pfad_image;
-          this.setState(news);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { news } = this.state;
-    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>News Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            <img
-              src={imageUrl}
-              style={{
-                display: 'block',
-                maxHeight: '100%',
-                maxWidth: '100%',
-              }}
-              alt=""
-            />
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { news } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'newsroom')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            news.cover_image = result.cover_image;
-            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      news,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
-    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
-
-    const stelles = news.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="newsroom"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={news}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>Newsroom Editor</b></h2>
-              <p>
-                Chemotion NEWS
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={news.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsReader.js b/app/assets/javascripts/libHome/RepoNewsReader.js
deleted file mode 100644
index 0e83e02d7..000000000
--- a/app/assets/javascripts/libHome/RepoNewsReader.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoNewsReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.news) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-    return (
-      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { news } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
-        <Col md={12} >
-          <Col md={2} />
-          <Col md={8} sm={12}>
-            <div className="chemotion_news">
-              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
-              &nbsp;Chemotion&nbsp;News
-            </div>
-          </Col>
-          <Col md={2} />
-        </Col>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-                <Panel.Heading>
-                  <Row>
-                    <Col md={6} sm={12}>
-                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
-                      <div className="news_author">
-                        <i className="fa fa-user-circle" aria-hidden="true" />
-                        &nbsp;{news.creator_name}
-                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
-                      </div>
-                    </Col>
-                    <Col md={6} sm={12}>
-                      {this.coverImage()}
-                    </Col>
-                  </Row>
-                  <br />
-                  <div className="heading_separator" />
-                </Panel.Heading>
-                <Panel.Body>
-                  <Col lg={1} md={2}><div /></Col>
-                  <Col lg={10} md={8} sm={12}>
-                    <div className="news_quillviewer">
-                      {
-                        news.article ?
-                          news.article.map((s) => {
-                            if (s.art === 'txt') {
-                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                            }
-                            if (s.art === 'img') {
-                              return (
-                                <div key={uuid.v4()}>
-                                  <img src={`/newsroom/${s.pfad}`} alt="" />
-                                  <br />
-                                </div>
-                              );
-                            }
-                          }) : <div />
-                      }
-                    </div>
-                  </Col>
-                  <Col lg={1} md={2}><div /></Col>
-                </Panel.Body>
-              </Panel>
-            </Col>
-            <Col md={2} />
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsroom.js b/app/assets/javascripts/libHome/RepoNewsroom.js
deleted file mode 100644
index 19e9f6020..000000000
--- a/app/assets/javascripts/libHome/RepoNewsroom.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy, slice } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div className="readedit">
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div className="readedit">
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (article) => {
-  let imageUrl = '/images/chemnews.png';
-  if (typeof (article) !== 'undefined' && article
-   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
-    imageUrl = `/newsroom/${article.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      <img
-        src={imageUrl}
-        style={{
-          display: 'block',
-          width: '100%',
-          height: 'auto',
-        }}
-        alt=""
-      />
-    </div>
-  );
-};
-
-export default class RepoNewsroom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      articles: PublicStore.getState().articles || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.articles();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.articles) {
-      this.setState(prevState => ({
-        ...prevState, articles: state.articles
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initial()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_article_editor
-        });
-      });
-  }
-
-  render() {
-    let { articles } = this.state;
-    const { isEditor } = this.state;
-    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
-    articles = orderBy(
-      articles,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return articles.length > 0 ? (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <LatestNews article={articles[0]} isEditor={isEditor} />
-            </Col>
-            <Col md={2} />
-          </Row>
-          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
-  }
-}
-
-const LatestNews = ({ article, isEditor }) => {
-  return (
-    <div className="news_latest_block">
-      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
-      <Col md={4} sm={12}>{mainImage(article)}</Col>
-      <Col md={8} sm={12}>
-        <Col md={12} sm={12}>
-          <span className="news_title">{article.title}</span>
-          <div className="news_content">
-            <p />
-            {article.firstParagraph}
-            <p />
-          </div>
-          <div>
-            {renderEditRead(article, isEditor)}
-          </div>
-        </Col>
-        <Col md={12} sm={12}>
-          <div className="heading_separator" />
-          <div className="news_author">
-            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
-            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
-          </div>
-        </Col>
-      </Col>
-    </div>
-  );
-};
-
-const NewsList = ({ articles, isEditor }) => {
-  return articles.length > 0 ? (
-    <Row>
-      <Col md={2} />
-      <Col md={8} sm={12}>
-        <Row>
-          <div className="news_time_box">
-            {
-              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
-            }
-          </div>
-        </Row>
-      </Col>
-      <Col md={2} />
-    </Row>
-  ) : <div />;
-};
-
-const NewsTBox = ({ article, isEditor }) => {
-  return (
-    <ul>
-      <li>
-        <span />
-        <div className="title">{article.title}</div>
-        <div className="content">{article.firstParagraph}</div>
-
-        <div className="author">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
-          {renderEditRead(article, isEditor)}
-        </div>
-        <div className="created_at">
-          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
-        </div>
-      </li>
-    </ul>
-  );
-};
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
deleted file mode 100644
index e8e2b3e92..000000000
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ /dev/null
@@ -1,713 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import {
-  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
-  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
-  FormGroup, FormControl, Nav, Navbar, Tooltip, OverlayTrigger,
-  Tabs, Tab
-} from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import UIActions from '../components/actions/UIActions';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import PubchemLabels from '../components/PubchemLabels';
-import RepoElementDetails from './RepoElementDetails';
-import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
-import AutoCompleteInput from '../components/search/AutoCompleteInput';
-import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
-import Formula from '../components/common/Formula';
-
-
-const pubchemTag = (molecule) => {
-  if (molecule && molecule.tag &&
-    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
-    return {
-      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
-    };
-  }
-  return false;
-};
-
-const renderReaction = (element, currentElement) => {
-  const listClass = (currentElement !== null && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={`list-reaction-${element.type}-${element.id}`}
-      className={listClass}
-      onClick={() => PublicActions.displayReaction(element.id)}
-    >
-      <td
-        colSpan="2"
-        style={{ position: 'relative' }}
-      >
-        <div>
-          <SVG src={element.svgPath} className="reaction" key={element.svgPath} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-export default class RepoPubl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // ...PublicStore.getState(),
-      page: 1,
-      perPage: 10,
-      showStructureEditor: false,
-      isSearch: false,
-      defaultSearchValue: null,
-      selectType: 'all',
-      inputDisabled: false,
-      queryMolfile: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      listType: 'reaction',
-      advFlag: false,
-      advType: 'Authors',
-      advValue: [],
-      selectUsers: [],
-      key: uuid.v4(),
-      showSearch: false
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.changeSort = this.changeSort.bind(this);
-    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
-    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
-    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
-    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
-    this.advSearchClick = this.advSearchClick.bind(this);
-    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
-    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleShowSearch = this.handleShowSearch.bind(this);
-  }
-
-  componentDidMount() {
-    PublicActions.selectPublicCollection.defer();
-    PublicStore.listen(this.onChange);
-    PublicActions.getReactions.defer();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleSearchTypeChange(e) {
-    this.setState({ searchType: e.target && e.target.value });
-  }
-
-  handleStructureEditorCancel() {
-    this.setState({ isSearch: false });
-    this.hideStructureEditor();
-  }
-
-  showStructureEditor() {
-    this.setState({ showStructureEditor: true });
-  }
-
-  hideStructureEditor() {
-    this.setState({ showStructureEditor: false });
-  }
-
-  showAdvancedSearch() {
-    this.setState({ advFlag: true });
-  }
-
-  handleSelectAdvType(val) {
-    if (val) { this.setState({ advType: val, advValue: null }); }
-  }
-
-  onPerPageChange(e) {
-    this.setState({ perPage: e.target.value }, () => this.getList());
-  }
-
-  getList(ps = {}) {
-    const {
-      advFlag, advType, advValue,
-      isSearch,
-      selectType, selection,
-      page, perPage,
-    } = this.state;
-    let params = {
-      advFlag,
-      advType,
-      advValue,
-      elementType: selectType,
-      page,
-      perPage,
-      selection,
-      ...ps
-    };
-    if (isSearch) {
-      switch (this.state.listType) {
-        case 'reaction':
-          PublicActions.getSearchReactions(params);
-          break;
-        case 'sample':
-          PublicActions.getSearchMolecules(params);
-          break;
-        case 'scheme':
-          params = { ...params, collectionId: 'schemeOnly' };
-          PublicActions.getSearchReactions(params);
-          break;
-        default:
-      }
-      return;
-    }
-    switch (this.state.listType) {
-      case 'reaction':
-        params = { ...params, schemeOnly: false };
-        PublicActions.getReactions(params);
-        break;
-      case 'sample':
-        PublicActions.getMolecules(params);
-        break;
-      case 'scheme':
-        params = { ...params, schemeOnly: true };
-        PublicActions.getReactions(params);
-        break;
-      default:
-        PublicActions.getReactions(params);
-    }
-    UIActions.clearSearchSelection();
-  }
-
-  handleClearSearchSelection() {
-    this.setState({
-      defaultSearchValue: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      queryMolfile: null,
-      isSearch: false,
-      key: uuid.v4(),
-      page: 1
-    }, () => this.getList());
-  }
-
-  handleElementSelection(event) {
-    this.setState({ selectType: event.toLowerCase() });
-  }
-
-  handleShowSearch() {
-    const { showSearch, advFlag } = this.state;
-    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
-  }
-
-  closeAdvancedSearch() {
-    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
-  }
-
-
-  loadAdvValuesByName(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  changeSort(e) {
-    this.setState({
-      // isSearch: false,
-      // defaultSearchValue: null,
-      page: 1,
-      listType: e
-    }, () => this.getList());
-  }
-
-
-  renderMolecule(molecule) {
-    const {
-      advFlag, advType, advValue, currentElement
-    } = this.state;
-    const pubchemInfo = pubchemTag(molecule);
-    const svgPathSample = molecule.sample_svg_file
-      ? `/images/samples/${molecule.sample_svg_file}`
-      : `/images/molecules/${molecule.molecule_svg_file}`;
-    const listClass = (currentElement !== null && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
-    return (
-      <tr
-        key={molecule.id}
-        className={listClass}
-        onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}
-      >
-        <td
-          colSpan="2"
-          style={{ position: 'relative' }}
-        >
-          <div style={{ float: 'left' }}>
-            <SVG src={svgPathSample} className="molecule" key={svgPathSample} />
-          </div>
-          <div style={{ paddingLeft: 5, wordWrap: 'break-word' }}>
-            <h4> <Formula formula={molecule.sum_formular} /> </h4>
-            <h4>
-              {molecule.iupac_name}
-              {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-            </h4>
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
-  renderMenuItems() {
-    const elements = [
-      'All', 'Samples', 'Reactions'
-    ];
-
-    const menu = elements.map(element => (
-      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
-        {element}
-      </MenuItem>
-    ));
-
-    return menu;
-  }
-
-
-  handleTanimotoChange(e) {
-    const val = e.target && e.target.value;
-    if (!isNaN(val - val)) {
-      this.setState({ tanimotoThreshold: val });
-    }
-  }
-
-  handleSelectionChange(selection) {
-    this.setState({
-      isSearch: true,
-      selection,
-      page: 1
-    }, () => this.getList());
-  }
-
-  structureSearch(molfile) {
-    const {
-      page,
-      perPage,
-      searchType,
-      selectType,
-      tanimotoThreshold
-    } = this.state;
-
-    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
-    const selection = {
-      molfile,
-      search_type: searchType,
-      tanimoto_threshold: tanimoto,
-      search_by_method: 'structure',
-      structure_search: true
-    };
-
-    this.setState(
-      {
-        isSearch: true,
-        selection,
-        page: 1,
-        defaultSearchValue: 'structure',
-        queryMolfile: molfile
-      },
-      () => PublicActions.getSearchMolecules({ // NB: use getList instead?
-        elementType: selectType,
-        page,
-        perPage,
-        selection,
-      })
-    );
-  }
-
-  handleStructureEditorSave(molfile) {
-    this.hideStructureEditor();
-    if (molfile) {
-      const molfileLines = molfile.match(/[^\r\n]+/g);
-      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
-        this.structureSearch(molfile);
-      } else {
-        // TODO: clear search?
-      }
-    }
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  onPaginationSelect(eventKey) {
-    const { pages } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      this.setState({ page: eventKey }, () => this.getList());
-    }
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-
-  renderSwitch() {
-    const { listType } = this.state;
-    return (
-      <Tabs
-        activeKey={listType}
-        onSelect={this.changeSort}
-        id="element-list-type"
-      >
-        <Tab eventKey="reaction" title="Reactions" />
-        <Tab eventKey="sample" title="Samples" />
-        <Tab eventKey="scheme" title="Scheme-only reactions" />
-      </Tabs>
-    );
-  }
-
-  renderSelectValues() {
-    const { advValue } = this.state;
-    return (
-      <Select.Async
-        multi
-        isLoading
-        backspaceRemoves
-        value={advValue}
-        valueKey="value"
-        labelKey="label"
-        loadOptions={this.loadAdvValuesByName}
-        onChange={this.handleSelectAdvValue}
-      />
-    );
-  }
-
-  handleSelectAdvValue(val) {
-    if (val) {
-      this.setState({ advValue: val });
-    }
-  }
-
-  advSearchClick() {
-    this.setState({ page: 1 }, () => this.getList());
-  }
-
-  renderAdvancedSearch() {
-    const { advFlag, advType, advValue } = this.state;
-    if (advFlag === true) {
-      this.listOptions = [
-        {
-          value: 'Authors',
-          label: 'by authors'
-        },
-        {
-          value: 'Ontologies',
-          label: 'by analysis type'
-        }
-      ];
-      return (
-        <div style={{ display: 'flex' }}>
-          <div>
-            <Select
-              simpleValue
-              searchable={false}
-              options={this.listOptions}
-              placeholder="Select search field"
-              clearable={false}
-              valueKey="value"
-              labelKey="label"
-              onChange={this.handleSelectAdvType}
-              defaultValue="Authors"
-              value={advType}
-              style={{ minWidth: '160px' }}
-            />
-          </div>
-          <div>
-            <Select.Async
-              multi
-              isLoading
-              backspaceRemoves
-              value={advValue}
-              valueKey="value"
-              labelKey="label"
-              loadOptions={this.loadAdvValuesByName}
-              onChange={this.handleSelectAdvValue}
-              style={{ minWidth: '200px' }}
-            />
-          </div>
-          <div>
-            <ButtonGroup>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
-                <Button onClick={this.advSearchClick} style={{ backgroundColor: 'rgb(221, 221, 221)' }}>
-                  <i className="fa fa-search" />
-                </Button>
-              </OverlayTrigger>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
-                <Button onClick={this.closeAdvancedSearch} style={{ backgroundColor: 'rgb(221, 221, 221)' }}>
-                  <i className="fa fa-times" />
-                </Button>
-              </OverlayTrigger>
-            </ButtonGroup>
-          </div>
-        </div>
-      );
-    }
-    return (<div />);
-  }
-
-  renderSearch() {
-    const { isSearch, defaultSearchValue } = this.state;
-    const customClass = '.btn-unified';
-
-    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
-    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
-
-    const buttonAfter = (
-      <ButtonGroup>
-        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
-          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
-            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
-          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-
-    const submitAddons = (
-      <Grid>
-        <Row>
-          <Col sm={6} md={4}>
-            <Form inline>
-              <Radio
-                ref={(input) => { this.searchSimilarRadio = input; }}
-                value="similar"
-                checked={this.state.searchType === 'similar'}
-                onChange={e => this.handleSearchTypeChange(e)}
-              >
-                &nbsp; Similarity Search &nbsp;
-              </Radio>
-              &nbsp;&nbsp;
-              <FormControl
-                style={{ width: '40%' }}
-                type="text"
-                value={this.state.tanimotoThreshold}
-                ref={(input) => { this.searchTanimotoInput = input; }}
-                onChange={e => this.handleTanimotoChange(e)}
-              />
-            </Form>
-          </Col>
-          <Col sm={4} md={2}>
-            <Radio
-              ref={(input) => { this.searchSubstructureRadio = input; }}
-              value="sub"
-              checked={this.state.searchType === 'sub'}
-              onChange={e => this.handleSearchTypeChange(e)}
-            >
-              Substructure Search
-            </Radio>
-          </Col>
-        </Row>
-      </Grid>
-    );
-
-    const inputAttributes = {
-      placeholder: 'IUPAC, InChI, SMILES, ...',
-      style: { minWidth: 168, maxWidth: 268 }
-    };
-
-    const suggestionsAttributes = {
-      style: {
-        marginTop: 15,
-        width: 398,
-        maxHeight: 400
-      }
-    };
-
-    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
-
-    const innerDropdown = (
-      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
-        <DropdownButton
-          id="search-inner-dropdown"
-          title={this.state.selectType === 'all' ? 'All' :
-          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
-        >
-          {this.renderMenuItems()}
-        </DropdownButton>
-      </OverlayTrigger>
-    );
-
-    return (
-      <div className="chemotion-search">
-        <div className="search-structure-draw">
-          <StructureEditorModal
-            showModal={this.state.showStructureEditor}
-            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
-            onCancel={this.handleStructureEditorCancel}
-            molfile={this.state.queryMolfile}
-            submitBtnText="Search"
-            submitAddons={submitAddons}
-          />
-        </div>
-        {
-          this.state.showSearch ?
-          (
-            <span>
-              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
-              </Button>
-              <div className="search-autocomplete">
-                <AutoCompleteInput
-                  key={this.state.key}
-                  inputAttributes={inputAttributes}
-                  inputDisabled={isSearch}
-                  defaultSearchValue={defaultSearchValue}
-                  suggestionsAttributes={suggestionsAttributes}
-                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
-                    this.state.selectType.toLowerCase(), input, 'public', false)}
-                  ref={(input) => { this.autoComplete = input; }}
-                  onSelectionChange={selection => this.handleSelectionChange(selection)}
-                  buttonBefore={innerDropdown}
-                  buttonAfter={buttonAfter}
-                />
-              </div>
-            </span>
-          ) :
-          (
-            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
-            </Button>
-          )
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      molecules, listType, reactions, currentElement, showSearch
-    } = this.state;
-
-    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
-      this.state.currentElement.publication.published_at) || (
-      this.state.currentElement && this.state.currentElement.published_samples
-      && this.state.currentElement.published_samples.length > 0 &&
-      this.state.currentElement.published_samples[0].published_at
-    )));
-
-    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
-
-    const elementList = () => {
-      switch (listType) {
-        case 'reaction':
-          return (reactions || []).map(r => renderReaction(r, currentElement));
-        case 'sample':
-          return (molecules || []).map(m => this.renderMolecule(m));
-        case 'scheme':
-          return (reactions || []).map(r => renderReaction(r, currentElement));
-        default:
-          return (reactions || []).map(r => renderReaction(r, currentElement));
-      }
-    };
-
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={isPubElement === true ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
-            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset', paddingLeft: 'unset' }} pullLeft>
-              {this.renderSearch()}
-            </Nav>
-            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset', paddingLeft: 'unset' }} pullLeft>
-              {this.renderAdvancedSearch()}
-            </Nav>
-            <Nav navbar className="navbar-form" style={{ marginTop: '5px', marginBottom: 'unset' }} pullRight>
-              {this.renderSwitch()}
-            </Nav>
-          </Navbar>
-
-          <div className={listClass} style={{ backgroundColor: '#f5f5f5' }} >
-            <Table className="sample-entries">
-              <tbody>
-                {elementList()}
-              </tbody>
-            </Table>
-          </div>
-          <div className="list-container-bottom">
-            <Row>
-              <Col sm={8}>{this.pagination()}</Col>
-              <Col sm={4}>{this.perPageInput()}</Col>
-            </Row>
-          </div>
-        </Col>
-        <Col
-          md={isPubElement === true}
-          // style={this.state.currentElement ? {} : { display: 'none' }}
-        >
-          <div className="public-element">
-            <RepoElementDetails />
-          </div>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
deleted file mode 100644
index 786e59478..000000000
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ /dev/null
@@ -1,556 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import {
-  Panel,
-  Row,
-  Col,
-  Jumbotron,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { head, filter } from 'lodash';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AuthorList,
-  AuthorTitle,
-  AffiliationList,
-  CalcDuration,
-  ChemotionId,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  DateInfo,
-  Doi,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalysesPanel,
-  IconLicense,
-  IconToMyDB,
-  AnalysesTypeJoinLabel,
-  SchemeWord,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
-import QuillViewer from '../components/QuillViewer';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
-
-export default class RepoReactionDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showScheme: true,
-      showRinchi: false,
-      showProp: true,
-      showTlc: true,
-      showSA: true,
-      showRA: {},
-      showReviewModal: false,
-      btnAction: '',
-      showCommentModal: false,
-      commentField: '',
-      originInfo: '',
-    };
-
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.toggleSA = this.toggleSA.bind(this);
-    this.toggleRA = this.toggleRA.bind(this);
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  toggleSA() {
-    const { showSA } = this.state;
-    this.setState({ showSA: !showSA });
-  }
-
-  toggleRA(idx = -1) {
-    const { showRA } = this.state;
-    if (idx in showRA && showRA[idx] === false) {
-      showRA[idx] = true;
-    } else {
-      showRA[idx] = false;
-    }
-    this.setState({ showRA });
-  }
-
-  handleToggle(type) {
-    switch (type) {
-      case 'Scheme':
-        this.toggleScheme();
-        break;
-      case 'Rinchi':
-        this.toggleRinchi();
-        break;
-      case 'Prop':
-        this.toggleProp();
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
-  }
-
-  handleSubmitReview(elementId, comments, summary, feedback, action) {
-    LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'reaction', comments, summary, feedback, action);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    const today = new Date();
-    const d = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()} `;
-    const t = `${today.getHours()}:${today.getMinutes() + 1}:${today.getSeconds()} `;
-    const dt = `${d} ${t}`;
-    if (this.props.reviewLevel === 2) {
-      cinfo[field].feedback = comment;
-      cinfo[field].origInfo = origInfo;
-      cinfo[field].feedback_time = dt;
-    } else {
-      cinfo[field].comment = comment;
-      cinfo[field].origInfo = origInfo;
-      cinfo[field].comment_time = dt;
-    }
-
-    PublicActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  reactionInfo(reaction) {
-    const {
-      showScheme, showRinchi, showProp, showTlc
-    } = this.state;
-    const {
-      canComment,
-      reviewLevel,
-      submitter,
-      pubState,
-      comments,
-    } = this.props;
-
-    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-    const content = reaction.description;
-    const additionInfo = reaction.observation;
-
-    const descContent = (content && content.ops && content.ops.length > 0
-      && content.ops[0].insert) ? content.ops[0].insert.trim() : '';
-    let descQV = (
-      <span><b>Description:</b><QuillViewer value={content} preview />
-      </span>);
-    if (descContent === '') descQV = '';
-
-    const addinfoContent = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 &&
-      additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim() : '';
-    let addQV = (
-      <span><b>Additional information for publication and purification details:</b>
-        <QuillViewer value={additionInfo} preview />
-      </span>);
-    if (addinfoContent === '') addQV = '';
-
-    const temperature = reaction.temperature ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : '';
-    const duration = CalcDuration(reaction);
-    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
-    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${reaction.rf_value || ''}]; TLC-Description: [${reaction.tlc_description || ''}]`;
-
-    const bodyAttrs = {
-      style: {
-        fontSize: '90%',
-        paddingBottom: 'unset'
-      }
-    };
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-    if (schemeOnly) {
-      if (canComment) {
-        return (
-          <RepoReactionSchemeInfo
-            reaction={reaction}
-            svgPath={svgPath}
-            showScheme={showScheme}
-            showRinchi={showRinchi}
-            showProp={showProp}
-            bodyAttrs={bodyAttrs}
-            onToggle={this.handleToggle}
-            comments={comments}
-            reviewLevel={reviewLevel}
-            pubState={pubState}
-            submitter={submitter}
-            onComment={this.handleCommentBtn}
-            propInfo={properties}
-            canComment={canComment}
-          />
-        );
-      }
-      return (
-        <RepoReactionSchemeInfo
-          reaction={reaction}
-          svgPath={svgPath}
-          showScheme={showScheme}
-          showRinchi={showRinchi}
-          showProp={showProp}
-          bodyAttrs={bodyAttrs}
-          onToggle={this.handleToggle}
-          canComment={canComment}
-        />
-      );
-    }
-    return (
-      <Panel style={{ marginBottom: '4px' }}>
-        <Panel.Body style={{ paddingBottom: '1px' }}>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <SVG key={svgPath} src={svgPath} className="reaction-details" />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={this.handleCommentBtn} />
-              <ReactionTable
-                reaction={reaction}
-                toggle={this.toggleScheme}
-                show={showScheme}
-                isPublic
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <div className="desc small-p">
-                <CommentBtn {...this.props} field="Description" orgInfo={descContent} onShow={this.handleCommentBtn} />
-                {descQV}
-              </div>
-              <div className="desc small-p">
-                <CommentBtn {...this.props} field="Additional information" orgInfo={addinfoContent} onShow={this.handleCommentBtn} />
-                {addQV}
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <ReactionRinChiKey
-                reaction={reaction}
-                toggle={this.toggleRinchi}
-                show={showRinchi}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Properties" orgInfo={properties} onShow={this.handleCommentBtn} />
-              <ReactionProperties
-                reaction={reaction}
-                toggle={this.toggleProp}
-                show={showProp}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="TLC-Control" orgInfo={tlc} onShow={this.handleCommentBtn} />
-              <ReactionTlc
-                reaction={reaction}
-                toggle={this.toggleTlc}
-                show={showTlc}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-
-  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false) {
-    if (typeof (container) === 'undefined' || !container) {
-      return <span />;
-    }
-
-    const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
-    const show = this.state.showRA[idx];
-    if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
-      return <div />;
-    }
-
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} element={product} isPublic={this.props.isPublished} isLogin={isLogin} /> : <span />;
-
-    const analysesView = analyses.map((analysis) => {
-      const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.handleCommentBtn} />
-          <RenderPublishAnalysesPanel
-            key={`${type}_${analysis.id}`}
-            analysis={analysis}
-            elementType={type}
-            isPublic={this.props.isPublished}
-          />
-        </span>
-      );
-    });
-
-    return (
-      <div>
-        <span
-          role="presentation"
-          className="label label-default"
-          style={{
-            backgroundColor: '#777777',
-            color: 'white',
-            fontSize: 'smaller',
-            fontWeight: 'bold',
-            cursor: 'pointer'
-          }}
-          onClick={() => this.toggleRA(idx)}
-        >
-          Analyses &nbsp;
-          <i className={`glyphicon ${show}`} />
-        </span>
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-          {AnalysesTypeJoinLabel(analyses, type)}
-        </span>
-        <Panel style={{ border: 'none' }} id={`collapsible_${type}_analyses`} expanded={show} defaultExpanded onToggle={() => { }}>
-          <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-              {productHeader}
-              {analysesView}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProductAnalysisView(products, isLogin = false) {
-    if (typeof (products) === 'undefined' || !products || products.length === 0) {
-      return <span />;
-    }
-    return products.map((product, idx) => (
-      <div key={`product-${product.id}`}>
-        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin)}
-      </div>
-    ));
-  }
-
-  render() {
-    const {
-      reaction,
-      isPublished,
-      canComment,
-      reviewLevel,
-      submitter,
-      pubState,
-      comments,
-      summary,
-      feedback,
-      canClose,
-    } = this.props;
-    let { buttons } = this.props;
-
-    if (typeof (reaction) === 'undefined' || !reaction) {
-      return <div />;
-    }
-
-    const taggData = (reaction && reaction.publication && reaction.publication.taggable_data) || {};
-    const pubData = (reaction && reaction.publication) || {};
-    const doi = (reaction && reaction.doi) || {};
-
-    const aId = [].concat.apply([], taggData.affiliation_ids);
-    const affiliationMap = {};
-    const { literatures } = reaction;
-    const references = literatures ? literatures.map(lit => (
-      <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
-        <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
-    const refArray = [];
-    let referencesText = '';
-    if (literatures) {
-      literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
-
-    let aCount = 0;
-    aId.map((e) => {
-      if (!affiliationMap[e]) {
-        aCount += 1;
-        affiliationMap[e] = aCount;
-      }
-    });
-    const license = taggData.license || 'CC BY-SA';
-
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-
-    let showDOI = <Doi type="reaction" id={reaction.id} doi={isPublished ? taggData.doi : doi} isPublished={isPublished} />;
-    if (schemeOnly) {
-      buttons = ['Decline', 'Comments', 'Accept'];
-      showDOI = '';
-    }
-
-    const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
-
-    return (
-      <div style={{ border: 'none' }}>
-        <div >
-          <Jumbotron key={`reaction-${reaction.id}`}>
-            {
-              canComment ?
-                <RepoReviewButtonBar
-                  element={{ id: reaction.id, elementType: 'Reaction' }}
-                  buttons={buttons}
-                  buttonFunc={this.handleReviewBtn}
-                  reviewLevel={reviewLevel}
-                  pubState={pubState}
-                  comments={comments}
-                  summary={summary}
-                  feedback={feedback}
-                /> : ''
-            }
-            {canClose ? <ClosePanel element={reaction} /> : ''}
-            <h4>
-              <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
-              <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />&nbsp;
-              {IconLicense(license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
-            </h4>
-            <br />
-            <ContributorInfo contributor={taggData.contributors} />
-            <h5>
-              <b>{AuthorTitle(taggData.author_ids)} </b>
-              <AuthorList creators={taggData.creators} affiliationMap={affiliationMap} />
-            </h5>
-            <AffiliationList
-              affiliations={taggData.affiliations}
-              affiliationMap={affiliationMap}
-            />
-            {showDOI}
-            <ChemotionId id={pubData.id} type="reaction" />
-            <h5>
-              <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
-              <b>Reference{references.length > 1 ? 's' : null}: </b>
-              <ul style={{ listStyle: 'none' }}>{references}</ul>
-            </h5>
-            <br />
-            <h5>
-              {this.reactionInfo(reaction)}
-            </h5>
-            {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction')}
-            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin)}
-          </Jumbotron>
-        </div>
-        {
-          canComment ? (
-            <div>
-              <RepoCommentModal
-                show={this.state.showCommentModal}
-                elementId={reaction.id}
-                elementType="reaction"
-                field={this.state.commentField}
-                orgInfo={this.state.originInfo}
-                state={pubState}
-                reviewLevel={reviewLevel}
-                submitter={submitter}
-                commentObj={comments[this.state.commentField]}
-                onUpdate={this.handleSubmitComment}
-                onHide={() => this.setState({ showCommentModal: false })}
-              />
-              <RepoReviewModal
-                show={this.state.showReviewModal}
-                elementId={reaction.id}
-                action={this.state.btnAction}
-                state={pubState}
-                reviewLevel={reviewLevel}
-                submitter={submitter}
-                comments={comments}
-                summary={summary}
-                feedback={feedback}
-                onSubmit={this.handleSubmitReview}
-                onHide={() => this.setState({ showReviewModal: false })}
-              />
-            </div>
-          ) : ''
-        }
-      </div>);
-  }
-}
-
-RepoReactionDetails.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
-  submitter: PropTypes.string,
-  pubState: PropTypes.string,
-  comments: PropTypes.object,
-  summary: PropTypes.string,
-  feedback: PropTypes.string,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-};
-
-RepoReactionDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  reviewLevel: 0,
-  submitter: '',
-  pubState: '',
-  comments: {},
-  summary: '',
-  feedback: '',
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-};
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
deleted file mode 100644
index 1ee3f144f..000000000
--- a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import {
-  Panel,
-  Row,
-  Col
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import SVG from 'react-inlinesvg';
-import { CommentBtn, ReactionTable, ReactionRinChiKey, ReactionProperties } from './RepoCommon';
-import QuillViewer from '../components/QuillViewer';
-
-const RepoReactionSchemeInfo = (props) => {
-  const content = props.reaction.description;
-  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const descQV = contentlength > 0 ?
-  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={props.svgPath} src={props.svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
-            <ReactionTable
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Scheme')}
-              show={props.showScheme}
-              isPublic
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Rinchi')}
-              show={props.showRinchi}
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-RepoReactionSchemeInfo.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  svgPath: PropTypes.string.isRequired,
-  showScheme: PropTypes.bool.isRequired,
-  showRinchi: PropTypes.bool.isRequired,
-  showProp: PropTypes.bool.isRequired,
-  bodyAttrs: PropTypes.object.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  comments: PropTypes.object,
-  reviewLevel: PropTypes.number,
-  pubState: PropTypes.string,
-  submitter: PropTypes.string,
-  propInfo: PropTypes.string,
-  onComment: PropTypes.func,
-  canComment: PropTypes.bool,
-};
-
-RepoReactionSchemeInfo.defaultProps = {
-  comments: {},
-  reviewLevel: 0,
-  pubState: '',
-  submitter: '',
-  propInfo: '',
-  onComment: () => {},
-  canComment: false
-};
-
-export default RepoReactionSchemeInfo;
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/assets/javascripts/libHome/RepoReview.js
deleted file mode 100644
index 620fcabd5..000000000
--- a/app/assets/javascripts/libHome/RepoReview.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
-import RepoReviewDetails from './RepoReviewDetails';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { IconToMyDB, SvgPath, ElStateLabel, ElSubmitTime, SchemeWord } from './RepoCommon';
-
-const renderElement = (e, currentElement) => {
-  if (e.type === 'Reaction') {
-    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-    const schemeOnly = (e && e.scheme_only === true) || false;
-    return (
-      <tr
-        key={e.id}
-        className={listClass}
-        onClick={() => PublicActions.displayReviewReaction(e.id)}
-      >
-        <td style={{ position: 'relative' }} >
-          <span className="review_element_label">
-            <IconToMyDB isLogin id={e.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-          </span>
-          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-          <div>
-            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-          </div>
-        </td>
-      </tr>
-    );
-  }
-  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => PublicActions.displayReviewSample(e.id)}
-    >
-      <td style={{ position: 'relative' }}>
-        <span className="review_element_label">
-          <IconToMyDB isLogin id={e.id} type="sample" />&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const defaultState = 'pending';
-
-export default class RepoReview extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 10,
-      elements: [],
-      currentElement: null,
-      selectType: 'All',
-      selectState: defaultState
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.getElements.defer();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleElementSelection(t, event) {
-    const { page, perPage } = this.state;
-    if (t === 'type') {
-      this.setState({ selectType: event });
-      PublicActions.getElements(event,this.state.selectState, 1, perPage);
-    } else if (t === 'state') {
-      this.setState({ selectState: event });
-      PublicActions.getElements(this.state.selectType, event, 1, perPage);
-    }
-  }
-
-
-  onPerPageChange(e) {
-    const { page, selectType, selectState } = this.state;
-    const perPage = e.target.value;
-    this.setState({ perPage });
-    PublicActions.getElements(selectType, selectState, page, perPage);
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  onPaginationSelect(eventKey) {
-    const { pages, perPage, selectType, selectState } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      PublicActions.getElements(selectType, selectState, eventKey, perPage);
-    }
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-  renderMenuItems(t, elements) {
-    const menu = elements.map(element => (
-      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
-        {element}
-      </MenuItem>
-    ));
-    return menu;
-  }
-
-  renderSearch() {
-    const customClass = '.btn-unified';
-    const optSearchType = ['All', 'Samples', 'Reactions'];
-    const optSearchState = ['pending', 'reviewed', 'accepted'];
-
-    const filterDropdown = (
-      <ButtonGroup>
-        <DropdownButton
-          className={customClass}
-          id="type-inner-dropdown"
-          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
-          style={{ width: '100px' }}
-        >
-          {this.renderMenuItems('type', optSearchType)}
-        </DropdownButton>
-        <DropdownButton
-          className={customClass}
-          id="state-inner-dropdown"
-          title={this.state.selectState}
-          style={{ width: '100px' }}
-        >
-          {this.renderMenuItems('state', optSearchState)}
-        </DropdownButton>
-      </ButtonGroup>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-  render() {
-    const { elements, currentElement } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch()}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement)) }
-                </tbody>
-              </Table>
-            </div>
-            <div className="list-container-bottom">
-              <Row>
-                <Col sm={8}>{this.pagination()}</Col>
-                <Col sm={4}>{this.perPageInput()}</Col>
-              </Row>
-            </div>
-          </div>
-        </Col>
-        <Col
-          className="review-element"
-          md={currentElement ? 8 : 0}
-          // style={this.state.currentElement ? {} : { display: 'none' }}
-        ><RepoReviewDetails />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
deleted file mode 100644
index 88d13bae8..000000000
--- a/app/assets/javascripts/libHome/RepoReviewButtonBar.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonToolbar,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoMetadataModal from '../components/common/RepoMetadataModal';
-
-const showButton = (btn, func, reviewLevel, pubState) => {
-  let title = btn;
-  let btnBsStyle = '';
-  let btnIcon = '';
-  let btnTooltip = '';
-  switch (btn) {
-    case 'Accept':
-      btnBsStyle = 'primary';
-      btnIcon = 'fa fa-paper-plane';
-      btnTooltip = 'Accept publication';
-      break;
-    case 'Review':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-exchange';
-      btnTooltip = 'Review publication, modification required for submittor';
-      break;
-    case 'Submit':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-play';
-      btnTooltip = 'Submit for publication';
-      break;
-    case 'Decline':
-      btnBsStyle = 'default';
-      btnIcon = 'fa fa-eject';
-      if (reviewLevel === 2) {
-        btnTooltip = 'Withdraw publication';
-        title = 'Withdraw';
-      } else if (reviewLevel === 3) {
-        btnTooltip = 'Reject publication';
-        title = 'Reject';
-      }
-      break;
-    default:
-      break;
-  }
-  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (reviewLevel === 2 && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
-    <OverlayTrigger
-      key={`ot_${title}`}
-      placement="top"
-      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
-    >
-      <Button
-        bsStyle={btnBsStyle}
-        onClick={() => func(true, btn)}
-      >
-        <i className={btnIcon} />&nbsp;{title}
-      </Button>
-    </OverlayTrigger>
-  ) : <span key={`span_${title}`} />;
-};
-
-const showCommentButton = (btn, func, comments, summary, feedback) => {
-  let hasComments = false;
-  if (Object.keys(comments).length > 0
-    || (summary && summary.length > 0)
-    || (feedback && feedback.length > 0)) {
-    hasComments = true;
-  }
-  return (
-    <OverlayTrigger
-      key="ot_comments"
-      placement="top"
-      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
-    >
-      <Button
-        bsStyle={hasComments ? 'success' : 'default'}
-        onClick={() => func(true, btn)}
-      >
-        <i className="fa fa-comments" />&nbsp;
-        Comments
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const RepoReviewButtonBar = props =>
-  (
-    <ButtonToolbar>
-      {
-        props.buttons.filter(b => b === 'Comments').map(b =>
-          showCommentButton(b, props.buttonFunc, props.comments, props.summary, props.feedback))
-      }
-      {
-        props.buttons.filter(b => b !== 'Comments').map(b =>
-          showButton(b, props.buttonFunc, props.reviewLevel, props.pubState))
-      }
-      <RepoMetadataModal
-        elementId={props.element.id}
-        elementType={props.element.elementType.toLowerCase()}
-      />
-    </ButtonToolbar>
-  );
-
-RepoReviewButtonBar.propTypes = {
-  element: PropTypes.shape({
-    id: PropTypes.number,
-    elementType: PropTypes.string
-  }).isRequired,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-  buttonFunc: PropTypes.func,
-  reviewLevel: PropTypes.number,
-  pubState: PropTypes.string,
-  comments: PropTypes.object,
-  summary: PropTypes.string,
-  feedback: PropTypes.string
-};
-
-
-RepoReviewButtonBar.defaultProps = {
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-  buttonFunc: () => { },
-  reviewLevel: 0,
-  pubState: '',
-  comments: {},
-  summary: '',
-  feedback: ''
-};
-
-export default RepoReviewButtonBar;
diff --git a/app/assets/javascripts/libHome/RepoReviewCommon.js b/app/assets/javascripts/libHome/RepoReviewCommon.js
deleted file mode 100644
index 790e6324e..000000000
--- a/app/assets/javascripts/libHome/RepoReviewCommon.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-import { startsWith } from 'lodash';
-
-const AffiliationMap = (affiliationIds) => {
-  const aId = [].concat.apply([], affiliationIds);
-  const affiliationMap = {};
-  let aCount = 0;
-  aId.map((e) => {
-    if (!affiliationMap[e]) {
-      aCount += 1;
-      affiliationMap[e] = aCount;
-    }
-  });
-  return affiliationMap;
-};
-
-const CommentComponent = (comment, title, feedback, feedbackTitle) => {
-  const reviewer = (comment ?
-    (
-      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
-        <strong>{title}</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{comment}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-  const submitter = (feedback ?
-    (
-      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
-        <strong>{feedbackTitle}</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{feedback}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-  return (
-    <span>
-      {reviewer}
-      {submitter}
-    </span>
-  );
-};
-
-const CommentDisplay = ({ elReview, commentKey }) => {
-  let objectKey = commentKey;
-  if (startsWith(commentKey, 'Reaction_Analysis_')) {
-    objectKey = 'Reaction Analysis';
-  } else if (startsWith(commentKey, 'Product_Analysis_')) {
-    objectKey = 'Product Analysis';
-  } else if (startsWith(commentKey, 'Analysis_')) {
-    objectKey = 'Analysis';
-  }
-
-  if (elReview) {
-    switch (objectKey) {
-      case 'Summary':
-        return CommentComponent(elReview.summary, 'Review Summary', elReview.feedback, 'Submitter Summary');
-      case 'Reference':
-      case 'Reaction Table':
-      case 'Description':
-      case 'Additional information':
-      case 'Properties':
-      case 'TLC-Control':
-      case 'Reaction Analysis':
-      case 'Product Analysis':
-      case 'Analysis':
-        return (elReview.comments && elReview.comments[commentKey]) ?
-          CommentComponent(
-            elReview.comments[commentKey].comment, `Review Comment on ${commentKey}`,
-            elReview.comments[commentKey].feedback, `Feedback on ${commentKey}`
-          ) : <div />;
-      default:
-        return <div />;
-    }
-  }
-  return <div />;
-};
-
-CommentDisplay.propTypes = {
-  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  commentKey: PropTypes.string.isRequired
-};
-
-CommentDisplay.defaultProps = {
-  elReview: null
-};
-
-export {
-  AffiliationMap,
-  CommentComponent,
-  CommentDisplay
-};
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
deleted file mode 100644
index e50834c7c..000000000
--- a/app/assets/javascripts/libHome/RepoReviewDetails.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoReviewDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element,
-      commentInfo: {},
-      summaryInfo: '',
-      feedbackInfo: '',
-      pubState: '',
-      reviewLevel: 0,
-      submitter: '',
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction':
-        return (
-          <RepoReactionDetails
-            reaction={currentElement.reaction}
-            canComment
-            reviewLevel={this.state.reviewLevel}
-            submitter={this.state.submitter}
-            pubState={this.state.pubState}
-            comments={this.state.commentInfo ? this.state.commentInfo : {}}
-            summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-            feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-          />);
-      case 'sample':
-        return (
-          <RepoSampleDetails
-            element={currentElement}
-            canComment
-            reviewLevel={this.state.reviewLevel}
-            submitter={this.state.submitter}
-            pubState={this.state.pubState}
-            comments={this.state.commentInfo ? this.state.commentInfo : {}}
-            summary={this.state.summaryInfo ? this.state.summaryInfo : ''}
-            feedback={this.state.feedbackInfo ? this.state.feedbackInfo : ''}
-          />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
deleted file mode 100644
index 68b13e86d..000000000
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel } from 'react-bootstrap';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AffiliationList,
-  AnalysesTypeJoinLabel,
-  AuthorList,
-  ChemotionId,
-  CommentBtn,
-  ContributorInfo,
-  DateInfo,
-  Doi,
-  IconLicense,
-  IconToMyDB,
-  RenderPublishAnalysesPanel,
-  SidToPubChem,
-  ToggleIndicator,
-} from './RepoCommon';
-import { AffiliationMap } from './RepoReviewCommon';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
-
-export default class RepoSample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expandSA: true,
-    };
-    this.toggleSA = this.toggleSA.bind(this);
-    this.renderAnalyses = this.renderAnalyses.bind(this);
-  }
-
-  toggleSA() {
-    const { expandSA } = this.state;
-    this.setState({ expandSA: !expandSA });
-  }
-
-  renderAnalyses(analyses) {
-    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
-    return orderAnalyses.map((analysis) => {
-      const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.props.handleCommentBtn} />
-          <RenderPublishAnalysesPanel
-            key={analysis.id}
-            analysis={analysis}
-            isPublic={this.props.isPublished}
-            elementType="Sample"
-          />
-        </span>
-      );
-    });
-  }
-
-  render() {
-    const {
-      sample, pubData, tagData, isPublished,
-      canComment, handleCommentBtn, isLogin
-    } = this.props;
-    const { expandSA } = this.state;
-
-    const affiliationMap = AffiliationMap(sample.affiliation_ids);
-
-    const references = sample.literatures ? sample.literatures.map(lit => (
-      <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
-
-    const refArray = [];
-    let referencesText = '';
-    if (canComment && sample.literatures) {
-      sample.literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
-
-    const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
-      ? <span />
-      : <h5><b>Name: </b> {sample.showed_name} </h5>;
-
-    const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
-    return (
-      <Jumbotron key={`sample-${sample.id}`}>
-        <h4>
-          <IconToMyDB isLogin={isLogin} id={sample.id} type="sample" />&nbsp;
-          <DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} />&nbsp;
-          <SidToPubChem sid={sample.sid} />&nbsp;
-          {IconLicense(sample.license, (sample.author_ids.length > 1))}
-        </h4>
-        <br />
-        {iupacUserDefined}
-        <ContributorInfo contributor={sample.contributors} />
-        <h5>
-          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
-          <AuthorList creators={sample.creators} affiliationMap={affiliationMap} />
-        </h5>
-        <AffiliationList
-          affiliations={sample.affiliations}
-          affiliationMap={affiliationMap}
-        />
-        <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
-        <ChemotionId id={pubData.id} type="sample" />
-        <h5>
-          {sample.reaction_ids.map(rid => (
-            <Button key={`reaction-link-btn-${rid}`} bsStyle="link" style={{ padding: '0px 0px' }} onClick={() => { window.location = `/home/publications/reactions/${rid}`; }}>
-              <i className="icon-reaction" style={{ fontSize: '1.5em' }} />{'Product of reaction'}
-            </Button>
-          ))}
-        </h5>
-        <h5>
-          <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
-          <b>Reference{references.length > 1 ? 's' : null}: </b>
-          <ul style={{ listStyle: 'none' }}>{references}</ul>
-        </h5>
-        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'} />
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-          {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
-        </span>
-        <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
-          <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-              {this.renderAnalyses(analyses)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </Jumbotron>
-    );
-  }
-}
-
-RepoSample.propTypes = {
-  sample: PropTypes.object.isRequired,
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-  canComment: PropTypes.bool,
-  handleCommentBtn: PropTypes.func,
-  isLogin: PropTypes.bool
-};
-
-RepoSample.defaultProps = {
-  canComment: false,
-  handleCommentBtn: () => {},
-  isLogin: false
-};
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
deleted file mode 100644
index 00d1ec23b..000000000
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import React, { Component } from 'react';
-import { Panel } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import {
-  ClosePanel,
-  MoleculeInfo,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
-import RepoSample from './RepoSample';
-
-export default class RepoSampleDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showReviewModal: false,
-      btnAction: '',
-      showCommentModal: false,
-      commentField: '',
-      originInfo: '',
-    };
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
-  }
-
-  handleSubmitReview(elementId, comments, summary, feedback, action) {
-    LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'sample', comments, summary, feedback, action);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    const today = new Date();
-    const d = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()} `;
-    const t = `${today.getHours()}:${today.getMinutes() + 1}:${today.getSeconds()} `;
-    const dt = `${d} ${t}`;
-    if (this.props.reviewLevel === 2) {
-      cinfo[field].feedback = comment;
-      cinfo[field].origInfo = origInfo;
-      cinfo[field].feedback_time = dt;
-    } else {
-      cinfo[field].comment = comment;
-      cinfo[field].origInfo = origInfo;
-      cinfo[field].comment_time = dt;
-    }
-
-    PublicActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  render() {
-    const {
-      element,
-      isPublished,
-      canComment,
-      reviewLevel,
-      submitter,
-      pubState,
-      comments,
-      summary,
-      feedback,
-      canClose,
-      buttons
-    } = this.props;
-
-    if (typeof (element) === 'undefined' || !element) {
-      return <div />;
-    }
-
-    const {
-      molecule, isLogin
-    } = element;
-
-    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
-
-    let samples = [];
-    let pubData = {};
-    let tagData = {};
-    let { sample } = element;
-    if (isPublished) {
-      samples = element.published_samples;
-      sample = samples.find(x => x !== undefined);
-      sample.id = sample.sample_id;
-    } else {
-      samples.push(element.sample);
-      pubData = element.publication;
-    }
-
-    tagData = (pubData.taggable_data) || {};
-    const details = (samples || []).map((s) => {
-      if (isPublished) {
-        pubData = {
-          id: s.pub_id
-        };
-        tagData = {
-          published_at: s.published_at,
-          doi_reg_at: s.doi_reg_at
-        };
-      }
-      const el = {
-        id: s.id || s.sample_id,
-        sid: s.sid,
-        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
-        affiliations: s.affiliations || tagData.affiliations,
-        literatures: s.literatures || element.literatures,
-        license: s.license || tagData.license || 'CC BY-SA',
-        author_ids: s.author_ids || tagData.author_ids || [],
-        contributors: s.contributors || tagData.contributors,
-        creators: s.creators || tagData.creators,
-        doi: s.doi || element.doi,
-        reaction_ids: s.reaction_ids || [],
-        showed_name: s.showed_name,
-        molecule_iupac: molecule.iupac_name || [],
-        analyses: s.analyses || element.analyses || []
-      };
-
-      return (
-        <RepoSample
-          key={el.id}
-          sample={el}
-          pubData={pubData}
-          tagData={tagData}
-          handleCommentBtn={this.handleCommentBtn}
-          isLogin={idyLogin}
-          {...this.props}
-        />
-      );
-    });
-
-    return (
-      <Panel style={{ border: 'none' }} >
-        <Panel.Body>
-          {
-            canComment ?
-              <RepoReviewButtonBar
-                element={{ id: sample.id, elementType: 'Sample' }}
-                buttonFunc={this.handleReviewBtn}
-                reviewLevel={reviewLevel}
-                pubState={pubState}
-                comments={comments}
-                summary={summary}
-                feedback={feedback}
-                buttons={buttons}
-              /> : ''
-          }
-          {canClose ? <ClosePanel element={sample} /> : ''}
-          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
-          <div>
-            {details}
-          </div>
-          {
-            canComment ?
-              <div>
-                <RepoCommentModal
-                  show={this.state.showCommentModal}
-                  elementId={sample.id}
-                  elementType="Sample"
-                  field={this.state.commentField}
-                  orgInfo={this.state.originInfo}
-                  state={pubState}
-                  reviewLevel={reviewLevel}
-                  submitter={submitter}
-                  commentObj={comments[this.state.commentField]}
-                  onUpdate={this.handleSubmitComment}
-                  onHide={() => this.setState({ showCommentModal: false })}
-                />
-                <RepoReviewModal
-                  show={this.state.showReviewModal}
-                  elementId={sample.id}
-                  action={this.state.btnAction}
-                  state={pubState}
-                  reviewLevel={reviewLevel}
-                  submitter={submitter}
-                  comments={comments}
-                  summary={summary}
-                  feedback={feedback}
-                  onSubmit={this.handleSubmitReview}
-                  onHide={() => this.setState({ showReviewModal: false })}
-                />
-              </div> : ''
-          }
-
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-RepoSampleDetails.propTypes = {
-  element: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
-  submitter: PropTypes.string,
-  pubState: PropTypes.string,
-  comments: PropTypes.object,
-  summary: PropTypes.string,
-  feedback: PropTypes.string,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-};
-
-RepoSampleDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  reviewLevel: 0,
-  submitter: '',
-  pubState: '',
-  comments: {},
-  summary: '',
-  feedback: '',
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-};
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/assets/javascripts/libHome/homeRoutes.js
deleted file mode 100644
index 2e73d3f61..000000000
--- a/app/assets/javascripts/libHome/homeRoutes.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import PublicActions from '../components/actions/PublicActions'
-import PublicFetcher from '../components/fetchers/PublicFetcher'
-
-const routes = {
-  '/': 'root',
-  target: {
-    root: function(e) {
-      Aviator.navigate('/home/welcome')
-    }
-  },
-
-  '/welcome': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("welcome")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/home': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("home")
-      },
-    },
-    '/': 'show'
-  },
-  '/publications': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("publications")
-      },
-    },
-    '/': 'show'
-  },
-  '/review': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("review")
-      },
-    },
-    '/': 'show'
-  },
-  '/about': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("about")
-      },
-    },
-    '/': 'show'
-  },
-  '/contact': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("contact")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/newsroom': {
-    target: {
-      list: function (e) {
-        PublicActions.articles();
-      },
-      show: function (e) {
-        PublicActions.displayArticle(e.params.key)
-      },
-    },
-    '/': 'list',
-    '/:key': 'show'
-  },
-
-  '/newseditor': {
-    target: {
-      edit: function (e) {
-        PublicActions.editArticle(e.params.key)
-      },
-      show: function (e) {
-        PublicActions.editArticle('new')
-      },
-    },
-    '/show': 'show',
-    '/:key': 'edit'
-  },
-
-  '/howtoeditor': {
-    target: {
-      edit: function (e) {
-        PublicActions.editHowTo(e.params.key)
-      },
-      show: function (e) {
-        PublicActions.editHowTo('ein')
-      },
-    },
-    '/show': 'show',
-    '/:key': 'edit'
-  },
-
-  '/directive': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("directive")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/datasets': {
-    target: {
-      show: function(e) {
-        PublicActions.displayDataset(e.params.datasetId)
-      },
-    },
-    '/:datasetId': 'show'
-  },
-
-  '/molecules': {
-    target: {
-      show: function(e) {
-        PublicActions.displayMolecule(e.params.moleculeId)
-      },
-    },
-    '/:moleculeId': 'show'
-  },
-
-  '/reactions': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReaction(e.params.reactionId)
-      },
-    },
-    '/:reactionId': 'show'
-  },
-
-  '/pid': {
-    target: {
-      show: function(e) {
-        PublicFetcher.queryPid({id: e.params.id})
-        }
-    },
-    '/:id': 'show'
-  },
-
-  '/inchikey': {
-    target: {
-      show: function(e) {
-        let url = e.uri.replace("/inchikey/", "")
-        let query = url.split(".")
-
-        if (query.length > 0) {
-          let version = query[1] || ""
-          let splitIndex = query[0].indexOf("/")
-          if (splitIndex < 0) splitIndex = query[0].length
-          let params = {
-            inchikey: query[0].substring(0, splitIndex),
-            type:  query[0].substring(splitIndex + 1),
-            version: version
-          }
-
-          PublicFetcher.queryInchikey(params)
-        }
-
-      },
-    },
-    '/*': 'show'
-  },
-
-  '/review_reaction': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReviewReaction(e.params.reactionId)
-      },
-    },
-    '/:reactionId': 'show'
-  },
-
-  '/review_sample': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReviewSample(e.params.sampleId)
-      },
-    },
-    '/:sampleId': 'show'
-  },
-
-  '/embargo': {
-    target: {
-      list: function (e) {
-        PublicActions.openRepositoryPage("embargo");
-      },
-      show: function (e) {
-        PublicActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
-      },
-    },
-    '/': 'list',
-    '/:elementType/:elementId': 'show'
-  },
-
-  '/howto': {
-    target: {
-      list: function (e) {
-        PublicActions.howtos();
-      },
-      show: function (e) {
-        PublicActions.displayHowTo(e.params.key)
-      },
-    },
-    '/': 'list',
-    '/:key': 'show'
-  },
-}
-
-export default function() {
-  Aviator.root = '/home'
-  Aviator.pushStateEnabled = true
-  Aviator.setRoutes(routes)
-}
diff --git a/app/packs/src/components/ContainerDataset.js b/app/packs/src/components/ContainerDataset.js
index c0eae8c06..7d99f085c 100644
--- a/app/packs/src/components/ContainerDataset.js
+++ b/app/packs/src/components/ContainerDataset.js
@@ -12,7 +12,6 @@ import GenericDS from './models/GenericDS';
 import GenericDSDetails from './generic/GenericDSDetails';
 import { absOlsTermId } from '../admin/generic/Utils';
 import Container from './models/Container';
-import UserStore from '../components/stores/UserStore'
 
 import InboxActions from './actions/InboxActions';
 import InstrumentsFetcher from './fetchers/InstrumentsFetcher';

From ec0a015de5c1ad763576480e440181eefa5ae31a Mon Sep 17 00:00:00 2001
From: ComPlat Team - KIT IBCS-FMS <chemotion@ioc.kit.edu>
Date: Wed, 27 Sep 2017 15:19:21 +0200
Subject: [PATCH 242/258] REPO FACTOR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

remove download zip button
fix font size analys content description
add bottom nav bar
revamp top navbar

pubchem tag in public molecule list

enable search for unsigned user

public search

suggestionapi set var if no current user for public coll

BE: search_api: serialized result for public molecule

FE: public store receive search result too

disable groups UI

fix Nav header in ELN view

navbar: remove search/element actions for non sample/react elements

change routing

revamp style for publication list/element
change routing  to publication/molecules/:id

refact href to onClick

change route root to pages (nginx dual site)

welcome routing

enable user devise confirmable

FE publish sample: fix missing argument

public api inchikey
add params validation
default analysis version to 1 if no version while comparing with params version

fix sample publication
-- reintroduce analyses selection for publication (broken thru dnd analyses reordering)
-- fix coauthor id (broken thru reactselect upg)

change default check analysis selection for sample publish

publish analyses default checked using null and true instaed of boolean becasue the extended_metadata value is coerced into string

fix attachment copy

fix publish doi/pubchem
fix sample dataset versioning for doi token
loop throug sample publication tag for authors and affiliations

implement new datacite schema
revamp publication concern

upg upd pubchem tag thru sample

dedicated publication logger

allow collection array arg in CollectionSample.create_in_collection

Sample publication Datacite/Pubchem
split process into distinct DJs

fix search suggestion on publications page when logged

WIP revamp PublishSampleModal

WIP

f job move to final collection

f

reverse kind analysis options

wip publication tag +revamp

welcome page upd last sample view with new publiation tag struct

disabled checkbx analysis selection if already published

tag analysis as published in extended_metadata column

fix route for analysis kind having white space

f

pick 818eff6 REPO FACTOR
s 760b833 remove download zip button fix font size analys content description add bottom nav bar revamp top navbar
s 7db9740 pubchem tag in public molecule list
s 40059a3 enable search for unsigned user
s 08c12d2 disable groups UI
s 4e939a9 change routing
s e244e47 enable user devise confirmable
s 2fc9ee6 FE publish sample: fix missing argument
s 64f8cdd fix attachment copy
s d48bf69 fix publish doi/pubchem fix sample dataset versioning for doi token loop throug sample publication tag for authors and affiliations
s c1bd3b7 upg upd pubchem tag thru sample
s 0cf8dd8 dedicated publication logger
s 2fab086 allow collection array arg in CollectionSample.create_in_collection
s 74f8d4d Sample publication Datacite/Pubchem split process into distinct DJs
s 7f97cc9 fix search suggestion on publications page when logged
s aaec7c1 WIP revamp PublishSampleModal
s 6389a27 WIP
s c76de3b f job move to final collection
s d245e57 f
s 403cee5 reverse kind analysis options
s 4498f05 wip publication tag +revamp
s 0ca4452 welcome page upd last sample view with new publiation tag struct
s b725bec disabled checkbx analysis selection if already published
s b02fdf1 tag analysis as published in extended_metadata column
s c009c22 fix route for analysis kind having white space
s 7b12b5c f

hide collection management button

hide shared & sync collection selection trees

fix private method container publication

add molecule name to public sample detail view

sort molecules in public collection

add publishedTag to samples in  user sample lists

add doi link to publication tags of published elements in ELN view

hide create new collection in moving/assigning elements modal

User Collections fixes

hide user own collections
do no create a locked 'chemotion.net' collection for new user
but instead  'ELN Gate' and 'My Data'

mv chemotion label to publish common

tag published molecule with doi too

chemotiontag revamp

change ELN navbar color to gradient

up collection tree

nav bar font white

register repo token into eln for gate data transfer

remove gradient nav bar

btn-unified class

sample export xls: exp chemotion doi tag if present

fix origanization input: disabled to readonly

fix missing sync collection for new user persons

correct updating chemotion molecule tag

publication detail restyle

xls export analyses doi

fix analysis publish checkbox:

reload sample after publish

fix checkbox toggle

log analyses selection to publish

log WIP disable publish api

https doi metadata

upg sync_coll entity for public collections

upd Terms n Conditions

categorize literatures for pulbicl collection elements

persons can add references to public elements through
literature managmt panel as for their own elements
ref are categorized as 'public'

list public literature in element detail view

f

display cited literature wiht referer in public publication list

fix lit flux api

add doi table/model

fix checkbox add analyses to publish

do not backup uploads

doi reservation : fix doi model routine

fix displaying published molecule associated to published samples missing their publication tag

fix bug from attachment polymorphism upgrade

publish UI add accordeon

rework doi model, publication concern

mv publish button to publishCommon, disable btn when already published

serialize user affiliation

unassociate analyses doi if inchikey changed

popover information for doi reservation

upd doi seeding

DJ params fix fatal: hash keys cannot be integer: stringify analyses id

log DC metadata xml to upload as separate files in log/

WIP

fix pannel after bootstrap upg

fix pagination after bootstrap upg

fix ci

root page link to chemscanner

publish reaction UI completed

backend code complete, but still need testing (especially doi part)

add published button on reaction list and header

re-add LabelPublication on header

fix the username display issue

public reaction backend

db/schema

f

fix do not expect new reaction to have tag data

move publish sample/reaction out of sample/reactionAPI to dedicated repo api

fix anonymous search

reactionPublishBtn upg

publishBtn: workaround with overlaytrigger on disabled Btns

publish reaction btn on publishable reactions

mount repositoryAPI

clean repoAPI

do not uses sample.analyses but sample.container

publish analysis: fix checkbox toggle

bootstrap fix table props

repo publishmodal fx panel-group assistech prop warning

reaction publish btn: disabling/tooltip message upg

reactionPubModal fx warning iter key

green header for public detail panel &  welcome page upg:

- in ELN view, elemt detail panel has green header instead of blue if elemt is public
- rm directive content iframe, use component instead -> NB this duplicate the info
- footer upg
- rm footer from publications page
- rm osadl partner card
- change institute link to brase group
- change banner color/font

repository search

hide reaction publishbtn

disable reaction publication api

add chemotion logo on welcome page

fix sample doi fetcher analyses filter

mv publish actions/fetchers to dedicated classes

repo api mv helper

repo_api upg

repo api fix

clean deprec residual react.proptype

f

search api fx to work on public page when logged in

repo api wip

FE fix iterator uniq key

repo_api wip

WIP

publish sample JOB upd

WIP_pubreact_DRY

DRY FE repository fetchers

reaction inchi routines for product only rinchi

publish reaction: duplicate reaction BE logic

reaction publish tag

DJ reactionpublish

repo api fix

deletejob

f_job

f_job

f_dj_publish

f_DJ

show publish reaction btn

fix replacmt ElementActions by RepositoryActions

reaction svg composer pass options

disable green chemistry tab

DJ publish fx

sync public collection for new user: allow reaction details

f

fix dois generation when count > 10

update molecule tag: only for sample not reaction

fix xml metadata reaction

DJ publish reaction fix

hisde pub reaction btn for public reaction

repo_api reaction fix

publish reaction prepare prod

public reaction detail panel green header

doi redirect simplified

routing redirect from reaction dois

ELN: error when att.copy => rm include  attachment concern assm/JCAMP

WIP reaction list view

add Formula

Reactant and starting material should not in publications

Add conditions to filter out the sample which is as
starting material/reactant in reaction.

If a sample is published as 'Sample', it will be shown on the
publication list.

If a reaction is published, the 'Product'(sample) will also be published
and shown on the publication list. The 'starting material' and 'reactant'
will not be shown on the list.

BE/FE fetch reaction list

f

Affiliation output: rm group from affiliation

publications table: add original element

WIP revamp job chain

toggle for sample and reaction search

reaction page

Publication: added ancestry

fix search_by_method and remove wellplat and screen codes

Create Publication entries w ancestry for each element

- rev duplicate anaylses container

revamp xml metadata files

WIP new publishing process job

Publishing job

pseudo state machine for Publication model
added transition in Publication model

todo: clean element tagging, doibag, xml metadata

fix

WIP FE check taggable_data of publication

repo_api fx

add 'reaction/' to reaction doi suffix
remove html formatting from doi metadata

search

fx publishing pubchem registr

routes fixes

doi link

deploy config

fix routes

doi url

redirect reaction

fix sample publish

the latest publish sample on landing page

set publish switch button size and position

Publication Rinchi fixed

reaction detail 10

reaction additional info backend

Additional information on publication reaction

Add:
1. Expand/Collapse RInChiKey information
2. Status, Start, Stop, Duration, Temperature, Additional information
for publication and purification details
3. TLC-Control information

Publications analyses re-layout

Relayout the Sample and Reaction on publications. The details are as
below:

- Reaction
1. Remove title (Short Label/Name) from Reaction

- Sample
1. Remove Reaction data from Sample

- Sample and Reaction
1. Rename 'Datasets' as 'Analyses'
2. Expand/Collapse analyses at one click
3. Remove the outer(the first layer) border

- Datasets
1. Expand/Collapse analyses at one click

remove RenderAnalysis

published reaction literature display

provided a reaction link on sample detail for publication

Analyses types in one line

User can expand/collapse analyses list by clicking analyses list header.
The types are listed together on the header and separate with ','. Also
put the symbol in front of the type(s) to indicate its Sample or Reaction.

Analyses preview function

When user click on the preview image of analyses, display the original
image for user.

This function is available only when user sign in already. If user
click the preivew but he/she does not sign in, a system notification
shows up in the top center to remind him/her 'Please sign in first'.

Additional updates on:
1. Only import the one which is used from 'lodash', not import all from 'lodash'
2. Remove unused imports
3. Add semicolon

Analyses format

Align UI elements.
Add some styles to make analyses more readable.
When user double click Content, more space is added and looks like it
is expanded. Fix by removing the theme setting on render.

Reaction in the centre and remove start stop

Remove 'float: left' to set reaction image in the centre of reaction
list.

Remove 'Start' and 'Stop' information.

Use Div instead of FormControl to make the TLC-Description looks not
like an input column.

Rename some panel id, e.g. use 'collapsible-panel-rinchis' instead of
'collapsible-panel-example-1'.

Console warning about unique key and inline

Add 'key' pop and inline='true' to fix below warnings:
1. Warning: Received 'true' for a non-boolean attribute 'inline'
2. Warning: Each child in an array or iterator should have a unique 'key' prop

Public pagination and duplicate molecules

When user uses switch button to list samples or reactions, the pages
need to be calculated by samples or reactions.

Additional:
When user uses 'Search', e.g. input inchistring and then search, the
duplicate molecules show on the sample list and the pages go wrong.
Fix this by using '.uniq' on api and 'molecules.size' for totalElement.

repository scheme

fix redirect

fix doi suffix generation for reaction duplicate

Reaction doi route

Add .version if the version exists.

Test on local environment:

1. With http://localhost:3000/inchikey/reaction/SA-FUHFF-UHFFFADPSC-UHFFFADPSC-UHFFFADPSC-NUHFF-NUHFF-NUHFF-ZZZ,
it goes to Reaction id 22.

2. With http://localhost:3000/inchikey/reaction/SA-FUHFF-UHFFFADPSC-UHFFFADPSC-UHFFFADPSC-NUHFF-NUHFF-NUHFF-ZZZ.1,
it goes to Reaction id 23.

3. With http://localhost:3000/inchikey/RJQVSFJIBQPCLA-UHFFFAOYSA-N,
it goes to Molecule 1287.

4. With http://localhost:3000/inchikey/RJQVSFJIBQPCLA-UHFFFAOYSA-N.1,
it goes to Molecule 1287.

scheme issue fix and layout

Disable reaction publish button after publish

After user use publish button to publish a reaction, this button should
be disabled so user can not publish the same reaction again.

The render() of ReactionDetails is not triggered properly when state is
changed, so the UI remains the same and does not display correctly with
the latest data. Use forceUpdate() to force execute the render().

fix sample doi reservation

disable sample publish button after publish

Add scroller and toggle panel into publish reaction modal

Add scroller into publish reaction modal so the user can scroll up and
down to view the publish details. Some styles are added to fit the modal.

Add toggle function on RInChiKey, Properties. and TLC.

Additional:
Eliminate some ESLint warning, e.g. use textAlign not text-align,
className not class, fontSize not font-size...etc.

sample publish after update

sample reserve dois spinning icon

Toggle panel into publication reaction

Add toggle on Analyses of publication reaction; publication sample also.

hide ManagingAction share-button

Reaction Reserve DOIs

in landing page add link to spectraviewer

migrate legacy published samples/analyses to table publication and sorting the taggable_data

publish sample and reaction analyses check

rm secrets for testing

publication page description disable when no data

analysis sorting

fx_task

Analysis preview for the public

The public can preview the analysis image, no need to sign in the
system.

Summary:
1. copy publication image file to public folder when doing duplicate
datasets and copy attachments
- The file path format is 'public/images/publications/{attachment.id}/{attachment.filename}'.
- Copy the one which will be in table: publications, not the original ones.

2. fetch image file from public folder if the user is from the public, otherwise,
use the the original api which gets the image file from store
- If the fetch file fails, use thumbnail instead so user will not get any system error.
And we are aware that the image file does not exist in public folder from console log.

3. one-time task 'ver_20190128000004_copy_image_to_public' is created
- Use this task to copy the image files to the public folder. It fetches
the image files from table: publications with state='completed' and
element_type='Container' and then copy to public folder.

4. Add preview function on Dataset

Gemfile upgrade

Publication Review Process

upd mail config/development

enable reaction publishing

fix reviewing button visibility and api

mv state logic to job fix typo

reaction publication author display issue

publish check

reaction analysis publish

fix

change link to new repo hostname

New Chemotion landing page

notification for reaction and sample publish

enable cap deploy slack notification

root page: text change for link to repo

url link updates in publication mailer message

root page link to dev repo

lit api fix

lint_js

WIP_analyses_selection_checkbox_issue

typo analysis type options

fix for retracted publication

fix routing that cause break page

add last publish reaction to previous layout version

reaction and sample publish analyses checkbox issue

update publish_at

repo page routing

update deploy config

publication review

f_typo

routes and review

fix review page with literature

manual reject publication

News

Two new environment variables: ARTICLE_EDITOR, ARTICLE_PATH
E.g. ARTICLE_EDITOR: '2,7'
(user.id = 2 and user.id = 7 have the auth. to create/edit the article;
if this variable does not exist, no one are allowed to create/edit articles )
E.g ARTICLE_PATH: 'public/newsroom/'
(the stroge path for article content;
if this variable does not exist, the code will use 'public/newsroom' as default)

One new table: articles (refer to migration file)

One new gem: Moneta (refer to Gemfile)

Please refer to GitLab #148 for the UIs and details.

analysis-by-product-on-repository-page

element to review collection

change-scollection-to-collection-for-the-icon-link

disable-repo-qrcode-function

View comment with full screen size

8 fils are committed, including 2 new files:
'ReactionDetailsRepoComment.js' and 'SampleDetailsRepoComment.js'.

'ElementDetails.js', 'ReactionDetails.js' and 'SampleDetails.js'
are more ELN related and are changed to control the comment page on/off.
There other files are more Repository related.

doi report

reload fix

Fixed 'edit is not working' issue; new timeline layout of news index page

symlink newsroom for deploy

fix reaction display when reaction has no analyses

Fix by not to nest DOM elements directly under Nav component

gem upg

Js warning about id, key, expanded props and validateDOMNesting

Eliminate the javascrip warning below (when loading Sample or Reaction
in respoitory)
1. Warning: Each child in an array or iterator should have a unique
'key' prop.
2. Warning: Failed prop type: The prop id is required to make
 accessible for users of assistive technologies such as
screen readers.
3. Warning: validateDOMNesting(...): Whitespace text nodes cannot
appear as a child of <tbody>. Make sure you don't have any extra
whitespace between tags on each line of your source code.
4. Warning: Failed prop type: You have provided a  prop to
 without an  handler prop. This will render a
read-only field. If the field should be mutable use .
Otherwise, set .

responsive page for mobile

doi download fix

How-To functionality

Similar to function: Newsroom, only the different look. So the data is
stored in public folder as one index file and the others for content.
The new environment variables are added. There is no default cover image
file for How-To, use css instead.

Two new environment variables: GUIDANCE_EDITOR, GUIDANCE_PATH
E.g. GUIDANCE_EDITOR: '2,7'
(user.id = 2 and user.id = 7 have the auth. to create/edit the How-To article;
if this variable does not exist, no one are allowed to create/edit How-To articles )
E.g GUIDANCE_PATH: 'public/guidance/'
(the stroge path for HOW-To article index and content;
if this variable does not exist, the code will use 'public/guidance' as default)

Move some codes to RepoCommon for common use.

How To: reword Guidance to HowTo

Guidance -> HowTo
guidance -> howto
GUIDANCE -> HOWTO
GUIDACNE -> HOWTO

ArticleAPI: fix  user validation

add overlay

ChemDoodle molfile cleaning task

bcc reviewer

Set default route to welcome page, no matter user sign in or not

Notification/mail to submitter after review: content change

do not show 1H NMR check at public analysis

prevent app breaking

default to root page

reduce  font size lnading page panel

display reaction.duration if there, otherwise, display (end_time - start_time); fix blank page issue when user copy reaction and then publish in one move

config/deploy/howtox

Js warning on review page and published reaction

Fix the warnings below:
1. Warning: Received 'true' for a non-boolean attribute 'striped'.
If you want to write it to the DOM, pass a string instead: striped='true' or striped={value.toString()}.
    in tbody (created by RepoReview)
also: bordered, hover

2. Warning: Failed prop type: You have provided a expanded prop to Panel without an onToggle handler prop.
This will render a read-only field. If the field should be mutable use defaultExpanded. Otherwise, set onToggle.

3. Warning: Failed prop type: Invalid prop 'reaction' of type 'Object' supplied to 'ReactionTable',
expected instance of 'Reaction'.
    in ReactionTable (created by ReactionInfo)
also: ReactionRinChiKey, ReactionProperties, ReactionTlc

4. Remove unused variables

search review list

show lastest sample svg

show sample svg file in the publication list

add url on doi report

publishing message

Pubchem with no cid

check if cid null

Style improvement and published date on howto and news

1. add Published_At; default value is Created_At
2. the list is order by Published_At
3. set image style in quilleditor as 50vw
4. styling to fit small device

add counter in collection

repo-add-new-analysis-publication-fix

fix pubchem metadata doi

fix repo search issue

readonly when reaction published

Add Reviewed Collection

select reference when sample or reaction publish

repo search fix

Use Exact mass instead of Mass

refresh list after clicking review or accept

fix warning: typo class/className

sort analyses by extended_metadata.index

push state and routing cleanup

use aviator push state: absolute path no anchor
clean anchor on /mydb and /home path
redirecting on authenticate

mydb repo logo url

fix howto and newsroom path

disable reaction delete button when published

is_publish check fix

Submit with embargo

Submitter can put an embargo on his/her Sample/Reaction when he/she submits
for publication.

A new menu item named 'Embargoed Publications' is added on the menu.

A new collection named 'Embargoed Publications' is added on the collection
if user has put embargo on.

Submitter can generate a temporary account by clicking on 'Anonymous acct.',
and he/she will get the email with account and password from system.

Submitter can release an embargo only when all elements of this embargoed
collection are in state accepted.

Once the embarged is released, the related anonymous accounts will become invaild.

fix about page link

add skip_confirmation! when creating account

add alert and notification

display only when temperature is given

Display completed content of an analysis

Includes:
1. Remove the word 'Type' and 'Content'.
2. Display all of the content of an analysis.

This change is applied for: Publications page, Review page, Embargoed Publications page.

Stay on submission modal and download doi

Keep modal showed after clicking 'Reserve DOIs'
One new button behinds 'Reserved DOIs' for downloading DOIs in csv file format.

fix post processing embargo release

Not recognize activeKey prop warning on review and embargoed page

Warning: React does not recognize the 'activeKey' prop on a DOM element. If
         you intentionally want it to appear in the DOM as a custom
         attribute, spell it as lowercase 'activekey' instead. If you
         accidentally passed it from a parent component, remove it from the
         DOM element.

It is related to Nav and Navbar/NavbarForm. Remove and add css for styling.

publication decline and submitter comments

add page contactÄ

fix mail_reviewed_request

delete embargo function

clean js warning, refer to #215 for the details

Add Embargo description

fitler product which has no doi

Analyses in review and mydb view have same sequence

1. Sorting analyses in Review and Embargo page before rendering Analyses information
2. Remove console.log
3. Replace 'dark' with 'default' to eliminate js warning

decline button title

fix the currentElement null issue

repository license link

fix upload issue with .basename and add few css for UI

Metadata preview and download

A new feature Metadata on Review Page, user can preview/download
Metadata which send to Datacite in one zip file.

Refer to https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/223
for details.

process remove from all collections review

add metadata download button on publication page

Get first few lines, e.g. 6 lines, as sub-description

state changed before job called

Styling on How-To

We make some updates based on the feedback from Nicole. Please refer to
https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/230.

Besides,
Use cache: no-store to see if it works for the file cache issue.

howto and news now public

job to get SID by DOI

icon to link pubchem sid

clean db/migrate

fx

howto rm labels

scrollbar adjustment

Statistics info

Add total number of Samples, total number of Reactions, and
(the top 3) total number of Analyses on Welcome page.

reaction-submissions-mandatory-check

w

disable publish button when sample is unsaved

OLS for doi

update Gemfile.lock

fix reaction product doi display issue

advanced search by author for sample

sorting by published at

analysis-type-join-with-synonym

use trim to removes all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.)

upd schema

advanced search by ontologies

Submissions mandatory check for re-submit

Apply submission checks when user re-submit reaction or sample. We still
perform these checks in front-end (not as title described).

When publish a sample, molecule(sample) check will be performed.

When user publish a reaction, both reaction check and molecule(sample) check
will be performed in one go.

If user publish a sample which is associated with a reaction, the system
will pop-up a message with reaction link so user can go to reaction to publish.

advanced search prevent sql injection

embargo pubchem

cap deploy: link public/ontologies dir

Creative Common License

Add 'Choose license' with CC0, CC BY and CC BY-SA options on user
submission; use CC BY-SA as default value.

Remove 'Creative Common License' relateds from page bottom.

Based on Datacite metadata schema 4.1 (which is used by chemotion_REPO),
this license data will be part of metadata_xml with tag <rights>
(under <rightsList>) and we will use the title/description from
Creative Common, which are
- Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) for CC BY-SA
- Attribution 4.0 International (CC BY 4.0) for CC BY
- CC0 1.0 Universal for CC0

Three SVGs(CC BY-SA, CC BY, CC0) from Creative Common
are added to public/images/creative_common.

show state accepted to review page

fix solvent calculation

fix solvent

submission be analyses type check

Check if kind value is with |

User registration: enable organisation input

Use Directive: upd txt for commercial use

directive in public html file

- render partial from public/directives/diretives.html for new
registration page
- react parse html for directive tab page

- content:
 -- add email for retraction
 -- precise cookie info
 -- adapt for commercial use license

directives content: fix html reserved charactes and other typos

directives: add list of available licenses

Add related identifier for reaction analyses and product

Add reaction analyses DOIs into relatedIdentifiers of datacite reaction xml, with relationType is 'HasPart'.
Add reaction DOI into relatedIdentifiers of datacite sample xml, with relationType is 'IsPartOf'.

Plus:
Encode 'description' of datacite reaction xml.

Consent of license

Add Legal Code link for user to view the license legal code.
Two checkboxes are added for CC0 license to get user's consent.

fix affiliation sorting and review display

A public api to get published molecule id, reference: https://git.scc.kit.edu/ComPlat/chemotion_ELN/issues/794

fix no action connected when user click How-To Editor in the dropdown

add delete doi api on datacite

Display authors information on published dataset page

Add 'Published On', 'Authors' and affiliation information on dataset page.

Select Coauthors lists ELN confirmed accounts

Only confirmed accounts are listed in Select Coauthors; filter out coauthors
with confirmed_at is nil when processing publish procedure.

remove affiliation group code

Submission check on co-author data

Check if co-author is valid or not; if co-author is invalid,
user will get the error message and the submission will stop.

exclude 103 on sync collection label

upd Gemfile.lock

rm env data

upd README for repo

non-published-reaction-goes-to-list-view

show short_label on review list

fix publication search alignment and add space on author name

Show under review and under embargo statics

About page: upd licensing txt

highligt current selected element in the list - publication, review, and embargo

bug fix on review page when reviewing element has analysis without type

use editor blocks instead of only one quilleditor

pid routing

TOS update

sid job with completed only

generate doi when structure changed and accept

TOS upd

reviewer comments save WIP

Independent scroll bar in review comment panel

When user clicks on 'Reviewer comment' of MyDB, the system displays MyDB data
and submission data in one screen for user to view detail data and comments
from the reviewer at the same time.
Add scroll bar for MyDB data and submission data so user can inspect the data
by scrolling the document separately.

Additional: use 'pre-wrap' for summary comment.

repo review button bugfix

add chemspectra deploy config

fix review with comments on details

embargo to remove pending tag

pubchem_V2000 T9 filter

Export collections for mydata and elngate only

Only 'My Data' collection and 'ELN Gate' collection are used in
Repository. Therefore, remove other collections(incl. 'All') from
'Export collections' UI.

Disable 'Import collections' from menu due to the current logic of
ELN 'Import collections' function is not suitable for Repository.

sort published reaction by published date

chr id

Search reaction function

Add search function on Publications page when switch type is Reaction.
Additional:
1. Set default value in case the user has no layout data.
2. Rebuild pg_search by using rake with 'rake pg_search:multisearch:rebuild[Reaction]' or
in the console with 'PgSearch::Multisearch.rebuild(Reaction)' or 'PgSearch::Multisearch.rebuild(Reaction, false)'.

Add features on Welcome page

change from ChRx to CRx

add reviewer and public collection to env setting

npm: svg-zoom downgrade back to 0.1.5

typo uniq ChemRep id

rename chemspectra

new editor for newsroom

make the reactions visible per default (instead of molecules)

REPO copy to clipboard analysis desc

Revert "Resolve "report-fetch-with-buffer""

This reverts commit 51ce7aa858db70c9eabfcb8e061627a375b4736c.

Report: [1] fetch list by difference [2] fix load sync & share elements

Update ITG to IBCS

About page:
- change 'Institute of Toxicology and Genetics (ITG)' to 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)'
- change 'Institute of Toxicology and Genetics' to 'Institute of Biological and Chemical Systems – Functional Molecular Systems'

Contact page:
- change 'Institute of Toxicology and Genetics (ITG)' to 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)'

Additional change: code linting

News room for the chemotion.net page

Refer to https://git.scc.kit.edu/ComPlat/Zettelkasten/issues/43
Modification:
1. Add 'Newsroom' link on the main page.
2. Clean code

Duration of reaction is mandatory for submission

Add validation on Duration of reaction. Duration is mandatory for submission.
Note: For re-submit/publish case, the validation of Duration is already existed.

Indicate the mandatory fields for publication

Add 'RequiredLabel' as a common component to indicate mandatory fields for submission.

review page with filter set to pending by default

13C counting: count missing signal statement

wip, yield

wip

switch switch to tabs

disable scheme-only reaction publication

publishing concern: clean

WIP revamp review job

fix method naming when oub declined

mv collection logic to pub model

use state constant

WIP refactor reviewing job move logic to model

refactor declined thru element deletion

DRY repo_api by moving logic to publication model

lint

tmp fix to not email some reviewers

lint

WIP DRY

Quillviewer not to remove formating

atom count in analysis NMR description
allow decimal count
fix  H nested bracket count

add scheme only on public view, env variables, and lint

scheme only BE

fix reject samples

check if regenerate doi is needed

disable reserved DOI

pagination for review page

f

Reaction product doi display incorrect

Use taggable_data

scheme only yield and author

DRY for sample/reaction details of repository

Common:
1. split MetadataModal, ReviewModal, CommentModal, CommentBtn into files

Reaction:

1. add RepoReactionDetails.js
2. replace the codes for rendering reaction details with RepoReactionDetails.js
- RepoReviewDetails.js
- RepoEmbargoDetails.js
- RepoElementDetails.js
- ReactionDetails.js
- ReactionDetailsRepoComment.js

Sample:

1. add RepoSampleDetails.js, RepoSample.js
1. replace the codes for rendering sample details with RepoSampleDetails.js
- RepoReviewDetails.js
- RepoEmbargoDetails.js
- RepoElementDetails.js
- SampleDetailsRepoComment.js

Features:
1. User can leave the comment on ELN view now
2. User can only close the modal by clicking on Close button or the Close icon (x) on the right-top

Bug-fixes:
1. Click Dataset link and get blank page
2. Get blank page on Review when switch from Publications and currentElement exists
3. Align labels on Publications view

Link to mydb missing on review panel

Add codes to identify enabled/disabled MyDB link from different response structure.

Align content of analysis on view page

Add style to align the analysis content with ID element.

show fulldoi on review

move embargo to another embargo bundle

All validated analyses selected by default

The validated analysis is checked/selected(publish=true) by default.
If users uncheck/unselect the analysis, then this analysis will not
be checked/selected automatically in the future even it is validated.

reaction publish duration

show contributor as published by as priority

correct script error

upd db/schema

fix reaction duration set value

scheme only doilink and description and properties

Page margin of element detail

Use the scroll of panel when element detail is basic view (not full screen)

f

Add codes to identify enabled/disabled MyDB link from different response structure.

hidden search input by default

MyDB case

show user define iupac name on publication

public view search tool: fix suggestion and search

TODO check suggestion/search on schemOnly

Style search input of publications

1. reset search input of StructureEditor
2. align elements

Eager loading detected on clicking mydb

Refer to https://git.scc.kit.edu/ComPlat/chemotion_REPO/-/merge_requests/292
Use .joins to get the count of Sample and Reaction

change published analyses from Serializer to Entity

publication preview image fix

Missing reaction description on publications

1. Show 'Description' and 'Additional information' if there is any.
2. Set defaultExpanded of 'Reaction Table' as false.
3. Wording, please refer to https://git.scc.kit.edu/ComPlat/Zettelkasten/issues/65
4. Put Formula/IUPAC on a new line if any
5. Add DOI copy function on the elements of Review page

modify publication validation message

fix withdraw issue when original element is deleted

doi copy function by default

1. add doi copy function to Product and it analyses on Review and Embargo page
2. set defaultExpanded of RInchiKey panel as false, of Reaction Table panel as true

Blank page after resubmit reaction with new added product

Add logic to handle user re-submit with new added product case.

disable mailing to reviewer

upgrade to schema 4.3

disable-jcamp-process-when-element-submit

disable sending mail to reviewers

REPO FACTOR

Update chem_scanner gem, text in table is not used while splitting

Update chem_scanner gem, treat charge independently with fragment

Skip if there is any error while processing CDX

Update new version of chem_scanner gem

Use backend ketcher for Chemscanner

 Conflicts:
	package-lock.json

Configurize ketcher URL

show published scheme only reaction literature in ELN view

deploy config upd

fix deploy config for ketchBE

Style search and smile of publications page

1. apply harsh edge to search
2. fix border and overlap
3. fix smile data goes beyond the tabs

add help infomation on tabs of publications

incorrect-substructure-search-data-display-on-publication

rearrange statistic layout

readable statistic info when resize browser window

new intro style

search by chemotion-id

Yield validation of submission

If the yield is not given in the publishing panel, there should be a
warning and the submission only allowed if the yield is given.

For multiple products case, at least one should be non zero.

This applies for both reaction and scheme-only reaction.

Note: scheme-only reaction can only be rejected or accepted;
Therefore, re-submit is not applicable to scheme-only.

add element_type on suggestion

review history

Save collapse settings

Add ArchivedManagement view: manage archived/actived files

Update product name while importing

Chemscanner importing run as a delayed job

Delete descendant source if parent is deleted

Use rdkit for SVG composer for chem_scanner, update chemscanner_composer

review history column history fix

review-column-history-info-collapse

new style for 'no preview available' case

enable prediction function for view user

repo review search

activate Anonymous account by default

activejob_dj_overrides

User comments

fix publishing job retry

Set as default to use description field

For 'scheme-only', set 'add the description field?' as checked by default

fix block syntax

Analysis preview thumb and image no match

Issue:
On publications page, user clicks on the preview image of analysis and gets thumb file in pop modal. (w/o login)
On publications page, user clicks on the preview image of analysis and gets a different image in pop modal. (w/ login)

Fix:
1. When user re-submits with new attachments, these attachments should be copied to publications folder
2. Refactor the preview_image: add id and filename as return value

Additional:
1. DRY with previewContainerImage
2. Remove unused codes

Contributor information

Add an information for the scheme only submissions at the publication page assigned to the 'Contributor'.

User comments for sample and reaction

null analyses affiliation

export doi info

fix repo reaction container issue

info button for table, description and additional information... field

Add info for 'scheme', 'description' and 'additional information...' fields of Reaction.
Display info while hovering the text for required fields; set font color as red to mark it as required field

info text upd

show/hide help-button and linting

fix repo search bug

correct email

change to the right type

xvial input and display

add compound link

update per feedback from https://git.scc.kit.edu/ComPlat/chemotion_REPO/-/merge_requests/333#note_191189

UI control and improvement on xvial

Per request,
- the registered sentence only appears in the cases where an X-Vial number is entered
- the X-Vial number is not visible to all users
- add the email address of the requesting user to the mail; send the request email to compound team and send the confirmation email to the requester
- add to the information button about Youtube channel and our how-to pages

Remind user to log in to send request

Secret external label

The external label of sample is not visible for all users (except the reviewer and
the owner himeself/herself) if the sample is published. This also applies for
the case when user chooses to 'Show sample external name on title'.

Add DOI in SI report

there is a case that collection_label of reactant is empty

fixed no response on substructure search

remove review history from published element

eliminate js warning

element-tag-doi-for-reviewing-elements

element-remove-from-contributor-pending-collection-after-release

send-email-when-pubchem-timeout

no-process-embargo-rejected-sample

fix process element

move collection before deletion

doi doc report: rm unnecessary whitespace

delete elements fix

use DOI in report supporting-information-standard-reaction

Product X-Vial

1. Add X-Vial function on product
2. Add info button on X-Vial button
3. Remove X-Vial information from published reaction list

add xvial to public reaction list

disable instrument tex for publication and visible for reviewing

increase author list to 10

eliminate js warning

Analysis view button on public page

Add viewing spectra function on analysis of public samples, and reaction product as well.

enlarge image when hovering, and zoom function on svg of detail

lizenz text gestaltung

1. text adjustment per request
2. add 'No License' option; when user chooses 'No License', there will be
no license icon or wording shown on the page and the no rights data
sent to dataCite.

add animation on MyDB link

my collaboration WIP

service

collaborator-current-affiliations
---
 .env.test                                     |   31 -
 README.md                                     |    4 +-
 app/api/chemotion/collection_api.rb           |   14 +
 app/api/chemotion/public_api.rb               |  515 ++++
 app/api/chemotion/user_api.rb                 |    1 -
 .../javascripts/components/PublishCommon.js   |  327 +++
 .../components/PublishReactionContainers.js   |  150 ++
 .../components/PublishReactionModal.js        |  838 ++++++
 .../components/PublishSampleModal.js          |  511 ++++
 .../components/ReactionDetailsRepoComment.js  |   71 +
 .../components/SampleDetailsRepoComment.js    |   67 +
 .../components/actions/PublicActions.js       |  398 +++
 .../components/actions/RepositoryActions.js   |   65 +
 .../chemscanner/actions/storedFileActions.js  |  315 +++
 .../chemscanner/actions/uiActions.js          |   25 +
 .../components/ArchivedManagement.js          |  142 +
 .../components/ChemscannerImportModal.js      |  132 +
 .../chemscanner/components/EditMdlBtn.js      |   53 +
 .../chemscanner/components/EditableText.js    |   61 +
 .../components/FileItemActionsHeader.js       |  141 +
 .../components/FileItemActionsRenderer.js     |  260 ++
 .../components/FileItemApproveFilter.js       |   97 +
 .../components/FileItemApproveRenderer.js     |   57 +
 .../components/FileItemFileNameFilter.js      |  127 +
 .../components/FileItemImportedFilter.js      |   98 +
 .../components/FileItemImportedRenderer.js    |   30 +
 .../components/FileItemInformationEditor.js   |  269 ++
 .../components/FileItemInformationRenderer.js |  120 +
 .../components/FileItemVersionFilter.js       |   71 +
 .../chemscanner/components/FileStorage.js     |  351 +++
 .../chemscanner/components/ImportModal.js     |  116 +
 .../components/fileStorageUtils.js            |  302 +++
 .../containers/ArchivedManagementContainer.js |   61 +
 .../containers/FileStorageContainer.js        |  230 ++
 .../containers/ImportModalContainer.js        |   38 +
 .../components/chemscanner/reactionUtils.js   |   41 +
 .../components/chemscanner/reducers/root.js   |   17 +
 .../chemscanner/reducers/schemes.js           |  176 ++
 .../components/common/DeleteConfirmBtn.js     |   53 +
 .../common/DropdownButtonSelection.js         |   38 +
 .../javascripts/components/common/HelpInfo.js |   26 +
 .../components/common/InputButtonField.js     |   62 +
 .../components/common/NewsPreviewModal.js     |   33 +
 .../components/common/RepoColumnHis.js        |  108 +
 .../components/common/RepoCommentBtn.js       |   58 +
 .../components/common/RepoCommentModal.js     |   92 +
 .../components/common/RepoMetadataModal.js    |   91 +
 .../components/common/RepoPreviewImage.js     |   53 +
 .../components/common/RepoPublicComment.js    |  140 +
 .../components/common/RepoReviewHisColumns.js |   51 +
 .../components/common/RepoReviewModal.js      |  166 ++
 .../components/common/RepoReviewTimeFormat.js |   24 +
 .../components/common/RepoSpectra.js          |   57 +
 .../components/common/RepoUserComment.js      |   94 +
 .../components/common/RepoXvialButton.js      |  172 ++
 .../components/common/SelectionField.js       |   62 +
 .../components/fetchers/ArticleFetcher.js     |  111 +
 .../components/fetchers/PublicFetcher.js      |  229 ++
 .../components/fetchers/RepositoryFetcher.js  |  437 ++++
 .../components/report/SectionDoiList.js       |   89 +
 .../components/stores/LoadingStore.js         |   53 +
 .../components/stores/PublicStore.js          |  348 +++
 .../components/users/AuthorModal.js           |  625 +++++
 .../utils/defaultAnalysisPublish.js           |   52 +
 .../javascripts/components/utils/helpDescs.js |   91 +
 .../javascripts/libHome/ContainerComponent.js |   98 +
 app/assets/javascripts/libHome/NavFooter.js   |   24 +
 app/assets/javascripts/libHome/Navigation.js  |  136 +
 app/assets/javascripts/libHome/RepoAbout.js   |  164 ++
 app/assets/javascripts/libHome/RepoCommon.js  | 2311 +++++++++++++++++
 app/assets/javascripts/libHome/RepoContact.js |   43 +
 .../libHome/RepoContainerDatasets.js          |   79 +
 .../javascripts/libHome/RepoDirective.js      |   41 +
 .../javascripts/libHome/RepoElementDetails.js |   61 +
 app/assets/javascripts/libHome/RepoEmbargo.js |  278 ++
 .../javascripts/libHome/RepoEmbargoDetails.js |   47 +
 app/assets/javascripts/libHome/RepoHome.js    |  421 +++
 app/assets/javascripts/libHome/RepoHowTo.js   |  177 ++
 .../libHome/RepoHowTo/EditorBtn.js            |   67 +
 .../libHome/RepoHowTo/EditorImage.js          |   43 +
 .../libHome/RepoHowTo/EditorRichText.js       |   30 +
 .../libHome/RepoHowTo/EditorStelle.js         |   84 +
 .../libHome/RepoHowToDragSource.js            |   21 +
 .../libHome/RepoHowToDropTarget.js            |   41 +
 .../javascripts/libHome/RepoHowToEditor.js    |  435 ++++
 .../javascripts/libHome/RepoHowToReader.js    |  124 +
 .../javascripts/libHome/RepoNewsEditor.js     |  427 +++
 .../javascripts/libHome/RepoNewsReader.js     |  123 +
 .../javascripts/libHome/RepoNewsroom.js       |  186 ++
 app/assets/javascripts/libHome/RepoPubl.js    |  747 ++++++
 .../libHome/RepoReactionDetails.js            |  537 ++++
 .../libHome/RepoReactionSchemeInfo.js         |   83 +
 app/assets/javascripts/libHome/RepoReview.js  |  372 +++
 .../libHome/RepoReviewButtonBar.js            |  118 +
 .../javascripts/libHome/RepoReviewCommon.js   |  122 +
 .../javascripts/libHome/RepoReviewDetails.js  |   63 +
 app/assets/javascripts/libHome/RepoSample.js  |  176 ++
 .../javascripts/libHome/RepoSampleDetails.js  |  211 ++
 app/assets/javascripts/libHome/homeRoutes.js  |  219 ++
 app/jobs/chemotion_embargo_pubchem_job.rb     |    1 -
 app/models/report.rb                          |    4 +
 app/packs/src/components/CollectionSubtree.js |   22 +
 app/packs/src/components/CollectionTree.js    |   75 +-
 .../components/ElementsTableSampleEntries.js  |    2 +
 app/packs/src/components/ReactionDetails.js   |   95 +
 app/packs/src/components/SampleDetails.js     |    2 +
 .../components/SampleDetailsContainersAux.js  |    3 +
 .../chemscanner/components/HeaderMenu.js      |    6 +
 app/packs/src/components/models/Reaction.js   |   12 +
 app/packs/src/libHome/Home.js                 |   25 +
 db/schema.rb                                  |   29 +-
 lib/pub_chem.rb                               |   16 +
 112 files changed, 18090 insertions(+), 48 deletions(-)
 delete mode 100644 .env.test
 create mode 100644 app/assets/javascripts/components/PublishCommon.js
 create mode 100644 app/assets/javascripts/components/PublishReactionContainers.js
 create mode 100644 app/assets/javascripts/components/PublishReactionModal.js
 create mode 100644 app/assets/javascripts/components/PublishSampleModal.js
 create mode 100644 app/assets/javascripts/components/ReactionDetailsRepoComment.js
 create mode 100644 app/assets/javascripts/components/SampleDetailsRepoComment.js
 create mode 100644 app/assets/javascripts/components/actions/PublicActions.js
 create mode 100644 app/assets/javascripts/components/actions/RepositoryActions.js
 create mode 100644 app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
 create mode 100644 app/assets/javascripts/components/chemscanner/actions/uiActions.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/EditableText.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/FileStorage.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/ImportModal.js
 create mode 100644 app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
 create mode 100644 app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
 create mode 100644 app/assets/javascripts/components/chemscanner/reactionUtils.js
 create mode 100644 app/assets/javascripts/components/chemscanner/reducers/root.js
 create mode 100644 app/assets/javascripts/components/chemscanner/reducers/schemes.js
 create mode 100644 app/assets/javascripts/components/common/DeleteConfirmBtn.js
 create mode 100644 app/assets/javascripts/components/common/DropdownButtonSelection.js
 create mode 100644 app/assets/javascripts/components/common/HelpInfo.js
 create mode 100644 app/assets/javascripts/components/common/InputButtonField.js
 create mode 100644 app/assets/javascripts/components/common/NewsPreviewModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoColumnHis.js
 create mode 100644 app/assets/javascripts/components/common/RepoCommentBtn.js
 create mode 100644 app/assets/javascripts/components/common/RepoCommentModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoMetadataModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoPreviewImage.js
 create mode 100644 app/assets/javascripts/components/common/RepoPublicComment.js
 create mode 100644 app/assets/javascripts/components/common/RepoReviewHisColumns.js
 create mode 100644 app/assets/javascripts/components/common/RepoReviewModal.js
 create mode 100644 app/assets/javascripts/components/common/RepoReviewTimeFormat.js
 create mode 100644 app/assets/javascripts/components/common/RepoSpectra.js
 create mode 100644 app/assets/javascripts/components/common/RepoUserComment.js
 create mode 100644 app/assets/javascripts/components/common/RepoXvialButton.js
 create mode 100644 app/assets/javascripts/components/common/SelectionField.js
 create mode 100644 app/assets/javascripts/components/fetchers/ArticleFetcher.js
 create mode 100644 app/assets/javascripts/components/fetchers/PublicFetcher.js
 create mode 100644 app/assets/javascripts/components/fetchers/RepositoryFetcher.js
 create mode 100644 app/assets/javascripts/components/report/SectionDoiList.js
 create mode 100644 app/assets/javascripts/components/stores/LoadingStore.js
 create mode 100644 app/assets/javascripts/components/stores/PublicStore.js
 create mode 100644 app/assets/javascripts/components/users/AuthorModal.js
 create mode 100644 app/assets/javascripts/components/utils/defaultAnalysisPublish.js
 create mode 100644 app/assets/javascripts/components/utils/helpDescs.js
 create mode 100644 app/assets/javascripts/libHome/ContainerComponent.js
 create mode 100644 app/assets/javascripts/libHome/NavFooter.js
 create mode 100644 app/assets/javascripts/libHome/Navigation.js
 create mode 100644 app/assets/javascripts/libHome/RepoAbout.js
 create mode 100644 app/assets/javascripts/libHome/RepoCommon.js
 create mode 100644 app/assets/javascripts/libHome/RepoContact.js
 create mode 100644 app/assets/javascripts/libHome/RepoContainerDatasets.js
 create mode 100644 app/assets/javascripts/libHome/RepoDirective.js
 create mode 100644 app/assets/javascripts/libHome/RepoElementDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoEmbargo.js
 create mode 100644 app/assets/javascripts/libHome/RepoEmbargoDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoHome.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToDragSource.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToDropTarget.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToEditor.js
 create mode 100644 app/assets/javascripts/libHome/RepoHowToReader.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsEditor.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsReader.js
 create mode 100644 app/assets/javascripts/libHome/RepoNewsroom.js
 create mode 100644 app/assets/javascripts/libHome/RepoPubl.js
 create mode 100644 app/assets/javascripts/libHome/RepoReactionDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
 create mode 100644 app/assets/javascripts/libHome/RepoReview.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewButtonBar.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewCommon.js
 create mode 100644 app/assets/javascripts/libHome/RepoReviewDetails.js
 create mode 100644 app/assets/javascripts/libHome/RepoSample.js
 create mode 100644 app/assets/javascripts/libHome/RepoSampleDetails.js
 create mode 100644 app/assets/javascripts/libHome/homeRoutes.js

diff --git a/.env.test b/.env.test
deleted file mode 100644
index 136fc0fe9..000000000
--- a/.env.test
+++ /dev/null
@@ -1,31 +0,0 @@
-SFTP_HOST=sftp
-SFTP_PORT=22
-SFTP_UPLOAD_FOLDER=uploads
-SFTP_USER=sftp_test
-SFTP_PASSWORD=sftp_test
-
-MESSAGE_ENABLE=true
-MESSAGE_AUTO_INTERNAL=1000
-MESSAGE_IDLE_TIME=20
-
-# Allow unconfirmed email: leave blank for always, or set a number of days (integer);
-# also set 0 to have email being confirmed before first sign in.
-DEVISE_ALLOW_UNCONFIRMED=''
-
-# Disable sign up page: leave blank to allow sign up page. set to 'true' to disable it.
-# only amdin can then create user accounts.
-DEVISE_DISABLED_SIGN_UP=''
-
-# Any new account to be inactive by default => only admin can (de)activate
-DEVISE_NEW_ACCOUNT_INACTIVE=false
-
-DATA_CITE_BASE_URI=https://api.test.datacite.org
-DATA_CITE_PREFIX=prefix
-DATA_CITE_API_USERNAME=username
-DATA_CITE_API_PASSWORD=password
-DATA_CITE_DEVICE_PREFIX=DEVICE-
-DATA_CITE_DEVICE_PUBLISHER=chemotion.net
-DATA_CITE_DEVICE_CREATOR=chemotion.net
-
-# uncomment for headfull testing
-# USE_HEAD=:D
diff --git a/README.md b/README.md
index 000a9f15d..e0d6bf087 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,7 @@ of the **[Karlsruhe Institute of Technology]**.
 
 ## Acknowledgments
 
-This project has been funded by the **[DFG]**.
-
-[![DFG Logo]][DFG]
+## User Documentation
 
 ## User Documentation
 
diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index 0da508ba2..8bd3a3010 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -41,6 +41,20 @@ class CollectionAPI < Grape::API
         end
       end
 
+      namespace :all_as_tree do
+        desc "Return the 'All' collection of the current user"
+        get do
+          current_user.collections.arrange_serializable do |parent, children|
+            {
+              title: parent.label,
+              value: parent.id,
+              key: parent.id,
+              children: children
+            }
+          end
+        end
+      end
+
       desc "Return collection by id"
       params do
         requires :id, type: Integer, desc: "Collection id"
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 0bac2957b..a5f317d6f 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -165,6 +165,74 @@ def query_embargo(name)
         end
       end
 
+      namespace :search do
+        params do
+          requires :inchikey, type: String, desc: 'inchikey'
+        end
+        post do
+          molecule = Molecule.joins("inner join samples on molecules.id = samples.molecule_id and samples.deleted_at is null")
+                             .joins("inner join publications on samples.id = publications.element_id and  publications.state like '%completed%' and publications.element_type = 'Sample'")
+                             .find_by(inchikey: params[:inchikey])
+          { molecule_id: molecule&.id }
+        end
+      end
+
+      namespace :article_init do
+        get do
+          { is_article_editor: current_user&.is_article_editor || false }
+        end
+      end
+
+      namespace :howto_init do
+        get do
+          { is_howto_editor: current_user&.is_howto_editor || false }
+        end
+      end
+
+      namespace :find_adv_valuess do
+        helpers do
+          def query_authors(name)
+            result = User.where(type: %w(Person Group Collaborator)).where(
+              <<~SQL
+                users.id in (
+                  select distinct(pa.author_id)::integer from publication_authors pa
+                )
+              SQL
+            )
+            .by_name(params[:name]).limit(10)
+            .select(
+              <<~SQL
+              id as key, first_name, last_name, first_name || chr(32) || last_name as name, first_name || chr(32) || last_name || chr(32) || '(' || name_abbreviation || ')' as label
+              SQL
+            )
+          end
+          def query_ontologies(name)
+            result = PublicationOntologies.where('LOWER(ontologies) ILIKE ? ',"%#{params[:name]}%").limit(3)
+            .select(
+              <<~SQL
+              term_id as key, label, label as name
+              SQL
+            ).uniq
+          end
+        end
+        desc 'Find top 3 matched advanced values'
+        params do
+          requires :name, type: String, allow_blank: false, regexp: /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/
+          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Ontologies]
+        end
+        get do
+          result = case params[:adv_type]
+                   when 'Authors'
+                     query_authors(params[:name])
+                   when 'Ontologies'
+                     query_ontologies(params[:name])
+                   else
+                     []
+                   end
+          { result: result }
+        end
+      end
+
       namespace :download do
         desc 'download file for editoring'
         before do
@@ -1456,6 +1524,453 @@ def query_embargo(name)
           ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
         end
       end
+
+      get 'collection' do
+        pub_coll = Collection.public_collection
+        if current_user
+          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
+          { id: coll.id, is_sync_to_me: true  }
+        else
+          { id: nil }
+        end
+      end
+
+      resource :pid do
+        params do
+          requires :id, type: Integer
+        end
+        desc "Query samples, reaction and datasets from publication id"
+        post do
+          pub = Publication.find(params[:id])
+          return "/home" unless pub
+
+          case pub.element_type
+          when 'Sample'
+            return "/molecules/#{pub.element.molecule_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            return "/review/review_sample/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state) && pub.ancestry.nil?
+            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
+              root = pub.root
+              return "/review/review_reaction/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
+            end
+          when 'Reaction'
+            return "/reactions/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            return "/review/review_reaction/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state)
+          when 'Container'
+            return "/datasets/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
+            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
+              root = pub.root
+              return "/review/review_#{root.element_type=='Reaction'? 'reaction' : 'sample'}/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
+            end
+          else
+            return "/home"
+          end
+        end
+      end
+
+      resource :inchikey do
+        params do
+          requires :inchikey, type: String
+          optional :type, type: String # value: []
+          optional :version, type: String
+        end
+        desc "Query samples and datasets from inchikey and type"
+        post do
+          inchikey = params[:inchikey]
+          molecule = Molecule.find_by(inchikey: inchikey)
+          return "/home" unless molecule
+
+          type = params[:type]
+          return "/molecules/#{molecule.id.to_s}" if type.empty?
+
+          version = params[:version] ? params[:version] : ""
+          analyses = Collection.public_collection.samples
+            .where("samples.molecule_id = ?", molecule.id.to_s)
+            .map(&:analyses).flatten
+
+          analyses_filtered = analyses.select { |a|
+            em = a.extended_metadata
+            check = em['kind'].to_s.gsub(/\s/, '') == type
+            check = check && (em['analysis_version'] || '1') == version unless version.empty?
+            check
+          }
+          analysis = analyses_filtered.first
+          return "/datasets/#{analysis.id.to_s}"
+        end
+      end
+
+      resource :molecules do
+        desc "Return PUBLIC serialized molecules"
+        params do
+          optional :page, type: Integer, desc: "page"
+          optional :pages, type: Integer, desc: "pages"
+          optional :per_page, type: Integer, desc: "per page"
+          optional :adv_flag, type: Boolean, desc: 'advanced search?'
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+        end
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: MoleculeGuestListSerializer do
+          public_collection_id = Collection.public_collection_id
+          params[:adv_val]
+          adv_search = ' '
+          if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
+            case params[:adv_type]
+            when 'Authors'
+              adv_search = <<~SQL
+                INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
+                and author_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            when 'Ontologies'
+              adv_search = <<~SQL
+                INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
+                and term_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            end
+          end
+          sample_join = <<~SQL
+            INNER JOIN (
+              SELECT molecule_id, published_at max_published_at, sample_svg_file
+              FROM (
+              SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
+              FROM samples, publications pub
+              WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+                and samples.id IN (
+                SELECT samples.id FROM samples
+                INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+                #{adv_search}
+              )) s where rownum = 1
+            ) s on s.molecule_id = molecules.id
+          SQL
+          xvial_count = <<~SQL
+            inner join (
+              select count(e.id) as xvial_count, m.id as molecule_id from molecules m
+              inner join samples s on s.molecule_id = m.id
+              inner join publications p on p.element_type='Sample' and p.element_id=s.id  and p.deleted_at isnull
+              left outer join element_tags e on e.taggable_id = s.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+              group by m.id
+            ) c on c.molecule_id = molecules.id
+          SQL
+          paginate(Molecule.joins(sample_join).joins(xvial_count).order("s.max_published_at desc").select(
+            <<~SQL
+              molecules.*, sample_svg_file, xvial_count
+            SQL
+          ))
+        end
+      end
+
+      resource :reactions do
+        desc 'Return PUBLIC serialized reactions'
+        params do
+          optional :page, type: Integer, desc: 'page'
+          optional :pages, type: Integer, desc: 'pages'
+          optional :per_page, type: Integer, desc: 'per page'
+          optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+          optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
+        end
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: ReactionGuestListSerializer do
+
+          if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
+            case params[:adv_type]
+            when 'Authors'
+              adv_search = <<~SQL
+                INNER JOIN publication_authors pub on pub.element_id = reactions.id and pub.element_type = 'Reaction' and pub.state = 'completed'
+                and author_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            when 'Ontologies'
+              str_term_id = params[:adv_val].split(',').map { |val| val}.to_s
+              adv_search = <<~SQL
+                INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
+                and term_id in ('#{params[:adv_val].join("','")}')
+              SQL
+            else
+              adv_search = ' '
+            end
+          else
+            adv_search = ' '
+          end
+
+          if params[:scheme_only]
+            paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+          else
+            paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+          end
+        end
+      end
+
+      resource :publicElement do
+        desc "Return PUBLIC serialized elements (Reaction, sample)"
+        paginate per_page: 10, offset: 0, max_per_page: 100
+        get '/', each_serializer: MoleculeGuestListSerializer do
+          public_collection_id = Collection.public_collection_id
+          sample_join = <<~SQL
+            INNER JOIN (
+              SELECT molecule_id, max(pub.published_at) max_updated_at
+              FROM samples
+              INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+              INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+              GROUP BY samples.molecule_id
+            ) s on s.molecule_id = molecules.id
+          SQL
+          paginate(Molecule.joins(sample_join).order("s.max_updated_at desc"))
+        end
+      end
+
+      resource :last_published do
+        desc "Return Last PUBLIC serialized entities"
+        get do
+          s_pub = Publication.where(element_type: 'Sample', state: 'completed').order(:published_at).last
+          sample = s_pub.element
+
+          r_pub = Publication.where(element_type: 'Reaction', state: 'completed').order(:published_at).last
+          reaction = r_pub.element
+
+          { last_published: { sample: { id: sample.id, sample_svg_file: sample.sample_svg_file, molecule: sample.molecule, tag: s_pub.taggable_data, contributor: User.find(s_pub.published_by).name  },
+          reaction: { id: reaction.id, reaction_svg_file: reaction.reaction_svg_file, tag: r_pub.taggable_data, contributor: User.find(r_pub.published_by).name } } }
+        end
+      end
+
+      resource :last_published_sample do
+        desc "Return PUBLIC serialized molecules"
+        get do
+          sample = Collection.public_collection.samples.includes(:molecule, :residues).
+          where("samples.id not in (select reactions_samples.sample_id from reactions_samples where type != 'ReactionsProductSample')").order(:created_at).last
+          #TODO have and use a dedicated serializer for public sample
+          sample
+        end
+      end
+
+      resource :dataset do
+        desc "Return PUBLISHED serialized dataset"
+        params do
+          requires :id, type: Integer, desc: "Dataset id"
+        end
+        get do
+          dataset = Container.find(params[:id])
+          sample = dataset.root.containable
+          cids = sample.collections.pluck :id
+          if cids.include?(Collection.public_collection_id)
+            molecule = sample.molecule if sample.class.name == 'Sample'
+
+            ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
+            ds_json[:dataset_doi] = dataset.full_doi
+            ds_json[:pub_id] = dataset.publication&.id
+
+            res = {
+              dataset: ds_json,
+              sample_svg_file: sample.class.name == 'Sample' ? sample.sample_svg_file : sample.reaction_svg_file,
+              molecule: {
+                sum_formular: molecule&.sum_formular,
+                molecular_weight: molecule&.molecular_weight,
+                cano_smiles: molecule&.cano_smiles,
+                inchistring: molecule&.inchistring,
+                inchikey: molecule&.inchikey,
+                molecule_svg_file: molecule&.molecule_svg_file,
+                pubchem_cid: molecule&.tag&.taggable_data && molecule&.tag&.taggable_data["pubchem_cid"]
+              },
+              license: dataset.tag.taggable_data["publication"]["license"] || 'CC BY-SA',
+              publication: {
+                author_ids: sample&.publication&.taggable_data['author_ids'] || [],
+                creators: sample&.publication&.taggable_data['creators'] || [],
+                affiliation_ids: sample&.publication&.taggable_data['affiliation_ids'] || [],
+                affiliations: sample&.publication&.taggable_data['affiliations'] || {},
+                published_at: sample&.publication&.taggable_data['published_at'],
+              }
+            }
+          else
+            res = nil
+          end
+
+          return res
+        end
+      end
+
+      resource :reaction do
+        helpers RepositoryHelpers
+        desc "Return PUBLISHED serialized reaction"
+        params do
+          requires :id, type: Integer, desc: "Reaction id"
+        end
+        get do
+          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
+          return nil unless r.present?
+
+          reaction = Reaction.where('id = ?', params[:id])
+          .select(
+            <<~SQL
+            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
+            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
+            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
+            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
+            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
+            reactions.duration
+            SQL
+          )
+          .includes(
+                container: :attachments
+          ).last
+          literatures = get_literature(params[:id],'Reaction') || []
+          reaction.products.each do |p|
+            literatures += get_literature(p.id,'Sample')
+          end
+
+          pub = Publication.find_by(element_type: 'Reaction', element_id: params[:id])
+          pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
+          infos = {}
+          ana_infos = {}
+          pd_infos = {}
+          pub.descendants.each do |pp|
+            review = pp.review || {}
+            info = review['info'] || {}
+            next if info.empty?
+            if pp.element_type == 'Sample'
+              pd_infos[pp.element_id] = info['comment']
+            else
+              ana_infos[pp.element_id] = info['comment']
+            end
+          end
+
+          schemeList = get_reaction_table(params[:id])
+          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
+          entities[:products].each do |p|
+            pub_product = p
+            pub_product_tag = pub_product[:tag]['taggable_data']
+            next if pub_product_tag.nil?
+
+            xvial = pub_product_tag['xvial'] && pub_product_tag['xvial']['num']
+            next unless xvial.present?
+
+            unless current_user.present? && User.reviewer_ids.include?(current_user.id)
+              pub_product_tag['xvial']['num'] = 'x'
+            end
+          end
+          entities[:publication]['review']['history'] = []
+          entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
+          entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
+          entities[:isLogin] = current_user.present?
+          entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
+          entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
+          entities
+        end
+      end
+
+      resource :molecule do
+        desc "Return serialized molecule with list of PUBLISHED dataset"
+        params do
+          requires :id, type: Integer, desc: "Molecule id"
+          optional :adv_flag, type: Boolean, desc: "advanced search flag"
+          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies]
+          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
+        end
+        get do
+          molecule = Molecule.find(params[:id])
+          pub_id = Collection.public_collection_id
+          if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
+            adv = <<~SQL
+              INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
+              and rs.author_id in ('#{params[:adv_val].join("','")}')
+            SQL
+          else
+            adv = ''
+          end
+
+          pub_samples = Collection.public_collection.samples
+            .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
+            .where(
+              <<~SQL
+                samples.id in (
+                  SELECT samples.id FROM samples
+                  INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
+                  INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
+                  #{adv}
+                )
+              SQL
+            )
+            .select(
+              <<~SQL
+              samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
+              SQL
+            )
+            .order('published_at desc')
+          published_samples = pub_samples.map do |s|
+            containers = Entities::ContainerEntity.represent(s.container)
+            tag = s.tag.taggable_data['publication']
+            #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
+            #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
+            #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
+            #aff = u.affiliations.first
+            next unless tag
+            literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
+              .joins("inner join users on literals.user_id = users.id")
+              .select(
+                <<~SQL
+                literatures.*,
+                json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
+                SQL
+              ).group('literatures.id').as_json
+            reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
+            pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
+            sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
+            xvial = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['num'] unless s.tag.taggable_data.nil?
+            if xvial.present?
+              unless current_user.present? && User.reviewer_ids.include?(current_user.id)
+                xvial = 'x'
+              end
+            end
+            pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
+            ana_infos = {}
+            pub.descendants.each do |pp|
+              review = pp.review || {}
+              info = review['info'] || {}
+              next if info.empty?
+              ana_infos[pp.element_id] = info['comment']
+            end
+            tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
+              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
+
+          end
+          published_samples = published_samples.flatten.compact
+          {
+            molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
+            published_samples: published_samples,
+            isLogin: current_user.nil? ? false : true,
+            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false
+          }
+        end
+      end
+
+      resource :metadata do
+        desc "metadata of publication"
+        params do
+          requires :id, type: Integer, desc: "Id"
+          requires :type, type: String, desc: "Type", values: %w[sample reaction container]
+        end
+        after_validation do
+          @publication = Publication.find_by(
+            element_type: params['type'].classify,
+            element_id: params['id']
+          )
+          error!('404 Publication not found', 404) unless @publication && @publication.state.include?("completed")
+        end
+        desc "Download metadata_xml"
+        get :download do
+          el_type = params['type'] == "container" ? "analysis" : params['type']
+          filename = URI.escape("metadata_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
+          content_type('application/octet-stream')
+          header['Content-Disposition'] = "attachment; filename=" + filename
+          env['api.format'] = :binary
+          @publication.metadata_xml
+        end
+      end
+
+      resource :published_statics do
+        desc 'Return PUBLIC statics'
+        get do
+          ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
+        end
+      end
     end
 
     namespace :upload do
diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index 07c4bf6b9..c79d7c5d3 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -181,7 +181,6 @@ class UserAPI < Grape::API
           requires :aff_id, type: Integer
         end
         post do
-
           ua = UserAffiliation.find_by(user_id: params[:user_id], affiliation_id: params[:aff_id])
           ua.destroy!
 
diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/assets/javascripts/components/PublishCommon.js
new file mode 100644
index 000000000..3dc367290
--- /dev/null
+++ b/app/assets/javascripts/components/PublishCommon.js
@@ -0,0 +1,327 @@
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+  OverlayTrigger,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Aviator from 'aviator';
+import Sample from './models/Sample';
+import { sampleShowOrNew, reactionShow } from './routesUtils';
+import Reaction from './models/Reaction';
+import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '5px',
+  marginRight: '5px'
+};
+
+const handleClick = (e, id, clickType) => {
+  e.preventDefault();
+  e.stopPropagation();
+  const uri = Aviator.getCurrentURI();
+  const uriArray = uri.split(/\//);
+  switch (clickType) {
+    case 'Reaction':
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
+      reactionShow({ params: { reactionID: id } });
+      break;
+
+    default:
+      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
+      sampleShowOrNew({ params: { sampleID: id } });
+      break;
+  }
+};
+const validateYield = (reaction) => {
+  const result = [];
+  const products = reaction.products || [];
+  products.forEach((product) => {
+    const val = ((product.equivalent || 0) * 100).toFixed(0);
+    if (val === '0') result.push({ name: 'product-yield', value: false, message: `${product.molecule_iupac_name}: yield is 0` });
+  });
+  if (result.length !== 0 && result.length === products.length) return result;
+  return [];
+};
+
+const validateMolecule = (element) => {
+  const validates = [];
+  const sample = element;
+  const analyses = sample.analysisArray();
+  analyses.forEach((al) => {
+    const status = al.extended_metadata.status || '';
+    const kind = al.extended_metadata.kind || '';
+    if (status !== 'Confirmed') {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
+    }
+    if (kind === '' || (kind.split('|').length < 2)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
+    }
+    if (!isNmrPass(al, sample)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
+    }
+    if (!isDatasetPass(al)) {
+      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
+    }
+  });
+  return validates;
+};
+
+const PublishBtnReaction = ({ reaction, showModal }) => {
+  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
+  // NB set publishedId to true to hide it
+  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
+  const notPublishable = reaction.notPublishable; // false or [samples]
+  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
+  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
+  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
+  return (
+    (!publishedId && !tagData.publication) ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
+      >
+        <Button
+          // style={{ display: 'none' }}
+          bsStyle="success"
+          bsSize="xsmall"
+          className="button-right"
+          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
+          onClick={() => showModal(!isDisabled)}
+          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
+        >
+          <i className="fa fa-paper-plane" />
+        </Button>
+      </OverlayTrigger>
+    ) : <span />
+  );
+};
+
+PublishBtnReaction.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
+
+const PublishBtn = ({ sample, showModal }) => {
+  const tagData = (sample.tag && sample.tag.taggable_data) || {};
+
+  const publishedId = tagData.public_sample;
+  const isPoly = sample._contains_residues;
+
+  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
+    >
+      <Button
+        bsStyle="success"
+        bsSize="xsmall"
+        className="button-right"
+        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+        onClick={() => showModal(!isPoly)}
+        // disabled={isPoly}
+        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
+      >
+        <i className="fa fa-paper-plane" />
+      </Button>
+    </OverlayTrigger>
+  ) : <span />;
+};
+
+PublishBtn.propTypes = {
+  showModal: PropTypes.func.isRequired,
+  sample: PropTypes.instanceOf(Sample).isRequired,
+};
+
+const ReviewPublishBtn = ({ element, showComment, validation }) => {
+  const tagData = (element.tag && element.tag.taggable_data) || {};
+  const publishedId = tagData.public_sample || tagData.public_reaction;
+  const isDecline = (tagData && tagData.decline === true) || false;
+  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
+
+  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
+  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
+                    >
+                      <Button
+                        bsStyle="danger"
+                        bsSize="xsmall"
+                        className="button-right"
+                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
+                        onClick={() => validation(element)}
+                      >
+                        <i className="fa fa-paper-plane" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />);
+  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
+                    <OverlayTrigger
+                      placement="bottom"
+                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
+                    >
+                      <Button
+                        bsSize="xsmall"
+                        bsStyle="success"
+                        target="_blank"
+                        className="button-right"
+                        onClick={showComment}
+                      >
+                        <i className="fa fa-comments" />
+                      </Button>
+                    </OverlayTrigger>
+                    ) : (<span />)
+  return (
+    <span>
+    {reviewBtn}
+    {commentBtn}
+    </span>
+  )
+};
+
+
+const PublishedTag = ({ element }) => {
+  const tag = (element && element.tag) || {};
+  const tagData = (tag && tag.taggable_data) || {};
+  const tagType = tag.taggable_type;
+  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
+  let tip = '';
+  let publishedId;
+  switch (tagType) {
+    case 'Reaction':
+      publishedId = tagData.public_reaction;
+      if (isPending) {
+        tip = 'Reaction is being reviewed';
+      } else {
+        tip = 'Reaction has been published';
+      }
+      break;
+
+    default:
+      publishedId = tagData.public_sample;
+      if (isPending) {
+        tip = 'Sample is being reviewed';
+      } else {
+        tip = 'Sample has been published';
+      }
+      break;
+  }
+  return (
+    publishedId ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="data public">{tip}</Tooltip>}
+      >
+        <Button
+          bsSize="xsmall"
+          bsStyle={isPending ? 'warning' : 'danger'}
+          style={labelStyle}
+          onClick={event => handleClick(event, publishedId, tagType)}
+        >
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    ) : null
+  );
+};
+
+PublishedTag.propTypes = {
+  element: PropTypes.object,
+};
+
+const LabelPublication = ({ element }) => {
+  const publication = element.tag && element.tag.taggable_data &&
+    element.tag.taggable_data.publication;
+
+  if (!publication) { return null; }
+
+  const time = new Date(publication.published_at || publication.doi_reg_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const contributor = publication.contributors && publication.contributors.name;
+  const publishedBy = publication.creators && publication.creators[0] && publication.creators[0].name;
+  const tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
+  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
+    element.publication.taggable_data.scheme_only === true) || false;
+  const pubDoi = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`
+
+
+  if (publication.published_at) {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
+        onClick={e => e.stopPropagation()}
+      >
+        <Button
+          bsSize="xsmall"
+          bsStyle="default"
+          style={labelStyle}
+          target="_blank"
+          href={pubDoi}
+        >
+          <i className="fa fa-newspaper-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  } else {
+    return (<span />);
+  }
+}
+
+LabelPublication.propTypes = {
+  element: PropTypes.object,
+}
+
+
+const ChemotionTag = ({ tagData, firstOnly = false }) => {
+  const chemotionTag = tagData.chemotion;
+  if (!chemotionTag) { return null; }
+  const { chemotion_first, last_published_at, doi } = chemotionTag;
+  if (firstOnly && !chemotion_first) { return null; }
+  const time = new Date(chemotion_first || last_published_at);
+  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
+    : `Last published on ${formattedTime}`;
+  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
+
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
+      <a
+        style={labelStyle}
+        // bsSize="xsmall"
+        // bsStyle="default"
+        target="_blank"
+        href={`https://dx.doi.org/${doi}`}
+      >
+        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
+        {first}
+        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
+      </a>
+
+
+
+    </OverlayTrigger>
+  );
+};
+
+
+ChemotionTag.propTypes = {
+  tagData: PropTypes.object,
+};
+ChemotionTag.defaultProps = {
+  tagData: {},
+};
+
+module.exports = {
+  LabelPublication,
+  PublishedTag,
+  ChemotionTag,
+  PublishBtn,
+  PublishBtnReaction,
+  ReviewPublishBtn,
+  validateMolecule,
+  validateYield
+};
diff --git a/app/assets/javascripts/components/PublishReactionContainers.js b/app/assets/javascripts/components/PublishReactionContainers.js
new file mode 100644
index 000000000..3746a575c
--- /dev/null
+++ b/app/assets/javascripts/components/PublishReactionContainers.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  PanelGroup,
+  Panel,
+  Button,
+} from 'react-bootstrap';
+import ContainerComponent from './ContainerComponent';
+import PrintCodeButton from './common/PrintCodeButton';
+import Reaction from './models/Reaction';
+
+export default class PublishReactionContainers extends Component {
+  constructor(props) {
+    super();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      activeContainer: 0
+    };
+
+    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  handleAccordionOpen(key) {
+    this.setState({ activeContainer: key });
+  }
+
+  render() {
+    const {reaction, activeContainer} = this.state;
+    const {readOnly} = this.props;
+
+    let containerHeader = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          {container.name}
+          {titleKind}
+          {titleStatus}
+          <Button
+            bsSize="xsmall"
+            bsStyle="danger"
+            className="button-right"
+            disabled={readOnly}
+            onClick={() => this.handleOnClickRemove(container)}
+          >
+            <i className="fa fa-trash" />
+          </Button>
+          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
+        </div>
+      )
+    };
+
+    let containerHeaderDeleted = (container) => {
+      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
+      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
+
+      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
+      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
+
+      return (
+        <div style={{width: '100%'}}>
+          <strike>
+            {container.name}
+            {titleKind}
+            {titleStatus}
+          </strike>
+          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
+                  onClick={() => this.handleUndo(container)}>
+            <i className="fa fa-undo"></i>
+          </Button>
+        </div>
+      )
+    };
+
+    if (reaction.container != null && reaction.container.children) {
+      const analyses_container = reaction.container.children.filter(element => (
+        ~element.container_type.indexOf('analyses')
+      ));
+
+      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
+        return (
+          <div>
+            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
+              {analyses_container[0].children.map((container, key) => {
+                if (container.is_deleted) {
+                  return (
+                    <Panel
+                      eventKey={key}
+                      key={`reaction_container_deleted_${container.id}`}
+                    >
+                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
+                    </Panel>
+                  );
+                }
+
+                return (
+                  <Panel
+                    eventKey={key}
+                    key={`reaction_container_${container.id}`}
+                    onClick={this.handleAccordionOpen.bind(this, key)}
+                  >
+                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
+                    <Panel.Body collapsible>
+                      <ContainerComponent
+                        readOnly={readOnly}
+                        container={container}
+                        onChange={this.handleChange.bind(this, container)}
+                      />
+                    </Panel.Body>
+                  </Panel>
+                );
+              })}
+            </PanelGroup>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          style={{ marginBottom: '10px' }}
+          className="noAnalyses-warning"
+        >
+          There are currently no Analyses.
+        </div>
+      );
+    }
+
+    return (
+      <div className="noAnalyses-warning">
+        There are currently no Analyses.
+      </div>
+    );
+  }
+}
+
+PublishReactionContainers.propTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+};
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/assets/javascripts/components/PublishReactionModal.js
new file mode 100644
index 000000000..ff9723dde
--- /dev/null
+++ b/app/assets/javascripts/components/PublishReactionModal.js
@@ -0,0 +1,838 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel,
+  PanelGroup,
+  Button,
+  Modal,
+  Table,
+  OverlayTrigger, FormGroup,
+  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
+  Form,
+  Grid,
+  ControlLabel
+} from 'react-bootstrap';
+import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
+import Select from 'react-select';
+import Immutable from 'immutable';
+import { validateYield } from './PublishCommon';
+import Reaction from './models/Reaction';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import ReactionsFetcher from './fetchers/ReactionsFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, isNmrPass, isDatasetPass, PublishTypeAs, OrcidIcon } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import { contentToText } from './utils/quillFormat';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
+);
+
+const skimAnalysis = (sample) => {
+  const analyses = sample.analysisArray();
+  const publishedAnalyses = analyses.filter(a =>
+    (a.extended_metadata &&
+      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+  return publishedAnalyses.filter(a =>
+    (a.extended_metadata &&
+      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+};
+
+const publishOptions = { f: 'full', s: 'scheme-only' };
+
+export default class PublishReactionModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { reaction } = props;
+    this.state = {
+      reaction,
+      selectedUsers: [],
+      collaborations: [],
+      showPreview: false,
+      showScheme: false,
+      currentUser,
+      showRinchi: false,
+      showProp: false,
+      showTlc: false,
+      selectedRefs: [],
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: [],
+      noSolvent: false,
+      schemeDesc: true,
+      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
+    };
+
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handlePublishReaction = this.handlePublishReaction.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
+    this.handleYieldChange = this.handleYieldChange.bind(this);
+    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
+    this.handleUnitChange = this.handleUnitChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      reaction: nextProps.reaction,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  handleInputChange(type, event) {
+    const { reaction } = this.state;
+    switch (type) {
+      case 'temperature':
+        reaction.temperature.userText = event.target.value;
+        break;
+      case 'temperatureUnit':
+        reaction.temperature = reaction.convertTemperature(event);
+        break;
+      case 'duration':
+        reaction.durationDisplay = { nextValue: event.target.value };
+        break;
+      case 'durationUnit':
+        reaction.durationDisplay = { nextUnit: true };
+        break;
+      default:
+        break;
+    }
+    this.setState({ reaction });
+  }
+
+  handleYieldChange(p, event) {
+    const { value } = event.target;
+    if (!isNaN(value)) {
+      const { reaction } = this.state;
+      const { products } = reaction;
+      const product = products.find(e => e.id === p.id);
+      if (typeof product !== 'undefined') {
+        product.equivalent = (value / 100);
+        products.splice(products.findIndex(e => e.id === p.id), 1, product);
+        reaction.products = products;
+        this.setState({ reaction });
+      }
+    }
+  }
+
+  handlePropertiesChange(type, event) {
+    if (type === 'temperature') {
+      this.handleInputChange(type, event);
+    }
+    if (type === 'duration') {
+      const { value } = event.target;
+      if (!isNaN(value)) {
+        this.handleInputChange(type, event);
+      }
+    }
+    if (type === 'schemeDesc') {
+      this.setState({ schemeDesc: !this.state.schemeDesc });
+    }
+  }
+
+  handleUnitChange(type, event) {
+    let index;
+    let unit;
+    switch (type) {
+      case 'temperatureUnit':
+        index = Reaction.temperature_unit.indexOf(event);
+        unit = Reaction.temperature_unit[(index + 1) % 3];
+        this.handleInputChange('temperatureUnit', unit);
+        break;
+      case 'durationUnit':
+        this.handleInputChange('durationUnit', event);
+        break;
+      default:
+        break;
+    }
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  handleNoSolventCheck() {
+    this.setState({ noSolvent: !this.state.noSolvent });
+  }
+
+  loadBundles() {
+    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+      const cols = result.repository;
+      const bundles = [];
+      if (cols && cols.length > 0) {
+        cols.forEach((col) => {
+          bundles.push({ value: col.id, name: col.label, label: col.label });
+        });
+        this.setState({ bundles });
+      }
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  loadMyCollaborations() {
+    UsersFetcher.fetchMyCollaborations()
+    .then((result) => {
+      this.setState({
+        collaborations: result.authors
+      });
+    });
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
+    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
+      <div>  -{currentUser.current_affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handleAnalysesChecked(analysis, elementType) {
+    const { reaction } = this.state;
+
+    reaction.changed = true;
+    if (elementType === 'Reaction') {
+      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+      // Find the index of the element and then replace
+      const index = findIndex(elements, { id: analysis.id });
+      if (index !== -1) {
+        elements.splice(index, 1, analysis);
+        this.setState(prevState => ({ ...prevState, reaction }));
+      }
+    }
+    if (elementType === 'Product') {
+      const analysesReactionProducts = reaction.products;
+      analysesReactionProducts.forEach((product) => {
+        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        // Find the index of the element and then replace
+        const index = findIndex(elements, { id: analysis.id });
+        if (index !== -1) {
+          elements.splice(index, 1, analysis);
+          this.setState(prevState => ({ ...prevState, reaction }));
+        }
+      });
+    }
+    this.props.onHandleAnalysesCheck(this.state.reaction);
+  }
+
+  validateAnalyses() {
+    let pas = this.state.reaction.products.reduce(
+      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(this.state.reaction)
+    );
+    if (pas.length === 0) {
+      return false;
+    }
+
+    pas = AnalysisIdstoPublish(this.state.reaction);
+    if (pas.length > 0) {
+      return true;
+    }
+
+    const { reaction } = this.state;
+    const { products } = reaction;
+    for (let i = 0; i < products.length; i += 1) {
+      const pa = skimAnalysis(products[i]);
+      if (pa.length > 0) { return true; }
+    }
+
+    return false;
+  }
+
+  handlePublishReaction() {
+    const { selectedLicense, cc0Consent, publishType, selectedUsers} = this.state;
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
+      return true;
+    }
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
+      alert("Please add an author or check 'add me as author'.");
+      return true;
+    }
+
+    const { reaction } = this.state;
+    if (isFullyPublish) {
+      const { samples } = reaction;
+      for (let i = 0; i < samples.length; i += 1) {
+        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
+      }
+    }
+
+    LoadingActions.start();
+    RepositoryActions.publishReaction({
+      isFullyPublish,
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      schemeDesc: this.state.schemeDesc,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide(false);
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reReaction) => {
+        this.props.onPublishRefreshClose(reReaction, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishReactionReserveDois({
+      reaction: this.state.reaction,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    ReactionsFetcher.fetchById(this.state.reaction.id)
+      .then((reaction) => {
+        this.props.onPublishRefreshClose(reaction, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+    const authorCount = selectedUsers && selectedUsers.length;
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="80%" />
+            <th width="20%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            return (
+              <tr key={id}>
+                <td className="padding-right" style={{ display: 'inline-flex;' }}>
+                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                  >
+                    <Checkbox
+                      checked={selectedRefs.includes(id)}
+                      onChange={() => { this.handleRefCheck(id); }}
+                    >
+                      <span>Add to publication</span>
+                    </Checkbox>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  handlePublishTypeChange(e) {
+    const { publishType } = this.state;
+    publishType.selected = e;
+    this.setState({ publishType });
+  }
+
+  validatePub(isFullyPublish = true) {
+    const { reaction } = this.state;
+    let validates = [];
+    if (isFullyPublish) {
+      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+      const desc = contentToText(reaction.description).trim() || '';
+      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
+      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
+      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
+      const hasSv =
+        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
+      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
+      const hasProduct = reaction.products && reaction.products.length > 0;
+      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
+
+      (reaction.starting_materials || []).forEach((st) => {
+        if (!st.amount || !st.amount.value) {
+          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
+        }
+      });
+      (reaction.products || []).forEach((prod) => {
+        if (!prod.amount || !prod.amount.value) {
+          validates.push({ name: 'product-amount', value: false, message: `${prod.molecule_iupac_name}: amount is 0` });
+        }
+      });
+    } else {
+      const hasDuration =
+        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
+      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
+      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
+    }
+    validates = validates.concat(validateYield(reaction));
+    return validates;
+  }
+
+  render() {
+    const { show } = this.props;
+    const {
+      reaction, selectedUsers, selectedRefs, publishType
+    } = this.state;
+
+    const isFullyPublish = publishType.selected === publishOptions.f;
+    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
+    const validateInfo = this.validatePub(isFullyPublish);
+    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
+    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
+    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
+    const validated = !!(validateObjs && validateObjs.length === 0);
+
+    let selectedAnalysesCount = (this.state.reaction.analyses || [])
+      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
+      && a.extended_metadata.kind)).length;
+
+    const productDOI = product => (
+      <tr key={`doi-product-row-${product.id}`}>
+        <td>
+          Product {product.name}
+        </td>
+        <td>
+          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    const productAnalysesDOI = analysis => (
+      <tr key={`doi-product-analysis-row-${analysis.id}`}>
+        <td>
+          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
+        </td>
+        <td>
+          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
+        </td>
+      </tr>
+    );
+
+    if (show) {
+      const analysesView = [];
+      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
+
+      selectedAnalysesCount = (analysesReaction || []).filter(a =>
+        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
+
+      const analysesViewReaction = analysesReaction.map(analysis => (
+        <PublishAnalysesTag
+          reaction={reaction}
+          analysis={analysis}
+          key={`reaction_${analysis.id}`}
+          analysesType="Reaction"
+          handleAnalysesChecked={this.handleAnalysesChecked}
+        />
+      ));
+      analysesView.push(analysesViewReaction);
+
+      const analysesReactionProductsDOIs = [];
+      const analysesReactionProducts = reaction.products;
+
+      analysesReactionProducts.forEach((product) => {
+        const arrP = [];
+        arrP.push(product);
+        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
+        analysesView.push(tmpProduct);
+
+        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
+        const tmpTag = tmp.map(analysis => (
+          <PublishAnalysesTag
+            reaction={reaction}
+            analysis={analysis}
+            key={`reaction_product_${analysis.id}`}
+            analysesType="Product"
+            handleAnalysesChecked={this.handleAnalysesChecked}
+            product={product}
+          />
+        ));
+        analysesView.push(tmpTag);
+        analysesReactionProductsDOIs.push(productDOI(product));
+        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
+        selectedAnalysesCount += (tmp || []).filter(a =>
+          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
+            && ((a.extended_metadata.status || '') === 'Confirmed')
+            && (isNmrPass(a, product))
+            && (isDatasetPass(a))
+          )).length;
+      });
+
+      const {
+        selectedEmbargo, selectedLicense, cc0Consent
+      } = this.state;
+
+      const publishTypeAs = {
+        ...publishType,
+        onChange: this.handlePublishTypeChange
+      };
+
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
+            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
+              <Grid style={{ width: '100%' }}>
+                <Col sm={6} lg={6}>
+                  <Form inline>
+                    <FormGroup controlId="frmCtrlPublishType">
+                      <ControlLabel>
+                        Publish Reaction as
+                      </ControlLabel>{' '}
+                      <PublishTypeAs {...publishTypeAs} />
+                    </FormGroup>
+                  </Form>
+                </Col>
+                <Col sm={6} lg={6}>
+                  {' '}
+                </Col>
+              </Grid>
+            </Modal.Header>
+            <Modal.Body style={{
+              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
+            }}
+            >
+              <EmbargoCom
+                opts={this.state.bundles}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <FormGroup>
+                <Col md={12} sm={12}>
+                  <div style={{
+                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
+                }}>{validateMsg}
+                  </div>
+                </Col>
+              </FormGroup>
+              <div className={`display-${isFullyPublish}`}>
+                <ReactionInfo
+                  reaction={reaction}
+                  toggleScheme={this.toggleScheme}
+                  showScheme={this.state.showScheme}
+                  isPublic={false}
+                  toggleRinchi={this.toggleRinchi}
+                  showRinchi={this.state.showRinchi}
+                  toggleProp={this.toggleProp}
+                  showProp={this.state.showProp}
+                  toggleTlc={this.toggleTlc}
+                  showTlc={this.state.showTlc}
+                />
+              </div>
+              <div className={`display-${!isFullyPublish}`}>
+                <ReactionSchemeOnlyInfo
+                  reaction={reaction}
+                  isPublic={false}
+                  schemeDesc={this.state.schemeDesc}
+                  onYieldChange={this.handleYieldChange}
+                  onPropertiesChange={this.handlePropertiesChange}
+                  onUnitChange={this.handleUnitChange}
+                />
+              </div>
+              <Checkbox
+                onChange={() => { this.handleNoSolventCheck(); }}
+                checked={this.state.noSolvent}
+                className={`display-${isFullyPublish}`}
+              >
+                <span>This reaction has no solvents</span>
+              </Checkbox>
+              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
+                <Panel
+                  eventKey="2"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <div>
+                      <Row>
+                        <Col md={12}>
+                          <h5>
+                            <b>Datasets: </b>
+                            <br />
+                          </h5>
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col md={12}>
+                          <PanelGroup accordion id={`panelgroup_ds_${reaction.id}`} defaultActiveKey={0}>
+                            {flatten(analysesView)}
+                          </PanelGroup>
+                        </Col>
+                      </Row>
+                    </div>
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="3"
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel
+                  eventKey="5"
+                  className={`display-${isFullyPublish}`}
+                >
+                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
+                    <Panel.Title toggle>
+                      <h4> Select Reference ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+            </Modal.Body>
+            <Modal.Footer style={{ padding: '6px' }}>
+              <Button onClick={() => this.props.onHide(false)}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
+                Publish Reaction
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishReactionModal.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+  onHandleAnalysesCheck: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/assets/javascripts/components/PublishSampleModal.js
new file mode 100644
index 000000000..d4f8ea16a
--- /dev/null
+++ b/app/assets/javascripts/components/PublishSampleModal.js
@@ -0,0 +1,511 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Panel, PanelGroup, Modal, Table,
+  ListGroupItem, ListGroup, Button, Checkbox,
+  Popover, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+import Select from 'react-select';
+import Immutable from 'immutable';
+import { sortedUniq } from 'lodash';
+
+import Sample from './models/Sample';
+import SampleDetailsContainers from './SampleDetailsContainers';
+import UserStore from './stores/UserStore';
+import UsersFetcher from './fetchers/UsersFetcher';
+import RepositoryActions from './actions/RepositoryActions';
+import { groupByCitation, Citation } from '../components/LiteratureCommon';
+import { MoleculeInfo, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
+import LoadingActions from './actions/LoadingActions';
+import SamplesFetcher from './fetchers/SamplesFetcher';
+import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+
+export default class PublishSampleModal extends Component {
+  constructor(props) {
+    super(props);
+    const { currentUser } = UserStore.getState();
+    const { sample } = props;
+    this.state = {
+      sample,
+      selectedUsers: [],
+      showSelectionUser: false,
+      showSelectionAnalysis: false,
+      showPreview: false,
+      currentUser,
+      selectedRefs: [],
+      collaborations: [],
+      literatures: new Immutable.Map(),
+      sortedIds: [],
+      selectedEmbargo: '-1',
+      selectedLicense: 'CC BY-SA',
+      cc0Consent: { consent1: false, consent2: false },
+      bundles: []
+    };
+    this.onUserChange = this.onUserChange.bind(this);
+    this.handleSampleChanged = this.handleSampleChanged.bind(this);
+    this.handlePublishSample = this.handlePublishSample.bind(this);
+    this.handleReserveDois = this.handleReserveDois.bind(this);
+    this.handleSelectUser = this.handleSelectUser.bind(this);
+    this.promptTextCreator = this.promptTextCreator.bind(this);
+    this.loadUserByName = this.loadUserByName.bind(this);
+    this.loadReferences = this.loadReferences.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.selectReferences = this.selectReferences.bind(this);
+    this.handleRefCheck = this.handleRefCheck.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+    this.handleLicenseChange = this.handleLicenseChange.bind(this);
+    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
+  }
+
+  componentDidMount() {
+    UserStore.listen(this.onUserChange);
+    this.loadBundles();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadReferences();
+    this.loadMyCollaborations();
+    this.setState({
+      sample: nextProps.sample,
+    });
+  }
+
+  componentWillUnmount() {
+    UserStore.unlisten(this.onUserChange);
+  }
+
+  onUserChange(state) {
+    this.setState(previousState => ({ ...previousState, users: state.users }));
+  }
+
+  handleRefCheck(id) {
+    let { selectedRefs } = this.state;
+
+    if (selectedRefs.includes(id)) {
+      selectedRefs = selectedRefs.filter(item => item !== id);
+    } else {
+      selectedRefs.push(id);
+    }
+    this.setState({ selectedRefs });
+  }
+
+  loadBundles() {
+    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
+      const cols = result.repository;
+      const bundles = [];
+      if (cols && cols.length > 0) {
+        cols.forEach((col) => {
+          bundles.push({ value: col.id, name: col.label, label: col.label });
+        });
+        this.setState({ bundles });
+      }
+    });
+  }
+
+  loadMyCollaborations() {
+    UsersFetcher.fetchMyCollaborations()
+    .then((result) => {
+      this.setState({
+        collaborations: result.authors
+      });
+    });
+  }
+
+  loadReferences() {
+    let { selectedRefs } = this.state;
+    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
+      const sortedIds = groupByCitation(literatures);
+      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
+      this.setState({ selectedRefs, literatures, sortedIds });
+    });
+  }
+
+  handleSelectUser(val) {
+    if (val) { this.setState({ selectedUsers: val }); }
+  }
+
+  loadUserByName(input) {
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    return UsersFetcher.fetchUsersByName(input)
+      .then((res) => {
+        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
+          .map(u => ({
+            value: u.id,
+            name: u.name,
+            label: `${u.name} (${u.abb})`
+          }));
+        return { options: usersEntries };
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  promptTextCreator(label) {
+    return ("Share with \"" + label + "\"");
+  }
+
+  handleSampleChanged(sample) {
+    this.setState(prevState => ({ ...prevState, sample }));
+  }
+
+  validateAnalyses() {
+    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
+  validateSubmission() {
+    const { sample } = this.state;
+    const analyses = sample.analysisArray();
+
+    if (!this.validateAnalyses()) {
+      return false;
+    }
+
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+        (isNmrPass(a, sample)) && // fail if NMR check fail
+        (isDatasetPass(a))))); // fail if Dataset check fail
+    if (publishedAnalyses.length === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  handlePublishSample() {
+    const { selectedLicense, cc0Consent } = this.state;
+    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
+    const plural = authorCount > 0 ? 's' : '';
+
+    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
+      alert('Please check the license section before sending your data.');
+      return true;
+    }
+
+    if (!this.validateSubmission()) {
+      alert('Submission Check fail. Please review your data and re-submit.');
+      return true;
+    }
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${plural}`);
+      return true;
+    }
+
+    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
+      alert("Please add an author or check 'add me as author.'");
+      return true;
+    }
+
+    const analyses = this.state.sample.analysisArray();
+    let publishedAnalyses = analyses.filter(a =>
+      (a.extended_metadata &&
+        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
+
+    publishedAnalyses = publishedAnalyses.filter(a =>
+      (a.extended_metadata &&
+        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
+          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
+          (isDatasetPass(a))))); // fail if Dataset check fail
+
+    const { sample } = this.state;
+    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
+
+    LoadingActions.start();
+    RepositoryActions.publishSample({
+      // sample: this.state.sample,
+      sample,
+      coauthors: this.state.selectedUsers.map(u => u.value),
+      refs: this.state.selectedRefs,
+      embargo: this.state.selectedEmbargo,
+      license: this.state.selectedLicense,
+      addMe: this.refMeAsAuthor.checked
+    });
+    this.props.onHide();
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((reSample) => {
+        this.props.onPublishRefreshClose(reSample, false);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  handleReserveDois() {
+    LoadingActions.start();
+    RepositoryActions.publishSampleReserveDois({
+      sample: this.state.sample,
+      coauthors: this.state.selectedUsers.map(u => u.value)
+    });
+    SamplesFetcher.fetchById(this.state.sample.id)
+      .then((sample) => {
+        this.props.onPublishRefreshClose(sample, true);
+        LoadingActions.stop();
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+        LoadingActions.stop();
+      });
+    return true;
+  }
+
+  contributor() {
+    const { currentUser } = this.state;
+    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
+    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
+      <div>  -{currentUser.current_affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
+  }
+
+  selectUsers() {
+    const { selectedUsers, collaborations } = this.state;
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    const authorInfo = selectedUsers && selectedUsers.map((a) => {
+      const us = collaborations.filter(c => c.id === a.value);
+      const u = us && us.length > 0 ? us[0] : {};
+      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
+      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
+        <div>  -{af.department}, {af.organization}, {af.country}</div>
+      ));
+      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
+    });
+
+    const authorCount = selectedUsers && selectedUsers.length;
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
+        </Checkbox>
+        <h5><b>Authors:</b></h5>
+        <Select
+          multi
+          searchable
+          placeholder="Select authors from my collaboration"
+          backspaceRemoves
+          value={selectedUsers}
+          valueKey="value"
+          labelKey="label"
+          matchProp="name"
+          options={options}
+          onChange={this.handleSelectUser}
+        />
+        <div>
+          {authorInfo}
+        </div>
+      </div>
+    );
+  }
+
+  citationTable(rows, sortedIds, selectedRefs) {
+    const sids = sortedUniq(sortedIds);
+    return (
+      <Table>
+        <thead>
+          <tr>
+            <th width="80%" />
+            <th width="20%" />
+          </tr>
+        </thead>
+        <tbody>
+          {sids.map((id) => {
+            const citation = rows.get(id);
+            return (
+              <tr key={id}>
+                <td className="padding-right">
+                  <Citation literature={citation} />
+                </td>
+                <td>
+                  <OverlayTrigger
+                    placement="left"
+                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
+                  >
+                    <Checkbox
+                      checked={selectedRefs.includes(id)}
+                      onChange={() => { this.handleRefCheck(id); }}
+                    >
+                      <span>Add to publication</span>
+                    </Checkbox>
+                  </OverlayTrigger>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    );
+  }
+
+  selectReferences() {
+    const { selectedRefs, literatures, sortedIds } = this.state;
+    return (
+      <div >
+        <ListGroup fill="true">
+          <ListGroupItem>
+            {this.citationTable(literatures, sortedIds, selectedRefs)}
+          </ListGroupItem>
+        </ListGroup>
+      </div>
+    );
+  }
+
+  toggleDiv(key) {
+    if (key) {
+      this.setState((previousState) => {
+        const newState = previousState;
+        newState[key] = !previousState[key];
+        return { ...newState };
+      }, this.forceUpdate());
+    }
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ selectedEmbargo: selectedValue });
+    }
+  }
+
+  handleLicenseChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({
+        selectedLicense: selectedValue,
+        cc0Consent: { consent1: false, consent2: false }
+      });
+    }
+  }
+
+  handleCC0ConsentChange(selectedValue, selectedType) {
+    const { cc0Consent } = this.state;
+    if (selectedType === 'consent1') {
+      cc0Consent.consent1 = selectedValue;
+    }
+    if (selectedType === 'consent2') {
+      cc0Consent.consent2 = selectedValue;
+    }
+    this.setState({ cc0Consent });
+  }
+
+  render() {
+    const { show, onHide, sample } = this.props;
+    const canPublish = this.validateSubmission(); // this.validateAnalyses();
+    const {
+      showPreview,
+      selectedUsers,
+      selectedRefs
+    } = this.state;
+    const analyses = sample.analysisArray();
+    const selectedAnalysesCount = analyses.filter(
+      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
+
+    const { molecule } = sample;
+
+    const {
+      selectedEmbargo, selectedLicense, cc0Consent
+    } = this.state;
+
+    if (show) {
+      return (
+        <div>
+          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Publish Sample
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
+              <EmbargoCom
+                opts={this.state.bundles}
+                selectedValue={selectedEmbargo}
+                onEmbargoChange={this.handleEmbargoChange}
+                selectedLicense={selectedLicense}
+                onLicenseChange={this.handleLicenseChange}
+                onCC0ConsentChange={this.handleCC0ConsentChange}
+                cc0Deed={cc0Consent}
+              />
+              <Panel>
+                <Panel.Body>
+                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
+                </Panel.Body>
+              </Panel>
+              <PanelGroup accordion id="publish-sample-config">
+                <Panel
+                  eventKey="2"
+                >
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    <SampleDetailsContainers
+                      readOnly
+                      publish
+                      sample={sample}
+                      handleSampleChanged={this.handleSampleChanged}
+                    />
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="3">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Authors ({selectedUsers.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.contributor()}
+                    {this.selectUsers()}
+                  </Panel.Body>
+                </Panel>
+                <Panel eventKey="5">
+                  <Panel.Heading>
+                    <Panel.Title toggle>
+                      <h4> Select Reference ({selectedRefs.length})</h4>
+                    </Panel.Title>
+                  </Panel.Heading>
+                  <Panel.Body collapsible>
+                    {this.selectReferences()}
+                  </Panel.Body>
+                </Panel>
+              </PanelGroup>
+              {showPreview ? null : null}
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={() => onHide()}>Close</Button>
+              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
+                Publish Sample
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+PublishSampleModal.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  onPublishRefreshClose: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
new file mode 100644
index 000000000..1f9a1e031
--- /dev/null
+++ b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from '../libHome/RepoReactionDetails';
+
+export default class ReactionDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reaction: null,
+      reviewLevel: 0,
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+    LoadingActions.start();
+    RepositoryFetcher.fetchReaction(this.props.reactionId, false)
+      .then((data) => {
+        LoadingActions.stop();
+        // refer to PublicStore.handleDisplayReviewReaction
+        if (data.reaction && data.reaction.reviewLevel === 0) {
+          //console.log(data);
+        } else {
+          let history = [];
+
+          if (data.reaction && data.reaction.publication) {
+            const { publication } = data.reaction;
+            history = (publication.review && publication.review.history) || [];
+          }
+          this.setState({
+            reaction: data.reaction,
+            reviewLevel: data.reviewLevel,
+            historyInfo: history,
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(`ReactionDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  render() {
+    const { reaction } = this.state;
+    return reaction && reaction.publication ?
+      (
+        <RepoReactionDetails
+          reaction={reaction}
+          canComment
+          reviewLevel={this.state.reviewLevel}
+          history={this.state.historyInfo ? this.state.historyInfo : []}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+ReactionDetailsRepoComment.propTypes = {
+  reactionId: PropTypes.number.isRequired,
+};
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/assets/javascripts/components/SampleDetailsRepoComment.js
new file mode 100644
index 000000000..3535f8151
--- /dev/null
+++ b/app/assets/javascripts/components/SampleDetailsRepoComment.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RepositoryFetcher from './fetchers/RepositoryFetcher';
+import LoadingActions from './actions/LoadingActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepoSampleDetails from '../libHome/RepoSampleDetails';
+
+export default class SampleDetailsRepoComment extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      element: null,
+      reviewLevel: 0
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+    LoadingActions.start();
+    RepositoryFetcher.fetchSample(this.props.sampleId, false)
+      .then((data) => {
+        LoadingActions.stop();
+        // refer to PublicStore.handleDisplayReviewSample
+        if (data.sample && data.reviewLevel === 0) {
+          console.log(data);
+        } else {
+          const publication = data.publication || {};
+          this.setState({
+            element: data,
+            historyInfo: (publication.review && publication.review.history) || [],
+            reviewLevel: data.reviewLevel
+          });
+        }
+      }).catch((errorMessage) => {
+        console.log(`SampleDetailsRepoComment_${errorMessage}`);
+        LoadingActions.stop();
+      });
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  render() {
+    const { element } = this.state;
+    return element && element.sample && element.publication ?
+      (
+        <RepoSampleDetails
+          element={element}
+          canComment
+          reviewLevel={this.state.reviewLevel}
+          history={this.state.historyInfo ? this.state.historyInfo : {}}
+          canClose={false}
+          buttons={['Comments']}
+        />) : <div>No Publication found</div>;
+  }
+}
+
+SampleDetailsRepoComment.propTypes = {
+  sampleId: PropTypes.number.isRequired,
+};
diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
new file mode 100644
index 000000000..394494574
--- /dev/null
+++ b/app/assets/javascripts/components/actions/PublicActions.js
@@ -0,0 +1,398 @@
+import alt from '../alt'
+import PublicFetcher from '../fetchers/PublicFetcher'
+import NotificationActions from './NotificationActions';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+class PublicActions {
+
+  refreshPubElements(type) {
+    return type;
+  }
+
+  close(deleteEl) {
+    return { deleteEl }
+  }
+
+  getMolecules(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getReactions(pageParams={}) {
+    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchMolecules(pageParams={}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  getSearchReactions(pageParams = {}) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function (notificationObject) { uid = notificationObject.uid; }
+    });
+
+    return (dispatch) => {
+      PublicFetcher.searchPublicReactions(pageParams)
+      .then((result) => {
+        NotificationActions.removeByUid(uid);
+        dispatch(result)
+      }).catch((errorMessage) => {
+        NotificationActions.removeByUid(uid);
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublished() {
+    return (dispatch) => {
+      PublicFetcher.fetchLastPublished()
+      .then((result) => {
+        dispatch(result.last_published)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  lastPublishedSample(){
+    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
+      .then((result) => {
+        dispatch(result.sample)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  openRepositoryPage(page) {
+    if (page) {
+      return page
+    } else {
+      return ""
+    }
+  }
+
+  displayDataset(id) {
+    return (dispatch) => { PublicFetcher.fetchDataset(id)
+      .then((result) => {
+        dispatch({dataset: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayMolecule(id, advFlag = false, advType = '', advVal = '') {
+    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
+      .then((result) => {
+        dispatch({moleculeData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReaction(id) {
+    return (dispatch) => { PublicFetcher.fetchReaction(id)
+      .then((result) => {
+        dispatch({reactionData: result, id: id})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  articles() {
+    return (dispatch) => {
+      fetch('/newsroom/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({data: json});
+      }).catch((errorMessage) => {
+        dispatch({ data: [] });
+      });
+    };
+  }
+
+  editArticle(key) {
+    if (key === 'new') {
+      return (dispatch) => {
+          dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  displayArticle(key) {
+    return (dispatch) => {
+      fetch(`/newsroom/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+      .then(response => response.json())
+      .then(json => {
+        dispatch({key: key, data: json});
+      })
+    };
+  }
+
+  howtos() {
+    return (dispatch) => {
+      fetch('/howto/index.json',
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ data: json });
+        }).catch((errorMessage) => {
+          // console.log(errorMessage);
+          dispatch({ data: [] });
+        });
+    };
+  }
+
+  editHowTo(key) {
+    if (key === 'ein') {
+      return (dispatch) => {
+        dispatch({ key: key, data: {} });
+      };
+    }
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+          }
+        }
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  displayHowTo(key) {
+    return (dispatch) => {
+      fetch(`/howto/${key}`,
+        {
+          cache: 'no-store',
+          headers: {
+            'cache-control': 'no-cache'
+        }}
+      )
+        .then(response => response.json())
+        .then(json => {
+          dispatch({ key: key, data: json });
+        })
+    };
+  }
+
+  selectPublicCollection() {
+    return (dispatch) => {
+      PublicFetcher.selectPublicCollection()
+        .then((result) => { dispatch(result); })
+        .catch((errorMessage) => { console.log(errorMessage); })
+    }
+  }
+
+  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
+    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewReaction(id) {
+    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  displayReviewSample(id) {
+    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
+      .then((result) => {
+        dispatch({id, element: result})
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  reviewPublish(id, type, comment, action) {
+    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action)
+      .then((result) => {
+        dispatch({ id :id, element: result[`${type}`], type: type, history: result.history, comment: comment, action: action })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  displayReviewEmbargo(type, id) {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoElement(type, id)
+      .then((result) => {
+        dispatch({ id, element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  generateEmbargoAccount(id) {
+    return (dispatch) => {
+      RepositoryFetcher.generateEmbargoAccount(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  fetchEmbargoBundle() {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoCollections()
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      });
+    }
+  }
+
+  releaseEmbargo(id) {
+    return (dispatch) => {
+      RepositoryFetcher.releaseEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  deleteEmbargo(id) {
+    return (dispatch) => {
+      RepositoryFetcher.deleteEmbargo(id)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  moveEmbargo(id, newEmbargo, element) {
+    return (dispatch) => {
+      RepositoryFetcher.moveEmbargo(id, newEmbargo, element)
+        .then((result) => {
+          dispatch({ id, result })
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  getEmbargoElements(id) {
+    return (dispatch) => {
+      RepositoryFetcher.fetchEmbargoElements(id)
+      .then((result) => {
+        dispatch(result)
+      }).catch((errorMessage) => {
+        console.log(errorMessage)
+      })
+    }
+  }
+
+  publishedStatics() {
+    return (dispatch) => {
+      PublicFetcher.publishedStatics()
+        .then((result) => {
+          dispatch(result.published_statics)
+        }).catch((errorMessage) => {
+          console.log(errorMessage)
+        })
+    }
+  }
+
+  updateComment(id, type, comments) {
+    return (dispatch) => {
+      RepositoryFetcher.updateComment(id, type, comments)
+        .then((result) => {
+          dispatch(result);
+        }).catch((errorMessage) => {
+          console.log(errorMessage);
+        });
+    };
+  }
+}
+
+export default alt.createActions(PublicActions)
diff --git a/app/assets/javascripts/components/actions/RepositoryActions.js b/app/assets/javascripts/components/actions/RepositoryActions.js
new file mode 100644
index 000000000..80dd4d530
--- /dev/null
+++ b/app/assets/javascripts/components/actions/RepositoryActions.js
@@ -0,0 +1,65 @@
+import alt from '../alt';
+
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+
+class RepositoryActions {
+  publishSample(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  reviewPublish(element) {
+    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
+      .then((result) => {
+        dispatch({ element: result })
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishSampleReserveDois(params, closeView = false) {
+    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });};
+  }
+
+  publishReaction(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params)
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+
+  publishReactionReserveDois(params, closeView = false) {
+    return (dispatch) => {
+      RepositoryFetcher.publishReaction(params, 'dois')
+      .then((result) => {
+        if (result != null) {
+          dispatch({ element: result, closeView })
+        }
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    };
+  }
+}
+
+export default alt.createActions(RepositoryActions);
diff --git a/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js b/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
new file mode 100644
index 000000000..4e6c48631
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
@@ -0,0 +1,315 @@
+import uuid from 'uuid';
+
+import * as types from './ActionTypes';
+import { scanFileNormalizer } from './fileActions';
+import { CALL_API } from '../middleware/api';
+
+export const retrieveStoredFiles = () => dispatch => (
+  dispatch({
+    type: types.RETRIEVE_STORED_FILES,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/all',
+      options: {
+        credentials: 'same-origin',
+        method: 'post'
+      }
+    }
+  })
+);
+
+export const getScannedOutputs = (ids, type, display) => dispatch => (
+  dispatch({
+    type: types.GET_SCANNED_OUTPUT,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/get_outputs',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, display })
+      },
+    }
+  })
+);
+
+export const hideItems = (ids, type) => dispatch => (
+  dispatch({ type: types[`HIDE_${type.toLocaleUpperCase()}`], ids })
+);
+
+export const approveItems = (ids, type, val) => dispatch => (
+  dispatch({
+    type: types[`APPROVE_${type.toLocaleUpperCase()}`],
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/approve',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, val })
+      },
+    }
+  })
+);
+
+export const rescanFiles = ids => dispatch => (
+  dispatch({
+    type: types.RESCAN_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/rescan',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids })
+      },
+    }
+  })
+);
+
+export const deleteItems = (ids, type, itemVersion) => dispatch => (
+  dispatch({
+    type: types.DELETE_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/delete',
+      normalizer: scanFileNormalizer,
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, type, version: itemVersion || '' })
+      },
+    }
+  })
+);
+
+export const downloadFile = id => dispatch => (
+  dispatch({
+    type: types.DOWNLOAD_STORED_FILE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/download/',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+      },
+    }
+  })
+);
+
+export const uploadToStore = files => (dispatch) => {
+  const data = new FormData();
+  for (let i = 0; i < files.length; i += 1) data.append(uuid.v4(), files[i]);
+
+  return dispatch({
+    type: types.UPLOAD_TO_STORE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/upload',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        body: data
+      }
+    }
+  });
+};
+
+export const saveImage = imageList => (
+  fetch('/api/v1/chemscanner_storage/save_png', {
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'post',
+    body: JSON.stringify({ image_list: imageList })
+  })
+);
+
+export const fetchPreview = id => (
+  fetch('/api/v1/chemscanner_storage/scheme_image', {
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'post',
+    body: JSON.stringify({ id })
+  }).then(res => res.json())
+);
+
+export const getPreview = id => dispatch => (
+  dispatch({
+    type: types.GET_SCHEME_PREVIEW,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/scheme_image',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+      },
+    }
+  })
+);
+
+export const updateMetadata = (id, type, extendedMetadata) => dispatch => (
+  dispatch({
+    type: types.UPDATE_METADATA,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/update_metadata',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id, type, data: extendedMetadata })
+      },
+    }
+  })
+);
+
+export const importData = (data, collection, maintainShortLabel) => dispatch => (
+  dispatch({
+    type: types.IMPORT_DATA,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/import',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ data, collection, maintainShortLabel })
+      }
+    }
+  })
+);
+
+export const updateItemField = (id, type, field, value) => dispatch => (
+  dispatch({
+    type: types.UPDATE_ITEM_FIELD,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/update_output',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id, type, field, value
+        })
+      }
+    }
+  })
+);
+
+export const toggleAliasPolymer = (moleculeId, atomIdx) => dispatch => (
+  dispatch({
+    type: types.TOGGLE_ALIAS_POLYMER,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/toggle_polymer',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ moleculeId, atomIdx })
+      }
+    }
+  })
+);
+
+export const fetchSvg = (moleculeIds, reactionIds) => dispatch => (
+  dispatch({
+    type: types.FETCH_SVG,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/fetch_svg',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ moleculeIds, reactionIds })
+      }
+    }
+  })
+);
+
+export const beilsteinExport = ids => (
+  fetch('/api/v1/chemscanner_storage/beilstein_export', {
+    credentials: 'same-origin',
+    method: 'post',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ ids })
+  })
+);
+
+export const setArchivedValue = (ids, value) => dispatch => (
+  dispatch({
+    type: types.SET_ARCHIVED_VALUE,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/set_archived',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ids, value })
+      },
+    }
+  })
+);
+
+export const setExpand = (id, type, value) => dispatch => (
+  dispatch({
+    type: types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`] || types.DEFAULT,
+    [CALL_API]: {
+      endpoint: '/api/v1/chemscanner_storage/set_expanded',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ type, id, value })
+      },
+    }
+  })
+);
diff --git a/app/assets/javascripts/components/chemscanner/actions/uiActions.js b/app/assets/javascripts/components/chemscanner/actions/uiActions.js
new file mode 100644
index 000000000..2ea85cbfc
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/actions/uiActions.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-prototype-builtins */
+
+import * as types from './ActionTypes';
+import { CALL_API } from '../middleware/api';
+
+export const changeView = view => dispatch => (
+  dispatch({ type: types.CHANGE_VIEW, view })
+);
+
+export const getCurrentVersion = () => dispatch => (
+  dispatch({
+    type: types.GET_CURRENT_VERSION,
+    [CALL_API]: {
+      endpoint: '/api/v1/public_chemscanner/ui/version',
+      options: {
+        credentials: 'same-origin',
+        method: 'post',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+      },
+    }
+  })
+);
diff --git a/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js b/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
new file mode 100644
index 000000000..40e021cd4
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
@@ -0,0 +1,142 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { AgGridReact } from 'ag-grid-react';
+
+export default class ArchivedManagement extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+
+    this.activedColumnDefs = [
+      {
+        headerName: 'Actived File',
+        field: 'fileName',
+        width: 250,
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+    ];
+    this.archivedColumnDefs = [
+      {
+        headerName: 'Archived File',
+        field: 'fileName',
+        width: 250,
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+    ];
+
+    this.onActivedGridReady = this.onActivedGridReady.bind(this);
+    this.onArchivedGridReady = this.onArchivedGridReady.bind(this);
+
+    this.setArchived = this.setArchived.bind(this);
+    this.setActived = this.setActived.bind(this);
+  }
+
+  componentDidUpdate() {
+    if (this.activedGridApi && this.activedGridColumnApi) {
+      this.activedGridColumnApi.autoSizeColumns();
+    }
+
+    if (this.archivedGridApi && this.archivedGridColumnApi) {
+      this.archivedGridColumnApi.autoSizeColumns();
+    }
+  }
+
+  onActivedGridReady(params) {
+    this.activedGridApi = params.api;
+    this.activedGridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+  }
+
+  onArchivedGridReady(params) {
+    this.archivedGridApi = params.api;
+    this.archivedGridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+  }
+
+  setArchived() {
+    if (!this.activedGridApi) return;
+
+    const fileIds = this.activedGridApi.getSelectedRows().map(s => s.id);
+    this.props.setArchivedValue(fileIds, true);
+  }
+
+  setActived() {
+    if (!this.archivedGridApi) return;
+
+    const fileIds = this.archivedGridApi.getSelectedRows().map(s => s.id);
+    this.props.setArchivedValue(fileIds, false);
+  }
+
+  render() {
+    const { archivedFiles, activedFiles } = this.props;
+    const gridStyle = {
+      height: 'calc(100vh - 100px)', flex: 1
+    };
+    const buttonStyle = {
+      width: '33px',
+      margin: '5px',
+      textAlign: 'center',
+      alignSelf: 'center',
+      color: 'rgba(0, 0, 0, 0.54)'
+    };
+
+    return (
+      <div style={{ display: 'flex', margin: '10px' }}>
+        <div className="ag-theme-balham" style={gridStyle}>
+          <AgGridReact
+            id="activedFilesGrid"
+            columnDefs={this.activedColumnDefs}
+            rowData={activedFiles}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            onGridReady={this.onActivedGridReady}
+          />
+        </div>
+        <div style={buttonStyle}>
+          <button className="btn btn-xs" onClick={this.setArchived}>
+            <i className="fa fa-arrow-circle-right fa-2x" />
+          </button>
+          &nbsp; &nbsp;
+          <button className="btn btn-xs" onClick={this.setActived}>
+            <i className="fa fa-arrow-circle-left fa-2x" />
+          </button>
+        </div>
+        <div className="ag-theme-balham" style={gridStyle}>
+          <AgGridReact
+            id="archivedFilesGrid"
+            columnDefs={this.archivedColumnDefs}
+            rowData={archivedFiles}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            onGridReady={this.onArchivedGridReady}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ArchivedManagement.propTypes = {
+  archivedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  activedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js b/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
new file mode 100644
index 000000000..9ce6f25b5
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, ControlLabel, Checkbox,
+  FormControl, FormGroup, Modal
+} from 'react-bootstrap';
+
+import TreeSelect from 'antd/lib/tree-select';
+
+export default class ChemscannerImportModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      newLabel: null,
+      options: [],
+      maintainShortLabel: true,
+      selected: null,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.toggleMaintainShortLabel = this.toggleMaintainShortLabel.bind(this);
+    this.onSelectChange = this.onSelectChange.bind(this);
+    this.handleImport = this.handleImport.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchCollections().then((res) => {
+      this.setState({ options: res.all_as_tree });
+    });
+  }
+
+  onSelectChange(id) {
+    this.setState({ selected: id });
+  }
+
+  onChange(e) {
+    if (!e.target) return;
+
+    this.setState({ newLabel: e.target.value });
+  }
+
+  handleImport() {
+    const { selectedItems, closeModal, importData } = this.props;
+    const { selected, newLabel, maintainShortLabel } = this.state;
+
+    closeModal();
+
+    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
+    const collection = { id: selected, newCollection: newLabel };
+    importData(data, collection, maintainShortLabel);
+  }
+
+  toggleMaintainShortLabel() {
+    this.setState({ maintainShortLabel: !this.state.maintainShortLabel });
+  }
+
+  render() {
+    const { show, selectedItems, closeModal } = this.props;
+
+    const showModal = show && selectedItems.length > 0;
+
+    const {
+      options, newLabel, selected, maintainShortLabel
+    } = this.state;
+
+    const btnText = newLabel ? (
+      `Create collection "${newLabel}" and Import`
+    ) : (
+      'Import'
+    );
+
+    return (
+      <Modal show={showModal}>
+        <Modal.Header>
+          <Modal.Title>Import to Collection</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormGroup>
+            <ControlLabel>Select a Collection</ControlLabel>
+            <TreeSelect
+              treeData={options}
+              value={selected}
+              onChange={this.onSelectChange}
+              style={{ width: '100%' }}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>or Create a new Collection</ControlLabel>
+            <FormControl
+              type="text"
+              placeholder="-- Please insert collection name --"
+              onChange={this.onChange}
+            />
+          </FormGroup>
+          <FormGroup>
+            <Checkbox
+              checked={maintainShortLabel}
+              onChange={this.toggleMaintainShortLabel}
+            >
+              Maintain reaction short label
+            </Checkbox>
+          </FormGroup>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={closeModal}>Close</Button>
+          <Button
+            bsStyle="warning"
+            style={{ float: 'left' }}
+            onClick={this.handleImport}
+            disabled={!(newLabel || selected)}
+          >
+            {btnText}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ChemscannerImportModal.propTypes = {
+  show: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.object),
+  fetchCollections: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  importData: PropTypes.func.isRequired,
+};
+
+ChemscannerImportModal.defaultProps = {
+  show: false,
+  selectedItems: []
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js b/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
new file mode 100644
index 000000000..57801b00f
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+
+export default class EditMdlBtn extends React.Component {
+  constructor() {
+    super();
+
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  onSelect(id) {
+    this.props.openKetcher(id);
+  }
+
+  render() {
+    const { options, identifier } = this.props;
+
+    if (options.length === 0 || !identifier) return <span />;
+
+    const icon = (<i className="fa fa-pencil" />);
+    const ddId = `dropdown-edit-mdl-${identifier}`;
+
+    return (
+      <DropdownButton
+        id={ddId}
+        title={icon}
+        className="clipboard-btn left-btn btn btn-xs"
+      >
+        {options.map(option => (
+          <MenuItem
+            key={option.value}
+            eventKey={option.value}
+            onSelect={this.onSelect}
+          >
+            {option.title}
+          </MenuItem>
+        ))}
+      </DropdownButton>
+    );
+  }
+}
+
+EditMdlBtn.propTypes = {
+  identifier: PropTypes.number,
+  openKetcher: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.object),
+};
+
+EditMdlBtn.defaultProps = {
+  options: [],
+  identifier: 0,
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/EditableText.js b/app/assets/javascripts/components/chemscanner/components/EditableText.js
new file mode 100644
index 000000000..5e3afafcd
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/EditableText.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class EditableText extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { editing: false };
+
+    this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+
+  handleBlur(e) {
+    const { id, field, onFinishUpdate } = this.props;
+    if (!id) return;
+
+    const newValue = e.target.value;
+    this.setState({ editing: false }, onFinishUpdate(id, field, newValue));
+  }
+
+  handleDoubleClick() {
+    if (!this.props.id) return;
+
+    this.setState({ editing: true });
+  }
+
+  render() {
+    const { field, value } = this.props;
+    const { editing } = this.state;
+
+    let cellContent = value;
+    if (editing) {
+      cellContent = (
+        <input
+          style={{ width: '100%' }}
+          defaultValue={value}
+          onBlur={this.handleBlur}
+        />
+      );
+    }
+
+    return (
+      <div onDoubleClick={this.handleDoubleClick}>
+        <b>{field}: </b>
+        {cellContent}
+      </div>
+    );
+  }
+}
+
+EditableText.propTypes = {
+  id: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onFinishUpdate: PropTypes.func.isRequired
+};
+
+EditableText.defaultProps = {
+  id: 0,
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js b/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
new file mode 100644
index 000000000..bfc38d30f
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Button, DropdownButton, MenuItem,
+  OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+
+function FileItemActionsHeader({
+  deleteItems, beilsteinExport, openImportModal,
+  rescanFiles, uploadInput, showSelectedItems,
+  setArchived, unsetArchived
+}) {
+  if (!uploadInput) return <span />;
+
+  const uploadTooltip = <Tooltip id="cs-show-files">Upload</Tooltip>;
+  const openUpload = () => uploadInput.current.click();
+
+  const rescanTooltip = <Tooltip id="cs-rescan-files">Rescan Files</Tooltip>;
+  const deleteTooltip = <Tooltip id="cs-rescan-files">Delete Items</Tooltip>;
+
+  const dropdownTitle = <i className="fa fa-eye" />;
+  const exportTitle = <i className="fa fa-cloud-upload" />;
+
+  const toggleArchiveTitle = <i className="fa fa-archive" />;
+
+  return (
+    <div>
+      <OverlayTrigger placement="top" overlay={deleteTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          style={{ float: 'right' }}
+          onClick={deleteItems}
+        >
+          <i className="fa fa-trash" />
+        </Button>
+      </OverlayTrigger>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          bsStyle="info"
+          pullRight
+          id="cs-show-multiple-items-dropdown"
+          title={dropdownTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={() => showSelectedItems('reactions')}
+          >
+            Show Reactions
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={() => showSelectedItems('molecules')}
+          >
+            Show Molecules
+          </MenuItem>
+        </DropdownButton>
+      </div>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          pullRight
+          id="cs-show-multiple-items-dropdown"
+          title={exportTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={openImportModal}
+          >
+            Import to ELN
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={beilsteinExport}
+          >
+            Beilstein export
+          </MenuItem>
+        </DropdownButton>
+      </div>
+      <OverlayTrigger placement="top" overlay={rescanTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="primary"
+          style={{ float: 'right', marginRight: '5px' }}
+          onClick={rescanFiles}
+        >
+          <i className="fa fa-refresh" />
+        </Button>
+      </OverlayTrigger>
+      <OverlayTrigger placement="top" overlay={uploadTooltip}>
+        <Button
+          bsSize="xsmall"
+          bsStyle="success"
+          style={{ float: 'right', marginRight: '5px' }}
+          onClick={openUpload}
+        >
+          <i className="fa fa-plus-circle" />
+        </Button>
+      </OverlayTrigger>
+      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          pullRight
+          id="cs-toggle-archive-dropdown"
+          title={toggleArchiveTitle}
+        >
+          <MenuItem
+            eventKey="1"
+            onClick={setArchived}
+          >
+            Set archive
+          </MenuItem>
+          <MenuItem
+            eventKey="2"
+            onClick={unsetArchived}
+          >
+            Unset archive
+          </MenuItem>
+        </DropdownButton>
+      </div>
+    </div>
+  );
+}
+
+FileItemActionsHeader.propTypes = {
+  uploadInput: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  rescanFiles: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  beilsteinExport: PropTypes.func.isRequired,
+  openImportModal: PropTypes.func.isRequired,
+  showSelectedItems: PropTypes.func.isRequired,
+  setArchived: PropTypes.func.isRequired,
+  unsetArchived: PropTypes.func.isRequired,
+};
+
+FileItemActionsHeader.defaultProps = {
+  uploadInput: null
+};
+
+export default FileItemActionsHeader;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
new file mode 100644
index 000000000..1221dba3b
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
@@ -0,0 +1,260 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Button, DropdownButton, MenuItem,
+  OverlayTrigger, Tooltip
+} from 'react-bootstrap';
+
+const DeleteBtn = ({ deleteItems }) => {
+  const deleteTooltip = <Tooltip id="cs-delete-item">Delete</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={deleteTooltip}>
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        style={{ float: 'right', marginLeft: '5px' }}
+        onClick={deleteItems}
+      >
+        <i className="fa fa-trash" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+DeleteBtn.propTypes = {
+  deleteItems: PropTypes.func.isRequired,
+};
+
+const DownloadBtn = ({ data, downloadFile }) => {
+  const { type } = data;
+
+  let visibility = '';
+  if (type !== 'File') visibility = 'hidden';
+
+  const style = {
+    float: 'right',
+    marginLeft: '5px',
+    visibility,
+    width: '35px'
+  };
+
+  const tooltipId = `cs-download-${type}-${data.id}-tooltip`;
+  const downloadTooltip = <Tooltip id={tooltipId}>Download</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={downloadTooltip}>
+      <Button
+        bsSize="xsmall"
+        style={style}
+        onClick={downloadFile}
+      >
+        <i className="fa fa-download" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+DownloadBtn.propTypes = {
+  downloadFile: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired
+};
+
+const ShowHideBtn = ({
+  data, showReactions, showMolecules, hideItems
+}) => {
+  const { type, id, schemeCount } = data;
+  const children = data.children || [];
+
+  if (type === 'File') {
+    const noScheme = !schemeCount;
+    const hasNestedFile = children.length === 0 || (
+      children.length > 0 && children[0].type !== 'File'
+    );
+
+    if (noScheme && hasNestedFile) return <span />;
+  }
+
+  let tooltip;
+  let button;
+
+  if (data.show) {
+    button = (
+      <Button
+        bsSize="xsmall"
+        bsStyle="warning"
+        style={{ float: 'right', marginLeft: '5px', width: '35px' }}
+        onClick={hideItems}
+      >
+        <i className="fa fa-eye-slash" />
+      </Button>
+    );
+
+    tooltip = <Tooltip id="cs-hide-file">Hide</Tooltip>;
+  } else {
+    const ddId = `cs-show-${type}-${id}-dropdown`;
+
+    const title = <i className="fa fa-eye" />;
+
+    button = (
+      <div style={{ float: 'right', marginLeft: '5px', lineHeight: '0px' }}>
+        <DropdownButton
+          bsSize="xsmall"
+          bsStyle="info"
+          pullRight
+          id={ddId}
+          title={title}
+        >
+          <MenuItem eventKey="1" onClick={showReactions}>Show Reactions</MenuItem>
+          <MenuItem eventKey="2" onClick={showMolecules}>Show Molecules</MenuItem>
+        </DropdownButton>
+      </div>
+    );
+
+    tooltip = <Tooltip id="cs-show-file">Show</Tooltip>;
+  }
+
+  return (
+    <OverlayTrigger placement="top" overlay={tooltip}>
+      {button}
+    </OverlayTrigger>
+  );
+};
+
+ShowHideBtn.propTypes = {
+  showReactions: PropTypes.func.isRequired,
+  showMolecules: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired
+};
+
+const RescanBtn = ({ data, rescanFiles }) => {
+  const { type, parentId } = data;
+  let visibility = '';
+  if (type !== 'File' || parentId) visibility = 'hidden';
+
+  const rescanTooltip = <Tooltip id="cs-rescan-file">Rescan File</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="top" overlay={rescanTooltip}>
+      <Button
+        bsSize="xsmall"
+        bsStyle="primary"
+        style={{ float: 'right', marginLeft: '5px', visibility }}
+        onClick={rescanFiles}
+      >
+        <i className="fa fa-refresh" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+RescanBtn.propTypes = {
+  rescanFiles: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+};
+
+class FileItemsActionsRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.rescanFiles = this.rescanFiles.bind(this);
+    this.showReactions = this.showReactions.bind(this);
+    this.showMolecules = this.showMolecules.bind(this);
+    this.hideItems = this.hideItems.bind(this);
+    this.deleteItems = this.deleteItems.bind(this);
+    this.downloadFile = this.downloadFile.bind(this);
+  }
+
+  rescanFiles() {
+    const { rescanFiles, data } = this.props;
+
+    rescanFiles([data.id]);
+  }
+
+  showReactions() {
+    const { showItems, data } = this.props;
+    const { id, type } = data;
+
+    showItems([id], type, 'reactions');
+  }
+
+  showMolecules() {
+    const { showItems, data } = this.props;
+    const { id, type } = data;
+
+    showItems([id], type, 'molecules');
+  }
+
+  hideItems() {
+    const { hideItems, data } = this.props;
+    const { id, type } = data;
+
+    hideItems([id], type);
+  }
+
+  deleteItems() {
+    const { deleteItems, data } = this.props;
+    const { id, type, version } = data;
+
+    deleteItems([id], type, version);
+  }
+
+  downloadFile() {
+    const { downloadFile, data } = this.props;
+    const { id } = data;
+
+    downloadFile(id).then(res => (
+      res.response.blob()
+    )).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = data.fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    });
+  }
+
+  render() {
+    const { version, data } = this.props;
+    const { type } = data;
+
+    if (type.startsWith('Item')) return <span />;
+
+    return (
+      <div style={{ marginTop: '1px' }}>
+        <DeleteBtn deleteItems={this.deleteItems} data={data} />
+        <ShowHideBtn
+          showReactions={this.showReactions}
+          showMolecules={this.showMolecules}
+          hideItems={this.hideItems}
+          data={data}
+        />
+        <DownloadBtn downloadFile={this.downloadFile} data={data} />
+        <RescanBtn
+          rescanFiles={this.rescanFiles}
+          version={version}
+          data={data}
+        />
+      </div>
+    );
+  }
+}
+
+FileItemsActionsRenderer.propTypes = {
+  version: PropTypes.string.isRequired,
+  rescanFiles: PropTypes.func.isRequired,
+  showItems: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  downloadFile: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemsActionsRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
new file mode 100644
index 000000000..b9f18c544
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
@@ -0,0 +1,97 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemApproveFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { isApproved: null };
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    const { isApproved } = this.state;
+    let newValue;
+    if (isApproved === null) {
+      newValue = true;
+    } else if (isApproved) {
+      newValue = false;
+    } else {
+      newValue = null;
+    }
+
+    this.setState({ isApproved: newValue }, this.props.filterChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.data.isApproved === this.state.isApproved;
+  }
+
+  isFilterActive() {
+    return this.state.isApproved !== null;
+  }
+
+  render() {
+    const { isApproved } = this.state;
+
+    let tooltipText;
+    let bsStyle;
+    let icon;
+    let style = {};
+    if (isApproved === null) {
+      tooltipText = 'Show All';
+      bsStyle = 'default';
+      icon = 'check';
+      style = { color: '#ccc' };
+    } else if (isApproved) {
+      tooltipText = 'Show Approved';
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      tooltipText = 'Show Not Approved';
+      bsStyle = 'warning';
+      icon = 'check-circle-o';
+    }
+
+    const tooltipId = 'cs-approve--filter-tooltip';
+    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" style={{ width: '50px' }} >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <OverlayTrigger placement="top" overlay={tooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle={bsStyle}
+                onClick={this.onChange}
+                style={style}
+              >
+                <i className={`fa fa-${icon}`} />
+              </Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemApproveFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemApproveFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
new file mode 100644
index 000000000..2d19ad634
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemApproveRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.approveItem = this.approveItem.bind(this);
+  }
+
+  approveItem() {
+    const { approveItems, data } = this.props;
+    const { type, id, isApproved } = data;
+
+    const val = !(isApproved || false);
+    approveItems([id], type, val);
+  }
+
+  render() {
+    const { data } = this.props;
+    const { type, id, isApproved } = data;
+
+    if (type.startsWith('Item')) return <span />;
+    if (type === 'File' && !data.children) return <span />;
+
+    const tooltipId = `cs-approve-${type}-${id}-tooltip`;
+    const tooltip = <Tooltip id={tooltipId}>Approve</Tooltip>;
+
+    let bsStyle;
+    let icon;
+    if (isApproved) {
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      bsStyle = 'default';
+      icon = 'check-circle-o';
+    }
+
+    return (
+      <div style={{ marginTop: '-2px', paddingLeft: '15px' }}>
+        <OverlayTrigger placement="top" overlay={tooltip}>
+          <Button bsSize="xsmall" bsStyle={bsStyle} onClick={this.approveItem}>
+            <i className={`fa fa-${icon}`} />
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+FileItemApproveRenderer.propTypes = {
+  approveItems: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemApproveRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
new file mode 100644
index 000000000..57be6256e
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
@@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Form, ControlLabel, Button } from 'react-bootstrap';
+
+import _ from 'lodash';
+
+class FileItemFileNameFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { text: '', showArchived: false };
+
+    this.inputRef = React.createRef();
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+    this.toggleArchived = this.toggleArchived.bind(this);
+    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
+  }
+
+  onChange(event) {
+    const newValue = event.target.value;
+    if (this.state.text === newValue) return;
+
+    this.setState({ text: newValue }, this.debouncedChangedCallback);
+  }
+
+  getModel() {
+    const { text, showArchived } = this.state;
+    return { text, showArchived };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    const showArchived = model ? model.showArchived : false;
+
+    this.setState({ text, showArchived });
+  }
+
+  toggleArchived() {
+    this.setState({ showArchived: !this.state.showArchived }, this.debouncedChangedCallback);
+  }
+
+  doesFilterPass(params) {
+    const { text, showArchived } = this.state;
+
+    let iter = params.node;
+    while (iter.level > 0) iter = iter.parent;
+
+    const { fileName, extendedMetadata } = iter.data;
+    const passText = fileName.includes(text);
+    let { archived } = extendedMetadata;
+    if (archived == null) archived = false;
+
+    // If showArchived, check passText
+    if (showArchived) return passText;
+
+    // Otherwise, archived items will not passed
+    return passText && !archived;
+  }
+
+  isFilterActive() { return true; }
+
+  afterGuiAttached() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    const { showArchived } = this.state;
+
+    let textArchive;
+    let icon;
+    if (showArchived) {
+      textArchive = 'Hide';
+      icon = (
+        <span className="fa-stack" style={{ fontSize: '0.63em' }}>
+          <i className="fa fa-archive fa-stack-1x" />
+          <i className="fa fa-ban fa-stack-2x text-danger" />
+        </span>
+      );
+    } else {
+      textArchive = 'Show';
+      icon = (<i className="fa fa-archive" />);
+    }
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" >
+          <div className="ag-input-wrapper file-filter" style={{ margin: '4px 4px 1px 4px' }}>
+            <div style={{ display: 'contents' }}>
+              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
+                <ControlLabel style={{ marginRight: '30px' }}>
+                  File Name
+                </ControlLabel>
+                <input
+                  ref={this.inputRef}
+                  value={this.state.text}
+                  onChange={this.onChange}
+                  style={{ width: '65%' }}
+                  className="ag-filter-filter"
+                  placeholder="Filter ..."
+                />
+              </Form>
+            </div>
+            <div style={{ display: 'contents' }}>
+              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
+                <ControlLabel style={{ marginRight: '5px', width: '89px' }}>
+                  {textArchive} Archived
+                </ControlLabel>
+                <Button bsSize="xsmall" onClick={this.toggleArchived}>
+                  {icon}
+                </Button>
+              </Form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemFileNameFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemFileNameFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
new file mode 100644
index 000000000..510a003ab
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+class FileItemImportedFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { isImported: null };
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    const { isImported } = this.state;
+    let newValue;
+    if (isImported === null) {
+      newValue = true;
+    } else if (isImported) {
+      newValue = false;
+    } else {
+      newValue = null;
+    }
+
+    this.setState({ isImported: newValue }, this.props.filterChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.data.isImported === this.state.isImported;
+  }
+
+  isFilterActive() {
+    return this.state.isImported !== null;
+  }
+
+  render() {
+    const { isImported } = this.state;
+
+    let tooltipText;
+    let bsStyle;
+    let icon;
+    let style = {};
+
+    if (isImported === null) {
+      tooltipText = 'Show All';
+      bsStyle = 'default';
+      icon = 'check';
+      style = { color: '#ccc' };
+    } else if (isImported) {
+      tooltipText = 'Show Transferred';
+      bsStyle = 'success';
+      icon = 'check-circle';
+    } else {
+      tooltipText = 'Show Not Transferred';
+      bsStyle = 'warning';
+      icon = 'check-circle-o';
+    }
+
+    const tooltipId = 'cs-imported-filter-tooltip';
+    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
+
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" style={{ width: '50px' }} >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <OverlayTrigger placement="top" overlay={tooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle={bsStyle}
+                onClick={this.onChange}
+                style={style}
+              >
+                <i className={`fa fa-${icon}`} />
+              </Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemImportedFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemImportedFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
new file mode 100644
index 000000000..f69f379b7
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const FileItemImportedRenderer = ({ data }) => {
+  const { type, isImported } = data;
+  if (type.endsWith('Summary')) return <span />;
+
+  let style;
+  let icon;
+
+  if (isImported) {
+    style = { color: '#5cb85c' };
+    icon = 'check-circle';
+  } else {
+    style = {};
+    icon = 'check-circle-o';
+  }
+
+  return (
+    <div style={{ paddingLeft: '30px' }}>
+      <i style={style} className={`fa fa-${icon}`} />
+    </div>
+  );
+};
+
+FileItemImportedRenderer.propTypes = {
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default FileItemImportedRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js b/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
new file mode 100644
index 000000000..89a766149
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
@@ -0,0 +1,269 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ControlLabel, FormControl, Panel, Radio } from 'react-bootstrap';
+
+import PreviewFileZoomPan from './PreviewFileZoomPan';
+
+const PreviewEditor = ({ imageData, fileName }) => {
+  if (!imageData) return <span />;
+
+  return (
+    <Panel style={{ marginBottom: '0px', minHeight: '400px' }}>
+      <Panel.Heading>{fileName}</Panel.Heading>
+      <Panel.Body>
+        <PreviewFileZoomPan
+          imageURL={imageData}
+          duration={200}
+        />
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+PreviewEditor.propTypes = {
+  imageData: PropTypes.string,
+  fileName: PropTypes.string.isRequired,
+};
+
+PreviewEditor.defaultProps = {
+  imageData: '',
+};
+
+const InfoEditor = ({ fileName, data }) => {
+  const {
+    domain, type, format, doi
+  } = data;
+
+  return (
+    <Panel style={{ marginBottom: '0px' }}>
+      <Panel.Heading>{fileName}</Panel.Heading>
+      <Panel.Body>
+        <table className="cs-extended-metadata-table">
+          <tbody>
+            <tr>
+              <td style={{ width: '55px' }}>
+                <ControlLabel>Domain</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="organic"
+                  defaultChecked={domain === 'organic'}
+                >
+                  Organic
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="inorganic"
+                  defaultChecked={domain === 'inorganic'}
+                >
+                  Inorganic
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="solidPhase"
+                  defaultChecked={domain === 'solidPhase'}
+                >
+                  Solid Phase
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="domainGroup"
+                  defaultValue="heteroCyclic"
+                  defaultChecked={domain === 'heteroCyclic'}
+                >
+                  Hetero cyclic
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>Type</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="typeGroup"
+                  defaultValue="published"
+                  defaultChecked={type === 'published'}
+                >
+                  Published
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="typeGroup"
+                  defaultValue="unpublished"
+                  defaultChecked={type === 'unpublished'}
+                >
+                  Never published
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>Format</ControlLabel>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="supportingInformation"
+                  defaultChecked={format === 'supportingInformation'}
+                >
+                  Supporting Information
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="manuscript"
+                  defaultChecked={format === 'manuscript'}
+                >
+                  Manuscript
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="review"
+                  defaultChecked={format === 'review'}
+                >
+                  Review
+                </Radio>
+              </td>
+              <td>
+                <Radio
+                  name="formatGroup"
+                  defaultValue="report"
+                  defaultChecked={format === 'report'}
+                >
+                  Report
+                </Radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <ControlLabel>DOI</ControlLabel>
+              </td>
+              <td colSpan={4}>
+                <FormControl
+                  type="text"
+                  id="doi_info"
+                  defaultValue={doi || ''}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+InfoEditor.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+  fileName: PropTypes.string.isRequired,
+};
+
+class FileItemInformationEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.containerRef = React.createRef();
+
+    this.focus = this.focus.bind(this);
+  }
+
+  componentDidMount() {
+    this.focus();
+  }
+
+  componentDidUpdate() {
+    this.focus();
+  }
+
+  componentWillUnmount() {
+    const { type, data } = this.props;
+
+    const extData = data.extendedMetadata || {};
+
+    let query = 'input[name="domainGroup"]:checked';
+    const domain = this.containerRef.current.querySelector(query);
+    if (domain) {
+      extData.domain = domain.value;
+    } else {
+      delete extData.domain;
+    }
+
+    query = 'input[name="typeGroup"]:checked';
+    const typeInfo = this.containerRef.current.querySelector(query);
+    if (typeInfo) {
+      extData.type = typeInfo.value;
+    } else {
+      delete extData.type;
+    }
+
+    query = 'input[name="formatGroup"]:checked';
+    const format = this.containerRef.current.querySelector(query);
+    if (format) {
+      extData.format = format.value;
+    } else {
+      delete extData.format;
+    }
+
+    const doi = this.containerRef.current.querySelector('#doi_info');
+    if (doi) {
+      extData.doi = doi.value;
+    } else {
+      delete extData.doi;
+    }
+
+    data.extendedMetadata = extData;
+    this.props.doneEditing(type, data);
+  }
+
+  getValue() {
+    return this.props.data.type;
+  }
+
+  focus() {
+    if (this.containerRef.current) this.containerRef.current.focus();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isPopup() {
+    return true;
+  }
+
+  render() {
+    const { data, type } = this.props;
+    const { fileName, imageData, extendedMetadata } = data;
+
+    let editor = <span />;
+    if (type === 'preview') {
+      editor = <PreviewEditor imageData={imageData} fileName={fileName} />;
+    } else if (type === 'info') {
+      editor = <InfoEditor data={extendedMetadata} fileName={fileName} />;
+    }
+
+    return (
+      <div ref={this.containerRef}>
+        {editor}
+      </div>
+    );
+  }
+}
+
+FileItemInformationEditor.propTypes = {
+  type: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+  doneEditing: PropTypes.func.isRequired
+};
+
+export default FileItemInformationEditor;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
new file mode 100644
index 000000000..dac058d0e
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+
+class FileItemInformationRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.getPreview = this.getPreview.bind(this);
+
+    this.setPreviewEdit = this.setPreviewEdit.bind(this);
+    this.setInfoEdit = this.setInfoEdit.bind(this);
+  }
+
+  getPreview() {
+    const { getPreview, node } = this.props;
+    const { id, type, schemeId } = node.data;
+    const itemId = type === 'Scheme' ? id : schemeId;
+    if (!itemId) return;
+
+    getPreview(itemId);
+  }
+
+  setPreviewEdit() {
+    const { setEdit, rowIndex, node } = this.props;
+    const {
+      id, type, schemeId, imageData
+    } = node.data;
+
+    const itemId = type === 'Scheme' ? id : schemeId;
+    if (!itemId) return;
+
+    const shouldFetch = !imageData;
+    setEdit(rowIndex, itemId, shouldFetch, 'preview');
+  }
+
+  setInfoEdit() {
+    const { setEdit, rowIndex, node } = this.props;
+    const { id } = node.data;
+    if (!id) return;
+
+    setEdit(rowIndex, id, false, 'info');
+  }
+
+  render() {
+    const { node } = this.props;
+    const { extendedMetadata, type, schemeCount } = node.data;
+
+    let previewOverlayBtn = <span />;
+
+    if (type === 'Scheme' || (type === 'File' && schemeCount === 1)) {
+      previewOverlayBtn = (
+        <Button
+          bsSize="xsmall"
+          onClick={this.setPreviewEdit}
+          style={{ marginRight: '5px', width: '25px' }}
+        >
+          <i className="fa fa-picture-o" />
+        </Button>
+      );
+    }
+
+    let extendedInfo = <span />;
+    if (type === 'File' && node.data.children) {
+      extendedInfo = (
+        <Button
+          bsSize="xsmall"
+          bsStyle="info"
+          style={{ marginRight: '5px', width: '25px' }}
+          onClick={this.setInfoEdit}
+        >
+          <i className="fa fa-info-circle" />
+        </Button>
+      );
+    }
+
+    let warningOverlay = <span />;
+    if (extendedMetadata) {
+      const { warnings } = extendedMetadata;
+
+      if (warnings && warnings.length > 0) {
+        const popoverId = `${node.data.id}-${type}-warning-popover`;
+        const warningPopover = (
+          <Popover id={popoverId}>
+            <ul>
+              {/* eslint-disable-next-line react/no-array-index-key */}
+              {warnings.map((w, idx) => <li key={idx}>{w}</li>)}
+            </ul>
+          </Popover>
+        );
+
+        warningOverlay = (
+          <OverlayTrigger trigger="click" placement="left" overlay={warningPopover}>
+            <Button bsSize="xsmall" bsStyle="warning" style={{ width: '25px' }}>
+              <i className="fa fa-exclamation-circle" />
+            </Button>
+          </OverlayTrigger>
+        );
+      }
+    }
+
+    return (
+      <div style={{ marginTop: '-2px' }}>
+        {previewOverlayBtn}
+        {warningOverlay}
+        {extendedInfo}
+      </div>
+    );
+  }
+}
+
+FileItemInformationRenderer.propTypes = {
+  getPreview: PropTypes.func.isRequired,
+  setEdit: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  node: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired
+};
+
+export default FileItemInformationRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
new file mode 100644
index 000000000..a110ffb7a
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import _ from 'lodash';
+
+class FileItemVersionFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { text: '' };
+
+    this.inputRef = React.createRef();
+
+    this.valueGetter = props.valueGetter;
+    this.onChange = this.onChange.bind(this);
+    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
+  }
+
+  onChange(event) {
+    const newValue = event.target.value;
+    if (this.state.text === newValue) return;
+
+    this.setState({ text: newValue }, this.debouncedChangedCallback);
+  }
+
+  getModel() {
+    return { value: this.state.text };
+  }
+
+  setModel(model) {
+    const text = model ? model.value : '';
+    this.setState({ text });
+  }
+
+  doesFilterPass(params) {
+    return params.node.data.version === this.state.text;
+  }
+
+  isFilterActive() {
+    return this.state.text;
+  }
+
+  afterGuiAttached() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    return (
+      <div className="ag-filter-body-wrapper">
+        <div className="ag-filter-body" >
+          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
+            <input
+              ref={this.inputRef}
+              value={this.state.text}
+              onChange={this.onChange}
+              className="ag-filter-filter"
+              placeholder="Filter ..."
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FileItemVersionFilter.propTypes = {
+  valueGetter: PropTypes.func.isRequired,
+  filterChangedCallback: PropTypes.func.isRequired,
+};
+
+export default FileItemVersionFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileStorage.js b/app/assets/javascripts/components/chemscanner/components/FileStorage.js
new file mode 100644
index 000000000..fe15715ad
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/FileStorage.js
@@ -0,0 +1,351 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { AgGridReact } from 'ag-grid-react';
+
+import FileItemActionsHeader from './FileItemActionsHeader';
+
+import FileItemActionsRenderer from './FileItemActionsRenderer';
+import FileItemApproveRenderer from './FileItemApproveRenderer';
+import FileItemImportedRenderer from './FileItemImportedRenderer';
+import FileItemInformationRenderer from './FileItemInformationRenderer';
+
+import FileItemApproveFilter from './FileItemApproveFilter';
+import FileItemImportedFilter from './FileItemImportedFilter';
+import FileItemVersionFilter from './FileItemVersionFilter';
+import FileItemFileNameFilter from './FileItemFileNameFilter';
+
+import FileItemInformationEditor from './FileItemInformationEditor';
+
+import {
+  buildRowData,
+  versionGetter,
+  fileNameGetter,
+  getNodeChildDetails,
+} from './fileStorageUtils';
+
+export default class FileStorage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: false,
+      editingType: null,
+      rowIndex: -1,
+    };
+
+    this.uploadInput = React.createRef();
+
+    this.onGridReady = this.onGridReady.bind(this);
+    this.rescanFiles = this.rescanFiles.bind(this);
+    this.deleteItems = this.deleteItems.bind(this);
+    this.beilsteinExport = this.beilsteinExport.bind(this);
+    this.showSelectedItems = this.showSelectedItems.bind(this);
+    this.openImportModal = this.openImportModal.bind(this);
+
+    this.setInformationEditing = this.setInformationEditing.bind(this);
+    this.doneEditing = this.doneEditing.bind(this);
+    this.toggleExpand = this.toggleExpand.bind(this);
+
+    this.setArchived = this.setArchived.bind(this);
+    this.unsetArchived = this.unsetArchived.bind(this);
+
+    this.columnDefs = [
+      {
+        headerName: 'File',
+        field: 'file',
+        filterFramework: FileItemFileNameFilter,
+        width: 250,
+        valueGetter: fileNameGetter,
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionFilteredOnly: true,
+        cellRenderer: 'agGroupCellRenderer',
+        cellRendererParams: {
+          suppressCount: true,
+          checkbox: params => ['File', 'Scheme'].includes(params.data.type),
+        }
+      },
+      {
+        headerName: 'Created At',
+        width: 125,
+        suppressSizeToFit: true,
+        sortable: true,
+        field: 'createdAt'
+      },
+      {
+        headerName: 'Version',
+        width: 110,
+        suppressSizeToFit: true,
+        filterFramework: FileItemVersionFilter,
+        valueGetter: versionGetter,
+      },
+      {
+        headerName: 'Approved',
+        width: 100,
+        suppressSizeToFit: true,
+        filterFramework: FileItemApproveFilter,
+        cellRendererFramework: FileItemApproveRenderer,
+        cellRendererParams: { approveItems: props.approveItems },
+        field: 'isApproved'
+      },
+      {
+        headerName: 'Transferred',
+        width: 110,
+        suppressSizeToFit: true,
+        filterFramework: FileItemImportedFilter,
+        cellRendererFramework: FileItemImportedRenderer,
+        field: 'isImported'
+      },
+      {
+        headerName: 'Information',
+        field: 'information',
+        width: 115,
+        suppressSizeToFit: true,
+        cellRendererFramework: FileItemInformationRenderer,
+        editable: true,
+        cellEditorFramework: FileItemInformationEditor,
+        cellEditorParams: () => ({
+          type: this.state.editingType,
+          doneEditing: this.doneEditing,
+        }),
+        cellRendererParams: {
+          getPreview: props.getPreview,
+          setEdit: this.setInformationEditing,
+        },
+      },
+      {
+        headerName: '',
+        field: '',
+        width: 250,
+        filter: false,
+        headerClass: 'chemscanner-filestorage-action-header',
+        headerComponentFramework: FileItemActionsHeader,
+        headerComponentParams: {
+          uploadInput: this.uploadInput,
+          rescanFiles: this.rescanFiles,
+          deleteItems: this.deleteItems,
+          beilsteinExport: this.beilsteinExport,
+          showSelectedItems: this.showSelectedItems,
+          openImportModal: this.openImportModal,
+          setArchived: this.setArchived,
+          unsetArchived: this.unsetArchived
+        },
+        cellClass: 'chemscanner-filestorage-action-row',
+        cellRendererFramework: FileItemActionsRenderer,
+        cellRendererParams: {
+          version: props.version,
+          showItems: props.showItems,
+          rescanFiles: props.rescanFiles,
+          hideItems: props.hideItems,
+          downloadFile: props.downloadFile,
+          deleteItems: props.deleteItems
+        },
+      }
+    ];
+  }
+
+  componentDidUpdate() {
+    if (!this.gridApi || !this.gridColumnApi) return;
+
+    this.gridApi.sizeColumnsToFit();
+
+    const { rowIndex, editing } = this.state;
+    if (!editing) return;
+
+    this.gridApi.startEditingCell({ rowIndex, colKey: 'information' });
+  }
+
+  onGridReady(params) {
+    this.gridApi = params.api;
+    this.gridColumnApi = params.columnApi;
+
+    params.api.sizeColumnsToFit();
+
+    // Must get the filter in order to trigger the filterChangedCallback
+    const fileFilter = this.gridApi.getFilterInstance('file');
+    if (!fileFilter) return;
+    this.gridApi.onFilterChanged();
+  }
+
+  setInformationEditing(rowIndex, itemId, shouldFetch, type) {
+    if (!this.gridApi) return;
+
+    const getPreview = () => this.props.getPreview(itemId);
+
+    if (shouldFetch) {
+      this.setState({ editing: true, editingType: type, rowIndex }, getPreview);
+    } else {
+      this.setState({ editing: true, editingType: type, rowIndex });
+    }
+  }
+
+  setArchived() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.setArchivedValue(fileIds, true);
+  }
+
+  unsetArchived() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.setArchivedValue(fileIds, false);
+  }
+
+  rescanFiles() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
+    this.props.rescanFiles(fileIds);
+  }
+
+  deleteItems() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    ['File', 'Scheme'].forEach((type) => {
+      const selectedItems = selected.filter(i => i.type === type);
+
+      const versionMap = {};
+      selectedItems.forEach((item) => {
+        const { id } = item;
+        const version = item.version || '';
+        const arr = versionMap[version];
+
+        if (arr) {
+          arr.push(id);
+        } else {
+          versionMap[version] = [id];
+        }
+      });
+
+      Object.keys(versionMap).forEach((version) => {
+        const ids = versionMap[version];
+        if (ids.length === 0) return;
+
+        this.props.deleteItems(ids, type, version);
+      });
+    });
+  }
+
+  beilsteinExport() {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const selectedItems = selected.filter(i => i.type === 'File' && !i.parentId);
+
+    this.props.beilsteinExport(selectedItems.map(s => s.id));
+  }
+
+  showSelectedItems(showType) {
+    if (!this.gridApi) return;
+
+    const selected = this.gridApi.getSelectedRows();
+    const ids = [];
+    selected.forEach((item) => {
+      const { type, schemeId, id } = item;
+      if (type === 'File' && schemeId) {
+        ids.push(item.schemeId);
+      } else if (type === 'Scheme') {
+        ids.push(id);
+      }
+    });
+
+    this.props.showItems(ids, 'Scheme', showType);
+  }
+
+  openImportModal() {
+    if (!this.gridApi) return;
+
+    const selectedRows = this.gridApi.getSelectedRows();
+    const files = selectedRows.filter(r => r.type === 'File');
+    const schemes = selectedRows.filter(r => r.type === 'Scheme');
+
+    this.props.openImportModal(files.concat(schemes));
+  }
+
+  doneEditing(editingType, data) {
+    if (editingType !== 'info') return;
+
+    const { id, type, extendedMetadata } = data;
+
+    this.setState({
+      editing: false, editingType: null, rowIndex: -1
+    }, () => this.props.updateMetadata(id, type, extendedMetadata));
+  }
+
+  toggleExpand(e) {
+    this.props.toggleExpand(e.data);
+  }
+
+  render() {
+    const {
+      files, schemes, reactions, molecules, uploadToStore
+    } = this.props;
+
+    const rowData = buildRowData(files, schemes, reactions, molecules);
+
+    const uploadFileToStore = (e) => {
+      uploadToStore(e.target.files);
+      this.uploadInput.current.value = '';
+    };
+
+    return (
+      <div style={{ margin: '20px 15px 0px 10px' }}>
+        <input
+          type="file"
+          multiple="multiple"
+          style={{ display: 'none' }}
+          ref={this.uploadInput}
+          onChange={uploadFileToStore}
+        />
+        <div className="ag-theme-balham" style={{ height: 'calc(100vh - 120px)' }}>
+          <AgGridReact
+            id="fileStorageGrid"
+            columnDefs={this.columnDefs}
+            rowData={rowData}
+            enableGroupEdit
+            groupSelectsFiltered
+            onRowGroupOpened={this.toggleExpand}
+            pagination
+            paginationAutoPageSize
+            paginateChildRows
+            rowSelection="multiple"
+            suppressRowClickSelection
+            getNodeChildDetails={getNodeChildDetails}
+            onGridReady={this.onGridReady}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+FileStorage.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  schemes: PropTypes.instanceOf(List).isRequired,
+  reactions: PropTypes.instanceOf(List).isRequired,
+  molecules: PropTypes.instanceOf(List).isRequired,
+  version: PropTypes.string,
+  approveItems: PropTypes.func.isRequired,
+  deleteItems: PropTypes.func.isRequired,
+  beilsteinExport: PropTypes.func.isRequired,
+  downloadFile: PropTypes.func.isRequired,
+  hideItems: PropTypes.func.isRequired,
+  getPreview: PropTypes.func.isRequired,
+  rescanFiles: PropTypes.func.isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+  showItems: PropTypes.func.isRequired,
+  openImportModal: PropTypes.func.isRequired,
+  updateMetadata: PropTypes.func.isRequired,
+  uploadToStore: PropTypes.func.isRequired,
+  toggleExpand: PropTypes.func.isRequired,
+};
+
+FileStorage.defaultProps = {
+  version: ''
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/ImportModal.js b/app/assets/javascripts/components/chemscanner/components/ImportModal.js
new file mode 100644
index 000000000..02afc7054
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/ImportModal.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, ControlLabel,
+  FormControl, FormGroup, Modal
+} from 'react-bootstrap';
+
+import TreeSelect from 'antd/lib/tree-select';
+
+export default class ImportModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      newLabel: null,
+      options: [],
+      selected: null,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onSelectChange = this.onSelectChange.bind(this);
+    this.handleImport = this.handleImport.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchCollections().then((res) => {
+      this.setState({ options: res.all_as_tree });
+    });
+  }
+
+  onSelectChange(id) {
+    this.setState({ selected: id });
+  }
+
+  onChange(e) {
+    if (!e.target) return;
+
+    this.setState({ newLabel: e.target.value });
+  }
+
+  handleImport() {
+    const { selectedItems, closeModal, importData } = this.props;
+    const { selected, newLabel } = this.state;
+
+    closeModal();
+
+    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
+    const collection = { id: selected, newCollection: newLabel };
+    importData(data, collection);
+  }
+
+  render() {
+    const { show, selectedItems, closeModal } = this.props;
+
+    const showModal = show && selectedItems.length > 0;
+
+    const { options, newLabel, selected } = this.state;
+
+    const btnText = newLabel ? (
+      `Create collection "${newLabel}" and Import`
+    ) : (
+      'Import'
+    );
+
+    return (
+      <Modal show={showModal}>
+        <Modal.Header>
+          <Modal.Title>Import to Collection</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormGroup>
+            <ControlLabel>Select a Collection</ControlLabel>
+            <TreeSelect
+              treeData={options}
+              value={selected}
+              onChange={this.onSelectChange}
+              style={{ width: '100%' }}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>or Create a new Collection</ControlLabel>
+            <FormControl
+              type="text"
+              placeholder="-- Please insert collection name --"
+              onChange={this.onChange}
+            />
+          </FormGroup>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={closeModal}>Close</Button>
+          <Button
+            bsStyle="warning"
+            style={{ float: 'left' }}
+            onClick={this.handleImport}
+            disabled={!(newLabel || selected)}
+          >
+            {btnText}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ImportModal.propTypes = {
+  show: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.object),
+  fetchCollections: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  importData: PropTypes.func.isRequired,
+};
+
+ImportModal.defaultProps = {
+  show: false,
+  selectedItems: []
+};
diff --git a/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js b/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
new file mode 100644
index 000000000..ead4d38f2
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
@@ -0,0 +1,302 @@
+import { List, Map } from 'immutable';
+
+const selectFileChildren = (rowNode) => {
+  const { data, selected } = rowNode;
+
+  const isFileSelected = data.type === 'File';
+  if (!isFileSelected) return;
+
+  const { childrenAfterGroup } = rowNode;
+  if (!childrenAfterGroup) return;
+
+  const childrenSchemes = rowNode.childrenAfterGroup.filter(node => (
+    node.data.type === 'Scheme'
+  ));
+  const childrenFiles = rowNode.childrenAfterGroup.filter(node => (
+    node.data.type === 'File'
+  ));
+
+  childrenSchemes.forEach(node => node.setSelected(selected));
+  childrenFiles.forEach((node) => {
+    node.setSelected(selected);
+    selectFileChildren(node);
+  });
+};
+
+export const onRowSelected = (event) => {
+  selectFileChildren(event.node);
+};
+
+export const versionGetter = n => (n.data.type === 'Item' ? '' : n.data.version);
+export const fileNameGetter = n => (n.data[`${n.data.type.toLowerCase()}Name`]);
+
+export const getNodeChildDetails = (rowItem) => {
+  const { children, fileName, type } = rowItem;
+  if (!children || children.length === 0) return null;
+
+  let { expanded } = rowItem;
+  if (expanded == null) expanded = !(type === 'ItemSummary');
+
+  return {
+    group: true,
+    expanded,
+    children,
+    key: fileName
+  };
+};
+
+const addChildren = (file, child) => {
+  const children = file.children || [];
+  children.push(child);
+
+  // eslint-disable-next-line no-param-reassign
+  file.children = children;
+};
+
+const buildFileTree = (files) => {
+  const fileMap = {};
+  const jsFiles = [];
+
+  files.forEach((immuFile) => {
+    const file = immuFile.toJS();
+    file.type = 'File';
+
+    const extMData = file.extendedMetadata;
+    let expanded;
+    // eslint-disable-next-line prefer-destructuring
+    if (extMData) expanded = extMData.expanded;
+    if (expanded == null) expanded = true;
+    file.expanded = expanded;
+
+    const { id } = file;
+    fileMap[id] = file;
+
+    jsFiles.push(file);
+  });
+
+  jsFiles.forEach((file) => {
+    const { parentId } = file;
+    if (!parentId) return;
+
+    const parent = fileMap[parentId];
+    if (parent.display && !file.display) {
+      /* eslint-disable no-param-reassign */
+      file.display = parent.display;
+      file.show = parent.show;
+
+      const { expanded } = parent;
+      if (expanded != null) file.expanded = expanded;
+      /* eslint-enable no-param-reassign */
+    }
+
+    addChildren(parent, file);
+  });
+
+  const fileTree = Object.keys(fileMap).sort((a, b) => b - a).reduce((arr, fileId) => {
+    const file = fileMap[fileId];
+    const { parentId } = file;
+    if (parentId) return arr;
+
+    arr.push(file);
+    return arr;
+  }, []);
+
+  return { fileTree, fileMap };
+};
+
+const buildFileSchemeTree = (fileTree, fileMap, schemes, reactions, molecules) => {
+  const schemeArr = [];
+
+  schemes.forEach((immuScheme) => {
+    const scheme = immuScheme.toJS();
+
+    const extMData = immuScheme.get('extendedMetadata');
+    let expanded;
+    if (extMData) expanded = extMData.get('expanded');
+    if (expanded == null) expanded = true;
+    scheme.expanded = expanded;
+
+    schemeArr.push(scheme);
+
+    const { version, imageData } = scheme;
+    scheme.type = 'Scheme';
+
+    const file = fileMap[scheme.sourceId];
+    if (!file) return;
+
+    const { fileName } = file;
+
+    const noFileSchemes = schemes.filter(s => s.get('sourceId') === file.id).size;
+    file.schemeCount = noFileSchemes;
+    file.version = version;
+
+    let leaf = file;
+    if (noFileSchemes > 1) {
+      scheme.schemeName = `Scheme ${scheme.index + 1}`;
+      scheme.fileName = fileName;
+      addChildren(file, scheme);
+      leaf = scheme;
+    } else if (noFileSchemes === 1) {
+      file.schemeId = scheme.id;
+      file.schemeExtendedMetadata = scheme.extendedMetadata;
+      file.imageData = imageData;
+
+      if (scheme.show) file.show = true;
+    }
+
+    const type = 'Item';
+    const schemeMolecules = molecules.filter(m => m.get('schemeId') === scheme.id);
+    const schemeReactions = reactions.filter(r => r.get('schemeId') === scheme.id);
+
+    const approvedReactions = schemeReactions.filter(r => r.get('isApproved'));
+    const approvedMolecules = schemeMolecules.filter(m => m.get('isApproved'));
+    if (approvedReactions.size === schemeReactions.size &&
+        approvedMolecules.size === schemeMolecules.size) {
+      scheme.isApproved = true;
+    } else {
+      scheme.isApproved = false;
+    }
+
+    const importedReactions = schemeReactions.filter(r => r.get('importedId'));
+    const importedMolecules = schemeMolecules.filter(m => m.get('importedId'));
+    if (importedReactions.size === schemeReactions.size &&
+        importedMolecules.size === schemeMolecules.size) {
+      scheme.isImported = true;
+    } else {
+      scheme.isImported = false;
+    }
+
+    let moleculesWarnings = [];
+    const moleculeArr = [];
+    schemeMolecules.forEach((m) => {
+      const moleculeRow = {
+        id: m.get('id'),
+        type,
+        itemType: 'Molecule',
+        fileName,
+        isApproved: m.get('isApproved'),
+        isImported: !!m.get('importedId'),
+        itemName: `Molecule ${m.get('id')}`,
+      };
+
+      const extData = (m.get('extendedMetadata') || Map());
+      const warnings = (extData.get('warnings') || List()).toJS();
+      if (warnings.length > 0) {
+        const mWarnings = warnings.map(w => `Molecule ${m.get('id')}: ${w}`);
+        moleculesWarnings = moleculesWarnings.concat(mWarnings);
+
+        moleculeRow.extendedMetadata = { warnings };
+      }
+
+      moleculeArr.push(moleculeRow);
+    });
+
+    const moleculeSummary = {
+      fileName,
+      itemsummaryName: `Molecules: ${scheme.moleculeCount}`,
+      type: 'ItemSummary',
+      itemType: 'Molecule',
+      version
+    };
+    if (moleculesWarnings.length > 0) {
+      moleculeSummary.extendedMetadata = { warnings: moleculesWarnings };
+    }
+    if (moleculeArr.length > 0) moleculeSummary.children = moleculeArr;
+    addChildren(leaf, moleculeSummary);
+
+    let reactionsWarnings = [];
+    const reactionArr = [];
+    schemeReactions.forEach((r) => {
+      const reactionRow = {
+        type,
+        id: r.get('id'),
+        itemType: 'Reaction',
+        fileName,
+        isApproved: r.get('isApproved'),
+        itemName: `Reaction ${r.get('id')}`,
+        isImported: !!r.get('importedId'),
+      };
+
+      const extData = (r.get('extendedMetadata') || Map());
+      const warnings = (extData.get('warnings') || List()).toJS();
+      if (warnings.length > 0) {
+        const rWarnings = warnings.map(w => `Reaction ${r.get('id')}: ${w}`);
+        reactionsWarnings = reactionsWarnings.concat(rWarnings);
+
+        reactionRow.extendedMetadata = { warnings };
+      }
+
+      reactionArr.push(reactionRow);
+    });
+
+    const reactionSummary = {
+      fileName,
+      itemsummaryName: `Reactions: ${scheme.reactionCount}`,
+      type: 'ItemSummary',
+      itemType: 'Reaction',
+      version
+    };
+    if (reactionsWarnings.length > 0) {
+      reactionSummary.extendedMetadata = { warnings: reactionsWarnings };
+    }
+    if (reactionArr.length > 0) reactionSummary.children = reactionArr;
+    addChildren(leaf, reactionSummary);
+  });
+
+  return schemeArr;
+};
+
+export const buildRowData = (files, schemes, reactions, molecules) => {
+  const { fileTree, fileMap } = buildFileTree(files);
+  const schemeArr = buildFileSchemeTree(fileTree, fileMap, schemes, reactions, molecules);
+
+  // Dectect file approve
+  Object.values(fileMap).forEach((file) => {
+    const fileSchemes = schemeArr.filter(s => s.sourceId === file.id);
+
+    const numApprovedSchemes = fileSchemes.filter(s => s.isApproved).length;
+    if (fileSchemes.length === numApprovedSchemes && numApprovedSchemes > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = false;
+    }
+
+    const numImportedSchemes = fileSchemes.filter(s => s.isImported).length;
+    if (fileSchemes.length === numImportedSchemes && numImportedSchemes > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = false;
+    }
+  });
+
+  Object.values(fileMap).forEach((file) => {
+    const { children } = file;
+    if (!children || children.length === 0) return;
+
+    if (children[0].type !== 'File') return;
+
+    const numApprovedChildren = children.filter(f => f.isApproved).length;
+    if (children.length === numApprovedChildren && numApprovedChildren > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isApproved = false;
+    }
+
+    const numImportedChildren = children.filter(f => f.isImported).length;
+    if (children.length === numImportedChildren && numImportedChildren > 0) {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = true;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      file.isImported = false;
+    }
+  });
+
+  return fileTree;
+};
diff --git a/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js b/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
new file mode 100644
index 000000000..b90e67d8e
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
@@ -0,0 +1,61 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { setArchivedValue } from '../actions/storedFileActions';
+import * as types from '../actions/ActionTypes';
+
+import ArchivedManagement from '../components/ArchivedManagement';
+
+const mapStateToProps = state => ({
+  files: state.get('files'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  setArchivedValue: (ids, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(setArchivedValue(ids, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+function ArchivedManagementContainer(props) {
+  const { files } = props;
+  const setArchivedValueFunc = props.setArchivedValue;
+
+  const archivedFiles = [];
+  const activedFiles = [];
+
+  files.forEach((f) => {
+    const file = f.toJS();
+    const { archived } = file.extendedMetadata;
+
+    if (archived == null || archived === false) {
+      activedFiles.push(file);
+    } else {
+      archivedFiles.push(file);
+    }
+  });
+
+  return (
+    <ArchivedManagement
+      archivedFiles={archivedFiles}
+      activedFiles={activedFiles}
+      setArchivedValue={setArchivedValueFunc}
+    />
+  );
+}
+
+ArchivedManagementContainer.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  setArchivedValue: PropTypes.func.isRequired,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ArchivedManagementContainer);
diff --git a/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js b/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
new file mode 100644
index 000000000..bc26ca3a3
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
@@ -0,0 +1,230 @@
+import { List } from 'immutable';
+import PropTypes from 'prop-types';
+import base64 from 'base-64';
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  deleteItems,
+  beilsteinExport,
+  downloadFile,
+  getScannedOutputs,
+  hideItems,
+  approveItems,
+  retrieveStoredFiles,
+  rescanFiles,
+  saveImage,
+  uploadToStore,
+  fetchPreview,
+  updateMetadata,
+  setArchivedValue,
+  setExpand,
+  // updatePreview
+} from '../actions/storedFileActions';
+import * as types from '../actions/ActionTypes';
+
+import FileStorage from '../components/FileStorage';
+
+import { isPngImage, isSvgImage } from '../utils';
+
+const mapStateToProps = state => ({
+  files: state.get('files'),
+  schemes: state.get('schemes'),
+  reactions: state.get('reactions'),
+  molecules: state.get('molecules'),
+  ui: state.get('ui'),
+  cddInstance: state.get('chemdrawInstance'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch,
+  retrieveStoredFiles: () => dispatch(retrieveStoredFiles()),
+  uploadToStore: (files) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(uploadToStore(files)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  rescanFiles: (ids) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(rescanFiles(ids)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  setArchivedValue: (ids, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(setArchivedValue(ids, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  showItems: (ids, type, display) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(getScannedOutputs(ids, type, display)).then((action) => {
+      const scannedSchemes = action.response.get('schemes');
+      if (!scannedSchemes || scannedSchemes.size === 0) {
+        dispatch({ type: types.UNSET_LOADING });
+        return;
+      }
+
+      const imageList = scannedSchemes.reduce((arr, scheme) => {
+        const imageData = scheme.get('pictureData') || '';
+        const id = scheme.get('id');
+        if (imageData.length === 0 || !id) return arr;
+
+        const isSaved = scheme.get('isSaved') || false;
+        if (isSaved) return arr;
+
+        const uuid = scheme.get('uuid');
+        arr.push({ id, fileUuid: uuid, imageData });
+        return arr;
+      }, []);
+
+      if (imageList.length > 0) {
+        saveImage(imageList);
+      }
+
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  hideItems: (ids, type) => dispatch(hideItems(ids, type)),
+  downloadFile: id => dispatch(downloadFile(id)),
+  toggleExpand: (data) => {
+    const { id, type } = data;
+    const value = !data.expanded;
+
+    const actionType = types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`];
+    if (actionType) dispatch(setExpand(id, type, value));
+
+    return null;
+  },
+  openImportModal: data => dispatch({ type: types.SET_IMPORT, data }),
+  deleteItems: (ids, type, version) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(deleteItems(ids, type, version)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  beilsteinExport: (ids) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return beilsteinExport(ids).then(res => res.json()).then((res) => {
+      const listFiles = res.files || [];
+
+      listFiles.forEach((file) => {
+        const raw = base64.decode(file.b64 || '');
+        const { length } = raw;
+        const ab = new ArrayBuffer(length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < length; i += 1) ia[i] = raw.charCodeAt(i);
+        const blob = new Blob([ab], { type: 'application/zip' });
+
+        const a = document.createElement('a');
+        a.style = 'display: none';
+        document.body.appendChild(a);
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = file.name;
+        a.click();
+        window.URL.revokeObjectURL(url);
+      });
+
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  approveItems: (ids, type, val) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(approveItems(ids, type, val)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+  updateMetadata: (id, type, extendedMetadata) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(updateMetadata(id, type, extendedMetadata)).then(() => {
+      dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  getPreview: (id) => {
+    const { dispatch } = dispatchProps;
+    dispatch({ type: types.SET_LOADING });
+
+    return fetchPreview(id).then((res) => {
+      let imageData = res.image_data;
+      if (!imageData) return dispatch({ type: types.UNSET_LOADING });
+
+      const isPng = isPngImage(imageData);
+      const isSvg = isSvgImage(imageData);
+
+      let type = isPng ? 'image/png' : 'image/svg+xml';
+      if (!isPng && !isSvg) {
+        type = 'image/png';
+        const { cddInstance } = stateProps;
+
+        if (RegExp('<?xml.*').test(imageData)) {
+          cddInstance.loadCDXML(imageData);
+        } else {
+          cddInstance.loadB64CDX(imageData);
+        }
+
+        const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
+        imageData = `data:image/png;base64,${b64png}`;
+        cddInstance.clear();
+
+        saveImage([{ id, imageData }]);
+      }
+
+      const blob = new Blob([imageData], { type });
+      const objUrl = window.URL.createObjectURL(blob);
+
+      dispatch({ type: types.GET_SCHEME_PREVIEW, imageData: objUrl, id });
+
+      return dispatch({ type: types.UNSET_LOADING });
+    });
+  },
+});
+
+class FileStorageContainer extends React.Component {
+  componentDidMount() {
+    this.props.retrieveStoredFiles();
+  }
+
+  render() {
+    const { files, schemes, ui } = this.props;
+    const version = ui.get('version');
+    const reload = ui.get('reloadGrid');
+
+    return (
+      <FileStorage
+        {...this.props}
+        files={files}
+        schemes={schemes}
+        version={version}
+        reload={reload}
+      />
+    );
+  }
+}
+
+FileStorageContainer.propTypes = {
+  files: PropTypes.instanceOf(List).isRequired,
+  schemes: PropTypes.instanceOf(List).isRequired,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(FileStorageContainer);
diff --git a/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js b/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
new file mode 100644
index 000000000..697c963fb
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import * as types from '../actions/ActionTypes';
+
+import { importData } from '../actions/storedFileActions';
+import ImportModal from '../components/ChemscannerImportModal';
+
+const ImportModalContainer = props => <ImportModal {...props} />;
+
+const fetchCollections = () => (
+  fetch('/api/v1/collections/all_as_tree', {
+    credentials: 'same-origin',
+    method: 'GET',
+  }).then(res => res.json())
+);
+
+const mapStateToProps = state => ({
+  show: state.get('ui').get('import'),
+  selectedItems: state.get('ui').get('selected'),
+  fetchCollections,
+});
+
+const mapDispatchToProps = dispatch => ({
+  closeModal: () => dispatch({ type: types.UNSET_IMPORT }),
+  importData: (data, collection, maintainShortLabel) => {
+    dispatch({ type: types.SET_LOADING });
+
+    return dispatch(importData(data, collection, maintainShortLabel)).then(() => (
+      dispatch({ type: types.UNSET_LOADING })
+    ));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ImportModalContainer);
diff --git a/app/assets/javascripts/components/chemscanner/reactionUtils.js b/app/assets/javascripts/components/chemscanner/reactionUtils.js
new file mode 100644
index 000000000..bf940d5cc
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/reactionUtils.js
@@ -0,0 +1,41 @@
+export const getSchemeMolecules = (reaction, molecules) => {
+  const fileUid = reaction.get('fileUuid');
+  const schemeIdx = reaction.get('schemeIdx');
+
+  return molecules.filter(m => (
+    m.get('schemeIdx') === schemeIdx && m.get('fileUuid') === fileUid
+  ));
+};
+
+export const getReactionReactants = (reaction, reactionMolecules) => {
+  const ids = reaction.get('reactantExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionReagents = (reaction, reactionMolecules) => {
+  const ids = reaction.get('reagentExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionSolvents = (reaction, reactionMolecules) => {
+  const ids = reaction.get('solventExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionProducts = (reaction, reactionMolecules) => {
+  const ids = reaction.get('productExtIds');
+  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
+};
+
+export const getReactionGroups = (reaction, molecules) => {
+  const reactionMolecules = getSchemeMolecules(reaction, molecules);
+
+  const reactants = getReactionReactants(reaction, reactionMolecules);
+  const reagents = getReactionReagents(reaction, reactionMolecules);
+  const solvents = getReactionSolvents(reaction, reactionMolecules);
+  const products = getReactionProducts(reaction, reactionMolecules);
+
+  return {
+    reactants, reagents, solvents, products
+  };
+};
diff --git a/app/assets/javascripts/components/chemscanner/reducers/root.js b/app/assets/javascripts/components/chemscanner/reducers/root.js
new file mode 100644
index 000000000..2423aadc7
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/reducers/root.js
@@ -0,0 +1,17 @@
+import { combineReducers } from 'redux-immutable';
+
+import files from './files';
+import schemes from './schemes';
+import reactions from './reactions';
+import molecules from './molecules';
+import chemdrawInstance from './chemdrawInstance';
+import ui from './ui';
+
+export default combineReducers({
+  ui,
+  chemdrawInstance,
+  files,
+  schemes,
+  reactions,
+  molecules,
+});
diff --git a/app/assets/javascripts/components/chemscanner/reducers/schemes.js b/app/assets/javascripts/components/chemscanner/reducers/schemes.js
new file mode 100644
index 000000000..506578089
--- /dev/null
+++ b/app/assets/javascripts/components/chemscanner/reducers/schemes.js
@@ -0,0 +1,176 @@
+import { List, Map, fromJS } from 'immutable';
+
+import * as types from '../actions/ActionTypes';
+import { createReducer } from '../utils';
+
+const addSchemes = (state, action) => {
+  const { response } = action;
+  if (!response) return state;
+
+  let outputSchemes = response.get('schemes') || List();
+  if (outputSchemes.size === 0) return state;
+
+  outputSchemes = outputSchemes.map(s => s.delete('pictureData'));
+
+  return state.concat(outputSchemes);
+};
+
+const revokeImageData = (scheme) => {
+  const imageData = scheme.get('imageData');
+  if (!imageData || !imageData.startsWith('blob:')) return;
+
+  window.URL.revokeObjectURL(imageData);
+};
+
+const schemes = createReducer(List(), {
+  [types.SCAN_FILE_FOR_MOLECULES]: addSchemes,
+  [types.SCAN_FILE_FOR_REACTIONS]: addSchemes,
+  [types.GET_SCANNED_OUTPUT]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const outputSchemes = response.get('schemes') || [];
+    let newState = state;
+
+    outputSchemes.forEach((scheme) => {
+      const idx = newState.findIndex(s => s.get('id') === scheme.get('id'));
+      if (idx < 0) return;
+
+      const newScheme = scheme.delete('pictureData').set('show', true);
+      newState = newState.update(idx, s => s.merge(newScheme));
+    });
+
+    return newState;
+  },
+  [types.RETRIEVE_STORED_FILES]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const storedSchemes = response.schemes;
+    if (!storedSchemes) return state;
+
+    const curIds = state.map(f => f.get('id'));
+    const newSchemes = storedSchemes.filter(s => !curIds.includes(s.id));
+
+    return state.concat(fromJS(newSchemes));
+  },
+  [types.RESCAN_STORED_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const newSchemes = response.get('schemes');
+    if (!newSchemes || newSchemes.size === 0) return state;
+
+    return state.concat(newSchemes);
+  },
+  [types.HIDE_FILE]: (state, action) => {
+    const { fileUid } = action;
+    const ids = action.ids || [];
+
+    let newState = state;
+    if (fileUid) {
+      const deleteIdx = [];
+      newState = state.map((s, idx) => {
+        if (s.get('fileUuid') === fileUid) {
+          deleteIdx.push(idx);
+          return s.set('display', '').set('show', false);
+        }
+
+        return s;
+      });
+
+      // Delete if not logged-in user
+      const firstScheme = newState.get(0);
+      if (firstScheme && !firstScheme.get('id')) {
+        deleteIdx.reverse().forEach((idx) => {
+          const s = newState.get(idx);
+          revokeImageData(s);
+          newState = newState.delete(idx);
+        });
+      }
+    }
+
+    if (ids.length > 0) {
+      newState = state.map((s) => {
+        const check = (
+          ids.includes(s.get('sourceId')) || ids.includes(s.get('id'))
+        );
+        if (check) return s.set('display', '').set('show', false);
+
+        return s;
+      });
+    }
+
+    return newState;
+  },
+  [types.HIDE_SCHEME]: (state, action) => {
+    const ids = action.ids || [];
+
+    return state.map(s => (
+      ids.includes(s.get('id')) ? s.set('display', '').set('show', false) : s
+    ));
+  },
+  [types.DELETE_STORED_FILE]: (state, action) => {
+    const source = action.response.get('source') || [];
+    const scheme = action.response.get('scheme') || [];
+    if (!source && !scheme) return state;
+
+    state.filter(s => source.includes(s.get('sourceId'))).forEach(s => revokeImageData(s));
+    state.filter(s => scheme.includes(s.get('id'))).forEach(s => revokeImageData(s));
+
+    const newState = state.filterNot(s => source.includes(s.get('sourceId')));
+    return newState.filterNot(s => scheme.includes(s.get('id')));
+  },
+  [types.GET_SCHEME_PREVIEW]: (state, action) => {
+    const { id, imageData } = action;
+    const idx = state.findIndex(s => s.get('id') === id);
+
+    return state.update(idx, s => s.set('imageData', imageData));
+  },
+  [types.APPROVE_FILE]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('schemes');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((s) => {
+      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
+
+      return s;
+    });
+  },
+  [types.APPROVE_SCHEME]: (state, action) => {
+    const { response } = action;
+    if (!response) return state;
+
+    const ids = response.get('schemes');
+    const val = response.get('val');
+    if (!ids) return state;
+
+    return state.map((s) => {
+      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
+
+      return s;
+    });
+  },
+  [types.TOGGLE_SCHEME_EXPAND]: (state, action) => {
+    const { id } = action;
+    if (!id) return state;
+
+    const idx = state.findIndex(s => s.get('id') === id);
+    if (idx < 0) return state;
+
+    return state.update(idx, (s) => {
+      const expanded = s.get('expanded') || false;
+
+      let metadata = s.get('extendedMetadata') || Map();
+      metadata = metadata.set('expanded', !expanded);
+
+      return s.set('extendedMetadata', metadata).set('expanded', !expanded);
+    });
+  }
+});
+
+export default schemes;
diff --git a/app/assets/javascripts/components/common/DeleteConfirmBtn.js b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
new file mode 100644
index 000000000..afd1f3ef2
--- /dev/null
+++ b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  OverlayTrigger,
+  Popover
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const DeleteConfirmBtn = (props) => {
+  const popover = (
+    <Popover id="popover-positioned-scrolling-left">
+      delete: <br /> {props.label} ?<br />
+      <ButtonGroup>
+        <Button bsStyle="danger" bsSize="xsmall" onClick={() => props.onClickYes()} >
+          Yes
+        </Button>&nbsp;
+        <Button bsStyle="warning" bsSize="xsmall" onClick={() => props.onClickNo()} >
+          No
+        </Button>
+      </ButtonGroup>
+    </Popover>
+  );
+  return (
+    <ButtonGroup className="actions">
+      <OverlayTrigger
+        animation
+        placement={props.tipPlacement}
+        root
+        trigger="focus"
+        overlay={popover}
+      >
+        <Button bsSize="xsmall" bsStyle="danger" >
+          <i className="fa fa-trash-o" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    </ButtonGroup>
+  );
+};
+
+DeleteConfirmBtn.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClickYes: PropTypes.func.isRequired,
+  onClickNo: PropTypes.func,
+  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left'])
+};
+
+DeleteConfirmBtn.defaultProps = {
+  onClickNo: () => { },
+  tipPlacement: 'right'
+};
+
+export default DeleteConfirmBtn;
diff --git a/app/assets/javascripts/components/common/DropdownButtonSelection.js b/app/assets/javascripts/components/common/DropdownButtonSelection.js
new file mode 100644
index 000000000..1d03a4771
--- /dev/null
+++ b/app/assets/javascripts/components/common/DropdownButtonSelection.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+
+const DropdownButtonSelection = props =>
+  (
+    <DropdownButton
+      title={props.selected || props.placeholder}
+      key={props.selected}
+      id={`dropdown-${uuid.v4()}`}
+      onSelect={props.onSelect}
+    >
+      {
+        props.options.map(element => (
+          <MenuItem key={element} eventKey={element} disabled={props.disabled}>
+            {element}
+          </MenuItem>
+        ))
+      }
+    </DropdownButton>
+  );
+
+DropdownButtonSelection.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func,
+  disabled: PropTypes.bool
+};
+
+DropdownButtonSelection.defaultProps = {
+  selected: null,
+  onSelect: null,
+  disabled: false
+};
+
+export default DropdownButtonSelection;
diff --git a/app/assets/javascripts/components/common/HelpInfo.js b/app/assets/javascripts/components/common/HelpInfo.js
new file mode 100644
index 000000000..373fcb985
--- /dev/null
+++ b/app/assets/javascripts/components/common/HelpInfo.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import helpDescs from '../utils/helpDescs';
+
+const HelpInfo = props => (
+  helpDescs[props.source] !== undefined ?
+    <span>
+      <OverlayTrigger container={this} trigger={['hover']} delayShow={600} placement={props.place} overlay={<Tooltip id="tooltip_content" className="left_tooltip max_tooltip">{helpDescs[props.source]}</Tooltip>}>
+        {props.optionalElement}
+      </OverlayTrigger>
+    </span> : null
+);
+
+HelpInfo.propTypes = {
+  source: PropTypes.string.isRequired,
+  place: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  optionalElement: PropTypes.element,
+};
+
+HelpInfo.defaultProps = {
+  place: 'top',
+  optionalElement: (<i className="fa fa-info-circle" aria-hidden="true" />)
+};
+
+export default HelpInfo;
diff --git a/app/assets/javascripts/components/common/InputButtonField.js b/app/assets/javascripts/components/common/InputButtonField.js
new file mode 100644
index 000000000..da8e5b8e5
--- /dev/null
+++ b/app/assets/javascripts/components/common/InputButtonField.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  FormGroup,
+  ControlLabel,
+  InputGroup,
+  FormControl,
+  OverlayTrigger,
+  Tooltip,
+  Button
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+
+const InputButtonField = props =>
+  (
+    <FormGroup>
+      <ControlLabel>{props.label}</ControlLabel>
+      <InputGroup>
+        <FormControl
+          type="text"
+          value={props.value}
+          placeholder={props.placeholder}
+          onChange={event => props.onInputChange(props.field, event)}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger
+            placement={props.tipPlacement}
+            overlay={<Tooltip id={`tooltip-${uuid.v4()}`}>{props.btnTip}</Tooltip>}
+          >
+            <Button
+              bsStyle="success"
+              onClick={() => props.onBtnClick(props.btnField, props.btnValue || '')}
+            >
+              {props.btnValue}
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+      </InputGroup>
+    </FormGroup>
+
+  );
+
+InputButtonField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  field: PropTypes.string.isRequired,
+  btnValue: PropTypes.string.isRequired,
+  btnField: PropTypes.string.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onBtnClick: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  btnTip: PropTypes.string,
+  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+};
+
+InputButtonField.defaultProps = {
+  placeholder: 'Please input...',
+  btnTip: 'click here',
+  tipPlacement: 'top'
+};
+
+export default InputButtonField;
diff --git a/app/assets/javascripts/components/common/NewsPreviewModal.js b/app/assets/javascripts/components/common/NewsPreviewModal.js
new file mode 100644
index 000000000..e7be6488c
--- /dev/null
+++ b/app/assets/javascripts/components/common/NewsPreviewModal.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Panel, Modal } from 'react-bootstrap';
+import QuillViewer from '../../components/QuillViewer';
+
+const NewsPreviewModal = ({ showModal, article, onClick }) => {
+  return (
+    <Modal animation show={showModal} dialogClassName="news-preview-dialog" onHide={() => onClick(false)}>
+      <Modal.Body>
+        <div>
+          <div className="ribbon ribbon-top-right"><span>Preview</span></div>
+          <Panel className="newseditor_review">
+            <Panel.Heading>
+              <span>{article.title}</span>
+              <div className="news_author">
+                <img src="/images/logo.png" alt="Preview" />&nbsp;
+                &nbsp;Creator
+                &nbsp;&nbsp;&nbsp;<i className="fa fa-pencil" aria-hidden="true" />&nbsp;Created Date
+              </div>
+              <br />
+              <div className="heading_separator" />
+            </Panel.Heading>
+            <Panel.Body>
+              <QuillViewer value={article.content} />
+            </Panel.Body>
+          </Panel>
+          <div className="ribbon ribbon-bottom-left"><span>Preview</span></div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default NewsPreviewModal;
diff --git a/app/assets/javascripts/components/common/RepoColumnHis.js b/app/assets/javascripts/components/common/RepoColumnHis.js
new file mode 100644
index 000000000..cf87cbb9d
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoColumnHis.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import RepoReviewTimeFormat from './RepoReviewTimeFormat';
+
+const showInfoTip = <Tooltip id="col_showinfo_tooltip">show Information</Tooltip>;
+const hideInfoTip = <Tooltip id="col_hideinfo_tooltip">hide Information</Tooltip>;
+
+
+export default class RepoColumnHis extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showInfo: false
+    }
+  }
+
+
+  render() {
+    const { history, field } = this.props;
+    const { showInfo } = this.state;
+    const columnHis = history.filter(h => h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
+    if (columnHis && columnHis.length > 0) {
+      if (showInfo == true) {
+        return (
+          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
+            <thead>
+              <tr>
+                <th width="30%">
+                  <div className="title" style={{ backgroundColor: 'white' }} onClick={() => this.setState({ showInfo: !showInfo })} >
+                    <OverlayTrigger placement="top" overlay={hideInfoTip}>
+                      <i className="fa fa-minus-square-o" />
+                    </OverlayTrigger>
+                    &nbsp;&nbsp; Information
+                  </div>
+                </th>
+                <th width="15%">Date</th>
+                <th width="45%">Comment</th>
+                <th width="10%">From User</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                columnHis.map((info) => {
+                  return (
+                    <tr>
+                      <td width="30%">{info.comments[`${field}`].origInfo}</td>
+                      <td width="15%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
+                      <td width="45%">{info.comments[`${field}`].comment}</td>
+                      <td width="10%">{info.comments[`${field}`].username}</td>
+                    </tr>
+                  );
+                })
+              }
+            </tbody>
+          </Table>
+        );
+      } else {
+        return (
+          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
+            <thead>
+              <tr>
+                <th width="15%">
+                  <div
+                    className="title"
+                    style={{ backgroundColor: 'white' }}
+                    onClick={() => this.setState({ showInfo: !showInfo })}
+                  >
+                    <OverlayTrigger placement="top" overlay={showInfoTip}>
+                      <i className="fa fa-plus-square-o" />
+                    </OverlayTrigger>
+                    &nbsp;&nbsp; Date
+                  </div>
+                </th>
+                <th width="45%"></th>
+                <th width="10%">From User</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                columnHis.map((info) => {
+                  return (
+                    <tr>
+                      <td width="20%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
+                      <td width="60%">{info.comments[`${field}`].comment}</td>
+                      <td width="10%">{info.comments[`${field}`].username}</td>
+                    </tr>
+                  );
+                })
+              }
+            </tbody>
+          </Table>
+        );
+      }
+    }
+    return <span />;
+  };
+}
+
+RepoColumnHis.propTypes = {
+  field: PropTypes.string.isRequired,
+  history: PropTypes.array
+};
+
+RepoColumnHis.defaultProps = {
+  history: []
+};
diff --git a/app/assets/javascripts/components/common/RepoCommentBtn.js b/app/assets/javascripts/components/common/RepoCommentBtn.js
new file mode 100644
index 000000000..1f6ebe838
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoCommentBtn.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { CommentComponent } from '../../libHome/RepoReviewCommon';
+
+const RepoCommentBtn = (props) => {
+  const {
+    field, orgInfo, onShow, reviewLevel, history
+  } = props;
+
+  const current = (history && history.slice(-1).pop()) || {};
+//  const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
+
+  const hasComment = (current.comments && field in current.comments) || false;
+  const comment = CommentComponent(field, history) || '';
+
+  const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
+
+  if (isEditable === false) {
+    return <span>{comment}</span>;
+  }
+
+  return (
+    <span>
+      <Button
+        bsStyle={hasComment ? 'success' : 'default'}
+        bsSize="xsmall"
+        onClick={() => onShow(true, field, orgInfo)}
+      >
+        <i className="fa fa-comment" />
+      </Button>
+      {comment}
+    </span>
+  );
+};
+
+RepoCommentBtn.propTypes = {
+  onShow: PropTypes.func.isRequired,
+  history: PropTypes.array,
+  comments: PropTypes.object,
+  field: PropTypes.string,
+  orgInfo: PropTypes.string,
+  state: PropTypes.string,
+  reviewLevel: PropTypes.number,
+  textAreaAttr: PropTypes.object
+};
+
+RepoCommentBtn.defaultProps = {
+  history: [],
+  comments: null,
+  field: '',
+  orgInfo: '',
+  state: '',
+  reviewLevel: 0,
+  submitter: ''
+};
+
+export default RepoCommentBtn;
diff --git a/app/assets/javascripts/components/common/RepoCommentModal.js b/app/assets/javascripts/components/common/RepoCommentModal.js
new file mode 100644
index 000000000..471accef7
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoCommentModal.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, FormControl } from 'react-bootstrap';
+import Draggable from 'react-draggable';
+import RepoColumnHis from './RepoColumnHis';
+
+export default class RepoCommentModal extends React.Component {
+  render() {
+    const {
+      elementId, elementType, show, onHide, onUpdate, field, orgInfo,
+      history, textAreaAttrs, reviewLevel
+    } = this.props;
+
+    const current = (history && history.length > 0 && history.slice(-1).pop()) || {};
+    const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
+
+    const defaultAttrs = {
+      style: {
+        height: '100px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
+    if (show) {
+      return (
+        <div>
+          <Draggable>
+            <Modal
+              show
+              onHide={() => onHide(false, field)}
+              bsSize="large"
+              backdrop="static"
+            >
+              <Modal.Header closeButton>
+                <Modal.Title>
+                  Comment on: {field}
+                </Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <RepoColumnHis history={history} field={field} />
+                <br />
+                {orgInfo}
+                <br />
+                <FormControl
+                  componentClass="textarea"
+                  {...textAreaAttrs || defaultAttrs}
+                  defaultValue={comment || ''}
+                  inputRef={(m) => { this.commentInput = m; }}
+                />
+                <ButtonToolbar>
+                  <Button
+                    onClick={() => onHide(false)}
+                  > Close
+                  </Button>
+                  <Button
+                    bsStyle="primary"
+                    disabled={!isEditable}
+                    onClick={() =>
+                      onUpdate(elementId, elementType, field, this.commentInput.value, orgInfo, true)}
+                  >
+                    Update
+                  </Button>
+                </ButtonToolbar>
+              </Modal.Body>
+            </Modal>
+          </Draggable>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+RepoCommentModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired,
+  show: PropTypes.bool,
+  field: PropTypes.string,
+  history: PropTypes.array,
+  orgInfo: PropTypes.string,
+  reviewLevel: PropTypes.number,
+  onUpdate: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired
+};
+
+RepoCommentModal.defaultProps = {
+  show: false,
+  history: [],
+  reviewLevel: 0,
+  field: '',
+  orgInfo: '',
+};
diff --git a/app/assets/javascripts/components/common/RepoMetadataModal.js b/app/assets/javascripts/components/common/RepoMetadataModal.js
new file mode 100644
index 000000000..7defa8a65
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoMetadataModal.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+export default class RepoMetadataModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false,
+      metadata: []
+    };
+    this.loadMetadata = this.loadMetadata.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadMetadata();
+  }
+
+  loadMetadata() {
+    const { elementId, elementType } = this.props;
+    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
+      this.setState({ metadata: result.metadata });
+    });
+  }
+
+  render() {
+    const { modalShow, metadata } = this.state;
+    const { elementId, elementType } = this.props;
+    return (
+      <div>
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
+        >
+          <Button
+            onClick={() => this.setState({ modalShow: true })}
+            style={{ marginLeft: '5px' }}
+          >
+            <i className="fa fa-file-code-o" />&nbsp;
+            Metadata
+          </Button>
+        </OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="news-preview-dialog"
+        >
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              <h4>
+                <Label>
+                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
+                </Label>
+              </h4>
+            </div>
+            <div style={{
+              maxHeight: '50vh',
+              overflow: 'auto',
+              whiteSpace: 'pre',
+              backgroundColor: 'black',
+              color: 'white',
+              fontFamily: 'monospace'
+            }}
+            >
+              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
+            </div>
+            <br />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
+              > Download
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+RepoMetadataModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  elementType: PropTypes.string.isRequired
+};
diff --git a/app/assets/javascripts/components/common/RepoPreviewImage.js b/app/assets/javascripts/components/common/RepoPreviewImage.js
new file mode 100644
index 000000000..d307f349f
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoPreviewImage.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageModal from './ImageModal';
+import RepoSpectraBtn from './RepoSpectra';
+
+const RepoPreviewImage = (props) => {
+  const {
+    element, analysis, isLogin, previewImg, title
+  } = props;
+  let hasPop = true;
+  let fetchNeeded = false;
+  let fetchId = 0;
+  let fetchFilename = '';
+  let imageStyle = { style: { cursor: 'default' } };
+  if (previewImg.startsWith('data:image')) {
+    fetchNeeded = true;
+    fetchId = analysis.preview_img.id;
+    fetchFilename = analysis.preview_img.filename;
+  } else {
+    hasPop = false;
+    imageStyle = { style: { cursor: 'default', display: 'none' } };
+  }
+  return (
+    <div className="preview">
+      <div className="spectra" {...imageStyle}>
+        <RepoSpectraBtn element={element} analysis={analysis} isLogin={isLogin} />
+      </div>
+      <ImageModal
+        imageStyle={imageStyle}
+        hasPop={hasPop}
+        preivewObject={{ src: previewImg }}
+        popObject={{
+          title, src: previewImg, fetchNeeded, fetchId, fetchFilename
+        }}
+      />
+    </div>
+  );
+};
+
+RepoPreviewImage.propTypes = {
+  element: PropTypes.object,
+  analysis: PropTypes.object,
+  isLogin: PropTypes.bool,
+  previewImg: PropTypes.string.isRequired,
+  title: PropTypes.string
+};
+
+RepoPreviewImage.defaultProps = {
+  isLogin: false,
+  title: ''
+};
+
+export default RepoPreviewImage;
diff --git a/app/assets/javascripts/components/common/RepoPublicComment.js b/app/assets/javascripts/components/common/RepoPublicComment.js
new file mode 100644
index 000000000..7753daeb4
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoPublicComment.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl, Label } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import PublicActions from '../actions/PublicActions';
+
+export default class RepoPublicComment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false
+    };
+    this.updateComment = this.updateComment.bind(this);
+  }
+
+  updateComment() {
+    const { id, type, pageType, pageId } = this.props;
+    RepositoryFetcher.reviewerComment(id, type, this.commentInput.value)
+      .then((result) => {
+        this.setState({ modalShow: false });
+        if (pageType === 'reactions') {
+          PublicActions.displayReaction(pageId || id);
+        } else {
+          PublicActions.displayMolecule(pageId);
+        }
+      });
+  }
+
+  render() {
+    const { modalShow } = this.state;
+    const { isReviewer, userInfo, title } = this.props;
+    const defaultAttrs = {
+      style: {
+        height: '400px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    let btnTbl = (<span />);
+    let commentModal = (<span />);
+    const style = { height: '20px', width: '20px', borderRadius: '50%', border: '1px' };
+    const hasComment = userInfo != '';
+
+    if (hasComment === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data</Tooltip>}>
+          <Button bsSize="xsmall" bsStyle="warning" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    } else if (hasComment === false && isReviewer === true) {
+      btnTbl = (
+        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data (edit)</Tooltip>}>
+          <Button bsSize="xsmall" style={style} onClick={() => this.setState({ modalShow: true })}>
+            <i className="fa fa-info" />
+          </Button>
+        </OverlayTrigger>
+      );
+    }
+
+    if (isReviewer === true) {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <FormControl
+              componentClass="textarea"
+              defaultValue={userInfo || ''}
+              {...defaultAttrs}
+              inputRef={(m) => { this.commentInput = m; }}
+            />
+            <ButtonToolbar>
+              <Button
+                bsStyle="warning"
+                onClick={() => this.setState({ modalShow: false })}
+              > Close
+              </Button>
+              <Button
+                bsStyle="primary"
+                onClick={() => this.updateComment()}
+              > Update
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      );
+    } else {
+      commentModal = (
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="pub-info-dialog"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Note for {title}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ overflow: 'auto', whiteSpace: 'pre-wrap' }}>
+            {userInfo}
+          </Modal.Body>
+        </Modal>
+      );
+    }
+    return (
+      <span>
+        {btnTbl}
+        {commentModal}
+      </span>
+    );
+  }
+}
+
+RepoPublicComment.propTypes = {
+  id: PropTypes.number.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  userInfo: PropTypes.string,
+  isReviewer: PropTypes.bool,
+  type: PropTypes.string,
+  pageId: PropTypes.number,
+  pageType: PropTypes.string,
+  title: PropTypes.string
+};
+
+RepoPublicComment.defaultProps = {
+  isReviewer: false,
+  type: '',
+  pageId: null,
+  pageType: 'reactions',
+  userInfo: '',
+  title: ''
+};
diff --git a/app/assets/javascripts/components/common/RepoReviewHisColumns.js b/app/assets/javascripts/components/common/RepoReviewHisColumns.js
new file mode 100644
index 000000000..2fa3ec4cb
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoReviewHisColumns.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Table } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import RepoReviewTimeFormat from './RepoReviewTimeFormat';
+
+const RepoReviewHisColumns = (props) => {
+  const { comments } = props;
+
+  if (comments && Object.keys(comments).length > 0) {
+    return (
+      <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
+        <thead>
+          <tr>
+            <th width="10%">Column</th>
+            <th width="20%">Information</th>
+            <th width="10%">Date</th>
+            <th width="50%">Comment</th>
+            <th width="10%">From User</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            Object.keys(comments).map((key) => {
+              const info = comments[key];
+              return (
+                <tr key={key}>
+                  <td width="10%">{key}</td>
+                  <td width="20%">{info.origInfo}</td>
+                  <td width="10%">{RepoReviewTimeFormat(info.timestamp)}</td>
+                  <td width="50%">{info.comment}</td>
+                  <td width="10%">{info.username}</td>
+                </tr>
+              );
+            })
+          }
+        </tbody>
+      </Table>
+    );
+  }
+  return <span />;
+};
+
+RepoReviewHisColumns.propTypes = {
+  comments: PropTypes.object,
+};
+
+RepoReviewHisColumns.defaultProps = {
+  comments: {}
+};
+
+export default RepoReviewHisColumns;
diff --git a/app/assets/javascripts/components/common/RepoReviewModal.js b/app/assets/javascripts/components/common/RepoReviewModal.js
new file mode 100644
index 000000000..74fe9aa33
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoReviewModal.js
@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, FormControl, OverlayTrigger, Table, Tooltip } from 'react-bootstrap';
+import uuid from 'uuid';
+import { isEmpty } from 'lodash';
+import RepoReviewHisColumns from './RepoReviewHisColumns';
+import RepoReviewTimeFormat from './RepoReviewTimeFormat';
+
+export default class RepoReviewModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      idxDetail: -1
+    };
+    this.clickDetail = this.clickDetail.bind(this);
+  }
+
+  clickDetail(idxDetail) {
+    if (this.state.idxDetail == idxDetail) {
+      this.setState({ idxDetail: -1 });
+    } else {
+      this.setState({ idxDetail });
+    }
+  }
+
+  renderComments() {
+    const { idxDetail } = this.state;
+    const { reviewLevel, history } = this.props;
+
+    const curObj = (history && history.length > 0 && history.slice(-1).pop()) || {};
+
+    //const isEditable = ((reviewLevel === 3 && curObj.state === 'pending') || (reviewLevel === 2 && curObj.state === 'reviewed')) || false;
+
+    let historyTbl = null;
+
+    if (history && history.length > 0) {
+      historyTbl = history.map((his, idx) => (
+        <tbody key={uuid.v4()}>
+          <tr>
+            <td style={{ width: '5%' }}>{idx + 1}</td>
+            <td style={{ width: '5%' }}>
+              <OverlayTrigger placement="top" overlay={<Tooltip id="comment_tooltip">view columns&#39; comments</Tooltip>}>
+                <Button style={{ display: his.comments && isEmpty(his.comments) === false ? '' : 'none' }} bsSize="xsmall" onClick={() => this.clickDetail(idx)}><i className="fa fa-list" aria-hidden="true" /></Button>
+              </OverlayTrigger>
+            </td>
+            <td style={{ width: '10%' }}>{his.action}</td>
+            <td style={{ width: '12%' }}>{RepoReviewTimeFormat(his.timestamp)}</td>
+            <td style={{ width: '48%' }}>{his.comment}</td>
+            <td style={{ width: '10%' }}>{his.username}</td>
+          </tr>
+          {
+            (idxDetail === idx && his.comments && isEmpty(his.comments) === false) ?
+            (<tr><td colSpan={6} style={{ width: '100%' }}><RepoReviewHisColumns comments={his.comments} /></td></tr>) : null
+          }
+        </tbody>
+      ));
+    }
+
+    return (
+      <div>
+        <div >
+          <Table striped bordered>
+            <thead>
+              <tr>
+                <th width="5%">#</th>
+                <th width="5%">Detail</th>
+                <th width="10%">Action</th>
+                <th width="12%">Date</th>
+                <th width="48%">Comment</th>
+                <th width="10%">From User</th>
+              </tr>
+            </thead>
+            {historyTbl}
+          </Table>
+        </div>
+        <br />
+        Summary
+        <FormControl
+          componentClass="textarea"
+          style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
+          defaultValue={curObj.comment || ''}
+          inputRef={(m) => { this.summaryInput = m; }}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      show, elementId, action, onSubmit, onHide, reviewLevel, history
+    } = this.props;
+
+    const currComment = (history && history.length > 0 && history.slice(-1).pop()) || {}
+    const isEditable = ((reviewLevel === 3 && currComment.state === 'pending') || (reviewLevel === 2 && currComment.state === 'reviewed')) || false;
+
+    let title = action;
+    if (reviewLevel === 2 && action === 'Decline') {
+      title = 'Withdraw';
+    } else if (reviewLevel === 3 && action === 'Decline') {
+      title = 'Reject';
+    }
+
+    if (show) {
+      return (
+        <div>
+          <Modal
+            show
+            dialogClassName="structure-editor-modal"
+            onHide={() => onHide(false)}
+            bsSize="large"
+            backdrop="static"
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>
+                {title}
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <div id="div-modal-body" style={{ height: 'calc(100vh - 300px)', maxHeight: 'calc(100vh - 300px)', overflow: 'auto' }}>
+                {this.renderComments()}
+
+              </div>
+              <br />
+              <ButtonToolbar>
+                <Button
+                  bsStyle="warning"
+                  onClick={() => onHide(false)}
+                > Close
+                </Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={!isEditable}
+                  onClick={() =>
+                    onSubmit(
+                      elementId,
+                      this.summaryInput.value,
+                      action
+                    )
+                  }
+                > {title}
+                </Button>
+              </ButtonToolbar>
+            </Modal.Body>
+          </Modal>
+        </div>
+      );
+    }
+    return <div />;
+  }
+}
+
+RepoReviewModal.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  action: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  history: PropTypes.array,
+  reviewLevel: PropTypes.number,
+  onSubmit: PropTypes.func.isRequired,
+  onHide: PropTypes.func.isRequired
+};
+
+RepoReviewModal.defaultProps = {
+  show: false,
+  reviewLevel: 0,
+  history: []
+};
diff --git a/app/assets/javascripts/components/common/RepoReviewTimeFormat.js b/app/assets/javascripts/components/common/RepoReviewTimeFormat.js
new file mode 100644
index 000000000..9b0937446
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoReviewTimeFormat.js
@@ -0,0 +1,24 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+
+const RepoReviewTimeFormat = (timeField) => {
+  if (timeField == null || typeof timeField === 'undefined' || timeField === '') {
+    return '';
+  }
+  let newTimeObj = null;
+  if (moment(timeField, 'DD-MM-YYYY HH:mm:ss').isValid()) {
+    newTimeObj = moment(timeField, 'DD-MM-YYYY HH:mm:ss');
+    return moment(newTimeObj).format('DD-MM-YYYY HH:mm');
+  }
+  return timeField;
+};
+
+RepoReviewTimeFormat.propTypes = {
+  timeField: PropTypes.func.isRequired
+};
+
+RepoReviewTimeFormat.defaultProps = {
+  timeField: null
+};
+
+export default RepoReviewTimeFormat;
diff --git a/app/assets/javascripts/components/common/RepoSpectra.js b/app/assets/javascripts/components/common/RepoSpectra.js
new file mode 100644
index 000000000..20da842fe
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoSpectra.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
+import { BuildSpcInfos, JcampIds } from '../utils/SpectraHelper';
+import SpectraActions from '../actions/SpectraActions';
+import ViewSpectra from '../ViewSpectra';
+import NotificationActions from '../actions/NotificationActions';
+
+const RepoSpectraBtn = (props) => {
+  const { element, analysis } = props;
+  if (element == null || analysis == null) return null;
+  const spcInfos = BuildSpcInfos(element, analysis);
+  if (spcInfos.length < 1) return null;
+  const toggleSpectraModal = (e) => {
+    e.stopPropagation();
+    if (!props.isLogin) {
+      NotificationActions.add({
+        title: 'View Spectra', message: 'Please log in first.', level: 'warning', position: 'tc'
+      });
+    } else {
+      SpectraActions.ToggleModal();
+      SpectraActions.LoadSpectra.defer(spcInfos);
+    }
+  };
+  const jcampIds = JcampIds(analysis);
+  const hasJcamp = jcampIds.orig.length > 0;
+  return (
+    <span>
+      <OverlayTrigger
+        placement="top"
+        delayShow={500}
+        overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}
+      >
+        <Button
+          bsSize="xsmall"
+          className="button-right"
+          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+          onClick={toggleSpectraModal}
+          disabled={!hasJcamp || !(spcInfos.length > 0)}
+        >
+          <i className="fa fa-area-chart" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+      <ViewSpectra sample={element} handleSampleChanged={() => { }} handleSubmit={() => { }} />
+    </span>
+  );
+};
+
+RepoSpectraBtn.propTypes = {
+  element: PropTypes.object,
+  analysis: PropTypes.object,
+  isLogin: PropTypes.bool
+};
+
+RepoSpectraBtn.defaultProps = { isLogin: false };
+
+export default RepoSpectraBtn;
diff --git a/app/assets/javascripts/components/common/RepoUserComment.js b/app/assets/javascripts/components/common/RepoUserComment.js
new file mode 100644
index 000000000..a1f14dd38
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoUserComment.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+
+export default class RepoUserComment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalShow: false
+    };
+    this.sendEmail = this.sendEmail.bind(this);
+  }
+
+  sendEmail() {
+    const { id, type, pageType, pageId } = this.props;
+    RepositoryFetcher.userComment(id, type, pageId || id, pageType, this.commentInput.value)
+      .then((result) => {
+        this.setState({ modalShow: false });
+      });
+  }
+
+  render() {
+    const { modalShow } = this.state;
+    const { id, isLogin, title } = this.props;
+    const defaultAttrs = {
+      style: {
+        height: '400px', overflow: 'auto', whiteSpace: 'pre'
+      }
+    };
+
+    if (isLogin) {
+      return (
+        <span>
+          <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
+            <Button bsSize="xsmall" onClick={() => this.setState({ modalShow: true })}>
+              <i className="fa fa-envelope-o" />
+            </Button>
+          </OverlayTrigger>
+          <Modal
+            show={modalShow}
+            onHide={() => this.setState({ modalShow: false })}
+            dialogClassName="pub-info-dialog"
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>
+                Comments for the reviewers
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body style={{ overflow: 'auto' }}>
+              {title}
+              <FormControl
+                componentClass="textarea"
+                {...defaultAttrs}
+                inputRef={(m) => { this.commentInput = m; }}
+              />
+              <br />
+              <ButtonToolbar>
+                <Button
+                  bsStyle="warning"
+                  onClick={() => this.setState({ modalShow: false })}
+                > Close
+                </Button>
+                <Button
+                  bsStyle="primary"
+                  onClick={() => this.sendEmail()}
+                > Send to Chemotion Reviewers
+                </Button>
+              </ButtonToolbar>
+            </Modal.Body>
+          </Modal>
+        </span>
+      );
+    }
+    return (<span />);
+  }
+}
+
+RepoUserComment.propTypes = {
+  id: PropTypes.number.isRequired,
+  isLogin: PropTypes.bool,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  pageType: PropTypes.string,
+  pageId: PropTypes.number
+};
+
+RepoUserComment.defaultProps = {
+  isLogin: false,
+  type: '',
+  title: '',
+  pageType: 'reactions',
+  pageId: null
+};
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
new file mode 100644
index 000000000..d084b035c
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button, OverlayTrigger, Tooltip, FormControl } from 'react-bootstrap';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import NotificationActions from '../actions/NotificationActions';
+
+const registedCompoundTooltip = (
+  <div className="repo-xvial-info">
+    For availability please contact the Compound Platform team (<span className="env"><i className="fa fa-envelope-o" aria-hidden="true" /></span>). An explanation can be accessed via our Youtube channel&nbsp;
+    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>&nbsp;
+      or on our how-to pages
+    <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
+  </div>
+);
+
+export default class RepoXvialButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataModalShow: false,
+      requestModalShow: false
+    };
+    this.save = this.save.bind(this);
+    this.request = this.request.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.checkRequest = this.checkRequest.bind(this);
+  }
+
+  checkRequest() {
+    if (this.props.isLogin) {
+      this.setState({ requestModalShow: true });
+    } else {
+      NotificationActions.add({
+        title: 'Request to the Compound-Platform.eu',
+        message: 'Please log in to send the request.',
+        level: 'warning',
+        position: 'tc'
+      });
+    }
+  }
+
+  save() {
+    const { elementId, saveCallback } = this.props;
+    RepositoryFetcher.compound(elementId, this.xInput.value, 'update')
+      .then(() => {
+        this.closeModal();
+        saveCallback(elementId, this.xInput.value);
+      });
+  }
+
+  request() {
+    const { elementId } = this.props;
+    RepositoryFetcher.compound(elementId, this.rInput.value, 'request')
+      .then(() => {
+        this.closeModal();
+        NotificationActions.add({
+          title: 'Request to the Compound-Platform.eu',
+          message: 'Your request has been emailed to the Compound-Platform',
+          level: 'info',
+          position: 'tc'
+        });
+      });
+  }
+
+  closeModal() {
+    this.setState({ dataModalShow: false, requestModalShow: false });
+  }
+
+  render() {
+    const { dataModalShow, requestModalShow } = this.state;
+    const {
+      isEditable, isLogin, data, allowRequest
+    } = this.props;
+    const hasData = !!(data && data !== '');
+    const compoundLink = hasData ? (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}>
+        <Button bsStyle="link" bsSize="xsmall" onClick={() => { window.open('https://compound-platform.eu/home', '_blank'); }}>X-Vial: Sample available</Button>
+      </OverlayTrigger>
+    ) : null;
+    const dataModal = (
+      <Modal show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
+        <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
+        <Modal.Body>
+          <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
+          <br />
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
+          <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
+        </Modal.Body>
+      </Modal>
+    );
+    const requestModal = (
+      <Modal show={requestModalShow} onHide={() => this.closeModal()} backdrop="static">
+        <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
+        <Modal.Body>
+          <FormControl style={{ height: '400px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} />
+          <br />
+          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
+          <Button bsStyle="primary" onClick={() => this.request()}>Send request to the Compound-Platform</Button>
+        </Modal.Body>
+      </Modal>
+    );
+    const editLink = isEditable ? (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>}>
+        <a onClick={() => this.setState({ dataModalShow: true })} rel="noopener noreferrer"><i className="fa fa-pencil" /></a>
+      </OverlayTrigger>
+    ) : null;
+    const requestLink = allowRequest && hasData ? (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}>
+        <a onClick={() => this.checkRequest()} rel="noopener noreferrer"><i className="fa fa-envelope-o" /></a>
+      </OverlayTrigger>
+    ) : null;
+    const info = requestLink ? (
+      <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
+        <a rel="noopener noreferrer"><i className="fa fa-info-circle" aria-hidden="true" /></a>
+      </OverlayTrigger>
+    ) : null;
+    if (!isLogin) {
+      if (compoundLink) {
+        return (
+          <span className="xvial-pub-elem">
+            <span><i className="icon-xvial" aria-hidden="true" />{compoundLink}{requestLink}{info}</span>
+          </span>
+        );
+      }
+      return null;
+    }
+    if (compoundLink) {
+      return (
+        <span className="xvial-pub-elem">
+          <span>
+            <i className="icon-xvial" aria-hidden="true" />
+            {compoundLink}
+            {editLink}
+            {requestLink}
+            {info}
+          </span>
+          {dataModal}
+          {requestModal}
+        </span>
+      );
+    }
+    if (editLink) {
+      return (
+        <span className="xvial-pub-elem">
+          <span>
+            <i className="icon-xvial" aria-hidden="true" />
+            {editLink}
+          </span>
+          {dataModal}
+        </span>
+      );
+    }
+    return null;
+  }
+}
+
+RepoXvialButton.propTypes = {
+  elementId: PropTypes.number.isRequired,
+  isEditable: PropTypes.bool,
+  isLogin: PropTypes.bool,
+  allowRequest: PropTypes.bool,
+  data: PropTypes.string,
+  saveCallback: PropTypes.func
+};
+
+RepoXvialButton.defaultProps = {
+  isEditable: false,
+  isLogin: false,
+  allowRequest: false,
+  data: null,
+  saveCallback: () => {}
+};
diff --git a/app/assets/javascripts/components/common/SelectionField.js b/app/assets/javascripts/components/common/SelectionField.js
new file mode 100644
index 000000000..0637dc06a
--- /dev/null
+++ b/app/assets/javascripts/components/common/SelectionField.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  FormGroup,
+  ControlLabel,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+import Select from 'react-select';
+
+const SelectionField = (props) => {
+  const label = props.label && props.label !== '' ?
+    <ControlLabel>{props.label}</ControlLabel> : '';
+  if (props.isCreatable) {
+    return (
+      <FormGroup>
+        {label}
+        <Select.Creatable
+          name={`select-${uuid.v4()}`}
+          options={props.options}
+          placeholder={props.placeholder}
+          multi={false}
+          isClearable
+          value={props.value}
+          onChange={event => props.onChange(props.field, event)}
+          promptTextCreator={p => `Create new ${p} ${props.label}`}
+        />
+      </FormGroup>
+    );
+  }
+  return (
+    <FormGroup>
+      {label}
+      <Select
+        name={`select-${uuid.v4()}`}
+        options={props.options}
+        placeholder={props.placeholder}
+        multi={false}
+        isClearable
+        value={props.value}
+        onChange={event => props.onChange(props.field, event)}
+      />
+    </FormGroup>
+  );
+};
+
+SelectionField.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  value: PropTypes.string.isRequired,
+  field: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  isCreatable: PropTypes.bool
+};
+
+SelectionField.defaultProps = {
+  label: '',
+  placeholder: 'Please select...',
+  isCreatable: false
+};
+
+export default SelectionField;
diff --git a/app/assets/javascripts/components/fetchers/ArticleFetcher.js b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
new file mode 100644
index 000000000..4c8d151e7
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
@@ -0,0 +1,111 @@
+import 'whatwg-fetch';
+
+export default class ArticleFetcher {
+  static initial() {
+    const promise = fetch('/api/v1/public/article_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdate(params) {
+    const promise = fetch('/api/v1/articles/create_or_update/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static delete(params) {
+    const promise = fetch(`/api/v1/articles/${params.key}`, {
+      credentials: 'same-origin',
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static initialHowTo() {
+    const promise = fetch('/api/v1/public/howto_init.json', {
+      credentials: 'same-origin'
+    })
+      .then(response => response.json()).then(json => json).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static createOrUpdateHowTo(params) {
+    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static deleteHowTo(params) {
+    const promise = fetch('/api/v1/articles/delete_howto', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+
+  static updateEditorImage(file, editorType) {
+    const data = new FormData();
+    data.append('file[]', file.file, file.name);
+    data.append('editor_type', editorType);
+    const promise = fetch('/api/v1/articles/editor_image', {
+      credentials: 'same-origin',
+      method: 'POST',
+      body: data
+    })
+      .then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    return promise;
+  }
+}
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
new file mode 100644
index 000000000..56c71c556
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/PublicFetcher.js
@@ -0,0 +1,229 @@
+import 'whatwg-fetch'
+import _ from 'lodash'
+import Molecule from '../models/Molecule';
+import Reaction from '../models/Reaction';
+
+export default class PublicFetcher {
+  static fetchPublicMolecules(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        molecules: json.molecules.map(m => new Molecule(m)),
+        page: parseInt(response.headers.get('X-Page')),
+        pages: parseInt(response.headers.get('X-Total-Pages')),
+        perPage: parseInt(response.headers.get('X-Per-Page'))
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchPublicReactions(params = {}) {
+    const page = params.page || 1;
+    const perPage = params.perPage || 10;
+    const advFlag = params.advFlag || false;
+    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
+    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const schemeOnly = params.schemeOnly || false;
+    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
+
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        reactions: json.reactions.map(m => new Reaction(m)),
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
+      }))).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchAdvancedValues(advType, name) {
+    return fetch(`/api/v1/public/find_adv_valuess.json?name=${name}&adv_type=${advType}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicMolecules(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
+        page: json.publicMolecules.page,
+        totalElements: json.publicMolecules.totalElements,
+        perPage: json.publicMolecules.perPage
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static searchPublicReactions(params = {}) {
+    const {
+      collectionId,
+      elementType,
+      page,
+      perPage,
+      selection
+    } = params;
+    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        selection,
+        collection_id: collectionId || 'public',
+        page: page || 1,
+        per_page: perPage,
+        is_sync: false,
+        molecule_sort: false,
+        is_public: true
+      })
+    }).then(response => response.json())
+      .then(json => ({
+        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
+        page: json.publicReactions.page,
+        totalElements: json.publicReactions.totalElements,
+        perPage: json.publicReactions.perPage
+      })).catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublished() {
+    const api = '/api/v1/public/last_published.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchLastPublishedSample() {
+    const api = '/api/v1/public/last_published_sample.json';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchDataset(id) {
+    const api = `/api/v1/public/dataset.json?id=${id}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
+    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
+    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
+    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReaction(id) {
+    const api = `/api/v1/public/reaction.json?id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static queryPid(params) {
+    const api = `/api/v1/public/pid/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: params.id
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static queryInchikey(params) {
+    const api = `/api/v1/public/inchikey/`
+
+    return fetch(api, {
+        method: 'post',
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          inchikey: params.inchikey,
+          type: params.type,
+          version: params.version
+        })
+      })
+      .then((response) => {
+        return response.json()
+      }).then((json) => {
+        Aviator.navigate(json)
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      })
+  }
+
+  static selectPublicCollection() {
+    return fetch(
+      '/api/v1/public/collection.json',
+      { credentials: 'same-origin' }
+    ).then((response) => { return response.json(); })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static publishedStatics() {
+    const api = '/api/v1/public/published_statics';
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then((response) => {
+      return response.json();
+    })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static affiliations(type) {
+    const api = `/api/v1/public/affiliations/${type}`;
+    return fetch(api, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+}
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
new file mode 100644
index 000000000..2edfdda92
--- /dev/null
+++ b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
@@ -0,0 +1,437 @@
+import 'whatwg-fetch';
+import Sample from '../models/Sample';
+import Reaction from '../models/Reaction';
+import NotificationActions from '../actions/NotificationActions';
+
+const AnalysisIdstoPublish = element => (
+  element.analysisArray()
+    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
+    .map(x => x.id)
+);
+
+export default class RepositoryFetcher {
+  static generateEmbargoAccount(id) {
+    const api = '/api/v1/repository/embargo/account';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static releaseEmbargo(id) {
+    const api = '/api/v1/repository/embargo/release';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static deleteEmbargo(id) {
+    const api = '/api/v1/repository/embargo/delete';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+  static moveEmbargo(id, newEmbargo, element) {
+    const api = '/api/v1/repository/embargo/move';
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
+    }).then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static reviewPublish(element) {
+    const { id, type } = element;
+    return fetch('/api/v1/repository/reviewing/submit', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .then((json) => {
+        if (typeof json.reaction !== 'undefined') {
+          json.reaction.can_publish = false;
+          json.reaction.can_update = false;
+          return new Reaction(json.reaction);
+        } else if (type === 'sample') {
+          json.sample.can_publish = false;
+          json.sample.can_update = false;
+          return new Sample(json.sample);
+        }
+        return null;
+    })
+    .catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishSample(params, option = null) {
+    const { sample, coauthors, refs, embargo, license, addMe } = params;
+    const analysesIds = AnalysisIdstoPublish(sample);
+    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        sampleId: sample.id,
+        analysesIds,
+        coauthors,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish sample fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_sample_error'
+        };
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.sample.can_publish = true;
+        json.sample.can_update = true;
+      }
+      return new Sample(json.sample);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static publishReactionScheme(params) {
+    const {
+      reaction, coauthors, embargo, license, addMe, schemeDesc
+    } = params;
+    return fetch('/api/v1/repository/publishReactionScheme', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        temperature: reaction.temperature,
+        duration: reaction.durationDisplay,
+        products: reaction.products,
+        schemeDesc,
+        coauthors,
+        embargo,
+        license,
+        addMe
+      })
+    })
+      .then(response => (response.json()))
+      .then((json) => {
+        if (json.error) {
+          const notification = {
+            title: 'Publish reaction scheme fail',
+            message: `Error: ${json.error}`,
+            level: 'error',
+            dismissible: 'button',
+            autoDismiss: 6,
+            position: 'tr',
+            uid: 'publish_reaction_error'
+          };
+          NotificationActions.add(notification);
+          return null;
+        }
+        return new Reaction(json.reaction);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static publishReaction(params, option = null) {
+    const { reaction, coauthors, refs, embargo, license, isFullyPublish, addMe } = params;
+    if (!isFullyPublish) return this.publishReactionScheme(params);
+    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
+      AnalysisIdstoPublish(reaction)
+    )
+    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
+      credentials: 'same-origin',
+      method: option ? 'PUT' : 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        reactionId: reaction.id,
+        analysesIds,
+        coauthors,
+        refs,
+        embargo,
+        license,
+        addMe
+      })
+    }).then((response) => {
+      return response.json()
+    }).then((json) => {
+      if (json.error) {
+        const notification = {
+          title: 'Publish reaction fail',
+          message: `Error: ${json.error}`,
+          level: 'error',
+          dismissible: 'button',
+          autoDismiss: 6,
+          position: 'tr',
+          uid: 'publish_reaction_error'
+        };
+        NotificationActions.add(notification);
+        return null;
+      }
+      if (option=='dois') {
+        json.reaction.can_publish = true;
+        json.reaction.can_update = true;
+      }
+      return new Reaction(json.reaction);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static fetchEmbargoCollections() {
+    const api = '/api/v1/repository/embargo_list.json';
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElements(id) {
+    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
+    const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
+    const paramSearchValue = (searchValue && searchValue !== '') ? `&search_value=${searchValue}` : '';
+    const api = `/api/v1/repository/list.json?type=${type}&state=${state}${paramSearchType}${paramSearchValue}&page=${page}&per_page=${perPage}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json().then(json => ({
+        elements: json.elements,
+        page: parseInt(response.headers.get('X-Page'), 10),
+        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
+        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
+        selectType: type,
+        selectState: state,
+        searchType,
+        searchValue
+      })))
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchEmbargoElement(type, id) {
+    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchReaction(id, isPublic) {
+    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static fetchSample(id, isPublic) {
+    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
+    return fetch(api, { credentials: 'same-origin' })
+      .then(response => response.json())
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static saveComments(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comments', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static updateComment(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+  static repoReviewPublish(id, type, comment, action) {
+    let api = '';
+    if (action === 'Comments') {
+      api = '/api/v1/repository/reviewing/comments';
+    } else if (action === 'Accept') {
+      api = '/api/v1/repository/reviewing/accepted';
+    } else if (action === 'Review') {
+      api = '/api/v1/repository/reviewing/reviewed';
+    } else if (action === 'Submit') {
+      api = '/api/v1/repository/reviewing/submit';
+    } else if (action === 'Decline') {
+      api = '/api/v1/repository/reviewing/declined';
+    } else {
+      // return;
+    }
+
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id, type, comment
+      })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static fetchReviewSearchOptions(searchType, elementType, state) {
+    return fetch(`/api/v1/repository/review_search_options.json?type=${searchType}&element_type=${elementType}&state=${state}`, {
+      credentials: 'same-origin'
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  static previewMetadata(id, type) {
+    return fetch('/api/v1/repository/metadata/preview', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static userComment(id, type, pageId, pageType, comment) {
+    return fetch('/api/v1/repository/comment/user_comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, pageId, pageType, comment })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static reviewerComment(id, type, comment) {
+    return fetch('/api/v1/repository/comment/reviewer', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comment })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  static zipPreviewMetadata(id, type) {
+    const currentTime = Math.floor(Date.now() / 1000);
+    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
+    return fetch('/api/v1/repository/metadata/preview_zip', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type })
+    }).then((response) => {
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
+
+  static compound(id, data, action = 'request') {
+    const api = `/api/v1/repository/compound/${action}`;
+    return fetch(api, {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, data })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+}
diff --git a/app/assets/javascripts/components/report/SectionDoiList.js b/app/assets/javascripts/components/report/SectionDoiList.js
new file mode 100644
index 000000000..283a60f82
--- /dev/null
+++ b/app/assets/javascripts/components/report/SectionDoiList.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import ReportActions from '../actions/ReportActions';
+import ReportStore from '../stores/ReportStore';
+import { UserSerial } from '../utils/ReportHelper';
+import ReportsFetcher from '../fetchers/ReportsFetcher';
+
+
+const svgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+export default class SectionDoiList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      objs: props.objs,
+      molSerials: props.molSerials,
+      dois: []
+    };
+
+    this.initGetDoi = this.initGetDoi.bind(this);
+  }
+  componentDidMount() {
+    this.initGetDoi();
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.objs && nextProps.objs.length > 0) {
+      if (this.state.objs.length !== nextProps.objs.length) {
+        this.setState({ objs: nextProps.objs });
+        this.initGetDoi();
+      }
+    }
+    return true;
+  }
+
+  initGetDoi() {
+    ReportsFetcher.getDois(this.props.objs)
+      .then((result) => {
+        this.setState({
+          dois: result.dois
+        })
+      });
+  }
+
+  render() {
+    const { dois } = this.state;
+    let doiTbl = <span />
+    if (dois && dois.length > 0) {
+      doiTbl = dois.map((e) => {
+        let ds = <div />;
+        if (typeof (e.dois) !== 'undefined' && e.dois && e.dois.length > 0) {
+          ds = e.dois.map(d => d == null ? <div/> : (<div>{d}<br /></div>) )
+        }
+        return (
+          <tr key={e.element_id}>
+            <td style={{ width: '30%' }}>
+              <div>
+                <SVG src={svgPath(e.svg, e.element_type)} className="molecule-mid" key={e.svg} />
+              </div>
+            </td>
+            <td style={{ width: '70%' }}>{ds}</td>
+          </tr>
+        )
+      });
+    }
+    return (
+      <Table striped bordered hover>
+        <thead>
+          <tr>
+            <th width="30%">SVG</th>
+            <th width="70%">DOI</th>
+          </tr>
+        </thead>
+        <tbody>
+          { doiTbl }
+        </tbody>
+      </Table>
+    );
+  }
+}
diff --git a/app/assets/javascripts/components/stores/LoadingStore.js b/app/assets/javascripts/components/stores/LoadingStore.js
new file mode 100644
index 000000000..e812f4a03
--- /dev/null
+++ b/app/assets/javascripts/components/stores/LoadingStore.js
@@ -0,0 +1,53 @@
+import alt from '../alt';
+import LoadingActions from '../actions/LoadingActions';
+import ReportActions from '../actions/ReportActions';
+import ElementActions from '../actions/ElementActions';
+import InboxActions from '../actions/InboxActions';
+import PredictionActions from '../actions/PredictionActions';
+import RepositoryActions from '../actions/RepositoryActions';
+import PublicActions from '../actions/PublicActions';
+
+class LoadingStore {
+  constructor() {
+    this.loading = false;
+
+    this.bindListeners({
+      handleStart: LoadingActions.start,
+      handleStop:
+        [
+          LoadingActions.stop,
+          ReportActions.clone,
+          ReportActions.updateCheckedTags,
+          ReportActions.loadRreview,
+          ElementActions.createGenericEl,
+          ElementActions.updateGenericEl,
+          ElementActions.createSampleForReaction,
+          ElementActions.updateSampleForReaction,
+          ElementActions.updateSampleForWellplate,
+          ElementActions.createSample,
+          ElementActions.updateSample,
+          ElementActions.createReaction,
+          ElementActions.updateReaction,
+          ElementActions.createResearchPlan,
+          ElementActions.updateResearchPlan,
+          ElementActions.createWellplate,
+          ElementActions.updateWellplate,
+          InboxActions.fetchInbox,
+          PredictionActions.infer,
+          RepositoryActions.reviewPublish,
+          PublicActions.updateComment,
+          PublicActions.reviewPublish,
+        ],
+    });
+  }
+
+  handleStart() {
+    this.setState({ loading: true });
+  }
+
+  handleStop() {
+    this.setState({ loading: false });
+  }
+}
+
+export default alt.createStore(LoadingStore, 'LoadingStore');
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
new file mode 100644
index 000000000..ea964f64c
--- /dev/null
+++ b/app/assets/javascripts/components/stores/PublicStore.js
@@ -0,0 +1,348 @@
+import Aviator from 'aviator';
+import alt from '../alt';
+import PublicActions from '../actions/PublicActions';
+import SearchActions from '../actions/ElementActions';
+import UIActions from '../actions/UIActions';
+
+class PublicStore {
+  constructor() {
+    this.molecules = [];
+    this.reactions = [];
+    this.page = 1;
+    this.pages = 1;
+    this.perPage = 10;
+    this.selectType;
+    this.selectState;
+    this.searchType;
+    this.searchValue;
+    this.selectEmbargoId;
+    this.publishedStatics = [];
+    this.lastPublished;
+    this.lastPublishedSample;
+    this.guestPage = "";
+    this.currentElement = null;
+    this.queryId = -1;
+    this.news = {};
+    this.articles = [];
+    this.howto = {};
+    this.howtos = [];
+    this.bundles = [];
+
+    this.bindListeners({
+      handleGetMolecules: PublicActions.getMolecules,
+      handleGetReactions: PublicActions.getReactions,
+      handleSearchMolecules: PublicActions.getSearchMolecules,
+      handleSearchReactions: PublicActions.getSearchReactions,
+      handlePublishedStatics: PublicActions.publishedStatics,
+      handleLastPublished: PublicActions.lastPublished,
+      handleLastPublishedSample: PublicActions.lastPublishedSample,
+      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
+      handleDisplayDataset: PublicActions.displayDataset,
+      handleDisplayMolecule: PublicActions.displayMolecule,
+      handleDisplayReaction: PublicActions.displayReaction,
+      handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
+      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
+      handleClose: PublicActions.close,
+      handleArticles: PublicActions.articles,
+      handleEditArticle: PublicActions.editArticle,
+      handleDisplayArticle: PublicActions.displayArticle,
+      handleHowTos: PublicActions.howtos,
+      handleEditHowTo: PublicActions.editHowTo,
+      handleDisplayHowTo: PublicActions.displayHowTo,
+      handleGetElements: PublicActions.getElements,
+      handleGetEmbargoElements: PublicActions.getEmbargoElements,
+      handleDisplayReviewReaction: PublicActions.displayReviewReaction,
+      handleDisplayReviewSample: PublicActions.displayReviewSample,
+      handelReviewPublish: PublicActions.reviewPublish,
+      handelUpdateComment: PublicActions.updateComment,
+      handleFetchBundles: PublicActions.fetchEmbargoBundle,
+      handleDisplayEmbargoElement: PublicActions.displayReviewEmbargo,
+      handleEmbargoRelease: [PublicActions.releaseEmbargo, PublicActions.deleteEmbargo],
+      handleEmbargoMove: PublicActions.moveEmbargo,
+      handleRefreshPubElements: PublicActions.refreshPubElements,
+    });
+  }
+
+  handleRefreshPubElements(type) {
+    PublicActions[`get${type}`]({ page: this.page, perPage: this.perPage });
+  }
+
+  handleClose({ deleteEl }) {
+    this.setState({
+      currentElement: null
+    });
+    if (this.guestPage === 'embargo') {
+      Aviator.navigate('/embargo', { silent: true });
+    } else if (this.guestPage === 'review') {
+      Aviator.navigate('/review', { silent: true });
+    } else {
+      Aviator.navigate('/publications', { silent: true });
+    }
+  }
+
+  handleClearSearchSelection(){
+    PublicActions.getMolecules.defer();
+  }
+
+  handleGetMolecules(results) {
+    const { molecules, page, pages, perPage } = results;
+    this.setState({ molecules, page, pages, perPage });
+  }
+
+  handleGetReactions(results) {
+    const { reactions, page, pages, perPage } = results;
+    this.setState({ reactions, page, pages, perPage });
+  }
+
+  handleSearchMolecules(results) {
+    const { molecules, page, perPage, totalElements } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      molecules, page, pages, perPage
+    });
+  }
+
+  handleSearchReactions(results) {
+    const {
+      reactions, page, perPage, totalElements
+    } = results;
+    let { pages } = results;
+    if (totalElements && perPage) {
+      pages = Math.ceil(totalElements / perPage);
+    }
+    this.setState({
+      reactions, page, pages, perPage
+    });
+  }
+
+  handlePublishedStatics(publishedStatics) {
+    if (publishedStatics) {
+      this.setState({ publishedStatics });
+    }
+  }
+
+  handleLastPublished(lastPublished) {
+    if (lastPublished) {
+      this.setState({ lastPublished });
+    }
+  }
+
+  handleLastPublishedSample(lastPublishedSample){
+    if (lastPublishedSample) {
+      this.setState({ lastPublishedSample });
+    }
+  }
+
+  handleOpenRepositoryPage(page) {
+    this.setState({ guestPage: page, currentElement: null });
+  }
+
+  handleDisplayDataset(result) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'dataset',
+      queryId: result.id,
+      currentElement: result.dataset
+    });
+    Aviator.navigate(`/publications/datasets/${result.id}`,
+      { silent: true });
+  }
+
+  handleDisplayMolecule(moleculeList) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'molecule',
+      queryId: moleculeList.id,
+      currentElement: moleculeList.moleculeData
+    });
+    Aviator.navigate(`/publications/molecules/${moleculeList.id}`, { silent: true });
+  }
+
+  handleDisplayReaction(reactionList) {
+    this.setState({
+      guestPage: 'publications',
+      elementType: 'reaction',
+      queryId: reactionList.id,
+      currentElement: reactionList.reactionData
+    });
+    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
+  }
+
+  handleReceiveSearchresult(result) {
+    this.setState({ ...result.publicMolecules });
+  }
+
+  handleArticles(result) {
+    this.setState({
+      guestPage: 'newsroom',
+      articles: result.data
+    });
+  }
+
+  handleEditArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    news.article = news.article ? news.article : [];
+    this.setState({
+      guestPage: 'newseditor',
+      news,
+    });
+  }
+
+  handleDisplayArticle(result) {
+    const news = result.data;
+    news.key = result.key;
+    this.setState({
+      guestPage: 'newsreader',
+      news,
+    });
+  }
+
+  handleHowTos(result) {
+    this.setState({
+      guestPage: 'howto',
+      howtos: result.data
+    });
+  }
+
+  handleEditHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    howto.article = howto.article ? howto.article : [];
+    this.setState({
+      guestPage: 'howtoeditor',
+      howto,
+    });
+  }
+
+  handleDisplayHowTo(result) {
+    const howto = result.data;
+    howto.key = result.key;
+    this.setState({
+      guestPage: 'howtoreader',
+      howto,
+    });
+  }
+
+  handleGetElements(results) {
+    const { elements, page, perPage, pages, selectType, selectState, searchType, searchValue } = results;
+    this.setState({ elements, page, perPage, pages, selectType, selectState, searchType, searchValue });
+  }
+
+  handleGetEmbargoElements(results) {
+    const { elements, current_user, embargo_id } = results;
+    this.setState({
+      selectEmbargoId: embargo_id,
+      elements,
+      currentElement: null,
+      currentUser: current_user
+    });
+  }
+
+  handelUpdateComment(result) {
+    this.setState({ historyInfo: result.history });
+  }
+
+  handelReviewPublish(results) {
+    const his = results.history;
+
+    this.setState({
+      historyInfo: his,
+    });
+
+    PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
+  }
+
+  handleDisplayReviewReaction(result) {
+    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
+
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+
+      this.setState({
+        guestPage: 'review',
+        elementType: 'reaction',
+        queryId: result.id,
+        currentElement: result.element,
+        historyInfo: (publication && publication.review && publication.review.history) || [],
+        reviewLevel: result.element.reviewLevel,
+      });
+      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
+    }
+  }
+
+  handleDisplayReviewSample(result) {
+    const publication = (result.element && result.element.publication) || {};
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home');
+    } else {
+      this.setState({
+        guestPage: 'review',
+        elementType: 'sample',
+        queryId: result.id,
+        currentElement: result.element,
+        historyInfo: (publication && publication.review && publication.review.history) || [],
+        reviewLevel: result.element && result.element.reviewLevel,
+      });
+      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
+    }
+  }
+
+  handleFetchBundles(result) {
+    const cols = result.repository;
+    const { current_user } = result;
+    const bundles = [];
+    if (cols && cols.length > 0) {
+      cols.forEach((col) => {
+        bundles.push({ value: col.id, name: col.label, label: col.label });
+      });
+      this.setState({
+        bundles, current_user, elements: [], currentElement: null
+      });
+    } else {
+      this.setState({
+        bundles: [], current_user, elements: [], currentElement: null
+      });
+    }
+  }
+
+  handleDisplayEmbargoElement(result) {
+    const publication = (result.element && result.element.publication) || {};
+
+    if (result.element && result.element.reviewLevel === 0) {
+      Aviator.navigate('/home/');
+    } else {
+      const elementType = (result.element.sample ? 'sample' : 'reaction');
+      this.setState({
+        guestPage: 'embargo',
+        elementType,
+        queryId: result.id,
+        currentElement: result.element,
+        historyInfo: (publication && publication.review && publication.review.history) || [],
+        reviewLevel: result.element.reviewLevel
+      });
+      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
+    }
+  }
+
+  handleEmbargoRelease(result) {
+    PublicActions.fetchEmbargoBundle();
+  }
+
+  handleEmbargoMove(results) {
+    const { col_id, is_new_embargo, new_embargo, message } = results.result;
+    if (is_new_embargo === true) {
+      this.bundles.push({value: new_embargo.id, name: new_embargo.label, label: new_embargo.label });
+    }
+    alert(message);
+    PublicActions.getEmbargoElements(col_id);
+  }
+}
+
+export default alt.createStore(PublicStore, 'PublicStore')
diff --git a/app/assets/javascripts/components/users/AuthorModal.js b/app/assets/javascripts/components/users/AuthorModal.js
new file mode 100644
index 000000000..968fdaa1c
--- /dev/null
+++ b/app/assets/javascripts/components/users/AuthorModal.js
@@ -0,0 +1,625 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
+import { findIndex, filter } from 'lodash';
+import uuid from 'uuid';
+import Select from 'react-select';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import SelectionField from '../common/SelectionField';
+import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+
+const sortList = data => data.sort((a, b) => a.name.localeCompare(b.name));
+const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
+const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation</Tooltip>;
+const refreshOrcidTooltip = <Tooltip id="rmAff_tooltip">Refresh affiliations from ORCID</Tooltip>;
+const addAffTooltip = <Tooltip id="addAff_tooltip">Add new affiliation</Tooltip>;
+
+const refreshAffByOrcid = (g, onRefreshOrcidAff) => {
+  let orcidRefreshBtn = '';
+  if (g.type === 'Collaborator' && g.orcid != null) {
+    orcidRefreshBtn = (
+      <OverlayTrigger placement="right" overlay={refreshOrcidTooltip} >
+        <Button
+          bsSize="xsmall"
+          bsStyle="success"
+          onClick={() => onRefreshOrcidAff(g)}
+        >
+          <i className="fa fa-refresh" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return (
+    <span>
+      { orcidRefreshBtn }
+    </span>
+  );
+};
+
+const lineAff = (g, aff, onDeleteAff) => {
+  let removeBtn = '';
+  if (g.type === 'Collaborator' && g.orcid == null) {
+    removeBtn = (
+      <OverlayTrigger placement="right" overlay={removeAffTooltip} >
+        <Button
+          bsSize="xsmall"
+          bsStyle="danger"
+          onClick={() => onDeleteAff(aff, g)}
+        >
+          <i className="fa fa-times" aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+
+  return (
+    <tr key={uuid.v4()}>
+      <td width="30%">{aff.department}</td>
+      <td width="40%">{aff.organization}</td>
+      <td width="20%">{aff.country}</td>
+      <td width="10%">
+        { removeBtn }
+      </td>
+    </tr>
+  );
+};
+
+export default class AuthorModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      countries: [],
+      organizations: [],
+      departments: [],
+      authors: [],
+      users: [],
+      fields: {},
+      showNewUser: false
+    };
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.findUsers = this.findUsers.bind(this);
+    this.findOrcid = this.findOrcid.bind(this);
+    this.handleAddUser = this.handleAddUser.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.onAddAff = this.onAddAff.bind(this);
+    this.onDeleteAff = this.onDeleteAff.bind(this);
+    this.onRefreshOrcidAff = this.onRefreshOrcidAff.bind(this);
+  }
+
+  componentDidMount() {
+    UsersFetcher.fetchMyCollaborations()
+      .then((result) => {
+        if (result.authors && result.authors.length > 0) {
+          this.setState({ authors: sortList(result.authors) });
+        } else {
+          this.setState({
+            authors: [], users: [], fields: {}, showNewUser: false
+          });
+        }
+      });
+    PublicFetcher.affiliations('countries').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ countries: affOption });
+    });
+    PublicFetcher.affiliations('organizations').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ organizations: affOption });
+    });
+    PublicFetcher.affiliations('departments').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ departments: affOption });
+    });
+  }
+
+  onAddAff(g) {
+    const { authors, fields } = this.state;
+    const department = fields[`${g.id}@line_department`];
+    const organization = fields[`${g.id}@line_organization`];
+    const country = fields[`${g.id}@line_country`];
+    const params = {
+      id: g.id, department, organization, country
+    };
+    UsersFetcher.addCollaboratorAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          const idx = findIndex(authors, o => o.id === result.user.id);
+          authors.splice(idx, 1, result.user);
+          fields[`${g.id}@line_department`] = '';
+          fields[`${g.id}@line_organization`] = '';
+          fields[`${g.id}@line_country`] = '';
+          this.setState({ authors, fields });
+        }
+      });
+  }
+
+  onDeleteAff(a, g) {
+    const { authors } = this.state;
+    const params = { user_id: g.id, aff_id: a.id };
+    UsersFetcher.deleteCollaboratorAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          const idx = findIndex(authors, o => o.id === result.user.id);
+          authors.splice(idx, 1, result.user);
+          this.setState({ authors });
+        }
+      });
+  }
+
+  onRefreshOrcidAff(g) {
+    const params = { user_id: g.id };
+    UsersFetcher.refreshOrcidAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.message);
+        } else {
+          this.setState({
+            authors: sortList(result.authors), users: [], fields: {}, showNewUser: false
+          });
+        }
+      });
+  }
+  handleHide() {
+    this.setState({ users: [], fields: {}, showNewUser: false });
+    this.props.onHide();
+  }
+
+  // inputs of create new group
+  handleInputChange(type, ev) {
+    let { fields } = this.state;
+    switch (type) {
+      case 'firstName':
+        fields.firstName = ev.currentTarget.value;
+        break;
+      case 'lastName':
+        fields.lastName = ev.currentTarget.value;
+        break;
+      case 'orcid':
+        fields.orcid = ev.currentTarget.value;
+        break;
+      case 'country':
+        fields.country = ev && ev.value;
+        break;
+      case 'organization':
+        fields.organization = ev && ev.value;
+        break;
+      case 'department':
+        fields.department = ev && ev.value;
+        break;
+      case 'search_key':
+        fields.search_key = ev.currentTarget.value;
+        break;
+      default:
+        if (typeof fields === 'undefined') {
+          fields = {};
+        }
+        fields[type] = ev && ev.value;
+    }
+    this.setState({ fields });
+  }
+
+  findUsers() {
+    const { fields } = this.state;
+    if ((!fields.firstName || fields.firstName.trim() === '') && (!fields.lastName || fields.lastName.trim() === '')
+    && (!fields.orcid || fields.orcid.trim() === '')) {
+      alert('Please input First Name or Last Name');
+      return false;
+    }
+    UsersFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '')
+      .then((result) => {
+        if (result.users && result.users.length > 0) {
+          this.setState({
+            users: sortList(result.users),
+            showNewUser: false,
+            fields: {}
+          });
+        } else {
+          this.setState({ showNewUser: true, users: [] });
+        }
+      });
+    return true;
+  }
+
+  findOrcid() {
+    const { fields } = this.state;
+    if (!fields.orcid || fields.orcid.trim() === '') {
+      alert('Please input ORCID');
+      return false;
+    }
+
+    const orcidRegex = /^([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})$/;
+
+    const isValid = orcidRegex.test(fields.orcid.trim());
+    if (!isValid) {
+      alert('Not a valid ORCID');
+      return false;
+    }
+
+    UsersFetcher.fetchandAddCollaboratorByOrcid(fields.orcid)
+      .then((result) => {
+        if (result.error) {
+          alert(`[${fields.orcid.trim()}] \n ${result.message}`);
+          return false;
+        }
+
+        this.setState({
+          authors: sortList(result.authors), users: [], fields: {}, showNewUser: false
+        });
+      });
+    return true;
+  }
+
+  handleAddUser(u) {
+    const { authors } = this.state;
+    UsersFetcher.AddMyCollaboration({ id: u.id })
+      .then((result) => {
+        authors.push(result.user);
+        this.setState({
+          authors: sortList(authors), users: [], fields: {}, showNewUser: false
+        });
+      });
+  }
+
+  createAdd() {
+    const { fields, authors } = this.state;
+
+    const nilFields = [];
+    if (!fields.firstName || fields.firstName.trim() === '') {
+      nilFields.push('First Name');
+    }
+    if (!fields.lastName || fields.lastName.trim() === '') {
+      nilFields.push('Last Name');
+    }
+    if (!fields.country || fields.country.trim() === '') {
+      nilFields.push('Country');
+    }
+    if (!fields.organization || fields.organization.trim() === '') {
+      nilFields.push('Organization');
+    }
+    if (!fields.department || fields.department.trim() === '') {
+      nilFields.push('Department');
+    }
+    if (nilFields.length > 0) {
+      alert(`Please input ${nilFields.join()}!`);
+      return false;
+    }
+
+    UsersFetcher.createAddMyCollaboration(fields)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          authors.push(result.user);
+          this.setState({
+            authors: sortList(authors), users: [], fields: {}, showNewUser: false
+          });
+        }
+      });
+    return true;
+  }
+
+  handleDeleteCollaborator(c) {
+    const { authors } = this.state;
+    UsersFetcher.deleteCollaboration({ id: c.id })
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          this.setState({
+            authors: filter(authors, o => o.id !== c.id)
+          });
+        }
+      });
+  }
+
+  render() {
+    const { authors, users, showNewUser } = this.state;
+    const modalStyle = { overflowY: 'auto' };
+    const searchTbody = (users || []).map(g => (
+      <tbody key={`tbody_${g.id}`}>
+        <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+          <td>
+            <OverlayTrigger placement="right" overlay={addUserTooltip} >
+              <Button
+                bsSize="xsmall"
+                bsStyle="warning"
+                onClick={() => this.handleAddUser(g)}
+              >
+                <i className="fa fa-floppy-o" aria-hidden="true" />
+              </Button>
+            </OverlayTrigger>
+            &nbsp;
+          </td>
+          <td>{g.name}</td>
+          <td>{g.orcid}</td>
+          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].department : ''}</td>
+          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].organization : ''}</td>
+          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].country : ''}</td>
+        </tr>
+      </tbody>
+    ));
+    let tbody = '';
+    if (Object.keys(authors).length <= 0) {
+      tbody = '';
+    } else {
+      tbody = authors.map(g => (
+        <tbody key={`tbody_${g.id}`}>
+          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
+            <td>
+              <DeleteConfirmBtn
+                label={g.name}
+                onClickYes={() => this.handleDeleteCollaborator(g)}
+              />
+              &nbsp;
+            </td>
+            <td>{g.name}</td>
+            <td>{g.orcid} {refreshAffByOrcid(g, this.onRefreshOrcidAff)}</td>
+            <td>
+              <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                <tbody>
+                  {
+                    g.current_affiliations && g.current_affiliations.length > 0 ?
+                      g.current_affiliations.map(a =>
+                      lineAff(g, a, this.onDeleteAff, this.handleInputChange)) : null
+                  }
+                  {
+                    g.type === 'Collaborator' && g.orcid == null ?
+                      (
+                        <tr>
+                          <td width="30%">
+                            <SelectionField
+                              options={this.state.departments}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || ''}
+                              field={`${g.id}@line_department`}
+                              placeholder="e.g. Institute of Organic Chemistry"
+                              onChange={this.handleInputChange}
+                              isCreatable
+                            />
+                          </td>
+                          <td width="40%">
+                            <SelectionField
+                              options={this.state.organizations}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || ''}
+                              field={`${g.id}@line_organization`}
+                              placeholder="e.g. Karlsruhe Institute of Technology"
+                              onChange={this.handleInputChange}
+                              isCreatable
+                            />
+                          </td>
+                          <td width="20%">
+                            <SelectionField
+                              options={this.state.countries}
+                              value={(this.state.fields && this.state.fields[`${g.id}@line_country`]) || ''}
+                              field={`${g.id}@line_country`}
+                              placeholder="e.g. Germany"
+                              onChange={this.handleInputChange}
+                            />
+                          </td>
+                          <td width="10%">
+                            <OverlayTrigger placement="right" overlay={addAffTooltip} >
+                              <Button
+                                bsSize="xsmall"
+                                bsStyle="success"
+                                onClick={() => this.onAddAff(g)}
+                              >
+                                <i className="fa fa-plus" aria-hidden="true" />
+                              </Button>
+                            </OverlayTrigger>
+                          </td>
+                        </tr>
+                      ) : null
+                  }
+                </tbody>
+              </Table>
+            </td>
+          </tr>
+        </tbody>
+      ));
+    }
+
+    let newAff = '';
+    if (showNewUser === true) {
+      newAff = (
+        <Form>
+          <FormGroup controlId="formInlineCountry">
+            <InputGroup>
+              <InputGroup.Addon>Country</InputGroup.Addon>
+              <Select.Creatable
+                name={`select-${uuid.v4()}`}
+                options={this.state.countries}
+                placeholder="e.g. Germany"
+                multi={false}
+                isClearable
+                value={this.state.fields.country || ''}
+                onChange={event => this.handleInputChange('country', event)}
+                promptTextCreator={p => `Create new country; ${p} `}
+              />
+            </InputGroup>
+          </FormGroup>
+          <FormGroup controlId="formInlineOrganization">
+            <InputGroup>
+              <InputGroup.Addon>Organization</InputGroup.Addon>
+              <Select.Creatable
+                name={`select-${uuid.v4()}`}
+                options={this.state.organizations}
+                placeholder="e.g. Karlsruhe Institute of Technology"
+                multi={false}
+                isClearable
+                value={this.state.fields.organization || ''}
+                onChange={event => this.handleInputChange('organization', event)}
+                promptTextCreator={p => `Create new organization; ${p} `}
+              />
+            </InputGroup>
+          </FormGroup>
+          <FormGroup controlId="formInlineOrganization">
+            <InputGroup>
+              <InputGroup.Addon>Department</InputGroup.Addon>
+              <Select.Creatable
+                name={`select-${uuid.v4()}`}
+                options={this.state.departments}
+                placeholder="e.g. Institute of Organic Chemistry"
+                multi={false}
+                isClearable
+                value={this.state.fields.department || ''}
+                onChange={event => this.handleInputChange('department', event)}
+                promptTextCreator={p => `Create new department; ${p} `}
+              />
+            </InputGroup>
+          </FormGroup>
+          <Button bsSize="small" bsStyle="warning" onClick={() => this.createAdd()}>
+            <i className="fa fa-file" aria-hidden="true" />&nbsp;
+            Create and Save to my collaboration
+          </Button>
+        </Form>
+      );
+    }
+
+    const newUserPanel = (
+      <Panel bsStyle="success">
+        <Panel.Heading>
+          <Panel.Title>
+            Add new collaborator (by ORCID or By Name)
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body>
+          <Row>
+            <Col md={8}>
+              <FormGroup controlId="formInlineLastName">
+                <InputGroup>
+                  <InputGroup.Addon>ORCID</InputGroup.Addon>
+                  <FormControl
+                    type="text"
+                    placeholder="0000-0002-1234-5678"
+                    value={this.state.fields.orcid || ''}
+                    onChange={e => this.handleInputChange('orcid', e)}
+                  />
+                  <InputGroup.Button>
+                    <Button bsStyle="success" onClick={() => this.findOrcid()}><i className="fa fa-search" aria-hidden="true" />&nbsp;Find and save to collaboration by ORCID</Button>
+                  </InputGroup.Button>
+                </InputGroup>
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={8}>
+              <Form>
+                <FormGroup controlId="formInlineFirstName">
+                  <InputGroup>
+                    <InputGroup.Addon>First Name</InputGroup.Addon>
+                    <FormControl
+                      type="text"
+                      placeholder="eg: AK"
+                      value={this.state.fields.firstName || ''}
+                      onChange={e => this.handleInputChange('firstName', e)}
+                    />
+                    <InputGroup.Addon>Last Name</InputGroup.Addon>
+                    <FormControl
+                      type="text"
+                      placeholder="J. Moriarty"
+                      value={this.state.fields.lastName || ''}
+                      onChange={e => this.handleInputChange('lastName', e)}
+                    />
+                    <InputGroup.Button>
+                      <Button bsStyle="success" onClick={() => this.findUsers()}>
+                        <i className="fa fa-search" aria-hidden="true" />&nbsp;
+                        Find by Name
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+              </Form>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={8}>
+              {newAff}
+            </Col>
+          </Row>
+        </Panel.Body>
+      </Panel>
+    );
+
+    return (
+      <Modal
+        show={this.props.show}
+        dialogClassName="importChemDrawModal"
+        onHide={this.handleHide}
+        backdrop="static"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>My Collaboration</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={modalStyle}>
+          <div>
+            { newUserPanel }
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Search Result
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="10%">Action</th>
+                      <th width="10%">Name</th>
+                      <th width="10%">ORCID</th>
+                      <th width="20%">Department</th>
+                      <th width="25%">Organization</th>
+                      <th width="15%">Country</th>
+                    </tr>
+                  </thead>
+                  { searchTbody }
+                </Table>
+              </Panel.Body>
+            </Panel>
+            <Panel bsStyle="info">
+              <Panel.Heading>
+                <Panel.Title>
+                  My Collaboration
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <Table responsive condensed hover>
+                  <thead>
+                    <tr style={{ backgroundColor: '#ddd' }}>
+                      <th width="5%">Action</th>
+                      <th width="10%">Name</th>
+                      <th width="15%">ORCID</th>
+                      <th width="70%">
+                        <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                          <tbody>
+                            <tr>
+                              <td style={{ padding: 'unset' }} width="30%">Department</td>
+                              <td style={{ padding: 'unset' }} width="40%">Organization</td>
+                              <td style={{ padding: 'unset' }} width="20%">Country</td>
+                              <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
+                            </tr>
+                          </tbody>
+                        </Table>
+                      </th>
+                    </tr>
+                  </thead>
+                  { tbody }
+                </Table>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+AuthorModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
new file mode 100644
index 000000000..759167573
--- /dev/null
+++ b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
@@ -0,0 +1,52 @@
+import { isNmrPass, isDatasetPass } from '../../libHome/RepoCommon';
+
+const applyPublish = (el) => {
+  const ext = [];
+  el.analysisArray().forEach((ana) => {
+    const a = ana;
+    if (ana.extended_metadata &&
+      (((ana.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
+        ((ana.extended_metadata.status || '') === 'Confirmed') && // && // fail if status is not set to Confirmed
+        (isNmrPass(ana, el)) && // fail if NMR check fail
+        (isDatasetPass(ana))
+      )) {
+      if (typeof ana.extended_metadata.publish === 'undefined') {
+        a.extended_metadata.publish = true;
+      }
+    }
+    ext.push(a);
+  });
+  return ext;
+};
+
+const defaultAnalysisPublish = (el) => {
+  const element = el;
+  switch (el.type) {
+    case 'sample': {
+      const ext = applyPublish(element);
+      if (ext.length > 0) {
+        const analyses = element.container.children.find(c => (c && c.container_type === 'analyses'));
+        analyses.children = ext;
+      }
+      break;
+    }
+    case 'reaction': {
+      // reset analysis.publish of products
+      if (typeof el.products !== 'undefined' && el.products.length > 0) {
+        element.products.forEach((p) => {
+          const prodAna = applyPublish(p);
+          if (prodAna.length > 0) {
+            const analyses = p.container.children.find(c => (c && c.container_type === 'analyses'));
+            analyses.children = prodAna;
+          }
+        });
+      }
+      break;
+    }
+    default:
+      break;
+  }
+  return element;
+};
+
+export default defaultAnalysisPublish;
diff --git a/app/assets/javascripts/components/utils/helpDescs.js b/app/assets/javascripts/components/utils/helpDescs.js
new file mode 100644
index 000000000..9b0dbddaa
--- /dev/null
+++ b/app/assets/javascripts/components/utils/helpDescs.js
@@ -0,0 +1,91 @@
+import React from 'react';
+
+const REQUIRED_TIP = (
+  <span>This field is required for publication</span>
+);
+
+const CONTRIBUTOR_TIP = (
+  <span>
+    Contributions to the database can be made by anyone. The contributor should give an information
+    on the original publication if the reaction was retrieved or extracted from a foreign work.
+  </span>
+);
+
+const SCHEME_TIP = (
+  <ul className="tooltip_list">
+    <li>
+      Add the correct chemical name of the used or obtained compounds if the name is not
+      generated automatically
+    </li>
+    <li>
+      If you use a reagent in solution, add this information to the sample: click on
+      the name of the reagent -&gt; add information (solvent, molarity etc.) in the panel for
+      the sample -&gt; save changes
+    </li>
+    <li>
+      In the same way you can also add information on the density of used reagents or the obtained
+      melting point/boiling point of your products
+    </li>
+  </ul>
+);
+
+const DESCRIPTION_TIP = (
+  <span className="tooltip_list_paragraph">
+    <ul>
+      <li>
+        Add here a complete description for the given reaction in a clear and structured
+        way with all relevant information that helps other scientists to reproduce the experiment
+      </li>
+      <li>
+        Define all details as well as possible, e.g. avoid expressions such as
+        &quot;room temperature&quot; or &quot;over night/over the weekend&quot; rather
+        give the correct temperature and time
+      </li>
+      <li>
+        The description should contain the full names and amount of all chemicals that
+        were used or obtained, please don&apos;t give general descriptions
+      </li>
+      <li>
+        Check the consistency of the given amounts and values with the reaction table again
+      </li>
+      <li>
+        The description field contains information on the reaction itself including the workup but
+        without the measures to purify the compounds by chromatography or other methods.
+        as such information should be placed in &quot;additional information for publication and
+        purification details&quot;
+      </li>
+      <li>
+        If you describe a reaction that refers to two steps (e.g. intermediate was not purified and
+        used directly for the next step) then add information on the obtained intermediate
+        (chemical name, if possible obtained amount of the crude product)
+      </li>
+    </ul>
+    <p>
+       Hint: the information on the name and amount of the chemicals can be added to a defined
+       position in the text by click on the blue button labelled with &quot;A,B, ... P1, P2&quot;
+    </p>
+  </span>
+);
+
+const ADDITIONAL_INFO_TIP = (
+  <ul className="tooltip_list">
+    <li>
+      Add here the information on the purification of your crude product(s) including the
+      information on the obtained product(s) (name, amount, yield, color, physical condition)
+    </li>
+    <li>Add the type of purification and all necessary details to reproduce the process</li>
+    <li>
+      The Rf-value of the product(s) can be entered on the &quot;properties&quot; page
+    </li>
+  </ul>
+);
+
+const helpDescs = Object.freeze({
+  requiredField: REQUIRED_TIP,
+  contributor: CONTRIBUTOR_TIP,
+  description: DESCRIPTION_TIP,
+  scheme: SCHEME_TIP,
+  additionalInformation: ADDITIONAL_INFO_TIP
+});
+
+export default helpDescs;
diff --git a/app/assets/javascripts/libHome/ContainerComponent.js b/app/assets/javascripts/libHome/ContainerComponent.js
new file mode 100644
index 000000000..0c19871fd
--- /dev/null
+++ b/app/assets/javascripts/libHome/ContainerComponent.js
@@ -0,0 +1,98 @@
+import React, {Component} from 'react';
+import {Col, FormControl,FormGroup, ControlLabel} from 'react-bootstrap';
+import Select from 'react-select'
+import ContainerDatasets from '../components/ContainerDatasets';
+import QuillViewer from '../components/QuillViewer'
+
+import {sampleAnalysesContentSymbol} from '../components/utils/quillToolbarSymbol'
+import {confirmOptions} from '../components/staticDropdownOptions/options';
+
+export default class ContainerComponent extends Component {
+  constructor(props) {
+    super();
+    const {container} = props;
+    this.state = {
+      container
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    });
+  }
+
+
+
+  render() {
+    const {container} = this.state;
+
+    let quill = (
+        <QuillViewer value={container.extended_metadata['content']} />
+      )
+
+
+    return (
+      <div className="small-p">
+        {/* <Col md={4}>
+          <label>Name</label>
+          <FormControl
+            type="text"
+            label="Name"
+            value={container.name || '***'}
+            disabled/>
+        </Col>
+        <Col md={4}>
+          <div style={{marginBottom: 11}}>
+            <label>Type</label>
+            <Select
+              name='kind'
+              multi={false}
+              options={kindOptions}
+              value={container.extended_metadata['kind']}
+              disabled
+
+              />
+          </div>
+        </Col>
+        <Col md={4}>
+          <div style={{marginBottom: 11}}>
+            <label>Status</label>
+            <Select
+              name='status'
+              multi={false}
+              options={confirmOptions}
+              value={container.extended_metadata['status']}
+              disabled
+
+            />
+          </div>
+        </Col> */}
+        {/* <Col md={12}>
+        <FormGroup>
+          <ControlLabel>Content</ControlLabel>
+          {quill}
+        </FormGroup>
+          <FormGroup>
+            <ControlLabel>Description</ControlLabel>
+            <FormControl
+              componentClass="textarea"
+              label="Description"
+              value={container.description || ''}
+              disabled
+              />
+          </FormGroup>
+        </Col> */}
+        <Col md={12}>
+          <label>Datasets</label>
+          <ContainerDatasets
+            container={container}
+            readOnly
+            disabled
+            onChange={container => this.props.onChange(container)}
+            />
+        </Col>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/NavFooter.js b/app/assets/javascripts/libHome/NavFooter.js
new file mode 100644
index 000000000..a1e4c8073
--- /dev/null
+++ b/app/assets/javascripts/libHome/NavFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Nav, NavItem } from 'react-bootstrap';
+import PublicActions from '../components/actions/PublicActions';
+
+const NavFooter = () => {
+  return (
+    <Nav justified>
+      <NavItem eventKey="21" role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')}>
+        Home
+      </NavItem>
+      <NavItem eventKey="22" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/publications')}>
+        Publications
+      </NavItem>
+      <NavItem eventKey="23" title="Item" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/about')} >
+        About
+      </NavItem>
+      <NavItem eventKey="24" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/directive')} >
+        Terms of service
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default NavFooter;
diff --git a/app/assets/javascripts/libHome/Navigation.js b/app/assets/javascripts/libHome/Navigation.js
new file mode 100644
index 000000000..09fbcc1bf
--- /dev/null
+++ b/app/assets/javascripts/libHome/Navigation.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Nav, Navbar, NavItem, Label } from 'react-bootstrap';
+import UserAuth from '../components/UserAuth';
+import ManagingActions from '../components/managing_actions/ManagingActions';
+import ContextActions from '../components/contextActions/ContextActions';
+import UserStore from '../components/stores/UserStore';
+import UIStore from '../components/stores/UIStore';
+import UserActions from '../components/actions/UserActions';
+import UIActions from '../components/actions/UIActions';
+import ElementActions from '../components/actions/ElementActions';
+import NavNewSession from './NavNewSession';
+import NavHead from './NavHead';
+import DocumentHelper from '../components/utils/DocumentHelper';
+import NavigationModal from '../components/NavigationModal';
+import PublicActions from '../components/actions/PublicActions';
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null,
+      modalProps: {
+        show: false,
+        title: '',
+        component: '',
+        action: null,
+        listSharedCollections: false,
+      }
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onUIChange = this.onUIChange.bind(this);
+    // this.toggleCollectionTree = this.toggleCollectionTree.bind(this)
+  }
+
+  componentDidMount() {
+    UIStore.listen(this.onUIChange);
+    UserStore.listen(this.onChange);
+    UserActions.fetchCurrentUser();
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIChange);
+    UserStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    const newId = state.currentUser ? state.currentUser.id : null;
+    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
+    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
+  }
+
+  onUIChange(state) {
+    this.setState({
+      modalProps: state.modalParams,
+    });
+  }
+
+  // toggleCollectionTree() {
+  //   this.props.toggleCollectionTree();
+  // }
+
+  token() { return DocumentHelper.getMetaContent("csrf-token") }
+
+  updateModalProps(modalProps) { this.setState({ modalProps }); }
+
+  navHeader() {
+    return (
+      <Navbar.Header className="collec-tree">
+        <Navbar.Text style={{cursor: "pointer"}}>
+          {/* <i  className="fa fa-list" style={{fontStyle: "normal"}}
+              onClick={this.toggleCollectionTree} /> */}
+        </Navbar.Text>
+        <Navbar.Text />
+        <NavHead />
+      </Navbar.Header>
+    )
+  }
+
+  render() {
+    const { modalProps, currentUser } = this.state;
+
+    let userBar = (<span />);
+    if (currentUser) {
+      userBar = (<UserAuth />);
+    } else {
+      userBar = (<NavNewSession authenticityToken={this.token()} />);
+    }
+    // const logo = <img height={50} alt="Chemotion-Repository" src="/images/repo/chemotion_full.svg"/>
+    return (
+      <Navbar fluid className="navbar-custom">
+        <Navbar.Header>
+          <Navbar.Brand>
+            <a role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')} >
+              Chemotion-Repository</a>
+          </Navbar.Brand>
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          {userBar}
+          <Nav>
+            {currentUser ?
+              <NavItem eventKey={1} href="/mydb" className="white-nav-item">
+                My DB
+              </NavItem>
+              : null }
+            <NavItem eventKey={2} onClick={() => Aviator.navigate('/home/publications')} className="white-nav-item" >
+              Publications
+            </NavItem>
+            { currentUser ?
+              <NavItem eventKey={3} onClick={() => Aviator.navigate('/home/review')} className="white-nav-item" >
+                Review
+              </NavItem> : null
+            }
+            {currentUser ?
+              <NavItem eventKey={6} onClick={() => Aviator.navigate('/home/embargo')} className="white-nav-item" >
+                Embargoed Publications
+              </NavItem> : null
+            }
+            {
+              true ?
+                <NavItem eventKey={4} onClick={() => Aviator.navigate('/home/newsroom')} className="white-nav-item">
+                  Newsroom&nbsp;<i className="fa fa-bullhorn" aria-hidden="true" />
+                </NavItem> : null
+            }
+            {
+              true ?
+                <NavItem eventKey={5} onClick={() => Aviator.navigate('/home/howto')} className="white-nav-item">
+                  How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
+                </NavItem> : null
+            }
+          </Nav>
+        </Navbar.Collapse>
+      </Navbar>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoAbout.js b/app/assets/javascripts/libHome/RepoAbout.js
new file mode 100644
index 000000000..056e1a8b3
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoAbout.js
@@ -0,0 +1,164 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+
+const RepoAbout = () => {
+  const bodyStyle = {
+    maxHeight: 'calc(100vh - 262px)',
+    overflowY: 'auto',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '6px',
+    padding: '30px',
+    textAlign: 'center'
+  };
+
+  return (
+    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+      <Col md={3} />
+      <Col md={6}>
+        <Panel style={{ border: 'none' }}>
+          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
+            <CardIcons />
+          </Panel.Heading>
+          <Panel.Body style={bodyStyle}>
+            <CardAbout />
+          </Panel.Body>
+        </Panel>
+      </Col>
+      <Col md={3} />
+    </Row>
+  );
+};
+
+const CardIcons = () =>
+  (
+    <div className="card-icons">
+      <Col md={4}>
+        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/chemotion_full.svg" alt="" />
+      </Col>
+      <Col md={4}>
+        <img src="/images/repo/dfg_logo.png" alt="" />
+      </Col>
+    </div>
+  );
+
+const CardAbout = () =>
+  (
+    <div>
+      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
+      <br />
+      <h1>Brief project description</h1>
+      <div style={{ textAlign: 'justify' }}>
+        <p>This project aims for the development of a freely available
+          infrastructure for research data management through the development
+          of two independent IT systems namely an electronic laboratory notebook
+          (ELN) and a chemistry web repository. With the tools that will be
+          established by our project group it will be possible to integrate
+          modern web-techniques into the routine work of academic researchers,
+           thereby increasing the amount of available data and improving the
+           quality of the information obtained and published.
+        </p>
+        <p>The aim of this project is to make a substantial contribution to
+          securing research results in a cost-effective and simple manner,
+          and to optimally network in particular chemists (initially with each
+            other and in a second step with other disciplines). The new model
+             provides a combination of recording and documentation as well as
+             publication and storage of data sets.
+        </p>
+        <p>The necessary IT structures for modern documentation of
+          research data are developed within the scope of this project,
+          will be summarized in an electronic laboratory notebook (ELN) and will
+           be provided and distributed as OPEN SOURCE. The ELN will be completed
+           by the establishment and hosting of the web-repository, for which a
+           direct connection to the ELN enables a fast and easy transfer of
+           selected research information.
+        </p>
+        <p>Free access and free use by academic researchers is
+          one principle of this project allowing and promoting collaborative
+          work and scientific exchange among scientists.
+        </p>
+      </div>
+      <br />
+      <h3>Imprint</h3>
+      <h4>Karlsruhe Institute of Technology</h4>
+      <h4>Leader of the research group</h4>
+      <p>Prof. Stefan Bräse </p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
+      <p>76131 Karlsruhe </p>
+      <p>Germany</p>
+      <br />
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
+      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
+      <p>76344 Eggenstein-Leopoldshafen</p>
+      <p>Phone: +49 721 608 42903</p>
+      <p>Fax: +49 721 608 48581</p>
+      <br />
+      <p />
+      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
+      <br />
+      <h4>Office Campus North (KIT)</h4>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <p>Institute of Organic Chemistry</p>
+      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
+      <p>Hermann-von-Helmholtz-Platz 1</p>
+      <p>76344 Eggenstein-Leopoldshafen </p>
+      <p>Germany</p>
+      <p>Phone: +49 721 608 24697 </p>
+      <br />
+      <h4>Authors</h4>
+      <p>Prof. Stefan Braese</p>
+      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
+      <br />
+      <h3>Copyright Notices</h3>
+      <div style={{ textAlign: 'justify' }}>
+        <p>
+          During the submission process, the submitter of a publication can choose,
+          between several CC licenses, which license to apply to the submitted work.
+          As the result, the content of this repository database
+          (including the submitted publication files) can be partly licensed under:
+        </p>
+        <ul>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">
+              <img src="/images/creative_common/cc-by-sa.svg" alt="cc-by-sa-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Attribution-ShareAlike 4.0 International License (default),
+          </li>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
+              <img src="/images/creative_common/cc-by.svg" alt="cc-by-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Attribution 4.0 International License, and
+          </li>
+          <li>
+            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
+              <img src="/images/creative_common/cc-zero.svg" alt="cc-zero" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
+            </a> Creative Commons Universal License
+          </li>
+        </ul>
+        <p>
+          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
+          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
+        </p>
+        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
+        <br />
+      </div>
+
+      <h3>Content</h3>
+      <div style={{ textAlign: 'justify' }} >
+        <p>
+          All texts, pictures and other information published here are subject to
+          copyright. The logo may not be used without the prior consent
+          of the working group.
+          A change of the logo is not permitted. The contents of our website are
+          created with the utmost care. Nevertheless, no guarantee for topicality
+          and completeness can be taken over. The Compound Platform does not
+          assume any responsibility for any web content connected by a link,
+          as this is not its own content.
+        </p>
+      </div>
+    </div>
+  );
+
+export default RepoAbout;
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
new file mode 100644
index 000000000..42f7a1e7b
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -0,0 +1,2311 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { replace } from 'lodash';
+import {
+  Button,
+  Checkbox,
+  Col,
+  ControlLabel,
+  Form,
+  FormControl,
+  FormGroup,
+  Grid,
+  InputGroup,
+  Label,
+  OverlayTrigger,
+  Panel,
+  Row,
+  Table,
+  Tooltip
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import Clipboard from 'clipboard';
+import moment from 'moment';
+import Select from 'react-select';
+import uuid from 'uuid';
+import SvgFileZoomPan from 'react-svg-file-zoom-pan';
+import ContainerComponent from './ContainerComponent';
+import Formula from '../components/common/Formula';
+import HelpInfo from '../components/common/HelpInfo';
+import PubchemLabels from '../components/PubchemLabels';
+import QuillViewer from '../components/QuillViewer';
+import { ChemotionTag } from '../components/PublishCommon';
+import Sample from '../components/models/Sample';
+import Reaction from '../components/models/Reaction';
+import PrintCodeButton from '../components/common/PrintCodeButton';
+import { stopBubble } from '../components/utils/DomHelper';
+import RepoContainerDatasets from './RepoContainerDatasets';
+import ImageModal from '../components/common/ImageModal';
+import Utils from '../components/utils/Functions';
+import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from '../components/utils/ElementUtils';
+import { contentToText } from '../components/utils/quillFormat';
+import { chmoConversions } from '../components/OlsComponent';
+import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
+import InputButtonField from '../components/common/InputButtonField';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import PublicActions from '../components/actions/PublicActions';
+import RepoCommentBtn from '../components/common/RepoCommentBtn';
+import RepoUserComment from '../components/common/RepoUserComment';
+import RepoPublicComment from '../components/common/RepoPublicComment';
+import { previewContainerImage } from '../components/utils/imageHelper';
+import RepoXvialButton from '../components/common/RepoXvialButton';
+import RepoPreviewImage from '../components/common/RepoPreviewImage';
+
+const resizableSvg = path => (
+  <div className="preview-table" style={{ cursor: 'row-resize' }}><SvgFileZoomPan svgPath={path} duration={300} resize /></div>
+);
+
+const ChemotionId = props => (
+  <h5>
+    <b>ID: </b>
+    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
+      {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
+    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
+  </h5>
+);
+ChemotionId.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
+};
+
+const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
+
+
+const AuthorTitle = (authorIds) => {
+  if (authorIds && authorIds.length > 1) {
+    return 'Authors:';
+  }
+  if (authorIds && authorIds.length === 1) {
+    return 'Author:';
+  }
+  return '';
+}
+
+const NewsroomTemplate = {
+  title: '', content: {}, article: []
+};
+
+const HomeFeature = (props) => {
+  return (
+    <div className="feature-block">
+      <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
+      <p>
+        {props.intro}
+      </p>
+    </div>
+  );
+};
+
+HomeFeature.propTypes = {
+  fa: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  intro: PropTypes.string.isRequired
+};
+
+const LicenseLegalCode = (cp) => {
+  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+  switch (cp) {
+    case 'CC BY-SA':
+      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
+      break;
+    case 'CC BY':
+      presentLicense = 'Creative Commons Attribution 4.0 International License';
+      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
+      break;
+    case 'CC0':
+      presentLicense = 'CC0 1.0 Universal';
+      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
+      break;
+    case 'No License':
+      presentLicense = 'No License';
+      presentHref = '';
+      break;
+    default:
+      break;
+  }
+  return <span><b>{presentLicense}</b>&nbsp;{presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a>}</span>;
+};
+
+const nmrMsg = (sample, container) => {
+  if (sample.molecule && container.extended_metadata &&
+    (typeof container.extended_metadata.kind === 'undefined' ||
+      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
+    )) {
+    return '';
+  }
+  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
+
+  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
+  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
+    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
+  }
+  return '';
+};
+
+// the requirements for file types as given
+const isFileTypePass = (analysisType, attachments) => {
+  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
+  const nmrType = ['jcamp', 'dx', 'jdx'];
+  let files = [];
+  switch (analysisType) {
+    case '1H NMR':
+    case chmoConversions.nmr_1h.termId:
+    case '13C NMR':
+    case chmoConversions.nmr_13c.termId:
+    case '15N NMR':
+    case 'NMR':
+    case 'IR':
+    case chmoConversions.ir.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    case 'EA':
+    case chmoConversions.ea.termId:
+    case 'X-Ray':
+    case 'Crystall-Structure':
+    case chmoConversions.crystal_structure.termId:
+      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
+      if (files.length < 1) return false;
+      break;
+    default:
+      break;
+  }
+  return true;
+};
+
+// at least one dataset has to be attached
+// in dataset: instrument has to be given
+const isDatasetPass = (analysis) => {
+  const dataset = analysis.children;
+  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
+  if (attachments.length < 1) return false;
+  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
+  if (instruments.length < 1) return false;
+  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
+  if (files.length < 1) return false;
+  return true;
+};
+
+const isNmrPass = (analysis, sample) => {
+  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
+  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
+  }
+  return true;
+};
+
+const DownloadMetadataBtn = (l) => {
+  const contentUrl = `/api/v1/public/metadata/download?type=${l.type}&id=${l.id}`;
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        onClick={() => Utils.downloadFile({
+          contents: contentUrl
+        })}
+      >
+        <i className="fa fa-file-code-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const DownloadDOICsv = (e, a) => {
+  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
+  const dois = [];
+  dois.push(['Reserved DOIs', '']);
+  dois.push(['', '']);
+
+  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
+  a.forEach((an) => {
+    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+  });
+
+  if (e.type === 'reaction') {
+    // product(sample)
+    if (e.products !== null && e.products.length > 0) {
+      e.products.forEach((p) => {
+        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
+        p.analysisArray().forEach((an) => {
+          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
+        });
+      });
+    }
+  }
+  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
+};
+
+class EmbargoCom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false
+    };
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  handleEmbargoChange(e) {
+    this.props.onEmbargoChange(e.value);
+  }
+
+  handleLicenseChange(e) {
+    this.props.onLicenseChange(e.value);
+  }
+
+  handleCC0ConsentChange(e, type) {
+    this.props.onCC0ConsentChange(e.target.checked, type);
+  }
+
+  render() {
+    const defaultBundles = [
+      { value: '-1', name: 'no', label: 'No embargo' },
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+    const licenses = [
+      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
+      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
+      { name: 'CC0', value: 'CC0', label: 'CC0' },
+      { name: 'No License', value: 'No License', label: 'No License' }
+    ];
+
+    const bundles = defaultBundles.concat(this.props.opts);
+    const description = [
+      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
+      'Please use one bundle for data that belongs to the same publication.',
+      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
+    ].join(' ');
+    const { isShow } = this.state;
+    const embargoDesc = isShow ? (
+      <div style={{
+        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
+      }}
+      >
+        <b>Embargo Bundle</b>&#58;&nbsp;{description}
+      </div>
+    ) : (null);
+
+    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
+    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
+    const deed = (
+      <div style={{
+        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
+      }}
+      >
+        {LicenseLegalCode(this.props.selectedLicense)}
+        {
+        this.props.selectedLicense === 'CC0' ?
+          (
+            <div stye={{ width: '100%' }}>
+              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
+                {cc0Consent1}
+              </Checkbox>
+              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
+                {cc0Consent2}
+              </Checkbox>
+            </div>
+          )
+          :
+          (null)
+      }
+      </div>
+    );
+
+    return (
+      <div>
+        <Form horizontal style={{ display: 'flex' }}>
+          <div style={{ width: '20%', textAlign: 'right' }}>
+            <ControlLabel>Choose license&nbsp;</ControlLabel>
+          </div>
+          <div style={{ width: '20%' }}>
+            <Select
+              value={this.props.selectedLicense}
+              onChange={e => this.handleLicenseChange(e)}
+              options={licenses}
+              className="select-assign-collection"
+            />
+          </div>
+          <div style={{ width: '40%', textAlign: 'right' }}>
+            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
+            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
+              <i className="fa fa-question-circle" aria-hidden="true" />
+            </div>&nbsp;
+          </div>
+          <div style={{ width: '40%' }}>
+            <Select
+              value={this.props.selectedValue}
+              onChange={e => this.handleEmbargoChange(e)}
+              options={bundles}
+              className="select-assign-collection"
+            />
+          </div>
+        </Form>
+        {embargoDesc}
+        {deed}
+      </div >
+    );
+  }
+}
+
+EmbargoCom.propTypes = {
+  opts: PropTypes.array,
+  selectedValue: PropTypes.string.isRequired,
+  onEmbargoChange: PropTypes.func.isRequired,
+  selectedLicense: PropTypes.string,
+  onLicenseChange: PropTypes.func.isRequired,
+  onCC0ConsentChange: PropTypes.func.isRequired,
+  cc0Deed: PropTypes.shape({
+    consent1: PropTypes.bool.isRequired,
+    consent2: PropTypes.bool.isRequired
+  })
+};
+
+EmbargoCom.defaultProps = {
+  opts: [],
+  selectedLicense: 'CC BY-SA',
+  cc0Deed: { consent1: false, consent2: false }
+};
+
+const PublishTypeAs = (props) => {
+  return (
+    <div style={{ display: 'inline' }}>
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
+        <i className="fa fa-question-circle" aria-hidden="true" />
+      </OverlayTrigger>&nbsp;
+      <DropdownButtonSelection
+        options={props.options}
+        selected={props.selected}
+        placeholder="Select publication type..."
+        onSelect={e => props.onChange(e)}
+      />
+    </div>
+  );
+};
+
+PublishTypeAs.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string),
+  selected: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+PublishTypeAs.defaultProps = {
+  options: [],
+  selected: 'full',
+};
+
+
+const ElStateLabel = (state) => {
+  let stateStyle;
+  switch (state) {
+    case 'reviewed':
+      stateStyle = 'info';
+      break;
+    case 'pending':
+      stateStyle = 'warning';
+      break;
+    case 'accepted':
+      stateStyle = 'success';
+      break;
+    default:
+      stateStyle = 'default';
+  }
+  return <Label bsStyle={stateStyle}>{state}</Label>;
+};
+
+
+const MoveEmbargoedBundle = (element, onMoveClick) => {
+  return (
+    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
+      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
+    </OverlayTrigger>
+  );
+};
+
+const ElSubmitTime = (submitAt) => {
+  const time = new Date(submitAt);
+  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
+};
+
+const SvgPath = (svg, type) => {
+  if (svg && svg !== '***') {
+    if (type === 'Reaction') {
+      return `/images/reactions/${svg}`;
+    }
+    return `/images/samples/${svg}`;
+  }
+  return 'images/wild_card/no_image_180.svg';
+};
+
+const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) => {
+  if (!e) {
+    return '';
+  }
+  let listClass;
+  if (e.type === 'Reaction') {
+    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  } else {
+    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  }
+  const schemeOnly = (e && e.scheme_only === true) || false;
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => onClick(e.type.toLowerCase(), e.id)}
+    >
+      <td style={{ position: 'relative' }} >
+        <span className="review_element_label">
+          <i className={`icon-${e.type.toLowerCase()}`} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
+        &nbsp;{user !== null && user.type === 'Anonymous' ? '' : MoveEmbargoedBundle(e, onMoveClick)}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const SampleExactMW = (em) => {
+  if (em) {
+    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
+  }
+  return '';
+};
+
+const DateFormatYMDLong = (params) => {
+  const dateTime = new Date(params);
+  const options = {
+    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
+  };
+  return dateTime.toLocaleDateString('en-GB', options);
+};
+
+const DateFormatDMYTime = (dt) => {
+  if (dt == null || typeof dt === 'undefined') return '';
+  try {
+    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
+    if (m.isValid()) {
+      return dt;
+    }
+    const dtJSON = new Date(dt).toJSON();
+    const dtISO = new Date(Date.parse(dt)).toISOString();
+    if (dtISO === dtJSON) {
+      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
+    }
+    return '';
+  } catch (e) {
+    return '';
+  }
+};
+
+const EditorTips = () => {
+  return (
+    <ol>
+      {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
+      <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
+      <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
+      <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
+    </ol>
+  );
+};
+
+const BackSoonPage = () => {
+  return (
+    <div>
+      <h1>We&rsquo;ll be back soon!</h1>
+      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
+      <h3>
+        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
+      </h3>
+      <h3>
+        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
+      </h3>
+      <h4>&mdash; ComPlat Team</h4>
+    </div>
+  );
+};
+
+const ShowIndicator = (show) => {
+  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+};
+
+const labelStyle = {
+  display: 'inline-block',
+  marginLeft: '2px',
+  marginRight: '2px'
+};
+
+const IconLicense = (cp, hasCoAuthors = false) => {
+  const presentStyle = { height: '26px' };
+  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+  let presentPath = '/images/creative_common/cc-by-sa.svg';
+  const cc0Alt = [
+    'To the extent possible under law, the',
+    (hasCoAuthors ? 'persons' : 'person'),
+    'who associated CC0 with this work',
+    (hasCoAuthors ? 'have' : 'has'),
+    'waived all copyright and related or neighboring rights to this work.'
+  ].join(' ');
+
+  switch (cp) {
+    case 'CC BY-SA':
+      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by-sa.svg';
+      break;
+    case 'CC BY':
+      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
+      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
+      presentPath = '/images/creative_common/cc-by.svg';
+      break;
+    case 'CC0':
+      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
+      presentAlt = cc0Alt;
+      presentPath = '/images/creative_common/cc-zero.svg';
+      break;
+    case 'No License':
+      presentHref = '';
+      presentAlt = 'No License';
+      presentPath = '';
+      break;
+    default:
+      break;
+  }
+  return presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
+};
+
+const IconToMyDB = ({
+  id, type, tooltipTitle = 'Link to My DB', isLogin = false
+}) => {
+  if (isLogin) {
+    return (
+      <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">{tooltipTitle}</Tooltip>}>
+        <Button className="animation-ring" bsStyle="link" href={`/mydb/collection/all/${type}/${id}`} target="_blank">
+          <i className={`icon-${type}`} />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return (<span className="wrap-ring"><i className={`icon-${type}`} /></span>);
+};
+
+IconToMyDB.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  tooltipTitle: PropTypes.string,
+  isLogin: PropTypes.bool,
+};
+
+IconToMyDB.defaultProps = {
+  tooltipTitle: 'Link to My DB',
+  isLogin: false
+};
+
+const SidToPubChem = ({ sid }) => {
+  let labelStyle = {
+    // display: 'inline-block',
+    marginLeft: '2px',
+    marginRight: '2px',
+    //position: 'absolute',
+  };
+  if (!sid || isNaN(sid)) {
+    labelStyle.WebkitFilter = "grayscale(100%)"
+  }
+  const handleOnClick = (e) => {
+    if (sid && !isNaN(sid)){
+      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
+    }
+    e.stopPropagation()
+  }
+
+  if (sid && !isNaN(sid)){
+    return (
+      <span style={labelStyle} onClick={handleOnClick}>
+        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
+      </span>
+    )
+    }else {
+      return <span />
+  }
+}
+
+SidToPubChem.propTypes = {
+  sid: PropTypes.string
+}
+
+
+const OrcidIcon = ({ orcid }) => {
+  if (typeof orcid === 'undefined' || orcid === null) {
+    return (<span />);
+  }
+  const handleOnClick = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <a href={`https://orcid.org/${orcid}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
+      <img src="/images/wild_card/ORCIDiD_iconvector.svg" className="orcid-logo" alt="ORCID" title="ORCID" />
+    </a>
+  );
+};
+
+OrcidIcon.propTypes = {
+  orcid: PropTypes.string.isRequired
+};
+
+const ElementIcon = (elementType) => {
+  switch (elementType) {
+    case 'Reaction':
+      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    case 'Sample':
+      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
+    default:
+      return <div />;
+  }
+};
+
+const AnalysesTypeJoinLabel = (analyses, type) => {
+  const regExp = /\(([^)]+)\)/;
+  const analysesTypeJoin = analyses.map((analysis) => {
+    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
+    if (kind === '') {
+      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    }
+    return kind;
+  }).join(', ');
+
+  return analysesTypeJoin === '' ? analysesTypeJoin :
+    (
+      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
+        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
+      </div>
+    );
+};
+
+const CalcDuration = (reaction) => {
+  let duration = null;
+
+  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
+    return reaction.duration;
+  }
+
+  if (reaction.timestamp_start && reaction.timestamp_stop) {
+    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
+    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
+    if (start < stop) {
+      duration = moment.preciseDiff(start, stop);
+    }
+  }
+  if (duration == null) {
+    return '';
+  }
+  return duration;
+};
+
+const AuthorList = ({ creators, affiliationMap }) => {
+  return (
+    <span>
+      {creators.map(
+        (creator, i) => (
+          <span key={`auth_${creator.id}_${uuid.v4()}`}>
+            {i === 0 ? null : ' - '}<OrcidIcon orcid={creator.ORCID} />{creator.name}
+            <sup>
+              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
+            </sup>
+          </span>
+        )
+      )}
+    </span>
+  );
+};
+
+AuthorList.propTypes = {
+  creators: PropTypes.array,
+  affiliationMap: PropTypes.object,
+};
+
+AuthorList.defaultProps = {
+  creators: [],
+  affiliationMap: {},
+};
+
+const ContributorInfo = ({ contributor, showHelp }) => {
+  if (!contributor.name) {
+    return <div />;
+  }
+  const contributorBlock = !showHelp ? (
+    <h5><b>Contributor: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}</h5>
+  ) : (
+    <h5>
+      <b>Contributor&nbsp;<HelpInfo source="contributor" place="right" />: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}
+    </h5>
+  );
+  return (
+    <div>
+      {contributorBlock}
+      <div>
+        {contributor.affiliations && contributor.affiliations.map((e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>)}
+      </div>
+    </div>
+  );
+};
+
+ContributorInfo.propTypes = {
+  contributor: PropTypes.object,
+  showHelp: PropTypes.bool
+};
+
+ContributorInfo.defaultProps = {
+  contributor: {},
+  showHelp: false
+};
+
+const AffiliationList = ({ affiliations, affiliationMap }) => {
+  const names = [];
+  Object.keys(affiliationMap).map((affiliationId) => {
+    const ind = affiliationMap[affiliationId];
+    names[ind] = affiliations[affiliationId];
+    return null;
+  });
+  return (
+    <div>
+      {names.map(
+        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
+      )}
+    </div>
+  );
+}
+AffiliationList.propTypes = {
+  affiliations: PropTypes.object,
+  affiliationMap: PropTypes.object,
+};
+
+AffiliationList.defaultProps = {
+  affiliations: {},
+  affiliationIds: {},
+};
+
+class ClipboardCopyLink extends Component {
+  constructor(props) {
+    super(props)
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+      >
+        <div role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn clip-copy" >{this.props.text}</div>
+      </OverlayTrigger>
+    );
+  }
+}
+
+class ClipboardCopyBtn extends Component {
+  constructor(props) {
+    super(props)
+    this.clipboard = new Clipboard('.clipboardBtn');
+  }
+
+  render() {
+    return (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
+      >
+        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
+          <i className="fa fa-clipboard" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+}
+
+
+
+const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
+  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
+  if (sample_svg_file && sample_svg_file != '') {
+    svgPath = `/images/samples/${sample_svg_file}`;
+  }
+  const tagData = molecule.tag && molecule.tag.taggable_data;
+  const pubchemInfo = {
+    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
+  };
+  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
+    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
+  const registedCompoundTooltip = (
+    <div>
+      For availability please contact the Compound Platform team with the blue button given below. An explanation can be accessed via our Youtube channel&nbsp;
+      <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play" style={{ color: 'red', fontSize: '150%' }} /></a>&nbsp;
+      or on our how-to pages
+      <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
+    </div>
+  );
+  return (
+    <Row>
+      <Col sm={4} md={4} lg={4}>
+        {resizableSvg(svgPath)}
+      </Col>
+      <Col sm={8} md={8} lg={8}>
+        {nameOrFormula}
+        <br />
+        <h5><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
+        <h5><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
+        <h5><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
+        <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
+        {
+          hasXvial ?
+            <div className="repo-registed-compound-desc">
+              A physical sample of this molecule was registered to the Molecule Archive of the
+              Compound Platform&nbsp;
+              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
+                <i className="fa fa-info-circle" aria-hidden="true" />
+              </OverlayTrigger>
+            </div> : null
+        }
+        <h5>
+          <b>Crosslinks: </b>
+          &nbsp;&nbsp;
+          <PubchemLabels element={pubchemInfo} />
+          <ChemotionTag tagData={tagData} />
+        </h5>
+      </Col>
+    </Row>
+  );
+};
+
+class RenderAnalysisHeader extends Component {
+  constructor(props) {
+    super();
+  }
+
+  render() {
+    const svgPath = `/images/samples/${this.props.element.sample_svg_file}`;
+    let doiLink = '';
+    const molecule = this.props.element.molecule || {};
+    if (this.props.isPublic) {
+      doiLink = this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.publication && this.props.element.tag.taggable_data.publication.doi;
+    } else {
+      doiLink = (this.props.element.doi && this.props.element.doi.full_doi) || '';
+    }
+    const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
+      ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
+      : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
+
+    const iupacUserDefined = this.props.element.showed_name == (molecule.iupac_name)
+      ? <span />
+      : <h5><b>Name: </b> {this.props.element.showed_name} </h5>;
+
+    const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
+    const crsId = (this.props.element.publication && this.props.element.publication.id) || '';
+    const xvial = (this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.xvial && this.props.element.tag.taggable_data.xvial.num) || '';
+    return (
+      <div>
+        <div>
+          <br />
+          <Row style={rinchiStyle}>
+            <Col sm={6} md={6} lg={6}>
+              {resizableSvg(svgPath)}
+            </Col>
+            <Col sm={6} md={6} lg={6}>
+              <span className="repo-pub-sample-header">
+                <span className="repo-pub-title"><IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" /></span>&nbsp;
+                <span className="repo-pub-title"><b>Product</b></span>&nbsp;
+                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} />
+                <RepoPublicComment isReviewer={this.props.isReviewer} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} userInfo={this.props.userInfo} pageType="reactions" pageId={this.props.reactionId} />&nbsp;
+                <RepoUserComment isLogin={this.props.isLogin} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} pageType="reactions" pageId={this.props.reactionId} />
+                <br /><br />
+              </span>
+              {nameOrFormula}
+              {iupacUserDefined}
+              <h6><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
+              <h6><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
+              <h6><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
+              <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
+              <h6><b>DOI: </b>
+                {
+                  this.props.isPublic ?
+                  (
+                    <span className="sub-title" inline="true">
+                      <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+                        {doiLink}
+                      </Button>
+                      <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                      <DownloadMetadataBtn type="sample" id={this.props.element.id} />
+                    </span>
+                  )
+                  :
+                  (
+                    <span className="sub-title" inline="true">
+                      {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+                    </span>
+                  )
+                }
+              </h6>
+              <h6>
+                <b>ID: </b>
+                <Button key={`reaction-jumbtn-${this.props.element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
+                  CRS-{crsId}
+                </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
+              </h6>
+
+            </Col>
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
+  <span
+    role="presentation"
+    className="label label-default"
+    style={{
+      backgroundColor: '#777777',
+      color: 'white',
+      fontSize: 'smaller',
+      fontWeight: 'bold',
+      cursor: 'pointer'
+    }}
+    onClick={onClick}
+  >
+    {name} &nbsp;<i className={`glyphicon ${indicatorStyle}`} />
+  </span>
+);
+
+ToggleIndicator.propTypes = {
+  indicatorStyle: PropTypes.string,
+  name: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+ToggleIndicator.defaultProps = {
+  indicatorStyle: '',
+  name: '',
+};
+
+
+const ReactionTable = ({
+  reaction, toggle, show, bodyAttrs, isPublic = true
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+
+  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+    reaction.publication.taggable_data.scheme_only === true) || false;
+
+  if (isPublic) {
+    schemes = reaction.schemes;
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s)
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => {
+    return (target ? (target * multi).toFixed(precision) : ' - ')
+  }
+
+  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        if (schemeOnly === true) {
+          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`
+        } else {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+        }
+        break;
+      case 'solvents':
+        if (isPublic) {
+          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
+        } else {
+          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`
+        }
+        break;
+      default:
+        val = materialCalc(s.equivalent, 1, 3)
+    }
+    return (
+      val
+    )
+  }
+
+  const rows = (samples) => {
+    let currentType = '';
+
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    )
+  };
+
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount(g)</th>
+          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
+          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
+          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionRinChiKey = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorRinchi = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
+              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionProperties = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorProp = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status: </b>{reaction.status}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <b>Duration: </b>{CalcDuration(reaction)}
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const ReactionTlc = ({
+  reaction, toggle, show, bodyAttrs
+}) => {
+  const showIndicatorTlc = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
+  return (
+    <span>
+      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
+      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
+              <Col sm={10} md={10} lg={10}>{reaction.rf_value || ''}</Col>
+            </Row>
+            <Row style={{ paddingBottom: '8px' }}>
+              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
+              <Col sm={10} md={10} lg={10}>
+                <div style={{ whiteSpace: 'pre' }}>
+                  {reaction.tlc_description || ''}
+                </div>
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+}
+
+const InputFieldYield = (props) => {
+  return (
+    <FormGroup>
+      <InputGroup>
+        <FormControl
+          type="text"
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          value={props.value || 0}
+          placeholder="Input Yield..."
+          onChange={event => props.onInputChange(props.product, event)}
+        />
+        <InputGroup.Addon>%</InputGroup.Addon>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const InputFieldDuration = props =>
+  (
+    <InputButtonField
+      label="Duration"
+      value={props.durationValue || ''}
+      field="duration"
+      btnValue={props.durationUnit || ''}
+      btnField="durationUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch duration unit"
+    />
+  );
+
+const InputFieldTemperture = props =>
+  (
+    <InputButtonField
+      label="Temperature"
+      value={props.temperatureDisplay || ''}
+      field="temperature"
+      btnValue={props.temperatureUnit || ''}
+      btnField="temperatureUnit"
+      onInputChange={props.onInputChange}
+      onBtnClick={props.onUnitChange}
+      btnTip="switch temperature unit"
+    />
+  );
+
+const ReactionTableEdit = ({
+  reaction, bodyAttrs, isPublic = true,
+  onInputChange
+}) => {
+  let schemes = [];
+  let sumSolvents = 0.0;
+
+  if (isPublic) {
+    schemes = reaction.schemes;
+  } else {
+    reaction.starting_materials.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'starting_materials';
+      schemes.push(ns);
+    });
+    reaction.reactants.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'reactants';
+      schemes.push(ns);
+    });
+    reaction.products.map((s) => {
+      const ns = new Sample(s)
+      ns.mat_group = 'products';
+      schemes.push(ns);
+    });
+    reaction.solvents.map((s) => {
+      const ns = new Sample(s)
+      sumSolvents += ns.amount_l;
+      ns.mat_group = 'solvents';
+      schemes.push(ns);
+    });
+  }
+
+  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
+  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
+    let val = 0;
+    switch (s.mat_group) {
+      case 'products':
+        val = materialCalc(s.equivalent * 100, 1, 0);
+        break;
+      default:
+        return <div />;
+    }
+    return (
+      <Form inline>
+        <InputFieldYield
+          value={val}
+          product={s}
+          onInputChange={onInputChange}
+        />
+      </Form>
+    );
+  };
+
+  const rows = (samples) => {
+    let currentType = '';
+
+    return (
+      typeof samples !== 'undefined'
+        ? samples.map((sample, i) => {
+          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
+          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
+          if (sample.mat_group === 'solvents') label = sample.external_label;
+          let title = null;
+          if (currentType !== sample.mat_group) {
+            currentType = sample.mat_group;
+            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
+          }
+          return (
+            <tbody key={i}>
+              {title}
+              <tr>
+                <td style={{ width: '26%' }}>{label}</td>
+                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
+                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
+                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
+              </tr>
+            </tbody>
+          );
+        })
+        : null
+    )
+  };
+
+  const table = dataRows => (
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>IUPAC</th>
+          <th>Formula</th>
+          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
+          <th style={{ textAlign: 'center' }}>Amount(g)</th>
+          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
+          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
+          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
+        </tr>
+      </thead>
+      {dataRows}
+    </Table>
+  );
+
+  return (
+    <span>
+      <Label>Reaction Table</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs} >
+            <div>
+              {table(rows(schemes))}
+            </div>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+};
+
+const ReactionPropertiesEdit = ({
+  reaction, bodyAttrs,
+  onInputChange, onUnitChange
+}) =>
+  (
+    <span>
+      <Label>Properties</Label>
+      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
+        <Panel.Collapse>
+          <Panel.Body {...bodyAttrs}>
+            <Row >
+              <Col sm={4} md={4} lg={4}>
+                <b>Status</b><div>{reaction.status}</div>
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldTemperture
+                  temperatureDisplay={reaction.temperature_display}
+                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+              <Col sm={4} md={4} lg={4}>
+                <InputFieldDuration
+                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
+                  durationUnit={reaction.durationUnit}
+                  onInputChange={onInputChange}
+                  onUnitChange={onUnitChange}
+                />
+              </Col>
+            </Row>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    </span>
+  );
+
+const ReactionSchemeOnlyInfo = ({
+  reaction, isPublic = true, schemeDesc,
+  onYieldChange, onPropertiesChange, onUnitChange
+}) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTableEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              isPublic={isPublic}
+              onInputChange={onYieldChange}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <Checkbox
+              checked={schemeDesc}
+              onChange={() => { onPropertiesChange('schemeDesc'); }}
+            >
+              <span>add the description field?</span>
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionPropertiesEdit
+              reaction={reaction}
+              bodyAttrs={bodyAttrs}
+              onInputChange={onPropertiesChange}
+              onUnitChange={onUnitChange}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
+  toggleRinchi, showRinchi,
+  toggleProp, showProp,
+  toggleTlc, showTlc,
+  schemeOnly = false, onToggle = () => {}
+ }) => {
+  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+  const content = reaction.description;
+  const additionInfo = reaction.observation;
+
+  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
+
+  const descQV = contentlength > 0 ?
+  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
+  const addQV = additionlength > 0 ?
+  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
+
+
+  const bodyAttrs = {
+    style: {
+      fontSize: '90%',
+      paddingBottom: 'unset'
+    }
+  };
+
+  if (schemeOnly) {
+    return (
+      <RepoReactionSchemeInfo
+        reaction={reaction}
+        svgPath={svgPath}
+        showScheme={showScheme}
+        showRinchi={showRinchi}
+        showProp={showProp}
+        bodyAttrs={bodyAttrs}
+        onToggle={onToggle}
+      />
+    );
+  }
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <SVG key={svgPath} src={svgPath} className="reaction-details" />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTable
+              reaction={reaction}
+              toggle={toggleScheme}
+              show={showScheme}
+              isPublic={isPublic}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+            <div className="desc small-p">
+              {addQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={reaction}
+              toggle={toggleRinchi}
+              show={showRinchi}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionProperties
+              reaction={reaction}
+              toggle={toggleProp}
+              show={showProp}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionTlc
+              reaction={reaction}
+              toggle={toggleTlc}
+              show={showTlc}
+              bodyAttrs={bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+const AnalysisHeaderSample = ({ sample, sampleType }) => {
+  const svgPath = `/images/samples/${sample.sample_svg_file}`;
+  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
+  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
+  return (
+    <div className="svg-container">
+      <Row style={rinchiStyle}>
+        <Col sm={4} md={4} lg={4}>
+          <SVG key={svgPath} src={svgPath} className="sample-details" />
+        </Col>
+        <Col sm={8} md={8} lg={8}>
+          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
+          <b> DOI: </b>
+          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
+            {doiLink}
+          </Button>
+          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
+          <DownloadMetadataBtn type="sample" id={sample.id} />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+AnalysisHeaderSample.propTypes = {
+  sample: PropTypes.instanceOf(Sample).isRequired,
+  sampleType: PropTypes.string,
+};
+
+AnalysisHeaderSample.defaultProps = {
+  sample: {},
+  sampleType: '',
+};
+
+class RenderPublishAnalysesPanel extends Component {
+  header() {
+    const {
+      analysis, isPublic, userInfo, isLogin, isReviewer, pageId, type, pageType, element
+    } = this.props;
+    const content = analysis.extended_metadata['content'];
+    const previewImg = previewContainerImage(analysis);
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    const doiLink = (isPublic === false) ? (
+      <div className="sub-title" inline="true">
+        <b>DOI: </b>
+        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+      </div>
+    ) : (
+      <div className="sub-title" inline="true">
+        <b>DOI: </b>
+        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+          {analysis.dataset_doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+        <DownloadMetadataBtn type="container" id={analysis.id} />
+      </div>
+    );
+
+    const insText = instrumentText(analysis);
+    const crdLink = (isPublic === false) ? (
+      <div className="sub-title" inline="true">
+        <b>ID: </b>
+        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+          CRD-{analysis.pub_id}
+        </Button>
+        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{insText}
+
+      </div >
+    ) : (
+      <div className = "sub-title" inline = "true">
+        <b>ID: </b>
+        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+          CRD-{analysis.pub_id}
+        </Button>
+        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+      </div >
+    );
+
+    return (
+      <div className="repo-analysis-header">
+        <RepoPreviewImage
+          element={element}
+          analysis={analysis}
+          isLogin={isLogin}
+          previewImg={previewImg}
+          title={kind}
+        />
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title">
+              <b>{kind}</b>&nbsp;
+              <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
+              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
+            </div>
+            {doiLink}
+            {crdLink}
+          </div>
+          <div className="desc small-p expand-p">
+            <ClipboardCopyLink text={contentToText(content)}>
+              <QuillViewer value={content} />
+            </ClipboardCopyLink>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {this.header()}
+        <div>
+          <b>Datasets</b>
+          <RepoContainerDatasets
+            container={this.props.analysis}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+class RenderPublishAnalyses extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  header() {
+    const { analysis } = this.props;
+    const content = analysis.extended_metadata['content'];
+    const previewImg = previewContainerImage(analysis);
+
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+
+    let hasPop = true;
+    let fetchNeeded = false;
+    let fetchId = 0;
+    let fetchFilename = '';
+    if (previewImg.startsWith('data:image')) {
+      fetchNeeded = true;
+      fetchId = analysis.preview_img.id;
+      fetchFilename = analysis.preview_img.filename;
+    } else {
+      hasPop = false;
+    }
+
+    return (
+      <div
+        className="analysis-header"
+      >
+        <div className="preview">
+          <ImageModal
+            hasPop={hasPop}
+            preivewObject={{
+              src: previewImg
+            }}
+            popObject={{
+              title: kind,
+              src: previewImg,
+              fetchNeeded,
+              fetchId,
+              fetchFilename
+            }}
+          />
+        </div>
+        <div className="abstract">
+          <div className="lower-text">
+            <div className="sub-title" inline="true">
+              <b>DOI: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
+                {analysis.dataset_doi}
+              </Button>
+              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
+              <DownloadMetadataBtn type="container" id={analysis.id} />
+            </div>
+            <div className="sub-title" inline="true">
+              <b>ID: </b>
+              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
+                CRD-{ analysis.pub_id }
+              </Button>
+              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
+            </div>
+            <div className="desc small-p">
+              <b>Content: </b> &nbsp;&nbsp;
+              <ClipboardCopyLink text={contentToText(content)}>
+              <QuillViewer value={content}  />
+            </ClipboardCopyLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { analysis, expanded, elementType } = this.props;
+    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+    const AffiliationMap = (affiliationIds) => {
+      const aId = affiliationIds.length > 0 ? ([].concat.apply(...affiliationIds)) : [];
+      const affiliationMap = {};
+      let aCount = 0;
+      aId.map((e) => {
+        if (!affiliationMap[e]) {
+          aCount += 1;
+          affiliationMap[e] = aCount;
+        }
+      });
+      return affiliationMap;
+    };
+    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids || []);
+    const time = new Date(this.props.publication && this.props.publication.published_at);
+    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    return (
+      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
+        <Panel.Heading style={{ border: 'unset' }}>
+          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
+            {IconLicense(this.props.license, (this.props.publication.author_ids.length > 1))}
+          </h4>
+          <p>&nbsp;</p>
+          <b>{kind}</b>&nbsp;
+          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
+            <small><b>{ElementIcon(elementType)}</b></small>
+          </div>
+          <h5>
+            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
+            <AuthorList
+              creators={this.props.publication.creators}
+              affiliationMap={affiliationMap}
+            />
+          </h5>
+          <AffiliationList
+            affiliations={this.props.publication.affiliations}
+            affiliationMap={affiliationMap}
+          />
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
+            {this.header()}
+            <Col md={12}>
+              <b>Datasets</b>
+              <RepoContainerDatasets
+                container={this.props.analysis}
+              />
+            </Col>
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    );
+  }
+}
+
+RenderPublishAnalyses.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  elementType: PropTypes.string.isRequired,
+  license: PropTypes.string.isRequired,
+  publication: PropTypes.shape({
+    author_ids: PropTypes.arrayOf(PropTypes.number),
+    creators: PropTypes.arrayOf(PropTypes.object),
+    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
+    affiliations: PropTypes.object,
+    published_at: PropTypes.string,
+  }).isRequired
+};
+
+class PublishAnalysesTag extends Component {
+  constructor(props) {
+    super(props);
+    const { reaction, analysis, analysesType, product } = props;
+    this.state = {
+      reaction,
+      analysis,
+      analysesType,
+      product
+    };
+    this.handleCheck = this.handleCheck.bind(this);
+  }
+
+  handleCheck(e, elementType) {
+    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
+      e.extended_metadata.publish = false;
+    } else {
+      e.extended_metadata.publish = true;
+    }
+    this.props.handleAnalysesChecked(e, elementType);
+  }
+
+  generateTitle() {
+    const {
+      reaction, analysis, analysesType, product
+    } = this.state;
+    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
+    const { content } = analysis.extended_metadata;
+    const status = analysis.extended_metadata.status || '';
+    const previewImg = previewContainerImage(analysis);
+    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
+
+    let statusMissing = false;
+    let nmrMissing = false;
+    let datasetMissing = false;
+    if (analysesType === 'Product') {
+      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
+      nmrMissing = !isNmrPass(analysis, product);
+      datasetMissing = !isDatasetPass(analysis);
+    }
+    const constructBtnTip = () => {
+      const tip = [];
+      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
+        if (typeMissing) tip.push('Type is invalid.');
+        if (statusMissing) tip.push('Status must be Confirmed.');
+        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
+        if (datasetMissing) {
+          tip.push('Dataset is incomplete. Please check that: ');
+          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
+          tip.push('2. the instrument field is not empty.');
+        }
+        return tip.join('\r\n');
+      }
+      return 'publish this analysis';
+    };
+    const btnTip = constructBtnTip();
+
+    let statusChk = false;
+    let statusMsg = '';
+    let typeChk = false;
+    if (analysesType === 'Product') {
+      statusChk = (status !== 'Confirmed' || nmrMissing);
+      statusMsg = nmrMsg(product, analysis);
+      typeChk = (kind === '');
+    }
+
+    if (!analysis.extended_metadata.kind) {
+      analysis.extended_metadata.publish = false;
+    }
+    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
+      && !statusMissing && !nmrMissing && !datasetMissing) || false;
+    let analysesIcon = '';
+    switch (analysesType) {
+      case 'Reaction':
+        analysesIcon = <i className="icon-reaction" />;
+        break;
+      case 'Product':
+        analysesIcon = <i className="icon-sample" />;
+        break;
+      default:
+        analysesIcon = '';
+    }
+
+    return (
+      <div
+        className="analysis-header order"
+      >
+        <div className="preview">
+          <img src={previewImg} alt="preview" />
+        </div>
+        <div className="abstract">
+          <div className="upper-btn">
+            <div
+              className="button-right"
+            >
+              &nbsp;{analysesIcon}
+            </div>
+            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
+            <span
+              className="button-right add-to-report"
+              onClick={stopBubble}
+            >
+              <OverlayTrigger
+                placement="left"
+                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
+              >
+                <div>
+                  <Checkbox
+                    onChange={() => { this.handleCheck(analysis, analysesType); }}
+                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
+                    defaultChecked={isPublish}
+                  >
+                    {
+                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
+                        <span style={{ color: 'red' }}>Add to publication</span>
+                      :
+                        <span>Add to publication</span>
+                    }
+                  </Checkbox>
+                </div>
+              </OverlayTrigger>
+            </span>
+          </div>
+          <div className="lower-text">
+            <div className="main-title">
+              {analysis.name}
+            </div>
+            {
+              typeChk ?
+                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
+                :
+                <div className="sub-title">Type: {kind}</div>
+            }
+            {
+              statusChk ?
+                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
+                :
+                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
+            }
+            <div className="desc sub-title">
+              <span style={{ float: 'left', marginRight: '5px' }}>
+                Content:
+              </span>
+              <QuillViewer value={content}  />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
+        <Panel.Heading>
+          <Panel.Title toggle>
+            {this.generateTitle()}
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Body collapsible>
+          <ContainerComponent readOnly container={this.props.analysis} />
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+PublishAnalysesTag.propTypes = {
+  reaction: PropTypes.instanceOf(Reaction).isRequired,
+  analysis: PropTypes.object.isRequired,
+  analysesType: PropTypes.string,
+  handleAnalysesChecked: PropTypes.func.isRequired,
+  product: PropTypes.object
+};
+PublishAnalysesTag.defaultProps = {
+  analysesType: '',
+  product: null
+};
+
+RenderPublishAnalysesPanel.propTypes = {
+  analysis: PropTypes.object.isRequired,
+  type: PropTypes.string.isRequired,
+  userInfo: PropTypes.string,
+  isPublic: PropTypes.bool,
+  isLogin: PropTypes.bool,
+  isReviewer: PropTypes.bool,
+  pageId: PropTypes.number,
+  pageType: PropTypes.string
+};
+
+RenderPublishAnalysesPanel.defaultProps = {
+  userInfo: '',
+  isPublic: true,
+  isLogin: false,
+  isReviewer: false,
+  pageId: null,
+  pageType: 'reactions'
+};
+
+ReactionTable.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object,
+  isPublic: PropTypes.bool.isRequired
+};
+
+ReactionTable.defaultProps = {
+  isPublic: true,
+  showScheme: false
+};
+
+ReactionRinChiKey.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionProperties.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+ReactionTlc.propTypes = {
+  reaction: PropTypes.any.isRequired,
+  toggle: PropTypes.func,
+  show: PropTypes.bool,
+  bodyAttrs: PropTypes.object
+};
+
+const DatasetDetail = ({ element }) => {
+  const { molecule } = element;
+  molecule.tag = {
+    taggable_data: { pubchem_cid: molecule.pubchem_cid }
+  };
+
+  const moleculeView = molecule.inchikey === null ? (<span />) : (<MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />);
+  const datasetView = !element ? (
+    <span>There is no published dataset</span>
+  ) : (
+    <RenderPublishAnalyses
+      key={`${element.id}-${element.updated_at}`}
+      analysis={element.dataset}
+      expanded
+      elementType="Sample"
+      license={element.license}
+      publication={element.publication}
+    />
+  );
+
+  return (
+    <Grid>
+      {moleculeView}
+      <br /><br />
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          {datasetView}
+        </Col>
+      </Row>
+    </Grid>
+  );
+};
+
+DatasetDetail.propTypes = {
+  element: PropTypes.object.isRequired,
+};
+
+const ClosePanel = ({ element }) => (
+  <div>
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        className="button-right"
+        onClick={() => PublicActions.close(element, true)}
+      >
+        <i className="fa fa-times" />
+      </Button>
+    </OverlayTrigger>
+  </div>
+);
+
+ClosePanel.propTypes = {
+  element: PropTypes.object.isRequired,
+};
+
+const CommentBtn = (props) => {
+  const {
+    canComment,
+    reviewLevel,
+    onShow,
+    field,
+    history,
+    orgInfo
+  } = props;
+
+  if (!canComment) return '';
+  return (
+    <span>
+      <RepoCommentBtn
+        field={field}
+        history={history}
+        orgInfo={orgInfo}
+        reviewLevel={reviewLevel}
+        onShow={() => onShow(true, field, orgInfo)}
+      />&nbsp;
+    </span>
+  );
+};
+
+CommentBtn.propTypes = {
+  canComment: PropTypes.bool.isRequired,
+  history: PropTypes.array.isRequired,
+  reviewLevel: PropTypes.number.isRequired,
+  onShow: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  orgInfo: PropTypes.string.isRequired
+};
+
+const Doi = (props) => {
+  const {
+    type, id, doi, isPublished
+  } = props;
+
+  let data = '';
+
+  if (isPublished) {
+    data = (
+      <span>
+        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
+          {doi}
+        </Button>
+        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
+        <DownloadMetadataBtn type={type} id={id} />
+      </span>
+    );
+  } else {
+    data = (
+      <span>
+        {doi.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi.full_doi}`} />
+      </span>
+    );
+  }
+
+  return (
+    <h5>
+      <b>DOI: </b>
+      {data}
+    </h5>
+  );
+};
+
+Doi.propTypes = {
+  type: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  doi: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+const DateInfo = (props) => {
+  const {
+    pubData, tagData, isPublished
+  } = props;
+
+  let time = '';
+  let formattedTime = '';
+
+  if (isPublished) {
+    time = new Date(tagData && (tagData.published_at || tagData.doi_reg_at));
+    formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+    return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
+  }
+
+  time = new Date(pubData && pubData.updated_at);
+  formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
+  return (<span><b>Submitted on </b> <i>{formattedTime}</i></span>);
+};
+
+DateInfo.propTypes = {
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export {
+  AnalysisHeaderSample,
+  AnalysesTypeJoinLabel,
+  AffiliationList,
+  AuthorList,
+  AuthorTitle,
+  BackSoonPage,
+  CalcDuration,
+  ChemotionId,
+  ClipboardCopyLink,
+  ClipboardCopyBtn,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  DateFormatYMDLong,
+  DateFormatDMYTime,
+  DatasetDetail,
+  DateInfo,
+  Doi,
+  DownloadDOICsv,
+  DownloadMetadataBtn,
+  EditorTips,
+  ElementIcon,
+  ElStateLabel,
+  ElSubmitTime,
+  ElAspect,
+  EmbargoCom,
+  IconLicense,
+  IconToMyDB,
+  isNmrPass,
+  isDatasetPass,
+  HomeFeature,
+  MoleculeInfo,
+  NewsroomTemplate,
+  PublishAnalysesTag,
+  PublishTypeAs,
+  ReactionSchemeOnlyInfo,
+  ReactionInfo,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalyses,
+  RenderPublishAnalysesPanel,
+  resizableSvg,
+  SchemeWord,
+  SidToPubChem,
+  OrcidIcon,
+  ShowIndicator,
+  SvgPath,
+  ToggleIndicator,
+};
diff --git a/app/assets/javascripts/libHome/RepoContact.js b/app/assets/javascripts/libHome/RepoContact.js
new file mode 100644
index 000000000..1c44e4b30
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoContact.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Well, Col, Row } from 'react-bootstrap';
+
+const RepoContact = () => {
+  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />kit.edu</span>;
+  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
+  return (
+    <div >
+      <br /><br /><br />
+      <Well style={{ width: '90%', margin: 'auto' }}>
+        <Row>
+          <Col md={6}>
+            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
+              <tbody>
+                <tr><td><h3>Complat</h3><br /><br /></td></tr>
+                <tr><td>{institute}</td></tr>
+                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
+                <tr><td>Building 341</td></tr>
+                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
+                <tr><td>Germany<br /><br /></td></tr>
+                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
+                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
+                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
+              </tbody>
+            </table>
+          </Col>
+          <Col md={6}>
+            <iframe
+              title="Complat location"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
+              style={{
+                width: '80%', height: 400, frameborder: '0', margin: 'auto'
+              }}
+            />
+          </Col>
+        </Row>
+      </Well>
+      <br /><br /><br />
+    </div>
+  );
+};
+
+export default RepoContact;
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
new file mode 100644
index 000000000..ba3cbe81c
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoContainerDatasets.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
+import ContainerDatasetModal from '../components/ContainerDatasetModal';
+import ContainerDatasetField from '../components/ContainerDatasetField';
+
+export default class RepoContainerDatasets extends Component {
+  constructor(props) {
+    super(props);
+    const { container } = props;
+    this.state = {
+      container,
+      modal: {
+        show: false,
+        dataset_container: null
+      }
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      container: nextProps.container
+    });
+  }
+
+  handleModalOpen(datasetContainer) {
+    const { modal } = this.state;
+    modal.dataset_container = datasetContainer;
+    modal.show = true;
+    this.setState({ modal });
+  }
+
+  handleModalHide() {
+    const { modal } = this.state;
+    modal.show = false;
+    modal.dataset_container = null;
+    this.setState({ modal });
+    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
+    document.body.className = document.body.className.replace('modal-open', '');
+  }
+
+  render() {
+    const { container, modal } = this.state;
+
+    if (container.children.length > 0) {
+      return (
+        <div>
+          <ListGroup style={{ marginBottom: 20 }}>
+            {container.children.map((datasetContainer) => {
+              return (
+                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} className="repo-analysis-listgroup">
+                  <ContainerDatasetField
+                    dataset_container={datasetContainer}
+                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
+                    disabled
+                  />
+                </ListGroupItem>
+              );
+            })}
+          </ListGroup>
+          <hr style={{ borderColor: '#ddd' }} />
+          <ContainerDatasetModal
+            onHide={() => this.handleModalHide()}
+            show={modal.show}
+            readOnly
+            dataset_container={modal.dataset_container}
+            disabled
+          />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
+          <h5>There are currently no Datasets.</h5>
+        </Well>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoDirective.js b/app/assets/javascripts/libHome/RepoDirective.js
new file mode 100644
index 000000000..8712595b1
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoDirective.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
+import { Parser } from 'html-to-react';
+
+export default class RepoDirective extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      content: <div />
+    };
+  }
+
+  componentDidMount() {
+    fetch('/directives/directives.html', { credentials: 'same-origin' })
+      .then(res => res.text())
+      .then((html) => {
+        // const parser = new HtmlToReactParser();
+        this.setState({ content: Parser().parse(html) });
+      })
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
+  render() {
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={3} />
+        <Col md={6}>
+          <Panel>
+            <Panel.Heading>
+              <Panel.Title>Directive to use the service</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
+              {this.state.content}
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={3} />
+      </Row>
+    );
+  }
+};
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
new file mode 100644
index 000000000..3f50fdabf
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoElementDetails.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import { DatasetDetail } from './RepoCommon';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoElementDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentElement: {}
+    };
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'dataset': return <DatasetDetail element={currentElement} />;
+      case 'molecule': return (
+        <RepoSampleDetails
+          isPublished
+          element={currentElement}
+          reviewLevel={this.state.reviewLevel}
+          history={this.state.historyInfo ? this.state.historyInfo : []}
+        />);
+      case 'reaction': return (
+        <RepoReactionDetails
+          isPublished
+          reaction={currentElement}
+          reviewLevel={this.state.reviewLevel}
+          history={this.state.historyInfo ? this.state.historyInfo : []}
+        />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none', maxHeight: '80%' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoEmbargo.js b/app/assets/javascripts/libHome/RepoEmbargo.js
new file mode 100644
index 000000000..7a5f934c7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoEmbargo.js
@@ -0,0 +1,278 @@
+import React, { Component } from 'react';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
+import Select from 'react-select';
+import { findIndex, filter } from 'lodash';
+import RepoEmbargoDetails from './RepoEmbargoDetails';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { ElAspect } from './RepoCommon';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+
+const renderMenuItems = (bundles) => {
+  if (bundles.length < 1) return <div />;
+  const menu = bundles.map(bundle => (
+    <MenuItem key={bundle.value} eventKey={bundle.value}>
+      {bundle.label}
+    </MenuItem>
+  ));
+  return menu;
+};
+
+export default class RepoEmbargo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elements: [],
+      current_user: {},
+      currentElement: null,
+      moveElement: {},
+      newEmbargo: null,
+      selectEmbargo: null,
+      bundles: [],
+      showConfirmModal: false,
+      showMoveModal: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
+    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
+    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
+    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
+    this.handleMoveShow = this.handleMoveShow.bind(this);
+    this.handleMoveClose = this.handleMoveClose.bind(this);
+    this.loadBundles = this.loadBundles.bind(this);
+    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    this.loadBundles();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+    if (this.state.selectEmbargo !== null) {
+      const vaildSelect = state.bundles.find(b => b.value === this.state.selectEmbargo.value);
+      if (typeof (vaildSelect) === 'undefined') {
+        this.setState({ selectEmbargo: null });
+      }
+    }
+  }
+
+  onClickDelete() {
+    this.setState({ showConfirmModal: true });
+  }
+
+
+  handleMoveShow(element) {
+    this.setState({
+      showMoveModal: true,
+      moveElement: element
+    });
+  }
+
+  handleMoveClose() {
+    this.setState({ showMoveModal: false, moveElement: {} });
+  }
+
+  handleEmbargoChange(selectedValue) {
+    if (selectedValue) {
+      this.setState({ newEmbargo: selectedValue });
+    }
+  }
+
+  handleElementSelection(eventKey, event) {
+    const { bundles } = this.state;
+    const selectEmbargo = bundles.find(b => b.value === eventKey);
+    this.setState({ selectEmbargo });
+    PublicActions.getEmbargoElements(eventKey);
+  }
+
+  handleEmbargoAccount() {
+    const { selectEmbargo } = this.state;
+
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else {
+      PublicActions.generateEmbargoAccount(selectEmbargo.value);
+      alert(`A temporary account for [${selectEmbargo.label}] has been created. The details have been sent to you by e-mail.`);
+    }
+  }
+
+  handleEmbargoRelease() {
+    const { selectEmbargo } = this.state;
+
+    if (selectEmbargo === null) {
+      alert('Please select an embargo first!');
+    } else {
+      PublicActions.releaseEmbargo(selectEmbargo.value);
+      alert(`The embargo on [${selectEmbargo.label}] has been released!`);
+    }
+  }
+
+  handleEmbargoDelete(shouldPerform) {
+    if (shouldPerform) {
+      const { selectEmbargo } = this.state;
+      if (selectEmbargo === null) {
+        alert('Please select an embargo first!');
+      } else {
+        PublicActions.deleteEmbargo(selectEmbargo.value);
+      }
+    }
+    this.setState({ showConfirmModal: false });
+  }
+
+  handleMoveEmbargo() {
+    const { selectEmbargo, moveElement, newEmbargo } = this.state;
+    PublicActions.moveEmbargo(selectEmbargo.value, newEmbargo, moveElement);
+    this.setState({ showMoveModal: false });
+  }
+
+  loadBundles() {
+    PublicActions.fetchEmbargoBundle();
+  }
+
+  renderSearch(bundles) {
+    const { selectEmbargo, elements, current_user } = this.state;
+    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
+    const customClass = '.btn-unified';
+    const actionButtons = current_user.type === 'Anonymous' ? <span /> :
+      (
+        <span>
+          <Button
+            bsStyle="primary"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || elements.length === 0}
+            onClick={() => this.handleEmbargoAccount()}
+          >
+            <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
+          </Button>
+          <Button
+            bsStyle="primary"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
+            onClick={() => this.handleEmbargoRelease()}
+          >
+            <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
+          </Button>
+          <Button
+            bsStyle="danger"
+            id="all-inner-button"
+            disabled={selectEmbargo === null || elements.length !== 0}
+            onClick={() => this.onClickDelete()}
+          >
+            <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
+          </Button>
+        </span>
+      );
+    const filterDropdown = (
+      <ButtonGroup>
+        <DropdownButton
+          className={customClass}
+          id="embargo-inner-dropdown"
+          title={selectEmbargo === null ? 'Embargo Bundle' : selectEmbargo.label}
+          style={{ width: '180px' }}
+          onSelect={this.handleElementSelection}
+        >
+          {renderMenuItems(bundles)}
+        </DropdownButton>
+        {actionButtons}
+      </ButtonGroup>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {filterDropdown}
+      </div>
+    );
+  }
+
+
+  // render modal
+  renderMoveModal() {
+    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
+    const defaultBundles = [
+      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
+    ];
+    const allBundles = defaultBundles.concat(filter(bundles, b => b.name !== (selectEmbargo == null ? '' : selectEmbargo.name)));
+
+    return (
+      <Modal
+        show={showMoveModal}
+        dialogClassName="move-embargo-dialog"
+        onHide={this.handleMoveClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            <Panel bsStyle="success">
+              <Panel.Heading>
+                <Panel.Title>
+                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.label}] to :
+                </Panel.Title>
+              </Panel.Heading>
+              <Panel.Body>
+                <div>
+                  <Select
+                    value={this.state.newEmbargo}
+                    onChange={e => this.handleEmbargoChange(e)}
+                    options={allBundles}
+                    className="select-assign-collection"
+                  />
+                  <br />
+                  <ButtonToolbar>
+                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
+                  </ButtonToolbar>
+                </div>
+              </Panel.Body>
+            </Panel>
+          </div>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+  render() {
+    const {
+      elements, bundles, currentElement, currentUser, showConfirmModal
+    } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch(bundles)}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div>
+            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+              <Table striped className="review-entries">
+                <tbody striped="true" bordered="true" hover="true">
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, currentElement, this.handleMoveShow)) }
+                </tbody>
+              </Table>
+            </div>
+          </div>
+          <ConfirmModal
+            showModal={showConfirmModal}
+            title="Warning"
+            content="Are you sure that you want to delete this ?"
+            onClick={this.handleEmbargoDelete}
+          />
+        </Col>
+        <Col
+          className="review-element"
+          md={currentElement ? 8 : 0}
+        >
+          <RepoEmbargoDetails />
+          { this.renderMoveModal() }
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoEmbargoDetails.js b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
new file mode 100644
index 000000000..89d33cae8
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoEmbargoDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction': return <RepoReactionDetails reaction={currentElement.reaction} />;
+      case 'sample': return <RepoSampleDetails element={currentElement} />;
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>);
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/assets/javascripts/libHome/RepoHome.js
new file mode 100644
index 000000000..3a576ed55
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHome.js
@@ -0,0 +1,421 @@
+import React, { Component } from 'react';
+import { Label, Col, Row, Carousel, Thumbnail } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+
+const PartnersInfo = (info) => {
+  const { header, img, content } = info;
+  const imgSrc = `/images/repo/${img}`;
+
+  return (
+    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
+      <div className="info">
+        <h4>{header}</h4>
+        <p>{content}</p>
+      </div>
+    </Thumbnail>
+  );
+};
+
+const Infos = [
+  {
+    header: 'Database API',
+    img: 'OAI.png',
+    content: 'The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.',
+  }, {
+    header: 'KIT Stiftung',
+    img: 'KITStiftung.png',
+    content: 'The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.',
+  }, {
+    header: 're3data',
+    img: 're3data.png',
+    content: 'Karlsruhe Institute of Technology Registry of Research Data Repositories',
+  }, {
+    header: 'Inchitrust',
+    img: 'InChITRUST.png',
+    content: 'The KIT has a Supporter Membership.',
+  }, {
+    header: 'Datacite',
+    img: 'DataCite.png',
+    content: 'Helping you to find, access, and reuse data.',
+  }, {
+    header: 'Pubmed',
+    img: 'pubchem.jpg',
+    content: 'All compounds are automatically registered with PubChem.',
+  }, {
+    header: 'Thomson Reuters',
+    img: 'DCIbadge.png',
+    content: 'Datasets are automatically registered at the Data Citation Index.',
+  }, {
+    header: 'DFG',
+    img: 'ri_logo.png',
+    content: 'Listed in the DFG catalogue for Research Infrastructures.',
+  }
+];
+
+const timeInterval = (date) => {
+  if (!date) { return null; }
+  switch (typeof date) {
+    case 'number':
+      break;
+    case 'string':
+      date = +new Date(date);
+      break;
+    case 'object':
+      if (date.constructor === Date) date = date.getTime();
+      break;
+    default:
+      date = +new Date();
+  }
+  let seconds = Math.floor((new Date() - date) / 1000);
+  let intrvlTypes = [
+    [31536000, 'year', 'a'],
+    [2592000, 'month', 'a'],
+    [604800, 'week', 'a'],
+    [86400, 'day', 'a'],
+    [3600, 'hour', 'an'],
+    [60, 'minute', 'a'],
+    [1, 'second', 'a'],
+  ]
+  let intrvlCount = 0
+  let intrvlType = intrvlTypes.find((e) => {
+    intrvlCount = Math.floor(seconds / e[0])
+    return intrvlCount >= 1
+  })
+  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
+}
+
+const CardLatestPublish = ({ lastPublished }) => {
+  if (lastPublished) {
+    const { sample, reaction } = lastPublished;
+    const svgPathSample = sample.sample_svg_file
+      ? `/images/samples/${sample.sample_svg_file}`
+      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
+    const pubTagSample = sample.tag || {};
+    const svgPathReaction = reaction
+      ? `/images/reactions/${reaction.reaction_svg_file}`
+      : '/images/no_image_180.svg';
+    const pubTagReaction = reaction.tag || {};
+    return (
+      <div className="card-well-competition">
+        <Carousel className="carl-spt" indicators={false} interval={6000}>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
+                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+          <Carousel.Item className="carl-spt-item">
+            <div className="img">
+              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
+                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
+              </a>
+              <Carousel.Caption className="caption">
+                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
+              </Carousel.Caption>
+            </div>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+    );
+  }
+  return <div />;
+};
+
+const CardIntro = () => (
+  <div className="container">
+    <Row>
+      <Col md={6} sm={12} className="even">
+        <img
+          className="icon-chemotion"
+          src="/images/repo/chemotion_full.svg"
+          key="chemotion_full"
+          alt="icon"
+        />
+      </Col>
+      <Col md={6} sm={12} className="even">
+        <div className="heading">
+          Repository for molecules, reactions and research data
+        </div>
+      </Col>
+    </Row>
+    <Row>
+      <Col md={12} sm={12}>
+        <div className="heading">Visibility and Impact</div>
+        <ul className="list">
+          <li>
+            Publish your structures, attach your characterization data, and make them citable via DOI
+          </li>
+          <li>
+            Automated registration at various scientific data providers
+          </li>
+          <li>
+            Long-term archival - from scientists for scientists
+          </li>
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Now, publish your Reactions</i>
+          </li>
+        </ul>
+      </Col>
+    </Row>
+  </div>
+);
+
+const StaticsBoard = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+
+    return (
+      <Row className="repo-statistic">
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="icon-sample" />
+              <div className="tit">Samples</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="tit">published</div>
+              <div className="cnt">{stsSample.e_cnt}</div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="icon-reaction" />
+              <div className="tit">Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="tit">published</div>
+              <div className="cnt">{stsReaction.e_cnt}</div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="fa fa-area-chart i-ext" aria-hidden />
+              <div className="tit">Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">{stsAnalysisCnt}</div>
+              <div style={{ display: 'flex' }}>
+                <div>Top 3:&nbsp;&nbsp;</div>
+                <div className="italic-desc">
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
+                  <br />
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
+                  <br />
+                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+class RepoHome extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    PublicActions.lastPublished();
+    PublicActions.publishedStatics();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(PublicState) {
+    if (PublicState.lastPublished || PublicState.publishedStatics) {
+      this.setState(prevState => ({
+        ...prevState,
+        lastPublished: PublicState.lastPublished,
+        publishedStatics: PublicState.publishedStatics
+      }));
+    }
+  }
+
+  render() {
+    const features = {
+      metadata: {
+        fa: 'fa fa-file-code-o',
+        title: 'Metadata',
+        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme 4.0.'
+      },
+      doi: {
+        fa: 'fa fa-id-card-o',
+        title: 'DOI',
+        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
+      },
+      license: {
+        fa: 'fa fa-creative-commons',
+        title: 'Licenses',
+        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
+      },
+      embargo: {
+        fa: 'fa fa-ban',
+        title: 'Embargo',
+        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
+      },
+      // usage: {
+      //   fa: 'fa fa-bar-chart',
+      //   title: 'Usage',
+      //   intro: 'Assess your research data and track the published research data......'
+      // },
+      // oai: {
+      //   fa: 'fa fa-tasks',
+      //   title: 'OAI Provider',
+      //   intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
+      // },
+      dataQuality: {
+        fa: 'fa fa-diamond',
+        title: 'Data Quality',
+        intro: 'Release your research data and pass an internal review that ensures data quality.'
+      },
+      peer: {
+        fa: 'fa fa-external-link',
+        title: 'Peer review',
+        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
+      },
+      store: {
+        fa: 'fa fa-database',
+        title: 'Storage',
+        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
+      },
+      api: {
+        fa: 'fa fa-connectdevelop',
+        title: 'APIs',
+        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
+      }
+    };
+
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={12}>
+          <Row className="repo-top-row">
+            <Col md={3} sm={12}>
+              <CardLatestPublish lastPublished={this.state.lastPublished} />
+            </Col>
+            <Col md={6} sm={12} className="repo-intro">
+              <CardIntro />
+            </Col>
+            <Col md={3} sm={12}>
+              <StaticsBoard publishedStatics={this.state.publishedStatics} />
+            </Col>
+          </Row>
+          <Row>
+            <Col md={2} sm={12}>&nbsp;</Col>
+            <Col md={8} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Features
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
+                </Col>
+              </Row>
+              <Row className="feature">
+                <Col md={2} sm={12}>
+                  <div />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
+                </Col>
+                <Col md={4} sm={12}>
+                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
+                </Col>
+                <Col md={2} sm={12}>
+                  <div />
+                </Col>
+              </Row>
+            </Col>
+            <Col md={2} sm={12}>&nbsp;</Col>
+          </Row>
+          <Row className="card-partners">
+            <Col md={12} sm={12}>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="home-title">
+                    <span>
+                      Partners, Affiliations, APIs
+                    </span>
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col md={12} sm={12}>
+                  <div className="partner-row" >
+                    { Infos.map((info, index) => PartnersInfo(info, index)) }
+                  </div>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default RepoHome;
diff --git a/app/assets/javascripts/libHome/RepoHowTo.js b/app/assets/javascripts/libHome/RepoHowTo.js
new file mode 100644
index 000000000..00c109964
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo.js
@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div style={{ position: 'relative' }}>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (howto) => {
+  let imageUrl = '';
+  if (typeof (howto) !== 'undefined' && howto
+    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+    imageUrl = `/howto/${howto.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      {
+        imageUrl === '' ?
+          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
+            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+          </div>
+          :
+          <img
+            src={imageUrl}
+            style={{
+              display: 'block',
+              width: '100%',
+              height: 'auto'
+            }}
+            alt=""
+          />
+      }
+    </div>
+  );
+};
+
+export default class RepoHowTo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howtos: PublicStore.getState().howtos || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.howtos();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howtos) {
+      this.setState(prevState => ({
+        ...prevState, howtos: state.howtos
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initialHowTo()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_howto_editor
+        });
+      });
+  }
+
+  render() {
+    let { howtos } = this.state;
+    const { isEditor } = this.state;
+    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
+    howtos = orderBy(
+      howtos,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return howtos.length > 0 ? (
+      <Row className="howto_page">
+        <Col lg={12} md={12}>
+          <NewsList howtos={howtos} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) :
+      <Row className="howto_page" style={{ textAlign: 'center' }}>
+        <Col md={12}>
+          <BackSoonPage />
+        </Col>
+      </Row>;
+  }
+}
+
+const NewsColSmall = (param) => {
+  const { howto, isEditor } = param;
+  return (
+    <Col lg={12} md={12} sm={12} className="news_column">
+      <div className="news_card_content">
+        <div className="news_card_s">
+          <Col md={4} sm={12}>{mainImage(howto)}</Col>
+          <Col md={8} sm={12}>
+            <div className="card_info">
+              <div className="info">
+                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
+                <div className="news_content_card_s">
+                  <p />
+                  {howto.firstParagraph}
+                  <p />
+                </div>
+              </div>
+            </div>
+            <div className="read">
+              {renderEditRead(howto, isEditor)}
+            </div>
+          </Col>
+        </div>
+        <div className="news_card_badge_s">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
+          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
+          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
+        </div>
+      </div>
+    </Col>
+  );
+};
+
+const NewsList = (param) => {
+  const { howtos } = param;
+  return howtos.length > 0 ? (
+    <Row>
+      <Col md={1} />
+      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
+        <Row>
+          {
+            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
+          }
+        </Row>
+      </Col>
+      <Col md={1} />
+    </Row>
+  ) : <div />;
+};
+
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
new file mode 100644
index 000000000..a503ce392
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
@@ -0,0 +1,67 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import uuid from 'uuid';
+
+const fa = klass => (<i className={klass} aria-hidden="true" />);
+const FaBtn = props => (
+  <OverlayTrigger placement={props.place} overlay={<Tooltip id={uuid.v4()}>{props.tip}</Tooltip>}>
+    <Button bsStyle={props.bsStyle} bsSize={props.bsSize} onClick={props.onClick} >
+      {props.txt}&nbsp;{fa(props.fa)}
+    </Button>
+  </OverlayTrigger>
+);
+FaBtn.propTypes = {
+  tip: PropTypes.string.isRequired,
+  txt: PropTypes.string.isRequired,
+  fa: PropTypes.string,
+  place: PropTypes.string,
+  bsStyle: PropTypes.string,
+  bsSize: PropTypes.string,
+  onClick: PropTypes.func,
+};
+FaBtn.defaultProps = {
+  fa: '',
+  place: 'top',
+  bsStyle: 'primary',
+  bsSize: 'small',
+  onClick: null,
+};
+
+const EditorBtn = props => (
+  <div className="editor-btn">
+    <FaBtn tip="Add Text Section" txt="Add" fa="fa fa-file-text-o" onClick={() => props.onClick('txt')} />
+    <FaBtn tip="Add Image Section" txt="Add" fa="fa fa-picture-o" onClick={() => props.onClick('img')} />
+  </div>
+);
+
+EditorBtn.propTypes = {
+  onClick: PropTypes.func,
+};
+
+EditorBtn.defaultProps = {
+  onClick: null,
+};
+
+const EditorBaseBtn = props => (
+  <div className="editor-btn">
+    {/* <FaBtn tip="Preview" txt="Preview" bsStyle="info" onClick={onClick} /> */}
+    <FaBtn tip="Save" txt="Save" bsStyle="success" onClick={() => props.onClick('save')} />
+    <FaBtn tip="Delete" txt="Delete" bsStyle="danger" onClick={() => props.onClick('delete')} />
+  </div>
+);
+
+EditorBaseBtn.propTypes = {
+  onClick: PropTypes.func,
+};
+
+EditorBaseBtn.defaultProps = {
+  onClick: null,
+};
+
+module.exports = {
+  FaBtn,
+  EditorBtn,
+  EditorBaseBtn,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
new file mode 100644
index 000000000..b1f1609f4
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+
+export default class EditorImage extends Component {
+  handleDrop(files) {
+    if (files && files.length > 0) {
+      this.props.onChange('pfad', files);
+    }
+  }
+  render() {
+    return (
+      <div style={{ backgroundColor: 'white' }}>
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          onDrop={files => this.handleDrop(files)}
+          className="dropzone"
+        >
+          {
+            this.props.pfad !== '' ?
+              <div className="image-container">
+                <img src={`/${this.props.editor_type}/${this.props.pfad}`} alt="" />
+              </div>
+              : <p>Drop Files, or Click to Select.</p>
+          }
+        </Dropzone>
+      </div>
+    );
+  }
+}
+
+EditorImage.propTypes = {
+  pfad: PropTypes.string,
+  onChange: PropTypes.func,
+  editor_type: PropTypes.string,
+};
+
+EditorImage.defaultProps = {
+  pfad: '',
+  onChange: null,
+  editor_type: '',
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
new file mode 100644
index 000000000..d3c05b6c5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import QuillEditor from '../../components/QuillEditor';
+
+export default class EditorRichText extends Component {
+  handleChange(e) {
+    this.props.onChange('quill', e);
+  }
+  render() {
+    return (
+      <div style={{ backgroundColor: 'white' }}>
+        <QuillEditor
+          value={this.props.quill}
+          onChange={e => this.handleChange(e)}
+          extraToolbarOptions={[['link'], [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]]}
+        />
+      </div>
+    );
+  }
+}
+
+EditorRichText.propTypes = {
+  quill: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+EditorRichText.defaultProps = {
+  quill: null,
+  onChange: null,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
new file mode 100644
index 000000000..1af6593d7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'react-bootstrap';
+import RepoHowToDragSource from '../RepoHowToDragSource';
+import RepoHowToDropTarget from '../RepoHowToDropTarget';
+import EditorRichText from '../RepoHowTo/EditorRichText';
+import EditorImage from '../RepoHowTo/EditorImage';
+import { FaBtn } from './EditorBtn';
+
+export default class EditorStelle extends Component {
+  handleChange(t, e) {
+    this.props.onChange(t, e, this.props.sid);
+  }
+
+  renderComponent() {
+    let label = '';
+    let component = <div />;
+    switch (this.props.stelle.art) {
+      case 'txt':
+        label = (<div className="editor-stelle">Text Section</div>);
+        component =
+          (<EditorRichText
+            quill={this.props.stelle.quill}
+            onChange={(t, e) => this.handleChange(t, e)}
+            sid={this.props.sid}
+            editor_type={this.props.editor_type}
+          />);
+        break;
+      case 'img':
+        label = (<div className="editor-stelle">Image Section</div>);
+        component =
+          (<EditorImage
+            pfad={this.props.stelle.pfad}
+            onChange={(t, e) => this.handleChange(t, e)}
+            sid={this.props.sid}
+            editor_type={this.props.editor_type}
+          />);
+        break;
+      default:
+    }
+
+    return (
+      <div>
+        {label}
+        {component}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col md={12} sm={12}>
+          <RepoHowToDropTarget
+            sid={this.props.sid}
+            stelle={this.props.stelle}
+            onDrop={this.props.onDrop}
+          />
+        </Col>
+        <Col md={12} sm={12}>
+          <div className="pull-right">
+            <FaBtn tip="remove this section" txt="" fa="fa fa-trash-o" bsStyle="danger" bsSize="xsmall" onClick={() => this.props.onRemove(this.props.sid)} />
+          </div>
+          <RepoHowToDragSource sid={this.props.sid} stelle={this.props.stelle} />
+          {this.renderComponent()}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+EditorStelle.propTypes = {
+  sid: PropTypes.number.isRequired,
+  stelle: PropTypes.shape({
+    art: PropTypes.string,
+    quill: PropTypes.object,
+    pfad: PropTypes.string,
+  }).isRequired,
+  onDrop: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  editor_type: PropTypes.string.isRequired,
+};
+
diff --git a/app/assets/javascripts/libHome/RepoHowToDragSource.js b/app/assets/javascripts/libHome/RepoHowToDragSource.js
new file mode 100644
index 000000000..0873b66a2
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToDragSource.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const listSource = {
+  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
+};
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
+
+export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
+
+RepoHowToDragSource.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowToDropTarget.js b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
new file mode 100644
index 000000000..09efb95a6
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DropTarget } from 'react-dnd';
+import DragDropItemTypes from '../components/DragDropItemTypes';
+
+const stelleTarget = {
+  drop(targetProps, monitor) {
+    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
+    const sourceProps = monitor.getItem();
+    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
+    if (targetTag.sid !== sourceTag.sid) {
+      targetProps.onDrop({ sourceTag, targetTag });
+    }
+  }
+};
+
+const stelleDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop()
+});
+
+
+class RepoHowToDropTarget extends Component {
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
+    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
+    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
+  }
+}
+
+export default DropTarget(
+  DragDropItemTypes.HOWTO,
+  stelleTarget, stelleDropCollect
+)(RepoHowToDropTarget);
+
+RepoHowToDropTarget.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired,
+  isOver: PropTypes.bool.isRequired,
+  canDrop: PropTypes.bool.isRequired,
+};
diff --git a/app/assets/javascripts/libHome/RepoHowToEditor.js b/app/assets/javascripts/libHome/RepoHowToEditor.js
new file mode 100644
index 000000000..7feca87b5
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToEditor.js
@@ -0,0 +1,435 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoHowToEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { howto } = this.state;
+    howto.article.push(stelle({ art: e }));
+    this.setState(howto);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { howto } = this.state;
+    const { article } = howto;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    howto.article = article;
+    this.setState(howto);
+  }
+
+  onStelleRemove(e) {
+    const { howto } = this.state;
+    howto.article.splice(e, 1);
+    this.setState(howto);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { howto } = this.state;
+    switch (art) {
+      case 'quill':
+        howto.article[sid].quill = e;
+        this.setState(howto);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.howto && state.howto.key) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, howto: { title: '', content: {}, article: [] }
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { howto } = this.state;
+    switch (type) {
+      case 'title':
+        howto.title = event.currentTarget.value;
+        break;
+      case 'content':
+        howto.content = event;
+        break;
+      case 'published_at':
+        howto.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        howto.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ howto });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { howto } = this.state;
+    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      howto.published_at = DateFormatDMYTime(howto.published_at);
+    }
+    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      howto.firstParagraph = extractIntro(howto.article);
+      ArticleFetcher.createOrUpdateHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              howto: { title: '', content: {}, article: [] },
+              message: { type: 'success', content: 'Send to How-To successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { howto } = this.state;
+      ArticleFetcher.deleteHowTo(howto)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { howto } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'howto')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          howto.article[sid].pfad = result.pfad_image;
+          this.setState(howto);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { howto } = this.state;
+    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>How-To Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            {
+              imageUrl === '' ?
+                <div style={{ textAlign: 'center' }}>
+                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+                </div>
+              :
+                <img
+                  src={imageUrl}
+                  style={{
+                    display: 'block',
+                    maxHeight: '100%',
+                    maxWidth: '100%',
+                  }}
+                  alt=""
+                />
+            }
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { howto } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'howto')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            howto.cover_image = result.cover_image;
+            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      howto,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
+    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
+    const stelles = howto.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="howto"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={howto}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>How-To Editor</b></h2>
+              <p>
+                Give Chemotion readers some advice
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={howto.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoHowToReader.js b/app/assets/javascripts/libHome/RepoHowToReader.js
new file mode 100644
index 000000000..4728c4c69
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoHowToReader.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoHowToReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.howto) {
+      this.setState(prevState => ({
+        ...prevState, howto: state.howto
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '';
+    const { howto } = this.state;
+    if (typeof (howto) !== 'undefined' && howto &&
+      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
+      imageUrl = `/howto/${howto.cover_image}`;
+    } else {
+      return (
+        <div style={{ textAlign: 'center', height: 'auto' }}>
+          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
+          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
+          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
+        </div>
+      );
+    }
+
+    return (
+      <span>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { howto } = this.state;
+    return (
+      <Row className="howto_page">
+        <Col md={2} />
+        <Col md={8} sm={12}>
+          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+            <Panel.Heading>
+              <Row>
+                <Col md={6} sm={12}>
+                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
+                  <div className="news_author">
+                    <i className="fa fa-user-circle" aria-hidden="true" />
+                    &nbsp;{howto.creator_name}
+                    <p />
+                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
+                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
+                  </div>
+                </Col>
+                <Col md={6} sm={12}>
+                  {this.coverImage()}
+                </Col>
+                <Col md={12} sm={12}>
+                  <div style={{ position: 'relative', marginTop: '10px' }}>
+                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
+                  </div>
+                </Col>
+              </Row>
+              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
+            </Panel.Heading>
+            <Panel.Body>
+              <Col lg={1} md={2}><div /></Col>
+              <Col lg={10} md={8} sm={12}>
+                <div className="news_quillviewer">
+                  {
+                    howto.article ?
+                    howto.article.map((s) => {
+                      if (s.art === 'txt') {
+                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                      }
+                      if (s.art === 'img') {
+                        return (
+                          <div key={uuid.v4()}>
+                            <img src={`/howto/${s.pfad}`} alt="" />
+                            <br />
+                          </div>
+                        );
+                      }
+                    }) : <div />
+                  }
+                </div>
+              </Col>
+              <Col lg={1} md={2}><div /></Col>
+            </Panel.Body>
+          </Panel>
+        </Col>
+        <Col md={2} />
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsEditor.js b/app/assets/javascripts/libHome/RepoNewsEditor.js
new file mode 100644
index 000000000..99218a3f8
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsEditor.js
@@ -0,0 +1,427 @@
+import React, { Component } from 'react';
+import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import moment from 'moment';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import NewsPreviewModal from '../components/common/NewsPreviewModal';
+import PublicStore from '../components/stores/PublicStore';
+import { ConfirmModal } from '../components/common/ConfirmModal';
+import Attachment from '../components/models/Attachment';
+import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
+import { contentToText } from '../components/utils/quillFormat';
+import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
+import EditorStelle from './RepoHowTo/EditorStelle';
+
+const extractIntro = (article) => {
+  const result = article.filter(a => a.art === 'txt');
+  if (result.length < 1) {
+    return '';
+  }
+  return (contentToText(result[0].quill) || '').slice(0, 1500);
+};
+
+const confirmText = (
+  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
+);
+
+const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
+
+export default class RepoNewsEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
+      message: { type: '', content: '' },
+      showPreview: false,
+      showDeleteModal: false
+    };
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onClickPreview = this.onClickPreview.bind(this);
+    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
+    this.onClickClose = this.onClickClose.bind(this);
+    this.onClickSave = this.onClickSave.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
+    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onEditorBtnClick(e) {
+    const { news } = this.state;
+    news.article.push(stelle({ art: e }));
+    this.setState(news);
+  }
+
+  onEditorBaseBtnClick(e) {
+    switch (e) {
+      case 'save':
+        this.onClickSave();
+        break;
+      case 'delete':
+        this.onShowDeleteModal();
+        break;
+      default:
+    }
+  }
+
+  onStelleDrop(e) {
+    const { news } = this.state;
+    const { article } = news;
+
+    article[e.sourceTag.sid] = e.targetTag.stelle;
+    article[e.targetTag.sid] = e.sourceTag.stelle;
+
+    news.article = article;
+    this.setState(news);
+  }
+
+  onStelleRemove(e) {
+    const { news } = this.state;
+    news.article.splice(e, 1);
+    this.setState(news);
+  }
+
+  onStelleInputChange(art, e, sid) {
+    const { news } = this.state;
+    switch (art) {
+      case 'quill':
+        news.article[sid].quill = e;
+        this.setState(news);
+        break;
+      case 'pfad':
+        this.handleImage(e, sid);
+        break;
+      default:
+        break;
+    }
+  }
+
+  onChange(state) {
+    if (state.news && state.news.key) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    } else {
+      this.setState(prevState => ({
+        ...prevState, news: NewsroomTemplate
+      }));
+    }
+  }
+
+  onInputChange(type, event) {
+    const { news } = this.state;
+    switch (type) {
+      case 'title':
+        news.title = event.currentTarget.value;
+        break;
+      case 'content':
+        news.content = event;
+        break;
+      case 'published_at':
+        news.published_at = event.currentTarget.value.trim();
+        break;
+      case 'updated_at':
+        news.updated_at = event.currentTarget.value.trim();
+        break;
+      default:
+        break;
+    }
+    this.setState({ news });
+  }
+
+  onClickCurrentTime(type) {
+    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
+    const wrappedEvent = { currentTarget: { value: currentTime } };
+    this.onInputChange(type, wrappedEvent);
+  }
+
+  onClickPreview() {
+    this.setState({ showPreview: true });
+  }
+
+  onClickClose() {
+    this.setState({ showPreview: false });
+  }
+
+  onClickSave() {
+    const { news } = this.state;
+    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+    if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      news.published_at = DateFormatDMYTime(news.published_at);
+    }
+    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
+
+    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
+    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
+      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
+    } else {
+      news.firstParagraph = extractIntro(news.article);
+      ArticleFetcher.createOrUpdate(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({
+              news: NewsroomTemplate,
+              message: { type: 'success', content: 'Send to Newsroom successfully!' }
+            });
+          }
+        });
+    }
+  }
+
+  onShowDeleteModal() {
+    this.setState({ showDeleteModal: true });
+  }
+
+  onClickDelete(isDelete) {
+    if (isDelete) {
+      const { news } = this.state;
+      ArticleFetcher.delete(news)
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
+          }
+        });
+    }
+    this.setState({ showDeleteModal: false });
+  }
+
+  handleImage(files, sid) {
+    const { news } = this.state;
+    const image = Attachment.fromFile(files[0]);
+    ArticleFetcher.updateEditorImage(image, 'newsroom')
+      .then((result) => {
+        if (result.error) {
+          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+        } else {
+          news.article[sid].pfad = result.pfad_image;
+          this.setState(news);
+        }
+      });
+  }
+
+  handleDismiss() {
+    this.setState({ message: { type: '', content: '' } });
+  }
+
+  deleteNewButton() {
+    const { news } = this.state;
+    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
+      return (
+        <span />
+      );
+    }
+    return (
+      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
+        Delete
+      </Button>
+    );
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+
+    return (
+      <div>
+        <h4><b>News Cover</b></h4>
+        <h5>Click on the image to change the cover</h5>
+        <span style={{ width: '400px', height: '268px' }}>
+          <Dropzone
+            onDrop={files => this.handleFileDrop(files)}
+            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
+          >
+            <img
+              src={imageUrl}
+              style={{
+                display: 'block',
+                maxHeight: '100%',
+                maxWidth: '100%',
+              }}
+              alt=""
+            />
+          </Dropzone>
+        </span>
+      </div>
+    );
+  }
+
+  handleFileDrop(files) {
+    const { news } = this.state;
+    if (files && files.length > 0) {
+      const image = Attachment.fromFile(files[0]);
+      ArticleFetcher.updateEditorImage(image, 'newsroom')
+        .then((result) => {
+          if (result.error) {
+            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
+          } else {
+            news.cover_image = result.cover_image;
+            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
+          }
+        });
+    }
+  }
+
+  render() {
+    const {
+      news,
+      message,
+      showPreview,
+      showDeleteModal
+    } = this.state;
+    const renderAlert = (m) => {
+      return (
+        m.type !== '' ?
+          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
+            <p>
+              {m.content}
+            </p>
+          </Alert>
+          :
+          <div />
+      );
+    };
+
+    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
+    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
+
+    const stelles = news.article.map((s, i) => {
+      return (
+        <EditorStelle
+          key={i}
+          sid={i}
+          stelle={s}
+          onDrop={e => this.onStelleDrop(e)}
+          onRemove={e => this.onStelleRemove(e)}
+          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
+          editor_type="newsroom"
+        />
+      );
+    });
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
+        <NewsPreviewModal
+          showModal={showPreview}
+          article={news}
+          onClick={this.onClickClose}
+        />
+        <ConfirmModal
+          showModal={showDeleteModal}
+          title="Are you sure ?"
+          content={confirmText}
+          onClick={this.onClickDelete}
+        />
+        <Jumbotron style={{
+          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
+        }}
+        >
+          <Row>
+            <Col lg={1} />
+            <Col lg={8} md={8}>
+              {renderAlert(message)}
+              <h2><b>Newsroom Editor</b></h2>
+              <p>
+                Chemotion NEWS
+              </p>
+              <br />
+              <Form>
+                <FormGroup controlId="frmNewsTitile">
+                  <ControlLabel>
+                    <div className="newseditor">
+                      <div className="required">*&nbsp;</div>
+                      <div className="article_title">Title</div>
+                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
+                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
+                    </div>
+                  </ControlLabel>
+                  <FormControl
+                    placeholder="Title"
+                    value={news.title || ''}
+                    onChange={event => this.onInputChange('title', event)}
+                    maxLength={100}
+                  />
+                </FormGroup>
+                <ControlLabel>
+                  <div className="newseditor">
+                    <div className="required">*&nbsp;</div>
+                    <div className="article_title">Content</div>
+                  </div>
+                </ControlLabel>
+                <div className="editor-field">
+                  {stelles}
+                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
+                </div>
+                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
+              </Form>
+            </Col>
+            <Col lg={3} md={4}>
+              <div>
+                {this.coverImage()}
+                <br />
+                <FormGroup>
+                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tPublished}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('published_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      value={tUpdated}
+                      placeholder="DD/MM/YYYY hh:mm:ss"
+                      onChange={event => this.onInputChange('updated_at', event)}
+                    />
+                    <InputGroup.Button>
+                      <Button
+                        active
+                        style={{ padding: '6px' }}
+                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
+                      >
+                        <i className="fa fa-clock-o" />
+                      </Button>
+                    </InputGroup.Button>
+                  </InputGroup>
+                </FormGroup>
+                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
+                <EditorTips />
+              </div>
+            </Col>
+          </Row>
+        </Jumbotron>
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsReader.js b/app/assets/javascripts/libHome/RepoNewsReader.js
new file mode 100644
index 000000000..0e83e02d7
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsReader.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { Panel, Row, Col } from 'react-bootstrap';
+import uuid from 'uuid';
+import PublicStore from '../components/stores/PublicStore';
+import QuillViewer from '../components/QuillViewer';
+import { DateFormatYMDLong } from '../libHome/RepoCommon';
+
+export default class RepoNewsReader extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.news) {
+      this.setState(prevState => ({
+        ...prevState, news: state.news
+      }));
+    }
+  }
+
+  coverImage() {
+    let imageUrl = '/images/chemnews.png';
+    const { news } = this.state;
+    if (typeof (news) !== 'undefined' && news &&
+      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
+      imageUrl = `/newsroom/${news.cover_image}`;
+    }
+    return (
+      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
+        <img
+          src={imageUrl}
+          style={{
+            display: 'block',
+            maxHeight: '100%',
+            maxWidth: '100%',
+          }}
+          alt=""
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { news } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
+        <Col md={12} >
+          <Col md={2} />
+          <Col md={8} sm={12}>
+            <div className="chemotion_news">
+              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
+              &nbsp;Chemotion&nbsp;News
+            </div>
+          </Col>
+          <Col md={2} />
+        </Col>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
+                <Panel.Heading>
+                  <Row>
+                    <Col md={6} sm={12}>
+                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
+                      <div className="news_author">
+                        <i className="fa fa-user-circle" aria-hidden="true" />
+                        &nbsp;{news.creator_name}
+                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
+                      </div>
+                    </Col>
+                    <Col md={6} sm={12}>
+                      {this.coverImage()}
+                    </Col>
+                  </Row>
+                  <br />
+                  <div className="heading_separator" />
+                </Panel.Heading>
+                <Panel.Body>
+                  <Col lg={1} md={2}><div /></Col>
+                  <Col lg={10} md={8} sm={12}>
+                    <div className="news_quillviewer">
+                      {
+                        news.article ?
+                          news.article.map((s) => {
+                            if (s.art === 'txt') {
+                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
+                            }
+                            if (s.art === 'img') {
+                              return (
+                                <div key={uuid.v4()}>
+                                  <img src={`/newsroom/${s.pfad}`} alt="" />
+                                  <br />
+                                </div>
+                              );
+                            }
+                          }) : <div />
+                      }
+                    </div>
+                  </Col>
+                  <Col lg={1} md={2}><div /></Col>
+                </Panel.Body>
+              </Panel>
+            </Col>
+            <Col md={2} />
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoNewsroom.js b/app/assets/javascripts/libHome/RepoNewsroom.js
new file mode 100644
index 000000000..19e9f6020
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoNewsroom.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { orderBy, slice } from 'lodash';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import ArticleFetcher from '../components/fetchers/ArticleFetcher';
+import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
+
+const renderEditRead = (article, isEditor) => {
+  if (isEditor === true) {
+    return (
+      <div className="readedit">
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
+        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="readedit">
+      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
+    </div>
+  );
+};
+
+
+const mainImage = (article) => {
+  let imageUrl = '/images/chemnews.png';
+  if (typeof (article) !== 'undefined' && article
+   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
+    imageUrl = `/newsroom/${article.cover_image}`;
+  }
+  return (
+    <div style={{ maxWidth: '100%', height: 'auto' }}>
+      <img
+        src={imageUrl}
+        style={{
+          display: 'block',
+          width: '100%',
+          height: 'auto',
+        }}
+        alt=""
+      />
+    </div>
+  );
+};
+
+export default class RepoNewsroom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      articles: PublicStore.getState().articles || [],
+      isEditor: false
+    };
+    this.onChange = this.onChange.bind(this);
+    this.initial = this.initial.bind(this);
+  }
+
+  componentDidMount() {
+    this.initial();
+    PublicStore.listen(this.onChange);
+    PublicActions.articles();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    if (state.articles) {
+      this.setState(prevState => ({
+        ...prevState, articles: state.articles
+      }));
+    }
+    if (state.isEditor) {
+      this.setState(prevState => ({
+        ...prevState, isEditor: state.isEditor
+      }));
+    }
+  }
+
+  initial() {
+    ArticleFetcher.initial()
+      .then((result) => {
+        this.setState({
+          isEditor: result.is_article_editor
+        });
+      });
+  }
+
+  render() {
+    let { articles } = this.state;
+    const { isEditor } = this.state;
+    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
+    articles = orderBy(
+      articles,
+      (o) => {
+        if (!o.published_at || o.published_at === '') return o.created_at;
+        return o.published_at;
+      },
+      'desc'
+    );
+
+    return articles.length > 0 ? (
+      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
+        <Col md={12}>
+          <Row>
+            <Col md={2} />
+            <Col md={8} sm={12}>
+              <LatestNews article={articles[0]} isEditor={isEditor} />
+            </Col>
+            <Col md={2} />
+          </Row>
+          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
+        </Col>
+      </Row>
+    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
+  }
+}
+
+const LatestNews = ({ article, isEditor }) => {
+  return (
+    <div className="news_latest_block">
+      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
+      <Col md={4} sm={12}>{mainImage(article)}</Col>
+      <Col md={8} sm={12}>
+        <Col md={12} sm={12}>
+          <span className="news_title">{article.title}</span>
+          <div className="news_content">
+            <p />
+            {article.firstParagraph}
+            <p />
+          </div>
+          <div>
+            {renderEditRead(article, isEditor)}
+          </div>
+        </Col>
+        <Col md={12} sm={12}>
+          <div className="heading_separator" />
+          <div className="news_author">
+            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
+            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
+          </div>
+        </Col>
+      </Col>
+    </div>
+  );
+};
+
+const NewsList = ({ articles, isEditor }) => {
+  return articles.length > 0 ? (
+    <Row>
+      <Col md={2} />
+      <Col md={8} sm={12}>
+        <Row>
+          <div className="news_time_box">
+            {
+              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
+            }
+          </div>
+        </Row>
+      </Col>
+      <Col md={2} />
+    </Row>
+  ) : <div />;
+};
+
+const NewsTBox = ({ article, isEditor }) => {
+  return (
+    <ul>
+      <li>
+        <span />
+        <div className="title">{article.title}</div>
+        <div className="content">{article.firstParagraph}</div>
+
+        <div className="author">
+          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
+          {renderEditRead(article, isEditor)}
+        </div>
+        <div className="created_at">
+          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
+        </div>
+      </li>
+    </ul>
+  );
+};
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
new file mode 100644
index 000000000..9bc89e80f
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -0,0 +1,747 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import {
+  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
+  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
+  FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
+  Tabs, Tab, Popover
+} from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import UIActions from '../components/actions/UIActions';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import PubchemLabels from '../components/PubchemLabels';
+import RepoElementDetails from './RepoElementDetails';
+import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
+import PublicFetcher from '../components/fetchers/PublicFetcher';
+import AutoCompleteInput from '../components/search/AutoCompleteInput';
+import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
+import Formula from '../components/common/Formula';
+
+const svgTag = (path, klassName, isPubElement) => {
+  const popHover = (
+    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
+      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
+    </Popover>
+  );
+  return isPubElement ? (
+    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
+      <div><SVG src={path} className={klassName} key={path} /></div>
+    </OverlayTrigger>
+  ) : <SVG src={path} className={klassName} key={path} />;
+};
+
+const pubchemTag = (molecule) => {
+  if (molecule && molecule.tag &&
+    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
+    return {
+      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
+    };
+  }
+  return false;
+};
+
+const renderReaction = (element, currentElement, isPubElement) => {
+  const listClass = (currentElement !== null && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <tr
+      key={`list-reaction-${element.type}-${element.id}`}
+      className={listClass}
+      onClick={() => PublicActions.displayReaction(element.id)}
+    >
+      <td style={{ position: 'relative' }}>
+        <div>
+          {svgTag(element.svgPath, 'reaction', isPubElement)}
+        </div>
+      </td>
+      <td>
+        {element.xvial_count && element.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null}
+      </td>
+    </tr>
+  );
+};
+
+const hints = {
+  reaction: {
+    title: 'Reactions',
+    content: 'Reaction entries contain information on the reaction details, the reagents, reactants and products of a reaction and a description of the protocols. Successful reactions are proven by the characterization of the obtained target compounds.'
+  },
+  sample: {
+    title: 'Samples',
+    content: 'Sample entries contain information and properties of the provided sample as well as the characterization of the sample by analytical measurements.'
+  },
+  scheme: {
+    title: 'Scheme-only reactions',
+    content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
+  }
+};
+
+const overTip = tab => (
+  <Tooltip id="t_tip">
+    <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;{hints[tab].content}
+  </Tooltip>
+);
+
+const TabTip = props => (
+  <OverlayTrigger
+    placement="bottom"
+    overlay={overTip(props.tab)}
+  >
+    <div>{hints[props.tab].title}</div>
+  </OverlayTrigger>
+);
+
+export default class RepoPubl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // ...PublicStore.getState(),
+      page: 1,
+      perPage: 10,
+      showStructureEditor: false,
+      isSearch: false,
+      defaultSearchValue: null,
+      selectType: 'all',
+      inputDisabled: false,
+      queryMolfile: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      listType: 'reaction',
+      advFlag: false,
+      advType: 'Authors',
+      advValue: [],
+      selectUsers: [],
+      key: uuid.v4(),
+      showSearch: false
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.changeSort = this.changeSort.bind(this);
+    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
+    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
+    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
+    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
+    this.advSearchClick = this.advSearchClick.bind(this);
+    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
+    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleShowSearch = this.handleShowSearch.bind(this);
+  }
+
+  componentDidMount() {
+    PublicActions.selectPublicCollection.defer();
+    PublicStore.listen(this.onChange);
+    PublicActions.getReactions.defer();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  handleSearchTypeChange(e) {
+    this.setState({ searchType: e.target && e.target.value });
+  }
+
+  handleStructureEditorCancel() {
+    this.setState({ isSearch: false });
+    this.hideStructureEditor();
+  }
+
+  showStructureEditor() {
+    this.setState({ showStructureEditor: true });
+  }
+
+  hideStructureEditor() {
+    this.setState({ showStructureEditor: false });
+  }
+
+  showAdvancedSearch() {
+    this.setState({ advFlag: true });
+  }
+
+  handleSelectAdvType(val) {
+    if (val) { this.setState({ advType: val, advValue: null }); }
+  }
+
+  onPerPageChange(e) {
+    this.setState({ perPage: e.target.value }, () => this.getList());
+  }
+
+  getList(ps = {}) {
+    const {
+      advFlag, advType, advValue,
+      isSearch,
+      selectType, selection,
+      page, perPage,
+    } = this.state;
+    let params = {
+      advFlag,
+      advType,
+      advValue,
+      elementType: selectType,
+      page,
+      perPage,
+      selection,
+      ...ps
+    };
+    if (isSearch) {
+      switch (this.state.listType) {
+        case 'reaction':
+          PublicActions.getSearchReactions(params);
+          break;
+        case 'sample':
+          PublicActions.getSearchMolecules(params);
+          break;
+        case 'scheme':
+          params = { ...params, collectionId: 'schemeOnly' };
+          PublicActions.getSearchReactions(params);
+          break;
+        default:
+      }
+      return;
+    }
+    switch (this.state.listType) {
+      case 'reaction':
+        params = { ...params, schemeOnly: false };
+        PublicActions.getReactions(params);
+        break;
+      case 'sample':
+        PublicActions.getMolecules(params);
+        break;
+      case 'scheme':
+        params = { ...params, schemeOnly: true };
+        PublicActions.getReactions(params);
+        break;
+      default:
+        PublicActions.getReactions(params);
+    }
+    UIActions.clearSearchSelection();
+  }
+
+  handleClearSearchSelection() {
+    this.setState({
+      defaultSearchValue: null,
+      searchType: 'similar',
+      tanimotoThreshold: 0.7,
+      queryMolfile: null,
+      isSearch: false,
+      key: uuid.v4(),
+      page: 1
+    }, () => this.getList());
+  }
+
+  handleElementSelection(event) {
+    this.setState({ selectType: event.toLowerCase() });
+  }
+
+  handleShowSearch() {
+    const { showSearch, advFlag } = this.state;
+    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
+  }
+
+  closeAdvancedSearch() {
+    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
+  }
+
+
+  loadAdvValuesByName(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+
+  changeSort(e) {
+    this.setState({
+      // isSearch: false,
+      // defaultSearchValue: null,
+      page: 1,
+      listType: e
+    }, () => this.getList());
+  }
+
+  renderMolecule(molecule, isPubElement) {
+    const {
+      advFlag, advType, advValue, currentElement
+    } = this.state;
+    const pubchemInfo = pubchemTag(molecule);
+    const svgPathSample = molecule.sample_svg_file
+      ? `/images/samples/${molecule.sample_svg_file}`
+      : `/images/molecules/${molecule.molecule_svg_file}`;
+    const listClass = (currentElement !== null && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
+    return (
+      <tr
+        key={molecule.id}
+        className={listClass}
+        onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}
+      >
+        <td
+          colSpan="2"
+          style={{ position: 'relative' }}
+        >
+          <div style={{ float: 'left' }}>
+            {svgTag(svgPathSample, 'molecule', isPubElement)}
+          </div>
+          <div style={{ paddingLeft: 5, wordWrap: 'break-word' }}>
+            <h4> <Formula formula={molecule.sum_formular} /> </h4>
+            <h4>
+              {molecule.iupac_name}
+              <span className="repo-pub-list-icons">
+                {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
+                {molecule.xvial_count && molecule.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null }
+              </span>
+            </h4>
+          </div>
+        </td>
+      </tr>
+    );
+  }
+
+  renderMenuItems() {
+    const elements = [
+      'All', 'Samples', 'Reactions'
+    ];
+
+    const menu = elements.map(element => (
+      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
+        {element}
+      </MenuItem>
+    ));
+
+    return menu;
+  }
+
+
+  handleTanimotoChange(e) {
+    const val = e.target && e.target.value;
+    if (!isNaN(val - val)) {
+      this.setState({ tanimotoThreshold: val });
+    }
+  }
+
+  handleSelectionChange(selection) {
+    this.setState({
+      isSearch: true,
+      selection,
+      page: 1
+    }, () => this.getList());
+  }
+
+  structureSearch(molfile) {
+    const { searchType, tanimotoThreshold } = this.state;
+
+    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
+    const selection = {
+      molfile,
+      search_type: searchType,
+      tanimoto_threshold: tanimoto,
+      search_by_method: 'structure',
+      structure_search: true
+    };
+
+    this.setState(
+      {
+        isSearch: true,
+        selection,
+        page: 1,
+        defaultSearchValue: 'structure',
+        queryMolfile: molfile
+      },
+      () => this.getList()
+    );
+  }
+
+  handleStructureEditorSave(molfile) {
+    this.hideStructureEditor();
+    if (molfile) {
+      const molfileLines = molfile.match(/[^\r\n]+/g);
+      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
+        this.structureSearch(molfile);
+      } else {
+        // TODO: clear search?
+      }
+    }
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  onPaginationSelect(eventKey) {
+    const { pages } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      this.setState({ page: eventKey }, () => this.getList());
+    }
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+
+  renderSwitch() {
+    const { listType } = this.state;
+    return (
+      <Tabs
+        activeKey={listType}
+        onSelect={this.changeSort}
+        id="element-list-type"
+      >
+        <Tab eventKey="reaction" title={<TabTip tab="reaction" />} />
+        <Tab eventKey="sample" title={<TabTip tab="sample" />} />
+        <Tab eventKey="scheme" title={<TabTip tab="scheme" />} />
+      </Tabs>
+    );
+  }
+
+  renderSelectValues() {
+    const { advValue } = this.state;
+    return (
+      <Select.Async
+        multi
+        isLoading
+        backspaceRemoves
+        value={advValue}
+        valueKey="value"
+        labelKey="label"
+        loadOptions={this.loadAdvValuesByName}
+        onChange={this.handleSelectAdvValue}
+      />
+    );
+  }
+
+  handleSelectAdvValue(val) {
+    if (val) {
+      this.setState({ advValue: val });
+    }
+  }
+
+  advSearchClick() {
+    this.setState({ page: 1 }, () => this.getList());
+  }
+
+  renderAdvancedSearch() {
+    const { advFlag, advType, advValue } = this.state;
+    if (advFlag === true) {
+      this.listOptions = [
+        {
+          value: 'Authors',
+          label: 'by authors'
+        },
+        {
+          value: 'Ontologies',
+          label: 'by analysis type'
+        }
+      ];
+      return (
+        <div className="home-adv-search">
+          <div>
+            <Select
+              simpleValue
+              searchable={false}
+              options={this.listOptions}
+              placeholder="Select search field"
+              clearable={false}
+              valueKey="value"
+              labelKey="label"
+              onChange={this.handleSelectAdvType}
+              defaultValue="Authors"
+              value={advType}
+              className="o-author"
+            />
+          </div>
+          <div>
+            <Select.Async
+              multi
+              isLoading
+              backspaceRemoves
+              value={advValue}
+              valueKey="value"
+              labelKey="label"
+              loadOptions={this.loadAdvValuesByName}
+              onChange={this.handleSelectAdvValue}
+              className="o-name"
+            />
+          </div>
+          <div className="btns-grp">
+            <ButtonGroup>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
+                <Button onClick={this.advSearchClick}>
+                  <i className="fa fa-search" />
+                </Button>
+              </OverlayTrigger>
+              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
+                <Button onClick={this.closeAdvancedSearch}>
+                  <i className="fa fa-times" />
+                </Button>
+              </OverlayTrigger>
+            </ButtonGroup>
+          </div>
+        </div>
+      );
+    }
+    return (<div />);
+  }
+
+  renderSearch() {
+    const { isSearch, defaultSearchValue } = this.state;
+    const customClass = '.btn-unified';
+
+    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
+    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
+
+    const buttonAfter = (
+      <ButtonGroup className="home-search">
+        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
+          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
+            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
+          </Button>
+        </OverlayTrigger>
+        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
+          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
+            <i className="fa fa-times" />
+          </Button>
+        </OverlayTrigger>
+      </ButtonGroup>
+    );
+
+    const submitAddons = (
+      <Grid>
+        <Row>
+          <Col sm={6} md={4}>
+            <Form inline>
+              <Radio
+                ref={(input) => { this.searchSimilarRadio = input; }}
+                value="similar"
+                checked={this.state.searchType === 'similar'}
+                onChange={e => this.handleSearchTypeChange(e)}
+              >
+                &nbsp; Similarity Search &nbsp;
+              </Radio>
+              &nbsp;&nbsp;
+              <FormControl
+                style={{ width: '40%' }}
+                type="text"
+                value={this.state.tanimotoThreshold}
+                ref={(input) => { this.searchTanimotoInput = input; }}
+                onChange={e => this.handleTanimotoChange(e)}
+              />
+            </Form>
+          </Col>
+          <Col sm={4} md={2}>
+            <Radio
+              ref={(input) => { this.searchSubstructureRadio = input; }}
+              value="sub"
+              checked={this.state.searchType === 'sub'}
+              onChange={e => this.handleSearchTypeChange(e)}
+            >
+              Substructure Search
+            </Radio>
+          </Col>
+        </Row>
+      </Grid>
+    );
+
+    const inputAttributes = {
+      placeholder: 'IUPAC, InChI, SMILES, ...',
+      style: { minWidth: 168, maxWidth: 268 }
+    };
+
+    const suggestionsAttributes = {
+      style: {
+        marginTop: 15,
+        width: 398,
+        maxHeight: 400
+      }
+    };
+
+    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
+
+    const innerDropdown = (
+      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
+        <DropdownButton
+          style={{ borderRadius: 'unset' }}
+          id="search-inner-dropdown"
+          title={this.state.selectType === 'all' ? 'All' :
+          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
+        >
+          {this.renderMenuItems()}
+        </DropdownButton>
+      </OverlayTrigger>
+    );
+
+    return (
+      <div className="chemotion-search">
+        <div className="search-structure-draw">
+          <StructureEditorModal
+            showModal={this.state.showStructureEditor}
+            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
+            onCancel={this.handleStructureEditorCancel}
+            molfile={this.state.queryMolfile}
+            submitBtnText="Search"
+            submitAddons={submitAddons}
+          />
+        </div>
+        {
+          this.state.showSearch ?
+          (
+            <span>
+              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
+              </Button>
+              <div className="search-autocomplete">
+                <AutoCompleteInput
+                  key={this.state.key}
+                  inputAttributes={inputAttributes}
+                  inputDisabled={isSearch}
+                  defaultSearchValue={defaultSearchValue}
+                  suggestionsAttributes={suggestionsAttributes}
+                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
+                    this.state.selectType.toLowerCase(), input, 'public', false)}
+                  ref={(input) => { this.autoComplete = input; }}
+                  onSelectionChange={selection => this.handleSelectionChange(selection)}
+                  buttonBefore={innerDropdown}
+                  buttonAfter={buttonAfter}
+                />
+              </div>
+            </span>
+          ) :
+          (
+            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
+              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
+            </Button>
+          )
+        }
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      molecules, listType, reactions, currentElement, showSearch
+    } = this.state;
+
+    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
+      this.state.currentElement.publication.published_at) || (
+      this.state.currentElement && this.state.currentElement.published_samples
+      && this.state.currentElement.published_samples.length > 0 &&
+      this.state.currentElement.published_samples[0].published_at
+    )));
+
+    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
+
+    const elementList = () => {
+      switch (listType) {
+        case 'reaction':
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+        case 'sample':
+          return (molecules || []).map(m => this.renderMolecule(m, isPubElement));
+        case 'scheme':
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+        default:
+          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
+      }
+    };
+
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={isPubElement === true ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
+            <Navbar.Form pullLeft>
+              {this.renderSearch()}
+            </Navbar.Form>
+            <Navbar.Form pullLeft>
+              {this.renderAdvancedSearch()}
+            </Navbar.Form>
+            <Navbar.Form style={{ marginBottom: 'unset' }} pullRight>
+              {this.renderSwitch()}
+            </Navbar.Form>
+          </Navbar>
+
+          <div className={listClass} style={{ backgroundColor: '#f5f5f5' }} >
+            <Table className="sample-entries">
+              <tbody>
+                {elementList()}
+              </tbody>
+            </Table>
+          </div>
+          <div className="list-container-bottom">
+            <Row>
+              <Col sm={8}>{this.pagination()}</Col>
+              <Col sm={4}>{this.perPageInput()}</Col>
+            </Row>
+          </div>
+        </Col>
+        <Col
+          md={isPubElement === true}
+          // style={this.state.currentElement ? {} : { display: 'none' }}
+        >
+          <div className="public-element">
+            <RepoElementDetails />
+          </div>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
new file mode 100644
index 000000000..cba91dbfc
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -0,0 +1,537 @@
+import React, { Component } from 'react';
+import {
+  Panel,
+  Row,
+  Col,
+  Jumbotron,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { head, filter } from 'lodash';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AuthorList,
+  AuthorTitle,
+  AffiliationList,
+  CalcDuration,
+  ChemotionId,
+  ClosePanel,
+  CommentBtn,
+  ContributorInfo,
+  DateInfo,
+  Doi,
+  ReactionTable,
+  ReactionRinChiKey,
+  ReactionProperties,
+  ReactionTlc,
+  RenderAnalysisHeader,
+  RenderPublishAnalysesPanel,
+  IconLicense,
+  IconToMyDB,
+  AnalysesTypeJoinLabel,
+  SchemeWord,
+  resizableSvg
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from '../components/actions/PublicActions';
+import QuillViewer from '../components/QuillViewer';
+import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
+import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import RepoCommentModal from '../components/common/RepoCommentModal';
+import RepoReviewModal from '../components/common/RepoReviewModal';
+import RepoUserComment from '../components/common/RepoUserComment';
+import RepoPublicComment from '../components/common/RepoPublicComment';
+import Sample from '../components/models/Sample';
+
+export default class RepoReactionDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showScheme: true,
+      showRinchi: false,
+      showProp: true,
+      showTlc: true,
+      showSA: true,
+      showRA: {},
+      showReviewModal: false,
+      btnAction: '',
+      showCommentModal: false,
+      commentField: '',
+      originInfo: ''
+    };
+
+    this.toggleScheme = this.toggleScheme.bind(this);
+    this.toggleRinchi = this.toggleRinchi.bind(this);
+    this.toggleProp = this.toggleProp.bind(this);
+    this.toggleTlc = this.toggleTlc.bind(this);
+    this.toggleSA = this.toggleSA.bind(this);
+    this.toggleRA = this.toggleRA.bind(this);
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  toggleScheme() {
+    const { showScheme } = this.state;
+    this.setState({ showScheme: !showScheme });
+  }
+
+  toggleRinchi() {
+    const { showRinchi } = this.state;
+    this.setState({ showRinchi: !showRinchi });
+  }
+
+  toggleProp() {
+    const { showProp } = this.state;
+    this.setState({ showProp: !showProp });
+  }
+
+  toggleTlc() {
+    const { showTlc } = this.state;
+    this.setState({ showTlc: !showTlc });
+  }
+
+  toggleSA() {
+    const { showSA } = this.state;
+    this.setState({ showSA: !showSA });
+  }
+
+  toggleRA(idx = -1) {
+    const { showRA } = this.state;
+    if (idx in showRA && showRA[idx] === false) {
+      showRA[idx] = true;
+    } else {
+      showRA[idx] = false;
+    }
+    this.setState({ showRA });
+  }
+
+  handleToggle(type) {
+    switch (type) {
+      case 'Scheme':
+        this.toggleScheme();
+        break;
+      case 'Rinchi':
+        this.toggleRinchi();
+        break;
+      case 'Prop':
+        this.toggleProp();
+        break;
+      default:
+        break;
+    }
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    this.setState({ showReviewModal, btnAction });
+  }
+
+  handleSubmitReview(elementId, comments, comment, action) {
+    LoadingActions.start();
+    PublicActions.reviewPublish(elementId, 'reaction', comments, comment, action);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = comment;
+    cinfo[field].origInfo = origInfo;
+
+    PublicActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  updateRepoXvial() {
+    PublicActions.displayReaction(this.props.reaction.id);
+    PublicActions.refreshPubElements('Reactions');
+  }
+
+  reactionInfo(reaction) {
+    const {
+      showScheme, showRinchi, showProp, showTlc
+    } = this.state;
+    const {
+      canComment,
+      reviewLevel,
+      history
+    } = this.props;
+
+    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
+    const content = reaction.description;
+    const additionInfo = reaction.observation;
+
+    const descContent = (content && content.ops && content.ops.length > 0
+      && content.ops[0].insert) ? content.ops[0].insert.trim() : '';
+    let descQV = (
+      <span><b>Description:</b><QuillViewer value={content} preview />
+      </span>);
+    if (descContent === '') descQV = '';
+
+    const addinfoContent = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 &&
+      additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim() : '';
+    let addQV = (
+      <span><b>Additional information for publication and purification details:</b>
+        <QuillViewer value={additionInfo} preview />
+      </span>);
+    if (addinfoContent === '') addQV = '';
+
+    const temperature = reaction.temperature ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : '';
+    const duration = CalcDuration(reaction);
+    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
+    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${reaction.rf_value || ''}]; TLC-Description: [${reaction.tlc_description || ''}]`;
+
+    const bodyAttrs = {
+      style: {
+        fontSize: '90%',
+        paddingBottom: 'unset'
+      }
+    };
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+      reaction.publication.taggable_data.scheme_only === true) || false;
+    if (schemeOnly) {
+      if (canComment) {
+        return (
+          <RepoReactionSchemeInfo
+            reaction={reaction}
+            svgPath={svgPath}
+            showScheme={showScheme}
+            showRinchi={showRinchi}
+            showProp={showProp}
+            bodyAttrs={bodyAttrs}
+            onToggle={this.handleToggle}
+            reviewLevel={reviewLevel}
+            history={history}
+            onComment={this.handleCommentBtn}
+            propInfo={properties}
+            canComment={canComment}
+          />
+        );
+      }
+      return (
+        <RepoReactionSchemeInfo
+          reaction={reaction}
+          svgPath={svgPath}
+          showScheme={showScheme}
+          showRinchi={showRinchi}
+          showProp={showProp}
+          bodyAttrs={bodyAttrs}
+          onToggle={this.handleToggle}
+          canComment={canComment}
+        />
+      );
+    }
+    return (
+      <Panel style={{ marginBottom: '4px' }}>
+        <Panel.Body style={{ paddingBottom: '1px' }}>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              {resizableSvg(svgPath)}
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={this.handleCommentBtn} />
+              <ReactionTable
+                reaction={reaction}
+                toggle={this.toggleScheme}
+                show={showScheme}
+                isPublic
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <div className="desc small-p">
+                <CommentBtn {...this.props} field="Description" orgInfo={descContent} onShow={this.handleCommentBtn} />
+                {descQV}
+              </div>
+              <div className="desc small-p">
+                <CommentBtn {...this.props} field="Additional information" orgInfo={addinfoContent} onShow={this.handleCommentBtn} />
+                {addQV}
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <ReactionRinChiKey
+                reaction={reaction}
+                toggle={this.toggleRinchi}
+                show={showRinchi}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="Properties" orgInfo={properties} onShow={this.handleCommentBtn} />
+              <ReactionProperties
+                reaction={reaction}
+                toggle={this.toggleProp}
+                show={showProp}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} md={12} lg={12}>
+              <CommentBtn {...this.props} field="TLC-Control" orgInfo={tlc} onShow={this.handleCommentBtn} />
+              <ReactionTlc
+                reaction={reaction}
+                toggle={this.toggleTlc}
+                show={showTlc}
+                bodyAttrs={bodyAttrs}
+              />
+            </Col>
+          </Row>
+        </Panel.Body>
+      </Panel>
+    );
+  }
+
+  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false, isReviewer = false) {
+    if (typeof (container) === 'undefined' || !container) {
+      return <span />;
+    }
+
+    const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
+    const show = this.state.showRA[idx];
+    if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
+      return <div />;
+    }
+    const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
+    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} /> : <span />;
+    const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
+    const analysesView = analyses.map((analysis) => {
+      const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
+      const anaInfo = (this.props.reaction.infos && this.props.reaction.infos.ana_infos && this.props.reaction.infos.ana_infos[analysis.id]) || '';
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.handleCommentBtn} />
+          <RenderPublishAnalysesPanel
+            key={`${type}_${analysis.id}`}
+            userInfo={anaInfo}
+            analysis={analysis}
+            type="Container"
+            pageType="reactions"
+            pageId={this.props.reaction.id}
+            isPublic={this.props.isPublished}
+            isLogin={isLogin}
+            isReviewer={isReviewer}
+            element={specSample}
+          />
+        </span>
+      );
+    });
+
+    return (
+      <div>
+        <span
+          role="presentation"
+          className="label label-default"
+          style={{
+            backgroundColor: '#777777',
+            color: 'white',
+            fontSize: 'smaller',
+            fontWeight: 'bold',
+            cursor: 'pointer'
+          }}
+          onClick={() => this.toggleRA(idx)}
+        >
+          Analyses &nbsp;
+          <i className={`glyphicon ${show}`} />
+        </span>
+        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+          {AnalysesTypeJoinLabel(analyses, type)}
+        </span>
+        <Panel style={{ border: 'none' }} id={`collapsible_${type}_analyses`} expanded={show} defaultExpanded onToggle={() => { }}>
+          <Panel.Collapse>
+            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+              {productHeader}
+              {analysesView}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </div>
+    );
+  }
+
+  renderProductAnalysisView(products, isLogin = false, isReviewer = false) {
+    if (typeof (products) === 'undefined' || !products || products.length === 0) {
+      return <span />;
+    }
+    return products.map((product, idx) => (
+      <div key={`product-${product.id}`}>
+        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin, isReviewer)}
+      </div>
+    ));
+  }
+
+  render() {
+    const {
+      reaction,
+      isPublished,
+      canComment,
+      reviewLevel,
+      history,
+      canClose,
+    } = this.props;
+    let { buttons } = this.props;
+
+    if (typeof (reaction) === 'undefined' || !reaction) {
+      return <div />;
+    }
+
+    const taggData = (reaction && reaction.publication && reaction.publication.taggable_data) || {};
+    const pubData = (reaction && reaction.publication) || {};
+    const doi = (reaction && reaction.doi) || {};
+
+    const aId = [].concat.apply([], taggData.affiliation_ids);
+    const affiliationMap = {};
+    const { literatures } = reaction;
+    const references = literatures ? literatures.map(lit => (
+      <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
+        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
+        <Citation key={lit.id} literature={lit} />
+      </li>
+    )) : [];
+    const refArray = [];
+    let referencesText = '';
+    if (literatures) {
+      literatures.forEach((lit) => {
+        const content = literatureContent(lit, true);
+        refArray.push(content);
+      });
+      referencesText = refArray.join('');
+    }
+
+    let aCount = 0;
+    aId.map((e) => {
+      if (!affiliationMap[e]) {
+        aCount += 1;
+        affiliationMap[e] = aCount;
+      }
+    });
+    const license = taggData.license || 'CC BY-SA';
+
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+      reaction.publication.taggable_data.scheme_only === true) || false;
+
+    let showDOI = <Doi type="reaction" id={reaction.id} doi={isPublished ? taggData.doi : doi} isPublished={isPublished} />;
+    if (schemeOnly) {
+      buttons = ['Decline', 'Comments', 'Accept'];
+      showDOI = '';
+    }
+    const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
+    const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
+    const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
+    return (
+      <div style={{ border: 'none' }}>
+        <div >
+          <Jumbotron key={`reaction-${reaction.id}`}>
+            {
+              canComment ?
+                <RepoReviewButtonBar
+                  element={{ id: reaction.id, elementType: 'Reaction' }}
+                  buttons={buttons}
+                  buttonFunc={this.handleReviewBtn}
+                  reviewLevel={reviewLevel}
+                  currComment={(history && history.length > 0 && history.slice(-1).pop()) || {}}
+                /> : ''
+            }
+            {canClose ? <ClosePanel element={reaction} /> : ''}
+            <h4>
+              <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
+              <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
+              {IconLicense(license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
+              <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
+              <RepoUserComment isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
+            </h4>
+            <br />
+            <ContributorInfo contributor={taggData.contributors} showHelp={schemeOnly} />
+            <h5>
+              <b>{AuthorTitle(taggData.author_ids)} </b>
+              <AuthorList creators={taggData.creators} affiliationMap={affiliationMap} />
+            </h5>
+            <AffiliationList
+              affiliations={taggData.affiliations}
+              affiliationMap={affiliationMap}
+            />
+            {showDOI}
+            <ChemotionId id={pubData.id} type="reaction" />
+            <h5>
+              <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
+              <b>Reference{references.length > 1 ? 's' : null}: </b>
+              <ul style={{ listStyle: 'none' }}>{references}</ul>
+            </h5>
+            <br />
+            <h5>
+              {this.reactionInfo(reaction)}
+            </h5>
+            {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction', null, -1, idyLogin, idyReview)}
+            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview)}
+          </Jumbotron>
+        </div>
+        {
+          canComment ? (
+            <div>
+              <RepoCommentModal
+                show={this.state.showCommentModal}
+                elementId={reaction.id}
+                elementType="reaction"
+                field={this.state.commentField}
+                orgInfo={this.state.originInfo}
+                history={this.props.history}
+                reviewLevel={reviewLevel}
+                onUpdate={this.handleSubmitComment}
+                onHide={() => this.setState({ showCommentModal: false })}
+              />
+              <RepoReviewModal
+                show={this.state.showReviewModal}
+                elementId={reaction.id}
+                action={this.state.btnAction}
+                reviewLevel={reviewLevel}
+                history={history}
+                onSubmit={this.handleSubmitReview}
+                onHide={() => this.setState({ showReviewModal: false })}
+              />
+            </div>
+          ) : ''
+        }
+      </div>);
+  }
+}
+
+RepoReactionDetails.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  reviewLevel: PropTypes.number,
+  history: PropTypes.array,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+};
+
+RepoReactionDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  reviewLevel: 0,
+  history: [],
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+};
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
new file mode 100644
index 000000000..9b3f0c298
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  Panel,
+  Row,
+  Col
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { CommentBtn, ReactionTable, ReactionRinChiKey, resizableSvg } from './RepoCommon';
+import QuillViewer from '../components/QuillViewer';
+
+const RepoReactionSchemeInfo = (props) => {
+  const content = props.reaction.description;
+  const contentlength = (content && content.ops && content.ops.length > 0
+    && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
+  const descQV = contentlength > 0 ?
+    (<span><b>Description:</b><QuillViewer value={content} /></span>) : null;
+
+  return (
+    <Panel style={{ marginBottom: '4px' }}>
+      <Panel.Body style={{ paddingBottom: '1px' }}>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            {resizableSvg(props.svgPath)}
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
+            <ReactionTable
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Scheme')}
+              show={props.showScheme}
+              isPublic
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <div className="desc small-p">
+              {descQV}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={12} md={12} lg={12}>
+            <ReactionRinChiKey
+              reaction={props.reaction}
+              toggle={() => props.onToggle('Rinchi')}
+              show={props.showRinchi}
+              bodyAttrs={props.bodyAttrs}
+            />
+          </Col>
+        </Row>
+      </Panel.Body>
+    </Panel>
+  );
+};
+
+RepoReactionSchemeInfo.propTypes = {
+  reaction: PropTypes.object.isRequired,
+  svgPath: PropTypes.string.isRequired,
+  showScheme: PropTypes.bool.isRequired,
+  showRinchi: PropTypes.bool.isRequired,
+  showProp: PropTypes.bool.isRequired,
+  bodyAttrs: PropTypes.object.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  reviewLevel: PropTypes.number,
+  propInfo: PropTypes.string,
+  history: PropTypes.array,
+  onComment: PropTypes.func,
+  canComment: PropTypes.bool,
+};
+
+RepoReactionSchemeInfo.defaultProps = {
+  history: [],
+  reviewLevel: 0,
+  propInfo: '',
+  onComment: () => {},
+  canComment: false
+};
+
+export default RepoReactionSchemeInfo;
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/assets/javascripts/libHome/RepoReview.js
new file mode 100644
index 000000000..87a0cbe09
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReview.js
@@ -0,0 +1,372 @@
+import React, { Component } from 'react';
+import SVG from 'react-inlinesvg';
+import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
+import Select from 'react-select';
+import RepoReviewDetails from './RepoReviewDetails';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
+import { IconToMyDB, SvgPath, ElStateLabel, ElSubmitTime, SchemeWord } from './RepoCommon';
+
+const renderElement = (e, currentElement) => {
+  if (e.type === 'Reaction') {
+    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+    const schemeOnly = (e && e.scheme_only === true) || false;
+    return (
+      <tr
+        key={e.id}
+        className={listClass}
+        onClick={() => PublicActions.displayReviewReaction(e.id)}
+      >
+        <td style={{ position: 'relative' }} >
+          <span className="review_element_label">
+            <i className="icon-reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
+          </span>
+          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+          <div>
+            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+          </div>
+        </td>
+      </tr>
+    );
+  }
+  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
+  return (
+    <tr
+      key={e.id}
+      className={listClass}
+      onClick={() => PublicActions.displayReviewSample(e.id)}
+    >
+      <td style={{ position: 'relative' }}>
+        <span className="review_element_label">
+          <i className="icon-sample" />&nbsp;{e.title}
+        </span>
+        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
+        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
+        <div>
+          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+const defaultState = 'pending';
+
+export default class RepoReview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 10,
+      elements: [],
+      currentElement: null,
+      selectType: 'All',
+      searchType: 'All',
+      searchValue: '',
+      listTypeOptions: [],
+      selectState: defaultState
+    };
+    this.onChange = this.onChange.bind(this);
+    this.handleElementSelection = this.handleElementSelection.bind(this);
+    this.handleSelectType = this.handleSelectType.bind(this);
+    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
+    this.handleSearchNameInput = this.handleSearchNameInput.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onChange);
+    PublicActions.getElements.defer();
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onChange);
+  }
+
+  onChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+
+  onPerPageChange(e) {
+    const { page, selectType, selectState, searchType, searchValue } = this.state;
+    const perPage = e.target.value;
+    this.setState({ perPage });
+    PublicActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
+  }
+
+  onPaginationSelect(eventKey) {
+    const { pages, perPage, selectType, selectState, searchType, searchValue } = this.state;
+    if (eventKey > 0 && eventKey <= pages) {
+      PublicActions.getElements(selectType, selectState, searchType, searchValue, eventKey, perPage);
+    }
+  }
+
+  perPageInput() {
+    const { perPage } = this.state;
+    return (
+      <Form horizontal className="list-show-count" >
+        <FormGroup>
+          <InputGroup>
+            <InputGroup.Addon>Show</InputGroup.Addon>
+            <FormControl
+              type="text"
+              style={{ textAlign: 'center' }}
+              onChange={e => this.onPerPageChange(e)}
+              value={perPage || 0}
+            />
+          </InputGroup>
+        </FormGroup>
+      </Form>
+    );
+  }
+
+  pagination() {
+    const { page, pages } = this.state;
+    const items = [];
+    const minPage = Math.max(page - 2, 1);
+    const maxPage = Math.min(minPage + 4, pages);
+    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
+    if (page > 1) {
+      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
+    }
+    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
+      items.push((
+        <Pagination.Item
+          key={`${tpage}-page`}
+          active={tpage === page}
+          onClick={() => this.onPaginationSelect(tpage)}
+        >
+          {tpage}
+        </Pagination.Item>
+      ));
+    }
+
+    if (pages > maxPage) {
+      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
+    }
+    if (page !== pages) {
+      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
+    }
+    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
+
+    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
+  }
+
+  handleSelectType(val) {
+    const { selectType, selectState, perPage } = this.state;
+    if (val && (val === 'Submitter' || val === 'Embargo')) {
+      RepositoryFetcher.fetchReviewSearchOptions(val, selectType, selectState).then((res) => {
+        const options = res && res.result && res.result
+          .map(u => ({ value: u.key, name: u.name, label: u.label }));
+        this.setState({ listTypeOptions: options });
+        PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    } else {
+      //this.setState({ searchType: val, searchValue: '' });
+      PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
+    }
+  }
+
+  handleSearchNameInput(event) {
+    const { value } = event.target;
+    if (value) {
+      this.setState({ searchValue: value });
+    }
+  }
+
+  handleSelectAdvValue(val) {
+    const { perPage, selectType, selectState, searchType } = this.state;
+    if (val) {
+      this.setState({ page: 1, searchValue: val });
+      PublicActions.getElements(selectType, selectState, searchType, val, 1, perPage);
+    }
+  }
+
+  handleElementSelection(t, event) {
+    const { perPage, searchType, searchValue } = this.state;
+    if (t === 'type') {
+      this.setState({ selectType: event });
+      PublicActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
+    } else if (t === 'state') {
+      this.setState({ selectState: event });
+      PublicActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
+    }
+  }
+
+  handleKeyDown(event) {
+    const { perPage, selectType, selectState, searchType, searchValue } = this.state;
+    switch (event.keyCode) {
+      case 13: // Enter
+        PublicActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }
+
+  loadValuesByType(input) {
+    if (!input || input.length < 3) {
+      return Promise.resolve({ options: [] });
+    }
+    return RepositoryFetcher.fetchReviewSearchValues(this.state.searchType, input)
+      .then(res => ({
+        options: res.result
+          .map(u => ({
+            value: u.key,
+            name: u.name,
+            label: u.label
+          }))
+      })).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+  renderMenuItems(t, elements) {
+    const menu = elements.map(element => (
+      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
+        {element}
+      </MenuItem>
+    ));
+    return menu;
+  }
+
+  renderSearch() {
+    const { searchType, searchValue, listTypeOptions } = this.state;
+
+    const customClass = '.btn-unified';
+    const optSearchType = ['All', 'Samples', 'Reactions'];
+    const optSearchState = ['All', 'pending', 'reviewed', 'accepted'];
+
+    this.listOptions = [
+      { value: 'All', label: 'filter by' },
+      { value: 'Name', label: 'name' },
+      { value: 'Embargo', label: 'embargo' },
+      { value: 'Submitter', label: 'submitter' },
+    ];
+
+    const filterDropdown = (
+      <ButtonGroup className="home-search" style={{ display: 'flex' }}>
+        <DropdownButton
+          className={customClass}
+          id="type-inner-dropdown"
+          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
+          // style={{ width: '100px' }}
+        >
+          {this.renderMenuItems('type', optSearchType)}
+        </DropdownButton>
+        <DropdownButton
+          className={customClass}
+          id="state-inner-dropdown"
+          title={this.state.selectState}
+          // style={{ width: '100px' }}
+        >
+          {this.renderMenuItems('state', optSearchState)}
+        </DropdownButton>
+      </ButtonGroup>
+    );
+
+    const searchTypeTbl = (
+      <Select
+        simpleValue
+        searchable={false}
+        options={this.listOptions}
+        placeholder="Select search field"
+        clearable={false}
+        valueKey="value"
+        labelKey="label"
+        onChange={this.handleSelectType}
+        defaultValue="All"
+        value={searchType}
+        className="o-author"
+      />
+    );
+
+    let searchValueTbl = (<div />);
+    switch (searchType) {
+      case 'Embargo':
+      case 'Submitter':
+        searchValueTbl = (
+          <Select
+            simpleValue
+            searchable
+            options={listTypeOptions}
+            placeholder="Select..."
+            valueKey="value"
+            labelKey="label"
+            onChange={this.handleSelectAdvValue}
+            value={searchValue}
+            className="o-name"
+          />
+        );
+        break;
+      case 'Name':
+        searchValueTbl = (
+          <FormControl
+            type="text"
+            placeholder="Name..."
+            value={this.state.searchValue || ''}
+            onChange={event => this.handleSearchNameInput(event)}
+            onKeyDown={event => this.handleKeyDown(event)}
+          />
+        );
+        break;
+      default:
+        searchValueTbl = (<div />);
+    }
+
+    const searchTbl = (
+      <div className="home-adv-search">
+        <div style={{ display: 'flex' }}>
+          { filterDropdown }
+          { searchTypeTbl }
+          { searchValueTbl }
+        </div>
+      </div>
+    );
+
+    return (
+      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
+        {searchTbl}
+      </div>
+    );
+  }
+
+  render() {
+    const { elements, currentElement } = this.state;
+    return (
+      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
+        <Col md={currentElement ? 4 : 12} >
+          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
+            {this.renderSearch()}
+            <div style={{ clear: 'both' }} />
+          </Navbar>
+          <div>
+            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
+              <Table striped className="review-entries">
+                <tbody striped="true" bordered="true" hover="true">
+                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement)) }
+                </tbody>
+              </Table>
+            </div>
+            <div className="list-container-bottom">
+              <Row>
+                <Col sm={8}>{this.pagination()}</Col>
+                <Col sm={4}>{this.perPageInput()}</Col>
+              </Row>
+            </div>
+          </div>
+        </Col>
+        <Col
+          className="review-element"
+          md={currentElement ? 8 : 0}
+          // style={this.state.currentElement ? {} : { display: 'none' }}
+        ><RepoReviewDetails />
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
new file mode 100644
index 000000000..418afce59
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  Button,
+  ButtonToolbar,
+  OverlayTrigger,
+  Tooltip
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import RepoMetadataModal from '../components/common/RepoMetadataModal';
+
+const showButton = (btn, func, reviewLevel, pubState) => {
+  let title = btn;
+  let btnBsStyle = '';
+  let btnIcon = '';
+  let btnTooltip = '';
+  switch (btn) {
+    case 'Accept':
+      btnBsStyle = 'primary';
+      btnIcon = 'fa fa-paper-plane';
+      btnTooltip = 'Accept publication';
+      break;
+    case 'Review':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-exchange';
+      btnTooltip = 'Review publication, modification required for submittor';
+      break;
+    case 'Submit':
+      btnBsStyle = 'info';
+      btnIcon = 'fa fa-play';
+      btnTooltip = 'Submit for publication';
+      break;
+    case 'Decline':
+      btnBsStyle = 'default';
+      btnIcon = 'fa fa-eject';
+      if (reviewLevel === 2) {
+        btnTooltip = 'Withdraw publication';
+        title = 'Withdraw';
+      } else if (reviewLevel === 3) {
+        btnTooltip = 'Reject publication';
+        title = 'Reject';
+      }
+      break;
+    default:
+      break;
+  }
+  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (reviewLevel === 2 && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
+    <OverlayTrigger
+      key={`ot_${title}`}
+      placement="top"
+      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
+    >
+      <Button
+        bsStyle={btnBsStyle}
+        onClick={() => func(true, btn)}
+      >
+        <i className={btnIcon} />&nbsp;{title}
+      </Button>
+    </OverlayTrigger>
+  ) : <span key={`span_${title}`} />;
+};
+
+const showCommentButton = (btn, func, currComment) => {
+  const hasComments = (currComment && currComment.comment && currComment.comment.length > 0) || false;
+  return (
+    <OverlayTrigger
+      key="ot_comments"
+      placement="top"
+      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
+    >
+      <Button
+        bsStyle={hasComments ? 'success' : 'default'}
+        onClick={() => func(true, btn)}
+      >
+        <i className="fa fa-comments" />&nbsp;
+        Comments
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const RepoReviewButtonBar = props =>
+  (
+    <ButtonToolbar>
+      {
+        props.buttons.filter(b => b === 'Comments').map(b =>
+          showCommentButton(b, props.buttonFunc, (props.currComment)))
+      }
+      {
+        props.buttons.filter(b => b !== 'Comments').map(b =>
+          showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state))
+      }
+      <RepoMetadataModal
+        elementId={props.element.id}
+        elementType={props.element.elementType.toLowerCase()}
+      />
+    </ButtonToolbar>
+  );
+
+RepoReviewButtonBar.propTypes = {
+  element: PropTypes.shape({
+    id: PropTypes.number,
+    elementType: PropTypes.string
+  }).isRequired,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+  buttonFunc: PropTypes.func,
+  reviewLevel: PropTypes.number,
+  currComment: PropTypes.object
+};
+
+
+RepoReviewButtonBar.defaultProps = {
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+  buttonFunc: () => { },
+  reviewLevel: 0,
+  currComment: {},
+};
+
+export default RepoReviewButtonBar;
diff --git a/app/assets/javascripts/libHome/RepoReviewCommon.js b/app/assets/javascripts/libHome/RepoReviewCommon.js
new file mode 100644
index 000000000..5f1ae4436
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewCommon.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+import { startsWith } from 'lodash';
+import moment from 'moment';
+import RepoReviewTimeFormat from '../components/common/RepoReviewTimeFormat';
+
+const AffiliationMap = (affiliationIds) => {
+  const aId = [].concat.apply([], affiliationIds);
+  const affiliationMap = {};
+  let aCount = 0;
+  aId.map((e) => {
+    if (!affiliationMap[e]) {
+      aCount += 1;
+      affiliationMap[e] = aCount;
+    }
+  });
+  return affiliationMap;
+};
+
+const CommentComponent = (field, history) => {
+  const submitHis = history.filter(h => h.type === 'submit' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
+  const reviewHis = history.filter(h => h.type === 'reviewed' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
+
+  const current = (submitHis.length > 0) ? submitHis.pop() : null;
+  const previous = (reviewHis.length > 0) ? reviewHis.pop() : null;
+  const submitField = (current && current.comments && current.comments[`${field}`]) || {};
+  const reviewField = (previous && previous.comments && previous.comments[`${field}`]) || {};
+
+  let keep = true;
+  let submitFieldTime = null;
+  let reviewFieldTime = null;
+  if (current && previous) {
+    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
+      submitFieldTime = moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss');
+    } else {
+      submitFieldTime = new Date(submitField.timestamp);
+    }
+
+    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
+      reviewFieldTime = moment(reviewField.timestamp, 'DD-MM-YYYY HH:mm:ss');
+    } else {
+      reviewFieldTime = new Date(reviewField.timestamp);
+    }
+    keep = reviewFieldTime > submitFieldTime;
+  }
+
+  const submitTbl = (current ?
+    (
+      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
+        <strong>{submitField.username} ({RepoReviewTimeFormat(submitField.timestamp)})</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{submitField.comment}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+  const reviewTbl = (previous ?
+    (
+      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
+        <strong>{reviewField.username} ({RepoReviewTimeFormat(reviewField.timestamp)})</strong>
+        <br />
+        <div style={{ whiteSpace: 'pre-wrap' }}>{reviewField.comment}</div>
+      </Alert>
+    )
+    :
+      <div />
+  );
+
+  const tbl = keep ? (<span>{reviewTbl}{submitTbl}</span>) : (<span>{submitTbl}{reviewTbl}</span>);
+  return tbl;
+};
+
+const CommentDisplay = ({ elReview, commentKey, history }) => {
+  let objectKey = commentKey;
+  if (startsWith(commentKey, 'Reaction_Analysis_')) {
+    objectKey = 'Reaction Analysis';
+  } else if (startsWith(commentKey, 'Product_Analysis_')) {
+    objectKey = 'Product Analysis';
+  } else if (startsWith(commentKey, 'Analysis_')) {
+    objectKey = 'Analysis';
+  }
+
+  if (elReview) {
+    switch (objectKey) {
+      case 'Summary':
+        return CommentComponent(elReview.comment, 'Review Summary', null);
+      case 'Reference':
+      case 'Reaction Table':
+      case 'Description':
+      case 'Additional information':
+      case 'Properties':
+      case 'TLC-Control':
+      case 'Reaction Analysis':
+      case 'Product Analysis':
+      case 'Analysis':
+        return (elReview.comments && elReview.comments[commentKey]) ?
+          CommentComponent(objectKey, history) : <div />;
+      default:
+        return <div />;
+    }
+  }
+  return <div />;
+};
+
+CommentDisplay.propTypes = {
+  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  commentKey: PropTypes.string.isRequired,
+  history: PropTypes.array
+};
+
+CommentDisplay.defaultProps = {
+  elReview: null,
+  history: []
+};
+
+export {
+  AffiliationMap,
+  CommentComponent,
+  CommentDisplay
+};
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
new file mode 100644
index 000000000..836658f25
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoReviewDetails.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PublicStore from '../components/stores/PublicStore';
+import RepoReactionDetails from './RepoReactionDetails';
+import RepoSampleDetails from './RepoSampleDetails';
+
+export default class RepoReviewDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element,
+      history: [],
+      reviewLevel: 0
+    };
+
+    this.onStoreChange = this.onStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    PublicStore.listen(this.onStoreChange);
+  }
+
+  componentWillUnmount() {
+    PublicStore.unlisten(this.onStoreChange);
+  }
+
+  onStoreChange(state) {
+    this.setState(prevState => ({ ...prevState, ...state }));
+  }
+
+  switchTypeRender() {
+    const { currentElement, elementType } = this.state;
+    if (typeof (currentElement) === 'undefined' || !currentElement) {
+      return <span />;
+    }
+    switch (elementType) {
+      case 'reaction':
+        return (
+          <RepoReactionDetails
+            reaction={currentElement.reaction}
+            canComment
+            reviewLevel={this.state.reviewLevel}
+            history={this.state.historyInfo ? this.state.historyInfo : []}
+          />);
+      case 'sample':
+        return (
+          <RepoSampleDetails
+            element={currentElement}
+            canComment
+            reviewLevel={this.state.reviewLevel}
+            history={this.state.historyInfo ? this.state.historyInfo : []}
+          />);
+      default: return <span />;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ border: 'none' }}>
+        {this.switchTypeRender()}
+      </div>
+    );
+  }
+}
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
new file mode 100644
index 000000000..3ee525614
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -0,0 +1,176 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Jumbotron, Panel, Label } from 'react-bootstrap';
+import ArrayUtils from '../components/utils/ArrayUtils';
+import {
+  AffiliationList,
+  AnalysesTypeJoinLabel,
+  AuthorList,
+  ChemotionId,
+  CommentBtn,
+  ContributorInfo,
+  DateInfo,
+  Doi,
+  IconLicense,
+  IconToMyDB,
+  RenderPublishAnalysesPanel,
+  SidToPubChem,
+  ToggleIndicator,
+} from './RepoCommon';
+import { AffiliationMap } from './RepoReviewCommon';
+import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
+import RepoUserComment from '../components/common/RepoUserComment';
+import RepoPublicComment from '../components/common/RepoPublicComment';
+import RepoXvialButton from '../components/common/RepoXvialButton';
+import PublicActions from '../components/actions/PublicActions';
+import Sample from '../components/models/Sample';
+
+export default class RepoSample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expandSA: true,
+    };
+    this.toggleSA = this.toggleSA.bind(this);
+    this.renderAnalyses = this.renderAnalyses.bind(this);
+  }
+
+  toggleSA() {
+    const { expandSA } = this.state;
+    this.setState({ expandSA: !expandSA });
+  }
+
+  updateRepoXvial(elementId) {
+    PublicActions.displayMolecule(elementId);
+    PublicActions.refreshPubElements('Molecules');
+  }
+
+  renderAnalyses(analyses) {
+    const { sample } = this.props;
+    const specSample = new Sample(sample);
+    specSample.container = sample.analyses;
+    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
+    return orderAnalyses.map((analysis) => {
+      const userInfo = (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
+      const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
+      return (
+        <span key={`analysis_${analysis.id}`}>
+          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.props.handleCommentBtn} />
+          <RenderPublishAnalysesPanel
+            key={analysis.id}
+            userInfo={userInfo}
+            analysis={analysis}
+            isPublic={this.props.isPublished}
+            isLogin={this.props.isLogin}
+            isReviewer={this.props.isReviewer}
+            type="Container"
+            pageType="molecules"
+            pageId={sample.molecule_id}
+            element={specSample}
+          />
+        </span>
+      );
+    });
+  }
+
+  render() {
+    const {
+      sample, pubData, tagData, isPublished,
+      canComment, handleCommentBtn, isLogin, isReviewer
+    } = this.props;
+    const { expandSA } = this.state;
+
+    const affiliationMap = AffiliationMap(sample.affiliation_ids);
+
+    const references = sample.literatures ? sample.literatures.map(lit => (
+      <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
+        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
+        <Citation key={lit.id} literature={lit} />
+      </li>
+    )) : [];
+
+    const refArray = [];
+    let referencesText = '';
+    if (canComment && sample.literatures) {
+      sample.literatures.forEach((lit) => {
+        const content = literatureContent(lit, true);
+        refArray.push(content);
+      });
+      referencesText = refArray.join('');
+    }
+
+    const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
+      ? <span />
+      : <h5><b>Name: </b> {sample.showed_name} </h5>;
+    const userInfo = sample.pub_info || '';
+    const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
+    return (
+      <Jumbotron key={`sample-${sample.id}`}>
+        <span className="repo-pub-sample-header">
+          <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={sample.id} type="sample" /></span>&nbsp;
+          <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
+          <SidToPubChem sid={sample.sid} />&nbsp;
+          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} />
+          {IconLicense(sample.license, (sample.author_ids.length > 1))}
+          <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
+          <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />
+        </span>
+        <br />
+        {iupacUserDefined}
+        <ContributorInfo contributor={sample.contributors} />
+        <h5>
+          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
+          <AuthorList creators={sample.creators} affiliationMap={affiliationMap} />
+        </h5>
+        <AffiliationList
+          affiliations={sample.affiliations}
+          affiliationMap={affiliationMap}
+        />
+        <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
+        <ChemotionId id={pubData.id} type="sample" />
+        <h5>
+          {sample.reaction_ids.map(rid => (
+            <Button key={`reaction-link-btn-${rid}`} bsStyle="link" style={{ padding: '0px 0px' }} onClick={() => { window.location = `/home/publications/reactions/${rid}`; }}>
+              <i className="icon-reaction" style={{ fontSize: '1.5em' }} />{'Product of reaction'}
+            </Button>
+          ))}
+        </h5>
+        <h5>
+          <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
+          <b>Reference{references.length > 1 ? 's' : null}: </b>
+          <ul style={{ listStyle: 'none' }}>{references}</ul>
+        </h5>
+        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'} />
+        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
+          {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
+        </span>
+        <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
+          <Panel.Collapse>
+            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
+              {this.renderAnalyses(analyses)}
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </Jumbotron>
+    );
+  }
+}
+
+RepoSample.propTypes = {
+  sample: PropTypes.object.isRequired,
+  pubData: PropTypes.object.isRequired,
+  tagData: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+  canComment: PropTypes.bool,
+  showPublicModal: PropTypes.bool,
+  handleCommentBtn: PropTypes.func,
+  isLogin: PropTypes.bool,
+  isReviewer: PropTypes.bool
+};
+
+RepoSample.defaultProps = {
+  canComment: false,
+  isLogin: false,
+  isReviewer: false,
+  handleCommentBtn: () => { },
+};
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
new file mode 100644
index 000000000..062ebc368
--- /dev/null
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -0,0 +1,211 @@
+import React, { Component } from 'react';
+import { Panel } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import {
+  ClosePanel,
+  MoleculeInfo,
+} from './RepoCommon';
+import LoadingActions from '../components/actions/LoadingActions';
+import PublicActions from '../components/actions/PublicActions';
+import RepoReviewButtonBar from './RepoReviewButtonBar';
+import RepoCommentModal from '../components/common/RepoCommentModal';
+import RepoReviewModal from '../components/common/RepoReviewModal';
+import RepoSample from './RepoSample';
+
+export default class RepoSampleDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showReviewModal: false,
+      btnAction: '',
+      showCommentModal: false,
+      commentField: '',
+      originInfo: '',
+    };
+    this.handleReviewBtn = this.handleReviewBtn.bind(this);
+    this.handleSubmitReview = this.handleSubmitReview.bind(this);
+    this.handleCommentBtn = this.handleCommentBtn.bind(this);
+    this.handleSubmitComment = this.handleSubmitComment.bind(this);
+  }
+
+  handleReviewBtn(showReviewModal, btnAction) {
+    this.setState({ showReviewModal, btnAction });
+  }
+
+  handleSubmitReview(elementId, comment, action) {
+    LoadingActions.start();
+    PublicActions.reviewPublish(elementId, 'sample', comment, action);
+    this.setState({ showReviewModal: false });
+  }
+
+  handleCommentBtn(show, field, orgInfo) {
+    this.setState({
+      showCommentModal: show,
+      commentField: field,
+      originInfo: orgInfo
+    });
+  }
+
+  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
+    LoadingActions.start();
+    const cinfo = {};
+    if (typeof (cinfo[field]) === 'undefined') {
+      cinfo[field] = {};
+    }
+    cinfo[field].comment = comment;
+    cinfo[field].origInfo = origInfo;
+    PublicActions.updateComment(elementId, elementType, cinfo);
+    this.setState({ showCommentModal: false });
+  }
+
+  render() {
+    const {
+      element,
+      isPublished,
+      canComment,
+      reviewLevel,
+      history,
+      canClose,
+      buttons
+    } = this.props;
+
+    if (typeof (element) === 'undefined' || !element) {
+      return <div />;
+    }
+
+    const {
+      molecule, isLogin, isReviewer
+    } = element;
+
+    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
+    const idyReview = typeof isReviewer === 'undefined' ? false : isReviewer;
+    let samples = [];
+    let pubData = {};
+    let tagData = {};
+    let { sample } = element;
+    let hasXvial = false;
+    if (isPublished) {
+      samples = element.published_samples;
+      sample = samples.find(x => x !== undefined) || {};
+      sample.id = sample.sample_id;
+      hasXvial = samples.filter(s => s !== undefined && s.xvial && s.xvial !== '').length > 0;
+    } else {
+      samples.push(element.sample);
+      pubData = element.publication;
+    }
+
+    tagData = (pubData.taggable_data) || {};
+    const details = (samples || []).map((s) => {
+      if (isPublished) {
+        pubData = {
+          id: s.pub_id
+        };
+        tagData = {
+          published_at: s.published_at,
+          doi_reg_at: s.doi_reg_at
+        };
+      }
+      const el = {
+        id: s.id || s.sample_id,
+        sid: s.sid,
+        short_label: s.short_label || '',
+        xvial: s.xvial,
+        pub_info: s.pub_info,
+        ana_infos: s.ana_infos,
+        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
+        affiliations: s.affiliations || tagData.affiliations,
+        literatures: s.literatures || element.literatures,
+        license: s.license || tagData.license || 'CC BY-SA',
+        author_ids: s.author_ids || tagData.author_ids || [],
+        contributors: s.contributors || tagData.contributors,
+        creators: s.creators || tagData.creators,
+        doi: s.doi || element.doi,
+        reaction_ids: s.reaction_ids || [],
+        showed_name: s.showed_name,
+        molecule_iupac: molecule.iupac_name || [],
+        molecule_id: molecule.id,
+        analyses: s.analyses || element.analyses || []
+      };
+
+      return (
+        <RepoSample
+          key={el.id}
+          sample={el}
+          pubData={pubData}
+          tagData={tagData}
+          handleCommentBtn={this.handleCommentBtn}
+          isLogin={idyLogin}
+          isReviewer={idyReview}
+          {...this.props}
+        />
+      );
+    });
+
+    return (
+      <Panel style={{ border: 'none' }} >
+        <Panel.Body>
+          {
+            canComment ?
+              <RepoReviewButtonBar
+                element={{ id: sample.id, elementType: 'Sample' }}
+                buttonFunc={this.handleReviewBtn}
+                reviewLevel={reviewLevel}
+                currComment={(history && history.slice(-1).pop()) || {}}
+                buttons={buttons}
+              /> : ''
+          }
+          {canClose ? <ClosePanel element={sample} /> : ''}
+          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} />
+          <div>
+            {details}
+          </div>
+          {
+            canComment ?
+              <div>
+                <RepoCommentModal
+                  show={this.state.showCommentModal}
+                  elementId={sample.id}
+                  elementType="Sample"
+                  field={this.state.commentField}
+                  orgInfo={this.state.originInfo}
+                  reviewLevel={reviewLevel}
+                  history={history}
+                  onUpdate={this.handleSubmitComment}
+                  onHide={() => this.setState({ showCommentModal: false })}
+                />
+                <RepoReviewModal
+                  show={this.state.showReviewModal}
+                  elementId={sample.id}
+                  action={this.state.btnAction}
+                  reviewLevel={reviewLevel}
+                  history={history}
+                  onSubmit={this.handleSubmitReview}
+                  onHide={() => this.setState({ showReviewModal: false })}
+                />
+              </div> : ''
+          }
+
+        </Panel.Body>
+      </Panel>
+    );
+  }
+}
+
+RepoSampleDetails.propTypes = {
+  element: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool,
+  canComment: PropTypes.bool,
+  reviewLevel: PropTypes.number,
+  history: PropTypes.array,
+  canClose: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.string),
+};
+
+RepoSampleDetails.defaultProps = {
+  isPublished: false,
+  canComment: false,
+  reviewLevel: 0,
+  history: [],
+  canClose: true,
+  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
+};
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/assets/javascripts/libHome/homeRoutes.js
new file mode 100644
index 000000000..2e73d3f61
--- /dev/null
+++ b/app/assets/javascripts/libHome/homeRoutes.js
@@ -0,0 +1,219 @@
+import PublicActions from '../components/actions/PublicActions'
+import PublicFetcher from '../components/fetchers/PublicFetcher'
+
+const routes = {
+  '/': 'root',
+  target: {
+    root: function(e) {
+      Aviator.navigate('/home/welcome')
+    }
+  },
+
+  '/welcome': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("welcome")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/home': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("home")
+      },
+    },
+    '/': 'show'
+  },
+  '/publications': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("publications")
+      },
+    },
+    '/': 'show'
+  },
+  '/review': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("review")
+      },
+    },
+    '/': 'show'
+  },
+  '/about': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("about")
+      },
+    },
+    '/': 'show'
+  },
+  '/contact': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("contact")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/newsroom': {
+    target: {
+      list: function (e) {
+        PublicActions.articles();
+      },
+      show: function (e) {
+        PublicActions.displayArticle(e.params.key)
+      },
+    },
+    '/': 'list',
+    '/:key': 'show'
+  },
+
+  '/newseditor': {
+    target: {
+      edit: function (e) {
+        PublicActions.editArticle(e.params.key)
+      },
+      show: function (e) {
+        PublicActions.editArticle('new')
+      },
+    },
+    '/show': 'show',
+    '/:key': 'edit'
+  },
+
+  '/howtoeditor': {
+    target: {
+      edit: function (e) {
+        PublicActions.editHowTo(e.params.key)
+      },
+      show: function (e) {
+        PublicActions.editHowTo('ein')
+      },
+    },
+    '/show': 'show',
+    '/:key': 'edit'
+  },
+
+  '/directive': {
+    target: {
+      show: function(e) {
+        PublicActions.openRepositoryPage("directive")
+      },
+    },
+    '/': 'show'
+  },
+
+  '/datasets': {
+    target: {
+      show: function(e) {
+        PublicActions.displayDataset(e.params.datasetId)
+      },
+    },
+    '/:datasetId': 'show'
+  },
+
+  '/molecules': {
+    target: {
+      show: function(e) {
+        PublicActions.displayMolecule(e.params.moleculeId)
+      },
+    },
+    '/:moleculeId': 'show'
+  },
+
+  '/reactions': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReaction(e.params.reactionId)
+      },
+    },
+    '/:reactionId': 'show'
+  },
+
+  '/pid': {
+    target: {
+      show: function(e) {
+        PublicFetcher.queryPid({id: e.params.id})
+        }
+    },
+    '/:id': 'show'
+  },
+
+  '/inchikey': {
+    target: {
+      show: function(e) {
+        let url = e.uri.replace("/inchikey/", "")
+        let query = url.split(".")
+
+        if (query.length > 0) {
+          let version = query[1] || ""
+          let splitIndex = query[0].indexOf("/")
+          if (splitIndex < 0) splitIndex = query[0].length
+          let params = {
+            inchikey: query[0].substring(0, splitIndex),
+            type:  query[0].substring(splitIndex + 1),
+            version: version
+          }
+
+          PublicFetcher.queryInchikey(params)
+        }
+
+      },
+    },
+    '/*': 'show'
+  },
+
+  '/review_reaction': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReviewReaction(e.params.reactionId)
+      },
+    },
+    '/:reactionId': 'show'
+  },
+
+  '/review_sample': {
+    target: {
+      show: function(e) {
+        PublicActions.displayReviewSample(e.params.sampleId)
+      },
+    },
+    '/:sampleId': 'show'
+  },
+
+  '/embargo': {
+    target: {
+      list: function (e) {
+        PublicActions.openRepositoryPage("embargo");
+      },
+      show: function (e) {
+        PublicActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
+      },
+    },
+    '/': 'list',
+    '/:elementType/:elementId': 'show'
+  },
+
+  '/howto': {
+    target: {
+      list: function (e) {
+        PublicActions.howtos();
+      },
+      show: function (e) {
+        PublicActions.displayHowTo(e.params.key)
+      },
+    },
+    '/': 'list',
+    '/:key': 'show'
+  },
+}
+
+export default function() {
+  Aviator.root = '/home'
+  Aviator.pushStateEnabled = true
+  Aviator.setRoutes(routes)
+}
diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index adc05be8d..bf492d06b 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -83,7 +83,6 @@ def perform(embargo_col_id)
       PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
       raise e
     end
-
   end
 
   def remove_publish_pending
diff --git a/app/models/report.rb b/app/models/report.rb
index 52ed63779..cedfdf4b6 100644
--- a/app/models/report.rb
+++ b/app/models/report.rb
@@ -96,6 +96,10 @@ def create_docx
       Reporter::WorkerDoiList.new(
         report: self, ext: 'xlsx'
       ).process
+    when 'doi_list_xlsx'
+      Reporter::WorkerDoiList.new(
+        report: self, ext: 'xlsx'
+      ).process
     else
       Reporter::Worker.new(
         report: self, template_path: tpl_path,
diff --git a/app/packs/src/components/CollectionSubtree.js b/app/packs/src/components/CollectionSubtree.js
index 6c1150b03..9ce287b1d 100644
--- a/app/packs/src/components/CollectionSubtree.js
+++ b/app/packs/src/components/CollectionSubtree.js
@@ -33,6 +33,28 @@ const labeling = (label) => {
   return label;
 }
 
+const labeling = (label) => {
+  if (typeof (label) === 'string' && (label.startsWith('Reviewing') || label.startsWith('Element To Review') || label.startsWith('Reviewed'))) {
+    const ls = label.split(',');
+    if (ls.length >= 3) {
+      const sicon = ls[1].substr(1) === '0' ? '' : <i className="icon-sample"> {ls[1].substr(1)} &nbsp; </i>;
+      const ricon = ls[2].substr(1) === '0' ? '' : <i className="icon-reaction"> {ls[2].substr(1)} &nbsp;  </i>;
+      return label.startsWith('Reviewing') ?
+        (
+          <div style={{ display: 'inline', color: 'red' }}>
+            {ls[0]} &nbsp; {sicon} {ricon}
+          </div>
+        ) :
+        (
+          <div style={{ display: 'inline' }}>
+            {ls[0]} &nbsp; {sicon} {ricon}
+          </div>
+        );
+    }
+  }
+  return label;
+}
+
 export default class CollectionSubtree extends React.Component {
   constructor(props) {
     super(props);
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
index 47f816bdd..ca89bddb1 100644
--- a/app/packs/src/components/CollectionTree.js
+++ b/app/packs/src/components/CollectionTree.js
@@ -10,7 +10,7 @@ import UIStore from 'src/stores/alt/stores/UIStore';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 import UserInfos from 'src/apps/mydb/collections/UserInfos';
 
-const colVisibleTooltip = <Tooltip id="col_visible_tooltip">Toggle own collections</Tooltip>;
+const colVisibleTooltip = <Tooltip id="col_visible_tooltip">Toggle My Collections</Tooltip>;
 
 export default class CollectionTree extends React.Component {
   constructor(props) {
@@ -39,7 +39,7 @@ export default class CollectionTree extends React.Component {
   componentDidMount() {
     CollectionStore.listen(this.onChange);
     CollectionActions.fetchLockedCollectionRoots();
-    CollectionActions.fetchUnsharedCollectionRoots();
+    // CollectionActions.fetchUnsharedCollectionRoots();
     CollectionActions.fetchSharedCollectionRoots();
     CollectionActions.fetchRemoteCollectionRoots();
     CollectionActions.fetchSyncInCollectionRoots();
@@ -74,11 +74,25 @@ export default class CollectionTree extends React.Component {
     return newRoots;
   }
 
+  publicRoots(roots, preservePublic) {
+    let newRoots =[]
+    roots.forEach((root) => {
+      if(preservePublic) {
+        if (root.is_public) newRoots.push(root)
+      } else {
+        if (!root.is_public) newRoots.push(root)
+      }
+    })
+
+    return newRoots
+  }
+
   unsharedSubtrees() {
     let roots = this.state.unsharedRoots;
     roots = roots.filter(function (item) { return !item.isNew })
 
-    return this.subtrees(roots, null, false);
+    // return this.subtrees(roots, null, false);
+    return null
   }
 
   sharedSubtrees() {
@@ -149,6 +163,7 @@ export default class CollectionTree extends React.Component {
   remoteSyncInSubtrees() {
     let { syncInRoots, syncCollectionVisible } = this.state
     syncInRoots = this.removeOrphanRoots(syncInRoots)
+    syncInRoots = this.publicRoots(syncInRoots, false)
 
     let labelledRoots = syncInRoots.map(e => {
       return update(e, {
@@ -181,6 +196,43 @@ export default class CollectionTree extends React.Component {
       false, syncCollectionVisible)
   }
 
+  publicSubtrees() {
+    let {syncInRoots, syncChemotionVisible} = this.state
+    syncInRoots = this.removeOrphanRoots(syncInRoots)
+    syncInRoots = this.publicRoots(syncInRoots, true)
+
+    let orderedRoots = []
+    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
+      syncInRoots[0].children.map((e,idx) => {
+        if (e.label.match(/hemotion/) ) {
+          orderedRoots[0] = e;
+          orderedRoots[0].label = 'Chemotion';
+        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
+          orderedRoots[1] = e;
+        } else if (e.label.match(/Published Elements/)) {
+          orderedRoots[2] = e
+          orderedRoots[2].label = 'My Published Elements'
+        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
+        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
+        else if (e.label === 'Embargoed Publications') {orderedRoots[7] = e  }
+        else {orderedRoots[idx+10] = e  }
+      })
+    }
+
+    let subTreeLabels = (
+      <div className="tree-view">
+        <div className={"title title-public " } style={{backgroundColor:'white'}}
+              // onClick={() => this.setState({syncChemotionVisible: !syncChemotionVisible})}
+        >
+        </div>
+      </div>
+    )
+
+    return this.subtrees(orderedRoots, subTreeLabels,
+                         true, syncChemotionVisible)
+  }
 
   labelRoot(sharedToOrBy, rootCollection) {
     let shared = rootCollection[sharedToOrBy]
@@ -319,8 +371,7 @@ export default class CollectionTree extends React.Component {
 
     const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';
 
-    return (
-      <div>
+    const myCollections = this.state.lockedRoots && this.state.lockedRoots.length > 0 ? (
         <div className="tree-view">
         <div className="tree-wrapper">
             {this.publicSubtrees()}
@@ -336,17 +387,25 @@ export default class CollectionTree extends React.Component {
             </div>
           </OverlayTrigger>
         </div>
-        <div className="tree-wrapper" style={{ display: ownCollectionDisplay }}>
+    ) : <div />
+
+    return (
+      <div>
+        <div className="tree-wrapper">
+          {this.publicSubtrees()}
+        </div>
+        {myCollections}
+        <div className="tree-wrapper" style={{display: ownCollectionDisplay}}>
           {this.lockedSubtrees()}
           {/* {this.unsharedSubtrees()} */}
         </div>
         {/* <div className="tree-wrapper">
           {this.sharedSubtrees()}
         </div>
-        <div className="tree-wrapper">
+        <div className="tree-wrapper" style={{ display: 'none' }} >
           {this.remoteSubtrees()}
         </div>
-        <div className="tree-wrapper">
+        <div className="tree-wrapper" style={{ display: 'none' }} >
           {this.remoteSyncInSubtrees()}
         </div> */}
       </div>
diff --git a/app/packs/src/components/ElementsTableSampleEntries.js b/app/packs/src/components/ElementsTableSampleEntries.js
index 261a21465..f939a3ae7 100644
--- a/app/packs/src/components/ElementsTableSampleEntries.js
+++ b/app/packs/src/components/ElementsTableSampleEntries.js
@@ -30,6 +30,8 @@ import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/che
 
 import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
 
+import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
+
 const buildFlattenSampleIds = (displayedMoleculeGroup) => {
   let flatIndex = 0;
   const flattenSamplesId = [];
diff --git a/app/packs/src/components/ReactionDetails.js b/app/packs/src/components/ReactionDetails.js
index e0aa6da91..8a20de364 100644
--- a/app/packs/src/components/ReactionDetails.js
+++ b/app/packs/src/components/ReactionDetails.js
@@ -244,6 +244,101 @@ export default class ReactionDetails extends Component {
     }).filter(s => s);
   }
 
+  handleValidation(element) {
+    let validates = [];
+    const reaction = element;
+    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
+    reaction.publication.taggable_data.scheme_only === true) || false;
+    if ((reaction.rxno || '') === '' && schemeOnly === false) {
+      validates.push({ name: 'reaction_type', value: false, message: 'Reaction Type is missing.' });
+    }
+    const duration = (reaction.duration || '').split(' ').shift();
+    if (duration === '' || (duration === reaction.duration)) {
+      validates.push({ name: 'duration', value: false, message: 'No duration' });
+    }
+    const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
+    if (!hasTemperature) {
+      validates.push({ name: 'temperature', value: false, message: 'Temperature is missing' });
+    }
+    const desc = contentToText(reaction.description).trim() || '';
+    if (desc === '' && schemeOnly === false) {
+      validates.push({ name: 'description', value: false, message: 'Description is missing' });
+    }
+
+    if (schemeOnly === false) {
+      let hasAnalyses = (reaction.container.children.filter(c => c.container_type === 'analyses')[0].children.length > 0);
+      const startingMaterisls = (reaction.starting_materials || []);
+      if (startingMaterisls.length < 1) {
+        validates.push({ name: 'start_material', value: false, message: 'Start material is missing' });
+      }
+      startingMaterisls.forEach((st) => {
+        if (!st.amount || !st.amount.value) {
+          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
+        }
+      });
+      const products = (reaction.products || []);
+      if (products.length < 1) {
+        validates.push({ name: 'product', value: false, message: 'Product is missing' });
+      }
+      products.forEach((pt) => {
+        if (!pt.amount || !pt.amount.value) {
+          validates.push({ name: 'product-amount', value: false, message: `${pt.molecule_iupac_name}: amount is 0` });
+        }
+        if (pt.analysisArray().length > 0) {
+          hasAnalyses = true;
+        }
+        const validatePt = validateMolecule(pt);
+        if (validatePt.length > 0) {
+          validates = validates.concat(validatePt);
+        }
+      });
+      if (!hasAnalyses) {
+        validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
+      }
+    }
+    validates = validates.concat(validateYield(reaction));
+    if (validates.length > 0) {
+      reaction.validates = validates;
+      this.setState({ reaction });
+    } else {
+      LoadingActions.start();
+      RepositoryActions.reviewPublish(element);
+    }
+  }
+
+  handleResetValidation() {
+    const { reaction } = this.state;
+    reaction.validates = [];
+    this.setState({ reaction });
+  }
+
+  handleCommentScreen() {
+    this.setState({ commentScreen: true });
+    this.props.toggleCommentScreen(true);
+  }
+
+  handleFullScreen() {
+    this.setState({ commentScreen: false });
+    this.props.toggleFullScreen();
+  }
+
+  handlePublishReactionModal(show) {
+    this.setState({ showPublishReactionModal: show });
+  }
+
+  updateReactionSvg() {
+    const {reaction} = this.state;
+    const materialsSvgPaths = {
+      starting_materials: reaction.starting_materials.map(material => material.svgPath),
+      reactants: reaction.reactants.map(material => material.svgPath),
+      products: reaction.products.map(material => [material.svgPath, material.equivalent])
+    };
+
+    const solvents = reaction.solvents.map((s) => {
+      const name = s.preferred_label;
+      return name;
+    }).filter(s => s);
+
   onUIStoreChange(state) {
     if (state.reaction.activeTab != this.state.activeTab) {
       this.setState({
diff --git a/app/packs/src/components/SampleDetails.js b/app/packs/src/components/SampleDetails.js
index b25e1e1be..c8875a288 100644
--- a/app/packs/src/components/SampleDetails.js
+++ b/app/packs/src/components/SampleDetails.js
@@ -641,6 +641,8 @@ export default class SampleDetails extends React.Component {
         <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
         <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
         {decoupleCb}
+        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
+        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
         <div style={{ display: 'inline-block', marginLeft: '10px' }}>
           <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
           {colLabel}
diff --git a/app/packs/src/components/SampleDetailsContainersAux.js b/app/packs/src/components/SampleDetailsContainersAux.js
index 7e693c33b..503539e9d 100644
--- a/app/packs/src/components/SampleDetailsContainersAux.js
+++ b/app/packs/src/components/SampleDetailsContainersAux.js
@@ -25,6 +25,9 @@ import MatrixCheck from 'src/components/common/MatrixCheck';
 import { PublishedTag } from './PublishCommon';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 
+import { PublishedTag } from './PublishCommon';
+import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
+
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
     &nbsp;
diff --git a/app/packs/src/components/chemscanner/components/HeaderMenu.js b/app/packs/src/components/chemscanner/components/HeaderMenu.js
index 0984c6f3c..338f89464 100644
--- a/app/packs/src/components/chemscanner/components/HeaderMenu.js
+++ b/app/packs/src/components/chemscanner/components/HeaderMenu.js
@@ -46,6 +46,12 @@ import {
   getReactionGroups
 } from '../reactionUtils';
 
+import {
+  getSchemeMolecules,
+  getReactionReagents,
+  getReactionGroups
+} from '../reactionUtils';
+
 const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
 
 const allReagents = Object.assign(
diff --git a/app/packs/src/components/models/Reaction.js b/app/packs/src/components/models/Reaction.js
index f44a5decc..33ca383f2 100644
--- a/app/packs/src/components/models/Reaction.js
+++ b/app/packs/src/components/models/Reaction.js
@@ -975,4 +975,16 @@ export default class Reaction extends Element {
     const analyses = this.container && this.container.children.find(c => (c && c.container_type === 'analyses'));
     return analyses ? analyses.children : [];
   }
+
+  get notPublishable() {
+    // NB: in reaction samples, can_publish is only serialized for products
+    // const unpublishableSamples = this.samples.filter(s => !s.can_publish);
+    const unpublishableSamples = this.products.filter(s => !s.can_publish);
+    return unpublishableSamples.length > 0 && unpublishableSamples;
+  }
+
+  analysisArray() {
+    const analyses = this.container && this.container.children.find(c => (c && c.container_type === 'analyses'));
+    return analyses ? analyses.children : [];
+  }
 }
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index 131a826fd..fc707e2be 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -6,6 +6,31 @@ import Aviator from 'aviator';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import WelcomeMessage from '../components/WelcomeMessage';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+import initPublicRoutes from './homeRoutes';
+
+import Navigation from './Navigation';
+import XHome from '../components/extra/HomeXHome';
+import Notifications from '../components/Notifications';
+import RepoEmbargo from './RepoEmbargo';
+import RepoHome from './RepoHome';
+import RepoPubl from './RepoPubl';
+import RepoReview from './RepoReview';
+import RepoAbout from './RepoAbout';
+import RepoContact from './RepoContact';
+import RepoDirective from './RepoDirective';
+import RepoNewsroom from './RepoNewsroom';
+import RepoNewsReader from './RepoNewsReader';
+import RepoNewsEditor from './RepoNewsEditor';
+import RepoHowTo from './RepoHowTo';
+import RepoHowToReader from './RepoHowToReader';
+import RepoHowToEditor from './RepoHowToEditor';
+
+import PublicStore from '../components/stores/PublicStore';
+import RepoElementDetails from './RepoElementDetails';
+import NavFooter from './NavFooter';
 
 import initPublicRoutes from './homeRoutes';
 
diff --git a/db/schema.rb b/db/schema.rb
index 6d8570933..6d7713b10 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -545,10 +545,31 @@
     t.index ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id"
   end
 
-  create_table "element_tags", id: :serial, force: :cascade do |t|
-    t.string "taggable_type"
-    t.integer "taggable_id"
-    t.jsonb "taggable_data"
+  add_index "element_klasses_revisions", ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id", using: :btree
+  create_table "dois", force: :cascade do |t|
+    t.integer  "molecule_id"
+    t.string   "inchikey"
+    t.integer  "molecule_count"
+    t.integer  "analysis_id"
+    t.string   "analysis_type"
+    t.integer  "analysis_count"
+    t.jsonb    "metadata",       default: {}
+    t.boolean  "minted",         default: false
+    t.datetime "minted_at"
+    t.datetime "created_at",                     null: false
+    t.datetime "updated_at",                     null: false
+    t.integer  "doiable_id"
+    t.string   "doiable_type"
+    t.string   "suffix"
+  end
+
+  add_index "dois", ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true, using: :btree
+  add_index "dois", ["suffix"], name: "index_dois_on_suffix", unique: true, using: :btree
+
+  create_table "element_tags", force: :cascade do |t|
+    t.string   "taggable_type"
+    t.integer  "taggable_id"
+    t.jsonb    "taggable_data"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.index ["taggable_id"], name: "index_element_tags_on_taggable_id"
diff --git a/lib/pub_chem.rb b/lib/pub_chem.rb
index 4934eb60b..a129df66b 100644
--- a/lib/pub_chem.rb
+++ b/lib/pub_chem.rb
@@ -110,6 +110,22 @@ def self.get_sid_from_doi(doi)
     end
   end
 
+  def self.get_sid_from_doi(doi)
+    options = {
+      :timeout => 10,
+      :headers => {'Content-Type' => 'application/x-www-form-urlencoded'},
+      :body => { 'sourceid' => doi }
+    }
+    begin
+      resp = HTTParty.post(http_s + PUBCHEM_HOST + '/rest/pug/substance/sourceid/' + DEPOSITOR_NAME + '/sids/TXT', options)
+      return nil unless resp.success?
+      resp.body.presence&.strip
+    rescue => e
+      Rails.logger.error "[RESCUE EXCEPTION] of [get_sid_from_doi] with doi [#{doi}], exception [#{e.inspect}]"
+      return nil
+    end
+  end
+
   def self.get_molfile_by_smiles(smiles)
     @auth = { username: '', password: '' }
     options = { timeout: 10, headers: { 'Content-Type' => 'text/json' } }

From e5b9a5ddebccd4c7adb4b245af0c792b6474b2cc Mon Sep 17 00:00:00 2001
From: Paggy Huang <pei-chi.huang@kit.edu>
Date: Mon, 19 Oct 2020 17:40:53 +0200
Subject: [PATCH 243/258] edit authors function before release

---
 app/api/chemotion/user_api.rb                 |  27 +-
 .../common/RepoReviewAuthorsModal.js          | 516 ++++++++++++++++++
 .../components/fetchers/RepositoryFetcher.js  |  33 +-
 .../libHome/RepoReactionDetails.js            |   3 +
 .../libHome/RepoReviewButtonBar.js            |  10 +-
 .../javascripts/libHome/RepoSampleDetails.js  |   1 +
 .../src/components/fetchers/UsersFetcher.js   |   8 +-
 7 files changed, 591 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/components/common/RepoReviewAuthorsModal.js

diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index c79d7c5d3..d597c849d 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -108,8 +108,17 @@ class UserAPI < Grape::API
     resource :collaborators do
       namespace :list do
         desc 'fetch collaborators of current user'
+        params do
+          optional :id, type: Integer
+          optional :type, type: String
+        end
         get do
-          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+          if params[:id].present?
+            pub = Publication.find_by(element_id: params[:id], element_type: params[:type])
+            ids = UsersCollaborator.where(user_id: pub.published_by).pluck(:collaborator_id)
+          else
+            ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
+          end
           data = User.where(id: ids)
           present data, with: Entities::CollaboratorEntity, root: 'authors'
         end
@@ -147,6 +156,7 @@ class UserAPI < Grape::API
           present user, with: Entities::CollaboratorEntity, root: 'user'
         end
       end
+
       namespace :add_aff do
         desc 'add user to my collabration'
         params do
@@ -163,6 +173,21 @@ class UserAPI < Grape::API
           present collaborator, with: Entities::CollaboratorEntity, root: 'user'
         end
       end
+
+      namespace :find_add_aff do
+        desc 'add user to my collabration'
+        params do
+          requires :department, type: String
+          requires :organization, type: String
+          requires :country, type: String
+        end
+        post do
+          aff = Affiliation.find_or_create_by(country: params[:country],
+            organization: params[:organization], department: params[:department])
+          {id: aff.id, aff_output: aff.output_full}
+        end
+      end
+
       namespace :delete do
         desc 'remove user from my collabration'
         params do
diff --git a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
new file mode 100644
index 000000000..9900810f3
--- /dev/null
+++ b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
@@ -0,0 +1,516 @@
+import React from 'react';
+import PropTypes, { element } from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label, InputGroup, Checkbox, Table } from 'react-bootstrap';
+import Select from 'react-select';
+import uuid from 'uuid';
+import { findIndex, filter, uniq, flattenDeep } from 'lodash';
+import { OrcidIcon } from '../../libHome/RepoCommon';
+import RepositoryFetcher from '../fetchers/RepositoryFetcher';
+import UsersFetcher from '../fetchers/UsersFetcher';
+import SelectionField from '../common/SelectionField';
+import PublicFetcher from '../fetchers/PublicFetcher';
+import PublicActions from '../actions/PublicActions';
+import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
+
+const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
+const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation from this Publication</Tooltip>;
+
+const lineAff = (creator, aid, affs, onDeleteAff) => {
+  const removeBtn = (
+    <OverlayTrigger placement="right" overlay={removeAffTooltip} >
+      <Button
+        bsSize="xsmall"
+        bsStyle="danger"
+        onClick={() => onDeleteAff(creator, aid)}
+      >
+        <i className="fa fa-trash-o" />
+      </Button>
+    </OverlayTrigger>
+  );
+  return (
+    <tr key={uuid.v4()} style={{ lineHeight: '2em' }}>
+      <td colSpan="4" width="90%">{affs[aid]}</td>
+      <td align="right" width="10%">{ removeBtn }</td>
+    </tr>
+  );
+};
+
+const secAff = (fields, g, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
+  return (
+    <tr className="aff-line" style={{ lineHeight: '2em' }}>
+      <td width="30%">
+        <SelectionField
+          options={departments}
+          value={(fields[`${g.id}@line_department`]) || ''}
+          field={`${g.id}@line_department`}
+          placeholder="e.g. Institute of Organic Chemistry"
+          onChange={onInputChange}
+          isCreatable
+        />
+      </td>
+      <td width="40%">
+        <SelectionField
+          options={organizations}
+          value={(fields[`${g.id}@line_organization`]) || ''}
+          field={`${g.id}@line_organization`}
+          placeholder="e.g. Karlsruhe Institute of Technology"
+          onChange={onInputChange}
+          isCreatable
+        />
+      </td>
+      <td width="20%">
+        <SelectionField
+          options={countries}
+          value={(fields[`${g.id}@line_country`]) || ''}
+          field={`${g.id}@line_country`}
+          onChange={onInputChange}
+          placeholder="e.g. Germany"
+        />
+      </td>
+      <td width="10%" align="right" >
+        <OverlayTrigger placement="right" overlay={addAffTooltip} >
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={() => onAddAff(g)}
+          >
+            <i className="fa fa-plus" aria-hidden="true" />
+          </Button>
+        </OverlayTrigger>
+      </td>
+    </tr>
+  );
+};
+
+const affbody = (taggData, creator, fields, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
+  const affs = taggData.affiliations || {};
+  const mainAff = creator.affiliationIds && creator.affiliationIds.length > 0 ?
+    creator.affiliationIds.map(aid => lineAff(creator, aid, affs, onDeleteAff)) : '';
+  const moreAff = secAff(fields, creator, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) || '';
+
+  return (
+    <span>
+      {mainAff}
+      {moreAff}
+    </span>
+  );
+
+}
+
+export default class RepoReviewAuthorsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      taggData: this.props.taggData || {},
+      modalShow: false,
+      selectedAuthors: null,
+      collaborations: [],
+      countries: [],
+      fields: {},
+      organizations: [],
+      departments: [],
+    };
+
+    this.handleSelectAuthors = this.handleSelectAuthors.bind(this);
+    this.loadCollaborations = this.loadCollaborations.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.onAddAff = this.onAddAff.bind(this);
+    this.onDeleteAff = this.onDeleteAff.bind(this);
+    this.onAddNewAuthor = this.onAddNewAuthor.bind(this);
+    this.onSave = this.onSave.bind(this);
+    this.loadOrcid = this.loadOrcid.bind(this);
+    this.handleDeleteAuthor = this.handleDeleteAuthor.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadCollaborations();
+    PublicFetcher.affiliations('countries').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ countries: affOption });
+    });
+    PublicFetcher.affiliations('organizations').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ organizations: affOption });
+    });
+    PublicFetcher.affiliations('departments').then((result) => {
+      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
+        .filter(a => a.value && a.value.length > 1);
+      this.setState({ departments: affOption });
+    });
+  }
+
+  onAddNewAuthor() {
+    const { selectedAuthors, collaborations, taggData } = this.state;
+    const { affiliations, creators, affiliation_ids, author_ids } = taggData;
+
+    const coidx = findIndex(collaborations, o => o.id === selectedAuthors.value);
+    const selCol = collaborations[coidx];
+    const affIds = selCol.current_affiliations.map(ca => (ca.id));
+
+    selCol.current_affiliations.map(ca => {
+      affiliations[ca.id] = [ca.department, ca.organization, ca.country].join(', ');
+    })
+
+    const newAuthor = {
+      id: selCol.id,
+      familyName: selCol.last_name,
+      givenName: selCol.first_name,
+      name: selCol.name,
+      ORCID: selCol.orcid,
+      affiliationIds: affIds
+    };
+
+    creators.push(newAuthor);
+
+    collaborations.splice(coidx, 1);
+
+    taggData.creators = creators;
+    taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids.concat(affIds)));
+    author_ids.push(newAuthor.id);
+    taggData.author_ids = author_ids;
+    taggData.affiliations = affiliations;
+    this.setState({ taggData, selectedAuthors: null, collaborations });
+  }
+
+  onAddAff(g) {
+    const { fields, taggData } = this.state;
+    const department = fields[`${g.id}@line_department`];
+    const organization = fields[`${g.id}@line_organization`];
+    const country = fields[`${g.id}@line_country`];
+    const { affiliations, creators, affiliation_ids } = taggData;
+
+    const params = {
+      department, organization, country
+    };
+    UsersFetcher.findAndCreateAff(params)
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          affiliations[result.id] = result.aff_output;
+          g.affiliationIds.push(result.id);
+          const idx = findIndex(creators, o => o.id === g.id);
+          // authors.splice(idx, 1, result.user);
+          fields[`${g.id}@line_department`] = '';
+          fields[`${g.id}@line_organization`] = '';
+          fields[`${g.id}@line_country`] = '';
+          taggData.affiliations = affiliations;
+          affiliation_ids.push(result.id);
+          taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids));
+          taggData.creators[idx] = g;
+
+          this.setState({ taggData, fields });
+        }
+      });
+  }
+
+  onDeleteAff(g, aid) {
+    const { taggData } = this.state;
+    const { affiliations, affiliation_ids, creators, author_ids } = taggData;
+
+    const ax = findIndex(g.affiliationIds, o => o.id === aid);
+    g.affiliationIds.splice(ax, 1);
+    const cx = findIndex(creators, o => o.id === g.id);
+    taggData.creators[cx] = g;
+    this.setState({ taggData });
+  }
+
+  onSave() {
+    const { taggData } = this.state;
+    const { element } = this.props;
+
+    const { creators } = taggData;
+    const authorCount = (creators || []).length;
+
+    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
+      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
+      return true;
+    }
+
+    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.id, elementType: element.elementType })
+      .then((result) => {
+        if (result.error) {
+          alert(result.error);
+        } else {
+          if (element.elementType === 'Reaction') {
+            PublicActions.displayReviewReaction(element.id);
+          } else {
+            PublicActions.displayReviewSample(element.id);
+          }
+
+          this.setState({ modalShow: false });
+        }
+      });
+    return true;
+  }
+
+  loadOrcid() {
+    const { taggData } = this.state;
+    const { affiliations, creators, affiliation_ids, author_ids, contributors } = taggData;
+    let ids = [];
+    ids.push(contributors.id);
+    ids = ids.concat(author_ids);
+    UsersFetcher.loadOrcidByUserId({ ids }).then((result) => {
+      const orcids = result.orcids || [];
+      const cx = findIndex(orcids, o => o.id === contributors.id);
+      if (cx > -1) {
+        contributors.ORCID = orcids[cx].orcid;
+      }
+
+      creators.forEach((creator, idx) => {
+        const cix = findIndex(orcids, o => o.id === creator.id);
+        if (cix > -1) {
+          creators[idx].ORCID = orcids[cix].orcid;
+        }
+      });
+      taggData.creators = creators;
+      taggData.contributors = contributors;
+      this.setState({ taggData });
+    });
+  }
+
+  handleInputChange(type, ev) {
+    let { fields } = this.state;
+    switch (type) {
+      case 'country':
+        fields.country = ev && ev.value;
+        break;
+      case 'organization':
+        fields.organization = ev && ev.value;
+        break;
+      case 'department':
+        fields.department = ev && ev.value;
+        break;
+      default:
+        if (typeof fields === 'undefined') {
+          fields = {};
+        }
+        fields[type] = ev && ev.value;
+    }
+    this.setState({ fields });
+  }
+
+
+  handleSelectAuthors(val) {
+    if (val) { this.setState({ selectedAuthors: val }); }
+  }
+
+  loadCollaborations() {
+    const { element } = this.props;
+    const { taggData } = this.state;
+    const { creators, author_ids } = taggData;
+    UsersFetcher.fetchMyCollaborations({ id: element.id, type: element.elementType })
+      .then((result) => {
+        const aCol = result.authors.filter(({ id }) => !(author_ids || []).includes(id));
+        this.setState({
+          collaborations: aCol
+        });
+      });
+  }
+
+  handleDeleteAuthor(author) {
+    const { taggData } = this.state;
+    const { creators, author_ids } = taggData;
+    taggData.creators = filter(creators, o => o.id !== author.id);
+    taggData.author_ids = filter(author_ids, o => o !== author.id);
+    this.setState({
+      taggData
+    });
+  }
+
+  contributor() {
+    const { taggData } = this.props;
+    const contributors = taggData.contributors || {};
+
+    const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
+    const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
+      <div>  -{contributors.affiliations[k]}</div>
+    ));
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br/> {aff} </div>)
+
+  };
+
+  selectUsers() {
+    const { selectedAuthors, collaborations } = this.state;
+
+    const { taggData } = this.props;
+    const creators = taggData.creators || [];
+
+    const affiliations = taggData.affiliations || [];
+    let defaultSelectedAuthors = [];
+
+    const options = collaborations.map(c => (
+      { label: c.name, value: c.id }
+    ));
+
+    if (selectedAuthors == null) {
+      defaultSelectedAuthors = creators.map((au) => (
+        { label: au.name, value: au.id }
+      ));
+    } else {
+      defaultSelectedAuthors = selectedAuthors;
+    }
+
+    const authorInfo = creators && creators.map((author) => {
+      const orcid = author.ORCID == null ? '' : <OrcidIcon orcid={author.ORCID} />;
+
+      const affIds = author.affiliationIds || [];
+      const aff = affIds.map(id => (
+        <div>  -{affiliations[id]}</div>
+      ));
+      return (<div>{orcid}{author.name}<br/>{aff}<br/></div>)
+    });
+
+    const authorCount = (creators || []).length;
+
+    return (
+      <div >
+        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
+          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
+        </Checkbox>
+        <InputGroup>
+          <InputGroup.Addon>My Collaboration(s)</InputGroup.Addon>
+          <Select
+            searchable
+            placeholder="Select authors from my collaboration"
+            backspaceRemoves
+            value={defaultSelectedAuthors}
+            defaultValue={defaultSelectedAuthors}
+            valueKey="value"
+            labelKey="label"
+            matchProp="name"
+            options={options}
+            onChange={this.handleSelectAuthors}
+          />
+          <InputGroup.Button>
+            <Button bsStyle="success" onClick={() => this.onAddNewAuthor()}>
+              <i className="fa fa-plus" />
+              Add to Author List
+              </Button>
+          </InputGroup.Button>
+         </InputGroup>
+        <div>
+
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { modalShow, countries, organizations, departments, fields } = this.state;
+    const { taggData } = this.state;
+    const creators = taggData.creators || [];
+
+    if (this.props.reviewLevel != '2' || this.props.schemeOnly == true) {
+      return '';
+    }
+
+    let tbody = '';
+
+    tbody = creators.map(creator => (
+      <tbody key={`tbody_${uuid.v1()}`}>
+        <tr key={`tbody_${uuid.v1()}`}>
+          <td>
+            <DeleteConfirmBtn
+              label={creator.name}
+              onClickYes={() => this.handleDeleteAuthor(creator)}
+            />
+            &nbsp;
+          </td>
+          <td>{creator.name}</td>
+          <td><OrcidIcon orcid={creator.ORCID} />{creator.ORCID}</td>
+          <td>
+            {affbody(taggData, creator, fields, countries, organizations, departments, this.onAddAff, this.onDeleteAff, this.handleInputChange)}
+          </td>
+        </tr>
+
+      </tbody>
+    ));
+
+    return (
+      <div>
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}
+        >
+          <Button
+            onClick={() => this.setState({ modalShow: true })}
+            style={{ marginLeft: '5px' }}
+          >
+            <i className="fa fa-users" />&nbsp;
+            Publication Authors
+          </Button>
+        </OverlayTrigger>
+        <Modal
+          show={modalShow}
+          onHide={() => this.setState({ modalShow: false })}
+          dialogClassName="author-modal-dialog"
+        >
+          <Modal.Body style={{ overflow: 'auto' }}>
+            <div>
+              {this.contributor()}
+              {this.selectUsers()}
+            </div>
+            <br />
+            <div>
+              <Table responsive condensed hover>
+                <thead>
+                  <tr style={{ backgroundColor: '#ddd' }}>
+                    <th width="5%">Action</th>
+                    <th width="10%">Name</th>
+                    <th width="15%">ORCID</th>
+                    <th width="70%">
+                      <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
+                        <tbody>
+                          <tr>
+                            <td style={{ padding: 'unset' }} width="90%">Affiliation</td>
+                            <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
+                          </tr>
+                        </tbody>
+                      </Table>
+                    </th>
+                  </tr>
+                </thead>
+                { tbody }
+              </Table>
+            </div>
+
+            <ButtonToolbar>
+              <Button bsStyle="warning" onClick={() => this.setState({ modalShow: false })}> Close</Button>
+              <Button
+                bsStyle="info"
+                onClick={() => this.loadOrcid()}
+              > get ORCID
+              </Button>
+              <Button
+                bsStyle="success"
+                onClick={() => this.onSave()}
+              > Save
+              </Button>
+            </ButtonToolbar>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+RepoReviewAuthorsModal.propTypes = {
+  element: PropTypes.shape({
+    id: PropTypes.number,
+    elementType: PropTypes.string
+  }).isRequired,
+  reviewLevel: PropTypes.number,
+  schemeOnly: PropTypes.bool,
+  taggData: PropTypes.object.isRequired,
+};
+
+
+
+RepoReviewAuthorsModal.defaultProps = {
+  reviewLevel: 0,
+  schemeOnly: false,
+  taggData: {}
+};
\ No newline at end of file
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
index 2edfdda92..4cd1d6bcb 100644
--- a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
+++ b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
@@ -121,8 +121,7 @@ export default class RepositoryFetcher {
           dismissible: 'button',
           autoDismiss: 6,
           position: 'tr',
-          uid: 'publish_sample_error'
-        };
+          uid: 'publish_sample_error'};
         NotificationActions.add(notification);
         return null;
       }
@@ -395,6 +394,36 @@ export default class RepositoryFetcher {
       });
   }
 
+
+  static updateComment(id, type, comments) {
+    return fetch('/api/v1/repository/reviewing/comment', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ id, type, comments })
+    }).then(response => response.json())
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+  }
+  
+  static saveRepoAuthors(params = {}) {
+    return fetch('/api/v1/repository/save_repo_authors', {
+      credentials: 'same-origin',
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
+  }
+
   static zipPreviewMetadata(id, type) {
     const currentTime = Math.floor(Date.now() / 1000);
     const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index cba91dbfc..950e77ffb 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -440,6 +440,7 @@ export default class RepoReactionDetails extends Component {
     const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
     const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
     const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
+
     return (
       <div style={{ border: 'none' }}>
         <div >
@@ -451,6 +452,8 @@ export default class RepoReactionDetails extends Component {
                   buttons={buttons}
                   buttonFunc={this.handleReviewBtn}
                   reviewLevel={reviewLevel}
+                  taggData={taggData}
+                  schemeOnly={schemeOnly}
                   currComment={(history && history.length > 0 && history.slice(-1).pop()) || {}}
                 /> : ''
             }
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
index 418afce59..2d76bc1bb 100644
--- a/app/assets/javascripts/libHome/RepoReviewButtonBar.js
+++ b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
@@ -7,6 +7,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import RepoMetadataModal from '../components/common/RepoMetadataModal';
+import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
 
 const showButton = (btn, func, reviewLevel, pubState) => {
   let title = btn;
@@ -93,6 +94,7 @@ const RepoReviewButtonBar = props =>
         elementId={props.element.id}
         elementType={props.element.elementType.toLowerCase()}
       />
+      <RepoReviewAuthorsModal element={props.element} reviewLevel={props.reviewLevel} schemeOnly={props.schemeOnly} taggData={props.taggData} />
     </ButtonToolbar>
   );
 
@@ -104,7 +106,9 @@ RepoReviewButtonBar.propTypes = {
   buttons: PropTypes.arrayOf(PropTypes.string),
   buttonFunc: PropTypes.func,
   reviewLevel: PropTypes.number,
-  currComment: PropTypes.object
+  schemeOnly: PropTypes.bool,
+  currComment: PropTypes.object,
+  taggData: PropTypes.object
 };
 
 
@@ -112,7 +116,9 @@ RepoReviewButtonBar.defaultProps = {
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
   buttonFunc: () => { },
   reviewLevel: 0,
+  schemeOnly: false,
   currComment: {},
+  taggData: {}
 };
 
-export default RepoReviewButtonBar;
+export default RepoReviewButtonBar;
\ No newline at end of file
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
index 062ebc368..b84deefe2 100644
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -152,6 +152,7 @@ export default class RepoSampleDetails extends Component {
                 reviewLevel={reviewLevel}
                 currComment={(history && history.slice(-1).pop()) || {}}
                 buttons={buttons}
+                taggData={tagData}
               /> : ''
           }
           {canClose ? <ClosePanel element={sample} /> : ''}
diff --git a/app/packs/src/components/fetchers/UsersFetcher.js b/app/packs/src/components/fetchers/UsersFetcher.js
index da41f3afa..b7a089736 100644
--- a/app/packs/src/components/fetchers/UsersFetcher.js
+++ b/app/packs/src/components/fetchers/UsersFetcher.js
@@ -2,8 +2,12 @@ import 'whatwg-fetch';
 
 export default class CollaboratorFetcher {
 
-  static fetchMyCollaborations() {
-    return fetch('/api/v1/collaborators/list', {
+  static fetchMyCollaborations(params=null) {
+    let api = '/api/v1/collaborators/list';
+    if (params != null && typeof params.id !== 'undefined') {
+      api = `/api/v1/collaborators/list?id=${params.id}&type=${params.type}`;
+    }
+    return fetch(api, {
       credentials: 'same-origin'
     }).then(response => response.json())
       .then(json => json)

From af909f4a3118d59ee12ac516c34f5890d4c92ad5 Mon Sep 17 00:00:00 2001
From: Paggy Huang <pei-chi.huang@kit.edu>
Date: Fri, 23 Oct 2020 17:20:40 +0200
Subject: [PATCH 244/258] rubocop and add isSubmitter instead of isReviewer

---
 app/api/chemotion/repository_api.rb           |  2 +-
 app/api/chemotion/user_api.rb                 | 19 +---
 .../components/ReactionDetailsRepoComment.js  |  2 +
 .../components/SampleDetailsRepoComment.js    |  7 +-
 .../common/RepoReviewAuthorsModal.js          | 98 +++++++++++--------
 .../components/stores/PublicStore.js          |  2 +
 .../javascripts/libHome/RepoElementDetails.js |  2 +
 .../libHome/RepoReactionDetails.js            |  4 +
 .../libHome/RepoReviewButtonBar.js            |  4 +-
 .../javascripts/libHome/RepoReviewDetails.js  |  5 +-
 .../javascripts/libHome/RepoSampleDetails.js  |  4 +
 .../src/components/fetchers/UsersFetcher.js   |  8 +-
 12 files changed, 89 insertions(+), 68 deletions(-)

diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 267dae3fb..85226b4e5 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -607,7 +607,7 @@ def add_submission_history(root)
             review_info: review_info
           }
         end
-      end
+    end
 
       resource :sample do
         helpers RepositoryHelpers
diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index d597c849d..01c558638 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -108,17 +108,8 @@ class UserAPI < Grape::API
     resource :collaborators do
       namespace :list do
         desc 'fetch collaborators of current user'
-        params do
-          optional :id, type: Integer
-          optional :type, type: String
-        end
         get do
-          if params[:id].present?
-            pub = Publication.find_by(element_id: params[:id], element_type: params[:type])
-            ids = UsersCollaborator.where(user_id: pub.published_by).pluck(:collaborator_id)
-          else
-            ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
-          end
+          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
           data = User.where(id: ids)
           present data, with: Entities::CollaboratorEntity, root: 'authors'
         end
@@ -167,8 +158,7 @@ class UserAPI < Grape::API
         end
         post do
           collaborator = User.find(params[:id])
-          aff = [Affiliation.find_or_create_by(country: params[:country],
-            organization: params[:organization], department: params[:department])]
+          aff = [Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])]
           collaborator.affiliations << aff unless aff.nil?
           present collaborator, with: Entities::CollaboratorEntity, root: 'user'
         end
@@ -182,9 +172,8 @@ class UserAPI < Grape::API
           requires :country, type: String
         end
         post do
-          aff = Affiliation.find_or_create_by(country: params[:country],
-            organization: params[:organization], department: params[:department])
-          {id: aff.id, aff_output: aff.output_full}
+          aff = Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])
+          { id: aff.id, aff_output: aff.output_full }
         end
       end
 
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
index 1f9a1e031..d9f3b94a7 100644
--- a/app/assets/javascripts/components/ReactionDetailsRepoComment.js
+++ b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
@@ -34,6 +34,7 @@ export default class ReactionDetailsRepoComment extends Component {
           this.setState({
             reaction: data.reaction,
             reviewLevel: data.reviewLevel,
+            isSubmitter: data.isSubmitter || false,
             historyInfo: history,
           });
         }
@@ -59,6 +60,7 @@ export default class ReactionDetailsRepoComment extends Component {
           reaction={reaction}
           canComment
           reviewLevel={this.state.reviewLevel}
+          isSubmitter={this.state.isSubmitter}
           history={this.state.historyInfo ? this.state.historyInfo : []}
           canClose={false}
           buttons={['Comments']}
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/assets/javascripts/components/SampleDetailsRepoComment.js
index 3535f8151..91d0a3dec 100644
--- a/app/assets/javascripts/components/SampleDetailsRepoComment.js
+++ b/app/assets/javascripts/components/SampleDetailsRepoComment.js
@@ -11,7 +11,8 @@ export default class SampleDetailsRepoComment extends Component {
 
     this.state = {
       element: null,
-      reviewLevel: 0
+      reviewLevel: 0,
+      isSubmitter: false,
     };
     this.onStoreChange = this.onStoreChange.bind(this);
   }
@@ -30,7 +31,8 @@ export default class SampleDetailsRepoComment extends Component {
           this.setState({
             element: data,
             historyInfo: (publication.review && publication.review.history) || [],
-            reviewLevel: data.reviewLevel
+            reviewLevel: data.reviewLevel,
+            isSubmitter: data.isSubmitter || false
           });
         }
       }).catch((errorMessage) => {
@@ -55,6 +57,7 @@ export default class SampleDetailsRepoComment extends Component {
           element={element}
           canComment
           reviewLevel={this.state.reviewLevel}
+          isSubmitter={this.state.isSubmitter}
           history={this.state.historyInfo ? this.state.historyInfo : {}}
           canClose={false}
           buttons={['Comments']}
diff --git a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
index 9900810f3..de5c60ff4 100644
--- a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
+++ b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes, { element } from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label, InputGroup, Checkbox, Table } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Checkbox, Table } from 'react-bootstrap';
 import Select from 'react-select';
 import uuid from 'uuid';
 import { findIndex, filter, uniq, flattenDeep } from 'lodash';
@@ -101,7 +101,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      taggData: this.props.taggData || {},
+      taggData: null,
       modalShow: false,
       selectedAuthors: null,
       collaborations: [],
@@ -120,6 +120,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
     this.onSave = this.onSave.bind(this);
     this.loadOrcid = this.loadOrcid.bind(this);
     this.handleDeleteAuthor = this.handleDeleteAuthor.bind(this);
+    this.handleClose = this.handleClose.bind(this);
   }
 
   componentDidMount() {
@@ -141,17 +142,24 @@ export default class RepoReviewAuthorsModal extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    this.setState({
+      taggData: null
+    });
+  }
+
   onAddNewAuthor() {
-    const { selectedAuthors, collaborations, taggData } = this.state;
+    const { selectedAuthors, collaborations } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
     const { affiliations, creators, affiliation_ids, author_ids } = taggData;
 
     const coidx = findIndex(collaborations, o => o.id === selectedAuthors.value);
     const selCol = collaborations[coidx];
     const affIds = selCol.current_affiliations.map(ca => (ca.id));
 
-    selCol.current_affiliations.map(ca => {
+    selCol.current_affiliations.map((ca) => {
       affiliations[ca.id] = [ca.department, ca.organization, ca.country].join(', ');
-    })
+    });
 
     const newAuthor = {
       id: selCol.id,
@@ -164,18 +172,19 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
     creators.push(newAuthor);
 
-    collaborations.splice(coidx, 1);
+    //collaborations.splice(coidx, 1);
 
     taggData.creators = creators;
     taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids.concat(affIds)));
     author_ids.push(newAuthor.id);
     taggData.author_ids = author_ids;
     taggData.affiliations = affiliations;
-    this.setState({ taggData, selectedAuthors: null, collaborations });
+    this.setState({ taggData, selectedAuthors: null });
   }
 
   onAddAff(g) {
-    const { fields, taggData } = this.state;
+    const { fields } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
     const department = fields[`${g.id}@line_department`];
     const organization = fields[`${g.id}@line_organization`];
     const country = fields[`${g.id}@line_country`];
@@ -207,8 +216,8 @@ export default class RepoReviewAuthorsModal extends React.Component {
   }
 
   onDeleteAff(g, aid) {
-    const { taggData } = this.state;
-    const { affiliations, affiliation_ids, creators, author_ids } = taggData;
+    const taggData = this.state.taggData || this.props.taggData;
+    const { creators } = taggData;
 
     const ax = findIndex(g.affiliationIds, o => o.id === aid);
     g.affiliationIds.splice(ax, 1);
@@ -221,6 +230,11 @@ export default class RepoReviewAuthorsModal extends React.Component {
     const { taggData } = this.state;
     const { element } = this.props;
 
+    if (taggData == null) {
+      alert('no changes!');
+      return true;
+    }
+
     const { creators } = taggData;
     const authorCount = (creators || []).length;
 
@@ -240,15 +254,15 @@ export default class RepoReviewAuthorsModal extends React.Component {
             PublicActions.displayReviewSample(element.id);
           }
 
-          this.setState({ modalShow: false });
+          this.setState({ taggData: null, modalShow: false });
         }
       });
     return true;
   }
 
   loadOrcid() {
-    const { taggData } = this.state;
-    const { affiliations, creators, affiliation_ids, author_ids, contributors } = taggData;
+    const taggData = this.state.taggData || this.props.taggData;
+    const { creators, contributors, author_ids } = taggData;
     let ids = [];
     ids.push(contributors.id);
     ids = ids.concat(author_ids);
@@ -298,20 +312,16 @@ export default class RepoReviewAuthorsModal extends React.Component {
   }
 
   loadCollaborations() {
-    const { element } = this.props;
-    const { taggData } = this.state;
-    const { creators, author_ids } = taggData;
-    UsersFetcher.fetchMyCollaborations({ id: element.id, type: element.elementType })
+    UsersFetcher.fetchMyCollaborations()
       .then((result) => {
-        const aCol = result.authors.filter(({ id }) => !(author_ids || []).includes(id));
         this.setState({
-          collaborations: aCol
+          collaborations: result.authors
         });
       });
   }
 
   handleDeleteAuthor(author) {
-    const { taggData } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
     const { creators, author_ids } = taggData;
     taggData.creators = filter(creators, o => o.id !== author.id);
     taggData.author_ids = filter(author_ids, o => o !== author.id);
@@ -321,32 +331,39 @@ export default class RepoReviewAuthorsModal extends React.Component {
   }
 
   contributor() {
-    const { taggData } = this.props;
+    const taggData = this.state.taggData || this.props.taggData;
     const contributors = taggData.contributors || {};
 
     const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
     const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
-      <div>  -{contributors.affiliations[k]}</div>
+      <div key={uuid.v4()}>  -{contributors.affiliations[k]}</div>
     ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br/> {aff} </div>)
+    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br /> {aff} </div>);
+
+  }
+
 
-  };
+  handleClose() {
+    this.setState({ taggData: null, modalShow: false })
+  }
 
   selectUsers() {
     const { selectedAuthors, collaborations } = this.state;
-
-    const { taggData } = this.props;
+    const taggData = this.state.taggData || this.props.taggData;
     const creators = taggData.creators || [];
+    const author_ids = taggData.author_ids || [];
 
     const affiliations = taggData.affiliations || [];
     let defaultSelectedAuthors = [];
 
-    const options = collaborations.map(c => (
+    const filterCol = (collaborations || []).filter(({ id }) => !(author_ids || []).includes(id));
+
+    const options = filterCol.map(c => (
       { label: c.name, value: c.id }
     ));
 
     if (selectedAuthors == null) {
-      defaultSelectedAuthors = creators.map((au) => (
+      defaultSelectedAuthors = creators.map(au => (
         { label: au.name, value: au.id }
       ));
     } else {
@@ -358,9 +375,9 @@ export default class RepoReviewAuthorsModal extends React.Component {
 
       const affIds = author.affiliationIds || [];
       const aff = affIds.map(id => (
-        <div>  -{affiliations[id]}</div>
+        <div key={uuid.v4()}>  -{affiliations[id]}</div>
       ));
-      return (<div>{orcid}{author.name}<br/>{aff}<br/></div>)
+      return (<div key={uuid.v4()}>{orcid}{author.name}<br />{aff}<br /></div>);
     });
 
     const authorCount = (creators || []).length;
@@ -388,22 +405,19 @@ export default class RepoReviewAuthorsModal extends React.Component {
             <Button bsStyle="success" onClick={() => this.onAddNewAuthor()}>
               <i className="fa fa-plus" />
               Add to Author List
-              </Button>
+            </Button>
           </InputGroup.Button>
-         </InputGroup>
-        <div>
-
-        </div>
+        </InputGroup>
       </div>
     );
   }
 
   render() {
     const { modalShow, countries, organizations, departments, fields } = this.state;
-    const { taggData } = this.state;
+    const taggData = this.state.taggData || this.props.taggData;
     const creators = taggData.creators || [];
 
-    if (this.props.reviewLevel != '2' || this.props.schemeOnly == true) {
+    if (this.props.isSubmitter != true || this.props.schemeOnly == true) {
       return '';
     }
 
@@ -445,7 +459,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
         </OverlayTrigger>
         <Modal
           show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
+          onHide={this.handleClose}
           dialogClassName="author-modal-dialog"
         >
           <Modal.Body style={{ overflow: 'auto' }}>
@@ -478,7 +492,7 @@ export default class RepoReviewAuthorsModal extends React.Component {
             </div>
 
             <ButtonToolbar>
-              <Button bsStyle="warning" onClick={() => this.setState({ modalShow: false })}> Close</Button>
+              <Button bsStyle="warning" onClick={() => this.handleClose()}> Close</Button>
               <Button
                 bsStyle="info"
                 onClick={() => this.loadOrcid()}
@@ -502,7 +516,7 @@ RepoReviewAuthorsModal.propTypes = {
     id: PropTypes.number,
     elementType: PropTypes.string
   }).isRequired,
-  reviewLevel: PropTypes.number,
+  isSubmitter: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   taggData: PropTypes.object.isRequired,
 };
@@ -510,7 +524,7 @@ RepoReviewAuthorsModal.propTypes = {
 
 
 RepoReviewAuthorsModal.defaultProps = {
-  reviewLevel: 0,
+  isSubmitter: false,
   schemeOnly: false,
   taggData: {}
 };
\ No newline at end of file
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
index ea964f64c..6f6fac396 100644
--- a/app/assets/javascripts/components/stores/PublicStore.js
+++ b/app/assets/javascripts/components/stores/PublicStore.js
@@ -271,6 +271,7 @@ class PublicStore {
         currentElement: result.element,
         historyInfo: (publication && publication.review && publication.review.history) || [],
         reviewLevel: result.element.reviewLevel,
+        isSubmitter: (result.element && result.element.isSubmitter) || false
       });
       Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
     }
@@ -288,6 +289,7 @@ class PublicStore {
         queryId: result.id,
         currentElement: result.element,
         historyInfo: (publication && publication.review && publication.review.history) || [],
+        isSubmitter: (result.element && result.element.isSubmitter) || false,
         reviewLevel: result.element && result.element.reviewLevel,
       });
       Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
index 3f50fdabf..5be544ef2 100644
--- a/app/assets/javascripts/libHome/RepoElementDetails.js
+++ b/app/assets/javascripts/libHome/RepoElementDetails.js
@@ -38,6 +38,7 @@ export default class RepoElementDetails extends Component {
           isPublished
           element={currentElement}
           reviewLevel={this.state.reviewLevel}
+          isSubmitter={this.state.isSubmitter}
           history={this.state.historyInfo ? this.state.historyInfo : []}
         />);
       case 'reaction': return (
@@ -45,6 +46,7 @@ export default class RepoElementDetails extends Component {
           isPublished
           reaction={currentElement}
           reviewLevel={this.state.reviewLevel}
+          isSubmitter={this.state.isSubmitter}
           history={this.state.historyInfo ? this.state.historyInfo : []}
         />);
       default: return <span />;
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index 950e77ffb..c6a53c14a 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -387,6 +387,7 @@ export default class RepoReactionDetails extends Component {
       isPublished,
       canComment,
       reviewLevel,
+      isSubmitter,
       history,
       canClose,
     } = this.props;
@@ -452,6 +453,7 @@ export default class RepoReactionDetails extends Component {
                   buttons={buttons}
                   buttonFunc={this.handleReviewBtn}
                   reviewLevel={reviewLevel}
+                  isSubmitter={isSubmitter}
                   taggData={taggData}
                   schemeOnly={schemeOnly}
                   currComment={(history && history.length > 0 && history.slice(-1).pop()) || {}}
@@ -525,6 +527,7 @@ RepoReactionDetails.propTypes = {
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
+  isSubmitter: PropTypes.bool,
   history: PropTypes.array,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
@@ -533,6 +536,7 @@ RepoReactionDetails.propTypes = {
 RepoReactionDetails.defaultProps = {
   isPublished: false,
   canComment: false,
+  isSubmitter: false,
   reviewLevel: 0,
   history: [],
   canClose: true,
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
index 2d76bc1bb..6ec0afdc8 100644
--- a/app/assets/javascripts/libHome/RepoReviewButtonBar.js
+++ b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
@@ -94,7 +94,7 @@ const RepoReviewButtonBar = props =>
         elementId={props.element.id}
         elementType={props.element.elementType.toLowerCase()}
       />
-      <RepoReviewAuthorsModal element={props.element} reviewLevel={props.reviewLevel} schemeOnly={props.schemeOnly} taggData={props.taggData} />
+      <RepoReviewAuthorsModal element={props.element} isSubmitter={props.isSubmitter} schemeOnly={props.schemeOnly} taggData={props.taggData} />
     </ButtonToolbar>
   );
 
@@ -106,6 +106,7 @@ RepoReviewButtonBar.propTypes = {
   buttons: PropTypes.arrayOf(PropTypes.string),
   buttonFunc: PropTypes.func,
   reviewLevel: PropTypes.number,
+  isSubmitter: PropTypes.bool,
   schemeOnly: PropTypes.bool,
   currComment: PropTypes.object,
   taggData: PropTypes.object
@@ -116,6 +117,7 @@ RepoReviewButtonBar.defaultProps = {
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
   buttonFunc: () => { },
   reviewLevel: 0,
+  isSubmitter: false,
   schemeOnly: false,
   currComment: {},
   taggData: {}
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
index 836658f25..c8b102166 100644
--- a/app/assets/javascripts/libHome/RepoReviewDetails.js
+++ b/app/assets/javascripts/libHome/RepoReviewDetails.js
@@ -9,7 +9,8 @@ export default class RepoReviewDetails extends Component {
     this.state = {
       element: props.element,
       history: [],
-      reviewLevel: 0
+      reviewLevel: 0,
+      isSubmitter: false
     };
 
     this.onStoreChange = this.onStoreChange.bind(this);
@@ -39,6 +40,7 @@ export default class RepoReviewDetails extends Component {
             reaction={currentElement.reaction}
             canComment
             reviewLevel={this.state.reviewLevel}
+            isSubmitter={this.state.isSubmitter}
             history={this.state.historyInfo ? this.state.historyInfo : []}
           />);
       case 'sample':
@@ -47,6 +49,7 @@ export default class RepoReviewDetails extends Component {
             element={currentElement}
             canComment
             reviewLevel={this.state.reviewLevel}
+            isSubmitter={this.state.isSubmitter}
             history={this.state.historyInfo ? this.state.historyInfo : []}
           />);
       default: return <span />;
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
index b84deefe2..5557d6c9a 100644
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -64,6 +64,7 @@ export default class RepoSampleDetails extends Component {
       isPublished,
       canComment,
       reviewLevel,
+      isSubmitter,
       history,
       canClose,
       buttons
@@ -150,6 +151,7 @@ export default class RepoSampleDetails extends Component {
                 element={{ id: sample.id, elementType: 'Sample' }}
                 buttonFunc={this.handleReviewBtn}
                 reviewLevel={reviewLevel}
+                isSubmitter={isSubmitter}
                 currComment={(history && history.slice(-1).pop()) || {}}
                 buttons={buttons}
                 taggData={tagData}
@@ -197,6 +199,7 @@ RepoSampleDetails.propTypes = {
   isPublished: PropTypes.bool,
   canComment: PropTypes.bool,
   reviewLevel: PropTypes.number,
+  isSubmitter: PropTypes.bool,
   history: PropTypes.array,
   canClose: PropTypes.bool,
   buttons: PropTypes.arrayOf(PropTypes.string),
@@ -206,6 +209,7 @@ RepoSampleDetails.defaultProps = {
   isPublished: false,
   canComment: false,
   reviewLevel: 0,
+  isSubmitter: false,
   history: [],
   canClose: true,
   buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
diff --git a/app/packs/src/components/fetchers/UsersFetcher.js b/app/packs/src/components/fetchers/UsersFetcher.js
index b7a089736..da41f3afa 100644
--- a/app/packs/src/components/fetchers/UsersFetcher.js
+++ b/app/packs/src/components/fetchers/UsersFetcher.js
@@ -2,12 +2,8 @@ import 'whatwg-fetch';
 
 export default class CollaboratorFetcher {
 
-  static fetchMyCollaborations(params=null) {
-    let api = '/api/v1/collaborators/list';
-    if (params != null && typeof params.id !== 'undefined') {
-      api = `/api/v1/collaborators/list?id=${params.id}&type=${params.type}`;
-    }
-    return fetch(api, {
+  static fetchMyCollaborations() {
+    return fetch('/api/v1/collaborators/list', {
       credentials: 'same-origin'
     }).then(response => response.json())
       .then(json => json)

From 99b7a5878198e0d07f1ef2cebcd5980cbffb83ab Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 4 Nov 2020 16:57:26 +0100
Subject: [PATCH 245/258] Collection description on hovering

---
 app/assets/javascripts/libHome/RepoCommon.js | 32 ++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 42f7a1e7b..088eea235 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -51,6 +51,37 @@ import { previewContainerImage } from '../components/utils/imageHelper';
 import RepoXvialButton from '../components/common/RepoXvialButton';
 import RepoPreviewImage from '../components/common/RepoPreviewImage';
 
+const CollectionDesc = (props) => {
+  let { label } = props;
+  if (typeof label !== 'string') return null;
+  if (label.match(/Reviewing/)) {
+    label = 'Reviewing';
+  } else if (label.match(/Element To Review/)) {
+    label = 'Element To Review';
+  } else if (label.match(/Reviewed/)) {
+    label = 'Reviewed';
+  }
+  const descs = {
+    Chemotion: 'Collection of all the samples and reactions, with analytical datasets, published on the Chemotion-Repository.',
+    'Scheme-only reactions': 'Collections of published scheme-only reactions (no associated analytical data).',
+    'My Published Elements': 'Collection of the published samples and reactions you submitted. The samples/reactions that were embargoed are placed in sub-folders.',
+    'Pending Publications': 'Collection of the samples and reactions you have submitted and are currently being reviewed.',
+    Reviewing: 'Collection of the samples and reactions that have been reviewed by a reviewer and needs revision from your side.',
+    'Element To Review': 'Collection of the samples and reactions that currently have to be reviewed.',
+    Reviewed: 'Collection of the samples and reactions that were reviewed and sent back to the submitters for revision/corrections (Read-Only). Waiting for resubmission.',
+    'Embargoed Publications': 'Collection under an embargo: the collection can only be released and its elements made public after all its elements have been accepted by a reviewer.'
+  };
+  const desc = descs[label];
+  if (desc === undefined) return null;
+  return (
+    <div style={{ float: 'right' }}>
+      <OverlayTrigger placement="right" overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
+        <i className="fa fa-info-circle" />
+      </OverlayTrigger>
+    </div>
+  );
+};
+
 const resizableSvg = path => (
   <div className="preview-table" style={{ cursor: 'row-resize' }}><SvgFileZoomPan svgPath={path} duration={300} resize /></div>
 );
@@ -2308,4 +2339,5 @@ export {
   ShowIndicator,
   SvgPath,
   ToggleIndicator,
+  CollectionDesc
 };

From 367b8e2085a8401a159ea30d52ee228008d5df11 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Tue, 3 Nov 2020 16:28:05 +0100
Subject: [PATCH 246/258] Provide a X-Vial list in Chemotion Repository for the
 authorized users. - Fetch data from a collection(Repo: Open Data Collection)
 of Compound platform. - Use compound_open_data.yml as configuration file, put
 aurthized user id in allowed_uids.

---
 app/api/chemotion/public_api.rb               | 30 +++++++++++--
 .../components/common/RepoXvialButton.js      | 43 +++++++++++++++++--
 app/assets/javascripts/libHome/RepoCommon.js  |  2 +-
 app/assets/javascripts/libHome/RepoPubl.js    | 15 ++++++-
 .../libHome/RepoReactionDetails.js            |  2 +-
 app/assets/javascripts/libHome/RepoSample.js  |  5 ++-
 .../javascripts/libHome/RepoSampleDetails.js  |  4 +-
 7 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index a5f317d6f..f516c1fa0 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -1650,9 +1650,27 @@ def query_ontologies(name)
               group by m.id
             ) c on c.molecule_id = molecules.id
           SQL
-          paginate(Molecule.joins(sample_join).joins(xvial_count).order("s.max_published_at desc").select(
+          com_config = Rails.configuration.compound_opendata
+          xvial_com = <<~SQL
+            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+          SQL
+          if com_config.present?
+            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
+                          <<~SQL
+                            inner join (
+                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
+                              group by m.id
+                            ) cod on cod.molcule_id = molecules.id
+                          SQL
+                        else
+                          <<~SQL
+                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+                          SQL
+                        end
+          end
+          paginate(Molecule.joins(sample_join).joins(xvial_count).joins(xvial_com).order("s.max_published_at desc").select(
             <<~SQL
-              molecules.*, sample_svg_file, xvial_count
+              molecules.*, sample_svg_file, xvial_count, xvial_com
             SQL
           ))
         end
@@ -1836,6 +1854,7 @@ def query_ontologies(name)
           entities = Entities::ReactionEntity.represent(reaction, serializable: true)
           entities[:products].each do |p|
             pub_product = p
+            p[:xvialCom] = build_xvial_com(p[:molecule]['inchikey'], current_user&.id)
             pub_product_tag = pub_product[:tag]['taggable_data']
             next if pub_product_tag.nil?
 
@@ -1845,6 +1864,7 @@ def query_ontologies(name)
             unless current_user.present? && User.reviewer_ids.include?(current_user.id)
               pub_product_tag['xvial']['num'] = 'x'
             end
+            p[:xvialCom][:hasSample] = true
           end
           entities[:publication]['review']['history'] = []
           entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
@@ -1866,6 +1886,7 @@ def query_ontologies(name)
         end
         get do
           molecule = Molecule.find(params[:id])
+          xvial_com = build_xvial_com(molecule.inchikey, current_user&.id)
           pub_id = Collection.public_collection_id
           if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
             adv = <<~SQL
@@ -1931,12 +1952,15 @@ def query_ontologies(name)
               sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
 
           end
+          x = published_samples.select { |s| s[:xvial].present? }
+          xvial_com[:hasSample] = x.length.positive?
           published_samples = published_samples.flatten.compact
           {
             molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
             published_samples: published_samples,
             isLogin: current_user.nil? ? false : true,
-            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false
+            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false,
+            xvialCom: xvial_com
           }
         end
       end
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
index d084b035c..0463219cb 100644
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, Tooltip, FormControl } from 'react-bootstrap';
+import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
+import uuid from 'uuid';
 import RepositoryFetcher from '../fetchers/RepositoryFetcher';
 import NotificationActions from '../actions/NotificationActions';
 
@@ -13,6 +14,40 @@ const registedCompoundTooltip = (
   </div>
 );
 
+const listCom = (xvialCom) => {
+  if (!xvialCom.allowed) return <br />;
+  const listComData = xvialCom.hasData ? (
+    xvialCom.data.map(x => (
+      <tr key={uuid.v4()}>
+        <td>{x.x_data.xid}</td>
+        <td>{x.x_data.provided_by}</td>
+        <td>{x.x_created_at}</td>
+        <td>{x.x_short_label}</td>
+        <td>{x.x_data.origin_id}</td>
+      </tr>
+    ))
+  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
+  return (
+    <div>
+      <h4><i>Reference (data from Compound platform)</i></h4>
+      <Table striped bordered condensed hover>
+        <thead>
+          <tr>
+            <th>X-Vial</th>
+            <th>Provided by</th>
+            <th>Created at</th>
+            <th>Short label of Sample</th>
+            <th>Name of origin Sample</th>
+          </tr>
+        </thead>
+        <tbody>
+          {listComData}
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
 export default class RepoXvialButton extends React.Component {
   constructor(props) {
     super(props);
@@ -69,7 +104,7 @@ export default class RepoXvialButton extends React.Component {
   render() {
     const { dataModalShow, requestModalShow } = this.state;
     const {
-      isEditable, isLogin, data, allowRequest
+      isEditable, isLogin, data, allowRequest, xvialCom
     } = this.props;
     const hasData = !!(data && data !== '');
     const compoundLink = hasData ? (
@@ -78,11 +113,11 @@ export default class RepoXvialButton extends React.Component {
       </OverlayTrigger>
     ) : null;
     const dataModal = (
-      <Modal show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
+      <Modal bsSize="large" show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
         <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
         <Modal.Body>
           <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
-          <br />
+          {listCom(xvialCom)}
           <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
           <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
         </Modal.Body>
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index 088eea235..c7501cc5d 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -966,7 +966,7 @@ class RenderAnalysisHeader extends Component {
               <span className="repo-pub-sample-header">
                 <span className="repo-pub-title"><IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" /></span>&nbsp;
                 <span className="repo-pub-title"><b>Product</b></span>&nbsp;
-                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} />
+                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} xvialCom={this.props.xvialCom} />
                 <RepoPublicComment isReviewer={this.props.isReviewer} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} userInfo={this.props.userInfo} pageType="reactions" pageId={this.props.reactionId} />&nbsp;
                 <RepoUserComment isLogin={this.props.isLogin} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} pageType="reactions" pageId={this.props.reactionId} />
                 <br /><br />
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
index 9bc89e80f..85ba92d52 100644
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ b/app/assets/javascripts/libHome/RepoPubl.js
@@ -19,6 +19,17 @@ import AutoCompleteInput from '../components/search/AutoCompleteInput';
 import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
 import Formula from '../components/common/Formula';
 
+const xvialTag = (element, hasXvial = null) => {
+  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
+  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
+  if (element.xvial_com === -1 || element.xvial_com === -2) {
+    hasXCom = hasX;
+  } else {
+    hasXCom = (element.xvial_com > 0);
+  }
+  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
+};
+
 const svgTag = (path, klassName, isPubElement) => {
   const popHover = (
     <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
@@ -56,7 +67,7 @@ const renderReaction = (element, currentElement, isPubElement) => {
         </div>
       </td>
       <td>
-        {element.xvial_count && element.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null}
+        {xvialTag(element)}
       </td>
     </tr>
   );
@@ -306,7 +317,7 @@ export default class RepoPubl extends Component {
               {molecule.iupac_name}
               <span className="repo-pub-list-icons">
                 {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-                {molecule.xvial_count && molecule.xvial_count > 0 ? <span className="xvial-span"><i className="icon-xvial" /></span> : null }
+                {xvialTag(molecule)}
               </span>
             </h4>
           </div>
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
index c6a53c14a..6e5aec189 100644
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ b/app/assets/javascripts/libHome/RepoReactionDetails.js
@@ -314,7 +314,7 @@ export default class RepoReactionDetails extends Component {
       return <div />;
     }
     const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} /> : <span />;
+    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} /> : <span />;
     const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
     const analysesView = analyses.map((analysis) => {
       const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
index 3ee525614..bcf06e1d3 100644
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ b/app/assets/javascripts/libHome/RepoSample.js
@@ -76,8 +76,9 @@ export default class RepoSample extends Component {
   render() {
     const {
       sample, pubData, tagData, isPublished,
-      canComment, handleCommentBtn, isLogin, isReviewer
+      canComment, handleCommentBtn, isLogin, isReviewer, element
     } = this.props;
+    const { xvialCom } = element;
     const { expandSA } = this.state;
 
     const affiliationMap = AffiliationMap(sample.affiliation_ids);
@@ -110,7 +111,7 @@ export default class RepoSample extends Component {
           <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={sample.id} type="sample" /></span>&nbsp;
           <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
           <SidToPubChem sid={sample.sid} />&nbsp;
-          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} />
+          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
           {IconLicense(sample.license, (sample.author_ids.length > 1))}
           <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
           <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
index 5557d6c9a..51a8b1a04 100644
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ b/app/assets/javascripts/libHome/RepoSampleDetails.js
@@ -75,7 +75,7 @@ export default class RepoSampleDetails extends Component {
     }
 
     const {
-      molecule, isLogin, isReviewer
+      molecule, isLogin, isReviewer, xvialCom
     } = element;
 
     const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
@@ -158,7 +158,7 @@ export default class RepoSampleDetails extends Component {
               /> : ''
           }
           {canClose ? <ClosePanel element={sample} /> : ''}
-          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} />
+          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} xvialCom={xvialCom} />
           <div>
             {details}
           </div>

From 75157e192ba278d4b4a6713b7a710dc3553dfa20 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Fri, 20 Nov 2020 18:20:17 +0100
Subject: [PATCH 247/258] add xvial and type check

---
 app/assets/javascripts/components/common/RepoXvialButton.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
index 0463219cb..4dad172a6 100644
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ b/app/assets/javascripts/components/common/RepoXvialButton.js
@@ -15,6 +15,7 @@ const registedCompoundTooltip = (
 );
 
 const listCom = (xvialCom) => {
+  if (typeof xvialCom === 'undefined') return <br />;
   if (!xvialCom.allowed) return <br />;
   const listComData = xvialCom.hasData ? (
     xvialCom.data.map(x => (

From 0c59147d2e8093ff0df107d476c737afbccf42d6 Mon Sep 17 00:00:00 2001
From: "chia-lin.lin" <chia-lin.lin@kit.edu>
Date: Wed, 24 Mar 2021 23:43:02 +0100
Subject: [PATCH 248/258] download analysis of publication without sign in

---
 app/api/chemotion/public_api.rb               | 57 +++++++++++++++++++
 .../components/fetchers/PublicFetcher.js      | 32 ++++++++++-
 app/assets/javascripts/libHome/RepoCommon.js  | 10 +++-
 .../libHome/RepoContainerDatasets.js          |  1 +
 .../javascripts/libHome/RepoElementDetails.js |  2 +-
 5 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index f516c1fa0..93d1ae817 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -1965,6 +1965,63 @@ def query_ontologies(name)
         end
       end
 
+      resource :download do
+        desc 'download publication file'
+        params do
+          requires :id, type: Integer, desc: 'Id'
+        end
+        resource :attachment do
+          desc 'download publication attachment'
+          after_validation do
+            @attachment = Attachment.find_by(id: params[:id])
+            error!('404 Attachment not found', 404) unless @attachment
+            @publication = @attachment&.container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
+          end
+          get do
+            content_type 'application/octet-stream'
+            header['Content-Disposition'] = "attachment; filename=#{@attachment.filename}"
+            env['api.format'] = :binary
+            @attachment.read_file
+          end
+        end
+        resource :dataset do
+          desc 'download publication dataset as zip'
+          after_validation do
+            @container = Container.find_by(id: params[:id])
+            error!('404 Dataset not found', 404) unless @container
+            @publication = @container&.parent&.publication
+            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
+          end
+          get do
+            content_type 'application/zip, application/octet-stream'
+            filename = URI.escape("#{@container.parent&.name.gsub(/\s+/, '_')}-#{@container.name.gsub(/\s+/, '_')}.zip")
+            header['Content-Disposition'] = "attachment; filename=#{filename}"
+            env['api.format'] = :binary
+            zip_f = Zip::OutputStream.write_buffer do |zip|
+              @container.attachments.each do |att|
+                zip.put_next_entry att.filename
+                zip.write att.read_file
+              end
+              zip.put_next_entry 'dataset_description.txt'
+              zip.write <<~DESC
+                dataset name: #{@container.name}
+                instrument: #{@container.extended_metadata.fetch('instrument', nil)}
+                description:
+                #{@container.description}
+
+                Files:
+              DESC
+              @container.attachments.each do |att|
+                zip.write "#{att.filename} #{att.checksum}\n"
+              end
+            end
+            zip_f.rewind
+            zip_f.read
+          end
+        end
+      end
+
       resource :metadata do
         desc "metadata of publication"
         params do
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
index 56c71c556..881eb62bc 100644
--- a/app/assets/javascripts/components/fetchers/PublicFetcher.js
+++ b/app/assets/javascripts/components/fetchers/PublicFetcher.js
@@ -1,5 +1,5 @@
-import 'whatwg-fetch'
-import _ from 'lodash'
+import 'whatwg-fetch';
+import _ from 'lodash';
 import Molecule from '../models/Molecule';
 import Reaction from '../models/Reaction';
 
@@ -226,4 +226,32 @@ export default class PublicFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
+
+  static downloadZip(id) {
+    let fileName = 'dataset.zip';
+    return fetch(`/api/v1/public/download/dataset?id=${id}`, {
+      credentials: 'same-origin', method: 'GET',
+    }).then((response) => {
+      const disposition = response.headers.get('Content-Disposition');
+      if (disposition && disposition.indexOf('attachment') !== -1) {
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        const matches = filenameRegex.exec(disposition);
+        if (matches != null && matches[1]) {
+          fileName = matches[1].replace(/['"]/g, '');
+        }
+      }
+      return response.blob();
+    }).then((blob) => {
+      const a = document.createElement('a');
+      a.style = 'display: none';
+      document.body.appendChild(a);
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch((errorMessage) => {
+      console.log(errorMessage);
+    });
+  }
 }
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
index c7501cc5d..7f4cfaea8 100644
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ b/app/assets/javascripts/libHome/RepoCommon.js
@@ -1745,6 +1745,7 @@ class RenderPublishAnalysesPanel extends Component {
           <b>Datasets</b>
           <RepoContainerDatasets
             container={this.props.analysis}
+            isPublic={this.props.isPublic}
           />
         </div>
       </div>
@@ -1872,6 +1873,7 @@ class RenderPublishAnalyses extends Component {
               <b>Datasets</b>
               <RepoContainerDatasets
                 container={this.props.analysis}
+                isPublic={this.props.isPublic}
               />
             </Col>
           </Panel.Body>
@@ -1892,7 +1894,8 @@ RenderPublishAnalyses.propTypes = {
     affiliation_ids: PropTypes.arrayOf(PropTypes.array),
     affiliations: PropTypes.object,
     published_at: PropTypes.string,
-  }).isRequired
+  }).isRequired,
+  isPublic: PropTypes.bool.isRequired
 };
 
 class PublishAnalysesTag extends Component {
@@ -2128,7 +2131,7 @@ ReactionTlc.propTypes = {
   bodyAttrs: PropTypes.object
 };
 
-const DatasetDetail = ({ element }) => {
+const DatasetDetail = ({ isPublished, element }) => {
   const { molecule } = element;
   molecule.tag = {
     taggable_data: { pubchem_cid: molecule.pubchem_cid }
@@ -2145,6 +2148,7 @@ const DatasetDetail = ({ element }) => {
       elementType="Sample"
       license={element.license}
       publication={element.publication}
+      isPublic={isPublished}
     />
   );
 
@@ -2162,7 +2166,7 @@ const DatasetDetail = ({ element }) => {
 };
 
 DatasetDetail.propTypes = {
-  element: PropTypes.object.isRequired,
+  element: PropTypes.object.isRequired, isPublished: PropTypes.bool.isRequired
 };
 
 const ClosePanel = ({ element }) => (
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
index ba3cbe81c..09d3a3149 100644
--- a/app/assets/javascripts/libHome/RepoContainerDatasets.js
+++ b/app/assets/javascripts/libHome/RepoContainerDatasets.js
@@ -52,6 +52,7 @@ export default class RepoContainerDatasets extends Component {
                     dataset_container={datasetContainer}
                     handleModalOpen={() => this.handleModalOpen(datasetContainer)}
                     disabled
+                    isPublic={this.props.isPublic}
                   />
                 </ListGroupItem>
               );
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
index 5be544ef2..075330b3d 100644
--- a/app/assets/javascripts/libHome/RepoElementDetails.js
+++ b/app/assets/javascripts/libHome/RepoElementDetails.js
@@ -32,7 +32,7 @@ export default class RepoElementDetails extends Component {
       return <span />;
     }
     switch (elementType) {
-      case 'dataset': return <DatasetDetail element={currentElement} />;
+      case 'dataset': return <DatasetDetail isPublished element={currentElement} />;
       case 'molecule': return (
         <RepoSampleDetails
           isPublished

From 021024d0fe7ca636ee5948adab86a7c5d150d844 Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Mon, 29 Mar 2021 15:40:58 +0200
Subject: [PATCH 249/258] view sprectra of products

---
 app/packs/src/components/ViewSpectra.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/packs/src/components/ViewSpectra.js b/app/packs/src/components/ViewSpectra.js
index e057f87cf..4f39d0c26 100644
--- a/app/packs/src/components/ViewSpectra.js
+++ b/app/packs/src/components/ViewSpectra.js
@@ -190,13 +190,14 @@ class ViewSpectra extends React.Component {
     const sis = spcInfos.filter(x => x.idx === spcIdx);
     const si = sis.length > 0 ? sis[0] : spcInfos[0];
 
-    const ops = sample.analysesContainers().map((ae) => {
+    const opsTmp = sample.analysesContainers().map((ae) => {
       if (ae.id !== si.idAe) return null;
       return ae.children.map((ai) => {
         if (ai.id !== si.idAi) return null;
         return ai.extended_metadata.content.ops; // eslint-disable-line
       }).filter(r => r !== null);
-    }).filter(r => r !== null)[0][0];
+    }).filter(r => r !== null);
+    const ops = opsTmp && opsTmp[0] && opsTmp[0][0];
     return ops;
   }
 

From 5fd2d129bc19009a082db48a250e3953b33c96c2 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Sat, 15 May 2021 07:43:09 +0200
Subject: [PATCH 250/258] minor upd  Gem.lock db/schema

---
 db/schema.rb | 84 ++++++++++++++++++++++++----------------------------
 1 file changed, 39 insertions(+), 45 deletions(-)

diff --git a/db/schema.rb b/db/schema.rb
index 6d7713b10..a8b28b954 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1844,53 +1844,20 @@
        RETURNS json
        LANGUAGE plpgsql
       AS $function$
-         begin
-          if (in_user_id = in_current_user_id) then
-            return null;
-          else
-            return (select row_to_json(result) from (
-            select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-            from users where id = $1
-            ) as result);
+      begin
+      	if p_allow IS false then
+      		return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
+      	elsif EXISTS(select * from to_regclass('compound_open_data') where to_regclass is not null) then
+      	   RETURN QUERY SELECT compound_open_data.* FROM compound_open_data;
+      	else
+      	   return QUERY SELECT compound_open_data_locals.* FROM compound_open_data_locals;
           end if;
-          end;
-       $function$
-  SQL
-  create_function :user_as_json, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_as_json(user_id integer)
-       RETURNS json
-       LANGUAGE sql
-      AS $function$
-         select row_to_json(result) from (
-           select users.id, users.name_abbreviation as initials ,users.type,users.first_name || chr(32) || users.last_name as name
-           from users where id = $1
-         ) as result
-       $function$
-  SQL
-  create_function :user_ids, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_ids(user_id integer)
-       RETURNS TABLE(user_ids integer)
-       LANGUAGE sql
-      AS $function$
-          select $1 as id
-          union
-          (select users.id from users inner join users_groups ON users.id = users_groups.group_id WHERE users.deleted_at IS null
-         and users.type in ('Group') and users_groups.user_id = $1)
-        $function$
+      END
+      $function$
   SQL
-  create_function :user_instrument, sql_definition: <<-SQL
-      CREATE OR REPLACE FUNCTION public.user_instrument(user_id integer, sc text)
-       RETURNS TABLE(instrument text)
-       LANGUAGE sql
-      AS $function$
-             select distinct extended_metadata -> 'instrument' as instrument from containers c
-             where c.container_type='dataset' and c.id in
-             (select ch.descendant_id from containers sc,container_hierarchies ch, samples s, users u
-             where sc.containable_type in ('Sample','Reaction') and ch.ancestor_id=sc.id and sc.containable_id=s.id
-             and s.created_by = u.id and u.id = $1 and ch.generations=3 group by descendant_id)
-             and upper(extended_metadata -> 'instrument') like upper($2 || '%')
-             order by extended_metadata -> 'instrument' limit 10
-           $function$
+
+  create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
+      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE PROCEDURE update_users_matrix()
   SQL
 
   create_view "literal_groups", sql_definition: <<-SQL
@@ -2055,4 +2022,31 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
+  create_view "compound_open_data_locals", sql_definition: <<-SQL
+      SELECT c.x_id,
+      c.x_sample_id,
+      c.x_data,
+      c.x_created_at,
+      c.x_updated_at,
+      c.x_inchikey,
+      c.x_sum_formular,
+      c.x_cano_smiles,
+      c.x_external_label,
+      c.x_short_label,
+      c.x_name,
+      c.x_stereo
+     FROM ( SELECT NULL::integer AS x_id,
+              NULL::integer AS x_sample_id,
+              NULL::jsonb AS x_data,
+              NULL::timestamp without time zone AS x_created_at,
+              NULL::timestamp without time zone AS x_updated_at,
+              NULL::character varying AS x_inchikey,
+              NULL::character varying AS x_sum_formular,
+              NULL::character varying AS x_cano_smiles,
+              NULL::character varying AS x_external_label,
+              NULL::character varying AS x_short_label,
+              NULL::character varying AS x_name,
+              NULL::jsonb AS x_stereo) c
+    WHERE (c.x_id IS NOT NULL);
+  SQL
 end

From ac68a805ae0d423c1b4950ee3bf4cf719409ee3f Mon Sep 17 00:00:00 2001
From: Paggy <pei-chi.huang@kit.edu>
Date: Wed, 14 Jul 2021 14:03:38 +0200
Subject: [PATCH 251/258] publication embargo search

---
 .babelrc.bak                                  |   10 -
 .github/ISSUE_TEMPLATE/bug_report.md          |   46 -
 .github/ISSUE_TEMPLATE/enhancement.md         |   19 -
 .github/ISSUE_TEMPLATE/feature.md             |   18 -
 .github/ISSUE_TEMPLATE/greater-code.md        |   15 -
 .github/ISSUE_TEMPLATE/installation-issue.md  |   39 -
 .github/PULL_REQUEST_TEMPLATE/generic.md      |   21 -
 .github/pull_request_template.md              |   21 -
 .gitignore                                    |    3 +
 .gitlab/merge_request_templates/generic.md    |   12 -
 CHANGELOG.md                                  |   95 +-
 CITATION.cff                                  |   31 -
 Dockerfile.focal.gitlab-ci                    |   81 -
 Gemfile.lock                                  |    2 +-
 Gemfile.plugin                                |    1 -
 INSTALL.md                                    |    1 +
 README.md                                     |    4 +
 app/api/chemotion/attachment_api.rb           |   36 +
 app/api/chemotion/gate_api.rb                 |   72 +
 app/api/chemotion/generic_element_api.rb      |    6 +-
 app/api/chemotion/public_api.rb               |  360 ++-
 app/api/chemotion/repository_api.rb           |    2 +-
 app/api/chemotion/sync_collection_api.rb      |   18 +
 .../javascripts/components/PublishCommon.js   |  327 ---
 .../components/PublishReactionContainers.js   |  150 --
 .../components/PublishReactionModal.js        |  838 ------
 .../components/PublishSampleModal.js          |  511 ----
 .../components/ReactionDetailsRepoComment.js  |   73 -
 .../components/SampleDetailsRepoComment.js    |   70 -
 .../components/actions/PublicActions.js       |  398 ---
 .../components/actions/RepositoryActions.js   |   65 -
 .../chemscanner/actions/storedFileActions.js  |  315 ---
 .../chemscanner/actions/uiActions.js          |   25 -
 .../components/ArchivedManagement.js          |  142 -
 .../components/ChemscannerImportModal.js      |  132 -
 .../chemscanner/components/EditMdlBtn.js      |   53 -
 .../chemscanner/components/EditableText.js    |   61 -
 .../components/FileItemActionsHeader.js       |  141 -
 .../components/FileItemActionsRenderer.js     |  260 --
 .../components/FileItemApproveFilter.js       |   97 -
 .../components/FileItemApproveRenderer.js     |   57 -
 .../components/FileItemFileNameFilter.js      |  127 -
 .../components/FileItemImportedFilter.js      |   98 -
 .../components/FileItemImportedRenderer.js    |   30 -
 .../components/FileItemInformationEditor.js   |  269 --
 .../components/FileItemInformationRenderer.js |  120 -
 .../components/FileItemVersionFilter.js       |   71 -
 .../chemscanner/components/FileStorage.js     |  351 ---
 .../chemscanner/components/ImportModal.js     |  116 -
 .../components/fileStorageUtils.js            |  302 ---
 .../containers/ArchivedManagementContainer.js |   61 -
 .../containers/FileStorageContainer.js        |  230 --
 .../containers/ImportModalContainer.js        |   38 -
 .../components/chemscanner/reactionUtils.js   |   41 -
 .../components/chemscanner/reducers/root.js   |   17 -
 .../chemscanner/reducers/schemes.js           |  176 --
 .../components/common/DeleteConfirmBtn.js     |   53 -
 .../common/DropdownButtonSelection.js         |   38 -
 .../javascripts/components/common/HelpInfo.js |   26 -
 .../components/common/InputButtonField.js     |   62 -
 .../components/common/NewsPreviewModal.js     |   33 -
 .../components/common/RepoColumnHis.js        |  108 -
 .../components/common/RepoCommentBtn.js       |   58 -
 .../components/common/RepoCommentModal.js     |   92 -
 .../components/common/RepoMetadataModal.js    |   91 -
 .../components/common/RepoPreviewImage.js     |   53 -
 .../components/common/RepoPublicComment.js    |  140 -
 .../common/RepoReviewAuthorsModal.js          |  530 ----
 .../components/common/RepoReviewHisColumns.js |   51 -
 .../components/common/RepoReviewModal.js      |  166 --
 .../components/common/RepoReviewTimeFormat.js |   24 -
 .../components/common/RepoSpectra.js          |   57 -
 .../components/common/RepoUserComment.js      |   94 -
 .../components/common/RepoXvialButton.js      |  208 --
 .../components/common/SelectionField.js       |   62 -
 .../components/fetchers/ArticleFetcher.js     |  111 -
 .../components/fetchers/PublicFetcher.js      |  257 --
 .../components/fetchers/RepositoryFetcher.js  |  466 ----
 .../components/report/SectionDoiList.js       |   89 -
 .../components/stores/LoadingStore.js         |   53 -
 .../components/stores/PublicStore.js          |  350 ---
 .../components/users/AuthorModal.js           |  625 -----
 .../utils/defaultAnalysisPublish.js           |   52 -
 .../javascripts/components/utils/helpDescs.js |   91 -
 .../javascripts/libHome/ContainerComponent.js |   98 -
 app/assets/javascripts/libHome/NavFooter.js   |   24 -
 app/assets/javascripts/libHome/Navigation.js  |  136 -
 app/assets/javascripts/libHome/RepoAbout.js   |  164 --
 app/assets/javascripts/libHome/RepoCommon.js  | 2347 -----------------
 app/assets/javascripts/libHome/RepoContact.js |   43 -
 .../libHome/RepoContainerDatasets.js          |   80 -
 .../javascripts/libHome/RepoDirective.js      |   41 -
 .../javascripts/libHome/RepoElementDetails.js |   63 -
 app/assets/javascripts/libHome/RepoEmbargo.js |  278 --
 .../javascripts/libHome/RepoEmbargoDetails.js |   47 -
 app/assets/javascripts/libHome/RepoHome.js    |  421 ---
 app/assets/javascripts/libHome/RepoHowTo.js   |  177 --
 .../libHome/RepoHowTo/EditorBtn.js            |   67 -
 .../libHome/RepoHowTo/EditorImage.js          |   43 -
 .../libHome/RepoHowTo/EditorRichText.js       |   30 -
 .../libHome/RepoHowTo/EditorStelle.js         |   84 -
 .../libHome/RepoHowToDragSource.js            |   21 -
 .../libHome/RepoHowToDropTarget.js            |   41 -
 .../javascripts/libHome/RepoHowToEditor.js    |  435 ---
 .../javascripts/libHome/RepoHowToReader.js    |  124 -
 .../javascripts/libHome/RepoNewsEditor.js     |  427 ---
 .../javascripts/libHome/RepoNewsReader.js     |  123 -
 .../javascripts/libHome/RepoNewsroom.js       |  186 --
 app/assets/javascripts/libHome/RepoPubl.js    |  758 ------
 .../libHome/RepoReactionDetails.js            |  544 ----
 .../libHome/RepoReactionSchemeInfo.js         |   83 -
 app/assets/javascripts/libHome/RepoReview.js  |  372 ---
 .../libHome/RepoReviewButtonBar.js            |  126 -
 .../javascripts/libHome/RepoReviewCommon.js   |  122 -
 .../javascripts/libHome/RepoReviewDetails.js  |   66 -
 app/assets/javascripts/libHome/RepoSample.js  |  177 --
 .../javascripts/libHome/RepoSampleDetails.js  |  216 --
 app/assets/javascripts/libHome/homeRoutes.js  |  219 --
 app/assets/stylesheets/common.scss            |    4 +-
 app/assets/stylesheets/repo_home.scss         |    7 +-
 app/jobs/chemotion_embargo_pubchem_job.rb     |   20 +
 app/mailers/publication_mailer.rb             |    2 +-
 app/models/concerns/attachment_jcamp_aasm.rb  |   14 +-
 app/models/concerns/segmentable.rb            |   35 +-
 app/models/molecule.rb                        |   14 +
 app/models/segment_klass.rb                   |    1 +
 app/models/user.rb                            |   46 +
 app/packs/src/components/ElementsTable.js     |    1 -
 app/packs/src/components/List.js              |    2 +-
 app/packs/src/components/PublishCommon.js     |   77 +-
 app/packs/src/components/ReactionDetails.js   |   39 +-
 app/packs/src/components/SampleDetails.js     |   38 +-
 .../components/SampleDetailsContainersAux.js  |    3 +-
 app/packs/src/components/SampleForm.js        |   27 +-
 app/packs/src/components/ViewSpectra.js       |   14 +-
 .../src/components/actions/EmbargoActions.js  |    2 +-
 .../src/components/actions/PublicActions.js   |   29 +
 .../contextActions/ExportImportButton.js      |    4 +-
 .../components/contextActions/NoticeButton.js |    5 +-
 .../elements/ElementFieldDragSource.js        |    2 -
 .../elements/ElementFieldDropTarget.js        |    2 -
 .../components/extra/SampleDetailsXTabs.js    |    2 +-
 .../src/components/fetchers/EmbargoFetcher.js |    2 -
 .../components/fetchers/GenericBaseFetcher.js |    1 -
 .../components/fetchers/RepositoryFetcher.js  |    2 -
 .../src/components/generic/SegmentDetails.js  |    2 +-
 app/packs/src/components/models/Element.js    |    2 +-
 .../src/components/stores/PublicStore.js      |    7 +
 app/packs/src/components/stores/UIStore.js    |   13 -
 app/packs/src/libHome/Home.js                 |    1 +
 app/packs/src/libHome/RepoCardIntro1.js       |   44 +
 .../src/libHome/RepoCardMoleculeArchive1.js   |   53 +
 .../src/libHome/RepoCardStaticsBoard1.js      |  111 +
 app/packs/src/libHome/RepoCollection.js       |    2 +
 app/packs/src/libHome/RepoCommon.js           |   48 +-
 app/packs/src/libHome/RepoEmbargoModal.js     |   22 +
 app/packs/src/libHome/RepoReactionDetails.js  |    4 +-
 app/packs/src/libHome/RepoReview.js           |    1 -
 app/packs/src/libHome/RepoReviewDetails.js    |    1 -
 app/packs/src/libHome/RepoSample.js           |    6 +-
 app/packs/src/libHome/RepoSampleDetails.js    |    4 +-
 app/packs/src/libHome/homeRoutes.js           |    9 +
 app/serializers/molecule_guest_serializer.rb  |    2 +-
 config/deploy/server_chemotion_net.rb         |   52 -
 config/routes.rb                              |    2 +-
 ...0712100000_add_segment_klass_identifier.rb |    3 +
 db/schema.rb                                  |   88 +-
 lib/export/export_collections.rb              |   83 +
 package.json                                  |    1 +
 .../images/wild_card/ORCIDiD_iconvector.svg   |   17 -
 public/sprite.png                             |  Bin 113523 -> 0 bytes
 public/swagger_doc.json                       |   46 -
 spec/examples.txt                             |    0
 yarn.lock                                     |  602 ++++-
 174 files changed, 1619 insertions(+), 18900 deletions(-)
 delete mode 100644 .babelrc.bak
 delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 delete mode 100644 .github/ISSUE_TEMPLATE/enhancement.md
 delete mode 100644 .github/ISSUE_TEMPLATE/feature.md
 delete mode 100644 .github/ISSUE_TEMPLATE/greater-code.md
 delete mode 100644 .github/ISSUE_TEMPLATE/installation-issue.md
 delete mode 100644 .github/PULL_REQUEST_TEMPLATE/generic.md
 delete mode 100644 .github/pull_request_template.md
 delete mode 100644 .gitlab/merge_request_templates/generic.md
 delete mode 100644 CITATION.cff
 delete mode 100644 Dockerfile.focal.gitlab-ci
 delete mode 100644 Gemfile.plugin
 delete mode 100644 app/assets/javascripts/components/PublishCommon.js
 delete mode 100644 app/assets/javascripts/components/PublishReactionContainers.js
 delete mode 100644 app/assets/javascripts/components/PublishReactionModal.js
 delete mode 100644 app/assets/javascripts/components/PublishSampleModal.js
 delete mode 100644 app/assets/javascripts/components/ReactionDetailsRepoComment.js
 delete mode 100644 app/assets/javascripts/components/SampleDetailsRepoComment.js
 delete mode 100644 app/assets/javascripts/components/actions/PublicActions.js
 delete mode 100644 app/assets/javascripts/components/actions/RepositoryActions.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/actions/uiActions.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/EditableText.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/FileStorage.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/ImportModal.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/reactionUtils.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/reducers/root.js
 delete mode 100644 app/assets/javascripts/components/chemscanner/reducers/schemes.js
 delete mode 100644 app/assets/javascripts/components/common/DeleteConfirmBtn.js
 delete mode 100644 app/assets/javascripts/components/common/DropdownButtonSelection.js
 delete mode 100644 app/assets/javascripts/components/common/HelpInfo.js
 delete mode 100644 app/assets/javascripts/components/common/InputButtonField.js
 delete mode 100644 app/assets/javascripts/components/common/NewsPreviewModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoColumnHis.js
 delete mode 100644 app/assets/javascripts/components/common/RepoCommentBtn.js
 delete mode 100644 app/assets/javascripts/components/common/RepoCommentModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoMetadataModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoPreviewImage.js
 delete mode 100644 app/assets/javascripts/components/common/RepoPublicComment.js
 delete mode 100644 app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoReviewHisColumns.js
 delete mode 100644 app/assets/javascripts/components/common/RepoReviewModal.js
 delete mode 100644 app/assets/javascripts/components/common/RepoReviewTimeFormat.js
 delete mode 100644 app/assets/javascripts/components/common/RepoSpectra.js
 delete mode 100644 app/assets/javascripts/components/common/RepoUserComment.js
 delete mode 100644 app/assets/javascripts/components/common/RepoXvialButton.js
 delete mode 100644 app/assets/javascripts/components/common/SelectionField.js
 delete mode 100644 app/assets/javascripts/components/fetchers/ArticleFetcher.js
 delete mode 100644 app/assets/javascripts/components/fetchers/PublicFetcher.js
 delete mode 100644 app/assets/javascripts/components/fetchers/RepositoryFetcher.js
 delete mode 100644 app/assets/javascripts/components/report/SectionDoiList.js
 delete mode 100644 app/assets/javascripts/components/stores/LoadingStore.js
 delete mode 100644 app/assets/javascripts/components/stores/PublicStore.js
 delete mode 100644 app/assets/javascripts/components/users/AuthorModal.js
 delete mode 100644 app/assets/javascripts/components/utils/defaultAnalysisPublish.js
 delete mode 100644 app/assets/javascripts/components/utils/helpDescs.js
 delete mode 100644 app/assets/javascripts/libHome/ContainerComponent.js
 delete mode 100644 app/assets/javascripts/libHome/NavFooter.js
 delete mode 100644 app/assets/javascripts/libHome/Navigation.js
 delete mode 100644 app/assets/javascripts/libHome/RepoAbout.js
 delete mode 100644 app/assets/javascripts/libHome/RepoCommon.js
 delete mode 100644 app/assets/javascripts/libHome/RepoContact.js
 delete mode 100644 app/assets/javascripts/libHome/RepoContainerDatasets.js
 delete mode 100644 app/assets/javascripts/libHome/RepoDirective.js
 delete mode 100644 app/assets/javascripts/libHome/RepoElementDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoEmbargo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoEmbargoDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHome.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToDragSource.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToDropTarget.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToEditor.js
 delete mode 100644 app/assets/javascripts/libHome/RepoHowToReader.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsEditor.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsReader.js
 delete mode 100644 app/assets/javascripts/libHome/RepoNewsroom.js
 delete mode 100644 app/assets/javascripts/libHome/RepoPubl.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReactionDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReview.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewButtonBar.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewCommon.js
 delete mode 100644 app/assets/javascripts/libHome/RepoReviewDetails.js
 delete mode 100644 app/assets/javascripts/libHome/RepoSample.js
 delete mode 100644 app/assets/javascripts/libHome/RepoSampleDetails.js
 delete mode 100644 app/assets/javascripts/libHome/homeRoutes.js
 create mode 100644 app/packs/src/libHome/RepoCardIntro1.js
 create mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive1.js
 create mode 100644 app/packs/src/libHome/RepoCardStaticsBoard1.js
 delete mode 100644 config/deploy/server_chemotion_net.rb
 delete mode 100644 public/images/wild_card/ORCIDiD_iconvector.svg
 delete mode 100644 public/sprite.png
 delete mode 100644 public/swagger_doc.json
 delete mode 100644 spec/examples.txt

diff --git a/.babelrc.bak b/.babelrc.bak
deleted file mode 100644
index e976af7a6..000000000
--- a/.babelrc.bak
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index ce79844da..000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
----
-
-- I am an ELNer
-- I am a developer
-- I am a system/ELN admin
-
-# Expected Behavior
-
-Please describe the behavior you are expecting
-
-# Current Behavior
-
-What is the current behavior?
-
-# Failure Information 
-
-Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
-
-## Steps to Reproduce
-
-Please provide detailed steps for reproducing the issue.
-
-1. step 1
-2. step 2
-3. you get it...
-
-## Context
-
-Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
-
- - OS: [e.g. iOS]
- - Chrome Browser 
- - Firefox Browser
- - ELN version, or branch, or commit
-
-
-## Failure Logs / Screenshots
-
-Include any relevant log snippets or files here.
diff --git a/.github/ISSUE_TEMPLATE/enhancement.md b/.github/ISSUE_TEMPLATE/enhancement.md
deleted file mode 100644
index c279b3b30..000000000
--- a/.github/ISSUE_TEMPLATE/enhancement.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-name: enhancement Issue
-about: About improving existing feature
-title: ''
-labels: ''
-assignees: ''
-
----
-
-- I am an ELNer / developer / system/ELN admin
-
-# Description
-Please provide a description of:
-1. what enhancement you suggest
-2. why you think it is needed (You might provide a use case here)
-
-# Image
-Please provide an image of how you expect your suggestion to appear in the ELN. 
-Details of the location of the enhancement and any related buttons could be useful in this image.
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
deleted file mode 100644
index 754e0d30f..000000000
--- a/.github/ISSUE_TEMPLATE/feature.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-name: Feature
-about: Getting new or revamping old feature
-title: ''
-labels: 'feature'
-assignees: ''
-
----
-- I am an ELNer / developer /  system/ELN admin
-
-# Description
-Please provide a description of:
-1. what feature you suggest
-2. why you think it is needed (You might provide a use case here)
-
-# Image
-Please provide an image of how you expect your suggestion to appear in the ELN. 
-Details of the location of the feautre and any related buttons could be useful in this image.
diff --git a/.github/ISSUE_TEMPLATE/greater-code.md b/.github/ISSUE_TEMPLATE/greater-code.md
deleted file mode 100644
index 23406f64e..000000000
--- a/.github/ISSUE_TEMPLATE/greater-code.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-name: Greater Code
-about: About greater coding
-title: ''
-labels: 'greater code'
-assignees: ''
-
----
-
-
-- refactoring
-- dependencies 
-- linting 
-- more testing
- 
diff --git a/.github/ISSUE_TEMPLATE/installation-issue.md b/.github/ISSUE_TEMPLATE/installation-issue.md
deleted file mode 100644
index 24a3ee41b..000000000
--- a/.github/ISSUE_TEMPLATE/installation-issue.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-name: Installation Issue
-about: About getting things running
-title: ''
-labels: ''
-assignees: ''
-
----
-
-I am setting up a
-- production
-- development environment
-
-
-# Failure Information 
-
-Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
-
-## Context
-
-Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
-
-
-I am 
-- using Docker
-- not using Docker 
- 
-- OS: 
-- ELN version, or branch, or commit
-
-## Steps to Reproduce
-
-1. step 1
-2. step 2
-3. you get it...
-
-## Failure Logs / Screenshots
-
-Include any relevant log snippets or files here.
diff --git a/.github/PULL_REQUEST_TEMPLATE/generic.md b/.github/PULL_REQUEST_TEMPLATE/generic.md
deleted file mode 100644
index 00c8d0573..000000000
--- a/.github/PULL_REQUEST_TEMPLATE/generic.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-- [ ] rather 1-story 1-commit than sub-atomic commits
-
-- [ ] commit title is meaningful =>  git history search
-
-- [ ] commit description is helpful => helps the reviewer to understand the changes
-
-- [ ] code is up-to-date with the latest developments of the target branch (rebased to it or whatever) => :fast_forward:-merge for linear history is favoured
-
-- [ ] added code is linted
-
-- [ ] tests are passing (at least locally): we still have some random test failure on CI. thinking of asking spec/examples.txt to be commited
-
-- [ ] in case the changes are visible to the end-user,  video or screenshots should be added to the PR => helps  with user testing
-
-- [ ] testing coverage is improved.
-
-- [ ] CHANGELOG :  add a bullet point on top (optional: reference to github issue/PR )
-
-- [ ] parallele PR for documentation  on docusaurus  if the feature/fix is tagged for a release
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
deleted file mode 100644
index a02ebfb7b..000000000
--- a/.github/pull_request_template.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-- [ ] rather 1-story 1-commit than sub-atomic commits
-
-- [ ] commit title is meaningful =>  git history search
-
-- [ ] commit description is helpful => helps the reviewer to understand the changes
-
-- [ ] code is up-to-date with the latest developments of the target branch (rebased to it or whatever) => :fast_forward:-merge for linear history is favoured
-
-- [ ] added code is linted
-
-- [ ] tests are passing (at least locally): we still have some random test failure on CI. thinking of asking spec/examples.txt to be commited
-
-- [ ] in case the changes are visible to the end-user,  video or screenshots should be added to the PR => helps  with user testing
-
-- [ ] testing coverage improvement is improved.
-
-- [ ] CHANGELOG :  add a bullet point on top (optional: reference to github issue/PR )
-
-- [ ] parallele PR for documentation  on docusaurus  if the feature/fix is tagged for a release
diff --git a/.gitignore b/.gitignore
index 875903d63..da6d6c141 100644
--- a/.gitignore
+++ b/.gitignore
@@ -124,6 +124,9 @@
 !/public/json/pictograms.json
 
 
+/public/jsmol/*
+!/public/jsmol/.keep
+
 /public/jsmol/*
 !/public/jsmol/.keep
 
diff --git a/.gitlab/merge_request_templates/generic.md b/.gitlab/merge_request_templates/generic.md
deleted file mode 100644
index 056bc73b5..000000000
--- a/.gitlab/merge_request_templates/generic.md
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-- [ ] rather 1-story 1-commit than sub-atomic commits
-- [ ] commit title is meaningful =>  git history search
-- [ ] commit description is helpful => helps the reviewer to understand the changes
-- [ ] code is up-to-date with the latest developments of the target branch (rebased to it or whatever) => :fast_forward:-merge for linear history is favoured
-- [ ] added code is linted
-- [ ] tests are passing (at least locally): we still have some random test failure on CI. thinking of asking spec/examples.txt to be commited
-- [ ] in case the changes are visible to the end-user,  video or screenshots should be added to the PR => helps  with user testing
-- [ ] testing coverage improvement is more than welcome.
-- [ ] CHANGELOG :  add a bullet point on top (optional: reference to github issue/PR )
-- [ ] (parallele PR for documentation  on docusaurus  if the feature/fix is tagged for a release)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c63d6cac..b51cd8a33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,5 @@
-# Chemotion_ELN Changelog
+
+# Chemotion_Repository Changelog
 
 ## [v1.8.0]
 > (2023-10-24)
@@ -494,72 +495,32 @@
 ## [v1.0.2]
 > 2021-10-19: https://github.com/ComPlat/chemotion_ELN/releases/tag/v1.0.2
 
-* Fixes
-  * DB migration: fix typo that could prevent updating from 0.9.1
-  * structure editor: chemdrawjs-20 support
-  * gate transfer: attachment checksum bckwrd compatibility
-
-
-## [v1.0.1]
-> 2021-10-11: https://github.com/ComPlat/chemotion_ELN/releases/tag/v1.0.1
-
-* Improvements
-  * LCSS display info only from ECHA source
-  * QuillEditor: added special characters menu for ResearchPlan
-
-* Fixes
-  * postinstall rewrite of some imports in citation.js to fix wbpk assets compilation
-  * Reaction SVG refresh  after editing or adding samples
-  * Fix Cron Jobs for LCSS and Pubchem Info
-  * dev: fix reaction seeds
-
-
-## [v1.0.0]
-> 2021-09-22: https://github.com/ComPlat/chemotion_ELN/releases/tag/v1.0.0
-
-* Improvements
-  * Resize private note field and remove save button [Private note rework #534](https://github.com/ComPlat/chemotion_ELN/issues/534)
-  * Add hover over information to generic elements' symbols [add hover over information to generic elements' symbols #524](https://github.com/ComPlat/chemotion_ELN/issues/524)
-  * Structure editor configuration [documentation](https://www.chemotion.net/chemotionsaurus/docs/eln/settings#structure-editor)
-
-* Fixes
-  * Adapt install_development.sh to Rails 5 environment [adapt install_development.sh to Rails 5 environment #530](https://github.com/ComPlat/chemotion_ELN/pull/530)
-  * Tab headers in navigation items are italic [Tab headers in navigation items are italic #500](https://github.com/ComPlat/chemotion_ELN/issues/500)
-  * Reaction svg shrinking or dedoubling
-  * Reaction svg size become smaller and the svg is overlapping
-  * Prevent hidden cell from being added to visible layout in tabslayout
-  * QC curation tab is not working
-
-
-## [v1.0.0-beta]
-> 2021-08-26
-
-* Updates
-  * upd to rails from 4.2 to 5.2
-  * now using yarn instead of npm, and webpack instead of browserify
-
-* New features and improvements
-  * Private notes for samples
-  * Generic elements/segments/datasets
-    - Element details tab layout: segment tab to show if data present [Element details tab layout: segment tab to show if data present #506](https://github.com/ComPlat/chemotion_ELN/issues/506)
-    - In user view, enable the sorting of lines of a table [generic elements, segments and analyses #480](https://github.com/ComPlat/chemotion_ELN/issues/480)
-    - Add samples to generic element in table #461 [Add samples to generic element in table #461](https://github.com/ComPlat/chemotion_ELN/issues/461)
-    - Generic element/segment units (Joule) [generic element/segment units (Joule) #457](https://github.com/ComPlat/chemotion_ELN/issues/457)
-    - Administrator can export/import the generic template [generic template upload and download #444](https://github.com/ComPlat/chemotion_ELN/issues/444)
-    - Revision control, track changes of the template and user inputs [generic revision feature #443](https://github.com/ComPlat/chemotion_ELN/issues/443)
-    - Drag and drop sample/molecule to the table [ELN Adminstration/generic elements: Create a table for drag and drop Sample/Molecule #437](https://github.com/ComPlat/chemotion_ELN/issues/437)
-    - new units for generic sections [new units for generic sections #436](https://github.com/ComPlat/chemotion_ELN/issues/436)
-    - new units for generic sections [new units for generic sections #434](https://github.com/ComPlat/chemotion_ELN/issues/434)
-    - Add new field type: Upload in generic element/segment #400 [Upload option in generic element/segment #400](https://github.com/ComPlat/chemotion_ELN/issues/400)
-  * Send welcome email for new users [Customized welcome email to new user #483](https://github.com/ComPlat/chemotion_ELN/issues/483)
-  * Instance customizable home page as MD file [Display customized welcome message at home page #470](https://github.com/ComPlat/chemotion_ELN/issues/470)
-  * Decoupled sample
-    - Remove name in scheme for decoupled sample [remove name in scheme for decoupled sample #465](https://github.com/ComPlat/chemotion_ELN/issues/465)
-    - Add "undefined structure" as default value for decoupled samples [Add "undefined structure" as default value for decoupled samples #463](https://github.com/ComPlat/chemotion_ELN/issues/463)
-    - Provide table function in generic element/segment [table function #414](https://github.com/ComPlat/chemotion_ELN/issues/414)
-  * Revamp of analytics inbox
-  * Report template management
-  * Device metadata
+## [1.1.0]
+> 2023-06-12
+
+* Enhancements:
+
+  * Integration of Molecule Archive to enhance data visibility and management capabilities.
+  * Support for assigning Collection DOIs, enabling persistent identification of collections.
+  * Shibboleth support for streamlined authentication and authorization processes.
+  * JSON-LD format support for enriched metadata representation.
+  * Open API for convenient downloading of metadata in JSON-LD format.
+  * Addition of group leader review functionality, facilitating improved collaboration and oversight.
+  * Support for publishing MOF reactions.
+  * Introduction of the Converter service, enabling format conversion for data.
+  * Introduction of the Ketcher backend service.
+  * Enriched metadata support for various types of published samples.
+  * Redesigned sample representation on the landing page for improved usability.
+  * Support for ORCID authentication, providing seamless user identification.
+  * Upgraded Chemspectra function.
+  * Styling improvements to enhance the user experience.
+
+* Bug Fixes:
+
+  * Addressed an issue with the exporting function when data includes hyperlinks.
+  * Resolved a QC issue related to the usage of 'mass spectrometry' and 'IR'.
+  * Corrected the nmrium aasm_state to ensure accurate representation.
+  * Fixed an issue where the embargo job would get stuck if the mail server did not respond.
 
 * Fixes
   * rename chemotion.net to chemotion-repository.net in the Collection Bar [rename chemotion.net to chemotion-repository.net in the Collection Bar #515](https://github.com/ComPlat/chemotion_ELN/issues/515)
diff --git a/CITATION.cff b/CITATION.cff
deleted file mode 100644
index 0e948137c..000000000
--- a/CITATION.cff
+++ /dev/null
@@ -1,31 +0,0 @@
-cff-version: 1.2.0
-message: "Please cite this software as specified in the 'preferred-citation' section below."
-title: "Chemotion Electronic Lab Notebook (ELN)"
-authors:
-  - name: "Chemotion ELN contributors"
-url: "https://github.com/ComPlat/chemotion_ELN"
-preferred-citation:
-  type: article
-  authors:
-  - family-names: "Tremouilhac"
-    given-names: "Pierre"
-  - family-names: "Nguyen"
-    given-names: "An"
-  - family-names: "Huang"
-    given-names: "Yu-Chieh"
-  - family-names: "Kotov"
-    given-names: "Serhii"
-  - family-names: "Lütjohann"
-    given-names: "Dominic Sebastian"
-  - family-names: "Hübsch"
-    given-names: "Florian"
-  - family-names: "Jung"
-    given-names: "Nicole"
-  - family-names: "Bräse"
-    given-names: "Stefan"
-  doi: "10.1186/s13321-017-0240-0"
-  journal: "Journal of Cheminformatics"
-  title: "Chemotion ELN: an Open Source electronic lab notebook for chemists in academia"
-  issue: 1
-  volume: 9
-  year: 2017
diff --git a/Dockerfile.focal.gitlab-ci b/Dockerfile.focal.gitlab-ci
deleted file mode 100644
index 8ed0f43fc..000000000
--- a/Dockerfile.focal.gitlab-ci
+++ /dev/null
@@ -1,81 +0,0 @@
-FROM ubuntu:focal
-
-ARG DEBIAN_FRONTEND=noninteractive
-ARG VRUBY=2.7.7
-ARG VNODE=14.21.3
-ARG VNODENEXT=16.16.0
-
-RUN set -xe  && apt-get update -yqqq --fix-missing && apt-get upgrade -y
-RUN apt update && apt-get install -yqq --fix-missing bash ca-certificates wget apt-transport-https git gpg\
-      imagemagick libmagic-dev libmagickcore-dev libmagickwand-dev curl gnupg2 \
-      build-essential nodejs sudo postgresql-client libappindicator1 swig \
-      gconf-service libasound2 libgconf-2-4 cmake \
-      libnspr4 libnss3 libpango1.0-0 libxss1 xdg-utils tzdata libpq-dev \
-      gtk2-engines-pixbuf \
-      libssl-dev libreadline-dev\
-      unzip openssh-client \
-      python-dev libsqlite3-dev libboost-all-dev p7zip-full \
-      xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable \
-      fonts-crosextra-caladea fonts-crosextra-carlito \
-      fonts-dejavu fonts-dejavu-core fonts-dejavu-extra fonts-liberation2 fonts-liberation \
-      fonts-linuxlibertine fonts-noto-core fonts-noto-extra fonts-noto-ui-core \
-      fonts-opensymbol fonts-sil-gentium fonts-sil-gentium-basic
-RUN  wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
-    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list \
-    && apt-get update -yqqq && apt-get -y install google-chrome-stable \
-    && CHROMEDRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` \
-    && mkdir -p /opt/chromedriver-$CHROMEDRIVER_VERSION \
-    && curl -sS -o /tmp/chromedriver_linux64.zip http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VERSION/chromedriver_linux64.zip \
-    && unzip -qq /tmp/chromedriver_linux64.zip -d /opt/chromedriver-$CHROMEDRIVER_VERSION \
-    && rm /tmp/chromedriver_linux64.zip \
-    && chmod +x /opt/chromedriver-$CHROMEDRIVER_VERSION/chromedriver \
-    && ln -fs /opt/chromedriver-$CHROMEDRIVER_VERSION/chromedriver /usr/local/bin/chromedriver
-RUN apt-get clean \
-    && rm -rf /var/lib/apt/lists/*
-RUN useradd -ms /bin/bash gitlab-runner \
-    && echo "gitlab-runner ALL=NOPASSWD: ALL" >> /etc/sudoers
-
-USER gitlab-runner
-WORKDIR /home/gitlab-runner
-
-SHELL ["/bin/bash", "-c"]
-
-RUN git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1
-
-ENV ASDF_DIR=/home/gitlab-runner/.asdf
-ENV PATH=/home/gitlab-runner/.asdf/shims:/home/gitlab-runner/.asdf/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
-
-RUN asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
-RUN asdf install nodejs $VNODE
-RUN asdf install nodejs $VNODENEXT
-RUN asdf global nodejs $VNODE
-
-RUN asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git
-RUN asdf install ruby $VRUBY
-RUN asdf global ruby $VRUBY
-
-RUN mkdir -p shared/node_modules
-RUN ln -s shared/node_modules node_modules
-
-
-COPY Gemfile /home/gitlab-runner/
-COPY Gemfile.lock /home/gitlab-runner/
-COPY package.json /home/gitlab-runner/
-COPY yarn.lock /home/gitlab-runner/
-COPY package_postinstall.sh /home/gitlab-runner/
-
-RUN sudo chmod 666 Gemfile.lock
-RUN sudo chmod 666 yarn.lock
-
-RUN /bin/bash -l -c "npm install -g yarn"
-RUN /bin/bash -l -c "yarn install"
-
-
-RUN /bin/bash -l -c "gem install bundler -v 2.1.4 && bundle install "
-#RUN /bin/bash -l -c "chromedriver-update"
-RUN sudo apt -yy remove lib*-dev
-RUN sudo apt-get -y --autoremove --fix-missing install \
-    libboost-serialization1.71.0 \
-    libboost-iostreams1.71.0 \
-    libboost-system1.71.0
-
diff --git a/Gemfile.lock b/Gemfile.lock
index 7195dd110..8175551e3 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -992,4 +992,4 @@ DEPENDENCIES
   yaml_db
 
 BUNDLED WITH
-   2.2.29
+   1.17.3
diff --git a/Gemfile.plugin b/Gemfile.plugin
deleted file mode 100644
index 3d89e5213..000000000
--- a/Gemfile.plugin
+++ /dev/null
@@ -1 +0,0 @@
-# gem 'nmr_sim', git: 'https://github.com/ComPlat/nmr_sim', ref: 'e2f91776aafd8eb1fa9d88c8ec2291b02201f222', group: [:plugins,:development,:production]
diff --git a/INSTALL.md b/INSTALL.md
index 8c87ecf85..fb2e33412 100644
--- a/INSTALL.md
+++ b/INSTALL.md
@@ -3,6 +3,7 @@
 
 see [docs on chemotion.net](https://chemotion.net/docs/eln/install_configure/)
 
+* To enable email confirmation, uncomment ":confirmable" at line 5 of `app/models/user.rb`, stop the `docker-compose` by `docker-compose stop` and start `docker-compose`.
 
 
 # Basic Development Setup
diff --git a/README.md b/README.md
index e0d6bf087..42b907e64 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,10 @@ of the **[Karlsruhe Institute of Technology]**.
 
 ## User Documentation
 
+This project has been funded by the **[DFG]**.
+
+[![DFG Logo]][DFG]
+
 ## User Documentation
 
 see online **⸢ [Documentation] ⸥**
diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index ca73c3128..db9323d3d 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -158,6 +158,13 @@ def validate_uuid_format(uuid)
                           (ElementPolicy.new(current_user, element).read? &&
                           ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
             end
+
+            if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
+              element = Segment.find(@attachment.attachable_id)&.element
+              can_dwnld = @attachment.created_for == current_user.id ||
+                          (ElementPolicy.new(current_user, element).read? &&
+                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
+            end
           end
           error!('401 Unauthorized', 401) unless can_dwnld
         end
@@ -569,6 +576,35 @@ def validate_uuid_format(uuid)
         end
       end
 
+      desc 'Regenerate edited spectra'
+      params do
+        requires :edited, type: Array[Integer]
+        optional :molfile, type: String
+      end
+      post 'regenerate_edited_spectrum' do
+        pm = to_rails_snake_case(params)
+        pm[:edited].each do |g_id|
+          att = Attachment.find(g_id)
+          next unless att
+          can_edit = writable?(att)
+          if can_edit
+            abs_path = att.abs_path
+            molfile = pm[:molfile]
+            result =  Tempfile.create('molfile') do |t_molfile|
+              t_molfile.write(molfile)
+              t_molfile.rewind
+              Chemotion::Jcamp::RegenerateJcamp.spectrum(
+                abs_path, t_molfile.path
+              )
+            end
+
+            att.file_data = result
+            att.rewrite_file_data!
+            { status: true }
+          end
+        end
+      end
+
       desc 'Save spectra to file'
       params do
         requires :attachment_id, type: Integer
diff --git a/app/api/chemotion/gate_api.rb b/app/api/chemotion/gate_api.rb
index 906697f1a..07eb980a6 100644
--- a/app/api/chemotion/gate_api.rb
+++ b/app/api/chemotion/gate_api.rb
@@ -159,6 +159,78 @@ def self.parsed?(value)
       end
 
 
+      desc <<~DESC
+        receive sample and reaction data from a remote eln and import them into a designated
+        collection according to JWT info. (authentication through JWT)
+      DESC
+      namespace :receiving_zip do
+        params do
+          requires :data, type: File
+        end
+
+        before do
+          http_token = if request.headers['Authorization'].present?
+                         request.headers['Authorization'].split(' ').last
+                       end
+          error!('Unauthorized', 401) unless http_token
+          secret = Rails.application.secrets.secret_key_base
+          begin
+            @auth_token = HashWithIndifferentAccess.new(
+              JWT.decode(http_token, secret)[0]
+            )
+          rescue JWT::VerificationError, JWT::DecodeError, JWT::ExpiredSignature => e
+            error!("#{e}", 401)
+          end
+          @user = Person.find_by(email: @auth_token[:iss])
+          error!('Unauthorized', 401) unless @user
+          @collection = Collection.find_by(
+            id: @auth_token[:collection], user_id: @user.id, is_shared: false
+          )
+          error!('Unauthorized access to collection', 401) unless @collection
+
+          @origin = @auth_token["origin"]
+        end
+
+        post do
+          db_file = params[:data]&.fetch('tempfile', nil)
+          # file = params[:file]
+          tempfile = db_file
+          att = Attachment.new(
+            filename: params[:data][:filename],
+            key: File.basename(tempfile.path),
+            file_path: tempfile,
+            created_by: @user.id,
+            created_for: @user.id,
+            content_type: 'application/zip'
+          )
+          begin
+            att.save!
+          ensure
+            tempfile.close
+            tempfile.unlink
+          end
+
+          begin
+            import = Import::ImportCollections.new(att, @user.id, true, @collection.id, @origin)
+            import.extract
+            import.import!
+          rescue => e
+            Delayed::Worker.logger.error e
+            Message.create_msg_notification(
+              channel_subject: Channel::COLLECTION_ZIP_FAIL,
+              message_from: @user&.id,
+              data_args: { col_labels: '', operation: 'import' },
+              autoDismiss: 5
+            )
+            @success = false
+          ensure
+            att&.destroy!
+          end
+          status(200)
+        end
+      end
+
+
       desc <<~DESC
         receive sample and reaction data from a remote eln and import them into a designated
         collection according to JWT info. (authentication through JWT)
diff --git a/app/api/chemotion/generic_element_api.rb b/app/api/chemotion/generic_element_api.rb
index 021461285..8f996e27a 100644
--- a/app/api/chemotion/generic_element_api.rb
+++ b/app/api/chemotion/generic_element_api.rb
@@ -189,11 +189,11 @@ class GenericElementAPI < Grape::API
         post do
           attach_ary = []
           att_ary = create_uploads('Element', params[:att_id], params[:elfiles], params[:elInfo], current_user.id) if params[:elfiles].present? && params[:elInfo].present?
-          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          (attach_ary << att_ary).flatten! unless att_ary.blank?
           att_ary = create_uploads('Segment', params[:att_id], params[:sefiles], params[:seInfo], current_user.id) if params[:sefiles].present? && params[:seInfo].present?
-          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          (attach_ary << att_ary).flatten! unless att_ary.blank?
           att_ary = create_attachments(params[:attfiles], params[:delfiles], params[:att_type], params[:att_id], current_user.id) if params[:attfiles].present? || params[:delfiles].present?
-          (attach_ary << att_ary).flatten! unless att_ary&.empty?
+          (attach_ary << att_ary).flatten! unless att_ary.blank?
           TransferThumbnailToPublicJob.set(queue: "transfer_thumbnail_to_public_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
           TransferFileFromTmpJob.set(queue: "transfer_file_from_tmp_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
           true
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 93d1ae817..22ce38320 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -8,26 +8,26 @@ module Chemotion
   # API for Public data
   class PublicAPI < Grape::API
     include Grape::Kaminari
-    helpers do
-      def send_notification(attachment, user, status, has_error = false)
-        data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
-        level = 'success'
-        if has_error
-          data_args['comment'] = ' an error has occurred, the file is not changed.'
-          level = 'error'
-        elsif status == 4
-          data_args['comment'] = ' file has not changed.'
-          level = 'info'
-        elsif @status == 7
-          data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
-          level = 'error'
-        end
-        message = Message.create_msg_notification(
-          channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
-          data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
-        )
-      end
-    end
+    # helpers do
+    #   def send_notification(attachment, user, status, has_error = false)
+    #     data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
+    #     level = 'success'
+    #     if has_error
+    #       data_args['comment'] = ' an error has occurred, the file is not changed.'
+    #       level = 'error'
+    #     elsif status == 4
+    #       data_args['comment'] = ' file has not changed.'
+    #       level = 'info'
+    #     elsif @status == 7
+    #       data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
+    #       level = 'error'
+    #     end
+    #     message = Message.create_msg_notification(
+    #       channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
+    #       data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
+    #     )
+    #   end
+    # end
     helpers CompoundHelpers
     helpers PublicHelpers
 
@@ -1529,7 +1529,7 @@ def query_ontologies(name)
         pub_coll = Collection.public_collection
         if current_user
           coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
-          { id: coll.id, is_sync_to_me: true  }
+          { id: coll&.id, is_sync_to_me: true  }
         else
           { id: nil }
         end
@@ -1605,11 +1605,11 @@ def query_ontologies(name)
           optional :pages, type: Integer, desc: "pages"
           optional :per_page, type: Integer, desc: "per page"
           optional :adv_flag, type: Boolean, desc: 'advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: MoleculeGuestListSerializer do
+        get '/' do
           public_collection_id = Collection.public_collection_id
           params[:adv_val]
           adv_search = ' '
@@ -1625,11 +1625,17 @@ def query_ontologies(name)
                 INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' css.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_samples css on css.sample_id = samples.id and css.deleted_at ISNULL
+                and #{param_sql}
+              SQL
             end
           end
           sample_join = <<~SQL
             INNER JOIN (
-              SELECT molecule_id, published_at max_published_at, sample_svg_file
+              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
               FROM (
               SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
               FROM samples, publications pub
@@ -1641,38 +1647,41 @@ def query_ontologies(name)
               )) s where rownum = 1
             ) s on s.molecule_id = molecules.id
           SQL
-          xvial_count = <<~SQL
-            inner join (
-              select count(e.id) as xvial_count, m.id as molecule_id from molecules m
-              inner join samples s on s.molecule_id = m.id
-              inner join publications p on p.element_type='Sample' and p.element_id=s.id  and p.deleted_at isnull
-              left outer join element_tags e on e.taggable_id = s.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-              group by m.id
-            ) c on c.molecule_id = molecules.id
+
+          embargo_sql = <<~SQL
+            molecules.*, sample_svg_file, sid,
+            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
+              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
+              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
+            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
+            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
           SQL
+
+          list = paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql))
+
+          entities = Entities::MoleculePublicationListEntity.represent(list, serializable: true)
+          sids = entities.map { |e| e[:sid] }
+
           com_config = Rails.configuration.compound_opendata
-          xvial_com = <<~SQL
-            inner join (select -1 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
           SQL
-          if com_config.present?
-            xvial_com = if com_config.allowed_uids.include?(current_user&.id)
-                          <<~SQL
-                            inner join (
-                              select count(a.x_id) as xvial_com, m.id molcule_id from molecules m left outer join com_xvial(true) a on a.x_inchikey = m.inchikey
-                              group by m.id
-                            ) cod on cod.molcule_id = molecules.id
-                          SQL
-                        else
-                          <<~SQL
-                            inner join (select -2 as xvial_com, m.id molcule_id from molecules m) cod on cod.molcule_id = molecules.id
-                          SQL
-                        end
+          x_cnt_ids = Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join molecules m on m.id = samples.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
           end
-          paginate(Molecule.joins(sample_join).joins(xvial_count).joins(xvial_com).order("s.max_published_at desc").select(
-            <<~SQL
-              molecules.*, sample_svg_file, xvial_count, xvial_com
-            SQL
-          ))
+          entities
         end
       end
 
@@ -1683,13 +1692,12 @@ def query_ontologies(name)
           optional :pages, type: Integer, desc: 'pages'
           optional :per_page, type: Integer, desc: 'per page'
           optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
           optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
         end
         paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: ReactionGuestListSerializer do
-
+        get '/' do
           if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
             case params[:adv_type]
             when 'Authors'
@@ -1698,11 +1706,16 @@ def query_ontologies(name)
                 and author_id in ('#{params[:adv_val].join("','")}')
               SQL
             when 'Ontologies'
-              str_term_id = params[:adv_val].split(',').map { |val| val}.to_s
               adv_search = <<~SQL
                 INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
                 and term_id in ('#{params[:adv_val].join("','")}')
               SQL
+            when 'Embargo'
+              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' cr.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
+              adv_search = <<~SQL
+                INNER JOIN collections_reactions cr on cr.reaction_id = reactions.id and cr.deleted_at is null
+                and #{param_sql}
+              SQL
             else
               adv_search = ' '
             end
@@ -1710,11 +1723,43 @@ def query_ontologies(name)
             adv_search = ' '
           end
 
+          com_config = Rails.configuration.compound_opendata
+          embargo_sql = <<~SQL
+            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, publications.taggable_data,
+            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
+            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
+            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
+            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
+          SQL
+
           if params[:scheme_only]
-            paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
           else
-            paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).includes(:publication).references(:publication).order('publications.published_at desc').uniq)
+            list = paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
           end
+
+          entities = Entities::ReactionPublicationListEntity.represent(list, serializable: true)
+
+          ids = entities.map { |e| e[:id] }
+
+          xvial_count_sql = <<~SQL
+            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
+          SQL
+          x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) || []
+
+          xvial_com_sql = <<~SQL
+            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
+            inner join molecules m on m.id = s.molecule_id
+            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
+          SQL
+          x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
+
+          entities = entities.each do |obj|
+            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:id])
+            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
+          end
+
+          entities
         end
       end
 
@@ -1805,163 +1850,90 @@ def query_ontologies(name)
         end
       end
 
-      resource :reaction do
+      resource :embargo do
         helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized reaction"
+        desc "Return PUBLISHED serialized collection"
         params do
-          requires :id, type: Integer, desc: "Reaction id"
+          requires :id, type: Integer, desc: "collection id"
         end
         get do
-          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
-          return nil unless r.present?
+          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
+          { col: pub }
+        end
+      end
 
-          reaction = Reaction.where('id = ?', params[:id])
-          .select(
-            <<~SQL
-            reactions.id, reactions.name, reactions.description, reactions.reaction_svg_file, reactions.short_label,
-            reactions.status, reactions.tlc_description, reactions.tlc_solvents, reactions.rf_value,
-            reactions.temperature, reactions.timestamp_start,reactions.timestamp_stop,reactions.observation,
-            reactions.rinchi_string, reactions.rinchi_long_key, reactions.rinchi_short_key,reactions.rinchi_web_key,
-            (select json_extract_path(taggable_data::json, 'publication') from publications where element_type = 'Reaction' and element_id = reactions.id) as publication,
-            reactions.duration
-            SQL
-          )
-          .includes(
-                container: :attachments
-          ).last
-          literatures = get_literature(params[:id],'Reaction') || []
-          reaction.products.each do |p|
-            literatures += get_literature(p.id,'Sample')
-          end
+      resource :col_list do
+        helpers RepositoryHelpers
+        get do
+          @embargo_collection = Collection.find(params[:collection_id])
+          anasql = <<~SQL
+            publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
+          SQL
+          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
+          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
+          list = sample_list + reaction_list
+          elements = []
+          list.each do |e|
+            element_type = e.element&.class&.name
+            u = User.find(e.published_by) unless e.published_by.nil?
+            svg_file = e.element.sample_svg_file if element_type == 'Sample'
+            title = e.element.short_label if element_type == 'Sample'
 
-          pub = Publication.find_by(element_type: 'Reaction', element_id: params[:id])
-          pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
-          infos = {}
-          ana_infos = {}
-          pd_infos = {}
-          pub.descendants.each do |pp|
-            review = pp.review || {}
-            info = review['info'] || {}
-            next if info.empty?
-            if pp.element_type == 'Sample'
-              pd_infos[pp.element_id] = info['comment']
-            else
-              ana_infos[pp.element_id] = info['comment']
-            end
+            svg_file = e.element.reaction_svg_file if element_type == 'Reaction'
+            title = e.element.short_label if element_type == 'Reaction'
+
+            scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
+            elements.push(
+              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
+              published_by: u&.name, submit_at: e.updated_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
+            )
           end
+          { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
+        end
+      end
 
-          schemeList = get_reaction_table(params[:id])
-          entities = Entities::ReactionEntity.represent(reaction, serializable: true)
-          entities[:products].each do |p|
-            pub_product = p
-            p[:xvialCom] = build_xvial_com(p[:molecule]['inchikey'], current_user&.id)
-            pub_product_tag = pub_product[:tag]['taggable_data']
-            next if pub_product_tag.nil?
+      resource :col_element do
+        helpers RepositoryHelpers
+        params do
+          requires :collection_id, type: Integer, desc: "collection id"
+          requires :el_id, type: Integer, desc: "element id"
+        end
+        get do
+          @embargo_collection = Collection.find(params[:collection_id])
+          if params[:el_type] == 'Reaction'
+            return get_pub_reaction(params[:el_id])
+          elsif params[:el_type] == 'Sample'
+            sample = Sample.find(params[:el_id])
+            return get_pub_molecule(sample.molecule_id)
+          end
+        end
+      end
 
-            xvial = pub_product_tag['xvial'] && pub_product_tag['xvial']['num']
-            next unless xvial.present?
+      resource :reaction do
+        helpers RepositoryHelpers
+        desc "Return PUBLISHED serialized reaction"
+        params do
+          requires :id, type: Integer, desc: "Reaction id"
+        end
+        get do
+          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
+          return nil unless r.present?
 
-            unless current_user.present? && User.reviewer_ids.include?(current_user.id)
-              pub_product_tag['xvial']['num'] = 'x'
-            end
-            p[:xvialCom][:hasSample] = true
-          end
-          entities[:publication]['review']['history'] = []
-          entities[:literatures] = literatures unless entities.nil? || literatures.nil? || literatures.length == 0
-          entities[:schemes] = schemeList unless entities.nil? || schemeList.nil? || schemeList.length == 0
-          entities[:isLogin] = current_user.present?
-          entities[:infos] = { pub_info: pub_info, pd_infos: pd_infos, ana_infos: ana_infos }
-          entities[:isReviewer] = current_user.present? && User.reviewer_ids.include?(current_user.id) ? true : false
-          entities
+          return get_pub_reaction(params[:id])
         end
       end
 
       resource :molecule do
+        helpers RepositoryHelpers
         desc "Return serialized molecule with list of PUBLISHED dataset"
         params do
           requires :id, type: Integer, desc: "Molecule id"
           optional :adv_flag, type: Boolean, desc: "advanced search flag"
-          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies]
+          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies Embargo]
           optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
         end
         get do
-          molecule = Molecule.find(params[:id])
-          xvial_com = build_xvial_com(molecule.inchikey, current_user&.id)
-          pub_id = Collection.public_collection_id
-          if params[:adv_flag].present? && params[:adv_flag] == true && params[:adv_type].present? && params[:adv_type] == 'Authors' && params[:adv_val].present?
-            adv = <<~SQL
-              INNER JOIN publication_authors rs on rs.element_id = samples.id and rs.element_type = 'Sample' and rs.state = 'completed'
-              and rs.author_id in ('#{params[:adv_val].join("','")}')
-            SQL
-          else
-            adv = ''
-          end
-
-          pub_samples = Collection.public_collection.samples
-            .includes(:molecule,:tag).where("samples.molecule_id = ?", molecule.id)
-            .where(
-              <<~SQL
-                samples.id in (
-                  SELECT samples.id FROM samples
-                  INNER JOIN collections_samples cs on cs.collection_id = #{pub_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-                  INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                  #{adv}
-                )
-              SQL
-            )
-            .select(
-              <<~SQL
-              samples.*, (select published_at from publications where element_type='Sample' and element_id=samples.id and deleted_at is null) as published_at
-              SQL
-            )
-            .order('published_at desc')
-          published_samples = pub_samples.map do |s|
-            containers = Entities::ContainerEntity.represent(s.container)
-            tag = s.tag.taggable_data['publication']
-            #u = User.find(s.tag.taggable_data['publication']['published_by'].to_i)
-            #time = DateTime.parse(s.tag.taggable_data['publication']['published_at'])
-            #published_time = time.strftime("%A, %B #{time.day.ordinalize} %Y %H:%M")
-            #aff = u.affiliations.first
-            next unless tag
-            literatures = Literature.by_element_attributes_and_cat(s.id, 'Sample', 'public')
-              .joins("inner join users on literals.user_id = users.id")
-              .select(
-                <<~SQL
-                literatures.*,
-                json_object_agg(users.name_abbreviation, users.first_name || chr(32) || users.last_name) as ref_added_by
-                SQL
-              ).group('literatures.id').as_json
-            reaction_ids = ReactionsProductSample.where(sample_id: s.id).pluck(:reaction_id)
-            pub = Publication.find_by(element_type: 'Sample', element_id: s.id)
-            sid = pub.taggable_data["sid"] unless pub.nil? || pub.taggable_data.nil?
-            xvial = s.tag.taggable_data['xvial'] && s.tag.taggable_data['xvial']['num'] unless s.tag.taggable_data.nil?
-            if xvial.present?
-              unless current_user.present? && User.reviewer_ids.include?(current_user.id)
-                xvial = 'x'
-              end
-            end
-            pub_info = (pub.review.present? && pub.review['info'].present? && pub.review['info']['comment']) || ''
-            ana_infos = {}
-            pub.descendants.each do |pp|
-              review = pp.review || {}
-              info = review['info'] || {}
-              next if info.empty?
-              ana_infos[pp.element_id] = info['comment']
-            end
-            tag.merge(analyses: containers, literatures: literatures, sample_svg_file: s.sample_svg_file, short_label: s.short_label,
-              sample_id: s.id, reaction_ids: reaction_ids, sid: sid, xvial: xvial, showed_name: s.showed_name, pub_id: pub.id, ana_infos: ana_infos, pub_info: pub_info)
-
-          end
-          x = published_samples.select { |s| s[:xvial].present? }
-          xvial_com[:hasSample] = x.length.positive?
-          published_samples = published_samples.flatten.compact
-          {
-            molecule: MoleculeGuestSerializer.new(molecule).serializable_hash.deep_symbolize_keys,
-            published_samples: published_samples,
-            isLogin: current_user.nil? ? false : true,
-            isReviewer: (current_user.present? && User.reviewer_ids.include?(current_user.id)) ? true : false,
-            xvialCom: xvial_com
-          }
+          get_pub_molecule(params[:id], params[:adv_flag], params[:adv_type], params[:adv_val])
         end
       end
 
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 85226b4e5..267dae3fb 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -607,7 +607,7 @@ def add_submission_history(root)
             review_info: review_info
           }
         end
-    end
+      end
 
       resource :sample do
         helpers RepositoryHelpers
diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index 8e27a0c38..7db435540 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -59,6 +59,24 @@ class SyncCollectionAPI < Grape::API
         end
       end
 
+      namespace :publication do
+        desc "Return the 'All' collection of the current user"
+        get do
+          current_user.sync_published_collection
+        end
+      end
+
+      namespace :review do
+        desc "Return the 'All' collection of the current user"
+        get do
+          if User.reviewer_ids.include?(current_user.id)
+            current_user.sync_element_to_review_collection
+          else
+            current_user.sync_reviewing_collection
+          end
+        end
+      end
+
       namespace :take_ownership do
         desc 'Take ownership of collection with specified sync_collections_user id'
         params do
diff --git a/app/assets/javascripts/components/PublishCommon.js b/app/assets/javascripts/components/PublishCommon.js
deleted file mode 100644
index 3dc367290..000000000
--- a/app/assets/javascripts/components/PublishCommon.js
+++ /dev/null
@@ -1,327 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Tooltip,
-  OverlayTrigger,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Aviator from 'aviator';
-import Sample from './models/Sample';
-import { sampleShowOrNew, reactionShow } from './routesUtils';
-import Reaction from './models/Reaction';
-import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '5px',
-  marginRight: '5px'
-};
-
-const handleClick = (e, id, clickType) => {
-  e.preventDefault();
-  e.stopPropagation();
-  const uri = Aviator.getCurrentURI();
-  const uriArray = uri.split(/\//);
-  switch (clickType) {
-    case 'Reaction':
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
-      reactionShow({ params: { reactionID: id } });
-      break;
-
-    default:
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
-      sampleShowOrNew({ params: { sampleID: id } });
-      break;
-  }
-};
-const validateYield = (reaction) => {
-  const result = [];
-  const products = reaction.products || [];
-  products.forEach((product) => {
-    const val = ((product.equivalent || 0) * 100).toFixed(0);
-    if (val === '0') result.push({ name: 'product-yield', value: false, message: `${product.molecule_iupac_name}: yield is 0` });
-  });
-  if (result.length !== 0 && result.length === products.length) return result;
-  return [];
-};
-
-const validateMolecule = (element) => {
-  const validates = [];
-  const sample = element;
-  const analyses = sample.analysisArray();
-  analyses.forEach((al) => {
-    const status = al.extended_metadata.status || '';
-    const kind = al.extended_metadata.kind || '';
-    if (status !== 'Confirmed') {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
-    }
-    if (kind === '' || (kind.split('|').length < 2)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
-    }
-    if (!isNmrPass(al, sample)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
-    }
-    if (!isDatasetPass(al)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
-    }
-  });
-  return validates;
-};
-
-const PublishBtnReaction = ({ reaction, showModal }) => {
-  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
-  // NB set publishedId to true to hide it
-  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
-  const notPublishable = reaction.notPublishable; // false or [samples]
-  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
-  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
-  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
-  return (
-    (!publishedId && !tagData.publication) ? (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
-      >
-        <Button
-          // style={{ display: 'none' }}
-          bsStyle="success"
-          bsSize="xsmall"
-          className="button-right"
-          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
-          onClick={() => showModal(!isDisabled)}
-          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
-        >
-          <i className="fa fa-paper-plane" />
-        </Button>
-      </OverlayTrigger>
-    ) : <span />
-  );
-};
-
-PublishBtnReaction.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
-
-const PublishBtn = ({ sample, showModal }) => {
-  const tagData = (sample.tag && sample.tag.taggable_data) || {};
-
-  const publishedId = tagData.public_sample;
-  const isPoly = sample._contains_residues;
-
-  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
-    >
-      <Button
-        bsStyle="success"
-        bsSize="xsmall"
-        className="button-right"
-        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-        onClick={() => showModal(!isPoly)}
-        // disabled={isPoly}
-        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
-      >
-        <i className="fa fa-paper-plane" />
-      </Button>
-    </OverlayTrigger>
-  ) : <span />;
-};
-
-PublishBtn.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  sample: PropTypes.instanceOf(Sample).isRequired,
-};
-
-const ReviewPublishBtn = ({ element, showComment, validation }) => {
-  const tagData = (element.tag && element.tag.taggable_data) || {};
-  const publishedId = tagData.public_sample || tagData.public_reaction;
-  const isDecline = (tagData && tagData.decline === true) || false;
-  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
-
-  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
-  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
-                    >
-                      <Button
-                        bsStyle="danger"
-                        bsSize="xsmall"
-                        className="button-right"
-                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-                        onClick={() => validation(element)}
-                      >
-                        <i className="fa fa-paper-plane" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />);
-  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
-                    >
-                      <Button
-                        bsSize="xsmall"
-                        bsStyle="success"
-                        target="_blank"
-                        className="button-right"
-                        onClick={showComment}
-                      >
-                        <i className="fa fa-comments" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />)
-  return (
-    <span>
-    {reviewBtn}
-    {commentBtn}
-    </span>
-  )
-};
-
-
-const PublishedTag = ({ element }) => {
-  const tag = (element && element.tag) || {};
-  const tagData = (tag && tag.taggable_data) || {};
-  const tagType = tag.taggable_type;
-  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
-  let tip = '';
-  let publishedId;
-  switch (tagType) {
-    case 'Reaction':
-      publishedId = tagData.public_reaction;
-      if (isPending) {
-        tip = 'Reaction is being reviewed';
-      } else {
-        tip = 'Reaction has been published';
-      }
-      break;
-
-    default:
-      publishedId = tagData.public_sample;
-      if (isPending) {
-        tip = 'Sample is being reviewed';
-      } else {
-        tip = 'Sample has been published';
-      }
-      break;
-  }
-  return (
-    publishedId ? (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="data public">{tip}</Tooltip>}
-      >
-        <Button
-          bsSize="xsmall"
-          bsStyle={isPending ? 'warning' : 'danger'}
-          style={labelStyle}
-          onClick={event => handleClick(event, publishedId, tagType)}
-        >
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    ) : null
-  );
-};
-
-PublishedTag.propTypes = {
-  element: PropTypes.object,
-};
-
-const LabelPublication = ({ element }) => {
-  const publication = element.tag && element.tag.taggable_data &&
-    element.tag.taggable_data.publication;
-
-  if (!publication) { return null; }
-
-  const time = new Date(publication.published_at || publication.doi_reg_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const contributor = publication.contributors && publication.contributors.name;
-  const publishedBy = publication.creators && publication.creators[0] && publication.creators[0].name;
-  const tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
-  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
-    element.publication.taggable_data.scheme_only === true) || false;
-  const pubDoi = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`
-
-
-  if (publication.published_at) {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
-        onClick={e => e.stopPropagation()}
-      >
-        <Button
-          bsSize="xsmall"
-          bsStyle="default"
-          style={labelStyle}
-          target="_blank"
-          href={pubDoi}
-        >
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  } else {
-    return (<span />);
-  }
-}
-
-LabelPublication.propTypes = {
-  element: PropTypes.object,
-}
-
-
-const ChemotionTag = ({ tagData, firstOnly = false }) => {
-  const chemotionTag = tagData.chemotion;
-  if (!chemotionTag) { return null; }
-  const { chemotion_first, last_published_at, doi } = chemotionTag;
-  if (firstOnly && !chemotion_first) { return null; }
-  const time = new Date(chemotion_first || last_published_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
-    : `Last published on ${formattedTime}`;
-  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
-
-
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
-      <a
-        style={labelStyle}
-        // bsSize="xsmall"
-        // bsStyle="default"
-        target="_blank"
-        href={`https://dx.doi.org/${doi}`}
-      >
-        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
-        {first}
-        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
-      </a>
-
-
-
-    </OverlayTrigger>
-  );
-};
-
-
-ChemotionTag.propTypes = {
-  tagData: PropTypes.object,
-};
-ChemotionTag.defaultProps = {
-  tagData: {},
-};
-
-module.exports = {
-  LabelPublication,
-  PublishedTag,
-  ChemotionTag,
-  PublishBtn,
-  PublishBtnReaction,
-  ReviewPublishBtn,
-  validateMolecule,
-  validateYield
-};
diff --git a/app/assets/javascripts/components/PublishReactionContainers.js b/app/assets/javascripts/components/PublishReactionContainers.js
deleted file mode 100644
index 3746a575c..000000000
--- a/app/assets/javascripts/components/PublishReactionContainers.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  PanelGroup,
-  Panel,
-  Button,
-} from 'react-bootstrap';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton';
-import Reaction from './models/Reaction';
-
-export default class PublishReactionContainers extends Component {
-  constructor(props) {
-    super();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      activeContainer: 0
-    };
-
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({ activeContainer: key });
-  }
-
-  render() {
-    const {reaction, activeContainer} = this.state;
-    const {readOnly} = this.props;
-
-    let containerHeader = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          {container.name}
-          {titleKind}
-          {titleStatus}
-          <Button
-            bsSize="xsmall"
-            bsStyle="danger"
-            className="button-right"
-            disabled={readOnly}
-            onClick={() => this.handleOnClickRemove(container)}
-          >
-            <i className="fa fa-trash" />
-          </Button>
-          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
-        </div>
-      )
-    };
-
-    let containerHeaderDeleted = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          <strike>
-            {container.name}
-            {titleKind}
-            {titleStatus}
-          </strike>
-          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
-                  onClick={() => this.handleUndo(container)}>
-            <i className="fa fa-undo"></i>
-          </Button>
-        </div>
-      )
-    };
-
-    if (reaction.container != null && reaction.container.children) {
-      const analyses_container = reaction.container.children.filter(element => (
-        ~element.container_type.indexOf('analyses')
-      ));
-
-      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
-        return (
-          <div>
-            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
-              {analyses_container[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Panel
-                      eventKey={key}
-                      key={`reaction_container_deleted_${container.id}`}
-                    >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                    </Panel>
-                  );
-                }
-
-                return (
-                  <Panel
-                    eventKey={key}
-                    key={`reaction_container_${container.id}`}
-                    onClick={this.handleAccordionOpen.bind(this, key)}
-                  >
-                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
-                    <Panel.Body collapsible>
-                      <ContainerComponent
-                        readOnly={readOnly}
-                        container={container}
-                        onChange={this.handleChange.bind(this, container)}
-                      />
-                    </Panel.Body>
-                  </Panel>
-                );
-              })}
-            </PanelGroup>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          style={{ marginBottom: '10px' }}
-          className="noAnalyses-warning"
-        >
-          There are currently no Analyses.
-        </div>
-      );
-    }
-
-    return (
-      <div className="noAnalyses-warning">
-        There are currently no Analyses.
-      </div>
-    );
-  }
-}
-
-PublishReactionContainers.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
diff --git a/app/assets/javascripts/components/PublishReactionModal.js b/app/assets/javascripts/components/PublishReactionModal.js
deleted file mode 100644
index ff9723dde..000000000
--- a/app/assets/javascripts/components/PublishReactionModal.js
+++ /dev/null
@@ -1,838 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel,
-  PanelGroup,
-  Button,
-  Modal,
-  Table,
-  OverlayTrigger, FormGroup,
-  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
-  Form,
-  Grid,
-  ControlLabel
-} from 'react-bootstrap';
-import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
-import Select from 'react-select';
-import Immutable from 'immutable';
-import { validateYield } from './PublishCommon';
-import Reaction from './models/Reaction';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import ReactionsFetcher from './fetchers/ReactionsFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, isNmrPass, isDatasetPass, PublishTypeAs, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import { contentToText } from './utils/quillFormat';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
-);
-
-const skimAnalysis = (sample) => {
-  const analyses = sample.analysisArray();
-  const publishedAnalyses = analyses.filter(a =>
-    (a.extended_metadata &&
-      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-  return publishedAnalyses.filter(a =>
-    (a.extended_metadata &&
-      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-};
-
-const publishOptions = { f: 'full', s: 'scheme-only' };
-
-export default class PublishReactionModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      selectedUsers: [],
-      collaborations: [],
-      showPreview: false,
-      showScheme: false,
-      currentUser,
-      showRinchi: false,
-      showProp: false,
-      showTlc: false,
-      selectedRefs: [],
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: [],
-      noSolvent: false,
-      schemeDesc: true,
-      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
-    };
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handlePublishReaction = this.handlePublishReaction.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
-    this.handleYieldChange = this.handleYieldChange.bind(this);
-    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
-    this.handleUnitChange = this.handleUnitChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  handleInputChange(type, event) {
-    const { reaction } = this.state;
-    switch (type) {
-      case 'temperature':
-        reaction.temperature.userText = event.target.value;
-        break;
-      case 'temperatureUnit':
-        reaction.temperature = reaction.convertTemperature(event);
-        break;
-      case 'duration':
-        reaction.durationDisplay = { nextValue: event.target.value };
-        break;
-      case 'durationUnit':
-        reaction.durationDisplay = { nextUnit: true };
-        break;
-      default:
-        break;
-    }
-    this.setState({ reaction });
-  }
-
-  handleYieldChange(p, event) {
-    const { value } = event.target;
-    if (!isNaN(value)) {
-      const { reaction } = this.state;
-      const { products } = reaction;
-      const product = products.find(e => e.id === p.id);
-      if (typeof product !== 'undefined') {
-        product.equivalent = (value / 100);
-        products.splice(products.findIndex(e => e.id === p.id), 1, product);
-        reaction.products = products;
-        this.setState({ reaction });
-      }
-    }
-  }
-
-  handlePropertiesChange(type, event) {
-    if (type === 'temperature') {
-      this.handleInputChange(type, event);
-    }
-    if (type === 'duration') {
-      const { value } = event.target;
-      if (!isNaN(value)) {
-        this.handleInputChange(type, event);
-      }
-    }
-    if (type === 'schemeDesc') {
-      this.setState({ schemeDesc: !this.state.schemeDesc });
-    }
-  }
-
-  handleUnitChange(type, event) {
-    let index;
-    let unit;
-    switch (type) {
-      case 'temperatureUnit':
-        index = Reaction.temperature_unit.indexOf(event);
-        unit = Reaction.temperature_unit[(index + 1) % 3];
-        this.handleInputChange('temperatureUnit', unit);
-        break;
-      case 'durationUnit':
-        this.handleInputChange('durationUnit', event);
-        break;
-      default:
-        break;
-    }
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  handleNoSolventCheck() {
-    this.setState({ noSolvent: !this.state.noSolvent });
-  }
-
-  loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
-    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
-      <div>  -{currentUser.current_affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handleAnalysesChecked(analysis, elementType) {
-    const { reaction } = this.state;
-
-    reaction.changed = true;
-    if (elementType === 'Reaction') {
-      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-      // Find the index of the element and then replace
-      const index = findIndex(elements, { id: analysis.id });
-      if (index !== -1) {
-        elements.splice(index, 1, analysis);
-        this.setState(prevState => ({ ...prevState, reaction }));
-      }
-    }
-    if (elementType === 'Product') {
-      const analysesReactionProducts = reaction.products;
-      analysesReactionProducts.forEach((product) => {
-        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        // Find the index of the element and then replace
-        const index = findIndex(elements, { id: analysis.id });
-        if (index !== -1) {
-          elements.splice(index, 1, analysis);
-          this.setState(prevState => ({ ...prevState, reaction }));
-        }
-      });
-    }
-    this.props.onHandleAnalysesCheck(this.state.reaction);
-  }
-
-  validateAnalyses() {
-    let pas = this.state.reaction.products.reduce(
-      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(this.state.reaction)
-    );
-    if (pas.length === 0) {
-      return false;
-    }
-
-    pas = AnalysisIdstoPublish(this.state.reaction);
-    if (pas.length > 0) {
-      return true;
-    }
-
-    const { reaction } = this.state;
-    const { products } = reaction;
-    for (let i = 0; i < products.length; i += 1) {
-      const pa = skimAnalysis(products[i]);
-      if (pa.length > 0) { return true; }
-    }
-
-    return false;
-  }
-
-  handlePublishReaction() {
-    const { selectedLicense, cc0Consent, publishType, selectedUsers} = this.state;
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
-      return true;
-    }
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
-      alert("Please add an author or check 'add me as author'.");
-      return true;
-    }
-
-    const { reaction } = this.state;
-    if (isFullyPublish) {
-      const { samples } = reaction;
-      for (let i = 0; i < samples.length; i += 1) {
-        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
-      }
-    }
-
-    LoadingActions.start();
-    RepositoryActions.publishReaction({
-      isFullyPublish,
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      schemeDesc: this.state.schemeDesc,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide(false);
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reReaction) => {
-        this.props.onPublishRefreshClose(reReaction, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishReactionReserveDois({
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reaction) => {
-        this.props.onPublishRefreshClose(reaction, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-    const authorCount = selectedUsers && selectedUsers.length;
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
-    });
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="80%" />
-            <th width="20%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            return (
-              <tr key={id}>
-                <td className="padding-right" style={{ display: 'inline-flex;' }}>
-                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
-                  >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  handlePublishTypeChange(e) {
-    const { publishType } = this.state;
-    publishType.selected = e;
-    this.setState({ publishType });
-  }
-
-  validatePub(isFullyPublish = true) {
-    const { reaction } = this.state;
-    let validates = [];
-    if (isFullyPublish) {
-      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-      const desc = contentToText(reaction.description).trim() || '';
-      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
-      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
-      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
-      const hasSv =
-        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
-      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
-      const hasProduct = reaction.products && reaction.products.length > 0;
-      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
-
-      (reaction.starting_materials || []).forEach((st) => {
-        if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      (reaction.products || []).forEach((prod) => {
-        if (!prod.amount || !prod.amount.value) {
-          validates.push({ name: 'product-amount', value: false, message: `${prod.molecule_iupac_name}: amount is 0` });
-        }
-      });
-    } else {
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-    }
-    validates = validates.concat(validateYield(reaction));
-    return validates;
-  }
-
-  render() {
-    const { show } = this.props;
-    const {
-      reaction, selectedUsers, selectedRefs, publishType
-    } = this.state;
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
-    const validateInfo = this.validatePub(isFullyPublish);
-    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
-    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
-    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
-    const validated = !!(validateObjs && validateObjs.length === 0);
-
-    let selectedAnalysesCount = (this.state.reaction.analyses || [])
-      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
-      && a.extended_metadata.kind)).length;
-
-    const productDOI = product => (
-      <tr key={`doi-product-row-${product.id}`}>
-        <td>
-          Product {product.name}
-        </td>
-        <td>
-          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    const productAnalysesDOI = analysis => (
-      <tr key={`doi-product-analysis-row-${analysis.id}`}>
-        <td>
-          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
-        </td>
-        <td>
-          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    if (show) {
-      const analysesView = [];
-      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-
-      selectedAnalysesCount = (analysesReaction || []).filter(a =>
-        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
-
-      const analysesViewReaction = analysesReaction.map(analysis => (
-        <PublishAnalysesTag
-          reaction={reaction}
-          analysis={analysis}
-          key={`reaction_${analysis.id}`}
-          analysesType="Reaction"
-          handleAnalysesChecked={this.handleAnalysesChecked}
-        />
-      ));
-      analysesView.push(analysesViewReaction);
-
-      const analysesReactionProductsDOIs = [];
-      const analysesReactionProducts = reaction.products;
-
-      analysesReactionProducts.forEach((product) => {
-        const arrP = [];
-        arrP.push(product);
-        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
-        analysesView.push(tmpProduct);
-
-        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        const tmpTag = tmp.map(analysis => (
-          <PublishAnalysesTag
-            reaction={reaction}
-            analysis={analysis}
-            key={`reaction_product_${analysis.id}`}
-            analysesType="Product"
-            handleAnalysesChecked={this.handleAnalysesChecked}
-            product={product}
-          />
-        ));
-        analysesView.push(tmpTag);
-        analysesReactionProductsDOIs.push(productDOI(product));
-        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
-        selectedAnalysesCount += (tmp || []).filter(a =>
-          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
-            && ((a.extended_metadata.status || '') === 'Confirmed')
-            && (isNmrPass(a, product))
-            && (isDatasetPass(a))
-          )).length;
-      });
-
-      const {
-        selectedEmbargo, selectedLicense, cc0Consent
-      } = this.state;
-
-      const publishTypeAs = {
-        ...publishType,
-        onChange: this.handlePublishTypeChange
-      };
-
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
-            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
-              <Grid style={{ width: '100%' }}>
-                <Col sm={6} lg={6}>
-                  <Form inline>
-                    <FormGroup controlId="frmCtrlPublishType">
-                      <ControlLabel>
-                        Publish Reaction as
-                      </ControlLabel>{' '}
-                      <PublishTypeAs {...publishTypeAs} />
-                    </FormGroup>
-                  </Form>
-                </Col>
-                <Col sm={6} lg={6}>
-                  {' '}
-                </Col>
-              </Grid>
-            </Modal.Header>
-            <Modal.Body style={{
-              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
-            }}
-            >
-              <EmbargoCom
-                opts={this.state.bundles}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <FormGroup>
-                <Col md={12} sm={12}>
-                  <div style={{
-                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
-                }}>{validateMsg}
-                  </div>
-                </Col>
-              </FormGroup>
-              <div className={`display-${isFullyPublish}`}>
-                <ReactionInfo
-                  reaction={reaction}
-                  toggleScheme={this.toggleScheme}
-                  showScheme={this.state.showScheme}
-                  isPublic={false}
-                  toggleRinchi={this.toggleRinchi}
-                  showRinchi={this.state.showRinchi}
-                  toggleProp={this.toggleProp}
-                  showProp={this.state.showProp}
-                  toggleTlc={this.toggleTlc}
-                  showTlc={this.state.showTlc}
-                />
-              </div>
-              <div className={`display-${!isFullyPublish}`}>
-                <ReactionSchemeOnlyInfo
-                  reaction={reaction}
-                  isPublic={false}
-                  schemeDesc={this.state.schemeDesc}
-                  onYieldChange={this.handleYieldChange}
-                  onPropertiesChange={this.handlePropertiesChange}
-                  onUnitChange={this.handleUnitChange}
-                />
-              </div>
-              <Checkbox
-                onChange={() => { this.handleNoSolventCheck(); }}
-                checked={this.state.noSolvent}
-                className={`display-${isFullyPublish}`}
-              >
-                <span>This reaction has no solvents</span>
-              </Checkbox>
-              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
-                <Panel
-                  eventKey="2"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <div>
-                      <Row>
-                        <Col md={12}>
-                          <h5>
-                            <b>Datasets: </b>
-                            <br />
-                          </h5>
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col md={12}>
-                          <PanelGroup accordion id={`panelgroup_ds_${reaction.id}`} defaultActiveKey={0}>
-                            {flatten(analysesView)}
-                          </PanelGroup>
-                        </Col>
-                      </Row>
-                    </div>
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="3"
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="5"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-            </Modal.Body>
-            <Modal.Footer style={{ padding: '6px' }}>
-              <Button onClick={() => this.props.onHide(false)}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
-                Publish Reaction
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishReactionModal.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-  onHandleAnalysesCheck: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/PublishSampleModal.js b/app/assets/javascripts/components/PublishSampleModal.js
deleted file mode 100644
index d4f8ea16a..000000000
--- a/app/assets/javascripts/components/PublishSampleModal.js
+++ /dev/null
@@ -1,511 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel, PanelGroup, Modal, Table,
-  ListGroupItem, ListGroup, Button, Checkbox,
-  Popover, OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-import Select from 'react-select';
-import Immutable from 'immutable';
-import { sortedUniq } from 'lodash';
-
-import Sample from './models/Sample';
-import SampleDetailsContainers from './SampleDetailsContainers';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import { MoleculeInfo, EmbargoCom, DownloadDOICsv, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import SamplesFetcher from './fetchers/SamplesFetcher';
-import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-
-export default class PublishSampleModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { sample } = props;
-    this.state = {
-      sample,
-      selectedUsers: [],
-      showSelectionUser: false,
-      showSelectionAnalysis: false,
-      showPreview: false,
-      currentUser,
-      selectedRefs: [],
-      collaborations: [],
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: []
-    };
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handleSampleChanged = this.handleSampleChanged.bind(this);
-    this.handlePublishSample = this.handlePublishSample.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      sample: nextProps.sample,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  loadBundles() {
-    RepositoryFetcher.fetchEmbargoCollections().then((result) => {
-      const cols = result.repository;
-      const bundles = [];
-      if (cols && cols.length > 0) {
-        cols.forEach((col) => {
-          bundles.push({ value: col.id, name: col.label, label: col.label });
-        });
-        this.setState({ bundles });
-      }
-    });
-  }
-
-  loadMyCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handleSampleChanged(sample) {
-    this.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  validateAnalyses() {
-    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
-  validateSubmission() {
-    const { sample } = this.state;
-    const analyses = sample.analysisArray();
-
-    if (!this.validateAnalyses()) {
-      return false;
-    }
-
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  handlePublishSample() {
-    const { selectedLicense, cc0Consent } = this.state;
-    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
-    const plural = authorCount > 0 ? 's' : '';
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (!this.validateSubmission()) {
-      alert('Submission Check fail. Please review your data and re-submit.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${plural}`);
-      return true;
-    }
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
-      alert("Please add an author or check 'add me as author.'");
-      return true;
-    }
-
-    const analyses = this.state.sample.analysisArray();
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
-          (isDatasetPass(a))))); // fail if Dataset check fail
-
-    const { sample } = this.state;
-    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
-
-    LoadingActions.start();
-    RepositoryActions.publishSample({
-      // sample: this.state.sample,
-      sample,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide();
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((reSample) => {
-        this.props.onPublishRefreshClose(reSample, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishSampleReserveDois({
-      sample: this.state.sample,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((sample) => {
-        this.props.onPublishRefreshClose(sample, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
-    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
-      <div>  -{currentUser.current_affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
-    });
-
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="80%" />
-            <th width="20%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            return (
-              <tr key={id}>
-                <td className="padding-right">
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">publish this reference</Tooltip>}
-                  >
-                    <Checkbox
-                      checked={selectedRefs.includes(id)}
-                      onChange={() => { this.handleRefCheck(id); }}
-                    >
-                      <span>Add to publication</span>
-                    </Checkbox>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  render() {
-    const { show, onHide, sample } = this.props;
-    const canPublish = this.validateSubmission(); // this.validateAnalyses();
-    const {
-      showPreview,
-      selectedUsers,
-      selectedRefs
-    } = this.state;
-    const analyses = sample.analysisArray();
-    const selectedAnalysesCount = analyses.filter(
-      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
-
-    const { molecule } = sample;
-
-    const {
-      selectedEmbargo, selectedLicense, cc0Consent
-    } = this.state;
-
-    if (show) {
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Publish Sample
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
-              <EmbargoCom
-                opts={this.state.bundles}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <Panel>
-                <Panel.Body>
-                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
-                </Panel.Body>
-              </Panel>
-              <PanelGroup accordion id="publish-sample-config">
-                <Panel
-                  eventKey="2"
-                >
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <SampleDetailsContainers
-                      readOnly
-                      publish
-                      sample={sample}
-                      handleSampleChanged={this.handleSampleChanged}
-                    />
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="3">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="5">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Reference ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-              {showPreview ? null : null}
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={() => onHide()}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
-                Publish Sample
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishSampleModal.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/ReactionDetailsRepoComment.js b/app/assets/javascripts/components/ReactionDetailsRepoComment.js
deleted file mode 100644
index d9f3b94a7..000000000
--- a/app/assets/javascripts/components/ReactionDetailsRepoComment.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from '../libHome/RepoReactionDetails';
-
-export default class ReactionDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      reaction: null,
-      reviewLevel: 0,
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    RepositoryFetcher.fetchReaction(this.props.reactionId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewReaction
-        if (data.reaction && data.reaction.reviewLevel === 0) {
-          //console.log(data);
-        } else {
-          let history = [];
-
-          if (data.reaction && data.reaction.publication) {
-            const { publication } = data.reaction;
-            history = (publication.review && publication.review.history) || [];
-          }
-          this.setState({
-            reaction: data.reaction,
-            reviewLevel: data.reviewLevel,
-            isSubmitter: data.isSubmitter || false,
-            historyInfo: history,
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`ReactionDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  render() {
-    const { reaction } = this.state;
-    return reaction && reaction.publication ?
-      (
-        <RepoReactionDetails
-          reaction={reaction}
-          canComment
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-ReactionDetailsRepoComment.propTypes = {
-  reactionId: PropTypes.number.isRequired,
-};
diff --git a/app/assets/javascripts/components/SampleDetailsRepoComment.js b/app/assets/javascripts/components/SampleDetailsRepoComment.js
deleted file mode 100644
index 91d0a3dec..000000000
--- a/app/assets/javascripts/components/SampleDetailsRepoComment.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoSampleDetails from '../libHome/RepoSampleDetails';
-
-export default class SampleDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      element: null,
-      reviewLevel: 0,
-      isSubmitter: false,
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    RepositoryFetcher.fetchSample(this.props.sampleId, false)
-      .then((data) => {
-        LoadingActions.stop();
-        // refer to PublicStore.handleDisplayReviewSample
-        if (data.sample && data.reviewLevel === 0) {
-          console.log(data);
-        } else {
-          const publication = data.publication || {};
-          this.setState({
-            element: data,
-            historyInfo: (publication.review && publication.review.history) || [],
-            reviewLevel: data.reviewLevel,
-            isSubmitter: data.isSubmitter || false
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(`SampleDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  render() {
-    const { element } = this.state;
-    return element && element.sample && element.publication ?
-      (
-        <RepoSampleDetails
-          element={element}
-          canComment
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : {}}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-SampleDetailsRepoComment.propTypes = {
-  sampleId: PropTypes.number.isRequired,
-};
diff --git a/app/assets/javascripts/components/actions/PublicActions.js b/app/assets/javascripts/components/actions/PublicActions.js
deleted file mode 100644
index 394494574..000000000
--- a/app/assets/javascripts/components/actions/PublicActions.js
+++ /dev/null
@@ -1,398 +0,0 @@
-import alt from '../alt'
-import PublicFetcher from '../fetchers/PublicFetcher'
-import NotificationActions from './NotificationActions';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-class PublicActions {
-
-  refreshPubElements(type) {
-    return type;
-  }
-
-  close(deleteEl) {
-    return { deleteEl }
-  }
-
-  getMolecules(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getReactions(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchMolecules(pageParams={}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchReactions(pageParams = {}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function (notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => {
-      PublicFetcher.searchPublicReactions(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        NotificationActions.removeByUid(uid);
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublished() {
-    return (dispatch) => {
-      PublicFetcher.fetchLastPublished()
-      .then((result) => {
-        dispatch(result.last_published)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublishedSample(){
-    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
-      .then((result) => {
-        dispatch(result.sample)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  openRepositoryPage(page) {
-    if (page) {
-      return page
-    } else {
-      return ""
-    }
-  }
-
-  displayDataset(id) {
-    return (dispatch) => { PublicFetcher.fetchDataset(id)
-      .then((result) => {
-        dispatch({dataset: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayMolecule(id, advFlag = false, advType = '', advVal = '') {
-    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
-      .then((result) => {
-        dispatch({moleculeData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReaction(id) {
-    return (dispatch) => { PublicFetcher.fetchReaction(id)
-      .then((result) => {
-        dispatch({reactionData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  articles() {
-    return (dispatch) => {
-      fetch('/newsroom/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({data: json});
-      }).catch((errorMessage) => {
-        dispatch({ data: [] });
-      });
-    };
-  }
-
-  editArticle(key) {
-    if (key === 'new') {
-      return (dispatch) => {
-          dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  displayArticle(key) {
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  howtos() {
-    return (dispatch) => {
-      fetch('/howto/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ data: json });
-        }).catch((errorMessage) => {
-          // console.log(errorMessage);
-          dispatch({ data: [] });
-        });
-    };
-  }
-
-  editHowTo(key) {
-    if (key === 'ein') {
-      return (dispatch) => {
-        dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  displayHowTo(key) {
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-        }}
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  selectPublicCollection() {
-    return (dispatch) => {
-      PublicFetcher.selectPublicCollection()
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); })
-    }
-  }
-
-  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
-    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewReaction(id) {
-    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewSample(id) {
-    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  reviewPublish(id, type, comment, action) {
-    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action)
-      .then((result) => {
-        dispatch({ id :id, element: result[`${type}`], type: type, history: result.history, comment: comment, action: action })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  displayReviewEmbargo(type, id) {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElement(type, id)
-      .then((result) => {
-        dispatch({ id, element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  generateEmbargoAccount(id) {
-    return (dispatch) => {
-      RepositoryFetcher.generateEmbargoAccount(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  fetchEmbargoBundle() {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-
-  releaseEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.releaseEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  deleteEmbargo(id) {
-    return (dispatch) => {
-      RepositoryFetcher.deleteEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  moveEmbargo(id, newEmbargo, element) {
-    return (dispatch) => {
-      RepositoryFetcher.moveEmbargo(id, newEmbargo, element)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  getEmbargoElements(id) {
-    return (dispatch) => {
-      RepositoryFetcher.fetchEmbargoElements(id)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  publishedStatics() {
-    return (dispatch) => {
-      PublicFetcher.publishedStatics()
-        .then((result) => {
-          dispatch(result.published_statics)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  updateComment(id, type, comments) {
-    return (dispatch) => {
-      RepositoryFetcher.updateComment(id, type, comments)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-}
-
-export default alt.createActions(PublicActions)
diff --git a/app/assets/javascripts/components/actions/RepositoryActions.js b/app/assets/javascripts/components/actions/RepositoryActions.js
deleted file mode 100644
index 80dd4d530..000000000
--- a/app/assets/javascripts/components/actions/RepositoryActions.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import alt from '../alt';
-
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-
-class RepositoryActions {
-  publishSample(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  reviewPublish(element) {
-    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
-      .then((result) => {
-        dispatch({ element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishSampleReserveDois(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishReaction(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  publishReactionReserveDois(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-}
-
-export default alt.createActions(RepositoryActions);
diff --git a/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js b/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
deleted file mode 100644
index 4e6c48631..000000000
--- a/app/assets/javascripts/components/chemscanner/actions/storedFileActions.js
+++ /dev/null
@@ -1,315 +0,0 @@
-import uuid from 'uuid';
-
-import * as types from './ActionTypes';
-import { scanFileNormalizer } from './fileActions';
-import { CALL_API } from '../middleware/api';
-
-export const retrieveStoredFiles = () => dispatch => (
-  dispatch({
-    type: types.RETRIEVE_STORED_FILES,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/all',
-      options: {
-        credentials: 'same-origin',
-        method: 'post'
-      }
-    }
-  })
-);
-
-export const getScannedOutputs = (ids, type, display) => dispatch => (
-  dispatch({
-    type: types.GET_SCANNED_OUTPUT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/get_outputs',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, display })
-      },
-    }
-  })
-);
-
-export const hideItems = (ids, type) => dispatch => (
-  dispatch({ type: types[`HIDE_${type.toLocaleUpperCase()}`], ids })
-);
-
-export const approveItems = (ids, type, val) => dispatch => (
-  dispatch({
-    type: types[`APPROVE_${type.toLocaleUpperCase()}`],
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/approve',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, val })
-      },
-    }
-  })
-);
-
-export const rescanFiles = ids => dispatch => (
-  dispatch({
-    type: types.RESCAN_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/rescan',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids })
-      },
-    }
-  })
-);
-
-export const deleteItems = (ids, type, itemVersion) => dispatch => (
-  dispatch({
-    type: types.DELETE_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/delete',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, version: itemVersion || '' })
-      },
-    }
-  })
-);
-
-export const downloadFile = id => dispatch => (
-  dispatch({
-    type: types.DOWNLOAD_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/download/',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const uploadToStore = files => (dispatch) => {
-  const data = new FormData();
-  for (let i = 0; i < files.length; i += 1) data.append(uuid.v4(), files[i]);
-
-  return dispatch({
-    type: types.UPLOAD_TO_STORE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/upload',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data
-      }
-    }
-  });
-};
-
-export const saveImage = imageList => (
-  fetch('/api/v1/chemscanner_storage/save_png', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ image_list: imageList })
-  })
-);
-
-export const fetchPreview = id => (
-  fetch('/api/v1/chemscanner_storage/scheme_image', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ id })
-  }).then(res => res.json())
-);
-
-export const getPreview = id => dispatch => (
-  dispatch({
-    type: types.GET_SCHEME_PREVIEW,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/scheme_image',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const updateMetadata = (id, type, extendedMetadata) => dispatch => (
-  dispatch({
-    type: types.UPDATE_METADATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_metadata',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id, type, data: extendedMetadata })
-      },
-    }
-  })
-);
-
-export const importData = (data, collection, maintainShortLabel) => dispatch => (
-  dispatch({
-    type: types.IMPORT_DATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/import',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ data, collection, maintainShortLabel })
-      }
-    }
-  })
-);
-
-export const updateItemField = (id, type, field, value) => dispatch => (
-  dispatch({
-    type: types.UPDATE_ITEM_FIELD,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_output',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id, type, field, value
-        })
-      }
-    }
-  })
-);
-
-export const toggleAliasPolymer = (moleculeId, atomIdx) => dispatch => (
-  dispatch({
-    type: types.TOGGLE_ALIAS_POLYMER,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/toggle_polymer',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeId, atomIdx })
-      }
-    }
-  })
-);
-
-export const fetchSvg = (moleculeIds, reactionIds) => dispatch => (
-  dispatch({
-    type: types.FETCH_SVG,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/fetch_svg',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeIds, reactionIds })
-      }
-    }
-  })
-);
-
-export const beilsteinExport = ids => (
-  fetch('/api/v1/chemscanner_storage/beilstein_export', {
-    credentials: 'same-origin',
-    method: 'post',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ ids })
-  })
-);
-
-export const setArchivedValue = (ids, value) => dispatch => (
-  dispatch({
-    type: types.SET_ARCHIVED_VALUE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_archived',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, value })
-      },
-    }
-  })
-);
-
-export const setExpand = (id, type, value) => dispatch => (
-  dispatch({
-    type: types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`] || types.DEFAULT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_expanded',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ type, id, value })
-      },
-    }
-  })
-);
diff --git a/app/assets/javascripts/components/chemscanner/actions/uiActions.js b/app/assets/javascripts/components/chemscanner/actions/uiActions.js
deleted file mode 100644
index 2ea85cbfc..000000000
--- a/app/assets/javascripts/components/chemscanner/actions/uiActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-
-import * as types from './ActionTypes';
-import { CALL_API } from '../middleware/api';
-
-export const changeView = view => dispatch => (
-  dispatch({ type: types.CHANGE_VIEW, view })
-);
-
-export const getCurrentVersion = () => dispatch => (
-  dispatch({
-    type: types.GET_CURRENT_VERSION,
-    [CALL_API]: {
-      endpoint: '/api/v1/public_chemscanner/ui/version',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-      },
-    }
-  })
-);
diff --git a/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js b/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
deleted file mode 100644
index 40e021cd4..000000000
--- a/app/assets/javascripts/components/chemscanner/components/ArchivedManagement.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-export default class ArchivedManagement extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-
-    this.activedColumnDefs = [
-      {
-        headerName: 'Actived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-    this.archivedColumnDefs = [
-      {
-        headerName: 'Archived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-
-    this.onActivedGridReady = this.onActivedGridReady.bind(this);
-    this.onArchivedGridReady = this.onArchivedGridReady.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.setActived = this.setActived.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.activedGridApi && this.activedGridColumnApi) {
-      this.activedGridColumnApi.autoSizeColumns();
-    }
-
-    if (this.archivedGridApi && this.archivedGridColumnApi) {
-      this.archivedGridColumnApi.autoSizeColumns();
-    }
-  }
-
-  onActivedGridReady(params) {
-    this.activedGridApi = params.api;
-    this.activedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  onArchivedGridReady(params) {
-    this.archivedGridApi = params.api;
-    this.archivedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  setArchived() {
-    if (!this.activedGridApi) return;
-
-    const fileIds = this.activedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  setActived() {
-    if (!this.archivedGridApi) return;
-
-    const fileIds = this.archivedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  render() {
-    const { archivedFiles, activedFiles } = this.props;
-    const gridStyle = {
-      height: 'calc(100vh - 100px)', flex: 1
-    };
-    const buttonStyle = {
-      width: '33px',
-      margin: '5px',
-      textAlign: 'center',
-      alignSelf: 'center',
-      color: 'rgba(0, 0, 0, 0.54)'
-    };
-
-    return (
-      <div style={{ display: 'flex', margin: '10px' }}>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="activedFilesGrid"
-            columnDefs={this.activedColumnDefs}
-            rowData={activedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onActivedGridReady}
-          />
-        </div>
-        <div style={buttonStyle}>
-          <button className="btn btn-xs" onClick={this.setArchived}>
-            <i className="fa fa-arrow-circle-right fa-2x" />
-          </button>
-          &nbsp; &nbsp;
-          <button className="btn btn-xs" onClick={this.setActived}>
-            <i className="fa fa-arrow-circle-left fa-2x" />
-          </button>
-        </div>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="archivedFilesGrid"
-            columnDefs={this.archivedColumnDefs}
-            rowData={archivedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onArchivedGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-ArchivedManagement.propTypes = {
-  archivedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  activedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js b/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
deleted file mode 100644
index 9ce6f25b5..000000000
--- a/app/assets/javascripts/components/chemscanner/components/ChemscannerImportModal.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel, Checkbox,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ChemscannerImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      maintainShortLabel: true,
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.toggleMaintainShortLabel = this.toggleMaintainShortLabel.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel, maintainShortLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection, maintainShortLabel);
-  }
-
-  toggleMaintainShortLabel() {
-    this.setState({ maintainShortLabel: !this.state.maintainShortLabel });
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const {
-      options, newLabel, selected, maintainShortLabel
-    } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-          <FormGroup>
-            <Checkbox
-              checked={maintainShortLabel}
-              onChange={this.toggleMaintainShortLabel}
-            >
-              Maintain reaction short label
-            </Checkbox>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ChemscannerImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ChemscannerImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js b/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
deleted file mode 100644
index 57801b00f..000000000
--- a/app/assets/javascripts/components/chemscanner/components/EditMdlBtn.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-
-export default class EditMdlBtn extends React.Component {
-  constructor() {
-    super();
-
-    this.onSelect = this.onSelect.bind(this);
-  }
-
-  onSelect(id) {
-    this.props.openKetcher(id);
-  }
-
-  render() {
-    const { options, identifier } = this.props;
-
-    if (options.length === 0 || !identifier) return <span />;
-
-    const icon = (<i className="fa fa-pencil" />);
-    const ddId = `dropdown-edit-mdl-${identifier}`;
-
-    return (
-      <DropdownButton
-        id={ddId}
-        title={icon}
-        className="clipboard-btn left-btn btn btn-xs"
-      >
-        {options.map(option => (
-          <MenuItem
-            key={option.value}
-            eventKey={option.value}
-            onSelect={this.onSelect}
-          >
-            {option.title}
-          </MenuItem>
-        ))}
-      </DropdownButton>
-    );
-  }
-}
-
-EditMdlBtn.propTypes = {
-  identifier: PropTypes.number,
-  openKetcher: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.object),
-};
-
-EditMdlBtn.defaultProps = {
-  options: [],
-  identifier: 0,
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/EditableText.js b/app/assets/javascripts/components/chemscanner/components/EditableText.js
deleted file mode 100644
index 5e3afafcd..000000000
--- a/app/assets/javascripts/components/chemscanner/components/EditableText.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class EditableText extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { editing: false };
-
-    this.handleDoubleClick = this.handleDoubleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-
-  handleBlur(e) {
-    const { id, field, onFinishUpdate } = this.props;
-    if (!id) return;
-
-    const newValue = e.target.value;
-    this.setState({ editing: false }, onFinishUpdate(id, field, newValue));
-  }
-
-  handleDoubleClick() {
-    if (!this.props.id) return;
-
-    this.setState({ editing: true });
-  }
-
-  render() {
-    const { field, value } = this.props;
-    const { editing } = this.state;
-
-    let cellContent = value;
-    if (editing) {
-      cellContent = (
-        <input
-          style={{ width: '100%' }}
-          defaultValue={value}
-          onBlur={this.handleBlur}
-        />
-      );
-    }
-
-    return (
-      <div onDoubleClick={this.handleDoubleClick}>
-        <b>{field}: </b>
-        {cellContent}
-      </div>
-    );
-  }
-}
-
-EditableText.propTypes = {
-  id: PropTypes.number,
-  field: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onFinishUpdate: PropTypes.func.isRequired
-};
-
-EditableText.defaultProps = {
-  id: 0,
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js b/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
deleted file mode 100644
index bfc38d30f..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemActionsHeader.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-function FileItemActionsHeader({
-  deleteItems, beilsteinExport, openImportModal,
-  rescanFiles, uploadInput, showSelectedItems,
-  setArchived, unsetArchived
-}) {
-  if (!uploadInput) return <span />;
-
-  const uploadTooltip = <Tooltip id="cs-show-files">Upload</Tooltip>;
-  const openUpload = () => uploadInput.current.click();
-
-  const rescanTooltip = <Tooltip id="cs-rescan-files">Rescan Files</Tooltip>;
-  const deleteTooltip = <Tooltip id="cs-rescan-files">Delete Items</Tooltip>;
-
-  const dropdownTitle = <i className="fa fa-eye" />;
-  const exportTitle = <i className="fa fa-cloud-upload" />;
-
-  const toggleArchiveTitle = <i className="fa fa-archive" />;
-
-  return (
-    <div>
-      <OverlayTrigger placement="top" overlay={deleteTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          style={{ float: 'right' }}
-          onClick={deleteItems}
-        >
-          <i className="fa fa-trash" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={dropdownTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={() => showSelectedItems('reactions')}
-          >
-            Show Reactions
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={() => showSelectedItems('molecules')}
-          >
-            Show Molecules
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={exportTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={openImportModal}
-          >
-            Import to ELN
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={beilsteinExport}
-          >
-            Beilstein export
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <OverlayTrigger placement="top" overlay={rescanTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="primary"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={rescanFiles}
-        >
-          <i className="fa fa-refresh" />
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={uploadTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="success"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={openUpload}
-        >
-          <i className="fa fa-plus-circle" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-toggle-archive-dropdown"
-          title={toggleArchiveTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={setArchived}
-          >
-            Set archive
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={unsetArchived}
-          >
-            Unset archive
-          </MenuItem>
-        </DropdownButton>
-      </div>
-    </div>
-  );
-}
-
-FileItemActionsHeader.propTypes = {
-  uploadInput: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  rescanFiles: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  showSelectedItems: PropTypes.func.isRequired,
-  setArchived: PropTypes.func.isRequired,
-  unsetArchived: PropTypes.func.isRequired,
-};
-
-FileItemActionsHeader.defaultProps = {
-  uploadInput: null
-};
-
-export default FileItemActionsHeader;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
deleted file mode 100644
index 1221dba3b..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemActionsRenderer.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-const DeleteBtn = ({ deleteItems }) => {
-  const deleteTooltip = <Tooltip id="cs-delete-item">Delete</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={deleteTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        style={{ float: 'right', marginLeft: '5px' }}
-        onClick={deleteItems}
-      >
-        <i className="fa fa-trash" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DeleteBtn.propTypes = {
-  deleteItems: PropTypes.func.isRequired,
-};
-
-const DownloadBtn = ({ data, downloadFile }) => {
-  const { type } = data;
-
-  let visibility = '';
-  if (type !== 'File') visibility = 'hidden';
-
-  const style = {
-    float: 'right',
-    marginLeft: '5px',
-    visibility,
-    width: '35px'
-  };
-
-  const tooltipId = `cs-download-${type}-${data.id}-tooltip`;
-  const downloadTooltip = <Tooltip id={tooltipId}>Download</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={downloadTooltip}>
-      <Button
-        bsSize="xsmall"
-        style={style}
-        onClick={downloadFile}
-      >
-        <i className="fa fa-download" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DownloadBtn.propTypes = {
-  downloadFile: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const ShowHideBtn = ({
-  data, showReactions, showMolecules, hideItems
-}) => {
-  const { type, id, schemeCount } = data;
-  const children = data.children || [];
-
-  if (type === 'File') {
-    const noScheme = !schemeCount;
-    const hasNestedFile = children.length === 0 || (
-      children.length > 0 && children[0].type !== 'File'
-    );
-
-    if (noScheme && hasNestedFile) return <span />;
-  }
-
-  let tooltip;
-  let button;
-
-  if (data.show) {
-    button = (
-      <Button
-        bsSize="xsmall"
-        bsStyle="warning"
-        style={{ float: 'right', marginLeft: '5px', width: '35px' }}
-        onClick={hideItems}
-      >
-        <i className="fa fa-eye-slash" />
-      </Button>
-    );
-
-    tooltip = <Tooltip id="cs-hide-file">Hide</Tooltip>;
-  } else {
-    const ddId = `cs-show-${type}-${id}-dropdown`;
-
-    const title = <i className="fa fa-eye" />;
-
-    button = (
-      <div style={{ float: 'right', marginLeft: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id={ddId}
-          title={title}
-        >
-          <MenuItem eventKey="1" onClick={showReactions}>Show Reactions</MenuItem>
-          <MenuItem eventKey="2" onClick={showMolecules}>Show Molecules</MenuItem>
-        </DropdownButton>
-      </div>
-    );
-
-    tooltip = <Tooltip id="cs-show-file">Show</Tooltip>;
-  }
-
-  return (
-    <OverlayTrigger placement="top" overlay={tooltip}>
-      {button}
-    </OverlayTrigger>
-  );
-};
-
-ShowHideBtn.propTypes = {
-  showReactions: PropTypes.func.isRequired,
-  showMolecules: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const RescanBtn = ({ data, rescanFiles }) => {
-  const { type, parentId } = data;
-  let visibility = '';
-  if (type !== 'File' || parentId) visibility = 'hidden';
-
-  const rescanTooltip = <Tooltip id="cs-rescan-file">Rescan File</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={rescanTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="primary"
-        style={{ float: 'right', marginLeft: '5px', visibility }}
-        onClick={rescanFiles}
-      >
-        <i className="fa fa-refresh" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-RescanBtn.propTypes = {
-  rescanFiles: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-};
-
-class FileItemsActionsRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.showReactions = this.showReactions.bind(this);
-    this.showMolecules = this.showMolecules.bind(this);
-    this.hideItems = this.hideItems.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.downloadFile = this.downloadFile.bind(this);
-  }
-
-  rescanFiles() {
-    const { rescanFiles, data } = this.props;
-
-    rescanFiles([data.id]);
-  }
-
-  showReactions() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'reactions');
-  }
-
-  showMolecules() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'molecules');
-  }
-
-  hideItems() {
-    const { hideItems, data } = this.props;
-    const { id, type } = data;
-
-    hideItems([id], type);
-  }
-
-  deleteItems() {
-    const { deleteItems, data } = this.props;
-    const { id, type, version } = data;
-
-    deleteItems([id], type, version);
-  }
-
-  downloadFile() {
-    const { downloadFile, data } = this.props;
-    const { id } = data;
-
-    downloadFile(id).then(res => (
-      res.response.blob()
-    )).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = data.fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    });
-  }
-
-  render() {
-    const { version, data } = this.props;
-    const { type } = data;
-
-    if (type.startsWith('Item')) return <span />;
-
-    return (
-      <div style={{ marginTop: '1px' }}>
-        <DeleteBtn deleteItems={this.deleteItems} data={data} />
-        <ShowHideBtn
-          showReactions={this.showReactions}
-          showMolecules={this.showMolecules}
-          hideItems={this.hideItems}
-          data={data}
-        />
-        <DownloadBtn downloadFile={this.downloadFile} data={data} />
-        <RescanBtn
-          rescanFiles={this.rescanFiles}
-          version={version}
-          data={data}
-        />
-      </div>
-    );
-  }
-}
-
-FileItemsActionsRenderer.propTypes = {
-  version: PropTypes.string.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemsActionsRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
deleted file mode 100644
index b9f18c544..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemApproveFilter.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isApproved: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isApproved } = this.state;
-    let newValue;
-    if (isApproved === null) {
-      newValue = true;
-    } else if (isApproved) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isApproved: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isApproved === this.state.isApproved;
-  }
-
-  isFilterActive() {
-    return this.state.isApproved !== null;
-  }
-
-  render() {
-    const { isApproved } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-    if (isApproved === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isApproved) {
-      tooltipText = 'Show Approved';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Approved';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-approve--filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemApproveFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemApproveFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
deleted file mode 100644
index 2d19ad634..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemApproveRenderer.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.approveItem = this.approveItem.bind(this);
-  }
-
-  approveItem() {
-    const { approveItems, data } = this.props;
-    const { type, id, isApproved } = data;
-
-    const val = !(isApproved || false);
-    approveItems([id], type, val);
-  }
-
-  render() {
-    const { data } = this.props;
-    const { type, id, isApproved } = data;
-
-    if (type.startsWith('Item')) return <span />;
-    if (type === 'File' && !data.children) return <span />;
-
-    const tooltipId = `cs-approve-${type}-${id}-tooltip`;
-    const tooltip = <Tooltip id={tooltipId}>Approve</Tooltip>;
-
-    let bsStyle;
-    let icon;
-    if (isApproved) {
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      bsStyle = 'default';
-      icon = 'check-circle-o';
-    }
-
-    return (
-      <div style={{ marginTop: '-2px', paddingLeft: '15px' }}>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button bsSize="xsmall" bsStyle={bsStyle} onClick={this.approveItem}>
-            <i className={`fa fa-${icon}`} />
-          </Button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-}
-
-FileItemApproveRenderer.propTypes = {
-  approveItems: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemApproveRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
deleted file mode 100644
index 57be6256e..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemFileNameFilter.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Form, ControlLabel, Button } from 'react-bootstrap';
-
-import _ from 'lodash';
-
-class FileItemFileNameFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '', showArchived: false };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.toggleArchived = this.toggleArchived.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    const { text, showArchived } = this.state;
-    return { text, showArchived };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    const showArchived = model ? model.showArchived : false;
-
-    this.setState({ text, showArchived });
-  }
-
-  toggleArchived() {
-    this.setState({ showArchived: !this.state.showArchived }, this.debouncedChangedCallback);
-  }
-
-  doesFilterPass(params) {
-    const { text, showArchived } = this.state;
-
-    let iter = params.node;
-    while (iter.level > 0) iter = iter.parent;
-
-    const { fileName, extendedMetadata } = iter.data;
-    const passText = fileName.includes(text);
-    let { archived } = extendedMetadata;
-    if (archived == null) archived = false;
-
-    // If showArchived, check passText
-    if (showArchived) return passText;
-
-    // Otherwise, archived items will not passed
-    return passText && !archived;
-  }
-
-  isFilterActive() { return true; }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    const { showArchived } = this.state;
-
-    let textArchive;
-    let icon;
-    if (showArchived) {
-      textArchive = 'Hide';
-      icon = (
-        <span className="fa-stack" style={{ fontSize: '0.63em' }}>
-          <i className="fa fa-archive fa-stack-1x" />
-          <i className="fa fa-ban fa-stack-2x text-danger" />
-        </span>
-      );
-    } else {
-      textArchive = 'Show';
-      icon = (<i className="fa fa-archive" />);
-    }
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper file-filter" style={{ margin: '4px 4px 1px 4px' }}>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '30px' }}>
-                  File Name
-                </ControlLabel>
-                <input
-                  ref={this.inputRef}
-                  value={this.state.text}
-                  onChange={this.onChange}
-                  style={{ width: '65%' }}
-                  className="ag-filter-filter"
-                  placeholder="Filter ..."
-                />
-              </Form>
-            </div>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '5px', width: '89px' }}>
-                  {textArchive} Archived
-                </ControlLabel>
-                <Button bsSize="xsmall" onClick={this.toggleArchived}>
-                  {icon}
-                </Button>
-              </Form>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemFileNameFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemFileNameFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
deleted file mode 100644
index 510a003ab..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemImportedFilter.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemImportedFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isImported: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isImported } = this.state;
-    let newValue;
-    if (isImported === null) {
-      newValue = true;
-    } else if (isImported) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isImported: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isImported === this.state.isImported;
-  }
-
-  isFilterActive() {
-    return this.state.isImported !== null;
-  }
-
-  render() {
-    const { isImported } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-
-    if (isImported === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isImported) {
-      tooltipText = 'Show Transferred';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Transferred';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-imported-filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemImportedFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemImportedFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
deleted file mode 100644
index f69f379b7..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemImportedRenderer.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const FileItemImportedRenderer = ({ data }) => {
-  const { type, isImported } = data;
-  if (type.endsWith('Summary')) return <span />;
-
-  let style;
-  let icon;
-
-  if (isImported) {
-    style = { color: '#5cb85c' };
-    icon = 'check-circle';
-  } else {
-    style = {};
-    icon = 'check-circle-o';
-  }
-
-  return (
-    <div style={{ paddingLeft: '30px' }}>
-      <i style={style} className={`fa fa-${icon}`} />
-    </div>
-  );
-};
-
-FileItemImportedRenderer.propTypes = {
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemImportedRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js b/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
deleted file mode 100644
index 89a766149..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemInformationEditor.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ControlLabel, FormControl, Panel, Radio } from 'react-bootstrap';
-
-import PreviewFileZoomPan from './PreviewFileZoomPan';
-
-const PreviewEditor = ({ imageData, fileName }) => {
-  if (!imageData) return <span />;
-
-  return (
-    <Panel style={{ marginBottom: '0px', minHeight: '400px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <PreviewFileZoomPan
-          imageURL={imageData}
-          duration={200}
-        />
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-PreviewEditor.propTypes = {
-  imageData: PropTypes.string,
-  fileName: PropTypes.string.isRequired,
-};
-
-PreviewEditor.defaultProps = {
-  imageData: '',
-};
-
-const InfoEditor = ({ fileName, data }) => {
-  const {
-    domain, type, format, doi
-  } = data;
-
-  return (
-    <Panel style={{ marginBottom: '0px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <table className="cs-extended-metadata-table">
-          <tbody>
-            <tr>
-              <td style={{ width: '55px' }}>
-                <ControlLabel>Domain</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="organic"
-                  defaultChecked={domain === 'organic'}
-                >
-                  Organic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="inorganic"
-                  defaultChecked={domain === 'inorganic'}
-                >
-                  Inorganic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="solidPhase"
-                  defaultChecked={domain === 'solidPhase'}
-                >
-                  Solid Phase
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="heteroCyclic"
-                  defaultChecked={domain === 'heteroCyclic'}
-                >
-                  Hetero cyclic
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Type</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="published"
-                  defaultChecked={type === 'published'}
-                >
-                  Published
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="unpublished"
-                  defaultChecked={type === 'unpublished'}
-                >
-                  Never published
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Format</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="supportingInformation"
-                  defaultChecked={format === 'supportingInformation'}
-                >
-                  Supporting Information
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="manuscript"
-                  defaultChecked={format === 'manuscript'}
-                >
-                  Manuscript
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="review"
-                  defaultChecked={format === 'review'}
-                >
-                  Review
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="report"
-                  defaultChecked={format === 'report'}
-                >
-                  Report
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>DOI</ControlLabel>
-              </td>
-              <td colSpan={4}>
-                <FormControl
-                  type="text"
-                  id="doi_info"
-                  defaultValue={doi || ''}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-InfoEditor.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  fileName: PropTypes.string.isRequired,
-};
-
-class FileItemInformationEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.containerRef = React.createRef();
-
-    this.focus = this.focus.bind(this);
-  }
-
-  componentDidMount() {
-    this.focus();
-  }
-
-  componentDidUpdate() {
-    this.focus();
-  }
-
-  componentWillUnmount() {
-    const { type, data } = this.props;
-
-    const extData = data.extendedMetadata || {};
-
-    let query = 'input[name="domainGroup"]:checked';
-    const domain = this.containerRef.current.querySelector(query);
-    if (domain) {
-      extData.domain = domain.value;
-    } else {
-      delete extData.domain;
-    }
-
-    query = 'input[name="typeGroup"]:checked';
-    const typeInfo = this.containerRef.current.querySelector(query);
-    if (typeInfo) {
-      extData.type = typeInfo.value;
-    } else {
-      delete extData.type;
-    }
-
-    query = 'input[name="formatGroup"]:checked';
-    const format = this.containerRef.current.querySelector(query);
-    if (format) {
-      extData.format = format.value;
-    } else {
-      delete extData.format;
-    }
-
-    const doi = this.containerRef.current.querySelector('#doi_info');
-    if (doi) {
-      extData.doi = doi.value;
-    } else {
-      delete extData.doi;
-    }
-
-    data.extendedMetadata = extData;
-    this.props.doneEditing(type, data);
-  }
-
-  getValue() {
-    return this.props.data.type;
-  }
-
-  focus() {
-    if (this.containerRef.current) this.containerRef.current.focus();
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  isPopup() {
-    return true;
-  }
-
-  render() {
-    const { data, type } = this.props;
-    const { fileName, imageData, extendedMetadata } = data;
-
-    let editor = <span />;
-    if (type === 'preview') {
-      editor = <PreviewEditor imageData={imageData} fileName={fileName} />;
-    } else if (type === 'info') {
-      editor = <InfoEditor data={extendedMetadata} fileName={fileName} />;
-    }
-
-    return (
-      <div ref={this.containerRef}>
-        {editor}
-      </div>
-    );
-  }
-}
-
-FileItemInformationEditor.propTypes = {
-  type: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  doneEditing: PropTypes.func.isRequired
-};
-
-export default FileItemInformationEditor;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js b/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
deleted file mode 100644
index dac058d0e..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemInformationRenderer.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
-
-class FileItemInformationRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.getPreview = this.getPreview.bind(this);
-
-    this.setPreviewEdit = this.setPreviewEdit.bind(this);
-    this.setInfoEdit = this.setInfoEdit.bind(this);
-  }
-
-  getPreview() {
-    const { getPreview, node } = this.props;
-    const { id, type, schemeId } = node.data;
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    getPreview(itemId);
-  }
-
-  setPreviewEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const {
-      id, type, schemeId, imageData
-    } = node.data;
-
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    const shouldFetch = !imageData;
-    setEdit(rowIndex, itemId, shouldFetch, 'preview');
-  }
-
-  setInfoEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const { id } = node.data;
-    if (!id) return;
-
-    setEdit(rowIndex, id, false, 'info');
-  }
-
-  render() {
-    const { node } = this.props;
-    const { extendedMetadata, type, schemeCount } = node.data;
-
-    let previewOverlayBtn = <span />;
-
-    if (type === 'Scheme' || (type === 'File' && schemeCount === 1)) {
-      previewOverlayBtn = (
-        <Button
-          bsSize="xsmall"
-          onClick={this.setPreviewEdit}
-          style={{ marginRight: '5px', width: '25px' }}
-        >
-          <i className="fa fa-picture-o" />
-        </Button>
-      );
-    }
-
-    let extendedInfo = <span />;
-    if (type === 'File' && node.data.children) {
-      extendedInfo = (
-        <Button
-          bsSize="xsmall"
-          bsStyle="info"
-          style={{ marginRight: '5px', width: '25px' }}
-          onClick={this.setInfoEdit}
-        >
-          <i className="fa fa-info-circle" />
-        </Button>
-      );
-    }
-
-    let warningOverlay = <span />;
-    if (extendedMetadata) {
-      const { warnings } = extendedMetadata;
-
-      if (warnings && warnings.length > 0) {
-        const popoverId = `${node.data.id}-${type}-warning-popover`;
-        const warningPopover = (
-          <Popover id={popoverId}>
-            <ul>
-              {/* eslint-disable-next-line react/no-array-index-key */}
-              {warnings.map((w, idx) => <li key={idx}>{w}</li>)}
-            </ul>
-          </Popover>
-        );
-
-        warningOverlay = (
-          <OverlayTrigger trigger="click" placement="left" overlay={warningPopover}>
-            <Button bsSize="xsmall" bsStyle="warning" style={{ width: '25px' }}>
-              <i className="fa fa-exclamation-circle" />
-            </Button>
-          </OverlayTrigger>
-        );
-      }
-    }
-
-    return (
-      <div style={{ marginTop: '-2px' }}>
-        {previewOverlayBtn}
-        {warningOverlay}
-        {extendedInfo}
-      </div>
-    );
-  }
-}
-
-FileItemInformationRenderer.propTypes = {
-  getPreview: PropTypes.func.isRequired,
-  setEdit: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-  rowIndex: PropTypes.number.isRequired
-};
-
-export default FileItemInformationRenderer;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js b/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
deleted file mode 100644
index a110ffb7a..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileItemVersionFilter.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import _ from 'lodash';
-
-class FileItemVersionFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '' };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.node.data.version === this.state.text;
-  }
-
-  isFilterActive() {
-    return this.state.text;
-  }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <input
-              ref={this.inputRef}
-              value={this.state.text}
-              onChange={this.onChange}
-              className="ag-filter-filter"
-              placeholder="Filter ..."
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemVersionFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemVersionFilter;
diff --git a/app/assets/javascripts/components/chemscanner/components/FileStorage.js b/app/assets/javascripts/components/chemscanner/components/FileStorage.js
deleted file mode 100644
index fe15715ad..000000000
--- a/app/assets/javascripts/components/chemscanner/components/FileStorage.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-import FileItemActionsHeader from './FileItemActionsHeader';
-
-import FileItemActionsRenderer from './FileItemActionsRenderer';
-import FileItemApproveRenderer from './FileItemApproveRenderer';
-import FileItemImportedRenderer from './FileItemImportedRenderer';
-import FileItemInformationRenderer from './FileItemInformationRenderer';
-
-import FileItemApproveFilter from './FileItemApproveFilter';
-import FileItemImportedFilter from './FileItemImportedFilter';
-import FileItemVersionFilter from './FileItemVersionFilter';
-import FileItemFileNameFilter from './FileItemFileNameFilter';
-
-import FileItemInformationEditor from './FileItemInformationEditor';
-
-import {
-  buildRowData,
-  versionGetter,
-  fileNameGetter,
-  getNodeChildDetails,
-} from './fileStorageUtils';
-
-export default class FileStorage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      editing: false,
-      editingType: null,
-      rowIndex: -1,
-    };
-
-    this.uploadInput = React.createRef();
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.beilsteinExport = this.beilsteinExport.bind(this);
-    this.showSelectedItems = this.showSelectedItems.bind(this);
-    this.openImportModal = this.openImportModal.bind(this);
-
-    this.setInformationEditing = this.setInformationEditing.bind(this);
-    this.doneEditing = this.doneEditing.bind(this);
-    this.toggleExpand = this.toggleExpand.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.unsetArchived = this.unsetArchived.bind(this);
-
-    this.columnDefs = [
-      {
-        headerName: 'File',
-        field: 'file',
-        filterFramework: FileItemFileNameFilter,
-        width: 250,
-        valueGetter: fileNameGetter,
-        headerCheckboxSelection: true,
-        headerCheckboxSelectionFilteredOnly: true,
-        cellRenderer: 'agGroupCellRenderer',
-        cellRendererParams: {
-          suppressCount: true,
-          checkbox: params => ['File', 'Scheme'].includes(params.data.type),
-        }
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-      {
-        headerName: 'Version',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemVersionFilter,
-        valueGetter: versionGetter,
-      },
-      {
-        headerName: 'Approved',
-        width: 100,
-        suppressSizeToFit: true,
-        filterFramework: FileItemApproveFilter,
-        cellRendererFramework: FileItemApproveRenderer,
-        cellRendererParams: { approveItems: props.approveItems },
-        field: 'isApproved'
-      },
-      {
-        headerName: 'Transferred',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemImportedFilter,
-        cellRendererFramework: FileItemImportedRenderer,
-        field: 'isImported'
-      },
-      {
-        headerName: 'Information',
-        field: 'information',
-        width: 115,
-        suppressSizeToFit: true,
-        cellRendererFramework: FileItemInformationRenderer,
-        editable: true,
-        cellEditorFramework: FileItemInformationEditor,
-        cellEditorParams: () => ({
-          type: this.state.editingType,
-          doneEditing: this.doneEditing,
-        }),
-        cellRendererParams: {
-          getPreview: props.getPreview,
-          setEdit: this.setInformationEditing,
-        },
-      },
-      {
-        headerName: '',
-        field: '',
-        width: 250,
-        filter: false,
-        headerClass: 'chemscanner-filestorage-action-header',
-        headerComponentFramework: FileItemActionsHeader,
-        headerComponentParams: {
-          uploadInput: this.uploadInput,
-          rescanFiles: this.rescanFiles,
-          deleteItems: this.deleteItems,
-          beilsteinExport: this.beilsteinExport,
-          showSelectedItems: this.showSelectedItems,
-          openImportModal: this.openImportModal,
-          setArchived: this.setArchived,
-          unsetArchived: this.unsetArchived
-        },
-        cellClass: 'chemscanner-filestorage-action-row',
-        cellRendererFramework: FileItemActionsRenderer,
-        cellRendererParams: {
-          version: props.version,
-          showItems: props.showItems,
-          rescanFiles: props.rescanFiles,
-          hideItems: props.hideItems,
-          downloadFile: props.downloadFile,
-          deleteItems: props.deleteItems
-        },
-      }
-    ];
-  }
-
-  componentDidUpdate() {
-    if (!this.gridApi || !this.gridColumnApi) return;
-
-    this.gridApi.sizeColumnsToFit();
-
-    const { rowIndex, editing } = this.state;
-    if (!editing) return;
-
-    this.gridApi.startEditingCell({ rowIndex, colKey: 'information' });
-  }
-
-  onGridReady(params) {
-    this.gridApi = params.api;
-    this.gridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-
-    // Must get the filter in order to trigger the filterChangedCallback
-    const fileFilter = this.gridApi.getFilterInstance('file');
-    if (!fileFilter) return;
-    this.gridApi.onFilterChanged();
-  }
-
-  setInformationEditing(rowIndex, itemId, shouldFetch, type) {
-    if (!this.gridApi) return;
-
-    const getPreview = () => this.props.getPreview(itemId);
-
-    if (shouldFetch) {
-      this.setState({ editing: true, editingType: type, rowIndex }, getPreview);
-    } else {
-      this.setState({ editing: true, editingType: type, rowIndex });
-    }
-  }
-
-  setArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  unsetArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  rescanFiles() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.rescanFiles(fileIds);
-  }
-
-  deleteItems() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    ['File', 'Scheme'].forEach((type) => {
-      const selectedItems = selected.filter(i => i.type === type);
-
-      const versionMap = {};
-      selectedItems.forEach((item) => {
-        const { id } = item;
-        const version = item.version || '';
-        const arr = versionMap[version];
-
-        if (arr) {
-          arr.push(id);
-        } else {
-          versionMap[version] = [id];
-        }
-      });
-
-      Object.keys(versionMap).forEach((version) => {
-        const ids = versionMap[version];
-        if (ids.length === 0) return;
-
-        this.props.deleteItems(ids, type, version);
-      });
-    });
-  }
-
-  beilsteinExport() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const selectedItems = selected.filter(i => i.type === 'File' && !i.parentId);
-
-    this.props.beilsteinExport(selectedItems.map(s => s.id));
-  }
-
-  showSelectedItems(showType) {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const ids = [];
-    selected.forEach((item) => {
-      const { type, schemeId, id } = item;
-      if (type === 'File' && schemeId) {
-        ids.push(item.schemeId);
-      } else if (type === 'Scheme') {
-        ids.push(id);
-      }
-    });
-
-    this.props.showItems(ids, 'Scheme', showType);
-  }
-
-  openImportModal() {
-    if (!this.gridApi) return;
-
-    const selectedRows = this.gridApi.getSelectedRows();
-    const files = selectedRows.filter(r => r.type === 'File');
-    const schemes = selectedRows.filter(r => r.type === 'Scheme');
-
-    this.props.openImportModal(files.concat(schemes));
-  }
-
-  doneEditing(editingType, data) {
-    if (editingType !== 'info') return;
-
-    const { id, type, extendedMetadata } = data;
-
-    this.setState({
-      editing: false, editingType: null, rowIndex: -1
-    }, () => this.props.updateMetadata(id, type, extendedMetadata));
-  }
-
-  toggleExpand(e) {
-    this.props.toggleExpand(e.data);
-  }
-
-  render() {
-    const {
-      files, schemes, reactions, molecules, uploadToStore
-    } = this.props;
-
-    const rowData = buildRowData(files, schemes, reactions, molecules);
-
-    const uploadFileToStore = (e) => {
-      uploadToStore(e.target.files);
-      this.uploadInput.current.value = '';
-    };
-
-    return (
-      <div style={{ margin: '20px 15px 0px 10px' }}>
-        <input
-          type="file"
-          multiple="multiple"
-          style={{ display: 'none' }}
-          ref={this.uploadInput}
-          onChange={uploadFileToStore}
-        />
-        <div className="ag-theme-balham" style={{ height: 'calc(100vh - 120px)' }}>
-          <AgGridReact
-            id="fileStorageGrid"
-            columnDefs={this.columnDefs}
-            rowData={rowData}
-            enableGroupEdit
-            groupSelectsFiltered
-            onRowGroupOpened={this.toggleExpand}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            suppressRowClickSelection
-            getNodeChildDetails={getNodeChildDetails}
-            onGridReady={this.onGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-FileStorage.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-  reactions: PropTypes.instanceOf(List).isRequired,
-  molecules: PropTypes.instanceOf(List).isRequired,
-  version: PropTypes.string,
-  approveItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  getPreview: PropTypes.func.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  updateMetadata: PropTypes.func.isRequired,
-  uploadToStore: PropTypes.func.isRequired,
-  toggleExpand: PropTypes.func.isRequired,
-};
-
-FileStorage.defaultProps = {
-  version: ''
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/ImportModal.js b/app/assets/javascripts/components/chemscanner/components/ImportModal.js
deleted file mode 100644
index 02afc7054..000000000
--- a/app/assets/javascripts/components/chemscanner/components/ImportModal.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection);
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const { options, newLabel, selected } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js b/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
deleted file mode 100644
index ead4d38f2..000000000
--- a/app/assets/javascripts/components/chemscanner/components/fileStorageUtils.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import { List, Map } from 'immutable';
-
-const selectFileChildren = (rowNode) => {
-  const { data, selected } = rowNode;
-
-  const isFileSelected = data.type === 'File';
-  if (!isFileSelected) return;
-
-  const { childrenAfterGroup } = rowNode;
-  if (!childrenAfterGroup) return;
-
-  const childrenSchemes = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'Scheme'
-  ));
-  const childrenFiles = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'File'
-  ));
-
-  childrenSchemes.forEach(node => node.setSelected(selected));
-  childrenFiles.forEach((node) => {
-    node.setSelected(selected);
-    selectFileChildren(node);
-  });
-};
-
-export const onRowSelected = (event) => {
-  selectFileChildren(event.node);
-};
-
-export const versionGetter = n => (n.data.type === 'Item' ? '' : n.data.version);
-export const fileNameGetter = n => (n.data[`${n.data.type.toLowerCase()}Name`]);
-
-export const getNodeChildDetails = (rowItem) => {
-  const { children, fileName, type } = rowItem;
-  if (!children || children.length === 0) return null;
-
-  let { expanded } = rowItem;
-  if (expanded == null) expanded = !(type === 'ItemSummary');
-
-  return {
-    group: true,
-    expanded,
-    children,
-    key: fileName
-  };
-};
-
-const addChildren = (file, child) => {
-  const children = file.children || [];
-  children.push(child);
-
-  // eslint-disable-next-line no-param-reassign
-  file.children = children;
-};
-
-const buildFileTree = (files) => {
-  const fileMap = {};
-  const jsFiles = [];
-
-  files.forEach((immuFile) => {
-    const file = immuFile.toJS();
-    file.type = 'File';
-
-    const extMData = file.extendedMetadata;
-    let expanded;
-    // eslint-disable-next-line prefer-destructuring
-    if (extMData) expanded = extMData.expanded;
-    if (expanded == null) expanded = true;
-    file.expanded = expanded;
-
-    const { id } = file;
-    fileMap[id] = file;
-
-    jsFiles.push(file);
-  });
-
-  jsFiles.forEach((file) => {
-    const { parentId } = file;
-    if (!parentId) return;
-
-    const parent = fileMap[parentId];
-    if (parent.display && !file.display) {
-      /* eslint-disable no-param-reassign */
-      file.display = parent.display;
-      file.show = parent.show;
-
-      const { expanded } = parent;
-      if (expanded != null) file.expanded = expanded;
-      /* eslint-enable no-param-reassign */
-    }
-
-    addChildren(parent, file);
-  });
-
-  const fileTree = Object.keys(fileMap).sort((a, b) => b - a).reduce((arr, fileId) => {
-    const file = fileMap[fileId];
-    const { parentId } = file;
-    if (parentId) return arr;
-
-    arr.push(file);
-    return arr;
-  }, []);
-
-  return { fileTree, fileMap };
-};
-
-const buildFileSchemeTree = (fileTree, fileMap, schemes, reactions, molecules) => {
-  const schemeArr = [];
-
-  schemes.forEach((immuScheme) => {
-    const scheme = immuScheme.toJS();
-
-    const extMData = immuScheme.get('extendedMetadata');
-    let expanded;
-    if (extMData) expanded = extMData.get('expanded');
-    if (expanded == null) expanded = true;
-    scheme.expanded = expanded;
-
-    schemeArr.push(scheme);
-
-    const { version, imageData } = scheme;
-    scheme.type = 'Scheme';
-
-    const file = fileMap[scheme.sourceId];
-    if (!file) return;
-
-    const { fileName } = file;
-
-    const noFileSchemes = schemes.filter(s => s.get('sourceId') === file.id).size;
-    file.schemeCount = noFileSchemes;
-    file.version = version;
-
-    let leaf = file;
-    if (noFileSchemes > 1) {
-      scheme.schemeName = `Scheme ${scheme.index + 1}`;
-      scheme.fileName = fileName;
-      addChildren(file, scheme);
-      leaf = scheme;
-    } else if (noFileSchemes === 1) {
-      file.schemeId = scheme.id;
-      file.schemeExtendedMetadata = scheme.extendedMetadata;
-      file.imageData = imageData;
-
-      if (scheme.show) file.show = true;
-    }
-
-    const type = 'Item';
-    const schemeMolecules = molecules.filter(m => m.get('schemeId') === scheme.id);
-    const schemeReactions = reactions.filter(r => r.get('schemeId') === scheme.id);
-
-    const approvedReactions = schemeReactions.filter(r => r.get('isApproved'));
-    const approvedMolecules = schemeMolecules.filter(m => m.get('isApproved'));
-    if (approvedReactions.size === schemeReactions.size &&
-        approvedMolecules.size === schemeMolecules.size) {
-      scheme.isApproved = true;
-    } else {
-      scheme.isApproved = false;
-    }
-
-    const importedReactions = schemeReactions.filter(r => r.get('importedId'));
-    const importedMolecules = schemeMolecules.filter(m => m.get('importedId'));
-    if (importedReactions.size === schemeReactions.size &&
-        importedMolecules.size === schemeMolecules.size) {
-      scheme.isImported = true;
-    } else {
-      scheme.isImported = false;
-    }
-
-    let moleculesWarnings = [];
-    const moleculeArr = [];
-    schemeMolecules.forEach((m) => {
-      const moleculeRow = {
-        id: m.get('id'),
-        type,
-        itemType: 'Molecule',
-        fileName,
-        isApproved: m.get('isApproved'),
-        isImported: !!m.get('importedId'),
-        itemName: `Molecule ${m.get('id')}`,
-      };
-
-      const extData = (m.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const mWarnings = warnings.map(w => `Molecule ${m.get('id')}: ${w}`);
-        moleculesWarnings = moleculesWarnings.concat(mWarnings);
-
-        moleculeRow.extendedMetadata = { warnings };
-      }
-
-      moleculeArr.push(moleculeRow);
-    });
-
-    const moleculeSummary = {
-      fileName,
-      itemsummaryName: `Molecules: ${scheme.moleculeCount}`,
-      type: 'ItemSummary',
-      itemType: 'Molecule',
-      version
-    };
-    if (moleculesWarnings.length > 0) {
-      moleculeSummary.extendedMetadata = { warnings: moleculesWarnings };
-    }
-    if (moleculeArr.length > 0) moleculeSummary.children = moleculeArr;
-    addChildren(leaf, moleculeSummary);
-
-    let reactionsWarnings = [];
-    const reactionArr = [];
-    schemeReactions.forEach((r) => {
-      const reactionRow = {
-        type,
-        id: r.get('id'),
-        itemType: 'Reaction',
-        fileName,
-        isApproved: r.get('isApproved'),
-        itemName: `Reaction ${r.get('id')}`,
-        isImported: !!r.get('importedId'),
-      };
-
-      const extData = (r.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const rWarnings = warnings.map(w => `Reaction ${r.get('id')}: ${w}`);
-        reactionsWarnings = reactionsWarnings.concat(rWarnings);
-
-        reactionRow.extendedMetadata = { warnings };
-      }
-
-      reactionArr.push(reactionRow);
-    });
-
-    const reactionSummary = {
-      fileName,
-      itemsummaryName: `Reactions: ${scheme.reactionCount}`,
-      type: 'ItemSummary',
-      itemType: 'Reaction',
-      version
-    };
-    if (reactionsWarnings.length > 0) {
-      reactionSummary.extendedMetadata = { warnings: reactionsWarnings };
-    }
-    if (reactionArr.length > 0) reactionSummary.children = reactionArr;
-    addChildren(leaf, reactionSummary);
-  });
-
-  return schemeArr;
-};
-
-export const buildRowData = (files, schemes, reactions, molecules) => {
-  const { fileTree, fileMap } = buildFileTree(files);
-  const schemeArr = buildFileSchemeTree(fileTree, fileMap, schemes, reactions, molecules);
-
-  // Dectect file approve
-  Object.values(fileMap).forEach((file) => {
-    const fileSchemes = schemeArr.filter(s => s.sourceId === file.id);
-
-    const numApprovedSchemes = fileSchemes.filter(s => s.isApproved).length;
-    if (fileSchemes.length === numApprovedSchemes && numApprovedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedSchemes = fileSchemes.filter(s => s.isImported).length;
-    if (fileSchemes.length === numImportedSchemes && numImportedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  Object.values(fileMap).forEach((file) => {
-    const { children } = file;
-    if (!children || children.length === 0) return;
-
-    if (children[0].type !== 'File') return;
-
-    const numApprovedChildren = children.filter(f => f.isApproved).length;
-    if (children.length === numApprovedChildren && numApprovedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedChildren = children.filter(f => f.isImported).length;
-    if (children.length === numImportedChildren && numImportedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  return fileTree;
-};
diff --git a/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js b/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
deleted file mode 100644
index b90e67d8e..000000000
--- a/app/assets/javascripts/components/chemscanner/containers/ArchivedManagementContainer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { setArchivedValue } from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import ArchivedManagement from '../components/ArchivedManagement';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-function ArchivedManagementContainer(props) {
-  const { files } = props;
-  const setArchivedValueFunc = props.setArchivedValue;
-
-  const archivedFiles = [];
-  const activedFiles = [];
-
-  files.forEach((f) => {
-    const file = f.toJS();
-    const { archived } = file.extendedMetadata;
-
-    if (archived == null || archived === false) {
-      activedFiles.push(file);
-    } else {
-      archivedFiles.push(file);
-    }
-  });
-
-  return (
-    <ArchivedManagement
-      archivedFiles={archivedFiles}
-      activedFiles={activedFiles}
-      setArchivedValue={setArchivedValueFunc}
-    />
-  );
-}
-
-ArchivedManagementContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ArchivedManagementContainer);
diff --git a/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js b/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
deleted file mode 100644
index bc26ca3a3..000000000
--- a/app/assets/javascripts/components/chemscanner/containers/FileStorageContainer.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import base64 from 'base-64';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import {
-  deleteItems,
-  beilsteinExport,
-  downloadFile,
-  getScannedOutputs,
-  hideItems,
-  approveItems,
-  retrieveStoredFiles,
-  rescanFiles,
-  saveImage,
-  uploadToStore,
-  fetchPreview,
-  updateMetadata,
-  setArchivedValue,
-  setExpand,
-  // updatePreview
-} from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import FileStorage from '../components/FileStorage';
-
-import { isPngImage, isSvgImage } from '../utils';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-  schemes: state.get('schemes'),
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-  ui: state.get('ui'),
-  cddInstance: state.get('chemdrawInstance'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  dispatch,
-  retrieveStoredFiles: () => dispatch(retrieveStoredFiles()),
-  uploadToStore: (files) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(uploadToStore(files)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  rescanFiles: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(rescanFiles(ids)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  showItems: (ids, type, display) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(getScannedOutputs(ids, type, display)).then((action) => {
-      const scannedSchemes = action.response.get('schemes');
-      if (!scannedSchemes || scannedSchemes.size === 0) {
-        dispatch({ type: types.UNSET_LOADING });
-        return;
-      }
-
-      const imageList = scannedSchemes.reduce((arr, scheme) => {
-        const imageData = scheme.get('pictureData') || '';
-        const id = scheme.get('id');
-        if (imageData.length === 0 || !id) return arr;
-
-        const isSaved = scheme.get('isSaved') || false;
-        if (isSaved) return arr;
-
-        const uuid = scheme.get('uuid');
-        arr.push({ id, fileUuid: uuid, imageData });
-        return arr;
-      }, []);
-
-      if (imageList.length > 0) {
-        saveImage(imageList);
-      }
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  hideItems: (ids, type) => dispatch(hideItems(ids, type)),
-  downloadFile: id => dispatch(downloadFile(id)),
-  toggleExpand: (data) => {
-    const { id, type } = data;
-    const value = !data.expanded;
-
-    const actionType = types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`];
-    if (actionType) dispatch(setExpand(id, type, value));
-
-    return null;
-  },
-  openImportModal: data => dispatch({ type: types.SET_IMPORT, data }),
-  deleteItems: (ids, type, version) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(deleteItems(ids, type, version)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  beilsteinExport: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return beilsteinExport(ids).then(res => res.json()).then((res) => {
-      const listFiles = res.files || [];
-
-      listFiles.forEach((file) => {
-        const raw = base64.decode(file.b64 || '');
-        const { length } = raw;
-        const ab = new ArrayBuffer(length);
-        const ia = new Uint8Array(ab);
-        for (let i = 0; i < length; i += 1) ia[i] = raw.charCodeAt(i);
-        const blob = new Blob([ab], { type: 'application/zip' });
-
-        const a = document.createElement('a');
-        a.style = 'display: none';
-        document.body.appendChild(a);
-        const url = window.URL.createObjectURL(blob);
-        a.href = url;
-        a.download = file.name;
-        a.click();
-        window.URL.revokeObjectURL(url);
-      });
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  approveItems: (ids, type, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(approveItems(ids, type, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  updateMetadata: (id, type, extendedMetadata) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateMetadata(id, type, extendedMetadata)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  getPreview: (id) => {
-    const { dispatch } = dispatchProps;
-    dispatch({ type: types.SET_LOADING });
-
-    return fetchPreview(id).then((res) => {
-      let imageData = res.image_data;
-      if (!imageData) return dispatch({ type: types.UNSET_LOADING });
-
-      const isPng = isPngImage(imageData);
-      const isSvg = isSvgImage(imageData);
-
-      let type = isPng ? 'image/png' : 'image/svg+xml';
-      if (!isPng && !isSvg) {
-        type = 'image/png';
-        const { cddInstance } = stateProps;
-
-        if (RegExp('<?xml.*').test(imageData)) {
-          cddInstance.loadCDXML(imageData);
-        } else {
-          cddInstance.loadB64CDX(imageData);
-        }
-
-        const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
-        imageData = `data:image/png;base64,${b64png}`;
-        cddInstance.clear();
-
-        saveImage([{ id, imageData }]);
-      }
-
-      const blob = new Blob([imageData], { type });
-      const objUrl = window.URL.createObjectURL(blob);
-
-      dispatch({ type: types.GET_SCHEME_PREVIEW, imageData: objUrl, id });
-
-      return dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-class FileStorageContainer extends React.Component {
-  componentDidMount() {
-    this.props.retrieveStoredFiles();
-  }
-
-  render() {
-    const { files, schemes, ui } = this.props;
-    const version = ui.get('version');
-    const reload = ui.get('reloadGrid');
-
-    return (
-      <FileStorage
-        {...this.props}
-        files={files}
-        schemes={schemes}
-        version={version}
-        reload={reload}
-      />
-    );
-  }
-}
-
-FileStorageContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(FileStorageContainer);
diff --git a/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js b/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
deleted file mode 100644
index 697c963fb..000000000
--- a/app/assets/javascripts/components/chemscanner/containers/ImportModalContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import * as types from '../actions/ActionTypes';
-
-import { importData } from '../actions/storedFileActions';
-import ImportModal from '../components/ChemscannerImportModal';
-
-const ImportModalContainer = props => <ImportModal {...props} />;
-
-const fetchCollections = () => (
-  fetch('/api/v1/collections/all_as_tree', {
-    credentials: 'same-origin',
-    method: 'GET',
-  }).then(res => res.json())
-);
-
-const mapStateToProps = state => ({
-  show: state.get('ui').get('import'),
-  selectedItems: state.get('ui').get('selected'),
-  fetchCollections,
-});
-
-const mapDispatchToProps = dispatch => ({
-  closeModal: () => dispatch({ type: types.UNSET_IMPORT }),
-  importData: (data, collection, maintainShortLabel) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(importData(data, collection, maintainShortLabel)).then(() => (
-      dispatch({ type: types.UNSET_LOADING })
-    ));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ImportModalContainer);
diff --git a/app/assets/javascripts/components/chemscanner/reactionUtils.js b/app/assets/javascripts/components/chemscanner/reactionUtils.js
deleted file mode 100644
index bf940d5cc..000000000
--- a/app/assets/javascripts/components/chemscanner/reactionUtils.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const getSchemeMolecules = (reaction, molecules) => {
-  const fileUid = reaction.get('fileUuid');
-  const schemeIdx = reaction.get('schemeIdx');
-
-  return molecules.filter(m => (
-    m.get('schemeIdx') === schemeIdx && m.get('fileUuid') === fileUid
-  ));
-};
-
-export const getReactionReactants = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reactantExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionReagents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reagentExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionSolvents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('solventExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionProducts = (reaction, reactionMolecules) => {
-  const ids = reaction.get('productExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionGroups = (reaction, molecules) => {
-  const reactionMolecules = getSchemeMolecules(reaction, molecules);
-
-  const reactants = getReactionReactants(reaction, reactionMolecules);
-  const reagents = getReactionReagents(reaction, reactionMolecules);
-  const solvents = getReactionSolvents(reaction, reactionMolecules);
-  const products = getReactionProducts(reaction, reactionMolecules);
-
-  return {
-    reactants, reagents, solvents, products
-  };
-};
diff --git a/app/assets/javascripts/components/chemscanner/reducers/root.js b/app/assets/javascripts/components/chemscanner/reducers/root.js
deleted file mode 100644
index 2423aadc7..000000000
--- a/app/assets/javascripts/components/chemscanner/reducers/root.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import files from './files';
-import schemes from './schemes';
-import reactions from './reactions';
-import molecules from './molecules';
-import chemdrawInstance from './chemdrawInstance';
-import ui from './ui';
-
-export default combineReducers({
-  ui,
-  chemdrawInstance,
-  files,
-  schemes,
-  reactions,
-  molecules,
-});
diff --git a/app/assets/javascripts/components/chemscanner/reducers/schemes.js b/app/assets/javascripts/components/chemscanner/reducers/schemes.js
deleted file mode 100644
index 506578089..000000000
--- a/app/assets/javascripts/components/chemscanner/reducers/schemes.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { List, Map, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const addSchemes = (state, action) => {
-  const { response } = action;
-  if (!response) return state;
-
-  let outputSchemes = response.get('schemes') || List();
-  if (outputSchemes.size === 0) return state;
-
-  outputSchemes = outputSchemes.map(s => s.delete('pictureData'));
-
-  return state.concat(outputSchemes);
-};
-
-const revokeImageData = (scheme) => {
-  const imageData = scheme.get('imageData');
-  if (!imageData || !imageData.startsWith('blob:')) return;
-
-  window.URL.revokeObjectURL(imageData);
-};
-
-const schemes = createReducer(List(), {
-  [types.SCAN_FILE_FOR_MOLECULES]: addSchemes,
-  [types.SCAN_FILE_FOR_REACTIONS]: addSchemes,
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const outputSchemes = response.get('schemes') || [];
-    let newState = state;
-
-    outputSchemes.forEach((scheme) => {
-      const idx = newState.findIndex(s => s.get('id') === scheme.get('id'));
-      if (idx < 0) return;
-
-      const newScheme = scheme.delete('pictureData').set('show', true);
-      newState = newState.update(idx, s => s.merge(newScheme));
-    });
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedSchemes = response.schemes;
-    if (!storedSchemes) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newSchemes = storedSchemes.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newSchemes));
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const newSchemes = response.get('schemes');
-    if (!newSchemes || newSchemes.size === 0) return state;
-
-    return state.concat(newSchemes);
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state;
-    if (fileUid) {
-      const deleteIdx = [];
-      newState = state.map((s, idx) => {
-        if (s.get('fileUuid') === fileUid) {
-          deleteIdx.push(idx);
-          return s.set('display', '').set('show', false);
-        }
-
-        return s;
-      });
-
-      // Delete if not logged-in user
-      const firstScheme = newState.get(0);
-      if (firstScheme && !firstScheme.get('id')) {
-        deleteIdx.reverse().forEach((idx) => {
-          const s = newState.get(idx);
-          revokeImageData(s);
-          newState = newState.delete(idx);
-        });
-      }
-    }
-
-    if (ids.length > 0) {
-      newState = state.map((s) => {
-        const check = (
-          ids.includes(s.get('sourceId')) || ids.includes(s.get('id'))
-        );
-        if (check) return s.set('display', '').set('show', false);
-
-        return s;
-      });
-    }
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    const ids = action.ids || [];
-
-    return state.map(s => (
-      ids.includes(s.get('id')) ? s.set('display', '').set('show', false) : s
-    ));
-  },
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const source = action.response.get('source') || [];
-    const scheme = action.response.get('scheme') || [];
-    if (!source && !scheme) return state;
-
-    state.filter(s => source.includes(s.get('sourceId'))).forEach(s => revokeImageData(s));
-    state.filter(s => scheme.includes(s.get('id'))).forEach(s => revokeImageData(s));
-
-    const newState = state.filterNot(s => source.includes(s.get('sourceId')));
-    return newState.filterNot(s => scheme.includes(s.get('id')));
-  },
-  [types.GET_SCHEME_PREVIEW]: (state, action) => {
-    const { id, imageData } = action;
-    const idx = state.findIndex(s => s.get('id') === id);
-
-    return state.update(idx, s => s.set('imageData', imageData));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.TOGGLE_SCHEME_EXPAND]: (state, action) => {
-    const { id } = action;
-    if (!id) return state;
-
-    const idx = state.findIndex(s => s.get('id') === id);
-    if (idx < 0) return state;
-
-    return state.update(idx, (s) => {
-      const expanded = s.get('expanded') || false;
-
-      let metadata = s.get('extendedMetadata') || Map();
-      metadata = metadata.set('expanded', !expanded);
-
-      return s.set('extendedMetadata', metadata).set('expanded', !expanded);
-    });
-  }
-});
-
-export default schemes;
diff --git a/app/assets/javascripts/components/common/DeleteConfirmBtn.js b/app/assets/javascripts/components/common/DeleteConfirmBtn.js
deleted file mode 100644
index afd1f3ef2..000000000
--- a/app/assets/javascripts/components/common/DeleteConfirmBtn.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonGroup,
-  OverlayTrigger,
-  Popover
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-const DeleteConfirmBtn = (props) => {
-  const popover = (
-    <Popover id="popover-positioned-scrolling-left">
-      delete: <br /> {props.label} ?<br />
-      <ButtonGroup>
-        <Button bsStyle="danger" bsSize="xsmall" onClick={() => props.onClickYes()} >
-          Yes
-        </Button>&nbsp;
-        <Button bsStyle="warning" bsSize="xsmall" onClick={() => props.onClickNo()} >
-          No
-        </Button>
-      </ButtonGroup>
-    </Popover>
-  );
-  return (
-    <ButtonGroup className="actions">
-      <OverlayTrigger
-        animation
-        placement={props.tipPlacement}
-        root
-        trigger="focus"
-        overlay={popover}
-      >
-        <Button bsSize="xsmall" bsStyle="danger" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    </ButtonGroup>
-  );
-};
-
-DeleteConfirmBtn.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClickYes: PropTypes.func.isRequired,
-  onClickNo: PropTypes.func,
-  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left'])
-};
-
-DeleteConfirmBtn.defaultProps = {
-  onClickNo: () => { },
-  tipPlacement: 'right'
-};
-
-export default DeleteConfirmBtn;
diff --git a/app/assets/javascripts/components/common/DropdownButtonSelection.js b/app/assets/javascripts/components/common/DropdownButtonSelection.js
deleted file mode 100644
index 1d03a4771..000000000
--- a/app/assets/javascripts/components/common/DropdownButtonSelection.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-
-const DropdownButtonSelection = props =>
-  (
-    <DropdownButton
-      title={props.selected || props.placeholder}
-      key={props.selected}
-      id={`dropdown-${uuid.v4()}`}
-      onSelect={props.onSelect}
-    >
-      {
-        props.options.map(element => (
-          <MenuItem key={element} eventKey={element} disabled={props.disabled}>
-            {element}
-          </MenuItem>
-        ))
-      }
-    </DropdownButton>
-  );
-
-DropdownButtonSelection.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  selected: PropTypes.string,
-  onSelect: PropTypes.func,
-  disabled: PropTypes.bool
-};
-
-DropdownButtonSelection.defaultProps = {
-  selected: null,
-  onSelect: null,
-  disabled: false
-};
-
-export default DropdownButtonSelection;
diff --git a/app/assets/javascripts/components/common/HelpInfo.js b/app/assets/javascripts/components/common/HelpInfo.js
deleted file mode 100644
index 373fcb985..000000000
--- a/app/assets/javascripts/components/common/HelpInfo.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import helpDescs from '../utils/helpDescs';
-
-const HelpInfo = props => (
-  helpDescs[props.source] !== undefined ?
-    <span>
-      <OverlayTrigger container={this} trigger={['hover']} delayShow={600} placement={props.place} overlay={<Tooltip id="tooltip_content" className="left_tooltip max_tooltip">{helpDescs[props.source]}</Tooltip>}>
-        {props.optionalElement}
-      </OverlayTrigger>
-    </span> : null
-);
-
-HelpInfo.propTypes = {
-  source: PropTypes.string.isRequired,
-  place: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
-  optionalElement: PropTypes.element,
-};
-
-HelpInfo.defaultProps = {
-  place: 'top',
-  optionalElement: (<i className="fa fa-info-circle" aria-hidden="true" />)
-};
-
-export default HelpInfo;
diff --git a/app/assets/javascripts/components/common/InputButtonField.js b/app/assets/javascripts/components/common/InputButtonField.js
deleted file mode 100644
index da8e5b8e5..000000000
--- a/app/assets/javascripts/components/common/InputButtonField.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {
-  FormGroup,
-  ControlLabel,
-  InputGroup,
-  FormControl,
-  OverlayTrigger,
-  Tooltip,
-  Button
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-
-const InputButtonField = props =>
-  (
-    <FormGroup>
-      <ControlLabel>{props.label}</ControlLabel>
-      <InputGroup>
-        <FormControl
-          type="text"
-          value={props.value}
-          placeholder={props.placeholder}
-          onChange={event => props.onInputChange(props.field, event)}
-        />
-        <InputGroup.Button>
-          <OverlayTrigger
-            placement={props.tipPlacement}
-            overlay={<Tooltip id={`tooltip-${uuid.v4()}`}>{props.btnTip}</Tooltip>}
-          >
-            <Button
-              bsStyle="success"
-              onClick={() => props.onBtnClick(props.btnField, props.btnValue || '')}
-            >
-              {props.btnValue}
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-      </InputGroup>
-    </FormGroup>
-
-  );
-
-InputButtonField.propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  btnValue: PropTypes.string.isRequired,
-  btnField: PropTypes.string.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onBtnClick: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  btnTip: PropTypes.string,
-  tipPlacement: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
-};
-
-InputButtonField.defaultProps = {
-  placeholder: 'Please input...',
-  btnTip: 'click here',
-  tipPlacement: 'top'
-};
-
-export default InputButtonField;
diff --git a/app/assets/javascripts/components/common/NewsPreviewModal.js b/app/assets/javascripts/components/common/NewsPreviewModal.js
deleted file mode 100644
index e7be6488c..000000000
--- a/app/assets/javascripts/components/common/NewsPreviewModal.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Panel, Modal } from 'react-bootstrap';
-import QuillViewer from '../../components/QuillViewer';
-
-const NewsPreviewModal = ({ showModal, article, onClick }) => {
-  return (
-    <Modal animation show={showModal} dialogClassName="news-preview-dialog" onHide={() => onClick(false)}>
-      <Modal.Body>
-        <div>
-          <div className="ribbon ribbon-top-right"><span>Preview</span></div>
-          <Panel className="newseditor_review">
-            <Panel.Heading>
-              <span>{article.title}</span>
-              <div className="news_author">
-                <img src="/images/logo.png" alt="Preview" />&nbsp;
-                &nbsp;Creator
-                &nbsp;&nbsp;&nbsp;<i className="fa fa-pencil" aria-hidden="true" />&nbsp;Created Date
-              </div>
-              <br />
-              <div className="heading_separator" />
-            </Panel.Heading>
-            <Panel.Body>
-              <QuillViewer value={article.content} />
-            </Panel.Body>
-          </Panel>
-          <div className="ribbon ribbon-bottom-left"><span>Preview</span></div>
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-};
-
-export default NewsPreviewModal;
diff --git a/app/assets/javascripts/components/common/RepoColumnHis.js b/app/assets/javascripts/components/common/RepoColumnHis.js
deleted file mode 100644
index cf87cbb9d..000000000
--- a/app/assets/javascripts/components/common/RepoColumnHis.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-const showInfoTip = <Tooltip id="col_showinfo_tooltip">show Information</Tooltip>;
-const hideInfoTip = <Tooltip id="col_hideinfo_tooltip">hide Information</Tooltip>;
-
-
-export default class RepoColumnHis extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showInfo: false
-    }
-  }
-
-
-  render() {
-    const { history, field } = this.props;
-    const { showInfo } = this.state;
-    const columnHis = history.filter(h => h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-    if (columnHis && columnHis.length > 0) {
-      if (showInfo == true) {
-        return (
-          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-            <thead>
-              <tr>
-                <th width="30%">
-                  <div className="title" style={{ backgroundColor: 'white' }} onClick={() => this.setState({ showInfo: !showInfo })} >
-                    <OverlayTrigger placement="top" overlay={hideInfoTip}>
-                      <i className="fa fa-minus-square-o" />
-                    </OverlayTrigger>
-                    &nbsp;&nbsp; Information
-                  </div>
-                </th>
-                <th width="15%">Date</th>
-                <th width="45%">Comment</th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                columnHis.map((info) => {
-                  return (
-                    <tr>
-                      <td width="30%">{info.comments[`${field}`].origInfo}</td>
-                      <td width="15%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
-                      <td width="45%">{info.comments[`${field}`].comment}</td>
-                      <td width="10%">{info.comments[`${field}`].username}</td>
-                    </tr>
-                  );
-                })
-              }
-            </tbody>
-          </Table>
-        );
-      } else {
-        return (
-          <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-            <thead>
-              <tr>
-                <th width="15%">
-                  <div
-                    className="title"
-                    style={{ backgroundColor: 'white' }}
-                    onClick={() => this.setState({ showInfo: !showInfo })}
-                  >
-                    <OverlayTrigger placement="top" overlay={showInfoTip}>
-                      <i className="fa fa-plus-square-o" />
-                    </OverlayTrigger>
-                    &nbsp;&nbsp; Date
-                  </div>
-                </th>
-                <th width="45%"></th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                columnHis.map((info) => {
-                  return (
-                    <tr>
-                      <td width="20%">{RepoReviewTimeFormat(info.comments[`${field}`].timestamp)}</td>
-                      <td width="60%">{info.comments[`${field}`].comment}</td>
-                      <td width="10%">{info.comments[`${field}`].username}</td>
-                    </tr>
-                  );
-                })
-              }
-            </tbody>
-          </Table>
-        );
-      }
-    }
-    return <span />;
-  };
-}
-
-RepoColumnHis.propTypes = {
-  field: PropTypes.string.isRequired,
-  history: PropTypes.array
-};
-
-RepoColumnHis.defaultProps = {
-  history: []
-};
diff --git a/app/assets/javascripts/components/common/RepoCommentBtn.js b/app/assets/javascripts/components/common/RepoCommentBtn.js
deleted file mode 100644
index 1f6ebe838..000000000
--- a/app/assets/javascripts/components/common/RepoCommentBtn.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { CommentComponent } from '../../libHome/RepoReviewCommon';
-
-const RepoCommentBtn = (props) => {
-  const {
-    field, orgInfo, onShow, reviewLevel, history
-  } = props;
-
-  const current = (history && history.slice(-1).pop()) || {};
-//  const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
-
-  const hasComment = (current.comments && field in current.comments) || false;
-  const comment = CommentComponent(field, history) || '';
-
-  const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
-
-  if (isEditable === false) {
-    return <span>{comment}</span>;
-  }
-
-  return (
-    <span>
-      <Button
-        bsStyle={hasComment ? 'success' : 'default'}
-        bsSize="xsmall"
-        onClick={() => onShow(true, field, orgInfo)}
-      >
-        <i className="fa fa-comment" />
-      </Button>
-      {comment}
-    </span>
-  );
-};
-
-RepoCommentBtn.propTypes = {
-  onShow: PropTypes.func.isRequired,
-  history: PropTypes.array,
-  comments: PropTypes.object,
-  field: PropTypes.string,
-  orgInfo: PropTypes.string,
-  state: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  textAreaAttr: PropTypes.object
-};
-
-RepoCommentBtn.defaultProps = {
-  history: [],
-  comments: null,
-  field: '',
-  orgInfo: '',
-  state: '',
-  reviewLevel: 0,
-  submitter: ''
-};
-
-export default RepoCommentBtn;
diff --git a/app/assets/javascripts/components/common/RepoCommentModal.js b/app/assets/javascripts/components/common/RepoCommentModal.js
deleted file mode 100644
index 471accef7..000000000
--- a/app/assets/javascripts/components/common/RepoCommentModal.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl } from 'react-bootstrap';
-import Draggable from 'react-draggable';
-import RepoColumnHis from './RepoColumnHis';
-
-export default class RepoCommentModal extends React.Component {
-  render() {
-    const {
-      elementId, elementType, show, onHide, onUpdate, field, orgInfo,
-      history, textAreaAttrs, reviewLevel
-    } = this.props;
-
-    const current = (history && history.length > 0 && history.slice(-1).pop()) || {};
-    const comment = (current && current.comments && current.comments[`${field}`] && current.comments[`${field}`].comment) || '';
-
-    const defaultAttrs = {
-      style: {
-        height: '100px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    const isEditable = ((reviewLevel === 3 && current.state === 'pending') || (reviewLevel === 2 && current.state === 'reviewed')) || false;
-    if (show) {
-      return (
-        <div>
-          <Draggable>
-            <Modal
-              show
-              onHide={() => onHide(false, field)}
-              bsSize="large"
-              backdrop="static"
-            >
-              <Modal.Header closeButton>
-                <Modal.Title>
-                  Comment on: {field}
-                </Modal.Title>
-              </Modal.Header>
-              <Modal.Body>
-                <RepoColumnHis history={history} field={field} />
-                <br />
-                {orgInfo}
-                <br />
-                <FormControl
-                  componentClass="textarea"
-                  {...textAreaAttrs || defaultAttrs}
-                  defaultValue={comment || ''}
-                  inputRef={(m) => { this.commentInput = m; }}
-                />
-                <ButtonToolbar>
-                  <Button
-                    onClick={() => onHide(false)}
-                  > Close
-                  </Button>
-                  <Button
-                    bsStyle="primary"
-                    disabled={!isEditable}
-                    onClick={() =>
-                      onUpdate(elementId, elementType, field, this.commentInput.value, orgInfo, true)}
-                  >
-                    Update
-                  </Button>
-                </ButtonToolbar>
-              </Modal.Body>
-            </Modal>
-          </Draggable>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoCommentModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired,
-  show: PropTypes.bool,
-  field: PropTypes.string,
-  history: PropTypes.array,
-  orgInfo: PropTypes.string,
-  reviewLevel: PropTypes.number,
-  onUpdate: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoCommentModal.defaultProps = {
-  show: false,
-  history: [],
-  reviewLevel: 0,
-  field: '',
-  orgInfo: '',
-};
diff --git a/app/assets/javascripts/components/common/RepoMetadataModal.js b/app/assets/javascripts/components/common/RepoMetadataModal.js
deleted file mode 100644
index 7defa8a65..000000000
--- a/app/assets/javascripts/components/common/RepoMetadataModal.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-export default class RepoMetadataModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false,
-      metadata: []
-    };
-    this.loadMetadata = this.loadMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadMetadata();
-  }
-
-  loadMetadata() {
-    const { elementId, elementType } = this.props;
-    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
-      this.setState({ metadata: result.metadata });
-    });
-  }
-
-  render() {
-    const { modalShow, metadata } = this.state;
-    const { elementId, elementType } = this.props;
-    return (
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
-        >
-          <Button
-            onClick={() => this.setState({ modalShow: true })}
-            style={{ marginLeft: '5px' }}
-          >
-            <i className="fa fa-file-code-o" />&nbsp;
-            Metadata
-          </Button>
-        </OverlayTrigger>
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="news-preview-dialog"
-        >
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              <h4>
-                <Label>
-                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
-                </Label>
-              </h4>
-            </div>
-            <div style={{
-              maxHeight: '50vh',
-              overflow: 'auto',
-              whiteSpace: 'pre',
-              backgroundColor: 'black',
-              color: 'white',
-              fontFamily: 'monospace'
-            }}
-            >
-              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
-            </div>
-            <br />
-            <ButtonToolbar>
-              <Button
-                bsStyle="warning"
-                onClick={() => this.setState({ modalShow: false })}
-              > Close
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
-              > Download
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-RepoMetadataModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired
-};
diff --git a/app/assets/javascripts/components/common/RepoPreviewImage.js b/app/assets/javascripts/components/common/RepoPreviewImage.js
deleted file mode 100644
index d307f349f..000000000
--- a/app/assets/javascripts/components/common/RepoPreviewImage.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImageModal from './ImageModal';
-import RepoSpectraBtn from './RepoSpectra';
-
-const RepoPreviewImage = (props) => {
-  const {
-    element, analysis, isLogin, previewImg, title
-  } = props;
-  let hasPop = true;
-  let fetchNeeded = false;
-  let fetchId = 0;
-  let fetchFilename = '';
-  let imageStyle = { style: { cursor: 'default' } };
-  if (previewImg.startsWith('data:image')) {
-    fetchNeeded = true;
-    fetchId = analysis.preview_img.id;
-    fetchFilename = analysis.preview_img.filename;
-  } else {
-    hasPop = false;
-    imageStyle = { style: { cursor: 'default', display: 'none' } };
-  }
-  return (
-    <div className="preview">
-      <div className="spectra" {...imageStyle}>
-        <RepoSpectraBtn element={element} analysis={analysis} isLogin={isLogin} />
-      </div>
-      <ImageModal
-        imageStyle={imageStyle}
-        hasPop={hasPop}
-        preivewObject={{ src: previewImg }}
-        popObject={{
-          title, src: previewImg, fetchNeeded, fetchId, fetchFilename
-        }}
-      />
-    </div>
-  );
-};
-
-RepoPreviewImage.propTypes = {
-  element: PropTypes.object,
-  analysis: PropTypes.object,
-  isLogin: PropTypes.bool,
-  previewImg: PropTypes.string.isRequired,
-  title: PropTypes.string
-};
-
-RepoPreviewImage.defaultProps = {
-  isLogin: false,
-  title: ''
-};
-
-export default RepoPreviewImage;
diff --git a/app/assets/javascripts/components/common/RepoPublicComment.js b/app/assets/javascripts/components/common/RepoPublicComment.js
deleted file mode 100644
index 7753daeb4..000000000
--- a/app/assets/javascripts/components/common/RepoPublicComment.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import PublicActions from '../actions/PublicActions';
-
-export default class RepoPublicComment extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false
-    };
-    this.updateComment = this.updateComment.bind(this);
-  }
-
-  updateComment() {
-    const { id, type, pageType, pageId } = this.props;
-    RepositoryFetcher.reviewerComment(id, type, this.commentInput.value)
-      .then((result) => {
-        this.setState({ modalShow: false });
-        if (pageType === 'reactions') {
-          PublicActions.displayReaction(pageId || id);
-        } else {
-          PublicActions.displayMolecule(pageId);
-        }
-      });
-  }
-
-  render() {
-    const { modalShow } = this.state;
-    const { isReviewer, userInfo, title } = this.props;
-    const defaultAttrs = {
-      style: {
-        height: '400px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    let btnTbl = (<span />);
-    let commentModal = (<span />);
-    const style = { height: '20px', width: '20px', borderRadius: '50%', border: '1px' };
-    const hasComment = userInfo != '';
-
-    if (hasComment === true) {
-      btnTbl = (
-        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data</Tooltip>}>
-          <Button bsSize="xsmall" bsStyle="warning" style={style} onClick={() => this.setState({ modalShow: true })}>
-            <i className="fa fa-info" />
-          </Button>
-        </OverlayTrigger>
-      );
-    } else if (hasComment === false && isReviewer === true) {
-      btnTbl = (
-        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data (edit)</Tooltip>}>
-          <Button bsSize="xsmall" style={style} onClick={() => this.setState({ modalShow: true })}>
-            <i className="fa fa-info" />
-          </Button>
-        </OverlayTrigger>
-      );
-    }
-
-    if (isReviewer === true) {
-      commentModal = (
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="pub-info-dialog"
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>
-              Note for {title}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <FormControl
-              componentClass="textarea"
-              defaultValue={userInfo || ''}
-              {...defaultAttrs}
-              inputRef={(m) => { this.commentInput = m; }}
-            />
-            <ButtonToolbar>
-              <Button
-                bsStyle="warning"
-                onClick={() => this.setState({ modalShow: false })}
-              > Close
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={() => this.updateComment()}
-              > Update
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      );
-    } else {
-      commentModal = (
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="pub-info-dialog"
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>
-              Note for {title}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto', whiteSpace: 'pre-wrap' }}>
-            {userInfo}
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return (
-      <span>
-        {btnTbl}
-        {commentModal}
-      </span>
-    );
-  }
-}
-
-RepoPublicComment.propTypes = {
-  id: PropTypes.number.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  userInfo: PropTypes.string,
-  isReviewer: PropTypes.bool,
-  type: PropTypes.string,
-  pageId: PropTypes.number,
-  pageType: PropTypes.string,
-  title: PropTypes.string
-};
-
-RepoPublicComment.defaultProps = {
-  isReviewer: false,
-  type: '',
-  pageId: null,
-  pageType: 'reactions',
-  userInfo: '',
-  title: ''
-};
diff --git a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js b/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
deleted file mode 100644
index de5c60ff4..000000000
--- a/app/assets/javascripts/components/common/RepoReviewAuthorsModal.js
+++ /dev/null
@@ -1,530 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Checkbox, Table } from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import { findIndex, filter, uniq, flattenDeep } from 'lodash';
-import { OrcidIcon } from '../../libHome/RepoCommon';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import SelectionField from '../common/SelectionField';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import PublicActions from '../actions/PublicActions';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
-
-const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
-const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation from this Publication</Tooltip>;
-
-const lineAff = (creator, aid, affs, onDeleteAff) => {
-  const removeBtn = (
-    <OverlayTrigger placement="right" overlay={removeAffTooltip} >
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        onClick={() => onDeleteAff(creator, aid)}
-      >
-        <i className="fa fa-trash-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-  return (
-    <tr key={uuid.v4()} style={{ lineHeight: '2em' }}>
-      <td colSpan="4" width="90%">{affs[aid]}</td>
-      <td align="right" width="10%">{ removeBtn }</td>
-    </tr>
-  );
-};
-
-const secAff = (fields, g, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
-  return (
-    <tr className="aff-line" style={{ lineHeight: '2em' }}>
-      <td width="30%">
-        <SelectionField
-          options={departments}
-          value={(fields[`${g.id}@line_department`]) || ''}
-          field={`${g.id}@line_department`}
-          placeholder="e.g. Institute of Organic Chemistry"
-          onChange={onInputChange}
-          isCreatable
-        />
-      </td>
-      <td width="40%">
-        <SelectionField
-          options={organizations}
-          value={(fields[`${g.id}@line_organization`]) || ''}
-          field={`${g.id}@line_organization`}
-          placeholder="e.g. Karlsruhe Institute of Technology"
-          onChange={onInputChange}
-          isCreatable
-        />
-      </td>
-      <td width="20%">
-        <SelectionField
-          options={countries}
-          value={(fields[`${g.id}@line_country`]) || ''}
-          field={`${g.id}@line_country`}
-          onChange={onInputChange}
-          placeholder="e.g. Germany"
-        />
-      </td>
-      <td width="10%" align="right" >
-        <OverlayTrigger placement="right" overlay={addAffTooltip} >
-          <Button
-            bsSize="xsmall"
-            bsStyle="success"
-            onClick={() => onAddAff(g)}
-          >
-            <i className="fa fa-plus" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-      </td>
-    </tr>
-  );
-};
-
-const affbody = (taggData, creator, fields, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
-  const affs = taggData.affiliations || {};
-  const mainAff = creator.affiliationIds && creator.affiliationIds.length > 0 ?
-    creator.affiliationIds.map(aid => lineAff(creator, aid, affs, onDeleteAff)) : '';
-  const moreAff = secAff(fields, creator, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) || '';
-
-  return (
-    <span>
-      {mainAff}
-      {moreAff}
-    </span>
-  );
-
-}
-
-export default class RepoReviewAuthorsModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      taggData: null,
-      modalShow: false,
-      selectedAuthors: null,
-      collaborations: [],
-      countries: [],
-      fields: {},
-      organizations: [],
-      departments: [],
-    };
-
-    this.handleSelectAuthors = this.handleSelectAuthors.bind(this);
-    this.loadCollaborations = this.loadCollaborations.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.onAddAff = this.onAddAff.bind(this);
-    this.onDeleteAff = this.onDeleteAff.bind(this);
-    this.onAddNewAuthor = this.onAddNewAuthor.bind(this);
-    this.onSave = this.onSave.bind(this);
-    this.loadOrcid = this.loadOrcid.bind(this);
-    this.handleDeleteAuthor = this.handleDeleteAuthor.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadCollaborations();
-    PublicFetcher.affiliations('countries').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ countries: affOption });
-    });
-    PublicFetcher.affiliations('organizations').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ organizations: affOption });
-    });
-    PublicFetcher.affiliations('departments').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ departments: affOption });
-    });
-  }
-
-  componentWillUnmount() {
-    this.setState({
-      taggData: null
-    });
-  }
-
-  onAddNewAuthor() {
-    const { selectedAuthors, collaborations } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const { affiliations, creators, affiliation_ids, author_ids } = taggData;
-
-    const coidx = findIndex(collaborations, o => o.id === selectedAuthors.value);
-    const selCol = collaborations[coidx];
-    const affIds = selCol.current_affiliations.map(ca => (ca.id));
-
-    selCol.current_affiliations.map((ca) => {
-      affiliations[ca.id] = [ca.department, ca.organization, ca.country].join(', ');
-    });
-
-    const newAuthor = {
-      id: selCol.id,
-      familyName: selCol.last_name,
-      givenName: selCol.first_name,
-      name: selCol.name,
-      ORCID: selCol.orcid,
-      affiliationIds: affIds
-    };
-
-    creators.push(newAuthor);
-
-    //collaborations.splice(coidx, 1);
-
-    taggData.creators = creators;
-    taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids.concat(affIds)));
-    author_ids.push(newAuthor.id);
-    taggData.author_ids = author_ids;
-    taggData.affiliations = affiliations;
-    this.setState({ taggData, selectedAuthors: null });
-  }
-
-  onAddAff(g) {
-    const { fields } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const department = fields[`${g.id}@line_department`];
-    const organization = fields[`${g.id}@line_organization`];
-    const country = fields[`${g.id}@line_country`];
-    const { affiliations, creators, affiliation_ids } = taggData;
-
-    const params = {
-      department, organization, country
-    };
-    UsersFetcher.findAndCreateAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          affiliations[result.id] = result.aff_output;
-          g.affiliationIds.push(result.id);
-          const idx = findIndex(creators, o => o.id === g.id);
-          // authors.splice(idx, 1, result.user);
-          fields[`${g.id}@line_department`] = '';
-          fields[`${g.id}@line_organization`] = '';
-          fields[`${g.id}@line_country`] = '';
-          taggData.affiliations = affiliations;
-          affiliation_ids.push(result.id);
-          taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids));
-          taggData.creators[idx] = g;
-
-          this.setState({ taggData, fields });
-        }
-      });
-  }
-
-  onDeleteAff(g, aid) {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators } = taggData;
-
-    const ax = findIndex(g.affiliationIds, o => o.id === aid);
-    g.affiliationIds.splice(ax, 1);
-    const cx = findIndex(creators, o => o.id === g.id);
-    taggData.creators[cx] = g;
-    this.setState({ taggData });
-  }
-
-  onSave() {
-    const { taggData } = this.state;
-    const { element } = this.props;
-
-    if (taggData == null) {
-      alert('no changes!');
-      return true;
-    }
-
-    const { creators } = taggData;
-    const authorCount = (creators || []).length;
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
-      return true;
-    }
-
-    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.id, elementType: element.elementType })
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          if (element.elementType === 'Reaction') {
-            PublicActions.displayReviewReaction(element.id);
-          } else {
-            PublicActions.displayReviewSample(element.id);
-          }
-
-          this.setState({ taggData: null, modalShow: false });
-        }
-      });
-    return true;
-  }
-
-  loadOrcid() {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators, contributors, author_ids } = taggData;
-    let ids = [];
-    ids.push(contributors.id);
-    ids = ids.concat(author_ids);
-    UsersFetcher.loadOrcidByUserId({ ids }).then((result) => {
-      const orcids = result.orcids || [];
-      const cx = findIndex(orcids, o => o.id === contributors.id);
-      if (cx > -1) {
-        contributors.ORCID = orcids[cx].orcid;
-      }
-
-      creators.forEach((creator, idx) => {
-        const cix = findIndex(orcids, o => o.id === creator.id);
-        if (cix > -1) {
-          creators[idx].ORCID = orcids[cix].orcid;
-        }
-      });
-      taggData.creators = creators;
-      taggData.contributors = contributors;
-      this.setState({ taggData });
-    });
-  }
-
-  handleInputChange(type, ev) {
-    let { fields } = this.state;
-    switch (type) {
-      case 'country':
-        fields.country = ev && ev.value;
-        break;
-      case 'organization':
-        fields.organization = ev && ev.value;
-        break;
-      case 'department':
-        fields.department = ev && ev.value;
-        break;
-      default:
-        if (typeof fields === 'undefined') {
-          fields = {};
-        }
-        fields[type] = ev && ev.value;
-    }
-    this.setState({ fields });
-  }
-
-
-  handleSelectAuthors(val) {
-    if (val) { this.setState({ selectedAuthors: val }); }
-  }
-
-  loadCollaborations() {
-    UsersFetcher.fetchMyCollaborations()
-      .then((result) => {
-        this.setState({
-          collaborations: result.authors
-        });
-      });
-  }
-
-  handleDeleteAuthor(author) {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators, author_ids } = taggData;
-    taggData.creators = filter(creators, o => o.id !== author.id);
-    taggData.author_ids = filter(author_ids, o => o !== author.id);
-    this.setState({
-      taggData
-    });
-  }
-
-  contributor() {
-    const taggData = this.state.taggData || this.props.taggData;
-    const contributors = taggData.contributors || {};
-
-    const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
-    const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
-      <div key={uuid.v4()}>  -{contributors.affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br /> {aff} </div>);
-
-  }
-
-
-  handleClose() {
-    this.setState({ taggData: null, modalShow: false })
-  }
-
-  selectUsers() {
-    const { selectedAuthors, collaborations } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const creators = taggData.creators || [];
-    const author_ids = taggData.author_ids || [];
-
-    const affiliations = taggData.affiliations || [];
-    let defaultSelectedAuthors = [];
-
-    const filterCol = (collaborations || []).filter(({ id }) => !(author_ids || []).includes(id));
-
-    const options = filterCol.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    if (selectedAuthors == null) {
-      defaultSelectedAuthors = creators.map(au => (
-        { label: au.name, value: au.id }
-      ));
-    } else {
-      defaultSelectedAuthors = selectedAuthors;
-    }
-
-    const authorInfo = creators && creators.map((author) => {
-      const orcid = author.ORCID == null ? '' : <OrcidIcon orcid={author.ORCID} />;
-
-      const affIds = author.affiliationIds || [];
-      const aff = affIds.map(id => (
-        <div key={uuid.v4()}>  -{affiliations[id]}</div>
-      ));
-      return (<div key={uuid.v4()}>{orcid}{author.name}<br />{aff}<br /></div>);
-    });
-
-    const authorCount = (creators || []).length;
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
-        </Checkbox>
-        <InputGroup>
-          <InputGroup.Addon>My Collaboration(s)</InputGroup.Addon>
-          <Select
-            searchable
-            placeholder="Select authors from my collaboration"
-            backspaceRemoves
-            value={defaultSelectedAuthors}
-            defaultValue={defaultSelectedAuthors}
-            valueKey="value"
-            labelKey="label"
-            matchProp="name"
-            options={options}
-            onChange={this.handleSelectAuthors}
-          />
-          <InputGroup.Button>
-            <Button bsStyle="success" onClick={() => this.onAddNewAuthor()}>
-              <i className="fa fa-plus" />
-              Add to Author List
-            </Button>
-          </InputGroup.Button>
-        </InputGroup>
-      </div>
-    );
-  }
-
-  render() {
-    const { modalShow, countries, organizations, departments, fields } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const creators = taggData.creators || [];
-
-    if (this.props.isSubmitter != true || this.props.schemeOnly == true) {
-      return '';
-    }
-
-    let tbody = '';
-
-    tbody = creators.map(creator => (
-      <tbody key={`tbody_${uuid.v1()}`}>
-        <tr key={`tbody_${uuid.v1()}`}>
-          <td>
-            <DeleteConfirmBtn
-              label={creator.name}
-              onClickYes={() => this.handleDeleteAuthor(creator)}
-            />
-            &nbsp;
-          </td>
-          <td>{creator.name}</td>
-          <td><OrcidIcon orcid={creator.ORCID} />{creator.ORCID}</td>
-          <td>
-            {affbody(taggData, creator, fields, countries, organizations, departments, this.onAddAff, this.onDeleteAff, this.handleInputChange)}
-          </td>
-        </tr>
-
-      </tbody>
-    ));
-
-    return (
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}
-        >
-          <Button
-            onClick={() => this.setState({ modalShow: true })}
-            style={{ marginLeft: '5px' }}
-          >
-            <i className="fa fa-users" />&nbsp;
-            Publication Authors
-          </Button>
-        </OverlayTrigger>
-        <Modal
-          show={modalShow}
-          onHide={this.handleClose}
-          dialogClassName="author-modal-dialog"
-        >
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              {this.contributor()}
-              {this.selectUsers()}
-            </div>
-            <br />
-            <div>
-              <Table responsive condensed hover>
-                <thead>
-                  <tr style={{ backgroundColor: '#ddd' }}>
-                    <th width="5%">Action</th>
-                    <th width="10%">Name</th>
-                    <th width="15%">ORCID</th>
-                    <th width="70%">
-                      <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                        <tbody>
-                          <tr>
-                            <td style={{ padding: 'unset' }} width="90%">Affiliation</td>
-                            <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
-                          </tr>
-                        </tbody>
-                      </Table>
-                    </th>
-                  </tr>
-                </thead>
-                { tbody }
-              </Table>
-            </div>
-
-            <ButtonToolbar>
-              <Button bsStyle="warning" onClick={() => this.handleClose()}> Close</Button>
-              <Button
-                bsStyle="info"
-                onClick={() => this.loadOrcid()}
-              > get ORCID
-              </Button>
-              <Button
-                bsStyle="success"
-                onClick={() => this.onSave()}
-              > Save
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-RepoReviewAuthorsModal.propTypes = {
-  element: PropTypes.shape({
-    id: PropTypes.number,
-    elementType: PropTypes.string
-  }).isRequired,
-  isSubmitter: PropTypes.bool,
-  schemeOnly: PropTypes.bool,
-  taggData: PropTypes.object.isRequired,
-};
-
-
-
-RepoReviewAuthorsModal.defaultProps = {
-  isSubmitter: false,
-  schemeOnly: false,
-  taggData: {}
-};
\ No newline at end of file
diff --git a/app/assets/javascripts/components/common/RepoReviewHisColumns.js b/app/assets/javascripts/components/common/RepoReviewHisColumns.js
deleted file mode 100644
index 2fa3ec4cb..000000000
--- a/app/assets/javascripts/components/common/RepoReviewHisColumns.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { Table } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-const RepoReviewHisColumns = (props) => {
-  const { comments } = props;
-
-  if (comments && Object.keys(comments).length > 0) {
-    return (
-      <Table bordered style={{ fontSize: 'small', margin: '0px' }}>
-        <thead>
-          <tr>
-            <th width="10%">Column</th>
-            <th width="20%">Information</th>
-            <th width="10%">Date</th>
-            <th width="50%">Comment</th>
-            <th width="10%">From User</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            Object.keys(comments).map((key) => {
-              const info = comments[key];
-              return (
-                <tr key={key}>
-                  <td width="10%">{key}</td>
-                  <td width="20%">{info.origInfo}</td>
-                  <td width="10%">{RepoReviewTimeFormat(info.timestamp)}</td>
-                  <td width="50%">{info.comment}</td>
-                  <td width="10%">{info.username}</td>
-                </tr>
-              );
-            })
-          }
-        </tbody>
-      </Table>
-    );
-  }
-  return <span />;
-};
-
-RepoReviewHisColumns.propTypes = {
-  comments: PropTypes.object,
-};
-
-RepoReviewHisColumns.defaultProps = {
-  comments: {}
-};
-
-export default RepoReviewHisColumns;
diff --git a/app/assets/javascripts/components/common/RepoReviewModal.js b/app/assets/javascripts/components/common/RepoReviewModal.js
deleted file mode 100644
index 74fe9aa33..000000000
--- a/app/assets/javascripts/components/common/RepoReviewModal.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, FormControl, OverlayTrigger, Table, Tooltip } from 'react-bootstrap';
-import uuid from 'uuid';
-import { isEmpty } from 'lodash';
-import RepoReviewHisColumns from './RepoReviewHisColumns';
-import RepoReviewTimeFormat from './RepoReviewTimeFormat';
-
-export default class RepoReviewModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      idxDetail: -1
-    };
-    this.clickDetail = this.clickDetail.bind(this);
-  }
-
-  clickDetail(idxDetail) {
-    if (this.state.idxDetail == idxDetail) {
-      this.setState({ idxDetail: -1 });
-    } else {
-      this.setState({ idxDetail });
-    }
-  }
-
-  renderComments() {
-    const { idxDetail } = this.state;
-    const { reviewLevel, history } = this.props;
-
-    const curObj = (history && history.length > 0 && history.slice(-1).pop()) || {};
-
-    //const isEditable = ((reviewLevel === 3 && curObj.state === 'pending') || (reviewLevel === 2 && curObj.state === 'reviewed')) || false;
-
-    let historyTbl = null;
-
-    if (history && history.length > 0) {
-      historyTbl = history.map((his, idx) => (
-        <tbody key={uuid.v4()}>
-          <tr>
-            <td style={{ width: '5%' }}>{idx + 1}</td>
-            <td style={{ width: '5%' }}>
-              <OverlayTrigger placement="top" overlay={<Tooltip id="comment_tooltip">view columns&#39; comments</Tooltip>}>
-                <Button style={{ display: his.comments && isEmpty(his.comments) === false ? '' : 'none' }} bsSize="xsmall" onClick={() => this.clickDetail(idx)}><i className="fa fa-list" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </td>
-            <td style={{ width: '10%' }}>{his.action}</td>
-            <td style={{ width: '12%' }}>{RepoReviewTimeFormat(his.timestamp)}</td>
-            <td style={{ width: '48%' }}>{his.comment}</td>
-            <td style={{ width: '10%' }}>{his.username}</td>
-          </tr>
-          {
-            (idxDetail === idx && his.comments && isEmpty(his.comments) === false) ?
-            (<tr><td colSpan={6} style={{ width: '100%' }}><RepoReviewHisColumns comments={his.comments} /></td></tr>) : null
-          }
-        </tbody>
-      ));
-    }
-
-    return (
-      <div>
-        <div >
-          <Table striped bordered>
-            <thead>
-              <tr>
-                <th width="5%">#</th>
-                <th width="5%">Detail</th>
-                <th width="10%">Action</th>
-                <th width="12%">Date</th>
-                <th width="48%">Comment</th>
-                <th width="10%">From User</th>
-              </tr>
-            </thead>
-            {historyTbl}
-          </Table>
-        </div>
-        <br />
-        Summary
-        <FormControl
-          componentClass="textarea"
-          style={{ height: '120px', overflow: 'auto', whiteSpace: 'pre' }}
-          defaultValue={curObj.comment || ''}
-          inputRef={(m) => { this.summaryInput = m; }}
-        />
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      show, elementId, action, onSubmit, onHide, reviewLevel, history
-    } = this.props;
-
-    const currComment = (history && history.length > 0 && history.slice(-1).pop()) || {}
-    const isEditable = ((reviewLevel === 3 && currComment.state === 'pending') || (reviewLevel === 2 && currComment.state === 'reviewed')) || false;
-
-    let title = action;
-    if (reviewLevel === 2 && action === 'Decline') {
-      title = 'Withdraw';
-    } else if (reviewLevel === 3 && action === 'Decline') {
-      title = 'Reject';
-    }
-
-    if (show) {
-      return (
-        <div>
-          <Modal
-            show
-            dialogClassName="structure-editor-modal"
-            onHide={() => onHide(false)}
-            bsSize="large"
-            backdrop="static"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                {title}
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <div id="div-modal-body" style={{ height: 'calc(100vh - 300px)', maxHeight: 'calc(100vh - 300px)', overflow: 'auto' }}>
-                {this.renderComments()}
-
-              </div>
-              <br />
-              <ButtonToolbar>
-                <Button
-                  bsStyle="warning"
-                  onClick={() => onHide(false)}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  disabled={!isEditable}
-                  onClick={() =>
-                    onSubmit(
-                      elementId,
-                      this.summaryInput.value,
-                      action
-                    )
-                  }
-                > {title}
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-RepoReviewModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  action: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-  history: PropTypes.array,
-  reviewLevel: PropTypes.number,
-  onSubmit: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired
-};
-
-RepoReviewModal.defaultProps = {
-  show: false,
-  reviewLevel: 0,
-  history: []
-};
diff --git a/app/assets/javascripts/components/common/RepoReviewTimeFormat.js b/app/assets/javascripts/components/common/RepoReviewTimeFormat.js
deleted file mode 100644
index 9b0937446..000000000
--- a/app/assets/javascripts/components/common/RepoReviewTimeFormat.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-
-const RepoReviewTimeFormat = (timeField) => {
-  if (timeField == null || typeof timeField === 'undefined' || timeField === '') {
-    return '';
-  }
-  let newTimeObj = null;
-  if (moment(timeField, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-    newTimeObj = moment(timeField, 'DD-MM-YYYY HH:mm:ss');
-    return moment(newTimeObj).format('DD-MM-YYYY HH:mm');
-  }
-  return timeField;
-};
-
-RepoReviewTimeFormat.propTypes = {
-  timeField: PropTypes.func.isRequired
-};
-
-RepoReviewTimeFormat.defaultProps = {
-  timeField: null
-};
-
-export default RepoReviewTimeFormat;
diff --git a/app/assets/javascripts/components/common/RepoSpectra.js b/app/assets/javascripts/components/common/RepoSpectra.js
deleted file mode 100644
index 20da842fe..000000000
--- a/app/assets/javascripts/components/common/RepoSpectra.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
-import { BuildSpcInfos, JcampIds } from '../utils/SpectraHelper';
-import SpectraActions from '../actions/SpectraActions';
-import ViewSpectra from '../ViewSpectra';
-import NotificationActions from '../actions/NotificationActions';
-
-const RepoSpectraBtn = (props) => {
-  const { element, analysis } = props;
-  if (element == null || analysis == null) return null;
-  const spcInfos = BuildSpcInfos(element, analysis);
-  if (spcInfos.length < 1) return null;
-  const toggleSpectraModal = (e) => {
-    e.stopPropagation();
-    if (!props.isLogin) {
-      NotificationActions.add({
-        title: 'View Spectra', message: 'Please log in first.', level: 'warning', position: 'tc'
-      });
-    } else {
-      SpectraActions.ToggleModal();
-      SpectraActions.LoadSpectra.defer(spcInfos);
-    }
-  };
-  const jcampIds = JcampIds(analysis);
-  const hasJcamp = jcampIds.orig.length > 0;
-  return (
-    <span>
-      <OverlayTrigger
-        placement="top"
-        delayShow={500}
-        overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}
-      >
-        <Button
-          bsSize="xsmall"
-          className="button-right"
-          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-          onClick={toggleSpectraModal}
-          disabled={!hasJcamp || !(spcInfos.length > 0)}
-        >
-          <i className="fa fa-area-chart" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-      <ViewSpectra sample={element} handleSampleChanged={() => { }} handleSubmit={() => { }} />
-    </span>
-  );
-};
-
-RepoSpectraBtn.propTypes = {
-  element: PropTypes.object,
-  analysis: PropTypes.object,
-  isLogin: PropTypes.bool
-};
-
-RepoSpectraBtn.defaultProps = { isLogin: false };
-
-export default RepoSpectraBtn;
diff --git a/app/assets/javascripts/components/common/RepoUserComment.js b/app/assets/javascripts/components/common/RepoUserComment.js
deleted file mode 100644
index a1f14dd38..000000000
--- a/app/assets/javascripts/components/common/RepoUserComment.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-export default class RepoUserComment extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false
-    };
-    this.sendEmail = this.sendEmail.bind(this);
-  }
-
-  sendEmail() {
-    const { id, type, pageType, pageId } = this.props;
-    RepositoryFetcher.userComment(id, type, pageId || id, pageType, this.commentInput.value)
-      .then((result) => {
-        this.setState({ modalShow: false });
-      });
-  }
-
-  render() {
-    const { modalShow } = this.state;
-    const { id, isLogin, title } = this.props;
-    const defaultAttrs = {
-      style: {
-        height: '400px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    if (isLogin) {
-      return (
-        <span>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
-            <Button bsSize="xsmall" onClick={() => this.setState({ modalShow: true })}>
-              <i className="fa fa-envelope-o" />
-            </Button>
-          </OverlayTrigger>
-          <Modal
-            show={modalShow}
-            onHide={() => this.setState({ modalShow: false })}
-            dialogClassName="pub-info-dialog"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Comments for the reviewers
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body style={{ overflow: 'auto' }}>
-              {title}
-              <FormControl
-                componentClass="textarea"
-                {...defaultAttrs}
-                inputRef={(m) => { this.commentInput = m; }}
-              />
-              <br />
-              <ButtonToolbar>
-                <Button
-                  bsStyle="warning"
-                  onClick={() => this.setState({ modalShow: false })}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  onClick={() => this.sendEmail()}
-                > Send to Chemotion Reviewers
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </span>
-      );
-    }
-    return (<span />);
-  }
-}
-
-RepoUserComment.propTypes = {
-  id: PropTypes.number.isRequired,
-  isLogin: PropTypes.bool,
-  type: PropTypes.string,
-  title: PropTypes.string,
-  pageType: PropTypes.string,
-  pageId: PropTypes.number
-};
-
-RepoUserComment.defaultProps = {
-  isLogin: false,
-  type: '',
-  title: '',
-  pageType: 'reactions',
-  pageId: null
-};
diff --git a/app/assets/javascripts/components/common/RepoXvialButton.js b/app/assets/javascripts/components/common/RepoXvialButton.js
deleted file mode 100644
index 4dad172a6..000000000
--- a/app/assets/javascripts/components/common/RepoXvialButton.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, Tooltip, FormControl, Table } from 'react-bootstrap';
-import uuid from 'uuid';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import NotificationActions from '../actions/NotificationActions';
-
-const registedCompoundTooltip = (
-  <div className="repo-xvial-info">
-    For availability please contact the Compound Platform team (<span className="env"><i className="fa fa-envelope-o" aria-hidden="true" /></span>). An explanation can be accessed via our Youtube channel&nbsp;
-    <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play youtube" /></a>&nbsp;
-      or on our how-to pages
-    <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
-  </div>
-);
-
-const listCom = (xvialCom) => {
-  if (typeof xvialCom === 'undefined') return <br />;
-  if (!xvialCom.allowed) return <br />;
-  const listComData = xvialCom.hasData ? (
-    xvialCom.data.map(x => (
-      <tr key={uuid.v4()}>
-        <td>{x.x_data.xid}</td>
-        <td>{x.x_data.provided_by}</td>
-        <td>{x.x_created_at}</td>
-        <td>{x.x_short_label}</td>
-        <td>{x.x_data.origin_id}</td>
-      </tr>
-    ))
-  ) : (<tr><td colSpan="5">No Data found in Compound platform.</td></tr>);
-  return (
-    <div>
-      <h4><i>Reference (data from Compound platform)</i></h4>
-      <Table striped bordered condensed hover>
-        <thead>
-          <tr>
-            <th>X-Vial</th>
-            <th>Provided by</th>
-            <th>Created at</th>
-            <th>Short label of Sample</th>
-            <th>Name of origin Sample</th>
-          </tr>
-        </thead>
-        <tbody>
-          {listComData}
-        </tbody>
-      </Table>
-    </div>
-  );
-};
-
-export default class RepoXvialButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dataModalShow: false,
-      requestModalShow: false
-    };
-    this.save = this.save.bind(this);
-    this.request = this.request.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.checkRequest = this.checkRequest.bind(this);
-  }
-
-  checkRequest() {
-    if (this.props.isLogin) {
-      this.setState({ requestModalShow: true });
-    } else {
-      NotificationActions.add({
-        title: 'Request to the Compound-Platform.eu',
-        message: 'Please log in to send the request.',
-        level: 'warning',
-        position: 'tc'
-      });
-    }
-  }
-
-  save() {
-    const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, this.xInput.value, 'update')
-      .then(() => {
-        this.closeModal();
-        saveCallback(elementId, this.xInput.value);
-      });
-  }
-
-  request() {
-    const { elementId } = this.props;
-    RepositoryFetcher.compound(elementId, this.rInput.value, 'request')
-      .then(() => {
-        this.closeModal();
-        NotificationActions.add({
-          title: 'Request to the Compound-Platform.eu',
-          message: 'Your request has been emailed to the Compound-Platform',
-          level: 'info',
-          position: 'tc'
-        });
-      });
-  }
-
-  closeModal() {
-    this.setState({ dataModalShow: false, requestModalShow: false });
-  }
-
-  render() {
-    const { dataModalShow, requestModalShow } = this.state;
-    const {
-      isEditable, isLogin, data, allowRequest, xvialCom
-    } = this.props;
-    const hasData = !!(data && data !== '');
-    const compoundLink = hasData ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}>
-        <Button bsStyle="link" bsSize="xsmall" onClick={() => { window.open('https://compound-platform.eu/home', '_blank'); }}>X-Vial: Sample available</Button>
-      </OverlayTrigger>
-    ) : null;
-    const dataModal = (
-      <Modal bsSize="large" show={dataModalShow} onHide={() => this.closeModal()} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Compound X-vial number</Modal.Title></Modal.Header>
-        <Modal.Body>
-          <FormControl type="text" defaultValue={data} inputRef={(m) => { this.xInput = m; }} />
-          {listCom(xvialCom)}
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => this.save()}>Save</Button>
-        </Modal.Body>
-      </Modal>
-    );
-    const requestModal = (
-      <Modal show={requestModalShow} onHide={() => this.closeModal()} backdrop="static">
-        <Modal.Header closeButton><Modal.Title>Request compound</Modal.Title></Modal.Header>
-        <Modal.Body>
-          <FormControl style={{ height: '400px' }} componentClass="textarea" inputRef={(m) => { this.rInput = m; }} />
-          <br />
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>Close</Button>&nbsp;
-          <Button bsStyle="primary" onClick={() => this.request()}>Send request to the Compound-Platform</Button>
-        </Modal.Body>
-      </Modal>
-    );
-    const editLink = isEditable ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>}>
-        <a onClick={() => this.setState({ dataModalShow: true })} rel="noopener noreferrer"><i className="fa fa-pencil" /></a>
-      </OverlayTrigger>
-    ) : null;
-    const requestLink = allowRequest && hasData ? (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}>
-        <a onClick={() => this.checkRequest()} rel="noopener noreferrer"><i className="fa fa-envelope-o" /></a>
-      </OverlayTrigger>
-    ) : null;
-    const info = requestLink ? (
-      <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
-        <a rel="noopener noreferrer"><i className="fa fa-info-circle" aria-hidden="true" /></a>
-      </OverlayTrigger>
-    ) : null;
-    if (!isLogin) {
-      if (compoundLink) {
-        return (
-          <span className="xvial-pub-elem">
-            <span><i className="icon-xvial" aria-hidden="true" />{compoundLink}{requestLink}{info}</span>
-          </span>
-        );
-      }
-      return null;
-    }
-    if (compoundLink) {
-      return (
-        <span className="xvial-pub-elem">
-          <span>
-            <i className="icon-xvial" aria-hidden="true" />
-            {compoundLink}
-            {editLink}
-            {requestLink}
-            {info}
-          </span>
-          {dataModal}
-          {requestModal}
-        </span>
-      );
-    }
-    if (editLink) {
-      return (
-        <span className="xvial-pub-elem">
-          <span>
-            <i className="icon-xvial" aria-hidden="true" />
-            {editLink}
-          </span>
-          {dataModal}
-        </span>
-      );
-    }
-    return null;
-  }
-}
-
-RepoXvialButton.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  isEditable: PropTypes.bool,
-  isLogin: PropTypes.bool,
-  allowRequest: PropTypes.bool,
-  data: PropTypes.string,
-  saveCallback: PropTypes.func
-};
-
-RepoXvialButton.defaultProps = {
-  isEditable: false,
-  isLogin: false,
-  allowRequest: false,
-  data: null,
-  saveCallback: () => {}
-};
diff --git a/app/assets/javascripts/components/common/SelectionField.js b/app/assets/javascripts/components/common/SelectionField.js
deleted file mode 100644
index 0637dc06a..000000000
--- a/app/assets/javascripts/components/common/SelectionField.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {
-  FormGroup,
-  ControlLabel,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import Select from 'react-select';
-
-const SelectionField = (props) => {
-  const label = props.label && props.label !== '' ?
-    <ControlLabel>{props.label}</ControlLabel> : '';
-  if (props.isCreatable) {
-    return (
-      <FormGroup>
-        {label}
-        <Select.Creatable
-          name={`select-${uuid.v4()}`}
-          options={props.options}
-          placeholder={props.placeholder}
-          multi={false}
-          isClearable
-          value={props.value}
-          onChange={event => props.onChange(props.field, event)}
-          promptTextCreator={p => `Create new ${p} ${props.label}`}
-        />
-      </FormGroup>
-    );
-  }
-  return (
-    <FormGroup>
-      {label}
-      <Select
-        name={`select-${uuid.v4()}`}
-        options={props.options}
-        placeholder={props.placeholder}
-        multi={false}
-        isClearable
-        value={props.value}
-        onChange={event => props.onChange(props.field, event)}
-      />
-    </FormGroup>
-  );
-};
-
-SelectionField.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.shape).isRequired,
-  value: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  isCreatable: PropTypes.bool
-};
-
-SelectionField.defaultProps = {
-  label: '',
-  placeholder: 'Please select...',
-  isCreatable: false
-};
-
-export default SelectionField;
diff --git a/app/assets/javascripts/components/fetchers/ArticleFetcher.js b/app/assets/javascripts/components/fetchers/ArticleFetcher.js
deleted file mode 100644
index 4c8d151e7..000000000
--- a/app/assets/javascripts/components/fetchers/ArticleFetcher.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ArticleFetcher {
-  static initial() {
-    const promise = fetch('/api/v1/public/article_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdate(params) {
-    const promise = fetch('/api/v1/articles/create_or_update/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static delete(params) {
-    const promise = fetch(`/api/v1/articles/${params.key}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static initialHowTo() {
-    const promise = fetch('/api/v1/public/howto_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdateHowTo(params) {
-    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static deleteHowTo(params) {
-    const promise = fetch('/api/v1/articles/delete_howto', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static updateEditorImage(file, editorType) {
-    const data = new FormData();
-    data.append('file[]', file.file, file.name);
-    data.append('editor_type', editorType);
-    const promise = fetch('/api/v1/articles/editor_image', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-}
diff --git a/app/assets/javascripts/components/fetchers/PublicFetcher.js b/app/assets/javascripts/components/fetchers/PublicFetcher.js
deleted file mode 100644
index 881eb62bc..000000000
--- a/app/assets/javascripts/components/fetchers/PublicFetcher.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import 'whatwg-fetch';
-import _ from 'lodash';
-import Molecule from '../models/Molecule';
-import Reaction from '../models/Reaction';
-
-export default class PublicFetcher {
-  static fetchPublicMolecules(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
-
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        molecules: json.molecules.map(m => new Molecule(m)),
-        page: parseInt(response.headers.get('X-Page')),
-        pages: parseInt(response.headers.get('X-Total-Pages')),
-        perPage: parseInt(response.headers.get('X-Per-Page'))
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchPublicReactions(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const schemeOnly = params.schemeOnly || false;
-    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
-
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        reactions: json.reactions.map(m => new Reaction(m)),
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchAdvancedValues(advType, name) {
-    return fetch(`/api/v1/public/find_adv_valuess.json?name=${name}&adv_type=${advType}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicMolecules(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
-        page: json.publicMolecules.page,
-        totalElements: json.publicMolecules.totalElements,
-        perPage: json.publicMolecules.perPage
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicReactions(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
-        page: json.publicReactions.page,
-        totalElements: json.publicReactions.totalElements,
-        perPage: json.publicReactions.perPage
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublished() {
-    const api = '/api/v1/public/last_published.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublishedSample() {
-    const api = '/api/v1/public/last_published_sample.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDataset(id) {
-    const api = `/api/v1/public/dataset.json?id=${id}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
-    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
-    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReaction(id) {
-    const api = `/api/v1/public/reaction.json?id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static queryPid(params) {
-    const api = `/api/v1/public/pid/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id: params.id
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static queryInchikey(params) {
-    const api = `/api/v1/public/inchikey/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          inchikey: params.inchikey,
-          type: params.type,
-          version: params.version
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static selectPublicCollection() {
-    return fetch(
-      '/api/v1/public/collection.json',
-      { credentials: 'same-origin' }
-    ).then((response) => { return response.json(); })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static publishedStatics() {
-    const api = '/api/v1/public/published_statics';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then((response) => {
-      return response.json();
-    })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static affiliations(type) {
-    const api = `/api/v1/public/affiliations/${type}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static downloadZip(id) {
-    let fileName = 'dataset.zip';
-    return fetch(`/api/v1/public/download/dataset?id=${id}`, {
-      credentials: 'same-origin', method: 'GET',
-    }).then((response) => {
-      const disposition = response.headers.get('Content-Disposition');
-      if (disposition && disposition.indexOf('attachment') !== -1) {
-        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        const matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          fileName = matches[1].replace(/['"]/g, '');
-        }
-      }
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js b/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
deleted file mode 100644
index 4cd1d6bcb..000000000
--- a/app/assets/javascripts/components/fetchers/RepositoryFetcher.js
+++ /dev/null
@@ -1,466 +0,0 @@
-import 'whatwg-fetch';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import NotificationActions from '../actions/NotificationActions';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray()
-    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    .map(x => x.id)
-);
-
-export default class RepositoryFetcher {
-  static generateEmbargoAccount(id) {
-    const api = '/api/v1/repository/embargo/account';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static releaseEmbargo(id) {
-    const api = '/api/v1/repository/embargo/release';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static deleteEmbargo(id) {
-    const api = '/api/v1/repository/embargo/delete';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static moveEmbargo(id, newEmbargo, element) {
-    const api = '/api/v1/repository/embargo/move';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static reviewPublish(element) {
-    const { id, type } = element;
-    return fetch('/api/v1/repository/reviewing/submit', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .then((json) => {
-        if (typeof json.reaction !== 'undefined') {
-          json.reaction.can_publish = false;
-          json.reaction.can_update = false;
-          return new Reaction(json.reaction);
-        } else if (type === 'sample') {
-          json.sample.can_publish = false;
-          json.sample.can_update = false;
-          return new Sample(json.sample);
-        }
-        return null;
-    })
-    .catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishSample(params, option = null) {
-    const { sample, coauthors, refs, embargo, license, addMe } = params;
-    const analysesIds = AnalysisIdstoPublish(sample);
-    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        sampleId: sample.id,
-        analysesIds,
-        coauthors,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish sample fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_sample_error'};
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.sample.can_publish = true;
-        json.sample.can_update = true;
-      }
-      return new Sample(json.sample);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishReactionScheme(params) {
-    const {
-      reaction, coauthors, embargo, license, addMe, schemeDesc
-    } = params;
-    return fetch('/api/v1/repository/publishReactionScheme', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        temperature: reaction.temperature,
-        duration: reaction.durationDisplay,
-        products: reaction.products,
-        schemeDesc,
-        coauthors,
-        embargo,
-        license,
-        addMe
-      })
-    })
-      .then(response => (response.json()))
-      .then((json) => {
-        if (json.error) {
-          const notification = {
-            title: 'Publish reaction scheme fail',
-            message: `Error: ${json.error}`,
-            level: 'error',
-            dismissible: 'button',
-            autoDismiss: 6,
-            position: 'tr',
-            uid: 'publish_reaction_error'
-          };
-          NotificationActions.add(notification);
-          return null;
-        }
-        return new Reaction(json.reaction);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static publishReaction(params, option = null) {
-    const { reaction, coauthors, refs, embargo, license, isFullyPublish, addMe } = params;
-    if (!isFullyPublish) return this.publishReactionScheme(params);
-    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(reaction)
-    )
-    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        analysesIds,
-        coauthors,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish reaction fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_reaction_error'
-        };
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.reaction.can_publish = true;
-        json.reaction.can_update = true;
-      }
-      return new Reaction(json.reaction);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchEmbargoCollections() {
-    const api = '/api/v1/repository/embargo_list.json';
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElements(id) {
-    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
-    const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
-    const paramSearchValue = (searchValue && searchValue !== '') ? `&search_value=${searchValue}` : '';
-    const api = `/api/v1/repository/list.json?type=${type}&state=${state}${paramSearchType}${paramSearchValue}&page=${page}&per_page=${perPage}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        elements: json.elements,
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
-        selectType: type,
-        selectState: state,
-        searchType,
-        searchValue
-      })))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElement(type, id) {
-    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReaction(id, isPublic) {
-    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchSample(id, isPublic) {
-    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static saveComments(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comments', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static updateComment(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  static repoReviewPublish(id, type, comment, action) {
-    let api = '';
-    if (action === 'Comments') {
-      api = '/api/v1/repository/reviewing/comments';
-    } else if (action === 'Accept') {
-      api = '/api/v1/repository/reviewing/accepted';
-    } else if (action === 'Review') {
-      api = '/api/v1/repository/reviewing/reviewed';
-    } else if (action === 'Submit') {
-      api = '/api/v1/repository/reviewing/submit';
-    } else if (action === 'Decline') {
-      api = '/api/v1/repository/reviewing/declined';
-    } else {
-      // return;
-    }
-
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id, type, comment
-      })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static fetchReviewSearchOptions(searchType, elementType, state) {
-    return fetch(`/api/v1/repository/review_search_options.json?type=${searchType}&element_type=${elementType}&state=${state}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static previewMetadata(id, type) {
-    return fetch('/api/v1/repository/metadata/preview', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static userComment(id, type, pageId, pageType, comment) {
-    return fetch('/api/v1/repository/comment/user_comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, pageId, pageType, comment })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static reviewerComment(id, type, comment) {
-    return fetch('/api/v1/repository/comment/reviewer', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comment })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-
-  static updateComment(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  
-  static saveRepoAuthors(params = {}) {
-    return fetch('/api/v1/repository/save_repo_authors', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static zipPreviewMetadata(id, type) {
-    const currentTime = Math.floor(Date.now() / 1000);
-    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
-    return fetch('/api/v1/repository/metadata/preview_zip', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then((response) => {
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static compound(id, data, action = 'request') {
-    const api = `/api/v1/repository/compound/${action}`;
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, data })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-}
diff --git a/app/assets/javascripts/components/report/SectionDoiList.js b/app/assets/javascripts/components/report/SectionDoiList.js
deleted file mode 100644
index 283a60f82..000000000
--- a/app/assets/javascripts/components/report/SectionDoiList.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import ReportActions from '../actions/ReportActions';
-import ReportStore from '../stores/ReportStore';
-import { UserSerial } from '../utils/ReportHelper';
-import ReportsFetcher from '../fetchers/ReportsFetcher';
-
-
-const svgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-export default class SectionDoiList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      objs: props.objs,
-      molSerials: props.molSerials,
-      dois: []
-    };
-
-    this.initGetDoi = this.initGetDoi.bind(this);
-  }
-  componentDidMount() {
-    this.initGetDoi();
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (nextProps.objs && nextProps.objs.length > 0) {
-      if (this.state.objs.length !== nextProps.objs.length) {
-        this.setState({ objs: nextProps.objs });
-        this.initGetDoi();
-      }
-    }
-    return true;
-  }
-
-  initGetDoi() {
-    ReportsFetcher.getDois(this.props.objs)
-      .then((result) => {
-        this.setState({
-          dois: result.dois
-        })
-      });
-  }
-
-  render() {
-    const { dois } = this.state;
-    let doiTbl = <span />
-    if (dois && dois.length > 0) {
-      doiTbl = dois.map((e) => {
-        let ds = <div />;
-        if (typeof (e.dois) !== 'undefined' && e.dois && e.dois.length > 0) {
-          ds = e.dois.map(d => d == null ? <div/> : (<div>{d}<br /></div>) )
-        }
-        return (
-          <tr key={e.element_id}>
-            <td style={{ width: '30%' }}>
-              <div>
-                <SVG src={svgPath(e.svg, e.element_type)} className="molecule-mid" key={e.svg} />
-              </div>
-            </td>
-            <td style={{ width: '70%' }}>{ds}</td>
-          </tr>
-        )
-      });
-    }
-    return (
-      <Table striped bordered hover>
-        <thead>
-          <tr>
-            <th width="30%">SVG</th>
-            <th width="70%">DOI</th>
-          </tr>
-        </thead>
-        <tbody>
-          { doiTbl }
-        </tbody>
-      </Table>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/stores/LoadingStore.js b/app/assets/javascripts/components/stores/LoadingStore.js
deleted file mode 100644
index e812f4a03..000000000
--- a/app/assets/javascripts/components/stores/LoadingStore.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import alt from '../alt';
-import LoadingActions from '../actions/LoadingActions';
-import ReportActions from '../actions/ReportActions';
-import ElementActions from '../actions/ElementActions';
-import InboxActions from '../actions/InboxActions';
-import PredictionActions from '../actions/PredictionActions';
-import RepositoryActions from '../actions/RepositoryActions';
-import PublicActions from '../actions/PublicActions';
-
-class LoadingStore {
-  constructor() {
-    this.loading = false;
-
-    this.bindListeners({
-      handleStart: LoadingActions.start,
-      handleStop:
-        [
-          LoadingActions.stop,
-          ReportActions.clone,
-          ReportActions.updateCheckedTags,
-          ReportActions.loadRreview,
-          ElementActions.createGenericEl,
-          ElementActions.updateGenericEl,
-          ElementActions.createSampleForReaction,
-          ElementActions.updateSampleForReaction,
-          ElementActions.updateSampleForWellplate,
-          ElementActions.createSample,
-          ElementActions.updateSample,
-          ElementActions.createReaction,
-          ElementActions.updateReaction,
-          ElementActions.createResearchPlan,
-          ElementActions.updateResearchPlan,
-          ElementActions.createWellplate,
-          ElementActions.updateWellplate,
-          InboxActions.fetchInbox,
-          PredictionActions.infer,
-          RepositoryActions.reviewPublish,
-          PublicActions.updateComment,
-          PublicActions.reviewPublish,
-        ],
-    });
-  }
-
-  handleStart() {
-    this.setState({ loading: true });
-  }
-
-  handleStop() {
-    this.setState({ loading: false });
-  }
-}
-
-export default alt.createStore(LoadingStore, 'LoadingStore');
diff --git a/app/assets/javascripts/components/stores/PublicStore.js b/app/assets/javascripts/components/stores/PublicStore.js
deleted file mode 100644
index 6f6fac396..000000000
--- a/app/assets/javascripts/components/stores/PublicStore.js
+++ /dev/null
@@ -1,350 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import PublicActions from '../actions/PublicActions';
-import SearchActions from '../actions/ElementActions';
-import UIActions from '../actions/UIActions';
-
-class PublicStore {
-  constructor() {
-    this.molecules = [];
-    this.reactions = [];
-    this.page = 1;
-    this.pages = 1;
-    this.perPage = 10;
-    this.selectType;
-    this.selectState;
-    this.searchType;
-    this.searchValue;
-    this.selectEmbargoId;
-    this.publishedStatics = [];
-    this.lastPublished;
-    this.lastPublishedSample;
-    this.guestPage = "";
-    this.currentElement = null;
-    this.queryId = -1;
-    this.news = {};
-    this.articles = [];
-    this.howto = {};
-    this.howtos = [];
-    this.bundles = [];
-
-    this.bindListeners({
-      handleGetMolecules: PublicActions.getMolecules,
-      handleGetReactions: PublicActions.getReactions,
-      handleSearchMolecules: PublicActions.getSearchMolecules,
-      handleSearchReactions: PublicActions.getSearchReactions,
-      handlePublishedStatics: PublicActions.publishedStatics,
-      handleLastPublished: PublicActions.lastPublished,
-      handleLastPublishedSample: PublicActions.lastPublishedSample,
-      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
-      handleDisplayDataset: PublicActions.displayDataset,
-      handleDisplayMolecule: PublicActions.displayMolecule,
-      handleDisplayReaction: PublicActions.displayReaction,
-      handleReceiveSearchresult: SearchActions.fetchBasedOnSearchSelectionAndCollection,
-      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
-      handleClose: PublicActions.close,
-      handleArticles: PublicActions.articles,
-      handleEditArticle: PublicActions.editArticle,
-      handleDisplayArticle: PublicActions.displayArticle,
-      handleHowTos: PublicActions.howtos,
-      handleEditHowTo: PublicActions.editHowTo,
-      handleDisplayHowTo: PublicActions.displayHowTo,
-      handleGetElements: PublicActions.getElements,
-      handleGetEmbargoElements: PublicActions.getEmbargoElements,
-      handleDisplayReviewReaction: PublicActions.displayReviewReaction,
-      handleDisplayReviewSample: PublicActions.displayReviewSample,
-      handelReviewPublish: PublicActions.reviewPublish,
-      handelUpdateComment: PublicActions.updateComment,
-      handleFetchBundles: PublicActions.fetchEmbargoBundle,
-      handleDisplayEmbargoElement: PublicActions.displayReviewEmbargo,
-      handleEmbargoRelease: [PublicActions.releaseEmbargo, PublicActions.deleteEmbargo],
-      handleEmbargoMove: PublicActions.moveEmbargo,
-      handleRefreshPubElements: PublicActions.refreshPubElements,
-    });
-  }
-
-  handleRefreshPubElements(type) {
-    PublicActions[`get${type}`]({ page: this.page, perPage: this.perPage });
-  }
-
-  handleClose({ deleteEl }) {
-    this.setState({
-      currentElement: null
-    });
-    if (this.guestPage === 'embargo') {
-      Aviator.navigate('/embargo', { silent: true });
-    } else if (this.guestPage === 'review') {
-      Aviator.navigate('/review', { silent: true });
-    } else {
-      Aviator.navigate('/publications', { silent: true });
-    }
-  }
-
-  handleClearSearchSelection(){
-    PublicActions.getMolecules.defer();
-  }
-
-  handleGetMolecules(results) {
-    const { molecules, page, pages, perPage } = results;
-    this.setState({ molecules, page, pages, perPage });
-  }
-
-  handleGetReactions(results) {
-    const { reactions, page, pages, perPage } = results;
-    this.setState({ reactions, page, pages, perPage });
-  }
-
-  handleSearchMolecules(results) {
-    const { molecules, page, perPage, totalElements } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      molecules, page, pages, perPage
-    });
-  }
-
-  handleSearchReactions(results) {
-    const {
-      reactions, page, perPage, totalElements
-    } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      reactions, page, pages, perPage
-    });
-  }
-
-  handlePublishedStatics(publishedStatics) {
-    if (publishedStatics) {
-      this.setState({ publishedStatics });
-    }
-  }
-
-  handleLastPublished(lastPublished) {
-    if (lastPublished) {
-      this.setState({ lastPublished });
-    }
-  }
-
-  handleLastPublishedSample(lastPublishedSample){
-    if (lastPublishedSample) {
-      this.setState({ lastPublishedSample });
-    }
-  }
-
-  handleOpenRepositoryPage(page) {
-    this.setState({ guestPage: page, currentElement: null });
-  }
-
-  handleDisplayDataset(result) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'dataset',
-      queryId: result.id,
-      currentElement: result.dataset
-    });
-    Aviator.navigate(`/publications/datasets/${result.id}`,
-      { silent: true });
-  }
-
-  handleDisplayMolecule(moleculeList) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'molecule',
-      queryId: moleculeList.id,
-      currentElement: moleculeList.moleculeData
-    });
-    Aviator.navigate(`/publications/molecules/${moleculeList.id}`, { silent: true });
-  }
-
-  handleDisplayReaction(reactionList) {
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'reaction',
-      queryId: reactionList.id,
-      currentElement: reactionList.reactionData
-    });
-    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
-  }
-
-  handleReceiveSearchresult(result) {
-    this.setState({ ...result.publicMolecules });
-  }
-
-  handleArticles(result) {
-    this.setState({
-      guestPage: 'newsroom',
-      articles: result.data
-    });
-  }
-
-  handleEditArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    news.article = news.article ? news.article : [];
-    this.setState({
-      guestPage: 'newseditor',
-      news,
-    });
-  }
-
-  handleDisplayArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    this.setState({
-      guestPage: 'newsreader',
-      news,
-    });
-  }
-
-  handleHowTos(result) {
-    this.setState({
-      guestPage: 'howto',
-      howtos: result.data
-    });
-  }
-
-  handleEditHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    howto.article = howto.article ? howto.article : [];
-    this.setState({
-      guestPage: 'howtoeditor',
-      howto,
-    });
-  }
-
-  handleDisplayHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    this.setState({
-      guestPage: 'howtoreader',
-      howto,
-    });
-  }
-
-  handleGetElements(results) {
-    const { elements, page, perPage, pages, selectType, selectState, searchType, searchValue } = results;
-    this.setState({ elements, page, perPage, pages, selectType, selectState, searchType, searchValue });
-  }
-
-  handleGetEmbargoElements(results) {
-    const { elements, current_user, embargo_id } = results;
-    this.setState({
-      selectEmbargoId: embargo_id,
-      elements,
-      currentElement: null,
-      currentUser: current_user
-    });
-  }
-
-  handelUpdateComment(result) {
-    this.setState({ historyInfo: result.history });
-  }
-
-  handelReviewPublish(results) {
-    const his = results.history;
-
-    this.setState({
-      historyInfo: his,
-    });
-
-    PublicActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
-  }
-
-  handleDisplayReviewReaction(result) {
-    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-
-      this.setState({
-        guestPage: 'review',
-        elementType: 'reaction',
-        queryId: result.id,
-        currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
-        reviewLevel: result.element.reviewLevel,
-        isSubmitter: (result.element && result.element.isSubmitter) || false
-      });
-      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
-    }
-  }
-
-  handleDisplayReviewSample(result) {
-    const publication = (result.element && result.element.publication) || {};
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({
-        guestPage: 'review',
-        elementType: 'sample',
-        queryId: result.id,
-        currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
-        isSubmitter: (result.element && result.element.isSubmitter) || false,
-        reviewLevel: result.element && result.element.reviewLevel,
-      });
-      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
-    }
-  }
-
-  handleFetchBundles(result) {
-    const cols = result.repository;
-    const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push({ value: col.id, name: col.label, label: col.label });
-      });
-      this.setState({
-        bundles, current_user, elements: [], currentElement: null
-      });
-    } else {
-      this.setState({
-        bundles: [], current_user, elements: [], currentElement: null
-      });
-    }
-  }
-
-  handleDisplayEmbargoElement(result) {
-    const publication = (result.element && result.element.publication) || {};
-
-    if (result.element && result.element.reviewLevel === 0) {
-      Aviator.navigate('/home/');
-    } else {
-      const elementType = (result.element.sample ? 'sample' : 'reaction');
-      this.setState({
-        guestPage: 'embargo',
-        elementType,
-        queryId: result.id,
-        currentElement: result.element,
-        historyInfo: (publication && publication.review && publication.review.history) || [],
-        reviewLevel: result.element.reviewLevel
-      });
-      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
-    }
-  }
-
-  handleEmbargoRelease(result) {
-    PublicActions.fetchEmbargoBundle();
-  }
-
-  handleEmbargoMove(results) {
-    const { col_id, is_new_embargo, new_embargo, message } = results.result;
-    if (is_new_embargo === true) {
-      this.bundles.push({value: new_embargo.id, name: new_embargo.label, label: new_embargo.label });
-    }
-    alert(message);
-    PublicActions.getEmbargoElements(col_id);
-  }
-}
-
-export default alt.createStore(PublicStore, 'PublicStore')
diff --git a/app/assets/javascripts/components/users/AuthorModal.js b/app/assets/javascripts/components/users/AuthorModal.js
deleted file mode 100644
index 968fdaa1c..000000000
--- a/app/assets/javascripts/components/users/AuthorModal.js
+++ /dev/null
@@ -1,625 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, OverlayTrigger, Tooltip, Modal, Button, Table, Panel, Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
-import { findIndex, filter } from 'lodash';
-import uuid from 'uuid';
-import Select from 'react-select';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import SelectionField from '../common/SelectionField';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
-
-const sortList = data => data.sort((a, b) => a.name.localeCompare(b.name));
-const addUserTooltip = <Tooltip id="addUser_tooltip">Save to my collaboration</Tooltip>;
-const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation</Tooltip>;
-const refreshOrcidTooltip = <Tooltip id="rmAff_tooltip">Refresh affiliations from ORCID</Tooltip>;
-const addAffTooltip = <Tooltip id="addAff_tooltip">Add new affiliation</Tooltip>;
-
-const refreshAffByOrcid = (g, onRefreshOrcidAff) => {
-  let orcidRefreshBtn = '';
-  if (g.type === 'Collaborator' && g.orcid != null) {
-    orcidRefreshBtn = (
-      <OverlayTrigger placement="right" overlay={refreshOrcidTooltip} >
-        <Button
-          bsSize="xsmall"
-          bsStyle="success"
-          onClick={() => onRefreshOrcidAff(g)}
-        >
-          <i className="fa fa-refresh" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-  return (
-    <span>
-      { orcidRefreshBtn }
-    </span>
-  );
-};
-
-const lineAff = (g, aff, onDeleteAff) => {
-  let removeBtn = '';
-  if (g.type === 'Collaborator' && g.orcid == null) {
-    removeBtn = (
-      <OverlayTrigger placement="right" overlay={removeAffTooltip} >
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          onClick={() => onDeleteAff(aff, g)}
-        >
-          <i className="fa fa-times" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  return (
-    <tr key={uuid.v4()}>
-      <td width="30%">{aff.department}</td>
-      <td width="40%">{aff.organization}</td>
-      <td width="20%">{aff.country}</td>
-      <td width="10%">
-        { removeBtn }
-      </td>
-    </tr>
-  );
-};
-
-export default class AuthorModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      countries: [],
-      organizations: [],
-      departments: [],
-      authors: [],
-      users: [],
-      fields: {},
-      showNewUser: false
-    };
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.findUsers = this.findUsers.bind(this);
-    this.findOrcid = this.findOrcid.bind(this);
-    this.handleAddUser = this.handleAddUser.bind(this);
-    this.handleHide = this.handleHide.bind(this);
-    this.onAddAff = this.onAddAff.bind(this);
-    this.onDeleteAff = this.onDeleteAff.bind(this);
-    this.onRefreshOrcidAff = this.onRefreshOrcidAff.bind(this);
-  }
-
-  componentDidMount() {
-    UsersFetcher.fetchMyCollaborations()
-      .then((result) => {
-        if (result.authors && result.authors.length > 0) {
-          this.setState({ authors: sortList(result.authors) });
-        } else {
-          this.setState({
-            authors: [], users: [], fields: {}, showNewUser: false
-          });
-        }
-      });
-    PublicFetcher.affiliations('countries').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ countries: affOption });
-    });
-    PublicFetcher.affiliations('organizations').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ organizations: affOption });
-    });
-    PublicFetcher.affiliations('departments').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ departments: affOption });
-    });
-  }
-
-  onAddAff(g) {
-    const { authors, fields } = this.state;
-    const department = fields[`${g.id}@line_department`];
-    const organization = fields[`${g.id}@line_organization`];
-    const country = fields[`${g.id}@line_country`];
-    const params = {
-      id: g.id, department, organization, country
-    };
-    UsersFetcher.addCollaboratorAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          const idx = findIndex(authors, o => o.id === result.user.id);
-          authors.splice(idx, 1, result.user);
-          fields[`${g.id}@line_department`] = '';
-          fields[`${g.id}@line_organization`] = '';
-          fields[`${g.id}@line_country`] = '';
-          this.setState({ authors, fields });
-        }
-      });
-  }
-
-  onDeleteAff(a, g) {
-    const { authors } = this.state;
-    const params = { user_id: g.id, aff_id: a.id };
-    UsersFetcher.deleteCollaboratorAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          const idx = findIndex(authors, o => o.id === result.user.id);
-          authors.splice(idx, 1, result.user);
-          this.setState({ authors });
-        }
-      });
-  }
-
-  onRefreshOrcidAff(g) {
-    const params = { user_id: g.id };
-    UsersFetcher.refreshOrcidAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.message);
-        } else {
-          this.setState({
-            authors: sortList(result.authors), users: [], fields: {}, showNewUser: false
-          });
-        }
-      });
-  }
-  handleHide() {
-    this.setState({ users: [], fields: {}, showNewUser: false });
-    this.props.onHide();
-  }
-
-  // inputs of create new group
-  handleInputChange(type, ev) {
-    let { fields } = this.state;
-    switch (type) {
-      case 'firstName':
-        fields.firstName = ev.currentTarget.value;
-        break;
-      case 'lastName':
-        fields.lastName = ev.currentTarget.value;
-        break;
-      case 'orcid':
-        fields.orcid = ev.currentTarget.value;
-        break;
-      case 'country':
-        fields.country = ev && ev.value;
-        break;
-      case 'organization':
-        fields.organization = ev && ev.value;
-        break;
-      case 'department':
-        fields.department = ev && ev.value;
-        break;
-      case 'search_key':
-        fields.search_key = ev.currentTarget.value;
-        break;
-      default:
-        if (typeof fields === 'undefined') {
-          fields = {};
-        }
-        fields[type] = ev && ev.value;
-    }
-    this.setState({ fields });
-  }
-
-  findUsers() {
-    const { fields } = this.state;
-    if ((!fields.firstName || fields.firstName.trim() === '') && (!fields.lastName || fields.lastName.trim() === '')
-    && (!fields.orcid || fields.orcid.trim() === '')) {
-      alert('Please input First Name or Last Name');
-      return false;
-    }
-    UsersFetcher.fetchUsersByNameFirst(fields.lastName || '', fields.firstName || '')
-      .then((result) => {
-        if (result.users && result.users.length > 0) {
-          this.setState({
-            users: sortList(result.users),
-            showNewUser: false,
-            fields: {}
-          });
-        } else {
-          this.setState({ showNewUser: true, users: [] });
-        }
-      });
-    return true;
-  }
-
-  findOrcid() {
-    const { fields } = this.state;
-    if (!fields.orcid || fields.orcid.trim() === '') {
-      alert('Please input ORCID');
-      return false;
-    }
-
-    const orcidRegex = /^([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})?(-)?([0-9]{4})$/;
-
-    const isValid = orcidRegex.test(fields.orcid.trim());
-    if (!isValid) {
-      alert('Not a valid ORCID');
-      return false;
-    }
-
-    UsersFetcher.fetchandAddCollaboratorByOrcid(fields.orcid)
-      .then((result) => {
-        if (result.error) {
-          alert(`[${fields.orcid.trim()}] \n ${result.message}`);
-          return false;
-        }
-
-        this.setState({
-          authors: sortList(result.authors), users: [], fields: {}, showNewUser: false
-        });
-      });
-    return true;
-  }
-
-  handleAddUser(u) {
-    const { authors } = this.state;
-    UsersFetcher.AddMyCollaboration({ id: u.id })
-      .then((result) => {
-        authors.push(result.user);
-        this.setState({
-          authors: sortList(authors), users: [], fields: {}, showNewUser: false
-        });
-      });
-  }
-
-  createAdd() {
-    const { fields, authors } = this.state;
-
-    const nilFields = [];
-    if (!fields.firstName || fields.firstName.trim() === '') {
-      nilFields.push('First Name');
-    }
-    if (!fields.lastName || fields.lastName.trim() === '') {
-      nilFields.push('Last Name');
-    }
-    if (!fields.country || fields.country.trim() === '') {
-      nilFields.push('Country');
-    }
-    if (!fields.organization || fields.organization.trim() === '') {
-      nilFields.push('Organization');
-    }
-    if (!fields.department || fields.department.trim() === '') {
-      nilFields.push('Department');
-    }
-    if (nilFields.length > 0) {
-      alert(`Please input ${nilFields.join()}!`);
-      return false;
-    }
-
-    UsersFetcher.createAddMyCollaboration(fields)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          authors.push(result.user);
-          this.setState({
-            authors: sortList(authors), users: [], fields: {}, showNewUser: false
-          });
-        }
-      });
-    return true;
-  }
-
-  handleDeleteCollaborator(c) {
-    const { authors } = this.state;
-    UsersFetcher.deleteCollaboration({ id: c.id })
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          this.setState({
-            authors: filter(authors, o => o.id !== c.id)
-          });
-        }
-      });
-  }
-
-  render() {
-    const { authors, users, showNewUser } = this.state;
-    const modalStyle = { overflowY: 'auto' };
-    const searchTbody = (users || []).map(g => (
-      <tbody key={`tbody_${g.id}`}>
-        <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-          <td>
-            <OverlayTrigger placement="right" overlay={addUserTooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle="warning"
-                onClick={() => this.handleAddUser(g)}
-              >
-                <i className="fa fa-floppy-o" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-            &nbsp;
-          </td>
-          <td>{g.name}</td>
-          <td>{g.orcid}</td>
-          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].department : ''}</td>
-          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].organization : ''}</td>
-          <td>{g.current_affiliations && g.current_affiliations.length > 0 ? g.current_affiliations[0].country : ''}</td>
-        </tr>
-      </tbody>
-    ));
-    let tbody = '';
-    if (Object.keys(authors).length <= 0) {
-      tbody = '';
-    } else {
-      tbody = authors.map(g => (
-        <tbody key={`tbody_${g.id}`}>
-          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-            <td>
-              <DeleteConfirmBtn
-                label={g.name}
-                onClickYes={() => this.handleDeleteCollaborator(g)}
-              />
-              &nbsp;
-            </td>
-            <td>{g.name}</td>
-            <td>{g.orcid} {refreshAffByOrcid(g, this.onRefreshOrcidAff)}</td>
-            <td>
-              <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                <tbody>
-                  {
-                    g.current_affiliations && g.current_affiliations.length > 0 ?
-                      g.current_affiliations.map(a =>
-                      lineAff(g, a, this.onDeleteAff, this.handleInputChange)) : null
-                  }
-                  {
-                    g.type === 'Collaborator' && g.orcid == null ?
-                      (
-                        <tr>
-                          <td width="30%">
-                            <SelectionField
-                              options={this.state.departments}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_department`]) || ''}
-                              field={`${g.id}@line_department`}
-                              placeholder="e.g. Institute of Organic Chemistry"
-                              onChange={this.handleInputChange}
-                              isCreatable
-                            />
-                          </td>
-                          <td width="40%">
-                            <SelectionField
-                              options={this.state.organizations}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_organization`]) || ''}
-                              field={`${g.id}@line_organization`}
-                              placeholder="e.g. Karlsruhe Institute of Technology"
-                              onChange={this.handleInputChange}
-                              isCreatable
-                            />
-                          </td>
-                          <td width="20%">
-                            <SelectionField
-                              options={this.state.countries}
-                              value={(this.state.fields && this.state.fields[`${g.id}@line_country`]) || ''}
-                              field={`${g.id}@line_country`}
-                              placeholder="e.g. Germany"
-                              onChange={this.handleInputChange}
-                            />
-                          </td>
-                          <td width="10%">
-                            <OverlayTrigger placement="right" overlay={addAffTooltip} >
-                              <Button
-                                bsSize="xsmall"
-                                bsStyle="success"
-                                onClick={() => this.onAddAff(g)}
-                              >
-                                <i className="fa fa-plus" aria-hidden="true" />
-                              </Button>
-                            </OverlayTrigger>
-                          </td>
-                        </tr>
-                      ) : null
-                  }
-                </tbody>
-              </Table>
-            </td>
-          </tr>
-        </tbody>
-      ));
-    }
-
-    let newAff = '';
-    if (showNewUser === true) {
-      newAff = (
-        <Form>
-          <FormGroup controlId="formInlineCountry">
-            <InputGroup>
-              <InputGroup.Addon>Country</InputGroup.Addon>
-              <Select.Creatable
-                name={`select-${uuid.v4()}`}
-                options={this.state.countries}
-                placeholder="e.g. Germany"
-                multi={false}
-                isClearable
-                value={this.state.fields.country || ''}
-                onChange={event => this.handleInputChange('country', event)}
-                promptTextCreator={p => `Create new country; ${p} `}
-              />
-            </InputGroup>
-          </FormGroup>
-          <FormGroup controlId="formInlineOrganization">
-            <InputGroup>
-              <InputGroup.Addon>Organization</InputGroup.Addon>
-              <Select.Creatable
-                name={`select-${uuid.v4()}`}
-                options={this.state.organizations}
-                placeholder="e.g. Karlsruhe Institute of Technology"
-                multi={false}
-                isClearable
-                value={this.state.fields.organization || ''}
-                onChange={event => this.handleInputChange('organization', event)}
-                promptTextCreator={p => `Create new organization; ${p} `}
-              />
-            </InputGroup>
-          </FormGroup>
-          <FormGroup controlId="formInlineOrganization">
-            <InputGroup>
-              <InputGroup.Addon>Department</InputGroup.Addon>
-              <Select.Creatable
-                name={`select-${uuid.v4()}`}
-                options={this.state.departments}
-                placeholder="e.g. Institute of Organic Chemistry"
-                multi={false}
-                isClearable
-                value={this.state.fields.department || ''}
-                onChange={event => this.handleInputChange('department', event)}
-                promptTextCreator={p => `Create new department; ${p} `}
-              />
-            </InputGroup>
-          </FormGroup>
-          <Button bsSize="small" bsStyle="warning" onClick={() => this.createAdd()}>
-            <i className="fa fa-file" aria-hidden="true" />&nbsp;
-            Create and Save to my collaboration
-          </Button>
-        </Form>
-      );
-    }
-
-    const newUserPanel = (
-      <Panel bsStyle="success">
-        <Panel.Heading>
-          <Panel.Title>
-            Add new collaborator (by ORCID or By Name)
-          </Panel.Title>
-        </Panel.Heading>
-        <Panel.Body>
-          <Row>
-            <Col md={8}>
-              <FormGroup controlId="formInlineLastName">
-                <InputGroup>
-                  <InputGroup.Addon>ORCID</InputGroup.Addon>
-                  <FormControl
-                    type="text"
-                    placeholder="0000-0002-1234-5678"
-                    value={this.state.fields.orcid || ''}
-                    onChange={e => this.handleInputChange('orcid', e)}
-                  />
-                  <InputGroup.Button>
-                    <Button bsStyle="success" onClick={() => this.findOrcid()}><i className="fa fa-search" aria-hidden="true" />&nbsp;Find and save to collaboration by ORCID</Button>
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </Col>
-          </Row>
-          <Row>
-            <Col md={8}>
-              <Form>
-                <FormGroup controlId="formInlineFirstName">
-                  <InputGroup>
-                    <InputGroup.Addon>First Name</InputGroup.Addon>
-                    <FormControl
-                      type="text"
-                      placeholder="eg: AK"
-                      value={this.state.fields.firstName || ''}
-                      onChange={e => this.handleInputChange('firstName', e)}
-                    />
-                    <InputGroup.Addon>Last Name</InputGroup.Addon>
-                    <FormControl
-                      type="text"
-                      placeholder="J. Moriarty"
-                      value={this.state.fields.lastName || ''}
-                      onChange={e => this.handleInputChange('lastName', e)}
-                    />
-                    <InputGroup.Button>
-                      <Button bsStyle="success" onClick={() => this.findUsers()}>
-                        <i className="fa fa-search" aria-hidden="true" />&nbsp;
-                        Find by Name
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-              </Form>
-            </Col>
-          </Row>
-          <Row>
-            <Col md={8}>
-              {newAff}
-            </Col>
-          </Row>
-        </Panel.Body>
-      </Panel>
-    );
-
-    return (
-      <Modal
-        show={this.props.show}
-        dialogClassName="importChemDrawModal"
-        onHide={this.handleHide}
-        backdrop="static"
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>My Collaboration</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={modalStyle}>
-          <div>
-            { newUserPanel }
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Search Result
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="10%">Action</th>
-                      <th width="10%">Name</th>
-                      <th width="10%">ORCID</th>
-                      <th width="20%">Department</th>
-                      <th width="25%">Organization</th>
-                      <th width="15%">Country</th>
-                    </tr>
-                  </thead>
-                  { searchTbody }
-                </Table>
-              </Panel.Body>
-            </Panel>
-            <Panel bsStyle="info">
-              <Panel.Heading>
-                <Panel.Title>
-                  My Collaboration
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="5%">Action</th>
-                      <th width="10%">Name</th>
-                      <th width="15%">ORCID</th>
-                      <th width="70%">
-                        <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                          <tbody>
-                            <tr>
-                              <td style={{ padding: 'unset' }} width="30%">Department</td>
-                              <td style={{ padding: 'unset' }} width="40%">Organization</td>
-                              <td style={{ padding: 'unset' }} width="20%">Country</td>
-                              <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
-                            </tr>
-                          </tbody>
-                        </Table>
-                      </th>
-                    </tr>
-                  </thead>
-                  { tbody }
-                </Table>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-AuthorModal.propTypes = {
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js b/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
deleted file mode 100644
index 759167573..000000000
--- a/app/assets/javascripts/components/utils/defaultAnalysisPublish.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { isNmrPass, isDatasetPass } from '../../libHome/RepoCommon';
-
-const applyPublish = (el) => {
-  const ext = [];
-  el.analysisArray().forEach((ana) => {
-    const a = ana;
-    if (ana.extended_metadata &&
-      (((ana.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((ana.extended_metadata.status || '') === 'Confirmed') && // && // fail if status is not set to Confirmed
-        (isNmrPass(ana, el)) && // fail if NMR check fail
-        (isDatasetPass(ana))
-      )) {
-      if (typeof ana.extended_metadata.publish === 'undefined') {
-        a.extended_metadata.publish = true;
-      }
-    }
-    ext.push(a);
-  });
-  return ext;
-};
-
-const defaultAnalysisPublish = (el) => {
-  const element = el;
-  switch (el.type) {
-    case 'sample': {
-      const ext = applyPublish(element);
-      if (ext.length > 0) {
-        const analyses = element.container.children.find(c => (c && c.container_type === 'analyses'));
-        analyses.children = ext;
-      }
-      break;
-    }
-    case 'reaction': {
-      // reset analysis.publish of products
-      if (typeof el.products !== 'undefined' && el.products.length > 0) {
-        element.products.forEach((p) => {
-          const prodAna = applyPublish(p);
-          if (prodAna.length > 0) {
-            const analyses = p.container.children.find(c => (c && c.container_type === 'analyses'));
-            analyses.children = prodAna;
-          }
-        });
-      }
-      break;
-    }
-    default:
-      break;
-  }
-  return element;
-};
-
-export default defaultAnalysisPublish;
diff --git a/app/assets/javascripts/components/utils/helpDescs.js b/app/assets/javascripts/components/utils/helpDescs.js
deleted file mode 100644
index 9b0dbddaa..000000000
--- a/app/assets/javascripts/components/utils/helpDescs.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-
-const REQUIRED_TIP = (
-  <span>This field is required for publication</span>
-);
-
-const CONTRIBUTOR_TIP = (
-  <span>
-    Contributions to the database can be made by anyone. The contributor should give an information
-    on the original publication if the reaction was retrieved or extracted from a foreign work.
-  </span>
-);
-
-const SCHEME_TIP = (
-  <ul className="tooltip_list">
-    <li>
-      Add the correct chemical name of the used or obtained compounds if the name is not
-      generated automatically
-    </li>
-    <li>
-      If you use a reagent in solution, add this information to the sample: click on
-      the name of the reagent -&gt; add information (solvent, molarity etc.) in the panel for
-      the sample -&gt; save changes
-    </li>
-    <li>
-      In the same way you can also add information on the density of used reagents or the obtained
-      melting point/boiling point of your products
-    </li>
-  </ul>
-);
-
-const DESCRIPTION_TIP = (
-  <span className="tooltip_list_paragraph">
-    <ul>
-      <li>
-        Add here a complete description for the given reaction in a clear and structured
-        way with all relevant information that helps other scientists to reproduce the experiment
-      </li>
-      <li>
-        Define all details as well as possible, e.g. avoid expressions such as
-        &quot;room temperature&quot; or &quot;over night/over the weekend&quot; rather
-        give the correct temperature and time
-      </li>
-      <li>
-        The description should contain the full names and amount of all chemicals that
-        were used or obtained, please don&apos;t give general descriptions
-      </li>
-      <li>
-        Check the consistency of the given amounts and values with the reaction table again
-      </li>
-      <li>
-        The description field contains information on the reaction itself including the workup but
-        without the measures to purify the compounds by chromatography or other methods.
-        as such information should be placed in &quot;additional information for publication and
-        purification details&quot;
-      </li>
-      <li>
-        If you describe a reaction that refers to two steps (e.g. intermediate was not purified and
-        used directly for the next step) then add information on the obtained intermediate
-        (chemical name, if possible obtained amount of the crude product)
-      </li>
-    </ul>
-    <p>
-       Hint: the information on the name and amount of the chemicals can be added to a defined
-       position in the text by click on the blue button labelled with &quot;A,B, ... P1, P2&quot;
-    </p>
-  </span>
-);
-
-const ADDITIONAL_INFO_TIP = (
-  <ul className="tooltip_list">
-    <li>
-      Add here the information on the purification of your crude product(s) including the
-      information on the obtained product(s) (name, amount, yield, color, physical condition)
-    </li>
-    <li>Add the type of purification and all necessary details to reproduce the process</li>
-    <li>
-      The Rf-value of the product(s) can be entered on the &quot;properties&quot; page
-    </li>
-  </ul>
-);
-
-const helpDescs = Object.freeze({
-  requiredField: REQUIRED_TIP,
-  contributor: CONTRIBUTOR_TIP,
-  description: DESCRIPTION_TIP,
-  scheme: SCHEME_TIP,
-  additionalInformation: ADDITIONAL_INFO_TIP
-});
-
-export default helpDescs;
diff --git a/app/assets/javascripts/libHome/ContainerComponent.js b/app/assets/javascripts/libHome/ContainerComponent.js
deleted file mode 100644
index 0c19871fd..000000000
--- a/app/assets/javascripts/libHome/ContainerComponent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, {Component} from 'react';
-import {Col, FormControl,FormGroup, ControlLabel} from 'react-bootstrap';
-import Select from 'react-select'
-import ContainerDatasets from '../components/ContainerDatasets';
-import QuillViewer from '../components/QuillViewer'
-
-import {sampleAnalysesContentSymbol} from '../components/utils/quillToolbarSymbol'
-import {confirmOptions} from '../components/staticDropdownOptions/options';
-
-export default class ContainerComponent extends Component {
-  constructor(props) {
-    super();
-    const {container} = props;
-    this.state = {
-      container
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    });
-  }
-
-
-
-  render() {
-    const {container} = this.state;
-
-    let quill = (
-        <QuillViewer value={container.extended_metadata['content']} />
-      )
-
-
-    return (
-      <div className="small-p">
-        {/* <Col md={4}>
-          <label>Name</label>
-          <FormControl
-            type="text"
-            label="Name"
-            value={container.name || '***'}
-            disabled/>
-        </Col>
-        <Col md={4}>
-          <div style={{marginBottom: 11}}>
-            <label>Type</label>
-            <Select
-              name='kind'
-              multi={false}
-              options={kindOptions}
-              value={container.extended_metadata['kind']}
-              disabled
-
-              />
-          </div>
-        </Col>
-        <Col md={4}>
-          <div style={{marginBottom: 11}}>
-            <label>Status</label>
-            <Select
-              name='status'
-              multi={false}
-              options={confirmOptions}
-              value={container.extended_metadata['status']}
-              disabled
-
-            />
-          </div>
-        </Col> */}
-        {/* <Col md={12}>
-        <FormGroup>
-          <ControlLabel>Content</ControlLabel>
-          {quill}
-        </FormGroup>
-          <FormGroup>
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              label="Description"
-              value={container.description || ''}
-              disabled
-              />
-          </FormGroup>
-        </Col> */}
-        <Col md={12}>
-          <label>Datasets</label>
-          <ContainerDatasets
-            container={container}
-            readOnly
-            disabled
-            onChange={container => this.props.onChange(container)}
-            />
-        </Col>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/NavFooter.js b/app/assets/javascripts/libHome/NavFooter.js
deleted file mode 100644
index a1e4c8073..000000000
--- a/app/assets/javascripts/libHome/NavFooter.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Nav, NavItem } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-
-const NavFooter = () => {
-  return (
-    <Nav justified>
-      <NavItem eventKey="21" role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')}>
-        Home
-      </NavItem>
-      <NavItem eventKey="22" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/publications')}>
-        Publications
-      </NavItem>
-      <NavItem eventKey="23" title="Item" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/about')} >
-        About
-      </NavItem>
-      <NavItem eventKey="24" role="button" tabIndex={-1} onClick={() => Aviator.navigate('/home/directive')} >
-        Terms of service
-      </NavItem>
-    </Nav>
-  );
-};
-
-export default NavFooter;
diff --git a/app/assets/javascripts/libHome/Navigation.js b/app/assets/javascripts/libHome/Navigation.js
deleted file mode 100644
index 09fbcc1bf..000000000
--- a/app/assets/javascripts/libHome/Navigation.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from 'react';
-import { Nav, Navbar, NavItem, Label } from 'react-bootstrap';
-import UserAuth from '../components/UserAuth';
-import ManagingActions from '../components/managing_actions/ManagingActions';
-import ContextActions from '../components/contextActions/ContextActions';
-import UserStore from '../components/stores/UserStore';
-import UIStore from '../components/stores/UIStore';
-import UserActions from '../components/actions/UserActions';
-import UIActions from '../components/actions/UIActions';
-import ElementActions from '../components/actions/ElementActions';
-import NavNewSession from './NavNewSession';
-import NavHead from './NavHead';
-import DocumentHelper from '../components/utils/DocumentHelper';
-import NavigationModal from '../components/NavigationModal';
-import PublicActions from '../components/actions/PublicActions';
-
-export default class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: null,
-      modalProps: {
-        show: false,
-        title: '',
-        component: '',
-        action: null,
-        listSharedCollections: false,
-      }
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onUIChange = this.onUIChange.bind(this);
-    // this.toggleCollectionTree = this.toggleCollectionTree.bind(this)
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIChange);
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIChange);
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
-  }
-
-  onUIChange(state) {
-    this.setState({
-      modalProps: state.modalParams,
-    });
-  }
-
-  // toggleCollectionTree() {
-  //   this.props.toggleCollectionTree();
-  // }
-
-  token() { return DocumentHelper.getMetaContent("csrf-token") }
-
-  updateModalProps(modalProps) { this.setState({ modalProps }); }
-
-  navHeader() {
-    return (
-      <Navbar.Header className="collec-tree">
-        <Navbar.Text style={{cursor: "pointer"}}>
-          {/* <i  className="fa fa-list" style={{fontStyle: "normal"}}
-              onClick={this.toggleCollectionTree} /> */}
-        </Navbar.Text>
-        <Navbar.Text />
-        <NavHead />
-      </Navbar.Header>
-    )
-  }
-
-  render() {
-    const { modalProps, currentUser } = this.state;
-
-    let userBar = (<span />);
-    if (currentUser) {
-      userBar = (<UserAuth />);
-    } else {
-      userBar = (<NavNewSession authenticityToken={this.token()} />);
-    }
-    // const logo = <img height={50} alt="Chemotion-Repository" src="/images/repo/chemotion_full.svg"/>
-    return (
-      <Navbar fluid className="navbar-custom">
-        <Navbar.Header>
-          <Navbar.Brand>
-            <a role="button" tabIndex={0} onClick={() => Aviator.navigate('/home')} >
-              Chemotion-Repository</a>
-          </Navbar.Brand>
-          <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-          {userBar}
-          <Nav>
-            {currentUser ?
-              <NavItem eventKey={1} href="/mydb" className="white-nav-item">
-                My DB
-              </NavItem>
-              : null }
-            <NavItem eventKey={2} onClick={() => Aviator.navigate('/home/publications')} className="white-nav-item" >
-              Publications
-            </NavItem>
-            { currentUser ?
-              <NavItem eventKey={3} onClick={() => Aviator.navigate('/home/review')} className="white-nav-item" >
-                Review
-              </NavItem> : null
-            }
-            {currentUser ?
-              <NavItem eventKey={6} onClick={() => Aviator.navigate('/home/embargo')} className="white-nav-item" >
-                Embargoed Publications
-              </NavItem> : null
-            }
-            {
-              true ?
-                <NavItem eventKey={4} onClick={() => Aviator.navigate('/home/newsroom')} className="white-nav-item">
-                  Newsroom&nbsp;<i className="fa fa-bullhorn" aria-hidden="true" />
-                </NavItem> : null
-            }
-            {
-              true ?
-                <NavItem eventKey={5} onClick={() => Aviator.navigate('/home/howto')} className="white-nav-item">
-                  How-To&nbsp;<i className="fa fa-question-circle" aria-hidden="true" />
-                </NavItem> : null
-            }
-          </Nav>
-        </Navbar.Collapse>
-      </Navbar>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoAbout.js b/app/assets/javascripts/libHome/RepoAbout.js
deleted file mode 100644
index 056e1a8b3..000000000
--- a/app/assets/javascripts/libHome/RepoAbout.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-
-const RepoAbout = () => {
-  const bodyStyle = {
-    maxHeight: 'calc(100vh - 262px)',
-    overflowY: 'auto',
-    backgroundColor: '#f5f5f5',
-    borderRadius: '6px',
-    padding: '30px',
-    textAlign: 'center'
-  };
-
-  return (
-    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-      <Col md={3} />
-      <Col md={6}>
-        <Panel style={{ border: 'none' }}>
-          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
-            <CardIcons />
-          </Panel.Heading>
-          <Panel.Body style={bodyStyle}>
-            <CardAbout />
-          </Panel.Body>
-        </Panel>
-      </Col>
-      <Col md={3} />
-    </Row>
-  );
-};
-
-const CardIcons = () =>
-  (
-    <div className="card-icons">
-      <Col md={4}>
-        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/chemotion_full.svg" alt="" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/dfg_logo.png" alt="" />
-      </Col>
-    </div>
-  );
-
-const CardAbout = () =>
-  (
-    <div>
-      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
-      <br />
-      <h1>Brief project description</h1>
-      <div style={{ textAlign: 'justify' }}>
-        <p>This project aims for the development of a freely available
-          infrastructure for research data management through the development
-          of two independent IT systems namely an electronic laboratory notebook
-          (ELN) and a chemistry web repository. With the tools that will be
-          established by our project group it will be possible to integrate
-          modern web-techniques into the routine work of academic researchers,
-           thereby increasing the amount of available data and improving the
-           quality of the information obtained and published.
-        </p>
-        <p>The aim of this project is to make a substantial contribution to
-          securing research results in a cost-effective and simple manner,
-          and to optimally network in particular chemists (initially with each
-            other and in a second step with other disciplines). The new model
-             provides a combination of recording and documentation as well as
-             publication and storage of data sets.
-        </p>
-        <p>The necessary IT structures for modern documentation of
-          research data are developed within the scope of this project,
-          will be summarized in an electronic laboratory notebook (ELN) and will
-           be provided and distributed as OPEN SOURCE. The ELN will be completed
-           by the establishment and hosting of the web-repository, for which a
-           direct connection to the ELN enables a fast and easy transfer of
-           selected research information.
-        </p>
-        <p>Free access and free use by academic researchers is
-          one principle of this project allowing and promoting collaborative
-          work and scientific exchange among scientists.
-        </p>
-      </div>
-      <br />
-      <h3>Imprint</h3>
-      <h4>Karlsruhe Institute of Technology</h4>
-      <h4>Leader of the research group</h4>
-      <p>Prof. Stefan Bräse </p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
-      <p>76131 Karlsruhe </p>
-      <p>Germany</p>
-      <br />
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
-      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
-      <p>76344 Eggenstein-Leopoldshafen</p>
-      <p>Phone: +49 721 608 42903</p>
-      <p>Fax: +49 721 608 48581</p>
-      <br />
-      <p />
-      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
-      <br />
-      <h4>Office Campus North (KIT)</h4>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
-      <p>Hermann-von-Helmholtz-Platz 1</p>
-      <p>76344 Eggenstein-Leopoldshafen </p>
-      <p>Germany</p>
-      <p>Phone: +49 721 608 24697 </p>
-      <br />
-      <h4>Authors</h4>
-      <p>Prof. Stefan Braese</p>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <br />
-      <h3>Copyright Notices</h3>
-      <div style={{ textAlign: 'justify' }}>
-        <p>
-          During the submission process, the submitter of a publication can choose,
-          between several CC licenses, which license to apply to the submitted work.
-          As the result, the content of this repository database
-          (including the submitted publication files) can be partly licensed under:
-        </p>
-        <ul>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">
-              <img src="/images/creative_common/cc-by-sa.svg" alt="cc-by-sa-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution-ShareAlike 4.0 International License (default),
-          </li>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
-              <img src="/images/creative_common/cc-by.svg" alt="cc-by-4" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Attribution 4.0 International License, and
-          </li>
-          <li>
-            <a rel="license noreferrer noopener" target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">
-              <img src="/images/creative_common/cc-zero.svg" alt="cc-zero" style={{ borderWidth: 0, height: '31px', width: '88px' }} />
-            </a> Creative Commons Universal License
-          </li>
-        </ul>
-        <p>
-          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
-          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
-        </p>
-        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
-        <br />
-      </div>
-
-      <h3>Content</h3>
-      <div style={{ textAlign: 'justify' }} >
-        <p>
-          All texts, pictures and other information published here are subject to
-          copyright. The logo may not be used without the prior consent
-          of the working group.
-          A change of the logo is not permitted. The contents of our website are
-          created with the utmost care. Nevertheless, no guarantee for topicality
-          and completeness can be taken over. The Compound Platform does not
-          assume any responsibility for any web content connected by a link,
-          as this is not its own content.
-        </p>
-      </div>
-    </div>
-  );
-
-export default RepoAbout;
diff --git a/app/assets/javascripts/libHome/RepoCommon.js b/app/assets/javascripts/libHome/RepoCommon.js
deleted file mode 100644
index 7f4cfaea8..000000000
--- a/app/assets/javascripts/libHome/RepoCommon.js
+++ /dev/null
@@ -1,2347 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { replace } from 'lodash';
-import {
-  Button,
-  Checkbox,
-  Col,
-  ControlLabel,
-  Form,
-  FormControl,
-  FormGroup,
-  Grid,
-  InputGroup,
-  Label,
-  OverlayTrigger,
-  Panel,
-  Row,
-  Table,
-  Tooltip
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Clipboard from 'clipboard';
-import moment from 'moment';
-import Select from 'react-select';
-import uuid from 'uuid';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-import ContainerComponent from './ContainerComponent';
-import Formula from '../components/common/Formula';
-import HelpInfo from '../components/common/HelpInfo';
-import PubchemLabels from '../components/PubchemLabels';
-import QuillViewer from '../components/QuillViewer';
-import { ChemotionTag } from '../components/PublishCommon';
-import Sample from '../components/models/Sample';
-import Reaction from '../components/models/Reaction';
-import PrintCodeButton from '../components/common/PrintCodeButton';
-import { stopBubble } from '../components/utils/DomHelper';
-import RepoContainerDatasets from './RepoContainerDatasets';
-import ImageModal from '../components/common/ImageModal';
-import Utils from '../components/utils/Functions';
-import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from '../components/utils/ElementUtils';
-import { contentToText } from '../components/utils/quillFormat';
-import { chmoConversions } from '../components/OlsComponent';
-import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
-import InputButtonField from '../components/common/InputButtonField';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import PublicActions from '../components/actions/PublicActions';
-import RepoCommentBtn from '../components/common/RepoCommentBtn';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
-import { previewContainerImage } from '../components/utils/imageHelper';
-import RepoXvialButton from '../components/common/RepoXvialButton';
-import RepoPreviewImage from '../components/common/RepoPreviewImage';
-
-const CollectionDesc = (props) => {
-  let { label } = props;
-  if (typeof label !== 'string') return null;
-  if (label.match(/Reviewing/)) {
-    label = 'Reviewing';
-  } else if (label.match(/Element To Review/)) {
-    label = 'Element To Review';
-  } else if (label.match(/Reviewed/)) {
-    label = 'Reviewed';
-  }
-  const descs = {
-    Chemotion: 'Collection of all the samples and reactions, with analytical datasets, published on the Chemotion-Repository.',
-    'Scheme-only reactions': 'Collections of published scheme-only reactions (no associated analytical data).',
-    'My Published Elements': 'Collection of the published samples and reactions you submitted. The samples/reactions that were embargoed are placed in sub-folders.',
-    'Pending Publications': 'Collection of the samples and reactions you have submitted and are currently being reviewed.',
-    Reviewing: 'Collection of the samples and reactions that have been reviewed by a reviewer and needs revision from your side.',
-    'Element To Review': 'Collection of the samples and reactions that currently have to be reviewed.',
-    Reviewed: 'Collection of the samples and reactions that were reviewed and sent back to the submitters for revision/corrections (Read-Only). Waiting for resubmission.',
-    'Embargoed Publications': 'Collection under an embargo: the collection can only be released and its elements made public after all its elements have been accepted by a reviewer.'
-  };
-  const desc = descs[label];
-  if (desc === undefined) return null;
-  return (
-    <div style={{ float: 'right' }}>
-      <OverlayTrigger placement="right" overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
-        <i className="fa fa-info-circle" />
-      </OverlayTrigger>
-    </div>
-  );
-};
-
-const resizableSvg = path => (
-  <div className="preview-table" style={{ cursor: 'row-resize' }}><SvgFileZoomPan svgPath={path} duration={300} resize /></div>
-);
-
-const ChemotionId = props => (
-  <h5>
-    <b>ID: </b>
-    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
-      {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
-    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
-  </h5>
-);
-ChemotionId.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
-};
-
-const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
-
-
-const AuthorTitle = (authorIds) => {
-  if (authorIds && authorIds.length > 1) {
-    return 'Authors:';
-  }
-  if (authorIds && authorIds.length === 1) {
-    return 'Author:';
-  }
-  return '';
-}
-
-const NewsroomTemplate = {
-  title: '', content: {}, article: []
-};
-
-const HomeFeature = (props) => {
-  return (
-    <div className="feature-block">
-      <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
-      <p>
-        {props.intro}
-      </p>
-    </div>
-  );
-};
-
-HomeFeature.propTypes = {
-  fa: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  intro: PropTypes.string.isRequired
-};
-
-const LicenseLegalCode = (cp) => {
-  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-  switch (cp) {
-    case 'CC BY-SA':
-      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-      break;
-    case 'CC BY':
-      presentLicense = 'Creative Commons Attribution 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
-      break;
-    case 'CC0':
-      presentLicense = 'CC0 1.0 Universal';
-      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
-      break;
-    case 'No License':
-      presentLicense = 'No License';
-      presentHref = '';
-      break;
-    default:
-      break;
-  }
-  return <span><b>{presentLicense}</b>&nbsp;{presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a>}</span>;
-};
-
-const nmrMsg = (sample, container) => {
-  if (sample.molecule && container.extended_metadata &&
-    (typeof container.extended_metadata.kind === 'undefined' ||
-      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
-    )) {
-    return '';
-  }
-  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
-
-  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
-    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
-  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
-    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
-  }
-  return '';
-};
-
-// the requirements for file types as given
-const isFileTypePass = (analysisType, attachments) => {
-  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
-  const nmrType = ['jcamp', 'dx', 'jdx'];
-  let files = [];
-  switch (analysisType) {
-    case '1H NMR':
-    case chmoConversions.nmr_1h.termId:
-    case '13C NMR':
-    case chmoConversions.nmr_13c.termId:
-    case '15N NMR':
-    case 'NMR':
-    case 'IR':
-    case chmoConversions.ir.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    case 'EA':
-    case chmoConversions.ea.termId:
-    case 'X-Ray':
-    case 'Crystall-Structure':
-    case chmoConversions.crystal_structure.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    default:
-      break;
-  }
-  return true;
-};
-
-// at least one dataset has to be attached
-// in dataset: instrument has to be given
-const isDatasetPass = (analysis) => {
-  const dataset = analysis.children;
-  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
-  if (attachments.length < 1) return false;
-  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
-  if (instruments.length < 1) return false;
-  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
-  if (files.length < 1) return false;
-  return true;
-};
-
-const isNmrPass = (analysis, sample) => {
-  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
-  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
-    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
-    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  }
-  return true;
-};
-
-const DownloadMetadataBtn = (l) => {
-  const contentUrl = `/api/v1/public/metadata/download?type=${l.type}&id=${l.id}`;
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        onClick={() => Utils.downloadFile({
-          contents: contentUrl
-        })}
-      >
-        <i className="fa fa-file-code-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const DownloadDOICsv = (e, a) => {
-  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
-  const dois = [];
-  dois.push(['Reserved DOIs', '']);
-  dois.push(['', '']);
-
-  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
-  a.forEach((an) => {
-    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-  });
-
-  if (e.type === 'reaction') {
-    // product(sample)
-    if (e.products !== null && e.products.length > 0) {
-      e.products.forEach((p) => {
-        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
-        p.analysisArray().forEach((an) => {
-          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-        });
-      });
-    }
-  }
-  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
-};
-
-class EmbargoCom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShow: false
-    };
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  handleEmbargoChange(e) {
-    this.props.onEmbargoChange(e.value);
-  }
-
-  handleLicenseChange(e) {
-    this.props.onLicenseChange(e.value);
-  }
-
-  handleCC0ConsentChange(e, type) {
-    this.props.onCC0ConsentChange(e.target.checked, type);
-  }
-
-  render() {
-    const defaultBundles = [
-      { value: '-1', name: 'no', label: 'No embargo' },
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-    const licenses = [
-      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
-      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
-      { name: 'CC0', value: 'CC0', label: 'CC0' },
-      { name: 'No License', value: 'No License', label: 'No License' }
-    ];
-
-    const bundles = defaultBundles.concat(this.props.opts);
-    const description = [
-      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
-      'Please use one bundle for data that belongs to the same publication.',
-      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
-    ].join(' ');
-    const { isShow } = this.state;
-    const embargoDesc = isShow ? (
-      <div style={{
-        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
-      }}
-      >
-        <b>Embargo Bundle</b>&#58;&nbsp;{description}
-      </div>
-    ) : (null);
-
-    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
-    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
-    const deed = (
-      <div style={{
-        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
-      }}
-      >
-        {LicenseLegalCode(this.props.selectedLicense)}
-        {
-        this.props.selectedLicense === 'CC0' ?
-          (
-            <div stye={{ width: '100%' }}>
-              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
-                {cc0Consent1}
-              </Checkbox>
-              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
-                {cc0Consent2}
-              </Checkbox>
-            </div>
-          )
-          :
-          (null)
-      }
-      </div>
-    );
-
-    return (
-      <div>
-        <Form horizontal style={{ display: 'flex' }}>
-          <div style={{ width: '20%', textAlign: 'right' }}>
-            <ControlLabel>Choose license&nbsp;</ControlLabel>
-          </div>
-          <div style={{ width: '20%' }}>
-            <Select
-              value={this.props.selectedLicense}
-              onChange={e => this.handleLicenseChange(e)}
-              options={licenses}
-              className="select-assign-collection"
-            />
-          </div>
-          <div style={{ width: '40%', textAlign: 'right' }}>
-            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
-            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
-              <i className="fa fa-question-circle" aria-hidden="true" />
-            </div>&nbsp;
-          </div>
-          <div style={{ width: '40%' }}>
-            <Select
-              value={this.props.selectedValue}
-              onChange={e => this.handleEmbargoChange(e)}
-              options={bundles}
-              className="select-assign-collection"
-            />
-          </div>
-        </Form>
-        {embargoDesc}
-        {deed}
-      </div >
-    );
-  }
-}
-
-EmbargoCom.propTypes = {
-  opts: PropTypes.array,
-  selectedValue: PropTypes.string.isRequired,
-  onEmbargoChange: PropTypes.func.isRequired,
-  selectedLicense: PropTypes.string,
-  onLicenseChange: PropTypes.func.isRequired,
-  onCC0ConsentChange: PropTypes.func.isRequired,
-  cc0Deed: PropTypes.shape({
-    consent1: PropTypes.bool.isRequired,
-    consent2: PropTypes.bool.isRequired
-  })
-};
-
-EmbargoCom.defaultProps = {
-  opts: [],
-  selectedLicense: 'CC BY-SA',
-  cc0Deed: { consent1: false, consent2: false }
-};
-
-const PublishTypeAs = (props) => {
-  return (
-    <div style={{ display: 'inline' }}>
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
-        <i className="fa fa-question-circle" aria-hidden="true" />
-      </OverlayTrigger>&nbsp;
-      <DropdownButtonSelection
-        options={props.options}
-        selected={props.selected}
-        placeholder="Select publication type..."
-        onSelect={e => props.onChange(e)}
-      />
-    </div>
-  );
-};
-
-PublishTypeAs.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string),
-  selected: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-};
-
-PublishTypeAs.defaultProps = {
-  options: [],
-  selected: 'full',
-};
-
-
-const ElStateLabel = (state) => {
-  let stateStyle;
-  switch (state) {
-    case 'reviewed':
-      stateStyle = 'info';
-      break;
-    case 'pending':
-      stateStyle = 'warning';
-      break;
-    case 'accepted':
-      stateStyle = 'success';
-      break;
-    default:
-      stateStyle = 'default';
-  }
-  return <Label bsStyle={stateStyle}>{state}</Label>;
-};
-
-
-const MoveEmbargoedBundle = (element, onMoveClick) => {
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
-      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
-    </OverlayTrigger>
-  );
-};
-
-const ElSubmitTime = (submitAt) => {
-  const time = new Date(submitAt);
-  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
-};
-
-const SvgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-const ElAspect = (e, onClick, user = null, currentElement = null, onMoveClick) => {
-  if (!e) {
-    return '';
-  }
-  let listClass;
-  if (e.type === 'Reaction') {
-    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  } else {
-    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  }
-  const schemeOnly = (e && e.scheme_only === true) || false;
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => onClick(e.type.toLowerCase(), e.id)}
-    >
-      <td style={{ position: 'relative' }} >
-        <span className="review_element_label">
-          <i className={`icon-${e.type.toLowerCase()}`} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
-        &nbsp;{user !== null && user.type === 'Anonymous' ? '' : MoveEmbargoedBundle(e, onMoveClick)}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const SampleExactMW = (em) => {
-  if (em) {
-    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
-  }
-  return '';
-};
-
-const DateFormatYMDLong = (params) => {
-  const dateTime = new Date(params);
-  const options = {
-    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
-  };
-  return dateTime.toLocaleDateString('en-GB', options);
-};
-
-const DateFormatDMYTime = (dt) => {
-  if (dt == null || typeof dt === 'undefined') return '';
-  try {
-    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
-    if (m.isValid()) {
-      return dt;
-    }
-    const dtJSON = new Date(dt).toJSON();
-    const dtISO = new Date(Date.parse(dt)).toISOString();
-    if (dtISO === dtJSON) {
-      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
-    }
-    return '';
-  } catch (e) {
-    return '';
-  }
-};
-
-const EditorTips = () => {
-  return (
-    <ol>
-      {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
-      <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
-      <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
-      <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
-    </ol>
-  );
-};
-
-const BackSoonPage = () => {
-  return (
-    <div>
-      <h1>We&rsquo;ll be back soon!</h1>
-      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
-      <h3>
-        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
-      </h3>
-      <h3>
-        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
-      </h3>
-      <h4>&mdash; ComPlat Team</h4>
-    </div>
-  );
-};
-
-const ShowIndicator = (show) => {
-  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-};
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '2px',
-  marginRight: '2px'
-};
-
-const IconLicense = (cp, hasCoAuthors = false) => {
-  const presentStyle = { height: '26px' };
-  let presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-  let presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-  let presentPath = '/images/creative_common/cc-by-sa.svg';
-  const cc0Alt = [
-    'To the extent possible under law, the',
-    (hasCoAuthors ? 'persons' : 'person'),
-    'who associated CC0 with this work',
-    (hasCoAuthors ? 'have' : 'has'),
-    'waived all copyright and related or neighboring rights to this work.'
-  ].join(' ');
-
-  switch (cp) {
-    case 'CC BY-SA':
-      presentHref = 'http://creativecommons.org/licenses/by-sa/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by-sa.svg';
-      break;
-    case 'CC BY':
-      presentHref = 'http://creativecommons.org/licenses/by/4.0/';
-      presentAlt = 'This work is licensed under a Creative Commons Attribution 4.0 International License.';
-      presentPath = '/images/creative_common/cc-by.svg';
-      break;
-    case 'CC0':
-      presentHref = 'http://creativecommons.org/publicdomain/zero/1.0/';
-      presentAlt = cc0Alt;
-      presentPath = '/images/creative_common/cc-zero.svg';
-      break;
-    case 'No License':
-      presentHref = '';
-      presentAlt = 'No License';
-      presentPath = '';
-      break;
-    default:
-      break;
-  }
-  return presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}><img src={presentPath} style={presentStyle} alt={presentAlt} title={presentAlt} /></a>;
-};
-
-const IconToMyDB = ({
-  id, type, tooltipTitle = 'Link to My DB', isLogin = false
-}) => {
-  if (isLogin) {
-    return (
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">{tooltipTitle}</Tooltip>}>
-        <Button className="animation-ring" bsStyle="link" href={`/mydb/collection/all/${type}/${id}`} target="_blank">
-          <i className={`icon-${type}`} />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-  return (<span className="wrap-ring"><i className={`icon-${type}`} /></span>);
-};
-
-IconToMyDB.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-  tooltipTitle: PropTypes.string,
-  isLogin: PropTypes.bool,
-};
-
-IconToMyDB.defaultProps = {
-  tooltipTitle: 'Link to My DB',
-  isLogin: false
-};
-
-const SidToPubChem = ({ sid }) => {
-  let labelStyle = {
-    // display: 'inline-block',
-    marginLeft: '2px',
-    marginRight: '2px',
-    //position: 'absolute',
-  };
-  if (!sid || isNaN(sid)) {
-    labelStyle.WebkitFilter = "grayscale(100%)"
-  }
-  const handleOnClick = (e) => {
-    if (sid && !isNaN(sid)){
-      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
-    }
-    e.stopPropagation()
-  }
-
-  if (sid && !isNaN(sid)){
-    return (
-      <span style={labelStyle} onClick={handleOnClick}>
-        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
-      </span>
-    )
-    }else {
-      return <span />
-  }
-}
-
-SidToPubChem.propTypes = {
-  sid: PropTypes.string
-}
-
-
-const OrcidIcon = ({ orcid }) => {
-  if (typeof orcid === 'undefined' || orcid === null) {
-    return (<span />);
-  }
-  const handleOnClick = (e) => {
-    e.stopPropagation();
-  };
-
-  return (
-    <a href={`https://orcid.org/${orcid}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
-      <img src="/images/wild_card/ORCIDiD_iconvector.svg" className="orcid-logo" alt="ORCID" title="ORCID" />
-    </a>
-  );
-};
-
-OrcidIcon.propTypes = {
-  orcid: PropTypes.string.isRequired
-};
-
-const ElementIcon = (elementType) => {
-  switch (elementType) {
-    case 'Reaction':
-      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    case 'Sample':
-      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    default:
-      return <div />;
-  }
-};
-
-const AnalysesTypeJoinLabel = (analyses, type) => {
-  const regExp = /\(([^)]+)\)/;
-  const analysesTypeJoin = analyses.map((analysis) => {
-    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
-    if (kind === '') {
-      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    }
-    return kind;
-  }).join(', ');
-
-  return analysesTypeJoin === '' ? analysesTypeJoin :
-    (
-      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
-        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
-      </div>
-    );
-};
-
-const CalcDuration = (reaction) => {
-  let duration = null;
-
-  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
-    return reaction.duration;
-  }
-
-  if (reaction.timestamp_start && reaction.timestamp_stop) {
-    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
-    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
-    if (start < stop) {
-      duration = moment.preciseDiff(start, stop);
-    }
-  }
-  if (duration == null) {
-    return '';
-  }
-  return duration;
-};
-
-const AuthorList = ({ creators, affiliationMap }) => {
-  return (
-    <span>
-      {creators.map(
-        (creator, i) => (
-          <span key={`auth_${creator.id}_${uuid.v4()}`}>
-            {i === 0 ? null : ' - '}<OrcidIcon orcid={creator.ORCID} />{creator.name}
-            <sup>
-              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
-            </sup>
-          </span>
-        )
-      )}
-    </span>
-  );
-};
-
-AuthorList.propTypes = {
-  creators: PropTypes.array,
-  affiliationMap: PropTypes.object,
-};
-
-AuthorList.defaultProps = {
-  creators: [],
-  affiliationMap: {},
-};
-
-const ContributorInfo = ({ contributor, showHelp }) => {
-  if (!contributor.name) {
-    return <div />;
-  }
-  const contributorBlock = !showHelp ? (
-    <h5><b>Contributor: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}</h5>
-  ) : (
-    <h5>
-      <b>Contributor&nbsp;<HelpInfo source="contributor" place="right" />: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}
-    </h5>
-  );
-  return (
-    <div>
-      {contributorBlock}
-      <div>
-        {contributor.affiliations && contributor.affiliations.map((e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>)}
-      </div>
-    </div>
-  );
-};
-
-ContributorInfo.propTypes = {
-  contributor: PropTypes.object,
-  showHelp: PropTypes.bool
-};
-
-ContributorInfo.defaultProps = {
-  contributor: {},
-  showHelp: false
-};
-
-const AffiliationList = ({ affiliations, affiliationMap }) => {
-  const names = [];
-  Object.keys(affiliationMap).map((affiliationId) => {
-    const ind = affiliationMap[affiliationId];
-    names[ind] = affiliations[affiliationId];
-    return null;
-  });
-  return (
-    <div>
-      {names.map(
-        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
-      )}
-    </div>
-  );
-}
-AffiliationList.propTypes = {
-  affiliations: PropTypes.object,
-  affiliationMap: PropTypes.object,
-};
-
-AffiliationList.defaultProps = {
-  affiliations: {},
-  affiliationIds: {},
-};
-
-class ClipboardCopyLink extends Component {
-  constructor(props) {
-    super(props)
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
-      >
-        <div role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn clip-copy" >{this.props.text}</div>
-      </OverlayTrigger>
-    );
-  }
-}
-
-class ClipboardCopyBtn extends Component {
-  constructor(props) {
-    super(props)
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
-      >
-        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
-          <i className="fa fa-clipboard" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
-
-
-
-const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
-  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
-  if (sample_svg_file && sample_svg_file != '') {
-    svgPath = `/images/samples/${sample_svg_file}`;
-  }
-  const tagData = molecule.tag && molecule.tag.taggable_data;
-  const pubchemInfo = {
-    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
-  };
-  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
-    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
-  const registedCompoundTooltip = (
-    <div>
-      For availability please contact the Compound Platform team with the blue button given below. An explanation can be accessed via our Youtube channel&nbsp;
-      <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play" style={{ color: 'red', fontSize: '150%' }} /></a>&nbsp;
-      or on our how-to pages
-      <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
-    </div>
-  );
-  return (
-    <Row>
-      <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath)}
-      </Col>
-      <Col sm={8} md={8} lg={8}>
-        {nameOrFormula}
-        <br />
-        <h5><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-        <h5><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-        <h5><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
-        <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
-        {
-          hasXvial ?
-            <div className="repo-registed-compound-desc">
-              A physical sample of this molecule was registered to the Molecule Archive of the
-              Compound Platform&nbsp;
-              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip">{registedCompoundTooltip}</Tooltip>}>
-                <i className="fa fa-info-circle" aria-hidden="true" />
-              </OverlayTrigger>
-            </div> : null
-        }
-        <h5>
-          <b>Crosslinks: </b>
-          &nbsp;&nbsp;
-          <PubchemLabels element={pubchemInfo} />
-          <ChemotionTag tagData={tagData} />
-        </h5>
-      </Col>
-    </Row>
-  );
-};
-
-class RenderAnalysisHeader extends Component {
-  constructor(props) {
-    super();
-  }
-
-  render() {
-    const svgPath = `/images/samples/${this.props.element.sample_svg_file}`;
-    let doiLink = '';
-    const molecule = this.props.element.molecule || {};
-    if (this.props.isPublic) {
-      doiLink = this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.publication && this.props.element.tag.taggable_data.publication.doi;
-    } else {
-      doiLink = (this.props.element.doi && this.props.element.doi.full_doi) || '';
-    }
-    const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-      ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
-      : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
-
-    const iupacUserDefined = this.props.element.showed_name == (molecule.iupac_name)
-      ? <span />
-      : <h5><b>Name: </b> {this.props.element.showed_name} </h5>;
-
-    const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
-    const crsId = (this.props.element.publication && this.props.element.publication.id) || '';
-    const xvial = (this.props.element.tag && this.props.element.tag.taggable_data && this.props.element.tag.taggable_data.xvial && this.props.element.tag.taggable_data.xvial.num) || '';
-    return (
-      <div>
-        <div>
-          <br />
-          <Row style={rinchiStyle}>
-            <Col sm={6} md={6} lg={6}>
-              {resizableSvg(svgPath)}
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <span className="repo-pub-sample-header">
-                <span className="repo-pub-title"><IconToMyDB isLogin={this.props.isLogin} id={this.props.element.id} type="sample" /></span>&nbsp;
-                <span className="repo-pub-title"><b>Product</b></span>&nbsp;
-                <RepoXvialButton isEditable={this.props.isReviewer} isLogin={this.props.isLogin} allowRequest elementId={this.props.element.id} data={xvial} saveCallback={this.props.updateRepoXvial} xvialCom={this.props.xvialCom} />
-                <RepoPublicComment isReviewer={this.props.isReviewer} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} userInfo={this.props.userInfo} pageType="reactions" pageId={this.props.reactionId} />&nbsp;
-                <RepoUserComment isLogin={this.props.isLogin} id={this.props.element.id} type="Sample" title={`Product CRS-${crsId}, ${this.props.element.showed_name}`} pageType="reactions" pageId={this.props.reactionId} />
-                <br /><br />
-              </span>
-              {nameOrFormula}
-              {iupacUserDefined}
-              <h6><b>Canonical Smiles: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
-              <h6><b>Inchi: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
-              <h6><b>Inchikey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
-              <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
-              <h6><b>DOI: </b>
-                {
-                  this.props.isPublic ?
-                  (
-                    <span className="sub-title" inline="true">
-                      <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-                        {doiLink}
-                      </Button>
-                      <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                      <DownloadMetadataBtn type="sample" id={this.props.element.id} />
-                    </span>
-                  )
-                  :
-                  (
-                    <span className="sub-title" inline="true">
-                      {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                    </span>
-                  )
-                }
-              </h6>
-              <h6>
-                <b>ID: </b>
-                <Button key={`reaction-jumbtn-${this.props.element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
-                  CRS-{crsId}
-                </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
-              </h6>
-
-            </Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
-
-const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
-  <span
-    role="presentation"
-    className="label label-default"
-    style={{
-      backgroundColor: '#777777',
-      color: 'white',
-      fontSize: 'smaller',
-      fontWeight: 'bold',
-      cursor: 'pointer'
-    }}
-    onClick={onClick}
-  >
-    {name} &nbsp;<i className={`glyphicon ${indicatorStyle}`} />
-  </span>
-);
-
-ToggleIndicator.propTypes = {
-  indicatorStyle: PropTypes.string,
-  name: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-};
-
-ToggleIndicator.defaultProps = {
-  indicatorStyle: '',
-  name: '',
-};
-
-
-const ReactionTable = ({
-  reaction, toggle, show, bodyAttrs, isPublic = true
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-
-  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-    reaction.publication.taggable_data.scheme_only === true) || false;
-
-  if (isPublic) {
-    schemes = reaction.schemes;
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s)
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => {
-    return (target ? (target * multi).toFixed(precision) : ' - ')
-  }
-
-  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        if (schemeOnly === true) {
-          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`
-        } else {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
-        }
-        break;
-      case 'solvents':
-        if (isPublic) {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`
-        } else {
-          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`
-        }
-        break;
-      default:
-        val = materialCalc(s.equivalent, 1, 3)
-    }
-    return (
-      val
-    )
-  }
-
-  const rows = (samples) => {
-    let currentType = '';
-
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    )
-  };
-
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionRinChiKey = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorRinchi = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionProperties = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorProp = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status: </b>{reaction.status}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Duration: </b>{CalcDuration(reaction)}
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const ReactionTlc = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorTlc = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.rf_value || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
-              <Col sm={10} md={10} lg={10}>
-                <div style={{ whiteSpace: 'pre' }}>
-                  {reaction.tlc_description || ''}
-                </div>
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-}
-
-const InputFieldYield = (props) => {
-  return (
-    <FormGroup>
-      <InputGroup>
-        <FormControl
-          type="text"
-          bsClass="bs-form--compact form-control"
-          bsSize="small"
-          value={props.value || 0}
-          placeholder="Input Yield..."
-          onChange={event => props.onInputChange(props.product, event)}
-        />
-        <InputGroup.Addon>%</InputGroup.Addon>
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const InputFieldDuration = props =>
-  (
-    <InputButtonField
-      label="Duration"
-      value={props.durationValue || ''}
-      field="duration"
-      btnValue={props.durationUnit || ''}
-      btnField="durationUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch duration unit"
-    />
-  );
-
-const InputFieldTemperture = props =>
-  (
-    <InputButtonField
-      label="Temperature"
-      value={props.temperatureDisplay || ''}
-      field="temperature"
-      btnValue={props.temperatureUnit || ''}
-      btnField="temperatureUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch temperature unit"
-    />
-  );
-
-const ReactionTableEdit = ({
-  reaction, bodyAttrs, isPublic = true,
-  onInputChange
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-
-  if (isPublic) {
-    schemes = reaction.schemes;
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s)
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
-  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        val = materialCalc(s.equivalent * 100, 1, 0);
-        break;
-      default:
-        return <div />;
-    }
-    return (
-      <Form inline>
-        <InputFieldYield
-          value={val}
-          product={s}
-          onInputChange={onInputChange}
-        />
-      </Form>
-    );
-  };
-
-  const rows = (samples) => {
-    let currentType = '';
-
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    )
-  };
-
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <Label>Reaction Table</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionPropertiesEdit = ({
-  reaction, bodyAttrs,
-  onInputChange, onUnitChange
-}) =>
-  (
-    <span>
-      <Label>Properties</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status</b><div>{reaction.status}</div>
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldTemperture
-                  temperatureDisplay={reaction.temperature_display}
-                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldDuration
-                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
-                  durationUnit={reaction.durationUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-
-const ReactionSchemeOnlyInfo = ({
-  reaction, isPublic = true, schemeDesc,
-  onYieldChange, onPropertiesChange, onUnitChange
-}) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTableEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              isPublic={isPublic}
-              onInputChange={onYieldChange}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <Checkbox
-              checked={schemeDesc}
-              onChange={() => { onPropertiesChange('schemeDesc'); }}
-            >
-              <span>add the description field?</span>
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionPropertiesEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              onInputChange={onPropertiesChange}
-              onUnitChange={onUnitChange}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
-  toggleRinchi, showRinchi,
-  toggleProp, showProp,
-  toggleTlc, showTlc,
-  schemeOnly = false, onToggle = () => {}
- }) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-  const content = reaction.description;
-  const additionInfo = reaction.observation;
-
-  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
-
-  const descQV = contentlength > 0 ?
-  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
-  const addQV = additionlength > 0 ?
-  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
-
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  if (schemeOnly) {
-    return (
-      <RepoReactionSchemeInfo
-        reaction={reaction}
-        svgPath={svgPath}
-        showScheme={showScheme}
-        showRinchi={showRinchi}
-        showProp={showProp}
-        bodyAttrs={bodyAttrs}
-        onToggle={onToggle}
-      />
-    );
-  }
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTable
-              reaction={reaction}
-              toggle={toggleScheme}
-              show={showScheme}
-              isPublic={isPublic}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-            <div className="desc small-p">
-              {addQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={reaction}
-              toggle={toggleRinchi}
-              show={showRinchi}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionProperties
-              reaction={reaction}
-              toggle={toggleProp}
-              show={showProp}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTlc
-              reaction={reaction}
-              toggle={toggleTlc}
-              show={showTlc}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const AnalysisHeaderSample = ({ sample, sampleType }) => {
-  const svgPath = `/images/samples/${sample.sample_svg_file}`;
-  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
-  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
-  return (
-    <div className="svg-container">
-      <Row style={rinchiStyle}>
-        <Col sm={4} md={4} lg={4}>
-          <SVG key={svgPath} src={svgPath} className="sample-details" />
-        </Col>
-        <Col sm={8} md={8} lg={8}>
-          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
-          <b> DOI: </b>
-          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-            {doiLink}
-          </Button>
-          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-          <DownloadMetadataBtn type="sample" id={sample.id} />
-        </Col>
-      </Row>
-    </div>
-  );
-};
-AnalysisHeaderSample.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  sampleType: PropTypes.string,
-};
-
-AnalysisHeaderSample.defaultProps = {
-  sample: {},
-  sampleType: '',
-};
-
-class RenderPublishAnalysesPanel extends Component {
-  header() {
-    const {
-      analysis, isPublic, userInfo, isLogin, isReviewer, pageId, type, pageType, element
-    } = this.props;
-    const content = analysis.extended_metadata['content'];
-    const previewImg = previewContainerImage(analysis);
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    const doiLink = (isPublic === false) ? (
-      <div className="sub-title" inline="true">
-        <b>DOI: </b>
-        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-      </div>
-    ) : (
-      <div className="sub-title" inline="true">
-        <b>DOI: </b>
-        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-          {analysis.dataset_doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-        <DownloadMetadataBtn type="container" id={analysis.id} />
-      </div>
-    );
-
-    const insText = instrumentText(analysis);
-    const crdLink = (isPublic === false) ? (
-      <div className="sub-title" inline="true">
-        <b>ID: </b>
-        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-          CRD-{analysis.pub_id}
-        </Button>
-        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{insText}
-
-      </div >
-    ) : (
-      <div className = "sub-title" inline = "true">
-        <b>ID: </b>
-        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-          CRD-{analysis.pub_id}
-        </Button>
-        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-      </div >
-    );
-
-    return (
-      <div className="repo-analysis-header">
-        <RepoPreviewImage
-          element={element}
-          analysis={analysis}
-          isLogin={isLogin}
-          previewImg={previewImg}
-          title={kind}
-        />
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title">
-              <b>{kind}</b>&nbsp;
-              <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
-              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
-            </div>
-            {doiLink}
-            {crdLink}
-          </div>
-          <div className="desc small-p expand-p">
-            <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content} />
-            </ClipboardCopyLink>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {this.header()}
-        <div>
-          <b>Datasets</b>
-          <RepoContainerDatasets
-            container={this.props.analysis}
-            isPublic={this.props.isPublic}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-class RenderPublishAnalyses extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  header() {
-    const { analysis } = this.props;
-    const content = analysis.extended_metadata['content'];
-    const previewImg = previewContainerImage(analysis);
-
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    let hasPop = true;
-    let fetchNeeded = false;
-    let fetchId = 0;
-    let fetchFilename = '';
-    if (previewImg.startsWith('data:image')) {
-      fetchNeeded = true;
-      fetchId = analysis.preview_img.id;
-      fetchFilename = analysis.preview_img.filename;
-    } else {
-      hasPop = false;
-    }
-
-    return (
-      <div
-        className="analysis-header"
-      >
-        <div className="preview">
-          <ImageModal
-            hasPop={hasPop}
-            preivewObject={{
-              src: previewImg
-            }}
-            popObject={{
-              title: kind,
-              src: previewImg,
-              fetchNeeded,
-              fetchId,
-              fetchFilename
-            }}
-          />
-        </div>
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title" inline="true">
-              <b>DOI: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-                {analysis.dataset_doi}
-              </Button>
-              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-              <DownloadMetadataBtn type="container" id={analysis.id} />
-            </div>
-            <div className="sub-title" inline="true">
-              <b>ID: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-                CRD-{ analysis.pub_id }
-              </Button>
-              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-            </div>
-            <div className="desc small-p">
-              <b>Content: </b> &nbsp;&nbsp;
-              <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content}  />
-            </ClipboardCopyLink>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { analysis, expanded, elementType } = this.props;
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    const AffiliationMap = (affiliationIds) => {
-      const aId = affiliationIds.length > 0 ? ([].concat.apply(...affiliationIds)) : [];
-      const affiliationMap = {};
-      let aCount = 0;
-      aId.map((e) => {
-        if (!affiliationMap[e]) {
-          aCount += 1;
-          affiliationMap[e] = aCount;
-        }
-      });
-      return affiliationMap;
-    };
-    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids || []);
-    const time = new Date(this.props.publication && this.props.publication.published_at);
-    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (
-      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
-        <Panel.Heading style={{ border: 'unset' }}>
-          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            {IconLicense(this.props.license, (this.props.publication.author_ids.length > 1))}
-          </h4>
-          <p>&nbsp;</p>
-          <b>{kind}</b>&nbsp;
-          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
-            <small><b>{ElementIcon(elementType)}</b></small>
-          </div>
-          <h5>
-            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
-            <AuthorList
-              creators={this.props.publication.creators}
-              affiliationMap={affiliationMap}
-            />
-          </h5>
-          <AffiliationList
-            affiliations={this.props.publication.affiliations}
-            affiliationMap={affiliationMap}
-          />
-        </Panel.Heading>
-        <Panel.Collapse>
-          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
-            {this.header()}
-            <Col md={12}>
-              <b>Datasets</b>
-              <RepoContainerDatasets
-                container={this.props.analysis}
-                isPublic={this.props.isPublic}
-              />
-            </Col>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    );
-  }
-}
-
-RenderPublishAnalyses.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  elementType: PropTypes.string.isRequired,
-  license: PropTypes.string.isRequired,
-  publication: PropTypes.shape({
-    author_ids: PropTypes.arrayOf(PropTypes.number),
-    creators: PropTypes.arrayOf(PropTypes.object),
-    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
-    affiliations: PropTypes.object,
-    published_at: PropTypes.string,
-  }).isRequired,
-  isPublic: PropTypes.bool.isRequired
-};
-
-class PublishAnalysesTag extends Component {
-  constructor(props) {
-    super(props);
-    const { reaction, analysis, analysesType, product } = props;
-    this.state = {
-      reaction,
-      analysis,
-      analysesType,
-      product
-    };
-    this.handleCheck = this.handleCheck.bind(this);
-  }
-
-  handleCheck(e, elementType) {
-    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
-      e.extended_metadata.publish = false;
-    } else {
-      e.extended_metadata.publish = true;
-    }
-    this.props.handleAnalysesChecked(e, elementType);
-  }
-
-  generateTitle() {
-    const {
-      reaction, analysis, analysesType, product
-    } = this.state;
-    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
-    const { content } = analysis.extended_metadata;
-    const status = analysis.extended_metadata.status || '';
-    const previewImg = previewContainerImage(analysis);
-    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
-
-    let statusMissing = false;
-    let nmrMissing = false;
-    let datasetMissing = false;
-    if (analysesType === 'Product') {
-      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
-      nmrMissing = !isNmrPass(analysis, product);
-      datasetMissing = !isDatasetPass(analysis);
-    }
-    const constructBtnTip = () => {
-      const tip = [];
-      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
-        if (typeMissing) tip.push('Type is invalid.');
-        if (statusMissing) tip.push('Status must be Confirmed.');
-        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
-        if (datasetMissing) {
-          tip.push('Dataset is incomplete. Please check that: ');
-          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
-          tip.push('2. the instrument field is not empty.');
-        }
-        return tip.join('\r\n');
-      }
-      return 'publish this analysis';
-    };
-    const btnTip = constructBtnTip();
-
-    let statusChk = false;
-    let statusMsg = '';
-    let typeChk = false;
-    if (analysesType === 'Product') {
-      statusChk = (status !== 'Confirmed' || nmrMissing);
-      statusMsg = nmrMsg(product, analysis);
-      typeChk = (kind === '');
-    }
-
-    if (!analysis.extended_metadata.kind) {
-      analysis.extended_metadata.publish = false;
-    }
-    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
-      && !statusMissing && !nmrMissing && !datasetMissing) || false;
-    let analysesIcon = '';
-    switch (analysesType) {
-      case 'Reaction':
-        analysesIcon = <i className="icon-reaction" />;
-        break;
-      case 'Product':
-        analysesIcon = <i className="icon-sample" />;
-        break;
-      default:
-        analysesIcon = '';
-    }
-
-    return (
-      <div
-        className="analysis-header order"
-      >
-        <div className="preview">
-          <img src={previewImg} alt="preview" />
-        </div>
-        <div className="abstract">
-          <div className="upper-btn">
-            <div
-              className="button-right"
-            >
-              &nbsp;{analysesIcon}
-            </div>
-            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
-            <span
-              className="button-right add-to-report"
-              onClick={stopBubble}
-            >
-              <OverlayTrigger
-                placement="left"
-                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
-              >
-                <div>
-                  <Checkbox
-                    onChange={() => { this.handleCheck(analysis, analysesType); }}
-                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
-                    defaultChecked={isPublish}
-                  >
-                    {
-                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
-                        <span style={{ color: 'red' }}>Add to publication</span>
-                      :
-                        <span>Add to publication</span>
-                    }
-                  </Checkbox>
-                </div>
-              </OverlayTrigger>
-            </span>
-          </div>
-          <div className="lower-text">
-            <div className="main-title">
-              {analysis.name}
-            </div>
-            {
-              typeChk ?
-                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
-                :
-                <div className="sub-title">Type: {kind}</div>
-            }
-            {
-              statusChk ?
-                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
-                :
-                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
-            }
-            <div className="desc sub-title">
-              <span style={{ float: 'left', marginRight: '5px' }}>
-                Content:
-              </span>
-              <QuillViewer value={content}  />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
-        <Panel.Heading>
-          <Panel.Title toggle>
-            {this.generateTitle()}
-          </Panel.Title>
-        </Panel.Heading>
-        <Panel.Body collapsible>
-          <ContainerComponent readOnly container={this.props.analysis} />
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-PublishAnalysesTag.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  analysis: PropTypes.object.isRequired,
-  analysesType: PropTypes.string,
-  handleAnalysesChecked: PropTypes.func.isRequired,
-  product: PropTypes.object
-};
-PublishAnalysesTag.defaultProps = {
-  analysesType: '',
-  product: null
-};
-
-RenderPublishAnalysesPanel.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  type: PropTypes.string.isRequired,
-  userInfo: PropTypes.string,
-  isPublic: PropTypes.bool,
-  isLogin: PropTypes.bool,
-  isReviewer: PropTypes.bool,
-  pageId: PropTypes.number,
-  pageType: PropTypes.string
-};
-
-RenderPublishAnalysesPanel.defaultProps = {
-  userInfo: '',
-  isPublic: true,
-  isLogin: false,
-  isReviewer: false,
-  pageId: null,
-  pageType: 'reactions'
-};
-
-ReactionTable.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object,
-  isPublic: PropTypes.bool.isRequired
-};
-
-ReactionTable.defaultProps = {
-  isPublic: true,
-  showScheme: false
-};
-
-ReactionRinChiKey.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionProperties.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionTlc.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-const DatasetDetail = ({ isPublished, element }) => {
-  const { molecule } = element;
-  molecule.tag = {
-    taggable_data: { pubchem_cid: molecule.pubchem_cid }
-  };
-
-  const moleculeView = molecule.inchikey === null ? (<span />) : (<MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />);
-  const datasetView = !element ? (
-    <span>There is no published dataset</span>
-  ) : (
-    <RenderPublishAnalyses
-      key={`${element.id}-${element.updated_at}`}
-      analysis={element.dataset}
-      expanded
-      elementType="Sample"
-      license={element.license}
-      publication={element.publication}
-      isPublic={isPublished}
-    />
-  );
-
-  return (
-    <Grid>
-      {moleculeView}
-      <br /><br />
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          {datasetView}
-        </Col>
-      </Row>
-    </Grid>
-  );
-};
-
-DatasetDetail.propTypes = {
-  element: PropTypes.object.isRequired, isPublished: PropTypes.bool.isRequired
-};
-
-const ClosePanel = ({ element }) => (
-  <div>
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        className="button-right"
-        onClick={() => PublicActions.close(element, true)}
-      >
-        <i className="fa fa-times" />
-      </Button>
-    </OverlayTrigger>
-  </div>
-);
-
-ClosePanel.propTypes = {
-  element: PropTypes.object.isRequired,
-};
-
-const CommentBtn = (props) => {
-  const {
-    canComment,
-    reviewLevel,
-    onShow,
-    field,
-    history,
-    orgInfo
-  } = props;
-
-  if (!canComment) return '';
-  return (
-    <span>
-      <RepoCommentBtn
-        field={field}
-        history={history}
-        orgInfo={orgInfo}
-        reviewLevel={reviewLevel}
-        onShow={() => onShow(true, field, orgInfo)}
-      />&nbsp;
-    </span>
-  );
-};
-
-CommentBtn.propTypes = {
-  canComment: PropTypes.bool.isRequired,
-  history: PropTypes.array.isRequired,
-  reviewLevel: PropTypes.number.isRequired,
-  onShow: PropTypes.func.isRequired,
-  field: PropTypes.string.isRequired,
-  orgInfo: PropTypes.string.isRequired
-};
-
-const Doi = (props) => {
-  const {
-    type, id, doi, isPublished
-  } = props;
-
-  let data = '';
-
-  if (isPublished) {
-    data = (
-      <span>
-        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
-          {doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
-        <DownloadMetadataBtn type={type} id={id} />
-      </span>
-    );
-  } else {
-    data = (
-      <span>
-        {doi.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi.full_doi}`} />
-      </span>
-    );
-  }
-
-  return (
-    <h5>
-      <b>DOI: </b>
-      {data}
-    </h5>
-  );
-};
-
-Doi.propTypes = {
-  type: PropTypes.string.isRequired,
-  id: PropTypes.number.isRequired,
-  doi: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]).isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
-const DateInfo = (props) => {
-  const {
-    pubData, tagData, isPublished
-  } = props;
-
-  let time = '';
-  let formattedTime = '';
-
-  if (isPublished) {
-    time = new Date(tagData && (tagData.published_at || tagData.doi_reg_at));
-    formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (<span><b>Published on </b> <i>{formattedTime}</i></span>);
-  }
-
-  time = new Date(pubData && pubData.updated_at);
-  formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  return (<span><b>Submitted on </b> <i>{formattedTime}</i></span>);
-};
-
-DateInfo.propTypes = {
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
-export {
-  AnalysisHeaderSample,
-  AnalysesTypeJoinLabel,
-  AffiliationList,
-  AuthorList,
-  AuthorTitle,
-  BackSoonPage,
-  CalcDuration,
-  ChemotionId,
-  ClipboardCopyLink,
-  ClipboardCopyBtn,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  DateFormatYMDLong,
-  DateFormatDMYTime,
-  DatasetDetail,
-  DateInfo,
-  Doi,
-  DownloadDOICsv,
-  DownloadMetadataBtn,
-  EditorTips,
-  ElementIcon,
-  ElStateLabel,
-  ElSubmitTime,
-  ElAspect,
-  EmbargoCom,
-  IconLicense,
-  IconToMyDB,
-  isNmrPass,
-  isDatasetPass,
-  HomeFeature,
-  MoleculeInfo,
-  NewsroomTemplate,
-  PublishAnalysesTag,
-  PublishTypeAs,
-  ReactionSchemeOnlyInfo,
-  ReactionInfo,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalyses,
-  RenderPublishAnalysesPanel,
-  resizableSvg,
-  SchemeWord,
-  SidToPubChem,
-  OrcidIcon,
-  ShowIndicator,
-  SvgPath,
-  ToggleIndicator,
-  CollectionDesc
-};
diff --git a/app/assets/javascripts/libHome/RepoContact.js b/app/assets/javascripts/libHome/RepoContact.js
deleted file mode 100644
index 1c44e4b30..000000000
--- a/app/assets/javascripts/libHome/RepoContact.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Well, Col, Row } from 'react-bootstrap';
-
-const RepoContact = () => {
-  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />kit.edu</span>;
-  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
-  return (
-    <div >
-      <br /><br /><br />
-      <Well style={{ width: '90%', margin: 'auto' }}>
-        <Row>
-          <Col md={6}>
-            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
-              <tbody>
-                <tr><td><h3>Complat</h3><br /><br /></td></tr>
-                <tr><td>{institute}</td></tr>
-                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
-                <tr><td>Building 341</td></tr>
-                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
-                <tr><td>Germany<br /><br /></td></tr>
-                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
-                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
-                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
-              </tbody>
-            </table>
-          </Col>
-          <Col md={6}>
-            <iframe
-              title="Complat location"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
-              style={{
-                width: '80%', height: 400, frameborder: '0', margin: 'auto'
-              }}
-            />
-          </Col>
-        </Row>
-      </Well>
-      <br /><br /><br />
-    </div>
-  );
-};
-
-export default RepoContact;
diff --git a/app/assets/javascripts/libHome/RepoContainerDatasets.js b/app/assets/javascripts/libHome/RepoContainerDatasets.js
deleted file mode 100644
index 09d3a3149..000000000
--- a/app/assets/javascripts/libHome/RepoContainerDatasets.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
-import ContainerDatasetModal from '../components/ContainerDatasetModal';
-import ContainerDatasetField from '../components/ContainerDatasetField';
-
-export default class RepoContainerDatasets extends Component {
-  constructor(props) {
-    super(props);
-    const { container } = props;
-    this.state = {
-      container,
-      modal: {
-        show: false,
-        dataset_container: null
-      }
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    });
-  }
-
-  handleModalOpen(datasetContainer) {
-    const { modal } = this.state;
-    modal.dataset_container = datasetContainer;
-    modal.show = true;
-    this.setState({ modal });
-  }
-
-  handleModalHide() {
-    const { modal } = this.state;
-    modal.show = false;
-    modal.dataset_container = null;
-    this.setState({ modal });
-    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
-    document.body.className = document.body.className.replace('modal-open', '');
-  }
-
-  render() {
-    const { container, modal } = this.state;
-
-    if (container.children.length > 0) {
-      return (
-        <div>
-          <ListGroup style={{ marginBottom: 20 }}>
-            {container.children.map((datasetContainer) => {
-              return (
-                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} className="repo-analysis-listgroup">
-                  <ContainerDatasetField
-                    dataset_container={datasetContainer}
-                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
-                    disabled
-                    isPublic={this.props.isPublic}
-                  />
-                </ListGroupItem>
-              );
-            })}
-          </ListGroup>
-          <hr style={{ borderColor: '#ddd' }} />
-          <ContainerDatasetModal
-            onHide={() => this.handleModalHide()}
-            show={modal.show}
-            readOnly
-            dataset_container={modal.dataset_container}
-            disabled
-          />
-        </div>
-      );
-    }
-    return (
-      <div>
-        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
-          <h5>There are currently no Datasets.</h5>
-        </Well>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoDirective.js b/app/assets/javascripts/libHome/RepoDirective.js
deleted file mode 100644
index 8712595b1..000000000
--- a/app/assets/javascripts/libHome/RepoDirective.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-import { Parser } from 'html-to-react';
-
-export default class RepoDirective extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      content: <div />
-    };
-  }
-
-  componentDidMount() {
-    fetch('/directives/directives.html', { credentials: 'same-origin' })
-      .then(res => res.text())
-      .then((html) => {
-        // const parser = new HtmlToReactParser();
-        this.setState({ content: Parser().parse(html) });
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  render() {
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={3} />
-        <Col md={6}>
-          <Panel>
-            <Panel.Heading>
-              <Panel.Title>Directive to use the service</Panel.Title>
-            </Panel.Heading>
-            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
-              {this.state.content}
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={3} />
-      </Row>
-    );
-  }
-};
diff --git a/app/assets/javascripts/libHome/RepoElementDetails.js b/app/assets/javascripts/libHome/RepoElementDetails.js
deleted file mode 100644
index 075330b3d..000000000
--- a/app/assets/javascripts/libHome/RepoElementDetails.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import { DatasetDetail } from './RepoCommon';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoElementDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentElement: {}
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'dataset': return <DatasetDetail isPublished element={currentElement} />;
-      case 'molecule': return (
-        <RepoSampleDetails
-          isPublished
-          element={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
-        />);
-      case 'reaction': return (
-        <RepoReactionDetails
-          isPublished
-          reaction={currentElement}
-          reviewLevel={this.state.reviewLevel}
-          isSubmitter={this.state.isSubmitter}
-          history={this.state.historyInfo ? this.state.historyInfo : []}
-        />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none', maxHeight: '80%' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoEmbargo.js b/app/assets/javascripts/libHome/RepoEmbargo.js
deleted file mode 100644
index 7a5f934c7..000000000
--- a/app/assets/javascripts/libHome/RepoEmbargo.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
-import Select from 'react-select';
-import { findIndex, filter } from 'lodash';
-import RepoEmbargoDetails from './RepoEmbargoDetails';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { ElAspect } from './RepoCommon';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-
-const renderMenuItems = (bundles) => {
-  if (bundles.length < 1) return <div />;
-  const menu = bundles.map(bundle => (
-    <MenuItem key={bundle.value} eventKey={bundle.value}>
-      {bundle.label}
-    </MenuItem>
-  ));
-  return menu;
-};
-
-export default class RepoEmbargo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      current_user: {},
-      currentElement: null,
-      moveElement: {},
-      newEmbargo: null,
-      selectEmbargo: null,
-      bundles: [],
-      showConfirmModal: false,
-      showMoveModal: false,
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
-    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
-    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
-    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
-    this.handleMoveShow = this.handleMoveShow.bind(this);
-    this.handleMoveClose = this.handleMoveClose.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    this.loadBundles();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-    if (this.state.selectEmbargo !== null) {
-      const vaildSelect = state.bundles.find(b => b.value === this.state.selectEmbargo.value);
-      if (typeof (vaildSelect) === 'undefined') {
-        this.setState({ selectEmbargo: null });
-      }
-    }
-  }
-
-  onClickDelete() {
-    this.setState({ showConfirmModal: true });
-  }
-
-
-  handleMoveShow(element) {
-    this.setState({
-      showMoveModal: true,
-      moveElement: element
-    });
-  }
-
-  handleMoveClose() {
-    this.setState({ showMoveModal: false, moveElement: {} });
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ newEmbargo: selectedValue });
-    }
-  }
-
-  handleElementSelection(eventKey, event) {
-    const { bundles } = this.state;
-    const selectEmbargo = bundles.find(b => b.value === eventKey);
-    this.setState({ selectEmbargo });
-    PublicActions.getEmbargoElements(eventKey);
-  }
-
-  handleEmbargoAccount() {
-    const { selectEmbargo } = this.state;
-
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else {
-      PublicActions.generateEmbargoAccount(selectEmbargo.value);
-      alert(`A temporary account for [${selectEmbargo.label}] has been created. The details have been sent to you by e-mail.`);
-    }
-  }
-
-  handleEmbargoRelease() {
-    const { selectEmbargo } = this.state;
-
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else {
-      PublicActions.releaseEmbargo(selectEmbargo.value);
-      alert(`The embargo on [${selectEmbargo.label}] has been released!`);
-    }
-  }
-
-  handleEmbargoDelete(shouldPerform) {
-    if (shouldPerform) {
-      const { selectEmbargo } = this.state;
-      if (selectEmbargo === null) {
-        alert('Please select an embargo first!');
-      } else {
-        PublicActions.deleteEmbargo(selectEmbargo.value);
-      }
-    }
-    this.setState({ showConfirmModal: false });
-  }
-
-  handleMoveEmbargo() {
-    const { selectEmbargo, moveElement, newEmbargo } = this.state;
-    PublicActions.moveEmbargo(selectEmbargo.value, newEmbargo, moveElement);
-    this.setState({ showMoveModal: false });
-  }
-
-  loadBundles() {
-    PublicActions.fetchEmbargoBundle();
-  }
-
-  renderSearch(bundles) {
-    const { selectEmbargo, elements, current_user } = this.state;
-    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const customClass = '.btn-unified';
-    const actionButtons = current_user.type === 'Anonymous' ? <span /> :
-      (
-        <span>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length === 0}
-            onClick={() => this.handleEmbargoAccount()}
-          >
-            <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
-          </Button>
-          <Button
-            bsStyle="primary"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
-            onClick={() => this.handleEmbargoRelease()}
-          >
-            <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
-          </Button>
-          <Button
-            bsStyle="danger"
-            id="all-inner-button"
-            disabled={selectEmbargo === null || elements.length !== 0}
-            onClick={() => this.onClickDelete()}
-          >
-            <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
-          </Button>
-        </span>
-      );
-    const filterDropdown = (
-      <ButtonGroup>
-        <DropdownButton
-          className={customClass}
-          id="embargo-inner-dropdown"
-          title={selectEmbargo === null ? 'Embargo Bundle' : selectEmbargo.label}
-          style={{ width: '180px' }}
-          onSelect={this.handleElementSelection}
-        >
-          {renderMenuItems(bundles)}
-        </DropdownButton>
-        {actionButtons}
-      </ButtonGroup>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-
-  // render modal
-  renderMoveModal() {
-    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
-    const defaultBundles = [
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-    const allBundles = defaultBundles.concat(filter(bundles, b => b.name !== (selectEmbargo == null ? '' : selectEmbargo.name)));
-
-    return (
-      <Modal
-        show={showMoveModal}
-        dialogClassName="move-embargo-dialog"
-        onHide={this.handleMoveClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div>
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.label}] to :
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <div>
-                  <Select
-                    value={this.state.newEmbargo}
-                    onChange={e => this.handleEmbargoChange(e)}
-                    options={allBundles}
-                    className="select-assign-collection"
-                  />
-                  <br />
-                  <ButtonToolbar>
-                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
-                  </ButtonToolbar>
-                </div>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    const {
-      elements, bundles, currentElement, currentUser, showConfirmModal
-    } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch(bundles)}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, PublicActions.displayReviewEmbargo, currentUser, currentElement, this.handleMoveShow)) }
-                </tbody>
-              </Table>
-            </div>
-          </div>
-          <ConfirmModal
-            showModal={showConfirmModal}
-            title="Warning"
-            content="Are you sure that you want to delete this ?"
-            onClick={this.handleEmbargoDelete}
-          />
-        </Col>
-        <Col
-          className="review-element"
-          md={currentElement ? 8 : 0}
-        >
-          <RepoEmbargoDetails />
-          { this.renderMoveModal() }
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoEmbargoDetails.js b/app/assets/javascripts/libHome/RepoEmbargoDetails.js
deleted file mode 100644
index 89d33cae8..000000000
--- a/app/assets/javascripts/libHome/RepoEmbargoDetails.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoEmbargoDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction': return <RepoReactionDetails reaction={currentElement.reaction} />;
-      case 'sample': return <RepoSampleDetails element={currentElement} />;
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>);
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoHome.js b/app/assets/javascripts/libHome/RepoHome.js
deleted file mode 100644
index 3a576ed55..000000000
--- a/app/assets/javascripts/libHome/RepoHome.js
+++ /dev/null
@@ -1,421 +0,0 @@
-import React, { Component } from 'react';
-import { Label, Col, Row, Carousel, Thumbnail } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-
-const PartnersInfo = (info) => {
-  const { header, img, content } = info;
-  const imgSrc = `/images/repo/${img}`;
-
-  return (
-    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
-      <div className="info">
-        <h4>{header}</h4>
-        <p>{content}</p>
-      </div>
-    </Thumbnail>
-  );
-};
-
-const Infos = [
-  {
-    header: 'Database API',
-    img: 'OAI.png',
-    content: 'The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.',
-  }, {
-    header: 'KIT Stiftung',
-    img: 'KITStiftung.png',
-    content: 'The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.',
-  }, {
-    header: 're3data',
-    img: 're3data.png',
-    content: 'Karlsruhe Institute of Technology Registry of Research Data Repositories',
-  }, {
-    header: 'Inchitrust',
-    img: 'InChITRUST.png',
-    content: 'The KIT has a Supporter Membership.',
-  }, {
-    header: 'Datacite',
-    img: 'DataCite.png',
-    content: 'Helping you to find, access, and reuse data.',
-  }, {
-    header: 'Pubmed',
-    img: 'pubchem.jpg',
-    content: 'All compounds are automatically registered with PubChem.',
-  }, {
-    header: 'Thomson Reuters',
-    img: 'DCIbadge.png',
-    content: 'Datasets are automatically registered at the Data Citation Index.',
-  }, {
-    header: 'DFG',
-    img: 'ri_logo.png',
-    content: 'Listed in the DFG catalogue for Research Infrastructures.',
-  }
-];
-
-const timeInterval = (date) => {
-  if (!date) { return null; }
-  switch (typeof date) {
-    case 'number':
-      break;
-    case 'string':
-      date = +new Date(date);
-      break;
-    case 'object':
-      if (date.constructor === Date) date = date.getTime();
-      break;
-    default:
-      date = +new Date();
-  }
-  let seconds = Math.floor((new Date() - date) / 1000);
-  let intrvlTypes = [
-    [31536000, 'year', 'a'],
-    [2592000, 'month', 'a'],
-    [604800, 'week', 'a'],
-    [86400, 'day', 'a'],
-    [3600, 'hour', 'an'],
-    [60, 'minute', 'a'],
-    [1, 'second', 'a'],
-  ]
-  let intrvlCount = 0
-  let intrvlType = intrvlTypes.find((e) => {
-    intrvlCount = Math.floor(seconds / e[0])
-    return intrvlCount >= 1
-  })
-  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
-}
-
-const CardLatestPublish = ({ lastPublished }) => {
-  if (lastPublished) {
-    const { sample, reaction } = lastPublished;
-    const svgPathSample = sample.sample_svg_file
-      ? `/images/samples/${sample.sample_svg_file}`
-      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
-    const pubTagSample = sample.tag || {};
-    const svgPathReaction = reaction
-      ? `/images/reactions/${reaction.reaction_svg_file}`
-      : '/images/no_image_180.svg';
-    const pubTagReaction = reaction.tag || {};
-    return (
-      <div className="card-well-competition">
-        <Carousel className="carl-spt" indicators={false} interval={6000}>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
-                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
-                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-        </Carousel>
-      </div>
-    );
-  }
-  return <div />;
-};
-
-const CardIntro = () => (
-  <div className="container">
-    <Row>
-      <Col md={6} sm={12} className="even">
-        <img
-          className="icon-chemotion"
-          src="/images/repo/chemotion_full.svg"
-          key="chemotion_full"
-          alt="icon"
-        />
-      </Col>
-      <Col md={6} sm={12} className="even">
-        <div className="heading">
-          Repository for molecules, reactions and research data
-        </div>
-      </Col>
-    </Row>
-    <Row>
-      <Col md={12} sm={12}>
-        <div className="heading">Visibility and Impact</div>
-        <ul className="list">
-          <li>
-            Publish your structures, attach your characterization data, and make them citable via DOI
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            Long-term archival - from scientists for scientists
-          </li>
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Now, publish your Reactions</i>
-          </li>
-        </ul>
-      </Col>
-    </Row>
-  </div>
-);
-
-const StaticsBoard = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-
-    return (
-      <Row className="repo-statistic">
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="icon-sample" />
-              <div className="tit">Samples</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="tit">published</div>
-              <div className="cnt">{stsSample.e_cnt}</div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="icon-reaction" />
-              <div className="tit">Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="tit">published</div>
-              <div className="cnt">{stsReaction.e_cnt}</div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="fa fa-area-chart i-ext" aria-hidden />
-              <div className="tit">Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">{stsAnalysisCnt}</div>
-              <div style={{ display: 'flex' }}>
-                <div>Top 3:&nbsp;&nbsp;</div>
-                <div className="italic-desc">
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
-                  <br />
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
-                  <br />
-                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
-                </div>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
-class RepoHome extends Component {
-  constructor(props) {
-    super()
-    this.state = {
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.lastPublished();
-    PublicActions.publishedStatics();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(PublicState) {
-    if (PublicState.lastPublished || PublicState.publishedStatics) {
-      this.setState(prevState => ({
-        ...prevState,
-        lastPublished: PublicState.lastPublished,
-        publishedStatics: PublicState.publishedStatics
-      }));
-    }
-  }
-
-  render() {
-    const features = {
-      metadata: {
-        fa: 'fa fa-file-code-o',
-        title: 'Metadata',
-        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme 4.0.'
-      },
-      doi: {
-        fa: 'fa fa-id-card-o',
-        title: 'DOI',
-        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
-      },
-      license: {
-        fa: 'fa fa-creative-commons',
-        title: 'Licenses',
-        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
-      },
-      embargo: {
-        fa: 'fa fa-ban',
-        title: 'Embargo',
-        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
-      },
-      // usage: {
-      //   fa: 'fa fa-bar-chart',
-      //   title: 'Usage',
-      //   intro: 'Assess your research data and track the published research data......'
-      // },
-      // oai: {
-      //   fa: 'fa fa-tasks',
-      //   title: 'OAI Provider',
-      //   intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
-      // },
-      dataQuality: {
-        fa: 'fa fa-diamond',
-        title: 'Data Quality',
-        intro: 'Release your research data and pass an internal review that ensures data quality.'
-      },
-      peer: {
-        fa: 'fa fa-external-link',
-        title: 'Peer review',
-        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
-      },
-      store: {
-        fa: 'fa fa-database',
-        title: 'Storage',
-        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
-      },
-      api: {
-        fa: 'fa fa-connectdevelop',
-        title: 'APIs',
-        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
-      }
-    };
-
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={12}>
-          <Row className="repo-top-row">
-            <Col md={3} sm={12}>
-              <CardLatestPublish lastPublished={this.state.lastPublished} />
-            </Col>
-            <Col md={6} sm={12} className="repo-intro">
-              <CardIntro />
-            </Col>
-            <Col md={3} sm={12}>
-              <StaticsBoard publishedStatics={this.state.publishedStatics} />
-            </Col>
-          </Row>
-          <Row>
-            <Col md={2} sm={12}>&nbsp;</Col>
-            <Col md={8} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Features
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={2} sm={12}>
-                  <div />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
-                </Col>
-                <Col md={2} sm={12}>
-                  <div />
-                </Col>
-              </Row>
-            </Col>
-            <Col md={2} sm={12}>&nbsp;</Col>
-          </Row>
-          <Row className="card-partners">
-            <Col md={12} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Partners, Affiliations, APIs
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="partner-row" >
-                    { Infos.map((info, index) => PartnersInfo(info, index)) }
-                  </div>
-                </Col>
-              </Row>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-export default RepoHome;
diff --git a/app/assets/javascripts/libHome/RepoHowTo.js b/app/assets/javascripts/libHome/RepoHowTo.js
deleted file mode 100644
index 00c109964..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div style={{ position: 'relative' }}>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (howto) => {
-  let imageUrl = '';
-  if (typeof (howto) !== 'undefined' && howto
-    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-    imageUrl = `/howto/${howto.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      {
-        imageUrl === '' ?
-          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
-            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-          </div>
-          :
-          <img
-            src={imageUrl}
-            style={{
-              display: 'block',
-              width: '100%',
-              height: 'auto'
-            }}
-            alt=""
-          />
-      }
-    </div>
-  );
-};
-
-export default class RepoHowTo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howtos: PublicStore.getState().howtos || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.howtos();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howtos) {
-      this.setState(prevState => ({
-        ...prevState, howtos: state.howtos
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initialHowTo()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_howto_editor
-        });
-      });
-  }
-
-  render() {
-    let { howtos } = this.state;
-    const { isEditor } = this.state;
-    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
-    howtos = orderBy(
-      howtos,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return howtos.length > 0 ? (
-      <Row className="howto_page">
-        <Col lg={12} md={12}>
-          <NewsList howtos={howtos} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) :
-      <Row className="howto_page" style={{ textAlign: 'center' }}>
-        <Col md={12}>
-          <BackSoonPage />
-        </Col>
-      </Row>;
-  }
-}
-
-const NewsColSmall = (param) => {
-  const { howto, isEditor } = param;
-  return (
-    <Col lg={12} md={12} sm={12} className="news_column">
-      <div className="news_card_content">
-        <div className="news_card_s">
-          <Col md={4} sm={12}>{mainImage(howto)}</Col>
-          <Col md={8} sm={12}>
-            <div className="card_info">
-              <div className="info">
-                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
-                <div className="news_content_card_s">
-                  <p />
-                  {howto.firstParagraph}
-                  <p />
-                </div>
-              </div>
-            </div>
-            <div className="read">
-              {renderEditRead(howto, isEditor)}
-            </div>
-          </Col>
-        </div>
-        <div className="news_card_badge_s">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
-          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
-          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
-        </div>
-      </div>
-    </Col>
-  );
-};
-
-const NewsList = (param) => {
-  const { howtos } = param;
-  return howtos.length > 0 ? (
-    <Row>
-      <Col md={1} />
-      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
-        <Row>
-          {
-            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
-          }
-        </Row>
-      </Col>
-      <Col md={1} />
-    </Row>
-  ) : <div />;
-};
-
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js b/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
deleted file mode 100644
index a503ce392..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorBtn.js
+++ /dev/null
@@ -1,67 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import uuid from 'uuid';
-
-const fa = klass => (<i className={klass} aria-hidden="true" />);
-const FaBtn = props => (
-  <OverlayTrigger placement={props.place} overlay={<Tooltip id={uuid.v4()}>{props.tip}</Tooltip>}>
-    <Button bsStyle={props.bsStyle} bsSize={props.bsSize} onClick={props.onClick} >
-      {props.txt}&nbsp;{fa(props.fa)}
-    </Button>
-  </OverlayTrigger>
-);
-FaBtn.propTypes = {
-  tip: PropTypes.string.isRequired,
-  txt: PropTypes.string.isRequired,
-  fa: PropTypes.string,
-  place: PropTypes.string,
-  bsStyle: PropTypes.string,
-  bsSize: PropTypes.string,
-  onClick: PropTypes.func,
-};
-FaBtn.defaultProps = {
-  fa: '',
-  place: 'top',
-  bsStyle: 'primary',
-  bsSize: 'small',
-  onClick: null,
-};
-
-const EditorBtn = props => (
-  <div className="editor-btn">
-    <FaBtn tip="Add Text Section" txt="Add" fa="fa fa-file-text-o" onClick={() => props.onClick('txt')} />
-    <FaBtn tip="Add Image Section" txt="Add" fa="fa fa-picture-o" onClick={() => props.onClick('img')} />
-  </div>
-);
-
-EditorBtn.propTypes = {
-  onClick: PropTypes.func,
-};
-
-EditorBtn.defaultProps = {
-  onClick: null,
-};
-
-const EditorBaseBtn = props => (
-  <div className="editor-btn">
-    {/* <FaBtn tip="Preview" txt="Preview" bsStyle="info" onClick={onClick} /> */}
-    <FaBtn tip="Save" txt="Save" bsStyle="success" onClick={() => props.onClick('save')} />
-    <FaBtn tip="Delete" txt="Delete" bsStyle="danger" onClick={() => props.onClick('delete')} />
-  </div>
-);
-
-EditorBaseBtn.propTypes = {
-  onClick: PropTypes.func,
-};
-
-EditorBaseBtn.defaultProps = {
-  onClick: null,
-};
-
-module.exports = {
-  FaBtn,
-  EditorBtn,
-  EditorBaseBtn,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js b/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
deleted file mode 100644
index b1f1609f4..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorImage.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-
-export default class EditorImage extends Component {
-  handleDrop(files) {
-    if (files && files.length > 0) {
-      this.props.onChange('pfad', files);
-    }
-  }
-  render() {
-    return (
-      <div style={{ backgroundColor: 'white' }}>
-        <Dropzone
-          accept="image/*"
-          multiple={false}
-          onDrop={files => this.handleDrop(files)}
-          className="dropzone"
-        >
-          {
-            this.props.pfad !== '' ?
-              <div className="image-container">
-                <img src={`/${this.props.editor_type}/${this.props.pfad}`} alt="" />
-              </div>
-              : <p>Drop Files, or Click to Select.</p>
-          }
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-EditorImage.propTypes = {
-  pfad: PropTypes.string,
-  onChange: PropTypes.func,
-  editor_type: PropTypes.string,
-};
-
-EditorImage.defaultProps = {
-  pfad: '',
-  onChange: null,
-  editor_type: '',
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js b/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
deleted file mode 100644
index d3c05b6c5..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorRichText.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import QuillEditor from '../../components/QuillEditor';
-
-export default class EditorRichText extends Component {
-  handleChange(e) {
-    this.props.onChange('quill', e);
-  }
-  render() {
-    return (
-      <div style={{ backgroundColor: 'white' }}>
-        <QuillEditor
-          value={this.props.quill}
-          onChange={e => this.handleChange(e)}
-          extraToolbarOptions={[['link'], [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]]}
-        />
-      </div>
-    );
-  }
-}
-
-EditorRichText.propTypes = {
-  quill: PropTypes.object,
-  onChange: PropTypes.func,
-};
-
-EditorRichText.defaultProps = {
-  quill: null,
-  onChange: null,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js b/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
deleted file mode 100644
index 1af6593d7..000000000
--- a/app/assets/javascripts/libHome/RepoHowTo/EditorStelle.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col } from 'react-bootstrap';
-import RepoHowToDragSource from '../RepoHowToDragSource';
-import RepoHowToDropTarget from '../RepoHowToDropTarget';
-import EditorRichText from '../RepoHowTo/EditorRichText';
-import EditorImage from '../RepoHowTo/EditorImage';
-import { FaBtn } from './EditorBtn';
-
-export default class EditorStelle extends Component {
-  handleChange(t, e) {
-    this.props.onChange(t, e, this.props.sid);
-  }
-
-  renderComponent() {
-    let label = '';
-    let component = <div />;
-    switch (this.props.stelle.art) {
-      case 'txt':
-        label = (<div className="editor-stelle">Text Section</div>);
-        component =
-          (<EditorRichText
-            quill={this.props.stelle.quill}
-            onChange={(t, e) => this.handleChange(t, e)}
-            sid={this.props.sid}
-            editor_type={this.props.editor_type}
-          />);
-        break;
-      case 'img':
-        label = (<div className="editor-stelle">Image Section</div>);
-        component =
-          (<EditorImage
-            pfad={this.props.stelle.pfad}
-            onChange={(t, e) => this.handleChange(t, e)}
-            sid={this.props.sid}
-            editor_type={this.props.editor_type}
-          />);
-        break;
-      default:
-    }
-
-    return (
-      <div>
-        {label}
-        {component}
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12} sm={12}>
-          <RepoHowToDropTarget
-            sid={this.props.sid}
-            stelle={this.props.stelle}
-            onDrop={this.props.onDrop}
-          />
-        </Col>
-        <Col md={12} sm={12}>
-          <div className="pull-right">
-            <FaBtn tip="remove this section" txt="" fa="fa fa-trash-o" bsStyle="danger" bsSize="xsmall" onClick={() => this.props.onRemove(this.props.sid)} />
-          </div>
-          <RepoHowToDragSource sid={this.props.sid} stelle={this.props.stelle} />
-          {this.renderComponent()}
-        </Col>
-      </Row>
-    );
-  }
-}
-
-EditorStelle.propTypes = {
-  sid: PropTypes.number.isRequired,
-  stelle: PropTypes.shape({
-    art: PropTypes.string,
-    quill: PropTypes.object,
-    pfad: PropTypes.string,
-  }).isRequired,
-  onDrop: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  editor_type: PropTypes.string.isRequired,
-};
-
diff --git a/app/assets/javascripts/libHome/RepoHowToDragSource.js b/app/assets/javascripts/libHome/RepoHowToDragSource.js
deleted file mode 100644
index 0873b66a2..000000000
--- a/app/assets/javascripts/libHome/RepoHowToDragSource.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const listSource = {
-  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
-
-export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
-
-RepoHowToDragSource.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowToDropTarget.js b/app/assets/javascripts/libHome/RepoHowToDropTarget.js
deleted file mode 100644
index 09efb95a6..000000000
--- a/app/assets/javascripts/libHome/RepoHowToDropTarget.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const stelleTarget = {
-  drop(targetProps, monitor) {
-    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
-    const sourceProps = monitor.getItem();
-    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
-    if (targetTag.sid !== sourceTag.sid) {
-      targetProps.onDrop({ sourceTag, targetTag });
-    }
-  }
-};
-
-const stelleDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-
-class RepoHowToDropTarget extends Component {
-  render() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
-  }
-}
-
-export default DropTarget(
-  DragDropItemTypes.HOWTO,
-  stelleTarget, stelleDropCollect
-)(RepoHowToDropTarget);
-
-RepoHowToDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/assets/javascripts/libHome/RepoHowToEditor.js b/app/assets/javascripts/libHome/RepoHowToEditor.js
deleted file mode 100644
index 7feca87b5..000000000
--- a/app/assets/javascripts/libHome/RepoHowToEditor.js
+++ /dev/null
@@ -1,435 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoHowToEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { howto } = this.state;
-    howto.article.push(stelle({ art: e }));
-    this.setState(howto);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { howto } = this.state;
-    const { article } = howto;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    howto.article = article;
-    this.setState(howto);
-  }
-
-  onStelleRemove(e) {
-    const { howto } = this.state;
-    howto.article.splice(e, 1);
-    this.setState(howto);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { howto } = this.state;
-    switch (art) {
-      case 'quill':
-        howto.article[sid].quill = e;
-        this.setState(howto);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.howto && state.howto.key) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, howto: { title: '', content: {}, article: [] }
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { howto } = this.state;
-    switch (type) {
-      case 'title':
-        howto.title = event.currentTarget.value;
-        break;
-      case 'content':
-        howto.content = event;
-        break;
-      case 'published_at':
-        howto.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        howto.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ howto });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { howto } = this.state;
-    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      howto.published_at = DateFormatDMYTime(howto.published_at);
-    }
-    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      howto.firstParagraph = extractIntro(howto.article);
-      ArticleFetcher.createOrUpdateHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              howto: { title: '', content: {}, article: [] },
-              message: { type: 'success', content: 'Send to How-To successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { howto } = this.state;
-      ArticleFetcher.deleteHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { howto } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'howto')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          howto.article[sid].pfad = result.pfad_image;
-          this.setState(howto);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { howto } = this.state;
-    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>How-To Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            {
-              imageUrl === '' ?
-                <div style={{ textAlign: 'center' }}>
-                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-                </div>
-              :
-                <img
-                  src={imageUrl}
-                  style={{
-                    display: 'block',
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                  }}
-                  alt=""
-                />
-            }
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { howto } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'howto')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            howto.cover_image = result.cover_image;
-            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      howto,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
-    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
-    const stelles = howto.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="howto"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={howto}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>How-To Editor</b></h2>
-              <p>
-                Give Chemotion readers some advice
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={howto.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoHowToReader.js b/app/assets/javascripts/libHome/RepoHowToReader.js
deleted file mode 100644
index 4728c4c69..000000000
--- a/app/assets/javascripts/libHome/RepoHowToReader.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoHowToReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howto) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    } else {
-      return (
-        <div style={{ textAlign: 'center', height: 'auto' }}>
-          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-        </div>
-      );
-    }
-
-    return (
-      <span>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { howto } = this.state;
-    return (
-      <Row className="howto_page">
-        <Col md={2} />
-        <Col md={8} sm={12}>
-          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-            <Panel.Heading>
-              <Row>
-                <Col md={6} sm={12}>
-                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
-                  <div className="news_author">
-                    <i className="fa fa-user-circle" aria-hidden="true" />
-                    &nbsp;{howto.creator_name}
-                    <p />
-                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
-                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
-                  </div>
-                </Col>
-                <Col md={6} sm={12}>
-                  {this.coverImage()}
-                </Col>
-                <Col md={12} sm={12}>
-                  <div style={{ position: 'relative', marginTop: '10px' }}>
-                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
-                  </div>
-                </Col>
-              </Row>
-              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
-            </Panel.Heading>
-            <Panel.Body>
-              <Col lg={1} md={2}><div /></Col>
-              <Col lg={10} md={8} sm={12}>
-                <div className="news_quillviewer">
-                  {
-                    howto.article ?
-                    howto.article.map((s) => {
-                      if (s.art === 'txt') {
-                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                      }
-                      if (s.art === 'img') {
-                        return (
-                          <div key={uuid.v4()}>
-                            <img src={`/howto/${s.pfad}`} alt="" />
-                            <br />
-                          </div>
-                        );
-                      }
-                    }) : <div />
-                  }
-                </div>
-              </Col>
-              <Col lg={1} md={2}><div /></Col>
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={2} />
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsEditor.js b/app/assets/javascripts/libHome/RepoNewsEditor.js
deleted file mode 100644
index 99218a3f8..000000000
--- a/app/assets/javascripts/libHome/RepoNewsEditor.js
+++ /dev/null
@@ -1,427 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoNewsEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { news } = this.state;
-    news.article.push(stelle({ art: e }));
-    this.setState(news);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { news } = this.state;
-    const { article } = news;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    news.article = article;
-    this.setState(news);
-  }
-
-  onStelleRemove(e) {
-    const { news } = this.state;
-    news.article.splice(e, 1);
-    this.setState(news);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { news } = this.state;
-    switch (art) {
-      case 'quill':
-        news.article[sid].quill = e;
-        this.setState(news);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.news && state.news.key) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, news: NewsroomTemplate
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { news } = this.state;
-    switch (type) {
-      case 'title':
-        news.title = event.currentTarget.value;
-        break;
-      case 'content':
-        news.content = event;
-        break;
-      case 'published_at':
-        news.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        news.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ news });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { news } = this.state;
-    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      news.published_at = DateFormatDMYTime(news.published_at);
-    }
-    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      news.firstParagraph = extractIntro(news.article);
-      ArticleFetcher.createOrUpdate(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              news: NewsroomTemplate,
-              message: { type: 'success', content: 'Send to Newsroom successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { news } = this.state;
-      ArticleFetcher.delete(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { news } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'newsroom')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          news.article[sid].pfad = result.pfad_image;
-          this.setState(news);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { news } = this.state;
-    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>News Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            <img
-              src={imageUrl}
-              style={{
-                display: 'block',
-                maxHeight: '100%',
-                maxWidth: '100%',
-              }}
-              alt=""
-            />
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { news } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'newsroom')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            news.cover_image = result.cover_image;
-            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      news,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
-    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
-
-    const stelles = news.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="newsroom"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={news}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>Newsroom Editor</b></h2>
-              <p>
-                Chemotion NEWS
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={news.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsReader.js b/app/assets/javascripts/libHome/RepoNewsReader.js
deleted file mode 100644
index 0e83e02d7..000000000
--- a/app/assets/javascripts/libHome/RepoNewsReader.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoNewsReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.news) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-    return (
-      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { news } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
-        <Col md={12} >
-          <Col md={2} />
-          <Col md={8} sm={12}>
-            <div className="chemotion_news">
-              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
-              &nbsp;Chemotion&nbsp;News
-            </div>
-          </Col>
-          <Col md={2} />
-        </Col>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-                <Panel.Heading>
-                  <Row>
-                    <Col md={6} sm={12}>
-                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
-                      <div className="news_author">
-                        <i className="fa fa-user-circle" aria-hidden="true" />
-                        &nbsp;{news.creator_name}
-                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
-                      </div>
-                    </Col>
-                    <Col md={6} sm={12}>
-                      {this.coverImage()}
-                    </Col>
-                  </Row>
-                  <br />
-                  <div className="heading_separator" />
-                </Panel.Heading>
-                <Panel.Body>
-                  <Col lg={1} md={2}><div /></Col>
-                  <Col lg={10} md={8} sm={12}>
-                    <div className="news_quillviewer">
-                      {
-                        news.article ?
-                          news.article.map((s) => {
-                            if (s.art === 'txt') {
-                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                            }
-                            if (s.art === 'img') {
-                              return (
-                                <div key={uuid.v4()}>
-                                  <img src={`/newsroom/${s.pfad}`} alt="" />
-                                  <br />
-                                </div>
-                              );
-                            }
-                          }) : <div />
-                      }
-                    </div>
-                  </Col>
-                  <Col lg={1} md={2}><div /></Col>
-                </Panel.Body>
-              </Panel>
-            </Col>
-            <Col md={2} />
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoNewsroom.js b/app/assets/javascripts/libHome/RepoNewsroom.js
deleted file mode 100644
index 19e9f6020..000000000
--- a/app/assets/javascripts/libHome/RepoNewsroom.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy, slice } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div className="readedit">
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div className="readedit">
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (article) => {
-  let imageUrl = '/images/chemnews.png';
-  if (typeof (article) !== 'undefined' && article
-   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
-    imageUrl = `/newsroom/${article.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      <img
-        src={imageUrl}
-        style={{
-          display: 'block',
-          width: '100%',
-          height: 'auto',
-        }}
-        alt=""
-      />
-    </div>
-  );
-};
-
-export default class RepoNewsroom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      articles: PublicStore.getState().articles || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.articles();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.articles) {
-      this.setState(prevState => ({
-        ...prevState, articles: state.articles
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initial()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_article_editor
-        });
-      });
-  }
-
-  render() {
-    let { articles } = this.state;
-    const { isEditor } = this.state;
-    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
-    articles = orderBy(
-      articles,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return articles.length > 0 ? (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <LatestNews article={articles[0]} isEditor={isEditor} />
-            </Col>
-            <Col md={2} />
-          </Row>
-          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
-  }
-}
-
-const LatestNews = ({ article, isEditor }) => {
-  return (
-    <div className="news_latest_block">
-      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
-      <Col md={4} sm={12}>{mainImage(article)}</Col>
-      <Col md={8} sm={12}>
-        <Col md={12} sm={12}>
-          <span className="news_title">{article.title}</span>
-          <div className="news_content">
-            <p />
-            {article.firstParagraph}
-            <p />
-          </div>
-          <div>
-            {renderEditRead(article, isEditor)}
-          </div>
-        </Col>
-        <Col md={12} sm={12}>
-          <div className="heading_separator" />
-          <div className="news_author">
-            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
-            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
-          </div>
-        </Col>
-      </Col>
-    </div>
-  );
-};
-
-const NewsList = ({ articles, isEditor }) => {
-  return articles.length > 0 ? (
-    <Row>
-      <Col md={2} />
-      <Col md={8} sm={12}>
-        <Row>
-          <div className="news_time_box">
-            {
-              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
-            }
-          </div>
-        </Row>
-      </Col>
-      <Col md={2} />
-    </Row>
-  ) : <div />;
-};
-
-const NewsTBox = ({ article, isEditor }) => {
-  return (
-    <ul>
-      <li>
-        <span />
-        <div className="title">{article.title}</div>
-        <div className="content">{article.firstParagraph}</div>
-
-        <div className="author">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
-          {renderEditRead(article, isEditor)}
-        </div>
-        <div className="created_at">
-          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
-        </div>
-      </li>
-    </ul>
-  );
-};
diff --git a/app/assets/javascripts/libHome/RepoPubl.js b/app/assets/javascripts/libHome/RepoPubl.js
deleted file mode 100644
index 85ba92d52..000000000
--- a/app/assets/javascripts/libHome/RepoPubl.js
+++ /dev/null
@@ -1,758 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import {
-  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
-  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
-  FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
-  Tabs, Tab, Popover
-} from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import UIActions from '../components/actions/UIActions';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import PubchemLabels from '../components/PubchemLabels';
-import RepoElementDetails from './RepoElementDetails';
-import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
-import AutoCompleteInput from '../components/search/AutoCompleteInput';
-import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
-import Formula from '../components/common/Formula';
-
-const xvialTag = (element, hasXvial = null) => {
-  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
-  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
-  if (element.xvial_com === -1 || element.xvial_com === -2) {
-    hasXCom = hasX;
-  } else {
-    hasXCom = (element.xvial_com > 0);
-  }
-  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
-};
-
-const svgTag = (path, klassName, isPubElement) => {
-  const popHover = (
-    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
-      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
-    </Popover>
-  );
-  return isPubElement ? (
-    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={klassName} key={path} /></div>
-    </OverlayTrigger>
-  ) : <SVG src={path} className={klassName} key={path} />;
-};
-
-const pubchemTag = (molecule) => {
-  if (molecule && molecule.tag &&
-    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
-    return {
-      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
-    };
-  }
-  return false;
-};
-
-const renderReaction = (element, currentElement, isPubElement) => {
-  const listClass = (currentElement !== null && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={`list-reaction-${element.type}-${element.id}`}
-      className={listClass}
-      onClick={() => PublicActions.displayReaction(element.id)}
-    >
-      <td style={{ position: 'relative' }}>
-        <div>
-          {svgTag(element.svgPath, 'reaction', isPubElement)}
-        </div>
-      </td>
-      <td>
-        {xvialTag(element)}
-      </td>
-    </tr>
-  );
-};
-
-const hints = {
-  reaction: {
-    title: 'Reactions',
-    content: 'Reaction entries contain information on the reaction details, the reagents, reactants and products of a reaction and a description of the protocols. Successful reactions are proven by the characterization of the obtained target compounds.'
-  },
-  sample: {
-    title: 'Samples',
-    content: 'Sample entries contain information and properties of the provided sample as well as the characterization of the sample by analytical measurements.'
-  },
-  scheme: {
-    title: 'Scheme-only reactions',
-    content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
-  }
-};
-
-const overTip = tab => (
-  <Tooltip id="t_tip">
-    <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;{hints[tab].content}
-  </Tooltip>
-);
-
-const TabTip = props => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={overTip(props.tab)}
-  >
-    <div>{hints[props.tab].title}</div>
-  </OverlayTrigger>
-);
-
-export default class RepoPubl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // ...PublicStore.getState(),
-      page: 1,
-      perPage: 10,
-      showStructureEditor: false,
-      isSearch: false,
-      defaultSearchValue: null,
-      selectType: 'all',
-      inputDisabled: false,
-      queryMolfile: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      listType: 'reaction',
-      advFlag: false,
-      advType: 'Authors',
-      advValue: [],
-      selectUsers: [],
-      key: uuid.v4(),
-      showSearch: false
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.changeSort = this.changeSort.bind(this);
-    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
-    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
-    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
-    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
-    this.advSearchClick = this.advSearchClick.bind(this);
-    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
-    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleShowSearch = this.handleShowSearch.bind(this);
-  }
-
-  componentDidMount() {
-    PublicActions.selectPublicCollection.defer();
-    PublicStore.listen(this.onChange);
-    PublicActions.getReactions.defer();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleSearchTypeChange(e) {
-    this.setState({ searchType: e.target && e.target.value });
-  }
-
-  handleStructureEditorCancel() {
-    this.setState({ isSearch: false });
-    this.hideStructureEditor();
-  }
-
-  showStructureEditor() {
-    this.setState({ showStructureEditor: true });
-  }
-
-  hideStructureEditor() {
-    this.setState({ showStructureEditor: false });
-  }
-
-  showAdvancedSearch() {
-    this.setState({ advFlag: true });
-  }
-
-  handleSelectAdvType(val) {
-    if (val) { this.setState({ advType: val, advValue: null }); }
-  }
-
-  onPerPageChange(e) {
-    this.setState({ perPage: e.target.value }, () => this.getList());
-  }
-
-  getList(ps = {}) {
-    const {
-      advFlag, advType, advValue,
-      isSearch,
-      selectType, selection,
-      page, perPage,
-    } = this.state;
-    let params = {
-      advFlag,
-      advType,
-      advValue,
-      elementType: selectType,
-      page,
-      perPage,
-      selection,
-      ...ps
-    };
-    if (isSearch) {
-      switch (this.state.listType) {
-        case 'reaction':
-          PublicActions.getSearchReactions(params);
-          break;
-        case 'sample':
-          PublicActions.getSearchMolecules(params);
-          break;
-        case 'scheme':
-          params = { ...params, collectionId: 'schemeOnly' };
-          PublicActions.getSearchReactions(params);
-          break;
-        default:
-      }
-      return;
-    }
-    switch (this.state.listType) {
-      case 'reaction':
-        params = { ...params, schemeOnly: false };
-        PublicActions.getReactions(params);
-        break;
-      case 'sample':
-        PublicActions.getMolecules(params);
-        break;
-      case 'scheme':
-        params = { ...params, schemeOnly: true };
-        PublicActions.getReactions(params);
-        break;
-      default:
-        PublicActions.getReactions(params);
-    }
-    UIActions.clearSearchSelection();
-  }
-
-  handleClearSearchSelection() {
-    this.setState({
-      defaultSearchValue: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      queryMolfile: null,
-      isSearch: false,
-      key: uuid.v4(),
-      page: 1
-    }, () => this.getList());
-  }
-
-  handleElementSelection(event) {
-    this.setState({ selectType: event.toLowerCase() });
-  }
-
-  handleShowSearch() {
-    const { showSearch, advFlag } = this.state;
-    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
-  }
-
-  closeAdvancedSearch() {
-    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
-  }
-
-
-  loadAdvValuesByName(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  changeSort(e) {
-    this.setState({
-      // isSearch: false,
-      // defaultSearchValue: null,
-      page: 1,
-      listType: e
-    }, () => this.getList());
-  }
-
-  renderMolecule(molecule, isPubElement) {
-    const {
-      advFlag, advType, advValue, currentElement
-    } = this.state;
-    const pubchemInfo = pubchemTag(molecule);
-    const svgPathSample = molecule.sample_svg_file
-      ? `/images/samples/${molecule.sample_svg_file}`
-      : `/images/molecules/${molecule.molecule_svg_file}`;
-    const listClass = (currentElement !== null && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
-    return (
-      <tr
-        key={molecule.id}
-        className={listClass}
-        onClick={() => PublicActions.displayMolecule(molecule.id, advFlag, advType, advValue)}
-      >
-        <td
-          colSpan="2"
-          style={{ position: 'relative' }}
-        >
-          <div style={{ float: 'left' }}>
-            {svgTag(svgPathSample, 'molecule', isPubElement)}
-          </div>
-          <div style={{ paddingLeft: 5, wordWrap: 'break-word' }}>
-            <h4> <Formula formula={molecule.sum_formular} /> </h4>
-            <h4>
-              {molecule.iupac_name}
-              <span className="repo-pub-list-icons">
-                {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-                {xvialTag(molecule)}
-              </span>
-            </h4>
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
-  renderMenuItems() {
-    const elements = [
-      'All', 'Samples', 'Reactions'
-    ];
-
-    const menu = elements.map(element => (
-      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
-        {element}
-      </MenuItem>
-    ));
-
-    return menu;
-  }
-
-
-  handleTanimotoChange(e) {
-    const val = e.target && e.target.value;
-    if (!isNaN(val - val)) {
-      this.setState({ tanimotoThreshold: val });
-    }
-  }
-
-  handleSelectionChange(selection) {
-    this.setState({
-      isSearch: true,
-      selection,
-      page: 1
-    }, () => this.getList());
-  }
-
-  structureSearch(molfile) {
-    const { searchType, tanimotoThreshold } = this.state;
-
-    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
-    const selection = {
-      molfile,
-      search_type: searchType,
-      tanimoto_threshold: tanimoto,
-      search_by_method: 'structure',
-      structure_search: true
-    };
-
-    this.setState(
-      {
-        isSearch: true,
-        selection,
-        page: 1,
-        defaultSearchValue: 'structure',
-        queryMolfile: molfile
-      },
-      () => this.getList()
-    );
-  }
-
-  handleStructureEditorSave(molfile) {
-    this.hideStructureEditor();
-    if (molfile) {
-      const molfileLines = molfile.match(/[^\r\n]+/g);
-      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
-        this.structureSearch(molfile);
-      } else {
-        // TODO: clear search?
-      }
-    }
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  onPaginationSelect(eventKey) {
-    const { pages } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      this.setState({ page: eventKey }, () => this.getList());
-    }
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-
-  renderSwitch() {
-    const { listType } = this.state;
-    return (
-      <Tabs
-        activeKey={listType}
-        onSelect={this.changeSort}
-        id="element-list-type"
-      >
-        <Tab eventKey="reaction" title={<TabTip tab="reaction" />} />
-        <Tab eventKey="sample" title={<TabTip tab="sample" />} />
-        <Tab eventKey="scheme" title={<TabTip tab="scheme" />} />
-      </Tabs>
-    );
-  }
-
-  renderSelectValues() {
-    const { advValue } = this.state;
-    return (
-      <Select.Async
-        multi
-        isLoading
-        backspaceRemoves
-        value={advValue}
-        valueKey="value"
-        labelKey="label"
-        loadOptions={this.loadAdvValuesByName}
-        onChange={this.handleSelectAdvValue}
-      />
-    );
-  }
-
-  handleSelectAdvValue(val) {
-    if (val) {
-      this.setState({ advValue: val });
-    }
-  }
-
-  advSearchClick() {
-    this.setState({ page: 1 }, () => this.getList());
-  }
-
-  renderAdvancedSearch() {
-    const { advFlag, advType, advValue } = this.state;
-    if (advFlag === true) {
-      this.listOptions = [
-        {
-          value: 'Authors',
-          label: 'by authors'
-        },
-        {
-          value: 'Ontologies',
-          label: 'by analysis type'
-        }
-      ];
-      return (
-        <div className="home-adv-search">
-          <div>
-            <Select
-              simpleValue
-              searchable={false}
-              options={this.listOptions}
-              placeholder="Select search field"
-              clearable={false}
-              valueKey="value"
-              labelKey="label"
-              onChange={this.handleSelectAdvType}
-              defaultValue="Authors"
-              value={advType}
-              className="o-author"
-            />
-          </div>
-          <div>
-            <Select.Async
-              multi
-              isLoading
-              backspaceRemoves
-              value={advValue}
-              valueKey="value"
-              labelKey="label"
-              loadOptions={this.loadAdvValuesByName}
-              onChange={this.handleSelectAdvValue}
-              className="o-name"
-            />
-          </div>
-          <div className="btns-grp">
-            <ButtonGroup>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
-                <Button onClick={this.advSearchClick}>
-                  <i className="fa fa-search" />
-                </Button>
-              </OverlayTrigger>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
-                <Button onClick={this.closeAdvancedSearch}>
-                  <i className="fa fa-times" />
-                </Button>
-              </OverlayTrigger>
-            </ButtonGroup>
-          </div>
-        </div>
-      );
-    }
-    return (<div />);
-  }
-
-  renderSearch() {
-    const { isSearch, defaultSearchValue } = this.state;
-    const customClass = '.btn-unified';
-
-    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
-    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
-
-    const buttonAfter = (
-      <ButtonGroup className="home-search">
-        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
-          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
-            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
-          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-
-    const submitAddons = (
-      <Grid>
-        <Row>
-          <Col sm={6} md={4}>
-            <Form inline>
-              <Radio
-                ref={(input) => { this.searchSimilarRadio = input; }}
-                value="similar"
-                checked={this.state.searchType === 'similar'}
-                onChange={e => this.handleSearchTypeChange(e)}
-              >
-                &nbsp; Similarity Search &nbsp;
-              </Radio>
-              &nbsp;&nbsp;
-              <FormControl
-                style={{ width: '40%' }}
-                type="text"
-                value={this.state.tanimotoThreshold}
-                ref={(input) => { this.searchTanimotoInput = input; }}
-                onChange={e => this.handleTanimotoChange(e)}
-              />
-            </Form>
-          </Col>
-          <Col sm={4} md={2}>
-            <Radio
-              ref={(input) => { this.searchSubstructureRadio = input; }}
-              value="sub"
-              checked={this.state.searchType === 'sub'}
-              onChange={e => this.handleSearchTypeChange(e)}
-            >
-              Substructure Search
-            </Radio>
-          </Col>
-        </Row>
-      </Grid>
-    );
-
-    const inputAttributes = {
-      placeholder: 'IUPAC, InChI, SMILES, ...',
-      style: { minWidth: 168, maxWidth: 268 }
-    };
-
-    const suggestionsAttributes = {
-      style: {
-        marginTop: 15,
-        width: 398,
-        maxHeight: 400
-      }
-    };
-
-    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
-
-    const innerDropdown = (
-      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
-        <DropdownButton
-          style={{ borderRadius: 'unset' }}
-          id="search-inner-dropdown"
-          title={this.state.selectType === 'all' ? 'All' :
-          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
-        >
-          {this.renderMenuItems()}
-        </DropdownButton>
-      </OverlayTrigger>
-    );
-
-    return (
-      <div className="chemotion-search">
-        <div className="search-structure-draw">
-          <StructureEditorModal
-            showModal={this.state.showStructureEditor}
-            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
-            onCancel={this.handleStructureEditorCancel}
-            molfile={this.state.queryMolfile}
-            submitBtnText="Search"
-            submitAddons={submitAddons}
-          />
-        </div>
-        {
-          this.state.showSearch ?
-          (
-            <span>
-              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
-              </Button>
-              <div className="search-autocomplete">
-                <AutoCompleteInput
-                  key={this.state.key}
-                  inputAttributes={inputAttributes}
-                  inputDisabled={isSearch}
-                  defaultSearchValue={defaultSearchValue}
-                  suggestionsAttributes={suggestionsAttributes}
-                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
-                    this.state.selectType.toLowerCase(), input, 'public', false)}
-                  ref={(input) => { this.autoComplete = input; }}
-                  onSelectionChange={selection => this.handleSelectionChange(selection)}
-                  buttonBefore={innerDropdown}
-                  buttonAfter={buttonAfter}
-                />
-              </div>
-            </span>
-          ) :
-          (
-            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
-            </Button>
-          )
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      molecules, listType, reactions, currentElement, showSearch
-    } = this.state;
-
-    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
-      this.state.currentElement.publication.published_at) || (
-      this.state.currentElement && this.state.currentElement.published_samples
-      && this.state.currentElement.published_samples.length > 0 &&
-      this.state.currentElement.published_samples[0].published_at
-    )));
-
-    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
-
-    const elementList = () => {
-      switch (listType) {
-        case 'reaction':
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-        case 'sample':
-          return (molecules || []).map(m => this.renderMolecule(m, isPubElement));
-        case 'scheme':
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-        default:
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-      }
-    };
-
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={isPubElement === true ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
-            <Navbar.Form pullLeft>
-              {this.renderSearch()}
-            </Navbar.Form>
-            <Navbar.Form pullLeft>
-              {this.renderAdvancedSearch()}
-            </Navbar.Form>
-            <Navbar.Form style={{ marginBottom: 'unset' }} pullRight>
-              {this.renderSwitch()}
-            </Navbar.Form>
-          </Navbar>
-
-          <div className={listClass} style={{ backgroundColor: '#f5f5f5' }} >
-            <Table className="sample-entries">
-              <tbody>
-                {elementList()}
-              </tbody>
-            </Table>
-          </div>
-          <div className="list-container-bottom">
-            <Row>
-              <Col sm={8}>{this.pagination()}</Col>
-              <Col sm={4}>{this.perPageInput()}</Col>
-            </Row>
-          </div>
-        </Col>
-        <Col
-          md={isPubElement === true}
-          // style={this.state.currentElement ? {} : { display: 'none' }}
-        >
-          <div className="public-element">
-            <RepoElementDetails />
-          </div>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoReactionDetails.js b/app/assets/javascripts/libHome/RepoReactionDetails.js
deleted file mode 100644
index 6e5aec189..000000000
--- a/app/assets/javascripts/libHome/RepoReactionDetails.js
+++ /dev/null
@@ -1,544 +0,0 @@
-import React, { Component } from 'react';
-import {
-  Panel,
-  Row,
-  Col,
-  Jumbotron,
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { head, filter } from 'lodash';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AuthorList,
-  AuthorTitle,
-  AffiliationList,
-  CalcDuration,
-  ChemotionId,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  DateInfo,
-  Doi,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalysesPanel,
-  IconLicense,
-  IconToMyDB,
-  AnalysesTypeJoinLabel,
-  SchemeWord,
-  resizableSvg
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
-import QuillViewer from '../components/QuillViewer';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
-import Sample from '../components/models/Sample';
-
-export default class RepoReactionDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showScheme: true,
-      showRinchi: false,
-      showProp: true,
-      showTlc: true,
-      showSA: true,
-      showRA: {},
-      showReviewModal: false,
-      btnAction: '',
-      showCommentModal: false,
-      commentField: '',
-      originInfo: ''
-    };
-
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.toggleSA = this.toggleSA.bind(this);
-    this.toggleRA = this.toggleRA.bind(this);
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  toggleSA() {
-    const { showSA } = this.state;
-    this.setState({ showSA: !showSA });
-  }
-
-  toggleRA(idx = -1) {
-    const { showRA } = this.state;
-    if (idx in showRA && showRA[idx] === false) {
-      showRA[idx] = true;
-    } else {
-      showRA[idx] = false;
-    }
-    this.setState({ showRA });
-  }
-
-  handleToggle(type) {
-    switch (type) {
-      case 'Scheme':
-        this.toggleScheme();
-        break;
-      case 'Rinchi':
-        this.toggleRinchi();
-        break;
-      case 'Prop':
-        this.toggleProp();
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
-  }
-
-  handleSubmitReview(elementId, comments, comment, action) {
-    LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'reaction', comments, comment, action);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-
-    PublicActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  updateRepoXvial() {
-    PublicActions.displayReaction(this.props.reaction.id);
-    PublicActions.refreshPubElements('Reactions');
-  }
-
-  reactionInfo(reaction) {
-    const {
-      showScheme, showRinchi, showProp, showTlc
-    } = this.state;
-    const {
-      canComment,
-      reviewLevel,
-      history
-    } = this.props;
-
-    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-    const content = reaction.description;
-    const additionInfo = reaction.observation;
-
-    const descContent = (content && content.ops && content.ops.length > 0
-      && content.ops[0].insert) ? content.ops[0].insert.trim() : '';
-    let descQV = (
-      <span><b>Description:</b><QuillViewer value={content} preview />
-      </span>);
-    if (descContent === '') descQV = '';
-
-    const addinfoContent = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 &&
-      additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim() : '';
-    let addQV = (
-      <span><b>Additional information for publication and purification details:</b>
-        <QuillViewer value={additionInfo} preview />
-      </span>);
-    if (addinfoContent === '') addQV = '';
-
-    const temperature = reaction.temperature ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : '';
-    const duration = CalcDuration(reaction);
-    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
-    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${reaction.rf_value || ''}]; TLC-Description: [${reaction.tlc_description || ''}]`;
-
-    const bodyAttrs = {
-      style: {
-        fontSize: '90%',
-        paddingBottom: 'unset'
-      }
-    };
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-    if (schemeOnly) {
-      if (canComment) {
-        return (
-          <RepoReactionSchemeInfo
-            reaction={reaction}
-            svgPath={svgPath}
-            showScheme={showScheme}
-            showRinchi={showRinchi}
-            showProp={showProp}
-            bodyAttrs={bodyAttrs}
-            onToggle={this.handleToggle}
-            reviewLevel={reviewLevel}
-            history={history}
-            onComment={this.handleCommentBtn}
-            propInfo={properties}
-            canComment={canComment}
-          />
-        );
-      }
-      return (
-        <RepoReactionSchemeInfo
-          reaction={reaction}
-          svgPath={svgPath}
-          showScheme={showScheme}
-          showRinchi={showRinchi}
-          showProp={showProp}
-          bodyAttrs={bodyAttrs}
-          onToggle={this.handleToggle}
-          canComment={canComment}
-        />
-      );
-    }
-    return (
-      <Panel style={{ marginBottom: '4px' }}>
-        <Panel.Body style={{ paddingBottom: '1px' }}>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              {resizableSvg(svgPath)}
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={this.handleCommentBtn} />
-              <ReactionTable
-                reaction={reaction}
-                toggle={this.toggleScheme}
-                show={showScheme}
-                isPublic
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <div className="desc small-p">
-                <CommentBtn {...this.props} field="Description" orgInfo={descContent} onShow={this.handleCommentBtn} />
-                {descQV}
-              </div>
-              <div className="desc small-p">
-                <CommentBtn {...this.props} field="Additional information" orgInfo={addinfoContent} onShow={this.handleCommentBtn} />
-                {addQV}
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <ReactionRinChiKey
-                reaction={reaction}
-                toggle={this.toggleRinchi}
-                show={showRinchi}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="Properties" orgInfo={properties} onShow={this.handleCommentBtn} />
-              <ReactionProperties
-                reaction={reaction}
-                toggle={this.toggleProp}
-                show={showProp}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn {...this.props} field="TLC-Control" orgInfo={tlc} onShow={this.handleCommentBtn} />
-              <ReactionTlc
-                reaction={reaction}
-                toggle={this.toggleTlc}
-                show={showTlc}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-
-  renderAnalysisView(container, type, product = null, idx = -1, isLogin = false, isReviewer = false) {
-    if (typeof (container) === 'undefined' || !container) {
-      return <span />;
-    }
-
-    const analyses = ArrayUtils.sortArrByIndex(head(filter(container.children, o => o.container_type === 'analyses')).children);
-    const show = this.state.showRA[idx];
-    if (typeof (analyses) === 'undefined' || !analyses || analyses.length === 0) {
-      return <div />;
-    }
-    const pdInfos = (this.props.reaction.infos && this.props.reaction.infos.pd_infos && this.props.reaction.infos.pd_infos[product && product.id]) || '';
-    const productHeader = (typeof (product) !== 'undefined' && product) ? <RenderAnalysisHeader key={`reaction-product-header-${product.id}`} reactionId={this.props.reaction.id} element={product} isPublic={this.props.isPublished} isLogin={isLogin} isReviewer={isReviewer} userInfo={pdInfos} updateRepoXvial={() => this.updateRepoXvial()} xvialCom={product.xvialCom} /> : <span />;
-    const specSample = (type === 'Sample' && typeof (product) !== 'undefined' && product) ? new Sample(product) : null;
-    const analysesView = analyses.map((analysis) => {
-      const kind = analysis.extended_metadata && analysis.extended_metadata.kind && analysis.extended_metadata['kind'].split('|').pop().trim();
-      const anaInfo = (this.props.reaction.infos && this.props.reaction.infos.ana_infos && this.props.reaction.infos.ana_infos[analysis.id]) || '';
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.handleCommentBtn} />
-          <RenderPublishAnalysesPanel
-            key={`${type}_${analysis.id}`}
-            userInfo={anaInfo}
-            analysis={analysis}
-            type="Container"
-            pageType="reactions"
-            pageId={this.props.reaction.id}
-            isPublic={this.props.isPublished}
-            isLogin={isLogin}
-            isReviewer={isReviewer}
-            element={specSample}
-          />
-        </span>
-      );
-    });
-
-    return (
-      <div>
-        <span
-          role="presentation"
-          className="label label-default"
-          style={{
-            backgroundColor: '#777777',
-            color: 'white',
-            fontSize: 'smaller',
-            fontWeight: 'bold',
-            cursor: 'pointer'
-          }}
-          onClick={() => this.toggleRA(idx)}
-        >
-          Analyses &nbsp;
-          <i className={`glyphicon ${show}`} />
-        </span>
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-          {AnalysesTypeJoinLabel(analyses, type)}
-        </span>
-        <Panel style={{ border: 'none' }} id={`collapsible_${type}_analyses`} expanded={show} defaultExpanded onToggle={() => { }}>
-          <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-              {productHeader}
-              {analysesView}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProductAnalysisView(products, isLogin = false, isReviewer = false) {
-    if (typeof (products) === 'undefined' || !products || products.length === 0) {
-      return <span />;
-    }
-    return products.map((product, idx) => (
-      <div key={`product-${product.id}`}>
-        {this.renderAnalysisView(product.container, 'Sample', product, idx, isLogin, isReviewer)}
-      </div>
-    ));
-  }
-
-  render() {
-    const {
-      reaction,
-      isPublished,
-      canComment,
-      reviewLevel,
-      isSubmitter,
-      history,
-      canClose,
-    } = this.props;
-    let { buttons } = this.props;
-
-    if (typeof (reaction) === 'undefined' || !reaction) {
-      return <div />;
-    }
-
-    const taggData = (reaction && reaction.publication && reaction.publication.taggable_data) || {};
-    const pubData = (reaction && reaction.publication) || {};
-    const doi = (reaction && reaction.doi) || {};
-
-    const aId = [].concat.apply([], taggData.affiliation_ids);
-    const affiliationMap = {};
-    const { literatures } = reaction;
-    const references = literatures ? literatures.map(lit => (
-      <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
-        <i className={`icon-${lit.element_type.toLowerCase()}`} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
-    const refArray = [];
-    let referencesText = '';
-    if (literatures) {
-      literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
-
-    let aCount = 0;
-    aId.map((e) => {
-      if (!affiliationMap[e]) {
-        aCount += 1;
-        affiliationMap[e] = aCount;
-      }
-    });
-    const license = taggData.license || 'CC BY-SA';
-
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-
-    let showDOI = <Doi type="reaction" id={reaction.id} doi={isPublished ? taggData.doi : doi} isPublished={isPublished} />;
-    if (schemeOnly) {
-      buttons = ['Decline', 'Comments', 'Accept'];
-      showDOI = '';
-    }
-    const idyLogin = typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
-    const idyReview = typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
-    const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
-
-    return (
-      <div style={{ border: 'none' }}>
-        <div >
-          <Jumbotron key={`reaction-${reaction.id}`}>
-            {
-              canComment ?
-                <RepoReviewButtonBar
-                  element={{ id: reaction.id, elementType: 'Reaction' }}
-                  buttons={buttons}
-                  buttonFunc={this.handleReviewBtn}
-                  reviewLevel={reviewLevel}
-                  isSubmitter={isSubmitter}
-                  taggData={taggData}
-                  schemeOnly={schemeOnly}
-                  currComment={(history && history.length > 0 && history.slice(-1).pop()) || {}}
-                /> : ''
-            }
-            {canClose ? <ClosePanel element={reaction} /> : ''}
-            <h4>
-              <IconToMyDB isLogin={idyLogin} id={reaction.id} type="reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;
-              <DateInfo pubData={pubData} tagData={taggData} isPublished={isPublished} />
-              {IconLicense(license, (taggData.author_ids && (taggData.author_ids.length > 1)))}
-              <RepoPublicComment isReviewer={idyReview} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} userInfo={userInfo} />&nbsp;
-              <RepoUserComment isLogin={idyLogin} id={reaction.id} type="Reaction" title={`Reaction, CRR-${pubData.id}`} />
-            </h4>
-            <br />
-            <ContributorInfo contributor={taggData.contributors} showHelp={schemeOnly} />
-            <h5>
-              <b>{AuthorTitle(taggData.author_ids)} </b>
-              <AuthorList creators={taggData.creators} affiliationMap={affiliationMap} />
-            </h5>
-            <AffiliationList
-              affiliations={taggData.affiliations}
-              affiliationMap={affiliationMap}
-            />
-            {showDOI}
-            <ChemotionId id={pubData.id} type="reaction" />
-            <h5>
-              <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={this.handleCommentBtn} />
-              <b>Reference{references.length > 1 ? 's' : null}: </b>
-              <ul style={{ listStyle: 'none' }}>{references}</ul>
-            </h5>
-            <br />
-            <h5>
-              {this.reactionInfo(reaction)}
-            </h5>
-            {schemeOnly ? '' : this.renderAnalysisView(reaction.container, 'Reaction', null, -1, idyLogin, idyReview)}
-            {schemeOnly ? '' : this.renderProductAnalysisView(reaction.products, idyLogin, idyReview)}
-          </Jumbotron>
-        </div>
-        {
-          canComment ? (
-            <div>
-              <RepoCommentModal
-                show={this.state.showCommentModal}
-                elementId={reaction.id}
-                elementType="reaction"
-                field={this.state.commentField}
-                orgInfo={this.state.originInfo}
-                history={this.props.history}
-                reviewLevel={reviewLevel}
-                onUpdate={this.handleSubmitComment}
-                onHide={() => this.setState({ showCommentModal: false })}
-              />
-              <RepoReviewModal
-                show={this.state.showReviewModal}
-                elementId={reaction.id}
-                action={this.state.btnAction}
-                reviewLevel={reviewLevel}
-                history={history}
-                onSubmit={this.handleSubmitReview}
-                onHide={() => this.setState({ showReviewModal: false })}
-              />
-            </div>
-          ) : ''
-        }
-      </div>);
-  }
-}
-
-RepoReactionDetails.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
-  isSubmitter: PropTypes.bool,
-  history: PropTypes.array,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-};
-
-RepoReactionDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  isSubmitter: false,
-  reviewLevel: 0,
-  history: [],
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-};
diff --git a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js b/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
deleted file mode 100644
index 9b3f0c298..000000000
--- a/app/assets/javascripts/libHome/RepoReactionSchemeInfo.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import {
-  Panel,
-  Row,
-  Col
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { CommentBtn, ReactionTable, ReactionRinChiKey, resizableSvg } from './RepoCommon';
-import QuillViewer from '../components/QuillViewer';
-
-const RepoReactionSchemeInfo = (props) => {
-  const content = props.reaction.description;
-  const contentlength = (content && content.ops && content.ops.length > 0
-    && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const descQV = contentlength > 0 ?
-    (<span><b>Description:</b><QuillViewer value={content} /></span>) : null;
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            {resizableSvg(props.svgPath)}
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
-            <ReactionTable
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Scheme')}
-              show={props.showScheme}
-              isPublic
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Rinchi')}
-              show={props.showRinchi}
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-RepoReactionSchemeInfo.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  svgPath: PropTypes.string.isRequired,
-  showScheme: PropTypes.bool.isRequired,
-  showRinchi: PropTypes.bool.isRequired,
-  showProp: PropTypes.bool.isRequired,
-  bodyAttrs: PropTypes.object.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  reviewLevel: PropTypes.number,
-  propInfo: PropTypes.string,
-  history: PropTypes.array,
-  onComment: PropTypes.func,
-  canComment: PropTypes.bool,
-};
-
-RepoReactionSchemeInfo.defaultProps = {
-  history: [],
-  reviewLevel: 0,
-  propInfo: '',
-  onComment: () => {},
-  canComment: false
-};
-
-export default RepoReactionSchemeInfo;
diff --git a/app/assets/javascripts/libHome/RepoReview.js b/app/assets/javascripts/libHome/RepoReview.js
deleted file mode 100644
index 87a0cbe09..000000000
--- a/app/assets/javascripts/libHome/RepoReview.js
+++ /dev/null
@@ -1,372 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
-import Select from 'react-select';
-import RepoReviewDetails from './RepoReviewDetails';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import { IconToMyDB, SvgPath, ElStateLabel, ElSubmitTime, SchemeWord } from './RepoCommon';
-
-const renderElement = (e, currentElement) => {
-  if (e.type === 'Reaction') {
-    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-    const schemeOnly = (e && e.scheme_only === true) || false;
-    return (
-      <tr
-        key={e.id}
-        className={listClass}
-        onClick={() => PublicActions.displayReviewReaction(e.id)}
-      >
-        <td style={{ position: 'relative' }} >
-          <span className="review_element_label">
-            <i className="icon-reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-          </span>
-          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-          <div>
-            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-          </div>
-        </td>
-      </tr>
-    );
-  }
-  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => PublicActions.displayReviewSample(e.id)}
-    >
-      <td style={{ position: 'relative' }}>
-        <span className="review_element_label">
-          <i className="icon-sample" />&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const defaultState = 'pending';
-
-export default class RepoReview extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 10,
-      elements: [],
-      currentElement: null,
-      selectType: 'All',
-      searchType: 'All',
-      searchValue: '',
-      listTypeOptions: [],
-      selectState: defaultState
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleSelectType = this.handleSelectType.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-    this.handleSearchNameInput = this.handleSearchNameInput.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.getElements.defer();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-
-  onPerPageChange(e) {
-    const { page, selectType, selectState, searchType, searchValue } = this.state;
-    const perPage = e.target.value;
-    this.setState({ perPage });
-    PublicActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
-  }
-
-  onPaginationSelect(eventKey) {
-    const { pages, perPage, selectType, selectState, searchType, searchValue } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      PublicActions.getElements(selectType, selectState, searchType, searchValue, eventKey, perPage);
-    }
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-  handleSelectType(val) {
-    const { selectType, selectState, perPage } = this.state;
-    if (val && (val === 'Submitter' || val === 'Embargo')) {
-      RepositoryFetcher.fetchReviewSearchOptions(val, selectType, selectState).then((res) => {
-        const options = res && res.result && res.result
-          .map(u => ({ value: u.key, name: u.name, label: u.label }));
-        this.setState({ listTypeOptions: options });
-        PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    } else {
-      //this.setState({ searchType: val, searchValue: '' });
-      PublicActions.getElements(selectType, selectState, val, '', 1, perPage);
-    }
-  }
-
-  handleSearchNameInput(event) {
-    const { value } = event.target;
-    if (value) {
-      this.setState({ searchValue: value });
-    }
-  }
-
-  handleSelectAdvValue(val) {
-    const { perPage, selectType, selectState, searchType } = this.state;
-    if (val) {
-      this.setState({ page: 1, searchValue: val });
-      PublicActions.getElements(selectType, selectState, searchType, val, 1, perPage);
-    }
-  }
-
-  handleElementSelection(t, event) {
-    const { perPage, searchType, searchValue } = this.state;
-    if (t === 'type') {
-      this.setState({ selectType: event });
-      PublicActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
-    } else if (t === 'state') {
-      this.setState({ selectState: event });
-      PublicActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
-    }
-  }
-
-  handleKeyDown(event) {
-    const { perPage, selectType, selectState, searchType, searchValue } = this.state;
-    switch (event.keyCode) {
-      case 13: // Enter
-        PublicActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  }
-
-  loadValuesByType(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return RepositoryFetcher.fetchReviewSearchValues(this.state.searchType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  renderMenuItems(t, elements) {
-    const menu = elements.map(element => (
-      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
-        {element}
-      </MenuItem>
-    ));
-    return menu;
-  }
-
-  renderSearch() {
-    const { searchType, searchValue, listTypeOptions } = this.state;
-
-    const customClass = '.btn-unified';
-    const optSearchType = ['All', 'Samples', 'Reactions'];
-    const optSearchState = ['All', 'pending', 'reviewed', 'accepted'];
-
-    this.listOptions = [
-      { value: 'All', label: 'filter by' },
-      { value: 'Name', label: 'name' },
-      { value: 'Embargo', label: 'embargo' },
-      { value: 'Submitter', label: 'submitter' },
-    ];
-
-    const filterDropdown = (
-      <ButtonGroup className="home-search" style={{ display: 'flex' }}>
-        <DropdownButton
-          className={customClass}
-          id="type-inner-dropdown"
-          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
-          // style={{ width: '100px' }}
-        >
-          {this.renderMenuItems('type', optSearchType)}
-        </DropdownButton>
-        <DropdownButton
-          className={customClass}
-          id="state-inner-dropdown"
-          title={this.state.selectState}
-          // style={{ width: '100px' }}
-        >
-          {this.renderMenuItems('state', optSearchState)}
-        </DropdownButton>
-      </ButtonGroup>
-    );
-
-    const searchTypeTbl = (
-      <Select
-        simpleValue
-        searchable={false}
-        options={this.listOptions}
-        placeholder="Select search field"
-        clearable={false}
-        valueKey="value"
-        labelKey="label"
-        onChange={this.handleSelectType}
-        defaultValue="All"
-        value={searchType}
-        className="o-author"
-      />
-    );
-
-    let searchValueTbl = (<div />);
-    switch (searchType) {
-      case 'Embargo':
-      case 'Submitter':
-        searchValueTbl = (
-          <Select
-            simpleValue
-            searchable
-            options={listTypeOptions}
-            placeholder="Select..."
-            valueKey="value"
-            labelKey="label"
-            onChange={this.handleSelectAdvValue}
-            value={searchValue}
-            className="o-name"
-          />
-        );
-        break;
-      case 'Name':
-        searchValueTbl = (
-          <FormControl
-            type="text"
-            placeholder="Name..."
-            value={this.state.searchValue || ''}
-            onChange={event => this.handleSearchNameInput(event)}
-            onKeyDown={event => this.handleKeyDown(event)}
-          />
-        );
-        break;
-      default:
-        searchValueTbl = (<div />);
-    }
-
-    const searchTbl = (
-      <div className="home-adv-search">
-        <div style={{ display: 'flex' }}>
-          { filterDropdown }
-          { searchTypeTbl }
-          { searchValueTbl }
-        </div>
-      </div>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {searchTbl}
-      </div>
-    );
-  }
-
-  render() {
-    const { elements, currentElement } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch()}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement)) }
-                </tbody>
-              </Table>
-            </div>
-            <div className="list-container-bottom">
-              <Row>
-                <Col sm={8}>{this.pagination()}</Col>
-                <Col sm={4}>{this.perPageInput()}</Col>
-              </Row>
-            </div>
-          </div>
-        </Col>
-        <Col
-          className="review-element"
-          md={currentElement ? 8 : 0}
-          // style={this.state.currentElement ? {} : { display: 'none' }}
-        ><RepoReviewDetails />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoReviewButtonBar.js b/app/assets/javascripts/libHome/RepoReviewButtonBar.js
deleted file mode 100644
index 6ec0afdc8..000000000
--- a/app/assets/javascripts/libHome/RepoReviewButtonBar.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonToolbar,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoMetadataModal from '../components/common/RepoMetadataModal';
-import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
-
-const showButton = (btn, func, reviewLevel, pubState) => {
-  let title = btn;
-  let btnBsStyle = '';
-  let btnIcon = '';
-  let btnTooltip = '';
-  switch (btn) {
-    case 'Accept':
-      btnBsStyle = 'primary';
-      btnIcon = 'fa fa-paper-plane';
-      btnTooltip = 'Accept publication';
-      break;
-    case 'Review':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-exchange';
-      btnTooltip = 'Review publication, modification required for submittor';
-      break;
-    case 'Submit':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-play';
-      btnTooltip = 'Submit for publication';
-      break;
-    case 'Decline':
-      btnBsStyle = 'default';
-      btnIcon = 'fa fa-eject';
-      if (reviewLevel === 2) {
-        btnTooltip = 'Withdraw publication';
-        title = 'Withdraw';
-      } else if (reviewLevel === 3) {
-        btnTooltip = 'Reject publication';
-        title = 'Reject';
-      }
-      break;
-    default:
-      break;
-  }
-  return ((reviewLevel === 3 && pubState === 'pending' && btn !== 'Submit') || (reviewLevel === 2 && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
-    <OverlayTrigger
-      key={`ot_${title}`}
-      placement="top"
-      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
-    >
-      <Button
-        bsStyle={btnBsStyle}
-        onClick={() => func(true, btn)}
-      >
-        <i className={btnIcon} />&nbsp;{title}
-      </Button>
-    </OverlayTrigger>
-  ) : <span key={`span_${title}`} />;
-};
-
-const showCommentButton = (btn, func, currComment) => {
-  const hasComments = (currComment && currComment.comment && currComment.comment.length > 0) || false;
-  return (
-    <OverlayTrigger
-      key="ot_comments"
-      placement="top"
-      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
-    >
-      <Button
-        bsStyle={hasComments ? 'success' : 'default'}
-        onClick={() => func(true, btn)}
-      >
-        <i className="fa fa-comments" />&nbsp;
-        Comments
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const RepoReviewButtonBar = props =>
-  (
-    <ButtonToolbar>
-      {
-        props.buttons.filter(b => b === 'Comments').map(b =>
-          showCommentButton(b, props.buttonFunc, (props.currComment)))
-      }
-      {
-        props.buttons.filter(b => b !== 'Comments').map(b =>
-          showButton(b, props.buttonFunc, props.reviewLevel, props.currComment.state))
-      }
-      <RepoMetadataModal
-        elementId={props.element.id}
-        elementType={props.element.elementType.toLowerCase()}
-      />
-      <RepoReviewAuthorsModal element={props.element} isSubmitter={props.isSubmitter} schemeOnly={props.schemeOnly} taggData={props.taggData} />
-    </ButtonToolbar>
-  );
-
-RepoReviewButtonBar.propTypes = {
-  element: PropTypes.shape({
-    id: PropTypes.number,
-    elementType: PropTypes.string
-  }).isRequired,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-  buttonFunc: PropTypes.func,
-  reviewLevel: PropTypes.number,
-  isSubmitter: PropTypes.bool,
-  schemeOnly: PropTypes.bool,
-  currComment: PropTypes.object,
-  taggData: PropTypes.object
-};
-
-
-RepoReviewButtonBar.defaultProps = {
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-  buttonFunc: () => { },
-  reviewLevel: 0,
-  isSubmitter: false,
-  schemeOnly: false,
-  currComment: {},
-  taggData: {}
-};
-
-export default RepoReviewButtonBar;
\ No newline at end of file
diff --git a/app/assets/javascripts/libHome/RepoReviewCommon.js b/app/assets/javascripts/libHome/RepoReviewCommon.js
deleted file mode 100644
index 5f1ae4436..000000000
--- a/app/assets/javascripts/libHome/RepoReviewCommon.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-import { startsWith } from 'lodash';
-import moment from 'moment';
-import RepoReviewTimeFormat from '../components/common/RepoReviewTimeFormat';
-
-const AffiliationMap = (affiliationIds) => {
-  const aId = [].concat.apply([], affiliationIds);
-  const affiliationMap = {};
-  let aCount = 0;
-  aId.map((e) => {
-    if (!affiliationMap[e]) {
-      aCount += 1;
-      affiliationMap[e] = aCount;
-    }
-  });
-  return affiliationMap;
-};
-
-const CommentComponent = (field, history) => {
-  const submitHis = history.filter(h => h.type === 'submit' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-  const reviewHis = history.filter(h => h.type === 'reviewed' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-
-  const current = (submitHis.length > 0) ? submitHis.pop() : null;
-  const previous = (reviewHis.length > 0) ? reviewHis.pop() : null;
-  const submitField = (current && current.comments && current.comments[`${field}`]) || {};
-  const reviewField = (previous && previous.comments && previous.comments[`${field}`]) || {};
-
-  let keep = true;
-  let submitFieldTime = null;
-  let reviewFieldTime = null;
-  if (current && previous) {
-    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-      submitFieldTime = moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss');
-    } else {
-      submitFieldTime = new Date(submitField.timestamp);
-    }
-
-    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-      reviewFieldTime = moment(reviewField.timestamp, 'DD-MM-YYYY HH:mm:ss');
-    } else {
-      reviewFieldTime = new Date(reviewField.timestamp);
-    }
-    keep = reviewFieldTime > submitFieldTime;
-  }
-
-  const submitTbl = (current ?
-    (
-      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
-        <strong>{submitField.username} ({RepoReviewTimeFormat(submitField.timestamp)})</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{submitField.comment}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-  const reviewTbl = (previous ?
-    (
-      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
-        <strong>{reviewField.username} ({RepoReviewTimeFormat(reviewField.timestamp)})</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{reviewField.comment}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-
-  const tbl = keep ? (<span>{reviewTbl}{submitTbl}</span>) : (<span>{submitTbl}{reviewTbl}</span>);
-  return tbl;
-};
-
-const CommentDisplay = ({ elReview, commentKey, history }) => {
-  let objectKey = commentKey;
-  if (startsWith(commentKey, 'Reaction_Analysis_')) {
-    objectKey = 'Reaction Analysis';
-  } else if (startsWith(commentKey, 'Product_Analysis_')) {
-    objectKey = 'Product Analysis';
-  } else if (startsWith(commentKey, 'Analysis_')) {
-    objectKey = 'Analysis';
-  }
-
-  if (elReview) {
-    switch (objectKey) {
-      case 'Summary':
-        return CommentComponent(elReview.comment, 'Review Summary', null);
-      case 'Reference':
-      case 'Reaction Table':
-      case 'Description':
-      case 'Additional information':
-      case 'Properties':
-      case 'TLC-Control':
-      case 'Reaction Analysis':
-      case 'Product Analysis':
-      case 'Analysis':
-        return (elReview.comments && elReview.comments[commentKey]) ?
-          CommentComponent(objectKey, history) : <div />;
-      default:
-        return <div />;
-    }
-  }
-  return <div />;
-};
-
-CommentDisplay.propTypes = {
-  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  commentKey: PropTypes.string.isRequired,
-  history: PropTypes.array
-};
-
-CommentDisplay.defaultProps = {
-  elReview: null,
-  history: []
-};
-
-export {
-  AffiliationMap,
-  CommentComponent,
-  CommentDisplay
-};
diff --git a/app/assets/javascripts/libHome/RepoReviewDetails.js b/app/assets/javascripts/libHome/RepoReviewDetails.js
deleted file mode 100644
index c8b102166..000000000
--- a/app/assets/javascripts/libHome/RepoReviewDetails.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoReviewDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element,
-      history: [],
-      reviewLevel: 0,
-      isSubmitter: false
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction':
-        return (
-          <RepoReactionDetails
-            reaction={currentElement.reaction}
-            canComment
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
-            history={this.state.historyInfo ? this.state.historyInfo : []}
-          />);
-      case 'sample':
-        return (
-          <RepoSampleDetails
-            element={currentElement}
-            canComment
-            reviewLevel={this.state.reviewLevel}
-            isSubmitter={this.state.isSubmitter}
-            history={this.state.historyInfo ? this.state.historyInfo : []}
-          />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/libHome/RepoSample.js b/app/assets/javascripts/libHome/RepoSample.js
deleted file mode 100644
index bcf06e1d3..000000000
--- a/app/assets/javascripts/libHome/RepoSample.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel, Label } from 'react-bootstrap';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AffiliationList,
-  AnalysesTypeJoinLabel,
-  AuthorList,
-  ChemotionId,
-  CommentBtn,
-  ContributorInfo,
-  DateInfo,
-  Doi,
-  IconLicense,
-  IconToMyDB,
-  RenderPublishAnalysesPanel,
-  SidToPubChem,
-  ToggleIndicator,
-} from './RepoCommon';
-import { AffiliationMap } from './RepoReviewCommon';
-import { Citation, literatureContent, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
-import RepoXvialButton from '../components/common/RepoXvialButton';
-import PublicActions from '../components/actions/PublicActions';
-import Sample from '../components/models/Sample';
-
-export default class RepoSample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expandSA: true,
-    };
-    this.toggleSA = this.toggleSA.bind(this);
-    this.renderAnalyses = this.renderAnalyses.bind(this);
-  }
-
-  toggleSA() {
-    const { expandSA } = this.state;
-    this.setState({ expandSA: !expandSA });
-  }
-
-  updateRepoXvial(elementId) {
-    PublicActions.displayMolecule(elementId);
-    PublicActions.refreshPubElements('Molecules');
-  }
-
-  renderAnalyses(analyses) {
-    const { sample } = this.props;
-    const specSample = new Sample(sample);
-    specSample.container = sample.analyses;
-    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
-    return orderAnalyses.map((analysis) => {
-      const userInfo = (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
-      const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn {...this.props} field={`Analysis_${analysis.id}`} orgInfo={kind} onShow={this.props.handleCommentBtn} />
-          <RenderPublishAnalysesPanel
-            key={analysis.id}
-            userInfo={userInfo}
-            analysis={analysis}
-            isPublic={this.props.isPublished}
-            isLogin={this.props.isLogin}
-            isReviewer={this.props.isReviewer}
-            type="Container"
-            pageType="molecules"
-            pageId={sample.molecule_id}
-            element={specSample}
-          />
-        </span>
-      );
-    });
-  }
-
-  render() {
-    const {
-      sample, pubData, tagData, isPublished,
-      canComment, handleCommentBtn, isLogin, isReviewer, element
-    } = this.props;
-    const { xvialCom } = element;
-    const { expandSA } = this.state;
-
-    const affiliationMap = AffiliationMap(sample.affiliation_ids);
-
-    const references = sample.literatures ? sample.literatures.map(lit => (
-      <li key={`li_${lit.id}`} style={{ display: 'flex' }}>
-        <RefByUserInfo info={lit.ref_added_by} />&nbsp;
-        <Citation key={lit.id} literature={lit} />
-      </li>
-    )) : [];
-
-    const refArray = [];
-    let referencesText = '';
-    if (canComment && sample.literatures) {
-      sample.literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
-
-    const iupacUserDefined = ((sample.showed_name == sample.molecule_iupac) || sample.showed_name == null)
-      ? <span />
-      : <h5><b>Name: </b> {sample.showed_name} </h5>;
-    const userInfo = sample.pub_info || '';
-    const analyses = (sample.analyses && sample.analyses.children && sample.analyses.children.length > 0 && sample.analyses.children[0].children) || [];
-    return (
-      <Jumbotron key={`sample-${sample.id}`}>
-        <span className="repo-pub-sample-header">
-          <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={sample.id} type="sample" /></span>&nbsp;
-          <span className="repo-pub-title"><DateInfo pubData={pubData} tagData={tagData} isPublished={isPublished} /></span>&nbsp;
-          <SidToPubChem sid={sample.sid} />&nbsp;
-          <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={sample.id} data={sample.xvial} saveCallback={() => this.updateRepoXvial(sample.molecule_id)} xvialCom={xvialCom} />
-          {IconLicense(sample.license, (sample.author_ids.length > 1))}
-          <RepoPublicComment isReviewer={isReviewer} id={sample.id} type="Sample" title={sample.showed_name} userInfo={userInfo} pageType="molecules" pageId={sample.molecule_id} />&nbsp;
-          <RepoUserComment isLogin={isLogin} id={sample.id} type="Sample" title={sample.showed_name} pageType="molecules" pageId={sample.molecule_id} />
-        </span>
-        <br />
-        {iupacUserDefined}
-        <ContributorInfo contributor={sample.contributors} />
-        <h5>
-          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
-          <AuthorList creators={sample.creators} affiliationMap={affiliationMap} />
-        </h5>
-        <AffiliationList
-          affiliations={sample.affiliations}
-          affiliationMap={affiliationMap}
-        />
-        <Doi type="sample" id={sample.id} doi={sample.doi} isPublished={isPublished} />
-        <ChemotionId id={pubData.id} type="sample" />
-        <h5>
-          {sample.reaction_ids.map(rid => (
-            <Button key={`reaction-link-btn-${rid}`} bsStyle="link" style={{ padding: '0px 0px' }} onClick={() => { window.location = `/home/publications/reactions/${rid}`; }}>
-              <i className="icon-reaction" style={{ fontSize: '1.5em' }} />{'Product of reaction'}
-            </Button>
-          ))}
-        </h5>
-        <h5>
-          <CommentBtn {...this.props} field="Reference" orgInfo={referencesText} onShow={handleCommentBtn} />
-          <b>Reference{references.length > 1 ? 's' : null}: </b>
-          <ul style={{ listStyle: 'none' }}>{references}</ul>
-        </h5>
-        <ToggleIndicator onClick={this.toggleSA} name="Analyses" indicatorStyle={expandSA ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'} />
-        <span className="label" style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}>
-          {AnalysesTypeJoinLabel(ArrayUtils.sortArrByIndex(analyses), 'Sample')}
-        </span>
-        <Panel style={{ border: 'none' }} id="collapsible-panel-sample-analyses" expanded={expandSA} defaultExpanded={expandSA} onToggle={() => { }}>
-          <Panel.Collapse>
-            <Panel.Body style={{ fontSize: '90%', backgroundColor: '#f5f5f5', padding: '4' }}>
-              {this.renderAnalyses(analyses)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </Jumbotron>
-    );
-  }
-}
-
-RepoSample.propTypes = {
-  sample: PropTypes.object.isRequired,
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-  canComment: PropTypes.bool,
-  showPublicModal: PropTypes.bool,
-  handleCommentBtn: PropTypes.func,
-  isLogin: PropTypes.bool,
-  isReviewer: PropTypes.bool
-};
-
-RepoSample.defaultProps = {
-  canComment: false,
-  isLogin: false,
-  isReviewer: false,
-  handleCommentBtn: () => { },
-};
diff --git a/app/assets/javascripts/libHome/RepoSampleDetails.js b/app/assets/javascripts/libHome/RepoSampleDetails.js
deleted file mode 100644
index 51a8b1a04..000000000
--- a/app/assets/javascripts/libHome/RepoSampleDetails.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { Component } from 'react';
-import { Panel } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import {
-  ClosePanel,
-  MoleculeInfo,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoCommentModal from '../components/common/RepoCommentModal';
-import RepoReviewModal from '../components/common/RepoReviewModal';
-import RepoSample from './RepoSample';
-
-export default class RepoSampleDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showReviewModal: false,
-      btnAction: '',
-      showCommentModal: false,
-      commentField: '',
-      originInfo: '',
-    };
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    this.setState({ showReviewModal, btnAction });
-  }
-
-  handleSubmitReview(elementId, comment, action) {
-    LoadingActions.start();
-    PublicActions.reviewPublish(elementId, 'sample', comment, action);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-    PublicActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  render() {
-    const {
-      element,
-      isPublished,
-      canComment,
-      reviewLevel,
-      isSubmitter,
-      history,
-      canClose,
-      buttons
-    } = this.props;
-
-    if (typeof (element) === 'undefined' || !element) {
-      return <div />;
-    }
-
-    const {
-      molecule, isLogin, isReviewer, xvialCom
-    } = element;
-
-    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
-    const idyReview = typeof isReviewer === 'undefined' ? false : isReviewer;
-    let samples = [];
-    let pubData = {};
-    let tagData = {};
-    let { sample } = element;
-    let hasXvial = false;
-    if (isPublished) {
-      samples = element.published_samples;
-      sample = samples.find(x => x !== undefined) || {};
-      sample.id = sample.sample_id;
-      hasXvial = samples.filter(s => s !== undefined && s.xvial && s.xvial !== '').length > 0;
-    } else {
-      samples.push(element.sample);
-      pubData = element.publication;
-    }
-
-    tagData = (pubData.taggable_data) || {};
-    const details = (samples || []).map((s) => {
-      if (isPublished) {
-        pubData = {
-          id: s.pub_id
-        };
-        tagData = {
-          published_at: s.published_at,
-          doi_reg_at: s.doi_reg_at
-        };
-      }
-      const el = {
-        id: s.id || s.sample_id,
-        sid: s.sid,
-        short_label: s.short_label || '',
-        xvial: s.xvial,
-        pub_info: s.pub_info,
-        ana_infos: s.ana_infos,
-        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
-        affiliations: s.affiliations || tagData.affiliations,
-        literatures: s.literatures || element.literatures,
-        license: s.license || tagData.license || 'CC BY-SA',
-        author_ids: s.author_ids || tagData.author_ids || [],
-        contributors: s.contributors || tagData.contributors,
-        creators: s.creators || tagData.creators,
-        doi: s.doi || element.doi,
-        reaction_ids: s.reaction_ids || [],
-        showed_name: s.showed_name,
-        molecule_iupac: molecule.iupac_name || [],
-        molecule_id: molecule.id,
-        analyses: s.analyses || element.analyses || []
-      };
-
-      return (
-        <RepoSample
-          key={el.id}
-          sample={el}
-          pubData={pubData}
-          tagData={tagData}
-          handleCommentBtn={this.handleCommentBtn}
-          isLogin={idyLogin}
-          isReviewer={idyReview}
-          {...this.props}
-        />
-      );
-    });
-
-    return (
-      <Panel style={{ border: 'none' }} >
-        <Panel.Body>
-          {
-            canComment ?
-              <RepoReviewButtonBar
-                element={{ id: sample.id, elementType: 'Sample' }}
-                buttonFunc={this.handleReviewBtn}
-                reviewLevel={reviewLevel}
-                isSubmitter={isSubmitter}
-                currComment={(history && history.slice(-1).pop()) || {}}
-                buttons={buttons}
-                taggData={tagData}
-              /> : ''
-          }
-          {canClose ? <ClosePanel element={sample} /> : ''}
-          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} xvialCom={xvialCom} />
-          <div>
-            {details}
-          </div>
-          {
-            canComment ?
-              <div>
-                <RepoCommentModal
-                  show={this.state.showCommentModal}
-                  elementId={sample.id}
-                  elementType="Sample"
-                  field={this.state.commentField}
-                  orgInfo={this.state.originInfo}
-                  reviewLevel={reviewLevel}
-                  history={history}
-                  onUpdate={this.handleSubmitComment}
-                  onHide={() => this.setState({ showCommentModal: false })}
-                />
-                <RepoReviewModal
-                  show={this.state.showReviewModal}
-                  elementId={sample.id}
-                  action={this.state.btnAction}
-                  reviewLevel={reviewLevel}
-                  history={history}
-                  onSubmit={this.handleSubmitReview}
-                  onHide={() => this.setState({ showReviewModal: false })}
-                />
-              </div> : ''
-          }
-
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-RepoSampleDetails.propTypes = {
-  element: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  reviewLevel: PropTypes.number,
-  isSubmitter: PropTypes.bool,
-  history: PropTypes.array,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-};
-
-RepoSampleDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  reviewLevel: 0,
-  isSubmitter: false,
-  history: [],
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-};
diff --git a/app/assets/javascripts/libHome/homeRoutes.js b/app/assets/javascripts/libHome/homeRoutes.js
deleted file mode 100644
index 2e73d3f61..000000000
--- a/app/assets/javascripts/libHome/homeRoutes.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import PublicActions from '../components/actions/PublicActions'
-import PublicFetcher from '../components/fetchers/PublicFetcher'
-
-const routes = {
-  '/': 'root',
-  target: {
-    root: function(e) {
-      Aviator.navigate('/home/welcome')
-    }
-  },
-
-  '/welcome': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("welcome")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/home': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("home")
-      },
-    },
-    '/': 'show'
-  },
-  '/publications': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("publications")
-      },
-    },
-    '/': 'show'
-  },
-  '/review': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("review")
-      },
-    },
-    '/': 'show'
-  },
-  '/about': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("about")
-      },
-    },
-    '/': 'show'
-  },
-  '/contact': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("contact")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/newsroom': {
-    target: {
-      list: function (e) {
-        PublicActions.articles();
-      },
-      show: function (e) {
-        PublicActions.displayArticle(e.params.key)
-      },
-    },
-    '/': 'list',
-    '/:key': 'show'
-  },
-
-  '/newseditor': {
-    target: {
-      edit: function (e) {
-        PublicActions.editArticle(e.params.key)
-      },
-      show: function (e) {
-        PublicActions.editArticle('new')
-      },
-    },
-    '/show': 'show',
-    '/:key': 'edit'
-  },
-
-  '/howtoeditor': {
-    target: {
-      edit: function (e) {
-        PublicActions.editHowTo(e.params.key)
-      },
-      show: function (e) {
-        PublicActions.editHowTo('ein')
-      },
-    },
-    '/show': 'show',
-    '/:key': 'edit'
-  },
-
-  '/directive': {
-    target: {
-      show: function(e) {
-        PublicActions.openRepositoryPage("directive")
-      },
-    },
-    '/': 'show'
-  },
-
-  '/datasets': {
-    target: {
-      show: function(e) {
-        PublicActions.displayDataset(e.params.datasetId)
-      },
-    },
-    '/:datasetId': 'show'
-  },
-
-  '/molecules': {
-    target: {
-      show: function(e) {
-        PublicActions.displayMolecule(e.params.moleculeId)
-      },
-    },
-    '/:moleculeId': 'show'
-  },
-
-  '/reactions': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReaction(e.params.reactionId)
-      },
-    },
-    '/:reactionId': 'show'
-  },
-
-  '/pid': {
-    target: {
-      show: function(e) {
-        PublicFetcher.queryPid({id: e.params.id})
-        }
-    },
-    '/:id': 'show'
-  },
-
-  '/inchikey': {
-    target: {
-      show: function(e) {
-        let url = e.uri.replace("/inchikey/", "")
-        let query = url.split(".")
-
-        if (query.length > 0) {
-          let version = query[1] || ""
-          let splitIndex = query[0].indexOf("/")
-          if (splitIndex < 0) splitIndex = query[0].length
-          let params = {
-            inchikey: query[0].substring(0, splitIndex),
-            type:  query[0].substring(splitIndex + 1),
-            version: version
-          }
-
-          PublicFetcher.queryInchikey(params)
-        }
-
-      },
-    },
-    '/*': 'show'
-  },
-
-  '/review_reaction': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReviewReaction(e.params.reactionId)
-      },
-    },
-    '/:reactionId': 'show'
-  },
-
-  '/review_sample': {
-    target: {
-      show: function(e) {
-        PublicActions.displayReviewSample(e.params.sampleId)
-      },
-    },
-    '/:sampleId': 'show'
-  },
-
-  '/embargo': {
-    target: {
-      list: function (e) {
-        PublicActions.openRepositoryPage("embargo");
-      },
-      show: function (e) {
-        PublicActions.displayReviewEmbargo(e.params.elementType, e.params.elementId)
-      },
-    },
-    '/': 'list',
-    '/:elementType/:elementId': 'show'
-  },
-
-  '/howto': {
-    target: {
-      list: function (e) {
-        PublicActions.howtos();
-      },
-      show: function (e) {
-        PublicActions.displayHowTo(e.params.key)
-      },
-    },
-    '/': 'list',
-    '/:key': 'show'
-  },
-}
-
-export default function() {
-  Aviator.root = '/home'
-  Aviator.pushStateEnabled = true
-  Aviator.setRoutes(routes)
-}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d8966acb2..006dfb732 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -267,11 +267,11 @@ $color-required: #d9534f;
 
 .list_focus_off {
   cursor: pointer;
-  background-color: #F5F5F5;
+  background-color: white;
 }
 .list_focus_on {
   cursor: pointer;
-  background-color: #d4edda !important;
+  background-color: white !important;
 }
 
 .feature {
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index a0cc8060a..55679b338 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -626,7 +626,7 @@ $bs-successcolor: #5cb85c;
         font-size: 1.8vmax;
       }
       .list {
-        font-size: 1vmax;
+        font-size: larger;
       }
     }
     .row .even {
@@ -686,7 +686,7 @@ $bs-successcolor: #5cb85c;
         font-size: 5vmin;
       }
       .tit {
-        font-size: 1.8vmin;
+        font-size: large;
       }
       .i-ext {
         font-size: 4vmin;
@@ -695,7 +695,6 @@ $bs-successcolor: #5cb85c;
     }
     .dtl .rr {
       text-align: left;
-      font-size: 1.5vmin;
       .tit {
         font-size: 14px;
         font-weight: 400;
@@ -704,7 +703,7 @@ $bs-successcolor: #5cb85c;
         }
       }
       .cnt {
-        font-size: 3vmin;
+        font-size: xx-large;
         font-weight: bolder;
       }
       .italic-desc {
diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index bf492d06b..18bb7526c 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -83,6 +83,26 @@ def perform(embargo_col_id)
       PublicationMailer.mail_job_error(self.class.name, @embargo_collection.id, "[remove_publish_pending or send_message error]" + e.to_s).deliver_now
       raise e
     end
+
+    begin
+      pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
+      if pub_col.present? && pub_col.state == 'accepted'
+        pub_col.transition_from_start_to_metadata_uploading!
+        pub_col.transition_from_metadata_uploading_to_uploaded!
+        pub_col.transition_from_metadata_uploaded_to_doi_registering!
+        pub_col.transition_from_doi_registering_to_registered!
+        pub_col.transition_from_doi_registered_to_completing!
+        pub_col.transition_from_completing_to_completed!
+      end
+    rescue StandardError => e
+      Delayed::Worker.logger.error <<~TXT
+      ---------  #{self.class.name} send collection DOI error ------------
+        Error Message:  #{e}
+      --------------------------------------------------------------------
+      TXT
+      raise e
+    end
+
   end
 
   def remove_publish_pending
diff --git a/app/mailers/publication_mailer.rb b/app/mailers/publication_mailer.rb
index d0d9ac39c..fd47c5bab 100644
--- a/app/mailers/publication_mailer.rb
+++ b/app/mailers/publication_mailer.rb
@@ -217,7 +217,7 @@ def mail_publish_embargo_release(embargo_col_id)
     #approved_notify
     mail(
       to: @creator.email,
-      bcc: reviewers,
+      bcc: group_leaders,
       subject: "Chemotion Repository: Embargo collection: #{@embargo_collection.label} released",
     ) do |format|
       format.html
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index 763761747..ff87befa8 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -82,6 +82,14 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
       end
 
+      event :set_csv do
+        transitions from: %i[idle peaked non_jcamp], to: :csv
+      end
+
+      event :set_nmrium do
+        transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
+      end
+
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
@@ -209,6 +217,10 @@ def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
     generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
   end
 
+  def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
+    generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
+  end
+
   def build_params(params = {})
     _, extname = extension_parts
     params[:mass] = 0.0
@@ -310,7 +322,7 @@ def edit_process(is_regen, orig_params)
     end
 
     set_backup
-    delete_tmps(tmp_files_to_be_deleted)
+    delete_tmps([tmp_jcamp, tmp_img])
     delete_related_imgs(img_att)
     delete_related_edit_peak(jcamp_att)
     jcamp_att
diff --git a/app/models/concerns/segmentable.rb b/app/models/concerns/segmentable.rb
index a77c95ec9..383df68c1 100644
--- a/app/models/concerns/segmentable.rb
+++ b/app/models/concerns/segmentable.rb
@@ -7,9 +7,38 @@ module Segmentable
     has_many :segments, as: :element, dependent: :destroy
   end
 
-  def save_segments(**args)
+  def copy_segments(**args)
     return if args[:segments].nil?
+    segments = save_segments(segments: args[:segments], current_user_id: args[:current_user_id])
+    segments.each do |segment|
+      properties = segment.properties
+      properties['layers'].keys.each do |key|
+        layer = properties['layers'][key]
+        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
+        field_uploads&.each do |upload|
+          idx = properties['layers'][key]['fields'].index(upload)
+          files = upload["value"] && upload["value"]["files"]
+          files&.each_with_index do |fi, fdx|
+            aid = properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid']
+            unless aid.nil?
+              copied_att = Attachment.find(aid)&.copy(attachable_type: 'SegmentProps', attachable_id: segment.id, transferred: true)
+              unless copied_att.nil?
+                copied_att.save!
+                properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = copied_att.id
+                properties['layers'][key]['fields'][idx]['value']['files'][fdx]['uid'] = copied_att.identifier
+              end
+            end
+          end
+        end
+      end
+      segment.update!(properties: properties)
+    end
 
+  end
+
+  def save_segments(**args)
+    return if args[:segments].nil?
+    segments = []
     args[:segments].each do |seg|
       klass = SegmentKlass.find_by(id: seg['segment_klass_id'])
       uuid = SecureRandom.uuid
@@ -29,7 +58,9 @@ def save_segments(**args)
       props['klass_uuid'] = klass.uuid
       props['eln'] = Chemotion::Application.config.version
       props['klass'] = 'Segment'
-    Segment.create!(segment_klass_id: seg['segment_klass_id'], element_type: self.class.name, element_id: self.id, properties: props, created_by: args[:current_user_id], uuid: uuid, klass_uuid: klass.uuid)
+      segment = Segment.create!(segment_klass_id: seg['segment_klass_id'], element_type: self.class.name, element_id: self.id, properties: props, created_by: args[:current_user_id], uuid: uuid, klass_uuid: klass.uuid)
+      segments.push(segment)
     end
+    segments
   end
 end
diff --git a/app/models/molecule.rb b/app/models/molecule.rb
index 09db1e1ee..38061d51d 100644
--- a/app/models/molecule.rb
+++ b/app/models/molecule.rb
@@ -287,6 +287,20 @@ def self.svg_reprocess(svg, molfile)
     end
   end
 
+  def self.svg_reprocess(svg, molfile)
+    return svg unless Rails.configuration.try(:ketcher_service).try(:url).present?
+    return svg if svg.present? && !svg&.include?('Open Babel')
+
+    svg = KetcherService::RenderSvg.svg(molfile)
+
+    if svg&.present?
+      svg = Ketcherails::SVGProcessor.new(svg)
+      svg.centered_and_scaled_svg
+    else
+      Chemotion::OpenBabelService.svg_from_molfile(molfile)
+    end
+  end
+
 private
 
   # TODO: check that molecules are OK and remove this method. fix is in editor
diff --git a/app/models/segment_klass.rb b/app/models/segment_klass.rb
index 4765f96ae..61a96e0bf 100644
--- a/app/models/segment_klass.rb
+++ b/app/models/segment_klass.rb
@@ -17,6 +17,7 @@
 #  properties_release  :jsonb
 #  released_at         :datetime
 #  identifier          :string
+#  sync_time           :datetime
 #
 
 class SegmentKlass < ApplicationRecord
diff --git a/app/models/user.rb b/app/models/user.rb
index 714fba2bb..f8bc6f712 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -479,6 +479,45 @@ def reviewing_collection
       .where("collections.label = 'Reviewing'").first
   end
 
+  def sync_reviewing_collection
+    su_id = User.chemotion_user.id
+    SyncCollectionsUser.joins(
+      "INNER JOIN collections ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Reviewing'").first
+  end
+
+
+  def sync_element_to_review_collection
+    su_id = User.chemotion_user.id
+    SyncCollectionsUser.joins(
+      "INNER JOIN collections ON " +
+      "sync_collections_users.collection_id = collections.id")
+      .where("sync_collections_users.shared_by_id = #{su_id}")
+      .where("sync_collections_users.user_id = #{self.id}")
+      .where("collections.label = 'Element To Review'").first
+  end
+
+  def find_or_create_grouplead_collection
+    chemotion_user = User.chemotion_user
+    sys_review_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Group Lead Review from', is_locked: true, is_shared: false)
+    sys_review_collection = Collection.find_or_create_by(user: chemotion_user, label: 'Group Lead Review', ancestry: "#{sys_review_from.id}", shared_by_id: id)
+
+    col_attributes = {
+      user: self,
+      shared_by_id: chemotion_user.id,
+      is_locked: true,
+      is_shared: true
+    }
+
+    rc = Collection.find_by(col_attributes)
+    SyncCollectionsUser.find_or_create_by(user: self, shared_by_id: chemotion_user.id, collection_id: sys_review_collection.id,
+      permission_level: 3, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
+    sys_review_collection
+  end
+
   def published_collection
     su_id = User.chemotion_user.id
     Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
@@ -487,6 +526,13 @@ def published_collection
               .where("collections.label = 'Published Elements'").first
   end
 
+  def sync_published_collection
+    SyncCollectionsUser.joins("INNER JOIN collections on collections.id = sync_collections_users.collection_id")
+              .where("sync_collections_users.user_id = #{self.id}")
+              .where("collections.id = #{Collection.public_collection_id}").first
+
+  end
+
   def publication_embargo_collection
     su_id = User.chemotion_user.id
     Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
diff --git a/app/packs/src/components/ElementsTable.js b/app/packs/src/components/ElementsTable.js
index b02cd0858..f9d4a85b5 100644
--- a/app/packs/src/components/ElementsTable.js
+++ b/app/packs/src/components/ElementsTable.js
@@ -191,7 +191,6 @@ export default class ElementsTable extends React.Component {
   handleNumberOfResultsChange(event, query=false) {
     const { value } = event.target;
     const { type } = this.props;
-    console.log(type);
     if (parseInt(value, 10) > 0) {
       UIActions.changeNumberOfResultsShown(value);
       if (query === true) ElementActions.refreshElements(type);
diff --git a/app/packs/src/components/List.js b/app/packs/src/components/List.js
index ef7ccfcde..415e51c8b 100644
--- a/app/packs/src/components/List.js
+++ b/app/packs/src/components/List.js
@@ -92,7 +92,7 @@ export default class List extends React.Component {
   onChange(state) {
     const { totalElements } = this.state;
     Object.keys(state.elements).forEach((key) => {
-      totalElements[key] = state.elements[key].totalElements;
+      totalElements[key] = state.elements[key]?.totalElements;
     });
 
     this.setState({
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
index 7d5191d0b..f809db236 100644
--- a/app/packs/src/components/PublishCommon.js
+++ b/app/packs/src/components/PublishCommon.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  Tooltip,
-  OverlayTrigger,
-} from 'react-bootstrap';
+import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import Aviator from 'aviator';
 import Sample from './models/Sample';
@@ -181,35 +177,44 @@ const ReviewPublishBtn = ({ element, showComment, validation }) => {
   )
 };
 
-
-const PublishedTag = ({ element }) => {
+const OrigElnTag = ({ element }) => {
   const tag = (element && element.tag) || {};
   const tagData = (tag && tag.taggable_data) || {};
-  const tagType = tag.taggable_type;
-  const isPending = (tagData && tagData.publish_pending && tagData.publish_pending === true) || false;
-  let tip = '';
-  let publishedId;
-  switch (tagType) {
-    case 'Reaction':
-      publishedId = tagData.public_reaction;
-      if (isPending) {
-        tip = 'Reaction is being reviewed';
-      } else {
-        tip = 'Reaction has been published';
-      }
-      break;
+  const elnInfo = (tagData && tagData.eln_info) || {};
+  if (Object.keys(elnInfo).length === 0) return <div />;
+
+  const tip = `go to original ELN: ${elnInfo.short_label}`;
 
-    default:
-      publishedId = tagData.public_sample;
-      if (isPending) {
-        tip = 'Sample is being reviewed';
-      } else {
-        tip = 'Sample has been published';
-      }
-      break;
-  }
   return (
-    publishedId ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id="data public">{tip}</Tooltip>}
+    >
+      <Button
+        bsSize="xsmall"
+        style={labelStyle}
+        href={`${elnInfo.origin}mydb/collection/all/${element.type}/${elnInfo.id}`}
+        target="_blank"
+      >
+        <i className="fa fa-link" aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+const PublishedTag = ({ element, fnUnseal }) => {
+  const tag = (element && element.tag) || {};
+  const tagData = (tag && tag.taggable_data) || {};
+  const tagType = getElementType(element) || '';
+  const isPending =
+    (tagData && tagData.publish_pending && tagData.publish_pending === true) ||
+    false;
+  const tip = isPending
+    ? `${tagType} is being reviewed`
+    : `${tagType} has been published`;
+  const publishedId = getPublicationId(element);
+  return publishedId ? (
+    <ButtonGroup bsSize="xsmall">
       <OverlayTrigger
         placement="bottom"
         overlay={<Tooltip id="data public">{tip}</Tooltip>}
@@ -217,18 +222,19 @@ const PublishedTag = ({ element }) => {
         <Button
           bsSize="xsmall"
           bsStyle={isPending ? 'warning' : 'danger'}
-          style={labelStyle}
-          onClick={event => handleClick(event, publishedId, tagType)}
+          onClick={(event) => handleClick(event, publishedId, tagType)}
         >
           <i className="fa fa-newspaper-o" aria-hidden="true" />
         </Button>
       </OverlayTrigger>
-    ) : null
-  );
+      {fnUnseal ? <UnsealBtn element={element} fnUnseal={fnUnseal} /> : null}
+    </ButtonGroup>
+  ) : null;
 };
 
 PublishedTag.propTypes = {
   element: PropTypes.object,
+  fnUnseal: PropTypes.func,
 };
 
 const LabelPublication = ({ element }) => {
@@ -318,11 +324,12 @@ ChemotionTag.defaultProps = {
 
 export {
   LabelPublication,
+  OrigElnTag,
   PublishedTag,
   ChemotionTag,
   PublishBtn,
   PublishBtnReaction,
   ReviewPublishBtn,
   validateMolecule,
-  validateYield
+  validateYield,
 };
diff --git a/app/packs/src/components/ReactionDetails.js b/app/packs/src/components/ReactionDetails.js
index 8a20de364..7653a3cb9 100644
--- a/app/packs/src/components/ReactionDetails.js
+++ b/app/packs/src/components/ReactionDetails.js
@@ -42,6 +42,7 @@ import ScifinderSearch from './scifinder/ScifinderSearch';
 import PublishReactionModal from './PublishReactionModal';
 import {
   PublishedTag,
+  OrigElnTag,
   LabelPublication,
   PublishBtnReaction,
   ReviewPublishBtn,
@@ -86,7 +87,8 @@ export default class ReactionDetails extends Component {
     this.handleValidation = this.handleValidation.bind(this);
     this.handleResetValidation = this.handleResetValidation.bind(this);
     this.handleModalAnalysesCheck = this.handleModalAnalysesCheck.bind(this);
-    if(!reaction.reaction_svg_file) {
+    this.unseal = this.unseal.bind(this);
+    if (!reaction.reaction_svg_file) {
       this.updateReactionSvg();
     }
   }
@@ -99,7 +101,6 @@ export default class ReactionDetails extends Component {
     }
   }
 
-
   componentDidMount() {
     UIStore.listen(this.onUIStoreChange)
   }
@@ -125,6 +126,7 @@ export default class ReactionDetails extends Component {
     const nextVisible = nextState.visible;
     const { reaction, activeTab, visible } = this.state;
     return (
+      nextState.sealed !== reaction.sealed ||
       nextReaction.can_publish !== reaction.can_publish ||
       nextReaction.can_update !== reaction.can_update ||
       nextReaction.id !== reaction.id ||
@@ -148,6 +150,12 @@ export default class ReactionDetails extends Component {
     this.forceUpdate();
   }
 
+  unseal() {
+    const { reaction } = this.state;
+    reaction.sealed = false;
+    this.setState({ reaction });
+  }
+
   handleModalAnalysesCheck(reaction) {
     this.setState({ reaction });
   }
@@ -296,7 +304,6 @@ export default class ReactionDetails extends Component {
         validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
       }
     }
-    validates = validates.concat(validateYield(reaction));
     if (validates.length > 0) {
       reaction.validates = validates;
       this.setState({ reaction });
@@ -338,6 +345,7 @@ export default class ReactionDetails extends Component {
       const name = s.preferred_label;
       return name;
     }).filter(s => s);
+  }
 
   onUIStoreChange(state) {
     if (state.reaction.activeTab != this.state.activeTab) {
@@ -539,19 +547,27 @@ export default class ReactionDetails extends Component {
             bsSize="xsmall"
             className="button-right"
             onClick={() => this.handleSubmit(true)}
-            disabled={!permitOn(reaction) || !this.reactionIsValid() || reaction.isNew}
+            disabled={
+              !permitOn(reaction) || !this.reactionIsValid() || reaction.isNew
+            }
             style={{ display: hasChanged }}
           >
             <i className="fa fa-floppy-o" />
             <i className="fa fa-times" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom"
-            overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right"
-              onClick={() => this.handleSubmit()}
-              disabled={!permitOn(reaction) || !this.reactionIsValid()}
-              style={{display: hasChanged}} >
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}
+        >
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit()}
+            disabled={!permitOn(reaction) || !this.reactionIsValid()}
+            style={{ display: hasChanged }}
+          >
             <i className="fa fa-floppy-o "></i>
           </Button>
         </OverlayTrigger>
@@ -600,7 +616,8 @@ export default class ReactionDetails extends Component {
         />
         <ReviewPublishBtn element={reaction} showComment={this.handleCommentScreen} validation={this.handleValidation} />
         <div style={{ display: "inline-block", marginLeft: "10px" }}>
-          <PublishedTag element={reaction} />
+          <OrigElnTag element={reaction} />
+          <PublishedTag element={reaction} fnUnseal={this.unseal} />
           <LabelPublication element={reaction} />
         </div>
       </div>
diff --git a/app/packs/src/components/SampleDetails.js b/app/packs/src/components/SampleDetails.js
index c8875a288..dc22b29f0 100644
--- a/app/packs/src/components/SampleDetails.js
+++ b/app/packs/src/components/SampleDetails.js
@@ -72,12 +72,14 @@ import { addSegmentTabs } from './generic/SegmentDetails';
 import RepoXvialButton from './common/RepoXvialButton';
 import {
   PublishedTag,
+  OrigElnTag,
   LabelPublication,
   PublishBtn,
   ReviewPublishBtn,
   validateMolecule,
 } from './PublishCommon';
 import SampleDetailsRepoComment from './SampleDetailsRepoComment';
+import { permitOn } from './common/uis';
 
 const MWPrecision = 6;
 
@@ -164,6 +166,7 @@ export default class SampleDetails extends React.Component {
     this.handleResetValidation = this.handleResetValidation.bind(this);
     this.handleAssociateClick = this.handleAssociateClick.bind(this);
     this.handleRepoXvial = this.handleRepoXvial.bind(this);
+    this.unseal = this.unseal.bind(this);
   }
 
   componentDidMount() {
@@ -455,6 +458,13 @@ export default class SampleDetails extends React.Component {
     sample.updateChecksum();
   }
 
+  unseal() {
+    console.log('unseal');
+    const { sample } = this.state;
+    sample.sealed = false;
+    this.setState({ sample });
+  }
+
   structureEditorButton(isDisabled) {
     return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -578,11 +588,16 @@ export default class SampleDetails extends React.Component {
       <ElementCollectionLabels element={sample} key={sample.id} placement="right" />
     );
 
-    const decoupleCb = sample.can_update && this.enableSampleDecoupled ? (
-      <Checkbox className="sample-header-decouple" checked={sample.decoupled} onChange={e => this.decoupleChanged(e)}>
-        Decoupled
-      </Checkbox>
-    ) : null;
+    const decoupleCb =
+    permitOn(sample) && this.enableSampleDecoupled ? (
+        <Checkbox
+          className="sample-header-decouple"
+          checked={sample.decoupled}
+          onChange={(e) => this.decoupleChanged(e)}
+        >
+          Decoupled
+        </Checkbox>
+      ) : null;
 
     const isPub = !!((sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.publication && sample.tag.taggable_data.publication.published_at));
     return (
@@ -601,7 +616,7 @@ export default class SampleDetails extends React.Component {
             className="button-right"
             onClick={() => this.handleSubmit(true)}
             style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !sample.can_update}
+            disabled={!this.sampleIsValid() || !permitOn(sample)}
           >
             <i className="fa fa-floppy-o" />
             <i className="fa fa-times" />
@@ -617,7 +632,7 @@ export default class SampleDetails extends React.Component {
             className="button-right"
             onClick={() => this.handleSubmit()}
             style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !sample.can_update}
+            disabled={!this.sampleIsValid() || !permitOn(sample)}
           >
             <i className="fa fa-floppy-o" />
           </Button>
@@ -643,13 +658,15 @@ export default class SampleDetails extends React.Component {
         {decoupleCb}
         <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
         <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
+        {decoupleCb}
         <div style={{ display: 'inline-block', marginLeft: '10px' }}>
           <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
           {colLabel}
           <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
           <PubchemLabels element={sample} />
           <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
-          <PublishedTag element={sample} />
+          <OrigElnTag element={sample} />
+          <PublishedTag element={sample} fnUnseal={this.unseal} />
           <LabelPublication element={sample} />
           {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
         </div>
@@ -1231,8 +1248,8 @@ export default class SampleDetails extends React.Component {
   }
 
   saveBtn(sample, closeView = false) {
-    let submitLabel = (sample && sample.isNew) ? 'Create' : 'Save';
-    const isDisabled = !sample.can_update;
+    let submitLabel = sample && sample.isNew ? 'Create' : 'Save';
+    const isDisabled = !permitOn(sample);
     if (closeView) submitLabel += ' and close';
 
     return (
@@ -1315,7 +1332,6 @@ export default class SampleDetails extends React.Component {
           dialogClassName="importChemDrawModal"
           onHide={this.handleMolfileClose}
         >
-
           <Modal.Header closeButton>
             <Modal.Title>Molfile</Modal.Title>
           </Modal.Header>
diff --git a/app/packs/src/components/SampleDetailsContainersAux.js b/app/packs/src/components/SampleDetailsContainersAux.js
index 503539e9d..990e49b20 100644
--- a/app/packs/src/components/SampleDetailsContainersAux.js
+++ b/app/packs/src/components/SampleDetailsContainersAux.js
@@ -25,9 +25,10 @@ import MatrixCheck from 'src/components/common/MatrixCheck';
 import { PublishedTag } from './PublishCommon';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 
-import { PublishedTag } from './PublishCommon';
 import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
 
+import RepoMolViewerListBtn from '../libHome/RepoMolViewerListBtn';
+
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
     &nbsp;
diff --git a/app/packs/src/components/SampleForm.js b/app/packs/src/components/SampleForm.js
index 830c302ba..7140c9ec9 100644
--- a/app/packs/src/components/SampleForm.js
+++ b/app/packs/src/components/SampleForm.js
@@ -13,6 +13,7 @@ import { solventOptions } from './staticDropdownOptions/options';
 import SampleDetailsSolvents from './SampleDetailsSolvents';
 import PrivateNoteElement from './PrivateNoteElement';
 import NotificationActions from './actions/NotificationActions';
+import { permitOn } from './common/uis';
 
 
 export default class SampleForm extends React.Component {
@@ -108,7 +109,7 @@ export default class SampleForm extends React.Component {
   // Input components of sample details should be disabled if detail level
   // does not allow to read their content
   topSecretCheckbox(sample) {
-    if (sample.can_update) {
+    if (permitOn(sample)) {
       return (
         <Checkbox
           inputRef={(ref) => { this.topSecretInput = ref; }}
@@ -124,7 +125,7 @@ export default class SampleForm extends React.Component {
   }
 
   decoupledCheckbox(sample) {
-    if (sample.can_update) {
+    if (permitOn(sample)) {
       return (
         <Checkbox
           inputRef={(ref) => { this.decoupledInput = ref; }}
@@ -194,7 +195,7 @@ export default class SampleForm extends React.Component {
         <Select
           name="stereoAbs"
           clearable={false}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
           options={absOptions}
           onChange={this.updateStereoAbs}
           value={value}
@@ -228,7 +229,7 @@ export default class SampleForm extends React.Component {
         <Select
           name="stereoRel"
           clearable={false}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
           options={relOptions}
           onChange={this.updateStereoRel}
           value={value}
@@ -252,7 +253,7 @@ export default class SampleForm extends React.Component {
           <Select.Creatable
             name="moleculeName"
             multi={false}
-            disabled={!sample.can_update}
+            disabled={!permitOn(sample)}
             options={moleculeNames}
             onOpen={onOpenMolName}
             onChange={this.updateMolName}
@@ -262,7 +263,7 @@ export default class SampleForm extends React.Component {
             clearable={false}
           />
           <InputGroup.Button>
-            {this.structureEditorButton(!sample.can_update)}
+            {this.structureEditorButton(!permitOn(sample))}
           </InputGroup.Button>
         </InputGroup>
       </FormGroup>
@@ -331,8 +332,8 @@ export default class SampleForm extends React.Component {
           type="text"
           value={(/^xref_/.test(field) ? sample.xref[field.split('xref_')[1]] : sample[field]) || ''}
           onChange={(e) => { this.handleFieldChanged(field, e.target.value); }}
-          disabled={disabled || !sample.can_update}
-          readOnly={disabled || !sample.can_update}
+          disabled={disabled || !permitOn(sample)}
+          readOnly={disabled || !permitOn(sample)}
         />
       </FormGroup>
     );
@@ -348,7 +349,7 @@ export default class SampleForm extends React.Component {
         multi={false}
         options={solventOptions}
         value={sample.solvent}
-        disabled={!sample.can_update}
+        disabled={!permitOn(sample)}
         onChange={e => this.handleFieldChanged('solvent', e)}
       />
     );
@@ -422,7 +423,7 @@ export default class SampleForm extends React.Component {
 
   sampleAmount(sample) {
     const content = [];
-    const isDisabled = !sample.can_update;
+    const isDisabled = !permitOn(sample);
     const volumeBlocked = !sample.has_density && !sample.has_molarity;
 
     if (sample.isMethodDisabled('amount_value') === false) {
@@ -474,7 +475,7 @@ export default class SampleForm extends React.Component {
           value={sample.description || ''}
           onChange={e => this.handleFieldChanged('description', e.target.value)}
           rows={2}
-          disabled={!sample.can_update}
+          disabled={!permitOn(sample)}
         />
       </FormGroup>
     );
@@ -483,7 +484,7 @@ export default class SampleForm extends React.Component {
   render() {
     const sample = this.props.sample || {};
     const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
-    const isDisabled = !sample.can_update;
+    const isDisabled = !permitOn(sample);
     const polyDisabled = isPolymer || isDisabled;
     const molarityBlocked = isDisabled ? true : this.state.molarityBlocked;
     const densityBlocked = isDisabled ? true : !molarityBlocked;
@@ -654,7 +655,7 @@ export default class SampleForm extends React.Component {
           </tr>
           <tr>
             <td colSpan="4">
-              <PrivateNoteElement element={sample} disabled={!sample.can_update} />
+              <PrivateNoteElement element={sample} disabled={!permitOn(sample)} />
             </td>
           </tr>
           {this.props.customizableField()}
diff --git a/app/packs/src/components/ViewSpectra.js b/app/packs/src/components/ViewSpectra.js
index 4f39d0c26..4d71a4280 100644
--- a/app/packs/src/components/ViewSpectra.js
+++ b/app/packs/src/components/ViewSpectra.js
@@ -190,14 +190,13 @@ class ViewSpectra extends React.Component {
     const sis = spcInfos.filter(x => x.idx === spcIdx);
     const si = sis.length > 0 ? sis[0] : spcInfos[0];
 
-    const opsTmp = sample.analysesContainers().map((ae) => {
+    const ops = sample.analysesContainers().map((ae) => {
       if (ae.id !== si.idAe) return null;
       return ae.children.map((ai) => {
         if (ai.id !== si.idAi) return null;
         return ai.extended_metadata.content.ops; // eslint-disable-line
       }).filter(r => r !== null);
-    }).filter(r => r !== null);
-    const ops = opsTmp && opsTmp[0] && opsTmp[0][0];
+    }).filter(r => r !== null)[0][0];
     return ops;
   }
 
@@ -663,13 +662,6 @@ class ViewSpectra extends React.Component {
             options={dsOptions}
             value={si.idDt}
             clearable={false}
-            style={{ width: 200 }}
-            onChange={e => this.onDSSelectChange(e)}
-          />
-          <TreeSelect
-            treeData={options}
-            value={isShowMultiSelect ? arrSpcIdx : idx}
-            treeCheckable={isShowMultiSelect}
             style={{ width: 500 }}
             maxTagCount={1}
             onChange={onSelectChange} />
@@ -705,7 +697,7 @@ class ViewSpectra extends React.Component {
   render() {
     const { showModal } = this.state;
 
-    const { jcamp, predictions, idx, listMuliSpcs, listEntityFiles } = this.getContent();
+    const { jcamp, predictions, idx } = this.getContent();
     const dialogClassName = 'spectra-editor-dialog';
     // WORKAROUND: react-stickydiv duplicates elements.
     const specElements = Array.from(document.getElementsByClassName(dialogClassName));
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/components/actions/EmbargoActions.js
index 1d8cfe0c9..f1b960db4 100644
--- a/app/packs/src/components/actions/EmbargoActions.js
+++ b/app/packs/src/components/actions/EmbargoActions.js
@@ -126,4 +126,4 @@ class EmbargoActions {
   }
 }
 
-export default alt.createActions(EmbargoActions);
\ No newline at end of file
+export default alt.createActions(EmbargoActions);
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
index 3e4f4c9ff..85b933111 100644
--- a/app/packs/src/components/actions/PublicActions.js
+++ b/app/packs/src/components/actions/PublicActions.js
@@ -294,6 +294,35 @@ class PublicActions {
   }
 
 
+  fetchUnitsSystem() {
+    return (dispatch) => { fetch('/units_system/units_system.json', {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: { 'cache-control': 'no-cache' }
+      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
+    }
+  }
+
+  fetchBasedOnSearchSelectionAndCollection(params) {
+    let uid;
+    NotificationActions.add({
+      title: "Searching ...",
+      level: "info",
+      position: "tc",
+      onAdd: function(notificationObject) { uid = notificationObject.uid; }
+    });
+    return (dispatch) => {
+      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
+        .then((result) => {
+          dispatch(result);
+          NotificationActions.removeByUid(uid);
+        }).catch((errorMessage) => { console.log(errorMessage); });
+    };
+  }
+
+
   fetchUnitsSystem() {
     return (dispatch) => { fetch('/units_system/units_system.json', {
         credentials: 'same-origin',
diff --git a/app/packs/src/components/contextActions/ExportImportButton.js b/app/packs/src/components/contextActions/ExportImportButton.js
index 67d355721..6776d91d5 100644
--- a/app/packs/src/components/contextActions/ExportImportButton.js
+++ b/app/packs/src/components/contextActions/ExportImportButton.js
@@ -36,10 +36,10 @@ const ExportImportButton = ({ isDisabled, updateModalProps, customClass }) => (
         title='Export as ZIP archive'>
         Export collections
       </MenuItem>
-      {/* <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
+      <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
         title='Import collections from ZIP archive'>
         Import collections
-      </MenuItem> */}
+      </MenuItem>
       {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
       {/*   title='Import from Docs'> */}
       {/*   Import elements from Docs */}
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 0dfcef140..3ffd9c9b2 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -39,7 +39,6 @@ const handleNotification = (nots, act, needCallback = true) => {
               const params = { ids: [] };
               params.ids[0] = n.id;
               MessagesFetcher.acknowledgedMessage(params);
-              // .then((result) => { console.log(JSON.stringify(result)); });
             }
           }
         }
@@ -51,9 +50,11 @@ const handleNotification = (nots, act, needCallback = true) => {
           CollectionActions.fetchRemoteCollectionRoots();
           break;
         case 'CollectionActions.fetchSyncInCollectionRoots':
+          CollectionActions.fetchSyncInCollectionRoots();
+          break;
         case 'Repository_ReviewRequest':
         case 'Repository_Published':
-          CollectionActions.fetchSyncInCollectionRoots();
+          // CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'Repository_ReviewRequest':
         case 'Repository_Published':
diff --git a/app/packs/src/components/elements/ElementFieldDragSource.js b/app/packs/src/components/elements/ElementFieldDragSource.js
index 62550e2d6..4acc90a8a 100644
--- a/app/packs/src/components/elements/ElementFieldDragSource.js
+++ b/app/packs/src/components/elements/ElementFieldDragSource.js
@@ -5,8 +5,6 @@ import DragDropItemTypes from '../../components/DragDropItemTypes';
 
 const listSource = {
   beginDrag(props) {
-    console.log('begin Drag');
-    console.log(props.field);
     return { field: props.field, layerKey: props.layerKey };
   },
 };
diff --git a/app/packs/src/components/elements/ElementFieldDropTarget.js b/app/packs/src/components/elements/ElementFieldDropTarget.js
index caf06404f..cb12e2a79 100644
--- a/app/packs/src/components/elements/ElementFieldDropTarget.js
+++ b/app/packs/src/components/elements/ElementFieldDropTarget.js
@@ -7,8 +7,6 @@ const fieldTarget = {
   drop(targetProps, monitor) {
     const targetTag = { field: targetProps.field, layerKey: targetProps.layerKey };
     const sourceProps = monitor.getItem();
-    console.log('drop--:', sourceProps);
-    console.log('drop--:', monitor);
     const sourceTag = { field: sourceProps.field, layerKey: sourceProps.layerKey };
     //if (targetTag.field !== sourceTag.field) {
       targetProps.onDrop({ sourceTag, targetTag });
diff --git a/app/packs/src/components/extra/SampleDetailsXTabs.js b/app/packs/src/components/extra/SampleDetailsXTabs.js
index 985076263..328f74875 100644
--- a/app/packs/src/components/extra/SampleDetailsXTabs.js
+++ b/app/packs/src/components/extra/SampleDetailsXTabs.js
@@ -1,3 +1,3 @@
 export default {
   count : 0,
-}
\ No newline at end of file
+}
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
index f74ffe9ae..1e6b8df6a 100644
--- a/app/packs/src/components/fetchers/EmbargoFetcher.js
+++ b/app/packs/src/components/fetchers/EmbargoFetcher.js
@@ -36,7 +36,6 @@ export default class EmbargoFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
-
   static moveEmbargo(id, newEmbargo, element) {
     const api = '/api/v1/repository/embargo/move';
     return fetch(api, {
@@ -50,7 +49,6 @@ export default class EmbargoFetcher {
     }).then(response => response.json())
       .catch((errorMessage) => { console.log(errorMessage); });
   }
-
   static refreshEmbargo(emb) {
     const api = '/api/v1/repository/embargo/refresh';
     return fetch(api, {
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
index 8d07f4ae4..f59f0f92d 100644
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/components/fetchers/GenericBaseFetcher.js
@@ -9,7 +9,6 @@ export default class GenericBaseFetcher {
   }
 
   static execData(params, path, method = 'POST') {
-    console.log(`/api/v1/${path}`);
     return fetch(`/api/v1/${path}`, {
       credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
     }).then(response => response.json()).then(json => json).catch((errorMessage) => {
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
index ea7a1557f..daaa7de4a 100644
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ b/app/packs/src/components/fetchers/RepositoryFetcher.js
@@ -179,7 +179,6 @@ export default class RepositoryFetcher {
   }
 
 
-
   static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
     const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
     const paramSearchValue = (searchValue && searchValue !== '') ? `&search_value=${searchValue}` : '';
@@ -329,7 +328,6 @@ export default class RepositoryFetcher {
         console.log(errorMessage);
       });
   }
-
   static saveRepoAuthors(params = {}) {
     return fetch('/api/v1/repository/save_repo_authors', {
       credentials: 'same-origin',
diff --git a/app/packs/src/components/generic/SegmentDetails.js b/app/packs/src/components/generic/SegmentDetails.js
index e75caca92..045fddaac 100644
--- a/app/packs/src/components/generic/SegmentDetails.js
+++ b/app/packs/src/components/generic/SegmentDetails.js
@@ -35,7 +35,7 @@ const addSegmentTabs = (element, onChange, contentMap) => {
     if (idx < 0 && !klass.is_active) return;
     let segment = {};
     if (idx > -1) {
-      segment = element.segments[idx];
+      segment = new Segment(element.segments[idx]);
     } else {
       segment = Segment.buildEmpty(cloneDeep(klass));
     }
diff --git a/app/packs/src/components/models/Element.js b/app/packs/src/components/models/Element.js
index 411ce36ef..f351911eb 100644
--- a/app/packs/src/components/models/Element.js
+++ b/app/packs/src/components/models/Element.js
@@ -28,7 +28,7 @@ export default class Element {
   checksum(fieldsToOmit = []) {
     return sha256(JSON.stringify(_.omit(_.omit(
       this,
-      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', ...fieldsToOmit],
+      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'sealed', ...fieldsToOmit],
     ), _.isEmpty)));
   }
 
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
index 34cbe97a4..0291e8aba 100644
--- a/app/packs/src/components/stores/PublicStore.js
+++ b/app/packs/src/components/stores/PublicStore.js
@@ -71,6 +71,7 @@ class PublicStore {
     } else if (this.guestPage === 'review') {
       Aviator.navigate('/review', { silent: true });
     } else {
+      console.log('else..........');
       Aviator.navigate('/publications', { silent: true });
     }
   }
@@ -197,6 +198,8 @@ class PublicStore {
     Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
   }
 
+
+
   handleReceiveSearchresult(result) {
     this.setState({ ...result.publicMolecules });
   }
@@ -275,6 +278,10 @@ class PublicStore {
   }
 
 
+  handleUnitsSystem(result) {
+    this.setState({ unitsSystem: result });
+  }
+
   handleUnitsSystem(result) {
     this.setState({ unitsSystem: result });
   }
diff --git a/app/packs/src/components/stores/UIStore.js b/app/packs/src/components/stores/UIStore.js
index ff56483de..fd25308b4 100644
--- a/app/packs/src/components/stores/UIStore.js
+++ b/app/packs/src/components/stores/UIStore.js
@@ -71,19 +71,6 @@ class UIStore {
       matrices: {}
     };
 
-    // console.log(this.state.klasses);
-    // // eslint-disable-next-line no-unused-expressions
-    // this.state.klasses && this.state.klasses.forEach((klass) => {
-    //   this.state[`${klass}`] = {
-    //     checkedAll: false,
-    //     checkedIds: List(),
-    //     uncheckedIds: List(),
-    //     currentId: null,
-    //     page: 1,
-    //     activeTab: 0,
-    //   };
-    // });
-
     this.bindListeners({
       handleInitialize: UIActions.initialize,
       handleSelectTab: UIActions.selectTab,
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
index fc707e2be..dd6285870 100644
--- a/app/packs/src/libHome/Home.js
+++ b/app/packs/src/libHome/Home.js
@@ -15,6 +15,7 @@ import Navigation from './Navigation';
 import XHome from '../components/extra/HomeXHome';
 import Notifications from '../components/Notifications';
 import RepoEmbargo from './RepoEmbargo';
+import RepoCollection from './RepoCollection';
 import RepoHome from './RepoHome';
 import RepoPubl from './RepoPubl';
 import RepoReview from './RepoReview';
diff --git a/app/packs/src/libHome/RepoCardIntro1.js b/app/packs/src/libHome/RepoCardIntro1.js
new file mode 100644
index 000000000..489b1f186
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardIntro1.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoCardLatestPublish from './RepoCardLatestPublish';
+
+const RepoCardIntro1 = ({ lastPublished }) => (
+  <div className="repo-intro" style={{ flexDirection: 'column' }}>
+    <Row style={{ display: 'flex', alignItems: 'center' }}>
+      <Col lg={6} md={6} sm={12}>
+        <img
+          className="icon-chemotion"
+          src="/images/repo/Chemotion-V1.png"
+          key="chemotion_full"
+          alt="Chemotion Repository"
+        />
+      </Col>
+      <Col lg={6} md={6} sm={12}>
+        <RepoCardLatestPublish lastPublished={lastPublished} />
+      </Col>
+    </Row>
+    <Row style={{ fontSize: '120%' }}>
+      <Col lg={12} md={12} sm={12}>
+        <ul className="list">
+          <li>
+            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
+          </li>
+          <li>
+            Automated registration at various scientific data providers
+          </li>
+          <li>
+            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
+            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
+          </li>
+        </ul>
+      </Col>
+    </Row>
+  </div>
+);
+
+export default RepoCardIntro1;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive1.js b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
new file mode 100644
index 000000000..db37aea03
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+// import Aviator from 'aviator';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+
+const RepoCardMoleculeArchive1 = () => {
+  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
+  return (
+    <Row className="repo-statistic">
+      <Col lg={12} md={12} sm={12}>
+        <h3>archive for materials</h3>
+      </Col>
+      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <Row className="rl">
+            <OverlayTrigger placement="top" overlay={tooltipView}>
+              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
+                <i className="icon-sample" />
+              </Button>
+            </OverlayTrigger>
+            <div className="tit">Samples</div>
+          </Row>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+          <div className="rr">
+            <div className="cnt">
+              <CountUp end={1680} />
+            </div>
+            <div className="italic-desc">Compounds</div>
+          </div>
+        </Col>
+      </Col>
+      <Col lg={12} md={12} sm={12}>
+        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
+          <img
+            className="icon-molecule-archive2"
+            src="/images/repo/molecule-archive-logo-weiss.svg"
+            key="chemotion_full"
+            alt="Molecule Archive"
+          />
+        </Col>
+        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
+          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
+        </Col>
+      </Col>
+    </Row>
+  );
+};
+
+export default RepoCardMoleculeArchive1;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard1.js b/app/packs/src/libHome/RepoCardStaticsBoard1.js
new file mode 100644
index 000000000..75dabf684
--- /dev/null
+++ b/app/packs/src/libHome/RepoCardStaticsBoard1.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SVG from 'react-inlinesvg';
+import CountUp from 'react-countup';
+import PublicActions from '../components/actions/PublicActions';
+import PublicStore from '../components/stores/PublicStore';
+import { HomeFeature } from './RepoCommon';
+import RepoNavListTypes from './RepoNavListTypes';
+
+const RepoCardStaticsBoard1 = (params) => {
+  const { publishedStatics } = params;
+  if (publishedStatics && publishedStatics.length !== 0) {
+    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
+    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
+    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
+    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
+    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
+    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
+    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
+    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
+    const stsAnalysisCnt = stsAnalysisSort
+      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
+    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
+    const pubPage = { sample: `publications=${RepoNavListTypes.SAMPLE}`, reaction: `publications=${RepoNavListTypes.REACTION}` };
+    return (
+      <Row className="repo-statistic">
+        <Col lg={12} md={12} sm={12}>
+          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                  <i className="icon-sample" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Samples</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsSample.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <OverlayTrigger placement="top" overlay={tooltipView}>
+                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                  <i className="icon-reaction" />
+                </Button>
+              </OverlayTrigger>
+              <div className="tit">Reactions</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt">
+                <CountUp end={stsReaction.e_cnt} />{' '}
+                <OverlayTrigger placement="top" overlay={tooltipView}>
+                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
+                    published
+                  </Button>
+                </OverlayTrigger>
+              </div>
+              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
+              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
+            </Row>
+          </Col>
+        </Col>
+        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rl">
+              <i className="fa fa-area-chart i-ext" aria-hidden />
+              <div className="tit">Analyses</div>
+            </Row>
+          </Col>
+          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
+            <Row className="rr">
+              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
+              <div style={{ display: 'flex' }}>
+                <div>Top 3:&nbsp;&nbsp;</div>
+                <div className="italic-desc">
+                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
+                  <br />
+                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
+                  <br />
+                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    );
+  }
+  return <div />;
+};
+
+export default RepoCardStaticsBoard1;
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
index 1e8e35dbf..4c210b6e7 100644
--- a/app/packs/src/libHome/RepoCollection.js
+++ b/app/packs/src/libHome/RepoCollection.js
@@ -87,10 +87,12 @@ export default class RepoCollection extends Component {
   }
 
   componentDidMount() {
+    EmbargoStore.listen(this.onChange);
     PublicStore.listen(this.onChange);
   }
 
   componentWillUnmount() {
+    EmbargoStore.unlisten(this.onChange);
     PublicStore.unlisten(this.onChange);
   }
 
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
index 2378f7c8c..2490ac609 100644
--- a/app/packs/src/libHome/RepoCommon.js
+++ b/app/packs/src/libHome/RepoCommon.js
@@ -115,16 +115,6 @@ ChemotionId.propTypes = {
 const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
 
 
-const AuthorTitle = (authorIds) => {
-  if (authorIds && authorIds.length > 1) {
-    return 'Authors:';
-  }
-  if (authorIds && authorIds.length === 1) {
-    return 'Author:';
-  }
-  return '';
-};
-
 const NewsroomTemplate = {
   title: '', content: {}, article: []
 };
@@ -172,17 +162,17 @@ const LicenseLegalCode = (cp) => {
 
 const nmrMsg = (sample, container) => {
   if (sample.molecule && container.extended_metadata &&
-    (typeof container.extended_metadata.kind === 'undefined' ||
-      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId)
+    (typeof container.extended_metadata?.kind === 'undefined' ||
+      (container.extended_metadata?.kind?.split('|')[0].trim() !== chmoConversions.nmr_1h?.termId && container.extended_metadata.kind?.split('|')[0].trim() !== chmoConversions.nmr_13c?.termId)
     )) {
     return '';
   }
   const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
 
-  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
+  if (container.extended_metadata.kind?.split('|')[0].trim() === chmoConversions.nmr_1h?.termId) {
     const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
     return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
-  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
+  } else if (container.extended_metadata?.kind?.split('|')[0].trim() === chmoConversions.nmr_13c?.termId) {
     const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
     return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
   }
@@ -196,9 +186,9 @@ const isFileTypePass = (analysisType, attachments) => {
   let files = [];
   switch (analysisType) {
     case '1H NMR':
-    case chmoConversions.nmr_1h.termId:
+    case chmoConversions.nmr_1h?.termId:
     case '13C NMR':
-    case chmoConversions.nmr_13c.termId:
+    case chmoConversions.nmr_13c?.termId:
     case '15N NMR':
     case 'NMR':
     case 'IR':
@@ -239,10 +229,10 @@ const isDatasetPass = (analysis) => {
 const isNmrPass = (analysis, sample) => {
   const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
   const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
+  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h?.termId && nmrType !== chmoConversions.nmr_13c?.termId) return true;
+  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h?.termId) {
     return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
+  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c?.termId) {
     return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
   }
   return true;
@@ -603,16 +593,6 @@ const BackSoonPage = () => {
   );
 };
 
-const ShowIndicator = (show) => {
-  return show ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-};
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '2px',
-  marginRight: '2px'
-};
-
 const IconToMyDB = ({
   id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
 }) => {
@@ -1057,6 +1037,14 @@ const RenderAnalysisHeader = (props) => {
           <RepoSegment segments={element.segments} />
         </Col>
       </Row>
+      <Row>
+        <Col sm={12} md={12} lg={12}>
+          <h5><b>Physical Properties:</b></h5>
+          <div>Melting point: {getFormattedRange(element.melting_point)}</div>
+          <div>Boiling point: {getFormattedRange(element.boiling_point)}</div>
+        </Col>
+      </Row>
+      < br/>
     </div>
   );
 };
@@ -2335,7 +2323,6 @@ export {
   AnalysesTypeJoinLabel,
   AffiliationList,
   AuthorList,
-  AuthorTitle,
   BackSoonPage,
   CalcDuration,
   ChemotionId,
@@ -2379,7 +2366,6 @@ export {
   SchemeWord,
   SidToPubChem,
   OrcidIcon,
-  ShowIndicator,
   SvgPath,
   ToggleIndicator,
   CollectionDesc
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
index c25ad2e27..f5e415153 100644
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ b/app/packs/src/libHome/RepoEmbargoModal.js
@@ -32,6 +32,28 @@ const Doi = (props) => {
   );
 };
 
+const Doi = (props) => {
+  const {
+    type, id, doi
+  } = props;
+
+  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
+  const data = (
+    <span>
+      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
+        {doi}
+      </Button>
+      <DownloadMetadataBtn type={type} id={id} />
+    </span>
+  );
+  return (
+    <h5>
+      <b>{title} </b>
+      {data}
+    </h5>
+  );
+};
+
 const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {
   const contentUrl = `/api/v1/public/metadata/download?type=${elementType.toLowerCase()}&id=${elementId}`;
   return (
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
index 40c0e1938..f471669d8 100644
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ b/app/packs/src/libHome/RepoReactionDetails.js
@@ -6,7 +6,6 @@ import { RepoCommentModal } from 'repo-review-ui';
 import ArrayUtils from '../components/utils/ArrayUtils';
 import {
   AuthorList,
-  AuthorTitle,
   AffiliationList,
   CalcDuration,
   ChemotionId,
@@ -44,6 +43,7 @@ import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
 import RepoReviewButtonBar from './RepoReviewButtonBar';
 import Sample from '../components/models/Sample';
 import RepoSegment from './RepoSegment';
+import { getAuthorLabel } from '../components/chemrepo/publication-utils';
 
 export default class RepoReactionDetails extends Component {
   constructor(props) {
@@ -694,7 +694,7 @@ export default class RepoReactionDetails extends Component {
               showHelp={schemeOnly}
             />
             <h5>
-              <b>{AuthorTitle(taggData.author_ids)} </b>
+              <b>{getAuthorLabel(taggData.author_ids)} </b>
               <AuthorList
                 creators={taggData.creators}
                 affiliationMap={affiliationMap}
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
index f168c18fd..9a16010c0 100644
--- a/app/packs/src/libHome/RepoReview.js
+++ b/app/packs/src/libHome/RepoReview.js
@@ -290,7 +290,6 @@ export default class RepoReview extends Component {
         console.log(errorMessage);
       });
   }
-
   renderMenuItems(t, elements) {
     const menu = elements.map(element => (
       <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
index efafcd440..ee9b02cfd 100644
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ b/app/packs/src/libHome/RepoReviewDetails.js
@@ -28,7 +28,6 @@ export default class RepoReviewDetails extends Component {
     this.setState(prevState => ({ ...prevState, ...state }));
   }
 
-
   switchTypeRender() {
     const { currentElement, elementType } = this.state;
     if (typeof (currentElement) === 'undefined' || !currentElement) {
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
index 45739c2f3..6bfd74e1d 100644
--- a/app/packs/src/libHome/RepoSample.js
+++ b/app/packs/src/libHome/RepoSample.js
@@ -49,6 +49,7 @@ export default class RepoSample extends Component {
     this.handleAnalysesLink = this.handleAnalysesLink.bind(this);
     this.handleMaterialLink = this.handleMaterialLink.bind(this);
     this.toggleSA = this.toggleSA.bind(this);
+    this.toggleSG = this.toggleSG.bind(this);
     this.renderAnalyses = this.renderAnalyses.bind(this);
   }
 
@@ -73,6 +74,10 @@ export default class RepoSample extends Component {
     this.setState({ expandSA: !expandSA });
   }
 
+  toggleSG(sg) {
+    this.setState({ expandSG: sg.uuid });
+  }
+
   updateRepoXvial(elementId) {
     const { listType } = this.props;
     PublicActions.displayMolecule(elementId, '', false, '', '', listType);
@@ -246,7 +251,6 @@ export default class RepoSample extends Component {
           handleMaterialLink={this.handleMaterialLink}
         />
         <br />
-        <br />
         <div ref={this.materialRef}>
           <MAPanel
             isEditable={isReviewer}
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
index c5234508e..ecc036a22 100644
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ b/app/packs/src/libHome/RepoSampleDetails.js
@@ -132,7 +132,9 @@ export default class RepoSampleDetails extends Component {
         molecule_iupac: molecule.iupac_name || [],
         molecule_id: molecule.id,
         analyses: s.analyses || element.analyses || [],
-        segments: s.segments || []
+        segments: s.segments || [],
+        boiling_point: s.boiling_point || '',
+        melting_point: s.melting_point || '',
       };
 
       return (
diff --git a/app/packs/src/libHome/homeRoutes.js b/app/packs/src/libHome/homeRoutes.js
index 07dff3ff2..6e44b7620 100644
--- a/app/packs/src/libHome/homeRoutes.js
+++ b/app/packs/src/libHome/homeRoutes.js
@@ -64,6 +64,15 @@ const routes = {
     },
     '/': 'show'
   },
+  '/moleculeArchive': {
+    target: {
+      show: function(e) {
+        PublicActions.getMolecules({ listType: RepoNavListTypes.MOLECULE_ARCHIVE });
+        PublicActions.openRepositoryPage(`publications=${RepoNavListTypes.MOLECULE_ARCHIVE}`)
+      },
+    },
+    '/': 'show'
+  },
   '/review': {
     target: {
       show: function(e) {
diff --git a/app/serializers/molecule_guest_serializer.rb b/app/serializers/molecule_guest_serializer.rb
index e847a219e..981e8430c 100644
--- a/app/serializers/molecule_guest_serializer.rb
+++ b/app/serializers/molecule_guest_serializer.rb
@@ -1,4 +1,4 @@
 class MoleculeGuestSerializer < ActiveModel::Serializer
   attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight, :molfile
+    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight
 end
diff --git a/config/deploy/server_chemotion_net.rb b/config/deploy/server_chemotion_net.rb
deleted file mode 100644
index 5605490e5..000000000
--- a/config/deploy/server_chemotion_net.rb
+++ /dev/null
@@ -1,52 +0,0 @@
-#user = 'chemotion'
-user = 'prod'
-
-set :repo_url, 'git@git.scc.kit.edu:ComPlat/chemotion_REPO.git'
-set :branch, 'server_chemotion_net'
-
-#before 'deploy:migrate', 'deploy:backup'
-
-server 'www.chemotion.net', user: user, roles: %w{app web db}
-#server '141.52.79.134', user: user, roles: %w{app web db}
-
-set :ssh_options, {
-  forward_agent: false,
-  auth_methods: %w(publickey)
-}
-#set :pty, false
-
-set :linked_files, fetch(:linked_files, []).push(
-  '.ruby-version',
-  '.ruby-gemset',
-  'config/compound_open_data.yml',
-  'config/ketcher_service.yml',
-  'config/spectra.yml',
-  'config/converter.yml',
-  'config/node_service.yml'
-)
-set :linked_dirs, fetch(:linked_dirs, []).push(
-  'public/newsroom',
-  'public/howto',
-  'public/ontologies'
-)
-
-#set :deploy_to, "/home/#{user}/www/chemotion"
-set :deploy_to, "/var/www/chemotion_REPO"
-#set :tmp_dir, "/home/#{user}/tmp"
-set :user, user
-
-#set :bundle_without, %w{}.join(' ')
-set :bundle_flags, '--frozen --deployment ' #--quiet
-
-#set :slackistrano, {
-#  klass: Slackistrano::SlackistranoCustomMessaging,
-#  channel: '#cap_deploy',
-#  webhook: 'https://hooks.slack.com/services/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'
-#}
-set :log_file, 'log/cap-server_complat-eln.log'
-set :slack_members, ['pi_r', 'nicole']
-
-set :git_current_rev, ->{ `git rev-list --max-count=1 #{fetch(:branch, 'development')}`&.strip }
-set :git_base_rev, ->{ `git merge-base development #{fetch(:branch, 'development')}`&.strip }
-set :git_url, ->{ "https://git.scc.kit.edu/ComPlat/chemotion_REPO/network/#{fetch(:git_base_rev, 'development')}" }
-set :git_log_message, ->{ `git log -1   #{fetch(:git_base_rev, 'development')}` }
diff --git a/config/routes.rb b/config/routes.rb
index 462d8b8c7..7bd7c5f48 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -64,7 +64,7 @@
     get 'generic_datasets_admin', to: 'pages#gda'
   end
 
-  get 'home/*any', to: 'pages#home'
+  # get 'home/*any', to: 'pages#home'
   get 'home', to: 'pages#home'
 
   # Standalone page for ChemScanner
diff --git a/db/migrate/20220712100000_add_segment_klass_identifier.rb b/db/migrate/20220712100000_add_segment_klass_identifier.rb
index 76b880ad5..bfec90a9e 100644
--- a/db/migrate/20220712100000_add_segment_klass_identifier.rb
+++ b/db/migrate/20220712100000_add_segment_klass_identifier.rb
@@ -5,9 +5,12 @@ class AddSegmentKlassIdentifier < ActiveRecord::Migration[5.2]
   def self.up
     execute 'CREATE EXTENSION IF NOT EXISTS pgcrypto;'
     add_column :segment_klasses, :identifier, :string unless column_exists? :segment_klasses, :identifier
+    add_column :segment_klasses, :sync_time, :datetime unless column_exists? :segment_klasses, :sync_time
+    SegmentKlass.where(identifier: nil).find_each { |sk| sk.update!(identifier: SecureRandom.uuid) }
   end
 
   def self.down
     remove_column :segment_klasses, :identifier if column_exists? :segment_klasses, :identifier
+    remove_column :segment_klasses, :sync_time if column_exists? :segment_klasses, :sync_time
   end
 end
diff --git a/db/schema.rb b/db/schema.rb
index a8b28b954..911d9e35f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -545,31 +545,10 @@
     t.index ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id"
   end
 
-  add_index "element_klasses_revisions", ["element_klass_id"], name: "index_element_klasses_revisions_on_element_klass_id", using: :btree
-  create_table "dois", force: :cascade do |t|
-    t.integer  "molecule_id"
-    t.string   "inchikey"
-    t.integer  "molecule_count"
-    t.integer  "analysis_id"
-    t.string   "analysis_type"
-    t.integer  "analysis_count"
-    t.jsonb    "metadata",       default: {}
-    t.boolean  "minted",         default: false
-    t.datetime "minted_at"
-    t.datetime "created_at",                     null: false
-    t.datetime "updated_at",                     null: false
-    t.integer  "doiable_id"
-    t.string   "doiable_type"
-    t.string   "suffix"
-  end
-
-  add_index "dois", ["inchikey", "molecule_count", "analysis_type", "analysis_count"], name: "index_on_dois", unique: true, using: :btree
-  add_index "dois", ["suffix"], name: "index_dois_on_suffix", unique: true, using: :btree
-
-  create_table "element_tags", force: :cascade do |t|
-    t.string   "taggable_type"
-    t.integer  "taggable_id"
-    t.jsonb    "taggable_data"
+  create_table "element_tags", id: :serial, force: :cascade do |t|
+    t.string "taggable_type"
+    t.integer "taggable_id"
+    t.jsonb "taggable_data"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.index ["taggable_id"], name: "index_element_tags_on_taggable_id"
@@ -1857,9 +1836,39 @@
   SQL
 
   create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
-      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE PROCEDURE update_users_matrix()
+      CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
+  SQL
+  create_trigger :set_segment_klasses_identifier, sql_definition: <<-SQL
+      CREATE TRIGGER set_segment_klasses_identifier AFTER INSERT ON public.segment_klasses FOR EACH STATEMENT EXECUTE FUNCTION set_segment_klasses_identifier()
   SQL
 
+  create_view "compound_open_data_locals", sql_definition: <<-SQL
+      SELECT c.x_id,
+      c.x_sample_id,
+      c.x_data,
+      c.x_created_at,
+      c.x_updated_at,
+      c.x_inchikey,
+      c.x_sum_formular,
+      c.x_cano_smiles,
+      c.x_external_label,
+      c.x_short_label,
+      c.x_name,
+      c.x_stereo
+     FROM ( SELECT NULL::integer AS x_id,
+              NULL::integer AS x_sample_id,
+              NULL::jsonb AS x_data,
+              NULL::timestamp without time zone AS x_created_at,
+              NULL::timestamp without time zone AS x_updated_at,
+              NULL::character varying AS x_inchikey,
+              NULL::character varying AS x_sum_formular,
+              NULL::character varying AS x_cano_smiles,
+              NULL::character varying AS x_external_label,
+              NULL::character varying AS x_short_label,
+              NULL::character varying AS x_name,
+              NULL::jsonb AS x_stereo) c
+    WHERE (c.x_id IS NOT NULL);
+  SQL
   create_view "literal_groups", sql_definition: <<-SQL
       SELECT lits.element_type,
       lits.element_id,
@@ -2022,31 +2031,4 @@
        JOIN samples ON (((samples.id = col_samples.sample_id) AND (samples.deleted_at IS NULL))))
     WHERE (cols.deleted_at IS NULL);
   SQL
-  create_view "compound_open_data_locals", sql_definition: <<-SQL
-      SELECT c.x_id,
-      c.x_sample_id,
-      c.x_data,
-      c.x_created_at,
-      c.x_updated_at,
-      c.x_inchikey,
-      c.x_sum_formular,
-      c.x_cano_smiles,
-      c.x_external_label,
-      c.x_short_label,
-      c.x_name,
-      c.x_stereo
-     FROM ( SELECT NULL::integer AS x_id,
-              NULL::integer AS x_sample_id,
-              NULL::jsonb AS x_data,
-              NULL::timestamp without time zone AS x_created_at,
-              NULL::timestamp without time zone AS x_updated_at,
-              NULL::character varying AS x_inchikey,
-              NULL::character varying AS x_sum_formular,
-              NULL::character varying AS x_cano_smiles,
-              NULL::character varying AS x_external_label,
-              NULL::character varying AS x_short_label,
-              NULL::character varying AS x_name,
-              NULL::jsonb AS x_stereo) c
-    WHERE (c.x_id IS NOT NULL);
-  SQL
 end
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index 9721dfbbe..aed183057 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -175,6 +175,8 @@ def fetch_samples(collection)
         segment, @attachments = Labimotion::Export.fetch_segments(sample, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
+        @segments += fetch_segments(sample)
+
         # fetch containers, attachments and literature
         fetch_containers(sample)
         fetch_literals(sample)
@@ -365,6 +367,33 @@ def fetch_containers(containable)
     end
     # rubocop:enable Metrics/MethodLength
 
+    def fetch_element_klasses
+      klasses = ElementKlass.where(is_active: true, is_generic: false)
+      fetch_many(klasses, {'created_by' => 'User'})
+    end
+
+    def fetch_segment_klasses
+      klasses = SegmentKlass.where(is_active: true)
+      fetch_many(klasses, {'created_by' => 'User'})
+    end
+
+    def fetch_segments(element)
+      element_type = element.class.name
+      segments = Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
+      segments.each do |segment|
+        segment = fetch_properties(segment)
+        fetch_one(segment.segment_klass.element_klass)
+        fetch_one(segment.segment_klass, {
+          'element_klass_id' => 'ElementKlass'
+        })
+        fetch_one(segment, {
+          'element_id' => segment.element_type,
+          'segment_klass_id' => 'SegmentKlass',
+          'created_by' => 'User'
+        })
+      end
+    end
+
     def fetch_literals(element)
       element_type = element.class.name
 
@@ -380,6 +409,60 @@ def fetch_literals(element)
       end
     end
 
+    def fetch_properties(instance)
+      properties = instance.properties
+      properties['layers'].keys.each do |key|
+        layer = properties['layers'][key]
+
+        # field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }  -- TODO for elements
+        # field_elements = layer['fields'].select { |ss| ss['type'] == 'drag_element' }  -- TODO for elements
+
+        field_molecules = layer['fields'].select { |ss| ss['type'] == 'drag_molecule' }
+        field_molecules.each do |field|
+          idx = properties['layers'][key]['fields'].index(field)
+          id = field["value"] && field["value"]["el_id"] unless idx.nil?
+          mol = Molecule.find(id) unless id.nil?
+          properties['layers'][key]['fields'][idx]['value']['el_id'] = fetch_one(mol) unless mol.nil?
+        end
+
+        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
+        field_uploads.each do |upload|
+          idx = properties['layers'][key]['fields'].index(upload)
+          files = upload["value"] && upload["value"]["files"]
+          files&.each_with_index do |fi, fdx|
+            att = Attachment.find(fi['aid'])
+            @attachments += [att]
+            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Segment'}) unless att.nil?
+          end
+        end
+
+        field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
+        field_tables&.each do |field|
+          next unless field['sub_values'].present? && field['sub_fields'].present?
+          # field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }  -- not available yet
+          # field_table_uploads = field['sub_fields'].select { |ss| ss['type'] == 'upload' }       -- not available yet
+          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
+          if field_table_molecules.present?
+            col_ids = field_table_molecules.map { |x| x.values[0] }
+            col_ids.each do |col_id|
+              field['sub_values'].each do |sub_value|
+                next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
+
+                svalue = sub_value[col_id]['value']
+                next unless svalue['el_id'].present? && svalue['el_inchikey'].present?
+
+                tmol = Molecule.find_by(id: svalue['el_id'])
+                sub_value[col_id]['value']['el_id'] = fetch_one(tmol) unless tmol.nil?
+              end
+            end
+          end
+        end
+
+      end
+      instance.properties = properties
+      instance
+    end
+
     def fetch_many(instances, foreign_keys = {})
       instances.each do |instance|
         fetch_one(instance, foreign_keys)
diff --git a/package.json b/package.json
index 00f57fd8c..2f6b61e77 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "react-color": "^2.17.3",
     "react-contextmenu": "^2.14.0",
     "react-cookie": "^0.4.8",
+    "react-countup": "^6.3.2",
     "react-datepicker": "~1.4.1",
     "react-datetime-picker": "^4.1.1",
     "react-dnd": "^14.0.3",
diff --git a/public/images/wild_card/ORCIDiD_iconvector.svg b/public/images/wild_card/ORCIDiD_iconvector.svg
deleted file mode 100644
index 2bddf44f1..000000000
--- a/public/images/wild_card/ORCIDiD_iconvector.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#A6CE39;}
-	.st1{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M256,128c0,70.7-57.3,128-128,128C57.3,256,0,198.7,0,128C0,57.3,57.3,0,128,0C198.7,0,256,57.3,256,128z"/>
-<g>
-	<path class="st1" d="M86.3,186.2H70.9V79.1h15.4v48.4V186.2z"/>
-	<path class="st1" d="M108.9,79.1h41.6c39.6,0,57,28.3,57,53.6c0,27.5-21.5,53.6-56.8,53.6h-41.8V79.1z M124.3,172.4h24.5
-		c34.9,0,42.9-26.5,42.9-39.7c0-21.5-13.7-39.7-43.7-39.7h-23.7V172.4z"/>
-	<path class="st1" d="M88.7,56.8c0,5.5-4.5,10.1-10.1,10.1c-5.6,0-10.1-4.6-10.1-10.1c0-5.6,4.5-10.1,10.1-10.1
-		C84.2,46.7,88.7,51.3,88.7,56.8z"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/public/sprite.png b/public/sprite.png
deleted file mode 100644
index 3e11aefb630cd6c8fbc3157e75739a83d3db6ae4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 113523
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
TYf+{`;6p)9^<~*}<B$IXguxF0

diff --git a/public/swagger_doc.json b/public/swagger_doc.json
deleted file mode 100644
index a20efd57f..000000000
--- a/public/swagger_doc.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "info": {
-    "title": "Chemotion ELN",
-    "version": "0.0.1"
-  },
-  "swagger": "2.0",
-  "produces": [
-    "application/json"
-  ],
-  "host": "localhost:3000",
-  "tags": [
-    {
-      "name": "samples",
-      "description": "Operations about samples"
-    }
-  ],
-  "paths": {
-    "/api/v1/samples": {
-      "get": {
-        "description": "Return serialized sample by id",
-        "produces": [
-          "application/json"
-        ],
-        "parameters": [
-          {
-            "in": "path",
-            "name": "id",
-            "description": "Sample id",
-            "type": "integer",
-            "format": "int32",
-            "required": true
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Return serialized sample by id"
-          }
-        },
-        "tags": [
-          "samples"
-        ],
-        "operationId": "getApiV1SamplesId"
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/spec/examples.txt b/spec/examples.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/yarn.lock b/yarn.lock
index f6702c0b5..7a409331e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -714,6 +714,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-syntax-jsx@^7.17.12":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -1579,6 +1586,42 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
+"@emotion/babel-plugin@^11.10.0":
+  version "11.10.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
+  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/babel-plugin@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
+  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -3385,6 +3428,16 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.25"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
+  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-slick@^0.23.4":
   version "0.23.8"
   resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.8.tgz"
@@ -3803,6 +3856,18 @@ agent-base@5:
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
+ag-grid-react@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
+  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
+  dependencies:
+    prop-types "^15.8.1"
+
+agent-base@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
+  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
+
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -4254,6 +4319,20 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -4319,7 +4398,22 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-syntax-jsx@^6.18.0:
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
+
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
@@ -4329,6 +4423,227 @@ babel-plugin-syntax-object-rest-spread@^6.8.0:
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
+
+babel-plugin-transform-async-to-generator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
+  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
+  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
+  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
+  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
+  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
+  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
+  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -4337,7 +4652,109 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-plugin-transform-react-display-name@^6.23.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
+  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
+  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-source@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
+  dependencies:
+    babel-helper-builder-react-jsx "^6.24.1"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
+  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^3.2.6"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
+babel-preset-flow@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
+  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-react@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
+  dependencies:
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.23.0"
+    babel-plugin-transform-react-jsx "^6.24.1"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+    babel-preset-flow "^6.23.0"
+
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -4345,6 +4762,47 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -4882,6 +5340,11 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chroma-js@^1.3.7:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
+  integrity sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz"
@@ -5414,6 +5877,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+countup.js@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-2.3.2.tgz#9a91d95780be1c908d1e6feb548625f353f57988"
+  integrity sha512-dQ7F/CmKGjaO6cDfhtEXwsKVlXIpJ89dFs8PvkaZH9jBVJ2Z8GU4iwG/qP7MgY8qwr+1skbwR6qecWWQLUzB8Q==
+
 crc-32@~1.2.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.1.tgz"
@@ -5593,7 +6061,7 @@ d3-brush@1:
     d3-selection "1"
     d3-transition "1"
 
-d3-brush@2:
+d3-brush@2, d3-brush@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
   integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
@@ -6208,7 +6676,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -6361,6 +6829,11 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -7107,6 +7580,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
@@ -8658,6 +9136,13 @@ is-core-module@^2.9.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz"
@@ -9146,6 +9631,11 @@ jquery@^3.4.0:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
 
+jquery@^3.4.0:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
+  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -10084,6 +10574,13 @@ mime-types@^2.1.31, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
+mime-types@^2.1.25:
+  version "2.1.34"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
+  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
+  dependencies:
+    mime-db "1.51.0"
+
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
@@ -11250,6 +11747,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz"
@@ -11438,6 +11940,11 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise-polyfill@^8.0.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz"
@@ -12279,6 +12786,14 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.2"
     react-popper "^2.3.0"
 
+react-countup@^6.3.2:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.4.0.tgz#f18d24e40c37c465b29353172cc8b3b5e82f3241"
+  integrity sha512-7vvz0IIcDwWdd1JDzDB3z+9wSWL5Cf7pqwMPUXnIe66M3UXZyMWrvTp1p96wpPgg8/v4Gvf8YLvJoO+34G0GMA==
+  dependencies:
+    "@rollup/plugin-babel" "^6.0.2"
+    countup.js "^2.3.2"
+
 react-datepicker@~1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.4.1.tgz"
@@ -12543,6 +13058,13 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
+react-nglviewer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.5.0.tgz#920f3332d56aa4ed002978fefc83974d6fe232ec"
+  integrity sha512-6zAJY2uJ6TcyFICdaLkKC0Q+2vq/nlsuNFF4yEJosIt1qz8FF8b+GLmQcEvYRHGK7mhMO91rBX2j8qA0rrTz/w==
+  dependencies:
+    ngl "^2.1.0"
+
 react-notification-system@^0.2.17, react-notification-system@^0.2.7:
   version "0.2.17"
   resolved "https://registry.npmjs.org/react-notification-system/-/react-notification-system-0.2.17.tgz"
@@ -12677,6 +13199,18 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+react-redux@^7.2.0:
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-redux@^7.2.4:
   version "7.2.6"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"
@@ -12883,6 +13417,16 @@ react-transition-group@^4.4.0, react-transition-group@^4.4.1, react-transition-g
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-transition-group@^4.4.0, react-transition-group@^4.4.1:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-treeview@0.4.7:
   version "0.4.7"
   resolved "https://registry.npmjs.org/react-treeview/-/react-treeview-0.4.7.tgz"
@@ -13138,6 +13682,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -13148,6 +13697,15 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -13192,6 +13750,15 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -13381,6 +13948,15 @@ resolve@^1.19.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.19.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -13994,6 +14570,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+sprintf-js@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
+  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
@@ -14409,6 +14990,11 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -15499,6 +16085,14 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From ee0d80b26a1ad52f258fad1a237038575b1e4ed6 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Tue, 16 Jan 2024 16:57:58 +0100
Subject: [PATCH 252/258] Chemotion Repository 2.0.0

---
 .env.production.example                       |    2 +-
 CHANGELOG.md                                  |  794 +---
 README.md                                     |   37 +-
 app/api/chemotion/attachment_api.rb           |  112 -
 app/api/chemotion/collection_api.rb           |   29 +-
 app/api/chemotion/converter_api.rb            |   68 -
 app/api/chemotion/element_api.rb              |    7 -
 app/api/chemotion/gate_api.rb                 |   72 -
 app/api/chemotion/generic_dataset_api.rb      |   27 -
 app/api/chemotion/generic_element_api.rb      |  427 --
 app/api/chemotion/public_api.rb               | 1145 -----
 app/api/chemotion/repository_api.rb           |    1 +
 app/api/chemotion/search_api.rb               |    1 +
 app/api/chemotion/segment_api.rb              |   99 -
 app/api/chemotion/sync_collection_api.rb      |   36 -
 app/api/chemotion/user_api.rb                 |  127 -
 app/api/entities/dataset_entity.rb            |   15 -
 app/api/entities/dataset_klass_entity.rb      |   11 -
 app/api/entities/element_klass_entity.rb      |   11 -
 app/api/entities/element_revision_entity.rb   |   55 -
 app/api/entities/generic_entity.rb            |   52 -
 app/api/entities/generic_public_entity.rb     |   16 -
 app/api/entities/klass_revision_entity.rb     |   20 -
 app/api/entities/segment_entity.rb            |   61 -
 app/api/entities/segment_klass_entity.rb      |   13 -
 app/api/entities/segment_revision_entity.rb   |   54 -
 app/api/helpers/collection_helpers.rb         |   23 -
 app/api/helpers/generic_helpers.rb            |  105 -
 app/api/helpers/sample_association_helpers.rb |  100 -
 app/assets/stylesheets/common.scss            |   85 -
 app/assets/stylesheets/repo_home.scss         |   31 +-
 app/jobs/chemotion_embargo_pubchem_job.rb     |   19 -
 app/mailers/publication_mailer.rb             |    2 +-
 app/models/chemscanner/molecule.rb            |  112 -
 app/models/chemscanner/reaction.rb            |  113 -
 app/models/chemscanner/reaction_step.rb       |   38 -
 app/models/chemscanner/reactions_molecule.rb  |   37 -
 .../chemscanner/reactions_product_molecule.rb |   22 -
 .../reactions_reactant_molecule.rb            |   22 -
 .../chemscanner/reactions_reagent_molecule.rb |   22 -
 .../chemscanner/reactions_solvent_molecule.rb |   22 -
 app/models/chemscanner/scheme.rb              |   87 -
 app/models/chemscanner/source.rb              |  138 -
 app/models/collections_element.rb             |   52 -
 app/models/concerns/attachment_converter.rb   |   21 -
 app/models/concerns/attachment_jcamp_aasm.rb  |   24 -
 app/models/concerns/datasetable.rb            |   43 -
 .../concerns/generic_klass_revisions.rb       |   20 -
 app/models/concerns/generic_revisions.rb      |   40 -
 app/models/concerns/segmentable.rb            |   66 -
 app/models/dataset.rb                         |   22 -
 app/models/dataset_klass.rb                   |   40 -
 app/models/dataset_klasses_revision.rb        |   25 -
 app/models/datasets_revision.rb               |   24 -
 app/models/element.rb                         |  101 -
 app/models/element_klass.rb                   |   42 -
 app/models/element_klasses_revision.rb        |   24 -
 app/models/elements_revision.rb               |   25 -
 app/models/elements_sample.rb                 |   26 -
 app/models/molecule.rb                        |   41 +-
 app/models/report.rb                          |   14 +-
 app/models/sample.rb                          |    3 +-
 app/models/segment.rb                         |   25 -
 app/models/segment_klass.rb                   |   41 -
 app/models/segment_klasses_revision.rb        |   25 -
 app/models/segments_revision.rb               |   24 -
 app/models/user.rb                            |  108 -
 app/packs/src/admin/AdminDeviceElement.js     |  130 -
 app/packs/src/admin/AdminGroupElement.js      |  206 -
 app/packs/src/admin/AdminHome.js              |  219 -
 app/packs/src/admin/AdminNavigation.js        |   91 -
 app/packs/src/admin/DataCollector.js          |  561 ---
 app/packs/src/admin/DatasetElementAdmin.js    |  824 ----
 app/packs/src/admin/DelayedJobs.js            |  101 -
 .../src/admin/DeleteGroupDeviceButton.js      |  103 -
 app/packs/src/admin/GenericAdminModal.js      |   50 -
 app/packs/src/admin/GenericElementAdmin.js    | 1013 ----
 app/packs/src/admin/GroupsDevices.js          |  809 ----
 app/packs/src/admin/MatrixManagement.js       |  383 --
 app/packs/src/admin/MessagePublish.js         |  100 -
 app/packs/src/admin/NovncConfigContainer.js   |   55 -
 app/packs/src/admin/NovncSettings.js          |  378 --
 app/packs/src/admin/OlsTerms.js               |  219 -
 app/packs/src/admin/SegmentElementAdmin.js    |  995 ----
 app/packs/src/admin/TemplateManagement.js     |  412 --
 app/packs/src/admin/UserManagement.js         |  944 ----
 .../src/admin/converter/ConverterAdmin.js     |  407 --
 app/packs/src/admin/generic/AttrCopyModal.js  |   84 -
 app/packs/src/admin/generic/AttrEditModal.js  |   86 -
 app/packs/src/admin/generic/AttrForm.js       |   21 -
 app/packs/src/admin/generic/AttrNewModal.js   |   67 -
 .../src/admin/generic/FieldCondEditModal.js   |  226 -
 app/packs/src/admin/generic/KlassAttrForm.js  |   65 -
 .../src/admin/generic/LayerAttrEditModal.js   |   49 -
 app/packs/src/admin/generic/LayerAttrForm.js  |   78 -
 .../src/admin/generic/LayerAttrNewModal.js    |   47 -
 app/packs/src/admin/generic/Preview.js        |  209 -
 .../src/admin/generic/SegmentAttrForm.js      |   55 -
 .../src/admin/generic/SelectAttrNewModal.js   |   46 -
 .../src/admin/generic/TemplateJsonModal.js    |   92 -
 app/packs/src/admin/generic/UploadModal.js    |   70 -
 app/packs/src/admin/generic/Utils.js          |  302 --
 app/packs/src/admin/generic/collate.js        |   66 -
 .../admin/text_templates/ActionHeaderBtn.js   |   20 -
 .../src/admin/text_templates/ActionRowBtn.js  |   82 -
 .../src/admin/text_templates/TextTemplate.js  |  259 -
 .../text_templates/TextTemplateContainer.js   |  103 -
 .../admin/text_templates/TextTemplateIcon.js  |   31 -
 app/packs/src/apps/admin/AdminNavigation.js   |    1 -
 .../components/AbbreviationManagement.js      |   78 +-
 .../components/CopyClipboardBtn.js            |   11 +-
 .../apps/chemscanner/components/DeleteBtn.js  |   10 +-
 .../apps/chemscanner/components/HeaderMenu.js |  206 +-
 .../chemscanner/components/HelpPopover.js     |   28 +-
 .../chemscanner/components/MoleculeDetails.js |    4 +-
 .../components/PreviewFileZoomPan.js          |   54 +-
 .../chemscanner/components/ReactionDetails.js |   15 +-
 .../src/apps/chemscanner/components/Root.js   |   36 +-
 .../apps/chemscanner/components/SelectBtn.js  |    7 +-
 .../details/reactions/ReactionDetails.js      |    1 +
 .../details/reactions/schemeTab/Material.js   |    3 -
 .../ResearchPlanDetailsContainers.js          |    2 -
 .../analysesTab/SampleDetailsContainersAux.js |   10 -
 .../list/ElementsTableSampleEntries.js        |    2 -
 app/packs/src/components/AnalysisEditor.js    |  254 -
 app/packs/src/components/AnalysisNMR.js       |  216 -
 app/packs/src/components/App.js               |  180 -
 .../src/components/AttachmentDropzone.js      |   85 -
 app/packs/src/components/ChemrepoLabels.js    |   27 -
 app/packs/src/components/CitationTable.js     |   86 -
 .../src/components/CollectionManagement.js    |   28 -
 app/packs/src/components/CollectionSubtree.js |  303 --
 app/packs/src/components/CollectionTree.js    |  414 --
 app/packs/src/components/ComputeTask.js       |   89 -
 .../src/components/ComputeTaskContainer.js    |  115 -
 .../src/components/ContainerComponent.js      |  227 -
 app/packs/src/components/ContainerDataset.js  |  470 --
 .../src/components/ContainerDatasetField.js   |  134 -
 .../src/components/ContainerDatasetModal.js   |   49 -
 app/packs/src/components/ContainerDatasets.js |  179 -
 .../src/components/DetailsTabLiteratures.js   |  306 --
 .../src/components/DetailsTabMetadata.js      |  526 ---
 .../src/components/DeviceAnalysisDetails.js   |   75 -
 app/packs/src/components/DeviceDetails.js     |   79 -
 app/packs/src/components/DeviceManagement.js  |  226 -
 .../src/components/DeviceSampleContainer.js   |  204 -
 .../src/components/ElementAllCheckbox.js      |   90 -
 .../src/components/ElementAnalysesLabels.js   |   93 -
 app/packs/src/components/ElementCheckbox.js   |   47 -
 .../src/components/ElementCollectionLabels.js |  137 -
 app/packs/src/components/ElementContainer.js  |   36 -
 .../src/components/ElementDetailSortTab.js    |  158 -
 app/packs/src/components/ElementDetails.js    |  318 --
 .../src/components/ElementReactionLabels.js   |   87 -
 .../src/components/ElementWellplateLabels.js  |   89 -
 .../src/components/ElementalComposition.js    |   83 -
 .../components/ElementalCompositionCustom.js  |  129 -
 .../components/ElementalCompositionGroup.js   |   80 -
 app/packs/src/components/Elements.js          |   58 -
 app/packs/src/components/ElementsTable.js     |  411 --
 .../src/components/ElementsTableEntries.js    |  396 --
 .../components/ElementsTableSampleEntries.js  |  444 --
 .../src/components/ElementsTableSettings.js   |  188 -
 app/packs/src/components/ExportSamplesBtn.js  |   33 -
 app/packs/src/components/FastInput.js         |  105 -
 app/packs/src/components/FocusNovnc.js        |   93 -
 app/packs/src/components/FormatComponent.js   |  157 -
 app/packs/src/components/FormatContainer.js   |  172 -
 .../src/components/GeneralProcedureDnD.js     |   82 -
 app/packs/src/components/GraphContainer.js    |  117 -
 app/packs/src/components/GroupElement.js      |  213 -
 app/packs/src/components/List.js              |  299 --
 app/packs/src/components/LiteratureCommon.js  |  237 -
 app/packs/src/components/LiteratureDetails.js |  526 ---
 app/packs/src/components/Material.js          |  860 ----
 .../src/components/MaterialCalculations.js    |  124 -
 app/packs/src/components/MaterialGroup.js     |  335 --
 .../src/components/MaterialGroupContainer.js  |  118 -
 app/packs/src/components/MoleculeModerator.js |  143 -
 .../components/MoleculeModeratorComponent.js  |  314 --
 app/packs/src/components/NMRiumDisplayer.js   |  472 --
 app/packs/src/components/Navigation.js        |  158 -
 app/packs/src/components/NavigationModal.js   |   48 -
 app/packs/src/components/Notifications.js     |    2 +-
 app/packs/src/components/NovncStatus.js       |   20 -
 app/packs/src/components/NumeralInput.js      |  102 -
 .../src/components/NumeralInputWithUnits.js   |   89 -
 .../components/NumeralInputWithUnitsCompo.js  |  243 -
 app/packs/src/components/PermissionIcons.js   |   22 -
 app/packs/src/components/PolymerSection.js    |  297 --
 .../src/components/PrivateNoteElement.js      |  116 -
 app/packs/src/components/PubchemLabels.js     |   29 -
 app/packs/src/components/PubchemLcss.js       |   72 -
 app/packs/src/components/PubchemSigns.js      |   36 -
 app/packs/src/components/PublishCommon.js     |  335 --
 .../components/PublishReactionContainers.js   |  150 -
 .../src/components/PublishReactionModal.js    |  940 ----
 .../src/components/PublishSampleModal.js      |  600 ---
 app/packs/src/components/QuillEditor.js       |    4 +-
 .../components/ReactionDescriptionEditor.js   |  231 -
 app/packs/src/components/ReactionDetails.js   |  848 ----
 .../components/ReactionDetailsContainers.js   |  470 --
 .../src/components/ReactionDetailsDuration.js |  167 -
 .../ReactionDetailsMainProperties.js          |  187 -
 .../components/ReactionDetailsProperties.js   |  180 -
 .../components/ReactionDetailsPurification.js |  177 -
 .../components/ReactionDetailsRepoComment.js  |   54 -
 .../src/components/ReactionDetailsScheme.js   | 1004 ----
 .../src/components/ReactionDetailsShare.js    |   78 -
 app/packs/src/components/SampleDetails.js     | 1552 ------
 .../src/components/SampleDetailsContainers.js |  284 --
 .../components/SampleDetailsContainersAux.js  |  515 --
 .../components/SampleDetailsContainersCom.js  |  147 -
 .../components/SampleDetailsContainersDnd.js  |   88 -
 .../components/SampleDetailsRepoComment.js    |   57 -
 .../src/components/SampleDetailsSolvents.js   |  117 -
 .../components/SampleDetailsSolventsDnd.js    |  227 -
 app/packs/src/components/SampleForm.js        |  676 ---
 app/packs/src/components/ScreenDetails.js     |  330 --
 .../src/components/ScreenDetailsContainers.js |  174 -
 app/packs/src/components/ScreenWellplates.js  |  101 -
 app/packs/src/components/StringTag.js         |   24 -
 app/packs/src/components/Switch.js            |   41 -
 app/packs/src/components/TabLayoutCell.js     |   90 -
 .../src/components/TabLayoutContainer.js      |   84 -
 .../src/components/TextRangeWithAddon.js      |   99 -
 app/packs/src/components/UserAuth.js          |  625 ---
 app/packs/src/components/UserInfoIcon.js      |   19 -
 app/packs/src/components/UserLabels.js        |    1 +
 app/packs/src/components/ViewSpectra.js       |  737 ---
 app/packs/src/components/WelcomeMessage.js    |   36 -
 app/packs/src/components/Well.js              |   24 -
 app/packs/src/components/WellContainer.js     |  113 -
 app/packs/src/components/WellOverlay.js       |  191 -
 app/packs/src/components/Wellplate.js         |  206 -
 app/packs/src/components/WellplateDetails.js  |  279 --
 .../components/WellplateDetailsContainers.js  |  179 -
 app/packs/src/components/WellplateLabels.js   |   48 -
 app/packs/src/components/WellplateList.js     |  100 -
 .../src/components/WellplateProperties.js     |   54 -
 .../components/actions/ClipboardActions.js    |   32 -
 .../components/actions/CollectionActions.js   |  179 -
 .../components/actions/ComputeTaskActions.js  |   47 -
 .../src/components/actions/DetailActions.js   |   59 -
 .../src/components/actions/ElementActions.js  |  828 ----
 .../src/components/actions/EmbargoActions.js  |  129 -
 .../src/components/actions/InboxActions.js    |   86 -
 .../src/components/actions/KeyboardActions.js |   13 -
 .../src/components/actions/LoadingActions.js  |   25 -
 .../src/components/actions/NmrSimActions.js   |   25 -
 .../components/actions/NotificationActions.js |   50 -
 .../components/actions/PermissionActions.js   |   16 -
 .../components/actions/PredictionActions.js   |   83 -
 .../src/components/actions/PublicActions.js   |  355 --
 app/packs/src/components/actions/QcActions.js |   25 -
 .../src/components/actions/ReportActions.js   |  171 -
 .../components/actions/RepositoryActions.js   |   65 -
 .../src/components/actions/ReviewActions.js   |   89 -
 .../src/components/actions/SpectraActions.js  |  132 -
 .../components/actions/SuggestionActions.js   |   15 -
 .../components/actions/TextTemplateActions.js |   44 -
 app/packs/src/components/actions/UIActions.js |  138 -
 .../src/components/actions/UserActions.js     |  159 -
 app/packs/src/components/alt.js               |    5 -
 .../src/components/chemscanner/ChemScanner.js |   19 -
 .../chemscanner/actions/ActionTypes.js        |   79 -
 .../actions/chemdrawInstanceActions.js        |    5 -
 .../chemscanner/actions/fileActions.js        |  113 -
 .../components/chemscanner/actions/index.js   |   10 -
 .../chemscanner/actions/scannedItemActions.js |   37 -
 .../chemscanner/actions/storedFileActions.js  |  315 --
 .../chemscanner/actions/uiActions.js          |   25 -
 .../components/AbbreviationManagement.js      |  147 -
 .../components/ArchivedManagement.js          |  142 -
 .../components/ChemscannerImportModal.js      |  132 -
 .../components/CopyClipboardBtn.js            |   64 -
 .../chemscanner/components/DeleteBtn.js       |   40 -
 .../chemscanner/components/EditCommentBtn.js  |   61 -
 .../chemscanner/components/EditMdlBtn.js      |   53 -
 .../chemscanner/components/EditableText.js    |   61 -
 .../components/FileItemActionsHeader.js       |  141 -
 .../components/FileItemActionsRenderer.js     |  260 -
 .../components/FileItemApproveFilter.js       |   97 -
 .../components/FileItemApproveRenderer.js     |   57 -
 .../components/FileItemFileNameFilter.js      |  127 -
 .../components/FileItemImportedFilter.js      |   98 -
 .../components/FileItemImportedRenderer.js    |   30 -
 .../components/FileItemInformationEditor.js   |  269 --
 .../components/FileItemInformationRenderer.js |  120 -
 .../components/FileItemVersionFilter.js       |   71 -
 .../chemscanner/components/FileStorage.js     |  351 --
 .../chemscanner/components/HeaderMenu.js      |  447 --
 .../chemscanner/components/HelpPopover.js     |   44 -
 .../chemscanner/components/ImportModal.js     |  116 -
 .../chemscanner/components/LoadingModal.js    |   19 -
 .../chemscanner/components/MainContent.js     |  185 -
 .../components/MoleculeDescription.js         |  129 -
 .../chemscanner/components/MoleculeDetails.js |   61 -
 .../components/PreviewFileZoomPan.js          |  154 -
 .../components/ReactionDescription.js         |  165 -
 .../chemscanner/components/ReactionDetails.js |  103 -
 .../components/chemscanner/components/Root.js |  103 -
 .../components/ScannedMolecules.js            |  150 -
 .../components/ScannedReactions.js            |  200 -
 .../chemscanner/components/SelectBtn.js       |   35 -
 .../chemscanner/components/SmiSelect.js       |   62 -
 .../components/fileStorageUtils.js            |  302 --
 .../containers/AbbreviationContainer.js       |  197 -
 .../containers/ArchivedManagementContainer.js |   61 -
 .../containers/FileStorageContainer.js        |  230 -
 .../containers/HeaderMenuContainer.js         |   76 -
 .../containers/ImportModalContainer.js        |   38 -
 .../containers/LoadingModalContainer.js       |   12 -
 .../containers/MainContentContainer.js        |   52 -
 .../containers/NotificationContainer.js       |   75 -
 .../chemscanner/containers/RootContainer.js   |   38 -
 .../containers/ScannedItemsContainer.js       |   85 -
 .../components/chemscanner/middleware/api.js  |   38 -
 .../chemscanner/middleware/chemdraw.js        |  119 -
 .../components/chemscanner/reactionUtils.js   |   41 -
 .../chemscanner/reducers/chemdrawInstance.js  |    8 -
 .../components/chemscanner/reducers/files.js  |  155 -
 .../components/chemscanner/reducers/index.js  |   17 -
 .../chemscanner/reducers/molecules.js         |  235 -
 .../chemscanner/reducers/reactions.js         |  240 -
 .../components/chemscanner/reducers/root.js   |   17 -
 .../chemscanner/reducers/schemes.js           |  176 -
 .../src/components/chemscanner/reducers/ui.js |   49 -
 .../chemscanner/store/configureStore.js       |   14 -
 app/packs/src/components/chemscanner/utils.js |  162 -
 .../src/components/chemspectra/ChemSpectra.js |   20 -
 .../chemspectra/ChemSpectraEditor.js          |   20 -
 .../collection_management/MyCollections.js    |  368 --
 .../MySharedCollections.js                    |  300 --
 .../SharedWithMeCollections.js                |  160 -
 .../SyncWithMeCollections.js                  |  160 -
 .../src/components/common/CustomTextEditor.js |   52 -
 .../components/common/RepoMetadataModal.js    |   91 -
 .../src/components/common/RepoPreviewImage.js |   53 -
 .../components/common/RepoPublicComment.js    |  140 -
 .../common/RepoReviewAuthorsModal.js          |  522 ---
 .../src/components/common/RepoSpectra.js      |   46 -
 .../src/components/common/RepoUserComment.js  |   94 -
 .../src/components/common/RepoXvialButton.js  |  327 --
 .../computedProps/ComputedPropsGraph.js       |    5 -
 .../computed_props/ComputedPropLabel.js       |   42 -
 .../computed_props/ComputedPropsContainer.js  |  103 -
 .../computed_props/ComputedPropsGraph.js      |  154 -
 .../ComputedPropsGraphContainer.js            |  329 --
 .../computed_props/CustomAxisLabel.js         |   42 -
 .../computed_props/GraphReferenceTable.js     |  127 -
 .../components/computed_props/Highlight.js    |  238 -
 .../computed_props/NoComputedProps.js         |   26 -
 .../computed_props/SampleComputedProps.js     |  136 -
 .../contextActions/ContextActions.js          |   50 +-
 .../contextActions/ExportImportButton.js      |  199 +-
 .../components/contextActions/ModalExport.js  |  181 +-
 .../components/contextActions/NoticeButton.js |  412 +-
 .../contextActions/ReportUtilButton.js        |   12 +-
 .../src/components/elements/ElementField.js   |  332 --
 .../elements/ElementFieldDragSource.js        |   23 -
 .../elements/ElementFieldDropTarget.js        |   48 -
 .../src/components/elements/GroupFields.js    |  216 -
 .../src/components/elements/UserCounter.js    |  104 -
 .../examples/NumeralInputWithUnitsExample.js  |   46 -
 .../extra/AdvancedSearchXSearchParams.js      |    3 -
 .../extra/CollectionManagementXTabs.js        |    3 -
 .../extra/CollectionStoreXhandlers.js         |    3 -
 .../extra/CollectionStoreXlisteners.js        |    3 -
 .../components/extra/CollectionStoreXstate.js |    3 -
 .../components/extra/CollectionTreeXdiv.js    |    3 -
 .../components/extra/ElementStoreXhandlers.js |    3 -
 .../extra/ElementStoreXlisteners.js           |    3 -
 .../components/extra/ElementStoreXstate.js    |    3 -
 .../extra/ElementsTableEntriesXTdCont.js      |    3 -
 .../ElementsTableSampleEntriesXMolHeadCont.js |    3 -
 app/packs/src/components/extra/HomeXHome.js   |    3 -
 .../components/extra/ReactionDetailsXTabs.js  |    3 -
 .../components/extra/SampleDetailsXLabels.js  |    3 -
 .../components/extra/SampleDetailsXTabs.js    |    3 -
 .../src/components/extra/routesXroutes.js     |    3 -
 .../src/components/fetchers/AdminFetcher.js   |  427 --
 .../src/components/fetchers/ArticleFetcher.js |  111 -
 .../components/fetchers/AttachmentFetcher.js  |  523 ---
 .../src/components/fetchers/BaseFetcher.js    |   76 -
 .../fetchers/CollaboratorFetcher.js           |  128 -
 .../components/fetchers/CollectionsFetcher.js |  369 --
 .../components/fetchers/ComputeTaskFetcher.js |   46 -
 .../components/fetchers/ContainerFetcher.js   |   63 -
 .../components/fetchers/ConverterFetcher.js   |  107 -
 .../src/components/fetchers/DeviceFetcher.js  |   92 -
 .../src/components/fetchers/EditorFetcher.js  |   29 -
 .../src/components/fetchers/EmbargoFetcher.js |  126 -
 .../components/fetchers/GenericBaseFetcher.js |   64 -
 .../components/fetchers/GenericDSsFetcher.js  |   19 -
 .../components/fetchers/GenericElsFetcher.js  |  145 -
 .../src/components/fetchers/InboxFetcher.js   |   45 -
 .../components/fetchers/InstrumentsFetcher.js |   12 -
 .../components/fetchers/LiteraturesFetcher.js |  114 -
 .../components/fetchers/MessagesFetcher.js    |   84 -
 .../components/fetchers/MoleculesFetcher.js   |  124 -
 .../src/components/fetchers/NmrSimFetcher.js  |   16 -
 .../components/fetchers/PermissionsFetcher.js |   17 -
 .../components/fetchers/PredictionsFetcher.js |   37 -
 .../components/fetchers/PrivateNoteFetcher.js |   68 -
 .../src/components/fetchers/PublicFetcher.js  |  261 --
 .../components/fetchers/ReactionSvgFetcher.js |   28 -
 .../components/fetchers/ReactionsFetcher.js   |  102 -
 .../fetchers/ReportTemplateFetcher.js         |  119 -
 .../src/components/fetchers/ReportsFetcher.js |  142 -
 .../components/fetchers/RepositoryFetcher.js  |  384 --
 .../fetchers/ResearchPlansFetcher.js          |  224 -
 .../src/components/fetchers/ResidueFetcher.js |   26 -
 .../src/components/fetchers/ReviewFetcher.js  |    4 -
 .../src/components/fetchers/SamplesFetcher.js |  215 -
 .../src/components/fetchers/ScreensFetcher.js |   83 -
 .../src/components/fetchers/SearchFetcher.js  |   68 -
 .../components/fetchers/SegmentsFetcher.js    |   15 -
 .../components/fetchers/SuggestionsFetcher.js |   12 -
 .../fetchers/TextTemplatesFetcher.js          |   81 -
 .../src/components/fetchers/UIFetcher.js      |   69 -
 .../src/components/fetchers/UsersFetcher.js   |  118 -
 .../components/fetchers/WellplatesFetcher.js  |  189 -
 app/packs/src/components/generic/AttrChk.js   |   21 -
 .../src/components/generic/DefinedRenderer.js |   16 -
 .../components/generic/DropLinkRenderer.js    |   31 -
 .../src/components/generic/DropRenderer.js    |   31 -
 .../components/generic/DropTextRenderer.js    |   25 -
 .../src/components/generic/FieldSelect.js     |   34 -
 .../src/components/generic/GenericElCommon.js |  402 --
 .../generic/GenericElCriteriaModal.js         |   47 -
 .../components/generic/GenericElDropTarget.js |  123 -
 .../generic/GenericElTableDropTarget.js       |  130 -
 .../generic/GenericElementLabels.js           |   73 -
 .../generic/GenericPropertiesFields.js        |  391 --
 app/packs/src/components/generic/GridBtn.js   |   40 -
 app/packs/src/components/generic/GridDnD.js   |   42 -
 app/packs/src/components/generic/GridEntry.js |   74 -
 .../src/components/generic/GridSelect.js      |   30 -
 .../src/components/generic/LayerSelect.js     |   19 -
 .../src/components/generic/PreviewModal.js    |   75 -
 app/packs/src/components/generic/SamOption.js |   53 -
 .../src/components/generic/SystemSelect.js    |   19 -
 app/packs/src/components/generic/TableDef.js  |  218 -
 .../src/components/generic/TableRecord.js     |  229 -
 .../src/components/generic/TextFormula.js     |  203 -
 .../src/components/generic/TypeSelect.js      |   18 -
 .../components/generic/UConverterRenderer.js  |   24 -
 .../components/green_chem/GreenChemistry.js   |  112 -
 .../green_chem/GreenMaterialGroup.js          |  181 -
 .../src/components/green_chem/GreenMetrics.js |  158 -
 .../components/inbox/AttachmentContainer.js   |  144 -
 .../src/components/inbox/DatasetContainer.js  |  151 -
 app/packs/src/components/inbox/DeviceBox.js   |   84 -
 app/packs/src/components/inbox/InboxModal.js  |  160 -
 .../components/inbox/MoveToAnalysisButton.js  |  147 -
 app/packs/src/components/inbox/UnsortedBox.js |  103 -
 .../src/components/inbox/UnsortedDataset.js   |  191 -
 .../components/inbox/UnsortedDatasetModal.js  |   41 -
 .../managing_actions/ChildOverlay.js          |   20 -
 .../managing_actions/ManagingActionButtons.js |   91 -
 .../managing_actions/ManagingActions.js       |  249 -
 .../ManagingModalCollectionActions.js         |  148 -
 .../managing_actions/ManagingModalDelete.js   |   56 -
 .../managing_actions/ManagingModalRemove.js   |   30 -
 .../managing_actions/ManagingModalSharing.js  |  433 --
 .../ManagingModalTopSecret.js                 |   15 -
 .../components/models/AnalysesExperiment.js   |   90 -
 app/packs/src/components/models/Analysis.js   |   66 -
 app/packs/src/components/models/Attachment.js |   36 -
 .../src/components/models/ComputeTask.js      |    7 -
 app/packs/src/components/models/Container.js  |   55 -
 app/packs/src/components/models/Device.js     |   47 -
 .../src/components/models/DeviceAnalysis.js   |   39 -
 .../src/components/models/DeviceControl.js    |   11 -
 .../src/components/models/DeviceSample.js     |   35 -
 app/packs/src/components/models/Element.js    |   90 -
 app/packs/src/components/models/Format.js     |    7 -
 app/packs/src/components/models/GenericDS.js  |   63 -
 app/packs/src/components/models/GenericEl.js  |  157 -
 .../src/components/models/GenericSubField.js  |   10 -
 app/packs/src/components/models/Graph.js      |    7 -
 app/packs/src/components/models/Literature.js |   33 -
 .../src/components/models/LiteratureMap.js    |  100 -
 app/packs/src/components/models/Molecule.js   |   18 -
 app/packs/src/components/models/Prediction.js |   11 -
 .../src/components/models/PrivateNote.js      |   58 -
 app/packs/src/components/models/Reaction.js   |  990 ----
 app/packs/src/components/models/Report.js     |   11 -
 .../src/components/models/ReportTemplate.js   |   27 -
 .../src/components/models/ResearchPlan.js     |  188 -
 app/packs/src/components/models/Sample.js     | 1155 -----
 app/packs/src/components/models/Screen.js     |  165 -
 app/packs/src/components/models/Segment.js    |   73 -
 .../src/components/models/StructureDef.js     |  101 -
 .../src/components/models/StructureEditor.js  |   29 -
 app/packs/src/components/models/Well.js       |   20 -
 app/packs/src/components/models/Wellplate.js  |  126 -
 app/packs/src/components/nmr_sim/LineChart.js |  190 -
 .../components/nmr_sim/LineChartWrapper.js    |   52 -
 app/packs/src/components/nmr_sim/NmrSimTab.js |  124 -
 .../src/components/nmr_sim/NmrdbReference.js  |   35 -
 .../nmr_sim/SampleDetailsTabName.js           |    3 -
 .../src/components/prediction/Content.js      |   58 -
 .../components/prediction/ContentInputs.js    |   74 -
 .../components/prediction/ContentOutputs.js   |   56 -
 .../prediction/PredictionComponent.js         |   68 -
 .../prediction/PredictionContainer.js         |   97 -
 .../proxies/ElementPermissionProxy.js         |   45 -
 app/packs/src/components/qc/QcMain.js         |   92 -
 .../src/components/qc/components/QcContent.js |   79 -
 .../components/qc/components/helper/icon.js   |   78 -
 .../src/components/qc/components/helper/ir.js |   70 -
 .../components/qc/components/helper/nmr.js    |   46 -
 .../qc/components/helper/qc_mol_view.js       |   29 -
 .../qc/components/substance/BlockCnmr.js      |  117 -
 .../components/substance/BlockConclusion.js   |   67 -
 .../qc/components/substance/BlockEa.js        |   15 -
 .../qc/components/substance/BlockHnmr.js      |  117 -
 .../qc/components/substance/BlockIr.js        |   94 -
 .../qc/components/substance/BlockMS.js        |   59 -
 .../qc/components/substance/BlockTitle.js     |   35 -
 .../qc/components/summary/AreaSummary.js      |   54 -
 .../qc/components/summary/AreaTitle.js        |   25 -
 .../qc/components/summary/LineScore.js        |   33 -
 .../qc/components/summary/LineSummary.js      |  102 -
 .../qc/components/summary/common.js           |   37 -
 .../components/qc/components/summary/eval.js  |  124 -
 app/packs/src/components/qc/utils/common.js   |   15 -
 app/packs/src/components/qc/utils/ir.js       |   88 -
 app/packs/src/components/qc/utils/ms.js       |   71 -
 app/packs/src/components/qc/utils/nmr.js      |  112 -
 app/packs/src/components/qc/utils/qcs.js      |   60 -
 .../src/components/react_quill/BaseToolbar.js |   24 -
 .../react_quill/DynamicToolbarEditor.js       |   37 -
 .../src/components/react_quill/ReactQuill.js  |  497 --
 .../components/react_quill/ToolbarDropdown.js |  134 -
 .../src/components/react_quill/ToolbarIcon.js |   54 -
 app/packs/src/components/report/Archives.js   |  216 -
 app/packs/src/components/report/Config.js     |  221 -
 app/packs/src/components/report/Orders.js     |   63 -
 app/packs/src/components/report/OrdersDnD.js  |  122 -
 app/packs/src/components/report/Paramize.js   |   51 -
 app/packs/src/components/report/Previews.js   |  159 -
 .../src/components/report/ReportComponent.js  |   86 -
 .../src/components/report/ReportContainer.js  |  208 -
 .../src/components/report/SectionReaction.js  |  366 --
 .../components/report/SectionReactionList.js  |   76 -
 .../src/components/report/SectionSample.js    |   67 -
 .../components/report/SectionSiProcedures.js  |   47 -
 .../components/report/SectionSiSynthesis.js   |  418 --
 .../report/SectionSiSynthesisStdRxn.js        |  420 --
 .../src/components/report/SectionSpectrum.js  |  122 -
 app/packs/src/components/report/Serials.js    |   77 -
 app/packs/src/components/report/Setting.js    |  118 -
 .../research_plan/ResearchPlanDetails.js      |  502 --
 .../ResearchPlanDetailsAddField.js            |   39 -
 .../ResearchPlanDetailsAttachments.js         |  250 -
 .../research_plan/ResearchPlanDetailsBody.js  |   81 -
 .../ResearchPlanDetailsContainers.js          |  434 --
 .../ResearchPlanDetailsDragSource.js          |   39 -
 .../ResearchPlanDetailsDropTarget.js          |   45 -
 .../research_plan/ResearchPlanDetailsField.js |  198 -
 .../ResearchPlanDetailsFieldImage.js          |  102 -
 .../ResearchPlanDetailsFieldKetcher.js        |  130 -
 .../ResearchPlanDetailsFieldReaction.js       |  134 -
 .../ResearchPlanDetailsFieldRichText.js       |   44 -
 .../ResearchPlanDetailsFieldSample.js         |  134 -
 .../ResearchPlanDetailsFieldTable.js          |  528 ---
 ...rchPlanDetailsFieldTableColumnNameModal.js |  105 -
 ...esearchPlanDetailsFieldTableContextMenu.js |   70 -
 ...searchPlanDetailsFieldTableSchemasModal.js |  123 -
 .../research_plan/ResearchPlanDetailsName.js  |   68 -
 app/packs/src/components/routes.js            |  118 -
 app/packs/src/components/routesUtils.js       |  315 --
 .../scifinder/ScifinderCredential.js          |   45 -
 .../components/search/AutoCompleteInput.js    |  426 --
 app/packs/src/components/search/Search.js     |  340 --
 .../src/components/search/SearchFilter.js     |  298 --
 .../components/sharing/SharingShortcuts.js    |   51 -
 app/packs/src/components/sso/LoginOptions.js  |   62 -
 .../src/components/sso/OmniauthCredential.js  |   54 -
 .../staticDropdownOptions/options.js          |  702 +--
 .../staticDropdownOptions/reagents_kombi.js   | 4168 +++++++++--------
 .../src/components/stores/ClipboardStore.js   |   45 -
 .../src/components/stores/CollectionStore.js  |  191 -
 .../src/components/stores/ComputeTaskStore.js |   38 -
 .../src/components/stores/ElementStore.js     | 1461 ------
 .../src/components/stores/EmbargoStore.js     |  119 -
 app/packs/src/components/stores/InboxStore.js |  208 -
 .../src/components/stores/KeyboardStore.js    |   26 -
 .../src/components/stores/LoadingStore.js     |  112 -
 .../src/components/stores/NmrSimStore.js      |   63 -
 .../components/stores/NotificationStore.js    |  103 -
 .../src/components/stores/PermissionStore.js  |   27 -
 .../src/components/stores/PredictionStore.js  |   84 -
 .../src/components/stores/PublicStore.js      |  290 --
 app/packs/src/components/stores/QcStore.js    |   33 -
 app/packs/src/components/stores/RStore.js     |   34 -
 .../src/components/stores/ReportStore.js      |  733 ---
 .../src/components/stores/ReviewStore.js      |  158 -
 .../src/components/stores/SpectraStore.js     |  206 -
 .../src/components/stores/SuggestionStore.js  |   20 -
 .../components/stores/TextTemplateStore.js    |   57 -
 app/packs/src/components/stores/UIStore.js    |  428 --
 app/packs/src/components/stores/UserStore.js  |  111 -
 .../structure_editor/ChemDrawEditor.js        |   86 -
 .../structure_editor/KetcherEditor.js         |   28 -
 .../structure_editor/MarvinjsEditor.js        |   83 -
 .../StructureEditorContent.js                 |   65 -
 .../structure_editor/StructureEditorMap.js    |   44 -
 .../structure_editor/StructureEditorModal.js  |  292 --
 .../structure_editor/StructureEditorSet.js    |   53 -
 .../structure_editor/loadScripts.js           |   44 -
 .../TextTemplateToolbar.js                    |   82 -
 .../ToolbarTemplateCreator.js                 |  260 -
 app/packs/src/components/utils/ArrayUtils.js  |   60 -
 app/packs/src/components/utils/DndControl.js  |   27 -
 .../src/components/utils/DocumentHelper.js    |   15 -
 app/packs/src/components/utils/DomHelper.js   |   11 -
 .../src/components/utils/ElementUtils.js      |  559 ---
 .../src/components/utils/FetcherHelper.js     |   38 -
 app/packs/src/components/utils/Functions.js   |   30 -
 app/packs/src/components/utils/MathUtils.js   |   64 -
 .../src/components/utils/PermissionConst.js   |    8 -
 .../src/components/utils/ReportHelper.js      |  106 -
 .../src/components/utils/SpectraHelper.js     |  160 -
 .../utils/deltaMarkdownConverter.js           |  226 -
 app/packs/src/components/utils/imageHelper.js |   28 -
 .../src/components/utils/markdownUtils.js     |   18 -
 .../src/components/utils/metricPrefix.js      |   21 -
 app/packs/src/components/utils/quillFormat.js |   83 -
 .../components/utils/quillToolbarSymbol.js    |  682 ---
 .../components/utils/reactionPredefined.js    |   12 -
 app/packs/src/fetchers/CollectionsFetcher.js  |   12 -
 app/packs/src/fetchers/GenericBaseFetcher.js  |   13 -
 app/packs/src/libCnC/CnC.js                   |  273 --
 app/packs/src/libCnC/Navigation.js            |   88 -
 app/packs/src/libHome/Home.js                 |  190 -
 app/packs/src/libHome/NavNewSession.js        |   55 -
 app/packs/src/libHome/RepoAbout.js            |  195 -
 app/packs/src/libHome/RepoCardIntro.js        |   33 -
 app/packs/src/libHome/RepoCardIntro1.js       |   44 -
 .../src/libHome/RepoCardLatestPublish.js      |   80 -
 .../src/libHome/RepoCardMoleculeArchive.js    |   60 -
 .../src/libHome/RepoCardMoleculeArchive1.js   |   53 -
 app/packs/src/libHome/RepoCardStaticsBoard.js |  111 -
 .../src/libHome/RepoCardStaticsBoard1.js      |  111 -
 app/packs/src/libHome/RepoCollection.js       |  244 -
 .../src/libHome/RepoCollectionDetails.js      |   51 -
 app/packs/src/libHome/RepoCommon.js           | 2372 ----------
 app/packs/src/libHome/RepoContact.js          |   43 -
 .../src/libHome/RepoContainerDatasets.js      |   80 -
 app/packs/src/libHome/RepoDirective.js        |   41 -
 app/packs/src/libHome/RepoElementDetails.js   |   62 -
 app/packs/src/libHome/RepoEmbargo.js          |  386 --
 app/packs/src/libHome/RepoEmbargoDetails.js   |   67 -
 app/packs/src/libHome/RepoEmbargoModal.js     |  132 -
 app/packs/src/libHome/RepoHome.js             |  240 -
 app/packs/src/libHome/RepoHowTo.js            |  177 -
 app/packs/src/libHome/RepoHowToDragSource.js  |   21 -
 app/packs/src/libHome/RepoHowToDropTarget.js  |   41 -
 app/packs/src/libHome/RepoHowToEditor.js      |  435 --
 app/packs/src/libHome/RepoHowToReader.js      |  124 -
 app/packs/src/libHome/RepoMolViewerBtn.js     |   52 -
 app/packs/src/libHome/RepoMolViewerListBtn.js |   81 -
 .../src/libHome/RepoMolViewerListModal.js     |  117 -
 app/packs/src/libHome/RepoMolViewerModal.js   |   38 -
 app/packs/src/libHome/RepoMoleculeArchive.js  |   98 -
 app/packs/src/libHome/RepoMoleculeList.js     |   94 -
 app/packs/src/libHome/RepoNavListTypes.js     |    6 -
 app/packs/src/libHome/RepoNewsEditor.js       |  427 --
 app/packs/src/libHome/RepoNewsReader.js       |  123 -
 app/packs/src/libHome/RepoNewsroom.js         |  186 -
 app/packs/src/libHome/RepoPubCommon.js        |   31 -
 app/packs/src/libHome/RepoPubl.js             |  709 ---
 app/packs/src/libHome/RepoReactionDetails.js  |  792 ----
 app/packs/src/libHome/RepoReactionList.js     |  106 -
 .../src/libHome/RepoReactionSchemeInfo.js     |   81 -
 app/packs/src/libHome/RepoReview.js           |  514 --
 app/packs/src/libHome/RepoReviewButtonBar.js  |  134 -
 app/packs/src/libHome/RepoReviewCommon.js     |  122 -
 app/packs/src/libHome/RepoReviewDetails.js    |   67 -
 app/packs/src/libHome/RepoSample.js           |  329 --
 app/packs/src/libHome/RepoSampleDetails.js    |  220 -
 app/packs/src/libHome/RepoSegment.js          |   32 -
 app/packs/src/models/Sample.js                |   80 -
 .../src/repo/fetchers/CollaboratorFetcher.js  |   34 +-
 app/packs/src/repoHome/RepoNewsEditor.js      |    2 +-
 app/packs/src/repoHome/RepoNewsReader.js      |    4 +-
 app/packs/src/repoHome/RepoNewsroom.js        |    2 +-
 .../src/stores/alt/actions/UserActions.js     |   12 -
 .../src/stores/alt/stores/ElementStore.js     |    3 -
 app/packs/src/stores/alt/stores/UIStore.js    |   13 -
 app/packs/src/utilities/routesUtils.js        |   20 -
 app/serializers/computed_props_serializer.rb  |    7 -
 app/serializers/detail_levels/element.rb      |   20 -
 .../element_level_list_serializable.rb        |   17 -
 app/serializers/element_level_serializable.rb |   29 -
 app/serializers/element_list_serializer.rb    |   12 -
 app/serializers/element_serializer.rb         |  110 -
 app/serializers/molecule_guest_serializer.rb  |    2 +-
 ...211180200_add_published_at_publications.rb |   16 +-
 ...20920000006_embargo_accepted_collection.rb |   27 -
 lib/analyses/converter.rb                     |  272 --
 lib/export/export_collections.rb              |   83 -
 lib/export/export_excel.rb                    |    3 +-
 public/images/repo/Chemotion-V1.png           |  Bin 0 -> 77446 bytes
 public/images/repo/DCIbadge.png               |  Bin 0 -> 129923 bytes
 public/images/repo/DataCite.png               |  Bin 0 -> 5940 bytes
 public/images/repo/InChITRUST.png             |  Bin 0 -> 13122 bytes
 public/images/repo/KIT.png                    |  Bin 0 -> 5763 bytes
 public/images/repo/KITStiftung.png            |  Bin 0 -> 4668 bytes
 public/images/repo/NFDI4Chem_logo.svg         |   16 +
 public/images/repo/OAI.png                    |  Bin 0 -> 4315 bytes
 public/images/repo/Repository_logo.png        |  Bin 0 -> 4527 bytes
 public/images/repo/chemotion_full.svg         |  174 +
 public/images/repo/dfg_logo.png               |  Bin 0 -> 6100 bytes
 ...dfg_logo_schriftzug_blau_foerderung_en.jpg |  Bin 0 -> 76589 bytes
 public/images/repo/github-mark.svg            |    1 +
 .../repo/molecule-archive-logo-weiss.svg      |    1 +
 public/images/repo/news_cover.png             |  Bin 0 -> 153477 bytes
 public/images/repo/pubchem.jpg                |  Bin 0 -> 7495 bytes
 public/images/repo/re3data.png                |  Bin 0 -> 20099 bytes
 public/images/repo/ri_logo.png                |  Bin 0 -> 14079 bytes
 public/welcome-message-sample.md              |    4 -
 spec/api/collection_api_spec.rb               |    3 -
 spec/api/inbox_api_spec.rb                    |   11 -
 spec/api/literature_api_spec.rb               |   14 -
 spec/api/private_note_api.spec.rb             |  357 --
 spec/api/report_api_spec.rb                   |   94 -
 spec/api/report_template_api_spec.rb          |  122 -
 spec/api/research_plan_api_spec.rb            |   32 -
 spec/api/research_plan_metadata_api_spec.rb   |    5 -
 spec/spec_helper.rb                           |   21 -
 yarn.lock                                     |  636 +--
 736 files changed, 3532 insertions(+), 102345 deletions(-)
 delete mode 100644 app/api/chemotion/converter_api.rb
 delete mode 100644 app/api/chemotion/generic_dataset_api.rb
 delete mode 100644 app/api/chemotion/generic_element_api.rb
 delete mode 100644 app/api/chemotion/segment_api.rb
 delete mode 100644 app/api/entities/dataset_entity.rb
 delete mode 100644 app/api/entities/dataset_klass_entity.rb
 delete mode 100644 app/api/entities/element_klass_entity.rb
 delete mode 100644 app/api/entities/element_revision_entity.rb
 delete mode 100644 app/api/entities/generic_entity.rb
 delete mode 100644 app/api/entities/generic_public_entity.rb
 delete mode 100644 app/api/entities/klass_revision_entity.rb
 delete mode 100644 app/api/entities/segment_entity.rb
 delete mode 100644 app/api/entities/segment_klass_entity.rb
 delete mode 100644 app/api/entities/segment_revision_entity.rb
 delete mode 100644 app/api/helpers/generic_helpers.rb
 delete mode 100644 app/api/helpers/sample_association_helpers.rb
 delete mode 100644 app/models/chemscanner/molecule.rb
 delete mode 100644 app/models/chemscanner/reaction.rb
 delete mode 100644 app/models/chemscanner/reaction_step.rb
 delete mode 100644 app/models/chemscanner/reactions_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_product_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_reactant_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_reagent_molecule.rb
 delete mode 100644 app/models/chemscanner/reactions_solvent_molecule.rb
 delete mode 100644 app/models/chemscanner/scheme.rb
 delete mode 100644 app/models/chemscanner/source.rb
 delete mode 100644 app/models/collections_element.rb
 delete mode 100644 app/models/concerns/attachment_converter.rb
 delete mode 100644 app/models/concerns/datasetable.rb
 delete mode 100644 app/models/concerns/generic_klass_revisions.rb
 delete mode 100644 app/models/concerns/generic_revisions.rb
 delete mode 100644 app/models/concerns/segmentable.rb
 delete mode 100644 app/models/dataset.rb
 delete mode 100644 app/models/dataset_klass.rb
 delete mode 100644 app/models/dataset_klasses_revision.rb
 delete mode 100644 app/models/datasets_revision.rb
 delete mode 100644 app/models/element.rb
 delete mode 100644 app/models/element_klass.rb
 delete mode 100644 app/models/element_klasses_revision.rb
 delete mode 100644 app/models/elements_revision.rb
 delete mode 100644 app/models/elements_sample.rb
 delete mode 100644 app/models/segment.rb
 delete mode 100644 app/models/segment_klass.rb
 delete mode 100644 app/models/segment_klasses_revision.rb
 delete mode 100644 app/models/segments_revision.rb
 delete mode 100644 app/packs/src/admin/AdminDeviceElement.js
 delete mode 100644 app/packs/src/admin/AdminGroupElement.js
 delete mode 100644 app/packs/src/admin/AdminHome.js
 delete mode 100644 app/packs/src/admin/AdminNavigation.js
 delete mode 100644 app/packs/src/admin/DataCollector.js
 delete mode 100644 app/packs/src/admin/DatasetElementAdmin.js
 delete mode 100644 app/packs/src/admin/DelayedJobs.js
 delete mode 100644 app/packs/src/admin/DeleteGroupDeviceButton.js
 delete mode 100644 app/packs/src/admin/GenericAdminModal.js
 delete mode 100644 app/packs/src/admin/GenericElementAdmin.js
 delete mode 100644 app/packs/src/admin/GroupsDevices.js
 delete mode 100644 app/packs/src/admin/MatrixManagement.js
 delete mode 100644 app/packs/src/admin/MessagePublish.js
 delete mode 100644 app/packs/src/admin/NovncConfigContainer.js
 delete mode 100644 app/packs/src/admin/NovncSettings.js
 delete mode 100644 app/packs/src/admin/OlsTerms.js
 delete mode 100644 app/packs/src/admin/SegmentElementAdmin.js
 delete mode 100644 app/packs/src/admin/TemplateManagement.js
 delete mode 100644 app/packs/src/admin/UserManagement.js
 delete mode 100644 app/packs/src/admin/converter/ConverterAdmin.js
 delete mode 100644 app/packs/src/admin/generic/AttrCopyModal.js
 delete mode 100644 app/packs/src/admin/generic/AttrEditModal.js
 delete mode 100644 app/packs/src/admin/generic/AttrForm.js
 delete mode 100644 app/packs/src/admin/generic/AttrNewModal.js
 delete mode 100644 app/packs/src/admin/generic/FieldCondEditModal.js
 delete mode 100644 app/packs/src/admin/generic/KlassAttrForm.js
 delete mode 100644 app/packs/src/admin/generic/LayerAttrEditModal.js
 delete mode 100644 app/packs/src/admin/generic/LayerAttrForm.js
 delete mode 100644 app/packs/src/admin/generic/LayerAttrNewModal.js
 delete mode 100644 app/packs/src/admin/generic/Preview.js
 delete mode 100644 app/packs/src/admin/generic/SegmentAttrForm.js
 delete mode 100644 app/packs/src/admin/generic/SelectAttrNewModal.js
 delete mode 100644 app/packs/src/admin/generic/TemplateJsonModal.js
 delete mode 100644 app/packs/src/admin/generic/UploadModal.js
 delete mode 100644 app/packs/src/admin/generic/Utils.js
 delete mode 100644 app/packs/src/admin/generic/collate.js
 delete mode 100644 app/packs/src/admin/text_templates/ActionHeaderBtn.js
 delete mode 100644 app/packs/src/admin/text_templates/ActionRowBtn.js
 delete mode 100644 app/packs/src/admin/text_templates/TextTemplate.js
 delete mode 100644 app/packs/src/admin/text_templates/TextTemplateContainer.js
 delete mode 100644 app/packs/src/admin/text_templates/TextTemplateIcon.js
 delete mode 100644 app/packs/src/components/AnalysisEditor.js
 delete mode 100644 app/packs/src/components/AnalysisNMR.js
 delete mode 100644 app/packs/src/components/App.js
 delete mode 100644 app/packs/src/components/AttachmentDropzone.js
 delete mode 100644 app/packs/src/components/ChemrepoLabels.js
 delete mode 100644 app/packs/src/components/CitationTable.js
 delete mode 100644 app/packs/src/components/CollectionManagement.js
 delete mode 100644 app/packs/src/components/CollectionSubtree.js
 delete mode 100644 app/packs/src/components/CollectionTree.js
 delete mode 100644 app/packs/src/components/ComputeTask.js
 delete mode 100644 app/packs/src/components/ComputeTaskContainer.js
 delete mode 100644 app/packs/src/components/ContainerComponent.js
 delete mode 100644 app/packs/src/components/ContainerDataset.js
 delete mode 100644 app/packs/src/components/ContainerDatasetField.js
 delete mode 100644 app/packs/src/components/ContainerDatasetModal.js
 delete mode 100644 app/packs/src/components/ContainerDatasets.js
 delete mode 100644 app/packs/src/components/DetailsTabLiteratures.js
 delete mode 100644 app/packs/src/components/DetailsTabMetadata.js
 delete mode 100644 app/packs/src/components/DeviceAnalysisDetails.js
 delete mode 100644 app/packs/src/components/DeviceDetails.js
 delete mode 100644 app/packs/src/components/DeviceManagement.js
 delete mode 100644 app/packs/src/components/DeviceSampleContainer.js
 delete mode 100644 app/packs/src/components/ElementAllCheckbox.js
 delete mode 100644 app/packs/src/components/ElementAnalysesLabels.js
 delete mode 100644 app/packs/src/components/ElementCheckbox.js
 delete mode 100644 app/packs/src/components/ElementCollectionLabels.js
 delete mode 100644 app/packs/src/components/ElementContainer.js
 delete mode 100644 app/packs/src/components/ElementDetailSortTab.js
 delete mode 100644 app/packs/src/components/ElementDetails.js
 delete mode 100644 app/packs/src/components/ElementReactionLabels.js
 delete mode 100644 app/packs/src/components/ElementWellplateLabels.js
 delete mode 100644 app/packs/src/components/ElementalComposition.js
 delete mode 100644 app/packs/src/components/ElementalCompositionCustom.js
 delete mode 100644 app/packs/src/components/ElementalCompositionGroup.js
 delete mode 100644 app/packs/src/components/Elements.js
 delete mode 100644 app/packs/src/components/ElementsTable.js
 delete mode 100644 app/packs/src/components/ElementsTableEntries.js
 delete mode 100644 app/packs/src/components/ElementsTableSampleEntries.js
 delete mode 100644 app/packs/src/components/ElementsTableSettings.js
 delete mode 100644 app/packs/src/components/ExportSamplesBtn.js
 delete mode 100644 app/packs/src/components/FastInput.js
 delete mode 100644 app/packs/src/components/FocusNovnc.js
 delete mode 100644 app/packs/src/components/FormatComponent.js
 delete mode 100644 app/packs/src/components/FormatContainer.js
 delete mode 100644 app/packs/src/components/GeneralProcedureDnD.js
 delete mode 100644 app/packs/src/components/GraphContainer.js
 delete mode 100644 app/packs/src/components/GroupElement.js
 delete mode 100644 app/packs/src/components/List.js
 delete mode 100644 app/packs/src/components/LiteratureCommon.js
 delete mode 100644 app/packs/src/components/LiteratureDetails.js
 delete mode 100644 app/packs/src/components/Material.js
 delete mode 100644 app/packs/src/components/MaterialCalculations.js
 delete mode 100644 app/packs/src/components/MaterialGroup.js
 delete mode 100644 app/packs/src/components/MaterialGroupContainer.js
 delete mode 100644 app/packs/src/components/MoleculeModerator.js
 delete mode 100644 app/packs/src/components/MoleculeModeratorComponent.js
 delete mode 100644 app/packs/src/components/NMRiumDisplayer.js
 delete mode 100644 app/packs/src/components/Navigation.js
 delete mode 100644 app/packs/src/components/NavigationModal.js
 delete mode 100644 app/packs/src/components/NovncStatus.js
 delete mode 100644 app/packs/src/components/NumeralInput.js
 delete mode 100644 app/packs/src/components/NumeralInputWithUnits.js
 delete mode 100644 app/packs/src/components/NumeralInputWithUnitsCompo.js
 delete mode 100644 app/packs/src/components/PermissionIcons.js
 delete mode 100644 app/packs/src/components/PolymerSection.js
 delete mode 100644 app/packs/src/components/PrivateNoteElement.js
 delete mode 100644 app/packs/src/components/PubchemLabels.js
 delete mode 100644 app/packs/src/components/PubchemLcss.js
 delete mode 100644 app/packs/src/components/PubchemSigns.js
 delete mode 100644 app/packs/src/components/PublishCommon.js
 delete mode 100644 app/packs/src/components/PublishReactionContainers.js
 delete mode 100644 app/packs/src/components/PublishReactionModal.js
 delete mode 100644 app/packs/src/components/PublishSampleModal.js
 delete mode 100644 app/packs/src/components/ReactionDescriptionEditor.js
 delete mode 100644 app/packs/src/components/ReactionDetails.js
 delete mode 100644 app/packs/src/components/ReactionDetailsContainers.js
 delete mode 100644 app/packs/src/components/ReactionDetailsDuration.js
 delete mode 100644 app/packs/src/components/ReactionDetailsMainProperties.js
 delete mode 100644 app/packs/src/components/ReactionDetailsProperties.js
 delete mode 100644 app/packs/src/components/ReactionDetailsPurification.js
 delete mode 100644 app/packs/src/components/ReactionDetailsRepoComment.js
 delete mode 100644 app/packs/src/components/ReactionDetailsScheme.js
 delete mode 100644 app/packs/src/components/ReactionDetailsShare.js
 delete mode 100644 app/packs/src/components/SampleDetails.js
 delete mode 100644 app/packs/src/components/SampleDetailsContainers.js
 delete mode 100644 app/packs/src/components/SampleDetailsContainersAux.js
 delete mode 100644 app/packs/src/components/SampleDetailsContainersCom.js
 delete mode 100644 app/packs/src/components/SampleDetailsContainersDnd.js
 delete mode 100644 app/packs/src/components/SampleDetailsRepoComment.js
 delete mode 100644 app/packs/src/components/SampleDetailsSolvents.js
 delete mode 100644 app/packs/src/components/SampleDetailsSolventsDnd.js
 delete mode 100644 app/packs/src/components/SampleForm.js
 delete mode 100644 app/packs/src/components/ScreenDetails.js
 delete mode 100644 app/packs/src/components/ScreenDetailsContainers.js
 delete mode 100644 app/packs/src/components/ScreenWellplates.js
 delete mode 100644 app/packs/src/components/StringTag.js
 delete mode 100644 app/packs/src/components/Switch.js
 delete mode 100644 app/packs/src/components/TabLayoutCell.js
 delete mode 100644 app/packs/src/components/TabLayoutContainer.js
 delete mode 100644 app/packs/src/components/TextRangeWithAddon.js
 delete mode 100644 app/packs/src/components/UserAuth.js
 delete mode 100644 app/packs/src/components/UserInfoIcon.js
 delete mode 100644 app/packs/src/components/ViewSpectra.js
 delete mode 100644 app/packs/src/components/WelcomeMessage.js
 delete mode 100644 app/packs/src/components/Well.js
 delete mode 100644 app/packs/src/components/WellContainer.js
 delete mode 100644 app/packs/src/components/WellOverlay.js
 delete mode 100644 app/packs/src/components/Wellplate.js
 delete mode 100644 app/packs/src/components/WellplateDetails.js
 delete mode 100644 app/packs/src/components/WellplateDetailsContainers.js
 delete mode 100644 app/packs/src/components/WellplateLabels.js
 delete mode 100644 app/packs/src/components/WellplateList.js
 delete mode 100644 app/packs/src/components/WellplateProperties.js
 delete mode 100644 app/packs/src/components/actions/ClipboardActions.js
 delete mode 100644 app/packs/src/components/actions/CollectionActions.js
 delete mode 100644 app/packs/src/components/actions/ComputeTaskActions.js
 delete mode 100644 app/packs/src/components/actions/DetailActions.js
 delete mode 100644 app/packs/src/components/actions/ElementActions.js
 delete mode 100644 app/packs/src/components/actions/EmbargoActions.js
 delete mode 100644 app/packs/src/components/actions/InboxActions.js
 delete mode 100644 app/packs/src/components/actions/KeyboardActions.js
 delete mode 100644 app/packs/src/components/actions/LoadingActions.js
 delete mode 100644 app/packs/src/components/actions/NmrSimActions.js
 delete mode 100644 app/packs/src/components/actions/NotificationActions.js
 delete mode 100644 app/packs/src/components/actions/PermissionActions.js
 delete mode 100644 app/packs/src/components/actions/PredictionActions.js
 delete mode 100644 app/packs/src/components/actions/PublicActions.js
 delete mode 100644 app/packs/src/components/actions/QcActions.js
 delete mode 100644 app/packs/src/components/actions/ReportActions.js
 delete mode 100644 app/packs/src/components/actions/RepositoryActions.js
 delete mode 100644 app/packs/src/components/actions/ReviewActions.js
 delete mode 100644 app/packs/src/components/actions/SpectraActions.js
 delete mode 100644 app/packs/src/components/actions/SuggestionActions.js
 delete mode 100644 app/packs/src/components/actions/TextTemplateActions.js
 delete mode 100644 app/packs/src/components/actions/UIActions.js
 delete mode 100644 app/packs/src/components/actions/UserActions.js
 delete mode 100644 app/packs/src/components/alt.js
 delete mode 100644 app/packs/src/components/chemscanner/ChemScanner.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/ActionTypes.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/fileActions.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/index.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/scannedItemActions.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/storedFileActions.js
 delete mode 100644 app/packs/src/components/chemscanner/actions/uiActions.js
 delete mode 100644 app/packs/src/components/chemscanner/components/AbbreviationManagement.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ArchivedManagement.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
 delete mode 100644 app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/DeleteBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/EditCommentBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/EditMdlBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/EditableText.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
 delete mode 100644 app/packs/src/components/chemscanner/components/FileStorage.js
 delete mode 100644 app/packs/src/components/chemscanner/components/HeaderMenu.js
 delete mode 100644 app/packs/src/components/chemscanner/components/HelpPopover.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ImportModal.js
 delete mode 100644 app/packs/src/components/chemscanner/components/LoadingModal.js
 delete mode 100644 app/packs/src/components/chemscanner/components/MainContent.js
 delete mode 100644 app/packs/src/components/chemscanner/components/MoleculeDescription.js
 delete mode 100644 app/packs/src/components/chemscanner/components/MoleculeDetails.js
 delete mode 100644 app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ReactionDescription.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ReactionDetails.js
 delete mode 100644 app/packs/src/components/chemscanner/components/Root.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ScannedMolecules.js
 delete mode 100644 app/packs/src/components/chemscanner/components/ScannedReactions.js
 delete mode 100644 app/packs/src/components/chemscanner/components/SelectBtn.js
 delete mode 100644 app/packs/src/components/chemscanner/components/SmiSelect.js
 delete mode 100644 app/packs/src/components/chemscanner/components/fileStorageUtils.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/FileStorageContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/ImportModalContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/MainContentContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/NotificationContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/RootContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
 delete mode 100644 app/packs/src/components/chemscanner/middleware/api.js
 delete mode 100644 app/packs/src/components/chemscanner/middleware/chemdraw.js
 delete mode 100644 app/packs/src/components/chemscanner/reactionUtils.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/files.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/index.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/molecules.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/reactions.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/root.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/schemes.js
 delete mode 100644 app/packs/src/components/chemscanner/reducers/ui.js
 delete mode 100644 app/packs/src/components/chemscanner/store/configureStore.js
 delete mode 100644 app/packs/src/components/chemscanner/utils.js
 delete mode 100644 app/packs/src/components/chemspectra/ChemSpectra.js
 delete mode 100644 app/packs/src/components/chemspectra/ChemSpectraEditor.js
 delete mode 100644 app/packs/src/components/collection_management/MyCollections.js
 delete mode 100644 app/packs/src/components/collection_management/MySharedCollections.js
 delete mode 100644 app/packs/src/components/collection_management/SharedWithMeCollections.js
 delete mode 100644 app/packs/src/components/collection_management/SyncWithMeCollections.js
 delete mode 100644 app/packs/src/components/common/CustomTextEditor.js
 delete mode 100644 app/packs/src/components/common/RepoMetadataModal.js
 delete mode 100644 app/packs/src/components/common/RepoPreviewImage.js
 delete mode 100644 app/packs/src/components/common/RepoPublicComment.js
 delete mode 100644 app/packs/src/components/common/RepoReviewAuthorsModal.js
 delete mode 100644 app/packs/src/components/common/RepoSpectra.js
 delete mode 100644 app/packs/src/components/common/RepoUserComment.js
 delete mode 100644 app/packs/src/components/common/RepoXvialButton.js
 delete mode 100644 app/packs/src/components/computed_props/ComputedPropLabel.js
 delete mode 100644 app/packs/src/components/computed_props/ComputedPropsContainer.js
 delete mode 100644 app/packs/src/components/computed_props/ComputedPropsGraph.js
 delete mode 100644 app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
 delete mode 100644 app/packs/src/components/computed_props/CustomAxisLabel.js
 delete mode 100644 app/packs/src/components/computed_props/GraphReferenceTable.js
 delete mode 100644 app/packs/src/components/computed_props/Highlight.js
 delete mode 100644 app/packs/src/components/computed_props/NoComputedProps.js
 delete mode 100644 app/packs/src/components/computed_props/SampleComputedProps.js
 delete mode 100644 app/packs/src/components/elements/ElementField.js
 delete mode 100644 app/packs/src/components/elements/ElementFieldDragSource.js
 delete mode 100644 app/packs/src/components/elements/ElementFieldDropTarget.js
 delete mode 100644 app/packs/src/components/elements/GroupFields.js
 delete mode 100644 app/packs/src/components/elements/UserCounter.js
 delete mode 100644 app/packs/src/components/examples/NumeralInputWithUnitsExample.js
 delete mode 100644 app/packs/src/components/extra/AdvancedSearchXSearchParams.js
 delete mode 100644 app/packs/src/components/extra/CollectionManagementXTabs.js
 delete mode 100644 app/packs/src/components/extra/CollectionStoreXhandlers.js
 delete mode 100644 app/packs/src/components/extra/CollectionStoreXlisteners.js
 delete mode 100644 app/packs/src/components/extra/CollectionStoreXstate.js
 delete mode 100644 app/packs/src/components/extra/CollectionTreeXdiv.js
 delete mode 100644 app/packs/src/components/extra/ElementStoreXhandlers.js
 delete mode 100644 app/packs/src/components/extra/ElementStoreXlisteners.js
 delete mode 100644 app/packs/src/components/extra/ElementStoreXstate.js
 delete mode 100644 app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
 delete mode 100644 app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
 delete mode 100644 app/packs/src/components/extra/HomeXHome.js
 delete mode 100644 app/packs/src/components/extra/ReactionDetailsXTabs.js
 delete mode 100644 app/packs/src/components/extra/SampleDetailsXLabels.js
 delete mode 100644 app/packs/src/components/extra/SampleDetailsXTabs.js
 delete mode 100644 app/packs/src/components/extra/routesXroutes.js
 delete mode 100644 app/packs/src/components/fetchers/AdminFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ArticleFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/AttachmentFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/BaseFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/CollaboratorFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/CollectionsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ComputeTaskFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ContainerFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ConverterFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/DeviceFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/EditorFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/EmbargoFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/GenericBaseFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/GenericDSsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/GenericElsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/InboxFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/InstrumentsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/LiteraturesFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/MessagesFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/MoleculesFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/NmrSimFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/PermissionsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/PredictionsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/PrivateNoteFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/PublicFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ReactionSvgFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ReactionsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ReportTemplateFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ReportsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/RepositoryFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ResearchPlansFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ResidueFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ReviewFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/SamplesFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/ScreensFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/SearchFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/SegmentsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/SuggestionsFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/TextTemplatesFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/UIFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/UsersFetcher.js
 delete mode 100644 app/packs/src/components/fetchers/WellplatesFetcher.js
 delete mode 100644 app/packs/src/components/generic/AttrChk.js
 delete mode 100644 app/packs/src/components/generic/DefinedRenderer.js
 delete mode 100644 app/packs/src/components/generic/DropLinkRenderer.js
 delete mode 100644 app/packs/src/components/generic/DropRenderer.js
 delete mode 100644 app/packs/src/components/generic/DropTextRenderer.js
 delete mode 100644 app/packs/src/components/generic/FieldSelect.js
 delete mode 100644 app/packs/src/components/generic/GenericElCommon.js
 delete mode 100644 app/packs/src/components/generic/GenericElCriteriaModal.js
 delete mode 100644 app/packs/src/components/generic/GenericElDropTarget.js
 delete mode 100644 app/packs/src/components/generic/GenericElTableDropTarget.js
 delete mode 100644 app/packs/src/components/generic/GenericElementLabels.js
 delete mode 100644 app/packs/src/components/generic/GenericPropertiesFields.js
 delete mode 100644 app/packs/src/components/generic/GridBtn.js
 delete mode 100644 app/packs/src/components/generic/GridDnD.js
 delete mode 100644 app/packs/src/components/generic/GridEntry.js
 delete mode 100644 app/packs/src/components/generic/GridSelect.js
 delete mode 100644 app/packs/src/components/generic/LayerSelect.js
 delete mode 100644 app/packs/src/components/generic/PreviewModal.js
 delete mode 100644 app/packs/src/components/generic/SamOption.js
 delete mode 100644 app/packs/src/components/generic/SystemSelect.js
 delete mode 100644 app/packs/src/components/generic/TableDef.js
 delete mode 100644 app/packs/src/components/generic/TableRecord.js
 delete mode 100644 app/packs/src/components/generic/TextFormula.js
 delete mode 100644 app/packs/src/components/generic/TypeSelect.js
 delete mode 100644 app/packs/src/components/generic/UConverterRenderer.js
 delete mode 100644 app/packs/src/components/green_chem/GreenChemistry.js
 delete mode 100644 app/packs/src/components/green_chem/GreenMaterialGroup.js
 delete mode 100644 app/packs/src/components/green_chem/GreenMetrics.js
 delete mode 100644 app/packs/src/components/inbox/AttachmentContainer.js
 delete mode 100644 app/packs/src/components/inbox/DatasetContainer.js
 delete mode 100644 app/packs/src/components/inbox/DeviceBox.js
 delete mode 100644 app/packs/src/components/inbox/InboxModal.js
 delete mode 100644 app/packs/src/components/inbox/MoveToAnalysisButton.js
 delete mode 100644 app/packs/src/components/inbox/UnsortedBox.js
 delete mode 100644 app/packs/src/components/inbox/UnsortedDataset.js
 delete mode 100644 app/packs/src/components/inbox/UnsortedDatasetModal.js
 delete mode 100644 app/packs/src/components/managing_actions/ChildOverlay.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingActionButtons.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingActions.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingModalDelete.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingModalRemove.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingModalSharing.js
 delete mode 100644 app/packs/src/components/managing_actions/ManagingModalTopSecret.js
 delete mode 100644 app/packs/src/components/models/AnalysesExperiment.js
 delete mode 100644 app/packs/src/components/models/Analysis.js
 delete mode 100644 app/packs/src/components/models/Attachment.js
 delete mode 100644 app/packs/src/components/models/ComputeTask.js
 delete mode 100644 app/packs/src/components/models/Container.js
 delete mode 100644 app/packs/src/components/models/Device.js
 delete mode 100644 app/packs/src/components/models/DeviceAnalysis.js
 delete mode 100644 app/packs/src/components/models/DeviceControl.js
 delete mode 100644 app/packs/src/components/models/DeviceSample.js
 delete mode 100644 app/packs/src/components/models/Element.js
 delete mode 100644 app/packs/src/components/models/Format.js
 delete mode 100644 app/packs/src/components/models/GenericDS.js
 delete mode 100644 app/packs/src/components/models/GenericEl.js
 delete mode 100644 app/packs/src/components/models/GenericSubField.js
 delete mode 100644 app/packs/src/components/models/Graph.js
 delete mode 100644 app/packs/src/components/models/Literature.js
 delete mode 100644 app/packs/src/components/models/LiteratureMap.js
 delete mode 100644 app/packs/src/components/models/Molecule.js
 delete mode 100644 app/packs/src/components/models/Prediction.js
 delete mode 100644 app/packs/src/components/models/PrivateNote.js
 delete mode 100644 app/packs/src/components/models/Reaction.js
 delete mode 100644 app/packs/src/components/models/Report.js
 delete mode 100644 app/packs/src/components/models/ReportTemplate.js
 delete mode 100644 app/packs/src/components/models/ResearchPlan.js
 delete mode 100644 app/packs/src/components/models/Sample.js
 delete mode 100644 app/packs/src/components/models/Screen.js
 delete mode 100644 app/packs/src/components/models/Segment.js
 delete mode 100644 app/packs/src/components/models/StructureDef.js
 delete mode 100644 app/packs/src/components/models/StructureEditor.js
 delete mode 100644 app/packs/src/components/models/Well.js
 delete mode 100644 app/packs/src/components/models/Wellplate.js
 delete mode 100644 app/packs/src/components/nmr_sim/LineChart.js
 delete mode 100644 app/packs/src/components/nmr_sim/LineChartWrapper.js
 delete mode 100644 app/packs/src/components/nmr_sim/NmrSimTab.js
 delete mode 100644 app/packs/src/components/nmr_sim/NmrdbReference.js
 delete mode 100644 app/packs/src/components/nmr_sim/SampleDetailsTabName.js
 delete mode 100644 app/packs/src/components/prediction/Content.js
 delete mode 100644 app/packs/src/components/prediction/ContentInputs.js
 delete mode 100644 app/packs/src/components/prediction/ContentOutputs.js
 delete mode 100644 app/packs/src/components/prediction/PredictionComponent.js
 delete mode 100644 app/packs/src/components/prediction/PredictionContainer.js
 delete mode 100644 app/packs/src/components/proxies/ElementPermissionProxy.js
 delete mode 100644 app/packs/src/components/qc/QcMain.js
 delete mode 100644 app/packs/src/components/qc/components/QcContent.js
 delete mode 100644 app/packs/src/components/qc/components/helper/icon.js
 delete mode 100644 app/packs/src/components/qc/components/helper/ir.js
 delete mode 100644 app/packs/src/components/qc/components/helper/nmr.js
 delete mode 100644 app/packs/src/components/qc/components/helper/qc_mol_view.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockCnmr.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockConclusion.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockEa.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockHnmr.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockIr.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockMS.js
 delete mode 100644 app/packs/src/components/qc/components/substance/BlockTitle.js
 delete mode 100644 app/packs/src/components/qc/components/summary/AreaSummary.js
 delete mode 100644 app/packs/src/components/qc/components/summary/AreaTitle.js
 delete mode 100644 app/packs/src/components/qc/components/summary/LineScore.js
 delete mode 100644 app/packs/src/components/qc/components/summary/LineSummary.js
 delete mode 100644 app/packs/src/components/qc/components/summary/common.js
 delete mode 100644 app/packs/src/components/qc/components/summary/eval.js
 delete mode 100644 app/packs/src/components/qc/utils/common.js
 delete mode 100644 app/packs/src/components/qc/utils/ir.js
 delete mode 100644 app/packs/src/components/qc/utils/ms.js
 delete mode 100644 app/packs/src/components/qc/utils/nmr.js
 delete mode 100644 app/packs/src/components/qc/utils/qcs.js
 delete mode 100644 app/packs/src/components/react_quill/BaseToolbar.js
 delete mode 100644 app/packs/src/components/react_quill/DynamicToolbarEditor.js
 delete mode 100644 app/packs/src/components/react_quill/ReactQuill.js
 delete mode 100644 app/packs/src/components/react_quill/ToolbarDropdown.js
 delete mode 100644 app/packs/src/components/react_quill/ToolbarIcon.js
 delete mode 100644 app/packs/src/components/report/Archives.js
 delete mode 100644 app/packs/src/components/report/Config.js
 delete mode 100644 app/packs/src/components/report/Orders.js
 delete mode 100644 app/packs/src/components/report/OrdersDnD.js
 delete mode 100644 app/packs/src/components/report/Paramize.js
 delete mode 100644 app/packs/src/components/report/Previews.js
 delete mode 100644 app/packs/src/components/report/ReportComponent.js
 delete mode 100644 app/packs/src/components/report/ReportContainer.js
 delete mode 100644 app/packs/src/components/report/SectionReaction.js
 delete mode 100644 app/packs/src/components/report/SectionReactionList.js
 delete mode 100644 app/packs/src/components/report/SectionSample.js
 delete mode 100644 app/packs/src/components/report/SectionSiProcedures.js
 delete mode 100644 app/packs/src/components/report/SectionSiSynthesis.js
 delete mode 100644 app/packs/src/components/report/SectionSiSynthesisStdRxn.js
 delete mode 100644 app/packs/src/components/report/SectionSpectrum.js
 delete mode 100644 app/packs/src/components/report/Serials.js
 delete mode 100644 app/packs/src/components/report/Setting.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetails.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsField.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
 delete mode 100644 app/packs/src/components/research_plan/ResearchPlanDetailsName.js
 delete mode 100644 app/packs/src/components/routes.js
 delete mode 100644 app/packs/src/components/routesUtils.js
 delete mode 100644 app/packs/src/components/scifinder/ScifinderCredential.js
 delete mode 100644 app/packs/src/components/search/AutoCompleteInput.js
 delete mode 100644 app/packs/src/components/search/Search.js
 delete mode 100644 app/packs/src/components/search/SearchFilter.js
 delete mode 100644 app/packs/src/components/sharing/SharingShortcuts.js
 delete mode 100644 app/packs/src/components/sso/LoginOptions.js
 delete mode 100644 app/packs/src/components/sso/OmniauthCredential.js
 delete mode 100644 app/packs/src/components/stores/ClipboardStore.js
 delete mode 100644 app/packs/src/components/stores/CollectionStore.js
 delete mode 100644 app/packs/src/components/stores/ComputeTaskStore.js
 delete mode 100644 app/packs/src/components/stores/ElementStore.js
 delete mode 100644 app/packs/src/components/stores/EmbargoStore.js
 delete mode 100644 app/packs/src/components/stores/InboxStore.js
 delete mode 100644 app/packs/src/components/stores/KeyboardStore.js
 delete mode 100644 app/packs/src/components/stores/LoadingStore.js
 delete mode 100644 app/packs/src/components/stores/NmrSimStore.js
 delete mode 100644 app/packs/src/components/stores/NotificationStore.js
 delete mode 100644 app/packs/src/components/stores/PermissionStore.js
 delete mode 100644 app/packs/src/components/stores/PredictionStore.js
 delete mode 100644 app/packs/src/components/stores/PublicStore.js
 delete mode 100644 app/packs/src/components/stores/QcStore.js
 delete mode 100644 app/packs/src/components/stores/RStore.js
 delete mode 100644 app/packs/src/components/stores/ReportStore.js
 delete mode 100644 app/packs/src/components/stores/ReviewStore.js
 delete mode 100644 app/packs/src/components/stores/SpectraStore.js
 delete mode 100644 app/packs/src/components/stores/SuggestionStore.js
 delete mode 100644 app/packs/src/components/stores/TextTemplateStore.js
 delete mode 100644 app/packs/src/components/stores/UIStore.js
 delete mode 100644 app/packs/src/components/stores/UserStore.js
 delete mode 100644 app/packs/src/components/structure_editor/ChemDrawEditor.js
 delete mode 100644 app/packs/src/components/structure_editor/KetcherEditor.js
 delete mode 100644 app/packs/src/components/structure_editor/MarvinjsEditor.js
 delete mode 100644 app/packs/src/components/structure_editor/StructureEditorContent.js
 delete mode 100644 app/packs/src/components/structure_editor/StructureEditorMap.js
 delete mode 100644 app/packs/src/components/structure_editor/StructureEditorModal.js
 delete mode 100644 app/packs/src/components/structure_editor/StructureEditorSet.js
 delete mode 100644 app/packs/src/components/structure_editor/loadScripts.js
 delete mode 100644 app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
 delete mode 100644 app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
 delete mode 100644 app/packs/src/components/utils/ArrayUtils.js
 delete mode 100644 app/packs/src/components/utils/DndControl.js
 delete mode 100644 app/packs/src/components/utils/DocumentHelper.js
 delete mode 100644 app/packs/src/components/utils/DomHelper.js
 delete mode 100644 app/packs/src/components/utils/ElementUtils.js
 delete mode 100644 app/packs/src/components/utils/FetcherHelper.js
 delete mode 100644 app/packs/src/components/utils/Functions.js
 delete mode 100644 app/packs/src/components/utils/MathUtils.js
 delete mode 100644 app/packs/src/components/utils/PermissionConst.js
 delete mode 100644 app/packs/src/components/utils/ReportHelper.js
 delete mode 100644 app/packs/src/components/utils/SpectraHelper.js
 delete mode 100644 app/packs/src/components/utils/deltaMarkdownConverter.js
 delete mode 100644 app/packs/src/components/utils/imageHelper.js
 delete mode 100644 app/packs/src/components/utils/markdownUtils.js
 delete mode 100644 app/packs/src/components/utils/metricPrefix.js
 delete mode 100644 app/packs/src/components/utils/quillFormat.js
 delete mode 100644 app/packs/src/components/utils/quillToolbarSymbol.js
 delete mode 100644 app/packs/src/components/utils/reactionPredefined.js
 delete mode 100644 app/packs/src/libCnC/CnC.js
 delete mode 100644 app/packs/src/libCnC/Navigation.js
 delete mode 100644 app/packs/src/libHome/Home.js
 delete mode 100644 app/packs/src/libHome/NavNewSession.js
 delete mode 100644 app/packs/src/libHome/RepoAbout.js
 delete mode 100644 app/packs/src/libHome/RepoCardIntro.js
 delete mode 100644 app/packs/src/libHome/RepoCardIntro1.js
 delete mode 100644 app/packs/src/libHome/RepoCardLatestPublish.js
 delete mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive.js
 delete mode 100644 app/packs/src/libHome/RepoCardMoleculeArchive1.js
 delete mode 100644 app/packs/src/libHome/RepoCardStaticsBoard.js
 delete mode 100644 app/packs/src/libHome/RepoCardStaticsBoard1.js
 delete mode 100644 app/packs/src/libHome/RepoCollection.js
 delete mode 100644 app/packs/src/libHome/RepoCollectionDetails.js
 delete mode 100644 app/packs/src/libHome/RepoCommon.js
 delete mode 100644 app/packs/src/libHome/RepoContact.js
 delete mode 100644 app/packs/src/libHome/RepoContainerDatasets.js
 delete mode 100644 app/packs/src/libHome/RepoDirective.js
 delete mode 100644 app/packs/src/libHome/RepoElementDetails.js
 delete mode 100644 app/packs/src/libHome/RepoEmbargo.js
 delete mode 100644 app/packs/src/libHome/RepoEmbargoDetails.js
 delete mode 100644 app/packs/src/libHome/RepoEmbargoModal.js
 delete mode 100644 app/packs/src/libHome/RepoHome.js
 delete mode 100644 app/packs/src/libHome/RepoHowTo.js
 delete mode 100644 app/packs/src/libHome/RepoHowToDragSource.js
 delete mode 100644 app/packs/src/libHome/RepoHowToDropTarget.js
 delete mode 100644 app/packs/src/libHome/RepoHowToEditor.js
 delete mode 100644 app/packs/src/libHome/RepoHowToReader.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerBtn.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerListBtn.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerListModal.js
 delete mode 100644 app/packs/src/libHome/RepoMolViewerModal.js
 delete mode 100644 app/packs/src/libHome/RepoMoleculeArchive.js
 delete mode 100644 app/packs/src/libHome/RepoMoleculeList.js
 delete mode 100644 app/packs/src/libHome/RepoNavListTypes.js
 delete mode 100644 app/packs/src/libHome/RepoNewsEditor.js
 delete mode 100644 app/packs/src/libHome/RepoNewsReader.js
 delete mode 100644 app/packs/src/libHome/RepoNewsroom.js
 delete mode 100644 app/packs/src/libHome/RepoPubCommon.js
 delete mode 100644 app/packs/src/libHome/RepoPubl.js
 delete mode 100644 app/packs/src/libHome/RepoReactionDetails.js
 delete mode 100644 app/packs/src/libHome/RepoReactionList.js
 delete mode 100644 app/packs/src/libHome/RepoReactionSchemeInfo.js
 delete mode 100644 app/packs/src/libHome/RepoReview.js
 delete mode 100644 app/packs/src/libHome/RepoReviewButtonBar.js
 delete mode 100644 app/packs/src/libHome/RepoReviewCommon.js
 delete mode 100644 app/packs/src/libHome/RepoReviewDetails.js
 delete mode 100644 app/packs/src/libHome/RepoSample.js
 delete mode 100644 app/packs/src/libHome/RepoSampleDetails.js
 delete mode 100644 app/packs/src/libHome/RepoSegment.js
 delete mode 100644 app/serializers/computed_props_serializer.rb
 delete mode 100644 app/serializers/detail_levels/element.rb
 delete mode 100644 app/serializers/element_level_list_serializable.rb
 delete mode 100644 app/serializers/element_level_serializable.rb
 delete mode 100644 app/serializers/element_list_serializer.rb
 delete mode 100644 app/serializers/element_serializer.rb
 delete mode 100644 db/migrate/20220920000006_embargo_accepted_collection.rb
 delete mode 100644 lib/analyses/converter.rb
 create mode 100755 public/images/repo/Chemotion-V1.png
 create mode 100644 public/images/repo/DCIbadge.png
 create mode 100644 public/images/repo/DataCite.png
 create mode 100644 public/images/repo/InChITRUST.png
 create mode 100644 public/images/repo/KIT.png
 create mode 100644 public/images/repo/KITStiftung.png
 create mode 100755 public/images/repo/NFDI4Chem_logo.svg
 create mode 100644 public/images/repo/OAI.png
 create mode 100644 public/images/repo/Repository_logo.png
 create mode 100644 public/images/repo/chemotion_full.svg
 create mode 100644 public/images/repo/dfg_logo.png
 create mode 100644 public/images/repo/dfg_logo_schriftzug_blau_foerderung_en.jpg
 create mode 100644 public/images/repo/github-mark.svg
 create mode 100755 public/images/repo/molecule-archive-logo-weiss.svg
 create mode 100644 public/images/repo/news_cover.png
 create mode 100644 public/images/repo/pubchem.jpg
 create mode 100644 public/images/repo/re3data.png
 create mode 100644 public/images/repo/ri_logo.png

diff --git a/.env.production.example b/.env.production.example
index 6734900a2..eb4db7265 100644
--- a/.env.production.example
+++ b/.env.production.example
@@ -52,7 +52,7 @@ DEVISE_DISABLED_SIGN_UP=''
 DEVISE_NEW_ACCOUNT_INACTIVE=false
 
 # Application's title
-APPLICATION_TITLE='Chemotion'
+APPLICATION_TITLE='Chemotion Repository'
 
 DATA_CITE_BASE_URI=https://api.test.datacite.org
 DATA_CITE_PREFIX=prefix
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b51cd8a33..da3193c2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,499 +1,75 @@
 
 # Chemotion_Repository Changelog
 
-## [v1.8.0]
-> (2023-10-24)
-
-
-* Features and enhancements
-  * Reaction Variations ([#1409](https://github.com/ComPlat/chemotion_ELN/pull/1409), [#1561](https://github.com/ComPlat/chemotion_ELN/pull/1561), [#1567](https://github.com/ComPlat/chemotion_ELN/pull/1567)) [Docs](https://chemotion.net/docs/eln/ui/details_modal?_highlight=variation#variations-tab)
-  * LabiIMotion Integration  ([#1504](https://github.com/ComPlat/chemotion_ELN/pull/1504)) [Docs](https://chemotion.net/docs/eln/admin/generic_config)
-  * Enhance import samples for sdf  ([#1364](https://github.com/ComPlat/chemotion_ELN/pull/1364))
-  * Import export sample as chemical  ([#1524](https://github.com/ComPlat/chemotion_ELN/pull/1524))
-  * Dry-solvent properties in the solvents section in the reactions table  ([#1432](https://github.com/ComPlat/chemotion_ELN/pull/1432))
-  * Expand calendar function to generic element  ([#1585](https://github.com/ComPlat/chemotion_ELN/pull/1585))
-
-  UX/UI
-  * Move sample task inbox to header bar  ([#1517](https://github.com/ComPlat/chemotion_ELN/pull/1517))
-  * Admin: Filter options for user list management  ([#1510](https://github.com/ComPlat/chemotion_ELN/pull/1510))
-
-  ChemSpectra and NMRIUM
-  * Display label in CV layout ([#1546](https://github.com/ComPlat/chemotion_ELN/pull/1546))
-  * Nmrium button for reaction and researchplan  ([#1471](https://github.com/ComPlat/chemotion_ELN/pull/1471))
-
-* Bug fixes
-  * assets precompilation css issue  ([#1538](https://github.com/ComPlat/chemotion_ELN/pull/1538))
-  * comment fetch issue on new entities with code refactoring  ([#1547](https://github.com/ComPlat/chemotion_ELN/pull/1547))
-  * show example label for reaction  ([#1556](https://github.com/ComPlat/chemotion_ELN/pull/1556))
-  * current_user.matrix getting null value  ([#1554](https://github.com/ComPlat/chemotion_ELN/pull/1554))
-  * load cas for molecules  ([#1555](https://github.com/ComPlat/chemotion_ELN/pull/1555))
-  * no attachments after research plan save  ([#1564](https://github.com/ComPlat/chemotion_ELN/pull/1564))
-  * sample properties tab  ([#1503](https://github.com/ComPlat/chemotion_ELN/pull/1503))
-  * Admin seed: ensure exisiting Admins have a profile  ([#1572](https://github.com/ComPlat/chemotion_ELN/pull/1572))
-  * assign only boolean values for decoupled column in import samples  ([#1571](https://github.com/ComPlat/chemotion_ELN/pull/1571))
-  * disable spectra button when just uploading an image  ([#1568](https://github.com/ComPlat/chemotion_ELN/pull/1568))
-  * atttachment converter trigger ([#1578](https://github.com/ComPlat/chemotion_ELN/pull/1578))
-  * reaction calculation when no reference material present  ([#1589](https://github.com/ComPlat/chemotion_ELN/pull/1589))
-  * reaction list display break when reaction status not standard  ([#1592](https://github.com/ComPlat/chemotion_ELN/pull/1592))
-
-  ChemSpectra and NMRIUM
-  * UI with cv layout  ([#1526](https://github.com/ComPlat/chemotion_ELN/pull/1526))
-  * nmrium button does not display when selecting some chemical ontology  ([#1563](https://github.com/ComPlat/chemotion_ELN/pull/1563))
-  * change value of reference solvent for NMR layout  ([#1557](https://github.com/ComPlat/chemotion_ELN/pull/1557))
-
-* Code refactoring - Test - CI - Chores
-  * "yarn test" errors & warnings  ([#1523](https://github.com/ComPlat/chemotion_ELN/pull/1523))
-  * update runner image  ([#1576](https://github.com/ComPlat/chemotion_ELN/pull/1576))
-  * minor dep updates  ([#1569](https://github.com/ComPlat/chemotion_ELN/pull/1569))
-  * Bump @adobe/css-tools from 4.2.0 to 4.3.1  ([#1511](https://github.com/ComPlat/chemotion_ELN/pull/1511))
-  * Bump @babel/traverse from 7.16.10 to 7.23.2  ([#1580](https://github.com/ComPlat/chemotion_ELN/pull/1580))
-
-
-## [v1.8.0-rc4]
-> (2023-10-16)
-
-
-## [v1.8.0-rc3]
-> (2023-10-09)
-
-
-## [v1.8.0-rc2]
-> (2023-10-09)
-
-
-## [v1.8.0-rc1]
-> (2023-09-20)
-
-* Features and Improvements:
-  * Enhance import samples for sdf [#1364](https://github.com/ComPlat/chemotion_ELN/pull/1364)
-  * Move sample task inbox to header bar [#1517](https://github.com/ComPlat/chemotion_ELN/pull/1517)
-  * filter options for admin user management [#1510](https://github.com/ComPlat/chemotion_ELN/pull/1510)
-  * Reaction Variations [#1409](https://github.com/ComPlat/chemotion_ELN/pull/1409)
-  * LabiIMotion Integration [#1504](https://github.com/ComPlat/chemotion_ELN/pull/1504)
-
-## [v1.7.3]
-> (2023-09-20)
-
-* Features and Improvements:
-  * Always sort new sample tasks on top of list [#1456](https://github.com/ComPlat/chemotion_ELN/pull/1456)
-  * add fluorescence (emission), DLS ACF, DLS Intensity layouts [#1374](https://github.com/ComPlat/chemotion_ELN/pull/1374)
-  * Update CDCl3 solvent value on chemspectra and fix typo [#1480](https://github.com/ComPlat/chemotion_ELN/pull/1480)
-  * Reaction table dropdown value updates [#1433](https://github.com/ComPlat/chemotion_ELN/pull/1433)
-  * select all option for device inbox folder by [#1437](https://github.com/ComPlat/chemotion_ELN/pull/1437)
-  * Show sample name in SampleTask Api [#1518](https://github.com/ComPlat/chemotion_ELN/pull/1518)
-  * update ext links in the Navbar menu dropdown [#1534](https://github.com/ComPlat/chemotion_ELN/pull/1534)
-  * Allow deletion of SampleTasks and fix SampleTask Inbox scroll issues [#1444](https://github.com/ComPlat/chemotion_ELN/pull/1444)
-  * add-analysis button always visible [#1465](https://github.com/ComPlat/chemotion_ELN/pull/1465)
-
-* chore:
-  * upgrade converter 1.0.0 [#1450](https://github.com/ComPlat/chemotion_ELN/pull/1450)
-  * update information of chem-spectra-app [#1484](https://github.com/ComPlat/chemotion_ELN/pull/1484)
-  * Add Cypress dependencies to Dockerfiles [#1491](https://github.com/ComPlat/chemotion_ELN/pull/1491)
-  * upg nodejs LTS to 18 [#1489](https://github.com/ComPlat/chemotion_ELN/pull/1489)
-  * puma from 5.6.5 to 5.6.7 [#1488](https://github.com/ComPlat/chemotion_ELN/pull/1488)
-  * update README - acknowledge NFDI [#1472](https://github.com/ComPlat/chemotion_ELN/pull/1472)
-
-* Fixes:
-  * disable_chemrepoidjob [#1451](https://github.com/ComPlat/chemotion_ELN/pull/1451)
-  * quill_to_html when type HashWithIndifferentAccess [#1458](https://github.com/ComPlat/chemotion_ELN/pull/1458)
-  * display the not-accessible panel for 401 status on sample fetched by id [#1469](https://github.com/ComPlat/chemotion_ELN/pull/1469)
-  * image annotation tool image preview does not work as expected [#1467](https://github.com/ComPlat/chemotion_ELN/pull/1467)
-  * White screen research plan [#1452](https://github.com/ComPlat/chemotion_ELN/pull/1452)
-  * wellplates multiple readouts design tab [#1474](https://github.com/ComPlat/chemotion_ELN/pull/1474)
-  * Cypress Tests [#1481](https://github.com/ComPlat/chemotion_ELN/pull/1481)
-  * the issue with NMRium wrapper version 0.4.0 [#1436](https://github.com/ComPlat/chemotion_ELN/pull/1436)
-  * nmrium button [#1460](https://github.com/ComPlat/chemotion_ELN/pull/1460)
-  * replace toSorted with manual sorting in SampleTaskInbox [#1485](https://github.com/ComPlat/chemotion_ELN/pull/1485)
-  * duplicate jdx files by [#1479](https://github.com/ComPlat/chemotion_ELN/pull/1479)
-  * sorting multiplicity values [#1478](https://github.com/ComPlat/chemotion_ELN/pull/1478)
-  * inbox UnsortedBox issues [#1447](https://github.com/ComPlat/chemotion_ELN/pull/1447)
-  * deletion of literature [#1502](https://github.com/ComPlat/chemotion_ELN/pull/1502)
-  * doi not accepted [#1486](https://github.com/ComPlat/chemotion_ELN/pull/1486)
-  * fixed wrong literatures mapping [#1506](https://github.com/ComPlat/chemotion_ELN/pull/1506)
-  * ignore predictions when it is null [#1507](https://github.com/ComPlat/chemotion_ELN/pull/1507)
-  * crash when selecting multiplicity checkbox on chemspectra [#1509](https://github.com/ComPlat/chemotion_ELN/pull/1509)
-  * sync chemspectra nmrium eln v173 [#1513](https://github.com/ComPlat/chemotion_ELN/pull/1513)
-  * Update Chemspectra to handle 'FL Spectrum' datatype and fix cannot read processed Bruker data NMR [#1528](https://github.com/ComPlat/chemotion_ELN/pull/1528)
-  * yield percentage error for reactions with decoupled products and … [#1531](https://github.com/ComPlat/chemotion_ELN/pull/1531)
-  * reaction sort column default to created_at [#1533](https://github.com/ComPlat/chemotion_ELN/pull/1533)
-
-
-## [v1.7.2]
-> (2023-08-01)
-
-* Fixes:
-  * Comment functionality, closes #1435
-  * Sort reactions by creation time  4922fc3, closes #1439
-  * display wrong shifted peaks after zoom, closes #1443
-
-## [v1.7.1]
-> 2023-07-27
-
-* Fixes:
-  * Report creation for shared reaction [#1412](https://github.com/ComPlat/chemotion_ELN/pull/1412)
-  * Collection tab profile [1411](https://github.com/ComPlat/chemotion_ELN/pull/1411) [1427](https://github.com/ComPlat/chemotion_ELN/pull/1427)
-  * opening a dataset without making changes [#1410](https://github.com/ComPlat/chemotion_ELN/pull/1410)
-  * inbox (de)select boxes [#1416](in https://github.com/ComPlat/chemotion_ELN/pull/1416)
-  * sort reaction list by creation date [#1429](https://github.com/ComPlat/chemotion_ELN/pull/1429)
-  * change ref area and display shift ref [#1431]( https://github.com/ComPlat/chemotion_ELN/pull/1431)
-  * total element count in list tabs [#1426]( https://github.com/ComPlat/chemotion_ELN/pull/1426)
-
-
-## [v1.7.0]
-> 2023-07-11
-
-* Features and Improvements:
-   * Inventory Feature [#1262](https://github.com/ComPlat/chemotion_ELN/pull/1262) - [see docs](https://chemotion.net/docs/eln/ui/inventory#creating-chemical-entry)
-   * Comment functionality on shared and synchronized collections  [#1237](https://github.com/ComPlat/chemotion_ELN/pull/1237) - [see docs](https://chemotion.net/docs/eln/ui/comments?_highlight=comment)
-   * calendar [#1189](https://github.com/ComPlat/chemotion_ELN/pull/1189)
-   * collection profile for element tab layout  [#681](https://github.com/ComPlat/chemotion_ELN/pull/681) - [see docs]()
-   * cas as option in import samples to collection function [#1306](https://github.com/ComPlat/chemotion_ELN/pull/1306)
-   * chemspectra with aif layout [#1335](https://github.com/ComPlat/chemotion_ELN/pull/1335)
-   * Feature/elements grouping [#1188](https://github.com/ComPlat/chemotion_ELN/pull/1188)
-   * enhance import sample feature [#1347](https://github.com/ComPlat/chemotion_ELN/pull/1341)
-   * Groups ui revamp and making group admins set/unset admins  [#1396](https://github.com/ComPlat/chemotion_ELN/pull/1396)
-   * Add inbox pagination [#1108](https://github.com/ComPlat/chemotion_ELN/pull/1108)
-   * login-and-signup-configurable [#1377](https://github.com/ComPlat/chemotion_ELN/pull/1377)
-
-* Fixes
-  * port fixes from v1.6.1 v1.6.2
-  * Datacollector api fx [#1344](https://github.com/ComPlat/chemotion_ELN/pull/1344)
-  * notification timestamps and formatting notification button [#1362](https://github.com/ComPlat/chemotion_ELN/pull/1362)
-  * saving data from NMRium [#1348](https://github.com/ComPlat/chemotion_ELN/pull/1348)
-  * Structure editor with decoupled sample [#1393](https://github.com/ComPlat/chemotion_ELN/pull/1393)
-  * User select in UI feature [#1385](https://github.com/ComPlat/chemotion_ELN/pull/1385)
-  * Unsaved sample changes retained when reselected from list [#1397](https://github.com/ComPlat/chemotion_ELN/pull/1397)
-
-
-
-## [v1.6.2]
-> 2023-07-10
-* Fixes
-  * Expose target amount in sample task api (#1373)
-  * User select in UI feature (#1385)
-  * refactoring transfer (#1320)
-  * login-and-signup-configurable (#1377)
-  * structure editor with decoupled sample (#1393)
-  * Text editor in researchPlan is now getting removed properly (#1363)
-
-## [v1.6.1]
-> 2023-06-19
-
-* Fixes
-  * scan result calculation [PR1325](https://github.com/ComPlat/chemotion_ELN/pull/1325)
-  * Load the correct url of nmrium wrapper [#1339](https://github.com/ComPlat/chemotion_ELN/pull/1339)
-  * Zooming in chemspectra on firefox [#1346](https://github.com/ComPlat/chemotion_ELN/pull/1346)
-  * AdminUI: Datacollector setting [#1344](https://github.com/ComPlat/chemotion_ELN/pull/1344)
-  * nmrium: display preview image after saving [#1356](https://github.com/ComPlat/chemotion_ELN/pull/1356)
-
-
-## [v1.6.0]
-> 2023-05-09
-
-* Features and Improvements:
-  * Shibboleth authentication [#1239](https://github.com/ComPlat/chemotion_ELN/pull/1239). [See docs](https://chemotion.net/docs/eln/install_configure/configuration#user-authentication)
-  * Chemspectra: UI for Cyclic Voltametry and CDS layouts [#1272](https://github.com/ComPlat/chemotion_ELN/pull/1273). [See docs](https://chemotion.net/docs/services/chemspectra)
-
-* Fixes
-  * port fixes from v1.5.3 v1.5.4
-
-## [v1.5.4]
-> 2023-05-09
-* Admin: it is possible to reprocess SVGs images of molecules and samples ([see docs](https://chemotion.net/docs/eln/troubleshooting#fixing-sample-or-molecule-svg-images))
-
-* Fixes
-  * datacollector: find user by insensitive case name_abbreviation [#1302](https://github.com/ComPlat/chemotion_ELN/pull/1302)
-  * eln to work with onlyoffice 7 [#1278](https://github.com/ComPlat/chemotion_ELN/pull/1278)
-  * correct url building for inbox item notification [#1299](https://github.com/ComPlat/chemotion_ELN/pull/1299)
-  * Cas datamodel change [#1287](https://github.com/ComPlat/chemotion_ELN/pull/1287)
-  * Migration fixes [#1307](https://github.com/ComPlat/chemotion_ELN/pull/1307)
-  * reactants from reagent list do not appear above reaction arrow [#1308](https://github.com/ComPlat/chemotion_ELN/pull/1308)
-  * Search api: fix ActiveRecord::UnknownAttributeReference on sum-formulae [#1310](https://github.com/ComPlat/chemotion_ELN/pull/1310)
-
-
-## [v1.5.3]
-> 2023-04-21
-
-* Fixes
-  * analyses-dataset issue [#1271]( https://github.com/ComPlat/chemotion_ELN/pull/1271)
-  * missing index in container entity [#1277](https://github.com/ComPlat/chemotion_ELN/pull/1277)
-  * Report of samples with reaction description: fix calling of descripti..[1281](https://github.com/ComPlat/chemotion_ELN/pull/1281)
-  * fix crash when open and save nmrium [#1275](https://github.com/ComPlat/chemotion_ELN/pull/1275)
-  * Mail-collector: write tmp file to pass path [#1284](https://github.com/ComPlat/chemotion_ELN/pull/1284)
-  * New purification method of Precipitation [#1290](https://github.com/ComPlat/chemotion_ELN/pull/1290)
-  * 1285 do no cache the welcome message [#1286](https://github.com/ComPlat/chemotion_ELN/pull/1286)
-  * 1289 saving wellplate causes white screen [#1295](https://github.com/ComPlat/chemotion_ELN/pull/1295)
-  * Chemdraw JS doesn't work on Google Chrome 111.05563.x [#1266](https://github.com/ComPlat/chemotion_ELN/pull/1266)
-  * show results from calculations [#1291](https://github.com/ComPlat/chemotion_ELN/pull/1291)
-  * report issue fix [#1296](https://github.com/ComPlat/chemotion_ELN/pull/1296)
-
-## [v1.6.0-rc1]
-> 2023-04-11
-
-* Fixes
-  * port fixes from v1.5.2
-
-## [v1.5.2]
-> 2023-04-11
-
-* Fixes
-  * AttachmentAPI: quote filename in content-dispostion header [#1250](https://github.com/ComPlat/chemotion_ELN/pull/1250)
-  * spectra: fix cannot sync 1d data [#1227](https://github.com/ComPlat/chemotion_ELN/pull/1227)
-  * Ease shrine derivative access [#1255](https://github.com/ComPlat/chemotion_ELN/pull/1255)
-  * update chem-spectra-app to version 0.11.2 [#1263](https://github.com/ComPlat/chemotion_ELN/pull/1263)
-  * Literature entity to return reference data and doi [#1257](https://github.com/ComPlat/chemotion_ELN/pull/1257)
-  * 1260 report UI to not break if a report template cannot be found [#1261](https://github.com/ComPlat/chemotion_ELN/pull/1261)
-  * Fix the creation of sample with invalid label 'NEW SAMPLE' [#1240](https://github.com/ComPlat/chemotion_ELN/pull/1240)
-  * Use db-generated uuid for building the attachment shrine id [#1259](https://github.com/ComPlat/chemotion_ELN/pull/1259)
-
-
-## [v1.6.0-rc0]
-> 2023-03-28
-
-* Features and Improvements:
-  * Shibboleth authentication [#1239](https://github.com/ComPlat/chemotion_ELN/pull/1239)
-
-* Fixes
-  * content-disposition header preventing fetching image properly [#1250](https://github.com/ComPlat/chemotion_ELN/pull/1250)
-
-
-## [v1.5.1]
-> 2023-03-24
-
-* Fixes
-  * omniauth provider entity fix [#1217](https://github.com/ComPlat/chemotion_ELN/pull/1217)
-  * PDF attachments in Analyses Tab now readable [#1197](https://github.com/ComPlat/chemotion_ELN/pull/1197)
-  * reset melting & boiling point for products on reaction copy [#1221](https://github.com/ComPlat/chemotion_ELN/pull/1221)
-  * Minor image annotation fixes [#1223](https://github.com/ComPlat/chemotion_ELN/pull/1223)
-  * cannot save 2D data [#1178](https://github.com/ComPlat/chemotion_ELN/pull/1178)
-  * tab layout popups [#1212](https://github.com/ComPlat/chemotion_ELN/pull/1212)
-  * cannot work with Bruker FID [#1232](https://github.com/ComPlat/chemotion_ELN/pull/1232)
-  * Update sample task api for changes in Chemobile App [#1216](https://github.com/ComPlat/chemotion_ELN/pull/1216)
-  *  white screen on the homepage after login [#1231](https://github.com/ComPlat/chemotion_ELN/pull/1231)
-  * Set default search type value (EXACT) [#1224](https://github.com/ComPlat/chemotion_ELN/pull/1224)
-  * Updated welcome message to point to new docs URL [#1236](https://github.com/ComPlat/chemotion_ELN/pull/1236)
-  * export wellplate samples error fix by [#1235](https://github.com/ComPlat/chemotion_ELN/pull/1235)
-
-
-## [v1.5.0]
-> 2023-03-14
-
-* Important for admin and developers:
-  * Gem Shrine is now used to handle attachment files:
-    - if you use a custom config/storage.yml file, ensure your shrine config/shrine.yml is correct or DB migrations will fail
-  * Upgrade Rails to 6.1
-
-* Features and Improvements:
-  * Image Annotation tool ([docs](https://chemotion.net/docs/eln/ui/images))
-  * collection archiving to RADAR (RADAR account needed)
-  * NMRium: NMR data can be processed in [NMRium](https://www.nmrium.org/) ([docs](https://chemotion.net/docs/chemspectra/nmr?_highlight=nmrium#analysis-using-nmrium))
-  * Integration of Chem-converter v0.9.0 ([docs]( https://chemotion.net/docs/chemconverter/)
-  * Wellplate/Screen/ResearchPlan Workflow
-  * Chemspectra: better UI for Cyclic Volt.
-  * add cas to sample export
-  *
-
-* Fixes
-  * Chemspectra: The issue of multiplicities on chemspectra frontend are not removed when changing between layouts with the old JCAMP design is fixed
-  * Chemspectra: Spectra can be processed even when the molfile is invalid (https://github.com/ComPlat/chemotion_ELN/issues/951) (Warning: update chem-spectra-app service to 0.11.0)
-  * Affiliation autocomplete (sign up page)
-  * CAS not searchable (index search might need to be rebuilt)
-  * molecule image cropped in chemspectra
-  * [others](https://github.com/ComPlat/chemotion_ELN/issues?q=is%3Aissue+is%3Aclosed+closed%3A2022-11-10..2023-02-28+label%3Abug+)
-
-
-
-## [v1.4.1]
-> 2022-11-09
-
-* Features and Improvements:
-  * Allow selection of default drawing editor on individual user level settings [Allow selection of default drawing editor on individual user level settings #632](https://github.com/ComPlat/chemotion_ELN/issues/632)
-  * Use 'Search CAS' instead of 'CAS content' based on final feedback from CAS
-  * Ketcher Service on HTTPS
-
-* Fixes:
-  * An incomplete SVG file is generated after sanitizing the SVG
-  * chemspectra on Reaction and ResearchPlan analyses
-  * chemspectra display of XRD data
-  * DataCollector: deletion of folder
-  * Incorrect application root url in Jobs
-  * client handling of attachment hyperlinks
-  * misleading tooltip in the user list  (Admin UI)
-  * proper version of chemspectra app
-
-
-
-## [v1.4.0]
-> 2022-09-26
-
-* Important for admin and developers:
-  * change of environment variable: use PUBLIC_URL instead of HOST and SMTP_HOST
-  * nodejs upd to 14.20.0
-  * drop support for bionic
-
-* Features and Improvements:
-  * ketcherservice: server generation of sample svg
-  * Reaction coefficient: improve yield calculation (https://github.com/ComPlat/chemotion_ELN/issues/544)
-  * Metadata-converter: v0.6.0
-  * Chemspectra: v0.10.15 (allow reprocessing, read Bruker processed files if present)
-  * Inbox: delete multiple attachments at once (https://github.com/ComPlat/chemotion_ELN/issues/571)
-  * research-plan: improve context-menu in tables
-
-
-* Fixes:
-  * SVG generation for sample and reaction: (https://github.com/ComPlat/chemotion_ELN/issues/846)
-  * Sample amount metric
-  * report svg composer: skip image if image file does not exist.
-  * chemspectra: duplicate image generation
-
-
-
-
-## [v1.3.1]
-> 2022-07-07
-
-* Features and Improvements:
-  * Download of large dataset as background job to avoid timeout (https://github.com/ComPlat/chemotion_ELN/issues/785)
-
-* Fixes:
-  * Reaction title on research-plan (https://github.com/ComPlat/chemotion_ELN/issues/787)
-  * Well-details scrolling (https://github.com/ComPlat/chemotion_ELN/issues/669)
-
-
-## [v1.3.0]
-> 2022-07-05
-
-* Features and Improvements:
-  * dataset selection in chemspectra viewer [dataset selection in chemspectra viewer #715](https://github.com/ComPlat/chemotion_ELN/issues/715)
-  * Screens:
-    * Research Plans may be added to Screens
-    * Associated Research Plans may be edited from Screens
-  * Research Plans:
-    * Wellplates may be added to Research Plans
-  * Wellplates:
-    * Add short label with user prefix and user's Wellplate count
-    * Wells have multiple readouts now
-    * Add title for readouts and display of multiple readouts in designer and list
-    * Add attachments
-    * Add import for well data from .xlsx and import template .xlsx
-  * Collection Tag for research-plan screen (https://github.com/ComPlat/chemotion_ELN/pull/774)
-  * Chemspectra : Cyclic Voltametry (Warning: upd chem-spectra-app service to 0.10.14)
-  * ResearchPlan link to reactions and samples (https://github.com/ComPlat/chemotion_ELN/issues/666)
-  * No reaction-svg when no material present (https://github.com/ComPlat/chemotion_ELN/issues/691)
-
-
-* Fixes
-  * report: fix the label can't be assigned issue https://github.com/ComPlat/chemotion_ELN/issues/661
-  * Reference Style improvement [Reference Style improvement #695](https://github.com/ComPlat/chemotion_ELN/issues/695)
-  * Adjust docker setup to work on mac
-  * prevent unecessary building of reaction svg on description text input (https://github.com/ComPlat/chemotion_ELN/issues/759)
-  * elemental composition value with 2 decimals (https://github.com/ComPlat/chemotion_ELN/issues/739)
-  * reference Manager issues (https://github.com/ComPlat/chemotion_ELN/issues/708 https://github.com/ComPlat/chemotion_ELN/issues/756 )
-  * Missing attachment preview in research plan (https://github.com/ComPlat/chemotion_ELN/issues/751)
-
-
-
-
-## [v1.2.1]
-> 2022-05-10
-
-* Fixes
-  * export dataset attachments with no hyperlink present
-  * analysis: preview latest processed image
-  * rails patch upd
-  * npx audit fix
-
-
-## [v1.2.0]
-> 2022-04-14
-
-* Features and Improvements:
-  * fast input: sample creation
-    - users can create samples by entering the CAS Registry Number or SMILES
-  * SciFinder-n Search: integrate SciFinder-n into ELN and user can search in SciFinder for substances/reactions/references/suppliers by structure
-  * analytics converter integration
-  * OIDC signin
-
-
-## [v1.1.4]
-> 2022-04-14
-
-* Fixes
-  * Ketcher icons missing (since 1.1.3)
-
-
-## [v1.1.3]
-> 2022-04-05
-
-* Fixes
-  * npx-audit and Gem patches
-  * migration
-  * reaction prediction UI
-
-
-## [v1.1.2]
-> 2022-03-25
-
-* Fixes
-  * upd chemspectra client: XRD d-value
-  * add product to reaction
-
-
-## [v1.1.1]
-> 2022-03-08
-
-* Fixes
-  * uniq sample short-label while creating reaction
-  * customized toolbar refresh issue in quill editor
-  * rendering of the group list when deleting multiple groups
-  * permission to add elements to sync-collections
-
-
-## [v1.1.0]
-> 2022-01-18
-
-* NB:
-  * Admin: if applicable, chemspectra backend should be updated to version 0.10.13
-  * Developers: reactjs updated to 17
-
-* Features and Improvements:
-  * export sample: literature option for excel list https://github.com/ComPlat/chemotion_ELN/issues/554
-  * report: Add literature section in standard sample report  https://github.com/ComPlat/chemotion_ELN/issues/554
-  * report: Add more information to standard reaction report https://github.com/ComPlat/chemotion_ELN/issues/523
-  * attachments-inbox: filename matching  with sample’s “name” or “external name”. https://github.com/ComPlat/chemotion_ELN/issues/537
-  * attachments-inbox: case-insensitive matching https://github.com/ComPlat/chemotion_ELN/issues/537
-  * attachments-inbox: added labels “product” or “start material” if applicable https://github.com/ComPlat/chemotion_ELN/issues/537
-  * attachments-inbox: when the assignment is completed, send a notification to user’s message box https://github.com/ComPlat/chemotion_ELN/issues/537
-  * attachments-inbox: filename matching to support files from ELA system.
-  * chemspectra: UV-vis layout extension  (part of https://github.com/ComPlat/chemotion_ELN/issues/531 )
-  * chemspectra: Add further functions to XRD layout https://github.com/ComPlat/chemotion_ELN/issues/532
-  * wellplate designer: select info and colour to be displayed in well (https://github.com/ComPlat/chemotion_ELN/issues/556, https://github.com/ComPlat/chemotion_ELN/issues/558)
-  * wellplate designer: print wellplate as pdf (https://github.com/ComPlat/chemotion_ELN/issues/555)
-  * name_abbreviation regexp validation is configurable
-  * swagger documentation: visibility of endpoints doc customizable
-  * rename tab 'literature' to 'references'. Please update the current profile_default.yml with the new one.
-  * Admin user management: add multiple users from file.
-
-* Fixes
-  * import collection failed due to some molecules cannot be created successfully [cannot create molecule with given molfile](https://git.scc.kit.edu/ComPlat/chemotion_ELN/-/issues/1351)
-  * filtering product samples of reactions when filter is on on sample list
-  * https://github.com/ComPlat/chemotion_ELN/issues/584
-  * Notification channels: correct wrong data format
-
-
-## [v1.0.3]
-> 2021-10-21: https://github.com/ComPlat/chemotion_ELN/releases/tag/v1.0.3
-
-* Fixes
-  * reseach-plan .docx export: convert SVG to PNG sample/reaction images
-  * collection import with sample missing molecule_name: use default value
-  * structure editors: added public/editors to ease set up
-  * node post-install fx to resolve node_modules path when located outside of app (docker)
+## [2.0.0]
+> 2024-01-15
+
+* Features and enhancements:
+  * `Dataset Excel` improvement: More information is provided in the `Description` sheet. See the documentation [here](https://www.chemotion.net/docs/labimotion/guides/user/datasets/download).
+  * Inbox Converter: The device files are converted automatically when they arrive in the inbox.
+  * Introduced `Repo Search Tool`: A search tool is now accessible on the Chemotion Repository Home page. This tool enables searches by author, chemical methods ontology, IUPAC, InChi, SMILES, or even allows users to draw a structure for searching in Data Publications or Molecule Archive.
+  * Enhanced JSON-LD Option: An additional option has been incorporated into JSON-LD, allowing users to view all samples of the published reaction.
+  * JSON-LD Format Support: Data Publications now support the JSON-LD format. We are continually refining this function to align more closely with schema.org standards.
+  * Introduced Review Guidelines and Reviewers' Introduction Section: We have added a dedicated section to clearly outline the review guidelines and provide an introduction for reviewers.
+  * LabIMotion Hub UI Optimization: We have optimized the LabIMotion Hub UI to improve user experience.
+  * Implemented `Lock` mechanism: The original sample or reaction is automatically locked upon submission. Submitters have the option to unlock it for further editing.
+  * Enhanced the front-end code to eliminate the 'unique key of child' warning.
+  * Introduced Generic Dataset section in Publication Page: Generic datasets are now displayed on the publication page, enhancing the overall user experience. Example link: [Reaction DOI](https://dx.doi.org/10.14272/reaction/SA-FUHFF-UHFFFADPSC-DBLYDXDFRQ-UHFFFADPSC-NUHFF-FFHMS-NUHFF-ZZZ.21).
+  * Introduced Generic Dataset in Review Page: Similarly, Generic Datasets are visible on the review page, providing comprehensive information to reviewers.
+  * Refactored Submission Data Check Modal: The submission data check modal has been refactored for better user experience.
+  * Always Create a New Record for Review Comments: A new record is now created for each review comment. This feature is applicable for actions taken after deployment.
+  * Introduced Converter Feature for Inbox Data: A converter feature has been added to facilitate easy conversion of inbox data, streamlining data processing tasks.
+  * Made Temperature, Duration, and Description Optional for Submission: Users now have the flexibility to submit data without providing temperature, duration, and description, simplifying the submission process.
+  * Re-packed the MolViewer to deal with cif file.
+  * Invisibility of Temperature, Duration, and Description on Publication Page: If no data is available, temperature, duration, and description fields are now invisible on the publication page, providing a cleaner and more concise presentation.
+  * Introduced `Review Comment Ownership` feature: User can now create review comments to maintain ownership and clarity.
+  * Enhanced Review Comments: Added the capability to attach review comments to the physical properties of the sample.
+  * Improved User Comment Modal: The User Comment Modal can now be dragged and ensures the background remains visible.
+  * Automatic Closure of Review Modal: The Review Modal now closes automatically when the user closes the element on the review page.
+  * Improved the Submission Check view: The Submission Check view has been enhanced to provide a better user experience.
+  * Introduced `Download Metadata and Data`: Users have the ability to acquire metadata in xlsx format(`Dataset Excel`). Furthermore, an option is provided for users to download both the data and metadata together as a compressed zip file.
+  * Implemented a feature for global user labeling: Authorized users can now define a global label that is accessible to all users.
+  * Introduced `LabIMotion Template Hub`: The LabIMotion Template Hub is now available for users to access and download templates. See [here](https://www.chemotion-repository.net/home/genericHub) for more information.
+  * Added `license` to the linked data.
+  * Added X-Vial to the Publication Page.
+  * Introduced `MolViewer`: Users can now use the button `Viewer` to view molecules structure in the MolViewer.
+  * Added `.tool-versions` file to the repository.
+
+* Bug fixes:
+  * Resolved a bug causing an invalid date format in certain cases.
+  * Addressed an issue where reviewers encountered an empty embargo list.
+  * Fixed a bug where scientists organizing report content experienced page breaks.
+  * Corrected Navigation URLs: Navigation URLs have been reviewed and corrected to prevent incorrect redirects, ensuring seamless browsing for users.
+  * Fixed Issue with Missing File Extensions: An issue occurring when filenames lacked file extensions has been resolved. Files are now handled correctly regardless of the presence of an extension.
+  * Text Copying Issue Resolved: The problem with copying text in the User Comment Modal has been fixed.
+  * Fixed the issue where the unit data cannot be displayed in the publication page.
+  * Addressed an issue where terminology data was not retained following import.
+  * Resolved an issue where users were unable to utilize the 'Compare View' feature to assess the disparities between the submitted data and the current working version.
+  * Fixed the issue that different molecule shows the same structure in the MolViewer.
+  * Corrected dataCatalog syntax error.
+
+* Chores:
+  * Upgraded ChemSpectra.
+  * Upgraded Converter.
+  * Upgraded Labimotion.
+  * Upgraded NMRium.
+  * Upgraded node version.
+  * Upgraded Ruby version.
+  * Included the [Chemotion ELN version 1.8.1](https://github.com/ComPlat/chemotion_ELN/blob/v1.8.1/CHANGELOG.md).
+
+
+## [1.2.0]
+> 2023-06-29
 
 
+* Enhancements:
 
-## [v1.0.2]
-> 2021-10-19: https://github.com/ComPlat/chemotion_ELN/releases/tag/v1.0.2
+  * published on ISO8601. ComPlat/chemotion_REPO#46
+  * Add physical properties which are melting point and boiling point information to the publication page and review page.
+  * Introduction of the data protection mechanism where the system automatically locks data after scientists submit their work; they can unseal the data for editing.
+  * publish sample: pre-chosen license. ComPlat/chemotion_REPO#27
+  * Introduction of the feature that users can see the information from the original one after transferring the data from ELN and click on it to redirect to the ELN instance.
+  * Upgrade node version.
 
 ## [1.1.0]
 > 2023-06-12
@@ -523,238 +99,6 @@
   * Fixed an issue where the embargo job would get stuck if the mail server did not respond.
 
 * Fixes
-  * rename chemotion.net to chemotion-repository.net in the Collection Bar [rename chemotion.net to chemotion-repository.net in the Collection Bar #515](https://github.com/ComPlat/chemotion_ELN/issues/515)
-  * input field on ipad [Not all fields work normally with ipad #458](https://github.com/ComPlat/chemotion_ELN/issues/458)
-  * The permission level "delete" in sharing collections doesn't work and the receiver can't delete [The permission level "delete" in sharing collections doesn't work and the receiver can't delete #425](https://github.com/ComPlat/chemotion_ELN/issues/425)
-  * truncated reaction svg
-  * upload of large files
-  * reload of reports
-
-
-## [v0.9.1]
-> 2021-06-04: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.9.1
-
-* Fixes
-  * sync/share deletion permission
-  * Admin: segment deletion
-
-
-## [v0.9.0]
-> 2021-05-26: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.9.0
-
-* Features
-  * Decoupled sample: molfile-less sample creation
-  * Generic-element/segment (Beta): customizable data structure
-
-* Fixes
-  * serialization of sdf-imported molecules with improper file encoding
-
-
-## [v0.8.0]
-> 2021-04-28: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.8.0
-
-* Features
-  * option to decouple sample from molfile defined molecule - enable user custom MW input (Admin has to enable the feature)
-  * research-plan table: switch to using ag-grid - enable moving  row/columns with d-n-d
-  * nmr_sim ELN plugin installed by default
-
-* Fixes
-  * Add configurable default profile for Element-Detail tab sortings
-  * slow opening of reaction panel: rm debounce
-  * green-chemistry: fix checkbox rerendering in table cell
-  * Analytics atom count scenari
-  * default favicon if none present
-
-
-## [v0.7.1]
-> 2021-03-26: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.7.1
-
-* Features
-  * sorting of tabs in Element-detail Panel (Sample, Reaction,...)
-
-* Fixes
-  * mimemagic gem updated due to previous version forced retirement
-  * research-plan table: cell focus input
-  * slow opening of reaction panel: rm debounce
-
-
-## [v0.7.0]
-> 2021-03-15: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.7.0
-
-
-## [v0.6.0]
-> 2019-12-16: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.6.0
-
-* Features
- * minor UX improvements
- * admin UI for data-collector and noVNC connection
- * improve report UI performance
-
-
-## [v0.5.0]
-> 2019-10-08
-
-* Features
-  * Analysis type according to Chemical Ontology (owl)
-  * export data from whole collections as zip (and import them)
-  * server notification system to users. E.g: user get notified when:
-    - the report generation is done
-    - it needs to refresh the browsers page to reload the cached application (update)
-  * Admin UI:
-    - NB: migrations will seed a default admin account => you need to change its password
-      email: `eln-admin@kit.edu` , pw: `PleaseChangeYourPassword`
-    - basic user management functions + direct notification to user
-    - DataCollector device configuration
-    - global notification to users
-  * Green Chemistry calculator for reaction
-  * RInChI integration
-  * new reporting functions
-  * sample/reaction large image preview from their element lists on hover
-  * clone samples/reactions to one's Chemotion Repository account (chemotion.net)
-
-* Upgrade Notes:
-  * must do: change the default password of the default admin account (vide supra)
-  * should do: reports are now stored as attachments run rake task
-  `data:ver_20180812115719_add_colums_to_attachment` to ensure the retrievability of previously generated
-  reports
-
-
-## [v0.4.0]
-> yyyy-mm-dd
-
-* Features
-  * Element list: added time range filter / product filter
-  * enhanced data collector, new configuration (Breaking change)
-  * Export reactions as reaction smiles
-  * Extract RSMI from docx embedded cdx object
-
-* Fixes
-  * Report formating
-  * shared collection from deleted account
-
-
-## [v0.3.dev]
-> yyyy-mm-dd
-
-* Features
-  * upg Rails to 4.2.10 nvm to 6.10.2
-
-* Fixes
-  * Docker: node_modules as volume
-  * collection_tag update after element re-assignmnet to former collection
-
-
-## [v0.3.0]
-> 2017-11-15: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.3.0
-
-* Features
-  * Export reaction smiles
-  * reporting: revamp of UI
-  * reporting: analysis metadata formating
-  * user affiliations management
-  * revamp of sample/reaction detail UI
-  * select the sample molecule_name to display
-  * fetch CAS from pubchem
-  * uuid (qr code) for each element (sample, reaction, analyse)
-  * export samples as sdf
-  * adv search
-  * Docker install
-
-* Fixes
-  * search result element ordering
-  * dependent destroy of collections-elements
-  * sample density default set to 0
-  * react production build
-
-
-## [v0.2.1]
-> 2016-11-02
-
-* Features
-  * Temperature Chart with unit converter (°C, °F , K) for reaction
-  * Import molecules and create samples from a sd file
-    (R group and polymer support are not supported)
-  * Images in report doc are from eps files
-  * rearrange the reaction list for a report by Drag-and-drop -ing
-  * Text editing and formating tool bar for the reaction description
-
-* Fixes
-  * upgrade to Ruby 2.3.1
-  * The Upload of analyses files does not fail if the thumbnail creation does
-
-
-## [v0.2.0]
-> 2016-10-17: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.2.0
-
-* Features
-  * sharing data with a group of users
-  * substructure search with fingerprint algorithm
-  * multiple solvents for reactions
-  * drag-and-drop of sample to reaction solvent
-  * user-defined chemical structure templates
-  * common chemical structure templates
-  * synchronized collections
-  * added full-screeen button to element view
-  * database and attachments backups
-  * better import feature
-  * advanced export options
-  * generate reports in .doc format
-  * different naming for reaction product
-  * add concentration to sample in solution
-  * updates in reporting system
-  * molecular weight calculation in real time Ketcherails v0.1.1
-  * molecular weight calculation for selected structure part in
-    real time Ketcherails v0.1.1
-  * warning for user when editing parent/child sample: parent/child samples
-    structures are not automatically updated
-  * reactants are not appearing in the samples list anymore
-  * added more details to sample analyses header
-  * style and user interface improvements
-  * zooming of reactions SVGs
-
-* Fixes
-  * user created samples counter is not decremented on deletion
-  * add material for reaction
-  * do not show non-saved collection in collection tree
-  * edit sample from reaction
-  * better scaling of sample and reaction SVG images
-  * multiple bug fixes
-
-
-## [v0.1.0]
-> 2016-05-31: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.1.0
-
-* Features
-  * ELN for (organic) chemistry
-ton to element view
-  * database and attachments backups
-  * better import feature
-  * advanced export options
-  * generate reports in .doc format
-  * different naming for reaction product
-  * add concentration to sample in solution
-  * updates in reporting system
-  * molecular weight calculation in real time Ketcherails v0.1.1
-  * molecular weight calculation for selected structure part in
-    real time Ketcherails v0.1.1
-  * warning for user when editing parent/child sample: parent/child samples
-    structures are not automatically updated
-  * reactants are not appearing in the samples list anymore
-  * added more details to sample analyses header
-  * style and user interface improvements
-  * zooming of reactions SVGs
-
-* Fixes
-  * user created samples counter is not decremented on deletion
-  * add material for reaction
-  * do not show non-saved collection in collection tree
-  * edit sample from reaction
-  * better scaling of sample and reaction SVG images
-  * multiple bug fixes
-
-
-## [v0.1.0]
-> 2016-05-31: https://github.com/ComPlat/chemotion_ELN/releases/tag/v0.1.0
-
-* Features
-  * ELN for (organic) chemistry
+  * npx-audit and Gem patches
+  * migration
+  * reaction prediction UI
diff --git a/README.md b/README.md
index 42b907e64..61c24bd87 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,22 @@
 
 Empowering chemists with a comprehensive solution for storing, managing, and analyzing samples, reactions, and research data.
 
----
+## Usage
+
+Initiate your exploration of the Chemotion Repository by visiting our official website: **[Chemotion Repository](https://www.chemotion-repository.net/welcome)**.
+
+For a comprehensive understanding of the Chemotion Repository, refer to our online **[Documentation](https://www.chemotion.net/docs/repo/)**.
+
+## Acknowledgments
+
+Funded by the [Deutsche Forschungsgemeinschaft (DFG, German Research Foundation)](https://www.dfg.de/) under the [National Research Data Infrastructure – NFDI4Chem](https://nfdi4chem.de/) – Projektnummer **441958208**.
+
+<a href="https://www.dfg.de/" target="_blank"><img src="./public/images/repo/dfg_logo_schriftzug_blau_foerderung_en.jpg" width="50%" alt="DFG Logo"></a>
 
 ## License
 
-**Copyright © `2015` - `2023` [Nicole Jung]** <br>
-of the **[Karlsruhe Institute of Technology]**.
+**Copyright © `2015` - `2024` [Nicole Jung](mailto:nicole.jung@kit.edu)** <br>
+of the **[Karlsruhe Institute of Technology](https://www.kit.edu/english/)**.
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -21,24 +31,3 @@ of the **[Karlsruhe Institute of Technology]**.
 
     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
----
-
-## Acknowledgments
-
-## User Documentation
-
-This project has been funded by the **[DFG]**.
-
-[![DFG Logo]][DFG]
-
-## User Documentation
-
-see online **⸢ [Documentation] ⸥**
-
-<!----------------------------------------------------------------------------->
-[Documentation]: https://www.chemotion.net/docs/repo/
-[DFG]: https://www.dfg.de/en/
-[DFG Logo]: https://www.dfg.de/zentralablage/bilder/service/logos_corporate_design/logo_negativ_267.png
-[Nicole Jung]: mailto:nicole.jung@kit.edu
-[Karlsruhe Institute of Technology]: https://www.kit.edu/english/
diff --git a/app/api/chemotion/attachment_api.rb b/app/api/chemotion/attachment_api.rb
index db9323d3d..9ea29b2ab 100644
--- a/app/api/chemotion/attachment_api.rb
+++ b/app/api/chemotion/attachment_api.rb
@@ -51,13 +51,6 @@ def remove_duplicated(att)
 
         old_att&.destroy
       end
-
-      def validate_uuid_format(uuid)
-        uuid_regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i
-        return true if uuid_regex.match?(uuid.to_s.downcase)
-
-        return false
-      end
     end
 
     rescue_from ActiveRecord::RecordNotFound do |_error|
@@ -151,20 +144,6 @@ def validate_uuid_format(uuid)
                           (ElementPolicy.new(current_user, element).read? &&
                           ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
             end
-
-            if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
-              element = Segment.find(@attachment.attachable_id)&.element
-              can_dwnld = @attachment.created_for == current_user.id ||
-                          (ElementPolicy.new(current_user, element).read? &&
-                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
-            end
-
-            if !can_dwnld && @attachment.attachable_type == 'SegmentProps'
-              element = Segment.find(@attachment.attachable_id)&.element
-              can_dwnld = @attachment.created_for == current_user.id ||
-                          (ElementPolicy.new(current_user, element).read? &&
-                          ElementPermissionProxy.new(current_user, element, user_ids).read_dataset?)
-            end
           end
           error!('401 Unauthorized', 401) unless can_dwnld
         end
@@ -514,97 +493,6 @@ def validate_uuid_format(uuid)
         { status: true }
       end
 
-      desc 'Regenerate edited spectra'
-      params do
-        requires :edited, type: Array[Integer]
-        optional :molfile, type: String
-      end
-      post 'regenerate_edited_spectrum' do
-        pm = to_rails_snake_case(params)
-        pm[:edited].each do |g_id|
-          att = Attachment.find(g_id)
-          next unless att
-          can_edit = writable?(att)
-
-          next unless writable?(att)
-
-          remove_duplicated(att)
-
-          abs_path = att.abs_path
-          molfile = pm[:molfile]
-          result =  Tempfile.create('molfile') do |t_molfile|
-            t_molfile.write(molfile)
-            t_molfile.rewind
-            Chemotion::Jcamp::RegenerateJcamp.spectrum(
-              abs_path, t_molfile.path
-            )
-          end
-
-          att.file_data = result
-          att.rewrite_file_data!
-          { status: true }
-
-        end
-      end
-
-      desc 'Regenerate edited spectra'
-      params do
-        requires :edited, type: Array[Integer]
-        optional :molfile, type: String
-      end
-      post 'regenerate_edited_spectrum' do
-        pm = to_rails_snake_case(params)
-        pm[:edited].each do |g_id|
-          att = Attachment.find(g_id)
-          next unless att
-          can_edit = writable?(att)
-          if can_edit
-            abs_path = att.abs_path
-            molfile = pm[:molfile]
-            result =  Tempfile.create('molfile') do |t_molfile|
-              t_molfile.write(molfile)
-              t_molfile.rewind
-              Chemotion::Jcamp::RegenerateJcamp.spectrum(
-                abs_path, t_molfile.path
-              )
-            end
-
-            att.file_data = result
-            att.rewrite_file_data!
-            { status: true }
-          end
-        end
-      end
-
-      desc 'Regenerate edited spectra'
-      params do
-        requires :edited, type: Array[Integer]
-        optional :molfile, type: String
-      end
-      post 'regenerate_edited_spectrum' do
-        pm = to_rails_snake_case(params)
-        pm[:edited].each do |g_id|
-          att = Attachment.find(g_id)
-          next unless att
-          can_edit = writable?(att)
-          if can_edit
-            abs_path = att.abs_path
-            molfile = pm[:molfile]
-            result =  Tempfile.create('molfile') do |t_molfile|
-              t_molfile.write(molfile)
-              t_molfile.rewind
-              Chemotion::Jcamp::RegenerateJcamp.spectrum(
-                abs_path, t_molfile.path
-              )
-            end
-
-            att.file_data = result
-            att.rewrite_file_data!
-            { status: true }
-          end
-        end
-      end
-
       desc 'Save spectra to file'
       params do
         requires :attachment_id, type: Integer
diff --git a/app/api/chemotion/collection_api.rb b/app/api/chemotion/collection_api.rb
index 8bd3a3010..b522ce267 100644
--- a/app/api/chemotion/collection_api.rb
+++ b/app/api/chemotion/collection_api.rb
@@ -27,34 +27,6 @@ class CollectionAPI < Grape::API
         end
       end
 
-      namespace :all_as_tree do
-        desc "Return the 'All' collection of the current user"
-        get do
-          current_user.collections.arrange_serializable do |parent, children|
-            {
-              title: parent.label,
-              value: parent.id,
-              key: parent.id,
-              children: children
-            }
-          end
-        end
-      end
-
-      namespace :all_as_tree do
-        desc "Return the 'All' collection of the current user"
-        get do
-          current_user.collections.arrange_serializable do |parent, children|
-            {
-              title: parent.label,
-              value: parent.id,
-              key: parent.id,
-              children: children
-            }
-          end
-        end
-      end
-
       desc "Return collection by id"
       params do
         requires :id, type: Integer, desc: "Collection id"
@@ -350,6 +322,7 @@ class CollectionAPI < Grape::API
             ui_state[:checkedIds] = ui_state[:checkedIds].presence || ui_state[:included_ids]
             ui_state[:uncheckedIds] = ui_state[:uncheckedIds].presence || ui_state[:excluded_ids]
             next unless ui_state[:checkedAll] || ui_state[:checkedIds].present?
+
             collections_element_klass = ('collections_' + element).classify.constantize
             element_klass = element.classify.constantize
             ids = element_klass.by_collection_id(from_collection.id).by_ui_state(ui_state).pluck(:id)
diff --git a/app/api/chemotion/converter_api.rb b/app/api/chemotion/converter_api.rb
deleted file mode 100644
index c5f14e697..000000000
--- a/app/api/chemotion/converter_api.rb
+++ /dev/null
@@ -1,68 +0,0 @@
-# frozen_string_literal: true
-
-module Chemotion
-  class ConverterAPI < Grape::API
-    helpers do
-    end
-    resource :converter do
-      resource :profiles do
-        before do
-          @conf = Rails.configuration.try(:converter).try(:url)
-          @profile = Rails.configuration.try(:converter).try(:profile)
-          error!(406) unless @conf && @profile
-        end
-        desc 'fetch profiles'
-        get do
-          profiles = Analyses::Converter.fetch_profiles
-          { profiles: profiles, client: @profile }
-        end
-        desc 'create profile'
-        post do
-          Analyses::Converter.create_profile(params)
-        end
-        desc 'update profile'
-        route_param :id do
-          put do
-            Analyses::Converter.update_profile(params)
-          end
-        end
-        desc 'delete profile'
-        route_param :id do
-          delete do
-            id = params[:id]
-            Analyses::Converter.delete_profile(id)
-          end
-        end
-      end
-
-      resource :options do
-        before do
-          error!(401) unless current_user.profile&.data['converter_admin'] == true
-          @conf = Rails.configuration.try(:converter).try(:url)
-          @profile = Rails.configuration.try(:converter).try(:profile)
-          error!(406) unless @conf && @profile
-        end
-        desc 'fetch options'
-        get do
-          options = Analyses::Converter.fetch_options
-          { options: options, client: @profile }
-        end
-      end
-
-      resource :tables do
-        before do
-          error!(401) unless current_user.profile&.data['converter_admin'] == true
-          @conf = Rails.configuration.try(:converter).try(:url)
-          @profile = Rails.configuration.try(:converter).try(:profile)
-          error!(406) unless @conf && @profile
-        end
-        desc 'create tables'
-        post do
-          res = Analyses::Converter.create_tables(params[:file][0]['tempfile']) unless params[:file].empty?
-          res['metadata']['file_name'] = params[:file][0]['filename']
-          res
-        end
-      end
-    end
-  end
-end
diff --git a/app/api/chemotion/element_api.rb b/app/api/chemotion/element_api.rb
index e3b9e69ed..5d3c36217 100644
--- a/app/api/chemotion/element_api.rb
+++ b/app/api/chemotion/element_api.rb
@@ -100,13 +100,6 @@ class ElementAPI < Grape::API
           deleted[klass.name] = @collection.send('elements').by_ui_state(params[klass.name]).destroy_all.map(&:id)
         end
 
-        sql_pub = "(element_id in (?) and element_type = 'Sample') or (element_id in (?) and element_type = 'Reaction')"
-        Publication.where(sql_pub, deleted['sample'], deleted['reaction'])
-                   .map(&:root).uniq.each do |e|
-          e.update_state(Publication::STATE_DECLINED)
-          e.proces_element(Publication::STATE_DECLINED)
-          e.inform_users(Publication::STATE_DECLINED, current_user.id)
-        end
         { selecteds: params[:selecteds].select { |sel| !deleted.fetch(sel['type'], []).include?(sel['id']) } }
       end
 
diff --git a/app/api/chemotion/gate_api.rb b/app/api/chemotion/gate_api.rb
index 07eb980a6..906697f1a 100644
--- a/app/api/chemotion/gate_api.rb
+++ b/app/api/chemotion/gate_api.rb
@@ -159,78 +159,6 @@ def self.parsed?(value)
       end
 
 
-      desc <<~DESC
-        receive sample and reaction data from a remote eln and import them into a designated
-        collection according to JWT info. (authentication through JWT)
-      DESC
-      namespace :receiving_zip do
-        params do
-          requires :data, type: File
-        end
-
-        before do
-          http_token = if request.headers['Authorization'].present?
-                         request.headers['Authorization'].split(' ').last
-                       end
-          error!('Unauthorized', 401) unless http_token
-          secret = Rails.application.secrets.secret_key_base
-          begin
-            @auth_token = HashWithIndifferentAccess.new(
-              JWT.decode(http_token, secret)[0]
-            )
-          rescue JWT::VerificationError, JWT::DecodeError, JWT::ExpiredSignature => e
-            error!("#{e}", 401)
-          end
-          @user = Person.find_by(email: @auth_token[:iss])
-          error!('Unauthorized', 401) unless @user
-          @collection = Collection.find_by(
-            id: @auth_token[:collection], user_id: @user.id, is_shared: false
-          )
-          error!('Unauthorized access to collection', 401) unless @collection
-
-          @origin = @auth_token["origin"]
-        end
-
-        post do
-          db_file = params[:data]&.fetch('tempfile', nil)
-          # file = params[:file]
-          tempfile = db_file
-          att = Attachment.new(
-            filename: params[:data][:filename],
-            key: File.basename(tempfile.path),
-            file_path: tempfile,
-            created_by: @user.id,
-            created_for: @user.id,
-            content_type: 'application/zip'
-          )
-          begin
-            att.save!
-          ensure
-            tempfile.close
-            tempfile.unlink
-          end
-
-          begin
-            import = Import::ImportCollections.new(att, @user.id, true, @collection.id, @origin)
-            import.extract
-            import.import!
-          rescue => e
-            Delayed::Worker.logger.error e
-            Message.create_msg_notification(
-              channel_subject: Channel::COLLECTION_ZIP_FAIL,
-              message_from: @user&.id,
-              data_args: { col_labels: '', operation: 'import' },
-              autoDismiss: 5
-            )
-            @success = false
-          ensure
-            att&.destroy!
-          end
-          status(200)
-        end
-      end
-
-
       desc <<~DESC
         receive sample and reaction data from a remote eln and import them into a designated
         collection according to JWT info. (authentication through JWT)
diff --git a/app/api/chemotion/generic_dataset_api.rb b/app/api/chemotion/generic_dataset_api.rb
deleted file mode 100644
index 079665e80..000000000
--- a/app/api/chemotion/generic_dataset_api.rb
+++ /dev/null
@@ -1,27 +0,0 @@
-module Chemotion
-  class GenericDatasetAPI < Grape::API
-    include Grape::Kaminari
-
-    resource :generic_dataset do
-      namespace :klasses do
-        desc "get dataset klasses"
-        get do
-          list = DatasetKlass.where(is_active: true)
-          present list.sort_by(&:place), with: Entities::DatasetKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :list_dataset_klass do
-        desc 'list Generic Dataset Klass'
-        params do
-          optional :is_active, type: Boolean, desc: 'Active or Inactive Dataset'
-        end
-        get do
-          list = DatasetKlass.where(is_active: params[:is_active]) if params[:is_active].present?
-          list = DatasetKlass.all unless params[:is_active].present?
-          present list.sort_by(&:place), with: Entities::DatasetKlassEntity, root: 'klass'
-        end
-      end
-    end
-  end
-end
diff --git a/app/api/chemotion/generic_element_api.rb b/app/api/chemotion/generic_element_api.rb
deleted file mode 100644
index 8f996e27a..000000000
--- a/app/api/chemotion/generic_element_api.rb
+++ /dev/null
@@ -1,427 +0,0 @@
-# frozen_string_literal: true
-module Chemotion
-  # Generic Element API
-  class GenericElementAPI < Grape::API
-    include Grape::Kaminari
-    helpers ContainerHelpers
-    helpers ParamsHelpers
-    helpers CollectionHelpers
-    helpers SampleAssociationHelpers
-    helpers GenericHelpers
-
-    resource :generic_elements do
-      namespace :klass do
-        desc 'get klass info'
-        params do
-          requires :name, type: String, desc: 'element klass name'
-        end
-        get do
-          ek = ElementKlass.find_by(name: params[:name])
-          present ek, with: Entities::ElementKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :klasses do
-        desc 'get klasses'
-        params do
-          optional :generic_only, type: Boolean, desc: 'list generic element only'
-        end
-        get do
-          list = ElementKlass.where(is_active: true, is_generic: true).order('place') if params[:generic_only].present? && params[:generic_only] == true
-          list = ElementKlass.where(is_active: true).order('place') unless params[:generic_only].present? && params[:generic_only] == true
-          present list, with: Entities::ElementKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :create_element_klass do
-        desc 'create Generic Element Klass'
-        params do
-          requires :name, type: String, desc: 'Element Klass Name'
-          requires :label, type: String, desc: 'Element Klass Label'
-          requires :klass_prefix, type: String, desc: 'Element Klass Short Label Prefix'
-          optional :icon_name, type: String, desc: 'Element Klass Icon Name'
-          optional :desc, type: String, desc: 'Element Klass Desc'
-          optional :properties_template, type: Hash, desc: 'Element Klass properties template'
-        end
-        post do
-          authenticate_admin!('elements')
-          uuid = SecureRandom.uuid
-          template = { uuid: uuid, layers: {}, select_options: {} }
-          attributes = declared(params, include_missing: false)
-          attributes[:properties_template]['uuid'] = uuid if attributes[:properties_template].present?
-          attributes[:properties_template] = template unless attributes[:properties_template].present?
-          attributes[:properties_template]['eln'] = Chemotion::Application.config.version if attributes[:properties_template].present?
-          attributes[:properties_template]['klass'] = 'ElementKlass' if attributes[:properties_template].present?
-          attributes[:is_active] = false
-          attributes[:uuid] = uuid
-          attributes[:released_at] = DateTime.now
-          attributes[:properties_release] = attributes[:properties_template]
-          attributes[:created_by] = current_user.id
-
-          new_klass = ElementKlass.create!(attributes)
-          new_klass.reload
-          new_klass.create_klasses_revision(current_user.id)
-          klass_names_file = Rails.root.join('config', 'klasses.json')
-          klasses = ElementKlass.where(is_active: true)&.pluck(:name) || []
-          File.write(klass_names_file, klasses)
-
-          status 201
-        rescue ActiveRecord::RecordInvalid => e
-          { error: e.message }
-        end
-      end
-
-      namespace :update_element_klass do
-        desc 'update Generic Element Klass'
-        params do
-          requires :id, type: Integer, desc: 'Element Klass ID'
-          optional :label, type: String, desc: 'Element Klass Label'
-          optional :klass_prefix, type: String, desc: 'Element Klass Short Label Prefix'
-          optional :icon_name, type: String, desc: 'Element Klass Icon Name'
-          optional :desc, type: String, desc: 'Element Klass Desc'
-          optional :place, type: String, desc: 'Element Klass Place'
-        end
-        post do
-          authenticate_admin!('elements')
-          place = params[:place] || 100
-          begin
-            place = place.to_i if place.present? && place.to_i == place.to_f
-          rescue StandardError
-            place = 100
-          end
-          klass = ElementKlass.find(params[:id])
-          klass.label = params[:label] if params[:label].present?
-          klass.klass_prefix = params[:klass_prefix] if params[:klass_prefix].present?
-          klass.icon_name = params[:icon_name] if params[:icon_name].present?
-          klass.desc = params[:desc] if params[:desc].present?
-          klass.place = place
-          klass.save!
-          klass
-        end
-      end
-
-      namespace :klass_revisions do
-        desc 'list Generic Element Revisions'
-        params do
-          requires :id, type: Integer, desc: 'Generic Element Klass Id'
-          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
-        end
-        get do
-          klass = params[:klass].constantize.find_by(id: params[:id])
-          list = klass.send("#{params[:klass].underscore}es_revisions") unless klass.nil?
-          present list.sort_by(&:released_at).reverse, with: Entities::KlassRevisionEntity, root: 'revisions'
-        end
-      end
-
-      namespace :element_revisions do
-        desc 'list Generic Element Revisions'
-        params do
-          requires :id, type: Integer, desc: 'Generic Element Id'
-        end
-        get do
-          klass = Element.find(params[:id])
-          list = klass.elements_revisions unless klass.nil?
-          present list&.sort_by(&:created_at).reverse, with: Entities::ElementRevisionEntity, root: 'revisions'
-        end
-      end
-
-      namespace :delete_klass_revision do
-        desc 'delete Klass Revision'
-        params do
-          requires :id, type: Integer, desc: 'Revision ID'
-          requires :klass_id, type: Integer, desc: 'Klass ID'
-          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
-        end
-        post do
-          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
-          revision = "#{params[:klass]}esRevision".constantize.find(params[:id])
-          klass = params[:klass].constantize.find_by(id: params[:klass_id]) unless revision.nil?
-          error!('Revision is invalid.', 404) if revision.nil?
-          error!('Can not delete the active revision.', 405) if revision.uuid == klass.uuid
-          revision&.destroy!
-          status 201
-        end
-      end
-
-      namespace :delete_revision do
-        desc 'delete Generic Element Revisions'
-        params do
-          requires :id, type: Integer, desc: 'Revision Id'
-          requires :element_id, type: Integer, desc: 'Element ID'
-          requires :klass, type: String, desc: 'Klass', values: %w[Element Segment Dataset]
-        end
-        post do
-          revision = "#{params[:klass]}sRevision".constantize.find(params[:id])
-          element = params[:klass].constantize.find_by(id: params[:element_id]) unless revision.nil?
-          error!('Revision is invalid.', 404) if revision.nil?
-          error!('Can not delete the active revision.', 405) if revision.uuid == element.uuid
-          revision&.destroy!
-          status 201
-        end
-      end
-
-      namespace :segment_revisions do
-        desc 'list Generic Element Revisions'
-        params do
-          optional :id, type: Integer, desc: 'Generic Element Id'
-        end
-        get do
-          klass = Segment.find(params[:id])
-          list = klass.segments_revisions unless klass.nil?
-          present list&.sort_by(&:created_at).reverse, with: Entities::SegmentRevisionEntity, root: 'revisions'
-        end
-      end
-
-      namespace :upload_generics_files do
-        desc 'upload generic files'
-        params do
-          requires :att_id, type: Integer, desc: 'Element Id'
-          requires :att_type, type: String, desc: 'Element Type'
-        end
-
-        after_validation do
-          el = params[:att_type].constantize.find_by(id: params[:att_id])
-          error!('401 Unauthorized', 401) if el.nil?
-
-          policy_updatable = ElementPolicy.new(current_user, el).update?
-          error!('401 Unauthorized', 401) unless policy_updatable
-        end
-        post do
-          attach_ary = []
-          att_ary = create_uploads('Element', params[:att_id], params[:elfiles], params[:elInfo], current_user.id) if params[:elfiles].present? && params[:elInfo].present?
-          (attach_ary << att_ary).flatten! unless att_ary.blank?
-          att_ary = create_uploads('Segment', params[:att_id], params[:sefiles], params[:seInfo], current_user.id) if params[:sefiles].present? && params[:seInfo].present?
-          (attach_ary << att_ary).flatten! unless att_ary.blank?
-          att_ary = create_attachments(params[:attfiles], params[:delfiles], params[:att_type], params[:att_id], current_user.id) if params[:attfiles].present? || params[:delfiles].present?
-          (attach_ary << att_ary).flatten! unless att_ary.blank?
-          TransferThumbnailToPublicJob.set(queue: "transfer_thumbnail_to_public_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
-          TransferFileFromTmpJob.set(queue: "transfer_file_from_tmp_#{current_user.id}").perform_now(attach_ary) unless attach_ary.empty?
-          true
-        end
-      end
-
-      namespace :klasses_all do
-        desc 'get all klasses for admin function'
-        get do
-          list = ElementKlass.all.sort_by { |e| e.place }
-          present list, with: Entities::ElementKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :de_activate_klass do
-        desc 'activate or deactivate Generic Klass'
-        params do
-          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
-          requires :id, type: Integer, desc: 'Klass ID'
-          requires :is_active, type: Boolean, desc: 'Active or Inactive Klass'
-        end
-        after_validation do
-          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
-          @klz = fetch_klass(params[:klass], params[:id])
-        end
-        post do
-          @klz&.update!(is_active: params[:is_active])
-          generate_klass_file unless @klz.class.name != 'ElementKlass'
-
-          @klz
-        end
-      end
-
-      namespace :delete_klass do
-        desc 'delete Generic Klass'
-        params do
-          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
-          requires :id, type: Integer, desc: 'Klass ID'
-        end
-        delete ':id' do
-          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
-          klass = fetch_klass(params[:klass], params[:id])
-          klass&.destroy!
-          generate_klass_file unless klass.class.name != 'ElementKlass'
-          status 201
-        end
-      end
-
-      namespace :update_template do
-        desc 'update Generic Properties Template'
-        params do
-          requires :klass, type: String, desc: 'Klass', values: %w[ElementKlass SegmentKlass DatasetKlass]
-          requires :id, type: Integer, desc: 'Klass ID'
-          requires :properties_template, type: Hash
-          optional :is_release, type: Boolean, default: false
-        end
-        after_validation do
-          authenticate_admin!(params[:klass].gsub(/(Klass)/, 's').downcase)
-          @klz = fetch_klass(params[:klass], params[:id])
-        end
-        post do
-          uuid = SecureRandom.uuid
-          properties = params[:properties_template]
-          properties['uuid'] = uuid
-          properties['eln'] = Chemotion::Application.config.version
-          properties['klass'] = @klz.class.name
-
-          @klz.properties_template = properties
-          @klz.save!
-          @klz.reload
-          @klz.create_klasses_revision(current_user.id) if params[:is_release] == true
-          @klz
-        end
-      end
-
-      desc 'Return serialized elements of current user'
-      params do
-        optional :collection_id, type: Integer, desc: 'Collection id'
-        optional :sync_collection_id, type: Integer, desc: 'SyncCollectionsUser id'
-        optional :el_type, type: String, desc: 'element klass name'
-        optional :from_date, type: Integer, desc: 'created_date from in ms'
-        optional :to_date, type: Integer, desc: 'created_date to in ms'
-        optional :filter_created_at, type: Boolean, desc: 'filter by created at or updated at'
-      end
-      paginate per_page: 7, offset: 0, max_per_page: 100
-      get do
-        scope = if params[:collection_id]
-                  begin
-                    collection_id = Collection.belongs_to_or_shared_by(current_user.id, current_user.group_ids).find(params[:collection_id])&.id
-                    Element.joins(:element_klass, :collections_elements).where('element_klasses.name = ? and collections_elements.collection_id = ?', params[:el_type], collection_id)
-                  rescue ActiveRecord::RecordNotFound
-                    Element.none
-                  end
-                elsif params[:sync_collection_id]
-                  begin
-                    collection_id = current_user.all_sync_in_collections_users.find(params[:sync_collection_id]).collection&.id
-                    Element.joins(:element_klass, :collections_elements).where('element_klasses.name = ? and collections_elements.collection_id = (?)', params[:el_type], collection_id)
-                  rescue ActiveRecord::RecordNotFound
-                    Element.none
-                  end
-                else
-                  Element.none
-                end.includes(:tag, collections: :sync_collections_users).order('created_at DESC')
-
-        from = params[:from_date]
-        to = params[:to_date]
-        by_created_at = params[:filter_created_at] || false
-        scope = scope.created_time_from(Time.at(from)) if from && by_created_at
-        scope = scope.created_time_to(Time.at(to) + 1.day) if to && by_created_at
-        scope = scope.updated_time_from(Time.at(from)) if from && !by_created_at
-        scope = scope.updated_time_to(Time.at(to) + 1.day) if to && !by_created_at
-
-        reset_pagination_page(scope)
-
-        paginate(scope).map { |s| ElementListPermissionProxy.new(current_user, s, user_ids).serialized }
-      end
-
-      desc 'Return serialized element by id'
-      params do
-        requires :id, type: Integer, desc: 'Element id'
-      end
-      route_param :id do
-        before do
-          error!('401 Unauthorized', 401) unless current_user.matrix_check_by_name('genericElement') && ElementPolicy.new(current_user, Element.find(params[:id])).read?
-        end
-
-        get do
-          element = Element.find(params[:id])
-          {
-            element: ElementPermissionProxy.new(current_user, element, user_ids).serialized,
-            attachments: Entities::AttachmentEntity.represent(element.attachments)
-          }
-        end
-      end
-
-      desc 'Create a element'
-      params do
-        requires :element_klass, type: Hash
-        requires :name, type: String
-        optional :properties, type: Hash
-        optional :properties_release, type: Hash
-        optional :collection_id, type: Integer
-        requires :container, type: Hash
-        optional :segments, type: Array, desc: 'Segments'
-      end
-      post do
-        klass = params[:element_klass] || {}
-        uuid = SecureRandom.uuid
-        params[:properties]['uuid'] = uuid
-        params[:properties]['klass_uuid'] = klass[:uuid]
-        params[:properties]['eln'] = Chemotion::Application.config.version
-        params[:properties]['klass'] = 'Element'
-        properties = params[:properties]
-        properties.delete('flow') unless properties['flow'].nil?
-        properties.delete('select_options') unless properties['select_options'].nil?
-        attributes = {
-          name: params[:name],
-          element_klass_id: klass[:id],
-          uuid: uuid,
-          klass_uuid: klass[:uuid],
-          properties: properties,
-          properties_release: params[:properties_release],
-          created_by: current_user.id
-        }
-        element = Element.new(attributes)
-
-        if params[:collection_id]
-          collection = current_user.collections.find(params[:collection_id])
-          element.collections << collection
-        end
-
-        all_coll = Collection.get_all_collection_for_user(current_user.id)
-        element.collections << all_coll
-        element.save!
-
-        element.properties = update_sample_association(element, params[:properties], current_user)
-        element.container = update_datamodel(params[:container])
-        element.save!
-        element.save_segments(segments: params[:segments], current_user_id: current_user.id)
-        element
-      end
-
-      desc 'Update element by id'
-      params do
-        requires :id, type: Integer, desc: 'element id'
-        optional :name, type: String
-        requires :properties, type: Hash
-        optional :properties_release, type: Hash
-        requires :container, type: Hash
-        optional :segments, type: Array, desc: 'Segments'
-      end
-      route_param :id do
-        before do
-          error!('401 Unauthorized', 401) unless ElementPolicy.new(current_user, Element.find(params[:id])).update?
-        end
-
-        put do
-          element = Element.find(params[:id])
-
-          update_datamodel(params[:container])
-          properties = update_sample_association(element, params[:properties], current_user)
-          params.delete(:container)
-          params.delete(:properties)
-
-          attributes = declared(params.except(:segments), include_missing: false)
-          properties['eln'] = Chemotion::Application.config.version if properties['eln'] != Chemotion::Application.config.version
-          if element.klass_uuid != properties['klass_uuid'] || element.properties != properties || element.name != params[:name]
-            properties['klass'] = 'Element'
-            uuid = SecureRandom.uuid
-            properties['uuid'] = uuid
-
-            properties.delete('flow') unless properties['flow'].nil?
-            properties.delete('select_options') unless properties['select_options'].nil?
-
-            attributes['properties'] = properties
-            attributes['properties']['uuid'] = uuid
-            attributes['uuid'] = uuid
-            attributes['klass_uuid'] = properties['klass_uuid']
-
-            element.update(attributes)
-          end
-          element.save_segments(segments: params[:segments], current_user_id: current_user.id)
-          {
-            element: ElementPermissionProxy.new(current_user, element, user_ids).serialized,
-            attachments: Entities::AttachmentEntity.represent(element.attachments)
-          }
-        end
-      end
-    end
-  end
-end
diff --git a/app/api/chemotion/public_api.rb b/app/api/chemotion/public_api.rb
index 22ce38320..e504a8abe 100644
--- a/app/api/chemotion/public_api.rb
+++ b/app/api/chemotion/public_api.rb
@@ -8,26 +8,6 @@ module Chemotion
   # API for Public data
   class PublicAPI < Grape::API
     include Grape::Kaminari
-    # helpers do
-    #   def send_notification(attachment, user, status, has_error = false)
-    #     data_args = { 'filename': attachment.filename, 'comment': 'the file has been updated' }
-    #     level = 'success'
-    #     if has_error
-    #       data_args['comment'] = ' an error has occurred, the file is not changed.'
-    #       level = 'error'
-    #     elsif status == 4
-    #       data_args['comment'] = ' file has not changed.'
-    #       level = 'info'
-    #     elsif @status == 7
-    #       data_args['comment'] = ' an error has occurred while force saving the document, please review your changes.'
-    #       level = 'error'
-    #     end
-    #     message = Message.create_msg_notification(
-    #       channel_subject: Channel::EDITOR_CALLBACK, message_from: user.id,
-    #       data_args: data_args, attach_id: attachment.id, research_plan_id: attachment.attachable_id, level: level
-    #     )
-    #   end
-    # end
     helpers CompoundHelpers
     helpers PublicHelpers
 
@@ -165,74 +145,6 @@ def query_embargo(name)
         end
       end
 
-      namespace :search do
-        params do
-          requires :inchikey, type: String, desc: 'inchikey'
-        end
-        post do
-          molecule = Molecule.joins("inner join samples on molecules.id = samples.molecule_id and samples.deleted_at is null")
-                             .joins("inner join publications on samples.id = publications.element_id and  publications.state like '%completed%' and publications.element_type = 'Sample'")
-                             .find_by(inchikey: params[:inchikey])
-          { molecule_id: molecule&.id }
-        end
-      end
-
-      namespace :article_init do
-        get do
-          { is_article_editor: current_user&.is_article_editor || false }
-        end
-      end
-
-      namespace :howto_init do
-        get do
-          { is_howto_editor: current_user&.is_howto_editor || false }
-        end
-      end
-
-      namespace :find_adv_valuess do
-        helpers do
-          def query_authors(name)
-            result = User.where(type: %w(Person Group Collaborator)).where(
-              <<~SQL
-                users.id in (
-                  select distinct(pa.author_id)::integer from publication_authors pa
-                )
-              SQL
-            )
-            .by_name(params[:name]).limit(10)
-            .select(
-              <<~SQL
-              id as key, first_name, last_name, first_name || chr(32) || last_name as name, first_name || chr(32) || last_name || chr(32) || '(' || name_abbreviation || ')' as label
-              SQL
-            )
-          end
-          def query_ontologies(name)
-            result = PublicationOntologies.where('LOWER(ontologies) ILIKE ? ',"%#{params[:name]}%").limit(3)
-            .select(
-              <<~SQL
-              term_id as key, label, label as name
-              SQL
-            ).uniq
-          end
-        end
-        desc 'Find top 3 matched advanced values'
-        params do
-          requires :name, type: String, allow_blank: false, regexp: /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/
-          requires :adv_type, type: String, allow_blank: false, desc: 'Type', values: %w[Authors Ontologies]
-        end
-        get do
-          result = case params[:adv_type]
-                   when 'Authors'
-                     query_authors(params[:name])
-                   when 'Ontologies'
-                     query_ontologies(params[:name])
-                   else
-                     []
-                   end
-          { result: result }
-        end
-      end
-
       namespace :download do
         desc 'download file for editoring'
         before do
@@ -967,1063 +879,6 @@ def query_ontologies(name)
           return { msg: { level: 'error', message: e } }
         end
       end
-
-      get 'collection' do
-        pub_coll = Collection.public_collection
-        if current_user
-          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
-          { id: coll&.id, is_sync_to_me: true  }
-        else
-          { id: nil }
-        end
-      end
-
-      resource :pid do
-        params do
-          requires :id, type: Integer
-        end
-        desc "Query samples, reaction and datasets from publication id"
-        post do
-          pub = Publication.find(params[:id])
-          return "/home" unless pub
-
-          case pub.element_type
-          when 'Sample'
-            return "/molecules/#{pub.element.molecule_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            return "/review/review_sample/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state) && pub.ancestry.nil?
-            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
-              root = pub.root
-              return "/review/review_reaction/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
-            end
-          when 'Reaction'
-            return "/reactions/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            return "/review/review_reaction/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state)
-          when 'Container'
-            return "/datasets/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
-              root = pub.root
-              return "/review/review_#{root.element_type=='Reaction'? 'reaction' : 'sample'}/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
-            end
-          else
-            return "/home"
-          end
-        end
-      end
-
-      resource :inchikey do
-        params do
-          requires :inchikey, type: String
-          optional :type, type: String # value: []
-          optional :version, type: String
-        end
-        desc "Query samples and datasets from inchikey and type"
-        post do
-          inchikey = params[:inchikey]
-          molecule = Molecule.find_by(inchikey: inchikey)
-          return "/home" unless molecule
-
-          type = params[:type]
-          return "/molecules/#{molecule.id.to_s}" if type.empty?
-
-          version = params[:version] ? params[:version] : ""
-          analyses = Collection.public_collection.samples
-            .where("samples.molecule_id = ?", molecule.id.to_s)
-            .map(&:analyses).flatten
-
-          analyses_filtered = analyses.select { |a|
-            em = a.extended_metadata
-            check = em['kind'].to_s.gsub(/\s/, '') == type
-            check = check && (em['analysis_version'] || '1') == version unless version.empty?
-            check
-          }
-          analysis = analyses_filtered.first
-          return "/datasets/#{analysis.id.to_s}"
-        end
-      end
-
-      resource :molecules do
-        desc 'Return PUBLIC serialized molecules'
-        params do
-          optional :page, type: Integer, desc: 'page'
-          optional :pages, type: Integer, desc: 'pages'
-          optional :per_page, type: Integer, desc: 'per page'
-          optional :adv_flag, type: Boolean, desc: 'advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-          optional :req_xvial, type: Boolean, default: false, desc: 'xvial is required or not'
-        end
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/' do
-          public_collection_id = Collection.public_collection_id
-          params[:adv_val]
-          adv_search = ' '
-          req_xvial = params[:req_xvial]
-          if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
-            case params[:adv_type]
-            when 'Authors'
-              adv_search = <<~SQL
-                INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
-                and author_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Ontologies'
-              adv_search = <<~SQL
-                INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
-                and term_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Embargo'
-              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' css.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
-              adv_search = <<~SQL
-                INNER JOIN collections_samples css on css.sample_id = samples.id and css.deleted_at ISNULL
-                and #{param_sql}
-              SQL
-            end
-          end
-          sample_join = <<~SQL
-            INNER JOIN (
-              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
-              FROM (
-              SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
-              FROM samples, publications pub
-              WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                and samples.id IN (
-                SELECT samples.id FROM samples
-                INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-                #{adv_search}
-                #{join_xvial_sql(req_xvial)}
-              )) s where rownum = 1
-            ) s on s.molecule_id = molecules.id
-          SQL
-
-          embargo_sql = <<~SQL
-            molecules.*, sample_svg_file, sid,
-            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
-            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
-              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
-              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
-            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
-            (select to_char(published_at, 'DD-MM-YYYY') from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as published_at,
-            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
-          SQL
-
-          list = paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql))
-
-          entities = Entities::MoleculePublicationListEntity.represent(list, serializable: true)
-          sids = entities.map { |e| e[:sid] }
-
-          com_config = Rails.configuration.compound_opendata
-          xvial_count_sql = <<~SQL
-            inner join element_tags e on e.taggable_type = 'Sample' and e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-          SQL
-          x_cnt_ids = req_xvial ? sids.uniq : (Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || [])
-          xvial_com_sql = get_xvial_sql(req_xvial)
-          x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
-
-          entities = entities.each do |obj|
-            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
-            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
-            obj[:xvial_archive] = get_xdata(obj[:inchikey], obj[:sid], req_xvial)
-          end
-          entities
-        end
-      end
-
-      resource :reactions do
-        desc 'Return PUBLIC serialized reactions'
-        params do
-          optional :page, type: Integer, desc: 'page'
-          optional :pages, type: Integer, desc: 'pages'
-          optional :per_page, type: Integer, desc: 'per page'
-          optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-          optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
-        end
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/' do
-          if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
-            case params[:adv_type]
-            when 'Authors'
-              adv_search = <<~SQL
-                INNER JOIN publication_authors pub on pub.element_id = reactions.id and pub.element_type = 'Reaction' and pub.state = 'completed'
-                and author_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Ontologies'
-              adv_search = <<~SQL
-                INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
-                and term_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Embargo'
-              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' cr.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
-              adv_search = <<~SQL
-                INNER JOIN collections_reactions cr on cr.reaction_id = reactions.id and cr.deleted_at is null
-                and #{param_sql}
-              SQL
-            else
-              adv_search = ' '
-            end
-          else
-            adv_search = ' '
-          end
-          com_config = Rails.configuration.compound_opendata
-          embargo_sql = <<~SQL
-            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, to_char(publications.published_at, 'DD-MM-YYYY') as published_at, publications.taggable_data,
-            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
-            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id and cr.deleted_at is null
-            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
-            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
-          SQL
-
-          if params[:scheme_only]
-            list = paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
-          else
-            list = paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
-          end
-
-          entities = Entities::ReactionPublicationListEntity.represent(list, serializable: true)
-
-          ids = entities.map { |e| e[:id] }
-
-          xvial_count_sql = <<~SQL
-            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-          SQL
-          x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) || []
-
-          xvial_com_sql = <<~SQL
-            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
-            inner join molecules m on m.id = s.molecule_id
-            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
-          SQL
-          x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
-
-          entities = entities.each do |obj|
-            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:id])
-            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
-          end
-
-          entities
-        end
-      end
-
-      resource :publicElement do
-        desc "Return PUBLIC serialized elements (Reaction, sample)"
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: MoleculeGuestListSerializer do
-          public_collection_id = Collection.public_collection_id
-          sample_join = <<~SQL
-            INNER JOIN (
-              SELECT molecule_id, max(pub.published_at) max_updated_at
-              FROM samples
-              INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-              INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-              GROUP BY samples.molecule_id
-            ) s on s.molecule_id = molecules.id
-          SQL
-          paginate(Molecule.joins(sample_join).order("s.max_updated_at desc"))
-        end
-      end
-
-      resource :last_published do
-        desc "Return Last PUBLIC serialized entities"
-        get do
-          s_pub = Publication.where(element_type: 'Sample', state: 'completed').order(:published_at).last
-          sample = s_pub.element
-
-          r_pub = Publication.where(element_type: 'Reaction', state: 'completed').order(:published_at).last
-          reaction = r_pub.element
-
-          { last_published: { sample: { id: sample.id, sample_svg_file: sample.sample_svg_file, molecule: sample.molecule, tag: s_pub.taggable_data, contributor: User.find(s_pub.published_by).name  },
-          reaction: { id: reaction.id, reaction_svg_file: reaction.reaction_svg_file, tag: r_pub.taggable_data, contributor: User.find(r_pub.published_by).name } } }
-        end
-      end
-
-      resource :last_published_sample do
-        desc "Return PUBLIC serialized molecules"
-        get do
-          sample = Collection.public_collection.samples.includes(:molecule, :residues).
-          where("samples.id not in (select reactions_samples.sample_id from reactions_samples where type != 'ReactionsProductSample')").order(:created_at).last
-          #TODO have and use a dedicated serializer for public sample
-          sample
-        end
-      end
-
-      resource :dataset do
-        desc "Return PUBLISHED serialized dataset"
-        params do
-          requires :id, type: Integer, desc: "Dataset id"
-        end
-        get do
-          dataset = Container.find(params[:id])
-          sample = dataset.root.containable
-          cids = sample.collections.pluck :id
-          if cids.include?(Collection.public_collection_id)
-            molecule = sample.molecule if sample.class.name == 'Sample'
-
-            ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
-            ds_json[:dataset_doi] = dataset.full_doi
-            ds_json[:pub_id] = dataset.publication&.id
-
-            res = {
-              dataset: ds_json,
-              sample_svg_file: sample.class.name == 'Sample' ? sample.sample_svg_file : sample.reaction_svg_file,
-              molecule: {
-                sum_formular: molecule&.sum_formular,
-                molecular_weight: molecule&.molecular_weight,
-                cano_smiles: molecule&.cano_smiles,
-                inchistring: molecule&.inchistring,
-                inchikey: molecule&.inchikey,
-                molecule_svg_file: molecule&.molecule_svg_file,
-                pubchem_cid: molecule&.tag&.taggable_data && molecule&.tag&.taggable_data["pubchem_cid"]
-              },
-              license: dataset.tag.taggable_data["publication"]["license"] || 'CC BY-SA',
-              publication: {
-                author_ids: sample&.publication&.taggable_data['author_ids'] || [],
-                creators: sample&.publication&.taggable_data['creators'] || [],
-                affiliation_ids: sample&.publication&.taggable_data['affiliation_ids'] || [],
-                affiliations: sample&.publication&.taggable_data['affiliations'] || {},
-                published_at: sample&.publication&.taggable_data['published_at'],
-              }
-            }
-          else
-            res = nil
-          end
-
-          return res
-        end
-      end
-
-      resource :embargo do
-        helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized collection"
-        params do
-          requires :id, type: Integer, desc: "collection id"
-        end
-        get do
-          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
-          { col: pub }
-        end
-      end
-
-
-      resource :col_list do
-        helpers RepositoryHelpers
-        after_validation do
-          @embargo_collection = Collection.find(params[:collection_id])
-          @pub = @embargo_collection.publication
-          error!('401 Unauthorized', 401) if @pub.nil?
-
-          if @pub.state != 'completed'
-            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || @pub.published_by == current_user.id || current_user.type == 'Anonymous')
-          end
-        end
-        get do
-          anasql = <<~SQL
-            publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
-          SQL
-          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
-          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
-          list = sample_list + reaction_list
-          elements = []
-          list.each do |e|
-            element_type = e.element&.class&.name
-            u = User.find(e.published_by) unless e.published_by.nil?
-            svg_file = e.element.sample_svg_file if element_type == 'Sample'
-            title = e.element.short_label if element_type == 'Sample'
-
-            svg_file = e.element.reaction_svg_file if element_type == 'Reaction'
-            title = e.element.short_label if element_type == 'Reaction'
-
-            scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
-            elements.push(
-              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
-              published_by: u&.name, submit_at: e.created_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
-            )
-          end
-          { elements: elements, embargo: @pub, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
-        end
-      end
-
-      resource :col_element do
-        helpers RepositoryHelpers
-        params do
-          requires :collection_id, type: Integer, desc: "collection id"
-          requires :el_id, type: Integer, desc: "element id"
-        end
-        after_validation do
-          @embargo_collection = Collection.find(params[:collection_id])
-          pub = @embargo_collection.publication
-          error!('401 Unauthorized', 401) if pub.nil?
-
-          if pub.state != 'completed'
-            error!('401 Unauthorized', 401) unless current_user.present? && (User.reviewer_ids.include?(current_user.id) || pub.published_by == current_user.id)
-          end
-
-        end
-        get do
-          if params[:el_type] == 'Reaction'
-            return get_pub_reaction(params[:el_id])
-          elsif params[:el_type] == 'Sample'
-            sample = Sample.find(params[:el_id])
-            return get_pub_molecule(sample.molecule_id)
-          end
-        end
-      end
-
-      resource :reaction do
-        helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized reaction"
-        params do
-          requires :id, type: Integer, desc: "Reaction id"
-        end
-        get do
-          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
-          return nil unless r.present?
-
-          return get_pub_reaction(params[:id])
-        end
-      end
-
-      resource :molecule do
-        helpers RepositoryHelpers
-        desc 'Return serialized molecule with list of PUBLISHED dataset'
-        params do
-          requires :id, type: Integer, desc: 'Molecule id'
-          optional :adv_flag, type: Boolean, desc: 'advanced search flag'
-          optional :adv_type, type: String, desc: 'advanced search type', allow_blank: true, values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-        end
-        get do
-          get_pub_molecule(params[:id], params[:adv_flag], params[:adv_type], params[:adv_val])
-        end
-      end
-
-      resource :download do
-        desc 'download publication file'
-        params do
-          requires :id, type: Integer, desc: 'Id'
-        end
-        resource :attachment do
-          desc 'download publication attachment'
-          after_validation do
-            @attachment = Attachment.find_by(id: params[:id])
-            error!('404 Attachment not found', 404) unless @attachment
-            @publication = @attachment&.container&.parent&.publication
-            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
-          end
-          get do
-            content_type 'application/octet-stream'
-            header['Content-Disposition'] = "attachment; filename=#{@attachment.filename}"
-            env['api.format'] = :binary
-            @attachment.read_file
-          end
-        end
-        resource :dataset do
-          desc 'download publication dataset as zip'
-          after_validation do
-            @container = Container.find_by(id: params[:id])
-            error!('404 Dataset not found', 404) unless @container
-            @publication = @container&.parent&.publication
-            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
-          end
-          get do
-            content_type 'application/zip, application/octet-stream'
-            filename = URI.escape("#{@container.parent&.name.gsub(/\s+/, '_')}-#{@container.name.gsub(/\s+/, '_')}.zip")
-            header['Content-Disposition'] = "attachment; filename=#{filename}"
-            env['api.format'] = :binary
-            zip_f = Zip::OutputStream.write_buffer do |zip|
-              @container.attachments.each do |att|
-                zip.put_next_entry att.filename
-                zip.write att.read_file
-              end
-              zip.put_next_entry 'dataset_description.txt'
-              zip.write <<~DESC
-                dataset name: #{@container.name}
-                instrument: #{@container.extended_metadata.fetch('instrument', nil)}
-                description:
-                #{@container.description}
-
-                Files:
-              DESC
-              @container.attachments.each do |att|
-                zip.write "#{att.filename} #{att.checksum}\n"
-              end
-            end
-            zip_f.rewind
-            zip_f.read
-          end
-        end
-      end
-
-      resource :metadata do
-        desc "batch download metadata"
-        params do
-          requires :type, type: String, desc: 'Type', values: %w[Sample Reaction Container Collection]
-          requires :offset, type: Integer, desc: 'Offset', default: 0
-          requires :limit, type: Integer, desc: 'Limit', default: 100
-          optional :date_from, type: String, desc: 'Published date from'
-          optional :date_to, type: String, desc: 'Published date to'
-        end
-        get :publications do
-          service_url = Rails.env.production? ? 'https://www.chemotion-repository.net' : 'http://localhost:3000'
-          api_url = '/api/v1/public/metadata/download_json?inchikey='
-
-          result = declared(params, include_missing: false)
-          list = []
-          limit = params[:limit] - params[:offset] > 1000 ? params[:offset] + 1000 : params[:limit]
-          scope = Publication.where(element_type: params[:type])
-          scope = scope.where('published_at >= ?', params[:date_from]) if params[:date_from].present?
-          scope = scope.where('published_at <= ?', params[:date_to]) if params[:date_to].present?
-          publications = scope.order(:published_at).offset(params[:offset]).limit(limit)
-          publications.map do |publication|
-            inchikey = publication&.doi&.suffix
-            list.push("#{service_url}#{api_url}#{inchikey}") if inchikey.present?
-          end
-          result[:publications] = list
-          result[:limit] = limit
-          result
-        end
-
-        desc "metadata of publication"
-        params do
-          optional :id, type: Integer, desc: "Id"
-          optional :type, type: String, desc: "Type", values: %w[sample reaction container collection]
-          optional :inchikey, type: String, desc: "inchikey"
-        end
-        after_validation do
-          @type = params['type']&.classify
-          @publication = Publication.find_by(element_type: @type, element_id: params['id'], state: 'completed') if params['id'].present?
-          if params['inchikey'].present? && @publication.nil?
-            doi = Doi.find_by(suffix: params['inchikey'])
-            @publication = Publication.find_by(doi_id: doi.id, state: 'completed') if doi.present?
-            @type = @publication&.element_type
-          end
-          @type = @type == "Container" ? "Analysis" : @type
-          error!('404 Publication not found', 404) unless @publication.present?
-        end
-        desc "Download metadata_xml"
-        get :download do
-          filename = URI.escape("metadata_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
-          content_type('application/octet-stream')
-          header['Content-Disposition'] = "attachment; filename=" + filename
-          env['api.format'] = :binary
-          @publication.metadata_xml
-        end
-
-        desc "Download JSON-Link Data"
-        get :download_json do
-          filename = URI.escape("JSON-LD_#{@type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.json")
-          content_type('application/json')
-          header['Content-Disposition'] = "attachment; filename=" + filename
-          env['api.format'] = :binary
-          @publication.json_ld
-        end
-      end
-
-      resource :published_statics do
-        desc 'Return PUBLIC statics'
-        get do
-          ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
-        end
-      end
-
-      get 'collection' do
-        pub_coll = Collection.public_collection
-        if current_user
-          coll = SyncCollectionsUser.find_by(user_id: current_user.id, collection_id: pub_coll.id)
-          { id: coll&.id, is_sync_to_me: true  }
-        else
-          { id: nil }
-        end
-      end
-
-      resource :pid do
-        params do
-          requires :id, type: Integer
-        end
-        desc "Query samples, reaction and datasets from publication id"
-        post do
-          pub = Publication.find(params[:id])
-          return "/home" unless pub
-
-          case pub.element_type
-          when 'Sample'
-            return "/molecules/#{pub.element.molecule_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            return "/review/review_sample/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state) && pub.ancestry.nil?
-            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
-              root = pub.root
-              return "/review/review_reaction/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
-            end
-          when 'Reaction'
-            return "/reactions/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            return "/review/review_reaction/#{pub.element_id}" if %w[pending reviewed accepted].include?(pub.state)
-          when 'Container'
-            return "/datasets/#{pub.element_id}" if pub.state&.match(Regexp.union(%w[completed]))
-            if %w[pending reviewed accepted].include?(pub.state) && !pub.ancestry.nil?
-              root = pub.root
-              return "/review/review_#{root.element_type=='Reaction'? 'reaction' : 'sample'}/#{root.element_id}" if root && %w[pending reviewed accepted].include?(root.state)
-            end
-          else
-            return "/home"
-          end
-        end
-      end
-
-      resource :inchikey do
-        params do
-          requires :inchikey, type: String
-          optional :type, type: String # value: []
-          optional :version, type: String
-        end
-        desc "Query samples and datasets from inchikey and type"
-        post do
-          inchikey = params[:inchikey]
-          molecule = Molecule.find_by(inchikey: inchikey)
-          return "/home" unless molecule
-
-          type = params[:type]
-          return "/molecules/#{molecule.id.to_s}" if type.empty?
-
-          version = params[:version] ? params[:version] : ""
-          analyses = Collection.public_collection.samples
-            .where("samples.molecule_id = ?", molecule.id.to_s)
-            .map(&:analyses).flatten
-
-          analyses_filtered = analyses.select { |a|
-            em = a.extended_metadata
-            check = em['kind'].to_s.gsub(/\s/, '') == type
-            check = check && (em['analysis_version'] || '1') == version unless version.empty?
-            check
-          }
-          analysis = analyses_filtered.first
-          return "/datasets/#{analysis.id.to_s}"
-        end
-      end
-
-      resource :molecules do
-        desc "Return PUBLIC serialized molecules"
-        params do
-          optional :page, type: Integer, desc: "page"
-          optional :pages, type: Integer, desc: "pages"
-          optional :per_page, type: Integer, desc: "per page"
-          optional :adv_flag, type: Boolean, desc: 'advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-        end
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/' do
-          public_collection_id = Collection.public_collection_id
-          params[:adv_val]
-          adv_search = ' '
-          if params[:adv_flag] == true && params[:adv_type].present? && params[:adv_val].present?
-            case params[:adv_type]
-            when 'Authors'
-              adv_search = <<~SQL
-                INNER JOIN publication_authors pub on pub.element_id = samples.id and pub.element_type = 'Sample' and pub.state = 'completed'
-                and author_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Ontologies'
-              adv_search = <<~SQL
-                INNER JOIN publication_ontologies pub on pub.element_id = samples.id and pub.element_type = 'Sample'
-                and term_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Embargo'
-              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' css.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
-              adv_search = <<~SQL
-                INNER JOIN collections_samples css on css.sample_id = samples.id and css.deleted_at ISNULL
-                and #{param_sql}
-              SQL
-            end
-          end
-          sample_join = <<~SQL
-            INNER JOIN (
-              SELECT molecule_id, published_at max_published_at, sample_svg_file, id as sid
-              FROM (
-              SELECT samples.*, pub.published_at, rank() OVER (PARTITION BY molecule_id order by pub.published_at desc) as rownum
-              FROM samples, publications pub
-              WHERE pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-                and samples.id IN (
-                SELECT samples.id FROM samples
-                INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-                #{adv_search}
-              )) s where rownum = 1
-            ) s on s.molecule_id = molecules.id
-          SQL
-
-          embargo_sql = <<~SQL
-            molecules.*, sample_svg_file, sid,
-            (select count(*) from publication_ontologies po where po.element_type = 'Sample' and po.element_id = sid) as ana_cnt,
-            (select "collections".label from "collections" inner join collections_samples cs on collections.id = cs.collection_id
-              and cs.sample_id = sid where "collections"."deleted_at" is null and (ancestry in (
-              select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo,
-            (select id from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as pub_id,
-            (select taggable_data -> 'creators'->0->>'name' from publications where element_type = 'Sample' and element_id = sid and deleted_at is null) as author_name
-          SQL
-
-          list = paginate(Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql))
-
-          entities = Entities::MoleculePublicationListEntity.represent(list, serializable: true)
-          sids = entities.map { |e| e[:sid] }
-
-          com_config = Rails.configuration.compound_opendata
-
-          xvial_count_sql = <<~SQL
-            inner join element_tags e on e.taggable_id = samples.id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-          SQL
-          x_cnt_ids = Sample.joins(xvial_count_sql).where(id: sids).distinct.pluck(:id) || []
-
-          xvial_com_sql = <<~SQL
-            inner join molecules m on m.id = samples.molecule_id
-            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
-          SQL
-          x_com_ids = Sample.joins(xvial_com_sql).where(id: sids).distinct.pluck(:id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
-
-
-          entities = entities.each do |obj|
-            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:sid])
-            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:sid])
-          end
-          entities
-        end
-      end
-
-      resource :reactions do
-        desc 'Return PUBLIC serialized reactions'
-        params do
-          optional :page, type: Integer, desc: 'page'
-          optional :pages, type: Integer, desc: 'pages'
-          optional :per_page, type: Integer, desc: 'per page'
-          optional :adv_flag, type: Boolean, desc: 'is it advanced search?'
-          optional :adv_type, type: String, desc: 'advanced search type', values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-          optional :scheme_only, type: Boolean, desc: 'is it a scheme-only reaction?', default: false
-        end
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/' do
-          if params[:adv_flag] === true && params[:adv_type].present? && params[:adv_val].present?
-            case params[:adv_type]
-            when 'Authors'
-              adv_search = <<~SQL
-                INNER JOIN publication_authors pub on pub.element_id = reactions.id and pub.element_type = 'Reaction' and pub.state = 'completed'
-                and author_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Ontologies'
-              adv_search = <<~SQL
-                INNER JOIN publication_ontologies pub on pub.element_id = reactions.id and pub.element_type = 'Reaction'
-                and term_id in ('#{params[:adv_val].join("','")}')
-              SQL
-            when 'Embargo'
-              param_sql = ActiveRecord::Base.send(:sanitize_sql_array, [' cr.collection_id in (?)', params[:adv_val].map(&:to_i).join(',')])
-              adv_search = <<~SQL
-                INNER JOIN collections_reactions cr on cr.reaction_id = reactions.id and cr.deleted_at is null
-                and #{param_sql}
-              SQL
-            else
-              adv_search = ' '
-            end
-          else
-            adv_search = ' '
-          end
-
-          com_config = Rails.configuration.compound_opendata
-          embargo_sql = <<~SQL
-            reactions.id, reactions.name, reactions.reaction_svg_file, publications.id as pub_id, publications.taggable_data,
-            (select count(*) from publication_ontologies po where po.element_type = 'Reaction' and po.element_id = reactions.id) as ana_cnt,
-            (select "collections".label from "collections" inner join collections_reactions cr on collections.id = cr.collection_id
-            and cr.reaction_id = reactions.id where "collections"."deleted_at" is null and (ancestry in (
-            select c.id::text from collections c where c.label = 'Published Elements')) order by position asc limit 1) as embargo
-          SQL
-
-          if params[:scheme_only]
-            list = paginate(Collection.scheme_only_reactions_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
-          else
-            list = paginate(Collection.public_collection.reactions.joins(adv_search).joins(:publication).select(embargo_sql).order('publications.published_at desc'))
-          end
-
-          entities = Entities::ReactionPublicationListEntity.represent(list, serializable: true)
-
-          ids = entities.map { |e| e[:id] }
-
-          xvial_count_sql = <<~SQL
-            inner join element_tags e on e.taggable_id = reactions_samples.sample_id and (e.taggable_data -> 'xvial' is not null and e.taggable_data -> 'xvial' ->> 'num' != '')
-          SQL
-          x_cnt_ids = ReactionsSample.joins(xvial_count_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) || []
-
-          xvial_com_sql = <<~SQL
-            inner join samples s on reactions_samples.sample_id = s.id and s.deleted_at is null
-            inner join molecules m on m.id = s.molecule_id
-            inner join com_xvial(true) a on a.x_inchikey = m.inchikey
-          SQL
-          x_com_ids = ReactionsSample.joins(xvial_com_sql).where(type: 'ReactionsProductSample', reaction_id: ids).distinct.pluck(:reaction_id) if com_config.present? && com_config.allowed_uids.include?(current_user&.id)
-
-          entities = entities.each do |obj|
-            obj[:xvial_count] = 1 if x_cnt_ids.include?(obj[:id])
-            obj[:xvial_com] = 1 if com_config.present? && com_config.allowed_uids.include?(current_user&.id) && (x_com_ids || []).include?(obj[:id])
-          end
-
-          entities
-        end
-      end
-
-      resource :publicElement do
-        desc "Return PUBLIC serialized elements (Reaction, sample)"
-        paginate per_page: 10, offset: 0, max_per_page: 100
-        get '/', each_serializer: MoleculeGuestListSerializer do
-          public_collection_id = Collection.public_collection_id
-          sample_join = <<~SQL
-            INNER JOIN (
-              SELECT molecule_id, max(pub.published_at) max_updated_at
-              FROM samples
-              INNER JOIN collections_samples cs on cs.collection_id = #{public_collection_id} and cs.sample_id = samples.id and cs.deleted_at ISNULL
-              INNER JOIN publications pub on pub.element_type='Sample' and pub.element_id=samples.id  and pub.deleted_at ISNULL
-              GROUP BY samples.molecule_id
-            ) s on s.molecule_id = molecules.id
-          SQL
-          paginate(Molecule.joins(sample_join).order("s.max_updated_at desc"))
-        end
-      end
-
-      resource :last_published do
-        desc "Return Last PUBLIC serialized entities"
-        get do
-          s_pub = Publication.where(element_type: 'Sample', state: 'completed').order(:published_at).last
-          sample = s_pub.element
-
-          r_pub = Publication.where(element_type: 'Reaction', state: 'completed').order(:published_at).last
-          reaction = r_pub.element
-
-          { last_published: { sample: { id: sample.id, sample_svg_file: sample.sample_svg_file, molecule: sample.molecule, tag: s_pub.taggable_data, contributor: User.find(s_pub.published_by).name  },
-          reaction: { id: reaction.id, reaction_svg_file: reaction.reaction_svg_file, tag: r_pub.taggable_data, contributor: User.find(r_pub.published_by).name } } }
-        end
-      end
-
-      resource :last_published_sample do
-        desc "Return PUBLIC serialized molecules"
-        get do
-          sample = Collection.public_collection.samples.includes(:molecule, :residues).
-          where("samples.id not in (select reactions_samples.sample_id from reactions_samples where type != 'ReactionsProductSample')").order(:created_at).last
-          #TODO have and use a dedicated serializer for public sample
-          sample
-        end
-      end
-
-      resource :dataset do
-        desc "Return PUBLISHED serialized dataset"
-        params do
-          requires :id, type: Integer, desc: "Dataset id"
-        end
-        get do
-          dataset = Container.find(params[:id])
-          sample = dataset.root.containable
-          cids = sample.collections.pluck :id
-          if cids.include?(Collection.public_collection_id)
-            molecule = sample.molecule if sample.class.name == 'Sample'
-
-            ds_json = ContainerSerializer.new(dataset).serializable_hash.deep_symbolize_keys
-            ds_json[:dataset_doi] = dataset.full_doi
-            ds_json[:pub_id] = dataset.publication&.id
-
-            res = {
-              dataset: ds_json,
-              sample_svg_file: sample.class.name == 'Sample' ? sample.sample_svg_file : sample.reaction_svg_file,
-              molecule: {
-                sum_formular: molecule&.sum_formular,
-                molecular_weight: molecule&.molecular_weight,
-                cano_smiles: molecule&.cano_smiles,
-                inchistring: molecule&.inchistring,
-                inchikey: molecule&.inchikey,
-                molecule_svg_file: molecule&.molecule_svg_file,
-                pubchem_cid: molecule&.tag&.taggable_data && molecule&.tag&.taggable_data["pubchem_cid"]
-              },
-              license: dataset.tag.taggable_data["publication"]["license"] || 'CC BY-SA',
-              publication: {
-                author_ids: sample&.publication&.taggable_data['author_ids'] || [],
-                creators: sample&.publication&.taggable_data['creators'] || [],
-                affiliation_ids: sample&.publication&.taggable_data['affiliation_ids'] || [],
-                affiliations: sample&.publication&.taggable_data['affiliations'] || {},
-                published_at: sample&.publication&.taggable_data['published_at'],
-              }
-            }
-          else
-            res = nil
-          end
-
-          return res
-        end
-      end
-
-      resource :embargo do
-        helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized collection"
-        params do
-          requires :id, type: Integer, desc: "collection id"
-        end
-        get do
-          pub = Publication.find_by(element_type: 'Collection', element_id: params[:id])
-          { col: pub }
-        end
-      end
-
-      resource :col_list do
-        helpers RepositoryHelpers
-        get do
-          @embargo_collection = Collection.find(params[:collection_id])
-          anasql = <<~SQL
-            publications.*, (select count(*) from publication_ontologies po where po.element_type = publications.element_type and po.element_id = publications.element_id) as ana_cnt
-          SQL
-          sample_list = Publication.where(ancestry: nil, element: @embargo_collection.samples).select(anasql).order(updated_at: :desc)
-          reaction_list = Publication.where(ancestry: nil, element: @embargo_collection.reactions).select(anasql).order(updated_at: :desc)
-          list = sample_list + reaction_list
-          elements = []
-          list.each do |e|
-            element_type = e.element&.class&.name
-            u = User.find(e.published_by) unless e.published_by.nil?
-            svg_file = e.element.sample_svg_file if element_type == 'Sample'
-            title = e.element.short_label if element_type == 'Sample'
-
-            svg_file = e.element.reaction_svg_file if element_type == 'Reaction'
-            title = e.element.short_label if element_type == 'Reaction'
-
-            scheme_only = element_type == 'Reaction' && e.taggable_data && e.taggable_data['scheme_only']
-            elements.push(
-              id: e.element_id, pub_id: e.id, svg: svg_file, type: element_type, title: title, published_at: e.published_at&.strftime('%d-%m-%Y'),
-              published_by: u&.name, submit_at: e.updated_at, state: e.state, scheme_only: scheme_only, ana_cnt: e.ana_cnt
-            )
-          end
-          { elements: elements, embargo_id: params[:collection_id], current_user: { id: current_user&.id, type: current_user&.type } }
-        end
-      end
-
-      resource :col_element do
-        helpers RepositoryHelpers
-        params do
-          requires :collection_id, type: Integer, desc: "collection id"
-          requires :el_id, type: Integer, desc: "element id"
-        end
-        get do
-          @embargo_collection = Collection.find(params[:collection_id])
-          if params[:el_type] == 'Reaction'
-            return get_pub_reaction(params[:el_id])
-          elsif params[:el_type] == 'Sample'
-            sample = Sample.find(params[:el_id])
-            return get_pub_molecule(sample.molecule_id)
-          end
-        end
-      end
-
-      resource :reaction do
-        helpers RepositoryHelpers
-        desc "Return PUBLISHED serialized reaction"
-        params do
-          requires :id, type: Integer, desc: "Reaction id"
-        end
-        get do
-          r = CollectionsReaction.where(reaction_id: params[:id], collection_id: [Collection.public_collection_id, Collection.scheme_only_reactions_collection.id])
-          return nil unless r.present?
-
-          return get_pub_reaction(params[:id])
-        end
-      end
-
-      resource :molecule do
-        helpers RepositoryHelpers
-        desc "Return serialized molecule with list of PUBLISHED dataset"
-        params do
-          requires :id, type: Integer, desc: "Molecule id"
-          optional :adv_flag, type: Boolean, desc: "advanced search flag"
-          optional :adv_type, type: String, desc: "advanced search type", allow_blank: true, values: %w[Authors Ontologies Embargo]
-          optional :adv_val, type: Array[String], desc: 'advanced search value', regexp: /^(\d+|([[:alpha:]]+:\d+))$/
-        end
-        get do
-          get_pub_molecule(params[:id], params[:adv_flag], params[:adv_type], params[:adv_val])
-        end
-      end
-
-      resource :download do
-        desc 'download publication file'
-        params do
-          requires :id, type: Integer, desc: 'Id'
-        end
-        resource :attachment do
-          desc 'download publication attachment'
-          after_validation do
-            @attachment = Attachment.find_by(id: params[:id])
-            error!('404 Attachment not found', 404) unless @attachment
-            @publication = @attachment&.container&.parent&.publication
-            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
-          end
-          get do
-            content_type 'application/octet-stream'
-            header['Content-Disposition'] = "attachment; filename=#{@attachment.filename}"
-            env['api.format'] = :binary
-            @attachment.read_file
-          end
-        end
-        resource :dataset do
-          desc 'download publication dataset as zip'
-          after_validation do
-            @container = Container.find_by(id: params[:id])
-            error!('404 Dataset not found', 404) unless @container
-            @publication = @container&.parent&.publication
-            error!('404 Is not published yet', 404) unless @publication&.state&.include?('completed')
-          end
-          get do
-            content_type 'application/zip, application/octet-stream'
-            filename = URI.escape("#{@container.parent&.name.gsub(/\s+/, '_')}-#{@container.name.gsub(/\s+/, '_')}.zip")
-            header['Content-Disposition'] = "attachment; filename=#{filename}"
-            env['api.format'] = :binary
-            zip_f = Zip::OutputStream.write_buffer do |zip|
-              @container.attachments.each do |att|
-                zip.put_next_entry att.filename
-                zip.write att.read_file
-              end
-              zip.put_next_entry 'dataset_description.txt'
-              zip.write <<~DESC
-                dataset name: #{@container.name}
-                instrument: #{@container.extended_metadata.fetch('instrument', nil)}
-                description:
-                #{@container.description}
-
-                Files:
-              DESC
-              @container.attachments.each do |att|
-                zip.write "#{att.filename} #{att.checksum}\n"
-              end
-            end
-            zip_f.rewind
-            zip_f.read
-          end
-        end
-      end
-
-      resource :metadata do
-        desc "metadata of publication"
-        params do
-          requires :id, type: Integer, desc: "Id"
-          requires :type, type: String, desc: "Type", values: %w[sample reaction container]
-        end
-        after_validation do
-          @publication = Publication.find_by(
-            element_type: params['type'].classify,
-            element_id: params['id']
-          )
-          error!('404 Publication not found', 404) unless @publication && @publication.state.include?("completed")
-        end
-        desc "Download metadata_xml"
-        get :download do
-          el_type = params['type'] == "container" ? "analysis" : params['type']
-          filename = URI.escape("metadata_#{el_type}_#{@publication.element_id}-#{Time.new.strftime("%Y%m%d%H%M%S")}.xml")
-          content_type('application/octet-stream')
-          header['Content-Disposition'] = "attachment; filename=" + filename
-          env['api.format'] = :binary
-          @publication.metadata_xml
-        end
-      end
-
-      resource :published_statics do
-        desc 'Return PUBLIC statics'
-        get do
-          ActiveRecord::Base.connection.exec_query('select * from publication_statics as ps')
-        end
-      end
     end
 
     namespace :upload do
diff --git a/app/api/chemotion/repository_api.rb b/app/api/chemotion/repository_api.rb
index 267dae3fb..54062d4b4 100644
--- a/app/api/chemotion/repository_api.rb
+++ b/app/api/chemotion/repository_api.rb
@@ -1303,6 +1303,7 @@ def remove_embargo_collection(col)
                 else 'development'
                 end
 
+
                 { message: "Embargo #{@embargo_collection.label} has been released" }
               end
             end
diff --git a/app/api/chemotion/search_api.rb b/app/api/chemotion/search_api.rb
index a0045feef..b09035ba6 100644
--- a/app/api/chemotion/search_api.rb
+++ b/app/api/chemotion/search_api.rb
@@ -217,6 +217,7 @@ def serialization_by_elements_and_page(elements, page = 1, molecule_sort = false
           ttl_mol = Molecule.joins(sample_join).order("s.max_published_at desc").select(embargo_sql)
           slist = paginate(ttl_mol)
           sentities = Entities::MoleculePublicationListEntity.represent(slist, serializable: true)
+
           ssids = sentities.map { |e| e[:sid] }
 
           xvial_count_ssql = <<~SQL
diff --git a/app/api/chemotion/segment_api.rb b/app/api/chemotion/segment_api.rb
deleted file mode 100644
index aa1f8b953..000000000
--- a/app/api/chemotion/segment_api.rb
+++ /dev/null
@@ -1,99 +0,0 @@
-module Chemotion
-  class SegmentAPI < Grape::API
-    include Grape::Kaminari
-    helpers GenericHelpers
-
-    resource :segments do
-      namespace :klasses do
-        desc "get segment klasses"
-        params do
-          optional :element, type: String, desc: "Klass Element, e.g. Sample, Reaction, Mof,..."
-        end
-        get do
-          list = SegmentKlass.joins(:element_klass).where(klass_element: params[:element], is_active: true) if params[:element].present?
-          list = SegmentKlass.joins(:element_klass).where(is_active: true) unless params[:element].present?
-          present list.sort_by(&:place), with: Entities::SegmentKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :list_segment_klass do
-        desc 'list Generic Segment Klass'
-        params do
-          optional :is_active, type: Boolean, desc: 'Active or Inactive Segment'
-        end
-        get do
-          list = SegmentKlass.where(is_active: params[:is_active]) if params[:is_active].present?
-          list = SegmentKlass.all unless params[:is_active].present?
-          present list.sort_by(&:place), with: Entities::SegmentKlassEntity, root: 'klass'
-        end
-      end
-
-      namespace :create_segment_klass do
-        desc 'create Generic Segment Klass'
-        params do
-          requires :label, type: String, desc: 'Segment Klass Label'
-          requires :element_klass, type: Integer, desc: 'Element Klass Id'
-          optional :desc, type: String, desc: 'Segment Klass Desc'
-          optional :place, type: String, desc: 'Segment Klass Place', default: '100'
-          optional :properties_template, type: Hash, desc: 'Element Klass properties template'
-        end
-        after_validation do
-          authenticate_admin!('segments')
-          @klass = fetch_klass('ElementKlass', params[:element_klass])
-        end
-        post do
-          place = params[:place]
-          begin
-            place = place.to_i if place.present? && place.to_i == place.to_f
-          rescue StandardError
-            place = 100
-          end
-
-          uuid = SecureRandom.uuid
-          template = { uuid: uuid, layers: {}, select_options: {} }
-          attributes = declared(params, include_missing: false)
-          attributes[:properties_template]['uuid'] = uuid if attributes[:properties_template].present?
-          template = attributes[:properties_template].present? ? attributes[:properties_template] : template
-          template['eln'] = Chemotion::Application.config.version
-          template['klass'] = 'SegmentKlass'
-          attributes.merge!(properties_template: template, element_klass: @klass, created_by: current_user.id, place: place)
-          attributes[:uuid] = uuid
-          attributes[:released_at] = DateTime.now
-          attributes[:properties_release] = attributes[:properties_template]
-          klass = SegmentKlass.create!(attributes)
-          klass.reload
-          klass.create_klasses_revision(current_user.id)
-        rescue ActiveRecord::RecordInvalid => e
-          { error: e.message }
-        end
-      end
-
-      namespace :update_segment_klass do
-        desc 'update Generic Segment Klass'
-        params do
-          requires :id, type: Integer, desc: 'Segment Klass ID'
-          optional :label, type: String, desc: 'Segment Klass Label'
-          optional :desc, type: String, desc: 'Segment Klass Desc'
-          optional :place, type: String, desc: 'Segment Klass Place', default: '100'
-          optional :identifier, type: String, desc: 'Segment Identifier'
-        end
-        after_validation do
-          authenticate_admin!('segments')
-          @segment = fetch_klass('SegmentKlass', params[:id])
-        end
-        post do
-          place = params[:place]
-          begin
-            place = place.to_i if place.present? && place.to_i == place.to_f
-          rescue StandardError
-            place = 100
-          end
-          attributes = declared(params, include_missing: false)
-          attributes.delete(:id)
-          attributes[:place] = place
-          @segment&.update!(attributes)
-        end
-      end
-    end
-  end
-end
diff --git a/app/api/chemotion/sync_collection_api.rb b/app/api/chemotion/sync_collection_api.rb
index 7db435540..ff918c45f 100644
--- a/app/api/chemotion/sync_collection_api.rb
+++ b/app/api/chemotion/sync_collection_api.rb
@@ -41,42 +41,6 @@ class SyncCollectionAPI < Grape::API
         end
       end
 
-      namespace :publication do
-        desc "Return the 'All' collection of the current user"
-        get do
-          current_user.sync_published_collection
-        end
-      end
-
-      namespace :review do
-        desc "Return the 'All' collection of the current user"
-        get do
-          if User.reviewer_ids.include?(current_user.id)
-            current_user.sync_element_to_review_collection
-          else
-            current_user.sync_reviewing_collection
-          end
-        end
-      end
-
-      namespace :publication do
-        desc "Return the 'All' collection of the current user"
-        get do
-          current_user.sync_published_collection
-        end
-      end
-
-      namespace :review do
-        desc "Return the 'All' collection of the current user"
-        get do
-          if User.reviewer_ids.include?(current_user.id)
-            current_user.sync_element_to_review_collection
-          else
-            current_user.sync_reviewing_collection
-          end
-        end
-      end
-
       namespace :take_ownership do
         desc 'Take ownership of collection with specified sync_collections_user id'
         params do
diff --git a/app/api/chemotion/user_api.rb b/app/api/chemotion/user_api.rb
index 01c558638..6828f4df8 100644
--- a/app/api/chemotion/user_api.rb
+++ b/app/api/chemotion/user_api.rb
@@ -105,133 +105,6 @@ class UserAPI < Grape::API
       end
     end
 
-    resource :collaborators do
-      namespace :list do
-        desc 'fetch collaborators of current user'
-        get do
-          ids = UsersCollaborator.where(user_id: current_user.id).pluck(:collaborator_id)
-          data = User.where(id: ids)
-          present data, with: Entities::CollaboratorEntity, root: 'authors'
-        end
-      end
-      namespace :user do
-        desc 'fetch collaborators of current user'
-        params do
-          optional :name, type: String
-          optional :first, type: String
-        end
-        get do
-          sql_str = []
-          if params[:name].present? && params[:first].present?
-            sql_str = [" LOWER(last_name) like ? and LOWER(first_name) like ? ",'%'+params[:name].downcase+'%','%'+params[:first].downcase+'%']
-          end
-          if !params[:name].present? && params[:first].present?
-            sql_str = [" LOWER(first_name) LIKE ? ",'%'+params[:first].downcase+'%']
-          end
-          if params[:name].present? && !params[:first].present?
-            sql_str = [" LOWER(last_name) LIKE ? ",'%'+params[:name].downcase+'%']
-          end
-
-          data = Person.where.not(confirmed_at: nil).where(sql_str)
-          present data, with: Entities::CollaboratorEntity, root: 'users'
-        end
-      end
-      namespace :add do
-        desc 'add user to my collabration'
-        params do
-          requires :id, type: Integer
-        end
-        post do
-          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: params[:id] })
-          user = User.find(params[:id])
-          present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :add_aff do
-        desc 'add user to my collabration'
-        params do
-          requires :id, type: Integer
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          collaborator = User.find(params[:id])
-          aff = [Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])]
-          collaborator.affiliations << aff unless aff.nil?
-          present collaborator, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-
-      namespace :find_add_aff do
-        desc 'add user to my collabration'
-        params do
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          aff = Affiliation.find_or_create_by(country: params[:country], organization: params[:organization], department: params[:department])
-          { id: aff.id, aff_output: aff.output_full }
-        end
-      end
-
-      namespace :delete do
-        desc 'remove user from my collabration'
-        params do
-          requires :id, type: Integer
-        end
-        post do
-          uc = UsersCollaborator.find_by(user_id: current_user.id, collaborator_id: params[:id])
-          uc.delete
-          #present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-      namespace :delete_aff do
-        desc 'remove affilication from my collabration'
-        params do
-          requires :user_id, type: Integer
-          requires :aff_id, type: Integer
-        end
-        post do
-          ua = UserAffiliation.find_by(user_id: params[:user_id], affiliation_id: params[:aff_id])
-          ua.destroy!
-
-          user = User.find(params[:user_id])
-          present user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-      namespace :create do
-        desc 'create and add user to my collabration'
-        params do
-          requires :lastName, type: String
-          requires :firstName, type: String
-          optional :email, type: String
-          requires :department, type: String
-          requires :organization, type: String
-          requires :country, type: String
-        end
-        post do
-          attributes = {} #declared(params, include_missing: false)
-          attributes[:first_name] = params[:firstName]
-          attributes[:last_name] = params[:lastName]
-          attributes[:type] = 'Collaborator'
-          attributes[:confirmed_at] = DateTime.now
-          attributes[:name_abbreviation] = "c#{SecureRandom.random_number(9999)}"
-          attributes[:password] = Devise.friendly_token.first(8)
-          attributes[:email] = "#{current_user.name_abbreviation}.#{attributes[:name_abbreviation]}@chemotion.net"
-          new_user = User.create!(attributes)
-          new_user.profile.update!({data: {}})
-          new_user.affiliations = [Affiliation.find_or_create_by(country: params[:country],
-            organization: params[:organization], department: params[:department])]
-
-          new_author = UsersCollaborator.create({ user_id: current_user.id, collaborator_id: new_user.id })
-          present new_user, with: Entities::CollaboratorEntity, root: 'user'
-        end
-      end
-    end
-
     resource :groups do
       rescue_from ActiveRecord::RecordInvalid do |error|
         message = error.record.errors.messages.map do |attr, msg|
diff --git a/app/api/entities/dataset_entity.rb b/app/api/entities/dataset_entity.rb
deleted file mode 100644
index 4abc61897..000000000
--- a/app/api/entities/dataset_entity.rb
+++ /dev/null
@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  # Dataset entity
-  class DatasetEntity < Grape::Entity
-    expose :id, :dataset_klass_id, :properties, :element_id, :element_type, :klass_ols, :klass_label
-    def klass_ols
-      object&.dataset_klass&.ols_term_id
-    end
-    def klass_label
-      object&.dataset_klass&.label
-    end
-  end
-end
diff --git a/app/api/entities/dataset_klass_entity.rb b/app/api/entities/dataset_klass_entity.rb
deleted file mode 100644
index 8cf2b1768..000000000
--- a/app/api/entities/dataset_klass_entity.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # DatasetKlassEntity
-  class DatasetKlassEntity < Grape::Entity
-    expose :id, :uuid, :ols_term_id, :label, :desc, :properties_template, :properties_release, :is_active, :place, :released_at
-    def released_at
-      object.released_at&.strftime('%d.%m.%Y, %H:%M')
-    end
-  end
-end
diff --git a/app/api/entities/element_klass_entity.rb b/app/api/entities/element_klass_entity.rb
deleted file mode 100644
index c5a0712a2..000000000
--- a/app/api/entities/element_klass_entity.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # ElementKlassEntity
-  class ElementKlassEntity < Grape::Entity
-    expose :id, :uuid, :name, :label, :desc, :icon_name, :properties_release, :properties_template, :is_active, :klass_prefix, :is_generic, :place, :released_at
-    def released_at
-      object.released_at&.strftime('%d.%m.%Y, %H:%M')
-    end
-  end
-end
diff --git a/app/api/entities/element_revision_entity.rb b/app/api/entities/element_revision_entity.rb
deleted file mode 100644
index 0250131e5..000000000
--- a/app/api/entities/element_revision_entity.rb
+++ /dev/null
@@ -1,55 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # ElementRevisionEntity
-  class ElementRevisionEntity < Grape::Entity
-    expose :id, :element_id, :uuid, :name, :klass_uuid, :properties, :created_at
-    def created_at
-      object.created_at.strftime('%d.%m.%Y, %H:%M')
-    end
-
-    def properties
-      object.properties['layers']&.keys.each do |key|
-        field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
-        field_sample_molecules.each do |field|
-          idx = object.properties['layers'][key]['fields'].index(field)
-          sid = field.dig('value', 'el_id')
-          next unless sid.present?
-
-          el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
-          next unless el.present?
-          next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
-
-          object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
-          object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
-          object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
-        end
-
-        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-        field_tables.each do |field|
-          next unless field['sub_values'].present? && field['sub_fields'].present?
-
-          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-          next unless field_table_molecules.present?
-
-          col_ids = field_table_molecules.map { |x| x.values[0] }
-          col_ids.each do |col_id|
-            field_table_values = field['sub_values'].each do |sub_value|
-              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
-              next unless find_mol.present?
-
-              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
-              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
-              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
-              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
-              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
-            end
-          end
-        end
-      end
-      object.properties
-    end
-  end
-end
diff --git a/app/api/entities/generic_entity.rb b/app/api/entities/generic_entity.rb
deleted file mode 100644
index 4d7193e20..000000000
--- a/app/api/entities/generic_entity.rb
+++ /dev/null
@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  class GenericEntity < Grape::Entity
-    expose :id, :is_active, :label, :desc, :place, :released_at
-
-    expose :element_klass_id do |obj|
-      obj[:element_klass_id] || 0
-    end
-
-    expose :klass_name do |obj|
-      obj[:name] || ''
-    end
-
-    expose :ols_term_id do |obj|
-      obj[:ols_term_id] || ''
-    end
-
-    expose :icon_name do |obj|
-      obj[:icon_name] || ''
-    end
-
-    expose :klass_prefix do |obj|
-      obj[:klass_prefix] || ''
-    end
-
-    expose :is_generic do |obj|
-      obj[:is_generic] || true
-    end
-
-    expose :uuid do |obj|
-      obj[:uuid] || ''
-    end
-
-    expose :properties_release do |obj|
-      obj[:properties_release] || {}
-    end
-
-    expose :element_klass do |obj|
-      if obj[:element_klass_id]
-        Entities::GenericEntity.represent(obj.element_klass)
-      else
-        {}
-      end
-    end
-
-    expose :identifier do |obj|
-      obj[:identifier] || ''
-    end
-  end
-end
diff --git a/app/api/entities/generic_public_entity.rb b/app/api/entities/generic_public_entity.rb
deleted file mode 100644
index d2bde0e2c..000000000
--- a/app/api/entities/generic_public_entity.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  class GenericPublicEntity < GenericEntity
-    unexpose :id
-    unexpose :is_active
-    unexpose :place
-    unexpose :element_klass_id
-    unexpose :ols_term_id
-    unexpose :is_generic
-    unexpose :uuid
-    unexpose :properties_release
-    unexpose :element_klass
-  end
-end
diff --git a/app/api/entities/klass_revision_entity.rb b/app/api/entities/klass_revision_entity.rb
deleted file mode 100644
index 8024b651b..000000000
--- a/app/api/entities/klass_revision_entity.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # KlassRevisionEntity
-  class KlassRevisionEntity < Grape::Entity
-    expose :id, :uuid, :properties_release, :released_at
-
-    expose :klass_id do |object|
-      klass_id = object.element_klass_id if object.respond_to? :element_klass_id
-      klass_id = object.segment_klass_id if object.respond_to? :segment_klass_id
-      klass_id = object.dataset_klass_id if object.respond_to? :dataset_klass_id
-      klass_id
-    end
-
-    def released_at
-      object.released_at&.strftime('%d.%m.%Y, %H:%M')
-    end
-  end
-end
-
diff --git a/app/api/entities/segment_entity.rb b/app/api/entities/segment_entity.rb
deleted file mode 100644
index 952a22ce5..000000000
--- a/app/api/entities/segment_entity.rb
+++ /dev/null
@@ -1,61 +0,0 @@
-# frozen_string_literal: true
-
-# Entity module
-module Entities
-  # Segment entity
-  class SegmentEntity < Grape::Entity
-    expose :id, :segment_klass_id, :element_type, :element_id, :properties, :uuid, :klass_uuid, :klass_label
-
-    def klass_label
-      object.segment_klass.label
-    end
-
-    def properties
-      return unless object.respond_to? :properties
-
-      return unless object&.properties.dig('layers').present?
-
-      object&.properties['layers'].keys.each do |key|
-        next unless object&.properties.dig('layers', key, 'fields').present?
-
-        field_sample_molecules = object&.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_molecule' }
-        field_sample_molecules.each do |field|
-          idx = object&.properties['layers'][key]['fields'].index(field)
-          sid = field.dig('value', 'el_id')
-          next unless sid.present?
-
-          el = Molecule.find_by(id: sid)
-          next unless el.present?
-          next unless object&.properties.dig('layers', key, 'fields', idx, 'value').present?
-
-          object&.properties['layers'][key]['fields'][idx]['value']['el_svg'] = File.join('/images', 'molecules', el.molecule_svg_file)
-        end
-
-        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-        field_tables.each do |field|
-          next unless field['sub_values'].present? && field['sub_fields'].present?
-
-          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-          next unless field_table_molecules.present?
-
-          col_ids = field_table_molecules.map { |x| x.values[0] }
-          col_ids.each do |col_id|
-            field_table_values = field['sub_values'].each do |sub_value|
-              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
-              next unless find_mol.present?
-
-              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
-              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
-              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
-              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
-              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
-            end
-          end
-        end
-      end
-      object&.properties
-    end
-  end
-end
diff --git a/app/api/entities/segment_klass_entity.rb b/app/api/entities/segment_klass_entity.rb
deleted file mode 100644
index e20da8f4a..000000000
--- a/app/api/entities/segment_klass_entity.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  # SegmentKlassEntity
-  class SegmentKlassEntity < Grape::Entity
-    expose :id, :uuid, :label, :desc, :properties_template, :properties_release, :is_active, :place, :released_at
-    expose :element_klass, using: Entities::ElementKlassEntity
-
-    def released_at
-      object.released_at&.strftime('%d.%m.%Y, %H:%M')
-    end
-  end
-end
diff --git a/app/api/entities/segment_revision_entity.rb b/app/api/entities/segment_revision_entity.rb
deleted file mode 100644
index 1f068a22a..000000000
--- a/app/api/entities/segment_revision_entity.rb
+++ /dev/null
@@ -1,54 +0,0 @@
-# frozen_string_literal: true
-
-module Entities
-  class SegmentRevisionEntity < Grape::Entity
-    expose :id, :segment_id, :uuid, :klass_uuid, :properties, :created_at
-    def created_at
-      object.created_at.strftime('%d.%m.%Y, %H:%M')
-    end
-
-    def properties
-      object.properties['layers']&.keys.each do |key|
-        field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
-        field_sample_molecules.each do |field|
-          idx = object.properties['layers'][key]['fields'].index(field)
-          sid = field.dig('value', 'el_id')
-          next unless sid.present?
-
-          el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
-          next unless el.present?
-          next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
-
-          object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
-          object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
-          object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
-        end
-
-        field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-        field_tables.each do |field|
-          next unless field['sub_values'].present? && field['sub_fields'].present?
-
-          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-          next unless field_table_molecules.present?
-
-          col_ids = field_table_molecules.map { |x| x.values[0] }
-          col_ids.each do |col_id|
-            field_table_values = field['sub_values'].each do |sub_value|
-              next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-              find_mol = Molecule.find_by(id: sub_value[col_id]['value']['el_id'])
-              next unless find_mol.present?
-
-              sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_mol.molecule_svg_file)
-              sub_value[col_id]['value']['el_inchikey'] = find_mol.inchikey
-              sub_value[col_id]['value']['el_smiles'] = find_mol.cano_smiles
-              sub_value[col_id]['value']['el_iupac'] = find_mol.iupac_name
-              sub_value[col_id]['value']['el_molecular_weight'] = find_mol.molecular_weight
-            end
-          end
-        end
-      end
-      object.properties
-    end
-  end
-end
diff --git a/app/api/helpers/collection_helpers.rb b/app/api/helpers/collection_helpers.rb
index e4002a647..c624788b0 100644
--- a/app/api/helpers/collection_helpers.rb
+++ b/app/api/helpers/collection_helpers.rb
@@ -155,27 +155,4 @@ def set_var_for_unsigned_user
       researchplan_detail_level: 0
     }
   end
-
-  def check_params_collection_id
-    params[:collection_id] = case params[:collection_id]
-                             when 'public'
-                               Collection.public_collection_id
-                             when 'schemeOnly'
-                               Collection.scheme_only_reactions_collection_id
-                             else
-                               params[:collection_id]
-                             end
-  end
-
-  def set_var_for_unsigned_user
-    params[:is_sync] = false
-    @dl = {
-      permission_level: 0,
-      sample_detail_level: 10,
-      reaction_detail_level: 10,
-      wellplate_detail_level: 0,
-      screen_detail_level: 0,
-      researchplan_detail_level: 0
-    }
-  end
 end
diff --git a/app/api/helpers/generic_helpers.rb b/app/api/helpers/generic_helpers.rb
deleted file mode 100644
index a0a3e237e..000000000
--- a/app/api/helpers/generic_helpers.rb
+++ /dev/null
@@ -1,105 +0,0 @@
-# frozen_string_literal: true
-
-# Helper for associated sample
-module GenericHelpers
-  extend Grape::API::Helpers
-
-  def fetch_properties_uploads(properties)
-    uploads = []
-    properties['layers'].keys.each do |key|
-      layer = properties['layers'][key]
-      field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
-      field_uploads.each do |field|
-        (field['value'] && field['value']['files'] || []).each do |file|
-          uploads.push({ layer: key, field: field['field'], uid: file['uid'], filename: file['filename'] })
-        end
-      end
-    end
-    uploads
-  end
-
-  def update_properties_upload(element, properties, att, pa)
-    return if pa.nil?
-
-    idx = properties['layers'][pa[:layer]]['fields'].index { |fl| fl['field'] == pa[:field] }
-    fidx = properties['layers'][pa[:layer]]['fields'][idx]['value']['files'].index { |fi| fi['uid'] == pa[:uid] }
-    properties['layers'][pa[:layer]]['fields'][idx]['value']['files'][fidx]['aid'] = att.id
-    properties['layers'][pa[:layer]]['fields'][idx]['value']['files'][fidx]['uid'] = att.identifier
-    element.update_columns(properties: properties)
-  end
-
-  def create_uploads(type, id, files, param_info, user_id)
-    return if files.nil? || param_info.nil? || files.empty? || param_info.empty?
-
-    attach_ary = []
-    map_info = JSON.parse(param_info)
-    map_info&.keys&.each do |key|
-      next if map_info[key]['files'].empty?
-
-      if type == 'Segment'
-        element = Segment.find_by(element_id: id, segment_klass_id: key)
-      elsif type == 'Element'
-        element = Element.find_by(id: id)
-      end
-      next if element.nil?
-
-      uploads = fetch_properties_uploads(element.properties)
-
-      map_info[key]['files'].each do |fobj|
-        file = (files || []).select { |ff| ff['filename'] == fobj['uid'] }&.first
-        pa = uploads.select { |ss| ss[:uid] == file[:filename] }&.first || nil
-        if (tempfile = file[:tempfile])
-          a = Attachment.new(
-            bucket: file[:container_id],
-            filename: fobj['filename'],
-            file_path: file[:tempfile],
-            created_by: user_id,
-            created_for: user_id,
-            content_type: file[:type],
-            attachable_type: map_info[key]['type'],
-            attachable_id: element.id
-          )
-          begin
-            a.save!
-
-            update_properties_upload(element, element.properties, a, pa)
-            attach_ary.push(a.id)
-          ensure
-            tempfile.close
-            tempfile.unlink
-          end
-        end
-      end
-      element.send("#{type.downcase}s_revisions")&.last&.destroy!
-      element.save!
-    end
-    attach_ary
-  end
-
-  def create_attachments(files, del_files, type, id, user_id)
-    attach_ary = []
-    (files || []).each do |file|
-      if (tempfile = file[:tempfile])
-        a = Attachment.new(
-          bucket: file[:container_id],
-          filename: file[:filename],
-          file_path: file[:tempfile],
-          created_by: user_id,
-          created_for: user_id,
-          content_type: file[:type],
-          attachable_type: type,
-          attachable_id: id
-        )
-        begin
-          a.save!
-          attach_ary.push(a.id)
-        ensure
-          tempfile.close
-          tempfile.unlink
-        end
-      end
-    end
-    Attachment.where('id IN (?) AND attachable_type = (?)', del_files.map!(&:to_i), type).update_all(attachable_id: nil) unless (del_files || []).empty?
-    attach_ary
-  end
-end
diff --git a/app/api/helpers/sample_association_helpers.rb b/app/api/helpers/sample_association_helpers.rb
deleted file mode 100644
index e96e62cc8..000000000
--- a/app/api/helpers/sample_association_helpers.rb
+++ /dev/null
@@ -1,100 +0,0 @@
-# frozen_string_literal: true
-
-# Helper for associated sample
-module SampleAssociationHelpers
-  extend Grape::API::Helpers
-
-  def build_sample(sid, cols, current_user, cr_opt)
-    parent_sample = Sample.find(sid)
-
-    case cr_opt
-    when 0
-      subsample = parent_sample
-      collections = Collection.where(id: cols).where.not(id: subsample.collections.pluck(:id))
-      subsample.collections << collections unless collections.empty?
-    when 1
-      subsample = parent_sample.create_subsample(current_user, cols, true)
-    when 2
-      subsample = parent_sample.dup
-      subsample.parent = nil
-      collections = (Collection.where(id: cols) | Collection.where(user_id: current_user.id, label: 'All', is_locked: true))
-      subsample.collections << collections
-      subsample.container = Container.create_root_container
-    else
-      return nil
-    end
-
-    return nil if subsample.nil?
-
-    subsample.save!
-    subsample.reload
-    subsample
-  end
-
-  def build_table_sample(element, field_tables)
-    sds = []
-    field_tables.each do |field|
-      next unless field['sub_values'].present? && field['sub_fields'].present?
-
-      field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }
-      next unless field_table_samples.present?
-
-      col_ids = field_table_samples.map { |x| x.values[0] }
-      col_ids.each do |col_id|
-        field['sub_values'].each do |sub_value|
-          next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-          svalue = sub_value[col_id]['value']
-          sid = svalue['el_id']
-          next unless sid.present?
-
-          sds << sid unless svalue['is_new']
-          next unless svalue['is_new']
-
-          cr_opt = svalue['cr_opt']
-
-          subsample = build_sample(sid, element.collections, current_user, cr_opt) unless sid.nil? || cr_opt.nil?
-          next if subsample.nil?
-
-          sds << subsample.id
-          sub_value[col_id]['value']['el_id'] = subsample.id
-          sub_value[col_id]['value']['is_new'] = false
-          ElementsSample.find_or_create_by(element_id: element.id, sample_id: subsample.id)
-        end
-      end
-    end
-    sds
-  end
-
-  def update_sample_association(element, properties, current_user)
-    sds = []
-    properties['layers'].keys.each do |key|
-      layer = properties['layers'][key]
-      field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }
-      field_samples.each do |field|
-        idx = properties['layers'][key]['fields'].index(field)
-        sid = field.dig('value', 'el_id')
-        next if sid.blank?
-
-        sds << sid unless properties.dig('layers', key, 'fields', idx, 'value', 'is_new') == true
-        next unless properties.dig('layers', key, 'fields', idx, 'value', 'is_new') == true
-
-        cr_opt = field.dig('value', 'cr_opt')
-
-        subsample = build_sample(sid, element.collections, current_user, cr_opt) unless sid.nil? || cr_opt.nil?
-        next if subsample.nil?
-
-        sds << subsample.id
-        properties['layers'][key]['fields'][idx]['value']['el_id'] = subsample.id
-        properties['layers'][key]['fields'][idx]['value']['el_label'] = subsample.short_label
-        properties['layers'][key]['fields'][idx]['value']['el_tip'] = subsample.short_label
-        properties['layers'][key]['fields'][idx]['value']['is_new'] = false
-        ElementsSample.find_or_create_by(element_id: element.id, sample_id: subsample.id)
-      end
-      field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-      sds << build_table_sample(element, field_tables)
-    end
-    ElementsSample.where(element_id: element.id).where.not(sample_id: sds)&.destroy_all
-    properties
-  end
-end
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 006dfb732..2b72aaee6 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -253,91 +253,6 @@ $color-required: #d9534f;
   }
 }
 
-.review_element_label {
-  color: #333;
-  border-style: solid;
-  border-width: thin;
-  border-radius: 4px;
-  padding: 4px;
-
-  i {
-    font-size: 1.2em !important;
-  }
-}
-
-.list_focus_off {
-  cursor: pointer;
-  background-color: white;
-}
-.list_focus_on {
-  cursor: pointer;
-  background-color: white !important;
-}
-
-.feature {
-  display: flex;
-  .feature-block {
-    display: block;
-    position: relative;
-    padding: 16px 24px 32px 24px;
-    text-decoration: none;
-    z-index: 0;
-    overflow: hidden;
-    height: 100%;
-    &:before {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      right: -16px;
-      background: unset;
-      height: 26px;
-      width: 100%;
-      transform: scale(1);
-      transform-origin: 50% 50%;
-      transition: transform 0.25s ease-out;
-      bottom: 50%;
-    }
-    &:hover:before {
-      transform: scale(8);
-      background: $color-chem-blue;
-    }
-    div {
-      padding: 8px;
-      display: inline-block;
-    }
-    h3 {
-      text-align: left;
-    }
-    i {
-      text-align: center;
-      display: inline-block;
-      color: $color-chem-blue;
-      position: relative;
-    }
-  }
-
-  .feature-block:hover {
-    p {
-      transition: all 0.3s ease-out;
-      color: #ffffff;
-    }
-    h3 {
-      transition: all 0.3s ease-out;
-      color: #ffffff;
-    }
-    i {
-      color: #ffffff;
-    }
-  }
-}
-
-.publish_tooltip {
-  .tooltip-inner {
-    text-align: left;
-    white-space: pre-wrap;
-  }
-}
-
 .review_element_label {
   color: #333;
   border-style: solid;
diff --git a/app/assets/stylesheets/repo_home.scss b/app/assets/stylesheets/repo_home.scss
index 55679b338..9208fe724 100644
--- a/app/assets/stylesheets/repo_home.scss
+++ b/app/assets/stylesheets/repo_home.scss
@@ -175,30 +175,6 @@ $bs-successcolor: #5cb85c;
   background-color: white;
 }
 
-.card-nfdi4chem {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-  > h3 {
-    text-align: center;
-    margin-bottom: 30px;
-    padding: 0px 10px;
-  }
-  > h4 {
-    text-align: center;
-    margin-bottom: 30px;
-    padding: 0px 10px;
-  }
-}
-
-.card-latest {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-}
-
 .card-well-competition {
   @extend .card-well;
   display: flex;
@@ -626,7 +602,7 @@ $bs-successcolor: #5cb85c;
         font-size: 1.8vmax;
       }
       .list {
-        font-size: larger;
+        font-size: 1vmax;
       }
     }
     .row .even {
@@ -686,7 +662,7 @@ $bs-successcolor: #5cb85c;
         font-size: 5vmin;
       }
       .tit {
-        font-size: large;
+        font-size: 1.8vmin;
       }
       .i-ext {
         font-size: 4vmin;
@@ -695,6 +671,7 @@ $bs-successcolor: #5cb85c;
     }
     .dtl .rr {
       text-align: left;
+      font-size: 1.5vmin;
       .tit {
         font-size: 14px;
         font-weight: 400;
@@ -703,7 +680,7 @@ $bs-successcolor: #5cb85c;
         }
       }
       .cnt {
-        font-size: xx-large;
+        font-size: 3vmin;
         font-weight: bolder;
       }
       .italic-desc {
diff --git a/app/jobs/chemotion_embargo_pubchem_job.rb b/app/jobs/chemotion_embargo_pubchem_job.rb
index 18bb7526c..adc05be8d 100644
--- a/app/jobs/chemotion_embargo_pubchem_job.rb
+++ b/app/jobs/chemotion_embargo_pubchem_job.rb
@@ -84,25 +84,6 @@ def perform(embargo_col_id)
       raise e
     end
 
-    begin
-      pub_col = Publication.where(element_type: 'Collection', element_id: embargo_col_id)&.first
-      if pub_col.present? && pub_col.state == 'accepted'
-        pub_col.transition_from_start_to_metadata_uploading!
-        pub_col.transition_from_metadata_uploading_to_uploaded!
-        pub_col.transition_from_metadata_uploaded_to_doi_registering!
-        pub_col.transition_from_doi_registering_to_registered!
-        pub_col.transition_from_doi_registered_to_completing!
-        pub_col.transition_from_completing_to_completed!
-      end
-    rescue StandardError => e
-      Delayed::Worker.logger.error <<~TXT
-      ---------  #{self.class.name} send collection DOI error ------------
-        Error Message:  #{e}
-      --------------------------------------------------------------------
-      TXT
-      raise e
-    end
-
   end
 
   def remove_publish_pending
diff --git a/app/mailers/publication_mailer.rb b/app/mailers/publication_mailer.rb
index fd47c5bab..d0d9ac39c 100644
--- a/app/mailers/publication_mailer.rb
+++ b/app/mailers/publication_mailer.rb
@@ -217,7 +217,7 @@ def mail_publish_embargo_release(embargo_col_id)
     #approved_notify
     mail(
       to: @creator.email,
-      bcc: group_leaders,
+      bcc: reviewers,
       subject: "Chemotion Repository: Embargo collection: #{@embargo_collection.label} released",
     ) do |format|
       format.html
diff --git a/app/models/chemscanner/molecule.rb b/app/models/chemscanner/molecule.rb
deleted file mode 100644
index 8086b7805..000000000
--- a/app/models/chemscanner/molecule.rb
+++ /dev/null
@@ -1,112 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_molecules
-#
-#  id                :integer          not null, primary key
-#  scheme_id         :integer          not null
-#  external_id       :integer
-#  clone_from        :integer
-#  mdl               :string
-#  cano_smiles       :string
-#  label             :string
-#  abbreviation      :string
-#  description       :string
-#  aliases           :jsonb
-#  details           :jsonb
-#  extended_metadata :jsonb
-#  is_approved       :boolean          default(FALSE)
-#  imported_id       :integer
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#  inchistring       :string
-#  inchikey          :string
-#
-
-module Chemscanner
-  # ChemScanner scanned molecule(s)
-  class Molecule < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
-
-    has_many :reactions_molecules, dependent: :destroy
-    has_many :reactions_reactant_molecules, dependent: :destroy
-    has_many :reactions_reagent_molecules, dependent: :destroy
-    has_many :reactions_product_molecules, dependent: :destroy
-
-    has_many :reactions, through: :reactions_molecules
-    has_many :reactions_as_reactant, through: :reactions_reactant_molecules, source: :reaction
-    has_many :reactions_as_reagent, through: :reactions_reagnet_molecules, source: :reaction
-    has_many :reactions_as_product, through: :reactions_product_molecules, source: :reaction
-
-    # rubocop:disable AbcSize
-    def assign_from_chemscanner(molecule)
-      aliases = molecule.atom_map.each_with_object({}) do |(_, atom), hash|
-        next hash unless atom.is_alias && !atom.alias_text.empty?
-
-        hash[atom.get_idx] = atom.alias_text
-      end
-
-      inchi, inchikey = Chemotion::OpenBabelService.inchi_info_from_molfile(molecule.mdl)
-
-      assign_attributes(
-        external_id: molecule.id,
-        mdl: molecule.mdl,
-        cano_smiles: molecule.cano_smiles,
-        clone_from: molecule.clone_from,
-        abbreviation: molecule.abbreviation,
-        inchistring: inchi,
-        inchikey: inchikey,
-        label: molecule.label,
-        description: molecule.text,
-        details: molecule.details.to_hash.to_json,
-        aliases: aliases.to_json
-      )
-    end
-    # rubocop:enable AbcSize
-
-    def set_polymer(atom_idx)
-      mdl_lines = mdl.split("\n")
-      end_line_idx = mdl_lines.find_index { |l| l == 'M  END' }
-      return false if end_line_idx.nil?
-
-      ext_data = extended_metadata
-
-      polymers = ext_data['polymer'] || []
-      if polymers.include?(atom_idx)
-        polymers.delete_if { |idx| idx == atom_idx }
-      else
-        polymers.push(atom_idx)
-      end
-
-      has_polymer = !polymers.empty?
-      ext_data['polymer'] = polymers
-
-      rgp_line_idx = mdl_lines.find_index { |l| l.match(/^M  RGP/) }
-      mdl_lines.delete_at(rgp_line_idx) unless rgp_line_idx.nil?
-      if has_polymer
-        rgp_info = polymers.map { |idx| "#{idx + 1}   1" }.join('   ')
-        rgp_line = "M  RGP  #{polymers.count}   #{rgp_info}"
-
-        mdl_lines.insert(end_line_idx, rgp_line)
-      end
-
-      polymer_line_idx = mdl_lines.find_index { |l| l == '> <PolymersList>' }
-      unless polymer_line_idx.nil?
-        mdl_lines.delete_at(polymer_line_idx + 1)
-        mdl_lines.delete_at(polymer_line_idx)
-      end
-
-      if has_polymer
-        mdl_lines.insert(end_line_idx + 2, polymers.join(' '))
-        mdl_lines.insert(end_line_idx + 2, '> <PolymersList>')
-      end
-      mdl_lines.push('$$$$') if mdl_lines.last.strip != '$$$$'
-
-      update(extended_metadata: ext_data, mdl: mdl_lines.join("\n"))
-    end
-  end
-end
diff --git a/app/models/chemscanner/reaction.rb b/app/models/chemscanner/reaction.rb
deleted file mode 100644
index 98d35b00f..000000000
--- a/app/models/chemscanner/reaction.rb
+++ /dev/null
@@ -1,113 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions
-#
-#  id                :integer          not null, primary key
-#  scheme_id         :integer          not null
-#  external_id       :integer          not null
-#  clone_from        :integer
-#  description       :string
-#  temperature       :string
-#  time              :string
-#  status            :string
-#  yield             :float
-#  details           :jsonb
-#  extended_metadata :jsonb
-#  is_approved       :boolean          default(FALSE)
-#  imported_id       :integer
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#
-
-
-module Chemscanner
-  # ChemScanner scanned reaction(s)
-  class Reaction < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :scheme, class_name: 'Scheme', foreign_key: :scheme_id
-
-    has_many :steps, class_name: 'ReactionStep', foreign_key: :reaction_id
-
-    has_many :reactions_molecules, dependent: :destroy
-    has_many :molecules, through: :reactions_molecules, source: :molecule
-
-    has_many :reactions_reactant_molecules,
-             class_name: 'ReactionsReactantMolecule',
-             dependent: :destroy
-    has_many :reactants,
-             through: :reactions_reactant_molecules, source: :molecule
-
-    has_many :reactions_reagent_molecules,
-             class_name: 'ReactionsReagentMolecule',
-             dependent: :destroy
-    has_many :reagents,
-             through: :reactions_reagent_molecules, source: :molecule
-
-    has_many :reactions_solvent_molecules,
-             class_name: 'ReactionsSolventMolecule',
-             dependent: :destroy
-    has_many :solvents,
-             through: :reactions_solvent_molecules, source: :molecule
-
-    has_many :reactions_product_molecules,
-             class_name: 'ReactionsProductMolecule',
-             dependent: :destroy
-    has_many :products,
-             through: :reactions_product_molecules,
-             source: :molecule
-
-    def assign_from_chemscanner(reaction)
-      assign_attributes(
-        external_id: reaction.arrow_id,
-        clone_from: reaction.clone_from,
-        description: reaction.description,
-        temperature: reaction.temperature,
-        time: reaction.time,
-        status: reaction.status,
-        yield: reaction.yield,
-        details: reaction.details.to_h.to_json
-      )
-    end
-
-    def remove_reagent_smiles(smiles)
-      to_remove = reagents.select { |m| smiles.include?(m.cano_smiles) }
-      ids = to_remove.map(&:id)
-      to_remove.each(&:destroy)
-
-      save!
-      ids
-    end
-
-    def add_reagent_smiles(smiles)
-      max_id = (reactants + reagents + products).map(&:external_id).max
-
-      added = []
-      smiles.each do |s|
-        rw_mol = RDKitChem::RWMol.mol_from_smiles(s)
-
-        m = Molecule.create(
-          cano_smiles: s,
-          scheme_id: scheme_id,
-          mdl: rw_mol.mol_to_mol_block(true, -1, false),
-          external_id: max_id += 1
-        )
-
-        rm = ReactionsMolecule.create(
-          type: 'Chemscanner::ReactionsReagentMolecule',
-          reaction_id: id,
-          molecule_id: m.id
-        )
-        reactions_reagent_molecules << rm
-        added.push(m)
-      end
-
-      save!
-
-      added
-    end
-  end
-end
diff --git a/app/models/chemscanner/reaction_step.rb b/app/models/chemscanner/reaction_step.rb
deleted file mode 100644
index 91c0e7f75..000000000
--- a/app/models/chemscanner/reaction_step.rb
+++ /dev/null
@@ -1,38 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reaction_steps
-#
-#  id                   :integer          not null, primary key
-#  reaction_id          :integer          not null
-#  reaction_external_id :integer          not null
-#  reagent_ids          :integer          default([]), is an Array
-#  reagent_smiles       :string           default([]), is an Array
-#  step_number          :integer          not null
-#  description          :string
-#  temperature          :string
-#  time                 :string
-#  created_at           :datetime         not null
-#  updated_at           :datetime         not null
-#  deleted_at           :datetime
-#
-
-
-# ChemScanner scanned reaction(s)
-module Chemscanner
-  # ChemScanner reaction steps
-  class ReactionStep < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :reaction, class_name: 'Reaction', foreign_key: :output_id
-
-    def assign_from_chemscanner(step)
-      assign_attributes(
-        description: step.description,
-        temperature: step.temperature,
-        time: step.time
-      )
-    end
-  end
-end
diff --git a/app/models/chemscanner/reactions_molecule.rb b/app/models/chemscanner/reactions_molecule.rb
deleted file mode 100644
index 37e804a8b..000000000
--- a/app/models/chemscanner/reactions_molecule.rb
+++ /dev/null
@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  # Chemscanner reaction molecule join table
-  class ReactionsMolecule < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :reaction
-    belongs_to :molecule
-  end
-
-  class ReactionsReactantMolecule < ReactionsMolecule
-  end
-
-  class ReactionsReagentMolecule < ReactionsMolecule
-  end
-
-  class ReactionsSolventMolecule < ReactionsMolecule
-  end
-
-  class ReactionsProductMolecule < ReactionsMolecule
-  end
-end
diff --git a/app/models/chemscanner/reactions_product_molecule.rb b/app/models/chemscanner/reactions_product_molecule.rb
deleted file mode 100644
index 4f8277bbf..000000000
--- a/app/models/chemscanner/reactions_product_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsProductMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_reactant_molecule.rb b/app/models/chemscanner/reactions_reactant_molecule.rb
deleted file mode 100644
index 1b14aaf1c..000000000
--- a/app/models/chemscanner/reactions_reactant_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsReactantMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_reagent_molecule.rb b/app/models/chemscanner/reactions_reagent_molecule.rb
deleted file mode 100644
index a27ade2fa..000000000
--- a/app/models/chemscanner/reactions_reagent_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsReagentMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/reactions_solvent_molecule.rb b/app/models/chemscanner/reactions_solvent_molecule.rb
deleted file mode 100644
index 8823e496b..000000000
--- a/app/models/chemscanner/reactions_solvent_molecule.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_reactions_molecules
-#
-#  id          :integer          not null, primary key
-#  reaction_id :integer          not null
-#  molecule_id :integer          not null
-#  type        :string           not null
-#  created_at  :datetime         not null
-#  updated_at  :datetime         not null
-#  deleted_at  :datetime
-#
-
-
-module Chemscanner
-  class ReactionsSolventMolecule < ReactionsMolecule
-    # STI: this file is only here because of rails model autoloading.
-    # place all code in app/models/chemscanner/reactions_molecule.rb.
-  end
-end
diff --git a/app/models/chemscanner/scheme.rb b/app/models/chemscanner/scheme.rb
deleted file mode 100644
index 684cb6706..000000000
--- a/app/models/chemscanner/scheme.rb
+++ /dev/null
@@ -1,87 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_schemes
-#
-#  id                :integer          not null, primary key
-#  source_id         :integer          not null
-#  is_approved       :boolean          default(FALSE)
-#  extended_metadata :jsonb
-#  index             :integer          default(0)
-#  image_data        :string           default("")
-#  version           :string           default("")
-#  created_by        :integer          not null
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#  deleted_at        :datetime
-#
-
-
-module Chemscanner
-  # Hold ChemScanner output information
-  class Scheme < ApplicationRecord
-    acts_as_paranoid
-
-    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
-    belongs_to :source, foreign_key: :source_id, class_name: 'Chemscanner::Source'
-
-    has_many :reactions,
-             class_name: 'Reaction', foreign_key: :scheme_id,
-             dependent: :destroy
-
-    has_many :molecules,
-             class_name: 'Molecule', foreign_key: :scheme_id,
-             dependent: :destroy
-
-    accepts_nested_attributes_for :reactions, :molecules
-
-    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
-
-    def file_uuid
-      source.file_uuid
-    end
-
-    def empty?
-      reactions.empty? && molecules.empty?
-    end
-
-    def add_doi(doi)
-      return if doi.empty?
-
-      ext_data = extended_metadata
-      return if ext_data.key?(:doi)
-
-      update!(extended_metadata: ext_data.merge(doi: doi.strip))
-    end
-
-    def destroy_version(version)
-      destroy if self.version == version
-    end
-
-    def approve(val)
-      reactions.update_all(is_approved: val)
-      molecules.update_all(is_approved: val)
-
-      {
-        scheme_ids: [id],
-        reaction_ids: reactions.map(&:id),
-        molecule_ids: molecules.map(&:id)
-      }
-    end
-
-    class << self
-      def save_png(png_list)
-        png_list.each do |file_info|
-          id = file_info['id']
-          scheme = find(id)
-          next if scheme.nil?
-
-          scheme.image_data = file_info['imageData']
-          scheme.save!
-        end
-      end
-      # handle_asynchronously :save_png
-    end
-  end
-end
diff --git a/app/models/chemscanner/source.rb b/app/models/chemscanner/source.rb
deleted file mode 100644
index 87fdff9dc..000000000
--- a/app/models/chemscanner/source.rb
+++ /dev/null
@@ -1,138 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: chemscanner_sources
-#
-#  id                :integer          not null, primary key
-#  parent_id         :integer
-#  file_id           :integer          not null
-#  extended_metadata :jsonb
-#  created_by        :integer          not null
-#  created_at        :datetime         not null
-#  updated_at        :datetime         not null
-#
-
-
-# Storing uploaded file for ChemScanner processing
-module Chemscanner
-  # Uploaded files for scanning
-  class Source < ActiveRecord::Base
-    belongs_to :creator, foreign_key: :created_by, class_name: 'User'
-
-    belongs_to :file, -> { where attachable_type: 'ChemscannerSource' },
-               class_name: 'Attachment', foreign_key: :file_id,
-               foreign_type: :attachable_type
-
-    # has_one :file, as: :attachable
-
-    has_many :schemes,
-             foreign_key: :source_id, class_name: 'Scheme',
-             dependent: :destroy
-
-    accepts_nested_attributes_for :schemes
-
-    has_many :reactions, through: :schemes
-    has_many :molecules, through: :schemes
-
-    has_closure_tree dependent: :destroy
-
-    # _ct from closure_tree gem
-    scope :full_tree, -> { _ct.default_tree_scope(all) }
-
-    scope :for_user, ->(user_id) { where('created_by = ?', user_id) }
-
-    MIME_TYPE = {
-      cdx: 'chemical/cdx',
-      cdxml: 'text/xml',
-      xml: 'text/xml',
-      doc: 'application/msword',
-      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      json: 'application/json'
-    }.freeze
-
-    def file_uuid
-      file.identifier
-    end
-
-    def scan
-      filename = file.filename
-      extn = File.extname(filename).downcase
-
-      func_name = "#{extn[1..-1]}_process".to_sym
-      return unless Chemscanner::Process.respond_to?(func_name)
-
-      Chemscanner::Process.send(func_name, self)
-    end
-
-    def create_child(child_path)
-      user_id = created_by
-      source = self.class.new(created_by: user_id)
-      ext = File.extname(child_path)
-      basename = File.basename(child_path)
-
-      source.build_file(
-        filename: basename,
-        file_path: child_path,
-        identifier: SecureRandom.uuid,
-        created_by: user_id,
-        created_for: user_id,
-        attachable_type: 'ChemscannerSource',
-        content_type: MIME_TYPE[ext.to_sym]
-      )
-      source.parent = self
-      children << source
-
-      source
-    end
-
-    def approve(val)
-      reactions.update_all(is_approved: val)
-      molecules.update_all(is_approved: val)
-
-      file_ids = [id]
-      scheme_ids = schemes.map(&:id)
-      reaction_ids = reactions.map(&:id)
-      molecule_ids = molecules.map(&:id)
-
-      children.each do |child|
-        info = child.approve(val)
-
-        file_ids.concat(info[:file_ids] || [])
-        scheme_ids.concat(info[:scheme_ids] || [])
-        reaction_ids.concat(info[:reaction_ids] || [])
-        molecule_ids.concat(info[:molecule_ids] || [])
-      end
-
-      {
-        file_ids: file_ids,
-        scheme_ids: scheme_ids,
-        reaction_ids: reaction_ids,
-        molecule_ids: molecule_ids
-      }
-    end
-
-    class << self
-      def create_from_uploaded_file(file, uid, user)
-        user_id = user.nil? ? nil : user.id
-        temp_file = file['tempfile']
-        file_path = temp_file.to_path
-        extn = File.extname(file_path)[1..-1]
-
-        source = Source.new(created_by: user_id)
-
-        source.build_file(
-          filename: file['filename'],
-          file_path: file_path,
-          identifier: uid,
-          created_by: user_id,
-          created_for: user_id,
-          attachable_type: 'ChemscannerSource',
-          content_type: MIME_TYPE[extn.to_sym] || ''
-        )
-
-        source
-      end
-    end
-  end
-end
diff --git a/app/models/collections_element.rb b/app/models/collections_element.rb
deleted file mode 100644
index 7f19cd54d..000000000
--- a/app/models/collections_element.rb
+++ /dev/null
@@ -1,52 +0,0 @@
-# == Schema Information
-#
-# Table name: collections_elements
-#
-#  id            :integer          not null, primary key
-#  collection_id :integer
-#  element_id    :integer
-#  deleted_at    :datetime
-#  element_type  :string
-#
-# Indexes
-#
-#  index_collections_elements_on_collection_id                 (collection_id)
-#  index_collections_elements_on_deleted_at                    (deleted_at)
-#  index_collections_elements_on_element_id                    (element_id)
-#  index_collections_elements_on_element_id_and_collection_id  (element_id,collection_id) UNIQUE
-#
-
-class CollectionsElement < ApplicationRecord
-    acts_as_paranoid
-    belongs_to :collection
-    belongs_to :element
-
-    include Tagging
-    include Collecting
-
-    def self.get_elements_by_collection_type(collection_ids, type)
-      self.where(collection_id: collection_ids, element_type: type).pluck(:element_id).compact.uniq
-    end
-
-    def self.remove_in_collection(element_ids, from_col_ids)
-      sample_ids = Element.get_associated_samples(element_ids)
-      delete_in_collection(element_ids, from_col_ids)
-      update_tag_by_element_ids(element_ids)
-      CollectionsSample.remove_in_collection(sample_ids, from_col_ids)
-    end
-
-    def self.move_to_collection(element_ids, from_col_ids, to_col_ids, element_type='')
-      sample_ids = Element.get_associated_samples(element_ids)
-      delete_in_collection(element_ids, from_col_ids)
-      static_create_in_collection(element_ids, to_col_ids)
-      CollectionsSample.move_to_collection(sample_ids, from_col_ids, to_col_ids)
-      CollectionsElement.where(collection_id: to_col_ids, element_id: element_ids)&.find_each { |ce| ce.update_columns(element_type: element_type) }
-    end
-
-    def self.create_in_collection(element_ids, to_col_ids, element_type='')
-      sample_ids = Element.get_associated_samples(element_ids)
-      static_create_in_collection(element_ids, to_col_ids)
-      CollectionsSample.create_in_collection(sample_ids, to_col_ids)
-      CollectionsElement.where(collection_id: to_col_ids, element_id: element_ids)&.find_each { |ce| ce.update_columns(element_type: element_type) }
-    end
-  end
diff --git a/app/models/concerns/attachment_converter.rb b/app/models/concerns/attachment_converter.rb
deleted file mode 100644
index 758d7b727..000000000
--- a/app/models/concerns/attachment_converter.rb
+++ /dev/null
@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-module AttachmentConverter
-  ACCEPTED_FORMATS = (Rails.configuration.try(:converter).try(:ext) || []).freeze
-  extend ActiveSupport::Concern
-
-  included do
-    before_create :init_converter
-    after_update :exec_converter
-    def init_converter
-      self.aasm_state = 'queueing' if Rails.configuration.try(:converter).try(:url) && ACCEPTED_FORMATS.include?(File.extname(filename&.downcase))
-    end
-
-    def exec_converter
-      return if !Rails.configuration.try(:converter).try(:url) || !ACCEPTED_FORMATS.include?(File.extname(filename&.downcase)) || aasm_state != 'queueing'
-
-      state = Analyses::Converter.jcamp_converter(id)
-      self.aasm_state = state if %w[done failure].include?(state)
-    end
-  end
-end
diff --git a/app/models/concerns/attachment_jcamp_aasm.rb b/app/models/concerns/attachment_jcamp_aasm.rb
index ff87befa8..c983a71c2 100644
--- a/app/models/concerns/attachment_jcamp_aasm.rb
+++ b/app/models/concerns/attachment_jcamp_aasm.rb
@@ -74,22 +74,6 @@ module AttachmentJcampAasm
         transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
       end
 
-      event :set_csv do
-        transitions from: %i[idle peaked non_jcamp], to: :csv
-      end
-
-      event :set_nmrium do
-        transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
-      end
-
-      event :set_csv do
-        transitions from: %i[idle peaked non_jcamp], to: :csv
-      end
-
-      event :set_nmrium do
-        transitions from: %i[idle peaked edited non_jcamp queueing regenerating], to: :nmrium
-      end
-
       event :set_failure do
         transitions from: %i[idle queueing regenerating failure nmrium], to: :failure
       end
@@ -213,14 +197,6 @@ def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
     generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
   end
 
-  def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
-    generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
-  end
-
-  def generate_nmrium_att(nmrium_tmp, addon, to_edit = false)
-    generate_att(nmrium_tmp, addon, to_edit, 'nmrium')
-  end
-
   def build_params(params = {})
     _, extname = extension_parts
     params[:mass] = 0.0
diff --git a/app/models/concerns/datasetable.rb b/app/models/concerns/datasetable.rb
deleted file mode 100644
index af9c98d80..000000000
--- a/app/models/concerns/datasetable.rb
+++ /dev/null
@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-# Datasetable concern
-module Datasetable
-  extend ActiveSupport::Concern
-
-  included do
-    has_one :dataset, as: :element
-  end
-
-  def not_dataset?
-    self.class.name == 'Container' && container_type != 'dataset'
-  end
-
-  def save_dataset(**args)
-    return if not_dataset?
-
-    klass = DatasetKlass.find_by(id: args[:dataset_klass_id])
-    uuid = SecureRandom.uuid
-    props = args[:properties]
-    props['eln'] = Chemotion::Application.config.version if props['eln'] != Chemotion::Application.config.version
-    ds = Dataset.find_by(element_type: self.class.name, element_id: id)
-    if ds.present? && (ds.klass_uuid != props['klass_uuid'] || ds.properties != props)
-      props['uuid'] = uuid
-      props['eln'] = Chemotion::Application.config.version
-      props['klass'] = 'Dataset'
-      ds.update!(uuid: uuid, dataset_klass_id: args[:dataset_klass_id], properties: props, klass_uuid: props['klass_uuid'])
-    end
-    return if ds.present?
-
-    props['uuid'] = uuid
-    props['klass_uuid'] = klass.uuid
-    props['eln'] = Chemotion::Application.config.version
-    props['klass'] = 'Dataset'
-    Dataset.create!(uuid: uuid, dataset_klass_id: args[:dataset_klass_id], element_type: self.class.name, element_id: id, properties: props, klass_uuid: klass.uuid)
-  end
-
-  def destroy_datasetable
-    return if not_dataset?
-
-    Dataset.where(element_type: self.class.name, element_id: id).destroy_all
-  end
-end
diff --git a/app/models/concerns/generic_klass_revisions.rb b/app/models/concerns/generic_klass_revisions.rb
deleted file mode 100644
index 48d90f57a..000000000
--- a/app/models/concerns/generic_klass_revisions.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-
-module GenericKlassRevisions
-  extend ActiveSupport::Concern
-  included do
-    # has_many :element_klasses_revisions, dependent: :destroy
-  end
-
-  def create_klasses_revision(user_id=0)
-    self.update!({ uuid: properties_template['uuid'], properties_release: properties_template, released_at: DateTime.now })
-    reload
-    attributes = {
-      released_by: user_id,
-      uuid: uuid,
-      properties_release: properties_template,
-      released_at: released_at
-    }
-    attributes["#{self.class.name.underscore}_id"] = id
-    "#{self.class.name}esRevision".constantize.create(attributes)
-  end
-end
\ No newline at end of file
diff --git a/app/models/concerns/generic_revisions.rb b/app/models/concerns/generic_revisions.rb
deleted file mode 100644
index b0ac5862b..000000000
--- a/app/models/concerns/generic_revisions.rb
+++ /dev/null
@@ -1,40 +0,0 @@
-# frozen_string_literal: true
-
-# GenericRevisions concern
-module GenericRevisions
-  extend ActiveSupport::Concern
-  included do
-    after_create :create_vault
-    after_update :save_to_vault
-    before_destroy :delete_attachments
-  end
-
-  def create_vault
-    save_to_vault unless self.class.name == 'Element'
-  end
-
-  def save_to_vault
-    attributes = {
-      uuid: uuid,
-      klass_uuid: klass_uuid,
-      properties: properties
-    }
-    attributes["#{self.class.name.downcase}_id"] = id
-    attributes['name'] = name if self.class.name == 'Element'
-    "#{self.class.name}sRevision".constantize.create(attributes)
-  end
-
-  def delete_attachments
-    att_ids = []
-    properties['layers'].keys.each do |key|
-      layer = properties['layers'][key]
-      field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
-      field_uploads.each do |field|
-        (field['value'] && field['value']['files'] || []).each do |file|
-          att_ids.push(file['aid']) unless file['aid'].nil?
-        end
-      end
-    end
-    Attachment.where(id: att_ids, attachable_id: id, attachable_type: %w[ElementProps SegmentProps]).destroy_all
-  end
-end
diff --git a/app/models/concerns/segmentable.rb b/app/models/concerns/segmentable.rb
deleted file mode 100644
index 383df68c1..000000000
--- a/app/models/concerns/segmentable.rb
+++ /dev/null
@@ -1,66 +0,0 @@
-# frozen_string_literal: true
-
-# Segmentable concern
-module Segmentable
-  extend ActiveSupport::Concern
-  included do
-    has_many :segments, as: :element, dependent: :destroy
-  end
-
-  def copy_segments(**args)
-    return if args[:segments].nil?
-    segments = save_segments(segments: args[:segments], current_user_id: args[:current_user_id])
-    segments.each do |segment|
-      properties = segment.properties
-      properties['layers'].keys.each do |key|
-        layer = properties['layers'][key]
-        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
-        field_uploads&.each do |upload|
-          idx = properties['layers'][key]['fields'].index(upload)
-          files = upload["value"] && upload["value"]["files"]
-          files&.each_with_index do |fi, fdx|
-            aid = properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid']
-            unless aid.nil?
-              copied_att = Attachment.find(aid)&.copy(attachable_type: 'SegmentProps', attachable_id: segment.id, transferred: true)
-              unless copied_att.nil?
-                copied_att.save!
-                properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = copied_att.id
-                properties['layers'][key]['fields'][idx]['value']['files'][fdx]['uid'] = copied_att.identifier
-              end
-            end
-          end
-        end
-      end
-      segment.update!(properties: properties)
-    end
-
-  end
-
-  def save_segments(**args)
-    return if args[:segments].nil?
-    segments = []
-    args[:segments].each do |seg|
-      klass = SegmentKlass.find_by(id: seg['segment_klass_id'])
-      uuid = SecureRandom.uuid
-      props = seg['properties']
-      props['eln'] = Chemotion::Application.config.version if props['eln'] != Chemotion::Application.config.version
-      segment = Segment.find_by(element_type: self.class.name, element_id: self.id, segment_klass_id: seg['segment_klass_id'])
-      if segment.present? && (segment.klass_uuid != props['klass_uuid'] || segment.properties != props)
-        props['uuid'] = uuid
-        props['eln'] = Chemotion::Application.config.version
-        props['klass'] = 'Segment'
-
-        segment.update!(properties: props, uuid: uuid, klass_uuid: props['klass_uuid'])
-      end
-      next if segment.present?
-
-      props['uuid'] = uuid
-      props['klass_uuid'] = klass.uuid
-      props['eln'] = Chemotion::Application.config.version
-      props['klass'] = 'Segment'
-      segment = Segment.create!(segment_klass_id: seg['segment_klass_id'], element_type: self.class.name, element_id: self.id, properties: props, created_by: args[:current_user_id], uuid: uuid, klass_uuid: klass.uuid)
-      segments.push(segment)
-    end
-    segments
-  end
-end
diff --git a/app/models/dataset.rb b/app/models/dataset.rb
deleted file mode 100644
index db52040c0..000000000
--- a/app/models/dataset.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-# == Schema Information
-#
-# Table name: datasets
-#
-#  id               :integer          not null, primary key
-#  dataset_klass_id :integer
-#  element_type     :string
-#  element_id       :integer
-#  properties       :jsonb
-#  created_at       :datetime         not null
-#  updated_at       :datetime
-#  uuid             :string
-#  klass_uuid       :string
-#  deleted_at       :datetime
-#
-
-class Dataset < ApplicationRecord
-  acts_as_paranoid
-  include GenericRevisions
-  belongs_to :dataset_klass
-  belongs_to :element, polymorphic: true
-end
diff --git a/app/models/dataset_klass.rb b/app/models/dataset_klass.rb
deleted file mode 100644
index 2ecebd6b3..000000000
--- a/app/models/dataset_klass.rb
+++ /dev/null
@@ -1,40 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: dataset_klasses
-#
-#  id                  :integer          not null, primary key
-#  ols_term_id         :string           not null
-#  label               :string           not null
-#  desc                :string
-#  properties_template :jsonb            not null
-#  is_active           :boolean          default(FALSE), not null
-#  place               :integer          default(100), not null
-#  created_by          :integer          not null
-#  created_at          :datetime         not null
-#  updated_at          :datetime
-#  deleted_at          :datetime
-#  uuid                :string
-#  properties_release  :jsonb
-#  released_at         :datetime
-#
-class DatasetKlass < ApplicationRecord
-  acts_as_paranoid
-  include GenericKlassRevisions
-  has_many :datasets, dependent: :destroy
-  has_many :dataset_klasses_revisions, dependent: :destroy
-
-  def self.init_seeds
-    seeds_path = File.join(Rails.root, 'db', 'seeds', 'json', 'dataset_klasses.json')
-    seeds = JSON.parse(File.read(seeds_path))
-
-    seeds['chmo'].each do |term|
-      next if DatasetKlass.where(ols_term_id: term['id']).count.positive?
-
-      attributes = { ols_term_id: term['id'], label: "#{term['label']} (#{term['synonym']})", desc: "#{term['label']} (#{term['synonym']})", place: term['position'], created_by: Admin.first&.id || 0 }
-      DatasetKlass.create!(attributes)
-    end
-    true
-  end
-end
diff --git a/app/models/dataset_klasses_revision.rb b/app/models/dataset_klasses_revision.rb
deleted file mode 100644
index 4e083b2d7..000000000
--- a/app/models/dataset_klasses_revision.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# == Schema Information
-#
-# Table name: dataset_klasses_revisions
-#
-#  id                 :integer          not null, primary key
-#  dataset_klass_id   :integer
-#  uuid               :string
-#  properties_release :jsonb
-#  released_at        :datetime
-#  released_by        :integer
-#  created_by         :integer
-#  created_at         :datetime
-#  updated_at         :datetime
-#  deleted_at         :datetime
-#
-# Indexes
-#
-#  index_dataset_klasses_revisions_on_dataset_klass_id  (dataset_klass_id)
-#
-
-class DatasetKlassesRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :dataset_klass
-
-end
diff --git a/app/models/datasets_revision.rb b/app/models/datasets_revision.rb
deleted file mode 100644
index 5c9c68fe5..000000000
--- a/app/models/datasets_revision.rb
+++ /dev/null
@@ -1,24 +0,0 @@
-# == Schema Information
-#
-# Table name: datasets_revisions
-#
-#  id         :integer          not null, primary key
-#  dataset_id :integer
-#  uuid       :string
-#  klass_uuid :string
-#  properties :jsonb
-#  created_by :integer
-#  created_at :datetime
-#  updated_at :datetime
-#  deleted_at :datetime
-#
-# Indexes
-#
-#  index_datasets_revisions_on_dataset_id  (dataset_id)
-#
-
-class DatasetsRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :dataset
-
-end
diff --git a/app/models/element.rb b/app/models/element.rb
deleted file mode 100644
index cf931a119..000000000
--- a/app/models/element.rb
+++ /dev/null
@@ -1,101 +0,0 @@
-# frozen_string_literal: true
-
-# == Schema Information
-#
-# Table name: elements
-#
-#  id               :integer          not null, primary key
-#  name             :string
-#  element_klass_id :integer
-#  properties       :jsonb
-#  created_by       :integer
-#  created_at       :datetime
-#  updated_at       :datetime
-#  deleted_at       :datetime
-#  short_label      :string
-#  uuid             :string
-#  klass_uuid       :string
-#
-
-# Generic Element
-class Element < ApplicationRecord
-  acts_as_paranoid
-  include PgSearch
-  include ElementUIStateScopes
-  include Collectable
-  include AnalysisCodes
-  include Taggable
-  include Segmentable
-  include GenericRevisions
-
-  multisearchable against: %i[name short_label]
-
-  pg_search_scope :search_by_substring, against: %i[name short_label], using: { trigram: { threshold: 0.0001 } }
-
-  attr_accessor :can_copy
-
-  scope :by_name, ->(query) { where('name ILIKE ?', "%#{sanitize_sql_like(query)}%") }
-  scope :by_short_label, ->(query) { where('short_label ILIKE ?', "%#{sanitize_sql_like(query)}%") }
-  scope :by_klass_id_short_label, ->(klass_id, short_label) { where('element_klass_id = ? and short_label ILIKE ?', klass_id, "%#{sanitize_sql_like(short_label)}%") }
-  scope :by_sample_ids, ->(ids) { joins(:elements_samples).where('sample_id IN (?)', ids) }
-  scope :by_klass_id, ->(klass_id) { where('element_klass_id = ? ', klass_id) }
-
-  belongs_to :element_klass
-
-  has_many :collections_elements,  inverse_of: :element, dependent: :destroy
-  has_many :collections, through: :collections_elements
-  has_many :attachments, as: :attachable
-  has_many :elements_samples, dependent: :destroy
-  has_many :samples, through: :elements_samples, source: :sample
-  has_one :container, :as => :containable
-  has_many :elements_revisions, dependent: :destroy
-
-  accepts_nested_attributes_for :collections_elements
-
-  belongs_to :creator, foreign_key: :created_by, class_name: 'User'
-  validates :creator, presence: true
-
-  before_create :auto_set_short_label
-  after_create :update_counter
-  before_destroy :delete_attachment
-
-  def attachments
-    Attachment.where(attachable_id: self.id, attachable_type: 'Element')
-  end
-
-
-  def self.get_associated_samples(element_ids)
-    ElementsSample.where(element_id: element_ids).pluck(:sample_id)
-  end
-
-  def analyses
-    container ? container.analyses : []
-  end
-
-  def auto_set_short_label
-    prefix = element_klass.klass_prefix
-    if creator.counters[element_klass.name].nil?
-      creator.counters[element_klass.name] = '0'
-      creator.update_columns(counters: creator.counters)
-      creator.reload
-    end
-    counter = creator.counters[element_klass.name].to_i.succ
-    self.short_label = "#{creator.initials}-#{prefix}#{counter}"
-  end
-
-  def update_counter
-    creator.increment_counter element_klass.name
-  end
-
-  private
-
-  def delete_attachment
-    if Rails.env.production?
-      attachments.each do |attachment|
-        attachment.delay(run_at: 96.hours.from_now, queue: 'attachment_deletion').destroy!
-      end
-    else
-      attachments.each(&:destroy!)
-    end
-  end
-end
diff --git a/app/models/element_klass.rb b/app/models/element_klass.rb
deleted file mode 100644
index 74503f7ce..000000000
--- a/app/models/element_klass.rb
+++ /dev/null
@@ -1,42 +0,0 @@
-# == Schema Information
-#
-# Table name: element_klasses
-#
-#  id                  :integer          not null, primary key
-#  name                :string
-#  label               :string
-#  desc                :string
-#  icon_name           :string
-#  properties_template :jsonb
-#  created_by          :integer
-#  created_at          :datetime
-#  updated_at          :datetime
-#  deleted_at          :datetime
-#  is_active           :boolean          default(TRUE), not null
-#  klass_prefix        :string           default("E"), not null
-#  is_generic          :boolean          default(TRUE), not null
-#  place               :integer          default(100), not null
-#  uuid                :string
-#  properties_release  :jsonb
-#  released_at         :datetime
-#
-
-class ElementKlass < ApplicationRecord
-  acts_as_paranoid
-  include GenericKlassRevisions
-  has_many :elements, dependent: :destroy
-  has_many :segment_klasses, dependent: :destroy
-  has_many :element_klasses_revisions, dependent: :destroy
-
-  def self.gen_klasses_json
-    klasses = where(is_active: true, is_generic: true).order('place')&.pluck(:name) || []
-  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
-    klasses = []
-  ensure
-    File.write(
-      Rails.root.join('config', 'klasses.json'),
-      klasses&.to_json || []
-    )
-  end
-
-end
diff --git a/app/models/element_klasses_revision.rb b/app/models/element_klasses_revision.rb
deleted file mode 100644
index 3f9b15ce5..000000000
--- a/app/models/element_klasses_revision.rb
+++ /dev/null
@@ -1,24 +0,0 @@
-# == Schema Information
-#
-# Table name: element_klasses_revisions
-#
-#  id                 :integer          not null, primary key
-#  element_klass_id   :integer
-#  uuid               :string
-#  properties_release :jsonb
-#  released_at        :datetime
-#  released_by        :integer
-#  created_by         :integer
-#  created_at         :datetime
-#  updated_at         :datetime
-#  deleted_at         :datetime
-#
-# Indexes
-#
-#  index_element_klasses_revisions_on_element_klass_id  (element_klass_id)
-#
-
-class ElementKlassesRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :element_klass
-end
diff --git a/app/models/elements_revision.rb b/app/models/elements_revision.rb
deleted file mode 100644
index 418488734..000000000
--- a/app/models/elements_revision.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# == Schema Information
-#
-# Table name: elements_revisions
-#
-#  id         :integer          not null, primary key
-#  element_id :integer
-#  uuid       :string
-#  klass_uuid :string
-#  name       :string
-#  properties :jsonb
-#  created_by :integer
-#  created_at :datetime
-#  updated_at :datetime
-#  deleted_at :datetime
-#
-# Indexes
-#
-#  index_elements_revisions_on_element_id  (element_id)
-#
-
-class ElementsRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :element
-
-end
diff --git a/app/models/elements_sample.rb b/app/models/elements_sample.rb
deleted file mode 100644
index 2e11e7151..000000000
--- a/app/models/elements_sample.rb
+++ /dev/null
@@ -1,26 +0,0 @@
-# == Schema Information
-#
-# Table name: elements_samples
-#
-#  id         :integer          not null, primary key
-#  element_id :integer
-#  sample_id  :integer
-#  created_by :integer
-#  created_at :datetime
-#  updated_at :datetime
-#  deleted_at :datetime
-#
-# Indexes
-#
-#  index_elements_samples_on_element_id  (element_id)
-#  index_elements_samples_on_sample_id   (sample_id)
-#
-
-
-class ElementsSample < ApplicationRecord
-  acts_as_paranoid
-  belongs_to :element
-  belongs_to :sample
-
-  include Tagging
-end
diff --git a/app/models/molecule.rb b/app/models/molecule.rb
index 38061d51d..ef12a1d0a 100644
--- a/app/models/molecule.rb
+++ b/app/models/molecule.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # == Schema Information
 #
 # Table name: molecules
@@ -29,6 +31,8 @@
 #  index_molecules_on_inchikey_and_is_partial  (inchikey,is_partial) UNIQUE
 #
 
+# rubocop:disable Metrics/ClassLength
+
 class Molecule < ApplicationRecord
   acts_as_paranoid
 
@@ -70,12 +74,12 @@ class Molecule < ApplicationRecord
     where('cano_smiles ILIKE ?', "%#{sanitize_sql_like(query)}%")
   }
 
-  scope :with_reactions, -> {
-    joins(:samples).joins("inner join reactions_samples rs on rs.sample_id = samples.id" ).uniq
+  scope :with_reactions, lambda {
+    joins(:samples).joins('inner join reactions_samples rs on rs.sample_id = samples.id')
   }
 
-  scope :with_wellplates, -> {
-    joins(:samples).joins("inner join wells w on w.sample_id = samples.id" ).uniq
+  scope :with_wellplates, lambda {
+    joins(:samples).joins('inner join wells w on w.sample_id = samples.id')
   }
 
   def self.find_or_create_dummy
@@ -273,34 +277,6 @@ def current_svg_full_path
     file_path&.file? ? file_path : nil
   end
 
-  def self.svg_reprocess(svg, molfile)
-    return svg unless Rails.configuration.try(:ketcher_service).try(:url).present?
-    return svg if svg.present? && !svg&.include?('Open Babel')
-
-    svg = KetcherService::RenderSvg.svg(molfile)
-
-    if svg&.present?
-      svg = Ketcherails::SVGProcessor.new(svg)
-      svg.centered_and_scaled_svg
-    else
-      Chemotion::OpenBabelService.svg_from_molfile(molfile)
-    end
-  end
-
-  def self.svg_reprocess(svg, molfile)
-    return svg unless Rails.configuration.try(:ketcher_service).try(:url).present?
-    return svg if svg.present? && !svg&.include?('Open Babel')
-
-    svg = KetcherService::RenderSvg.svg(molfile)
-
-    if svg&.present?
-      svg = Ketcherails::SVGProcessor.new(svg)
-      svg.centered_and_scaled_svg
-    else
-      Chemotion::OpenBabelService.svg_from_molfile(molfile)
-    end
-  end
-
 private
 
   # TODO: check that molecules are OK and remove this method. fix is in editor
@@ -322,3 +298,4 @@ def full_svg_path(svg_file_name = molecule_svg_file)
     Rails.public_path.join('images', 'molecules', svg_file_name)
   end
 end
+# rubocop:enable Metrics/ClassLength
diff --git a/app/models/report.rb b/app/models/report.rb
index cedfdf4b6..db856477d 100644
--- a/app/models/report.rb
+++ b/app/models/report.rb
@@ -92,14 +92,6 @@ def create_docx
       Reporter::WorkerDoiList.new(
         report: self, ext: 'xlsx'
       ).process
-    when 'doi_list_xlsx'
-      Reporter::WorkerDoiList.new(
-        report: self, ext: 'xlsx'
-      ).process
-    when 'doi_list_xlsx'
-      Reporter::WorkerDoiList.new(
-        report: self, ext: 'xlsx'
-      ).process
     else
       Reporter::Worker.new(
         report: self, template_path: tpl_path,
@@ -182,7 +174,7 @@ def self.all_spl_settings
       diagram: true,
       collection: true,
       analyses: true,
-      reaction_description: true
+      reaction_description: true,
     }
   end
 
@@ -196,14 +188,14 @@ def self.all_rxn_settings
       tlc: true,
       observation: true,
       analysis: true,
-      literature: true
+      literature: true,
     }
   end
 
   def self.all_configs
     {
       page_break: true,
-      whole_diagram: true
+      whole_diagram: true,
     }
   end
 
diff --git a/app/models/sample.rb b/app/models/sample.rb
index 56f389667..205d5c8b9 100644
--- a/app/models/sample.rb
+++ b/app/models/sample.rb
@@ -227,8 +227,6 @@ class Sample < ApplicationRecord
 
   has_one :doi, as: :doiable
 
-  has_one :doi, as: :doiable
-
   accepts_nested_attributes_for :molecule_name
   accepts_nested_attributes_for :collections_samples
   accepts_nested_attributes_for :molecule, update_only: true
@@ -256,6 +254,7 @@ def molfile_pubchem
     version = Chemotion::OpenBabelService.molfile_version(self.molfile)
     mf = Chemotion::OpenBabelService.mofile_clear_coord_bonds(self.molfile, version)
     mf = molfile unless mf
+
     mf&.split(/^\$\$\$\$/).first
   end
 
diff --git a/app/models/segment.rb b/app/models/segment.rb
deleted file mode 100644
index 27f18464b..000000000
--- a/app/models/segment.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# == Schema Information
-#
-# Table name: segments
-#
-#  id               :integer          not null, primary key
-#  segment_klass_id :integer
-#  element_type     :string
-#  element_id       :integer
-#  properties       :jsonb
-#  created_by       :integer
-#  created_at       :datetime
-#  updated_at       :datetime
-#  deleted_at       :datetime
-#  uuid             :string
-#  klass_uuid       :string
-#
-
-class Segment < ApplicationRecord
-  acts_as_paranoid
-  include GenericRevisions
-
-  belongs_to :segment_klass
-  belongs_to :element, polymorphic: true
-  has_many :segments_revisions, dependent: :destroy
-end
diff --git a/app/models/segment_klass.rb b/app/models/segment_klass.rb
deleted file mode 100644
index 61a96e0bf..000000000
--- a/app/models/segment_klass.rb
+++ /dev/null
@@ -1,41 +0,0 @@
-# == Schema Information
-#
-# Table name: segment_klasses
-#
-#  id                  :integer          not null, primary key
-#  element_klass_id    :integer
-#  label               :string           not null
-#  desc                :string
-#  properties_template :jsonb
-#  is_active           :boolean          default(TRUE), not null
-#  place               :integer          default(100), not null
-#  created_by          :integer
-#  created_at          :datetime
-#  updated_at          :datetime
-#  deleted_at          :datetime
-#  uuid                :string
-#  properties_release  :jsonb
-#  released_at         :datetime
-#  identifier          :string
-#  sync_time           :datetime
-#
-
-class SegmentKlass < ApplicationRecord
-  acts_as_paranoid
-  include GenericKlassRevisions
-  belongs_to :element_klass
-  has_many :segments, dependent: :destroy
-  has_many :segment_klasses_revisions, dependent: :destroy
-
-  def self.gen_klasses_json
-    klasses = where(is_active: true)&.pluck(:name) || []
-  rescue ActiveRecord::StatementInvalid, PG::ConnectionBad, PG::UndefinedTable
-    klasses = []
-  ensure
-    File.write(
-      Rails.root.join('config', 'segment_klass.json'),
-      klasses&.to_json || []
-    )
-  end
-
-end
diff --git a/app/models/segment_klasses_revision.rb b/app/models/segment_klasses_revision.rb
deleted file mode 100644
index 7014ea026..000000000
--- a/app/models/segment_klasses_revision.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# == Schema Information
-#
-# Table name: segment_klasses_revisions
-#
-#  id                 :integer          not null, primary key
-#  segment_klass_id   :integer
-#  uuid               :string
-#  properties_release :jsonb
-#  released_at        :datetime
-#  released_by        :integer
-#  created_by         :integer
-#  created_at         :datetime
-#  updated_at         :datetime
-#  deleted_at         :datetime
-#
-# Indexes
-#
-#  index_segment_klasses_revisions_on_segment_klass_id  (segment_klass_id)
-#
-
-class SegmentKlassesRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :segment_klass
-
-end
diff --git a/app/models/segments_revision.rb b/app/models/segments_revision.rb
deleted file mode 100644
index bb0450ab8..000000000
--- a/app/models/segments_revision.rb
+++ /dev/null
@@ -1,24 +0,0 @@
-# == Schema Information
-#
-# Table name: segments_revisions
-#
-#  id         :integer          not null, primary key
-#  segment_id :integer
-#  uuid       :string
-#  klass_uuid :string
-#  properties :jsonb
-#  created_by :integer
-#  created_at :datetime
-#  updated_at :datetime
-#  deleted_at :datetime
-#
-# Indexes
-#
-#  index_segments_revisions_on_segment_id  (segment_id)
-#
-
-class SegmentsRevision < ApplicationRecord
-  acts_as_paranoid
-  has_one :segment
-
-end
diff --git a/app/models/user.rb b/app/models/user.rb
index f8bc6f712..9f5e83fb7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -382,114 +382,6 @@ def sync_reviewing_collection
   end
 
 
-  def sync_element_to_review_collection
-    su_id = User.chemotion_user.id
-    SyncCollectionsUser.joins(
-      "INNER JOIN collections ON " +
-      "sync_collections_users.collection_id = collections.id")
-      .where("sync_collections_users.shared_by_id = #{su_id}")
-      .where("sync_collections_users.user_id = #{self.id}")
-      .where("collections.label = 'Element To Review'").first
-  end
-
-  def find_or_create_grouplead_collection
-    chemotion_user = User.chemotion_user
-    sys_review_from = Collection.find_or_create_by(user_id: chemotion_user.id, label: 'Group Lead Review from', is_locked: true, is_shared: false)
-    sys_review_collection = Collection.find_or_create_by(user: chemotion_user, label: 'Group Lead Review', ancestry: "#{sys_review_from.id}", shared_by_id: id)
-
-    col_attributes = {
-      user: self,
-      shared_by_id: chemotion_user.id,
-      is_locked: true,
-      is_shared: true
-    }
-
-    rc = Collection.find_by(col_attributes)
-    SyncCollectionsUser.find_or_create_by(user: self, shared_by_id: chemotion_user.id, collection_id: sys_review_collection.id,
-      permission_level: 3, sample_detail_level: 10, reaction_detail_level: 10, fake_ancestry: rc.id.to_s)
-    sys_review_collection
-  end
-
-  def published_collection
-    su_id = User.chemotion_user.id
-    Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
-              .where("sync_collections_users.shared_by_id = #{su_id}")
-              .where("sync_collections_users.user_id = #{self.id}")
-              .where("collections.label = 'Published Elements'").first
-  end
-
-  def sync_published_collection
-    SyncCollectionsUser.joins("INNER JOIN collections on collections.id = sync_collections_users.collection_id")
-              .where("sync_collections_users.user_id = #{self.id}")
-              .where("collections.id = #{Collection.public_collection_id}").first
-
-  end
-
-  def publication_embargo_collection
-    su_id = User.chemotion_user.id
-    Collection.joins("INNER JOIN sync_collections_users ON sync_collections_users.collection_id = collections.id")
-              .where("sync_collections_users.shared_by_id = #{su_id}")
-              .where("sync_collections_users.user_id = #{self.id}")
-              .where("collections.label = 'Embargoed Publications'").first
-  end
-
-  def all_collection
-    Collection.where(user: self, label: 'All', is_locked: true, position: 0)&.first
-
-  end
-
-  def self.chemotion_user
-    find_by(email: ENV['SYS_EMAIL'])
-  end
-
-  def self.is_public
-    self.find_by(email: ENV['SYS_EMAIL'])
-  end
-
-  # TODO: mv to initializers
-  def self.reviewer_ids
-    (ENV['REVIEWERS'] || '').split(',').map(&:to_i)
-  end
-
-  def is_article_editor
-    (ENV['NEWSROOM_EDITOR'] || "").split(",").include?(self.id.to_s)
-  end
-
-  def is_howto_editor
-    (ENV['HOWTO_EDITOR'] || "").split(",").include?(self.id.to_s)
-  end
-
-  def pending_collection
-    su_id = User.chemotion_user.id
-    Collection.joins(
-      "INNER JOIN sync_collections_users ON " +
-      "sync_collections_users.collection_id = collections.id")
-      .where("sync_collections_users.shared_by_id = #{su_id}")
-      .where("sync_collections_users.user_id = #{self.id}")
-      .where("collections.label = 'Pending Publications'").first
-  end
-
-  def reviewing_collection
-    su_id = User.chemotion_user.id
-    Collection.joins(
-      "INNER JOIN sync_collections_users ON " +
-      "sync_collections_users.collection_id = collections.id")
-      .where("sync_collections_users.shared_by_id = #{su_id}")
-      .where("sync_collections_users.user_id = #{self.id}")
-      .where("collections.label = 'Reviewing'").first
-  end
-
-  def sync_reviewing_collection
-    su_id = User.chemotion_user.id
-    SyncCollectionsUser.joins(
-      "INNER JOIN collections ON " +
-      "sync_collections_users.collection_id = collections.id")
-      .where("sync_collections_users.shared_by_id = #{su_id}")
-      .where("sync_collections_users.user_id = #{self.id}")
-      .where("collections.label = 'Reviewing'").first
-  end
-
-
   def sync_element_to_review_collection
     su_id = User.chemotion_user.id
     SyncCollectionsUser.joins(
diff --git a/app/packs/src/admin/AdminDeviceElement.js b/app/packs/src/admin/AdminDeviceElement.js
deleted file mode 100644
index 99d235b90..000000000
--- a/app/packs/src/admin/AdminDeviceElement.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import { ButtonGroup, OverlayTrigger, Tooltip, Button, Table, Panel } from 'react-bootstrap';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import DeleteGroupDeviceButton from './DeleteGroupDeviceButton';
-
-export default class AdminDeviceElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showUsers: false,
-      showDevices: false,
-      devices: props.currentState.devices
-    };
-
-    this.toggleUsers = this.toggleUsers.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  fetch(type) {
-    AdminFetcher.fetchGroupsDevices(type)
-      .then((result) => {
-        switch (type) {
-          case 'Group':
-            this.setState({ groups: result.list });
-            break;
-          case 'Device':
-            this.setState({ devices: result.list });
-            break;
-          default:
-            break;
-        }
-      });
-  }
-
-  toggleUsers() {
-    this.setState({
-      showUsers: !this.state.showUsers
-    });
-  }
-
-  renderDeviceButtons(device) {
-    return (
-      <td>
-        <ButtonGroup aria-label="Device-Users">
-          <OverlayTrigger placement="top" overlay={<Tooltip id="deviceUsersShow">List Device-Users</Tooltip>}>
-            <Button bsSize="xsmall" type="button" bsStyle="info" onClick={this.toggleUsers} >
-              <i className="fa fa-users" />&nbsp;({device.users.length < 10 ? `0${device.users.length}` : device.users.length})
-            </Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device permission to users</Tooltip>}>
-            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(device, 'Device', 'Person')} >
-              <i className="fa fa-user" /><i className="fa fa-plus" />
-            </Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device permission to groups</Tooltip>}>
-            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(device, 'Device', 'Group')} >
-              <i className="fa fa-users" /><i className="fa fa-plus" />
-            </Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement="bottom" overlay={<Tooltip id="inchi_tooltip">Edit Device Metadata</Tooltip>} >
-            <Button bsSize="xsmall" bsStyle="info" onClick={() => this.props.onShowDeviceMetadataModal(device)}>
-              <i className="fa fa-laptop" />
-            </Button>
-          </OverlayTrigger>
-        </ButtonGroup>&nbsp;&nbsp;
-
-        <ButtonGroup>
-          <DeleteGroupDeviceButton rootType={'Device'}
-                             groupRec={device}
-                             isRoot={true}
-                             currentState={this.state}
-                             onChangeDeviceData={this.props.onChangeDeviceData} />
-        </ButtonGroup>
-      </td>
-    );
-  }
-
-  render() {
-    const { deviceElement } = this.props;
-    let idx = this.props.index;
-    const { showUsers } = this.state;
-
-    return (
-      <tbody key={`tbody_${deviceElement.id}`}>
-        <tr key={`row_${deviceElement.id}`} id={`row_${deviceElement.id}`} style={{ fontWeight: 'bold' }}>
-          <td>{idx + 1}</td>
-          {this.renderDeviceButtons(deviceElement)}
-          <td>{deviceElement.name}</td>
-          <td>{deviceElement.name_abbreviation}</td>
-          <td>{deviceElement.email}</td>
-        </tr>
-        <tr className={'collapse' + (showUsers ? 'in' : '')} id={`div_row_du${deviceElement.id}`}>
-          <td colSpan="5">
-            <Panel>
-              <Panel.Heading>
-                <Panel.Title>
-                  Device: [{deviceElement.name}] managed by following users/groups <br />
-                </Panel.Title>
-              </Panel.Heading>
-              <Table>
-                <tbody>
-                  {deviceElement.users.map((u, i) => (
-                    <tr key={`row_${deviceElement.id}_${u.id}`} id={`row_${deviceElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
-                      <td width="5%">{i + 1}</td>
-                      <td width="30%">{u.name}</td>
-                      <td width="10%">{u.initials}</td>
-                      <td width="20%">{u.type}</td>
-                      <td width="15%">{ }</td>
-                      <td width="20%"><DeleteGroupDeviceButton rootType='Device'
-                                                         actionType='Person'
-                                                         groupRec={deviceElement}
-                                                         userRec={u}
-                                                         currentState={this.state}
-                                                         onChangeDeviceData={this.props.onChangeDeviceData} /></td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
-            </Panel>
-          </td>
-        </tr>
-      </tbody>
-    );
-  }
-}
diff --git a/app/packs/src/admin/AdminGroupElement.js b/app/packs/src/admin/AdminGroupElement.js
deleted file mode 100644
index 8743ecdc7..000000000
--- a/app/packs/src/admin/AdminGroupElement.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React from 'react';
-import { ButtonGroup, OverlayTrigger, Popover, Tooltip, Button, Table, Panel } from 'react-bootstrap';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import { findIndex } from 'lodash';
-import DeleteGroupDeviceButton from './DeleteGroupDeviceButton';
-
-export default class AdminGroupElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showUsers: false,
-      showDevices: false,
-      groups: props.currentState.groups
-    };
-
-    this.toggleUsers = this.toggleUsers.bind(this);
-    this.toggleDevices = this.toggleDevices.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  setGroupAdmin(groupRec, userRec, setAdmin = true) {
-    const { groups } = this.state;
-    const params = {
-      action: 'NodeAdm',
-      rootType: 'Group',
-      actionType: 'Adm',
-      id: groupRec.id,
-      admin_id: userRec.id,
-      set_admin: setAdmin
-    };
-    AdminFetcher.updateGroup(params)
-      .then((result) => {
-        if (setAdmin) {
-          groupRec.admins.splice(1, 0, userRec);
-        } else {
-          const usrIdx = findIndex(groupRec.admins, o => o.id === userRec.id);
-          groupRec.admins.splice(usrIdx, 1);
-        }
-        const idx = findIndex(groups, o => o.id === groupRec.id);
-        groups.splice(idx, 1, groupRec);
-        this.props.onChangeGroupData(groups);
-      });
-  }
-
-  toggleUsers() {
-    this.setState({
-      showUsers: !this.state.showUsers
-    })
-  }
-
-  toggleDevices() {
-    this.setState({
-      showDevices: !this.state.showDevices
-    })
-  }
-
-  renderGroupButtons(group) {
-    return (
-      <td>
-        <ButtonGroup aria-label="Group-Users">
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersShow">List Group-Users</Tooltip>}>
-            <Button bsSize="xsmall" type="button" bsStyle="info" onClick={this.toggleUsers} >
-              <i className="fa fa-users" />&nbsp;({group.users.length < 10 ? `0${group.users.length}` : group.users.length})
-            </Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add user to group</Tooltip>}>
-            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(group, 'Group', 'Person')} >
-              <i className="fa fa-user" /><i className="fa fa-plus" />
-            </Button>
-          </OverlayTrigger>
-        </ButtonGroup>&nbsp;&nbsp;
-
-        <ButtonGroup>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupDevicesShow">List Group-Devices</Tooltip>}>
-            <Button bsSize="xsmall" type="button" bsStyle="success" onClick={this.toggleDevices} >
-              <i className="fa fa-server" />&nbsp;({group.devices.length < 10 ? `0${group.devices.length}` : group.devices.length})
-            </Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add device to group</Tooltip>}>
-            <Button bsSize="xsmall" type="button" onClick={() => this.props.onShowModal(group, 'Group', 'Device')} >
-              <i className="fa fa-laptop" /><i className="fa fa-plus" />
-            </Button>
-          </OverlayTrigger>
-        </ButtonGroup>&nbsp;&nbsp;
-        <ButtonGroup>
-          <DeleteGroupDeviceButton rootType={'Group'}
-                             groupRec={group}
-                             isRoot={true}
-                             currentState={this.state}
-                             onChangeGroupData={this.props.onChangeGroupData} />
-        </ButtonGroup>
-      </td>
-    );
-  }
-
-  renderGroupUserButtons(group, user) {
-    const isAdmin = group.admins && group.admins.filter(a => (a.id === user.id)).length > 0;
-    const adminTooltip = isAdmin === true ? 'set to normal user' : 'set to Administrator';
-    return (
-      <td>
-        <ButtonGroup className="actions">
-          <OverlayTrigger placement="top" overlay={<Tooltip id="userAdmin">{adminTooltip}</Tooltip>}>
-            <Button
-              bsSize="xsmall"
-              type="button"
-              bsStyle={isAdmin === true ? 'default' : 'info'}
-              onClick={() => this.setGroupAdmin(group, user, !isAdmin)}
-            >
-              <i className="fa fa-key" />
-            </Button>
-          </OverlayTrigger>
-          <DeleteGroupDeviceButton rootType={'Group'}
-                             actionType={'Person'}
-                             groupRec={group}
-                             userRec={user}
-                             currentState={this.state}
-                             onChangeGroupData={this.props.onChangeGroupData} />
-        </ButtonGroup>
-        &nbsp;&nbsp;
-      </td>
-    );
-  }
-
-  render() {
-    const { groupElement } = this.props;
-    let idx = this.props.index;
-    const { showUsers, showDevices } = this.state;
-    const adminIcon = (<OverlayTrigger placement="top" overlay={<Tooltip id="admin">Group Administrator</Tooltip>}><i className="fa fa-key" /></OverlayTrigger>);
-
-    return (
-      <tbody key={`tbody_${groupElement.id}`}>
-        <tr key={`row_${groupElement.id}`} id={`row_${groupElement.id}`} style={{ fontWeight: 'bold' }}>
-          <td>{idx + 1}</td>
-          {this.renderGroupButtons(groupElement)}
-          <td>{groupElement.name}</td>
-          <td>{groupElement.name_abbreviation}</td>
-          <td>
-            {groupElement.admins && groupElement.admins.map(x => x.name).join(', ')}&nbsp;&nbsp;
-          </td>
-          <td>{groupElement.email}</td>
-        </tr>
-        <tr className={'collapse' + (showUsers ? 'in' : '')} id={`div_row_${groupElement.id}`}>
-          <td colSpan="7">
-            <Panel>
-              <Panel.Heading>
-                <Panel.Title>
-                  Users in Group: {groupElement.name}
-                </Panel.Title>
-              </Panel.Heading>
-              <Table>
-                <tbody>
-                  {groupElement.users.map((u, i) => (
-                    <tr key={`row_${groupElement.id}_${u.id}`} id={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
-                      <td width="5%">{i + 1}</td>
-                      <td width="20%">{u.name}</td>
-                      <td width="10%">{u.initials}</td>
-                      <td width="20%">{u.email}</td>
-                      <td width="15%">{groupElement.admins && groupElement.admins.filter(a => (a.id === u.id)).length > 0 ? adminIcon : ''}</td>
-                      <td width="30%">{this.renderGroupUserButtons(groupElement, u)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
-            </Panel>
-          </td>
-        </tr>
-        <tr className={'collapse' + (showDevices ? 'in' : '')} id={`div_row_d${groupElement.id}`}>
-          <td colSpan="7">
-            <Panel>
-              <Panel.Heading>
-                <Panel.Title>
-                  Devices in Group: {groupElement.name}
-                </Panel.Title>
-              </Panel.Heading>
-              <Table>
-                <tbody>
-                  {groupElement.devices.map((u, i) => (
-                    <tr key={`row_${groupElement.id}_${u.id}`} id={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
-                      <td width="5%">{i + 1}</td>
-                      <td width="20%">{u.name}</td>
-                      <td width="10%">{u.initials}</td>
-                      <td width="20%">{ }</td>
-                      <td width="15%">{ }</td>
-                      <td width="30%">
-                        <DeleteGroupDeviceButton rootType={'Group'}
-                                           actionType={'Device'}
-                                           groupRec={groupElement}
-                                           userRec={u}
-                                           currentState={this.state}
-                                           onChangeGroupData={this.props.onChangeGroupData} /></td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
-            </Panel>
-          </td>
-        </tr>
-      </tbody>
-    );
-  }
-}
diff --git a/app/packs/src/admin/AdminHome.js b/app/packs/src/admin/AdminHome.js
deleted file mode 100644
index 49893e40b..000000000
--- a/app/packs/src/admin/AdminHome.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-import { Grid, Row, Col, Nav, NavItem } from 'react-bootstrap';
-import AdminNavigation from 'src/apps/admin/AdminNavigation';
-import Notifications from 'src/components/Notifications';
-import AdminDashboard from 'src/apps/admin/AdminDashboard';
-import UserManagement from 'src/apps/admin/UserManagement';
-import GroupsDevices from 'src/apps/admin/GroupsDevices';
-import MessagePublish from 'src/apps/admin/MessagePublish';
-import DataCollector from 'src/apps/admin/DataCollector';
-import OlsTerms from 'src/apps/admin/OlsTerms';
-import NovncSettings from 'src/apps/admin/NovncSettings';
-import MatrixManagement from 'src/apps/admin/MatrixManagement';
-import TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer';
-import DelayedJobs from 'src/apps/admin/DelayedJobs';
-
-
-class AdminHome extends React.Component {
-  constructor(props) {
-    super();
-    this.state = {
-      showTree: true,
-      pageIndex: 0,
-      contentClassName: 'small-col main-content',
-    };
-    this.toggleTree = this.toggleTree.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-
-  toggleTree() {
-    const { showTree } = this.state;
-    this.setState({
-      showTree: !showTree,
-      contentClassName: showTree ? 'small-col full-main' : 'small-col main-content'
-    });
-  }
-
-  handleSelect(pageIndex) {
-    this.setState({
-      pageIndex
-    });
-  }
-
-
-  mainContent() {
-    const { pageIndex } = this.state;
-    if (pageIndex === 0) {
-      return this.renderDashboard();
-    } else if (pageIndex === 1) {
-      return this.renderUserManagement();
-    } else if (pageIndex === 2) {
-      return this.renderMessagePublish();
-    } else if (pageIndex === 3) {
-      return this.renderDataCollector();
-    } else if (pageIndex === 4) {
-      return this.renderGroupMgnt();
-    } else if (pageIndex === 5) {
-      return this.renderOlsTerms();
-    } else if (pageIndex === 6) {
-      return this.renderNovncSettings();
-    } else if (pageIndex === 7) {
-      return this.renderContent(<MatrixManagement />);
-    } else if (pageIndex === 8) {
-      return this.renderTextTemplates();
-    } else if (pageIndex === 12) {
-      return this.renderTemplateManagement();
-    } else if (pageIndex === 13) {
-      return this.renderDelayedJobs();
-    }
-
-    return (<div />);
-  }
-
-  tree() {
-    const { showTree, pageIndex } = this.state;
-    if (!showTree) {
-      return <div />;
-    }
-
-    return (
-      <div>
-        <Col className="small-col collec-tree">
-          <Nav bsStyle="pills" stacked activeKey={pageIndex} onSelect={this.handleSelect}>
-            <NavItem eventKey={0}>Dashboard</NavItem>
-            <NavItem eventKey={1}>User Management</NavItem>
-            <NavItem eventKey={4}>Groups &amp; Devices</NavItem>
-            <NavItem eventKey={3}>Data Collector</NavItem>
-            <NavItem eventKey={6}>NoVNC Settings</NavItem>
-            <NavItem eventKey={7}>UI features</NavItem>
-            <NavItem eventKey={8}>Text Templates</NavItem>
-            <NavItem eventKey={2}>Message Publish</NavItem>
-            <NavItem eventKey={5}>Load OLS Terms</NavItem>
-	    {/* <NavItem eventKey={12}>Report-template Management</NavItem> */}
-            <NavItem eventKey={13}>Delayed Jobs </NavItem>
-          </Nav>
-        </Col>
-      </div>
-    );
-  }
-
-  renderDashboard() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <AdminDashboard />
-      </Col>
-    );
-  }
-
-  renderUserManagement() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <UserManagement />
-      </Col>
-    );
-  }
-
-  renderMessagePublish() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <MessagePublish />
-      </Col>
-    );
-  }
-
-  renderDataCollector() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <DataCollector />
-      </Col>
-    );
-  }
-
-  renderGroupMgnt() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <GroupsDevices />
-      </Col>
-    );
-  }
-
-  renderOlsTerms() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <OlsTerms />
-      </Col>
-    );
-  }
-
-  renderNovncSettings() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <NovncSettings />
-      </Col>
-    );
-  }
-
-  renderTextTemplates() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <TextTemplateContainer />
-      </Col>
-    );
-  }
-
-  renderContent(component) {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        {component}
-      </Col>
-    );
-  }
-
-  renderDelayedJobs() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <DelayedJobs />
-      </Col>
-    );
-  }
-
-  renderTemplateManagement() {
-    const { contentClassName } = this.state;
-    return (
-      <Col className={contentClassName} >
-        <TemplateManagement />
-      </Col>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <Grid fluid>
-          <Row className="card-navigation">
-            <AdminNavigation toggleTree={this.toggleTree} />
-          </Row>
-          <Row className="card-content container-fluid" >
-            {this.tree()}
-            {this.mainContent()}
-          </Row>
-          <Row>
-            <Notifications />
-          </Row>
-        </Grid>
-      </div>
-    );
-  }
-}
-
-export default AdminHome;
diff --git a/app/packs/src/admin/AdminNavigation.js b/app/packs/src/admin/AdminNavigation.js
deleted file mode 100644
index d34a6c842..000000000
--- a/app/packs/src/admin/AdminNavigation.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import { Nav, Navbar, MenuItem, NavDropdown } from 'react-bootstrap';
-
-import UserAuth from 'src/components/navigation/UserAuth';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import UserActions from 'src/stores/alt/actions/UserActions';
-
-import NavNewSession from 'src/components/navigation/NavNewSession';
-import DocumentHelper from 'src/utilities/DocumentHelper';
-
-const NavHead = () => (
-  <Navbar.Brand>
-    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
-      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
-      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
-      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
-      <MenuItem divider />
-      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
-    </NavDropdown>
-  </Navbar.Brand>
-);
-
-export default class AdminNavigation extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: null,
-    };
-    this.toggleTree = this.toggleTree.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-    UserActions.fetchUnitsSystem();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
-  }
-
-  toggleTree() {
-    this.props.toggleTree();
-  }
-
-  navHeader() {
-    return (
-      <Navbar.Header className="collec-tree">
-        <Navbar.Text style={{ cursor: 'pointer' }}>
-          <i
-            className="fa fa-list"
-            style={{ fontStyle: "normal" }}
-            onClick={this.toggleTree}
-          />
-        </Navbar.Text>
-        <Navbar.Text />
-        <NavHead />
-      </Navbar.Header>
-    );
-  }
-
-  render() {
-    return this.state.currentUser ? (
-      <Navbar fluid className="navbar-custom">
-        {this.navHeader()}
-        <Nav navbar className="navbar-form">
-          <h1>ELN Administration</h1>
-        </Nav>
-        <UserAuth />
-        <div style={{ clear: 'both' }} />
-      </Navbar>
-    ) : (
-      <Navbar fluid className="navbar-custom" >
-        {this.navHeader()}
-        <Nav navbar className="navbar-form" />
-        <div>
-          <h1>ELN Administration</h1>
-        </div>
-        <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />
-        <div style={{ clear: 'both' }} />
-      </Navbar>
-    );
-  }
-}
diff --git a/app/packs/src/admin/DataCollector.js b/app/packs/src/admin/DataCollector.js
deleted file mode 100644
index 7898ba776..000000000
--- a/app/packs/src/admin/DataCollector.js
+++ /dev/null
@@ -1,561 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Button, Table, Modal, Tooltip, OverlayTrigger, FormControl, InputGroup, FormGroup, DropdownButton, MenuItem, Row, Col } from 'react-bootstrap';
-import { startsWith, endsWith } from 'lodash';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-
-const tipCopyClipboard = <Tooltip id="copy_tooltip">copy to clipboard</Tooltip>;
-const tipEditConfig = <Tooltip id="edit_tooltip">edit config</Tooltip>;
-const tipRemoveConfig = <Tooltip id="remove_tooltip">remove config</Tooltip>;
-const tipTestConnect = <Tooltip id="test_tooltip">test connection</Tooltip>;
-const optionsMethod = ['filewatchersftp', 'filewatcherlocal', 'folderwatchersftp', 'folderwatcherlocal'];
-const optionsAuth = ['password', 'keyfile'];
-const Notification = props =>
-(
-  NotificationActions.add({
-    title: `Device [${props.device.name}]`,
-    message: props.msg,
-    level: props.lvl,
-    position: 'tc',
-    dismissible: 'button',
-    uid: uuid.v4()
-  })
-);
-const NotificationError = props => Notification({ ...props, lvl: 'error' });
-const NotificationWarn = props => Notification({ ...props, lvl: 'warning' });
-const ListLocalCollector = props =>
-(
-  <div style={{ margin: '5px', padding: '5px', border: 'thin dashed darkred' }}>
-    <h6 style={{ margin: 'unset' }}><b>Local Collector Dir Configurtaion</b></h6>
-    {
-      props.localCollector.map((c, i) => (
-        <div key={uuid.v4()}>
-          <FormGroup bsSize="small" style={{ marginBottom: 'unset' }}>
-            <InputGroup>
-              <InputGroup.Button>
-                <OverlayTrigger placement="right" overlay={tipCopyClipboard}>
-                  <Button bsSize="xsmall" active className="clipboardBtn" data-clipboard-target={`#copy-input-${i}`} >
-                    <i className="fa fa-clipboard" />
-                  </Button>
-                </OverlayTrigger>
-              </InputGroup.Button>
-              <FormControl
-                id={`copy-input-${i}`}
-                type="text"
-                value={c.path}
-                readOnly
-                style={{ backgroundColor: 'unset', border: 'unset', boxShadow: 'none' }}
-              />
-            </InputGroup>
-          </FormGroup>
-        </div>
-      ))
-    }
-  </div>
-);
-
-ListLocalCollector.propTypes = {
-  localCollector: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-const DropdownSelection = props =>
-(
-  <DropdownButton
-    title={props.selected || props.placeholder}
-    key={props.selected}
-    id={`dropdown-${uuid.v4()}`}
-    onSelect={props.onSelect}
-  >
-    {
-      props.options.map(element => (
-        <MenuItem key={element} eventKey={element} disabled={props.disabled}>
-          {element}
-        </MenuItem>
-      ))
-    }
-  </DropdownButton>
-);
-
-DropdownSelection.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  selected: PropTypes.string,
-  onSelect: PropTypes.func,
-  disabled: PropTypes.bool
-};
-
-DropdownSelection.defaultProps = {
-  selected: null,
-  onSelect: null,
-  disabled: false
-};
-
-class ModelConfig extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedMethod: props.device.data.method || null,
-      selectedAuth: (props.device.data.method_params && props.device.data.method_params.authen)
-        || 'password',
-    };
-    this.handleSave = this.handleSave.bind(this);
-    this.handleSelectMethod = this.handleSelectMethod.bind(this);
-    this.handleSelectAuth = this.handleSelectAuth.bind(this);
-  }
-
-  handleSave(device) {
-    const { selectedMethod, selectedAuth } = this.state;
-
-    if (!selectedMethod) {
-      NotificationError({ device, msg: 'Please select Data Collector Method!' });
-      return false;
-    }
-    if (endsWith(selectedMethod, 'sftp')) {
-      if (!this.refUser || this.refUser.value.trim() === '') {
-        NotificationError({ device, msg: 'Please input User!' });
-        return false;
-      }
-      if (!this.refHost || this.refHost.value.trim() === '') {
-        NotificationError({ device, msg: 'Please input Host!' });
-        return false;
-      }
-      if (selectedAuth === 'keyfile' && (!this.refKey || this.refKey.value.trim() === '')) {
-        NotificationError({ device, msg: 'Use key file, Please input Key path!' });
-        return false;
-      }
-    }
-    if (!this.refDirectory || this.refDirectory.value.trim() === '') {
-      NotificationError({ device, msg: 'Please input Dir!' });
-      return false;
-    }
-    NotificationWarn({ device, msg: 'Warning: Unprocessable files will be deleted from the target directory!' });
-    const params = {
-      id: device.id,
-      data: {
-        method: selectedMethod,
-        method_params: {
-          authen: selectedAuth,
-          dir: this.refDirectory.value.trim(),
-        }
-      }
-    };
-    if (endsWith(selectedMethod, 'sftp')) {
-      params.data.method_params.host = this.refHost.value.trim();
-      params.data.method_params.user = this.refUser.value.trim();
-      if (selectedAuth === 'keyfile') {
-        params.data.method_params.key_name = this.refKey.value.trim();
-      }
-    }
-    if (startsWith(selectedMethod, 'folder')) {
-      params.data.method_params.number_of_files = Math.trunc(this.refNumFiles.value);
-    }
-    AdminFetcher.updateDeviceMethod(params)
-      .then((result) => {
-        if (result.error) {
-          NotificationError({ device, msg: result.error });
-          return false;
-        }
-        this.props.onClose();
-        return true;
-      });
-    return true;
-  }
-
-  handleSelectMethod(e) {
-    this.setState({ selectedMethod: e });
-  }
-
-  handleSelectAuth(e) {
-    this.setState({ selectedAuth: e });
-  }
-
-  render() {
-    const { selectedMethod, selectedAuth } = this.state;
-    const rowStyle = { padding: '8px', display: 'flex' };
-    const colStyle = { textAlign: 'right', marginTop: 'auto', marginBottom: 'auto' };
-
-    return (
-      <Modal
-        bsSize="large"
-        show={this.props.isShow}
-        onHide={this.props.onClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Data Collector Configuration - Device: {this.props.device.name}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Watch method</b>
-            </Col>
-            <Col sm={2} md={2} lg={2}>
-              <DropdownSelection
-                options={optionsMethod}
-                selected={selectedMethod}
-                placeholder="Select method"
-                onSelect={this.handleSelectMethod}
-              />
-            </Col>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>User</b>
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <input
-                ref={(ref) => { this.refUser = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputUser"
-                placeholder="e.g. User"
-                required
-                readOnly={endsWith(selectedMethod, 'local')}
-                defaultValue={`${this.props.device.data.method_params && this.props.device.data.method_params.user ? this.props.device.data.method_params.user : ''}`}
-              />
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Host</b>
-            </Col>
-            <Col sm={10} md={10} lg={10}>
-              <input
-                ref={(ref) => { this.refHost = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputHost"
-                placeholder="e.g. google.com"
-                required
-                readOnly={endsWith(selectedMethod, 'local')}
-                defaultValue={`${(this.props.device.data.method_params && this.props.device.data.method_params.host ? this.props.device.data.method_params.host : '')}`}
-              />
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>SFTP auth. with</b>
-            </Col>
-            <Col sm={2} md={2} lg={2}>
-              <DropdownSelection
-                options={optionsAuth}
-                selected={selectedAuth || 'password'}
-                placeholder="Select authentication"
-                onSelect={this.handleSelectAuth}
-                disabled={endsWith(selectedMethod, 'local')}
-              />
-            </Col>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Key file</b>
-            </Col>
-            <Col sm={6} md={6} lg={6} style={{ display: 'flex' }}>
-              <input
-                ref={(ref) => { this.refKey = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputKey"
-                placeholder="e.g. /home/user/.ssh/rsa/eln-privatekey.pem"
-                required
-                readOnly={endsWith(selectedMethod, 'local') || (selectedAuth === 'password')}
-                defaultValue={`${(this.props.device.data.method_params && this.props.device.data.method_params.key_name ? this.props.device.data.method_params.key_name : '')}`}
-              />
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Watch Directory</b>
-            </Col>
-            <Col sm={10} md={10} lg={10}>
-              <input
-                ref={(ref) => { this.refDirectory = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputDirectory"
-                placeholder="e.g. /home/sftp/eln"
-                required
-                defaultValue={`${(this.props.device.data.method_params ? this.props.device.data.method_params.dir : '')}`}
-              />
-              {
-                endsWith(selectedMethod, 'local') ? <ListLocalCollector localCollector={this.props.localCollector} /> : null
-              }
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Number of files</b>
-            </Col>
-            <Col sm={10} md={10} lg={10}>
-              <input
-                ref={(ref) => { this.refNumFiles = ref; }}
-                className="form-control is-invalid"
-                type="number"
-                id="inputNumFiles"
-                min="0"
-                placeholder="e.g. 10"
-                required
-                readOnly={startsWith(selectedMethod, 'file')}
-                defaultValue={`${(this.props.device.data.method_params ? this.props.device.data.method_params.number_of_files : 1)}`}
-              />&nbsp;<span className="fa fa-info-circle" aria-hidden="true">&nbsp;Folderwatcher: set to 0 for a varying number of files</span>
-            </Col>
-          </Row>
-        </Modal.Body>
-        <Modal.Footer style={{ textAlign: 'left' }}>
-          <Button bsStyle="primary" onClick={() => this.props.onClose()}>Close</Button>
-          <Button bsStyle="warning" onClick={() => this.handleSave(this.props.device)}>Save</Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ModelConfig.propTypes = {
-  device: PropTypes.shape({
-    name: PropTypes.string,
-    data: PropTypes.shape({
-      method: PropTypes.string,
-      method_params: PropTypes.shape({
-        dir: PropTypes.string,
-        host: PropTypes.string,
-        user: PropTypes.string,
-        authen: PropTypes.string,
-        key_name: PropTypes.string,
-        number_of_files: PropTypes.number
-      })
-    })
-  }).isRequired,
-  localCollector: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isShow: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired
-};
-
-class BtnConnect extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { lock: false };
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(device) {
-    this.setState({ lock: true });
-    const params = {
-      method: device.data.method,
-      dir: device.data.method_params.dir,
-      host: device.data.method_params.host,
-      user: device.data.method_params.user,
-      authen: device.data.method_params.authen || 'password',
-      key_name: device.data.method_params.key_name,
-    };
-    AdminFetcher.testSFTP(params)
-      .then((result) => {
-        Notification({ device, msg: result.msg || result.error, lvl: result.lvl || 'error' });
-        this.setState({ lock: false });
-      });
-  }
-
-  render() {
-    const { lock } = this.state;
-    return (
-      <OverlayTrigger placement="bottom" overlay={this.props.btnTip} >
-        <Button
-          bsSize="xsmall"
-          // bsStyle="info"
-          onClick={() => this.handleClick(this.props.device)}
-        >
-          {
-            lock ? <i className="fa fa-spin fa-spinner" aria-hidden="true" /> : <i className="fa fa-plug" aria-hidden="true" />
-          }
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
-
-BtnConnect.propTypes = {
-  device: PropTypes.shape({
-    data: PropTypes.shape({
-      method: PropTypes.string,
-      method_params: PropTypes.shape({
-        dir: PropTypes.string,
-        host: PropTypes.string,
-        user: PropTypes.string,
-      })
-    })
-  }).isRequired,
-  btnTip: PropTypes.element.isRequired
-};
-
-export default class DataCollector extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      devices: [],
-      selectedDevice: null,
-      localCollector: [],
-      showConfigModal: false,
-    };
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handleDeviceListFetch = this.handleDeviceListFetch.bind(this);
-    this.handleLocalCollectorFetch = this.handleLocalCollectorFetch.bind(this);
-    this.handleConfigModalShow = this.handleConfigModalShow.bind(this);
-    this.handleConfigModalClose = this.handleConfigModalClose.bind(this);
-  }
-
-  componentDidMount() {
-    this.handleDeviceListFetch();
-    this.handleLocalCollectorFetch();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  handleLocalCollectorFetch() {
-    AdminFetcher.fetchLocalCollector()
-      .then((result) => {
-        this.setState({
-          localCollector: result.listLocalCollector,
-        });
-      });
-  }
-
-  handleConfigModalShow(device) {
-    AdminFetcher.fetchDeviceById(device.id)
-      .then((result) => {
-        if (result.device) {
-          const selectedDevice = result.device;
-          this.setState({
-            selectedDevice,
-            showConfigModal: true
-          });
-        }
-      });
-  }
-
-  handleConfigModalClose() {
-    AdminFetcher.fetchDevices()
-      .then((result) => {
-        this.setState({
-          devices: result.devices,
-          showConfigModal: false,
-        });
-      });
-  }
-
-  handleDeviceListFetch() {
-    AdminFetcher.fetchDevices()
-      .then((result) => {
-        this.setState({
-          devices: result.devices,
-        });
-      });
-  }
-
-  handleRemoveConfig(id) {
-    const { devices } = this.state;
-    AdminFetcher.removeDeviceMethod({ id })
-      .then((result) => {
-        devices.splice(devices.findIndex(o => o.id === result.device.id), 1, result.device);
-        this.setState({ devices });
-      });
-  }
-
-  renderConfiModal() {
-    return this.state.showConfigModal ?
-      <ModelConfig
-        device={this.state.selectedDevice}
-        localCollector={this.state.localCollector}
-        isShow={this.state.showConfigModal}
-        onClose={this.handleConfigModalClose}
-      /> : null;
-  }
-
-  render() {
-    const { devices } = this.state;
-
-    const tcolumn = (
-      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
-        <th width="5%" colSpan="2">#</th>
-        <th width="15%">Name</th>
-        <th width="10%">Watch Method</th>
-        <th width="10%">User</th>
-        <th width="15%">Host</th>
-        <th width="5%">SFTP Authentication</th>
-        <th width="10%">Key file Path</th>
-        <th width="25%">Watch Directory</th>
-        <th width="3%">Num. of Files</th>
-        <th width="2%">ID</th>
-      </tr>
-    );
-
-    const tbody = devices.map((device, idx) => (
-      <tr key={`row_${device.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
-        <td>
-          {idx + 1}
-        </td>
-        <td>
-          <OverlayTrigger placement="bottom" overlay={tipEditConfig} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="primary"
-              onClick={() => this.handleConfigModalShow(device)}
-            >
-              <i className="fa fa-pencil" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={tipRemoveConfig} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="danger"
-              onClick={() => this.handleRemoveConfig(device.id)}
-            >
-              <i className="fa fa-eraser" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-        </td>
-        <td> {device.name} </td>
-        <td>
-          {(device.data && device.data.method ? device.data.method : '')}
-          &nbsp;
-          {
-            endsWith(device.data.method, 'sftp') ? <BtnConnect device={device} btnTip={tipTestConnect} /> : null
-          }
-        </td>
-        <td> {(device.data && device.data.method_params ? device.data.method_params.user : '')} </td>
-        <td> {(device.data && device.data.method_params ? device.data.method_params.host : '')} </td>
-        <td>
-          {(device.data && device.data.method_params && device.data.method_params.authen ? device.data.method_params.authen : 'password')}
-        </td>
-        <td> {(device.data && device.data.method_params && device.data.method_params.key_name ? device.data.method_params.key_name : '')} </td>
-        <td> {(device.data && device.data.method_params ? device.data.method_params.dir : '')} </td>
-        <td>
-          {(device.data && device.data.method_params && device.data.method_params.number_of_files ?
-            device.data.method_params.number_of_files : 0)}
-        </td>
-        <td> {device.id} </td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Data Collector
-            </Panel.Title>
-          </Panel.Heading>
-          <Table responsive hover bordered>
-            <thead>
-              {tcolumn}
-            </thead>
-            <tbody>
-              {tbody}
-            </tbody>
-          </Table>
-        </Panel>
-        {this.renderConfiModal()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/DatasetElementAdmin.js b/app/packs/src/admin/DatasetElementAdmin.js
deleted file mode 100644
index bf0ad9378..000000000
--- a/app/packs/src/admin/DatasetElementAdmin.js
+++ /dev/null
@@ -1,824 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy } from 'lodash';
-import LoadingModal from '../components/common/LoadingModal';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import { ElementField } from '../components/elements/ElementField';
-import LoadingActions from '../components/actions/LoadingActions';
-import TemplateJsonModal from './generic/TemplateJsonModal';
-import LayerAttrEditModal from './generic/LayerAttrEditModal';
-import LayerAttrNewModal from './generic/LayerAttrNewModal';
-import FieldCondEditModal from './generic/FieldCondEditModal';
-import SelectAttrNewModal from './generic/SelectAttrNewModal';
-import Preview from './generic/Preview';
-import UploadModal from './generic/UploadModal';
-import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
-
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-export default class DatasetElementAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      element: {},
-      newFieldKey: '',
-      newOptionKey: '',
-      layerKey: '',
-      selectOptions: [],
-      unitsSystem: {},
-      showPropModal: false,
-      showNewLayer: false,
-      showEditLayer: false,
-      showAddSelect: false,
-      showUpload: false,
-      showJson: false,
-      propTabKey: 1,
-      revisions: [],
-    };
-
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.handlePropClose = this.handlePropClose.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    this.onInputNewOption = this.onInputNewOption.bind(this);
-    this.addLayer = this.addLayer.bind(this);
-    this.addSelection = this.addSelection.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.handleSelectClose = this.handleSelectClose.bind(this);
-    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
-    this.handleLayerClose = this.handleLayerClose.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.onOptionInputChange = this.onOptionInputChange.bind(this);
-    this.showJsonModal = this.showJsonModal.bind(this);
-    this.hideJsonModal = this.hideJsonModal.bind(this);
-    this.handleUpdateJson = this.handleUpdateJson.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
-    this.handleDeActive = this.handleDeActive.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleUploadShow = this.handleUploadShow.bind(this);
-    this.handleUploadClose = this.handleUploadClose.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    this.fetchConfigs();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onOptionInputChange(event, selectKey, optionKey) {
-    const { element } = this.state;
-    const options = (element &&
-      element.properties_template && element.properties_template.select_options[selectKey]
-      && element.properties_template.select_options[selectKey].options) || [];
-    const idx = findIndex(options, o => o.key === optionKey);
-    const op = {};
-    op.key = optionKey;
-    op.label = event.target.value;
-    options.splice(idx, 1, op);
-    this.setState({ element });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-    let fobj = null;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobjs = filter(fields, o => o.field === fe);
-      if (fobjs && fobjs.length > 0) {
-        fobj = fobjs[0];
-      }
-    }
-
-    if (layer != null && fobj != null) {
-      switch (fc) {
-        case 'label':
-          fobj.label = value;
-          break;
-        case 'description':
-          fobj.description = value;
-          break;
-        case 'type':
-          fobj.type = value;
-          break;
-        case 'required':
-          fobj.required = !orig;
-          break;
-        case 'formula':
-          fobj.formula = value;
-          break;
-        case 'position':
-          fobj.position = value;
-          break;
-        case 'field':
-          fobj.field = value;
-          break;
-        case 'placeholder':
-          fobj.placeholder = value;
-          break;
-        case 'option_layers':
-          fobj.option_layers = value;
-          break;
-        default:
-          break;
-      }
-      const idx = findIndex(fields, o => o.field === fe);
-      fields.splice(idx, 1, fobj);
-      element.properties_template.layers[lk].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
-  }
-
-  onInputNewOption(e) {
-    this.setState({ newOptionKey: e.target.value });
-  }
-
-  fetchConfigs() {
-    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
-  fetchElements() {
-    AdminFetcher.listDatasetKlass()
-      .then((result) => { this.setState({ elements: result.klass }); });
-  }
-
-  handleDeActive(e) {
-    const act = e.is_active ? 'De-active' : 'Active';
-    AdminFetcher.deActiveDatasetKlass({ id: e.id, is_active: !e.is_active })
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `${act} Dataset fail`, lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `${act} Dataset successfully`, lvl: 'info', msg: `${e.label} is ${act.toLowerCase()} now` });
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  handlePropClose() {
-    this.setState({ showPropModal: false });
-  }
-
-  handleFieldCondClose() {
-    this.setState({ showFieldCond: false });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-  addLayer() {
-    this.setState({ showNewLayer: true });
-  }
-
-  addSelection() {
-    this.setState({ showAddSelect: true });
-  }
-
-  showJsonModal(element) {
-    this.setState({ element, showJson: true });
-  }
-
-  hideJsonModal() {
-    this.setState({ showJson: false });
-  }
-
-  editLayer(e) {
-    this.setState({ showEditLayer: true, layerKey: e.layerKey });
-  }
-
-  handleUploadShow() {
-    this.setState({ showUpload: true });
-  }
-
-  handleUploadClose() {
-    this.setState({ showUpload: false });
-  }
-
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name!' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
-  }
-
-  newOption(key) {
-    const { element, newOptionKey } = this.state;
-
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    const selectObj = (element && element.properties_template
-      && element.properties_template.select_options[key]
-      && element.properties_template.select_options[key].options) || [];
-    const dupops = filter(selectObj, o => o.key === newOptionKey);
-    if (dupops && dupops.length > 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const newOption = { key: newOptionKey, label: newOptionKey };
-    selectObj.push(newOption);
-    element.properties_template.select_options[key].options = selectObj;
-    this.setState({ element });
-  }
-
-  handleNewLayerClose() {
-    this.setState({ showNewLayer: false });
-  }
-
-  handleLayerClose() {
-    this.setState({ showEditLayer: false });
-  }
-
-  handleSelectClose() {
-    this.setState({ showAddSelect: false });
-  }
-
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
-      AdminFetcher.fetchKlassRevisions(element.id, 'DatasetKlass')
-        .then((result) => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        });
-    }
-  }
-
-  delRevision(params) {
-    const { element } = this.state;
-    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'DatasetKlass' })
-      .then((response) => {
-        if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
-        } else {
-          this.fetchRevisions();
-        }
-      });
-  }
-
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  handleAddSelect(selectName) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      const sos = element.properties_template.select_options;
-      sos[selectName] = {};
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, showAddSelect: false, selectOptions });
-    }
-    return false;
-  }
-
-  handleCreateLayer(layer) {
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
-      return;
-    }
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showNewLayer: false, element, layerKey: layer.key });
-  }
-
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates)) return;
-    const { element } = this.state;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    layer = { ...layer, ...updates };
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showEditLayer: false, element });
-  }
-
-  handleUpdateJson(propertiesTemplate) {
-    const { element } = this.state;
-    element.properties_template = propertiesTemplate;
-    this.setState({ element, showJson: false }, this.handleSubmit(false));
-  }
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, selectOptions, showPropModal: true });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.setState({ showUpload: false });
-      notification({ title: `Upload Template for Dataset [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, showUpload: false });
-      notification({ title: `Upload template to Dataset [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
-    }
-  }
-
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = false;
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-
-    element.is_release = isRelease;
-    AdminFetcher.updateDatasetTemplate(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Update Dataset: [${element.label}] template fail`, lvl: 'error', msg: result.error });
-        } else {
-          if (isRelease === true) {
-            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
-          } else {
-            notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved successfully' });
-          }
-          this.fetchElements();
-          this.setState({ element: result }, () => LoadingActions.stop());
-        }
-      }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const options = element.properties_template.select_options[delRoot];
-      const idx = findIndex(options, o => o.key === delKey);
-      options.splice(idx, 1);
-    } else if (delStr === 'Layer') {
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    }
-    this.setState({ element });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
-    } else {
-      msg = `remove ???: ${delStr}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderSelectOptions() {
-    const { element } = this.state;
-    const selects = [];
-    Object.keys(element.properties_template.select_options).forEach((key) => {
-      const soptions = (element.properties_template.select_options[key]
-      && element.properties_template.select_options[key].options) || [];
-      const options = soptions.map(f => (
-        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
-          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}`}>
-            <InputGroup>
-              <InputGroup.Addon>{f.key}</InputGroup.Addon>
-              <FormControl
-                type="text"
-                name="lf_label"
-                defaultValue={f.label}
-                onChange={event => this.onOptionInputChange(event, key, f.key)}
-              />
-              <InputGroup.Button>
-                {this.renderDeleteButton('Option', f.key, key)}
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </div>
-      ));
-
-      const snode = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`select_options_${key}`} >
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>{key}</Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {this.renderDeleteButton('Select', key, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="input_newOption"
-                    onChange={e => this.onInputNewOption(e)}
-                    placeholder="Input new option"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
-                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
-                    </OverlayTrigger>
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse><Panel.Body>{options}</Panel.Body></Panel.Collapse>
-        </Panel>
-      );
-      selects.push(snode);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Select Lists
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ selects }</div></Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          genericType="Dataset"
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          select_options={selectOptions}
-          onDrop={() => {}}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnCond}
-                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse><Panel.Body>{fields}</Panel.Body></Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderList() {
-    const { elements, element } = this.state;
-    const tbody = elements && elements.map((e, idx) => (
-      <tbody key={`tbody_${e.id}`}>
-        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
-          <td>{idx + 1}</td>
-          <td>{e.label}</td>
-          <td>
-            {
-              e.is_active ? <ButtonTooltip tip="click to de-active this dataset template (currently active)" fnClick={this.handleDeActive} element={e} fa="fa-check" bs="success" />
-              : <ButtonTooltip tip="click to active this dataset template (currently deactive)" fnClick={this.handleDeActive} element={e} fa="fa-ban" bs="danger" />
-            }
-          </td>
-          <td>
-            <ButtonTooltip tip="Edit Dataset template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
-            <ButtonTooltip tip="Edit Dataset template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
-          </td>
-          <td>{e.released_at} (UTC)</td>
-        </tr>
-      </tbody>
-    ));
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Table responsive condensed hover>
-            <thead>
-              <tr style={{ backgroundColor: '#ddd' }}>
-                <th width="5%">#</th>
-                <th width="45%">Chemical Methods Ontology</th>
-                <th width="10%">Active</th>
-                <th width="20%">Template</th>
-                <th width="18%">Released at</th>
-              </tr>
-            </thead>
-            { tbody }
-          </Table>
-        </Panel.Heading>
-      </Panel>
-    );
-  }
-
-  renderPropPanel() {
-    const { element, showPropModal, revisions, propTabKey } = this.state;
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="uncontrolled-tab-example" onSelect={this.propTabSelect}>
-          <Tab eventKey={1} title="Template">
-            <Panel show={showPropModal.toString()}>
-              <Panel.Heading>
-                <b>{`Properties Template of Dataset [${element.label}]`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}>{this.renderProperties()}</Col>
-                  <Col sm={4}>{this.renderSelectOptions()}</Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-
-      );
-    }
-    return (<div />);
-  }
-
-  render() {
-    const { element, layerKey } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
-    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
-    return (
-      <div>
-        <div className="list-container-bottom">
-          { this.renderList() }
-          { this.renderPropPanel() }
-          <SelectAttrNewModal
-            showModal={this.state.showAddSelect}
-            fnClose={this.handleSelectClose}
-            fnCreate={this.handleAddSelect}
-          />
-          <LayerAttrNewModal
-            showModal={this.state.showNewLayer}
-            fnClose={this.handleNewLayerClose}
-            fnCreate={this.handleCreateLayer}
-          />
-          <LayerAttrEditModal
-            showModal={this.state.showEditLayer}
-            layer={layer}
-            fnClose={this.handleLayerClose}
-            fnUpdate={this.handleUpdateLayer}
-          />
-          <FieldCondEditModal
-            showModal={this.state.showFieldCond}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.handleFieldCondClose}
-          />
-          <TemplateJsonModal
-            showModal={this.state.showJson}
-            fnClose={this.hideJsonModal}
-            fnUpdate={this.handleUpdateJson}
-            element={this.state.element}
-          />
-          <UploadModal
-            content="Generic Dataset"
-            klass="DatasetKlass"
-            showModal={this.state.showUpload}
-            fnClose={this.handleUploadClose}
-            fnUpload={this.handleUploadTemplate}
-          />
-        </div>
-        <LoadingModal />
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/DelayedJobs.js b/app/packs/src/admin/DelayedJobs.js
deleted file mode 100644
index f9c441947..000000000
--- a/app/packs/src/admin/DelayedJobs.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Button, OverlayTrigger, Panel, Table, Tooltip } from 'react-bootstrap';
-import React, { Component } from 'react';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-
-const tipRestartJob = <Tooltip id="restart_tooltip">Update run_at</Tooltip>;
-
-export default class DelayedJobs extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jobs: [],
-    };
-    this.handleFetchJob = this.handleFetchJob.bind(this);
-  }
-
-  componentDidMount() {
-    this.handleFetchJob();
-  }
-
-  handleFetchJob() {
-    AdminFetcher.fetchJobs()
-      .then((result) => {
-        this.setState({
-          jobs: result.jobs,
-        });
-      });
-  }
-
-  handleRestartFetch(id) {
-    AdminFetcher.restartJob({ id })
-      .then(() => this.handleFetchJob());
-  }
-
-  renderShowBtn(job) {
-    // if (job.last_error) {
-    if (true) {
-      return (
-        <OverlayTrigger placement="top" overlay={tipRestartJob}>
-          <Button
-            bsSize="xsmall"
-            bsStyle="success"
-            onClick={() => this.handleRestartFetch(job.id)}
-          >
-            <i className="fa fa-play" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>);
-    }
-    return '';
-  }
-
-  render() {
-    const { jobs } = this.state;
-
-    const tcolumn = (
-      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
-        <th width="4%" colSpan="2">ID</th>
-        <th width="5%">Queue</th>
-        <th width="5%">Job Class</th>
-        <th width="5%">Run At</th>
-        <th width="5%">Failed At</th>
-        <th width="4%">Attempts</th>
-        <th width="4%">Priority</th>
-        <th width="50%">Last Errors</th>
-      </tr>
-    );
-
-    const tbody = jobs.map(job => (
-      <tr key={`row_${job.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
-        <td> {job.id} </td>
-        <td> {this.renderShowBtn(job)} </td>
-        <td> {job.queue} </td>
-        <td> {job.handler.split(' ')[4].trim()} </td>
-        <td> {job.run_at} </td>
-        <td> {job.failed_at} </td>
-        <td> {job.attempts} </td>
-        <td> {job.priority} </td>
-        <td><textarea defaultValue={job.last_error} style={{ maxWidth: '100%' }} /></td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Delayed Jobs
-            </Panel.Title>
-          </Panel.Heading>
-          <Table responsive hover bordered>
-            <thead>
-              { tcolumn }
-            </thead>
-            <tbody>
-              { tbody }
-            </tbody>
-          </Table>
-        </Panel>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/DeleteGroupDeviceButton.js b/app/packs/src/admin/DeleteGroupDeviceButton.js
deleted file mode 100644
index 299bce3f4..000000000
--- a/app/packs/src/admin/DeleteGroupDeviceButton.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import { Button, ButtonGroup, Popover, OverlayTrigger } from 'react-bootstrap';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-
-export default class DeleteGroupDeviceButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      groups: props.currentState.groups,
-      devices: props.currentState.devices
-    };
-
-    this.onChangeGroupData = this.onChangeGroupData.bind(this);
-    this.onChangeDeviceData = this.onChangeDeviceData.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  onChangeGroupData = (groups) => {
-    this.props.onChangeGroupData(groups);
-  }
-
-  onChangeDeviceData = (devices) => {
-    this.props.onChangeDeviceData(devices);
-  }
-
-  confirmDelete(rootType, actionType, groupRec, userRec, isRoot = false) {
-    const { groups, devices } = this.state;
-    const rmUsers = userRec == null ? [] : [userRec.id];
-
-    const params = {
-      action: isRoot ? 'RootDel' : 'NodeDel',
-      rootType,
-      actionType,
-      id: groupRec.id,
-      destroy_obj: isRoot,
-      rm_users: rmUsers
-    };
-
-    AdminFetcher.updateGroup(params)
-      .then((result) => {
-        switch (rootType) {
-          case 'Group':
-            this.onChangeGroupData();
-            break;
-          case 'Device':
-            this.onChangeDeviceData();
-            break;
-          default:
-            break;
-        }
-      });
-  }
-
-  render() {
-    const {rootType, actionType, groupRec, userRec, isRoot} = this.props;
-    let msg = 'remove yourself from the group';
-    if (rootType === 'Group' && isRoot) {
-      msg = `remove group: ${groupRec.name}`;
-    } else if (rootType === 'Device' && isRoot) {
-      msg = `remove device: ${groupRec.name}`;
-    } else if (rootType === 'Group' && !isRoot && actionType === 'Person') {
-      msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;
-    } else if (rootType === 'Group' && !isRoot && actionType === 'Device') {
-      msg = `remove device: ${userRec.name} from group: ${groupRec.name} ?`;
-    } else if (rootType === 'Device' && !isRoot) {
-      msg = `remove user: ${userRec.name} from group: ${groupRec.name} ?`;
-    } else {
-      msg = `remove ???: ${groupRec.name}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(rootType, actionType, groupRec, userRec, isRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
-            No
-          </Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <ButtonGroup className="actions">
-        <OverlayTrigger
-          animation
-          placement="right"
-          root
-          trigger="focus"
-          overlay={popover}
-        >
-          <Button bsSize="xsmall" bsStyle="danger" >
-            <i className="fa fa-trash-o" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-  }
-}
diff --git a/app/packs/src/admin/GenericAdminModal.js b/app/packs/src/admin/GenericAdminModal.js
deleted file mode 100644
index 7612aac14..000000000
--- a/app/packs/src/admin/GenericAdminModal.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Modal } from 'react-bootstrap';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-
-export default class GenericAdminModal extends Component {
-  constructor(props) {
-    super(props);
-    this.handleAuthAdmin = this.handleAuthAdmin.bind(this);
-  }
-
-  handleAuthAdmin(user, type, value) {
-    const { fnCb } = this.props;
-    const params = {
-      user_id: user.id,
-      auth_generic_admin: { }
-    };
-    params.auth_generic_admin[type] = !value;
-    AdminFetcher.updateAccount(params)
-      .then(() => fnCb(user));
-  }
-
-  render() {
-    const { user, fnShowModal } = this.props;
-    const { elements, segments, datasets } = (user.generic_admin || {});
-    return (
-      <Modal show onHide={() => fnShowModal(false)}>
-        <Modal.Header closeButton>
-          <Modal.Title>{`Grant/Revoke Generic Admin (user: ${user.name})`}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Button bsSize="sm" bsStyle={elements ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'elements', elements)}>{elements ? 'Revoke' : 'Grant'} Generic Elements</Button>&nbsp;
-          <Button bsSize="sm" bsStyle={segments ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'segments', segments)}>{segments ? 'Revoke' : 'Grant'} Generic Segments</Button>&nbsp;
-          <Button bsSize="sm" bsStyle={datasets ? 'warning' : 'default'} onClick={() => this.handleAuthAdmin(user, 'datasets', datasets)}>{datasets ? 'Revoke' : 'Grant'} Generic Datasets</Button>
-          <ul>
-            <li>Currently {elements ? '' : 'NOT'} acting as the administrator of the Generc Elements</li>
-            <li>Currently {segments ? '' : 'NOT'} acting as the administrator of the Generc Segments</li>
-            <li>Currently {datasets ? '' : 'NOT'} acting as the administrator of the Generc Datasets</li>
-          </ul>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-GenericAdminModal.propTypes = {
-  user: PropTypes.object.isRequired, fnShowModal: PropTypes.func.isRequired, fnCb: PropTypes.func
-};
-GenericAdminModal.defaultProps = { fnCb: () => {} };
diff --git a/app/packs/src/admin/GenericElementAdmin.js b/app/packs/src/admin/GenericElementAdmin.js
deleted file mode 100644
index 81238d746..000000000
--- a/app/packs/src/admin/GenericElementAdmin.js
+++ /dev/null
@@ -1,1013 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import LoadingModal from '../components/common/LoadingModal';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import { ElementField } from '../components/elements/ElementField';
-import LoadingActions from '../components/actions/LoadingActions';
-import AttrNewModal from './generic/AttrNewModal';
-import AttrEditModal from './generic/AttrEditModal';
-import AttrCopyModal from './generic/AttrCopyModal';
-import FieldCondEditModal from './generic/FieldCondEditModal';
-import TemplateJsonModal from './generic/TemplateJsonModal';
-import LayerAttrEditModal from './generic/LayerAttrEditModal';
-import LayerAttrNewModal from './generic/LayerAttrNewModal';
-import SelectAttrNewModal from './generic/SelectAttrNewModal';
-import Preview from './generic/Preview';
-import UploadModal from './generic/UploadModal';
-import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
-
-const validateKlass = klass => (/\b[a-z]{3,5}\b/g.test(klass));
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-const validateInput = (element) => {
-  if (element.name === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element.' });
-    return false;
-  }
-  if (element.klass_prefix === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Prefix.' });
-    return false;
-  }
-  if (element.label === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Element Label.' });
-    return false;
-  }
-  if (element.icon_name === '') {
-    notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'Please input Icon.' });
-    return false;
-  }
-  return true;
-};
-
-export default class GenericElementAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      element: {},
-      newFieldKey: '',
-      newOptionKey: '',
-      layerKey: '',
-      fieldObj: {},
-      layer: {},
-      selectOptions: [],
-      unitsSystem: {},
-      showPropModal: false,
-      showNewLayer: false,
-      showEditLayer: false,
-      showAddSelect: false,
-      showNewKlass: false,
-      showEditKlass: false,
-      showCopyKlass: false,
-      showFieldCond: false,
-      showUpload: false,
-      showJson: false,
-      propTabKey: 1,
-      revisions: [],
-    };
-
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.fetchElements = this.fetchElements.bind(this);
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.handlePropClose = this.handlePropClose.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    this.onInputNewOption = this.onInputNewOption.bind(this);
-    this.addLayer = this.addLayer.bind(this);
-    this.addSelection = this.addSelection.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    this.newKlass = this.newKlass.bind(this);
-    this.editKlass = this.editKlass.bind(this);
-    this.copyKlass = this.copyKlass.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.updSubField = this.updSubField.bind(this);
-    this.updLayerSubField = this.updLayerSubField.bind(this);
-    this.handleSelectClose = this.handleSelectClose.bind(this);
-    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
-    this.handleLayerClose = this.handleLayerClose.bind(this);
-    this.handleNewKlassClose = this.handleNewKlassClose.bind(this);
-    this.handleKlassClose = this.handleKlassClose.bind(this);
-    this.handleCopyKlassClose = this.handleCopyKlassClose.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
-    this.handleCreateKlass = this.handleCreateKlass.bind(this);
-    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
-    this.handleActivateKlass = this.handleActivateKlass.bind(this);
-    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.onOptionInputChange = this.onOptionInputChange.bind(this);
-    this.showJsonModal = this.showJsonModal.bind(this);
-    this.hideJsonModal = this.hideJsonModal.bind(this);
-    this.handleUpdateJson = this.handleUpdateJson.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleUploadShow = this.handleUploadShow.bind(this);
-    this.handleUploadClose = this.handleUploadClose.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    this.fetchConfigs();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onOptionInputChange(event, selectKey, optionKey) {
-    const { element } = this.state;
-    const options = (element &&
-      element.properties_template && element.properties_template.select_options[selectKey] && element.properties_template.select_options[selectKey].options) || [];
-    const idx = findIndex(options, o => o.key === optionKey);
-    const op = {};
-    op.key = optionKey;
-    op.label = event.target.value;
-    options.splice(idx, 1, op);
-    this.setState({ element });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
-  }
-
-  onFieldSubFieldChange(lk, f, cb) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobj = (fields || []).find(o => o.field === f.field);
-      if (Object.keys(fobj).length > 0) {
-        const idx = (fields || []).findIndex(o => o.field === f.field);
-        fields.splice(idx, 1, f);
-        element.properties_template.layers[lk].fields = fields;
-        this.setState({ element }, cb);
-      }
-    }
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    if (typeof layer === 'undefined' || layer == null) return;
-
-    const { fields } = layer;
-
-    if (fields == null || fields.length === 0) return;
-
-    const fobj = fields.find(e => e.field === fe);
-    if (Object.keys(fobj).length === 0) return;
-
-    switch (fc) {
-      case 'required':
-        fobj.required = !orig;
-        break;
-      default:
-        fobj[`${fc}`] = value;
-        break;
-    }
-    const idx = findIndex(fields, o => o.field === fe);
-    fields.splice(idx, 1, fobj);
-    element.properties_template.layers[lk].fields = fields;
-    this.setState({ element });
-  }
-
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
-  }
-
-  onInputNewOption(e) {
-    this.setState({ newOptionKey: e.target.value });
-  }
-
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
-  }
-
-  updSubField(layerKey, field, cb) {
-    this.onFieldSubFieldChange(layerKey, field, cb);
-  }
-
-  updLayerSubField(layerKey, layer) {
-    const { element } = this.state;
-    element.properties_template.layers[`${layerKey}`] = layer;
-    this.setState({ element });
-  }
-
-  handleFieldCondClose() {
-    this.setState({ showFieldCond: false });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-  addLayer() {
-    this.setState({ showNewLayer: true });
-  }
-
-  addSelection() {
-    this.setState({ showAddSelect: true });
-  }
-
-  showJsonModal(element) {
-    this.setState({ element, showJson: true });
-  }
-
-  hideJsonModal() {
-    this.setState({ showJson: false });
-  }
-
-  editLayer(e) {
-    this.setState({ showEditLayer: true, layerKey: e.layerKey });
-  }
-
-  newKlass() {
-    this.setState({ showNewKlass: true });
-  }
-
-  editKlass(element) {
-    this.setState({ showEditKlass: true, element });
-  }
-
-  copyKlass(element) {
-    this.setState({ showCopyKlass: true, element });
-  }
-
-  handleUploadShow() {
-    this.setState({ showUpload: true });
-  }
-
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
-  }
-
-  newOption(key) {
-    const { element, newOptionKey } = this.state;
-
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    const selectObj = (element && element.properties_template
-      && element.properties_template.select_options[key]
-      && element.properties_template.select_options[key].options) || [];
-    const dupops = filter(selectObj, o => o.key === newOptionKey);
-    if (dupops && dupops.length > 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const newOption = { key: newOptionKey, label: newOptionKey };
-    selectObj.push(newOption);
-    element.properties_template.select_options[key].options = selectObj;
-    this.setState({ element });
-  }
-
-  handleNewLayerClose() {
-    this.setState({ showNewLayer: false });
-  }
-
-  handleLayerClose() {
-    this.setState({ showEditLayer: false });
-  }
-
-  handleNewKlassClose() {
-    this.setState({ showNewKlass: false });
-  }
-
-  handleKlassClose() {
-    this.setState({ showEditKlass: false });
-  }
-
-  handleCopyKlassClose() {
-    this.setState({ showCopyKlass: false });
-  }
-
-  handleUploadClose() {
-    this.setState({ showUpload: false });
-  }
-
-  handleSelectClose() {
-    this.setState({ showAddSelect: false });
-  }
-
-  handleAddSelect(selectName) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      const sos = element.properties_template.select_options && element.properties_template.select_options;
-      sos[selectName] = { desc: selectName, options: [] };
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, showAddSelect: false, selectOptions });
-    }
-    return false;
-  }
-
-  handleCreateLayer(layer) {
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
-      return;
-    }
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showNewLayer: false, element, layerKey: layer.key });
-  }
-
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates)) return;
-    const { element } = this.state;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    layer = { ...layer, ...updates };
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showEditLayer: false, element });
-  }
-
-  handleCreateKlass(element) {
-    if (!validateInput(element)) return;
-    if (!validateKlass(element.name)) {
-      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is invalid, please try a different one.' });
-      return;
-    }
-    const { elements } = this.state;
-    const existKlass = elements.filter(el => el.name === element.name);
-    if (existKlass.length > 0) {
-      notification({ title: `Element [${element.name}]`, lvl: 'error', msg: 'This Element is already taken. Please choose another one.' });
-      return;
-    }
-    AdminFetcher.createElementKlass(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Element [${element.name}]`, lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Created successfully' });
-          this.handleNewKlassClose();
-          this.handleCopyKlassClose();
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleUpdateKlass(element, updates) {
-    const inputs = { ...element, ...updates };
-    if (!validateInput(inputs)) return;
-    AdminFetcher.updateElementKlass(inputs)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: `Element [${inputs.name}]`, lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Element [${inputs.name}]`, lvl: 'info', msg: 'Updated successfully' });
-          this.handleKlassClose();
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleActivateKlass(id, isActive) {
-    AdminFetcher.activeInActiveElementKlass({ klass_id: id, is_active: !isActive })
-      .then((result) => {
-        notification({ title: `Element [${result.name}]`, lvl: 'info', msg: `Element is ${result.is_active ? 'active' : 'deactive'} now` });
-        this.handleKlassClose();
-        this.fetchElements();
-      });
-  }
-
-  handleDeleteKlass(element) {
-    AdminFetcher.deleteElementKlass({ klass_id: element.id })
-      .then(() => {
-        notification({ title: `Element [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
-        this.handleKlassClose();
-        this.fetchElements();
-      });
-  }
-
-  handleUpdateJson(propertiesTemplate) {
-    const { element } = this.state;
-    element.properties_template = propertiesTemplate;
-    this.setState({
-      element,
-      showJson: false
-    });
-    this.handleSubmit(false);
-  }
-
-  fetchConfigs() {
-    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
-  handlePropClose() {
-    this.setState({ showPropModal: false });
-  }
-
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
-      AdminFetcher.fetchKlassRevisions(element.id, 'ElementKlass')
-        .then((result) => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        });
-    }
-  }
-
-  delRevision(params) {
-    const { element } = this.state;
-    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'ElementKlass' })
-      .then((response) => {
-        if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
-        } else {
-          this.fetchRevisions();
-        }
-      });
-  }
-
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({
-        element, selectOptions, showPropModal: true, propTabKey: 1
-      });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.setState({ showUpload: false });
-      notification({ title: `Upload Template for Element [${element.name}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, showUpload: false });
-      notification({ title: `Upload template to Element [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
-    }
-  }
-
-  fetchElements() {
-    AdminFetcher.fetchElementKlasses()
-      .then((result) => {
-        this.setState({ elements: result.klass.filter(k => k.is_generic) });
-      });
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = ['integer', 'text'].includes(fd.type) ? fd.required : false;
-        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
-        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-
-    element.is_release = isRelease;
-    AdminFetcher.updateGElTemplates(element)
-      .then((result) => {
-        if (isRelease === true) {
-          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
-        } else {
-          notification({ title: `Update Element [${element.name}] template`, lvl: 'info', msg: 'Saved successfully' });
-        }
-        this.fetchElements();
-        this.setState({ element: result }, () => LoadingActions.stop());
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const options = element.properties_template.select_options[delRoot];
-      const idx = findIndex(options, o => o.key === delKey);
-      options.splice(idx, 1);
-    } else if (delStr === 'Layer') {
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    } else {
-      //
-    }
-    this.setState({ element });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
-    } else {
-      msg = `remove ???: ${delStr}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderSelectOptions() {
-    const { element } = this.state;
-    const selects = [];
-
-    Object.keys(element.properties_template.select_options).forEach((key) => {
-      const soptions = (element.properties_template.select_options[key] && element.properties_template.select_options[key].options) || [];
-      const options = (soptions || []).map(f => (
-        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
-          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}_${key}`}>
-            <InputGroup>
-              <InputGroup.Addon>{f.key}</InputGroup.Addon>
-              <FormControl
-                type="text"
-                name="lf_label"
-                defaultValue={f.label}
-                onChange={event => this.onOptionInputChange(event, key, f.key)}
-              />
-              <InputGroup.Button>
-                {this.renderDeleteButton('Option', f.key, key)}
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </div>
-      ));
-
-      const snode = (
-        <Panel key={`selection_option_${key}`} className="panel_generic_properties" defaultExpanded>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {key}
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {this.renderDeleteButton('Select', key, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="input_newOption"
-                    onChange={e => this.onInputNewOption(e)}
-                    placeholder="Input new option"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
-                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
-                    </OverlayTrigger>
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              {options}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      selects.push(snode);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Select Lists
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body>
-            <div>
-              { selects }
-            </div>
-          </Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          layer={layer}
-          select_options={selectOptions}
-          onDrop={e => this.onFieldDrop(e)}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onFieldSubFieldChange={this.onFieldSubFieldChange}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnCond}
-                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
-              {fields}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderPropPanel() {
-    const {
-      element, showPropModal, revisions, propTabKey
-    } = this.state;
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="uncontrolled-tab-example" onSelect={this.propTabSelect}>
-          <Tab eventKey={1} title="Template">
-            <Panel show={showPropModal.toString()}>
-              <Panel.Heading>
-                <b>{`Template of Element [${element.name}]`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <ButtonTooltip tip="Upload Element template in JSON format" fnClick={this.handleUploadShow} element={element} place="top" fa="fa-upload" />&nbsp;
-                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}> {this.renderProperties()} </Col>
-                  <Col sm={4}> {this.renderSelectOptions()} </Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-      );
-    }
-    return (<div />);
-  }
-
-  renderList() {
-    const { elements, element } = this.state;
-    const els = orderBy(elements, ['is_active', 'name', 'klass_prefix'], ['desc', 'asc', 'asc']);
-    const tbody = els && els.map((e, idx) => (
-      <tbody key={`tbody_${e.id}`}>
-        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', backgroundColor: 'white', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
-          <td>{idx + 1}</td>
-          <td>
-            <ButtonTooltip tip="copy to ..." fa="fa fa-clone" element={e} fnClick={this.copyKlass} />
-            &nbsp;
-            <ButtonTooltip tip="Edit Element attributes" element={e} fnClick={this.editKlass} />
-            &nbsp;
-          </td>
-          <td>{e.name}</td>
-          <td>{e.klass_prefix}</td>
-          <td>
-            {
-              e.is_active ? <i className="fa fa-check" aria-hidden="true" style={{ color: 'green' }} /> : <i className="fa fa-ban" aria-hidden="true" style={{ color: 'red' }} />
-            }
-          </td>
-          <td>{e.label}</td>
-          <td><i className={e.icon_name} /></td>
-          <td>{e.desc}</td>
-          <td>
-            <ButtonTooltip tip="Edit Element template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
-            <ButtonTooltip tip="Edit Element template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
-          </td>
-          <td>{e.released_at} (UTC)</td>
-        </tr>
-      </tbody>
-    ));
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Table responsive condensed hover>
-            <thead>
-              <tr style={{ backgroundColor: '#ddd' }}>
-                <th width="4%">#</th>
-                <th width="6%">Actions</th>
-                <th width="10%">Element</th>
-                <th width="6%">Prefix</th>
-                <th width="8%">Active</th>
-                <th width="12%">Element Label</th>
-                <th width="6%">Icon</th>
-                <th width="16%">Description</th>
-                <th width="12%">Template</th>
-                <th width="18%">Released at</th>
-              </tr>
-            </thead>
-            { tbody }
-          </Table>
-        </Panel.Heading>
-      </Panel>
-    );
-  }
-
-  render() {
-    const { element, layerKey } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
-
-    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
-    return (
-      <div>
-        <Button bsStyle="primary" bsSize="small" onClick={() => this.newKlass()}>
-          New Element&nbsp;<i className="fa fa-plus" aria-hidden="true" />
-        </Button>
-        &nbsp;
-        <br />
-        <div className="list-container-bottom">
-          { this.renderList() }
-          { this.renderPropPanel() }
-          <SelectAttrNewModal
-            showModal={this.state.showAddSelect}
-            fnClose={this.handleSelectClose}
-            fnCreate={this.handleAddSelect}
-          />
-          <LayerAttrNewModal
-            showModal={this.state.showNewLayer}
-            fnClose={this.handleNewLayerClose}
-            fnCreate={this.handleCreateLayer}
-          />
-          <LayerAttrEditModal
-            showModal={this.state.showEditLayer}
-            layer={layer}
-            fnClose={this.handleLayerClose}
-            fnUpdate={this.handleUpdateLayer}
-          />
-          <TemplateJsonModal
-            showModal={this.state.showJson}
-            fnClose={this.hideJsonModal}
-            fnUpdate={this.handleUpdateJson}
-            element={this.state.element}
-          />
-          <AttrNewModal
-            content="Element"
-            showModal={this.state.showNewKlass}
-            fnClose={this.handleNewKlassClose}
-            fnCreate={this.handleCreateKlass}
-          />
-          <AttrEditModal
-            content="Element"
-            showModal={this.state.showEditKlass}
-            element={this.state.element}
-            fnClose={this.handleKlassClose}
-            fnDelete={this.handleDeleteKlass}
-            fnActivate={this.handleActivateKlass}
-            fnUpdate={this.handleUpdateKlass}
-          />
-          <FieldCondEditModal
-            showModal={this.state.showFieldCond}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.handleFieldCondClose}
-          />
-          <AttrCopyModal
-            content="Element"
-            showModal={this.state.showCopyKlass}
-            element={this.state.element}
-            fnClose={this.handleCopyKlassClose}
-            fnCopy={this.handleCreateKlass}
-          />
-          <UploadModal
-            content="Generic Elements"
-            klass="ElementKlass"
-            showModal={this.state.showUpload}
-            fnClose={this.handleUploadClose}
-            fnUpload={this.handleUploadTemplate}
-          />
-        </div>
-        <LoadingModal />
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/GroupsDevices.js b/app/packs/src/admin/GroupsDevices.js
deleted file mode 100644
index 96fa4df06..000000000
--- a/app/packs/src/admin/GroupsDevices.js
+++ /dev/null
@@ -1,809 +0,0 @@
-import React from 'react';
-import { Modal, Panel, Table, Button, FormGroup, ControlLabel, Form, Tooltip, ButtonGroup, FormControl, Popover, OverlayTrigger, Col, Row } from 'react-bootstrap';
-import Select from 'react-select';
-import moment from 'moment';
-import { findIndex, filter } from 'lodash';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-
-import AdminGroupElement from './AdminGroupElement';
-import AdminDeviceElement from './AdminDeviceElement';
-export default class GroupsDevices extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      groups: [],
-      devices: [],
-      showModal: false,
-      showCreateModal: false,
-      showDeviceMetadataModal: false,
-      rootType: '', // Group, Device
-      actionType: 'Person', // Person Group Device Adm
-      root: {},
-      device: {},
-      deviceMetadata: {
-        dates: []
-      }
-    };
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.loadUserByNameType = this.loadUserByNameType.bind(this);
-    this.handleShowModal = this.handleShowModal.bind(this);
-    this.handleShowDeviceMetadataModal = this.handleShowDeviceMetadataModal.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleCloseDeviceMetadata = this.handleCloseDeviceMetadata.bind(this);
-    this.handleShowCreateModal = this.handleShowCreateModal.bind(this);
-    this.handleCloseGroup = this.handleCloseGroup.bind(this);
-    this.handleGroupChange = this.handleGroupChange.bind(this);
-    this.handleDeviceChange = this.handleDeviceChange.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetch('Group');
-    this.fetch('Device');
-  }
-
-  componentWillUnmount() {
-  }
-
-  handleGroupChange() {
-    this.fetch('Group');
-  }
-
-  handleDeviceChange() {
-    this.fetch('Device');
-  }
-
-  setGroupAdmin(groupRec, userRec, setAdmin = true) {
-    const { groups } = this.state;
-    const params = {
-      action: 'NodeAdm',
-      rootType: 'Group',
-      actionType: 'Adm',
-      id: groupRec.id,
-      admin_id: userRec.id,
-      set_admin: setAdmin
-    };
-    AdminFetcher.updateGroup(params)
-      .then((result) => {
-        if (setAdmin) {
-          groupRec.admins.splice(1, 0, userRec);
-        } else {
-          const usrIdx = findIndex(groupRec.admins, o => o.id === userRec.id);
-          groupRec.admins.splice(usrIdx, 1);
-        }
-        const idx = findIndex(groups, o => o.id === groupRec.id);
-        groups.splice(idx, 1, groupRec);
-        this.setState({ groups });
-      });
-  }
-
-  fetch(type) {
-    AdminFetcher.fetchGroupsDevices(type)
-      .then((result) => {
-        switch (type) {
-          case 'Group':
-            this.setState({ groups: result.list });
-            break;
-          case 'Device':
-            this.setState({ devices: result.list });
-            break;
-          default:
-            break;
-        }
-      });
-  }
-
-  fetchDevices(type = 'Device') {
-    AdminFetcher.fetchGroupsDevices(type)
-      .then((result) => {
-        this.setState({
-          devices: result.list
-        });
-      });
-  }
-
-  handlefetchDeviceMetadataByDeviceId(deviceID) {
-    AdminFetcher.fetchDeviceMetadataByDeviceId(deviceID)
-      .then((result) => {
-        if (result.device_metadata) {
-          this.setState({
-            deviceMetadata: result.device_metadata
-          });
-        }
-      });
-  }
-
-  handleShowModal(root, rootType, actionType) {
-    this.setState({
-      showModal: true,
-      actionType,
-      rootType,
-      root
-    });
-  }
-
-  handleClose() {
-    this.setState({
-      showModal: false,
-      rootType: '',
-      actionType: '',
-      root: null
-    });
-  }
-
-  handleShowDeviceMetadataModal(device) {
-    this.setState({
-      showDeviceMetadataModal: true,
-      device
-    });
-    this.handlefetchDeviceMetadataByDeviceId(device.id);
-  }
-
-  handleCloseDeviceMetadata() {
-    this.setState({
-      showDeviceMetadataModal: false,
-      device: {},
-      deviceMetadata: {}
-    });
-  }
-
-  deviceMetadataDoiExists() {
-    return this.state.deviceMetadata.doi
-  }
-
-  handleShowCreateModal(rootType) {
-    this.setState({
-      showCreateModal: true,
-      rootType
-    });
-  }
-
-  handleCloseGroup() {
-    this.setState({ showCreateModal: false });
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  loadUserByNameType(input) {
-    const { actionType } = this.state;
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return AdminFetcher.fetchUsersByNameType(input, actionType)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.user_type == actionType)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  createGroup() {
-    const { groups, devices, rootType } = this.state;
-    const param = {
-      rootType,
-      first_name: this.firstInput.value.trim(),
-      last_name: this.lastInput.value.trim(),
-      name_abbreviation: this.abbrInput.value.trim()
-    };
-
-    if (this.emailInput.value.trim().length > 0) {
-      param.email = this.emailInput.value.trim();
-    }
-
-    AdminFetcher.createGroupDevice(param)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          switch (rootType) {
-            case 'Group':
-              groups.push(result);
-              this.setState({
-                groups,
-                showCreateModal: false
-              });
-              break;
-            case 'Device':
-              devices.push(result);
-              this.setState({
-                devices,
-                showCreateModal: false
-              });
-              break;
-            default:
-              break;
-          }
-        }
-      });
-  }
-
-  syncDeviceMetadataFromDataCite(deviceId) {
-    AdminFetcher.postDeviceMetadata({
-      doi: this.doi.value.trim(),
-      device_id: deviceId
-    }).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      } else if (result.device_metadata) {
-        this.setState({
-          deviceMetadata: result.device_metadata
-        });
-        this.doi.value = result.device_metadata.doi;
-      }
-    });
-  }
-
-  syncDeviceMetadataToDataCite(deviceId) {
-    AdminFetcher.syncDeviceMetadataToDataCite({
-      device_id: deviceId
-    }).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      } else if (result.device_metadata) {
-        this.setState({
-          deviceMetadata: result.device_metadata
-        });
-      }
-    });
-  }
-
-  saveDeviceMetadata(deviceId) {
-    // TODO: add Validations
-    AdminFetcher.postDeviceMetadata({
-      // TODO: add more Attributes:
-      // t.string   "publisher"
-
-      device_id: deviceId,
-      data_cite_state: this.state.deviceMetadata.data_cite_state,
-      url: this.url.value.trim(),
-      landing_page: this.landing_page.value.trim(),
-      name: this.name.value.trim(),
-      description: this.description.value.trim(),
-      publication_year: this.publication_year.value.trim(),
-      dates: this.state.deviceMetadata.dates
-
-    }).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      } else if (result.device_metadata) {
-        this.setState({
-          deviceMetadata: result.device_metadata
-        });
-      }
-    });
-  }
-
-  addDeviceMetadataDate() {
-    this.setState((state) => {
-      const newDateItem = {
-        date: '',
-        dateType: ''
-      };
-      const { deviceMetadata } = state;
-      const currentDates = deviceMetadata.dates ? deviceMetadata.dates : [];
-      const newDates = currentDates.concat(newDateItem);
-      deviceMetadata.dates = newDates;
-
-      return {
-        deviceMetadata
-      };
-    });
-  }
-
-  removeDeviceMetadataDate(index) {
-    this.setState((state) => {
-      const { deviceMetadata } = state;
-      const currentDates = deviceMetadata.dates ? deviceMetadata.dates : [];
-      currentDates.splice(index, 1);
-      deviceMetadata.dates = currentDates;
-
-      return deviceMetadata;
-    });
-  }
-
-  updateDeviceMetadataDate(index, fieldname, value) {
-    this.setState((state) => {
-      const { deviceMetadata } = state;
-      deviceMetadata.dates[index][fieldname] = value;
-
-      return deviceMetadata;
-    });
-  }
-
-  updateDeviceMetadataDataCiteState(value) {
-    this.setState((state) => {
-      const { deviceMetadata } = state;
-      deviceMetadata.data_cite_state = value;
-
-      return deviceMetadata;
-    });
-  }
-
-  confirmDelete(rootType, actionType, groupRec, userRec, isRoot = false) {
-    const { groups, devices } = this.state;
-    const rmUsers = userRec == null ? [] : [userRec.id];
-
-    const params = {
-      action: isRoot ? 'RootDel' : 'NodeDel',
-      rootType,
-      actionType,
-      id: groupRec.id,
-      destroy_obj: isRoot,
-      rm_users: rmUsers
-    };
-
-    AdminFetcher.updateGroup(params)
-      .then((result) => {
-        switch (rootType) {
-          case 'Group':
-            if (isRoot === true) {
-              this.setState({
-                groups: filter(this.state.groups, o => o.id != groupRec.id),
-              });
-            } else {
-              const idx = findIndex(groups, o => o.id === result.root.id);
-              groups.splice(idx, 1, result.root);
-              this.setState({ groups });
-            }
-            this.fetch('Device');
-            break;
-          case 'Device':
-            if (isRoot === true) {
-              this.setState({
-                devices: filter(this.state.devices, o => o.id !== groupRec.id),
-              });
-            } else {
-              const idx = findIndex(devices, o => o.id === result.root.id);
-              devices.splice(idx, 1, result.root);
-              this.setState({ devices });
-            }
-            this.fetch('Group');
-            break;
-          default:
-            break;
-        }
-      });
-  }
-
-  addToRoot(groupRec) {
-    const {
-      selectedUsers,
-      groups,
-      devices,
-      rootType,
-      actionType
-    } = this.state;
-
-    const userIds = [];
-    selectedUsers.map((g) => {
-      userIds.push(g.value);
-      return true;
-    });
-
-    const params = {
-      action: 'NodeAdd',
-      rootType,
-      actionType,
-      id: groupRec.id,
-      add_users: userIds
-    };
-    let idx = -1;
-    AdminFetcher.updateGroup(params)
-      .then((result) => {
-        switch (rootType) {
-          case 'Group':
-            idx = findIndex(groups, o => o.id === result.root.id);
-            groups.splice(idx, 1, result.root);
-            this.fetch('Device');
-            break;
-          case 'Device':
-            idx = findIndex(devices, o => o.id === result.root.id);
-            devices.splice(idx, 1, result.root);
-            this.fetch('Group');
-            break;
-          default:
-            break;
-        }
-        this.setState({ selectedUsers: null, showModal: false });
-      });
-  }
-
-  renderGroups() {
-    const { groups } = this.state;
-    const adminIcon = (<OverlayTrigger placement="top" overlay={<Tooltip id="admin">Group Administrator</Tooltip>}><i className="fa fa-key" /></OverlayTrigger>);
-    let tbody = '';
-    if (Object.keys(groups).length <= 0) {
-      tbody = '';
-    } else {
-      tbody = groups.map((g, idx) => (
-        <AdminGroupElement groupElement={g} index={idx} currentState={this.state}
-        onChangeGroupData={this.handleGroupChange} onShowModal={this.handleShowModal}></AdminGroupElement>
-      ));
-    }
-
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Panel.Title>
-            Group List &nbsp;
-            ({groups.length}) &nbsp;
-            <Button bsStyle="default" onClick={() => this.handleShowCreateModal('Group')}>Add New Group</Button>
-          </Panel.Title>
-        </Panel.Heading>
-        <Table responsive condensed hover>
-          <thead>
-            <tr style={{ backgroundColor: '#ddd' }}>
-              <th width="5%">#</th>
-              <th width="25%">Actions</th>
-              <th width="20%">Name</th>
-              <th width="10%">Kürzel</th>
-              <th width="20%">Admin by</th>
-              <th width="20%">Email</th>
-            </tr>
-          </thead>
-          { tbody }
-        </Table>
-      </Panel>
-    );
-  }
-
-  renderDevices() {
-    const { devices } = this.state;
-
-    let tbody = '';
-    if (typeof (devices) !== 'undefined' && Object.keys(devices).length <= 0) {
-      tbody = '';
-    } else {
-      tbody = devices && devices.map((device, idx) => (
-        <AdminDeviceElement deviceElement={device} index={idx} currentState={this.state}
-        onChangeDeviceData={this.handleDeviceChange} onShowModal={this.handleShowModal} onShowDeviceMetadataModal={this.handleShowDeviceMetadataModal}></AdminDeviceElement>
-      ));
-    }
-
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Panel.Title>
-            Device List &nbsp; ({devices.length}) &nbsp;
-            <Button bsStyle="default" onClick={() => this.handleShowCreateModal('Device')}>Add New Device</Button>
-          </Panel.Title>
-        </Panel.Heading>
-        <Table responsive condensed hover>
-          <thead>
-            <tr style={{ backgroundColor: '#ddd' }}>
-              <th width="4%">#</th>
-              <th width="28%">Actions</th>
-              <th width="28%">Name</th>
-              <th width="12%">Kürzel</th>
-              <th width="28%">Email</th>
-            </tr>
-          </thead>
-          { tbody }
-        </Table>
-      </Panel>
-    );
-  }
-
-  renderCreateModal() {
-    const { showCreateModal, rootType } = this.state;
-    const title = (rootType === 'Group') ? 'Add new group' : 'Add new device';
-    return (
-      <Modal
-        show={showCreateModal}
-        onHide={this.handleCloseGroup}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>
-                {title}
-              </Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Form>
-                <FormGroup controlId="formInlineName">
-                  <ControlLabel>Name*</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    inputRef={(m) => { this.firstInput = m; }}
-                    placeholder="eg: AK"
-                  />
-                </FormGroup>
-                <FormGroup controlId="formInlineName">
-                  <FormControl
-                    type="text"
-                    inputRef={(m) => { this.lastInput = m; }}
-                    placeholder="J. Moriarty"
-                  />
-                </FormGroup>&nbsp;&nbsp;
-                <FormGroup controlId="formInlineNameAbbr">
-                  <ControlLabel>Name abbreviation* </ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    inputRef={(m) => { this.abbrInput = m; }}
-                    placeholder="AK-JM"
-                  />
-                </FormGroup>&nbsp;&nbsp;
-                <FormGroup controlId="formInlineEmail">
-                  <ControlLabel>Email</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    inputRef={(m) => { this.emailInput = m; }}
-                    placeholder="eg: abc@kit.edu"
-                  />
-                </FormGroup>
-                <Button bsSize="xsmall" bsStyle="success" onClick={() => this.createGroup()}>
-                  Create new { rootType === 'Group' ? 'group' : 'device' }
-                </Button>
-              </Form>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  renderDeviceMetadataModal() {
-    const { showDeviceMetadataModal, device, deviceMetadata } = this.state;
-    const title = 'Edit Device Metadata';
-    return (
-      <Modal
-        show={showDeviceMetadataModal}
-        onHide={this.handleCloseDeviceMetadata}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Edit {device.name} Metadata</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>
-                {title}
-              </Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Form>
-                {!this.deviceMetadataDoiExists() &&
-                  <p className="text-center">Get Metadata from DataCite</p>
-                }
-                <FormGroup controlId="metadataFormDOI">
-                  <ControlLabel>DOI*</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.doi}
-                    inputRef={(m) => { this.doi = m; }}
-                    placeholder="10.*****/**********"
-                    readOnly={this.deviceMetadataDoiExists()}
-                  />
-                </FormGroup>
-                {!this.deviceMetadataDoiExists() &&
-                  <Col smOffset={0} sm={12}>
-                    <Button className="pull-right" bsStyle="danger" onClick={() => this.syncDeviceMetadataFromDataCite(device.id)}>
-                      Sync from DataCite
-                    </Button>
-                  </Col>
-                }
-                {!this.deviceMetadataDoiExists() &&
-                  <p className="text-center">Or create Metadata and sync to DataCite</p>
-                }
-
-                <FormGroup controlId="metadataFormState">
-                  <ControlLabel>State*</ControlLabel>
-                  <FormControl
-                    componentClass="select"
-                    value={deviceMetadata.data_cite_state}
-                    onChange={event => this.updateDeviceMetadataDataCiteState(event.target.value)}
-                    inputRef={(m) => { this.dataCiteState = m; }}
-                  >
-                    <option value="draft">Draft</option>
-                    <option value="registered">Registered</option>
-                    <option value="findable">Findable</option>
-                  </FormControl>
-                </FormGroup>
-
-                <FormGroup controlId="metadataFormURL">
-                  <ControlLabel>URL*</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.url}
-                    inputRef={(m) => { this.url = m; }}
-                    placeholder="https://<device.url>"
-                  />
-                </FormGroup>
-
-                <FormGroup controlId="metadataFormLandingPage">
-                  <ControlLabel>Landing Page*</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.landing_page}
-                    inputRef={(m) => { this.landing_page = m; }}
-                    placeholder="https://<device.landing.page>"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormName">
-                  <ControlLabel>Name*</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.name}
-                    inputRef={(m) => { this.name = m; }}
-                    placeholder="Name"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormPublicationYear">
-                  <ControlLabel>Publication Year*</ControlLabel>
-                  <FormControl
-                    type="number"
-                    defaultValue={deviceMetadata.publication_year}
-                    inputRef={(m) => { this.publication_year = m; }}
-                    placeholder="Publication Year e.g. '2020'"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormDescription">
-                  <ControlLabel>Description</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.description}
-                    inputRef={(m) => { this.description = m; }}
-                    placeholder="Description"
-                  />
-                </FormGroup>
-
-                <ControlLabel style={{ marginTop: 5 }}>Dates</ControlLabel>
-                {deviceMetadata.dates && deviceMetadata.dates.map((dateItem, index) => (
-                  <div key={dateItem.id}>
-                    <Row>
-                      <Col smOffset={0} sm={5}>
-                        <FormGroup>
-                          <ControlLabel>Date</ControlLabel>
-                          <FormControl
-                            type="text"
-                            value={dateItem.date}
-                            placeholder="Date e.g. '2020-01-01'"
-                            onChange={event => this.updateDeviceMetadataDate(index, 'date', event.target.value)}
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col smOffset={0} sm={5}>
-                        <FormGroup>
-                          <ControlLabel>Date Type</ControlLabel>
-                          <FormControl
-                            type="text"
-                            value={dateItem.dateType}
-                            placeholder="DateType e.g. 'Created'"
-                            onChange={event => this.updateDeviceMetadataDate(index, 'dateType', event.target.value)}
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col smOffset={0} sm={2}>
-                        <ControlLabel>Action</ControlLabel>
-                        <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeDeviceMetadataDate(index)}>
-                          <i className="fa fa-trash-o" />
-                        </Button>
-                      </Col>
-                    </Row>
-                  </div>
-                ))}
-                <Row>
-                  <Col smOffset={0} sm={12}>
-                    <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addDeviceMetadataDate()}>
-                      <i className="fa fa-plus" />
-                    </Button>
-                  </Col>
-                </Row>
-
-                <Row>
-                  <Col smOffset={0} sm={12}>
-                    <p className="text-right">
-                      DataCiteVersion: {deviceMetadata.data_cite_version}<br />
-                      DataCiteUpdatedAt: {moment(deviceMetadata.data_cite_updated_at).format('YYYY-MM-DD HH:mm')}<br />
-                    </p>
-                  </Col>
-                </Row>
-              </Form>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-        <Modal.Footer>
-          <Col smOffset={0} sm={6}>
-            <Button className="pull-left" bsStyle="danger" onClick={() => this.syncDeviceMetadataToDataCite(device.id)}>
-              Sync to DataCite
-            </Button>
-          </Col>
-          <Col smOffset={0} sm={6}>
-            <Button className="pull-right" bsStyle="success" onClick={() => this.saveDeviceMetadata(device.id)}>
-              Save Device Metadata
-            </Button>
-          </Col>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-
-  renderModal() {
-    const {
-      showModal,
-      root,
-      rootType,
-      actionType,
-      selectedUsers
-    } = this.state;
-    let title = '';
-    switch (rootType) {
-      case 'Group':
-        if (actionType === 'Person') {
-          title = `Add users to group: ${root.name}`;
-        } else {
-          title = `Add devices to group: ${root.name}`;
-        }
-        break;
-      case 'Device':
-        if (actionType === 'Person') {
-          title = `Add permission on device: ${root.name} to users`;
-        } else {
-          title = `Add permission on device: ${root.name} to groups`;
-        }
-        break;
-      default:
-        break;
-    }
-
-    return (
-      <Modal
-        show={showModal}
-        onHide={this.handleClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>
-                {title}
-              </Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Select.Async
-                multi
-                isLoading
-                backspaceRemoves
-                value={selectedUsers}
-                valueKey="value"
-                labelKey="label"
-                matchProp="name"
-                placeholder="Select ..."
-                promptTextCreator={this.promptTextCreator}
-                loadOptions={this.loadUserByNameType}
-                onChange={this.handleSelectUser}
-              />
-              <Button bsSize="small" type="button" bsStyle="warning" onClick={() => this.addToRoot(root)}>Add</Button>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    return (
-      <div className="list-container-bottom">
-        { this.renderGroups() }
-        { this.renderDevices() }
-        { this.renderModal() }
-        { this.renderCreateModal() }
-        { this.renderDeviceMetadataModal() }
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/MatrixManagement.js b/app/packs/src/admin/MatrixManagement.js
deleted file mode 100644
index b1677bf15..000000000
--- a/app/packs/src/admin/MatrixManagement.js
+++ /dev/null
@@ -1,383 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Checkbox, FormControl, Button, Modal, Col, Form, Tooltip, OverlayTrigger, InputGroup } from 'react-bootstrap';
-import uuid from 'uuid';
-import Select from 'react-select';
-import JSONInput from 'react-json-editor-ajrm';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import NotificationActions from '../components/actions/NotificationActions';
-
-const editTooltip = <Tooltip id="edit_tooltip">Edit Permission</Tooltip>;
-const jsonTooltip = <Tooltip id="edit_tooltip">Edit JSON</Tooltip>;
-const Notification = props =>
-  (
-    NotificationActions.add({
-      title: props.title,
-      message: props.msg,
-      level: props.lvl,
-      position: 'tc',
-      dismissible: 'button',
-      uid: uuid.v4()
-    })
-  );
-
-export default class MatrixManagement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      matrices: [],
-      matrice: {},
-      showEditModal: false,
-      showJsonModal: false,
-      showJsonBtn: false,
-      includeUsers: null,
-      excludeUsers: null
-    };
-    this.edit = this.edit.bind(this);
-    this.editJson = this.editJson.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleIncludeUser = this.handleIncludeUser.bind(this);
-    this.handleExcludeUser = this.handleExcludeUser.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-    this.handleJsonSave = this.handleJsonSave.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleJsonClose = this.handleJsonClose.bind(this);
-    this.onChangeJson = this.onChangeJson.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchMatrices();
-  }
-
-  onChangeJson(e) {
-    const { matrice } = this.state;
-    if (e.error === false) {
-      matrice.configs = e.jsObject;
-      this.setState({ matrice, showJsonBtn: true });
-    }
-  }
-
-  fetchMatrices() {
-    AdminFetcher.fetchMatrices()
-      .then((result) => {
-        this.setState({ matrices: result.matrices });
-      });
-  }
-
-  edit(matrice) {
-    this.setState({
-      showEditModal: true, showJsonModal: false, matrice, includeUsers: null, excludeUsers: null
-    });
-  }
-
-  editJson(matrice) {
-    this.setState({
-      showJsonModal: true, showEditModal: false, matrice
-    });
-  }
-
-  handleChange(val, e) {
-    const { matrice } = this.state;
-    matrice.enabled = (val === true);
-    this.setState({
-      matrice
-    });
-  }
-
-  handleIncludeUser(val) {
-    if (val) { this.setState({ includeUsers: val }); }
-  }
-
-  handleExcludeUser(val) {
-    if (val) { this.setState({ excludeUsers: val }); }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-    return AdminFetcher.fetchUserGroupByName(input)
-      .then((res) => {
-        const usersEntries = res.users.map(u => ({
-          value: u.id,
-          name: u.name,
-          label: `${u.name} (${u.abb})`
-        }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleSave(matrice) {
-    const { includeUsers, excludeUsers } = this.state;
-
-    const params = {
-      id: matrice.id,
-      label: this.m_label.value.trim(),
-      enabled: matrice.enabled,
-    };
-
-    if (includeUsers != null) {
-      params.include_ids = includeUsers && includeUsers.map(u => u.value);
-    }
-
-    if (excludeUsers != null) {
-      params.exclude_ids = excludeUsers && excludeUsers.map(u => u.value);
-    }
-
-    AdminFetcher.updateMatrice(params)
-      .then((result) => {
-        if (result.error) {
-          Notification({ title: `Function [${matrice.name}]`, lvl: 'error', msg: result.error });
-          return false;
-        }
-        Notification({ title: `Function [${matrice.name}]`, lvl: 'info', msg: 'Updated successfully' });
-        this.setState({ showEditModal: false, includeUsers: null, excludeUsers: null, matrice: {} });
-        this.m_label.value = '';
-        this.fetchMatrices();
-        return true;
-      });
-  }
-
-
-  handleJsonSave(matrice) {
-    AdminFetcher.updateMatriceJson({ id: matrice.id, configs: matrice.configs })
-      .then((result) => {
-        if (result.error) {
-          Notification({ title: `Function [${matrice.name}]`, lvl: 'error', msg: result.error });
-          return false;
-        }
-        Notification({ title: `Function [${matrice.name}]`, lvl: 'info', msg: 'JSON Configuration updated successfully' });
-        this.setState({ showJsonModal: false, showJsonBtn: false, matrice: {} });
-        this.fetchMatrices();
-        return true;
-      });
-  }
-
-  handleClose() {
-    this.setState({ showEditModal: false });
-  }
-
-  handleJsonClose() {
-    this.setState({ showJsonModal: false });
-  }
-
-  renderList() {
-    const { matrices } = this.state;
-    const tbody = matrices && matrices.map((e, idx) => (
-      <tbody key={`tbody_${e.id}`}>
-        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={{ fontWeight: 'bold' }}>
-          <td>{idx + 1}</td>
-          <td>
-            <OverlayTrigger placement="bottom" overlay={editTooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle="info"
-                onClick={() => this.edit(e)}
-              >
-                <i className="fa fa-pencil-square-o" />
-              </Button>
-            </OverlayTrigger>
-            &nbsp;
-            <OverlayTrigger placement="bottom" overlay={jsonTooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle="warning"
-                onClick={() => this.editJson(e)}
-              >
-                <i className="fa fa-cog" />
-              </Button>
-            </OverlayTrigger>
-            &nbsp;
-          </td>
-          <td>{e.id}</td>
-          <td>{e.name}</td>
-          <td>{e.label}</td>
-          <td>{e.enabled === true ? 'true' : 'false'}</td>
-          <td>{e.include_users.map(u => u.label).join(', ')}</td>
-          <td>{e.exclude_users.map(u => u.label).join(', ')}</td>
-        </tr>
-      </tbody>
-    ))
-
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Table responsive condensed hover>
-            <thead>
-              <tr style={{ backgroundColor: '#ddd' }}>
-                <th width="2%">#</th>
-                <th width="5%">Actions</th>
-                <th width="3%">ID</th>
-                <th width="10%">Function name</th>
-                <th width="10%">Description</th>
-                <th width="10%">Set globally</th>
-                <th width="40%">Enabled for</th>
-                <th width="20%">Disabled for</th>
-              </tr>
-            </thead>
-            {tbody}
-          </Table>
-        </Panel.Heading>
-      </Panel>
-    );
-  }
-
-  renderEditModal() {
-    const { matrice, includeUsers, excludeUsers } = this.state;
-    let defaultIncludeUsers = [];
-    let defaultExcludeUsers = [];
-
-    if (includeUsers == null) {
-      defaultIncludeUsers = matrice.include_users;
-    } else {
-      defaultIncludeUsers = includeUsers;
-    }
-    if (excludeUsers == null) {
-      defaultExcludeUsers = matrice.exclude_users;
-    } else {
-      defaultExcludeUsers = excludeUsers;
-    }
-
-    return (
-      <Modal show={this.state.showEditModal} onHide={this.handleClose}>
-        <Modal.Header closeButton><Modal.Title>Edit Permisson</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Form horizontal className="input-form">
-              <FormGroup controlId="formControlId">
-                <InputGroup>
-                  <InputGroup.Addon>ID</InputGroup.Addon>
-                  <FormControl type="text" defaultValue={matrice.id} readOnly />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlName">
-                <InputGroup>
-                  <InputGroup.Addon>Function name</InputGroup.Addon>
-                  <FormControl type="text" defaultValue={matrice.name} readOnly />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlLabel">
-                <InputGroup>
-                  <InputGroup.Addon>Description</InputGroup.Addon>
-                  <FormControl type="text" defaultValue={matrice.label} inputRef={(ref) => { this.m_label = ref; }} />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlLabel">
-                <Checkbox inline type="checkbox" checked={matrice.enabled} onChange={e => this.handleChange(!matrice.enabled, e)}>Enable globally <br /> (when [checked], all users can see/use this feature, when [unchecked], only allowed users can see/use this function)</Checkbox>
-              </FormGroup>
-              <FormGroup controlId="formControlInclude">
-                <InputGroup>
-                  <InputGroup.Addon>Include Users</InputGroup.Addon>
-                  <Select.Async
-                    multi
-                    isLoading
-                    backspaceRemoves
-                    value={defaultIncludeUsers}
-                    defaultValue={defaultIncludeUsers}
-                    valueKey="value"
-                    labelKey="label"
-                    matchProp="name"
-                    placeholder="Select ..."
-                    loadOptions={this.loadUserByName}
-                    onChange={this.handleIncludeUser}
-                  />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlExclude">
-                <InputGroup>
-                  <InputGroup.Addon>Exclude Users</InputGroup.Addon>
-                  <Select.Async
-                    multi
-                    isLoading
-                    backspaceRemoves
-                    value={defaultExcludeUsers}
-                    defaultValue={defaultExcludeUsers}
-                    valueKey="value"
-                    labelKey="label"
-                    matchProp="name"
-                    placeholder="Select ..."
-                    loadOptions={this.loadUserByName}
-                    onChange={this.handleExcludeUser}
-                  />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup>
-                <Col smOffset={0} sm={10}>
-                  <Button bsStyle="warning" onClick={() => this.handleClose()} >
-                    Cancel&nbsp;
-                  </Button>
-                  &nbsp;
-                  <Button bsStyle="primary" onClick={() => this.handleSave(matrice)} >
-                    Update&nbsp;
-                    <i className="fa fa-save" />
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-
-  renderJsonModal() {
-    const { matrice, showJsonBtn } = this.state;
-
-    return (
-      <Modal show={this.state.showJsonModal} onHide={this.handleJsonClose}>
-        <Modal.Header closeButton><Modal.Title>JSON Configurations</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Form horizontal className="input-form">
-              <FormGroup controlId="formControlId">
-                <InputGroup>
-                  <InputGroup.Addon>ID</InputGroup.Addon>
-                  <FormControl type="text" defaultValue={matrice.id} readOnly />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlName">
-                <InputGroup>
-                  <InputGroup.Addon>Function name</InputGroup.Addon>
-                  <FormControl type="text" defaultValue={matrice.name} readOnly />
-                </InputGroup>
-              </FormGroup>
-              <FormGroup controlId="formControlJson">
-                <JSONInput
-                  placeholder={matrice.configs}
-                  width="100%"
-                  onChange={e => this.onChangeJson(e)}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <Col smOffset={0} sm={10}>
-                  <Button bsStyle="warning" onClick={() => this.handleJsonClose()} >
-                    Cancel&nbsp;
-                  </Button>
-                  &nbsp;
-                  <Button bsStyle="primary" disabled={!showJsonBtn} onClick={() => this.handleJsonSave(matrice)} >
-                    Update&nbsp;
-                    <i className="fa fa-save" />
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        {this.renderList()}
-        {this.renderEditModal()}
-        {this.renderJsonModal()}
-      </div>
-    );
-  }
-}
\ No newline at end of file
diff --git a/app/packs/src/admin/MessagePublish.js b/app/packs/src/admin/MessagePublish.js
deleted file mode 100644
index ce4d86774..000000000
--- a/app/packs/src/admin/MessagePublish.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FormGroup, ControlLabel, FormControl, Button, Panel } from 'react-bootstrap';
-import Select from 'react-select';
-
-import MessagesFetcher from 'src/fetchers/MessagesFetcher';
-
-export default class MessagePublish extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      channels: [],
-      selectedChannel: null,
-    };
-    this.toggleChannelList = this.toggleChannelList.bind(this);
-    this.handleChannelChange = this.handleChannelChange.bind(this);
-    this.messageSend = this.messageSend.bind(this);
-  }
-
-  componentDidMount() {
-    this.toggleChannelList();
-  }
-
-  handleChannelChange(selectedChannel) {
-    if (selectedChannel) {
-      this.setState({ selectedChannel });
-    }
-  }
-
-  toggleChannelList() {
-    MessagesFetcher.fetchChannels(9)
-      .then((result) => {
-        const channels = result.channels.map(c =>
-          ({ value: c.id, name: c.subject, label: c.subject }));
-        channels.sort((a, b) => (a.value - b.value));
-        this.setState({ channels });
-      });
-  }
-
-  messageSend() {
-    const { selectedChannel } = this.state;
-
-    if (!selectedChannel) {
-      alert('Please select channel!');
-    } else {
-      const params = {
-        channel_id: selectedChannel.value,
-        content: this.myMessage.value,
-      };
-
-      MessagesFetcher.createMessage(params)
-        .then((result) => {
-          this.myMessage.value = '';
-          alert('Message sent!');
-        });
-    }
-  }
-
-  render() {
-    const { selectedChannel, channels } = this.state;
-
-    return (
-      <div>
-        <Panel style={{ height: 'calc(100vh - 20px)' }}>
-          <Panel.Body>
-            <div className="col-md-3">
-              <ControlLabel>Channel</ControlLabel>
-              <Select
-                value={selectedChannel}
-                onChange={this.handleChannelChange}
-                options={channels}
-                placeholder="Select your channel"
-                autoFocus
-              />
-            </div>
-            <div className="col-md-9">
-              <form>
-                <FormGroup controlId="formControlsTextarea">
-                  <ControlLabel>Message</ControlLabel>
-                  <FormControl componentClass="textarea" placeholder="message..." rows="20" inputRef={(ref) => { this.myMessage = ref; }} />
-                </FormGroup>
-                <Button
-                  bsStyle="primary"
-                  onClick={() => this.messageSend()}
-                >
-                  Publish&nbsp;
-                  <i className="fa fa-paper-plane" />
-                </Button>
-              </form>
-            </div>
-          </Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-}
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('MsgPub');
-  if (domElement) { ReactDOM.render(<MsgPub />, domElement); }
-});
diff --git a/app/packs/src/admin/NovncConfigContainer.js b/app/packs/src/admin/NovncConfigContainer.js
deleted file mode 100644
index cf8f46e15..000000000
--- a/app/packs/src/admin/NovncConfigContainer.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import { Button, ButtonGroup, Tooltip } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-export default class NovncConfigContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      deletingTooltip: false,
-    };
-
-    this.toggleTooltip = this.toggleTooltip.bind(this);
-  }
-
-  toggleTooltip() {
-    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
-  }
-
-  render() {
-    const { device } = this.props;
-    const style = { marginLeft: '20px', marginTop: '-15px' };
-    return (
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        onClick={this.toggleTooltip}
-      > {this.state.deletingTooltip ? (
-        <Tooltip placement="right" className="in" id="tooltip-bottom" style={style}>
-                  Delete configuration for {device.name}?<br />
-          <ButtonGroup>
-            <Button
-              bsStyle="danger"
-              bsSize="xsmall"
-              onClick={this.props.handleRemoveConfig}
-            >Yes
-            </Button>
-            <Button
-              bsStyle="warning"
-              bsSize="xsmall"
-              onClick={() => this.setState({ deletingTooltip: true })}
-            >No
-            </Button>
-          </ButtonGroup>
-        </Tooltip>
-              ) : null}
-        <i className="fa fa-eraser" aria-hidden="true" />
-      </Button>
-    );
-  }
-}
-
-NovncConfigContainer.propTypes = {
-  device: PropTypes.objectOf.isRequired,
-  handleRemoveConfig: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/admin/NovncSettings.js b/app/packs/src/admin/NovncSettings.js
deleted file mode 100644
index 6f1c2a51a..000000000
--- a/app/packs/src/admin/NovncSettings.js
+++ /dev/null
@@ -1,378 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Button, Table, Modal, Tooltip, OverlayTrigger, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-import NovncConfigContainer from 'src/apps/admin/NovncConfigContainer';
-
-const tipEditConfig = <Tooltip id="edit_tooltip">edit config</Tooltip>;
-const tipRemoveConfig = <Tooltip id="remove_tooltip">remove config</Tooltip>;
-const Notification = props =>
-(
-  NotificationActions.add({
-    title: `Device [${props.device.name}]`,
-    message: props.msg,
-    level: props.lvl,
-    position: 'tc',
-    dismissible: 'button',
-    uid: uuid.v4()
-  })
-);
-const NotificationError = props => Notification({ ...props, lvl: 'error' });
-
-class ModelConfig extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedToken: props.device.data.novnc.token || '',
-      selectedTarget: props.device.data.novnc.target || '',
-      selectedPassword: props.device.data.novnc.password || '',
-      inputToken: props.device.data.novnc.token || '',
-      inputTarget: props.device.data.novnc.target || ''
-    };
-    this.handleSave = this.handleSave.bind(this);
-    this.updateTarget = this.updateTarget.bind(this);
-    this.updateToken = this.updateToken.bind(this);
-  }
-
-  handleSave(device) {
-    const {
-      selectedToken, selectedTarget, selectedPassword, inputTarget
-    } = this.state;
-    const missingTarget = !inputTarget;
-
-    const params = {
-      id: device.id,
-      data: {
-        novnc: {
-          token: selectedToken,
-          target: selectedTarget,
-          password: selectedPassword
-        }
-      },
-    };
-
-    params.data.novnc.token = this.refToken.value;
-    params.data.novnc.target = this.refTarget.value;
-    params.data.novnc.password = this.refPassword.value;
-
-    if (missingTarget) {
-      NotificationError({ device, msg: 'Please type a Target for the device!' });
-      return false;
-    }
-
-    AdminFetcher.editNovncSettings(params)
-      .then(() => {
-        this.props.onClose();
-        return true;
-      });
-    return true;
-  }
-
-  updateTarget(e) {
-    this.setState({
-      inputTarget: e.target.value,
-    });
-  }
-
-  updateToken(e) {
-    this.setState({
-      inputToken: e.target.value,
-    });
-  }
-
-  render() {
-    const rowStyle = { padding: '8px', display: 'flex' };
-    const colStyle = { textAlign: 'right', marginTop: 'auto', marginBottom: 'auto' };
-    const storedTarget = this.props.device.data.novnc.target;
-    const storedToken = this.props.device.data.novnc.token;
-    const storedPassword = this.props.device.data.novnc.password;
-    const { inputTarget, inputToken } = this.state;
-    const missingTarget = !inputTarget;
-
-    const RenderStoredTarget = () => {
-      if (storedTarget && storedToken) { return `${storedTarget}?token=${storedToken}`; }
-      if (storedTarget && storedToken === '') { return storedTarget; }
-      return ' None';
-    };
-
-    const RenderCurrentTarget = () => {
-      if (inputTarget && inputToken) {
-        return `${inputTarget}?token=${inputToken}`;
-      }
-      if (inputTarget && !inputToken) {
-        return inputTarget;
-      }
-      return 'You haven\'t edited the target so far';
-    };
-
-    return (
-      <Modal
-        bsSize="large"
-        show={this.props.isShow}
-        onHide={this.props.onClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title> <b>NoVNC Settings for <u>{this.props.device.name}</u></b></Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Target</b>
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <input
-                ref={(ref) => { this.refTarget = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputTarget"
-                placeholder="e.g. ws://localhost:8092/websockify"
-                required
-                onChange={e => this.updateTarget(e)}
-                defaultValue={storedTarget || ''}
-              />
-
-            </Col>
-
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Websockify Token</b>
-            </Col>
-            <Col sm={6} md={6} lg={6}>
-              <input
-                ref={(ref) => { this.refToken = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputToken"
-                placeholder="e.g. 000001"
-                required
-                onChange={e => this.updateToken(e)}
-                disabled={missingTarget}
-                defaultValue={storedToken || ''}
-              />
-
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col style={colStyle}>
-              <span className="fa fa-info-circle" aria-hidden="true">&nbsp;
-                <b>Current Target   </b>
-                <RenderStoredTarget />
-              </span>
-            </Col>
-          </Row>
-          <Row style={rowStyle}>
-            <Col style={colStyle}>
-              <span className="fa fa-info-circle" aria-hidden="true">&nbsp;
-                <b>Edited Target   </b>
-                <RenderCurrentTarget />
-              </span>
-            </Col>
-          </Row>
-          <hr />
-          <Row style={rowStyle}>
-            <h4>RFB Credentials</h4>
-          </Row>
-          <Row style={rowStyle}>
-            <Col sm={2} md={2} lg={2} style={colStyle}>
-              <b>Password</b>
-            </Col>
-            <Col sm={10} md={10} lg={10}>
-              <input
-                ref={(ref) => { this.refPassword = ref; }}
-                className="form-control is-invalid"
-                type="text"
-                id="inputPassword"
-                placeholder="Password"
-                required
-                defaultValue={storedPassword || ''}
-              />
-            </Col>
-          </Row>
-        </Modal.Body>
-        <Modal.Footer style={{ textAlign: 'left' }}>
-          <Button bsStyle="primary" onClick={() => this.props.onClose()}>Close</Button>
-          <Button bsStyle="warning" onClick={() => this.handleSave(this.props.device)}>Save</Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ModelConfig.propTypes = {
-  device: PropTypes.shape({
-    name: PropTypes.string,
-    data: PropTypes.shape({
-      novnc: PropTypes.shape({
-        target: PropTypes.string,
-        token: PropTypes.string,
-        password: PropTypes.string
-      })
-    })
-  }).isRequired,
-  isShow: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired
-};
-
-export default class NovncSettings extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      devices: [],
-      selectedDevice: null,
-      showConfigModal: false,
-    };
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handleDeviceListFetch = this.handleDeviceListFetch.bind(this);
-    this.handleConfigModalShow = this.handleConfigModalShow.bind(this);
-    this.handleConfigModalClose = this.handleConfigModalClose.bind(this);
-  }
-
-  componentDidMount() {
-    this.handleDeviceListFetch();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  handleConfigModalShow(device) {
-    AdminFetcher.fetchDeviceById(device.id)
-      .then((result) => {
-        const selectedDevice = result.device;
-        const emptyData = { novnc: { token: '', target: '', password: '' } };
-        if (!selectedDevice.data.novnc) {
-          selectedDevice.data = emptyData;
-        }
-        this.setState({
-          selectedDevice,
-          showConfigModal: true
-        });
-      });
-  }
-
-  handleConfigModalClose() {
-    AdminFetcher.fetchDevices()
-      .then((result) => {
-        this.setState({
-          devices: result.devices,
-          showConfigModal: false,
-        });
-      });
-  }
-
-  handleDeviceListFetch() {
-    AdminFetcher.fetchDevices()
-      .then((result) => {
-        this.setState({
-          devices: result.devices,
-        });
-      });
-  }
-
-  handleRemoveConfig(id) {
-    const { devices } = this.state;
-    const params = {
-      id,
-      data: {
-        novnc: {
-          token: '',
-          target: '',
-          password: ''
-        }
-      },
-    };
-    AdminFetcher.editNovncSettings(params)
-      .then(() => {
-        devices.map((dev) => {
-          if (dev.id === id) { dev.data = {}; }
-        });
-        this.setState({ devices });
-      });
-  }
-
-  renderConfiModal() {
-    return this.state.showConfigModal ?
-      <ModelConfig
-        device={this.state.selectedDevice}
-        isShow={this.state.showConfigModal}
-        onClose={this.handleConfigModalClose}
-      /> : null;
-  }
-
-  render() {
-    const { devices } = this.state;
-
-    const renderTarget = (device) => {
-      if (device.data && device.data.novnc && device.data.novnc.token) {
-        return `${device.data.novnc.target}?token=${device.data.novnc.token}`;
-      } else if (device.data && device.data.novnc && !device.data.novnc.token) {
-        return device.data.novnc.target;
-      }
-      return 'Blank target';
-    };
-
-    const tcolumn = (
-      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
-        <th width="2%" colSpan="2">#</th>
-        <th width="5%">ID</th>
-        <th width="20%">Name</th>
-        <th width="40%">Target</th>
-      </tr>
-    );
-
-    const tbody = devices.map((device, idx) => (
-      <tr key={`row_${device.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
-        <td>
-          {idx + 1}
-        </td>
-        <td>
-          <OverlayTrigger placement="bottom" overlay={tipEditConfig} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="primary"
-              onClick={() => this.handleConfigModalShow(device)}
-            >
-              <i className="fa fa-pencil" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <OverlayTrigger placement="left" overlay={tipRemoveConfig} >
-            <NovncConfigContainer
-              device={device}
-              handleRemoveConfig={() => this.handleRemoveConfig(device.id)}
-            />
-          </OverlayTrigger>
-        </td>
-        <td> {device.id} </td>
-        <td> {device.name} </td>
-        <td>
-          {renderTarget(device)}
-        </td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              NoVNC Settings
-            </Panel.Title>
-          </Panel.Heading>
-          <Table responsive hover bordered>
-            <thead>
-              {tcolumn}
-            </thead>
-            <tbody>
-              {tbody}
-            </tbody>
-          </Table>
-        </Panel>
-        {this.renderConfiModal()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/OlsTerms.js b/app/packs/src/admin/OlsTerms.js
deleted file mode 100644
index dbf0b7563..000000000
--- a/app/packs/src/admin/OlsTerms.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-import { Row, Col, DropdownButton, MenuItem } from 'react-bootstrap';
-import Tree from 'antd/lib/tree';
-import { ButtonToolbar, Button } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-
-import UsersFetcher from 'src/fetchers/UsersFetcher';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-import { difference } from 'lodash';
-
-const checkItem = (enableIds, disableIds, enable, idkey, checkStrictly) => {
-  if (enable === true) {
-    if (!enableIds.includes(idkey)) {
-      enableIds.push(idkey);
-    }
-    if (disableIds.includes(idkey)) {
-      disableIds = disableIds.filter(r => r !== idkey);
-    }
-  } else {
-    if (enableIds.includes(idkey)) {
-      enableIds = enableIds.filter(r => r !== idkey);
-    }
-    if (!disableIds.includes(idkey)) {
-      disableIds.push(idkey);
-    }
-  }
-  return { enableIds, disableIds };
-};
-
-
-export default class OlsTerms extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      file: null,
-      selectName: '',
-      expandedKeys: [],
-      autoExpandParent: true,
-      checkStrictly: true,
-      checkedKeys: [],
-      orgCheckedKeys: [],
-      enableIds: [],
-      disableIds: [],
-      list: []
-    };
-    this.initialOls = this.initialOls.bind(this);
-    this.onExpand = this.onExpand.bind(this);
-    this.onCheck = this.onCheck.bind(this);
-    this.handleSaveBtn = this.handleSaveBtn.bind(this);
-    this.handleSelectName = this.handleSelectName.bind(this);
-    this.handleAssociateBtn = this.handleAssociateBtn.bind(this);
-  }
-
-  componentDidMount() {
-    // this.initialOls(this.state.selectName);
-  }
-
-  handleFileDrop(attach) {
-    this.setState({ file: attach[0] });
-  }
-
-  handleAttachmentRemove() {
-    this.setState({ file: null });
-  }
-
-  handleClick() {
-    const { file } = this.state;
-    AdminFetcher.importOlsTerms(file);
-  }
-
-  dropzoneOrfilePreview() {
-    const { file } = this.state;
-    return file ? (
-      <div>
-        {file.name}
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
-          <i className="fa fa-trash-o" />
-        </Button>
-      </div>
-    ) : (
-      <Dropzone
-        onDrop={attach => this.handleFileDrop(attach)}
-        style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-      >
-        <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-          Drop File, or Click to Select.
-        </div>
-      </Dropzone>
-    );
-  }
-
-  addToChecked(cks, parent) {
-    if (parent.is_enabled === true) { cks.push(parent.value); }
-    (parent.children || []).map((node) => {
-      node.key = node.value;
-      this.addToChecked(cks, node);
-    });
-    return cks;
-  }
-
-  initialOls(selectName) {
-    let checkedKeys = [];
-    if (selectName == null && selectName === '') { return; }
-    UsersFetcher.fetchOls(selectName, false)
-      .then((result) => {
-        (result.ols_terms || []).map((a) => {
-          a.key = a.value;
-          checkedKeys = this.addToChecked(checkedKeys, a);
-        });
-        this.setState({
-          expandedKeys: checkedKeys,
-          orgCheckedKeys: checkedKeys,
-          list: result.ols_terms,
-          checkedKeys,
-        });
-      });
-  }
-
-  onExpand(expandedKeys) {
-    this.setState({
-      expandedKeys,
-      autoExpandParent: false,
-    });
-  }
-
-  onCheck(checkedKeys, e) {
-    const { checkStrictly, orgCheckedKeys } = this.state;
-    const checkedObj = (checkStrictly === true) ? checkedKeys.checked : checkedKeys;
-    const disableIds = difference(orgCheckedKeys, checkedObj);
-    const enableIds = difference(checkedObj, orgCheckedKeys);
-
-    this.setState({ checkedKeys, enableIds, disableIds });
-  }
-
-  handleSelectName(olsName) {
-    this.setState({
-      selectName: olsName,
-      enableIds: [],
-      disableIds: []
-    });
-    this.initialOls(olsName);
-  }
-
-
-  handleSaveBtn() {
-    const { enableIds, disableIds } = this.state;
-    AdminFetcher.olsTermDisableEnable({ owl_name: this.state.selectName, enableIds, disableIds })
-      .then((result) => {
-        if (result === true) {
-          alert('update successfully!');
-          this.setState({ enableIds: [], disableIds: [] });
-          this.initialOls(this.state.selectName);
-        } else {
-          alert('update error, please check system log!');
-        }
-      });
-  }
-
-  handleAssociateBtn() {
-    this.setState({ checkStrictly: !this.state.checkStrictly });
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Row style={{ maxWidth: '2000px', maxHeight: '1000px', margin: 'auto' }}>
-          {this.dropzoneOrfilePreview()}
-          <ButtonToolbar>
-            <Button bsStyle="warning" onClick={() => this.handleClick()}>Import OLS Terms (the file name will be the OLS_name)</Button>
-          </ButtonToolbar>
-        </Row>
-        <Row style={{ maxWidth: '2000px', maxHeight: '1000px', margin: 'auto' }}>
-          <Col md={6}>
-            <DropdownButton title={this.state.selectName === '' ? 'Ols Terms' : this.state.selectName}>
-              <MenuItem key="rxno" onSelect={() => this.handleSelectName('rxno')}>
-                rxno
-              </MenuItem>
-              <MenuItem key="chmo" onSelect={() => this.handleSelectName('chmo')}>
-                chmo
-              </MenuItem>
-            </DropdownButton>
-            <div><h3>{this.state.selectName}</h3></div>
-            <Button
-              bsStyle="primary"
-              onClick={() => this.handleSaveBtn()}
-            >Save
-            </Button> &nbsp; &nbsp;
-            <Button
-              bsStyle="primary"
-              onClick={() => this.handleAssociateBtn()}
-            >switch mode
-            </Button>
-            &nbsp;
-            {this.state.checkStrictly === true ? 'Check Strickly' : 'Associated'}
-            <Tree
-              name={this.state.selectName}
-              checkable
-              onExpand={this.onExpand}
-              expandedKeys={this.state.expandedKeys}
-              autoExpandParent={this.state.autoExpandParent}
-              onCheck={this.onCheck}
-              checkedKeys={this.state.checkedKeys}
-              checkStrictly={this.state.checkStrictly}
-              treeData={this.state.list}
-            />
-          </Col>
-          <Col md={6}>
-            <div style={{ whiteSpace: 'pre' }}>
-              <h3>enable list</h3>
-              {this.state.enableIds.join('\n')}
-              <h3>disable list</h3>
-              {this.state.disableIds.join('\n')}
-            </div>
-          </Col>
-        </Row>
-      </React.Fragment>
-    );
-  }
-}
diff --git a/app/packs/src/admin/SegmentElementAdmin.js b/app/packs/src/admin/SegmentElementAdmin.js
deleted file mode 100644
index 1fb287473..000000000
--- a/app/packs/src/admin/SegmentElementAdmin.js
+++ /dev/null
@@ -1,995 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import LoadingModal from '../components/common/LoadingModal';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import { ElementField } from '../components/elements/ElementField';
-import LoadingActions from '../components/actions/LoadingActions';
-import AttrNewModal from './generic/AttrNewModal';
-import AttrEditModal from './generic/AttrEditModal';
-import AttrCopyModal from './generic/AttrCopyModal';
-import FieldCondEditModal from './generic/FieldCondEditModal';
-import TemplateJsonModal from './generic/TemplateJsonModal';
-import LayerAttrEditModal from './generic/LayerAttrEditModal';
-import LayerAttrNewModal from './generic/LayerAttrNewModal';
-import SelectAttrNewModal from './generic/SelectAttrNewModal';
-import UploadModal from './generic/UploadModal';
-import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from '../admin/generic/Utils';
-import Preview from './generic/Preview';
-
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-const validateInput = (element) => {
-  if (element.klass_element === '') {
-    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please select Element.' });
-    return false;
-  }
-  if (element.label === '') {
-    notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please input Segment Label.' });
-    return false;
-  }
-  return true;
-};
-
-export default class SegmentElementAdmin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      element: {},
-      newFieldKey: '',
-      newOptionKey: '',
-      layerKey: '',
-      selectOptions: [],
-      unitsSystem: {},
-      showPropModal: false,
-      showNewLayer: false,
-      showEditLayer: false,
-      showAddSelect: false,
-      showNewKlass: false,
-      showEditKlass: false,
-      showCopyKlass: false,
-      showFieldCond: false,
-      showUpload: false,
-      showJson: false,
-      propTabKey: 1
-    };
-
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.fetchElements = this.fetchElements.bind(this);
-    this.handlePropShow = this.handlePropShow.bind(this);
-    this.handlePropClose = this.handlePropClose.bind(this);
-    this.onInputNewField = this.onInputNewField.bind(this);
-    this.onInputNewOption = this.onInputNewOption.bind(this);
-    this.addLayer = this.addLayer.bind(this);
-    this.addSelection = this.addSelection.bind(this);
-    this.editLayer = this.editLayer.bind(this);
-    this.newKlass = this.newKlass.bind(this);
-    this.editKlass = this.editKlass.bind(this);
-    this.copyKlass = this.copyKlass.bind(this);
-    this.newField = this.newField.bind(this);
-    this.newOption = this.newOption.bind(this);
-    this.handleSelectClose = this.handleSelectClose.bind(this);
-    this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
-    this.handleLayerClose = this.handleLayerClose.bind(this);
-    this.handleNewKlassClose = this.handleNewKlassClose.bind(this);
-    this.handleKlassClose = this.handleKlassClose.bind(this);
-    this.handleCopyKlassClose = this.handleCopyKlassClose.bind(this);
-    this.handleCreateLayer = this.handleCreateLayer.bind(this);
-    this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
-    this.handleCreateKlass = this.handleCreateKlass.bind(this);
-    this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
-    this.handleActivateKlass = this.handleActivateKlass.bind(this);
-    this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
-    this.handleAddSelect = this.handleAddSelect.bind(this);
-    this.onDummyAdd = this.onDummyAdd.bind(this);
-    this.onFieldDrop = this.onFieldDrop.bind(this);
-    this.onFieldMove = this.onFieldMove.bind(this);
-    this.onShowFieldCond = this.onShowFieldCond.bind(this);
-    this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
-    this.onFieldInputChange = this.onFieldInputChange.bind(this);
-    this.onOptionInputChange = this.onOptionInputChange.bind(this);
-    this.showJsonModal = this.showJsonModal.bind(this);
-    this.hideJsonModal = this.hideJsonModal.bind(this);
-    this.handleUpdateJson = this.handleUpdateJson.bind(this);
-    this.fetchConfigs = this.fetchConfigs.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.propTabSelect = this.propTabSelect.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-    this.handleUploadShow = this.handleUploadShow.bind(this);
-    this.handleUploadClose = this.handleUploadClose.bind(this);
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-  }
-
-  componentDidMount() {
-    this.fetchElements();
-    this.fetchConfigs();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  onOptionInputChange(event, selectKey, optionKey) {
-    const { element } = this.state;
-    const options = (element &&
-      element.properties_template && element.properties_template.select_options[selectKey]
-      && element.properties_template.select_options[selectKey].options) || [];
-    const idx = findIndex(options, o => o.key === optionKey);
-    const op = {};
-    op.key = optionKey;
-    op.label = event.target.value;
-    options.splice(idx, 1, op);
-    this.setState({ element });
-  }
-
-  onDummyAdd(e) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[e.l]);
-    let { fields } = layer || {};
-    fields = fields || [];
-    let idx = fields.findIndex(o => o.field === e.f);
-    if (idx === -1 && fields.length > 0) idx = fields.length - 1;
-    fields.splice(idx + 1, 0, new GenericDummy());
-    element.properties_template.layers[e.l].fields = fields;
-    this.setState({ element });
-  }
-
-  onShowFieldCond(field, lk) {
-    this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
-  }
-
-  onFieldDrop(e) {
-    const { element } = this.state;
-    const sourceKey = e.sourceTag.layerKey;
-    const targetKey = e.targetTag.layerKey;
-    const sourceLayer = element.properties_template.layers[sourceKey];
-    const targetLayer = element.properties_template.layers[targetKey];
-
-    if (sourceLayer && targetLayer) {
-      e.sourceTag.field.position = e.targetTag.field.position - 1;
-      const { fields } = element.properties_template.layers[sourceKey];
-      const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
-      fields.splice(idx, 1, e.sourceTag.field);
-      element.properties_template.layers[sourceKey].fields = fields;
-      this.setState({ element });
-    }
-  }
-
-  onFieldMove(l, f, isUp) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template && element.properties_template.layers[l]);
-    const { fields } = layer;
-    const idx = findIndex(fields, o => o.field === f);
-    if (idx >= 0 && isUp) {
-      const curObj = fields[idx];
-      curObj.position -= 1;
-      const preObj = fields[idx - 1];
-      preObj.position += 1;
-      fields[idx] = preObj;
-      fields[idx - 1] = curObj;
-    } else if (idx < (fields.length - 1) && !isUp) {
-      const curObj = fields[idx];
-      curObj.position += 1;
-      const nexObj = fields[idx + 1];
-      nexObj.position -= 1;
-      fields[idx] = nexObj;
-      fields[idx + 1] = curObj;
-    }
-    element.properties_template.layers[l].fields = fields;
-    this.setState({ element });
-  }
-
-  onFieldSubFieldChange(lk, f, cb) {
-    const { element } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-    const { fields } = layer;
-    if (layer != null) {
-      const fobj = (fields || []).find(o => o.field === f.field);
-      if (Object.keys(fobj).length > 0) {
-        const idx = (fields || []).findIndex(o => o.field === f.field);
-        fields.splice(idx, 1, f);
-        element.properties_template.layers[lk].fields = fields;
-        this.setState({ element }, cb);
-      }
-    }
-  }
-
-  onFieldInputChange(event, orig, fe, lk, fc, tp) {
-    const { element } = this.state;
-
-    let value = '';
-    if (tp === 'select' || tp === 'system-defined') {
-      ({ value } = event);
-    } else if (tp && tp.startsWith('drag')) {
-      value = event;
-    } else {
-      ({ value } = event.target);
-    }
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[lk]);
-
-    if (typeof layer === 'undefined' || layer == null) return;
-
-    const { fields } = layer;
-
-    if (fields == null || fields.length === 0) return;
-
-    const fobj = fields.find(e => e.field === fe);
-    if (Object.keys(fobj).length === 0) return;
-
-    switch (fc) {
-      case 'required':
-        fobj.required = !orig;
-        break;
-      default:
-        fobj[`${fc}`] = value;
-        break;
-    }
-
-    const idx = findIndex(fields, o => o.field === fe);
-    fields.splice(idx, 1, fobj);
-    element.properties_template.layers[lk].fields = fields;
-    this.setState({ element });
-  }
-
-  onInputNewField(e) {
-    this.setState({ newFieldKey: e.target.value });
-  }
-
-  onInputNewOption(e) {
-    this.setState({ newOptionKey: e.target.value });
-  }
-
-  retriveRevision(revision, cb) {
-    const { element } = this.state;
-    element.properties_template = revision;
-    this.setState({ element, propTabKey: 1 }, cb);
-  }
-
-  fetchRevisions() {
-    const { element } = this.state;
-    if (element && element.id) {
-      AdminFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
-        .then((result) => {
-          let curr = Object.assign({}, { ...element.properties_template });
-          curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
-          const revisions = [].concat(curr, result.revisions);
-          this.setState({ revisions });
-        });
-    }
-  }
-
-  delRevision(params) {
-    const { element } = this.state;
-    AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'SegmentKlass' })
-      .then((response) => {
-        if (response.error) {
-          notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
-        } else {
-          this.fetchRevisions();
-        }
-      });
-  }
-
-  propTabSelect(key) {
-    if (key !== 1) {
-      this.fetchRevisions();
-    }
-    this.setState({ propTabKey: key });
-  }
-
-  handlePropClose() {
-    this.setState({ showPropModal: false });
-  }
-
-  handleFieldCondClose() {
-    this.setState({ showFieldCond: false });
-  }
-
-  handleCond(lk) {
-    this.onShowFieldCond(null, lk);
-  }
-
-
-  addLayer() {
-    this.setState({ showNewLayer: true });
-  }
-
-  addSelection() {
-    this.setState({ showAddSelect: true });
-  }
-
-  showJsonModal(element) {
-    this.setState({ element, showJson: true });
-  }
-
-  hideJsonModal() {
-    this.setState({ showJson: false });
-  }
-
-  editLayer(e) {
-    this.setState({ showEditLayer: true, layerKey: e.layerKey });
-  }
-
-  newKlass() {
-    this.setState({ showNewKlass: true });
-  }
-
-  editKlass(element) {
-    this.setState({ showEditKlass: true, element });
-  }
-
-  copyKlass(element) {
-    this.setState({ showCopyKlass: true, element });
-  }
-
-  handleUploadShow() {
-    this.setState({ showUpload: true });
-  }
-
-  handleUploadClose() {
-    this.setState({ showUpload: false });
-  }
-
-  newField(e) {
-    const { element, newFieldKey } = this.state;
-    if (newFieldKey === null || newFieldKey.trim().length === 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
-      return;
-    }
-    if (!validateField(newFieldKey)) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
-      return;
-    }
-    const { layerKey } = e;
-    const layer = element && element.properties_template
-      && element.properties_template.layers[layerKey];
-    const fields = layer.fields || [];
-    const dupfields = filter(fields, o => o.field === newFieldKey);
-    if (dupfields && dupfields.length > 0) {
-      notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
-      return;
-    }
-    const newField = {
-      type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
-    };
-    fields.push(newField);
-    element.properties_template.layers[layerKey].fields = fields;
-    this.setState({ layerKey, element });
-  }
-
-  newOption(key) {
-    const { element, newOptionKey } = this.state;
-
-    if (newOptionKey == null || newOptionKey.trim().length === 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
-      return;
-    }
-    const selectObj = (element && element.properties_template
-      && element.properties_template.select_options[key]
-      && element.properties_template.select_options[key].options) || [];
-    const dupops = filter(selectObj, o => o.key === newOptionKey);
-    if (dupops && dupops.length > 0) {
-      notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
-      return;
-    }
-    const newOption = { key: newOptionKey, label: newOptionKey };
-    selectObj.push(newOption);
-    element.properties_template.select_options[key].options = selectObj;
-    this.setState({ element });
-  }
-
-  handleNewLayerClose() {
-    this.setState({ showNewLayer: false });
-  }
-
-  handleLayerClose() {
-    this.setState({ showEditLayer: false });
-  }
-
-  handleNewKlassClose() {
-    this.setState({ showNewKlass: false });
-  }
-
-  handleKlassClose() {
-    this.setState({ showEditKlass: false });
-  }
-
-  handleCopyKlassClose() {
-    this.setState({ showCopyKlass: false });
-  }
-
-  handleSelectClose() {
-    this.setState({ showAddSelect: false });
-  }
-
-  handleAddSelect(selectName) {
-    const { element } = this.state;
-    if (validateSelectList(selectName, element)) {
-      const sos = element.properties_template.select_options;
-      sos[selectName] = {};
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ element, showAddSelect: false, selectOptions });
-    }
-    return false;
-  }
-
-  handleCreateLayer(layer) {
-    if (!validateLayerInput(layer)) return;
-    const { element } = this.state;
-    if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
-      notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
-      return;
-    }
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showNewLayer: false, element, layerKey: layer.key });
-  }
-
-  handleUpdateLayer(layerKey, updates) {
-    if (!validateLayerInput(updates)) return;
-    const { element } = this.state;
-    let layer = element && element.properties_template
-    && element.properties_template.layers[layerKey];
-    layer = { ...layer, ...updates };
-    element.properties_template.layers[`${layer.key}`] = layer;
-    notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
-    this.setState({ showEditLayer: false, element });
-  }
-
-  handleCreateKlass(element) {
-    if (!validateInput(element)) return;
-    AdminFetcher.createSegmentKlass(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Create Segment fail', lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: 'Create Segment successfully', lvl: 'info', msg: 'Created successfully' });
-          this.handleNewKlassClose();
-          this.handleCopyKlassClose();
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleUpdateKlass(element, updates) {
-    const inputs = { ...element, ...updates };
-    if (!validateInput(inputs)) return;
-    AdminFetcher.updateSegmentKlass(inputs)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: 'Update Segment successfully', lvl: 'info', msg: 'Updated successfully' });
-          this.handleKlassClose();
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleActivateKlass(id, isActive) {
-    AdminFetcher.deActiveSegmentKlass({ id, is_active: !isActive })
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: 'Update Segment successfully', lvl: 'info', msg: `Segment is ${result.is_active ? 'active' : 'deactive'} now` });
-          this.handleKlassClose();
-          this.fetchElements();
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleDeleteKlass(element) {
-    AdminFetcher.deleteSegmentKlass(element.id)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Delete Segment fail', lvl: 'error', msg: result.error });
-        } else {
-          notification({ title: `Segment [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
-          this.handleKlassClose();
-          this.fetchElements();
-        }
-      });
-  }
-
-  handleUpdateJson(propertiesTemplate) {
-    const { element } = this.state;
-    element.properties_template = propertiesTemplate;
-    this.setState({
-      element,
-      showJson: false
-    });
-    this.handleSubmit(false);
-  }
-
-
-  handlePropShow(element) {
-    if (element) {
-      const selectOptions = Object.keys(element.properties_template.select_options)
-        .map(key => ({ value: key, name: key, label: key }));
-      this.setState({
-        element, selectOptions, showPropModal: true, propTabKey: 1
-      });
-    }
-  }
-
-  handleUploadTemplate(properties, message, valid) {
-    const { element } = this.state;
-    if (valid === false) {
-      this.setState({ showUpload: false });
-      notification({ title: `Upload Template for Segment [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
-    } else {
-      element.properties_template = properties;
-      this.setState({ element, showUpload: false });
-      notification({ title: `Upload template to Segment [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
-    }
-  }
-
-  fetchConfigs() {
-    AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
-  }
-
-  fetchElements() {
-    AdminFetcher.listSegmentKlass().then((result) => {
-      this.setState({ elements: result.klass });
-    });
-  }
-
-  handleSubmit(isRelease = false) {
-    LoadingActions.start();
-    const { element, unitsSystem } = this.state;
-    Object.keys(element.properties_template.layers).forEach((key) => {
-      const layer = element.properties_template.layers[key];
-      let sortedFields = (layer && layer.fields) || [];
-      (sortedFields || []).forEach((f, idx) => {
-        const fd = f;
-        fd.position = (idx + 1);
-        if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
-        fd.required = false;
-        fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
-        if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
-        return fd;
-      });
-      sortedFields = sortBy(sortedFields, l => l.position);
-      element.properties_template.layers[key].fields = sortedFields;
-    });
-
-    element.is_release = isRelease;
-
-    AdminFetcher.updateSegmentTemplate(element)
-      .then((result) => {
-        if (result.error) {
-          notification({ title: 'Update Segment template fail', lvl: 'error', msg: result.error });
-        } else {
-          if (isRelease === true) {
-            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved adn Released successfully' });
-          } else {
-            notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved successfully' });
-          }
-          this.fetchElements();
-          this.setState({ element: result });
-        }
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  confirmDelete(delStr, delKey, delRoot) {
-    const { element } = this.state;
-    if (delStr === 'Select') {
-      delete element.properties_template.select_options[delKey];
-      const sos = element.properties_template.select_options;
-      const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
-      this.setState({ selectOptions });
-    } else if (delStr === 'Option') {
-      const options = element.properties_template.select_options[delRoot];
-      const idx = findIndex(options, o => o.key === delKey);
-      options.splice(idx, 1);
-    } else if (delStr === 'Layer') {
-      delete element.properties_template.layers[delKey];
-    } else if (delStr === 'Field') {
-      const { fields } = element.properties_template.layers[delRoot];
-      const idx = findIndex(fields, o => o.field === delKey);
-      fields.splice(idx, 1);
-    } else {
-      //
-    }
-    this.setState({ element });
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    let msg = 'remove?';
-    if (delStr === 'Select') {
-      msg = `remove this select option: [${delKey}] ?`;
-    } else if (delStr === 'Option') {
-      msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
-    } else if (delStr === 'Layer') {
-      msg = `remove this layer: [${delKey}] ?`;
-    } else if (delStr === 'Field') {
-      msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
-    } else {
-      msg = `remove ???: ${delStr}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => this.confirmDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning">No</Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="sm" >
-          <i className="fa fa-trash-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderSelectOptions() {
-    const { element } = this.state;
-    const selects = [];
-
-    Object.keys(element.properties_template.select_options).forEach((key) => {
-      const soptions = (element.properties_template.select_options[key]
-        && element.properties_template.select_options[key].options) || [];
-      const options = (soptions || []).map(f => (
-        <div key={`${f.key}_${key}`} style={{ marginTop: '10px' }}>
-          <FormGroup bsSize="sm" controlId={`frmCtrlSelectOption_${f.key}_${key}`}>
-            <InputGroup>
-              <InputGroup.Addon>{f.key}</InputGroup.Addon>
-              <FormControl
-                type="text"
-                name="lf_label"
-                defaultValue={f.label}
-                onChange={event => this.onOptionInputChange(event, key, f.key)}
-              />
-              <InputGroup.Button>
-                {this.renderDeleteButton('Option', f.key, key)}
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </div>
-      ));
-
-      const snode = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`select_options_${key}`} >
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>{key}</Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {this.renderDeleteButton('Select', key, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="input_newOption"
-                    onChange={e => this.onInputNewOption(e)}
-                    placeholder="Input new option"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new option</Tooltip>}>
-                      <Button bsSize="sm" onClick={() => this.newOption(key)}><i className="fa fa-plus" aria-hidden="true" /></Button>
-                    </OverlayTrigger>
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              {options}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      selects.push(snode);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Select Lists
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new select list</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addSelection()}>Add new select list&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body>
-            <div>
-              { selects }
-            </div>
-          </Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProperties() {
-    const { element, selectOptions, unitsSystem } = this.state;
-    const layers = [];
-    const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
-
-    (sortedLayers || []).forEach((layer) => {
-      const layerKey = `${layer.key}`;
-      const fields = ((layer && layer.fields) || []).map((f, idx) => (
-        <ElementField
-          genericType="Segment"
-          key={`${layerKey}${f.field}`}
-          layerKey={layerKey}
-          position={idx + 1}
-          field={f}
-          select_options={selectOptions}
-          onDrop={e => this.onFieldDrop(e)}
-          onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
-          onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
-          onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
-          unitsSystem={unitsSystem}
-          onFieldSubFieldChange={this.onFieldSubFieldChange}
-          onDummyAdd={this.onDummyAdd}
-          onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
-          allLayers={sortedLayers}
-        />
-      )) || [];
-
-      const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
-      const btnCond = hasCond ?
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-        (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-
-      const node = (
-        <Panel className="panel_generic_properties" defaultExpanded key={`idxLayer_${layerKey}`}>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {layer.label}&nbsp;<Badge>{layer.key}</Badge>&nbsp;<Badge>{`Columns per Row: ${layer.cols}`}</Badge>&nbsp;<Badge className="bg-bs-primary">{`Fields: ${(layer.fields && layer.fields.length) || 0}`}</Badge>
-            </Panel.Title>
-            <div>
-              <FormGroup bsSize="sm" style={{ marginBottom: 'unset', display: 'inline-table' }}>
-                <InputGroup>
-                  <InputGroup.Button>
-                    {btnCond}
-                    <ButtonTooltip tip={`Edit Layer: ${layer.label}`} fnClick={this.editLayer} element={{ layerKey }} fa="fa-pencil" place="top" size="sm" />
-                    {this.renderDeleteButton('Layer', layerKey, null)}
-                  </InputGroup.Button>
-                  <FormControl
-                    type="text"
-                    name="nf_newfield"
-                    onChange={e => this.onInputNewField(e)}
-                    placeholder="Input new field name"
-                    bsSize="sm"
-                  />
-                  <InputGroup.Button>
-                    <ButtonTooltip tip="Add new field" fnClick={this.newField} element={{ layerKey }} fa="fa fa-plus" place="top" size="sm" />
-                    <ButtonTooltip tip="Add Dummy field" fnClick={this.onDummyAdd} element={{ l: layerKey, f: null }} fa="fa fa-plus-circle" place="top" size="sm" />
-                  </InputGroup.Button>
-                </InputGroup>
-              </FormGroup>
-            </div>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body style={{ padding: '15px 0px 15px 0px' }}>
-              {fields}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-      layers.push(node);
-    });
-
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title>
-              Layers
-              <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>Add new layer</Tooltip>}>
-                <Button className="button-right" bsSize="xs" onClick={() => this.addLayer()}>Add new layer&nbsp;<i className="fa fa-plus" aria-hidden="true" /></Button>
-              </OverlayTrigger>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body><div>{ layers }</div></Panel.Body>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderPropPanel() {
-    const {
-      element, showPropModal, revisions, propTabKey
-    } = this.state;
-    if (showPropModal) {
-      return (
-        <Tabs activeKey={propTabKey} id="segment-prop-tabs" onSelect={this.propTabSelect}>
-          <Tab eventKey={1} title="Template">
-            <Panel show={showPropModal.toString()}>
-              <Panel.Heading>
-                <b>{`Template of Segment [${element.label}]: ${element.desc}`}</b>&nbsp;
-                <span className="generic_version">{`ver.: ${element.uuid}`}</span>
-                <span className="generic_version_draft">{element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}</span>
-                <span className="button-right" >
-                  <ButtonTooltip tip="Upload Segment template in JSON format" fnClick={this.handleUploadShow} element={element} place="top" fa="fa-upload" />&nbsp;
-                  <ButtonTooltip txt="Save and Release" tip="Save and Release template" fnClick={() => this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />&nbsp;
-                  <ButtonTooltip txt="Save as draft" tip="Save template as draft" fnClick={() => this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
-                </span>
-                <div className="clearfix" />
-              </Panel.Heading>
-              <Panel.Body>
-                <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-                  <Col sm={8}>{this.renderProperties()}</Col>
-                  <Col sm={4}>{this.renderSelectOptions()}</Col>
-                </Row>
-              </Panel.Body>
-            </Panel>
-          </Tab>
-          <Tab eventKey={3} title="Preview">
-            <Preview revisions={revisions} element={element} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} canDL />
-          </Tab>
-        </Tabs>
-      );
-    }
-    return (<div />);
-  }
-
-  renderList() {
-    const { elements, element } = this.state;
-    const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
-    const tbody = els && els.map((e, idx) => (
-      <tbody key={`tbody_${e.id}`}>
-        <tr key={`row_${e.id}`} id={`row_${e.id}`} style={e.id === element.id ? { fontWeight: 'bold', borderWidth: 'medium', backgroundColor: 'white', borderStyle: 'groove' } : { fontWeight: 'unset' }}>
-          <td>{idx + 1}</td>
-          <td>
-            <ButtonTooltip tip="copy to ..." fa="fa fa-clone" element={e} fnClick={this.copyKlass} />
-            &nbsp;
-            <ButtonTooltip tip="Edit Segment attributes" fnClick={this.editKlass} element={e} />
-            &nbsp;
-          </td>
-          <td>{e.label}</td>
-          <td>{e.desc}</td>
-          <td>
-            {
-              e.is_active ? <i className="fa fa-check" aria-hidden="true" style={{ color: 'green' }} /> : <i className="fa fa-ban" aria-hidden="true" style={{ color: 'red' }} />
-            }
-          </td>
-          <td>
-            <ButtonTooltip tip="Edit Segment template" fnClick={this.handlePropShow} element={e} fa="fa-file-text" />&nbsp;
-            <ButtonTooltip tip="Edit Segment template in JSON format" fnClick={this.showJsonModal} element={e} fa="fa-file-code-o" />
-          </td>
-          <td>{e.element_klass && e.element_klass.label}&nbsp;<i className={e.element_klass && e.element_klass.icon_name} /></td>
-          <td>{e.released_at} (UTC)</td>
-        </tr>
-      </tbody>
-    ));
-    return (
-      <Panel>
-        <Panel.Heading>
-          <Table responsive condensed hover>
-            <thead>
-              <tr style={{ backgroundColor: '#ddd' }}>
-                <th width="4%">#</th>
-                <th width="8%">Actions</th>
-                <th width="12%">Segment Label</th>
-                <th width="20%">Description</th>
-                <th width="8%">Active</th>
-                <th width="12%">Template</th>
-                <th width="16%">Belongs to</th>
-                <th width="18%">Released at</th>
-              </tr>
-            </thead>
-            { tbody }
-          </Table>
-        </Panel.Heading>
-      </Panel>
-    );
-  }
-
-  render() {
-    const { element, layerKey } = this.state;
-    const layer = (element && element.properties_template
-      && element.properties_template.layers[layerKey]) || {};
-
-    const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
-    return (
-      <div>
-        <Button bsStyle="primary" bsSize="small" onClick={() => this.newKlass()}>
-          New Segment&nbsp;<i className="fa fa-plus" aria-hidden="true" />
-        </Button>
-        &nbsp;
-        <br />
-        <div className="list-container-bottom">
-          { this.renderList() }
-          { this.renderPropPanel() }
-          <SelectAttrNewModal
-            showModal={this.state.showAddSelect}
-            fnClose={this.handleSelectClose}
-            fnCreate={this.handleAddSelect}
-          />
-          <LayerAttrNewModal
-            showModal={this.state.showNewLayer}
-            fnClose={this.handleNewLayerClose}
-            fnCreate={this.handleCreateLayer}
-          />
-          <LayerAttrEditModal
-            showModal={this.state.showEditLayer}
-            layer={layer}
-            fnClose={this.handleLayerClose}
-            fnUpdate={this.handleUpdateLayer}
-          />
-          <TemplateJsonModal
-            showModal={this.state.showJson}
-            fnClose={this.hideJsonModal}
-            fnUpdate={this.handleUpdateJson}
-            element={this.state.element}
-          />
-          <AttrNewModal
-            content="Segment"
-            showModal={this.state.showNewKlass}
-            fnClose={this.handleNewKlassClose}
-            fnCreate={this.handleCreateKlass}
-          />
-          <AttrEditModal
-            content="Segment"
-            showModal={this.state.showEditKlass}
-            element={this.state.element}
-            fnClose={this.handleKlassClose}
-            fnDelete={this.handleDeleteKlass}
-            fnActivate={this.handleActivateKlass}
-            fnUpdate={this.handleUpdateKlass}
-          />
-          <FieldCondEditModal
-            showModal={this.state.showFieldCond}
-            layer={layer}
-            allLayers={sortedLayers}
-            layerKey={this.state.layerKey}
-            updSub={this.updSubField}
-            updLayer={this.updLayerSubField}
-            field={this.state.fieldObj}
-            element={this.state.element}
-            fnClose={this.handleFieldCondClose}
-          />
-          <AttrCopyModal
-            content="Segment"
-            showModal={this.state.showCopyKlass}
-            element={this.state.element}
-            fnClose={this.handleCopyKlassClose}
-            fnCopy={this.handleCreateKlass}
-          />
-          <UploadModal
-            content="Generic Segments"
-            klass="SegmentKlass"
-            showModal={this.state.showUpload}
-            fnClose={this.handleUploadClose}
-            fnUpload={this.handleUploadTemplate}
-          />
-        </div>
-        <LoadingModal />
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/TemplateManagement.js b/app/packs/src/admin/TemplateManagement.js
deleted file mode 100644
index 7cf5886ee..000000000
--- a/app/packs/src/admin/TemplateManagement.js
+++ /dev/null
@@ -1,412 +0,0 @@
-import React from 'react';
-import { Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, ButtonGroup, Tooltip, OverlayTrigger, Popover, FormControl } from 'react-bootstrap';
-import ReportTemplateFetcher from '../components/fetchers/ReportTemplateFetcher';
-import Dropzone from 'react-dropzone';
-import Select from 'react-select';
-
-const editTooltip = <Tooltip id="inchi_tooltip">Edit this template</Tooltip>;
-
-export default class TemplateManagement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      templates: [],
-      template: {},
-      attachment: null,
-      showNewTemplateModal: false,
-      deletingTooltip: false,
-      templateType: null,
-      reportTemplateTypes:
-        [
-          { label: 'Standard', value: 'standard' },
-          { label: 'Supporting Information', value: 'supporting_information' },
-          { label: 'Supporting Information - Standard Reaction', value: 'supporting_information_std_rxn' },
-          { label: 'Supporting Information - Spectra', value: 'spectrum' },
-          { label: 'Supporting Information - Reaction List (.xlsx)', value: 'rxn_list_xlsx' },
-          { label: 'Supporting Information - Reaction List (.csv)', value: 'rxn_list_csv' },
-          { label: 'Supporting Information - Reaction List (.html)', value: 'rxn_list_html' }
-        ],
-      showEditTemplateModal: false,
-    };
-    this.handleFetchTemplates = this.handleFetchTemplates.bind(this);
-    this.handleNewTemplateShow = this.handleNewTemplateShow.bind(this);
-    this.handleNewTemplateClose = this.handleNewTemplateClose.bind(this);
-    this.handleCreateNewTemplate = this.handleCreateNewTemplate.bind(this);
-    this.handleFileDrop = this.handleFileDrop.bind(this);
-    this.renderDeleteButton = this.renderDeleteButton.bind(this);
-    this.onTemplateTypeChange = this.onTemplateTypeChange.bind(this);
-    this.handleEditTemplateShow = this.handleEditTemplateShow.bind(this);
-    this.handleEditTemplateClose = this.handleEditTemplateClose.bind(this);
-    this.handleUpdateTemplate = this.handleUpdateTemplate.bind(this);
-  }
-
-  componentDidMount() {
-    this.handleFetchTemplates();
-    return true;
-  }
-
-  componentWillUnmount() {
-  }
-
-  handleNewTemplateShow() {
-    this.setState({
-      showNewTemplateModal: true
-    });
-  }
-
-  handleNewTemplateClose() {
-    this.setState({
-      showNewTemplateModal: false,
-      template: {},
-      attachment: null,
-      templateType: null,
-    });
-  }
-
-  handleEditTemplateShow(id) {
-    ReportTemplateFetcher.fetchTemplateById(id)
-      .then((result) => {
-        this.setState({
-          showEditUserModal: true,
-          template: result.template,
-          templateType: result.template.report_type
-        });
-      });
-  }
-
-  handleEditTemplateClose() {
-    this.setState({
-      showEditUserModal: false,
-      template: {},
-      templateType: null,
-    });
-  }
-
-  handleFetchTemplates() {
-    ReportTemplateFetcher.fetchTemplates()
-      .then((result) => {
-        this.setState({
-          templates: result.templates
-        });
-      });
-  }
-
-  handleCreateNewTemplate() {
-    let params = {
-      attachment: this.state.attachment,
-      name: this.templateName.value.trim(),
-      report_type: this.state.templateType?.value
-    }
-
-    ReportTemplateFetcher.createTemplate(params)()
-      .then(() => {
-        this.handleFetchTemplates();
-      })
-
-    this.handleNewTemplateClose();
-    return true;
-  }
-
-  handleUpdateTemplate(id) {
-    let params = {
-      id: id,
-      attachment: this.state.attachment,
-      name: this.templateName.value.trim(),
-      report_type: this.state.templateType?.value,
-      attachment_id: this.state.template.attachment_id,
-    }
-
-    if (!params.report_type) {
-      params.report_type = this.state.templateType;
-    }
-
-    ReportTemplateFetcher.updateTemplate(params)()
-      .then(() => {
-        this.handleFetchTemplates();
-      })
-
-    this.handleEditTemplateClose();
-    return true;
-  }
-
-  handleFileDrop(attachment_file) {
-    this.setState({ attachment: attachment_file[0] });
-  }
-
-  handleAttachmentRemove() {
-    let newTemplate = this.state.template;
-    newTemplate.attachment = null;
-    newTemplate.attachment_id = null;
-    this.setState({ template: newTemplate, attachment: null });
-  }
-
-  handleDeleteTemplate(template) {
-    ReportTemplateFetcher.deleteAttachment(template)
-      .then(() => {
-        this.handleFetchTemplates();
-      })
-
-    return true;
-  }
-
-  dropzoneOrfilePreview() {
-    const { template, attachment } = this.state;
-    if (template.attachment_id) {
-      return (
-        <div className="control-label">
-          {template.attachment.filename} &nbsp;
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
-            <i className="fa fa-trash-o"></i>
-          </Button>
-        </div>
-      );
-    } else if (attachment) {
-      return (
-        <div className="control-label">
-          {attachment.name} &nbsp;
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove()} className="pull-right">
-            <i className="fa fa-trash-o"></i>
-          </Button>
-        </div>
-      );
-    } else {
-      return (
-        <Dropzone
-          accept="application/pdf,.docx,.xlsx,.html,.csv,.erb"
-          onDrop={attachment_file => this.handleFileDrop(attachment_file)}
-          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-        >
-          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-            Drop File, or Click to Select.
-          </div>
-        </Dropzone>
-      );
-    }
-  }
-
-  onTemplateTypeChange(e) {
-    this.setState({ templateType: e })
-  };
-
-  renderNewTemplateModal() {
-
-    return (
-      <Modal
-        show={this.state.showNewTemplateModal}
-        onHide={this.handleNewTemplateClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>New Template</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-9">
-            <Form horizontal>
-              <FormGroup controlId="formControlName">
-                <Col componentClass={ControlLabel} sm={2}>
-                  Name:
-                </Col>
-                <Col sm={10}>
-                  <FormControl type="text" name="templateName" inputRef={(ref) => { this.templateName = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlReportTemplateType">
-                <Col componentClass={ControlLabel} sm={2}>
-                  Type:
-                </Col>
-                <Col sm={10}>
-                  <Select
-                    options={this.state.reportTemplateTypes}
-                    value={this.state.templateType}
-                    clearable={true}
-                    onChange={this.onTemplateTypeChange}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlAttachment">
-                <Col componentClass={ControlLabel} sm={2}>
-                  File:
-                </Col>
-                <Col sm={10}>
-                  {this.dropzoneOrfilePreview()}
-                </Col>
-              </FormGroup>
-              <FormGroup>
-                <Col smOffset={0} sm={10}>
-                  <Button bsStyle="primary" onClick={() => this.handleCreateNewTemplate()} >
-                    Create&nbsp;
-                    <i className="fa fa-plus" />
-                  </Button>
-                  &nbsp;
-                  <Button bsStyle="warning" onClick={() => this.handleNewTemplateClose()} >
-                    Cancel&nbsp;
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  renderEditTemplateModal() {
-    const { template } = this.state;
-
-    return (
-      <Modal
-        show={this.state.showEditUserModal}
-        onHide={this.handleEditTemplateClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Edit Template</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-9">
-            <Form horizontal>
-              <FormGroup controlId="formControlName">
-                <Col componentClass={ControlLabel} sm={2}>
-                  Name:
-                </Col>
-                <Col sm={10}>
-                  <FormControl type="text" name="templateName" defaultValue={template.name} inputRef={(ref) => { this.templateName = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlReportTemplateType">
-                <Col componentClass={ControlLabel} sm={2}>
-                  Type:
-                </Col>
-                <Col sm={10}>
-                  <Select
-                    options={this.state.reportTemplateTypes}
-                    value={this.state.templateType}
-                    clearable={true}
-                    onChange={this.onTemplateTypeChange}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlAttachment">
-                <Col componentClass={ControlLabel} sm={2}>
-                  File:
-                </Col>
-                <Col sm={10}>
-                  {this.dropzoneOrfilePreview()}
-                </Col>
-              </FormGroup>
-              <FormGroup>
-                <Col smOffset={0} sm={10}>
-                  <Button bsStyle="primary" onClick={() => this.handleUpdateTemplate(template.id)} >
-                    Update&nbsp;
-                    <i className="fa fa-save" />
-                  </Button>
-                  &nbsp;
-                  <Button bsStyle="warning" onClick={() => this.handleEditTemplateClose()} >
-                    Cancel&nbsp;
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  renderDeleteButton(template) {
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        Delete this template? <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleDeleteTemplate(template)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
-            No
-          </Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <ButtonGroup className="actions">
-        <OverlayTrigger
-          animation
-          placement="right"
-          root
-          trigger="focus"
-          overlay={popover}
-        >
-          <Button bsSize="xsmall" bsStyle="danger" >
-            <i className="fa fa-trash-o" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-  }
-
-  toggleTooltip() {
-    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
-  }
-
-  render() {
-    const { templates } = this.state;
-
-    const tcolumn = (
-      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
-        <th width="1%">#</th>
-        <th width="30%">Name</th>
-        <th width="30%">Report Type</th>
-        <th width="2%">ID</th>
-        <th width="30%">Actions</th>
-      </tr>
-    )
-
-    const tbody = templates.map((g, idx) => (
-      <tr key={`row_${g.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
-        <td width="1%">
-          {idx + 1}
-        </td>
-        <td width="30%"> {g.name} </td>
-        <td width="30%"> {(this.state.reportTemplateTypes.find(({ value }) => value === g.report_type) || {}).label} </td>
-        <td width="2%"> {g.id} </td>
-        <td width="12%">
-          <OverlayTrigger placement="bottom" overlay={editTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="info"
-              onClick={() => this.handleEditTemplateShow(g.id)}
-            >
-              <i className="fa fa-user" />
-            </Button>
-          </OverlayTrigger>
-          <ButtonGroup>
-            {this.renderDeleteButton(g)}
-          </ButtonGroup>
-          &nbsp;
-        </td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        <Panel>
-          <Button bsStyle="primary" bsSize="small" onClick={() => this.handleNewTemplateShow()}>
-            Add new template&nbsp;<i className="fa fa-plus" />
-          </Button>
-          &nbsp;
-        </Panel>
-        <Panel>
-          <Table>
-            <thead>
-              {tcolumn}
-            </thead>
-            <tbody>
-              {tbody}
-            </tbody>
-          </Table>
-        </Panel>
-        { this.renderNewTemplateModal()}
-        { this.renderEditTemplateModal()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/UserManagement.js b/app/packs/src/admin/UserManagement.js
deleted file mode 100644
index 4fd8421f8..000000000
--- a/app/packs/src/admin/UserManagement.js
+++ /dev/null
@@ -1,944 +0,0 @@
-import React from 'react';
-import { Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, FormControl, Tooltip, OverlayTrigger, Tabs, Tab } from 'react-bootstrap';
-import Select from 'react-select';
-import { CSVReader } from 'react-papaparse';
-import UsersFetcher from '../components/fetchers/UsersFetcher';
-import AdminFetcher from '../components/fetchers/AdminFetcher';
-import MessagesFetcher from '../components/fetchers/MessagesFetcher';
-
-const loadUserByName = (input) => {
-  if (!input) {
-    return Promise.resolve({ options: [] });
-  }
-
-  return UsersFetcher.fetchUsersByName(input)
-    .then((res) => {
-      const usersEntries = res.users.filter(u => u.user_type === 'Person')
-        .map(u => ({
-          value: u.id,
-          name: u.name,
-          label: `${u.name}(${u.abb})`
-        }));
-      return { options: usersEntries };
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-};
-
-const handleResetPassword = (id, random) => {
-  AdminFetcher.resetUserPassword({ user_id: id, random })
-    .then((result) => {
-      if (result.rp) {
-        let message = '';
-        if (random) {
-          message = result.pwd ? `Password reset! New password: \n ${result.pwd}`
-            : 'Password reset!';
-        } else {
-          message = result.email ? `Password reset! instructions sent to : \n ${result.email}`
-            : 'Password instruction sent!';
-        }
-        alert(message);
-      } else {
-        alert(`Password reset fail: \n ${result.pwd}`);
-      }
-    });
-};
-
-const validateEmail = mail => (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail));
-const editTooltip = <Tooltip id="inchi_tooltip">edit User Info</Tooltip>;
-const resetPasswordTooltip = <Tooltip id="assign_button">reset password</Tooltip>;
-const resetPasswordInstructionsTooltip = <Tooltip id="assign_button">send password instructions</Tooltip>;
-const confirmUserTooltip = <Tooltip id="assign_button">confirm this account</Tooltip>;
-const confirmEmailChangeTooltip = email => (<Tooltip id="email_change_button">confirm email: <br /> {email}</Tooltip>);
-const disableTooltip = <Tooltip id="assign_button">lock this account</Tooltip>;
-const enableTooltip = <Tooltip id="assign_button">unlock this account</Tooltip>;
-const converterEnableTooltip = <Tooltip id="assign_button">Enable Converter profiles editing for this user (currently disabled)</Tooltip>;
-const converterDisableTooltip = <Tooltip id="assign_button">Disable Converter profiles editing for this user (currently enabled)</Tooltip>;
-const templateModeratorEnableTooltip = <Tooltip id="assign_button">Enable Ketcher template editing for this user (currently disabled)</Tooltip>;
-const templateModeratorDisableTooltip = <Tooltip id="assign_button">Disable Ketcher template editing for this user (currently enabled)</Tooltip>;
-const moleculeModeratorEnableTooltip = <Tooltip id="assign_button">Enable editing the representation of the global molecules for this user (currently disabled)</Tooltip>;
-const moleculeModeratorDisableTooltip = <Tooltip id="assign_button">Disable editing the representation of the global molecules for this user (currently enabled)</Tooltip>;
-const accountActiveTooltip = <Tooltip id="assign_button">This user account is deactivated, press button to [activate]</Tooltip>;
-const accountInActiveTooltip = <Tooltip id="assign_button">This user account is activated, press button to [deactivate]</Tooltip>;
-
-export default class UserManagement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      users: [],
-      user: {},
-      selectedUsers: null,
-      showMsgModal: false,
-      showNewUserModal: false,
-      showEditUserModal: false,
-      messageNewUserModal: '',
-      messageEditUserModal: '',
-      processingSummaryUserFile: '',
-    };
-    this.handleFetchUsers = this.handleFetchUsers.bind(this);
-    this.handleMsgShow = this.handleMsgShow.bind(this);
-    this.handleMsgClose = this.handleMsgClose.bind(this);
-    this.handleNewUserShow = this.handleNewUserShow.bind(this);
-    this.handleNewUserClose = this.handleNewUserClose.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.messageSend = this.messageSend.bind(this);
-    this.handleCreateNewUser = this.handleCreateNewUser.bind(this);
-    this.handleEditUserShow = this.handleEditUserShow.bind(this);
-    this.handleEditUserClose = this.handleEditUserClose.bind(this);
-    this.handleUpdateUser = this.handleUpdateUser.bind(this);
-  }
-
-  componentDidMount() {
-    this.handleFetchUsers();
-    return true;
-  }
-
-  componentWillUnmount() {
-  }
-
-  handleMsgShow() {
-    this.setState({
-      showMsgModal: true
-    });
-  }
-
-  handleMsgClose() {
-    this.setState({
-      showMsgModal: false
-    });
-  }
-
-  handleNewUserShow() {
-    this.setState({
-      showNewUserModal: true
-    });
-  }
-
-  handleNewUserClose() {
-    this.setState({
-      showNewUserModal: false
-    });
-  }
-
-  handleEditUserShow(user) {
-    this.setState({
-      showEditUserModal: true,
-      messageEditUserModal: '',
-      user
-    });
-  }
-
-  handleEditUserClose() {
-    this.setState({
-      showEditUserModal: false,
-      messageEditUserModal: '',
-      user: {}
-    });
-  }
-
-  handleFetchUsers() {
-    AdminFetcher.fetchUsers()
-      .then((result) => {
-        this.setState({
-          users: result.users
-        });
-      });
-  }
-
-  handleEnableDisableAccount(id, lockedAt) {
-    AdminFetcher.updateAccount({ user_id: id, enable: lockedAt !== null })
-      .then((result) => {
-        this.handleFetchUsers();
-        const message = lockedAt !== null ? 'Account unlocked!' : 'Account locked!'; //
-        alert(message);
-      });
-  }
-
-  handleConverterAdmin(id, isConverterAdmin) {
-    AdminFetcher.updateAccount({ user_id: id, converter_admin: !isConverterAdmin })
-      .then((result) => {
-        this.handleFetchUsers();
-        const message = isConverterAdmin === true ? 'Disable Converter profiles editing for this user' : 'Enable Converter profiles editing for this user';
-        alert(message);
-      });
-  }
-
-  handleTemplatesModerator(id, isTemplatesModerator) {
-    AdminFetcher.updateAccount({ user_id: id, is_templates_moderator: !isTemplatesModerator })
-      .then((result) => {
-        this.handleFetchUsers();
-        const message = isTemplatesModerator === true ? 'Disable Ketcher template editing for this user' : 'Enable Ketcher template editing for this user';
-        alert(message);
-      });
-  }
-
-  handleMoleculesModerator(id, isMoleculesEditor) {
-    AdminFetcher.updateAccount({ user_id: id, molecule_editor: !isMoleculesEditor })
-      .then((result) => {
-        this.handleFetchUsers();
-        const message = isMoleculesEditor === true ? 'Disable editing the representation of the global molecules for this user' : 'Enable editing the representation of the global molecules for this user';
-        alert(message);
-      });
-  }
-
-  handleActiveInActiveAccount(id, isActive) {
-    AdminFetcher.updateAccount({ user_id: id, account_active: !isActive })
-      .then((result) => {
-        this.handleFetchUsers();
-        const message = isActive === true ? 'User is In-Active!' : 'User is Active now!';
-        alert(message);
-      });
-  }
-
-  handleSelectUser(val) {
-    if (val) {
-      this.setState({ selectedUsers: val });
-    }
-  }
-
-  handleConfirmUserAccount(id) {
-    AdminFetcher.updateAccount({ user_id: id, confirm_user: true })
-      .then((result) => {
-        if (result !== null) {
-          this.handleFetchUsers();
-          alert('User Account has been confirmed!');
-        }
-      });
-  }
-
-  handleReConfirmUserAccount(id) {
-    AdminFetcher.updateAccount({ user_id: id, reconfirm_user: true })
-      .then((result) => {
-        if (result !== null) {
-          this.handleFetchUsers();
-          alert('User New Email has been confirmed!');
-        }
-      });
-  }
-
-  validateUserInput() {
-    if (this.email.value === '') { // also validated in backend
-      this.setState({ messageNewUserModal: 'Please input email.' });
-      return false;
-    } else if (!validateEmail(this.email.value.trim())) { // also validated in backend
-      this.setState({ messageNewUserModal: 'You have entered an invalid email address!' });
-      return false;
-    } else if (this.password.value.trim() === '' || this.passwordConfirm.value.trim() === '') {
-      this.setState({ messageNewUserModal: 'Please input password with correct format.' });
-      return false;
-    } else if (this.password.value.trim() !== this.passwordConfirm.value.trim()) {
-      this.setState({ messageNewUserModal: 'passwords do not mach!' });
-      return false;
-    } else if (this.password.value.trim().length < 8) { // also validated in backend
-      this.setState({ messageNewUserModal: 'Password is too short (minimum is 8 characters)' });
-      return false;
-    } else if (this.firstname.value.trim() === '' || this.lastname.value.trim() === '' || this.nameAbbr.value.trim() === '') { // also validated in backend
-      this.setState({ messageNewUserModal: 'Please input First name, Last name and Name abbreviation' });
-      return false;
-    }
-    return true;
-  }
-
-  handleCreateNewUser() {
-    if (!this.validateUserInput()) {
-      return false;
-    }
-    AdminFetcher.createUserAccount({
-      email: this.email.value.trim(),
-      password: this.password.value.trim(),
-      first_name: this.firstname.value.trim(),
-      last_name: this.lastname.value.trim(),
-      name_abbreviation: this.nameAbbr.value.trim(),
-      type: this.type.value
-    })
-      .then((result) => {
-        if (result.error) {
-          this.setState({ messageNewUserModal: result.error });
-          return false;
-        }
-        this.setState({ messageNewUserModal: 'New user created.' });
-        this.email.value = '';
-        this.password.value = '';
-        this.passwordConfirm.value = '';
-        this.firstname.value = '';
-        this.lastname.value = '';
-        this.nameAbbr.value = '';
-        this.handleFetchUsers();
-        return true;
-      });
-    return true;
-  }
-
-  handleOnDropUserFile = (data, file) => {
-    const validFileTypes = ['text/csv', 'application/vnd.ms-excel'];
-    if (!validFileTypes.includes(file.type)) { // Note that MIME type doesn't reliably indicate file type. It's only an initial guard and data is validated more thoroughly during processing.
-      this.setState({ processingSummaryUserFile: `Invalid file type ${file.type}. Please make sure to upload a CSV file.` });
-      this.newUsers = null;
-      return false;
-    }
-    this.newUsers = data;
-    for (let i = 0; i < this.newUsers.length; i++) {
-      this.newUsers[i].data.row = i + 1;
-    }
-  };
-
-  handleOnErrorUserFile = (err, file, inputElem, reason) => {
-    console.log(err);
-    this.newUsers = null;
-  };
-
-  handleOnRemoveUserFile = (data) => {
-    this.newUsers = null;
-  };
-
-  handleCreateNewUsersFromFile() {
-    if (!this.validUserFile()) {
-      this.newUsers = null;
-      this.setState({ messageNewUserModal: 'Finished processing user file.' });
-    } else {
-      const promisedNewUsers = this.newUsers.map(user => this.createNewUserFromFile(user));
-      Promise.allSettled(promisedNewUsers)
-        .then((userResults) => {
-          this.showProcessingSummaryUserFile(userResults);
-        })
-        .then(() => this.handleFetchUsers())
-        .catch((reason) => {
-          this.setState({ messageNewUserModal: `Failed to process user file: ${reason}.` });
-        });
-    }
-  }
-
-  createNewUserFromFile(newUser) {
-    return AdminFetcher.createUserAccount({
-      email: newUser.data.email.trim(),
-      password: newUser.data.password.trim(),
-      first_name: newUser.data.firstname.trim(),
-      last_name: newUser.data.lastname.trim(),
-      name_abbreviation: newUser.data.nameabbr.trim(),
-      type: newUser.data.type.trim()
-    })
-      .then((result) => {
-        let userResult = `Row ${newUser.data.row}: Successfully created new user.`;
-        if (result.error) {
-          userResult = `Row ${newUser.data.row}: Failed to create user; ${result.error}.`;
-        }
-        this.setState({ messageNewUserModal: userResult });
-        return userResult;
-      });
-  }
-
-  validUserFile() {
-    if (!Array.isArray(this.newUsers) || !this.newUsers.length) {
-      this.setState({ processingSummaryUserFile: 'The file is empty.' });
-      return false;
-    }
-
-    const nUsers = this.newUsers.length;
-    const nUsersMax = 100;
-    if (nUsers > nUsersMax) {
-      this.setState({ processingSummaryUserFile: `The file contains too many users. Please make sure that the number of users you add from a single file doesn't exceed ${nUsersMax}.` });
-      return false;
-    }
-
-    const fileHeader = this.newUsers[0].meta.fields;
-    const validHeader = ['email', 'password', 'firstname', 'lastname', 'nameabbr', 'type'];
-    if (!(fileHeader.length === validHeader.length &&
-      fileHeader.every((val, index) => val === validHeader[index]))) {
-      this.setState({ processingSummaryUserFile: `The file contains an invalid header ${fileHeader}. Please make sure that your file's header is organized as follows: ${validHeader}.` });
-      return false;
-    }
-
-    let parsingErrorMessage = '';
-    this.newUsers.forEach((user) => {
-      const parsingErrors = user.errors;
-      if (parsingErrors.length) {
-        parsingErrors.forEach((error) => {
-          parsingErrorMessage += `Row ${user.data.row}: The user could not be parsed correctly; ${error.message}\n\n`;
-        });
-      }
-    });
-    if (!(parsingErrorMessage === '')) {
-      this.setState({ processingSummaryUserFile: parsingErrorMessage });
-      return false;
-    }
-
-    // We need to guard against invalid user types when creating multiple users from file,
-    // since user type is not validated on the backend.
-    // The backend doesn't validate user type because in the modal for adding a single users,
-    // the user type cannot be invalid since it's selected from a dropdown.
-    // However, when multiple users are created from a file, type can be any string.
-    const validTypes = ['Person', 'Device', 'Admin'];
-    let invalidTypeMessage = '';
-    this.newUsers.forEach((user) => {
-      const userType = user.data.type.trim();
-      if (!validTypes.includes(userType)) {
-        invalidTypeMessage += `Row ${user.data.row}: The user's type "${userType}" is invalid. Please select a valid type from ${validTypes}.\n\n`;
-      }
-    });
-    if (!(invalidTypeMessage === '')) {
-      this.setState({ processingSummaryUserFile: invalidTypeMessage });
-      return false;
-    }
-
-    const sortedUserEmails = this.newUsers.map(user => user.data.email).sort();
-    const duplicateUserEmails = new Set();
-    for (let i = 0; i < sortedUserEmails.length - 1; i++) {
-      if (sortedUserEmails[i + 1] == sortedUserEmails[i]) {
-        duplicateUserEmails.add(sortedUserEmails[i]);
-      }
-    }
-    if (duplicateUserEmails.size) {
-      this.setState({ processingSummaryUserFile: `The file contains duplicate user emails: ${Array.from(duplicateUserEmails.values())}. Please make sure that each user has a unique email.` });
-      return false;
-    }
-
-    return true;
-  }
-
-  showProcessingSummaryUserFile(userResults) {
-    let summary = '';
-    userResults.forEach((result) => {
-      summary += `${result.value}\n\n`;
-    });
-    this.setState({
-      messageNewUserModal: 'Finished processing user file.',
-      processingSummaryUserFile: summary
-    });
-  }
-
-  handleUpdateUser(user) {
-    if (!validateEmail(this.u_email.value.trim())) {
-      this.setState({ messageEditUserModal: 'You have entered an invalid email address!' });
-      return false;
-    } else if (this.u_firstname.value.trim() === '' || this.u_lastname.value.trim() === '' || this.u_abbr.value.trim() === '') {
-      this.setState({ messageEditUserModal: 'please input first name, last name and name abbreviation!' });
-      return false;
-    }
-    AdminFetcher.updateUser({
-      id: user.id,
-      email: this.u_email.value.trim(),
-      first_name: this.u_firstname.value.trim(),
-      last_name: this.u_lastname.value.trim(),
-      name_abbreviation: this.u_abbr.value.trim(),
-      type: this.u_type.value
-    })
-      .then((result) => {
-        if (result.error) {
-          this.setState({ messageEditUserModal: result.error });
-          return false;
-        }
-        this.setState({ showEditUserModal: false, messageEditUserModal: '' });
-        this.u_email.value = '';
-        this.u_firstname.value = '';
-        this.u_lastname.value = '';
-        this.u_abbr.value = '';
-        this.handleFetchUsers();
-        return true;
-      });
-    return true;
-  }
-  messageSend() {
-    const { selectedUsers } = this.state;
-    if (this.myMessage.value === '') {
-      alert('Please input the message!');
-    } else if (!selectedUsers) {
-      alert('Please select user(s)!');
-    } else {
-      const userIds = [];
-      selectedUsers.map((g) => {
-        userIds.push(g.value);
-        return true;
-      });
-      MessagesFetcher.channelIndividualUsers()
-        .then((result) => {
-          const params = {
-            channel_id: result.id,
-            content: this.myMessage.value,
-            user_ids: userIds
-          };
-          MessagesFetcher.createMessage(params)
-            .then((result) => {
-              this.myMessage.value = '';
-              this.setState({
-                selectedUsers: null
-              });
-              this.handleMsgClose();
-            });
-        });
-    }
-  }
-
-  renderMessageModal() {
-    const { selectedUsers } = this.state;
-    return (
-      <Modal
-        show={this.state.showMsgModal}
-        onHide={this.handleMsgClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Send Message</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-9">
-            <Form>
-              <FormGroup controlId="formControlsTextarea">
-                <ControlLabel>Message</ControlLabel>
-                <FormControl
-                  componentClass="textarea"
-                  placeholder="message..."
-                  rows="20"
-                  inputRef={(ref) => { this.myMessage = ref; }}
-                />
-              </FormGroup>
-              <FormGroup>
-                <Select.AsyncCreatable
-                  multi
-                  isLoading
-                  backspaceRemoves
-                  value={selectedUsers}
-                  valueKey="value"
-                  labelKey="label"
-                  matchProp="name"
-                  placeholder="Select users"
-                  promptTextCreator={this.promptTextCreator}
-                  loadOptions={loadUserByName}
-                  onChange={this.handleSelectUser}
-                />
-              </FormGroup>
-              <Button
-                bsStyle="primary"
-                onClick={() => this.messageSend()}
-              >
-                Send&nbsp;
-                <i className="fa fa-paper-plane" />
-              </Button>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  renderNewUserModal() {
-    // const { selectedUsers } = this.state;
-    return (
-      <Modal
-        show={this.state.showNewUserModal}
-        onHide={this.handleNewUserClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>New User</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Tabs id="createUserTabs">
-            <Tab eventKey="singleUser" title="Single user">
-              <Form horizontal>
-                <FormGroup controlId="formControlEmail">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Email:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="email" name="email" inputRef={(ref) => { this.email = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlPassword">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Password:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="password" name="password" inputRef={(ref) => { this.password = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlPasswordConfirmation">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Password Confirmation:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="password" inputRef={(ref) => { this.passwordConfirm = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlFirstName">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    First name:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="text" name="firstname" inputRef={(ref) => { this.firstname = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlLastName">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Last name:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="text" name="lastname" inputRef={(ref) => { this.lastname = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlAbbr">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Abbr (3) *:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl type="text" name="nameAbbr" inputRef={(ref) => { this.nameAbbr = ref; }} />
-                  </Col>
-                </FormGroup>
-                <FormGroup controlId="formControlsType">
-                  <Col componentClass={ControlLabel} sm={3}>
-                    Type:
-                  </Col>
-                  <Col sm={9}>
-                    <FormControl componentClass="select" inputRef={(ref) => { this.type = ref; }} >
-                      <option value="Person">Person</option>
-                      <option value="Admin">Admin</option>
-                      <option value="Device">Device</option>
-                    </FormControl>
-                  </Col>
-                </FormGroup>
-                <FormGroup>
-                  <Col smOffset={0} sm={10}>
-                    <Button bsStyle="primary" onClick={() => this.handleCreateNewUser()} >
-                      Create user&nbsp;
-                      <i className="fa fa-plus" />
-                    </Button>
-                  </Col>
-                </FormGroup>
-              </Form>
-            </Tab>
-            <Tab eventKey="multiUser" title="Multiple users from file">
-              <Form>
-                <FormGroup>
-                  <ControlLabel>Please format the user file like the table below.</ControlLabel>
-                  <Table striped bordered hover>
-                    <thead>
-                      <tr>
-                        <th>email</th>
-                        <th>password</th>
-                        <th>firstname</th>
-                        <th>lastname</th>
-                        <th>nameabbr</th>
-                        <th>type</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td>john.doe@eln.edu</td>
-                        <td>password0</td>
-                        <td>John</td>
-                        <td>Doe</td>
-                        <td>jod</td>
-                        <td>Person</td>
-                      </tr>
-                      <tr>
-                        <td>jane.doe@eln.edu</td>
-                        <td>password1</td>
-                        <td>Jane</td>
-                        <td>Doe</td>
-                        <td>jad</td>
-                        <td>Person</td>
-                      </tr>
-                    </tbody>
-                  </Table>
-                </FormGroup>
-                <FormGroup id="userFileDragAndDrop">
-                  <CSVReader
-                    onDrop={this.handleOnDropUserFile}
-                    onError={this.handleOnErrorUserFile}
-                    style={{}}
-                    config={{ header: true, skipEmptyLines: true }}
-                    addRemoveButton
-                    onRemoveFile={this.handleOnRemoveUserFile}
-                  >
-                    <span>Drop a CSV user file here or click to upload.
-                      The following column-delimiters are accepted: &apos;,&apos; or &apos;;&apos; or &apos;tab&apos;.
-                    </span>
-                  </CSVReader>
-                </FormGroup>
-                <FormGroup>
-                  <Button bsStyle="primary" onClick={() => this.handleCreateNewUsersFromFile()} >
-                    Create users&nbsp;
-                    <i className="fa fa-plus" />
-                  </Button>
-                </FormGroup>
-                <FormGroup>
-                  <ControlLabel>Processing Summary</ControlLabel>
-                  <FormControl
-                    readOnly
-                    id="processingSummary"
-                    componentClass="textarea"
-                    rows="5"
-                    style={{ whiteSpace: 'pre-wrap', overflowY: 'scroll' }}
-                    value={this.state.processingSummaryUserFile}
-                  />
-                </FormGroup>
-              </Form>
-            </Tab>
-          </Tabs>
-          <Modal.Footer>
-            <FormGroup controlId="formControlMessage">
-              <FormControl type="text" readOnly name="messageNewUserModal" value={this.state.messageNewUserModal} />
-            </FormGroup>
-            <Button bsStyle="warning" onClick={() => this.handleNewUserClose()} >Cancel</Button>
-          </Modal.Footer>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-
-  renderEditUserModal() {
-    const { user } = this.state;
-    return (
-      <Modal
-        show={this.state.showEditUserModal}
-        onHide={this.handleEditUserClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Edit User</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-9">
-            <Form horizontal>
-              <FormGroup controlId="formControlEmail">
-                <Col componentClass={ControlLabel} sm={3}>
-                  Email:
-                </Col>
-                <Col sm={9}>
-                  <FormControl type="email" name="u_email" defaultValue={user.email} inputRef={(ref) => { this.u_email = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlFirstName">
-                <Col componentClass={ControlLabel} sm={3}>
-                  First name:
-                </Col>
-                <Col sm={9}>
-                  <FormControl type="text" name="u_firstname" defaultValue={user.first_name} inputRef={(ref) => { this.u_firstname = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlLastName">
-                <Col componentClass={ControlLabel} sm={3}>
-                  Last name:
-                </Col>
-                <Col sm={9}>
-                  <FormControl type="text" name="u_lastname" defaultValue={user.last_name} inputRef={(ref) => { this.u_lastname = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlAbbr">
-                <Col componentClass={ControlLabel} sm={3}>
-                  Abbr (3):
-                </Col>
-                <Col sm={9}>
-                  <FormControl type="text" name="u_abbr" defaultValue={user.initials} inputRef={(ref) => { this.u_abbr = ref; }} />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlsType">
-                <Col componentClass={ControlLabel} sm={3}>
-                  Type:
-                </Col>
-                <Col sm={9}>
-                  <FormControl componentClass="select" defaultValue={user.type} inputRef={(ref) => { this.u_type = ref; }} >
-                    <option value="Person">Person</option>
-                    <option value="Group">Group</option>
-                    <option value="Device">Device</option>
-                    <option value="Admin">Admin</option>
-                  </FormControl>
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formControlMessage">
-                <Col sm={12}>
-                  <FormControl type="text" readOnly name="messageEditUserModal" value={this.state.messageEditUserModal} />
-                </Col>
-              </FormGroup>
-              <FormGroup>
-                <Col smOffset={0} sm={10}>
-                  <Button bsStyle="primary" onClick={() => this.handleUpdateUser(user)} >
-                    Update&nbsp;
-                    <i className="fa fa-save" />
-                  </Button>
-                  &nbsp;
-                  <Button bsStyle="warning" onClick={() => this.handleEditUserClose()} >
-                    Cancel&nbsp;
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    const renderConfirmButton = (show, userId) => {
-      if (show) {
-        return (
-          <OverlayTrigger placement="bottom" overlay={confirmUserTooltip}>
-            <Button
-              bsSize="xsmall"
-              bsStyle="info"
-              onClick={() => this.handleConfirmUserAccount(userId, false)}
-            >
-              <i className="fa fa-check-square" />
-            </Button>
-          </OverlayTrigger>
-        );
-      }
-      return <span />;
-    };
-
-    const renderReConfirmButton = (unconfirmed_email, userId) => {
-      if (unconfirmed_email) {
-        return (
-          <OverlayTrigger placement="bottom" overlay={confirmEmailChangeTooltip(unconfirmed_email)}>
-            <Button
-              bsSize="xsmall"
-              bsStyle="warning"
-              onClick={() => this.handleReConfirmUserAccount(userId)}
-            >
-              <i className="fa fa-check-square" />
-            </Button>
-          </OverlayTrigger>
-        );
-      }
-      return <span />;
-    };
-
-    const { users } = this.state;
-
-    const tcolumn = (
-      <tr style={{ height: '26px', verticalAlign: 'middle' }}>
-        <th width="1%">#</th>
-        <th width="12%">Actions</th>
-        <th width="12%">Name</th>
-        <th width="6%">Abbr.</th>
-        <th width="8%">Email</th>
-        <th width="7%">Type</th>
-        <th width="15%">Login at</th>
-        <th width="2%">ID</th>
-      </tr>
-    );
-
-    const tbody = users.map((g, idx) => (
-      <tr key={`row_${g.id}`} style={{ height: '26px', verticalAlign: 'middle' }}>
-        <td width="1%">
-          {idx + 1}
-        </td>
-        <td width="12%">
-          <OverlayTrigger placement="bottom" overlay={editTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="info"
-              onClick={() => this.handleEditUserShow(g)}
-            >
-              <i className="fa fa-user" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={resetPasswordTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="success"
-              onClick={() => handleResetPassword(g.id, true)}
-            >
-              <i className="fa fa-key" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={resetPasswordInstructionsTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle="primary"
-              onClick={() => handleResetPassword(g.id, false)}
-            >
-              <i className="fa fa-key" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={g.locked_at === null ? disableTooltip : enableTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle={g.locked_at === null ? 'default' : 'warning'}
-              onClick={() => this.handleEnableDisableAccount(g.id, g.locked_at, false)}
-            >
-              <i className={g.locked_at === null ? 'fa fa-lock' : 'fa fa-unlock'} />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={(g.converter_admin === null || g.converter_admin === false) ? converterEnableTooltip : converterDisableTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle={(g.converter_admin === null || g.converter_admin === false) ? 'default' : 'success'}
-              onClick={() => this.handleConverterAdmin(g.id, g.converter_admin, false)}
-            >
-              <i className="fa fa-hourglass-half" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={(g.is_templates_moderator === null || g.is_templates_moderator === false) ? templateModeratorEnableTooltip : templateModeratorDisableTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle={(g.is_templates_moderator === null || g.is_templates_moderator === false) ? 'default' : 'success'}
-              onClick={() => this.handleTemplatesModerator(g.id, g.is_templates_moderator, false)}
-            >
-              <i className="fa fa-book" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={(g.molecule_editor == null || g.molecule_editor === false) ? moleculeModeratorEnableTooltip : moleculeModeratorDisableTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle={(g.molecule_editor === null || g.molecule_editor === false) ? 'default' : 'success'}
-              onClick={() => this.handleMoleculesModerator(g.id, g.molecule_editor, false)}
-            >
-              <i className="icon-sample" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          <OverlayTrigger placement="bottom" overlay={g.account_active === false ? accountActiveTooltip : accountInActiveTooltip} >
-            <Button
-              bsSize="xsmall"
-              bsStyle={g.account_active === true ? 'default' : 'danger'}
-              onClick={() => this.handleActiveInActiveAccount(g.id, g.account_active)}
-            >
-              <i className={g.account_active === true ? 'fa fa-user-circle' : 'fa fa-user-times'} aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-          &nbsp;
-          { renderConfirmButton(g.type !== 'Device' && (g.confirmed_at == null || g.confirmed_at.length <= 0), g.id) }
-          { renderReConfirmButton(g.unconfirmed_email, g.id) }
-        </td>
-        <td width="12%"> {g.name} </td>
-        <td width="6%"> {g.initials} </td>
-        <td width="8%"> {g.email} </td>
-        <td width="7%"> {g.type} </td>
-        <td width="15%"> {g.current_sign_in_at} </td>
-        <td width="2%"> {g.id} </td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        <Panel>
-          <Button bsStyle="warning" bsSize="small" onClick={() => this.handleMsgShow()}>
-            Send Message&nbsp;<i className="fa fa-commenting-o" />
-          </Button>
-          &nbsp;
-          <Button bsStyle="primary" bsSize="small" onClick={() => this.handleNewUserShow()}>
-            New User&nbsp;<i className="fa fa-plus" />
-          </Button>
-        </Panel>
-        <Panel>
-          <Table>
-            <thead>
-              { tcolumn }
-            </thead>
-            <tbody>
-              { tbody }
-            </tbody>
-          </Table>
-        </Panel>
-        { this.renderMessageModal() }
-        { this.renderNewUserModal() }
-        { this.renderEditUserModal() }
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/admin/converter/ConverterAdmin.js b/app/packs/src/admin/converter/ConverterAdmin.js
deleted file mode 100644
index 85eb7d02e..000000000
--- a/app/packs/src/admin/converter/ConverterAdmin.js
+++ /dev/null
@@ -1,407 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, Button } from 'react-bootstrap';
-import { ProfileList, ProfileForm, FileUploadForm } from 'chemotion-converter-client';
-
-import ConverterApi from '../../components/fetchers/ConverterFetcher';
-import GenericDSsFetcher from '../../components/fetchers/GenericDSsFetcher';
-
-class ConverterAdmin extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: 'list',
-      client: null,
-      selectedFile: null,
-      profiles: [],
-      options: [],
-      datasets: [],
-      profile: null,
-      error: false,
-      errorMessage: '',
-      isLoading: false,
-      createdModal: false,
-      deleteModal: false
-    };
-
-    this.showCreateView = this.showCreateView.bind(this);
-    this.showUpdateView = this.showUpdateView.bind(this);
-    this.showImportView = this.showImportView.bind(this);
-
-    this.showCreatedModal = this.showCreatedModal.bind(this);
-    this.hideCreatedModal = this.hideCreatedModal.bind(this);
-
-    this.showDeleteModal = this.showDeleteModal.bind(this);
-    this.hideDeleteModal = this.hideDeleteModal.bind(this);
-
-    this.updateProfile = this.updateProfile.bind(this);
-    this.storeProfile = this.storeProfile.bind(this);
-    this.deleteProfile = this.deleteProfile.bind(this);
-    this.downloadProfile = this.downloadProfile.bind(this);
-
-    this.updateFile = this.updateFile.bind(this);
-    this.uploadFile = this.uploadFile.bind(this);
-    this.importFile = this.importFile.bind(this);
-
-    this.dispatchView = this.dispatchView.bind(this);
-  }
-
-  componentDidMount() {
-    Promise.all([
-      ConverterApi.fetchProfiles(),
-      GenericDSsFetcher.listDatasetKlass(),
-      ConverterApi.fetchOptions()
-    ]).then((responses) => {
-      const [profiles, klass, options] = responses;
-      const datasets = klass.klass.map((kl) => {
-        const pr = kl.properties_release;
-        pr.name = kl.label;
-        pr.ols = kl.ols_term_id;
-        return pr;
-      });
-
-      this.setState({
-        profiles: profiles?.profiles || [], datasets, options: options?.options || [], client: options?.client || null
-      });
-    });
-  }
-
-  showImportView() {
-    this.setState({
-      status: 'import',
-      profile: null
-    })
-  }
-
-  showCreateView() {
-    this.setState({
-      status: 'upload',
-      profile: null
-    })
-  }
-
-  showUpdateView(profile) {
-    this.setState({
-      status: 'update',
-      profile: Object.assign({}, profile),
-      error: false,
-      errorMessage: ''
-    })
-  }
-
-  showCreatedModal() {
-    this.setState({
-      createdModal: true
-    })
-  }
-
-  hideCreatedModal() {
-    this.setState({
-      createdModal: false
-    })
-  }
-
-  showDeleteModal(profile) {
-    this.setState({
-      deleteModal: true,
-      profile: Object.assign({}, profile),
-    })
-  }
-
-  hideDeleteModal() {
-    this.setState({
-      deleteModal: false,
-      profile: null
-    })
-  }
-
-  updateProfile(profile) {
-    this.setState({ profile })
-  }
-
-  storeProfile() {
-    const { status, profile } = this.state
-
-    // remove show flag
-    if (Array.isArray(profile.identifiers)) {
-      profile.identifiers.forEach(identifier => {
-        delete identifier.show
-      })
-    }
-
-    if (status == 'create') {
-      ConverterApi.createProfile(profile)
-        .then(response => {
-          const profiles = [...this.state.profiles]
-          profiles.push(response)
-          this.setState({
-            status: 'list',
-            profiles: profiles,
-            profile: null
-          }, this.showCreatedModal())
-        })
-    } else if (status == 'update') {
-      ConverterApi.updateProfile(profile)
-        .then((response) => {
-          const profiles = [...this.state.profiles]
-          const index = profiles.findIndex(p => (p.id == response.id))
-          profiles[index] = response
-          this.setState({
-            status: 'list',
-            profiles: profiles,
-            profile: null
-          })
-        })
-    }
-  }
-
-  deleteProfile() {
-    ConverterApi.deleteProfile(this.state.profile)
-      .then(() => {
-        const profiles = [...this.state.profiles]
-        const index = profiles.findIndex(p => (p.id == this.state.profile.id))
-        profiles.splice(index, 1)
-        this.setState({
-          status: 'list',
-          profiles: profiles,
-          profile: null
-        }, this.hideDeleteModal())
-      }
-    )
-  }
-
-  downloadProfile(profile) {
-    const a = document.createElement('a')
-    a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(profile, null, 2))
-    a.download = profile.id + '.json'
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-
-  updateFile(event) {
-    this.setState({
-      selectedFile: event.target.files[0],
-      loaded: 0,
-      isLoading: false,
-      error: false,
-      errorMessage: ''
-    })
-  }
-
-  uploadFile() {
-    const { selectedFile } = this.state
-
-    this.setState({
-      isLoading: true
-    })
-
-    ConverterApi.fetchTables(selectedFile)
-      .then(data => {
-        if (data) {
-          const profile = {
-            title: '',
-            description: '',
-            tables: [],
-            identifiers: [],
-            data: data,
-          }
-
-          this.setState({
-            status: 'create',
-            profile: profile,
-            selectedFile: null,
-            isLoading: false,
-            error: false,
-            errorMessage: ''
-          })
-        }
-      })
-      .catch(error => {
-        if (error.status === 413) {
-          this.setState({
-            error: true,
-            errorMessage: 'The uploaded file is too large.',
-            isLoading: false
-          })
-        } else {
-          error.text().then(errorMessage => {
-            this.setState({
-              error: true,
-              errorMessage: JSON.parse(errorMessage).error,
-              isLoading: false
-            })
-          })
-        }
-      })
-  }
-
-  importFile() {
-    const { selectedFile } = this.state
-
-    this.setState({
-      isLoading: true
-    })
-
-    const createProfile = e => {
-      const fileProfile = JSON.parse(e.target.result)
-
-      ConverterApi.createProfile(fileProfile)
-        .then(profile => {
-          const profiles = [...this.state.profiles]
-          profiles.push(profile)
-          this.setState({
-            status: 'list',
-            profiles: profiles,
-            profile: null
-          }, this.showCreatedModal())
-        })
-        .catch(errors => {
-          this.setState({
-            error: true,
-            errorMessage: Object.values(errors).join(', '),
-            isLoading: false
-          })
-        })
-    }
-
-    const reader = new FileReader()
-    reader.readAsText(selectedFile)
-    reader.onload = createProfile.bind(this)
-  }
-
-  dispatchView() {
-    if (this.state.status === 'list') {
-      return (
-        <ProfileList
-          profiles={this.state.profiles}
-          isAdmin={this.state.client !== null}
-          updateProfile={this.showUpdateView}
-          deleteProfile={this.showDeleteModal}
-          downloadProfile={this.downloadProfile}
-        />
-      )
-    } else if (this.state.status == 'import') {
-      return (
-        <FileUploadForm
-          onFileChangeHandler={this.updateFile}
-          onSubmitFileHandler={this.importFile}
-          errorMessage={this.state.errorMessage}
-          error={this.state.error}
-          isLoading={this.state.isLoading}
-          disabled={this.state.selectedFile === null}
-        />
-      )
-    } else if (this.state.status == 'upload') {
-      return (
-        <FileUploadForm
-          onFileChangeHandler={this.updateFile}
-          onSubmitFileHandler={this.uploadFile}
-          errorMessage={this.state.errorMessage}
-          error={this.state.error}
-          isLoading={this.state.isLoading}
-          disabled={this.state.selectedFile === null}
-        />
-      );
-    } else {
-      return (
-        <ProfileForm
-          status={this.state.status}
-          profile={this.state.profile}
-          options={this.state.options}
-          datasets={this.state.datasets}
-          updateProfile={this.updateProfile}
-          storeProfile={this.storeProfile}
-        />
-      )
-    }
-  }
-
-  render() {
-    return (
-      <div className={['create', 'update'].includes(this.state.status) ? 'container-fluid' : 'container'}>
-        <header>
-          <nav aria-label="breadcrumb">
-            {this.state.status == 'list' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item active" aria-current="page">Chemotion file converter admin</li>
-              </ol>
-            }
-            {['upload', 'create'].includes(this.state.status) &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Create Profile'}</li>
-              </ol>
-            }
-            {this.state.status == 'update' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Edit Profile: ' + this.state.title}</li>
-              </ol>
-            }
-            {this.state.status == 'import' &&
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item" aria-current="page"><a href="">Chemotion file converter admin</a></li>
-                <li className="breadcrumb-item active" aria-current="page">{'Import Profile'}</li>
-              </ol>
-            }
-          </nav>
-
-          <div>
-            {this.state.status == "list" && this.state.client !== null &&
-              <div className="pull-right">
-                <button type="button" onClick={this.showImportView} className="btn btn-success mr-10">
-                  Import profile
-                </button>
-                <button type="button" onClick={this.showCreateView} className="btn btn-primary">
-                  Create new profile
-                </button>
-              </div>
-            }
-
-            <h2>
-              {this.state.status == 'list' && 'Profiles List' }
-              {['upload', 'create'].includes(this.state.status) && 'Create Profile'}
-              {this.state.status == 'update' && 'Edit Profile'}
-              {this.state.status == 'import' && 'Import Profile'}
-            </h2>
-          </div>
-        </header>
-
-        <main>
-          {this.dispatchView()}
-        </main>
-
-        <Modal show={this.state.createdModal}>
-          <Modal.Header>
-            <Modal.Title>Profile successfully created!</Modal.Title>
-          </Modal.Header>
-
-          <Modal.Footer>
-            <Button bsStyle="primary" onClick={this.hideCreatedModal}>Great!</Button>
-          </Modal.Footer>
-        </Modal>
-
-        <Modal show={this.state.deleteModal}>
-          <Modal.Header>
-            <Modal.Title>Do you really want to delete this profile?</Modal.Title>
-          </Modal.Header>
-          <Modal.Footer>
-            <Button bsStyle="default" onClick={this.hideDeleteModal}>Cancel</Button>
-            <Button bsStyle="danger" onClick={this.deleteProfile}>Delete profile</Button>
-          </Modal.Footer>
-        </Modal>
-      </div>
-    )
-  }
-
-}
-
-export default ConverterAdmin;
-
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('ConverterAdmin');
-  if (domElement) ReactDOM.render(<ConverterAdmin />, domElement);
-});
diff --git a/app/packs/src/admin/generic/AttrCopyModal.js b/app/packs/src/admin/generic/AttrCopyModal.js
deleted file mode 100644
index 3c339300c..000000000
--- a/app/packs/src/admin/generic/AttrCopyModal.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
-import { Content } from './AttrForm';
-
-export default class AttrCopyModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-  }
-
-  handleCopy() {
-    const { element, fnCopy, content } = this.props;
-    switch (content) {
-      case 'Segment': {
-        const copy = {
-          label: this.formRef.current.k_label.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim(),
-          element_klass: this.formRef.current.k_klass.value,
-          properties_template: element.properties_template
-        };
-        fnCopy(copy);
-        break;
-      }
-      case 'Element': {
-        const copy = {
-          name: this.formRef.current.k_name.value.trim(),
-          label: this.formRef.current.k_label.value.trim(),
-          klass_prefix: this.formRef.current.k_prefix.value.trim(),
-          icon_name: this.formRef.current.k_iconname.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim(),
-          properties_template: element.properties_template
-        };
-        fnCopy(copy);
-        break;
-      }
-      default:
-        console.log(`Warning: ${content} is not supported.`);
-    }
-  }
-
-  render() {
-    const {
-      content, element, showModal, fnClose
-    } = this.props;
-
-    const copy = {
-      label: element.label,
-      klass_prefix: element.klass_prefix,
-      icon_name: element.icon_name,
-      desc: element.desc,
-      properties_template: element.properties_template
-    };
-
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton>
-          <Modal.Title>Copy {content} attributes</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Content ref={this.formRef} content={content} element={copy} editable />
-            <Form horizontal>
-              <FormGroup>
-                &nbsp;
-                <Button bsStyle="primary" onClick={() => this.handleCopy()}>Copy&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
-                &nbsp;
-                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-AttrCopyModal.propTypes = {
-  content: PropTypes.string.isRequired,
-  showModal: PropTypes.bool.isRequired,
-  element: PropTypes.object.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnCopy: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/AttrEditModal.js b/app/packs/src/admin/generic/AttrEditModal.js
deleted file mode 100644
index d1ce06208..000000000
--- a/app/packs/src/admin/generic/AttrEditModal.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormGroup, Modal, Button, OverlayTrigger } from 'react-bootstrap';
-import { Content, TipActive, TipInActive, TipDelete } from './AttrForm';
-
-export default class AttrEditModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-  }
-
-  handleUpdate() {
-    const { element, fnUpdate, content } = this.props;
-    switch (content) {
-      case 'Segment': {
-        const updates = {
-          label: this.formRef.current.k_label.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim()
-        };
-        fnUpdate(element, updates);
-        break;
-      }
-      case 'Element': {
-        const updates = {
-          label: this.formRef.current.k_label.value.trim(),
-          klass_prefix: this.formRef.current.k_prefix.value.trim(),
-          icon_name: this.formRef.current.k_iconname.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim()
-        };
-        fnUpdate(element, updates);
-        break;
-      }
-      default:
-        console.log(`Warning: ${content} is not supported.`);
-    }
-  }
-
-  render() {
-    const {
-      content, element, showModal, fnClose, fnDelete, fnActivate
-    } = this.props;
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton>
-          <Modal.Title>Edit {content} attributes</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Content ref={this.formRef} content={content} element={element} editable={false} />
-            <Form horizontal>
-              <FormGroup>
-                <OverlayTrigger placement="bottom" overlay={TipDelete(content)} >
-                  <Button bsStyle="danger" onClick={() => fnDelete(element)}>Delete&nbsp;<i className="fa fa-trash" aria-hidden="true" /></Button>
-                </OverlayTrigger>
-                &nbsp;
-                <OverlayTrigger placement="bottom" overlay={element.is_active === false ? TipActive(content) : TipInActive(content)} >
-                  <Button
-                    bsStyle={element.is_active === false ? 'success' : 'warning'}
-                    onClick={() => fnActivate(element.id, element.is_active)}
-                  >
-                    {element.is_active === false ? 'Active' : 'Deactive'}&nbsp;
-                    <i className={element.is_active === false ? 'fa fa-check' : 'fa fa-ban'} aria-hidden="true" />
-                  </Button>
-                </OverlayTrigger>
-                &nbsp;
-                <Button bsStyle="primary" onClick={() => this.handleUpdate()}>Update&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
-                &nbsp;
-                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-AttrEditModal.propTypes = {
-  content: PropTypes.string.isRequired,
-  showModal: PropTypes.bool.isRequired,
-  element: PropTypes.object.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnDelete: PropTypes.func.isRequired,
-  fnActivate: PropTypes.func.isRequired,
-  fnUpdate: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/AttrForm.js b/app/packs/src/admin/generic/AttrForm.js
deleted file mode 100644
index 8f674908b..000000000
--- a/app/packs/src/admin/generic/AttrForm.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'react-bootstrap';
-import KlassAttrForm from './KlassAttrForm';
-import SegmentAttrForm from './SegmentAttrForm';
-
-const TipActive = type => <Tooltip id="active_button">This {type} is deactivated, press button to [activate]</Tooltip>;
-const TipInActive = type => <Tooltip id="disable_button">This {type} is activated, press button to [deactivate]</Tooltip>;
-const TipDelete = type => <Tooltip id="delete_button">Delete this {type}, after deletion, all elements are unaccessible</Tooltip>;
-
-const Content = React.forwardRef((props, ref) => {
-  switch (props.content) {
-    case 'Segment':
-      return <SegmentAttrForm ref={ref} element={props.element} editable={props.editable} />;
-    case 'Element':
-      return <KlassAttrForm ref={ref} element={props.element} editable={props.editable} />;
-    default:
-      return <div>No content</div>;
-  }
-});
-
-export { Content, TipActive, TipInActive, TipDelete };
diff --git a/app/packs/src/admin/generic/AttrNewModal.js b/app/packs/src/admin/generic/AttrNewModal.js
deleted file mode 100644
index c41777811..000000000
--- a/app/packs/src/admin/generic/AttrNewModal.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
-import { Content } from './AttrForm';
-
-export default class AttrNewModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-  }
-
-  handleCreate() {
-    const { fnCreate, content } = this.props;
-    switch (content) {
-      case 'Segment': {
-        const element = {
-          label: this.formRef.current.k_label.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim(),
-          element_klass: this.formRef.current.k_klass.value
-        };
-        fnCreate(element);
-        break;
-      }
-      case 'Element': {
-        const element = {
-          name: this.formRef.current.k_name.value.trim(),
-          label: this.formRef.current.k_label.value.trim(),
-          klass_prefix: this.formRef.current.k_prefix.value.trim(),
-          icon_name: this.formRef.current.k_iconname.value.trim(),
-          desc: this.formRef.current.k_desc.value.trim()
-        };
-        fnCreate(element);
-        break;
-      }
-      default:
-        console.log(`Warning: ${content} is not supported.`);
-    }
-  }
-
-  render() {
-    const { content, showModal, fnClose } = this.props;
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton><Modal.Title>{`New ${content}`}</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Content ref={this.formRef} content={content} element={{}} editable />
-            <Form horizontal>
-              <FormGroup>
-                <Button bsStyle="primary" onClick={() => this.handleCreate()}>Create&nbsp;<i className="fa fa-save" aria-hidden="true" /></Button>
-                &nbsp;
-                <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-AttrNewModal.propTypes = {
-  content: PropTypes.string.isRequired,
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnCreate: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/FieldCondEditModal.js b/app/packs/src/admin/generic/FieldCondEditModal.js
deleted file mode 100644
index 9ff3314da..000000000
--- a/app/packs/src/admin/generic/FieldCondEditModal.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-import { Modal, Button } from 'react-bootstrap';
-import GenericSubField from '../../components/models/GenericSubField';
-import LayerSelect from '../../components/generic/LayerSelect';
-import FieldSelect from '../../components/generic/FieldSelect';
-
-const AddRowBtn = ({ addRow }) => (
-  <Button active onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
-);
-
-AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
-
-const DelRowBtn = ({ delRow, node }) => {
-  const { data } = node;
-  const btnClick = () => {
-    delRow(data);
-  };
-  return (<Button active onClick={btnClick} bsSize="xsmall" bsStyle="danger"><i className="fa fa-trash" aria-hidden="true" /></Button>);
-};
-
-DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
-
-export default class FieldCondEditModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.delRow = this.delRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-    this.selLayer = this.selLayer.bind(this);
-    this.selField = this.selField.bind(this);
-    this.refresh = this.refresh.bind(this);
-    this.onCellValueChanged = this.onCellValueChanged.bind(this);
-  }
-
-  onGridReady(e) {
-    this.gridApi = e.api;
-    this.gridColumnApi = e.columnApi;
-
-    const columnDefs = [
-      {
-        rowDrag: true,
-        resizable: true,
-        headerName: 'Id',
-        field: 'id',
-        editable: false,
-        minWidth: 10,
-        width: 10,
-      },
-      {
-        headerName: 'Layer',
-        field: 'layer',
-        editable: false,
-        minWidth: 120,
-        width: 120,
-        cellRendererFramework: LayerSelect,
-        cellRendererParams: { allLayers: this.props.allLayers, selLayer: this.selLayer },
-      },
-      {
-        headerName: 'Field',
-        field: 'field',
-        editable: false,
-        minWidth: 120,
-        width: 120,
-        cellRendererFramework: FieldSelect,
-        cellRendererParams: { allLayers: this.props.allLayers, selField: this.selField, types: ['text', 'select', 'checkbox'] },
-      },
-      {
-        headerName: 'Value',
-        field: 'value',
-        editable: true,
-        minWidth: 120,
-        width: 120,
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: '',
-        colId: 'actions',
-        headerComponentFramework: AddRowBtn,
-        headerComponentParams: { addRow: this.addRow },
-        cellRendererFramework: DelRowBtn,
-        cellRendererParams: { delRow: this.delRow },
-        editable: false,
-        filter: false,
-        minWidth: 35,
-        width: 35,
-      },
-    ];
-
-    this.gridApi.setColumnDefs(columnDefs);
-    this.autoSizeAll();
-  }
-
-  delRow() {
-    const selectedData = this.gridApi.getSelectedRows();
-    this.gridApi.applyTransaction({ remove: selectedData });
-    this.refresh();
-  }
-
-  addRow() {
-    const { allLayers } = this.props;
-    const lys = allLayers.filter(e => (e.fields || []).filter(f => ['text', 'select', 'checkbox'].includes(f.type)).length > 0);
-    const ly = (lys.length > 0 && lys[0].key) || '';
-    const fd = ly === '' ? '' : ((allLayers.find(e => e.key === ly) || {}).fields || []).filter(e => ['text', 'select', 'checkbox'].includes(e.type))[0].field;
-    const newSub = new GenericSubField({ layer: ly, field: fd, value: '' });
-    const idx = this.gridApi.getDisplayedRowCount();
-    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
-    this.refresh();
-  }
-
-  autoSizeAll() {
-    if (!this.gridApi) return;
-    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
-  }
-
-  selLayer(e, node) {
-    const { data } = node;
-    if (e.target.value === data.layer) { return; }
-    data.layer = e.target.value;
-    const { allLayers } = this.props;
-    const ly = data.layer;
-    const fdf = ((allLayers.find(l => l.key === ly) || {}).fields || []).filter(l => ['text', 'select', 'checkbox'].includes(l.type)) || [];
-    const fd = (fdf.length > 0 && fdf[0].field) || '';
-    data.field = fd;
-    const { updSub, updLayer, layer, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    this.gridApi.setRowData(rows);
-    if (field == null) {
-      layer.cond_fields = rows;
-      updLayer(layerKey, layer, () => {});
-    } else {
-      field.cond_fields = rows;
-      updSub(layerKey, field, () => {});
-    }
-  }
-
-  selField(e, node) {
-    const { data } = node;
-    if (e.target.value === data.field) { return; }
-    data.field = e.target.value;
-    this.refresh();
-  }
-
-  refresh() {
-    const { updSub, updLayer, layer, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-
-    if (field == null) {
-      layer.cond_fields = rows;
-      updLayer(layerKey, layer, () => {});
-    } else {
-      field.cond_fields = rows;
-      updSub(layerKey, field, () => {});
-    }
-  }
-
-  onCellValueChanged(params) {
-    const { oldValue, newValue } = params;
-    if (oldValue === newValue) return;
-    this.refresh();
-  }
-
-  render() {
-    const {
-      element, showModal, fnClose, layer, layerKey, field, allLayers
-    } = this.props;
-
-    const sub = (field == null ? layer.cond_fields : field.cond_fields) || [];
-    const title = field == null ? `Layer Restriction Setting [ ${layer.label}]` : `Field Restriction Setting [ layer: ${layer.label} ] [ field: ${field.label} ]`;
-    const lafi = field == null ? `layer:${layer.label}` : `field:${field.label}(in layer:${layer.label})`;
-
-    if (showModal) {
-      return (
-        <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-          <Modal.Header closeButton>
-            <Modal.Title>{title}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div style={{ fontSize: '10px' }}>
-              <b>Field Restriction: </b>
-              when a restriction has been set, the {lafi} is hidden, it shows only when the [Layer,Field,Value] got matched;
-              if there are more than one setting, the {lafi} shows when one of them got matched.
-            </div>
-            <div style={{ fontSize: '10px' }}>
-              <b>available field type: </b>
-              checkbox (true/false), select, text
-            </div>
-            <div style={{ width: '100%', height: '26vh' }}>
-              <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
-                <AgGridReact
-                  defaultColDef={{ suppressMovable: true, resizable: true }}
-                  rowSelection="single"
-                  onGridReady={this.onGridReady}
-                  rowData={sub}
-                  singleClickEdit
-                  stopEditingWhenGridLosesFocus
-                  rowDragManaged
-                  onRowDragEnd={this.refresh}
-                />
-              </div>
-            </div>
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return <div />;
-  }
-}
-
-FieldCondEditModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  layer: PropTypes.object.isRequired,
-  allLayers: PropTypes.arrayOf(PropTypes.object),
-  layerKey: PropTypes.string.isRequired,
-  updSub: PropTypes.func.isRequired,
-  updLayer: PropTypes.func.isRequired,
-  field: PropTypes.object,
-  element: PropTypes.object.isRequired,
-  fnClose: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/KlassAttrForm.js b/app/packs/src/admin/generic/KlassAttrForm.js
deleted file mode 100644
index 8818651f9..000000000
--- a/app/packs/src/admin/generic/KlassAttrForm.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormControl, FormGroup, InputGroup, Button } from 'react-bootstrap';
-
-export default class KlassAttrForm extends Component {
-  render() {
-    const { element, editable } = this.props;
-    return (
-      <Form horizontal className="input-form">
-        <FormGroup controlId="formControlKlass">
-          <InputGroup>
-            <InputGroup.Addon>Element</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.name} inputRef={(ref) => { this.k_name = ref; }} readOnly={!editable} />
-          </InputGroup>
-          <div className="help">
-            Element must be at least 3 characters long and can not be longer than 5 characters<br />
-            Element is only lowercase letters allowed<br />
-            Element should not contain special characters like $, !, %, etc.
-          </div>
-        </FormGroup>
-        <FormGroup controlId="formControlPrefix">
-          <InputGroup>
-            <InputGroup.Addon>Prefix</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.klass_prefix} inputRef={(ref) => { this.k_prefix = ref; }} />
-          </InputGroup>
-          <div className="help">
-            Prefix is used to define the prefix of Element label<br />
-            Prefix should not contain special characters like $, !, %, etc.
-          </div>
-        </FormGroup>
-        <FormGroup controlId="formControlLabel">
-          <InputGroup>
-            <InputGroup.Addon>Element Label</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.label} inputRef={(ref) => { this.k_label = ref; }} />
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlIcon">
-          <InputGroup>
-            <InputGroup.Addon>Icon</InputGroup.Addon>
-            {
-              element.icon_name ?
-                <InputGroup.Addon><i className={element.icon_name} /></InputGroup.Addon> : null
-            }
-            <FormControl type="text" defaultValue={element.icon_name} inputRef={(ref) => { this.k_iconname = ref; }} />
-          </InputGroup>
-          <div className="help">
-            Icon is used to represent a particular element<br />
-            Please use the icon code from<Button bsStyle="link" bsSize="xsmall" href="https://fontawesome.com/v4.7/icons/" target="_blank">Font Awesome 4</Button>
-          </div>
-        </FormGroup>
-        <FormGroup controlId="formControlDescription">
-          <InputGroup>
-            <InputGroup.Addon>Description</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.desc} inputRef={(ref) => { this.k_desc = ref; }} />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
-
-KlassAttrForm.propTypes = {
-  element: PropTypes.object.isRequired,
-  editable: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/admin/generic/LayerAttrEditModal.js b/app/packs/src/admin/generic/LayerAttrEditModal.js
deleted file mode 100644
index 72be8a704..000000000
--- a/app/packs/src/admin/generic/LayerAttrEditModal.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, Modal, Button } from 'react-bootstrap';
-import LayerAttrForm from './LayerAttrForm';
-
-export default class LayerAttrEditModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-  }
-
-  handleUpdate() {
-    const { layer, fnUpdate } = this.props;
-    const updates = {
-      label: this.formRef.current.lf_label.value.trim(),
-      color: this.formRef.current.lf_color.value.trim(),
-      style: this.formRef.current.lf_style.value.trim(),
-      cols: parseInt(this.formRef.current.lf_cols.value.trim() || 1, 10),
-      position: parseInt(this.formRef.current.lf_position.value.trim() || 100, 10)
-    };
-    fnUpdate(layer.key, updates);
-  }
-
-  render() {
-    const { showModal, fnClose, layer } = this.props;
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton><Modal.Title>Edit Layer attributes</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <LayerAttrForm ref={this.formRef} layer={layer} />
-            <FormGroup>
-              <Button bsStyle="primary" onClick={() => this.handleUpdate()}>Update layer to template workspace&nbsp;<i className="fa fa-archive" aria-hidden="true" /></Button>
-              &nbsp;
-              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-            </FormGroup>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-LayerAttrEditModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnUpdate: PropTypes.func.isRequired,
-  layer: PropTypes.object.isRequired,
-};
diff --git a/app/packs/src/admin/generic/LayerAttrForm.js b/app/packs/src/admin/generic/LayerAttrForm.js
deleted file mode 100644
index a207900f3..000000000
--- a/app/packs/src/admin/generic/LayerAttrForm.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
-
-export default class LayerAttrForm extends Component {
-  render() {
-    const { layer } = this.props;
-    return (
-      <Form horizontal className="input-form">
-        <FormGroup controlId="formControlLayerKey">
-          <InputGroup>
-            <InputGroup.Addon>Name</InputGroup.Addon>
-            <FormControl type="text" defaultValue={layer.key} inputRef={(ref) => { this.lf_layerKey = ref; }} readOnly={!!layer.key} />
-          </InputGroup>
-          <div className="help">
-            Layer name is unique in the template<br />
-            Layer name must contain only lowercase letters and underscores<br />
-            Layer name should not contain special characters like $, !, %, etc.
-          </div>
-        </FormGroup>
-        <FormGroup controlId="formControlLayerLabel">
-          <InputGroup>
-            <InputGroup.Addon>Display name</InputGroup.Addon>
-            <FormControl type="text" defaultValue={layer.label} inputRef={(ref) => { this.lf_label = ref; }} />
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlLayerCols">
-          <InputGroup>
-            <InputGroup.Addon>Columns per row</InputGroup.Addon>
-            <FormControl componentClass="select" defaultValue={layer.cols || 1} inputRef={(ref) => { this.lf_cols = ref; }} >
-              <option value={1}>1</option>
-              <option value={2}>2</option>
-              <option value={3}>3</option>
-              <option value={4}>4</option>
-              <option value={5}>5</option>
-              <option value={6}>6</option>
-            </FormControl>
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlLayerPosition">
-          <InputGroup>
-            <InputGroup.Addon>Sequential position</InputGroup.Addon>
-            <FormControl type="number" defaultValue={layer.position} inputRef={(ref) => { this.lf_position = ref; }} min={1} />
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlLayerColor">
-          <InputGroup>
-            <InputGroup.Addon>Header color</InputGroup.Addon>
-            <FormControl componentClass="select" defaultValue={layer.color} inputRef={(ref) => { this.lf_color = ref; }} >
-              <option value="none">none</option>
-              <option value="default">Grey</option>
-              <option value="success">Green</option>
-              <option value="warning">Yellow</option>
-              <option value="primary">Blue</option>
-              <option value="info">Light Blue</option>
-              <option value="danger">Red</option>
-            </FormControl>
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formCtlHeaderStyle">
-          <InputGroup>
-            <InputGroup.Addon>Style Option</InputGroup.Addon>
-            <FormControl componentClass="select" defaultValue={layer.style} inputRef={(ref) => { this.lf_style = ref; }} >
-              <option value="panel_generic_heading">bold</option>
-              <option value="panel_generic_heading_bu">bold/underline</option>
-              <option value="panel_generic_heading_bui">bold/underline/italic</option>
-            </FormControl>
-          </InputGroup>
-        </FormGroup>
-
-      </Form>
-    );
-  }
-}
-
-LayerAttrForm.propTypes = {
-  layer: PropTypes.object.isRequired,
-};
diff --git a/app/packs/src/admin/generic/LayerAttrNewModal.js b/app/packs/src/admin/generic/LayerAttrNewModal.js
deleted file mode 100644
index aeb43b9d2..000000000
--- a/app/packs/src/admin/generic/LayerAttrNewModal.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, Modal, Button } from 'react-bootstrap';
-import LayerAttrForm from './LayerAttrForm';
-
-export default class LayerAttrNewModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-  }
-
-  handleCreate() {
-    const { fnCreate } = this.props;
-    const layer = {
-      key: this.formRef.current.lf_layerKey.value.trim(),
-      label: this.formRef.current.lf_label.value.trim(),
-      cols: parseInt(this.formRef.current.lf_cols.value.trim() || 1, 10),
-      position: parseInt(this.formRef.current.lf_position.value.trim() || 100, 10)
-    };
-    fnCreate(layer);
-  }
-
-  render() {
-    const { showModal, fnClose } = this.props;
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton><Modal.Title>New Layer</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <LayerAttrForm ref={this.formRef} layer={{}} isKlassReadonly={false} />
-            <FormGroup>
-              <Button bsStyle="primary" onClick={() => this.handleCreate()}>Add new layer to template workspace&nbsp;<i className="fa fa-hdd-o" aria-hidden="true" /></Button>
-              &nbsp;
-              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-            </FormGroup>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-LayerAttrNewModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnCreate: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/Preview.js b/app/packs/src/admin/generic/Preview.js
deleted file mode 100644
index 4e0914229..000000000
--- a/app/packs/src/admin/generic/Preview.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/* eslint-disable camelcase */
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Badge, Col } from 'react-bootstrap';
-import { cloneDeep } from 'lodash';
-import { GenProperties, LayersLayout } from '../../components/generic/GenericElCommon';
-import LoadingActions from '../../components/actions/LoadingActions';
-import { ButtonTooltip, ButtonConfirm, unitConversion, inputEventVal, genUnits } from './Utils';
-import Utils from '../../components/utils/Functions';
-
-export default class Preview extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { revisions: [], compareUUID: 'current', fullScreen: false };
-    this.compare = this.compare.bind(this);
-    this.setRevision = this.setRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubChange = this.handleSubChange.bind(this);
-    this.handleUnitClick = this.handleUnitClick.bind(this);
-    this.dlRevision = this.dlRevision.bind(this);
-    this.setScreen = this.setScreen.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.props.revisions) {
-      this.setRevision(cloneDeep(this.props.revisions));
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.revisions !== prevProps.revisions) {
-      this.setRevision(cloneDeep(this.props.revisions));
-    }
-  }
-
-  setRevision(revisions) {
-    this.setState({ revisions });
-  }
-
-  setScreen(fullScreen) {
-    this.setState({ fullScreen });
-  }
-
-  compare(params) {
-    LoadingActions.start();
-    this.setState(
-      { revisions: cloneDeep(this.props.revisions), compareUUID: params.uuid },
-      LoadingActions.stop()
-    );
-  }
-
-  delRevision(params) {
-    this.props.fnDelete(params);
-  }
-
-  retriveRevision(params) {
-    const { fnRetrive, src } = this.props;
-    LoadingActions.start();
-    const deep = cloneDeep(this.props.revisions.find(r => r.id === params.id));
-    fnRetrive(deep[src], LoadingActions.stop());
-  }
-
-
-  dlRevision(params) {
-    const { element, revisions } = this.props;
-    LoadingActions.start();
-    const revision = revisions.find(r => r.id === params.id);
-    const props = revision.properties_release;
-    props.klass = revision.properties_release.klass;
-    props.released_at = revision.released_at || '';
-    const href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(revision.properties_release))}`;
-    Utils.downloadFile({ contents: href, name: `${props.klass}_${element.label}_${revision.uuid}.json` });
-    LoadingActions.stop();
-  }
-
-  handleInputChange(event, field, layer, type = 'text') {
-    const { compareUUID, revisions } = this.state;
-    const { src } = this.props;
-    const selected = (revisions || []).find(r => r.uuid === compareUUID);
-    if (selected && selected[src]) {
-      const properties_release = selected[src];
-      const value = inputEventVal(event, type);
-      if (!((field === 'name' && layer === ''))) {
-        properties_release.layers[`${layer}`].fields.find(e => e.field === field).value = value;
-        if (type === 'system-defined' && (!properties_release.layers[`${layer}`].fields.find(e => e.field === field).value_system || properties_release.layers[`${layer}`].fields.find(e => e.field === field).value_system === '')) {
-          const opt = properties_release.layers[`${layer}`].fields
-            .find(e => e.field === field).option_layers;
-          properties_release.layers[`${layer}`].fields
-            .find(e => e.field === field).value_system = genUnits(opt)[0].key;
-        }
-        this.setRevision(revisions);
-      }
-    }
-  }
-
-  handleSubChange(layer, obj, valueOnly = false) {
-    const { compareUUID, revisions } = this.state;
-    const { src } = this.props;
-    const selected = (revisions || []).find(r => r.uuid === compareUUID);
-    if (selected && selected[src]) {
-      const properties_release = selected[src];
-      if (!valueOnly) {
-        const subFields = properties_release.layers[`${layer}`].fields
-          .find(m => m.field === obj.f.field).sub_fields || [];
-        const idxSub = subFields.findIndex(m => m.id === obj.sub.id);
-        subFields.splice(idxSub, 1, obj.sub);
-        properties_release.layers[`${layer}`].fields
-          .find(e => e.field === obj.f.field).sub_fields = subFields;
-      }
-      properties_release.layers[`${layer}`].fields
-        .find(e => e.field === obj.f.field).sub_values = obj.f.sub_values || [];
-      this.setRevision(revisions);
-    }
-  }
-
-  handleUnitClick(layer, obj) {
-    const { compareUUID, revisions } = this.state;
-    const { src } = this.props;
-    const selected = (revisions || []).find(r => r.uuid === compareUUID);
-    const newVal = unitConversion(obj.option_layers, obj.value_system, obj.value);
-    if (selected && selected[src]) {
-      selected[src].layers[`${layer}`].fields
-        .find(e => e.field === obj.field).value_system = obj.value_system;
-      selected[src].layers[`${layer}`].fields
-        .find(e => e.field === obj.field).value = newVal;
-      this.setRevision(revisions);
-    }
-  }
-
-  render() {
-    const { compareUUID, revisions, fullScreen } = this.state;
-    const { src, canDL } = this.props;
-    const t = (v, idx) => {
-      const s = v.uuid === compareUUID ? 'generic_block_select' : '';
-      const ver = v.released_at ? `version: ${v.uuid}` : 'version:';
-      let at = v.released_at ? `released at: ${v.released_at} (UTC)` : '(Work In Progress)';
-      if (src === 'properties') {
-        at = `saved at: ${v.released_at} (UTC)`;
-      }
-
-      const del = v.released_at ? <ButtonConfirm msg="Delete this version permanently?" fnClick={this.delRevision} fnParams={{ id: v.id }} bs="default" place="top" /> : null;
-      const ret = v.released_at ? <ButtonConfirm msg="Retrieve this version?" fnClick={this.retriveRevision} fnParams={{ id: v.id }} fa="fa-reply" bs="default" place="top" /> : null;
-      const dl = canDL ? <ButtonTooltip tip="Download this version" fnClick={this.dlRevision} element={{ id: v.id }} fa="fa-download" place="top" bs="default" /> : null;
-      return (
-        <div className={`generic_version_block ${s}`} key={v.uuid}>
-          <div><div style={{ width: '100%' }}>{ver}</div><div style={{ fontSize: '0.8rem' }}>#{(idx + 1)}</div></div>
-          <div>
-            <div style={{ width: '100%' }}>{at}</div>
-            {del}
-            {dl}
-            {ret}
-            <ButtonTooltip tip="Preview this version" fnClick={this.compare} element={{ uuid: v.uuid }} fa="fa-clock-o" place="top" bs="default" />
-          </div>
-        </div>
-      );
-    };
-
-    const options = [];
-    const selected = (revisions || []).find(r => r.uuid === compareUUID) || {};
-    const selectOptions = (selected && selected[src] &&
-      selected[src].select_options) || {};
-
-    if (selected.name) {
-      const defaultName = <GenProperties label="" description={selected.description || ''} value={selected.name || ''} type="text" isEditable isRequired onChange={() => {}} />;
-      options.push(defaultName);
-    }
-
-    const layersLayout = LayersLayout(
-      (selected[src] || {}).layers || {},
-      selectOptions || {},
-      this.handleInputChange,
-      this.handleSubChange,
-      this.handleUnitClick,
-      options,
-      selected.uuid || 0
-    );
-
-    const his = fullScreen ? null : (<Col md={4}>{revisions.map((r, idx) => (t(r, idx)))}</Col>);
-    const contentCol = fullScreen ? 12 : 8;
-    const screenFa = fullScreen ? 'compress' : 'expand';
-    return (
-      <div>
-        {his}
-        <Col md={contentCol}>
-          <div style={{ margin: '10px 0px' }}>
-            <div style={{ float: 'right' }}><ButtonTooltip tip={screenFa} fnClick={this.setScreen} element={!this.state.fullScreen} fa={`fa-${screenFa}`} place="left" bs="default" /></div>
-            <Badge style={{ backgroundColor: '#ffc107', color: 'black' }}><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Sketch Map, the data input here will not be saved.</Badge>
-          </div>
-          <div style={{ width: '100%', minHeight: '50vh' }}>{layersLayout}</div>
-        </Col>
-      </div>
-    );
-  }
-}
-
-Preview.propTypes = {
-  revisions: PropTypes.array,
-  fnRetrive: PropTypes.func,
-  fnDelete: PropTypes.func,
-  canDL: PropTypes.bool,
-  src: PropTypes.oneOf(['properties_release', 'properties'])
-};
-
-Preview.defaultProps = {
-  revisions: [], fnRetrive: () => {}, fnDelete: () => {}, src: 'properties_release', canDL: false
-};
diff --git a/app/packs/src/admin/generic/SegmentAttrForm.js b/app/packs/src/admin/generic/SegmentAttrForm.js
deleted file mode 100644
index 64a2186b8..000000000
--- a/app/packs/src/admin/generic/SegmentAttrForm.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap';
-import uuid from 'uuid';
-import AdminFetcher from '../../components/fetchers/AdminFetcher';
-
-export default class SegmentAttrForm extends Component {
-  constructor() {
-    super();
-    this.state = { klassOptions: null };
-  }
-
-  componentDidMount() {
-    AdminFetcher.fetchElementKlasses()
-      .then((result) => {
-        const klassOptions = result.klass.sort((a, b) => a.place - b.place)
-          .map(k => (<option key={uuid.v4()} value={k.id}>{k.label}</option>));
-        this.setState({ klassOptions });
-      });
-  }
-
-  render() {
-    const { element, editable } = this.props;
-    const { klassOptions } = this.state;
-    return (
-      <Form horizontal className="input-form">
-        <FormGroup controlId="formControlLabel">
-          <InputGroup>
-            <InputGroup.Addon>Segment Label</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.label} inputRef={(ref) => { this.k_label = ref; }} />
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlDescription">
-          <InputGroup>
-            <InputGroup.Addon>Description</InputGroup.Addon>
-            <FormControl type="text" defaultValue={element.desc} inputRef={(ref) => { this.k_desc = ref; }} />
-          </InputGroup>
-        </FormGroup>
-        <FormGroup controlId="formControlAssignKlass">
-          <InputGroup>
-            <InputGroup.Addon>Assign to Element</InputGroup.Addon>
-            <FormControl componentClass="select" value={element.element_klass && element.element_klass.id} inputRef={(ref) => { this.k_klass = ref; }} disabled={!editable} readOnly={!editable}>
-              {klassOptions}
-            </FormControl>
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
-
-SegmentAttrForm.propTypes = {
-  element: PropTypes.object.isRequired,
-  editable: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/admin/generic/SelectAttrNewModal.js b/app/packs/src/admin/generic/SelectAttrNewModal.js
deleted file mode 100644
index 0bbe105bf..000000000
--- a/app/packs/src/admin/generic/SelectAttrNewModal.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormControl, FormGroup, InputGroup, Modal, Button } from 'react-bootstrap';
-
-export default class SelectAttrNewModal extends Component {
-  handleCreate() {
-    this.props.fnCreate(this.s_selectKey.value.trim());
-  }
-
-  render() {
-    const { showModal, fnClose } = this.props;
-    return (
-      <Modal backdrop="static" show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton><Modal.Title>New Select List</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Form horizontal className="input-form">
-              <FormGroup controlId="formControlSelectKey">
-                <InputGroup>
-                  <InputGroup.Addon>Name</InputGroup.Addon>
-                  <FormControl type="text" inputRef={(ref) => { this.s_selectKey = ref; }} />
-                </InputGroup>
-                <div className="help">
-                  Seletc List name is unique in the template<br />
-                  Seletc List name must contain only lowercase letters and underscores<br />
-                  Seletc List name should not contain special characters like $, !, %, etc.
-                </div>
-              </FormGroup>
-            </Form>
-            <FormGroup>
-              <Button bsStyle="primary" onClick={() => this.handleCreate()}>Add new select list to template workspace&nbsp;<i className="fa fa-hdd-o" aria-hidden="true" /></Button>
-              &nbsp;
-              <Button bsStyle="warning" onClick={() => fnClose()}>Cancel</Button>
-            </FormGroup>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-SelectAttrNewModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnCreate: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/TemplateJsonModal.js b/app/packs/src/admin/generic/TemplateJsonModal.js
deleted file mode 100644
index 2f55260cf..000000000
--- a/app/packs/src/admin/generic/TemplateJsonModal.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import JSONInput from 'react-json-editor-ajrm';
-import { Form, FormGroup, Modal, Button } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import Utils from '../../components/utils/Functions';
-
-export default class TemplateJsonModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      propertiesTemplate: props.element.properties_template,
-      isValidJson: false
-    };
-    this.onChangeJson = this.onChangeJson.bind(this);
-    this.resetJson = this.resetJson.bind(this);
-    this.handleUpdateJson = this.handleUpdateJson.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.updateState = this.updateState.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.element.properties_template !== prevProps.element.properties_template) {
-      this.updateState(this.props.element.properties_template, false);
-    }
-  }
-
-  onChangeJson(e) {
-    let { propertiesTemplate } = this.state;
-    if (e.error === false) {
-      propertiesTemplate = e.jsObject;
-      this.updateState(propertiesTemplate, false);
-    } else {
-      this.setState({ isValidJson: true });
-    }
-  }
-
-  updateState(template, isValid) {
-    this.setState({ propertiesTemplate: template, isValidJson: isValid });
-  }
-
-  resetJson() {
-    this.updateState(this.props.element.properties_template, false);
-  }
-
-  handleUpdateJson() {
-    const { propertiesTemplate } = this.state;
-    this.props.fnUpdate(propertiesTemplate);
-  }
-
-  handleClose() {
-    this.updateState(this.props.element.properties_template, false);
-    this.props.fnClose();
-  }
-
-  render() {
-    const { showModal } = this.props;
-    const { propertiesTemplate, isValidJson } = this.state;
-    return (
-      <Modal backdrop="static" dialogClassName="importChemDrawModal" show={showModal} onHide={() => this.handleClose()}>
-        <Modal.Header closeButton><Modal.Title>Template in YAML format</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Form horizontal>
-              <FormGroup>
-                <JSONInput
-                  placeholder={propertiesTemplate}
-                  width="100%"
-                  height="750px"
-                  onChange={e => this.onChangeJson(e)}
-                />
-              </FormGroup>
-              <FormGroup>
-                <Button bsStyle="default" onClick={() => this.handleClose()}>Close&nbsp;<i className="fa fa-times" aria-hidden="true" /></Button>&nbsp;
-                <Button bsStyle="info" onClick={() => this.resetJson()}>Reset&nbsp;<i className="fa fa-repeat" aria-hidden="true" /></Button>&nbsp;
-                <Button bsStyle="warning" disabled={isValidJson} onClick={() => this.handleUpdateJson()}>Save&nbsp;<i className="fa fa-floppy-o" aria-hidden="true" /></Button>&nbsp;
-              </FormGroup>
-            </Form>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-TemplateJsonModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnUpdate: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  element: PropTypes.object.isRequired,
-};
diff --git a/app/packs/src/admin/generic/UploadModal.js b/app/packs/src/admin/generic/UploadModal.js
deleted file mode 100644
index 4d013ae82..000000000
--- a/app/packs/src/admin/generic/UploadModal.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import { Modal } from 'react-bootstrap';
-
-export default class UploadModal extends Component {
-  constructor(props) {
-    super(props);
-    this.formRef = React.createRef();
-    this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
-  }
-
-
-  handleReaderLoaded(e) {
-    const reader = e.target;
-    const pt = reader.result;
-    let properties = {};
-    let isVaild = true;
-    let message = '';
-
-    try {
-      properties = JSON.parse(pt);
-    } catch (err) {
-      isVaild = false;
-      message = `Error Format:${err}`;
-    }
-
-    if (isVaild && properties.klass !== this.props.klass) {
-      isVaild = false;
-      message = `Error, the template is from [${properties.klass}]` ;
-    }
-
-    if (isVaild) {
-      this.props.fnUpload(properties);
-    } else {
-      this.props.fnUpload(null, message, false);
-    }
-  }
-
-  handleUploadTemplate(file) {
-    const reader = new FileReader();
-    reader.onload = this.handleReaderLoaded.bind(this);
-    reader.readAsText(file[0]);
-  }
-
-  render() {
-    const { content, showModal, fnClose } = this.props;
-    return (
-      <Modal show={showModal} onHide={() => fnClose()}>
-        <Modal.Header closeButton><Modal.Title>{`Upload ${content} Templates`}</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <Dropzone
-            onDrop={attach => this.handleUploadTemplate(attach)}
-            style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}>
-            <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-              Drop File, or Click to Select.
-            </div>
-          </Dropzone>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-UploadModal.propTypes = {
-  content: PropTypes.string.isRequired,
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnUpload: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/admin/generic/Utils.js b/app/packs/src/admin/generic/Utils.js
deleted file mode 100644
index 49233c069..000000000
--- a/app/packs/src/admin/generic/Utils.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Tooltip, Popover, ControlLabel } from 'react-bootstrap';
-import uuid from 'uuid';
-import { findIndex } from 'lodash';
-import NotificationActions from '../../components/actions/NotificationActions';
-import UserStore from '../../components/stores/UserStore';
-import MatrixCheck from '../../components/common/MatrixCheck';
-
-class GenericDummy {
-  constructor() {
-    this.type = 'dummy';
-    this.field = uuid.v1();
-    this.position = 100;
-    this.label = '';
-    this.default = '';
-    this.required = false;
-  }
-}
-
-const inputEventVal = (event, type) => {
-  if (type === 'select') {
-    return event ? event.value : null;
-  } else if (type.startsWith('drag')) {
-    return event;
-  } else if (type === 'checkbox') {
-    return event.target.checked;
-  } else if (type === 'formula-field') {
-    if (event.target) {
-      return event.target.value;
-    }
-    return event;
-  }
-  return event.target && event.target.value;
-};
-
-const absOlsTermId = val => (val || '').split('|')[0].trim();
-const absOlsTermLabel = val => val.replace(absOlsTermId(val), '').replace('|', '').trim();
-const toNum = (val) => {
-  const parse = Number((val || ''));
-  return Number.isNaN(parse) ? 0 : parse;
-};
-
-const genUnitSup = (val) => {
-  if (typeof val === 'undefined' || val === null) return '';
-  const vals = val.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|[^<]+/g);
-  const reV = vals.map((v) => {
-    const supVal = v.match(/<sup[^>]*>([^<]+)<\/sup>/);
-    if (supVal) return <sup key={uuid.v4()}>{supVal[1]}</sup>;
-    const subVal = v.match(/<sub[^>]*>([^<]+)<\/sub>/);
-    if (subVal) return <sub key={uuid.v4()}>{subVal[1]}</sub>;
-    return v;
-  });
-  return <span>{reV}</span>;
-};
-
-const toBool = (val) => {
-  const valLower = String(val).toLowerCase();
-  return !(!valLower || valLower === 'false' || valLower === '0');
-};
-
-const genUnitsSystem = () => {
-  const unitsSystem = (UserStore.getState() && UserStore.getState().unitsSystem) || {};
-  return (unitsSystem.fields || []);
-};
-
-const genUnits = field => (genUnitsSystem().find(u => u.field === field) || {}).units || [];
-
-const genUnit = (field, key) => {
-  const units = genUnits(field);
-  return units.find(u => u.key === key) || {};
-};
-
-const reUnit = (unitsSystem, optionLayers) => {
-  const uniFileds = (unitsSystem.fields || []);
-  const uniObj = uniFileds.find(fiel => fiel.field === optionLayers);
-  const defaultUnit = ((uniObj && uniObj.field) || '');
-  const preUnit = uniFileds.length > 0 ? uniFileds[0].field : '';
-  return defaultUnit === '' ? preUnit : defaultUnit;
-};
-
-const convertTemp = (key, val) => {
-  switch (key) {
-    case 'F':
-      return ((parseFloat(val) * 1.8) + 32).toFixed(2);
-    case 'K':
-      return (((parseFloat(val) + 459.67) * 5) / 9).toFixed(2);
-    case 'C':
-      return (parseFloat(val) - 273.15).toFixed(2);
-    default:
-      return val;
-  }
-};
-
-const unitConvToBase = (field = {}) => {
-  const units = genUnits(field.option_layers);
-  if (units.length <= 1) {
-    return field.value;
-  }
-  const idx = findIndex(units, u => u.key === field.value_system);
-  if (idx <= 0) return field.value;
-  return ((field.value * units[0].nm) / ((units[idx] && units[idx].nm) || 1) || 0);
-};
-
-const unitConversion = (field, key, val) => {
-  if (typeof val === 'undefined' || val == null || val === 0 || val === '') {
-    return val;
-  }
-  if (field === 'temperature') {
-    return convertTemp(key, val);
-  }
-  const units = genUnits(field);
-  if (units.length <= 1) {
-    return val;
-  }
-  const idx = findIndex(units, u => u.key === key);
-  if (idx === -1) {
-    return val;
-  }
-  const pIdx = idx === 0 ? (units.length) : idx;
-  const pre = (units[pIdx - 1] && units[pIdx - 1].nm) || 1;
-  const curr = (units[idx] && units[idx].nm) || 1;
-  return parseFloat((parseFloat(val) * (curr / pre)).toFixed(5));
-};
-
-const notification = props =>
-  (
-    NotificationActions.add({
-      title: props.title,
-      message: props.msg,
-      level: props.lvl,
-      position: 'tc',
-      dismissible: 'button',
-      autoDismiss: props.autoDismiss || 5,
-      uid: props.uid || uuid.v4()
-    })
-  );
-
-const validateLayerInput = (layer) => {
-  if (layer.key === '') {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'Please input Name.' });
-    return false;
-  }
-  if (!(/^[a-z]+[_]*[a-z]*[^_]*$/g.test(layer.key))) {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
-    return false;
-  }
-  if (parseInt((layer.cols || 1), 10) < 1) {
-    notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'The minimun of Column per Row is 1, please input a different one.' });
-    return false;
-  }
-  return true;
-};
-
-const validateSelectList = (selectName, element) => {
-  if (selectName === '') {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'Please input Name.' });
-    return false;
-  }
-  if (!(/^[a-z]+[_]*[a-z]*[^_]*$/g.test(selectName))) {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This Name is invalid, please try a different one.' });
-    return false;
-  }
-  if (element.properties_template.select_options[`${selectName}`]) {
-    notification({ title: `Select List [${selectName}]`, lvl: 'error', msg: 'This name of Select List is already taken. Please choose another one.' });
-    return false;
-  }
-  return true;
-};
-
-const ButtonTooltip = (props) => {
-  const tip = <Tooltip id={uuid.v4()}>{props.tip}</Tooltip>;
-  const {
-    size, bs, fnClick, element, place, fa, disabled, txt
-  } = props;
-  const content = txt ? (<span>{txt}&nbsp;</span>) : '';
-  if (bs === '') {
-    return (
-      <OverlayTrigger placement={place} overlay={tip} >
-        <Button bsSize={size} onClick={() => fnClick(element)} disabled={disabled}>
-          {content}<i className={`fa ${fa}`} aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-  return (
-    <OverlayTrigger placement={place} overlay={tip} >
-      <Button bsSize={size} bsStyle={bs} onClick={() => fnClick(element)} disabled={disabled}>
-        {content}<i className={`fa ${fa}`} aria-hidden="true" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-ButtonTooltip.propTypes = {
-  tip: PropTypes.string.isRequired,
-  element: PropTypes.object,
-  fnClick: PropTypes.func.isRequired,
-  bs: PropTypes.string,
-  size: PropTypes.string,
-  place: PropTypes.string,
-  fa: PropTypes.string,
-  disabled: PropTypes.bool,
-  txt: PropTypes.string,
-};
-
-ButtonTooltip.defaultProps = {
-  bs: '', size: 'xs', place: 'right', fa: 'fa-pencil-square-o', disabled: false, txt: null, element: {}
-};
-
-const ButtonConfirm = (props) => {
-  const {
-    msg, size, bs, fnClick, fnParams, place, fa, disabled
-  } = props;
-  const popover = (
-    <Popover id="popover-button-confirm">
-      {msg} <br />
-      <div className="btn-toolbar">
-        <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => fnClick(fnParams)}>
-          Yes
-        </Button><span>&nbsp;&nbsp;</span>
-        <Button bsSize="xsmall" bsStyle="warning">No</Button>
-      </div>
-    </Popover>
-  );
-
-  return (
-    <OverlayTrigger animation placement={place} root trigger="focus" overlay={popover}>
-      <Button bsSize={size} bsStyle={bs} disabled={disabled}>
-        <i className={`fa ${fa}`} aria-hidden="true" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-ButtonConfirm.propTypes = {
-  msg: PropTypes.string.isRequired,
-  fnParams: PropTypes.object.isRequired,
-  fnClick: PropTypes.func.isRequired,
-  bs: PropTypes.string,
-  size: PropTypes.string,
-  place: PropTypes.string,
-  fa: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
-ButtonConfirm.defaultProps = {
-  bs: 'danger', size: 'xs', place: 'right', fa: 'fa-trash-o', disabled: false
-};
-
-const FieldLabel = (props) => {
-  const { label, desc } = props;
-  return (desc && desc !== '') ? (
-    <OverlayTrigger placement="top" delayShow={1000} overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
-      <ControlLabel>{label}</ControlLabel>
-    </OverlayTrigger>
-  ) : <ControlLabel>{label}</ControlLabel>;
-};
-
-FieldLabel.propTypes = { label: PropTypes.string.isRequired, desc: PropTypes.string };
-FieldLabel.defaultProps = { desc: '' };
-
-const GenericDSMisType = () => {
-  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  if (MatrixCheck(currentUser.matrix, 'genericDataset')) {
-    return (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Type (Chemical Methods Ontology) has been changed. <br />Please review this Dataset content.</Tooltip>}>
-        <span style={{ color: 'red' }}><i className="fa fa-exclamation-triangle" />&nbsp;</span>
-      </OverlayTrigger>
-    );
-  }
-  return null;
-};
-
-const clsInputGroup = (el) => {
-  if (!el) return el;
-  const genericEl = el;
-  const { layers } = genericEl.properties_template;
-  const keys = Object.keys(layers);
-  keys.forEach((key) => {
-    const layer = layers[key];
-    layer.fields.filter(e => e.type === 'input-group')
-      .forEach((e) => {
-        e.sub_fields.forEach((s) => {
-          const ff = s;
-          if (ff.type === 'text') { ff.value = ''; }
-        });
-      });
-  });
-  return genericEl;
-};
-
-const molOptions = [{ label: 'InChiKey', value: 'inchikey' }, { label: 'SMILES', value: 'smiles' }, { label: 'IUPAC', value: 'iupac' }, { label: 'Mass', value: 'molecular_weight' }];
-const samOptions = [{ label: 'Name', value: 'name' }, { label: 'Ext. Label', value: 'external_label' }, { label: 'Mass', value: 'molecular_weight' }];
-
-export {
-  ButtonTooltip, ButtonConfirm, GenericDSMisType, FieldLabel, GenericDummy,
-  validateLayerInput, validateSelectList, notification, genUnitsSystem, genUnits, genUnit,
-  unitConvToBase, unitConversion, toBool, toNum, genUnitSup, absOlsTermId, absOlsTermLabel, reUnit,
-  clsInputGroup, inputEventVal, molOptions, samOptions
-};
diff --git a/app/packs/src/admin/generic/collate.js b/app/packs/src/admin/generic/collate.js
deleted file mode 100644
index df354651d..000000000
--- a/app/packs/src/admin/generic/collate.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { cloneDeep } from 'lodash';
-import { unitConversion } from './Utils';
-import GenericSubField from '../../components/models/GenericSubField';
-
-const collateValues = (currentFields, previousFields, previousValues) => {
-  const result = [];
-  let newSub = new GenericSubField();
-  currentFields.map(e => Object.assign(newSub, { [e.id]: '' }));
-  const currentValuKeys = Object.keys(newSub);
-  const previousValueKeys = Object.keys(previousValues[0]);
-  const notInCurrent = previousValueKeys.filter(e => !currentValuKeys.includes(e));
-  const currObj = {};
-  currentFields.map((c) => {
-    if (c.type === 'text') return Object.assign(currObj, { [c.id]: '' });
-    return Object.assign(currObj, { [c.id]: { value: '', value_system: c.value_system } });
-  });
-  previousValues.forEach((e) => {
-    newSub = new GenericSubField();
-    Object.assign(newSub, currObj, e);
-    notInCurrent.forEach(c => delete newSub[c]);
-    previousValueKeys.forEach((preKey) => {
-      if (newSub[preKey] === undefined || preKey === 'id') return;
-      const curr = currentFields.find(f => f.id === preKey);
-      const prev = previousFields.find(f => f.id === preKey);
-      if (curr.type === 'drag_molecule') {
-        if (['text', 'system-defined', 'drag_sample'].includes(prev.type)) {
-          newSub[preKey] = { value: undefined };
-        }
-      }
-      if (curr.type === 'text') {
-        if (prev.type === 'system-defined') {
-          newSub[preKey] = newSub[preKey].value;
-        }
-        if (['drag_molecule', 'drag_sample'].includes(prev.type)) {
-          newSub[preKey] = '';
-        }
-      }
-      if (curr.type === 'system-defined') {
-        if (prev.type === 'system-defined' && (curr.option_layers !== prev.option_layers)) {
-          newSub[preKey].value_system = curr.value_system;
-        }
-        if (['text', 'drag_molecule', 'drag_sample'].includes(prev.type)) {
-          newSub[preKey] = { value: '', value_system: curr.value_system };
-        }
-        newSub[preKey].value =
-        unitConversion(curr.option_layer, newSub[preKey].value_system, newSub[preKey].value);
-      }
-    });
-    result.push(newSub);
-  });
-  return result;
-};
-
-const organizeSubValues = (cur, pre) => {
-  const currentFields = cloneDeep(cur.sub_fields || []);
-  const previousFields = cloneDeep(pre.sub_fields || []);
-  const previousValues = cloneDeep(pre.sub_values || []);
-  if (currentFields.length < 1 ||
-    previousFields.length < 1 || previousValues.length < 1) {
-    return [];
-  }
-  return collateValues(currentFields, previousFields, previousValues);
-};
-
-// eslint-disable-next-line import/prefer-default-export
-export { organizeSubValues };
diff --git a/app/packs/src/admin/text_templates/ActionHeaderBtn.js b/app/packs/src/admin/text_templates/ActionHeaderBtn.js
deleted file mode 100644
index 0ae7bb812..000000000
--- a/app/packs/src/admin/text_templates/ActionHeaderBtn.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button } from 'react-bootstrap';
-
-const ActionHeaderBtn = ({ addRow }) => (
-  <Button
-    active
-    onClick={() => addRow()}
-    bsSize="xsmall"
-    bsStyle="primary"
-  >
-    <i className="fa fa-plus" />
-  </Button>
-);
-
-ActionHeaderBtn.propTypes = {
-  addRow: PropTypes.func.isRequired,
-};
-
-export default ActionHeaderBtn;
diff --git a/app/packs/src/admin/text_templates/ActionRowBtn.js b/app/packs/src/admin/text_templates/ActionRowBtn.js
deleted file mode 100644
index 61ccf44e9..000000000
--- a/app/packs/src/admin/text_templates/ActionRowBtn.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button } from 'react-bootstrap';
-
-const RemoveRowBtn = ({ removeRow, node }) => {
-  const { data, gridOptionsWrapper } = node;
-
-  const btnClick = () => {
-    gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
-    removeRow(data.name);
-    setTimeout(() => {
-      gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
-    });
-  };
-
-  return (
-    <Button
-      active
-      onClick={btnClick}
-      bsSize="xsmall"
-      bsStyle="danger"
-    >
-      <i className="fa fa-trash" />
-    </Button>
-  );
-};
-
-RemoveRowBtn.propTypes = {
-  removeRow: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-};
-
-const SaveRowBtn = ({ saveRow, node }) => {
-  const { data, gridOptionsWrapper } = node;
-
-  const btnClick = () => {
-    gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
-    saveRow(data.name);
-    setTimeout(() => {
-      gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
-    });
-  };
-
-  return (
-    <Button
-      active
-      onClick={btnClick}
-      bsSize="xsmall"
-      bsStyle="success"
-    >
-      <i className="fa fa-floppy-o" />
-    </Button>
-  );
-};
-
-SaveRowBtn.propTypes = {
-  saveRow: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-};
-
-// const ActionRowBtn = ({ removeRow, saveRow, node }) => {
-const ActionRowBtn = ({ removeRow, node }) => {
-  return <RemoveRowBtn node={node} removeRow={removeRow} />;
-
-  // const { data } = node;
-  // if (data.name || data.name !== '') {
-  //   return <RemoveRowBtn node={node} removeRow={removeRow} />;
-  // }
-
-  // return <SaveRowBtn node={node} saveRow={saveRow} />;
-};
-
-ActionRowBtn.propTypes = {
-  removeRow: PropTypes.func.isRequired,
-  // saveRow: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-};
-
-export default ActionRowBtn;
diff --git a/app/packs/src/admin/text_templates/TextTemplate.js b/app/packs/src/admin/text_templates/TextTemplate.js
deleted file mode 100644
index 13e666c71..000000000
--- a/app/packs/src/admin/text_templates/TextTemplate.js
+++ /dev/null
@@ -1,259 +0,0 @@
-import { AgGridReact } from 'ag-grid-react';
-import { cloneDeep } from 'lodash';
-import PropTypes from 'prop-types';
-import Delta from 'quill-delta';
-import React from 'react';
-import {
-  Button, ControlLabel,
-  Form, FormControl,
-  Panel
-} from 'react-bootstrap';
-
-import ReactQuill from '../../components/react_quill/ReactQuill';
-import TextTemplateIcon from './TextTemplateIcon';
-import ActionHeaderBtn from './ActionHeaderBtn';
-import ActionRowBtn from './ActionRowBtn';
-
-export default class TextTemplate extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedTemplate: null,
-      text: '',
-      icon: ''
-    };
-
-    this.reactQuillRef = React.createRef();
-
-    this.onSelectionChanged = this.onSelectionChanged.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.onCellValueChanged = this.onCellValueChanged.bind(this);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onChangeIcon = this.onChangeIcon.bind(this);
-
-    this.saveTemplate = this.saveTemplate.bind(this);
-    this.removeRow = this.removeRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-
-    this.columnDefs = [
-      {
-        field: 'name',
-        editable: true,
-        minWidth: 150,
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: '',
-        colId: 'actions',
-        headerComponentFramework: ActionHeaderBtn,
-        headerComponentParams: {
-          addRow: this.addRow
-        },
-        cellRendererFramework: ActionRowBtn,
-        cellRendererParams: {
-          removeRow: this.removeRow,
-        },
-        editable: false,
-        filter: false,
-        width: 35,
-      },
-    ];
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(newProps) {
-    const { fetchedTemplates } = newProps;
-    const selectedRows = this.gridApi.getSelectedRows();
-    if (selectedRows.length === 0) return;
-
-    const selectedNameIdx = fetchedTemplates.findIndex(t => (
-      t.name === selectedRows[0].name
-    ));
-    if (selectedNameIdx < 0) return;
-
-    const newSelectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
-    this.setState({
-      selectedTemplate: cloneDeep(newSelectedTemplate),
-      text: newSelectedTemplate.data.text || '',
-      icon: newSelectedTemplate.data.icon || ''
-    });
-  }
-
-  componentDidUpdate() {
-    if (!this.gridApi) {
-      this.gridApi.sizeColumnsToFit();
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  onGridReady(e) {
-    e.api.sizeColumnsToFit();
-    this.gridApi = e.api;
-  }
-
-  onSelectionChanged() {
-    if (!this.gridApi) return;
-
-    const selectedRows = this.gridApi.getSelectedRows();
-    const templateName = selectedRows[0].name;
-
-    const { fetchedTemplates } = this.props;
-    const selectedNameIdx = fetchedTemplates.findIndex(t => (
-      t.name === templateName
-    ));
-
-    if (selectedNameIdx >= 0) {
-      const selectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
-      this.setState({
-        selectedTemplate,
-        text: selectedTemplate.data.text || '',
-        icon: selectedTemplate.data.icon || ''
-      });
-    } else {
-      const { fetchTemplate } = this.props;
-      fetchTemplate(templateName);
-    }
-  }
-
-  onCellValueChanged(params) {
-    const { oldValue, newValue } = params;
-    const { fetchedTemplates, updateTemplate } = this.props;
-    const selectedNameIdx = fetchedTemplates.findIndex(t => (
-      t.name === oldValue
-    ));
-    if (selectedNameIdx < 0) return;
-
-    const selectedTemplate = cloneDeep(fetchedTemplates[selectedNameIdx]);
-    selectedTemplate.name = newValue;
-    updateTemplate(selectedTemplate);
-  }
-
-  onChangeText(e) {
-    const { selectedTemplate } = this.state;
-    const { value } = e.target;
-    selectedTemplate.data.text = value;
-
-    this.setState({
-      text: value,
-      selectedTemplate
-    });
-  }
-
-  onChangeIcon(e) {
-    const { selectedTemplate } = this.state;
-    const { value } = e.target;
-    selectedTemplate.data.icon = value;
-
-    this.setState({ icon: value, selectedTemplate });
-  }
-
-  saveTemplate() {
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    const quill = this.reactQuillRef.current.getEditor();
-    const delta = quill.getContents();
-
-    // Quill automatically append a trailing newline, we don't want that
-    // Remove it !!!
-    const deltaLength = delta.length();
-    const removeTrailingNewline = new Delta().retain(deltaLength - 1).delete(1);
-    const content = delta.compose(removeTrailingNewline);
-
-    const selectedTemplate = cloneDeep(this.state.selectedTemplate);
-    selectedTemplate.data.ops = content.ops;
-    this.props.updateTemplate(selectedTemplate);
-  }
-
-  removeRow(name) {
-    const { removeTemplate } = this.props;
-    removeTemplate(name);
-  }
-
-  addRow() {
-    const { addTemplate } = this.props;
-    addTemplate(this.gridApi);
-  }
-
-  render() {
-    const { predefinedTemplateNames } = this.props;
-    const { selectedTemplate, text, icon } = this.state;
-
-    return (
-      <Panel style={{ height: 'calc(100vh - 150px)' }}>
-        <Panel.Body style={{ height: '100%' }}>
-          <div style={{ display: 'flex', height: '100%' }}>
-            <div style={{ width: '35%' }}>
-              <div style={{ height: '100%' }} className="ag-theme-balham">
-                <AgGridReact
-                  enableColResize
-                  pagination
-                  paginationAutoPageSize
-                  suppressHorizontalScroll
-                  columnDefs={this.columnDefs}
-                  rowSelection="single"
-                  onGridReady={this.onGridReady}
-                  onSelectionChanged={this.onSelectionChanged}
-                  rowData={predefinedTemplateNames}
-                />
-              </div>
-            </div>
-            <div style={{ marginLeft: '10px', width: '65%' }}>
-              <div style={{ margin: '10px' }}>
-                <ControlLabel style={{ width: '65px' }}>
-                  Preview
-                </ControlLabel>
-                &nbsp;
-                <TextTemplateIcon template={selectedTemplate} />
-              </div>
-              <div style={{ margin: '10px' }}>
-                <Form inline>
-                  <ControlLabel style={{ width: '65px' }}>Text</ControlLabel>
-                  <FormControl value={text} onChange={this.onChangeText} />
-                </Form>
-              </div>
-              <div style={{ margin: '10px 10px 20px 10px' }}>
-                <Form inline>
-                  <ControlLabel style={{ width: '65px' }}>Icon</ControlLabel>
-                  <FormControl value={icon} onChange={this.onChangeIcon} />
-                </Form>
-              </div>
-              <div>
-                <ReactQuill
-                  modules={this.modules}
-                  theme="snow"
-                  style={{ height: '120px' }}
-                  ref={this.reactQuillRef}
-                  value={(selectedTemplate || {}).data}
-                />
-              </div>
-              &nbsp;&nbsp;
-              <div style={{ marginTop: '30px' }}>
-                <Button bsStyle="primary" onClick={this.saveTemplate}>
-                  Save
-                </Button>
-              </div>
-            </div>
-          </div>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-TextTemplate.propTypes = {
-  predefinedTemplateNames: PropTypes.arrayOf(PropTypes.object),
-  // eslint-disable-next-line react/forbid-prop-types
-  fetchedTemplates: PropTypes.arrayOf(PropTypes.object),
-  fetchTemplate: PropTypes.func.isRequired,
-  addTemplate: PropTypes.func.isRequired,
-  updateTemplate: PropTypes.func.isRequired,
-  removeTemplate: PropTypes.func.isRequired,
-};
-
-TextTemplate.defaultProps = {
-  predefinedTemplateNames: [],
-  fetchedTemplates: [],
-};
diff --git a/app/packs/src/admin/text_templates/TextTemplateContainer.js b/app/packs/src/admin/text_templates/TextTemplateContainer.js
deleted file mode 100644
index 0cec1758c..000000000
--- a/app/packs/src/admin/text_templates/TextTemplateContainer.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-
-import TextTemplatesFetcher from '../../components/fetchers/TextTemplatesFetcher';
-import TextTemplate from './TextTemplate';
-
-export default class TextTemplateContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      predefinedTemplateNames: [],
-      fetchedTemplates: [],
-    };
-
-    this.addTemplate = this.addTemplate.bind(this);
-    this.fetchTemplate = this.fetchTemplate.bind(this);
-    this.removeTemplate = this.removeTemplate.bind(this);
-    this.updateTemplate = this.updateTemplate.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplatesFetcher.fetchPredefinedTemplateNames().then((res) => {
-      const templateNames = res.map(n => ({ name: n }));
-      this.setState({ predefinedTemplateNames: templateNames });
-    });
-  }
-
-  addTemplate(gridApi) {
-    const { predefinedTemplateNames, fetchedTemplates } = this.state;
-
-    this.setState({
-      predefinedTemplateNames: [{ name: '' }, ...predefinedTemplateNames],
-      fetchedTemplates: [
-        { name: '', data: {} },
-        ...fetchedTemplates
-      ]
-    }, () => {
-      if (!gridApi) return;
-
-      gridApi.startEditingCell({ rowIndex: 0, colKey: 'name' });
-    });
-  }
-
-  fetchTemplate(name) {
-    TextTemplatesFetcher.fetchPredefinedTemplateByNames([name]).then((res) => {
-      if (!res) return;
-
-      const { fetchedTemplates } = this.state;
-      this.setState({
-        fetchedTemplates: [...fetchedTemplates].concat(res),
-      });
-    });
-  }
-
-  removeTemplate(name) {
-    TextTemplatesFetcher.deletePredefinedTemplateByName(name).then((res) => {
-      if (!res) return;
-
-      const { fetchedTemplates, predefinedTemplateNames } = this.state;
-      this.setState({
-        fetchedTemplates: fetchedTemplates.filter(t => t.name !== name),
-        predefinedTemplateNames: predefinedTemplateNames.filter(t => (
-          t.name !== name
-        ))
-      });
-    });
-  }
-
-  updateTemplate(template) {
-    const { fetchedTemplates } = this.state;
-    const selectedNameIdx = fetchedTemplates.findIndex(t => (
-      t.id === template.id
-    ));
-    if (selectedNameIdx < 0) return;
-
-    TextTemplatesFetcher.updatePredefinedTemplates(template).then((res) => {
-      if (!res) return;
-
-      const newTemplates = fetchedTemplates.map((t, idx) => (
-        (idx === selectedNameIdx) ? res : t
-      ));
-      this.setState({ fetchedTemplates: newTemplates });
-    });
-  }
-
-  render() {
-    const {
-      predefinedTemplateNames,
-      fetchedTemplates,
-    } = this.state;
-
-    return (
-      <TextTemplate
-        predefinedTemplateNames={predefinedTemplateNames}
-        fetchedTemplates={fetchedTemplates}
-        fetchTemplate={this.fetchTemplate}
-        addTemplate={this.addTemplate}
-        removeTemplate={this.removeTemplate}
-        updateTemplate={this.updateTemplate}
-      />
-    );
-  }
-}
diff --git a/app/packs/src/admin/text_templates/TextTemplateIcon.js b/app/packs/src/admin/text_templates/TextTemplateIcon.js
deleted file mode 100644
index b321543e8..000000000
--- a/app/packs/src/admin/text_templates/TextTemplateIcon.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const TextTemplateIcon = ({ template }) => {
-  if (!template) return <span />;
-
-  const { data, name } = template;
-
-  if (data.icon) {
-    return (
-      <i className={data.icon} />
-    );
-  }
-
-  const text = (data || {}).text || name;
-
-  return (
-    <span>{text.toUpperCase()}</span>
-  );
-};
-
-TextTemplateIcon.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  template: PropTypes.object
-};
-
-TextTemplateIcon.defaultProps = {
-  template: null
-};
-
-export default TextTemplateIcon;
diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index d34a6c842..512be2031 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -33,7 +33,6 @@ export default class AdminNavigation extends React.Component {
   componentDidMount() {
     UserStore.listen(this.onChange);
     UserActions.fetchCurrentUser();
-    UserActions.fetchUnitsSystem();
   }
 
   componentWillUnmount() {
diff --git a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
index f0f61d012..9ad56d4a7 100644
--- a/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
+++ b/app/packs/src/apps/chemscanner/components/AbbreviationManagement.js
@@ -7,6 +7,34 @@ import {
   Form, FormGroup, FormControl,
 } from 'react-bootstrap';
 
+function ManagementTable({
+  columnDefs, defaultColDef, data, style, onGridReady
+}) {
+  return (
+    <div className="ag-theme-balham" style={style}>
+      <AgGridReact
+        floatingFilter
+        enableColResize
+        pagination
+        suppressHorizontalScroll
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef || {}}
+        rowData={data}
+        onGridReady={onGridReady}
+        domLayout="autoHeight"
+      />
+    </div>
+  );
+}
+
+ManagementTable.propTypes = {
+  columnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultColDef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  style: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onGridReady: PropTypes.func.isRequired,
+};
+
 export default class AbbreviationManagement extends React.Component {
   constructor() {
     super();
@@ -39,22 +67,10 @@ export default class AbbreviationManagement extends React.Component {
       abbColumnDefs, superatomColumnDefs, abbreviations, superatoms,
       defaultColDef, newAbb, changeTypeCreate
     } = this.props;
-
     const newText = newAbb ? 'Abbreviation' : 'Superatom';
 
-    const abbreviationStyle = {
-      width: '70%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-    const superatomStyle = {
-      width: '30%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-
     return (
-      <div style={{ marginTop: '20px' }}>
+      <div>
         <div className="chemscanner-abb-view-header">
           <Form inline style={{ marginRight: '20px' }}>
             <FormGroup controlId="formInlineName" style={{ marginRight: '20px' }}>
@@ -106,28 +122,20 @@ export default class AbbreviationManagement extends React.Component {
         </div>
         <br />
         <div className="abbreviation-management">
-          <div className="ag-theme-balham" style={abbreviationStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={abbColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={abbreviations}
-              onGridReady={this.onAbbGridReady}
-            />
-          </div>
-          <div className="ag-theme-balham" style={superatomStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={superatomColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={superatoms}
-              onGridReady={this.onSuperatomGridReady}
-            />
-          </div>
+          <ManagementTable
+            columnDefs={abbColumnDefs}
+            defaultColDef={defaultColDef}
+            data={abbreviations}
+            style={{ width: '70%', marginRight: '5px' }}
+            onGridReady={this.onAbbGridReady}
+          />
+          <ManagementTable
+            columnDefs={superatomColumnDefs}
+            defaultColDef={defaultColDef}
+            data={superatoms}
+            style={{ width: '30%', marginLeft: '5px' }}
+            onGridReady={this.onSuperatomGridReady}
+          />
         </div>
       </div>
     );
diff --git a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
index f7490dddc..095c2f9eb 100644
--- a/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
+++ b/app/packs/src/apps/chemscanner/components/CopyClipboardBtn.js
@@ -29,21 +29,18 @@ export default class CopyClipboardBtn extends React.Component {
   }
 
   render() {
-    const {
-      smi, mdl, inchi, inchiKey
-    } = this.props;
+    const { smi, mdl } = this.props;
     const clipboardIcon = (<i className="fa fa-clipboard" />);
 
     return (
       <DropdownButton
+        pullRight
         title={clipboardIcon}
-        className="clipboard-btn left-btn btn btn-xs"
+        className="clipboard-btn right-btn btn btn-xs"
         id={this.ddId}
       >
         <MenuItem eventKey="1" data-clipboard-text={smi}>SMILES</MenuItem>
         <MenuItem eventKey="2" data-clipboard-text={mdl}>Molfile</MenuItem>
-        <MenuItem eventKey="3" data-clipboard-text={inchi}>InChI</MenuItem>
-        <MenuItem eventKey="4" data-clipboard-text={inchiKey}>InChIKey</MenuItem>
       </DropdownButton>
     );
   }
@@ -52,8 +49,6 @@ export default class CopyClipboardBtn extends React.Component {
 CopyClipboardBtn.propTypes = {
   smi: PropTypes.string.isRequired,
   mdl: PropTypes.string.isRequired,
-  inchi: PropTypes.string.isRequired,
-  inchiKey: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   identifier: PropTypes.object.isRequired,
   container: PropTypes.instanceOf(Element)
diff --git a/app/packs/src/apps/chemscanner/components/DeleteBtn.js b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
index d1a23b213..933cd242d 100644
--- a/app/packs/src/apps/chemscanner/components/DeleteBtn.js
+++ b/app/packs/src/apps/chemscanner/components/DeleteBtn.js
@@ -15,12 +15,9 @@ export default class DeleteBtn extends React.Component {
   }
 
   render() {
-    const { pullLeft } = this.props;
-    const className = pullLeft ? 'left-btn' : 'right-btn';
-
     return (
       <button
-        className={`${className} btn btn-xs`}
+        className="right-btn btn btn-xs"
         onClick={this.onClick}
       >
         <i className="fa fa-times" />
@@ -31,10 +28,5 @@ export default class DeleteBtn extends React.Component {
 
 DeleteBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
-  pullLeft: PropTypes.bool,
   param: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
 };
-
-DeleteBtn.defaultProps = {
-  pullLeft: false,
-};
diff --git a/app/packs/src/apps/chemscanner/components/HeaderMenu.js b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
index 0984c6f3c..65035c675 100644
--- a/app/packs/src/apps/chemscanner/components/HeaderMenu.js
+++ b/app/packs/src/apps/chemscanner/components/HeaderMenu.js
@@ -1,4 +1,4 @@
-import { List } from 'immutable';
+import { Map, List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import 'whatwg-fetch';
@@ -35,17 +35,11 @@ import HelpPopover from 'src/apps/chemscanner/components/HelpPopover';
 import NotificationContainer from 'src/apps/chemscanner/containers/NotificationContainer';
 
 import {
-  extractMoleculeFromGroup,
+  extractReaction,
   generateExcelMoleculeRow,
   generateExcelReactionRow
 } from 'src/apps/chemscanner/utils';
 
-import {
-  getSchemeMolecules,
-  getReactionReagents,
-  getReactionGroups
-} from '../reactionUtils';
-
 const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
 
 const allReagents = Object.assign(
@@ -72,65 +66,15 @@ export default class HeaderMenu extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      disabled: true,
-      selectedReactionId: 0,
-      selectedSolvents: [],
-      selectedReagents: []
-    };
-
     this.clickUploadMolecule = this.clickUploadMolecule.bind(this);
     this.clickUploadReaction = this.clickUploadReaction.bind(this);
 
     this.scanFilesForMolecules = this.scanFilesForMolecules.bind(this);
     this.scanFilesForReactions = this.scanFilesForReactions.bind(this);
-    this.updateReagents = this.updateReagents.bind(this);
+    this.addReagents = this.addReagents.bind(this);
 
     this.exportCml = this.exportCml.bind(this);
     this.exportExcel = this.exportExcel.bind(this);
-
-    this.changeScannedFileView = this.changeScannedFileView.bind(this);
-    this.changeAbbreviationView = this.changeAbbreviationView.bind(this);
-    this.changeFileStorageView = this.changeFileStorageView.bind(this);
-    this.changeArchivedManagementView = this.changeArchivedManagementView.bind(this);
-
-    this.solventValues = Object.keys(solvents).map(k => solvents[k]);
-    this.allReagentValues = Object.keys(allReagents).map(k => allReagents[k]);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { reactions, molecules } = nextProps;
-
-    let rId = this.state.selectedReactionId;
-    const selectedR = reactions.filter(r => r.get('selected'));
-    const disabled = selectedR.size !== 1 || !selectedR.get(0).get('id');
-
-    const selectedReagents = [];
-    const selectedSolvents = [];
-
-    if (!disabled && selectedR.size === 1) {
-      const reaction = selectedR.get(0);
-      rId = reaction.get('id');
-      const reactionMolecules = getSchemeMolecules(reaction, molecules);
-      const reagents = getReactionReagents(reaction, reactionMolecules);
-
-      reagents.forEach((m) => {
-        const canoSmiles = m.get('canoSmiles');
-
-        if (this.solventValues.includes(canoSmiles)) {
-          selectedSolvents.push(canoSmiles);
-        } else if (this.allReagentValues.includes(canoSmiles)) {
-          selectedReagents.push(canoSmiles);
-        }
-      });
-    }
-
-    this.setState({
-      selectedReactionId: rId,
-      selectedSolvents,
-      selectedReagents,
-      disabled
-    });
   }
 
   exportCml() {
@@ -139,34 +83,24 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
+      selectedR = reactions;
+      selectedM = molecules;
     }
 
-    const simpleReactions = selectedR.map((r) => {
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(r, molecules);
-
-      return {
-        id: r.get('id'),
-        reactants: extractMoleculeFromGroup(reactants.toJS()),
-        reagents: extractMoleculeFromGroup(reagents.toJS()),
-        solvents: extractMoleculeFromGroup(solvents.toJS()),
-        products: extractMoleculeFromGroup(products.toJS()),
-        yield: r.get('yield') || '',
-        time: r.get('time') || '',
-        temperature: r.get('temperature') || '',
-        description: r.get('description') || ''
-      };
-    });
+    const simpleReactions = selectedR.toJS().map(r => ({
+      ...extractReaction(r),
+      yield: r.yield || '',
+      time: r.time || '',
+      temperature: r.temperature || '',
+      description: r.description || ''
+    }));
 
     const simpleMolecules = selectedM.toJS().map(m => ({
       id: m.id,
       mdl: m.mdl,
     }));
 
-    fetch('/api/v1/public_chemscanner/export/cml', {
+    fetch('/api/v1/chemscanner/export/cml', {
       credentials: 'same-origin',
       headers: {
         Accept: 'application/json',
@@ -201,8 +135,8 @@ export default class HeaderMenu extends Component {
     let selectedR = reactions.filter(r => r.get('selected'));
     let selectedM = molecules.filter(r => r.get('selected'));
     if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
+      selectedR = reactions;
+      selectedM = molecules;
     }
 
     const wb = {};
@@ -213,26 +147,14 @@ export default class HeaderMenu extends Component {
     const moleculeRows = selectedM.toJS().reduce((rows, mol) => {
       rows.push(generateExcelMoleculeRow(mol));
       return rows;
-    }, [['Smiles', 'MDL', 'InChI', 'InChIKey', 'Description']]);
+    }, [['Smiles', 'MDL', 'Description']]);
     const moleculeWs = XLSX.utils.aoa_to_sheet(moleculeRows);
     wb.SheetNames.push(moleculeSheet);
     wb.Sheets[moleculeSheet] = moleculeWs;
 
     const reactionSheet = 'Reactions';
-    const reactionRows = selectedR.reduce((rows, immuReaction) => {
-      const reaction = immuReaction.toJS();
-
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(immuReaction, molecules);
-
-      reaction.reactants = reactants;
-      reaction.reagents = reagents;
-      reaction.solvents = solvents;
-      reaction.products = products;
-
+    const reactionRows = selectedR.toJS().reduce((rows, reaction) => {
       rows.push(generateExcelReactionRow(reaction));
-
       return rows;
     }, [[
       'ReactionSmiles', 'Temperature', 'Yield', 'Time',
@@ -279,19 +201,9 @@ export default class HeaderMenu extends Component {
     this.reactionInput.value = '';
   }
 
-  updateReagents({ value, type }) {
-    const { updateReagents } = this.props;
-    const { selectedReactionId } = this.state;
-
-    const newSmiles = value.split(',');
-    const selectedType = `selected${type[0].toUpperCase()}${type.substring(1)}`;
-    const selectedSmiles = this.state[selectedType];
-
-    const removedSmiles = selectedSmiles.filter(smi => !newSmiles.includes(smi));
-    const addedSmiles = newSmiles.filter(smi => !selectedSmiles.includes(smi));
-
-    const updateInfo = { add: addedSmiles, remove: removedSmiles };
-    updateReagents(selectedReactionId, updateInfo);
+  addReagents({ value, type }) {
+    const { addSmi, reactions } = this.props;
+    addSmi(reactions, value, type);
   }
 
   clickUploadMolecule() {
@@ -304,27 +216,24 @@ export default class HeaderMenu extends Component {
     document.getElementById('chemscanner-scan-file-dd').click();
   }
 
-  changeScannedFileView() {
-    this.props.changeScannedFileView();
-  }
-
-  changeAbbreviationView() {
-    this.props.changeAbbreviationView();
-  }
-
-  changeFileStorageView() {
-    this.props.changeFileStorageView();
-  }
-
-  changeArchivedManagementView() {
-    this.props.changeArchivedManagementView();
-  }
-
   render() {
-    const { cleanUp } = this.props;
-    const { disabled, selectedReagents, selectedSolvents } = this.state;
+    const {
+      ui, reactions, cleanUp, toggleAbbView,
+    } = this.props;
+
+    const isAbb = ui.get('abbView');
+    const switchText = isAbb ? 'Extracted Items' : 'Abbreviation Management';
+    // const partition = partitionSolventsReagents(value);
+    const selectedR = reactions.filter(r => r.get('selected'));
+    const disabled = selectedR.size === 0;
+    const selectedReagents = (
+      disabled ? [] : (selectedR.getIn([0, 'addedReagentsSmi']) || List()).toArray()
+    );
+    const selectedSolvents = (
+      disabled ? [] : (selectedR.getIn([0, 'addedSolventsSmi']) || List()).toArray()
+    );
 
-    const helpPopover = <HelpPopover style={{ maxWidth: '800px' }} />;
+    const helpPopover = <HelpPopover />;
 
     return (
       <div className="chemscanner-menu">
@@ -375,52 +284,29 @@ export default class HeaderMenu extends Component {
             obj={solvents}
             type="solvents"
             value={selectedSolvents}
-            onSelect={this.updateReagents}
+            onSelect={this.addReagents}
           />
         </div>
         <div style={{ width: '200px' }}>
           <SmiSelect
             disabled={disabled}
             obj={allReagents}
-            onSelect={this.updateReagents}
+            onSelect={this.addReagents}
             value={selectedReagents}
             type="reagents"
             optionHeight={80}
           />
         </div>
-        <ButtonGroup style={{ marginRight: '5px' }}>
+        <ButtonGroup>
           <DropdownButton title="Export" id="chemscanner-export-dd">
             <MenuItem eventKey="1" onSelect={this.exportCml}>CML</MenuItem>
             <MenuItem eventKey="2" onSelect={this.exportExcel}>Excel</MenuItem>
           </DropdownButton>
         </ButtonGroup>
+        &nbsp;
+        &nbsp;
         <ButtonGroup>
-          <DropdownButton title="View" id="chemscanner-export-dd">
-            <MenuItem
-              eventKey="1"
-              onSelect={this.changeScannedFileView}
-            >
-              Scanned Files
-            </MenuItem>
-            <MenuItem
-              eventKey="2"
-              onSelect={this.changeAbbreviationView}
-            >
-              Abbreviation/Superatom
-            </MenuItem>
-            <MenuItem
-              eventKey="3"
-              onSelect={this.changeFileStorageView}
-            >
-              File Storage
-            </MenuItem>
-            <MenuItem
-              eventKey="4"
-              onSelect={this.changeArchivedManagementView}
-            >
-              Archived Management
-            </MenuItem>
-          </DropdownButton>
+          <Button onClick={toggleAbbView}>{switchText}</Button>
         </ButtonGroup>
       </div>
     );
@@ -428,14 +314,12 @@ export default class HeaderMenu extends Component {
 }
 
 HeaderMenu.propTypes = {
+  ui: PropTypes.instanceOf(Map).isRequired,
   reactions: PropTypes.instanceOf(List).isRequired,
   molecules: PropTypes.instanceOf(List).isRequired,
   scanFile: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,
   cleanUp: PropTypes.func.isRequired,
-  changeScannedFileView: PropTypes.func.isRequired,
-  changeAbbreviationView: PropTypes.func.isRequired,
-  changeFileStorageView: PropTypes.func.isRequired,
-  changeArchivedManagementView: PropTypes.func.isRequired,
-  updateReagents: PropTypes.func.isRequired,
+  toggleAbbView: PropTypes.func.isRequired,
+  addSmi: PropTypes.func.isRequired,
 };
diff --git a/app/packs/src/apps/chemscanner/components/HelpPopover.js b/app/packs/src/apps/chemscanner/components/HelpPopover.js
index 2075d9746..dbc28a5b9 100644
--- a/app/packs/src/apps/chemscanner/components/HelpPopover.js
+++ b/app/packs/src/apps/chemscanner/components/HelpPopover.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Popover } from 'react-bootstrap';
 
 const HelpPopover = props => (
-  <Popover id="chemscanner-help-popover" title="How to Use" {...props} >
+  <Popover id="popover-positioned-bottom" title="How to Use" {...props}>
     <strong>Scan File</strong>
     <p>
       Retrieve reaction(s)/molecule(s) from file(s).
@@ -13,31 +13,19 @@ const HelpPopover = props => (
       Clean up molecule(s) structure.
       All structures will be cleaned up if no molecule(s)/reaction(s) are selected.
     </p>
-    <strong>Export</strong>
+    <strong>Add solvents/reagents</strong>
     <p>
-      Export selected elements to CML or Excel.
-      All elements will be exported if none are selected.
+      Solvents/Reagents from the list will be added to the selected reaction(s).
     </p>
-    <strong>Add solvents/reagents <i><b>(Only for logged-in users)</b></i></strong>
+    <strong>Abbreviation Management</strong>
     <p>
-      Solvents/Reagents from the list will be added to the selected reaction(s).
+      Management UI for abbreviations and superatoms
     </p>
-    <strong>View</strong>
+    <strong>Export</strong>
     <p>
-      Switching View between abbreviations/superatoms management,
-      uploaded file storage management and scanned elements.
+      Export selected elements to CML or Excel.
+      All elements will be exported if none are selected.
     </p>
-    <ul>
-      <li><b>Scanned Files:</b> View scanned molecules/reactions</li>
-      <li>
-        <b>Abbreviation/Superatom:</b> Abbreviations and superatoms management.
-        <b> Only logged-in users can edit</b>
-      </li>
-      <li>
-        <b>File Storage:</b> Uploaded files, scanned files management.
-        <b> Only for logged-in users</b>
-      </li>
-    </ul>
   </Popover>
 );
 
diff --git a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
index eec1cf5c5..c41fc9647 100644
--- a/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
+++ b/app/packs/src/apps/chemscanner/components/MoleculeDetails.js
@@ -20,10 +20,8 @@ export default class MoleculeDetails extends React.Component {
 
   render() {
     const { molecule } = this.props;
-    let details = molecule.get('details');
-    if (!details) return <span />;
+    const details = molecule.get('details').toJS();
 
-    details = details.toJS();
     const detailsList = Object.keys(details).filter(k => details[k]).map(k => (
       <li key={k}> <b>{`${pascalize(k)}: `}</b> {details[k]} </li>
     ));
diff --git a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
index c359f7fe8..5ef6660d0 100644
--- a/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
+++ b/app/packs/src/apps/chemscanner/components/PreviewFileZoomPan.js
@@ -13,55 +13,26 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   constructor() {
     super();
 
-    this.state = {
-      type: '',
-      imageContent: ''
-    };
-
     this.setPreviewRef = (el) => {
       this.previewDiv = el;
     };
 
     this.isSvg = true;
     this.centeringImage = this.centeringImage.bind(this);
-    this.displayURL = this.displayURL.bind(this);
   }
 
   componentDidMount() {
-    // setTimeout(this.centeringImage, 300);
-
-    const { imageURL } = this.props;
-    this.displayURL(imageURL);
-  }
-
-  componentWillReceiveProps(newProps) {
-    const { imageURL } = newProps;
-    this.displayURL(imageURL);
+    setTimeout(this.centeringImage, 200);
   }
 
   componentDidUpdate() {
-    setTimeout(this.centeringImage, 300);
-  }
-
-  displayURL(url) {
-    fetch(url).then(r => r.blob()).then((blob) => {
-      const myReader = new FileReader();
-      const { type } = blob;
-
-      myReader.onload = () => {
-        this.setState({ imageContent: myReader.result, type }, this.centeringImage);
-      };
-
-      myReader.readAsText(blob);
-    });
+    setTimeout(this.centeringImage, 200);
   }
 
   centeringImage() {
     const svgEl = this.previewDiv.querySelector('#svg-file-container');
     const imgSelector = this.isSvg ? 'g > svg' : '#png-img-svg';
     const imgEl = svgEl.querySelector(imgSelector);
-    if (!imgEl) return;
-
     const svgWidth = Math.floor(svgEl.getBoundingClientRect().width);
 
     let imgWidth;
@@ -103,28 +74,24 @@ export default class PreviewFileZoomPan extends React.PureComponent {
   }
 
   render() {
-    const { duration } = this.props;
-    const { imageContent, type } = this.state;
+    const { content, duration } = this.props;
+    if (!content) return <span />;
 
-    if (imageContent.length === 0 || type.length === 0) return <span />;
-
-    let svg = imageContent;
-
-    if (type === 'image/png') {
+    let svg = content;
+    if (content.startsWith('data:image/png;base64')) {
       this.isSvg = false;
-
       svg = `
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <image id="png-img-svg" xlink:href="${imageContent}" width="100%" height="100%" />
+          <image id="png-img-svg" xlink:href="${content}" width="100%" height="100%" />
         </svg>
       `;
     } else {
-      svg = imageContent;
+      svg = content;
     }
 
     let dummyImg = (<span />);
     if (!this.isSvg) {
-      dummyImg = (<img id="dummy-img" alt="" src={imageContent} />);
+      dummyImg = (<img id="dummy-img" alt="" src={content} />);
     }
 
     return (
@@ -145,10 +112,11 @@ export default class PreviewFileZoomPan extends React.PureComponent {
 }
 
 PreviewFileZoomPan.propTypes = {
-  imageURL: PropTypes.string.isRequired,
+  content: PropTypes.string,
   duration: PropTypes.number,
 };
 
 PreviewFileZoomPan.defaultProps = {
+  content: '',
   duration: 200,
 };
diff --git a/app/packs/src/apps/chemscanner/components/ReactionDetails.js b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
index 2bc9a3cd3..1cea69f01 100644
--- a/app/packs/src/apps/chemscanner/components/ReactionDetails.js
+++ b/app/packs/src/apps/chemscanner/components/ReactionDetails.js
@@ -41,19 +41,14 @@ export default class ReactionDetails extends React.Component {
       return acc.concat(keyList);
     }, []);
 
-    const detailsList = [
-      'reactants', 'reagents', 'solvents', 'products'
-    ].reduce((acc, group) => {
-      const groupMol = this.props[group];
+    const detailsList = ['reactants', 'reagents', 'products'].reduce((acc, group) => {
+      const groupMol = reaction.get(group);
       if (!groupMol || groupMol.size === 0) return acc;
 
       const keyList = groupMol.reduce((mAcc, m, idx) => {
-        let mDetails = m.get('details');
-        if (!mDetails) return mAcc;
-
-        mDetails = mDetails.toJS();
-        const mDetailEls = Object.keys(mDetails).filter(k => mDetails[k]).map(k => (
-          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetails[k]} </li>
+        const mDetail = m.get('details').toJS();
+        const mDetailEls = Object.keys(mDetail).filter(k => mDetail[k]).map(k => (
+          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetail[k]} </li>
         ));
         if (mDetailEls.length === 0) return mAcc;
 
diff --git a/app/packs/src/apps/chemscanner/components/Root.js b/app/packs/src/apps/chemscanner/components/Root.js
index 17e4d5428..11a0288ce 100644
--- a/app/packs/src/apps/chemscanner/components/Root.js
+++ b/app/packs/src/apps/chemscanner/components/Root.js
@@ -11,14 +11,9 @@ import LoadingModalContainer from 'src/apps/chemscanner/containers/LoadingModalC
 
 class Root extends Component {
   componentDidMount() {
-    const {
-      isScriptLoaded, isScriptLoadSucceed, attachEditor,
-      getCurrentVersion
-    } = this.props;
-
-    getCurrentVersion();
-
+    const { isScriptLoaded, isScriptLoadSucceed, attachEditor } = this.props;
     const check = isScriptLoaded && isScriptLoadSucceed;
+
     if (!check) return;
 
     attachEditor('chemscanner-cdjs-container');
@@ -39,25 +34,7 @@ class Root extends Component {
 
   render() {
     const { modal, ui } = this.props;
-    const view = ui.get('view');
-
-    let viewContainer = <span />;
-    switch (view) {
-      case types.VIEW_SCANNED_FILES:
-        viewContainer = <MainContentContainer modal={modal} />;
-        break;
-      case types.VIEW_ABBREVIATION:
-        viewContainer = <AbbreviationContainer />;
-        break;
-      case types.VIEW_FILE_STORAGE:
-        viewContainer = <FileStorageContainer />;
-        break;
-      case types.VIEW_ARCHIVED_MANAGEMENT:
-        viewContainer = <ArchivedManagementContainer />;
-        break;
-      default:
-        break;
-    }
+    const abbView = ui.get('abbView') || false;
 
     return (
       <Grid fluid className="chemscanner-grid">
@@ -77,7 +54,6 @@ class Root extends Component {
         </Row>
         <Row>
           <LoadingModalContainer />
-          <ImportModalContainer />
         </Row>
       </Grid>
     );
@@ -89,7 +65,6 @@ Root.propTypes = {
   isScriptLoaded: PropTypes.bool.isRequired,
   isScriptLoadSucceed: PropTypes.bool.isRequired,
   attachEditor: PropTypes.func.isRequired,
-  getCurrentVersion: PropTypes.func.isRequired,
   modal: PropTypes.string
 };
 
@@ -97,7 +72,6 @@ Root.defaultProps = {
   modal: ''
 };
 
-const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
-// const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
-
+// const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
+const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
 export default scriptLoader(scriptUrl)(Root);
diff --git a/app/packs/src/apps/chemscanner/components/SelectBtn.js b/app/packs/src/apps/chemscanner/components/SelectBtn.js
index 4d31c68d9..82c7279eb 100644
--- a/app/packs/src/apps/chemscanner/components/SelectBtn.js
+++ b/app/packs/src/apps/chemscanner/components/SelectBtn.js
@@ -8,7 +8,9 @@ export default class SelectBtn extends React.Component {
   }
 
   onClick() {
-    const { itemId, onClick } = this.props;
+    const {
+      itemId, onClick
+    } = this.props;
     onClick(itemId);
   }
 
@@ -18,7 +20,7 @@ export default class SelectBtn extends React.Component {
 
     return (
       <button
-        className="left-btn btn btn-xs"
+        className="right-btn btn btn-xs"
         onClick={this.onClick}
       >
         <i className={`fa ${className}`} />
@@ -30,6 +32,5 @@ export default class SelectBtn extends React.Component {
 SelectBtn.propTypes = {
   onClick: PropTypes.func.isRequired,
   itemId: PropTypes.number.isRequired,
-  schemeIdx: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired
 };
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index 93e0ee3ee..40c8d0cde 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -59,6 +59,7 @@ import {
 import ReactionDetailsRepoComment from 'src/components/chemrepo/ReactionDetailsRepoComment';
 import { contentToText } from 'src/utilities/quillFormat';
 import HelpInfo from 'src/components/common/HelpInfo';
+import uuid from 'uuid';
 
 export default class ReactionDetails extends Component {
   constructor(props) {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
index 54b32e4b1..c9a144367 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -584,7 +584,6 @@ class Material extends Component {
             disabled={!permitOn(reaction)}
             bsStyle="danger"
             bsSize="small"
-            disabled={this.props.reaction.is_published == true}
             onClick={() => deleteMaterial(material)}
           >
             <i className="fa fa-trash-o" />
@@ -664,7 +663,6 @@ class Material extends Component {
                 <Button
                   disabled={!permitOn(reaction)}
                   active
-                  disabled={this.props.reaction.is_published == true}
                   onClick={e => this.handleExternalLabelCompleted(e)}
                   bsSize="small"
                 ><i className="fa fa-refresh" /></Button>
@@ -690,7 +688,6 @@ class Material extends Component {
             disabled={!permitOn(reaction)}
             bsStyle="danger"
             bsSize="small"
-            disabled={this.props.reaction.is_published == true}
             onClick={() => deleteMaterial(material)}
           ><i className="fa fa-trash-o" /></Button>
         </td>
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
index 926760e31..3e488731b 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
@@ -17,8 +17,6 @@ import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
 
 import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 
-import TextTemplateActions from '../actions/TextTemplateActions';
-
 const SpectraEditorBtn = ({
   element, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate,
diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
index 7e693c33b..85b71df82 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js
@@ -22,9 +22,6 @@ import MolViewerSet from 'src/components/viewer/MolViewerSet';
 import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
 import MatrixCheck from 'src/components/common/MatrixCheck';
 
-import { PublishedTag } from './PublishCommon';
-import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-
 const qCheckPass = () => (
   <div style={{ display: 'inline', color: 'green' }}>
     &nbsp;
@@ -65,13 +62,6 @@ const qCheckMsg = (sample, container) => {
   return '';
 };
 
-const isNMRKind = (container) => {
-  if (container.extended_metadata.kind) {
-    return container.extended_metadata.kind.includes('NMR');
-  }
-  return false;
-}
-
 const SpectraEditorBtn = ({
   sample, spcInfos, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
index 261a21465..2c41d4255 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -28,8 +28,6 @@ import CommentIcon from 'src/components/comments/CommentIcon';
 
 import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';
 
-import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
-
 const buildFlattenSampleIds = (displayedMoleculeGroup) => {
   let flatIndex = 0;
   const flattenSamplesId = [];
diff --git a/app/packs/src/components/AnalysisEditor.js b/app/packs/src/components/AnalysisEditor.js
deleted file mode 100644
index c8420669d..000000000
--- a/app/packs/src/components/AnalysisEditor.js
+++ /dev/null
@@ -1,254 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { OverlayTrigger, Popover } from 'react-bootstrap';
-
-import Delta from 'quill-delta';
-
-import { formatAnalysisContent } from './utils/ElementUtils';
-
-import TextTemplateStore from './stores/TextTemplateStore';
-import TextTemplateActions from './actions/TextTemplateActions';
-
-import DynamicToolbarEditor from './react_quill/DynamicToolbarEditor';
-import ToolbarIcon from './react_quill/ToolbarIcon';
-import BaseToolbar from './react_quill/BaseToolbar';
-
-import TextTemplateToolbar from './text_template_toolbar/TextTemplateToolbar';
-import ToolbarTemplateCreator from './text_template_toolbar/ToolbarTemplateCreator';
-
-const toolbarOptions = [
-  'bold', 'italic', 'underline',
-  'header', 'script',
-  'list', 'bullet',
-];
-
-export default class AnalysisEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.reactQuillRef = React.createRef();
-
-    const templateStore = TextTemplateStore.getState();
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = templateStore;
-    const fetchedTemplates = fetchedPredefinedTemplates && fetchedPredefinedTemplates.toJS();
-    this.state = {
-      fetchedNames: Object.keys(fetchedTemplates),
-      predefinedTemplateNames: predefinedTemplateNames && predefinedTemplateNames.toJS(),
-      fetchedPredefinedTemplates,
-      updateTemplate: false
-    };
-
-    this.fetchPredefinedTemplates = this.fetchPredefinedTemplates.bind(this);
-
-    this.onChangeTemplateStore = this.onChangeTemplateStore.bind(this);
-    this.onChangeContent = this.onChangeContent.bind(this);
-    this.autoFormatContent = this.autoFormatContent.bind(this);
-    this.applyTemplate = this.applyTemplate.bind(this);
-    this.updateTextTemplates = this.updateTextTemplates.bind(this);
-
-    this.quillOnChange = this.quillOnChange.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateStore.listen(this.onChangeTemplateStore);
-    TextTemplateActions.fetchPredefinedTemplateNames();
-
-    const { template } = this.props;
-    const namesToFetch = Object.values(template).flat();
-    this.fetchPredefinedTemplates(namesToFetch);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { template } = this.props;
-    const namesToFetch = Object.values(template).flat();
-
-    if (!this.state.updateTemplate && Object.keys(template).length !== 0) {
-      // this.fetchPredefinedTemplates(namesToFetch);
-      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        updateTemplate: true
-      });
-    } else if (this.props.template !== prevProps.template && this.state.updateTemplate) {
-      const prevnamesToFetch = Object.values(prevProps.template).flat();
-
-      if (prevnamesToFetch.length !== namesToFetch.length) {
-        // this.fetchPredefinedTemplates(namesToFetch);
-        TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    TextTemplateStore.unlisten(this.onChangeTemplateStore);
-  }
-
-  onChangeTemplateStore(state) {
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = state;
-    const { fetchedNames } = this.state;
-    const fetchedTemplates = (fetchedPredefinedTemplates && fetchedPredefinedTemplates.toJS()) || Map();
-
-    const templateStoreFetched = Object.keys(fetchedTemplates);
-    const fetched = [...new Set(fetchedNames.concat(templateStoreFetched))];
-    this.setState({
-      fetchedNames: fetched,
-      predefinedTemplateNames: predefinedTemplateNames && predefinedTemplateNames.toJS(),
-      fetchedPredefinedTemplates: fetchedTemplates
-    });
-  }
-
-  onChangeContent(quillEditor) {
-    const { onChangeContent } = this.props;
-
-    if (onChangeContent) {
-      onChangeContent(quillEditor.getContents());
-    }
-  }
-
-  fetchPredefinedTemplates(names) {
-    if (!names || names.length === 0) return;
-
-    const { fetchedNames } = this.state;
-    const namesToFetch = names.filter(n => !fetchedNames.includes(n));
-    if (namesToFetch.length === 0) return;
-
-    const fetched = [...new Set(fetchedNames.concat(names))];
-    this.setState({ fetchedNames: fetched }, () => {
-      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-    });
-  }
-
-  autoFormatContent() {
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    const { analysis } = this.props;
-
-    let value = analysis.extended_metadata.content || {};
-    value = formatAnalysisContent(analysis);
-
-    const quill = this.reactQuillRef.current.getEditor();
-    quill.setContents(value);
-    this.onChangeContent(quill);
-  }
-
-  quillOnChange(content, delta, source, editor) {
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    this.onChangeContent(editor);
-  }
-
-  applyTemplate(macro) {
-    const check = ('ops' in macro) && Array.isArray(macro.ops);
-    if (!check) return;
-
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    const quill = this.reactQuillRef.current.getEditor();
-    const range = quill.getSelection();
-    if (!range) return;
-
-    let contents = quill.getContents();
-    let elementOps = macro.ops;
-    const insertDelta = new Delta(elementOps);
-    if (range.index > 0) {
-      elementOps = [{ retain: range.index }].concat(elementOps);
-    }
-    const macroDelta = new Delta(elementOps);
-    contents = contents.compose(macroDelta);
-    quill.setContents(contents);
-    range.length = 0;
-    range.index += insertDelta.length();
-    quill.setSelection(range);
-
-    this.onChangeContent(quill);
-  }
-
-  updateTextTemplates(template) {
-    const { updateTextTemplates } = this.props;
-    updateTextTemplates(template);
-  }
-
-  render() {
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = this.state;
-
-    const { template, analysis, readOnly } = this.props;
-    const value = analysis.extended_metadata.content || {};
-
-    const autoFormatIcon = <span className="fa fa-magic" />;
-    const templateCreatorPopover = (
-      <Popover
-        id="popover-positioned-top"
-        title="Custom toolbar"
-        className="analyses-template-creator"
-      >
-        <ToolbarTemplateCreator
-          template={template}
-          templateOptions={predefinedTemplateNames}
-          updateTextTemplates={this.updateTextTemplates}
-        />
-      </Popover>
-    );
-
-    return (
-      <DynamicToolbarEditor
-        theme="snow"
-        formats={toolbarOptions}
-        style={{ height: '120px' }}
-        ref={this.reactQuillRef}
-        onChange={this.quillOnChange}
-        value={value}
-        readOnly={readOnly}
-      >
-        <BaseToolbar />
-        <ToolbarIcon
-          icon={autoFormatIcon}
-          onClick={this.autoFormatContent}
-        />
-        <TextTemplateToolbar
-          template={template}
-          predefinedTemplates={fetchedPredefinedTemplates}
-          applyTemplate={this.applyTemplate}
-        />
-        <OverlayTrigger
-          trigger="click"
-          placement="top"
-          rootClose
-          overlay={templateCreatorPopover}
-          onHide={this.onCloseTemplateCreator}
-        >
-          <span className="ql-formats">
-            <button>
-              <span className="fa fa-cog" />
-            </button>
-          </span>
-        </OverlayTrigger>
-      </DynamicToolbarEditor>
-    );
-  }
-}
-
-AnalysisEditor.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  template: PropTypes.object,
-  analysis: PropTypes.object,
-  /* eslint-enable react/forbid-prop-types */
-  readOnly: PropTypes.bool,
-  onChangeContent: PropTypes.func,
-  updateTextTemplates: PropTypes.func,
-};
-
-AnalysisEditor.defaultProps = {
-  readOnly: false,
-  template: {},
-  analysis: {},
-  onChangeContent: null,
-  updateTextTemplates: null
-};
diff --git a/app/packs/src/components/AnalysisNMR.js b/app/packs/src/components/AnalysisNMR.js
deleted file mode 100644
index 964d4d629..000000000
--- a/app/packs/src/components/AnalysisNMR.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React from 'react'
-import{
-  Col, Form, FormGroup, ControlLabel, FormControl, ButtonToolbar,
-  Button, Radio, Checkbox, PanelGroup, Panel
-} from 'react-bootstrap'
-import Select from 'react-select'
-import ElementActions from './actions/ElementActions'
-import DetailActions from './actions/DetailActions'
-import {solvents, experiments} from './staticDropdownOptions/device_options'
-
-const AnalysisNMR = ({analysis}) => {
-  const styleByExperimentState = (experiment) => {
-    return experiment.isNew || experiment.isEdited
-      ? "info"
-      : "default"
-  }
-  return (
-    <div
-      style={{marginBottom: 10}}
-    >
-      <Form horizontal>
-        <FormGroup>
-          <Col sm={1}>
-            <ControlLabel>Holder</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Status</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Name</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Solvent</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Experiment</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Priority</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Daytime</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Number of Scans</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Sweep Width</ControlLabel>
-          </Col>
-          <Col sm={1}>
-            <ControlLabel>Time</ControlLabel>
-          </Col>
-          <Col sm={2}>
-          </Col>
-        </FormGroup>
-        {analysis.experiments.length > 0
-          ? analysis.experiments.map((experiment, key) => {
-              return (
-                  <Experiment
-                    key={key}
-                    experiment={experiment}
-                    analysis={analysis}
-                  />
-              )
-            })
-          : (
-            <FormGroup style={{marginLeft: 0}}>
-              This analysis has no experiments yet.
-            </FormGroup>
-          )
-        }
-      </Form>
-      <ButtonToolbar>
-        <Button bsStyle="primary" onClick={() => DetailActions.close(analysis)}>
-          Close
-        </Button>
-        <Button
-          bsStyle="warning"
-          disabled={!analysis.isEdited}
-          onClick={() => {
-            ElementActions.saveDeviceAnalysis(analysis)
-            if (analysis.isNew) {
-              DetailActions.close(analysis, true)
-            }
-          }}
-        >
-          Save
-        </Button>
-      </ButtonToolbar>
-    </div>
-  )
-}
-
-export default AnalysisNMR
-
-const Experiment = ({analysis, experiment}) => {
-  const handlePropChange = (prop, value) => {
-    ElementActions.changeAnalysisExperimentProp(analysis, experiment, prop, value)
-  }
-  const handleSelectChange = (prop, e) => {
-    if(e && e.value) {
-      handlePropChange(prop, e.value)
-    } else {
-      handlePropChange(prop, "")
-    }
-  }
-
-  return (
-    <FormGroup>
-      <Col sm={1}>
-        <FormControl.Static>
-          {experiment.holderId ? experiment.holderId : "-"}
-        </FormControl.Static>
-      </Col>
-      <Col sm={1}>
-        <FormControl.Static>
-          {experiment.status ? experiment.status : "-"}
-        </FormControl.Static>
-      </Col>
-      <Col sm={1}>
-        <FormControl.Static>
-          {experiment.sampleShortLabel}
-        </FormControl.Static>
-      </Col>
-      <Col sm={1}>
-        <Select
-          id="solvent"
-          name='solvent'
-          multi={false}
-          options={solvents}
-          onChange={(e) => handleSelectChange('solvent', e)}
-          value={experiment.solvent}
-        />
-      </Col>
-      <Col sm={1}>
-        <Select
-          id="experiment"
-          name='experiment'
-          multi={false}
-          options={experiments}
-          onChange={(e) => {
-            handlePropChange('time', e.time)
-            handleSelectChange('experiment', e)
-          }}
-          value={experiment.experiment}
-        />
-      </Col>
-      <Col sm={1}>
-        <Checkbox
-          checked={experiment.priority}
-          onChange={(e) => handlePropChange('priority', !experiment.priority)}
-        >
-        </Checkbox>
-      </Col>
-      <Col sm={1}>
-        <Radio
-          checked={experiment.onDay}
-          onChange={(e) => handlePropChange('onDay', true)}
-          style={{minHeight: 20, marginBottom: -3, paddingTop: 0}}
-        >
-          Day
-        </Radio>
-        <Radio
-          checked={!experiment.onDay}
-          onChange={(e) => handlePropChange('onDay', false)}
-          style={{minHeight: 20, marginBottom: -3, paddingTop: 0}}
-        >
-          Night
-        </Radio>
-      </Col>
-      <Col sm={1}>
-        <FormControl
-          value={experiment.numberOfScans}
-          onChange={(e) => handlePropChange('numberOfScans', e.target.value)}
-        />
-      </Col>
-      <Col sm={1}>
-        <FormControl
-          value={experiment.sweepWidth}
-          onChange={(e) => handlePropChange('sweepWidth', e.target.value)}
-        />
-      </Col>
-      <Col sm={1}>
-        <FormControl.Static>
-          {experiment.time && experiment.time !== "" ? experiment.time : "-"}
-        </FormControl.Static>
-      </Col>
-      <Col sm={2}>
-        <ButtonToolbar>
-          <Button
-            bsSize="xsmall"
-            bsStyle="danger"
-            onClick={(e) => ElementActions.deleteAnalysisExperiment(analysis, experiment)}
-          >
-            <i className="fa fa-trash"></i>
-          </Button>
-          <Button
-            bsSize="xsmall"
-            bsStyle="info"
-            onClick={(e) => ElementActions.duplicateAnalysisExperiment(analysis, experiment)}
-          >
-            Add
-          </Button>
-          <Button
-            bsSize="xsmall"
-            bsStyle="success"
-            onClick={(e) => ElementActions.generateExperimentConfig(experiment)}
-          >
-            Submit
-          </Button>
-        </ButtonToolbar>
-      </Col>
-    </FormGroup>
-  )
-}
-
diff --git a/app/packs/src/components/App.js b/app/packs/src/components/App.js
deleted file mode 100644
index e02165aa1..000000000
--- a/app/packs/src/components/App.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Col, Grid, Row } from 'react-bootstrap';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import Aviator from 'aviator';
-import { RepoReviewModal } from 'repo-review-ui';
-import alt from './alt';
-import Navigation from './Navigation';
-import CollectionTree from './CollectionTree';
-import CollectionManagement from './CollectionManagement';
-import Elements from './Elements';
-import initRoutes from './routes';
-import Notifications from './Notifications';
-import LoadingModal from './common/LoadingModal';
-import UIActions from './actions/UIActions';
-import UserActions from './actions/UserActions';
-import ReviewActions from './actions/ReviewActions';
-import KeyboardActions from './actions/KeyboardActions';
-import UIStore from './stores/UIStore';
-import ReviewStore from './stores/ReviewStore';
-import InboxModal from './inbox/InboxModal';
-import ProgressModal from './common/ProgressModal';
-
-class App extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      showCollectionManagement: false,
-      indicatorClassName: 'fa fa-chevron-circle-left',
-      showCollectionTree: true,
-      mainContentClassName: 'small-col main-content',
-    };
-    this.handleUiStoreChange = this.handleUiStoreChange.bind(this);
-    this.documentKeyDown = this.documentKeyDown.bind(this);
-    this.toggleCollectionTree = this.toggleCollectionTree.bind(this);
-    this.handleReviewStoreChange = this.handleReviewStoreChange.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
-
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.handleReviewStoreChange);
-    ReviewStore.listen(this.handleReviewStoreChange);
-    UserActions.fetchOlsRxno();
-    UserActions.fetchOlsChmo();
-    UserActions.fetchProfile();
-    UserActions.fetchUserLabels();
-    UserActions.fetchGenericEls();
-    UserActions.fetchSegmentKlasses();
-    UserActions.fetchDatasetKlasses();
-    UserActions.fetchUnitsSystem();
-    UserActions.fetchEditors();
-    UIActions.initialize.defer();
-    document.addEventListener('keydown', this.documentKeyDown);
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.handleUiStoreChange);
-    document.removeEventListener('keydown', this.documentKeyDown);
-  }
-  handleUiStoreChange(state) {
-    if (this.state.showCollectionManagement !== state.showCollectionManagement) {
-      this.setState({ showCollectionManagement: state.showCollectionManagement });
-    }
-
-    if (this.state.klasses !== state.klasses) {
-      this.setState({ klasses: state.klasses });
-    }
-  }
-  handleReviewStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
-    // LoadingActions.start();
-    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
-    this.setState({ showReviewModal: false });
-  }
-
-  handleReviewUpdate(e, col, rr) {
-    const { review } = this.state;
-    const checklist = rr.checklist || {};
-    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
-    checklist[col].status = e.target.checked;
-    review.checklist = checklist;
-    ReviewActions.updateReview(review);
-  }
-
-  documentKeyDown(event) {
-    // Only trigger arrow and Enter keys ON BODY
-    // Ignore on other element
-    if (event.target.tagName.toUpperCase() === 'BODY' && [13, 38, 39, 40].includes(event.keyCode)) {
-      KeyboardActions.documentKeyDown(event.keyCode);
-    }
-  }
-
-  toggleCollectionTree() {
-    const { showCollectionTree } = this.state;
-    this.setState({
-      showCollectionTree: !showCollectionTree,
-      indicatorClassName: showCollectionTree ? 'fa fa-chevron-circle-right' : 'fa fa-chevron-circle-left',
-      mainContentClassName: showCollectionTree ? 'small-col full-main' : 'small-col main-content'
-    });
-  }
-
-  collectionTree() {
-    const { showCollectionTree } = this.state;
-    if (!showCollectionTree) {
-      return <div />;
-    }
-
-    return (
-      <Col className="small-col collec-tree">
-        <CollectionTree />
-      </Col>
-    );
-  }
-
-  mainContent() {
-    const { showCollectionManagement, mainContentClassName } = this.state;
-    return (
-      <Col className={mainContentClassName} >
-        {showCollectionManagement ? <CollectionManagement /> : <Elements />}
-      </Col>
-    );
-  }
-
-  renderReviewModal() {
-    const { showReviewModal, review_info, review, currentElement, elementType, btnAction } = this.state;
-    const rrr = {};
-    rrr.review_info = review_info;
-    rrr.review = review;
-    rrr.btnAction = btnAction;
-    rrr.elementType = elementType;
-    rrr.elementId = elementType === 'sample' ? currentElement?.sample?.id : currentElement?.reaction?.id;
-    return (
-      <RepoReviewModal
-        show={showReviewModal}
-        data={rrr}
-        onSubmit={this.handleSubmitReview}
-        onUpdate={this.handleReviewUpdate}
-        onHide={() => this.setState({ showReviewModal: false })}
-      />
-    );
-  }
-  render() {
-    const { showCollectionTree } = this.state;
-    return (
-      <Grid fluid>
-        <Row className="card-navigation">
-          <Navigation toggleCollectionTree={this.toggleCollectionTree} />
-        </Row>
-        <Row className="card-content container-fluid">
-          {this.collectionTree()}
-          {this.mainContent()}
-        </Row>
-        <Row>
-          <Notifications />
-          <LoadingModal />
-          <ProgressModal />
-        </Row>
-        <InboxModal showCollectionTree={showCollectionTree} />
-        {this.renderReviewModal()}
-      </Grid>
-    );
-  }
-}
-
-const AppWithDnD = DragDropContext(HTML5Backend)(App);
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('app');
-  if (domElement) {
-    ReactDOM.render(<AppWithDnD />, domElement);
-    initRoutes();
-    Aviator.dispatch();
-  }
-});
diff --git a/app/packs/src/components/AttachmentDropzone.js b/app/packs/src/components/AttachmentDropzone.js
deleted file mode 100644
index d0a5eb523..000000000
--- a/app/packs/src/components/AttachmentDropzone.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from './DragDropItemTypes';
-import InboxActions from './actions/InboxActions';
-
-const dataTarget = {
-  canDrop(props, monitor) {
-    const itemType = monitor.getItemType();
-    if(itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET){
-      return true;
-    }
-  },
-
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    const {dataset_container, handleAddWithAttachments} = props;
-
-    switch (itemType) {
-      case DragDropItemTypes.DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeAttachmentFromList(item.attachment)
-        break;
-      case DragDropItemTypes.UNLINKED_DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
-        break;
-      case DragDropItemTypes.DATASET:
-        handleAddWithAttachments(item.dataset.attachments)
-        InboxActions.removeDatasetFromList(item.dataset)
-        break;
-    }
-  }
-};
-
-const collectTarget = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class AttachmentDropzone extends Component{
-  constructor(props) {
-    super(props);
-  }
-
-  renderOverlay(color) {
-      return (
-        <div style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          height: '100%',
-          width: '100%',
-          zIndex: 1,
-          opacity: 0.5,
-          backgroundColor: color,
-        }} />
-      );
-    }
-
-  render(){
-    const {connectDropTarget, isOver, canDrop} = this.props;
-
-    return connectDropTarget(
-      <div>
-      <i style={{color: 'gray', padding: 2, textAlign: 'center'}}>
-      Drop File(s) from the inbox
-      {isOver && canDrop && this.renderOverlay('green')}
-      </i>
-      </div>
-    );
-  }
-}
-
-
-export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(AttachmentDropzone);
-
-AttachmentDropzone.propTypes = {
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/components/ChemrepoLabels.js b/app/packs/src/components/ChemrepoLabels.js
deleted file mode 100644
index 955902c37..000000000
--- a/app/packs/src/components/ChemrepoLabels.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ChemrepoLabels = ({ chemrepoId }) => {
-  const id = chemrepoId;
-  const handleOnClick = (e) => {
-    e.stopPropagation();
-  };
-  return (
-    id == null ? <div /> :
-      (
-        <a href={`https://www.chemotion-repository.net/home/publications/molecules/${id}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
-          <img src="/favicon.ico" className="pubchem-logo" alt="Chemotion Repository" title="Chemotion Repository" />
-        </a>
-      )
-  );
-};
-
-ChemrepoLabels.propTypes = {
-  chemrepoId: PropTypes.number
-};
-
-ChemrepoLabels.defaultProps = {
-  chemrepoId: null
-};
-
-export default ChemrepoLabels;
diff --git a/app/packs/src/components/CitationTable.js b/app/packs/src/components/CitationTable.js
deleted file mode 100644
index 2d6e8b638..000000000
--- a/app/packs/src/components/CitationTable.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Glyphicon, PanelGroup, Panel, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { uniq } from 'lodash';
-import Immutable from 'immutable';
-import { stopEvent } from './utils/DomHelper';
-import { Citation, CitationUserRow, literatureContent } from './LiteratureCommon';
-
-const citePan = (props) => {
-  const {
-    citation, content, userId, removeCitation
-  } = props;
-  return (
-    <Panel key={`k_citation_${citation.id}`} eventKey={`citation_${citation.id}`} style={{ borderColor: 'white' }}>
-      <Panel.Heading style={{ backgroundColor: 'unset' }}>
-        <Panel.Title toggle style={{ fontSize: '14px' }}>
-          <div className="padding-right" style={{ display: 'inline-block', width: '90%' }}>
-            <Citation literature={citation} />
-          </div>
-          <div style={{ float: 'right' }}>
-            <Button data-toggle="collapse" data-target={`#literature_id_${citation.id}`} aria-expanded="false" aria-controls={`literature_id_${citation.id}`} bsSize="xs">
-              <Glyphicon glyph="chevron-right" title="Collapse/Uncollapse" style={{ cursor: 'pointer', color: '#337ab7', top: 0 }} />
-            </Button>
-            <OverlayTrigger placement="bottom" overlay={<Tooltip id="assign_button">copy to clipboard</Tooltip>}>
-              <Button bsSize="xs" active className="clipboardBtn" data-clipboard-text={content} onClick={stopEvent}>
-                <i className="fa fa-clipboard" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Body collapsible>
-        <div className="padding-right" style={{ display: 'inline-block' }}><CitationUserRow literature={citation} userId={userId} /></div>
-        <div style={{ float: 'right' }}>
-          <Button bsSize="xs" bsStyle="danger" onClick={e => removeCitation(e, citation)}>
-            <i className="fa fa-trash-o" aria-hidden="true" />
-          </Button>
-        </div>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-export default class CitationTable extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { activeKey: '1' };
-    this.handleSelect = this.handleSelect.bind(this);
-    this.removeCitation = this.removeCitation.bind(this);
-  }
-
-  handleSelect(activeKey) {
-    this.setState({ activeKey });
-  }
-
-  removeCitation(e, citation) {
-    stopEvent(e);
-    this.props.removeCitation(citation);
-  }
-
-  render() {
-    const { rows, sortedIds, userId } = this.props;
-    const pans = uniq(sortedIds).map((id) => {
-      const citation = rows.get(id);
-      const content = literatureContent(citation, true);
-      return citePan({
-        citation, content, userId, removeCitation: this.removeCitation
-      });
-    });
-    return (
-      <PanelGroup accordion id="citation-list-controlled" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
-        {pans}
-      </PanelGroup>
-    );
-  }
-}
-
-CitationTable.propTypes = {
-  rows: PropTypes.instanceOf(Immutable.Map),
-  sortedIds: PropTypes.array,
-  userId: PropTypes.number,
-  removeCitation: PropTypes.func.isRequired
-};
-
-CitationTable.defaultProps = { rows: new Immutable.Map(), sortedIds: [], userId: 0 };
diff --git a/app/packs/src/components/CollectionManagement.js b/app/packs/src/components/CollectionManagement.js
deleted file mode 100644
index 121774b0c..000000000
--- a/app/packs/src/components/CollectionManagement.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { Tabs, Tab } from 'react-bootstrap';
-
-import MyCollections from 'src/apps/mydb/collections/MyCollections';
-import MySharedCollections from 'src/apps/mydb/collections/MySharedCollections';
-import SharedWithMeCollections from 'src/apps/mydb/collections/SharedWithMeCollections';
-import SyncWithMeCollections from 'src/apps/mydb/collections/SyncWithMeCollections';
-import CollectionTabs from 'src/apps/mydb/collections/CollectionTabs';
-
-const CollectionManagement = () => {
-  const tabContents = [
-    <Tab eventKey={0} key={0} title="My Collections"><MyCollections /></Tab>,
-    <Tab eventKey={1} key={1} title="My Shared Collections"><MySharedCollections /></Tab>,
-    <Tab eventKey={2} key={2} title="Collections shared with me "><SharedWithMeCollections /></Tab>,
-    <Tab eventKey={3} key={3} title="Collections synchronized with me "><SyncWithMeCollections /></Tab>,
-    <Tab eventKey={4} key={4} title="Collection Tabs"><CollectionTabs /></Tab>
-  ];
-
-  return (
-    <div id="collection-management">
-      <Tabs defaultActiveKey={0} id="collection-management-tab">
-        {tabContents.map(e => e)}
-      </Tabs>
-    </div>
-  );
-};
-
-export default CollectionManagement;
diff --git a/app/packs/src/components/CollectionSubtree.js b/app/packs/src/components/CollectionSubtree.js
deleted file mode 100644
index 9ce287b1d..000000000
--- a/app/packs/src/components/CollectionSubtree.js
+++ /dev/null
@@ -1,303 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Aviator from 'aviator';
-import { Glyphicon, OverlayTrigger } from 'react-bootstrap';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import UserInfos from 'src/apps/mydb/collections/UserInfos';
-import GatePushBtn from 'src/components/common/GatePushBtn';
-import { collectionShow, scollectionShow } from 'src/utilities/routesUtils';
-import { CollectionDesc } from 'src/repoHome/RepoCommon';
-
-const labeling = (label) => {
-  if (typeof (label) === 'string' && (label.startsWith('Reviewing') || label.startsWith('Element To Review') || label.startsWith('Reviewed'))) {
-    const ls = label.split(',');
-    if (ls.length >= 3) {
-      const sicon = ls[1].substr(1) === '0' ? '' : <i className="icon-sample"> {ls[1].substr(1)} &nbsp; </i>;
-      const ricon = ls[2].substr(1) === '0' ? '' : <i className="icon-reaction"> {ls[2].substr(1)} &nbsp;  </i>;
-      return label.startsWith('Reviewing') ?
-        (
-          <div style={{ display: 'inline', color: 'red' }}>
-            {ls[0]} &nbsp; {sicon} {ricon}
-          </div>
-        ) :
-        (
-          <div style={{ display: 'inline' }}>
-            {ls[0]} &nbsp; {sicon} {ricon}
-          </div>
-        );
-    }
-  }
-  return label;
-}
-
-const labeling = (label) => {
-  if (typeof (label) === 'string' && (label.startsWith('Reviewing') || label.startsWith('Element To Review') || label.startsWith('Reviewed'))) {
-    const ls = label.split(',');
-    if (ls.length >= 3) {
-      const sicon = ls[1].substr(1) === '0' ? '' : <i className="icon-sample"> {ls[1].substr(1)} &nbsp; </i>;
-      const ricon = ls[2].substr(1) === '0' ? '' : <i className="icon-reaction"> {ls[2].substr(1)} &nbsp;  </i>;
-      return label.startsWith('Reviewing') ?
-        (
-          <div style={{ display: 'inline', color: 'red' }}>
-            {ls[0]} &nbsp; {sicon} {ricon}
-          </div>
-        ) :
-        (
-          <div style={{ display: 'inline' }}>
-            {ls[0]} &nbsp; {sicon} {ricon}
-          </div>
-        );
-    }
-  }
-  return label;
-}
-
-export default class CollectionSubtree extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isRemote: props.isRemote,
-      currentCollection: props.currentCollection,
-      label: props.root.label,
-      selected: false,
-      root: props.root,
-      visible: false
-    }
-
-    this.onChange = this.onChange.bind(this)
-    this.toggleExpansion = this.toggleExpansion.bind(this)
-    this.handleClick = this.handleClick.bind(this)
-  }
-
-
-  componentDidMount() {
-    UIStore.listen(this.onChange);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      root: nextProps.root,
-      label: nextProps.root.label
-    });
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.currentCollection) {
-      const visible = this.isVisible(this.state.root, state)
-      const { root } = this.state;
-
-      const selectedCol = (
-        state.currentCollection.id == root.id &&
-        state.currentCollection.is_synchronized == root.is_synchronized
-      ) || (
-          state.currentCollection.id == root.id &&
-          state.currentCollection.isRemote == root.isRemote
-        )
-
-      if (selectedCol) {
-        this.setState({
-          selected: true,
-          currentCollection: state.currentCollection,
-          visible
-        });
-      } else {
-        this.setState({
-          selected: false,
-          currentCollection: state.currentCollection,
-          visible
-        });
-      }
-    }
-  }
-
-  isVisible(node, uiState) {
-    if (node.descendant_ids) {
-      let currentCollectionId = parseInt(uiState.currentCollection.id)
-      if (node.descendant_ids.indexOf(currentCollectionId) > -1) return true
-    }
-
-    let { visibleRootsIds } = CollectionStore.getState();
-    return (visibleRootsIds.indexOf(node.id) > -1)
-  }
-
-  selectedCssClass(currentCollection) {
-    const { root } = this.state;
-    if (this.state.selected || (currentCollection && currentCollection.id == root.id && currentCollection.is_synchronized == root.is_synchronized)) {
-      return 'selected';
-    }
-    return '';
-  }
-
-  children() {
-    return this.state.root.children || [];
-  }
-
-  hasChildren() {
-    return this.children().length > 0;
-  }
-
-  subtrees() {
-    const children = this.children();
-
-    if (this.hasChildren()) {
-      return children.map((child, index) => {
-        return (
-          <li key={index}>
-            <CollectionSubtree root={child} isRemote={this.state.isRemote} />
-          </li>
-        );
-      });
-    }
-    return null;
-  }
-
-  expandButton() {
-    let icon = this.state.visible ? 'minus' : 'plus';
-
-    if (this.hasChildren()) {
-      return (
-        <Glyphicon
-          glyph={icon}
-          style={{ float: 'right', marginLeft: '5px' }}
-          onClick={this.toggleExpansion}
-        />
-      );
-    }
-    return (<div />);
-  }
-
-  takeOwnershipButton() {
-    const { root } = this.state;
-    const { isRemote } = this.state;
-    const isTakeOwnershipAllowed = this.state.root.permission_level === 5;
-    const isSync = !!((root.sharer && root.user && root.user.type !== 'Group'));
-    if ((isRemote || isSync) && isTakeOwnershipAllowed) {
-      return (
-        <div className="take-ownership-btn">
-          <i className="fa fa-exchange" onClick={e => this.handleTakeOwnership(e)} />
-        </div>
-      )
-    }
-    return (<div />);
-  }
-
-  handleTakeOwnership() {
-    const isSync = !!this.state.root.sharer;
-    CollectionActions.takeOwnership({ id: this.state.root.id, isSync });
-  }
-
-  handleClick(e) {
-    const { root } = this.state
-    let {visible} = this.state
-    const uiState = UIStore.getState()
-
-    visible = visible || this.isVisible(root, uiState);
-    this.setState({ visible });
-    let collectionID = 'all';
-    if (root.label === 'All' && root.is_locked) {
-      Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`, { silent: true });
-      collectionShow({ params: { collectionID } });
-      return;
-    }
-    const url = (this.props.root.sharer)
-      ? `/scollection/${root.id}/${this.urlForCurrentElement()}`
-      : `/collection/${root.id}/${this.urlForCurrentElement()}`;
-    Aviator.navigate(url, { silent: true });
-    collectionID = this.state.root.id;
-    const collShow = this.props.root.sharer ? scollectionShow : collectionShow;
-    collShow({ params: { collectionID } });
-  }
-
-  urlForCurrentElement() {
-    const { currentElement } = ElementStore.getState();
-    if (currentElement) {
-      if (currentElement.isNew) {
-        return `${currentElement.type}/new`;
-      }
-      return `${currentElement.type}/${currentElement.id}`;
-    }
-    return '';
-  }
-
-  toggleExpansion(e) {
-    e.stopPropagation()
-    let { visible, root } = this.state
-    visible = !visible
-    this.setState({ visible: visible })
-
-    let { visibleRootsIds } = CollectionStore.getState()
-    if (visible) {
-      visibleRootsIds.push(root.id)
-    } else {
-      let descendantIds = root.descendant_ids
-        ? root.descendant_ids
-        : root.children.map(function (s) { return s.id })
-      descendantIds.push(root.id)
-      visibleRootsIds = visibleRootsIds.filter(x => descendantIds.indexOf(x) == -1)
-    }
-
-    // Remove duplicate
-    let newIds = Array.from(new Set(visibleRootsIds))
-    CollectionActions.updateCollectrionTree(newIds)
-  }
-
-  synchronizedIcon() {
-    let sharedUsers = this.state.root.sync_collections_users
-    return (
-      sharedUsers && sharedUsers.length > 0
-        ? <OverlayTrigger placement="bottom" overlay={UserInfos({ users: sharedUsers })}>
-          <i className="fa fa-share-alt" style={{ float: "right" }}></i>
-        </OverlayTrigger>
-        : null
-    )
-  }
-
-
-  render() {
-    const { root, visible, currentCollection } = this.state
-    let { label } = this.state
-
-    label = labeling(label);
-
-    let style;
-    if (!visible) {
-      style = {
-        display: 'none',
-        marginBottom: 0
-      };
-    }
-    const gated = root && root.is_locked && label == 'chemotion-repository.net' ?
-      <GatePushBtn collection_id={root.id} /> : null;
-    return (
-      <div className="tree-view" key={root.id}>
-        {this.takeOwnershipButton()}
-
-        <div id={`tree-id-${root.label}`} className={"title " + this.selectedCssClass(currentCollection)}
-          onClick={this.handleClick}>
-          {this.expandButton()}
-          {this.synchronizedIcon()}
-          {gated}
-          {label}
-          <CollectionDesc label={root.label} />
-        </div>
-        <ul style={style}>
-          {this.subtrees()}
-        </ul>
-      </div>
-    )
-  }
-}
-
-CollectionSubtree.propTypes = {
-  isRemote: PropTypes.bool,
-  root: PropTypes.object
-};
diff --git a/app/packs/src/components/CollectionTree.js b/app/packs/src/components/CollectionTree.js
deleted file mode 100644
index ca89bddb1..000000000
--- a/app/packs/src/components/CollectionTree.js
+++ /dev/null
@@ -1,414 +0,0 @@
-import React from 'react';
-import { Button, OverlayTrigger, Badge, Glyphicon, Tooltip } from 'react-bootstrap';
-import update from 'immutability-helper';
-import Aviator from 'aviator';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import CollectionSubtree from 'src/apps/mydb/collections/CollectionSubtree';
-import UIActions from 'src/stores/alt/actions/UIActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import UserInfos from 'src/apps/mydb/collections/UserInfos';
-
-const colVisibleTooltip = <Tooltip id="col_visible_tooltip">Toggle My Collections</Tooltip>;
-
-export default class CollectionTree extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const collecState = CollectionStore.getState();
-
-    this.state = {
-      unsharedRoots: collecState.unsharedRoots,
-      sharedRoots: collecState.sharedRoots,
-      remoteRoots: collecState.remoteRoots,
-      lockedRoots: collecState.lockedRoots,
-      syncInRoots: collecState.syncInRoots,
-      ownCollectionVisible: true,
-      sharedWithCollectionVisible: false,
-      sharedToCollectionVisible: false,
-      syncCollectionVisible: false,
-      visible: false,
-      root: {},
-      selected: false,
-    };
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onChange);
-    CollectionActions.fetchLockedCollectionRoots();
-    // CollectionActions.fetchUnsharedCollectionRoots();
-    CollectionActions.fetchSharedCollectionRoots();
-    CollectionActions.fetchRemoteCollectionRoots();
-    CollectionActions.fetchSyncInCollectionRoots();
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onChange);
-  }
-
-  handleSectionToggle = (visible) => {
-    this.setState((prevState) => ({
-      [visible]: !prevState[visible],
-    }));
-  };
-
-  onChange(state) {
-    this.setState(state);
-  }
-
-  lockedSubtrees() {
-    const roots = this.state.lockedRoots;
-
-    return this.subtrees(roots, null, false);
-  }
-
-  removeOrphanRoots(roots) {
-    let newRoots = []
-    roots.forEach((root) => {
-      if (root.children.length > 0) newRoots.push(root)
-    })
-
-    return newRoots;
-  }
-
-  publicRoots(roots, preservePublic) {
-    let newRoots =[]
-    roots.forEach((root) => {
-      if(preservePublic) {
-        if (root.is_public) newRoots.push(root)
-      } else {
-        if (!root.is_public) newRoots.push(root)
-      }
-    })
-
-    return newRoots
-  }
-
-  unsharedSubtrees() {
-    let roots = this.state.unsharedRoots;
-    roots = roots.filter(function (item) { return !item.isNew })
-
-    // return this.subtrees(roots, null, false);
-    return null
-  }
-
-  sharedSubtrees() {
-    let { sharedRoots, sharedToCollectionVisible } = this.state
-    sharedRoots = this.removeOrphanRoots(sharedRoots)
-
-    let labelledRoots = sharedRoots.map(e => {
-      return update(e, {
-        label: {
-          $set:
-            <span>{this.labelRoot('shared_to', e)}</span>
-        }
-      })
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div
-          className="title"
-          style={{ backgroundColor: 'white' }}
-          onClick={() => this.handleSectionToggle('sharedToCollectionVisible')}
-        >
-          <i className="fa fa-share-alt share-icon" />&nbsp;&nbsp;
-          My shared collections
-        </div>
-      </div>
-    )
-    return this.subtrees(labelledRoots, subTreeLabels,
-      false, sharedToCollectionVisible)
-  }
-
-  remoteSubtrees() {
-    let { remoteRoots, sharedWithCollectionVisible } = this.state
-    remoteRoots = this.removeOrphanRoots(remoteRoots)
-
-    let labelledRoots = remoteRoots.map(e => {
-      return update(e, {
-        label: {
-          $set:
-            <span>
-              {this.labelRoot('shared_by', e)}
-              {' '}
-              {this.labelRoot('shared_to', e)}
-            </span>
-        }
-      })
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div
-          id="shared-home-link"
-          className="title"
-          style={{ backgroundColor: 'white' }}
-          onClick={() => this.handleSectionToggle('sharedWithCollectionVisible')}
-        >
-          <i className="fa fa-share-alt share-icon" />
-          &nbsp;&nbsp;
-          Shared with me &nbsp;
-        </div>
-      </div>
-    )
-
-    return this.subtrees(labelledRoots, subTreeLabels,
-      false, sharedWithCollectionVisible)
-  }
-
-  remoteSyncInSubtrees() {
-    let { syncInRoots, syncCollectionVisible } = this.state
-    syncInRoots = this.removeOrphanRoots(syncInRoots)
-    syncInRoots = this.publicRoots(syncInRoots, false)
-
-    let labelledRoots = syncInRoots.map(e => {
-      return update(e, {
-        label: {
-          $set:
-            <span>
-              {this.labelRoot('shared_by', e)}
-              {' '}
-              {this.labelRoot('shared_to', e)}
-            </span>
-        }
-      })
-    })
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div
-          id="synchron-home-link"
-          className="title"
-          style={{ backgroundColor: 'white' }}
-          onClick={() => this.handleSectionToggle('syncCollectionVisible')}
-        >
-          <i className="fa fa-share-alt" />&nbsp;&nbsp;
-          Synchronized with me &nbsp;
-        </div>
-      </div>
-    )
-
-    return this.subtrees(labelledRoots, subTreeLabels,
-      false, syncCollectionVisible)
-  }
-
-  publicSubtrees() {
-    let {syncInRoots, syncChemotionVisible} = this.state
-    syncInRoots = this.removeOrphanRoots(syncInRoots)
-    syncInRoots = this.publicRoots(syncInRoots, true)
-
-    let orderedRoots = []
-    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
-      syncInRoots[0].children.map((e,idx) => {
-        if (e.label.match(/hemotion/) ) {
-          orderedRoots[0] = e;
-          orderedRoots[0].label = 'Chemotion';
-        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
-          orderedRoots[1] = e;
-        } else if (e.label.match(/Published Elements/)) {
-          orderedRoots[2] = e
-          orderedRoots[2].label = 'My Published Elements'
-        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
-        else if (e.label === 'Embargoed Publications') {orderedRoots[7] = e  }
-        else {orderedRoots[idx+10] = e  }
-      })
-    }
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div className={"title title-public " } style={{backgroundColor:'white'}}
-              // onClick={() => this.setState({syncChemotionVisible: !syncChemotionVisible})}
-        >
-        </div>
-      </div>
-    )
-
-    return this.subtrees(orderedRoots, subTreeLabels,
-                         true, syncChemotionVisible)
-  }
-
-  labelRoot(sharedToOrBy, rootCollection) {
-    let shared = rootCollection[sharedToOrBy]
-    if (!shared) return <span />
-
-    return (
-      <OverlayTrigger placement="bottom" overlay={UserInfos({ users: [shared] })}>
-        <span>
-          &nbsp; {sharedToOrBy == 'shared_to' ? 'with' : 'by'}
-          &nbsp; {shared.initials}
-        </span>
-      </OverlayTrigger>
-    )
-  }
-
-  convertToSlug(name) {
-    return name.toLowerCase()
-  }
-
-  subtrees(roots, label, isRemote, visible = true) {
-    const { currentCollection } = UIStore.getState();
-    const subtrees = roots && roots.map((root, index) => {
-      return <CollectionSubtree root={root} key={index} isRemote={isRemote} currentCollection={currentCollection} />
-    });
-
-    let subtreesVisible = visible ? "" : "none"
-    return (
-      <div>
-        {label}
-        <div style={{ display: subtreesVisible }}>
-          {subtrees}
-        </div>
-      </div>
-    )
-  }
-
-  collectionManagementButton() {
-    return (
-      <div className="take-ownership-btn">
-        <Button id="collection-management-button" bsSize="xsmall" bsStyle="danger"
-          title="Manage & organize collections: create or delete collections, adjust sharing options, adjust the visibility of tabs based on the collection level"
-          onClick={() => this.handleCollectionManagementToggle()}>
-          <i className="fa fa-cog"></i>
-        </Button>
-      </div>
-    )
-  }
-
-  handleCollectionManagementToggle() {
-    UIActions.toggleCollectionManagement();
-    const { showCollectionManagement, currentCollection, isSync } = UIStore.getState();
-    if (showCollectionManagement) {
-      Aviator.navigate('/collection/management');
-    } else {
-      if (currentCollection == null || currentCollection.label == 'All') {
-        Aviator.navigate(`/collection/all/${this.urlForCurrentElement()}`);
-      } else {
-        Aviator.navigate(isSync
-          ? `/scollection/${currentCollection.id}/${this.urlForCurrentElement()}`
-          : `/collection/${currentCollection.id}/${this.urlForCurrentElement()}`);
-      }
-    }
-  }
-
-  urlForCurrentElement() {
-    const { currentElement } = ElementStore.getState();
-    if (currentElement) {
-      if (currentElement.isNew) {
-        return `${currentElement.type}/new`;
-      }
-      else {
-        return `${currentElement.type}/${currentElement.id}`;
-      }
-    }
-    else {
-      return '';
-    }
-  }
-
-  // For Repository
-  publicRoots(roots, preservePublic) {
-    let newRoots =[]
-    roots.forEach((root) => {
-      if(preservePublic) {
-        if (root.is_public) newRoots.push(root)
-      } else {
-        if (!root.is_public) newRoots.push(root)
-      }
-    })
-
-    return newRoots
-  }
-
-
-  // For Repository
-  publicSubtrees() {
-    let {syncInRoots, syncChemotionVisible} = this.state
-    syncInRoots = this.removeOrphanRoots(syncInRoots)
-    syncInRoots = this.publicRoots(syncInRoots, true)
-
-    let orderedRoots = []
-    if (syncInRoots && syncInRoots[0] && syncInRoots[0].children) {
-      syncInRoots[0].children.map((e,idx) => {
-        if (e.label.match(/hemotion/) ) {
-          orderedRoots[0] = e;
-          orderedRoots[0].label = 'Chemotion';
-        } else if (typeof e.label === 'string' && e.label === 'Scheme-only reactions') {
-          orderedRoots[1] = e;
-        } else if (e.label.match(/Published Elements/)) {
-          orderedRoots[2] = e
-          orderedRoots[2].label = 'My Published Elements'
-        } else if (e.label === 'Pending Publications') {orderedRoots[3] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewing')) {orderedRoots[4] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Element To Review')) {orderedRoots[5] = e  }
-        else if (typeof e.label === 'string' && e.label.startsWith('Reviewed')) { orderedRoots[6] = e }
-        else if (typeof e.label === 'string' && e.label === 'Embargo Accepted') { orderedRoots[7] = e }
-        else if (e.label === 'Embargoed Publications') {orderedRoots[8] = e  }
-        else {orderedRoots[idx+10] = e  }
-      })
-    }
-
-    let subTreeLabels = (
-      <div className="tree-view">
-        <div className={"title title-public " } style={{backgroundColor:'white'}}
-        >
-        </div>
-      </div>
-    )
-
-    return this.subtrees(orderedRoots, subTreeLabels,
-                         true, syncChemotionVisible)
-  }
-
-  render() {
-    const { ownCollectionVisible } = this.state;
-
-    const ownCollectionDisplay = ownCollectionVisible ? '' : 'none';
-
-    const myCollections = this.state.lockedRoots && this.state.lockedRoots.length > 0 ? (
-        <div className="tree-view">
-        <div className="tree-wrapper">
-            {this.publicSubtrees()}
-          </div>
-
-          <OverlayTrigger placement="top" delayShow={1000} overlay={colVisibleTooltip}>
-            <div
-              className="title"
-              style={{ backgroundColor: 'white' }}
-              onClick={() => this.handleSectionToggle('ownCollectionVisible')}
-            >
-              <i className="fa fa-list" /> &nbsp;&nbsp; My Collections
-            </div>
-          </OverlayTrigger>
-        </div>
-    ) : <div />
-
-    return (
-      <div>
-        <div className="tree-wrapper">
-          {this.publicSubtrees()}
-        </div>
-        {myCollections}
-        <div className="tree-wrapper" style={{display: ownCollectionDisplay}}>
-          {this.lockedSubtrees()}
-          {/* {this.unsharedSubtrees()} */}
-        </div>
-        {/* <div className="tree-wrapper">
-          {this.sharedSubtrees()}
-        </div>
-        <div className="tree-wrapper" style={{ display: 'none' }} >
-          {this.remoteSubtrees()}
-        </div>
-        <div className="tree-wrapper" style={{ display: 'none' }} >
-          {this.remoteSyncInSubtrees()}
-        </div> */}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/ComputeTask.js b/app/packs/src/components/ComputeTask.js
deleted file mode 100644
index 9bb8f7a33..000000000
--- a/app/packs/src/components/ComputeTask.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Label } from 'react-bootstrap';
-
-import Aviator from 'aviator';
-
-const statusMap = {
-  not_computed: 'pending'
-};
-
-export default class ComputeTask extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.navigateSample = this.navigateSample.bind(this);
-    this.checkState = this.checkState.bind(this);
-    this.revokeTask = this.revokeTask.bind(this);
-    this.deleteTask = this.deleteTask.bind(this);
-  }
-
-  navigateSample() {
-    const { task } = this.props;
-    const currentURI = Aviator.getCurrentURI();
-
-    const collectionMatch = currentURI.match(/\/collection\/(\d+)\//);
-    if (collectionMatch) {
-      const collectionId = collectionMatch[1];
-      const url = `/collection/${collectionId}/sample/${task.sampleId}`;
-      Aviator.navigate(url);
-    }
-  }
-
-  checkState() {
-    const { task } = this.props;
-    this.props.checkState(task.id);
-  }
-
-  revokeTask() {
-    const { task } = this.props;
-    this.props.revokeTask(task.id);
-  }
-
-  deleteTask() {
-    const { task } = this.props;
-    this.props.deleteTask(task.id);
-  }
-
-  render() {
-    const { task } = this.props;
-    const { status } = task;
-    const displayStatus = (status in statusMap) ? statusMap[status] : status;
-
-    return (
-      <tr>
-        <td style={{ textAlign: 'center' }}>
-          <Button bsStyle="link" onClick={this.navigateSample}>
-            Sample
-          </Button>
-        </td>
-        <td style={{ textAlign: 'center' }}>
-          <Label bsStyle="primary">{displayStatus}</Label>
-        </td>
-        <td style={{ textAlign: 'center' }}>{task.updatedAt}</td>
-        <td style={{ textAlign: 'center' }}>
-          <Button bsStyle="info" onClick={this.checkState} bsSize="xs" style={{ width: '22px' }}>
-            <i className="fa fa-long-arrow-up" />
-            <i className="fa fa-long-arrow-down" />
-          </Button>
-          &nbsp;&nbsp;
-          <Button bsStyle="warning" onClick={this.revokeTask} bsSize="xs">
-            <i className="fa fa-stop" />
-          </Button>
-          &nbsp;&nbsp;
-          <Button bsStyle="danger" onClick={this.deleteTask} bsSize="xs">
-            <i className="fa fa-trash" />
-          </Button>
-        </td>
-      </tr>
-    );
-  }
-}
-
-ComputeTask.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  task: PropTypes.object.isRequired,
-  checkState: PropTypes.func.isRequired,
-  revokeTask: PropTypes.func.isRequired,
-  deleteTask: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/ComputeTaskContainer.js b/app/packs/src/components/ComputeTaskContainer.js
deleted file mode 100644
index f4701168a..000000000
--- a/app/packs/src/components/ComputeTaskContainer.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Button, Table } from 'react-bootstrap';
-
-import ComputeTaskActions from './actions/ComputeTaskActions';
-import DetailActions from './actions/DetailActions';
-import LoadingActions from './actions/LoadingActions';
-
-import ComputeTaskStore from './stores/ComputeTaskStore';
-import ComputeTask from './ComputeTask';
-
-export default class ComputeTaskContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      tasks: []
-    };
-
-    this.onChangeComputeTask = this.onChangeComputeTask.bind(this);
-    this.onClose = this.onClose.bind(this);
-
-    this.checkState = this.checkState.bind(this);
-    this.revokeTask = this.revokeTask.bind(this);
-    this.deleteTask = this.deleteTask.bind(this);
-  }
-
-  componentDidMount() {
-    ComputeTaskStore.listen(this.onChangeComputeTask);
-
-    ComputeTaskActions.fetchAll();
-  }
-
-  componentWillUnmount() {
-    ComputeTaskStore.unlisten(this.onChangeComputeTask);
-  }
-
-  onClose() {
-    DetailActions.close(this.props.task, true);
-  }
-
-  onChangeComputeTask(state) {
-    const { tasks } = state;
-
-    this.setState({ tasks });
-  }
-
-  /* eslint-disable class-methods-use-this */
-  checkState(taskId) {
-    LoadingActions.start();
-    ComputeTaskActions.checkState(taskId);
-  }
-
-  revokeTask(taskId) {
-    LoadingActions.start();
-    ComputeTaskActions.revokeTask(taskId);
-  }
-
-  deleteTask(taskId) {
-    LoadingActions.start();
-    ComputeTaskActions.deleteTask(taskId);
-  }
-  /* eslint-enable class-methods-use-this */
-
-  render() {
-    const { tasks } = this.state;
-
-    return (
-      <Panel className="eln-panel-detail" bsStyle="primary">
-        <Panel.Heading>
-          {'Task'}
-          <div className="button-right">
-            <Button
-              key="closeBtn"
-              onClick={this.onClose}
-              bsStyle="danger"
-              bsSize="xsmall"
-              className="button-right"
-            >
-              <i className="fa fa-times" />
-            </Button>
-          </div>
-        </Panel.Heading>
-        <Panel.Body>
-          <Table striped condensed hover>
-            <thead>
-              <tr>
-                <th style={{ textAlign: 'center' }}>Sample</th>
-                <th style={{ textAlign: 'center' }}>Status</th>
-                <th style={{ textAlign: 'center' }}>Updated at</th>
-                <th style={{ textAlign: 'center' }}>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {tasks.map(task => (
-                <ComputeTask
-                  key={task.id}
-                  task={task}
-                  checkState={this.checkState}
-                  revokeTask={this.revokeTask}
-                  deleteTask={this.deleteTask}
-                />
-              ))}
-            </tbody>
-          </Table>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-ComputeTaskContainer.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  task: PropTypes.object.isRequired
-};
diff --git a/app/packs/src/components/ContainerComponent.js b/app/packs/src/components/ContainerComponent.js
deleted file mode 100644
index 7da885a64..000000000
--- a/app/packs/src/components/ContainerComponent.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import React, { Component } from 'react';
-import { Map } from 'immutable';
-import PropTypes from 'prop-types';
-import {
-  Col,
-  FormControl,
-  FormGroup,
-  ControlLabel
-} from 'react-bootstrap';
-import Select from 'react-select';
-
-import TextTemplateStore from './stores/TextTemplateStore';
-import TextTemplateActions from './actions/TextTemplateActions';
-
-import ContainerDatasets from './ContainerDatasets';
-import QuillViewer from './QuillViewer';
-import OlsTreeSelect from './OlsComponent';
-import { confirmOptions } from './staticDropdownOptions/options';
-
-import AnalysisEditor from './AnalysisEditor';
-import HyperLinksSection from './common/HyperLinksSection';
-
-export default class ContainerComponent extends Component {
-  constructor(props) {
-    super();
-
-    const { container, templateType } = props;
-    const textTemplate = TextTemplateStore.getState()[templateType] || Map();
-    this.state = {
-      container,
-      textTemplate: textTemplate && textTemplate.toJS()
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.updateTextTemplates = this.updateTextTemplates.bind(this);
-
-    this.handleTemplateChange = this.handleTemplateChange.bind(this);
-    
-    this.handleAddLink = this.handleAddLink.bind(this);
-    this.handleRemoveLink = this.handleRemoveLink.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateStore.listen(this.handleTemplateChange);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container,
-    });
-  }
-
-  componentWillUnmount() {
-    TextTemplateStore.unlisten(this.handleTemplateChange);
-  }
-
-  onChange(container) {
-    this.props.onChange(container);
-  }
-
-  handleTemplateChange() {
-    const { templateType } = this.props;
-
-    const textTemplate = TextTemplateStore.getState()[templateType];
-    this.setState({ textTemplate: textTemplate && textTemplate.toJS() });
-  }
-
-  handleInputChange(type, ev) {
-    const { container } = this.state;
-    let isChanged = false;
-    switch (type) {
-      case 'name':
-        container.name = ev.currentTarget.value;
-        isChanged = true;
-        break;
-      case 'description':
-        container.description = ev.currentTarget.value;
-        isChanged = true;
-        break;
-      case 'kind': {
-        container.extended_metadata.kind = (ev || '').trim();
-        isChanged = true;
-        break;
-      }
-      case 'status':
-        container.extended_metadata.status = ev ? ev.value : undefined;
-        isChanged = true;
-        break;
-      case 'content':
-        container.extended_metadata.content = ev;
-        isChanged = true;
-        break;
-      default:
-        break;
-    }
-
-    if (isChanged) this.onChange(container);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  updateTextTemplates(textTemplate) {
-    const { templateType } = this.props;
-    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
-  }
-  
-  handleAddLink(link) {
-    const { container } = this.state;
-    if (container.extended_metadata['hyperlinks'] == null) {
-      container.extended_metadata['hyperlinks'] = [link];
-    } else {
-      container.extended_metadata['hyperlinks'].push(link);
-    }
-    this.setState({ container });
-  }
-
-  handleRemoveLink(link) {
-    const { container } = this.state;
-    var index = container.extended_metadata['hyperlinks'].indexOf(link);
-    if (index !== -1) {
-      container.extended_metadata['hyperlinks'].splice(index, 1);
-    }
-    this.setState({ container });
-  }
-
-  render() {
-    const { container, textTemplate } = this.state;
-    const { readOnly, disabled } = this.props;
-
-    let quill = (<span />);
-    if (readOnly || disabled) {
-      quill = (
-        <QuillViewer value={container.extended_metadata.content} />
-      );
-    } else {
-      quill = (
-        <AnalysisEditor
-          height="120px"
-          template={textTemplate}
-          analysis={container}
-          updateTextTemplates={this.updateTextTemplates}
-          // eslint-disable-next-line react/jsx-no-bind
-          onChangeContent={this.handleInputChange.bind(this, 'content')}
-        />
-      );
-    }
-
-    return (
-      <div>
-        <Col md={8}>
-          <label>Name</label>
-          <FormControl
-            type="text"
-            label="Name"
-            value={container.name || '***'}
-            // eslint-disable-next-line react/jsx-no-bind
-            onChange={this.handleInputChange.bind(this, 'name')}
-            disabled={readOnly || disabled} />
-        </Col>
-        <Col md={4}>
-          <div style={{ marginBottom: 11 }}>
-            <label>Status</label>
-            <Select
-              name='status'
-              multi={false}
-              options={confirmOptions}
-              value={container.extended_metadata['status']}
-              disabled={readOnly || disabled}
-              // eslint-disable-next-line react/jsx-no-bind
-              onChange={this.handleInputChange.bind(this, 'status')}
-            />
-          </div>
-        </Col>
-        <Col md={12}>
-          <div style={{ marginBottom: 11 }}>
-            <ControlLabel>Type (Chemical Methods Ontology)</ControlLabel>
-            <OlsTreeSelect
-              selectName="chmo"
-              selectedValue={container.extended_metadata.kind || ''}
-              onSelectChange={event => this.handleInputChange('kind', event)}
-              selectedDisable={readOnly || disabled || false}
-            />
-          </div>
-        </Col>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Content</ControlLabel>
-            {quill}
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              label="Description"
-              value={container.description || ''}
-              disabled={readOnly || disabled}
-              // eslint-disable-next-line react/jsx-no-bind
-              onChange={this.handleInputChange.bind(this, 'description')}
-            />
-          </FormGroup>
-        </Col>
-        <Col md={12}>
-          <label>Datasets</label>
-          <ContainerDatasets
-            container={container}
-            readOnly={readOnly}
-            disabled={disabled}
-            onChange={this.onChange}
-          />
-        </Col>
-        <Col md={12}>
-          <HyperLinksSection data={container.extended_metadata['hyperlinks']} onAddLink={this.handleAddLink} onRemoveLink={this.handleRemoveLink}
-            disabled={disabled}></HyperLinksSection>
-        </Col>
-      </div>
-    );
-  }
-}
-
-ContainerComponent.propTypes = {
-  templateType: PropTypes.string,
-  onChange: PropTypes.func,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  container: PropTypes.object
-}
diff --git a/app/packs/src/components/ContainerDataset.js b/app/packs/src/components/ContainerDataset.js
deleted file mode 100644
index 7d99f085c..000000000
--- a/app/packs/src/components/ContainerDataset.js
+++ /dev/null
@@ -1,470 +0,0 @@
-import React, { Component } from 'react';
-import { Row, Col, FormGroup, FormControl, ControlLabel, Table, ListGroup, ListGroupItem, Button, Overlay } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import debounce from 'es6-promise-debounce';
-import { findIndex, cloneDeep } from 'lodash';
-
-import Utils from './utils/Functions';
-import Attachment from './models/Attachment';
-import AttachmentFetcher from './fetchers/AttachmentFetcher';
-import UserStore from './stores/UserStore';
-import GenericDS from './models/GenericDS';
-import GenericDSDetails from './generic/GenericDSDetails';
-import { absOlsTermId } from '../admin/generic/Utils';
-import Container from './models/Container';
-
-import InboxActions from './actions/InboxActions';
-import InstrumentsFetcher from './fetchers/InstrumentsFetcher';
-import ChildOverlay from './managing_actions/ChildOverlay';
-
-import HyperLinksSection from './common/HyperLinksSection';
-
-export default class ContainerDataset extends Component {
-  constructor(props) {
-    super();
-    let dataset_container = Object.assign({}, props.dataset_container);
-    this.state = {
-      dataset_container: dataset_container,
-      instruments: null,
-      valueBeforeFocus: null,
-      timeoutReference: null,
-      link: null
-    };
-
-    this.timeout = 6e2; // 600ms timeout for input typing
-    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleAddLink = this.handleAddLink.bind(this);
-    this.handleRemoveLink = this.handleRemoveLink.bind(this);
-  }
-
-  componentDidMount() {
-    this.createAttachmentPreviews(this.state.dataset_container);
-  }
-
-  createAttachmentPreviews(dataset_container) {
-    const { attachments } = dataset_container;
-    let updatedAttachments = attachments.map((attachment) => {
-      return attachment.thumb ? AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then((result) => {
-        if (result != null) {
-          attachment.preview = `data:image/png;base64,${result}`;
-        }
-        return attachment;
-      }) : attachment;
-    });
-
-    Promise.all(updatedAttachments).then((attachments) => {
-      dataset_container.attachments = attachments;
-
-      this.setState({
-        dataset_container: dataset_container
-      });
-    });
-  }
-
-  handleInputChange(type, event) {
-    const { dataset_container } = this.state;
-    const { value } = event.target;
-    switch (type) {
-      case 'name':
-        dataset_container.name = value;
-        break;
-      case 'instrument':
-        dataset_container.extended_metadata['instrument'] = value;
-        break;
-      case 'description':
-        dataset_container.description = value;
-        break;
-      case 'dataset':
-        dataset_container.dataset = value;
-        break;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleFileDrop(files) {
-    const { dataset_container } = this.state;
-    let attachments = files.map(f => Attachment.fromFile(f))
-    let first_attach = dataset_container.attachments.length == 0
-    dataset_container.attachments = dataset_container.attachments.concat(attachments)
-    if (first_attach) {
-      let attachment_list = dataset_container.attachments;
-      let attach_name = attachment_list[attachment_list.length - 1].filename;
-      let splitted = attach_name.split('.');
-      if (splitted.length > 1) {
-        splitted.splice(-1, 1);
-        attach_name = splitted.join('.');
-      }
-      dataset_container.name = attach_name;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentDownload(attachment) {
-    const {currentUser} = UserStore.getState()
-    if (!currentUser) {
-      Utils.downloadFile({ contents: `/api/v1/public/download/attachment?id=${attachment.id}` });
-    } else {
-      Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
-    }
-  }
-
-  handleAttachmentRemove(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    dataset_container.attachments[index].is_deleted = true;
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentBackToInbox(attachment) {
-    const { onChange } = this.props;
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    if (index != -1) {
-      InboxActions.backToInbox(attachment);
-      dataset_container.attachments.splice(index, 1);
-      onChange(dataset_container);
-    }
-  }
-
-  handleUndo(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-
-    dataset_container.attachments[index].is_deleted = false;
-    this.setState({ dataset_container });
-  }
-
-  handleSave() {
-    const { dataset_container } = this.state;
-    const { onChange, onModalHide } = this.props;
-    onChange(dataset_container);
-    onModalHide();
-  }
-
-  listGroupItem(attachment) {
-    const { disabled } = this.props;
-    const preview = (attachment.preview ? (<tr><td rowSpan="2" width="128"><img src={attachment.preview} alt="" /></td></tr>) : (
-      <tr><td rowSpan="2" width="128"><img style={{ width: '128px', display: 'block' }} alt="" /></td></tr>
-    ));
-    if (attachment.is_deleted) {
-      return (
-        <Table className="borderless" style={{ marginBottom: 'unset' }}>
-          <tbody>
-            {preview}
-            <tr>
-              <td style={{ verticalAlign: 'middle' }}>
-                <strike>{attachment.filename}</strike><br />
-                <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(attachment)} disabled={disabled}>
-                  <i className="fa fa-undo" aria-hidden="true" />
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      );
-    }
-    return (
-      <Table className="borderless" style={{ marginBottom: 'unset' }}>
-        <tbody>
-          {preview}
-          <tr>
-            <td style={{ verticalAlign: 'middle' }}>
-              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a><br />
-              {this.removeAttachmentButton(attachment)} &nbsp;
-              {this.attachmentBackToInboxButton(attachment)}
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
-  }
-
-  attachments() {
-    const { dataset_container } = this.state;
-    if (dataset_container.attachments && dataset_container.attachments.length > 0) {
-      return (
-        <div className="list">
-          <ListGroup>
-            {
-              dataset_container.attachments.map((attachment) => {
-                return (
-                  <ListGroupItem key={attachment.id} style={{ margin: 'unset', padding: 'unset' }}>
-                    {this.listGroupItem(attachment)}
-                  </ListGroupItem>
-                );
-              })
-            }
-          </ListGroup>
-        </div>
-      );
-    }
-    return (
-      <div style={{ padding: 15 }}>
-        There are currently no Datasets.<br />
-      </div>
-    );
-  }
-
-  removeAttachmentButton(attachment) {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove(attachment)}>
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
-    }
-  }
-
-  attachmentBackToInboxButton(attachment) {
-    const { readOnly } = this.props;
-    if (!readOnly && !attachment.is_new) {
-      return (
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentBackToInbox(attachment)}>
-          <i className="fa fa-backward" />
-        </Button>
-      );
-    }
-  }
-
-  dropzone() {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Dropzone
-          onDrop={files => this.handleFileDrop(files)}
-          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-        >
-          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-            Drop Files, or Click to Select.
-          </div>
-        </Dropzone>
-      );
-    }
-  }
-
-
-  resetInstrumentComponent() {
-    const { dataset_container } = this.state;
-    this.setState({
-      value: '',
-      showInstruments: false,
-      instruments: null,
-      valueBeforeFocus: null,
-      error: ''
-    });
-    dataset_container.extended_metadata['instrument'] = '';
-  }
-
-  doneInstrumentTyping() {
-    const { value } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-    } else {
-      this.fetchInstruments(value);
-    }
-  }
-
-  fetchInstruments(value, show = true) {
-    const debounced = debounce(function (query) {
-      return InstrumentsFetcher.fetchInstrumentsForCurrentUser(query)
-    }, 200);
-    debounced(value).then((result) => {
-      const newState = {};
-      if (result.length > 0) {
-        newState.instruments = result;
-        newState.showInstruments = show;
-      } else {
-        newState.instruments = null;
-        newState.error = '';
-        newState.showInstruments = false;
-      }
-      this.setState(newState);
-    }).catch(error => console.log(error));
-  }
-
-  handleInstrumentValueChange(event, doneInstrumentTyping) {
-    const { value } = event.target;
-    const { timeoutReference } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-      return;
-    }
-    if (timeoutReference) {
-      clearTimeout(timeoutReference);
-    }
-    this.setState({
-      value,
-      timeoutReference: setTimeout(function () {
-        doneInstrumentTyping()
-      }, this.timeout)
-    });
-    this.handleInputChange('instrument', event);
-  }
-
-  selectInstrument() {
-    const { dataset_container, timeoutReference, value } = this.state;
-
-    this.setState({
-      showInstruments: false,
-      valueBeforeFocus: null
-    })
-
-    if (!value || value.trim() === '') {
-      this.setState({ value: '' });
-      return 0;
-    }
-    dataset_container.extended_metadata.instrument = value;
-    clearTimeout(timeoutReference);
-    return value;
-  }
-
-  focusInstrument(newFocus) {
-    const { instruments, valueBeforeFocus } = this.state;
-    const newState = {}
-    if (!valueBeforeFocus) {
-      newState.valueBeforeFocus = instruments[newFocus].name;
-    }
-    newState.value = instruments[newFocus].name;
-    this.setState(newState);
-  }
-
-  abortAutoSelection() {
-    const { valueBeforeFocus } = this.state;
-    this.setState({
-      value: valueBeforeFocus,
-      valueBeforeFocus: null,
-    })
-  }
-
-  renderInstruments() {
-    const { instruments, error } = this.state;
-
-    if (instruments) {
-      return (
-        <div>
-          {instruments.map((instrument, index) => {
-            return (
-              <ListGroupItem
-                onClick={() => this.selectInstrument()}
-                onMouseEnter={() => this.focusInstrument(index)}
-                key={'instrument_' + index}
-                ref={'instrument_' + index}
-                header={instrument.name}
-              />
-            )
-          })}
-        </div>
-      );
-    } else if (error) {
-      return <ListGroupItem>{error}</ListGroupItem>;
-    }
-    return (<div />);
-  }
-
-  handleAddLink(link) {
-    const { dataset_container } = this.state;
-    if (dataset_container.extended_metadata['hyperlinks'] == null) {
-      dataset_container.extended_metadata['hyperlinks'] = [link];
-    } else {
-      dataset_container.extended_metadata['hyperlinks'].push(link);
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleRemoveLink(link) {
-    const { dataset_container } = this.state;
-    var index = dataset_container.extended_metadata['hyperlinks'].indexOf(link);
-    if (index !== -1) {
-      dataset_container.extended_metadata['hyperlinks'].splice(index, 1);
-    }
-    this.setState({ dataset_container });
-  }
-
-  render() {
-    const { dataset_container, showInstruments } = this.state;
-    const { readOnly, disabled, kind } = this.props;
-    const overlayAttributes = {
-      style: {
-        position: 'absolute', width: 300, marginTop: 144, marginLeft: 17
-      }
-    };
-    const termId = absOlsTermId(kind);
-    const klasses = (UserStore.getState() && UserStore.getState().dsKlasses) || [];
-    let klass = {};
-    const idx = findIndex(klasses, o => o.ols_term_id === termId);
-    if (idx > -1) { klass = klasses[idx]; }
-
-    if (dataset_container.dataset && dataset_container.dataset.id) {
-      dataset_container.dataset = dataset_container.dataset;
-    } else if (klass.ols_term_id !== undefined) {
-      dataset_container.dataset = GenericDS.buildEmpty(cloneDeep(klass), dataset_container.id);
-    }
-
-    return (
-      <Row>
-        <Col md={6} className="col-base">
-          <FormGroup controlId="datasetName">
-            <ControlLabel>Name</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.name || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('name', event)}
-            />
-          </FormGroup>
-          <FormGroup controlId="datasetInstrument">
-            <ControlLabel>Instrument</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.extended_metadata['instrument'] || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInstrumentValueChange(event, this.doneInstrumentTyping)}
-              ref={(input) => { this.autoComplete = input; }}
-              autoComplete="off"
-            />
-            <Overlay
-              placement="bottom"
-              style={{
-                marginTop: 80, width: 398, height: 10, maxHeight: 20
-              }}
-              show={showInstruments}
-              container={this}
-              rootClose
-              onHide={() => this.abortAutoSelection()}
-            >
-              <ChildOverlay
-                dataList={this.renderInstruments()}
-                overlayAttributes={overlayAttributes}
-              />
-            </Overlay>
-          </FormGroup>
-          <FormGroup controlId="datasetDescription">
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              value={dataset_container.description || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('description', event)}
-              rows={4}
-            />
-          </FormGroup>
-          <GenericDSDetails
-            kind={kind}
-            genericDS={dataset_container.dataset}
-            klass={klass}
-            onChange={this.handleInputChange}
-          />
-        </Col>
-        <Col md={6} className="col-full">
-          <label>Attachments: </label>
-          {this.dropzone()}
-          {this.attachments()}
-          <HyperLinksSection data={dataset_container.extended_metadata['hyperlinks']} onAddLink={this.handleAddLink} onRemoveLink={this.handleRemoveLink}
-          disabled={disabled}></HyperLinksSection>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/components/ContainerDatasetField.js b/app/packs/src/components/ContainerDatasetField.js
deleted file mode 100644
index 35580b052..000000000
--- a/app/packs/src/components/ContainerDatasetField.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonToolbar } from 'react-bootstrap';
-import { DropTarget } from 'react-dnd';
-import InboxActions from './actions/InboxActions';
-import DragDropItemTypes from './DragDropItemTypes';
-import AttachmentFetcher from './fetchers/AttachmentFetcher';
-import { GenericDSMisType, absOlsTermId } from '../admin/generic/Utils';
-import PublicFetcher from './fetchers/PublicFetcher';
-
-const dataTarget = {
-  canDrop(props, monitor) {
-    const itemType = monitor.getItemType();
-    if(itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET){
-      return true;
-    }
-  },
-
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    const {dataset_container, onChange} = props;
-
-    switch (itemType) {
-      case DragDropItemTypes.DATA:
-        dataset_container.attachments.push(item.attachment)
-        onChange(dataset_container)
-        InboxActions.removeAttachmentFromList(item.attachment)
-        break;
-      case DragDropItemTypes.UNLINKED_DATA:
-        dataset_container.attachments.push(item.attachment)
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
-        break;
-      case DragDropItemTypes.DATASET:
-        item.dataset.attachments.forEach(attachment => {
-          dataset_container.attachments.push(attachment)
-        })
-        onChange(dataset_container)
-        InboxActions.removeDatasetFromList(item.dataset)
-        break;
-    }
-
-  }
-};
-
-const collectTarget = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class ContainerDatasetField extends Component{
-
-  removeButton(dataset_container) {
-    const {readOnly, handleRemove, disabled} = this.props;
-    if(!readOnly) {
-      return (
-        <Button bsSize="xsmall"
-                bsStyle="danger"
-                onClick={() => handleRemove(dataset_container)}
-                disabled={disabled}>
-          <i className="fa fa-trash-o"></i>
-        </Button>
-      );
-    }
-  }
-
-  renderOverlay(color) {
-      return (
-        <div style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          height: '100%',
-          width: '100%',
-          zIndex: 1,
-          opacity: 0.5,
-          backgroundColor: color,
-        }} />
-      );
-    }
-
-  render() {
-    const {connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind, isPublic,
-            handleModalOpen, disabled} = this.props;
-    const downloadClick = isPublic ? () => PublicFetcher.downloadZip(dataset_container.id) : () => AttachmentFetcher.downloadZip(dataset_container.id);
-
-    if(dataset_container.is_deleted){
-      return (
-        <div><strike>{dataset_container.name}</strike>
-
-            <Button
-              className="pull-right"
-              bsSize="xsmall"
-              bsStyle="danger"
-              onClick={() => handleUndo(dataset_container)}
-              disabled={disabled}
-            >
-              <i className="fa fa-undo"></i>
-            </Button>
-
-        </div>
-      )
-    }else{
-      return connectDropTarget(
-        <div>
-          {dataset_container.dataset && dataset_container.dataset.klass_ols !== absOlsTermId(kind) ? <GenericDSMisType /> : null}
-        <a style={{cursor: 'pointer'}} onClick={() => handleModalOpen(dataset_container)}>
-          {dataset_container.name || 'new'}
-        </a>
-        <ButtonToolbar className="pull-right">
-          <Button bsSize="xsmall" bsStyle="info" onClick={downloadClick}>
-            <i className="fa fa-download"></i>
-          </Button>
-          {this.removeButton(dataset_container)}
-        </ButtonToolbar>
-        {isOver && canDrop && this.renderOverlay('green')}
-        </div>
-      )
-    }
-  }
-}
-
-export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(ContainerDatasetField);
-
-ContainerDatasetField.propTypes = {
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-  isPublic: PropTypes.bool
-};
-
-ContainerDatasetField.defaultProps = { isPublic: false };
diff --git a/app/packs/src/components/ContainerDatasetModal.js b/app/packs/src/components/ContainerDatasetModal.js
deleted file mode 100644
index 8e3675cef..000000000
--- a/app/packs/src/components/ContainerDatasetModal.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component } from 'react';
-import { Modal, ButtonToolbar, Button } from 'react-bootstrap';
-import ContainerDataset from './ContainerDataset';
-
-export default class ContainerDatasetModal extends Component {
-  constructor(props) {
-    super(props);
-
-    this.datasetInput = React.createRef();
-    this.handleSave = this.handleSave.bind(this);
-  }
-
-  handleSave() {
-    this.datasetInput.current.handleSave();
-  }
-
-  render() {
-    const {
-      show, dataset_container, onHide, onChange, readOnly, disabled, kind
-    } = this.props;
-    if (show) {
-      return (
-        <Modal show={show} backdrop="static" bsSize="large" dialogClassName="attachment-dataset-modal" onHide={() => (disabled ? onHide() : this.handleSave())}>
-          <Modal.Header>
-            <Modal.Title>
-              {dataset_container.name}
-              <ButtonToolbar>
-                <Button bsStyle="light" onClick={() => (disabled ? onHide() : this.handleSave())}>
-                  <i className="fa fa-times" />
-                </Button>
-              </ButtonToolbar>
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <ContainerDataset
-              ref={this.datasetInput}
-              readOnly={readOnly}
-              dataset_container={dataset_container}
-              kind={kind}
-              onModalHide={() => onHide()}
-              onChange={dataset_container => onChange(dataset_container)}
-            />
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return <div />;
-  }
-}
diff --git a/app/packs/src/components/ContainerDatasets.js b/app/packs/src/components/ContainerDatasets.js
deleted file mode 100644
index 71fff7f14..000000000
--- a/app/packs/src/components/ContainerDatasets.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
-import { ListGroup, ListGroupItem, Button, Well } from 'react-bootstrap';
-import ContainerDatasetModal from './ContainerDatasetModal';
-import ContainerDatasetField from './ContainerDatasetField';
-import Container from './models/Container';
-import AttachmentDropzone from './AttachmentDropzone';
-
-export default class ContainerDatasets extends Component {
-  constructor(props) {
-    super(props);
-    const { container } = props;
-    this.state = {
-      container,
-      modal: {
-        show: false,
-        dataset_container: null
-      }
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    })
-  }
-
-  handleModalOpen(dataset_container) {
-    const {modal} = this.state;
-    modal.dataset_container = dataset_container;
-    modal.show = true;
-    this.setState({modal});
-  }
-
-  handleAdd(){
-    const {container} = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
-
-    container.children.push(dataset_container);
-
-    this.handleModalOpen(dataset_container);
-    this.props.onChange(container);
-
-  }
-
-  handleAddWithAttachments(attachments){
-    const {container} = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
-
-    attachments.forEach(attachment => {
-      dataset_container.attachments.push(attachment)
-    })
-    container.children.push(dataset_container);
-
-    this.handleModalOpen(dataset_container);
-    this.props.onChange(container);
-
-  }
-
-  handleRemove(dataset_container) {
-    let {container} = this.state;
-
-    dataset_container.is_deleted = true;
-    this.props.onChange(container);
-  }
-
-  handleUndo(dataset_container) {
-    let {container} = this.state;
-
-    dataset_container.is_deleted = false;
-    this.props.onChange(container);
-  }
-
-  handleChange(dataset_container){
-    let {container} = this.state;
-
-    container.children.find(dataset => {
-      if(dataset.id == dataset_container.id) {
-        const datasetId = container.children.indexOf(dataset);
-        container.children[datasetId] = dataset_container;
-      }
-    });
-
-    this.props.onChange(container);
-  }
-
-  handleModalHide() {
-    const {modal} = this.state;
-    modal.show = false;
-    modal.dataset_container = null;
-    this.setState({modal});
-    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
-    document.body.className = document.body.className.replace('modal-open', '');
-  }
-
-  addButton() {
-    const {readOnly, disabled} = this.props;
-
-    if(!readOnly && !disabled) {
-      return (
-        <div className="pull-right" style={{marginTop: 5, marginBottom: 5}}>
-          <Button bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
-            <i className="fa fa-plus"></i>
-          </Button>
-        </div>
-      )
-    }
-  }
-
-
-
-  render() {
-    const {container, modal} = this.state;
-    const {readOnly, disabled} = this.props;
-
-    if(container.children.length > 0) {
-      const kind = container.extended_metadata && container.extended_metadata.kind;
-      return (
-        <div>
-          <Well style={{minHeight: 70, padding: 5, paddingBottom: 31}}>
-            <ListGroup style={{marginBottom: 0}}>
-              {container.children.map((dataset_container, key) => {
-                return (
-                  <ListGroupItem key={key}>
-                    <ContainerDatasetField
-                      kind={kind}
-                      dataset_container={dataset_container}
-                      onChange={() => this.handleChange(dataset_container)}
-                      handleRemove={() => this.handleRemove(dataset_container)}
-                      handleUndo={() => this.handleUndo(dataset_container)}
-                      handleModalOpen={() => this.handleModalOpen(dataset_container)}
-                      disabled={disabled}
-                    />
-                  </ListGroupItem>
-                )
-              })}
-              <ListGroupItem key="attachmentdropzone" disabled>
-              {!readOnly && !disabled
-                ? <AttachmentDropzone
-                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
-                  />
-                : null}
-              </ListGroupItem>
-            </ListGroup>
-            {this.addButton()}
-          </Well>
-          <ContainerDatasetModal
-            onHide={() => this.handleModalHide()}
-            onChange={dataset_container => this.handleChange(dataset_container)}
-            kind={kind}
-            show={modal.show}
-            readOnly={this.props.readOnly}
-            dataset_container={modal.dataset_container}
-            analysisContainer={modal.analysisContainer}
-            disabled={disabled}
-            />
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <Well style={{minHeight: 70, padding: 5, paddingBottom: 31}}>
-            <p>There are currently no Datasets.</p>
-            <ListGroup style={{marginBottom: 0}}>
-              <ListGroupItem key="attachmentdropzone" disabled>
-                <AttachmentDropzone
-                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
-                />
-              </ListGroupItem>
-            </ListGroup>
-            {this.addButton()}
-          </Well>
-        </div>
-      )
-    }
-  }
-}
diff --git a/app/packs/src/components/DetailsTabLiteratures.js b/app/packs/src/components/DetailsTabLiteratures.js
deleted file mode 100644
index 42b56250d..000000000
--- a/app/packs/src/components/DetailsTabLiteratures.js
+++ /dev/null
@@ -1,306 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ListGroup, ListGroupItem, Button, Row, Col, Tooltip } from 'react-bootstrap';
-import uuid from 'uuid';
-import Immutable from 'immutable';
-import { Citation, doiValid, sanitizeDoi, groupByCitation, AddButton, LiteratureInput, LiteralType } from './LiteratureCommon';
-import Sample from './models/Sample';
-import Reaction from './models/Reaction';
-import ResearchPlan from './models/ResearchPlan';
-import Literature from './models/Literature';
-import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import UserStore from './stores/UserStore';
-import NotificationActions from './actions/NotificationActions';
-import LoadingActions from './actions/LoadingActions';
-import CitationPanel from './CitationPanel';
-import { CitationTypeMap } from './CitationType';
-
-const Cite = require('citation-js');
-require('@citation-js/plugin-isbn');
-
-const notification = message => ({
-  title: 'Add Literature', message, level: 'error', dismissible: 'button', autoDismiss: 5, position: 'tr', uid: uuid.v4()
-});
-
-const clipboardTooltip = () => (
-  <Tooltip id="assign_button">copy to clipboard</Tooltip>
-);
-
-const sameConseqLiteratureId = (citations, sortedIds, i) => {
-  if (i === 0) { return false; }
-  const a = citations.get(sortedIds[i])
-  const b = citations.get(sortedIds[i-1])
-  return (a.id === b.id)
-};
-
-const checkElementStatus = (element) => {
-  const type = element.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
-  if (element.isNew) {
-    NotificationActions.add(notification(`Create ${type} first.`));
-    return false;
-  }
-  const isPub = !!(element.publication && element.publication.state === 'completed');
-  if (isPub) {
-    NotificationActions.add(notification('Already published. This data can not be changed.'));
-    return false;
-  }
-  return true;
-};
-
-export default class DetailsTabLiteratures extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      literature: Literature.buildEmpty(),
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-    };
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleTypeUpdate = this.handleTypeUpdate.bind(this);
-    this.handleLiteratureAdd = this.handleLiteratureAdd.bind(this);
-    this.handleLiteratureRemove = this.handleLiteratureRemove.bind(this);
-    this.fetchDOIMetadata = this.fetchDOIMetadata.bind(this);
-    this.fetchISBNMetadata = this.fetchISBNMetadata.bind(this);
-    this.fetchMetadata = this.fetchMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.props.literatures && this.props.literatures.size > 0) {
-      const sortedIds = groupByCitation(this.props.literatures);
-      this.setState(prevState => ({
-        ...prevState,
-        literatures: this.props.literatures,
-        sortedIds,
-        sorting: 'literature_id'
-      }));
-    } else {
-      LiteraturesFetcher.fetchElementReferences(this.props.element).then((literatures) => {
-        const sortedIds = groupByCitation(literatures);
-        this.setState(prevState => ({
-          ...prevState,
-          literatures,
-          sortedIds,
-          sorting: 'literature_id'
-        }));
-      });
-    }
-  }
-
-  handleInputChange(type, event) {
-    const { literature } = this.state;
-    const { value } = event.target;
-    literature[type] = value.trim();
-    this.setState(prevState => ({ ...prevState, literature }));
-  }
-
-  handleTypeUpdate(updId, rType) {
-    const { element } = this.props;
-    if (!checkElementStatus(element)) { return; }
-    LoadingActions.start();
-    const params = {
-      element_id: element.id, element_type: element.type, id: updId, litype: rType
-    };
-    LiteraturesFetcher.updateReferenceType(params)
-      .then((literatures) => {
-        this.setState({ literatures, sortedIds: groupByCitation(literatures), sorting: 'literature_id' }, LoadingActions.stop());
-      });
-  }
-
-  handleLiteratureRemove(literature) {
-    const { element } = this.props;
-    if (!checkElementStatus(element)) { return; }
-    if (isNaN(element.id) && element.type === 'reaction') {
-      this.setState(prevState => ({
-        ...prevState,
-        literatures: prevState.literatures.delete(literature.literal_id),
-        sortedIds: groupByCitation(prevState.literatures.delete(literature.literal_id))
-      }));
-      if (element.type === 'reaction') {
-        element.literatures = element.literatures && element.literatures.delete(literature.literal_id);
-        this.setState({
-          reaction: element
-        });
-      }
-    } else {
-      LiteraturesFetcher.deleteElementReference({ element, literature })
-        .then(() => {
-          this.setState(prevState => ({
-            ...prevState,
-            literatures: prevState.literatures.delete(literature.literal_id),
-            sortedIds: groupByCitation(prevState.literatures.delete(literature.literal_id))
-          }));
-        }).catch((errorMessage) => {
-          NotificationActions.add(notification(errorMessage.error));
-        });
-    }
-  }
-
-  handleLiteratureAdd(literature) {
-    const { element } = this.props;
-    if (!checkElementStatus(element)) { return; }
-    const {
-      doi, url, title, isbn
-    } = literature;
-    if (element.isNew === true && element.type === 'reaction'
-    && element.literatures && element.literatures.size > 0) {
-      const newlit = {
-        ...literature,
-        doi: sanitizeDoi(doi),
-        url: url.trim().replace(/ +/g, ' '),
-        title: title.trim().replace(/ +/g, ' '),
-        isbn
-      };
-      const objliterature = new Literature(newlit);
-      element.literatures = element.literatures.set(objliterature.id, objliterature);
-      this.setState(prevState => ({
-        ...prevState,
-        literature: Literature.buildEmpty(),
-        literatures: prevState.literatures.set(objliterature.id, objliterature),
-        sortedIds: groupByCitation(prevState.literatures.set(objliterature.id, objliterature))
-      }));
-    } else {
-      LiteraturesFetcher.postElementReference({
-        element,
-        literature: {
-          ...literature,
-          doi: sanitizeDoi(doi),
-          url: url.trim().replace(/ +/g, ' '),
-          title: title.trim().replace(/ +/g, ' '),
-          isbn
-        },
-      }).then((literatures) => {
-        this.setState(() => ({
-          literature: Literature.buildEmpty(),
-          literatures,
-          sortedIds: groupByCitation(literatures),
-          sorting: 'literature_id'
-        }));
-      }).catch((errorMessage) => {
-        NotificationActions.add(notification(errorMessage.error));
-        this.setState({ literature: Literature.buildEmpty() });
-      });
-    }
-  }
-
-  fetchMetadata() {
-    const { element } = this.props;
-    if (!checkElementStatus(element)) { return; }
-    const { doi_isbn } = this.state.literature;
-    if (doiValid(doi_isbn)) {
-      this.fetchDOIMetadata(doi_isbn);
-    } else {
-      this.fetchISBNMetadata(doi_isbn);
-    }
-  }
-
-  fetchDOIMetadata(doi) {
-    NotificationActions.removeByUid('literature');
-    LoadingActions.start();
-    Cite.async(sanitizeDoi(doi)).then((json) => {
-      LoadingActions.stop();
-      if (json.data && json.data.length > 0) {
-        const data = json.data[0];
-        const citation = new Cite(data);
-        this.setState(prevState => ({
-          ...prevState,
-          literature: {
-            ...prevState.literature,
-            doi,
-            title: data.title || '',
-            year: (data && data.issued && data.issued['date-parts'][0]) || '',
-            refs: { citation, bibtex: citation.format('bibtex') }
-          }
-        }));
-        this.handleLiteratureAdd(this.state.literature);
-      }
-    }).catch((errorMessage) => {
-      LoadingActions.stop();
-      NotificationActions.add(notification(`unable to fetch metadata for this doi: ${doi}, error: ${errorMessage}`));
-    });
-  }
-
-  fetchISBNMetadata(isbn) {
-    NotificationActions.removeByUid('literature');
-    LoadingActions.start();
-    Cite.async(isbn).then((json) => {
-      LoadingActions.stop();
-      if (json.data && json.data.length > 0) {
-        const data = json.data[0];
-        const citation = new Cite(data);
-        this.setState(prevState => ({
-          ...prevState,
-          literature: {
-            ...prevState.literature,
-            isbn,
-            title: data.title || '',
-            year: (data && data.issued && data.issued['date-parts'][0]) || '',
-            url: (data && data.URL) || '',
-            refs: { citation, bibtex: citation.format('bibtex') }
-          }
-        }));
-        this.handleLiteratureAdd(this.state.literature);
-      }
-    }).catch((errorMessage) => {
-      LoadingActions.stop();
-      NotificationActions.add(notification(`unable to fetch metadata for this ISBN: ${isbn}, error: ${errorMessage}`));
-    });
-  }
-
-  render() {
-    const { literature, literatures, sortedIds } = this.state;
-    const { currentUser } = UserStore.getState();
-    return (
-      <ListGroup fill="true">
-        <ListGroupItem style={{ border: 'unset' }}>
-          <Row>
-            <Col md={8} style={{ paddingRight: 0 }}>
-              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="doi_isbn" placeholder="DOI: 10.... or  http://dx.doi.org/10... or 10. ... or ISBN: 978 ..." />
-            </Col>
-            <Col md={3} style={{ paddingRight: 0 }}>
-              <LiteralType handleInputChange={this.handleInputChange} disabled={false} val={literature.litype} />
-            </Col>
-            <Col md={1} style={{ paddingRight: 0 }}>
-              <Button
-                bsStyle="success"
-                bsSize="small"
-                style={{ marginTop: 2 }}
-                onClick={this.fetchMetadata}
-                title="fetch metadata for this doi or ISBN(open services) and add citation to selection"
-                disabled={!(doiValid(literature.doi_isbn || '') || /^[0-9]([0-9]|-(?!-))+$/.test(literature.doi_isbn || ''))}
-              >
-                <i className="fa fa-plus" aria-hidden="true" />
-              </Button>
-            </Col>
-            <Col md={12} style={{ paddingRight: 0 }}>
-              <Citation literature={literature} />
-            </Col>
-            <Col md={7} style={{ paddingRight: 0 }}>
-              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="title" placeholder="Title..." />
-            </Col>
-            <Col md={4} style={{ paddingRight: 0 }}>
-              <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="url" placeholder="URL..." />
-            </Col>
-            <Col md={1}>
-              <AddButton onLiteratureAdd={this.handleLiteratureAdd} literature={literature} />
-            </Col>
-          </Row>
-        </ListGroupItem>
-        <ListGroupItem style={{ border: 'unset' }}>
-          {
-            Object.keys(CitationTypeMap).map(e => <CitationPanel key={`_citation_panel_${e}`} title={e} fnDelete={this.handleLiteratureRemove} sortedIds={sortedIds} rows={literatures} uid={currentUser && currentUser.id} fnUpdate={this.handleTypeUpdate} />)
-          }
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-}
-
-DetailsTabLiteratures.propTypes = {
-  element: PropTypes.oneOfType([
-    PropTypes.instanceOf(ResearchPlan),
-    PropTypes.instanceOf(Reaction),
-    PropTypes.instanceOf(Sample)
-  ]).isRequired,
-  literatures: PropTypes.array
-};
diff --git a/app/packs/src/components/DetailsTabMetadata.js b/app/packs/src/components/DetailsTabMetadata.js
deleted file mode 100644
index 086efd8e3..000000000
--- a/app/packs/src/components/DetailsTabMetadata.js
+++ /dev/null
@@ -1,526 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel,
-  ControlLabel,
-  Form,
-  FormControl,
-  FormGroup,
-  Button,
-  Row,
-  Col
-} from 'react-bootstrap';
-import ResearchPlansFetcher from './fetchers/ResearchPlansFetcher';
-
-require('@citation-js/plugin-isbn');
-
-export default class ResearchPlansMetadata extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      researchPlan: {},
-      researchPlanMetadata: {
-        title: '',
-        subject: '',
-        format: '',
-        version: '',
-        state: '',
-        url: '',
-        landing_page: '',
-        alternate_identifier: [],
-        related_identifier: [],
-        description: [],
-        dates: [],
-        geo_location: [],
-        funding_reference: []
-      }
-    };
-  }
-
-
-  componentDidMount() {
-    const { parentResearchPlan, parentResearchPlanMetadata } = this.props;
-    this.setState({
-      researchPlan: parentResearchPlan
-    });
-    if (parentResearchPlanMetadata) {
-      this.setState({
-        researchPlanMetadata: parentResearchPlanMetadata
-      });
-    }
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { parentResearchPlan, parentResearchPlanMetadata } = nextProps;
-    this.setState({
-      researchPlan: parentResearchPlan,
-      researchPlanMetadata: parentResearchPlanMetadata
-    });
-  }
-
-  handleFieldChange(event) {
-    const { researchPlanMetadata } = this.state;
-
-    researchPlanMetadata[event.target.id] = event.target.value;
-
-    this.setState({ researchPlanMetadata });
-  }
-
-  saveResearchPlanMetadata() {
-    const { researchPlan, researchPlanMetadata } = this.state;
-
-    ResearchPlansFetcher.postResearchPlanMetadata({
-
-      research_plan_id: researchPlan.id,
-      title: researchPlanMetadata.title.trim(),
-      subject: researchPlanMetadata.subject.trim(),
-      alternate_identifier: researchPlanMetadata.alternate_identifier,
-      related_identifier: researchPlanMetadata.related_identifier,
-      description: researchPlanMetadata.description,
-
-      format: this.format.value.trim(),
-      version: this.version.value.trim(),
-      geo_location: this.state.researchPlanMetadata.geo_location,
-      funding_reference: this.state.researchPlanMetadata.funding_reference,
-
-      url: this.url.value.trim(),
-      landing_page: this.landing_page.value.trim()
-
-    }).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      } else if (result.research_plan_metadata) {
-        this.setState({
-          researchPlanMetadata: result.research_plan_metadata
-        })
-      }
-    });
-  }
-
-  updateResearchPlanMetadataDataCiteState(value) {
-    this.setState(state => {
-      const researchPlanMetadata = state.researchPlanMetadata
-      researchPlanMetadata.data_cite_state = value
-
-      return {
-        researchPlanMetadata
-      }
-    })
-  }
-
-  newItemByType(type) {
-    switch (type) {
-      case 'alternate_identifier':
-        return { alternateIdentifier: '', alternateIdentifierType: '' }
-      case 'related_identifier':
-        return { relatedIdentifier: '', relatedIdentifierType: '' }
-      case 'description':
-        return { description: '', descriptionType: '' }
-      case 'geo_location':
-        return { geoLocationPoint: { latitude: '', longitude: '' } }
-      case 'funding_reference':
-        return { funderName: '', funderIdentifier: '' }
-    }
-  }
-
-  addResearchPlanMetadataArrayItem(type) {
-    this.setState(state => {
-      const newItem = this.newItemByType(type)
-
-      const researchPlanMetadata = state.researchPlanMetadata
-      const currentCollection = researchPlanMetadata[type] ? researchPlanMetadata[type] : []
-      const newCollection = currentCollection.concat(newItem)
-      researchPlanMetadata[type] = newCollection
-
-      return researchPlanMetadata
-    })
-  }
-
-  removeResearchPlanMetadataArrayItem(type, index) {
-    this.setState(state => {
-      const researchPlanMetadata = state.researchPlanMetadata
-      const currentCollection = researchPlanMetadata[type] ? researchPlanMetadata[type] : []
-      currentCollection.splice(index, 1)
-
-      researchPlanMetadata[type] = currentCollection
-
-      return researchPlanMetadata
-    })
-  }
-
-  updateResearchPlanMetadataArrayItem(type, index, fieldname, value) {
-    this.setState(state => {
-      const researchPlanMetadata = state.researchPlanMetadata
-      researchPlanMetadata[type][index][fieldname] = value
-
-      return researchPlanMetadata
-    })
-  }
-
-  updateResearchPlanMetadataGeoLocation(index, fieldname, value) {
-    this.setState(state => {
-      const researchPlanMetadata = state.researchPlanMetadata;
-      researchPlanMetadata.geo_location[index]['geoLocationPoint'][fieldname] = value;
-      return researchPlanMetadata;
-    })
-  }
-
-  render() {
-    const { researchPlanMetadata } = this.state;
-    return (
-      <Panel>
-        <Panel.Body>
-          <Form>
-            <FormGroup controlId="title">
-              <ControlLabel>Title</ControlLabel>&nbsp;&nbsp;
-              <FormControl
-                type="text"
-                value={researchPlanMetadata?.title}
-                onChange={event => this.handleFieldChange(event)}
-                placeholder="Title"
-              />
-            </FormGroup>
-            <FormGroup controlId="subject">
-              <ControlLabel>Subject</ControlLabel>&nbsp;&nbsp;
-              <FormControl
-                type="text"
-                value={researchPlanMetadata?.subject}
-                onChange={event => this.handleFieldChange(event)}
-                placeholder="Subject"
-              />
-            </FormGroup>
-
-            <ControlLabel>Alternate Identifiers</ControlLabel>&nbsp;&nbsp;
-            {researchPlanMetadata?.alternate_identifier && researchPlanMetadata?.alternate_identifier.map((alternateIdentifier, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Alternate Identifier</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={alternateIdentifier?.alternateIdentifier}
-                        placeholder="Alternate Identifier"
-                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('alternate_identifier', index, 'alternateIdentifier', event.target.value)}
-                        />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Type</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={alternateIdentifier?.alternateIdentifierType}
-                        placeholder="Type"
-                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('alternate_identifier', index, 'alternateIdentifierType', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={2}>
-                    <ControlLabel>Action</ControlLabel><br/>
-                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('alternate_identifier', index)}>
-                      <i className="fa fa-trash-o" />
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-            <Row>
-              <Col smOffset={0} sm={12}>
-                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('alternate_identifier')}>
-                  <i className="fa fa-plus" />
-                </Button>
-              </Col>
-            </Row>
-
-            <ControlLabel>Related Identifiers</ControlLabel>&nbsp;&nbsp;
-            {researchPlanMetadata?.related_identifier && researchPlanMetadata?.related_identifier.map((relatedIdentifier, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Related Identifier</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={relatedIdentifier?.relatedIdentifier}
-                        placeholder="Related Identifier"
-                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('related_identifier', index, 'relatedIdentifier', event.target.value)}
-                        />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Type</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={relatedIdentifier?.relatedIdentifierType}
-                        placeholder="Type"
-                        onChange={(event) => this.updateResearchPlanMetadataArrayItem('related_identifier', index, 'relatedIdentifierType', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={2}>
-                    <ControlLabel>Action</ControlLabel><br/>
-                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('related_identifier', index)}>
-                      <i className="fa fa-trash-o" />
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-            <Row>
-              <Col smOffset={0} sm={12}>
-                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('related_identifier')}>
-                  <i className="fa fa-plus" />
-                </Button>
-              </Col>
-            </Row>
-
-            <ControlLabel>Descriptions</ControlLabel>&nbsp;&nbsp;
-            {researchPlanMetadata?.description && researchPlanMetadata?.description.map((description, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Description</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={description?.description}
-                        placeholder="Description"
-                        onChange={event => this.updateResearchPlanMetadataArrayItem('description', index, 'description', event.target.value)}
-                        />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Type</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={description?.descriptionType}
-                        placeholder="Type"
-                        onChange={event => this.updateResearchPlanMetadataArrayItem('description', index, 'descriptionType', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={2}>
-                    <ControlLabel>Action</ControlLabel><br/>
-                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('description', index)}>
-                      <i className="fa fa-trash-o" />
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-            <Row>
-              <Col smOffset={0} sm={12}>
-                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('description')}>
-                  <i className="fa fa-plus" />
-                </Button>
-              </Col>
-            </Row>
-
-            <FormGroup controlId="metadataFormFormat">
-              <ControlLabel>Format</ControlLabel>
-              <FormControl
-                type="text"
-                defaultValue={researchPlanMetadata?.format}
-                inputRef={(m) => { this.format = m; }}
-                placeholder="Format"
-              />
-            </FormGroup>
-            <FormGroup controlId="metadataFormVersion">
-              <ControlLabel>Version</ControlLabel>
-              <FormControl
-                type="text"
-                defaultValue={researchPlanMetadata?.version}
-                inputRef={(m) => { this.version = m; }}
-                placeholder="Version"
-              />
-            </FormGroup>
-            <ControlLabel style={{ marginTop: 5 }}>Geolocations</ControlLabel><br />
-            {researchPlanMetadata?.geo_location && researchPlanMetadata?.geo_location.map((locationItem, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Longitude</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={locationItem?.geoLocationPoint?.longitude}
-                        placeholder="Longitude e.g. '71.43703438955458'"
-                        onChange={event => this.updateResearchPlanMetadataGeoLocation(index, 'longitude', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Latitude</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={locationItem?.geoLocationPoint?.latitude}
-                        placeholder="Latitude e.g. '-62.85961569975635'"
-                        onChange={event => this.updateResearchPlanMetadataGeoLocation(index, 'latitude', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={2}>
-                    <ControlLabel>Action</ControlLabel><br/>
-                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('geo_location', index)}>
-                      <i className="fa fa-trash-o" />
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-            <Row>
-              <Col smOffset={0} sm={12}>
-                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('geo_location')}>
-                  <i className="fa fa-plus" />
-                </Button>
-              </Col>
-            </Row>
-
-            <ControlLabel style={{ marginTop: 5 }}>Funding References</ControlLabel>
-            {researchPlanMetadata?.funding_reference && researchPlanMetadata?.funding_reference.map((fundingReferenceItem, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Funder Name</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={fundingReferenceItem?.funderName}
-                        placeholder="Funder Name e.g. 'Gordon and Betty Moore Foundation'"
-                        onChange={event => this.updateResearchPlanMetadataArrayItem('funding_reference', index, 'funderName', event.target.value)}
-                        />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={5}>
-                    <FormGroup>
-                      <ControlLabel>Funder Identifier</ControlLabel>
-                      <FormControl
-                        type="text"
-                        value={fundingReferenceItem?.funderIdentifier}
-                        placeholder="Funder Identifier e.g. 'https://doi.org/10.13039/100000936'"
-                        onChange={event => this.updateResearchPlanMetadataArrayItem('funding_reference', index, 'funderIdentifier', event.target.value)}
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={2}>
-                    <ControlLabel>Action</ControlLabel><br/>
-                    <Button bsStyle="danger" className="pull-right" bsSize="small" onClick={() => this.removeResearchPlanMetadataArrayItem('funding_reference', index)}>
-                      <i className="fa fa-trash-o" />
-                    </Button>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-            <Row>
-              <Col smOffset={0} sm={12}>
-                <Button className="pull-right" bsStyle="success" bsSize="small" onClick={() => this.addResearchPlanMetadataArrayItem('funding_reference')}>
-                  <i className="fa fa-plus" />
-                </Button>
-              </Col>
-            </Row>
-
-            <FormGroup controlId="metadataFormState">
-              <ControlLabel>State</ControlLabel>
-              <FormControl
-                componentClass="select"
-                value={researchPlanMetadata?.data_cite_state}
-                onChange={event => this.updateResearchPlanMetadataDataCiteState(event.target.value)}
-                inputRef={(m) => { this.dataCiteState = m; }}
-              >
-                <option value="draft">Draft</option>
-                <option value="registered">Registered</option>
-                <option value="findable">Findable</option>
-              </FormControl>
-            </FormGroup>
-            <FormGroup controlId="metadataFormURL">
-              <ControlLabel>URL</ControlLabel>
-              <FormControl
-                type="text"
-                defaultValue={researchPlanMetadata?.url}
-                inputRef={(m) => { this.url = m; }}
-                placeholder="https://<researchplanmetadata.url>"
-              />
-            </FormGroup>
-            <FormGroup controlId="metadataFormLandingPage">
-              <ControlLabel>Landing Page</ControlLabel>
-              <FormControl
-                type="text"
-                defaultValue={researchPlanMetadata?.landing_page}
-                inputRef={(m) => { this.landing_page = m; }}
-                placeholder="https://<researchplanmetadata.landing.page>"
-              />
-            </FormGroup>
-
-            {/* Disabled Attributes, display only */}
-            <FormGroup controlId="metadataFormDOI">
-              <ControlLabel>DOI</ControlLabel>&nbsp;&nbsp;
-              <FormControl
-                type="text"
-                defaultValue={researchPlanMetadata?.doi}
-                placeholder="DOI"
-                readOnly
-              />
-            </FormGroup>
-            <FormGroup controlId="metadataFormPublicationYear">
-              <ControlLabel>Publication Year</ControlLabel>
-              <FormControl
-                type="number"
-                defaultValue={researchPlanMetadata?.publication_year}
-                inputRef={(m) => { this.publication_year = m; }}
-                placeholder="Publication Year"
-                readOnly
-              />
-            </FormGroup>
-            { researchPlanMetadata?.dates ? <ControlLabel style={{ marginTop: 5 }}>Dates</ControlLabel>: '' }
-            { researchPlanMetadata?.dates && researchPlanMetadata?.dates.map((dateItem, index) => (
-              <div key={index}>
-                <Row>
-                  <Col smOffset={0} sm={6}>
-                    <FormGroup>
-                      <ControlLabel>Date</ControlLabel>
-                      <FormControl
-                        type="text"
-                        defaultValue={dateItem.date}
-                        placeholder="Date"
-                        readOnly
-                        />
-                    </FormGroup>
-                  </Col>
-                  <Col smOffset={0} sm={6}>
-                    <FormGroup>
-                      <ControlLabel>DateType</ControlLabel>
-                      <FormControl
-                        type="text"
-                        defaultValue={dateItem.dateType}
-                        placeholder="DateType"
-                        readOnly
-                      />
-                    </FormGroup>
-                  </Col>
-                </Row>
-              </div>
-            ))}
-
-            <FormGroup>
-              <Button className="pull-right" bsStyle="success" style={{ marginTop: 20 }} onClick={() => this.saveResearchPlanMetadata()}>
-                Save Metadata
-              </Button>
-            </FormGroup>
-
-          </Form>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-ResearchPlansMetadata.propTypes = {
-  parentResearchPlan: PropTypes.object.isRequired,
-  parentResearchPlanMetadata: PropTypes.object
-};
-
diff --git a/app/packs/src/components/DeviceAnalysisDetails.js b/app/packs/src/components/DeviceAnalysisDetails.js
deleted file mode 100644
index 9639c69df..000000000
--- a/app/packs/src/components/DeviceAnalysisDetails.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react'
-import {Panel , ButtonToolbar, Button, OverlayTrigger, Tooltip} from 'react-bootstrap'
-import DeviceSampleContainer from './DeviceSampleContainer'
-import ElementActions from './actions/ElementActions'
-import DetailActions from './actions/DetailActions'
-import AnalysisNMR from './AnalysisNMR'
-
-const DeviceAnalysisDetails = ({analysis, toggleFullScreen}) => {
-  return (
-    <Panel
-      className='panel-detail'
-      bsStyle={analysis.isPendingToSave ? 'info' : 'primary'}
-    >
-      <Panel.Heading>
-        {
-          <Header
-            analysis={analysis}
-            toggleFullScreen={toggleFullScreen}
-          />
-        }
-      </Panel.Heading>
-      <Panel.Body>
-        <MainContent
-          analysis={analysis}
-        />
-      </Panel.Body>
-    </Panel>
-  )
-}
-
-export default DeviceAnalysisDetails
-
-const Header = ({ analysis, toggleFullScreen }) => {
-  return (
-    <div>
-      {analysis.title}
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="closeReaction">Close</Tooltip>}
-      >
-        <Button
-          bsStyle="danger"
-          bsSize="xsmall"
-          className="button-right"
-          onClick={() => DetailActions.close(analysis)}
-        >
-          <i className="fa fa-times" />
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
-      >
-        <Button
-          bsStyle="info"
-          bsSize="xsmall"
-          className="button-right"
-          onClick={() => toggleFullScreen()}
-        >
-          <i className="fa fa-expand" />
-        </Button>
-      </OverlayTrigger>
-    </div>
-  );
-};
-
-const MainContent = ({analysis}) => {
-  switch(analysis.analysisType) {
-    case 'NMR':
-      return <AnalysisNMR analysis={analysis} />
-      break
-    default:
-      return <div>Device-Analysis not found!</div>
-  }
-}
diff --git a/app/packs/src/components/DeviceDetails.js b/app/packs/src/components/DeviceDetails.js
deleted file mode 100644
index 54ca63dab..000000000
--- a/app/packs/src/components/DeviceDetails.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react'
-import {Panel, PanelGroup , ButtonToolbar, Button, OverlayTrigger, Tooltip} from 'react-bootstrap'
-import DeviceSampleContainer from './DeviceSampleContainer'
-import ElementActions from './actions/ElementActions'
-import DetailActions from './actions/DetailActions'
-import DeviceManagement from './DeviceManagement'
-
-
-const DeviceDetails = ({device, toggleFullScreen}) => {
-  return (
-    <Panel
-      className='panel-detail'
-      bsStyle={device.isPendingToSave ? 'info' : 'primary'}
-    >
-      <Panel.Heading>
-        {<Header device={device} toggleFullScreen={toggleFullScreen}/>}
-      </Panel.Heading>
-      <Panel.Body>
-      <PanelGroup  defaultActiveKey="0" accordion>
-        <Panel eventKey="1">
-          <Panel.Heading>
-            <Panel.Title toggle>
-              Device Management
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Body collapsible="true">
-            <DeviceManagement />
-          </Panel.Body>
-        </Panel>
-      </PanelGroup>
-
-      <ButtonToolbar>
-        <Button bsStyle="primary" onClick={() => DetailActions.close(device)}>
-          Close
-        </Button>
-        <Button bsStyle="warning" onClick={() => handleSubmit(device)}>
-          Save
-        </Button>
-      </ButtonToolbar>
-      </Panel.Body>
-    </Panel>
-  )
-}
-
-export default DeviceDetails
-
-const handleSubmit = (device) => {
-  device.updateChecksum()
-  ElementActions.saveDevice(device)
-}
-
-const Header = ({device, toggleFullScreen}) => {
-  return (
-    <div>
-      {device.title}
-      <OverlayTrigger placement="bottom"
-          overlay={<Tooltip id="closeReaction">Close Device</Tooltip>}>
-        <Button bsStyle="danger" bsSize="xsmall" className="button-right"
-            onClick={() => DetailActions.close(device)}>
-          <i className="fa fa-times"></i>
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger placement="bottom"
-          overlay={<Tooltip id="saveReaction">Save Device</Tooltip>}>
-        <Button bsStyle="warning" bsSize="xsmall" className="button-right"
-            onClick={() => handleSubmit(device)}>
-          <i className="fa fa-floppy-o "></i>
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger placement="bottom"
-          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
-      <Button bsStyle="info" bsSize="xsmall" className="button-right"
-        onClick={() => toggleFullScreen()}>
-        <i className="fa fa-expand"></i>
-      </Button>
-      </OverlayTrigger>
-    </div>
-  )
-}
diff --git a/app/packs/src/components/DeviceManagement.js b/app/packs/src/components/DeviceManagement.js
deleted file mode 100644
index 43599764f..000000000
--- a/app/packs/src/components/DeviceManagement.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { Component } from 'react'
-import connectToStores from 'alt-utils/lib/connectToStores'
-import {
-  PanelGroup, Panel, ButtonGroup, Button, ControlLabel, FormControl
-} from 'react-bootstrap';
-import ElementActions from 'src/stores/alt/actions/ElementActions'
-import UIActions from 'src/stores/alt/actions/UIActions'
-import ElementStore from 'src/stores/alt/stores/ElementStore'
-import UIStore from 'src/stores/alt/stores/UIStore'
-
-const DeviceManagement = ({ devices, activeAccordionDevice }) => {
-  const handleCloseDeviceManagement = () => {
-    UIActions.closeDeviceManagement()
-    const { currentCollection } = UIStore.getState()
-    if (currentCollection == null || currentCollection.label == 'All') {
-      Aviator.navigate(`/collection/all/${urlForCurrentElement()}`)
-    } else {
-      Aviator.navigate(`/collection/${currentCollection.id}/${urlForCurrentElement()}`)
-    }
-  }
-
-  const urlForCurrentElement = () => {
-    const { currentElement } = ElementStore.getState()
-    if (currentElement) {
-      if (currentElement.isNew) {
-        return `${currentElement.type}/new`
-      }
-      else {
-        return `${currentElement.type}/${currentElement.id}`
-      }
-    }
-    else {
-      return ''
-    }
-  }
-
-  return (
-    <div>
-      <h1
-        style={{ margin: 0, float: "left" }}
-      >
-        Device-Management
-      </h1>
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        style={{ margin: "10px" }}
-        onClick={() => handleCloseDeviceManagement()}
-      >
-        <i className="fa fa-times"></i>
-      </Button>
-      <AddDeviceButton
-        activeAccordionDevice={activeAccordionDevice}
-      />
-      <Devices
-        devices={devices}
-        activeAccordionDevice={activeAccordionDevice}
-      />
-    </div>
-  )
-}
-
-DeviceManagement.getStores = () => {
-  return [ElementStore]
-}
-
-DeviceManagement.getPropsFromStores = () => {
-  return ElementStore.getState().elements.devices
-}
-
-export default connectToStores(DeviceManagement)
-
-const Devices = ({ devices, activeAccordionDevice }) => {
-  const styleByDeviceState = (device) => {
-    return device.isNew || device.isEdited
-      ? "info"
-      : "default"
-  }
-  if (devices.length > 0) {
-    return (
-      <PanelGroup defaultActiveKey={0} activeKey={activeAccordionDevice} accordion>
-        {devices.map(
-          (device, key) =>
-            <Panel
-              eventKey={key}
-              key={key}
-              onClick={() => ElementActions.changeActiveAccordionDevice(key)}
-              bsStyle={styleByDeviceState(device)}
-            >
-              <Panel.Heading>{<DeviceHeader device={device} />}</Panel.Heading>
-              <Panel.Body>
-                <Device
-                  device={device}
-                />
-              </Panel.Body>
-            </Panel>
-        )}
-      </PanelGroup>
-    )
-  } else {
-    return (
-      <p>
-        There are currently no Devices.
-      </p>
-    )
-  }
-}
-
-const Device = ({ device }) => {
-  const styleBySelectedType = (type) => {
-    return device.types.includes(type)
-      ? "primary"
-      : "default"
-  }
-
-  const handleTypeClick = (type) => {
-    ElementActions.toggleDeviceType(device, type)
-  }
-
-  const handleSave = () => {
-    device.updateChecksum()
-    ElementActions.saveDevice(device)
-  }
-
-  const handleChangeDeviceProp = (prop, value) => {
-    ElementActions.changeDeviceProp(device, prop, value)
-  }
-
-  const bottomSpacer = {
-    marginBottom: "10px"
-  }
-
-  return (
-    <div>
-      <ControlLabel>Title</ControlLabel>
-      <FormControl
-        type="text"
-        value={device.title}
-        placeholder="Enter device-title.."
-        onChange={(e) => handleChangeDeviceProp("title", e.target.value)}
-        style={bottomSpacer}
-      />
-      <ControlLabel>Code</ControlLabel>
-      <FormControl
-        type="text"
-        value={device.code}
-        placeholder="Enter device-code.."
-        onChange={(e) => handleChangeDeviceProp("code", e.target.value)}
-        style={bottomSpacer}
-      />
-      <ControlLabel>Types</ControlLabel><br />
-      <ButtonGroup
-        style={bottomSpacer}
-      >
-        <Button
-          bsStyle={styleBySelectedType("NMR")}
-          onClick={() => handleTypeClick("NMR")}
-        >
-          NMR
-        </Button>
-        <Button
-          bsStyle={styleBySelectedType("EA")}
-          onClick={() => handleTypeClick("EA")}
-        >
-          EA
-        </Button>
-        <Button
-          bsStyle={styleBySelectedType("MS")}
-          onClick={() => handleTypeClick("MS")}
-        >
-          MS
-        </Button>
-        <Button
-          bsStyle={styleBySelectedType("IR")}
-          onClick={() => handleTypeClick("IR")}
-        >
-          IR
-        </Button>
-      </ButtonGroup>
-      <br />
-      <Button
-        style={{ marginTop: "5px" }}
-        onClick={(e) => handleSave()}
-      >
-        Save
-      </Button>
-    </div>
-  )
-}
-
-const DeviceHeader = ({ device, state, onChangeState }) => {
-  const handleRemoveDevice = (e) => {
-    if (confirm('Delete the Device?')) {
-      ElementActions.deleteDevice(device)
-    }
-    e.preventDefault()
-  }
-
-  return (
-    <div style={{
-      width: '100%',
-      cursor: "pointer"
-    }}>
-      {device.title}
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        className="button-right"
-        onClick={(e) => handleRemoveDevice(e)}
-      >
-        <i className="fa fa-trash"></i>
-      </Button>
-    </div>
-  )
-}
-
-const AddDeviceButton = () => {
-  return (
-    <p>
-      &nbsp;
-      <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => ElementActions.createDevice()}>
-        Add device
-      </Button>
-    </p>
-  )
-}
diff --git a/app/packs/src/components/DeviceSampleContainer.js b/app/packs/src/components/DeviceSampleContainer.js
deleted file mode 100644
index 359c7a83f..000000000
--- a/app/packs/src/components/DeviceSampleContainer.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react'
-import {DropTarget} from 'react-dnd'
-import DragDropItemTypes from './DragDropItemTypes'
-import ElementActions from './actions/ElementActions'
-import {ButtonGroup, Button} from 'react-bootstrap';
-import { chmoConversions } from './OlsComponent';
-
-const target = {
-  drop(props, monitor){
-    const {device} = props
-    const item = monitor.getItem()
-    const itemType = monitor.getItemType()
-    if (itemType == 'sample') {
-      ElementActions.addSampleToDevice(item.element, device)
-    }
-  },
-  canDrop(props, monitor){
-    const {materialGroup} = props
-    const item = monitor.getItem()
-    const itemType = monitor.getItemType()
-    if (itemType == 'sample') {
-      return true
-    }
-  }
-}
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-})
-
-const DeviceSampleContainer = ({device, isOver, canDrop, connectDropTarget}) => {
-  let style = {
-    marginBottom: "10px",
-    minHeight: "39px"
-  }
-  if (isOver && canDrop) {
-    style.borderStyle = 'dashed'
-    style.borderColor = '#337ab7'
-  } else if (canDrop) {
-    style.borderStyle = 'dashed'
-  }
-  return connectDropTarget(
-    <div>
-      <TypeButtonsHeader
-        device={device}
-        onTypeClick={(type) => ElementActions.openDeviceAnalysis(device, type)}
-      />
-      <div style={style}>
-        {device.samples.length > 0
-          ? device.samples.map((sample, key) => (
-            <DeviceSample
-              device={device}
-              sample={sample}
-              key={key}
-            />
-          ))
-          : <div>
-              There are currently no Samples associated with this Device.
-            </div>
-        }
-      </div>
-    </div>
-  )
-}
-
-export default DropTarget([DragDropItemTypes.SAMPLE], target, collect)(DeviceSampleContainer)
-
-const DeviceSample = ({sample, device}) => {
-  return (
-    <div
-      style={{display: "flex", marginBottom: "5px"}}
-    >
-      <Button
-        bsStyle={"danger"}
-        onClick={() => ElementActions.removeSampleFromDevice(sample, device)}
-      >
-        <i className="fa fa-trash-o"></i>
-      </Button>
-      <div
-        style={{
-          padding: "6px",
-          borderRadius: "4px",
-          border: "1px solid #ddd",
-          margin: "0 5px",
-          flex: 1
-        }}
-      >
-        {sample.shortLabel}
-      </div>
-      <TypeButtons
-        device={device}
-        sample={sample}
-        onTypeClick={(type) => ElementActions.toggleTypeOfDeviceSample(device, sample, type)}
-      />
-    </div>
-  )
-}
-
-const TypeButtonsHeader = ({device, onTypeClick}) => {
-  return (
-    <div
-      style={{display: "flex"}}
-    >
-      <div style={{flex: 1}}></div>
-      <ButtonGroup
-        style={{marginBottom: "5px"}}
-      >
-        <Button
-          bsStyle={"primary"}
-          disabled={isDisabled(device, chmoConversions.nmr_1h.value)}
-          onClick={() => onTypeClick(chmoConversions.nmr_1h.value)}
-        >
-          {chmoConversions.nmr_1h.label}
-        </Button>
-        <Button
-          bsStyle={"primary"}
-          disabled={isDisabled(device, chmoConversions.nmr_13c.value)}
-          onClick={() => onTypeClick(chmoConversions.nmr_13c.value)}
-        >
-          {chmoConversions.nmr_13c.label}
-        </Button>
-        <Button
-          bsStyle={"primary"}
-          disabled={isDisabled(device, chmoConversions.ea.value)}
-          onClick={() => onTypeClick(chmoConversions.ea.value)}
-        >
-          {chmoConversions.ea.label}
-        </Button>
-        <Button
-          bsStyle={"primary"}
-          disabled={isDisabled(device, chmoConversions.mass.value)}
-          onClick={() => onTypeClick(chmoConversions.mass.value)}
-        >
-          {chmoConversions.mass.label}
-        </Button>
-        <Button
-          bsStyle={"primary"}
-          disabled={isDisabled(device, chmoConversions.ir.value)}
-          onClick={() => onTypeClick(chmoConversions.ir.value)}
-        >
-          {chmoConversions.ir.label}
-        </Button>
-      </ButtonGroup>
-    </div>
-  )
-}
-
-const isDisabled = (device, type) => {
-  // TODO remove this after implementing other Analysis-Type-UIs
-  if (type === chmoConversions.ea.value || type === chmoConversions.mass.value || type === chmoConversions.ir.value) {
-    return true;
-  } else {
-    return !device.types.includes(type)
-  }
-}
-
-const TypeButtons = ({device, sample, onTypeClick}) => {
-  const labelBySampleType = (type) => (
-    sample.types.includes(type)
-      ? <i className="fa fa-check"></i>
-      : <i>&nbsp;</i>
-  )
-  return (
-    <ButtonGroup>
-      <Button
-        onClick={() => onTypeClick(chmoConversions.nmr_1h.value)}
-        disabled={isDisabled(device, chmoConversions.nmr_1h.value)}
-        style={{width: "57.91px"}}
-      >
-        {labelBySampleType(chmoConversions.nmr_1h.value)}
-      </Button>
-      <Button
-        onClick={() => onTypeClick(chmoConversions.nmr_13c.value)}
-        disabled={isDisabled(device, chmoConversions.nmr_13c.value)}
-        style={{ width: "57.91px" }}
-      >
-        {labelBySampleType(chmoConversions.nmr_13c.value)}
-      </Button>
-      <Button
-        onClick={() => onTypeClick(chmoConversions.ea.value)}
-        disabled={isDisabled(device, chmoConversions.ea.value)}
-        style={{width: "43.64px"}}
-      >
-        {labelBySampleType(chmoConversions.ea.value)}
-      </Button>
-      <Button
-        onClick={() => onTypeClick(chmoConversions.mass.value)}
-        disabled={isDisabled(device, chmoConversions.mass.value)}
-        style={{width: "47.28px"}}
-      >
-        {labelBySampleType(chmoConversions.mass.value)}
-      </Button>
-      <Button
-        onClick={() => onTypeClick(chmoConversions.ir.value)}
-        disabled={isDisabled(device, chmoConversions.ir.value)}
-        style={{width: "39.22px"}}
-      >
-        {labelBySampleType(chmoConversions.ir.value)}
-      </Button>
-    </ButtonGroup>
-  )
-}
diff --git a/app/packs/src/components/ElementAllCheckbox.js b/app/packs/src/components/ElementAllCheckbox.js
deleted file mode 100644
index 409aa7270..000000000
--- a/app/packs/src/components/ElementAllCheckbox.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react'
-
-import UIActions from 'src/stores/alt/actions/UIActions'
-
-export default class ElementAllCheckbox extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state =  {
-      showOptions: false,
-      currentOption: 2
-    }
-
-    this.options = ["current", "all", "none"]
-
-    this.toggleCheckbox = this.toggleCheckbox.bind(this)
-    this.showOptions = this.showOptions.bind(this)
-    this.selectAll = this.selectAll.bind(this)
-  }
-
-  toggleCheckbox(e) {
-    let {currentOption} = this.state
-    currentOption = (currentOption + 1) % 3
-
-    this.setState({currentOption: currentOption}, this.selectAll)
-
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  showOptions(e) {
-    this.setState({ showOptions: !this.state.showOptions })
-  }
-
-  selectAll(option) {
-    if (option == null) option = this.state.currentOption
-    let range = this.options[option]
-
-    let newChecked = !this.props.checked
-    let params = {
-      type: this.props.type,
-      range: range
-    }
-
-    if(newChecked) {
-      UIActions.checkAllElements(params)
-    } else {
-      UIActions.uncheckAllElements(params)
-    }
-
-    this.setState({ showOptions: false, currentOption: option })
-  }
-
-  render() {
-    let {showOptions, currentOption} = this.state
-    let {ui, type} = this.props
-
-    let checkMarkClass = "fa "
-    if (ui.checkedAll == true) {
-      checkMarkClass += "fa-check"
-    } else if (ui.checkedIds && ui.checkedIds.size > 0) {
-      checkMarkClass += "fa-minus"
-    }
-    let checkMark = (<i className={checkMarkClass}/>)
-
-    let optionStyle = {}
-    if (showOptions) {
-      optionStyle.display = "block"
-    } else {
-      optionStyle.display = "none"
-    }
-
-    return (
-      <div className="all-checkbox" onClick={this.showOptions}>
-        <div className="checkbox-dropdown">
-          <span className="span-checkbox" onClick={this.toggleCheckbox}>
-            {checkMark}
-          </span>
-          &nbsp;&nbsp;
-          <i className="fa fa-caret-down"/>
-        </div>
-        <div className="checkbox-options" style={optionStyle}>
-          <div onClick={() => this.selectAll(0)}>Current page</div>
-          <div onClick={() => this.selectAll(1)}>All pages</div>
-          <div onClick={() => this.selectAll(2)}>None</div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementAnalysesLabels.js b/app/packs/src/components/ElementAnalysesLabels.js
deleted file mode 100644
index 1183abca6..000000000
--- a/app/packs/src/components/ElementAnalysesLabels.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { Label, OverlayTrigger, Popover } from 'react-bootstrap';
-
-export default class ElementAnalysesLabels extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    }
-  }
-
-  render() {
-
-    return (
-      <div style={{ display: 'inline-block' }}
-        onClick={(e) => { e.stopPropagation() }}>
-        {this.analysesLabels(this.state.element)}
-      </div>
-    );
-  }
-
-
-
-  analysesLabels(element) {
-    if (!element.tag) return (<span />)
-    if (!element.tag.taggable_data) return (<span />)
-
-    let analyses = element.tag.taggable_data.analyses
-
-    if (!analyses) return (<span />)
-
-    let unconfirmedTitle = 'Unconfirmed Analysis'
-    if (analyses.Unconfirmed && Object.keys(analyses.unconfirmed).length > 1)
-      unconfirmedTitle = 'Unconfirmed Analyses'
-
-    let confirmedTitle = 'Confirmed Analysis'
-    if (analyses.Confirmed && Object.keys(analyses.confirmed).length > 1)
-      confirmedTitle = 'Confirmed Analyses'
-
-    return (
-      <div style={{ display: 'inline-block' }}>
-        {this.labelWithPopover(unconfirmedTitle, analyses.unconfirmed)}
-        {this.labelWithPopover(confirmedTitle, analyses.confirmed)}
-      </div>
-    )
-  }
-
-  labelWithPopover(title, labels) {
-    if (!labels) return (<span />)
-
-    let { element } = this.state
-    let experiment = <i className='fa fa-bar-chart' />
-
-    let label_popover = (
-      <Popover title={title} id={'labelpop' + element.id}>
-        {this.formatLabels(labels)}
-      </Popover>
-    )
-
-    let status = title.match(/Unconfirmed/)
-      ? <i className="fa fa-question" />
-      : <i className="fa fa-check" />
-    let total = Object.values(labels).reduce((a, b) => a + b, 0)
-
-    return (
-      <OverlayTrigger trigger="click" rootClose placement="left" overlay={label_popover}>
-        <span className="collection-label" key={element.id}>
-          <Label>
-            {experiment} {total} {status}
-          </Label>
-        </span>
-      </OverlayTrigger>
-    );
-  }
-
-  formatLabels(labels) {
-    const regExp = /\(([^)]+)\)/;
-    return Object.keys(labels).map((key) => {
-      let key_syn = (regExp.exec(key || '') || ['']).pop().trim();
-      if (key_syn === '') {
-        key_syn = (key || '').split('|').pop().trim();
-      };
-
-      return (
-        <span className="collection-label" key={key}>
-          <Label bsStyle='default' bsSize='xs'>
-            {key_syn || "Analysis type Unkown"} - {labels[key]}
-          </Label>
-        </span>
-      )
-    })
-  }
-}
diff --git a/app/packs/src/components/ElementCheckbox.js b/app/packs/src/components/ElementCheckbox.js
deleted file mode 100644
index 7500955e4..000000000
--- a/app/packs/src/components/ElementCheckbox.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import UIActions from 'src/stores/alt/actions/UIActions';
-
-export default class ElementCheckbox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: false,
-      element: props.element
-    }
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { element, checked } = nextProps;
-    this.setState({
-      element,
-      checked
-    });
-  }
-
-  updateCheckedStatus(element, state) {
-    let checked = this.isChecked(element, state);
-    this.setState({checked: checked});
-  }
-
-  toggleCheckbox() {
-    let newChecked = !this.props.checked;
-
-    if(newChecked) {
-      UIActions.checkElement(this.state.element);
-    } else {
-      UIActions.uncheckElement(this.state.element);
-    }
-  }
-
-  render() {
-    return (
-      <input
-        type="checkbox"
-        onChange={this.toggleCheckbox.bind(this)}
-        checked={this.props.checked}
-        className="element-checkbox"
-      />
-    );
-  }
-}
diff --git a/app/packs/src/components/ElementCollectionLabels.js b/app/packs/src/components/ElementCollectionLabels.js
deleted file mode 100644
index c12edfcbd..000000000
--- a/app/packs/src/components/ElementCollectionLabels.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-import { Label, OverlayTrigger, Popover, Button } from 'react-bootstrap';
-import UserStore from 'src/stores/alt/stores/UserStore';
-
-export default class ElementCollectionLabels extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    };
-
-    this.handleOnClick = this.handleOnClick.bind(this);
-    this.preventOnClick = this.preventOnClick.bind(this);
-  }
-
-  handleOnClick(label, e, is_synchronized) {
-    e.stopPropagation();
-
-    let collectionUrl = is_synchronized ? "/scollection" : "/collection"
-    let url = collectionUrl + "/" + label.id + "/" +
-              this.state.element.type + "/" + this.state.element.id
-
-    Aviator.navigate(url);
-  }
-
-  preventOnClick(e) {
-    e.stopPropagation();
-  }
-
-  labelStyle(label) {
-    return label.is_shared ? "warning" : "info";
-  }
-
-  formatLabels(labels, is_synchronized) {
-
-    return labels.map((label, index) => {
-      if (is_synchronized === true && label.isOwner === true) {
-        return (
-          <span className="collection-label" key={index}>
-            <Button disabled bsStyle="default" bsSize="xs">
-              {label.name}
-            </Button>
-            &nbsp;
-          </span>
-        );
-      }
-      return (
-        <span className="collection-label" key={index}>
-          <Button bsStyle="default" bsSize="xs" onClick={e => this.handleOnClick(label, e, is_synchronized)}>
-            {label.name}
-          </Button>
-          &nbsp;
-        </span>
-      );
-    });
-  }
-
-  renderCollectionsLabels(collectionName, labels, is_synchronized = false) {
-    if (labels.length == 0) return <span />;
-
-    return (
-      <div>
-        <h3 className="popover-title">{collectionName}</h3>
-        <div className="popover-content">
-          {this.formatLabels(labels, is_synchronized)}
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { element } = this.state;
-
-    if (!element.tag || !element.tag.taggable_data ||
-        !element.tag.taggable_data.collection_labels)
-      return (<span />);
-
-    let { currentUser } = UserStore.getState();
-    currentUser = currentUser || {};
-
-    let placement = 'left';
-    if (this.props.placement) placement = this.props.placement;
-
-    let collection_labels = element.tag.taggable_data.collection_labels;
-    let shared_labels = [];
-    let labels = [];
-    let sync_labels = [];
-    collection_labels.map((label) => {
-      if (label) {
-        if (label.is_shared == false && label.is_synchronized == false && label.user_id == currentUser.id) {
-          labels.push(label);
-        } else if (label.is_shared == true && label.is_synchronized == false &&
-          (label.user_id == currentUser.id || label.shared_by_id == currentUser.id)) {
-          shared_labels.push(label);
-        } else if (label.is_synchronized == true && (label.user_id == currentUser.id || label.shared_by_id == currentUser.id)) {
-          let isOwner = false;
-          if (label.shared_by_id === currentUser.id) {
-            isOwner = true;
-          }
-          sync_labels.push({ ...label, isOwner });
-        }
-      }
-    });
-
-    let total_shared_collections = shared_labels.length + sync_labels.length;
-
-    if (labels.length == 0 && total_shared_collections == 0)
-      return (<span />);
-
-    let collectionOverlay = (
-      <Popover className="collection-overlay" id="element-collections">
-        {this.renderCollectionsLabels("My Collections", labels)}
-        {this.renderCollectionsLabels("Shared Collections", shared_labels)}
-        {this.renderCollectionsLabels("Synchronized Collections", sync_labels, true)}
-      </Popover>
-    );
-
-    return (
-      <div style={{display: "inline-block"}} onClick={this.preventOnClick}>
-        <OverlayTrigger
-          trigger="click"
-          rootClose
-          placement={placement}
-          overlay={collectionOverlay}
-        >
-          <span className="collection-label" key={element.id}>
-            <Label>
-              <i className="fa fa-list" />
-              {" " + labels.length} {" - "}
-              {total_shared_collections + " "} <i className="fa fa-share-alt" />
-            </Label>
-          </span>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/ElementContainer.js b/app/packs/src/components/ElementContainer.js
deleted file mode 100644
index 87aacbc83..000000000
--- a/app/packs/src/components/ElementContainer.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-
-const listSource = { beginDrag(props) { return props; } };
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const ElementContainer = ({ connectDragSource, sourceType }) => {
-  if (sourceType === DragDropItemTypes.SAMPLE || sourceType === DragDropItemTypes.MOLECULE) {
-    return connectDragSource(
-      <span className="fa fa-arrows dnd-arrow-enable text-info" />,
-      { dropEffect: 'copy' },
-    );
-  } else if (sourceType === DragDropItemTypes.GENERALPROCEDURE) {
-    return connectDragSource(<span className="fa fa-home dnd-arrow-enable text-info" />);
-  } else if (sourceType === DragDropItemTypes.WELLPLATE ||
-             sourceType === DragDropItemTypes.REACTION ||
-             sourceType === DragDropItemTypes.RESEARCH_PLAN) {
-    return connectDragSource(<span className="fa fa-arrows dnd-arrow-enable text-info" />);
-  } else if (sourceType === DragDropItemTypes.ELEMENT) {
-    return connectDragSource(<span className="fa fa-arrows dnd-arrow-enable text-info" />);
-  }
-  return <span className="fa fa-arrows dnd-arrow-disable" />;
-};
-
-export default DragSource(props => props.sourceType, listSource, collectSource)(ElementContainer);
-
-ElementContainer.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-  sourceType: PropTypes.string.isRequired,
-};
diff --git a/app/packs/src/components/ElementDetailSortTab.js b/app/packs/src/components/ElementDetailSortTab.js
deleted file mode 100644
index fd6be4bdc..000000000
--- a/app/packs/src/components/ElementDetailSortTab.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable react/prop-types */
-/* eslint-disable react/require-default-props */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
-import Immutable from 'immutable';
-import _ from 'lodash';
-import UserStore from './stores/UserStore';
-import UserActions from './actions/UserActions';
-import TabLayoutContainer from './TabLayoutContainer';
-
-const getNodeText = (node) => {
-  if (['string', 'number'].includes(typeof node)) return node;
-  if (node instanceof Array) return node.map(getNodeText).join('');
-  if (typeof node === 'object' && node) {
-    if (node.props.children) {
-      return getNodeText(node.props.children);
-    } else if (node.props.alt) {
-      return getNodeText(node.props.alt);
-    }
-    return '';
-  }
-  return '';
-};
-
-const getArrayFromLayout = (layout, availableTabs) => {
-  const layoutKeys = Object.keys(layout);
-  const enabled = availableTabs.filter(val => layoutKeys.includes(val));
-  const leftover = availableTabs.filter(val => !layoutKeys.includes(val));
-  const visible = [];
-  const hidden = [];
-
-  enabled.forEach((key) => {
-    const order = layout[key];
-    if (order < 0) { hidden[Math.abs(order)] = key; }
-    if (order > 0) { visible[order] = key; }
-  });
-
-  leftover.forEach(key => hidden.push(key));
-
-  let first = null;
-  if (visible.length === 0) {
-    first = hidden.filter(n => n !== undefined)[0];
-    if (first) {
-      visible.push(first);
-    }
-  }
-  if (hidden.length === 0) {
-    hidden.push('hidden');
-  }
-  return {
-    visible: Immutable.List(visible.filter(n => n !== undefined)),
-    hidden: Immutable.List(hidden.filter(n => (n !== undefined && n !== first)))
-  };
-};
-
-
-export default class ElementDetailSortTab extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: Immutable.List(),
-      hidden: Immutable.List(),
-    };
-
-    this.type = props.type;
-
-    this.onChangeUser = this.onChangeUser.bind(this);
-    this.handleOnLayoutChanged = this.handleOnLayoutChanged.bind(this);
-
-    UserActions.fetchCurrentUser();
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChangeUser);
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onChangeUser);
-  }
-
-  onChangeUser(state) {
-    const layout = (state.profile && state.profile.data && state.profile.data[`layout_detail_${this.type}`]) || {};
-    const { visible, hidden } = getArrayFromLayout(layout, this.props.availableTabs);
-
-    this.setState(
-      { visible, hidden },
-      () => this.props.onTabPositionChanged(visible)
-    );
-  }
-
-  handleOnLayoutChanged() {
-    this.updateLayout();
-  }
-
-  updateLayout() {
-    const { visible, hidden } = this.layout.state;
-    const layout = {};
-
-    visible.forEach((value, index) => {
-      layout[value] = (index + 1);
-    });
-    hidden.filter(val => val !== 'hidden').forEach((value, index) => {
-      layout[value] = (-index - 1);
-    });
-
-    const userProfile = UserStore.getState().profile;
-    const layoutName = `data.layout_detail_${this.type}`;
-    _.set(userProfile, layoutName, layout);
-    UserActions.updateUserProfile(userProfile);
-  }
-
-  render() {
-    const {
-      visible, hidden
-    } = this.state;
-    const popoverSettings = (
-      <Popover
-        className="collection-overlay"
-        id="popover-layout"
-        style={{ maxWidth: 'none', width: 'auto' }}
-      >
-        <div>
-          <h3 className="popover-title">Tabs Layout</h3>
-          <div className="popover-content">
-            <TabLayoutContainer
-              visible={visible}
-              hidden={hidden}
-              tabTitles={this.props.tabTitles}
-              isElementDetails
-              ref={(n) => { this.layout = n; }}
-            />
-          </div>
-        </div>
-      </Popover>
-    );
-    return (
-      <OverlayTrigger
-        trigger="click"
-        placement="left"
-        overlay={popoverSettings}
-        rootClose
-        onExit={this.handleOnLayoutChanged}
-      >
-        <Button bsStyle="info" bsSize="xsmall" className="button-right">
-          <i className="fa fa-sliders" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
-
-ElementDetailSortTab.propTypes = {
-  onTabPositionChanged: PropTypes.func,
-  availableTabs: PropTypes.arrayOf(PropTypes.string),
-  tabTitles: PropTypes.object
-};
diff --git a/app/packs/src/components/ElementDetails.js b/app/packs/src/components/ElementDetails.js
deleted file mode 100644
index 029c8eacf..000000000
--- a/app/packs/src/components/ElementDetails.js
+++ /dev/null
@@ -1,318 +0,0 @@
-/* eslint-disable react/destructuring-assignment */
-import ComputeTaskContainer from 'src/apps/mydb/elements/details/computeTasks/ComputeTaskContainer';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import DeviceDetails from 'src/apps/mydb/elements/details/devices/DeviceDetails';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import FormatContainer from 'src/apps/mydb/elements/details/formats/FormatContainer';
-import GenericElDetails from 'src/components/generic/GenericElDetails';
-import GraphContainer from 'src/apps/mydb/elements/details/GraphContainer';
-import LiteratureDetails from 'src/apps/mydb/elements/details/LiteratureDetails';
-import MetadataContainer from 'src/components/metadata/MetadataContainer';
-import PredictionContainer from 'src/apps/mydb/elements/details/predictions/PredictionContainer';
-import React, { Component } from 'react';
-import ReactionDetails from 'src/apps/mydb/elements/details/reactions/ReactionDetails';
-import ReportContainer from 'src/apps/mydb/elements/details/reports/ReportContainer';
-import ResearchPlanDetails from 'src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails';
-import SampleDetails from 'src/apps/mydb/elements/details/samples/SampleDetails';
-import ScreenDetails from 'src/apps/mydb/elements/details/screens/ScreenDetails';
-import StickyDiv from 'react-stickydiv';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import WellplateDetails from 'src/apps/mydb/elements/details/wellplates/WellplateDetails';
-import {
-  Tabs, Tab, Label, Button
-} from 'react-bootstrap';
-
-import { getPublicationId } from 'src/components/chemrepo/publication-utils';
-
-const tabInfoHash = {
-  metadata: {
-    title: 'Metadata',
-    iconEl: (
-      <span>
-        <i className="fa fa-file-text-o" />
-        &nbsp;&nbsp;
-        <i className="fa fa-book" />
-      </span>
-    )
-  },
-  report: {
-    title: 'Report',
-    iconEl: (
-      <span>
-        <i className="fa fa-file-text-o" />
-        &nbsp;&nbsp;
-        <i className="fa fa-pencil" />
-      </span>
-    )
-  },
-  prediction: {
-    title: 'Synthesis Prediction',
-    iconEl: (
-      <span>
-        <i className="fa fa-percent" />
-      </span>
-    )
-  },
-  deviceCtrl: {
-    title: 'Measurement',
-    iconEl: (
-      <span>
-        <i className="fa fa-bar-chart" />
-        <i className="fa fa-cogs" />
-      </span>
-    )
-  },
-  format: {
-    title: 'Format',
-    iconEl: (
-      <span>
-        <i className="fa fa-magic" />
-      </span>
-    )
-  },
-  graph: {
-    title: 'Graph',
-    iconEl: (
-      <span>
-        <i className="fa fa-area-chart" />
-      </span>
-    )
-  },
-  task: {
-    title: 'Task',
-    iconEl: (
-      <span>
-        <i className="fa fa-wrench" />
-      </span>
-    )
-  },
-  literature_map: {
-    title: 'Literature',
-    iconEl: (
-      <span>
-        <i className="fa fa-book" aria-hidden="true" />
-      </span>
-    )
-  }
-};
-
-export default class ElementDetails extends Component {
-  constructor(props) {
-    super(props);
-    const { selecteds, activeKey, deletingElement } = ElementStore.getState();
-    this.state = {
-      offsetTop: 70,
-      fullScreen: false,
-      selecteds,
-      activeKey,
-      deletingElement,
-      showTooltip: false,
-      genericEls: UserStore.getState().genericEls || [],
-    };
-
-    this.handleResize = this.handleResize.bind(this);
-    this.toggleFullScreen = this.toggleFullScreen.bind(this);
-    this.toggleCommentScreen = this.toggleCommentScreen.bind(this);
-    this.onDetailChange = this.onDetailChange.bind(this);
-    this.checkSpectraMessage = this.checkSpectraMessage.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-    window.scrollTo(window.scrollX, window.scrollY + 1);
-    // imitate scroll event to make StickyDiv element visible in current area
-    ElementStore.listen(this.onDetailChange);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return true;
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-    ElementStore.unlisten(this.onDetailChange);
-  }
-
-  toggleCommentScreen(t) {
-    this.setState({ fullScreen: t });
-  }
-
-  handleResize() {
-    const windowHeight = window.innerHeight || 1;
-    if (this.state.fullScreen || windowHeight < 500) {
-      this.setState({ offsetTop: 0 });
-    } else {
-      this.setState({ offsetTop: 70 });
-    }
-  }
-
-  onDetailChange(state) {
-    const {
-      selecteds, activeKey, deletingElement, spectraMsg
-    } = state;
-    this.setState((prevState) => ({
-      ...prevState, selecteds, activeKey, deletingElement
-    }));
-    this.checkSpectraMessage(spectraMsg);
-  }
-
-  toggleFullScreen() {
-    const { fullScreen } = this.state;
-    this.setState({ fullScreen: !fullScreen });
-  }
-
-  checkSpectraMessage(spectraMsg) {
-    if (spectraMsg) {
-      const { showedSpcMsgID } = this.state;
-      if (!showedSpcMsgID || showedSpcMsgID !== spectraMsg.message_id) {
-        this.setState({ showedSpcMsgID: spectraMsg.message_id });
-        alert(spectraMsg.content.data);
-      }
-    }
-  }
-
-  content(_el) {
-    const el = _el;
-    el.sealed = getPublicationId(el) ? true : false;
-
-    if (el && el.klassType === 'GenericEl' && el.type != null) {
-      return <GenericElDetails genericEl={el} toggleFullScreen={this.toggleFullScreen} />;
-    }
-
-    switch (el.type) {
-      case 'sample':
-        return (
-          <SampleDetails
-            sample={el}
-            toggleFullScreen={this.toggleFullScreen}
-            toggleCommentScreen={this.toggleCommentScreen}
-            fullScreen={this.state.fullScreen}
-          />
-        );
-      case 'reaction':
-        return (
-          <ReactionDetails
-            reaction={el}
-            toggleFullScreen={this.toggleFullScreen}
-            toggleCommentScreen={this.toggleCommentScreen}
-            fullScreen={this.state.fullScreen}
-          />
-        );
-      case 'wellplate':
-        return (
-          <WellplateDetails
-            wellplate={el}
-            toggleFullScreen={this.toggleFullScreen}
-          />
-        );
-      case 'screen':
-        return (
-          <ScreenDetails
-            screen={el}
-            toggleFullScreen={this.toggleFullScreen}
-          />
-        );
-      case 'deviceCtrl':
-        return (
-          <DeviceDetails
-            device={el}
-            toggleFullScreen={this.toggleFullScreen}
-          />
-        );
-      case 'research_plan':
-        return (
-          <ResearchPlanDetails
-            researchPlan={el}
-            toggleFullScreen={this.toggleFullScreen}
-          />
-        );
-      case 'metadata':
-        return <MetadataContainer metadata={el} />;
-      case 'report':
-        return <ReportContainer report={el} />;
-      case 'prediction':
-        return <PredictionContainer prediction={el} />;
-      case 'format':
-        return <FormatContainer format={el} />;
-      case 'graph':
-        return <GraphContainer graph={el} />;
-      case 'task':
-        return <ComputeTaskContainer task={el} />;
-      case 'literature_map':
-        return <LiteratureDetails literatureMap={el} />;
-      default:
-        return (
-          <div style={{ textAlign: 'center' }}>
-            <br />
-            <h1>{el.id.substring(el.id.indexOf('error:') + 6)}</h1>
-            <h3><i className="fa fa-eye-slash fa-5x" /></h3>
-            <Button
-              bsStyle="danger"
-              onClick={() => DetailActions.close(el, true)}
-            >
-              Close this window
-            </Button>
-          </div>
-        );
-    }
-  }
-
-  tabTitle(el, elKey) {
-    const bsStyle = el.isPendingToSave ? 'info' : 'primary';
-    const focusing = elKey === this.state.activeKey;
-
-    let iconElement = (<i className={`icon-${el.type}`} />);
-
-    const tab = tabInfoHash[el.type] || {};
-    const title = tab.title || el.title();
-    if (tab.iconEl) { iconElement = tab.iconEl; }
-    if (el.element_klass) { iconElement = (<i className={`${el.element_klass.icon_name}`} />); }
-    const icon = focusing ? (iconElement) : (<Label bsStyle={bsStyle || ''}>{iconElement}</Label>);
-    return (
-      <div>
-        {icon}
-        &nbsp;&nbsp;&nbsp;
-        {title}
-        &nbsp;
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      fullScreen, selecteds, activeKey, offsetTop
-    } = this.state;
-    const fScrnClass = fullScreen ? 'full-screen' : 'normal-screen';
-
-    const selectedElements = selecteds.map((el, i) => {
-      if (!el) return (<span />);
-      const key = `${el.type}-${el.id}`;
-      return (
-        <Tab
-          key={key}
-          eventKey={i}
-          unmountOnExit
-          title={this.tabTitle(el, i)}
-        >
-          {this.content(el)}
-        </Tab>
-      );
-    });
-
-    return (
-      <div>
-        <StickyDiv zIndex={fullScreen ? 9 : 2} offsetTop={offsetTop}>
-          <div className={fScrnClass}>
-            <Tabs
-              id="elements-tabs"
-              activeKey={activeKey}
-              onSelect={DetailActions.select}
-            >
-              {selectedElements}
-            </Tabs>
-          </div>
-        </StickyDiv>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/ElementReactionLabels.js b/app/packs/src/components/ElementReactionLabels.js
deleted file mode 100644
index bd47b59b2..000000000
--- a/app/packs/src/components/ElementReactionLabels.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import {Label, Modal, Button} from 'react-bootstrap';
-
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-
-export default class ElementReactionLabels extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showWarning: false,
-      clicked: false
-    };
-    let { element } = props;
-
-    this.handleOnClick = this.handleOnClick.bind(this);
-    this.closeWarning = this.closeWarning.bind(this);
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    ElementStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    if (this.state.showWarning != state.elementWarning) {
-      this.setState({
-        showWarning: state.elementWarning
-      });
-    }
-  }
-
-  closeWarning() {
-    this.setState({showWarning: false });
-    ElementActions.closeWarning();
-  }
-
-  handleOnClick(e) {
-    let { element } = this.props;
-
-    ElementActions.tryFetchReactionById(element.tag.taggable_data.reaction_id);
-    this.setState({ clicked: true });
-    e.stopPropagation();
-  }
-
-  render() {
-    let { element } = this.props;
-
-    if (!element.tag || !element.tag.taggable_data ||
-        !element.tag.taggable_data.reaction_id)
-      return (<span />);
-
-    const { showWarning, clicked } = this.state;
-
-    const reaction = <i className="icon-reaction" />;
-
-
-    return (
-      <div style={{display: 'inline-block'}}>
-        <div onClick={this.handleOnClick}>
-          <span className="collection-label" key={element.id}>
-            <Label>{reaction}</Label>
-          </span>
-        </div>
-        {/* <div style={{clear: 'both'}} /> */}
-        <div className="center">
-          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
-            <Modal.Header closeButton>
-              <Modal.Title>No Access to Element</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              Sorry, you cannot access this Reaction.
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={this.closeWarning}>Close</Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementWellplateLabels.js b/app/packs/src/components/ElementWellplateLabels.js
deleted file mode 100644
index 6b0762fd1..000000000
--- a/app/packs/src/components/ElementWellplateLabels.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import { Label, Modal, Button } from 'react-bootstrap';
-
-import ElementActions from './actions/ElementActions';
-import ElementStore from './stores/ElementStore';
-
-export default class ElementWellplateLabels extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showWarning: false,
-      clicked: false
-    }
-
-    let { element } = props;
-
-    this.handleOnClick = this.handleOnClick.bind(this)
-    this.closeWarning = this.closeWarning.bind(this)
-
-    this.onStoreChange = this.onStoreChange.bind(this)
-  }
-
-  componentDidMount() {
-    ElementStore.listen(this.onStoreChange)
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.onStoreChange)
-  }
-
-  onStoreChange(state) {
-    if (this.state.showWarning != state.elementWarning) {
-      this.setState({
-        showWarning: state.elementWarning
-      })
-    }
-  }
-
-  closeWarning() {
-    this.setState({ showWarning: false });
-    ElementActions.closeWarning();
-  }
-
-  handleOnClick(e) {
-    let { element } = this.props;
-
-    ElementActions.tryFetchWellplateById(element.tag.taggable_data.wellplate_id)
-    this.setState({ clicked: true });
-    e.stopPropagation();
-  }
-
-  render() {
-    let { element } = this.props;
-
-    if (!element.tag || !element.tag.taggable_data ||
-        !element.tag.taggable_data.wellplate_id) {
-      return (<span />);
-    }
-
-    const { showWarning, clicked } = this.state;
-
-    const wellplate = <i className='icon-wellplate'/>
-
-    return (
-      <div style={{ display: 'inline-block' }}>
-        <div onClick={this.handleOnClick}>
-          <span className="collection-label" key={element.id}>
-            <Label>{wellplate}</Label>
-          </span>
-        </div>
-        {/* <div style={{clear: 'both'}} /> */}
-        <div className="center">
-          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
-            <Modal.Header closeButton>
-              <Modal.Title>No Access to Element</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              Sorry, you cannot access this Wellplate.
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={this.closeWarning}>Close</Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementalComposition.js b/app/packs/src/components/ElementalComposition.js
deleted file mode 100644
index 7b62f09e5..000000000
--- a/app/packs/src/components/ElementalComposition.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-
-
-export default class ElementalComposition extends React.Component {
-
-  elementsList(elemental_composition) {
-    let keys = Object.keys(elemental_composition.data);
-    if (keys.length == 0) {
-      return (
-        <p>
-          Sorry, it was not possible to calculate the elemental
-          compositon. Check data please.
-        </p>
-      )
-    }
-
-    let elements = [];
-
-    keys.map(function (key, index) {
-      let value = elemental_composition.data[key];
-      elements.push(
-        <span className="data-item" key={key}>
-          <strong>
-            {key}
-          </strong>
-          &nbsp;
-          &nbsp;
-          {Number(value).toFixed(2)}
-          &nbsp;
-          &nbsp;
-        </span>
-      );
-    });
-
-    return elements;
-  }
-
-  relatedLoading(elemental_composition) {
-    if (!elemental_composition.loading)
-      return false;
-
-    return (
-      <td className="loading" style={{ textAlign: "left" }} width="13%">
-        {elemental_composition.loading.toFixed(2)}
-      </td>
-    )
-  }
-
-  compositonTableHeader(elemental_composition) {
-    return (
-      <thead>
-        <tr>
-          <th>
-            <span>{elemental_composition.description}</span>
-          </th>
-
-          <th className="loading">
-            {elemental_composition.loading ? 'Loading (mmol/g)' : ''}
-          </th>
-        </tr>
-      </thead>
-    )
-  }
-
-  render() {
-    let { elemental_composition, formula_changed } = this.props;
-
-    return (
-      <table className="elemental-composition">
-        {this.compositonTableHeader(elemental_composition)}
-
-        <tbody>
-          <tr>
-            <td className="form-inline">
-              {this.elementsList(elemental_composition, formula_changed)}
-            </td>
-            {this.relatedLoading(elemental_composition)}
-          </tr>
-        </tbody>
-      </table>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementalCompositionCustom.js b/app/packs/src/components/ElementalCompositionCustom.js
deleted file mode 100644
index 34d2bb339..000000000
--- a/app/packs/src/components/ElementalCompositionCustom.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import { FormControl } from 'react-bootstrap';
-import NumeralInput from 'src/apps/mydb/elements/details/NumeralInput';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-var _ = require('lodash');
-
-export default class ElementalCompositionCustom extends React.Component {
-
-  checkElementsSum(el_composition) {
-    let sum = 0.0;
-
-    let keys = Object.keys(el_composition.data);
-
-    keys.map(function (key, index) {
-      sum += parseFloat(el_composition.data[key] || 0.0);
-    });
-
-    if (sum > 100.0) {
-      NotificationActions.add({
-        message: 'Percentage sum is more than 100%',
-        level: 'error'
-      });
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  handleElementsListChanged(v, key, el_composition, handleElementalChanged) {
-    let oldval = el_composition.data[key];
-
-    el_composition.data[key] = v;
-
-    if (this.checkElementsSum(el_composition)) {
-      handleElementalChanged(el_composition)
-    }
-  }
-
-  elementsList(el_composition, concat_formula) {
-    let elements = [];
-
-    let klass = this;
-    let handleElementalChanged = klass.props.handleElementalChanged;
-    let newData = {};
-
-    // be sure that 3, 2-symbol (Br) elements are all before one-symbol (B)!
-    // TODO: check performance
-    let mendeleev = /(Uut|Uup|Uus|Uuo|He|Li|Be|Ne|Na|Mg|Al|Si|Cl|Ar|Ca|Sc|Ti|Cr|Mn|Fe|Co|Ni|Cu|Zn|Ga|Ge|As|Se|Br|Kr|Rb|Sr|Zr|Nb|Mo|Tc|Ru|Rh|Pd|Ag|Cd|In|Sn|Sb|Te|Xe|Cs|Ba|La|Ce|Pr|Nd|Pm|Sm|Eu|Gd|Tb|Dy|Ho|Er|Tm|Yb|Lu|Hf|Ta|Re|Os|Ir|Pt|Au|Hg|Tl|Pb|Bi|Po|At|Rn|Fr|Ra|Ac|Th|Pa|Np|Pu|Am|Cm|Bk|Cf|Es|Fm|Md|No|Lr|Rf|Db|Sg|Bh|Hs|Mt|Ds|Rg|Cn|Fl|Lv|H|B|C|N|O|F|P|S|K|V|Y|I|W|U)/g
-    let keys = _.uniq(concat_formula.match(mendeleev)).sort();
-
-    // add new key to custom composition, so that we have new input
-    keys.forEach(function (key) {
-      newData[key] = (el_composition.data[key] || 0.0);
-      elements.push(<NumeralInput
-        className="padding-left"
-        numeralFormat='0,0.00'
-        label={key}
-        key={key + 'found'}
-        value={newData[key]}
-        defaultValue={newData[key]}
-        onChange={(v) => klass.handleElementsListChanged(v, key, el_composition, handleElementalChanged)}
-      />
-      );
-    });
-
-    el_composition.data = newData;
-
-    return elements;
-  }
-
-  hideLoading(elemental_composition) {
-    let c_type = elemental_composition.composition_type;
-    return this.props.hideLoading || !elemental_composition.loading;
-  }
-
-  relatedLoading(el_composition) {
-    if (this.hideLoading(el_composition))
-      return false;
-
-    return (
-      <td className="loading" style={{ textAlign: "left" }} width="13%">
-        <FormControl type="text"
-          key={"mc-loading" + (el_composition.id || 0).toString()}
-          defaultValue={el_composition.loading || ''}
-          value={el_composition.loading && el_composition.loading.toFixed(2) || ''}
-          disabled
-          readOnly
-        />
-      </td>
-    )
-  }
-
-  compositonTableHeader(elemental_composition) {
-    return (
-      <thead>
-        <tr>
-          <th>
-            <span>{elemental_composition.description}</span>
-          </th>
-
-          <th className="loading">
-            {!this.hideLoading(elemental_composition) ? 'Loading (mmol/g)' : ''}
-          </th>
-        </tr>
-      </thead>
-    )
-  }
-
-  render() {
-    let { elemental_composition, concat_formula, parent } = this.props;
-
-    if (!elemental_composition) return false;
-
-    return (
-      <table className="elemental-composition-custom">
-        {this.compositonTableHeader(elemental_composition)}
-
-        <tbody>
-          <tr>
-            <td className="form-inline">
-              {this.elementsList(elemental_composition, concat_formula)}
-            </td>
-            {this.relatedLoading(elemental_composition)}
-          </tr>
-        </tbody>
-      </table>
-    )
-  }
-}
diff --git a/app/packs/src/components/ElementalCompositionGroup.js b/app/packs/src/components/ElementalCompositionGroup.js
deleted file mode 100644
index a423357c5..000000000
--- a/app/packs/src/components/ElementalCompositionGroup.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import ElementalComposition from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalComposition'
-import ElementalCompositionCustom from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalCompositionCustom'
-
-export default class ElementalCompositionGroup extends React.Component {
-
-  handleElementalChanged(el_composition) {
-    this.props.handleSampleChanged(this.props.sample)
-  }
-
-  render() {
-    let { sample, show } = this.props;
-    let elemental_compositions = sample.elemental_compositions;
-
-    let display_error = true;
-    let data = [];
-    let el_composition_custom;
-
-    if (elemental_compositions.length == 1) {
-      data = '';
-      display_error = false;
-    }
-    else if (sample.formulaChanged) {
-      data = (
-        <p>
-          Formula has been changed. Please save sample to calculate the
-          elemental compositon.
-        </p>
-      )
-    }
-
-    elemental_compositions.map((elemental_composition, key) => {
-      if (Object.keys(elemental_composition.data).length)
-        display_error = false;
-
-      if (elemental_composition.composition_type == 'found') {
-        el_composition_custom = elemental_composition;
-      } else if (data.constructor === Array) {
-        data.push(
-          <ElementalComposition
-            elemental_composition={elemental_composition}
-            key={elemental_composition.id} />
-        );
-      }
-    });
-
-    if (display_error) {
-      data = (
-        <p>
-          Sorry, it was not possible to calculate the elemental
-          compositon. Check data please.
-        </p>
-      )
-    }
-
-    const custom = sample.can_update
-      ? (<ElementalCompositionCustom
-        handleElementalChanged={(el) => this.handleElementalChanged(el)}
-        elemental_composition={el_composition_custom}
-        hideLoading={!sample.contains_residues}
-        concat_formula={sample.concat_formula}
-        key={'elem_composition_found'} />)
-      : null;
-
-    if (!sample.molecule_formula) {
-      return false;
-    }
-
-    const label = sample.contains_residues ? <label>Elemental composition</label> : false
-
-    return (
-      <div>
-        {label}
-        {data}
-        {custom}
-      </div>
-    )
-
-  }
-}
diff --git a/app/packs/src/components/Elements.js b/app/packs/src/components/Elements.js
deleted file mode 100644
index 46d54abd6..000000000
--- a/app/packs/src/components/Elements.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import { Col } from 'react-bootstrap';
-
-import ElementsList from 'src/apps/mydb/elements/list/ElementsList';
-import ElementDetails from 'src/apps/mydb/elements/details/ElementDetails';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-
-export default class Elements extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentElement: null
-    };
-
-    this.handleOnChange = this.handleOnChange.bind(this);
-  }
-
-  componentDidMount() {
-    ElementStore.listen(this.handleOnChange);
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.handleOnChange);
-  }
-
-  handleOnChange(state) {
-    const { currentElement } = state;
-    this.setState({ currentElement });
-  }
-
-  render() {
-    const { currentElement } = this.state;
-    const showReport = (currentElement || []).type === 'report';
-
-    let md = 12;
-    const overview = !(currentElement);
-    let page = null;
-
-    if (currentElement) {
-      md = 5;
-      page = (
-        <Col md={7} className="small-col">
-          <ElementDetails currentElement={currentElement} />
-        </Col>
-      );
-    }
-
-    return (
-      <div>
-        <Col md={md} className="small-col">
-          <ElementsList overview={overview} showReport={showReport} />
-        </Col>
-        {page}
-      </div>
-    );
-  }
-}
-
diff --git a/app/packs/src/components/ElementsTable.js b/app/packs/src/components/ElementsTable.js
deleted file mode 100644
index f9d4a85b5..000000000
--- a/app/packs/src/components/ElementsTable.js
+++ /dev/null
@@ -1,411 +0,0 @@
-import React from 'react';
-
-import {
-  Pagination, Form, Col, Row, InputGroup, FormGroup, FormControl, Glyphicon, Tooltip, OverlayTrigger
-} from 'react-bootstrap';
-import DatePicker from 'react-datepicker';
-import deepEqual from 'deep-equal';
-
-import UIStore from './stores/UIStore';
-import UIActions from './actions/UIActions';
-import ElementActions from './actions/ElementActions';
-import { stopEvent } from './utils/DomHelper';
-
-import ElementStore from './stores/ElementStore';
-import ElementAllCheckbox from './ElementAllCheckbox';
-import ElementsTableEntries from './ElementsTableEntries';
-import ElementsTableSampleEntries from './ElementsTableSampleEntries';
-import Switch from './Switch';
-
-export default class ElementsTable extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      elements: [],
-      currentElement: null,
-      ui: {},
-      sampleCollapseAll: false,
-      moleculeSort: false,
-      advancedSearch: false,
-      productOnly: false,
-      page: null,
-      pages: null,
-      perPage: null,
-      totalElements: null
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onChangeUI = this.onChangeUI.bind(this);
-
-    this.collapseSample = this.collapseSample.bind(this);
-    this.changeSort = this.changeSort.bind(this);
-    this.changeDateFilter = this.changeDateFilter.bind(this);
-
-    this.toggleProductOnly = this.toggleProductOnly.bind(this);
-    this.setFromDate = this.setFromDate.bind(this);
-    this.setToDate = this.setToDate.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.getState();
-    ElementStore.listen(this.onChange);
-    UIStore.listen(this.onChangeUI);
-    this.initState();
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.onChange);
-    UIStore.unlisten(this.onChangeUI);
-  }
-
-  onChangeUI(state) {
-    if (typeof state[this.props.type] === 'undefined' || state[this.props.type] === null) {
-      return;
-    }
-    const { checkedIds, uncheckedIds, checkedAll } = state[this.props.type];
-    const {
-      filterCreatedAt, fromDate, toDate, number_of_results, currentSearchSelection, productOnly
-    } = state;
-
-    // check if element details of any type are open at the moment
-    const currentId = state.sample.currentId || state.reaction.currentId ||
-                      state.wellplate.currentId;
-
-    let isAdvS = false;
-    if (currentSearchSelection && currentSearchSelection.search_by_method) {
-      isAdvS = currentSearchSelection.search_by_method === 'advanced';
-    }
-
-    const stateChange = (
-      checkedIds || uncheckedIds || checkedAll || currentId || filterCreatedAt ||
-      fromDate || toDate || productOnly !== this.state.productOnly ||
-      isAdvS !== this.state.advancedSearch
-    );
-
-    if (stateChange) {
-      this.setState({
-        filterCreatedAt,
-        ui: {
-          checkedIds,
-          uncheckedIds,
-          checkedAll,
-          currentId,
-          number_of_results,
-          fromDate,
-          toDate
-        },
-        productOnly,
-        advancedSearch: isAdvS
-      });
-    }
-  }
-
-  onChange(state) {
-    const type = this.props.type + 's';
-    const elementsState = (state && state.elements && state.elements[type]) || {};
-    const { elements, page, pages, perPage, totalElements } = elementsState;
-
-    let currentElement;
-    if(!state.currentElement || state.currentElement.type == this.props.type) {
-      currentElement = state.currentElement
-    }
-
-    const elementsDidChange = elements && ! deepEqual(elements, this.state.elements);
-    const currentElementDidChange = !deepEqual(currentElement, this.state.currentElement);
-
-    const nextState = { page, pages, perPage, totalElements, currentElement }
-    if (elementsDidChange) { nextState.elements = elements; }
-    if (elementsDidChange || currentElementDidChange) { this.setState(nextState); }
-  }
-
-  initState() {
-    this.onChange(ElementStore.getState());
-  }
-
-  collapseSample(sampleCollapseAll) {
-    this.setState({sampleCollapseAll: !sampleCollapseAll})
-  }
-
-  changeSort() {
-    let {moleculeSort} = this.state
-    moleculeSort = !moleculeSort
-    this.setState({
-      moleculeSort
-    }, () => ElementActions.changeSorting(moleculeSort))
-  }
-
-  handlePaginationSelect(eventKey) {
-    const {pages} = this.state;
-    const {type} = this.props;
-
-    if(eventKey > 0 && eventKey <= pages) {
-      this.setState({
-        page: eventKey
-      }, () => UIActions.setPagination({type, page: this.state.page}));
-    }
-  }
-
-  pagination() {
-
-    if(pages <= 1) {
-      return;
-    }
-
-    const {page, pages} = this.state;
-    let items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="First" onClick={() => this.handlePaginationSelect(1)} />);
-    if (page>1) {
-      items.push(<Pagination.Prev key="Prev" onClick={() => this.handlePaginationSelect(page - 1)} />);
-    }
-    for (let _page = minPage; _page <= maxPage; _page=_page+1) {
-      items.push(
-        <Pagination.Item
-          key={`eltPage${_page}`}
-          active={_page === page}
-          onClick={() => this.handlePaginationSelect(_page)}>
-            {_page}
-        </Pagination.Item>
-      );
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="Ell" />);
-    }
-    if (page==pages) {
-      items.push(<Pagination.Next key="Next" onClick={() => this.handlePaginationSelect(page+1)} />);
-    }
-    items.push(<Pagination.Last key="Last" onClick={() => this.handlePaginationSelect(pages)} />);
-
-    return (
-      <div className="list-pagination">
-      <Pagination>
-        { items }
-      </Pagination>
-      </div>
-    )
-  }
-
-  handleNumberOfResultsChange(event, query=false) {
-    const { value } = event.target;
-    const { type } = this.props;
-    if (parseInt(value, 10) > 0) {
-      UIActions.changeNumberOfResultsShown(value);
-      if (query === true) ElementActions.refreshElements(type);
-    }
-  }
-
-  handleKeyDown(event) {
-    switch (event.keyCode) {
-      case 13: // Enter
-        stopEvent(event);
-        break;
-      default:
-        break;
-    }
-  }
-
-  numberOfResultsInput() {
-    const { ui } = this.state
-    return (
-      <Form horizontal className='list-show-count'>
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl type="text" style={{textAlign: 'center', zIndex: 0}}
-              onChange={event => this.handleNumberOfResultsChange(event, false)}
-              onBlur={event => this.handleNumberOfResultsChange(event, true)}
-              onKeyDown={event => this.handleKeyDown(event)}
-              value={ui.number_of_results ? ui.number_of_results : 0} />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  toggleProductOnly() {
-    UIActions.setProductOnly(!this.state.productOnly);
-  }
-
-  changeDateFilter() {
-    let { filterCreatedAt } = this.state;
-    filterCreatedAt = !filterCreatedAt;
-    UIActions.setFilterCreatedAt(filterCreatedAt);
-  }
-
-  setFromDate(fromDate) {
-    if (this.state.fromDate !== fromDate) UIActions.setFromDate(fromDate);
-  }
-
-  setToDate(toDate) {
-    if (this.state.toDate !== toDate) UIActions.setToDate(toDate);
-  }
-
-  renderHeader() {
-    const {
-      sampleCollapseAll,
-      moleculeSort, ui,
-      advancedSearch, productOnly
-    } = this.state;
-    const { fromDate, toDate } = ui;
-    const { type, showReport } = this.props;
-
-    const collapseIcon = sampleCollapseAll ? 'chevron-right' : 'chevron-down';
-
-    let switchBtnTitle = 'Change sorting to sort by ';
-    let checkedLbl = 'Molecule';
-    let uncheckedLbl = 'Sample';
-    if (advancedSearch) {
-      switchBtnTitle += (moleculeSort ? 'order of input' : 'sample last updated');
-      checkedLbl = 'Updated';
-      uncheckedLbl = 'Order';
-    } else {
-      switchBtnTitle += (moleculeSort ? 'Sample' : 'Molecule');
-    }
-
-    let sampleHeader = (<span />);
-    if (type === 'sample') {
-      const color = productOnly ? '#5cb85c' : 'currentColor';
-      sampleHeader = (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          <Switch
-            checked={moleculeSort}
-            style={{ marginTop: '3px', width: '85px' }}
-            onChange={this.changeSort}
-            title={switchBtnTitle}
-            checkedChildren={checkedLbl}
-            unCheckedChildren={uncheckedLbl}
-          />
-          &nbsp;&nbsp;
-          <button
-            style={{ border: 'none' }}
-            onClick={this.toggleProductOnly}
-          >
-            <i
-              style={{ cursor: 'pointer', color }}
-              className="fa fa-lg fa-product-hunt"
-            />
-          </button>
-          &nbsp;&nbsp;
-          <Glyphicon
-            glyph={collapseIcon}
-            title="Collapse/Uncollapse"
-            onClick={() => this.collapseSample(sampleCollapseAll)}
-            style={{
-              fontSize: '20px',
-              cursor: 'pointer',
-              color: '#337ab7',
-              top: 0
-            }}
-          />
-        </div>
-      );
-    }
-    const dateTitle = this.state.filterCreatedAt === true ? 'filter by creation date' : 'filter by update date';
-    const btnIcon = this.state.filterCreatedAt === true ? 'fa-calendar-o' : 'fa-calendar';
-
-    const inchiTooltip = <Tooltip id="date_tooltip">{dateTitle}</Tooltip>;
-    const dateIcon = <i className={`fa ${btnIcon}`} />;
-
-    const headerRight = (
-      <div className="header-right" style={{paddingRight: '25px'}}>
-        <OverlayTrigger placement="top" overlay={inchiTooltip}>
-          <button style={{ border: 'none' }} onClick={this.changeDateFilter} >
-            {dateIcon}
-          </button>
-        </OverlayTrigger>
-        <div className="sample-list-from-date">
-          <DatePicker
-            selected={fromDate}
-            placeholderText="From"
-            onChange={this.setFromDate}
-            popperPlacement="bottom-start"
-            isClearable
-            dateFormat="DD-MM-YY"
-          />
-        </div>
-        <div className="sample-list-to-date">
-          <DatePicker
-            selected={toDate}
-            placeholderText="To"
-            popperPlacement="bottom"
-            onChange={this.setToDate}
-            isClearable
-            dateFormat="DD-MM-YY"
-          />
-        </div>
-        &nbsp;&nbsp;
-        {sampleHeader}
-      </div>
-    );
-
-
-    return (
-      <div className="table-header" >
-        <div className="select-all">
-          <ElementAllCheckbox type={type} ui={ui} showReport={showReport} />
-        </div>
-        {headerRight}
-      </div>
-    );
-  }
-
-  renderEntries() {
-    const {
-      elements,
-      ui,
-      currentElement,
-      sampleCollapseAll,
-      moleculeSort
-    } = this.state
-
-    const { overview, type } = this.props;
-    let elementsTableEntries = null;
-
-    if (type === 'sample') {
-      elementsTableEntries = (
-        <ElementsTableSampleEntries collapseAll={sampleCollapseAll}
-          elements={elements} currentElement={currentElement}
-          showDragColumn={!overview} ui={ui} moleculeSort={moleculeSort}
-          onChangeCollapse={(checked) => this.collapseSample(!checked)}
-        />
-      );
-    } else {
-      elementsTableEntries = (
-        <ElementsTableEntries
-          elements={elements} currentElement={currentElement}
-          showDragColumn={!overview} ui={ui}
-        />
-      );
-    }
-
-    return (
-      <div className="list-elements">
-        {elementsTableEntries}
-      </div>
-    )
-  }
-
-  render() {
-    return (
-      <div className="list-container">
-        {this.renderHeader()}
-        {this.renderEntries()}
-        <div className="list-container-bottom">
-          <Row>
-            <Col sm={6}>{this.pagination()}</Col>
-            <Col sm={6}>{this.numberOfResultsInput()}</Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/ElementsTableEntries.js b/app/packs/src/components/ElementsTableEntries.js
deleted file mode 100644
index f466a56ac..000000000
--- a/app/packs/src/components/ElementsTableEntries.js
+++ /dev/null
@@ -1,396 +0,0 @@
-import React, {Component} from 'react';
-import SVG from 'react-inlinesvg';
-import { Tooltip, OverlayTrigger, Table, Popover } from 'react-bootstrap';
-import { filter } from 'lodash';
-import ElementContainer from './ElementContainer'
-import ElementCheckbox from './ElementCheckbox';
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ElementAnalysesLabels from './ElementAnalysesLabels';
-import ArrayUtils from './utils/ArrayUtils';
-
-import UIStore from './stores/UIStore';
-import ElementStore from './stores/ElementStore';
-import KeyboardStore from './stores/KeyboardStore';
-
-import DragDropItemTypes from './DragDropItemTypes';
-import classnames from 'classnames';
-import XTdCont from './extra/ElementsTableEntriesXTdCont';
-import { elementShowOrNew } from './routesUtils';
-import SvgWithPopover from './common/SvgWithPopover';
-import UserStore from './stores/UserStore';
-import { PublishedTag } from './PublishCommon';
-
-const reactionPublished = (element) => {
-  if (element.type === 'reaction') {
-    return (
-      <PublishedTag element={element} />
-    );
-  }
-  return (<span />);
-};
-
-
-export default class ElementsTableEntries extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      keyboardElementIndex: null
-    }
-
-    this.entriesOnKeyDown = this.entriesOnKeyDown.bind(this)
-  }
-
-  componentDidMount() {
-    KeyboardStore.listen(this.entriesOnKeyDown)
-  }
-
-  componentWillUnmount() {
-    KeyboardStore.unlisten(this.entriesOnKeyDown)
-  }
-
-  entriesOnKeyDown(state) {
-    let context = state.context
-    const {elements} = this.props;
-
-    if (elements[0] == null || context != elements[0].type)
-      return false
-
-    let documentKeyDownCode = state.documentKeyDownCode
-    let {keyboardElementIndex} = this.state
-
-    switch(documentKeyDownCode) {
-      case 13: // Enter
-      case 39: // Right
-        if (keyboardElementIndex != null && elements[keyboardElementIndex] != null) {
-          this.showDetails(elements[keyboardElementIndex])
-        }
-        break
-
-      case 38: // Up
-        if (keyboardElementIndex > 0) {
-          keyboardElementIndex--
-        } else {
-          keyboardElementIndex = 0
-        }
-        break
-      case 40: // Down
-        if (keyboardElementIndex == null) {
-          keyboardElementIndex = 0
-        } else if (keyboardElementIndex < elements.length - 1){
-          keyboardElementIndex++
-        }
-
-        break
-    }
-    this.setState({keyboardElementIndex})
-  }
-
-  isElementChecked(element) {
-    let {checkedIds, uncheckedIds, checkedAll} = this.props.ui;
-    return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))
-      || ArrayUtils.isValInArray(checkedIds || [], element.id);
-  }
-
-  isElementSelected(element) {
-    const {currentElement} = this.props;
-    return (currentElement && currentElement.id == element.id);
-  }
-
-  isCurrEleDropType(type) {
-    const { currentElement } = ElementStore.getState();
-    const targets = {
-      sample: ['reaction', 'wellplate'],
-      reaction: ['research_plan'],
-      wellplate: ['screen'],
-      generalProcedure: ['reaction'],
-    };
-    return type && currentElement && targets[type].includes(currentElement.type)
-  }
-
-  showDetails(element) {
-    const { currentCollection, isSync } = UIStore.getState();
-    const { id, type } = element;
-    const uri = isSync
-      ? `/scollection/${currentCollection.id}/${type}/${id}`
-      : `/collection/${currentCollection.id}/${type}/${id}`;
-    Aviator.navigate(uri, { silent: true });
-    const e = { type, params: { collectionID: currentCollection.id } };
-    e.params[`${type}ID`] = id;
-
-    const genericEls = (UserStore.getState() && UserStore.getState().genericEls) || [];
-    if (genericEls.find(el => el.name == type)) {
-      e.klassType = 'GenericEl';
-    }
-
-    elementShowOrNew(e)
-  }
-
-  dragHandle(element) {
-    const sourceType = this.dropSourceType(element);
-    return (
-      <ElementContainer
-        key={element.id}
-        sourceType={sourceType}
-        element={element}
-      />
-    );
-  }
-
-  dropSourceType(el) {
-    let sourceType = '';
-    const isDropForSample =
-      el.type === 'sample' && this.isCurrEleDropType('sample');
-    const isDropForWellPlate =
-      el.type === 'wellplate' && this.isCurrEleDropType('wellplate');
-    const isDropForResearchPlan =
-      el.type === 'reaction' && this.isCurrEleDropType('reaction');
-    const isDropForGP = el.type === 'reaction' && el.role === 'gp' &&
-      this.isCurrEleDropType('generalProcedure');
-
-    if (isDropForSample) {
-      sourceType = DragDropItemTypes.SAMPLE;
-    } else if (isDropForWellPlate) {
-      sourceType = DragDropItemTypes.WELLPLATE;
-    } else if (isDropForResearchPlan) {
-      sourceType = DragDropItemTypes.REACTION;
-    } else if (isDropForGP) {
-      sourceType = DragDropItemTypes.GENERALPROCEDURE;
-    }
-    return sourceType;
-  }
-
-  topSecretIcon(element) {
-    if (element.type == 'sample' && element.is_top_secret == true) {
-      const tooltip = (<Tooltip id="top_secret_icon">Top secret</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <i className="fa fa-user-secret"></i>
-        </OverlayTrigger>
-      )
-    }
-  }
-
-  previewColumn(element) {
-    const {ui} = this.props;
-    const classNames = classnames(
-      {
-        'molecule': element.type == 'sample'
-      },
-      {
-        'reaction': element.type == 'reaction'
-      },
-      {
-        'molecule-selected': element.type == 'sample' && this.isElementSelected(element)
-      },
-      {
-        'reaction': element.type == 'reaction' && this.isElementSelected(element)
-      },
-      {
-        'research_plan': element.type == 'research_plan'
-      }
-    );
-
-    let svgContainerStyle = {
-      verticalAlign: 'middle',
-      textAlign: 'center',
-      cursor: 'pointer'
-    };
-    let tdExtraContents = [];
-    for (let j=0;j < XTdCont.count;j++){
-      let NoName = XTdCont["content"+j];
-      tdExtraContents.push(<NoName element={element}/>);
-    }
-
-    const {showPreviews} = UIStore.getState();
-    const clickToShowDetails = e => this.showDetails(element);
-    if (showPreviews && (element.type == 'reaction')) {
-      return (
-        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-          <SVG src={element.svgPath} className={classNames} key={element.svgPath}/>
-          {tdExtraContents.map((e)=>{return e;})}
-        </td>
-      );
-    } else if (element.type === 'research_plan') {
-      if (element.thumb_svg !== 'not available') {
-        return (
-          <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-            <img src={`data:image/png;base64,${element.thumb_svg}`} alt="" style={{ cursor: 'pointer' }} />
-            {tdExtraContents.map((e) => { return e; })}
-          </td>
-        );
-      }
-      return (
-        <td style={svgContainerStyle} onClick={e => this.showDetails(element)}>
-          {tdExtraContents.map((e) => { return e; })}
-        </td>
-      );
-    }
-    return <td style={{display:'none', cursor: 'pointer'}} onClick={e => this.showDetails(element)}/>;
-  }
-
-  dragColumn(element) {
-    const {showDragColumn} = this.props;
-    if(showDragColumn) {
-      return (
-        <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
-          {this.dragHandle(element)}
-        </td>
-      );
-    } else {
-     return <td style={{display:'none'}}></td>;
-    }
-  }
-
-  reactionStatus(element) {
-    if (element.type === 'reaction' && element.status) {
-      const tooltip = (
-        <Tooltip id={`reaction_${element.status}`}>
-          {element.status} Reaction
-        </Tooltip>
-      );
-
-      let icon = null;
-      switch (element.status) {
-        case 'Planned':
-          icon = <i className="fa fa-clock-o c-bs-warning" />;
-          break;
-        case 'Running':
-          icon = (
-            <span
-              style={{ width: '12px', height: '14px', lineHeight: '14px' }}
-              className="fa fa-stack"
-            >
-              <i className="fa fa-stack-1x fa-hourglass-1 running-1 c-bs-warning" />
-              <i className="fa fa-stack-1x fa-hourglass-2 running-2 c-bs-warning" />
-              <i className="fa fa-stack-1x fa-hourglass-3 running-3 c-bs-warning" />
-            </span>
-          );
-          break;
-        case 'Done':
-          icon = <i className="fa fa-hourglass-3 c-bs-primary" />;
-          break;
-        case 'Analyses Pending':
-          icon = <i className="fa fa-ellipsis-h c-bs-primary" />;
-          break;
-        case 'Successful':
-          icon = <i className="fa fa-check-circle-o c-bs-success" />;
-          break;
-        case 'Not Successful':
-          icon = <i className="fa fa-times-circle-o c-bs-danger" />;
-          break;
-        default:
-          break;
-      }
-
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <div>{icon}</div>
-        </OverlayTrigger>
-      );
-    }
-  }
-
-  reactionRole(element) {
-    let tooltip = null;
-    if (element.type == 'reaction') {
-      switch (element.role) {
-        case "gp":
-          tooltip = <Tooltip id="roleTp">General Procedure</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-home c-bs-primary"/>
-            </OverlayTrigger>
-          )
-          break;
-        case "parts":
-          tooltip = <Tooltip id="roleTp">Parts of General Procedure</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-bookmark c-bs-success"/>
-            </OverlayTrigger>
-          )
-          break;
-        case "single":
-          tooltip = <Tooltip id="roleTp">Single</Tooltip>;
-          return (
-            <OverlayTrigger placement="top" overlay={tooltip}>
-              <i className="fa fa-asterisk c-bs-danger"/>
-            </OverlayTrigger>
-          )
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  sampleAnalysesLabels(element) {
-    if (element.type == 'sample') {
-      return (
-        <ElementAnalysesLabels element={element} key={element.id+"_analyses"}/>
-      )
-    }
-  }
-
-  render() {
-    const {elements} = this.props;
-    let {keyboardElementIndex} = this.state
-
-    return (
-      <Table className="elements" bordered hover style={{borderTop: 0}}>
-        <tbody>
-        {elements.map((element, index) => {
-          const sampleMoleculeName = (element.type == 'sample') ? element.molecule.iupac_name: '';
-          let style = {};
-          if (this.isElementSelected(element) ||
-             (keyboardElementIndex != null && keyboardElementIndex == index)) {
-            style = {
-            color: '#000',
-            background: '#ddd',
-            border: '4px solid #337ab7'
-            }
-          }
-
-          return (
-            <tr key={index} style={style}>
-              <td width="30px">
-                <ElementCheckbox element={element} key={element.id} checked={this.isElementChecked(element)}/><br/>
-              </td>
-              <td onClick={e => this.showDetails(element)} style={{ cursor: 'pointer' }} width={element.type === 'research_plan' ? '280px': 'unset'}>
-                <div>
-                  {
-                      <SvgWithPopover
-                        hasPop={['reaction'].includes(element.type)}
-                        previewObject={{
-                          txtOnly: element.title(),
-                          isSVG: true,
-                          src: element.svgPath
-                        }}
-                        popObject={{
-                          title: (element.type === 'reaction' && element.short_label) || '',
-                          src: element.svgPath,
-                          height: '26vh',
-                          width: '52vw' }}
-                      />
-                  }
-                  {this.reactionStatus(element)}
-                  {' '}
-                  {this.reactionRole(element)}
-                  <br />
-                  {sampleMoleculeName}
-                  {reactionPublished(element)}
-                  <ElementCollectionLabels element={element} key={element.id}/>
-                  {this.sampleAnalysesLabels(element)}
-                  {this.topSecretIcon(element)}
-                </div>
-              </td>
-              {this.previewColumn(element)}
-              {this.dragColumn(element)}
-            </tr>
-          )
-        })}
-        </tbody>
-      </Table>
-    );
-  }
-}
diff --git a/app/packs/src/components/ElementsTableSampleEntries.js b/app/packs/src/components/ElementsTableSampleEntries.js
deleted file mode 100644
index f939a3ae7..000000000
--- a/app/packs/src/components/ElementsTableSampleEntries.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import React, { Component } from 'react';
-import {
-  Table, Button, Tooltip, OverlayTrigger, Label
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import ElementCheckbox from 'src/apps/mydb/elements/list/ElementCheckbox';
-import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
-import ElementAnalysesLabels from 'src/apps/mydb/elements/labels/ElementAnalysesLabels';
-import ElementReactionLabels from 'src/apps/mydb/elements/labels/ElementReactionLabels';
-import ElementWellplateLabels from 'src/apps/mydb/elements/labels/ElementWellplateLabels';
-import GenericElementLabels from 'src/apps/mydb/elements/labels/GenericElementLabels';
-import PubchemLabels from 'src/components/pubchem/PubchemLabels';
-import ChemrepoLabels from 'src/apps/mydb/elements/labels/ChemrepoLabels';
-import ComputedPropLabel from 'src/apps/mydb/elements/labels/ComputedPropLabel';
-import ArrayUtils from 'src/utilities/ArrayUtils';
-import ElementContainer from 'src/apps/mydb/elements/list/ElementContainer';
-
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import KeyboardStore from 'src/stores/alt/stores/KeyboardStore';
-
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import SampleName from 'src/components/common/SampleName';
-import { sampleShowOrNew } from 'src/utilities/routesUtils';
-import SvgWithPopover from 'src/components/common/SvgWithPopover';
-import { ShowUserLabels } from 'src/components/UserLabels';
-import CommentIcon from 'src/components/comments/CommentIcon';
-
-import { LabelPublication, PublishedTag, ChemotionTag } from 'src/components/chemrepo/PublishCommon';
-
-import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
-
-import { LabelPublication, PublishedTag, ChemotionTag } from './PublishCommon';
-
-const buildFlattenSampleIds = (displayedMoleculeGroup) => {
-  let flatIndex = 0;
-  const flattenSamplesId = [];
-
-  displayedMoleculeGroup.forEach((groupSample, index) => {
-    const length = displayedMoleculeGroup[index].numSamples;
-    for (let i = 0; i < length; i++) {
-      flattenSamplesId[flatIndex + i] = groupSample[i].id;
-    }
-    flatIndex += length;
-  });
-
-  return flattenSamplesId;
-};
-
-const showDetails = (id) => {
-  const { currentCollection, isSync } = UIStore.getState();
-  const uri = `/${isSync ? 's' : ''}collection/${currentCollection.id}/sample/${id}`;
-  Aviator.navigate(uri, { silent: true });
-  sampleShowOrNew({ params: { sampleID: id, collectionID: currentCollection.id } });
-};
-
-const targets = {
-  sample: ['reaction', 'wellplate', 'device', 'research_plan'],
-  molecule: ['reaction'],
-};
-
-const isCurrEleDropType = (sourceType, targetType) => {
-  if (['molecule', 'sample'].includes(sourceType) && !['wellplate', 'device', 'research_plan'].includes(targetType)) {
-    return sourceType && targetType;
-  }
-  return sourceType && targetType && targets[sourceType].includes(targetType);
-};
-
-const dragColumn = (element, showDragColumn, sourceType, targetType) => {
-  if (showDragColumn) {
-    return (
-      <td style={{ verticalAlign: 'middle', textAlign: 'center' }} >
-        <ElementContainer
-          key={element.id}
-          sourceType={isCurrEleDropType(sourceType, targetType) ? sourceType : ''}
-          element={element}
-        />
-      </td>
-    );
-  }
-  return null;
-};
-
-const TopSecretIcon = ({ element }) => {
-  if (element.type === 'sample' && element.is_top_secret === true) {
-    const tooltip = (<Tooltip id="top_secret_icon">Top secret</Tooltip>);
-    return (
-      <OverlayTrigger placement="top" overlay={tooltip}>
-        <i className="fa fa-user-secret" />
-      </OverlayTrigger>
-    );
-  }
-  return null;
-};
-
-TopSecretIcon.propTypes = {
-  element: PropTypes.object,
-};
-
-const XvialIcon = ({ label }) => {
-  return (label !== '') ? (
-    <i
-      className="icon-xvial"
-      style={{ marginRight: '5px', fontSize: '20px' }}
-    />
-  ) : null;
-};
-
-XvialIcon.propTypes = {
-  label: PropTypes.string,
-};
-
-XvialIcon.defaultProps = {
-  label: ''
-};
-
-const showDecoupledIcon = (sample) => (sample.decoupled ? (
-  <div className="decoupled-icon" onClick={(e) => e.stopPropagation()}>
-    <OverlayTrigger placement="top" overlay={<Tooltip id="tip_decoupled_icon">is decoupled from molecule</Tooltip>}>
-      <Label><i className="fa fa-chain-broken" aria-hidden="true" /></Label>
-    </OverlayTrigger>
-  </div>
-) : null);
-
-const overlayToggle = <Tooltip id="toggle_molecule">Toggle Molecule</Tooltip>;
-
-const svgPreview = (showPreviews, sample) => (
-  <div style={{ float: 'left' }}>
-    {
-      showPreviews
-        ? <SvgWithPopover
-          hasPop
-          previewObject={{
-            txtOnly: '',
-            isSVG: true,
-            src: sample.svgPath
-          }}
-          popObject={{
-            title: sample.molecule_iupac_name,
-            src: sample.svgPath,
-            height: '26vh',
-            width: '52vw',
-          }}
-        />
-        : null
-    }
-  </div>
-);
-
-const MoleculeHeader = ({ sample, show, showDragColumn, onClick, targetType }) => {
-  const showIndicator = (show) ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right';
-
-  const { collId, showPreviews } = UIStore.getState();
-  return (
-    <tr
-      style={{ backgroundColor: '#F5F5F5', cursor: 'pointer' }}
-      onClick={onClick}
-    >
-      {sample.molecule?.inchikey === 'DUMMY' && sample.molfile == null ?
-        (<td colSpan="3" style={{ position: 'relative ' }} ><div><h4>(No-structure sample)</h4></div></td>) :
-        (
-          <td colSpan="2" style={{ position: 'relative ' }} >
-            {svgPreview(showPreviews, sample)}
-            <div style={{ position: 'absolute', right: '3px', top: '14px' }} >
-              <OverlayTrigger placement="bottom" overlay={overlayToggle} >
-                <span style={{ fontSize: 15, color: '#337ab7', lineHeight: '10px' }} >
-                  <i className={`glyphicon ${showIndicator}`} />
-                </span>
-              </OverlayTrigger>
-            </div>
-            <div style={{ paddingLeft: 5, wordWrap: 'break-word' }} >
-              <h4><SampleName sample={sample} /></h4>
-            </div>
-            <div style={{ position: 'absolute', top: '10px', right: '25px', float: 'right' }} >
-              <ChemrepoLabels chemrepoId={sample.molecule.chem_repo && sample.molecule.chem_repo.id} />
-              <PubchemLabels element={sample} />
-              <ChemotionTag tagData={sample.pubchem_tag} />
-            </div>
-            <div style={{ position: 'absolute', bottom: '10px', right: '25px', float: 'right' }} >
-              <ComputedPropLabel cprops={sample.molecule_computed_props} />
-            </div>
-          </td>
-        )
-      }
-      {sample.molecule?.inchikey === 'DUMMY' && sample.molfile == null ?
-        null : dragColumn(sample, showDragColumn, DragDropItemTypes.MOLECULE, targetType)}
-    </tr>
-  );
-}
-
-export default class ElementsTableSampleEntries extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      displayedMoleculeGroup: [],
-      moleculeGroupsShown: [],
-      flattenSamplesId: [],
-      keyboardIndex: null,
-      keyboardSeletectedElementId: null,
-    };
-
-    this.sampleOnKeyDown = this.sampleOnKeyDown.bind(this);
-  }
-
-  componentDidMount() {
-    KeyboardStore.listen(this.sampleOnKeyDown);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const displayedMoleculeGroup = [];
-    const { currentElement } = ElementStore.getState();
-    const { elements } = nextProps;
-    const moleculelist = {};
-    elements.forEach((sample) => {
-      let samples = [];
-      let molId = '';
-      if (sample.decoupled && sample.molfile) {
-        molId = `M${sample.id}`;
-      } else if (sample.stereo == null) {
-        molId = `M${sample.molecule.id}_any_any`;
-      } else {
-        molId = `M${sample.molecule.id}_${sample.stereo.abs || 'any'}_${sample.stereo.rel || 'any'}`;
-      }
-      if (moleculelist[molId]) {
-        samples = moleculelist[molId];
-      }
-      samples.push(sample);
-      moleculelist[molId] = samples;
-    });
-    Object.keys(moleculelist).forEach((moleculeId, idx) => {
-      displayedMoleculeGroup.push(moleculelist[moleculeId]);
-      let numSamples = moleculelist[moleculeId].length;
-      if (nextProps.moleculeSort && numSamples > 3) { numSamples = 3; }
-      displayedMoleculeGroup[idx].numSamples = numSamples;
-    })
-    this.setState({
-      displayedMoleculeGroup,
-      targetType: currentElement && currentElement.type,
-      flattenSamplesId: buildFlattenSampleIds(displayedMoleculeGroup)
-    }, this.forceUpdate());
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const { collapseAll, showDragColumn, moleculeSort, currentElement, elements, ui } = this.props;
-    const { checkedAll, checkedIds, uncheckedIds } = ui;
-    const nextUi = nextProps.ui;
-    return collapseAll !== nextProps.collapseAll // Bool
-      || showDragColumn !== nextProps.showDragColumn // Bool
-      || moleculeSort !== nextProps.moleculeSort // Bool
-      || currentElement !== nextProps.currentElement // instance of Sample
-      || elements !== nextProps.elements // Arr
-      || checkedAll !== nextUi.checkedAll // Bool
-      || checkedIds !== nextUi.checkedIds // Immutable List
-      || uncheckedIds !== nextUi.uncheckedIds // Immutable List
-      || this.state.keyboardIndex !== nextState.keyboardIndex // int
-      || this.state.keyboardSeletectedElementId !== nextState.keyboardSeletectedElementId; // int
-  }
-
-  componentWillUnmount() {
-    KeyboardStore.unlisten(this.sampleOnKeyDown);
-  }
-
-  sampleOnKeyDown(state) {
-    const context = state.context;
-    if (context != 'sample') { return false; }
-
-    const documentKeyDownCode = state.documentKeyDownCode;
-    let { keyboardIndex, keyboardSeletectedElementId, flattenSamplesId } = this.state;
-
-    switch (documentKeyDownCode) {
-      case 13: // Enter
-      case 39: // Right
-        if (keyboardIndex != null && keyboardSeletectedElementId != null) {
-          showDetails(keyboardSeletectedElementId);
-        }
-        break;
-      case 38: // Up
-        if (keyboardIndex > 0) {
-          keyboardIndex--;
-        } else {
-          keyboardIndex = 0;
-        }
-        break;
-      case 40: // Down
-        if (keyboardIndex == null) {
-          keyboardIndex = 0;
-        } else if (keyboardIndex < (flattenSamplesId.length - 1)) {
-          keyboardIndex++;
-        }
-        break;
-      default:
-        break;
-    }
-
-    keyboardSeletectedElementId = flattenSamplesId[keyboardIndex];
-    this.setState({ keyboardIndex, keyboardSeletectedElementId });
-  }
-
-  showMoreSamples(index) {
-    const { displayedMoleculeGroup } = this.state;
-    let length = displayedMoleculeGroup[index].numSamples;
-    length += 3;
-    if (displayedMoleculeGroup[index].length < length) {
-      length = displayedMoleculeGroup[index].length;
-    }
-    displayedMoleculeGroup[index].numSamples = length;
-
-    this.setState({
-      displayedMoleculeGroup,
-      flattenSamplesId: buildFlattenSampleIds(displayedMoleculeGroup)
-    }, this.forceUpdate());
-  }
-
-
-  handleMoleculeToggle(moleculeName) {
-    let { moleculeGroupsShown } = this.state;
-    if (!moleculeGroupsShown.includes(moleculeName)) {
-      moleculeGroupsShown = moleculeGroupsShown.concat(moleculeName);
-    } else {
-      moleculeGroupsShown = moleculeGroupsShown.filter(item => item !== moleculeName);
-    }
-    this.setState({ moleculeGroupsShown }, this.forceUpdate());
-    this.props.onChangeCollapse(false);
-  }
-
-  isElementChecked(element) {
-    const { checkedIds, uncheckedIds, checkedAll } = this.props.ui;
-    return (checkedAll && ArrayUtils.isValNotInArray(uncheckedIds || [], element.id))
-      || ArrayUtils.isValInArray(checkedIds || [], element.id);
-  }
-
-  isElementSelected(element) {
-    const { currentElement } = this.props;
-    return (currentElement && currentElement.id === element.id);
-  }
-
-
-  renderSamples(samples, index) {
-    const { keyboardSeletectedElementId, displayedMoleculeGroup } = this.state;
-    const { showDragColumn } = this.props;
-    const length = samples.length;
-    const numSamples = displayedMoleculeGroup[index].numSamples;
-
-    const sampleRows = samples.slice(0, numSamples).map((sample, ind) => {
-      const selected = this.isElementSelected(sample);
-      const style = (selected || keyboardSeletectedElementId === sample.id) ? {
-        color: '#fff', background: '#337ab7'
-      } : {};
-
-      return (
-        <tr key={ind} style={style}>
-          <td width="30px">
-            <ElementCheckbox
-              element={sample}
-              key={sample.id}
-              checked={this.isElementChecked(sample)}
-            />
-          </td>
-          <td
-            style={{ cursor: 'pointer' }}
-            onClick={showDetails.bind(this, sample.id)}
-          >
-            {sample.title(selected)}
-            <div style={{ float: 'right', display: 'flex', alignItems: 'center' }}>
-              <CommentIcon commentCount={sample.comment_count} />
-              {showDecoupledIcon(sample)}
-              <ShowUserLabels element={sample} />
-              <XvialIcon label={(sample.tag.taggable_data.xvial && sample.tag.taggable_data.xvial.num) || ''} />
-              <LabelPublication element={sample} key={sample.id + "_publication"} />
-              <PublishedTag element={sample} />
-              <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-              <ElementWellplateLabels element={sample} key={`${sample.id}_wellplate`} />
-              <GenericElementLabels element={sample} key={`${sample.id}_element`} />
-              <ElementCollectionLabels element={sample} key={`${sample.id}`} />
-              <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
-              <TopSecretIcon element={sample} />
-            </div>
-          </td>
-          {dragColumn(sample, showDragColumn, DragDropItemTypes.SAMPLE, this.state.targetType)}
-        </tr>
-      );
-    });
-
-    if (numSamples < length) {
-      const showMoreSamples = (
-        <tr key={`${index}_showMore`}><td colSpan="3" style={{ padding: 0 }} >
-          <Button
-            bsStyle="info"
-            onClick={() => this.showMoreSamples(index)}
-            style={{ fontSize: '14px', width: '100%', float: 'left', borderRadius: '0px' }}
-          >Show more samples</Button>
-        </td></tr>
-      );
-      sampleRows.push(showMoreSamples);
-    }
-
-    return sampleRows;
-  }
-
-  renderMoleculeGroup(moleculeGroup, index) {
-    const { showDragColumn, collapseAll } = this.props;
-    const { moleculeGroupsShown, targetType } = this.state;
-    const molecule = moleculeGroup[0].molecule;
-    const moleculeName = molecule.iupac_name || molecule.inchistring;
-    const showGroup = !moleculeGroupsShown.includes(moleculeName) && !collapseAll;
-
-    return (
-      <tbody key={index}>
-        <MoleculeHeader
-          sample={moleculeGroup[0]}
-          show={showGroup}
-          showDragColumn={showDragColumn}
-          onClick={() => this.handleMoleculeToggle(moleculeName)}
-          targetType={targetType}
-        />
-        {showGroup ? this.renderSamples(moleculeGroup, index) : null}
-      </tbody>
-    );
-  }
-
-  render() {
-    const { displayedMoleculeGroup } = this.state;
-    return (
-      <Table className="sample-entries" >
-        {Object.keys(displayedMoleculeGroup).map((group, index) => {
-          const moleculeGroup = displayedMoleculeGroup[group];
-          const numSamples = displayedMoleculeGroup[group].numSamples;
-          return this.renderMoleculeGroup(moleculeGroup, index, numSamples);
-        })}
-      </Table>
-    );
-  }
-}
-
-ElementsTableSampleEntries.propTypes = {
-  onChangeCollapse: PropTypes.func,
-  collapseAll: PropTypes.bool,
-  elements: PropTypes.array,
-  currentElement: PropTypes.object,
-  showDragColumn: PropTypes.bool,
-  ui: PropTypes.object,
-  moleculeSort: PropTypes.bool,
-};
diff --git a/app/packs/src/components/ElementsTableSettings.js b/app/packs/src/components/ElementsTableSettings.js
deleted file mode 100644
index 7aaa9fca4..000000000
--- a/app/packs/src/components/ElementsTableSettings.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react';
-import Immutable from 'immutable';
-import {Popover, Button, FormGroup, Checkbox, OverlayTrigger} from 'react-bootstrap';
-import _ from 'lodash';
-
-import TabLayoutContainer from './TabLayoutContainer';
-
-import UserActions from './actions/UserActions';
-import UIActions from './actions/UIActions';
-
-import UIStore from './stores/UIStore';
-import UserStore from './stores/UserStore';
-
-export default class ElementsTableSettings extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      visible: props.visible,
-      hidden: props.hidden,
-      currentType: '',
-      showSampleExternalName: false,
-      tableSchemePreviews: true
-    }
-
-    this.handleOnExit = this.handleOnExit.bind(this);
-    this.handleToggleSampleExt = this.handleToggleSampleExt.bind(this);
-    this.handleToggleScheme = this.handleToggleScheme.bind(this);
-    this.onChangeUser = this.onChangeUser.bind(this);
-    this.onChangeUI = this.onChangeUI.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChangeUser);
-    UIStore.listen(this.onChangeUI);
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onChangeUser);
-    UIStore.unlisten(this.onChangeUI);
-  }
-
-  onChangeUI(state) {
-    const tableSchemePreviews = state.showPreviews;
-
-    if (this.state.tableSchemePreviews != tableSchemePreviews) {
-      this.setState({ tableSchemePreviews });
-    }
-  }
-
-  onChangeUser(state) {
-    let { currentType, showSampleExternalName } = this.state;
-    let showExt = showSampleExternalName;
-    if (state.profile && state.profile.show_external_name) {
-      showExt = state.profile.show_external_name;
-    }
-
-    if (currentType != state.currentType || showSampleExternalName != showExt) {
-      this.setState({
-        currentType: state.currentType,
-        showSampleExternalName: showExt
-      })
-    }
-  }
-
-  handleOnExit() {
-    this.updateLayout();
-
-    if (this.state.currentType == "sample" || this.state.currentType == "reaction") {
-      const show_previews = UIStore.getState().showPreviews;
-      const cur_previews = this.state.tableSchemePreviews;
-      if (cur_previews != show_previews) {
-        UIActions.toggleShowPreviews(cur_previews);
-
-      }
-
-    }
-
-    const storeExt = UserStore.getState().profile.show_external_name;
-    if (this.state.showSampleExternalName != storeExt) {
-      UserActions.updateUserProfile(
-        { show_external_name: this.state.showSampleExternalName }
-      );
-    }
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      visible: nextProps.visible,
-      hidden: nextProps.hidden
-    });
-  }
-
-  handleToggleScheme() {
-    const { tableSchemePreviews } = this.state;
-    this.setState({ tableSchemePreviews: !tableSchemePreviews });
-  }
-
-  handleToggleSampleExt() {
-    const { showSampleExternalName } = this.state;
-    this.setState({ showSampleExternalName: !showSampleExternalName });
-  }
-
-  updateLayout() {
-    const { visible, hidden } = this.layout.state;
-    const layout = {};
-
-    visible.forEach((value, index) => {
-      layout[value] = (index + 1);
-    });
-    hidden.forEach((value, index) => {
-      if (value !== 'hidden') layout[value] = (- index - 1)
-    });
-
-    const userProfile = UserStore.getState().profile;
-    _.set(userProfile, 'data.layout', layout);
-    UserActions.updateUserProfile(userProfile);
-  }
-
-  render() {
-    const {
-      visible, hidden, currentType,
-      tableSchemePreviews, showSampleExternalName
-    } = this.state;
-
-    const wd = 35 + ((visible && visible.size * 50) || 0) + ((hidden && hidden.size * 50) || 0);
-
-    let sampleSettings = (<span />);
-    if (currentType == "sample" || currentType == "reaction") {
-      sampleSettings = (
-        <div>
-          <h3 className="popover-title">Settings</h3>
-          <div className="popover-content">
-            <FormGroup>
-              <Checkbox onChange={this.handleToggleScheme}
-                        checked={tableSchemePreviews} >
-                Show schemes images
-              </Checkbox>
-            </FormGroup>
-            <FormGroup>
-              <Checkbox onChange={this.handleToggleSampleExt}
-                        checked={showSampleExternalName} >
-                Show sample external name on title
-              </Checkbox>
-            </FormGroup>
-          </div>
-        </div>
-      )
-    }
-    const popoverSettings = (
-      <Popover
-        className="collection-overlay"
-        id="popover-layout"
-        style={{ maxWidth: 'none', width: `${wd}px` }}
-      >
-        <div>
-          <h3 className="popover-title">Table Layout</h3>
-          <div className="popover-content">
-            <TabLayoutContainer
-              visible={visible}
-              hidden={hidden}
-              ref={(n) => { this.layout = n; }}
-            />
-          </div>
-        </div>
-        {sampleSettings}
-      </Popover>
-    )
-
-    return (
-      <OverlayTrigger
-        trigger="click"
-        placement="left"
-        overlay={popoverSettings}
-        rootClose
-        onExit={this.handleOnExit}
-      >
-        <Button
-          bsSize="xsmall"
-          style={{ margin: '10px 10px 10px 0', float: 'right' }}
-        >
-          <i className="fa fa-sliders" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
diff --git a/app/packs/src/components/ExportSamplesBtn.js b/app/packs/src/components/ExportSamplesBtn.js
deleted file mode 100644
index 97881598e..000000000
--- a/app/packs/src/components/ExportSamplesBtn.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import CollectionsFetcher from './fetchers/CollectionsFetcher';
-
-export default class ExportSamplesBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { startExport: false };
-  }
-
-  handleExport(type, id) {
-    this.setState({ startExport: true });
-    CollectionsFetcher.expotSamples(type, id)
-      .then(() => { this.setState({ startExport: false }); })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  render() {
-    const { type, id } = this.props;
-    const { startExport } = this.state;
-    return (
-      <Button bsStyle="info" onClick={() => this.handleExport(type, id)}>
-        Export samples{startExport ? <span>&nbsp;<i className="fa fa-spin fa-spinner" /></span> : null}
-      </Button>
-    );
-  }
-}
-
-ExportSamplesBtn.propTypes = {
-  type: PropTypes.string.isRequired,
-  id: PropTypes.number.isRequired
-};
diff --git a/app/packs/src/components/FastInput.js b/app/packs/src/components/FastInput.js
deleted file mode 100644
index 302e46c58..000000000
--- a/app/packs/src/components/FastInput.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useRef } from 'react';
-import { InputGroup, OverlayTrigger, FormGroup, SplitButton, Tooltip, MenuItem } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import NotificationActions from './actions/NotificationActions';
-import BaseFetcher from './fetchers/BaseFetcher';
-import LoadingActions from './actions/LoadingActions';
-
-const apiCall = (cas, src = 'cas') => (src === 'cas' ? `https://commonchemistry.cas.org/api/detail?cas_rn=${cas}` : `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${cas}/property/CanonicalSMILES/JSON`);
-
-const FastInput = (props) => {
-  const inputCas = useRef('');
-  const notify = (_params) => {
-    NotificationActions.add({
-      title: _params.title,
-      message: _params.msg,
-      level: _params.lvl,
-      position: 'tc',
-      dismissible: 'button',
-      autoDismiss: 5,
-      uid: uuid.v4()
-    });
-  };
-
-  const searchSmile = () => {
-    LoadingActions.start();
-    props.fnHandle(inputCas.current.value);
-  };
-
-  const search = () => {
-    let params = {
-      apiEndpoint: apiCall(inputCas.current.value),
-      requestMethod: 'get',
-      jsonTranformation: json => json
-    };
-    LoadingActions.start();
-    BaseFetcher.withoutBodyData(params).then((cjson) => {
-      if (cjson.message) {
-        params = {
-          apiEndpoint: apiCall(inputCas.current.value, 'pubchem'),
-          requestMethod: 'get',
-          jsonTranformation: json => json
-        };
-        BaseFetcher.withoutBodyData(params).then((pjson) => {
-          if (pjson.Fault) {
-            notify({ title: 'CAS Error', lvl: 'error', msg: pjson.Fault.Code });
-          } else {
-            props.fnHandle(pjson.PropertyTable.Properties[0].CanonicalSMILES);
-          }
-        }).catch((err) => {
-          notify({ title: 'CAS Error', lvl: 'error', msg: err });
-        });
-      } else {
-        props.fnHandle(cjson.smile);
-      }
-    }).catch((err) => {
-      notify({ title: 'CAS Error', lvl: 'error', msg: err });
-    }).finally(() => {
-      LoadingActions.stop();
-      inputCas.current.value = '';
-    });
-  };
-
-  const sbTitle = (
-    <span>
-      <span className="fi-tit">Fast create by</span>
-      <input className="fi-txt" type="text" ref={inputCas} />
-    </span>
-  );
-
-  return (
-    <OverlayTrigger
-      placement="top"
-      delayShow={500}
-      overlay={<Tooltip id="_fast_create_btn">Fast create by CAS RN (with dashes) or SMILES</Tooltip>}
-    >
-      <FormGroup className="fast-input">
-        <InputGroup bsSize="small">
-          <SplitButton
-            id="_fast_create_btn_split"
-            pullRight
-            bsStyle="default"
-            bsSize="xsmall"
-            onToggle={(isOpen, e) => { if (e) { e.stopPropagation(); } }}
-            title={sbTitle}
-            onClick={(e) => { e.stopPropagation(); }}
-            className="fi-btn"
-          >
-            <MenuItem onSelect={(eventKey, e) => { e.stopPropagation(); search(); }}>
-              by CAS
-            </MenuItem>
-            <MenuItem onSelect={(eventKey, e) => { e.stopPropagation(); searchSmile(); }}>
-              by SMILES
-            </MenuItem>
-          </SplitButton>
-        </InputGroup>
-      </FormGroup>
-    </OverlayTrigger>
-  );
-};
-
-FastInput.propTypes = { fnHandle: PropTypes.func.isRequired };
-
-export default FastInput;
diff --git a/app/packs/src/components/FocusNovnc.js b/app/packs/src/components/FocusNovnc.js
deleted file mode 100644
index 996f5ce7a..000000000
--- a/app/packs/src/components/FocusNovnc.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { ButtonToolbar, Button, ButtonGroup } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-export default class FocusNovnc extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleCursor = this.handleCursor.bind(this);
-  }
-
-  handleFocus() {
-    this.props.handleFocus();
-  }
-
-  handleBlur() {
-    this.props.handleBlur();
-  }
-
-  handleCursor() {
-    this.props.handleCursor();
-  }
-
-  render() {
-    const { connected, isNotFocused, forceCursor } = this.props;
-    const focusedColor = 'btn btn-xs btn-success m-4';
-    const blurredColor = 'btn btn-xs btn-danger m-4';
-    const normalColor = 'btn btn-xs m-2';
-    const somePadding = { padding: '0 0 5px 5px' };
-    const BlurBtn = () => (
-      <Button
-        className={(!isNotFocused || !connected) ? normalColor : blurredColor}
-        disabled={isNotFocused || !connected}
-        onClick={this.handleBlur}
-      > {(!isNotFocused || !connected) ? 'Blur' : 'Blurred'}
-      </Button>
-    );
-    const FocusBtn = () => (
-      <Button
-        className={(isNotFocused || !connected) ? normalColor : focusedColor}
-        disabled={!isNotFocused || !connected}
-        onClick={this.handleFocus}
-      > {isNotFocused ? 'Focus' : 'Focused'}
-      </Button>
-    );
-    const UsersConnected = () => (
-      <span className="title">
-        <i className="fa fa-eye">
-          {this.props.watching}
-        </i>
-        &nbsp;
-        <i className="fa fa-pencil-square-o">
-          {this.props.using}
-        </i>
-      </span>);
-
-    return (
-      <ButtonToolbar>
-        <ButtonGroup style={somePadding}>
-          <BlurBtn />
-          <FocusBtn />
-        </ButtonGroup>
-
-        <Button
-          className={(!forceCursor) ? normalColor : focusedColor}
-          onClick={this.handleCursor}
-          title="force mouse cursor"
-        >
-          <span className="fa-stack ">
-            <i className="fa fa-desktop" aria-hidden="true" />
-            <i className="fa fa-mouse-pointer text-danger" aria-hidden="true" />
-          </span>
-        </Button>
-
-        {connected ? <UsersConnected /> : null}
-      </ButtonToolbar>
-
-    );
-  }
-}
-
-FocusNovnc.propTypes = {
-  watching: PropTypes.number.isRequired,
-  using: PropTypes.number.isRequired,
-  isNotFocused: PropTypes.bool.isRequired,
-  connected: PropTypes.bool.isRequired,
-  forceCursor: PropTypes.bool.isRequired,
-  handleBlur: PropTypes.func.isRequired,
-  handleFocus: PropTypes.func.isRequired,
-  handleCursor: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/FormatComponent.js b/app/packs/src/components/FormatComponent.js
deleted file mode 100644
index 5e89501eb..000000000
--- a/app/packs/src/components/FormatComponent.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Accordion, Button } from 'react-bootstrap';
-import QuillViewer from 'src/components/QuillViewer';
-
-import PanelHeader from 'src/components/common/PanelHeader';
-
-const tryParse = function TryParseToJson(obj) {
-  if (typeof obj === 'object') return obj;
-  return JSON.parse(obj);
-};
-
-function ElementAnalyses({ element, idx }) {
-  const children = element.children.map(x => (
-    <ElementAnalyses key={x.id} element={x} />
-  ));
-
-  let analyses = element.analyses.map((x) => {
-    let kind = x.extended_metadata.kind || '';
-    kind = (kind.split('|')[1] || kind).trim();
-    const header = `Analysis name: ${x.name} - Type: ${kind}`;
-    return (
-      <Panel key={x.id}>
-        <Panel.Heading>
-          {header}
-        </Panel.Heading>
-        <Panel.Body>
-          <QuillViewer value={tryParse(x.extended_metadata.content)} />
-        </Panel.Body>
-      </Panel>
-    );
-  });
-
-  if (element.analyses.length === 0) {
-    analyses = (
-      <p> This {element.type} does not have any analysis.</p>
-    );
-  }
-
-  return (
-    <Panel
-      key={element.id}
-      eventKey={idx}
-    >
-      <Panel.Heading>
-        {`${element.type}: ${element.short_label}`}
-      </Panel.Heading>
-      <Panel.Body>
-      {children}
-      {analyses}
-      </Panel.Body>
-    </Panel>
-  );
-}
-
-function FormatComponentHeader({ onClose, onSave, onFormat }) {
-  const closeBtn = (
-    <Button
-      key="closeBtn"
-      onClick={onClose}
-      bsStyle="danger"
-      bsSize="xsmall"
-      className="button-right"
-    >
-      <i className="fa fa-times" />
-    </Button>
-  );
-  const saveBtn = (
-    <Button
-      key="saveBtn"
-      onClick={onSave}
-      bsStyle="warning"
-      bsSize="xsmall"
-      className="button-right"
-    >
-      <i className="fa fa-floppy-o" />
-    </Button>
-  );
-  const formatBtn = (
-    <Button
-      key="formatBtn"
-      onClick={onFormat}
-      bsStyle="info"
-      bsSize="xsmall"
-      className="button-right"
-    >
-      <i className="fa fa-magic" />
-    </Button>
-  );
-  const btns = [closeBtn, saveBtn, formatBtn];
-
-  return <PanelHeader title="Analyses Formatting" btns={btns} />;
-}
-
-function FormatComponent({
-  list, bsStyle, onSave, onFormat, onClose
-}) {
-  const elements = list.map((el, idx) => (
-    <ElementAnalyses key={el.id} element={el} idx={idx} />
-  ));
-  const header = (
-    <FormatComponentHeader
-      onSave={onSave}
-      onFormat={onFormat}
-      onClose={onClose}
-    />
-  );
-
-  return (
-    <Panel
-      bsStyle={bsStyle}
-      className="format-analysis-panel"
-    >
-      <Panel.Heading>
-        {header}
-      </Panel.Heading>
-      <Panel.Body>
-        <Accordion>{elements}</Accordion>
-      </Panel.Body>
-    </Panel>
-  );
-}
-
-ElementAnalyses.propTypes = {
-  element: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    short_label: PropTypes.string.isRequired,
-    id: PropTypes.number.isRequired,
-    children: PropTypes.arrayOf(PropTypes.object),
-    analyses: PropTypes.arrayOf(PropTypes.object)
-  }).isRequired,
-  idx: PropTypes.number
-};
-
-ElementAnalyses.defaultProps = {
-  idx: null
-};
-
-FormatComponentHeader.propTypes = {
-  onSave: PropTypes.func.isRequired,
-  onFormat: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired
-};
-
-FormatComponent.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.object).isRequired,
-  bsStyle: PropTypes.string,
-  onSave: PropTypes.func.isRequired,
-  onFormat: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired
-};
-
-FormatComponent.defaultProps = {
-  bsStyle: 'info'
-};
-
-export default FormatComponent;
diff --git a/app/packs/src/components/FormatContainer.js b/app/packs/src/components/FormatContainer.js
deleted file mode 100644
index b235fa767..000000000
--- a/app/packs/src/components/FormatContainer.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/* eslint-disable no-param-reassign */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import FormatComponent from 'src/apps/mydb/elements/details/formats/FormatComponent';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ReportStore from 'src/stores/alt/stores/ReportStore';
-import { formatAnalysisContent } from 'src/utilities/ElementUtils';
-
-function extractAnalyses(listEls) {
-  const listObjs = [];
-  listEls.forEach((el) => {
-    let obj = {};
-    if (el.type === 'sample') {
-      obj = {
-        type: 'Sample',
-        id: el.id,
-        short_label: el.short_label,
-        analyses: _.cloneDeep(el.analyses),
-        children: []
-      };
-      listObjs.push(obj);
-    } else if (el.type === 'reaction') {
-      let rAna = [];
-      const ana = el.container.children
-        .filter(x => x.container_type === 'analyses')[0];
-      if (ana) {
-        rAna = ana.children.filter(x => x.container_type === 'analysis');
-      }
-
-      let samplesAna = [];
-      samplesAna = samplesAna.concat(extractAnalyses(el.starting_materials));
-      samplesAna = samplesAna.concat(extractAnalyses(el.products));
-
-      obj = {
-        type: 'Reaction',
-        id: el.id,
-        short_label: el.short_label,
-        analyses: _.cloneDeep(rAna),
-        children: samplesAna
-      };
-
-      listObjs.push(obj);
-    }
-  });
-
-  return listObjs;
-}
-
-export default class FormatContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedObjTags: { sampleIds: [], reactionIds: [] },
-      defaultObjTags: { sampleIds: [], reactionIds: [] },
-      selectedObjs: [],
-      isSaved: true
-    };
-
-    this.onChangeUI = this.onChangeUI.bind(this);
-    this.onChangeRp = this.onChangeRp.bind(this);
-    this.onFormat = this.onFormat.bind(this);
-    this.onSave = this.onSave.bind(this);
-    this.onClose = this.onClose.bind(this);
-  }
-
-  componentDidMount() {
-    ReportStore.listen(this.onChangeRp);
-    UIStore.listen(this.onChangeUI);
-    this.onChangeUI(UIStore.getState());
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onChangeUI);
-    ReportStore.unlisten(this.onChangeRp);
-  }
-
-  onChangeUI(state) {
-    const { selectedObjTags, defaultObjTags } = this.state;
-    ReportActions.updateCheckedTags.defer({
-      uiState: state,
-      reportState: { selectedObjTags, defaultObjTags }
-    });
-  }
-
-  onChangeRp(state) {
-    const selectedObjs = extractAnalyses(state.selectedObjs);
-
-    this.setState({
-      selectedObjs,
-      selectedObjTags: state.selectedObjTags,
-      defaultObjTags: state.defaultObjTags
-    });
-  }
-
-  onFormat() {
-    let selectedObjs = _.cloneDeep(this.state.selectedObjs);
-
-    const formatAnalyses = (el) => {
-      (el.analyses || []).forEach((ana) => {
-        const { content } = ana.extended_metadata;
-        if (typeof content === 'string') {
-          ana.extended_metadata.content = JSON.parse(content);
-        }
-
-        ana.extended_metadata.content = formatAnalysisContent(ana);
-      });
-    };
-
-    selectedObjs = selectedObjs.map((obj) => {
-      formatAnalyses(obj);
-      if (obj.type === 'Reaction') formatAnalyses(obj.children);
-
-      return obj;
-    });
-
-    const isSaved = _.isEqual(selectedObjs, this.state.selectedObjs);
-
-    this.setState({ selectedObjs, isSaved });
-  }
-
-  onSave() {
-    const { selectedObjs } = this.state;
-    const flattenObjs = (objs) => {
-      const flattenedObjs = objs.reduce((acc, cur) => {
-        if (cur.children && cur.children.length > 0) {
-          acc = acc.concat(cur.analyses);
-          return acc.concat(flattenObjs(cur.children));
-        }
-
-        return acc.concat(cur.analyses);
-      }, []);
-
-      return flattenedObjs;
-    };
-
-    const objs = flattenObjs(selectedObjs);
-
-    objs.forEach(obj => ElementActions.updateContainerContent(obj));
-
-    this.setState({ selectedObjs, isSaved: true });
-  }
-
-  onClose() {
-    DetailActions.close(this.props.format, this.state.isSaved);
-  }
-
-  render() {
-    const { selectedObjs, isSaved } = this.state;
-
-    return (
-      <FormatComponent
-        list={selectedObjs}
-        onFormat={this.onFormat}
-        bsStyle={isSaved ? 'primary' : 'info'}
-        onSave={this.onSave}
-        onClose={this.onClose}
-      />
-    );
-  }
-}
-
-FormatContainer.propTypes = {
-  format: PropTypes.shape.isRequired
-};
-
-/* eslint-enable no-param-reassign */
diff --git a/app/packs/src/components/GeneralProcedureDnD.js b/app/packs/src/components/GeneralProcedureDnD.js
deleted file mode 100644
index acf4b1d74..000000000
--- a/app/packs/src/components/GeneralProcedureDnD.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions.js';
-import { UrlSilentNavigation } from 'src/utilities/ElementUtils';
-
-const updRxnOriName = (oriRxn, sourceTag) => {
-  const nextRxn = oriRxn;
-  nextRxn.origin = sourceTag;
-  nextRxn.name = nextRxn.extractNameFromOri(sourceTag);
-  nextRxn.changed = true;
-  return nextRxn;
-};
-
-const gpTarget = {
-  drop(targetProps, monitor) {
-    const sourceProps = monitor.getItem();
-    const source = sourceProps.element;
-    const sourceTag = { id: source.id, short_label: source.short_label };
-    const oriRxn = targetProps.reaction;
-    const nextRxn = updRxnOriName(oriRxn, sourceTag);
-    DetailActions.changeCurrentElement(oriRxn, nextRxn);
-  },
-};
-
-const gpDropCollect = (connect, monitor) => (
-  {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    canDrop: monitor.canDrop(),
-  }
-);
-
-const dndStyle = (canDrop, isOver) => {
-  const style = {};
-  if (canDrop) {
-    style.borderStyle = 'dashed';
-    style.borderWidth = 2;
-    style.opacity = 0.5;
-  }
-  if (isOver) {
-    style.borderColor = '#337ab7';
-    style.opacity = 0.2;
-  }
-  return style;
-};
-
-const showReaction = (reaction) => {
-  UrlSilentNavigation(reaction);
-  ElementActions.fetchReactionById(reaction.id);
-}
-
-const GpContent = ({ reaction }) => (
-  reaction.origin && reaction.origin.short_label
-    ? <span className="c-bs-primary gp-content">
-      <span className="spacer-10" />
-      <a role="link" onClick={() => { showReaction(reaction.origin) }}>{reaction.origin.short_label}</a>
-    </span>
-    : null
-);
-
-const GeneralProcedureDnd = ({ connectDropTarget, isOver, canDrop,
-  reaction }) => {
-  const style = dndStyle(canDrop, isOver);
-
-  return (
-    reaction.role === 'parts'
-      ? compose(connectDropTarget)(
-        <div style={style} className="gp-drop-zone">
-          <i className="fa fa-home c-bs-primary gp-icon" />
-          <GpContent reaction={reaction} />
-        </div>,
-      )
-      : null
-  );
-};
-
-export default compose(
-  DropTarget(DragDropItemTypes.GENERALPROCEDURE, gpTarget, gpDropCollect),
-)(GeneralProcedureDnd);
diff --git a/app/packs/src/components/GraphContainer.js b/app/packs/src/components/GraphContainer.js
deleted file mode 100644
index a916710ba..000000000
--- a/app/packs/src/components/GraphContainer.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* eslint-disable no-param-reassign */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Button, Accordion } from 'react-bootstrap';
-
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ReportStore from 'src/stores/alt/stores/ReportStore';
-
-import ComputedPropsGraphContainer from 'src/components/computedProps/ComputedPropsGraphContainer';
-
-export default class GraphContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedObjTags: { sampleIds: [], reactionIds: [] },
-      defaultObjTags: { sampleIds: [], reactionIds: [] },
-      selectedComputedProps: []
-    };
-
-    this.onChangeUI = this.onChangeUI.bind(this);
-    this.onChangeRp = this.onChangeRp.bind(this);
-
-    this.onClose = this.onClose.bind(this);
-  }
-
-  componentDidMount() {
-    ReportStore.listen(this.onChangeRp);
-    UIStore.listen(this.onChangeUI);
-    this.onChangeUI(UIStore.getState());
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onChangeUI);
-    ReportStore.unlisten(this.onChangeRp);
-  }
-
-  onClose() {
-    DetailActions.close(this.props.graph, true);
-  }
-
-  onChangeUI(state) {
-    const { selectedObjTags, defaultObjTags } = this.state;
-    ReportActions.updateCheckedTags.defer({
-      uiState: state,
-      reportState: { selectedObjTags, defaultObjTags }
-    });
-  }
-
-  onChangeRp(state) {
-    const { selectedObjTags, defaultObjTags } = state;
-    const selectedComputedProps = [];
-    state.selectedObjs.filter(s => s.molecule_computed_props).forEach((s) => {
-      const cprops = s.molecule_computed_props.sort((a, b) => (
-        a.updated_at - b.updated_at
-      ));
-      const cprop = {
-        name: s.short_label,
-        svgPath: `/images/samples/${s.sample_svg_file}`,
-        props: cprops[cprops.length - 1]
-      };
-      selectedComputedProps.push(cprop);
-    });
-
-    this.setState({
-      selectedComputedProps,
-      selectedObjTags,
-      defaultObjTags
-    });
-  }
-
-  render() {
-    const { selectedComputedProps } = this.state;
-    const header = (
-      <div>
-        {'Graph'}
-        <div className="button-right">
-          <Button
-            key="closeBtn"
-            onClick={this.onClose}
-            bsStyle="danger"
-            bsSize="xsmall"
-            className="button-right"
-          >
-            <i className="fa fa-times" />
-          </Button>
-        </div>
-      </div>
-    );
-
-    return (
-      <Panel
-        bsStyle="primary"
-      >
-        <Panel.Heading>
-          {header}
-        </Panel.Heading>
-        <Panel.Body>
-          <Accordion>
-            <ComputedPropsGraphContainer
-              show
-              style={{ overflowY: 'auto', maxHeight: 'calc(100vh - 303px)' }}
-              graphData={selectedComputedProps}
-            />
-          </Accordion>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-GraphContainer.propTypes = {
-  graph: PropTypes.object.isRequired
-};
diff --git a/app/packs/src/components/GroupElement.js b/app/packs/src/components/GroupElement.js
deleted file mode 100644
index 3b36d42d1..000000000
--- a/app/packs/src/components/GroupElement.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import React from 'react';
-import { ButtonGroup, OverlayTrigger, Popover, Nav, NavDropdown, NavItem, MenuItem, Glyphicon, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel, Col, Row } from 'react-bootstrap';
-import UsersFetcher from './fetchers/UsersFetcher';
-import Select from 'react-select';
-import _ from 'lodash';
-
-export default class GroupElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: props.currentState.currentUser || { name: 'unknown' },
-      showUsers: false,
-      showRowAdd: false,
-    };
-
-    this.toggleUsers = this.toggleUsers.bind(this);
-    this.toggleRowAdd = this.toggleRowAdd.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  toggleUsers() {
-    this.setState({
-      showUsers: !this.state.showUsers
-    })
-  }
-
-  toggleRowAdd() {
-    this.setState({
-      showRowAdd: !this.state.showRowAdd
-    })
-  }
-
-  handleSelectUser(val) {
-    if (val) {
-      this.setState({ selectedUsers: val });
-    }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        let usersEntries = res.users.filter(u => u.user_type === 'Person')
-          .map((u) => {
-            return {
-              value: u.id,
-              name: u.name,
-              label: u.name + " (" + u.abb + ")"
-            }
-          });
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  renderDeleteButton(type, groupRec, userRec) {
-    let msg = 'remove yourself from the group';
-    if (type === 'user') {
-      if (userRec.id === this.state.currentUser.id) {
-        msg = 'remove yourself from the group';
-      } else {
-        msg = `remove user: ${userRec.name}`;
-      }
-    } else {
-      msg = `remove group: ${groupRec.name}`;
-    }
-
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} ?<br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(type, groupRec, userRec)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
-            No
-          </Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <ButtonGroup className="actions">
-        <OverlayTrigger
-          animation
-          placement="right"
-          root
-          trigger="focus"
-          overlay={popover}
-        >
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(groupRec, userRec)}>
-            <i className="fa fa-trash-o" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-  }
-
-  renderAdminButtons(group) {
-    const { selectedUsers, showRowAdd } = this.state;
-    if (group.admins && group.admins.length > 0 && group.admins[0].id === this.state.currentUser.id) {
-      return (
-        <td>
-          <Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-list" onClick={this.toggleUsers} />&nbsp;&nbsp;
-          <Button bsSize="xsmall" type="button" bsStyle="success" className="fa fa-plus" onClick={this.toggleRowAdd} />&nbsp;&nbsp;
-          {this.renderDeleteButton('group', group)}
-          <span className={'collapse' + (showRowAdd ? 'in' : '')}>
-            <Select.AsyncCreatable
-              multi
-              isLoading
-              backspaceRemoves
-              value={selectedUsers}
-              valueKey="value"
-              labelKey="label"
-              matchProp="name"
-              placeholder="Select users"
-              promptTextCreator={this.promptTextCreator}
-              loadOptions={this.loadUserByName}
-              onChange={this.handleSelectUser}
-            />
-            <Button bsSize="xsmall" type="button" bsStyle="warning" onClick={() => this.addUser(group)}>Save to group</Button>
-          </span>
-        </td>
-      );
-    }
-    return (
-      <td><Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-list" onClick={this.toggleUsers} /></td>
-    );
-  }
-
-  renderUserButtons(groupRec, userRec = null) {
-    if ((groupRec.admins && groupRec.admins.length > 0 && groupRec.admins[0].id === this.state.currentUser.id) || userRec.id === this.state.currentUser.id) {
-      return this.renderDeleteButton('user', groupRec, userRec);
-    }
-    return (<div />);
-  }
-
-  // confirm action after pressing yes
-  // if type is group, call deleteGroup api, if type is user, call deleteUser api
-  confirmDelete(type, groupRec, userRec) {
-    switch (type) {
-      case 'group':
-        this.props.onDeleteGroup(groupRec.id)
-        break;
-      case 'user':
-        this.props.onDeleteUser(groupRec, userRec);
-        break;
-      default:
-        break;
-    }
-  }
-
-  // add multiple users
-  // replace with response result and then setState (with forceUpdate)
-  addUser(groupRec) {
-    const { selectedUsers} = this.state;
-
-    const userIds = [];
-    selectedUsers.map((g) => {
-      userIds.push(g.value);
-      return true;
-    });
-    
-    UsersFetcher.updateGroup({ id: groupRec.id, destroy_group: false, add_users: userIds })
-      .then((group) => {
-        const idx = _.findIndex(this.props.currentGroup, function (o) { return o.id == group.group.id; });
-        this.props.currentGroup.splice(idx, 1, group.group);
-        this.setState({ selectedUsers: null });
-        this.props.onChangeData(this.props.currentGroup);
-      });
-  }
-
-  render() {
-    const { groupElement } = this.props;
-    const { showUsers: showInfo } = this.state;
-    return (
-      <tbody key={`tbody_${groupElement.id}`}>
-        <tr key={`row_${groupElement.id}`} style={{ fontWeight: 'bold' }}>
-          <td>{groupElement.name}</td>
-          <td>{groupElement.initials}</td>
-          <td>{groupElement.admins && groupElement.admins.length > 0 && groupElement.admins[0].name}</td>
-          {this.renderAdminButtons(groupElement)}
-        </tr>
-        <tr className={'collapse' + (showInfo ? 'in' : '')}>
-          <td colSpan="4">
-            <Table>
-              <tbody>
-                {groupElement.users.map(u => (
-                  <tr key={`row_${groupElement.id}_${u.id}`} style={{ backgroundColor: '#c4e3f3' }}>
-                    <td width="20%">{u.name}</td>
-                    <td width="10%">{u.initials}</td>
-                    <td width="20%"></td>
-                    <td width="50%">{this.renderUserButtons(groupElement, u)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </Table>
-          </td>
-        </tr>
-      </tbody>);
-  }
-}
diff --git a/app/packs/src/components/List.js b/app/packs/src/components/List.js
deleted file mode 100644
index 415e51c8b..000000000
--- a/app/packs/src/components/List.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import Immutable from 'immutable';
-import React from 'react';
-import { Col, Nav, NavItem, Row, Tab, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import KeyboardActions from './actions/KeyboardActions';
-import UIActions from './actions/UIActions';
-import UserActions from './actions/UserActions';
-import MatrixCheck from './common/MatrixCheck';
-import ElementsTable from './ElementsTable';
-import ElementsTableSettings from './ElementsTableSettings';
-import ElementStore from './stores/ElementStore';
-import UIStore from './stores/UIStore';
-import UserStore from './stores/UserStore';
-import ArrayUtils from './utils/ArrayUtils';
-
-
-function getSortedHash(inputHash) {
-  const resultHash = {};
-
-  const keys = Object.keys(inputHash);
-  keys.sort((a, b) => inputHash[a] - inputHash[b]).forEach((k) => {
-    resultHash[k] = inputHash[k];
-  });
-  return resultHash;
-}
-
-function getArrayFromLayout(layout, isVisible) {
-  let array = Immutable.List();
-  let sortedLayout = layout;
-
-  if (isVisible == true) {
-    sortedLayout = getSortedHash(sortedLayout);
-  }
-
-  Object.keys(sortedLayout).forEach((key, idx) => {
-    const order = sortedLayout[key];
-    if (isVisible && order < 0) { return; }
-    if (!isVisible && order > 0) { return; }
-
-    if (isVisible == true) {
-      array = array.set(idx + 1, key);
-    } else {
-      array = array.set(Math.abs(order), key);
-    }
-  });
-
-  array = array.filter(n => n != undefined);
-  return array;
-}
-
-export default class List extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      totalElements: {},
-      visible: Immutable.List(),
-      hidden: Immutable.List(),
-      genericEls: [],
-      currentTab: 0,
-      totalCheckedElements: {},
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onChangeUser = this.onChangeUser.bind(this);
-    this.onChangeUI = this.onChangeUI.bind(this);
-    this.initState = this.initState.bind(this);
-    this.handleTabSelect = this.handleTabSelect.bind(this);
-  }
-
-  componentDidMount() {
-    ElementStore.listen(this.onChange);
-    UserStore.listen(this.onChangeUser);
-    UIStore.listen(this.onChangeUI);
-
-    this.initState();
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps.overview !== this.props.overview ||
-    nextProps.showReport !== this.props.showReport ||
-    nextProps.totalElements !== this.state.totalElements ||
-    nextState.visible !== this.state.visible ||
-    nextState.hidden !== this.state.hidden ||
-    nextState.currentTab !== this.state.currentTab;
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.onChange);
-    UserStore.unlisten(this.onChangeUser);
-    UIStore.unlisten(this.onChangeUI);
-  }
-
-  onChange(state) {
-    const { totalElements } = this.state;
-    Object.keys(state.elements).forEach((key) => {
-      totalElements[key] = state.elements[key]?.totalElements;
-    });
-
-    this.setState({
-      totalElements
-    });
-  }
-
-  onChangeUser(state) {
-    let visible = '';
-    let hidden = '';
-    let currentTabIndex = 0;
-
-    const { currentType } = state;
-    let type = state.currentType;
-
-    if (typeof (state.profile) !== 'undefined' && state.profile &&
-      typeof (state.profile.data) !== 'undefined' && state.profile.data) {
-      visible = getArrayFromLayout(state.profile.data.layout, true);
-      hidden = getArrayFromLayout(state.profile.data.layout, false);
-      currentTabIndex = visible.findIndex(e => e === currentType);
-      if (type === '') { type = visible.get(0); }
-    }
-    if (hidden.size === 0) {
-      hidden = ArrayUtils.pushUniq(hidden, 'hidden');
-    }
-
-    if (currentTabIndex < 0) currentTabIndex = 0;
-
-    if (typeof type !== 'undefined' && type != null) {
-      KeyboardActions.contextChange.defer(type);
-    }
-
-    this.setState({
-      currentTab: currentTabIndex,
-      genericEls: state.genericEls || [],
-      visible,
-      hidden
-    });
-  }
-
-
-  onChangeUI(state) {
-    const { totalCheckedElements } = this.state;
-    let forceUpdate = false;
-    // const genericNames = (genericEls && genericEls.map(el => el.name)) || [];
-    let klasses = [];
-    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
-      klasses = UIStore.getState().klasses;
-    }
-    const elNames = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].concat(klasses);
-
-    elNames.forEach((type) => {
-      const elementUI = state[type] || {
-        checkedAll: false, checkedIds: [], uncheckedIds: [], currentId: null
-      };
-      const element = ElementStore.getState().elements[`${type}s`];
-      const nextCount = elementUI.checkedAll ?
-        (element.totalElements - elementUI.uncheckedIds.size) :
-        elementUI.checkedIds.size;
-      if (!forceUpdate && nextCount !== (totalCheckedElements[type] || 0)) { forceUpdate = true; }
-      totalCheckedElements[type] = nextCount;
-    });
-
-    this.setState(previousState => ({ ...previousState, totalCheckedElements }));
-    // could not use shouldComponentUpdate because state.totalCheckedElements
-    // has already changed independently of setstate
-    if (forceUpdate) { this.forceUpdate(); }
-  }
-
-  handleTabSelect(tab) {
-    UserActions.selectTab(tab);
-
-    // TODO sollte in tab action handler
-    const uiState = UIStore.getState();
-    const type = this.state.visible.get(tab);
-
-    if (!uiState[type] || !uiState[type].page) { return; }
-
-    const { page } = uiState[type];
-
-    UIActions.setPagination({ type, page });
-
-    KeyboardActions.contextChange(type);
-  }
-
-  initState() {
-    this.onChange(ElementStore.getState());
-  }
-
-  getSortedHash(inputHash) {
-    var resultHash = {};
-
-    var keys = Object.keys(inputHash);
-    keys.sort(function (a, b) {
-      return inputHash[a] - inputHash[b]
-    }).forEach(function (k) {
-      resultHash[k] = inputHash[k];
-    });
-    return resultHash;
-  }
-
-  getArrayFromLayout(layout, isVisible) {
-    let array = Immutable.List();
-
-    if (isVisible == true) {
-      layout = this.getSortedHash(layout);
-    }
-
-    Object.keys(layout).forEach(function (key, idx) {
-      const order = layout[key]
-      if (isVisible && order < 0) { return; }
-      if (!isVisible && order > 0) { return; }
-
-      if (isVisible == true) {
-        array = array.set(idx+1, key)
-      } else {
-        array = array.set(Math.abs(order), key)
-      }
-    })
-
-    array = array.filter( n => ["sample", "reaction"].includes(n));
-    return array;
-  }
-
-  render() {
-    const {
-      visible, hidden, currentTab, totalCheckedElements
-    } = this.state;
-    const constEls = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'];
-    const { overview, showReport } = this.props;
-    const elementState = this.state;
-
-    const navItems = [];
-    const tabContents = [];
-    for (let i = 0; i < visible.size; i += 1) {
-      const value = visible.get(i);
-
-      let iconClass = `icon-${value}`;
-      let ttl = (<Tooltip id="_tooltip_history" className="left_tooltip">{value && (value.replace('_', ' ').replace(/(^\w|\s\w)/g, m => m.toUpperCase()))}</Tooltip>);
-
-      if (!constEls.includes(value)) {
-        const genericEl = (this.state.genericEls &&
-                           this.state.genericEls.find(el => el.name === value)) || {};
-        iconClass = `${genericEl.icon_name} icon_generic_nav`;
-        ttl = (<Tooltip id="_tooltip_history" className="left_tooltip">{genericEl.label}<br />{genericEl.desc}</Tooltip>);
-      }
-
-
-      const navItem = (
-        <NavItem eventKey={i} key={`${value}_navItem`}>
-          <OverlayTrigger delayShow={500} placement="top" overlay={ttl}>
-            <i className={iconClass} />
-          </OverlayTrigger>
-          <span style={{ paddingLeft: 5 }}>
-            {elementState.totalElements &&
-                      elementState.totalElements[`${value}s`]}
-            ({totalCheckedElements[value] || 0})
-          </span>
-        </NavItem>
-      );
-      const tabContent = (
-        <Tab.Pane eventKey={i} key={`${value}_tabPanel`}>
-          <ElementsTable
-            overview={overview}
-            showReport={showReport}
-            type={value}
-          />
-        </Tab.Pane>
-      );
-
-      navItems.push(navItem);
-      tabContents.push(tabContent);
-    }
-
-    return (
-      <Tab.Container
-        id="tabList"
-        defaultActiveKey={0}
-        activeKey={currentTab}
-        onSelect={this.handleTabSelect}
-      >
-        <Row className="clearfix">
-          <Col sm={12}>
-            <Nav bsStyle="tabs">
-              {navItems}
-              &nbsp;&nbsp;&nbsp;
-              <ElementsTableSettings
-                visible={visible}
-                hidden={hidden}
-                ref={(m) => { this.elementsTableSettings = m; }}
-              />
-            </Nav>
-          </Col>
-          <Col sm={12}>
-            <Tab.Content animation>
-              {tabContents}
-            </Tab.Content>
-          </Col>
-        </Row>
-      </Tab.Container>
-    );
-  }
-}
diff --git a/app/packs/src/components/LiteratureCommon.js b/app/packs/src/components/LiteratureCommon.js
deleted file mode 100644
index b4c0b8fc6..000000000
--- a/app/packs/src/components/LiteratureCommon.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, FormControl, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
-import uuid from 'uuid';
-import Literature from 'src/models/Literature';
-import { CitationType, CitationTypeMap } from 'src/apps/mydb/elements/details/literature/CitationType';
-import Cite from 'citation-js';
-
-const RefByUserInfo = ({ info, litype }) => {
-  if (typeof (info) === 'undefined' || !info || info.length === 0) {
-    return (<div />);
-  }
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={
-        <Tooltip id={`ref_by_user_${uuid.v4()}`} className="left_tooltip bs_tooltip">
-          Reference added by
-          {
-            Object.keys(info).map(lid => (litype[lid] ? ` ${info[lid]} (${CitationTypeMap[litype[lid]].def})` : info[lid])).join(', ')
-          }
-        </Tooltip>
-      }
-    >
-      <i className="fa fa-book" aria-hidden="true" />
-    </OverlayTrigger>
-  );
-};
-
-
-// const Cite = require('citation-js');
-
-const LiteralType = ({ val, handleInputChange, disabled = false }) => (
-  <FormControl
-    componentClass="select"
-    onChange={event => handleInputChange('litype', event)}
-    placeholder="type"
-    value={val}
-    disabled={disabled}
-  >
-    {CitationType.map(e => (<option key={`_litype_opt_${e}`} value={e}>{CitationTypeMap[e].def}</option>))}
-  </FormControl>
-);
-
-const LiteratureInput = ({ literature, handleInputChange, field, placeholder }) => (
-  <FormControl
-    type="text"
-    onChange={event => handleInputChange(field, event)}
-    placeholder={placeholder}
-    value={literature[field] || ''}
-  />
-);
-
-const isLiteratureValid = literature => (
-  literature.title !== '' && literature.url.concat(literature.doi) !== ''
-);
-
-const AddButton = ({ onLiteratureAdd, literature, title }) => (
-  <Button
-    bsStyle="success"
-    bsSize="small"
-    onClick={() => onLiteratureAdd(literature)}
-    style={{ marginTop: 2 }}
-    disabled={!isLiteratureValid(literature)}
-    title={title}
-  >
-    <i className="fa fa-plus" />
-  </Button>
-);
-
-AddButton.propTypes = {
-  onLiteratureAdd: PropTypes.func.isRequired,
-  literature: PropTypes.instanceOf(Literature).isRequired,
-  title: PropTypes.string,
-};
-
-AddButton.defaultProps = {
-  title: 'add citation'
-};
-
-const literatureUrl = (literature) => {
-  const { url } = literature;
-  if (url.match(/https?\:\/\//)) {
-    return url;
-  }
-  return `//${url}`;
-};
-
-const sanitizeDoi = (doi) => {
-  const m = doi.match(/(?:\.*10\.)(\S+)\s*/);
-  return m ? '10.'.concat(m[1]) : null;
-};
-
-const doiValid = (doi) => {
-  const sanitized = sanitizeDoi(doi);
-  return sanitized && sanitized.match(/10.\w+\/\S+/) && true;
-};
-
-const literatureContent = (literature, onlyText) => {
-  let content;
-  if (literature.refs && literature.refs.bibliography) {
-    const { bibliography } = literature.refs;
-    content = bibliography;
-  } else if (literature.refs && literature.refs.bibtex) {
-    let litBibtex = literature.refs.bibtex;
-    if (litBibtex.split('{').length > 1) {
-      let indexData = litBibtex.split('{')[1];
-      indexData = indexData.substr(0, indexData.lastIndexOf(','));
-      litBibtex = litBibtex.replace(indexData, indexData.replace(/[^a-zA-Z0-9\-_]/g, ''));
-    }
-    const citation = new Cite(litBibtex);
-    if (onlyText) {
-      content = citation.format('bibliography', { format: 'text', template: 'apa' });
-    } else {
-      content = (
-        <div>
-          {citation.format('bibliography', { format: 'text', template: 'apa' })}
-        </div>
-      );
-    }
-  } else if (onlyText) {
-    content = literature.title || ' ';
-  } else {
-    content = <span>{literature.title}{literature.year ? `, ${literature.year}` : null}</span>;
-  }
-  return content;
-};
-
-const Citation = ({ literature }) => {
-  const {
-    title, doi, url, isbn
-  } = literature;
-  const formatedDoi = doi ? `https://dx.doi.org/${sanitizeDoi(doi)}` : null;
-  const link = formatedDoi || url || isbn;
-  const content = literatureContent(literature);
-  return (
-    <a href={link} target="_blank" rel="noopener noreferrer" title={title} style={{ wordBreak: 'break-word' }} onClick={e => e.stopPropagation()}>{content}</a>
-  );
-};
-Citation.propTypes = {
-  literature: PropTypes.any.isRequired,
-};
-
-const CitationUserRow = ({ literature, userId }) => (
-  <span>added by {userId && literature.user_id === userId ? 'me' : literature.user_name}
-    &nbsp;
-    {(typeof literature.litype == 'undefined' || literature.litype == null || literature.litype == '') ? '' : `, type: ${literature.litype}`}
-  </span>
-);
-
-CitationUserRow.propTypes = {
-  literature: PropTypes.instanceOf(Literature).isRequired,
-  userId: PropTypes.number,
-};
-CitationUserRow.defaultProps = {
-  userId: 0,
-};
-
-const groupByCitation = literatures => (
-  literatures.keySeq().toArray().sort((i, j) => {
-    // group by literature id then sort by user id
-    const a = literatures.get(i);
-    const b = literatures.get(j);
-    return ((a.id === b.id) ? (a.user_id - b.user_id) : (a.id - b.id));
-  }).reduce((acc, currentValue, i, array) => {
-    // duplicate first row of each literature group
-    acc.push(currentValue);
-    if (i > 0) {
-      const a = literatures.get(array[i]);
-      const b = literatures.get(array[i - 1]);
-      if (a.id !== b.id) { acc.push(currentValue); }
-    } else { acc.push(currentValue); }
-    return acc;
-  }, [])
-);
-
-const sortByElement = literatures => (
-  literatures.keySeq().toArray().sort((i, j) => {
-    // group by literature id then sort by user id
-    const a = literatures.get(i);
-    const b = literatures.get(j);
-    if (a.element_id === b.element_id && a.element_type === b.element_type) {
-      return (a.id - b.id);
-    }
-    return (a.element_id - b.element_id);
-  }).reduce((acc, currentValue, i, array) => {
-    // duplicate first row of each literature group
-    acc.push(currentValue);
-    if (i > 0) {
-      const a = literatures.get(array[i]);
-      const b = literatures.get(array[i - 1]);
-      if (a.id !== b.id || (a.element_id !== b.element_id || a.element_type !== b.element_type)) {
-        acc.push(currentValue);
-      }
-    } else { acc.push(currentValue); }
-    return acc;
-  }, [])
-);
-
-const sortByReference = literatures => (
-  literatures.keySeq().toArray().sort((i, j) => {
-    // group by literature id then sort by user id
-    const a = literatures.get(i);
-    const b = literatures.get(j);
-    if (a.id === b.id) {
-      return ((a.element_id === b.element_id && a.element_type === b.element_type) ?
-        (a.user_id - b.user_id) : (a.element_updated_at - b.element_updated_at));
-    }
-    return (a.id - b.id);
-  }).reduce((acc, currentValue, i, array) => {
-    // duplicate first row of each literature group
-    acc.push(currentValue);
-    if (i > 0) {
-      const a = literatures.get(array[i]);
-      const b = literatures.get(array[i - 1]);
-      if (a.id !== b.id) { acc.push(currentValue); }
-    } else { acc.push(currentValue); }
-    return acc;
-  }, [])
-);
-
-export {
-  Citation,
-  CitationUserRow,
-  doiValid,
-  sanitizeDoi,
-  literatureUrl,
-  AddButton,
-  isLiteratureValid,
-  LiteratureInput,
-  groupByCitation,
-  sortByElement,
-  sortByReference,
-  literatureContent,
-  LiteralType,
-  RefByUserInfo
-};
diff --git a/app/packs/src/components/LiteratureDetails.js b/app/packs/src/components/LiteratureDetails.js
deleted file mode 100644
index 76af5c7e8..000000000
--- a/app/packs/src/components/LiteratureDetails.js
+++ /dev/null
@@ -1,526 +0,0 @@
-import React, { Component } from 'react';
-import Clipboard from 'clipboard';
-import PropTypes from 'prop-types';
-import {
-  Table,
-  PanelGroup,
-  Button,
-  Panel,
-  ListGroup,
-  ListGroupItem,
-  Row,
-  Col,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-import Immutable from 'immutable';
-import { uniqBy } from 'lodash';
-import {
-  Citation,
-  CitationUserRow,
-  doiValid,
-  sanitizeDoi,
-  AddButton,
-  LiteratureInput,
-  sortByElement,
-  LiteralType,
-  literatureContent
-} from 'src/apps/mydb/elements/details/literature/LiteratureCommon';
-import Literature from 'src/models/Literature';
-import LiteratureMap from 'src/models/LiteratureMap';
-import LiteraturesFetcher from 'src/fetchers/LiteraturesFetcher';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import PanelHeader from 'src/components/common/PanelHeader';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-
-const Cite = require('citation-js');
-
-const CloseBtn = ({ onClose }) => (
-  <Button
-    key="closeBtn"
-    onClick={onClose}
-    bsStyle="danger"
-    bsSize="xsmall"
-    className="button-right"
-  >
-    <i className="fa fa-times" />
-  </Button>
-);
-
-CloseBtn.propTypes = {
-  onClose: PropTypes.func.isRequired,
-};
-
-const clipboardTooltip = () => (
-  <Tooltip id="assign_button">copy to clipboard</Tooltip>
-);
-
-const ElementLink = ({ literature }) => {
-  const {
-    external_label,
-    short_label,
-    name,
-    element_type,
-    element_id,
-  } = literature;
-  const type = element_type && element_type.toLowerCase();
-  return (
-    <Button
-      title={`${external_label ? external_label.concat(' - ') : ''}${name}`}
-      onClick={() => {
-        const { uri, namedParams } = Aviator.getCurrentRequest();
-        const uriArray = uri.split(/\//);
-        if (type && element_id) {
-          Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/${type}/${element_id}`);
-        }
-      }}
-    >
-      <i className={element_type ? 'icon-'.concat(type) : ''} />
-      &nbsp; {short_label}
-    </Button>
-  );
-};
-ElementLink.propTypes = {
-  literature: PropTypes.instanceOf(Literature).isRequired,
-};
-
-const ElementTypeLink = ({ literature, type }) => {
-  const {
-    count
-  } = literature;
-  return (
-    <Button title={`cited in ${count} ${type}${count && count > 1 ? 's' : ''}`}>
-      <i className={`icon-${type}`} />
-      &nbsp; {count}
-    </Button>
-  );
-};
-ElementTypeLink.propTypes = {
-  literature: PropTypes.instanceOf(Literature).isRequired,
-  type: PropTypes.string
-};
-ElementTypeLink.defaultProps = {
-  type: 'sample'
-};
-
-const CitationTable = ({ rows, sortedIds, userId, removeCitation }) => (
-  <Table>
-    <tbody>
-      {sortedIds.map((id, k, ids) => {
-        const citation = rows.get(id);
-        const prevCit = (k > 0) ? rows.get(ids[k - 1]) : null;
-        const sameRef = prevCit && prevCit.id === citation.id;
-        const sameElement = prevCit && prevCit.element_id === citation.element_id && prevCit.element_type === citation.element_type;
-        return sameRef && sameElement ? (
-          <tr key={`header-${id}-${citation.id}`} className={`collapse cit_${citation.id}-${citation.element_type}_${citation.element_id}`}>
-            <td />
-            <td className="padding-right">
-              <CitationUserRow literature={citation} userId={userId} />
-            </td>
-            <td>
-              <Button
-                bsSize="small"
-                bsStyle="danger"
-                onClick={() => removeCitation(citation)}
-              >
-                <i className="fa fa-trash-o" />
-              </Button>
-            </td>
-          </tr>
-        ) : (
-          <tr key={id} className={``}>
-            <td>{sameElement ? null : <ElementLink literature={citation} />}</td>
-            <td className="padding-right">
-              <Citation literature={citation} />
-            </td>
-            <td>
-            </td>
-          </tr>
-        );
-      })}
-    </tbody>
-  </Table>
-);
-
-export default class LiteratureDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...this.props.literatureMap,
-      literature: Literature.buildEmpty(),
-      sorting: 'element',
-      sortedIds: [],
-      selectedRefs: new Immutable.Map()
-    };
-    this.onClose = this.onClose.bind(this);
-    this.handleUIStoreChange = this.handleUIStoreChange.bind(this);
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleLiteratureAdd = this.handleLiteratureAdd.bind(this);
-    this.handleLiteratureRemove = this.handleLiteratureRemove.bind(this);
-    this.fetchDOIMetadata = this.fetchDOIMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    const { currentCollection, sample, reaction } = UIStore.getState();
-    LiteraturesFetcher.fetchReferencesByCollection(currentCollection).then((literatures) => {
-      this.setState(prevState => ({
-        ...prevState,
-        ...literatures,
-        currentCollection,
-        sample: { ...sample },
-        reaction: { ...reaction },
-
-      }));
-    });
-    UIStore.listen(this.handleUIStoreChange);
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-    UIStore.unlisten(this.handleUIStoreChange);
-  }
-
-  onClose() {
-    DetailActions.close(this.props.literatureMap, true);
-  }
-
-  handleUIStoreChange(state) {
-    const cCol = this.state.currentCollection;
-    const { currentCollection, sorting } = state;
-
-    if (cCol && currentCollection &&
-      (cCol.id !== currentCollection.id || cCol.is_sync_to_me !== currentCollection.is_sync_to_me)
-    ) {
-      LiteraturesFetcher.fetchReferencesByCollection(currentCollection).then((literatures) => {
-
-        this.setState(prevState => ({
-          ...prevState,
-          ...literatures,
-          currentCollection,
-          sample: {},
-          reaction: {},
-        }));
-      });
-      return null;
-    }
-    const { sample, reaction } = state;
-    const prevSample = this.state.sample;
-    const prevReaction = this.state.reaction;
-
-    if (prevSample.checkedIds !== sample.checkedIds
-      || prevSample.unCheckedIds !== sample.unCheckedIds
-      || prevSample.checkedAll !== sample.checkedAll
-      || prevReaction.checkedIds !== reaction.checkedIds
-      || prevReaction.unCheckedIds !== reaction.unCheckedIds
-      || prevReaction.checkedAll !== reaction.checkedAll
-    ) {
-      const params = {
-        sample,
-        reaction,
-        id: currentCollection.id,
-        is_sync_to_me: currentCollection.is_sync_to_me
-
-      };
-      LiteraturesFetcher.postReferencesByUIState(params).then((selectedRefs) => {
-        const sortedIds = sortByElement(selectedRefs);
-        this.setState(prevState => ({
-          ...prevState,
-          selectedRefs,
-          currentCollection,
-          sample: { ...sample },
-          reaction: { ...reaction },
-          sortedIds
-        }));
-      });
-    }
-    return null;
-  }
-
-  handleLiteratureRemove(literature) {
-    const { element_type, element_id } = literature;
-    LiteraturesFetcher.deleteElementReference({ element: { type: element_type.toLowerCase(), id: element_id }, literature })
-      .then(() => {
-        this.setState(prevState => ({
-          ...prevState,
-          literatures: prevState.selectedRefs.delete(literature.literal_id),
-          sortedIds: sortByElement(prevState.selectedRefs.delete(literature.literal_id))
-        }));
-      });
-  }
-
-  handleInputChange(type, event) {
-    const { literature } = this.state;
-    const { value } = event.target;
-    switch (type) {
-      case 'url':
-        literature.url = value;
-        break;
-      case 'title':
-        literature.title = value;
-        break;
-      case 'doi':
-        literature.doi = value;
-        break;
-      case 'litype':
-        literature.litype = value;
-        break;
-      default:
-        break;
-    }
-    this.setState(prevState => ({ ...prevState, literature }));
-  }
-
-  handleLiteratureAdd(literature) {
-    const { doi } = literature;
-
-    const { currentCollection, sample, reaction } = UIStore.getState();
-    const params = {
-      sample,
-      reaction,
-      id: currentCollection.id,
-      is_sync_to_me: currentCollection.is_sync_to_me,
-      ref: { ...literature, doi: sanitizeDoi(doi || '') }
-    };
-    LiteraturesFetcher.postReferencesByUIState(params).then((selectedRefs) => {
-      this.setState(prevState => ({
-        ...prevState,
-        selectedRefs,
-        currentCollection,
-        sample: { ...sample },
-        reaction: { ...reaction },
-        sortedIds: sortByElement(selectedRefs),
-      }));
-    });
-  }
-
-  fetchDOIMetadata() {
-    const { doi } = this.state.literature;
-    NotificationActions.removeByUid('literature');
-    Cite.async(sanitizeDoi(doi)).then((json) => {
-      if (json.data && json.data.length > 0) {
-        const citation = new Cite(json.data[0]);
-        const { title, year } = json.data[0];
-        this.setState(prevState => ({
-          ...prevState,
-          literature: {
-            ...prevState.literature,
-            title,
-            year,
-            refs: {
-              citation,
-              bibtex: citation.format('bibtex')
-            }
-          }
-        }));
-        this.handleLiteratureAdd(this.state.literature);
-      }
-    }).catch(() => {
-      const notification = {
-        title: 'Add References for selected Elements',
-        message: `unable to fetch metadata for this doi: ${doi}`,
-        level: 'error',
-        dismissible: 'button',
-        autoDismiss: 5,
-        position: 'tr',
-        uid: 'literature'
-      };
-      NotificationActions.add(notification);
-    });
-  }
-
-  render() {
-    const {
-      sampleRefs,
-      reactionRefs,
-      selectedRefs,
-      sortedIds,
-      currentCollection,
-      literature
-    } = this.state;
-    const { currentUser } = UserStore.getState();
-    const label = currentCollection ? currentCollection.label : null
-    let contentSamples = '';
-    sampleRefs.forEach((citation) => {
-      contentSamples = `${contentSamples}\n${literatureContent(citation, true)}`;
-    });
-    let contentReactions = '';
-    reactionRefs.forEach((citation) => {
-      contentReactions = `${contentReactions}\n${literatureContent(citation, true)}`;
-    });
-    const elements = [];
-    let contentElements = '';
-
-    selectedRefs.forEach((citation) => {
-      elements.push(literatureContent(citation, true));
-    });
-
-    uniqBy(elements).forEach((element) => {
-      contentElements = `${contentElements}\n${element}`;
-    });
-
-    return (
-      <Panel
-        bsStyle="info"
-        className="format-analysis-panel"
-      >
-        <Panel.Heading>
-          <PanelHeader
-            title={`Literature Management for collection '${label}'`}
-            btns={[<CloseBtn key="close tab" onClose={this.onClose} />]}
-          />
-        </Panel.Heading>
-        <Panel.Body>
-          <PanelGroup accordion defaultActiveKey="1">
-            <Panel
-              eventKey="2"
-              collapsible="true"
-            >
-              <Panel.Heading>
-                <Row>
-                  <Col md={11} style={{ paddingRight: 0 }}>
-                    <Panel.Title toggle>
-                      References for Samples
-                    </Panel.Title>
-                  </Col>
-                  <Col md={1}>
-                    <Panel.Title>
-                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
-                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentSamples} >
-                          <i className="fa fa-clipboard" />
-                        </Button>
-                      </OverlayTrigger>
-                    </Panel.Title>
-                  </Col>
-                </Row>
-              </Panel.Heading>
-              <Panel.Body collapsible="true">
-                <Table>
-                  <thead><tr><th width="10%" /><th width="80%" /><th width="10%" /></tr></thead>
-                  <tbody>
-                    {sampleRefs.map(lit => (
-                      <tr key={`sampleRef-${lit.id}`}>
-                        <td><ElementTypeLink literature={lit} type="sample" /></td>
-                        <td className="padding-right">
-                          <Citation literature={lit} />
-                        </td>
-                        <td />
-                      </tr>
-                    ))}
-                  </tbody>
-                </Table>
-              </Panel.Body>
-            </Panel>
-            <Panel
-              eventKey="3"
-              collapsible="true"
-            >
-              <Panel.Heading>
-                <Row>
-                  <Col md={11} style={{ paddingRight: 0 }}>
-                    <Panel.Title toggle>
-                      References for Reactions
-                    </Panel.Title>
-                  </Col>
-                  <Col md={1}>
-                    <Panel.Title>
-                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
-                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentReactions} >
-                          <i className="fa fa-clipboard" />
-                        </Button>
-                      </OverlayTrigger>
-                    </Panel.Title>
-                  </Col>
-                </Row>
-              </Panel.Heading>
-              <Panel.Body collapsible="true">
-                <Table>
-                  <thead><tr><th width="10%" /><th width="80%" /><th width="10%" /></tr></thead>
-                  <tbody>
-                    {reactionRefs.map(lit => (
-                      <tr key={`reactionRef-${lit.id}`}>
-                        <td><ElementTypeLink literature={lit} type="reaction" /></td>
-                        <td className="padding-right">
-                          <Citation literature={lit} />
-                        </td>
-                        <td />
-                      </tr>
-                    ))}
-                  </tbody>
-                </Table>
-              </Panel.Body>
-            </Panel>
-            <Panel
-              eventKey="4"
-              collapsible="true"
-            >
-              <Panel.Heading>
-                <Row>
-                  <Col md={11} style={{ paddingRight: 0 }}>
-                    <Panel.Title toggle>
-                      References for selected Elements
-                    </Panel.Title>
-                  </Col>
-                  <Col md={1}>
-                    <Panel.Title>
-                      <OverlayTrigger placement="bottom" overlay={clipboardTooltip()}>
-                        <Button bsSize="xsmall" active className="button-right clipboardBtn" data-clipboard-text={contentElements} >
-                          <i className="fa fa-clipboard" />
-                        </Button>
-                      </OverlayTrigger>
-                    </Panel.Title>
-                  </Col>
-                </Row>
-              </Panel.Heading>
-              <Panel.Body collapsible="true">
-                <ListGroup>
-                  <ListGroupItem>
-                    <Row>
-                      <Col md={8} style={{ paddingRight: 0 }}>
-                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="doi" placeholder="DOI: 10.... or  http://dx.doi.org/10... or 10. ..." />
-                      </Col>
-                      <Col md={3} style={{ paddingRight: 0 }}>
-                        <LiteralType handleInputChange={this.handleInputChange} disabled={false} val={literature.litype} />
-                      </Col>
-                      <Col md={1} style={{ paddingRight: 0 }}>
-                        <Button
-                          bsStyle="success"
-                          bsSize="small"
-                          style={{ marginTop: 2 }}
-                          onClick={this.fetchDOIMetadata}
-                          title="fetch metadata for this doi and add citation to selection"
-                          disabled={!doiValid(literature.doi)}
-                        >
-                          <i className="fa fa-plus" />
-                        </Button>
-                      </Col>
-                      <Col md={12} style={{ paddingRight: 0 }}>
-                        <Citation literature={literature} />
-                      </Col>
-                      <Col md={7} style={{ paddingRight: 0 }}>
-                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="title" placeholder="Title..." />
-                      </Col>
-                      <Col md={4} style={{ paddingRight: 0 }}>
-                        <LiteratureInput handleInputChange={this.handleInputChange} literature={literature} field="url" placeholder="URL..." />
-                      </Col>
-                      <Col md={1}>
-                        <AddButton onLiteratureAdd={this.handleLiteratureAdd} literature={literature} title="add citation to selection" />
-                      </Col>
-                    </Row>
-                  </ListGroupItem>
-                </ListGroup>
-                <CitationTable rows={selectedRefs} sortedIds={sortedIds} removeCitation={this.handleLiteratureRemove} userId={currentUser.id} />
-              </Panel.Body>
-            </Panel>
-          </PanelGroup>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-LiteratureDetails.propTypes = {
-  literatureMap: PropTypes.instanceOf(LiteratureMap).isRequired
-};
diff --git a/app/packs/src/components/Material.js b/app/packs/src/components/Material.js
deleted file mode 100644
index 54b32e4b1..000000000
--- a/app/packs/src/components/Material.js
+++ /dev/null
@@ -1,860 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Radio,
-  FormControl,
-  Button,
-  InputGroup,
-  OverlayTrigger,
-  Tooltip,
-  Checkbox,
-} from 'react-bootstrap';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo';
-import SampleName from 'src/components/common/SampleName';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import { UrlSilentNavigation, SampleCode } from 'src/utilities/ElementUtils';
-import { correctPrefix, validDigit } from 'src/utilities/MathUtils';
-import Reaction from 'src/models/Reaction';
-import Sample from 'src/models/Sample';
-import { permitCls, permitOn } from 'src/components/common/uis';
-
-const matSource = {
-  beginDrag(props) {
-    return props;
-  },
-};
-
-const matTarget = {
-  drop(tagProps, monitor) {
-    const { dropSample, dropMaterial } = tagProps;
-    const srcItem = monitor.getItem();
-    const srcType = monitor.getItemType();
-
-    if (srcType === DragDropItemTypes.SAMPLE) {
-      dropSample(
-        srcItem.element,
-        tagProps.material,
-        tagProps.materialGroup,
-      );
-    } else if (srcType === DragDropItemTypes.MOLECULE) {
-      dropSample(
-        srcItem.element,
-        tagProps.material,
-        tagProps.materialGroup,
-        null,
-        true,
-      );
-    } else if (srcType === DragDropItemTypes.MATERIAL) {
-      dropMaterial(
-        srcItem.material,
-        srcItem.materialGroup,
-        tagProps.material,
-        tagProps.materialGroup,
-      );
-    }
-  },
-  canDrop(tagProps, monitor) {
-    const srcType = monitor.getItemType();
-    const isCorrectType = srcType === DragDropItemTypes.MATERIAL
-      || srcType === DragDropItemTypes.SAMPLE
-      || srcType === DragDropItemTypes.MOLECULE;
-    return isCorrectType;
-  },
-};
-
-const matSrcCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const matTagCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const notApplicableInput = () => (
-  <td>
-    <FormControl
-      bsClass="bs-form--compact form-control"
-      bsSize="small"
-      style={{ textAlign: 'center' }}
-      type="text"
-      value="n/a"
-      disabled
-    />
-  </td>
-);
-
-const iupacNameTooltip = material => (
-  <Tooltip id="iupac_name_tooltip" className="left_tooltip">
-    <table>
-      <tbody>
-        <tr><td>IUPAC&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.molecule.iupac_name || ''}</td></tr>
-        <tr><td>Name&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.name || ''}</td></tr>
-        <tr><td>Ext.Label&#58;&nbsp;</td><td style={{ wordBreak: 'break-all' }}>{material.external_label || ''}</td></tr>
-      </tbody>
-    </table>
-  </Tooltip>);
-
-const refreshSvgTooltip = <Tooltip id="refresh_svg_tooltip">Refresh reaction diagram</Tooltip>;
-
-const AddtoDescToolTip = <Tooltip id="tp-spl-code" className="left_tooltip">Add to description or additional information for publication and purification details</Tooltip>;
-
-const solvConcentration = (material, solventVolume) => {
-  const concn = ((material.amount_l / solventVolume) * 100).toFixed(1);
-  if (isNaN(concn) || !isFinite(concn)) { return 'n.d.'; }
-  return `${concn}%`;
-};
-
-class Material extends Component {
-  constructor(props) {
-    super(props);
-
-    this.createParagraph = this.createParagraph.bind(this);
-    this.handleAmountUnitChange = this.handleAmountUnitChange.bind(this);
-    this.handleMetricsChange = this.handleMetricsChange.bind(this);
-    this.handleCoefficientChange = this.handleCoefficientChange.bind(this);
-  }
-
-  handleMaterialClick(sample) {
-    const { reaction } = this.props;
-    UrlSilentNavigation(sample);
-    sample.updateChecksum();
-    ElementActions.showReactionMaterial({ sample, reaction });
-  }
-
-  materialVolume(material) {
-    if (material.contains_residues) { return notApplicableInput(); }
-    const { density, molarity_value, molarity_unit, has_density, has_molarity } = material;
-    const tooltip = has_density || has_molarity ?
-      (
-        <Tooltip id="density_info">
-          {has_density ? `density = ${density}` : `molarity = ${molarity_value} ${molarity_unit}`}
-        </Tooltip>
-      )
-      : <Tooltip id="density_info">no density or molarity defined</Tooltip>;
-
-    const metricPrefixes = ['m', 'n', 'u'];
-    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[1]) > -1) ? material.metrics[1] : 'm';
-
-    return (
-      <td>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <div>
-            <NumeralInputWithUnitsCompo
-              key={material.id}
-              value={material.amount_l}
-              unit="l"
-              metricPrefix={metric}
-              metricPrefixes={metricPrefixes}
-              precision={3}
-              disabled={!permitOn(this.props.reaction) || ((this.props.materialGroup !== 'products') && !material.reference && this.props.lockEquivColumn)}
-              onChange={e => this.handleAmountUnitChange(e, material.amount_l)}
-              onMetricsChange={this.handleMetricsChange}
-              bsStyle={material.amount_unit === 'l' ? 'success' : 'default'}
-            />
-          </div>
-        </OverlayTrigger>
-      </td>
-    );
-  }
-
-
-  materialLoading(material, showLoadingColumn) {
-    if (!showLoadingColumn) {
-      return false;
-    } else if (!material.contains_residues) {
-      return notApplicableInput();
-    }
-
-    return (
-      <td>
-        <NumeralInputWithUnitsCompo
-          key={material.id}
-          value={material.loading}
-          unit="mmol/g"
-          metricPrefix="n"
-          metricPrefixes={['n']}
-          bsStyle={material.error_loading ? 'error' : 'success'}
-          precision={3}
-          disabled={!permitOn(this.props.reaction) || (this.props.materialGroup === 'products' || (!material.reference && this.props.lockEquivColumn))}
-          onChange={loading => this.handleLoadingChange(loading)}
-        />
-      </td>
-    );
-  }
-
-  materialRef(material) {
-    return (
-      this.props.materialGroup === 'products'
-        ? <td />
-        : <td>
-          <Radio
-            disabled={!permitOn(this.props.reaction)}
-            name="reference"
-            checked={material.reference}
-            onChange={e => this.handleReferenceChange(e)}
-            bsSize="xsmall"
-            style={{ margin: 0 }}
-          />
-        </td>
-    );
-  }
-
-  materialShowLabel(material, style = { padding: '5px 4px' }) {
-    return (
-      <Button
-        active
-        style={style}
-        onClick={e => this.handleShowLabelChange(e)}
-        bsStyle={material.show_label ? 'success' : 'primary'}
-        bsSize="small"
-        title={material.show_label ? 'Switch to structure' : 'Switch to label'}
-      >{material.show_label ? 'l' : 's'}
-      </Button>
-    );
-  }
-
-  equivalentOrYield(material) {
-    const { reaction, materialGroup } = this.props;
-    if (materialGroup === 'products') {
-      const refMaterial = reaction.getReferenceMaterial();
-      let calculateYield = material.equivalent;
-      if (reaction.hasPolymers()) {
-        calculateYield = `${((material.equivalent || 0) * 100).toFixed(0)}%`;
-      } else if (refMaterial && (refMaterial.decoupled || material.decoupled)) {
-        calculateYield = 'n.a.';
-      } else {
-        calculateYield = `${((material.equivalent <= 1 ? material.equivalent || 0 : 1) * 100).toFixed(0)}%`;
-      }
-      return (
-        <div>
-          <FormControl
-            name="yield"
-            type="text"
-            bsClass="bs-form--compact form-control"
-            bsSize="small"
-            value={calculateYield}
-            disabled
-          />
-        </div>
-      );
-    }
-    return (
-      <NumeralInputWithUnitsCompo
-        precision={4}
-        value={material.equivalent}
-        disabled={!permitOn(this.props.reaction) || ((((material.reference || false) && material.equivalent) !== false) || this.props.lockEquivColumn)}
-        onChange={e => this.handleEquivalentChange(e)}
-      />
-    );
-  }
-
-  handleExternalLabelChange(event) {
-    const value = event.target.value;
-    if (this.props.onChange) {
-      const e = {
-        type: 'externalLabelChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        externalLabel: value
-      };
-      this.props.onChange(e);
-    }
-  }
-
-  handleExternalLabelCompleted() {
-    if (this.props.onChange) {
-      const event = {
-        type: 'externalLabelCompleted'
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleReferenceChange(e) {
-    const value = e.target.value;
-    if (this.props.onChange) {
-      const event = {
-        type: 'referenceChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        value
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleShowLabelChange(e) {
-    const value = e.target.checked;
-    if (this.props.onChange) {
-      const event = {
-        type: 'showLabelChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        value
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleAmountChange(e) {
-    if (this.props.onChange && e) {
-      const event = {
-        amount: e,
-        type: 'amountChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleAmountTypeChange(e) {
-    if (this.props.onChange && e) {
-      const event = {
-        amountType: e,
-        type: 'amountTypeChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleCoefficientChange(e) {
-    const { onChange, materialGroup } = this.props;
-    const coefficient = e.value;
-    if (onChange) {
-      const event = {
-        coefficient,
-        type: 'coefficientChanged',
-        materialGroup,
-        sampleID: this.materialId()
-      };
-      onChange(event);
-    }
-  }
-
-  handleAmountUnitChange(e, value) {
-    if (e.value === value) return;
-    if (this.props.onChange && e) {
-      const event = {
-        amount: e,
-        type: 'amountUnitChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleMetricsChange(e) {
-    if (this.props.onChange && e) {
-      const event = {
-        metricUnit: e.metricUnit,
-        metricPrefix: e.metricPrefix,
-        type: 'MetricsChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleLoadingChange(newLoading) {
-    this.props.material.residues[0].custom_info.loading = newLoading.value;
-
-    // just recalculate value in mg using the new loading value
-    if (this.props.onChange) {
-      const event = {
-        type: 'amountChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        amount: this.props.material.amount
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleEquivalentChange(e) {
-    const equivalent = e.value;
-    if (this.props.onChange && e) {
-      const event = {
-        type: 'equivalentChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        equivalent
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  createParagraph(m) {
-    const { materialGroup } = this.props;
-    let molName = m.molecule_name_hash.label;
-    if (!molName) { molName = m.molecule.iupac_name; }
-    if (!molName) { molName = m.molecule.sum_formular; }
-
-    const gUnit = correctPrefix(m.amount_g, 3);
-    const lUnit = correctPrefix(m.amount_l, 3);
-    const molUnit = correctPrefix(m.amount_mol, 3); // ELN issue#829
-
-    const grm = gUnit ? `${gUnit}g, ` : '';
-    const vol = lUnit ? `${lUnit}L, ` : '';
-    const solVol = vol.substr(0, vol.length - 2);
-    const mol = molUnit ? `${molUnit}mol, ` : '';
-    const mlt = m.molarity_value === 0.0 ?
-      '' : `${validDigit(m.molarity_value, 3)}${m.molarity_unit}, `;
-    const eqv = `${validDigit(m.equivalent, 3)}`;
-    const yld = `${Math.round(m.equivalent * 100)}%`;
-
-    switch (materialGroup) {
-      case 'purification_solvents':
-      case 'solvents': {
-        return `${molName} (${solVol})`;
-      }
-      case 'products': {
-        return `${molName} (${grm}${vol}${mol}${mlt}${yld} yield)`;
-      }
-      default: {
-        return `${molName} (${grm}${vol}${mol}${mlt}${eqv} equiv)`;
-      }
-    }
-  }
-
-  handleAddToDesc(material) {
-    if (this.props.onChange) {
-      const event = {
-        type: 'addToDesc',
-        paragraph: this.createParagraph(material),
-      };
-      this.props.onChange(event);
-    }
-  }
-
-  handleDrySolventChange(event) {
-    const value = event.target.checked;
-    if (this.props.onChange) {
-      const e = {
-        type: 'drysolventChanged',
-        materialGroup: this.props.materialGroup,
-        sampleID: this.materialId(),
-        dry_solvent: value
-      };
-      this.props.onChange(e);
-    }
-  }
-
-  materialId() {
-    return this.material().id;
-  }
-
-  material() {
-    return this.props.material;
-  }
-
-  generalMaterial(props, style) {
-    const { material, deleteMaterial, connectDragSource, connectDropTarget,
-      showLoadingColumn, reaction } = props;
-    const isTarget = material.amountType === 'target';
-    const massBsStyle = material.amount_unit === 'g' ? 'success' : 'default';
-    const mol = material.amount_mol;
-    //const concn = mol / reaction.solventVolume;
-    const mw = material.decoupled ?
-      (material.molecular_mass) : (material.molecule && material.molecule.molecular_weight);
-
-    const metricPrefixes = ['m', 'n', 'u'];
-    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[0]) > -1) ? material.metrics[0] : 'm';
-    const metricPrefixesMol = ['m', 'n'];
-    const metricMol = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[2]) > -1) ? material.metrics[2] : 'm';
-    const metricPrefixesMolConc = ['m', 'n'];
-    const metricMolConc = (material.metrics && material.metrics.length > 3 && metricPrefixes.indexOf(material.metrics[3]) > -1) ? material.metrics[3] : 'm';
-
-    const inputsStyle = {
-      paddingRight: 2,
-      paddingLeft: 2,
-    };
-
-    return (
-      <tr className="general-material">
-        {compose(connectDragSource, connectDropTarget)(
-          <td className={`drag-source ${permitCls(reaction)}`} style={style}>
-            <span className="text-info fa fa-arrows" />
-          </td>,
-          { dropEffect: 'copy' }
-        )}
-
-        <td style={{ width: '22%', maxWidth: '50px' }}>
-          {this.materialNameWithIupac(material)}
-        </td>
-
-        {this.materialRef(material)}
-
-        <td style={{ inputsStyle }}>
-          {this.materialShowLabel(material)}
-        </td>
-
-        <td style={{ inputsStyle }}>
-          {this.switchTargetReal(isTarget)}
-        </td>
-
-        <td style={{ width: '1%', maxWidth: '5px' }}>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="reaction-coefficient-info"> Reaction Coefficient </Tooltip>}>
-            <div>
-              <NumeralInputWithUnitsCompo
-                key={material.id}
-                value={material.coefficient}
-                onChange={this.handleCoefficientChange}
-                name="coefficient"
-              />
-            </div>
-          </OverlayTrigger>
-        </td>
-
-        <td>
-          <OverlayTrigger
-            delay="100"
-            placement="top"
-            overlay={
-              <Tooltip id="molecular-weight-info">{this.generateMolecularWeightTooltipText(material,reaction)}</Tooltip>
-            }>
-            <div>
-              <NumeralInputWithUnitsCompo
-                key={material.id}
-                value={material.amount_g}
-                unit="g"
-                metricPrefix={metric}
-                metricPrefixes={metricPrefixes}
-                precision={4}
-                disabled={!permitOn(reaction) || (this.props.materialGroup !== 'products' && !material.reference && this.props.lockEquivColumn)}
-                onChange={e => this.handleAmountUnitChange(e, material.amount_g)}
-                onMetricsChange={this.handleMetricsChange}
-                bsStyle={material.error_mass ? 'error' : massBsStyle}
-                name="molecular-weight"
-              />
-            </div>
-          </OverlayTrigger>
-        </td>
-
-        {this.materialVolume(material)}
-
-        <td>
-          <NumeralInputWithUnitsCompo
-            key={material.id}
-            value={material.amount_mol}
-            unit="mol"
-            metricPrefix={metricMol}
-            metricPrefixes={metricPrefixesMol}
-            precision={4}
-            disabled={!permitOn(reaction) || (this.props.materialGroup === 'products' || (!material.reference && this.props.lockEquivColumn))}
-            onChange={e => this.handleAmountUnitChange(e, material.amount_mol)}
-            onMetricsChange={this.handleMetricsChange}
-            bsStyle={material.amount_unit === 'mol' ? 'success' : 'default'}
-          />
-        </td>
-
-        {this.materialLoading(material, showLoadingColumn)}
-
-        <td>
-          <NumeralInputWithUnitsCompo
-            key={material.id}
-            value={material.concn}
-            unit="mol/l"
-            metricPrefix={metricMolConc}
-            metricPrefixes={metricPrefixesMolConc}
-            precision={4}
-            disabled
-            onChange={e => this.handleAmountUnitChange(e, material.concn)}
-            onMetricsChange={this.handleMetricsChange}
-          />
-        </td>
-
-        <td>
-          {this.equivalentOrYield(material)}
-        </td>
-        <td>
-          <Button
-            disabled={!permitOn(reaction)}
-            bsStyle="danger"
-            bsSize="small"
-            disabled={this.props.reaction.is_published == true}
-            onClick={() => deleteMaterial(material)}
-          >
-            <i className="fa fa-trash-o" />
-          </Button>
-        </td>
-      </tr>
-    );
-  }
-
-  generateMolecularWeightTooltipText(sample, reaction) {
-    const isProduct = reaction.products.includes(sample)
-    const molecularWeight = sample.decoupled ?
-      (sample.molecular_mass) : (sample.molecule && sample.molecule.molecular_weight);
-    let theoreticalMassPart = "";
-    if (isProduct && sample.maxAmount) {
-      theoreticalMassPart = `, max theoretical mass: ${Math.round(sample.maxAmount * 10000) / 10} mg`
-    }
-    return `molar mass: ${molecularWeight} g/mol` + theoreticalMassPart;
-  }
-
-  toggleTarget(isTarget) {
-    if (this.props.materialGroup !== 'products') {
-      this.handleAmountTypeChange(!isTarget ? 'target' : 'real');
-    }
-  }
-
-  solventMaterial(props, style) {
-    const { material, deleteMaterial, connectDragSource,
-      connectDropTarget, reaction } = props;
-    const isTarget = material.amountType === 'target';
-    const mw = material.molecule && material.molecule.molecular_weight
-    const drySolvTooltip = <Tooltip>Dry Solvent</Tooltip>;
-    return (
-      <tr className="solvent-material">
-        {compose(connectDragSource, connectDropTarget)(
-          <td className={`drag-source ${permitCls(reaction)}`} style={style}>
-            <span className="text-info fa fa-arrows" />
-          </td>,
-          { dropEffect: 'copy' }
-        )}
-
-        <td style={{ width: '25%', maxWidth: '50px' }}>
-          {this.materialNameWithIupac(material)}
-        </td>
-        <td>
-          <OverlayTrigger placement="top" overlay={drySolvTooltip}>
-            <Checkbox
-              checked={material.dry_solvent}
-              onChange={(event) => this.handleDrySolventChange(event)}
-            />
-          </OverlayTrigger>
-        </td>
-        <td>
-          {this.switchTargetReal(isTarget)}
-        </td>
-
-        <td>
-          <InputGroup>
-            <OverlayTrigger
-              placement="top"
-              overlay={<Tooltip id="molecular-weight-info">{material.amount_g} g - {mw} g/mol</Tooltip>}
-            >
-              <div>
-                <FormControl
-                  disabled={!permitOn(reaction)}
-                  type="text"
-                  bsClass="bs-form--compact form-control"
-                  bsSize="small"
-                  value={material.external_label}
-                  placeholder={material.molecule.iupac_name}
-                  onChange={event => this.handleExternalLabelChange(event)}
-                />
-              </div>
-            </OverlayTrigger>
-            <InputGroup.Button>
-              <OverlayTrigger placement="bottom" overlay={refreshSvgTooltip}>
-                <Button
-                  disabled={!permitOn(reaction)}
-                  active
-                  disabled={this.props.reaction.is_published == true}
-                  onClick={e => this.handleExternalLabelCompleted(e)}
-                  bsSize="small"
-                ><i className="fa fa-refresh" /></Button>
-              </OverlayTrigger>
-            </InputGroup.Button>
-          </InputGroup>
-        </td>
-
-        {this.materialVolume(material)}
-
-        <td>
-          <FormControl
-            type="text"
-            bsClass="bs-form--compact form-control"
-            bsSize="small"
-            value={solvConcentration(material, props.reaction.solventVolume)}
-            disabled
-          />
-        </td>
-
-        <td>
-          <Button
-            disabled={!permitOn(reaction)}
-            bsStyle="danger"
-            bsSize="small"
-            disabled={this.props.reaction.is_published == true}
-            onClick={() => deleteMaterial(material)}
-          ><i className="fa fa-trash-o" /></Button>
-        </td>
-      </tr>
-    );
-  }
-
-  switchTargetReal(isTarget, style = { padding: '5px 4px' }) {
-    return (
-      <Button
-        disabled={!permitOn(this.props.reaction)}
-        active
-        style={style}
-        onClick={() => this.toggleTarget(isTarget)}
-        disabled={this.props.reaction.is_published == true}
-        bsStyle={isTarget ? 'success' : 'primary'}
-        bsSize="small"
-      >{isTarget ? 't' : 'r'}</Button>
-    );
-  }
-
-  materialNameWithIupac(material) {
-    const { index, materialGroup, reaction } = this.props;
-    // Skip shortLabel for reactants and solvents/purification_solvents
-    const skipIupacName = (
-      materialGroup === 'reactants' ||
-      materialGroup === 'solvents' ||
-      materialGroup === 'purification_solvents'
-    );
-    let materialName = '';
-    let moleculeIupacName = '';
-    const iupacStyle = {
-      display: 'block',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      maxWidth: '100%'
-    };
-
-    const idCheck = /^\d+$/;
-
-    if (skipIupacName) {
-      let materialDisplayName = material.molecule_iupac_name || material.name;
-      if (materialGroup === 'solvents' || materialGroup === 'purification_solvents') {
-        materialDisplayName = material.external_label || materialDisplayName;
-      }
-      if (materialDisplayName === null || materialDisplayName === '') {
-        materialDisplayName = (
-          <span>
-            <SampleName sample={material} />
-          </span>
-        );
-      }
-
-      if (idCheck.test(material.id)) {
-        materialName = (
-          <a
-            role="link"
-            tabIndex={0}
-            onClick={() => this.handleMaterialClick(material)}
-            style={{ cursor: 'pointer' }}
-          ><span className="reaction-material-link">{materialDisplayName}</span></a>
-        );
-      } else {
-        materialName = <span>{materialDisplayName}</span>;
-      }
-    } else {
-      moleculeIupacName = material.molecule_iupac_name;
-      const materialDisplayName = material.title() === ''
-        ? <SampleName sample={material} />
-        : material.title();
-      materialName = (
-        <a
-          role="link"
-          tabIndex={0}
-          onClick={() => this.handleMaterialClick(material)}
-          style={{ cursor: 'pointer' }}
-        ><span className="reaction-material-link">{materialDisplayName}</span></a>
-      );
-
-      if (material.isNew) { materialName = materialDisplayName; }
-    }
-    let br = <br />;
-    if (moleculeIupacName === '') {
-      iupacStyle.display = 'none';
-      br = '';
-    }
-    const serialCode = SampleCode(index, materialGroup);
-
-    const addToDesc = (e) => {
-      e.stopPropagation();
-      this.handleAddToDesc(material);
-    };
-
-    return (
-      <OverlayTrigger placement="bottom" overlay={iupacNameTooltip(material)} >
-        <div style={{ display: 'inline-block', maxWidth: '100%' }}>
-          <div className="inline-inside">
-            <OverlayTrigger placement="top" overlay={AddtoDescToolTip}>
-              <Button bsStyle="primary" bsSize="xsmall" onClick={addToDesc} disabled={!permitOn(reaction)}>
-                {serialCode}
-              </Button>
-            </OverlayTrigger>&nbsp;
-            {materialName}
-          </div>
-          <span style={iupacStyle}>
-            {moleculeIupacName}
-          </span>
-        </div>
-      </OverlayTrigger>
-    );
-  }
-
-  render() {
-    const {
-      material, isDragging, canDrop, isOver, materialGroup
-    } = this.props;
-    const style = { padding: '0' };
-    if (isDragging) { style.opacity = 0.3; }
-    if (canDrop) {
-      style.borderStyle = 'dashed';
-      style.borderWidth = 2;
-    }
-    if (isOver) {
-      style.borderColor = '#337ab7';
-      style.opacity = 0.6;
-      style.backgroundColor = '#337ab7';
-    }
-
-    if (this.props.materialGroup === 'products') {
-      material.amountType = 'real'; // always take real amount for product
-    }
-    const sp = materialGroup === 'solvents' || materialGroup === 'purification_solvents';
-    const component = sp ?
-      this.solventMaterial(this.props, style) :
-      this.generalMaterial(this.props, style);
-
-    return component;
-  }
-}
-
-export default compose(
-  DragSource(
-    DragDropItemTypes.MATERIAL,
-    matSource,
-    matSrcCollect,
-  ),
-  DropTarget(
-    [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE, DragDropItemTypes.MATERIAL],
-    matTarget,
-    matTagCollect,
-  ),
-)(Material);
-
-Material.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  material: PropTypes.instanceOf(Sample).isRequired,
-  materialGroup: PropTypes.string.isRequired,
-  deleteMaterial: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  showLoadingColumn: PropTypes.bool.isRequired,
-  index: PropTypes.number,
-  isDragging: PropTypes.bool,
-  canDrop: PropTypes.bool,
-  isOver: PropTypes.bool,
-  lockEquivColumn: PropTypes.bool.isRequired
-};
diff --git a/app/packs/src/components/MaterialCalculations.js b/app/packs/src/components/MaterialCalculations.js
deleted file mode 100644
index a35d7f1c8..000000000
--- a/app/packs/src/components/MaterialCalculations.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
-import { FormControl } from 'react-bootstrap';
-
-import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo';
-
-const source = {
-  beginDrag(props) {
-    return props;
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-});
-
-export default class MaterialCalculations extends Component {
-
-  notApplicableInput(inputsStyle) {
-    return (
-      <td style={inputsStyle}>
-        <FormControl type="text"
-          value="N / A"
-          disabled={true}
-        />
-      </td>
-    )
-  }
-
-  materialVolume(material, inputsStyle) {
-
-    const metricPrefixes = ['m', 'n', 'u'];
-    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[1]) > -1) ? material.metrics[1] : 'm';
-
-    if (material.contains_residues)
-      return this.notApplicableInput(inputsStyle);
-    else
-      return (
-        <td style={inputsStyle}>
-          <NumeralInputWithUnitsCompo
-            key={material.id}
-            value={material.amount_ml || ''}
-            unit='l'
-            metricPrefix={metric}
-            metricPrefixes={metricPrefixes}
-            onChange={(amount) => this.handleAmountChange(amount)}
-          />
-        </td>
-      )
-  }
-
-  render() {
-    const { material, deleteMaterial, isDragging, connectDragSource } = this.props;
-
-    const metricPrefixes = ['m', 'n', 'u'];
-    const metric = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[0]) > -1) ? material.metrics[0] : 'm';
-
-    const metricPrefixesMol = ['m', 'n'];
-    const metricMol = (material.metrics && material.metrics.length > 2 && metricPrefixes.indexOf(material.metrics[2]) > -1) ? material.metrics[2] : 'm';
-
-    const inputsStyle = {
-      paddingTop: 15,
-      paddingRight: 2,
-      paddingLeft: 2,
-    };
-
-    return <tr>
-      <td style={inputsStyle}></td>
-      <td style={inputsStyle}></td>
-      <td style={inputsStyle}></td>
-      <td style={inputsStyle}><label>Adjusted: </label></td>
-      <td style={inputsStyle}>
-        <NumeralInputWithUnitsCompo
-          key={material.id}
-          value={material.adjusted_amount_g}
-          unit='g'
-          metricPrefix={metric}
-          metricPrefixes={metricPrefixes}
-          precision={5}
-          disabled
-          readOnly
-        />
-      </td>
-
-      {this.materialVolume(material, inputsStyle)}
-
-      <td style={inputsStyle}>
-        <NumeralInputWithUnitsCompo
-          key={'adjusted_amount_mol' + material.id.toString()}
-          value={material.adjusted_amount_mol}
-          unit='mol'
-          metricPrefix={metricMol}
-          metricPrefixes={metricPrefixesMol}
-          precision={4}
-          disabled
-          readOnly
-        />
-      </td>
-
-      <td style={inputsStyle}>
-        <NumeralInputWithUnitsCompo
-          key={'adjusted_loading' + material.id.toString()}
-          value={material.adjusted_loading}
-          unit='mmol/g'
-          metricPrefix='n'
-          metricPrefixes={['n']}
-          precision={3}
-          disabled
-          readOnly
-        />
-      </td>
-
-      <td style={inputsStyle}>
-        <FormControl
-          type="text"
-          value={`${((material.adjusted_equivalent || 0) * 100).toFixed(1)} %`}
-          disabled
-        />
-      </td>
-      <td></td>
-    </tr>
-  }
-}
diff --git a/app/packs/src/components/MaterialGroup.js b/app/packs/src/components/MaterialGroup.js
deleted file mode 100644
index 816980598..000000000
--- a/app/packs/src/components/MaterialGroup.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Glyphicon, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import VirtualizedSelect from 'react-virtualized-select';
-import Material from 'src/apps/mydb/elements/details/reactions/schemeTab/Material';
-import MaterialCalculations from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialCalculations';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import MoleculesFetcher from 'src/fetchers/MoleculesFetcher';
-import Molecule from 'src/models/Molecule';
-import Reaction from 'src/models/Reaction';
-import { defaultMultiSolventsSmilesOptions } from 'src/components/staticDropdownOptions/options';
-import { ionic_liquids } from 'src/components/staticDropdownOptions/ionic_liquids';
-import { reagents_kombi } from 'src/components/staticDropdownOptions/reagents_kombi';
-import { permitOn } from 'src/components/common/uis';
-import HelpInfo from 'src/components/common/HelpInfo';
-
-const MaterialGroup = ({
-  materials, materialGroup, deleteMaterial, onChange,
-  showLoadingColumn, reaction, addDefaultSolvent, headIndex,
-  dropMaterial, dropSample, switchEquiv, lockEquivColumn
-}) => {
-  const contents = [];
-  let index = headIndex;
-  if (materials && materials.length > 0) {
-    materials.forEach((material) => {
-      index += 1;
-      contents.push((
-        <Material
-          reaction={reaction}
-          onChange={onChange}
-          key={material.id}
-          material={material}
-          materialGroup={materialGroup}
-          showLoadingColumn={showLoadingColumn}
-          deleteMaterial={m => deleteMaterial(m, materialGroup)}
-          index={index}
-          dropMaterial={dropMaterial}
-          dropSample={dropSample}
-          lockEquivColumn={lockEquivColumn}
-        />
-      ));
-
-      if (materialGroup === 'products' &&
-        material.adjusted_loading &&
-        material.error_mass) {
-        contents.push((
-          <MaterialCalculations
-            material={material}
-            materialGroup={materialGroup}
-            index={index}
-          />
-        ));
-      }
-    });
-  }
-
-  if (materialGroup === 'solvents' ||
-    materialGroup === 'purification_solvents') {
-    return (
-      <SolventsMaterialGroup
-        contents={contents}
-        materialGroup={materialGroup}
-        reaction={reaction}
-        addDefaultSolvent={addDefaultSolvent}
-      />
-    );
-  }
-
-  return (
-    <GeneralMaterialGroup
-      contents={contents}
-      materialGroup={materialGroup}
-      showLoadingColumn={showLoadingColumn}
-      reaction={reaction}
-      addDefaultSolvent={addDefaultSolvent}
-      switchEquiv={switchEquiv}
-      lockEquivColumn={lockEquivColumn}
-    />
-  );
-};
-
-const switchEquivTooltip = () => (
-  <Tooltip id="assign_button">Lock/unlock Equiv <br /> for target amounts</Tooltip>
-);
-
-const SwitchEquivButton = (lockEquivColumn, switchEquiv) => {
-  return (
-    <OverlayTrigger placement="top" overlay={switchEquivTooltip()} >
-      <Button
-        id="lock_equiv_column_btn"
-        bsSize="xsmall"
-        bsStyle={lockEquivColumn ? 'warning' : 'default'}
-        onClick={switchEquiv}
-      >
-        <i className={lockEquivColumn ? 'fa fa-lock' : 'fa fa-unlock'} />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const GeneralMaterialGroup = ({
-  contents, materialGroup, showLoadingColumn, reaction, addDefaultSolvent,
-  switchEquiv, lockEquivColumn
-}) => {
-  const isReactants = materialGroup === 'reactants';
-  let headers = {
-    ref: 'Ref',
-    group: 'Starting materials',
-    show_label: 'L/S',
-    tr: 'T/R',
-    mass: 'Mass',
-    reaction_coefficient: 'Coeff',
-    amount: 'Amount',
-    loading: 'Loading',
-    concn: 'Conc',
-    vol: 'Vol',
-    eq: 'Equiv'
-  };
-
-  const reagentList = [];
-  let reagentDd = <span />;
-  const createReagentForReaction = (event) => {
-    const smi = event.value;
-    MoleculesFetcher.fetchBySmi(smi)
-      .then((result) => {
-        const molecule = new Molecule(result);
-        molecule.density = molecule.density || 0;
-        addDefaultSolvent(molecule, null, materialGroup, event.label);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  };
-
-  if (isReactants) {
-    headers = { group: 'Reactants' };
-    Object.keys(reagents_kombi).forEach((x) => {
-      reagentList.push({
-        label: x,
-        value: reagents_kombi[x]
-      });
-    });
-    reagentDd = (
-      <VirtualizedSelect
-        disabled={!permitOn(reaction)}
-        className="reagents-select"
-        name="Reagents"
-        multi={false}
-        options={reagentList}
-        placeholder="Reagents"
-        onChange={createReagentForReaction}
-      />
-    );
-  }
-
-  if (materialGroup === 'products') {
-    headers.group = 'Products';
-    headers.eq = 'Yield';
-  }
-
-  const refTHead = (materialGroup !== 'products') ? headers.ref : null;
-  /**
-   * Add a (not yet persisted) sample to a material group
-   * of the given reaction
-   */
-  const addSampleButton = (
-    <Button
-      disabled={!permitOn(reaction)}
-      bsStyle="success"
-      bsSize="xs"
-      onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
-    >
-      <Glyphicon glyph="plus" />
-    </Button>
-  );
-
-  return (
-    <div>
-      <table width="100%" className="reaction-scheme">
-        <colgroup>
-          <col style={{ width: '4%' }} />
-          <col style={{ width: showLoadingColumn ? '8%' : '15%' }} />
-          <col style={{ width: '4%' }} />
-          <col style={{ width: '2%' }} />
-          <col style={{ width: '2%' }} />
-          <col style={{ width: showLoadingColumn ? '3%' : '4%' }} />
-          <col style={{ width: showLoadingColumn ? '10%' : '11%' }} />
-          {showLoadingColumn && <col style={{ width: '11%' }} />}
-          <col style={{ width: showLoadingColumn ? '10%' : '11%' }} />
-          <col style={{ width: showLoadingColumn ? '12%' : '13%' }} />
-        </colgroup>
-        <thead>
-          <tr>
-            <th>{addSampleButton}</th>
-            <th>{headers.group}</th>
-            {isReactants && <th colSpan={showLoadingColumn ? 9 : 8}>{reagentDd}</th>}
-            {!isReactants && <th>{refTHead}</th>}
-            <th>{headers.show_label}</th>
-            {!isReactants && <th style={{ padding: '3px 3px' }}>{headers.tr}</th>}
-            {!isReactants && <th style={{ padding: '3px 3px' }}>{headers.reaction_coefficient}</th>}
-            {!isReactants && <th>{headers.amount}</th>}
-            {!isReactants && <th />}
-            {!isReactants && <th />}
-            {showLoadingColumn && !isReactants && <th>{headers.loading}</th>}
-            {!isReactants && <th>{headers.concn}</th>}
-            {!isReactants && permitOn(reaction) && <th>{headers.eq} {!isReactants && materialGroup !== 'products' && SwitchEquivButton(lockEquivColumn, switchEquiv)}</th> }
-          </tr>
-        </thead>
-        <tbody>
-          {contents.map(item => item)}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-
-const SolventsMaterialGroup = ({
-  contents, materialGroup, reaction, addDefaultSolvent
-}) => {
-  const addSampleButton = (
-    <Button
-      disabled={!permitOn(reaction)}
-      bsStyle="success"
-      bsSize="xs"
-      onClick={() => ElementActions.addSampleToMaterialGroup({ reaction, materialGroup })}
-    >
-      <Glyphicon glyph="plus" />
-    </Button>
-  );
-
-  const createDefaultSolventsForReaction = (event) => {
-    const solvent = event.value;
-    // MoleculesFetcher.fetchByMolfile(solvent.molfile)
-    const smi = solvent.smiles;
-    MoleculesFetcher.fetchBySmi(smi)
-      .then((result) => {
-        const molecule = new Molecule(result);
-        const d = molecule.density;
-        const solventDensity = solvent.density || 1;
-        molecule.density = (d && d > 0) || solventDensity;
-        addDefaultSolvent(molecule, null, materialGroup, solvent.external_label);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  };
-
-  const solventOptions = Object.keys(ionic_liquids).reduce(
-    (solvents, ionicLiquid) => solvents.concat({
-      label: ionicLiquid,
-      value: {
-        external_label: ionicLiquid,
-        smiles: ionic_liquids[ionicLiquid],
-        density: 1.0,
-        drySolvent: false
-      }
-    }), defaultMultiSolventsSmilesOptions
-  );
-
-  return (
-    <div>
-      <table width="100%" className="reaction-scheme">
-        <thead>
-          <tr>
-            <th width="4%">{addSampleButton}</th>
-            <th width="21%" style={{ paddingRight: '10px' }}>
-              <VirtualizedSelect
-                disabled={!permitOn(reaction)}
-                className="solvents-select"
-                name="default solvents"
-                multi={false}
-                options={solventOptions}
-                placeholder="Default solvents"
-                onChange={createDefaultSolventsForReaction}
-              />
-            </th>
-            <th width="2%" title="Dry Solvent">DS</th>
-            <th width="4%">T/R</th>
-            <th width="24%">Label</th>
-            <th width="13%">Vol</th>
-            <th width="13%">Vol ratio</th>
-            <th width="3%" />
-          </tr>
-        </thead>
-        <tbody>
-          {contents.map(item => item)}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-MaterialGroup.propTypes = {
-  materialGroup: PropTypes.string.isRequired,
-  headIndex: PropTypes.number.isRequired,
-  materials: PropTypes.arrayOf(PropTypes.shape).isRequired,
-  deleteMaterial: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  showLoadingColumn: PropTypes.bool,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  addDefaultSolvent: PropTypes.func.isRequired,
-  dropMaterial: PropTypes.func.isRequired,
-  dropSample: PropTypes.func.isRequired,
-  switchEquiv: PropTypes.func.isRequired,
-  lockEquivColumn: PropTypes.bool
-};
-
-GeneralMaterialGroup.propTypes = {
-  materialGroup: PropTypes.string.isRequired,
-  showLoadingColumn: PropTypes.bool,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  addDefaultSolvent: PropTypes.func.isRequired,
-  contents: PropTypes.arrayOf(PropTypes.shape).isRequired,
-  switchEquiv: PropTypes.func.isRequired,
-  lockEquivColumn: PropTypes.bool
-};
-
-SolventsMaterialGroup.propTypes = {
-  materialGroup: PropTypes.string.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  addDefaultSolvent: PropTypes.func.isRequired,
-  contents: PropTypes.arrayOf(PropTypes.shape).isRequired
-};
-
-MaterialGroup.defaultProps = {
-  showLoadingColumn: false,
-  lockEquivColumn: false
-};
-
-GeneralMaterialGroup.defaultProps = {
-  showLoadingColumn: false,
-  lockEquivColumn: false
-};
-
-
-export { MaterialGroup, GeneralMaterialGroup, SolventsMaterialGroup };
diff --git a/app/packs/src/components/MaterialGroupContainer.js b/app/packs/src/components/MaterialGroupContainer.js
deleted file mode 100644
index e4550299f..000000000
--- a/app/packs/src/components/MaterialGroupContainer.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import { MaterialGroup } from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup';
-import Reaction from 'src/models/Reaction';
-
-
-const target = {
-  drop(tagProps, monitor) {
-    const { dropSample, dropMaterial } = tagProps;
-    const srcItem = monitor.getItem();
-    const srcType = monitor.getItemType();
-    if (srcType === DragDropItemTypes.SAMPLE) {
-      dropSample(
-        srcItem.element,
-        tagProps.material,
-        tagProps.materialGroup,
-      );
-    } else if (srcType === DragDropItemTypes.MOLECULE) {
-      dropSample(
-        srcItem.element,
-        tagProps.material,
-        tagProps.materialGroup,
-        null,
-        true,
-      );
-    } else if (srcType === DragDropItemTypes.MATERIAL) {
-      dropMaterial(
-        srcItem.material,
-        srcItem.materialGroup,
-        tagProps.material,
-        tagProps.materialGroup,
-      );
-    }
-  },
-  canDrop(tagProps, monitor) {
-    const srcType = monitor.getItemType();
-    const isCorrectType = srcType === DragDropItemTypes.MATERIAL
-      || srcType === DragDropItemTypes.SAMPLE
-      || srcType === DragDropItemTypes.MOLECULE;
-    const noMaterial = tagProps.materials.length === 0;
-    return noMaterial && isCorrectType;
-  },
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-class MaterialGroupContainer extends Component {
-  render() {
-    const {
-      materials, materialGroup, showLoadingColumn, headIndex,
-      isOver, canDrop, connectDropTarget,
-      deleteMaterial, onChange, reaction, dropSample, dropMaterial, switchEquiv, lockEquivColumn
-    } = this.props;
-    const style = {
-      padding: '2px 5px',
-    };
-    if (isOver && canDrop) {
-      style.borderStyle = 'dashed';
-      style.borderColor = '#337ab7';
-    } else if (canDrop) {
-      style.borderStyle = 'dashed';
-    }
-
-    return connectDropTarget(
-      <div style={style}>
-        <MaterialGroup
-          reaction={reaction}
-          onChange={onChange}
-          materials={materials}
-          materialGroup={materialGroup}
-          showLoadingColumn={showLoadingColumn}
-          deleteMaterial={deleteMaterial}
-          addDefaultSolvent={dropSample}
-          dropSample={dropSample}
-          dropMaterial={dropMaterial}
-          headIndex={headIndex}
-          switchEquiv={switchEquiv}
-          lockEquivColumn={lockEquivColumn}
-        />
-      </div>,
-    );
-  }
-}
-
-export default DropTarget(
-  [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE, DragDropItemTypes.MATERIAL],
-  target,
-  collect,
-)(MaterialGroupContainer);
-
-MaterialGroupContainer.propTypes = {
-  materials: PropTypes.arrayOf(PropTypes.shape).isRequired,
-  headIndex: PropTypes.number.isRequired,
-  materialGroup: PropTypes.string.isRequired,
-  deleteMaterial: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  dropSample: PropTypes.func.isRequired,
-  dropMaterial: PropTypes.func.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  showLoadingColumn: PropTypes.bool,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  switchEquiv: PropTypes.func,
-  lockEquivColumn: PropTypes.bool
-};
-
-MaterialGroupContainer.defaultProps = {
-  showLoadingColumn: false,
-  switchEquiv: () => null,
-  lockEquivColumn: false
-};
diff --git a/app/packs/src/components/MoleculeModerator.js b/app/packs/src/components/MoleculeModerator.js
deleted file mode 100644
index a9c31598d..000000000
--- a/app/packs/src/components/MoleculeModerator.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import { Navbar, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
-
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import LoadingModal from 'src/components/common/LoadingModal';
-import MoleculeModeratorComponent from 'src/apps/moleculeModerator/MoleculeModeratorComponent';
-import MoleculesFetcher from 'src/fetchers/MoleculesFetcher';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import Notifications from 'src/components/Notifications';
-
-const pageNav = (
-  <Navbar fixedTop>
-    <Navbar.Header>
-      <Navbar.Brand>
-        <a href="/">Home</a>
-      </Navbar.Brand>
-      <Navbar.Toggle />
-    </Navbar.Header>
-    <Navbar.Collapse>
-      <Navbar.Text>
-        Molecule Moderator
-      </Navbar.Text>
-    </Navbar.Collapse>
-  </Navbar>
-);
-
-const pageNotify = (title, level, message) => {
-  const notification = {
-    title,
-    message,
-    level,
-    dismissible: 'button',
-    autoDismiss: 5,
-    position: 'tc',
-    uid: 'moderator'
-  };
-  NotificationActions.add(notification);
-};
-
-class MoleculeModerator extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      molecule: null,
-      showStructureEditor: false,
-      msg: { show: false, level: null, message: null },
-    };
-
-    this.handleEditor = this.handleEditor.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleEditorSave = this.handleEditorSave.bind(this);
-    this.onSave = this.onSave.bind(this);
-  }
-
-  onSave() {
-    LoadingActions.start();
-    let { molecule } = this.state;
-    const { msg } = this.state;
-    MoleculesFetcher.updateMolfileSVG(molecule).then((json) => {
-      if (json.msg.level !== 'error') {
-        ({ molecule } = json);
-      }
-      msg.show = true;
-      msg.level = json.msg.level;
-      msg.message = json.msg.message;
-      this.setState({ molecule, msg, showStructureEditor: false });
-      LoadingActions.stop();
-      pageNotify('Save', msg.level, msg.message);
-    });
-  }
-
-  handleEditor(show) {
-    this.setState({ showStructureEditor: show });
-  }
-
-  handleSearch() {
-    LoadingActions.start();
-    const { msg } = this.state;
-    MoleculesFetcher.getByInChiKey(this.refInChiKey.value.trim())
-      .then((result) => {
-        msg.show = true;
-        msg.level = result ? 'info' : 'error';
-        msg.message = result ? 'Record found!' : 'No record found!';
-        this.setState({ msg, molecule: result.molecule, showStructureEditor: false });
-        LoadingActions.stop();
-        pageNotify('Search', msg.level, msg.message);
-      }).catch((errorMessage) => {
-        msg.show = true;
-        msg.level = 'error';
-        msg.message = errorMessage;
-        this.setState({ msg });
-        LoadingActions.stop();
-        pageNotify('Search', msg.level, msg.message);
-      });
-  }
-
-  handleEditorSave(molfile, svg_file = null, config = null) {
-    const { molecule } = this.state;
-    molecule.molfile = molfile;
-    const smiles = config ? config.smiles : null;
-    const isChemdraw = !!smiles;
-    MoleculesFetcher.renewSVGFile(molecule.id, svg_file, isChemdraw).then((json) => {
-      molecule.molecule_svg_file = json.svg_path;
-      this.setState({ molecule, showStructureEditor: false });
-    });
-  }
-
-  render() {
-    const formSearch = (
-      <form>
-        <FormGroup controlId="frmCtrlInChiKey">
-          <ControlLabel>InChiKey</ControlLabel>
-          <FormControl type="text" placeholder="Enter text" inputRef={(ref) => { this.refInChiKey = ref; }} />
-        </FormGroup>
-        <Button onClick={this.handleSearch}>Search&nbsp;<i className="fa fa-search" aria-hidden="true" /></Button>
-      </form>
-    );
-
-    const pageComponent = this.state.molecule ?
-      (<MoleculeModeratorComponent
-        molecule={this.state.molecule}
-        showStructureEditor={this.state.showStructureEditor}
-        handleEditorSave={this.handleEditorSave}
-        handleEditor={this.handleEditor}
-        onSave={this.onSave}
-      />) : <div />;
-
-    return (
-      <div>
-        {pageNav}
-        <div className="container" style={{ marginTop: '60px' }}>
-          {formSearch}
-          <hr />
-        </div>
-        {pageComponent}
-        <Notifications />
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-export default MoleculeModerator;
diff --git a/app/packs/src/components/MoleculeModeratorComponent.js b/app/packs/src/components/MoleculeModeratorComponent.js
deleted file mode 100644
index f18b24afc..000000000
--- a/app/packs/src/components/MoleculeModeratorComponent.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Col, Panel, Button, Row, FormControl, Table, Popover, ButtonGroup, Modal, OverlayTrigger, Tooltip, Form, FormGroup, InputGroup } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import { findIndex } from 'lodash';
-import StructureEditorModal from './structure_editor/StructureEditorModal';
-import MoleculesFetcher from './fetchers/MoleculesFetcher';
-
-export default class MoleculeModeratorComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false,
-      isNew: false,
-      molName: {},
-      molNames: (this.props.molecule && this.props.molecule.molecule_names) || []
-    };
-    this.handleStructureEditorSave = this.handleStructureEditorSave.bind(this);
-    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-    this.confirmDelete = this.confirmDelete.bind(this);
-    this.handleShowModal = this.handleShowModal.bind(this);
-    this.handleCloseModal = this.handleCloseModal.bind(this);
-    this.onSaveName = this.onSaveName.bind(this);
-    this.onAddName = this.onAddName.bind(this);
-  }
-
-
-  componentDidUpdate(prevProps) {
-    if (this.props !== prevProps) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        molNames: (this.props.molecule && this.props.molecule.molecule_names) || []
-      });
-    }
-  }
-  onAddName() {
-    const molName = {
-      id: -1,
-      description: 'defined by user',
-      name: ''
-    };
-    this.setState({
-      molName,
-      isNew: true,
-      show: true
-    });
-  }
- 
-  onSaveName() {
-    const { molecule } = this.props;
-    const { molNames, molName, isNew } = this.state;
-
-    const name = this.m_name.value.trim();
-    if (name == '') {
-      // eslint-disable-next-line no-alert
-      alert('Please input name!');
-      return false;
-    }
-
-    molName.name = name;
-
-    const params = {
-      id: molecule.id,
-      name_id: molName.id,
-      description: molName.description,
-      name
-    };
-
-    MoleculesFetcher.saveMoleculeName(params).then((result) => {
-      if (result.error) {
-        console.log(result);
-        alert(result.error);
-      } else {
-        if (isNew == true) {
-          molNames.push(result);
-        } else {
-          const idx = findIndex(molNames, o => o.id === molName.id);
-          molNames.splice(idx, 1, molName);
-        }
-        this.setState({
-          show: false,
-          molNames
-        });
-      }
-    });
-    return true;
-  }
-
-  handleStructureEditorCancel() {
-    this.props.handleEditor(false);
-  }
-
-  handleStructureEditorSave(molfile, svg_file = null, config = null) {
-    this.props.handleEditorSave(molfile, svg_file, config);
-  }
-
-  handleSave() {
-    this.props.onSave();
-  }
-
-  handleShowModal(nameObj, isNew = false) {
-    this.setState({
-      show: true,
-      isNew,
-      molName: nameObj
-    });
-  }
-
-  handleCloseModal() {
-    this.setState({
-      show: false
-    });
-  }
-
-  confirmDelete(nameObj) {
-    const { molNames } = this.state;
-    const params = { id: nameObj.id };
-    MoleculesFetcher.deleteMoleculeName(params).then((result) => {
-      if (result.error) {
-        console.log(result);
-        alert(result.error);
-      } else {
-        const idx = findIndex(molNames, o => o.id === nameObj.id);
-        molNames.splice(idx, 1);
-        this.setState({
-          molNames
-        });
-      }
-    });
-  }
-
-  renderDeleteButton(nameObj) {
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        delete this molecule name <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.confirmDelete(nameObj)}>
-          Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
-          No
-          </Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <ButtonGroup className="actions">
-        <OverlayTrigger
-          animation
-          placement="right"
-          root
-          trigger="focus"
-          overlay={popover}
-        >
-          <Button bsSize="xsmall" bsStyle="danger" >
-            <i className="fa fa-trash-o" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-  }
-
-
-  renderEditButton(nameObj) {
-    return (
-      <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Edit molecule name</Tooltip>}>
-        <Button bsSize="xsmall" bsStyle="primary" type="button" onClick={() => this.handleShowModal(nameObj)} >
-          <i className="fa fa-pencil-square-o" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-
-  renderModal() {
-    const { show, isNew, molName } = this.state;
-    return (
-      <Modal show={show} onHide={this.handleCloseModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>{isNew ? 'Create Molecule Name' : 'Edit Molecule Name'}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>
-                {isNew ? 'Create Molecule Name' : 'Edit Molecule Name'}
-              </Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Form horizontal className="input-form">
-                <FormGroup controlId="formControlId">
-                  <InputGroup>
-                    <InputGroup.Addon>Attr.</InputGroup.Addon>
-                    <FormControl type="text" defaultValue={molName.description} readOnly />
-                  </InputGroup>
-                </FormGroup>
-                <FormGroup controlId="formControlName">
-                  <InputGroup>
-                    <InputGroup.Addon>Molecule name</InputGroup.Addon>
-                    <FormControl type="text" defaultValue={molName.name} inputRef={(ref) => { this.m_name = ref; }} />
-                  </InputGroup>
-                </FormGroup>
-              </Form>
-              <Button bsSize="small" type="button" bsStyle="warning" onClick={() => this.onSaveName()}>Save</Button>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-
-      </Modal>
-    );
-  }
-
-  render() {
-    const { molNames } = this.state;
-    const componentEditor = (
-      <div className="search-structure-draw">
-        <StructureEditorModal
-          showModal={this.props.showStructureEditor}
-          onSave={this.handleStructureEditorSave}
-          onCancel={this.handleStructureEditorCancel}
-          molfile={this.props.molecule.molfile}
-        />
-      </div>
-    );
-
-    const tbodyHeader = (
-      <thead>
-        <tr>
-          <td width="5%">#</td>
-          <td width="15%">Action &nbsp;
-            <OverlayTrigger placement="top" overlay={<Tooltip id="groupUsersAdd">Add new molecule name</Tooltip>}>
-              <Button bsSize="xsmall" bsStyle="success" onClick={() => this.onAddName()}>
-                <i className="fa fa-plus" />
-              </Button>
-            </OverlayTrigger>
-          </td>
-          <td width="20%">Attr.</td>
-          <td width="60%">Moledule Name</td>
-        </tr>
-      </thead>
-    );
-
-    const tbodyContent = molNames.map((na, i) => (
-      <tr key={`row_${na.id}`} id={`row_${na.id}`}>
-        <td>{i + 1}</td>
-        <td>
-          { this.renderDeleteButton(na) }
-          &nbsp;
-          { this.renderEditButton(na) }
-        </td>
-        <td>{na.description}</td>
-        <td>{na.name}</td>
-      </tr>
-    ));
-
-    return (
-      <div>
-        {componentEditor}
-        <div className="container">
-          <Panel>
-            <Panel.Heading>
-              <b>InChIKey:</b>&nbsp;{this.props.molecule.inchikey}
-              &nbsp;(<b>Chemotion molecule id:</b>&nbsp;{this.props.molecule.id})
-              <br />
-              <b>Canonical SMILES:</b>&nbsp;{this.props.molecule.cano_smiles}
-            </Panel.Heading>
-            <Panel.Body>
-              <Row>
-                <Col md={12}>
-                  <Button bsStyle="primary" bsSize="sm" onClick={() => this.props.handleEditor(true)}>Open Editor&nbsp;<i className="fa fa-pencil" aria-hidden="true" /></Button>&nbsp;
-                  <Button bsStyle="warning" bsSize="sm" onClick={() => this.handleSave()}>Update molfile and svg&nbsp;<i className="fa fa-floppy-o" aria-hidden="true" /></Button>
-                </Col>
-              </Row>
-              <Row>
-                <Col md={4}>
-                  <b>molfile:</b><br />
-                  <FormControl componentClass="textarea" placeholder="textarea" value={this.props.molecule.molfile} readOnly style={{ minHeight: 'calc(50vh)' }} />
-                </Col>
-                <Col md={8}>
-                  <b>svg:</b><br />
-                  <div className="svg-container">
-                    <SVG key={this.props.molecule.molecule_svg_file} src={`/images/molecules/${this.props.molecule.molecule_svg_file}`} className="molecule-mid" />
-                  </div>
-                </Col>
-              </Row>
-              &nbsp;
-              <Row>
-                <Col md={12}>
-                  <Table>
-                    {tbodyHeader}
-                    <tbody>
-                      {tbodyContent}
-                    </tbody>
-                  </Table>
-                </Col>
-              </Row>
-              { this.renderModal() }
-            </Panel.Body>
-          </Panel>
-        </div>
-      </div>
-    );
-  }
-}
-
-MoleculeModeratorComponent.propTypes = {
-  molecule: PropTypes.object,
-  showStructureEditor: PropTypes.bool.isRequired,
-  handleEditorSave: PropTypes.func.isRequired,
-  handleEditor: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/NMRiumDisplayer.js b/app/packs/src/components/NMRiumDisplayer.js
deleted file mode 100644
index e9419754c..000000000
--- a/app/packs/src/components/NMRiumDisplayer.js
+++ /dev/null
@@ -1,472 +0,0 @@
-import React from 'react';
-import base64 from 'base-64';
-import { Modal, Button } from 'react-bootstrap';
-import { FN } from '@complat/react-spectra-editor';
-import SpectraStore from './stores/SpectraStore';
-import SpectraActions from './actions/SpectraActions';
-import LoadingActions from './actions/LoadingActions';
-import UIFetcher from './fetchers/UIFetcher';
-import { parseBase64ToArrayBuffer } from './utils/FetcherHelper';
-import Attachment from './models/Attachment';
-import { SpectraOps } from './utils/quillToolbarSymbol';
-
-export default class NMRiumDisplayer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...SpectraStore.getState(),
-      nmriumData: null,
-    };
-
-    this.iframeRef = React.createRef();
-
-    this.onChange = this.onChange.bind(this);
-    this.receiveMessage = this.receiveMessage.bind(this);
-    this.handleNMRDisplayerLoaded = this.handleNMRDisplayerLoaded.bind(this);
-    this.sendJcampDataToNMRDisplayer = this.sendJcampDataToNMRDisplayer.bind(this);
-    this.loadNMRDisplayerHostInfo = this.loadNMRDisplayerHostInfo.bind(this);
-    this.requestDataToBeSaved = this.requestDataToBeSaved.bind(this);
-    this.requestPreviewImage = this.requestPreviewImage.bind(this);
-    this.savingNMRiumWrapperData = this.savingNMRiumWrapperData.bind(this);
-    this.saveOp = this.saveOp.bind(this);
-
-    this.findDisplayingSpectra = this.findDisplayingSpectra.bind(this);
-    this.findDisplayingSpectrumID = this.findDisplayingSpectrumID.bind(this);
-    this.buildPeaksBody = this.buildPeaksBody.bind(this);
-    this.readNMRiumData = this.readNMRiumData.bind(this);
-
-    this.loadNMRDisplayerHostInfo();
-  }
-
-  componentDidMount() {
-    SpectraStore.listen(this.onChange);
-
-    window.addEventListener('message', this.receiveMessage);
-  }
-
-  componentWillUnmount() {
-    SpectraStore.unlisten(this.onChange);
-  }
-
-  handleNMRDisplayerLoaded() {
-    const isIframeLoaded = true;
-    this.setState({
-      isIframeLoaded,
-    }, () => {
-      this.sendJcampDataToNMRDisplayer();
-    });
-  }
-
-  onChange(newState) {
-    const origState = this.state;
-    this.setState({ ...origState, ...newState });
-    this.sendJcampDataToNMRDisplayer();
-  }
-
-  getSpcInfo() {
-    const { spcInfos, spcIdx } = this.state;
-    const sis = spcInfos.filter((x) => x.idx === spcIdx);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-    return si;
-  }
-
-  loadNMRDisplayerHostInfo() {
-    UIFetcher.fetchNMRDisplayerHost().then((response) => {
-      const { protocol, host, port } = response;
-      let nmriumOrigin = `${protocol}://${host}`;
-      let nmriumWrapperHost = `${protocol}://${host}`;
-      if (port) {
-        nmriumOrigin = `${nmriumOrigin}:${port}`;
-        nmriumWrapperHost = `${nmriumWrapperHost}:${port}`;
-      }
-      this.setState({ nmriumWrapperHost, nmriumOrigin });
-    });
-  }
-
-  receiveMessage(event) {
-    const { nmriumWrapperHost, nmriumOrigin } = this.state;
-    if (nmriumWrapperHost === undefined || nmriumWrapperHost === '') {
-      return;
-    }
-
-    if (event.origin === nmriumOrigin && event.data) {
-      const eventData = event.data;
-      const eventDataType = eventData.type;
-
-      if (eventDataType === 'nmr-wrapper:data-change') {
-
-        const nmrWrapperActionType = eventData.data.actionType;
-        if (nmrWrapperActionType !== '') {
-          const nmriumData = eventData.data.data;
-          const { version } = nmriumData;
-          if (version > 3) {
-            this.setState({ nmriumData: nmriumData.data });
-          }
-          else {
-            this.setState({ nmriumData });
-          }
-        }
-      } else if (eventDataType === 'nmr-wrapper:action-response') {
-        const nmrWrapperDataType = eventData.data.type;
-        if (nmrWrapperDataType === 'exportSpectraViewerAsBlob') {
-          const blobData = eventData.data.data.blob;
-          this.savingNMRiumWrapperData(blobData);
-        }
-      }
-    }
-  }
-
-  requestDataToBeSaved() {
-    this.requestPreviewImage();
-  }
-
-  requestPreviewImage() {
-    const iframeCurrent = this.iframeRef.current;
-    if (!iframeCurrent) {
-      return;
-    }
-    const { contentWindow } = iframeCurrent;
-    const dataToBeSent = {
-      type: 'exportSpectraViewerAsBlob',
-    };
-    contentWindow.postMessage({ type: 'nmr-wrapper:action-request', data: dataToBeSent }, '*');
-  }
-
-  sendJcampDataToNMRDisplayer() {
-    LoadingActions.start.defer();
-    const { fetchedFiles, isIframeLoaded, spcInfos } = this.state;
-    if (isIframeLoaded && fetchedFiles && fetchedFiles.files && fetchedFiles.files.length > 0) {
-      LoadingActions.stop.defer();
-
-      const listFileContents = fetchedFiles.files;
-      if (this.iframeRef.current
-        && listFileContents.length > 0
-        && listFileContents.length === spcInfos.length) {
-        const dataToBeSent = this.buildDataToBeSent(listFileContents, spcInfos);
-        const { contentWindow } = this.iframeRef.current;
-        if (contentWindow) {
-          contentWindow.postMessage({ type: 'nmr-wrapper:load', data: dataToBeSent }, '*');
-        }
-      }
-    } else {
-      LoadingActions.stop.defer();
-    }
-  }
-
-  buildDataToBeSent(files, spectraInfos) {
-    const { sample } = this.props;
-    const nmriumData = this.readNMRiumData(files, spectraInfos);
-    if (nmriumData) {
-      const data = { data: nmriumData, type: 'nmrium' };
-      return data;
-    }
-
-    const data = { data: [], type: 'file' };
-    for (let index = 0; index < files.length; index += 1) {
-      const fileToBeShowed = files[index].file;
-      const bufferData = parseBase64ToArrayBuffer(fileToBeShowed);
-      const spcInfo = spectraInfos[index];
-      const fileName = spcInfo.label;
-      const blobToBeSent = new Blob([bufferData]);
-      const dataItem = new File([blobToBeSent], fileName);
-      data.data.push(dataItem);
-    }
-    if (sample) {
-      const { molfile } = sample;
-      const fileName =`${sample.id}.mol`;
-      const blobToBeSent = new Blob([molfile]);
-      const dataItem = new File([blobToBeSent], fileName);
-      data.data.push(dataItem);
-    }
-    return data;
-  }
-
-  readNMRiumData(files, spectraInfos) {
-    const arrNMRiumSpecs = spectraInfos.filter((spc) => spc.label.includes('.nmrium'));
-    if (!arrNMRiumSpecs || arrNMRiumSpecs.length === 0) {
-      return false;
-    }
-
-    const nmriumSpec = arrNMRiumSpecs[0];
-
-    const arrNMRiumFiles = files.filter((file) => file.id === nmriumSpec.idx);
-    if (!arrNMRiumFiles || arrNMRiumFiles.length === 0) {
-      return false;
-    }
-
-    const nmriumDataEncoded = arrNMRiumFiles[0].file;
-    const decodedData = base64.decode(nmriumDataEncoded);
-    const nmriumData = JSON.parse(decodedData);
-    return nmriumData;
-  }
-
-  savingNMRiumWrapperData(imageBlobData = false) {
-    const { nmriumData } = this.state;
-    if (nmriumData === null || !imageBlobData) {
-      return;
-    }
-
-    const specInfo = this.getSpcInfo();
-    if (!specInfo) {
-      return;
-    }
-
-    const { label } = specInfo;
-    const specLabelParts = label.split('.');
-    const fileNameWithoutExt = specLabelParts[0];
-
-    const imageAttachment = this.prepareImageAttachment(imageBlobData, fileNameWithoutExt);
-    const nmriumAttachment = this.prepareNMRiunDataAttachment(nmriumData, fileNameWithoutExt);
-    const listFileNameToBeDeleted = [imageAttachment.filename, nmriumAttachment.filename];
-    const datasetToBeUpdated = this.prepareDatasets(listFileNameToBeDeleted);
-    if (!datasetToBeUpdated) {
-      return;
-    }
-
-    this.prepareAnalysisMetadata(nmriumData);
-
-    const { sample, handleSampleChanged } = this.props;
-
-    datasetToBeUpdated.attachments.push(imageAttachment);
-    datasetToBeUpdated.attachments.push(nmriumAttachment);
-
-    const cb = () => (
-      this.saveOp()
-    );
-    handleSampleChanged(sample, cb);
-  }
-
-  prepareDatasets(fileNameToBeDeleted = []) {
-    const specInfo = this.getSpcInfo();
-    const { sample } = this.props;
-
-    const datasetContainers = sample.datasetContainers();
-    const listDatasetFiltered = datasetContainers.filter((e) => specInfo.idDt === e.id);
-    if (listDatasetFiltered.length === 0) {
-      return false;
-    }
-
-    const datasetToBeUpdated = listDatasetFiltered[0];
-    const datasetAttachments = datasetToBeUpdated.attachments;
-    datasetAttachments.forEach((att) => {
-      if (fileNameToBeDeleted.includes(att.filename)) {
-        att.is_deleted = true;
-      }
-    });
-    datasetToBeUpdated.attachments = datasetAttachments;
-    return datasetToBeUpdated;
-  }
-
-  prepareNMRiunDataAttachment(nmriumData, fileNameNoExt) {
-    const spaceIndent = 0;
-    const dataAsJson = JSON.stringify(
-      nmriumData,
-      (key, value) => (ArrayBuffer.isView(value) ? Array.from(value) : value),
-      spaceIndent,
-    );
-    const blobData = new Blob([dataAsJson], { type: 'text/plain' });
-    const fileName = `${fileNameNoExt}.nmrium`;
-    blobData.name = fileName;
-    const dataAttachment = Attachment.fromFile(blobData);
-    return dataAttachment;
-  }
-
-  prepareImageAttachment(blobData, fileNameNoExt) {
-    const fileName = `${fileNameNoExt}.svg`;
-    const blobDataToBeSaved = blobData;
-    blobDataToBeSaved.name = fileName;
-    const imageAttachment = Attachment.fromFile(blobDataToBeSaved);
-    imageAttachment.thumb = true;
-    return imageAttachment;
-  }
-
-  prepareAnalysisMetadata(nmriumData) {
-    const buildPeaksBodyObject = this.buildPeaksBody(nmriumData);
-    const { peaksBody, layout } = buildPeaksBodyObject;
-
-    if (peaksBody === '' || layout === '') {
-      return '';
-    }
-
-    const layoutOpsObj = SpectraOps[layout];
-
-    if (!layoutOpsObj) {
-      return '';
-    }
-
-    const { sample } = this.props;
-    const specInfo = this.getSpcInfo();
-
-    const analysesContainers = sample.analysesContainers();
-
-    const ops = [
-      ...layoutOpsObj.head(''),
-      { insert: peaksBody },
-      ...layoutOpsObj.tail(),
-    ];
-    analysesContainers.forEach((analyses) => {
-      if (analyses.id !== specInfo.idAe) return;
-      analyses.children.forEach((ai) => {
-        if (ai.id !== specInfo.idAi) return;
-        ai.extended_metadata.content.ops = [ // eslint-disable-line
-          ...ai.extended_metadata.content.ops,
-          ...ops,
-        ];
-      });
-    });
-  }
-
-  buildPeaksBody(nmriumData) {
-    const displayingSpectra = this.findDisplayingSpectra(nmriumData);
-    if (displayingSpectra.length <= 0) {
-      return { peaksBody: '', layout: '' };
-    }
-
-    const firstSpectrum = displayingSpectra[0];
-    const { info } = firstSpectrum;
-    if (info) {
-      const { dimension } = info;
-      if (dimension === 2) {
-        return { peaksBody: '', layout: '' };
-      }
-    }
-
-    const firstSpectrumPeaks = firstSpectrum.peaks;
-    const { values } = firstSpectrumPeaks;
-    const peaks = values;
-    const layout = firstSpectrum.nucleus;
-    const shift = { enable: false, peak: false, ref: { label: false, name: '---', value: 0 } };
-    const decimal = 2;
-    const peaksBody = FN.peaksBody({
-      peaks, layout, decimal, shift
-    });
-    return { peaksBody, layout };
-  }
-
-  findDisplayingSpectra(nmriumData) {
-    const { spectra, correlations } = nmriumData;
-    const displayingSpectrumID = this.findDisplayingSpectrumID(correlations);
-    if (displayingSpectrumID) {
-      const displayingSpectra = spectra.filter((spectrum) => {
-        const { id } = spectrum;
-        return id === displayingSpectrumID;
-      });
-      return displayingSpectra;
-    }
-
-    const nonFIDSpectra = spectra.filter((spectrum) => {
-      const { info } = spectrum;
-      const { isFid } = info;
-      return isFid === false;
-    });
-    return nonFIDSpectra;
-  }
-
-  findDisplayingSpectrumID(correlations) {
-    if (!correlations) {
-      return false;
-    }
-
-    try {
-      const { values } = correlations;
-      if (values.length > 0) {
-        const firstValue = values[0];
-        const { link } = firstValue;
-        if (link.length > 0) {
-          const firstLink = link[0];
-          const { experimentID } = firstLink;
-          return experimentID;
-        }
-      }
-      return false;
-    } catch (error) {
-      return false;
-    }
-  }
-
-  saveOp() {
-    SpectraActions.ToggleModalNMRDisplayer.defer();
-    const { handleSubmit } = this.props;
-    handleSubmit()
-  }
-
-  renderNMRium(nmriumWrapperHost) {
-    return (
-      <Modal.Body>
-        <iframe
-          id="nmrium_wrapper"
-          className="spectra-editor"
-          src={nmriumWrapperHost}
-          allowFullScreen
-          ref={this.iframeRef}
-          onLoad={this.handleNMRDisplayerLoaded}
-        />
-      </Modal.Body>
-    );
-  }
-
-  renderModalTitle() {
-    const { nmriumData } = this.state;
-    let hasSpectra = false;
-    if (nmriumData && nmriumData.spectra.length > 0) {
-      hasSpectra = true;
-    }
-
-    return (
-      <Modal.Header>
-        <Button
-          bsStyle="danger"
-          bsSize="small"
-          className="button-right"
-          onClick={() => {
-            SpectraActions.ToggleModalNMRDisplayer.defer();
-          }}
-        >
-          <span>
-            <i className="fa fa-times" />
-            {' '}
-            Close without Save
-          </span>
-        </Button>
-        {
-          hasSpectra ?
-          (
-            <Button
-              bsStyle="success"
-              bsSize="small"
-              className="button-right"
-              onClick={() => {
-                this.requestDataToBeSaved()
-              }}
-            >
-              <span>
-                <i className="fa fa-floppy-o" />
-                {' '}
-                Close with Save
-              </span>
-            </Button>
-          ) : null
-        }
-      </Modal.Header>
-    );
-  }
-
-  render() {
-    const { showModalNMRDisplayer, nmriumWrapperHost } = this.state;
-
-    return (
-      <div className="spectra-editor">
-        <Modal
-          show={showModalNMRDisplayer}
-          dialogClassName="spectra-editor-dialog"
-          animation
-          onHide={this.closeOp}
-        >
-          {this.renderModalTitle()}
-          {this.renderNMRium(nmriumWrapperHost)}
-        </Modal>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/Navigation.js b/app/packs/src/components/Navigation.js
deleted file mode 100644
index 2fce00a42..000000000
--- a/app/packs/src/components/Navigation.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import { Nav, Navbar, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import UserAuth from './UserAuth';
-import Search from './search/Search';
-import ManagingActions from './managing_actions/ManagingActions';
-import ContextActions from './contextActions/ContextActions';
-import UserStore from './stores/UserStore';
-import UIStore from './stores/UIStore'
-import UserActions from './actions/UserActions';
-import UIActions from './actions/UIActions';
-import ElementActions from './actions/ElementActions';
-import NavNewSession from '../libHome/NavNewSession'
-import NavHead from '../libHome/NavHead'
-import DocumentHelper from '../components/utils/DocumentHelper';
-import NavigationModal from './NavigationModal';
-import SearchFilter from './search/SearchFilter.js'
-
-const colMenuTooltip = <Tooltip id="col_menu_tooltip">Toggle sidebar</Tooltip>;
-
-export default class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: null,
-      genericEls: null,
-      showAdvancedSearch: false,
-      modalProps: {
-        show: false,
-        title: "",
-        component: "",
-        action: null,
-        listSharedCollections: false,
-      },
-      omniauthProviders: []
-    }
-    this.onChange = this.onChange.bind(this);
-    this.onUIChange = this.onUIChange.bind(this);
-    this.toggleCollectionTree = this.toggleCollectionTree.bind(this);
-    this.updateModalProps = this.updateModalProps.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIChange)
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-    UserActions.fetchGenericEls();
-    UserActions.fetchOmniauthProviders();
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIChange)
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    let newId = state.currentUser ? state.currentUser.id : null
-    let oldId =this.state.currentUser ?  this.state.currentUser.id : null
-    if (newId !== oldId){
-      this.setState({
-        currentUser: state.currentUser
-      });
-    }
-    if (this.state.genericEls === null) {
-      this.setState({
-        genericEls: state.genericEls
-      });
-    }
-    if (state.omniauthProviders !== this.state.omniauthProviders) {
-      this.setState({
-        omniauthProviders: state.omniauthProviders
-      });
-    }
-  }
-
-  onUIChange(state) {
-    this.setState({
-      modalProps: state.modalParams,
-      showAdvancedSearch: state.showAdvancedSearch
-    });
-  }
-
-  toggleCollectionTree() {
-    this.props.toggleCollectionTree();
-  }
-
-  token(){
-    return DocumentHelper.getMetaContent("csrf-token")
-  }
-
-  updateModalProps(modalProps) {
-    this.setState({
-      modalProps: modalProps
-    });
-  }
-
-  advancedSearch(filters, authors) {
-    const uiState = UIStore.getState();
-    const selection = {
-      elementType: 'all',
-      advanced_params: filters,
-      authors_params: authors,
-      search_by_method: 'advanced',
-      page_size: uiState.number_of_results
-    };
-    UIActions.setSearchSelection(selection);
-    ElementActions.fetchBasedOnSearchSelectionAndCollection({
-      selection,
-      collectionId: uiState.currentCollection.id,
-      isSync: uiState.isSync
-    });
-  }
-
-  navHeader() {
-    return (
-      <Navbar.Header className="collec-tree">
-        <Navbar.Text style={{cursor: "pointer"}}>
-          <OverlayTrigger placement="right" delayShow={1000} overlay={colMenuTooltip}>
-            <i  className="fa fa-list" style={{fontStyle: "normal"}}
-                onClick={this.toggleCollectionTree} />
-          </OverlayTrigger>
-        </Navbar.Text>
-        <Navbar.Text />
-        <NavHead />
-      </Navbar.Header>
-    )
-  }
-
-  render() {
-    const { modalProps, showAdvancedSearch, genericEls, omniauthProviders } = this.state;
-    const { profile } = UserStore.getState();
-    // const { customClass } = (profile && profile.data) || {};
-    const customClass = 'btn-unified'
-
-    return (this.state.currentUser
-      ? <Navbar fluid className='navbar-custom'>
-          {this.navHeader()}
-          <Nav navbar className='navbar-form'>
-            <Search />
-            <ManagingActions updateModalProps={this.updateModalProps} customClass={customClass} genericEls={genericEls} />
-            <ContextActions updateModalProps={this.updateModalProps} customClass={customClass} />
-            <NavigationModal {...modalProps} />
-          </Nav>
-          <UserAuth/>
-          <div style={{clear: "both"}} />
-          <SearchFilter searchFunc={this.advancedSearch}
-            show={showAdvancedSearch}/>
-        </Navbar>
-      : <Navbar fluid className='navbar-custom'>
-          {this.navHeader()}
-          <Nav navbar className='navbar-form'>
-            <Search noSubmit={false} />
-          </Nav>
-          <NavNewSession authenticityToken={this.token()} omniauthProviders={omniauthProviders}/>
-          <div style={{clear: "both"}} />
-        </Navbar>
-    )
-  }
-}
diff --git a/app/packs/src/components/NavigationModal.js b/app/packs/src/components/NavigationModal.js
deleted file mode 100644
index 4bbfd922a..000000000
--- a/app/packs/src/components/NavigationModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import UIActions from 'src/stores/alt/actions/UIActions';
-
-function NavigationModal({
-  show, title, component, customModal, ...props
-}) {
-  const Component = component;
-  if (!show) return (<span />);
-
-  return (
-    <Modal
-      dialogClassName={customModal}
-      animation={false}
-      show={show}
-      onHide={() => UIActions.hideModal()}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>
-          {title}
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Component onHide={() => UIActions.hideModal()} {...props} />
-      </Modal.Body>
-    </Modal>
-  );
-}
-
-NavigationModal.propTypes = {
-  show: PropTypes.bool,
-  customModal: PropTypes.string,
-  component: PropTypes.func,
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-};
-
-NavigationModal.defaultProps = {
-  show: false,
-  customModal: '',
-  component: null,
-  title: '',
-};
-
-export default NavigationModal;
diff --git a/app/packs/src/components/Notifications.js b/app/packs/src/components/Notifications.js
index a5239a509..9cdf1f3ca 100644
--- a/app/packs/src/components/Notifications.js
+++ b/app/packs/src/components/Notifications.js
@@ -14,7 +14,7 @@ class Notifications extends Component {
   render() {
     return (
       <div>
-        <NotificationSystem key={uuid.v4()} ref={(notification) => { this.notificationSystem = notification; }} />
+        <NotificationSystem ref={(notification) => { this.notificationSystem = notification; }} />
       </div>
     );
   }
diff --git a/app/packs/src/components/NovncStatus.js b/app/packs/src/components/NovncStatus.js
deleted file mode 100644
index 5110cdd77..000000000
--- a/app/packs/src/components/NovncStatus.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-const ConnectedBtn = () => (<span>
-  <i
-    className="fa fa-check-circle-o"
-    aria-hidden="true"
-    style={{ color: '#90ee90', float: 'right', fontSize: '20px' }}
-  />
-</span>);
-
-const DisconnectedBtn = () => (<span>
-  <i
-    className="fa fa-times-circle-o"
-    aria-hidden="true"
-    style={{ color: 'red', float: 'right', fontSize: '20px' }}
-  />
-</span>
-);
-
-export { ConnectedBtn, DisconnectedBtn };
diff --git a/app/packs/src/components/NumeralInput.js b/app/packs/src/components/NumeralInput.js
deleted file mode 100644
index e0210c41b..000000000
--- a/app/packs/src/components/NumeralInput.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Numeral from 'numeral';
-import {
-  FormGroup,
-  FormControl,
-  ControlLabel,
-  InputGroup,
-} from 'react-bootstrap';
-
-export default class NumeralInput extends Component {
-  constructor(props) {
-    super(props);
-
-    let { value } = props;
-    this.state = {
-      numeralValue: this._convertValueToNumeralValue(value)
-    };
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let { value } = nextProps;
-    this.setState({
-      numeralValue: this._convertValueToNumeralValue(value)
-    });
-  }
-
-  _convertValueToNumeralValue(value) {
-    let { numeralFormat } = this.props;
-    let numeralValue = null;
-
-    try {
-      numeralValue = Numeral(value).format(numeralFormat);
-    } catch (err) {
-      console.log(`Error in NumeralInput component: ${err}`);
-    }
-
-    return numeralValue;
-  }
-
-  //TODO fix issue that cursor is behind, when numeral inserts a comma:
-  // containing comas need to be compared to previous amount
-  _handleInputValueChange(event) {
-    const inputField = event.target;
-    const { value, selectionStart } = inputField;
-    const formatedValue = this._convertValueToNumeralValue(value);
-    const unformatedValue = Numeral().unformat(formatedValue);
-    const { onChange } = this.props;
-
-    this.setState(
-      { numeralValue: formatedValue },
-      () => { inputField.selectionStart = selectionStart; }
-    );
-    onChange(unformatedValue);
-  }
-
-  render() {
-    let { bsSize, bsStyle, addonAfter, buttonAfter, label, disabled } = this.props;
-    let { numeralValue } = this.state;
-    let addonAfterWrapper, buttonAfterWrapper;
-    if (addonAfter) {
-      addonAfterWrapper = <InputGroup.Addon>{addonAfter}</InputGroup.Addon>;
-    }
-
-    if(buttonAfter) {
-      buttonAfterWrapper = <InputGroup.Button>{buttonAfter}</InputGroup.Button>;
-    }
-
-    return (
-      <FormGroup>
-        <ControlLabel>{label}</ControlLabel>
-        <InputGroup>
-          <FormControl type='text'  value={numeralValue || ''} bsSize={bsSize}
-            bsStyle={bsStyle}
-            disabled={disabled}
-            onChange={ event => this._handleInputValueChange(event)} />
-          {buttonAfterWrapper}
-          {addonAfterWrapper}
-        </InputGroup>
-      </FormGroup>
-    );
-  }
-}
-
-NumeralInput.defaultProps = {
-  numeralFormat: '',
-  value: 0,
-  onChange: () => {
-  }
-};
-
-NumeralInput.propTypes = {
-  onChange: PropTypes.func,
-  numeralFormat: PropTypes.string,
-  disabled: PropTypes.bool,
-  addonAfter: PropTypes.node,
-  buttonAfter: PropTypes.node,
-  label: PropTypes.node,
-  bsSize: PropTypes.string,
-  bsStyle: PropTypes.string,
-};
diff --git a/app/packs/src/components/NumeralInputWithUnits.js b/app/packs/src/components/NumeralInputWithUnits.js
deleted file mode 100644
index 97b3ac9a7..000000000
--- a/app/packs/src/components/NumeralInputWithUnits.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, {Component} from 'react';
-import {DropdownButton, MenuItem} from 'react-bootstrap';
-import NumeralInput from './NumeralInput';
-
-export default class NumeralInputWithUnits extends Component {
-  constructor(props) {
-    super(props);
-
-    let {value, unit} = props;
-    this.state ={
-      unit: unit,
-      value: value
-    };
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let { value, unit } = nextProps;
-    this.setState({
-      unit: unit,
-      value: value
-    })
-  }
-
-  _handleUnitSelect(nextUnit) {
-    let { value, unit } = this.state;
-    let convertedValue = value;
-    if(this.props.convertValueFromUnitToNextUnit) {
-      convertedValue = this.props.convertValueFromUnitToNextUnit(unit, nextUnit, value);
-    }
-
-    this.setState({
-      unit: nextUnit,
-      value: convertedValue
-    }, () => this._onChangeCallback());
-  }
-
-  _handleValueChange(value) {
-    this.setState({
-      value
-    }, () => this._onChangeCallback());
-  }
-
-  _renderUnitsAsMenuItems() {
-    let {units} = this.props;
-    return units.map((unit, index) => {
-      return (
-        <MenuItem key={'unit_' + index} onSelect={() => this._handleUnitSelect(unit)}>
-          {unit}
-        </MenuItem>
-      );
-    });
-  }
-
-  _renderDropdownButtonAddon(title) {
-    return (
-      <DropdownButton id="dropdown-button-addon" title={title}>
-        {this._renderUnitsAsMenuItems()}
-      </DropdownButton>
-    );
-  }
-
-  _onChangeCallback() {
-    if(this.props.onChange) {
-      this.props.onChange(this.state);
-    }
-  }
-
-// TODO fix css-issue with wrong z-index
-  render() {
-    let {units, bsSize, bsStyle, label, numeralFormat, key, disabled} = this.props;
-    let {unit, value} = this.state;
-
-    let buttonAfter = (units.length > 1) ? this._renderDropdownButtonAddon(unit) : '';
-    let addonAfter = (units.length == 1) ? unit : '';
-    return (
-      <NumeralInput key={key} buttonAfter={buttonAfter} addonAfter={addonAfter}
-        onChange={(value) => this._handleValueChange(value)}
-        value={value} bsSize={bsSize} bsStyle={bsStyle} label={label}
-        disabled={disabled} numeralFormat={numeralFormat}/>
-    );
-  }
-}
-
-NumeralInputWithUnits.defaultProps = {
-  value: 0,
-  numeralFormat: '',
-  units: []
-};
diff --git a/app/packs/src/components/NumeralInputWithUnitsCompo.js b/app/packs/src/components/NumeralInputWithUnitsCompo.js
deleted file mode 100644
index 8adc2cff3..000000000
--- a/app/packs/src/components/NumeralInputWithUnitsCompo.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FormControl, ControlLabel, InputGroup, Button } from 'react-bootstrap';
-import { metPreConv, metPrefSymbols } from 'src/utilities/metricPrefix';
-
-export default class NumeralInputWithUnitsCompo extends Component {
-  constructor(props) {
-    super(props);
-
-    const { value, block, metricPrefix, precision } = props;
-    this.state = {
-      value,
-      block,
-      metricPrefix: metricPrefix || 'n',
-      currentPrecision: precision,
-      valueString: 0,
-      showString: false,
-    };
-  }
-
-  componentDidMount() {
-    this.forceUpdate();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { value, block } = nextProps;
-    this.setState({ value, block });
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const hasChanged = nextProps.value !== this.props.value
-      || nextProps.block !== this.props.block
-      || nextProps.metricPrefix !== this.props.metricPrefix
-      || nextProps.bsStyle !== this.props.bsStyle
-      || nextProps.disabled !== this.props.disabled
-      || nextState.value !== this.state.value
-      || nextState.block !== this.state.block
-      || nextState.metricPrefix !== this.state.metricPrefix
-      || nextState.currentPrecision !== this.state.currentPrecision
-      || nextState.valueString !== this.state.valueString
-      || nextState.showString !== this.state.showString
-      || nextProps.label !== this.props.label
-      || nextProps.unit !== this.props.unit;
-    return hasChanged;
-  }
-
-  _handleValueChange(value) {
-    this.setState({ value }, () => this._onChangeCallback());
-  }
-
-  _handleInputValueChange(event) {
-    const inputField = event.target;
-    inputField.focus();
-    const { value, selectionStart } = inputField;
-    let { valueString } = this.state;
-    let newValue = value;
-    const { metricPrefix } = this.state;
-    const lastChar = value[selectionStart - 1] || '';
-
-    if (lastChar !== '' && !lastChar.match(/-|\d|\.|(,)/)) return false;
-    // if (value[0] !== '0') { newValue = '0'.concat(newValue); }
-
-    const md = lastChar.match(/-|\d/);
-    const mc = lastChar.match(/\.|(,)/);
-
-    if (mc && mc[1]) {
-      newValue = `${value.slice(0, selectionStart - 1)}.${value.slice(selectionStart)}`;
-      // } else if (value === '00') { // else if (value === '0.' || value === '00') {
-      //   newValue = '0.0';
-    }
-
-    newValue = newValue.replace('--', '');
-    newValue = newValue.replace('..', '.');
-    const matchMinus = newValue.match(/\d+(-+)\d*/);
-    if (matchMinus && matchMinus[1]) newValue = newValue.replace(matchMinus[1], '');
-
-    if (md || mc) { valueString = newValue; }
-
-    this.setState(
-      {
-        value: metPreConv(newValue, metricPrefix, 'n'),
-        showString: true,
-        valueString,
-      },
-      () => { this._onChangeCallback(); inputField.selectionStart = selectionStart; }
-    );
-    return null;
-  }
-
-  _handleInputValueFocus() {
-    const { value, metricPrefix } = this.state;
-    this.setState({
-      currentPrecision: undefined,
-      showString: true,
-      valueString: metPreConv(value, 'n', metricPrefix) || 0,
-    });
-  }
-
-  _handleInputValueBlur() {
-    this.setState({
-      currentPrecision: this.props.precision,
-      showString: false,
-    }, () => this._onChangeCallback());
-  }
-
-  handleInputDoubleClick() {
-    if (this.state.block) {
-      this.setState({
-        block: false,
-        value: 0,
-      });
-    }
-  }
-
-  _onChangeCallback() {
-    if (this.props.onChange) {
-      this.props.onChange({ ...this.state, unit: this.props.unit });
-    }
-  }
-
-  togglePrefix() {
-    const { metricPrefixes } = this.props;
-    let ind = metricPrefixes.indexOf(this.state.metricPrefix);
-    if (ind < metricPrefixes.length - 1) {
-      ind += 1;
-    } else {
-      ind = 0;
-    }
-    this.setState({
-      metricPrefix: metricPrefixes[ind]
-    });
-
-    this.props.onMetricsChange && this.props.onMetricsChange({ ...this.state, metricUnit: this.props.unit, metricPrefix: metricPrefixes[ind] });
-  }
-
-  render() {
-    const {
-      bsSize, bsStyle, disabled, label, unit, name
-    } = this.props;
-    const {
-      showString, value, metricPrefix,
-      currentPrecision, valueString, block,
-    } = this.state;
-    const mp = metPrefSymbols[metricPrefix];
-    const nanOrInfinity = isNaN(value) || !isFinite(value);
-    const val = () => {
-      if (!showString && nanOrInfinity) {
-        return 'n.d.';
-      } else if (!showString) {
-        return metPreConv(value, 'n', metricPrefix).toPrecision(currentPrecision);
-      }
-      return valueString;
-    };
-    const inputDisabled = disabled ? true : block;
-    // BsStyle-s for Input and buttonAfter have differences
-    const bsStyleBtnAfter = bsStyle === 'error' ? 'danger' : bsStyle;
-    const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : null;
-    if (unit !== 'n') {
-      const prefixSwitch = (
-        <InputGroup.Button>
-          <Button
-            disabled={inputDisabled}
-            active
-            onClick={() => { this.togglePrefix(); }}
-            bsStyle={bsStyleBtnAfter}
-            bsSize={bsSize}
-          >
-            {mp + unit}
-          </Button>
-        </InputGroup.Button>
-      );
-
-      return (
-        <div className={`numeric-input-unit_${this.props.unit}`}>
-          {labelWrap}
-          <InputGroup
-            onDoubleClick={event => this.handleInputDoubleClick(event)}
-          >
-            <FormControl
-              type="text"
-              bsClass="bs-form--compact form-control"
-              disabled={inputDisabled}
-              bsSize={bsSize}
-              bsStyle={bsStyle}
-              value={val() || ''}
-              onChange={event => this._handleInputValueChange(event)}
-              onFocus={event => this._handleInputValueFocus(event)}
-              onBlur={event => this._handleInputValueBlur(event)}
-              name={name}
-            />
-            {prefixSwitch}
-          </InputGroup>
-        </div>
-      );
-    }
-    return (
-      <div className="numeric-input-unit">
-        {labelWrap}
-        <div onDoubleClick={event => this.handleInputDoubleClick(event)}>
-          <FormControl
-            type="text"
-            bsClass="bs-form--compact form-control"
-            disabled={inputDisabled}
-            bsSize={bsSize}
-            bsStyle={bsStyle}
-            value={val() || ''}
-            onChange={event => this._handleInputValueChange(event)}
-            onFocus={event => this._handleInputValueFocus(event)}
-            onBlur={event => this._handleInputValueBlur(event)}
-            onDoubleClick={event => this.handleInputDoubleClick(event)}
-            name={name}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-NumeralInputWithUnitsCompo.propTypes = {
-  onChange: PropTypes.func,
-  onMetricsChange: PropTypes.func,
-  unit: PropTypes.string,
-  units: PropTypes.array,
-  metricPrefix: PropTypes.string,
-  metricPrefixes: PropTypes.array,
-  precision: PropTypes.number,
-  disabled: PropTypes.bool,
-  label: PropTypes.node,
-  bsSize: PropTypes.string,
-  bsStyle: PropTypes.string,
-  name: PropTypes.string
-};
-
-NumeralInputWithUnitsCompo.defaultProps = {
-  unit: 'n',
-  value: 0,
-  units: [],
-  disabled: false,
-  block: false,
-  bsSize: 'small',
-  bsStyle: 'default',
-  name: ''
-};
diff --git a/app/packs/src/components/PermissionIcons.js b/app/packs/src/components/PermissionIcons.js
deleted file mode 100644
index b678256c8..000000000
--- a/app/packs/src/components/PermissionIcons.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const PermissionIcons = ({pl}) =>{
-  return(pl>-1 ?
-    <span>
-      <i className="fa fa-newspaper-o"></i>
-      &nbsp;{pl>0 ? <i className="fa fa-pencil-square-o"></i> : null}
-      &nbsp;{pl>1 ? <i className="fa fa-share-alt"></i> : null}
-      &nbsp;{pl>2 ? <i className="fa fa-trash"></i> : null}
-      &nbsp;{pl>3 ? <i className="fa fa-download"></i> : null}
-      &nbsp;{pl>4 ? <i className="fa fa-exchange"></i> : null}
-    </span>
-    : null
-  )
-}
-
-PermissionIcons.propTypes = {
-  pl: PropTypes.number.isRequired,
-}
-
-export default PermissionIcons;
diff --git a/app/packs/src/components/PolymerSection.js b/app/packs/src/components/PolymerSection.js
deleted file mode 100644
index 834557fd0..000000000
--- a/app/packs/src/components/PolymerSection.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import React from 'react';
-import { FormGroup, ControlLabel, FormControl, Radio, Row, Col } from 'react-bootstrap';
-import NumeralInputWithUnitsCompo from 'src/apps/mydb/elements/details/NumeralInputWithUnitsCompo'
-import ElementalCompositionGroup from 'src/apps/mydb/elements/details/samples/propertiesTab/ElementalCompositionGroup'
-import NotificationActions from 'src/stores/alt/actions/NotificationActions'
-import Select from 'react-select'
-
-export default class PolymerSection extends React.Component {
-
-  handleAmountChanged(amount) {
-    this.props.parent.handleAmountChanged(amount);
-  }
-
-  handleCustomInfoNumericChanged(e, name, residue, sample) {
-    residue.custom_info[name] = e.value;
-
-    // make calculations if loading was changed
-    if (name == 'loading') {
-
-      this.handleAmountChanged(sample.amount);
-      if (residue.custom_info.loading_type == 'external')
-        sample.external_loading = e.value;
-
-      let errorMessage;
-      if (e.value == 0.0)
-        errorMessage = 'Loading can not be 0. Please define a value.'
-
-      let mw_defined = sample.molecule.molecular_weight;
-      let value_to_check = e.value * mw_defined;
-
-      if (value_to_check > 1000.0) {
-        errorMessage = 'Combination of loading and molecular weight is wrong\
-         (MW*L > 1.0)'
-      }
-
-      if (errorMessage)
-        NotificationActions.add({
-          message: errorMessage,
-          level: 'error'
-        });
-
-    } else {
-      this.props.parent.handleSampleChanged(sample);
-    }
-  }
-
-  handleCustomInfoChanged(e, residue, sample) {
-    residue.custom_info[e.target.name] = e.target.value;
-
-    if (e.target.name == "formula") {
-      if (e.target.value) {
-        sample.formulaChanged = true;
-      }
-    }
-
-    this.props.parent.handleSampleChanged(sample);
-  }
-
-  handlePRadioChanged(e, residue, sample) {
-    residue.custom_info['loading_type'] = e.target.value;
-
-    if (e.target.value == 'external') {
-      sample.loading = sample.external_loading;
-    }
-    else {
-      let e_compositon = sample.elemental_compositions.find(function (item) {
-        return item.composition_type == e.target.value
-      });
-
-      if (e_compositon)
-        sample.loading = e_compositon.loading;
-    }
-
-    this.props.parent.handleSampleChanged(sample);
-  }
-
-  handlePolymerTypeSelectChanged(value, residue, sample) {
-    residue.custom_info['polymer_type'] = value;
-    delete residue.custom_info['surface_type'];
-
-    // tell parent (SampleDetails) component about changes
-    this.props.parent.handleSampleChanged(sample);
-  }
-
-  handleSurfaceTypeSelectChanged(value, residue, sample) {
-    residue.custom_info['surface_type'] = value;
-    delete residue.custom_info['polymer_type'];
-    this.props.parent.handleSampleChanged(sample);
-  }
-
-
-  checkInputStatus(sample, key) {
-    if (sample['error_' + key]) {
-      return 'error';
-    } else {
-      return 'success';
-    }
-  }
-
-  polymerFormula(sample, residue) {
-    return (
-      <FormGroup>
-        <ControlLabel>Formula</ControlLabel>
-        <FormControl type="text"
-          value={residue.custom_info.formula || ''}
-          name="formula"
-          key={'polymer_formula_input' + sample.id.toString()}
-          onChange={(e) => this.handleCustomInfoChanged(e, residue, sample)}
-        />
-      </FormGroup>
-    )
-  }
-
-  customInfoRadio(label, value, residue, sample) {
-    let additionalLoadingInput = false;
-
-    if (value == 'external') {
-      let disabled = !(residue.custom_info.loading_type == value);
-      additionalLoadingInput = (
-        <td width="50%" className="loading-input visible-hd">
-          <NumeralInputWithUnitsCompo
-            value={sample.loading}
-            unit='mmol/g'
-            metricPrefix='n'
-            metricPrefixes={['n']}
-            precision={3}
-            key={'polymer_loading_input' + sample.id.toString()}
-            name="polymer_loading"
-            // TODO: enable again
-            //bsStyle={this.checkInputStatus(sample, 'loading')}
-            onChange={(e) => this.handleCustomInfoNumericChanged(e, 'loading', residue, sample)}
-            disabled={disabled}
-            readOnly={disabled}
-          />
-        </td>
-      )
-    }
-
-    let rel_composition = sample.elemental_compositions.find(function (item) {
-      return item.composition_type == value
-    });
-    let rel_loading = rel_composition && rel_composition.loading;
-
-    return (
-      <tr>
-        <td>
-          <FormGroup>
-            <Radio onChange={(e) => this.handlePRadioChanged(e, residue, sample)}
-              checked={residue.custom_info.loading_type == value}
-              name="loading_type"
-              key={value + sample.id.toString() + 'loading_type'}
-              value={value}
-              disabled={value != 'external' && !rel_loading}
-            >{label}</Radio>
-          </FormGroup>
-        </td>
-        {additionalLoadingInput}
-      </tr>
-    )
-  }
-
-  polymerLoading(sample, residue) {
-    if (sample.reaction_product)
-      return false;
-
-    return (
-      <table width="100%" key={'polymer_loading' + sample.id.toString()}>
-        <thead>
-          <tr>
-            <th>
-              <label>Loading according to:</label>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.customInfoRadio("Mass difference", "mass_diff", residue, sample)}
-          {this.customInfoRadio("100% conversion", "full_conv", residue, sample)}
-          {this.customInfoRadio("Elemental analyses", "found", residue, sample)}
-          {this.customInfoRadio("External estimation", "external", residue, sample)}
-          <tr className="hidden-hd">
-            <td>
-              <NumeralInputWithUnitsCompo
-                value={sample.loading}
-                unit='mmol/g'
-                metricPrefix='n'
-                metricPrefixes={['n']}
-                precision={3}
-                key={'polymer_loading_input' + sample.id.toString()}
-                name="polymer_loading"
-                bsStyle={this.checkInputStatus(sample, 'loading')}
-                onChange={(e) => this.handleCustomInfoNumericChanged(e, 'loading', residue, sample)}
-                disabled={residue.custom_info.loading_type != 'external'}
-                readOnly={residue.custom_info.loading_type != 'external'}
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    )
-  }
-
-  polymerType(sample, residue) {
-    let selectOptions = [
-      { label: 'Polystyrene', value: 'polystyrene' },
-      { label: 'Polyethyleneglycol', value: 'polyethyleneglycol' },
-      { label: 'Self-defined', value: 'self_defined' }
-    ];
-
-    return (
-      <Select
-        options={selectOptions}
-        simpleValue
-        key={"polymer_type" + sample.id.toString()}
-        name="polymer_type"
-        value={residue.custom_info.polymer_type}
-        clearable={false}
-        onChange={(v) => this.handlePolymerTypeSelectChanged(v, residue, sample)}
-      />
-    )
-  }
-
-  surfaceType(sample, residue) {
-    let selectOptions = [
-      { label: 'Glass', value: 'glass' },
-      { label: 'Si native oxide', value: 'si Native Oxide' },
-      { label: 'Si, 5nm Ti, 100nm Au', value: 'si, 5nm Ti, 100nm Au' }
-    ];
-
-    return (
-      <Select
-        options={selectOptions}
-        simpleValue
-        key={`surface_type_${sample.id}`}
-        name="surface_type"
-        value={residue.custom_info.surface_type}
-        clearable={false}
-        onChange={(v) => this.handleSurfaceTypeSelectChanged(v, residue, sample)}
-      />
-    )
-  }
-
-  polymerCrossLinkage(sample, residue) {
-    return (
-      <FormGroup>
-        <ControlLabel>Cross-linkage</ControlLabel>
-        <FormControl type="text"
-          value={residue.custom_info.cross_linkage || ''}
-          name="cross_linkage"
-          key={'cross_linkage' + sample.id.toString()}
-          onChange={(e) => this.handleCustomInfoChanged(e, residue, sample)}
-        />
-      </FormGroup>
-    )
-  }
-
-  render() {
-    let sample = this.props.sample || {}
-    let residue = sample.residues[0];
-
-    if (!this.props.show)
-      return false;
-
-    return (
-      <div className="polymer-section">
-        <Row>
-          <Col md={6}>
-            <label>Polymer type</label>
-            {this.polymerType(sample, residue)}
-          </Col>
-          <Col md={6}>
-            <label>Surface type</label>
-            {this.surfaceType(sample, residue)}
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col md={6}>
-            {this.polymerCrossLinkage(sample, residue)}
-          </Col>
-          <Col md={6}>
-            {this.polymerFormula(sample, residue)}
-          </Col>
-        </Row>
-        <Row>
-          <Col md={8}>
-            <ElementalCompositionGroup
-              handleSampleChanged={(s) => this.props.parent.handleSampleChanged(s)}
-              sample={sample} />
-          </Col>
-          <Col md={4}>
-            {this.polymerLoading(sample, residue)}
-          </Col>
-        </Row>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/PrivateNoteElement.js b/app/packs/src/components/PrivateNoteElement.js
deleted file mode 100644
index acc285116..000000000
--- a/app/packs/src/components/PrivateNoteElement.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/* eslint-disable object-shorthand, no-trailing-spaces, 
-object-property-newline, semi, react/no-unused-prop-types, react/prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, FormControl, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import PrivateNoteFetcher from './fetchers/PrivateNoteFetcher';
-import PrivateNote from './models/PrivateNote';
-
-export default class PrivateNoteElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      note: undefined,
-      isSaving: false
-    };
-  }
-
-  componentDidMount() {
-    const { element } = this.props;
-    this.fetchNote(element);
-  }
-
-  fetchNote(element) {
-    if (element === undefined || element.is_new) {
-      return;
-    }
-
-    PrivateNoteFetcher.fetchByNoteableId(element.id, element.type).then((note) => {
-      if (note != null) {
-        this.setState({ note: note });
-      }
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  handleInputChange(value) {
-    let { note } = this.state;
-    if (note === undefined) {
-      note = PrivateNote.buildEmpty();
-    }
-    note.content = value;
-    this.setState({ note: note });
-  }
-
-  saveNote() {
-    const { note } = this.state;
-    const { element } = this.props;
-    if (!element || !note) {
-      return;
-    }
-    this.setState({isSaving: true})
-    if (!note.created_at) {
-      const params = { 
-        content: note.content, noteable_id: element.id, 
-        noteable_type: element.type 
-      };
-      PrivateNoteFetcher.create(params).then((newNote) => {
-        this.setState({ note: newNote, isSaving: false });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        this.setState({isSaving: false})
-      });
-    } else {
-      PrivateNoteFetcher.update(note).then((newNote) => {
-        this.setState({ note: newNote, isSaving: false });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        this.setState({isSaving: false})
-      });
-    }
-  }
-
-  render() {
-    const { note, isSaving } = this.state;
-    const content = note ? note.content : '';
-    let disabled = this.props.disabled || false;
-    const { element } = this.props;
-    if (element && element.is_new) {
-      disabled = true;
-    }
-
-    return (
-      <FormGroup>
-        <OverlayTrigger
-          placement="top"
-          overlay={
-            <Tooltip id='private-note'>Only you can see this note</Tooltip>
-          }
-        >
-          <ControlLabel>
-            Private Note <span className="glyphicon glyphicon-info-sign" />
-          </ControlLabel>
-        </OverlayTrigger>
-
-        <i>{isSaving ? " saving your note" : ""}</i>
-        
-        <FormControl
-          componentClass="textarea"
-          ref={(input) => { this.noteInput = input; }}
-          placeholder={content}
-          value={content}
-          onChange={e => this.handleInputChange(e.target.value)}
-          rows={2}
-          disabled={disabled}
-          onBlur={() => this.saveNote()}
-        />
-      </FormGroup>
-    )
-  }
-}
-
-PrivateNoteElement.propTypes = {
-  element: PropTypes.object,
-  handlePrivateNoteChanged: PropTypes.func,
-};
diff --git a/app/packs/src/components/PubchemLabels.js b/app/packs/src/components/PubchemLabels.js
deleted file mode 100644
index cba940964..000000000
--- a/app/packs/src/components/PubchemLabels.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const PubchemLabels = ({element}) =>{
-  let cid = element.pubchem_tag && element.pubchem_tag.pubchem_cid
-  let labelStyle = {
-    display: 'inline-block',
-    marginLeft: "5px",
-    marginRight: "5px"
-  };
-  if (!cid || isNaN(cid)) {labelStyle.WebkitFilter = "grayscale(100%)"}
-  const handleOnClick = (e) => {
-    if (cid && !isNaN(cid)){
-      window.open("https://pubchem.ncbi.nlm.nih.gov/compound/" + cid, '_blank')
-    }
-    e.stopPropagation()
-  }
-  return (
-    <span style={labelStyle} onClick={handleOnClick}>
-      <img src="/images/wild_card/pubchem.svg" className="pubchem-logo" />
-    </span>
-  )
-}
-
-PubchemLabels.propTypes = {
-  element: PropTypes.object,
-}
-
-export default PubchemLabels;
diff --git a/app/packs/src/components/PubchemLcss.js b/app/packs/src/components/PubchemLcss.js
deleted file mode 100644
index 585536ccb..000000000
--- a/app/packs/src/components/PubchemLcss.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Button, Row, Col } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { concat, uniqBy } from 'lodash';
-import PubchemSigns from 'src/components/pubchem/PubchemSigns';
-
-const PubchemLcss = ({
-  cid, informArray
-}) => {
-  const sourceRoot = 'https://pubchem.ncbi.nlm.nih.gov';
-  let imgWH = 70 * (4 / 9);
-  let imgs = [];
-
-  const picArry = informArray.filter(info => info.Name === 'Pictogram(s)');
-
-  if (picArry.length > 0) {
-    picArry.map((p) => {
-      const makeups = p.Value.StringWithMarkup;
-      makeups.map((ms) => {
-        const extract = ms.Markup.map(m => ({ src: m.URL.replace(sourceRoot, ''), title: m.Extra }));
-        imgs = concat(imgs, extract);
-      });
-    });
-  } else {
-    informArray.map((inform) => {
-      const htmlDoc = new DOMParser().parseFromString(inform.StringValue, 'text/html');
-      const extract = [].slice.call(htmlDoc.querySelectorAll('img')).map((g) => {
-        return { src: g.getAttribute('src'), title: g.title };
-      });
-      imgs = concat(imgs, extract);
-      return true;
-    });
-  }
-
-  imgs = uniqBy(imgs, 'src');
-  if (imgs.length < 5) {
-    imgWH = 70 * (3 / 4);
-  }
-  const signs = imgs.map((img, idx) => <PubchemSigns key={`pubchem_sign_${idx + 1}`} objPath={img.src} objTitle={img.title} objWidth={imgWH} objHeight={imgWH} />);
-
-  return (
-    <div>
-      <Row>
-        <Col md={12}>
-          {signs}
-        </Col>
-      </Row>
-      <Row>
-        <Col md={12}>
-          <Button style={{ border: 'none' }} bsSize="xsmall" onClick={() => { window.open(`${sourceRoot}/compound/${cid}#datasheet=lcss&section=Top`, '_blank'); }}>
-            <img src="/images/wild_card/pubchem.svg" style={{ height: '1.5vh' }} alt="" />&nbsp;
-            <i className="lcss-link">
-              Source: European Chemicals Agency (ECHA)<br />
-              Read more about Safety Summary from PubChem
-            </i>
-          </Button>
-        </Col>
-      </Row>
-    </div>
-  );
-};
-
-PubchemLcss.propTypes = {
-  cid: PropTypes.number.isRequired,
-  informArray: PropTypes.arrayOf(PropTypes.shape({
-    ReferenceNumber: PropTypes.number.isRequired,
-    Name: PropTypes.string.isRequired,
-    StringValue: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-export default PubchemLcss;
diff --git a/app/packs/src/components/PubchemSigns.js b/app/packs/src/components/PubchemSigns.js
deleted file mode 100644
index 7d35a5b41..000000000
--- a/app/packs/src/components/PubchemSigns.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const PubchemSigns = ({
-  objPath, objWidth, objHeight, objTitle
-}) => {
-  const objScale = 1;
-  return (
-    <svg
-      width={objWidth}
-      height={objHeight}
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
-      <title>{objTitle}</title>;
-      <g transform={`scale(${objScale})`}>
-        <image xlinkHref={objPath} width="100%" height="100%" />
-      </g>
-    </svg>
-  );
-};
-
-PubchemSigns.propTypes = {
-  objPath: PropTypes.string.isRequired,
-  objWidth: PropTypes.number,
-  objHeight: PropTypes.number,
-  objTitle: PropTypes.string
-};
-
-PubchemSigns.defaultProps = {
-  objWidth: 70,
-  objHeight: 70,
-  objTitle: ''
-};
-
-export default PubchemSigns;
diff --git a/app/packs/src/components/PublishCommon.js b/app/packs/src/components/PublishCommon.js
deleted file mode 100644
index f809db236..000000000
--- a/app/packs/src/components/PublishCommon.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import React from 'react';
-import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Aviator from 'aviator';
-import Sample from './models/Sample';
-import { sampleShowOrNew, reactionShow } from './routesUtils';
-import Reaction from './models/Reaction';
-import { isNmrPass, isDatasetPass } from './utils/ElementUtils';
-
-const labelStyle = {
-  display: 'inline-block',
-  marginLeft: '5px',
-  marginRight: '5px'
-};
-
-const handleClick = (e, id, clickType) => {
-  e.preventDefault();
-  e.stopPropagation();
-  const uri = Aviator.getCurrentURI();
-  const uriArray = uri.split(/\//);
-  switch (clickType) {
-    case 'Reaction':
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/reaction/${id}`, { silent: true });
-      reactionShow({ params: { reactionID: id } });
-      break;
-
-    default:
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${id}`, { silent: true });
-      sampleShowOrNew({ params: { sampleID: id } });
-      break;
-  }
-};
-const validateYield = (reaction) => {
-  const result = [];
-  const products = reaction.products || [];
-  products.forEach((product) => {
-    const val = ((product.equivalent || 0) * 100).toFixed(0);
-    if (val === '0') result.push({ name: 'product-yield', value: false, message: `[Product] ${product.molecule_iupac_name}: yield is 0` });
-  });
-  if (result.length !== 0 && result.length === products.length) return result;
-  return [];
-};
-
-const validateMolecule = (element) => {
-  const validates = [];
-  const sample = element;
-  const analyses = sample.analysisArray();
-  analyses.forEach((al) => {
-    const status = al.extended_metadata.status || '';
-    const kind = al.extended_metadata.kind || '';
-    if (status !== 'Confirmed') {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Status must be Confirmed.` });
-    }
-    if (kind === '' || (kind.split('|').length < 2)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Type is invalid.` });
-    }
-    if (!isNmrPass(al, sample)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Content is invalid, NMR check fails.` });
-    }
-    if (!isDatasetPass(al)) {
-      validates.push({ name: `analysis [${al.name}]`, value: false, message: `[${sample.name || sample.short_label}] Analysis [${al.name}]: Dataset is incomplete. Please check that: 1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files. 2. the instrument field is not empty.` });
-    }
-  });
-  return validates;
-};
-
-const PublishBtnReaction = ({ reaction, showModal }) => {
-  const tagData = (reaction.tag && reaction.tag.taggable_data) || {};
-  // NB set publishedId to true to hide it
-  const publishedId = tagData.public_reaction || (tagData.publication && tagData.publication.queued_at);
-  const notPublishable = reaction.notPublishable; // false or [samples]
-  const isDisabled = reaction.changed || reaction.isNew || !!notPublishable;
-  const btnTip = (reaction.changed || reaction.isNew) ? 'Publication panel cannot be open on unsaved reaction.' : 'Open the reaction publication panel';
-  const btnTipNotPub = notPublishable && `Product(s) ${notPublishable.map(s => s.short_label).join()} not publishable`;
-  return (
-    (!publishedId && !tagData.publication) ? (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="publishReaction">{btnTipNotPub || btnTip}</Tooltip>}
-      >
-        <Button
-          // style={{ display: 'none' }}
-          bsStyle="success"
-          bsSize="xsmall"
-          className="button-right"
-          // NB: props disabled will prevent displaying the OverlayTrigger. workaround by mocking disabled style
-          onClick={() => showModal(!isDisabled)}
-          style={isDisabled ? { cursor: 'not-allowed', opacity: '0.65' } : {} }
-        >
-          <i className="fa fa-paper-plane" />
-        </Button>
-      </OverlayTrigger>
-    ) : <span />
-  );
-};
-
-PublishBtnReaction.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
-
-const PublishBtn = ({ sample, showModal }) => {
-  const tagData = (sample.tag && sample.tag.taggable_data) || {};
-
-  const publishedId = tagData.public_sample;
-  const isPoly = sample._contains_residues;
-
-  return (sample.can_publish && !sample.isEdited && !publishedId && !tagData.publication) ? (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="publishSample">{isPoly ? 'Cannot publish polymer structure!' : 'Open the sample publication panel'}</Tooltip>}
-    >
-      <Button
-        bsStyle="success"
-        bsSize="xsmall"
-        className="button-right"
-        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-        onClick={() => showModal(!isPoly)}
-        // disabled={isPoly}
-        style={isPoly ? { cursor: 'not-allowed', opacity: '0.65' } : {}}
-      >
-        <i className="fa fa-paper-plane" />
-      </Button>
-    </OverlayTrigger>
-  ) : <span />;
-};
-
-PublishBtn.propTypes = {
-  showModal: PropTypes.func.isRequired,
-  sample: PropTypes.instanceOf(Sample).isRequired,
-};
-
-const ReviewPublishBtn = ({ element, showComment, validation }) => {
-  const tagData = (element.tag && element.tag.taggable_data) || {};
-  const publishedId = tagData.public_sample || tagData.public_reaction;
-  const isDecline = (tagData && tagData.decline === true) || false;
-  const canPublish =  element.can_publish || (element.type === 'reaction' && !element.notPublishable && element.is_published === false)
-
-  const isEdit = element.type === 'reaction' ? element.changed : element.isEdited;
-  const reviewBtn = (canPublish && !isEdit && !publishedId && tagData.publication) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewPublish">Submit for Publication</Tooltip>}
-                    >
-                      <Button
-                        bsStyle="danger"
-                        bsSize="xsmall"
-                        className="button-right"
-                        // NB: disabled will prevent the OverlayTrigger. workaround by mocking disabled style
-                        onClick={() => validation(element)}
-                      >
-                        <i className="fa fa-paper-plane" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />);
-  const commentBtn = ((canPublish && !publishedId && tagData.publication) || isDecline) ? (
-                    <OverlayTrigger
-                      placement="bottom"
-                      overlay={<Tooltip id="reviewerComment">Reviewer&apos;s comment</Tooltip>}
-                    >
-                      <Button
-                        bsSize="xsmall"
-                        bsStyle="success"
-                        target="_blank"
-                        className="button-right"
-                        onClick={showComment}
-                      >
-                        <i className="fa fa-comments" />
-                      </Button>
-                    </OverlayTrigger>
-                    ) : (<span />)
-  return (
-    <span>
-    {reviewBtn}
-    {commentBtn}
-    </span>
-  )
-};
-
-const OrigElnTag = ({ element }) => {
-  const tag = (element && element.tag) || {};
-  const tagData = (tag && tag.taggable_data) || {};
-  const elnInfo = (tagData && tagData.eln_info) || {};
-  if (Object.keys(elnInfo).length === 0) return <div />;
-
-  const tip = `go to original ELN: ${elnInfo.short_label}`;
-
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="data public">{tip}</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        style={labelStyle}
-        href={`${elnInfo.origin}mydb/collection/all/${element.type}/${elnInfo.id}`}
-        target="_blank"
-      >
-        <i className="fa fa-link" aria-hidden="true" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const PublishedTag = ({ element, fnUnseal }) => {
-  const tag = (element && element.tag) || {};
-  const tagData = (tag && tag.taggable_data) || {};
-  const tagType = getElementType(element) || '';
-  const isPending =
-    (tagData && tagData.publish_pending && tagData.publish_pending === true) ||
-    false;
-  const tip = isPending
-    ? `${tagType} is being reviewed`
-    : `${tagType} has been published`;
-  const publishedId = getPublicationId(element);
-  return publishedId ? (
-    <ButtonGroup bsSize="xsmall">
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="data public">{tip}</Tooltip>}
-      >
-        <Button
-          bsSize="xsmall"
-          bsStyle={isPending ? 'warning' : 'danger'}
-          onClick={(event) => handleClick(event, publishedId, tagType)}
-        >
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-      {fnUnseal ? <UnsealBtn element={element} fnUnseal={fnUnseal} /> : null}
-    </ButtonGroup>
-  ) : null;
-};
-
-PublishedTag.propTypes = {
-  element: PropTypes.object,
-  fnUnseal: PropTypes.func,
-};
-
-const LabelPublication = ({ element }) => {
-  const publication = element.tag && element.tag.taggable_data &&
-    element.tag.taggable_data.publication;
-
-  if (!publication) { return null; }
-
-  const time = new Date(publication.published_at || publication.doi_reg_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const contributor = publication.contributors && publication.contributors.name;
-  const publishedBy = publication.creators && publication.creators[0] &&
-    publication.creators[0].name;
-  let tooltipText = `Published by ${contributor == null ? publishedBy : contributor} on ${formattedTime}`;
-  const schemeOnly = (element && element.publication && element.publication.taggable_data &&
-    element.publication.taggable_data.scheme_only === true) || false;
-  let openUrl = (element.type === 'reaction' && schemeOnly === true) ? `/home/publications/reactions/${element.id}` : `https://dx.doi.org/${publication.doi}`;
-  let btnStyle = 'default';
-  if (!publication.published_at && element.publication) {
-    const pub = element.publication;
-    let pubCreatedAt = new Date(pub.created_at);
-    pubCreatedAt = `${pubCreatedAt.getDate()}-${pubCreatedAt.getMonth() + 1}-${pubCreatedAt.getFullYear()} `;
-    tooltipText = `Submitted by ${contributor == null ? publishedBy : contributor} on ${pubCreatedAt}`;
-    openUrl = `/pid/${element.publication.id}`;
-    btnStyle = 'success';
-  }
-  if (publication.published_at || element.publication) {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}
-        onClick={e => e.stopPropagation()}
-      >
-        <Button bsSize="xsmall" bsStyle={btnStyle} style={labelStyle} onClick={() => { window.open(openUrl, '_blank'); }}>
-          <i className="fa fa-newspaper-o" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-  return <span />;
-};
-
-LabelPublication.propTypes = {
-  element: PropTypes.object,
-};
-
-
-const ChemotionTag = ({ tagData, firstOnly = false }) => {
-  const chemotionTag = tagData.chemotion;
-  if (!chemotionTag) { return null; }
-  const { chemotion_first, last_published_at, doi } = chemotionTag;
-  if (firstOnly && !chemotion_first) { return null; }
-  const time = new Date(chemotion_first || last_published_at);
-  const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-  const tooltipText = chemotion_first ? `Published First Here on ${formattedTime}`
-    : `Last published on ${formattedTime}`;
-  const first = chemotion_first ? <span>1<sup>st</sup></span> : null;
-
-
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="printCode">{tooltipText}</Tooltip>}>
-      <a
-        style={labelStyle}
-        // bsSize="xsmall"
-        // bsStyle="default"
-        target="_blank"
-        href={`https://dx.doi.org/${doi}`}
-      >
-        <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
-        {first}
-        {/* <i className="fa fa-trophy fa-lg" aria-hidden="true" /> */}
-      </a>
-
-
-
-    </OverlayTrigger>
-  );
-};
-
-
-ChemotionTag.propTypes = {
-  tagData: PropTypes.object,
-};
-ChemotionTag.defaultProps = {
-  tagData: {},
-};
-
-export {
-  LabelPublication,
-  OrigElnTag,
-  PublishedTag,
-  ChemotionTag,
-  PublishBtn,
-  PublishBtnReaction,
-  ReviewPublishBtn,
-  validateMolecule,
-  validateYield,
-};
diff --git a/app/packs/src/components/PublishReactionContainers.js b/app/packs/src/components/PublishReactionContainers.js
deleted file mode 100644
index 3746a575c..000000000
--- a/app/packs/src/components/PublishReactionContainers.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  PanelGroup,
-  Panel,
-  Button,
-} from 'react-bootstrap';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton';
-import Reaction from './models/Reaction';
-
-export default class PublishReactionContainers extends Component {
-  constructor(props) {
-    super();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      activeContainer: 0
-    };
-
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({ activeContainer: key });
-  }
-
-  render() {
-    const {reaction, activeContainer} = this.state;
-    const {readOnly} = this.props;
-
-    let containerHeader = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          {container.name}
-          {titleKind}
-          {titleStatus}
-          <Button
-            bsSize="xsmall"
-            bsStyle="danger"
-            className="button-right"
-            disabled={readOnly}
-            onClick={() => this.handleOnClickRemove(container)}
-          >
-            <i className="fa fa-trash" />
-          </Button>
-          <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
-        </div>
-      )
-    };
-
-    let containerHeaderDeleted = (container) => {
-      const kind = container.extended_metadata['kind'] && container.extended_metadata['kind'] != '';
-      const titleKind = kind ? (' - Type: ' + container.extended_metadata['kind']) : '';
-
-      const status = container.extended_metadata['status'] && container.extended_metadata['status'] != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata['status']) : '';
-
-      return (
-        <div style={{width: '100%'}}>
-          <strike>
-            {container.name}
-            {titleKind}
-            {titleStatus}
-          </strike>
-          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
-                  onClick={() => this.handleUndo(container)}>
-            <i className="fa fa-undo"></i>
-          </Button>
-        </div>
-      )
-    };
-
-    if (reaction.container != null && reaction.container.children) {
-      const analyses_container = reaction.container.children.filter(element => (
-        ~element.container_type.indexOf('analyses')
-      ));
-
-      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
-        return (
-          <div>
-            <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
-              {analyses_container[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Panel
-                      eventKey={key}
-                      key={`reaction_container_deleted_${container.id}`}
-                    >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                    </Panel>
-                  );
-                }
-
-                return (
-                  <Panel
-                    eventKey={key}
-                    key={`reaction_container_${container.id}`}
-                    onClick={this.handleAccordionOpen.bind(this, key)}
-                  >
-                    <Panel.Heading>{containerHeader(container)}</Panel.Heading>
-                    <Panel.Body collapsible>
-                      <ContainerComponent
-                        readOnly={readOnly}
-                        container={container}
-                        onChange={this.handleChange.bind(this, container)}
-                      />
-                    </Panel.Body>
-                  </Panel>
-                );
-              })}
-            </PanelGroup>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          style={{ marginBottom: '10px' }}
-          className="noAnalyses-warning"
-        >
-          There are currently no Analyses.
-        </div>
-      );
-    }
-
-    return (
-      <div className="noAnalyses-warning">
-        There are currently no Analyses.
-      </div>
-    );
-  }
-}
-
-PublishReactionContainers.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-};
diff --git a/app/packs/src/components/PublishReactionModal.js b/app/packs/src/components/PublishReactionModal.js
deleted file mode 100644
index b65e01315..000000000
--- a/app/packs/src/components/PublishReactionModal.js
+++ /dev/null
@@ -1,940 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel,
-  PanelGroup,
-  Button,
-  Modal,
-  Table,
-  OverlayTrigger, FormGroup,
-  Checkbox, Tooltip, ListGroup, ListGroupItem, Row, Col,
-  Form,
-  Grid,
-  ControlLabel
-} from 'react-bootstrap';
-import { head, filter, findIndex, flatten, sortedUniq } from 'lodash';
-import Select from 'react-select';
-import Immutable from 'immutable';
-import { validateYield } from './PublishCommon';
-import Reaction from './models/Reaction';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import ReactionsFetcher from './fetchers/ReactionsFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { ReactionInfo, ReactionSchemeOnlyInfo, AnalysisHeaderSample, PublishAnalysesTag, EmbargoCom, isNmrPass, isDatasetPass, PublishTypeAs, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import LiteraturesFetcher from '../components/fetchers/LiteraturesFetcher';
-import CollaboratorFetcher from '../components/fetchers/CollaboratorFetcher';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-import { contentToText } from './utils/quillFormat';
-import { CitationTypeMap, CitationTypeEOL } from './CitationType';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray().filter(a => a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')).map(x => x.id)
-);
-
-const skimAnalysis = (sample) => {
-  const analyses = sample.analysisArray();
-  const publishedAnalyses = analyses.filter(a =>
-    (a.extended_metadata &&
-      (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-  return publishedAnalyses.filter(a =>
-    (a.extended_metadata &&
-      (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-};
-
-const publishOptions = { f: 'full', s: 'scheme-only' };
-
-export default class PublishReactionModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      selectedUsers: [],
-      selectedReviewers: [],
-      showSelectionReviewer: false,
-      collaborations: [],
-      showPreview: false,
-      showScheme: false,
-      currentUser,
-      showRinchi: false,
-      showProp: false,
-      showTlc: false,
-      selectedRefs: [],
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: [],
-      noSolvent: false,
-      noAmountYield: false,
-      noEmbargo: false,
-      schemeDesc: true,
-      publishType: { options: Object.values(publishOptions), selected: publishOptions.f }
-    };
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handlePublishReaction = this.handlePublishReaction.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.handleAnalysesChecked = this.handleAnalysesChecked.bind(this);
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleNoSolventCheck = this.handleNoSolventCheck.bind(this);
-    this.handleNoAmountYieldCheck = this.handleNoAmountYieldCheck.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-    this.handlePublishTypeChange = this.handlePublishTypeChange.bind(this);
-    this.handleYieldChange = this.handleYieldChange.bind(this);
-    this.handlePropertiesChange = this.handlePropertiesChange.bind(this);
-    this.handleUnitChange = this.handleUnitChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  handleInputChange(type, event) {
-    const { reaction } = this.state;
-    switch (type) {
-      case 'temperature':
-        reaction.temperature.userText = event.target.value;
-        break;
-      case 'temperatureUnit':
-        reaction.temperature = reaction.convertTemperature(event);
-        break;
-      case 'duration':
-        reaction.durationDisplay = { nextValue: event.target.value };
-        break;
-      case 'durationUnit':
-        reaction.durationDisplay = { nextUnit: true };
-        break;
-      default:
-        break;
-    }
-    this.setState({ reaction });
-  }
-
-  handleYieldChange(p, event) {
-    const { value } = event.target;
-    if (!isNaN(value)) {
-      const { reaction } = this.state;
-      const { products } = reaction;
-      const product = products.find(e => e.id === p.id);
-      if (typeof product !== 'undefined') {
-        product.equivalent = (value / 100);
-        products.splice(products.findIndex(e => e.id === p.id), 1, product);
-        reaction.products = products;
-        this.setState({ reaction });
-      }
-    }
-  }
-
-  handlePropertiesChange(type, event) {
-    if (type === 'temperature') {
-      this.handleInputChange(type, event);
-    }
-    if (type === 'duration') {
-      const { value } = event.target;
-      if (!isNaN(value)) {
-        this.handleInputChange(type, event);
-      }
-    }
-    if (type === 'schemeDesc') {
-      this.setState({ schemeDesc: !this.state.schemeDesc });
-    }
-  }
-
-  handleUnitChange(type, event) {
-    let index;
-    let unit;
-    switch (type) {
-      case 'temperatureUnit':
-        index = Reaction.temperature_unit.indexOf(event);
-        unit = Reaction.temperature_unit[(index + 1) % 3];
-        this.handleInputChange('temperatureUnit', unit);
-        break;
-      case 'durationUnit':
-        this.handleInputChange('durationUnit', event);
-        break;
-      default:
-        break;
-    }
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  handleNoSolventCheck() {
-    this.setState({ noSolvent: !this.state.noSolvent });
-  }
-
-  handleNoEmbargoCheck() {
-    this.setState({ noEmbargo: !this.state.noEmbargo });
-  }
-
-  handleNoAmountYieldCheck() {
-    this.setState({ noAmountYield: !this.state.noAmountYield });
-  }
-
-  loadBundles() {
-    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
-      const cols = result.repository || [];
-      this.setState({ bundles: cols });
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.reaction, true).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  loadMyCollaborations() {
-    CollaboratorFetcher.fetchMyCollaborations()
-      .then((result) => { this.setState({ collaborations: result.authors }); });
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
-    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
-      <div>  -{currentUser.current_affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br /> {aff} </div>);
-  }
-
-  handleSelectReviewer(val) {
-    if (val) { this.setState({ selectedReviewers: val }); }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleAnalysesChecked(analysis, elementType) {
-    const { reaction } = this.state;
-
-    reaction.changed = true;
-    if (elementType === 'Reaction') {
-      const elements = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-      // Find the index of the element and then replace
-      const index = findIndex(elements, { id: analysis.id });
-      if (index !== -1) {
-        elements.splice(index, 1, analysis);
-        this.setState(prevState => ({ ...prevState, reaction }));
-      }
-    }
-    if (elementType === 'Product') {
-      const analysesReactionProducts = reaction.products;
-      analysesReactionProducts.forEach((product) => {
-        const elements = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        // Find the index of the element and then replace
-        const index = findIndex(elements, { id: analysis.id });
-        if (index !== -1) {
-          elements.splice(index, 1, analysis);
-          this.setState(prevState => ({ ...prevState, reaction }));
-        }
-      });
-    }
-    this.props.onHandleAnalysesCheck(this.state.reaction);
-  }
-
-  validateAnalyses() {
-    let pas = this.state.reaction.products.reduce(
-      (acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(this.state.reaction)
-    );
-    if (pas.length === 0) {
-      return false;
-    }
-
-    pas = AnalysisIdstoPublish(this.state.reaction);
-    if (pas.length > 0) {
-      return true;
-    }
-
-    const { reaction } = this.state;
-    const { products } = reaction;
-    for (let i = 0; i < products.length; i += 1) {
-      const pa = skimAnalysis(products[i]);
-      if (pa.length > 0) { return true; }
-    }
-
-    return false;
-  }
-
-  handlePublishReaction() {
-    const {
-      selectedLicense, cc0Consent, publishType, selectedUsers
-    } = this.state;
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
-      return true;
-    }
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked && isFullyPublish) {
-      alert("Please add an author or check 'add me as author'.");
-      return true;
-    }
-
-    const { reaction } = this.state;
-    if (isFullyPublish) {
-      const { samples } = reaction;
-      for (let i = 0; i < samples.length; i += 1) {
-        reaction.samples[i].container.children.find(c => (c && c.container_type === 'analyses')).children = skimAnalysis(samples[i]);
-      }
-    }
-
-    LoadingActions.start();
-    RepositoryActions.publishReaction({
-      isFullyPublish,
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      reviewers: this.state.selectedReviewers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      schemeDesc: this.state.schemeDesc,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide(false);
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reReaction) => {
-        this.props.onPublishRefreshClose(reReaction, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishReactionReserveDois({
-      reaction: this.state.reaction,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    ReactionsFetcher.fetchById(this.state.reaction.id)
-      .then((reaction) => {
-        this.props.onPublishRefreshClose(reaction, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-    const authorCount = selectedUsers && selectedUsers.length;
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>);
-    });
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : '' }
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  addReviewers() {
-    const { selectedReviewers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
-    });
-
-
-    return (
-      <div >
-        <h5><b>Additional Reviewers:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select reviewers from my collaboration"
-          backspaceRemoves
-          value={selectedReviewers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectReviewer}
-        />
-        <div>
-          {reviewerInfo}
-        </div>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="60%" />
-            <th width="40%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            let { litype } = citation;
-            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
-              litype = 'uncategorized';
-            }
-            const chkDisabled = litype === 'uncategorized';
-            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
-            return (
-              <tr key={id}>
-                <td className="padding-right" style={{ display: 'inline-flex;' }}>
-                  <i className={`icon-${citation.element_type.toLowerCase()}`} style={{ fontSize: '1.5em' }} />&nbsp;&nbsp;
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
-                  >
-                    <span>
-                      <Checkbox
-                        disabled={chkDisabled}
-                        checked={selectedRefs.includes(id)}
-                        onChange={() => { this.handleRefCheck(id); }}
-                      >
-                        <span>Add to publication</span><br />
-                        <span>({CitationTypeMap[litype].def})</span>
-                      </Checkbox>
-                    </span>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  handlePublishTypeChange(e) {
-    const { publishType } = this.state;
-    publishType.selected = e;
-    this.setState({ publishType });
-  }
-
-  validatePub(isFullyPublish = true) {
-    const { reaction, noEmbargo, selectedEmbargo } = this.state;
-    let validates = [];
-    if (isFullyPublish) {
-      validates.push({ name: 'embargo', value: selectedEmbargo !== '-1' || (selectedEmbargo === '-1' && noEmbargo), message: 'No embargo bundle' });
-      validates.push({ name: 'reaction type', value: !!(reaction.rxno && reaction.rxno.length > 0), message: reaction.rxno ? '' : 'Reaction type is missing' });
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-      const desc = contentToText(reaction.description).trim() || '';
-      validates.push({ name: 'description', value: !!desc, message: desc ? '' : 'Description is missing' });
-      const hasSt = reaction.starting_materials && reaction.starting_materials.length > 0;
-      validates.push({ name: 'start_material', value: !!hasSt, message: hasSt ? '' : 'Start material is missing' });
-      const hasSv =
-        this.state.noSolvent === true || (reaction.solvents && reaction.solvents.length > 0);
-      validates.push({ name: 'solvent', value: !!hasSv, message: hasSv ? '' : 'Solvent is missing' });
-      const hasProduct = reaction.products && reaction.products.length > 0;
-      validates.push({ name: 'product', value: !!hasProduct, message: hasProduct ? '' : 'Product is missing' });
-
-      (reaction.starting_materials || []).forEach((st) => {
-        if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `[Starting material] ${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      if (!this.state.noAmountYield) {
-        (reaction.products || []).forEach((prod) => {
-          if (!prod.amount || !prod.amount.value) {
-            validates.push({ name: 'product-amount', value: false, message: `[Product] ${prod.molecule_iupac_name}: amount is 0` });
-          }
-        });
-      }
-    } else {
-      const hasDuration =
-        !!(reaction.duration && reaction.duration !== '' && Number(reaction.duration.split(' ')[0]) > 0);
-      validates.push({ name: 'duration', value: hasDuration, message: hasDuration ? '' : 'Duration is missing' });
-      const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-      validates.push({ name: 'temperature', value: hasTemperature, message: hasTemperature ? '' : 'Temperature is missing' });
-    }
-    validates = this.state.noAmountYield ? validates : validates.concat(validateYield(reaction));
-    return validates;
-  }
-
-  render() {
-    const { show } = this.props;
-    const {
-      reaction, selectedUsers, selectedReviewers, selectedRefs, publishType, bundles
-    } = this.state;
-
-    const isFullyPublish = publishType.selected === publishOptions.f;
-    const canPublish = isFullyPublish ? this.validateAnalyses() : true;
-    const validateInfo = this.validatePub(isFullyPublish);
-    const validateObjs = validateInfo && validateInfo.filter(v => v.value === false);
-    const validateMsgs = validateObjs && validateObjs.map(a => a.message);
-    const validateMsg = validateMsgs ? validateMsgs.join('\n') : '';
-    const validated = !!(validateObjs && validateObjs.length === 0);
-
-    let selectedAnalysesCount = (this.state.reaction.analyses || [])
-      .filter(a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))
-      && a.extended_metadata.kind)).length;
-
-    const productDOI = product => (
-      <tr key={`doi-product-row-${product.id}`}>
-        <td>
-          Product {product.name}
-        </td>
-        <td>
-          {product.tag.taggable_data.reserved_doi ? `DOI: ${product.tag.taggable_data.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    const productAnalysesDOI = analysis => (
-      <tr key={`doi-product-analysis-row-${analysis.id}`}>
-        <td>
-          {analysis.name} - {(analysis.extended_metadata.kind || '').split('|').pop().trim()}
-        </td>
-        <td>
-          {analysis.extended_metadata.reserved_doi ? `DOI: ${analysis.extended_metadata.reserved_doi}` : ''}
-        </td>
-      </tr>
-    );
-
-    if (show) {
-      const analysesView = [];
-      const analysesReaction = head(filter(reaction.container.children, o => o.container_type === 'analyses')).children;
-
-      selectedAnalysesCount = (analysesReaction || []).filter(a =>
-        (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind)).length;
-
-      const analysesViewReaction = analysesReaction.map(analysis => (
-        <PublishAnalysesTag
-          reaction={reaction}
-          analysis={analysis}
-          key={`reaction_${analysis.id}`}
-          analysesType="Reaction"
-          handleAnalysesChecked={this.handleAnalysesChecked}
-        />
-      ));
-      analysesView.push(analysesViewReaction);
-
-      const analysesReactionProductsDOIs = [];
-      const analysesReactionProducts = reaction.products;
-
-      analysesReactionProducts.forEach((product) => {
-        const arrP = [];
-        arrP.push(product);
-        const tmpProduct = arrP.map(p => <AnalysisHeaderSample sample={p} key={`reaction_analysis_${p.id}`} sampleType="Product" />);
-        analysesView.push(tmpProduct);
-
-        const tmp = head(filter(product.container.children, o => o.container_type === 'analyses')).children;
-        const tmpTag = tmp.map(analysis => (
-          <PublishAnalysesTag
-            reaction={reaction}
-            analysis={analysis}
-            key={`reaction_product_${analysis.id}`}
-            analysesType="Product"
-            handleAnalysesChecked={this.handleAnalysesChecked}
-            product={product}
-          />
-        ));
-        analysesView.push(tmpTag);
-        analysesReactionProductsDOIs.push(productDOI(product));
-        analysesReactionProductsDOIs.push(tmp.map(a => productAnalysesDOI(a)));
-        selectedAnalysesCount += (tmp || []).filter(a =>
-          (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind
-            && ((a.extended_metadata.status || '') === 'Confirmed')
-            && (isNmrPass(a, product))
-            && (isDatasetPass(a))
-          )).length;
-      });
-
-      const {
-        selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
-      } = this.state;
-
-      const publishTypeAs = {
-        ...publishType,
-        onChange: this.handlePublishTypeChange
-      };
-
-
-      const opts = [];
-      bundles.forEach((col) => {
-        const tag = col.taggable_data || {};
-        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
-      });
-
-      const awareEmbargo = selectedEmbargo === '-1' ? (
-        <Checkbox
-          onChange={() => { this.handleNoEmbargoCheck(); }}
-          checked={noEmbargo}
-          className={`display-${isFullyPublish}`}
-        >
-          <span>
-            I know that the data that is submitted without the selection of an embargo
-            bundle will be published immediately after a successful review.
-          </span>
-        </Checkbox>
-      ) : <div />;
-
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => this.props.onHide(false)}>
-            <Modal.Header closeButton style={{ paddingBottom: '2px', paddingTop: '10px' }}>
-              <Grid style={{ width: '100%' }}>
-                <Col sm={6} lg={6}>
-                  <Form inline>
-                    <FormGroup controlId="frmCtrlPublishType">
-                      <ControlLabel>
-                        Publish Reaction as
-                      </ControlLabel>{' '}
-                      <PublishTypeAs {...publishTypeAs} />
-                    </FormGroup>
-                  </Form>
-                </Col>
-                <Col sm={6} lg={6}>
-                  {' '}
-                </Col>
-              </Grid>
-            </Modal.Header>
-            <Modal.Body style={{
-              paddingBottom: 'unset', height: 'calc(100vh - 210px)', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto'
-            }}
-            >
-              <EmbargoCom
-                opts={opts}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <FormGroup>
-                <Col md={12} sm={12}>
-                  <div style={{
-                    whiteSpace: 'pre', padding: '10px', color: 'red', borderRadius: '3px'
-                }}>{validateMsg}
-                  </div>
-                </Col>
-              </FormGroup>
-              <div className={`display-${isFullyPublish}`}>
-                <ReactionInfo
-                  reaction={reaction}
-                  toggleScheme={this.toggleScheme}
-                  showScheme={this.state.showScheme}
-                  isPublic={false}
-                  toggleRinchi={this.toggleRinchi}
-                  showRinchi={this.state.showRinchi}
-                  toggleProp={this.toggleProp}
-                  showProp={this.state.showProp}
-                  toggleTlc={this.toggleTlc}
-                  showTlc={this.state.showTlc}
-                />
-              </div>
-              <div className={`display-${!isFullyPublish}`}>
-                <ReactionSchemeOnlyInfo
-                  reaction={reaction}
-                  isPublic={false}
-                  schemeDesc={this.state.schemeDesc}
-                  onYieldChange={this.handleYieldChange}
-                  onPropertiesChange={this.handlePropertiesChange}
-                  onUnitChange={this.handleUnitChange}
-                />
-              </div>
-              <Checkbox
-                onChange={() => { this.handleNoSolventCheck(); }}
-                checked={this.state.noSolvent}
-                className={`display-${isFullyPublish}`}
-              >
-                <span>This reaction has no solvents</span>
-              </Checkbox>
-              <Checkbox
-                onChange={() => { this.handleNoAmountYieldCheck(); }}
-                checked={this.state.noAmountYield}
-                className={`display-${isFullyPublish}`}
-              >
-                <span>Skip amount and yield validation (the product has no amount and yield)</span>
-              </Checkbox>
-              {awareEmbargo}
-              <PanelGroup accordion id={`panelgroup_${reaction.id}`} defaultActiveKey={0}>
-                <Panel
-                  eventKey="2"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4>Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <div>
-                      <Row>
-                        <Col md={12}>
-                          <h5>
-                            <b>Datasets: </b>
-                            <br />
-                          </h5>
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col md={12}>
-                          <PanelGroup
-                            accordion
-                            id={`panelgroup_ds_${reaction.id}`}
-                            defaultActiveKey={0}
-                          >
-                            {flatten(analysesView)}
-                          </PanelGroup>
-                        </Col>
-                      </Row>
-                    </div>
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="3"
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle><h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel
-                  eventKey="5"
-                  className={`display-${isFullyPublish}`}
-                >
-                  <Panel.Heading style={{ paddingBottom: '1px', paddingTop: '1px' }}>
-                    <Panel.Title toggle>
-                      <h4> Select References ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="6">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.addReviewers()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-            </Modal.Body>
-            <Modal.Footer style={{ padding: '6px' }}>
-              <Button onClick={() => this.props.onHide(false)}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish || !validated} onClick={this.handlePublishReaction}>
-                Publish Reaction
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishReactionModal.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-  onHandleAnalysesCheck: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/PublishSampleModal.js b/app/packs/src/components/PublishSampleModal.js
deleted file mode 100644
index e26cfadd6..000000000
--- a/app/packs/src/components/PublishSampleModal.js
+++ /dev/null
@@ -1,600 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Panel, PanelGroup, Modal, Table,
-  ListGroupItem, ListGroup, Button, Checkbox,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-import Select from 'react-select';
-import Immutable from 'immutable';
-import { sortedUniq } from 'lodash';
-
-import Sample from './models/Sample';
-import SampleDetailsContainers from './SampleDetailsContainers';
-import UserStore from './stores/UserStore';
-import UsersFetcher from './fetchers/UsersFetcher';
-import RepositoryActions from './actions/RepositoryActions';
-import { groupByCitation, Citation } from '../components/LiteratureCommon';
-import { MoleculeInfo, EmbargoCom, isNmrPass, isDatasetPass, OrcidIcon } from '../libHome/RepoCommon';
-import LoadingActions from './actions/LoadingActions';
-import SamplesFetcher from './fetchers/SamplesFetcher';
-import CollaboratorFetcher from './fetchers/CollaboratorFetcher';
-import LiteraturesFetcher from './fetchers/LiteraturesFetcher';
-import EmbargoFetcher from './fetchers/EmbargoFetcher';
-import { CitationTypeMap, CitationTypeEOL } from './CitationType';
-
-export default class PublishSampleModal extends Component {
-  constructor(props) {
-    super(props);
-    const { currentUser } = UserStore.getState();
-    const { sample } = props;
-    this.state = {
-      sample,
-      selectedUsers: [],
-      selectedReviewers: [],
-      showSelectionUser: false,
-      showSelectionAnalysis: false,
-      showPreview: false,
-      currentUser,
-      selectedRefs: [],
-      collaborations: [],
-      showSelectionReviewer: false,
-      literatures: new Immutable.Map(),
-      sortedIds: [],
-      selectedEmbargo: '-1',
-      selectedLicense: 'CC BY-SA',
-      cc0Consent: { consent1: false, consent2: false },
-      bundles: [],
-      noEmbargo: false
-    };
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handleSampleChanged = this.handleSampleChanged.bind(this);
-    this.handlePublishSample = this.handlePublishSample.bind(this);
-    this.handleReserveDois = this.handleReserveDois.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.handleSelectReviewer = this.handleSelectReviewer.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-    this.loadUserByName = this.loadUserByName.bind(this);
-    this.loadReferences = this.loadReferences.bind(this);
-    this.loadBundles = this.loadBundles.bind(this);
-    this.selectReferences = this.selectReferences.bind(this);
-    this.handleRefCheck = this.handleRefCheck.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-    this.handleLicenseChange = this.handleLicenseChange.bind(this);
-    this.handleCC0ConsentChange = this.handleCC0ConsentChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    this.loadBundles();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadReferences();
-    this.loadMyCollaborations();
-    this.setState({
-      sample: nextProps.sample,
-    });
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState(previousState => ({ ...previousState, users: state.users }));
-  }
-
-  handleRefCheck(id) {
-    let { selectedRefs } = this.state;
-
-    if (selectedRefs.includes(id)) {
-      selectedRefs = selectedRefs.filter(item => item !== id);
-    } else {
-      selectedRefs.push(id);
-    }
-    this.setState({ selectedRefs });
-  }
-
-  loadBundles() {
-    EmbargoFetcher.fetchEmbargoCollections(true).then((result) => {
-      const cols = result.repository || [];
-      this.setState({ bundles: cols });
-    });
-  }
-
-  loadMyCollaborations() {
-    CollaboratorFetcher.fetchMyCollaborations()
-    .then((result) => {
-      this.setState({
-        collaborations: result.authors
-      });
-    });
-  }
-
-  loadReferences() {
-    let { selectedRefs } = this.state;
-    LiteraturesFetcher.fetchElementReferences(this.state.sample).then((literatures) => {
-      const sortedIds = groupByCitation(literatures);
-      selectedRefs = selectedRefs.filter(item => sortedIds.includes(item));
-      this.setState({ selectedRefs, literatures, sortedIds });
-    });
-  }
-
-  handleSelectUser(val) {
-    if (val) { this.setState({ selectedUsers: val }); }
-  }
-
-  handleSelectReviewer(val) {
-    if (val) { this.setState({ selectedReviewers: val }); }
-  }
-
-  loadUserByName(input) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input)
-      .then((res) => {
-        const usersEntries = res.users.filter(u => u.id !== this.state.currentUser.id)
-          .map(u => ({
-            value: u.id,
-            name: u.name,
-            label: `${u.name} (${u.abb})`
-          }));
-        return { options: usersEntries };
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handleSampleChanged(sample) {
-    this.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  validateAnalyses() {
-    const publishedAnalyses = this.state.sample.analysisArray().filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  // molecule-submissions mandatory check (https://git.scc.kit.edu/ComPlat/chemotion_REPO/issues/236)
-  validateSubmission() {
-    const { sample, selectedEmbargo, noEmbargo } = this.state;
-    if (selectedEmbargo === '-1' && !noEmbargo) return false;
-    const analyses = sample.analysisArray();
-    if (!this.validateAnalyses()) {
-      return false;
-    }
-
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-        ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-        (isNmrPass(a, sample)) && // fail if NMR check fail
-        (isDatasetPass(a))))); // fail if Dataset check fail
-    if (publishedAnalyses.length === 0) {
-      return false;
-    }
-    return true;
-  }
-
-  handlePublishSample() {
-    const { selectedLicense, cc0Consent } = this.state;
-    const authorCount = this.state.selectedUsers && this.state.selectedUsers.length;
-    // const reviewerCount = this.state.selectedReviewers && this.state.selectedReviewers.length;
-    const plural = authorCount > 0 ? 's' : '';
-
-    if (selectedLicense === 'CC0' && (!cc0Consent.consent1 || !cc0Consent.consent2)) {
-      alert('Please check the license section before sending your data.');
-      return true;
-    }
-
-    if (!this.validateSubmission()) {
-      alert('Submission Check fail. Please review your data and re-submit.');
-      return true;
-    }
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${plural}`);
-      return true;
-    }
-
-    if (authorCount < 1 && !this.refMeAsAuthor.checked) {
-      alert("Please add an author or check 'add me as author.'");
-      return true;
-    }
-
-    const analyses = this.state.sample.analysisArray();
-    let publishedAnalyses = analyses.filter(a =>
-      (a.extended_metadata &&
-        (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true'))));
-
-    publishedAnalyses = publishedAnalyses.filter(a =>
-      (a.extended_metadata &&
-        (((a.extended_metadata.kind || '') !== '') && // fail if analysis-type is empty
-          ((a.extended_metadata.status || '') === 'Confirmed') && // fail if status is not set to Confirmed
-          (isNmrPass(a, this.state.sample)) && // fail if NMR check fail
-          (isDatasetPass(a))))); // fail if Dataset check fail
-
-    const { sample } = this.state;
-    sample.container.children.find(c => (c && c.container_type === 'analyses')).children = publishedAnalyses;
-
-    LoadingActions.start();
-    RepositoryActions.publishSample({
-      // sample: this.state.sample,
-      sample,
-      coauthors: this.state.selectedUsers.map(u => u.value),
-      reviewers: this.state.selectedReviewers.map(u => u.value),
-      refs: this.state.selectedRefs,
-      embargo: this.state.selectedEmbargo,
-      license: this.state.selectedLicense,
-      addMe: this.refMeAsAuthor.checked
-    });
-    this.props.onHide();
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((reSample) => {
-        this.props.onPublishRefreshClose(reSample, false);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  handleReserveDois() {
-    LoadingActions.start();
-    RepositoryActions.publishSampleReserveDois({
-      sample: this.state.sample,
-      coauthors: this.state.selectedUsers.map(u => u.value)
-    });
-    SamplesFetcher.fetchById(this.state.sample.id)
-      .then((sample) => {
-        this.props.onPublishRefreshClose(sample, true);
-        LoadingActions.stop();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-        LoadingActions.stop();
-      });
-    return true;
-  }
-
-  contributor() {
-    const { currentUser } = this.state;
-    const orcid = currentUser.orcid == null ? '' : <OrcidIcon orcid={currentUser.orcid} />;
-    const aff = currentUser && currentUser.current_affiliations && Object.keys(currentUser.current_affiliations).map(k => (
-      <div>  -{currentUser.current_affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{currentUser.name} <br/> {aff} </div>)
-  }
-
-  selectUsers() {
-    const { selectedUsers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    const authorInfo = selectedUsers && selectedUsers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
-    });
-
-    const authorCount = selectedUsers && selectedUsers.length;
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refMeAsAuthor = ref; }}>add me as author</Checkbox>
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
-        </Checkbox>
-        <h5><b>Authors:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select authors from my collaboration"
-          backspaceRemoves
-          value={selectedUsers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectUser}
-        />
-        <div>
-          {authorInfo}
-        </div>
-      </div>
-    );
-  }
-
-  addReviewers() {
-    const { selectedReviewers, collaborations } = this.state;
-    const options = collaborations.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    const reviewerInfo = selectedReviewers && selectedReviewers.map((a) => {
-      const us = collaborations.filter(c => c.id === a.value);
-      const u = us && us.length > 0 ? us[0] : {};
-      const orcid = u.orcid == null ? '' : <OrcidIcon orcid={u.orcid} />;
-      const aff = u && u.current_affiliations && u.current_affiliations.map(af => (
-        <div>  -{af.department}, {af.organization}, {af.country}</div>
-      ));
-      return (<div>{orcid}{a.label}<br/>{aff}<br/></div>)
-    });
-
-
-    return (
-      <div >
-        <h5><b>Additional Reviewers:</b></h5>
-        <Select
-          multi
-          searchable
-          placeholder="Select reviewers from my collaboration"
-          backspaceRemoves
-          value={selectedReviewers}
-          valueKey="value"
-          labelKey="label"
-          matchProp="name"
-          options={options}
-          onChange={this.handleSelectReviewer}
-        />
-        <div>
-          {reviewerInfo}
-        </div>
-      </div>
-    );
-  }
-
-  citationTable(rows, sortedIds, selectedRefs) {
-    const sids = sortedUniq(sortedIds);
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th width="60%" />
-            <th width="40%" />
-          </tr>
-        </thead>
-        <tbody>
-          {sids.map((id) => {
-            const citation = rows.get(id);
-            let { litype } = citation;
-            if (typeof litype === 'undefined' || CitationTypeEOL.includes(litype)) {
-              litype = 'uncategorized';
-            }
-            const chkDisabled = litype === 'uncategorized';
-            const chkDesc = chkDisabled ? 'citation type is uncategorized, cannot publish this reference' : 'publish this reference';
-            return (
-              <tr key={id}>
-                <td className="padding-right">
-                  <Citation literature={citation} />
-                </td>
-                <td>
-                  <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="checkAnalysis">{chkDesc}</Tooltip>}
-                  >
-                    <span>
-                      <Checkbox
-                        disabled={chkDisabled}
-                        checked={selectedRefs.includes(id)}
-                        onChange={() => { this.handleRefCheck(id); }}
-                      >
-                        <span>Add to publication</span><br />
-                        <span>({CitationTypeMap[litype].def})</span>
-                      </Checkbox>
-                    </span>
-                  </OverlayTrigger>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </Table>
-    );
-  }
-
-  selectReferences() {
-    const { selectedRefs, literatures, sortedIds } = this.state;
-    return (
-      <div >
-        <ListGroup fill="true">
-          <ListGroupItem>
-            {this.citationTable(literatures, sortedIds, selectedRefs)}
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  toggleDiv(key) {
-    if (key) {
-      this.setState((previousState) => {
-        const newState = previousState;
-        newState[key] = !previousState[key];
-        return { ...newState };
-      }, this.forceUpdate());
-    }
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ selectedEmbargo: selectedValue });
-    }
-  }
-
-  handleLicenseChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({
-        selectedLicense: selectedValue,
-        cc0Consent: { consent1: false, consent2: false }
-      });
-    }
-  }
-
-  handleCC0ConsentChange(selectedValue, selectedType) {
-    const { cc0Consent } = this.state;
-    if (selectedType === 'consent1') {
-      cc0Consent.consent1 = selectedValue;
-    }
-    if (selectedType === 'consent2') {
-      cc0Consent.consent2 = selectedValue;
-    }
-    this.setState({ cc0Consent });
-  }
-
-  handleNoEmbargoCheck() {
-    this.setState({ noEmbargo: !this.state.noEmbargo });
-  }
-
-  render() {
-    const { show, onHide, sample } = this.props;
-    const { bundles } = this.state;
-    const canPublish = this.validateSubmission(); // this.validateAnalyses();
-    const {
-      showPreview,
-      selectedUsers,
-      selectedReviewers,
-      selectedRefs
-    } = this.state;
-    const analyses = sample.analysisArray();
-    const selectedAnalysesCount = analyses.filter(
-      a => (a.extended_metadata && (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')) && a.extended_metadata.kind && a.extended_metadata.status === 'Confirmed' && isNmrPass(a, sample) && isDatasetPass(a))).length;
-
-    const { molecule } = sample;
-
-    const {
-      selectedEmbargo, selectedLicense, cc0Consent, noEmbargo
-    } = this.state;
-
-    const awareEmbargo = selectedEmbargo === '-1' ? (
-      <Checkbox
-        onChange={() => { this.handleNoEmbargoCheck(); }}
-        checked={noEmbargo}
-      >
-        <span>
-          I know that the data that is submitted without the selection of an embargo
-          bundle will be published immediately after a successful review.
-        </span>
-      </Checkbox>
-    ) : <div />;
-
-    if (show) {
-      const opts = [];
-      bundles.forEach((col) => {
-        const tag = col.taggable_data || {};
-        opts.push({ value: col.element_id, name: tag.label, label: tag.label });
-      });
-      return (
-        <div>
-          <Modal dialogClassName="publishReactionModal" animation show={show} bsSize="large" onHide={() => onHide()}>
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Publish Sample
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body style={{ paddingBottom: 'unset', maxHeight: 'calc(100vh - 210px)', overflowY: 'auto' }}>
-              <EmbargoCom
-                opts={opts}
-                selectedValue={selectedEmbargo}
-                onEmbargoChange={this.handleEmbargoChange}
-                selectedLicense={selectedLicense}
-                onLicenseChange={this.handleLicenseChange}
-                onCC0ConsentChange={this.handleCC0ConsentChange}
-                cc0Deed={cc0Consent}
-              />
-              <Panel>
-                <Panel.Body>
-                  <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} />
-                </Panel.Body>
-              </Panel>
-              {awareEmbargo}
-              <PanelGroup accordion id="publish-sample-config">
-                <Panel
-                  eventKey="2"
-                >
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Analyses ({selectedAnalysesCount})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    <SampleDetailsContainers
-                      readOnly
-                      publish
-                      sample={sample}
-                      handleSampleChanged={this.handleSampleChanged}
-                    />
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="3">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select Authors ({selectedUsers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.contributor()}
-                    {this.selectUsers()}
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="5">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Select References ({selectedRefs.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.selectReferences()}
-                  </Panel.Body>
-                </Panel>
-                <Panel eventKey="6">
-                  <Panel.Heading>
-                    <Panel.Title toggle>
-                      <h4> Additional Reviewers ({selectedReviewers.length})</h4>
-                    </Panel.Title>
-                  </Panel.Heading>
-                  <Panel.Body collapsible>
-                    {this.addReviewers()}
-                  </Panel.Body>
-                </Panel>
-              </PanelGroup>
-              {showPreview ? null : null}
-            </Modal.Body>
-            <Modal.Footer>
-              <Button onClick={() => onHide()}>Close</Button>
-              <Button bsStyle="primary" disabled={!canPublish} onClick={this.handlePublishSample}>
-                Publish Sample
-              </Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      );
-    }
-    return <div />;
-  }
-}
-
-PublishSampleModal.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  show: PropTypes.bool.isRequired,
-  onHide: PropTypes.func.isRequired,
-  onPublishRefreshClose: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/QuillEditor.js b/app/packs/src/components/QuillEditor.js
index 8d782d6a7..3f82e1724 100644
--- a/app/packs/src/components/QuillEditor.js
+++ b/app/packs/src/components/QuillEditor.js
@@ -50,7 +50,7 @@ export default class QuillEditor extends React.Component {
     }));
 
     this.editor = false;
-    this.id = uniqueId('quill-editor-');
+    this.id = _.uniqueId('quill-editor-');
 
     this.getContents = this.getContents.bind(this);
     this.updateEditorValue = this.updateEditorValue.bind(this);
@@ -71,7 +71,7 @@ export default class QuillEditor extends React.Component {
     const oldContents = this.editor ? this.getContents() : null;
 
     if (oldContents && nextVal &&
-      !isEqual(nextVal.ops, oldContents.ops)) {
+      !_.isEqual(nextVal.ops, oldContents.ops)) {
       this.setState({ value: nextVal });
       const sel = this.editor.getSelection();
       this.editor.setContents(nextVal);
diff --git a/app/packs/src/components/ReactionDescriptionEditor.js b/app/packs/src/components/ReactionDescriptionEditor.js
deleted file mode 100644
index 265b4bd53..000000000
--- a/app/packs/src/components/ReactionDescriptionEditor.js
+++ /dev/null
@@ -1,231 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { OverlayTrigger, Popover } from 'react-bootstrap';
-
-import _ from 'lodash';
-import Delta from 'quill-delta';
-
-import TextTemplateStore from './stores/TextTemplateStore';
-import TextTemplateActions from './actions/TextTemplateActions';
-
-import DynamicToolbarEditor from './react_quill/DynamicToolbarEditor';
-import BaseToolbar from './react_quill/BaseToolbar';
-
-import TextTemplateToolbar from './text_template_toolbar/TextTemplateToolbar';
-import ToolbarTemplateCreator from './text_template_toolbar/ToolbarTemplateCreator';
-
-const toolbarOptions = [
-  'bold', 'italic', 'underline',
-  'header', 'script',
-  'list', 'bullet',
-];
-
-export default class ReactionDescriptionEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const templateStore = TextTemplateStore.getState();
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = templateStore;
-    const fetchedTemplates = fetchedPredefinedTemplates.toJS();
-    this.state = {
-      fetchedNames: Object.keys(fetchedTemplates),
-      predefinedTemplateNames: predefinedTemplateNames.toJS(),
-      fetchedPredefinedTemplates: fetchedTemplates,
-      updateTemplate: false
-    };
-
-    this.fetchPredefinedTemplates = this.fetchPredefinedTemplates.bind(this);
-
-    this.onChangeTemplateStore = this.onChangeTemplateStore.bind(this);
-    this.onChangeContent = this.onChangeContent.bind(this);
-    this.applyTemplate = this.applyTemplate.bind(this);
-    this.updateTextTemplates = this.updateTextTemplates.bind(this);
-
-    this.quillOnChange = this.quillOnChange.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateStore.listen(this.onChangeTemplateStore);
-
-    TextTemplateActions.fetchPredefinedTemplateNames();
-
-    const { template } = this.props;
-    const namesToFetch = Object.values(template).flat();
-    this.fetchPredefinedTemplates(namesToFetch);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { template } = this.props;
-    const namesToFetch = Object.values(template).flat();
-
-    if (!this.state.updateTemplate && Object.keys(template).length !== 0) {
-      // this.fetchPredefinedTemplates(namesToFetch);
-      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        updateTemplate: true
-      });
-    } else if (this.props.template !== prevProps.template && this.state.updateTemplate) {
-      const prevnamesToFetch = Object.values(prevProps.template).flat();
-
-      if (prevnamesToFetch.length !== namesToFetch.length) {
-        // this.fetchPredefinedTemplates(namesToFetch);
-        TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    TextTemplateStore.unlisten(this.onChangeTemplateStore);
-  }
-
-  onChangeTemplateStore(state) {
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = state;
-    const { fetchedNames } = this.state;
-    const fetchedTemplates = fetchedPredefinedTemplates.toJS();
-
-    const templateStoreFetched = Object.keys(fetchedTemplates);
-    const fetched = [...new Set(fetchedNames.concat(templateStoreFetched))];
-    this.setState({
-      fetchedNames: fetched,
-      predefinedTemplateNames: predefinedTemplateNames.toJS(),
-      fetchedPredefinedTemplates: fetchedTemplates
-    });
-  }
-
-  onChangeContent(quillEditor) {
-    const { onChange } = this.props;
-
-    if (onChange) {
-      onChange(quillEditor.getContents());
-    }
-  }
-
-  fetchPredefinedTemplates(names) {
-    if (!names || names.length === 0) return;
-
-    const { fetchedNames } = this.state;
-    const namesToFetch = names.filter(n => !fetchedNames.includes(n));
-    if (namesToFetch.length === 0) return;
-
-    const fetched = [...new Set(fetchedNames.concat(names))];
-    this.setState({ fetchedNames: fetched }, () => {
-      TextTemplateActions.fetchPredefinedTemplateByNames(namesToFetch);
-    });
-  }
-
-  quillOnChange(content, delta, source, editor) {
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    this.onChangeContent(editor);
-  }
-
-  applyTemplate(macro) {
-    const check = ('ops' in macro) && Array.isArray(macro.ops);
-    if (!check) return;
-
-    if (this.reactQuillRef.current == null) {
-      return;
-    }
-
-    const quill = this.reactQuillRef.current.getEditor();
-    const range = quill.getSelection();
-    if (!range) return;
-
-    let contents = quill.getContents();
-    let elementOps = macro.ops;
-    const insertDelta = new Delta(elementOps);
-    if (range.index > 0) {
-      elementOps = [{ retain: range.index }].concat(elementOps);
-    }
-    const macroDelta = new Delta(elementOps);
-    contents = contents.compose(macroDelta);
-    quill.setContents(contents);
-    range.length = 0;
-    range.index += insertDelta.length();
-    quill.setSelection(range);
-
-    this.onChangeContent(quill);
-  }
-
-  updateTextTemplates(template) {
-    const { updateTextTemplates } = this.props;
-    updateTextTemplates(template);
-  }
-
-  render() {
-    const { predefinedTemplateNames, fetchedPredefinedTemplates } = this.state;
-    const { template, readOnly, value, reactQuillRef } = this.props;
-    this.reactQuillRef = reactQuillRef;
-
-    const templateCreatorPopover = (
-      <Popover
-        id="popover-positioned-top"
-        title="Custom toolbar"
-        className="analyses-template-creator"
-      >
-        <ToolbarTemplateCreator
-          template={template}
-          templateOptions={predefinedTemplateNames}
-          updateTextTemplates={this.updateTextTemplates}
-        />
-      </Popover>
-    );
-
-    return (
-      <DynamicToolbarEditor
-        theme="snow"
-        formats={toolbarOptions}
-        style={{ height: '100%' }}
-        ref={this.reactQuillRef}
-        onChange={this.quillOnChange}
-        value={value}
-        readOnly={readOnly}
-      >
-        <BaseToolbar />
-        <TextTemplateToolbar
-          template={template}
-          predefinedTemplates={fetchedPredefinedTemplates}
-          applyTemplate={this.applyTemplate}
-        />
-        <OverlayTrigger
-          trigger="click"
-          placement="top"
-          rootClose
-          overlay={templateCreatorPopover}
-          onHide={this.onCloseTemplateCreator}
-        >
-          <span className="ql-formats">
-            <button>
-              <span className="fa fa-cog" />
-            </button>
-          </span>
-        </OverlayTrigger>
-      </DynamicToolbarEditor>
-    );
-  }
-}
-
-ReactionDescriptionEditor.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  template: PropTypes.object,
-  value: PropTypes.object,
-  /* eslint-enable react/forbid-prop-types */
-  readOnly: PropTypes.bool,
-  onChange: PropTypes.func,
-  updateTextTemplates: PropTypes.func,
-  reactQuillRef: PropTypes.object
-};
-
-ReactionDescriptionEditor.defaultProps = {
-  readOnly: false,
-  template: {},
-  value: {},
-  onChange: null,
-  updateTextTemplates: null,
-  reactQuillRef: {}
-};
diff --git a/app/packs/src/components/ReactionDetails.js b/app/packs/src/components/ReactionDetails.js
deleted file mode 100644
index 7653a3cb9..000000000
--- a/app/packs/src/components/ReactionDetails.js
+++ /dev/null
@@ -1,848 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Col, Panel, ListGroupItem, ButtonToolbar, Button,
-  Tabs, Tab, OverlayTrigger, Tooltip,
-  Row, Alert, Label
-} from 'react-bootstrap';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
-import { findIndex, cloneDeep } from 'lodash';
-import uuid from 'uuid';
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ElementAnalysesLabels from './ElementAnalysesLabels';
-import ElementActions from './actions/ElementActions';
-import DetailActions from './actions/DetailActions';
-import LoadingActions from './actions/LoadingActions';
-import RepositoryActions from './actions/RepositoryActions';
-import ReactionDetailsLiteratures from './DetailsTabLiteratures';
-import ReactionDetailsContainers from './ReactionDetailsContainers';
-import SampleDetailsContainers from './SampleDetailsContainers';
-import ReactionDetailsScheme from './ReactionDetailsScheme';
-import ReactionDetailsProperties from './ReactionDetailsProperties';
-import GreenChemistry from './green_chem/GreenChemistry';
-import Utils from './utils/Functions';
-import PrintCodeButton from './common/PrintCodeButton';
-import XTabs from './extra/ReactionDetailsXTabs';
-import UIStore from './stores/UIStore';
-import UserStore from './stores/UserStore';
-import UIActions from './actions/UIActions';
-import { setReactionByType } from './ReactionDetailsShare';
-import { sampleShowOrNew } from './routesUtils';
-import ReactionSvgFetcher from './fetchers/ReactionSvgFetcher';
-import ConfirmClose from './common/ConfirmClose';
-import { rfValueFormat } from './utils/ElementUtils';
-import ExportSamplesBtn from './ExportSamplesBtn';
-import CopyElementModal from './common/CopyElementModal';
-import { permitOn } from './common/uis';
-import { addSegmentTabs } from './generic/SegmentDetails';
-import Immutable from 'immutable';
-import ElementDetailSortTab from './ElementDetailSortTab';
-import ScifinderSearch from './scifinder/ScifinderSearch';
-
-import PublishReactionModal from './PublishReactionModal';
-import {
-  PublishedTag,
-  OrigElnTag,
-  LabelPublication,
-  PublishBtnReaction,
-  ReviewPublishBtn,
-  validateMolecule,
-  validateYield
-} from './PublishCommon';
-import ReactionDetailsRepoComment from './ReactionDetailsRepoComment';
-import { contentToText } from './utils/quillFormat';
-import HelpInfo from './common/HelpInfo';
-
-export default class ReactionDetails extends Component {
-  constructor(props) {
-    super(props);
-
-    const { reaction } = props;
-    const publication = reaction.tag && reaction.tag.taggable_data
-      && reaction.tag.taggable_data.publication
-    this.state = {
-      reaction,
-      literatures: reaction.literatures,
-      activeTab: UIStore.getState().reaction.activeTab,
-      visible: Immutable.List(),
-      sfn: UIStore.getState().hasSfn,
-      showPublishReactionModal: false,
-      commentScreen: false
-    };
-
-    // remarked because of #466 reaction load image issue (Paggy 12.07.2018)
-    // if(reaction.hasMaterials()) {
-    //   this.updateReactionSvg();
-    // }
-
-    this.onUIStoreChange = this.onUIStoreChange.bind(this);
-    this.handleReactionChange = this.handleReactionChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
-    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
-    this.handlePublishReactionModal = this.handlePublishReactionModal.bind(this);
-    this.forcePublishRefreshClose = this.forcePublishRefreshClose.bind(this);
-    this.handleCommentScreen = this.handleCommentScreen.bind(this);
-    this.handleFullScreen = this.handleFullScreen.bind(this);
-    this.handleValidation = this.handleValidation.bind(this);
-    this.handleResetValidation = this.handleResetValidation.bind(this);
-    this.handleModalAnalysesCheck = this.handleModalAnalysesCheck.bind(this);
-    this.unseal = this.unseal.bind(this);
-    if (!reaction.reaction_svg_file) {
-      this.updateReactionSvg();
-    }
-  }
-
-  onUIStoreChange(state) {
-    if (state.reaction.activeTab != this.state.activeTab){
-      this.setState({
-        activeTab: state.reaction.activeTab
-      })
-    }
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIStoreChange)
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { reaction } = this.state;
-    const nextReaction = nextProps.reaction;
-
-    if (nextReaction.id !== reaction.id ||
-        nextReaction.can_publish !== reaction.can_publish ||
-        nextReaction.can_update !== reaction.can_update ||
-        nextReaction.updated_at !== reaction.updated_at ||
-        nextReaction.reaction_svg_file !== reaction.reaction_svg_file ||
-        nextReaction.changed || nextReaction.editedSample) {
-      this.setState(prevState => ({ ...prevState, reaction: nextReaction }));
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const nextReaction = nextProps.reaction;
-    const nextActiveTab = nextState.activeTab;
-    const nextVisible = nextState.visible;
-    const { reaction, activeTab, visible } = this.state;
-    return (
-      nextState.sealed !== reaction.sealed ||
-      nextReaction.can_publish !== reaction.can_publish ||
-      nextReaction.can_update !== reaction.can_update ||
-      nextReaction.id !== reaction.id ||
-      nextReaction.updated_at !== reaction.updated_at ||
-      nextReaction.reaction_svg_file !== reaction.reaction_svg_file ||
-      !!nextReaction.changed || !!nextReaction.editedSample ||
-      nextActiveTab !== activeTab || nextVisible !== visible ||
-      nextState.commentScreen !== this.state.commentScreen ||
-      nextProps.fullScreen !== this.props.fullScreen ||
-      ((nextState.reaction.validates || false)) ||
-      nextState.showPublishReactionModal !== this.state.showPublishReactionModal
-    );
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIStoreChange);
-  }
-
-  forcePublishRefreshClose(reaction, show) {
-    this.setState({ reaction, showPublishReactionModal: show });
-    this.forceUpdate();
-  }
-
-  unseal() {
-    const { reaction } = this.state;
-    reaction.sealed = false;
-    this.setState({ reaction });
-  }
-
-  handleModalAnalysesCheck(reaction) {
-    this.setState({ reaction });
-  }
-
-  handleValidation(element) {
-    let validates = [];
-    const reaction = element;
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-    reaction.publication.taggable_data.scheme_only === true) || false;
-    if ((reaction.rxno || '') === '' && schemeOnly === false) {
-      validates.push({ name: 'reaction_type', value: false, message: 'Reaction Type is missing.' });
-    }
-    const duration = (reaction.duration || '').split(' ').shift();
-    if (duration === '' || (duration === reaction.duration)) {
-      validates.push({ name: 'duration', value: false, message: 'No duration' });
-    }
-    const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-    if (!hasTemperature) {
-      validates.push({ name: 'temperature', value: false, message: 'Temperature is missing' });
-    }
-    const desc = contentToText(reaction.description).trim() || '';
-    if (desc === '' && schemeOnly === false) {
-      validates.push({ name: 'description', value: false, message: 'Description is missing' });
-    }
-
-    if (schemeOnly === false) {
-      let hasAnalyses = (reaction.container.children.filter(c => c.container_type === 'analyses')[0].children.length > 0);
-      const startingMaterisls = (reaction.starting_materials || []);
-      if (startingMaterisls.length < 1) {
-        validates.push({ name: 'start_material', value: false, message: 'Start material is missing' });
-      }
-      startingMaterisls.forEach((st) => {
-        if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      const products = (reaction.products || []);
-      if (products.length < 1) {
-        validates.push({ name: 'product', value: false, message: 'Product is missing' });
-      }
-      products.forEach((pt) => {
-        if (pt.analysisArray().length > 0) {
-          hasAnalyses = true;
-        }
-        const validatePt = validateMolecule(pt);
-        if (validatePt.length > 0) {
-          validates = validates.concat(validatePt);
-        }
-      });
-      if (!hasAnalyses) {
-        validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
-      }
-    }
-    if (validates.length > 0) {
-      reaction.validates = validates;
-      this.setState({ reaction });
-    } else {
-      LoadingActions.start();
-      RepositoryActions.reviewPublish(element);
-    }
-  }
-
-  handleResetValidation() {
-    const { reaction } = this.state;
-    reaction.validates = [];
-    this.setState({ reaction });
-  }
-
-  handleCommentScreen() {
-    this.setState({ commentScreen: true });
-    this.props.toggleCommentScreen(true);
-  }
-
-  handleFullScreen() {
-    this.setState({ commentScreen: false });
-    this.props.toggleFullScreen();
-  }
-
-  handlePublishReactionModal(show) {
-    this.setState({ showPublishReactionModal: show });
-  }
-
-  updateReactionSvg() {
-    const {reaction} = this.state;
-    const materialsSvgPaths = {
-      starting_materials: reaction.starting_materials.map(material => material.svgPath),
-      reactants: reaction.reactants.map(material => material.svgPath),
-      products: reaction.products.map(material => [material.svgPath, material.equivalent])
-    };
-
-    const solvents = reaction.solvents.map((s) => {
-      const name = s.preferred_label;
-      return name;
-    }).filter(s => s);
-  }
-
-  handleValidation(element) {
-    let validates = [];
-    const reaction = element;
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-    reaction.publication.taggable_data.scheme_only === true) || false;
-    if ((reaction.rxno || '') === '' && schemeOnly === false) {
-      validates.push({ name: 'reaction_type', value: false, message: 'Reaction Type is missing.' });
-    }
-    const duration = (reaction.duration || '').split(' ').shift();
-    if (duration === '' || (duration === reaction.duration)) {
-      validates.push({ name: 'duration', value: false, message: 'No duration' });
-    }
-    const hasTemperature = !!(reaction.temperature && reaction.temperature.userText);
-    if (!hasTemperature) {
-      validates.push({ name: 'temperature', value: false, message: 'Temperature is missing' });
-    }
-    const desc = contentToText(reaction.description).trim() || '';
-    if (desc === '' && schemeOnly === false) {
-      validates.push({ name: 'description', value: false, message: 'Description is missing' });
-    }
-
-    if (schemeOnly === false) {
-      let hasAnalyses = (reaction.container.children.filter(c => c.container_type === 'analyses')[0].children.length > 0);
-      const startingMaterisls = (reaction.starting_materials || []);
-      if (startingMaterisls.length < 1) {
-        validates.push({ name: 'start_material', value: false, message: 'Start material is missing' });
-      }
-      startingMaterisls.forEach((st) => {
-        if (!st.amount || !st.amount.value) {
-          validates.push({ name: 'starting_materials-amount', value: false, message: `${st.molecule_iupac_name}: amount is 0` });
-        }
-      });
-      const products = (reaction.products || []);
-      if (products.length < 1) {
-        validates.push({ name: 'product', value: false, message: 'Product is missing' });
-      }
-      products.forEach((pt) => {
-        if (!pt.amount || !pt.amount.value) {
-          validates.push({ name: 'product-amount', value: false, message: `${pt.molecule_iupac_name}: amount is 0` });
-        }
-        if (pt.analysisArray().length > 0) {
-          hasAnalyses = true;
-        }
-        const validatePt = validateMolecule(pt);
-        if (validatePt.length > 0) {
-          validates = validates.concat(validatePt);
-        }
-      });
-      if (!hasAnalyses) {
-        validates.push({ name: 'analyses', value: false, message: 'Analyses data is missing.' });
-      }
-    }
-    if (validates.length > 0) {
-      reaction.validates = validates;
-      this.setState({ reaction });
-    } else {
-      LoadingActions.start();
-      RepositoryActions.reviewPublish(element);
-    }
-  }
-
-  handleResetValidation() {
-    const { reaction } = this.state;
-    reaction.validates = [];
-    this.setState({ reaction });
-  }
-
-  handleCommentScreen() {
-    this.setState({ commentScreen: true });
-    this.props.toggleCommentScreen(true);
-  }
-
-  handleFullScreen() {
-    this.setState({ commentScreen: false });
-    this.props.toggleFullScreen();
-  }
-
-  handlePublishReactionModal(show) {
-    this.setState({ showPublishReactionModal: show });
-  }
-
-  updateReactionSvg() {
-    const {reaction} = this.state;
-    const materialsSvgPaths = {
-      starting_materials: reaction.starting_materials.map(material => material.svgPath),
-      reactants: reaction.reactants.map(material => material.svgPath),
-      products: reaction.products.map(material => [material.svgPath, material.equivalent])
-    };
-
-    const solvents = reaction.solvents.map((s) => {
-      const name = s.preferred_label;
-      return name;
-    }).filter(s => s);
-  }
-
-  onUIStoreChange(state) {
-    if (state.reaction.activeTab != this.state.activeTab) {
-      this.setState({
-        activeTab: state.reaction.activeTab
-      });
-    }
-  }
-
-  handleSubmit(closeView = false) {
-    LoadingActions.start();
-
-    const { reaction } = this.state;
-    if (reaction && reaction.isNew) {
-      ElementActions.createReaction(reaction);
-    } else {
-      ElementActions.updateReaction(reaction, closeView);
-    }
-
-    if (reaction.is_new || closeView) {
-      DetailActions.close(reaction, true);
-    }
-  }
-
-  reactionIsValid() {
-    const {reaction} = this.state;
-    return reaction.hasMaterials() && reaction.SMGroupValid();
-  }
-
-  handleReactionChange(reaction, options={}) {
-    reaction.changed = true;
-    if(options.schemaChanged) {
-      this.setState({ reaction }, () => this.updateReactionSvg());
-    } else {
-      this.setState({ reaction });
-    }
-  }
-
-  handleInputChange(type, event) {
-    let value;
-    if (type === 'temperatureUnit' || type === 'temperatureData' ||
-      type === 'description' || type === 'role' || type === 'observation' || type === 'durationUnit' || type === 'duration' || type === 'rxno') {
-      value = event;
-    } else if (type === 'rfValue') {
-      value = rfValueFormat(event.target.value) || '';
-    } else {
-      value = event.target.value;
-    }
-
-    const { reaction } = this.state;
-
-    const { newReaction, options } = setReactionByType(reaction, type, value);
-    this.handleReactionChange(newReaction, options);
-  }
-
-  handleProductClick(product) {
-    const uri = Aviator.getCurrentURI();
-    const uriArray = uri.split(/\//);
-    Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/sample/${product.id}`, { silent: true });
-    sampleShowOrNew({ params: { sampleID: product.id} });
-  }
-
-  handleProductChange(product, cb) {
-    let {reaction} = this.state
-
-    reaction.updateMaterial(product)
-    reaction.changed = true
-
-    this.setState({ reaction }, cb)
-  }
-
-  productLink(product) {
-    return (
-      <span>
-        Analysis:
-        &nbsp;
-        <span className="pseudo-link"
-           onClick={() => this.handleProductClick(product)}
-           style={{cursor: 'pointer'}}
-           title="Open sample window">
-          <i className="icon-sample" />&nbsp;{product.title()}
-        </span>
-      </span>
-    )
-  }
-
-  productData(reaction) {
-    const { products } = this.state.reaction;
-
-    const tabs = products.map((product, key) => {
-      const title = this.productLink(product);
-      const setState = () => this.handleProductChange(product);
-      const handleSampleChanged = (_, cb) => this.handleProductChange(product, cb);
-      return (
-        <Tab
-          key={product.id}
-          eventKey={key}
-          title={title}
-        >
-          <SampleDetailsContainers
-            sample={product}
-            setState={setState}
-            handleSampleChanged={handleSampleChanged}
-            handleSubmit={this.handleSubmit}
-            style={{ marginTop: 10 }}
-            publish={reaction.is_published}
-          />
-        </Tab>
-      );
-    });
-    const reactionTab = <span>Analysis:&nbsp;<i className="icon-reaction" />&nbsp;{reaction.short_label}</span>;
-    return (
-      <Tabs
-        id="data-detail-tab"
-        style={{ marginTop: '10px' }}
-        unmountOnExit
-      >
-        {tabs}
-        <Tab eventKey={4.1} title={reactionTab}>
-          <ListGroupItem style={{ paddingBottom: 20 }}>
-            <ReactionDetailsContainers
-              reaction={reaction}
-              parent={this}
-              readOnly={!permitOn(reaction)}
-              handleSubmit={this.handleSubmit}
-            />
-          </ListGroupItem>
-        </Tab>
-      </Tabs>
-    );
-  }
-
-  extraTab(ind) {
-    const reaction = this.state.reaction || {};
-    const num = ind;
-    const NoName = XTabs["content"+num];
-    const TabName = XTabs["title"+num];
-    return (
-      <Tab eventKey={ind + 5} title={TabName} key={`sampleDetailsTab${ind + 3}`} >
-        <ListGroupItem style={{ paddingBottom: 20 }}>
-          <NoName reaction={reaction} />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  reactionSVG(reaction) {
-    if(!reaction.svgPath) {
-      return false;
-    } else {
-      const svgProps = reaction.svgPath.substr(reaction.svgPath.length - 4) === '.svg' ? { svgPath: reaction.svgPath } : { svg: reaction.reaction_svg_file }
-      return (
-        <SvgFileZoomPan
-          duration={300}
-          resize={true}
-          {...svgProps}
-        />)
-    }
-  }
-
-  reactionHeader(reaction) {
-    let hasChanged = reaction.changed ? '' : 'none'
-    const titleTooltip = `Created at: ${reaction.created_at} \n Updated at: ${reaction.updated_at}`;
-
-    const { currentCollection } = UIStore.getState();
-    const defCol = currentCollection && currentCollection.is_shared === false &&
-      currentCollection.is_locked === false && currentCollection.label !== 'All' ? currentCollection.id : null;
-
-
-    const copyBtn = (reaction.can_copy === true && !reaction.isNew) ? (
-      <CopyElementModal
-        element={reaction}
-        defCol={defCol}
-      />
-    ) : null;
-
-    const colLabel = reaction.isNew ? null : (
-      <ElementCollectionLabels element={reaction} key={reaction.id} placement="right" />
-    );
-    if (reaction.is_published) {
-      hasChanged = 'none';
-    }
-
-    const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-      reaction.publication.taggable_data.scheme_only === true) || false;
-
-
-
-    return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
-          <span><i className="icon-reaction"/>&nbsp;{reaction.title()}</span>
-        </OverlayTrigger>
-        <ConfirmClose el={reaction} forceClose={reaction.is_published} />
-        <OverlayTrigger placement="bottom"
-            overlay={<Tooltip id="saveReaction">Save and Close Reaction</Tooltip>}>
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit(true)}
-            disabled={
-              !permitOn(reaction) || !this.reactionIsValid() || reaction.isNew
-            }
-            style={{ display: hasChanged }}
-          >
-            <i className="fa fa-floppy-o" />
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveReaction">Save Reaction</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit()}
-            disabled={!permitOn(reaction) || !this.reactionIsValid()}
-            style={{ display: hasChanged }}
-          >
-            <i className="fa fa-floppy-o "></i>
-          </Button>
-        </OverlayTrigger>
-        {copyBtn}
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
-        >
-          <Button
-            bsStyle="info"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={this.handleFullScreen}
-          >
-            <i className="fa fa-expand" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="generateReport">Generate Report</Tooltip>}
-        >
-          <Button
-            bsStyle="success"
-            bsSize="xsmall"
-            className="button-right"
-            disabled={reaction.changed || reaction.isNew}
-            title={(reaction.changed || reaction.isNew) ?
-              "Report can be generated after reaction is saved."
-              : "Generate report for this reaction"}
-            onClick={() => Utils.downloadFile({
-              contents: "/api/v1/reports/docx?id=" + reaction.id,
-              name: reaction.name
-            })}
-          >
-            <i className="fa fa-cogs" />
-          </Button>
-        </OverlayTrigger>
-        <div style={{display: "inline-block", marginLeft: "10px"}}>
-          {colLabel}
-          <ElementAnalysesLabels element={reaction} key={reaction.id+"_analyses"}/>
-          { schemeOnly ? <span>&nbsp;<Label>scheme only</Label></span> : '' }
-        </div>
-        <PublishBtnReaction
-          reaction={reaction}
-          showModal={this.handlePublishReactionModal}
-        />
-        <ReviewPublishBtn element={reaction} showComment={this.handleCommentScreen} validation={this.handleValidation} />
-        <div style={{ display: "inline-block", marginLeft: "10px" }}>
-          <OrigElnTag element={reaction} />
-          <PublishedTag element={reaction} fnUnseal={this.unseal} />
-          <LabelPublication element={reaction} />
-        </div>
-      </div>
-    );
-  }
-
-  handleSelect(key) {
-    UIActions.selectTab({tabKey: key, type: 'reaction'});
-    this.setState({
-      activeTab: key
-    })
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({ visible })
-  }
-
-  updateReactionSvg() {
-    const { reaction } = this.state;
-    const materialsSvgPaths = {
-      starting_materials: reaction.starting_materials.map(material => material.svgPath),
-      reactants: reaction.reactants.map(material => material.svgPath),
-      products: reaction.products.map(material => [material.svgPath, material.equivalent])
-    };
-
-    const solvents = reaction.solvents.map((s) => {
-      const name = s.preferred_label;
-      return name;
-    }).filter(s => s);
-
-    let temperature = reaction.temperature_display;
-    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature)) {
-      temperature = `${temperature} ${reaction.temperature.valueUnit}`;
-    }
-
-    ReactionSvgFetcher.fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, reaction.duration, reaction.conditions).then((result) => {
-      reaction.reaction_svg_file = result.reaction_svg;
-      this.setState(reaction);
-    });
-  }
-
-  handleSegmentsChange(se) {
-    const { reaction } = this.state;
-    const { segments } = reaction;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
-    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
-    reaction.segments = segments;
-    reaction.changed = true;
-    this.setState({ reaction });
-  }
-
-  render() {
-    const { reaction } = this.state;
-    const { visible } = this.state;
-    const tabContentsMap = {
-      scheme: (
-        <Tab eventKey="scheme" title="Scheme"  key={`scheme_${reaction.id}`}>
-          <ReactionDetailsScheme
-            reaction={reaction}
-            onReactionChange={(reaction, options) => this.handleReactionChange(reaction, options)}
-            onInputChange={(type, event) => this.handleInputChange(type, event)}
-            />
-        </Tab>
-      ),
-      properties: (
-        <Tab eventKey="properties" title="Properties" key={`properties_${reaction.id}`}>
-          <ReactionDetailsProperties
-            reaction={reaction}
-            onReactionChange={r => this.handleReactionChange(r)}
-            onInputChange={(type, event) => this.handleInputChange(type, event)}
-            key={reaction.checksum}
-          />
-        </Tab>
-      ),
-      references: (
-        <Tab eventKey="references" title="References" key={`references_${reaction.id}`}>
-          <ReactionDetailsLiteratures
-            element={reaction}
-            literatures={reaction.isNew === true ? reaction.literatures : null}
-            onElementChange={r => this.handleReactionChange(r)}
-          />
-        </Tab>
-      ),
-      analyses: (
-        <Tab eventKey="analyses" title="Analyses" key={`analyses_${reaction.id}`}>
-          {this.productData(reaction)}
-        </Tab>
-      ),
-/*
-      green_chemistry: (
-        <Tab eventKey="green_chemistry" title="Green Chemistry" key={`green_chem_${reaction.id}`}>
-          <GreenChemistry
-            reaction={reaction}
-            onReactionChange={this.handleReactionChange}
-          />
-        </Tab>
-      )
-*/
-    };
-
-    const tabTitlesMap = {
-      green_chemistry: 'Green Chemistry'
-    }
-
-    for (let j = 0; j < XTabs.count; j += 1) {
-      if (XTabs[`on${j}`](reaction)) {
-        const NoName = XTabs[`content${j}`];
-        tabContentsMap[`xtab_${j}`] = (
-          <Tab eventKey={`xtab_${j}`} key={`xtab_${j}`} title={XTabs[`title${j}`]} >
-            <ListGroupItem style={{ paddingBottom: 20 }} >
-              <NoName reaction={reaction} />
-            </ListGroupItem>
-          </Tab>
-        );
-        tabTitlesMap[`xtab_${j}`] = XTabs[`title${j}`];
-      }
-    }
-
-    addSegmentTabs(reaction, this.handleSegmentsChange, tabContentsMap);
-    const stb = [];
-    const tabContents = [];
-    visible.forEach((value) => {
-      const tabContent = tabContentsMap[value];
-      if (tabContent) { tabContents.push(tabContent); }
-      stb.push(value);
-    });
-
-    let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
-    segmentKlasses =
-      segmentKlasses.filter(s => s.element_klass && s.element_klass.name === reaction.type);
-    segmentKlasses.forEach((klass) => {
-      const visIdx = visible.indexOf(klass.label);
-      const idx = findIndex(reaction.segments, o => o.segment_klass_id === klass.id);
-      if (visIdx < 0 && idx > -1) {
-        const tabContent = tabContentsMap[klass.label];
-        if (tabContent) { tabContents.push(tabContent); }
-        stb.push(klass.label);
-      }
-    });
-
-    const { showPublishReactionModal } = this.state;
-    const submitLabel = (reaction && reaction.isNew) ? 'Create' : 'Save';
-    const exportButton = (reaction && reaction.isNew) ? null : <ExportSamplesBtn type="reaction" id={reaction.id} />;
-
-    const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
-      this.state.activeTab) || visible[0];
-    const panelStylePre = reaction.isPendingToSave ? 'info' : 'primary';
-    const publication = reaction.tag && reaction.tag.taggable_data &&
-      reaction.tag.taggable_data.publication;
-    const panelStyle = publication ? 'success' : panelStylePre;
-
-    const validateObjs = reaction.validates && reaction.validates.filter(v => v.value === false);
-    const validationBlock = (validateObjs && validateObjs.length > 0) ? (
-      <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
-        <strong>Submission Alert</strong>&nbsp;&nbsp;
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
-        <br />
-        {
-          validateObjs.map(m => (
-            <div key={uuid.v1()}>{m.message}</div>
-          ))
-        }
-      </Alert>
-    ) : null;
-    const schemeTitle = <span>Scheme&nbsp;<HelpInfo source={reaction.is_published ? 'x' : 'scheme'} place="right" /></span>;
-    return (
-      <Panel
-        className="element-panel-detail"
-        bsStyle={panelStyle}
-      >
-        <Panel.Heading>{this.reactionHeader(reaction)}{validationBlock}</Panel.Heading>
-        <Panel.Body>
-          <Row><Col md={this.props.fullScreen && this.state.commentScreen ? 6 : 12}>
-            <div className={this.props.fullScreen ? 'full' : 'base'}>
-          {this.reactionSVG(reaction)}
-            <PublishReactionModal
-                show={showPublishReactionModal}
-                reaction={cloneDeep(reaction)}
-                onHide={this.handlePublishReactionModal}
-                onPublishRefreshClose={this.forcePublishRefreshClose}
-                onHandleAnalysesCheck={this.handleModalAnalysesCheck}
-            />
-          <ElementDetailSortTab
-            type="reaction"
-            availableTabs={Object.keys(tabContentsMap)}
-            tabTitles={tabTitlesMap}
-            onTabPositionChanged={this.onTabPositionChanged}
-          />
-          {this.state.sfn ? <ScifinderSearch el={reaction} /> : null}
-          <Tabs activeKey={activeTab} onSelect={this.handleSelect.bind(this)} id="reaction-detail-tab">
-            {tabContents}
-          </Tabs>
-          <hr />
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(reaction)}>
-              Close
-            </Button>
-            <Button id="submit-reaction-btn" bsStyle="warning" onClick={() => this.handleSubmit()} disabled={!permitOn(reaction) || !this.reactionIsValid()}>
-              {submitLabel}
-            </Button>
-            {exportButton}
-          </ButtonToolbar>
-            </div>
-          </Col>
-            {
-              this.props.fullScreen && this.state.commentScreen ?
-                <Col md={6}>
-                  <div className={this.props.fullScreen ? 'full' : 'base'}>
-                    <ReactionDetailsRepoComment reactionId={reaction.id} />
-                  </div>
-                </Col>
-                :
-                <div />
-            }
-          </Row>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-ReactionDetails.propTypes = {
-  reaction: PropTypes.object,
-  toggleFullScreen: PropTypes.func,
-  toggleCommentScreen: PropTypes.func.isRequired,
-  fullScreen: PropTypes.bool.isRequired,
-  validates: PropTypes.array
-}
diff --git a/app/packs/src/components/ReactionDetailsContainers.js b/app/packs/src/components/ReactionDetailsContainers.js
deleted file mode 100644
index 94e5d0435..000000000
--- a/app/packs/src/components/ReactionDetailsContainers.js
+++ /dev/null
@@ -1,470 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  PanelGroup,
-  Panel,
-  Button,
-  OverlayTrigger, SplitButton, ButtonGroup, MenuItem, Tooltip
-} from 'react-bootstrap';
-import Container from 'src/models/Container';
-import ContainerComponent from 'src/components/container/ContainerComponent';
-import PrintCodeButton from 'src/components/common/PrintCodeButton';
-import QuillViewer from 'src/components/QuillViewer';
-import ImageModal from 'src/components/common/ImageModal';
-import { hNmrCount, cNmrCount, instrumentText } from 'src/utilities/ElementUtils';
-import { contentToText } from 'src/utilities/quillFormat';
-import { chmoConversions } from 'src/components/OlsComponent';
-import { previewContainerImage } from 'src/utilities/imageHelper';
-import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import SpectraActions from 'src/stores/alt/actions/SpectraActions';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
-import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
-
-import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
-
-const nmrMsg = (reaction, container) => {
-  const ols = container.extended_metadata?.kind?.split('|')[0].trim();
-  if (ols !== chmoConversions.nmr_1h?.termId && ols !== chmoConversions?.nmr_13c?.termId) {
-    return '';
-  }
-  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
-
-  if ((container.extended_metadata.kind || '').split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
-    const msg = hNmrCount(nmrStr);
-    return (<div style={{ display: 'inline', color: 'black' }}>&nbsp;(<sup>1</sup>H: {msg})</div>);
-  } else if ((container.extended_metadata.kind || '').split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
-    const msg = cNmrCount(nmrStr);
-    return (<div style={{ display: 'inline', color: 'black' }}>&nbsp;(<sup>13</sup>C: {msg})</div>);
-  }
-};
-
-const SpectraEditorBtn = ({
-  element, spcInfos, hasJcamp, hasChemSpectra,
-  toggleSpectraModal, confirmRegenerate,
-  toggleNMRDisplayerModal, hasNMRium,
-}) => (
-  <span>
-    <OverlayTrigger
-      placement="bottom"
-      delayShow={500}
-      overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
-    >{spcInfos.length > 0 ? (
-      <ButtonGroup className="button-right">
-        <SplitButton
-          id="spectra-editor-split-button"
-          pullRight
-          bsStyle="info"
-          bsSize="xsmall"
-          title={<i className="fa fa-area-chart" />}
-          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-          onClick={toggleSpectraModal}
-          disabled={!(spcInfos.length > 0) || !hasChemSpectra}
-        >
-          <MenuItem
-            id="regenerate-spectra"
-            key="regenerate-spectra"
-            onSelect={(eventKey, event) => {
-              event.stopPropagation();
-              confirmRegenerate(event);
-            }}
-            disabled={!hasJcamp || !element.can_update}
-          >
-            <i className="fa fa-refresh" /> Reprocess
-          </MenuItem>
-        </SplitButton>
-      </ButtonGroup>
-      ) : (
-        <Button
-          bsStyle="warning"
-          bsSize="xsmall"
-          className="button-right"
-          onClick={confirmRegenerate}
-          disabled={!hasJcamp || !element.can_update || !hasChemSpectra}
-        >
-          <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
-      </Button>
-    )}
-    </OverlayTrigger>
-    {
-      hasNMRium ? (
-        <OverlayTrigger
-          placement="top"
-          delayShow={500}
-          overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
-        >
-          <ButtonGroup className="button-right">
-            <Button
-              id="spectra-editor-split-button"
-              pullRight
-              bsStyle="info"
-              bsSize="xsmall"
-              onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-              onClick={toggleNMRDisplayerModal}
-              disabled={!hasJcamp || !element.can_update}
-            >
-              <i className="fa fa-bar-chart"/>
-            </Button>
-          </ButtonGroup>
-        </OverlayTrigger>
-      ) : null
-    }
-  </span>
-);
-
-SpectraEditorBtn.propTypes = {
-  element: PropTypes.object,
-  hasJcamp: PropTypes.bool,
-  spcInfos: PropTypes.array,
-  hasChemSpectra: PropTypes.bool,
-  toggleSpectraModal: PropTypes.func.isRequired,
-  confirmRegenerate: PropTypes.func.isRequired,
-  toggleNMRDisplayerModal: PropTypes.func.isRequired,
-  hasNMRium: PropTypes.bool,
-};
-
-SpectraEditorBtn.defaultProps = {
-  hasJcamp: false,
-  spcInfos: [],
-  element: {},
-  hasChemSpectra: false,
-  hasEditedJcamp: false,
-  hasNMRium: false,
-};
-
-export default class ReactionDetailsContainers extends Component {
-  constructor(props) {
-    super();
-    const { reaction } = props;
-    this.state = {
-      reaction,
-      activeContainer: 0
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleAdd = this.handleAdd.bind(this);
-    this.handleRemove = this.handleRemove.bind(this);
-    this.handleUndo = this.handleUndo.bind(this);
-    this.handleOnClickRemove = this.handleOnClickRemove.bind(this);
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-    this.handleSpChange = this.handleSpChange.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateActions.fetchTextTemplates('reaction');
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      reaction: nextProps.reaction,
-    });
-  }
-
-  handleChange(container) {
-    const { reaction } = this.state;
-
-    this.props.parent.handleReactionChange(reaction);
-  }
-
-  handleSpChange(reaction, cb) {
-    this.props.parent.handleReactionChange(reaction);
-    cb();
-  }
-
-  handleUndo(container) {
-    const { reaction } = this.state;
-    container.is_deleted = false;
-    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
-  }
-
-  handleAdd() {
-    const { reaction } = this.state;
-    const container = Container.buildEmpty();
-    container.container_type = 'analysis';
-    container.extended_metadata.content = { ops: [{ insert: '' }] };
-
-    if (reaction.container.children.length === 0) {
-      const analyses = Container.buildEmpty();
-      analyses.container_type = 'analyses';
-      reaction.container.children.push(analyses);
-    }
-
-    reaction.container.children.filter(element => (
-      ~element.container_type.indexOf('analyses')
-    ))[0].children.push(container);
-
-    const newKey = reaction.container.children.filter(element => (
-      ~element.container_type.indexOf('analyses')
-    ))[0].children.length - 1;
-
-    this.handleAccordionOpen(newKey);
-    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
-  }
-
-  handleOnClickRemove(container) {
-    if (confirm('Delete the container?')) {
-      this.handleRemove(container);
-    }
-  }
-
-  headerBtnGroup(container, reaction, readOnly) {
-    const jcampIds = JcampIds(container);
-    const hasJcamp = jcampIds.orig.length > 0;
-    const confirmRegenerate = (e) => {
-      e.stopPropagation();
-      if (confirm('Regenerate spectra?')) {
-        LoadingActions.start();
-        SpectraActions.Regenerate(jcampIds, this.handleChange);
-      }
-    };
-
-    const spcInfos = BuildSpcInfos(reaction, container);
-    const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
-    const toggleSpectraModal = (e) => {
-      e.stopPropagation();
-      SpectraActions.ToggleModal();
-      SpectraActions.LoadSpectra.defer(spcInfos);
-    };
-
-    //process open NMRium
-    const toggleNMRDisplayerModal = (e) => {
-      const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(reaction, container);
-      e.stopPropagation();
-      SpectraActions.ToggleModalNMRDisplayer();
-      SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
-    }
-
-    const { chmos } = UserStore.getState();
-    const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
-
-    return (
-      <div className="upper-btn">
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          className="button-right"
-          disabled={readOnly}
-          onClick={() => this.handleOnClickRemove(container)}
-        >
-          <i className="fa fa-trash" />
-        </Button>
-        <PrintCodeButton element={reaction} analyses={[container]} ident={container.id} />
-        <SpectraEditorBtn
-          element={reaction}
-          hasJcamp={hasJcamp}
-          spcInfos={spcInfos}
-          hasChemSpectra={hasChemSpectra}
-          toggleSpectraModal={toggleSpectraModal}
-          confirmRegenerate={confirmRegenerate}
-          toggleNMRDisplayerModal={toggleNMRDisplayerModal}
-          hasNMRium={hasNMRium}
-        />
-      </div>
-    );
-  };
-
-
-  handleRemove(container) {
-    const { reaction } = this.state;
-
-    container.is_deleted = true;
-    this.props.parent.handleReactionChange(reaction, { schemaChanged: false });
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({ activeContainer: key });
-  }
-
-  addButton() {
-    const { readOnly } = this.props;
-    if (!readOnly) {
-      return (
-        <Button
-          className="button-right"
-          bsSize="xsmall"
-          bsStyle="success"
-          onClick={this.handleAdd}
-        >
-          Add analysis
-        </Button>
-      );
-    }
-
-    return (<span />);
-  }
-
-  render() {
-    const { reaction, activeContainer } = this.state;
-    const { readOnly } = this.props;
-
-    const containerHeader = (container) => {
-      let kind = container.extended_metadata.kind || '';
-      kind = (kind.split('|')[1] || kind).trim();
-      const insText = instrumentText(container);
-      const previewImg = previewContainerImage(container);
-      const status = container.extended_metadata.status || '';
-      const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
-      const contentOneLine = {
-        ops: content.ops.map((x) => {
-          const c = Object.assign({}, x);
-          if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
-          return c;
-        }),
-      };
-      let hasPop = true;
-      let fetchNeeded = false;
-      let fetchId = 0;
-      if (previewImg.startsWith('data:image')) {
-        fetchNeeded = true;
-        fetchId = container.preview_img.id;
-      } else {
-        hasPop = false;
-      }
-
-      return (
-        <div className="analysis-header order" style={{ width: '100%' }}>
-          <div className="preview">
-            <ImageModal
-              hasPop={hasPop}
-              previewObject={{
-                src: previewImg
-              }}
-              popObject={{
-                title: container.name,
-                src: previewImg,
-                fetchNeeded,
-                fetchId
-              }}
-            />
-          </div>
-          <div className="abstract">
-            {
-              this.headerBtnGroup(container, reaction, readOnly)
-            }
-            <div className="lower-text">
-              <div className="main-title">{container.name}</div>
-              <div className="sub-title">Type: {kind}</div>
-              <div className="sub-title">Status: {status} {nmrMsg(reaction, container)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}</div>
-              <div className="desc sub-title">
-                <span style={{ float: 'left', marginRight: '5px' }}>
-                  Content:
-                </span>
-                <QuillViewer value={contentOneLine} />
-              </div>
-
-            </div>
-          </div>
-        </div>
-      )
-    };
-
-    const containerHeaderDeleted = (container) => {
-      const kind = container.extended_metadata.kind && container.extended_metadata.kind !== '';
-      const titleKind = kind ? (` - Type: ${(container.extended_metadata.kind.split('|')[1] || container.extended_metadata.kind).trim()}`) : '';
-
-      const status = container.extended_metadata.status && container.extended_metadata.status != '';
-      const titleStatus = status ? (' - Status: ' + container.extended_metadata.status) : '';
-
-      return (
-        <div style={{ width: '100%' }}>
-          <strike>
-            {container.name}
-            {titleKind}
-            {titleStatus}
-          </strike>
-          <Button className="pull-right" bsSize="xsmall" bsStyle="danger"
-            onClick={() => this.handleUndo(container)}>
-            <i className="fa fa-undo"></i>
-          </Button>
-        </div>
-      )
-    };
-
-    if (reaction.container != null && reaction.container.children) {
-      const analyses_container = reaction.container.children.filter(element => (
-        ~element.container_type.indexOf('analyses')
-      ));
-
-      if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
-        return (
-          <div>
-            <div style={{ marginBottom: '10px' }}>
-              &nbsp;{this.addButton()}
-            </div>
-            <PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={activeContainer} onSelect={this.handleAccordionOpen} accordion>
-              {analyses_container[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Panel
-                      eventKey={key}
-                      key={`reaction_container_deleted_${container.id}`}
-                    >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                    </Panel>
-                  );
-                }
-
-                return (
-                  <Panel
-                    eventKey={key}
-                    key={`reaction_container_${container.id}`}
-                  >
-                    <Panel.Heading>
-                      <Panel.Title toggle>
-                        {containerHeader(container)}
-                      </Panel.Title>
-                    </Panel.Heading>
-                    <Panel.Body collapsible="true">
-                      <ContainerComponent
-                        disabled={readOnly}
-                        readOnly={readOnly}
-                        templateType="reaction"
-                        container={container}
-                        onChange={this.handleChange.bind(this, container)}
-                      />
-                      <ViewSpectra
-                        sample={reaction}
-                        handleSampleChanged={this.handleSpChange}
-                        handleSubmit={this.props.handleSubmit}
-                      />
-                      <NMRiumDisplayer
-                        sample={reaction}
-                        handleSampleChanged={this.handleSpChange}
-                        handleSubmit={this.props.handleSubmit}
-                      />
-                    </Panel.Body>
-                  </Panel>
-                );
-              })}
-            </PanelGroup>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          style={{ marginBottom: '10px' }}
-          className="noAnalyses-warning"
-        >
-          There are currently no Analyses.
-          {this.addButton()}
-        </div>
-      );
-    }
-
-    return (
-      <div className="noAnalyses-warning">
-        There are currently no Analyses.
-      </div>
-    );
-  }
-}
-
-ReactionDetailsContainers.propTypes = {
-  readOnly: PropTypes.bool,
-  parent: PropTypes.object,
-  handleSubmit: PropTypes.func
-};
diff --git a/app/packs/src/components/ReactionDetailsDuration.js b/app/packs/src/components/ReactionDetailsDuration.js
deleted file mode 100644
index 5ec30de36..000000000
--- a/app/packs/src/components/ReactionDetailsDuration.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Row, Col, FormGroup, ControlLabel, FormControl, Button,
-  InputGroup, OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-import 'moment-precise-range-plugin';
-import Clipboard from 'clipboard';
-import { permitOn } from './common/uis';
-import HelpInfo from '../components/common/HelpInfo';
-
-export default class ReactionDetailsDuration extends Component {
-  constructor(props) {
-    super(props);
-    props.reaction.convertDurationDisplay();
-    this.setCurrentTime = this.setCurrentTime.bind(this);
-    this.copyToDuration = this.copyToDuration.bind(this);
-    this.handleDurationChange = this.handleDurationChange.bind(this);
-  }
-
-  componentDidMount() {
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.reaction) { return; }
-    nextProps.reaction.convertDurationDisplay();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  setCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const { reaction } = this.props;
-    const wrappedEvent = { target: { value: currentTime } };
-    this.props.onInputChange(type, wrappedEvent);
-    if (type === 'timestampStart' && (reaction.status === 'Planned' || !reaction.status)) {
-      this.props.onInputChange('status', { target: { value: 'Running' } });
-    } else if (type === 'timestampStop' && reaction.status === 'Running') {
-      this.props.onInputChange('status', { target: { value: 'Done' } });
-    }
-  }
-
-  changeDurationUnit() {
-    this.props.onInputChange('duration', { nextUnit: true });
-  }
-
-  copyToDuration() {
-    this.props.onInputChange('duration', { fromStartStop: true });
-  }
-
-  handleDurationChange(event) {
-    const nextValue = event.target.value && event.target.value.replace(',', '.');
-    if (!isNaN(nextValue) || nextValue === '') {
-      this.props.onInputChange('duration', { nextValue });
-    }
-  }
-
-  render() {
-    const { reaction } = this.props;
-    const durationCalc = reaction && reaction.durationCalc();
-    const timePlaceholder = 'DD/MM/YYYY hh:mm:ss';
-    return (
-      <Row className="small-padding">
-        <Col md={3} sm={6}>
-          <FormGroup>
-            <ControlLabel>Start</ControlLabel>
-            <InputGroup>
-              <FormControl
-                type="text"
-                value={reaction.timestamp_start || ''}
-                disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_start')}
-                placeholder={timePlaceholder}
-                onChange={event => this.props.onInputChange('timestampStart', event)}
-              />
-              <InputGroup.Button>
-                <Button disabled={!permitOn(reaction)} active style={{ padding: '6px' }} onClick={() => this.setCurrentTime('timestampStart')}>
-                  <i className="fa fa-clock-o" aria-hidden="true" />
-                </Button>
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </Col>
-        <Col md={3} sm={6}>
-          <FormGroup>
-            <ControlLabel>Stop</ControlLabel>
-            <InputGroup>
-              <FormControl
-                type="text"
-                value={reaction.timestamp_stop || ''}
-                disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_stop')}
-                placeholder={timePlaceholder}
-                onChange={event => this.props.onInputChange('timestampStop', event)}
-              />
-              <InputGroup.Button>
-                <Button disabled={!permitOn(reaction)} active style={{ padding: '6px' }} onClick={() => this.setCurrentTime('timestampStop')}>
-                  <i className="fa fa-clock-o" aria-hidden="true" />
-                </Button>
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </Col>
-        <Col md={3} sm={6}>
-          <FormGroup>
-            {reaction.is_published ? <ControlLabel>Duration</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Duration</ControlLabel>} source="requiredField" />}
-            <InputGroup>
-              <FormControl type="text" value={durationCalc || ''} disabled placeholder="Duration" />
-              <InputGroup.Button>
-                <OverlayTrigger
-                  placement="bottom"
-                  overlay={<Tooltip id="copy_duration_to_clipboard">copy to clipboard</Tooltip>}
-                >
-                  <Button disabled={!permitOn(reaction)} active className="clipboardBtn" data-clipboard-text={durationCalc || ' '}>
-                    <i className="fa fa-clipboard" aria-hidden="true" />
-                  </Button>
-                </OverlayTrigger>
-                <OverlayTrigger
-                  placement="bottom"
-                  overlay={<Tooltip id="copy_durationCalc_to_duration">use this duration<br />(rounded to precision 1)</Tooltip>}
-                >
-                  <Button disabled={!permitOn(reaction)} active className="clipboardBtn" onClick={() => this.copyToDuration()}>
-                    <i className="fa fa-arrow-right" aria-hidden="true" />
-                  </Button>
-                </OverlayTrigger>
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </Col>
-        <Col md={3} sm={6}>
-          <FormGroup>
-            <ControlLabel>&nbsp;</ControlLabel>
-            <InputGroup>
-              <FormControl
-                disabled={!permitOn(reaction)}
-                type="text"
-                value={reaction.durationDisplay.dispValue || ''}
-                inputRef={this.refDuration}
-                placeholder="Input Duration..."
-                onChange={event => this.handleDurationChange(event)}
-              />
-              <InputGroup.Button>
-                <OverlayTrigger placement="bottom" overlay={<Tooltip id="switch_duration_unit">switch duration unit</Tooltip>}>
-                  <Button disabled={!permitOn(reaction)} bsStyle="success" onClick={() => this.changeDurationUnit()}>
-                    {reaction.durationUnit}
-                  </Button>
-                </OverlayTrigger>
-              </InputGroup.Button>
-            </InputGroup>
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-ReactionDetailsDuration.propTypes = {
-  reaction: PropTypes.object,
-  onInputChange: PropTypes.func
-};
-
-ReactionDetailsDuration.defaultProps = {
-  reaction: {},
-  onInputChange: () => {}
-};
diff --git a/app/packs/src/components/ReactionDetailsMainProperties.js b/app/packs/src/components/ReactionDetailsMainProperties.js
deleted file mode 100644
index 280009069..000000000
--- a/app/packs/src/components/ReactionDetailsMainProperties.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Col,
-  FormGroup,
-  FormControl,
-  ControlLabel,
-  OverlayTrigger,
-  Button,
-  Tooltip,
-  InputGroup,
-  Grid,
-  Row
-} from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import Reaction from 'src/models/Reaction';
-import { statusOptions } from 'src/components/staticDropdownOptions/options';
-import LineChartContainer from 'src/components/lineChart/LineChartContainer';
-import EditableTable from 'src/components/lineChart/EditableTable';
-import { permitOn } from 'src/components/common/uis';
-
-// For REPO
-import HelpInfo from 'src/components/common/HelpInfo';
-
-export default class ReactionDetailsMainProperties extends Component {
-  constructor(props) {
-    super(props);
-    const { temperature } = props && props.reaction;
-    this.state = {
-      showTemperatureChart: false,
-      temperature,
-    };
-    this.toggleTemperatureChart = this.toggleTemperatureChart.bind(this);
-    this.updateTemperature = this.updateTemperature.bind(this);
-    this.temperatureUnit = props.reaction.temperature.valueUnit;
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      temperature: nextProps.reaction.temperature,
-    });
-
-    this.temperatureUnit = nextProps.reaction.temperature.valueUnit;
-  }
-
-  updateTemperature(newData) {
-    const { temperature } = this.state;
-    temperature.data = newData;
-    this.setState({ temperature });
-    this.props.onInputChange('temperatureData', temperature);
-  }
-
-  toggleTemperatureChart() {
-    const { showTemperatureChart } = this.state;
-    this.setState({ showTemperatureChart: !showTemperatureChart });
-  }
-
-  changeUnit() {
-    const index = Reaction.temperature_unit.indexOf(this.temperatureUnit);
-    const unit = Reaction.temperature_unit[(index + 1) % 3];
-    this.props.onInputChange('temperatureUnit', unit);
-  }
-
-  render() {
-    const { reaction, onInputChange } = this.props;
-    const temperatureTooltip = (
-      <Tooltip id="show_temperature">Show temperature chart</Tooltip>
-    );
-
-    const temperatureDisplay = reaction.temperature_display;
-    const { showTemperatureChart, temperature } = this.state;
-    const tempUnitLabel = `Temperature (${this.temperatureUnit})`;
-
-    let TempChartRow = <span />;
-    if (showTemperatureChart) {
-      TempChartRow = (
-        <Col md={12}>
-          <div style={{ width: '74%', float: 'left' }}>
-            <LineChartContainer
-              data={temperature}
-              xAxis="Time"
-              yAxis={tempUnitLabel}
-            />
-          </div>
-          <div style={{ width: '25%', float: 'left' }}>
-            <EditableTable
-              temperature={temperature}
-              updateTemperature={this.updateTemperature}
-            />
-          </div>
-        </Col>
-      );
-    }
-
-    return (
-      <Grid fluid style={{ paddingLeft: 'unset' }}>
-        <Row>
-          <Col md={6}>
-            <FormGroup>
-              <ControlLabel>Name</ControlLabel>
-              <FormControl
-                id={uuid.v4()}
-                name="reaction_name"
-                type="text"
-                value={reaction.name || ''}
-                placeholder="Name..."
-                disabled={!permitOn(reaction) || reaction.isMethodDisabled('name')}
-                onChange={event => onInputChange('name', event)}
-              />
-            </FormGroup>
-          </Col>
-          <Col md={3}>
-            <FormGroup>
-              <ControlLabel>Status</ControlLabel>
-              <Select
-                className="status-select reaction-status-change"
-                name="status"
-                key={reaction.status}
-                multi={false}
-                options={statusOptions}
-                value={reaction.status}
-                disabled={!permitOn(reaction) || reaction.isMethodDisabled('status')}
-                onChange={(event) => {
-                  const wrappedEvent = {
-                    target: { value: event && event.value },
-                  };
-                  onInputChange('status', wrappedEvent);
-                }}
-              />
-            </FormGroup>
-          </Col>
-          <Col md={3}>
-            <FormGroup>
-              {reaction.is_published ? <ControlLabel>Temperature</ControlLabel> : <HelpInfo optionalElement={<ControlLabel>Temperature</ControlLabel>} source="requiredField" />}
-              <InputGroup>
-                <InputGroup.Button>
-                  <OverlayTrigger placement="bottom" overlay={temperatureTooltip}>
-                    <Button
-                      disabled={!permitOn(reaction)}
-                      active
-                      className="clipboardBtn"
-                      onClick={this.toggleTemperatureChart}
-                    >
-                      <i className="fa fa-area-chart" />
-                    </Button>
-                  </OverlayTrigger>
-                </InputGroup.Button>
-                <FormControl
-                  type="text"
-                  value={temperatureDisplay || ''}
-                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('temperature')}
-                  placeholder="Temperature..."
-                  onChange={event => onInputChange('temperature', event)}
-                />
-                <InputGroup.Button>
-                  <Button
-                    disabled={!permitOn(reaction)}
-                    bsStyle="success"
-                    onClick={() => this.changeUnit()}
-                  >
-                    {this.temperatureUnit}
-                  </Button>
-                </InputGroup.Button>
-              </InputGroup>
-            </FormGroup>
-          </Col>
-        </Row>
-        <Row>
-          {TempChartRow}
-        </Row>
-      </Grid>
-    );
-  }
-}
-
-ReactionDetailsMainProperties.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  reaction: PropTypes.object,
-  onInputChange: PropTypes.func
-};
-
-ReactionDetailsMainProperties.defaultProps = {
-  reaction: {},
-  onInputChange: () => {}
-};
diff --git a/app/packs/src/components/ReactionDetailsProperties.js b/app/packs/src/components/ReactionDetailsProperties.js
deleted file mode 100644
index 6945dba3d..000000000
--- a/app/packs/src/components/ReactionDetailsProperties.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Row, Col, FormGroup, ControlLabel, FormControl, MenuItem,
-  ListGroupItem, ListGroup, InputGroup, DropdownButton
-} from 'react-bootstrap';
-import Select from 'react-select';
-import 'moment-precise-range-plugin';
-import Clipboard from 'clipboard';
-import { dangerousProductsOptions } from './staticDropdownOptions/options';
-import ReactionDetailsMainProperties from './ReactionDetailsMainProperties';
-import StringTag from './StringTag';
-import { solventsTL } from './utils/reactionPredefined';
-import OlsTreeSelect from './OlsComponent';
-import { permitOn } from './common/uis';
-import HelpInfo from '../components/common/HelpInfo';
-
-export default class ReactionDetailsProperties extends Component {
-  constructor(props) {
-    super(props);
-    props.reaction.convertDurationDisplay();
-
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.handleOnReactionChange = this.handleOnReactionChange.bind(this);
-    this.handleOnSolventSelect = this.handleOnSolventSelect.bind(this);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.reaction) { return; }
-    nextProps.reaction.convertDurationDisplay();
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  handleOnReactionChange(reaction) {
-    this.props.onReactionChange(reaction);
-  }
-
-  handleMultiselectChange(type, selectedOptions) {
-    const values = selectedOptions.map(option => option.value);
-    const wrappedEvent = { target: { value: values } };
-    this.props.onInputChange(type, wrappedEvent);
-  }
-
-  handleOnSolventSelect(eventKey) {
-    const { reaction } = this.props;
-
-    let val;
-    if (eventKey > solventsTL.length) {
-      val = '';
-    } else {
-      const key = Object.keys(solventsTL[eventKey])[0];
-      val = solventsTL[eventKey][key];
-    }
-
-    reaction.tlc_solvents = val;
-    this.handleOnReactionChange(reaction);
-  }
-
-  render() {
-    const { reaction } = this.props;
-    const solventsItems = solventsTL.map((x, i) => {
-      const val = Object.keys(x)[0];
-      return (
-        <MenuItem key={i} eventKey={i}>
-          <StringTag key={i} string={val} />
-        </MenuItem>
-      )
-    });
-
-    solventsItems.unshift(
-      <MenuItem key={solventsTL.length + 1} eventKey={solventsTL.length + 1}>
-        -
-      </MenuItem>
-    );
-
-    return (
-      <div>
-        <ListGroup>
-          <ListGroupItem>
-            <div className="reaction-scheme-props">
-              <ReactionDetailsMainProperties
-                reaction={reaction}
-                onInputChange={(type, event) => this.props.onInputChange(type, event)}
-              />
-            </div>
-            <FormGroup>
-              {reaction.is_published ? <ControlLabel>Type (Name Reaction Ontology)</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Type (Name Reaction Ontology)</ControlLabel>} source="requiredField" />}
-              <OlsTreeSelect
-                selectName="rxno"
-                selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
-                onSelectChange={event => this.props.onInputChange('rxno', event.trim())}
-                selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
-              />
-            </FormGroup>
-            <Row>
-              <Col md={12}>
-                <div><b>Dangerous Products</b></div>
-                <Select
-                  name="dangerous_products"
-                  multi
-                  options={dangerousProductsOptions}
-                  value={reaction.dangerous_products}
-                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('dangerous_products')}
-                  onChange={selectedOptions => this.handleMultiselectChange('dangerousProducts', selectedOptions)}
-                />
-              </Col>
-            </Row>
-          </ListGroupItem>
-          <ListGroupItem>
-            <h4 className="list-group-item-heading" >TLC-Control</h4>
-            <Row>
-              <Col md={6}>
-                <FormGroup>
-                  <ControlLabel>Solvents (parts)</ControlLabel>
-                  <FormGroup>
-                    <InputGroup>
-                      <DropdownButton
-                        disabled={!permitOn(reaction)}
-                        componentClass={InputGroup.Button}
-                        id="solvents_dd"
-                        title=""
-                        onSelect={this.handleOnSolventSelect}
-                      >
-                        { solventsItems }
-                      </DropdownButton>
-                      <FormControl
-                        style={{ zIndex: 0 }}
-                        type="text"
-                        value={reaction.tlc_solvents || ''}
-                        disabled={!permitOn(reaction) || reaction.isMethodDisabled('tlc_solvents')}
-                        placeholder="Solvents as parts..."
-                        onChange={event => this.props.onInputChange('tlc_solvents', event)}
-                      />
-                    </InputGroup>
-                  </FormGroup>
-                </FormGroup>
-              </Col>
-              <Col md={6}>
-                <FormGroup>
-                  <ControlLabel>Rf-Value</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={reaction.rf_value || ''}
-                    disabled={!permitOn(reaction) || reaction.isMethodDisabled('rf_value')}
-                    placeholder="Rf-Value..."
-                    onChange={event => this.props.onInputChange('rfValue', event)}
-                  />
-                </FormGroup>
-              </Col>
-            </Row>
-            <Row>
-              <Col md={12}>
-                <FormGroup>
-                  <ControlLabel>TLC-Description</ControlLabel>
-                  <FormControl
-                    componentClass="textarea"
-                    value={reaction.tlc_description || ''}
-                    disabled={!permitOn(reaction) || reaction.isMethodDisabled('tlc_description')}
-                    placeholder="TLC-Description..."
-                    onChange={event => this.props.onInputChange('tlcDescription', event)}
-                  />
-                </FormGroup>
-              </Col>
-            </Row>
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-}
-
-ReactionDetailsProperties.propTypes = {
-  reaction: PropTypes.object,
-  onReactionChange: PropTypes.func,
-  onInputChange: PropTypes.func
-};
diff --git a/app/packs/src/components/ReactionDetailsPurification.js b/app/packs/src/components/ReactionDetailsPurification.js
deleted file mode 100644
index 2aa1a67d0..000000000
--- a/app/packs/src/components/ReactionDetailsPurification.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, FormGroup } from 'react-bootstrap';
-import Select from 'react-select';
-import 'moment-precise-range-plugin';
-import { purificationOptions } from './staticDropdownOptions/options';
-import MaterialGroupContainer from './MaterialGroupContainer';
-import QuillEditor from './QuillEditor';
-import QuillViewer from './QuillViewer';
-import Sample from './models/Sample';
-import { observationPurification, solventsTL } from './utils/reactionPredefined';
-import { permitOn } from './common/uis';
-import PrivateNoteElement from './PrivateNoteElement';
-import HelpInfo from '../components/common/HelpInfo';
-
-function dummy() { return true; }
-
-export default class ReactionDetailsPurification extends Component {
-  constructor(props) {
-    super(props);
-    this.handlePurificationChange = this.handlePurificationChange.bind(this);
-    this.handleOnReactionChange = this.handleOnReactionChange.bind(this);
-    this.handleOnSolventSelect = this.handleOnSolventSelect.bind(this);
-    this.handlePSolventChange = this.handlePSolventChange.bind(this);
-    this.deletePSolvent = this.deletePSolvent.bind(this);
-    this.dropPSolvent = this.dropPSolvent.bind(this);
-  }
-
-  handleOnReactionChange(reaction) {
-    this.props.onReactionChange(reaction);
-  }
-
-  handlePurificationChange(selected) {
-    if (selected.length === 0) {
-      return this.handleMultiselectChange('purification', selected);
-    }
-
-    const obs = observationPurification;
-    const { reaction } = this.props;
-
-    const selectedVal = selected[selected.length - 1].value;
-    const predefinedObs = obs.filter(x =>
-      Object.keys(x).filter(k =>
-        k.toLowerCase().localeCompare(selectedVal.toLowerCase()) === 0,
-      ).length > 0,
-    );
-
-    if (predefinedObs.length > 0) {
-      const values = selected.map(option => option.value);
-      reaction.purification = values;
-
-      const predefined = predefinedObs[0][selectedVal.toLowerCase()];
-      reaction.concat_text_observation(predefined);
-
-      this.handleOnReactionChange(reaction);
-    } else {
-      this.handleMultiselectChange('purification', selected);
-    }
-
-    return 0;
-  }
-
-  handlePSolventChange(changeEvent) {
-    const { sampleID, amount } = changeEvent;
-    const { reaction, onReactionChange } = this.props;
-    const updatedSample = reaction.sampleById(sampleID);
-    updatedSample.setAmount(amount);
-    onReactionChange(reaction);
-  }
-
-  deletePSolvent(material) {
-    const { reaction, onReactionChange } = this.props;
-    reaction.deleteMaterial(material, 'purification_solvents');
-    onReactionChange(reaction);
-  }
-
-  dropPSolvent(srcSample, tagMaterial, tagGroup, extLabel) {
-    const { reaction, onReactionChange } = this.props;
-    const splitSample = Sample.buildNew(srcSample, reaction.collection_id, tagGroup);
-    splitSample.short_label = tagGroup.slice(0, -1);
-    splitSample.external_label = extLabel;
-    reaction.addMaterialAt(splitSample, null, tagMaterial, tagGroup);
-    onReactionChange(reaction, { schemaChanged: true });
-  }
-
-  handleMultiselectChange(type, selectedOptions) {
-    const values = selectedOptions.map(option => option.value);
-    const wrappedEvent = { target: { value: values } };
-    this.props.onInputChange(type, wrappedEvent);
-  }
-
-  handleOnSolventSelect(eventKey) {
-    const { reaction } = this.props;
-    let val;
-    if (eventKey > solventsTL.length) {
-      val = '';
-    } else {
-      const key = Object.keys(solventsTL[eventKey])[0];
-      val = solventsTL[eventKey][key];
-    }
-    reaction.tlc_solvents = val;
-    this.handleOnReactionChange(reaction);
-  }
-
-  render() {
-    const { reaction, onInputChange, additionQuillRef } = this.props;
-    return (
-      <span>
-        <Row>
-          <Col md={12}>
-            <div><b>Purification</b></div>
-            <Select
-              className="status-select"
-              style={{ zIndex: 10 }}
-              name="purification"
-              multi
-              disabled={!permitOn(reaction) || reaction.isMethodDisabled('purification')}
-              options={purificationOptions}
-              onChange={this.handlePurificationChange}
-              value={reaction.purification}
-            />
-          </Col>
-        </Row>
-        <Row style={{ marginTop: '10px' }}>
-          <Col md={12}>
-            <div><b>Purification Solvents</b></div>
-            <MaterialGroupContainer
-              reaction={reaction}
-              materialGroup="purification_solvents"
-              materials={reaction.purification_solvents}
-              dropMaterial={dummy}
-              deleteMaterial={this.deletePSolvent}
-              dropSample={this.dropPSolvent}
-              showLoadingColumn={!!reaction.hasPolymers()}
-              onChange={this.handlePSolventChange}
-              headIndex={0}
-            />
-          </Col>
-        </Row>
-        <Row style={{ marginTop: '10px' }}>
-          <Col md={12}>
-            <FormGroup>
-              <div><b>Additional information for publication and purification details</b>&nbsp;<HelpInfo source={reaction.is_published ? 'x' : 'additionalInformation'} place="right" /></div>
-              <div className="quill-resize">
-                {
-                  permitOn(reaction) ?
-                    <QuillEditor
-                      ref={additionQuillRef}
-                      value={reaction.observation}
-                      height="100%"
-                      disabled={!permitOn(reaction) || reaction.isMethodDisabled('observation')}
-                      onChange={event => onInputChange('observation', event)}
-                    /> : <QuillViewer value={reaction.observation} />
-                }
-              </div>
-            </FormGroup>
-            <PrivateNoteElement element={reaction} disabled={!reaction.can_update} />
-          </Col>
-        </Row>
-      </span>
-    );
-  }
-}
-
-ReactionDetailsPurification.propTypes = {
-  reaction: PropTypes.object,
-  onReactionChange: PropTypes.func,
-  onInputChange: PropTypes.func,
-  additionQuillRef: PropTypes.object
-};
-
-ReactionDetailsPurification.defaultProps = {
-  reaction: {},
-  onReactionChange: () => {},
-  onInputChange: () => {},
-  additionQuillRef: {}
-};
diff --git a/app/packs/src/components/ReactionDetailsRepoComment.js b/app/packs/src/components/ReactionDetailsRepoComment.js
deleted file mode 100644
index cc218ffaa..000000000
--- a/app/packs/src/components/ReactionDetailsRepoComment.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import ReviewStore from '../components/stores/ReviewStore';
-import ReviewActions from '../components/actions/ReviewActions';
-import RepoReactionDetails from '../libHome/RepoReactionDetails';
-
-export default class ReactionDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      reaction: null
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    ReviewStore.listen(this.onStoreChange);
-    ReviewActions.displayReviewReaction(this.props.reactionId);
-  }
-
-  componentWillUnmount() {
-    ReviewStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleReviewUpdate(review) {
-    this.setState({ review });
-  }
-
-  render() {
-    const { reaction, review_info } = this.state;
-    return reaction && reaction.publication ?
-      (
-        <RepoReactionDetails
-          reaction={reaction}
-          canComment
-          review_info={review_info}
-          onReviewUpdate={this.handleReviewUpdate}
-          review={this.state.review || {}}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-ReactionDetailsRepoComment.propTypes = {
-  reactionId: PropTypes.number.isRequired,
-};
diff --git a/app/packs/src/components/ReactionDetailsScheme.js b/app/packs/src/components/ReactionDetailsScheme.js
deleted file mode 100644
index 5ee6f11fb..000000000
--- a/app/packs/src/components/ReactionDetailsScheme.js
+++ /dev/null
@@ -1,1004 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  ListGroup, ListGroupItem, FormGroup, ControlLabel, FormControl,
-  Row, Col, Collapse, Button, ButtonGroup
-} from 'react-bootstrap';
-import Select from 'react-select';
-import Delta from 'quill-delta';
-import MaterialGroupContainer from 'src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroupContainer';
-import Sample from 'src/models/Sample';
-import Reaction from 'src/models/Reaction';
-import Molecule from 'src/models/Molecule';
-import ReactionDetailsMainProperties from 'src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties';
-import ReactionDetailsPurification from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification';
-
-import QuillViewer from 'src/components/QuillViewer';
-import ReactionDescriptionEditor from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDescriptionEditor';
-
-import GeneralProcedureDnd from 'src/apps/mydb/elements/details/reactions/schemeTab/GeneralProcedureDnD';
-import { rolesOptions, conditionsOptions } from 'src/components/staticDropdownOptions/options';
-import OlsTreeSelect from 'src/components/OlsComponent';
-import ReactionDetailsDuration from 'src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration';
-import { permitOn } from 'src/components/common/uis';
-
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
-import TextTemplateStore from 'src/stores/alt/stores/TextTemplateStore';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-
-import HelpInfo from 'src/components/common/HelpInfo';
-
-export default class ReactionDetailsScheme extends Component {
-  constructor(props) {
-    super(props);
-
-    const { reaction } = props;
-
-    const textTemplate = TextTemplateStore.getState().reactionDescription;
-    this.state = {
-      reaction,
-      lockEquivColumn: false,
-      cCon: false,
-      reactionDescTemplate: textTemplate.toJS(),
-      open: true
-    };
-
-    this.reactQuillRef = React.createRef();
-    this.additionQuillRef = React.createRef();
-
-    this.handleTemplateChange = this.handleTemplateChange.bind(this);
-
-    this.onReactionChange = this.onReactionChange.bind(this);
-    this.onChangeRole = this.onChangeRole.bind(this);
-    this.renderRole = this.renderRole.bind(this);
-    this.addSampleTo = this.addSampleTo.bind(this);
-    this.dropMaterial = this.dropMaterial.bind(this);
-    this.dropSample = this.dropSample.bind(this);
-    this.switchEquiv = this.switchEquiv.bind(this);
-    this.handleOnConditionSelect = this.handleOnConditionSelect.bind(this);
-    this.updateTextTemplates = this.updateTextTemplates.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateStore.listen(this.handleTemplateChange);
-
-    TextTemplateActions.fetchTextTemplates('reaction');
-    TextTemplateActions.fetchTextTemplates('reactionDescription');
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { reaction } = nextProps;
-    this.setState({ reaction });
-  }
-
-  componentWillUnmount() {
-    TextTemplateStore.unlisten(this.handleTemplateChange);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  updateTextTemplates(textTemplate) {
-    TextTemplateActions.updateTextTemplates('reactionDescription', textTemplate);
-  }
-
-  dropSample(srcSample, tagMaterial, tagGroup, extLabel, isNewSample = false) {
-    const { reaction } = this.state;
-    let splitSample;
-
-    if (srcSample instanceof Molecule || isNewSample) {
-      // Create new Sample with counter
-      splitSample = Sample.buildNew(srcSample, reaction.collection_id, tagGroup);
-    } else if (srcSample instanceof Sample) {
-      if (tagGroup === 'reactants' || tagGroup === 'solvents') {
-        // Skip counter for reactants or solvents
-        splitSample = srcSample.buildChildWithoutCounter();
-        splitSample.short_label = tagGroup.slice(0, -1);
-      } else {
-        splitSample = srcSample.buildChild();
-      }
-    }
-    splitSample.show_label = (splitSample.decoupled && !splitSample.molfile) ? true : splitSample.show_label;
-    if (tagGroup == 'solvents') {
-      splitSample.reference = false;
-    }
-
-    this.insertSolventExtLabel(splitSample, tagGroup, extLabel);
-    reaction.addMaterialAt(splitSample, null, tagMaterial, tagGroup);
-    this.onReactionChange(reaction, { schemaChanged: true });
-  }
-
-  insertSolventExtLabel(splitSample, materialGroup, external_label) {
-    if (external_label && materialGroup === 'solvents' && !splitSample.external_label) {
-      splitSample.external_label = external_label;
-    }
-  }
-
-  onChangeRole(e) {
-    const { onInputChange } = this.props;
-    const value = e && e.value;
-    onInputChange('role', value);
-  }
-
-  switchEquiv() {
-    const { lockEquivColumn } = this.state;
-    this.setState({ lockEquivColumn: !lockEquivColumn });
-  }
-
-  handleOnConditionSelect(eventKey) {
-    const { reaction } = this.props;
-    const val = eventKey.value;
-    if (reaction.conditions == null || reaction.conditions.length === 0) {
-      reaction.conditions = `${val} `;
-    } else {
-      reaction.conditions += `\n${val} `;
-    }
-    this.props.onReactionChange(reaction, { schemaChanged: true });
-  }
-
-  renderGPDnD() {
-    const { reaction } = this.props;
-    return (
-      <GeneralProcedureDnd
-        reaction={reaction}
-      />
-    );
-  }
-
-  renderRolesOptions(opt) {
-    const className = `fa ${opt.icon} ${opt.bsStyle}`;
-    return (
-      <span>
-        <i className={className} />
-        <span className="spacer-10" />
-        {opt.label}
-      </span>
-    );
-  }
-
-  renderRoleSelect() {
-    const { role } = this.props.reaction;
-    return (
-      <Select
-        disabled={!permitOn(this.props.reaction)}
-        name="role"
-        options={rolesOptions}
-        optionRenderer={this.renderRolesOptions}
-        multi={false}
-        clearable
-        value={role}
-        onChange={this.onChangeRole}
-      />
-    );
-  }
-
-  renderRole() {
-    const { role } = this.props.reaction;
-    const accordTo = role === 'parts' ? 'According to' : null;
-    return (
-      <span>
-        <Col md={3} style={{ paddingLeft: '6px' }}>
-          <FormGroup>
-            <ControlLabel>Role</ControlLabel>
-            {this.renderRoleSelect()}
-          </FormGroup>
-        </Col>
-        <Col md={3} style={{ paddingLeft: '6px' }}>
-          <FormGroup>
-            <ControlLabel>{accordTo}</ControlLabel>
-            {this.renderGPDnD()}
-          </FormGroup>
-        </Col>
-      </span>
-    );
-  }
-
-  deleteMaterial(material, materialGroup) {
-    const { reaction } = this.state;
-    reaction.deleteMaterial(material, materialGroup);
-
-    // only reference of 'starting_materials' or 'reactants' triggers updatedReactionForReferenceChange
-    // only when reaction.referenceMaterial not exist triggers updatedReactionForReferenceChange
-    const referenceRelatedGroup = ['starting_materials', 'reactants'];
-    if (referenceRelatedGroup.includes(materialGroup) && (!reaction.referenceMaterial)) {
-      if (reaction[materialGroup].length === 0) {
-        const refMaterialGroup = materialGroup === 'starting_materials' ? 'reactants' : 'starting_materials';
-        if (reaction[refMaterialGroup].length > 0) {
-          const event = {
-            type: 'referenceChanged',
-            refMaterialGroup,
-            sampleID: reaction[refMaterialGroup][0].id,
-            value: 'on'
-          };
-          this.updatedReactionForReferenceChange(event);
-        }
-      } else {
-        const event = {
-          type: 'referenceChanged',
-          materialGroup,
-          sampleID: reaction[materialGroup][0].id,
-          value: 'on'
-        };
-        this.updatedReactionForReferenceChange(event);
-      }
-    }
-
-    this.onReactionChange(reaction, { schemaChanged: true });
-  }
-
-  dropMaterial(srcMat, srcGroup, tagMat, tagGroup) {
-    const { reaction } = this.state;
-    reaction.moveMaterial(srcMat, srcGroup, tagMat, tagGroup);
-    this.onReactionChange(reaction, { schemaChanged: true });
-  }
-
-  onReactionChange(reaction, options = {}) {
-    this.props.onReactionChange(reaction, options);
-  }
-
-  handleTemplateChange(state) {
-    this.setState({
-      reactionDescTemplate: state.reactionDescription.toJS()
-    });
-  }
-
-  handleMaterialsChange(changeEvent) {
-    switch (changeEvent.type) {
-      case 'referenceChanged':
-        this.onReactionChange(
-          this.updatedReactionForReferenceChange(changeEvent)
-        );
-        break;
-      case 'showLabelChanged':
-        this.onReactionChange(
-          this.updatedReactionForShowLabelChange(changeEvent)
-        );
-        break;
-      case 'amountChanged':
-        this.onReactionChange(
-          this.updatedReactionForAmountChange(changeEvent)
-        );
-        break;
-      case 'amountUnitChanged':
-        this.onReactionChange(
-          this.updatedReactionForAmountUnitChange(changeEvent)
-        );
-        break;
-      case 'MetricsChanged':
-        this.onReactionChange(
-          this.updatedReactionForMetricsChange(changeEvent)
-        );
-        break;
-      case 'loadingChanged':
-        this.onReactionChange(
-          this.updatedReactionForLoadingChange(changeEvent)
-        );
-        break;
-      case 'coefficientChanged':
-        this.onReactionChange(
-          this.updatedReactionForCoefficientChange(changeEvent)
-        );
-        break;
-      case 'amountTypeChanged':
-        this.onReactionChange(
-          this.updatedReactionForAmountTypeChange(changeEvent)
-        );
-        break;
-      case 'equivalentChanged':
-        this.onReactionChange(
-          this.updatedReactionForEquivalentChange(changeEvent)
-        );
-        break;
-      case 'externalLabelChanged':
-        this.onReactionChange(
-          this.updatedReactionForExternalLabelChange(changeEvent)
-        );
-        break;
-      case 'drysolventChanged':
-        this.onReactionChange(
-          this.updatedReactionForDrySolventChange(changeEvent)
-        );
-        break;
-      case 'externalLabelCompleted':
-        const { reaction } = this.state;
-        this.onReactionChange(reaction, { schemaChanged: true });
-        break;
-      case 'addToDesc':
-        this.addSampleTo(changeEvent, 'description');
-        this.addSampleTo(changeEvent, 'observation');
-        break;
-      default:
-        break;
-    }
-  }
-
-  addSampleTo(e, type) {
-    const { paragraph } = e;
-    let quillEditor = this.reactQuillRef.current.editor;
-    if (type === 'observation') quillEditor = this.additionQuillRef.current.editor;
-    const range = quillEditor.getSelection();
-    if (range) {
-      let contents = quillEditor.getContents();
-      let insertOps = [{ insert: paragraph }];
-      const insertDelta = new Delta(insertOps);
-      if (range.index > 0) {
-        insertOps = [{ retain: range.index }].concat(insertOps);
-      }
-      const elementDelta = new Delta(insertOps);
-      contents = contents.compose(elementDelta);
-      quillEditor.setContents(contents);
-      range.length = 0;
-      range.index += insertDelta.length();
-      quillEditor.setSelection(range);
-      this.props.onInputChange(type, new Delta(contents));
-    }
-  }
-
-  updatedReactionForExternalLabelChange(changeEvent) {
-    const { sampleID, externalLabel } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.external_label = externalLabel;
-
-    return this.updatedReactionWithSample(this.updatedSamplesForExternalLabelChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForDrySolventChange(changeEvent) {
-    const { sampleID, dry_solvent } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.dry_solvent = dry_solvent;
-
-    return this.updatedReactionWithSample(this.updatedSamplesForDrySolventChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForReferenceChange(changeEvent) {
-    const { sampleID } = changeEvent;
-    const { reaction } = this.state;
-    const sample = reaction.sampleById(sampleID);
-
-    reaction.markSampleAsReference(sampleID);
-
-    return this.updatedReactionWithSample(this.updatedSamplesForReferenceChange.bind(this), sample);
-  }
-
-  updatedReactionForShowLabelChange(changeEvent) {
-    const { sampleID, value } = changeEvent;
-    const { reaction } = this.state;
-    const sample = reaction.sampleById(sampleID);
-
-    reaction.toggleShowLabelForSample(sampleID);
-    this.onReactionChange(reaction, { schemaChanged: true });
-
-    return this.updatedReactionWithSample(this.updatedSamplesForShowLabelChange.bind(this), sample);
-  }
-
-  updatedReactionForAmountChange(changeEvent) {
-    const { sampleID, amount } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    // normalize to milligram
-    updatedSample.setAmountAndNormalizeToGram(amount);
-
-    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForAmountUnitChange(changeEvent) {
-    const { sampleID, amount } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-    // normalize to milligram
-    // updatedSample.setAmountAndNormalizeToGram(amount);
-    updatedSample.setAmount(amount);
-
-    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForMetricsChange(changeEvent) {
-    const { sampleID, metricUnit, metricPrefix } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-    updatedSample.setUnitMetrics(metricUnit, metricPrefix);
-
-    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForLoadingChange(changeEvent) {
-    const { sampleID, amountType } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.amountType = amountType;
-
-    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForAmountTypeChange(changeEvent) {
-    const { sampleID, amountType } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.amountType = amountType;
-
-    return this.updatedReactionWithSample(this.updatedSamplesForAmountChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForCoefficientChange(changeEvent) {
-    const { sampleID, coefficient } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.coefficient = coefficient;
-    this.updatedReactionForEquivalentChange(changeEvent);
-
-    return this.updatedReactionWithSample(this.updatedSamplesForCoefficientChange.bind(this), updatedSample);
-  }
-
-  updatedReactionForEquivalentChange(changeEvent) {
-    const { sampleID, equivalent } = changeEvent;
-    const updatedSample = this.props.reaction.sampleById(sampleID);
-
-    updatedSample.equivalent = equivalent;
-
-    return this.updatedReactionWithSample(this.updatedSamplesForEquivalentChange.bind(this), updatedSample);
-  }
-
-  calculateEquivalent(refM, updatedSample) {
-    if (!refM.contains_residues) {
-      NotificationActions.add({
-        message: 'Cannot perform calculations for loading and equivalent',
-        level: 'error'
-      });
-
-      return 1.0;
-    }
-
-    if (!refM.loading) {
-      NotificationActions.add({
-        message: 'Please set non-zero starting material loading',
-        level: 'error'
-      });
-
-      return 0.0;
-    }
-
-    let loading = refM.residues[0].custom_info.loading;
-    let mass_koef = updatedSample.amount_g / refM.amount_g;
-    let mwb = updatedSample.molecule.molecular_weight;
-    let mwa = refM.molecule.molecular_weight;
-    let mw_diff = mwb - mwa;
-    let equivalent = (1000.0 / loading) * (mass_koef - 1.0) / mw_diff;
-
-    if (equivalent < 0.0 || equivalent > 1.0 || isNaN(equivalent) || !isFinite(equivalent)) {
-      equivalent = 1.0;
-    }
-
-    return equivalent;
-  }
-
-  checkMassMolecule(referenceM, updatedS) {
-    let errorMsg;
-    let mFull;
-    const mwb = updatedS.decoupled ? (updatedS.molecular_mass || 0) : updatedS.molecule.molecular_weight;
-
-    // mass check apply to 'polymers' only
-    if (!updatedS.contains_residues) {
-      mFull = referenceM.amount_mol * mwb;
-      const maxTheoAmount = mFull * (updatedS.coefficient || 1.0 / referenceM.coefficient || 1.0);
-      if (updatedS.amount_g > maxTheoAmount) {
-        errorMsg = 'Experimental mass value is larger than possible\n' +
-          'by 100% conversion! Please check your data.';
-      }
-    } else {
-      const mwa = referenceM.decoupled ? (referenceM.molecular_mass || 0) : referenceM.molecule.molecular_weight;
-      const deltaM = mwb - mwa;
-      const massA = referenceM.amount_g;
-      mFull = massA + (referenceM.amount_mol * deltaM);
-      const massExperimental = updatedS.amount_g;
-
-      if (deltaM > 0) { // expect weight gain
-        if (massExperimental > mFull) {
-          errorMsg = 'Experimental mass value is larger than possible\n' +
-            'by 100% conversion! Please check your data.';
-        } else if (massExperimental < massA) {
-          errorMsg = 'Material loss! ' +
-            'Experimental mass value is less than possible!\n' +
-            'Please check your data.';
-        }
-      } else if (massExperimental < mFull) { // expect weight loss
-        errorMsg = 'Experimental mass value is less than possible\n' +
-          'by 100% conversion! Please check your data.';
-      }
-    }
-
-    updatedS.maxAmount = mFull;
-
-    if (errorMsg && !updatedS.decoupled) {
-      updatedS.error_mass = true;
-      NotificationActions.add({
-        message: errorMsg,
-        level: 'error',
-      });
-    } else {
-      updatedS.error_mass = false;
-    }
-
-    return { mFull, errorMsg };
-  }
-
-  checkMassPolymer(referenceM, updatedS, massAnalyses) {
-    const equivalent = this.calculateEquivalent(referenceM, updatedS);
-    updatedS.equivalent = equivalent;
-    let fconv_loading = referenceM.amount_mol / updatedS.amount_g * 1000.0;
-    updatedS.residues[0].custom_info['loading_full_conv'] = fconv_loading;
-    updatedS.residues[0].custom_info['loading_type'] = 'mass_diff';
-
-    let newAmountMol;
-
-    if (equivalent < 0.0 || equivalent > 1.0) {
-      updatedS.adjusted_equivalent = equivalent > 1.0 ? 1.0 : 0.0;
-      updatedS.adjusted_amount_mol = referenceM.amount_mol
-      updatedS.adjusted_loading = fconv_loading;
-      updatedS.adjusted_amount_g = updatedS.amount_g;
-      newAmountMol = referenceM.amount_mol;
-    }
-
-    newAmountMol = referenceM.amount_mol * equivalent;
-    const newLoading = (newAmountMol / updatedS.amount_g) * 1000.0;
-
-    updatedS.residues[0].custom_info.loading = newLoading;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  triggerNotification(isDecoupled) {
-    if (!isDecoupled) {
-      const errorMsg = 'Experimental mass value is larger than possible\n'
-      + 'by 100% conversion! Please check your data.';
-      NotificationActions.add({
-        message: errorMsg,
-        level: 'error',
-      });
-    }
-  }
-
-  updatedSamplesForAmountChange(samples, updatedSample, materialGroup) {
-    const { referenceMaterial } = this.props.reaction;
-    const { lockEquivColumn } = this.state;
-    let stoichiometryCoeff = 1.0;
-
-    return samples.map((sample) => {
-      stoichiometryCoeff = (sample.coefficient || 1.0) / (referenceMaterial?.coefficient || 1.0);
-      if (referenceMaterial) {
-        if (sample.id === updatedSample.id) {
-          if (!updatedSample.reference && referenceMaterial.amount_value) {
-            if (materialGroup === 'products') {
-              const massAnalyses = this.checkMassMolecule(referenceMaterial, updatedSample);
-              if (updatedSample.contains_residues) {
-                this.checkMassPolymer(referenceMaterial, updatedSample, massAnalyses);
-                return sample;
-              }
-              sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
-              // yield taking into account stoichiometry:
-              sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol / stoichiometryCoeff;
-            } else {
-              if (!lockEquivColumn) {
-                sample.equivalent = sample.amount_g / sample.maxAmount;
-              } else {
-                if (referenceMaterial && referenceMaterial.amount_value) {
-                  sample.setAmountAndNormalizeToGram({
-                    value: sample.equivalent * referenceMaterial.amount_mol,
-                    unit: 'mol',
-                  });
-                } else if (sample.amount_value) {
-                  sample.setAmountAndNormalizeToGram({
-                    value: sample.equivalent * sample.amount_mol,
-                    unit: 'mol'
-                  });
-                }
-
-              }
-            }
-          } else {
-            if (materialGroup === 'products') {
-              sample.equivalent = 0.0;
-            } else {
-              sample.equivalent = 1.0;
-            }
-          }
-        } else {
-          if (!lockEquivColumn || materialGroup === 'products') {
-            // calculate equivalent, don't touch real amount
-            sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
-            // yield taking into account stoichiometry:
-            sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol / stoichiometryCoeff;
-          } else {
-            //sample.amount_mol = sample.equivalent * referenceMaterial.amount_mol;
-            if (referenceMaterial && referenceMaterial.amount_value) {
-              sample.setAmountAndNormalizeToGram({
-                value: sample.equivalent * referenceMaterial.amount_mol,
-                unit: 'mol',
-              });
-            }
-          }
-        }
-
-        if ((materialGroup === 'starting_materials' || materialGroup === 'reactants') && !sample.reference) {
-          // eslint-disable-next-line no-param-reassign
-          sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol;
-        } else if (materialGroup === 'products' && (sample.equivalent < 0.0 || isNaN(sample.equivalent) || !isFinite(sample.equivalent))) {
-          // if (materialGroup === 'products' && (sample.equivalent < 0.0 || sample.equivalent > 1.0 || isNaN(sample.equivalent) || !isFinite(sample.equivalent))) {
-          // eslint-disable-next-line no-param-reassign
-          sample.equivalent = 1.0;
-        } else if (materialGroup === 'products' && (sample.amount_mol === 0 || referenceMaterial.amount_mol === 0)) {
-          // eslint-disable-next-line no-param-reassign
-          sample.equivalent = 0.0;
-        } else if (materialGroup === 'products' && sample.amount_g > sample.maxAmount) {
-          // eslint-disable-next-line no-param-reassign
-          sample.equivalent = 1;
-          this.triggerNotification(sample.decoupled);
-        }
-      }
-
-      if (materialGroup === 'products') {
-        if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
-          sample.maxAmount = referenceMaterial.amount_mol * stoichiometryCoeff * sample.molecule_molecular_weight;
-        }
-      }
-      return sample;
-    });
-  }
-
-  updatedSamplesForEquivalentChange(samples, updatedSample, materialGroup) {
-    const { referenceMaterial } = this.props.reaction;
-    return samples.map((sample) => {
-      if (sample.id === updatedSample.id && updatedSample.equivalent) {
-        sample.equivalent = updatedSample.equivalent;
-        if (referenceMaterial && referenceMaterial.amount_value) {
-          sample.setAmountAndNormalizeToGram({
-            value: updatedSample.equivalent * referenceMaterial.amount_mol,
-            unit: 'mol',
-          });
-        } else if (sample.amount_value) {
-          sample.setAmountAndNormalizeToGram({
-            value: updatedSample.equivalent * sample.amount_mol,
-            unit: 'mol'
-          });
-        }
-      }
-      if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
-        /* eslint-disable no-param-reassign, no-unused-expressions */
-        if (materialGroup === 'products') {
-          sample.maxAmount = referenceMaterial.amount_mol * (sample.coefficient || 1.0) / (referenceMaterial.coefficient || 1.0) * sample.molecule_molecular_weight;
-          sample.equivalent = sample.maxAmount !== 0 ? (sample.amount_g / sample.maxAmount) : 0;
-          if (sample.amount_g > sample.maxAmount) {
-            sample.equivalent = 1;
-            this.triggerNotification(sample.decoupled);
-          }
-        } else {
-          // NB: sample equivalent independant of coeff
-          if (sample.reference) {
-            sample.equivalent = sample.reference ? 1 : 0;
-          } else {
-            sample.equivalent = sample.amount_mol / referenceMaterial.amount_mol;
-          }
-        }
-      }
-      return sample;
-    });
-  }
-
-  updatedSamplesForExternalLabelChange(samples, updatedSample) {
-    const { referenceMaterial } = this.props.reaction;
-    return samples.map((sample) => {
-      if (sample.id === updatedSample.id) {
-        sample.external_label = updatedSample.external_label;
-      }
-      return sample;
-    });
-  }
-
-  updatedSamplesForDrySolventChange(samples, updatedSample) {
-    const { referenceMaterial } = this.props.reaction;
-
-    return samples.map((sample) => {
-      if (sample.id === updatedSample.id) {
-        sample.dry_solvent = updatedSample.dry_solvent;
-      }
-      return sample;
-    });
-  }
-
-  updatedSamplesForShowLabelChange(samples, referenceMaterial) {
-    return samples;
-  }
-
-  /* eslint-disable class-methods-use-this, no-param-reassign */
-  updatedSamplesForCoefficientChange(samples, updatedSample) {
-    return samples.map((sample) => {
-      if (sample.id === updatedSample.id) {
-        // set sampple.coefficient to default value, if user set coeff. value to zero
-        if (updatedSample.coefficient % 1 !== 0 || updatedSample.coefficient === 0) {
-          updatedSample.coefficient = 1;
-          sample.coefficient = updatedSample.coefficient;
-          NotificationActions.add({
-            message: 'The sample coefficient should be a positive integer',
-            level: 'error'
-          });
-        } else {
-          sample.coefficient = updatedSample.coefficient;
-        }
-        const rId = sample.belongTo ? sample.belongTo.id : null;
-        ElementActions.setRefreshCoefficient(sample.id, sample.coefficient, rId);
-      }
-      return sample;
-    });
-  }
-
-  updatedSamplesForReferenceChange(samples, referenceMaterial, materialGroup) {
-    return samples.map((sample) => {
-      if (sample.id === referenceMaterial.id) {
-        sample.equivalent = 1.0;
-        sample.reference = true;
-      } else {
-        if (sample.amount_value) {
-          const referenceAmount = referenceMaterial.amount_mol;
-          if (referenceMaterial && referenceAmount) {
-            if (materialGroup === 'products') {
-              sample.equivalent = sample.amount_mol * (referenceMaterial.coefficient || 1) / (referenceAmount * (sample.coefficient || 1));
-            } else {
-              sample.equivalent = sample.amount_mol / referenceAmount;
-            }
-          }
-        }
-        sample.reference = false;
-      }
-      return sample;
-    });
-  }
-
-  updatedReactionWithSample(updateFunction, updatedSample) {
-    const { reaction } = this.state;
-    reaction.starting_materials = updateFunction(reaction.starting_materials, updatedSample, 'starting_materials');
-    reaction.reactants = updateFunction(reaction.reactants, updatedSample, 'reactants');
-    reaction.solvents = updateFunction(reaction.solvents, updatedSample, 'solvents');
-    reaction.products = updateFunction(reaction.products, updatedSample, 'products');
-    return reaction;
-  }
-
-  solventCollapseBtn() {
-    const { open } = this.state;
-    const arrow = open
-      ? <i className="fa fa-angle-double-up" />
-      : <i className="fa fa-angle-double-down" />;
-    return (
-      <ButtonGroup vertical block>
-        <Button
-          bsSize="xsmall"
-          style={{ backgroundColor: '#ddd' }}
-          onClick={() => this.setState({ open: !open })}
-        >{arrow} &nbsp; Solvents
-        </Button>
-      </ButtonGroup>
-    );
-  }
-
-  conditionsCollapseBtn() {
-    const { cCon } = this.state;
-    const arrow = cCon
-      ? <i className="fa fa-angle-double-up" />
-      : <i className="fa fa-angle-double-down" />;
-    return (
-      <ButtonGroup vertical block>
-        <Button
-          bsSize="xsmall"
-          style={{ backgroundColor: '#ddd' }}
-          onClick={() => this.setState({ cCon: !cCon })}
-        >{arrow} &nbsp; Conditions
-        </Button>
-      </ButtonGroup>
-    );
-  }
-
-  render() {
-    const {
-      reaction,
-      lockEquivColumn,
-      reactionDescTemplate
-    } = this.state;
-    const minPadding = { padding: '1px 2px 2px 0px' };
-    if (reaction.editedSample !== undefined) {
-      if (reaction.editedSample.amountType === 'target') {
-        this.updatedSamplesForEquivalentChange(reaction.samples, reaction.editedSample);
-      } else { // real amount, so that we update amount in mmol
-        this.updatedSamplesForAmountChange(reaction.samples, reaction.editedSample);
-      }
-      reaction.editedSample = undefined;
-    } else {
-      const { referenceMaterial } = this.props.reaction;
-      reaction.products.map((sample) => {
-        sample.concn = sample.amount_mol / reaction.solventVolume;
-        if (typeof (referenceMaterial) !== 'undefined' && referenceMaterial) {
-          if (sample.contains_residues) {
-            sample.maxAmount = referenceMaterial.amount_g + (referenceMaterial.amount_mol
-              * (sample.molecule.molecular_weight - referenceMaterial.molecule.molecular_weight));
-          }
-        }
-      });
-    }
-
-    if ((typeof (lockEquivColumn) !== 'undefined' && !lockEquivColumn) || !reaction.changed) {
-      reaction.starting_materials.map((sample) => {
-        sample.concn = sample.amount_mol / reaction.solventVolume;
-      });
-      reaction.reactants.map((sample) => {
-        sample.concn = sample.amount_mol / reaction.solventVolume;
-      });
-    }
-
-    // if no reference material then mark first starting material
-    const refM = this.props.reaction.starting_materials[0];
-    if (!this.props.reaction.referenceMaterial && refM) {
-      reaction.markSampleAsReference(refM.id);
-    }
-
-    const headReactants = reaction.starting_materials.length ?? 0;
-
-    return (
-      <div>
-        <ListGroup fill="true">
-          <ListGroupItem style={minPadding}>
-            <MaterialGroupContainer
-              reaction={reaction}
-              materialGroup="starting_materials"
-              materials={reaction.starting_materials}
-              dropMaterial={this.dropMaterial}
-              deleteMaterial={
-                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
-              }
-              dropSample={this.dropSample}
-              showLoadingColumn={!!reaction.hasPolymers()}
-              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
-              switchEquiv={this.switchEquiv}
-              lockEquivColumn={this.state.lockEquivColumn}
-              headIndex={0}
-            />
-          </ListGroupItem>
-          <ListGroupItem style={minPadding} >
-            <MaterialGroupContainer
-              reaction={reaction}
-              materialGroup="reactants"
-              materials={reaction.reactants}
-              dropMaterial={this.dropMaterial}
-              deleteMaterial={
-                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
-              }
-              dropSample={this.dropSample}
-              showLoadingColumn={!!reaction.hasPolymers()}
-              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
-              switchEquiv={this.switchEquiv}
-              lockEquivColumn={lockEquivColumn}
-              headIndex={headReactants}
-            />
-          </ListGroupItem>
-          <ListGroupItem style={minPadding}>
-
-            <MaterialGroupContainer
-              reaction={reaction}
-              materialGroup="products"
-              materials={reaction.products}
-              dropMaterial={this.dropMaterial}
-              deleteMaterial={
-                (material, materialGroup) => this.deleteMaterial(material, materialGroup)
-              }
-              dropSample={this.dropSample}
-              showLoadingColumn={!!reaction.hasPolymers()}
-              onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
-              switchEquiv={this.switchEquiv}
-              lockEquivColumn={this.state.lockEquivColumn}
-              headIndex={0}
-            />
-          </ListGroupItem>
-          <ListGroupItem style={minPadding}>
-            {this.solventCollapseBtn()}
-            <Collapse in={this.state.open}>
-              <div>
-                <MaterialGroupContainer
-                  reaction={reaction}
-                  materialGroup="solvents"
-                  materials={reaction.solvents}
-                  dropMaterial={this.dropMaterial}
-                  deleteMaterial={
-                    (material, materialGroup) => this.deleteMaterial(material, materialGroup)
-                  }
-                  dropSample={this.dropSample}
-                  showLoadingColumn={!!reaction.hasPolymers()}
-                  onChange={changeEvent => this.handleMaterialsChange(changeEvent)}
-                  switchEquiv={this.switchEquiv}
-                  lockEquivColumn={this.state.lockEquivColumn}
-                  headIndex={0}
-                />
-              </div>
-            </Collapse>
-          </ListGroupItem>
-          <ListGroupItem style={minPadding}>
-            {this.conditionsCollapseBtn()}
-            <Collapse in={this.state.cCon}>
-              <div>
-                <Select
-                  disabled={!permitOn(reaction)}
-                  name="default_conditions"
-                  multi={false}
-                  options={conditionsOptions}
-                  onChange={this.handleOnConditionSelect}
-                />
-                <FormControl
-                  componentClass="textarea"
-                  rows="4"
-                  value={reaction.conditions || ''}
-                  disabled={!permitOn(reaction) || reaction.isMethodDisabled('conditions')}
-                  placeholder="Conditions..."
-                  onChange={event => this.props.onInputChange('conditions', event)}
-                />
-              </div>
-            </Collapse>
-          </ListGroupItem>
-        </ListGroup>
-        <ListGroup>
-          <ListGroupItem>
-            <div className="reaction-scheme-props">
-              <ReactionDetailsMainProperties
-                reaction={reaction}
-                onInputChange={(type, event) => this.props.onInputChange(type, event)}
-              />
-            </div>
-            <ReactionDetailsDuration
-              reaction={reaction}
-              onInputChange={(type, event) => this.props.onInputChange(type, event)}
-            />
-            <Row>
-              <Col md={6}>
-                <FormGroup>
-                  {reaction.is_published ? <ControlLabel>Type (Name Reaction Ontology)</ControlLabel> : <HelpInfo optionalElement={<ControlLabel className="field_required">Type (Name Reaction Ontology)</ControlLabel>} source="requiredField" />}
-                  <OlsTreeSelect
-                    selectName="rxno"
-                    selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
-                    onSelectChange={event => this.props.onInputChange('rxno', event.trim())}
-                    selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
-                  />
-                </FormGroup>
-              </Col>
-              {this.renderRole()}
-            </Row>
-            <Row>
-              <Col md={12}>
-                <FormGroup>
-                  {reaction.is_published ? <ControlLabel>Description</ControlLabel> : <span><HelpInfo optionalElement={<ControlLabel>Description</ControlLabel>} source="requiredField" />&nbsp;<HelpInfo source="description" place="right" /></span>}
-                  <div className="quill-resize">
-                    {
-                      permitOn(reaction) ?
-                        <ReactionDescriptionEditor
-                          height="100%"
-                          reactQuillRef={this.reactQuillRef}
-                          template={reactionDescTemplate}
-                          value={reaction.description}
-                          updateTextTemplates={this.updateTextTemplates}
-                          onChange={event => this.props.onInputChange('description', event)}
-                        /> : <QuillViewer value={reaction.description} />
-                    }
-                  </div>
-                </FormGroup>
-              </Col>
-            </Row>
-            <ReactionDetailsPurification
-              reaction={reaction}
-              onReactionChange={r => this.onReactionChange(r)}
-              onInputChange={(type, event) => this.props.onInputChange(type, event)}
-              additionQuillRef={this.additionQuillRef}
-            />
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-}
-
-ReactionDetailsScheme.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  onReactionChange: PropTypes.func.isRequired,
-  onInputChange: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/components/ReactionDetailsShare.js b/app/packs/src/components/ReactionDetailsShare.js
deleted file mode 100644
index 7abafeb07..000000000
--- a/app/packs/src/components/ReactionDetailsShare.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const setReactionByType = (reaction, type, value) => {
-  let options = {};
-
-  switch (type) {
-    case 'name':
-      reaction.name = value;
-      break;
-    case 'observation':
-      reaction.observation = value;
-      break;
-    case 'status':
-      reaction.status = value;
-      break;
-    case 'description':
-      reaction.description = value;
-      options = { schemaChanged: false }
-      break;
-    case 'purification':
-      reaction.purification = value;
-      break;
-    case 'tlc_solvents':
-      reaction.tlc_solvents = value;
-      break;
-    case 'rfValue':
-      reaction.rf_value = value;
-      break;
-    case 'timestampStart':
-      reaction.timestamp_start = value;
-      break;
-    case 'timestampStop':
-      reaction.timestamp_stop = value;
-      break;
-    case 'tlcDescription':
-      reaction.tlc_description = value;
-      break;
-    case 'temperature':
-      reaction.temperature.userText = value;
-      options = {schemaChanged: true}
-      break;
-    case 'temperatureUnit':
-      reaction.temperature = reaction.convertTemperature(value);
-      options = {schemaChanged: true}
-      break;
-    case 'temperatureData':
-      reaction.temperature = value;
-      options = {schemaChanged: true}
-      break;
-    case 'dangerousProducts':
-      reaction.dangerous_products = value;
-      break;
-    case 'conditions':
-      reaction.conditions = value;
-      options = {schemaChanged: true}
-      break;
-    case 'solvent':
-      reaction.solvent = value;
-      options = {schemaChanged: true}
-      break;
-    case 'role':
-      reaction.role = value;
-      reaction.name = reaction.nameFromRole(value);
-      break;
-    case 'duration':
-      reaction.durationDisplay = value;
-      options = { schemaChanged: true }
-      break;
-    case 'rxno':
-      reaction.rxno = value;
-      break;
-    case 'variations':
-      reaction.variations = value;
-      break;
-  }
-
-  return { newReaction: reaction, options: options }
-}
-
-export {setReactionByType}
diff --git a/app/packs/src/components/SampleDetails.js b/app/packs/src/components/SampleDetails.js
deleted file mode 100644
index dc22b29f0..000000000
--- a/app/packs/src/components/SampleDetails.js
+++ /dev/null
@@ -1,1552 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-param-reassign */
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ButtonToolbar,
-  InputGroup, FormGroup, FormControl,
-  Panel, ListGroup, ListGroupItem, Glyphicon, Tabs, Tab, Row, Col,
-  Tooltip, OverlayTrigger, DropdownButton, MenuItem,
-  ControlLabel, Modal, Alert, Checkbox
-} from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import Clipboard from 'clipboard';
-import Select from 'react-select';
-import { cloneDeep, findIndex } from 'lodash';
-import uuid from 'uuid';
-import classNames from 'classnames';
-import Immutable from 'immutable';
-
-import ElementActions from './actions/ElementActions';
-import ElementStore from './stores/ElementStore';
-import DetailActions from './actions/DetailActions';
-import LoadingActions from './actions/LoadingActions';
-import RepositoryActions from './actions/RepositoryActions';
-
-import UIStore from './stores/UIStore';
-import UserStore from './stores/UserStore';
-import UIActions from './actions/UIActions';
-import QcActions from './actions/QcActions';
-import QcStore from './stores/QcStore';
-
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ElementAnalysesLabels from './ElementAnalysesLabels';
-import PubchemLabels from './PubchemLabels';
-import ElementReactionLabels from './ElementReactionLabels';
-import SampleDetailsContainers from './SampleDetailsContainers';
-
-import XLabels from './extra/SampleDetailsXLabels';
-import XTabs from './extra/SampleDetailsXTabs';
-
-import StructureEditorModal from './structure_editor/StructureEditorModal';
-import PublishSampleModal from './PublishSampleModal';
-
-import Sample from './models/Sample';
-import Container from './models/Container';
-import PolymerSection from './PolymerSection';
-import ElementalCompositionGroup from './ElementalCompositionGroup';
-import ToggleSection from './common/ToggleSection';
-import SampleName from './common/SampleName';
-import ClipboardCopyText from './common/ClipboardCopyText';
-import SampleForm from './SampleForm';
-import ComputedPropsContainer from './computed_props/ComputedPropsContainer';
-import ComputedPropLabel from './computed_props/ComputedPropLabel';
-import Utils from './utils/Functions';
-import PrintCodeButton from './common/PrintCodeButton';
-import SampleDetailsLiteratures from './DetailsTabLiteratures';
-import MoleculesFetcher from './fetchers/MoleculesFetcher';
-import PubchemLcss from './PubchemLcss';
-import QcMain from './qc/QcMain';
-import { chmoConversions } from './OlsComponent';
-import ConfirmClose from './common/ConfirmClose';
-import { EditUserLabels, ShowUserLabels } from './UserLabels';
-import CopyElementModal from './common/CopyElementModal';
-import NotificationActions from './actions/NotificationActions';
-import MatrixCheck from './common/MatrixCheck';
-import AttachmentFetcher from './fetchers/AttachmentFetcher';
-import NmrSimTab from './nmr_sim/NmrSimTab';
-import FastInput from './FastInput';
-import ScifinderSearch from './scifinder/ScifinderSearch';
-import ElementDetailSortTab from './ElementDetailSortTab';
-import { addSegmentTabs } from './generic/SegmentDetails';
-import RepoXvialButton from './common/RepoXvialButton';
-import {
-  PublishedTag,
-  OrigElnTag,
-  LabelPublication,
-  PublishBtn,
-  ReviewPublishBtn,
-  validateMolecule,
-} from './PublishCommon';
-import SampleDetailsRepoComment from './SampleDetailsRepoComment';
-import { permitOn } from './common/uis';
-
-const MWPrecision = 6;
-
-const decoupleCheck = (sample) => {
-  if (!sample.decoupled && sample.molecule && sample.molecule.id === '_none_') {
-    NotificationActions.add({
-      title: 'Error on Sample creation', message: 'The molecule structure is required!', level: 'error', position: 'tc'
-    });
-    LoadingActions.stop();
-    return false;
-  }
-  if (sample.decoupled && sample.sum_formula.trim() === '') { sample.sum_formula = 'undefined structure'; }
-  if (!sample.decoupled) { sample.sum_formula = ''; }
-  return true;
-};
-
-const rangeCheck = (field, sample) => {
-  if (sample[`${field}_lowerbound`] && sample[`${field}_lowerbound`] !== ''
-    && sample[`${field}_upperbound`] && sample[`${field}_upperbound`] !== ''
-    && Number.parseFloat(sample[`${field}_upperbound`]) < Number.parseFloat(sample[`${field}_lowerbound`])) {
-    NotificationActions.add({
-      title: `Error on ${field.replace(/(^\w{1})|(_{1}\w{1})/g, match => match.toUpperCase())}`, message: 'range lower bound must be less than or equal to range upper', level: 'error', position: 'tc'
-    });
-    LoadingActions.stop();
-    return false;
-  }
-  return true;
-};
-
-export default class SampleDetails extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sample: props.sample,
-      reaction: null,
-      materialGroup: null,
-      showStructureEditor: false,
-      loadingMolecule: false,
-      showElementalComposition: false,
-      showChemicalIdentifiers: false,
-      activeTab: UIStore.getState().sample.activeTab,
-      qrCodeSVG: '',
-      isCasLoading: false,
-      showMolfileModal: false,
-      smileReadonly: !((typeof props.sample.molecule.inchikey === 'undefined') || props.sample.molecule.inchikey == null || props.sample.molecule.inchikey === 'DUMMY'),
-      quickCreator: false,
-      showInchikey: false,
-      pageMessage: null,
-      visible: Immutable.List(),
-      startExport: false,
-      sfn: UIStore.getState().hasSfn,
-      showPublishSampleModal: false,
-      commentScreen: false,
-      xvial: (props.sample && props.sample.tag && props.sample.tag.taggable_data && props.sample.tag.taggable_data.xvial && props.sample.tag.taggable_data.xvial.num) || '',
-      currentUser: UserStore.getState().currentUser || {}
-    };
-
-    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-    this.enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
-    this.enableSampleDecoupled = MatrixCheck(currentUser.matrix, 'sampleDecoupled');
-    this.enableNmrSim = MatrixCheck(currentUser.matrix, 'nmrSim');
-
-    this.onUIStoreChange = this.onUIStoreChange.bind(this);
-    this.clipboard = new Clipboard('.clipboardBtn');
-    this.addManualCas = this.addManualCas.bind(this);
-    this.handleMolfileShow = this.handleMolfileShow.bind(this);
-    this.handleMolfileClose = this.handleMolfileClose.bind(this);
-    this.handleSampleChanged = this.handleSampleChanged.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.toggleInchi = this.toggleInchi.bind(this);
-    this.fetchQcWhenNeeded = this.fetchQcWhenNeeded.bind(this);
-    this.customizableField = this.customizableField.bind(this);
-    this.decoupleMolecule = this.decoupleMolecule.bind(this);
-    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
-    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
-    this.decoupleChanged = this.decoupleChanged.bind(this);
-    this.handleFastInput = this.handleFastInput.bind(this);
-    this.showPublishSampleModal = this.showPublishSampleModal.bind(this);
-    this.forcePublishRefreshClose = this.forcePublishRefreshClose.bind(this);
-    this.handleCommentScreen = this.handleCommentScreen.bind(this);
-    this.handleFullScreen = this.handleFullScreen.bind(this);
-    this.handleValidation = this.handleValidation.bind(this);
-    this.handleResetValidation = this.handleResetValidation.bind(this);
-    this.handleAssociateClick = this.handleAssociateClick.bind(this);
-    this.handleRepoXvial = this.handleRepoXvial.bind(this);
-    this.unseal = this.unseal.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIStoreChange);
-    const { activeTab } = this.state;
-    this.fetchQcWhenNeeded(activeTab);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.sample.isNew && (typeof (nextProps.sample.molfile) === 'undefined' || ((nextProps.sample.molfile || '').length === 0))
-        || (typeof (nextProps.sample.molfile) !== 'undefined' && nextProps.sample.molecule.inchikey == 'DUMMY')) {
-      this.setState({
-        smileReadonly: false,
-      });
-    } else {
-      this.setState({
-        smileReadonly: true,
-      });
-    }
-    this.setState({
-      sample: nextProps.sample,
-      loadingMolecule: false,
-      isCasLoading: false,
-    });
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-    UIStore.unlisten(this.onUIStoreChange);
-  }
-
-  onUIStoreChange(state) {
-    if (state.sample.activeTab !== this.state.activeTab) {
-      this.setState(previousState => ({
-        ...previousState, activeTab: state.sample.activeTab
-      }));
-    }
-  }
-
-  forcePublishRefreshClose(sample, show) {
-    this.setState({ sample, showPublishSampleModal: show });
-    this.forceUpdate();
-  }
-
-  handleAssociateClick() {
-    const { sample } = this.state;
-    ElementActions.tryFetchReactionById(sample.tag.taggable_data.reaction_id);
-    sample.validates = [];
-    this.setState({ sample });
-  }
-
-  handleValidation(element) {
-    let validates = [];
-    const sample = element;
-    if (sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.reaction_id) {
-      validates.push({ name: `sample [${sample.name}]`, value: false, message: `${sample.name} is associated with a Reaction.` });
-    } else {
-      const analyses = sample.analysisArray();
-      if (analyses.length < 1) {
-        validates.push({ name: `sample [${sample.name}]`, value: false, message: 'Analyses data is missing.' });
-      } else {
-        const validatePt = validateMolecule(sample);
-        if (validatePt.length > 0) {
-          validates = validates.concat(validatePt);
-        }
-      }
-    }
-    if (validates.length > 0) {
-      sample.validates = validates;
-      this.setState({ sample });
-    } else {
-      LoadingActions.start();
-      RepositoryActions.reviewPublish(element);
-    }
-  }
-
-  handleResetValidation() {
-    const { sample } = this.state;
-    sample.validates = [];
-    this.setState({ sample });
-  }
-
-  handleCommentScreen() {
-    this.setState({ commentScreen: true });
-    this.props.toggleCommentScreen(true);
-  }
-
-  handleFullScreen() {
-    this.setState({ commentScreen: false });
-    this.props.toggleFullScreen();
-  }
-
-  handleMolfileShow() {
-    this.setState({
-      showMolfileModal: true
-    });
-  }
-
-  handleMolfileClose() {
-    this.setState({
-      showMolfileModal: false
-    });
-  }
-
-  handleSampleChanged(sample, cb) {
-    this.setState({
-      sample,
-    }, cb);
-  }
-
-  handleAmountChanged(amount) {
-    const { sample } = this.state;
-    sample.setAmountAndNormalizeToGram(amount);
-    this.setState({ sample });
-  }
-
-  handleImportedReadoutChanged(e) {
-    const { sample } = this.state;
-    sample.imported_readout = e.target.value;
-    this.setState({
-      sample
-    });
-  }
-
-  handleRepoXvial(elementId, xvial) {
-    this.setState({ xvial });
-    ElementActions.refreshElements('sample');
-  }
-
-
-  showStructureEditor() {
-    this.setState({
-      showStructureEditor: true
-    });
-  }
-
-  hideStructureEditor() {
-    this.setState({
-      showStructureEditor: false
-    });
-  }
-
-  toggleInchi() {
-    const { showInchikey } = this.state;
-    this.setState({ showInchikey: !showInchikey });
-  }
-
-  handleFastInput(smi) {
-    this.setState({ showChemicalIdentifiers: true }, () => {
-      this.smilesInput.value = smi;
-      this.handleMoleculeBySmile();
-    });
-  }
-
-  handleMoleculeBySmile() {
-    const smi = this.smilesInput.value;
-    const { sample } = this.state;
-
-    MoleculesFetcher.fetchBySmi(smi)
-      .then((result) => {
-        if (!result || result == null) {
-          NotificationActions.add({
-            title: 'Error on Sample creation', message: `Cannot create molecule with this smiles! [${smi}]`, level: 'error', position: 'tc'
-          });
-        } else {
-          sample.molfile = result.molfile;
-          sample.molecule_id = result.id;
-          sample.molecule = result;
-          this.molfileInput.value = result.molfile;
-          this.inchistringInput.value = result.inchistring;
-          this.setState({
-            quickCreator: true,
-            sample,
-            smileReadonly: true,
-            pageMessage: result.ob_log
-          });
-          ElementActions.refreshElements('sample');
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      }).finally(() => LoadingActions.stop());
-  }
-
-  decoupleMolecule() {
-    const { sample } = this.state;
-    MoleculesFetcher.decouple(sample.molfile, sample.sample_svg_file, sample.decoupled)
-      .then((result) => {
-        sample.molecule = result;
-        sample.molecule_id = result.id;
-        this.setState({
-          sample, pageMessage: result.ob_log
-        });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  decoupleChanged(e) {
-    const { sample } = this.state;
-    sample.decoupled = e.target.checked;
-    if (!sample.decoupled) {
-      sample.sum_formula = '';
-    } else {
-      if (sample.sum_formula.trim() === '') sample.sum_formula = 'undefined structure';
-      if (sample.residues && sample.residues[0] && sample.residues[0].custom_info) {
-        sample.residues[0].custom_info.polymer_type = 'self_defined';
-        delete sample.residues[0].custom_info.surface_type;
-      }
-    }
-    if (!sample.decoupled && ((sample.molfile || '') === '')) {
-      this.handleSampleChanged(sample);
-    } else {
-      this.handleSampleChanged(sample, this.decoupleMolecule);
-    }
-  }
-
-  handleStructureEditorSave(molfile, svg_file = null, config = null, editor = 'ketcher') {
-    const { sample } = this.state;
-    sample.molfile = molfile;
-    const smiles = (config && sample.molecule) ? config.smiles : null;
-    sample.contains_residues = molfile.indexOf(' R# ') > -1;
-    sample.formulaChanged = true;
-    this.setState({ loadingMolecule: true });
-    if (!smiles || smiles === '') {
-      MoleculesFetcher.fetchByMolfile(molfile, svg_file, editor, sample.decoupled)
-        .then((result) => {
-          sample.molecule = result;
-          sample.molecule_id = result.id;
-          this.setState({
-            sample, smileReadonly: true, pageMessage: result.ob_log, loadingMolecule: false
-          });
-        }).catch((errorMessage) => {
-          alert('Cannot create molecule!');
-          console.log(`handleStructureEditorSave exception of fetchByMolfile: ${errorMessage}`);
-        });
-    } else {
-      MoleculesFetcher.fetchBySmi(smiles, svg_file, molfile, editor)
-        .then((result) => {
-          if (!result || result == null) {
-            alert('Cannot create molecule!');
-          } else {
-            sample.molecule = result;
-            sample.molecule_id = result.id;
-            this.setState({
-              sample, smileReadonly: true, pageMessage: result.ob_log, loadingMolecule: false
-            });
-          }
-        }).catch((errorMessage) => {
-          alert('Cannot create molecule!');
-          console.log(`handleStructureEditorSave exception of fetchBySmi: ${errorMessage}`);
-        });
-    }
-    this.hideStructureEditor();
-  }
-
-  handleStructureEditorCancel() {
-    this.hideStructureEditor();
-  }
-
-  handleSubmit(closeView = false) {
-    LoadingActions.start();
-    const { sample } = this.state;
-    if (!decoupleCheck(sample)) return;
-    if (!rangeCheck('boiling_point', sample)) return;
-    if (!rangeCheck('melting_point', sample)) return;
-    if (sample.belongTo && sample.belongTo.type === 'reaction') {
-      const reaction = sample.belongTo;
-      reaction.editedSample = sample;
-      const materialGroup = sample.matGroup;
-      if (sample.isNew) {
-        ElementActions.createSampleForReaction(sample, reaction, materialGroup);
-      } else {
-        ElementActions.updateSampleForReaction(sample, reaction, closeView);
-      }
-    } else if (sample.belongTo && sample.belongTo.type === 'wellplate') {
-      const wellplate = sample.belongTo;
-      ElementActions.updateSampleForWellplate(sample, wellplate);
-    } else if (sample.isNew) {
-      ElementActions.createSample(sample, closeView);
-    } else {
-      sample.cleanBoilingMelting();
-      ElementActions.updateSample(new Sample(sample), closeView);
-    }
-
-    if (sample.is_new || closeView) {
-      DetailActions.close(sample, true);
-    }
-    sample.updateChecksum();
-  }
-
-  unseal() {
-    console.log('unseal');
-    const { sample } = this.state;
-    sample.sealed = false;
-    this.setState({ sample });
-  }
-
-  structureEditorButton(isDisabled) {
-    return (
-      // eslint-disable-next-line react/jsx-no-bind
-      <Button onClick={this.showStructureEditor.bind(this)} disabled={isDisabled}>
-        <Glyphicon glyph="pencil" />
-      </Button>
-    );
-  }
-
-  showPublishSampleModal(show) {
-    this.setState({showPublishSampleModal: show});
-    this.forceUpdate();
-  }
-
-  svgOrLoading(sample) {
-    let svgPath = '';
-    if (this.state.loadingMolecule) {
-      svgPath = '/images/wild_card/loading-bubbles.svg';
-    } else {
-      svgPath = sample.svgPath;
-    }
-    let className = svgPath ? 'svg-container' : 'svg-container-empty'
-    return (
-      sample.can_update
-        ? <div className={className}
-               onClick={this.showStructureEditor.bind(this)}>
-            <Glyphicon className="pull-right" glyph='pencil'/>
-            <SVG key={svgPath} src={svgPath} className="molecule-mid"/>
-          </div>
-        : <div className={className}>
-            <SVG key={svgPath} src={svgPath} className="molecule-mid"/>
-          </div>
-    );
-  }
-
-  sampleAverageMW(sample) {
-    let mw = sample.molecule_molecular_weight;
-    if(mw)
-      return <ClipboardCopyText text={`${mw.toFixed(MWPrecision)} g/mol`} />;
-    else
-      return '';
-  }
-
-  sampleExactMW(sample) {
-    let mw = sample.molecule_exact_molecular_weight
-    if(mw)
-      return <ClipboardCopyText text={`Exact mass: ${mw.toFixed(MWPrecision)} g/mol`} />;
-    else
-      return '';
-  }
-
-  initiateAnalysisButton(sample) {
-    return (
-      <div style={{ display: 'inline-block', marginLeft: '100px' }}>
-        <DropdownButton id="InitiateAnalysis" bsStyle="info" bsSize="xsmall" title="Initiate Analysis">
-          <MenuItem eventKey="1" onClick={() => this.initiateAnalysisWithKind(sample, chmoConversions.nmr_1h.termId)}>{chmoConversions.nmr_1h.label}</MenuItem>
-          <MenuItem eventKey="2" onClick={() => this.initiateAnalysisWithKind(sample, chmoConversions.nmr_13c.termId)}>{chmoConversions.nmr_13c.label}</MenuItem>
-          <MenuItem eventKey="3" onClick={() => this.initiateAnalysisWithKind(sample, 'Others')}>others</MenuItem>
-          <MenuItem eventKey="4" onClick={() => this.initiateAnalysisWithKind(sample, 'Others2x')}>others 2x</MenuItem>
-          <MenuItem eventKey="5" onClick={() => this.initiateAnalysisWithKind(sample, 'Others3x')}>others 3x</MenuItem>
-        </DropdownButton>
-      </div>
-    );
-  }
-
-  initiateAnalysisWithKind(sample, kind) {
-    let analysis = '';
-    let a1 = Container.buildAnalysis(chmoConversions.others.value),
-        a2 = Container.buildAnalysis(chmoConversions.others.value),
-        a3 = Container.buildAnalysis(chmoConversions.others.value);
-    switch(kind) {
-      case chmoConversions.nmr_1h.termId:
-        analysis = Container.buildAnalysis(chmoConversions.nmr_1h.value);
-        sample.addAnalysis(analysis);
-        ElementActions.updateSample(sample);
-        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + analysis.id + "&type=nmr_analysis&size=small"})
-        break;
-      case chmoConversions.nmr_13c.termId:
-        analysis = Container.buildAnalysis(chmoConversions.nmr_13c.value);
-        sample.addAnalysis(analysis);
-        ElementActions.updateSample(sample);
-        Utils.downloadFile({ contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + analysis.id + "&type=nmr_analysis&size=small" })
-        break;
-      case "Others":
-        sample.addAnalysis(a1);
-        ElementActions.updateSample(sample);
-        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&type=analysis&size=small"})
-        break;
-      case "Others2x":
-        sample.addAnalysis(a1);
-        sample.addAnalysis(a2);
-        ElementActions.updateSample(sample);
-        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&analyses_ids[]=" + a2.id  + "&type=analysis&size=small"})
-        break;
-      case "Others3x":
-        sample.addAnalysis(a1);
-        sample.addAnalysis(a2);
-        sample.addAnalysis(a3);
-        ElementActions.updateSample(sample);
-        Utils.downloadFile({contents: "/api/v1/code_logs/print_analyses_codes?sample_id=" + sample.id + "&analyses_ids[]=" + a1.id + "&analyses_ids[]=" + a2.id + "&analyses_ids[]=" + a3.id + "&type=analysis&size=small"})
-        break;
-    }
-  }
-
-  sampleHeader(sample) {
-    const saveBtnDisplay = sample.isEdited ? '' : 'none';
-    const titleTooltip = `Created at: ${sample.created_at} \n Updated at: ${sample.updated_at}`;
-
-    const { currentCollection } = UIStore.getState();
-    const defCol = currentCollection && currentCollection.is_shared === false &&
-      currentCollection.is_locked === false && currentCollection.label !== 'All' ? currentCollection.id : null;
-
-    const copyBtn = (sample.can_copy && !sample.isNew) ? (
-      <CopyElementModal
-        element={sample}
-        defCol={defCol}
-      />
-    ) : null;
-
-    const colLabel = sample.isNew ? null : (
-      <ElementCollectionLabels element={sample} key={sample.id} placement="right" />
-    );
-
-    const decoupleCb =
-    permitOn(sample) && this.enableSampleDecoupled ? (
-        <Checkbox
-          className="sample-header-decouple"
-          checked={sample.decoupled}
-          onChange={(e) => this.decoupleChanged(e)}
-        >
-          Decoupled
-        </Checkbox>
-      ) : null;
-
-    const isPub = !!((sample.tag && sample.tag.taggable_data && sample.tag.taggable_data.publication && sample.tag.taggable_data.publication.published_at));
-    return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
-          <span><i className="icon-sample" />{sample.title()}</span>
-        </OverlayTrigger>
-        <ConfirmClose el={sample} />
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveCloseSample">Save and Close Sample</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit(true)}
-            style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !permitOn(sample)}
-          >
-            <i className="fa fa-floppy-o" />
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveSample">Save Sample</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.handleSubmit()}
-            style={{ display: saveBtnDisplay }}
-            disabled={!this.sampleIsValid() || !permitOn(sample)}
-          >
-            <i className="fa fa-floppy-o" />
-          </Button>
-        </OverlayTrigger>
-        {copyBtn}
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}
-        >
-          <Button
-            bsStyle="info"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => this.props.toggleFullScreen()}
-          >
-            <i className="fa fa-expand" />
-          </Button>
-        </OverlayTrigger>
-        <PrintCodeButton element={sample} />
-        {sample.isNew ? <FastInput fnHandle={this.handleFastInput} /> : null}
-        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
-        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
-        {decoupleCb}
-        <PublishBtn sample={sample} showModal={this.showPublishSampleModal} />
-        <ReviewPublishBtn element={sample} showComment={this.handleCommentScreen} validation={this.handleValidation} />
-        {decoupleCb}
-        <div style={{ display: 'inline-block', marginLeft: '10px' }}>
-          <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-          {colLabel}
-          <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
-          <PubchemLabels element={sample} />
-          <RepoXvialButton isEditable={sample.can_update} isLogin elementId={sample.id} data={this.state.xvial} saveCallback={this.handleRepoXvial} xvialCom={{ xvialCom: false }} />
-          <OrigElnTag element={sample} />
-          <PublishedTag element={sample} fnUnseal={this.unseal} />
-          <LabelPublication element={sample} />
-          {this.extraLabels().map((Lab, i) => <Lab key={i} element={sample} />)}
-        </div>
-        <ShowUserLabels element={sample} />
-      </div>
-    );
-  }
-
-  transferToDeviceButton(sample) {
-    return (
-      <Button bsSize="xsmall"
-        onClick={() => {
-          const {selectedDeviceId, devices} = ElementStore.getState().elements.devices
-          const device = devices.find((d) => d.id === selectedDeviceId)
-          ElementActions.addSampleToDevice(sample, device, {save: true})
-        }}
-        style={{marginLeft: 25}}
-      >
-        Transfer to Device
-      </Button>
-    )
-  }
-
-  sampleInfo(sample) {
-    const style = { height: '200px' };
-    let pubchemLcss = (sample.pubchem_tag && sample.pubchem_tag.pubchem_lcss && sample.pubchem_tag.pubchem_lcss.Record) || null;
-    if (pubchemLcss && pubchemLcss.Reference) {
-      const echa = pubchemLcss.Reference.filter(e => e.SourceName === 'European Chemicals Agency (ECHA)').map(e => e.ReferenceNumber);
-      if (echa.length > 0) {
-        pubchemLcss = pubchemLcss.Section.find(e => e.TOCHeading === 'Safety and Hazards') || [];
-        pubchemLcss = pubchemLcss.Section.find(e => e.TOCHeading === 'Hazards Identification') || [];
-        pubchemLcss = pubchemLcss.Section[0].Information.filter(e => echa.includes(e.ReferenceNumber)) || null;
-      } else pubchemLcss = null;
-    }
-    const pubchemCid = sample.pubchem_tag && sample.pubchem_tag.pubchem_cid ?
-      sample.pubchem_tag.pubchem_cid : 0;
-    const lcssSign = pubchemLcss && !sample.decoupled ?
-      <PubchemLcss cid={pubchemCid} informArray={pubchemLcss} /> : <div />;
-
-    return (
-      <Row style={style}>
-        <Col md={4}>
-          <h4><SampleName sample={sample} /></h4>
-          <h5>{this.sampleAverageMW(sample)}</h5>
-          <h5>{this.sampleExactMW(sample)}</h5>
-          {lcssSign}
-        </Col>
-        <Col md={8}>
-          {this.svgOrLoading(sample)}
-        </Col>
-      </Row>
-    );
-  }
-
-  moleculeInchi(sample) {
-    if (typeof (this.inchistringInput) !== 'undefined' && this.inchistringInput
-        && typeof (sample.molecule_inchistring) !== 'undefined' && sample.molecule_inchistring) {
-      this.inchistringInput.value = sample.molecule_inchistring;
-    }
-    const inchiLabel = this.state.showInchikey ? 'InChIKey' : 'InChI';
-    const inchiTooltip = <Tooltip id="inchi_tooltip">toggle InChI/InChIKey</Tooltip>;
-
-    return (
-      <InputGroup className="sample-molecule-identifier">
-        <InputGroup.Button>
-          <OverlayTrigger placement="top" overlay={inchiTooltip}>
-            <Button
-              active
-              onClick={this.toggleInchi}
-            >
-              {inchiLabel}
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-        <FormGroup controlId="inchistringInput">
-          <FormControl
-            type="text"
-            inputRef={(m) => { this.inchistringInput = m; }}
-            key={sample.id}
-            value={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ''}
-            defaultValue={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ''}
-            disabled
-            readOnly
-          />
-        </FormGroup>
-        <InputGroup.Button>
-          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
-            <Button active className="clipboardBtn" data-clipboard-text={(this.state.showInchikey ? sample.molecule_inchikey : sample.molecule_inchistring) || ' '}>
-              <i className="fa fa-clipboard" />
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-      </InputGroup>
-    );
-  }
-
-  clipboardTooltip() {
-    return(
-      <Tooltip id="assign_button">copy to clipboard</Tooltip>
-    )
-  }
-
-  moleculeCreatorTooltip() {
-    return(
-      <Tooltip id="assign_button">create molecule</Tooltip>
-    )
-  }
-
-  moleculeCanoSmiles(sample) {
-    if (this.state.smileReadonly && typeof (this.smilesInput) !== 'undefined'
-       && this.smilesInput && typeof (sample.molecule_cano_smiles) !== 'undefined'
-       && sample.molecule_cano_smiles) {
-      this.smilesInput.value = sample.molecule_cano_smiles;
-    }
-    return (
-      <InputGroup className='sample-molecule-identifier'>
-        <InputGroup.Addon>Canonical SMILES</InputGroup.Addon>
-        <FormGroup controlId="smilesInput">
-          <FormControl
-            type="text"
-            id="smilesInput"
-            inputRef={(m) => { this.smilesInput = m; }}
-            defaultValue={sample.molecule_cano_smiles || ''}
-            disabled={this.state.smileReadonly}
-            readOnly={this.state.smileReadonly}
-          />
-        </FormGroup>
-        <InputGroup.Button>
-          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
-            <Button active className="clipboardBtn" data-clipboard-text={sample.molecule_cano_smiles || ' '}>
-              <i className="fa fa-clipboard" />
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-        <InputGroup.Button>
-          <OverlayTrigger placement="bottom" overlay={this.moleculeCreatorTooltip()}>
-            <Button
-              active
-              className="clipboardBtn"
-              id="smile-create-molecule"
-              disabled={this.state.smileReadonly}
-              readOnly={this.state.smileReadonly}
-              onClick={() => this.handleMoleculeBySmile()}
-            >
-              <i className="fa fa-save" />
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-      </InputGroup>
-    );
-  }
-
-  moleculeMolfile(sample) {
-    if (typeof (this.molfileInput) !== 'undefined' && this.molfileInput
-        && typeof (sample.molfile) !== 'undefined' && sample.molfile) {
-      this.molfileInput.value = sample.molfile;
-    }
-
-    const textAreaStyle = { height: '35px', overflow: 'auto', whiteSpace: 'pre' };
-
-    return (
-      <InputGroup className="sample-molecule-identifier">
-        <InputGroup.Addon>Molfile</InputGroup.Addon>
-        <FormGroup controlId="molfileInput">
-          <FormControl
-            componentClass="textarea"
-            style={textAreaStyle}
-            inputRef={(m) => { this.molfileInput = m; }}
-            defaultValue={sample.molfile || ''}
-            disabled
-            readOnly
-          />
-        </FormGroup>
-        <InputGroup.Button>
-          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
-            <Button active className="clipboardBtn" data-clipboard-text={sample.molfile || ' '} >
-              <i className="fa fa-clipboard" />
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-        <InputGroup.Button>
-          <Button active className="clipboardBtn" onClick={this.handleMolfileShow}><i className="fa fa-file-text" /></Button>
-        </InputGroup.Button>
-      </InputGroup>
-    )
-  }
-
-  addManualCas(e) {
-    DetailActions.updateMoleculeCas(this.props.sample, e.value);
-  }
-
-  moleculeCas() {
-    const { sample, isCasLoading } = this.state;
-    const { molecule, xref } = sample;
-    const cas = xref ? xref.cas : '';
-    const casLabel = cas && cas.label ? cas.label : '';
-    let casArr = [];
-    if (molecule && molecule.cas) {
-      casArr = molecule.cas.map(c => Object.assign({ label: c }, { value: c }));
-    }
-    const onChange = e => this.updateCas(e);
-    const onOpen = e => this.onCasSelectOpen(e, casArr);
-
-    return (
-      <InputGroup className="sample-molecule-identifier">
-        <InputGroup.Addon>CAS</InputGroup.Addon>
-        <Select.Creatable
-          name="cas"
-          multi={false}
-          options={casArr}
-          onChange={onChange}
-          onOpen={onOpen}
-          onNewOptionClick={this.addManualCas}
-          isLoading={isCasLoading}
-          value={cas}
-          disabled={!sample.can_update}
-        />
-        <InputGroup.Button>
-          <OverlayTrigger placement="bottom" overlay={this.clipboardTooltip()}>
-            <Button active className="clipboardBtn" data-clipboard-text={casLabel}><i className="fa fa-clipboard" /></Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-      </InputGroup>
-    );
-  }
-
-  updateCas(e) {
-    let sample = this.state.sample;
-    sample.xref = { ...sample.xref, cas: e };
-    this.setState({ sample });
-  }
-
-  onCasSelectOpen(e, casArr) {
-    if(casArr.length === 0) {
-      this.setState({isCasLoading: true})
-      DetailActions.getMoleculeCas(this.state.sample)
-    }
-  }
-
-
-  handleSegmentsChange(se) {
-    const { sample } = this.state;
-    const { segments } = sample;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
-    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
-    sample.segments = segments;
-    this.setState({ sample });
-  }
-
-  customizableField() {
-    const { xref } = this.state.sample;
-    const {
-      cas,
-      optical_rotation,
-      rfvalue,
-      rfsovents,
-      supplier,
-      private_notes,
-      ...customKeys
-    } = cloneDeep(xref || {});
-
-    if (Object.keys(customKeys).length === 0) return null;
-    return (
-      Object.keys(customKeys).map(key => (
-        <tr key={`field_${key}`}>
-          <td colSpan="4">
-            <FormGroup>
-              <ControlLabel>{key}</ControlLabel>
-              <FormControl type="text" defaultValue={customKeys[key] || ''} onChange={e => this.updateKey(key, e)} />
-            </FormGroup>
-          </td>
-        </tr>
-      ))
-    );
-  }
-
-  updateKey(key, e) {
-    const { sample } = this.state;
-    sample.xref[key] = e.target.value;
-    this.setState({ sample });
-  }
-
-  handleElementalSectionToggle() {
-    this.setState({
-      showElementalComposition: !this.state.showElementalComposition
-    });
-  }
-
-  handleChemIdentSectionToggle() {
-    this.setState({
-      showChemicalIdentifiers: !this.state.showChemicalIdentifiers
-    });
-  }
-
-  elementalPropertiesItemHeader(sample) {
-    let label;
-    if (sample.contains_residues) {
-      label = 'Polymer section';
-      if (!this.state.showElementalComposition) {
-        label += ' / Elemental composition';
-      }
-    } else {
-      label = 'Elemental composition';
-    }
-
-    return (
-      <ListGroupItem onClick={() => this.handleElementalSectionToggle()}>
-        <Col className="padding-right elem-composition-header" md={6}>
-          <label>{label}</label>
-        </Col>
-        <div className="col-md-6">
-          <ToggleSection show={this.state.showElementalComposition} />
-        </div>
-      </ListGroupItem>
-    );
-  }
-
-  elementalPropertiesItemContent(sample, materialGroup, show) {
-    if (!show) return false;
-
-    if (sample.contains_residues) {
-      return (
-        <ListGroupItem className="ea-section">
-          <PolymerSection
-            sample={sample}
-            parent={this}
-            show={sample.contains_residues}
-            materialGroup={materialGroup}
-          />
-        </ListGroupItem>
-      );
-    }
-    return (
-      <ListGroupItem className="ea-section">
-        <Row>
-          <Col md={6}>
-            <ElementalCompositionGroup
-              handleSampleChanged={s => this.handleSampleChanged(s)}
-              sample={sample}
-            />
-          </Col>
-        </Row>
-      </ListGroupItem>
-    );
-  }
-
-  elementalPropertiesItem(sample) {
-    // avoid empty ListGroupItem
-    if (!sample.molecule_formula) {
-      return false;
-    }
-
-    const { showElementalComposition, materialGroup } = this.state;
-
-    return (
-      <div width="100%" className="polymer-section">
-        {this.elementalPropertiesItemHeader(sample)}
-
-        {this.elementalPropertiesItemContent(sample, materialGroup, showElementalComposition)}
-      </div>
-    );
-  }
-
-  chemicalIdentifiersItemHeader(sample) {
-    return (
-      <ListGroupItem onClick={() => this.handleChemIdentSectionToggle()}>
-        <Col className="padding-right chem-identifiers-header" md={6}>
-          <b>Chemical identifiers</b>
-          { sample.decoupled &&
-            <span className="text-danger">
-              &nbsp;[decoupled]
-            </span>
-          }
-        </Col>
-        <div className="col-md-6">
-          <ToggleSection show={this.state.showChemicalIdentifiers} />
-        </div>
-      </ListGroupItem>
-    );
-  }
-
-  chemicalIdentifiersItemContent(sample, show) {
-    if (!show) return false;
-    return (
-      <ListGroupItem>
-        {this.moleculeInchi(sample)}
-        {this.moleculeCanoSmiles(sample)}
-        {this.moleculeMolfile(sample)}
-        {this.moleculeCas()}
-      </ListGroupItem>
-    );
-  }
-
-  chemicalIdentifiersItem(sample) {
-    const show = this.state.showChemicalIdentifiers;
-    return (
-      <div
-        width="100%"
-        className={classNames({
-          'chem-identifiers-section': true,
-          decoupled: sample.decoupled
-        })}
-      >
-        {this.chemicalIdentifiersItemHeader(sample)}
-        {this.chemicalIdentifiersItemContent(sample, show)}
-      </div>
-    );
-  }
-
-  samplePropertiesTab(ind) {
-    const sample = this.state.sample || {};
-
-    return (
-      <Tab eventKey={ind} title="Properties" key={'Props' + sample.id.toString()}>
-        <ListGroupItem>
-          <SampleForm
-            sample={sample}
-            parent={this}
-            customizableField={this.customizableField}
-            enableSampleDecoupled={this.enableSampleDecoupled}
-            decoupleMolecule={this.decoupleMolecule}
-          />
-        </ListGroupItem>
-        <EditUserLabels element={sample} />
-        {this.elementalPropertiesItem(sample)}
-        {this.chemicalIdentifiersItem(sample)}
-      </Tab>
-    );
-  }
-
-  sampleContainerTab(ind) {
-    const { sample, currentUser } = this.state;
-    const isPub = !!(sample.publication && sample.publication.published_at);
-    return (
-      <Tab eventKey={ind} title="Analyses" key={'Container' + sample.id.toString()}>
-        <ListGroupItem style={{ paddingBottom: 20 }}>
-          <SampleDetailsContainers
-            sample={sample}
-            setState={(sample) => {this.setState(sample)}}
-            handleSampleChanged={this.handleSampleChanged}
-            handleSubmit={this.handleSubmit}
-            fromSample
-            publish={isPub}
-            isReviewer={!!currentUser.is_reviewer}
-          />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  sampleLiteratureTab(ind) {
-    const { sample } = this.state;
-    if (!sample) { return null; }
-    return (
-      <Tab
-        eventKey={ind}
-        title="References"
-        key={`Literature_${sample.id}`}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }} >
-          <SampleDetailsLiteratures
-            element={sample}
-          />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  sampleImportReadoutTab(ind) {
-    let sample = this.state.sample || {};
-    return (
-      <Tab
-        eventKey={ind}
-        title="Results"
-        key={`Results${sample.id.toString()}`}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }}>
-          <FormGroup controlId="importedReadoutInput">
-            <ControlLabel>Imported Readout</ControlLabel>
-            <InputGroup>
-              <FormControl
-                type="text"
-                value={sample.imported_readout || ''}
-                disabled
-                readOnly
-              />
-            </InputGroup>
-          </FormGroup>
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  moleculeComputedProps(ind) {
-    const { sample } = this.state;
-    const key = "computed_props_" + sample.id.toString();
-    if (!this.enableComputedProps) return <span key={key} />;
-
-    const title = (
-      <span>
-        <ComputedPropLabel cprops={sample.molecule_computed_props} />
-        &nbsp; Computed Properties
-      </span>
-    );
-
-    return (
-      <Tab
-        eventKey={ind}
-        title={title}
-        key={key}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }}>
-          <ComputedPropsContainer sample={sample} />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  fetchQcWhenNeeded(key) {
-    if (key !== 'qc_curation') return;
-    const { infers } = QcStore.getState();
-    const { sample } = this.state;
-    let isInStore = false;
-    infers.forEach((i) => {
-      if (i.sId === sample.id) isInStore = true;
-    });
-    if (isInStore) return;
-    QcActions.setLoading.defer();
-    QcActions.loadInfers.defer({ sample });
-  }
-
-  qualityCheckTab(ind) {
-    const { sample } = this.state;
-    if (!sample) { return null; }
-    return (
-      <Tab
-        eventKey={ind}
-        title="QC & curation"
-        key={`QC_${sample.id}_${ind}`}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }} >
-          <QcMain
-            sample={sample}
-          />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  nmrSimTab(ind) {
-    const { sample } = this.state;
-    if (!sample) { return null; }
-    return (
-      <Tab
-        eventKey={ind}
-        title="NMR Simulation"
-        key={`NMR_${sample.id}_${ind}`}
-      >
-        <ListGroupItem style={{ paddingBottom: 20 }} >
-          <NmrSimTab
-            sample={sample}
-          />
-        </ListGroupItem>
-      </Tab>
-    );
-  }
-
-  extraLabels() {
-    let labels = [];
-    for (let j = 0; j < XLabels.count; j += 1) {
-      labels.push(XLabels[`content${j}`]);
-    }
-    return labels;
-  }
-
-  sampleIsValid() {
-    const { sample, loadingMolecule, quickCreator } = this.state;
-    return (sample.isValid && !loadingMolecule) || sample.is_scoped == true || quickCreator;
-  }
-
-  saveBtn(sample, closeView = false) {
-    let submitLabel = sample && sample.isNew ? 'Create' : 'Save';
-    const isDisabled = !permitOn(sample);
-    if (closeView) submitLabel += ' and close';
-
-    return (
-      <Button
-        id="submit-sample-btn"
-        bsStyle="warning"
-        onClick={() => this.handleSubmit(closeView)}
-        disabled={!this.sampleIsValid() || isDisabled}
-      >
-        {submitLabel}
-      </Button>
-    );
-  }
-
-  handleExportAnalyses(sample) {
-    this.setState({ startExport: true });
-    AttachmentFetcher.downloadZipBySample(sample.id)
-      .then(() => { this.setState({ startExport: false }); })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  sampleFooter() {
-    const { sample, startExport } = this.state;
-    const belongToReaction = sample.belongTo && sample.belongTo.type === 'reaction';
-    const hasAnalyses = !!(sample.analyses && sample.analyses.length > 0);
-    const downloadAnalysesBtn = (sample.isNew || !hasAnalyses) ? null : (
-      <Button bsStyle="info" disabled={!this.sampleIsValid() } onClick={() => this.handleExportAnalyses(sample)}>
-        Download Analysis {startExport ? <span>&nbsp;<i className="fa fa-spin fa-spinner" /></span> : null}
-      </Button>
-    );
-
-    const saveAndCloseBtn = belongToReaction && !sample.isNew ? this.saveBtn(sample, true) : null;
-    return (
-      <ButtonToolbar>
-        <Button bsStyle="primary" onClick={() => DetailActions.close(sample)}>
-          Close
-        </Button>
-        {this.saveBtn(sample)}
-        {saveAndCloseBtn}
-        {downloadAnalysesBtn}
-      </ButtonToolbar>
-    );
-  }
-
-  structureEditorModal(sample) {
-    const molfile = sample.molfile;
-    const hasParent = sample && sample.parent_id;
-    const hasChildren = sample && sample.children_count > 0;
-    return (
-      <StructureEditorModal
-        key={sample.id}
-        showModal={this.state.showStructureEditor}
-        onSave={this.handleStructureEditorSave.bind(this)}
-        onCancel={this.handleStructureEditorCancel.bind(this)}
-        molfile={molfile}
-        hasParent={hasParent}
-        hasChildren={hasChildren}
-      />
-    );
-  }
-
-  handleSelect(eventKey) {
-    UIActions.selectTab({ tabKey: eventKey, type: 'sample' });
-    this.fetchQcWhenNeeded(eventKey);
-  }
-
-  renderMolfileModal() {
-    const textAreaStyle = {
-      width: '500px',
-      height: '640px',
-      margin: '30px',
-      whiteSpace: 'pre-line',
-    };
-    if (this.state.showMolfileModal) {
-      let molfile = this.molfileInput.value;
-      molfile = molfile.replace(/\r?\n/g, '<br />');
-      return (
-        <Modal
-          show={this.state.showMolfileModal}
-          dialogClassName="importChemDrawModal"
-          onHide={this.handleMolfileClose}
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>Molfile</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <div>
-              <FormGroup controlId="molfileInputModal">
-                <FormControl
-                  componentClass="textarea"
-                  style={textAreaStyle}
-                  readOnly={true}
-                  disabled={true}
-                  inputRef={(m) => { this.molfileInputModal = m; }}
-                  defaultValue={this.molfileInput.value || ''}
-                />
-              </FormGroup>
-            </div>
-            <div>
-              <Button bsStyle="warning" onClick={this.handleMolfileClose}>
-                Close
-              </Button>
-            </div>
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return (<div />);
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
-  isRepoSecretExternalLabel() {
-    const sample = this.state.sample || {};
-    const currentUser = this.state.currentUser || {};
-    if (sample.is_repo_public) {
-      if (currentUser.is_reviewer || currentUser.id === sample.created_by) return false;
-      return true;
-    }
-    return false;
-  }
-
-  render() {
-    const sample = this.state.sample || {};
-    const { visible } = this.state;
-    const tabContentsMap = {
-      properties: this.samplePropertiesTab('properties'),
-      analyses: this.sampleContainerTab('analyses'),
-      references: this.sampleLiteratureTab('references'),
-      results: this.sampleImportReadoutTab('results'),
-      qc_curation: this.qualityCheckTab('qc_curation')
-    };
-
-    if (this.enableComputedProps) {
-      tabContentsMap.computed_props = this.moleculeComputedProps('computed_props');
-    }
-
-    if (this.enableNmrSim) {
-      tabContentsMap.nmr_sim = this.nmrSimTab('nmr_sim');
-    }
-
-    const tabTitlesMap = {
-      qc_curation: 'QC & Curation',
-      computed_props: 'Computed Props',
-      nmr_sim: 'NMR Simulation'
-    };
-
-    let { showPublishSampleModal } = this.state
-
-    for (let j = 0; j < XTabs.count; j += 1) {
-      if (XTabs[`on${j}`](sample)) {
-        const NoName = XTabs[`content${j}`];
-        tabContentsMap[`xtab_${j}`] = (
-          <Tab eventKey={`xtab_${j}`} key={`xtab_${j}`} title={XTabs[`title${j}`]} >
-            <ListGroupItem style={{ paddingBottom: 20 }} >
-              <NoName sample={sample} />
-            </ListGroupItem>
-          </Tab>
-        );
-        tabTitlesMap[`xtab_${j}`] = XTabs[`title${j}`];
-      }
-    }
-
-    addSegmentTabs(sample, this.handleSegmentsChange, tabContentsMap);
-    const stb = [];
-    const tabContents = [];
-    visible.forEach((value) => {
-      const tabContent = tabContentsMap[value];
-      if (tabContent) { tabContents.push(tabContent); }
-      stb.push(value);
-    });
-
-    let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
-    segmentKlasses =
-      segmentKlasses.filter(s => s.element_klass && s.element_klass.name === sample.type);
-    segmentKlasses.forEach((klass) => {
-      const visIdx = visible.indexOf(klass.label);
-      const idx = findIndex(sample.segments, o => o.segment_klass_id === klass.id);
-      if (visIdx < 0 && idx > -1) {
-        const tabContent = tabContentsMap[klass.label];
-        if (tabContent) { tabContents.push(tabContent); }
-        stb.push(klass.label);
-      }
-    });
-
-    const validateObjs = sample.validates && sample.validates.filter(v => v.value === false);
-    let validationBlock = null;
-    if (validateObjs && validateObjs.length > 0) {
-      const validateAssociate = sample.validates && sample.validates.filter(v => v.value === false && v.message.includes('associated'));
-      if (validateAssociate && validateAssociate.length > 0) {
-        validationBlock = (
-          <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
-            <strong>Submission Alert</strong>
-            <p>
-              This sample is associated with a Reaction and can not be published alone.
-            </p>
-            <Button bsSize="xsmall" onClick={() => this.handleAssociateClick()}>Go to Reaction&nbsp;<i className="icon-reaction" /></Button>
-            <span>&nbsp;&nbsp;or&nbsp;&nbsp;</span>
-            <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
-          </Alert>
-        );
-      } else {
-        validationBlock = (
-          <Alert bsStyle="danger" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
-            <strong>Submission Alert</strong>&nbsp;&nbsp;
-            <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleResetValidation()}>Close Alert</Button>
-            <br />
-            {
-              validateObjs.map(m => (
-                <div key={uuid.v1()}>{m.message}</div>
-              ))
-            }
-          </Alert>
-        );
-      }
-    }
-
-    const { pageMessage } = this.state;
-    const messageBlock = (pageMessage &&
-      (pageMessage.error.length > 0 || pageMessage.warning.length > 0)) ? (
-        <Alert bsStyle="warning" style={{ marginBottom: 'unset', padding: '5px', marginTop: '10px' }}>
-          <strong>Structure Alert</strong>&nbsp;
-          <Button bsSize="xsmall" bsStyle="warning" onClick={() => this.setState({ pageMessage: null })}>Close Alert</Button>
-          <br />
-          {
-            pageMessage.error.map(m => (
-              <div key={uuid.v1()}>{m}</div>
-            ))
-          }
-          {
-            pageMessage.warning.map(m => (
-              <div key={uuid.v1()}>{m}</div>
-            ))
-          }
-        </Alert>
-      ) : null;
-
-    const activeTab = (this.state.activeTab !== 0 && stb.indexOf(this.state.activeTab) > -1 &&
-     this.state.activeTab) || visible.get(0);
-    const publication = sample.tag && sample.tag.taggable_data &&
-      sample.tag.taggable_data.publication;
-
-    return (
-      <Panel
-        className="element-panel-detail"
-        bsStyle={publication ? 'success' : (sample.isPendingToSave ? 'info' : 'primary')}
-      >
-        <Panel.Heading>{this.sampleHeader(sample)}{messageBlock}{validationBlock}</Panel.Heading>
-        <Panel.Body>
-          <Row><Col md={this.props.fullScreen && this.state.commentScreen ? 6 : 12}>
-            <div className={this.props.fullScreen ? 'full' : 'base'}>
-          {this.sampleInfo(sample)}
-          <ListGroup>
-            <ElementDetailSortTab
-              type="sample"
-              availableTabs={Object.keys(tabContentsMap)}
-              tabTitles={tabTitlesMap}
-              onTabPositionChanged={this.onTabPositionChanged}
-            />
-            {this.state.sfn ? <ScifinderSearch el={sample} /> : null}
-            <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
-              {tabContents}
-            </Tabs>
-          <PublishSampleModal
-            show={showPublishSampleModal}
-            sample={sample}
-            onHide={() => this.showPublishSampleModal(false)}
-            onPublishRefreshClose={this.forcePublishRefreshClose}
-          />
-          </ListGroup>
-          {this.sampleFooter()}
-          {this.structureEditorModal(sample)}
-          {this.renderMolfileModal()}
-            </div>
-          </Col>
-            {
-              this.props.fullScreen && this.state.commentScreen ?
-                <Col md={6}>
-                  <div className={this.props.fullScreen ? 'full' : 'base'}>
-                    <SampleDetailsRepoComment sampleId={sample.id} />
-                  </div>
-                </Col>
-                :
-                <div />
-            }
-          </Row>
-        </Panel.Body>
-      </Panel>
-    )
-  }
-}
-
-SampleDetails.propTypes = {
-  sample: PropTypes.object,
-  toggleFullScreen: PropTypes.func,
-  toggleCommentScreen: PropTypes.func.isRequired,
-  fullScreen: PropTypes.bool.isRequired
-}
diff --git a/app/packs/src/components/SampleDetailsContainers.js b/app/packs/src/components/SampleDetailsContainers.js
deleted file mode 100644
index c6b1487c2..000000000
--- a/app/packs/src/components/SampleDetailsContainers.js
+++ /dev/null
@@ -1,284 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-
-import Container from 'src/models/Container';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ArrayUtils from 'src/utilities/ArrayUtils';
-import { reOrderArr } from 'src/utilities/DndControl';
-import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
-
-import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
-import {
-  RndNotAvailable, RndNoAnalyses,
-  RndOrder, RndEdit
-} from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom';
-
-import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
-
-export default class SampleDetailsContainers extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      activeAnalysis: UIStore.getState().sample.activeAnalysis,
-      mode: 'edit',
-    };
-    this.onUIStoreChange = this.onUIStoreChange.bind(this);
-    this.addButton = this.addButton.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleUndo = this.handleUndo.bind(this);
-    this.handleRemove = this.handleRemove.bind(this);
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-    this.handleAdd = this.handleAdd.bind(this);
-    this.handleMove = this.handleMove.bind(this);
-    this.toggleAddToReport = this.toggleAddToReport.bind(this);
-    this.toggleMode = this.toggleMode.bind(this);
-    this.isEqCId = this.isEqCId.bind(this);
-    this.indexedContainers = this.indexedContainers.bind(this);
-    this.buildEmptyAnalyContainer = this.buildEmptyAnalyContainer.bind(this);
-    this.sortedContainers = this.sortedContainers.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIStoreChange);
-    TextTemplateActions.fetchTextTemplates('sample');
-  }
-
-  // componentWillReceiveProps(nextProps) {
-  // }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIStoreChange);
-  }
-
-  onUIStoreChange(state) {
-    if (state.sample.activeAnalysis !== this.state.activeAnalysis) {
-      this.setState({ activeAnalysis: state.sample.activeAnalysis });
-    }
-  }
-
-  handleChange(container) {
-    const { sample } = this.props;
-    // const analyses = sample.container.children.find(child => (
-    //   child.container_type === 'analyses'
-    // ));
-    // analyses.children.map((child, ind) => {
-    //   if (child.container_type === 'analysis' && child.id === container.id) {
-    //     analyses.children[ind] = container;
-    //   }
-    //   return null;
-    // });
-
-    this.props.handleSampleChanged(sample);
-  }
-
-  handleAdd() {
-    const { sample } = this.props;
-    const newContainer = this.buildEmptyAnalyContainer();
-
-    const sortedConts = this.sortedContainers(sample);
-    const newSortConts = [...sortedConts, newContainer];
-    const newIndexedConts = this.indexedContainers(newSortConts);
-
-    sample.analysesContainers()[0].children = newIndexedConts;
-    this.props.setState(prevState => ({ ...prevState, sample }),
-      this.handleAccordionOpen(newContainer.id),
-    );
-  }
-
-  handleMove(source, target) {
-    const { sample } = this.props;
-
-    const sortedConts = this.sortedContainers(sample);
-    const newSortConts = reOrderArr(source, target, this.isEqCId, sortedConts);
-    const newIndexedConts = this.indexedContainers(newSortConts);
-
-    sample.analysesContainers()[0].children = newIndexedConts;
-    this.props.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  sortedContainers(sample) {
-    const containers = sample.analysesContainers()[0].children;
-    return ArrayUtils.sortArrByIndex(containers);
-  }
-
-  buildEmptyAnalyContainer() {
-    const newContainer = Container.buildEmpty();
-    newContainer.container_type = "analysis";
-    newContainer.extended_metadata.content = { ops: [{ insert: '\n' }] };
-    return newContainer;
-  }
-
-  isEqCId(container, tagEl) {
-    return container.id === tagEl.cId;
-  }
-
-  indexedContainers(containers) {
-    return containers.map((c, i) => {
-      const container = c;
-      container.extended_metadata.index = i;
-      return container;
-    });
-  }
-
-  handleRemove(container) {
-    const { sample } = this.props;
-    container.is_deleted = true;
-
-    this.props.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  handleUndo(container) {
-    const { sample } = this.props;
-    container.is_deleted = false;
-
-    this.props.setState(prevState => ({ ...prevState, sample }));
-  }
-
-  handleAccordionOpen(newKey) {
-    this.setState((prevState) => {
-      const prevKey = prevState.activeAnalysis;
-      return {
-        ...prevState,
-        mode: 'edit',
-        activeAnalysis: prevKey === newKey ? 0 : newKey,
-      };
-    });
-  }
-
-  addButton() {
-    const { readOnly, sample } = this.props;
-    if (readOnly) {
-      return null;
-    }
-    return (
-      <Button
-        className="button-right"
-        bsSize="xsmall"
-        bsStyle="success"
-        onClick={this.handleAdd}
-        disabled={!sample.can_update}
-      >
-        <i className="fa fa-plus" />&nbsp;
-        Add analysis
-      </Button>
-    );
-  }
-
-  toggleAddToReport(container) {
-    if (this.props.publish) {
-      // TODO: use null and true because the Boolean value is coerced into string: check why
-      // container.extended_metadata.publish = container.extended_metadata.publish ? null : true;
-      if (container.extended_metadata.publish && (container.extended_metadata.publish === true || container.extended_metadata.publish === 'true')) {
-        container.extended_metadata.publish = false;
-      } else {
-        container.extended_metadata.publish = true;
-      }
-    } else {
-      container.extended_metadata.report = !container.extended_metadata.report;
-    }
-    this.handleChange(container);
-  }
-
-  toggleMode() {
-    const { mode } = this.state;
-    if (mode === 'edit') {
-      this.setState({ mode: 'order' });
-    } else {
-      this.setState({ mode: 'edit' });
-    }
-  }
-
-  render() {
-    const { activeAnalysis, mode } = this.state;
-    const {
-      readOnly, sample, handleSubmit, handleSampleChanged,
-    } = this.props;
-    const isDisabled = !sample.can_update;
-
-    if (sample.container == null) return <RndNotAvailable />;
-
-    const analyContainer = sample.analysesContainers();
-
-    if (analyContainer.length === 1 && analyContainer[0].children.length > 0) {
-      const orderContainers = ArrayUtils.sortArrByIndex(analyContainer[0].children);
-      let content = null;
-
-      if (mode === 'order') {
-        content = (
-          <RndOrder
-            sample={sample}
-            mode={mode}
-            orderContainers={orderContainers}
-            readOnly={readOnly}
-            isDisabled={isDisabled}
-            addButton={this.addButton}
-            handleRemove={this.handleRemove}
-            handleSubmit={handleSubmit}
-            handleMove={this.handleMove}
-            handleAccordionOpen={this.handleAccordionOpen}
-            handleUndo={this.handleUndo}
-            toggleAddToReport={this.toggleAddToReport}
-            toggleMode={this.toggleMode}
-            publish={this.props.publish}
-          />
-        );
-      } else {
-        content = (
-          <RndEdit
-            sample={sample}
-            mode={mode}
-            orderContainers={orderContainers}
-            activeAnalysis={activeAnalysis}
-            handleChange={this.handleChange}
-            handleUndo={this.handleUndo}
-            handleRemove={this.handleRemove}
-            handleSubmit={handleSubmit}
-            handleAccordionOpen={this.handleAccordionOpen}
-            toggleAddToReport={this.toggleAddToReport}
-            readOnly={readOnly}
-            isDisabled={isDisabled}
-            addButton={this.addButton}
-            toggleMode={this.toggleMode}
-            publish={this.props.publish}
-            isReviewer={this.props.isReviewer || false}
-          />
-        );
-      }
-
-      return (
-        <div>
-          {content}
-          <ViewSpectra
-            sample={sample}
-            handleSampleChanged={handleSampleChanged}
-            handleSubmit={handleSubmit}
-          />
-          <NMRiumDisplayer
-            sample={sample}
-            handleSampleChanged={handleSampleChanged}
-            handleSubmit={handleSubmit}
-          />
-        </div>
-      );
-    }
-    return (
-      <RndNoAnalyses
-        addButton={this.addButton}
-      />
-    );
-  }
-}
-
-SampleDetailsContainers.propTypes = {
-  readOnly: PropTypes.bool,
-  sample: PropTypes.object.isRequired,
-  handleSampleChanged: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  isReviewer: PropTypes.bool,
-};
-
-SampleDetailsContainers.defaultProps = {
-  readOnly: false,
-  isReviewer: false
-}
diff --git a/app/packs/src/components/SampleDetailsContainersAux.js b/app/packs/src/components/SampleDetailsContainersAux.js
deleted file mode 100644
index 990e49b20..000000000
--- a/app/packs/src/components/SampleDetailsContainersAux.js
+++ /dev/null
@@ -1,515 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, Checkbox, OverlayTrigger, Tooltip,
-  MenuItem, SplitButton, ButtonGroup
-} from 'react-bootstrap';
-import QuillViewer from 'src/components/QuillViewer';
-import PrintCodeButton from 'src/components/common/PrintCodeButton';
-import { stopBubble } from 'src/utilities/DomHelper';
-import ImageModal from 'src/components/common/ImageModal';
-import SpectraActions from 'src/stores/alt/actions/SpectraActions';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import { BuildSpcInfos, JcampIds, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
-import { hNmrCheckMsg, cNmrCheckMsg, msCheckMsg, instrumentText } from 'src/utilities/ElementUtils';
-import { contentToText } from 'src/utilities/quillFormat';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import { chmoConversions } from 'src/components/OlsComponent';
-import { previewContainerImage } from 'src/utilities/imageHelper';
-import MolViewerListBtn from 'src/components/viewer/MolViewerListBtn';
-import MolViewerSet from 'src/components/viewer/MolViewerSet';
-import { isNmrPass, isDatasetPass } from 'src/repoHome/RepoCommon';
-import MatrixCheck from 'src/components/common/MatrixCheck';
-
-import { PublishedTag } from './PublishCommon';
-import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-
-import { isNmrPass, isDatasetPass } from '../libHome/RepoCommon';
-
-import RepoMolViewerListBtn from '../libHome/RepoMolViewerListBtn';
-
-const qCheckPass = () => (
-  <div style={{ display: 'inline', color: 'green' }}>
-    &nbsp;
-    <i className="fa fa-check" />
-  </div>
-);
-
-const qCheckFail = (msg, kind, atomNum = '') => (
-  <div style={{ display: 'inline', color: 'red' }}>
-    &nbsp;
-    (<sup>{atomNum}</sup>{kind} {msg})
-  </div>
-);
-
-const qCheckMsg = (sample, container) => {
-  if (sample.can_publish === false && sample.can_update === false) { return ''; }
-  if (sample.molecule && container.extended_metadata &&
-    ((typeof container.extended_metadata.kind === 'undefined' || container.extended_metadata.kind == null ||
-      container.extended_metadata.kind.split('|').length < 2) ||
-      (container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_1h.termId
-        && container.extended_metadata.kind.split('|')[0].trim() !== chmoConversions.nmr_13c.termId
-        && !container.extended_metadata.kind.split('|')[1].includes('mass spectrometry'))
-    )) {
-    return '';
-  }
-  const str = container.extended_metadata && contentToText(container.extended_metadata.content);
-
-  if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_1h.termId) {
-    const msg = hNmrCheckMsg(sample.molecule_formula, str);
-    return msg === '' ? qCheckPass() : qCheckFail(msg, 'H', '1');
-  } else if (container.extended_metadata.kind.split('|')[0].trim() === chmoConversions.nmr_13c.termId) {
-    const msg = cNmrCheckMsg(sample.molecule_formula, str);
-    return msg === '' ? qCheckPass() : qCheckFail(msg, 'C', '13');
-  } else if (container.extended_metadata.kind.split('|')[1].includes('mass spectrometry')) {
-    const msg = msCheckMsg(sample.molecule.exact_molecular_weight, str);
-    return msg === '' ? qCheckPass() : qCheckFail(msg, 'MS', '');
-  }
-  return '';
-};
-
-const isNMRKind = (container) => {
-  if (container.extended_metadata.kind) {
-    return container.extended_metadata.kind.includes('NMR');
-  }
-  return false;
-}
-
-const SpectraEditorBtn = ({
-  sample, spcInfos, hasJcamp, hasChemSpectra,
-  toggleSpectraModal, confirmRegenerate, confirmRegenerateEdited, hasEditedJcamp,
-  toggleNMRDisplayerModal, hasNMRium, isReviewer
-}) => (
-  <span>
-    <OverlayTrigger
-    placement="bottom"
-    delayShow={500}
-    overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
-  >{spcInfos.length > 0 ? (
-    <ButtonGroup className="button-right">
-      <SplitButton
-        id="spectra-editor-split-button"
-        pullRight
-        bsStyle="info"
-        bsSize="xsmall"
-        title={<i className="fa fa-area-chart" />}
-        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-        onClick={toggleSpectraModal}
-        disabled={!(spcInfos.length > 0) || !hasChemSpectra}
-      >
-        <MenuItem
-          id="regenerate-spectra"
-          key="regenerate-spectra"
-          onSelect={(eventKey, event) => {
-            event.stopPropagation();
-            confirmRegenerate(event);
-          }}
-          disabled={!hasJcamp || !sample.can_update}
-        >
-          <i className="fa fa-refresh" /> Reprocess
-        </MenuItem>
-        {
-          hasEditedJcamp && isReviewer ?
-            (<MenuItem
-              id="regenerate-edited-spectra"
-              key="regenerate-edited-spectra"
-              onSelect={(eventKey, event) => {
-                event.stopPropagation();
-                confirmRegenerateEdited(event);
-              }}
-            >
-              <i className="fa fa-refresh" /> Regenerate .edit.jdx files
-            </MenuItem>) : <span></span>
-        }
-      </SplitButton>
-    </ButtonGroup>
-  ) : (
-    <Button
-      bsStyle="warning"
-      bsSize="xsmall"
-      className="button-right"
-      onClick={confirmRegenerate}
-      disabled={!hasJcamp || !sample.can_update || !hasChemSpectra}
-    >
-      <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
-    </Button>
-  )}
-  </OverlayTrigger>
-
-  {
-        hasNMRium ? (
-            <OverlayTrigger
-            placement="top"
-            delayShow={500}
-            overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
-            >
-                <ButtonGroup className="button-right">
-                    <Button
-                    id="spectra-editor-split-button"
-                    pullRight
-                    bsStyle="info"
-                    bsSize="xsmall"
-                    onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-                    onClick={toggleNMRDisplayerModal}
-                    disabled={!hasJcamp || !sample.can_update}
-                    >
-                    <i className="fa fa-bar-chart"/>
-                    </Button>
-                </ButtonGroup>
-            </OverlayTrigger>
-        ) : null
-    }
-  </span>
-);
-
-SpectraEditorBtn.propTypes = {
-  sample: PropTypes.object,
-  hasJcamp: PropTypes.bool,
-  spcInfos: PropTypes.array,
-  hasChemSpectra: PropTypes.bool,
-  toggleSpectraModal: PropTypes.func.isRequired,
-  confirmRegenerate: PropTypes.func.isRequired,
-  confirmRegenerateEdited: PropTypes.func.isRequired,
-  hasEditedJcamp: PropTypes.bool,
-  toggleNMRDisplayerModal: PropTypes.func.isRequired,
-  hasNMRium: PropTypes.bool,
-};
-
-SpectraEditorBtn.defaultProps = {
-  hasJcamp: false,
-  spcInfos: [],
-  sample: {},
-  hasChemSpectra: false,
-  hasEditedJcamp: false,
-  hasNMRium: false,
-};
-
-const editModeBtn = (toggleMode, isDisabled) => (
-  <Button
-    bsSize="xsmall"
-    bsStyle="primary"
-    onClick={toggleMode}
-    disabled={isDisabled}
-  >
-    <span>
-      <i className="fa fa-edit" />&nbsp;
-      Edit mode
-    </span>
-  </Button>
-);
-
-const orderModeBtn = (toggleMode, isDisabled) => (
-  <Button
-    bsSize="xsmall"
-    bsStyle="success"
-    onClick={toggleMode}
-    disabled={isDisabled}
-  >
-    <span>
-      <i className="fa fa-reorder" />&nbsp;
-      Order mode
-    </span>
-  </Button>
-);
-
-const AnalysisModeBtn = (mode, toggleMode, isDisabled) => {
-  switch (mode) {
-    case 'order':
-      return orderModeBtn(toggleMode, isDisabled);
-    default:
-      return editModeBtn(toggleMode, isDisabled);
-  }
-};
-
-const undoBtn = (container, mode, handleUndo) => {
-  const clickUndo = () => handleUndo(container);
-
-  if (mode === 'edit') {
-    return (
-      <Button
-        className="pull-right"
-        bsSize="xsmall"
-        bsStyle="danger"
-        onClick={clickUndo}
-      >
-        <i className="fa fa-undo" />
-      </Button>
-    );
-  }
-  return null;
-};
-
-const HeaderDeleted = ({ container, handleUndo, mode }) => {
-  const mKind = container.extended_metadata.kind;
-  const mStatus = container.extended_metadata.status;
-  const kind = (mKind && mKind !== '') ? ` - Type: ${(mKind.split('|')[1] || mKind).trim()}` : '';
-  const status = (mStatus && mStatus !== '') ? ` - Status: ${mStatus}` : '';
-
-  return (
-    <div className="analysis-header-delete">
-      <strike>
-        {container.name}
-        {kind}
-        {status}
-      </strike>
-      <div className="button-right undo-middle">
-        {undoBtn(container, mode, handleUndo)}
-      </div>
-    </div>
-  );
-};
-
-const headerBtnGroup = (
-  container, sample, mode, handleRemove, handleSubmit,
-  toggleAddToReport, isDisabled, readOnly,
-  publish, isReviewer
-) => {
-  if (mode !== 'edit') {
-    return null;
-  }
-
-  const inReport = container.extended_metadata.report;
-  const confirmDelete = (e) => {
-    e.stopPropagation();
-    if (confirm('Delete the analysis?')) {
-      handleRemove(container);
-    }
-  };
-  const onToggleAddToReport = (e) => {
-    e.stopPropagation();
-    toggleAddToReport(container);
-  };
-
-  // spcInfos = [ { value, label, title, idSp, idAe, idx, ... }, ...]
-  const spcInfos = BuildSpcInfos(sample, container);
-
-  const xm = container && container.extended_metadata;
-  const typeMissing = !xm.kind || ((xm.kind || '').split('|').length < 2);
-  const statusMissing = (xm.status || '') !== 'Confirmed';
-  const nmrMissing = !isNmrPass(container, sample);
-  const datasetMissing = !isDatasetPass(container);
-  const btnTip = () => {
-    const tip = [];
-    if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
-      if (typeMissing) tip.push('Type is invalid.');
-      if (statusMissing) tip.push('Status must be Confirmed.');
-      if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
-      if (datasetMissing) {
-        tip.push('Dataset is incomplete. Please check that: ');
-        tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
-        tip.push('2. the instrument field is not empty.');
-      }
-      return tip.join('\r\n');
-    }
-    return 'publish this analysis';
-  };
-
-  const addToLabelBtn = publish ? (
-   (xm.public_analysis ? null :
-     <OverlayTrigger
-       placement="left"
-       overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip()}</Tooltip>}
-     >
-       <div>
-      <Checkbox
-        onClick={onToggleAddToReport}
-        // TODO: use null and true because the Boolean value is coerced into string: check why
-            defaultChecked={(xm && (xm.publish && (xm.publish === true || xm.publish === 'true')) && !xm.public_analysis && xm.kind && !statusMissing && !nmrMissing && !datasetMissing) ? true : false}
-        disabled={!!xm.public_analysis || typeMissing || statusMissing || nmrMissing || datasetMissing}
-      >
-        {
-              (!!xm.public_analysis || typeMissing || statusMissing || nmrMissing || datasetMissing) ?
-                <span style={{ color: 'red' }}>Add to publication</span>
-                :
-                <span>Add to publication</span>
-        }
-      </Checkbox>
-      </div>
-    </OverlayTrigger>
-  )) : (
-    <Checkbox
-      onClick={onToggleAddToReport}
-      defaultChecked={inReport}
-      disabled={!sample.can_update}
-    >
-      <span>Add to Report</span>
-    </Checkbox>
-  );
-
-  const toggleSpectraModal = (e) => {
-    e.stopPropagation();
-    SpectraActions.ToggleModal();
-    SpectraActions.LoadSpectra.defer(spcInfos); // going to fetch files base on spcInfos
-  };
-
-  //process open NMRium
-  const toggleNMRDisplayerModal = (e) => {
-    const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(sample, container);
-    e.stopPropagation();
-    SpectraActions.ToggleModalNMRDisplayer();
-    SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
-  }
-
-  const jcampIds = JcampIds(container);
-  const hasJcamp = jcampIds.orig.length > 0;
-  const confirmRegenerate = (e) => {
-    e.stopPropagation();
-    if (confirm('Regenerate spectra?')) {
-      LoadingActions.start();
-      SpectraActions.Regenerate(jcampIds, handleSubmit);
-    }
-  };
-
-  const hasEditedJcamp = jcampIds.edited.length > 0;
-  const confirmRegenerateEdited = (e) => {
-    e.stopPropagation();
-    if (confirm('Regenerate edited spectra?\nWARNING: This process will override the simulated signals')) {
-      LoadingActions.start();
-      SpectraActions.RegenerateEdited(jcampIds, sample.molfile, () => {
-        LoadingActions.stop();
-      });
-    }
-  }
-
-  const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
-  const { chmos } = UserStore.getState();
-  const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
-
-  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  const enableMoleculeViewer = MatrixCheck(currentUser.matrix, MolViewerSet.PK);
-
-  return (
-    <div className="upper-btn">
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        className="button-right"
-        disabled={readOnly || isDisabled}
-        onClick={confirmDelete}
-      >
-        <i className="fa fa-trash" />
-      </Button>
-      <PrintCodeButton
-        element={sample}
-        analyses={[container]}
-        ident={container.id}
-      />
-      <SpectraEditorBtn
-        sample={sample}
-        hasJcamp={hasJcamp}
-        spcInfos={spcInfos}
-        hasChemSpectra={hasChemSpectra}
-        hasEditedJcamp={hasEditedJcamp}
-        toggleSpectraModal={toggleSpectraModal}
-        confirmRegenerate={confirmRegenerate}
-        confirmRegenerateEdited={confirmRegenerateEdited}
-        toggleNMRDisplayerModal={toggleNMRDisplayerModal}
-        hasNMRium={hasNMRium}
-        isReviewer={isReviewer}
-        confirmRegenerateEdited={confirmRegenerateEdited}
-        toggleNMRDisplayerModal={toggleNMRDisplayerModal}
-        hasNMRium={hasNMRium}
-      />
-      <span className="button-right">
-        <MolViewerListBtn el={sample} container={container} isPublic={false} disabled={!enableMoleculeViewer} />
-      </span>
-      <span
-        className="button-right add-to-report"
-        onClick={stopBubble}
-      >
-        {addToLabelBtn}
-      </span>
-    </div>
-  );
-};
-
-const HeaderNormal = ({
-  sample, container, mode, readOnly, isDisabled, serial,
-  handleRemove, handleSubmit, handleAccordionOpen, toggleAddToReport,
-  publish,isReviewer
-}) => {
-  const clickToOpen = () => handleAccordionOpen(serial);
-
-  let kind = container.extended_metadata.kind || '';
-  kind = (kind.split('|')[1] || kind).trim();
-  let insText = '';
-  if (typeof publish === 'undefined' || publish === null || publish === false) {
-    insText = instrumentText(container);
-  }
-  const status = container.extended_metadata.status || '';
-  const previewImg = previewContainerImage(container);
-  const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
-  const contentOneLine = {
-    ops: content.ops.map((x) => {
-      const c = Object.assign({}, x);
-      if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
-      return c;
-    }),
-  };
-  let hasPop = true;
-  let fetchNeeded = false;
-  let fetchId = 0;
-  if (previewImg.startsWith('data:image')) {
-    fetchNeeded = true;
-    fetchId = container.preview_img.id;
-  } else {
-    hasPop = false;
-  }
-  const nmrMissing = !isNmrPass(container, sample);
-
-  let statusChk = (status !== 'Confirmed' || nmrMissing);
-  if (sample.can_publish === false && sample.can_update === false) {
-    statusChk = false;
-  }
-
-  return (
-    <div
-      className={`analysis-header ${mode === 'edit' ? '' : 'order'}`}
-      onClick={clickToOpen}
-    >
-      <div className="preview">
-        <ImageModal
-          hasPop={hasPop}
-          previewObject={{
-            src: previewImg
-          }}
-          popObject={{
-            title: container.name,
-            src: previewImg,
-            fetchNeeded,
-            fetchId
-          }}
-        />
-      </div>
-      <div className="abstract">
-        {
-          headerBtnGroup(
-            container, sample, mode, handleRemove, handleSubmit,
-            toggleAddToReport, isDisabled, readOnly,
-            publish, isReviewer
-          )
-        }
-        <div className="lower-text">
-          <div className="main-title">
-            {container.name}
-          </div>
-          <div className="sub-title" style={kind === '' ? { color: 'red' } : null}>
-            Type: {kind}
-          </div>
-          <div className="sub-title">
-            <span style={statusChk ? { color: 'red' } : null}>Status:</span> {status} {qCheckMsg(sample, container)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}
-          </div>
-          <div className="desc sub-title">
-            <span style={{ float: 'left', marginRight: '5px' }}>
-              Content:
-            </span>
-            <QuillViewer value={contentOneLine} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export { HeaderDeleted, HeaderNormal, AnalysisModeBtn };
diff --git a/app/packs/src/components/SampleDetailsContainersCom.js b/app/packs/src/components/SampleDetailsContainersCom.js
deleted file mode 100644
index e46bc6db5..000000000
--- a/app/packs/src/components/SampleDetailsContainersCom.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import { PanelGroup, Panel } from 'react-bootstrap';
-import ContainerComponent from './ContainerComponent';
-import ContainerRow from './SampleDetailsContainersDnd';
-import {
-  HeaderDeleted,
-  HeaderNormal,
-  AnalysisModeBtn
-} from './SampleDetailsContainersAux';
-
-const RndNotAvailable = () => (
-  <div>
-    <p className="noAnalyses-warning">
-      Not available.
-    </p>
-  </div>
-);
-
-const RndNoAnalyses = ({ addButton }) => (
-  <div>
-    <p>{addButton()}</p>
-    <p className="noAnalyses-warning">
-      There are currently no Analyses.
-    </p>
-  </div>
-);
-
-const RndOrder = ({
-  sample, mode, readOnly, isDisabled, handleRemove, handleSubmit,
-  handleMove, handleUndo, handleAccordionOpen, toggleAddToReport, toggleMode,
-  orderContainers, addButton, publish
-}) => {
-  return (
-    <div>
-      <p>{AnalysisModeBtn(mode, toggleMode, isDisabled)}{addButton()}</p>
-      {
-        orderContainers.map((container, i) => {
-          const id = container.id || `fake_${i}`;
-          return (
-            <ContainerRow
-              sample={sample}
-              mode={mode}
-              container={container}
-              readOnly={readOnly}
-              isDisabled={isDisabled}
-              key={`${id}CRowOrder`}
-              addButton={addButton}
-              handleMove={handleMove}
-              handleRemove={handleRemove}
-              handleSubmit={handleSubmit}
-              handleAccordionOpen={handleAccordionOpen}
-              handleUndo={handleUndo}
-              toggleAddToReport={toggleAddToReport}
-              publish={publish}
-            />
-          );
-        })
-      }
-      <p>{addButton()}</p>
-    </div>
-  );
-};
-
-const panelOnSelect = () => {};
-
-const RndEdit = ({
-  sample, mode, handleRemove, handleSubmit, handleAccordionOpen,
-  toggleAddToReport, toggleMode, activeAnalysis, orderContainers, readOnly,
-  isDisabled, addButton, handleChange, handleUndo,
-  publish, isReviewer
-}) => {
-  const headerDeletedFunc = container => (
-    <HeaderDeleted
-      container={container}
-      handleUndo={handleUndo}
-      mode={mode}
-    />
-  );
-
-  const headerNormalFunc = (container, serial) => (
-    <HeaderNormal
-      sample={sample}
-      container={container}
-      mode={mode}
-      serial={serial}
-      handleUndo={handleUndo}
-      readOnly={readOnly}
-      isDisabled={isDisabled}
-      handleRemove={handleRemove}
-      handleSubmit={handleSubmit}
-      handleAccordionOpen={handleAccordionOpen}
-      toggleAddToReport={toggleAddToReport}
-      publish={publish}
-      isReviewer={isReviewer || false}
-    />
-  );
-
-  return (
-    <div>
-      { publish ? null :
-      <p>{AnalysisModeBtn(mode, toggleMode, isDisabled)}{addButton()}</p>
-      }
-      <PanelGroup
-        id="editable-analysis-list"
-        defaultActiveKey={0}
-        activeKey={activeAnalysis}
-        onSelect={panelOnSelect}
-        accordion
-      >
-        {orderContainers.map((container, i) => {
-          const id = container.id || `fake_${i}`;
-          if (container.is_deleted) {
-            return (
-              <Panel
-                eventKey={id}
-                key={`${id}CRowEdit`}
-              >
-                <Panel.Heading>{headerDeletedFunc(container)}</Panel.Heading>
-              </Panel>
-            );
-          }
-
-          return (
-            <Panel
-              eventKey={id}
-              key={`${id}CRowEdit`}
-            >
-              <Panel.Heading>{headerNormalFunc(container, id)}</Panel.Heading>
-              <Panel.Body collapsible>
-                <ContainerComponent
-                  templateType="sample"
-                  readOnly={readOnly}
-                  container={container}
-                  disabled={isDisabled}
-                  onChange={handleChange}
-                />
-              </Panel.Body>
-            </Panel>
-          );
-        })}
-      </PanelGroup>
-      <p>{addButton()}</p>
-    </div>
-  );
-};
-
-export { RndNotAvailable, RndNoAnalyses, RndOrder, RndEdit };
diff --git a/app/packs/src/components/SampleDetailsContainersDnd.js b/app/packs/src/components/SampleDetailsContainersDnd.js
deleted file mode 100644
index 85dd1e4cd..000000000
--- a/app/packs/src/components/SampleDetailsContainersDnd.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import { HeaderDeleted, HeaderNormal } from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux';
-
-const orderSource = {
-  beginDrag(props) {
-    const { container, sample } = props;
-    return { cId: container.id, sId: sample.id };
-  },
-};
-
-const orderTarget = {
-  drop(targetProps, monitor) {
-    const { container, sample, handleMove } = targetProps;
-    const tgTag = { cId: container.id, sId: sample.id };
-    const scTag = monitor.getItem();
-    if (tgTag.sId === scTag.sId && tgTag.cId !== scTag.cId) {
-      handleMove(scTag, tgTag);
-    }
-  },
-};
-
-const orderDragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const orderDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const ContainerRow = ({
-  sample, container, mode, readOnly, isDisabled, handleRemove,
-  handleSubmit, handleAccordionOpen, toggleAddToReport, handleUndo,
-  connectDragSource, connectDropTarget, isDragging, isOver, canDrop, publish
-}) => {
-  const style = {};
-  if (canDrop) {
-    style.borderStyle = 'dashed';
-    style.borderWidth = 2;
-  }
-  if (isOver) {
-    style.borderColor = '#337ab7';
-  }
-  if (isDragging) {
-    style.opacity = 0.2;
-  }
-
-  const oPanelCN = container.is_deleted ? "order-panel-delete" : "order-panel";
-
-  return compose(connectDragSource, connectDropTarget)(
-    <div className={oPanelCN} style={style}>
-      <div className="dnd-btn">
-        <span className="text-info fa fa-arrows" />
-      </div>
-      {
-        container.is_deleted
-          ? <HeaderDeleted
-            container={container}
-            handleUndo={handleUndo}
-            mode={mode}
-          />
-          : <HeaderNormal
-            sample={sample}
-            container={container}
-            mode={mode}
-            handleUndo={handleUndo}
-            readOnly={readOnly}
-            isDisabled={isDisabled}
-            handleRemove={handleRemove}
-            handleSubmit={handleSubmit}
-            handleAccordionOpen={handleAccordionOpen}
-            toggleAddToReport={toggleAddToReport}
-            publish={publish}
-          />
-      }
-    </div>,
-  );
-};
-
-export default compose(
-  DragSource(DragDropItemTypes.CONTAINER, orderSource, orderDragCollect),
-  DropTarget(DragDropItemTypes.CONTAINER, orderTarget, orderDropCollect),
-)(ContainerRow);
diff --git a/app/packs/src/components/SampleDetailsRepoComment.js b/app/packs/src/components/SampleDetailsRepoComment.js
deleted file mode 100644
index b70cc6d64..000000000
--- a/app/packs/src/components/SampleDetailsRepoComment.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import RepositoryFetcher from './fetchers/RepositoryFetcher';
-import LoadingActions from './actions/LoadingActions';
-import ReviewStore from '../components/stores/ReviewStore';
-import RepoSampleDetails from '../libHome/RepoSampleDetails';
-import ReviewActions from './actions/ReviewActions';
-
-export default class SampleDetailsRepoComment extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      element: null,
-      review_info: {}
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    ReviewStore.listen(this.onStoreChange);
-    LoadingActions.start();
-    ReviewActions.fetchSample(this.props.sampleId);
-  }
-
-  componentWillUnmount() {
-    ReviewStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleReviewUpdate(review) {
-    this.setState({ review });
-  }
-
-  render() {
-    const { element, review_info } = this.state;
-    return element && element.sample && element.publication ?
-      (
-        <RepoSampleDetails
-          element={element}
-          canComment
-          review_info={review_info}
-          onReviewUpdate={this.handleReviewUpdate}
-          review={this.state.review || {}}
-          canClose={false}
-          buttons={['Comments']}
-        />) : <div>No Publication found</div>;
-  }
-}
-
-SampleDetailsRepoComment.propTypes = {
-  sampleId: PropTypes.number.isRequired,
-};
diff --git a/app/packs/src/components/SampleDetailsSolvents.js b/app/packs/src/components/SampleDetailsSolvents.js
deleted file mode 100644
index 5a54cc5e2..000000000
--- a/app/packs/src/components/SampleDetailsSolvents.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  ListGroup, ListGroupItem, Collapse, Button, ButtonGroup
-} from 'react-bootstrap';
-import Sample from './models/Sample';
-import Molecule from './models/Molecule';
-import SampleDetailsSolventsDnd from './SampleDetailsSolventsDnd';
-
-
-export default class SampleDetailsSolvents extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { sample } = props;
-    this.state = {
-      open: false,
-      sample: sample
-    };
-
-    this.dropSample = this.dropSample.bind(this);
-    this.deleteSolvent = this.deleteSolvent.bind(this);
-    this.onChangeSolvent = this.onChangeSolvent.bind(this);
-  }
-
-  onChangeSolvent(solvent) {
-    const { sample } = this.state;
-    sample.updateSolvent(solvent);
-    this.props.onChange(sample);
-  }
-
-  dropSample(srcSample, tagMaterial, tagGroup, extLabel, isNewSample = false) {
-    const { sample } = this.state;
-    let splitSample;
-
-    if (srcSample instanceof Molecule || isNewSample) {
-      // Create new Sample with counter
-      splitSample = Sample.buildNew(srcSample, sample.collection_id, tagGroup);
-    } else if (srcSample instanceof Sample) {
-      splitSample = srcSample.buildChild();
-    }
-
-    sample.addSolvent(splitSample);
-    this.props.onChange(sample);
-  }
-
-  deleteSolvent(solvent) {
-    const { sample } = this.state;
-    sample.deleteSolvent(solvent);
-    this.props.onChange(sample);
-  }
-
-  solventCollapseBtn() {
-    const { open } = this.state;
-    const arrow = open
-      ? <i className="fa fa-angle-double-up" />
-      : <i className="fa fa-angle-double-down" />;
-    return (
-      <ButtonGroup vertical block>
-        <Button
-          id="Solvents"
-          bsSize="xsmall"
-          style={{ backgroundColor: '#ddd' }}
-          onClick={() => this.setState({ open: !open })}
-        >{arrow} &nbsp; Solvents
-        </Button>
-      </ButtonGroup>
-    );
-  }
-
-  render() {
-    const {
-      sample, isOver, canDrop
-    } = this.props;
-    const minPadding = { padding: '1px 2px 2px 0px' };
-    const style = {
-      padding: '2px 5px',
-    };
-    if (isOver && canDrop) {
-      style.borderStyle = 'dashed';
-      style.borderColor = '#337ab7';
-    } else if (canDrop) {
-      style.borderStyle = 'dashed';
-    }
-    return (
-      <div>
-        <ListGroup fill="true">
-          <ListGroupItem style={minPadding}>
-            { this.solventCollapseBtn() }
-            <Collapse in={this.state.open}>
-              <div>
-                <SampleDetailsSolventsDnd
-                  sample={sample}
-                  dropSample={this.dropSample}
-                  deleteSolvent={this.deleteSolvent}
-                  onChangeSolvent={this.onChangeSolvent}
-                />
-              </div>
-            </Collapse>
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-}
-
-SampleDetailsSolvents.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  onChange: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
-
-SampleDetailsSolvents.defaultProps = {
-  canDrop: true,
-  isOver: false
-};
diff --git a/app/packs/src/components/SampleDetailsSolventsDnd.js b/app/packs/src/components/SampleDetailsSolventsDnd.js
deleted file mode 100644
index 508abf73b..000000000
--- a/app/packs/src/components/SampleDetailsSolventsDnd.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, FormControl, Glyphicon
-} from 'react-bootstrap';
-import { DropTarget } from 'react-dnd';
-import VirtualizedSelect from 'react-virtualized-select';
-import DragDropItemTypes from './DragDropItemTypes';
-import Sample from './models/Sample';
-import Molecule from './models/Molecule';
-import MoleculesFetcher from './fetchers/MoleculesFetcher';
-import { ionic_liquids } from './staticDropdownOptions/ionic_liquids';
-import { defaultMultiSolventsSmilesOptions } from './staticDropdownOptions/options';
-
-const target = {
-  drop(tagProps, monitor) {
-    const { dropSample } = tagProps;
-    const srcItem = monitor.getItem();
-    const srcType = monitor.getItemType();
-    if (srcType === DragDropItemTypes.SAMPLE) {
-      dropSample(srcItem.element);
-    } else if (srcType === DragDropItemTypes.MOLECULE) {
-      dropSample(
-        srcItem.element,
-        null,
-        true,
-      );
-    }
-  },
-  canDrop(tagProps, monitor) {
-    const srcType = monitor.getItemType();
-    const isCorrectType = srcType === DragDropItemTypes.SAMPLE
-      || srcType === DragDropItemTypes.MOLECULE;
-    return isCorrectType;
-  },
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-const SolventDetails = ({solvent, deleteSolvent, onChangeSolvent}) => {
-  if (!solvent) {
-    return (<></>)
-  }
-
-  const changeLabel = (event) => {
-    solvent.label = event.target.value;
-    onChangeSolvent(solvent);
-  }
-
-  const changeRatio = (event) => {
-    solvent.ratio = event.target.value;
-    onChangeSolvent(solvent);
-  }
-
-  // onChangeRatio
-  return (
-    <tr>
-      <td width="5%"></td>
-      <td width="50%">
-        <FormControl
-          bsClass="bs-form--compact form-control"
-          bsSize="small"
-          type="text"
-          name="solvent_label"
-          value={solvent.label}
-          onChange={changeLabel}
-          disabled
-        />
-      </td>
-      <td width="26%">
-        <FormControl
-          bsClass="bs-form--compact form-control"
-          bsSize="small"
-          type="number"
-          name="solvent_ratio"
-          value={solvent.ratio}
-          onChange={changeRatio}
-        />
-      </td>
-      <td>
-        <Button
-          bsStyle="danger"
-          bsSize="small"
-          onClick={() => deleteSolvent(solvent)}
-        >
-          <i className="fa fa-trash-o" />
-        </Button>
-      </td>
-    </tr>
-  )
-};
-
-const SolventsGroup = ({
-  materialGroup, sample, addDefaultSolvent, deleteSolvent, onChangeSolvent
-}) => {
-  const contents = []
-  const sampleSolvents = sample.solvent
-  if (sampleSolvents && sampleSolvents.length > 0) {
-    let key = -1
-    sampleSolvents.forEach((solv) => {
-      key += 1
-      contents.push((
-        <SolventDetails
-          key={key}
-          solvent={solv}
-          deleteSolvent={deleteSolvent}
-          onChangeSolvent={onChangeSolvent}
-        />
-      ))
-    })
-  }
-
-  const createDefaultSolvents = (event) => {
-    const solvent = event.value;
-    // MoleculesFetcher.fetchByMolfile(solvent.molfile)
-    const smi = solvent.smiles;
-    MoleculesFetcher.fetchBySmi(smi)
-      .then((result) => {
-        const molecule = new Molecule(result);
-        const d = molecule.density;
-        const solventDensity = solvent.density || 1;
-        molecule.density = (d && d > 0) || solventDensity;
-        addDefaultSolvent(molecule, null, materialGroup, solvent.external_label);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  };
-
-  const solventOptions = Object.keys(ionic_liquids).reduce(
-    (solvents, ionicLiquid) => solvents.concat({
-      label: ionicLiquid,
-      value: {
-        external_label: ionicLiquid,
-        smiles: ionic_liquids[ionicLiquid],
-        density: 1.0
-      }
-    }), defaultMultiSolventsSmilesOptions
-  );
-
-  return (
-    <div>
-      <table width="100%" className="reaction-scheme">
-        <thead>
-          <tr>
-            <th width="5%"></th>
-            <th width="95%">
-              <VirtualizedSelect
-                className="solvents-select"
-                name="default solvents"
-                multi={false}
-                options={solventOptions}
-                placeholder="Select solvents or drag-n-drop molecules from the sample list"
-                onChange={createDefaultSolvents}
-              />
-            </th>
-          </tr>
-        </thead>
-      </table>
-      <table width="100%" className="reaction-scheme">
-        <thead>
-          <tr>
-            <th width="5%"></th>
-            <th width="50%">Label</th>
-            <th width="26%">Ratio</th>
-            <th width="3%" />
-          </tr>
-        </thead>
-        <tbody>
-          {contents.map(item => item)}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-class SampleDetailsSolventsDnd extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      sample,
-      isOver, canDrop, connectDropTarget, dropSample, deleteSolvent, onChangeSolvent
-    } = this.props;
-    const style = {
-      padding: '2px 5px',
-    };
-    if (isOver && canDrop) {
-      style.borderStyle = 'dashed';
-      style.borderColor = '#337ab7';
-    } else if (canDrop) {
-      style.borderStyle = 'dashed';
-    }
-    return connectDropTarget(
-      <div style={style}>
-        <SolventsGroup
-          sample={sample}
-          addDefaultSolvent={dropSample}
-          deleteSolvent={deleteSolvent}
-          onChangeSolvent={onChangeSolvent}
-          />
-      </div>
-    );
-  }
-}
-
-export default DropTarget(
-  [DragDropItemTypes.SAMPLE, DragDropItemTypes.MOLECULE],
-  target,
-  collect,
-)(SampleDetailsSolventsDnd);
-
-SampleDetailsSolventsDnd.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  headIndex: PropTypes.number,
-  onChangeSolvent: PropTypes.func.isRequired,
-  dropSample: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  deleteSolvent: PropTypes.func.isRequired,
-}
diff --git a/app/packs/src/components/SampleForm.js b/app/packs/src/components/SampleForm.js
deleted file mode 100644
index 7140c9ec9..000000000
--- a/app/packs/src/components/SampleForm.js
+++ /dev/null
@@ -1,676 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, Checkbox, FormGroup, FormControl, InputGroup, ControlLabel,
-  Table, Glyphicon, Tabs, Tab, OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-import Select from 'react-select';
-import DetailActions from './actions/DetailActions';
-import NumeralInputWithUnitsCompo from './NumeralInputWithUnitsCompo';
-import TextRangeWithAddon from './TextRangeWithAddon';
-import { solventOptions } from './staticDropdownOptions/options';
-import SampleDetailsSolvents from './SampleDetailsSolvents';
-import PrivateNoteElement from './PrivateNoteElement';
-import NotificationActions from './actions/NotificationActions';
-import { permitOn } from './common/uis';
-
-
-export default class SampleForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      molarityBlocked: (props.sample.molarity_value || 0) <= 0,
-      isMolNameLoading: false,
-      moleculeFormulaWas: props.sample.molecule_formula,
-    };
-
-    this.handleFieldChanged = this.handleFieldChanged.bind(this);
-    this.updateMolName = this.updateMolName.bind(this);
-    this.updateStereoAbs = this.updateStereoAbs.bind(this);
-    this.updateStereoRel = this.updateStereoRel.bind(this);
-    this.addMolName = this.addMolName.bind(this);
-    this.showStructureEditor = this.showStructureEditor.bind(this);
-    this.handleRangeChanged = this.handleRangeChanged.bind(this);
-    this.handleSolventChanged = this.handleSolventChanged.bind(this);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps() {
-    this.setState({ isMolNameLoading: false });
-  }
-
-  formulaChanged() {
-    return this.props.sample.molecule_formula !== this.state.moleculeFormulaWas;
-  }
-
-  handleAmountChanged(amount) {
-    this.props.sample.setAmount(amount);
-  }
-
-  handleMolarityChanged(molarity) {
-    this.props.sample.setMolarity(molarity);
-    this.setState({ molarityBlocked: false });
-  }
-
-  handleDensityChanged(density) {
-    this.props.sample.setDensity(density);
-    this.setState({ molarityBlocked: true });
-  }
-
-  handleMolecularMassChanged(mass) {
-    this.props.sample.setMolecularMass(mass);
-  }
-
-  handleSolventChanged(sample) {
-    this.props.parent.setState({ sample });
-  }
-
-  showStructureEditor() {
-    this.props.parent.setState({
-      showStructureEditor: true,
-    });
-  }
-
-
-  structureEditorButton(isDisabled) {
-    return (
-      <Button
-        onClick={this.showStructureEditor}
-        disabled={isDisabled}
-      >
-        <Glyphicon glyph="pencil" />
-      </Button>
-    );
-  }
-
-  // Info button display info message when one hover over it
-  infoButton() {
-    return (
-      <div>
-        <OverlayTrigger placement="top" overlay={this.infoMessage()}>
-          <Button
-            className="btn btn-circle btn-sm btn-info"
-          >
-            <Glyphicon glyph="info-sign" />
-          </Button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-
-  infoMessage = () => (
-    <Tooltip id="assignButton">
-      Information mirrored to the reaction table describing the content of pure
-      compound or amount of pure compound in a given solution
-    </Tooltip>
-  )
-
-  // Input components of sample details should be disabled if detail level
-  // does not allow to read their content
-  topSecretCheckbox(sample) {
-    if (permitOn(sample)) {
-      return (
-        <Checkbox
-          inputRef={(ref) => { this.topSecretInput = ref; }}
-          checked={sample.is_top_secret}
-          onChange={e => this.handleFieldChanged('is_top_secret', e.target.checked)}
-        >
-          Top secret
-        </Checkbox>
-      );
-    }
-
-    return (<span />);
-  }
-
-  decoupledCheckbox(sample) {
-    if (permitOn(sample)) {
-      return (
-        <Checkbox
-          inputRef={(ref) => { this.decoupledInput = ref; }}
-          checked={sample.decoupled}
-          onChange={e => this.handleFieldChanged('decoupled', e.target.checked)}
-        >
-          Decoupled
-        </Checkbox>
-      );
-    }
-
-    return (<span />);
-  }
-
-  openMolName(sample) {
-    this.setState({ isMolNameLoading: true });
-    DetailActions.updateMoleculeNames(sample);
-  }
-
-  addMolName(moleculeName) {
-    this.setState({ isMolNameLoading: true });
-    DetailActions.updateMoleculeNames(this.props.sample, moleculeName.label);
-  }
-
-  updateMolName(e) {
-    const { sample } = this.props;
-    sample.molecule_name = e;
-    this.props.parent.setState({ sample });
-  }
-
-  updateStereoAbs(e) {
-    const { sample } = this.props;
-    if (!sample.stereo) sample.stereo = {};
-    sample.stereo.abs = e.value;
-    this.props.parent.setState({ sample });
-  }
-
-  updateStereoRel(e) {
-    const { sample } = this.props;
-    if (!sample.stereo) sample.stereo = {};
-    sample.stereo.rel = e.value;
-    this.props.parent.setState({ sample });
-  }
-
-  stereoAbsInput() {
-    const { sample } = this.props;
-
-    const absOptions = [
-      { label: 'any', value: 'any' },
-      { label: 'rac', value: 'rac' },
-      { label: 'meso', value: 'meso' },
-      { label: 'delta', value: 'delta' },
-      { label: 'lambda', value: 'lambda' },
-      { label: '(S)', value: '(S)' },
-      { label: '(R)', value: '(R)' },
-      { label: '(Sp)', value: '(Sp)' },
-      { label: '(Rp)', value: '(Rp)' },
-      { label: '(Sa)', value: '(Sa)' },
-      { label: '(Ra)', value: '(Ra)' },
-    ];
-
-    const value = sample.stereo ? sample.stereo.abs : 'any';
-
-    return (
-      <FormGroup style={{ width: '50%', paddingRight: '10px' }}>
-        <ControlLabel>Stereo Abs</ControlLabel>
-        <Select
-          name="stereoAbs"
-          clearable={false}
-          disabled={!permitOn(sample)}
-          options={absOptions}
-          onChange={this.updateStereoAbs}
-          value={value}
-        />
-      </FormGroup>
-    );
-  }
-
-  stereoRelInput() {
-    const { sample } = this.props;
-
-    const relOptions = [
-      { label: 'any', value: 'any' },
-      { label: 'syn', value: 'syn' },
-      { label: 'anti', value: 'anti' },
-      { label: 'p-geminal', value: 'p-geminal' },
-      { label: 'p-ortho', value: 'p-ortho' },
-      { label: 'p-meta', value: 'p-meta' },
-      { label: 'p-para', value: 'p-para' },
-      { label: 'cis', value: 'cis' },
-      { label: 'trans', value: 'trans' },
-      { label: 'fac', value: 'fac' },
-      { label: 'mer', value: 'mer' },
-    ];
-
-    const value = sample.stereo ? sample.stereo.rel : 'any';
-
-    return (
-      <FormGroup style={{ width: '50%' }}>
-        <ControlLabel>Stereo Rel</ControlLabel>
-        <Select
-          name="stereoRel"
-          clearable={false}
-          disabled={!permitOn(sample)}
-          options={relOptions}
-          onChange={this.updateStereoRel}
-          value={value}
-        />
-      </FormGroup>
-    );
-  }
-
-  moleculeInput() {
-    const { sample } = this.props;
-    const mnos = sample.molecule_names;
-    const mno = sample.molecule_name;
-    const newMolecule = !mno || sample._molecule.id !== mno.mid;
-    let moleculeNames = newMolecule ? [] : [mno];
-    if (sample && mnos) { moleculeNames = moleculeNames.concat(mnos); }
-    const onOpenMolName = () => this.openMolName(sample);
-    return (
-      <FormGroup style={{ width: '100%', paddingRight: '10px' }}>
-        <ControlLabel>Molecule</ControlLabel>
-        <InputGroup>
-          <Select.Creatable
-            name="moleculeName"
-            multi={false}
-            disabled={!permitOn(sample)}
-            options={moleculeNames}
-            onOpen={onOpenMolName}
-            onChange={this.updateMolName}
-            isLoading={this.state.isMolNameLoading}
-            value={!newMolecule && mno && mno.value}
-            onNewOptionClick={this.addMolName}
-            clearable={false}
-          />
-          <InputGroup.Button>
-            {this.structureEditorButton(!permitOn(sample))}
-          </InputGroup.Button>
-        </InputGroup>
-      </FormGroup>
-    );
-  }
-
-  handleRangeChanged(field, lower, upper) {
-    const { sample } = this.props;
-    sample.updateRange(field, lower, upper);
-    this.props.parent.setState({ sample });
-  }
-
-  handleFieldChanged(field, e) {
-    const { sample } = this.props;
-    if (field === 'purity' && (e.value < 0 || e.value > 1)) {
-      e.value = 1;
-      sample[field] = e.value;
-      NotificationActions.add({
-        message: 'Purity value should be >= 0 and <=1',
-        level: 'error'
-      });
-    } else if (/amount/.test(field)) {
-      this.handleAmountChanged(e);
-    } else if (/molarity/.test(field)) {
-      this.handleMolarityChanged(e);
-    } else if (/density/.test(field)) {
-      this.handleDensityChanged(e);
-    } else if (/molecular_mass/.test(field)) {
-      this.handleMolecularMassChanged(e);
-    } else if (/^xref_/.test(field)) {
-      const key = field.split('xref_')[1];
-      sample.xref[key] = e;
-    } else if (e && (e.value || e.value === 0)) {
-      // for numeric inputs
-      sample[field] = e.value;
-    } else {
-      sample[field] = e;
-    }
-
-    sample.formulaChanged = this.formulaChanged();
-
-    if (field === 'decoupled') {
-      if (!sample[field]) {
-        sample.sum_formula = '';
-      } else {
-        if (sample.sum_formula.trim() === '') sample.sum_formula = 'undefined structure';
-        if (sample.residues && sample.residues[0] && sample.residues[0].custom_info) {
-          sample.residues[0].custom_info.polymer_type = 'self_defined';
-          delete sample.residues[0].custom_info.surface_type;
-        }
-      }
-      if (!sample[field] && ((sample.molfile || '') === '')) {
-        this.props.parent.setState({ sample });
-      } else {
-        this.props.parent.setState({ sample }, this.props.decoupleMolecule);
-      }
-    } else { this.props.parent.setState({ sample }); }
-  }
-
-  textInput(sample, field, label, disabled = false) {
-    return (
-      <FormGroup bsSize="small">
-        <ControlLabel>{label}</ControlLabel>
-        <FormControl
-          id={`txinput_${field}`}
-          type="text"
-          value={(/^xref_/.test(field) ? sample.xref[field.split('xref_')[1]] : sample[field]) || ''}
-          onChange={(e) => { this.handleFieldChanged(field, e.target.value); }}
-          disabled={disabled || !permitOn(sample)}
-          readOnly={disabled || !permitOn(sample)}
-        />
-      </FormGroup>
-    );
-  }
-
-  sampleSolvent(sample) {
-    return (
-      <Select
-        ref={(input) => { this.solventInput = input; }}
-        id="solventInput"
-        name="solvents"
-        style={{ marginBottom: '15px' }}
-        multi={false}
-        options={solventOptions}
-        value={sample.solvent}
-        disabled={!permitOn(sample)}
-        onChange={e => this.handleFieldChanged('solvent', e)}
-      />
-    );
-  }
-
-  attachedAmountInput(sample, size) {
-    if (!sample.contains_residues) return false;
-
-    return this.numInput(
-      sample, 'defined_part_amount', 'g',
-      ['m', 'n'], 4, 'Attached', 'attachedAmountMg',
-      true, 'Weight of the defined part'
-    );
-  }
-
-  numInput(
-    sample, field, unit, prefixes, precision, label, ref = '',
-    disabled = false, title = '', block = false, notApplicable = false
-  ) {
-    if (sample.contains_residues && unit === 'l') return false;
-    const value = !isNaN(sample[field]) ? sample[field] : null;
-
-    const mpx = unit === 'l' ? prefixes[1] : unit === 'mol' ? prefixes[2] : prefixes[0];
-    return (
-      <td key={field + sample.id.toString()}>
-        <NumeralInputWithUnitsCompo
-          value={notApplicable ? 'N/A' : value}
-          unit={unit}
-          label={label}
-          ref={ref}
-          metricPrefix={mpx}
-          metricPrefixes={prefixes}
-          precision={precision}
-          title={title}
-          disabled={disabled}
-          block={block}
-          bsStyle={unit && sample.amount_unit === unit ? 'success' : 'default'}
-          onChange={e => this.handleFieldChanged(field, e)}
-          id={`numInput_${field}`}
-        />
-      </td>
-    );
-  }
-
-  numInputWithoutTable(
-    sample, field, unit, prefixes, precision, label, ref = '',
-    disabled = false, title = '', block = false, notApplicable = false
-  ) {
-    if (sample.contains_residues && unit === 'l') return false;
-    const value = !isNaN(sample[field]) ? sample[field] : null;
-
-    const mpx = unit === 'l' ? prefixes[1] : unit === 'mol' ? prefixes[2] : prefixes[0];
-    return (
-      <NumeralInputWithUnitsCompo
-        key={field + sample.id.toString()}
-        value={notApplicable ? 'N/A' : value}
-        unit={unit}
-        label={label}
-        ref={ref}
-        metricPrefix={mpx}
-        metricPrefixes={prefixes}
-        precision={precision}
-        title={title}
-        disabled={disabled}
-        block={block}
-        bsStyle={unit && sample.amount_unit === unit ? 'success' : 'default'}
-        onChange={e => this.handleFieldChanged(field, e)}
-      />
-    );
-  }
-
-  sampleAmount(sample) {
-    const content = [];
-    const isDisabled = !permitOn(sample);
-    const volumeBlocked = !sample.has_density && !sample.has_molarity;
-
-    if (sample.isMethodDisabled('amount_value') === false) {
-      // if (sample.isMethodRestricted('molecule') === true) {
-      //   content.push(this.numInput(sample, 'amount_g', 'g', ['m', 'n'],
-      //     4, 'Amount', 'massMgInput', isDisabled, ''));
-      // } else {
-      content.push(this.numInput(
-        sample, 'amount_g', 'g', ['m', 'n'],
-        4, 'Amount', 'massMgInput', isDisabled, ''
-      ));
-
-      if (!sample.contains_residues) {
-        content.push(this.numInput(
-          sample, 'amount_l', 'l',
-          ['m', 'u', 'n'], 5, '\u202F', 'l',
-          isDisabled, '', volumeBlocked
-        ));
-      }
-
-      content.push(this.numInput(
-        sample, 'amount_mol', 'mol',
-        ['m', 'n'], 4, '\u202F', 'amountInput', isDisabled, ''
-      ));
-
-      if (sample.contains_residues) {
-        content.push(this.attachedAmountInput(sample));
-      }
-
-      return content;
-    }
-
-    return (
-      <FormGroup>
-        <ControlLabel>Amount</ControlLabel>
-        <FormControl type="text" disabled defaultValue="***" readOnly />
-      </FormGroup>
-    );
-  }
-
-  sampleDescription(sample) {
-    return (
-      <FormGroup>
-        <ControlLabel>Description</ControlLabel>
-        <FormControl
-          componentClass="textarea"
-          ref={(input) => { this.descriptionInput = input; }}
-          placeholder={sample.description}
-          value={sample.description || ''}
-          onChange={e => this.handleFieldChanged('description', e.target.value)}
-          rows={2}
-          disabled={!permitOn(sample)}
-        />
-      </FormGroup>
-    );
-  }
-
-  render() {
-    const sample = this.props.sample || {};
-    const isPolymer = (sample.molfile || '').indexOf(' R# ') !== -1;
-    const isDisabled = !permitOn(sample);
-    const polyDisabled = isPolymer || isDisabled;
-    const molarityBlocked = isDisabled ? true : this.state.molarityBlocked;
-    const densityBlocked = isDisabled ? true : !molarityBlocked;
-    const { enableSampleDecoupled } = this.props;
-    const isRepoSecretExternalLabel = this.props.parent.isRepoSecretExternalLabel();
-
-    const nameSection = isRepoSecretExternalLabel ?
-      (
-        <div className="name-form">
-          <div style={{ width: '50%' }}>
-            {this.textInput(sample, 'name', 'Name')}
-          </div>
-          <div style={{ width: '30%' }} hidden>
-            {this.textInput(sample, 'external_label', 'External label')}
-          </div>
-          <div style={{ width: '50%' }}>
-            <label htmlFor="solventInput">Solvent</label>
-            {this.sampleSolvent(sample)}
-          </div>
-        </div>
-      ) : (
-        <div className="name-form">
-          <div style={{ width: '30%' }}>
-            {this.textInput(sample, 'name', 'Name')}
-          </div>
-          <div style={{ width: '30%' }}>
-            {this.textInput(sample, 'external_label', 'External label')}
-          </div>
-          <div style={{ width: '40%' }}>
-            <label htmlFor="solventInput">Solvent</label>
-            {this.sampleSolvent(sample)}
-          </div>
-        </div>
-      );
-
-    return (
-      <Table responsive className="sample-form">
-        <tbody>
-          <tr>
-            <td colSpan="4">
-              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <div style={{ width: '70%', display: 'flex' }}>
-                  {this.moleculeInput()}
-                  {this.stereoAbsInput()}
-                  {this.stereoRelInput()}
-                </div>
-                <div style={{ paddingLeft: '10px' }} className="top-secret-checkbox">
-                  {this.topSecretCheckbox(sample)}
-                </div>
-                {
-                  enableSampleDecoupled ? (
-                    <div className="decoupled-checkbox">{this.decoupledCheckbox(sample)}</div>
-                  ) : null
-                }
-              </div>
-            </td>
-          </tr>
-
-          <tr>
-            <td colSpan="4">
-              <div className="name-form">
-                <div style={{ width: '25%' }}>
-                  {this.textInput(sample, 'name', 'Name')}
-                </div>
-                <div style={{ width: '25%', paddingLeft: '5px' }}>
-                  {this.textInput(sample, 'external_label', 'External label')}
-                </div>
-                <div style={{ width: '25%', paddingLeft: '5px' }}>
-                  <TextRangeWithAddon
-                    field="boiling_point"
-                    label="Boiling point"
-                    addon="°C"
-                    value={sample.boiling_point_display}
-                    disabled={polyDisabled}
-                    onChange={this.handleRangeChanged}
-                    tipOnText="Use space-separated value to input a Temperature range"
-                  />
-                </div>
-                <div style={{ width: '25%', paddingLeft: '5px' }}>
-                  <TextRangeWithAddon
-                    field="melting_point"
-                    label="Melting point"
-                    addon="°C"
-                    value={sample.melting_point_display}
-                    disabled={polyDisabled}
-                    onChange={this.handleRangeChanged}
-                    tipOnText="Use space-separated value to input a Temperature range"
-                  />
-                </div>
-                {/* <div style={{ width: '40%' }}>
-                  <label htmlFor="solventInput">Solvent</label>
-                  {this.sampleSolvent(sample)}
-                </div> */}
-              </div>
-            </td>
-          </tr>
-
-          { sample.decoupled &&
-            <tr>
-              {
-                this.numInput(sample, 'molecular_mass', 'g/mol', ['n'], 5, 'Molecular mass', '', isDisabled)
-              }
-              <td colSpan="3">
-                {
-                  this.textInput(sample, 'sum_formula', 'Sum formula')
-                }
-              </td>
-            </tr>
-          }
-
-          <tr className="visible-hd">
-            <td colSpan="6">
-              <table>
-                <tbody>
-                  <tr>
-                    <td style={{ width: '3%' }}>
-                      <div style={{ marginBottom: '15px' }}>
-                        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-                        <label style={{ height: '14px' }} />
-                        <InputGroup.Button id="email" name="email" type="email" placeholder="Email Address">
-                          {this.infoButton()}
-                        </InputGroup.Button>
-                      </div>
-                    </td>
-                    {this.sampleAmount(sample)}
-                    <td style={{ width: '47%' }}>
-                      <div className="name-form" style={{ marginBottom: '15px' }}>
-                        <Tabs style={{ width: '60%' }} id="tab-density-molarity" defaultActiveKey={sample.molarity_value !== 0 ? 'molarity' : 'density'}>
-                          <Tab eventKey="density" title="Density">
-                            {
-                              this.numInputWithoutTable(sample, 'density', 'g/ml', ['n'], 5, '', '', polyDisabled, '', false, isPolymer)
-                            }
-                          </Tab>
-                          <Tab eventKey="molarity" title="Molarity">
-                            {
-                              this.numInputWithoutTable(sample, 'molarity_value', 'M', ['n'], 5, '', '', polyDisabled, '', false, isPolymer)
-                            }
-                          </Tab>
-                        </Tabs>
-                        <div style={{ width: '40%', paddingLeft: '5px' }}>
-                          {
-                            this.numInputWithoutTable(sample, 'purity', 'n', ['n'], 5, 'Purity/Concentration', '', isDisabled)
-                          }
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </td>
-          </tr>
-          <tr>
-            <td colSpan="4">
-              <SampleDetailsSolvents
-                sample={sample}
-                onChange={this.handleSolventChanged}
-              />
-            </td>
-          </tr>
-
-          <tr style={{ paddingTop: '15px' }}>
-            <td colSpan="4">{this.sampleDescription(sample)}</td>
-          </tr>
-          <tr>
-            <td colSpan="4">
-              {this.textInput(sample, 'location', 'Location')}
-            </td>
-          </tr>
-          <tr>
-            <td colSpan="4">
-              <PrivateNoteElement element={sample} disabled={!permitOn(sample)} />
-            </td>
-          </tr>
-          {this.props.customizableField()}
-        </tbody>
-      </Table>
-    );
-  }
-}
-
-SampleForm.propTypes = {
-  sample: PropTypes.object,
-  parent: PropTypes.object,
-  customizableField: PropTypes.func.isRequired,
-  enableSampleDecoupled: PropTypes.bool,
-  decoupleMolecule: PropTypes.func.isRequired
-};
-
-SampleForm.defaultProps = { enableSampleDecoupled: false };
diff --git a/app/packs/src/components/ScreenDetails.js b/app/packs/src/components/ScreenDetails.js
deleted file mode 100644
index ab29137cc..000000000
--- a/app/packs/src/components/ScreenDetails.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormGroup, ControlLabel, FormControl, Panel, ListGroup, ListGroupItem,
-  ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab
-} from 'react-bootstrap';
-import StickyDiv from 'react-stickydiv';
-import { unionBy, findIndex } from 'lodash';
-
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ScreenWellplates from './ScreenWellplates';
-import QuillEditor from './QuillEditor'
-import ScreenDetailsContainers from './ScreenDetailsContainers';
-import ElementActions from './actions/ElementActions';
-import DetailActions from './actions/DetailActions';
-import UIStore from './stores/UIStore';
-import UIActions from './actions/UIActions';
-import PrintCodeButton from './common/PrintCodeButton';
-import ConfirmClose from './common/ConfirmClose';
-import Immutable from 'immutable';
-import ElementDetailSortTab from './ElementDetailSortTab';
-import { addSegmentTabs } from './generic/SegmentDetails';
-import PrivateNoteElement from './PrivateNoteElement';
-
-export default class ScreenDetails extends Component {
-  constructor(props) {
-    super(props);
-    const {screen} = props;
-    this.state = {
-      screen,
-      activeTab: UIStore.getState().screen.activeTab,
-      visible: Immutable.List(),
-    }
-    this.onUIStoreChange = this.onUIStoreChange.bind(this);
-    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
-    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIStoreChange)
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIStoreChange)
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { screen } = nextProps;
-    this.setState({ screen });
-  }
-
-  onUIStoreChange(state) {
-    if (state.screen.activeTab != this.state.activeTab){
-      this.setState({
-        activeTab: state.screen.activeTab
-      })
-    }
-  }
-
-  handleSubmit() {
-    const { screen } = this.state;
-
-    if(screen.isNew) {
-      ElementActions.createScreen(screen);
-    } else {
-      ElementActions.updateScreen(screen);
-    }
-    if(screen.is_new) {
-      const force = true;
-      DetailActions.close(screen, force);
-    }
-  }
-
-  handleInputChange(type, event) {
-    const { screen } = this.state;
-    const value = event.target.value;
-    switch (type) {
-      case 'name':
-        screen.name = value;
-        break;
-      case 'requirements':
-        screen.requirements = value;
-        break;
-      case 'collaborator':
-        screen.collaborator = value;
-        break;
-      case 'conditions':
-        screen.conditions = value;
-        break;
-      case 'result':
-        screen.result = value;
-        break;
-      case 'description':
-        screen.description = value;
-        break;
-    }
-    this.setState({
-      screen: screen
-    });
-  }
-
-  handleSegmentsChange(se) {
-    const { screen } = this.state;
-    const { segments } = screen;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
-    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
-    screen.segments = segments;
-    screen.changed = true;
-    this.setState({ screen });
-  }
-
-  dropWellplate(wellplate) {
-    const { screen } = this.state;
-    screen.wellplates = unionBy(screen.wellplates, [wellplate], 'id');
-    this.forceUpdate();
-  }
-
-  handleScreenChanged(screen) {
-    this.setState({ screen });
-  }
-
-  deleteWellplate(wellplate){
-    const {screen} = this.state;
-    const wellplateIndex = screen.wellplates.indexOf(wellplate);
-    screen.wellplates.splice(wellplateIndex, 1);
-
-    this.setState({ screen });
-  }
-
-  screenHeader(screen) {
-    let saveBtnDisplay = screen.isEdited ? '' : 'none';
-    const datetp = `Created at: ${screen.created_at} \n Updated at: ${screen.updated_at}`;
-
-    return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
-          <span>
-            <i className="icon-screen" />
-            &nbsp;<span>{screen.name}</span> &nbsp;
-          </span>
-        </OverlayTrigger>
-        <ElementCollectionLabels element={screen} placement="right"/>
-        <ConfirmClose el={screen} />
-        <OverlayTrigger placement="bottom"
-            overlay={<Tooltip id="saveScreen">Save Screen</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right"
-                  onClick={() => this.handleSubmit()}
-                  style={{display: saveBtnDisplay}} >
-            <i className="fa fa-floppy-o "></i>
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="bottom"
-            overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
-        <Button bsStyle="info" bsSize="xsmall" className="button-right"
-          onClick={() => this.props.toggleFullScreen()}>
-          <i className="fa fa-expand"></i>
-        </Button>
-        </OverlayTrigger>
-        <PrintCodeButton element={screen}/>
-      </div>
-    );
-  }
-
-  propertiesFields(screen){
-    const {wellplates, name, collaborator, result, conditions, requirements, description} = screen;
-
-    return(
-      <ListGroup fill="true">
-        <ListGroupItem>
-          <table width="100%"><tbody>
-            <tr>
-              <td width="50%" className="padding-right">
-                <FormGroup>
-                  <ControlLabel>Name</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={name || ''}
-                    onChange={event => this.handleInputChange('name', event)}
-                    disabled={screen.isMethodDisabled('name')}
-                  />
-                </FormGroup>
-              </td>
-              <td width="50%">
-                <FormGroup>
-                  <ControlLabel>Collaborator</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={collaborator || ''}
-                    onChange={event => this.handleInputChange('collaborator', event)}
-                    disabled={screen.isMethodDisabled('collaborator')}
-                  />
-                </FormGroup>
-              </td>
-            </tr>
-            <tr>
-              <td className="padding-right">
-                <FormGroup>
-                  <ControlLabel>Requirements</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={requirements || ''}
-                    onChange={event => this.handleInputChange('requirements', event)}
-                    disabled={screen.isMethodDisabled('requirements')}
-                  />
-                </FormGroup>
-              </td>
-              <td >
-                <FormGroup>
-                  <ControlLabel>Conditions</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={conditions || ''}
-                    onChange={event => this.handleInputChange('conditions', event)}
-                    disabled={screen.isMethodDisabled('conditions')}
-                  />
-                </FormGroup>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan="2">
-                <FormGroup>
-                  <ControlLabel>Result</ControlLabel>
-                  <FormControl
-                    type="text"
-                    value={result || ''}
-                    onChange={event => this.handleInputChange('result', event)}
-                    disabled={screen.isMethodDisabled('result')}
-                  />
-                </FormGroup>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan="2">
-                <FormGroup>
-                  <ControlLabel>Description</ControlLabel>
-                  <QuillEditor value={description}
-                    onChange={event => this.handleInputChange('description', {target: {value: event}})}
-                    disabled={screen.isMethodDisabled('description')}
-                  />
-                </FormGroup>
-                <PrivateNoteElement element={screen} disabled={screen.can_update}/> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
-              </td>
-            </tr>
-          </tbody></table>
-        </ListGroupItem>
-        <ListGroupItem>
-          <h4 className="list-group-item-heading">Wellplates</h4>
-          <ScreenWellplates
-            wellplates={wellplates}
-            dropWellplate={wellplate => this.dropWellplate(wellplate)}
-            deleteWellplate={wellplate => this.deleteWellplate(wellplate)}
-            />
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-
-  handleSelect(eventKey) {
-    UIActions.selectTab({tabKey: eventKey, type: 'screen'});
-    this.setState({
-      activeTab: eventKey
-    })
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({visible})
-  }
-
-  render() {
-    const { screen, visible } = this.state;
-    const submitLabel = screen.isNew ? 'Create' : 'Save';
-
-    const tabContentsMap = {
-      properties: (
-        <Tab eventKey="properties" title="Properties" key={`properties_${screen.id}`}>
-          {this.propertiesFields(screen)}
-        </Tab>
-      ),
-      analyses: (
-        <Tab eventKey="analyses" title="Analyses" key={`analyses_${screen.id}`}>
-          <ScreenDetailsContainers
-            screen={screen}
-            parent={this}
-          />
-        </Tab>
-      ),
-    };
-
-    const tabTitlesMap = {
-    };
-
-    addSegmentTabs(screen, this.handleSegmentsChange, tabContentsMap);
-
-    const tabContents = [];
-    visible.forEach((value) => {
-      const tabContent = tabContentsMap[value];
-      if (tabContent) { tabContents.push(tabContent); }
-    });
-
-    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
-
-    return (
-      <Panel bsStyle={screen.isPendingToSave ? 'info' : 'primary'}
-        className="eln-panel-detail">
-        <Panel.Heading>{this.screenHeader(screen)}</Panel.Heading>
-        <Panel.Body>
-          <ElementDetailSortTab
-            type="screen"
-            availableTabs={Object.keys(tabContentsMap)}
-            tabTitles={tabTitlesMap}
-            onTabPositionChanged={this.onTabPositionChanged}
-          />
-          <Tabs activeKey={activeTab} onSelect={key => this.handleSelect(key)} id="screen-detail-tab">
-             {tabContents}
-          </Tabs>
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(screen)}>Close</Button>
-            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>{submitLabel}</Button>
-          </ButtonToolbar>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-ScreenDetails.propTypes = {
-  screen: PropTypes.object,
-  toggleFullScreen: PropTypes.func,
-}
diff --git a/app/packs/src/components/ScreenDetailsContainers.js b/app/packs/src/components/ScreenDetailsContainers.js
deleted file mode 100644
index 43ae9e32c..000000000
--- a/app/packs/src/components/ScreenDetailsContainers.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { PanelGroup, Panel, Button } from 'react-bootstrap';
-
-import Container from './models/Container';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton';
-
-import TextTemplateActions from './actions/TextTemplateActions';
-
-export default class ScreenDetailsContainers extends Component {
-  constructor(props) {
-    super();
-    const {screen} = props;
-    this.state = {
-      screen,
-      activeContainer: 0
-    };
-  }
-
-  componentDidMount() {
-    TextTemplateActions.fetchTextTemplates('screen');
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      screen: nextProps.screen
-    })
-  }
-
-  handleChange(container) {
-    const {screen} = this.state
-    this.props.parent.handleScreenChanged(screen)
-  }
-
-  handleAdd() {
-    const {screen} = this.state;
-    let container = Container.buildEmpty();
-    container.container_type = "analysis";
-
-    screen.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.push(container);
-
-    const newKey = screen.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.length - 1;
-
-    this.handleAccordionOpen(newKey);
-
-    this.props.parent.setState({screen: screen})
-  }
-
-  handleRemove(container) {
-    let {screen} = this.state;
-    container.is_deleted = true;
-
-    this.props.parent.setState({screen: screen})
-  }
-
-  handleUndo(container) {
-    let {screen} = this.state;
-    container.is_deleted = false;
-
-    this.props.parent.setState({screen: screen})
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({activeContainer: key});
-  }
-
-  addButton() {
-    const {readOnly} = this.props;
-    if(! readOnly) {
-      return (
-          <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
-            Add analysis
-          </Button>
-      )
-    }
-  }
-
-  render() {
-    const {screen, activeContainer} = this.state;
-    const {readOnly} = this.props;
-
-    let containerHeader = (container) =>
-      <p style={{width: '100%'}}>{container.name}
-        {(container.extended_metadata['kind'] && container.extended_metadata['kind'] != '') ?
-          (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
-        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
-        <Button bsSize="xsmall" bsStyle="danger"
-           className="button-right" disabled={readOnly}
-          onClick={() => {if(confirm('Delete the container?')) {this.handleRemove(container)}}}>
-          <i className="fa fa-trash"></i>
-        </Button>
-        <PrintCodeButton element={screen} analyses={[container]} ident={container.id}/>
-      </p>
-
-      let containerHeaderDeleted = (container) => <p style={{width: '100%'}}><strike>{container.name}
-        {(container.extended_metadata['kind'] && container.extended_metadata['kind'] != '') ?
-          (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
-        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
-        </strike>
-        <Button className="pull-right" bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(container)}>
-          <i className="fa fa-undo"></i>
-        </Button>
-        </p>
-
-    if(screen.container != null){
-
-      var analyses_container = screen.container.children.filter(element => ~element.container_type.indexOf('analyses'));
-
-      if(analyses_container.length == 1 && analyses_container[0].children.length > 0){
-        return (
-          <div>
-          <p>&nbsp;{this.addButton()}</p>
-          <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
-          {analyses_container[0].children.map((container, key) => {
-            if (container.is_deleted){
-              return (
-                <Panel eventKey={key}
-                    key={key} >
-                    <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                </Panel>
-                  );
-                }else {
-              return (
-                <Panel eventKey={key}
-                    key={key} onClick={() => this.handleAccordionOpen(key)}>
-                  <Panel.Heading>{containerHeader(container)}</Panel.Heading>
-                  <Panel.Body collapsible="true">
-                    <ContainerComponent
-                      templateType="screen"
-                      readOnly={readOnly}
-                      container={container}
-                      onChange={container => this.handleChange(container)}
-                    />
-                  </Panel.Body>
-                </Panel>
-              );
-            }
-
-            }
-          )}
-          </PanelGroup>
-          </div>
-        )
-      }else {
-        return (
-          <div>
-            <p className='noAnalyses-warning'>
-              There are currently no Analyses.
-              {this.addButton()}
-            </p>
-          </div>
-        )
-      }
-
-    }else{
-
-      return (
-        <div>
-          <p className='noAnalyses-warning'>
-            There are currently no Analyses.
-          </p>
-        </div>
-      )
-    }
-
-  }
-
-}
-
-ScreenDetailsContainers.propTypes = {
-  readOnly: PropTypes.bool,
-  parent: PropTypes.object,
-};
diff --git a/app/packs/src/components/ScreenWellplates.js b/app/packs/src/components/ScreenWellplates.js
deleted file mode 100644
index 764c9bcca..000000000
--- a/app/packs/src/components/ScreenWellplates.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from './DragDropItemTypes';
-import UIStore from './stores/UIStore';
-import { wellplateShowOrNew } from './routesUtils';
-import QuillViewer from './QuillViewer';
-
-const target = {
-  drop(props, monitor){
-    const {dropWellplate} = props;
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    if (itemType == 'wellplate') {
-      dropWellplate(item.element);
-    }
-  },
-  canDrop(props, monitor){
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    if (itemType == 'wellplate') {
-      return true;
-    } else {
-      return false;
-    }
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class ScreenWellplates extends Component {
-  handleWellplateClick(wellplate) {
-    const {currentCollection,isSync} = UIStore.getState();
-    const wellplateID = wellplate.id
-    const uri = `/${isSync ? 's' : ''}collection/${currentCollection.id}/wellplate/${wellplateID}`;
-    Aviator.navigate(uri, { silent: true });
-    wellplateShowOrNew({ params: { wellplateID } });
-  }
-
-  render() {
-    const {wellplates, isOver, canDrop, connectDropTarget, deleteWellplate} = this.props;
-    const style = { padding: 10 };
-    if (isOver && canDrop) {
-      style.borderStyle = 'dashed';
-      style.borderColor = '#337ab7';
-    } else if (canDrop) {
-      style.borderStyle = 'dashed';
-    }
-    return connectDropTarget(
-      <div style={style}>
-        <table width="100%">
-          <thead><tr>
-            <th width="45%">Name</th>
-            <th width="50%">Description</th>
-            <th width="5%"></th>
-          </tr></thead>
-          <tbody>
-            {wellplates.map((wellplate, key) => {
-              return (
-                <tr key={key} style={{height: "80px", verticalAlign: 'middle'}}>
-                  <td>
-                    <a onClick={() => this.handleWellplateClick(wellplate)}
-                       style={{cursor: 'pointer'}}>
-                      {wellplate.name}
-                    </a>
-                  </td>
-                  <td>
-                    <QuillViewer
-                      value={wellplate.description}
-                      theme="bubble"
-                      height="44px"
-                    />
-                  </td>
-                  <td style={{verticalAlign: 'middle'}}>
-                    <Button bsStyle="danger" style={{marginLeft: "10px"}}
-                            onClick={() => deleteWellplate(wellplate)}>
-                      <i className="fa fa-trash-o"></i>
-                    </Button>
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
-
-export default DropTarget(DragDropItemTypes.WELLPLATE, target, collect)(ScreenWellplates);
-
-ScreenWellplates.propTypes = {
-  wellplates: PropTypes.array.isRequired,
-  deleteWellplate: PropTypes.func.isRequired,
-  dropWellplate: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/components/StringTag.js b/app/packs/src/components/StringTag.js
deleted file mode 100644
index 39828558d..000000000
--- a/app/packs/src/components/StringTag.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function StringTag({ string }) {
-  const arr = string.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|[^<]+/g);
-
-  const arrComponents = arr.map((val, idx) => {
-    const subVal = val.match(/<sub[^>]*>([^<]+)<\/sub>/);
-    if (subVal) return <sub key={`sub_${idx}`}>{ subVal[1] }</sub>;
-
-    const supVal = val.match(/<sup[^>]*>([^<]+)<\/sup>/);
-    if (supVal) return <sup key={`sup_${idx}`}>{ subVal[1] }</sup>;
-
-    return <span key={val}>{ val }</span>;
-  });
-
-  return <span>{ arrComponents }</span>;
-}
-
-StringTag.propTypes = {
-  string: PropTypes.string.isRequired,
-};
-
-export default StringTag;
diff --git a/app/packs/src/components/Switch.js b/app/packs/src/components/Switch.js
deleted file mode 100644
index b622ba697..000000000
--- a/app/packs/src/components/Switch.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-export default class Switch extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.toggle = this.toggle.bind(this)
-  }
-
-  toggle(checked) {
-    this.props.onChange(checked)
-  }
-
-  render() {
-    const {
-      checked,
-      checkedChildren,
-      classSize,
-      unCheckedChildren,
-      ...restProps
-    } = this.props
-
-    let className = "switch ";
-    className += checked ? "switch-checked" : "";
-    let innerClass = "switch-inner";
-    if (typeof (classSize) !== 'undefined' && classSize==='switchb') {
-      className = "switchb ";
-      className += checked ? "switchb-checked" : "";
-      innerClass = "switchb-inner";
-    }
-
-    return (
-      <span tabIndex="0" onClick={() => this.toggle(checked)}
-        className={className} {...restProps}>
-        <span className={innerClass}>
-          {checked ? checkedChildren : unCheckedChildren}
-        </span>
-      </span>
-    )
-  }
-}
diff --git a/app/packs/src/components/TabLayoutCell.js b/app/packs/src/components/TabLayoutCell.js
deleted file mode 100644
index 9947793cd..000000000
--- a/app/packs/src/components/TabLayoutCell.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { DragSource, DropTarget } from 'react-dnd';
-import flow from 'lodash/flow';
-import UserStore from './stores/UserStore';
-
-import DragDropItemTypes from './DragDropItemTypes';
-
-const layoutSource = {
-  beginDrag(props) {
-    return props;
-  }
-};
-
-const layoutTarget = {
-  drop(props, monitor, component) {
-    props.moveLayout(monitor.getItem(), props);
-  }
-};
-
-class TabLayoutCell extends Component {
-
-  render() {
-    const {
-      connectDragSource, sourceType, isHidden, cell, connectDropTarget, isElementDetails, title
-    } = this.props;
-
-    const styleObj = {
-      fontSize: 12,
-      color: '#000000',
-      textAlign: 'center',
-      wordWrap: 'break-word'
-    };
-
-    const constEls = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'];
-    let iconCell = `icon-${cell}`;
-    let ttl = cell && (cell.replace('_', ' ').replace(/(^\w|\s\w)/g, m => m.toUpperCase()));
-    let ttd = '';
-
-    if (!constEls.includes(cell)) {
-      const genericEls = UserStore.getState().genericEls || [];
-      const genericEl = (genericEls && genericEls.find(el => el.name === cell)) || {};
-      iconCell = `${genericEl.icon_name}`;
-      ttl = genericEl.label;
-      ttd = genericEl.desc;
-    }
-
-    const layoutCell = isElementDetails ? (
-      <tr>
-        <td className={isHidden ? 'hidden-layout' : ''}>
-          <div style={{ width: '100%' }}>
-            <i style={styleObj}>{title === 'hidden' ? '-' : title}</i>
-          </div>
-        </td>
-      </tr>
-
-    ) : (
-      <td className={isHidden ? 'hidden-layout' : ''}>
-        <div><OverlayTrigger delayShow={500} placement="top" overlay={<Tooltip id="_tooltip_history" className="left_tooltip">{ttl}<br />{ttd}</Tooltip>}><i className={iconCell} /></OverlayTrigger></div>
-      </td>
-
-
-    );
-
-    if (sourceType === '') {
-      return layoutCell;
-    }
-    return connectDragSource(connectDropTarget(layoutCell), { dropEffect: 'copy' });
-  }
-}
-
-export default flow(
-  DragSource(DragDropItemTypes.LAYOUT, layoutSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  })),
-  DropTarget(DragDropItemTypes.LAYOUT, layoutTarget, connect => ({
-    connectDropTarget: connect.dropTarget()
-  }))
-)(TabLayoutCell);
-
-TabLayoutCell.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  isHidden: PropTypes.bool.isRequired,
-  cell: PropTypes.string.isRequired,
-  index: PropTypes.any.isRequired,
-  moveLayout: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/components/TabLayoutContainer.js b/app/packs/src/components/TabLayoutContainer.js
deleted file mode 100644
index 16936ca3b..000000000
--- a/app/packs/src/components/TabLayoutContainer.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Immutable from 'immutable';
-
-import ArrayUtils from './utils/ArrayUtils';
-import TabLayoutCell from './TabLayoutCell';
-
-export default class TabLayoutContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      visible: Immutable.List(props.visible),
-      hidden: Immutable.List(props.hidden)
-    }
-
-    this.moveLayout = this.moveLayout.bind(this);
-  }
-
-  moveLayout(dragItem, hoverItem) {
-    let { visible, hidden } = this.state;
-
-    if (!dragItem.isHidden && hoverItem.isHidden && visible.size === 1) return;
-
-    if (dragItem.isHidden && dragItem.title === 'hidden') return
-
-    if (dragItem.isHidden) {
-      hidden = hidden.splice(dragItem.index, 1);
-    } else if (visible.size > 1) {
-      visible = visible.splice(dragItem.index, 1);
-    }
-
-    if (hoverItem.isHidden) {
-      hidden = hidden.splice(hoverItem.index, 0, dragItem.cell);
-    } else {
-      visible = visible.splice(hoverItem.index, 0, dragItem.cell);
-    }
-
-    if (hidden.size === 0) {
-      hidden = ArrayUtils.pushUniq(hidden, 'hidden');
-    } else if (hidden.size > 1) {
-      hidden = ArrayUtils.removeFromListByValue(hidden, 'hidden');
-    }
-
-    this.setState({ visible, hidden });
-  }
-
-  render() {
-    const { visible, hidden } = this.state;
-    const { isElementDetails, tabTitles } = this.props;
-    let moveLayout = this.moveLayout;
-
-    return (
-      <table className="layout-container">
-        <tbody>
-          {visible.map(function(e, index) {
-            const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
-            return (<TabLayoutCell key={index + "_visible"} cell={e}
-                                  isHidden={false} index={index}
-                                  title={tabTitles[e] || defTitle}
-                                  moveLayout={moveLayout}
-                                  isElementDetails={isElementDetails}/>)
-          })}
-          {hidden.map(function(e, index) {
-            const defTitle = e.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
-            return (<TabLayoutCell key={index + "_hidden"} cell={e}
-                                  isHidden={true} index={index}
-                                  moveLayout={moveLayout}
-                                  title={tabTitles[e] || defTitle}
-                                  isElementDetails={isElementDetails}/>)
-          })}
-        </tbody>
-      </table>
-    )
-  }
-}
-
-TabLayoutContainer.propTypes = {
-  tabTitles: PropTypes.object,
-};
-
-TabLayoutContainer.defaultProps = {
-  tabTitles: {},
-};
diff --git a/app/packs/src/components/TextRangeWithAddon.js b/app/packs/src/components/TextRangeWithAddon.js
deleted file mode 100644
index 806f72524..000000000
--- a/app/packs/src/components/TextRangeWithAddon.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ControlLabel, FormGroup, InputGroup, FormControl } from 'react-bootstrap';
-
-export default class TextRangeWithAddon extends Component {
-  handleInputChange(e) {
-    const input = e.target;
-    input.focus();
-    const { value, selectionStart } = input;
-    let newValue = value;
-    const lastChar = value[selectionStart - 1] || '';
-    if (lastChar !== '' && !lastChar.match(/-|\d|\.| |(,)/)) {
-      const reg = new RegExp(lastChar, 'g');
-      newValue = newValue.replace(reg, '');
-      this.input.value = newValue;
-      return;
-    }
-    newValue = newValue.replace(/--/g, '');
-    newValue = newValue.replace(/,/g, '.');
-    newValue = newValue.replace(/\.+\./g, '.');
-    newValue = newValue.replace(/ - /g, ' ');
-    this.input.value = newValue;
-  }
-
-  handleInputFocus() {
-    this.input.value = this.input.value.trim().replace(/ – /g, ' ');
-  }
-
-  handleInputBlur() {
-    this.input.value = this.input.value.trim();
-    const result = this.input.value.match(/[-.0-9]+|[0-9]/g);
-    if (result) {
-      // eslint-disable-next-line no-restricted-globals
-      const nums = result.filter(r => !isNaN(r));
-      if (nums.length > 0) {
-        let lower = null;
-        let upper = null;
-        if (nums.length === 1) {
-          lower = nums.shift();
-          upper = lower;
-          this.input.value = Number.parseFloat(lower).toString();
-        } else {
-          lower = nums.shift();
-          upper = nums.pop();
-          this.input.value = (Number.parseFloat(lower).toString().concat(' – ', Number.parseFloat(upper))).trim();
-        }
-        this.props.onChange(this.props.field, Number.parseFloat(lower), Number.parseFloat(upper));
-      } else {
-        this.input.value = '';
-        this.props.onChange(this.props.field, '', '');
-      }
-    } else {
-      this.props.onChange(this.props.field, '', '');
-    }
-  }
-
-  render() {
-    const {
-      addon, disabled, label, tipOnText
-    } = this.props;
-    return (
-      <FormGroup bsSize="small">
-        <ControlLabel>{label}</ControlLabel>
-        <InputGroup>
-          <FormControl
-            title={tipOnText}
-            type="text"
-            disabled={disabled}
-            defaultValue={this.props.value || ''}
-            inputRef={(ref) => { this.input = ref; }}
-            onChange={event => this.handleInputChange(event)}
-            onFocus={() => this.handleInputFocus()}
-            onBlur={() => this.handleInputBlur()}
-          />
-          <InputGroup.Addon>{addon}</InputGroup.Addon>
-        </InputGroup>
-      </FormGroup>
-    );
-  }
-}
-
-TextRangeWithAddon.propTypes = {
-  field: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  value: PropTypes.string,
-  addon: PropTypes.string,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  tipOnText: PropTypes.string
-};
-
-TextRangeWithAddon.defaultProps = {
-  label: '',
-  value: '',
-  addon: '',
-  disabled: false,
-  onChange: () => {},
-  tipOnText: ''
-};
diff --git a/app/packs/src/components/UserAuth.js b/app/packs/src/components/UserAuth.js
deleted file mode 100644
index 7c9cadd77..000000000
--- a/app/packs/src/components/UserAuth.js
+++ /dev/null
@@ -1,625 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types'
-import 'whatwg-fetch';
-import { ButtonGroup, OverlayTrigger, Popover, Nav, NavDropdown, NavItem, MenuItem, Glyphicon, Modal, Button, Table, Panel, Form, FormControl, FormGroup, ControlLabel, Col, Row } from 'react-bootstrap';
-import moment from 'moment';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import UserActions from './actions/UserActions';
-import UserStore from './stores/UserStore';
-import Functions from './utils/Functions';
-import UsersFetcher from './fetchers/UsersFetcher';
-import MessagesFetcher from './fetchers/MessagesFetcher';
-import NotificationActions from '../components/actions/NotificationActions';
-import { UserLabelModal } from '../components/UserLabels';
-import MatrixCheck from '../components/common/MatrixCheck';
-import GroupElement from './GroupElement';
-import AuthorModal from './users/AuthorModal';
-
-export default class UserAuth extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: props.currentUser || { name: 'unknown' },
-      showModal: false,
-      showLabelModal: false,
-      showAuthorsModal: false,
-      currentGroups: [],
-      currentDevices: [],
-      selectedUsers: null,
-      showSubscription: false,
-      currentSubscriptions: [],
-      showDeviceMetadataModal: false,
-      device: {},
-      deviceMetadata: {
-        dates: []
-      }
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.handleShow = this.handleShow.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleLabelShow = this.handleLabelShow.bind(this);
-    this.handleLabelClose = this.handleLabelClose.bind(this);
-    this.handleAuthorsShow = this.handleAuthorsShow.bind(this);
-    this.handleAuthorsClose = this.handleAuthorsClose.bind(this);
-    this.handleSubscriptionShow = this.handleSubscriptionShow.bind(this);
-    this.handleSubscriptionClose = this.handleSubscriptionClose.bind(this);
-    this.handleDeviceMetadataModalShow = this.handleDeviceMetadataModalShow.bind(this);
-    this.handleDeviceMetadataModalClose = this.handleDeviceMetadataModalClose.bind(this);
-
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState({
-      currentUser: state.currentUser
-    });
-  }
-
-  logout() {
-    UserActions.logout();
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  handlefetchDeviceMetadataByDeviceId(deviceID) {
-    UsersFetcher.fetchDeviceMetadataByDeviceId(deviceID)
-      .then((result) => {
-        if (result.device_metadata) {
-          this.setState({
-            deviceMetadata: result.device_metadata
-          });
-        }
-      });
-  }
-  // show modal
-  handleShow() {
-    UsersFetcher.fetchCurrentGroup()
-      .then((result) => {
-        this.setState({
-          currentGroups: result.currentGroups,
-          showModal: true,
-          selectedUsers: null
-        });
-      });
-    UsersFetcher.fetchCurrentDevices()
-      .then((result) => {
-        this.setState({
-          currentDevices: result.currentDevices
-        });
-      });
-  }
-
-  // hide modal
-  handleClose() {
-    this.setState({ showModal: false, selectedUsers: null });
-  }
-
-  handleDeviceMetadataModalShow(device) {
-    this.setState({
-      showDeviceMetadataModal: true,
-      device
-    });
-    this.handlefetchDeviceMetadataByDeviceId(device.id);
-  }
-
-  handleDeviceMetadataModalClose() {
-    this.setState({
-      showDeviceMetadataModal: false,
-      device: {},
-      deviceMetadata: {}
-    });
-  }
-
-  handleLabelShow() {
-    this.setState({
-      showLabelModal: true
-    });
-  }
-
-  handleLabelClose() {
-    this.setState({ showLabelModal: false });
-  }
-
-  handleAuthorsShow() {
-    this.setState({
-      showAuthorsModal: true,
-    });
-  }
-
-  handleAuthorsClose() {
-    this.setState({ showAuthorsModal: false });
-  }
-  // show modal Subscription
-  handleSubscriptionShow() {
-    MessagesFetcher.fetchChannelWithUser()
-      .then((result) => {
-        this.setState({
-          showSubscription: true,
-          currentSubscriptions: result.channels
-        });
-      });
-  }
-
-  // hide modal Subscription
-  handleSubscriptionClose() {
-    this.setState({ showSubscription: false });
-  }
-
-  // tooltip of yes/no confirmation
-  handleClick() {
-    this.setState({ show: !this.state.show });
-  }
-
-  // inputs of create new group
-  handleInputChange(type, ev) {
-    switch (type) {
-      case 'first':
-        this.setState({ groupFirstName: ev.currentTarget.value });
-        break;
-      case 'last':
-        this.setState({ groupLastName: ev.currentTarget.value });
-        break;
-      case 'abbr':
-        this.setState({ groupAbbreviation: ev.currentTarget.value });
-        break;
-      default:
-        break;
-    }
-  }
-
-  subscribe(node) {
-    const { currentSubscriptions } = this.state;
-
-    MessagesFetcher.subscribeChannel({ channel_id: node.id, subscribe: node.user_id == null })
-      .then((result) => {
-        if (result.error) {
-          // alert(result.error);
-          NotificationActions.add({
-            message: result.error,
-            level: 'error'
-          });
-        } else {
-          const actSubscription = _.filter(
-            this.state.currentSubscriptions,
-            o => o.id === result.channel_id
-          );
-          if (node.user_id != null) {
-            actSubscription[0].user_id = null;
-          } else {
-            actSubscription[0].user_id = result.user_id;
-          }
-          const idx = _.findIndex(this.state.currentSubscriptions, o => o.id === result.channel_id);
-          currentSubscriptions.splice(idx, 1, actSubscription[0]);
-          this.setState({ currentSubscriptions });
-        }
-      });
-  }
-
-  // create new group
-  // need to use the wording 'group_param' because of the definition of current api
-  createGroup() {
-    const {
-      groupFirstName, groupLastName, groupAbbreviation, currentUser, currentGroups
-    } = this.state;
-    const group_param = {
-      first_name: groupFirstName,
-      last_name: groupLastName,
-      name_abbreviation: groupAbbreviation,
-      users: [currentUser.id]
-    };
-
-    UsersFetcher.createGroup({ group_param })
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          currentGroups.push(result.group);
-          this.setState({
-            currentGroups,
-          });
-        }
-      });
-  }
-
-  renderDeviceButtons(device) {
-    return (
-      <td>
-        <Button bsSize="xsmall" type="button" bsStyle="info" className="fa fa-laptop" onClick={() => this.handleDeviceMetadataModalShow(device)} />&nbsp;&nbsp;
-      </td>
-    );
-  }
-
-  handleChange(currentGroups) {
-    this.setState({ currentGroups: currentGroups });
-  }
-
-  handleDeleteGroup = currentGroupId => {
-    const currentGroups = this.state.currentGroups.filter(cg => cg.id !== currentGroupId);
-    UsersFetcher.updateGroup({ id: currentGroupId, destroy_group: true })
-    this.setState({ currentGroups });
-  };
-
-  handleDeleteUser =(groupRec, userRec) => {
-    let { currentGroups, currentUser } = this.state;
-    UsersFetcher.updateGroup({ id: groupRec.id, destroy_group: false, rm_users: [userRec.id] })
-      .then((result) => {
-        const findIdx = _.findIndex(result.group.users, function (o) { return o.id == currentUser.id; });
-        const findAdmin = _.findIndex(result.group.admins, function (o) { return o.id == currentUser.id; });
-        if (findIdx == -1 && findAdmin == -1) {
-          currentGroups = _.filter(this.state.currentGroups, o => o.id != result.group.id);
-        } else {
-          const idx = _.findIndex(currentGroups, function (o) { return o.id == result.group.id; });
-          currentGroups.splice(idx, 1, result.group);
-        }
-        this.setState({ currentGroups: currentGroups });
-      });
-  }
-
-  // render modal
-  renderModal() {
-    const { showModal, currentGroups, currentDevices } = this.state;
-
-    const modalStyle = {
-      overflowY: 'auto',
-    };
-
-    let tBodyGroups = '';
-    let tBodyDevices = '';
-
-    if (Object.keys(currentGroups).length <= 0) {
-      tBodyGroups = '';
-    } else {
-      tBodyGroups = currentGroups ? currentGroups.map(g => (
-        <GroupElement groupElement={g} key={g.id} currentState={this.state}
-        currentGroup={this.state.currentGroups}
-        onDeleteGroup={this.handleDeleteGroup}
-        onDeleteUser={this.handleDeleteUser}
-        onChangeData={this.handleChange}></GroupElement>
-      )) : '';
-    }
-
-    if (Object.keys(currentDevices).length <= 0) {
-      tBodyDevices = '';
-    } else {
-      tBodyDevices = currentDevices ? currentDevices.map(g => (
-        <tbody key={`tbody_${g.id}`}>
-          <tr key={`row_${g.id}`} id={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-            <td>{g.name}</td>
-            <td>{g.name_abbreviation}</td>
-            {this.renderDeviceButtons(g)}
-          </tr>
-        </tbody>
-      )) : '';
-    }
-
-    return (
-      <Modal
-        show={showModal}
-        dialogClassName="importChemDrawModal"
-        onHide={this.handleClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>My Groups & Devices</Modal.Title>
-        </Modal.Header>
-        <Modal.Body style={modalStyle}>
-          <div>
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Create new group
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Form inline>
-                  <FormGroup controlId="formInlineFname">
-                    <ControlLabel>Name</ControlLabel>&nbsp;&nbsp;
-                    <FormControl
-                      type="text"
-                      placeholder="eg: AK"
-                      onChange={this.handleInputChange.bind(this, 'first')}
-                    />
-                  </FormGroup>
-                  <FormGroup controlId="formInlineLname">
-                    <FormControl
-                      type="text"
-                      placeholder="J. Moriarty"
-                      onChange={this.handleInputChange.bind(this, 'last')}
-                    />
-                  </FormGroup>&nbsp;&nbsp;
-                  <FormGroup controlId="formInlineNameAbbr">
-                    <ControlLabel>Name abbreviation</ControlLabel>&nbsp;&nbsp;
-                    <FormControl
-                      type="text"
-                      placeholder="AK-JM"
-                      onChange={this.handleInputChange.bind(this, 'abbr')}
-                    />
-                  </FormGroup>&nbsp;&nbsp;
-                  <Button bsSize="xsmall" bsStyle="success" onClick={() => this.createGroup()}>
-                    Create new group
-                  </Button>
-                </Form>
-              </Panel.Body>
-            </Panel>
-            <Panel bsStyle="info">
-              <Panel.Heading>
-                <Panel.Title>
-                  My Groups
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="20%">Name</th>
-                      <th width="10%">Kürzel</th>
-                      <th width="20%">Admin by</th>
-                      <th width="50%">&nbsp;</th>
-                    </tr>
-                  </thead>
-                  {tBodyGroups}
-                </Table>
-              </Panel.Body>
-            </Panel>
-            <Panel bsStyle="info">
-              <Panel.Heading>
-                <Panel.Title>
-                  My Devices
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <Table responsive condensed hover>
-                  <thead>
-                    <tr style={{ backgroundColor: '#ddd' }}>
-                      <th width="40%">Name</th>
-                      <th width="10%">Kürzel</th>
-                      <th width="50%">&nbsp;</th>
-                    </tr>
-                  </thead>
-                  {tBodyDevices}
-                </Table>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  // render modal
-  renderSubscribeModal() {
-    if (this.state.showSubscription) {
-      const tbody = this.state.currentSubscriptions.map(g => (
-        <tr key={`row_${g.id}`} style={{ fontWeight: 'bold' }}>
-          <td width="10%" style={{ border: 'none' }}>
-            <Button
-              bsSize="xsmall"
-              bsStyle={g.user_id == null ? 'success' : 'default'}
-              onClick={() => this.subscribe(g)}
-            >
-              {g.user_id == null ? 'Subscribe' : 'Unsubscribe'}
-            </Button>
-          </td>
-          <td width="90%" style={{ border: 'none' }}><div>{g.subject}</div></td>
-        </tr>
-      ));
-
-      return (
-        <Modal
-          show={this.state.showSubscription}
-          onHide={this.handleSubscriptionClose}
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>My Subscription</Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              <Table>
-                <tbody>
-                  {tbody}
-                </tbody>
-              </Table>
-            </div>
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return (<div />);
-  }
-
-  renderDeviceMetadataModal() {
-    const { showDeviceMetadataModal, device, deviceMetadata } = this.state;
-    const title = 'Device Metadata';
-    return (
-      <Modal
-        show={showDeviceMetadataModal}
-        onHide={this.handleDeviceMetadataModalClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{device.name} Metadata</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>
-                {title}
-              </Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Form>
-                <FormGroup controlId="metadataFormDOI">
-                  <ControlLabel>DOI</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.doi}
-                    readonly="true"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormState">
-                  <ControlLabel>State</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.data_cite_state}
-                    readonly="true"
-                  />
-                </FormGroup>
-
-                <FormGroup controlId="metadataFormURL">
-                  <ControlLabel>URL</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.url}
-                    readonly="true"
-                  />
-                </FormGroup>
-
-                <FormGroup controlId="metadataFormLandingPage">
-                  <ControlLabel>Landing Page</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.landing_page}
-                    readonly="true"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormName">
-                  <ControlLabel>Name</ControlLabel>&nbsp;&nbsp;
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.name}
-                    readonly="true"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormPublicationYear">
-                  <ControlLabel>Publication Year</ControlLabel>
-                  <FormControl
-                    type="number"
-                    defaultValue={deviceMetadata.publication_year}
-                    readonly="true"
-                  />
-                </FormGroup>
-                <FormGroup controlId="metadataFormDescription">
-                  <ControlLabel>Description</ControlLabel>
-                  <FormControl
-                    type="text"
-                    defaultValue={deviceMetadata.description}
-                    readonly="true"
-                  />
-                </FormGroup>
-
-                {deviceMetadata.dates && deviceMetadata.dates.map((dateItem, index) => (
-                  <div key={index}>
-                    <Col smOffset={0} sm={6}>
-                      <FormGroup>
-                        <ControlLabel>Date</ControlLabel>
-                        <FormControl
-                          type="text"
-                          defaultValue={dateItem.date}
-                          readonly="true"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col smOffset={0} sm={6}>
-                      <FormGroup>
-                        <ControlLabel>DateType</ControlLabel>
-                        <FormControl
-                          type="text"
-                          defaultValue={dateItem.dateType}
-                          readonly="true"
-                        />
-                      </FormGroup>
-                    </Col>
-                  </div>
-                ))}
-
-                <Row>
-                  <Col smOffset={0} sm={12}>
-                    <p class="text-right">
-                      DataCiteVersion: {deviceMetadata.data_cite_version}<br />
-                      DataCiteUpdatedAt: {moment(deviceMetadata.data_cite_updated_at).format('YYYY-MM-DD HH:mm')}<br />
-                    </p>
-                  </Col>
-                </Row>
-              </Form>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    const templatesLink = (
-      <MenuItem eventKey="2" href="/ketcher/common_templates">Template Management</MenuItem>
-    );
-    const moderatorLink = (
-      <MenuItem eventKey="6" href="/molecule_moderator">Molecule Moderator</MenuItem>
-    );
-
-    let userLabel = (<span />);
-    if (MatrixCheck(this.state.currentUser.matrix, 'userLabel')) {
-      userLabel = (<MenuItem onClick={this.handleLabelShow}>My Labels</MenuItem>);
-    }
-
-    return (
-      <div>
-        <Nav navbar pullRight>
-          <NavDropdown title={`${this.state.currentUser.name}`} id="bg-nested-dropdown">
-            <MenuItem eventKey="1" href="/pages/settings" >Account &amp; Profile</MenuItem>
-            {this.state.currentUser.is_templates_moderator ? templatesLink : null}
-            <MenuItem eventKey="3" href="/users/edit" >Change Password</MenuItem>
-            <MenuItem eventKey="5" href="/pages/affiliations" >My Affiliations</MenuItem>
-            {userLabel}
-            {
-              this.state.currentUser ?
-                <MenuItem eventKey="10" onClick={this.handleAuthorsShow}>My Collaboration</MenuItem> : null
-            }
-            {/* <MenuItem onClick={this.handleShow}>My Groups</MenuItem> */}
-            {/* <MenuItem onClick={this.handleSubscriptionShow}>My Subscriptions</MenuItem>
-                Disable for now as there is no subsciption channel yet (Paggy) */}
-            <MenuItem eventKey="12" href="/converter_admin" >Converter Profile</MenuItem>
-            {/* <MenuItem eventKey="7" href="/command_n_control" >My Devices</MenuItem> */}
-            {this.state.currentUser.molecule_editor ? moderatorLink : null}
-            {
-              this.state.currentUser && this.state.currentUser.is_article_editor ?
-                <MenuItem eventKey="8" href="/home/newseditor/new">News Editor</MenuItem> : null
-            }
-            {
-              this.state.currentUser && this.state.currentUser.is_howto_editor ?
-                <MenuItem eventKey="9" href="/home/howtoeditor/ein">How-To Editor</MenuItem> : null
-            }
-          </NavDropdown>
-          <NavItem onClick={() => this.logout()} style={{ marginRight: '5px' }} className="" title="Log out">
-            <Glyphicon glyph="log-out" />
-          </NavItem>
-        </Nav>
-        <AuthorModal show={this.state.showAuthorsModal} currentUser={this.state.currentUser} onHide={this.handleAuthorsClose} />
-        { this.renderModal() }
-        <UserLabelModal showLabelModal={this.state.showLabelModal} onHide={() => this.handleLabelClose()} />
-        {this.renderSubscribeModal()}
-        {this.renderDeviceMetadataModal()}
-      </div>
-    );
-  }
-}
-
-UserAuth.propTypes = {
-  currentUser: PropTypes.object,
-  selectUsers: PropTypes.bool,
-}
diff --git a/app/packs/src/components/UserInfoIcon.js b/app/packs/src/components/UserInfoIcon.js
deleted file mode 100644
index a0c2c93d0..000000000
--- a/app/packs/src/components/UserInfoIcon.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const UserInfoIcon = ({type}) =>{
-  switch(type) {
-    case 'Person':
-      return <i className="fa fa-user" aria-hidden="true"/>
-    case 'Group':
-      return <i className="fa fa-users" aria-hidden="true"/>
-    default:
-      return  <i className="fa fa-question" aria-hidden="true"/>
-  }
-}
-
-UserInfoIcon.propTypes = {
-  type: PropTypes.string.isRequired,
-}
-
-export default UserInfoIcon;
diff --git a/app/packs/src/components/UserLabels.js b/app/packs/src/components/UserLabels.js
index 5175a8d6e..277ef1cdb 100644
--- a/app/packs/src/components/UserLabels.js
+++ b/app/packs/src/components/UserLabels.js
@@ -29,6 +29,7 @@ class UserLabelModal extends Component {
     this.handleEditLabelClick = this.handleEditLabelClick.bind(this);
   }
 
+
   componentDidMount() {
     UserStore.listen(this.onChange);
   }
diff --git a/app/packs/src/components/ViewSpectra.js b/app/packs/src/components/ViewSpectra.js
deleted file mode 100644
index 4d71a4280..000000000
--- a/app/packs/src/components/ViewSpectra.js
+++ /dev/null
@@ -1,737 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import { SpectraEditor, FN } from '@complat/react-spectra-editor';
-import { Modal, Well, Button } from 'react-bootstrap';
-import Select from 'react-select';
-import PropTypes from 'prop-types';
-import TreeSelect from 'antd/lib/tree-select';
-
-import LoadingActions from './actions/LoadingActions';
-import SpectraActions from './actions/SpectraActions';
-import ElementActions from './actions/ElementActions';
-import SpectraStore from './stores/SpectraStore';
-import { SpectraOps } from './utils/quillToolbarSymbol';
-import ResearchPlan from './models/ResearchPlan';
-
-const rmRefreshed = (analysis) => {
-  if (!analysis) return analysis;
-  const { refreshed, ...coreAnalysis } = analysis;
-  return coreAnalysis;
-};
-
-class ViewSpectra extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...SpectraStore.getState(),
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.writeCommon = this.writeCommon.bind(this);
-    this.writePeakOp = this.writePeakOp.bind(this);
-    this.writeMpyOp = this.writeMpyOp.bind(this);
-    this.writeCloseCommon = this.writeCloseCommon.bind(this);
-    this.writeClosePeakOp = this.writeClosePeakOp.bind(this);
-    this.writeCloseMpyOp = this.writeCloseMpyOp.bind(this);
-    this.saveOp = this.saveOp.bind(this);
-    this.saveCloseOp = this.saveCloseOp.bind(this);
-    this.refreshOp = this.refreshOp.bind(this);
-    this.closeOp = this.closeOp.bind(this);
-    this.predictOp = this.predictOp.bind(this);
-    this.buildOpsByLayout = this.buildOpsByLayout.bind(this);
-    this.renderSpectraEditor = this.renderSpectraEditor.bind(this);
-    this.renderEmpty = this.renderEmpty.bind(this);
-    this.renderTitle = this.renderTitle.bind(this);
-    this.formatPks = this.formatPks.bind(this);
-    this.getContent = this.getContent.bind(this);
-    this.getSpcInfo = this.getSpcInfo.bind(this);
-    this.getQDescVal = this.getQDescVal.bind(this);
-    this.buildOthers = this.buildOthers.bind(this);
-    this.onSpectraDescriptionChanged = this.onSpectraDescriptionChanged.bind(this);
-    this.updateROPredict = this.updateROPredict.bind(this);
-    this.isShowMultipleSelectFile = this.isShowMultipleSelectFile.bind(this);
-  }
-
-  componentDidMount() {
-    SpectraStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    SpectraStore.unlisten(this.onChange);
-  }
-
-  onChange(newState) {
-    const origState = this.state;
-    this.setState({ ...origState, ...newState });
-  }
-
-  opsSolvent(shift) {
-    const { label } = shift.ref;
-
-    switch (label) {
-      case false:
-        return [];
-      case 'CDCl$3':
-        return [
-          { insert: 'CDCl' },
-          { insert: '3', attributes: { script: 'sub' } },
-          { insert: ', ' },
-        ];
-      case 'C$6D$1$2':
-        return [
-          { insert: 'C' },
-          { insert: '6', attributes: { script: 'sub' } },
-          { insert: 'D' },
-          { insert: '12', attributes: { script: 'sub' } },
-          { insert: ', ' },
-        ];
-      case 'CD2Cl2':
-      case 'CD$2Cl$2':
-        return [
-          { insert: 'CD' },
-          { insert: '2', attributes: { script: 'sub' } },
-          { insert: 'Cl' },
-          { insert: '2', attributes: { script: 'sub' } },
-          { insert: ', ' },
-        ];
-      case 'D$2O':
-        return [
-          { insert: 'D' },
-          { insert: '2', attributes: { script: 'sub' } },
-          { insert: 'O' },
-          { insert: ', ' },
-        ];
-      default:
-        return [{ insert: `${label}, ` }];
-    }
-  }
-
-  onDSSelectChange(e) {
-    const { value } = e;
-    const { spcInfos } = this.state;
-    const sis = spcInfos.filter(x => x.idDt === value);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-    SpectraActions.SelectIdx(si.idx, []);
-  }
-
-  getDSList() {
-    const { sample } = this.props;
-    const { spcInfos } = this.state;
-    const spcDts = spcInfos.map(e => e.idDt);
-    const dcs = sample.datasetContainers();
-    const dcss = dcs.filter(e => spcDts.includes(e.id));
-    return dcss;
-  }
-
-  isShowMultipleSelectFile(idx) {
-    const { spcMetas, arrSpcIdx } = this.state;
-    let spcs = false;
-    if (arrSpcIdx.length > 0) {
-      spcs = spcMetas.filter(x => arrSpcIdx.includes(x.idx));
-    }
-    else {
-      spcs = spcMetas.filter(x => x.idx === idx);
-    }
-
-    if (spcs && spcs.length > 0) {
-      const spc = spcs[0];
-      const { jcamp } = spc;
-      if (jcamp.layout === 'CYCLIC VOLTAMMETRY') {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  getContent() {
-    const { spcMetas, spcIdx, arrSpcIdx, spcInfos } = this.state;
-    if (arrSpcIdx.length > 0) {
-      const listMuliSpcs = [];
-      const listEntityFiles = [];
-      for (let i = 0; i < arrSpcIdx.length; i++) {
-        const idx = arrSpcIdx[i];
-        const spc = spcMetas.filter(x => x.idx === idx)[0];
-        if (spc) {
-          const { jcamp } = spc;
-          if (jcamp.layout !== 'CYCLIC VOLTAMMETRY') {
-            return spc;
-          }
-          listMuliSpcs.push(spc);
-        }
-        const entity = spcInfos.filter(x => x.idx === idx)[0];
-        if (entity) {
-          listEntityFiles.push(entity);
-        }
-      }
-      return { listMuliSpcs: listMuliSpcs, listEntityFiles: listEntityFiles };
-    }
-    else {
-      const sm = spcMetas.filter(x => x.idx === spcIdx)[0];
-      return sm || spcMetas[0] || { jcamp: null, predictions: null };
-    }
-  }
-
-  getSpcInfo(curveIdx = 0) {
-    const { spcInfos, spcIdx, arrSpcIdx } = this.state;
-    let selectedIdx = spcIdx;
-    if (arrSpcIdx.length > 0) {
-      selectedIdx = arrSpcIdx[curveIdx];
-    }
-    const sis = spcInfos.filter(x => x.idx === selectedIdx);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-    return si;
-  }
-
-  getQDescVal() {
-    const { sample } = this.props;
-    const { spcInfos, spcIdx } = this.state;
-    const sis = spcInfos.filter(x => x.idx === spcIdx);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-
-    const ops = sample.analysesContainers().map((ae) => {
-      if (ae.id !== si.idAe) return null;
-      return ae.children.map((ai) => {
-        if (ai.id !== si.idAi) return null;
-        return ai.extended_metadata.content.ops; // eslint-disable-line
-      }).filter(r => r !== null);
-    }).filter(r => r !== null)[0][0];
-    return ops;
-  }
-
-  formatPks({
-    peaks, shift, layout, isAscend, decimal, body,
-    isIntensity, integration
-  }) {
-    const layoutOpsObj = SpectraOps[layout];
-    if (!layoutOpsObj) {
-      return [];
-    }
-
-    const { jcamp } = this.getContent();
-    const { entity } = FN.buildData(jcamp);
-    const { features } = entity;
-    const { observeFrequency } = Array.isArray(features)
-      ? features[0]
-      : (features.editPeak || features.autoPeak);
-    const freq = Array.isArray(observeFrequency) ? observeFrequency[0] : observeFrequency;
-    const freqStr = freq ? `${parseInt(freq, 10)} MHz, ` : '';
-    // peaks
-    const { maxY, minY } = Array.isArray(features)
-      ? features[0]
-      : (features.editPeak || features.autoPeak);
-    const boundary = { maxY, minY };
-    const mBody = body || FN.peaksBody({
-      peaks, layout, decimal, shift, isAscend, isIntensity, boundary, integration
-    });
-
-    const { label, value, name } = shift.ref;
-    const solvent = label ? `${name.split('(')[0].trim()} [${value.toFixed(decimal)} ppm], ` : '';
-    return [
-      ...layoutOpsObj.head(freqStr, solvent),
-      { insert: mBody },
-      ...layoutOpsObj.tail(),
-    ];
-  }
-
-  formatMpy({
-    shift, isAscend, decimal,
-    integration, multiplicity, layout,
-  }) {
-    // obsv freq
-    const { jcamp } = this.getContent();
-    const { entity } = FN.buildData(jcamp);
-    const { features } = entity;
-    const { observeFrequency } = Array.isArray(features)
-      ? features[0]
-      : (features.editPeak || features.autoPeak);
-    const freq = Array.isArray(observeFrequency) ? observeFrequency[0] : observeFrequency;
-    const freqStr = freq ? `${parseInt(freq, 10)} MHz, ` : '';
-    // multiplicity
-    const { refArea, refFactor } = integration;
-    const shiftVal = multiplicity.shift;
-    const ms = multiplicity.stack;
-    const is = integration.stack;
-
-    const macs = ms.map((m) => {
-      const { peaks, mpyType, xExtent } = m;
-      const { xL, xU } = xExtent;
-      const it = is.filter(i => i.xL === xL && i.xU === xU)[0] || { area: 0 };
-      const area = (it.area * refFactor) / refArea;
-      const center = FN.calcMpyCenter(peaks, shiftVal, mpyType);
-      const xs = m.peaks.map(p => p.x).sort((a, b) => a - b);
-      const [aIdx, bIdx] = isAscend ? [0, xs.length - 1] : [xs.length - 1, 0];
-      const mxA = mpyType === 'm' ? (xs[aIdx] - shiftVal).toFixed(decimal) : 0;
-      const mxB = mpyType === 'm' ? (xs[bIdx] - shiftVal).toFixed(decimal) : 0;
-      return Object.assign({}, m, {
-        area, center, mxA, mxB,
-      });
-    }).sort((a, b) => (isAscend ? a.center - b.center : b.center - a.center));
-    let couplings = [].concat(...macs.map((m) => {
-      const c = m.center;
-      const type = m.mpyType;
-      const it = Math.round(m.area);
-      const js = [].concat(...m.js.map(j => (
-        [
-          { insert: 'J', attributes: { italic: true } },
-          { insert: ` = ${j.toFixed(1)} Hz` },
-          { insert: ', ' },
-        ]
-      )));
-      const atomCount = layout === '1H' ? `, ${it}H` : '';
-      const location = type === 'm' ? `${m.mxA}–${m.mxB}` : `${c.toFixed(decimal)}`;
-      return m.js.length === 0
-        ? [
-          { insert: `${location} (${type}${atomCount})` },
-          { insert: ', ' },
-        ]
-        : [
-          { insert: `${location} (${type}, ` },
-          ...js.slice(0, js.length - 1),
-          { insert: `${atomCount})` },
-          { insert: ', ' },
-        ];
-    }));
-    couplings = couplings.slice(0, couplings.length - 1);
-    const { label, value, name } = shift.ref;
-    const solvent = label ? `${name.split('(')[0].trim()} [${value.toFixed(decimal)} ppm], ` : '';
-    return [
-      { attributes: { script: 'super' }, insert: layout.slice(0, -1) },
-      { insert: `${layout.slice(-1)} NMR (${freqStr}${solvent}ppm) δ = ` },
-      ...couplings,
-      { insert: '.' },
-    ];
-  }
-
-  writeCommon({
-    peaks, shift, scan, thres, analysis, layout, isAscend, decimal, body,
-    keepPred, isIntensity, multiplicity, integration, cyclicvoltaSt, curveSt
-  }, isMpy = false) {
-    const { sample, handleSampleChanged } = this.props;
-    const si = this.getSpcInfo();
-    if (!si) return;
-
-    let ops = [];
-    if (['1H', '13C', '19F'].indexOf(layout) >= 0 && isMpy) {
-      ops = this.formatMpy({
-        multiplicity, integration, shift, isAscend, decimal, layout,
-      });
-    } else {
-      ops = this.formatPks({
-        peaks,
-        shift,
-        layout,
-        isAscend,
-        decimal,
-        body,
-        isIntensity,
-        integration
-      });
-    }
-
-    sample.analysesContainers().forEach((ae) => {
-      if (ae.id !== si.idAe) return;
-      ae.children.forEach((ai) => {
-        if (ai.id !== si.idAi) return;
-        ai.extended_metadata.content.ops = [ // eslint-disable-line
-          ...ai.extended_metadata.content.ops,
-          ...ops,
-        ];
-      });
-    });
-
-    const cb = () => (
-      this.saveOp({
-        peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, cyclicvoltaSt, curveSt
-      })
-    );
-    handleSampleChanged(sample, cb);
-  }
-
-  writePeakOp(params) {
-    const isMpy = false;
-    this.writeCommon(params, isMpy);
-  }
-
-  updateROPredict() {
-    const { sample } = this.props;
-    ElementActions.fetchSampleById(sample.id);
-  }
-
-  writeMpyOp(params) {
-    const isMpy = true;
-    this.writeCommon(params, isMpy);
-  }
-
-  saveOp({
-    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr = false
-  }) {
-    const { handleSubmit, sample } = this.props;
-    const { curveIdx } = curveSt;
-    const si = this.getSpcInfo(curveIdx);
-    if (!si) return;
-    const fPeaks = FN.rmRef(peaks, shift);
-    const peaksStr = FN.toPeakStr(fPeaks);
-    const predict = JSON.stringify(rmRefreshed(analysis));
-    const waveLengthStr = JSON.stringify(waveLength);
-    const cyclicvolta = JSON.stringify(cyclicvoltaSt);
-
-    LoadingActions.start.defer();
-    SpectraActions.SaveToFile.defer(
-      si,
-      peaksStr,
-      shift,
-      scan,
-      thres,
-      JSON.stringify(integration),
-      JSON.stringify(multiplicity),
-      predict,
-      sample.can_update === true ? handleSubmit : this.updateROPredict,
-      keepPred,
-      waveLengthStr,
-      cyclicvolta,
-      curveIdx,
-      simulatenmr,
-    );
-  }
-
-  refreshOp({
-    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
-  }) {
-    this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt, simulatenmr: true
-    });
-  }
-
-  closeOp() {
-    SpectraActions.ToggleModal.defer();
-  }
-
-  writeCloseCommon(params, isMpy = false) {
-    this.writeCommon(params, isMpy);
-    this.closeOp();
-  }
-
-  writeClosePeakOp(params) {
-    const isMpy = false;
-    this.writeCommon(params, isMpy);
-    this.closeOp();
-  }
-
-  writeCloseMpyOp(params) {
-    const isMpy = true;
-    this.writeCommon(params, isMpy);
-    this.closeOp();
-  }
-
-  saveCloseOp({
-    peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
-  }) {
-    this.saveOp({
-      peaks, shift, scan, thres, analysis, integration, multiplicity, waveLength, cyclicvoltaSt, curveSt
-    });
-    this.closeOp();
-  }
-
-  getPeaksByLayou(peaks, layout, multiplicity) {
-    if (['IR'].indexOf(layout) >= 0) return peaks;
-    if (['13C'].indexOf(layout) >= 0) return FN.CarbonFeatures(peaks, multiplicity);
-
-    const { stack, shift } = multiplicity;
-    const nmrMpyCenters = stack.map((stk) => {
-      const { mpyType, peaks } = stk;
-      return {
-        x: FN.CalcMpyCenter(peaks, shift, mpyType),
-        y: 0,
-      };
-    });
-    const defaultCenters = [{ x: -1000.0, y: 0 }];
-    return nmrMpyCenters.length > 0 ? nmrMpyCenters : defaultCenters;
-  }
-
-  predictOp({
-    peaks, shift, scan, thres, analysis, keepPred, integration, multiplicity,
-    layout,
-  }) {
-    const { handleSubmit, sample } = this.props;
-    const si = this.getSpcInfo();
-    if (!si) return;
-    const fPeaks = FN.rmRef(peaks, shift);
-    const peaksStr = FN.toPeakStr(fPeaks);
-    const predict = JSON.stringify(rmRefreshed(analysis));
-    const targetPeaks = this.getPeaksByLayou(peaks, layout, multiplicity);
-
-    // LoadingActions.start.defer();
-    SpectraActions.InferRunning.defer();
-    SpectraActions.InferSpectrum.defer(
-      si,
-      peaksStr,
-      shift,
-      scan,
-      thres,
-      JSON.stringify(integration),
-      JSON.stringify(multiplicity),
-      predict,
-      targetPeaks,
-      layout,
-      sample.can_update === true ? handleSubmit : this.updateROPredict,
-      keepPred,
-    );
-  }
-
-  buildOpsByLayout(et) {
-    if (this.props.sample && this.props.sample instanceof ResearchPlan) {
-      return [
-        { name: 'write & save', value: this.writeOp },
-        { name: 'write, save & close', value: this.writeCloseOp },
-      ];
-    }
-    const updatable = this.props.sample && this.props.sample.can_update;
-    let baseOps = updatable ? [
-      { name: 'write peak & save', value: this.writePeakOp },
-      { name: 'write peak, save & close', value: this.writeClosePeakOp },
-    ] : [];
-    const isNmr = updatable && ['1H', '13C', '19F'].indexOf(et.layout) >= 0;
-    if (isNmr) {
-      baseOps = [
-        ...baseOps,
-        { name: 'write multiplicity & save', value: this.writeMpyOp },
-        { name: 'write multiplicity, save & close', value: this.writeCloseMpyOp },
-      ];
-    }
-    if (et.layout === 'CYCLIC VOLTAMMETRY') {
-      return [
-        { name: 'save', value: this.saveOp },
-        { name: 'save & close', value: this.saveCloseOp },
-      ];
-    }
-    const saveable = updatable;
-    if (saveable) {
-      baseOps = [
-        ...baseOps,
-        { name: 'save', value: this.saveOp },
-        { name: 'save & close', value: this.saveCloseOp },
-      ];
-    }
-
-    // TO BE CHECKED
-    if (baseOps.length === 0) {
-      baseOps = [{ name: 'predict', value: this.predictOp }];
-    }
-
-    return baseOps;
-  }
-
-  buildOthers() {
-    const { others } = this.state;
-
-    return {
-      others,
-      addOthersCb: SpectraActions.AddOthers,
-    };
-  }
-
-  renderEmpty() {
-    const { fetched } = this.state;
-    const content = fetched
-      ? (
-        <Well onClick={this.closeOp}>
-          <i className="fa fa-exclamation-triangle fa-3x" />
-          <h3>No Spectra Found!</h3>
-          <h3>Please refresh the page!</h3>
-          <br />
-          <h5>Click here to close the window...</h5>
-        </Well>
-      )
-      : <i className="fa fa-refresh fa-spin fa-3x fa-fw" />;
-
-    return (
-      <div className="card-box">
-        {content}
-      </div>
-    );
-  }
-
-  renderInvalid() {
-    const { fetched } = this.state;
-    const content = fetched
-      ? (
-        <Well onClick={this.closeOp}>
-          <i className="fa fa-chain-broken fa-3x" />
-          <h3>Invalid spectrum!</h3>
-          <h3>Please delete it and upload a valid file!</h3>
-          <br />
-          <h5>Click here to close the window...</h5>
-        </Well>
-      )
-      : <i className="fa fa-refresh fa-spin fa-3x fa-fw" />;
-
-    return (
-      <div className="card-box">
-        {content}
-      </div>
-    );
-  }
-
-  renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles) {
-    const { sample } = this.props;
-    const {
-      entity, isExist,
-    } = FN.buildData(jcamp);
-
-    let currEntity = entity;
-
-    let multiEntities = false;
-    let entityFileNames = false;
-    if (!isExist) {
-      if (!listMuliSpcs || listMuliSpcs.length === 0) return this.renderInvalid();
-      listMuliSpcs = listMuliSpcs.filter((x => x !== undefined));
-      listEntityFiles = listEntityFiles.filter((x => x !== undefined));
-      multiEntities = listMuliSpcs.map((spc) => {
-        const {
-          entity
-        } = FN.buildData(spc.jcamp);
-        currEntity = entity;
-        return entity;
-      });
-      entityFileNames = listEntityFiles.map(x => x.label);
-    }
-
-    const others = this.buildOthers();
-    const operations = this.buildOpsByLayout(currEntity);
-    const descriptions = this.getQDescVal();
-    const forecast = {
-      btnCb: this.predictOp,
-      refreshCb: this.refreshOp,
-      molecule: 'molecule',
-      predictions,
-    };
-
-    return (
-      <Modal.Body>
-        {
-          !isExist && multiEntities.length == 0
-            ? this.renderInvalid()
-            : <SpectraEditor
-              entity={currEntity}
-              multiEntities={multiEntities}
-              entityFileNames={entityFileNames}
-              others={others}
-              operations={operations}
-              forecast={forecast}
-              molSvg={sample.svgPath}
-              descriptions={descriptions}
-              canChangeDescription
-              onDescriptionChanged={this.onSpectraDescriptionChanged}
-              userManualLink={{cv: 'https://chemotion.net/docs/chemspectra/cv'}}
-            />
-        }
-      </Modal.Body>
-    );
-  }
-
-  renderTitle(idx) {
-    const { spcInfos, arrSpcIdx } = this.state;
-    const si = this.getSpcInfo();
-    if (!si) return null;
-    const modalTitle = si ? `Spectra Editor - ${si.title}` : '';
-    const options = spcInfos.filter(x => x.idDt === si.idDt)
-      .map(x => ({ value: x.idx, label: x.label }));
-    // const onSelectChange = e => SpectraActions.SelectIdx(e.value);
-    const isShowMultiSelect = this.isShowMultipleSelectFile(idx);
-    const onSelectChange = value => {
-      if (Array.isArray(value)) {
-        const reversedValue = value.reverse();
-        SpectraActions.SelectIdx(reversedValue[0], reversedValue);
-      }
-      else {
-        SpectraActions.SelectIdx(value, []);
-      }
-    }
-    const dses = this.getDSList();
-    const dsOptions = dses.map(x => ({ value: x.id, label: x.name }));
-
-    return (
-      <div className="spectra-editor-title">
-        <span className="txt-spectra-editor-title">
-          {modalTitle}
-        </span>
-        <div style={{ display: 'inline-flex', margin: '0 0 0 100px' }} >
-          <Select
-            options={dsOptions}
-            value={si.idDt}
-            clearable={false}
-            style={{ width: 500 }}
-            maxTagCount={1}
-            onChange={onSelectChange} />
-        </div>
-        <Button
-          bsStyle="danger"
-          bsSize="small"
-          className="button-right"
-          onClick={this.closeOp}
-        >
-          <span>
-            <i className="fa fa-times" /> Close without Save
-          </span>
-        </Button>
-      </div>
-    );
-  }
-
-  onSpectraDescriptionChanged(value) {
-    const { spcInfos, spcIdx } = this.state;
-    const sis = spcInfos.filter(x => x.idx === spcIdx);
-    const si = sis.length > 0 ? sis[0] : spcInfos[0];
-    const { sample } = this.props;
-    sample.analysesContainers().forEach((ae) => {
-      if (ae.id !== si.idAe) return;
-      ae.children.forEach((ai) => {
-        if (ai.id !== si.idAi) return;
-        ai.extended_metadata.content.ops = value.ops;
-      });
-    });
-  }
-
-  render() {
-    const { showModal } = this.state;
-
-    const { jcamp, predictions, idx } = this.getContent();
-    const dialogClassName = 'spectra-editor-dialog';
-    // WORKAROUND: react-stickydiv duplicates elements.
-    const specElements = Array.from(document.getElementsByClassName(dialogClassName));
-    if (specElements.length > 1) {
-      specElements.slice(1).forEach(el => el.parentNode.style.display = 'none'); // eslint-disable-line
-    }
-    // WORKAROUND: react-stickydiv duplicates elements.
-
-    return (
-      <div className="spectra-editor">
-        <Modal
-          show={showModal}
-          dialogClassName={dialogClassName}
-          animation
-          onHide={this.closeOp}
-        >
-          {
-            this.renderTitle(idx)
-          }
-          {
-            showModal && (jcamp || (listMuliSpcs && listMuliSpcs.length > 0))
-              ? this.renderSpectraEditor(jcamp, predictions, listMuliSpcs, listEntityFiles)
-              : this.renderEmpty()
-          }
-        </Modal>
-      </div>
-    );
-  }
-}
-
-ViewSpectra.propTypes = {
-  sample: PropTypes.object.isRequired,
-  handleSampleChanged: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-};
-
-export default ViewSpectra;
diff --git a/app/packs/src/components/WelcomeMessage.js b/app/packs/src/components/WelcomeMessage.js
deleted file mode 100644
index 449e85c9d..000000000
--- a/app/packs/src/components/WelcomeMessage.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import { Jumbotron } from 'react-bootstrap';
-import ReactMarkdown from 'react-markdown';
-
-function Message(props) {
-  const input = props.post;
-  if (input != null && input !== undefined) {
-    return (<Jumbotron>
-      <ReactMarkdown children={input} />
-    </Jumbotron>);
-  }
-  return null;
-}
-
-class WelcomeMessage extends Component {
-  state = {
-    post: null
-  }
-  componentDidMount() {
-    fetch('welcome-message.md')
-      .then((res) => {
-        if (res.ok) {
-          return res.text();
-        }
-        return null;
-      }).then(post => this.setState(state => ({ ...state, post })))
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-  render() {
-    const { post } = this.state;
-    return (
-      <Message post={post} />
-    );
-  }
-}
-export default WelcomeMessage;
diff --git a/app/packs/src/components/Well.js b/app/packs/src/components/Well.js
deleted file mode 100644
index b10b159cd..000000000
--- a/app/packs/src/components/Well.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import SVG from 'react-inlinesvg';
-
-export default class Well extends Component {
-  render() {
-    const {sample, active} = this.props;
-
-    const className = (active) ? "well-molecule molecule-selected" : "well-molecule";
-    if (sample) {
-      return (
-        <div>
-          <SVG className={className} key={sample.id} src={sample.svgPath}/>
-        </div>
-      );
-    } else {
-      return <div></div>
-    }
-  }
-}
-
-Well.propTypes = {
-  sample: PropTypes.object
-};
diff --git a/app/packs/src/components/WellContainer.js b/app/packs/src/components/WellContainer.js
deleted file mode 100644
index 6f52fd5f8..000000000
--- a/app/packs/src/components/WellContainer.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import Well from 'src/apps/mydb/elements/details/wellplates/designerTab/Well';
-
-const wellSource = {
-  beginDrag(props) {
-    return props;
-  }
-};
-
-const wellTarget = {
-  canDrop(props, monitor) {
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    let canDrop = true;
-    if (itemType == 'sample' && props.well.sample) {
-      canDrop = false;
-    } else if (itemType == 'well' && !item.well.sample && !props.well.sample) {
-      canDrop = false;
-    }
-    return canDrop;
-  },
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    const itemType = monitor.getItemType();
-    if (itemType == 'sample') {
-      props.dropSample(item.element, props.well);
-    } else if (itemType == 'well') {
-      props.swapWells(item.well, props.well);
-    }
-  }
-};
-
-const collectTarget = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-});
-
-class WellContainer extends Component {
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { active, hideOverlay } = this.props;
-    if (active && nextProps.isDragging) {
-      hideOverlay();
-    }
-  }
-
-  render() {
-    const { style, isDragging, connectDragSource, connectDropTarget, well, isOver, canDrop, active } = this.props;
-    const containerStyle = {
-      paddingTop: 9,
-      borderRadius: '50%',
-      float: 'left',
-      borderWidth: 4,
-      borderStyle: 'solid',
-      borderColor: 'lightgray',
-      textAlign: 'center',
-      verticalAlign: 'middle',
-      lineHeight: 2,
-      cursor: 'move',
-      backgroundColor: well.color_code || 'white'
-    };
-    if (active) {
-      containerStyle.backgroundColor = '#337ab7';
-      containerStyle.color = 'white';
-    }
-    if (isDragging) {
-      containerStyle.opacity = 0;
-    }
-    if (well.sample) {
-      containerStyle.borderColor = 'gray';
-    }
-    if (isOver && canDrop) {
-      containerStyle.borderStyle = 'dashed';
-      containerStyle.borderColor = '#337ab7';
-      containerStyle.opacity = 0;
-    } else if (canDrop) {
-      containerStyle.borderStyle = 'dashed';
-    }
-
-    return (
-      connectDragSource(connectDropTarget(
-        <div style={{ ...containerStyle, ...style }}>
-          <Well
-            active={active}
-            label={well.label}
-            sample={well.sample}
-          />
-        </div>
-      ))
-    );
-  }
-}
-
-export default DropTarget([DragDropItemTypes.WELL, DragDropItemTypes.SAMPLE], wellTarget, collectTarget)(DragSource(DragDropItemTypes.WELL, wellSource, collectSource)(WellContainer));
-
-WellContainer.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-  swapWells: PropTypes.func.isRequired,
-  dropSample: PropTypes.func.isRequired,
-  well: PropTypes.object
-};
diff --git a/app/packs/src/components/WellOverlay.js b/app/packs/src/components/WellOverlay.js
deleted file mode 100644
index e7a240282..000000000
--- a/app/packs/src/components/WellOverlay.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Popover,
-  Overlay,
-  ControlLabel,
-  FormGroup,
-  FormControl,
-  Col, InputGroup, ButtonGroup, Form,
-} from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import UIStore from './stores/UIStore';
-import { wellplateShowSample } from './routesUtils';
-import Select from 'react-select';
-import { CirclePicker } from 'react-color';
-
-const WellOverlay = ({show, well, placement, target, handleClose, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode}) => {
-  return (
-    <Overlay  rootClose
-              show={show}
-              target={target}
-              placement={placement}
-              onHide={() => handleClose()} >
-      <Popover title={title(handleClose)} id={'wellpop'+well.id}>
-        {content(well, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode)}
-      </Popover>
-    </Overlay>
-  );
-}
-
-const content = (well, removeSampleFromWell, handleWellLabel, handleColorPicker, selectedColor, saveColorCode) => {
-  const { sample } = well;
-  const bcStyle = {
-    backgroundColor: selectedColor || well.color_code
-  };
-  const wellLabels = well.label ? well.label.split(',') : [];
-  const isDisable = () => wellLabels.some(item => item === 'Molecular structure');
-
-  const labels = [{
-    label: 'Name',
-    value: 'Name',
-    disabled: isDisable()
-  }, {
-    label: 'External label',
-    value: 'External label',
-    disabled: isDisable()
-  }, {
-    label: 'Molecular structure',
-    value: 'Molecular structure',
-    disabled: (wellLabels.some(item => item !== 'Molecular structure'))
-  }];
-
-  return(
-    <div style={{width: 220, height: 850}}>
-      {renderWellContent(well, removeSampleFromWell)}
-      <div>
-        <hr style={{marginTop: 28, marginBottom: 10}}/>
-        <Select
-          id="label"
-          name="label"
-          multi
-          options={labels}
-          value={well.label}
-          onChange={e => handleWellLabel(e)}
-        />
-        &nbsp;
-        <FormGroup>
-          <ControlLabel>Readout</ControlLabel>
-          <FormControl componentClass="textarea"
-            disabled={true}
-            value={well.readout || ''}
-            style={{height: 80}}
-          />
-        </FormGroup>
-        <FormGroup>
-          <ControlLabel>Imported Readout</ControlLabel>
-          <FormControl componentClass="textarea"
-            disabled={true}
-            value={sampleImportedReadout(sample) || ''}
-            style={{height: 80}}
-          />
-        </FormGroup>
-        <FormGroup style={{ top: '50px' }} controlId="colorInput">
-          <Col componentClass={ControlLabel} sm={3}>
-            Select Color
-          </Col>
-          <Col sm={9}>
-            <InputGroup>
-              <InputGroup.Addon style={bcStyle}></InputGroup.Addon>
-              <FormControl
-                type="text"
-                readOnly
-                value={selectedColor || well.color_code}
-              />
-            </InputGroup>
-          </Col>
-        </FormGroup>
-        <FormGroup controlId="formHorizontalPicker">
-          <Col sm={12}>
-            <CirclePicker width="132%" onChangeComplete={e => handleColorPicker(e)} />
-          </Col>
-        </FormGroup>
-        <ButtonGroup style={{ top: '10px', bottom: '10px' }}>
-          <Button style={{ left: '80px' }} onClick={saveColorCode}>Save</Button>
-        </ButtonGroup>
-      </div>
-    </div>
-  )
-}
-
-const title = (handleClose) => {
-  return(
-    <div>
-      Well Details
-      <span className='pull-right' style={{marginRight: -8, marginTop: -3}}>
-        <Button bsSize='xsmall' onClick={() => handleClose()}>
-          <i className="fa fa-times"></i>
-        </Button>
-      </span>
-    </div>
-  )
-}
-
-const renderWellContent = (well, removeSampleFromWell) => {
-  const {sample} = well;
-  let svg, moleculeName, removeButton = '';
-  const namesStyle= {textAlign: 'center', marginTop: 5};
-  const svgContainerStyle = {
-    borderRadius: '50%',
-    height: 200,
-    width: 200,
-    border: '6px solid lightgray',
-    textAlign: 'center',
-    verticalAlign: 'middle',
-    lineHeight: 2
-  };
-  if (sample) {
-    svg = <SVG key={sample.id} className="molecule-mid" src={sample.svgPath}/>;
-    moleculeName = sample.molecule.iupac_name;
-    removeButton = (
-      <div className="pull-right">
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => removeSampleFromWell(well)}>
-          <span className="fa fa-trash-o"></span>
-        </Button>
-      </div>
-    );
-  }
-  return (
-    <div>
-      <div style={svgContainerStyle}>
-        {svg}
-      </div>
-      <div style={namesStyle}>
-        {sampleName(sample)}<br/>
-        {moleculeName}<br/>
-      </div>
-      {removeButton}
-    </div>
-  );
-}
-
-const sampleImportedReadout = (sample) => {
-  return sample
-    ? sample.imported_readout
-    : ''
-}
-
-const sampleName = (sample) => {
-  if(sample) {
-    let {name, external_label, short_label} = sample
-    let sampleNameLabel = `${name || ""} ${external_label || ""} ${short_label || ""}`
-    if(sample.isNew) {
-      return sampleNameLabel;
-    } else {
-      return (
-        <a onClick={() => handleSampleClick(sample)} style={{cursor: 'pointer'}}>
-          {sampleNameLabel}
-        </a>
-      );
-    }
-
-  }
-}
-
-const handleSampleClick = (sample) => {
-  const { params, uri } = Aviator.getCurrentRequest();
-  Aviator.navigate(`${uri}/sample/${sample.id}`, { silent: true });
-  wellplateShowSample({ params: { ...params, sampleID: sample.id } });
-}
-
-export default WellOverlay;
diff --git a/app/packs/src/components/Wellplate.js b/app/packs/src/components/Wellplate.js
deleted file mode 100644
index 06949dbad..000000000
--- a/app/packs/src/components/Wellplate.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import WellContainer from './WellContainer';
-import WellplateLabels from './WellplateLabels';
-import WellOverlay from './WellOverlay';
-import WellplatesFetcher from './fetchers/WellplatesFetcher';
-
-export default class Wellplate extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showOverlay: false,
-      overlayTarget: {},
-      overlayWell: {},
-      overlayPlacement: 'right',
-      selectedColor: null
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener('scroll', this.onScroll.bind(this));
-    document.getElementsByClassName('panel-body')[0].addEventListener('scroll', this.onScroll.bind(this));
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { show } = nextProps;
-    if (!show) {
-      this.hideOverlay();
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.onScroll.bind(this));
-    document.getElementsByClassName('panel-body')[0].removeEventListener('scroll', this.onScroll.bind(this));
-  }
-
-  onScroll() {
-    const { showOverlay, overlayTarget, overlayWell } = this.state;
-    if (showOverlay) {
-      this.hideOverlay();
-      setTimeout(() => {
-        this.showOverlay(overlayTarget, overlayWell);
-      }, 700);
-    }
-  }
-
-  swapWells(firstWell, secondWell) {
-    const { handleWellsChange, wells } = this.props;
-    const firstWellId = wells.indexOf(firstWell);
-    const secondWellId = wells.indexOf(secondWell);
-    const temp = wells[firstWellId].sample;
-    wells[firstWellId].sample = wells[secondWellId].sample;
-    wells[secondWellId].sample = temp;
-    handleWellsChange(wells);
-  }
-
-  dropSample(droppedSample, well) {
-    const { handleWellsChange, wells } = this.props;
-    const wellId = wells.indexOf(well);
-    const sample = droppedSample.buildChild();
-    wells[wellId] = {
-      ...well,
-      sample
-    };
-    handleWellsChange(wells);
-  }
-
-  removeSampleFromWell(well) {
-    const { handleWellsChange, wells } = this.props;
-    const wellId = wells.indexOf(well);
-    wells[wellId] = {
-      ...well,
-      sample: null
-    };
-    handleWellsChange(wells);
-    this.hideOverlay();
-  }
-
-  hideOverlay() {
-    this.setState({
-      showOverlay: false,
-      selectedColor: null
-    });
-  }
-
-  showOverlay(key, well) {
-    const { cols } = this.props;
-    const isWellInUpperHalf = Math.ceil(cols / 2) > key % cols;
-    const placement = (isWellInUpperHalf) ? 'right' : 'left';
-    this.setState({
-      showOverlay: true,
-      overlayTarget: key,
-      overlayWell: well,
-      overlayPlacement: placement
-    });
-  }
-
-  setWellLabel(target) {
-    const { overlayWell } = this.state;
-    WellplatesFetcher.updateWellLabel({
-      id: overlayWell.id,
-      label: target.map(t => t.label).toString()
-    }).then((result) => {
-      overlayWell.label = result.label;
-      this.setState({ overlayWell });
-    });
-  }
-
-  toggleOverlay(key, well) {
-    const {showOverlay, overlayWell} = this.state;
-    if (showOverlay && overlayWell == well) {
-      this.hideOverlay();
-    } else {
-      this.showOverlay(key, well);
-    }
-  }
-
-  isWellActive(well) {
-    const {showOverlay, overlayWell} = this.state;
-    return (showOverlay && overlayWell == well);
-  }
-
-  saveColorCode() {
-    const { overlayWell, selectedColor } = this.state;
-    WellplatesFetcher.updateWellColorCode({
-      id: overlayWell.id,
-      color_code: selectedColor,
-    }).then((result) => {
-      overlayWell.color_code = result.color_code;
-      this.setState({ overlayWell });
-    });
-  }
-
-  setColorPicker(color) {
-    this.setState({ selectedColor: color.hex });
-  }
-
-  render() {
-    const {wells, size, cols, width, handleWellsChange} = this.props;
-    const {showOverlay, overlayTarget, overlayWell, overlayPlacement, selectedColor} = this.state;
-    const style = {
-      width: (cols + 1) * width,
-      height: ((size / cols) + 1) * width
-    };
-    const containerStyle = {
-      width: width,
-      height: width,
-      fontSize: 8
-    };
-
-    return (
-      <div style={style}>
-        <WellplateLabels
-          size={size}
-          cols={cols}
-          width={width}
-          type={'horizontal'}
-          />
-        <WellplateLabels
-          size={size}
-          cols={cols}
-          width={width}
-          type={'vertical'}
-          />
-        {wells.map((well, key) => {
-          return (
-            <div
-              key={key}
-              ref={key}
-              onClick={event => this.toggleOverlay(key, well)}
-              >
-              <WellContainer
-                well={well}
-                style={containerStyle}
-                swapWells={(firstWell, secondWell) => this.swapWells(firstWell, secondWell)}
-                dropSample={(sample, wellId) => this.dropSample(sample, wellId)}
-                active={this.isWellActive(well)}
-                hideOverlay={() => this.hideOverlay()}
-                />
-            </div>
-          );
-        })}
-        <WellOverlay
-          show={showOverlay}
-          well={overlayWell}
-          selectedColor={selectedColor}
-          placement={overlayPlacement}
-          target={() => ReactDOM.findDOMNode(this.refs[overlayTarget]).children[0]}
-          handleClose={() => this.hideOverlay()}
-          removeSampleFromWell={well => this.removeSampleFromWell(well)}
-          handleColorPicker={value => this.setColorPicker(value)}
-          saveColorCode={() => this.saveColorCode()}
-          handleWellLabel={value => this.setWellLabel(value)}
-        />
-      </div>
-    );
-  }
-}
-
-Wellplate.propTypes = {
-  size: PropTypes.number.isRequired,
-  wells: PropTypes.array.isRequired,
-  handleWellsChange: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/components/WellplateDetails.js b/app/packs/src/components/WellplateDetails.js
deleted file mode 100644
index 9e05d11fe..000000000
--- a/app/packs/src/components/WellplateDetails.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import React, { Component } from 'react';
-import html2pdf from 'html2pdf.js/src';
-import PropTypes from 'prop-types';
-import {
-  Well, Panel, ListGroupItem, ButtonToolbar, Button,
-  Tabs, Tab, Tooltip, OverlayTrigger, Col, Row, Popover
-} from 'react-bootstrap';
-import { findIndex } from 'lodash';
-import LoadingActions from './actions/LoadingActions';
-import ElementCollectionLabels from './ElementCollectionLabels';
-import ElementActions from './actions/ElementActions';
-import DetailActions from './actions/DetailActions';
-import Wellplate from './Wellplate';
-import WellplateList from './WellplateList';
-import WellplateProperties from './WellplateProperties';
-import WellplateDetailsContainers from './WellplateDetailsContainers';
-import PrintCodeButton from './common/PrintCodeButton';
-import UIStore from './stores/UIStore';
-import UIActions from './actions/UIActions';
-import ConfirmClose from './common/ConfirmClose';
-import ExportSamplesBtn from './ExportSamplesBtn';
-import Immutable from 'immutable';
-import ElementDetailSortTab from './ElementDetailSortTab';
-import { addSegmentTabs } from './generic/SegmentDetails';
-import PrivateNoteElement from './PrivateNoteElement'
-
-const cols = 12;
-
-export default class WellplateDetails extends Component {
-  constructor(props) {
-    super(props);
-    const { wellplate } = props;
-    this.state = {
-      wellplate,
-      activeTab: UIStore.getState().wellplate.activeTab,
-      showWellplate: true,
-      visible: Immutable.List(),
-    };
-    this.onUIStoreChange = this.onUIStoreChange.bind(this);
-    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
-    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIStoreChange);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { wellplate } = this.state;
-    const nextWellplate = nextProps.wellplate;
-    if (nextWellplate.id !== wellplate.id || nextWellplate.updated_at !== wellplate.updated_at) {
-      this.setState({
-        wellplate: nextWellplate
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIStoreChange);
-  }
-
-  onUIStoreChange(state) {
-    if (state.wellplate.activeTab !== this.state.activeTab) {
-      this.setState({
-        activeTab: state.wellplate.activeTab
-      });
-    }
-  }
-
-  handleSegmentsChange(se) {
-    const { wellplate } = this.state;
-    const { segments } = wellplate;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
-    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
-    wellplate.segments = segments;
-    wellplate.changed = true;
-    this.setState({ wellplate });
-  }
-
-  handleSubmit() {
-    const { wellplate } = this.state;
-    LoadingActions.start();
-    if (wellplate.isNew) {
-      ElementActions.createWellplate(wellplate.serialize());
-    } else {
-      ElementActions.updateWellplate(wellplate.serialize());
-    }
-    if (wellplate.is_new) {
-      const force = true;
-      DetailActions.close(wellplate, force);
-    }
-    wellplate.updateChecksum();
-  }
-
-  handleWellplateChanged(wellplate) {
-    this.setState({
-      wellplate
-    });
-  }
-
-  handlePrint() {
-    const element = document.getElementById('wellplate-designer');
-    if (element) {
-      const opt = { filename: `${this.state.wellplate.name}-wells.pdf` };
-      html2pdf(element, opt);
-    }
-  }
-
-  handleWellsChange(wells) {
-    const { wellplate } = this.state;
-    wellplate.wells = wells;
-    this.setState({ wellplate });
-  }
-
-  handleChangeProperties(change) {
-    const { wellplate } = this.state;
-    const { type, value } = change;
-    switch (type) {
-      case 'name':
-        wellplate.name = value === '' ? 'New Wellplate' : value;
-        break;
-      case 'description':
-        wellplate.description = value;
-        break;
-      default:
-        break;
-    }
-    this.setState({ wellplate });
-  }
-
-  handleTabChange(eventKey) {
-    const showWellplate = (eventKey === 0);
-    this.setState(previousState => ({ ...previousState, activeTab: eventKey, showWellplate }));
-    UIActions.selectTab({ tabKey: eventKey, type: 'wellplate' });
-  }
-
-  wellplateHeader(wellplate) {
-    const saveBtnDisplay = wellplate.isEdited ? '' : 'none';
-    const datetp = `Created at: ${wellplate.created_at} \n Updated at: ${wellplate.updated_at}`;
-
-
-    return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
-          <span>
-            <i className="icon-wellplate" />
-            &nbsp; <span>{wellplate.name}</span> &nbsp;
-          </span>
-        </OverlayTrigger>
-        <ElementCollectionLabels element={wellplate} placement="right" />
-        <ConfirmClose el={wellplate} />
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: saveBtnDisplay }}>
-            <i className="fa fa-floppy-o " />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.props.toggleFullScreen()}>
-            <i className="fa fa-expand" />
-          </Button>
-        </OverlayTrigger>
-        <PrintCodeButton element={wellplate} />
-      </div>
-    );
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({visible})
-  }
-
-  render() {
-    const {
-      wellplate, showWellplate, visible
-    } = this.state;
-    const {
-      wells, name, size, description
-    } = wellplate;
-    const submitLabel = wellplate.isNew ? 'Create' : 'Save';
-    const exportButton = (wellplate && wellplate.isNew) ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
-    const properties = { name, size, description };
-
-
-    const tabContentsMap = {
-      designer: (
-        <Tab eventKey="designer" title="Designer" key={`designer_${wellplate.id}`}>
-          <Row className="wellplate-detail">
-            <Col md={10}>
-              <Well id="wellplate-designer">
-                <Wellplate
-                  show={showWellplate}
-                  size={size}
-                  wells={wells}
-                  handleWellsChange={w => this.handleWellsChange(w)}
-                  cols={cols}
-                  width={60}
-                />
-              </Well>
-            </Col>
-          </Row>
-        </Tab>
-      ),
-      list: (
-        <Tab eventKey="list" title="List" key={`list_${wellplate.id}`}>
-          <Well>
-            <WellplateList
-              wells={wells}
-              handleWellsChange={w => this.handleWellsChange(w)}
-            />
-          </Well>
-        </Tab>
-      ),
-      properties: (
-        <Tab eventKey="properties" title="Properties" key={`properties_${wellplate.id}`}>
-          <WellplateProperties
-            {...properties}
-            changeProperties={c => this.handleChangeProperties(c)}
-          />
-          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} /> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
-        </Tab>
-      ),
-      analyses: (
-        <Tab eventKey="analyses" title="Analyses" key={`analyses_${wellplate.id}`}>
-          <ListGroupItem style={{ paddingBottom: 20 }}>
-            <WellplateDetailsContainers
-              wellplate={wellplate}
-              parent={this}
-            />
-          </ListGroupItem>
-        </Tab>
-      ),
-    };
-
-    const tabTitlesMap = {
-    }
-    addSegmentTabs(wellplate, this.handleSegmentsChange, tabContentsMap);
-
-    const tabContents = [];
-    visible.forEach((value) => {
-      const tabContent = tabContentsMap[value];
-      if (tabContent) { tabContents.push(tabContent); }
-    });
-
-    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
-
-    return (
-      <Panel bsStyle={wellplate.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail">
-        <Panel.Heading>{this.wellplateHeader(wellplate)}</Panel.Heading>
-        <Panel.Body>
-          <ElementDetailSortTab
-            type="wellplate"
-            availableTabs={Object.keys(tabContentsMap)}
-            tabTitles={tabTitlesMap}
-            onTabPositionChanged={this.onTabPositionChanged}
-          />
-          <Tabs activeKey={activeTab} onSelect={event => this.handleTabChange(event)} id="wellplateDetailsTab">
-            {tabContents}
-          </Tabs>
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>
-              Close
-            </Button>
-            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
-              {submitLabel}
-            </Button>
-            {exportButton}
-            <Button bsStyle="primary" onClick={() => this.handlePrint()}>
-              Print Wells
-            </Button>
-          </ButtonToolbar>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-WellplateDetails.propTypes = {
-  wellplate: PropTypes.object.isRequired,
-  toggleFullScreen: PropTypes.func,
-};
diff --git a/app/packs/src/components/WellplateDetailsContainers.js b/app/packs/src/components/WellplateDetailsContainers.js
deleted file mode 100644
index b33c94817..000000000
--- a/app/packs/src/components/WellplateDetailsContainers.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {PanelGroup, Panel, Button, Row, Col} from 'react-bootstrap';
-import Container from './models/Container';
-import ContainerComponent from './ContainerComponent';
-import PrintCodeButton from './common/PrintCodeButton'
-
-import TextTemplateActions from './actions/TextTemplateActions';
-
-export default class WellplateDetailsContainers extends Component {
-  constructor(props) {
-    super();
-    const {wellplate} = props;
-    this.state = {
-      wellplate,
-      activeContainer: 0
-    };
-  }
-
-  componentDidMount() {
-    TextTemplateActions.fetchTextTemplates('wellplate');
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      wellplate: nextProps.wellplate
-    })
-  }
-
-  handleChange(container) {
-    const {wellplate} = this.state
-    this.props.parent.handleWellplateChanged(wellplate)
-  }
-
-  handleAdd() {
-    const {wellplate} = this.state;
-    let container = Container.buildEmpty();
-    container.container_type = "analysis";
-
-    wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.push(container);
-
-    const newKey = wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'))[0].children.length - 1;
-
-    this.handleAccordionOpen(newKey);
-
-    this.props.parent.setState({wellplate: wellplate})
-  }
-
-  handleRemove(container) {
-    let {wellplate} = this.state;
-    container.is_deleted = true;
-
-    this.props.parent.setState({wellplate: wellplate})
-  }
-
-  handleUndo(container) {
-    let {wellplate} = this.state;
-    container.is_deleted = false;
-
-    this.props.parent.setState({wellplate: wellplate})
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({activeContainer: key});
-  }
-
-  addButton() {
-    const {readOnly} = this.props;
-    if(! readOnly) {
-      return (
-          <Button className="button-right" bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
-            Add analysis
-          </Button>
-      )
-    }
-  }
-
-  render() {
-    const {wellplate, activeContainer} = this.state;
-    const {readOnly} = this.props;
-
-    let containerHeader = (container) => <div style={{width: '100%'}}>
-        {container.name}
-        {(container.extended_metadata['kind'] &&
-           container.extended_metadata['kind'] != '')
-        ? (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
-        {(container.extended_metadata['status'] &&
-           container.extended_metadata['status'] != '')
-           ? (' - Status: ' + container.extended_metadata['status']) :''}
-        <Button bsSize="xsmall" bsStyle="danger"
-           className="button-right" disabled={readOnly}
-          onClick={() => {if(confirm('Delete the container?')) {
-            this.handleRemove(container)}}}>
-          <i className="fa fa-trash"></i>
-        </Button>
-        <PrintCodeButton element={wellplate} analyses={[container]}
-          ident={container.id}/>
-      </div>
-
-      let containerHeaderDeleted = (container) => <p style={{width: '100%'}}><strike>{container.name}
-        {(container.extended_metadata['kind'] &&
-            container.extended_metadata['kind'] != '')
-          ? (` - Type: ${container.extended_metadata['kind'].split('|')[1] || container.extended_metadata['kind']}`) : ''}
-        {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) :''}
-        </strike>
-        <Button className="pull-right" bsSize="xsmall" bsStyle="danger" onClick={() => this.handleUndo(container)}>
-          <i className="fa fa-undo"></i>
-        </Button>
-        </p>
-
-    if(wellplate.container != null){
-
-      var analyses_container = wellplate.container.children.filter(element => ~element.container_type.indexOf('analyses'));
-
-      if(analyses_container.length == 1 && analyses_container[0].children.length > 0){
-        return (
-          <div>
-          <p>&nbsp;{this.addButton()}</p>
-          <PanelGroup defaultActiveKey={0} activeKey={activeContainer} accordion>
-          {analyses_container[0].children.map((container, key) => {
-            if (container.is_deleted){
-              return (
-                <Panel eventKey={key}
-                    key={key} >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                </Panel>
-                  );
-                }else {
-              return (
-                <Panel eventKey={key}
-                    key={key} onClick={() => this.handleAccordionOpen(key)}>
-                  <Panel.Heading>{containerHeader(container)}</Panel.Heading>
-                  <Panel.Body collapsible="true">
-                    <ContainerComponent
-                      templateType="wellplate"
-                      readOnly={readOnly}
-                      container={container}
-                      onChange={container => this.handleChange(container)}
-                    />
-                  </Panel.Body>
-                </Panel>
-              );
-            }
-
-            }
-          )}
-          </PanelGroup>
-          </div>
-        )
-      }else {
-        return (
-          <div>
-            <p className='noAnalyses-warning'>
-              There are currently no Analyses.
-              {this.addButton()}
-            </p>
-          </div>
-        )
-      }
-
-    }else{
-
-      return (
-        <div>
-          <p className='noAnalyses-warning'>
-            There are currently no Analyses.
-          </p>
-        </div>
-      )
-    }
-
-  }
-
-}
-
-WellplateDetailsContainers.propTypes = {
-  readOnly: PropTypes.bool,
-  parent: PropTypes.object,
-};
diff --git a/app/packs/src/components/WellplateLabels.js b/app/packs/src/components/WellplateLabels.js
deleted file mode 100644
index 29773370b..000000000
--- a/app/packs/src/components/WellplateLabels.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, {Component} from 'react';
-
-export default class WellplateLabels extends Component {
-  render() {
-    const {size, cols, width, type} = this.props;
-    let style = {
-      width: width,
-      fontSize: 20,
-      fontWeight: 'bold'
-    };
-    if (type == 'horizontal') {
-      let labels = [];
-      for (let i = 0; i < cols; i ++) {
-        labels[i] = i + 1;
-      }
-      style = {
-        ...style,
-        float: 'left',
-        height: width / 2,
-        textAlign: 'center'
-      };
-      return (
-        <div>
-          {labels.map(label => <div style={style} key={label}>{label}</div>)}
-        </div>
-      );
-    } else if (type == 'vertical') {
-      const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
-      let labels = [];
-      const rows = size / cols;
-      for (let i = 0; i < rows; i ++) {
-        labels[i] = alphabet[i];
-      }
-      style = {
-        ...style,
-        height: width,
-        lineHeight: 3,
-        verticalAlign: 'middle',
-        paddingLeft: 10
-      };
-      return (
-        <div style={{float: 'right', marginTop: width / 2}}>
-          {labels.map((label, key) => <div style={style} key={key}>{label}</div>)}
-        </div>
-      );
-    }
-  }
-}
diff --git a/app/packs/src/components/WellplateList.js b/app/packs/src/components/WellplateList.js
deleted file mode 100644
index d16b3fefc..000000000
--- a/app/packs/src/components/WellplateList.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Table, FormControl } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-
-export default class WellplateList extends Component {
-  handleReadoutOfWellChange(event, well) {
-    const value = event.target.value;
-    const { wells, handleWellsChange } = this.props;
-    const wellId = wells.indexOf(well);
-    wells[wellId].readout = value;
-    handleWellsChange(wells);
-  }
-
-  render() {
-    const { wells } = this.props;
-    return (
-      <div>
-        <Table bordered hover condensed>
-          <thead>
-            <tr>
-              <th width="3%">#</th>
-              <th width="5%">Position</th>
-              <th width="5%">Molecule</th>
-              <th width="11%">Name</th>
-              <th width="11%">External Label</th>
-              <th width="15%">Sum-Formula</th>
-              <th width="25%">Readout</th>
-              <th width="25%">Imported Readout</th>
-            </tr>
-          </thead>
-          <tbody>
-            {wells.map((well, key) => {
-              const id = key + 1;
-              const { sample, position, readout } = well;
-              const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-              const positionY = alphabet[position.y - 1];
-              const positions = positionY + position.x;
-              let svgPath = '';
-              let sampleName = '';
-              let externalLabel = '';
-              let sum_formular = '';
-              let importedReadout = '';
-              let svgNode = '';
-              const style = {
-                resize: 'none',
-                height: 66
-              };
-              const inputContainerStyle = {
-                padding: 0
-              };
-              if (sample) {
-                svgPath = `/images/molecules/${sample.molecule.molecule_svg_file}`;
-                svgNode = <SVG className="molecule-small" src={svgPath} />;
-                const { external_label, short_label, imported_readout } = sample;
-                sampleName = `${short_label || ''}`;
-                externalLabel = `${external_label || ''}`;
-                importedReadout = imported_readout;
-                sum_formular = sample.molecule_formula;
-              }
-              return (
-                <tr key={key}>
-                  <td>{id}</td>
-                  <td>{positions}</td>
-                  <td>{svgNode}</td>
-                  <td>{sampleName}</td>
-                  <td>{externalLabel}</td>
-                  <td>{sum_formular}</td>
-                  <td style={inputContainerStyle}>
-                    <FormControl
-                      componentClass="textarea"
-                      style={style}
-                      value={readout || ''}
-                      onChange={event => this.handleReadoutOfWellChange(event, well)}
-                      className="no-margin"
-                    />
-                  </td>
-                  <td style={inputContainerStyle}>
-                    <FormControl
-                      componentClass="textarea"
-                      style={style}
-                      value={importedReadout || ''}
-                      disabled
-                      className="no-margin"
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </Table>
-      </div>
-    );
-  }
-}
-
-WellplateList.propTypes = {
-  wells: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  handleWellsChange: PropTypes.func.isRequired
-};
diff --git a/app/packs/src/components/WellplateProperties.js b/app/packs/src/components/WellplateProperties.js
deleted file mode 100644
index 6bf7ba15b..000000000
--- a/app/packs/src/components/WellplateProperties.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, {Component} from 'react';
-import {FormGroup, FormControl, ControlLabel} from 'react-bootstrap';
-
-import QuillEditor from './QuillEditor'
-
-export default class WellplateProperties extends Component {
-
-  handleInputChange(type, event) {
-    const {changeProperties} = this.props;
-    const {value} = event.target;
-    changeProperties({type: type, value: value});
-  }
-
-  render() {
-    const {name, size, description} = this.props;
-    return (
-      <table width="100%"><tbody>
-        <tr>
-          <td width="70%" className="padding-right">
-            <FormGroup>
-              <ControlLabel>Name</ControlLabel>
-              <FormControl type="text"
-                value={name || ''}
-                onChange={event => this.handleInputChange('name', event)}
-                disabled={name == '***'}
-              />
-            </FormGroup>
-          </td>
-          <td width="30%">
-            <FormGroup>
-              <ControlLabel>Size</ControlLabel>
-              <FormControl type="text"
-                value={size || ''}
-                onChange={event => this.handleInputChange('size', event)}
-                disabled
-              />
-            </FormGroup>
-          </td>
-        </tr>
-        <tr>
-          <td colSpan="2">
-            <FormGroup>
-              <ControlLabel>Description</ControlLabel>
-              <QuillEditor value={description}
-                onChange={event => this.handleInputChange('description', {target: {value: event}})}
-                disabled={description == '***'}
-              />
-            </FormGroup>
-          </td>
-        </tr>
-      </tbody></table>
-    );
-  }
-}
diff --git a/app/packs/src/components/actions/ClipboardActions.js b/app/packs/src/components/actions/ClipboardActions.js
deleted file mode 100644
index 2522bca23..000000000
--- a/app/packs/src/components/actions/ClipboardActions.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import alt from '../alt';
-import SamplesFetcher from '../fetchers/SamplesFetcher';
-import WellplatesFetcher from '../fetchers/WellplatesFetcher';
-
-
-class ClipboardActions {
-  fetchSamplesByUIStateAndLimit(params, action) {
-    return (dispatch) => { SamplesFetcher.fetchSamplesByUIStateAndLimit(params)
-      .then((result) => {
-        dispatch({samples: result, collection_id: params.sample.collection_id, action: action});
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchWellplatesByUIState(params, action) {
-    return (dispatch) => { WellplatesFetcher.fetchWellplatesByUIState(params)
-      .then((result) => {
-        dispatch({wellplates: result, collection_id: params.wellplate.collection_id, action: action});
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchElementAndBuildCopy(sample, collection_id, action) {
-    sample.collection_id = collection_id;
-    return (
-      { samples: [sample], collection_id: collection_id, action: action}
-    )
-  }
-}
-export default alt.createActions(ClipboardActions);
diff --git a/app/packs/src/components/actions/CollectionActions.js b/app/packs/src/components/actions/CollectionActions.js
deleted file mode 100644
index 17d405a6b..000000000
--- a/app/packs/src/components/actions/CollectionActions.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import alt from '../alt';
-import CollectionsFetcher from '../fetchers/CollectionsFetcher';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import UIStore from '../stores/UIStore';
-import Utils from '../utils/Functions';
-
-class CollectionActions {
-  fetchGenericEls() {
-    return (dispatch) => { UsersFetcher.fetchElementKlasses()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  takeOwnership(params) {
-    return (dispatch) => { CollectionsFetcher.takeOwnership(params)
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // TODO #2...centralized error handling maybe ErrorActions?
-  fetchLockedCollectionRoots() {
-    return (dispatch) => { CollectionsFetcher.fetchLockedRoots()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchUnsharedCollectionRoots() {
-    return (dispatch) => { CollectionsFetcher.fetchUnsharedRoots()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchSharedCollectionRoots() {
-    return (dispatch) => { CollectionsFetcher.fetchSharedRoots()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchRemoteCollectionRoots() {
-    return (dispatch) => { CollectionsFetcher.fetchRemoteRoots()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchSyncInCollectionRoots() {
-    return (dispatch) => { CollectionsFetcher.fetchSyncRemoteRoots()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  createSharedCollections(params) {
-    return (dispatch) => { CollectionsFetcher.createSharedCollections(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  bulkUpdateUnsharedCollections(params) {
-    return (dispatch) => { CollectionsFetcher.bulkUpdateUnsharedCollections(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateSharedCollection(params) {
-    return (dispatch) => { CollectionsFetcher.updateSharedCollection(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  createUnsharedCollection(params) {
-    return (dispatch) => { CollectionsFetcher.createUnsharedCollection(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  createSync(params){
-    return (dispatch) => { CollectionsFetcher.createSync(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  editSync(params){
-    return (dispatch) => { CollectionsFetcher.editSync(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-  deleteSync(params){
-    return (dispatch) => { CollectionsFetcher.deleteSync(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-  rejectSync(params){
-    return (dispatch) => { CollectionsFetcher.deleteSync(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-  rejectShared(params){
-    return (dispatch) => { CollectionsFetcher.rejectShared(params)
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateCollectrionTree(visibleRootsIds) {
-    return visibleRootsIds
-  }
-
-  downloadReport(tab){
-    const {currentCollection} = UIStore.getState();
-
-    Utils.downloadFile({contents: "/api/v1/reports/excel?id=" + currentCollection.id +"&tab="+tab});
-  }
-
-  exportCollectionsToFile(params) {
-    return (dispatch) => { CollectionsFetcher.createExportJob(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  importCollectionsFromFile(params) {
-    return (dispatch) => { CollectionsFetcher.createImportJob(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-}
-
-export default alt.createActions(CollectionActions);
diff --git a/app/packs/src/components/actions/ComputeTaskActions.js b/app/packs/src/components/actions/ComputeTaskActions.js
deleted file mode 100644
index ec0ab76f5..000000000
--- a/app/packs/src/components/actions/ComputeTaskActions.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import alt from '../alt';
-import ComputeTaskFetcher from '../fetchers/ComputeTaskFetcher';
-
-class ComputeTaskActions {
-  fetchAll() {
-    return (dispatch) => {
-      ComputeTaskFetcher.fetchAll().then(res => (
-        dispatch(res)
-      )).catch((err) => {
-        console.log(err);
-      });
-    };
-  }
-
-  checkState(taskId) {
-    return (dispatch) => {
-      ComputeTaskFetcher.checkState(taskId).then(res => (
-        dispatch(res)
-      )).catch((err) => {
-        console.log(err);
-      });
-    };
-  }
-
-  revokeTask(taskId) {
-    return (dispatch) => {
-      ComputeTaskFetcher.revokeTask(taskId).then(res => (
-        dispatch(res)
-      )).catch((err) => {
-        console.log(err);
-      });
-    };
-  }
-
-  deleteTask(taskId) {
-    return (dispatch) => {
-      ComputeTaskFetcher.deleteTask(taskId).then(res => (
-        dispatch(res)
-      )).catch((err) => {
-        console.log(err);
-      });
-    };
-  }
-}
-
-export default alt.createActions(ComputeTaskActions);
diff --git a/app/packs/src/components/actions/DetailActions.js b/app/packs/src/components/actions/DetailActions.js
deleted file mode 100644
index 814a6351f..000000000
--- a/app/packs/src/components/actions/DetailActions.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import alt from 'src/stores/alt/alt'
-import _ from 'lodash'
-import MoleculesFetcher from 'src/fetchers/MoleculesFetcher'
-
-class DetailActions {
-  select(index) {
-    return index
-  }
-
-  close(deleteEl, force = false) {
-    return { deleteEl, force }
-  }
-
-  confirmDelete(confirm) {
-    return confirm
-  }
-
-  changeCurrentElement(oriEl, nextEl) {
-    return { oriEl, nextEl }
-  }
-
-  getMoleculeCas(sample) {
-    return (dispatch) => {
-      MoleculesFetcher.fetchCas(sample.molecule.inchikey)
-        .then((result) => {
-          sample.molecule = result
-          dispatch(sample)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  updateMoleculeNames(sample, newMolName = '') {
-    const inchikey = sample.molecule.inchikey;
-    if (!inchikey) { return null; }
-
-    return (dispatch) => {
-      MoleculesFetcher
-        .updateNames(inchikey, newMolName)
-        .then((result) => {
-          const mn = result.find(r => r.name === newMolName);
-          if (mn) sample.molecule_name = { label: mn.name, value: mn.id };
-          sample.molecule_names = result;
-          dispatch(sample);
-        })
-        .catch(errorMessage => console.log(errorMessage));
-    };
-  }
-
-  updateMoleculeCas(sample, newCas = '') {
-    const m = sample.molecule;
-    m.cas = [...m.cas, newCas];
-    sample.molecule = m;
-    return sample;
-  }
-}
-
-export default alt.createActions(DetailActions)
diff --git a/app/packs/src/components/actions/ElementActions.js b/app/packs/src/components/actions/ElementActions.js
deleted file mode 100644
index ae72af912..000000000
--- a/app/packs/src/components/actions/ElementActions.js
+++ /dev/null
@@ -1,828 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import alt from '../alt';
-
-import UIActions from './UIActions';
-import UserActions from './UserActions';
-
-import NotificationActions from './NotificationActions';
-import UIFetcher from '../fetchers/UIFetcher';
-import SamplesFetcher from '../fetchers/SamplesFetcher';
-import MoleculesFetcher from '../fetchers/MoleculesFetcher';
-import ReactionsFetcher from '../fetchers/ReactionsFetcher';
-import WellplatesFetcher from '../fetchers/WellplatesFetcher';
-import CollectionsFetcher from '../fetchers/CollectionsFetcher';
-import ScreensFetcher from '../fetchers/ScreensFetcher';
-import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
-import SearchFetcher from '../fetchers/SearchFetcher';
-import DeviceFetcher from '../fetchers/DeviceFetcher';
-import ContainerFetcher from '../fetchers/ContainerFetcher';
-import GenericElsFetcher from '../fetchers/GenericElsFetcher';
-import PrivateNoteFetcher from '../fetchers/PrivateNoteFetcher'
-
-import GenericEl from '../models/GenericEl';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import Wellplate from '../models/Wellplate';
-import Screen from '../models/Screen';
-import ResearchPlan from '../models/ResearchPlan';
-import Report from '../models/Report';
-import Format from '../models/Format';
-import Graph from '../models/Graph';
-import ComputeTask from '../models/ComputeTask';
-import DeviceControl from '../models/DeviceControl';
-import LiteratureMap from '../models/LiteratureMap';
-import Prediction from '../models/Prediction';
-import ReactionSvgFetcher from '../fetchers/ReactionSvgFetcher';
-
-import _ from 'lodash';
-
-const handleFetch = (dispatch, fetch) => {
-  return fetch()
-    .then((result) => {
-      dispatch(result)
-    })
-    .catch((errorMessage) => {
-      console.log(errorMessage)
-    })
-}
-
-class ElementActions {
-  // -- Devices --
-  fetchAllDevices() {
-    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.fetchAll())
-  }
-
-  fetchDeviceById(deviceId) {
-    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.fetchById(deviceId))
-  }
-
-  createDevice () {
-    return null
-  }
-
-  changeActiveAccordionDevice(key) {
-    return (dispatch) => dispatch(key)
-  }
-
-  changeSelectedDeviceId(device) {
-    return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.changeSelectedDevice(device))
-  }
-
-  setSelectedDeviceId(deviceId) {
-    return (dispatch) => dispatch(deviceId)
-  }
-
-  toggleDeviceType(device, type) {
-    return (dispatch) => dispatch({device, type})
-  }
-
-  saveDevice(device) {
-    if (device.isNew) {
-      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.create(device))
-    } else {
-      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.update(device))
-    }
-  }
-
-  deleteDevice(device) {
-    if (!device.isNew) {
-      DeviceFetcher.delete(device)
-    }
-    return (dispatch) => dispatch(device)
-  }
-
-  addSampleToDevice(sample, device, options) {
-    return (dispatch) => dispatch({sample, device, options})
-  }
-
-  addSampleWithAnalysisToDevice(sample, analysis, device) {
-    return (dispatch) => dispatch({sample, analysis, device})
-  }
-
-  removeSampleFromDevice(sample, device) {
-    return (dispatch) => dispatch({sample, device})
-  }
-
-  toggleTypeOfDeviceSample(device, sample, type) {
-    return (dispatch) => dispatch({device, sample, type})
-  }
-
-  changeDeviceProp(device, prop, value) {
-    return (dispatch) => dispatch({device, prop, value})
-  }
-
-  fetchDeviceAnalysisById(analysisId) {
-    return (dispatch) => {
-      DeviceFetcher.fetchAnalysisById(analysisId)
-      .then(analysis => {
-        DeviceFetcher.fetchById(analysis.deviceId)
-        .then(device => {
-          dispatch({analysis, device})
-        })
-      })
-    }
-  }
-
-  openDeviceAnalysis(device, type) {
-    return (dispatch) => dispatch({device, type})
-  }
-
-  saveDeviceAnalysis(analysis) {
-    if (analysis.isNew) {
-      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.createAnalysis(analysis))
-    } else {
-      return (dispatch) => handleFetch(dispatch, () => DeviceFetcher.updateAnalysis(analysis))
-    }
-  }
-
-  createDeviceAnalysis(deviceId, analysisType) {
-    return (dispatch) => {
-      DeviceFetcher.fetchById(deviceId)
-      .then((device) => {
-        dispatch({device, analysisType})
-      })
-    }
-  }
-
-  generateExperimentConfig(experiment) {
-    return (dispatch) =>
-      handleFetch(dispatch, () => DeviceFetcher.generateExperimentConfig(experiment))
-  }
-
-  duplicateAnalysisExperiment(analysis, experiment) {
-    return (dispatch) =>
-      DeviceFetcher.fetchById(analysis.deviceId)
-      .then((device) => {
-        dispatch({device, analysis, experiment})
-      })
-  }
-
-  changeAnalysisExperimentProp(analysis, experiment, prop, value) {
-    return (dispatch) => dispatch({analysis, experiment, prop, value})
-  }
-
-  deleteAnalysisExperiment(analysis, experiment) {
-    return (dispatch) =>
-      DeviceFetcher.fetchById(analysis.deviceId)
-      .then((device) => {
-        dispatch({device, analysis, experiment})
-      })
-  }
-
-  showDeviceControl() {
-    return DeviceControl.buildEmpty()
-  }
-
-  // -- Search --
-
-  fetchBasedOnSearchSelectionAndCollection(params) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-    return (dispatch) => {
-      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
-        .then((result) => {
-          dispatch(result);
-          NotificationActions.removeByUid(uid);
-        }).catch((errorMessage) => { console.log(errorMessage); });
-    };
-
-
-  }
-
-  // -- Generic --
-  fetchGenericElsByCollectionId(id, queryParams = {}, collectionIsSync = false, elementType) {
-    return (dispatch) => {
-      GenericElsFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
-        .then((result) => { dispatch({ result, type: elementType }); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  generateEmptyGenericEl(collectionId, type) {
-    return (dispatch) => {
-      GenericElsFetcher.fetchElementKlass(type)
-        .then((result) => { dispatch(GenericEl.buildEmpty(collectionId, result.klass)); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  fetchGenericElById(id, type) {
-    return (dispatch) => {
-      GenericElsFetcher.fetchById(id)
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  createGenericEl(params) {
-    return (dispatch) => {
-      GenericElsFetcher.create(params)
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  updateGenericEl(params) {
-    return (dispatch) => {
-      GenericElsFetcher.update(params)
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  fetchSamplesByCollectionId(id, queryParams = {}, collectionIsSync = false,
-      moleculeSort = false) {
-    return (dispatch) => {
-      SamplesFetcher.fetchByCollectionId(id, queryParams, collectionIsSync, moleculeSort)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchReactionsByCollectionId(id, queryParams={}, collectionIsSync = false) {
-    return (dispatch) => { ReactionsFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchWellplatesByCollectionId(id, queryParams={}, collectionIsSync = false) {
-    return (dispatch) => { WellplatesFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchScreensByCollectionId(id, queryParams={}, collectionIsSync = false) {
-    return (dispatch) => { ScreensFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-
-  fetchResearchPlansByCollectionId(id, queryParams={}, collectionIsSync = false) {
-    return (dispatch) => { ResearchPlansFetcher.fetchByCollectionId(id, queryParams, collectionIsSync)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // -- Samples --
-
-  fetchSampleById(id) {
-    return (dispatch) => { SamplesFetcher.fetchById(id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  createSample(params, closeView = false) {
-    return (dispatch) => { SamplesFetcher.create(params)
-      .then((result) => {
-        dispatch({ element: result, closeView })
-      });};
-  }
-
-  createSampleForReaction(sample, reaction, materialGroup) {
-    return (dispatch) => { SamplesFetcher.create(sample)
-      .then((newSample) => {
-        dispatch({newSample, reaction, materialGroup})
-      });};
-  }
-
-  handleSvgReactionChange(reaction) {
-    const materialsSvgPaths = {
-      starting_materials: reaction.starting_materials.map(material => material.svgPath),
-      reactants: reaction.reactants.map(material => material.svgPath),
-      products: reaction.products.map(material => [material.svgPath, material.equivalent])
-    };
-
-    const solvents = reaction.solvents.map((s) => {
-      const name = s.preferred_label;
-      return name;
-    }).filter(s => s);
-
-    let temperature = reaction.temperature_display;
-    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature)) {
-      temperature = `${temperature} ${reaction.temperature.valueUnit}`;
-    }
-
-    return () => { ReactionSvgFetcher.fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, reaction.duration, reaction.conditions)
-      .then((result) => {
-        reaction.reaction_svg_file = result.reaction_svg;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  editReactionSample(reactionID, sampleID) {
-    return (dispatch) => { SamplesFetcher.fetchById(sampleID)
-      .then((result) => {
-        dispatch({sample: result, reaction: reactionID });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateSampleForReaction(sample, reaction, closeView = true) {
-    return (dispatch) => { SamplesFetcher.update(sample)
-      .then((newSample) => {
-        reaction.updateMaterial(newSample);
-        reaction.changed = true;
-        dispatch({ reaction, sample: newSample, closeView })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateSample(params, closeView = false) {
-    return (dispatch) => { SamplesFetcher.update(params)
-      .then((result) => {
-        dispatch({ element: result, closeView })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  generateEmptySample(collection_id) {
-    return  Sample.buildEmpty(collection_id)
-  }
-
-  splitAsSubsamples(ui_state) {
-    return (dispatch) => { SamplesFetcher.splitAsSubsamples(ui_state)
-      .then((result) => {
-        dispatch(ui_state);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  copySampleFromClipboard(collection_id) {
-    return  collection_id;
-  }
-
-  addSampleToMaterialGroup(params) {
-    return  params;
-  }
-
-  showReactionMaterial(params) {
-    return (dispatch) => { SamplesFetcher.fetchById(params.sample.id)
-      .then((result) => {
-        params.sample = result
-        dispatch(params);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-    }
-  }
-
-  importSamplesFromFile(params) {
-    return (dispatch) => { SamplesFetcher.importSamplesFromFile(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  importReactionsFromChemScanner(params) {
-    return (dispatch) => {
-      ReactionsFetcher.importFromChemScanner(params).then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  importSamplesFromFileConfirm(params) {
-    return (dispatch) => { SamplesFetcher.importSamplesFromFileConfirm(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // -- Molecules --
-
-  fetchMoleculeByMolfile(molfile, svg_file = null) {
-    return (dispatch) => { MoleculesFetcher.fetchByMolfile(molfile, svg_file)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // -- Reactions --
-
-  fetchReactionById(id) {
-    return (dispatch) => { ReactionsFetcher.fetchById(id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  tryFetchReactionById(id) {
-    return (dispatch) => {
-      ReactionsFetcher.fetchById(id)
-                      .then((result) => {
-                        dispatch(result)
-                      }).catch((errorMessage) => {
-                        console.log(errorMessage)
-                      })
-    }
-  }
-
-  tryFetchWellplateById(id) {
-    return (dispatch) => {
-      WellplatesFetcher.fetchById(id)
-                      .then((result) => {
-                        dispatch(result)
-                      }).catch((errorMessage) => {
-                        console.log(errorMessage)
-                      })
-    }
-  }
-
-  tryFetchGenericElById(id) {
-    return (dispatch) => {
-      GenericElsFetcher.fetchById(id)
-                      .then((result) => {
-                        dispatch(result)
-                      }).catch((errorMessage) => {
-                        console.log(errorMessage)
-                      })
-    }
-  }
-  closeWarning() {
-    return null
-  }
-
-  createReaction(params) {
-    return (dispatch) => { ReactionsFetcher.create(params)
-      .then((result) => {
-        dispatch(result)
-      });};
-  }
-
-  updateReaction(params, closeView = false) {
-    return (dispatch) => { ReactionsFetcher.update(params)
-      .then((result) => {
-        dispatch({ element: result, closeView })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  generateEmptyReaction(collection_id) {
-    return  Reaction.buildEmpty(collection_id)
-  }
-
-  copyReactionFromId(id) {
-    return (dispatch) => { ReactionsFetcher.fetchById(id)
-    .then((result) => {
-      dispatch(result);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });};
-  }
-
-  copyReaction(reaction, colId) {
-    return (dispatch) => { ReactionsFetcher.fetchById(reaction.id)
-      .then((result) => {
-        dispatch({ reaction: result, colId: colId });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  copyElement(element, colId) {
-    return (
-      { element: element, colId: colId }
-    )
-  }
-
-  openReactionDetails(reaction) {
-    return  reaction;
-  }
-
-  // -- Wellplates --
-  splitAsSubwellplates(ui_state) {
-    return (dispatch) => {
-      WellplatesFetcher.splitAsSubwellplates(ui_state)
-      .then((result) => {
-        dispatch(ui_state);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  bulkCreateWellplatesFromSamples(params) {
-    let { collection_id, samples, wellplateCount } = params;
-
-    // wellplateCount correction
-    if(wellplateCount > Math.ceil(samples.length / 96)) {
-      wellplateCount = Math.ceil(samples.length / 96)
-    }
-
-    // build wellplate objects from samples
-    let wellplates = [];
-    _.range(wellplateCount ).forEach((i) => {
-      wellplates[i] = Wellplate.buildFromSamplesAndCollectionId(_.compact(samples.slice(96*i, 96*(i+1))), collection_id).serialize();
-    });
-
-    return (dispatch) => { WellplatesFetcher.bulkCreateWellplates({wellplates: wellplates})
-      .then(() => {
-        dispatch();
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  generateWellplateFromClipboard(collection_id) {
-    return  collection_id;
-  }
-
-  generateEmptyWellplate(collection_id) {
-    return  Wellplate.buildEmpty(collection_id);
-  }
-
-  createWellplate(wellplate) {
-    return (dispatch) => { WellplatesFetcher.create(wellplate)
-      .then(result => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  editWellplateSample(wellplateID, sampleID) {
-    return (dispatch) => { SamplesFetcher.fetchById(sampleID)
-      .then((result) => {
-        dispatch({sample: result, wellplate: wellplateID });
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateWellplate(wellplate) {
-    return (dispatch) => { WellplatesFetcher.update(wellplate)
-      .then(result => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateSampleForWellplate(sample, wellplate) {
-    return (dispatch) => { SamplesFetcher.update(sample)
-      .then((newSample) => {
-        dispatch(wellplate)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchWellplateById(id) {
-    return (dispatch) => { WellplatesFetcher.fetchById(id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-
-  // -- Screens --
-
-  generateScreenFromClipboard(collection_id) {
-    return  collection_id;
-  }
-
-
-  fetchScreenById(id) {
-    return (dispatch) => { ScreensFetcher.fetchById(id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  generateEmptyScreen(collection_id) {
-    return  Screen.buildEmpty(collection_id);
-  }
-
-  createScreen(params) {
-    return (dispatch) => { ScreensFetcher.create(params)
-      .then(result => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateScreen(params) {
-    return (dispatch) => { ScreensFetcher.update(params)
-      .then(result => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // -- ResearchPlans --
-
-  fetchResearchPlanById(id) {
-    return (dispatch) => { ResearchPlansFetcher.fetchById(id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  updateResearchPlan(params) {
-    return (dispatch) => { ResearchPlansFetcher.update(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  generateEmptyResearchPlan(collection_id) {
-    return ResearchPlan.buildEmpty(collection_id);
-  }
-
-  createResearchPlan(params) {
-    return (dispatch) => { ResearchPlansFetcher.create(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  // -- Report --
-  showReportContainer() {
-    return  Report.buildEmpty()
-  }
-
-  showFormatContainer() {
-    return Format.buildEmpty();
-  }
-
-  showComputedPropsGraph() {
-    return Graph.buildEmptyScatter();
-  }
-
-  showComputedPropsTasks() {
-    return ComputeTask.buildEmpty();
-  }
-
-  showLiteratureDetail() {
-    return LiteratureMap.buildEmpty();
-  }
-
-  // -- Prediction --
-  showPredictionContainer() {
-    return Prediction.buildEmpty();
-  }
-
-  // -- General --
-
-  refreshElements(type) {
-    return  type
-  }
-
-  deleteElements(options) {
-    return  (dispatch)=> {
-    dispatch(options);
-    UIActions.uncheckWholeSelection();
-    UserActions.fetchCurrentUser();}
-  }
-
-  removeElements() {
-    return  ;
-  }
-
-  // Current Element
-  setCurrentElement(newCurrentElement) {
-    return newCurrentElement;
-  }
-
-  deselectCurrentElement() {
-    return null;
-  }
-
-  // - ...
-  deleteElementsByUIState(params) {
-    return (dispatch) => {
-      UIFetcher.fetchByUIState(params, 'DELETE')
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  updateElementsCollection(params) {
-    return (dispatch) => {
-      CollectionsFetcher.updateElementsCollection(params)
-        .then(() => { dispatch(); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  assignElementsCollection(params) {
-    return (dispatch) => {
-      CollectionsFetcher.assignElementsCollection(params)
-        .then(() => { dispatch(); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  removeElementsCollection(params) {
-    return (dispatch) => {
-      CollectionsFetcher.removeElementsCollection(params)
-        .then(() => { dispatch(); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  changeSorting(sort) {
-    return sort;
-  }
-
-  updateContainerContent(params) {
-    return (dispatch) => {
-      ContainerFetcher.updateContainerContent(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  computePropsFromSmiles(sampleId) {
-    return (dispatch) => {
-      MoleculesFetcher.computePropsFromSmiles(sampleId)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  refreshComputedProp(cprop) {
-    return cprop;
-  }
-
-  // -- Private Note --
-  createPrivateNote(params) {
-    return (dispatch) => {
-      PrivateNoteFetcher.create(params).then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-    };
-  }
-
-  updatePrivateNote(note) {
-    return (dispatch) => {
-      PrivateNoteFetcher.update(note).then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-    };
-  }
-}
-
-export default alt.createActions(ElementActions);
diff --git a/app/packs/src/components/actions/EmbargoActions.js b/app/packs/src/components/actions/EmbargoActions.js
deleted file mode 100644
index f1b960db4..000000000
--- a/app/packs/src/components/actions/EmbargoActions.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import alt from '../alt';
-import EmbargoFetcher from '../fetchers/EmbargoFetcher';
-
-class EmbargoActions {
-
-  displayEmbargo(id) {
-    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
-      .then((result) => {
-        dispatch({colData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-
-  getEmbargoElements(id) {
-    return (dispatch) => {
-      EmbargoFetcher.fetchEmbargoElements(id)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getEmbargoElement(cid, el) {
-    return (dispatch) => {
-      EmbargoFetcher.fetchEmbargoElement(cid, el)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  moveEmbargo(id, newEmbargo, element) {
-    return (dispatch) => {
-      EmbargoFetcher.moveEmbargo(id, newEmbargo, element)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  assignEmbargo(newEmbargo, element) {
-    return (dispatch) => {
-      EmbargoFetcher.assignEmbargo(newEmbargo, element)
-        .then((result) => {
-          dispatch(result)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  fetchEmbargoBundle() {
-    return (dispatch) => {
-      EmbargoFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-
-  displayReviewEmbargo(type, id) {
-    return (dispatch) => {
-      EmbargoFetcher.repoFetchEmbargoElement(type, id)
-      .then((result) => {
-        dispatch({ id, element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  releaseEmbargo(id) {
-    return (dispatch) => {
-      EmbargoFetcher.releaseEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  deleteEmbargo(id) {
-    return (dispatch) => {
-      EmbargoFetcher.deleteEmbargo(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-
-  generateEmbargoAccount(id) {
-    return (dispatch) => {
-      EmbargoFetcher.generateEmbargoAccount(id)
-        .then((result) => {
-          dispatch({ id, result })
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  getEmbargoBundle() {
-    return (dispatch) => {
-      EmbargoFetcher.fetchEmbargoCollections()
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      });
-    }
-  }
-}
-
-export default alt.createActions(EmbargoActions);
diff --git a/app/packs/src/components/actions/InboxActions.js b/app/packs/src/components/actions/InboxActions.js
deleted file mode 100644
index dadd1b121..000000000
--- a/app/packs/src/components/actions/InboxActions.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import alt from '../alt';
-import InboxFetcher from '../fetchers/InboxFetcher';
-import AttachmentFetcher from '../fetchers/AttachmentFetcher';
-import ContainerFetcher from '../fetchers/ContainerFetcher';
-
-class InboxActions {
-  deleteContainerLinkUnselected(params) {
-    return (dispatch) => { ContainerFetcher.deleteContainerLinkUnselected(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      }); };
-  }
-
-  toggleInboxModal() {
-    return null
-  }
-
-  fetchInbox() {
-    return (dispatch) => {
-      InboxFetcher.fetchInbox(false)
-      .then((result) => {
-        dispatch(result.inbox);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchInboxCount() {
-    return (dispatch) => {
-      InboxFetcher.fetchInbox(true)
-      .then((result) => {
-        dispatch(result.inbox);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  removeAttachmentFromList(attachment){
-    return attachment;
-  }
-
-  removeUnlinkedAttachmentFromList(attachment){
-    return attachment;
-  }
-
-  removeDatasetFromList(dataset){
-    return dataset;
-  }
-
-  deleteAttachment(params) {
-    return (dispatch) => { AttachmentFetcher.deleteAttachment(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  deleteContainerLink(params) {
-    return (dispatch) => { AttachmentFetcher.deleteContainerLink(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  deleteContainer(params) {
-    return (dispatch) => { ContainerFetcher.deleteContainer(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  backToInbox(attachment){
-    return attachment
-  }
-
-}
-
-export default alt.createActions(InboxActions);
diff --git a/app/packs/src/components/actions/KeyboardActions.js b/app/packs/src/components/actions/KeyboardActions.js
deleted file mode 100644
index 856d6e27d..000000000
--- a/app/packs/src/components/actions/KeyboardActions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import alt from 'src/stores/alt/alt'
-
-class KeyboardActions {
-  documentKeyDown(keyCode) {
-    return keyCode
-  }
-
-  contextChange(context) {
-    return context
-  }
-}
-
-export default alt.createActions(KeyboardActions)
diff --git a/app/packs/src/components/actions/LoadingActions.js b/app/packs/src/components/actions/LoadingActions.js
deleted file mode 100644
index cf7d6e3bf..000000000
--- a/app/packs/src/components/actions/LoadingActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import alt from '../alt';
-
-class LoadingActions {
-  start() {
-    return null;
-  }
-
-  stop() {
-    return null;
-  }
-
-  startLoadingWithProgress(filename) {
-    return filename;
-  }
-
-  stopLoadingWithProgress(filename) {
-    return filename;
-  }
-
-  updateLoadingProgress(filename, progress) {
-    return { filename: filename, progress: progress };
-  }
-}
-
-export default alt.createActions(LoadingActions);
diff --git a/app/packs/src/components/actions/NmrSimActions.js b/app/packs/src/components/actions/NmrSimActions.js
deleted file mode 100644
index 2858eb58d..000000000
--- a/app/packs/src/components/actions/NmrSimActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import alt from '../alt';
-import NmrSimFetcher from '../fetchers/NmrSimFetcher';
-
-class NmrSimActions {
-  updateNmrdb(type, needToFetch, id) {
-    if (needToFetch) {
-      return (dispatch) => {
-        NmrSimFetcher.fetchNmrdbById(id)
-        .then((result) => {
-          dispatch({ type, spectrum: result });
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-      };
-    }
-    const spectrum = false;
-    return { type, spectrum };
-  }
-
-  resetNMR() {
-    return null;
-  }
-}
-
-export default alt.createActions(NmrSimActions);
diff --git a/app/packs/src/components/actions/NotificationActions.js b/app/packs/src/components/actions/NotificationActions.js
deleted file mode 100644
index 392bf12fc..000000000
--- a/app/packs/src/components/actions/NotificationActions.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import alt from 'src/stores/alt/alt';
-
-class NotificationActions {
-  add(notification) {
-    return notification;
-  }
-
-  remove(notification) {
-    return notification;
-  }
-
-  removeByUid(uid) {
-    return uid;
-  }
-
-  setComponentReference(input) {
-    return input;
-  }
-
-  uploadErrorNotify(message) {
-    return message;
-  }
-
-  notifyExImportStatus(title, status) {
-    const params = {
-      title: title,
-      message: "The task has been submitted: this might take a while but you will be notified as soon as it is completed.",
-      level: "info",
-      dismissible: true,
-      uid: "export_collection",
-      position: "tr",
-      autoDismiss: 5
-    };
-
-    switch(status) {
-      case 204:
-        break;
-      case 401:
-        params.message = `Unauthorized: you do not have the permission to ${type} this collection`;
-        params.level = 'error';
-        break;
-      default:
-        params.message = `An issue occured with your ${type} (status ${status}); please contact the administrators of the site if the problem persists.`;
-        params.level = 'error';
-    }
-    return this.add(params);
-  }
-}
-
-export default alt.createActions(NotificationActions);
diff --git a/app/packs/src/components/actions/PermissionActions.js b/app/packs/src/components/actions/PermissionActions.js
deleted file mode 100644
index 54b6a4636..000000000
--- a/app/packs/src/components/actions/PermissionActions.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import alt from '../alt';
-import PermissionsFetcher from '../fetchers/PermissionsFetcher';
-
-class PermissionActions {
-  fetchPermissionStatus(params) {
-    return (dispatch) => { PermissionsFetcher.fetchPermissionStatus(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-}
-
-export default alt.createActions(PermissionActions);
diff --git a/app/packs/src/components/actions/PredictionActions.js b/app/packs/src/components/actions/PredictionActions.js
deleted file mode 100644
index f0ad3ac97..000000000
--- a/app/packs/src/components/actions/PredictionActions.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import _ from 'lodash';
-
-import alt from '../alt';
-import UIFetcher from '../fetchers/UIFetcher';
-import PredictionsFetcher from '../fetchers/PredictionsFetcher';
-
-class PredictionActions {
-  infer(targets, template) { // eslint-disable-line class-methods-use-this
-    const smis = targets.map(t => t.molecule_cano_smiles);
-    const target = { smis };
-
-    return (dispatch) => {
-      PredictionsFetcher
-        .fetchInfer(target, template)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  updateActiveKey(key) { // eslint-disable-line class-methods-use-this
-    return key;
-  }
-
-  updateTemplate(template) { // eslint-disable-line class-methods-use-this
-    return template;
-  }
-
-  updateUI(combState) { // eslint-disable-line class-methods-use-this
-    const { uiState, predictionState } = combState;
-    const { sample, currentCollection } = uiState;
-    const { inputEls, defaultEls } = predictionState;
-    const sampleMemoryIds = inputEls ? inputEls.map(e => e.id) : [];
-    const sampleDefaultIds = defaultEls ? defaultEls.map(e => e.id) : [];
-    const sampleCheckedIds = sample.checkedIds.toArray();
-    const dfSIds = _.difference(sampleCheckedIds, sampleMemoryIds)
-      .filter(id => !sampleDefaultIds.includes(id));
-
-    const elementAdded = dfSIds.length > 0 || sample.checkedAll;
-    const elementSubs = _.difference(sampleMemoryIds, sampleCheckedIds).length > 0;
-    const selectedTags = { sampleIds: [...sampleMemoryIds], reactionIds: [] };
-
-    if (elementAdded) {
-      return (dispatch) => {
-        UIFetcher.loadReport(
-          {
-            sample, reaction: {}, currentCollection, selectedTags,
-          },
-          'lists',
-        ).then((rsp) => {
-          const newSpls = rsp.samples.filter(x => !x.in_browser_memory);
-          const allSpls = [...newSpls, ...inputEls, ...defaultEls];
-          const result = { samples: allSpls };
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-      };
-    } else if (elementSubs) {
-      return (dispatch) => {
-        const inpSpls = inputEls.filter(e => sampleCheckedIds.indexOf(e.id) >= 0);
-        const allSpls = [...defaultEls, ...inpSpls];
-        const result = { samples: allSpls };
-        dispatch(result);
-      };
-    }
-    return (dispatch) => {
-      dispatch(false);
-    };
-  }
-
-  remove(el) { // eslint-disable-line class-methods-use-this
-    return el;
-  }
-
-  reset() { // eslint-disable-line class-methods-use-this
-    return null;
-  }
-}
-
-export default alt.createActions(PredictionActions);
diff --git a/app/packs/src/components/actions/PublicActions.js b/app/packs/src/components/actions/PublicActions.js
deleted file mode 100644
index 85b933111..000000000
--- a/app/packs/src/components/actions/PublicActions.js
+++ /dev/null
@@ -1,355 +0,0 @@
-import alt from '../alt';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import NotificationActions from './NotificationActions';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import EmbargoFetcher from '../fetchers/EmbargoFetcher';
-import SearchFetcher from '../fetchers/SearchFetcher';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
-
-class PublicActions {
-  refreshPubElements(type) {
-    return type;
-  }
-
-  close(deleteEl) {
-    return { deleteEl }
-  }
-
-  displayCollection(id) {
-    return (dispatch) => { EmbargoFetcher.fetchEmbargo(id)
-      .then((result) => {
-        dispatch({colData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getMolecules(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicMolecules(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getReactions(pageParams={}) {
-    return (dispatch) => { PublicFetcher.fetchPublicReactions(pageParams)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchMolecules(pageParams={}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => { PublicFetcher.searchPublicMolecules(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  getSearchReactions(pageParams = {}) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function (notificationObject) { uid = notificationObject.uid; }
-    });
-
-    return (dispatch) => {
-      PublicFetcher.searchPublicReactions(pageParams)
-      .then((result) => {
-        NotificationActions.removeByUid(uid);
-        dispatch(result)
-      }).catch((errorMessage) => {
-        NotificationActions.removeByUid(uid);
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublished() {
-    return (dispatch) => {
-      PublicFetcher.fetchLastPublished()
-      .then((result) => {
-        dispatch(result.last_published)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  lastPublishedSample(){
-    return (dispatch) => { PublicFetcher.fetchLastPublishedSample()
-      .then((result) => {
-        dispatch(result.sample)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  openRepositoryPage(page) {
-    if (page) {
-      return page
-    } else {
-      return ""
-    }
-  }
-
-  displayDataset(id) {
-    return (dispatch) => { PublicFetcher.fetchDataset(id)
-      .then((result) => {
-        dispatch({dataset: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayMolecule(id, anchor = '', advFlag = false, advType = '', advVal = '', listType = RepoNavListTypes.SAMPLE) {
-    return (dispatch) => { PublicFetcher.fetchMolecule(id, advFlag, advType, advVal)
-      .then((result) => {
-        dispatch({moleculeData: result, id: id, anchor: anchor, listType})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReaction(id) {
-    return (dispatch) => { PublicFetcher.fetchReaction(id)
-      .then((result) => {
-        dispatch({reactionData: result, id: id})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  articles() {
-    return (dispatch) => {
-      fetch('/newsroom/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({data: json});
-      }).catch((errorMessage) => {
-        dispatch({ data: [] });
-      });
-    };
-  }
-
-  editArticle(key) {
-    if (key === 'new') {
-      return (dispatch) => {
-          dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  displayArticle(key) {
-    return (dispatch) => {
-      fetch(`/newsroom/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-      .then(response => response.json())
-      .then(json => {
-        dispatch({key: key, data: json});
-      })
-    };
-  }
-
-  howtos() {
-    return (dispatch) => {
-      fetch('/howto/index.json',
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ data: json });
-        }).catch((errorMessage) => {
-          // console.log(errorMessage);
-          dispatch({ data: [] });
-        });
-    };
-  }
-
-  editHowTo(key) {
-    if (key === 'ein') {
-      return (dispatch) => {
-        dispatch({ key: key, data: {} });
-      };
-    }
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-          }
-        }
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  displayHowTo(key) {
-    return (dispatch) => {
-      fetch(`/howto/${key}`,
-        {
-          cache: 'no-store',
-          headers: {
-            'cache-control': 'no-cache'
-        }}
-      )
-        .then(response => response.json())
-        .then(json => {
-          dispatch({ key: key, data: json });
-        })
-    };
-  }
-
-  selectPublicCollection() {
-    return (dispatch) => {
-      PublicFetcher.selectPublicCollection()
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); })
-    }
-  }
-
-  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
-    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  publishedStatics() {
-    return (dispatch) => {
-      PublicFetcher.publishedStatics()
-        .then((result) => {
-          dispatch(result.published_statics)
-        }).catch((errorMessage) => {
-          console.log(errorMessage)
-        })
-    }
-  }
-
-  handleReviewModal(show) {
-    return show;
-  }
-
-
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
-  fetchBasedOnSearchSelectionAndCollection(params) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-    return (dispatch) => {
-      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
-        .then((result) => {
-          dispatch(result);
-          NotificationActions.removeByUid(uid);
-        }).catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
-  fetchBasedOnSearchSelectionAndCollection(params) {
-    let uid;
-    NotificationActions.add({
-      title: "Searching ...",
-      level: "info",
-      position: "tc",
-      onAdd: function(notificationObject) { uid = notificationObject.uid; }
-    });
-    return (dispatch) => {
-      SearchFetcher.fetchBasedOnSearchSelectionAndCollection(params)
-        .then((result) => {
-          dispatch(result);
-          NotificationActions.removeByUid(uid);
-        }).catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-}
-
-export default alt.createActions(PublicActions)
diff --git a/app/packs/src/components/actions/QcActions.js b/app/packs/src/components/actions/QcActions.js
deleted file mode 100644
index 3177fe591..000000000
--- a/app/packs/src/components/actions/QcActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
-
-class QcActions {
-  setLoading() {
-    return null;
-  }
-
-  loadInfers({ sample }) {
-    const sId = sample.id;
-    const atts = sample.attachments();
-    const ids = atts.map(att => (
-      att.aasm_state === 'json' && att.filename.includes('.infer.json')
-        ? att.id : null
-    )).filter(r => r != null);
-
-    return (dispatch) => {
-      AttachmentFetcher.fetchFiles(ids)
-        .then(result => dispatch({ result, sId }))
-        .catch(err => console.log(err)); // eslint-disable-line
-    };
-  }
-}
-
-export default alt.createActions(QcActions);
diff --git a/app/packs/src/components/actions/ReportActions.js b/app/packs/src/components/actions/ReportActions.js
deleted file mode 100644
index 91f4b22db..000000000
--- a/app/packs/src/components/actions/ReportActions.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import _ from 'lodash';
-import alt from '../alt';
-import AttachmentFetcher from '../fetchers/AttachmentFetcher';
-import ReportsFetcher from '../fetchers/ReportsFetcher';
-import ReportTemplateFetcher from '../fetchers/ReportTemplateFetcher';
-import UIFetcher from '../fetchers/UIFetcher';
-import { GetTypeIds, LoadPreviewIds } from '../utils/ReportHelper';
-
-class ReportActions {
-  updateImgFormat = value => value
-  updateTemplate = value => value
-
-  updateSplSettings = target => target
-  toggleSplSettingsCheckAll = () => null
-
-  updateRxnSettings = target => target
-  toggleRxnSettingsCheckAll = () => null
-
-  updateSiRxnSettings = target => target
-  toggleSiRxnSettingsCheckAll = () => null
-
-  updateConfigs = target => target
-  toggleConfigsCheckAll = () => null
-
-  generateReport = report => (dispatch) => {
-    ReportsFetcher.create(report)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  updateDefaultTags = dTags => dTags
-  move = ({ sourceTag, targetTag }) => ({ sourceTag, targetTag })
-
-  getArchives = () => (dispatch) => {
-    ReportsFetcher.fetchArchives()
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  updateProcessQueue = oriQueue => (dispatch) => {
-    ReportsFetcher.fetchDownloadable(oriQueue)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  updateFileName = e => e.target.value
-  updateFileDescription = e => e.target.value
-  updateActiveKey = key => key
-  downloadReport = (id, template) => ({ id, template })
-
-  clone = (archive) => {
-    const sampleIds = GetTypeIds(archive.objects, 'sample');
-    const reactionIds = GetTypeIds(archive.objects, 'reaction');
-    const uiState = {
-      sample: { checkedIds: sampleIds },
-      reaction: { checkedIds: reactionIds },
-    };
-    return (dispatch) => {
-      UIFetcher.loadReport(uiState, 'lists')
-        .then((result) => {
-          dispatch({ objs: result, archive, defaultObjTags: { sampleIds, reactionIds } });
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  delete = archive => (dispatch) => {
-    ReportsFetcher.deleteArchive(archive.id)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  remove = target => target
-  reset = () => null
-  updMSVal = (moleculeId, value) => ({ moleculeId, value })
-
-  updateThumbNails = attIds => (dispatch) => {
-    AttachmentFetcher.fetchThumbnails(attIds)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  fetchTemplates = () => (dispatch) => {
-    ReportTemplateFetcher.fetchTemplates()
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  updateCheckedTags = ({ uiState, reportState }) => {
-    const { sample, reaction, currentCollection } = uiState;
-    const { selectedObjTags, defaultObjTags } = reportState;
-    const sampleCheckedIds = sample.checkedIds.toArray();
-    const reactionCheckedIds = reaction.checkedIds.toArray();
-    const { sampleIds, reactionIds } = selectedObjTags;
-    const dfSIds = _.difference(sampleCheckedIds, sampleIds)
-      .filter(id => !defaultObjTags.sampleIds.includes(id));
-    const dfRIds = _.difference(reactionCheckedIds, reactionIds)
-      .filter(id => !defaultObjTags.reactionIds.includes(id));
-
-    const elementAdded = dfSIds.length > 0 || dfRIds.length > 0
-      || sample.checkedAll || reaction.checkedAll;
-
-    const elementSubs = _.difference(sampleIds, sampleCheckedIds).length > 0
-      || _.difference(reactionIds, reactionCheckedIds).length > 0;
-
-    if (elementAdded) {
-      return (dispatch) => {
-        UIFetcher.loadReport(
-          {
-            sample, reaction, currentCollection, selectedTags: selectedObjTags,
-          },
-          'lists',
-        ).then((result) => {
-          const newTags = {
-            sampleIds: result.samples.map(e => e.id),
-            reactionIds: result.reactions.map(e => e.id)
-          };
-          dispatch({ newTags, newObjs: result });
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-      };
-    } else if (elementSubs) {
-      return (dispatch) => {
-        const newTags = {
-          sampleIds: sampleCheckedIds,
-          reactionIds: reactionCheckedIds
-        };
-        const result = { samples: [], reactions: [] };
-        dispatch({ newTags, newObjs: result });
-      };
-    }
-    return (dispatch) => {
-      dispatch({ newTags: false, newObjs: false });
-    };
-  }
-
-  loadRreview = ({ reportState }) => {
-    const state = LoadPreviewIds(reportState);
-    return (dispatch) => {
-      UIFetcher.loadReport(state, 'elements')
-        .then((result) => {
-          dispatch({ objs: result });
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-}
-
-
-export default alt.createActions(ReportActions);
diff --git a/app/packs/src/components/actions/RepositoryActions.js b/app/packs/src/components/actions/RepositoryActions.js
deleted file mode 100644
index 80dd4d530..000000000
--- a/app/packs/src/components/actions/RepositoryActions.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import alt from '../alt';
-
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-
-class RepositoryActions {
-  publishSample(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  reviewPublish(element) {
-    return (dispatch) => { RepositoryFetcher.reviewPublish(element)
-      .then((result) => {
-        dispatch({ element: result })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishSampleReserveDois(params, closeView = false) {
-    return (dispatch) => { RepositoryFetcher.publishSample(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  publishReaction(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params)
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  publishReactionReserveDois(params, closeView = false) {
-    return (dispatch) => {
-      RepositoryFetcher.publishReaction(params, 'dois')
-      .then((result) => {
-        if (result != null) {
-          dispatch({ element: result, closeView })
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-}
-
-export default alt.createActions(RepositoryActions);
diff --git a/app/packs/src/components/actions/ReviewActions.js b/app/packs/src/components/actions/ReviewActions.js
deleted file mode 100644
index 27fa68c62..000000000
--- a/app/packs/src/components/actions/ReviewActions.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import alt from '../alt';
-import ReviewFetcher from '../fetchers/ReviewFetcher';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-class ReviewActions {
-  handleReviewModal(show, action) {
-    return { show, action };
-  }
-
-  updateReview(review) {
-    return review;
-  }
-
-  fetchSample(id) {
-    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(`SampleDetailsRepoComment_${errorMessage}`);
-        LoadingActions.stop();
-      });
-    }
-  }
-
-  displayReviewReaction(id) {
-    return (dispatch) => { RepositoryFetcher.fetchReaction(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  displayReviewSample(id) {
-    return (dispatch) => { RepositoryFetcher.fetchSample(id, false)
-      .then((result) => {
-        dispatch({id, element: result})
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-  reviewPublish(id, type, comment, action, checklist, reviewComments) {
-    return (dispatch) => { RepositoryFetcher.repoReviewPublish(id, type, comment, action, checklist, reviewComments)
-      .then((result) => {
-        dispatch({ id :id, element: result[`${type}`], type: type, review: result.review, comment: comment, action: action, review_info: result.review_info })
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-
-  getElements(type='All', state='pending', searchType='All', searchValue='', page=1, perPage=10) {
-    return (dispatch) => { RepositoryFetcher.fetchReviewElements(type, state, searchType, searchValue, page, perPage)
-      .then((result) => {
-        dispatch(result)
-      }).catch((errorMessage) => {
-        console.log(errorMessage)
-      })
-    }
-  }
-
-
-  updateComment(id, type, comments) {
-    return (dispatch) => {
-      RepositoryFetcher.updateComment(id, type, comments)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
-}
-export default alt.createActions(ReviewActions);
diff --git a/app/packs/src/components/actions/SpectraActions.js b/app/packs/src/components/actions/SpectraActions.js
deleted file mode 100644
index 27fc00abc..000000000
--- a/app/packs/src/components/actions/SpectraActions.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import base64 from 'base-64';
-
-import alt from '../alt';
-import AttachmentFetcher from '../fetchers/AttachmentFetcher';
-import ElementActions from '../actions/ElementActions';
-
-class SpectraActions {
-  ToggleModal() {
-    return null;
-  }
-
-  LoadSpectra(spcInfos) {
-    const idxs = spcInfos && spcInfos.map(si => si.idx);
-    if (idxs.length === 0) {
-      return null;
-    }
-
-    return (dispatch) => {
-      AttachmentFetcher.fetchFiles(idxs)
-        .then((fetchedFiles) => {
-          dispatch({ fetchedFiles, spcInfos });
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-
-  Regenerate(jcampIds, cb) {
-    return (dispatch) => {
-      AttachmentFetcher.regenerateSpectrum(jcampIds)
-        .then(() => {
-          dispatch();
-          cb();
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-
-  SaveToFile(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict, cb, keepPred = false, waveLengthStr, cyclicvolta, curveIdx = 0, simulatenmr = false) {
-    return (dispatch) => {
-      AttachmentFetcher.saveSpectrum(spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr)
-        .then((fetchedFiles) => {
-          dispatch({ fetchedFiles, spcInfo });
-          cb();
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-
-  WriteStart(payload) {
-    return payload;
-  }
-
-  WriteStop() {
-    return null;
-  }
-
-  InferRunning() {
-    return null;
-  }
-
-  InferSpectrum(spcInfo, peaksStr, shift, scan, thres, integration, multiplicity, predict,
-    targetPeaks, layout,
-    cb, keepPred = false,
-  ) {
-    return (dispatch) => {
-      AttachmentFetcher.inferSpectrum(
-        spcInfo.idx, peaksStr, shift, scan, thres, integration, multiplicity,
-        predict, targetPeaks, layout, keepPred
-      ).then((fetchedFiles) => {
-        dispatch({ fetchedFiles, spcInfo });
-        cb();
-      }).catch((errorMessage) => {
-        console.log(errorMessage); // eslint-disable-line
-      });
-    };
-  }
-
-  SelectIdx(spcIdx, arrSpcIdx = []) {
-    return { spcIdx, arrSpcIdx };
-  }
-
-  AddOthers(payload) {
-    const jcamps = payload.jcamps || [];
-    const jcamp = jcamps[0];
-
-    return (dispatch) => {
-      AttachmentFetcher.fetchJcamp({ file: jcamp })
-        .then((rsp) => {
-          dispatch(rsp);
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-
-  RegenerateEdited(jcampIds, molfile, cb) {
-    return (dispatch) => {
-      AttachmentFetcher.regenerateEditedSpectrum(jcampIds, molfile)
-        .then(() => {
-          dispatch();
-          cb();
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-
-  ToggleModalNMRDisplayer() {
-    return null;
-  }
-
-  LoadSpectraForNMRDisplayer(spcInfos) {
-    const idxs = spcInfos && spcInfos.map(si => si.idx);
-    if (idxs.length === 0) {
-      return null;
-    }
-
-    return (dispatch) => {
-      AttachmentFetcher.fetchFiles(idxs)
-        .then((fetchedFiles) => {
-          dispatch({ fetchedFiles, spcInfos });
-        }).catch((errorMessage) => {
-          console.log(errorMessage); // eslint-disable-line
-        });
-    };
-  }
-}
-
-export default alt.createActions(SpectraActions);
diff --git a/app/packs/src/components/actions/SuggestionActions.js b/app/packs/src/components/actions/SuggestionActions.js
deleted file mode 100644
index 58de3b85e..000000000
--- a/app/packs/src/components/actions/SuggestionActions.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import alt from '../alt';
-import SuggestionsFetcher from '../fetchers/SuggestionsFetcher';
-
-class SuggestionActions {
-  fetchSuggestions(endpoint, query) {
-    return (dispatch) => {  SuggestionsFetcher.fetchSuggestions(endpoint, query)
-      .then((suggestions) => {
-        dispatch(suggestions);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-}
-
-export default alt.createActions(SuggestionActions);
diff --git a/app/packs/src/components/actions/TextTemplateActions.js b/app/packs/src/components/actions/TextTemplateActions.js
deleted file mode 100644
index a5ca5fd65..000000000
--- a/app/packs/src/components/actions/TextTemplateActions.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import alt from '../alt';
-import TextTemplatesFetcher from '../fetchers/TextTemplatesFetcher';
-
-class TextTemplateActions {
-  fetchTextTemplates(elementName) {
-    return (dispatch) => {
-      TextTemplatesFetcher.fetchTextTemplates(elementName)
-        .then(result => dispatch(result))
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  fetchPredefinedTemplateNames() {
-    return (dispatch) => {
-      TextTemplatesFetcher.fetchPredefinedTemplateNames()
-        .then(result => dispatch(result))
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  fetchPredefinedTemplateByNames(names) {
-    return (dispatch) => {
-      TextTemplatesFetcher.fetchPredefinedTemplateByNames(names)
-        .then(result => dispatch(result))
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  updateTextTemplates(elName, templates) {
-    return (dispatch) => {
-      TextTemplatesFetcher.updateTextTemplates(elName, templates)
-        .then((result) => {
-          if (result) {
-            dispatch({ [elName]: templates });
-          }
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-}
-
-export default alt.createActions(TextTemplateActions);
diff --git a/app/packs/src/components/actions/UIActions.js b/app/packs/src/components/actions/UIActions.js
deleted file mode 100644
index 26599cadd..000000000
--- a/app/packs/src/components/actions/UIActions.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import UIFetcher from 'src/fetchers/UIFetcher';
-
-// An element object has a type and an id, e.g., {type: 'sample', id: 1}
-class UIActions {
-  initialize() {
-    return (dispatch) => {
-      UIFetcher.initialize()
-        .then(json => dispatch(json))
-        .catch(err => console.log(err)); // eslint-disable-line
-    };
-  }
-
-  showCollectionManagement() {
-    return null;
-  }
-
-  toggleCollectionManagement() {
-    return null;
-  }
-
-  showElements() {
-    return null;
-  }
-
-  showDeviceManagement() {
-    return null
-  }
-
-  closeDeviceManagement() {
-    return null
-  }
-
-  selectTab(params) {
-    return params;
-  }
-
-  selectActiveAnalysis(index) {
-    return index;
-  }
-
-  toggleAdvancedSearch(show) {
-    return show
-  }
-
-  selectCollection(collection) {
-    return collection
-  }
-
-  selectSyncCollection(syncCollection) {
-    return syncCollection
-  }
-
-  checkAllElements(params) {
-    return params;
-  }
-
-  toggleShowPreviews(show) {
-    return show;
-  }
-
-  checkElement(params) {
-    return params;
-  }
-
-  uncheckAllElements(params) {
-    return params;
-  }
-
-  uncheckWholeSelection() {
-    return null;
-  }
-
-  uncheckElement(element) {
-    return element;
-  }
-
-  selectElement(element) {
-    return element;
-  }
-
-  deselectAllElementsOfType(type) {
-    return type;
-  }
-
-  deselectAllElements() {
-    return null;
-  }
-
-  setPagination(pagination) {
-    return pagination;
-  }
-
-  setSearchSelection(selection) {
-    return selection;
-  }
-
-  selectCollectionWithoutUpdating(collection) {
-    return collection;
-  }
-
-  clearSearchSelection() {
-    return null;
-  }
-
-  changeNumberOfResultsShown(value) {
-    return value;
-  }
-
-  updateModalProps(params) {
-    return params
-  }
-
-  hideModal() {
-    return null
-  }
-
-  setFilterCreatedAt(filterCreatedAt) {
-    return filterCreatedAt;
-  }
-
-  setFromDate(date) {
-    return date;
-  }
-
-  setToDate(date) {
-    return date;
-  }
-
-  setProductOnly(bool) {
-    return bool;
-  }
-
-  rerenderGenericWorkflow(params) { return params; }
-  showGenericWorkflowModal(show) { return show; }
-}
-
-export default alt.createActions(UIActions);
diff --git a/app/packs/src/components/actions/UserActions.js b/app/packs/src/components/actions/UserActions.js
deleted file mode 100644
index 81be1caf8..000000000
--- a/app/packs/src/components/actions/UserActions.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import SegmentsFetcher from '../fetchers/SegmentsFetcher';
-import GenericDSsFetcher from '../fetchers/GenericDSsFetcher';
-
-import cookie from 'react-cookie'
-import DocumentHelper from '../utils/DocumentHelper';
-
-class UserActions {
-  fetchOlsRxno() {
-    return (dispatch) => {
-      UsersFetcher.fetchOls('rxno')
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchOlsChmo() {
-    return (dispatch) => {
-      UsersFetcher.fetchOls('chmo')
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    };
-  }
-
-  fetchCurrentUser() {
-    return (dispatch) => { UsersFetcher.fetchCurrentUser()
-      .then((result) => {
-        dispatch(result.user);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchGenericEls() {
-    return (dispatch) => { UsersFetcher.fetchElementKlasses()
-      .then((roots) => {
-        dispatch(roots);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-
-  logout() {
-    fetch('/users/sign_out', {
-      method: 'delete',
-      credentials: 'same-origin',
-      data: {authenticity_token: DocumentHelper.getMetaContent("csrf-token")}
-    })
-    .then(response => {
-      Aviator.navigate('/', { silent: true });
-      location.href = '/';
-      location.reload();
-      // location = '/home';
-    });
-  }
-
-  fetchProfile() {
-    return (dispatch) => {
-      UsersFetcher.fetchProfile()
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  selectTab(tab) {
-    return  tab;
-  }
-
-  updateUserProfile(params) {
-    return (dispatch) => { UsersFetcher.updateUserProfile(params)
-      .then((result) => {
-        dispatch(result);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });};
-  }
-
-  fetchUserLabels() {
-    return (dispatch) => {
-      UsersFetcher.listUserLabels(true)
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchEditors() {
-    return (dispatch) => {
-      UsersFetcher.listEditors()
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchNoVNCDevices() {
-    return (dispatch) => {
-      UsersFetcher.fetchNoVNCDevices()
-        .then(result => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    };
-  }
-
-  fetchSegmentKlasses() {
-    return (dispatch) => {
-      SegmentsFetcher.fetchKlass()
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchDatasetKlasses() {
-    return (dispatch) => {
-      GenericDSsFetcher.fetchKlass()
-        .then((result) => {
-          dispatch(result);
-        }).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    };
-  }
-
-  fetchUnitsSystem() {
-    return (dispatch) => { fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
-  fetchOmniauthProviders() {
-    return (dispatch) => {
-      UsersFetcher.fetchOmniauthProviders()
-        .then((result) => { dispatch(result); })
-        .catch((errorMessage) => { console.log(errorMessage); });
-    }
-  }
-}
-
-export default alt.createActions(UserActions);
diff --git a/app/packs/src/components/alt.js b/app/packs/src/components/alt.js
deleted file mode 100644
index 841ebc346..000000000
--- a/app/packs/src/components/alt.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// alt initialization
-const Alt = require('alt');
-const alt = new Alt();
-
-module.exports = alt;
diff --git a/app/packs/src/components/chemscanner/ChemScanner.js b/app/packs/src/components/chemscanner/ChemScanner.js
deleted file mode 100644
index a492ab4be..000000000
--- a/app/packs/src/components/chemscanner/ChemScanner.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-
-import RootContainer from './containers/RootContainer';
-import configureStore from './store/configureStore';
-
-export const store = configureStore();
-
-export const ChemScanner = props => (
-  <Provider store={store}>
-    <RootContainer {...props} />
-  </Provider>
-);
-
-document.addEventListener('DOMContentLoaded', () => {
-  const chemScannerDOM = document.getElementById('ChemScanner');
-  if (chemScannerDOM) ReactDOM.render(<ChemScanner />, chemScannerDOM);
-});
diff --git a/app/packs/src/components/chemscanner/actions/ActionTypes.js b/app/packs/src/components/chemscanner/actions/ActionTypes.js
deleted file mode 100644
index 6c7b36d10..000000000
--- a/app/packs/src/components/chemscanner/actions/ActionTypes.js
+++ /dev/null
@@ -1,79 +0,0 @@
-export const SET_CDD_INSTANCE = 'SET_CDD_INSTANCE';
-export const SCAN_FILE_FOR_MOLECULES = 'SCAN_FILE_FOR_MOLECULES';
-export const SCAN_FILE_FOR_REACTIONS = 'SCAN_FILE_FOR_REACTIONS';
-
-export const HIDE_FILE = 'HIDE_FILE';
-export const HIDE_SCHEME = 'HIDE_SCHEME';
-export const HIDE_MOLECULE = 'HIDE_MOLECULE';
-export const HIDE_REACTION = 'HIDE_REACTION';
-
-export const APPROVE_FILE = 'APPROVE_FILE';
-export const APPROVE_SCHEME = 'APPROVE_SCHEME';
-
-export const EDIT_MOLECULE_COMMENT = 'EDIT_MOLECULE_COMMENT';
-export const EDIT_REACTION_COMMENT = 'EDIT_REACTION_COMMENT';
-
-export const SELECT_MOLECULE = 'SELECT_MOLECULE';
-export const SELECT_REACTION = 'SELECT_REACTION';
-
-export const CLEAN_UP = 'CLEAN_UP';
-export const CLEAN_UP_REQUEST_SVG = 'CLEAN_UP_REQUEST_SVG';
-
-export const CHANGE_VIEW = 'CHANGE_VIEW';
-export const VIEW_SCANNED_FILES = 'VIEW_SCANNED_FILES';
-export const VIEW_ABBREVIATION = 'VIEW_ABBREVIATION';
-export const VIEW_FILE_STORAGE = 'VIEW_FILE_STORAGE';
-export const VIEW_ARCHIVED_MANAGEMENT = 'VIEW_ARCHIVED_MANAGEMENT';
-
-export const UPDATE_REAGENTS_SMILES = 'UPDATE_REAGENTS_SMILES';
-
-export const GET_CURRENT_VERSION = 'GET_CURRENT_VERSION';
-
-export const SET_LOADING = 'SET_LOADING';
-export const UNSET_LOADING = 'UNSET_LOADING';
-export const SET_IMPORT = 'SET_IMPORT';
-export const UNSET_IMPORT = 'UNSET_IMPORT';
-export const SET_NOTIFICATION = 'SET_NOTIFICATION';
-export const RESET_NOTIFICATION = 'RESET_NOTIFICATION';
-
-export const RETRIEVE_STORED_FILES = 'RETRIEVE_STORED_FILES';
-export const GET_SCANNED_OUTPUT = 'GET_SCANNED_OUTPUT';
-export const RESCAN_STORED_FILE = 'RESCAN_STORED_FILE';
-export const DELETE_STORED_FILE = 'DELETE_STORED_FILE';
-export const DOWNLOAD_STORED_FILE = 'DOWNLOAD_STORED_FILE';
-export const MARK_CORRECT = 'MARK_CORRECT';
-export const UPLOAD_TO_STORE = 'UPLOAD_TO_STORE';
-
-export const GET_SCHEME_PREVIEW = 'GET_SCHEME_PREVIEW';
-export const SAVE_PNG = 'SAVE_PNG';
-
-export const UPDATE_METADATA = 'UPDATE_METADATA';
-export const IMPORT_DATA = 'IMPORT_DATA';
-export const UPDATE_ITEM_FIELD = 'UPDATE_ITEM_FIELD';
-
-export const TOGGLE_ALIAS_POLYMER = 'TOGGLE_ALIAS_POLYMER';
-
-export const SET_EDITING_MOLECULE_ID = 'SET_EDITING_MOLECULE_ID';
-
-export const FETCH_SVG = 'FETCH_SVG';
-
-export const TOGGLE_FILE_EXPAND = 'TOGGLE_FILE_EXPAND';
-export const TOGGLE_SCHEME_EXPAND = 'TOGGLE_SCHEME_EXPAND';
-
-export const SET_ARCHIVED_VALUE = 'SET_ARCHIVED_VALUE';
-
-export const DEFAULT = 'DEFAULT';
-
-export const REMOVE_FILE = 'REMOVE_FILE';
-
-export const REMOVE_MOLECULE = 'REMOVE_MOLECULE';
-export const REMOVE_REACTION = 'REMOVE_REACTION';
-
-export const TOGGLE_RESIN_IN_REACTION = 'TOGGLE_RESIN_IN_REACTION';
-export const TOGGLE_MOLECULE_RESIN = 'TOGGLE_MOLECULE_RESIN';
-
-export const TOGGLE_ABB_VIEW = 'TOGGLE_ABB_VIEW';
-
-export const ADD_REAGENTS_SMILES = 'ADD_REAGENTS_SMILES';
-
-export const DELETE_FILE = 'DELETE_FILE';
diff --git a/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js b/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
deleted file mode 100644
index 2cccb1426..000000000
--- a/app/packs/src/components/chemscanner/actions/chemdrawInstanceActions.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-
-const setCddInstance = cdd => ({ type: types.SET_CDD_INSTANCE, cdd });
-
-export default setCddInstance;
diff --git a/app/packs/src/components/chemscanner/actions/fileActions.js b/app/packs/src/components/chemscanner/actions/fileActions.js
deleted file mode 100644
index 4fc00ec63..000000000
--- a/app/packs/src/components/chemscanner/actions/fileActions.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { fromJS } from 'immutable';
-import uuid from 'uuid';
-
-import * as types from './ActionTypes';
-import { CALL_API } from '../middleware/api';
-
-import { isPngImage, isSvgImage } from '../utils';
-
-export const scanFileNormalizer = (res, store) => {
-  const { schemes } = res;
-  if (!schemes) return fromJS(res);
-
-  const cddInstance = store.getState().get('chemdrawInstance');
-  if (!cddInstance) return fromJS(res);
-
-  schemes.filter(s => s.imageData).forEach((scheme) => {
-    const { imageData } = scheme;
-    const isPng = isPngImage(imageData);
-    const isSvg = isSvgImage(imageData);
-
-    if (isPng || isSvg) {
-      const type = isPng ? 'image/png' : 'image/svg+xml';
-
-      const blob = new Blob([imageData], { type });
-      /* eslint-disable-next-line no-param-reassign */
-      scheme.imageData = window.URL.createObjectURL(blob);
-
-      /* eslint-disable-next-line no-param-reassign */
-      scheme.isSaved = true;
-
-      return;
-    }
-
-    const cdxmlRegex = new RegExp('<?xml.*');
-
-    if (cdxmlRegex.test(scheme.imageData)) {
-      cddInstance.loadCDXML(imageData);
-    } else {
-      cddInstance.loadB64CDX(imageData);
-    }
-
-    const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
-    const pngb64 = `data:image/png;base64,${b64png}`;
-    cddInstance.clear();
-
-    /* eslint-disable-next-line no-param-reassign */
-    scheme.pictureData = pngb64;
-
-    const blob = new Blob([pngb64], { type: 'image/png' });
-    /* eslint-disable-next-line no-param-reassign */
-    scheme.imageData = window.URL.createObjectURL(blob);
-  });
-
-  return fromJS(res);
-};
-
-export const scanFile = (files, getMol) => (dispatch) => {
-  const data = new FormData();
-  data.append('get_mol', getMol);
-  files.forEach(file => data.append(uuid.v4(), file));
-  const actionType = getMol ? types.SCAN_FILE_FOR_MOLECULES : types.SCAN_FILE_FOR_REACTIONS;
-
-  return dispatch({
-    type: actionType,
-    [CALL_API]: {
-      endpoint: '/api/v1/public_chemscanner/upload',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data
-      }
-    }
-  });
-};
-
-export const updateReagents = (reactionId, updateInfo) => dispatch => (
-  dispatch({
-    type: types.UPDATE_REAGENTS_SMILES,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner/reagent_smiles',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ reactionId, updateInfo })
-      }
-    },
-  })
-);
-
-export const saveImage = imageList => dispatch => (
-  dispatch({
-    type: types.SAVE_PNG,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/save_png',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ image_list: imageList })
-      }
-    },
-  })
-);
-
-export const removeFile = fileUid => ({ type: types.HIDE_FILE, fileUid });
diff --git a/app/packs/src/components/chemscanner/actions/index.js b/app/packs/src/components/chemscanner/actions/index.js
deleted file mode 100644
index 77aa9e066..000000000
--- a/app/packs/src/components/chemscanner/actions/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { combineReducers } from 'redux';
-import files from './files';
-import chemdrawItems from './chemdrawItems';
-import images from './images';
-
-export default combineReducers({
-  files,
-  chemdrawItems,
-  images
-});
diff --git a/app/packs/src/components/chemscanner/actions/scannedItemActions.js b/app/packs/src/components/chemscanner/actions/scannedItemActions.js
deleted file mode 100644
index 6015ba029..000000000
--- a/app/packs/src/components/chemscanner/actions/scannedItemActions.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as types from '../actions/ActionTypes';
-
-export const removeMolecule = (id, fileUid, schemeIdx) => ({
-  type: types.HIDE_MOLECULE, id, fileUid, schemeIdx
-});
-
-export const removeReaction = (id, fileUid, schemeIdx) => ({
-  type: types.HIDE_REACTION, id, fileUid, schemeIdx
-});
-
-export const editReactionComment = (id, fileUid, schemeIdx, comment) => ({
-  type: types.EDIT_REACTION_COMMENT, id, fileUid, schemeIdx, comment
-});
-
-export const editMoleculeComment = (id, fileUid, schemeIdx, comment) => ({
-  type: types.EDIT_MOLECULE_COMMENT, id, fileUid, schemeIdx, comment
-});
-
-export const selectMolecule = (id, fileUid, schemeIdx) => ({
-  type: types.SELECT_MOLECULE, id, fileUid, schemeIdx
-});
-
-export const selectReaction = (id, fileUid, schemeIdx) => ({
-  type: types.SELECT_REACTION, id, fileUid, schemeIdx
-});
-
-//export const setResin = (id, fileUid, cdUid, atomId) => ({
-//  type: types.SET_RESIN, id, fileUid, cdUid, atomId
-//});
-
-export const toggleResinInReaction = (fileUid, cdUid, rId, molId, atomId) => ({
-  type: types.TOGGLE_RESIN_IN_REACTION, fileUid, cdUid, rId, molId, atomId
-});
-
-export const toggleMoleculeResin = (fileUid, cdUid, molId, atomId) => ({
-  type: types.TOGGLE_MOLECULE_RESIN, fileUid, cdUid, molId, atomId
-});
diff --git a/app/packs/src/components/chemscanner/actions/storedFileActions.js b/app/packs/src/components/chemscanner/actions/storedFileActions.js
deleted file mode 100644
index 4e6c48631..000000000
--- a/app/packs/src/components/chemscanner/actions/storedFileActions.js
+++ /dev/null
@@ -1,315 +0,0 @@
-import uuid from 'uuid';
-
-import * as types from './ActionTypes';
-import { scanFileNormalizer } from './fileActions';
-import { CALL_API } from '../middleware/api';
-
-export const retrieveStoredFiles = () => dispatch => (
-  dispatch({
-    type: types.RETRIEVE_STORED_FILES,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/all',
-      options: {
-        credentials: 'same-origin',
-        method: 'post'
-      }
-    }
-  })
-);
-
-export const getScannedOutputs = (ids, type, display) => dispatch => (
-  dispatch({
-    type: types.GET_SCANNED_OUTPUT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/get_outputs',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, display })
-      },
-    }
-  })
-);
-
-export const hideItems = (ids, type) => dispatch => (
-  dispatch({ type: types[`HIDE_${type.toLocaleUpperCase()}`], ids })
-);
-
-export const approveItems = (ids, type, val) => dispatch => (
-  dispatch({
-    type: types[`APPROVE_${type.toLocaleUpperCase()}`],
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/approve',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, val })
-      },
-    }
-  })
-);
-
-export const rescanFiles = ids => dispatch => (
-  dispatch({
-    type: types.RESCAN_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/rescan',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids })
-      },
-    }
-  })
-);
-
-export const deleteItems = (ids, type, itemVersion) => dispatch => (
-  dispatch({
-    type: types.DELETE_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/delete',
-      normalizer: scanFileNormalizer,
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, type, version: itemVersion || '' })
-      },
-    }
-  })
-);
-
-export const downloadFile = id => dispatch => (
-  dispatch({
-    type: types.DOWNLOAD_STORED_FILE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/download/',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const uploadToStore = files => (dispatch) => {
-  const data = new FormData();
-  for (let i = 0; i < files.length; i += 1) data.append(uuid.v4(), files[i]);
-
-  return dispatch({
-    type: types.UPLOAD_TO_STORE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/upload',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        body: data
-      }
-    }
-  });
-};
-
-export const saveImage = imageList => (
-  fetch('/api/v1/chemscanner_storage/save_png', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ image_list: imageList })
-  })
-);
-
-export const fetchPreview = id => (
-  fetch('/api/v1/chemscanner_storage/scheme_image', {
-    credentials: 'same-origin',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    method: 'post',
-    body: JSON.stringify({ id })
-  }).then(res => res.json())
-);
-
-export const getPreview = id => dispatch => (
-  dispatch({
-    type: types.GET_SCHEME_PREVIEW,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/scheme_image',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id })
-      },
-    }
-  })
-);
-
-export const updateMetadata = (id, type, extendedMetadata) => dispatch => (
-  dispatch({
-    type: types.UPDATE_METADATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_metadata',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ id, type, data: extendedMetadata })
-      },
-    }
-  })
-);
-
-export const importData = (data, collection, maintainShortLabel) => dispatch => (
-  dispatch({
-    type: types.IMPORT_DATA,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/import',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ data, collection, maintainShortLabel })
-      }
-    }
-  })
-);
-
-export const updateItemField = (id, type, field, value) => dispatch => (
-  dispatch({
-    type: types.UPDATE_ITEM_FIELD,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/update_output',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id, type, field, value
-        })
-      }
-    }
-  })
-);
-
-export const toggleAliasPolymer = (moleculeId, atomIdx) => dispatch => (
-  dispatch({
-    type: types.TOGGLE_ALIAS_POLYMER,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/toggle_polymer',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeId, atomIdx })
-      }
-    }
-  })
-);
-
-export const fetchSvg = (moleculeIds, reactionIds) => dispatch => (
-  dispatch({
-    type: types.FETCH_SVG,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/fetch_svg',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ moleculeIds, reactionIds })
-      }
-    }
-  })
-);
-
-export const beilsteinExport = ids => (
-  fetch('/api/v1/chemscanner_storage/beilstein_export', {
-    credentials: 'same-origin',
-    method: 'post',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ ids })
-  })
-);
-
-export const setArchivedValue = (ids, value) => dispatch => (
-  dispatch({
-    type: types.SET_ARCHIVED_VALUE,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_archived',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ ids, value })
-      },
-    }
-  })
-);
-
-export const setExpand = (id, type, value) => dispatch => (
-  dispatch({
-    type: types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`] || types.DEFAULT,
-    [CALL_API]: {
-      endpoint: '/api/v1/chemscanner_storage/set_expanded',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ type, id, value })
-      },
-    }
-  })
-);
diff --git a/app/packs/src/components/chemscanner/actions/uiActions.js b/app/packs/src/components/chemscanner/actions/uiActions.js
deleted file mode 100644
index 2ea85cbfc..000000000
--- a/app/packs/src/components/chemscanner/actions/uiActions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-
-import * as types from './ActionTypes';
-import { CALL_API } from '../middleware/api';
-
-export const changeView = view => dispatch => (
-  dispatch({ type: types.CHANGE_VIEW, view })
-);
-
-export const getCurrentVersion = () => dispatch => (
-  dispatch({
-    type: types.GET_CURRENT_VERSION,
-    [CALL_API]: {
-      endpoint: '/api/v1/public_chemscanner/ui/version',
-      options: {
-        credentials: 'same-origin',
-        method: 'post',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json'
-        },
-      },
-    }
-  })
-);
diff --git a/app/packs/src/components/chemscanner/components/AbbreviationManagement.js b/app/packs/src/components/chemscanner/components/AbbreviationManagement.js
deleted file mode 100644
index f0f61d012..000000000
--- a/app/packs/src/components/chemscanner/components/AbbreviationManagement.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-
-import {
-  ControlLabel, Button, Radio,
-  Form, FormGroup, FormControl,
-} from 'react-bootstrap';
-
-export default class AbbreviationManagement extends React.Component {
-  constructor() {
-    super();
-
-    this.createAbbreviation = this.createAbbreviation.bind(this);
-    this.onAbbGridReady = this.onAbbGridReady.bind(this);
-    this.onSuperatomGridReady = this.onSuperatomGridReady.bind(this);
-  }
-
-  onAbbGridReady(e) {
-    const { onGridReady } = this.props;
-    onGridReady(e, true);
-  }
-
-  onSuperatomGridReady(e) {
-    const { onGridReady } = this.props;
-    onGridReady(e, false);
-  }
-
-  createAbbreviation() {
-    const { createAbbreviation, newAbb } = this.props;
-    const abb = this.abbRef.value;
-    const smiles = this.smilesRef.value;
-
-    createAbbreviation(abb, smiles, newAbb);
-  }
-
-  render() {
-    const {
-      abbColumnDefs, superatomColumnDefs, abbreviations, superatoms,
-      defaultColDef, newAbb, changeTypeCreate
-    } = this.props;
-
-    const newText = newAbb ? 'Abbreviation' : 'Superatom';
-
-    const abbreviationStyle = {
-      width: '70%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-    const superatomStyle = {
-      width: '30%',
-      marginRight: '5px',
-      height: 'calc(100vh - 150px)'
-    };
-
-    return (
-      <div style={{ marginTop: '20px' }}>
-        <div className="chemscanner-abb-view-header">
-          <Form inline style={{ marginRight: '20px' }}>
-            <FormGroup controlId="formInlineName" style={{ marginRight: '20px' }}>
-              <ControlLabel>{newText}</ControlLabel>
-              <FormControl
-                type="text"
-                placeholder={newText}
-                inputRef={(r) => { this.abbRef = r; }}
-                style={{ marginLeft: '10px', marginRight: '10px' }}
-              />
-            </FormGroup>
-            <FormGroup controlId="formInlineEmail">
-              <ControlLabel>SMILES</ControlLabel>
-              {' '}
-              <FormControl
-                type="text"
-                placeholder="SMILES"
-                inputRef={(r) => { this.smilesRef = r; }}
-              />
-            </FormGroup>
-          </Form>
-          <Form inline>
-            <FormGroup>
-              <Radio
-                inline
-                value="similar"
-                checked={newAbb}
-                onChange={changeTypeCreate}
-              >
-                Abbreviation
-              </Radio>
-              <Radio
-                inline
-                value="similar"
-                checked={!newAbb}
-                onChange={changeTypeCreate}
-              >
-                Superatom
-              </Radio>
-            </FormGroup>
-            <Button
-              bsSize="small"
-              onClick={this.createAbbreviation}
-              style={{ marginLeft: '20px' }}
-            >
-              Create
-            </Button>
-          </Form>
-        </div>
-        <br />
-        <div className="abbreviation-management">
-          <div className="ag-theme-balham" style={abbreviationStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={abbColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={abbreviations}
-              onGridReady={this.onAbbGridReady}
-            />
-          </div>
-          <div className="ag-theme-balham" style={superatomStyle}>
-            <AgGridReact
-              pagination
-              paginationAutoPageSize
-              floatingFilter
-              columnDefs={superatomColumnDefs}
-              defaultColDef={defaultColDef || {}}
-              rowData={superatoms}
-              onGridReady={this.onSuperatomGridReady}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-AbbreviationManagement.propTypes = {
-  abbColumnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
-  superatomColumnDefs: PropTypes.arrayOf(PropTypes.object).isRequired,
-  defaultColDef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  abbreviations: PropTypes.arrayOf(PropTypes.object).isRequired,
-  superatoms: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onGridReady: PropTypes.func.isRequired,
-  newAbb: PropTypes.bool.isRequired,
-  changeTypeCreate: PropTypes.func.isRequired,
-  createAbbreviation: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/ArchivedManagement.js b/app/packs/src/components/chemscanner/components/ArchivedManagement.js
deleted file mode 100644
index 40e021cd4..000000000
--- a/app/packs/src/components/chemscanner/components/ArchivedManagement.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-export default class ArchivedManagement extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-
-    this.activedColumnDefs = [
-      {
-        headerName: 'Actived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-    this.archivedColumnDefs = [
-      {
-        headerName: 'Archived File',
-        field: 'fileName',
-        width: 250,
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-    ];
-
-    this.onActivedGridReady = this.onActivedGridReady.bind(this);
-    this.onArchivedGridReady = this.onArchivedGridReady.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.setActived = this.setActived.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.activedGridApi && this.activedGridColumnApi) {
-      this.activedGridColumnApi.autoSizeColumns();
-    }
-
-    if (this.archivedGridApi && this.archivedGridColumnApi) {
-      this.archivedGridColumnApi.autoSizeColumns();
-    }
-  }
-
-  onActivedGridReady(params) {
-    this.activedGridApi = params.api;
-    this.activedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  onArchivedGridReady(params) {
-    this.archivedGridApi = params.api;
-    this.archivedGridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-  }
-
-  setArchived() {
-    if (!this.activedGridApi) return;
-
-    const fileIds = this.activedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  setActived() {
-    if (!this.archivedGridApi) return;
-
-    const fileIds = this.archivedGridApi.getSelectedRows().map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  render() {
-    const { archivedFiles, activedFiles } = this.props;
-    const gridStyle = {
-      height: 'calc(100vh - 100px)', flex: 1
-    };
-    const buttonStyle = {
-      width: '33px',
-      margin: '5px',
-      textAlign: 'center',
-      alignSelf: 'center',
-      color: 'rgba(0, 0, 0, 0.54)'
-    };
-
-    return (
-      <div style={{ display: 'flex', margin: '10px' }}>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="activedFilesGrid"
-            columnDefs={this.activedColumnDefs}
-            rowData={activedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onActivedGridReady}
-          />
-        </div>
-        <div style={buttonStyle}>
-          <button className="btn btn-xs" onClick={this.setArchived}>
-            <i className="fa fa-arrow-circle-right fa-2x" />
-          </button>
-          &nbsp; &nbsp;
-          <button className="btn btn-xs" onClick={this.setActived}>
-            <i className="fa fa-arrow-circle-left fa-2x" />
-          </button>
-        </div>
-        <div className="ag-theme-balham" style={gridStyle}>
-          <AgGridReact
-            id="archivedFilesGrid"
-            columnDefs={this.archivedColumnDefs}
-            rowData={archivedFiles}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            onGridReady={this.onArchivedGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-ArchivedManagement.propTypes = {
-  archivedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  activedFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js b/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
deleted file mode 100644
index 9ce6f25b5..000000000
--- a/app/packs/src/components/chemscanner/components/ChemscannerImportModal.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel, Checkbox,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ChemscannerImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      maintainShortLabel: true,
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.toggleMaintainShortLabel = this.toggleMaintainShortLabel.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel, maintainShortLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection, maintainShortLabel);
-  }
-
-  toggleMaintainShortLabel() {
-    this.setState({ maintainShortLabel: !this.state.maintainShortLabel });
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const {
-      options, newLabel, selected, maintainShortLabel
-    } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-          <FormGroup>
-            <Checkbox
-              checked={maintainShortLabel}
-              onChange={this.toggleMaintainShortLabel}
-            >
-              Maintain reaction short label
-            </Checkbox>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ChemscannerImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ChemscannerImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js b/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
deleted file mode 100644
index f7490dddc..000000000
--- a/app/packs/src/components/chemscanner/components/CopyClipboardBtn.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Clipboard from 'clipboard';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-
-export default class CopyClipboardBtn extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { identifier } = props;
-    const { fileUid, cdUid, id } = identifier;
-    this.ddId = `clipboard-dropdown-${fileUid}-${cdUid}-${id}`;
-  }
-
-  componentDidMount() {
-    const { container } = this.props;
-    const ddDiv = document.getElementById(this.ddId).parentNode;
-    const elements = ddDiv.getElementsByTagName('a');
-
-    if (container) {
-      this.clipboard = new Clipboard(elements, { container });
-    } else {
-      this.clipboard = new Clipboard(elements);
-    }
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  render() {
-    const {
-      smi, mdl, inchi, inchiKey
-    } = this.props;
-    const clipboardIcon = (<i className="fa fa-clipboard" />);
-
-    return (
-      <DropdownButton
-        title={clipboardIcon}
-        className="clipboard-btn left-btn btn btn-xs"
-        id={this.ddId}
-      >
-        <MenuItem eventKey="1" data-clipboard-text={smi}>SMILES</MenuItem>
-        <MenuItem eventKey="2" data-clipboard-text={mdl}>Molfile</MenuItem>
-        <MenuItem eventKey="3" data-clipboard-text={inchi}>InChI</MenuItem>
-        <MenuItem eventKey="4" data-clipboard-text={inchiKey}>InChIKey</MenuItem>
-      </DropdownButton>
-    );
-  }
-}
-
-CopyClipboardBtn.propTypes = {
-  smi: PropTypes.string.isRequired,
-  mdl: PropTypes.string.isRequired,
-  inchi: PropTypes.string.isRequired,
-  inchiKey: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  identifier: PropTypes.object.isRequired,
-  container: PropTypes.instanceOf(Element)
-};
-
-CopyClipboardBtn.defaultProps = {
-  container: null
-};
diff --git a/app/packs/src/components/chemscanner/components/DeleteBtn.js b/app/packs/src/components/chemscanner/components/DeleteBtn.js
deleted file mode 100644
index d1a23b213..000000000
--- a/app/packs/src/components/chemscanner/components/DeleteBtn.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class DeleteBtn extends React.Component {
-  constructor() {
-    super();
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick(e) {
-    const { param, onClick } = this.props;
-    e.stopPropagation();
-    e.preventDefault();
-    onClick(param);
-  }
-
-  render() {
-    const { pullLeft } = this.props;
-    const className = pullLeft ? 'left-btn' : 'right-btn';
-
-    return (
-      <button
-        className={`${className} btn btn-xs`}
-        onClick={this.onClick}
-      >
-        <i className="fa fa-times" />
-      </button>
-    );
-  }
-}
-
-DeleteBtn.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  pullLeft: PropTypes.bool,
-  param: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
-};
-
-DeleteBtn.defaultProps = {
-  pullLeft: false,
-};
diff --git a/app/packs/src/components/chemscanner/components/EditCommentBtn.js b/app/packs/src/components/chemscanner/components/EditCommentBtn.js
deleted file mode 100644
index fff28342d..000000000
--- a/app/packs/src/components/chemscanner/components/EditCommentBtn.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Popover, FormControl } from 'react-bootstrap';
-
-export default class EditCommentBtn extends React.Component {
-  constructor() {
-    super();
-
-    this.onChangeComment = this.onChangeComment.bind(this);
-  }
-
-  onChangeComment() {
-    const comment = this.commentRef.value;
-
-    const {
-      onChangeComment, cdUid, itemId
-    } = this.props;
-    onChangeComment(cdUid, itemId, comment);
-  }
-
-  render() {
-    const {
-      comment, cdUid, itemId
-    } = this.props;
-
-    const commentPopover = (
-      <Popover id={`${cdUid}-${itemId}-comment`} title="Comment">
-        <FormControl
-          componentClass="textarea"
-          defaultValue={comment}
-          inputRef={(r) => { this.commentRef = r; }}
-          rows={6}
-        />
-      </Popover>
-    );
-
-    return (
-      <div>
-        <OverlayTrigger
-          trigger="click"
-          placement="left"
-          rootClose
-          onExit={this.onChangeComment}
-          overlay={commentPopover}
-          container={this}
-        >
-          <button type="button" className="clipboardBtn right-btn btn btn-xs">
-            <i className="fa fa-comment" />
-          </button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-}
-
-EditCommentBtn.propTypes = {
-  onChangeComment: PropTypes.func.isRequired,
-  comment: PropTypes.string.isRequired,
-  itemId: PropTypes.number.isRequired,
-  cdUid: PropTypes.string.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/EditMdlBtn.js b/app/packs/src/components/chemscanner/components/EditMdlBtn.js
deleted file mode 100644
index 57801b00f..000000000
--- a/app/packs/src/components/chemscanner/components/EditMdlBtn.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-
-export default class EditMdlBtn extends React.Component {
-  constructor() {
-    super();
-
-    this.onSelect = this.onSelect.bind(this);
-  }
-
-  onSelect(id) {
-    this.props.openKetcher(id);
-  }
-
-  render() {
-    const { options, identifier } = this.props;
-
-    if (options.length === 0 || !identifier) return <span />;
-
-    const icon = (<i className="fa fa-pencil" />);
-    const ddId = `dropdown-edit-mdl-${identifier}`;
-
-    return (
-      <DropdownButton
-        id={ddId}
-        title={icon}
-        className="clipboard-btn left-btn btn btn-xs"
-      >
-        {options.map(option => (
-          <MenuItem
-            key={option.value}
-            eventKey={option.value}
-            onSelect={this.onSelect}
-          >
-            {option.title}
-          </MenuItem>
-        ))}
-      </DropdownButton>
-    );
-  }
-}
-
-EditMdlBtn.propTypes = {
-  identifier: PropTypes.number,
-  openKetcher: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.object),
-};
-
-EditMdlBtn.defaultProps = {
-  options: [],
-  identifier: 0,
-};
diff --git a/app/packs/src/components/chemscanner/components/EditableText.js b/app/packs/src/components/chemscanner/components/EditableText.js
deleted file mode 100644
index 5e3afafcd..000000000
--- a/app/packs/src/components/chemscanner/components/EditableText.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class EditableText extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { editing: false };
-
-    this.handleDoubleClick = this.handleDoubleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-
-  handleBlur(e) {
-    const { id, field, onFinishUpdate } = this.props;
-    if (!id) return;
-
-    const newValue = e.target.value;
-    this.setState({ editing: false }, onFinishUpdate(id, field, newValue));
-  }
-
-  handleDoubleClick() {
-    if (!this.props.id) return;
-
-    this.setState({ editing: true });
-  }
-
-  render() {
-    const { field, value } = this.props;
-    const { editing } = this.state;
-
-    let cellContent = value;
-    if (editing) {
-      cellContent = (
-        <input
-          style={{ width: '100%' }}
-          defaultValue={value}
-          onBlur={this.handleBlur}
-        />
-      );
-    }
-
-    return (
-      <div onDoubleClick={this.handleDoubleClick}>
-        <b>{field}: </b>
-        {cellContent}
-      </div>
-    );
-  }
-}
-
-EditableText.propTypes = {
-  id: PropTypes.number,
-  field: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onFinishUpdate: PropTypes.func.isRequired
-};
-
-EditableText.defaultProps = {
-  id: 0,
-};
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js b/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
deleted file mode 100644
index bfc38d30f..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemActionsHeader.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-function FileItemActionsHeader({
-  deleteItems, beilsteinExport, openImportModal,
-  rescanFiles, uploadInput, showSelectedItems,
-  setArchived, unsetArchived
-}) {
-  if (!uploadInput) return <span />;
-
-  const uploadTooltip = <Tooltip id="cs-show-files">Upload</Tooltip>;
-  const openUpload = () => uploadInput.current.click();
-
-  const rescanTooltip = <Tooltip id="cs-rescan-files">Rescan Files</Tooltip>;
-  const deleteTooltip = <Tooltip id="cs-rescan-files">Delete Items</Tooltip>;
-
-  const dropdownTitle = <i className="fa fa-eye" />;
-  const exportTitle = <i className="fa fa-cloud-upload" />;
-
-  const toggleArchiveTitle = <i className="fa fa-archive" />;
-
-  return (
-    <div>
-      <OverlayTrigger placement="top" overlay={deleteTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          style={{ float: 'right' }}
-          onClick={deleteItems}
-        >
-          <i className="fa fa-trash" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={dropdownTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={() => showSelectedItems('reactions')}
-          >
-            Show Reactions
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={() => showSelectedItems('molecules')}
-          >
-            Show Molecules
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-show-multiple-items-dropdown"
-          title={exportTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={openImportModal}
-          >
-            Import to ELN
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={beilsteinExport}
-          >
-            Beilstein export
-          </MenuItem>
-        </DropdownButton>
-      </div>
-      <OverlayTrigger placement="top" overlay={rescanTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="primary"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={rescanFiles}
-        >
-          <i className="fa fa-refresh" />
-        </Button>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={uploadTooltip}>
-        <Button
-          bsSize="xsmall"
-          bsStyle="success"
-          style={{ float: 'right', marginRight: '5px' }}
-          onClick={openUpload}
-        >
-          <i className="fa fa-plus-circle" />
-        </Button>
-      </OverlayTrigger>
-      <div style={{ float: 'right', marginRight: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          pullRight
-          id="cs-toggle-archive-dropdown"
-          title={toggleArchiveTitle}
-        >
-          <MenuItem
-            eventKey="1"
-            onClick={setArchived}
-          >
-            Set archive
-          </MenuItem>
-          <MenuItem
-            eventKey="2"
-            onClick={unsetArchived}
-          >
-            Unset archive
-          </MenuItem>
-        </DropdownButton>
-      </div>
-    </div>
-  );
-}
-
-FileItemActionsHeader.propTypes = {
-  uploadInput: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  rescanFiles: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  showSelectedItems: PropTypes.func.isRequired,
-  setArchived: PropTypes.func.isRequired,
-  unsetArchived: PropTypes.func.isRequired,
-};
-
-FileItemActionsHeader.defaultProps = {
-  uploadInput: null
-};
-
-export default FileItemActionsHeader;
diff --git a/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js b/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
deleted file mode 100644
index 1221dba3b..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemActionsRenderer.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Button, DropdownButton, MenuItem,
-  OverlayTrigger, Tooltip
-} from 'react-bootstrap';
-
-const DeleteBtn = ({ deleteItems }) => {
-  const deleteTooltip = <Tooltip id="cs-delete-item">Delete</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={deleteTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        style={{ float: 'right', marginLeft: '5px' }}
-        onClick={deleteItems}
-      >
-        <i className="fa fa-trash" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DeleteBtn.propTypes = {
-  deleteItems: PropTypes.func.isRequired,
-};
-
-const DownloadBtn = ({ data, downloadFile }) => {
-  const { type } = data;
-
-  let visibility = '';
-  if (type !== 'File') visibility = 'hidden';
-
-  const style = {
-    float: 'right',
-    marginLeft: '5px',
-    visibility,
-    width: '35px'
-  };
-
-  const tooltipId = `cs-download-${type}-${data.id}-tooltip`;
-  const downloadTooltip = <Tooltip id={tooltipId}>Download</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={downloadTooltip}>
-      <Button
-        bsSize="xsmall"
-        style={style}
-        onClick={downloadFile}
-      >
-        <i className="fa fa-download" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-DownloadBtn.propTypes = {
-  downloadFile: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const ShowHideBtn = ({
-  data, showReactions, showMolecules, hideItems
-}) => {
-  const { type, id, schemeCount } = data;
-  const children = data.children || [];
-
-  if (type === 'File') {
-    const noScheme = !schemeCount;
-    const hasNestedFile = children.length === 0 || (
-      children.length > 0 && children[0].type !== 'File'
-    );
-
-    if (noScheme && hasNestedFile) return <span />;
-  }
-
-  let tooltip;
-  let button;
-
-  if (data.show) {
-    button = (
-      <Button
-        bsSize="xsmall"
-        bsStyle="warning"
-        style={{ float: 'right', marginLeft: '5px', width: '35px' }}
-        onClick={hideItems}
-      >
-        <i className="fa fa-eye-slash" />
-      </Button>
-    );
-
-    tooltip = <Tooltip id="cs-hide-file">Hide</Tooltip>;
-  } else {
-    const ddId = `cs-show-${type}-${id}-dropdown`;
-
-    const title = <i className="fa fa-eye" />;
-
-    button = (
-      <div style={{ float: 'right', marginLeft: '5px', lineHeight: '0px' }}>
-        <DropdownButton
-          bsSize="xsmall"
-          bsStyle="info"
-          pullRight
-          id={ddId}
-          title={title}
-        >
-          <MenuItem eventKey="1" onClick={showReactions}>Show Reactions</MenuItem>
-          <MenuItem eventKey="2" onClick={showMolecules}>Show Molecules</MenuItem>
-        </DropdownButton>
-      </div>
-    );
-
-    tooltip = <Tooltip id="cs-show-file">Show</Tooltip>;
-  }
-
-  return (
-    <OverlayTrigger placement="top" overlay={tooltip}>
-      {button}
-    </OverlayTrigger>
-  );
-};
-
-ShowHideBtn.propTypes = {
-  showReactions: PropTypes.func.isRequired,
-  showMolecules: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired
-};
-
-const RescanBtn = ({ data, rescanFiles }) => {
-  const { type, parentId } = data;
-  let visibility = '';
-  if (type !== 'File' || parentId) visibility = 'hidden';
-
-  const rescanTooltip = <Tooltip id="cs-rescan-file">Rescan File</Tooltip>;
-
-  return (
-    <OverlayTrigger placement="top" overlay={rescanTooltip}>
-      <Button
-        bsSize="xsmall"
-        bsStyle="primary"
-        style={{ float: 'right', marginLeft: '5px', visibility }}
-        onClick={rescanFiles}
-      >
-        <i className="fa fa-refresh" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-RescanBtn.propTypes = {
-  rescanFiles: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-};
-
-class FileItemsActionsRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.showReactions = this.showReactions.bind(this);
-    this.showMolecules = this.showMolecules.bind(this);
-    this.hideItems = this.hideItems.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.downloadFile = this.downloadFile.bind(this);
-  }
-
-  rescanFiles() {
-    const { rescanFiles, data } = this.props;
-
-    rescanFiles([data.id]);
-  }
-
-  showReactions() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'reactions');
-  }
-
-  showMolecules() {
-    const { showItems, data } = this.props;
-    const { id, type } = data;
-
-    showItems([id], type, 'molecules');
-  }
-
-  hideItems() {
-    const { hideItems, data } = this.props;
-    const { id, type } = data;
-
-    hideItems([id], type);
-  }
-
-  deleteItems() {
-    const { deleteItems, data } = this.props;
-    const { id, type, version } = data;
-
-    deleteItems([id], type, version);
-  }
-
-  downloadFile() {
-    const { downloadFile, data } = this.props;
-    const { id } = data;
-
-    downloadFile(id).then(res => (
-      res.response.blob()
-    )).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = data.fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    });
-  }
-
-  render() {
-    const { version, data } = this.props;
-    const { type } = data;
-
-    if (type.startsWith('Item')) return <span />;
-
-    return (
-      <div style={{ marginTop: '1px' }}>
-        <DeleteBtn deleteItems={this.deleteItems} data={data} />
-        <ShowHideBtn
-          showReactions={this.showReactions}
-          showMolecules={this.showMolecules}
-          hideItems={this.hideItems}
-          data={data}
-        />
-        <DownloadBtn downloadFile={this.downloadFile} data={data} />
-        <RescanBtn
-          rescanFiles={this.rescanFiles}
-          version={version}
-          data={data}
-        />
-      </div>
-    );
-  }
-}
-
-FileItemsActionsRenderer.propTypes = {
-  version: PropTypes.string.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemsActionsRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js b/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
deleted file mode 100644
index b9f18c544..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemApproveFilter.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isApproved: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isApproved } = this.state;
-    let newValue;
-    if (isApproved === null) {
-      newValue = true;
-    } else if (isApproved) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isApproved: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isApproved === this.state.isApproved;
-  }
-
-  isFilterActive() {
-    return this.state.isApproved !== null;
-  }
-
-  render() {
-    const { isApproved } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-    if (isApproved === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isApproved) {
-      tooltipText = 'Show Approved';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Approved';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-approve--filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemApproveFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemApproveFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js b/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
deleted file mode 100644
index 2d19ad634..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemApproveRenderer.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemApproveRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.approveItem = this.approveItem.bind(this);
-  }
-
-  approveItem() {
-    const { approveItems, data } = this.props;
-    const { type, id, isApproved } = data;
-
-    const val = !(isApproved || false);
-    approveItems([id], type, val);
-  }
-
-  render() {
-    const { data } = this.props;
-    const { type, id, isApproved } = data;
-
-    if (type.startsWith('Item')) return <span />;
-    if (type === 'File' && !data.children) return <span />;
-
-    const tooltipId = `cs-approve-${type}-${id}-tooltip`;
-    const tooltip = <Tooltip id={tooltipId}>Approve</Tooltip>;
-
-    let bsStyle;
-    let icon;
-    if (isApproved) {
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      bsStyle = 'default';
-      icon = 'check-circle-o';
-    }
-
-    return (
-      <div style={{ marginTop: '-2px', paddingLeft: '15px' }}>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button bsSize="xsmall" bsStyle={bsStyle} onClick={this.approveItem}>
-            <i className={`fa fa-${icon}`} />
-          </Button>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-}
-
-FileItemApproveRenderer.propTypes = {
-  approveItems: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemApproveRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js b/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
deleted file mode 100644
index 57be6256e..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemFileNameFilter.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Form, ControlLabel, Button } from 'react-bootstrap';
-
-import _ from 'lodash';
-
-class FileItemFileNameFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '', showArchived: false };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.toggleArchived = this.toggleArchived.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    const { text, showArchived } = this.state;
-    return { text, showArchived };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    const showArchived = model ? model.showArchived : false;
-
-    this.setState({ text, showArchived });
-  }
-
-  toggleArchived() {
-    this.setState({ showArchived: !this.state.showArchived }, this.debouncedChangedCallback);
-  }
-
-  doesFilterPass(params) {
-    const { text, showArchived } = this.state;
-
-    let iter = params.node;
-    while (iter.level > 0) iter = iter.parent;
-
-    const { fileName, extendedMetadata } = iter.data;
-    const passText = fileName.includes(text);
-    let { archived } = extendedMetadata;
-    if (archived == null) archived = false;
-
-    // If showArchived, check passText
-    if (showArchived) return passText;
-
-    // Otherwise, archived items will not passed
-    return passText && !archived;
-  }
-
-  isFilterActive() { return true; }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    const { showArchived } = this.state;
-
-    let textArchive;
-    let icon;
-    if (showArchived) {
-      textArchive = 'Hide';
-      icon = (
-        <span className="fa-stack" style={{ fontSize: '0.63em' }}>
-          <i className="fa fa-archive fa-stack-1x" />
-          <i className="fa fa-ban fa-stack-2x text-danger" />
-        </span>
-      );
-    } else {
-      textArchive = 'Show';
-      icon = (<i className="fa fa-archive" />);
-    }
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper file-filter" style={{ margin: '4px 4px 1px 4px' }}>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '30px' }}>
-                  File Name
-                </ControlLabel>
-                <input
-                  ref={this.inputRef}
-                  value={this.state.text}
-                  onChange={this.onChange}
-                  style={{ width: '65%' }}
-                  className="ag-filter-filter"
-                  placeholder="Filter ..."
-                />
-              </Form>
-            </div>
-            <div style={{ display: 'contents' }}>
-              <Form inline style={{ margin: '4px 4px 1px 4px', width: '100%' }}>
-                <ControlLabel style={{ marginRight: '5px', width: '89px' }}>
-                  {textArchive} Archived
-                </ControlLabel>
-                <Button bsSize="xsmall" onClick={this.toggleArchived}>
-                  {icon}
-                </Button>
-              </Form>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemFileNameFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemFileNameFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js b/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
deleted file mode 100644
index 510a003ab..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemImportedFilter.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-class FileItemImportedFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isImported: null };
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const { isImported } = this.state;
-    let newValue;
-    if (isImported === null) {
-      newValue = true;
-    } else if (isImported) {
-      newValue = false;
-    } else {
-      newValue = null;
-    }
-
-    this.setState({ isImported: newValue }, this.props.filterChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.data.isImported === this.state.isImported;
-  }
-
-  isFilterActive() {
-    return this.state.isImported !== null;
-  }
-
-  render() {
-    const { isImported } = this.state;
-
-    let tooltipText;
-    let bsStyle;
-    let icon;
-    let style = {};
-
-    if (isImported === null) {
-      tooltipText = 'Show All';
-      bsStyle = 'default';
-      icon = 'check';
-      style = { color: '#ccc' };
-    } else if (isImported) {
-      tooltipText = 'Show Transferred';
-      bsStyle = 'success';
-      icon = 'check-circle';
-    } else {
-      tooltipText = 'Show Not Transferred';
-      bsStyle = 'warning';
-      icon = 'check-circle-o';
-    }
-
-    const tooltipId = 'cs-imported-filter-tooltip';
-    const tooltip = <Tooltip id={tooltipId}>{tooltipText}</Tooltip>;
-
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" style={{ width: '50px' }} >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <OverlayTrigger placement="top" overlay={tooltip} >
-              <Button
-                bsSize="xsmall"
-                bsStyle={bsStyle}
-                onClick={this.onChange}
-                style={style}
-              >
-                <i className={`fa fa-${icon}`} />
-              </Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemImportedFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemImportedFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js b/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
deleted file mode 100644
index f69f379b7..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemImportedRenderer.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const FileItemImportedRenderer = ({ data }) => {
-  const { type, isImported } = data;
-  if (type.endsWith('Summary')) return <span />;
-
-  let style;
-  let icon;
-
-  if (isImported) {
-    style = { color: '#5cb85c' };
-    icon = 'check-circle';
-  } else {
-    style = {};
-    icon = 'check-circle-o';
-  }
-
-  return (
-    <div style={{ paddingLeft: '30px' }}>
-      <i style={style} className={`fa fa-${icon}`} />
-    </div>
-  );
-};
-
-FileItemImportedRenderer.propTypes = {
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default FileItemImportedRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js b/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
deleted file mode 100644
index 89a766149..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemInformationEditor.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ControlLabel, FormControl, Panel, Radio } from 'react-bootstrap';
-
-import PreviewFileZoomPan from './PreviewFileZoomPan';
-
-const PreviewEditor = ({ imageData, fileName }) => {
-  if (!imageData) return <span />;
-
-  return (
-    <Panel style={{ marginBottom: '0px', minHeight: '400px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <PreviewFileZoomPan
-          imageURL={imageData}
-          duration={200}
-        />
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-PreviewEditor.propTypes = {
-  imageData: PropTypes.string,
-  fileName: PropTypes.string.isRequired,
-};
-
-PreviewEditor.defaultProps = {
-  imageData: '',
-};
-
-const InfoEditor = ({ fileName, data }) => {
-  const {
-    domain, type, format, doi
-  } = data;
-
-  return (
-    <Panel style={{ marginBottom: '0px' }}>
-      <Panel.Heading>{fileName}</Panel.Heading>
-      <Panel.Body>
-        <table className="cs-extended-metadata-table">
-          <tbody>
-            <tr>
-              <td style={{ width: '55px' }}>
-                <ControlLabel>Domain</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="organic"
-                  defaultChecked={domain === 'organic'}
-                >
-                  Organic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="inorganic"
-                  defaultChecked={domain === 'inorganic'}
-                >
-                  Inorganic
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="solidPhase"
-                  defaultChecked={domain === 'solidPhase'}
-                >
-                  Solid Phase
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="domainGroup"
-                  defaultValue="heteroCyclic"
-                  defaultChecked={domain === 'heteroCyclic'}
-                >
-                  Hetero cyclic
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Type</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="published"
-                  defaultChecked={type === 'published'}
-                >
-                  Published
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="typeGroup"
-                  defaultValue="unpublished"
-                  defaultChecked={type === 'unpublished'}
-                >
-                  Never published
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>Format</ControlLabel>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="supportingInformation"
-                  defaultChecked={format === 'supportingInformation'}
-                >
-                  Supporting Information
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="manuscript"
-                  defaultChecked={format === 'manuscript'}
-                >
-                  Manuscript
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="review"
-                  defaultChecked={format === 'review'}
-                >
-                  Review
-                </Radio>
-              </td>
-              <td>
-                <Radio
-                  name="formatGroup"
-                  defaultValue="report"
-                  defaultChecked={format === 'report'}
-                >
-                  Report
-                </Radio>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <ControlLabel>DOI</ControlLabel>
-              </td>
-              <td colSpan={4}>
-                <FormControl
-                  type="text"
-                  id="doi_info"
-                  defaultValue={doi || ''}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-InfoEditor.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  fileName: PropTypes.string.isRequired,
-};
-
-class FileItemInformationEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.containerRef = React.createRef();
-
-    this.focus = this.focus.bind(this);
-  }
-
-  componentDidMount() {
-    this.focus();
-  }
-
-  componentDidUpdate() {
-    this.focus();
-  }
-
-  componentWillUnmount() {
-    const { type, data } = this.props;
-
-    const extData = data.extendedMetadata || {};
-
-    let query = 'input[name="domainGroup"]:checked';
-    const domain = this.containerRef.current.querySelector(query);
-    if (domain) {
-      extData.domain = domain.value;
-    } else {
-      delete extData.domain;
-    }
-
-    query = 'input[name="typeGroup"]:checked';
-    const typeInfo = this.containerRef.current.querySelector(query);
-    if (typeInfo) {
-      extData.type = typeInfo.value;
-    } else {
-      delete extData.type;
-    }
-
-    query = 'input[name="formatGroup"]:checked';
-    const format = this.containerRef.current.querySelector(query);
-    if (format) {
-      extData.format = format.value;
-    } else {
-      delete extData.format;
-    }
-
-    const doi = this.containerRef.current.querySelector('#doi_info');
-    if (doi) {
-      extData.doi = doi.value;
-    } else {
-      delete extData.doi;
-    }
-
-    data.extendedMetadata = extData;
-    this.props.doneEditing(type, data);
-  }
-
-  getValue() {
-    return this.props.data.type;
-  }
-
-  focus() {
-    if (this.containerRef.current) this.containerRef.current.focus();
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  isPopup() {
-    return true;
-  }
-
-  render() {
-    const { data, type } = this.props;
-    const { fileName, imageData, extendedMetadata } = data;
-
-    let editor = <span />;
-    if (type === 'preview') {
-      editor = <PreviewEditor imageData={imageData} fileName={fileName} />;
-    } else if (type === 'info') {
-      editor = <InfoEditor data={extendedMetadata} fileName={fileName} />;
-    }
-
-    return (
-      <div ref={this.containerRef}>
-        {editor}
-      </div>
-    );
-  }
-}
-
-FileItemInformationEditor.propTypes = {
-  type: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-  doneEditing: PropTypes.func.isRequired
-};
-
-export default FileItemInformationEditor;
diff --git a/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js b/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
deleted file mode 100644
index dac058d0e..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemInformationRenderer.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
-
-class FileItemInformationRenderer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.getPreview = this.getPreview.bind(this);
-
-    this.setPreviewEdit = this.setPreviewEdit.bind(this);
-    this.setInfoEdit = this.setInfoEdit.bind(this);
-  }
-
-  getPreview() {
-    const { getPreview, node } = this.props;
-    const { id, type, schemeId } = node.data;
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    getPreview(itemId);
-  }
-
-  setPreviewEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const {
-      id, type, schemeId, imageData
-    } = node.data;
-
-    const itemId = type === 'Scheme' ? id : schemeId;
-    if (!itemId) return;
-
-    const shouldFetch = !imageData;
-    setEdit(rowIndex, itemId, shouldFetch, 'preview');
-  }
-
-  setInfoEdit() {
-    const { setEdit, rowIndex, node } = this.props;
-    const { id } = node.data;
-    if (!id) return;
-
-    setEdit(rowIndex, id, false, 'info');
-  }
-
-  render() {
-    const { node } = this.props;
-    const { extendedMetadata, type, schemeCount } = node.data;
-
-    let previewOverlayBtn = <span />;
-
-    if (type === 'Scheme' || (type === 'File' && schemeCount === 1)) {
-      previewOverlayBtn = (
-        <Button
-          bsSize="xsmall"
-          onClick={this.setPreviewEdit}
-          style={{ marginRight: '5px', width: '25px' }}
-        >
-          <i className="fa fa-picture-o" />
-        </Button>
-      );
-    }
-
-    let extendedInfo = <span />;
-    if (type === 'File' && node.data.children) {
-      extendedInfo = (
-        <Button
-          bsSize="xsmall"
-          bsStyle="info"
-          style={{ marginRight: '5px', width: '25px' }}
-          onClick={this.setInfoEdit}
-        >
-          <i className="fa fa-info-circle" />
-        </Button>
-      );
-    }
-
-    let warningOverlay = <span />;
-    if (extendedMetadata) {
-      const { warnings } = extendedMetadata;
-
-      if (warnings && warnings.length > 0) {
-        const popoverId = `${node.data.id}-${type}-warning-popover`;
-        const warningPopover = (
-          <Popover id={popoverId}>
-            <ul>
-              {/* eslint-disable-next-line react/no-array-index-key */}
-              {warnings.map((w, idx) => <li key={idx}>{w}</li>)}
-            </ul>
-          </Popover>
-        );
-
-        warningOverlay = (
-          <OverlayTrigger trigger="click" placement="left" overlay={warningPopover}>
-            <Button bsSize="xsmall" bsStyle="warning" style={{ width: '25px' }}>
-              <i className="fa fa-exclamation-circle" />
-            </Button>
-          </OverlayTrigger>
-        );
-      }
-    }
-
-    return (
-      <div style={{ marginTop: '-2px' }}>
-        {previewOverlayBtn}
-        {warningOverlay}
-        {extendedInfo}
-      </div>
-    );
-  }
-}
-
-FileItemInformationRenderer.propTypes = {
-  getPreview: PropTypes.func.isRequired,
-  setEdit: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-  rowIndex: PropTypes.number.isRequired
-};
-
-export default FileItemInformationRenderer;
diff --git a/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js b/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
deleted file mode 100644
index a110ffb7a..000000000
--- a/app/packs/src/components/chemscanner/components/FileItemVersionFilter.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import _ from 'lodash';
-
-class FileItemVersionFilter extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { text: '' };
-
-    this.inputRef = React.createRef();
-
-    this.valueGetter = props.valueGetter;
-    this.onChange = this.onChange.bind(this);
-    this.debouncedChangedCallback = _.debounce(props.filterChangedCallback.bind(this), 300);
-  }
-
-  onChange(event) {
-    const newValue = event.target.value;
-    if (this.state.text === newValue) return;
-
-    this.setState({ text: newValue }, this.debouncedChangedCallback);
-  }
-
-  getModel() {
-    return { value: this.state.text };
-  }
-
-  setModel(model) {
-    const text = model ? model.value : '';
-    this.setState({ text });
-  }
-
-  doesFilterPass(params) {
-    return params.node.data.version === this.state.text;
-  }
-
-  isFilterActive() {
-    return this.state.text;
-  }
-
-  afterGuiAttached() {
-    this.inputRef.current.focus();
-  }
-
-  render() {
-    return (
-      <div className="ag-filter-body-wrapper">
-        <div className="ag-filter-body" >
-          <div className="ag-input-wrapper" style={{ margin: '4px 4px 1px 4px' }}>
-            <input
-              ref={this.inputRef}
-              value={this.state.text}
-              onChange={this.onChange}
-              className="ag-filter-filter"
-              placeholder="Filter ..."
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FileItemVersionFilter.propTypes = {
-  valueGetter: PropTypes.func.isRequired,
-  filterChangedCallback: PropTypes.func.isRequired,
-};
-
-export default FileItemVersionFilter;
diff --git a/app/packs/src/components/chemscanner/components/FileStorage.js b/app/packs/src/components/chemscanner/components/FileStorage.js
deleted file mode 100644
index fe15715ad..000000000
--- a/app/packs/src/components/chemscanner/components/FileStorage.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-
-import FileItemActionsHeader from './FileItemActionsHeader';
-
-import FileItemActionsRenderer from './FileItemActionsRenderer';
-import FileItemApproveRenderer from './FileItemApproveRenderer';
-import FileItemImportedRenderer from './FileItemImportedRenderer';
-import FileItemInformationRenderer from './FileItemInformationRenderer';
-
-import FileItemApproveFilter from './FileItemApproveFilter';
-import FileItemImportedFilter from './FileItemImportedFilter';
-import FileItemVersionFilter from './FileItemVersionFilter';
-import FileItemFileNameFilter from './FileItemFileNameFilter';
-
-import FileItemInformationEditor from './FileItemInformationEditor';
-
-import {
-  buildRowData,
-  versionGetter,
-  fileNameGetter,
-  getNodeChildDetails,
-} from './fileStorageUtils';
-
-export default class FileStorage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      editing: false,
-      editingType: null,
-      rowIndex: -1,
-    };
-
-    this.uploadInput = React.createRef();
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.rescanFiles = this.rescanFiles.bind(this);
-    this.deleteItems = this.deleteItems.bind(this);
-    this.beilsteinExport = this.beilsteinExport.bind(this);
-    this.showSelectedItems = this.showSelectedItems.bind(this);
-    this.openImportModal = this.openImportModal.bind(this);
-
-    this.setInformationEditing = this.setInformationEditing.bind(this);
-    this.doneEditing = this.doneEditing.bind(this);
-    this.toggleExpand = this.toggleExpand.bind(this);
-
-    this.setArchived = this.setArchived.bind(this);
-    this.unsetArchived = this.unsetArchived.bind(this);
-
-    this.columnDefs = [
-      {
-        headerName: 'File',
-        field: 'file',
-        filterFramework: FileItemFileNameFilter,
-        width: 250,
-        valueGetter: fileNameGetter,
-        headerCheckboxSelection: true,
-        headerCheckboxSelectionFilteredOnly: true,
-        cellRenderer: 'agGroupCellRenderer',
-        cellRendererParams: {
-          suppressCount: true,
-          checkbox: params => ['File', 'Scheme'].includes(params.data.type),
-        }
-      },
-      {
-        headerName: 'Created At',
-        width: 125,
-        suppressSizeToFit: true,
-        sortable: true,
-        field: 'createdAt'
-      },
-      {
-        headerName: 'Version',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemVersionFilter,
-        valueGetter: versionGetter,
-      },
-      {
-        headerName: 'Approved',
-        width: 100,
-        suppressSizeToFit: true,
-        filterFramework: FileItemApproveFilter,
-        cellRendererFramework: FileItemApproveRenderer,
-        cellRendererParams: { approveItems: props.approveItems },
-        field: 'isApproved'
-      },
-      {
-        headerName: 'Transferred',
-        width: 110,
-        suppressSizeToFit: true,
-        filterFramework: FileItemImportedFilter,
-        cellRendererFramework: FileItemImportedRenderer,
-        field: 'isImported'
-      },
-      {
-        headerName: 'Information',
-        field: 'information',
-        width: 115,
-        suppressSizeToFit: true,
-        cellRendererFramework: FileItemInformationRenderer,
-        editable: true,
-        cellEditorFramework: FileItemInformationEditor,
-        cellEditorParams: () => ({
-          type: this.state.editingType,
-          doneEditing: this.doneEditing,
-        }),
-        cellRendererParams: {
-          getPreview: props.getPreview,
-          setEdit: this.setInformationEditing,
-        },
-      },
-      {
-        headerName: '',
-        field: '',
-        width: 250,
-        filter: false,
-        headerClass: 'chemscanner-filestorage-action-header',
-        headerComponentFramework: FileItemActionsHeader,
-        headerComponentParams: {
-          uploadInput: this.uploadInput,
-          rescanFiles: this.rescanFiles,
-          deleteItems: this.deleteItems,
-          beilsteinExport: this.beilsteinExport,
-          showSelectedItems: this.showSelectedItems,
-          openImportModal: this.openImportModal,
-          setArchived: this.setArchived,
-          unsetArchived: this.unsetArchived
-        },
-        cellClass: 'chemscanner-filestorage-action-row',
-        cellRendererFramework: FileItemActionsRenderer,
-        cellRendererParams: {
-          version: props.version,
-          showItems: props.showItems,
-          rescanFiles: props.rescanFiles,
-          hideItems: props.hideItems,
-          downloadFile: props.downloadFile,
-          deleteItems: props.deleteItems
-        },
-      }
-    ];
-  }
-
-  componentDidUpdate() {
-    if (!this.gridApi || !this.gridColumnApi) return;
-
-    this.gridApi.sizeColumnsToFit();
-
-    const { rowIndex, editing } = this.state;
-    if (!editing) return;
-
-    this.gridApi.startEditingCell({ rowIndex, colKey: 'information' });
-  }
-
-  onGridReady(params) {
-    this.gridApi = params.api;
-    this.gridColumnApi = params.columnApi;
-
-    params.api.sizeColumnsToFit();
-
-    // Must get the filter in order to trigger the filterChangedCallback
-    const fileFilter = this.gridApi.getFilterInstance('file');
-    if (!fileFilter) return;
-    this.gridApi.onFilterChanged();
-  }
-
-  setInformationEditing(rowIndex, itemId, shouldFetch, type) {
-    if (!this.gridApi) return;
-
-    const getPreview = () => this.props.getPreview(itemId);
-
-    if (shouldFetch) {
-      this.setState({ editing: true, editingType: type, rowIndex }, getPreview);
-    } else {
-      this.setState({ editing: true, editingType: type, rowIndex });
-    }
-  }
-
-  setArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, true);
-  }
-
-  unsetArchived() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.setArchivedValue(fileIds, false);
-  }
-
-  rescanFiles() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const fileIds = selected.filter(s => s.type === 'File').map(s => s.id);
-    this.props.rescanFiles(fileIds);
-  }
-
-  deleteItems() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    ['File', 'Scheme'].forEach((type) => {
-      const selectedItems = selected.filter(i => i.type === type);
-
-      const versionMap = {};
-      selectedItems.forEach((item) => {
-        const { id } = item;
-        const version = item.version || '';
-        const arr = versionMap[version];
-
-        if (arr) {
-          arr.push(id);
-        } else {
-          versionMap[version] = [id];
-        }
-      });
-
-      Object.keys(versionMap).forEach((version) => {
-        const ids = versionMap[version];
-        if (ids.length === 0) return;
-
-        this.props.deleteItems(ids, type, version);
-      });
-    });
-  }
-
-  beilsteinExport() {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const selectedItems = selected.filter(i => i.type === 'File' && !i.parentId);
-
-    this.props.beilsteinExport(selectedItems.map(s => s.id));
-  }
-
-  showSelectedItems(showType) {
-    if (!this.gridApi) return;
-
-    const selected = this.gridApi.getSelectedRows();
-    const ids = [];
-    selected.forEach((item) => {
-      const { type, schemeId, id } = item;
-      if (type === 'File' && schemeId) {
-        ids.push(item.schemeId);
-      } else if (type === 'Scheme') {
-        ids.push(id);
-      }
-    });
-
-    this.props.showItems(ids, 'Scheme', showType);
-  }
-
-  openImportModal() {
-    if (!this.gridApi) return;
-
-    const selectedRows = this.gridApi.getSelectedRows();
-    const files = selectedRows.filter(r => r.type === 'File');
-    const schemes = selectedRows.filter(r => r.type === 'Scheme');
-
-    this.props.openImportModal(files.concat(schemes));
-  }
-
-  doneEditing(editingType, data) {
-    if (editingType !== 'info') return;
-
-    const { id, type, extendedMetadata } = data;
-
-    this.setState({
-      editing: false, editingType: null, rowIndex: -1
-    }, () => this.props.updateMetadata(id, type, extendedMetadata));
-  }
-
-  toggleExpand(e) {
-    this.props.toggleExpand(e.data);
-  }
-
-  render() {
-    const {
-      files, schemes, reactions, molecules, uploadToStore
-    } = this.props;
-
-    const rowData = buildRowData(files, schemes, reactions, molecules);
-
-    const uploadFileToStore = (e) => {
-      uploadToStore(e.target.files);
-      this.uploadInput.current.value = '';
-    };
-
-    return (
-      <div style={{ margin: '20px 15px 0px 10px' }}>
-        <input
-          type="file"
-          multiple="multiple"
-          style={{ display: 'none' }}
-          ref={this.uploadInput}
-          onChange={uploadFileToStore}
-        />
-        <div className="ag-theme-balham" style={{ height: 'calc(100vh - 120px)' }}>
-          <AgGridReact
-            id="fileStorageGrid"
-            columnDefs={this.columnDefs}
-            rowData={rowData}
-            enableGroupEdit
-            groupSelectsFiltered
-            onRowGroupOpened={this.toggleExpand}
-            pagination
-            paginationAutoPageSize
-            paginateChildRows
-            rowSelection="multiple"
-            suppressRowClickSelection
-            getNodeChildDetails={getNodeChildDetails}
-            onGridReady={this.onGridReady}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-FileStorage.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-  reactions: PropTypes.instanceOf(List).isRequired,
-  molecules: PropTypes.instanceOf(List).isRequired,
-  version: PropTypes.string,
-  approveItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func.isRequired,
-  beilsteinExport: PropTypes.func.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  hideItems: PropTypes.func.isRequired,
-  getPreview: PropTypes.func.isRequired,
-  rescanFiles: PropTypes.func.isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-  showItems: PropTypes.func.isRequired,
-  openImportModal: PropTypes.func.isRequired,
-  updateMetadata: PropTypes.func.isRequired,
-  uploadToStore: PropTypes.func.isRequired,
-  toggleExpand: PropTypes.func.isRequired,
-};
-
-FileStorage.defaultProps = {
-  version: ''
-};
diff --git a/app/packs/src/components/chemscanner/components/HeaderMenu.js b/app/packs/src/components/chemscanner/components/HeaderMenu.js
deleted file mode 100644
index 338f89464..000000000
--- a/app/packs/src/components/chemscanner/components/HeaderMenu.js
+++ /dev/null
@@ -1,447 +0,0 @@
-import { List } from 'immutable';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import 'whatwg-fetch';
-import XLSX from 'xlsx';
-
-import {
-  ButtonGroup,
-  Button,
-  DropdownButton,
-  MenuItem,
-  OverlayTrigger
-} from 'react-bootstrap';
-
-import { catalyst } from 'src/components/staticDropdownOptions/reagents/catalyst';
-import { chiralAuxiliaries } from 'src/components/staticDropdownOptions/reagents/chiral_auxiliaries';
-import { couplingReagents } from 'src/components/staticDropdownOptions/reagents/coupling_reagents';
-import { fluorination } from 'src/components/staticDropdownOptions/reagents/fluorination';
-import { halogenationBrClI } from 'src/components/staticDropdownOptions/reagents/halogenation_BrClI';
-import { ionicLiquids } from 'src/components/staticDropdownOptions/reagents/ionic_liquids';
-import { lewisAcids } from 'src/components/staticDropdownOptions/reagents/lewis_acids';
-import { ligands } from 'src/components/staticDropdownOptions/reagents/ligands';
-import { metallorganics } from 'src/components/staticDropdownOptions/reagents/metallorganics';
-import { orgBases } from 'src/components/staticDropdownOptions/reagents/org_bases';
-import { organoboron } from 'src/components/staticDropdownOptions/reagents/organoboron';
-import { organocatalysts } from 'src/components/staticDropdownOptions/reagents/organocatalysts';
-import { oxidation } from 'src/components/staticDropdownOptions/reagents/oxidation';
-import { phaseTransferReagents } from 'src/components/staticDropdownOptions/reagents/phase_transfer_reagents';
-import { reducingReagents } from 'src/components/staticDropdownOptions/reagents/reducing_reagents';
-import { solvents } from 'src/components/staticDropdownOptions/reagents/solvents';
-
-import SmiSelect from 'src/apps/chemscanner/components/SmiSelect';
-import HelpPopover from 'src/apps/chemscanner/components/HelpPopover';
-
-import NotificationContainer from 'src/apps/chemscanner/containers/NotificationContainer';
-
-import {
-  extractMoleculeFromGroup,
-  generateExcelMoleculeRow,
-  generateExcelReactionRow
-} from 'src/apps/chemscanner/utils';
-
-import {
-  getSchemeMolecules,
-  getReactionReagents,
-  getReactionGroups
-} from '../reactionUtils';
-
-import {
-  getSchemeMolecules,
-  getReactionReagents,
-  getReactionGroups
-} from '../reactionUtils';
-
-const SUPPORTED_FILE_TYPES = ['cdx', 'cdxml', 'doc', 'docx', 'xml', 'zip'];
-
-const allReagents = Object.assign(
-  {}, ionicLiquids, catalyst, ligands,
-  chiralAuxiliaries, couplingReagents, halogenationBrClI, fluorination,
-  orgBases, lewisAcids, organocatalysts, organoboron, metallorganics,
-  oxidation, reducingReagents, phaseTransferReagents
-);
-
-const supportTypes = (files) => {
-  let support = true;
-
-  for (let i = 0; i < files.length; i += 1) {
-    const file = files[i];
-    const extension = file.name.split('.').pop();
-
-    if (!SUPPORTED_FILE_TYPES.includes(extension)) support = false;
-  }
-
-  return support;
-};
-
-export default class HeaderMenu extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      disabled: true,
-      selectedReactionId: 0,
-      selectedSolvents: [],
-      selectedReagents: []
-    };
-
-    this.clickUploadMolecule = this.clickUploadMolecule.bind(this);
-    this.clickUploadReaction = this.clickUploadReaction.bind(this);
-
-    this.scanFilesForMolecules = this.scanFilesForMolecules.bind(this);
-    this.scanFilesForReactions = this.scanFilesForReactions.bind(this);
-    this.updateReagents = this.updateReagents.bind(this);
-
-    this.exportCml = this.exportCml.bind(this);
-    this.exportExcel = this.exportExcel.bind(this);
-
-    this.changeScannedFileView = this.changeScannedFileView.bind(this);
-    this.changeAbbreviationView = this.changeAbbreviationView.bind(this);
-    this.changeFileStorageView = this.changeFileStorageView.bind(this);
-    this.changeArchivedManagementView = this.changeArchivedManagementView.bind(this);
-
-    this.solventValues = Object.keys(solvents).map(k => solvents[k]);
-    this.allReagentValues = Object.keys(allReagents).map(k => allReagents[k]);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { reactions, molecules } = nextProps;
-
-    let rId = this.state.selectedReactionId;
-    const selectedR = reactions.filter(r => r.get('selected'));
-    const disabled = selectedR.size !== 1 || !selectedR.get(0).get('id');
-
-    const selectedReagents = [];
-    const selectedSolvents = [];
-
-    if (!disabled && selectedR.size === 1) {
-      const reaction = selectedR.get(0);
-      rId = reaction.get('id');
-      const reactionMolecules = getSchemeMolecules(reaction, molecules);
-      const reagents = getReactionReagents(reaction, reactionMolecules);
-
-      reagents.forEach((m) => {
-        const canoSmiles = m.get('canoSmiles');
-
-        if (this.solventValues.includes(canoSmiles)) {
-          selectedSolvents.push(canoSmiles);
-        } else if (this.allReagentValues.includes(canoSmiles)) {
-          selectedReagents.push(canoSmiles);
-        }
-      });
-    }
-
-    this.setState({
-      selectedReactionId: rId,
-      selectedSolvents,
-      selectedReagents,
-      disabled
-    });
-  }
-
-  exportCml() {
-    const { reactions, molecules } = this.props;
-
-    let selectedR = reactions.filter(r => r.get('selected'));
-    let selectedM = molecules.filter(r => r.get('selected'));
-    if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
-    }
-
-    const simpleReactions = selectedR.map((r) => {
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(r, molecules);
-
-      return {
-        id: r.get('id'),
-        reactants: extractMoleculeFromGroup(reactants.toJS()),
-        reagents: extractMoleculeFromGroup(reagents.toJS()),
-        solvents: extractMoleculeFromGroup(solvents.toJS()),
-        products: extractMoleculeFromGroup(products.toJS()),
-        yield: r.get('yield') || '',
-        time: r.get('time') || '',
-        temperature: r.get('temperature') || '',
-        description: r.get('description') || ''
-      };
-    });
-
-    const simpleMolecules = selectedM.toJS().map(m => ({
-      id: m.id,
-      mdl: m.mdl,
-    }));
-
-    fetch('/api/v1/public_chemscanner/export/cml', {
-      credentials: 'same-origin',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method: 'post',
-      body: JSON.stringify({ reactions: simpleReactions, molecules: simpleMolecules })
-    }).then((response) => {
-      if (response.ok === false) return null;
-
-      return response.json();
-    }).then((res) => {
-      if (!res) return;
-
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      ['reactions', 'molecules'].forEach((group) => {
-        const url = window.URL.createObjectURL(new Blob([res[group]]));
-        a.href = url;
-        a.download = `chemscanner_${group}.cml`;
-        a.click();
-        window.URL.revokeObjectURL(url);
-      });
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  exportExcel() {
-    const { reactions, molecules } = this.props;
-    let selectedR = reactions.filter(r => r.get('selected'));
-    let selectedM = molecules.filter(r => r.get('selected'));
-    if (selectedR.size === 0 && selectedM.size === 0) {
-      selectedR = reactions.filter(r => r.get('externalId'));
-      selectedM = molecules.filter(m => m.get('externalId'));
-    }
-
-    const wb = {};
-    wb.SheetNames = [];
-    wb.Sheets = {};
-
-    const moleculeSheet = 'Molecules';
-    const moleculeRows = selectedM.toJS().reduce((rows, mol) => {
-      rows.push(generateExcelMoleculeRow(mol));
-      return rows;
-    }, [['Smiles', 'MDL', 'InChI', 'InChIKey', 'Description']]);
-    const moleculeWs = XLSX.utils.aoa_to_sheet(moleculeRows);
-    wb.SheetNames.push(moleculeSheet);
-    wb.Sheets[moleculeSheet] = moleculeWs;
-
-    const reactionSheet = 'Reactions';
-    const reactionRows = selectedR.reduce((rows, immuReaction) => {
-      const reaction = immuReaction.toJS();
-
-      const {
-        reactants, reagents, solvents, products
-      } = getReactionGroups(immuReaction, molecules);
-
-      reaction.reactants = reactants;
-      reaction.reagents = reagents;
-      reaction.solvents = solvents;
-      reaction.products = products;
-
-      rows.push(generateExcelReactionRow(reaction));
-
-      return rows;
-    }, [[
-      'ReactionSmiles', 'Temperature', 'Yield', 'Time',
-      'Reaction Description', 'Reaction Steps',
-      'Reactants SDF', 'Reagents SDF', 'Products SDF',
-      'Reactants Description', 'Products Description',
-    ]]);
-    const reactionWs = XLSX.utils.aoa_to_sheet(reactionRows);
-    wb.SheetNames.push(reactionSheet);
-    wb.Sheets[reactionSheet] = reactionWs;
-
-    XLSX.writeFile(wb, 'chemscanner.xlsx', { bookSST: true });
-  }
-
-  scanFilesForMolecules() {
-    const { showNotification, scanFile } = this.props;
-    const { files } = this.molInput;
-
-    if (supportTypes(files)) {
-      scanFile(Array.from(files), true);
-    } else {
-      const fileTypes = SUPPORTED_FILE_TYPES.join(', ').toUpperCase();
-      const notification = `Supported types: ${fileTypes}`;
-
-      showNotification(notification);
-    }
-
-    this.molInput.value = '';
-  }
-
-  scanFilesForReactions() {
-    const { showNotification, scanFile } = this.props;
-    const { files } = this.reactionInput;
-
-    if (supportTypes(files)) {
-      scanFile(Array.from(files), false);
-    } else {
-      const fileTypes = SUPPORTED_FILE_TYPES.join(', ').toUpperCase();
-      const notification = `Supported types: ${fileTypes}`;
-
-      showNotification(notification);
-    }
-
-    this.reactionInput.value = '';
-  }
-
-  updateReagents({ value, type }) {
-    const { updateReagents } = this.props;
-    const { selectedReactionId } = this.state;
-
-    const newSmiles = value.split(',');
-    const selectedType = `selected${type[0].toUpperCase()}${type.substring(1)}`;
-    const selectedSmiles = this.state[selectedType];
-
-    const removedSmiles = selectedSmiles.filter(smi => !newSmiles.includes(smi));
-    const addedSmiles = newSmiles.filter(smi => !selectedSmiles.includes(smi));
-
-    const updateInfo = { add: addedSmiles, remove: removedSmiles };
-    updateReagents(selectedReactionId, updateInfo);
-  }
-
-  clickUploadMolecule() {
-    this.molInput.click();
-    document.getElementById('chemscanner-scan-file-dd').click();
-  }
-
-  clickUploadReaction() {
-    this.reactionInput.click();
-    document.getElementById('chemscanner-scan-file-dd').click();
-  }
-
-  changeScannedFileView() {
-    this.props.changeScannedFileView();
-  }
-
-  changeAbbreviationView() {
-    this.props.changeAbbreviationView();
-  }
-
-  changeFileStorageView() {
-    this.props.changeFileStorageView();
-  }
-
-  changeArchivedManagementView() {
-    this.props.changeArchivedManagementView();
-  }
-
-  render() {
-    const { cleanUp } = this.props;
-    const { disabled, selectedReagents, selectedSolvents } = this.state;
-
-    const helpPopover = <HelpPopover style={{ maxWidth: '800px' }} />;
-
-    return (
-      <div className="chemscanner-menu">
-        <OverlayTrigger
-          trigger="click"
-          placement="left"
-          rootClose
-          overlay={helpPopover}
-        >
-          <Button style={{ position: 'absolute', right: '35px', top: '10px' }}>
-            <i className="fa fa-question-circle" />
-          </Button>
-        </OverlayTrigger>
-        <NotificationContainer />
-        <input
-          type="file"
-          multiple="multiple"
-          style={{ display: 'none' }}
-          ref={(molInput) => { this.molInput = molInput; }}
-          onChange={this.scanFilesForMolecules}
-        />
-        <input
-          type="file"
-          multiple="multiple"
-          style={{ display: 'none' }}
-          ref={(reactionInput) => { this.reactionInput = reactionInput; }}
-          onChange={this.scanFilesForReactions}
-        />
-        <ButtonGroup>
-          <DropdownButton
-            title="Scan File"
-            id="chemscanner-scan-file-dd"
-          >
-            <MenuItem className="chemscanner-menu-item" onSelect={this.clickUploadReaction}>
-              Scan for reactions
-            </MenuItem>
-            <MenuItem className="chemscanner-menu-item" onSelect={this.clickUploadMolecule}>
-              Scan for molecules
-            </MenuItem>
-          </DropdownButton>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button onClick={cleanUp}>Clean Up</Button>
-        </ButtonGroup>
-        <div style={{ width: '160px' }}>
-          <SmiSelect
-            disabled={disabled}
-            obj={solvents}
-            type="solvents"
-            value={selectedSolvents}
-            onSelect={this.updateReagents}
-          />
-        </div>
-        <div style={{ width: '200px' }}>
-          <SmiSelect
-            disabled={disabled}
-            obj={allReagents}
-            onSelect={this.updateReagents}
-            value={selectedReagents}
-            type="reagents"
-            optionHeight={80}
-          />
-        </div>
-        <ButtonGroup style={{ marginRight: '5px' }}>
-          <DropdownButton title="Export" id="chemscanner-export-dd">
-            <MenuItem eventKey="1" onSelect={this.exportCml}>CML</MenuItem>
-            <MenuItem eventKey="2" onSelect={this.exportExcel}>Excel</MenuItem>
-          </DropdownButton>
-        </ButtonGroup>
-        <ButtonGroup>
-          <DropdownButton title="View" id="chemscanner-export-dd">
-            <MenuItem
-              eventKey="1"
-              onSelect={this.changeScannedFileView}
-            >
-              Scanned Files
-            </MenuItem>
-            <MenuItem
-              eventKey="2"
-              onSelect={this.changeAbbreviationView}
-            >
-              Abbreviation/Superatom
-            </MenuItem>
-            <MenuItem
-              eventKey="3"
-              onSelect={this.changeFileStorageView}
-            >
-              File Storage
-            </MenuItem>
-            <MenuItem
-              eventKey="4"
-              onSelect={this.changeArchivedManagementView}
-            >
-              Archived Management
-            </MenuItem>
-          </DropdownButton>
-        </ButtonGroup>
-      </div>
-    );
-  }
-}
-
-HeaderMenu.propTypes = {
-  reactions: PropTypes.instanceOf(List).isRequired,
-  molecules: PropTypes.instanceOf(List).isRequired,
-  scanFile: PropTypes.func.isRequired,
-  showNotification: PropTypes.func.isRequired,
-  cleanUp: PropTypes.func.isRequired,
-  changeScannedFileView: PropTypes.func.isRequired,
-  changeAbbreviationView: PropTypes.func.isRequired,
-  changeFileStorageView: PropTypes.func.isRequired,
-  changeArchivedManagementView: PropTypes.func.isRequired,
-  updateReagents: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/HelpPopover.js b/app/packs/src/components/chemscanner/components/HelpPopover.js
deleted file mode 100644
index 2075d9746..000000000
--- a/app/packs/src/components/chemscanner/components/HelpPopover.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Popover } from 'react-bootstrap';
-
-const HelpPopover = props => (
-  <Popover id="chemscanner-help-popover" title="How to Use" {...props} >
-    <strong>Scan File</strong>
-    <p>
-      Retrieve reaction(s)/molecule(s) from file(s).
-      Current support file types: CDX, CDXML, DOC, DOCX, ZIP.
-    </p>
-    <strong>Clean Up</strong>
-    <p>
-      Clean up molecule(s) structure.
-      All structures will be cleaned up if no molecule(s)/reaction(s) are selected.
-    </p>
-    <strong>Export</strong>
-    <p>
-      Export selected elements to CML or Excel.
-      All elements will be exported if none are selected.
-    </p>
-    <strong>Add solvents/reagents <i><b>(Only for logged-in users)</b></i></strong>
-    <p>
-      Solvents/Reagents from the list will be added to the selected reaction(s).
-    </p>
-    <strong>View</strong>
-    <p>
-      Switching View between abbreviations/superatoms management,
-      uploaded file storage management and scanned elements.
-    </p>
-    <ul>
-      <li><b>Scanned Files:</b> View scanned molecules/reactions</li>
-      <li>
-        <b>Abbreviation/Superatom:</b> Abbreviations and superatoms management.
-        <b> Only logged-in users can edit</b>
-      </li>
-      <li>
-        <b>File Storage:</b> Uploaded files, scanned files management.
-        <b> Only for logged-in users</b>
-      </li>
-    </ul>
-  </Popover>
-);
-
-export default HelpPopover;
diff --git a/app/packs/src/components/chemscanner/components/ImportModal.js b/app/packs/src/components/chemscanner/components/ImportModal.js
deleted file mode 100644
index 02afc7054..000000000
--- a/app/packs/src/components/chemscanner/components/ImportModal.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, ControlLabel,
-  FormControl, FormGroup, Modal
-} from 'react-bootstrap';
-
-import TreeSelect from 'antd/lib/tree-select';
-
-export default class ImportModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      newLabel: null,
-      options: [],
-      selected: null,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleImport = this.handleImport.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchCollections().then((res) => {
-      this.setState({ options: res.all_as_tree });
-    });
-  }
-
-  onSelectChange(id) {
-    this.setState({ selected: id });
-  }
-
-  onChange(e) {
-    if (!e.target) return;
-
-    this.setState({ newLabel: e.target.value });
-  }
-
-  handleImport() {
-    const { selectedItems, closeModal, importData } = this.props;
-    const { selected, newLabel } = this.state;
-
-    closeModal();
-
-    const data = selectedItems.map(item => ({ id: item.id, type: item.type }));
-    const collection = { id: selected, newCollection: newLabel };
-    importData(data, collection);
-  }
-
-  render() {
-    const { show, selectedItems, closeModal } = this.props;
-
-    const showModal = show && selectedItems.length > 0;
-
-    const { options, newLabel, selected } = this.state;
-
-    const btnText = newLabel ? (
-      `Create collection "${newLabel}" and Import`
-    ) : (
-      'Import'
-    );
-
-    return (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <Modal.Title>Import to Collection</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup>
-            <ControlLabel>Select a Collection</ControlLabel>
-            <TreeSelect
-              treeData={options}
-              value={selected}
-              onChange={this.onSelectChange}
-              style={{ width: '100%' }}
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>or Create a new Collection</ControlLabel>
-            <FormControl
-              type="text"
-              placeholder="-- Please insert collection name --"
-              onChange={this.onChange}
-            />
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={closeModal}>Close</Button>
-          <Button
-            bsStyle="warning"
-            style={{ float: 'left' }}
-            onClick={this.handleImport}
-            disabled={!(newLabel || selected)}
-          >
-            {btnText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-ImportModal.propTypes = {
-  show: PropTypes.bool,
-  selectedItems: PropTypes.arrayOf(PropTypes.object),
-  fetchCollections: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  importData: PropTypes.func.isRequired,
-};
-
-ImportModal.defaultProps = {
-  show: false,
-  selectedItems: []
-};
diff --git a/app/packs/src/components/chemscanner/components/LoadingModal.js b/app/packs/src/components/chemscanner/components/LoadingModal.js
deleted file mode 100644
index 760a1470f..000000000
--- a/app/packs/src/components/chemscanner/components/LoadingModal.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-
-const LoadingModal = ({ loading }) => (
-  <Modal className="loading-modal" animation show={loading}>
-    <i className="fa fa-refresh fa-spin fa-3x fa-fw" />
-  </Modal>
-);
-
-LoadingModal.propTypes = {
-  loading: PropTypes.bool,
-};
-
-LoadingModal.defaultProps = {
-  loading: false
-};
-
-export default LoadingModal;
diff --git a/app/packs/src/components/chemscanner/components/MainContent.js b/app/packs/src/components/chemscanner/components/MainContent.js
deleted file mode 100644
index b6827ce36..000000000
--- a/app/packs/src/components/chemscanner/components/MainContent.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {
-  Badge,
-  PanelGroup,
-  Panel
-} from 'react-bootstrap';
-
-import PreviewFileZoomPan from './PreviewFileZoomPan';
-import ScannedItemsContainer from '../containers/ScannedItemsContainer';
-import StructureEditorModal from '../../structure_editor/StructureEditorModal';
-
-import DeleteBtn from './DeleteBtn';
-
-const groupListByVersion = (list) => {
-  const hash = {};
-
-  list.forEach((el) => {
-    const version = el.get('version');
-    const val = hash[version] || [];
-    val.push(el);
-    hash[version] = val;
-  });
-
-  return Object.keys(hash).map(k => hash[k]);
-};
-
-const FileContent = ({ schemes, modal }) => (
-  <React.Fragment>
-    {schemes.map((scheme) => {
-      const uid = scheme.get('fileUuid');
-      const idx = scheme.get('index');
-      const imageURL = scheme.get('imageData');
-
-      const display = scheme.get('display');
-      if (!display) return <span key={`${uid}-${idx}`} />;
-
-      const objectQuery = display.substring(0, display.length - 1);
-      const extIds = scheme.get(`${objectQuery}ExtIds`).filter(i => i);
-
-      return (
-        <div key={`${uid}-${idx}`} id={`chemscanner-content-file-${uid}-${idx}`}>
-          <PreviewFileZoomPan
-            imageURL={imageURL}
-            duration={200}
-          />
-          <ScannedItemsContainer
-            schemeIdx={idx}
-            fileUid={uid}
-            extIds={extIds}
-            display={display}
-            modal={modal}
-          />
-        </div>
-      );
-    })}
-  </React.Fragment>
-);
-
-FileContent.propTypes = {
-  schemes: PropTypes.instanceOf(Array).isRequired,
-  modal: PropTypes.string.isRequired,
-};
-
-const MainContent = (props) => {
-  const {
-    files, schemes, reactions, molecules, modal, removeFile,
-    editingMoleculeId, saveMoleculeMdl, closeEditorModal
-  } = props;
-
-  const displayFile = files.filter((file) => {
-    const uid = file.get('uuid');
-
-    const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
-    const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
-
-    return fileReactions.size > 0 || fileMolecules.size > 0;
-  });
-
-  let mdl;
-  let showStructureEditor = !!editingMoleculeId;
-  if (showStructureEditor) {
-    const mIdx = molecules.findIndex(m => m.get('id') === editingMoleculeId);
-    if (mIdx === -1) {
-      showStructureEditor = false;
-    } else {
-      mdl = molecules.get(mIdx).get('mdl');
-    }
-  }
-  const structureEditor = (
-    <StructureEditorModal
-      showModal={showStructureEditor}
-      onSave={saveMoleculeMdl}
-      onCancel={closeEditorModal}
-      molfile={mdl}
-    />
-  );
-
-  if (displayFile.size === 0) return (<div>{structureEditor}</div>);
-
-  return (
-    <PanelGroup
-      defaultActiveKey="0"
-      className="chemscanner-files-list"
-      id="chemscanner-files-list"
-    >
-      {displayFile.map((file, index) => {
-        const name = file.get('fileName');
-        const uid = file.get('uuid');
-
-        const fileSchemes = schemes.filter(s => s.get('fileUuid') === uid)
-                                   .filter(s => s.get('display'));
-        const fileReactions = reactions.filter(r => r.get('fileUuid') === uid);
-        const fileMolecules = molecules.filter(m => m.get('fileUuid') === uid);
-
-        if (fileReactions.size === 0 && fileMolecules.size === 0) {
-          return <span key={uid} />;
-        }
-
-        const schemesByVersion = groupListByVersion(fileSchemes);
-
-        return (
-          <React.Fragment key={uid}>
-            {schemesByVersion.map(schemesArr => (
-              <Panel
-                key={`${uid}-${schemesArr[0].get('version')}`}
-                eventKey={index}
-                defaultExpanded
-              >
-                {structureEditor}
-                <Panel.Heading
-                  style={{
-                    position: 'sticky',
-                    top: '0px',
-                    zIndex: 2,
-                    border: '1px solid #ddd',
-                    borderTopLeftRadius: '0px',
-                    borderTopRightRadius: '0px'
-                  }}
-                >
-                  <Panel.Title toggle>
-                    <Badge
-                      style={{ marginRight: '10px', marginTop: '-3px' }}
-                    >
-                      {schemesArr[0].get('version')}
-                    </Badge>
-                    {name}
-                    {
-                      <DeleteBtn
-                        param={{ fileUid: uid }}
-                        onClick={removeFile}
-                      />
-                    }
-                  </Panel.Title>
-                </Panel.Heading>
-                <Panel.Body collapsible>
-                  <FileContent
-                    file={file}
-                    schemes={schemesArr}
-                    modal={modal}
-                  />
-                </Panel.Body>
-              </Panel>
-            ))}
-          </React.Fragment>
-        );
-      })}
-    </PanelGroup>
-  );
-};
-
-MainContent.propTypes = {
-  files: PropTypes.instanceOf(Immutable.List).isRequired,
-  schemes: PropTypes.instanceOf(Immutable.List).isRequired,
-  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
-  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
-  editingMoleculeId: PropTypes.number.isRequired,
-  saveMoleculeMdl: PropTypes.func.isRequired,
-  closeEditorModal: PropTypes.func.isRequired,
-  modal: PropTypes.string.isRequired,
-  removeFile: PropTypes.func.isRequired,
-};
-
-export default MainContent;
diff --git a/app/packs/src/components/chemscanner/components/MoleculeDescription.js b/app/packs/src/components/chemscanner/components/MoleculeDescription.js
deleted file mode 100644
index 79f2bc5ba..000000000
--- a/app/packs/src/components/chemscanner/components/MoleculeDescription.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import Immutable from 'immutable';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Label, Button } from 'react-bootstrap';
-
-import EditableText from './EditableText';
-
-class PolymerLabel extends React.Component {
-  constructor() {
-    super();
-
-    this.onClickLabel = this.onClickLabel.bind(this);
-  }
-
-  onClickLabel() {
-    const { onClick, atomId } = this.props;
-    onClick(atomId);
-  }
-
-  render() {
-    const { label, isPolymer } = this.props;
-    if (!label) return <span />;
-
-    return (
-      <Button
-        bsSize="xsmall"
-        onClick={this.onClickLabel}
-        bsStyle={isPolymer ? 'info' : 'default'}
-      >
-        {label}
-      </Button>
-    );
-  }
-}
-
-PolymerLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  atomId: PropTypes.number.isRequired,
-  isPolymer: PropTypes.bool
-};
-
-PolymerLabel.defaultProps = {
-  isPolymer: false
-};
-
-function MoleculeDescription({
-  molecule, label, toggleAliasPolymer, updateMoleculeField
-}) {
-  const description = {
-    label: molecule.get('label'),
-    description: molecule.get('description'),
-  };
-  const mId = molecule.get('id');
-
-  const setPolymer = (atomIdx) => {
-    if (!mId) return;
-
-    toggleAliasPolymer(mId, atomIdx);
-  };
-
-  Object.keys(description).forEach((k) => {
-    const value = description[k];
-    if (!value) delete description[k];
-  });
-
-  const aliases = molecule.get('aliases').toJS();
-  const polymers = (
-    molecule.get('extendedMetadata').get('polymer') || Immutable.List()
-  ).toJS();
-
-  const descLength = Object.keys(description).length;
-  const aliasesLength = Object.keys(aliases).length;
-  if (descLength === 0 && aliasesLength === 0) return <span />;
-
-  let aliasList = <span />;
-  const aliasesKeys = Object.keys(aliases);
-  if (aliasesKeys.length > 0) {
-    aliasList = (
-      <li key="alias">
-        <b>alias: </b>
-        {aliasesKeys.map(k => (
-          <PolymerLabel
-            key={k}
-            label={aliases[k]}
-            onClick={setPolymer}
-            atomId={parseInt(k, 10)}
-            isPolymer={polymers.includes(parseInt(k, 10))}
-          />
-        ))}
-      </li>
-    );
-  }
-
-  let moleculeLabel = <span />;
-  if (label) moleculeLabel = <Label>{label}</Label>;
-
-  return (
-    <div style={{ maxWidth: '30%' }}>
-      {moleculeLabel}
-      <ul>
-        {Object.keys(description).map(k => (
-          <li key={k}>
-            <EditableText
-              field={k}
-              value={description[k].toString()}
-              id={molecule.get('id')}
-              onFinishUpdate={updateMoleculeField}
-            />
-          </li>
-        ))}
-        {aliasList}
-      </ul>
-    </div>
-  );
-}
-
-MoleculeDescription.propTypes = {
-  molecule: PropTypes.instanceOf(Immutable.Map).isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateMoleculeField: PropTypes.func.isRequired,
-  label: PropTypes.string
-};
-
-MoleculeDescription.defaultProps = {
-  label: '',
-};
-
-export default MoleculeDescription;
diff --git a/app/packs/src/components/chemscanner/components/MoleculeDetails.js b/app/packs/src/components/chemscanner/components/MoleculeDetails.js
deleted file mode 100644
index eec1cf5c5..000000000
--- a/app/packs/src/components/chemscanner/components/MoleculeDetails.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { pascalize } from 'humps';
-import Immutable from 'immutable';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class MoleculeDetails extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      expand: false
-    };
-
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    const { expand } = this.state;
-    this.setState({ expand: !expand });
-  }
-
-  render() {
-    const { molecule } = this.props;
-    let details = molecule.get('details');
-    if (!details) return <span />;
-
-    details = details.toJS();
-    const detailsList = Object.keys(details).filter(k => details[k]).map(k => (
-      <li key={k}> <b>{`${pascalize(k)}: `}</b> {details[k]} </li>
-    ));
-
-    if (detailsList.length === 0) return <span />;
-
-    const detailsUl = <ul> {detailsList} </ul>;
-
-    const { expand } = this.state;
-    const iconClass = expand ? 'fa-angle-down' : 'fa-angle-right';
-    const iconText = expand ? 'Hide' : 'More';
-
-    return (
-      <div className="perkin-eln-details-container">
-        <div className="eln-click">
-          <button
-            className="expand-btn btn btn-xs"
-            onClick={this.onClick}
-          >
-            <i className={`fa ${iconClass} fa-lg`} />
-            &nbsp;&nbsp;
-            <span><b>{iconText} Details</b></span>
-          </button>
-        </div>
-        <div className="perkin-eln-details">
-          {expand ? detailsUl : <span />}
-        </div>
-      </div>
-    );
-  }
-}
-
-MoleculeDetails.propTypes = {
-  molecule: PropTypes.instanceOf(Immutable.Map).isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js b/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
deleted file mode 100644
index c359f7fe8..000000000
--- a/app/packs/src/components/chemscanner/components/PreviewFileZoomPan.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-
-const optimizeHeight = (imgWidth, imgHeight) => {
-  if (imgHeight < 300) return `${imgHeight}px`;
-
-  return imgWidth > imgHeight ? '300px' : '400px';
-};
-
-export default class PreviewFileZoomPan extends React.PureComponent {
-  constructor() {
-    super();
-
-    this.state = {
-      type: '',
-      imageContent: ''
-    };
-
-    this.setPreviewRef = (el) => {
-      this.previewDiv = el;
-    };
-
-    this.isSvg = true;
-    this.centeringImage = this.centeringImage.bind(this);
-    this.displayURL = this.displayURL.bind(this);
-  }
-
-  componentDidMount() {
-    // setTimeout(this.centeringImage, 300);
-
-    const { imageURL } = this.props;
-    this.displayURL(imageURL);
-  }
-
-  componentWillReceiveProps(newProps) {
-    const { imageURL } = newProps;
-    this.displayURL(imageURL);
-  }
-
-  componentDidUpdate() {
-    setTimeout(this.centeringImage, 300);
-  }
-
-  displayURL(url) {
-    fetch(url).then(r => r.blob()).then((blob) => {
-      const myReader = new FileReader();
-      const { type } = blob;
-
-      myReader.onload = () => {
-        this.setState({ imageContent: myReader.result, type }, this.centeringImage);
-      };
-
-      myReader.readAsText(blob);
-    });
-  }
-
-  centeringImage() {
-    const svgEl = this.previewDiv.querySelector('#svg-file-container');
-    const imgSelector = this.isSvg ? 'g > svg' : '#png-img-svg';
-    const imgEl = svgEl.querySelector(imgSelector);
-    if (!imgEl) return;
-
-    const svgWidth = Math.floor(svgEl.getBoundingClientRect().width);
-
-    let imgWidth;
-    let imgHeight;
-
-    if (this.isSvg) {
-      imgWidth = Math.floor(imgEl.getBoundingClientRect().width);
-      imgHeight = Math.floor(imgEl.getBoundingClientRect().height);
-      svgEl.setAttribute('viewBox', `0 0 ${imgWidth} ${imgHeight}`);
-
-      // SCALE SVG
-      const height = optimizeHeight(imgWidth, imgHeight);
-      svgEl.setAttribute('height', height);
-
-      return;
-    }
-
-    const dummyImg = this.previewDiv.querySelector('#dummy-img');
-    dummyImg.style.display = 'block';
-    imgWidth = window.getComputedStyle(dummyImg).getPropertyValue('width');
-    imgHeight = window.getComputedStyle(dummyImg).getPropertyValue('height');
-
-    // SCALE Picture
-    const intWidth = parseInt(imgWidth, 10);
-    const intHeight = parseInt(imgHeight, 10);
-    imgHeight = optimizeHeight(intWidth, intHeight);
-
-    dummyImg.style.display = 'none';
-
-    if (svgWidth > imgWidth) {
-      const xOffset = `${(svgWidth - imgWidth) / 2}`;
-      imgEl.setAttribute('x', xOffset);
-    } else {
-      imgEl.setAttribute('width', svgWidth);
-    }
-
-    imgEl.setAttribute('height', imgHeight);
-    svgEl.style.height = `${imgHeight}`;
-  }
-
-  render() {
-    const { duration } = this.props;
-    const { imageContent, type } = this.state;
-
-    if (imageContent.length === 0 || type.length === 0) return <span />;
-
-    let svg = imageContent;
-
-    if (type === 'image/png') {
-      this.isSvg = false;
-
-      svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <image id="png-img-svg" xlink:href="${imageContent}" width="100%" height="100%" />
-        </svg>
-      `;
-    } else {
-      svg = imageContent;
-    }
-
-    let dummyImg = (<span />);
-    if (!this.isSvg) {
-      dummyImg = (<img id="dummy-img" alt="" src={imageContent} />);
-    }
-
-    return (
-      <div
-        ref={this.setPreviewRef}
-        style={{
-          position: 'sticky',
-          top: '44px',
-          zIndex: 2,
-          background: 'white',
-        }}
-      >
-        {dummyImg}
-        <SvgFileZoomPan svg={svg} duration={duration} />
-      </div>
-    );
-  }
-}
-
-PreviewFileZoomPan.propTypes = {
-  imageURL: PropTypes.string.isRequired,
-  duration: PropTypes.number,
-};
-
-PreviewFileZoomPan.defaultProps = {
-  duration: 200,
-};
diff --git a/app/packs/src/components/chemscanner/components/ReactionDescription.js b/app/packs/src/components/chemscanner/components/ReactionDescription.js
deleted file mode 100644
index ff6aa68ce..000000000
--- a/app/packs/src/components/chemscanner/components/ReactionDescription.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import Immutable from 'immutable';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
-
-import MoleculeDescription from './MoleculeDescription';
-import EditableText from './EditableText';
-
-export default class ReactionDescription extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.updateReactionField = this.updateReactionField.bind(this);
-    this.updateMoleculeField = this.updateMoleculeField.bind(this);
-  }
-
-  updateReactionField(id, field, value) {
-    this.props.updateItemField(id, 'reactions', field, value);
-  }
-
-  updateMoleculeField(id, field, value) {
-    this.props.updateItemField(id, 'molecules', field, value);
-  }
-
-  render() {
-    const {
-      reaction, reactants, reagents, solvents, products, toggleAliasPolymer
-    } = this.props;
-
-    const rDesc = {
-      description: reaction.get('description'),
-      temperature: reaction.get('temperature'),
-      time: reaction.get('time'),
-      yield: reaction.get('yield')
-    };
-
-    Object.keys(rDesc).forEach((k) => {
-      if (!rDesc[k]) delete rDesc[k];
-    });
-
-    const status = reaction.get('status');
-    let statusClass;
-    switch (status) {
-      case 'Failed':
-        statusClass = 'danger';
-        break;
-      case 'Planned': {
-        statusClass = 'info';
-        break;
-      }
-      default:
-        statusClass = 'success';
-    }
-    const statusLabel = <Label bsStyle={statusClass}>{status}</Label>;
-
-    const steps = reaction.get('steps').toJS();
-    const rId = reaction.get('externalId');
-
-    return (
-      <React.Fragment>
-        <div style={{ maxWidth: '30%' }}>
-          <Label>reaction</Label>
-          <ul>
-            <li key="scanned-reaction-status">
-              <b>status: </b>
-              {statusLabel}
-            </li>
-            {Object.keys(rDesc).map(k => (
-              <li key={k}>
-                <EditableText
-                  field={k}
-                  value={rDesc[k].toString()}
-                  id={reaction.get('id')}
-                  onFinishUpdate={this.updateReactionField}
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
-        {reactants.map((m, idx) => (
-          <MoleculeDescription
-            key={`reactant_${m.get('externalId')}`}
-            label={`Reactant ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {reagents.filter(m => m.get('externalId')).map((m, idx) => (
-          <MoleculeDescription
-            key={`reagent_${m.get('externalId')}`}
-            label={`Reagent ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {solvents.filter(m => m.get('externalId')).map((m, idx) => (
-          <MoleculeDescription
-            key={`solvent_${m.get('externalId')}`}
-            label={`Solvent ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {products.map((m, idx) => (
-          <MoleculeDescription
-            key={`product_${m.get('externalId')}`}
-            label={`Product ${idx + 1}`}
-            molecule={m}
-            toggleAliasPolymer={toggleAliasPolymer}
-            updateMoleculeField={this.updateMoleculeField}
-          />
-        ))}
-        {steps.map(step => (
-          <div
-            key={`reaction-${rId}-${step.stepNumber}`}
-            style={{ maxWidth: '40%' }}
-          >
-            <Label bsStyle="info">step {step.stepNumber}</Label>
-            <ul>
-              {
-                ['description', 'temperature', 'time'].map((prop) => {
-                  const val = step[prop];
-                  const key = `reaction-${rId}-step-${step.number}-${prop}`;
-                  if (!val || val === '\n') return <span key={key} />;
-
-                  return (
-                    <li key={key}>
-                      <EditableText
-                        field={prop}
-                        value={val}
-                        id={reaction.get('id')}
-                        onFinishUpdate={this.updateReactionField}
-                      />
-                    </li>
-                  );
-                })
-              }
-              <li key={`reaction-${rId}-step-${step.number}-reagents`}>
-                <b>reagents: </b>
-                <ul>
-                  {step.reagentSmiles.map(x => (
-                    <li key={`${rId}-${step.number}-${x}`}>{x}</li>
-                  ))}
-                </ul>
-              </li>
-            </ul>
-          </div>
-        ))}
-      </React.Fragment>
-    );
-  }
-}
-
-ReactionDescription.propTypes = {
-  reaction: PropTypes.instanceOf(Immutable.Map).isRequired,
-  reactants: PropTypes.instanceOf(Immutable.List).isRequired,
-  reagents: PropTypes.instanceOf(Immutable.List).isRequired,
-  solvents: PropTypes.instanceOf(Immutable.List).isRequired,
-  products: PropTypes.instanceOf(Immutable.List).isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/ReactionDetails.js b/app/packs/src/components/chemscanner/components/ReactionDetails.js
deleted file mode 100644
index 2bc9a3cd3..000000000
--- a/app/packs/src/components/chemscanner/components/ReactionDetails.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { pascalize } from 'humps';
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Label } from 'react-bootstrap';
-
-export default class ReactionDetails extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      expand: false
-    };
-
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    const { expand } = this.state;
-    this.setState({ expand: !expand });
-  }
-
-  render() {
-    const { reaction } = this.props;
-    const details = reaction.get('details').toJS() || {};
-
-    const reactionDetails = Object.keys(details).reduce((acc, dKey) => {
-      const arr = details[dKey];
-      if (arr.length === 0) return acc;
-
-      const keyList = arr.map((detail, idx) => (
-        <div key={`${dKey}-${idx}`}>
-          <Label>{pascalize(dKey)}</Label>
-          <ul>
-            {Object.keys(detail).filter(k => detail[k]).map(k => (
-              <li key={k}> <b>{`${pascalize(k)}: `}</b> {detail[k]} </li>
-            ))}
-          </ul>
-        </div>
-      ));
-
-      return acc.concat(keyList);
-    }, []);
-
-    const detailsList = [
-      'reactants', 'reagents', 'solvents', 'products'
-    ].reduce((acc, group) => {
-      const groupMol = this.props[group];
-      if (!groupMol || groupMol.size === 0) return acc;
-
-      const keyList = groupMol.reduce((mAcc, m, idx) => {
-        let mDetails = m.get('details');
-        if (!mDetails) return mAcc;
-
-        mDetails = mDetails.toJS();
-        const mDetailEls = Object.keys(mDetails).filter(k => mDetails[k]).map(k => (
-          <li key={k}> <b>{`${pascalize(k)}: `}</b> {mDetails[k]} </li>
-        ));
-        if (mDetailEls.length === 0) return mAcc;
-
-        mAcc.push((
-          <div key={m.get('id')}>
-            <Label>{`${group.slice(0, -1)} ${idx + 1}`}</Label>
-            <ul>
-              {mDetailEls}
-            </ul>
-          </div>
-        ));
-
-        return mAcc;
-      }, []);
-
-      return acc.concat(keyList);
-    }, reactionDetails);
-
-    if (detailsList.length === 0) return <span />;
-
-    const { expand } = this.state;
-    const iconClass = expand ? 'fa-angle-down' : 'fa-angle-right';
-    const iconText = expand ? 'Hide' : 'More';
-
-    return (
-      <div className="perkin-eln-details-container">
-        <div className="eln-click">
-          <button
-            className="expand-btn btn btn-xs"
-            onClick={this.onClick}
-          >
-            <i className={`fa ${iconClass} fa-lg`} />
-            &nbsp;&nbsp;
-            <span><b>{iconText} Details</b></span>
-          </button>
-        </div>
-        <div className="perkin-eln-details">
-          {expand ? detailsList : <span />}
-        </div>
-      </div>
-    );
-  }
-}
-
-ReactionDetails.propTypes = {
-  reaction: PropTypes.instanceOf(Immutable.Map).isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/Root.js b/app/packs/src/components/chemscanner/components/Root.js
deleted file mode 100644
index 17e4d5428..000000000
--- a/app/packs/src/components/chemscanner/components/Root.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import scriptLoader from 'react-async-script-loader';
-import { Grid, Row, Col } from 'react-bootstrap';
-
-import AbbreviationContainer from 'src/apps/chemscanner/containers/AbbreviationContainer';
-import HeaderMenuContainer from 'src/apps/chemscanner/containers/HeaderMenuContainer';
-import MainContentContainer from 'src/apps/chemscanner/containers/MainContentContainer';
-import LoadingModalContainer from 'src/apps/chemscanner/containers/LoadingModalContainer';
-
-class Root extends Component {
-  componentDidMount() {
-    const {
-      isScriptLoaded, isScriptLoadSucceed, attachEditor,
-      getCurrentVersion
-    } = this.props;
-
-    getCurrentVersion();
-
-    const check = isScriptLoaded && isScriptLoadSucceed;
-    if (!check) return;
-
-    attachEditor('chemscanner-cdjs-container');
-  }
-
-  UNSAFE_componentWillReceiveProps({
-    isScriptLoaded,
-    isScriptLoadSucceed,
-    attachEditor
-  }) {
-    const check = (
-      isScriptLoaded && isScriptLoadSucceed && !this.props.isScriptLoaded
-    );
-    if (!check) return;
-
-    attachEditor('chemscanner-cdjs-container');
-  }
-
-  render() {
-    const { modal, ui } = this.props;
-    const view = ui.get('view');
-
-    let viewContainer = <span />;
-    switch (view) {
-      case types.VIEW_SCANNED_FILES:
-        viewContainer = <MainContentContainer modal={modal} />;
-        break;
-      case types.VIEW_ABBREVIATION:
-        viewContainer = <AbbreviationContainer />;
-        break;
-      case types.VIEW_FILE_STORAGE:
-        viewContainer = <FileStorageContainer />;
-        break;
-      case types.VIEW_ARCHIVED_MANAGEMENT:
-        viewContainer = <ArchivedManagementContainer />;
-        break;
-      default:
-        break;
-    }
-
-    return (
-      <Grid fluid className="chemscanner-grid">
-        <div id="chemscanner-cdjs-container" />
-        <Row style={{ position: 'relative', zIndex: '9' }}>
-          <Col xs={18} md={12}>
-            <HeaderMenuContainer />
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={18} md={12} className="chemscanner-files-contents">
-            {abbView ?
-              <AbbreviationContainer /> :
-              <MainContentContainer modal={modal} />
-            }
-          </Col>
-        </Row>
-        <Row>
-          <LoadingModalContainer />
-          <ImportModalContainer />
-        </Row>
-      </Grid>
-    );
-  }
-}
-
-Root.propTypes = {
-  ui: PropTypes.instanceOf(Immutable.Map).isRequired,
-  isScriptLoaded: PropTypes.bool.isRequired,
-  isScriptLoadSucceed: PropTypes.bool.isRequired,
-  attachEditor: PropTypes.func.isRequired,
-  getCurrentVersion: PropTypes.func.isRequired,
-  modal: PropTypes.string
-};
-
-Root.defaultProps = {
-  modal: ''
-};
-
-const scriptUrl = '/cdjs/chemdrawweb/chemdrawweb.js';
-// const scriptUrl = 'https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js';
-
-export default scriptLoader(scriptUrl)(Root);
diff --git a/app/packs/src/components/chemscanner/components/ScannedMolecules.js b/app/packs/src/components/chemscanner/components/ScannedMolecules.js
deleted file mode 100644
index a7d34944f..000000000
--- a/app/packs/src/components/chemscanner/components/ScannedMolecules.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-
-import DeleteBtn from './DeleteBtn';
-import SelectBtn from './SelectBtn';
-import CopyClipboardBtn from './CopyClipboardBtn';
-import EditMdlBtn from './EditMdlBtn';
-import MoleculeDescription from './MoleculeDescription';
-import MoleculeDetails from './MoleculeDetails';
-
-import { sortMoleculesByClone } from '../utils';
-
-const renderSvg = (svg) => {
-  const newSvg = svg.replace(/height="[^"]+"/, '').replace(/width="[^"]+"/, 'width="100%"');
-  return newSvg.replace(/height='[^']+'/, '').replace(/width='[^']+'/, 'width="100%"');
-};
-
-export default class ScannedMolecules extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.editComment = this.editComment.bind(this);
-    this.removeItem = this.removeItem.bind(this);
-    this.selectItem = this.selectItem.bind(this);
-    this.updateMoleculeField = this.updateMoleculeField.bind(this);
-  }
-
-  selectItem(id) {
-    const { fileUid, schemeIdx, selectItem } = this.props;
-    selectItem('molecules', fileUid, schemeIdx, id);
-  }
-
-  removeItem({ id }) {
-    const { fileUid, schemeIdx, removeItem } = this.props;
-    removeItem('molecules', fileUid, schemeIdx, id);
-  }
-
-  editComment(schemeIdx, id, comment) {
-    const { fileUid, editComment } = this.props;
-    editComment('molecules', fileUid, schemeIdx, id, comment);
-  }
-
-  updateMoleculeField(id, field, value) {
-    this.props.updateItemField(id, 'molecules', field, value);
-  }
-
-  render() {
-    const {
-      fileUid, schemeIdx, extIds, modal, molecules,
-      toggleAliasPolymer, editMoleculeMdl
-    } = this.props;
-
-    const externalIds = extIds.filter(id => id);
-    const moleculeList = molecules.filter(m => (
-      m.get('fileUuid') === fileUid &&
-        m.get('schemeIdx') === schemeIdx &&
-        !m.get('abbreviation') &&
-        externalIds.includes(m.get('externalId'))
-    ));
-    if (moleculeList.length === 0) return <span />;
-
-    const container = document.getElementById(modal);
-
-    const sortedMoleculeList = sortMoleculesByClone(moleculeList);
-
-    return (
-      <ListGroup>
-        {sortedMoleculeList.map((molecule, idx) => {
-          const id = molecule.get('externalId');
-          const mId = molecule.get('id');
-          const selected = molecule.get('selected') || false;
-          const className = `scanned-item ${selected ? 'selected-item' : ''}`;
-
-          let childrenStyle = {};
-          const cloneFrom = molecule.get('cloneFrom');
-          if (cloneFrom && idx > 0) {
-            const prevMolecule = sortedMoleculeList.get(idx - 1);
-            const prevExtId = prevMolecule.get('externalId');
-            const prevCloneFrom = prevMolecule.get('cloneFrom');
-
-            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
-              childrenStyle = {
-                marginLeft: '20px', border: '2px dashed #1d5e83'
-              };
-            }
-          }
-
-          const mdlOptions = [{ title: 'Molecule', value: mId }];
-
-          return (
-            <ListGroupItem
-              key={`${fileUid}-${id}`}
-              className={className}
-              style={childrenStyle}
-            >
-              <DeleteBtn pullLeft param={{ id }} onClick={this.removeItem} />
-              <CopyClipboardBtn
-                identifier={{ fileUid, id }}
-                smi={molecule.get('canoSmiles')}
-                mdl={molecule.get('mdl')}
-                inchi={molecule.get('inchistring') || ''}
-                inchiKey={molecule.get('inchikey') || ''}
-                container={container}
-              />
-              <EditMdlBtn
-                openKetcher={editMoleculeMdl}
-                options={mdlOptions}
-                identifier={mId}
-              />
-              <SelectBtn
-                itemId={id}
-                selected={selected}
-                schemeIdx={schemeIdx}
-                onClick={this.selectItem}
-              />
-              <div className="scanned-molecule-desc">
-                <div>
-                  <SvgFileZoomPan svg={renderSvg(molecule.get('svg'))} duration={200} />
-                </div>
-                <MoleculeDescription
-                  molecule={molecule}
-                  toggleAliasPolymer={toggleAliasPolymer}
-                  updateMoleculeField={this.updateMoleculeField}
-                />
-              </div>
-              <MoleculeDetails molecule={molecule} />
-            </ListGroupItem>
-          );
-        })}
-      </ListGroup>
-    );
-  }
-}
-
-ScannedMolecules.propTypes = {
-  modal: PropTypes.string.isRequired,
-  fileUid: PropTypes.string.isRequired,
-  schemeIdx: PropTypes.number.isRequired,
-  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
-  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
-  removeItem: PropTypes.func.isRequired,
-  selectItem: PropTypes.func.isRequired,
-  editComment: PropTypes.func.isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
-  editMoleculeMdl: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/ScannedReactions.js b/app/packs/src/components/chemscanner/components/ScannedReactions.js
deleted file mode 100644
index d04e4c254..000000000
--- a/app/packs/src/components/chemscanner/components/ScannedReactions.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-
-import DeleteBtn from './DeleteBtn';
-import SelectBtn from './SelectBtn';
-import CopyClipboardBtn from './CopyClipboardBtn';
-import EditMdlBtn from './EditMdlBtn';
-import ReactionDescription from './ReactionDescription';
-import ReactionDetails from './ReactionDetails';
-
-import { getReactionGroups } from '../reactionUtils';
-
-const mapListMdl = arr => arr.map(m => `$MOL\n${m.get('mdl')}`).join('\n');
-
-const getMdlOptions = (groups, name) => (
-  groups.reduce((arr, m, idx) => (
-    arr.concat([{ title: `${name} ${idx + 1}`, value: m.get('id') }])
-  ), [])
-);
-
-export default class ScannedReactions extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.removeItem = this.removeItem.bind(this);
-    this.selectItem = this.selectItem.bind(this);
-  }
-
-  selectItem(id) {
-    const { fileUid, schemeIdx, selectItem } = this.props;
-    selectItem('reactions', fileUid, schemeIdx, id);
-  }
-
-  removeItem({ id }) {
-    const { fileUid, schemeIdx, removeItem } = this.props;
-    removeItem('reactions', fileUid, schemeIdx, id);
-  }
-
-  editComment(id, comment) {
-    const { fileUid, schemeIdx, editComment } = this.props;
-    editComment('reactions', fileUid, schemeIdx, id, comment);
-  }
-
-  render() {
-    const {
-      fileUid, schemeIdx, extIds, modal, reactions, molecules,
-      updateItemField, toggleAliasPolymer, editMoleculeMdl
-    } = this.props;
-
-    const displayReactions = reactions.filter(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('schemeIdx') === schemeIdx &&
-        extIds.includes(r.get('externalId'))
-    ));
-
-    if (displayReactions.length === 0) return <span />;
-
-    const container = document.getElementById(modal);
-
-    return (
-      <ListGroup>
-        {displayReactions.map((reaction, idx) => {
-          const {
-            reactants, reagents, solvents, products
-          } = getReactionGroups(reaction, molecules);
-
-          const listInchi = [reactants, reagents, solvents, products].reduce((arr, group) => (
-            arr.concat(group.map(m => m.get('inchistring')).toArray())
-          ), []).join('\n');
-
-          const listInchiKey = [reactants, reagents, solvents, products].reduce((arr, group) => (
-            arr.concat(group.map(m => m.get('inchikey')).toArray())
-          ), []).join('\n');
-
-          const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
-          const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
-          const reagentSmiles = reagents.concat(solvents).map(m => (
-            m.get('canoSmiles')
-          )).join('.');
-
-          const reactionSmiles = [
-            reactantSmiles,
-            reagentSmiles,
-            productSmiles,
-          ].join('>');
-
-          const rId = reaction.get('externalId');
-          const reactantSize = reactants.size + reagents.size;
-
-          const listMDL = [
-            mapListMdl(reactants),
-            mapListMdl(reagents),
-            mapListMdl(solvents),
-            mapListMdl(products)
-          ].join('\n');
-
-          let editMdlOptions = [];
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(reactants, 'Reactant'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(reagents, 'Reagent'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(solvents, 'Solvent'));
-          editMdlOptions = editMdlOptions.concat(getMdlOptions(products, 'Product'));
-
-          const rxn = `$RXN\n\n\n\n  ${reactantSize} ${products.size}\n${listMDL}`;
-          const selected = reaction.get('selected') || false;
-          const selectedClassName = selected ? 'selected-item' : '';
-
-          const rSvg = reaction.get('svg');
-          const viewBox = rSvg.match(/viewBox="(.*)"/)[1];
-          let svgDivStyle = {};
-          if (viewBox) {
-            const svgWidth = parseInt(viewBox.split(' ')[2], 10) || -1;
-            if (svgWidth > 0) svgDivStyle = { width: (svgWidth * (2 / 3)) };
-          }
-
-          let childrenStyle = {};
-          const cloneFrom = reaction.get('cloneFrom');
-          if (cloneFrom && idx > 0) {
-            const prevReaction = displayReactions.get(idx - 1);
-            const prevExtId = prevReaction.get('externalId');
-            const prevCloneFrom = prevReaction.get('cloneFrom');
-
-            if (cloneFrom === prevCloneFrom || cloneFrom === prevExtId) {
-              childrenStyle = {
-                marginLeft: '20px', border: '2px dashed #1d5e83'
-              };
-            }
-          }
-
-          return (
-            <ListGroupItem
-              key={`${fileUid}-${rId}`}
-              className={`scanned-item ${selectedClassName}`}
-              style={childrenStyle}
-            >
-              <DeleteBtn param={{ id: rId }} onClick={this.removeItem} pullLeft />
-              <CopyClipboardBtn
-                identifier={{ fileUid, id: rId }}
-                smi={reactionSmiles}
-                mdl={rxn}
-                inchi={listInchi}
-                inchiKey={listInchiKey}
-                container={container}
-              />
-              <EditMdlBtn
-                openKetcher={editMoleculeMdl}
-                options={editMdlOptions}
-                identifier={reaction.get('id')}
-              />
-              <SelectBtn
-                itemId={rId}
-                schemeIdx={schemeIdx}
-                selected={selected}
-                onClick={this.selectItem}
-              />
-              <div className="scanned-reaction-desc">
-                <div style={svgDivStyle}>
-                  <SvgFileZoomPan svg={rSvg} duration={200} />
-                </div>
-                <ReactionDescription
-                  reaction={reaction}
-                  reactants={reactants}
-                  reagents={reagents}
-                  solvents={solvents}
-                  products={products}
-                  toggleAliasPolymer={toggleAliasPolymer}
-                  updateItemField={updateItemField}
-                />
-              </div>
-              <ReactionDetails
-                reaction={reaction}
-                reactants={reactants}
-                reagents={reagents}
-                solvents={solvents}
-                products={products}
-              />
-            </ListGroupItem>
-          );
-        })}
-      </ListGroup>
-    );
-  }
-}
-
-ScannedReactions.propTypes = {
-  molecules: PropTypes.instanceOf(Immutable.List).isRequired,
-  reactions: PropTypes.instanceOf(Immutable.List).isRequired,
-  extIds: PropTypes.instanceOf(Immutable.List).isRequired,
-  schemeIdx: PropTypes.number.isRequired,
-  modal: PropTypes.string.isRequired,
-  fileUid: PropTypes.string.isRequired,
-  removeItem: PropTypes.func.isRequired,
-  selectItem: PropTypes.func.isRequired,
-  editComment: PropTypes.func.isRequired,
-  toggleAliasPolymer: PropTypes.func.isRequired,
-  updateItemField: PropTypes.func.isRequired,
-  editMoleculeMdl: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/chemscanner/components/SelectBtn.js b/app/packs/src/components/chemscanner/components/SelectBtn.js
deleted file mode 100644
index 4d31c68d9..000000000
--- a/app/packs/src/components/chemscanner/components/SelectBtn.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class SelectBtn extends React.Component {
-  constructor() {
-    super();
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    const { itemId, onClick } = this.props;
-    onClick(itemId);
-  }
-
-  render() {
-    const { selected } = this.props;
-    const className = selected ? 'fa-check-circle' : 'fa-check-circle-o';
-
-    return (
-      <button
-        className="left-btn btn btn-xs"
-        onClick={this.onClick}
-      >
-        <i className={`fa ${className}`} />
-      </button>
-    );
-  }
-}
-
-SelectBtn.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  itemId: PropTypes.number.isRequired,
-  schemeIdx: PropTypes.number.isRequired,
-  selected: PropTypes.bool.isRequired
-};
diff --git a/app/packs/src/components/chemscanner/components/SmiSelect.js b/app/packs/src/components/chemscanner/components/SmiSelect.js
deleted file mode 100644
index f7260235d..000000000
--- a/app/packs/src/components/chemscanner/components/SmiSelect.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import VirtualizedSelect from 'react-virtualized-select';
-
-export default class SmiSelect extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onSelect = this.onSelect.bind(this);
-  }
-
-  onSelect(selected) {
-    const { onSelect, type } = this.props;
-    onSelect({ value: selected, type });
-  }
-
-  render() {
-    const {
-      obj, type, disabled, value
-    } = this.props;
-    const options = [];
-    const editedSmi = [];
-
-    Object.keys(obj).forEach((k) => {
-      const smi = obj[k];
-      const opt = { label: k, value: smi };
-      options.push(opt);
-
-      if (value.indexOf(smi) > -1) {
-        editedSmi.push(smi);
-      }
-    });
-
-    return (
-      <VirtualizedSelect
-        multi
-        disabled={disabled}
-        onChange={this.onSelect}
-        options={options}
-        placeholder={`Add ${type}`}
-        simpleValue
-        {...this.props}
-        value={editedSmi.join(',')}
-      />
-    );
-  }
-}
-
-SmiSelect.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  obj: PropTypes.object.isRequired,
-  type: PropTypes.string,
-  value: PropTypes.arrayOf(PropTypes.string),
-  disabled: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired
-};
-
-SmiSelect.defaultProps = {
-  type: '',
-  value: [],
-  disabled: true
-};
diff --git a/app/packs/src/components/chemscanner/components/fileStorageUtils.js b/app/packs/src/components/chemscanner/components/fileStorageUtils.js
deleted file mode 100644
index ead4d38f2..000000000
--- a/app/packs/src/components/chemscanner/components/fileStorageUtils.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import { List, Map } from 'immutable';
-
-const selectFileChildren = (rowNode) => {
-  const { data, selected } = rowNode;
-
-  const isFileSelected = data.type === 'File';
-  if (!isFileSelected) return;
-
-  const { childrenAfterGroup } = rowNode;
-  if (!childrenAfterGroup) return;
-
-  const childrenSchemes = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'Scheme'
-  ));
-  const childrenFiles = rowNode.childrenAfterGroup.filter(node => (
-    node.data.type === 'File'
-  ));
-
-  childrenSchemes.forEach(node => node.setSelected(selected));
-  childrenFiles.forEach((node) => {
-    node.setSelected(selected);
-    selectFileChildren(node);
-  });
-};
-
-export const onRowSelected = (event) => {
-  selectFileChildren(event.node);
-};
-
-export const versionGetter = n => (n.data.type === 'Item' ? '' : n.data.version);
-export const fileNameGetter = n => (n.data[`${n.data.type.toLowerCase()}Name`]);
-
-export const getNodeChildDetails = (rowItem) => {
-  const { children, fileName, type } = rowItem;
-  if (!children || children.length === 0) return null;
-
-  let { expanded } = rowItem;
-  if (expanded == null) expanded = !(type === 'ItemSummary');
-
-  return {
-    group: true,
-    expanded,
-    children,
-    key: fileName
-  };
-};
-
-const addChildren = (file, child) => {
-  const children = file.children || [];
-  children.push(child);
-
-  // eslint-disable-next-line no-param-reassign
-  file.children = children;
-};
-
-const buildFileTree = (files) => {
-  const fileMap = {};
-  const jsFiles = [];
-
-  files.forEach((immuFile) => {
-    const file = immuFile.toJS();
-    file.type = 'File';
-
-    const extMData = file.extendedMetadata;
-    let expanded;
-    // eslint-disable-next-line prefer-destructuring
-    if (extMData) expanded = extMData.expanded;
-    if (expanded == null) expanded = true;
-    file.expanded = expanded;
-
-    const { id } = file;
-    fileMap[id] = file;
-
-    jsFiles.push(file);
-  });
-
-  jsFiles.forEach((file) => {
-    const { parentId } = file;
-    if (!parentId) return;
-
-    const parent = fileMap[parentId];
-    if (parent.display && !file.display) {
-      /* eslint-disable no-param-reassign */
-      file.display = parent.display;
-      file.show = parent.show;
-
-      const { expanded } = parent;
-      if (expanded != null) file.expanded = expanded;
-      /* eslint-enable no-param-reassign */
-    }
-
-    addChildren(parent, file);
-  });
-
-  const fileTree = Object.keys(fileMap).sort((a, b) => b - a).reduce((arr, fileId) => {
-    const file = fileMap[fileId];
-    const { parentId } = file;
-    if (parentId) return arr;
-
-    arr.push(file);
-    return arr;
-  }, []);
-
-  return { fileTree, fileMap };
-};
-
-const buildFileSchemeTree = (fileTree, fileMap, schemes, reactions, molecules) => {
-  const schemeArr = [];
-
-  schemes.forEach((immuScheme) => {
-    const scheme = immuScheme.toJS();
-
-    const extMData = immuScheme.get('extendedMetadata');
-    let expanded;
-    if (extMData) expanded = extMData.get('expanded');
-    if (expanded == null) expanded = true;
-    scheme.expanded = expanded;
-
-    schemeArr.push(scheme);
-
-    const { version, imageData } = scheme;
-    scheme.type = 'Scheme';
-
-    const file = fileMap[scheme.sourceId];
-    if (!file) return;
-
-    const { fileName } = file;
-
-    const noFileSchemes = schemes.filter(s => s.get('sourceId') === file.id).size;
-    file.schemeCount = noFileSchemes;
-    file.version = version;
-
-    let leaf = file;
-    if (noFileSchemes > 1) {
-      scheme.schemeName = `Scheme ${scheme.index + 1}`;
-      scheme.fileName = fileName;
-      addChildren(file, scheme);
-      leaf = scheme;
-    } else if (noFileSchemes === 1) {
-      file.schemeId = scheme.id;
-      file.schemeExtendedMetadata = scheme.extendedMetadata;
-      file.imageData = imageData;
-
-      if (scheme.show) file.show = true;
-    }
-
-    const type = 'Item';
-    const schemeMolecules = molecules.filter(m => m.get('schemeId') === scheme.id);
-    const schemeReactions = reactions.filter(r => r.get('schemeId') === scheme.id);
-
-    const approvedReactions = schemeReactions.filter(r => r.get('isApproved'));
-    const approvedMolecules = schemeMolecules.filter(m => m.get('isApproved'));
-    if (approvedReactions.size === schemeReactions.size &&
-        approvedMolecules.size === schemeMolecules.size) {
-      scheme.isApproved = true;
-    } else {
-      scheme.isApproved = false;
-    }
-
-    const importedReactions = schemeReactions.filter(r => r.get('importedId'));
-    const importedMolecules = schemeMolecules.filter(m => m.get('importedId'));
-    if (importedReactions.size === schemeReactions.size &&
-        importedMolecules.size === schemeMolecules.size) {
-      scheme.isImported = true;
-    } else {
-      scheme.isImported = false;
-    }
-
-    let moleculesWarnings = [];
-    const moleculeArr = [];
-    schemeMolecules.forEach((m) => {
-      const moleculeRow = {
-        id: m.get('id'),
-        type,
-        itemType: 'Molecule',
-        fileName,
-        isApproved: m.get('isApproved'),
-        isImported: !!m.get('importedId'),
-        itemName: `Molecule ${m.get('id')}`,
-      };
-
-      const extData = (m.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const mWarnings = warnings.map(w => `Molecule ${m.get('id')}: ${w}`);
-        moleculesWarnings = moleculesWarnings.concat(mWarnings);
-
-        moleculeRow.extendedMetadata = { warnings };
-      }
-
-      moleculeArr.push(moleculeRow);
-    });
-
-    const moleculeSummary = {
-      fileName,
-      itemsummaryName: `Molecules: ${scheme.moleculeCount}`,
-      type: 'ItemSummary',
-      itemType: 'Molecule',
-      version
-    };
-    if (moleculesWarnings.length > 0) {
-      moleculeSummary.extendedMetadata = { warnings: moleculesWarnings };
-    }
-    if (moleculeArr.length > 0) moleculeSummary.children = moleculeArr;
-    addChildren(leaf, moleculeSummary);
-
-    let reactionsWarnings = [];
-    const reactionArr = [];
-    schemeReactions.forEach((r) => {
-      const reactionRow = {
-        type,
-        id: r.get('id'),
-        itemType: 'Reaction',
-        fileName,
-        isApproved: r.get('isApproved'),
-        itemName: `Reaction ${r.get('id')}`,
-        isImported: !!r.get('importedId'),
-      };
-
-      const extData = (r.get('extendedMetadata') || Map());
-      const warnings = (extData.get('warnings') || List()).toJS();
-      if (warnings.length > 0) {
-        const rWarnings = warnings.map(w => `Reaction ${r.get('id')}: ${w}`);
-        reactionsWarnings = reactionsWarnings.concat(rWarnings);
-
-        reactionRow.extendedMetadata = { warnings };
-      }
-
-      reactionArr.push(reactionRow);
-    });
-
-    const reactionSummary = {
-      fileName,
-      itemsummaryName: `Reactions: ${scheme.reactionCount}`,
-      type: 'ItemSummary',
-      itemType: 'Reaction',
-      version
-    };
-    if (reactionsWarnings.length > 0) {
-      reactionSummary.extendedMetadata = { warnings: reactionsWarnings };
-    }
-    if (reactionArr.length > 0) reactionSummary.children = reactionArr;
-    addChildren(leaf, reactionSummary);
-  });
-
-  return schemeArr;
-};
-
-export const buildRowData = (files, schemes, reactions, molecules) => {
-  const { fileTree, fileMap } = buildFileTree(files);
-  const schemeArr = buildFileSchemeTree(fileTree, fileMap, schemes, reactions, molecules);
-
-  // Dectect file approve
-  Object.values(fileMap).forEach((file) => {
-    const fileSchemes = schemeArr.filter(s => s.sourceId === file.id);
-
-    const numApprovedSchemes = fileSchemes.filter(s => s.isApproved).length;
-    if (fileSchemes.length === numApprovedSchemes && numApprovedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedSchemes = fileSchemes.filter(s => s.isImported).length;
-    if (fileSchemes.length === numImportedSchemes && numImportedSchemes > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  Object.values(fileMap).forEach((file) => {
-    const { children } = file;
-    if (!children || children.length === 0) return;
-
-    if (children[0].type !== 'File') return;
-
-    const numApprovedChildren = children.filter(f => f.isApproved).length;
-    if (children.length === numApprovedChildren && numApprovedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isApproved = false;
-    }
-
-    const numImportedChildren = children.filter(f => f.isImported).length;
-    if (children.length === numImportedChildren && numImportedChildren > 0) {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = true;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      file.isImported = false;
-    }
-  });
-
-  return fileTree;
-};
diff --git a/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js b/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
deleted file mode 100644
index ab4d100da..000000000
--- a/app/packs/src/components/chemscanner/containers/AbbreviationContainer.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import 'whatwg-fetch';
-
-import AbbreviationManagement from 'src/apps/chemscanner/components/AbbreviationManagement';
-
-function RemoveRowBtn({ onClick, node }) {
-  const col = node.columnApi.getColumn('abb');
-  const { headerName } = col.colDef;
-  const newAbb = headerName === 'Abbreviation';
-
-  return (
-    <Button
-      active
-      onClick={() => onClick(node.data, newAbb)}
-      bsSize="xsmall"
-    >
-      <i className="fa fa-minus" />
-    </Button>
-  );
-}
-
-RemoveRowBtn.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  node: PropTypes.object.isRequired,
-};
-
-export default class AbbreviationManagementContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      abbreviations: [],
-      superatoms: [],
-      newAbb: true,
-    };
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.changeTypeCreate = this.changeTypeCreate.bind(this);
-    this.removeRow = this.removeRow.bind(this);
-    this.createAbbreviation = this.createAbbreviation.bind(this);
-  }
-
-  componentDidMount() {
-    fetch('/api/v1/public_chemscanner/abbreviations/all', {
-      credentials: 'same-origin',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method: 'post',
-      body: JSON.stringify({ pageSize: 10, page: 1 })
-    }).then((response) => {
-      if (response.ok === false) {
-        return { abbreviations: [], superatoms: [] };
-      }
-
-      return response.json();
-    }).then((res) => {
-      const { abbreviations, superatoms } = res;
-
-      const abbData = Object.keys(abbreviations).map(k => (
-        { abb: k, smi: abbreviations[k] }
-      ));
-      const superatomData = Object.keys(superatoms).map(satom => (
-        { abb: satom, smi: superatoms[satom] }
-      ));
-
-      this.setState({
-        abbreviations: abbData,
-        superatoms: superatomData,
-      });
-    });
-  }
-
-  onGridReady(e, newAbb) {
-    e.api.sizeColumnsToFit();
-
-    if (newAbb) {
-      this.abbGridApi = e.api;
-    } else {
-      this.superatomGridApi = e.api;
-    }
-  }
-
-  changeTypeCreate() {
-    const { newAbb } = this.state;
-    this.setState({ newAbb: !newAbb });
-  }
-
-  removeRow(data, newAbb) {
-    const gridApi = newAbb ? this.abbGridApi : this.superatomGridApi;
-
-    fetch('/api/v1/chemscanner/abbreviations/remove', {
-      credentials: 'same-origin',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method: 'post',
-      body: JSON.stringify({ data, newAbb })
-    }).then((response) => {
-      if (response.ok === false) return { abbreviations: [] };
-      return response.json();
-    }).then((res) => {
-      if (!res) return;
-
-      const { abbreviations } = res;
-      if (abbreviations.length === 0) return;
-
-      const dataList = [];
-      gridApi.forEachNode((rowNode) => {
-        if (abbreviations.includes(rowNode.data.abb)) {
-          dataList.push(rowNode.data);
-        }
-      });
-
-      gridApi.updateRowData({ remove: dataList });
-    });
-  }
-
-  createAbbreviation(abb, smiles, newAbb) {
-    const gridApi = newAbb ? this.abbGridApi : this.superatomGridApi;
-    if (!gridApi) return;
-
-    fetch('/api/v1/chemscanner/abbreviations/add', {
-      credentials: 'same-origin',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method: 'post',
-      body: JSON.stringify({ abb, smiles, newAbb })
-    }).then((response) => {
-      if (response.ok === false) return {};
-      return response.json();
-    }).then((res) => {
-      if (!res) return;
-
-      const keys = Object.keys(res);
-      if (keys.length === 0) return;
-
-      const abbreviations = keys.map(k => ({ abb: k, smi: res[k] }));
-      gridApi.updateRowData({
-        add: abbreviations,
-        addIndex: 0
-      });
-    });
-  }
-
-  render() {
-    const { abbreviations, superatoms, newAbb } = this.state;
-
-    const deleteCol = {
-      headerName: '',
-      field: 'type',
-      filter: false,
-      cellRendererFramework: RemoveRowBtn,
-      cellRendererParams: {
-        onClick: this.removeRow
-      },
-      headerComponentParams: { headerName: '' }
-    };
-
-    const abbColumnDefs = [
-      { ...deleteCol, width: 15 },
-      { headerName: 'Abbreviation', field: 'abb', width: 120 },
-      { headerName: 'SMILES', field: 'smi' },
-    ];
-
-    const superatomColumnDefs = [
-      { ...deleteCol, width: 40, filter: false },
-      { headerName: 'Superatom', field: 'abb', width: 120 },
-      { headerName: 'SMILES', field: 'smi' },
-    ];
-    const defaultColDef = {
-      filter: true,
-      resizable: true,
-    };
-
-    return (
-      <AbbreviationManagement
-        onGridReady={this.onGridReady}
-        abbColumnDefs={abbColumnDefs}
-        superatomColumnDefs={superatomColumnDefs}
-        defaultColDef={defaultColDef}
-        newAbb={newAbb}
-        abbreviations={abbreviations}
-        superatoms={superatoms}
-        changeTypeCreate={this.changeTypeCreate}
-        createAbbreviation={this.createAbbreviation}
-      />
-    );
-  }
-}
diff --git a/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js b/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
deleted file mode 100644
index b90e67d8e..000000000
--- a/app/packs/src/components/chemscanner/containers/ArchivedManagementContainer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { setArchivedValue } from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import ArchivedManagement from '../components/ArchivedManagement';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-function ArchivedManagementContainer(props) {
-  const { files } = props;
-  const setArchivedValueFunc = props.setArchivedValue;
-
-  const archivedFiles = [];
-  const activedFiles = [];
-
-  files.forEach((f) => {
-    const file = f.toJS();
-    const { archived } = file.extendedMetadata;
-
-    if (archived == null || archived === false) {
-      activedFiles.push(file);
-    } else {
-      archivedFiles.push(file);
-    }
-  });
-
-  return (
-    <ArchivedManagement
-      archivedFiles={archivedFiles}
-      activedFiles={activedFiles}
-      setArchivedValue={setArchivedValueFunc}
-    />
-  );
-}
-
-ArchivedManagementContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  setArchivedValue: PropTypes.func.isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ArchivedManagementContainer);
diff --git a/app/packs/src/components/chemscanner/containers/FileStorageContainer.js b/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
deleted file mode 100644
index bc26ca3a3..000000000
--- a/app/packs/src/components/chemscanner/containers/FileStorageContainer.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { List } from 'immutable';
-import PropTypes from 'prop-types';
-import base64 from 'base-64';
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import {
-  deleteItems,
-  beilsteinExport,
-  downloadFile,
-  getScannedOutputs,
-  hideItems,
-  approveItems,
-  retrieveStoredFiles,
-  rescanFiles,
-  saveImage,
-  uploadToStore,
-  fetchPreview,
-  updateMetadata,
-  setArchivedValue,
-  setExpand,
-  // updatePreview
-} from '../actions/storedFileActions';
-import * as types from '../actions/ActionTypes';
-
-import FileStorage from '../components/FileStorage';
-
-import { isPngImage, isSvgImage } from '../utils';
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-  schemes: state.get('schemes'),
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-  ui: state.get('ui'),
-  cddInstance: state.get('chemdrawInstance'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  dispatch,
-  retrieveStoredFiles: () => dispatch(retrieveStoredFiles()),
-  uploadToStore: (files) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(uploadToStore(files)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  rescanFiles: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(rescanFiles(ids)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  setArchivedValue: (ids, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(setArchivedValue(ids, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  showItems: (ids, type, display) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(getScannedOutputs(ids, type, display)).then((action) => {
-      const scannedSchemes = action.response.get('schemes');
-      if (!scannedSchemes || scannedSchemes.size === 0) {
-        dispatch({ type: types.UNSET_LOADING });
-        return;
-      }
-
-      const imageList = scannedSchemes.reduce((arr, scheme) => {
-        const imageData = scheme.get('pictureData') || '';
-        const id = scheme.get('id');
-        if (imageData.length === 0 || !id) return arr;
-
-        const isSaved = scheme.get('isSaved') || false;
-        if (isSaved) return arr;
-
-        const uuid = scheme.get('uuid');
-        arr.push({ id, fileUuid: uuid, imageData });
-        return arr;
-      }, []);
-
-      if (imageList.length > 0) {
-        saveImage(imageList);
-      }
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  hideItems: (ids, type) => dispatch(hideItems(ids, type)),
-  downloadFile: id => dispatch(downloadFile(id)),
-  toggleExpand: (data) => {
-    const { id, type } = data;
-    const value = !data.expanded;
-
-    const actionType = types[`TOGGLE_${type.toLocaleUpperCase()}_EXPAND`];
-    if (actionType) dispatch(setExpand(id, type, value));
-
-    return null;
-  },
-  openImportModal: data => dispatch({ type: types.SET_IMPORT, data }),
-  deleteItems: (ids, type, version) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(deleteItems(ids, type, version)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  beilsteinExport: (ids) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return beilsteinExport(ids).then(res => res.json()).then((res) => {
-      const listFiles = res.files || [];
-
-      listFiles.forEach((file) => {
-        const raw = base64.decode(file.b64 || '');
-        const { length } = raw;
-        const ab = new ArrayBuffer(length);
-        const ia = new Uint8Array(ab);
-        for (let i = 0; i < length; i += 1) ia[i] = raw.charCodeAt(i);
-        const blob = new Blob([ab], { type: 'application/zip' });
-
-        const a = document.createElement('a');
-        a.style = 'display: none';
-        document.body.appendChild(a);
-        const url = window.URL.createObjectURL(blob);
-        a.href = url;
-        a.download = file.name;
-        a.click();
-        window.URL.revokeObjectURL(url);
-      });
-
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  approveItems: (ids, type, val) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(approveItems(ids, type, val)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  updateMetadata: (id, type, extendedMetadata) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateMetadata(id, type, extendedMetadata)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  getPreview: (id) => {
-    const { dispatch } = dispatchProps;
-    dispatch({ type: types.SET_LOADING });
-
-    return fetchPreview(id).then((res) => {
-      let imageData = res.image_data;
-      if (!imageData) return dispatch({ type: types.UNSET_LOADING });
-
-      const isPng = isPngImage(imageData);
-      const isSvg = isSvgImage(imageData);
-
-      let type = isPng ? 'image/png' : 'image/svg+xml';
-      if (!isPng && !isSvg) {
-        type = 'image/png';
-        const { cddInstance } = stateProps;
-
-        if (RegExp('<?xml.*').test(imageData)) {
-          cddInstance.loadCDXML(imageData);
-        } else {
-          cddInstance.loadB64CDX(imageData);
-        }
-
-        const b64png = cddInstance.g.instanceHub.chemDraw.documentToPreviewPNG();
-        imageData = `data:image/png;base64,${b64png}`;
-        cddInstance.clear();
-
-        saveImage([{ id, imageData }]);
-      }
-
-      const blob = new Blob([imageData], { type });
-      const objUrl = window.URL.createObjectURL(blob);
-
-      dispatch({ type: types.GET_SCHEME_PREVIEW, imageData: objUrl, id });
-
-      return dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-class FileStorageContainer extends React.Component {
-  componentDidMount() {
-    this.props.retrieveStoredFiles();
-  }
-
-  render() {
-    const { files, schemes, ui } = this.props;
-    const version = ui.get('version');
-    const reload = ui.get('reloadGrid');
-
-    return (
-      <FileStorage
-        {...this.props}
-        files={files}
-        schemes={schemes}
-        version={version}
-        reload={reload}
-      />
-    );
-  }
-}
-
-FileStorageContainer.propTypes = {
-  files: PropTypes.instanceOf(List).isRequired,
-  schemes: PropTypes.instanceOf(List).isRequired,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(FileStorageContainer);
diff --git a/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js b/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
deleted file mode 100644
index 7001a8e2c..000000000
--- a/app/packs/src/components/chemscanner/containers/HeaderMenuContainer.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { scanFile, updateReagents } from '../actions/fileActions';
-import { saveImage } from '../actions/storedFileActions';
-import { changeView } from '../actions/uiActions';
-import * as types from '../actions/ActionTypes';
-import HeaderMenu from '../components/HeaderMenu';
-
-const HeaderMenuContainer = props => <HeaderMenu {...props} />;
-
-const mapStateToProps = state => ({
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  scanFile: (files, getMol) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(scanFile(files, getMol)).then((action) => {
-      dispatch({ type: types.UNSET_LOADING });
-
-      const scannedSchemes = action.response.get('schemes');
-      if (!scannedSchemes || scannedSchemes.size === 0) return;
-
-      const imageList = scannedSchemes.reduce((arr, scheme) => {
-        const imageData = scheme.get('pictureData');
-        if (!imageData) return arr;
-
-        const id = scheme.get('id');
-        if (imageData.length === 0 || !id) return arr;
-
-        const isSaved = scheme.get('isSaved') || false;
-        if (isSaved) return arr;
-
-        const uuid = scheme.get('uuid');
-        arr.push({ id, fileUuid: uuid, imageData });
-        return arr;
-      }, []);
-
-      if (imageList.length === 0) return;
-
-      saveImage(imageList);
-    });
-  },
-  cleanUp: () => (
-    new Promise((resolve) => {
-      dispatch({ type: types.SET_LOADING });
-      resolve();
-    }).then(() => dispatch({
-      type: types.CLEAN_UP
-    })).then(() => dispatch({
-      type: types.UNSET_LOADING
-    }))
-  ),
-  showNotification: notification => dispatch({
-    type: types.SET_NOTIFICATION, notification
-  }),
-  resetNotification: () => dispatch({ type: types.RESET_NOTIFICATION }),
-  toggleAbbView: () => dispatch({ type: types.TOGGLE_ABB_VIEW }),
-  changeScannedFileView: () => dispatch(changeView(types.VIEW_SCANNED_FILES)),
-  changeAbbreviationView: () => dispatch(changeView(types.VIEW_ABBREVIATION)),
-  changeFileStorageView: () => dispatch(changeView(types.VIEW_FILE_STORAGE)),
-  changeArchivedManagementView: () => dispatch(changeView(types.VIEW_ARCHIVED_MANAGEMENT)),
-  updateReagents: (reactionId, updateInfo) => {
-    if (reactionId === 0) return;
-
-    dispatch(updateReagents(reactionId, updateInfo));
-  }
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(HeaderMenuContainer);
diff --git a/app/packs/src/components/chemscanner/containers/ImportModalContainer.js b/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
deleted file mode 100644
index 697c963fb..000000000
--- a/app/packs/src/components/chemscanner/containers/ImportModalContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import * as types from '../actions/ActionTypes';
-
-import { importData } from '../actions/storedFileActions';
-import ImportModal from '../components/ChemscannerImportModal';
-
-const ImportModalContainer = props => <ImportModal {...props} />;
-
-const fetchCollections = () => (
-  fetch('/api/v1/collections/all_as_tree', {
-    credentials: 'same-origin',
-    method: 'GET',
-  }).then(res => res.json())
-);
-
-const mapStateToProps = state => ({
-  show: state.get('ui').get('import'),
-  selectedItems: state.get('ui').get('selected'),
-  fetchCollections,
-});
-
-const mapDispatchToProps = dispatch => ({
-  closeModal: () => dispatch({ type: types.UNSET_IMPORT }),
-  importData: (data, collection, maintainShortLabel) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(importData(data, collection, maintainShortLabel)).then(() => (
-      dispatch({ type: types.UNSET_LOADING })
-    ));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ImportModalContainer);
diff --git a/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js b/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
deleted file mode 100644
index 22f6d65e1..000000000
--- a/app/packs/src/components/chemscanner/containers/LoadingModalContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import LoadingModal from 'src/apps/chemscanner/components/LoadingModal';
-
-const LoadingModalContainer = props => <LoadingModal {...props} />;
-
-const mapStateToProps = state => ({
-  loading: state.get('ui').get('loading'),
-});
-
-export default connect(mapStateToProps)(LoadingModalContainer);
diff --git a/app/packs/src/components/chemscanner/containers/MainContentContainer.js b/app/packs/src/components/chemscanner/containers/MainContentContainer.js
deleted file mode 100644
index a5a7d1d6a..000000000
--- a/app/packs/src/components/chemscanner/containers/MainContentContainer.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import MainContent from '../components/MainContent';
-
-import { removeFile } from '../actions/fileActions';
-
-import * as types from '../actions/ActionTypes';
-
-import { updateItemField, fetchSvg } from '../actions/storedFileActions';
-
-const MainContentContainer = props => <MainContent {...props} />;
-
-const mapStateToProps = state => ({
-  files: state.get('files'),
-  schemes: state.get('schemes'),
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-  editingMoleculeId: state.get('ui').get('editingMoleculeId'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  dispatch,
-  removeFile: ({ fileUid }) => dispatch(removeFile(fileUid)),
-  closeEditorModal: () => dispatch({
-    type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0
-  }),
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  saveMoleculeMdl: (mdl) => {
-    const { dispatch } = dispatchProps;
-    const id = stateProps.editingMoleculeId;
-
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateItemField(id, 'molecules', 'mdl', mdl)).then(() => {
-      dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId: 0 });
-    }).then(() => dispatch(fetchSvg([id]))).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(MainContentContainer);
diff --git a/app/packs/src/components/chemscanner/containers/NotificationContainer.js b/app/packs/src/components/chemscanner/containers/NotificationContainer.js
deleted file mode 100644
index 18e220fa6..000000000
--- a/app/packs/src/components/chemscanner/containers/NotificationContainer.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Alert } from 'react-bootstrap';
-
-import { scanFile } from 'src/apps/chemscanner/actions/fileActions';
-import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-
-class Notification extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      show: !(props.notification.trim() === '')
-    };
-
-    this.handleDismiss = this.handleDismiss.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState({
-      show: !(newProps.notification.trim() === '')
-    });
-  }
-
-  handleDismiss() {
-    this.setState({ show: false });
-  }
-
-  render() {
-    const { notification } = this.props;
-    const { show } = this.state;
-
-    if (!show) return <span />;
-
-    return (
-      <Alert
-        bsStyle="danger"
-        className="chemscanner-alert-notification"
-        onDismiss={this.handleDismiss}
-      >
-        {notification}
-      </Alert>
-    );
-  }
-}
-
-Notification.propTypes = {
-  notification: PropTypes.string
-};
-
-Notification.defaultProps = {
-  notification: ''
-};
-
-const NotificationContainer = props => <Notification {...props} />;
-
-const mapStateToProps = state => ({
-  notification: state.get('ui').get('notification'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  scanFile: (files, getMol) => {
-    dispatch({ type: types.SET_LOADING });
-    dispatch(scanFile(files, getMol)).then(() => dispatch({
-      type: types.UNSET_LOADING
-    }));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(NotificationContainer);
diff --git a/app/packs/src/components/chemscanner/containers/RootContainer.js b/app/packs/src/components/chemscanner/containers/RootContainer.js
deleted file mode 100644
index 9bb12cfa6..000000000
--- a/app/packs/src/components/chemscanner/containers/RootContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-import Root from 'src/apps/chemscanner/components/Root';
-import setCddInstance from 'src/apps/chemscanner/actions/chemdrawInstanceActions';
-
-const RootContainer = props => <Root {...props} />;
-
-const mapStateToProps = state => ({
-  ui: state.get('ui'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  attachEditor: (id) => {
-    const config = {
-      id,
-      viewonly: true,
-      licenseUrl: '/cdjs/sample/ChemDraw-JS-License.xml',
-      config: {
-        properties: {
-          StyleSheet: 'ACS Document 1996',
-          chemservice: 'https://chemdrawdirect.perkinelmer.cloud/rest/'
-        }
-      },
-      callback: cdd => dispatch(setCddInstance(cdd)),
-      errorCallback: e => console.log(e),
-    };
-
-    // eslint-disable-next-line no-undef
-    perkinelmer.ChemdrawWebManager.attach(config);
-  },
-  getCurrentVersion: () => dispatch(getCurrentVersion()),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(RootContainer);
diff --git a/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js b/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
deleted file mode 100644
index 4826671d2..000000000
--- a/app/packs/src/components/chemscanner/containers/ScannedItemsContainer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import * as types from '../actions/ActionTypes';
-
-import ScannedMolecules from '../components/ScannedMolecules';
-import ScannedReactions from '../components/ScannedReactions';
-
-import {
-  removeMolecule,
-  removeReaction,
-  editMoleculeComment,
-  editReactionComment,
-  selectMolecule,
-  selectReaction,
-} from '../actions/scannedItemActions';
-
-import { updateItemField, toggleAliasPolymer } from '../actions/storedFileActions';
-
-const ScannedItemsContainer = (props) => {
-  const { display } = props;
-
-  if (display === 'molecules') return <ScannedMolecules {...props} />;
-  if (display !== 'reactions') return <span />;
-
-  return <ScannedReactions {...props} />;
-};
-
-const mapStateToProps = state => ({
-  reactions: state.get('reactions'),
-  molecules: state.get('molecules'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  editComment: (itemType, fileUid, schemeIdx, id, comment) => {
-    if (itemType === 'molecules') {
-      dispatch(editMoleculeComment(id, fileUid, schemeIdx, comment));
-    } else if (itemType === 'reactions') {
-      dispatch(editReactionComment(id, fileUid, schemeIdx, comment));
-    }
-  },
-  removeItem: (itemType, fileUid, schemeIdx, id) => {
-    if (itemType === 'molecules') {
-      dispatch(removeMolecule(id, fileUid, schemeIdx));
-    } else if (itemType === 'reactions') {
-      dispatch(removeReaction(id, fileUid, schemeIdx));
-    }
-  },
-  selectItem: (itemType, fileUid, schemeIdx, id) => {
-    if (itemType === 'molecules') {
-      dispatch(selectMolecule(id, fileUid, schemeIdx));
-    } else if (itemType === 'reactions') {
-      dispatch(selectReaction(id, fileUid, schemeIdx));
-    }
-  },
-  updateItemField: (id, type, field, value) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(updateItemField(id, type, field, value)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  toggleAliasPolymer: (moleculeId, atomIdx) => {
-    dispatch({ type: types.SET_LOADING });
-
-    return dispatch(toggleAliasPolymer(moleculeId, atomIdx)).then(() => {
-      dispatch({ type: types.UNSET_LOADING });
-    });
-  },
-  editMoleculeMdl: (moleculeId) => {
-    if (!moleculeId) return;
-
-    dispatch({ type: types.SET_EDITING_MOLECULE_ID, moleculeId });
-  }
-});
-
-ScannedItemsContainer.propTypes = {
-  display: PropTypes.string.isRequired
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ScannedItemsContainer);
diff --git a/app/packs/src/components/chemscanner/middleware/api.js b/app/packs/src/components/chemscanner/middleware/api.js
deleted file mode 100644
index 3582f5b24..000000000
--- a/app/packs/src/components/chemscanner/middleware/api.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import 'whatwg-fetch';
-import { camelizeKeys } from 'humps';
-
-export const CALL_API = 'Call API';
-
-const callApi = (endpoint, options = {}) => (
-  fetch(endpoint, options).then((response) => {
-    if (!response.ok) return Promise.reject(response);
-
-    const contentType = response.headers.get('content-type');
-    const jsonType = contentType.indexOf('application/json') !== -1;
-
-    if (jsonType) {
-      return response.json().then(json => camelizeKeys(json));
-    }
-
-    return response;
-  })
-);
-
-export default store => next => (action) => {
-  const api = action[CALL_API];
-  if (typeof api === 'undefined') {
-    return next(action);
-  }
-
-  const { endpoint, options } = api;
-  let { normalizer } = api;
-  if (typeof endpoint !== 'string') {
-    throw new Error('Specify a string endpoint URL.');
-  }
-  if (!normalizer) normalizer = res => res;
-
-  return callApi(endpoint, options).then(response => next({
-    response: normalizer(response, store, action.type),
-    ...action
-  }));
-};
diff --git a/app/packs/src/components/chemscanner/middleware/chemdraw.js b/app/packs/src/components/chemscanner/middleware/chemdraw.js
deleted file mode 100644
index ee861f41b..000000000
--- a/app/packs/src/components/chemscanner/middleware/chemdraw.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as types from 'src/apps/chemscanner/actions/ActionTypes';
-import { CALL_API } from 'src/apps/chemscanner/middleware/api';
-import { extractReactionFromId } from 'src/apps/chemscanner/utils';
-
-const cleanUpPromise = (cddInstance, mdl) => {
-  const loadPromise = new Promise((resolve) => {
-    cddInstance.clear();
-    cddInstance.loadMOL(mdl, (cdxml, err) => {
-      if (!err) resolve(cdxml);
-    });
-  });
-
-  return loadPromise.then(() => {
-    const version = cddInstance.getVersion().split('.')[0];
-
-    if (version === '18') {
-      cddInstance.g.instanceHub.chemDraw.handleCommand('selectAll');
-      cddInstance.g.instanceHub.chemDraw.handleCommand('cleanStructure');
-    } else {
-      const clean = cddInstance.g.instanceHub.commandLibrary.getOrCreate(356);
-      const selectAll = cddInstance.g.instanceHub.commandLibrary.getOrCreate(54);
-      selectAll.handleCommand();
-      clean.handleCommand();
-    }
-
-    return new Promise(resolve => cddInstance.getMOL(mol => resolve(mol)));
-  });
-};
-
-export default store => next => (action) => {
-  const { type } = action;
-  if (type !== types.CLEAN_UP) return next(action);
-
-  const molecules = store.getState().get('molecules');
-  const reactions = store.getState().get('reactions');
-  const cddInstance = store.getState().get('chemdrawInstance');
-
-  let selectedMolecules = molecules.filter(m => m.get('selected') || false);
-  let selectedReactions = reactions.filter(m => m.get('selected') || false);
-
-  if (selectedMolecules.size === 0 && selectedReactions.size === 0) {
-    selectedMolecules = molecules;
-    selectedReactions = reactions;
-  }
-
-  const promiseChain = selectedMolecules.reduce((chain, m) => (
-    chain.then((chainRes) => {
-      const mdl = m.get('mdl');
-
-      return cleanUpPromise(cddInstance, mdl).then((cleanedMdl) => {
-        const id = m.get('id');
-        chainRes.push({ mid: id, mdl: cleanedMdl });
-        return chainRes;
-      });
-    })
-  ), Promise.resolve([]));
-
-  return selectedReactions.reduce((chain, r) => (
-    ['reactants', 'reagents', 'products'].reduce((rChain, group) => {
-      const groupMol = r.get(group) || [];
-      const rId = r.get('id');
-
-      return groupMol.reduce((gChain, m) => (
-        gChain.then((chainRes) => {
-          const mdl = m.get('mdl');
-
-          return cleanUpPromise(cddInstance, mdl).then((cleanedMdl) => {
-            const id = m.get('id');
-            chainRes.push({
-              rId, group, mid: id, mdl: cleanedMdl
-            });
-            return chainRes;
-          });
-        })
-      ), rChain);
-    }, chain)
-  ), promiseChain).then((resArray) => {
-    const molArray = [];
-    const reactionArray = [];
-
-    resArray.forEach((res) => {
-      const {
-        group, mdl, mid, rId
-      } = res;
-
-      if (!rId) {
-        molArray.push(res);
-        return;
-      }
-
-      const reaction = reactionArray.find(r => r.id === rId);
-      if (reaction) {
-        const molecule = reaction[group].find(m => m.id === mid);
-        molecule.mdl = mdl;
-      } else {
-        const simpleReaction = extractReactionFromId(reactions, rId);
-        const molecule = simpleReaction[group].find(m => m.id === mid);
-        molecule.mdl = mdl;
-        reactionArray.push(simpleReaction);
-      }
-    });
-
-    return next({
-      type,
-      [CALL_API]: {
-        endpoint: '/api/v1/public_chemscanner/svg/mdl',
-        options: {
-          credentials: 'same-origin',
-          method: 'post',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({ molecules: molArray, reactions: reactionArray })
-        }
-      }
-    });
-  });
-};
diff --git a/app/packs/src/components/chemscanner/reactionUtils.js b/app/packs/src/components/chemscanner/reactionUtils.js
deleted file mode 100644
index bf940d5cc..000000000
--- a/app/packs/src/components/chemscanner/reactionUtils.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const getSchemeMolecules = (reaction, molecules) => {
-  const fileUid = reaction.get('fileUuid');
-  const schemeIdx = reaction.get('schemeIdx');
-
-  return molecules.filter(m => (
-    m.get('schemeIdx') === schemeIdx && m.get('fileUuid') === fileUid
-  ));
-};
-
-export const getReactionReactants = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reactantExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionReagents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('reagentExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionSolvents = (reaction, reactionMolecules) => {
-  const ids = reaction.get('solventExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionProducts = (reaction, reactionMolecules) => {
-  const ids = reaction.get('productExtIds');
-  return reactionMolecules.filter(m => ids.includes(m.get('externalId'))) || [];
-};
-
-export const getReactionGroups = (reaction, molecules) => {
-  const reactionMolecules = getSchemeMolecules(reaction, molecules);
-
-  const reactants = getReactionReactants(reaction, reactionMolecules);
-  const reagents = getReactionReagents(reaction, reactionMolecules);
-  const solvents = getReactionSolvents(reaction, reactionMolecules);
-  const products = getReactionProducts(reaction, reactionMolecules);
-
-  return {
-    reactants, reagents, solvents, products
-  };
-};
diff --git a/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js b/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
deleted file mode 100644
index d2a5441c9..000000000
--- a/app/packs/src/components/chemscanner/reducers/chemdrawInstance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const chemdrawInstance = createReducer(null, {
-  [types.SET_CDD_INSTANCE]: (state, action) => action.cdd,
-});
-
-export default chemdrawInstance;
diff --git a/app/packs/src/components/chemscanner/reducers/files.js b/app/packs/src/components/chemscanner/reducers/files.js
deleted file mode 100644
index 53232e1df..000000000
--- a/app/packs/src/components/chemscanner/reducers/files.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { fromJS, List, Map } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const scanFile = (state, action) => {
-  const { response } = action;
-  if (!response) return state;
-
-  return state.concat(response.get('files') || []);
-};
-
-const files = createReducer(List(), {
-  [types.SCAN_FILE_FOR_MOLECULES]: scanFile,
-  [types.SCAN_FILE_FOR_REACTIONS]: scanFile,
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const source = action.response.get('source');
-    if (!source) return state;
-
-    return state.filterNot(f => (
-      source.includes(f.get('id')) || source.includes(f.get('parentId'))
-    ));
-  },
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const outputFiles = response.get('files');
-    let newState = state;
-
-    outputFiles.forEach((file) => {
-      const idx = newState.findIndex(f => f.get('id') === file.get('id'));
-      if (idx < 0) return;
-
-      newState = newState.update(idx, f => f.merge(file).set('show', true));
-    });
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedFiles = response.files;
-    if (!storedFiles) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newFiles = storedFiles.filter(f => !curIds.includes(f.id));
-
-    return state.concat(fromJS(newFiles));
-  },
-  [types.MARK_CORRECT]: (state, action) => {
-    const { uuid } = action;
-    const idx = state.findIndex(f => f.get('uuid') === uuid);
-
-    return state.updateIn(idx, f => f.set('correct', true));
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const newFiles = response.get('files');
-    if (!newFiles || newFiles.size === 0) return state;
-
-    return state.concat(newFiles);
-  },
-  [types.UPLOAD_TO_STORE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const outputFiles = response.files;
-    if (!outputFiles) return state;
-
-    return state.concat(fromJS(outputFiles));
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    return state.map((f) => {
-      const checkFileUid = fileUid && f.get('uuid') === fileUid;
-      const checkIds = ids.includes(f.get('id') || 0);
-
-      if (checkFileUid || checkIds) {
-        return f.set('display', '').set('show', false);
-      }
-
-      return f;
-    });
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('files');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((f) => {
-      if (ids.includes(f.get('id'))) return f.set('isApproved', val || false);
-
-      return f;
-    });
-  },
-  [types.UPDATE_METADATA]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const request = JSON.parse(action['Call API'].options.body);
-    const { id, data } = request;
-
-    const idx = state.findIndex(f => f.get('id') === id);
-    if (idx < 0) return state;
-
-    return state.update(idx, f => f.set('extendedMetadata', data));
-  },
-  [types.TOGGLE_FILE_EXPAND]: (state, action) => {
-    const { id } = action;
-    if (!id) return state;
-
-    const idx = state.findIndex(f => f.get('id') === id);
-    if (idx < 0) return state;
-
-    return state.update(idx, (f) => {
-      let expanded = f.get('expanded');
-      if (expanded == null) expanded = true;
-
-      let metadata = f.get('extendedMetadata') || Map();
-      metadata = metadata.set('expanded', !expanded);
-
-      return f.set('extendedMetadata', metadata).set('expanded', !expanded);
-    });
-  },
-  [types.SET_ARCHIVED_VALUE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const request = JSON.parse(action['Call API'].options.body);
-    const { ids, value } = request;
-    if (!ids) return state;
-
-    return state.map((f) => {
-      const id = f.get('id');
-      if (!ids.includes(id)) return f;
-
-      let metadata = f.get('extendedMetadata');
-      if (metadata == null) metadata = Map();
-      metadata = metadata.set('archived', value);
-
-      return f.set('extendedMetadata', metadata);
-    });
-  },
-});
-
-export default files;
diff --git a/app/packs/src/components/chemscanner/reducers/index.js b/app/packs/src/components/chemscanner/reducers/index.js
deleted file mode 100644
index 2423aadc7..000000000
--- a/app/packs/src/components/chemscanner/reducers/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import files from './files';
-import schemes from './schemes';
-import reactions from './reactions';
-import molecules from './molecules';
-import chemdrawInstance from './chemdrawInstance';
-import ui from './ui';
-
-export default combineReducers({
-  ui,
-  chemdrawInstance,
-  files,
-  schemes,
-  reactions,
-  molecules,
-});
diff --git a/app/packs/src/components/chemscanner/reducers/molecules.js b/app/packs/src/components/chemscanner/reducers/molecules.js
deleted file mode 100644
index d79918beb..000000000
--- a/app/packs/src/components/chemscanner/reducers/molecules.js
+++ /dev/null
@@ -1,235 +0,0 @@
-import { List, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const molecules = createReducer(List(), {
-  [types.CLEAN_UP]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const cleanedMolecules = response.molecules;
-    if (!cleanedMolecules || cleanedMolecules.length === 0) return state;
-
-    return state.withMutations((mapState) => {
-      cleanedMolecules.forEach((cm) => {
-        const mIndex = mapState.findIndex(m => m.get('id') === cm.id);
-        mapState.update(mIndex, m => m.mergeDeep(cm));
-      });
-    });
-  },
-  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const { reaction } = response;
-
-    const addedMolecules = response.molecules || [];
-    let newState = state.concat(fromJS(addedMolecules));
-
-    const { removedIds } = reaction;
-    newState = newState.filter(m => !removedIds.includes(m.get('id')));
-
-    return newState;
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstMolecule = state.get(0);
-    if (firstMolecule.get('id')) return state;
-
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state.filterNot(m => m.get('fileUid') === fileUid);
-    if (ids.length > 0) {
-      newState = newState.filterNot(m => ids.includes(m.get('schemeId')));
-    }
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstMolecule = state.get(0);
-    if (firstMolecule.get('id')) return state;
-
-    const ids = action.ids || [];
-    return state.filterNot(m => ids.includes(m.get('schemeId')));
-  },
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const fileUid = action.response;
-    return state.filterNot(m => m.get('uid') === fileUid);
-  },
-  [types.HIDE_MOLECULE]: (state, action) => {
-    const { fileUid, schemeIdx, id } = action;
-    return state.filterNot(m => (
-      m.get('externalId') === id &&
-        m.get('schemeIdx') === schemeIdx &&
-        m.get('fileUuid') === fileUid
-    ));
-  },
-  [types.SCAN_FILE_FOR_MOLECULES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const scannedMolecules = response.get('molecules');
-    if (!scannedMolecules) return state;
-
-    let newState = state;
-    scannedMolecules.forEach((molecule) => {
-      const idx = newState.findIndex(sm => sm.get('id') === molecule.get('id'));
-      if (idx < 0) {
-        newState = newState.push(molecule);
-      } else {
-        newState = newState.update(idx, m => m.merge(molecule));
-      }
-    });
-
-    return newState;
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('molecules') || []);
-  },
-  [types.SELECT_MOLECULE]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    const mIndex = state.findIndex(m => (
-      m.get('externalId') === id &&
-        m.get('fileUuid') === fileUid &&
-        m.get('schemeIdx') === schemeIdx
-    ));
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, (m) => {
-      const selected = m.get('selected') || false;
-      return m.set('selected', !selected);
-    });
-  },
-  [types.TOGGLE_MOLECULE_RESIN]: (state, action) => {
-    const {
-      fileUid, cdUid, molId, atomId
-    } = action;
-    const mIndex = state.findIndex(m => (
-      m.get('id') === molId && m.get('fileUid') === fileUid && m.get('cdUid') === cdUid
-    ));
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, m => m.updateIn(['alias'], (aliases) => {
-      const index = aliases.findIndex(alias => alias.get('id') === atomId);
-      return aliases.update(index, (alias) => {
-        const resin = alias.get('resin') || false;
-        return alias.set('resin', !resin);
-      });
-    }));
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedMolecules = response.molecules;
-    if (!storedMolecules) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newMolecules = storedMolecules.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newMolecules));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('molecules');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((m) => {
-      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
-
-      return m;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('molecules');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((m) => {
-      if (ids.includes(m.get('id'))) return m.set('isApproved', val || false);
-
-      return m;
-    });
-  },
-  [types.UPDATE_ITEM_FIELD]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const {
-      id, type, field, value
-    } = JSON.parse(action['Call API'].options.body);
-    if (type !== 'molecules') return state;
-
-    const mIndex = state.findIndex(m => m.get('id') === id);
-    if (mIndex < 0) return state;
-
-    return state.update(mIndex, m => m.set(field, value));
-  },
-  [types.TOGGLE_ALIAS_POLYMER]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const request = JSON.parse(action['Call API'].options.body);
-    const { moleculeId, atomIdx } = request;
-
-    const idx = state.findIndex(m => m.get('id') === moleculeId);
-    if (idx < 0) return state;
-
-    return state.update(idx, (m) => {
-      let extData = m.get('extendedMetadata');
-
-      let polymers = extData.get('polymer') || List();
-      if (polymers.includes(atomIdx)) {
-        polymers = polymers.filter(x => x === atomIdx.toString());
-      } else {
-        polymers = polymers.push(atomIdx);
-      }
-
-      extData = extData.set('polymer', polymers);
-      return m.set('extendedMetadata', extData);
-    });
-  },
-  [types.FETCH_SVG]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    let newState = state;
-
-    response.molecules.forEach((molecule) => {
-      const mIndex = newState.findIndex(m => m.get('id') === molecule.id);
-      if (mIndex < 0) return;
-
-      newState = newState.update(mIndex, m => m.set('svg', molecule.svg));
-    });
-
-    return newState;
-  },
-});
-
-export default molecules;
diff --git a/app/packs/src/components/chemscanner/reducers/reactions.js b/app/packs/src/components/chemscanner/reducers/reactions.js
deleted file mode 100644
index e8ef1a3d7..000000000
--- a/app/packs/src/components/chemscanner/reducers/reactions.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import { List, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const reactions = createReducer(List(), {
-  [types.UPDATE_REAGENTS_SMILES]: (state, action) => {
-    const { response } = action;
-    const { reaction } = response;
-    if (!reaction) return state;
-
-    const { id, svg, reagentExternalIds } = reaction;
-
-    const rIndex = state.findIndex(r => r.get('id') === id);
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => (
-      r.set('svg', svg).set('reagentExtIds', fromJS(reagentExternalIds))
-    ));
-  },
-  [types.CLEAN_UP]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const cleanedReactions = response.reactions;
-    if (!cleanedReactions || cleanedReactions.length === 0) return state;
-
-    return state.withMutations((mapState) => {
-      cleanedReactions.forEach((cr) => {
-        const rIndex = mapState.findIndex(r => r.get('id') === cr.id);
-        mapState.update(rIndex, (r) => {
-          let newR = r.set('svg', cr.svg);
-          ['reactants', 'reagents', 'products'].forEach((group) => {
-            const molGroup = newR.get(group);
-            cr[group].forEach((cm) => {
-              const mIdx = molGroup.findIndex(mm => mm.get('id') === cm.id);
-              newR = newR.updateIn([group, mIdx], m => m.mergeDeep(cm));
-            });
-          });
-
-          return newR;
-        });
-      });
-    });
-  },
-  [types.EDIT_REACTION_COMMENT]: (state, action) => {
-    const {
-      id, fileUid, cdUid, comment
-    } = action;
-    const rIndex = state.findIndex(r => (
-      r.get('fileUid') === fileUid && r.get('cdUid') === cdUid && r.get('id') === id
-    ));
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => r.set('comment', comment));
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstReaction = state.get(0);
-    if (firstReaction.get('id')) return state;
-
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state.filterNot(r => r.get('fileUid') === fileUid);
-    newState = newState.filterNot(r => ids.includes(r.get('schemeId')));
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    // If not logged-in, remove reactions. Otherwise, keep it since we need
-    // reactions information for FileStorage grid
-    const firstReaction = state.get(0);
-    if (firstReaction.get('id')) return state;
-
-    const ids = action.ids || [];
-    return state.filterNot(r => ids.includes(r.get('schemeId')));
-  },
-  [types.DELETE_FILE]: (state, action) => {
-    const fileUid = action.response;
-    return state.filterNot(m => m.get('uid') === fileUid);
-  },
-  [types.HIDE_REACTION]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    return state.filterNot(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('externalId') === id &&
-        r.get('schemeIdx') === schemeIdx
-    ));
-  },
-  [types.SCAN_FILE_FOR_REACTIONS]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('reactions') || []);
-  },
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const scannedReactions = response.get('reactions');
-    if (!scannedReactions) return state;
-
-    let newState = state;
-    scannedReactions.forEach((reaction) => {
-      const idx = newState.findIndex(sr => sr.get('id') === reaction.get('id'));
-      if (idx < 0) {
-        newState = newState.push(reaction);
-      } else {
-        newState = newState.update(idx, r => r.merge(reaction));
-      }
-    });
-
-    return newState;
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    return state.concat(response.get('reactions') || []);
-  },
-  [types.SELECT_REACTION]: (state, action) => {
-    const { id, fileUid, schemeIdx } = action;
-    const rIndex = state.findIndex(r => (
-      r.get('fileUuid') === fileUid &&
-        r.get('schemeIdx') === schemeIdx &&
-        r.get('externalId') === id
-    ));
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, (r) => {
-      const selected = r.get('selected') || false;
-      return r.set('selected', !selected);
-    });
-  },
-  [types.TOGGLE_RESIN_IN_REACTION]: (state, action) => {
-    const {
-      fileUid, cdUid, rId, molId, atomId
-    } = action;
-
-    const rIndex = state.findIndex(r => (
-      r.get('id') === rId && r.get('fileUid') === fileUid && r.get('cdUid') === cdUid
-    ));
-    if (rIndex < 0) return state;
-
-    const findMol = (reaction, mId) => {
-      const rGroup = ['reactants', 'reagents', 'products'];
-      return rGroup.reduce((map, group) => {
-        const idx = reaction.get(group).findIndex(m => m.get('id') === mId);
-        if (idx < 0) return map;
-
-        return { [group]: idx };
-      }, {});
-    };
-
-    const molPos = findMol(state.get(rIndex), molId);
-    const group = Object.keys(molPos)[0];
-    const groupIdx = molPos[group];
-
-    return state.update(rIndex, r => r.updateIn([group, groupIdx, 'alias'], (aliases) => {
-      const index = aliases.findIndex(alias => alias.get('id') === atomId);
-      return aliases.update(index, (alias) => {
-        const resin = alias.get('resin') || false;
-        return alias.set('resin', !resin);
-      });
-    }));
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedReactions = response.reactions;
-    if (!storedReactions) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newReactions = storedReactions.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newReactions));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('reactions');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((r) => {
-      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
-
-      return r;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('reactions');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((r) => {
-      if (ids.includes(r.get('id'))) return r.set('isApproved', val || false);
-
-      return r;
-    });
-  },
-  [types.UPDATE_ITEM_FIELD]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const {
-      id, type, field, value
-    } = JSON.parse(action['Call API'].options.body);
-    if (type !== 'reactions') return state;
-
-    const rIndex = state.findIndex(r => r.get('id') === id);
-    if (rIndex < 0) return state;
-
-    return state.update(rIndex, r => r.set(field, value));
-  },
-  [types.FETCH_SVG]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    let newState = state;
-
-    response.reactions.forEach((reaction) => {
-      const rIndex = newState.findIndex(r => r.get('id') === reaction.id);
-      if (rIndex < 0) return;
-
-      newState = newState.update(rIndex, r => r.set('svg', reaction.svg));
-    });
-
-    return newState;
-  },
-});
-
-export default reactions;
diff --git a/app/packs/src/components/chemscanner/reducers/root.js b/app/packs/src/components/chemscanner/reducers/root.js
deleted file mode 100644
index 2423aadc7..000000000
--- a/app/packs/src/components/chemscanner/reducers/root.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import files from './files';
-import schemes from './schemes';
-import reactions from './reactions';
-import molecules from './molecules';
-import chemdrawInstance from './chemdrawInstance';
-import ui from './ui';
-
-export default combineReducers({
-  ui,
-  chemdrawInstance,
-  files,
-  schemes,
-  reactions,
-  molecules,
-});
diff --git a/app/packs/src/components/chemscanner/reducers/schemes.js b/app/packs/src/components/chemscanner/reducers/schemes.js
deleted file mode 100644
index 506578089..000000000
--- a/app/packs/src/components/chemscanner/reducers/schemes.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { List, Map, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const addSchemes = (state, action) => {
-  const { response } = action;
-  if (!response) return state;
-
-  let outputSchemes = response.get('schemes') || List();
-  if (outputSchemes.size === 0) return state;
-
-  outputSchemes = outputSchemes.map(s => s.delete('pictureData'));
-
-  return state.concat(outputSchemes);
-};
-
-const revokeImageData = (scheme) => {
-  const imageData = scheme.get('imageData');
-  if (!imageData || !imageData.startsWith('blob:')) return;
-
-  window.URL.revokeObjectURL(imageData);
-};
-
-const schemes = createReducer(List(), {
-  [types.SCAN_FILE_FOR_MOLECULES]: addSchemes,
-  [types.SCAN_FILE_FOR_REACTIONS]: addSchemes,
-  [types.GET_SCANNED_OUTPUT]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const outputSchemes = response.get('schemes') || [];
-    let newState = state;
-
-    outputSchemes.forEach((scheme) => {
-      const idx = newState.findIndex(s => s.get('id') === scheme.get('id'));
-      if (idx < 0) return;
-
-      const newScheme = scheme.delete('pictureData').set('show', true);
-      newState = newState.update(idx, s => s.merge(newScheme));
-    });
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const storedSchemes = response.schemes;
-    if (!storedSchemes) return state;
-
-    const curIds = state.map(f => f.get('id'));
-    const newSchemes = storedSchemes.filter(s => !curIds.includes(s.id));
-
-    return state.concat(fromJS(newSchemes));
-  },
-  [types.RESCAN_STORED_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const newSchemes = response.get('schemes');
-    if (!newSchemes || newSchemes.size === 0) return state;
-
-    return state.concat(newSchemes);
-  },
-  [types.HIDE_FILE]: (state, action) => {
-    const { fileUid } = action;
-    const ids = action.ids || [];
-
-    let newState = state;
-    if (fileUid) {
-      const deleteIdx = [];
-      newState = state.map((s, idx) => {
-        if (s.get('fileUuid') === fileUid) {
-          deleteIdx.push(idx);
-          return s.set('display', '').set('show', false);
-        }
-
-        return s;
-      });
-
-      // Delete if not logged-in user
-      const firstScheme = newState.get(0);
-      if (firstScheme && !firstScheme.get('id')) {
-        deleteIdx.reverse().forEach((idx) => {
-          const s = newState.get(idx);
-          revokeImageData(s);
-          newState = newState.delete(idx);
-        });
-      }
-    }
-
-    if (ids.length > 0) {
-      newState = state.map((s) => {
-        const check = (
-          ids.includes(s.get('sourceId')) || ids.includes(s.get('id'))
-        );
-        if (check) return s.set('display', '').set('show', false);
-
-        return s;
-      });
-    }
-
-    return newState;
-  },
-  [types.HIDE_SCHEME]: (state, action) => {
-    const ids = action.ids || [];
-
-    return state.map(s => (
-      ids.includes(s.get('id')) ? s.set('display', '').set('show', false) : s
-    ));
-  },
-  [types.DELETE_STORED_FILE]: (state, action) => {
-    const source = action.response.get('source') || [];
-    const scheme = action.response.get('scheme') || [];
-    if (!source && !scheme) return state;
-
-    state.filter(s => source.includes(s.get('sourceId'))).forEach(s => revokeImageData(s));
-    state.filter(s => scheme.includes(s.get('id'))).forEach(s => revokeImageData(s));
-
-    const newState = state.filterNot(s => source.includes(s.get('sourceId')));
-    return newState.filterNot(s => scheme.includes(s.get('id')));
-  },
-  [types.GET_SCHEME_PREVIEW]: (state, action) => {
-    const { id, imageData } = action;
-    const idx = state.findIndex(s => s.get('id') === id);
-
-    return state.update(idx, s => s.set('imageData', imageData));
-  },
-  [types.APPROVE_FILE]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.APPROVE_SCHEME]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const ids = response.get('schemes');
-    const val = response.get('val');
-    if (!ids) return state;
-
-    return state.map((s) => {
-      if (ids.includes(s.get('id'))) return s.set('isApproved', val || false);
-
-      return s;
-    });
-  },
-  [types.TOGGLE_SCHEME_EXPAND]: (state, action) => {
-    const { id } = action;
-    if (!id) return state;
-
-    const idx = state.findIndex(s => s.get('id') === id);
-    if (idx < 0) return state;
-
-    return state.update(idx, (s) => {
-      const expanded = s.get('expanded') || false;
-
-      let metadata = s.get('extendedMetadata') || Map();
-      metadata = metadata.set('expanded', !expanded);
-
-      return s.set('extendedMetadata', metadata).set('expanded', !expanded);
-    });
-  }
-});
-
-export default schemes;
diff --git a/app/packs/src/components/chemscanner/reducers/ui.js b/app/packs/src/components/chemscanner/reducers/ui.js
deleted file mode 100644
index 810243395..000000000
--- a/app/packs/src/components/chemscanner/reducers/ui.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Map, fromJS } from 'immutable';
-
-import * as types from '../actions/ActionTypes';
-import { createReducer } from '../utils';
-
-const defaultState = Map({
-  view: types.VIEW_SCANNED_FILES,
-  loading: false,
-  import: false,
-  reloadGrid: false,
-  version: '',
-  allVersion: [],
-  selected: [],
-  editingMoleculeId: 0,
-  notification: ''
-});
-
-const ui = createReducer(defaultState, {
-  [types.CHANGE_VIEW]: (state, action) => state.set('view', action.view),
-  [types.GET_CURRENT_VERSION]: (state, action) => {
-    const { response } = action;
-    if (!response) return state;
-
-    const { version, listVersion } = action.response;
-    let newState = state;
-
-    if (version) newState = newState.set('version', version);
-    if (listVersion) {
-      newState = newState.set('allVersion', fromJS(listVersion));
-      newState = newState.set('view', types.VIEW_FILE_STORAGE);
-    }
-
-    return newState;
-  },
-  [types.RETRIEVE_STORED_FILES]: state => state.set('reloadGrid', true),
-  [types.SET_LOADING]: state => state.set('loading', true),
-  [types.UNSET_LOADING]: state => state.set('loading', false),
-  [types.SET_IMPORT]: (state, action) => (
-    state.set('import', true).set('selected', action.data)
-  ),
-  [types.UNSET_IMPORT]: state => state.set('import', false),
-  [types.SET_NOTIFICATION]: (state, action) => state.set('notification', action.notification),
-  [types.RESET_NOTIFICATION]: state => state.set('notification', ''),
-  [types.SET_EDITING_MOLECULE_ID]: (state, action) => (
-    state.set('editingMoleculeId', action.moleculeId || 0)
-  ),
-});
-
-export default ui;
diff --git a/app/packs/src/components/chemscanner/store/configureStore.js b/app/packs/src/components/chemscanner/store/configureStore.js
deleted file mode 100644
index 762ab44e8..000000000
--- a/app/packs/src/components/chemscanner/store/configureStore.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-
-import api from '../middleware/api';
-import chemdraw from '../middleware/chemdraw';
-import rootReducer from '../reducers/root';
-
-const configureStore = preloadedState => createStore(
-  rootReducer,
-  preloadedState,
-  applyMiddleware(thunk, chemdraw, api)
-);
-
-export default configureStore;
diff --git a/app/packs/src/components/chemscanner/utils.js b/app/packs/src/components/chemscanner/utils.js
deleted file mode 100644
index 27d67029b..000000000
--- a/app/packs/src/components/chemscanner/utils.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-import { fromJS } from 'immutable';
-
-export const generateExcelReactionRow = (reaction) => {
-  const {
-    reactants, reagents, solvents, products
-  } = reaction;
-
-  const reactantSmiles = reactants.map(m => m.get('canoSmiles')).join('.');
-  const productSmiles = products.map(m => m.get('canoSmiles')).join('.');
-
-  const reagentSmiles = reagents.concat(solvents).map(m => (
-    m.get('canoSmiles')
-  )).join('.');
-
-  const reactionSmiles = [
-    reactantSmiles,
-    reagentSmiles,
-    productSmiles,
-  ].join('>');
-
-  const reactantsSdf = reactants.map(m => m.get('mdl')).join('\n$$$$\n');
-  const reagentsSdf = reagents.map(m => m.get('mdl')).join('\n$$$$\n');
-  const productsSdf = products.map(m => m.get('mdl')).join('\n$$$$\n');
-
-  const assembleDesc = (arr, m, idx) => {
-    if (!m.description) return arr;
-
-    return arr.concat([
-      `reactant ${idx + 1}`,
-      `  ${m.description}`
-    ]);
-  };
-
-  const reactantsDesc = reactants.reduce(assembleDesc, []).join('\n');
-  const productsDesc = products.reduce(assembleDesc, []).join('\n');
-
-  const reactionSteps = reaction.steps.reduce((arr, step) => {
-    const lines = ['description', 'temperature', 'time'].reduce((lineArr, prop) => {
-      const val = step[prop];
-      if (!val || val === '\n') return lineArr;
-      lineArr.push(`  ${prop}: ${val}`);
-
-      return lineArr;
-    }, []);
-
-    lines.unshift(`step ${step.number}`);
-    lines.push(`  reagents: ${step.reagentSmiles.join(',')}`);
-
-    return arr.concat(lines);
-  }, []).join('\n');
-
-  return [
-    reactionSmiles,
-    reaction.temperature,
-    reaction.yield,
-    reaction.time,
-    reaction.description,
-    reactionSteps,
-    reactantsSdf,
-    reagentsSdf,
-    productsSdf,
-    reactantsDesc,
-    productsDesc
-  ];
-};
-
-export const generateExcelMoleculeRow = mol => ([
-  mol.smi,
-  mol.mdl,
-  mol.inchistring,
-  mol.inchikey,
-  mol.description
-]);
-
-export const extractMoleculeFromGroup = molGroup => molGroup.map(m => ({
-  id: m.id,
-  mdl: m.mdl,
-  description: m.description,
-}));
-
-export const extractReaction = (reaction) => {
-  const reagentsSmiles = [].concat(
-    (reaction.abbreviations || []).map(abb => abb.smi),
-    (reaction.addedReagentsSmi || []),
-    (reaction.addedSolventsSmi || []),
-  ).filter(x => x);
-
-  return {
-    id: reaction.id,
-    reactants: extractMoleculeFromGroup(reaction.reactants),
-    reagents: extractMoleculeFromGroup(reaction.reagents),
-    products: extractMoleculeFromGroup(reaction.products),
-    reagents_smiles: reagentsSmiles
-  };
-};
-
-export const extractReactionFromId = (reactions, rid) => {
-  const reaction = reactions.findLast(r => r.get('id') === rid).toJS();
-  return extractReaction(reaction);
-};
-
-export const createReducer = (initialState, handlers) => (
-  function reducer(state = initialState, action) {
-    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.type](state, action);
-    }
-
-    return state;
-  }
-);
-
-export const sortMoleculesByClone = (molecules) => {
-  const cloneMap = {};
-  const cloneCountMap = {};
-
-  const rootMolecules = [];
-  const childrenMolecules = [];
-
-  molecules.forEach((m, idx) => {
-    const cloneFrom = m.get('cloneFrom');
-
-    if (cloneFrom) {
-      cloneMap[idx] = cloneFrom;
-      const count = cloneCountMap[cloneFrom] || 0;
-      cloneCountMap[cloneFrom] = count + 1;
-      childrenMolecules.push(m);
-    } else {
-      rootMolecules.push(m);
-    }
-  });
-
-  const newMolecules = new Array(molecules.size).fill(0);
-
-  let pos = 0;
-  const positionMap = {};
-  rootMolecules.forEach((m) => {
-    const extId = m.get('externalId');
-    newMolecules[pos] = m;
-    positionMap[extId] = pos;
-    pos += (cloneCountMap[extId] || 0) + 1;
-  });
-
-  const positionCountMap = {};
-  childrenMolecules.forEach((m) => {
-    const cloneFrom = m.get('cloneFrom');
-    pos = positionCountMap[cloneFrom] || 0;
-    newMolecules[positionMap[cloneFrom] + pos + 1] = m;
-    positionCountMap[cloneFrom] = pos + 1;
-  });
-
-  return fromJS(newMolecules);
-};
-
-export const isPngImage = (imageData) => {
-  const pngB64Begin = 'data:image/png;base64';
-  return RegExp(`${pngB64Begin},.*`).test(imageData);
-};
-
-export const isSvgImage = imageData => (
-  RegExp('.*<svg').test(imageData.slice(0, 200))
-);
diff --git a/app/packs/src/components/chemspectra/ChemSpectra.js b/app/packs/src/components/chemspectra/ChemSpectra.js
deleted file mode 100644
index c314a513d..000000000
--- a/app/packs/src/components/chemspectra/ChemSpectra.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { ChemSpectraClient } from '@complat/chem-spectra-client';
-
-const domLoadedCb = () => {
-  const csElement = document.getElementById('ChemSpectra');
-
-  if (csElement) {
-    ReactDOM.render(
-      <ChemSpectraClient />,
-      csElement,
-    );
-  }
-};
-
-document.addEventListener(
-  'DOMContentLoaded',
-  domLoadedCb,
-);
diff --git a/app/packs/src/components/chemspectra/ChemSpectraEditor.js b/app/packs/src/components/chemspectra/ChemSpectraEditor.js
deleted file mode 100644
index ffecdddc4..000000000
--- a/app/packs/src/components/chemspectra/ChemSpectraEditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { ChemSpectraClient } from '@complat/chem-spectra-client';
-
-const domLoadedCb = () => {
-  const csElement = document.getElementById('ChemSpectraEditor');
-
-  if (csElement) {
-    ReactDOM.render(
-      <ChemSpectraClient editorOnly />,
-      csElement,
-    );
-  }
-};
-
-document.addEventListener(
-  'DOMContentLoaded',
-  domLoadedCb,
-);
diff --git a/app/packs/src/components/collection_management/MyCollections.js b/app/packs/src/components/collection_management/MyCollections.js
deleted file mode 100644
index 2b30afba9..000000000
--- a/app/packs/src/components/collection_management/MyCollections.js
+++ /dev/null
@@ -1,368 +0,0 @@
-import React from 'react';
-import Tree from 'react-ui-tree';
-import { Button, ButtonGroup, FormControl, Modal } from 'react-bootstrap';
-import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import UserInfoIcon from 'src/apps/mydb/collections/UserInfoIcon';
-import PermissionIcons from 'src/apps/mydb/collections/PermissionIcons'
-
-export default class MyCollections extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      active: { id: null },
-      deleted_ids: [],
-
-      tree: {
-        label: 'My Collections',
-        id: -1,
-        children: [{}]
-      },
-      modalProps: {
-        show: false,
-        title: "",
-        component: "",
-        action: null,
-        collection: {},
-        selectUsers: true,
-        isChange: false
-      }
-    }
-    this.addSubcollection=this.addSubcollection.bind(this);
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onStoreChange)
-    CollectionActions.fetchUnsharedCollectionRoots()
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onStoreChange)
-  }
-
-  onStoreChange(state) {
-    let children = state.unsharedRoots.length > 0 ? state.unsharedRoots : [{}];
-
-    this.setState({
-      tree: {
-        label: 'My Collections',
-        id: -1,
-        children: children
-      }
-    });
-  }
-
-  handleChange(tree) {
-    this.setState({
-      tree: tree,
-      isChange: true
-    });
-  }
-
-  isActive(node) {
-    return node === this.state.active ? "node is-active" : "node";
-  }
-
-  hasChildren(node) {
-    return node.children && node.children.length > 0
-  }
-
-  label(node) {
-    if (node.id == -1) {
-      return (
-        <FormControl
-        value ="My Collections"
-        type="text"
-        className="root-label"
-        disabled/>);
-    } else {
-      return (
-        <FormControl
-          className="collection-label"
-          type="text"
-          value={node.label || ''}
-          onChange={(e) => { this.handleLabelChange(e, node) }}
-        />
-      )
-    }
-  }
-
-  handleLabelChange(e, node) {
-    node.label = e.target.value;
-    this.setState({
-      tree: this.state.tree
-    });
-  }
-
-  // TODO: confirmation before start the updating process?
-  bulkUpdate() {
-    // filter empty objects
-    let collections = this.state.tree.children.filter((child) => {
-      return child.label
-    });
-
-    let params = {
-      collections: collections,
-      deleted_ids: this.state.deleted_ids
-    }
-
-    CollectionActions.bulkUpdateUnsharedCollections(params);
-  }
-
-  actions(node) {
-    if (node.id == -1) {
-      const { isChange } = this.state;
-      return (
-        <div className="root-actions">
-          {isChange && <Button
-          id="save-collections-button"
-          bsSize="xsmall"
-          bsStyle="warning"
-          onMouseDown={(e)=>{e.stopPropagation();}}
-          onClick={this.bulkUpdate.bind(this)}> Save </Button>}
-          {this.addCollectionButton(node)}
-        </div>
-      )
-    } else {
-      return (
-        <ButtonGroup className="actions">
-          <Button
-            id="sync-users-btn"
-            bsSize="xsmall"
-            bsStyle="primary"
-            disabled={node.isNew === true}
-            onClick={() => this.doSync(node, 'CreateSync')}
-          >
-            <i className="fa fa-plus"></i> <i className="fa fa-share-alt"></i>
-          </Button>
-
-          {this.addSubcollectionButton(node)}
-
-          <Button
-            bsSize="xsmall"
-            bsStyle="danger"
-            id={`delete-collection-button_${node.id}`}
-            onClick={this.deleteCollection.bind(this, node)}
-          >
-            <i className="fa fa-trash-o"></i>
-          </Button>
-        </ButtonGroup>
-      )
-    }
-  }
-
-  renderSync(node) {
-    let syncOut = node.sync_collections_users;
-    let users = [];
-
-    if (syncOut) {
-      users = syncOut.map((collection, ind) => {
-        return (
-          <div className="node">
-            <span key={ind} className="collection-sync-info">
-              <UserInfoIcon type={collection.type} /> {collection.name}
-              &nbsp; <PermissionIcons pl={collection.permission_level} />
-            </span>
-            <ButtonGroup className="actions">
-              <Button bsSize="xsmall" bsStyle="primary"
-                onClick={() => this.doSync(collection, 'EditSync')}>
-                <i className="fa fa-share-alt">edit</i>
-              </Button>
-              <Button bsSize="xsmall" bsStyle="danger"
-                onClick={() => CollectionActions.deleteSync({ id: collection.id, is_syncd: false })}
-              >
-                <i className="fa fa-share-alt" /> <i className="fa fa-trash-o"></i>
-              </Button>
-            </ButtonGroup>
-
-
-          </div>
-        )
-      })
-    }
-    return (
-      <div>{users.map(u => u)}</div>
-    )
-  }
-
-  doSync(node, action) {
-    let { modalProps, active } = this.state
-    modalProps.title = action == "CreateSync"
-      ? "Synchronize '" + node.label + "'"
-      : "Edit Synchronization"
-    modalProps.show = true
-    modalProps.action = action
-    modalProps.collection = node
-    modalProps.selectUsers = action == "CreateSync"
-      ? true
-      : false
-    active = node
-    this.setState({ modalProps, active })
-  }
-
-  addCollectionButton(node) {
-    return (
-      <Button
-        id="add-new-collection-button"
-        bsSize="xsmall"
-        bsStyle="success"
-        onClick={(e)=>{this.addSubcollection(node);}}
-        onMouseDown={(e)=>{e.stopPropagation();}}
-      >
-        <i className="fa fa-plus"></i>
-      </Button>
-    )
-  }
-
-  addSubcollectionButton(node) {
-    return (
-      <Button
-        id={`add-subcollection-to-collection_${node.id}`}
-        bsSize="xsmall"
-        bsStyle="success"
-        onClick={this.addSubcollection.bind(this, node)}
-      >
-        <i className="fa fa-plus"></i>
-      </Button>
-    )
-  }
-
-  addSubcollection(node) {
-    if (node.children) {
-      node.children.push({
-        id: Math.random(),
-        label: 'New Collection',
-        isNew: true
-      });
-    } else {
-      node.children = [{
-        id: Math.random(),
-        label: 'New Collection',
-        isNew: true
-      }];
-    }
-  }
-
-  deleteCollection(node) {
-    let children = node.children || [];
-    let parent = this.findParentById(this.state.tree, node.id);
-
-    this.removeNodeById(parent, node.id)
-    this.appendChildrenToParent(parent, children)
-
-    if (!node.isNew) {
-      let deleted_ids = this.state.deleted_ids.concat([node.id])
-
-      this.setState({
-        deleted_ids: deleted_ids
-      })
-    }
-  }
-
-  appendChildrenToParent(parent, children) {
-    if (children.length > 0) {
-      children.forEach((child) => {
-        parent.children.push(child);
-      });
-    } else if (parent.label == 'My Collections') {
-      parent.children.push({});
-    }
-  }
-
-  findParentById(root, id) {
-    if (!root.children) {
-      root.children = [];
-      return null;
-    }
-
-    let children = root.children;
-
-    for (let i = 0; i < children.length; i++) {
-      if (children[i].id == id) {
-        return root;
-      } else {
-        let parent = this.findParentById(children[i], id);
-        if (parent) {
-          return parent
-        }
-      }
-    }
-  }
-
-  removeNodeById(parent, id) {
-    parent.children = parent.children.filter((child) => {
-      return child.id != id
-    });
-  }
-
-  onClickNode(node) {
-    if (node.is_locked) {
-      this.setState({
-        active: { id: null }
-      });
-    } else {
-      this.setState({
-        active: node
-      });
-    }
-  }
-
-  handleModalHide() {
-    this.setState({
-      modalProps: {
-        show: false,
-        title: "",
-        component: "",
-        action: null,
-        collection: {},
-        selectUsers: true,
-      }
-    });
-  }
-
-  renderNode(node) {
-    if (!Object.keys(node).length == 0) {
-      return (
-        <div>
-          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
-            {this.label(node)}
-            {this.actions(node)}
-          </span>
-          {this.renderSync(node)}
-        </div>
-      );
-    }
-  }
-  render() {
-    let mPs = this.state.modalProps
-    let mPsC = mPs.collection
-    return (
-      <div className="tree">
-        <Tree
-          paddingLeft={20}                         // left padding for children nodes in pixels
-          tree={this.state.tree}                   // tree object
-          isNodeCollapsed={this.isNodeCollapsed}
-          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
-          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
-        />
-        <Modal animation show={mPs.show} onHide={this.handleModalHide.bind(this)}>
-          <Modal.Header closeButton>
-            <Modal.Title>{mPs.title}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <ManagingModalSharing collectionId={mPsC.id}
-              onHide={this.handleModalHide.bind(this)}
-              permissionLevel={mPsC.permission_level}
-              sampleDetailLevel={mPsC.sample_detail_level} reactionDetailLevel={mPsC.reaction_detail_level}
-              wellplateDetailLevel={mPsC.wellplate_detail_level} screenDetailLevel={mPsC.screen_detail_level}
-              selectUsers={mPs.selectUsers}
-              collAction={mPs.action} />
-          </Modal.Body>
-        </Modal>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/collection_management/MySharedCollections.js b/app/packs/src/components/collection_management/MySharedCollections.js
deleted file mode 100644
index da2b0acc8..000000000
--- a/app/packs/src/components/collection_management/MySharedCollections.js
+++ /dev/null
@@ -1,300 +0,0 @@
-import React from 'react';
-import Tree from 'react-ui-tree';
-import { Button, ButtonGroup, FormControl, Modal } from 'react-bootstrap';
-import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-
-export default class MySharedCollections extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      active: { id: null },
-      deleted_ids: [],
-
-      tree: {
-        label: 'My Shared Collections',
-        id: -1,
-        children: [{}]
-      },
-      modalProps: {
-        show: false,
-        title: "",
-        component: "",
-        action: null
-      }
-    }
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onStoreChange)
-    CollectionActions.fetchSharedCollectionRoots()
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onStoreChange)
-  }
-
-  onStoreChange(state) {
-    let children = state.sharedRoots.length > 0 ? state.sharedRoots : [{}];
-
-    this.setState({
-      tree: {
-        label: 'My Shared Collections',
-        children: children
-      }
-    });
-  }
-
-  handleChange(tree) {
-    let oldTree = this.state.tree
-    let children = oldTree.children
-    children.map((child, i) => {
-      if ('label' in tree && typeof (tree.label) == 'string' && tree.label == child.label) {
-        children[i] = tree
-        return
-      }
-    });
-    oldTree.children = children
-    this.setState({
-      tree: oldTree
-    });
-
-  }
-
-  isActive(node) {
-    return node === this.state.active ? "node is-active" : "node";
-  }
-
-  hasChildren(node) {
-    return node.children && node.children.length > 0
-  }
-
-  label(node) {
-    if (node.label == "My Shared Collections") {
-      return (
-        <FormControl 
-        value ="My Shared Collections" 
-        type="text" 
-        className="root-label" 
-        disabled/>);
-    } else if (node.is_locked) {
-      return (
-        <FormControl className="collection-label" type="text"
-          disabled
-          value={node.label || ''}
-        />
-      )
-
-    } else {
-      return (
-        <FormControl className="collection-label" type="text"
-          value={node.label || ''}
-          onChange={(e) => { this.handleLabelChange(e, node) }}
-        />
-      )
-    }
-  }
-
-  handleLabelChange(e, node) {
-    node.label = e.target.value;
-    this.setState({
-      tree: this.state.tree
-    });
-  }
-
-  // TODO: confirmation before start the updating process?
-  bulkUpdate() {
-    // filter empty objects
-    let collections = this.state.tree.children.filter((child) => {
-      return child.label
-    });
-
-    let params = {
-      collections: collections,
-      deleted_ids: this.state.deleted_ids
-    }
-
-    CollectionActions.bulkUpdateUnsharedCollections(params);
-  }
-
-  actions(node) {
-    if (node.label == "My Shared Collections") {
-      return (
-        <div className="root-actions">
-          <Button bsSize="xsmall" bsStyle="warning"
-            onClick={this.bulkUpdate.bind(this)}
-            onMouseDown={(e)=>{e.stopPropagation();}}
-            >
-            Update
-          </Button>
-        </div>
-      )
-    } else if (!node.is_locked) {
-      return (
-        <ButtonGroup className="actions">
-          <Button bsSize="xsmall" bsStyle="primary"
-            onClick={() => this.editShare(node)}>
-            <i className="fa fa-share-alt"></i>
-          </Button>
-          <Button bsSize="xsmall" bsStyle="danger" onClick={this.deleteCollection.bind(this, node)}>
-            <i className="fa fa-trash-o"></i>
-          </Button>
-        </ButtonGroup>
-      )
-    }
-  }
-
-  editShare(node) {
-    let { modalProps, active } = this.state
-    modalProps.title = "Update Share Settings for '" + node.label + "'"
-    modalProps.show = true
-    active = node
-    this.setState({ modalProps, active })
-  }
-  deleteCollection(node) {
-    let children = node.children || [];
-    let parent = this.findParentById(this.state.tree, node.id);
-
-    this.removeNodeById(parent, node.id)
-    this.appendChildrenToParent(parent, children)
-
-    if (!node.isNew) {
-      let deleted_ids = this.state.deleted_ids.concat([node.id])
-
-      this.setState({
-        deleted_ids: deleted_ids
-      })
-    }
-  }
-
-  appendChildrenToParent(parent, children) {
-    if (children.length > 0) {
-      children.forEach((child) => {
-        parent.children.push(child);
-      });
-    } else if (parent.label == 'My Shared Collections') {
-      parent.children.push({});
-    }
-  }
-
-  findParentById(root, id) {
-    if (!root.children) {
-      root.children = [];
-      return null;
-    }
-
-    let children = root.children;
-
-    for (let i = 0; i < children.length; i++) {
-      if (children[i].id == id) {
-        return root;
-      } else {
-        let parent = this.findParentById(children[i], id);
-        if (parent) {
-          return parent
-        }
-      }
-    }
-  }
-
-  removeNodeById(parent, id) {
-    parent.children = parent.children.filter((child) => {
-      return child.id != id
-    });
-  }
-
-  onClickNode(node) {
-    if (node.is_locked) {
-      this.setState({
-        active: { id: null }
-      });
-    } else {
-      this.setState({
-        active: node
-      });
-    }
-  }
-
-  handleModalHide() {
-    this.setState({
-      modalProps: {
-        show: false,
-        title: "",
-        component: "",
-        action: null
-      }
-    });
-  }
-
-  renderNode(node) {
-    if (!Object.keys(node).length == 0) {
-      if (node.is_locked) {
-        return (
-          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
-            {this.label(node)}
-            {this.actions(node)}
-          </span>
-        )
-      } else {
-        return (
-          <span className={this.isActive(node)} onClick={this.onClickNode.bind(this, node)}>
-            {this.label(node)}
-            {this.actions(node)}
-          </span>
-        );
-
-      }
-
-    }
-  }
-
-
-
-  render() {
-    let actNode = this.state.active
-    let trees = () => this.state.tree.children.map((e, i) => {
-      return (
-        <Tree
-          key={i}
-          paddingLeft={20}                         // left padding for children nodes in pixels
-          tree={e}                   // tree object
-          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
-          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
-        />
-      )
-    })
-
-    return (
-      <div className="tree">
-        <Tree
-          paddingLeft={20}                         // left padding for children nodes in pixels
-          tree={{
-            label: 'My Shared Collections',
-            id: -1,
-          }}                   // tree object
-          onChange={this.handleChange.bind(this)}  // onChange(tree) tree object changed
-          renderNode={this.renderNode.bind(this)}  // renderNode(node) return react element
-        />
-        {trees()}
-        <Modal animation show={this.state.modalProps.show} onHide={this.handleModalHide.bind(this)}>
-          <Modal.Header closeButton>
-            <Modal.Title>{this.state.modalProps.title}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <ManagingModalSharing collectionId={actNode.id}
-              onHide={this.handleModalHide.bind(this)}
-              permissionLevel={actNode.permission_level}
-              sampleDetailLevel={actNode.sample_detail_level} reactionDetailLevel={actNode.reaction_detail_level}
-              wellplateDetailLevel={actNode.wellplate_detail_level} screenDetailLevel={actNode.screen_detail_level}
-              selectUsers={false}
-              collAction="Update" />
-          </Modal.Body>
-        </Modal>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/collection_management/SharedWithMeCollections.js b/app/packs/src/components/collection_management/SharedWithMeCollections.js
deleted file mode 100644
index 6d96879ac..000000000
--- a/app/packs/src/components/collection_management/SharedWithMeCollections.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-import Tree from 'react-ui-tree';
-import { Button, ButtonGroup, FormControl, OverlayTrigger, Popover } from 'react-bootstrap';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-
-export default class SharedWithMeCollections extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tree: {
-        label: 'Shared with me Collections',
-        id: -1,
-        children: [{}]
-      }
-    }
-    this.onStoreChange = this.onStoreChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onStoreChange)
-    CollectionActions.fetchRemoteCollectionRoots()
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onStoreChange)
-  }
-
-  onStoreChange(state) {
-    const children = state.remoteRoots.length > 0 ? state.remoteRoots : [{}];
-
-    children.map((child) => {
-      if (child.is_locked) {
-        let label = '';
-        if (child.shared_by != null) {
-          label = `by ${child.shared_by.initials} (${child.shared_by.name})`;
-        }
-        if (child.shared_to != null) {
-          label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;
-        }
-        child.label = label;
-      }
-      return child;
-    });
-
-    this.setState({
-      tree: {
-        label: 'Shared with me Collections',
-        children
-      }
-    });
-  }
-
-  handleClick() {
-    this.setState({ show: !this.state.show });
-  }
-
-  label(node) {
-    if(node.label == "Shared with me Collections") {
-      return (
-        <FormControl 
-        value ="Synchronized with me Collections" 
-        type="text" 
-        className="root-label" 
-        disabled/>);
-    } else {
-      return (
-        <FormControl
-          className="collection-label"
-          type="text"
-          disabled
-          value={node.label || ''}
-        />
-      )
-    }
-  }
-
-  actions(node) {
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        delete collection: <br /> {node.label} ?<br />
-        <ButtonGroup>
-          <Button bsStyle="danger" bsSize="xsmall" onClick={() => CollectionActions.rejectShared({ id: node.id })}>
-          Yes
-          </Button>
-          <Button bsStyle="warning" bsSize="xsmall" onClick={this.handleClick} >
-          No
-          </Button>
-        </ButtonGroup>
-      </Popover>
-    );
-
-    if (!node.is_locked && node.label !== 'Shared with me Collections') {
-      if (typeof (node.shared_to) === 'undefined' || !node.shared_to) {
-        return (
-          <ButtonGroup className="actions">
-            <OverlayTrigger
-              animation
-              placement="bottom"
-              root
-              trigger="focus"
-              overlay={popover}
-            >
-              <Button bsSize="xsmall" bsStyle="danger" >
-                <i className="fa fa-trash-o" />
-              </Button>
-            </OverlayTrigger>
-          </ButtonGroup>
-        )
-      }
-    }
-    return (
-      <div />
-    )
-  }
-
-  renderNode(node) {
-    if (!Object.keys(node).length == 0) {
-      return (
-        <span className="node">
-          {this.label(node)}
-          {this.actions(node)}
-        </span>
-      );
-    }
-    return (
-      <div />
-    )
-  }
-
-  render() {
-    const trees = () => this.state.tree.children.map((e, i) => {
-      return (
-        <Tree
-          key={i}
-          draggable={false}
-          paddingLeft={20}
-          tree={e}
-          renderNode={this.renderNode.bind(this)}
-        />
-      )
-    })
-
-    return (
-      <div className="tree">
-        <Tree
-          draggable={false}
-          paddingLeft={20}
-          tree={{
-            label: 'Shared with me Collections',
-            id: -1,
-          }}
-          renderNode={this.renderNode.bind(this)}
-        />
-        {trees()}
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/collection_management/SyncWithMeCollections.js b/app/packs/src/components/collection_management/SyncWithMeCollections.js
deleted file mode 100644
index 3e232d5e0..000000000
--- a/app/packs/src/components/collection_management/SyncWithMeCollections.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-import Tree from 'react-ui-tree';
-import { Button, ButtonGroup, FormControl, OverlayTrigger, Popover } from 'react-bootstrap';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-
-export default class SyncWithMeCollections extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tree: {
-        label: 'Synchronized with me Collections',
-        id: -1,
-        children: [{}],
-      }
-    }
-    this.onStoreChange = this.onStoreChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  componentDidMount() {
-    CollectionStore.listen(this.onStoreChange)
-    CollectionActions.fetchSyncInCollectionRoots()
-  }
-
-  componentWillUnmount() {
-    CollectionStore.unlisten(this.onStoreChange)
-  }
-
-  onStoreChange(state) {
-    const children = state.syncInRoots.length > 0 ? state.syncInRoots : [{}];
-    children.map((child) => {
-      if (child.is_locked) {
-        let label = '';
-        if (child.shared_by != null) {
-          label = `by ${child.shared_by.initials} (${child.shared_by.name})`;
-        }
-        if (child.shared_to != null) {
-          label += ` with ${child.shared_to.initials} (${child.shared_to.name})`;
-        }
-        child.label = label;
-      }
-      return child;
-    });
-
-    this.setState({
-      tree: {
-        label: 'Synchronized with me Collections',
-        children
-      }
-    });
-  }
-
-  handleClick() {
-    this.setState({ show: !this.state.show });
-  }
-
-  label(node) {
-    if (node.root) {
-      return (
-        <FormControl 
-        value ="Synchronized with me Collections" 
-        type="text" 
-        className="root-label" 
-        disabled/>);
-    }
-    return (
-      <FormControl
-        className="collection-label"
-        type="text"
-        disabled
-        value={node.label || ''}
-      />
-    )
-  }
-
-  actions(node) {
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        delete collection: <br /> {node.label} ?<br />
-        <ButtonGroup>
-          <Button bsStyle="danger" bsSize="xsmall" onClick={() => CollectionActions.rejectSync({ id: node.id, is_syncd: true })}>
-          Yes
-          </Button>
-          <Button bsStyle="warning" bsSize="xsmall" onClick={this.handleClick} >
-          No
-          </Button>
-        </ButtonGroup>
-      </Popover>
-    );
-    if (!node.is_locked && node.label !== 'Synchronized with me Collections') {
-      if (typeof (node.user) !== 'undefined' && node.user.type === 'Person') {
-        return (
-          <ButtonGroup className="actions">
-            <OverlayTrigger
-              animation
-              placement="bottom"
-              onExit={document.body.click()}
-              root
-              trigger="focus"
-              overlay={popover}
-            >
-              <Button bsSize="xsmall" bsStyle="danger" >
-                <i className="fa fa-trash-o" />
-              </Button>
-            </OverlayTrigger>
-          </ButtonGroup>
-        )
-      }
-    }
-    return (
-      <div />
-    )
-  }
-
-  renderNode(node) {
-    if (!Object.keys(node).length == 0) {
-      return (
-        <span className="node">
-          {this.label(node)}
-          {this.actions(node)}
-        </span>
-      );
-    }
-    return (
-      <div />
-    )
-  }
-
-  render() {
-    const trees = () => this.state.tree.children.map((e, i) => {
-      return (
-        <Tree
-          key={i}
-          draggable={false}
-          paddingLeft={20}
-          tree={e}
-          renderNode={this.renderNode.bind(this)}
-        />
-      )
-    })
-
-    return (
-      <div className="tree">
-        <Tree
-          draggable={false}
-          paddingLeft={20}
-          tree={{
-            label: 'Synchronized with me Collections',
-            root: true,
-            id: -1,
-            path: -1
-          }}
-          renderNode={this.renderNode.bind(this)}
-        />
-        {trees()}
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/common/CustomTextEditor.js b/app/packs/src/components/common/CustomTextEditor.js
deleted file mode 100644
index a1486db99..000000000
--- a/app/packs/src/components/common/CustomTextEditor.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-
-export default class CustomTextEditor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: this.props.value
-        };
-    }
-    // The following workaround is necessary to prevent React Data Grid from
-    // setting input data to the wrong cell when cellRangeSelection is used.
-    // https://github.com/adazzle/react-data-grid/issues/1460#issuecomment-461552949
-    componentDidMount() {
-        document.addEventListener('mousedown', this.handleMouseDown, true);
-    }
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleMouseDown, true);
-    }
-    handleMouseDown = (e) => {
-        e.stopPropagation();
-        this.props.onCommit();
-    }
-    
-    getValue() {
-        const key = this.props.column.key;
-        return { [key]: this.state.value };
-    }
-
-    handleChange = (e) => {
-        this.setState({ value: e.target.value });
-    };
-
-    getInputNode() {
-        return this.refs.input;
-    }
-
-    disableContainerStyles() {
-        return true;
-    }
-
-    render() {
-        return (<input
-            ref="input"
-            value={this.state.value}
-            onChange={this.handleChange}
-            style={{
-                width: this.props.column.width,
-                height: this.props.height
-            }}
-        />);
-    }
-}
\ No newline at end of file
diff --git a/app/packs/src/components/common/RepoMetadataModal.js b/app/packs/src/components/common/RepoMetadataModal.js
deleted file mode 100644
index 7defa8a65..000000000
--- a/app/packs/src/components/common/RepoMetadataModal.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-export default class RepoMetadataModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false,
-      metadata: []
-    };
-    this.loadMetadata = this.loadMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadMetadata();
-  }
-
-  loadMetadata() {
-    const { elementId, elementType } = this.props;
-    RepositoryFetcher.previewMetadata(elementId, elementType).then((result) => {
-      this.setState({ metadata: result.metadata });
-    });
-  }
-
-  render() {
-    const { modalShow, metadata } = this.state;
-    const { elementId, elementType } = this.props;
-    return (
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_metadata">Preview/Download Metadata</Tooltip>}
-        >
-          <Button
-            onClick={() => this.setState({ modalShow: true })}
-            style={{ marginLeft: '5px' }}
-          >
-            <i className="fa fa-file-code-o" />&nbsp;
-            Metadata
-          </Button>
-        </OverlayTrigger>
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="news-preview-dialog"
-        >
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              <h4>
-                <Label>
-                  {elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())}
-                </Label>
-              </h4>
-            </div>
-            <div style={{
-              maxHeight: '50vh',
-              overflow: 'auto',
-              whiteSpace: 'pre',
-              backgroundColor: 'black',
-              color: 'white',
-              fontFamily: 'monospace'
-            }}
-            >
-              {metadata && metadata.length > 0 ? metadata.find(mt => mt.element_type === elementType.charAt(0).toUpperCase().concat(elementType.slice(1).toLowerCase())).metadata_xml : ''}
-            </div>
-            <br />
-            <ButtonToolbar>
-              <Button
-                bsStyle="warning"
-                onClick={() => this.setState({ modalShow: false })}
-              > Close
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={() => RepositoryFetcher.zipPreviewMetadata(elementId, elementType)}
-              > Download
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-RepoMetadataModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired
-};
diff --git a/app/packs/src/components/common/RepoPreviewImage.js b/app/packs/src/components/common/RepoPreviewImage.js
deleted file mode 100644
index 7827481ed..000000000
--- a/app/packs/src/components/common/RepoPreviewImage.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImageModal from './ImageModal';
-import RepoSpectraBtn from './RepoSpectra';
-
-const RepoPreviewImage = (props) => {
-  const {
-    element, analysis, isLogin, previewImg, title
-  } = props;
-  let hasPop = true;
-  let fetchNeeded = false;
-  let fetchId = 0;
-  let fetchFilename = '';
-  let imageStyle = { style: { cursor: 'default' } };
-  if (previewImg.startsWith('data:image')) {
-    fetchNeeded = true;
-    fetchId = analysis.preview_img.id;
-    fetchFilename = analysis.preview_img.filename;
-  } else {
-    hasPop = false;
-    imageStyle = { style: { cursor: 'default', display: 'none' } };
-  }
-  return (
-    <div className="preview">
-      <div className="spectra" {...imageStyle}>
-        <RepoSpectraBtn element={element} analysis={analysis} isLogin={isLogin} />
-      </div>
-      <ImageModal
-        imageStyle={imageStyle}
-        hasPop={hasPop}
-        previewObject={{ src: previewImg }}
-        popObject={{
-          title, src: previewImg, fetchNeeded, fetchId, fetchFilename
-        }}
-      />
-    </div>
-  );
-};
-
-RepoPreviewImage.propTypes = {
-  element: PropTypes.object,
-  analysis: PropTypes.object,
-  isLogin: PropTypes.bool,
-  previewImg: PropTypes.string.isRequired,
-  title: PropTypes.string
-};
-
-RepoPreviewImage.defaultProps = {
-  isLogin: false,
-  title: ''
-};
-
-export default RepoPreviewImage;
diff --git a/app/packs/src/components/common/RepoPublicComment.js b/app/packs/src/components/common/RepoPublicComment.js
deleted file mode 100644
index 7753daeb4..000000000
--- a/app/packs/src/components/common/RepoPublicComment.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl, Label } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import PublicActions from '../actions/PublicActions';
-
-export default class RepoPublicComment extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false
-    };
-    this.updateComment = this.updateComment.bind(this);
-  }
-
-  updateComment() {
-    const { id, type, pageType, pageId } = this.props;
-    RepositoryFetcher.reviewerComment(id, type, this.commentInput.value)
-      .then((result) => {
-        this.setState({ modalShow: false });
-        if (pageType === 'reactions') {
-          PublicActions.displayReaction(pageId || id);
-        } else {
-          PublicActions.displayMolecule(pageId);
-        }
-      });
-  }
-
-  render() {
-    const { modalShow } = this.state;
-    const { isReviewer, userInfo, title } = this.props;
-    const defaultAttrs = {
-      style: {
-        height: '400px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    let btnTbl = (<span />);
-    let commentModal = (<span />);
-    const style = { height: '20px', width: '20px', borderRadius: '50%', border: '1px' };
-    const hasComment = userInfo != '';
-
-    if (hasComment === true) {
-      btnTbl = (
-        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data</Tooltip>}>
-          <Button bsSize="xsmall" bsStyle="warning" style={style} onClick={() => this.setState({ modalShow: true })}>
-            <i className="fa fa-info" />
-          </Button>
-        </OverlayTrigger>
-      );
-    } else if (hasComment === false && isReviewer === true) {
-      btnTbl = (
-        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Important information about this data (edit)</Tooltip>}>
-          <Button bsSize="xsmall" style={style} onClick={() => this.setState({ modalShow: true })}>
-            <i className="fa fa-info" />
-          </Button>
-        </OverlayTrigger>
-      );
-    }
-
-    if (isReviewer === true) {
-      commentModal = (
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="pub-info-dialog"
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>
-              Note for {title}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <FormControl
-              componentClass="textarea"
-              defaultValue={userInfo || ''}
-              {...defaultAttrs}
-              inputRef={(m) => { this.commentInput = m; }}
-            />
-            <ButtonToolbar>
-              <Button
-                bsStyle="warning"
-                onClick={() => this.setState({ modalShow: false })}
-              > Close
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={() => this.updateComment()}
-              > Update
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      );
-    } else {
-      commentModal = (
-        <Modal
-          show={modalShow}
-          onHide={() => this.setState({ modalShow: false })}
-          dialogClassName="pub-info-dialog"
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>
-              Note for {title}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: 'auto', whiteSpace: 'pre-wrap' }}>
-            {userInfo}
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return (
-      <span>
-        {btnTbl}
-        {commentModal}
-      </span>
-    );
-  }
-}
-
-RepoPublicComment.propTypes = {
-  id: PropTypes.number.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  userInfo: PropTypes.string,
-  isReviewer: PropTypes.bool,
-  type: PropTypes.string,
-  pageId: PropTypes.number,
-  pageType: PropTypes.string,
-  title: PropTypes.string
-};
-
-RepoPublicComment.defaultProps = {
-  isReviewer: false,
-  type: '',
-  pageId: null,
-  pageType: 'reactions',
-  userInfo: '',
-  title: ''
-};
diff --git a/app/packs/src/components/common/RepoReviewAuthorsModal.js b/app/packs/src/components/common/RepoReviewAuthorsModal.js
deleted file mode 100644
index 6389f2285..000000000
--- a/app/packs/src/components/common/RepoReviewAuthorsModal.js
+++ /dev/null
@@ -1,522 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ButtonToolbar, OverlayTrigger, Tooltip, InputGroup, Checkbox, Table } from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import { findIndex, filter, uniq, flattenDeep } from 'lodash';
-import { OrcidIcon } from '../../libHome/RepoCommon';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import SelectionField from '../common/SelectionField';
-import PublicFetcher from '../fetchers/PublicFetcher';
-import CollaboratorFetcher from '../fetchers/CollaboratorFetcher';
-import ReviewActions from '../actions/ReviewActions';
-import DeleteConfirmBtn from '../common/DeleteConfirmBtn';
-
-const addAffTooltip = <Tooltip id="addAff_tooltip">Add affiliation for this Publication</Tooltip>;
-const removeAffTooltip = <Tooltip id="rmAff_tooltip">Remove this affiliation from this Publication</Tooltip>;
-
-const lineAff = (creator, aid, affs, onDeleteAff) => {
-  const removeBtn = (
-    <OverlayTrigger placement="right" overlay={removeAffTooltip} >
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        onClick={() => onDeleteAff(creator, aid)}
-      >
-        <i className="fa fa-trash-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-  return (
-    <tr key={uuid.v4()} style={{ lineHeight: '2em' }}>
-      <td colSpan="4" width="90%">{affs[aid]}</td>
-      <td align="right" width="10%">{ removeBtn }</td>
-    </tr>
-  );
-};
-
-const secAff = (fields, g, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
-  return (
-    <tr className="aff-line" style={{ lineHeight: '2em' }}>
-      <td width="30%">
-        <SelectionField
-          options={departments}
-          value={(fields[`${g.id}@line_department`]) || ''}
-          field={`${g.id}@line_department`}
-          placeholder="e.g. Institute of Organic Chemistry"
-          onChange={onInputChange}
-          isCreatable
-        />
-      </td>
-      <td width="40%">
-        <SelectionField
-          options={organizations}
-          value={(fields[`${g.id}@line_organization`]) || ''}
-          field={`${g.id}@line_organization`}
-          placeholder="e.g. Karlsruhe Institute of Technology"
-          onChange={onInputChange}
-          isCreatable
-        />
-      </td>
-      <td width="20%">
-        <SelectionField
-          options={countries}
-          value={(fields[`${g.id}@line_country`]) || ''}
-          field={`${g.id}@line_country`}
-          onChange={onInputChange}
-          placeholder="e.g. Germany"
-        />
-      </td>
-      <td width="10%" align="right" >
-        <OverlayTrigger placement="right" overlay={addAffTooltip} >
-          <Button
-            bsSize="xsmall"
-            bsStyle="success"
-            onClick={() => onAddAff(g)}
-          >
-            <i className="fa fa-plus" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-      </td>
-    </tr>
-  );
-};
-
-const affbody = (taggData, creator, fields, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) => {
-  const affs = taggData.affiliations || {};
-  const mainAff = creator.affiliationIds && creator.affiliationIds.length > 0 ?
-    creator.affiliationIds.map(aid => lineAff(creator, aid, affs, onDeleteAff)) : '';
-  const moreAff = secAff(fields, creator, countries, organizations, departments, onAddAff, onDeleteAff, onInputChange) || '';
-
-  return (
-    <span>
-      {mainAff}
-      {moreAff}
-    </span>
-  );
-
-}
-
-export default class RepoReviewAuthorsModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      taggData: null,
-      modalShow: false,
-      selectedAuthors: null,
-      collaborations: [],
-      countries: [],
-      fields: {},
-      organizations: [],
-      departments: [],
-    };
-
-    this.handleSelectAuthors = this.handleSelectAuthors.bind(this);
-    this.loadCollaborations = this.loadCollaborations.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.onAddAff = this.onAddAff.bind(this);
-    this.onDeleteAff = this.onDeleteAff.bind(this);
-    this.onAddNewAuthor = this.onAddNewAuthor.bind(this);
-    this.onSave = this.onSave.bind(this);
-    this.loadOrcid = this.loadOrcid.bind(this);
-    this.handleDeleteAuthor = this.handleDeleteAuthor.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadCollaborations();
-    PublicFetcher.affiliations('countries').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ countries: affOption });
-    });
-    PublicFetcher.affiliations('organizations').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ organizations: affOption });
-    });
-    PublicFetcher.affiliations('departments').then((result) => {
-      const affOption = result.affiliations.map(a => ({ label: a, value: a }))
-        .filter(a => a.value && a.value.length > 1);
-      this.setState({ departments: affOption });
-    });
-  }
-
-  componentWillUnmount() {
-    this.setState({
-      taggData: null
-    });
-  }
-
-  onAddNewAuthor() {
-    const { selectedAuthors, collaborations } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const { affiliations, creators, affiliation_ids, author_ids } = taggData;
-
-    const coidx = findIndex(collaborations, o => o.id === selectedAuthors.value);
-    const selCol = collaborations[coidx];
-    const affIds = selCol.current_affiliations.map(ca => (ca.id));
-
-    selCol.current_affiliations.map((ca) => {
-      affiliations[ca.id] = [ca.department, ca.organization, ca.country].join(', ');
-    });
-
-    const newAuthor = {
-      id: selCol.id,
-      familyName: selCol.last_name,
-      givenName: selCol.first_name,
-      name: selCol.name,
-      ORCID: selCol.orcid,
-      affiliationIds: affIds
-    };
-
-    creators.push(newAuthor);
-
-    //collaborations.splice(coidx, 1);
-
-    taggData.creators = creators;
-    taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids.concat(affIds)));
-    author_ids.push(newAuthor.id);
-    taggData.author_ids = author_ids;
-    taggData.affiliations = affiliations;
-    this.setState({ taggData, selectedAuthors: null });
-  }
-
-  onAddAff(g) {
-    const { fields } = this.state;
-    const taggData = this.state.taggData || this.props.taggData;
-    const department = fields[`${g.id}@line_department`];
-    const organization = fields[`${g.id}@line_organization`];
-    const country = fields[`${g.id}@line_country`];
-    const { affiliations, creators, affiliation_ids } = taggData;
-
-    const params = {
-      department, organization, country
-    };
-    UsersFetcher.findAndCreateAff(params)
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          affiliations[result.id] = result.aff_output;
-          g.affiliationIds.push(result.id);
-          const idx = findIndex(creators, o => o.id === g.id);
-          // authors.splice(idx, 1, result.user);
-          fields[`${g.id}@line_department`] = '';
-          fields[`${g.id}@line_organization`] = '';
-          fields[`${g.id}@line_country`] = '';
-          taggData.affiliations = affiliations;
-          affiliation_ids.push(result.id);
-          taggData.affiliation_ids = uniq(flattenDeep(affiliation_ids));
-          taggData.creators[idx] = g;
-
-          this.setState({ taggData, fields });
-        }
-      });
-  }
-
-  onDeleteAff(g, aid) {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators } = taggData;
-
-    const ax = findIndex(g.affiliationIds, o => o.id === aid);
-    g.affiliationIds.splice(ax, 1);
-    const cx = findIndex(creators, o => o.id === g.id);
-    taggData.creators[cx] = g;
-    this.setState({ taggData });
-  }
-
-  onSave() {
-    const { taggData } = this.state;
-    const { element } = this.props;
-
-    if (taggData == null) {
-      alert('no changes!');
-      return true;
-    }
-
-    const { creators } = taggData;
-    const authorCount = (creators || []).length;
-
-    if (authorCount > 0 && !this.refBehalfAsAuthor.checked) {
-      alert(`Please confirm you are contributing on behalf of the author${authorCount > 0 ? 's' : ''}.'`);
-      return true;
-    }
-
-    RepositoryFetcher.saveRepoAuthors({ taggData, elementId: element.element_id || element.id, elementType: element.element_type || element.elementType })
-      .then((result) => {
-        if (result.error) {
-          alert(result.error);
-        } else {
-          if (element.elementType === 'Reaction') {
-            ReviewActions.displayReviewReaction(element.id);
-          } else if (element.elementType === 'Sample') {
-            ReviewActions.displayReviewSample(element.id);
-          }
-          this.setState({ taggData: null, modalShow: false });
-        }
-      });
-    return true;
-  }
-
-  loadOrcid() {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators, contributors, author_ids } = taggData;
-    let ids = [];
-    ids.push(contributors.id);
-    ids = ids.concat(author_ids);
-    CollaboratorFetcher.loadOrcidByUserId({ ids }).then((result) => {
-      const orcids = result.orcids || [];
-      const cx = findIndex(orcids, o => o.id === contributors.id);
-      if (cx > -1) {
-        contributors.ORCID = orcids[cx].orcid;
-      }
-
-      creators.forEach((creator, idx) => {
-        const cix = findIndex(orcids, o => o.id === creator.id);
-        if (cix > -1) {
-          creators[idx].ORCID = orcids[cix].orcid;
-        }
-      });
-      taggData.creators = creators;
-      taggData.contributors = contributors;
-      this.setState({ taggData });
-    });
-  }
-
-  handleInputChange(type, ev) {
-    let { fields } = this.state;
-    switch (type) {
-      case 'country':
-        fields.country = ev && ev.value;
-        break;
-      case 'organization':
-        fields.organization = ev && ev.value;
-        break;
-      case 'department':
-        fields.department = ev && ev.value;
-        break;
-      default:
-        if (typeof fields === 'undefined') {
-          fields = {};
-        }
-        fields[type] = ev && ev.value;
-    }
-    this.setState({ fields });
-  }
-
-
-  handleSelectAuthors(val) {
-    if (val) { this.setState({ selectedAuthors: val }); }
-  }
-
-  loadCollaborations() {
-    CollaboratorFetcher.fetchMyCollaborations()
-      .then((result) => {
-        this.setState({
-          collaborations: result.authors
-        });
-      });
-  }
-
-  handleDeleteAuthor(author) {
-    const taggData = this.state.taggData || this.props.taggData;
-    const { creators, author_ids } = taggData;
-    taggData.creators = filter(creators, o => o.id !== author.id);
-    taggData.author_ids = filter(author_ids, o => o !== author.id);
-    this.setState({
-      taggData
-    });
-  }
-
-  contributor() {
-    const taggData = this.state.taggData || this.props.taggData;
-    const contributors = taggData?.contributors || {};
-
-    const orcid = contributors.ORCID == null ? '' : <OrcidIcon orcid={contributors.ORCID} />;
-    const aff = contributors.affiliations && Object.keys(contributors.affiliations).map(k => (
-      <div key={uuid.v4()}>  -{contributors.affiliations[k]}</div>
-    ));
-    return (<div><h5><b>Contributor:</b></h5>{orcid}{contributors.name} <br /> {aff} </div>);
-
-  }
-
-
-  handleClose() {
-    this.setState({ taggData: null, modalShow: false })
-  }
-
-  selectUsers() {
-    const { selectedAuthors, collaborations } = this.state;
-    const taggData = this.state.taggData || this.props.taggData || {};
-    const creators = taggData?.creators || [];
-    const author_ids = taggData?.author_ids || [];
-
-    const affiliations = taggData.affiliations || [];
-    let defaultSelectedAuthors = [];
-
-    const filterCol = (collaborations || []).filter(({ id }) => !(author_ids || []).includes(id));
-
-    const options = filterCol.map(c => (
-      { label: c.name, value: c.id }
-    ));
-
-    if (selectedAuthors == null) {
-      defaultSelectedAuthors = creators.map(au => (
-        { label: au.name, value: au.id }
-      ));
-    } else {
-      defaultSelectedAuthors = selectedAuthors;
-    }
-
-    const authorInfo = creators && creators.map((author) => {
-      const orcid = author.ORCID == null ? '' : <OrcidIcon orcid={author.ORCID} />;
-
-      const affIds = author.affiliationIds || [];
-      const aff = affIds.map(id => (
-        <div key={uuid.v4()}>  -{affiliations[id]}</div>
-      ));
-      return (<div key={uuid.v4()}>{orcid}{author.name}<br />{aff}<br /></div>);
-    });
-
-    const authorCount = (creators || []).length;
-
-    return (
-      <div >
-        <Checkbox inputRef={(ref) => { this.refBehalfAsAuthor = ref; }}>
-          I am contributing on behalf of the author{authorCount > 0 ? 's' : ''}
-        </Checkbox>
-        <InputGroup>
-          <InputGroup.Addon>My Collaboration(s)</InputGroup.Addon>
-          <Select
-            searchable
-            placeholder="Select authors from my collaboration"
-            backspaceRemoves
-            value={defaultSelectedAuthors}
-            defaultValue={defaultSelectedAuthors}
-            valueKey="value"
-            labelKey="label"
-            matchProp="name"
-            options={options}
-            onChange={this.handleSelectAuthors}
-          />
-          <InputGroup.Button>
-            <Button bsStyle="success" onClick={() => this.onAddNewAuthor()}>
-              <i className="fa fa-plus" />
-              Add to Author List
-            </Button>
-          </InputGroup.Button>
-        </InputGroup>
-      </div>
-    );
-  }
-
-  render() {
-    const { modalShow, countries, organizations, departments, fields } = this.state;
-    const { element, disabled } = this.props;
-    const taggData = this.state.taggData || this.props.taggData;
-    const creators = taggData?.creators || [];
-    if (this.props.schemeOnly === true) {
-      return '';
-    }
-
-    let tbody = '';
-
-    tbody = creators.map(creator => (
-      <tbody key={`tbody_${uuid.v1()}`}>
-        <tr key={`tbody_${uuid.v1()}`}>
-          <td>
-            <DeleteConfirmBtn
-              label={creator.name}
-              onClickYes={() => this.handleDeleteAuthor(creator)}
-            />
-            &nbsp;
-          </td>
-          <td>{creator.name}</td>
-          <td><OrcidIcon orcid={creator.ORCID} />{creator.ORCID}</td>
-          <td>
-            {affbody(taggData, creator, fields, countries, organizations, departments, this.onAddAff, this.onDeleteAff, this.handleInputChange)}
-          </td>
-        </tr>
-
-      </tbody>
-    ));
-
-    let btn = (<Button style={{ marginLeft: '5px' }} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-users" />&nbsp;Publication Authors</Button>);
-    if (element?.element_type === 'Collection' || disabled === true) {
-      btn = (<Button disabled={disabled} onClick={() => this.setState({ modalShow: true })}><i className="fa fa-plus" />&nbsp;Add Authors</Button>);
-    }
-
-    return (
-      <span>
-        <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Authors</Tooltip>}>{btn}</OverlayTrigger>
-        <Modal
-          show={modalShow}
-          onHide={this.handleClose}
-          dialogClassName="author-modal-dialog"
-        >
-          <Modal.Body style={{ overflow: 'auto' }}>
-            <div>
-              {this.contributor()}
-              {this.selectUsers()}
-            </div>
-            <br />
-            <div>
-              <Table responsive condensed hover>
-                <thead>
-                  <tr style={{ backgroundColor: '#ddd' }}>
-                    <th width="5%">Action</th>
-                    <th width="10%">Name</th>
-                    <th width="15%">ORCID</th>
-                    <th width="70%">
-                      <Table style={{ backgroundColor: 'unset', margin: 'unset' }}>
-                        <tbody>
-                          <tr>
-                            <td style={{ padding: 'unset' }} width="90%">Affiliation</td>
-                            <td style={{ padding: 'unset' }} width="10%">&nbsp;</td>
-                          </tr>
-                        </tbody>
-                      </Table>
-                    </th>
-                  </tr>
-                </thead>
-                { tbody }
-              </Table>
-            </div>
-
-            <ButtonToolbar>
-              <Button bsStyle="warning" onClick={() => this.handleClose()}> Close</Button>
-              <Button
-                bsStyle="info"
-                onClick={() => this.loadOrcid()}
-              > get ORCID
-              </Button>
-              <Button
-                bsStyle="success"
-                onClick={() => this.onSave()}
-              > Save
-              </Button>
-            </ButtonToolbar>
-          </Modal.Body>
-        </Modal>
-      </span>
-    );
-  }
-}
-
-RepoReviewAuthorsModal.propTypes = {
-  element: PropTypes.object,
-  review_info: PropTypes.object,
-  disabled: PropTypes.bool,
-  schemeOnly: PropTypes.bool,
-  taggData: PropTypes.object.isRequired,
-};
-
-RepoReviewAuthorsModal.defaultProps = {
-  review_info: {},
-  schemeOnly: false,
-  disabled: false,
-  taggData: {}
-};
diff --git a/app/packs/src/components/common/RepoSpectra.js b/app/packs/src/components/common/RepoSpectra.js
deleted file mode 100644
index 0922cbf56..000000000
--- a/app/packs/src/components/common/RepoSpectra.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip, Button, OverlayTrigger } from 'react-bootstrap';
-import { BuildSpcInfos } from '../utils/SpectraHelper';
-import SpectraActions from '../actions/SpectraActions';
-import ViewSpectra from '../ViewSpectra';
-import NotificationActions from '../actions/NotificationActions';
-
-const RepoSpectraBtn = (props) => {
-  const { element, analysis } = props;
-  if (element == null || analysis == null) return null;
-  const spcInfos = BuildSpcInfos(element, analysis);
-  if (spcInfos.length < 1) return null;
-  const toggleSpectraModal = (e) => {
-    e.stopPropagation();
-    if (!props.isLogin) {
-      NotificationActions.add({
-        title: 'View Spectra', message: 'Please log in first.', level: 'warning', position: 'tc'
-      });
-    } else {
-      SpectraActions.ToggleModal();
-      SpectraActions.LoadSpectra.defer(spcInfos);
-    }
-  };
-  return (
-    <span>
-      <OverlayTrigger placement="top" delayShow={500} overlay={<Tooltip id="spectra">click to view spectra</Tooltip>}>
-        <Button
-          bsSize="xsmall"
-          className="button-right"
-          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-          onClick={toggleSpectraModal}
-          disabled={!(spcInfos.length > 0)}
-        >
-          <i className="fa fa-area-chart" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-      <ViewSpectra sample={element} handleSampleChanged={() => { }} handleSubmit={() => { }} />
-    </span>
-  );
-};
-
-RepoSpectraBtn.propTypes = { element: PropTypes.object, analysis: PropTypes.object, isLogin: PropTypes.bool };
-RepoSpectraBtn.defaultProps = { isLogin: false };
-
-export default RepoSpectraBtn;
diff --git a/app/packs/src/components/common/RepoUserComment.js b/app/packs/src/components/common/RepoUserComment.js
deleted file mode 100644
index a1f14dd38..000000000
--- a/app/packs/src/components/common/RepoUserComment.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, OverlayTrigger, ButtonToolbar, Tooltip, FormControl } from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-
-export default class RepoUserComment extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalShow: false
-    };
-    this.sendEmail = this.sendEmail.bind(this);
-  }
-
-  sendEmail() {
-    const { id, type, pageType, pageId } = this.props;
-    RepositoryFetcher.userComment(id, type, pageId || id, pageType, this.commentInput.value)
-      .then((result) => {
-        this.setState({ modalShow: false });
-      });
-  }
-
-  render() {
-    const { modalShow } = this.state;
-    const { id, isLogin, title } = this.props;
-    const defaultAttrs = {
-      style: {
-        height: '400px', overflow: 'auto', whiteSpace: 'pre'
-      }
-    };
-
-    if (isLogin) {
-      return (
-        <span>
-          <OverlayTrigger placement="top" overlay={<Tooltip id="tt_metadata">Leave a comment about this data to the reviewers </Tooltip>}>
-            <Button bsSize="xsmall" onClick={() => this.setState({ modalShow: true })}>
-              <i className="fa fa-envelope-o" />
-            </Button>
-          </OverlayTrigger>
-          <Modal
-            show={modalShow}
-            onHide={() => this.setState({ modalShow: false })}
-            dialogClassName="pub-info-dialog"
-          >
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Comments for the reviewers
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body style={{ overflow: 'auto' }}>
-              {title}
-              <FormControl
-                componentClass="textarea"
-                {...defaultAttrs}
-                inputRef={(m) => { this.commentInput = m; }}
-              />
-              <br />
-              <ButtonToolbar>
-                <Button
-                  bsStyle="warning"
-                  onClick={() => this.setState({ modalShow: false })}
-                > Close
-                </Button>
-                <Button
-                  bsStyle="primary"
-                  onClick={() => this.sendEmail()}
-                > Send to Chemotion Reviewers
-                </Button>
-              </ButtonToolbar>
-            </Modal.Body>
-          </Modal>
-        </span>
-      );
-    }
-    return (<span />);
-  }
-}
-
-RepoUserComment.propTypes = {
-  id: PropTypes.number.isRequired,
-  isLogin: PropTypes.bool,
-  type: PropTypes.string,
-  title: PropTypes.string,
-  pageType: PropTypes.string,
-  pageId: PropTypes.number
-};
-
-RepoUserComment.defaultProps = {
-  isLogin: false,
-  type: '',
-  title: '',
-  pageType: 'reactions',
-  pageId: null
-};
diff --git a/app/packs/src/components/common/RepoXvialButton.js b/app/packs/src/components/common/RepoXvialButton.js
deleted file mode 100644
index 46d94dede..000000000
--- a/app/packs/src/components/common/RepoXvialButton.js
+++ /dev/null
@@ -1,327 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Modal,
-  Button,
-  OverlayTrigger,
-  Tooltip,
-  FormControl,
-} from 'react-bootstrap';
-import RepositoryFetcher from '../fetchers/RepositoryFetcher';
-import NotificationActions from '../actions/NotificationActions';
-import { CompoundList } from '../chemrepo/ma/MAModals';
-
-const registedCompoundTooltip = (
-  <div className="repo-xvial-info">
-    For availability please contact the Compound Platform team (
-    <span className="env">
-      <i className="fa fa-envelope-o" aria-hidden="true" />
-    </span>
-    ). An explanation can be accessed via our Youtube channel&nbsp;
-    <a
-      rel="noopener noreferrer"
-      target="_blank"
-      href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"
-    >
-      <i className="fa fa-youtube-play youtube" />
-    </a>
-    &nbsp;or on our how-to pages
-    <a
-      rel="noopener noreferrer"
-      target="_blank"
-      href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"
-    >
-      <img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" />
-    </a>
-  </div>
-);
-
-export default class RepoXvialButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dataModalShow: false,
-      requestModalShow: false,
-      newData: props.data,
-    };
-    this.save = this.save.bind(this);
-    this.remove = this.remove.bind(this);
-    this.request = this.request.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.checkRequest = this.checkRequest.bind(this);
-    this.selectXvial = this.selectXvial.bind(this);
-    this.setNewData = this.setNewData.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.data !== prevProps.data) {
-      this.setNewData(this.props.data);
-    }
-  }
-
-  setNewData(newData) {
-    this.setState({ newData });
-  }
-
-  selectXvial(xid) {
-    this.setNewData(xid);
-  }
-
-  checkRequest() {
-    if (this.props.isLogin) {
-      this.setState({ requestModalShow: true });
-    } else {
-      NotificationActions.add({
-        title: 'Request to the Compound-Platform.eu',
-        message: 'Please log in to send the request.',
-        level: 'warning',
-        position: 'tc',
-      });
-    }
-  }
-
-  save() {
-    const { newData } = this.state;
-    const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, newData, 'update').then(() => {
-      this.closeModal();
-      saveCallback(elementId, newData);
-    });
-  }
-
-  remove() {
-    const { elementId, saveCallback } = this.props;
-    RepositoryFetcher.compound(elementId, '', 'update').then(() => {
-      this.closeModal();
-      saveCallback(elementId, '');
-    });
-  }
-
-  request() {
-    const { elementId } = this.props;
-    RepositoryFetcher.compound(elementId, this.rInput.value, 'request').then(
-      () => {
-        this.closeModal();
-        NotificationActions.add({
-          title: 'Request to the Compound-Platform.eu',
-          message: 'Your request has been emailed to the Compound-Platform',
-          level: 'info',
-          position: 'tc',
-        });
-      }
-    );
-  }
-
-  closeModal() {
-    this.setState({
-      dataModalShow: false,
-      requestModalShow: false,
-      newData: this.props.data,
-    });
-  }
-
-  render() {
-    const { dataModalShow, requestModalShow, newData } = this.state;
-    const { isEditable, isLogin, data, allowRequest, xvialCom } = this.props;
-    const hasData = !!(data && data !== '');
-    const compoundLink = hasData ? (
-      <OverlayTrigger
-        placement="top"
-        overlay={<Tooltip id="tt_xvial">Go to Compound platform</Tooltip>}
-      >
-        <Button
-          bsStyle="link"
-          bsSize="xsmall"
-          onClick={() => {
-            window.open('https://compound-platform.eu/home', '_blank');
-          }}
-        >
-          X-Vial: Sample available
-        </Button>
-      </OverlayTrigger>
-    ) : null;
-    const dataModal = (
-      <Modal
-        bsSize="large"
-        show={dataModalShow}
-        onHide={() => this.closeModal()}
-        backdrop="static"
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Compound X-vial number</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormControl type="text" value={newData} readOnly />
-          {CompoundList(xvialCom, newData, this.selectXvial)}
-          <div>
-            <i className="fa fa-info-circle" aria-hidden="true" />
-            &nbsp; The currently stored data:{' '}
-            <span style={{ background: '#d1e7dd', color: '#0f5132' }}>
-              highlighted with a color
-            </span>
-            .
-          </div>
-          <div>
-            <i className="fa fa-info-circle" aria-hidden="true" />
-            &nbsp; Click on a row to select the X-Vial. Remember to press the
-            &#39;Save&#39; button if you wish to save the selection.
-          </div>
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>
-            Cancel
-          </Button>
-          &nbsp;
-          <Button bsStyle="primary" onClick={() => this.save()}>
-            Save
-          </Button>
-          &nbsp;
-          <Button bsStyle="danger" onClick={() => this.remove()}>
-            Remove X-Vial
-          </Button>
-        </Modal.Body>
-      </Modal>
-    );
-    const requestModal = (
-      <Modal
-        show={requestModalShow}
-        onHide={() => this.closeModal()}
-        backdrop="static"
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Request compound</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormControl
-            style={{ height: '300px' }}
-            componentClass="textarea"
-            inputRef={(m) => {
-              this.rInput = m;
-            }}
-            placeholder="Example: I would like to request the access to a certain amount of this sample for this reason: (please give reason). Please contact me per email."
-          />
-          <br />
-          <p style={{ fontSize: '12px', fontStyle: 'italic' }}>
-            <b>Data privacy statement</b> This contact form can be used to get
-            in contact to the team of the molecule archive. The information that
-            you enter into the form is sent - along with the email address and
-            your name that you entered with the registration to chemotion
-            repository - to the management team of the compound platform only.
-            The data is not stored, the information is available per email only.
-            People in the management team handle your request as confidential
-            information. No other services or third parties are included.
-          </p>
-          <Button bsStyle="warning" onClick={() => this.closeModal()}>
-            Close
-          </Button>
-          &nbsp;
-          <Button bsStyle="primary" onClick={() => this.request()}>
-            Send request to the Compound-Platform
-          </Button>
-        </Modal.Body>
-      </Modal>
-    );
-    const editLink = isEditable ? (
-      <OverlayTrigger
-        placement="top"
-        overlay={
-          <Tooltip id="tt_xvial">Click to input Compound X-vial number</Tooltip>
-        }
-      >
-        <a
-          onClick={() => this.setState({ dataModalShow: true })}
-          rel="noopener noreferrer"
-        >
-          <i className="fa fa-pencil" />
-        </a>
-      </OverlayTrigger>
-    ) : null;
-    const requestLink =
-      allowRequest && hasData ? (
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip id="tt_request_xvial">Request compound</Tooltip>}
-        >
-          <a onClick={() => this.checkRequest()} rel="noopener noreferrer">
-            <i className="fa fa-envelope-o" />
-          </a>
-        </OverlayTrigger>
-      ) : null;
-    const info = requestLink ? (
-      <OverlayTrigger
-        trigger="click"
-        rootClose
-        placement="top"
-        overlay={
-          <Tooltip
-            id="registed_compound_tooltip"
-            className="left_tooltip bs_tooltip"
-          >
-            {registedCompoundTooltip}
-          </Tooltip>
-        }
-      >
-        <a rel="noopener noreferrer">
-          <i className="fa fa-info-circle" aria-hidden="true" />
-        </a>
-      </OverlayTrigger>
-    ) : null;
-    if (!isLogin) {
-      if (compoundLink) {
-        return (
-          <span className="xvial-pub-elem">
-            <span>
-              <i className="icon-xvial" aria-hidden="true" />
-              {compoundLink}
-              {requestLink}
-              {info}
-            </span>
-          </span>
-        );
-      }
-      return null;
-    }
-    if (compoundLink) {
-      return (
-        <span className="xvial-pub-elem">
-          <span>
-            <i className="icon-xvial" aria-hidden="true" />
-            {compoundLink}
-            {editLink}
-            {requestLink}
-            {info}
-          </span>
-          {dataModal}
-          {requestModal}
-        </span>
-      );
-    }
-    if (editLink) {
-      return (
-        <span className="xvial-pub-elem">
-          <span>
-            <i className="icon-xvial" aria-hidden="true" />
-            {editLink}
-          </span>
-          {dataModal}
-        </span>
-      );
-    }
-    return null;
-  }
-}
-
-RepoXvialButton.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  isEditable: PropTypes.bool,
-  isLogin: PropTypes.bool,
-  allowRequest: PropTypes.bool,
-  data: PropTypes.string,
-  saveCallback: PropTypes.func,
-};
-
-RepoXvialButton.defaultProps = {
-  isEditable: false,
-  isLogin: false,
-  allowRequest: false,
-  data: null,
-  saveCallback: () => {},
-};
diff --git a/app/packs/src/components/computedProps/ComputedPropsGraph.js b/app/packs/src/components/computedProps/ComputedPropsGraph.js
index 06fd24d2f..d5dc7374f 100644
--- a/app/packs/src/components/computedProps/ComputedPropsGraph.js
+++ b/app/packs/src/components/computedProps/ComputedPropsGraph.js
@@ -14,11 +14,6 @@ const previewStyle = {
   width: '200px'
 };
 
-const previewStyle = {
-  background: 'white',
-  width: '200px'
-};
-
 export default class ComputedPropsGraph extends React.Component {
   constructor(props) {
     super(props);
diff --git a/app/packs/src/components/computed_props/ComputedPropLabel.js b/app/packs/src/components/computed_props/ComputedPropLabel.js
deleted file mode 100644
index 4e1eee92f..000000000
--- a/app/packs/src/components/computed_props/ComputedPropLabel.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-
-import UserStore from 'src/stores/alt/stores/UserStore';
-import MatrixCheck from 'src/components/common/MatrixCheck';
-
-const ComputedPropLabel = ({ cprops }) => {
-  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  const enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
-  if (!enableComputedProps) return <span />;
-
-  if (!cprops || cprops.length === 0) return <span />;
-  cprops.sort((a, b) => a.updated_at - b.updated_at);
-  const { status } = cprops[cprops.length - 1];
-
-  let statusIcon = '';
-  const style = {};
-  if (['success','completed'].includes(status)) {
-    statusIcon = 'fa-calculator';
-    style.color = 'green';
-  } else if (status === 'pending') {
-    statusIcon = 'fa-ellipsis-h';
-    style.color = '#f0ad4e';
-  } else if (status === 'started') {
-    statusIcon = 'fa-spinner fa-spin';
-    style.color = '#5bc0de';
-  } else if (status === 'failure') {
-    statusIcon = 'fa-calculator';
-    style.color = 'black';
-  }
-
-  return (
-    <i className={`fa ${statusIcon}`} style={style} />
-  );
-};
-
-ComputedPropLabel.propTypes = {
-  cprops: PropTypes.arrayOf(PropTypes.object),
-};
-
-export default ComputedPropLabel;
diff --git a/app/packs/src/components/computed_props/ComputedPropsContainer.js b/app/packs/src/components/computed_props/ComputedPropsContainer.js
deleted file mode 100644
index a8c8459ab..000000000
--- a/app/packs/src/components/computed_props/ComputedPropsContainer.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ButtonGroup, Button, ControlLabel } from 'react-bootstrap';
-
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-
-import ComputedPropsGraphContainer from 'src/components/computedProps/ComputedPropsGraphContainer';
-import SampleComputedProps from 'src/components/computedProps/SampleComputedProps';
-import { ConfirmModal } from 'src/components/common/ConfirmModal';
-
-export default class ComputedPropsContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showGraph: false,
-      compute: false
-    };
-
-    this.onClickComputeBtn = this.onClickComputeBtn.bind(this);
-    this.computePropsFromSmiles = this.computePropsFromSmiles.bind(this);
-    this.toggleGraph = this.toggleGraph.bind(this);
-  }
-
-  onClickComputeBtn() {
-    this.setState({ compute: true });
-  }
-
-  computePropsFromSmiles(shouldPerform) {
-    if (shouldPerform) {
-      const { sample } = this.props;
-      ElementActions.computePropsFromSmiles(sample.id);
-    }
-
-    this.setState({ compute: false });
-  }
-
-  toggleGraph() {
-    this.setState({ showGraph: !this.state.showGraph });
-  }
-
-  render() {
-    const { sample } = this.props;
-    const cprops = sample.molecule_computed_props || [];
-    let lastCProp = null;
-
-    if (cprops && cprops.length > 0) {
-      cprops.sort((a, b) => a.updated_at - b.updated_at);
-      lastCProp = cprops[cprops.length - 1];
-    }
-
-    const { compute, showGraph } = this.state;
-    let text = 'Show Graph';
-    let arrow = <i className="fa fa-angle-double-down" />;
-
-    if (showGraph) {
-      text = 'Hide Graph';
-      arrow = <i className="fa fa-angle-double-up" />;
-    }
-    const confirmText = (
-      <ControlLabel>Would you like to simulate this molecule ?</ControlLabel>
-    );
-
-    return (
-      <div>
-        <SampleComputedProps cprops={cprops} />
-        <Button
-          bsStyle="success"
-          bsSize="small"
-          className="button-right"
-          onClick={this.onClickComputeBtn}
-          style={{ marginTop: '10px', marginBottom: '10px' }}
-        >
-          <i className="fa fa-paper-plane" />
-          &nbsp;&nbsp; Compute
-        </Button>
-        <ButtonGroup vertical block>
-          <Button
-            bsSize="xsmall"
-            style={{ marginBottom: '20px', backgroundColor: '#ddd' }}
-            onClick={this.toggleGraph}
-          >
-            {text} &nbsp; {arrow}
-          </Button>
-        </ButtonGroup>
-        <ComputedPropsGraphContainer
-          show={showGraph}
-          graphData={[{ name: sample.short_label, props: lastCProp }]}
-        />
-        <ConfirmModal
-          showModal={compute}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.computePropsFromSmiles}
-        />
-      </div>
-    );
-  }
-}
-
-ComputedPropsContainer.propTypes = {
-  sample: PropTypes.object.isRequired,
-};
diff --git a/app/packs/src/components/computed_props/ComputedPropsGraph.js b/app/packs/src/components/computed_props/ComputedPropsGraph.js
deleted file mode 100644
index 06fd24d2f..000000000
--- a/app/packs/src/components/computed_props/ComputedPropsGraph.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  XYPlot, HorizontalGridLines, VerticalGridLines,
-  XAxis, YAxis, Hint, DiscreteColorLegend, MarkSeries,
-} from 'react-vis';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-
-import Highlight from 'src/components/computedProps/Highlight';
-import CustomAxisLabel from 'src/components/computedProps/CustomAxisLabel';
-
-const previewStyle = {
-  background: 'white',
-  width: '200px'
-};
-
-const previewStyle = {
-  background: 'white',
-  width: '200px'
-};
-
-export default class ComputedPropsGraph extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hintValue: null,
-      svgPath: null,
-      lastDrawLocation: null,
-    };
-
-    this.setHint = this.setHint.bind(this);
-    this.removeHint = this.removeHint.bind(this);
-  }
-
-  setHint(value) {
-    const { svgPath, ...hintValue } = value;
-    this.setState({ hintValue, svgPath });
-  }
-
-  removeHint() {
-    this.setState({ hintValue: null, svgPath: null });
-  }
-
-  render() {
-    const {
-      data, show, xAxis, yAxis, referencePoints
-    } = this.props;
-
-    if (!show || data.length === 0) return <span />;
-
-    const refData = referencePoints.filter(ref => ref.x && ref.y);
-
-    const { hintValue, svgPath, lastDrawLocation } = this.state;
-
-    const xAxisLabel = xAxis.label || 'LUMO';
-    const yAxisLabel = yAxis.label || 'ESP';
-
-    let xDomain = xAxis.range;
-    let yDomain = yAxis.range;
-    if (lastDrawLocation) {
-      xDomain = [lastDrawLocation.left, lastDrawLocation.right];
-      yDomain = [lastDrawLocation.bottom, lastDrawLocation.top];
-    }
-
-    const dataInfo = {
-      color: '#79c7e3',
-      title: 'Data'
-    };
-    const refInfo = {
-      color: '#1a3177',
-      title: 'Reference'
-    };
-
-    return (
-      <div>
-        <div style={{ float: 'left' }}>
-          <XYPlot
-            height={450}
-            width={450}
-            xDomain={xDomain}
-            yDomain={yDomain}
-            margin={{
-              left: 55, right: 10, top: 10, bottom: 55
-            }}
-          >
-            <VerticalGridLines />
-            <HorizontalGridLines />
-            <XAxis />
-            <YAxis />
-            <Highlight
-              onBrushEnd={area => this.setState({ lastDrawLocation: area })}
-            />
-            <MarkSeries
-              data={data}
-              onValueMouseOver={this.setHint}
-              onValueMouseOut={this.removeHint}
-              color={dataInfo.color}
-            />
-            <MarkSeries
-              data={refData}
-              onValueMouseOver={this.setHint}
-              onValueMouseOut={this.removeHint}
-              color={refInfo.color}
-            />
-            {hintValue && (
-              <Hint value={hintValue}>
-                <div className="rv-hint__content" style={previewStyle}>
-                  <div>
-                    <SvgFileZoomPan
-                      svgPath={svgPath}
-                      duration={300}
-                      resize
-                    />
-                  </div>
-                  <div className="rv-hint__content">
-                    {Object.keys(hintValue).map(key => (
-                      <div key={`rv-hint${key}`}>
-                        <span className="rv-hint__title">
-                          {key}
-                        </span>
-                        {': '}
-                        <span className="rv-hint__value">
-                          {hintValue[key]}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </Hint>
-            )}
-            <CustomAxisLabel title={`${xAxisLabel} (${xAxis.unit})`} xAxis />
-            <CustomAxisLabel title={`${yAxisLabel} (${yAxis.unit})`} />
-          </XYPlot>
-        </div>
-        <div style={{ float: 'right' }}>
-          <DiscreteColorLegend
-            width={105}
-            items={[dataInfo, refInfo]}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-ComputedPropsGraph.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  show: PropTypes.bool.isRequired,
-  xAxis: PropTypes.object.isRequired,
-  yAxis: PropTypes.object.isRequired,
-  referencePoints: PropTypes.arrayOf(PropTypes.object).isRequired,
-  // referenceDesc: PropTypes.string.isRequired,
-};
diff --git a/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js b/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
deleted file mode 100644
index 2cf321444..000000000
--- a/app/packs/src/components/computed_props/ComputedPropsGraphContainer.js
+++ /dev/null
@@ -1,329 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-
-import Select from 'react-select';
-import {
-  Grid, Row, Col, Button, ControlLabel, Form, FormGroup, FormControl
-} from 'react-bootstrap';
-
-import UserStore from 'src/stores/alt/stores/UserStore';
-import UserActions from 'src/stores/alt/actions/UserActions';
-
-import ComputedPropsGraph from 'src/components/computedProps/ComputedPropsGraph';
-import GraphReferenceTable from 'src/components/computedProps/GraphReferenceTable';
-
-const etlReferences = [
-  { x: -1.8, y: 50, type: 'reference' },
-  { x: -1.8, y: 90, type: 'reference' },
-  { x: -2.2, y: 50, type: 'reference' },
-  { x: -2.0, y: 10, type: 'reference' },
-  { x: -1.6, y: 10, type: 'reference' },
-  { x: -1.4, y: 50, type: 'reference' }
-];
-
-const defaultTemplate = {
-  name: 'Default',
-  xAxisType: 'lumo',
-  yAxisType: 'mean_abs_potential',
-  referenceDesc: 'Compounds are interesting as material for the ' +
-    'Electron Transport Layer (ETL)',
-  referencePoints: etlReferences,
-};
-
-const graphSettings = {
-  mean_abs_potential: { label: 'ESP', unit: 'mV', range: [0, 400] },
-  lumo: { label: 'LUMO', unit: 'eV', range: [-7, 2] },
-  homo: { label: 'HOMO', unit: 'eV', range: [-12, 0] },
-  ip: { label: 'IP', unit: 'eV', range: [2, 10] },
-  ea: { label: 'EA', unit: 'eV', range: [-2, 6] },
-  dipol_debye: { label: 'Dipol', unit: 'debye', range: [0, 14] },
-};
-
-export default class ComputedPropsGraphContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      curTemplateIdx: 0,
-      graphTemplates: [],
-    };
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.onTemplateChange = this.onTemplateChange.bind(this);
-    this.onXAxisChange = this.onXAxisChange.bind(this);
-    this.onYAxisChange = this.onYAxisChange.bind(this);
-
-    this.updateReferences = this.updateReferences.bind(this);
-    this.saveTemplate = this.saveTemplate.bind(this);
-    this.deleteTemplate = this.deleteTemplate.bind(this);
-    this.onDescChange = this.onDescChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-  }
-
-  UNSAFE_componentWillReceiveProps() {
-    this.onUserChange();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange() {
-    const userState = UserStore.getState();
-    const profileData = _.get(userState, 'profile.data', {});
-    const graphTemplates = _.get(
-      profileData,
-      'computed_props.graph_templates',
-      [defaultTemplate]
-    );
-
-    const curTemplateIdx = _.get(profileData, 'computed_props.cur_template_idx', 0);
-    this.setState({ graphTemplates, curTemplateIdx });
-  }
-
-  onXAxisChange(xAxis) {
-    const { curTemplateIdx, graphTemplates } = this.state;
-    const newGraphTemplates = graphTemplates.map((templ, idx) => {
-      if (idx === curTemplateIdx) {
-        const newTempl = _.cloneDeep(templ);
-        newTempl.xAxisType = xAxis.value;
-        return newTempl;
-      }
-      return templ;
-    });
-
-    this.setState({ graphTemplates: newGraphTemplates });
-  }
-
-  onYAxisChange(yAxis) {
-    const { curTemplateIdx, graphTemplates } = this.state;
-    const newGraphTemplates = graphTemplates.map((templ, idx) => {
-      if (idx === curTemplateIdx) {
-        const newTempl = _.cloneDeep(templ);
-        newTempl.yAxisType = yAxis.value;
-        return newTempl;
-      }
-      return templ;
-    });
-
-    this.setState({ graphTemplates: newGraphTemplates });
-  }
-
-  onDescChange(e) {
-    const { curTemplateIdx, graphTemplates } = this.state;
-    const desc = e.target.value;
-    const newGraphTemplates = graphTemplates.map((templ, idx) => {
-      if (idx === curTemplateIdx) {
-        const newTempl = _.cloneDeep(templ);
-        newTempl.referenceDesc = desc;
-        return newTempl;
-      }
-      return templ;
-    });
-
-    this.setState({ graphTemplates: newGraphTemplates });
-  }
-
-  onTemplateChange(template) {
-    const { graphTemplates } = this.state;
-    const tIdx = graphTemplates.findIndex(t => t.name === template.label);
-    if (tIdx > -1) {
-      this.setState({ curTemplateIdx: tIdx });
-    } else {
-      const newTempl = {
-        name: template.label,
-        xAxisType: 'lumo',
-        yAxisType: 'mean_abs_potential',
-        referenceDesc: '',
-        referencePoints: [],
-      };
-
-      graphTemplates.push(newTempl);
-      this.setState({
-        graphTemplates,
-        curTemplateIdx: graphTemplates.length - 1,
-      });
-    }
-  }
-
-  updateReferences(refs) {
-    const { curTemplateIdx, graphTemplates } = this.state;
-    const newGraphTemplates = graphTemplates.map((templ, idx) => {
-      if (idx === curTemplateIdx) {
-        const newTempl = _.cloneDeep(templ);
-        newTempl.referencePoints = refs;
-        return newTempl;
-      }
-      return templ;
-    });
-
-    this.setState({ graphTemplates: newGraphTemplates });
-  }
-
-  saveTemplate() {
-    const userProfile = UserStore.getState().profile;
-    const { graphTemplates, curTemplateIdx } = this.state;
-    _.set(userProfile, 'data.computed_props.graph_templates', graphTemplates);
-    _.set(userProfile, 'data.computed_props.cur_template_idx', curTemplateIdx);
-    UserActions.updateUserProfile(userProfile);
-  }
-
-  deleteTemplate() {
-    const userProfile = UserStore.getState().profile;
-    const { graphTemplates } = this.state;
-    const { curTemplateIdx } = this.state;
-    const newGraphTemplates = _.cloneDeep(graphTemplates);
-    newGraphTemplates.splice(curTemplateIdx, 1);
-    const newTemplateIdx = curTemplateIdx > 1 ? (curTemplateIdx - 1) : 0;
-    _.set(userProfile, 'data.computed_props.graph_templates', newGraphTemplates);
-    _.set(userProfile, 'data.computed_props.cur_template_idx', newTemplateIdx);
-    UserActions.updateUserProfile(userProfile);
-  }
-
-  render() {
-    const { show, graphData, style } = this.props;
-    if (!show || graphData.length === 0) return <span />;
-
-    const { curTemplateIdx, graphTemplates } = this.state;
-    const template = graphTemplates.size === 0 ?
-      defaultTemplate :
-      graphTemplates[curTemplateIdx];
-
-    const xAxisType = template.xAxisType || 'lumo';
-    const yAxisType = template.yAxisType || 'mean_abs_potential';
-    const xAxis = graphSettings[xAxisType] || graphSettings.lumo;
-    const yAxis = graphSettings[yAxisType] || graphSettings.mean_abs_potential;
-
-    const { referenceDesc } = template;
-    const referencePoints = template.referencePoints || etlReferences;
-    if (referencePoints.length === 0) {
-      referencePoints.push({ x: '', y: '', type: 'reference' });
-    }
-
-    const data = graphData.filter(dat => dat.props).map(dat => ({
-      name: dat.name,
-      svgPath: dat.svgPath,
-      x: _.get(dat, `props.${xAxisType}`, dat.props.lumo),
-      y: _.get(dat, `props.${yAxisType}`, dat.props.mean_abs_potential),
-    }));
-
-    const axisSelectOptions = Object.keys(graphSettings).map(k => (
-      { label: graphSettings[k].label, value: k }
-    ));
-    const templateOptions = graphTemplates.map((templ, idx) => (
-      { label: templ.name, value: idx }
-    ));
-
-    return (
-      <Grid fluid style={style}>
-        <Row className="show-grid">
-          <Col xs={18} md={12}>
-            <ComputedPropsGraph
-              xAxis={xAxis}
-              yAxis={yAxis}
-              show={show}
-              data={data}
-              style={style}
-              referencePoints={referencePoints}
-              referenceDesc={referenceDesc}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={9} md={6}>
-            <GraphReferenceTable
-              xLabel={xAxis.label}
-              yLabel={yAxis.label}
-              data={referencePoints}
-              updateData={this.updateReferences}
-            />
-          </Col>
-          <Col xs={9} md={6}>
-            <Form horizontal>
-              <FormGroup controlId="formInlineTemplate">
-                <Col componentClass={ControlLabel} sm={4}>
-                  Template
-                </Col>
-                <Col sm={8}>
-                  <Select.Creatable
-                    onChange={this.onTemplateChange}
-                    value={curTemplateIdx}
-                    options={templateOptions}
-                    clearable={false}
-                    promptTextCreator={label => `Create new ${label} template`}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formInlineXAxis">
-                <Col componentClass={ControlLabel} sm={4}>
-                  X Axis
-                </Col>
-                <Col sm={8}>
-                  <Select
-                    onChange={this.onXAxisChange}
-                    value={xAxisType}
-                    clearable={false}
-                    options={axisSelectOptions}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formInlineYAxis">
-                <Col componentClass={ControlLabel} sm={4}>
-                  Y Axis
-                </Col>
-                <Col sm={8}>
-                  <Select
-                    onChange={this.onYAxisChange}
-                    value={yAxisType}
-                    clearable={false}
-                    options={axisSelectOptions}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup controlId="formInlineRefDesc">
-                <Col componentClass={ControlLabel} sm={4}>
-                  References Description
-                </Col>
-                <Col sm={8}>
-                  <FormControl
-                    componentClass="textarea"
-                    type="description"
-                    placeholder="Description"
-                    value={referenceDesc}
-                    style={{ height: '193px' }}
-                    onChange={e => this.onDescChange(e)}
-                  />
-                </Col>
-              </FormGroup>
-              <FormGroup style={{ marginBottom: 0 }}>
-                <Col sm={12}>
-                  <Button bsStyle="info" onClick={this.saveTemplate}>
-                    Save Template
-                  </Button>
-                  {' '}
-                  <Button bsStyle="danger" onClick={this.deleteTemplate}>
-                    Delete Template
-                  </Button>
-                </Col>
-              </FormGroup>
-            </Form>
-          </Col>
-        </Row>
-      </Grid>
-    );
-  }
-}
-
-ComputedPropsGraphContainer.propTypes = {
-  graphData: PropTypes.arrayOf(PropTypes.object).isRequired,
-  show: PropTypes.bool.isRequired,
-  style: PropTypes.object,
-};
-
-ComputedPropsGraphContainer.defaultProps = {
-  style: {}
-}
diff --git a/app/packs/src/components/computed_props/CustomAxisLabel.js b/app/packs/src/components/computed_props/CustomAxisLabel.js
deleted file mode 100644
index 4f3c7b51d..000000000
--- a/app/packs/src/components/computed_props/CustomAxisLabel.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function CustomAxisLabel({
-  marginTop, marginLeft, innerWidth, innerHeight, title, xAxis
-}) {
-  const yLabelOffset = {
-    y: marginTop + (innerHeight / 2) + (title.length * 2),
-    x: 10
-  };
-
-  const xLabelOffset = {
-    x: (marginLeft + (innerWidth / 2)) - (title.length * 4),
-    y: (innerHeight * 1.1) + 10
-  };
-
-  const transform = xAxis
-    ? `translate(${xLabelOffset.x}, ${xLabelOffset.y})`
-    : `translate(${yLabelOffset.x}, ${yLabelOffset.y}) rotate(-90)`;
-
-  return (
-    <g transform={transform}>
-      <text className="unselectable axis-labels" style={{ fill: '#6b6b76' }}>
-        {title}
-      </text>
-    </g>
-  );
-}
-
-CustomAxisLabel.propTypes = {
-  title: PropTypes.string.isRequired,
-  xAxis: PropTypes.bool.isRequired,
-};
-
-CustomAxisLabel.defaultProps = {
-  xAxis: false
-}
-
-CustomAxisLabel.displayName = 'CustomAxisLabel';
-CustomAxisLabel.requiresSVG = true;
-
-export default CustomAxisLabel;
diff --git a/app/packs/src/components/computed_props/GraphReferenceTable.js b/app/packs/src/components/computed_props/GraphReferenceTable.js
deleted file mode 100644
index e31d341f2..000000000
--- a/app/packs/src/components/computed_props/GraphReferenceTable.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-
-import { Button } from 'react-bootstrap';
-
-function TableEditBtn({ dataLength, onEditBtnClick, node }) {
-  const isAdd = node.rowIndex === dataLength;
-  const btnIcon = isAdd ? 'fa-plus' : 'fa-minus';
-
-  return (
-    <Button
-      active
-      onClick={() => onEditBtnClick(node.rowIndex)}
-      bsSize="xsmall"
-    >
-      <i className={`fa ${btnIcon}`} />
-    </Button>
-  );
-}
-
-TableEditBtn.propTypes = {
-  dataLength: PropTypes.number.isRequired,
-  onEditBtnClick: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-};
-
-export default class GraphReferenceTable extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onRefsChanged = this.onRefsChanged.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.onEditBtnClick = this.onEditBtnClick.bind(this);
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.gridColumnApi) this.autoSizeAll();
-  }
-
-  onGridReady(params) {
-    this.gridColumnApi = params.columnApi;
-  }
-
-  onRefsChanged(params) {
-    const { data, updateData } = this.props;
-    const refs = [...data];
-    refs[params.rowIndex] = params.data;
-
-    updateData(refs);
-  }
-
-  onEditBtnClick(rIdx) {
-    const { data, updateData } = this.props;
-    const isAdd = rIdx === (data.length - 1);
-    const refs = [...data];
-
-    if (isAdd) {
-      refs.push({ x: '', y: '', type: 'reference' });
-    } else {
-      refs.splice(rIdx, 1);
-    }
-
-    updateData(refs);
-  }
-
-  autoSizeAll() {
-    if (!this.api) return;
-    setTimeout(() => {
-      const allColumnIds = [];
-      this.gridColumnApi.getAllColumns().forEach((column) => {
-        allColumnIds.push(column.colId);
-      });
-
-      this.gridColumnApi.autoSizeColumns(allColumnIds);
-    }, 0);
-  }
-
-  render() {
-    const { xLabel, yLabel, data } = this.props;
-    const columnDefs = [
-      {
-        headerName: xLabel,
-        field: 'x',
-        editable: true,
-        cellEditor: 'agTextCellEditor',
-      },
-      {
-        headerName: yLabel,
-        field: 'y',
-        editable: true,
-        cellEditor: 'agTextCellEditor',
-      },
-      {
-        headerName: '',
-        field: 'type',
-        editable: false,
-        cellRendererFramework: TableEditBtn,
-        cellRendererParams: {
-          dataLength: data.length - 1,
-          onEditBtnClick: this.onEditBtnClick
-        },
-        headerComponentParams: { headerName: '' }
-      },
-    ];
-
-    return (
-      <div className="ag-theme-material">
-        <AgGridReact
-          columnDefs={columnDefs}
-          rowData={data}
-          domLayout="autoHeight"
-          onGridReady={this.onGridReady}
-          onCellValueChanged={this.onRefsChanged}
-        />
-      </div>
-    );
-  }
-}
-
-GraphReferenceTable.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  updateData: PropTypes.func.isRequired,
-  xLabel: PropTypes.string.isRequired,
-  yLabel: PropTypes.string.isRequired,
-};
diff --git a/app/packs/src/components/computed_props/Highlight.js b/app/packs/src/components/computed_props/Highlight.js
deleted file mode 100644
index bef947927..000000000
--- a/app/packs/src/components/computed_props/Highlight.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import React from 'react';
-import { ScaleUtils, AbstractSeries } from 'react-vis';
-
-function cropDimension(loc, startLoc, minLoc, maxLoc) {
-  if (loc < startLoc) {
-    return {
-      start: Math.max(loc, minLoc),
-      stop: startLoc
-    };
-  }
-
-  return {
-    stop: Math.min(loc, maxLoc),
-    start: startLoc
-  };
-}
-
-export default class Highlight extends AbstractSeries {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      drawing: false,
-      drawArea: {
-        top: 0, right: 0, bottom: 0, left: 0
-      },
-      x_start: 0,
-      y_start: 0,
-      xMode: false,
-      yMode: false,
-      xyMode: false
-    };
-
-    this.stopDrawing = this.stopDrawing.bind(this);
-    this.onParentMouseDown = this.onParentMouseDown.bind(this);
-    this.getMousePosition = this.getMousePosition.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('mouseup', this.stopDrawing);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.stopDrawing);
-  }
-
-  getDrawArea(loc) {
-    const { innerWidth, innerHeight } = this.props;
-    const {
-      drawArea, xStart, yStart, xMode, yMode, xyMode
-    } = this.state;
-    const { x, y } = loc;
-    let out = drawArea;
-
-    if (xMode || xyMode) {
-      const { start, stop } = cropDimension(x, xStart, 0, innerWidth);
-      out = {
-        ...out,
-        left: start,
-        right: stop
-      };
-    }
-    if (yMode || xyMode) {
-      const { start, stop } = cropDimension(y, yStart, 0, innerHeight);
-      out = {
-        ...out,
-        top: innerHeight - start,
-        bottom: innerHeight - stop
-      };
-    }
-    return out;
-  }
-
-  onParentMouseDown(e) {
-    const { innerHeight, innerWidth, onBrushStart } = this.props;
-    const { x, y } = this.getMousePosition(e);
-    const yRect = innerHeight - y;
-
-    if (x < 0 && y >= 0) {
-      this.setState({
-        yMode: true,
-        drawing: true,
-        drawArea: {
-          top: yRect,
-          right: innerWidth,
-          bottom: yRect,
-          left: 0
-        },
-        yStart: y
-      });
-    } else if (x >= 0 && y < 0) {
-      this.setState({
-        xMode: true,
-        drawing: true,
-        drawArea: {
-          top: innerHeight,
-          right: x,
-          bottom: 0,
-          left: x
-        },
-        xStart: x
-      });
-    } else if (x >= 0 && y >= 0) {
-      this.setState({
-        xyMode: true,
-        drawing: true,
-        drawArea: {
-          top: yRect,
-          right: x,
-          bottom: yRect,
-          left: x
-        },
-        xStart: x,
-        yStart: y
-      });
-    }
-
-    if (onBrushStart) {
-      onBrushStart(e);
-    }
-  }
-
-  // onParentTouchStart(e) {
-  //   e.preventDefault();
-  //   this.onParentMouseDown(e);
-  // }
-
-  stopDrawing() {
-    this.setState({
-      xMode: false,
-      yMode: false,
-      xyMode: false
-    });
-
-    if (!this.state.drawing) {
-      return;
-    }
-
-    const { onBrushEnd } = this.props;
-    const { drawArea } = this.state;
-    const xScale = ScaleUtils.getAttributeScale(this.props, 'x');
-    const yScale = ScaleUtils.getAttributeScale(this.props, 'y');
-
-    // Clear the draw area
-    this.setState({
-      drawing: false,
-      drawArea: {
-        top: 0, right: 0, bottom: 0, left: 0
-      },
-      xStart: 0,
-      yStart: 0
-    });
-
-    if (Math.abs(drawArea.right - drawArea.left) < 5) {
-      onBrushEnd(null);
-      return;
-    }
-
-    const domainArea = {
-      bottom: yScale.invert(drawArea.top),
-      right: xScale.invert(drawArea.right),
-      top: yScale.invert(drawArea.bottom),
-      left: xScale.invert(drawArea.left)
-    };
-
-    if (onBrushEnd) {
-      onBrushEnd(domainArea);
-    }
-  }
-
-  getMousePosition(e) {
-    const { marginLeft, marginTop, innerHeight } = this.props;
-
-    const locX = e.nativeEvent.offsetX - marginLeft;
-    const locY = (innerHeight + marginTop) - e.nativeEvent.offsetY;
-
-    return { x: locX, y: locY };
-  }
-
-  onParentMouseMove(e) {
-    const { drawing } = this.state;
-
-    if (drawing) {
-      const pos = this.getMousePosition(e);
-      const newDrawArea = this.getDrawArea(pos);
-      this.setState({ drawArea: newDrawArea });
-    }
-  }
-
-  render() {
-    const {
-      marginLeft, marginTop, innerWidth, innerHeight, color, opacity
-    } = this.props;
-
-    const {
-      drawArea: {
-        left, right, top, bottom
-      }
-    } = this.state;
-
-    return (
-      <g
-        transform={`translate(${marginLeft}, ${marginTop})`}
-        className="highlight-container"
-      >
-        <rect
-          opacity="0"
-          x={0}
-          y={0}
-          width={innerWidth}
-          height={innerHeight}
-        />
-        <rect
-          pointerEvents="none"
-          opacity={opacity}
-          fill={color}
-          x={left}
-          y={bottom}
-          width={right - left}
-          height={top - bottom}
-        />
-      </g>
-    );
-  }
-}
-
-const defaultProps = {
-  allow: 'x',
-  color: 'rgb(77, 182, 172)',
-  opacity: 0.3
-};
-
-Highlight.defaultProps = {
-  ...AbstractSeries,
-  ...defaultProps
-};
-
-Highlight.displayName = 'ComputedPropsGraphHighlight';
diff --git a/app/packs/src/components/computed_props/NoComputedProps.js b/app/packs/src/components/computed_props/NoComputedProps.js
deleted file mode 100644
index c4f3844cc..000000000
--- a/app/packs/src/components/computed_props/NoComputedProps.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-
-function NoComputedProps({ computeFunc }) {
-  return (
-    <span>
-      No computed properties found.
-      <Button
-        bsStyle="success"
-        bsSize="small"
-        className="button-right"
-        onClick={computeFunc}
-      >
-        <i className="fa fa-paper-plane" />
-        &nbsp;&nbsp; Compute
-      </Button>
-    </span>
-  );
-}
-
-NoComputedProps.propTypes = {
-  computeFunc: PropTypes.func.isRequired,
-};
-
-export default NoComputedProps;
diff --git a/app/packs/src/components/computed_props/SampleComputedProps.js b/app/packs/src/components/computed_props/SampleComputedProps.js
deleted file mode 100644
index d4a4697f1..000000000
--- a/app/packs/src/components/computed_props/SampleComputedProps.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-
-function dateFormatter(params) {
-  const dateTime = new Date(params.value);
-  const options = { year: 'numeric', month: 'short', day: 'numeric' };
-  return dateTime.toLocaleDateString('en-GB', options);
-}
-
-export default class SampleComputedProps extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onGridReady = this.onGridReady.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.gridApi) this.gridApi.setRowData(nextProps.cprops);
-  }
-
-  onGridReady(params) {
-    this.gridApi = params.api;
-  }
-
-  render() {
-    const { cprops } = this.props;
-    if (cprops.length === 0) {
-      return (
-        <span>No computed properties found. </span>
-      );
-    }
-
-    const columnDefs = [
-      {
-        headerName: 'MaP',
-        headerTooltip: 'Maximum Potential',
-        field: 'max_potential',
-        width: 67,
-      },
-      {
-        headerName: 'MiP',
-        headerTooltip: 'Minimum Potential',
-        field: 'min_potential',
-        width: 63,
-      },
-      {
-        headerName: 'MeP',
-        headerTooltip: 'Mean Potential',
-        field: 'mean_potential',
-        width: 66,
-      },
-      {
-        headerName: 'MeAbsP',
-        headerTooltip: 'Mean Absolute Potential',
-        width: 88,
-        field: 'mean_abs_potential',
-      },
-      {
-        headerName: 'HOMO',
-        field: 'homo',
-        width: 80,
-      },
-      {
-        headerName: 'LUMO',
-        field: 'lumo',
-        width: 77,
-      },
-      {
-        headerName: 'IP',
-        field: 'ip',
-        width: 53,
-      },
-      {
-        headerName: 'EA',
-        field: 'ea',
-        width: 55,
-      },
-      {
-        headerName: 'Dipol',
-        field: 'dipol_debye',
-        width: 72,
-      },
-      {
-        headerName: 'S1',
-        valueGetter: params => params.data.tddft.s1_energy,
-        width: 55,
-      },
-      {
-        headerName: 'T1',
-        valueGetter: params => params.data.tddft.t1_energy,
-        width: 55,
-      },
-      {
-        headerName: 'deltaEST',
-        valueGetter: params => params.data.tddft.delta_est,
-        width: 90,
-      },
-      {
-        headerName: 'Singlet osc str.',
-        valueGetter: params => params.data.tddft.s1_osc,
-        width: 125,
-      },
-      {
-        headerName: 'TADF rate',
-        valueGetter: params => params.data.tddft.tadf_rate,
-        width: 105,
-      },
-      {
-        headerName: 'Date',
-        headerTooltip: 'Request Date',
-        field: 'created_at',
-        width: 81,
-        valueFormatter: dateFormatter,
-      },
-    ];
-
-    return (
-      <div className="ag-theme-balham">
-        <AgGridReact
-          onGridReady={this.onGridReady}
-          enableColResize
-          suppressCellSelection
-          columnDefs={columnDefs}
-          editable={false}
-          rowData={cprops}
-          domLayout="autoHeight"
-        />
-      </div>
-    );
-  }
-}
-
-SampleComputedProps.propTypes = {
-  cprops: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
diff --git a/app/packs/src/components/contextActions/ContextActions.js b/app/packs/src/components/contextActions/ContextActions.js
index 0f017b4b2..efa1e7108 100644
--- a/app/packs/src/components/contextActions/ContextActions.js
+++ b/app/packs/src/components/contextActions/ContextActions.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup } from 'react-bootstrap';
-import UIStore from './../stores/UIStore';
-import CreateButton from './CreateButton';
-import ReportUtilButton from './ReportUtilButton';
-import ExportImportButton from './ExportImportButton';
-import ScanCodeButton from './ScanCodeButton';
-import NoticeButton from './NoticeButton';
-import InboxButton from './InboxButton';
-//import DeviceButton from './DeviceButton'
-import { PermissionConst } from '../utils/PermissionConst';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import CreateButton from 'src/components/contextActions/CreateButton';
+import ReportUtilButton from 'src/components/contextActions/ReportUtilButton';
+import ExportImportButton from 'src/components/contextActions/ExportImportButton';
+import ScanCodeButton from 'src/components/contextActions/ScanCodeButton';
+import NoticeButton from 'src/components/contextActions/NoticeButton';
+import InboxButton from 'src/components/contextActions/InboxButton';
+import { PermissionConst } from 'src/utilities/PermissionConst';
+import SampleTaskNavigationElement from 'src/components/sampleTaskInbox/SampleTaskNavigationElement';
 
 export default class ContextActions extends React.Component {
   constructor(props) {
@@ -17,15 +17,15 @@ export default class ContextActions extends React.Component {
     const uiState = UIStore.getState();
     this.state = {
       uiState
-    }
+    };
   }
 
   componentDidMount() {
-    UIStore.listen(state => this.onChange(state));
+    UIStore.listen((state) => this.onChange(state));
   }
 
   componentWillUnmount() {
-    UIStore.unlisten(state => this.onChange(state));
+    UIStore.unlisten((state) => this.onChange(state));
   }
 
   onChange(state) {
@@ -36,27 +36,26 @@ export default class ContextActions extends React.Component {
   }
 
   isCreateDisabled() {
-    const {currentCollection} = this.state.uiState;
-    return currentCollection && ((currentCollection.label == 'All' && currentCollection.is_locked) || 
-    (currentCollection.is_shared && currentCollection.is_synchronized == false) ||  (currentCollection.is_sync_to_me && currentCollection.permission_level != PermissionConst.Write)) ;
+    const { currentCollection } = this.state.uiState;
+    return currentCollection && ((currentCollection.label == 'All' && currentCollection.is_locked)
+      || (currentCollection.is_shared && currentCollection.is_synchronized == false) || (currentCollection.is_sync_to_me && currentCollection.permission_level != PermissionConst.Write));
   }
 
   isDisabled() {
-    const {currentCollection} = this.state.uiState
+    const { currentCollection } = this.state.uiState;
 
     if (currentCollection) {
-      if ((currentCollection.label == 'All'  && currentCollection.is_locked) ||
-          (currentCollection.is_shared == true && currentCollection.permission_level < PermissionConst.ImportElements))
-      return true
+      if ((currentCollection.label == 'All' && currentCollection.is_locked)
+        || (currentCollection.is_shared == true && currentCollection.permission_level < PermissionConst.ImportElements)) { return true; }
     }
 
-    return false
+    return false;
   }
 
   render() {
     const { updateModalProps, customClass } = this.props;
     return (
-      <div style={{ display: 'inline', float: 'left' }}>
+      <div style={{ display: 'inline', float: 'left', marginRight: 10 }}>
         <ButtonGroup>
           <ExportImportButton
             isDisabled={this.isDisabled()}
@@ -68,13 +67,16 @@ export default class ContextActions extends React.Component {
         <ButtonGroup style={{ marginLeft: '10px' }}>
           <CreateButton isDisabled={this.isCreateDisabled()} customClass={customClass} />
         </ButtonGroup>
-        <ButtonGroup style={{ marginLeft: '10px' }}>
+        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <ScanCodeButton customClass={customClass} />
-        </ButtonGroup>
+        </ButtonGroup> */}
         {/* <ButtonGroup style={{ marginLeft: '10px' }}>
           <InboxButton />
         </ButtonGroup> */}
-        <ButtonGroup style={{ marginLeft: '10px' }}>
+        {/* <ButtonGroup style={{ marginLeft: '10px' }}>
+          <SampleTaskNavigationElement />
+        </ButtonGroup> */}
+        <ButtonGroup style={{ marginLeft: '20px' }}>
           <NoticeButton />
         </ButtonGroup>
       </div>
diff --git a/app/packs/src/components/contextActions/ExportImportButton.js b/app/packs/src/components/contextActions/ExportImportButton.js
index 6776d91d5..813b1fb53 100644
--- a/app/packs/src/components/contextActions/ExportImportButton.js
+++ b/app/packs/src/components/contextActions/ExportImportButton.js
@@ -1,52 +1,92 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, Button, MenuItem, Glyphicon } from 'react-bootstrap';
-
-import CollectionActions from '../actions/CollectionActions';
-import ElementActions from '../actions/ElementActions';
-import UIActions from '../actions/UIActions';
-import ModalImport from './ModalImport';
-import ModalImportChemScanner from './ModalImportChemScanner';
-import ModalExport from './ModalExport';
-import ModalReactionExport from './ModalReactionExport';
-import ModalExportCollection from './ModalExportCollection';
-import ModalImportCollection from './ModalImportCollection';
-
-const ExportImportButton = ({ isDisabled, updateModalProps, customClass }) => (
-  <Dropdown id='export-dropdown'>
-    <Dropdown.Toggle className={customClass}>
-      <Glyphicon glyph="import"/> <Glyphicon glyph="export"/>
-    </Dropdown.Toggle>
-    <Dropdown.Menu>
-      <MenuItem onSelect={() => exportFunction(updateModalProps)}
-        title='Export to spreadsheet'>
-        Export samples from selection
-      </MenuItem>
-      <MenuItem onSelect={() => exportReactionFunction(updateModalProps)}
-        title='Export reaction smiles to csv'>
-        Export reactions from selection
-      </MenuItem>
+import { Dropdown, MenuItem, Glyphicon } from 'react-bootstrap';
+
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import ModalImport from 'src/components/contextActions/ModalImport';
+import ModalExport from 'src/components/contextActions/ModalExport';
+import ModalReactionExport from 'src/components/contextActions/ModalReactionExport';
+import ModalExportCollection from 'src/components/contextActions/ModalExportCollection';
+import ModalExportRadarCollection from 'src/components/contextActions/ModalExportRadarCollection';
+import ModalImportCollection from 'src/components/contextActions/ModalImportCollection';
+import { elementShowOrNew } from 'src/utilities/routesUtils.js';
+
+function ExportImportButton({ isDisabled, updateModalProps, customClass }) {
+  const showRadar = UIStore.getState().hasRadar ? (
+    <>
       <MenuItem divider />
-      <MenuItem onSelect={() => importSampleFunction(updateModalProps)} disabled={isDisabled}
-        title='Import from spreadsheet or sdf'>
-        Import samples to collection
+      <MenuItem
+        onSelect={() => editMetadataFunction()}
+        disabled={isDisabled}
+        title="Edit metadata"
+      >
+        Edit collection metadata
       </MenuItem>
-      <MenuItem divider />
-      <MenuItem onSelect={() => exportCollectionFunction(updateModalProps)}
-        title='Export as ZIP archive'>
-        Export collections
+      <MenuItem
+        onSelect={() => exportCollectionToRadarFunction(updateModalProps)}
+        disabled={isDisabled}
+        title="Export to RADAR"
+      >
+        Publish current collection via RADAR
       </MenuItem>
-      <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
-        title='Import collections from ZIP archive'>
-        Import collections
-      </MenuItem>
-      {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
-      {/*   title='Import from Docs'> */}
-      {/*   Import elements from Docs */}
-      {/* </MenuItem> */}
-    </Dropdown.Menu>
-  </Dropdown>
-);
+    </>
+  ) : <span />;
+
+  return (
+    <Dropdown id="export-dropdown">
+      <Dropdown.Toggle className={customClass}>
+        <Glyphicon glyph="import" />
+        <Glyphicon glyph="export" />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <MenuItem
+          onSelect={() => exportFunction(updateModalProps)}
+          title="Export to spreadsheet"
+        >
+          Export samples from selection
+        </MenuItem>
+        <MenuItem
+          onSelect={() => exportReactionFunction(updateModalProps)}
+          title="Export reaction smiles to csv"
+        >
+          Export reactions from selection
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem
+          onSelect={() => importSampleFunction(updateModalProps, false)}
+          disabled={isDisabled}
+          title="Import from spreadsheet or sdf"
+        >
+          Import samples to collection
+        </MenuItem>
+        <MenuItem
+          onSelect={() => importSampleFunction(updateModalProps, true)}
+          disabled={isDisabled}
+          title="Import chemicals from spreadsheet"
+        >
+          Import chemicals to collection
+        </MenuItem>
+        <MenuItem divider />
+        <MenuItem
+          onSelect={() => exportCollectionFunction(updateModalProps)}
+          title="Export as ZIP archive"
+        >
+          Export collections
+        </MenuItem>
+        <MenuItem
+          onSelect={() => importCollectionFunction(updateModalProps)}
+          title="Import collections from ZIP archive"
+        >
+          Import collections
+        </MenuItem>
+
+        {showRadar}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
 
 ExportImportButton.propTypes = {
   isDisabled: PropTypes.bool,
@@ -57,9 +97,8 @@ ExportImportButton.defaultProps = {
   isDisabled: false,
   customClass: null,
 };
-
-const importSampleFunction = (updateModalProps) => {
-  const title = "Import Samples from File";
+const importSampleFunction = (updateModalProps, importAsChemical) => {
+  const title = importAsChemical ? 'Import Chemicals from File' : 'Import Samples from File';
   const component = ModalImport;
   const action = ElementActions.importSamplesFromFile;
   const listSharedCollections = false;
@@ -73,46 +112,31 @@ const importSampleFunction = (updateModalProps) => {
   updateModalProps(modalProps);
 };
 
-const importChemScannerFunction = (updateModalProps) => {
-  const title = 'Import Elements from Docs';
-  const component = ModalImportChemScanner;
-  const listSharedCollections = false;
-  const modalProps = {
-    show: true,
-    title,
-    component,
-    customModal: 'importChemDrawModal',
-    listSharedCollections,
-  };
-
-  updateModalProps(modalProps);
-};
-
 const exportFunction = (updateModalProps) => {
-  const title = "Select Data to Export";
+  const title = 'Select Data to Export';
   const component = ModalExport;
   const modalProps = {
     show: true,
     title,
     component,
-    customModal: "exportModal"
+    customModal: 'exportModal'
   };
   updateModalProps(modalProps);
-}
+};
 
 const exportReactionFunction = (updateModalProps) => {
   const component = ModalReactionExport;
   const modalProps = {
     show: true,
-    title: "Reaction Smiles Export",
+    title: 'Reaction Smiles Export',
     component,
-    customModal: "exportModal"
+    customModal: 'exportModal'
   };
   updateModalProps(modalProps);
-}
+};
 
 const exportCollectionFunction = (updateModalProps) => {
-  const title = "Export Collections as ZIP archive";
+  const title = 'Export Collections as ZIP archive';
   const component = ModalExportCollection;
   const action = CollectionActions.exportCollectionsToFile;
   const full = false;
@@ -128,10 +152,10 @@ const exportCollectionFunction = (updateModalProps) => {
   };
 
   updateModalProps(modalProps);
-}
+};
 
 const importCollectionFunction = (updateModalProps) => {
-  const title = "Import Collections from ZIP archive";
+  const title = 'Import Collections from ZIP archive';
   const component = ModalImportCollection;
   const action = CollectionActions.importCollectionsFromFile;
   const listSharedCollections = false;
@@ -147,4 +171,33 @@ const importCollectionFunction = (updateModalProps) => {
   updateModalProps(modalProps);
 };
 
-export default ExportImportButton
+const editMetadataFunction = () => {
+  const { currentCollection, isSync } = UIStore.getState();
+  const uri = isSync
+    ? `/scollection/${currentCollection.id}/metadata`
+    : `/collection/${currentCollection.id}/metadata`;
+  Aviator.navigate(uri, { silent: true });
+
+  elementShowOrNew({
+    type: 'metadata',
+    params: { collectionID: currentCollection.id }
+  });
+};
+
+const exportCollectionToRadarFunction = (updateModalProps) => {
+  const title = "Publish current collection via RADAR";
+  const component = ModalExportRadarCollection;
+  const action = CollectionActions.exportCollectionToRadar;
+
+  const modalProps = {
+    show: true,
+    title,
+    component,
+    action,
+    editAction: editMetadataFunction
+  };
+
+  updateModalProps(modalProps);
+};
+
+export default ExportImportButton;
diff --git a/app/packs/src/components/contextActions/ModalExport.js b/app/packs/src/components/contextActions/ModalExport.js
index 4f097ace9..9272bb255 100644
--- a/app/packs/src/components/contextActions/ModalExport.js
+++ b/app/packs/src/components/contextActions/ModalExport.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { Button, ButtonToolbar, DropdownButton, MenuItem } from 'react-bootstrap';
-import CheckBoxs from '../common/CheckBoxs';
-import UIStore from './../stores/UIStore';
-import UserStore from './../stores/UserStore';
-import ReportsFetcher from './../fetchers/ReportsFetcher';
+import {
+  Button, ButtonToolbar, DropdownButton, MenuItem
+} from 'react-bootstrap';
+import CheckBoxs from 'src/components/common/CheckBoxs';
+import UIStore from 'src/stores/alt/stores/UIStore';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import ReportsFetcher from 'src/fetchers/ReportsFetcher';
 
 const filterUIState = (uiState) => {
   const {
@@ -40,61 +42,91 @@ export default class ModalExport extends React.Component {
     this.state = {
       columns: {
         sample: [
-          {value: ["sample_svg_file", "molecule_svg_file"], text: "image", checked: false},
-          {value: "name", text: "name", checked: true},
-          {value: "molecule_name", text: "molecule name", checked: false},
-          {value: "external_label", text: "external label", checked: true},
-          {value: "short_label", text: "short label", checked: false},
-          {value: "description", text: "description", checked: false},
-          {value: ["real_amount_value", "real_amount_unit"], text: "real amount", checked: true},
-          {value: ["target_amount_value", "target_amount_unit"], text: "target amount", checked: false},
-          {value: ["molarity_value", "molarity_unit"], text: "molarity", checked: false},
-          {value: "density", text: "density", checked: false},
-          {value: "molfile", text: "molfile", checked: false},
-        //  {value: "purity", text: "purity", checked: false},
-          {value: "solvent", text: "solvent", checked: false},
-          {value: "location", text: "location", checked: false},
-          {value: "is_top_secret", text: "is top secret?", checked: false},
-        //  {value: "ancestry", text: "ancestry", checked: false},
-          {value: "imported_readout", text: "imported readout", checked: false},
-        //  {value: "identifier", text: "identifier", checked: false},
-          {value: "melting_point", text: "melting point", checked: false},
-          {value: "boiling_point", text: "boiling point", checked: false},
-          {value: "created_at", text: "created at", checked: true},
-          {value: "updated_at", text: "updated at", checked: false},
-          {value: "user_labels", text: "user labels", checked: false},
-          {value: "literature", text: "literature", checked: false},
+          { value: 'cas', text: 'cas', checked: true },
+          { value: ['sample_svg_file', 'molecule_svg_file'], text: 'image', checked: false },
+          { value: 'name', text: 'name', checked: true },
+          { value: 'molecule_name', text: 'molecule name', checked: false },
+          { value: 'external_label', text: 'external label', checked: true },
+          { value: 'short_label', text: 'short label', checked: false },
+          { value: 'description', text: 'description', checked: false },
+          { value: ['real_amount_value', 'real_amount_unit'], text: 'real amount', checked: true },
+          { value: ['target_amount_value', 'target_amount_unit'], text: 'target amount', checked: false },
+          { value: ['molarity_value', 'molarity_unit'], text: 'molarity', checked: false },
+          { value: 'density', text: 'density', checked: false },
+          { value: 'molfile', text: 'molfile', checked: false },
+          //  {value: "purity", text: "purity", checked: false},
+          { value: "solvent", text: "solvent", checked: false },
+          { value: "location", text: "location", checked: false },
+          { value: "is_top_secret", text: "is top secret?", checked: false },
+          { value: "dry_solvent", text: "dry solvent", checked: false },
+          //  {value: "ancestry", text: "ancestry", checked: false},
+          { value: 'imported_readout', text: 'imported readout', checked: false },
+          //  {value: "identifier", text: "identifier", checked: false},
+          { value: 'melting_point', text: 'melting point', checked: false },
+          { value: 'boiling_point', text: 'boiling point', checked: false },
+          { value: 'created_at', text: 'created at', checked: true },
+          { value: 'updated_at', text: 'updated at', checked: false },
+          { value: 'user_labels', text: 'user labels', checked: false },
+          { value: 'literature', text: 'literature', checked: false },
         ],
         molecule: [
-          {value: "cano_smiles", text: "canonical smiles", checked: true},
-          {value: "inchistring", text: "InChIstring", checked: false},
-          {value: "inchikey", text: "InChIkey", checked: false},
-          {value: "sum_formular", text: "sum formula", checked: false},
-          {value: "molecular_weight", text: "molecular weight", checked: false},
+          { value: 'cano_smiles', text: 'canonical smiles', checked: true },
+          { value: 'inchistring', text: 'InChIstring', checked: false },
+          { value: 'inchikey', text: 'InChIkey', checked: false },
+          { value: 'sum_formular', text: 'sum formula', checked: false },
+          { value: 'molecular_weight', text: 'molecular weight', checked: false },
         ],
         reaction: [
-          {value: "name", text: "reaction name", checked: true},
-          {value: "short_label", text: "r short label", checked: true},
-          {value: "reference", text: "reference", checked: false},
-          {value: "equivalent", text: "equivalent", checked: false},
+          { value: 'name', text: 'reaction name', checked: true },
+          { value: 'short_label', text: 'r short label', checked: true },
+          { value: 'reference', text: 'reference', checked: false },
+          { value: 'equivalent', text: 'equivalent', checked: false },
         ],
         wellplate: [
-          {value: "name", text: "wellplate name", checked: false},
-          {value: "position_x", text: "well x", checked: false},
-          {value: "position_y", text: "well y", checked: false},
+          { value: 'name', text: 'wellplate name', checked: false },
+          { value: 'position_x', text: 'well x', checked: false },
+          { value: 'position_y', text: 'well y', checked: false },
         ],
         analyses: [
-          { value: "name", text: "analysis name", checked: false },
-          { value: "description", text: "analysis description", checked: false },
-          { value: "kind", text: "analysis type", checked: false },
-          { value: "content", text: "analysis content", checked: false },
-          { value: "status", text: "analysis status", checked: false },
-          { value: "uuid", text: "uuid", checked: false },
-          { value: "dataset name", text: "dataset name", checked: false },
-          { value: "dataset description", text: "dataset description", checked: false },
-          { value: "instrument", text: "instrument", checked: false },
-          { value: "filename", text: "file name", checked: false },
-          { value: "checksum", text: "file checksum", checked: false },
+          { value: 'name', text: 'analysis name', checked: false },
+          { value: 'description', text: 'analysis description', checked: false },
+          { value: 'kind', text: 'analysis type', checked: false },
+          { value: 'content', text: 'analysis content', checked: false },
+          { value: 'status', text: 'analysis status', checked: false },
+          { value: 'uuid', text: 'uuid', checked: false },
+          { value: 'dataset name', text: 'dataset name', checked: false },
+          { value: 'dataset description', text: 'dataset description', checked: false },
+          { value: 'instrument', text: 'instrument', checked: false },
+          { value: 'filename', text: 'file name', checked: false },
+          { value: 'checksum', text: 'file checksum', checked: false },
+        ],
+        chemicals: [
+          { value: 'status', text: 'status', checked: false },
+          { value: 'vendor', text: 'vendor', checked: false },
+          { value: 'order_number', text: 'order number', checked: false },
+          { value: 'amount', text: 'amount', checked: false },
+          { value: 'price', text: 'price', checked: false },
+          { value: 'person', text: 'person', checked: false },
+          { value: 'required_date', text: 'required date', checked: false },
+          { value: 'ordered_date', text: 'ordered date', checked: false },
+          { value: 'required_by', text: 'required by', checked: false },
+          { value: ['safety_sheet_link_merck', 'safety_sheet_link_thermofischer'], text: 'safety sheet link', checked: false },
+          { value: ['product_link_merck', 'product_link_thermofischer'], text: 'product link', checked: false },
+          { value: 'pictograms', text: 'pictograms', checked: false },
+          { value: 'h_statements', text: 'h statements', checked: false },
+          { value: 'p_statements', text: 'p statements', checked: false },
+          { value: 'host_building', text: 'host building', checked: false },
+          { value: 'host_room', text: 'host room', checked: false },
+          { value: 'host_cabinet', text: 'host cabinet', checked: false },
+          { value: 'host_group', text: 'host group', checked: false },
+          { value: 'owner', text: 'owner', checked: false },
+          { value: 'current_building', text: 'current building', checked: false },
+          { value: 'current_room', text: 'current room', checked: false },
+          { value: 'current_cabinet', text: 'current cabinet', checked: false },
+          { value: 'current_group', text: 'current group', checked: false },
+          { value: 'borrowed_by', text: 'borrowed by', checked: false },
+          { value: 'disposal_info', text: 'disposal info', checked: false },
+          { value: 'important_notes', text: 'important notes', checked: false },
         ],
       },
       checkedAllColumns: {
@@ -105,7 +137,7 @@ export default class ModalExport extends React.Component {
         analysis: false,
       },
     };
-    this.handleClick = this.handleClick.bind(this)
+    this.handleClick = this.handleClick.bind(this);
   }
 
   toggleColumns(text, checked, section) {
@@ -117,7 +149,7 @@ export default class ModalExport extends React.Component {
         }
         return col
       })
-      return {...prevState, columns}
+      return { ...prevState, columns }
     })
   }
 
@@ -141,6 +173,10 @@ export default class ModalExport extends React.Component {
     this.toggleColumns(text, checked, 'analyses');
   }
 
+  toggleColumnsChemicals(text, checked) {
+    this.toggleColumns(text, checked, 'chemicals');
+  }
+
   toggleColumnsAll(section) {
     this.setState((prevState) => {
       const { columns, checkedAllColumns } = prevState;
@@ -172,22 +208,33 @@ export default class ModalExport extends React.Component {
     this.toggleColumnsAll('analyses');
   }
 
+  toggleColumnsAllChemicals(text, checked) {
+    this.toggleColumnsAll('chemicals');
+  }
+
   buttonBar() {
     const { onHide } = this.props;
+    const chemicalColumns = this.filteredColumns();
+    const sdfChemicalExport = chemicalColumns.chemicals.length !== 0;
     return (
       <ButtonToolbar>
         <div className="pull-right">
           <ButtonToolbar>
             <Button bsStyle="primary" onClick={onHide}>Cancel</Button>
-            <DropdownButton dropup bsStyle="warning" id="md-export-dropdown"
-                title="XLSX/SD Export" onSelect={this.handleClick}>
+            <DropdownButton
+              dropup
+              bsStyle="warning"
+              id="md-export-dropdown"
+              title="XLSX/SD Export"
+              onSelect={this.handleClick}
+            >
               <MenuItem eventKey="1">XLSX Export</MenuItem>
-              <MenuItem eventKey="2">SDF Export</MenuItem>
+              <MenuItem eventKey="2" disabled={sdfChemicalExport}>SDF Export</MenuItem>
             </DropdownButton>
           </ButtonToolbar>
         </div>
       </ButtonToolbar>
-    )
+    );
   }
 
   handleClick(e) {
@@ -224,38 +271,44 @@ export default class ModalExport extends React.Component {
       <div>
         <div className='export-container'>
           <h4>Sample properties</h4>
-          <CheckBoxs  items={this.state.columns.sample}
+          <CheckBoxs items={this.state.columns.sample}
             toggleCheckbox={this.toggleColumnsSample.bind(this)}
             toggleCheckAll={this.toggleColumnsAllSample.bind(this)}
             checkedAll={this.state.checkedAllColumns.sample}
           />
           <h4>Molecule properties</h4>
-          <CheckBoxs  items={this.state.columns.molecule}
+          <CheckBoxs items={this.state.columns.molecule}
             toggleCheckbox={this.toggleColumnsMolecule.bind(this)}
             toggleCheckAll={this.toggleColumnsAllMolecule.bind(this)}
             checkedAll={this.state.checkedAllColumns.molecule}
           />
           <h4>Reaction properties</h4>
-          <CheckBoxs  items={this.state.columns.reaction}
+          <CheckBoxs items={this.state.columns.reaction}
             toggleCheckbox={this.toggleColumnsReaction.bind(this)}
             toggleCheckAll={this.toggleColumnsAllReaction.bind(this)}
             checkedAll={this.state.checkedAllColumns.reaction}
           />
           <h4>Wellplate and well properties</h4>
-          <CheckBoxs  items={this.state.columns.wellplate}
+          <CheckBoxs items={this.state.columns.wellplate}
             toggleCheckbox={this.toggleColumnsWellplate.bind(this)}
             toggleCheckAll={this.toggleColumnsAllWellplate.bind(this)}
             checkedAll={this.state.checkedAllColumns.wellplate}
           />
           <h4>Analyses</h4>
-          <CheckBoxs  items={this.state.columns.analyses}
+          <CheckBoxs items={this.state.columns.analyses}
             toggleCheckbox={this.toggleColumnsAnalyses.bind(this)}
             toggleCheckAll={this.toggleColumnsAllAnalyses.bind(this)}
             checkedAll={this.state.checkedAllColumns.analyses}
           />
+          <h4>Chemicals</h4>
+          <CheckBoxs items={this.state.columns.chemicals}
+            toggleCheckbox={this.toggleColumnsChemicals.bind(this)}
+            toggleCheckAll={this.toggleColumnsAllChemicals.bind(this)}
+            checkedAll={this.state.checkedAllColumns.chemicals}
+          />
         </div>
         {this.buttonBar()}
       </div>
-    )
+    );
   }
 }
diff --git a/app/packs/src/components/contextActions/NoticeButton.js b/app/packs/src/components/contextActions/NoticeButton.js
index 3ffd9c9b2..71d940d57 100644
--- a/app/packs/src/components/contextActions/NoticeButton.js
+++ b/app/packs/src/components/contextActions/NoticeButton.js
@@ -1,15 +1,26 @@
 import React from 'react';
-import { PanelGroup, Panel, Button, Modal, Table } from 'react-bootstrap';
+import {
+  PanelGroup, Panel, Button, Modal, Table
+} from 'react-bootstrap';
 import 'whatwg-fetch';
 import _ from 'lodash';
-import MessagesFetcher from '../fetchers/MessagesFetcher';
-import CollectionActions from '../actions/CollectionActions';
-import NotificationActions from '../actions/NotificationActions';
-import InboxActions from '../actions/InboxActions';
-import ReportActions from '../actions/ReportActions';
-import ElementActions from '../actions/ElementActions';
+import MessagesFetcher from 'src/fetchers/MessagesFetcher';
+import CollectionActions from 'src/stores/alt/actions/CollectionActions';
+import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import InboxActions from 'src/stores/alt/actions/InboxActions';
+import ReportActions from 'src/stores/alt/actions/ReportActions';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import CalendarActions from 'src/stores/alt/actions/CalendarActions';
+import InboxStore from 'src/stores/alt/stores/InboxStore';
+import { formatDate } from 'src/utilities/timezoneHelper';
 
-const changeUrl = (url, urlTitle) => (url ? <a href={url} target="_blank" rel="noopener noreferrer">{urlTitle || url}</a> : <span />);
+const changeUrl = (url, urlTitle) => (url ? (
+  <a href={url} target="_blank" rel="noopener noreferrer">
+    {urlTitle || url}
+  </a>
+) : (
+  <span />
+));
 
 const handleNotification = (nots, act, needCallback = true) => {
   nots.forEach((n) => {
@@ -17,15 +28,20 @@ const handleNotification = (nots, act, needCallback = true) => {
       NotificationActions.removeByUid(n.id);
     }
     if (act === 'add') {
-      const time = new Date().getTime();
-      const newText = n.content.data.split('\n').map(i => <p key={`${time + i}`}>{i}</p>);
+      const infoTimeString = formatDate(n.created_at);
+
+      const newText = n.content.data
+        .split('\n')
+        .map((i) => <p key={`${infoTimeString}-${i}`}>{i}</p>);
       const { url, urlTitle } = n.content;
       if (url) {
-        newText[newText.length] = <p key={`${new Date().getTime()}-${url}`}>{changeUrl(url, urlTitle)}</p>;
+        newText[newText.length] = (
+          <p key={`${infoTimeString}-${url}`}>{changeUrl(url, urlTitle)}</p>
+        );
       }
 
       const notification = {
-        title: `From ${n.sender_name} on ${n.updated_at}`,
+        title: `From ${n.sender_name} on ${infoTimeString}`,
         message: newText,
         level: n.content.level || 'warning',
         dismissible: 'button',
@@ -33,18 +49,25 @@ const handleNotification = (nots, act, needCallback = true) => {
         position: n.content.position || 'tr',
         uid: n.id,
         action: {
-          label: <span><i className="fa fa-check" aria-hidden="true" />&nbsp;&nbsp;Got it</span>,
+          label: (
+            <span>
+              <i className="fa fa-check" aria-hidden="true" />
+              &nbsp;&nbsp;Got it
+            </span>
+          ),
           callback() {
             if (needCallback) {
               const params = { ids: [] };
               params.ids[0] = n.id;
               MessagesFetcher.acknowledgedMessage(params);
             }
-          }
-        }
+          },
+        },
       };
       NotificationActions.add(notification);
 
+      const { currentPage, itemsPerPage } = InboxStore.getState();
+
       switch (n.content.action) {
         case 'CollectionActions.fetchRemoteCollectionRoots':
           CollectionActions.fetchRemoteCollectionRoots();
@@ -53,15 +76,11 @@ const handleNotification = (nots, act, needCallback = true) => {
           CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'Repository_ReviewRequest':
-        case 'Repository_Published':
-          // CollectionActions.fetchSyncInCollectionRoots();
-          break;
-        case 'Repository_ReviewRequest':
         case 'Repository_Published':
           // CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'InboxActions.fetchInbox':
-          InboxActions.fetchInbox();
+          InboxActions.fetchInbox({ currentPage, itemsPerPage });
           break;
         case 'ReportActions.updateProcessQueue':
           ReportActions.updateProcessQueue([parseInt(n.content.report_id, 10)]);
@@ -77,20 +96,31 @@ const handleNotification = (nots, act, needCallback = true) => {
           CollectionActions.fetchSyncInCollectionRoots();
           break;
         case 'ElementActions.fetchResearchPlanById':
-          ElementActions.fetchResearchPlanById(parseInt(n.content.research_plan_id, 10));
+          ElementActions.fetchResearchPlanById(
+            parseInt(n.content.research_plan_id, 10)
+          );
+          break;
+        case 'CalendarActions.navigateToElement':
+          CalendarActions.navigateToElement(
+            n.content.eventable_type,
+            n.content.eventable_id
+          );
           break;
         default:
-          //
+        //
       }
     }
   });
 };
 
 const createUpgradeNotification = (serverVersion, localVersion) => {
-  const content = ['Dear ELNer,', 'A new version has been released. Please reload this page to enjoy the latest updates.',
+  const content = [
+    'Dear ELNer,',
+    'A new version has been released. Please reload this page to enjoy the latest updates.',
     'Thank you and have a nice day  :)',
     '--------------------------',
-    `Your version: ${localVersion}`, `Current version: ${serverVersion}`,
+    `Your version: ${localVersion}`,
+    `Current version: ${serverVersion}`,
     '--------------------------',
   ].join('\n');
   const contentJson = { data: content };
@@ -104,9 +134,9 @@ const createUpgradeNotification = (serverVersion, localVersion) => {
   const infoTimeString = new Date().toLocaleDateString('de-DE', options);
   const not = {
     id: -1,
-    sender_name: 'System Adminstrator',
-    updated_at: `${infoTimeString}`,
-    content: contentJson
+    sender_name: 'System Administrator',
+    updated_at: infoTimeString,
+    content: contentJson,
   };
   handleNotification([not], 'add', false);
 };
@@ -133,6 +163,7 @@ export default class NoticeButton extends React.Component {
 
   componentDidMount() {
     this.envConfiguration();
+    this.startActivityDetection();
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -141,8 +172,8 @@ export default class NoticeButton extends React.Component {
 
     const notIds = _.map(nots, 'id');
     const nextNotIds = _.map(nextNots, 'id');
-    const newMessages = _.filter(nextNots, o => !_.includes(notIds, o.id));
-    const remMessages = _.filter(nots, o => !_.includes(nextNotIds, o.id));
+    const newMessages = _.filter(nextNots, (o) => !_.includes(notIds, o.id));
+    const remMessages = _.filter(nots, (o) => !_.includes(nextNotIds, o.id));
 
     if (Object.keys(newMessages).length > 0) {
       handleNotification(newMessages, 'add');
@@ -150,13 +181,22 @@ export default class NoticeButton extends React.Component {
     if (Object.keys(remMessages).length > 0) {
       handleNotification(remMessages, 'rem');
     }
-    if (nextState.serverVersion && nextState.localVersion
+    if (
+      nextState.serverVersion
+      && nextState.localVersion
       && nextState.serverVersion !== this.state.serverVersion
-      && nextState.serverVersion !== nextState.localVersion) {
-      const serverVer = nextState.serverVersion.substring(nextState.serverVersion.indexOf('-') + 1, nextState.serverVersion.indexOf('.js'));
-      const localVer = nextState.localVersion.substring(nextState.localVersion.indexOf('-') + 1, nextState.localVersion.indexOf('.js'));
+      && nextState.serverVersion !== nextState.localVersion
+    ) {
+      const serverVer = nextState.serverVersion.substring(
+        nextState.serverVersion.indexOf('-') + 1,
+        nextState.serverVersion.indexOf('.js')
+      );
+      const localVer = nextState.localVersion.substring(
+        nextState.localVersion.indexOf('-') + 1,
+        nextState.localVersion.indexOf('.js')
+      );
       if (serverVer !== localVer) {
-        createUpgradeNotification(serverVer, localVer);
+        // createUpgradeNotification(serverVer, localVer);
       }
     }
 
@@ -164,6 +204,30 @@ export default class NoticeButton extends React.Component {
   }
 
   componentWillUnmount() {
+    this.stopActivityDetection();
+  }
+
+  handleShow() {
+    MessagesFetcher.fetchMessages(0).then((result) => {
+      result.messages.sort((a, b) => a.id - b.id);
+      this.setState({ showModal: true, dbNotices: result.messages });
+    });
+  }
+
+  handleHide() {
+    this.setState({ showModal: false });
+  }
+
+  startActivityDetection() {
+    const { messageEnable } = this.state;
+    if (messageEnable === true) {
+      this.interval = setInterval(this.messageFetch.bind(this), this.state.messageAutoInterval);
+      document.addEventListener('mousemove', this.detectActivity);
+      document.addEventListener('click', this.detectActivity);
+    }
+  }
+
+  stopActivityDetection() {
     const { messageEnable } = this.state;
     if (messageEnable === true) {
       document.removeEventListener('mousemove', this.detectActivity, false);
@@ -176,45 +240,39 @@ export default class NoticeButton extends React.Component {
     // use 'application' (not 'application-') as keyword because there is a
     // difference between production and development environment
     const documentIndex = 'application';
-    const applicationTag = _.filter(document.scripts, s => s.src.indexOf(documentIndex) > -1);
-    const applicationTagValue = applicationTag[0].src.substr(applicationTag[0].src
-      .indexOf(documentIndex));
-    MessagesFetcher.configuration()
-      .then((result) => {
-        this.setState({
-          messageEnable: result.messageEnable === 'true',
-          messageAutoInterval: result.messageAutoInterval,
-          idleTimeout: result.idleTimeout,
-          localVersion: applicationTagValue
-        });
-        const { messageEnable, messageAutoInterval } = this.state;
-
-        if (messageEnable === true) {
-          this.interval = setInterval(() => this.messageFetch(), messageAutoInterval);
-          document.addEventListener('mousemove', this.detectActivity);
-          document.addEventListener('click', this.detectActivity);
-        } else {
-          this.messageFetch();
-        }
+    const applicationTag = _.filter(
+      document.scripts,
+      (s) => s.src.indexOf(documentIndex) > -1
+    );
+    const applicationTagValue = applicationTag[0].src.substr(
+      applicationTag[0].src.indexOf(documentIndex)
+    );
+    MessagesFetcher.configuration().then((result) => {
+      this.setState({
+        messageEnable: result.messageEnable === 'true',
+        messageAutoInterval: result.messageAutoInterval,
+        idleTimeout: result.idleTimeout,
+        localVersion: applicationTagValue,
       });
+      const { messageEnable, messageAutoInterval } = this.state;
+
+      if (messageEnable === true) {
+        this.interval = setInterval(
+          () => this.messageFetch(),
+          messageAutoInterval
+        );
+        document.addEventListener('mousemove', this.detectActivity);
+        document.addEventListener('click', this.detectActivity);
+      } else {
+        this.messageFetch();
+      }
+    });
   }
 
   detectActivity() {
     this.setState({ lastActivityTime: new Date() });
   }
 
-  handleShow() {
-    MessagesFetcher.fetchMessages(0)
-      .then((result) => {
-        result.messages.sort((a, b) => (a.id - b.id));
-        this.setState({ showModal: true, dbNotices: result.messages });
-      });
-  }
-
-  handleHide() {
-    this.setState({ showModal: false });
-  }
-
   messageAck(idx, ackAll) {
     let { dbNotices } = this.state;
     const params = {
@@ -225,28 +283,34 @@ export default class NoticeButton extends React.Component {
     } else {
       params.ids[0] = idx;
     }
-    MessagesFetcher.acknowledgedMessage(params)
-      .then((result) => {
-        const ackIds = _.map(result.ack, 'id');
-        dbNotices = _.filter(this.state.dbNotices, o => !_.includes(ackIds, o.id));
-        dbNotices.sort((a, b) => (a.id - b.id));
-        this.setState({
-          dbNotices
-        });
+    MessagesFetcher.acknowledgedMessage(params).then((result) => {
+      const ackIds = _.map(result.ack, 'id');
+      dbNotices = _.filter(
+        this.state.dbNotices,
+        (o) => !_.includes(ackIds, o.id)
+      );
+      dbNotices.sort((a, b) => a.id - b.id);
+      this.setState({
+        dbNotices,
       });
+    });
   }
 
   messageFetch() {
     const { lastActivityTime, idleTimeout } = this.state;
     const clientLastActivityTime = new Date(lastActivityTime).getTime();
     const currentTime = new Date().getTime();
-    const remainTime = Math.floor((currentTime - clientLastActivityTime) / 1000);
+    const remainTime = Math.floor(
+      (currentTime - clientLastActivityTime) / 1000
+    );
     if (remainTime < idleTimeout) {
-      MessagesFetcher.fetchMessages(0)
-        .then((result) => {
-          result.messages.sort((a, b) => (a.id - b.id));
-          this.setState({ dbNotices: result.messages, serverVersion: result.version });
+      MessagesFetcher.fetchMessages(0).then((result) => {
+        result.messages.sort((a, b) => a.id - b.id);
+        this.setState({
+          dbNotices: result.messages,
+          serverVersion: result.version,
         });
+      });
     }
   }
 
@@ -265,8 +329,10 @@ export default class NoticeButton extends React.Component {
         <Table>
           <tbody>
             <tr>
-              <td style={{ border: '0px', width: '100vw', textAlign: 'center' }}>
-                No new messages.
+              <td
+                style={{ border: '0px', width: '100vw', textAlign: 'center' }}
+              >
+                No new notifications.
               </td>
             </tr>
           </tbody>
@@ -275,99 +341,147 @@ export default class NoticeButton extends React.Component {
     );
 
     if (Object.keys(dbNotices).length > 0) {
-      bMessages = dbNotices.map((not, index) => (
-        <Panel
-          key={`panel-modal-body-${not.id}`}
-          eventKey={index}
-          collapsible="true"
-          defaultExpanded
-          ref={(pl) => {
-            this[`myPl${index}`] = pl;
-          }}
-        >
-          <Panel.Heading>
-            <i className="fa fa-commenting-o" aria-hidden="true" />&nbsp;{not.subject}&nbsp;&nbsp;
-            <span><strong>From: </strong>{not.sender_name}</span>&nbsp;&nbsp;
-            <span><strong>Created On: </strong>{not.created_at}</span>
-          </Panel.Heading>
-          <Panel.Body>
-            <Table>
-              <tbody>
-                <tr>
-                  <td width="10%">
-                    <Button
-                      id={`notice-button-ack-${not.id}`}
-                      key={`notice-button-ack-${not.id}`}
-                      onClick={() => this.messageAck(not.id, false)}
-                    >
-                      <i className="fa fa-check" aria-hidden="true" />&nbsp;Got it
-                    </Button>
-                  </td>
-                  <td width="90%">
-                    { not.content.data }
-                    <br />
-                    {changeUrl(not.content.url, not.content.url_title)}
-                  </td>
-                </tr>
-              </tbody>
-            </Table>
-          </Panel.Body>
-        </Panel>
-      ));
+      bMessages = dbNotices.map((not, index) => {
+        const infoTimeString = formatDate(not.created_at);
+
+        const newText = not.content.data
+          .split('\n')
+          .map((i) => <p key={`${infoTimeString}-${i}`}>{i}</p>);
+
+        const { url, urlTitle } = not.content;
+        if (url) {
+          newText.push(
+            <p key={`${infoTimeString}-${url}`}>{changeUrl(url, urlTitle)}</p>
+          );
+        }
+
+        return (
+          <Panel
+            key={`panel-modal-body-${not.id}`}
+            eventKey={index}
+            collapsible="true"
+            defaultExpanded
+            ref={(pl) => {
+              this[`myPl${index}`] = pl;
+            }}
+          >
+            <Panel.Heading>
+              <i className="fa fa-commenting-o" aria-hidden="true" />
+              &nbsp;
+              {not.subject}
+              &nbsp;&nbsp;
+              <span>
+                <strong>From: </strong>
+                {not.sender_name}
+              </span>
+              &nbsp;&nbsp;
+              <span>
+                <strong>Created On: </strong>
+                {formatDate(not.created_at)}
+              </span>
+            </Panel.Heading>
+            <Panel.Body>
+              <Table>
+                <tbody>
+                  <tr>
+                    <td width="10%">
+                      <Button
+                        id={`notice-button-ack-${not.id}`}
+                        key={`notice-button-ack-${not.id}`}
+                        onClick={() => this.messageAck(not.id, false)}
+                      >
+                        <i className="fa fa-check" aria-hidden="true" />
+                        &nbsp;Got it
+                      </Button>
+                    </td>
+                    <td width="90%">{newText}</td>
+                  </tr>
+                </tbody>
+              </Table>
+            </Panel.Body>
+          </Panel>
+        );
+      });
     }
 
-    return (
-      <PanelGroup
-        id="panel-group-modal-body"
-      >
-        { bMessages }
-      </PanelGroup>
-    );
+    return <PanelGroup id="panel-group-modal-body">{bMessages}</PanelGroup>;
   }
 
   renderModal() {
     if (this.state.showModal) {
       return (
-        <Modal show={this.state.showModal} onHide={this.handleHide} dialogClassName="noticeModal">
+        <Modal
+          show={this.state.showModal}
+          onHide={this.handleHide}
+          dialogClassName="noticeModal"
+        >
           <Modal.Header closeButton>
-            <Modal.Title>Unread Messages</Modal.Title>
+            <Modal.Title>Unread Notifications</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ overflow: 'auto' }}>
             {this.renderBody()}
           </Modal.Body>
           <Modal.Footer>
-            <Button id="notice-button-ack-all" key="notice-button-ack-all" onClick={() => this.messageAck(0, true)}><i className="fa fa-check" aria-hidden="true" />&nbsp;Mark all messages as read</Button>
+            <Button
+              id="notice-button-ack-all"
+              key="notice-button-ack-all"
+              onClick={() => this.messageAck(0, true)}
+            >
+              <i className="fa fa-check" aria-hidden="true" />
+              &nbsp;Mark all notifications as read
+            </Button>
           </Modal.Footer>
         </Modal>
       );
     }
-    return (<div />);
+    return <div />;
   }
 
   render() {
     const noticeNum = Object.keys(this.state.dbNotices).length;
-    let btnStyle = 'warning';
-    let btnClass = 'fa fa-commenting-o fa-lg';
+    let btnStyle = 'default';
+    let btnClass = 'fa fa-bell-o fa-lg';
 
-    if (noticeNum <= 0) {
-      btnStyle = 'default';
-      btnClass = 'fa fa-comment-o fa-lg';
+    if (noticeNum > 0) {
+      btnStyle = 'warning';
+      btnClass = 'fa fa-bell fa-lg';
     }
 
     return (
-      <div>
-        {
-          noticeNum <= 0 ? <span className="badge badge-pill">{noticeNum}</span> :
-          <Button
-            id="notice-button"
-            bsStyle={btnStyle}
-            onClick={this.handleShow}
-            style={{ height: '34px', width: '36px' }}
-          >
-            <i className={btnClass} />&nbsp;
-            <span className="badge badge-pill" style={{ top: '6px', left: '-10px', fontSize: '8px' }}>{noticeNum}</span>
-          </Button>
-        }
+      <div style={{ position: 'relative', marginLeft: '-10px' }}>
+        <Button
+          id="notice-button"
+          bsStyle={btnStyle}
+          onClick={this.handleShow}
+          style={{
+            height: '34px',
+            width: '40px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '.04px',
+          }}
+        >
+          <i
+            className={btnClass}
+            style={{
+              left: '20px'
+            }}
+          />
+          {noticeNum > 0 && (
+            <span
+              className="badge badge-pill"
+              style={{
+                top: '25px',
+                left: '25px',
+                fontSize: '8px',
+                position: 'absolute'
+              }}
+            >
+              {noticeNum}
+            </span>
+          )}
+        </Button>
         {this.renderModal()}
       </div>
     );
diff --git a/app/packs/src/components/contextActions/ReportUtilButton.js b/app/packs/src/components/contextActions/ReportUtilButton.js
index 1df6b1d1b..7ed171495 100644
--- a/app/packs/src/components/contextActions/ReportUtilButton.js
+++ b/app/packs/src/components/contextActions/ReportUtilButton.js
@@ -3,9 +3,9 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
-import ElementActions from '../actions/ElementActions';
-import UserStore from '../stores/UserStore';
-import MatrixCheck from '../common/MatrixCheck';
+import ElementActions from 'src/stores/alt/actions/ElementActions';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import MatrixCheck from 'src/components/common/MatrixCheck';
 
 const showReportContainer = () => {
   ElementActions.showReportContainer();
@@ -74,10 +74,10 @@ const ReportUtilButton = ({ customClass, isDisabled=false  }) => {
           Format Analyses
         </MenuItem>
         <MenuItem onSelect={ElementActions.showLiteratureDetail} title="Reference Manager">
-          Literature
+          Reference Manager
         </MenuItem>
-        {graph}
-        {task}
+        {/* {graph}
+        {task} */}
         {divider}
         {predDiv}
       </Dropdown.Menu>
diff --git a/app/packs/src/components/elements/ElementField.js b/app/packs/src/components/elements/ElementField.js
deleted file mode 100644
index 84f51e279..000000000
--- a/app/packs/src/components/elements/ElementField.js
+++ /dev/null
@@ -1,332 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Popover, Col, Checkbox, Panel, Form, ButtonGroup, OverlayTrigger, FormGroup, FormControl, ControlLabel, InputGroup } from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import { ButtonTooltip, genUnitSup } from '../../admin/generic/Utils';
-import GroupFields from './GroupFields';
-import TextFormula from '../generic/TextFormula';
-import TableDef from '../generic/TableDef';
-
-const BaseFieldTypes = [
-  { value: 'integer', name: 'integer', label: 'Integer' },
-  { value: 'text', name: 'text', label: 'Text' },
-  { value: 'textarea', name: 'textarea', label: 'Text area' },
-  { value: 'select', name: 'select', label: 'Select' },
-  { value: 'checkbox', name: 'checkbox', label: 'Checkbox' },
-  { value: 'system-defined', name: 'system-defined', label: 'System-Defined' },
-  { value: 'formula-field', name: 'formula-field', label: 'Formula-Field' },
-];
-
-const ElementFieldTypes = [
-  { value: 'drag_molecule', name: 'drag_molecule', label: 'Drag Molecule' },
-  { value: 'drag_sample', name: 'drag_sample', label: 'Drag Sample' },
-  { value: 'input-group', name: 'input-group', label: 'Input Group' },
-  { value: 'text-formula', name: 'text-formula', label: 'Text-Formula' },
-  { value: 'table', name: 'table', label: 'Table' },
-  { value: 'upload', name: 'upload', label: 'Upload' },
-];
-
-const SegmentFieldTypes = [
-  { value: 'input-group', name: 'input-group', label: 'Input Group' },
-  { value: 'text-formula', name: 'text-formula', label: 'Text-Formula' },
-  { value: 'drag_molecule', name: 'drag_molecule', label: 'Drag Molecule' },
-  { value: 'table', name: 'table', label: 'Table' },
-  { value: 'upload', name: 'upload', label: 'Upload' },
-];
-
-class ElementField extends Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-    this.handelDelete = this.handelDelete.bind(this);
-    this.handleMove = this.handleMove.bind(this);
-    this.handleAddDummy = this.handleAddDummy.bind(this);
-    this.handleCond = this.handleCond.bind(this);
-    this.updSubField = this.updSubField.bind(this);
-  }
-
-  updSubField(layerKey, field, cb) {
-    this.props.onFieldSubFieldChange(layerKey, field, cb);
-  }
-
-  handleChange(e, orig, fe, lk, fc, tp) {
-    if ((tp === 'select' || tp === 'system-defined') && e === null) { return; }
-    this.props.onChange(e, orig, fe, lk, fc, tp);
-  }
-
-  handleMove(element) {
-    const { l, f, isUp } = element;
-    this.props.onMove(l, f, isUp);
-  }
-
-  handleAddDummy(element) {
-    this.props.onDummyAdd(element);
-  }
-
-  handleCond(field, lk) {
-    this.props.onShowFieldCond(field, lk);
-    //this.setState({ showFieldRestriction: true, element: element });
-  }
-
-  handelDelete(delStr, delKey, delRoot) {
-    this.props.onDelete(delStr, delKey, delRoot);
-  }
-
-  handleDrop(e) {
-    this.props.onDrop(e);
-  }
-
-  availableUnits(val) {
-    const { unitsSystem } = this.props;
-    const us = (unitsSystem.fields || []).find(e => e.field === val);
-    if (us === undefined) return null;
-    const tbl = us.units.map(e => (<div key={uuid.v4()}>{genUnitSup(e.label)}<br /></div>));
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left"><b><u>available units</u></b><br />{tbl}</Popover>
-    );
-    return (
-      <OverlayTrigger animation placement="top" root trigger={['hover', 'focus', 'click']} overlay={popover}>
-        <Button bsSize="xs"><i className="fa fa-table" aria-hidden="true" /></Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderDeleteButton(delStr, delKey, delRoot) {
-    const msg = `remove this field: [${delKey}] from layer [${delRoot}] `;
-    const popover = (
-      <Popover id="popover-positioned-scrolling-left">
-        {msg} <br />
-        <div className="btn-toolbar">
-          <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handelDelete(delStr, delKey, delRoot)}>
-            Yes
-          </Button><span>&nbsp;&nbsp;</span>
-          <Button bsSize="xsmall" bsStyle="warning" onClick={this.handleClick} >
-            No
-          </Button>
-        </div>
-      </Popover>
-    );
-
-    return (
-      <OverlayTrigger animation placement="top" root trigger="focus" overlay={popover}>
-        <Button bsSize="xs" ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderDummyFieldGroup(f) {
-    return (
-      <FormGroup controlId={`frmCtrlFid_${this.props.layerKey}_${f.field}`}>
-        <Col componentClass={ControlLabel} sm={3}>{`(${f.type})`}</Col>
-        <Col sm={9}><FormControl type="text" name={`f_${f.field}`} defaultValue={`${f.type},  an invisible entry (${f.field})`} disabled /></Col>
-      </FormGroup>
-    );
-  }
-
-  renderTextFieldGroup(f, label, field) {
-    return (
-      <FormGroup controlId={`frmCtrlFid_${this.props.layerKey}_${f.field}_${field}`}>
-        <Col componentClass={ControlLabel} sm={3}>{label}</Col>
-        <Col sm={9}>
-          <FormControl
-            type="text"
-            name={`f_${field}`}
-            defaultValue={f[field]}
-            disabled={field === 'field'}
-            onChange={event => this.handleChange(event, f[field], f.field, this.props.layerKey, field, 'text')}
-          />
-        </Col>
-      </FormGroup>
-    );
-  }
-
-  renderComponent() {
-    const { unitsSystem, layerKey, genericType, allLayers } = this.props;
-    const unitConfig = (unitsSystem.fields || []).map(_c =>
-      ({ value: _c.field, name: _c.label, label: _c.label }));
-    let typeOpts = BaseFieldTypes;
-    switch (genericType) {
-      case 'Element':
-        typeOpts = BaseFieldTypes.concat(ElementFieldTypes);
-        break;
-      case 'Segment':
-        typeOpts = BaseFieldTypes.concat(SegmentFieldTypes);
-        break;
-      default:
-        typeOpts = BaseFieldTypes;
-    }
-    typeOpts.sort((a, b) => a.value.localeCompare(b.value));
-    const f = this.props.field;
-    const hasCond = (f && f.cond_fields && f.cond_fields.length > 0) || false;
-    const btnCond = hasCond ?
-      (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(f, layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
-      (<ButtonTooltip tip="Restriction Setting" fnClick={() => this.handleCond(f, layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />)
-    const formulaField = (f.type === 'formula-field') ? (
-      <FormGroup controlId="formControlFieldType">
-        <Col componentClass={ControlLabel} sm={3}>Formula</Col>
-        <Col sm={9}>
-          <div style={{ display: 'flex' }}>
-            <span style={{ width: '100%' }}>
-              <FormControl
-                type="text"
-                name="f_label"
-                defaultValue={f.formula}
-                onChange={event => this.handleChange(event, f.label, f.field, this.props.layerKey, 'formula', 'text')}
-              />
-            </span>
-          </div>
-        </Col>
-      </FormGroup>)
-      : (<div />);
-    const selectOptions = (f.type === 'select' || f.type === 'system-defined') ? (
-      <FormGroup controlId="formControlFieldType">
-        <Col componentClass={ControlLabel} sm={3}>{f.type === 'select' ? 'Options' : <span />}</Col>
-        <Col sm={9}>
-          <div style={{ display: 'flex' }}>
-            <span style={{ width: '100%' }}>
-              <Select
-                className="drop-up"
-                name={f.field}
-                multi={false}
-                options={f.type === 'select' ? this.props.select_options : unitConfig}
-                value={f.option_layers || ''}
-                onChange={event => this.handleChange(event, f.option_layers, f.field, layerKey, 'option_layers', f.type)}
-              />
-            </span>
-            {f.type === 'select' ? null : this.availableUnits(f.option_layers)}
-          </div>
-        </Col>
-      </FormGroup>)
-      : (<div />);
-    const skipRequired = ['Segment', 'Dataset'].includes(genericType) || !['integer', 'text'].includes(f.type) ? { display: 'none' } : {};
-    const groupOptions = ['input-group'].includes(f.type) ? (
-      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_sub_fields`}>
-        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
-        <Col sm={9}>
-          <GroupFields layerKey={layerKey} field={f} updSub={this.updSubField} unitsFields={(unitsSystem.fields || [])} />
-        </Col>
-      </FormGroup>
-    ) : null;
-    const tableOptions = ['table'].includes(f.type) ? (
-      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_sub_fields`}>
-        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
-        <Col sm={9}>
-          <TableDef genericType={genericType} layerKey={layerKey} field={f} updSub={this.updSubField} unitsFields={(unitsSystem.fields || [])} />
-          <InputGroup>
-            <InputGroup.Addon>Tables per row</InputGroup.Addon>
-            <FormControl componentClass="select" defaultValue={f.cols || 1} onChange={event => this.handleChange(event, f.cols, f.field, layerKey, 'cols', f.cols)} >
-              <option value={1}>1</option>
-              <option value={2}>2</option>
-            </FormControl>
-          </InputGroup>
-        </Col>
-      </FormGroup>
-    ) : null;
-    const textFormula = ['text-formula'].includes(f.type) ? (
-      <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_text_sub_fields`}>
-        <Col componentClass={ControlLabel} sm={3}>{' '}</Col>
-        <Col sm={9}>
-          <TextFormula layerKey={layerKey} field={f} updSub={this.updSubField} allLayers={allLayers} />
-        </Col>
-      </FormGroup>
-    ) : null;
-    return (
-      <div>
-        <Panel>
-          <Panel.Heading className="template_panel_heading">
-            <Panel.Title toggle>
-              {this.props.position}&nbsp;
-              {['dummy'].includes(f.type) ? '(dummy field)' : f.field}
-            </Panel.Title>
-            <ButtonGroup bsSize="xsmall">
-              {btnCond}
-              <ButtonTooltip tip="Move Up" fnClick={this.handleMove} element={{ l: layerKey, f: f.field, isUp: true }} fa="fa-arrow-up" place="top" disabled={this.props.position === 1} />
-              <ButtonTooltip tip="Move Down" fnClick={this.handleMove} element={{ l: layerKey, f: f.field, isUp: false }} fa="fa-arrow-down" place="top" />
-              {this.renderDeleteButton('Field', f.field, layerKey)}
-              <ButtonTooltip tip="Add Dummy field" fnClick={this.handleAddDummy} element={{ l: layerKey, f: f.field }} fa="fa fa-plus-circle" place="top" />
-            </ButtonGroup>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              <Form horizontal className="default_style">
-                {['dummy'].includes(f.type) ? this.renderDummyFieldGroup(f) : null}
-                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Field Name', 'field') : null}
-                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Display Name', 'label') : null}
-                {!['dummy'].includes(f.type) ? this.renderTextFieldGroup(f, 'Hover Info', 'description') : null}
-                {
-                  ['dummy'].includes(f.type) ? null : (
-                    <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_type`}>
-                      <Col componentClass={ControlLabel} sm={3}>Type</Col>
-                      <Col sm={9}>
-                        <div style={{ display: 'flex' }}>
-                          <span style={{ width: '100%' }}>
-                            <Select
-                              className="drop-up"
-                              name={f.field}
-                              multi={false}
-                              options={typeOpts}
-                              value={f.type}
-                              onChange={event => this.handleChange(event, f.type, f.field, layerKey, 'type', 'select')}
-                            />
-                          </span>
-                        </div>
-                      </Col>
-                    </FormGroup>)
-                  }
-                { groupOptions }
-                { tableOptions }
-                { selectOptions }
-                { formulaField }
-                { textFormula }
-                {
-                  ['dummy'].includes(f.type) ? null : (
-                    <FormGroup controlId={`frmCtrlFid_${layerKey}_${f.field}_required`} style={skipRequired}>
-                      <Col componentClass={ControlLabel} sm={3}>
-                        Required
-                      </Col>
-                      <Col sm={9}>
-                        <Checkbox
-                          checked={f.required}
-                          onChange={event => this.handleChange(event, f.required, f.field, layerKey, 'required', 'checkbox')}
-                        />
-                      </Col>
-                    </FormGroup>)
-                }
-                {['integer', 'text'].includes(f.type) ? this.renderTextFieldGroup(f, 'Placeholder', 'placeholder') : null}
-              </Form>
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    );
-  }
-
-  render() { return <Col md={12}>{this.renderComponent()}</Col>; }
-}
-
-ElementField.propTypes = {
-  genericType: PropTypes.string, // PropTypes.arrayOf(PropTypes.object),
-  layerKey: PropTypes.string.isRequired,
-  select_options: PropTypes.array.isRequired,
-  position: PropTypes.number.isRequired,
-  field: PropTypes.shape({
-    field: PropTypes.string,
-    type: PropTypes.string,
-    label: PropTypes.string,
-  }).isRequired,
-  onDrop: PropTypes.func.isRequired,
-  onMove: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  unitsSystem: PropTypes.object,
-  onFieldSubFieldChange: PropTypes.func.isRequired,
-  onDummyAdd: PropTypes.func.isRequired,
-  onShowFieldCond: PropTypes.func.isRequired,
-};
-
-ElementField.defaultProps = { genericType: 'Element', unitsSystem: [] };
-
-export { ElementField, ElementFieldTypes };
diff --git a/app/packs/src/components/elements/ElementFieldDragSource.js b/app/packs/src/components/elements/ElementFieldDragSource.js
deleted file mode 100644
index 4acc90a8a..000000000
--- a/app/packs/src/components/elements/ElementFieldDragSource.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from '../../components/DragDropItemTypes';
-
-const listSource = {
-  beginDrag(props) {
-    return { field: props.field, layerKey: props.layerKey };
-  },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const ElementFieldDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
-
-export default DragSource(DragDropItemTypes.ELEMENT_FIELD, listSource, collectSource)(ElementFieldDragSource);
-
-ElementFieldDragSource.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/elements/ElementFieldDropTarget.js b/app/packs/src/components/elements/ElementFieldDropTarget.js
deleted file mode 100644
index cb12e2a79..000000000
--- a/app/packs/src/components/elements/ElementFieldDropTarget.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../DragDropItemTypes';
-
-const fieldTarget = {
-  drop(targetProps, monitor) {
-    const targetTag = { field: targetProps.field, layerKey: targetProps.layerKey };
-    const sourceProps = monitor.getItem();
-    const sourceTag = { field: sourceProps.field, layerKey: sourceProps.layerKey };
-    //if (targetTag.field !== sourceTag.field) {
-      targetProps.onDrop({ sourceTag, targetTag });
-    //}
-  },
-  canDrop(targetProps, monitor) {
-    //console.log('canDrop--:', monitor.getItem());
-    return true;
-  },
-  hover(props, monitor, component) {
-    //console.log('hover--:', monitor.getItem());
-  }
-};
-
-const fieldDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-
-class ElementFieldDropTarget extends Component {
-  render() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}><div className="indicator" />DROP   here</div>);
-  }
-}
-
-export default DropTarget(
-  DragDropItemTypes.ELEMENT_FIELD,
-  fieldTarget, fieldDropCollect
-)(ElementFieldDropTarget);
-
-ElementFieldDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/components/elements/GroupFields.js b/app/packs/src/components/elements/GroupFields.js
deleted file mode 100644
index cbc89994c..000000000
--- a/app/packs/src/components/elements/GroupFields.js
+++ /dev/null
@@ -1,216 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import { AgGridReact } from 'ag-grid-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, FormGroup, FormControl } from 'react-bootstrap';
-import GenericSubField from '../models/GenericSubField';
-import DefinedRenderer from '../generic/DefinedRenderer';
-
-const AddRowBtn = ({ addRow }) => (
-  <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
-);
-
-AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
-
-const DelRowBtn = ({ delRow, node }) => {
-  const { data } = node;
-  const btnClick = () => {
-    delRow(data);
-  };
-  return (<Button onClick={btnClick} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>);
-};
-
-DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
-
-const TypeSelect = ({ selType, node }) => (
-  <FormGroup bsSize="small" style={{ marginRight: '-10px', marginLeft: '-10px' }}>
-    <FormControl componentClass="select" placeholder="select the type" onChange={e => selType(e, node)} defaultValue={node.data.type}>
-      <option value="label">label</option>
-      <option value="number">number</option>
-      <option value="text">text</option>
-      <option value="system-defined">System-Defined</option>
-    </FormControl>
-  </FormGroup>
-);
-
-TypeSelect.propTypes = { selType: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
-
-export default class GroupFields extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      unitConfig: props.unitsFields.map(e => ({ value: e.field, name: e.label, label: e.label }))
-    };
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.delRow = this.delRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-    this.selType = this.selType.bind(this);
-    this.selDefined = this.selDefined.bind(this);
-    this.refresh = this.refresh.bind(this);
-    this.onCellValueChanged = this.onCellValueChanged.bind(this);
-    this.columnDefs = [
-      {
-        headerName: 'Id',
-        field: 'id',
-        editable: false,
-        minWidth: 50,
-        width: 50,
-      },
-      {
-        headerName: 'Data Type',
-        field: 'type',
-        editable: false,
-        minWidth: 150,
-        width: 150,
-        cellRendererFramework: TypeSelect,
-        cellRendererParams: { selType: this.selType },
-      },
-      {
-        headerName: 'Default Value',
-        field: 'value',
-        editable: (e) => { if (e.data.type === 'system-defined') return false; return true; },
-        minWidth: 250,
-        cellRenderer: 'systemDefinedRenderer',
-        cellRendererParams: { unitConfig: this.state.unitConfig, selDefined: this.selDefined },
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: 'Option Layers(hidden)',
-        field: 'option_layers',
-        width: 10,
-        hide: true,
-      },
-      {
-        headerName: 'Value System(hidden)',
-        field: 'value_system',
-        width: 10,
-        hide: true,
-      },
-      {
-        headerName: '',
-        colId: 'actions',
-        headerComponentFramework: AddRowBtn,
-        headerComponentParams: { addRow: this.addRow },
-        cellRendererFramework: DelRowBtn,
-        cellRendererParams: { delRow: this.delRow },
-        editable: false,
-        filter: false,
-        minWidth: 48,
-        width: 48,
-        suppressSizeToFit: true,
-        pinned: 'left'
-      },
-    ];
-    this.frameworkComponents = {
-      systemDefinedRenderer: DefinedRenderer
-    };
-  }
-
-  componentDidUpdate() {
-    this.autoSizeAll();
-  }
-
-  onGridReady(e) {
-    this.gridApi = e.api;
-    this.autoSizeAll();
-  }
-
-  onCellValueChanged(params) {
-    const { oldValue, newValue } = params;
-    if (oldValue === newValue) return;
-    this.refresh();
-  }
-
-  autoSizeAll() {
-    if (!this.gridApi) return;
-    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
-  }
-
-  delRow() {
-    const selectedData = this.gridApi.getSelectedRows();
-    this.gridApi.applyTransaction({ remove: selectedData });
-    this.refresh();
-  }
-
-  addRow() {
-    const newSub = new GenericSubField({ type: 'text', value: '' });
-    const idx = this.gridApi.getDisplayedRowCount();
-    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
-    this.refresh();
-  }
-
-  selType(e, node) {
-    const { data } = node;
-    if (e.target.value === data.type) { return; }
-    data.type = e.target.value;
-    data.value = '';
-    const { unitConfig } = this.state;
-    if (data.type === 'system-defined') {
-      data.option_layers = (unitConfig || [])[0].value;
-      data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
-        .units || [])[0].key;
-    } else {
-      delete data.option_layers;
-      delete data.value_system;
-    }
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.sub_fields = rows;
-    this.gridApi.setRowData(rows);
-    updSub(layerKey, field, () => {});
-  }
-
-  selDefined(e, node) {
-    const { data } = node;
-    if (e.target.value === data.option_layers) { return; }
-    data.option_layers = e.target.value;
-    data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
-      .units || [])[0].key;
-    this.refresh();
-  }
-
-  refresh() {
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.sub_fields = rows;
-    updSub(layerKey, field, () => {});
-  }
-
-  render() {
-    const { field } = this.props;
-    const sub = field.sub_fields || [];
-    return (
-      <div>
-        <div style={{ fontSize: '10px' }}>
-          <b>Input Group: </b>
-          define the fields which are grouped together and display as one field;<br />
-          note: &#39;System-Defined&#39; represents the Unit field which
-          has one input field and one unit converter.
-        </div>
-        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
-          <AgGridReact
-            enableColResize
-            columnDefs={this.columnDefs}
-            rowSelection="single"
-            onGridReady={this.onGridReady}
-            rowData={sub}
-            singleClickEdit
-            stopEditingWhenGridLosesFocus
-            frameworkComponents={this.frameworkComponents}
-            domLayout="autoHeight"
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-GroupFields.propTypes = {
-  layerKey: PropTypes.string.isRequired,
-  field: PropTypes.object.isRequired,
-  updSub: PropTypes.func.isRequired,
-  unitsFields: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
diff --git a/app/packs/src/components/elements/UserCounter.js b/app/packs/src/components/elements/UserCounter.js
deleted file mode 100644
index ed590685f..000000000
--- a/app/packs/src/components/elements/UserCounter.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Row, Col, Panel, Button, FormControl } from 'react-bootstrap';
-import uuid from 'uuid';
-import UserStore from '../stores/UserStore';
-import UserActions from '../actions/UserActions';
-import AdminFetcher from '../fetchers/AdminFetcher';
-import UsersFetcher from '../fetchers/UsersFetcher';
-
-export default class UserCounter extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { currentUser: null, klasses: [] };
-    this.onChange = this.onChange.bind(this);
-    this.fetchKlasses = this.fetchKlasses.bind(this);
-    this.handleCounterChange = this.handleCounterChange.bind(this);
-    this.handleUpdate = this.handleUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-    this.fetchKlasses();
-  }
-
-  onChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) {
-      this.setState({ currentUser: state.currentUser });
-      this.fetchKlasses();
-    }
-  }
-
-
-  handleCounterChange(key, value) {
-    const { currentUser } = this.state;
-    const counters = (currentUser && currentUser.counters) || {};
-    counters[key] = value;
-    currentUser.counters = counters;
-    this.setState({ currentUser });
-  }
-
-  handleUpdate(type) {
-    const { currentUser } = this.state;
-    const counters = (currentUser && currentUser.counters) || {};
-    UsersFetcher.updateUserCounter({
-      type,
-      counter: counters[type] || 0
-    }).then(() => { document.location.href = '/'; }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  fetchKlasses() {
-    AdminFetcher.fetchElementKlasses()
-      .then((result) => {
-        const genericEntities = result && result.klass.filter(u => u.is_generic === true);
-        this.setState({ klasses: genericEntities || [] });
-      });
-  }
-
-  render() {
-    const { currentUser, klasses } = this.state;
-    const counterBody = (klasses || []).filter(k => k.is_active === true).map((klass) => {
-      const counter = parseInt((currentUser && currentUser.counters[klass.name]) || 0, 10);
-      const nextNum = `${currentUser && currentUser.initials}-${klass.klass_prefix}${counter + 1}`;
-      return (
-        <div key={uuid.v1()} style={{ marginTop: 10 }}>
-          <Row key={uuid.v1()}>
-            <Col sm={2}>{klass.label}</Col>
-            <Col sm={1}>{klass.klass_prefix}</Col>
-            <Col sm={3}>
-              <FormControl type="number" value={counter} onChange={e => this.handleCounterChange(klass.name, e.target.value)} min={0} />
-            </Col>
-            <Col sm={2}>{nextNum}</Col>
-            <Col sm={4}><Button bsStyle="primary" onClick={() => this.handleUpdate(klass.name)}>Update counter</Button></Col>
-          </Row>
-        </div>
-      );
-    });
-    if (klasses && klasses.length === 0) return (<span />);
-    return (
-      <Panel>
-        <Panel.Heading><Panel.Title>Element Counter</Panel.Title></Panel.Heading>
-        <Panel.Body>
-          <Row>
-            <Col sm={2}><b><u>Element Label</u></b></Col>
-            <Col sm={1}><b><u>Prefix</u></b></Col>
-            <Col sm={3}><b><u>Counter starts at</u></b></Col>
-            <Col sm={2}><b><u>Next Label</u></b></Col>
-            <Col sm={4}>&nbsp;</Col>
-          </Row>
-          {counterBody}
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('UserCounter');
-  if (domElement) { ReactDOM.render(<UserCounter />, domElement); }
-});
diff --git a/app/packs/src/components/examples/NumeralInputWithUnitsExample.js b/app/packs/src/components/examples/NumeralInputWithUnitsExample.js
deleted file mode 100644
index c39257b71..000000000
--- a/app/packs/src/components/examples/NumeralInputWithUnitsExample.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {Component} from 'react';
-import NumeralInput from '../NumeralInput'
-import NumeralInputWithUnits from '../NumeralInputWithUnits'
-
-export default class NumeralInputWithUnitsExample extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let ajaxCall = (unit, nextUnit, value) => {
-      let convertedValue = value;
-      if (unit && nextUnit && unit != nextUnit) {
-        switch (unit) {
-          case 'g':
-            if (nextUnit == 'mol') {
-              convertedValue = value * 2;
-            }
-            break;
-          case 'mol':
-            if (nextUnit == 'g') {
-              convertedValue = value / 2;
-            }
-            break;
-        }
-      }
-
-      return convertedValue;
-    };
-    return (
-      <div>
-        NumeralInput-Component with success and large and defaultValue
-        <NumeralInput bsStyle='success' bsSize='large' value='10'/>
-        NumeralInput-Component with defaultValue and numeralFormat
-        <NumeralInput value='10.2' numeralFormat='0,0.0'/>
-        NumeralInputWithUnits-Component with no props ~= NumeralInput-Component
-        <NumeralInputWithUnits />
-        NumeralInputWithUnits-Component with just one unit
-        <NumeralInputWithUnits units={['t']}/>
-        NumeralInputWithUnits-Component with unit-select and convertCallback
-        <NumeralInputWithUnits units={['g', 'mol']}
-                               convertValueFromUnitToNextUnit={(unit, nextUnit, value) => ajaxCall(unit, nextUnit, value)}/>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/extra/AdvancedSearchXSearchParams.js b/app/packs/src/components/extra/AdvancedSearchXSearchParams.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/AdvancedSearchXSearchParams.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionManagementXTabs.js b/app/packs/src/components/extra/CollectionManagementXTabs.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/CollectionManagementXTabs.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXhandlers.js b/app/packs/src/components/extra/CollectionStoreXhandlers.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/CollectionStoreXhandlers.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXlisteners.js b/app/packs/src/components/extra/CollectionStoreXlisteners.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/CollectionStoreXlisteners.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionStoreXstate.js b/app/packs/src/components/extra/CollectionStoreXstate.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/CollectionStoreXstate.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/CollectionTreeXdiv.js b/app/packs/src/components/extra/CollectionTreeXdiv.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/CollectionTreeXdiv.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXhandlers.js b/app/packs/src/components/extra/ElementStoreXhandlers.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ElementStoreXhandlers.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXlisteners.js b/app/packs/src/components/extra/ElementStoreXlisteners.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ElementStoreXlisteners.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementStoreXstate.js b/app/packs/src/components/extra/ElementStoreXstate.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ElementStoreXstate.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js b/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ElementsTableEntriesXTdCont.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js b/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ElementsTableSampleEntriesXMolHeadCont.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/HomeXHome.js b/app/packs/src/components/extra/HomeXHome.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/HomeXHome.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/ReactionDetailsXTabs.js b/app/packs/src/components/extra/ReactionDetailsXTabs.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/ReactionDetailsXTabs.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/SampleDetailsXLabels.js b/app/packs/src/components/extra/SampleDetailsXLabels.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/SampleDetailsXLabels.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/extra/SampleDetailsXTabs.js b/app/packs/src/components/extra/SampleDetailsXTabs.js
deleted file mode 100644
index 328f74875..000000000
--- a/app/packs/src/components/extra/SampleDetailsXTabs.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
diff --git a/app/packs/src/components/extra/routesXroutes.js b/app/packs/src/components/extra/routesXroutes.js
deleted file mode 100644
index 985076263..000000000
--- a/app/packs/src/components/extra/routesXroutes.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  count : 0,
-}
\ No newline at end of file
diff --git a/app/packs/src/components/fetchers/AdminFetcher.js b/app/packs/src/components/fetchers/AdminFetcher.js
deleted file mode 100644
index 178554f35..000000000
--- a/app/packs/src/components/fetchers/AdminFetcher.js
+++ /dev/null
@@ -1,427 +0,0 @@
-import 'whatwg-fetch';
-import BaseFetcher from './BaseFetcher';
-
-export default class AdminFetcher {
-  static fetchUnitsSystem() {
-    return fetch('/units_system/units_system.json', {
-      credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' }
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchLocalCollector() {
-    return fetch('/api/v1/admin/listLocalCollector/all.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static checkDiskSpace() {
-    return fetch('/api/v1/admin/disk.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDevices() {
-    return fetch('/api/v1/admin/listDevices/all.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDeviceById(deviceId) {
-    return fetch(`/api/v1/admin/device/${deviceId}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDeviceMetadataByDeviceId(deviceId) {
-    return fetch(`/api/v1/admin/deviceMetadata/${deviceId}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static postDeviceMetadata(params) {
-    return fetch('/api/v1/admin/deviceMetadata', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static syncDeviceMetadataToDataCite(params) {
-    return fetch(`/api/v1/admin/deviceMetadata/${params.device_id}/sync_to_data_cite`, {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static testSFTP(params) {
-    return fetch('/api/v1/admin/sftpDevice/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static removeDeviceMethod(params) {
-    return fetch('/api/v1/admin/removeDeviceMethod/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateDeviceMethod(params) {
-    return fetch('/api/v1/admin/updateDeviceMethod/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static editNovncSettings(params) {
-    return fetch('/api/v1/admin/editNovncSettings/', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then((response) => {
-      if (response.status === 204) { return ''; }
-      return 'error';
-    });
-  }
-
-  static resetUserPassword(params) {
-    return fetch('/api/v1/admin/resetPassword/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createUserAccount(params) {
-    return fetch('/api/v1/admin/newUser/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateUser(params) {
-    return fetch('/api/v1/admin/updateUser/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUsers() {
-    return fetch('/api/v1/admin/listUsers/all.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateAccount(params) {
-    return fetch('/api/v1/admin/updateAccount/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static olsTermDisableEnable(params) {
-    return fetch('/api/v1/admin/olsEnableDisable/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then((response) => {
-      if (response.status === 204) {
-        return true;
-      }
-    });
-  }
-
-  static importOlsTerms(file) {
-    const data = new FormData();
-    data.append('file', file);
-
-    return fetch('/api/v1/admin/importOlsTerms/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchGroupsDevices(type) {
-    return fetch(`/api/v1/admin/group_device/list?type=${type}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateGroup(params = {}) {
-    return fetch(`/api/v1/admin/group_device/update/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUsersByNameType(name, type) {
-    return fetch(`/api/v1/admin/group_device/name.json?type=${type}&name=${name}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createGroupDevice(params = {}) {
-    return fetch('/api/v1/admin/group_device/create', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUserGroupByName(name) {
-    return fetch(`/api/v1/admin/matrix/find_user.json?name=${name}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchMatrices() {
-    return fetch('/api/v1/admin/matrix/list.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateMatrice(params) {
-    return fetch('/api/v1/admin/matrix/update/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateMatriceJson(params) {
-    return fetch('/api/v1/admin/matrix/update_json/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static exec(path, method) {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: path, requestMethod: method, jsonTranformation: json => json
-    });
-  }
-
-  static genericKlass(params, path) {
-    return BaseFetcher.withBodyData({
-      apiEndpoint: `/api/v1/admin/${path}/`, requestMethod: 'POST', bodyData: params, jsonTranformation: json => json
-    });
-  }
-
-  static fetchElementKlasses() {
-    return this.exec('/api/v1/generic_elements/klasses_all.json', 'GET');
-  }
-
-  static updateGElTemplates(params) {
-    return this.genericKlass(params, 'update_element_template');
-  }
-
-  static createElementKlass(params) {
-    return this.genericKlass(params, 'create_element_klass');
-  }
-
-  static updateElementKlass(params) {
-    return this.genericKlass(params, 'update_element_klass');
-  }
-
-  static activeInActiveElementKlass(params) {
-    return this.genericKlass(params, 'de_active_element_klass');
-  }
-
-  static deleteElementKlass(params) {
-    return this.genericKlass(params, 'delete_element_klass');
-  }
-
-  static createSegmentKlass(params) {
-    return this.genericKlass(params, 'create_segment_klass');
-  }
-
-  static updateSegmentKlass(params) {
-    return this.genericKlass(params, 'update_segment_klass');
-  }
-
-  static deleteSegmentKlass(id) {
-    return this.exec(`/api/v1/admin/delete_segment_klass/${id}`, 'DELETE');
-  }
-
-  static deActiveSegmentKlass(params) {
-    return this.genericKlass(params, 'de_active_segment_klass');
-  }
-
-  static updateSegmentTemplate(params) {
-    return this.genericKlass(params, 'update_segment_template');
-  }
-
-  static deleteKlassRevision(params) {
-    return this.genericKlass(params, 'delete_klass_revision');
-  }
-
-  static deleteGenericRevision(id) {
-    return this.exec(`/api/v1/admin/delete_generic_revision/${id}`, 'DELETE');
-  }
-
-  static listSegmentKlass(params = {}) {
-    const api = params.is_active === undefined ? '/api/v1/admin/list_segment_klass.json' : `/api/v1/admin/list_segment_klass.json?is_active=${params.is_active}`;
-    return this.exec(api, 'GET');
-  }
-
-  static listDatasetKlass(params = {}) {
-    const api = params.is_active === undefined ? '/api/v1/admin/list_dataset_klass.json' : `/api/v1/admin/list_dataset_klass.json?is_active=${params.is_active}`;
-    return this.exec(api, 'GET');
-  }
-
-  static deActiveDatasetKlass(params) {
-    return this.genericKlass(params, 'de_active_dataset_klass');
-  }
-
-  static updateDatasetTemplate(params) {
-    return this.genericKlass(params, 'update_dataset_template');
-  }
-
-  static fetchJobs() {
-    return fetch('/api/v1/admin/jobs', {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-
-  static restartJob(id) {
-    return fetch('/api/v1/admin/jobs/restart/', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(id)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-
-  static fetchKlassRevisions(id, klass) {
-    return this.exec(`/api/v1/admin/klass_revisions.json?id=${id}&klass=${klass}`, 'GET');
-  }
-}
diff --git a/app/packs/src/components/fetchers/ArticleFetcher.js b/app/packs/src/components/fetchers/ArticleFetcher.js
deleted file mode 100644
index 4c8d151e7..000000000
--- a/app/packs/src/components/fetchers/ArticleFetcher.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ArticleFetcher {
-  static initial() {
-    const promise = fetch('/api/v1/public/article_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdate(params) {
-    const promise = fetch('/api/v1/articles/create_or_update/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static delete(params) {
-    const promise = fetch(`/api/v1/articles/${params.key}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static initialHowTo() {
-    const promise = fetch('/api/v1/public/howto_init.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static createOrUpdateHowTo(params) {
-    const promise = fetch('/api/v1/articles/create_or_update_howto/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static deleteHowTo(params) {
-    const promise = fetch('/api/v1/articles/delete_howto', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static updateEditorImage(file, editorType) {
-    const data = new FormData();
-    data.append('file[]', file.file, file.name);
-    data.append('editor_type', editorType);
-    const promise = fetch('/api/v1/articles/editor_image', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/AttachmentFetcher.js b/app/packs/src/components/fetchers/AttachmentFetcher.js
deleted file mode 100644
index 7c6acbac4..000000000
--- a/app/packs/src/components/fetchers/AttachmentFetcher.js
+++ /dev/null
@@ -1,523 +0,0 @@
-import 'whatwg-fetch';
-import { camelizeKeys, decamelizeKeys } from 'humps';
-
-import Attachment from '../models/Attachment';
-import NotificationActions from '../actions/NotificationActions';
-import SparkMD5 from 'spark-md5';
-import LoadingActions from '../actions/LoadingActions';
-
-const fileFromAttachment = (attachment, containerId) => {
-  const { file } = attachment;
-  file.id = attachment.id;
-  file.attachable_id = containerId;
-  file.attachable_type = 'Container';
-  return file;
-};
-
-export default class AttachmentFetcher {
-
-  static fetchImageAttachment(params) {
-    const promise = fetch(`/api/v1/attachments/image/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'GET'
-    }).then(response => response.blob())
-      .then(blob => ({ type: blob.type, data: URL.createObjectURL(blob) }))
-      .catch((errorMessage) => { console.log(errorMessage); });
-    return promise;
-  }
-
-  static fetchThumbnail(params) {
-    let promise = fetch(`/api/v1/attachments/thumbnail/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'GET'
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static fetchThumbnails(ids) {
-    let promise = fetch('/api/v1/attachments/thumbnails/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ ids }),
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static fetchFiles(ids) {
-    let promise = fetch('/api/v1/attachments/files/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ ids }),
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static fetchJcamp(target) {
-    const { file, mass, mol } = target;
-    const data = new FormData();
-    data.append('file', file);
-    data.append('molfile', mol);
-    data.append('mass', mass);
-
-    let promise = fetch('/api/v1/chemspectra/file/convert', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data,
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static getFileListfrom(container) {
-    if (container == null) return [];
-    const allFiles = [];
-    this.filterAllAttachments(allFiles, container.children);
-    return allFiles
-  }
-
-  static filterAllAttachments(files, containers) {
-    containers.forEach((container) => {
-      const tmpArray = (container.attachments || []).filter(a => a.is_new)
-        .map(a => fileFromAttachment(a, container.id));
-      files.push.apply(files, tmpArray);
-
-      if (container.children && container.children.length > 0) {
-        this.filterAllAttachments(files, container.children);
-      }
-    });
-  }
-
-  static updateAttachables(files, attachableType, attachableId, dels) {
-    const data = new FormData();
-    files.forEach((file) => {
-      data.append('files[]', file.file, file.name);
-    });
-    data.append('attachable_type', attachableType);
-    data.append('attachable_id', attachableId);
-    dels.forEach((f) => {
-      data.append('del_files[]', f.id);
-    });
-    return () => fetch('/api/v1/attachable/update_attachments_attachable', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      if (response.ok === false) {
-        let msg = 'Files uploading failed: ';
-        if (response.status === 413) {
-          msg += 'File size limit exceeded.';
-        } else {
-          msg += response.statusText;
-        }
-        NotificationActions.add({ message: msg, level: 'error', position: 'tc' });
-      }
-    });
-  }
-
-  static uploadToInbox(attachments) {
-    const data = new FormData();
-    const files = (attachments).filter(f => f.is_new)
-      .map(f => fileFromAttachment(f, null));
-    files.forEach((file) => {
-      data.append(file.id || file.name, file);
-    });
-    return () => fetch('/api/v1/attachments/upload_to_inbox', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      if (response.ok === false) {
-        let msg = 'Files uploading to Inbox failed: ';
-        if (response.status === 413) {
-          msg += 'File size limit exceeded.';
-        } else {
-          msg += response.statusText;
-        }
-        NotificationActions.add({
-          message: msg,
-          level: 'error'
-        });
-      }
-    });
-  }
-
-  static uploadFiles(files) {
-    const data = new FormData()
-    files.forEach((file) => {
-      data.append(file.id || file.name, file);
-    });
-    return () => fetch('/api/v1/attachments/upload_dataset_attachments', {
-      credentials: 'same-origin',
-      contentType: 'application/json',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      if (response.ok == false) {
-        let msg = 'Files uploading failed: ';
-        if (response.status == 413) {
-          msg += 'File size limit exceeded.'
-        } else {
-          msg += response.statusText;
-        }
-        NotificationActions.add({
-          message: msg,
-          level: 'error'
-        });
-      }
-    })
-  }
-
-  static uploadCompleted(filename, key, checksum) {
-    return () => fetch('/api/v1/attachments/upload_chunk_complete', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ filename: filename, key: key, checksum: checksum }),
-    }).then(response => response.json())
-      .then((response) => {
-      LoadingActions.stopLoadingWithProgress(filename);
-      if (response.ok == false) {
-        let msg = 'Files uploading failed: ';
-        if (response.status == 413) {
-          msg += 'File size limit exceeded.';
-        } else {
-          msg += response.statusText;
-        }
-
-        NotificationActions.add({
-          message: msg,
-          level: 'error'
-        });
-      }
-    })
-  };
-
-  static uploadChunk(chunk, counter, key, progress, filename) {
-    let body = { file: chunk, counter: counter, key: key };
-    const formData = new FormData();
-    for (const name in body) {
-      formData.append(name, body[name]);
-    }
-    return () => fetch('/api/v1/attachments/upload_chunk', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: formData
-    })
-      .then(response => response.json())
-      .then((response) => {
-        LoadingActions.updateLoadingProgress(filename, progress);
-        if (response.ok == false) {
-          const msg = `Chunk uploading failed: ${response.statusText}`;
-          NotificationActions.add({
-            message: msg,
-            level: 'error'
-          });
-        }
-      });
-  };
-
-  static async uploadFile(file) {
-    LoadingActions.startLoadingWithProgress(file.name);
-    const chunkSize = 100 * 1024 * 1024;
-    const chunksCount = file.size % chunkSize == 0
-      ? file.size / chunkSize
-      : Math.floor(file.size / chunkSize) + 1;
-    let beginingOfTheChunk = 0;
-    let endOfTheChunk = chunkSize;
-    let tasks = [];
-    const key = file.id;
-    let spark = new SparkMD5.ArrayBuffer();
-    let totalStep = chunksCount + 1;
-    for (let counter = 1; counter <= chunksCount; counter++) {
-      let chunk = file.slice(beginingOfTheChunk, endOfTheChunk);
-      tasks.push(this.uploadChunk(chunk, counter, key, counter/totalStep, file.name)());
-      spark.append(await this.getFileContent(chunk));
-      beginingOfTheChunk = endOfTheChunk;
-      endOfTheChunk += chunkSize;
-    }
-
-    let checksum = spark.end();
-    return Promise.all(tasks).then(() => {
-      return this.uploadCompleted(file.name, key, checksum)();
-    });
-  }
-
-  static getFileContent(file) {
-    let promise = new Promise(function (resolve, reject) {
-      var reader = new FileReader();
-      reader.onload = function (event) {
-        let buffer = new Uint8Array(event.target.result);
-        resolve(buffer);
-      };
-
-      reader.readAsArrayBuffer(file);
-    });
-
-    return promise;
-  }
-
-  static deleteAttachment(params) {
-    let promise = fetch(`/api/v1/attachments/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return new Attachment(json.attachment);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static deleteContainerLink(params) {
-    let promise = fetch(`/api/v1/attachments/link/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return new Attachment(json.attachment);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static downloadZip(id) {
-    let file_name = 'dataset.zip'
-    return fetch(`/api/v1/attachments/zip/${id}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then((response) => {
-      const disposition = response.headers.get('Content-Disposition')
-      if (disposition && disposition.indexOf('attachment') !== -1) {
-        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        let matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          file_name = matches[1].replace(/['"]/g, '');
-        }
-      }
-      return response.blob()
-    }).then((blob) => {
-      const a = document.createElement("a");
-      a.style = "display: none";
-      document.body.appendChild(a);
-      let url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = file_name
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static downloadZipBySample(sampleId) {
-    let fileName = 'dataset.zip';
-    return fetch(`/api/v1/attachments/sample_analyses/${sampleId}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then((response) => {
-      const disposition = response.headers.get('Content-Disposition');
-      if (disposition && disposition.indexOf('attachment') !== -1) {
-        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        const matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          fileName = matches[1].replace(/['"]/g, '');
-        }
-      }
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static saveSpectrum(attId, peaksStr, shift, scan, thres, integration, multiplicity, predict, keepPred, waveLengthStr, cyclicvolta, curveIdx, simulatenmr) {
-    const params = {
-      attachmentId: attId,
-      peaksStr,
-      shiftSelectX: shift.peak.x,
-      shiftRefName: shift.ref.name,
-      shiftRefValue: shift.ref.value,
-      scan,
-      thres,
-      integration,
-      multiplicity,
-      predict,
-      keepPred,
-      waveLength: waveLengthStr,
-      cyclicvolta: cyclicvolta,
-      curveIdx: curveIdx,
-      simulatenmr: simulatenmr,
-    };
-
-    const promise = fetch(
-      '/api/v1/attachments/save_spectrum/',
-      {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers:
-        {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(decamelizeKeys(params)),
-      },
-    )
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static inferSpectrum(attId, peaksStr, shift, scan, thres, integration, multiplicity, predict, peaks, layout, keepPred) {
-    const params = {
-      attachmentId: attId,
-      peaksStr,
-      shiftSelectX: shift.peak.x,
-      shiftRefName: shift.ref.name,
-      shiftRefValue: shift.ref.value,
-      scan,
-      thres,
-      integration,
-      multiplicity,
-      predict,
-      keepPred,
-      peaks: JSON.stringify(peaks),
-      shift: JSON.stringify(shift),
-      layout,
-    };
-
-    const promise = fetch(
-      '/api/v1/attachments/infer/',
-      {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers:
-        {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(decamelizeKeys(params)),
-      },
-    )
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static regenerateSpectrum(jcampIds) {
-    const promise = fetch(
-      '/api/v1/attachments/regenerate_spectrum/',
-      {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers:
-        {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          original: jcampIds.orig,
-          generated: jcampIds.gene,
-        }),
-      },
-    )
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static regenerateEditedSpectrum(jcampIds, molfile) {
-    const promise = fetch(
-      '/api/v1/attachments/regenerate_edited_spectrum/',
-      {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers:
-          {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-          },
-        body: JSON.stringify({
-          edited: jcampIds.edited,
-          molfile: molfile
-        }),
-      },
-    )
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/BaseFetcher.js b/app/packs/src/components/fetchers/BaseFetcher.js
deleted file mode 100644
index 268aafb71..000000000
--- a/app/packs/src/components/fetchers/BaseFetcher.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import 'whatwg-fetch';
-
-import UIStore from '../stores/UIStore';
-
-export default class BaseFetcher {
-  /**
-   * @param {Object} params = { apiEndpoint, requestMethod, bodyData, jsonTranformation }
-   */
-  static withBodyData(params) {
-    const { apiEndpoint, requestMethod, bodyData, jsonTranformation } = params;
-    let promise = fetch(apiEndpoint, {
-      credentials: 'same-origin',
-      method: requestMethod,
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(bodyData)
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return jsonTranformation(json)
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  /**
-   * @param {Object} params = { apiEndpoint, requestMethod, jsonTranformation }
-   */
-  static withoutBodyData(params) {
-    const { apiEndpoint, requestMethod, jsonTranformation } = params;
-
-    let promise = fetch(apiEndpoint, {
-      credentials: 'same-origin',
-      method: requestMethod
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return jsonTranformation(json)
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false, type = 'samples', ElKlass) {
-    const page = queryParams.page || 1;
-    const perPage = queryParams.per_page || UIStore.getState().number_of_results;
-    const filterCreatedAt = queryParams.filterCreatedAt === true ? '&filter_created_at=true' : '&filter_created_at=false';
-    const fromDate = queryParams.fromDate ? `&from_date=${queryParams.fromDate.unix()}` : '';
-    const toDate = queryParams.toDate ? `&to_date=${queryParams.toDate.unix()}` : '';
-    const product_only = queryParams.productOnly === true ? `&product_only=true` : '&product_only=false';
-    const api = `/api/v1/${type}.json?${isSync ? 'sync_' : ''}` +
-              `collection_id=${id}&page=${page}&per_page=${perPage}&` +
-              `${fromDate}${toDate}${filterCreatedAt}${product_only}`;
-    let addQuery = type === 'samples' ?
-      `&product_only=${queryParams.productOnly || false}&molecule_sort=${queryParams.moleculeSort ? 1 : 0}`
-      : '';
-    addQuery = type === 'generic_elements' ? `&el_type=${queryParams.name}` : '';
-    return fetch(api.concat(addQuery), {
-      credentials: 'same-origin'
-    }).then(response => (
-      response.json().then(json => ({
-        elements: json[type].map(r => (new ElKlass(r))),
-        totalElements: parseInt(response.headers.get('X-Total'), 10),
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
-      }))
-    )).catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/CollaboratorFetcher.js b/app/packs/src/components/fetchers/CollaboratorFetcher.js
deleted file mode 100644
index a3a417960..000000000
--- a/app/packs/src/components/fetchers/CollaboratorFetcher.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import 'whatwg-fetch';
-
-export default class CollaboratorFetcher {
-
-  static fetchMyCollaborations() {
-    return fetch('/api/v1/collaborators/list', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static AddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/add', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createAddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/create', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static addCollaboratorAff(params = {}) {
-    return fetch('/api/v1/collaborators/add_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteCollaboration(params) {
-    return fetch('/api/v1/collaborators/delete', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteCollaboratorAff(params) {
-    return fetch('/api/v1/collaborators/delete_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static refreshOrcidAff(params) {
-    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static loadOrcidByUserId(params) {
-    return fetch('/api/v1/collaborators/load_orcid', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUsersByNameFirst(name, first, email) {
-    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}&email=${email}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchandAddCollaboratorByOrcid(orcid) {
-    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/CollectionsFetcher.js b/app/packs/src/components/fetchers/CollectionsFetcher.js
deleted file mode 100644
index 7a1ee3d0d..000000000
--- a/app/packs/src/components/fetchers/CollectionsFetcher.js
+++ /dev/null
@@ -1,369 +0,0 @@
-import 'whatwg-fetch';
-import BaseFetcher from 'src/fetchers/BaseFetcher';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-import { downloadBlob } from 'src/utilities/FetcherHelper';
-
-export default class CollectionsFetcher {
-  static takeOwnership(params) {
-    let sync = params.isSync ? "syncC" : "c"
-    let promise = fetch(`/api/v1/${sync}ollections/take_ownership/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'POST'
-    })
-
-    return promise;
-  }
-
-  static fetchGenericEls() {
-    const promise = fetch('/api/v1/collections/locked.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static fetchLockedRoots() {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: '/api/v1/collections/locked.json',
-      requestMethod: 'GET',
-      jsonTranformation: (json) => { return json }
-    });
-  }
-
-  static fetchUnsharedRoots() {
-    let promise = fetch('/api/v1/collections/roots.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static fetchSharedRoots() {
-    let promise = fetch('/api/v1/collections/shared_roots.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static fetchRemoteRoots() {
-    let promise = fetch('/api/v1/collections/remote_roots.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-  static fetchSyncRemoteRoots() {
-    let promise = fetch('/api/v1/syncCollections/sync_remote_roots.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static createSharedCollections(params) {
-    return fetch('/api/v1/collections/shared/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    });
-  }
-
-  static createSync(params) {
-    return fetch('/api/v1/syncCollections/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        collection_attributes: params.collection_attributes,
-        user_ids: params.user_ids,
-        id: params.id,
-      })
-    });
-  }
-
-  static editSync(params) {
-    let promise = fetch('/api/v1/syncCollections/' + params.id, {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        collection_attributes: params.collection_attributes,
-        user_ids: params.user_ids,
-      })
-    })
-
-    return promise;
-  }
-
-  static deleteSync(params) {
-    let promise = fetch('/api/v1/syncCollections/' + params.id, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        is_syncd: params.is_syncd
-      })
-    })
-    return promise;
-  }
-
-  static bulkUpdateUnsharedCollections(params) {
-    let promise = fetch('/api/v1/collections', {
-      credentials: 'same-origin',
-      method: 'PATCH',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        collections: params.collections,
-        deleted_ids: params.deleted_ids
-      })
-    })
-
-    return promise;
-  }
-
-  static rejectShared(params) {
-    const promise = fetch('/api/v1/collections/reject_shared', {
-      credentials: 'same-origin',
-      method: 'PATCH',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id: params.id
-      })
-    })
-    return promise;
-  }
-
-  static updateSharedCollection(params) {
-    let promise = fetch('/api/v1/collections/shared/' + params.id, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        collection_attributes: params.collection_attributes,
-      })
-    })
-
-    return promise;
-  }
-
-  static createUnsharedCollection(params) {
-    let promise = fetch('/api/v1/collections/unshared/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        label: params.label
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static updateElementsCollection(params) {
-    return fetch('/api/v1/collections/elements/', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: params.ui_state,
-        collection_id: params.collection_id,
-        is_sync_to_me: params.is_sync_to_me,
-        newCollection: params.newLabel,
-      })
-    }).then(response => response)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static assignElementsCollection(params) {
-    return fetch('/api/v1/collections/elements/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: params.ui_state,
-        collection_id: params.collection_id,
-        is_sync_to_me: params.is_sync_to_me,
-        newCollection: params.newLabel,
-      })
-    }).then(response => response)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static expotSamples(type, id) {
-    const fileName = `${type.charAt(0).toUpperCase() + type.substring(1)}_${id}_Samples Excel.xlsx`;
-    return fetch(`/api/v1/reports/excel_${type}?id=${id}`, {
-      credentials: 'same-origin',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
-    }).then((response) => {
-      if (response.ok) { return response.blob(); }
-      throw Error(response.statusText);
-    }).then((blob) => {
-      downloadBlob(fileName, blob);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static removeElementsCollection(params) {
-    return fetch('/api/v1/collections/elements/', {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: params.ui_state,
-      })
-    }).then(response => response)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createExportJob(params) {
-    return fetch('/api/v1/collections/exports/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then((response) => {
-      NotificationActions.notifyExImportStatus('Collection export', response.status);
-      if (response.ok) { return true; }
-      throw new Error(response.status);
-    }).catch((errorMessage) => { throw new Error(errorMessage); });
-  }
-
-  static createImportJob(params) {
-    const data = new FormData();
-    data.append('file', params.file);
-
-    return fetch('/api/v1/collections/imports/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      body: data
-    }).then((response) => {
-      NotificationActions.notifyExImportStatus('Collection import', response.status);
-      if (response.ok) { return true; }
-      throw new Error(response.status);
-    }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchTabsLayout(params) {
-    let promise = fetch('/api/v1/collections/tab_segments/' + params.id, {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static createTabsSegment(params) {
-    return fetch('/api/v1/collections/tabs/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id: params.currentCollectionId,
-        segments: params.layoutSegments
-      })
-    }).then(response => response)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateTabsLayout(params) {
-    return fetch('/api/v1/collections/tabs/', {
-      credentials: 'same-origin',
-      method: 'PATCH',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id: params.cId,
-        segment: params.segment
-      })
-    }).then(response => response)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/ComputeTaskFetcher.js b/app/packs/src/components/fetchers/ComputeTaskFetcher.js
deleted file mode 100644
index 9ed165539..000000000
--- a/app/packs/src/components/fetchers/ComputeTaskFetcher.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import 'whatwg-fetch';
-import { camelizeKeys } from 'humps';
-
-import LoadingActions from '../actions/LoadingActions';
-
-export default class ComputeTaskFetcher {
-  static fetchAll() {
-    return fetch('/api/v1/compute_tasks/all', {
-      method: 'GET',
-      credentials: 'same-origin',
-    }).then(res => res.json()).then(json => (
-      camelizeKeys(json.compute_tasks || [])
-    )).catch(err => console.log(err));
-  }
-
-  static checkState(taskId) {
-    return fetch(`/api/v1/compute_tasks/${taskId}/check`, {
-      method: 'GET',
-      credentials: 'same-origin',
-    }).then(res => res.json()).then((json) => {
-      LoadingActions.stop.defer();
-      return camelizeKeys(json.check[0]);
-    }).catch(err => console.log(err));
-  }
-
-  static revokeTask(taskId) {
-    return fetch(`/api/v1/compute_tasks/${taskId}/revoke`, {
-      method: 'GET',
-      credentials: 'same-origin',
-    }).then(res => res.json()).then((json) => {
-      LoadingActions.stop.defer();
-      return camelizeKeys(json.revoke[0]);
-    }).catch(err => console.log(err));
-  }
-
-  static deleteTask(taskId) {
-    return fetch(`/api/v1/compute_tasks/${taskId}`, {
-      method: 'DELETE',
-      credentials: 'same-origin',
-    }).then(res => res.json()).then((json) => {
-      LoadingActions.stop.defer();
-      return camelizeKeys(json);
-    }).catch(err => console.log(err));
-  }
-}
-
diff --git a/app/packs/src/components/fetchers/ContainerFetcher.js b/app/packs/src/components/fetchers/ContainerFetcher.js
deleted file mode 100644
index 509e29574..000000000
--- a/app/packs/src/components/fetchers/ContainerFetcher.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import 'whatwg-fetch';
-import _ from 'lodash';
-
-export default class ContainerFetcher {
-  // Remove container id of unseletced attachemnts(the attachemnts not in Inbox)
-  static deleteContainerLinkUnselected(params) {
-    const promise = fetch('/api/v1/containers/', {
-      credentials: 'same-origin',
-      method: 'PATCH',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        container_id: params.id,
-        attachments: params.attachments
-      })
-    }).then(response => response.json()).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static deleteContainer(container) {
-    const promise = fetch(`/api/v1/containers/${container.id}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then(response => response.json()).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static updateContainerContent(container) {
-    let content = _.cloneDeep(container.extended_metadata.content);
-    if (typeof content === 'string') {
-      content = JSON.parse(content);
-    }
-
-    const promise = fetch(`/api/v1/containers/${container.id}`, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        container_id: container.id,
-        content
-      })
-    }).then(response => response.json()).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/ConverterFetcher.js b/app/packs/src/components/fetchers/ConverterFetcher.js
deleted file mode 100644
index a7097aa62..000000000
--- a/app/packs/src/components/fetchers/ConverterFetcher.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import 'whatwg-fetch';
-
-const converter_app_url = '/api/v1/converter';
-
-export default class ConverterFetcher {
-  static deleteProfile(profile) {
-    const requestOptions = { method: 'DELETE' };
-    return fetch(`/api/v1/converter/profiles/${profile.id}`, requestOptions)
-      .then((response) => {
-        if (!response.ok) { throw response; }
-        return response;
-      });
-  }
-
-  static fetchProfiles() {
-    return fetch('/api/v1/converter/profiles', {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then((response) => {
-      if (response.status === 200) {
-        return response.json();
-      }
-      return null;
-    })
-      .then(json => json)
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-
-  static fetchOptions() {
-    return fetch('/api/v1/converter/options', {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then((response) => {
-      if (response.status === 200) {
-        return response.json();
-      }
-      return null;
-    })
-      .then(json => json)
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-
-  static fetchTables(file) {
-    const data = new FormData();
-    data.append('file[]', file);
-    return fetch('/api/v1/converter/tables', {
-      credentials: 'same-origin',
-      contentType: 'application/json',
-      method: 'POST',
-      body: data,
-    }).then((response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return null;
-    })
-      .then(json => json)
-      .catch((errorMessage) => { console.error(errorMessage); });
-  }
-
-
-  static createProfile(profile) {
-    const requestOptions = {
-      method: 'POST',
-      body: JSON.stringify(profile),
-      headers: { 'Content-Type': 'application/json' }
-    };
-
-    let ok;
-    return fetch('/api/v1/converter/profiles', requestOptions)
-      .then((response) => {
-        ok = response.ok;
-        return response.json();
-      })
-      .then((info) => {
-        if (ok) {
-          return info;
-        }
-        throw info;
-      });
-  }
-
-
-  static updateProfile(profile) {
-    const requestOptions = {
-      method: 'PUT',
-      body: JSON.stringify(profile),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    };
-
-    let ok;
-    return fetch(`/api/v1/converter/profiles/${profile.id}`, requestOptions)
-      .then((response) => {
-        // eslint-disable-next-line prefer-destructuring
-        ok = response.ok;
-        return response.json();
-      })
-      .then((info) => {
-        if (ok) {
-          return info;
-        }
-        throw new Error(info);
-      });
-  }
-}
diff --git a/app/packs/src/components/fetchers/DeviceFetcher.js b/app/packs/src/components/fetchers/DeviceFetcher.js
deleted file mode 100644
index 19b37167b..000000000
--- a/app/packs/src/components/fetchers/DeviceFetcher.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import BaseFetcher from 'src/fetchers/BaseFetcher'
-import Device from 'src/models/Device'
-import DeviceAnalysis from 'src/models/DeviceAnalysis'
-import _ from 'lodash'
-
-export default class DeviceFetcher {
-  static fetchAll() {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: '/api/v1/devices/',
-      requestMethod: 'GET',
-      jsonTranformation: (json) => json.devices.map(device => new Device(device))
-    })
-  }
-
-  static fetchById(deviceId) {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: `/api/v1/devices/${deviceId}`,
-      requestMethod: 'GET',
-      jsonTranformation: (json) => new Device(json.device)
-    })
-  }
-
-  static create(device) {
-    return BaseFetcher.withBodyData({
-      apiEndpoint: '/api/v1/devices',
-      requestMethod: 'POST',
-      bodyData: device,
-      jsonTranformation: (json) => new Device(json.device)
-    })
-  }
-
-  static changeSelectedDevice(device) {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: `/api/v1/devices/${device.id}/selected`,
-      requestMethod: 'POST',
-      jsonTranformation: (json) => json
-    })
-  }
-
-  static update(device) {
-    return BaseFetcher.withBodyData({
-      apiEndpoint: `/api/v1/devices/${device.id}`,
-      requestMethod: 'PUT',
-      bodyData: device.serialize(),
-      jsonTranformation: (json) => new Device(json.device)
-    })
-  }
-
-  static delete(device) {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: `/api/v1/devices/${device.id}`,
-      requestMethod: 'DELETE',
-      jsonTranformation: (json) => { new Device(json.device) }
-    })
-  }
-
-  static fetchAnalysisById(analysisId) {
-    return BaseFetcher.withoutBodyData({
-      apiEndpoint: `/api/v1/devices_analysis/${analysisId}`,
-      requestMethod: 'GET',
-      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
-    })
-  }
-
-  static createAnalysis(analysis) {
-    return BaseFetcher.withBodyData({
-      apiEndpoint: `/api/v1/devices_analysis`,
-      requestMethod: 'POST',
-      bodyData: analysis.serialize(),
-      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
-    })
-  }
-
-  static updateAnalysis(analysis) {
-    const { deviceId, sampleId, analysisType, experiments } = analysis
-    return BaseFetcher.withBodyData({
-      apiEndpoint: `/api/v1/devices_analysis/${analysis.id}`,
-      requestMethod: 'PUT',
-      bodyData: analysis.serialize(),
-      jsonTranformation: (json) => new DeviceAnalysis(json.devices_analysis)
-    })
-  }
-
-  static generateExperimentConfig(experiment) {
-    return BaseFetcher.withBodyData({
-      apiEndpoint: `/api/v1/icon_nmr/config`,
-      requestMethod: 'POST',
-      bodyData: experiment.buildConfig(),
-      jsonTranformation: (json) => json
-    })
-  }
-}
diff --git a/app/packs/src/components/fetchers/EditorFetcher.js b/app/packs/src/components/fetchers/EditorFetcher.js
deleted file mode 100644
index e36729c64..000000000
--- a/app/packs/src/components/fetchers/EditorFetcher.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import 'whatwg-fetch';
-
-export default class EditorFetcher {
-  static initial() {
-    const promise = fetch('/api/v1/editor/initial.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static startEditing(params) {
-    const promise = fetch('/api/v1/editor/start/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/EmbargoFetcher.js b/app/packs/src/components/fetchers/EmbargoFetcher.js
deleted file mode 100644
index 1e6b8df6a..000000000
--- a/app/packs/src/components/fetchers/EmbargoFetcher.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import 'whatwg-fetch';
-
-export default class EmbargoFetcher {
-  static fetchEmbargoElements(id) {
-    const api = `/api/v1/public/col_list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoElement(cid, el) {
-    const api =
-      `/api/v1/public/col_element.json?collection_id=${cid}&el_type=${el.type}&el_id=${el.id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargo(id) {
-    const api = `/api/v1/public/embargo.json?id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteEmbargo(id) {
-    const api = '/api/v1/repository/embargo/delete';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static moveEmbargo(id, newEmbargo, element) {
-    const api = '/api/v1/repository/embargo/move';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ collection_id: id, new_embargo: newEmbargo.value, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-  static refreshEmbargo(emb) {
-    const api = '/api/v1/repository/embargo/refresh';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id: emb.id, collection_id: emb.element_id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static assignEmbargo(embargoVal, element) {
-    const api = '/api/v1/repository/assign_embargo';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ new_embargo: embargoVal, element })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static releaseEmbargo(id) {
-    const api = '/api/v1/repository/embargo/release';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static generateEmbargoAccount(id) {
-    const api = '/api/v1/repository/embargo/account';
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ collection_id: id })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static repoFetchEmbargoElements(id) {
-    const api = `/api/v1/repository/embargo/list.json?collection_id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static repoFetchEmbargoElement(type, id) {
-    const api = `/api/v1/repository/${type}.json?id=${id}&is_public=false`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchEmbargoCollections(isSubmit = false) {
-    const api = '/api/v1/repository/embargo_list.json';
-    return fetch(api, {
-      method: 'post',
-      credentials: 'same-origin',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        is_submit: isSubmit
-      })
-    })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/GenericBaseFetcher.js b/app/packs/src/components/fetchers/GenericBaseFetcher.js
deleted file mode 100644
index f59f0f92d..000000000
--- a/app/packs/src/components/fetchers/GenericBaseFetcher.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import 'whatwg-fetch';
-
-export default class GenericBaseFetcher {
-  static exec(path, method) {
-    return fetch(`/api/v1/${path}`, { credentials: 'same-origin', method })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static execData(params, path, method = 'POST') {
-    return fetch(`/api/v1/${path}`, {
-      credentials: 'same-origin', method, headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deActivateKlass(params) {
-    return fetch('/api/v1/generic_elements/de_activate_klass', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deleteKlass(params) {
-    return fetch(`/api/v1/generic_elements/delete_klass/${params.id}`, {
-      credentials: 'same-origin', method: 'DELETE', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static deleteKlassRevision(params) {
-    return fetch('/api/v1/generic_elements/delete_klass_revision', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchKlassRevisions(id, klass) {
-    return fetch(`/api/v1/generic_elements/klass_revisions.json?id=${id}&klass=${klass}`, { credentials: 'same-origin' })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static fetchUnitsSystem() {
-    return fetch('/units_system/units_system.json', { credentials: 'same-origin', cache: 'no-store', headers: { 'cache-control': 'no-cache' } })
-      .then(response => response.json()).then(json => json).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static updateTemplate(params) {
-    return fetch('/api/v1/generic_elements/update_template', {
-      credentials: 'same-origin', method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/GenericDSsFetcher.js b/app/packs/src/components/fetchers/GenericDSsFetcher.js
deleted file mode 100644
index 7ca7c646b..000000000
--- a/app/packs/src/components/fetchers/GenericDSsFetcher.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import GenericBaseFetcher from './GenericBaseFetcher';
-
-export default class GenericDSsFetcher extends GenericBaseFetcher {
-  static exec(path, method) { return super.exec(`generic_dataset/${path}`, method); }
-  static execData(params, path) { return super.execData(params, `generic_dataset/${path}`); }
-
-  static fetchKlass() {
-    return this.exec('klasses.json', 'GET');
-  }
-
-  static listDatasetKlass(params = {}) {
-    const api = params.is_active === undefined ? 'list_dataset_klass.json' : `list_dataset_klass.json?is_active=${params.is_active}`;
-    return this.exec(api, 'GET');
-  }
-
-  static updateDatasetTemplate(params) {
-    return super.updateTemplate({ ...params, klass: 'DatasetKlass' }, 'update_dataset_template');
-  }
-}
diff --git a/app/packs/src/components/fetchers/GenericElsFetcher.js b/app/packs/src/components/fetchers/GenericElsFetcher.js
deleted file mode 100644
index de5c2f216..000000000
--- a/app/packs/src/components/fetchers/GenericElsFetcher.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import 'whatwg-fetch';
-import GenericEl from '../models/GenericEl';
-import AttachmentFetcher from './AttachmentFetcher';
-import BaseFetcher from './BaseFetcher';
-import GenericBaseFetcher from './GenericBaseFetcher';
-
-export default class GenericElsFetcher extends GenericBaseFetcher {
-  static exec(path, method) { return super.exec(`generic_elements/${path}`, method); }
-  static execData(params, path) { return super.execData(params, `generic_elements/${path}`); }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'generic_elements', GenericEl);
-  }
-
-  static fetchById(id) {
-    const promise = fetch(`/api/v1/generic_elements/${id}.json`, {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then((json) => {
-        const genericEl = new GenericEl(json.element);
-        genericEl.attachments = json.attachments;
-        if (json.error) {
-          genericEl.type = null; // `${id}:error:GenericEl ${id} is not accessible!`;
-        }
-        return genericEl;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static uploadGenericFiles(element, id, type, hasAttach = false, isElement = false) {
-    const segFiles = (element.segments || []).filter(seg => seg.files && seg.files.length > 0).length === 0;
-    if (!isElement && !hasAttach && segFiles === true) return Promise.resolve(true);
-    if (isElement && segFiles === true && (typeof element.files === 'undefined' || (element.files || []).length === 0)
-      && (typeof element.attachments === 'undefined' || (element.attachments || []).length === 0)) return Promise.resolve(true);
-    if (!isElement && hasAttach && segFiles === true && (element.attachments || []).length === 0) return Promise.resolve(true);
-
-    const data = new FormData();
-    data.append('att_id', id);
-    data.append('att_type', type);
-
-    const segMap = {};
-    if (isElement === true && element.files && element.files.length > 0) {
-      const elMap = {};
-      elMap[id] = { type: 'ElementProps', id, files: [] };
-      (element.files || []).forEach((file) => {
-        data.append('elfiles[]', file.file.file, file.uid);
-        elMap[id].files.push({ uid: file.uid, filename: file.file.name });
-      });
-      data.append('elInfo', JSON.stringify(elMap));
-    }
-    if (hasAttach === true && element.attachments && element.attachments.length > 0) {
-      const newFiles = (element.attachments || []).filter(a => a.is_new && !a.is_deleted);
-      const delFiles = (element.attachments || []).filter(a => !a.is_new && a.is_deleted);
-      (newFiles || []).forEach((file) => {
-        data.append('attfiles[]', file.file, file.name);
-      });
-      (delFiles || []).forEach((f) => {
-        data.append('delfiles[]', f.id);
-      });
-    }
-    (element.segments || []).forEach((segment) => {
-      segMap[segment.segment_klass_id] = { type: 'SegmentProps', id, files: [] };
-      (segment.files || []).forEach((file) => {
-        data.append('sefiles[]', file.file.file, file.uid);
-        segMap[segment.segment_klass_id].files.push({ uid: file.uid, filename: file.file.name });
-      });
-    });
-    data.append('seInfo', JSON.stringify(segMap));
-    return fetch('/api/v1/generic_elements/upload_generics_files', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then(response => response).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static updateOrCreate(genericEl, action = 'create') {
-    const files = AttachmentFetcher.getFileListfrom(genericEl.container);
-    const method = action === 'create' ? 'post' : 'put';
-    const api = action === 'create' ? '/api/v1/generic_elements/' : `/api/v1/generic_elements/${genericEl.id}`;
-    const promise = () => fetch(api, {
-      credentials: 'same-origin',
-      method,
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(genericEl.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(genericEl, json.element.id, 'Element', true, true)
-        .then(() => this.fetchById(json.element.id)))
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-    return promise();
-  }
-
-  static update(genericEl) {
-    return this.updateOrCreate(genericEl, 'update');
-  }
-
-  static create(genericEl) {
-    return this.updateOrCreate(genericEl, 'create');
-  }
-
-  static createElementKlass(params) {
-    return this.execData(params, 'create_element_klass');
-  }
-
-  static fetchElementRevisions(id) {
-    return this.exec(`element_revisions.json?id=${id}`, 'GET');
-  }
-
-  static fetchElementKlasses() {
-    return this.exec('klasses_all.json', 'GET');
-  }
-
-  static fetchElementKlass(klassName) {
-    return this.exec(`klass.json?name=${klassName}`, 'GET');
-  }
-
-  static fetchSegmentRevisions(id) {
-    return this.exec(`segment_revisions.json?id=${id}`, 'GET');
-  }
-
-  static deleteRevisions(params) {
-    return this.execData(params, 'delete_revision');
-  }
-
-  static updateElementKlass(params) {
-    return this.execData(params, 'update_element_klass');
-  }
-
-  static updateGElTemplates(params) {
-    return super.updateTemplate({ ...params, klass: 'ElementKlass' }, 'update_element_template');
-  }
-}
diff --git a/app/packs/src/components/fetchers/InboxFetcher.js b/app/packs/src/components/fetchers/InboxFetcher.js
deleted file mode 100644
index ecb94f921..000000000
--- a/app/packs/src/components/fetchers/InboxFetcher.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export default class InboxFetcher {
-  static fetchInbox(isCntOnly = false) {
-    const promise = fetch(`/api/v1/inbox?cnt_only=${isCntOnly}`, {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static fetchMatchingSamples(searchString) {
-    const promise = fetch(`/api/v1/inbox/samples?search_string=${searchString}`, {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static assignToAnalysis(attachmentId, sampleId) {
-    const promise = fetch(`/api/v1/inbox/samples/${attachmentId}?attachment_id=${sampleId}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-      .then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/InstrumentsFetcher.js b/app/packs/src/components/fetchers/InstrumentsFetcher.js
deleted file mode 100644
index 275ae48d6..000000000
--- a/app/packs/src/components/fetchers/InstrumentsFetcher.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import 'whatwg-fetch';
-
-export default class InstrumentsFetcher {
-  static fetchInstrumentsForCurrentUser(query) {
-    return fetch(
-      `/api/v1/instruments/${encodeURIComponent(query)}`,
-      { credentials: 'same-origin' }
-    ).then(response => response.json())
-      .then(json => json.instruments)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/LiteraturesFetcher.js b/app/packs/src/components/fetchers/LiteraturesFetcher.js
deleted file mode 100644
index 7ab0cdc05..000000000
--- a/app/packs/src/components/fetchers/LiteraturesFetcher.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import 'whatwg-fetch';
-import Immutable from 'immutable';
-import Literature from '../models/Literature';
-
-export default class LiteraturesFetcher {
-  static fetchElementReferences(element, is_all = false) {
-    if (!element || element.isNew) {
-      return Promise.resolve(Immutable.List())
-    }
-    const { type, id } = element;
-    return fetch(`/api/v1/literatures?element_type=${type}&element_id=${id}&is_all=${is_all}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json.literatures)
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
-      .then(literatures => literatures.map(literature => new Literature(literature)))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static postElementReference(params) {
-    const { element, literature } = params;
-    const { type, id } = element;
-    if (!element || element.isNew) {
-      return Promise.resolve(Immutable.List())
-    }
-    return fetch('/api/v1/literatures', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ element_type: type, element_id: id, ref: literature })
-    }).then(response => response.json())
-      .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then(literatures => literatures.map(lits => new Literature(lits)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
-      .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
-  }
-
-  static deleteElementReference(params) {
-    const { element, literature } = params;
-    const { type, id } = element;
-    const refId = literature.literal_id;
-    return fetch(`/api/v1/literatures?id=${refId}&element_type=${type}&element_id=${id}`, {
-      credentials: 'same-origin',
-      method: 'delete',
-      headers: {
-        Accept: 'application/json',
-      },
-    }).then(response => response.json())
-      .then((json) => { if (json.error) { throw json; } })
-      .catch((errorMessage) => { throw errorMessage; });
-  }
-
-  static updateReferenceType(params) {
-    return fetch('/api/v1/literatures', {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then((json) => { if (json.error) { throw json; } return json.literatures; })
-      .then(literatures => literatures.map(lits => new Literature(lits)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
-      .catch((errorMessage) => { console.log(errorMessage); throw errorMessage; });
-  }
-
-  static fetchDOIMetadata(doi) {
-    return fetch(`/api/v1/literatures/doi/metadata?doi=${encodeURIComponent(doi)}`, {
-      credentials: 'same-origin',
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReferencesByCollection(params) {
-    return fetch(`/api/v1/literatures/collection?id=${params.id}&is_sync_to_me=${params.is_sync_to_me || false}`, {
-      credentials: 'same-origin',
-    }).then(response => response.json())
-      .then((json) => {
-        const {
-          collectionRefs,
-          sampleRefs,
-          reactionRefs,
-          researchPlanRefs,
-        } = json;
-        return {
-          collectionRefs: Immutable.List(collectionRefs.map(lit => new Literature(lit))),
-          sampleRefs: Immutable.List(sampleRefs.map(lit => new Literature(lit))),
-          reactionRefs: Immutable.List(reactionRefs.map(lit => new Literature(lit))),
-          researchPlanRefs: Immutable.List(researchPlanRefs.map(lit => new Literature(lit))),
-        };
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static postReferencesByUIState(params, method = 'post') {
-    return fetch(`/api/v1/literatures/ui_state`, {
-      credentials: 'same-origin',
-      method,
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json.selectedRefs.map(lit => new Literature(lit)))
-      .then(lits => lits.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map()))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/MessagesFetcher.js b/app/packs/src/components/fetchers/MessagesFetcher.js
deleted file mode 100644
index a85206fce..000000000
--- a/app/packs/src/components/fetchers/MessagesFetcher.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import 'whatwg-fetch';
-
-export default class MessagesFetcher {
-  static configuration() {
-    return fetch('/api/v1/messages/config.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchMessages(isAck) {
-    return fetch(`/api/v1/messages/list.json?is_ack=${isAck}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchSpectraMessages(isAck) {
-    return fetch(`/api/v1/messages/spectra.json?is_ack=${isAck}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchChannels(channelType) {
-    return fetch(`/api/v1/messages/channels.json?channel_type=${channelType}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchChannelWithUser() {
-    return fetch('/api/v1/messages/channels_user.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static channelIndividualUsers() {
-    return fetch('/api/v1/messages/channel_individual.json', {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static acknowledgedMessage(params) {
-    return fetch('/api/v1/messages/ack/', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static subscribeChannel(params) {
-    return fetch('/api/v1/messages/subscribe/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static createMessage(params) {
-    return fetch('/api/v1/messages/new/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/MoleculesFetcher.js b/app/packs/src/components/fetchers/MoleculesFetcher.js
deleted file mode 100644
index 969d5457d..000000000
--- a/app/packs/src/components/fetchers/MoleculesFetcher.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import 'whatwg-fetch';
-
-export default class MoleculesFetcher {
-  static fetchSciFinder(params) {
-    return fetch('/api/v1/molecules/sf', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static fetchByMolfile(molfile, svgfile, editor = 'ketcher', decoupled = false) {
-    return fetch('/api/v1/molecules', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        molfile, svg_file: svgfile, editor, decoupled
-      })
-    }).then(response => response.json()).then(json => json)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static fetchBySmi(smi, svgfile, molfile, editor = 'ketcher') {
-    return fetch('/api/v1/molecules/smiles', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        smiles: smi, svg_file: svgfile, layout: molfile, editor
-      })
-    }).then(response => response.json()).then(json => json)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static fetchCas(inchikey) {
-    return fetch(`/api/v1/molecules/cas?inchikey=${inchikey}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static updateNames(inchikey, newMolName = '') {
-    return fetch(`/api/v1/molecules/names?inchikey=${inchikey}` +
-      `&new_name=${escape(newMolName)}`, {
-      credentials: 'same-origin',
-    }).then(response => response.json()).then(json => json.molecules)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static computePropsFromSmiles(sampleId) {
-    return fetch('/api/v1/molecules/compute', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ sampleId })
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static getByInChiKey(inchikey) {
-    return fetch('/api/v1/molecules/inchikey', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ inchikey })
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static renewSVGFile(id, svgFile, isChemdraw = false) {
-    return fetch('/api/v1/molecules/svg', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, svg_file: svgFile, is_chemdraw: isChemdraw })
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static updateMolfileSVG(molecule) {
-    return fetch('/api/v1/molecules/editor', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        id: molecule.id, molfile: molecule.molfile, svg_file: molecule.molecule_svg_file
-      })
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static deleteMoleculeName(params) {
-    return fetch('/api/v1/molecules/delete_name', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static saveMoleculeName(params) {
-    return fetch('/api/v1/molecules/save_name', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .catch(errorMessage => console.log(errorMessage));
-  }
-
-  static decouple(molfile, svgfile, decoupled = false) {
-    return fetch('/api/v1/molecules/decouple', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ molfile, svg_name: svgfile, decoupled })
-    }).then(response => response.json()).then(json => json)
-      .catch(errorMessage => console.log(errorMessage));
-  }
-}
diff --git a/app/packs/src/components/fetchers/NmrSimFetcher.js b/app/packs/src/components/fetchers/NmrSimFetcher.js
deleted file mode 100644
index ed4e956c6..000000000
--- a/app/packs/src/components/fetchers/NmrSimFetcher.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'whatwg-fetch';
-
-export default class NmrSimFetcher {
-  static fetchNmrdbById(id) {
-    const promise = fetch(`/api/v1/simulation/nmrdb?molecule_id=${id}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-    })
-      .then(response => response.json()).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/PermissionsFetcher.js b/app/packs/src/components/fetchers/PermissionsFetcher.js
deleted file mode 100644
index 8baf870df..000000000
--- a/app/packs/src/components/fetchers/PermissionsFetcher.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import 'whatwg-fetch';
-
-export default class PermissionsFetcher {
-  static fetchPermissionStatus(params) {
-    return fetch('/api/v1/permissions/status/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/PredictionsFetcher.js b/app/packs/src/components/fetchers/PredictionsFetcher.js
deleted file mode 100644
index 1d5cd7267..000000000
--- a/app/packs/src/components/fetchers/PredictionsFetcher.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import 'whatwg-fetch';
-
-import NotificationActions from '../actions/NotificationActions';
-
-export default class PredictionsFetcher {
-  static fetchInfer(smis, template) {
-    const path = template === 'predictProducts' ? 'products' : 'reactants' ;
-    const promise = fetch(`/api/v1/prediction/${path}`, {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(smis),
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      if (json.error) {
-        NotificationActions.add.defer({
-          message: json.error,
-          level: 'error'
-        });
-      } else {
-        NotificationActions.add.defer({
-          message: 'Prediction Success!',
-          level: 'success'
-        });
-      }
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/PrivateNoteFetcher.js b/app/packs/src/components/fetchers/PrivateNoteFetcher.js
deleted file mode 100644
index e9b97c5ec..000000000
--- a/app/packs/src/components/fetchers/PrivateNoteFetcher.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import 'whatwg-fetch';
-import PrivateNote from '../models/PrivateNote';
-
-// improved function for classifying strings - to fix research_plan being an invalid noteable type
-// takes into account any _ in strings and returns string: String_test => StringTest
-function classify(string) {
-  if (string.includes('_')) {
-    var substrings = string.split('_');
-    for (let i=0; i<substrings.length; i++) {
-      substrings[i] = substrings[i].charAt(0).toUpperCase() + substrings[i].slice(1);
-    }
-    string = substrings.join('')
-  }
-  else {
-    string = string.charAt(0).toUpperCase() + string.slice(1);
-  }
-  return string;
-}
-
-export default class PrivateNoteFetcher {
-  static fetchById(id) {
-    return fetch(`/api/v1/private_notes/${id}.json`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchByNoteableId(noteable_id, noteable_type) {
-    return fetch(`/api/v1/private_notes?noteable_id=${noteable_id}&noteable_type=${classify(noteable_type)}`, {
-      credentials: 'same-origin',
-    }).then(response => response.json())
-      .then(json => new PrivateNote(json.note))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static create(prms) {
-    const params = { ...prms };
-    if (prms.noteable_type) {
-      params.noteable_type = classify(prms.noteable_type);
-    }
-    return fetch('/api/v1/private_notes/create', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => new PrivateNote(json.note))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static update(privateNote) {
-    return fetch(`/api/v1/private_notes/${privateNote.id}`, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(privateNote.serialize())
-    }).then(response => response.json())
-      .then(json => new PrivateNote(json.note))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/PublicFetcher.js b/app/packs/src/components/fetchers/PublicFetcher.js
deleted file mode 100644
index a21464274..000000000
--- a/app/packs/src/components/fetchers/PublicFetcher.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import 'whatwg-fetch';
-import _ from 'lodash';
-import Molecule from '../models/Molecule';
-import Reaction from '../models/Reaction';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
-
-export default class PublicFetcher {
-  static fetchPublicMolecules(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const listType = params.listType || RepoNavListTypes.SAMPLE;
-    const api = `/api/v1/public/molecules.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&req_xvial=${listType === RepoNavListTypes.MOLECULE_ARCHIVE}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        molecules: json.molecules.map(m => new Molecule(m)),
-        page: parseInt(response.headers.get('X-Page')),
-        pages: parseInt(response.headers.get('X-Total-Pages')),
-        perPage: parseInt(response.headers.get('X-Per-Page')),
-        listType
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchPublicReactions(params = {}) {
-    const page = params.page || 1;
-    const perPage = params.perPage || 10;
-    const advFlag = params.advFlag || false;
-    const paramAdvType = params.advType ? `&adv_type=${params.advType}` : '';
-    const paramAdvValue = params.advValue ? params.advValue.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const schemeOnly = params.schemeOnly || false;
-    const api = `/api/v1/public/reactions.json?page=${page}&per_page=${perPage}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}&scheme_only=${schemeOnly}`;
-
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        reactions: json.reactions.map(m => new Reaction(m)),
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10)
-      }))).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchAdvancedValues(advType, name) {
-    return fetch(`/api/v1/public/find_adv_values.json?name=${name}&adv_type=${advType}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicMolecules(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        molecules: json.publicMolecules.molecules.map(m => new Molecule(m)),
-        page: json.publicMolecules.page,
-        totalElements: json.publicMolecules.totalElements,
-        perPage: json.publicMolecules.perPage,
-        listType: params.listType
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static searchPublicReactions(params = {}) {
-    const {
-      collectionId,
-      elementType,
-      page,
-      perPage,
-      selection
-    } = params;
-    return fetch(`/api/v1/search/${elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId || 'public',
-        page: page || 1,
-        per_page: perPage,
-        is_sync: false,
-        molecule_sort: false,
-        is_public: true
-      })
-    }).then(response => response.json())
-      .then(json => ({
-        reactions: json.publicReactions.reactions.map(r => new Reaction(r)),
-        page: json.publicReactions.page,
-        totalElements: json.publicReactions.totalElements,
-        perPage: json.publicReactions.perPage,
-        listType: params.listType
-      })).catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublished() {
-    const api = '/api/v1/public/last_published.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchLastPublishedSample() {
-    const api = '/api/v1/public/last_published_sample.json';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchDataset(id) {
-    const api = `/api/v1/public/dataset.json?id=${id}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchMolecule(id, advFlag = false, advType = '', advValues = null) {
-    const paramAdvType = (advType && advType !== '') ? `&adv_type=${advType}` : '';
-    const paramAdvValue = advValues ? advValues.map(x => `&adv_val[]=${x.value}`).join('') : '';
-    const api = `/api/v1/public/molecule.json?id=${id}&adv_flag=${advFlag}${paramAdvType}${paramAdvValue}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchReaction(id) {
-    const api = `/api/v1/public/reaction.json?id=${id}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static queryPid(params) {
-    const api = `/api/v1/public/pid/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          id: params.id
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static queryInchikey(params) {
-    const api = `/api/v1/public/inchikey/`
-
-    return fetch(api, {
-        method: 'post',
-        credentials: 'same-origin',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          inchikey: params.inchikey,
-          type: params.type,
-          version: params.version
-        })
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        Aviator.navigate(json)
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      })
-  }
-
-  static selectPublicCollection() {
-    return fetch(
-      '/api/v1/public/collection.json',
-      { credentials: 'same-origin' }
-    ).then((response) => { return response.json(); })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static publishedStatics() {
-    const api = '/api/v1/public/published_statics';
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then((response) => {
-      return response.json();
-    })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static affiliations(type) {
-    const api = `/api/v1/public/affiliations/${type}`;
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static downloadZip(id) {
-    let fileName = 'dataset.zip';
-    return fetch(`/api/v1/public/download/dataset?id=${id}`, {
-      credentials: 'same-origin', method: 'GET',
-    }).then((response) => {
-      const disposition = response.headers.get('Content-Disposition');
-      if (disposition && disposition.indexOf('attachment') !== -1) {
-        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        const matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          fileName = matches[1].replace(/['"]/g, '');
-        }
-      }
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/ReactionSvgFetcher.js b/app/packs/src/components/fetchers/ReactionSvgFetcher.js
deleted file mode 100644
index 3ec80ce77..000000000
--- a/app/packs/src/components/fetchers/ReactionSvgFetcher.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ReactionSvgFetcher {
-
-  static fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, duration, conditions) {
-    const promise = fetch('/api/v1/reaction_svg', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        materials_svg_paths: materialsSvgPaths,
-        temperature,
-        duration,
-        solvents,
-        conditions: (typeof conditions === 'string') ? conditions : '',
-      })
-    }).then((response) => {
-      return response.status == 201 ? response.json() : {}
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/ReactionsFetcher.js b/app/packs/src/components/fetchers/ReactionsFetcher.js
deleted file mode 100644
index b1d2e8be6..000000000
--- a/app/packs/src/components/fetchers/ReactionsFetcher.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import 'whatwg-fetch';
-import { indexOf, split } from 'lodash';
-import Immutable from 'immutable';
-
-import BaseFetcher from './BaseFetcher';
-import Reaction from '../models/Reaction';
-import UIStore from '../stores/UIStore';
-import AttachmentFetcher from './AttachmentFetcher';
-import Literature from '../models/Literature';
-import GenericElsFetcher from './GenericElsFetcher';
-import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
-
-// TODO: Extract common base functionality into BaseFetcher
-export default class ReactionsFetcher {
-  static fetchById(id) {
-    return fetch(`/api/v1/reactions/${id}.json`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then((json) => {
-        if (json.hasOwnProperty("reaction")) {
-          const reaction = new Reaction(json.reaction);
-          if (json.literatures && json.literatures.length > 0) {
-            const tliteratures = json.literatures.map(literature => new Literature(literature));
-            const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
-            reaction.literatures = lits;
-          }
-          reaction.publication = json.publication || {};
-          return new Reaction(defaultAnalysisPublish(reaction));
-        }
-        const rReaction = new Reaction(json.reaction);
-        rReaction.publication = json.publication || {};
-        if (json.error) {
-          rReaction.id = `${id}:error:Reaction ${id} is not accessible!`;
-        }
-        return new Reaction(defaultAnalysisPublish(rReaction));
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'reactions', Reaction);
-  }
-
-  static create(r, method = 'post') {
-    const reaction = defaultAnalysisPublish(r);
-    const reactionFiles = AttachmentFetcher.getFileListfrom(reaction.container);
-    let productsFiles = [];
-    reaction.products.forEach((prod) => {
-      const files = AttachmentFetcher.getFileListfrom(prod.container);
-      productsFiles = [...productsFiles, ...files];
-    });
-    const allFiles = reactionFiles.concat(productsFiles);
-
-    const promise = () => fetch(`/api/v1/reactions/${method === 'post' ? '' : reaction.id}`, {
-      credentials: 'same-origin',
-      method,
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(reaction.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(reaction, json.reaction.id, 'Reaction')
-        .then(() => this.fetchById(json.reaction.id))).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    if (allFiles.length > 0) {
-      let tasks = [];
-      allFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-    return promise();
-  }
-
-  static update(reaction) {
-    return ReactionsFetcher.create(reaction, 'put');
-  }
-
-  static importFromChemScanner({ reactions, molecules }) {
-    const promise = fetch('/api/v1/reactions/import_chemscanner', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactions,
-        molecules,
-        collection_id: UIStore.getState().currentCollection.id,
-      })
-    }).then(response => response.json()).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/ReportTemplateFetcher.js b/app/packs/src/components/fetchers/ReportTemplateFetcher.js
deleted file mode 100644
index 30a9fc346..000000000
--- a/app/packs/src/components/fetchers/ReportTemplateFetcher.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import 'whatwg-fetch';
-
-import NotificationActions from '../actions/NotificationActions';
-
-export default class ReportTemplateFetcher {
-
-  static fetchTemplates() {
-    let promise = fetch('/api/v1/report_templates/', {
-      credentials: 'same-origin',
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static fetchTemplateById(id) {
-    let promise = fetch(`/api/v1/report_templates/${id}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static createTemplate(params) {
-    const data = new FormData()
-    data.append('name', params.name);
-    data.append('report_type', params.report_type);
-    if (params.attachment) {
-      data.append('file', params.attachment);
-    }
-    return () => fetch('/api/v1/report_templates', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      if (response.ok == false) {
-        let msg = 'Files uploading failed: ';
-        if (response.status == 413) {
-          msg += 'File size limit exceeded.'
-        } else {
-          msg += response.statusText;
-        }
-        NotificationActions.add({
-          message: msg,
-          level: 'error'
-        });
-      }
-    })
-  }
-
-  static updateTemplate(params) {
-    const data = new FormData()
-    data.append('id', params.id);
-    data.append('name', params.name);
-    data.append('report_type', params.report_type);
-    data.append('attachment_id', params.attachment_id);
-    if (params.attachment) {
-      data.append('file', params.attachment);
-    }
-    return () => fetch(`/api/v1/report_templates/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'put',
-      body: data
-    }).then((response) => {
-      if (response.ok == false) {
-        let msg = 'Files uploading failed: ';
-        if (response.status == 413) {
-          msg += 'File size limit exceeded.'
-        } else {
-          msg += response.statusText;
-        }
-        NotificationActions.add({
-          message: msg,
-          level: 'error'
-        });
-      }
-    })
-  }
-
-  static deleteAttachment(params) {
-    let promise = fetch(`/api/v1/report_templates/${params.id}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return new Attachment(json.attachment);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/ReportsFetcher.js b/app/packs/src/components/fetchers/ReportsFetcher.js
deleted file mode 100644
index 98c61e20f..000000000
--- a/app/packs/src/components/fetchers/ReportsFetcher.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import 'whatwg-fetch';
-import _ from 'lodash';
-import NotificationActions from 'src/stores/alt/actions/NotificationActions';
-
-export default class ReportsFetcher {
-  static getDois(elements) {
-    let promise = fetch('/api/v1/reports/dois/', {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ elements }),
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-      return promise;
-  }
-  static fetchArchives() {
-    let promise = fetch('/api/v1/archives/all', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static deleteArchive(archive_id) {
-    let promise = fetch(`/api/v1/archives/${archive_id}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-    })
-      .then((response) => {
-        if (response.status == 200) { return archive_id }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static fetchDownloadable(ids) {
-    let promise = fetch('/api/v1/archives/downloadable/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ ids: ids }),
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static create(report) {
-    let promise = fetch('/api/v1/reports', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(report),
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        NotificationActions.add({
-          title: json.error,
-          message: 'Please reload the page to try it again!',
-          level: 'error',
-          dismissible: 'button',
-          position: 'tr',
-        });
-
-        return null;
-      }
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static createDownloadFile(params, filename, route = 'export_samples_from_selections') {
-    let file_name = filename
-    let promise = fetch(`/api/v1/reports/${route}`, {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/vnd.ms-excel, chemical/x-mdl-sdfile, text/csv, application/zip, application/octet-stream',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params),
-    }).then((response) => {
-      const disposition = response.headers.get('Content-Disposition')
-      if (disposition && disposition.indexOf('attachment') !== -1) {
-        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        let matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          file_name = matches[1].replace(/['"]/g, '');
-        }
-      }
-      return response.blob()
-    }).then((blob) => {
-      const a = document.createElement("a");
-      a.style = "display: none";
-      document.body.appendChild(a);
-      let url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = file_name
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-}
diff --git a/app/packs/src/components/fetchers/RepositoryFetcher.js b/app/packs/src/components/fetchers/RepositoryFetcher.js
deleted file mode 100644
index daaa7de4a..000000000
--- a/app/packs/src/components/fetchers/RepositoryFetcher.js
+++ /dev/null
@@ -1,384 +0,0 @@
-import 'whatwg-fetch';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import NotificationActions from '../actions/NotificationActions';
-
-const AnalysisIdstoPublish = element => (
-  element.analysisArray()
-    .filter(a => (a.extended_metadata.publish && (a.extended_metadata.publish === true || a.extended_metadata.publish === 'true')))
-    .map(x => x.id)
-);
-
-export default class RepositoryFetcher {
-
-  static reviewPublish(element) {
-    const { id, type } = element;
-    return fetch('/api/v1/repository/reviewing/submit', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .then((json) => {
-        if (typeof json.reaction !== 'undefined') {
-          json.reaction.can_publish = false;
-          json.reaction.can_update = false;
-          return new Reaction(json.reaction);
-        } else if (type === 'sample') {
-          json.sample.can_publish = false;
-          json.sample.can_update = false;
-          return new Sample(json.sample);
-        }
-        return null;
-    })
-    .catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishSample(params, option = null) {
-    const { sample, coauthors, reviewers, refs, embargo, license, addMe } = params;
-    const analysesIds = AnalysisIdstoPublish(sample);
-    return fetch(`/api/v1/repository/publishSample/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        sampleId: sample.id,
-        analysesIds,
-        coauthors,
-        reviewers,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish sample fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_sample_error'};
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.sample.can_publish = true;
-        json.sample.can_update = true;
-      }
-      return new Sample(json.sample);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static publishReactionScheme(params) {
-    const {
-      reaction, coauthors, reviewers, embargo, license, addMe, schemeDesc
-    } = params;
-    return fetch('/api/v1/repository/publishReactionScheme', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        temperature: reaction.temperature,
-        duration: reaction.durationDisplay,
-        products: reaction.products,
-        schemeDesc,
-        coauthors,
-        reviewers,
-        embargo,
-        license,
-        addMe
-      })
-    })
-      .then(response => (response.json()))
-      .then((json) => {
-        if (json.error) {
-          const notification = {
-            title: 'Publish reaction scheme fail',
-            message: `Error: ${json.error}`,
-            level: 'error',
-            dismissible: 'button',
-            autoDismiss: 6,
-            position: 'tr',
-            uid: 'publish_reaction_error'
-          };
-          NotificationActions.add(notification);
-          return null;
-        }
-        return new Reaction(json.reaction);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static publishReaction(params, option = null) {
-    const { reaction, coauthors, reviewers, refs, embargo, license, isFullyPublish, addMe } = params;
-    if (!isFullyPublish) return this.publishReactionScheme(params);
-    const analysesIds = reaction.samples.reduce((acc, s) => acc.concat(AnalysisIdstoPublish(s)),
-      AnalysisIdstoPublish(reaction)
-    )
-    return fetch(`/api/v1/repository/publishReaction/${option ? 'dois' : ''}`, {
-      credentials: 'same-origin',
-      method: option ? 'PUT' : 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        reactionId: reaction.id,
-        analysesIds,
-        coauthors,
-        reviewers,
-        refs,
-        embargo,
-        license,
-        addMe
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      if (json.error) {
-        const notification = {
-          title: 'Publish reaction fail',
-          message: `Error: ${json.error}`,
-          level: 'error',
-          dismissible: 'button',
-          autoDismiss: 6,
-          position: 'tr',
-          uid: 'publish_reaction_error'
-        };
-        NotificationActions.add(notification);
-        return null;
-      }
-      if (option=='dois') {
-        json.reaction.can_publish = true;
-        json.reaction.can_update = true;
-      }
-      return new Reaction(json.reaction);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-
-  static fetchReviewElements(type, state, searchType, searchValue, page, perPage) {
-    const paramSearchType = (searchType && searchType !== '') ? `&search_type=${searchType}` : '';
-    const paramSearchValue = (searchValue && searchValue !== '') ? `&search_value=${searchValue}` : '';
-    const api = `/api/v1/repository/list.json?type=${type}&state=${state}${paramSearchType}${paramSearchValue}&page=${page}&per_page=${perPage}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json().then(json => ({
-        elements: json.elements,
-        page: parseInt(response.headers.get('X-Page'), 10),
-        pages: parseInt(response.headers.get('X-Total-Pages'), 10),
-        perPage: parseInt(response.headers.get('X-Per-Page'), 10),
-        selectType: type,
-        selectState: state,
-        searchType,
-        searchValue
-      })))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static fetchReaction(id, isPublic) {
-    const api = `/api/v1/repository/reaction.json?id=${id}&is_public=${isPublic}`;
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchSample(id, isPublic) {
-    const api = `/api/v1/repository/sample.json?id=${id}&is_public=${isPublic}`
-    return fetch(api, { credentials: 'same-origin' })
-      .then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static saveComments(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comments', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static repoReviewPublish(id, type, comment, action, checklist = {}, reviewComments) {
-    let api = '';
-    if (action === 'Comments') {
-      api = '/api/v1/repository/reviewing/comments';
-    } else if (action === 'Accept') {
-      api = '/api/v1/repository/reviewing/accepted';
-    } else if (action === 'Approve') {
-      api = '/api/v1/repository/reviewing/approved';
-    } else if (action === 'Review') {
-      api = '/api/v1/repository/reviewing/reviewed';
-    } else if (action === 'Submit') {
-      api = '/api/v1/repository/reviewing/submit';
-    } else if (action === 'Decline') {
-      api = '/api/v1/repository/reviewing/declined';
-    } else {
-      // return;
-    }
-
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        id, type, comment, checklist, reviewComments
-      })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static fetchReviewSearchOptions(searchType, elementType, state) {
-    return fetch(`/api/v1/repository/review_search_options.json?type=${searchType}&element_type=${elementType}&state=${state}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static previewMetadata(id, type) {
-    return fetch('/api/v1/repository/metadata/preview', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static userComment(id, type, pageId, pageType, comment) {
-    return fetch('/api/v1/repository/comment/user_comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, pageId, pageType, comment })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static reviewerComment(id, type, comment) {
-    return fetch('/api/v1/repository/comment/reviewer', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comment })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  static updateComment(id, type, comments) {
-    return fetch('/api/v1/repository/reviewing/comment', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, comments })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  static saveRepoAuthors(params = {}) {
-    return fetch('/api/v1/repository/save_repo_authors', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static zipPreviewMetadata(id, type) {
-    const currentTime = Math.floor(Date.now() / 1000);
-    const fileName = `metadata_${type}_${id}-${currentTime}.zip`;
-    return fetch('/api/v1/repository/metadata/preview_zip', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type })
-    }).then((response) => {
-      return response.blob();
-    }).then((blob) => {
-      const a = document.createElement('a');
-      a.style = 'display: none';
-      document.body.appendChild(a);
-      const url = window.URL.createObjectURL(blob);
-      a.href = url;
-      a.download = fileName;
-      a.click();
-      window.URL.revokeObjectURL(url);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static compound(id, data, action = 'request') {
-    const api = `/api/v1/repository/compound/${action}`;
-    return fetch(api, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, data })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-}
diff --git a/app/packs/src/components/fetchers/ResearchPlansFetcher.js b/app/packs/src/components/fetchers/ResearchPlansFetcher.js
deleted file mode 100644
index e3c2f7bea..000000000
--- a/app/packs/src/components/fetchers/ResearchPlansFetcher.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import 'whatwg-fetch';
-import _ from 'lodash';
-import ResearchPlan from '../models/ResearchPlan';
-import AttachmentFetcher from './AttachmentFetcher';
-import BaseFetcher from './BaseFetcher';
-import GenericElsFetcher from './GenericElsFetcher';
-
-import { getFileName, downloadBlob } from '../utils/FetcherHelper'
-
-export default class ResearchPlansFetcher {
-  static fetchById(id) {
-    let promise = fetch('/api/v1/research_plans/' + id + '.json', {
-        credentials: 'same-origin'
-      })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        const rResearchPlan = new ResearchPlan(json.research_plan);
-        rResearchPlan.attachments = json.attachments;
-        if (json.error) {
-          rResearchPlan.id = `${id}:error:ResearchPlan ${id} is not accessible!`;
-        }
-        return rResearchPlan;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-
-    return promise;
-  }
-
-  static fetchByCollectionId(id, queryParams={}, isSync = false) {
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'research_plans', ResearchPlan);
-  }
-
-  static create(researchPlan) {
-    const promise = fetch('/api/v1/research_plans/', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(researchPlan.serialize())
-    }).then(response => response.json()).then(json => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
-      .then(() => this.fetchById(json.research_plan.id))).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static update(researchPlan) {
-    const containerFiles = AttachmentFetcher.getFileListfrom(researchPlan.container);
-    const promise = () => fetch(`/api/v1/research_plans/${researchPlan.id}`, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(researchPlan.serialize())
-    }).then(response => response.json()).then(json => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
-      .then(() => this.fetchById(json.research_plan.id))).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    
-    if (containerFiles.length > 0) {
-      let tasks = [];
-      containerFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-    return promise();
-  }
-
-  static updateSVGFile(svg_file, isChemdraw = false) {
-    let promise = ()=> fetch('/api/v1/research_plans/svg', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ svg_file: svg_file, is_chemdraw: isChemdraw })
-    }).then((response) => {
-      return response.json()
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise();
-  }
-
-  static updateImageFile(image_file, replace) {
-    var data = new FormData();
-    data.append('file', image_file);
-
-    if (replace) {
-      data.append('replace', replace);
-    }
-
-    let promise = ()=> fetch('/api/v1/research_plans/image', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      return response.json()
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise();
-  }
-
-  static export(researchPlan, exportFormat) {
-    let file_name
-    const promise = fetch(`/api/v1/research_plans/${researchPlan.id}/export/?export_format=${exportFormat}`, {
-      credentials: 'same-origin',
-      method: 'get',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      if (response.ok) {
-        file_name = getFileName(response)
-        return response.blob()
-      } else {
-        console.log(response);
-      }
-    }).then((blob) => {
-      downloadBlob(file_name, blob)
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static exportTable(researchPlan, field) {
-    let file_name
-    const promise = fetch(`/api/v1/research_plans/${researchPlan.id}/export_table/${field.id}/`, {
-      credentials: 'same-origin',
-      method: 'get',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      if (response.ok) {
-        file_name = getFileName(response)
-        return response.blob()
-      } else {
-        throw Error(response.statusText);
-      }
-    }).then((blob) => {
-      downloadBlob(file_name, blob)
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static fetchTableSchemas() {
-    return fetch('/api/v1/research_plans/table_schemas/', {
-      credentials: 'same-origin',
-      method: 'get',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      if (response.ok) {
-        return response.json()
-      } else {
-        throw Error(response.statusText);
-      }
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static createTableSchema(name, value) {
-    return fetch('/api/v1/research_plans/table_schemas/', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ name, value })
-    }).then(response => {
-      return response.json()
-    }).catch((errorMessage) => {
-      console.log(errorMessage)
-    })
-  }
-
-  static deleteTableSchema(id) {
-    return fetch('/api/v1/research_plans/table_schemas/' + id, {
-      credentials: 'same-origin',
-      method: 'delete',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
-    }).then(response => {
-      return response.json()
-    }).catch((errorMessage) => {
-      console.log(errorMessage)
-    })
-  }
-
-  static postResearchPlanMetadata(params) {
-    return fetch('/api/v1/research_plan_metadata', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/ResidueFetcher.js b/app/packs/src/components/fetchers/ResidueFetcher.js
deleted file mode 100644
index 7ee41de73..000000000
--- a/app/packs/src/components/fetchers/ResidueFetcher.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ResidueFetcher {
-  static fetchByMolfile(molfile, svg_file) {
-    let promise = fetch('/api/v1/residues', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        molfile: molfile,
-        svg_file: svg_file
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/fetchers/ReviewFetcher.js b/app/packs/src/components/fetchers/ReviewFetcher.js
deleted file mode 100644
index 8fcb2a7d3..000000000
--- a/app/packs/src/components/fetchers/ReviewFetcher.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import 'whatwg-fetch';
-
-export default class ReviewFetcher {
-};
\ No newline at end of file
diff --git a/app/packs/src/components/fetchers/SamplesFetcher.js b/app/packs/src/components/fetchers/SamplesFetcher.js
deleted file mode 100644
index 84232203e..000000000
--- a/app/packs/src/components/fetchers/SamplesFetcher.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import 'whatwg-fetch';
-
-import Sample from '../models/Sample';
-import UIStore from '../stores/UIStore';
-import NotificationActions from '../actions/NotificationActions';
-import AttachmentFetcher from './AttachmentFetcher';
-import BaseFetcher from './BaseFetcher';
-import GenericElsFetcher from './GenericElsFetcher';
-
-import Container from '../models/Container';
-import defaultAnalysisPublish from '../utils/defaultAnalysisPublish';
-
-export default class SamplesFetcher {
-  static fetchSamplesByUIStateAndLimit(params) {
-    const limit = params.limit ? limit : null;
-
-    return fetch('/api/v1/samples/ui_state/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: {
-          all: params.sample.all,
-          included_ids: params.sample.included_ids,
-          excluded_ids: params.sample.excluded_ids,
-          collection_id: params.sample.collection_id
-        },
-        limit: params.limit
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json.samples.map((s) => new Sample(s));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static fetchById(id) {
-    let promise = fetch('/api/v1/samples/' + id + '.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        const rSample = new Sample(json.sample);
-        if (json.error) {
-          rSample.id = `${id}:error:Sample ${id} is not accessible!`;
-        }
-        return new Sample(defaultAnalysisPublish(rSample));
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false, moleculeSort = false) {
-    queryParams.moleculeSort = moleculeSort;
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'samples', Sample);
-  }
-
-  static update(s) {
-    const sample = defaultAnalysisPublish(s);
-    let files = AttachmentFetcher.getFileListfrom(sample.container)
-    let promise = ()=> fetch('/api/v1/samples/' + sample.id, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
-        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-
-    return promise();
-  }
-
-  static create(s) {
-    const sample = defaultAnalysisPublish(s);
-    let files = AttachmentFetcher.getFileListfrom(sample.container)
-    let promise = ()=> fetch('/api/v1/samples', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
-        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file)));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-
-    return promise();
-  }
-
-  static splitAsSubsamples(params) {
-    let promise = fetch('/api/v1/samples/subsamples/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: {
-          sample: {
-            all: params.sample.checkedAll,
-            included_ids: params.sample.checkedIds,
-            excluded_ids: params.sample.uncheckedIds
-          },
-          currentCollectionId: params.currentCollection.id
-        }
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static importSamplesFromFile(params) {
-
-    var data = new FormData();
-    data.append("file", params.file);
-    data.append("currentCollectionId", params.currentCollectionId);
-
-    let promise = fetch('/api/v1/samples/import/', {
-      credentials: 'same-origin',
-      method: 'post',
-      body: data
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static importSamplesFromFileConfirm(params) {
-    let promise = fetch('/api/v1/samples/confirm_import/', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        currentCollectionId: params.currentCollectionId,
-        rows: params.rows,
-        mapped_keys: params.mapped_keys,
-      })
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      for (let i = 0; i < json.error_messages.length; i++) {
-        NotificationActions.add({
-          message: json.error_messages[i],
-          level: 'error',
-          autoDismiss: 10
-        });
-      };
-
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static updateXvial(id, type, data) {
-    return fetch('/api/v1/samples/xvial/update', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ id, type, data })
-    }).then(response => response.json())
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-}
diff --git a/app/packs/src/components/fetchers/ScreensFetcher.js b/app/packs/src/components/fetchers/ScreensFetcher.js
deleted file mode 100644
index 44a12ba75..000000000
--- a/app/packs/src/components/fetchers/ScreensFetcher.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import 'whatwg-fetch';
-import Screen from '../models/Screen';
-import UIStore from '../stores/UIStore'
-import AttachmentFetcher from './AttachmentFetcher'
-import BaseFetcher from './BaseFetcher';
-
-export default class ScreensFetcher {
-  static fetchById(id) {
-    let promise = fetch('/api/v1/screens/' + id + '.json', {
-      credentials: 'same-origin'
-    })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
-        const rScreen = new Screen(json.screen);
-        if (json.error) {
-          rScreen.id = `${id}:error:Screen ${id} is not accessible!`;
-        }
-        return rScreen;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'screens', Screen);
-  }
-
-  static update(screen) {
-    let files = AttachmentFetcher.getFileListfrom(screen.container)
-
-    let promise = () => fetch('/api/v1/screens/' + screen.id, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(screen.serialize())
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return new Screen(json.screen);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    if(files.length > 0 ){
-        return AttachmentFetcher.uploadFiles(files)().then(()=> promise());
-    }else{
-      return promise()
-    }
-
-  }
-
-  static create(screen) {
-    let files = AttachmentFetcher.getFileListfrom(screen.container)
-
-    let promise = () => fetch('/api/v1/screens/', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(screen.serialize())
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return new Screen(json.screen);
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    if(files.length > 0){
-      return AttachmentFetcher.uploadFiles(files)().then(()=> promise());
-    }else{
-      return promise()
-    }
-
-  }
-}
diff --git a/app/packs/src/components/fetchers/SearchFetcher.js b/app/packs/src/components/fetchers/SearchFetcher.js
deleted file mode 100644
index cc520dd89..000000000
--- a/app/packs/src/components/fetchers/SearchFetcher.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import 'whatwg-fetch';
-import Sample from '../models/Sample';
-import Reaction from '../models/Reaction';
-import Wellplate from '../models/Wellplate';
-import Screen from '../models/Screen';
-import GenericEl from '../models/GenericEl';
-import ResearchPlan from '../models/ResearchPlan';
-
-export default class SearchFetcher {
-  static fetchBasedOnSearchSelectionAndCollection(params) {
-    const { selection, collectionId, page, isSync, moleculeSort, isPublic } = params;
-    return fetch(`/api/v1/search/${selection.elementType.toLowerCase()}`, {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        selection,
-        collection_id: collectionId,
-        page: page || 1,
-        per_page: selection.page_size,
-        is_sync: isSync || false,
-        molecule_sort: moleculeSort || false,
-        is_public: isPublic || false,
-      })
-    }).then(response => response.json())
-      .then((json) => {
-        const { samples, reactions, wellplates, screens, research_plans } = json;
-        const result = { ...json };
-
-        Object.keys(json).forEach((key) => {
-          switch (key) {
-            case 'samples':
-              if (samples && samples.totalElements && samples.totalElements > 0) {
-                result.samples.elements = samples.elements.map(s => (new Sample(s)));
-              } else { result.samples = { elements: [], totalElements: 0, ids: [] }; }
-              break;
-            case 'reactions':
-              if (reactions && reactions.totalElements && reactions.totalElements > 0) {
-                result.reactions.elements = reactions.elements.map(r => (new Reaction(r)));
-              } else { result.reactions = { elements: [], totalElements: 0, ids: [] }; }
-              break;
-            case 'wellplates':
-              if (wellplates && wellplates.totalElements && wellplates.totalElements > 0) {
-                result.wellplates.elements = wellplates.elements.map(s => (new Wellplate(s)));
-              } else { result.wellplates = { elements: [], totalElements: 0, ids: [] }; }
-              break;
-            case 'screens':
-              if (screens && screens.totalElements && screens.totalElements > 0) {
-                result.screens.elements = screens.elements.map(s => (new Screen(s)));
-              } else { result.screens = { elements: [], totalElements: 0, ids: [] }; }
-              break;
-            case 'research_plans':
-              if (research_plans && research_plans.totalElements && research_plans.totalElements > 0) {
-                result.research_plans.elements = research_plans.elements.map(s => (new ResearchPlan(s)));
-              } else { result.research_plans = { elements: [], totalElements: 0, ids: [] }; }
-              break;
-              default:
-              result[`${key}`].elements = json[`${key}`].elements.map(s => (new GenericEl(s)));
-          }
-        });
-
-        return result;
-      }).catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/SegmentsFetcher.js b/app/packs/src/components/fetchers/SegmentsFetcher.js
deleted file mode 100644
index b0f8158d3..000000000
--- a/app/packs/src/components/fetchers/SegmentsFetcher.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default class SegmentsFetcher {
-  static fetchKlass(elementName = null) {
-    let api = '';
-    if (elementName == null) {
-      api = '/api/v1/segments/klasses.json';
-    } else {
-      api = `/api/v1/segments/klasses.json?element=${elementName}`;
-    }
-    return fetch(api, {
-      credentials: 'same-origin'
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/SuggestionsFetcher.js b/app/packs/src/components/fetchers/SuggestionsFetcher.js
deleted file mode 100644
index 3c735a81a..000000000
--- a/app/packs/src/components/fetchers/SuggestionsFetcher.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import 'whatwg-fetch';
-
-export default class SuggestionsFetcher {
-  static fetchSuggestionsForCurrentUser(elementType, query, collectId, isSync = false) {
-    return fetch(
-      `/api/v1/suggestions/${elementType}?query=${encodeURIComponent(query)}&collection_id=${collectId}&is_sync=${isSync}`,
-      { credentials: 'same-origin' }
-    ).then(response => response.json())
-      .then(json => json.suggestions)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/TextTemplatesFetcher.js b/app/packs/src/components/fetchers/TextTemplatesFetcher.js
deleted file mode 100644
index f84ee480a..000000000
--- a/app/packs/src/components/fetchers/TextTemplatesFetcher.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import 'whatwg-fetch';
-
-import { camelize, decamelize } from 'humps';
-
-const shallowCamelizeKeys = (obj) => {
-  return Object.keys(obj).reduce((newObj, key) => {
-    // eslint-disable-next-line no-param-reassign
-    newObj[camelize(key)] = obj[key];
-    return newObj;
-  }, {});
-};
-
-export default class TextTemplatesFetcher {
-  static fetchTextTemplates(elementName) {
-    return fetch(`/api/v1/text_templates/by_type?type=${decamelize(elementName)}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => shallowCamelizeKeys(json))
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchPredefinedTemplateNames() {
-    return fetch('/api/v1/text_templates/predefinedNames', {
-      credentials: 'same-origin',
-      method: 'GET'
-    }).then(response => response.json())
-      .then(json => json.text_templates)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchPredefinedTemplateByNames(names) {
-    const params = names.map(n => `name[]=${encodeURIComponent(n)}`).join('&');
-
-    return fetch(`/api/v1/text_templates/by_name?${params}`, {
-      credentials: 'same-origin',
-      method: 'GET'
-    }).then(response => response.json())
-      .then(json => json.text_templates)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updateTextTemplates(elementName, template) {
-    return fetch('/api/v1/text_templates/update', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ data: template, type: decamelize(elementName) })
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static updatePredefinedTemplates(template) {
-    const method = template.id ? 'PUT' : 'POST';
-
-    return fetch('/api/v1/text_templates/predefined_text_template', {
-      credentials: 'same-origin',
-      method,
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(template)
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deletePredefinedTemplateByName(name) {
-    return fetch(`/api/v1/text_templates/by_name?name=${name}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-    }).then(response => response.json())
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/UIFetcher.js b/app/packs/src/components/fetchers/UIFetcher.js
deleted file mode 100644
index afa2cb177..000000000
--- a/app/packs/src/components/fetchers/UIFetcher.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import 'whatwg-fetch';
-import { camelizeKeys } from 'humps';
-
-import Sample from 'src/models/Sample';
-import Reaction from 'src/models/Reaction';
-
-export default class UIFetcher {
-  static initialize() {
-    const promise = fetch('/api/v1/ui/initialize', {
-      credentials: 'same-origin',
-    }).then(response => response.json())
-      .then(json => camelizeKeys(json))
-      .catch(err => console.log(err)); // eslint-disable-line
-
-    return promise;
-  }
-
-  static fetchByUIState(params, method = 'POST') {
-    return fetch('/api/v1/ui_state/', {
-      credentials: 'same-origin',
-      method,
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then((json) => {
-        if (method === 'DELETE') { return json; }
-        const samples = json.samples.map(s => new Sample(s));
-        const reactions = json.reactions.map(r => new Reaction(r));
-        return { samples, reactions };
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static loadReport(params, loadType) {
-    const tParams = Object.assign({}, params, { loadType });
-
-    return fetch('/api/v1/ui_state/load_report', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(tParams),
-    }).then(response => response.json())
-      .then((json) => {
-        const samples = json.samples.map(s => new Sample(s));
-        const reactions = json.reactions.map(r => new Reaction(r));
-        return { samples, reactions };
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchNMRDisplayerHost() {
-    return fetch('/api/v1/chemspectra/nmrium_wrapper/host_name', {
-      credentials: 'same-origin',
-      method: 'GET',
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-}
diff --git a/app/packs/src/components/fetchers/UsersFetcher.js b/app/packs/src/components/fetchers/UsersFetcher.js
deleted file mode 100644
index da41f3afa..000000000
--- a/app/packs/src/components/fetchers/UsersFetcher.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import 'whatwg-fetch';
-
-export default class CollaboratorFetcher {
-
-  static fetchMyCollaborations() {
-    return fetch('/api/v1/collaborators/list', {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static AddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/add', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static createAddMyCollaboration(params = {}) {
-    return fetch('/api/v1/collaborators/create', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-
-  static addCollaboratorAff(params = {}) {
-    return fetch('/api/v1/collaborators/add_aff', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static deleteCollaboration(params) {
-    return fetch('/api/v1/collaborators/delete', {
-      credentials: 'same-origin',
-      method: 'PUT',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static deleteCollaboratorAff(params) {
-    return fetch('/api/v1/collaborators/delete_aff', {
-      credentials: 'same-origin',
-      method: 'PUT',
-    });
-  }
-
-  static refreshOrcidAff(params) {
-    return fetch('/api/v1/collaborators/refresh_orcid_aff', {
-      credentials: 'same-origin',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-
-  static loadOrcidByUserId(params) {
-    return fetch('/api/v1/collaborators/load_orcid', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchUsersByNameFirst(name, first, email) {
-    return fetch(`/api/v1/collaborators/user.json?name=${name}&first=${first}&email=${email}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  static fetchandAddCollaboratorByOrcid(orcid) {
-    return fetch(`/api/v1/collaborators/orcid.json?orcid=${orcid}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then(json => json)
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-}
diff --git a/app/packs/src/components/fetchers/WellplatesFetcher.js b/app/packs/src/components/fetchers/WellplatesFetcher.js
deleted file mode 100644
index fded0338d..000000000
--- a/app/packs/src/components/fetchers/WellplatesFetcher.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import 'whatwg-fetch';
-import Wellplate from '../models/Wellplate';
-import UIStore from '../stores/UIStore';
-import AttachmentFetcher from './AttachmentFetcher';
-import BaseFetcher from './BaseFetcher';
-import GenericElsFetcher from './GenericElsFetcher';
-
-export default class WellplatesFetcher {
-  static fetchById(id) {
-    let promise = fetch('/api/v1/wellplates/' + id + '.json', {
-        credentials: 'same-origin'
-      })
-      .then((response) => {
-        return response.json();
-      }).then((json) => {
-        if (json.error) {
-          return new Wellplate({ id: `${id}:error:Wellplate ${id} is not accessible!`, wells: [], is_new: true });
-        }
-        return new Wellplate(json.wellplate);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
-  static fetchByCollectionId(id, queryParams = {}, isSync = false) {
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'wellplates', Wellplate);
-  }
-
-  static bulkCreateWellplates(params) {
-    let promise = fetch('/api/v1/wellplates/bulk', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static update(params) {
-    const wellplate = new Wellplate(params);
-    const files = AttachmentFetcher.getFileListfrom(wellplate.container);
-    const promise = () => fetch(`/api/v1/wellplates/${wellplate.id}`, {
-      credentials: 'same-origin',
-      method: 'put',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(wellplate.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(params, json.wellplate.id, 'Wellplat')
-        .then(() => this.fetchById(json.wellplate.id))).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-      
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-    return promise();
-  }
-
-  static create(params) {
-    const files = AttachmentFetcher.getFileListfrom(params.container);
-    const promise = () => fetch('/api/v1/wellplates/', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(params, json.wellplate.id, 'Wellplat')
-        .then(() => this.fetchById(json.wellplate.id))).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-      
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
-    }
-    return promise();
-  }
-
-  static fetchWellplatesByUIState(params) {
-    return fetch('/api/v1/wellplates/ui_state/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: {
-          all: params.wellplate.all,
-          included_ids: params.wellplate.included_ids,
-          excluded_ids: params.wellplate.excluded_ids,
-          collection_id: params.wellplate.collection_id
-        }
-      })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json.wellplates.map((w) => new Wellplate(w));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-  }
-
-  static splitAsSubwellplates(params) {
-    const promise = fetch('/api/v1/wellplates/subwellplates/', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        ui_state: {
-          wellplate: {
-            all: params.wellplate.checkedAll,
-            included_ids: params.wellplate.checkedIds,
-            excluded_ids: params.wellplate.uncheckedIds
-          },
-          currentCollectionId: params.currentCollection.id
-        }
-      })
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-
-    return promise;
-  }
-
-  static updateWellLabel(params) {
-    let promise = fetch('/api/v1/wellplates/well_label', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-
-  static updateWellColorCode(params) {
-    let promise = fetch('/api/v1/wellplates/well_color_code', {
-      credentials: 'same-origin',
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(params)
-    }).then((response) => {
-      return response.json();
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
-  }
-}
diff --git a/app/packs/src/components/generic/AttrChk.js b/app/packs/src/components/generic/AttrChk.js
deleted file mode 100644
index dcf73721f..000000000
--- a/app/packs/src/components/generic/AttrChk.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Checkbox, FormGroup } from 'react-bootstrap';
-
-const AttrChk = (props) => {
-  const { chkAttr, node, attrOpts } = props;
-  return (
-    <FormGroup bsSize="small" className="generic_tbl_chks">
-      {attrOpts.map(e => <Checkbox key={e.value} inline checked={node.data.value.includes(e.value)} onChange={() => chkAttr(e.value, !(node.data.value.includes(e.value)), node)}>{e.label}</Checkbox>)}
-    </FormGroup>
-  );
-};
-
-AttrChk.propTypes = {
-  chkAttr: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-  attrOpts: PropTypes.array.isRequired,
-};
-
-export default AttrChk;
diff --git a/app/packs/src/components/generic/DefinedRenderer.js b/app/packs/src/components/generic/DefinedRenderer.js
deleted file mode 100644
index 44ccec8c1..000000000
--- a/app/packs/src/components/generic/DefinedRenderer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import SystemSelect from './SystemSelect';
-import { molOptions, samOptions } from '../../admin/generic/Utils';
-import AttrChk from './AttrChk';
-
-const DefinedRenderer = (props) => {
-  const {
-    unitConfig, node, selDefined, chkAttr
-  } = props;
-  if (node.data.type === 'system-defined') return <SystemSelect unitConfig={unitConfig} selDefined={selDefined} node={node} />;
-  if (node.data.type === 'drag_molecule') return <AttrChk chkAttr={chkAttr} node={node} attrOpts={molOptions} />;
-  if (node.data.type === 'drag_sample') return <AttrChk chkAttr={chkAttr} node={node} attrOpts={samOptions} />;
-  return node.data.value || null;
-};
-
-export default DefinedRenderer;
diff --git a/app/packs/src/components/generic/DropLinkRenderer.js b/app/packs/src/components/generic/DropLinkRenderer.js
deleted file mode 100644
index d543c6cbc..000000000
--- a/app/packs/src/components/generic/DropLinkRenderer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Aviator from 'aviator';
-import UIStore from '../stores/UIStore';
-
-const linkSample = (type, id) => {
-  const { currentCollection, isSync } = UIStore.getState();
-  const collectionUrl = (!isNaN(id)) ?
-    `${currentCollection.id}/${type}/${id}` : `${currentCollection.id}/${type}`;
-  Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
-};
-
-const DropLinkRenderer = (props) => {
-  const { sField, node } = props;
-  const dId = ((node.data[sField.id] || {}).value || {}).el_id || '';
-  const dVal = ((node.data[sField.id] || {}).value || {}).el_short_label || ' ';
-  if (dId === '') return <div />;
-  return (
-    <a role="link" onClick={() => linkSample('sample', dId)} style={{ cursor: 'pointer' }}>
-      <span className="reaction-material-link">{dVal}</span>
-    </a>
-  );
-};
-
-DropLinkRenderer.propTypes = {
-  sField: PropTypes.object.isRequired,
-  node: PropTypes.object.isRequired
-};
-
-export default DropLinkRenderer;
diff --git a/app/packs/src/components/generic/DropRenderer.js b/app/packs/src/components/generic/DropRenderer.js
deleted file mode 100644
index 9f71b0ed9..000000000
--- a/app/packs/src/components/generic/DropRenderer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { cloneDeep } from 'lodash';
-import GenericElTableDropTarget from './GenericElTableDropTarget';
-
-const DropRenderer = (props) => {
-  const {
-    opt, sField, onChange, node
-  } = props;
-  if (!['drag_molecule', 'drag_sample'].includes(sField.type)) return null;
-  const { data } = node;
-  opt.dndItems = [sField.type.split('_')[1]];
-  opt.sField = sField;
-  opt.data = data;
-  const oopt = cloneDeep(opt);
-  return (
-    <div className="drop_generic_properties drop_generic_table_wrap">
-      <GenericElTableDropTarget opt={oopt} onDrop={onChange} />
-    </div>
-  );
-};
-
-DropRenderer.propTypes = {
-  sField: PropTypes.object.isRequired,
-  opt: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired
-};
-
-export default DropRenderer;
diff --git a/app/packs/src/components/generic/DropTextRenderer.js b/app/packs/src/components/generic/DropTextRenderer.js
deleted file mode 100644
index 747e51053..000000000
--- a/app/packs/src/components/generic/DropTextRenderer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-const DropTextRenderer = (props) => {
-  const { attr, sField, node } = props;
-  let displayValue = ((node.data[sField.id] || {}).value || {})[`el_${attr.value}`] || '';
-  displayValue = (attr.value === 'molecular_weight' && displayValue !== '') ? displayValue.toFixed(6) : displayValue;
-  return (
-    <OverlayTrigger placement="top" overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}>
-      <div role="button" data-clipboard-text={displayValue} className="clipboardBtn" style={{ wordBreak: 'break-all', cursor: 'copy' }}>
-        {displayValue}
-      </div>
-    </OverlayTrigger>
-  );
-};
-
-DropTextRenderer.propTypes = {
-  attr: PropTypes.object.isRequired,
-  sField: PropTypes.object.isRequired,
-  node: PropTypes.object.isRequired
-};
-
-export default DropTextRenderer;
diff --git a/app/packs/src/components/generic/FieldSelect.js b/app/packs/src/components/generic/FieldSelect.js
deleted file mode 100644
index 3e0e5de17..000000000
--- a/app/packs/src/components/generic/FieldSelect.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import GridSelect from './GridSelect';
-
-const FieldSelect = (props) => {
-  const { allLayers, selField, types, node, tableText } = props;
-  const allFileds = ((allLayers.find(e => e.key === node.data.layer) || {}).fields || []).filter(e => (types || ['text']).includes(e.type));
-  const all = allFileds.map(e => ({ key: e.field, val: e.field, lab: e.field }));
-
-  if (tableText && tableText === true) {
-    const tableFileds = ((allLayers.find(e => e.key === node.data.layer) || {}).fields || []).filter(e => e.type === 'table');
-    tableFileds.forEach((tbl) => {
-      ((tbl.sub_fields || []).filter(e => e.type === 'text') || []).forEach((sf) => {
-        const tfl = { key: `${tbl.field}${sf.id}`, val: `${tbl.field}[@@]${sf.id}`, lab: `${tbl.field}.${sf.col_name}` };
-        all.push(tfl);
-      });
-    });
-  }
-  const dVal = node.data.field;
-  return <GridSelect all={all} onChange={selField} node={node} dVal={dVal} />;
-};
-
-FieldSelect.propTypes = {
-  allLayers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  types: PropTypes.arrayOf(String).isRequired,
-  tableText: PropTypes.bool,
-  selField: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-};
-
-FieldSelect.defaultProps = { tableText: false };
-
-export default FieldSelect;
diff --git a/app/packs/src/components/generic/GenericElCommon.js b/app/packs/src/components/generic/GenericElCommon.js
deleted file mode 100644
index c1dfab5fe..000000000
--- a/app/packs/src/components/generic/GenericElCommon.js
+++ /dev/null
@@ -1,402 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Col, PanelGroup, Row } from 'react-bootstrap';
-import { sortBy, findIndex } from 'lodash';
-import uuid from 'uuid';
-import { genUnits, unitConversion } from '../../admin/generic/Utils';
-import Attachment from '../models/Attachment';
-import {
-  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
-  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
-  GenPropertiesTextArea, GenPropertiesUpload, GenDummy, GenTextFormula, GenPropertiesTable
-} from './GenericPropertiesFields';
-
-const UploadInputChange = (properties, event, field, layer) => {
-  const files = [];
-  const fieldObj = properties.layers[`${layer}`].fields.find(e => e.field === field) || {};
-  const value = fieldObj.value || {};
-  switch (event.action) {
-    case 'l': {
-      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
-      const label = event && event.val && event.val.target && event.val.target.value;
-      if (value.files[valIdx] && label) value.files[valIdx].label = label;
-      break;
-    }
-    case 'f': {
-      (event.val || []).forEach((file) => {
-        const uid = uuid.v4();
-        if (typeof value.files === 'undefined' || value.files === null) value.files = [];
-        value.files.push({ uid, filename: file.name });
-        files.push({ uid, filename: file.name, file: Attachment.fromFile(file) });
-      });
-      break;
-    }
-    case 'd': {
-      const valIdx = findIndex((value.files || []), o => o.uid === event.uid);
-      if (valIdx >= 0 && value.files && value.files.length > 0) value.files.splice(valIdx, 1);
-      return [value, files, event.uid];
-    }
-    default:
-      console.log(event);
-  }
-  return [value, files];
-};
-
-
-const ShowProperties = (fObj, layers) => {
-  let showField = true;
-  if (fObj && fObj.cond_fields && fObj.cond_fields.length > 0) {
-    showField = false;
-    for (let i = 0; i < fObj.cond_fields.length; i += 1) {
-      const cond = fObj.cond_fields[i] || {};
-      const { layer, field, value } = cond;
-      if (field && field !== '') {
-        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field) || {};
-        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
-        (['true', 'yes', 't', '1'].includes((value || '').trim().toLowerCase()) && (typeof (fd && fd.value) !== 'undefined' && fd.value === true)))) {
-          showField = true;
-          break;
-        } else if (['text', 'select'].includes(fd && fd.type) && (typeof (fd && fd.value) !== 'undefined' && ((fd && fd.value) || '').trim() == (value || '').trim())) {
-          showField = true;
-          break;
-        }
-      }
-    }
-  }
-  return showField;
-};
-
-const GenProperties = (opt) => {
-  const fieldProps = { ...opt, dndItems: [] };
-  const type = fieldProps.type.split('_');
-  if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text';
-
-  switch (type[0]) {
-    case 'checkbox':
-      return GenPropertiesCheckbox(fieldProps);
-    case 'formula-field':
-      return GenPropertiesCalculate(fieldProps);
-    case 'select':
-      return GenPropertiesSelect(fieldProps);
-    case 'drag':
-      fieldProps.dndItems = [...fieldProps.dndItems, type[1]];
-      return GenPropertiesDrop(fieldProps);
-    case 'integer':
-      return GenPropertiesNumber(fieldProps);
-    case 'system-defined':
-      return GenPropertiesSystemDefined(fieldProps);
-    case 'input-group':
-      return GenPropertiesInputGroup(fieldProps);
-    case 'textarea':
-      return GenPropertiesTextArea(fieldProps);
-    case 'upload':
-      return GenPropertiesUpload(fieldProps);
-    case 'dummy':
-      return GenDummy();
-    case 'table':
-      return GenPropertiesTable(fieldProps);
-    case 'text-formula':
-      return GenTextFormula(fieldProps);
-    default:
-      return GenPropertiesText(fieldProps);
-  }
-};
-
-const GenPropertiesSearch = opt => GenProperties({ ...opt, isSearchCriteria: true });
-
-class GenPropertiesLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSubChange = this.handleSubChange.bind(this);
-  }
-
-  handleChange(e, f, k, t) {
-    this.props.onChange(e, f, k, t);
-  }
-
-  handleSubChange(e, id, f, valueOnly = false) {
-    const sub = f.sub_fields.find(m => m.id === id);
-    if (!valueOnly) {
-      if (e.type === 'system-defined') {
-        const units = genUnits(e.option_layers);
-        let uIdx = units.findIndex(u => u.key === e.value_system);
-        if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-        sub.value_system = units.length > 0 ? units[uIdx].key : '';
-        sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
-      } else {
-        sub.value = e.target.value;
-      }
-    }
-    const { layer } = this.props;
-    const obj = { f, sub };
-    this.props.onSubChange(layer.key, obj, valueOnly);
-  }
-
-  handleClick(keyLayer, obj, val) {
-    const units = genUnits(obj.option_layers);
-    let uIdx = units.findIndex(e => e.key === val);
-    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-    const update = obj;
-    update.value_system = units.length > 0 ? units[uIdx].key : '';
-    this.props.onClick(keyLayer, update);
-  }
-
-  views() {
-    const {
-      layer, selectOptions, id, layers, canUpdate
-    } = this.props;
-    const { cols, fields, key } = layer;
-    const perRow = cols || 1;
-    const col = Math.floor(12 / perRow);
-    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
-    const vs = [];
-    let op = [];
-    let newRow = 0;
-    let rowId = 1;
-    (fields || []).forEach((f, i) => {
-      if (ShowProperties(f, layers)) {
-        const unit = genUnits(f.option_layers)[0] || {};
-        const tabCol = (f.cols || 1) * 1;
-        const rCol = (f.type === 'table') ? (12 / (tabCol || 1)) : col;
-        newRow = (f.type === 'table') ? newRow += (perRow / (tabCol || 1)) : newRow += 1;
-
-        if (newRow > perRow) {
-          vs.push(<Row key={rowId}>{op}</Row>);
-          rowId += 1;
-          op = [];
-          newRow = (f.type === 'table') ? newRow = (perRow / (tabCol || 1)) : newRow = 1;
-        }
-        const eachCol = (
-          <Col key={`prop_${key}_${f.priority}_${f.field}`} md={rCol} lg={rCol} className={f.type === 'table' ? '' : klaz}>
-            <GenProperties
-              key={`${id}_${layer}_${f.field}_GenPropertiesLayer`}
-              layers={layers}
-              id={id}
-              layer={layer}
-              f_obj={f}
-              label={f.label}
-              value={f.value || ''}
-              description={f.description || ''}
-              type={f.type || 'text'}
-              field={f.field || 'field'}
-              formula={f.formula || ''}
-              options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
-              onChange={event => this.handleChange(event, f.field, key, f.type)}
-              onSubChange={this.handleSubChange}
-              isEditable
-              readOnly={!canUpdate || false}
-              isRequired={f.required || false}
-              placeholder={f.placeholder || ''}
-              option_layers={f.option_layers}
-              value_system={f.value_system || unit.key}
-              onClick={() => this.handleClick(key, f, (f.value_system || unit.key))}
-            />
-          </Col>
-        );
-        op.push(eachCol);
-        if (newRow % perRow === 0) newRow = 0;
-        if ((newRow === 0) || (fields.length === (i + 1))) {
-          vs.push(<Row key={rowId}>{op}</Row>);
-          rowId += 1;
-          op = [];
-        }
-      } else if (fields.length === (i + 1)) {
-        vs.push(<Row key={rowId}>{op}</Row>);
-        rowId += 1;
-        op = [];
-      }
-    });
-    return vs;
-  }
-
-  render() {
-    let bs = this.props.layer.color ? this.props.layer.color : 'default';
-    const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
-    if (bs === 'none') bs = 'default';
-    const cl = this.props.layer.style ? this.props.layer.style : 'panel_generic_heading';
-    const panelHeader = this.props.layer.label === '' ? (<span />) : (
-      <Panel.Heading className={cl} >
-        <Panel.Title toggle>{this.props.layer.label}</Panel.Title>
-      </Panel.Heading>
-    );
-    return (
-      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
-        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
-          {panelHeader}
-          <Panel.Collapse>
-            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </PanelGroup>
-    );
-  }
-}
-
-GenPropertiesLayer.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  layer: PropTypes.object,
-  selectOptions: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onSubChange: PropTypes.func.isRequired,
-  onClick: PropTypes.func,
-  layers: PropTypes.object.isRequired,
-  canUpdate: PropTypes.bool
-};
-
-GenPropertiesLayer.defaultProps = {
-  id: 0, selectOptions: {}, onClick: () => {}, canUpdate: true
-};
-
-class GenPropertiesLayerSearchCriteria extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSubChange = this.handleSubChange.bind(this);
-  }
-
-  handleChange(e, f, k, t) {
-    this.props.onChange(e, f, k, t);
-  }
-
-  handleSubChange(e, id, f) {
-    const sub = f.sub_fields.find(m => m.id === id);
-    if (e.type === 'system-defined') {
-      const units = genUnits(e.option_layers);
-      let uIdx = units.findIndex(u => u.key === e.value_system);
-      if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-      sub.value_system = units.length > 0 ? units[uIdx].key : '';
-      sub.value = unitConversion(e.option_layers, sub.value_system, e.value);
-    } else {
-      sub.value = e.target.value;
-    }
-    const { layer } = this.props;
-    const obj = { f, sub };
-    this.props.onSubChange(layer.key, obj);
-  }
-
-  views() {
-    const { layer, selectOptions, layers } = this.props;
-    const { cols, fields, key } = layer;
-    const perRow = cols || 1;
-    const col = Math.floor(12 / perRow);
-    const klaz = (12 % perRow) > 0 ? 'g_col_w' : '';
-    const vs = [];
-    let op = [];
-    (fields || []).forEach((f, i) => {
-      const unit = genUnits(f.option_layers)[0] || {};
-      const eCol = (
-        <Col key={`prop_${key}_${f.priority}_${f.field}`} md={col} lg={col} className={klaz}>
-          <GenPropertiesSearch
-            f_obj={f}
-            label={f.label}
-            value={f.value || ''}
-            type={f.type || 'text'}
-            field={f.field || 'field'}
-            options={(selectOptions && selectOptions[f.option_layers] && selectOptions[f.option_layers].options) || []}
-            onChange={event => this.handleChange(event, f.field, key, f.type)}
-            onSubChange={this.handleSubChange}
-            option_layers={f.option_layers}
-            value_system={f.value_system || unit.key}
-            isEditable
-            readOnly={false}
-            isRequired={false}
-            layers={layers}
-          />
-        </Col>
-      );
-      op.push(eCol);
-      if (((i + 1) % perRow === 0) || (fields.length === (i + 1))) {
-        vs.push(<Row key={`prop_row_${key}_${f.priority}_${f.field}`}>{op}</Row>);
-        op = [];
-      }
-    });
-    return vs;
-  }
-
-  render() {
-    return (
-      <Panel className="panel_generic_properties" defaultExpanded>
-        <Panel.Heading><Panel.Title toggle>{this.props.layer.label}</Panel.Title></Panel.Heading>
-        <Panel.Collapse><Panel.Body>{this.views()}</Panel.Body></Panel.Collapse>
-      </Panel>
-    );
-  }
-}
-
-GenPropertiesLayerSearchCriteria.propTypes = {
-  layer: PropTypes.object,
-  selectOptions: PropTypes.object,
-  onSubChange: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  layers: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-GenPropertiesLayerSearchCriteria.defaultProps = {
-  selectOptions: {}
-};
-
-const LayersLayout = (layers, options, funcChange, funcSubChange = () => {}, funcClick = () => {}, layout = [], id = 0, canUpdate = false) => {
-  const sortedLayers = sortBy(layers, l => l.position) || [];
-  sortedLayers.forEach((layer) => {
-    if (typeof layer.cond_fields === 'undefined' || layer.cond_fields == null || layer.cond_fields.length === 0) {
-      const ig = (
-        <GenPropertiesLayer
-          id={id}
-          key={layer.key}
-          layer={layer}
-          onChange={funcChange}
-          onSubChange={funcSubChange}
-          selectOptions={options}
-          onClick={funcClick}
-          layers={layers}
-          canUpdate={canUpdate}
-        />
-      );
-      layout.push(ig);
-    } else if (layer.cond_fields && layer.cond_fields.length > 0) {
-      let showLayer = false;
-
-      for (let i = 0; i < layer.cond_fields.length; i += 1) {
-        const cond = layer.cond_fields[i] || {};
-        const fd = ((layers[cond.layer] || {}).fields || []).find(f => f.field === cond.field) || {};
-        if (fd.type === 'checkbox' && ((['false', 'no', 'f', '0'].includes((cond.value || '').trim().toLowerCase()) && (typeof (fd && fd.value) === 'undefined' || fd.value === false)) ||
-        (['true', 'yes', 't', '1'].includes((cond.value || '').trim().toLowerCase()) && (typeof fd.value !== 'undefined' && fd.value === true)))) {
-          showLayer = true;
-          break;
-        } else if (['text', 'select'].includes(fd.type) && (typeof (fd && fd.value) !== 'undefined' && (fd.value || '').trim() == (cond.value || '').trim())) {
-          showLayer = true;
-          break;
-        }
-      }
-
-      if (showLayer === true) {
-        const igs = (
-          <GenPropertiesLayer
-            id={id}
-            key={layer.key}
-            layer={layer}
-            onChange={funcChange}
-            onSubChange={funcSubChange}
-            selectOptions={options}
-            onClick={funcClick}
-            layers={layers}
-            canUpdate={canUpdate}
-          />
-        );
-        layout.push(igs);
-      }
-    }
-  });
-
-  return layout;
-};
-
-export {
-  LayersLayout,
-  GenProperties,
-  UploadInputChange,
-  GenPropertiesLayer,
-  GenPropertiesLayerSearchCriteria
-};
diff --git a/app/packs/src/components/generic/GenericElCriteriaModal.js b/app/packs/src/components/generic/GenericElCriteriaModal.js
deleted file mode 100644
index 1be467b89..000000000
--- a/app/packs/src/components/generic/GenericElCriteriaModal.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-
-function GenericElCriteriaModal(props) {
-  const Component = props.component;
-  if (!props.show) return (<span />);
-  return (
-    <Modal
-      dialogClassName="generic_criteria_modal"
-      animation={false}
-      show={props.show}
-      onHide={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>
-          {props.title}
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        {Component}
-      </Modal.Body>
-    </Modal>
-  );
-}
-
-GenericElCriteriaModal.propTypes = {
-  show: PropTypes.bool,
-  component: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.element
-  ]),
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  onHide: PropTypes.func,
-};
-
-GenericElCriteriaModal.defaultProps = {
-  show: false,
-  component: null,
-  title: '',
-  onHide: () => {}
-};
-
-export default GenericElCriteriaModal;
diff --git a/app/packs/src/components/generic/GenericElDropTarget.js b/app/packs/src/components/generic/GenericElDropTarget.js
deleted file mode 100644
index 3cee94c35..000000000
--- a/app/packs/src/components/generic/GenericElDropTarget.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { DropTarget } from 'react-dnd';
-import Aviator from 'aviator';
-import { Tooltip, OverlayTrigger, Popover } from 'react-bootstrap';
-import UIStore from '../stores/UIStore';
-
-const handleSampleClick = (type, id) => {
-  const { currentCollection, isSync } = UIStore.getState();
-  if (!isNaN(id)) type += `/${id}`;
-  const collectionUrl = `${currentCollection.id}/${type}`;
-  Aviator.navigate(isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`);
-};
-
-const show = (opt, iconClass) => {
-  if (opt.value && opt.value.el_id) {
-    const tips = opt.value.el_tip && opt.value.el_tip.split('@@');
-    const tip1 = (tips && tips.length >= 1 && tips[0]) || '';
-    const tip2 = (tips && tips.length >= 2 && tips[1]) || '';
-    const tit = (<div>{tip1}<br />{tip2}</div>);
-    const pop = (
-      <Popover id="popover-svg" title={tit} style={{ maxWidth: 'none', maxHeight: 'none' }}>
-        <img src={opt.value.el_svg} style={{ height: '26vh', width: '26vh' }} alt="" />
-      </Popover>
-    );
-    let label = opt.value.el_label;
-    const simg = (path, tip, txt) => ((path && path !== '') ? (
-      <div className="s-img">
-        <OverlayTrigger trigger={['hover']} placement="left" rootClose onHide={null} overlay={pop}>
-          <img src={path} alt="" />
-        </OverlayTrigger>&nbsp;<span className="data">{txt}</span>
-      </div>
-    ) : (<OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>{tip1}<br />{tip2}</Tooltip>}><div className="data">{txt}</div></OverlayTrigger>));
-    if (opt.value.el_type === 'sample') {
-      if (opt.value.is_new !== true) {
-        label = (
-          <a role="link" onClick={() => handleSampleClick(opt.value.el_type, opt.value.el_id)} style={{ cursor: 'pointer' }}>
-            <span className="reaction-material-link">{label}</span>
-          </a>
-        );
-      }
-    }
-    return simg(opt.value.el_svg, opt.value.el_tip, label);
-  }
-  return (<span className={`icon-${iconClass} indicator`} />);
-};
-
-const source = (type, props, id) => {
-  let isAssoc = false;
-  const taggable = (props && props.tag && props.tag.taggable_data) || {};
-  if (taggable.element && taggable.element.id === id) {
-    isAssoc = false;
-  } else {
-    isAssoc = !!(taggable.reaction_id || taggable.wellplate_id || taggable.element);
-  }
-
-  switch (type) {
-    case 'molecule':
-      return {
-        el_id: props.molecule.id,
-        el_type: 'molecule',
-        el_label: props.molecule_name_label,
-        el_tip: `${props.molecule.inchikey}@@${props.molecule.cano_smiles}`,
-      };
-    case 'sample':
-      return {
-        el_id: props.id,
-        is_new: true,
-        cr_opt: isAssoc == true ? 1 : 0,
-        isAssoc,
-        el_type: 'sample',
-        el_label: props.short_label,
-        el_tip: props.short_label,
-      };
-    default:
-      return {
-        el_id: props.id,
-        is_new: true,
-        cr_opt: 0,
-        el_type: props.type,
-        el_label: props.short_label,
-        el_tip: props.short_label,
-      };
-  }
-};
-
-const dropTarget = {
-  drop(targetProps, monitor) {
-    const sourceProps = monitor.getItem().element;
-    const sourceTag = source(targetProps.opt.type.split('_')[1], sourceProps, targetProps.opt.id);
-    targetProps.onDrop(sourceTag);
-  },
-  canDrop(targetProps, monitor) {
-    return true;
-  },
-};
-
-const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class GenericElDropTarget extends Component {
-  render() {
-    const {
-      connectDropTarget, isOver, canDrop, opt
-    } = this.props;
-    const iconClass = (opt.dndItems && opt.dndItems[0] === 'molecule' ? 'sample' : opt.dndItems[0]);
-    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}>{show(opt, iconClass)}</div>);
-  }
-}
-
-export default
-DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElDropTarget);
-
-GenericElDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/components/generic/GenericElTableDropTarget.js b/app/packs/src/components/generic/GenericElTableDropTarget.js
deleted file mode 100644
index acd39b633..000000000
--- a/app/packs/src/components/generic/GenericElTableDropTarget.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { DropTarget } from 'react-dnd';
-import { Tooltip, OverlayTrigger, Popover, Button } from 'react-bootstrap';
-import { previewAttachmentImage } from '../utils/imageHelper';
-
-const base = (opt, iconClass, onDrop = () => {}, params = {}) => {
-  if (opt.value && opt.value.el_id) {
-    const label = opt.value.el_label;
-    const svg = (opt.value.el_svg && opt.value.el_svg.endsWith('.svg')) ? opt.value.el_svg : previewAttachmentImage({});
-    const pop = (
-      <Popover id="popover-svg" title={label} style={{ maxWidth: 'none', maxHeight: 'none' }}>
-        <img src={svg} style={{ height: '26vh', width: '26vh' }} alt="" />
-      </Popover>
-    );
-    const simg = (path, txt) => ((path && path !== '') ? (
-      <div className="s-img">
-        <OverlayTrigger delayShow={1000} trigger={['hover']} placement="top" rootClose onHide={null} overlay={pop}>
-          <img className="generic_grid_img" src={path} alt="" />
-        </OverlayTrigger>
-        <div className="del_btn">
-          <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()}>remove this molecule</Tooltip>}>
-            <Button className="btn_del" bsSize="xsmall" onClick={() => onDrop({}, params)} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
-          </OverlayTrigger>
-        </div>
-      </div>
-    ) : (<div className="data" style={{ width: '4vw' }}>{txt}</div>));
-    return simg(svg, label);
-  }
-  return (<span className={`icon-${iconClass} indicator`} style={{ width: '4vw' }} />);
-};
-
-const show = (opt, iconClass, onDrop) => {
-  if (opt.type === 'table') {
-    const sField = opt.sField || {};
-    const subVal = opt.data[sField.id];
-    const { data } = opt;
-    return base(subVal, iconClass, onDrop, { sField, data });
-  }
-  return base(opt, iconClass);
-};
-
-const source = (type, props, id) => {
-  let isAssoc = false;
-  const taggable = (props && props.tag && props.tag.taggable_data) || {};
-  if (taggable.element && taggable.element.id === id) {
-    isAssoc = false;
-  } else {
-    isAssoc = !!(taggable.reaction_id || taggable.wellplate_id || taggable.element);
-  }
-
-  switch (type) {
-    case 'molecule':
-      return {
-        el_id: props.molecule.id,
-        el_type: 'molecule',
-        el_label: props.molecule.cano_smiles || props.molecule_formula || props.molecule_name_label,
-        el_inchikey: props.molecule.inchikey,
-        el_smiles: props.molecule.cano_smiles,
-        el_iupac: props.molecule.iupac_name,
-        el_molecular_weight: props.molecule.molecular_weight,
-        el_svg: `/images/molecules/${props.molecule.molecule_svg_file}`,
-      };
-    case 'sample':
-      return {
-        el_id: props.id,
-        is_new: true,
-        cr_opt: 1,
-        isAssoc,
-        el_type: 'sample',
-        el_label: props.short_label,
-        el_short_label: props.short_label,
-        el_name: props.name,
-        el_external_label: props.external_label,
-        el_molecular_weight: props.molecule_molecular_weight,
-        el_svg: props.sample_svg_file ? `/images/samples/${props.sample_svg_file}` : `/images/molecules/${props.molecule.molecule_svg_file}`,
-      };
-    default:
-      return {
-        el_id: props.id,
-        is_new: true,
-        cr_opt: 0,
-        el_type: props.type,
-        el_label: props.short_label,
-      };
-  }
-};
-
-const dropTarget = {
-  drop(targetProps, monitor) {
-    const sourceProps = monitor.getItem().element;
-    const type = targetProps.opt.sField.type.split('_')[1];
-    const sourceTag = source(type, sourceProps, targetProps.opt.id);
-    targetProps.onDrop(sourceTag, targetProps.opt);
-  },
-  canDrop(targetProps, monitor) {
-    return true;
-  },
-};
-
-const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-class GenericElTableDropTarget extends Component {
-  render() {
-    const {
-      connectDropTarget, isOver, canDrop, opt, onDrop
-    } = this.props;
-    const className = `target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className} style={{ display: 'inline-flex', justifyContent: 'center' }}>{show(opt, 'sample', onDrop)}</div>);
-  }
-}
-
-export default
-DropTarget(props => props.opt.dndItems, dropTarget, dropCollect)(GenericElTableDropTarget);
-
-GenericElTableDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-  opt: PropTypes.object.isRequired,
-  onDrop: PropTypes.func
-};
-
-GenericElTableDropTarget.defaultProps = { onDrop: () => {} };
diff --git a/app/packs/src/components/generic/GenericElementLabels.js b/app/packs/src/components/generic/GenericElementLabels.js
deleted file mode 100644
index fd353b9ba..000000000
--- a/app/packs/src/components/generic/GenericElementLabels.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { Label, Modal, Button } from 'react-bootstrap';
-import ElementActions from '../actions/ElementActions';
-import ElementStore from '../stores/ElementStore';
-import UserStore from '../stores/UserStore';
-
-export default class GenericElementLabels extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { showWarning: false, clicked: false };
-    this.handleOnClick = this.handleOnClick.bind(this);
-    this.closeWarning = this.closeWarning.bind(this);
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    ElementStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    ElementStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    if (this.state.showWarning !== state.elementWarning) {
-      this.setState({ showWarning: state.elementWarning });
-    }
-  }
-
-  closeWarning() {
-    this.setState({ showWarning: false });
-    ElementActions.closeWarning();
-  }
-
-  handleOnClick(e) {
-    const { element } = this.props;
-    const elInfo = element.tag.taggable_data.element || {};
-    ElementActions.tryFetchGenericElById(elInfo.id);
-    this.setState({ clicked: true });
-    e.stopPropagation();
-  }
-
-  render() {
-    const { element } = this.props;
-    if (!element.tag || !element.tag.taggable_data || !element.tag.taggable_data.element) {
-      return (<span />);
-    }
-    const elInfo = element.tag.taggable_data.element;
-    const klasses = UserStore.getState().genericEls;
-    const klass = (klasses && klasses.find(el => el.name === elInfo.type)) || {};
-    const { showWarning, clicked } = this.state;
-    return (
-      <div style={{ display: 'inline-block' }}>
-        <div onClick={this.handleOnClick}>
-          <span className="collection-label" key={element.id}>
-            <Label><i className={`${klass.icon_name}`} /></Label>
-          </span>
-        </div>
-        <div className="center">
-          <Modal show={showWarning && clicked} onHide={this.closeWarning}>
-            <Modal.Header closeButton>
-              <Modal.Title>No Access to Element</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>Sorry, you cannot access this Element.</Modal.Body>
-            <Modal.Footer>
-              <Button onClick={this.closeWarning}>Close</Button>
-            </Modal.Footer>
-          </Modal>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/generic/GenericPropertiesFields.js b/app/packs/src/components/generic/GenericPropertiesFields.js
deleted file mode 100644
index 21a1a1d72..000000000
--- a/app/packs/src/components/generic/GenericPropertiesFields.js
+++ /dev/null
@@ -1,391 +0,0 @@
-import React from 'react';
-import { Checkbox, FormGroup, FormControl, Button, Tooltip, OverlayTrigger, InputGroup, Radio, Modal, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import { filter } from 'lodash';
-import Select from 'react-select';
-import Dropzone from 'react-dropzone';
-import GenericElDropTarget from './GenericElDropTarget';
-import { genUnit, genUnitSup, FieldLabel, unitConvToBase } from '../../admin/generic/Utils';
-import TableRecord from './TableRecord';
-import Utils from '../utils/Functions';
-
-const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
-const GenTextFormula = (opt) => {
-  const { layers } = opt;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  const subs = [];
-  (opt.f_obj && opt.f_obj.text_sub_fields).map((e) => {
-    const { layer, field, separator } = e;
-    if (field && field !== '') {
-      if (field.includes('[@@]')) {
-        const fds = field.split('[@@]');
-        if (fds && fds.length === 2) {
-          const fdt = ((layers[layer] || {}).fields || []).find(f => f.field === fds[0] && f.type === 'table');
-          ((fdt && fdt.sub_values) || []).forEach((svv) => {
-            if (svv && svv[fds[1]] && svv[fds[1]] !== '') { subs.push(svv[fds[1]]); subs.push(separator); }
-          });
-        }
-      } else {
-        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field);
-        if (fd && fd.value && fd.value !== '') { subs.push(fd.value); subs.push(separator); }
-      }
-    }
-    return true;
-  });
-  return (
-    <FormGroup className="text_generic_properties">
-      {fieldHeader}
-      <FormControl
-        type="text"
-        value={subs.join('')}
-        className="readonly"
-        readOnly
-        required={false}
-      />
-    </FormGroup>
-  );
-};
-
-const GenDummy = () => (
-  <FormGroup className="text_generic_properties">
-    <FormControl type="text" className="dummy" readOnly />
-  </FormGroup>
-);
-
-const GenPropertiesTextArea = (opt) => {
-  let className = opt.isEditable ? 'editable' : 'readonly';
-  className = opt.isRequired && opt.isEditable ? 'required' : className;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup className="text_generic_properties">
-      {fieldHeader}
-      <FormControl
-        componentClass="textarea"
-        value={opt.value}
-        onChange={opt.onChange}
-        className={className}
-        readOnly={opt.readOnly}
-        required={opt.isRequired}
-        placeholder={opt.placeholder}
-      />
-    </FormGroup>
-  );
-};
-
-const renderListGroupItem = (opt, attachment) => {
-  const delBtn = (
-    <Button bsSize="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
-      <i className="fa fa-times" aria-hidden="true" />
-    </Button>
-  );
-  const filename = attachment.aid ? (<a onClick={() => Utils.downloadFile({ contents: `/api/v1/attachments/${attachment.aid}`, name: attachment.filename })} style={{ cursor: 'pointer' }}>{attachment.filename}</a>) : attachment.filename;
-  return (
-    <div className="generic_grid">
-      <div>
-        <div>{delBtn}</div>
-        <div className="generic_grid_row">{filename}</div>
-        <div className="generic_grid_row">
-          <FormGroup bsSize="small">
-            <FormControl
-              type="text"
-              value={attachment.label || ''}
-              onChange={e => opt.onChange({
-                ...opt.value, action: 'l', uid: attachment.uid, val: e
-              })}
-            />
-          </FormGroup>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const GenPropertiesUpload = (opt) => {
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  const attachments = (opt.value && opt.value.files) || [];
-  if (opt.isSearchCriteria) return (<div>(This is an upload)</div>);
-
-  return (
-    <FormGroup className="text_generic_properties">
-      {fieldHeader}
-      <FormControl.Static style={{ paddingBottom: '0px' }}>
-        <Dropzone
-          id="dropzone"
-          onDrop={e => opt.onChange({
-            ...opt.value, action: 'f', val: e
-          })}
-          style={{ height: 30, width: '100%', border: '3px dashed lightgray' }}>
-          <div style={{ textAlign: 'center', paddingTop: 6, color: 'gray' }}>
-            Drop File, or Click to Select.
-          </div>
-        </Dropzone>
-      </FormControl.Static>
-      <ListGroup>
-        {attachments.map(attachment => (
-          <ListGroupItem key={attachment.id} className="generic_files">
-            {renderListGroupItem(opt, attachment)}
-          </ListGroupItem>
-          ))}
-      </ListGroup>
-    </FormGroup>
-  );
-};
-
-const GenPropertiesText = (opt) => {
-  let className = opt.isEditable ? 'editable' : 'readonly';
-  className = opt.isRequired && opt.isEditable ? 'required' : className;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup className="text_generic_properties">
-      {fieldHeader}
-      <FormControl
-        type="text"
-        value={opt.value}
-        onChange={opt.onChange}
-        className={className}
-        readOnly={opt.readOnly}
-        required={opt.isRequired}
-        placeholder={opt.readOnly ? '' : opt.placeholder}
-      />
-    </FormGroup>
-  );
-};
-
-const GenPropertiesCheckbox = opt => (
-  <FormGroup>
-    <Checkbox
-      name={opt.field}
-      checked={opt.value}
-      onChange={opt.onChange}
-      disabled={opt.readOnly}
-    >
-      <FormControl.Static>{opt.label}</FormControl.Static>
-    </Checkbox>
-  </FormGroup>
-);
-
-const GenPropertiesSelect = (opt) => {
-  const options = opt.options.map(op => ({ value: op.key, name: op.key, label: op.label }));
-  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
-  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
-  className = `${className} status-select`;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <Select
-        isClearable
-        menuContainerStyle={{ position: 'absolute' }}
-        name={opt.field}
-        multi={false}
-        options={options}
-        value={opt.value}
-        onChange={opt.onChange}
-        className={className}
-        disabled={opt.readOnly}
-      />
-    </FormGroup>
-  );
-};
-
-const GenPropertiesCalculate = (opt) => {
-  const fields = (opt.layer && opt.layer.fields) || [];
-  let showVal = 0;
-  let showTxt = null;
-  let newFormula = opt.formula;
-
-  const calFields = filter(fields, o => (o.type === 'integer' || o.type === 'system-defined'));
-  const regF = /[a-zA-Z0-9]+/gm;
-  // eslint-disable-next-line max-len
-  const varFields = (opt.formula && opt.formula.match(regF)) ? opt.formula.match(regF).sort((a, b) => b.length - a.length) : [];
-
-  varFields.forEach((fi) => {
-    if (!isNaN(fi)) return;
-
-    const tmpField = calFields.find(e => e.field === fi);
-    if (typeof tmpField === 'undefined' || tmpField == null) {
-      newFormula = newFormula.replace(fi, 0);
-    } else {
-      newFormula = (tmpField.type === 'system-defined') ? newFormula.replace(fi, parseFloat(unitConvToBase(tmpField) || 0)) : newFormula.replace(fi, parseFloat(tmpField.value || 0));
-    }
-  });
-
-  if (opt.type === 'formula-field') {
-    try {
-      showVal = eval(newFormula);
-      showTxt = !isNaN(showVal) ? parseFloat(showVal.toFixed(5)) : 0;
-    } catch (e) {
-      if (e instanceof SyntaxError) {
-        showTxt = e.message;
-      }
-    }
-  }
-
-  const fieldHeader = opt.label === '' ? null : (<FieldLabel label={opt.label} desc={opt.description} />);
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <InputGroup>
-        <FormControl
-          type="text"
-          value={showTxt}
-          onChange={opt.onChange}
-          className="readonly"
-          readOnly="readonly"
-          required={false}
-          placeholder={opt.placeholder}
-          min={0}
-        />
-        <InputGroup.Button>
-          <OverlayTrigger
-            placement="bottom"
-            overlay={<Tooltip id="update_calculation_field">adjust</Tooltip>}
-          >
-            <Button active className="clipboardBtn" onClick={() => opt.onChange(showTxt)}>
-              <i className="fa fa-arrow-right" aria-hidden="true" />
-            </Button>
-          </OverlayTrigger>
-        </InputGroup.Button>
-        <FormControl
-          type="text"
-          value={opt.value}
-          onChange={opt.onChange}
-          required={false}
-          placeholder={opt.placeholder}
-          min={0}
-        />
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const GenPropertiesNumber = (opt) => {
-  let className = opt.isEditable ? 'editable' : 'readonly';
-  className = opt.isRequired && opt.isEditable ? 'required' : className;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <FormControl
-        type="number"
-        value={opt.value}
-        onChange={opt.onChange}
-        className={className}
-        readOnly={opt.readOnly}
-        required={opt.isRequired}
-        placeholder={opt.placeholder}
-        min={1}
-      />
-    </FormGroup>
-  );
-};
-
-const GenPropertiesSystemDefined = (opt) => {
-  let className = opt.isEditable ? 'editable' : 'readonly';
-  className = opt.isRequired && opt.isEditable ? 'required' : className;
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <InputGroup>
-        <FormControl
-          type="number"
-          value={opt.value}
-          onChange={opt.onChange}
-          className={className}
-          readOnly={opt.readOnly}
-          required={opt.isRequired}
-          placeholder={opt.placeholder}
-          min={1}
-        />
-        <InputGroup.Button>
-          <Button disabled={opt.readOnly} active onClick={opt.onClick} bsStyle="success">
-            {genUnitSup(genUnit(opt.option_layers, opt.value_system).label) || ''}
-          </Button>
-        </InputGroup.Button>
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const GenPropertiesTable = (opt) => {
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <TableRecord key={`grid_${opt.f_obj.field}`} opt={opt} />
-    </FormGroup>
-  );
-};
-
-const GenPropertiesInputGroup = (opt) => {
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-  const fLab = e => <div key={uuid.v4()} className="form-control g_input_group_label">{e.value}</div>;
-  const fTxt = e => <FormControl className="g_input_group" key={e.id} type={e.type} name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} />;
-  const fUnit = e => (
-    <span key={`${e.id}_GenPropertiesInputGroup`} className="input-group" style={{ width: '100%' }}>
-      <FormControl key={e.id} type="number" name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} min={1} />
-      <InputGroup.Button>
-        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} bsStyle="success">
-          {genUnitSup(genUnit(e.option_layers, e.value_system).label) || ''}
-        </Button>
-      </InputGroup.Button>
-    </span>
-  );
-  const subs = opt.f_obj && opt.f_obj.sub_fields && opt.f_obj.sub_fields.map((e) => {
-    if (e.type === 'label') { return fLab(e); } if (e.type === 'system-defined') { return fUnit(e); } return fTxt(e);
-  });
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <InputGroup style={{ display: 'flex' }}>
-        {subs}
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const GenPropertiesDrop = (opt) => {
-  const className = opt.isRequired ? 'drop_generic_properties field_required' : 'drop_generic_properties';
-
-  let createOpt = null;
-  if (opt.value.is_new === true) {
-    createOpt = (
-      <div className="sample_radios">
-        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>associate with this sample</Tooltip>}>
-          <Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</Radio>
-        </OverlayTrigger>
-        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>split from the sample first and then associate with it</Tooltip>}>
-          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</Radio>
-        </OverlayTrigger>
-        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>duplicate the sample first and then associate with it</Tooltip>}>
-          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</Radio>
-        </OverlayTrigger>
-      </div>
-    );
-  }
-  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
-
-  return (
-    <FormGroup>
-      {fieldHeader}
-      <FormControl.Static style={{ paddingBottom: '0px' }}>
-        <div className={className}>
-          <GenericElDropTarget opt={opt} onDrop={opt.onChange} />
-          {createOpt}
-          <div>
-            <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()}>remove</Tooltip>}>
-              <Button className="btn_del" bsStyle="danger" bsSize="xsmall" onClick={() => opt.onChange({})} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </FormControl.Static>
-    </FormGroup>
-  );
-};
-
-export {
-  GenPropertiesText, GenPropertiesCheckbox, GenPropertiesSelect, GenPropertiesCalculate,
-  GenPropertiesNumber, GenPropertiesSystemDefined, GenPropertiesInputGroup, GenPropertiesDrop,
-  GenPropertiesTextArea, GenDummy, GenPropertiesUpload, GenTextFormula, GenPropertiesTable
-};
diff --git a/app/packs/src/components/generic/GridBtn.js b/app/packs/src/components/generic/GridBtn.js
deleted file mode 100644
index 6b7c1f4ea..000000000
--- a/app/packs/src/components/generic/GridBtn.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import GridDnD from './GridDnD';
-
-const AddRowBtn = ({ addRow }) => (
-  <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()} >add entry</Tooltip>}>
-    <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
-  </OverlayTrigger>
-);
-
-AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
-
-const DelRowBtn = ({ delRow, node }) => {
-  const { data } = node;
-  return (
-    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid.v4()} >remove</Tooltip>}>
-      <Button onClick={() => delRow(data)} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>
-    </OverlayTrigger>);
-};
-
-DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
-
-const NullRowBtn = () => (<div className="grid-btn-none"><span className="fa fa-arrows" /></div>);
-
-const DnDRowBtn = ({
-  moveRow, field, type, node
-}) => (
-  <GridDnD field={field} type={type} rowValue={node.data} handleMove={moveRow} />
-);
-
-DnDRowBtn.propTypes = {
-  moveRow: PropTypes.func.isRequired,
-  field: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  node: PropTypes.object.isRequired
-};
-export { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn };
diff --git a/app/packs/src/components/generic/GridDnD.js b/app/packs/src/components/generic/GridDnD.js
deleted file mode 100644
index f2166646a..000000000
--- a/app/packs/src/components/generic/GridDnD.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-
-const orderSource = {
-  beginDrag(props) {
-    const { field, rowValue } = props;
-    return { fid: field, rId: rowValue.id };
-  },
-};
-
-const orderTarget = {
-  drop(props, monitor) {
-    const { field, rowValue, handleMove } = props;
-    const tar = { fid: field, rId: rowValue.id };
-    const src = monitor.getItem();
-    if (tar.fid === src.fid && tar.rId !== src.rId) handleMove(src.rId, tar.rId);
-  },
-};
-
-const orderDragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const orderDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const GridDnD = ({
-  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
-}) => {
-  const className = `generic_grid_dnd${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}${isDragging ? ' is-dragging' : ''}`;
-  return compose(connectDragSource, connectDropTarget)(<div className={className}><div className="dnd-btn"><span className="text-info fa fa-arrows" /></div></div>);
-};
-
-export default compose(
-  DragSource(s => s.type, orderSource, orderDragCollect),
-  DropTarget(s => s.type, orderTarget, orderDropCollect)
-)(GridDnD);
diff --git a/app/packs/src/components/generic/GridEntry.js b/app/packs/src/components/generic/GridEntry.js
deleted file mode 100644
index b5e05fd40..000000000
--- a/app/packs/src/components/generic/GridEntry.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import { FormControl, InputGroup } from 'react-bootstrap';
-
-const setCell = (columnDef, rowValue) => {
-  const {
-    type, field, onCellChange, cellRenderer, cellParams
-  } = columnDef;
-  switch (type) {
-    case 'text':
-      return (
-        <FormControl type="text" value={rowValue[field] || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
-      );
-    case 'system-defined':
-      return (
-        <InputGroup>
-          <FormControl type="number" value={rowValue[field].value || ''} onChange={e => onCellChange({ e, columnDef, rowValue })} />
-          <InputGroup.Button>
-            {cellRenderer({ ...cellParams, node: { data: rowValue } })}
-          </InputGroup.Button>
-        </InputGroup>
-      );
-    case 'drag_molecule':
-    case 'drag_sample':
-    case 'dnd':
-      return (cellRenderer({ ...cellParams, node: { data: rowValue } }));
-    default:
-      return <span />;
-  }
-};
-
-const ColumnHeader = (columnDefs) => {
-  const ch = [];
-  const h = (col, idx) => {
-    const {
-      width, headerName, headerComponent, headerParams
-    } = col;
-    const colCss = {};
-    if (width) { Object.assign(colCss, { width, minWidth: width }); }
-    return (
-      <div key={`column_header_${col.colId || col.field}_${idx}`} className="generic_grid_header" style={colCss}>
-        {headerComponent ? headerComponent(headerParams) : null}
-        <div style={colCss}>{headerName}</div>
-      </div>
-    );
-  };
-  columnDefs.forEach((col, idx) => ch.push(h(col, idx)));
-  return (<div className="generic_grid" style={{ borderBottom: '1px solid #ccc' }}><div>{ch}</div></div>);
-};
-
-const ColumnRow = (columnDefs, rowValue) => {
-  const ch = [];
-  const h = (col, val, idx) => {
-    const {
-      field, width, cellParams, cellRenderer
-    } = col;
-    const colCss = {};
-    if (width) { Object.assign(colCss, { width, minWidth: width }); }
-    return (
-      <div key={`column_row_${val.id}_${col.colId || col.field}_${idx}`} className="generic_grid_row" style={colCss}>
-        {field ? (setCell(col, val) || '') : (cellRenderer({ ...cellParams, node: { data: val } }) || '')}
-      </div>
-    );
-  };
-  columnDefs.forEach((col, idx) => ch.push(h(col, rowValue, idx)));
-  return (<div key={`column_row_${rowValue.id}`} className="generic_grid"><div>{ch}</div></div>);
-};
-
-const NoRow = (values) => {
-  if (values && values.length > 0) return null;
-  return (<div className="generic_grid"><div><div className="generic_grid_row" style={{ width: '100%' }}>(No data)</div></div></div>);
-};
-
-export { ColumnHeader, ColumnRow, NoRow };
diff --git a/app/packs/src/components/generic/GridSelect.js b/app/packs/src/components/generic/GridSelect.js
deleted file mode 100644
index 69fc3fdd2..000000000
--- a/app/packs/src/components/generic/GridSelect.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, FormControl } from 'react-bootstrap';
-
-const GridSelect = (props) => {
-  const {
-    all, onChange, node, dVal
-  } = props;
-  return (
-    <FormGroup bsSize="small" style={{ marginRight: '-10px', marginLeft: '-10px' }}>
-      <FormControl componentClass="select" placeholder="select..." onChange={e => onChange(e, node)} defaultValue={dVal}>
-        {all.map(e => <option key={e.key} value={e.val}>{e.lab}</option>)}
-      </FormControl>
-    </FormGroup>
-  );
-};
-
-GridSelect.propTypes = {
-  all: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    val: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    lab: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })).isRequired,
-  onChange: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-  dVal: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-};
-
-export default GridSelect;
diff --git a/app/packs/src/components/generic/LayerSelect.js b/app/packs/src/components/generic/LayerSelect.js
deleted file mode 100644
index 64a9fe16f..000000000
--- a/app/packs/src/components/generic/LayerSelect.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import GridSelect from './GridSelect';
-
-const LayerSelect = (props) => {
-  const { allLayers, selLayer, node } = props;
-  const all = allLayers.map(e => ({ key: e.key, val: e.key, lab: e.key }));
-  const dVal = node.data.layer;
-  return <GridSelect all={all} onChange={selLayer} node={node} dVal={dVal} />;
-};
-
-LayerSelect.propTypes = {
-  allLayers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selLayer: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-};
-
-export default LayerSelect;
diff --git a/app/packs/src/components/generic/PreviewModal.js b/app/packs/src/components/generic/PreviewModal.js
deleted file mode 100644
index 948ed9ec7..000000000
--- a/app/packs/src/components/generic/PreviewModal.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import Preview from '../../admin/generic/Preview';
-
-export default class PreviewModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { revisions: [] };
-    this.handleClose = this.handleClose.bind(this);
-    this.setRevisions = this.setRevisions.bind(this);
-    this.retriveRevision = this.retriveRevision.bind(this);
-    this.delRevision = this.delRevision.bind(this);
-    this.fetchRevisions = this.fetchRevisions.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { element, showModal } = this.props;
-    if ((showModal !== prevProps.showModal && showModal) || (element.id !== prevProps.element.id)) {
-      this.fetchRevisions();
-    }
-  }
-
-  setRevisions(revisions) {
-    this.setState({ revisions });
-  }
-
-  fetchRevisions() {
-    const { fetcher, fetcherFn, element } = this.props;
-    fetcher[fetcherFn](element.id).then((result) => {
-      (result.revisions || []).map(r => Object.assign(r, { released_at: r.created_at }));
-      this.setState({ revisions: result.revisions });
-    });
-  }
-
-  handleClose() {
-    this.props.fnClose();
-  }
-
-  retriveRevision(revision, cb) {
-    this.props.fnRetrive(revision, cb);
-  }
-
-  delRevision(revision) {
-    this.props.fnDelete({ id: revision.id }, this.fetchRevisions);
-  }
-
-  render() {
-    const { showModal } = this.props;
-    const { revisions } = this.state;
-    return (
-      <Modal backdrop="static" dialogClassName="importChemDrawModal" show={showModal} onHide={() => this.handleClose()}>
-        <Modal.Header closeButton><Modal.Title>History</Modal.Title></Modal.Header>
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div className="col-md-12">
-            <Preview revisions={revisions} fnRetrive={this.retriveRevision} fnDelete={this.delRevision} src="properties" />
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-PreviewModal.propTypes = {
-  showModal: PropTypes.bool.isRequired,
-  fnClose: PropTypes.func.isRequired,
-  fnRetrive: PropTypes.func,
-  element: PropTypes.object,
-  fetcher: PropTypes.func.isRequired,
-  fetcherFn: PropTypes.string.isRequired,
-  fnDelete: PropTypes.func.isRequired
-};
-
-PreviewModal.defaultProps = { element: {}, fnRetrive: () => {} };
diff --git a/app/packs/src/components/generic/SamOption.js b/app/packs/src/components/generic/SamOption.js
deleted file mode 100644
index dfa433af2..000000000
--- a/app/packs/src/components/generic/SamOption.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
-
-const SamOption = (props) => {
-  const { sField, node, onChange } = props;
-  const { data } = node;
-  const fValue = (data[sField.id] && data[sField.id].value) || {};
-  if (!fValue.is_new) return <div />;
-  const rUUID = uuid.v4();
-  return (
-    <div className="generic_sam_options">
-      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>associate with this sample</Tooltip>}>
-        <Radio
-          name={`dropS_${rUUID}`}
-          disabled={fValue.isAssoc}
-          checked={fValue.cr_opt === 0}
-          onChange={() => onChange({ node, subField: sField, crOpt: 0 })}
-        >
-          Current
-        </Radio>
-      </OverlayTrigger>
-      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>split from the sample first and then associate with it</Tooltip>}>
-        <Radio
-          name={`dropS_${rUUID}`}
-          checked={fValue.cr_opt === 1}
-          onChange={() => onChange({ node, subField: sField, crOpt: 1 })}
-        >
-          Split
-        </Radio>
-      </OverlayTrigger>
-      <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid.v4()}>duplicate the sample first and then associate with it</Tooltip>}>
-        <Radio
-          name={`dropS_${rUUID}`}
-          checked={fValue.cr_opt === 2}
-          onChange={() => onChange({ node, subField: sField, crOpt: 2 })}
-        >
-          Copy
-        </Radio>
-      </OverlayTrigger>
-    </div>
-  );
-};
-
-SamOption.propTypes = {
-  sField: PropTypes.object.isRequired,
-  node: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
-export default SamOption;
diff --git a/app/packs/src/components/generic/SystemSelect.js b/app/packs/src/components/generic/SystemSelect.js
deleted file mode 100644
index c24d4fd3a..000000000
--- a/app/packs/src/components/generic/SystemSelect.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import GridSelect from './GridSelect';
-
-const SystemSelect = (props) => {
-  const { unitConfig, selDefined, node } = props;
-  const all = unitConfig.map(e => ({ key: e.value, val: e.value, lab: e.label }));
-  const dVal = node.data.option_layers;
-  return <GridSelect all={all} onChange={selDefined} node={node} dVal={dVal} />;
-};
-
-SystemSelect.propTypes = {
-  unitConfig: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selDefined: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired,
-};
-
-export default SystemSelect;
diff --git a/app/packs/src/components/generic/TableDef.js b/app/packs/src/components/generic/TableDef.js
deleted file mode 100644
index b2a963977..000000000
--- a/app/packs/src/components/generic/TableDef.js
+++ /dev/null
@@ -1,218 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import { AgGridReact } from 'ag-grid-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import GenericSubField from '../models/GenericSubField';
-import { AddRowBtn, DelRowBtn } from './GridBtn';
-import TypeSelect from './TypeSelect';
-import DefinedRenderer from './DefinedRenderer';
-
-export default class TableDef extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      unitConfig: props.unitsFields.map(e => ({ value: e.field, name: e.label, label: e.label }))
-    };
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.delRow = this.delRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-    this.selType = this.selType.bind(this);
-    this.selDefined = this.selDefined.bind(this);
-    this.chkAttr = this.chkAttr.bind(this);
-    this.refresh = this.refresh.bind(this);
-    this.onCellValueChanged = this.onCellValueChanged.bind(this);
-    this.tblType = props.genericType === 'Element' ? ['drag_molecule', 'drag_sample', 'text', 'system-defined'] : ['drag_molecule', 'text', 'system-defined'];
-    this.columnDefs = [
-      {
-        headerName: 'Id',
-        field: 'id',
-        editable: false,
-        minWidth: 50,
-        width: 50,
-      },
-      {
-        headerName: 'Column Heading',
-        field: 'col_name',
-        editable: true,
-        minWidth: 150,
-        width: 150,
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: 'Column Type',
-        field: 'type',
-        editable: false,
-        minWidth: 150,
-        width: 150,
-        cellRendererFramework: TypeSelect,
-        cellRendererParams: { all: this.tblType.map(e => ({ key: e, val: e, lab: e })), selType: this.selType },
-      },
-      {
-        headerName: 'Default Value',
-        field: 'value',
-        editable: (e) => { if (['drag_molecule', 'drag_sample', 'system-defined'].includes(e.data.type)) return false; return true; },
-        minWidth: 350,
-        cellRenderer: 'definedRenderer',
-        cellRendererParams: { unitConfig: this.state.unitConfig, selDefined: this.selDefined, chkAttr: this.chkAttr },
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: 'Option Layers(hidden)',
-        field: 'option_layers',
-        width: 10,
-        hide: true,
-      },
-      {
-        headerName: 'Value System(hidden)',
-        field: 'value_system',
-        width: 10,
-        hide: true,
-      },
-      {
-        headerName: '',
-        colId: 'actions',
-        headerComponentFramework: AddRowBtn,
-        headerComponentParams: { addRow: this.addRow },
-        cellRendererFramework: DelRowBtn,
-        cellRendererParams: { delRow: this.delRow },
-        editable: false,
-        filter: false,
-        minWidth: 48,
-        width: 48,
-        suppressSizeToFit: true,
-        pinned: 'left'
-      },
-    ];
-    this.frameworkComponents = {
-      definedRenderer: DefinedRenderer
-    };
-  }
-
-  componentDidUpdate() {
-    this.autoSizeAll();
-  }
-
-  onGridReady(e) {
-    this.gridApi = e.api;
-    this.autoSizeAll();
-  }
-
-  onCellValueChanged(params) {
-    const { oldValue, newValue } = params;
-    if (oldValue === newValue) return;
-    this.refresh();
-  }
-
-  autoSizeAll() {
-    if (!this.gridApi) return;
-    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
-  }
-
-  delRow() {
-    const selectedData = this.gridApi.getSelectedRows();
-    this.gridApi.applyTransaction({ remove: selectedData });
-    this.refresh();
-  }
-
-  addRow() {
-    const newSub = new GenericSubField({ col_name: '', type: 'text', value: '' });
-    const idx = this.gridApi.getDisplayedRowCount();
-    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
-    this.refresh();
-  }
-
-  selType(e, node) {
-    const { data } = node;
-    if (e.target.value === data.type) { return; }
-    data.type = e.target.value;
-    data.value = '';
-    const { unitConfig } = this.state;
-    if (data.type === 'system-defined') {
-      data.option_layers = (unitConfig || [])[0].value;
-      data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
-        .units || [])[0].key;
-    } else {
-      delete data.option_layers;
-      delete data.value_system;
-    }
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.sub_fields = rows;
-    this.gridApi.setRowData(rows);
-    updSub(layerKey, field, () => {});
-  }
-
-  chkAttr(val, chk, node) {
-    const { data } = node;
-    const search = new RegExp(`${val};`, 'gi');
-    if (chk) {
-      data.value = data.value.concat(`${val};`);
-    } else {
-      data.value = data.value.replace(search, '');
-    }
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.sub_fields = rows;
-    this.gridApi.setRowData(rows);
-    updSub(layerKey, field, () => {});
-  }
-
-  selDefined(e, node) {
-    const { data } = node;
-    if (e.target.value === data.option_layers) { return; }
-    data.option_layers = e.target.value;
-    data.value_system = ((this.props.unitsFields.find(u => u.field === data.option_layers) || {})
-      .units || [])[0].key;
-    this.refresh();
-  }
-
-  refresh() {
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.sub_fields = rows;
-    updSub(layerKey, field, () => {});
-  }
-
-  render() {
-    const { field } = this.props;
-    const sub = field.sub_fields || [];
-    return (
-      <div>
-        <div style={{ fontSize: '10px' }}>
-          <b>Table: </b>
-          define a table with the column type as <b>drag_molecule, drag_sample(only available</b>
-          <b> for generic element), text or system-defined</b>;<br />
-          note: <b>drag_sample</b> stands for Sample and contains at least its image and
-          short label information; <b>system-defined</b> represents the unit field, which
-          has an input field and a unit converter.
-        </div>
-        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
-          <AgGridReact
-            defaultColDef={{ resizable: true }}
-            enableColResize
-            columnDefs={this.columnDefs}
-            rowSelection="single"
-            onGridReady={this.onGridReady}
-            rowData={sub}
-            singleClickEdit
-            stopEditingWhenGridLosesFocus
-            frameworkComponents={this.frameworkComponents}
-            domLayout="autoHeight"
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-TableDef.propTypes = {
-  genericType: PropTypes.string.isRequired,
-  layerKey: PropTypes.string.isRequired,
-  field: PropTypes.object.isRequired,
-  updSub: PropTypes.func.isRequired,
-  unitsFields: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
diff --git a/app/packs/src/components/generic/TableRecord.js b/app/packs/src/components/generic/TableRecord.js
deleted file mode 100644
index 1a0b2e95c..000000000
--- a/app/packs/src/components/generic/TableRecord.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/* eslint-disable no-empty */
-/* eslint-disable react/forbid-prop-types */
-import PropTypes from 'prop-types';
-import React from 'react';
-import Numeral from 'numeral';
-import GenericSubField from '../models/GenericSubField';
-import { AddRowBtn, DelRowBtn, DnDRowBtn, NullRowBtn } from './GridBtn';
-import { ColumnHeader, ColumnRow, NoRow } from './GridEntry';
-import UConverterRenderer from './UConverterRenderer';
-import { genUnits, unitConversion, molOptions, samOptions } from '../../admin/generic/Utils';
-import DropRenderer from './DropRenderer';
-import DropTextRenderer from './DropTextRenderer';
-import DropLinkRenderer from './DropLinkRenderer';
-import SampOption from './SamOption';
-import DragDropItemTypes from '../DragDropItemTypes';
-
-export default class TableRecord extends React.Component {
-  constructor(props) {
-    super(props);
-    this.delRow = this.delRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-    this.moveRow = this.moveRow.bind(this);
-    this.onCellChange = this.onCellChange.bind(this);
-    this.onUnitClick = this.onUnitClick.bind(this);
-    this.onDrop = this.onDrop.bind(this);
-    this.onChk = this.onChk.bind(this);
-    this.getColumns = this.getColumns.bind(this);
-  }
-
-  onCellChange(params) {
-    const { e, columnDef, rowValue } = params;
-    const newValue = e.target.value;
-    const oldValue = rowValue[columnDef.field].value;
-    if (oldValue === newValue) return;
-    if (columnDef.type === 'text') {
-      rowValue[columnDef.field] = newValue;
-    }
-    if (columnDef.type === 'system-defined') {
-      if (isNaN(newValue)) return;
-      rowValue[columnDef.field].value = Numeral(newValue).value();
-    }
-    const { opt } = this.props;
-    const subVals = opt.f_obj.sub_values || [];
-    const idx = subVals.findIndex(s => s.id === rowValue.id);
-    subVals.splice(idx, 1, rowValue);
-    opt.f_obj.sub_values = subVals;
-    opt.onSubChange(0, 0, opt.f_obj, true);
-  }
-
-  onUnitClick(subField, node) {
-    const { data } = node;
-    const { opt } = this.props;
-    const subVals = opt.f_obj.sub_values || [];
-    const subVal = subVals.find(s => s.id === data.id);
-    const units = genUnits(subField.option_layers);
-    let uIdx = units.findIndex(u => u.key === subVal[subField.id].value_system);
-    if (uIdx < units.length - 1) uIdx += 1; else uIdx = 0;
-    const vs = units.length > 0 ? units[uIdx].key : '';
-    const v = unitConversion(subField.option_layers, vs, subVal[subField.id].value);
-    subVal[subField.id] = { value: v, value_system: vs };
-    const idx = subVals.findIndex(s => s.id === data.id);
-    subVals.splice(idx, 1, subVal);
-    opt.f_obj.sub_values = subVals;
-    opt.onSubChange(subField, subField.id, opt.f_obj, true);
-  }
-
-  onDrop(targetProps, targetOpt) {
-    const { opt } = this.props;
-    const subField = targetOpt.sField;
-    const subVals = opt.f_obj.sub_values || [];
-    const subVal = subVals.find(s => s.id === targetOpt.data.id);
-    subVal[subField.id] = { value: targetProps };
-    const idx = subVals.findIndex(s => s.id === targetOpt.data.id);
-    subVals.splice(idx, 1, subVal);
-    opt.f_obj.sub_values = subVals;
-    opt.onSubChange(subField, subField.id, opt.f_obj, true);
-  }
-
-  onChk(params) {
-    const { node, subField, crOpt } = params;
-    const { opt } = this.props;
-    const subVals = opt.f_obj.sub_values || [];
-    const subVal = subVals.find(s => s.id === node.data.id);
-    node.data[subField.id].value.cr_opt = crOpt;
-    subVal[subField.id] = { value: node.data[subField.id].value };
-    const idx = subVals.findIndex(s => s.id === node.data.id);
-    subVals.splice(idx, 1, subVal);
-    opt.f_obj.sub_values = subVals;
-    opt.onSubChange(subField, subField.id, opt.f_obj, true);
-  }
-
-  getColumns() {
-    const { opt } = this.props;
-    const sValues = (opt.f_obj.sub_values || []);
-    let columnDefs = [];
-    (opt.f_obj.sub_fields || []).forEach((sF) => {
-      let colDef = {
-        type: sF.type, headerName: sF.col_name, field: sF.id
-      };
-      const colDefExt = [];
-      if (sF.type === 'text') {
-        colDef = Object.assign({}, colDef, {
-          editable: true, onCellChange: this.onCellChange
-        });
-      }
-      if (sF.type === 'system-defined') {
-        const cellParams = { sField: sF, onChange: this.onUnitClick };
-        colDef = Object.assign({}, colDef, {
-          cellRenderer: UConverterRenderer, cellParams, onCellChange: this.onCellChange
-        });
-      }
-      if (sF.type === 'drag_molecule') {
-        const cellParams = { sField: sF, opt, onChange: this.onDrop };
-        colDef = Object.assign({}, colDef, {
-          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
-        });
-        const conf = ((sF.value || '').split(';') || []);
-        conf.forEach((c) => {
-          const attr = molOptions.find(m => m.value === c);
-          if (attr) {
-            const ext = {
-              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
-            };
-            colDefExt.push(ext);
-          }
-        });
-      }
-      if (sF.type === 'drag_sample') {
-        const sOpt = sValues.filter(o => o[sF.id] && o[sF.id].value && o[sF.id].value.is_new);
-        const cellParams = { sField: sF, opt, onChange: this.onDrop };
-        colDef = Object.assign({}, colDef, {
-          cellRenderer: DropRenderer, cellParams, onCellChange: this.onCellChange, width: '5vw'
-        });
-        const addOption = {
-          colId: 'sam_option', editable: false, type: 'text', headerName: '', cellRenderer: SampOption, cellParams: { sField: sF, onChange: this.onChk }, width: '3vw'
-        };
-        if (sOpt.length > 0) colDefExt.push(addOption);
-        const addLink = {
-          colId: 'sam_link', editable: false, type: 'text', headerName: 'Short label', cellRenderer: DropLinkRenderer, cellParams: { sField: sF }, width: '5vw'
-        };
-        colDefExt.push(addLink);
-        const conf = ((sF.value || '').split(';') || []);
-        conf.forEach((c) => {
-          const attr = samOptions.find(m => m.value === c);
-          if (attr) {
-            const ext = {
-              colId: c, editable: false, type: 'text', headerName: attr.label, cellRenderer: DropTextRenderer, cellParams: { attr, sField: sF }
-            };
-            colDefExt.push(ext);
-          }
-        });
-      }
-      columnDefs.push(colDef);
-      if (colDefExt.length > 0) columnDefs = columnDefs.concat(colDefExt);
-    });
-    const act = {
-      type: 'button',
-      headerName: '',
-      colId: opt.f_obj.field,
-      headerComponent: AddRowBtn,
-      headerParams: { addRow: this.addRow },
-      cellRenderer: DelRowBtn,
-      cellParams: { delRow: this.delRow },
-      width: 'unset',
-    };
-    columnDefs.splice(0, 0, act);
-    const dtype = `${DragDropItemTypes.GENERIC_GRID}_${opt.layer.key}_${opt.f_obj.field}`;
-    const move = {
-      type: 'dnd',
-      field: opt.f_obj.field,
-      headerName: '',
-      colId: `${opt.f_obj.field}_dnd`,
-      headerComponent: NullRowBtn,
-      cellRenderer: DnDRowBtn,
-      cellParams: { moveRow: this.moveRow, field: opt.f_obj.field, type: dtype },
-      width: 'unset',
-    };
-    columnDefs.splice(0, 0, move);
-    return columnDefs;
-  }
-
-  moveRow(source, target) {
-    const { opt } = this.props;
-    const alles = opt.f_obj.sub_values;
-    const sid = alles.findIndex(e => e.id === source);
-    const tid = alles.findIndex(e => e.id === target);
-    const temp = alles[sid];
-    alles[sid] = alles[tid];
-    alles[tid] = temp;
-    opt.onSubChange(0, 0, opt.f_obj, true);
-  }
-
-  delRow(rowData) {
-    const { opt } = this.props;
-    opt.f_obj.sub_values = opt.f_obj.sub_values.filter(s => s.id !== rowData.id);
-    opt.onSubChange(0, 0, opt.f_obj, true);
-  }
-
-  addRow() {
-    const { opt } = this.props;
-    const subFields = opt.f_obj.sub_fields || [];
-    const newSub = new GenericSubField();
-    subFields.map((e) => {
-      if (e.type === 'text') return Object.assign(newSub, { [e.id]: '' });
-      return Object.assign(newSub, { [e.id]: { value: '', value_system: e.value_system } });
-    });
-    opt.f_obj.sub_values = opt.f_obj.sub_values || [];
-    opt.f_obj.sub_values.push(newSub);
-    opt.onSubChange(0, 0, opt.f_obj, true);
-  }
-
-  render() {
-    const { opt } = this.props;
-    const columnDefs = this.getColumns();
-    if (opt.isSearchCriteria) return (<div>(This is a table)</div>);
-    if ((opt.f_obj.sub_fields || []).length < 1) return null;
-    return (
-      <div>
-        {ColumnHeader(columnDefs)}
-        <div>{NoRow(opt.f_obj.sub_values)}</div>
-        <div>{(opt.f_obj.sub_values || []).map(s => ColumnRow(columnDefs, s))}</div>
-      </div>
-    );
-  }
-}
-
-TableRecord.propTypes = {
-  opt: PropTypes.object.isRequired,
-};
diff --git a/app/packs/src/components/generic/TextFormula.js b/app/packs/src/components/generic/TextFormula.js
deleted file mode 100644
index ec21b3299..000000000
--- a/app/packs/src/components/generic/TextFormula.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import { AgGridReact } from 'ag-grid-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import GenericSubField from '../models/GenericSubField';
-import LayerSelect from './LayerSelect';
-import FieldSelect from './FieldSelect';
-
-const AddRowBtn = ({ addRow }) => (
-  <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
-);
-
-AddRowBtn.propTypes = { addRow: PropTypes.func.isRequired };
-
-const DelRowBtn = ({ delRow, node }) => {
-  const { data } = node;
-  const btnClick = () => {
-    delRow(data);
-  };
-  return (<Button onClick={btnClick} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>);
-};
-
-DelRowBtn.propTypes = { delRow: PropTypes.func.isRequired, node: PropTypes.object.isRequired };
-
-export default class TextFormula extends React.Component {
-  constructor(props) {
-    super(props);
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-    this.onGridReady = this.onGridReady.bind(this);
-    this.delRow = this.delRow.bind(this);
-    this.addRow = this.addRow.bind(this);
-    this.selLayer = this.selLayer.bind(this);
-    this.selField = this.selField.bind(this);
-    this.refresh = this.refresh.bind(this);
-    this.onCellValueChanged = this.onCellValueChanged.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { field, allLayers } = this.props;
-    const sub = field.text_sub_fields || [];
-    if (this.props.allLayers !== prevProps.allLayers) {
-      const columnDefs = this.gridApi.getColumnDefs();
-      columnDefs.find(c => c.field === 'layer').cellRendererParams.allLayers = allLayers;
-      columnDefs.find(c => c.field === 'field').cellRendererParams.allLayers = allLayers;
-      this.gridApi.setColumnDefs(columnDefs);
-    }
-    this.gridApi && this.gridApi.setRowData(sub);
-  }
-
-  onGridReady(e) {
-    this.gridApi = e.api;
-    this.gridColumnApi = e.columnApi;
-    const columnDefs = [
-      {
-        rowDrag: true,
-        resizable: true,
-        headerName: 'Id',
-        field: 'id',
-        editable: false,
-        minWidth: 100,
-        width: 100,
-      },
-      {
-        headerName: 'Layer',
-        field: 'layer',
-        editable: false,
-        minWidth: 150,
-        width: 150,
-        cellRendererFramework: LayerSelect,
-        cellRendererParams: { allLayers: this.props.allLayers, selLayer: this.selLayer },
-      },
-      {
-        headerName: 'Field (type: text)',
-        field: 'field',
-        editable: false,
-        minWidth: 250,
-        cellRendererFramework: FieldSelect,
-        cellRendererParams: { allLayers: this.props.allLayers, selField: this.selField, types: ['text'], tableText: true },
-      },
-      {
-        headerName: 'Separator',
-        field: 'separator',
-        editable: true,
-        minWidth: 80,
-        width: 80,
-        onCellValueChanged: this.onCellValueChanged
-      },
-      {
-        headerName: '',
-        colId: 'actions',
-        headerComponentFramework: AddRowBtn,
-        headerComponentParams: { addRow: this.addRow },
-        cellRendererFramework: DelRowBtn,
-        cellRendererParams: { delRow: this.delRow },
-        editable: false,
-        filter: false,
-        minWidth: 48,
-        width: 48,
-        suppressSizeToFit: true,
-        pinned: 'left'
-      },
-    ];
-    this.gridApi.setColumnDefs(columnDefs);
-    this.autoSizeAll();
-  }
-
-  onCellValueChanged(params) {
-    const { oldValue, newValue } = params;
-    if (oldValue === newValue) return;
-    this.refresh();
-  }
-
-  delRow() {
-    const selectedData = this.gridApi.getSelectedRows();
-    this.gridApi.applyTransaction({ remove: selectedData });
-    this.refresh();
-  }
-
-  addRow() {
-    const { allLayers } = this.props;
-    const lys = allLayers.filter(e => (e.fields || []).filter(f => f.type === 'text').length > 0);
-    const ly = (lys.length > 0 && lys[0].key) || '';
-    const fd = ly === '' ? '' : ((allLayers.find(e => e.key === ly) || {}).fields || []).filter(e => e.type === 'text')[0].field;
-    const newSub = new GenericSubField({ layer: ly, field: fd, separator: '.' });
-    const idx = this.gridApi.getDisplayedRowCount();
-    this.gridApi.applyTransaction({ add: [newSub], addIndex: idx });
-    this.refresh();
-  }
-
-  selLayer(e, node) {
-    const { data } = node;
-    if (e.target.value === data.layer) { return; }
-    data.layer = e.target.value;
-    const { allLayers } = this.props;
-    const ly = data.layer;
-    const fdf = ((allLayers.find(l => l.key === ly) || {}).fields || []).filter(l => l.type === 'text') || [];
-    const fd = (fdf.length > 0 && fdf[0].field) || '';
-    data.field = fd;
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.text_sub_fields = rows;
-    this.gridApi.setRowData(rows);
-    updSub(layerKey, field, () => {});
-  }
-
-  selField(e, node) {
-    const { data } = node;
-    if (e.target.value === data.field) { return; }
-    data.field = e.target.value;
-    this.refresh();
-  }
-
-  refresh() {
-    const { updSub, layerKey, field } = this.props;
-    const rows = [];
-    this.gridApi.forEachNode((nd) => { rows.push(nd.data); });
-    field.text_sub_fields = rows;
-    updSub(layerKey, field, () => {});
-  }
-
-  autoSizeAll() {
-    if (!this.gridApi) return;
-    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 10);
-  }
-
-  render() {
-    const { field } = this.props;
-    const sub = field.text_sub_fields || [];
-    return (
-      <div>
-        <div style={{ fontSize: '10px' }}>
-          <b>Text-Formula: </b>
-          select the text fields which are combined together with separator
-        </div>
-        <div style={{ width: '100%', height: '100%' }} className="ag-theme-balham">
-          <AgGridReact
-            enableColResize
-            defaultColDef={{ suppressMovable: true }}
-            rowSelection="single"
-            onGridReady={this.onGridReady}
-            rowData={sub}
-            singleClickEdit
-            stopEditingWhenGridLosesFocus
-            rowDragManaged
-            onRowDragEnd={this.refresh}
-            domLayout="autoHeight"
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-TextFormula.propTypes = {
-  layerKey: PropTypes.string.isRequired,
-  field: PropTypes.object.isRequired,
-  updSub: PropTypes.func.isRequired,
-  allLayers: PropTypes.arrayOf(PropTypes.object)
-};
-
-TextFormula.defaultProps = { allLayers: [] };
diff --git a/app/packs/src/components/generic/TypeSelect.js b/app/packs/src/components/generic/TypeSelect.js
deleted file mode 100644
index 4393207d7..000000000
--- a/app/packs/src/components/generic/TypeSelect.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import GridSelect from './GridSelect';
-
-const TypeSelect = (props) => {
-  const { all, selType, node } = props;
-  const dVal = node.data.type;
-  return <GridSelect all={all} onChange={selType} node={node} dVal={dVal} />;
-};
-
-TypeSelect.propTypes = {
-  all: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selType: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired
-};
-
-export default TypeSelect;
diff --git a/app/packs/src/components/generic/UConverterRenderer.js b/app/packs/src/components/generic/UConverterRenderer.js
deleted file mode 100644
index 7e1c3aa4c..000000000
--- a/app/packs/src/components/generic/UConverterRenderer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { genUnit, genUnitSup } from '../../admin/generic/Utils';
-
-const UConverterRenderer = (props) => {
-  const { sField, onChange, node } = props;
-  if (sField.type !== 'system-defined') return null;
-  const { data } = node;
-  return (
-    <Button key={`ucr_${data.id}`} active onClick={() => onChange(sField, node)} bsStyle="success">
-      {genUnitSup(genUnit(sField.option_layers, data[sField.id].value_system).label) || ''}
-    </Button>
-  );
-};
-
-UConverterRenderer.propTypes = {
-  sField: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  node: PropTypes.object.isRequired
-};
-
-export default UConverterRenderer;
diff --git a/app/packs/src/components/green_chem/GreenChemistry.js b/app/packs/src/components/green_chem/GreenChemistry.js
deleted file mode 100644
index 8e38ea040..000000000
--- a/app/packs/src/components/green_chem/GreenChemistry.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-
-import Reaction from 'src/models/Reaction';
-import GreenMaterialGroup from 'src/apps/mydb/elements/details/reactions/greenChemistryTab/GreenMaterialGroup';
-import GreenMetrics from 'src/apps/mydb/elements/details/reactions/greenChemistryTab/GreenMetrics';
-
-
-export default class GreenChemistry extends Component {
-  constructor() {
-    super();
-
-    this.updateGroupData = this.updateGroupData.bind(this);
-  }
-
-  updateGroupData() {
-    const { reaction, onReactionChange } = this.props;
-    onReactionChange(reaction, { schemaChanged: false });
-  }
-
-  render() {
-    const { reaction, onReactionChange } = this.props;
-
-    const data = [
-      { segment: 'Oil refining', factor: '< 0.1' },
-      { segment: 'Bulk chemicals', factor: '< 1 - 5' },
-      { segment: 'Fine chemicals', factor: '5 - 50' },
-      { segment: 'Pharmaceuticals', factor: '25 - > 100' },
-    ];
-
-    const columnDefs = [
-      {
-        headerName: 'Industry Segment',
-        field: 'segment',
-      },
-      {
-        headerName: 'E factor (kg waste per kg product)',
-        field: 'factor',
-        width: 148,
-      },
-    ];
-
-    const defaultColDef = {
-      editable: false,
-      width: 120,
-    };
-
-    return (
-      <div className="green-chemistry">
-        <GreenMetrics reaction={reaction} />
-        <GreenMaterialGroup
-          group="starting_materials"
-          materials={reaction.starting_materials}
-          onChange={this.updateGroupData}
-        />
-        <GreenMaterialGroup
-          group="reactants"
-          materials={reaction.reactants}
-          onChange={this.updateGroupData}
-        />
-        <GreenMaterialGroup
-          group="products"
-          materials={reaction.products}
-          onChange={this.updateGroupData}
-        />
-        <GreenMaterialGroup
-          group="solvents"
-          materials={reaction.solvents}
-          onChange={this.updateGroupData}
-        />
-        <GreenMaterialGroup
-          group="purification_solvents"
-          materials={reaction.purification_solvents}
-          onChange={this.updateGroupData}
-        />
-        <div className="metrics-refs">
-          <div className="ag-theme-balham">
-            <b>E factor: </b>
-            <a href="https://doi.org/10.1039/C6GC02157C">The E Factor 25 Years on: The Rise of Green Chemistry and Sustainability. </a>
-            <i>Sheldon, Roger A.  Green Chemistry 19, Nr. 1 (3. Januar 2017): 18–43.</i>
-            <br />
-            <br />
-            <b>Atom economy (AE): </b>
-            <a href="https://doi.org/10.1126/science.1962206">The Atom Economy -- a Search for Synthetic Efficiency. </a>
-            <i>Trost, B. M. Science 254, Nr. 5037 (6. Dezember 1991): 1471–77.</i>
-            <br />
-            <br />
-            <b style={{ color: 'rgba(0, 0, 0, 0.54)' }}>
-              Atom economy has a value between 0 (bad) - 1 (very good)
-            </b>
-          </div>
-          <div className="e-factor-refs ag-theme-balham">
-            <AgGridReact
-              enableColResize
-              columnDefs={columnDefs}
-              defaultColDef={defaultColDef}
-              headerHeight={68}
-              rowData={data}
-              domLayout="autoHeight"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-GreenChemistry.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  onReactionChange: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/green_chem/GreenMaterialGroup.js b/app/packs/src/components/green_chem/GreenMaterialGroup.js
deleted file mode 100644
index 280a09bdf..000000000
--- a/app/packs/src/components/green_chem/GreenMaterialGroup.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import { AgGridReact } from 'ag-grid-react';
-import { Checkbox } from 'react-bootstrap';
-
-import Sample from 'src/models/Sample';
-import SampleName from 'src/components/common/SampleName';
-
-function floatFormatter(params) {
-  if (isNaN(params.value)) {
-    return 0;
-  }
-  return (params.value || 0).toFixed(4);
-}
-
-function MaterialNameWithIupac({ group, node }) {
-  const material = node.data;
-  const skipIupacName = (
-    group === 'reactants' ||
-    group === 'solvents' ||
-    group === 'purification_solvents'
-  );
-
-  let materialName = '';
-  let moleculeIupacName = '';
-
-  if (skipIupacName) {
-    materialName = material.molecule_iupac_name || material.name;
-    if (group === 'solvents' || group === 'purification_solvents') {
-      materialName = material.external_label || '';
-    }
-    if (materialName === null || materialName === '') {
-      materialName = <SampleName sample={material} />;
-    }
-  } else {
-    moleculeIupacName = material.molecule_iupac_name;
-    materialName = material.title() === '' ?
-      <SampleName sample={material} /> :
-      material.title();
-  }
-
-  return (
-    <div>
-      <div>{materialName}</div>
-      <div>{moleculeIupacName}</div>
-    </div>
-  );
-}
-
-function WasteCheckbox({ node, toggleWaste }) {
-  const material = node.data;
-  return (
-    <div className="waste-chkbx">
-      <Checkbox
-        checked={material.waste || false}
-        onChange={() => toggleWaste(material)}
-      />
-    </div>
-  );
-}
-
-export default class GreenMaterialGroup extends React.Component {
-  constructor() {
-    super();
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.onCoefficientChanged = this.onCoefficientChanged.bind(this);
-    this.toggleWaste = this.toggleWaste.bind(this);
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-  }
-
-  componentDidUpdate() {
-    this.autoSizeAll();
-  }
-
-  onGridReady(params) {
-    this.api = params.api;
-  }
-
-  autoSizeAll() {
-    if (!this.api) return;
-    setTimeout(() => {
-      this.api.sizeColumnsToFit();
-      this.api.resetRowHeights();
-    }, 0);
-  }
-
-  onCoefficientChanged(params) {
-    const { materials, onChange } = this.props;
-    const material = materials[params.rowIndex];
-    material.coefficient = params.value;
-
-    onChange();
-  }
-
-  toggleWaste(material) {
-    const { materials, onChange } = this.props;
-    material.waste = !(material.waste || false);
-    this.api.refreshCells();
-    onChange();
-  }
-
-  render() {
-    const {
-      group, materials
-    } = this.props;
-    if (materials && materials.length === 0) return <span />;
-
-    const isProduct = group === 'products';
-    const contents = [];
-
-    const columnDefs = [
-      {
-        headerName: _.startCase(group),
-        width: 170,
-        cellRendererFramework: MaterialNameWithIupac,
-        cellRendererParams: { group },
-      },
-      { headerName: "Mass", field: "amount_g", valueFormatter: floatFormatter },
-      {
-        headerName: "Volume",
-        field: "amount_l",
-        valueFormatter: floatFormatter,
-        width: 86,
-      },
-      {
-        headerName: "Moles",
-        field: "amount_mol",
-        width: 76,
-        valueFormatter: floatFormatter,
-      },
-      {
-        headerName: 'Equiv.',
-        field: 'equivalent',
-        width: 76,
-        valueFormatter: floatFormatter
-      },
-      {
-        headerName: group === 'products' ? 'Waste' : 'Recyclable',
-        field: 'waste',
-        width: 104,
-        cellRendererFramework: WasteCheckbox,
-        cellRendererParams: { toggleWaste: this.toggleWaste },
-      },
-      {
-        headerName: 'Coeff',
-        field: 'coefficient',
-        width: 72,
-        editable: true,
-        cellEditor: 'agTextCellEditor',
-      },
-    ];
-
-    const defaultColDef = {
-      editable: false,
-      width: 71,
-      autoHeight: true,
-    };
-
-    return (
-      <div className="ag-theme-balham">
-        <AgGridReact
-          enableColResize
-          columnDefs={columnDefs}
-          defaultColDef={defaultColDef}
-          onGridReady={this.onGridReady}
-          rowData={materials}
-          domLayout="autoHeight"
-          onCellValueChanged={this.onCoefficientChanged}
-        />
-      </div>
-    );
-  }
-}
-
-GreenMaterialGroup.propTypes = {
-  group: PropTypes.string.isRequired,
-  materials: PropTypes.arrayOf(PropTypes.instanceOf(Sample)).isRequired,
-  onChange: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/green_chem/GreenMetrics.js b/app/packs/src/components/green_chem/GreenMetrics.js
deleted file mode 100644
index 7b1007b98..000000000
--- a/app/packs/src/components/green_chem/GreenMetrics.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AgGridReact } from 'ag-grid-react';
-
-import Reaction from 'src/models/Reaction';
-
-function getWaste(samples) {
-  return samples.filter(s => s.waste);
-}
-
-function getNonWaste(samples) {
-  return (samples || []).filter(s => s == null || !s.waste);
-}
-
-function sumReducer(acc, cur) {
-  return acc + cur;
-}
-
-function floatFormatter(params) {
-  const { value } = params;
-  return value === '' ? value : value.toFixed(2);
-}
-
-export default class GreenMetrics extends React.Component {
-  constructor() {
-    super();
-
-    this.onGridReady = this.onGridReady.bind(this);
-    this.autoSizeAll = this.autoSizeAll.bind(this);
-  }
-
-  componentDidUpdate() {
-    this.autoSizeAll();
-  }
-
-  onGridReady(params) {
-    this.api = params.api;
-  }
-
-  autoSizeAll() {
-    if (!this.api) return;
-    setTimeout(() => {
-      this.api.sizeColumnsToFit();
-    }, 0);
-  }
-
-  render() {
-    const { reaction } = this.props;
-    const startsAmount = reaction.starting_materials
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const selectedStartsAmount = getNonWaste(reaction.starting_materials)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-
-    const reactantsAmount = reaction.reactants
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const selectedReactantsAmount = getNonWaste(reaction.reactants)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-
-    const solventsAmount = reaction.solvents
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const selectedSolventsAmount = getNonWaste(reaction.solvents)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-
-    const pSolventsAmount = (reaction.purification_solvents || [])
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const selectedPSolventsAmount = getNonWaste(reaction.purification_solvents)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-
-    const prodsAmount = (reaction.products || [])
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const selectedProductsAmount = getNonWaste(reaction.products)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-    const wastedProductsAmount = getWaste(reaction.products)
-      .map(x => x.amount_g).reduce(sumReducer, 0);
-
-    const sef = (startsAmount + reactantsAmount + solventsAmount - prodsAmount) / prodsAmount;
-    const cef = (
-      startsAmount + reactantsAmount + solventsAmount +
-      pSolventsAmount - prodsAmount
-    ) / prodsAmount;
-    const cuef = (
-      selectedStartsAmount + selectedReactantsAmount + selectedSolventsAmount +
-      selectedPSolventsAmount - selectedProductsAmount - wastedProductsAmount
-    ) / selectedProductsAmount;
-
-    const aesm = reaction.starting_materials
-      .map(x => x.molecule_molecular_weight * x.coefficient)
-      .reduce(sumReducer, 0);
-    const aep = reaction.products
-      .map(x => x.molecule_molecular_weight * x.coefficient)
-      .reduce(sumReducer, 0);
-    const caep = getNonWaste(reaction.products)
-      .map(x => x.molecule_molecular_weight * x.coefficient)
-      .reduce(sumReducer, 0);
-    const aer = reaction.reactants
-      .map(x => x.equivalent < 0.3 ? 0 : (x.molecule_molecular_weight * x.coefficient))
-      .reduce(sumReducer, 0);
-    const caer = getNonWaste(reaction.reactants)
-      .map(x => x.equivalent < 0.3 ? 0 : (x.molecule_molecular_weight * x.coefficient))
-      .reduce(sumReducer, 0);
-    const ae = (aep / (aesm + aer));
-    const cae = (caep / (aesm + caer));
-
-    const data = [{
-      sef: sef || '',
-      cef: cef || '',
-      cuef: cuef || '',
-      ae: ae,
-      cae: cae,
-    }];
-
-    const columnDefs = [
-      {
-        headerName: 'Simple E factor (sEF)',
-        field: 'sef',
-      },
-      {
-        headerName: 'Complete E factor (cEF)',
-        field: 'cef',
-      },
-      {
-        headerName: 'Custom E factor',
-        field: 'cuef',
-      },
-      {
-        headerName: 'Atom economy (AE)',
-        field: 'ae',
-      },
-      {
-        headerName: 'Custom Atom economy',
-        field: 'cae',
-      },
-    ];
-
-    const defaultColDef = {
-      editable: false,
-      valueFormatter: floatFormatter,
-    };
-
-    return (
-      <div className="green-metrics ag-theme-balham">
-        <AgGridReact
-          enableColResize
-          columnDefs={columnDefs}
-          defaultColDef={defaultColDef}
-          rowData={data}
-          onGridReady={this.onGridReady}
-          headerHeight={68}
-          domLayout="autoHeight"
-        />
-      </div>
-    );
-  }
-}
-
-GreenMetrics.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired
-};
diff --git a/app/packs/src/components/inbox/AttachmentContainer.js b/app/packs/src/components/inbox/AttachmentContainer.js
deleted file mode 100644
index 80f3a76ad..000000000
--- a/app/packs/src/components/inbox/AttachmentContainer.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import { DragSource } from 'react-dnd';
-import { Button, ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import InboxActions from '../actions/InboxActions';
-import DragDropItemTypes from '../DragDropItemTypes';
-import Utils from '../utils/Functions';
-
-import MoveToAnalysisButton from './MoveToAnalysisButton';
-
-const dataSource = {
-  beginDrag(props) {
-    return props;
-  }
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-});
-
-const handleAttachmentDownload = attachment => Utils.downloadFile({
-  contents: `/api/v1/attachments/${attachment && attachment.id}`, name: attachment && attachment.filename
-});
-
-class AttachmentContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      deletingTooltip: false,
-    };
-  }
-
-
-  toggleTooltip() {
-    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
-  }
-
-  render() {
-    const { connectDragSource, sourceType, attachment, largerInbox } = this.props;
-    if (sourceType !== DragDropItemTypes.DATA && sourceType !== DragDropItemTypes.UNLINKED_DATA) {
-      return null;
-    }
-
-    const textStyle = {
-      display: 'block',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'clip',
-      maxWidth: '100%',
-      cursor: 'move'
-    };
-
-    if (largerInbox === true) {
-      textStyle.marginTop = '6px';
-      textStyle.marginBottom = '6px';
-    }
-
-    const trash = (
-      <span>
-        <i className="fa fa-trash-o" onClick={() => this.toggleTooltip()} style={{ cursor: "pointer" }}>&nbsp;</i>
-        {this.state.deletingTooltip ? (
-          <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-            Delete this attachment?
-            <ButtonGroup>
-              <Button
-                bsStyle="danger"
-                bsSize="xsmall"
-                onClick={() => InboxActions.deleteAttachment(attachment)}
-              >
-                Yes
-              </Button>
-              <Button
-                bsStyle="warning"
-                bsSize="xsmall"
-                onClick={() => this.toggleTooltip()}
-              >
-                No
-              </Button>
-            </ButtonGroup>
-          </Tooltip>
-        ) : null}
-      </span>
-    );
-
-    const filenameTooltip = (
-      <Tooltip
-        id="filename_tooltip"
-        className="tooltip"
-        style={{ maxWidth: '100%' }}
-      >
-        <p>
-          {attachment.filename}
-        </p>
-      </Tooltip>);
-
-    return connectDragSource(
-      <div style={textStyle}>
-        &nbsp;&nbsp;{trash}&nbsp;
-        <i className="fa fa-download" onClick={() => handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }} />
-        &nbsp;&nbsp;
-        {largerInbox ? (
-          <MoveToAnalysisButton
-            attachment={attachment}
-            largerInbox={largerInbox}
-            sourceType={sourceType}
-          />
-          ) : null }
-        <OverlayTrigger placement="top" overlay={filenameTooltip} >
-          <span
-            className="text-info fa fa-arrows"
-            style={{ maxWidth: '100%' }}
-          >
-            &nbsp; {attachment.filename}
-          </span>
-        </OverlayTrigger>
-        <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
-          {moment(attachment.created_at).format('DD.MM.YYYY HH:mm') }
-        </span>
-      </div>,
-      { dropEffect: 'move' }
-    );
-  }
-}
-
-export default DragSource(
-  props => props.sourceType,
-  dataSource,
-  collectSource
-)(AttachmentContainer);
-
-AttachmentContainer.propTypes = {
-  attachment: PropTypes.object.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  largerInbox: PropTypes.bool,
-  sourceType: PropTypes.string,
-};
-
-AttachmentContainer.defaultProps = {
-  largerInbox: false,
-  sourceType: ''
-};
diff --git a/app/packs/src/components/inbox/DatasetContainer.js b/app/packs/src/components/inbox/DatasetContainer.js
deleted file mode 100644
index 1c8be3e74..000000000
--- a/app/packs/src/components/inbox/DatasetContainer.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import { DragSource } from 'react-dnd';
-import { Button, ButtonGroup, Tooltip } from 'react-bootstrap';
-import AttachmentContainer from './AttachmentContainer';
-import DragDropItemTypes from '../DragDropItemTypes';
-import InboxActions from '../actions/InboxActions';
-
-const dataSource = {
-  beginDrag(props) {
-    return props;
-  }
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-});
-
-class DatasetContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      deletingTooltip: false,
-    }
-  }
-
-  attachmentCount() {
-    return (this.props.dataset && this.props.dataset.attachments &&
-     this.props.dataset.attachments.length) || 0;
-  }
-
-  deleteDataset() {
-    if (this.attachmentCount() === 0) {
-      InboxActions.deleteContainerLinkUnselected(this.props.dataset);
-      InboxActions.deleteContainer(this.props.dataset);
-    } else {
-      this.toggleTooltip();
-    }
-  }
-
-  confirmDeleteDataset() {
-    InboxActions.deleteContainerLinkUnselected(this.props.dataset);
-    InboxActions.deleteContainer(this.props.dataset);
-    this.toggleTooltip();
-  }
-
-  confirmDeleteAttachments() {
-    this.toggleTooltip();
-  }
-
-  toggleTooltip() {
-    this.setState(prevState => ({ ...prevState, deletingTooltip: !prevState.deletingTooltip }));
-  }
-
-  render() {
-    const { connectDragSource, sourceType, dataset, largerInbox } = this.props;
-
-    if (sourceType === DragDropItemTypes.DATASET) {
-      const { visible, deletingTooltip } = this.state;
-      const attachments = dataset.attachments.map(attachment => (
-        <AttachmentContainer
-          key={`attach_${attachment.id}`}
-          sourceType={DragDropItemTypes.DATA}
-          attachment={attachment}
-          largerInbox={largerInbox}
-        />
-      ));
-      const attCount = this.attachmentCount();
-      const textStyle = {
-        display: 'block',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'clip',
-        maxWidth: '100%',
-        cursor: 'move'
-      };
-
-      if (largerInbox === true) {
-        textStyle.marginTop = '6px';
-        textStyle.marginBottom = '6px';
-      }
-
-      const trash = this.props.cache.length === this.props.cache.length // Set it as always show
-        ? (
-          <span>
-            <i className="fa fa-trash-o" onClick={() => this.deleteDataset()} style={{ cursor: "pointer" }}>&nbsp;</i>
-            {deletingTooltip ? (
-              <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-                Delete {attCount} attachment{attCount > 1 ? 's' : null }?
-                <ButtonGroup>
-                  <Button
-                    bsStyle="danger"
-                    bsSize="xsmall"
-                    onClick={() => this.confirmDeleteDataset()}
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    bsStyle="warning"
-                    bsSize="xsmall"
-                    onClick={() => this.toggleTooltip()}
-                  >
-                    No
-                  </Button>
-                </ButtonGroup>
-              </Tooltip>
-            ) : null}
-          </span>
-        ) : null;
-      return connectDragSource(
-        <div>
-          <div style={textStyle}>
-            &nbsp;{trash}&nbsp;
-            <i
-              className={`fa fa-folder${visible ? '-open' : ''}`}
-              onClick={() => this.setState(prevState => ({ ...prevState, visible: !visible }))}
-              style={{ cursor: 'pointer' }}
-            >&nbsp;&nbsp;
-              <span className="text-info fa fa-arrows">
-                &nbsp; {dataset.name}
-              </span>
-            </i>
-            <span className="text-info" style={{ float: 'right', display: largerInbox ? '' : 'none' }}>
-              {moment(dataset.created_at).format('DD.MM.YYYY HH:mm') }
-            </span>
-          </div>
-          <div>{visible ? attachments : null}</div>
-        </div>,
-        { dropEffect: 'move' }
-      );
-    }
-
-    return null;
-  }
-}
-
-export default DragSource(props => props.sourceType, dataSource, collectSource)(DatasetContainer);
-
-DatasetContainer.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  sourceType: PropTypes.string.isRequired,
-  largerInbox: PropTypes.bool
-};
-
-DatasetContainer.defaultProps = {
-  largerInbox: false
-};
diff --git a/app/packs/src/components/inbox/DeviceBox.js b/app/packs/src/components/inbox/DeviceBox.js
deleted file mode 100644
index 50ed34fbf..000000000
--- a/app/packs/src/components/inbox/DeviceBox.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import DatasetContainer from './DatasetContainer';
-import DragDropItemTypes from '../DragDropItemTypes';
-import InboxActions from '../actions/InboxActions';
-import InboxStore from '../stores/InboxStore';
-
-export default class DeviceBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false
-    };
-  }
-
-  deleteDeviceBox(deviceBox) {
-    InboxActions.deleteContainer(deviceBox);
-  }
-
-  render() {
-    const { device_box, largerInbox } = this.props;
-    const { visible } = this.state;
-    const cache = InboxStore.getState().cache;
-
-    device_box.children.sort((a, b) => {
-      if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
-    });
-
-    const datasets = device_box.children.map((dataset) => {
-      return (
-        <DatasetContainer
-          key={`dataset_${dataset.id}`}
-          sourceType={DragDropItemTypes.DATASET}
-          dataset={dataset}
-          cache={cache}
-          largerInbox={largerInbox}
-        />
-      );
-    });
-
-    const textStyle = {
-      display: 'block',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      maxWidth: '100%',
-      cursor: 'move'
-    };
-
-    return (
-      <div className="tree-view">
-        <div className="title" style={textStyle}>
-          {datasets.length === 0
-            ? (
-              <i
-                className="fa fa-trash-o"
-                onClick={() => this.deleteDeviceBox(device_box)}
-                style={{ cursor: 'pointer' }}
-              >&nbsp;&nbsp;
-              </i>
-            ) : null
-          }
-          <i
-            className={`fa fa-folder${visible ? '-open' : ''}`}
-            aria-hidden="true"
-            onClick={() => this.setState({ visible: !visible })}
-          > {device_box.name}
-          </i>
-        </div>
-        <div>{visible ? datasets : null}</div>
-      </div>
-    );
-  }
-}
-
-DeviceBox.propTypes = {
-  device_box: PropTypes.object.isRequired,
-  largerInbox: PropTypes.bool
-};
-
-DeviceBox.defaultProps = {
-  largerInbox: false
-};
diff --git a/app/packs/src/components/inbox/InboxModal.js b/app/packs/src/components/inbox/InboxModal.js
deleted file mode 100644
index a43168011..000000000
--- a/app/packs/src/components/inbox/InboxModal.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-import Draggable from 'react-draggable';
-import { Badge, Button, Panel, Glyphicon } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import InboxStore from '../stores/InboxStore';
-import InboxActions from '../actions/InboxActions';
-import LoadingActions from '../actions/LoadingActions';
-
-import DeviceBox from '../inbox/DeviceBox';
-import UnsortedBox from '../inbox/UnsortedBox';
-
-import Xdiv from '../extra/CollectionTreeXdiv';
-
-export default class InboxModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const inboxState = InboxStore.getState();
-
-    this.state = {
-      inbox: inboxState.inbox,
-      inboxVisible: false,
-      numberOfAttachments: inboxState.numberOfAttachments,
-      visible: inboxState.inboxModalVisible
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onClickInbox = this.onClickInbox.bind(this);
-  }
-
-  componentDidMount() {
-    InboxStore.listen(this.onChange);
-    InboxActions.fetchInboxCount();
-  }
-
-  componentWillUnmount() {
-    InboxStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(state);
-    this.setState({ visible: state.inboxModalVisible });
-  }
-
-  onClickInbox() {
-    const { inboxVisible, inbox } = this.state;
-    this.setState({ inboxVisible: !inboxVisible });
-    if (!inbox.children) {
-      LoadingActions.start();
-      InboxActions.fetchInbox();
-    }
-  }
-
-  refreshInbox() {
-    LoadingActions.start();
-    InboxActions.fetchInbox();
-  }
-
-  lockedSubtrees() {
-    const roots = this.state.lockedRoots;
-
-    return this.subtrees(roots, null, false);
-  }
-
-  inboxSubtrees() {
-    const { inbox } = this.state;
-
-    let boxes = '';
-    if (inbox.children) {
-      inbox.children.sort((a, b) => {
-        if (a.name > b.name) { return 1; } if (a.name < b.name) { return -1; } return 0;
-      });
-      boxes = inbox.children.map(deviceBox => (
-        <DeviceBox key={`box_${deviceBox.id}`} device_box={deviceBox} largerInbox />
-      ));
-    }
-
-    return (
-      <div className="tree-view">
-        {boxes}
-        {inbox.unlinked_attachments
-          ? <UnsortedBox key="unsorted_box" unsorted_box={inbox.unlinked_attachments} largerInbox />
-          : ''
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const { showCollectionTree } = this.props;
-    const { visible, inboxVisible } = this.state;
-
-    const extraDiv = [];
-    for (let j = 0; j < Xdiv.count; j += 1) {
-      const NoName = Xdiv[`Xdiv${j}`];
-      extraDiv.push(<NoName key={`Xdiv${j}`} />);
-    }
-
-    const panelClass = showCollectionTree ? 'small-col col-md-6' : 'small-col col-md-5';
-    const inboxDisplay = inboxVisible ? '' : 'none';
-
-    if (visible) {
-      return (
-        <Draggable
-          handle=".handle"
-          bounds="body"
-        >
-          <div
-            className={panelClass}
-            style={{ zIndex: 10, position: 'absolute', top: '70px', left: '10px' }}
-          >
-            <Panel bsStyle="primary" className="eln-panel-detail research-plan-details cursor">
-              <Panel.Heading className="cursor handle">
-                <i className="fa fa-inbox" onClick={() => this.onClickInbox()}> &nbsp; Inbox &nbsp;</i>
-                {
-                  this.state.numberOfAttachments > 0 ? <Badge> {this.state.numberOfAttachments} </Badge> : ''
-                }
-                <Button
-                  bsStyle="danger"
-                  bsSize="xsmall"
-                  className="button-right"
-                  onClick={InboxActions.toggleInboxModal}
-                >
-                  <i className="fa fa-times" />
-                </Button>
-                <Button
-                  bsStyle="success"
-                  bsSize="xsmall"
-                  className="button-right"
-                  onClick={() => this.refreshInbox()}
-                >
-                  <Glyphicon bsSize="small" glyph="refresh" />
-                </Button>
-              </Panel.Heading>
-              <Panel.Body>
-                <div>
-                  <div className="tree-view">
-                    <div className="title" style={{ backgroundColor: 'white', display: inboxVisible ? 'none' : '' }}>
-                      <i className="fa fa-inbox" onClick={() => this.onClickInbox()}> &nbsp; Fetch Inbox &nbsp;</i>
-                    </div>
-
-                  </div>
-                  <div className="tree-wrapper" style={{ display: inboxDisplay }}>
-                    { this.inboxSubtrees() }
-                  </div>
-                </div>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Draggable>
-
-      );
-    }
-    return null;
-  }
-}
-
-InboxModal.propTypes = {
-  showCollectionTree: PropTypes.bool.isRequired
-};
diff --git a/app/packs/src/components/inbox/MoveToAnalysisButton.js b/app/packs/src/components/inbox/MoveToAnalysisButton.js
deleted file mode 100644
index b60f53fed..000000000
--- a/app/packs/src/components/inbox/MoveToAnalysisButton.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Tooltip } from 'react-bootstrap';
-import InboxFetcher from '../fetchers/InboxFetcher';
-import InboxActions from '../actions/InboxActions';
-import DragDropItemTypes from '../DragDropItemTypes';
-
-export default class MoveToAnalysisButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showTooltip: false,
-      loading: false,
-      matchingAnalyses: []
-    };
-  }
-
-  fetchMatchingSamples() {
-    this.setState({ loading: true });
-    const { attachment } = this.props;
-
-    InboxFetcher.fetchMatchingSamples(attachment.filename)
-      .then((result) => {
-        this.setState({ matchingAnalyses: result.samples, loading: false });
-      }).catch((errorMessage) => {
-        this.setState({ loading: false });
-        console.log(errorMessage);
-      });
-  }
-
-  toggleTooltip() {
-    const { showTooltip } = this.state;
-    if (showTooltip === false && this.matchingAnalysesCount() === 0) {
-      this.fetchMatchingSamples();
-    }
-
-    this.setState(prevState => ({ ...prevState, showTooltip: !prevState.showTooltip }));
-  }
-
-  matchingAnalysesCount() {
-    return (this.state.matchingAnalyses && this.state.matchingAnalyses.length) || 0;
-  }
-
-  removeAttachment() {
-    const { attachment, sourceType } = this.props;
-
-    switch (sourceType) {
-      default:
-        return false;
-      case DragDropItemTypes.DATA:
-        InboxActions.removeAttachmentFromList(attachment);
-        break;
-      case DragDropItemTypes.UNLINKED_DATA:
-        InboxActions.removeUnlinkedAttachmentFromList(attachment);
-        break;
-    }
-
-    return true;
-  }
-
-
-  moveToAnalysis(sampleId, attachmentId) {
-    InboxFetcher.assignToAnalysis(sampleId, attachmentId)
-      .then(() => {
-        this.removeAttachment();
-      }).catch((errorMessage) => {
-        this.setState({ loading: false });
-        console.log(errorMessage);
-      });
-    this.toggleTooltip();
-  }
-
-  renderAnalysesButtons() {
-    const { loading, matchingAnalyses } = this.state;
-    const { attachment } = this.props;
-
-    if (this.matchingAnalysesCount() === 0) {
-      if (loading === true) {
-        return (<div><i className="fa fa-refresh fa-spin" />&nbsp;loading...<br /></div>);
-      }
-      return (<div>No matching Samples found.<br /></div>);
-    }
-
-    return (
-      <div>
-        Move to Sample:<br />
-        { matchingAnalyses.map(sample => (
-          this.renderMoveButton(attachment, sample)
-          )) }
-      </div>
-    );
-  }
-
-  renderMoveButton(attachment, sample) {
-    return (
-      <div align="left" key={`btn_${sample.id}`}>
-        <Button
-          bsStyle="success"
-          bsSize="small"
-          onClick={() => this.moveToAnalysis(sample.id, attachment.id)}
-        >
-          <i className="fa fa-arrow-circle-right" aria-hidden="true" />&nbsp;
-          {sample.short_label} {sample.name} {sample.type}
-        </Button>
-        <br />
-      </div>
-    );
-  }
-
-  render() {
-    const { showTooltip } = this.state;
-
-    const abortButton = (
-      <div align="right">
-        <Button
-          bsStyle="warning"
-          bsSize="small"
-          onClick={() => this.toggleTooltip()}
-        >
-          <i className="fa fa-times-circle" aria-hidden="true" />&nbsp;
-          Abort
-        </Button>
-      </div>
-    );
-
-    return (
-      <span>
-        <i className="icon-sample" onClick={() => this.toggleTooltip()} style={{ cursor: "pointer" }}>&nbsp;</i>
-        {showTooltip ? (
-          <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-            {this.renderAnalysesButtons()}
-            {abortButton}
-          </Tooltip>
-        ) : null}
-      </span>
-    );
-  }
-}
-
-MoveToAnalysisButton.propTypes = {
-  attachment: PropTypes.object.isRequired,
-  sourceType: PropTypes.string
-};
-
-MoveToAnalysisButton.defaultProps = {
-  sourceType: ''
-};
diff --git a/app/packs/src/components/inbox/UnsortedBox.js b/app/packs/src/components/inbox/UnsortedBox.js
deleted file mode 100644
index 6ffc5eb51..000000000
--- a/app/packs/src/components/inbox/UnsortedBox.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-
-import AttachmentContainer from './AttachmentContainer';
-import DragDropItemTypes from '../DragDropItemTypes';
-
-import Container from '../models/Container';
-import UnsortedDatasetModal from './UnsortedDatasetModal';
-
-export default class UnsortedBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      modal: {
-        show: false,
-        datasetContainer: null
-      }
-    };
-  }
-
-  handleFileModalOpen(datasetContainer) {
-    const { modal } = this.state;
-    modal.datasetContainer = datasetContainer;
-    modal.show = true;
-    this.setState({ modal });
-  }
-
-  handleFileModalHide() {
-    const { modal } = this.state;
-    modal.datasetContainer = null;
-    modal.show = false;
-    this.setState({ modal });
-    document.body.className = document.body.className.replace('modal-open', '');
-  }
-
-  handleUploadButton() {
-    const datasetContainer = Container.buildEmpty();
-    datasetContainer.container_type = 'dataset';
-    this.handleFileModalOpen(datasetContainer);
-  }
-
-  render() {
-    const { unsorted_box, largerInbox } = this.props;
-    const { visible, modal } = this.state;
-
-    const attachments = visible ? unsorted_box.map((attachment) => {
-      return (
-        <AttachmentContainer
-          key={`attach_${attachment.id}`}
-          sourceType={DragDropItemTypes.UNLINKED_DATA}
-          attachment={attachment}
-          largerInbox={largerInbox}
-        />
-      );
-    })
-      :
-    <div />;
-
-    const folderClass = `fa fa-folder${visible ? '-open' : ''}`;
-
-    const uploadModal = (
-      <UnsortedDatasetModal
-        onHide={() => this.handleFileModalHide()}
-        show={modal.show}
-        datasetContainer={modal.datasetContainer}
-      />
-    );
-
-    const uploadButton = (
-      <Button style={{ position: 'absolute', right: 0 }} bsSize="xsmall" onClick={() => this.handleUploadButton()}>
-        <i className="fa fa-upload" aria-hidden="true" />
-      </Button>
-    );
-
-    return (
-      <div className="tree-view">
-        <div className="title">
-          <i
-            className={folderClass}
-            aria-hidden="true"
-            onClick={() => this.setState({ visible: !visible })}
-          > Unsorted
-          </i>
-          {' '}
-          {uploadButton}
-        </div>
-        <div> {attachments} </div>
-        {uploadModal}
-      </div>
-    );
-  }
-}
-
-UnsortedBox.propTypes = {
-  unsorted_box: PropTypes.array.isRequired,
-  largerInbox: PropTypes.bool
-};
-
-UnsortedBox.defaultProps = {
-  largerInbox: false
-};
diff --git a/app/packs/src/components/inbox/UnsortedDataset.js b/app/packs/src/components/inbox/UnsortedDataset.js
deleted file mode 100644
index bdfadca67..000000000
--- a/app/packs/src/components/inbox/UnsortedDataset.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Table, ListGroup, ListGroupItem, Button, ButtonToolbar } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import Utils from 'src/utilities/Functions';
-
-import InboxActions from 'src/stores/alt/actions/InboxActions';
-import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
-import Attachment from 'src/models/Attachment';
-import Container from 'src/models/Container';
-import InboxStore from 'src/stores/alt/stores/InboxStore';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-
-export default class UnsortedDataset extends React.Component {
-  constructor(props) {
-    super();
-    const datasetContainer = Object.assign({}, props.datasetContainer);
-    this.state = {
-      datasetContainer
-    };
-  }
-
-  handleFileDrop(files) {
-    const { datasetContainer } = this.state;
-
-    const attachments = files.map(f => Attachment.fromFile(f));
-    const firstAttach = datasetContainer.attachments.length === 0;
-    datasetContainer.attachments = datasetContainer.attachments.concat(attachments);
-
-    if (firstAttach) {
-      const attachmentList = datasetContainer.attachments;
-      let attachName = attachmentList[attachmentList.length - 1].filename;
-      const splitted = attachName.split('.');
-      if (splitted.length > 1) {
-        splitted.splice(-1, 1);
-        attachName = splitted.join('.');
-      }
-      datasetContainer.name = attachName;
-    }
-
-    this.setState({ datasetContainer });
-  }
-
-  handleAttachmentDownload(attachment) {
-    Utils.downloadFile({ contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename });
-  }
-
-  handleAttachmentRemove(attachment) {
-    const { datasetContainer } = this.state;
-    const index = datasetContainer.attachments.indexOf(attachment);
-
-    datasetContainer.attachments[index].is_deleted = true;
-    this.setState({ datasetContainer });
-  }
-
-  handleUndo(attachment) {
-    const { datasetContainer } = this.state;
-    const index = datasetContainer.attachments.indexOf(attachment);
-
-    datasetContainer.attachments[index].is_deleted = false;
-    this.setState({ datasetContainer });
-  }
-
-  handleSave() {
-    const { datasetContainer } = this.state;
-    const { onModalHide } = this.props;
-    LoadingActions.start();
-    return AttachmentFetcher.uploadToInbox(datasetContainer.attachments
-      .filter(f => f.is_new && !f.is_deleted))()
-      .then(() => { onModalHide(); InboxActions.fetchInboxUnsorted(); });
-  }
-
-  listGroupItem(attachment) {
-    if (attachment.is_deleted) {
-      return (
-        <Table className="borderless">
-          <tbody>
-            <tr>
-              <td>
-                <strike>{attachment.filename}</strike>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <Button
-                  bsSize="xsmall"
-                  bsStyle="danger"
-                  onClick={() => this.handleUndo(attachment)}
-                >
-                  <i className="fa fa-undo" />
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      );
-    }
-
-    return (
-      <Table className="borderless">
-        <tbody>
-          <tr>
-            <td>
-              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              {this.removeAttachmentButton(attachment)} &nbsp;
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
-  }
-
-  attachments() {
-    const { datasetContainer } = this.state;
-    if (datasetContainer.attachments && datasetContainer.attachments.length > 0) {
-      return (
-        <ListGroup>
-          {datasetContainer.attachments.map((attachment) => {
-            return (
-              <ListGroupItem key={attachment.id}>
-                {this.listGroupItem(attachment)}
-              </ListGroupItem>
-            );
-          })}
-        </ListGroup>
-      );
-    }
-    return (
-      <div />
-    );
-  }
-
-  removeAttachmentButton(attachment) {
-    return (
-      <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleAttachmentRemove(attachment)}>
-        <i className="fa fa-trash-o" />
-      </Button>
-    );
-  }
-
-  dropzone() {
-    return (
-      <Dropzone
-        onDrop={files => this.handleFileDrop(files)}
-        style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-      >
-        <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-          Drop Files, or Click to Select.
-        </div>
-      </Dropzone>
-    );
-  }
-
-  render() {
-    const { onModalHide } = this.props;
-
-    return (
-      <Row>
-        <Col md={12}>
-          {this.attachments()}
-          {this.dropzone()}
-          <br />
-        </Col>
-        <Col md={12}>
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => onModalHide()}>Close</Button>
-            <Button
-              bsStyle="warning"
-              onClick={() => this.handleSave()}
-            >
-              Save
-            </Button>
-          </ButtonToolbar>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-UnsortedDataset.propTypes = {
-  onModalHide: PropTypes.func.isRequired,
-  datasetContainer: PropTypes.instanceOf(Container),
-};
-
-UnsortedDataset.defaultProps = {
-  datasetContainer: null,
-};
diff --git a/app/packs/src/components/inbox/UnsortedDatasetModal.js b/app/packs/src/components/inbox/UnsortedDatasetModal.js
deleted file mode 100644
index c84739595..000000000
--- a/app/packs/src/components/inbox/UnsortedDatasetModal.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import UnsortedDataset from 'src/apps/mydb/inbox/UnsortedDataset';
-import Container from 'src/models/Container';
-
-export default class UnsortedDatasetModal extends React.Component {
-  render() {
-    const { show, datasetContainer, onHide } = this.props;
-    if (show) {
-      return (
-        <div>
-          <Modal animation show={show} bsSize="large" onHide={() => onHide()}>
-            <Modal.Header closeButton>
-              <Modal.Title>
-                Upload files to Inbox
-              </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <UnsortedDataset
-                datasetContainer={datasetContainer}
-                onModalHide={() => onHide()}
-              />
-            </Modal.Body>
-          </Modal>
-        </div>
-      )
-    } else {
-      return <div></div>
-    }
-  }
-}
-
-UnsortedDatasetModal.propTypes = {
-  onHide: PropTypes.func.isRequired,
-  datasetContainer: PropTypes.instanceOf(Container),
-  show: PropTypes.bool.isRequired,
-};
-UnsortedDatasetModal.defaultProps = {
-  datasetContainer: null,
-};
diff --git a/app/packs/src/components/managing_actions/ChildOverlay.js b/app/packs/src/components/managing_actions/ChildOverlay.js
deleted file mode 100644
index 4020ec3c5..000000000
--- a/app/packs/src/components/managing_actions/ChildOverlay.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { ListGroup } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-const ChildOverlay = ({ dataList, overlayAttributes }) => {
-  return (
-    <div {...overlayAttributes}>
-      <ListGroup>
-        {dataList}
-      </ListGroup>
-    </div>
-  );
-};
-
-ChildOverlay.propTypes = {
-  dataList: PropTypes.object,
-  overlayAttributes: PropTypes.object
-};
-
-export default ChildOverlay;
diff --git a/app/packs/src/components/managing_actions/ManagingActionButtons.js b/app/packs/src/components/managing_actions/ManagingActionButtons.js
deleted file mode 100644
index c53a378a1..000000000
--- a/app/packs/src/components/managing_actions/ManagingActionButtons.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import { DropdownButton, MenuItem, Button } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-const MoveOrAssignButton = ({ assignDisabled, moveDisabled, onClick, customClass }) => (
-  <DropdownButton
-    bsStyle={customClass ? null : 'success'}
-    className={customClass}
-    title={<i className="fa fa-arrow-right" />}
-    id="move-or-assign-btn"
-    disabled={assignDisabled && moveDisabled}
-  >
-    <MenuItem onSelect={() => onClick('move')} disabled={moveDisabled}>
-      Move to Collection
-    </MenuItem>
-    <MenuItem onSelect={() => onClick('assign')} disabled={assignDisabled}>
-      Assign to Collection
-    </MenuItem>
-  </DropdownButton>
-);
-
-MoveOrAssignButton.propTypes = {
-  assignDisabled: PropTypes.bool,
-  moveDisabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  customClass: PropTypes.string,
-};
-
-MoveOrAssignButton.defaultProps = {
-  assignDisabled: false,
-  moveDisabled: false,
-  customClass: null,
-  onClick: () => null,
-};
-
-const RemoveOrDeleteButton = ({ removeDisabled, deleteDisabled, onClick, customClass }) => (
-  <DropdownButton
-    bsStyle={customClass ? null : 'warning'}
-    className={customClass}
-    title={<i className="fa fa-minus-square" />}
-    id="remove-or-delete-btn"
-    disabled={removeDisabled && deleteDisabled}
-  >
-    <MenuItem onSelect={() => onClick('remove')} disabled={removeDisabled}>
-      Remove from current Collection
-    </MenuItem>
-    <MenuItem onSelect={() => onClick('delete')} disabled={deleteDisabled}>
-      Remove from all Collections
-    </MenuItem>
-  </DropdownButton>
-);
-
-RemoveOrDeleteButton.propTypes = {
-  removeDisabled: PropTypes.bool,
-  deleteDisabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  customClass: PropTypes.string,
-};
-
-RemoveOrDeleteButton.defaultProps = {
-  deleteDisabled: false,
-  removeDisabled: false,
-  customClass: null,
-  onClick: () => null,
-};
-
-const ShareButton = ({ isDisabled, customClass, onClick }) => (
-  <Button
-    bsStyle={customClass ? null : 'info'}
-    id="share-btn"
-    disabled={isDisabled}
-    onClick={() => onClick('share')}
-    className={customClass}
-  >
-    <i className="fa fa-share-alt" />
-  </Button>
-);
-
-ShareButton.propTypes = {
-  isDisabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  customClass: PropTypes.string,
-};
-
-ShareButton.defaultProps = {
-  isDisabled: false,
-  customClass: null,
-  onClick: () => null,
-};
-
-export { MoveOrAssignButton, ShareButton, RemoveOrDeleteButton };
diff --git a/app/packs/src/components/managing_actions/ManagingActions.js b/app/packs/src/components/managing_actions/ManagingActions.js
deleted file mode 100644
index 00368cf00..000000000
--- a/app/packs/src/components/managing_actions/ManagingActions.js
+++ /dev/null
@@ -1,249 +0,0 @@
-import React from 'react';
-import { ButtonGroup } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { List } from 'immutable';
-import { ShareButton, MoveOrAssignButton, RemoveOrDeleteButton } from 'src/components/managingActions/ManagingActionButtons';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import UserActions from 'src/stores/alt/actions/UserActions';
-import PermissionStore from 'src/stores/alt/stores/PermissionStore';
-import PermissionActions from 'src/stores/alt/actions/PermissionActions';
-import ManagingModalSharing from 'src/components/managingActions/ManagingModalSharing';
-import ManagingModalCollectionActions from 'src/components/managingActions/ManagingModalCollectionActions';
-import ManagingModalDelete from 'src/components/managingActions/ManagingModalDelete';
-import ManagingModalRemove from 'src/components/managingActions/ManagingModalRemove';
-import ManagingModalTopSecret from 'src/components/managingActions/ManagingModalTopSecret';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import { elementNames } from 'src/apps/generic/Utils';
-
-const upState = (state) => {
-  const { sample, reaction, screen, wellplate, research_plan } = state;
-  const stateObj = {
-    sample: {
-      checkedAll: sample ? sample.checkedAll : false,
-      checkedIds: sample ? sample.checkedIds : List(),
-      uncheckedIds: sample ? sample.uncheckedIds : List(),
-    },
-    reaction: {
-      checkedAll: reaction ? reaction.checkedAll : false,
-      checkedIds: reaction ? reaction.checkedIds : List(),
-      uncheckedIds: reaction ? reaction.uncheckedIds : List(),
-    },
-    wellplate: {
-      checkedAll: wellplate ? wellplate.checkedAll : false,
-      checkedIds: wellplate ? wellplate.checkedIds : List(),
-      uncheckedIds: wellplate ? wellplate.uncheckedIds : List(),
-    },
-    screen: {
-      checkedAll: screen ? screen.checkedAll : false,
-      checkedIds: screen ? screen.checkedIds : List(),
-      uncheckedIds: screen ? screen.uncheckedIds : List(),
-    },
-    research_plan: {
-      checkedAll: research_plan ? research_plan.checkedAll : false,
-      checkedIds: research_plan ? research_plan.checkedIds : List(),
-      uncheckedIds: research_plan ? research_plan.uncheckedIds : List(),
-    }
-  };
-
-  // eslint-disable-next-line no-unused-expressions
-  elementNames(false).forEach((klass) => {
-    stateObj[`${klass}`] = {
-      checkedAll: state[`${klass}`] ? state[`${klass}`].checkedAll : false,
-      checkedIds: state[`${klass}`] ? state[`${klass}`].checkedIds : List(),
-      uncheckedIds: state[`${klass}`] ? state[`${klass}`].uncheckedIds : List(),
-    };
-  });
-
-  return (stateObj);
-};
-
-export default class ManagingActions extends React.Component {
-  constructor(props) {
-    super(props);
-    const { currentUser, genericEls } = UserStore.getState();
-    this.state = {
-      currentUser,
-      currentCollection: { id: 0 },
-      sharing_allowed: false,
-      deletion_allowed: false,
-      remove_allowed: false,
-      is_top_secret: false,
-      genericEls: [],
-      ...upState({})
-    };
-
-    this.handleButtonClick = this.handleButtonClick.bind(this);
-    this.onChange = this.onChange.bind(this);
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.onPermissionChange = this.onPermissionChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    UIStore.listen(this.onChange);
-    PermissionStore.listen(this.onPermissionChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-    UIStore.unlisten(this.onChange);
-    PermissionStore.unlisten(this.onPermissionChange);
-  }
-
-  onChange(state) {
-    const {
-      sample, reaction, screen, wellplate, research_plan, genericEl, currentCollection
-    } = state;
-    if (this.collectionChanged(state)) {
-      this.setState({
-        sharing_allowed: false,
-        deletion_allowed: false,
-        remove_allowed: false,
-        is_top_secret: false,
-        hasSel: false,
-        currentCollection
-      });
-    }
-    else if (this.checkUIState(state)) {
-      const hasSel = elementNames(true).find(el => (
-        state[el] && (state[el].checkedIds.size > 0 || state[el].checkedAll)));
-      PermissionActions.fetchPermissionStatus(state);
-      this.setState({
-        ...upState(state), hasSel
-      });
-    }
-  }
-
-  onUserChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) {
-      this.setState({
-        currentUser: state.currentUser,
-      });
-    }
-    if (typeof state.genericEls !== 'undefined' && state.genericEls !== null) {
-      this.setState({
-        genericEls: state.genericEls
-      });
-    }
-  }
-
-  onPermissionChange(state) {
-    this.setState({ ...state });
-  }
-
-  collectionChanged(state) {
-    const { currentCollection } = state;
-    if (typeof this.state.currentCollection === 'undefined' || this.state.currentCollection == null
-    || typeof currentCollection === 'undefined' || currentCollection == null) return false;
-
-    return this.state.currentCollection.id !== currentCollection.id ||
-      this.state.currentCollection.is_sync_to_me !== currentCollection.is_sync_to_me;
-  }
-
-  checkUIState(state) {
-    const genericNames = (this.state.genericEls && this.state.genericEls.map(el => el.name)) || [];
-    const elNames = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].concat(genericNames);
-    const result = elNames.find(el => (this.state[el] && state[el] && (
-      state[el].checkedIds !== this.state[el].checkedIds ||
-      state[el].checkedAll !== this.state[el].checkedAll ||
-      state[el].uncheckedIds !== this.state[el].uncheckedIds
-    )));
-    return result;
-  }
-
-  handleButtonClick(type) {
-    const modalProps = { show: true, action: '', listSharedCollections: false };
-    switch (type) {
-      case 'share':
-        if (!this.state.is_top_secret) {
-          modalProps.title = "Sharing";
-          modalProps.component = ManagingModalSharing;
-        } else {
-          modalProps.title = "Sharing not allowed";
-          modalProps.component = ManagingModalTopSecret;
-        }
-        break;
-      case 'move':
-        modalProps.title = "Move to Collection";
-        modalProps.component = ManagingModalCollectionActions;
-        modalProps.action = ElementActions.updateElementsCollection;
-        modalProps.listSharedCollections = true;
-        break;
-      case 'remove':
-        modalProps.title = "Remove selected elements from this Collection?";
-        modalProps.component = ManagingModalRemove;
-        modalProps.action = ElementActions.removeElementsCollection;
-        break;
-      case 'assign':
-        modalProps.title = "Assign to Collection";
-        modalProps.component = ManagingModalCollectionActions;
-        modalProps.action = ElementActions.assignElementsCollection;
-        modalProps.listSharedCollections = false;
-        break;
-      case 'delete':
-        modalProps.title = "Delete from all Collections?";
-        modalProps.component = ManagingModalDelete;
-        modalProps.action = ElementActions.deleteElements;
-        break;
-    };
-
-    this.props.updateModalProps(modalProps);
-  }
-
-  render() {
-    const {
-      currentCollection, sharing_allowed, deletion_allowed, remove_allowed, is_top_secret, hasSel
-    } = this.state;
-    const { is_locked, is_shared, sharer, is_sync_to_me, label } = currentCollection;
-    const isAll = is_locked && label === 'All';
-    const noSel = !hasSel
-
-    const moveDisabled = noSel || isAll;
-    const assignDisabled = noSel;
-    const removeDisabled = noSel || isAll || !deletion_allowed; //!remove_allowed
-    const deleteDisabled = noSel || !deletion_allowed;
-    const shareDisabled = noSel || !sharing_allowed;
-
-    return (
-      <div style={{ display: 'inline', float: 'left', marginRight: 10 }}>
-        <ButtonGroup>
-          <MoveOrAssignButton
-            assignDisabled={assignDisabled}
-            moveDisabled={moveDisabled}
-            onClick={this.handleButtonClick}
-            customClass={this.props.customClass}
-          />
-          <RemoveOrDeleteButton
-            removeDisabled={removeDisabled}
-            deleteDisabled={deleteDisabled}
-            onClick={this.handleButtonClick}
-            customClass={this.props.customClass}
-          />
-          {/*
-          <ShareButton
-            isDisabled={shareDisabled}
-            onClick={this.handleButtonClick}
-            customClass={this.props.customClass}
-          />
-          */}
-        </ButtonGroup>
-      </div>
-    );
-  }
-}
-
-ManagingActions.propTypes = {
-  updateModalProps: PropTypes.func.isRequired,
-  customClass: PropTypes.string,
-  genericEls: PropTypes.array
-};
-
-ManagingActions.defaultProps = {
-  customClass: null,
-  genericEls: []
-};
diff --git a/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js b/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
deleted file mode 100644
index 9b50836c7..000000000
--- a/app/packs/src/components/managing_actions/ManagingModalCollectionActions.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import Select from 'react-select'
-
-export default class ManagingModalCollectionActions extends React.Component {
-  constructor(props) {
-    super(props);
-    const options = this.collectionOptions();
-    this.state = {
-      newLabel: null,
-      options: options,
-      selected: null,
-    }
-    this.onSelectChange = this.onSelectChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  onSelectChange(e) {
-    let selected = e && e.value
-    this.setState((previousProps, previousState) => {
-      return { ...previousState, selected: selected }
-    });
-  }
-
-  writableColls(colls) {
-    return colls.map(coll => {
-      return coll.permission_level >= 1 ? coll : null;
-    }).filter(r => r != null);
-  }
-
-  collectionEntries() {
-    const cState = CollectionStore.getState();
-    const cUnshared = [...cState.lockedRoots, ...cState.unsharedRoots];
-    let cShared = [];
-    let cSynced = [];
-    if (this.props.listSharedCollections) {
-      cState.sharedRoots.map(sharedR => cShared = [...cShared, ...sharedR.children]);
-      cState.syncInRoots.map(syncInR => cSynced = [...cSynced, ...syncInR.children]);
-      cSynced = this.writableColls(cSynced);
-    }
-
-    if (cShared.length > 0) { cShared[0] = Object.assign(cShared[0], { first: true }); }
-    if (cSynced.length > 0) { cSynced[0] = Object.assign(cSynced[0], { first: true }); }
-
-    const cAll = [...cUnshared, ...cShared, ...cSynced];
-    let cAllTree = [];
-    this.makeTree(cAllTree, cAll, 0);
-    return cAllTree;
-  }
-
-  makeTree(tree, collections, depth) {
-    collections.forEach((collection, index) => {
-      tree.push({
-        id: collection.id,
-        label: collection.label,
-        depth: depth,
-        first: collection.first,
-        is_shared: collection.is_shared,
-        is_sync_to_me: collection.is_sync_to_me
-      });
-      if (collection.children && collection.children.length > 0) {
-        this.makeTree(tree, collection.children, depth + 1)
-      }
-    });
-  }
-
-  collectionOptions() {
-    const cAllTree = this.collectionEntries();
-    if (cAllTree.length === 0) return [];
-    const options = cAllTree.map(leaf => {
-      const indent = "\u00A0".repeat(leaf.depth * 3 + 1);
-      const className = leaf.first ? "separator" : "";
-      return {
-        value: `${leaf.id}-${leaf.is_sync_to_me ? "is_sync_to_me" : ""}`,
-        label: indent + leaf.label,
-        className: className
-      };
-    });
-    return options;
-  }
-
-  handleSubmit() {
-    const { selected, newLabel } = this.state;
-    const collection_id = selected && parseInt(selected.split("-")[0]);
-    const is_sync_to_me = selected && selected.split("-")[1] == "is_sync_to_me";
-    const ui_state = UIStore.getState();
-
-    this.props.action({
-      ui_state, collection_id, is_sync_to_me, newLabel
-    });
-    this.props.onHide();
-  }
-
-  submitButton() {
-    const { newLabel, selected } = this.state
-    const l = newLabel && newLabel.length
-    return l && l > 0 ? (
-      <Button bsStyle="warning" onClick={this.handleSubmit}>
-        Create collection &lsquo;{newLabel}&rsquo; and Submit
-      </Button>
-    ) : (
-      <Button bsStyle="warning" onClick={this.handleSubmit} disabled={!selected}>
-        Submit
-      </Button>
-    );
-  }
-
-  render() {
-    const { options, selected } = this.state;
-    const onChange = (e) => {
-      const val = e.target && e.target.value
-      this.setState((previousState) => {
-        return { ...previousState, newLabel: val }
-      });
-    }
-    return (
-      <div>
-        <FormGroup>
-          <ControlLabel>Select a Collection</ControlLabel>
-          <Select
-            options={options}
-            value={selected}
-            onChange={this.onSelectChange}
-            className="select-assign-collection"
-          />
-        </FormGroup>
-        <FormGroup style={{ display: 'none'}} >
-          <ControlLabel>or Create a new Collection</ControlLabel>
-          <FormControl
-            type="text"
-            placeholder="-- Please insert collection name --"
-            onChange={onChange}
-          />
-        </FormGroup>
-        {this.submitButton()}
-      </div>
-    )
-  }
-}
-
-ManagingModalCollectionActions.propTypes = {
-  action: PropTypes.func,
-  onHide: PropTypes.func,
-  listSharedCollections: PropTypes.bool,
-}
diff --git a/app/packs/src/components/managing_actions/ManagingModalDelete.js b/app/packs/src/components/managing_actions/ManagingModalDelete.js
deleted file mode 100644
index 86014abb7..000000000
--- a/app/packs/src/components/managing_actions/ManagingModalDelete.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { Button, ButtonToolbar, Checkbox, OverlayTrigger, Tooltip, Label } from 'react-bootstrap';
-
-export default class ManagingModalDelete extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      deleteSubsamples: false,
-    };
-
-    this.handleCheck = this.handleCheck.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.onHide = this.onHide.bind(this);
-  }
-
-  onHide() {
-    this.props.onHide();
-  }
-
-  handleClick() {
-    const { onHide, action } = this.props;
-    action(this.state);
-    onHide();
-  }
-
-  handleCheck() {
-    const { deleteSubsamples } = this.state;
-
-    this.setState({
-      deleteSubsamples: !deleteSubsamples,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <Checkbox
-          onChange={this.handleCheck}
-          checked={this.state.deleteSubsamples}
-        >
-          Also delete reaction associated samples&nbsp;
-          <OverlayTrigger
-            placement="bottom"
-            overlay={<Tooltip id="delete_reaction_samples_info">if left unchecked, only the solvent and reactant samples of the selected reactions will be deleted</Tooltip>}
-          >
-            <Label>?</Label>
-          </OverlayTrigger>
-        </Checkbox>
-        <ButtonToolbar>
-          <Button bsStyle="primary" onClick={this.onHide}>Cancel</Button>
-          <Button bsStyle="warning" onClick={this.handleClick}>Delete</Button>
-        </ButtonToolbar>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/components/managing_actions/ManagingModalRemove.js b/app/packs/src/components/managing_actions/ManagingModalRemove.js
deleted file mode 100644
index 0e91a9643..000000000
--- a/app/packs/src/components/managing_actions/ManagingModalRemove.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonToolbar } from 'react-bootstrap';
-
-import UIStore from 'src/stores/alt/stores/UIStore';
-
-const ManagingModalRemove = ({ onHide, action }) => {
-  const ui_state = UIStore.getState();
-  return (
-    <ButtonToolbar>
-      <Button bsStyle="primary" onClick={() => onHide()}>Cancel</Button>
-      <Button
-        bsStyle="warning"
-        onClick={() => { action({ ui_state }); onHide(); }}
-      >
-        Remove
-      </Button>
-    </ButtonToolbar>
-  );
-};
-
-ManagingModalRemove.propTypes = {
-  onHide: PropTypes.func.isRequired,
-  action: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func
-  ]).isRequired
-};
-
-export default ManagingModalRemove;
diff --git a/app/packs/src/components/managing_actions/ManagingModalSharing.js b/app/packs/src/components/managing_actions/ManagingModalSharing.js
deleted file mode 100644
index e9a114dbb..000000000
--- a/app/packs/src/components/managing_actions/ManagingModalSharing.js
+++ /dev/null
@@ -1,433 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
-import Select from 'react-select';
-
-import SharingShortcuts from 'src/components/managingActions/SharingShortcuts';
-
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import UserActions from 'src/stores/alt/actions/UserActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import UsersFetcher from 'src/fetchers/UsersFetcher';
-import MatrixCheck from 'src/components/common/MatrixCheck';
-import { selectUserOptionFormater } from 'src/utilities/selectHelper';
-import { elementNames } from 'src/apps/generic/Utils';
-
-export default class ManagingModalSharing extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    // TODO update for new check/uncheck info
-    let { currentUser } = UserStore.getState();
-    this.state = {
-      currentUser: currentUser,
-      role: 'Pick a sharing role',
-      permissionLevel: props.permissionLevel,
-      sampleDetailLevel: props.sampleDetailLevel,
-      reactionDetailLevel: props.reactionDetailLevel,
-      wellplateDetailLevel: props.wellplateDetailLevel,
-      screenDetailLevel: props.screenDetailLevel,
-      elementDetailLevel: props.elementDetailLevel,
-      selectedUsers: null,
-    }
-
-    this.onUserChange = this.onUserChange.bind(this);
-    this.handleSelectUser = this.handleSelectUser.bind(this);
-    this.handleSharing = this.handleSharing.bind(this);
-    this.promptTextCreator = this.promptTextCreator.bind(this);
-
-    this.loadUserByName = this.loadUserByName.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onUserChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onUserChange);
-  }
-
-  onUserChange(state) {
-    this.setState({
-      currentUser: state.currentUser
-    })
-  }
-
-  isElementSelectionEmpty(element) {
-    return !element.checkedAll &&
-      element.checkedIds.size == 0 &&
-      element.uncheckedIds.size == 0;
-  }
-
-  isSelectionEmpty(uiState) {
-    let isSampleSelectionEmpty = this.isElementSelectionEmpty(uiState.sample);
-    let isReactionSelectionEmpty = this.isElementSelectionEmpty(uiState.reaction);
-    let isWellplateSelectionEmpty = this.isElementSelectionEmpty(uiState.wellplate);
-    let isScreenSelectionEmpty = this.isElementSelectionEmpty(uiState.screen);
-
-    let isElementSelectionEmpty = false;
-
-    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
-
-      // eslint-disable-next-line no-unused-expressions
-      elementNames(false).forEach((klass) => {
-        isElementSelectionEmpty = isElementSelectionEmpty && this.isElementSelectionEmpty(uiState[`${klass}`]);
-      });
-    }
-
-    return isSampleSelectionEmpty && isReactionSelectionEmpty &&
-      isWellplateSelectionEmpty && isScreenSelectionEmpty &&
-      isElementSelectionEmpty;
-  }
-
-  filterParamsWholeCollection(uiState) {
-    let collectionId = uiState.currentCollection.id;
-    let filterParams = {
-      sample: {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      },
-      reaction: {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      },
-      wellplate: {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      },
-      screen: {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      },
-      research_plan: {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      },
-      currentSearchSelection: uiState.currentSearchSelection
-    };
-
-    elementNames(false).forEach((klass) => {
-      filterParams[`${klass}`] = {
-        all: true,
-        included_ids: [],
-        excluded_ids: [],
-        collection_id: collectionId
-      };
-    });
-
-    return filterParams;
-  }
-
-  filterParamsFromUIState(uiState) {
-    let collectionId = uiState.currentCollection.id;
-
-    let filterParams = {
-      sample: {
-        all: uiState.sample.checkedAll,
-        included_ids: uiState.sample.checkedIds,
-        excluded_ids: uiState.sample.uncheckedIds,
-        collection_id: collectionId
-      },
-      reaction: {
-        all: uiState.reaction.checkedAll,
-        included_ids: uiState.reaction.checkedIds,
-        excluded_ids: uiState.reaction.uncheckedIds,
-        collection_id: collectionId
-      },
-      wellplate: {
-        all: uiState.wellplate.checkedAll,
-        included_ids: uiState.wellplate.checkedIds,
-        excluded_ids: uiState.wellplate.uncheckedIds,
-        collection_id: collectionId
-      },
-      screen: {
-        all: uiState.screen.checkedAll,
-        included_ids: uiState.screen.checkedIds,
-        excluded_ids: uiState.screen.uncheckedIds,
-        collection_id: collectionId
-      },
-      research_plan: {
-        all: uiState.research_plan.checkedAll,
-        included_ids: uiState.research_plan.checkedIds,
-        excluded_ids: uiState.research_plan.uncheckedIds,
-        collection_id: collectionId
-      },
-      currentSearchSelection: uiState.currentSearchSelection
-    };
-
-    elementNames(false).forEach((klass) => {
-      filterParams[`${klass}`] = {
-        all: uiState[`${klass}`].checkedAll,
-        included_ids: uiState[`${klass}`].checkedIds,
-        excluded_ids: uiState[`${klass}`].uncheckedIds,
-        collection_id: collectionId
-      };
-    });
-    return filterParams;
-  }
-
-  handleSharing() {
-    const {
-      permissionLevel, sampleDetailLevel, reactionDetailLevel,
-      wellplateDetailLevel, screenDetailLevel, elementDetailLevel
-    } = this.state;
-
-    const params = {
-      id: this.props.collectionId,
-      collection_attributes: {
-        permission_level: permissionLevel,
-        sample_detail_level: sampleDetailLevel,
-        reaction_detail_level: reactionDetailLevel,
-        wellplate_detail_level: wellplateDetailLevel,
-        screen_detail_level: screenDetailLevel,
-        element_detail_level: elementDetailLevel
-      },
-    };
-
-    if (this.props.collAction === "Create") {
-      const userIds = this.state.selectedUsers;
-      const uiState = UIStore.getState();
-      const currentCollection = uiState.currentCollection;
-      const filterParams =
-        this.isSelectionEmpty(uiState)
-          ? this.filterParamsWholeCollection(uiState)
-          : this.filterParamsFromUIState(uiState);
-      const fullParams = {
-        ...params,
-        elements_filter: filterParams,
-        user_ids: userIds,
-        currentCollection
-      };
-      CollectionActions.createSharedCollections(fullParams);
-    }
-
-    if (this.props.collAction === 'Update') { CollectionActions.updateSharedCollection(params); }
-
-    if (this.props.collAction === 'EditSync') { CollectionActions.editSync(params); }
-
-    if (this.props.collAction === 'CreateSync') {
-      const userIds = this.state.selectedUsers;
-      const fullParams = {
-        ...params,
-        user_ids: userIds,
-      };
-      CollectionActions.createSync(fullParams);
-    }
-
-    this.props.onHide();
-  }
-
-  handleShortcutChange(e) {
-    let val = e.target.value
-    let permAndDetLevs = {}
-    switch (val) {
-      case 'user':
-        permAndDetLevs = SharingShortcuts.user();
-        break;
-      case 'partner':
-        permAndDetLevs = SharingShortcuts.partner();
-        break;
-      case 'collaborator':
-        permAndDetLevs = SharingShortcuts.collaborator();
-        break;
-      case 'reviewer':
-        permAndDetLevs = SharingShortcuts.reviewer();
-        break;
-      case 'supervisor':
-        permAndDetLevs = SharingShortcuts.supervisor();
-        break;
-    }
-    this.setState({ ...permAndDetLevs, role: val });
-  }
-
-  handlePLChange(e) {
-    let val = e.target.value
-    this.setState({
-      role: 'Pick a sharing role',
-      permissionLevel: val
-    });
-  }
-
-  handleDLChange(e, elementType) {
-    let val = e.target.value
-    let state = {}
-    state[elementType + 'DetailLevel'] = val
-    state.role = 'Pick a sharing role'
-    this.setState(state)
-  }
-
-  handleSelectUser(val) {
-    if (val) {
-      this.setState({ selectedUsers: val })
-    }
-  }
-
-  loadUserByName(input) {
-    let { selectedUsers } = this.state;
-
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-
-    return UsersFetcher.fetchUsersByName(input, 'Person,Group')
-      .then((res) => selectUserOptionFormater(
-        { data: res, withType: true, currentUserId: this.state.currentUser.id }
-      )).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  promptTextCreator(label) {
-    return ("Share with \"" + label + "\"");
-  }
-
-  selectUsers() {
-    let style = this.props.selectUsers ? {} : { display: 'none' };
-    let { selectedUsers } = this.state;
-
-    return (
-      <div style={style}>
-        <ControlLabel>Select Users to share with</ControlLabel>
-        <Select.AsyncCreatable id="share-users-select" multi={true} isLoading={true}
-          backspaceRemoves={true} value={selectedUsers}
-          valueKey="value" labelKey="label" matchProp="name"
-          promptTextCreator={this.promptTextCreator}
-          loadOptions={this.loadUserByName}
-          onChange={this.handleSelectUser}
-        />
-      </div>
-    )
-  }
-
-  render() {
-    const displayWarning = (this.state.permissionLevel || '') === '5' ? 'inline-block' : 'none';
-    return (
-      <div>
-        <FormGroup controlId="shortcutSelect">
-          <ControlLabel>Role</ControlLabel>
-          <FormControl componentClass="select"
-            placeholder="Pick a sharing role (optional)"
-            value={this.state.role || ''}
-            onChange={(e) => this.handleShortcutChange(e)}>
-            <option value='Pick a sharing role'>Pick a sharing role (optional)</option>
-            <option value='user'>User</option>
-            <option value='partner'>Partner</option>
-            <option value='collaborator'>Collaborator</option>
-            <option value='reviewer'>Reviewer</option>
-            <option value='supervisor'>Supervisor</option>
-          </FormControl>
-        </FormGroup>
-        <FormGroup controlId="permissionLevelSelect" id="permissionLevelSelect">
-          <ControlLabel>Permission level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handlePLChange(e)}
-            value={this.state.permissionLevel || ''}>
-            <option value='0'>Read</option>
-            <option value='1'>Write</option>
-            <option value='2'>Share</option>
-            <option value='3'>Delete</option>
-            <option value='4'>Import Elements</option>
-            <option value='5'>Pass ownership</option>
-          </FormControl>
-          <div style={{
-            color: '#d9534f', fontSize: '12px', paddingLeft: '8px', paddingTop: '4px', display: displayWarning
-          }}
-          >
-            <i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;Transfering ownership applies for all sub collections.
-          </div>
-        </FormGroup>
-        <FormGroup controlId="sampleDetailLevelSelect">
-          <ControlLabel>Sample detail level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handleDLChange(e, 'sample')}
-            value={this.state.sampleDetailLevel || ''}>
-            <option value='0'>Molecular mass of the compound, external label</option>
-            <option value='1'>Molecule, structure</option>
-            <option value='2'>Analysis Result + Description</option>
-            <option value='3'>Analysis Datasets</option>
-            <option value='10'>Everything</option>
-          </FormControl>
-        </FormGroup>
-        <FormGroup controlId="reactionDetailLevelSelect">
-          <ControlLabel>Reaction detail level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handleDLChange(e, 'reaction')}
-            value={this.state.reactionDetailLevel || ''}>
-            <option value='0'>Observation, description, calculation</option>
-            <option value='10'>Everything</option>
-          </FormControl>
-        </FormGroup>
-        <FormGroup controlId="wellplateDetailLevelSelect">
-          <ControlLabel>Wellplate detail level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handleDLChange(e, 'wellplate')}
-            value={this.state.wellplateDetailLevel || ''}>
-            <option value='0'>Wells (Positions)</option>
-            <option value='1'>Readout</option>
-            <option value='10'>Everything</option>
-          </FormControl>
-        </FormGroup>
-        <FormGroup controlId="screenDetailLevelSelect">
-          <ControlLabel>Screen detail level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handleDLChange(e, 'screen')}
-            value={this.state.screenDetailLevel || ''}>
-            <option value='0'>Name, description, condition, requirements</option>
-            <option value='10'>Everything</option>
-          </FormControl>
-        </FormGroup>
-        <FormGroup controlId="screenDetailLevelSelect">
-          <ControlLabel>Element detail level</ControlLabel>
-          <FormControl componentClass="select"
-            onChange={(e) => this.handleDLChange(e, 'element')}
-            value={this.state.elementDetailLevel || ''}>
-            <option value='10'>Everything</option>
-          </FormControl>
-        </FormGroup>
-        {this.selectUsers()}
-        <br />
-        <Button id="create-sync-shared-col-btn" bsStyle="warning" onClick={this.handleSharing}>{this.props.collAction} Shared Collection</Button>
-      </div>
-    )
-  }
-}
-
-ManagingModalSharing.propTypes = {
-  collectionId: PropTypes.number,
-  collAction: PropTypes.string,
-  selectUsers: PropTypes.bool,
-  permissionLevel: PropTypes.number,
-  sampleDetailLevel: PropTypes.number,
-  reactionDetailLevel: PropTypes.number,
-  wellplateDetailLevel: PropTypes.number,
-  screenDetailLevel: PropTypes.number,
-  elementDetailLevel: PropTypes.number,
-  onHide: PropTypes.func.isRequired,
-  listSharedCollections: PropTypes.bool
-};
-
-ManagingModalSharing.defaultProps = {
-  collectionId: null,
-  collAction: "Create",
-  selectUsers: true,
-  permissionLevel: 0,
-  sampleDetailLevel: 0,
-  reactionDetailLevel: 0,
-  wellplateDetailLevel: 0,
-  screenDetailLevel: 0,
-  elementDetailLevel: 10
-};
diff --git a/app/packs/src/components/managing_actions/ManagingModalTopSecret.js b/app/packs/src/components/managing_actions/ManagingModalTopSecret.js
deleted file mode 100644
index 4a086aab7..000000000
--- a/app/packs/src/components/managing_actions/ManagingModalTopSecret.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-export default class ManagingModalTopSecret extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div>
-        One of the selected elements contains one or several samples marked as top secret.
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/models/AnalysesExperiment.js b/app/packs/src/components/models/AnalysesExperiment.js
deleted file mode 100644
index f8a1a84e8..000000000
--- a/app/packs/src/components/models/AnalysesExperiment.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import Element from 'src/models/Element'
-import uuid from 'uuid';
-
-export default class AnalysesExperiment extends Element {
-  constructor({
-    id, devices_analysis_id, holder_id, status, solvent, experiment, priority, on_day, sample_analysis_id,
-    number_of_scans, sweep_width, time, analysis_barcode, sample_short_label, sample_id, devices_sample_id
-  }) {
-    const analysis = {
-      id: id,
-      deviceAnalysisId: devices_analysis_id,
-      holderId: holder_id,
-      status: status,
-      solvent: solvent,
-      experiment: experiment,
-      priority: priority,
-      onDay: on_day,
-      numberOfScans: number_of_scans,
-      sweepWidth: sweep_width,
-      time: time,
-      analysisBarcode: analysis_barcode,
-      sampleShortLabel: sample_short_label,
-      sampleId: sample_id,
-      deviceSampleId: devices_sample_id,
-      sampleAnalysisId: sample_analysis_id,
-    }
-    super(analysis)
-  }
-
-  static buildEmpty(sampleId, sampleShortLabel, sampleAnalysisId, deviceSampleId) {
-    return new AnalysesExperiment({
-      id: uuid.v1(),
-      devices_sample_id: deviceSampleId,
-      devices_analysis_id: null,
-      holder_id: null,
-      status: "",
-      solvent: "",
-      experiment: "",
-      priority: false,
-      on_day: true,
-      number_of_scans: 0,
-      sweep_width: 0,
-      time: "",
-      analysis_barcode: "",
-      sample_short_label: sampleShortLabel,
-      sample_id: sampleId,
-      sample_analysis_id: sampleAnalysisId,
-    })
-  }
-
-  serialize() {
-    const serialized = super.serialize({
-      devices_analysis_id: this.deviceAnalysisId,
-      holder_id: this.holderId,
-      status: this.status,
-      solvent: this.solvent,
-      experiment: this.experiment,
-      priority: this.priority,
-      on_day: this.onDay,
-      number_of_scans: parseInt(this.numberOfScans, 10),
-      sweep_width: parseInt(this.sweepWidth, 10),
-      time: this.time,
-      sample_id: this.sampleId,
-      devices_sample_id: this.deviceSampleId,
-      sample_analysis_id: this.sampleAnalysisId,
-    })
-    return serialized
-  }
-
-  buildConfig() {
-    const configMap = {
-      'SOLVENT': this.solvent,
-      'EXPERIMENT': this.experiment,
-      'NAME': this.sampleShortLabel,
-      'BARCODE': this.analysisBarcode,
-      'PARAMETERS': `ns, ${this.numberOfScans}, sw, ${this.sweepWidth}`
-    }
-    const conditionedNight = !this.onDay ? { 'NIGHT': null } : {}
-    const conditionedPriority = this.priority ? { 'PRIORITY': null } : {}
-    return {
-      sample_id: this.sampleId,
-      data: [{
-        ...configMap,
-        ...conditionedNight,
-        ...conditionedPriority
-      }]
-    }
-  }
-}
-
diff --git a/app/packs/src/components/models/Analysis.js b/app/packs/src/components/models/Analysis.js
deleted file mode 100644
index 55c734e31..000000000
--- a/app/packs/src/components/models/Analysis.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Analysis extends Element {
-  static buildEmpty() {
-    return new Analysis({
-      name: 'new Analysis',
-      type: 'analysis',
-      kind: '',
-      status: '',
-      content: '',
-      description: '',
-      datasets: [],
-      bar_code: null,
-      qr_code: null,
-      bruker_code: null
-    })
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get type() {
-    return this._type;
-  }
-
-  set type(type) {
-    this._type = type;
-  }
-
-  get datasets() {
-    return this._datasets || [];
-  }
-
-  set datasets(datasets) {
-    this._datasets = datasets.map(dataset => new Dataset(dataset));
-  }
-
-  updateDataset(changedDataset) {
-    this._datasets.find(dataset => {
-      if (dataset.id == changedDataset.id) {
-        const datasetId = this.datasets.indexOf(dataset);
-        this.datasets[datasetId] = changedDataset;
-      }
-    });
-  }
-
-  serialize() {
-    return super.serialize({
-      name: this.name,
-      kind: this.kind,
-      status: this.status,
-      content: this.content,
-      description: this.description,
-      datasets: this.datasets.map(d => d.serialize()),
-      bar_code: this.barcode,
-      qr_code: this.qr_code,
-      bruker_code: this.bruker_code
-    })
-  }
-
-}
diff --git a/app/packs/src/components/models/Attachment.js b/app/packs/src/components/models/Attachment.js
deleted file mode 100644
index 71c58783b..000000000
--- a/app/packs/src/components/models/Attachment.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Element from './Element';
-
-export default class Attachment extends Element {
-
-  static fromFile(file) {
-    return new Attachment(
-      {
-        file: file,
-        name: file.name,
-        filename: file.name,
-        identifier: file.id,
-        is_deleted: false,
-      }
-    )
-  }
-
-  get preview() {
-    return this._preview;
-  }
-
-  set preview(preview) {
-    this._preview = preview;
-  }
-
-  serialize() {
-    return super.serialize({
-      filename: this.filename,
-      identifier: this.identifier,
-      file: this.file,
-      thumb: this.thumb,
-      content_type: this.content_type,
-      is_deleted: this.is_deleted,
-    })
-  }
-
-}
diff --git a/app/packs/src/components/models/ComputeTask.js b/app/packs/src/components/models/ComputeTask.js
deleted file mode 100644
index 77c5f69a8..000000000
--- a/app/packs/src/components/models/ComputeTask.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Element from './Element';
-
-export default class ComputeTask extends Element {
-  static buildEmpty() {
-    return new ComputeTask({ type: 'task' });
-  }
-}
diff --git a/app/packs/src/components/models/Container.js b/app/packs/src/components/models/Container.js
deleted file mode 100644
index 7416126e1..000000000
--- a/app/packs/src/components/models/Container.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Container extends Element {
-  static buildEmpty() {
-    return new Container({
-      name: 'new',
-      children: [],
-      attachments: [],
-      is_deleted: false,
-      description: '',
-      extended_metadata: {
-        report: true,
-      },
-      container_type: '',
-    });
-  }
-
-  static buildAnalysis(kind = 'other', name = '') {
-    var analysis = this.buildEmpty()
-    analysis.container_type = "analysis"
-    analysis.extended_metadata['kind'] = kind
-    analysis.name = name
-    return analysis
-  }
-
-  static init() {
-    var root = this.buildEmpty();
-    root.container_type = 'root';
-
-    var analyses = this.buildEmpty();
-    analyses.container_type = 'analyses';
-
-    root.children.push(analyses);
-
-    return root;
-  }
-
-  name() {
-    return this.name;
-  }
-
-  serialize() {
-    return super.serialize({
-      id: this.id,
-      name: this.name,
-      children: this.children,
-      attachments: this.attachments.map(a => a.serialize()),
-      is_new: this.isNew || false,
-      is_deleted: this.deleted || false,
-      description: this.description,
-      extended_metadata: this.extended_metadata,
-      container_type: this.container_type,
-    })
-  }
-}
diff --git a/app/packs/src/components/models/Device.js b/app/packs/src/components/models/Device.js
deleted file mode 100644
index 57efdd687..000000000
--- a/app/packs/src/components/models/Device.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import Element from 'src/models/Element';
-import DeviceAnalysis from 'src/models/DeviceAnalysis';
-import DeviceSample from 'src/models/DeviceSample';
-
-export default class Device extends Element {
-  constructor({ id, title, code, types, user_id, samples, devices_analyses }) {
-    const device = {
-      id,
-      title,
-      code,
-      types,
-      user_id,
-      type: 'device',
-      samples: samples.map(s => new DeviceSample(s)),
-      devicesAnalyses: devices_analyses.map(analysis => new DeviceAnalysis(analysis))
-    }
-    super(device)
-  }
-
-  checksum() {
-    return super.checksum(
-      ['user_id', 'id', 'is_new', 'isNew', 'isEdited', 'isPendingToSave', 'devicesAnalyses', 'samples']
-    )
-  }
-
-  static buildEmpty() {
-    return new Device({
-      type: 'device',
-      code: "",
-      types: [],
-      samples: [],
-      title: "New Device",
-      devices_analyses: []
-    })
-  }
-
-  serialize() {
-    const serialized = super.serialize({
-      id: this.id,
-      code: this.code,
-      types: this.types,
-      samples: this.samples.map(s => s.serialize()),
-      title: this.title,
-    })
-    return serialized
-  }
-}
diff --git a/app/packs/src/components/models/DeviceAnalysis.js b/app/packs/src/components/models/DeviceAnalysis.js
deleted file mode 100644
index eb0fd8492..000000000
--- a/app/packs/src/components/models/DeviceAnalysis.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Element from 'src/models/Element'
-import AnalysesExperiment from 'src/models/AnalysesExperiment'
-import _ from 'lodash'
-
-export default class DeviceAnalysis extends Element {
-  constructor({
-    id, device_id, analysis_type, title, experiments
-  }) {
-    const analysis = {
-      id: id,
-      deviceId: device_id,
-      experiments: experiments.map((e) => new AnalysesExperiment(e)),
-      type: 'deviceAnalysis',
-      analysisType: analysis_type,
-      title,
-    }
-    super(analysis)
-  }
-
-  static buildEmpty(deviceId, analysisType) {
-    return new DeviceAnalysis({
-      device_id: deviceId,
-      experiments: [],
-      type: 'deviceAnalysis',
-      analysis_type: analysisType,
-      title: `${deviceId}: NMR`,
-    })
-  }
-
-  serialize() {
-    const serialized = super.serialize({
-      device_id: this.deviceId,
-      experiments: this.experiments.map((e) => e.serialize()),
-      analysis_type: this.analysisType,
-      title: this.title,
-    })
-    return serialized
-  }
-}
diff --git a/app/packs/src/components/models/DeviceControl.js b/app/packs/src/components/models/DeviceControl.js
deleted file mode 100644
index 30a1ce8ba..000000000
--- a/app/packs/src/components/models/DeviceControl.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class DeviceControl extends Element {
-
-  static buildEmpty() {
-    return new DeviceControl({
-      type: 'deviceCtrl',
-    })
-  }
-
-}
diff --git a/app/packs/src/components/models/DeviceSample.js b/app/packs/src/components/models/DeviceSample.js
deleted file mode 100644
index 086939b98..000000000
--- a/app/packs/src/components/models/DeviceSample.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Element from 'src/models/Element';
-import uuid from 'uuid';
-
-export default class DeviceSample extends Element {
-  constructor({ id, device_id, sample_id, types, short_label }) {
-    const deviceSample = {
-      id,
-      deviceId: device_id,
-      sampleId: sample_id,
-      types,
-      shortLabel: short_label,
-    }
-    super(deviceSample)
-  }
-
-  static buildEmpty(deviceId, sample) {
-    return new DeviceSample({
-      id: uuid.v1(),
-      device_id: deviceId,
-      sample_id: sample.id,
-      short_label: sample.short_label,
-      types: [],
-    })
-  }
-
-  serialize() {
-    const serialized = super.serialize({
-      id: this.id,
-      device_id: this.deviceId,
-      sample_id: this.sampleId,
-      types: this.types,
-    })
-    return serialized
-  }
-}
diff --git a/app/packs/src/components/models/Element.js b/app/packs/src/components/models/Element.js
deleted file mode 100644
index f351911eb..000000000
--- a/app/packs/src/components/models/Element.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import uuid from 'uuid';
-import sha256 from 'sha256';
-import _ from 'lodash';
-
-export default class Element {
-
-  constructor(args) {
-    Object.assign(this, args);
-    if(!this.id) {
-      this.id = Element.buildID();
-      this.is_new = true
-    }
-    this.updateChecksum();
-  }
-
-  isMethodDisabled(m) {
-    return this[m] == '***'
-  }
-
-  static buildID() {
-    return uuid.v1();
-  }
-
-  get isEdited() {
-    return this._checksum != this.checksum();
-  }
-
-  checksum(fieldsToOmit = []) {
-    return sha256(JSON.stringify(_.omit(_.omit(
-      this,
-      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'sealed', ...fieldsToOmit],
-    ), _.isEmpty)));
-  }
-
-  get getChecksum() {
-    return this._checksum
-  }
-
-  get isNew() {
-    return this.is_new == true
-  }
-
-  get isPendingToSave() {
-    return !_.isEmpty(this) && (this.isNew || this.isEdited);
-  }
-
-  updateChecksum(cs) {
-    if (cs) {
-      this._checksum = cs
-    } else {
-      this._checksum = this.checksum();
-    }
-  }
-
-  buildCopy() {
-    return new this.constructor(_.omit(this, 'id'))
-  }
-
-  clone() {
-    return new this.constructor(this);
-  }
-
-  // methods regarding sharing and detail levels
-  isRestricted() {
-    return this.is_restricted;
-  }
-
-  title() {
-    return this.name;
-  }
-
-  // base serializer
-  serialize(extraParams = {}) {
-    let params = {
-      id: this.id,
-      type: this.type,
-      is_new: this.isNew || false,
-      collection_id: this.collection_id
-    }
-    _.merge(params, extraParams);
-    let paramsWithoutNullEntries = _.omit(params, _.isNull);
-    let cleanParams = _.omit(paramsWithoutNullEntries, (x) => { return x == '***'})
-    return cleanParams;
-  }
-
-  // Default empty quill-delta
-  static quillDefault() {
-    return { ops: [{ insert: '\n' }] };
-  }
-}
diff --git a/app/packs/src/components/models/Format.js b/app/packs/src/components/models/Format.js
deleted file mode 100644
index 4602e5fb5..000000000
--- a/app/packs/src/components/models/Format.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Format extends Element {
-  static buildEmpty() {
-    return new Format({ type: 'format' });
-  }
-}
diff --git a/app/packs/src/components/models/GenericDS.js b/app/packs/src/components/models/GenericDS.js
deleted file mode 100644
index f681894c4..000000000
--- a/app/packs/src/components/models/GenericDS.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Element from './Element';
-
-export default class GenericDS extends Element {
-  static buildEmpty(klass, containerId) {
-    const template = (klass && klass.properties_release) || {};
-    return new GenericDS({
-      dataset_klass_id: klass && klass.id,
-      element_type: 'Container',
-      element_id: containerId,
-      properties: template,
-      klass_ols: klass.ols_term_id,
-      klass_label: klass.label,
-      changed: false
-    });
-  }
-
-  serialize() {
-    return super.serialize({
-      dataset_klass_id: this.dataset_klass_id,
-      element_type: 'Container',
-      element_id: this.element_id,
-      properties: this.properties,
-    });
-  }
-
-  get datasetKlassId() {
-    return this.dataset_klass_id;
-  }
-
-  /**
-   * @param {any} datasetKlassId
-   */
-  set datasetKlassId(datasetKlassId) {
-    this.dataset_klass_id = datasetKlassId;
-  }
-
-  get getProperties() {
-    return this.properties;
-  }
-
-  /**
-   * @param {any} properties
-   */
-  set setProperties(properties) {
-    this.properties = properties;
-  }
-
-  get klassOls() {
-    return this.klass_ols;
-  }
-
-  set klassOls(klassOls) {
-    this.klass_ols = klassOls;
-  }
-
-  get klassLabel() {
-    return this.klass_label;
-  }
-
-  set klassLabel(klassLabel) {
-    this.klass_label = klassLabel;
-  }
-}
diff --git a/app/packs/src/components/models/GenericEl.js b/app/packs/src/components/models/GenericEl.js
deleted file mode 100644
index 0909f321c..000000000
--- a/app/packs/src/components/models/GenericEl.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { isEmpty, filter } from 'lodash';
-import Element from './Element';
-import Container from './Container';
-import UserStore from '../stores/UserStore';
-import Segment from './Segment';
-
-export default class GenericEl extends Element {
-
-  // eslint-disable-next-line camelcase
-  static buildEmpty(collection_id, klass) {
-    const template = (klass && klass.properties_release) || {};
-    return new GenericEl({
-      collection_id,
-      type: klass.name,
-      element_klass_id: this.element_klass_id || (klass && klass.id),
-      short_label: GenericEl.buildNewShortLabel(klass),
-      name: `New ${klass.label}`,
-      container: Container.init(),
-      properties: template,
-      element_klass: klass,
-      can_copy: false,
-      properties_release: [],
-      attachments: [],
-      files: [],
-      segments: []
-    });
-  }
-
-  serialize() {
-    return super.serialize({
-      name: this.name,
-      can_copy: true,
-      klassType: 'GenericEl',
-      element_klass: this.element_klass,
-      element_klass_id: this._element_klass_id,
-      properties: this.properties,
-      container: this.container,
-      attachments: this.attachments,
-      files: this.files,
-      segments: this.segments.map(s => s.serialize())
-    });
-  }
-
-  static buildNewShortLabel(klass) {
-    const { currentUser } = UserStore.getState();
-    if (!currentUser) { return `new_${klass.label}`; }
-    return `${currentUser.initials}-${klass.klass_prefix}${parseInt(currentUser.counters[klass.name] || 0, 10) + 1}`;
-  }
-
-
-  buildCopy(params = {}) {
-    const copy = super.buildCopy();
-    Object.assign(copy, params);
-    copy.short_label = GenericEl.buildNewShortLabel(copy.element_klass);
-    copy.can_update = true;
-    copy.can_copy = false;
-    return copy;
-  }
-
-  static copyFromCollectionId(element, collection_id) {
-    const params = {
-      collection_id,
-      role: 'parts',
-      timestamp_start: '',
-      timestamp_stop: '',
-      rf_value: 0.00,
-      status: '',
-    }
-    const copy = element.buildCopy(params);
-    copy.origin = { id: element.id, short_label: element.short_label };
-    //copy.name = copy.nameFromRole(copy.role);
-    return copy;
-  }
-
-  get klassType() {
-    return 'GenericEl'
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get label() {
-    return (this.element_klass && this.element_klass.label) || '';
-  }
-
-  get desc() {
-    return (this.element_klass && this.element_klass.desc) || '';
-  }
-
-  get element_klass() {
-    return this._element_klass;
-  }
-
-  set element_klass(klass) {
-    this._element_klass = klass;
-  }
-
-  get klassName() {
-    return this._klass_name;
-  }
-  set klassName(klassName) {
-    this._klass_name = klassName;
-  }
-
-
-  get properties() {
-    return this._properties;
-  }
-
-  set properties(properties) {
-    this._properties = properties;
-  }
-
-  get element_klass_id() {
-    return this._element_klass_id;
-  }
-
-  set element_klass_id(element_klass_id) {
-    this._element_klass_id = element_klass_id;
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-
-  title() {
-    return `${this.short_label}     ${this.name}` ;
-  }
-
-  get isPendingToSave() {
-    return !isEmpty(this) && (this.isNew || this.changed);
-  }
-
-  isValidated() {
-    const validName = !!(this.name && this.name.trim() !== '');
-    const layers = filter(this.properties && this.properties.layers, l => l.parent == null || l.parent.trim().length === 0) || [];
-
-    // required fileds, draggable only
-    const fieldsDrag = layers.flatMap(l => l.fields).filter(f => f.required && f.type.includes('drag_'));
-    const vaildFieldsDrag = fieldsDrag.length === fieldsDrag.filter(f => f.value && f.value.el_id).length;
-
-    // required fileds, excludes draggable
-    const fields = layers.flatMap(l => l.fields).filter(f => f.required && !f.type.includes('drag_'));
-    const vaildFields = fields.length === fields.filter(f => f.value && f.value.trim() !== '').length;
-
-    return validName && vaildFieldsDrag && vaildFields;
-  }
-}
diff --git a/app/packs/src/components/models/GenericSubField.js b/app/packs/src/components/models/GenericSubField.js
deleted file mode 100644
index c72231ace..000000000
--- a/app/packs/src/components/models/GenericSubField.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import uuid from 'uuid';
-
-export default class GenericSubField {
-  constructor(args) {
-    Object.assign(this, args);
-    if (!this.id) { this.id = GenericSubField.buildID(); }
-  }
-
-  static buildID() { return uuid.v1(); }
-}
diff --git a/app/packs/src/components/models/Graph.js b/app/packs/src/components/models/Graph.js
deleted file mode 100644
index 81dc243c8..000000000
--- a/app/packs/src/components/models/Graph.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Graph extends Element {
-  static buildEmptyScatter() {
-    return new Graph({ type: 'graph', graphType: 'scatter' });
-  }
-}
diff --git a/app/packs/src/components/models/Literature.js b/app/packs/src/components/models/Literature.js
deleted file mode 100644
index 94b733a30..000000000
--- a/app/packs/src/components/models/Literature.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Element from 'src/models/Element';
-import { CitationType } from 'src/components/CitationType';
-
-export default class Literature extends Element {
-  static buildEmpty() {
-    return new Literature({
-      title: '',
-      url: '',
-      doi: '',
-      isbn: '',
-      litype: CitationType[0],
-      type: 'literature',
-      is_new: false,
-      refs: {},
-      element_type: ''
-    })
-  }
-
-  serialize() {
-    return ({
-      id: this.id,
-      title: this.title,
-      url: this.url,
-      doi: this.doi,
-      isbn: this.isbn,
-      litype: this.litype,
-      type: this.type,
-      is_new: this.isNew || false,
-      refs: this.refs || {},
-      element_type: this.element_type
-    });
-  }
-}
diff --git a/app/packs/src/components/models/LiteratureMap.js b/app/packs/src/components/models/LiteratureMap.js
deleted file mode 100644
index 116073ebd..000000000
--- a/app/packs/src/components/models/LiteratureMap.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import uuid from 'uuid';
-import sha256 from 'sha256';
-import _ from 'lodash';
-import Immutable from 'immutable';
-
-export default class LiteratureMap {
-
-  constructor(args) {
-    Object.assign(this, args);
-    if(!this.id) {
-      this.id = LiteratureMap.buildID();
-      this.is_new = true
-      this.type = 'literature_map'
-    }
-    this.updateChecksum();
-  }
-
-  static buildEmpty() {
-    return new LiteratureMap({
-      collectionRefs: Immutable.List(),
-      sampleRefs: Immutable.List(),
-      reactionRefs: Immutable.List(),
-      researchPlanRefs: Immutable.List(),
-      selectedRefs: Immutable.List(),
-      collection_id: null,
-      is_sync: false
-    });
-  }
-
-  static buildID() {
-    return uuid.v1();
-  }
-
-  get isEdited() {
-    return this._checksum != this.checksum();
-  }
-
-  checksum(fieldsToOmit = []) {
-    return sha256(JSON.stringify(_.omit(_.omit(
-      this,
-      ['_checksum', 'belongTo', 'matGroup', 'molecule_names', 'equivalent', '_equivalent', 'formulaChanged', 'sealed', ...fieldsToOmit],
-    ), _.isEmpty)));
-  }
-
-  get getChecksum() {
-    return this._checksum
-  }
-
-  get isNew() {
-    return this.is_new === true
-  }
-
-  get isPendingToSave() {
-    return !_.isEmpty(this) && (this.isNew || this.isEdited);
-  }
-
-  title() {
-    return 'Literature';
-  }
-
-  updateChecksum(cs) {
-    if (cs) {
-      this._checksum = cs
-    } else {
-      this._checksum = this.checksum();
-    }
-  }
-
-  buildCopy() {
-    return new this.constructor(_.omit(this, 'id'))
-  }
-
-  clone() {
-    return new this.constructor(this);
-  }
-
-  // methods regarding sharing and detail levels
-  isRestricted() {
-    return this.is_restricted;
-  }
-
-  // base serializer
-  serialize(extraParams = {}) {
-    const params = {
-      id: this.id,
-      type: this.type,
-      is_new: this.isNew || false,
-      collection_id: this.collection_id
-    };
-    _.merge(params, extraParams);
-    const paramsWithoutNullEntries = _.omit(params, _.isNull);
-    const cleanParams = _.omit(paramsWithoutNullEntries, x => (x === '***'));
-    return cleanParams;
-  }
-
-  // Default empty quill-delta
-  static quillDefault() {
-    return { "ops": [{ "insert": "" }] }
-  }
-}
diff --git a/app/packs/src/components/models/Molecule.js b/app/packs/src/components/models/Molecule.js
deleted file mode 100644
index 2e6e17a94..000000000
--- a/app/packs/src/components/models/Molecule.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Molecule extends Element {
-  get svgPath() {
-    return this.molecule_svg_file && `/images/molecules/${this.molecule_svg_file}`
-  }
-
-  serialize() {
-    return ({
-      density: this.density,
-      melting_point: this.melting_point,
-      boiling_point: this.boiling_point,
-      inchistring: this.inchistring,
-      cano_smiles: this.cano_smiles,
-      inchikey: this.inchikey,
-    })
-  }
-}
diff --git a/app/packs/src/components/models/Prediction.js b/app/packs/src/components/models/Prediction.js
deleted file mode 100644
index 809ec47b1..000000000
--- a/app/packs/src/components/models/Prediction.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Element from './Element';
-
-export default class Prediction extends Element {
-  static buildEmpty() {
-    const prediction = new Prediction({
-      type: 'prediction',
-    });
-
-    return prediction;
-  }
-}
diff --git a/app/packs/src/components/models/PrivateNote.js b/app/packs/src/components/models/PrivateNote.js
deleted file mode 100644
index 95a08881a..000000000
--- a/app/packs/src/components/models/PrivateNote.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable no-underscore-dangle,  camelcase, semi,  no-unused-vars */
-import Element from './Element';
-
-export default class PrivateNote extends Element {
-  static buildEmpty() {
-    return new PrivateNote({
-      content: '',
-      noteable_id: null,
-      noteable_type: null,
-      created_by: null,
-      created_at: null,
-    });
-  }
-
-  static buildWithElement(element) {
-
-  }
-
-  get content() {
-    return this._content;
-  }
-
-  set content(content) {
-    this._content = content;
-  }
-
-  get noteable_id() {
-    return this._noteable_id;
-  }
-
-  set noteable_id(noteable_id) {
-    this._noteable_id = noteable_id;
-  }
-
-  get created_by() {
-    return this._created_by;
-  }
-  set created_by(created_by) {
-    this._created_by = created_by;
-  }
-
-  get noteable_type() {
-    return this._noteable_type;
-  }
-
-  set noteable_type(noteable_type) {
-    this._noteable_type = noteable_type;
-  }
-
-  serialize() {
-    return super.serialize({
-      content: this.content,
-      noteable_id: this.noteable_id,
-      noteable_type: this.noteable_type,
-      created_by: this.created_by
-    })
-  }
-}
diff --git a/app/packs/src/components/models/Reaction.js b/app/packs/src/components/models/Reaction.js
deleted file mode 100644
index 33ca383f2..000000000
--- a/app/packs/src/components/models/Reaction.js
+++ /dev/null
@@ -1,990 +0,0 @@
-import {
-  isEmpty,
-  round,
-  cloneDeep
-} from 'lodash';
-import Delta from 'quill-delta';
-import moment from 'moment';
-import 'moment-precise-range-plugin';
-
-import Element from 'src/models/Element';
-import Sample from 'src/models/Sample';
-import Container from 'src/models/Container';
-
-import UserStore from 'src/stores/alt/stores/UserStore';
-import Segment from 'src/models/Segment';
-
-import {
-  removeObsoleteMaterialsFromVariations,
-  addMissingMaterialsToVariations,
-  updateYields,
-  updateEquivalents,
-} from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils';
-
-const TemperatureUnit = ['°C', '°F', 'K'];
-
-const TemperatureDefault = {
-  valueUnit: '°C',
-  userText: '',
-  data: []
-};
-
-export const convertTemperature = (temperature, fromUnit, toUnit) => {
-  const conversionTable = {
-    'K': {
-      '°C': (t) => parseFloat(t) - 273.15,
-      '°F': (t) => (parseFloat(t) * 9 / 5) - 459.67
-    },
-    '°C': {
-      'K': (t) => parseFloat(t) + 273.15,
-      '°F': (t) => (parseFloat(t) * 1.8) + 32
-    },
-    '°F': {
-      'K': (t) => (parseFloat(t) + 459.67) * 5 / 9,
-      '°C': (t) => (parseFloat(t) - 32) / 1.8
-    }
-  };
-  return conversionTable[fromUnit][toUnit](temperature);
-};
-
-const MomentUnit = {
-  'Week(s)': 'weeks',
-  'Day(s)': 'days',
-  'Hour(s)': 'hours',
-  'Minute(s)': 'minutes',
-  'Second(s)': 'seconds',
-};
-
-const LegMomentUnit = {
-  'Year(s)': 'years',
-  'Month(s)': 'months',
-  ...MomentUnit
-};
-
-const DurationUnit = [
-  // 'Year(s)',
-  // 'Month(s)',
-  'Week(s)',
-  'Day(s)',
-  'Hour(s)',
-  'Minute(s)',
-  'Second(s)'
-];
-
-const DurationDefault = {
-  dispUnit: 'Hour(s)',
-  dispValue: '',
-  memValue: null,
-  memUnit: 'Hour(s)'
-};
-
-export const convertDuration = (value, unit, newUnit) => {
-  const d = moment.duration(Number.parseFloat(value), LegMomentUnit[unit])
-    .as(MomentUnit[newUnit]);
-  return round(d, 1).toString();
-};
-
-const durationDiff = (startAt, stopAt, precise = false) => {
-  if (startAt && stopAt) {
-    const start = moment(startAt, 'DD-MM-YYYY HH:mm:ss');
-    const stop = moment(stopAt, 'DD-MM-YYYY HH:mm:ss');
-    if (start < stop) {
-      return precise ? moment.preciseDiff(start, stop) : moment.duration(stop.diff(start));
-    }
-  }
-  return null;
-};
-
-const highestUnitFromDuration = (d, threshold = 1.0) => {
-  if (d.asWeeks() >= threshold) { return 'Week(s)'; }
-  if (d.asDays() >= threshold) { return 'Day(s)'; }
-  if (d.asHours() >= threshold) { return 'Hour(s)'; }
-  if (d.asMinutes() >= threshold) { return 'Minute(s)'; }
-  if (d.asSeconds() >= threshold) { return 'Second(s)'; }
-  return 'Hour(s)';
-};
-
-export default class Reaction extends Element {
-  static buildEmpty(collection_id) {
-    const reaction = new Reaction({
-      collection_id,
-      container: Container.init(),
-      dangerous_products: '',
-      conditions: '',
-      description: Reaction.quillDefault(),
-      duration: '',
-      durationDisplay: DurationDefault,
-      literatures: {},
-      research_plans: {},
-      name: '',
-      observation: Reaction.quillDefault(),
-      products: [],
-      publication: {},
-      purification: '',
-      purification_solvents: [],
-      reactants: [],
-      rf_value: 0.00,
-      role: '',
-      solvent: '',
-      solvents: [],
-      status: '',
-      starting_materials: [],
-      temperature: TemperatureDefault,
-      timestamp_start: '',
-      timestamp_stop: '',
-      tlc_description: '',
-      tlc_solvents: '',
-      type: 'reaction',
-      can_update: true,
-      can_copy: false,
-      variations: []
-    })
-
-    reaction.short_label = this.buildReactionShortLabel()
-    reaction.rxno = '';
-    return reaction
-  }
-
-  static buildReactionShortLabel() {
-    const { currentUser } = UserStore.getState();
-    if (!currentUser) { return 'New Reaction'; }
-
-    const number = currentUser.reactions_count + 1;
-    const prefix = currentUser.reaction_name_prefix;
-    return `${currentUser.initials}-${prefix}${number}`;
-  }
-
-  get is_published() {
-    return this.publication && this.publication.state === 'completed';
-  }
-
-  static get temperature_unit() {
-    return TemperatureUnit;
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  serialize() {
-    return super.serialize({
-      collection_id: this.collection_id,
-      container: this.container,
-      description: this.description,
-      dangerous_products: this.dangerous_products,
-      conditions: this.conditions,
-      duration: this.duration,
-      durationDisplay: this.durationDisplay,
-      durationCalc: this.durationCalc(),
-      id: this.id,
-      is_published: this.is_published,
-      literatures: this.literatures,
-      research_plans: this.research_plans,
-      materials: {
-        starting_materials: this.starting_materials.map(s => s.serializeMaterial()),
-        reactants: this.reactants.map(s => s.serializeMaterial()),
-        solvents: this.solvents.map(s => s.serializeMaterial()),
-        purification_solvents: this.purification_solvents.map(s => s.serializeMaterial()),
-        products: this.products.map(s => s.serializeMaterial())
-      },
-      name: this.name,
-      observation: this.observation,
-      origin: this.origin,
-      publication: this.publication,
-      purification: this.purification,
-      tlc_solvents: this.tlc_solvents,
-      tlc_description: this.tlc_description,
-      reaction_svg_file: this.reaction_svg_file,
-      role: this.role,
-      rf_value: this.rf_value,
-      rxno: this.rxno,
-      short_label: this.short_label,
-      solvent: this.solvent,
-      status: this.status,
-      temperature: this.temperature,
-      timestamp_start: this.timestamp_start,
-      timestamp_stop: this.timestamp_stop,
-      segments: this.segments.map(s => s.serialize()),
-      variations: this.variations
-    });
-  }
-
-  set variations(variations) {
-    // variations data structure (also see Entities::ReactionVariationEntity):
-    // [
-    //   {
-    //     "id": <number>,
-    //     "properties": {
-    //         "temperature": {"value": <number>, "unit": <string>},
-    //         "duration": {"value": <number>, "unit": <string>}
-    //     },
-    //     "startingMaterials": {
-    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         ...
-    //     },
-    //     "reactants": {
-    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         ...
-    //     },
-    //     "products": {
-    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         ...
-    //     },
-    //     "solvents": {
-    //         <material_id: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         <material_id>: {"value": <number>, "unit": <string>, "aux": {...}},
-    //         ...
-    //     },
-    //   },
-    //   {
-    //     "id": "<number>",
-    //     ...
-    //   },
-    //   ...
-    // ]
-    if (!Array.isArray(variations) || !variations.length) {
-      this._variations = [];
-    } else {
-      const currentMaterials = {
-        startingMaterials: this.starting_materials,
-        reactants: this.reactants,
-        products: this.products,
-        solvents: this.solvents
-      };
-      // Keep set of materials up-to-date. Materials could have been added or removed in the scheme tab
-      // (of the reaction detail modal); these changes need to be reflected in the variations.
-      let updatedVariations = removeObsoleteMaterialsFromVariations(variations, currentMaterials);
-      updatedVariations = addMissingMaterialsToVariations(updatedVariations, currentMaterials);
-      // The products' yields need to be updated, since the products' amounts could have been edited in
-      // the variations tab (of the reaction detail modal).
-      updatedVariations = updateYields(updatedVariations, this.hasPolymers());
-      // A potential change in the reference material's amount needs to be reflected in the remaining materials' equivalents.
-      updatedVariations = updateEquivalents(updatedVariations);
-
-      this._variations = updatedVariations;
-    }
-  }
-
-  get variations() {
-    return this._variations;
-  }
-
-  // Reaction Duration
-
-  durationCalc() {
-    return durationDiff(this.timestamp_start, this.timestamp_stop, true);
-  }
-
-  get durationDisplay() {
-    return this._durationDisplay;
-  }
-
-  set durationDisplay(newDuration) {
-    const { fromStartStop, nextUnit, nextValue } = newDuration;
-    const {
-      dispUnit, memUnit, memValue
-    } = this._durationDisplay || {};
-
-    if (fromStartStop) {
-      const d = durationDiff(this.timestamp_start, this.timestamp_stop);
-      if (d) {
-        const dUnit = highestUnitFromDuration(d);
-        const val = d.as(MomentUnit[dUnit]);
-        const dispValue = round(val, 1).toString();
-        this._durationDisplay = {
-          dispUnit: dUnit,
-          dispValue,
-          memUnit: dUnit,
-          memValue: val.toString(),
-        };
-        this._duration = `${dispValue} ${dUnit}`;
-      }
-    } else if (nextValue || nextValue === '') {
-      this._durationDisplay = {
-        dispValue: nextValue,
-        dispUnit,
-        memUnit,
-        memValue: nextValue
-      };
-      this._duration = `${nextValue} ${dispUnit}`;
-    } else if (nextUnit) {
-      const index = DurationUnit.indexOf(this._durationDisplay.dispUnit);
-      const u = DurationUnit[(index + 1) % DurationUnit.length];
-      const dispValue = convertDuration(memValue, memUnit, u);
-      this._durationDisplay = {
-        dispUnit: u,
-        dispValue,
-        memUnit,
-        memValue
-      };
-      this._duration = `${dispValue} ${u}`;
-    }
-  }
-
-  get duration() {
-    return this._duration;
-  }
-
-  set duration(duration) {
-    this._duration = duration;
-  }
-
-  get durationUnit() {
-    return this._durationDisplay.dispUnit;
-  }
-
-  convertDurationDisplay() {
-    const duration = this._duration;
-    if (this._durationDisplay && this._durationDisplay.memValue !== '') { return null; }
-    const m = duration && duration.match(/(\d+\.?(\d+)?)\s+([\w()]+)/)
-    if (m) {
-      this._durationDisplay = {
-        dispUnit: m[3],
-        memUnit: m[3],
-        dispValue: m[1],
-        memValue: m[1],
-        ...this._durationDisplay
-      };
-      return null;
-    }
-    this._durationDisplay = { ...DurationDefault };
-    return null;
-  }
-
-  // Reaction Temperature
-
-  get temperature_display() {
-    const userText = this._temperature.userText;
-    if (userText !== '') { return userText; }
-
-    if (this._temperature.data.length === 0) { return ''; }
-
-    const arrayData = this._temperature.data;
-    const maxTemp = Math.max(...arrayData.map(o => o.value));
-    const minTemp = Math.min(...arrayData.map(o => o.value));
-
-    if (minTemp === maxTemp) { return minTemp; }
-    return `${minTemp} ~ ${maxTemp}`;
-  }
-
-
-  get temperature() {
-    return this._temperature
-  }
-
-  set temperature(temperature) {
-    this._temperature = temperature
-  }
-
-  get description_contents() {
-    return this.description.ops.map(s => s.insert).join()
-  }
-
-  get observation_contents() {
-    return this.observation.ops.map(s => s.insert).join()
-  }
-
-  concat_text_observation(content) {
-    const insertDelta = new Delta().insert(content);
-    const observationDelta = new Delta(this.observation);
-    const composedDelta = observationDelta.concat(insertDelta);
-    this.observation = composedDelta;
-  }
-
-  convertTemperature(newUnit) {
-    const temperature = this._temperature
-    const oldUnit = temperature.valueUnit;
-    temperature.valueUnit = newUnit;
-
-    // If userText is number only, treat as normal temperature value
-    if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature.userText)) {
-      temperature.userText = convertTemperature(temperature.userText, oldUnit, newUnit).toFixed(2);
-
-      return temperature;
-    }
-
-    temperature.data.forEach((data, index, theArray) => {
-      theArray[index].value = convertTemperature(data.value, oldUnit, newUnit).toFixed(2);
-    });
-
-    return temperature;
-  }
-
-  get short_label() {
-    return this._short_label
-  }
-
-  set short_label(short_label) {
-    this._short_label = short_label
-  }
-
-  get tlc_solvents() {
-    return this._tlc_solvents
-  }
-
-  set tlc_solvents(solvents) {
-    this._tlc_solvents = solvents
-  }
-
-  get starting_materials() {
-    return this._starting_materials
-  }
-
-  set starting_materials(samples) {
-    this._starting_materials = this._coerceToSamples(samples);
-  }
-
-  get solvents() {
-    return this._solvents
-  }
-
-  set solvents(samples) {
-    this._solvents = this._coerceToSamples(samples);
-  }
-
-  get purification_solvents() {
-    return this._purification_solvents;
-  }
-
-  set purification_solvents(samples) {
-    this._purification_solvents = this._coerceToSamples(samples);
-  }
-
-  get reactants() {
-    return this._reactants
-  }
-
-  set reactants(samples) {
-    this._reactants = this._coerceToSamples(samples);
-  }
-
-  get products() {
-    return this._products
-  }
-
-  set products(samples) {
-    this._products = this._coerceToSamples(samples);
-  }
-
-  get publication() {
-    return this._publication
-  }
-
-  set publication(publication) {
-    this._publication = publication
-  }
-  get samples() {
-    return [
-      ...this.starting_materials || [],
-      ...this.reactants || [],
-      ...this.solvents || [],
-      ...this.purification_solvents || [],
-      ...this.products || [],
-    ];
-  }
-
-  buildCopy(params = {}) {
-    const copy = super.buildCopy();
-    Object.assign(copy, params);
-    copy.short_label = Reaction.buildReactionShortLabel();
-    copy.starting_materials = this.starting_materials.map(
-      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
-    );
-    copy.reactants = this.reactants.map(
-      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
-    );
-    copy.solvents = this.solvents.map(
-      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id)
-    );
-    copy.products = this.products.map(
-      sample => Sample.copyFromSampleAndCollectionId(sample, copy.collection_id, true, true, false)
-    );
-
-    copy.rebuildProductName();
-    copy.container = Container.init();
-    copy.can_update = true;
-    copy.can_copy = false;
-    return copy;
-  }
-
-
-  static copyFromReactionAndCollectionId(reaction, collection_id) {
-    const target = Segment.buildCopy(reaction.segments);
-    const params = {
-      collection_id,
-      role: 'parts',
-      segments: target,
-      timestamp_start: '',
-      segments: target,
-      timestamp_stop: '',
-      publication: {},
-      rf_value: 0.00,
-      status: '',
-    }
-    const copy = reaction.buildCopy(params);
-    copy.origin = { id: reaction.id, short_label: reaction.short_label };
-    copy.name = copy.nameFromRole(copy.role);
-    return copy;
-  }
-
-  title() {
-    const short_label = this.short_label ? this.short_label : ''
-    return this.name ? `${short_label} ${this.name}` : short_label
-  }
-
-  addMaterial(material, group) {
-    const materials = this[group];
-    const newMaterial = this.materialPolicy(material, null, group);
-    this[group] = [...materials, newMaterial];
-
-    this.rebuildReference(newMaterial);
-    this.setPositions(group);
-  }
-
-  addMaterialAt(srcMaterial, srcGp, tagMaterial, tagGp) {
-    const materials = this[tagGp];
-    const idx = materials.indexOf(tagMaterial);
-    const newSrcMaterial = this.materialPolicy(srcMaterial, srcGp, tagGp);
-
-    if (idx === -1) {
-      this[tagGp] = [...materials, newSrcMaterial];
-    } else {
-      this[tagGp] = [
-        ...materials.slice(0, idx),
-        newSrcMaterial,
-        ...materials.slice(idx),
-      ];
-    }
-
-    this.rebuildReference(newSrcMaterial);
-    this.setPositions(tagGp);
-  }
-
-  deleteMaterial(material, group) {
-    const materials = this[group];
-    const idx = materials.indexOf(material);
-    this[group] = [
-      ...materials.slice(0, idx),
-      ...materials.slice(idx + 1),
-    ];
-
-    this.rebuildReference(material);
-    this.setPositions(group);
-  }
-
-  swapMaterial(srcMaterial, tagMaterial, group) {
-    const srcIdx = this[group].indexOf(srcMaterial);
-    const tagIdx = this[group].indexOf(tagMaterial);
-    const groupWoSrc = [
-      ...this[group].slice(0, srcIdx),
-      ...this[group].slice(srcIdx + 1),
-    ];
-    const newGroup = [
-      ...groupWoSrc.slice(0, tagIdx),
-      srcMaterial,
-      ...groupWoSrc.slice(tagIdx),
-    ];
-    this[group] = newGroup.filter(o => o != null) || [];
-
-    this.rebuildReference(srcMaterial);
-    this.setPositions(group);
-  }
-
-  moveMaterial(srcMaterial, srcGp, tagMaterial, tagGp) {
-    if (srcGp === tagGp) {
-      this.swapMaterial(srcMaterial, tagMaterial, tagGp);
-    } else {
-      this.deleteMaterial(srcMaterial, srcGp);
-      this.addMaterialAt(srcMaterial, srcGp, tagMaterial, tagGp);
-    }
-  }
-
-  setPositions(group) {
-    this[group] = this[group].map((m, idx) => (
-      Object.assign({}, m, { position: idx })
-    ));
-  }
-
-  // We will process all reaction policy here
-  // If oldGroup = null -> drag new Sample into Reaction
-  // Else -> moving between Material Group
-  materialPolicy(material, oldGroup, newGroup) {
-    if (newGroup == "products") {
-      material.amountType = 'real';
-
-      // we don't want to copy loading from sample
-      if (material.contains_residues) {
-        material.loading = 0.0;
-      }
-
-      material.isSplit = false;
-      material.reaction_product = true;
-      material.equivalent = 0;
-      material.reference = false;
-
-      if (material.parent_id) {
-        material.start_parent = material.parent_id
-        material.parent_id = null
-      }
-    } else if (
-      newGroup === "reactants" || newGroup === "solvents" ||
-      newGroup === "purification_solvents"
-    ) {
-      if (newGroup === "solvents") {
-        material.reference = false;
-      }
-
-      // Temporary set true, to fit with server side logical
-      material.isSplit = true;
-      material.reaction_product = false;
-    } else if (newGroup == "starting_materials") {
-      material.isSplit = true;
-      material.reaction_product = false;
-
-      if (material.start_parent && material.parent_id == null) {
-        material.parent_id = material.start_parent
-      }
-    }
-
-    this.shortLabelPolicy(material, oldGroup, newGroup);
-    this.namePolicy(material, oldGroup, newGroup);
-    if (!material.coefficient || material.coefficient < 0) {
-      material.coefficient = 1.0;
-    }
-    material.waste = false;
-
-    return material;
-  }
-
-  shortLabelPolicy(material, oldGroup, newGroup) {
-    if (oldGroup) {
-      // Save previous short_label
-      material[`short_label_${oldGroup}`] = material.short_label;
-
-      // Reassign previous short_label if present
-      if (material[`short_label_${newGroup}`]) {
-        material.short_label = material[`short_label_${newGroup}`];
-        return 0;
-      }
-      // routines below are for exisiting samples moved a first time
-      if (newGroup === 'products') {
-        // products are new samples => build new short_label
-        material.short_label = Sample.buildNewShortLabel();
-      } else if (newGroup === 'starting_materials') {
-        if (oldGroup !== 'products') {
-          // if starting_materials from products, reuse product short_label (do nothing)
-          material.short_label = Sample.buildNewShortLabel();
-        }
-      }
-      // else when newGroup is reactant/solvent do nothing because not displayed (short_label set in BE)
-    } else {
-      if (newGroup === "starting_materials") {
-        if (material.split_label) { material.short_label = material.split_label; }
-      } else if (newGroup === "products") {
-        // products are new samples => build new short_label
-        material.short_label = Sample.buildNewShortLabel();
-      } else {
-        material.short_label = newGroup.slice(0, -1); // "reactant" or "solvent"
-      }
-    }
-  }
-
-  namePolicy(material, oldGroup, newGroup) {
-    this.rebuildProductName();
-
-    if (oldGroup && oldGroup == "products") {
-      // Blank name if FROM "products"
-      material.name = "";
-      return 0;
-    }
-
-    if (newGroup == "products") {
-      let productName = String.fromCharCode('A'.charCodeAt(0) + this.products.length);
-      material.name = this.short_label + "-" + productName;
-    }
-  }
-
-  rebuildProductName() {
-    let short_label = this.short_label
-    this.products.forEach(function (product, index, arr) {
-      let productName = String.fromCharCode('A'.charCodeAt(0) + index);
-      arr[index].name = short_label + "-" + productName;
-    })
-  }
-
-  rebuildReference(material) {
-    if (this.referenceMaterial) {
-      let referenceMaterial = this.referenceMaterial
-      let reference = this.starting_materials.find(function (m) {
-        return referenceMaterial.id === m.id;
-      })
-
-      // if referenceMaterial exists,
-      // referenceMaterialGroup must be either 'starting_materials' or 'reactants'
-      if (!reference) reference = this.reactants.find(m => m.id === referenceMaterial.id);
-
-      if (!reference && this.starting_materials.length > 0) {
-        this._setAsReferenceMaterial(this.starting_materials[0]);
-      } else {
-        this._updateEquivalentForMaterial(material);
-      }
-    }
-
-    this.products.forEach(function (product, index, arr) {
-      arr[index].reference = false;
-    })
-  }
-
-  _coerceToSamples(samples) {
-    return samples && samples.map(s => new Sample(s)) || []
-  }
-
-  sampleById(sampleID) {
-    return this.samples.find((sample) => {
-      return sample.id == sampleID;
-    })
-  }
-
-  get referenceMaterial() {
-    return this.samples.find((sample) => {
-      return sample.reference;
-    })
-  }
-
-  get sampleCount() {
-    return this.samples.length;
-  }
-
-  markSampleAsReference(sampleID) {
-    this.samples.forEach((sample) => {
-      sample.reference = sample.id == sampleID;
-    })
-  }
-
-  toggleShowLabelForSample(sampleID) {
-    const sample = this.sampleById(sampleID);
-    sample.show_label = ((sample.decoupled && !sample.molfile) ? true : !sample.show_label);
-  }
-
-  _setAsReferenceMaterial(sample) {
-    sample.equivalent = 1;
-    sample.reference = true;
-  }
-
-  _updateEquivalentForMaterial(sample) {
-    if (this.referenceMaterial && this.referenceMaterial.amount_mol) {
-      sample.equivalent = sample.amount_mol / this.referenceMaterial.amount_mol;
-    }
-  }
-
-  get svgPath() {
-    if (this.reaction_svg_file && this.reaction_svg_file != '***') {
-      if (this.reaction_svg_file.includes('<svg')) {
-        return this.reaction_svg_file
-      } else if (this.reaction_svg_file.substr(this.reaction_svg_file.length - 4) === '.svg') {
-        return `/images/reactions/${this.reaction_svg_file}`
-      }
-    }
-    else
-      return `images/wild_card/no_image_180.svg`
-  }
-
-  SMGroupValid() {
-    let result = true;
-    this.starting_materials.map((sample) => {
-      if (!sample.isValid)
-        result = false;
-    });
-
-    return result;
-  }
-
-  hasMaterials() {
-    return this.starting_materials.length > 0 || this.reactants.length > 0 || this.solvents.length > 0 || this.products.length > 0;
-  }
-
-  hasSample(sampleId) {
-    return this.samples.find((sample) => {
-      return sample.id == sampleId
-    });
-  }
-
-  hasPolymers() {
-    return this.samples.find((sample) => {
-      return sample.contains_residues
-    });
-  }
-
-  getReferenceMaterial() {
-    return this.referenceMaterial;
-  }
-
-  updateMaterial(material, refreshCoefficient) {
-    const cats = ['starting_materials', 'reactants', 'solvents', 'products'];
-    let i = 0;
-    let group;
-
-    while (i < cats.length) {
-      const groupName = `_${cats[i]}`;
-      group = this[groupName];
-      if (group) {
-        const index = group.findIndex(x => x.id === material.id);
-        if (index >= 0) {
-          const mat = new Sample(material);
-          mat.reference = group[index].reference;
-          mat.updateChecksum();
-          group[index] = mat;
-          break;
-        }
-      }
-
-      i += 1;
-    }
-    this.refreshEquivalent(material, refreshCoefficient);
-  }
-
-  refreshEquivalent(material, refreshCoefficient) {
-    let matGroup;
-    const refMat = this.samples.find((sample) => sample.reference);
-    if (refMat && refMat.amount_mol) {
-      ['_starting_materials', '_reactants', '_solvents', '_products'].forEach((g) => {
-        matGroup = this[g];
-        if (matGroup) {
-          this[g] = matGroup.map((mat) => {
-            const m = mat;
-            if (m.id === material.id) {
-              if (refreshCoefficient && m.id === refreshCoefficient.sId) {
-                m.coefficient = refreshCoefficient.coefficient;
-              }
-            }
-
-            if (g === '_products') {
-              const stoichiometryCoeff = (m.coefficient || 1.0) / (refMat?.coefficient || 1.0);
-              m.equivalent = m.amount_mol / refMat.amount_mol / stoichiometryCoeff;
-            } else {
-              m.equivalent = m.amount_mol / refMat.amount_mol;
-            }
-            return m;
-          });
-        }
-      });
-    }
-  }
-
-  // literatures
-
-  get literatures() {
-    return this._literatures || {};
-  }
-
-  get research_plans() {
-      return this._research_plans || {};
-    }
-
-  set literatures(literatures) {
-    this._literatures = literatures;
-  }
-
-  set research_plans(research_plans) {
-    this._research_plans = research_plans;
-  }
-
-  get totalVolume() {
-    let totalVolume = 0.0;
-    const materials = [...this.starting_materials,
-      ...this.reactants,
-      ...this.products,
-      ...this.solvents];
-    materials.map(m => totalVolume += m.amount_l);
-    return totalVolume;
-  }
-
-  get solventVolume() {
-    let solventVolume = 0.0;
-    const materials = [...this.solvents];
-    materials.map(m => solventVolume += m.amount_l);
-    return solventVolume;
-  }
-
-  // overwrite isPendingToSave method in models/Element.js
-  get isPendingToSave() {
-    return !isEmpty(this) && (this.isNew || this.changed);
-  }
-
-  extractNameFromOri(origin) {
-    const ori = origin || this.origin;
-    const oriSLabel = ori && ori.short_label;
-    const oriSLNum = oriSLabel ? oriSLabel.split('-').slice(-1)[0] : 'xx';
-    const name = `According to General Procedure ${oriSLNum}`;
-    return name;
-  }
-
-  nameFromRole(role) {
-    let name = this.name;
-    const sLabel = this.short_label;
-    const sLNum = sLabel ? sLabel.split('-').slice(-1)[0] : 'xx';
-
-    switch (role) {
-      case 'gp':
-        name = `General Procedure ${sLNum}`;
-        break;
-      case 'parts':
-        name = this.extractNameFromOri();
-        break;
-      case 'single':
-        name = `Single ${sLNum}`;
-        break;
-      default:
-        break;
-    }
-    return name;
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-
-  updateMaxAmountOfProducts() {
-    const startingMaterialsList = this.starting_materials.filter(sample => sample.reference);
-    if (startingMaterialsList.length == 0) { return; }
-    const referenceSample = startingMaterialsList[0];
-
-    this.products.forEach(product => product.calculateMaxAmount(referenceSample));
-
-  }
-
-  get notPublishable() {
-    // NB: in reaction samples, can_publish is only serialized for products
-    // const unpublishableSamples = this.samples.filter(s => !s.can_publish);
-    const unpublishableSamples = this.products.filter(s => !s.can_publish);
-    return unpublishableSamples.length > 0 && unpublishableSamples;
-  }
-
-  analysisArray() {
-    const analyses = this.container && this.container.children.find(c => (c && c.container_type === 'analyses'));
-    return analyses ? analyses.children : [];
-  }
-
-  get notPublishable() {
-    // NB: in reaction samples, can_publish is only serialized for products
-    // const unpublishableSamples = this.samples.filter(s => !s.can_publish);
-    const unpublishableSamples = this.products.filter(s => !s.can_publish);
-    return unpublishableSamples.length > 0 && unpublishableSamples;
-  }
-
-  analysisArray() {
-    const analyses = this.container && this.container.children.find(c => (c && c.container_type === 'analyses'));
-    return analyses ? analyses.children : [];
-  }
-}
diff --git a/app/packs/src/components/models/Report.js b/app/packs/src/components/models/Report.js
deleted file mode 100644
index a278b8c07..000000000
--- a/app/packs/src/components/models/Report.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Element from 'src/models/Element';
-
-export default class Report extends Element {
-  static buildEmpty() {
-    let report = new Report({
-      type: 'report'
-    });
-
-    return report;
-  }
-}
diff --git a/app/packs/src/components/models/ReportTemplate.js b/app/packs/src/components/models/ReportTemplate.js
deleted file mode 100644
index 8b6aaff4c..000000000
--- a/app/packs/src/components/models/ReportTemplate.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Element from './Element';
-
-export default class ReportTemplate extends Element {
-
-  constructor({id, name, report_type, attachment, attachment_id}) {
-    const reportTemplate = {
-      id,
-      name,
-      report_type,
-      attachment,
-      attachment_id,
-    }
-
-    super(reportTemplate)
-  }
-
-  serialize() {
-    return super.serialize({
-      id: this.id,
-      name: this.name,
-      report_type: this.report_type,
-      attachment: this.attachment,
-      attachment_id: this.attachment_id,
-    })
-  }
-
-}
diff --git a/app/packs/src/components/models/ResearchPlan.js b/app/packs/src/components/models/ResearchPlan.js
deleted file mode 100644
index 6e0fec042..000000000
--- a/app/packs/src/components/models/ResearchPlan.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import { isEmpty } from 'lodash';
-import Element from './Element';
-import Container from './Container';
-import Segment from './Segment';
-
-const uuidv4 = require('uuid/v4');
-
-const columns = [
-  {
-    headerName: 'a',
-    field: 'a',
-    colId: 'a'
-  },
-  {
-    headerName: 'b',
-    field: 'b',
-    colId: 'b'
-  },
-  {
-    headerName: 'c',
-    field: 'c',
-    colId: 'c'
-  },
-  {
-    headerName: 'd',
-    field: 'd',
-    colId: 'd'
-  },
-  {
-    headerName: 'e',
-    field: 'e',
-    colId: 'e'
-  },
-  {
-    headerName: 'f',
-    field: 'f',
-    colId: 'f'
-  }
-];
-
-
-export default class ResearchPlan extends Element {
-  constructor(args) {
-    super(args);
-    this.mode = args.mode ? args.mode : 'view';
-  }
-
-  static buildEmpty(collectionId) {
-    return new ResearchPlan({
-      collection_id: collectionId,
-      type: 'research_plan',
-      name: 'New Research Plan',
-      body: [],
-      mode: 'edit',
-      container: Container.init(),
-      changed: true,
-      can_update: true,
-      attachments: [],
-      segments: []
-    });
-  }
-
-  serialize() {
-    return super.serialize({
-      name: this.name,
-      body: this.body,
-      attachments: this.attachments,
-      container: this.container,
-      segments: this.segments.map(s => s.serialize())
-    });
-  }
-
-
-  analysesContainers() {
-    if (this.container.children.length === 0) {
-      const analyses = Container.buildEmpty();
-      analyses.container_type = 'analyses';
-      this.container.children.push(analyses);
-    }
-    return this.container
-      .children
-      .filter(el => ~el.container_type.indexOf('analyses'));
-  }
-
-  addBodyField(type) {
-    switch (type) {
-      case 'richtext':
-        this.body.push({
-          id: uuidv4(),
-          type: 'richtext',
-          title: 'Text',
-          value: null
-        });
-        break;
-      case 'ketcher':
-        this.body.push({
-          id: uuidv4(),
-          type: 'ketcher',
-          value: {
-            svg_file: null,
-            thumb_svg: null
-          }
-        });
-        break;
-      case 'table':
-        this.body.push({
-          id: uuidv4(),
-          type: 'table',
-          value: {
-            columns,
-            rows: [
-              {
-                a: '', b: '', c: '', d: '', e: '', f: ''
-              },
-              {
-                a: '', b: '', c: '', d: '', e: '', f: ''
-              },
-              {
-                a: '', b: '', c: '', d: '', e: '', f: ''
-              },
-            ]
-          }
-        });
-        break;
-      case 'image':
-        this.body.push({
-          id: uuidv4(),
-          type: 'image',
-          value: {
-            file_name: null,
-            public_name: null,
-            zoom: null
-          }
-        });
-        break;
-      case 'sample':
-        this.body.push({
-          id: uuidv4(),
-          type: 'sample',
-          value: {
-            sample_id: null
-          }
-        });
-        break;
-      case 'reaction':
-        this.body.push({
-          id: uuidv4(),
-          type: 'reaction',
-          value: {
-            reaction_id: null
-          }
-        });
-        break;
-      default:
-        break;
-    }
-  }
-
-  get svgPath() {
-    for (let i = 0; i < this.body.length; i += 1) {
-      if (this.body[i].type === 'ketcher') {
-        return `/images/research_plans/${this.body[i].value.svg_file}`;
-      }
-    }
-    return '/images/wild_card/no_image_180.svg';
-  }
-
-  // overwrite isPendingToSave method in models/Element.js
-  get isPendingToSave() {
-    return !isEmpty(this) && (this.isNew || this.changed);
-  }
-
-  get mode() {
-    return this._mode;
-  }
-
-  set mode(mode) {
-    this._mode = mode;
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-}
diff --git a/app/packs/src/components/models/Sample.js b/app/packs/src/components/models/Sample.js
deleted file mode 100644
index 72638cffa..000000000
--- a/app/packs/src/components/models/Sample.js
+++ /dev/null
@@ -1,1155 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable camelcase */
-import React from 'react';
-import _ from 'lodash';
-
-import Element from 'src/models/Element';
-import Molecule from 'src/models/Molecule';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import Container from 'src/models/Container';
-import Segment from 'src/models/Segment';
-
-const prepareRangeBound = (args = {}, field) => {
-  const argsNew = args;
-  if (args[field] && typeof args[field] === 'string') {
-    const bounds = args[field].split(/\.{2,3}/);
-    if (!args[`${field}_upperbound`]) {
-      argsNew[`${field}_upperbound`] = Number.POSITIVE_INFINITY === Number(bounds[1]) ? null : Number(bounds[1]);
-    }
-    if (!args[`${field}_lowerbound`]) {
-      argsNew[`${field}_lowerbound`] = Number.NEGATIVE_INFINITY === Number(bounds[0]) ? null : Number(bounds[0]);
-    }
-    if (argsNew[`${field}_upperbound`] == null || argsNew[`${field}_upperbound`] == null) {
-      argsNew[`${field}_display`] = (argsNew[`${field}_lowerbound`] || '').toString().trim();
-    } else {
-      argsNew[`${field}_display`] = ((argsNew[`${field}_lowerbound`] || '')
-        .toString().concat(' – ', argsNew[`${field}_upperbound`])).trim();
-    }
-  }
-  return argsNew;
-};
-
-export default class Sample extends Element {
-  // isMethodRestricted(m) {
-  //   return false;
-  // }
-
-  constructor(args) {
-    let argsNew = args;
-    argsNew = prepareRangeBound(argsNew, 'boiling_point');
-    argsNew = prepareRangeBound(argsNew, 'melting_point');
-    super(argsNew);
-  }
-
-  cleanBoilingMelting() {
-    this.boiling_point = null;
-    this.melting_point = null;
-  }
-
-  static copyFromSampleAndCollectionId(
-    sample,
-    collection_id,
-    structure_only = false,
-    keepResidueInfo = false,
-    keepExternalLabel = true
-  ) {
-    const newSample = sample.buildCopy();
-    newSample.collection_id = collection_id;
-    if (sample.name) { newSample.name = sample.name; }
-    if (sample.external_label) { newSample.external_label = sample.external_label; }
-    if (structure_only) {
-      newSample.filterSampleData();
-      newSample.filterResidueData(true);
-      // reset boiling/melting points for products on reaction copy
-      newSample.updateRange('boiling_point', '', '');
-      newSample.updateRange('melting_point', '', '');
-    } else {
-      newSample.filterResidueData(keepResidueInfo);
-    }
-
-    if (keepExternalLabel == false) {
-      newSample.external_label = '';
-    }
-
-    if (sample.elemental_compositions) {
-      newSample.elemental_compositions = sample.elemental_compositions;
-    }
-
-    newSample.filterElementalComposition();
-    newSample.segments = Segment.buildCopy(sample.segments);
-    return newSample;
-  }
-
-  filterElementalComposition() {
-    const elemComp = (this.elemental_compositions || []).find((item) => {
-      if (item.composition_type == 'formula') {
-        item.id = null;
-        return item;
-      }
-    });
-    this.elemental_compositions = elemComp ? [elemComp] : [];
-    this.elemental_compositions.push({
-      composition_type: 'found',
-      data: {},
-      description: 'Experimental'
-    });
-    return this;
-  }
-
-  setDefaultResidue() {
-    // set default polymer data
-    this.residues = [
-      {
-        residue_type: 'polymer',
-        custom_info: {
-          formula: 'CH',
-          loading: null,
-          polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
-          loading_type: 'external',
-          external_loading: 0.0,
-          reaction_product: (this.reaction_product ? true : null),
-          cross_linkage: null
-        }
-      }
-    ];
-  }
-
-  filterResidueData(keepResidueInfo = false) {
-    if (this.contains_residues) {
-      if (keepResidueInfo) {
-        // only reset loading
-        this.residues.map((residue) => {
-          Object.assign(residue.custom_info, {
-            external_loading: 0.0,
-            loading: null,
-            loading_type: 'external'
-          });
-        });
-      } else {
-        // set default polymer data
-        this.residues.map((residue) => {
-          Object.assign(residue, {
-            residue_type: 'polymer',
-            custom_info: {
-              formula: 'CH',
-              loading: (residue.custom_info ? residue.custom_info.loading : null),
-              polymer_type: (this.decoupled ? 'self_defined' : 'polystyrene'),
-              loading_type: 'external',
-              external_loading: 0.0,
-              reaction_product: (this.reaction_product ? true : null),
-              cross_linkage: null
-            }
-          });
-        });
-      }
-    }
-    return this;
-  }
-
-  filterSampleData() {
-    // reset to default values
-    this.target_amount_value = 0;
-    this.real_amount_value = 0;
-    this.description = '';
-    this.purity = 1;
-    this.equivalent = 0;
-    this.imported_readout = '';
-
-    return this;
-  }
-
-  static buildNewShortLabel() {
-    const { currentUser } = UserStore.getState();
-    if (!currentUser) { return 'NEW SAMPLE'; }
-    return `${currentUser.initials}-${currentUser.samples_count + 1}`;
-  }
-
-  static defaultStereo() {
-    return { abs: 'any', rel: 'any' };
-  }
-
-  static buildEmpty(collection_id) {
-    const sample = new Sample({
-      collection_id,
-      type: 'sample',
-      external_label: '',
-      target_amount_value: 0,
-      target_amount_unit: 'g',
-      molarity_value: 0,
-      molarity_unit: 'M',
-      metrics: 'mmmm',
-      description: '',
-      purity: 1,
-      density: 0,
-      solvent: [],
-      location: '',
-      molfile: '',
-      molecule: { id: '_none_' },
-      residues: [],
-      elemental_compositions: [{
-        composition_type: 'found',
-        data: {}
-      }],
-      imported_readout: '',
-      attached_amount_mg: '', // field for polymers calculations
-      container: Container.init(),
-      can_update: true,
-      can_copy: false,
-      stereo: Sample.defaultStereo(),
-      decoupled: false,
-      inventory_sample: false,
-      molecular_mass: 0,
-      sum_formula: '',
-      xref: {}
-    });
-
-    sample.short_label = Sample.buildNewShortLabel();
-    return sample;
-  }
-
-  getChildrenCount() {
-    return parseInt(Sample.children_count[this.id] || this.children_count, 10);
-  }
-
-  buildSplitShortLabel() {
-    const children_count = this.getChildrenCount() + 1;
-    return `${this.short_label}-${children_count}`;
-  }
-
-  buildCopy() {
-    const sample = super.buildCopy();
-    sample.short_label = Sample.buildNewShortLabel();
-    sample.container = Container.init();
-    sample.can_update = true;
-    sample.can_copy = false;
-    return sample;
-  }
-
-  static buildNew(sample, collectionId, matGroup = null) {
-    const newSample = Sample.buildEmpty(collectionId);
-
-    if (matGroup === 'reactants' || matGroup === 'solvents') {
-      newSample.short_label = matGroup.slice(0, -1);
-    }
-    if (sample instanceof Sample) {
-      newSample.molecule = sample.molecule;
-      newSample.sample_svg_file = sample.sample_svg_file;
-    } else {
-      newSample.molecule = sample;
-    }
-    if (sample.stereo) {
-      const { abs, rel } = sample.stereo;
-      newSample.stereo = { abs, rel };
-    }
-    newSample.residues = sample.residues || [];
-    newSample.contains_residues = sample.contains_residues;
-    newSample.filterResidueData(true);
-    newSample.density = sample.density;
-    newSample.metrics = sample.metrics;
-    newSample.molfile = sample.molfile || '';
-    return newSample;
-  }
-
-  buildChild() {
-    Sample.counter += 1;
-    const splitSample = this.buildChildWithoutCounter();
-    splitSample.short_label = splitSample.split_label;
-    Sample.children_count[this.id] = this.getChildrenCount() + 1;
-
-    return splitSample;
-  }
-
-  buildChildWithoutCounter() {
-    const splitSample = this.clone();
-    splitSample.parent_id = this.id;
-    splitSample.id = Element.buildID();
-
-    if (this.name) { splitSample.name = this.name; }
-    if (this.external_label) { splitSample.external_label = this.external_label; }
-    if (this.elemental_compositions) {
-      splitSample.elemental_compositions = this.elemental_compositions;
-    }
-    splitSample.created_at = null;
-    splitSample.updated_at = null;
-    splitSample.target_amount_value = 0;
-    splitSample.real_amount_value = null;
-    splitSample.is_split = true;
-    splitSample.is_new = true;
-    splitSample.split_label = splitSample.buildSplitShortLabel();
-    // Todo ???
-    splitSample.container = Container.init();
-    return splitSample;
-  }
-
-  get isSplit() {
-    return this.is_split;
-  }
-
-  set isSplit(is_split) {
-    this.is_split = is_split;
-  }
-
-  serialize() {
-    const serialized = super.serialize({
-      name: this.name,
-      external_label: this.external_label,
-      target_amount_value: this.target_amount_value,
-      target_amount_unit: this.target_amount_unit,
-      real_amount_value: this.real_amount_value,
-      real_amount_unit: this.real_amount_unit,
-      molarity_value: this.molarity_value,
-      molarity_unit: this.molarity_unit,
-      description: this.description,
-      purity: this.purity,
-      short_label: this.short_label,
-      solvent: this.solvent,
-      location: this.location,
-      molfile: this.molfile,
-      molecule: this.molecule && this.molecule.serialize(),
-      molecule_id: this.molecule && (this.molecule.id === '_none_' ? null : this.molecule.id),
-      molecule_name_id: this.molecule_name && this.molecule_name.value,
-      sample_svg_file: this.sample_svg_file,
-      is_top_secret: this.is_top_secret || false,
-      dry_solvent: this.dry_solvent,
-      parent_id: this.parent_id,
-      density: this.density,
-      metrics: this.metrics,
-      boiling_point_upperbound: this.boiling_point_upperbound,
-      boiling_point_lowerbound: this.boiling_point_lowerbound,
-      melting_point_upperbound: this.melting_point_upperbound,
-      melting_point_lowerbound: this.melting_point_lowerbound,
-      residues: this.residues,
-      elemental_compositions: this.elemental_compositions,
-      is_split: this.is_split || false,
-      is_new: this.is_new,
-      imported_readout: this.imported_readout,
-      container: this.container,
-      xref: this.xref,
-      stereo: this.stereo,
-      user_labels: this.user_labels || [],
-      decoupled: this.decoupled,
-      molecular_mass: this.molecular_mass,
-      sum_formula: this.sum_formula,
-      inventory_sample: this.inventory_sample,
-      segments: this.segments.map((s) => s.serialize()),
-      is_repo_public: this.is_repo_public
-    });
-
-    return serialized;
-  }
-
-  get is_top_secret() {
-    return this._is_top_secret;
-  }
-
-  set is_top_secret(is_top_secret) {
-    this._is_top_secret = is_top_secret;
-  }
-
-  get dry_solvent() {
-    return this._dry_solvent;
-  }
-
-  set dry_solvent(dry_solvent) {
-    this._dry_solvent = dry_solvent;
-  }
-
-  set contains_residues(value) {
-    this._contains_residues = value;
-    if (value) {
-      if (!this.residues.length) {
-        this.setDefaultResidue();
-      } else {
-        this.residues[0]._destroy = undefined;
-      }
-
-      this.elemental_compositions.map((item) => {
-        if (item.composition_type == 'formula') { item._destroy = true; }
-      });
-    } else {
-      // this.sample_svg_file = '';
-      if (this.residues.length) { this.residues[0]._destroy = true; } // delete residue info
-
-      this.elemental_compositions.map((item) => {
-        if (item.composition_type == 'loading') { item._destroy = true; }
-      });
-    }
-  }
-
-  get contains_residues() {
-    return this._contains_residues;
-  }
-
-  title() {
-    const { profile } = UserStore.getState();
-    const show_external_name = profile ? profile.show_external_name : false;
-    const show_sample_name = profile ? profile.show_sample_name : false;
-    const { external_label } = this;
-    const extLabelClass = 'label--bold';
-    const { name } = this;
-    const { short_label } = this;
-
-    const { currentUser } = UserStore.getState();
-    let isRepoSecret = false;
-    if (this.is_repo_public) {
-      if (currentUser.is_reviewer || currentUser.id === this.created_by) isRepoSecret = false;
-      else isRepoSecret = true;
-    }
-
-    if(show_external_name && !isRepoSecret) {
-      return (external_label ? <span className={extLabelClass}>{external_label}</span> : short_label);
-    } if (show_sample_name) {
-      return (name ? <span className={extLabelClass}>{name}</span> : short_label);
-    }
-    return short_label;
-  }
-
-  get molecule_name_label() {
-    return this.molecule_name_hash && this.molecule_name_hash.label;
-  }
-
-  get molecule_name() {
-    return this.molecule_name_hash;
-  }
-
-  set molecule_name(mno) {
-    this.molecule_name_hash = mno;
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get is_repo_public() {
-    return this._is_repo_public;
-  }
-
-  set is_repo_public(is_repo_public) {
-    this._is_repo_public = is_repo_public;
-  }
-
-  get short_label() {
-    return this._short_label;
-  }
-
-  set short_label(short_label) {
-    this._short_label = short_label;
-  }
-
-  get external_label() {
-    return this._external_label;
-  }
-
-  set external_label(label) {
-    this._external_label = label;
-  }
-
-  get preferred_label() {
-    return this._external_label || this.molecule.iupac_name || this.molecule_formula;
-  }
-
-  set preferred_label(label) {
-    this._preferred_label = label;
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map((s) => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-
-  showedName() {
-    return this.showed_name;
-  }
-
-  userLabels() {
-    return this.user_labels;
-  }
-
-  iupac_name_tag(length) {
-    const iupac_name = this.molecule.iupac_name || '';
-    return iupac_name.length > length
-      ? `${iupac_name.slice(0, length)}...`
-      : iupac_name;
-  }
-
-  get location() {
-    return this._location;
-  }
-
-  set location(location) {
-    this._location = location;
-  }
-
-  get description() {
-    return this._description;
-  }
-
-  set description(description) {
-    this._description = description;
-  }
-
-  get metrics() {
-    return this._metrics || 'mmmm';
-  }
-
-  set metrics(metrics) {
-    this._metrics = metrics;
-  }
-
-  get molarity_value() {
-    return this._molarity_value;
-  }
-
-  set molarity_value(molarity_value) {
-    this._molarity_value = molarity_value;
-  }
-
-  get molarity_unit() {
-    return this._molarity_unit;
-  }
-
-  set molarity_unit(molarity_unit) {
-    this._molarity_unit = molarity_unit;
-  }
-
-  get imported_readout() {
-    return this._imported_readout;
-  }
-
-  set imported_readout(imported_readout) {
-    this._imported_readout = imported_readout;
-  }
-
-  updateRange(field, lower, upper) {
-    this[`${field}_lowerbound`] = lower;
-    this[`${field}_upperbound`] = upper;
-    if (lower === '' && upper === '') {
-      this[`${field}_display`] = lower.toString();
-      this[field] = lower.toString();
-    } else if (lower === upper) {
-      this[`${field}_upperbound`] = '';
-      this[`${field}_display`] = lower.toString();
-      this[field] = lower.toString().concat('...', Number.POSITIVE_INFINITY);
-    } else {
-      this[`${field}_display`] = (lower.toString().concat(' – ', upper)).trim();
-      this[field] = lower.toString().concat('..', upper);
-    }
-  }
-
-  setAmount(amount) {
-    if (amount.unit && !isNaN(amount.value)) {
-      this.amount_value = amount.value;
-      this.amount_unit = amount.unit;
-    }
-  }
-
-  setUnitMetrics(unit, metricPrefix) {
-    const mp = metricPrefix || 'm';
-    if (unit === 'l') {
-      this.metrics = (this.metrics && this.metrics.replace(/(.{1}).{1}/, `$1${mp}`)) || 'mmmm';
-    } else if (unit === 'mol') {
-      this.metrics = (this.metrics && this.metrics.replace(/(.{2}).{1}/, `$1${mp}`)) || 'mmmm';
-    } else if (unit === 'mol/l') {
-      if (this.metrics && this.metrics.length === 3) {
-        this.metrics += mp;
-      } else {
-        this.metrics = (this.metrics && this.metrics.replace(/(.{3}).{1}/, `$1${mp}`)) || 'mmmm';
-      }
-    } else {
-      this.metrics = (this.metrics && this.metrics.replace(/(.{0}).{1}/, `$1${mp}`)) || 'mmmm';
-    }
-  }
-
-  setAmountAndNormalizeToGram(amount) {
-    this.amount_value = this.convertToGram(amount.value, amount.unit);
-    this.amount_unit = 'g';
-  }
-
-  setMetrics(metrics) {
-    this.metrics = metrics.value;
-  }
-
-  setDensity(density) {
-    this.density = density.value;
-    this.molarity_value = 0;
-  }
-
-  setMolecularMass(mass) {
-    this.molecular_mass = mass.value;
-  }
-
-  setUserLabels(userLabels) {
-    this.user_labels = userLabels;
-  }
-
-  setMolarity(molarity) {
-    this.molarity_value = molarity.value;
-    this.molarity_unit = molarity.unit;
-    this.density = 0;
-  }
-
-  get amountType() {
-    return this._current_amount_type || this.defaultAmountType();
-  }
-
-  set amountType(amount_type) {
-    this._current_amount_type = amount_type;
-  }
-
-  defaultAmountType() {
-    return (this.real_amount_value ? 'real' : 'target');
-  }
-
-  get defined_part_amount() {
-    const mw = this.molecule_molecular_weight;
-    return this.amount_mol * mw / 1000.0;
-  }
-
-  // amount proxy
-
-  get amount() {
-    return ({
-      value: this.amount_value,
-      unit: this.amount_unit
-    });
-  }
-
-  get amount_value() {
-    return this.amountType === 'real' ? this.real_amount_value : this.target_amount_value;
-  }
-
-  set amount_value(amount_value) {
-    if (this.amountType === 'real') {
-      this.real_amount_value = amount_value;
-    } else {
-      this.target_amount_value = amount_value;
-    }
-  }
-
-  get amount_unit() {
-    return (this.amountType === 'real' ? this.real_amount_unit : this.target_amount_unit) || 'g';
-  }
-
-  set amount_unit(amount_unit) {
-    if (this.amountType === 'real') {
-      this.real_amount_unit = amount_unit;
-    } else {
-      this.target_amount_unit = amount_unit;
-    }
-  }
-
-  get has_molarity() {
-    return this.molarity_value > 0 && this.density === 0;
-  }
-
-  get has_density() {
-    return this.density > 0 && this.molarity_value === 0;
-  }
-
-  // target amount
-
-  get target_amount_value() {
-    return this._target_amount_value;
-  }
-
-  set target_amount_value(amount_value) {
-    this._target_amount_value = amount_value;
-  }
-
-  get target_amount_unit() {
-    return this._target_amount_unit || 'g';
-  }
-
-  set target_amount_unit(amount_unit) {
-    this._target_amount_unit = amount_unit;
-  }
-
-  // real amount
-
-  get real_amount_value() {
-    return this._real_amount_value;
-  }
-
-  set real_amount_value(amount_value) {
-    this._real_amount_value = amount_value;
-  }
-
-  get real_amount_unit() {
-    return this._real_amount_unit || 'g';
-  }
-
-  set real_amount_unit(amount_unit) {
-    this._real_amount_unit = amount_unit;
-  }
-
-  get amount_g() {
-    return this.convertToGram(this.amount_value, this.amount_unit);
-  }
-
-  get amount_l() {
-    if (this.amount_unit === 'l') return this.amount_value;
-    return this.convertGramToUnit(this.amount_g, 'l');
-  }
-
-  get amount_mol() {
-    return this.convertGramToUnit(this.amount_g, 'mol');
-  }
-
-  // Menge in mmol = Menge (mg) * Reinheit  / Molmasse (g/mol)
-  // Volumen (ml) = Menge (mg) / Dichte (g/ml) / 1000
-  // Menge (mg)  = Volumen (ml) * Dichte (g/ml) * 1000
-  // Menge (mg) = Menge (mmol)  * Molmasse (g/mol) / Reinheit
-
-  convertGramToUnit(amount_g = 0, unit) {
-    if (this.contains_residues) {
-      const { loading } = this.residues[0].custom_info;
-      switch (unit) {
-        case 'g':
-          return amount_g;
-        case 'mol':
-          return (loading * amount_g) / 1000.0; // loading is always in mmol/g
-        default:
-          return amount_g;
-      }
-    } else {
-      switch (unit) {
-        case 'g':
-          return amount_g;
-        case 'l': {
-          if (this.has_molarity) {
-            const molecularWeight = this.molecule_molecular_weight;
-            const purity = this.purity || 1.0;
-            const molarity = this.molarity_value;
-            return (amount_g * purity) / (molarity * molecularWeight);
-          } if (this.has_density) {
-            const { density } = this;
-            return amount_g / (density * 1000);
-          }
-
-          return 0;
-        }
-        case 'mol': {
-          if (this.has_molarity) {
-            return this.amount_l * this.molarity_value;
-          }
-
-          const molecularWeight = this.molecule_molecular_weight;
-          const purity = this.purity || 1.0;
-          return (amount_g * purity) / molecularWeight;
-        }
-        default:
-          return amount_g;
-      }
-    }
-  }
-
-  convertToGram(amount_value, amount_unit) {
-    if (this.contains_residues) {
-      const amountValue = amount_value;
-      switch (amount_unit) {
-        case 'g':
-          return amountValue;
-        case 'mg':
-          return amountValue / 1000.0;
-        case 'mol': {
-          const { loading } = this.residues[0].custom_info;
-          if (!loading) return 0.0;
-
-          return (amountValue / loading) * 1000.0;
-        }
-        default:
-          return amountValue;
-      }
-    } else {
-      switch (amount_unit) {
-        case 'g':
-          return amount_value;
-        case 'mg':
-          return amount_value / 1000.0;
-        case 'l':
-          if (this.has_molarity) {
-            const molecularWeight = this.molecule_molecular_weight;
-            return amount_value * this.molarity_value * molecularWeight;
-          } if (this.has_density) {
-            return amount_value * (this.density || 1.0) * 1000;
-          }
-          return 0;
-        case 'mol':
-          const molecularWeight = this.molecule_molecular_weight;
-          return (amount_value / (this.purity || 1.0)) * molecularWeight;
-        default:
-          return amount_value;
-      }
-    }
-  }
-
-  get molecule_iupac_name() {
-    return this.molecule_name_hash && this.molecule_name_hash.label
-      || this.molecule && this.molecule.iupac_name;
-  }
-
-  set molecule_iupac_name(iupac_name) {
-    this.molecule.iupac_name = iupac_name;
-  }
-
-  get molecule_molecular_weight() {
-    if (this.decoupled) {
-      return this.molecular_mass;
-    }
-
-    return this.molecule && this.molecule.molecular_weight;
-  }
-
-  get molecule_exact_molecular_weight() {
-    return !this.decoupled && this.molecule && this.molecule.exact_molecular_weight;
-  }
-
-  get molecule_formula() {
-    if (this.decoupled) {
-      return (this.sum_formula && this.sum_formula.length) ? this.sum_formula : '';
-    }
-
-    return this.molecule && this.molecule.sum_formular;
-  }
-
-  get molecule_inchistring() {
-    return this.molecule && this.molecule.inchistring;
-  }
-
-  get molecule_inchikey() {
-    return this.molecule && this.molecule.inchikey;
-  }
-
-  get molecule_cano_smiles() {
-    return this.molecule && this.molecule.cano_smiles;
-  }
-
-  get purity() {
-    return this._purity;
-  }
-
-  set purity(purity) {
-    this._purity = purity;
-  }
-
-  get molecule() {
-    return this._molecule;
-  }
-
-  set molecule(molecule) {
-    this._molecule = new Molecule(molecule);
-    if (molecule.temp_svg) { this.sample_svg_file = molecule.temp_svg; }
-  }
-
-  get polymer_formula() {
-    return this.contains_residues && this.residues[0].custom_info.formula.toString();
-  }
-
-  get concat_formula() {
-    if (!this.molecule_formula) {
-      return '';
-    }
-
-    if (this.contains_residues) {
-      return this.molecule_formula + this.polymer_formula;
-    }
-
-    return this.molecule_formula;
-  }
-
-  get polymer_type() {
-    if (this.contains_residues) {
-      const info = this.residues[0].custom_info;
-      return (info.polymer_type ? info.polymer_type : info.surface_type).toString();
-    }
-    return false;
-  }
-
-  get loading() {
-    if (this.contains_residues) {
-      return this.residues[0].custom_info.loading;
-    }
-    return false;
-  }
-
-  set loading(loading) {
-    if (this.contains_residues) { this.residues[0].custom_info.loading = loading; }
-  }
-
-  get external_loading() {
-    if (this.contains_residues) {
-      return this.residues[0].custom_info.external_loading;
-    }
-    return false;
-  }
-
-  set external_loading(loading) {
-    if (this.contains_residues) {
-      this.residues[0].custom_info.external_loading = loading;
-    }
-  }
-
-  get error_loading() {
-    // TODO: temporary disabled
-    // return this.contains_residues && !this.loading && !this.reaction_product;
-    return false;
-  }
-
-  get isValid() {
-    return (this && ((this.molfile && !this.decoupled) || this.decoupled)
-      && !this.error_loading && !this.error_polymer_type);
-  }
-
-  get svgPath() {
-    if (this.show_label) {
-      return `svg_text/${this.labelText}`;
-    }
-
-    if (this.sample_svg_file) {
-      if (this.sample_svg_file === '***') {
-        return '/images/wild_card/no_image_180.svg';
-      }
-      return `/images/samples/${this.sample_svg_file}`;
-    }
-    return this.molecule && this.molecule.molecule_svg_file
-      ? `/images/molecules/${this.molecule.molecule_svg_file}` : '';
-  }
-  // todo: have a dedicated Material Sample subclass
-
-  get labelText() {
-    return this.name || this.molecule_formula || this.molecule.iupac_name;
-  }
-
-  get labelText() {
-    return this.name || this.molecule_formula || this.molecule.iupac_name;
-  }
-
-  set equivalent(equivalent) {
-    this._equivalent = equivalent;
-  }
-
-  get equivalent() {
-    return this._equivalent;
-  }
-
-  set scheme_yield(scheme_yield) {
-    this._scheme_yield = scheme_yield;
-  }
-
-  get scheme_yield() {
-    return this._scheme_yield;
-  }
-
-  set conc(conc) {
-    this._conc = conc;
-  }
-
-  get conc() {
-    return this._conc;
-  }
-
-  set maxAmount(maxAmount) {
-    this._maxAmount = maxAmount;
-  }
-
-  get maxAmount() {
-    return this._maxAmount;
-  }
-
-  serializeMaterial() {
-    const params = this.serialize();
-    const extra_params = {
-      equivalent: this.equivalent,
-      position: this.position,
-      reference: this.reference || false,
-      show_label: (this.decoupled && !this.molfile) ? true : (this.show_label || false),
-      waste: this.waste,
-      coefficient: this.coefficient,
-    };
-    _.merge(params, extra_params);
-    return params;
-  }
-
-  // Container & Analyses routines
-  addAnalysis(analysis) {
-    this.container.children.filter(
-      (element) => ~element.container_type.indexOf('analyses')
-    )[0].children.push(analysis);
-  }
-
-  attachments() {
-    let target = [];
-    this.datasetContainers().forEach((dt) => {
-      const atts = dt.attachments;
-      target = [...target, ...atts];
-    });
-    return target;
-  }
-
-  calculateMaxAmount(referenceSample) {
-    const refAmount = referenceSample.amount_mol;
-    const sampleCoeff = this.coefficient || 1.0;
-    const refCoeff = (referenceSample.coefficient || 1.0);
-    const coeffQuotient = sampleCoeff / refCoeff;
-
-    this.maxAmount = refAmount * coeffQuotient * this.molecule_molecular_weight;
-  }
-
-  get solvent() {
-    try {
-      // handle the old solvent data
-      const jsonSolvent = JSON.parse(this._solvent);
-      const solv = [];
-      if (jsonSolvent) {
-        solv.push(jsonSolvent);
-      }
-      return solv;
-    } catch (e) {
-      return this._solvent;
-    }
-  }
-
-  set solvent(solvent) {
-    this._solvent = solvent;
-  }
-
-  addSolvent(newSolvent) {
-    const { molecule } = newSolvent;
-    if (molecule) {
-      const tmpSolvents = [];
-      if (this.solvent) {
-        Object.assign(tmpSolvents, this.solvent);
-      }
-      const solventData = {
-        label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1
-      };
-      const filtered = tmpSolvents.find((solv) => (solv && solv.label === solventData.label
-          && solv.smiles === solventData.smiles
-          && solv.inchikey && solventData.inchikey));
-      if (!filtered) {
-        tmpSolvents.push(solventData);
-      }
-      this.solvent = tmpSolvents;
-    }
-  }
-
-  deleteSolvent(solventToDelete) {
-    const tmpSolvents = [];
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent);
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.label === solventToDelete.label
-        && solv.smiles === solventToDelete.smiles
-        && solv.inchikey === solventToDelete.inchikey));
-    if (filteredIndex >= 0) {
-      tmpSolvents.splice(filteredIndex, 1);
-    }
-    this.solvent = tmpSolvents;
-  }
-
-  updateSolvent(solventToUpdate) {
-    const tmpSolvents = [];
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent);
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => (solv.smiles === solventToUpdate.smiles
-        && solv.inchikey && solventToUpdate.inchikey));
-    if (filteredIndex >= 0) {
-      tmpSolvents[filteredIndex] = solventToUpdate;
-    }
-    this.solvent = tmpSolvents;
-  }
-
-  analysisArray() {
-    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
-    return analyses ? analyses.children : [];
-  }
-
-  get solvent() {
-    try {
-      //handle the old solvent data
-      const jsonSolvent = JSON.parse(this._solvent)
-      let solv = []
-      if (jsonSolvent) {
-        solv.push(jsonSolvent)
-      }
-      return solv
-    }
-    catch (e) {}
-    return this._solvent
-  }
-
-  set solvent(solvent) {
-    this._solvent = solvent
-  }
-
-  addSolvent(newSolvent) {
-    const molecule = newSolvent.molecule
-    if (molecule) {
-      let tmpSolvents = []
-      if (this.solvent) {
-        Object.assign(tmpSolvents, this.solvent)
-      }
-      const solventData = { label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1 }
-      const filtered = tmpSolvents.find((solv) => {
-        return (solv && solv.label === solventData.label &&
-          solv.smiles === solventData.smiles &&
-          solv.inchikey && solventData.inchikey)
-      })
-      if (!filtered) {
-        tmpSolvents.push(solventData)
-      }
-      this.solvent = tmpSolvents
-    }
-  }
-
-  deleteSolvent(solventToDelete) {
-    let tmpSolvents = []
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.label === solventToDelete.label &&
-        solv.smiles === solventToDelete.smiles &&
-        solv.inchikey === solventToDelete.inchikey)
-    })
-    if (filteredIndex >= 0) {
-      tmpSolvents.splice(filteredIndex, 1);
-    }
-    this.solvent = tmpSolvents
-  }
-
-  updateSolvent(solventToUpdate) {
-    let tmpSolvents = []
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.smiles === solventToUpdate.smiles &&
-        solv.inchikey && solventToUpdate.inchikey)
-    })
-    if (filteredIndex >= 0) {
-      tmpSolvents[filteredIndex] = solventToUpdate
-    }
-    this.solvent = tmpSolvents
-  }
-
-  analysisArray() {
-    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
-    return analyses ? analyses.children : [];
-  }
-}
-
-Sample.counter = 0;
-Sample.children_count = {};
diff --git a/app/packs/src/components/models/Screen.js b/app/packs/src/components/models/Screen.js
deleted file mode 100644
index ff89ff570..000000000
--- a/app/packs/src/components/models/Screen.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import Element from 'src/models/Element';
-import Wellplate from 'src/models/Wellplate';
-import Container from 'src/models/Container';
-import Segment from 'src/models/Segment';
-
-export default class Screen extends Element {
-  static buildEmpty(collectionID) {
-    const descriptionDefault = {
-      ops: [{ insert: '' }]
-    };
-
-    return new Screen({
-      collection_id: collectionID,
-      type: 'screen',
-      name: 'New Screen',
-      collaborator: '',
-      requirements: '',
-      conditions: '',
-      result: '',
-      description: descriptionDefault,
-      wellplates: [],
-      research_plans: [],
-      container: Container.init(),
-      segments: [],
-      component_graph_data: {
-        nodes: [],
-        edges: []
-      }
-    });
-  }
-
-  static buildFromWellplatesAndCollectionId(clipboardWellplates, collection_id) {
-    let descriptionDefault = {
-      ops: [{ insert: "" }]
-    };
-
-    return new Screen({
-      collection_id: collectionID,
-      type: 'screen',
-      name: 'New Screen with Wellplates',
-      collaborator: '',
-      requirements: '',
-      conditions: '',
-      result: '',
-      description: descriptionDefault,
-      wellplates: clipboardWellplates,
-      research_plans: [],
-      container: Container.init(),
-      segments: [],
-      component_graph_data: {
-        nodes: [],
-        edges: []
-      }
-    })
-  }
-
-  serialize() {
-    return super.serialize({
-      name: this.name,
-      collaborator: this.collaborator,
-      result: this.result,
-      conditions: this.conditions,
-      requirements: this.requirements,
-      description: this.description,
-      wellplate_ids: this.wellplateIDs,
-      research_plan_ids: this.researchPlanIDs,
-      container: this.container,
-      segments: this.segments.map(s => s.serialize()),
-      component_graph_data: this.component_graph_data
-    })
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get collaborator() {
-    return this._collaborator;
-  }
-
-  set collaborator(collaborator) {
-    this._collaborator = collaborator;
-  }
-
-  get requirements() {
-    return this._requirements;
-  }
-
-  set requirements(requirements) {
-    this._requirements = requirements;
-  }
-
-  get conditions() {
-    return this._conditions;
-  }
-
-  set conditions(conditions) {
-    this._conditions = conditions;
-  }
-
-  get result() {
-    return this._result;
-  }
-
-  set result(result) {
-    this._result = result;
-  }
-
-  get description() {
-    return this._description;
-  }
-
-  set description(description) {
-    this._description = description;
-  }
-
-  get wellplates() {
-    return this._wellplates;
-  }
-
-  set wellplates(wellplates) {
-    this._wellplates = wellplates.map(w => new Wellplate(w));
-  }
-
-  get wellplateIDs() {
-    return this._wellplates.map(w => w.id);
-  }
-
-  get researchPlanIDs() {
-    return this.research_plans.map(rp => rp.id);
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-
-  title() {
-    return this.name;
-  }
-
-  get componentGraphData() {
-    if (this.component_graph_data == {}) {
-      return { nodes: {}, edges: {} }
-    } else {
-      return this.component_graph_data
-    }
-  }
-
-  set componentGraphData(data) {
-    if (data == {}) {
-      console.debug('received empty component graph data!');
-      this.component_graph_data = { nodes: {}, edges: {} };
-    } else {
-      this.component_graph_data = data;
-    }
-  }
-}
diff --git a/app/packs/src/components/models/Segment.js b/app/packs/src/components/models/Segment.js
deleted file mode 100644
index 95d8c33ca..000000000
--- a/app/packs/src/components/models/Segment.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Element from './Element';
-
-export default class Segment extends Element {
-  static buildEmpty(klass) {
-    const template = (klass && klass.properties_release) || {};
-    return new Segment({
-      segment_klass_id: this.segment_klass_id || (klass && klass.id),
-      properties: template,
-      select_options: template.select_options || {},
-      segment_klass: klass,
-      properties_release: [],
-      files: []
-    });
-  }
-
-  serialize() {
-    return super.serialize({
-      klassType: 'Segment',
-      segment_klass: this.segment_klass,
-      segment_klass_id: this.segment_klass_id,
-      properties: this.properties,
-      files: this.files
-    });
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get segment_klass() {
-    return this._segment_klass;
-  }
-
-  set segment_klass(klass) {
-    this._segment_klass = klass;
-  }
-
-  get klassName() {
-    return this._klass_name;
-  }
-  set klassName(klassName) {
-    this._klass_name = klassName;
-  }
-
-
-  get properties() {
-    return this._properties;
-  }
-
-  set properties(properties) {
-    this._properties = properties;
-  }
-
-  get select_options() {
-    return this._select_options;
-  }
-
-  set select_options(select_options) {
-    this._select_options = select_options;
-  }
-
-  get segment_klass_id() {
-    return this._segment_klass_id;
-  }
-
-  set segment_klass_id(segment_klass_id) {
-    this._segment_klass_id = segment_klass_id;
-  }
-}
diff --git a/app/packs/src/components/models/StructureDef.js b/app/packs/src/components/models/StructureDef.js
deleted file mode 100644
index 1f87a9347..000000000
--- a/app/packs/src/components/models/StructureDef.js
+++ /dev/null
@@ -1,101 +0,0 @@
-export default class StructureDef {
-  constructor(args) {
-    Object.assign(this, args);
-
-    if (!this.getMolfileFunction) {
-      this.getMolfileFunction = this.defaultGetMolfileFunction;
-    }
-  }
-
-  defaultGetMolfileFunction() {
-    return new Promise((resolve) => {
-      const mf = this.editor.getMolfile();
-      resolve(mf);
-    });
-  }
-
-  getEditor() {
-    const frame = document.getElementById(this.id);
-    if (frame && ('contentDocument' in frame)) {
-      return frame.contentWindow[this.path];
-    }
-    return document.frames && document.frames[this.id] &&
-      document.frames[this.id].window[this.path];
-  }
-
-  get editor() {
-    return this.getEditorFunction ? this.getEditorFunction() : this.getEditor();
-  }
-
-  get molfile() {
-    const func = this.editor[this.getMfFuncName];
-    let result;
-    if (!func) { return null; }
-    if (this.getMfWithCallback) {
-      this.editor[this.getMfFuncName]((a) => { result = a; });
-    } else {
-      result = func();
-    }
-    return result;
-  }
-
-  set molfile(mf) {
-    if (this.setMolfileInFrame) {
-      const frame = document.getElementById(this.id);
-      if (frame && ('contentDocument' in frame)) {
-        if (frame.contentWindow[this.setMolfileInFrame] && mf) {
-          frame.contentWindow[this.setMolfileInFrame] = mf;
-        }
-      }
-    } else {
-      // eslint-disable-next-line no-unused-expressions
-      this.editor && this.editor[this.setMfFuncName] && this.editor[this.setMfFuncName](mf);
-    }
-  }
-
-  get svg() {
-    const func = this.editor[this.getSVGFuncName];
-    let result;
-    if (!func) { return null; }
-    if (this.getSVGWithCallback) {
-      this.editor[this.getSVGFuncName]((a) => { result = a; });
-    } else {
-      result = func();
-    }
-    return result;
-  }
-
-  fetchSVG() {
-    const func = this.editor[this.getSVGFuncName];
-    return new Promise((resolve, reject) => {
-      if (!func) { reject(new Error(`get ${'svg'} method missing`)); }
-      if (this.getSVGWithCallback) {
-        this.editor[this.getSVGFuncName]((a) => { resolve(a); });
-      } else {
-        resolve(func());
-      }
-    });
-  }
-
-  get smiles() {
-    const func = this.editor[this.getSmiFuncName];
-    if (!func) { return null; }
-    let result;
-    if (this.getSmiWithCallback) {
-      this.editor[this.getSmiFuncName]((a) => { result = a; });
-    } else {
-      result = func();
-    }
-    return result;
-  }
-
-  get info() {
-    return (
-      {
-        smiles: this.smiles || '',
-        inchikey: '',
-        inchi: '',
-      }
-    );
-  }
-}
diff --git a/app/packs/src/components/models/StructureEditor.js b/app/packs/src/components/models/StructureEditor.js
deleted file mode 100644
index 1d1747275..000000000
--- a/app/packs/src/components/models/StructureEditor.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import uuid from 'uuid';
-import StructureDef from './StructureDef';
-
-export default class StructureEditor {
-  constructor(args) {
-    Object.assign(this, args);
-    if (!this.id) {
-      this.id = StructureEditor.buildID();
-    }
-    this.structureDef = this.buildStructureDef();
-  }
-
-  static buildID() {
-    return uuid.v1();
-  }
-
-  get structureDef() {
-    return this._structureDef;
-  }
-
-  set structureDef(structureDef) {
-    this._structureDef = structureDef;
-  }
-
-  buildStructureDef() {
-    return new StructureDef({ id: this.id, path: this.path, ...this.structure });
-  }
-}
diff --git a/app/packs/src/components/models/Well.js b/app/packs/src/components/models/Well.js
deleted file mode 100644
index 869262a9d..000000000
--- a/app/packs/src/components/models/Well.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Element from 'src/models/Element';
-import Sample from 'src/models/Sample';
-
-export default class Well extends Element {
-  serialize() {
-    return super.serialize({
-      position: this.position,
-      readouts: this.readouts || [],
-      sample: this.sample && new Sample(this.sample).serialize()
-    });
-  }
-
-  set sample(sample) {
-    this._sample = (sample) ? new Sample(sample) : null
-  }
-
-  get sample() {
-    return this._sample;
-  }
-}
diff --git a/app/packs/src/components/models/Wellplate.js b/app/packs/src/components/models/Wellplate.js
deleted file mode 100644
index 2387459ba..000000000
--- a/app/packs/src/components/models/Wellplate.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import Element from './Element';
-import Well from './Well';
-import Sample from './Sample';
-import Container from './Container.js';
-import Segment from './Segment';
-
-export default class Wellplate extends Element {
-  constructor(args) {
-    super(args)
-    this.wells = this.initWellsWithPosition(this.wells, 96);
-    this._checksum = this.checksum();
-  }
-
-  static buildEmpty(collection_id) {
-    return new Wellplate(
-      {
-        collection_id: collection_id,
-        type: 'wellplate',
-        name: 'New Wellplate',
-        size: 96,
-        description: Wellplate.quillDefault(),
-        wells: [],
-        container: Container.init(),
-        segments: []
-      }
-    )
-  }
-
-  static buildFromSamplesAndCollectionId(clipboardSamples, collection_id) {
-    let samples = clipboardSamples.map(sample => {
-      return sample.buildChild();
-    });
-
-    let wells = samples.map(sample => {
-      return new Well({
-        sample: sample
-      });
-    })
-
-    return new Wellplate(
-      {
-        collection_id: collection_id,
-        type: 'wellplate',
-        name: 'New Wellplate',
-        size: 96,
-        description: Wellplate.quillDefault(),
-        wells: wells,
-        container: Container.init(),
-        segments: []
-      }
-    )
-  }
-
-  get name() {
-    return this._name;
-  }
-
-  set name(name) {
-    this._name = name;
-  }
-
-  get description() {
-    return this._description;
-  }
-
-  set description(description) {
-    this._description = description;
-  }
-
-  get wells() {
-    return this._wells
-  }
-
-  set wells(wells) {
-    this._wells = wells.map(w => new Well(w));
-  }
-
-  set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
-  }
-
-  get segments() {
-    return this._segments || [];
-  }
-
-  serialize() {
-    return super.serialize({
-      name: this.name,
-      size: this.size,
-      description: this.description,
-      wells: this.wells.map(w => w.serialize()),
-      container: this.container,
-      segments: this.segments.map(s => s.serialize())
-    })
-  }
-
-
-  // ---
-
-  initWellsWithPosition(wells, size) {
-    const placeholdersCount = size - wells.length;
-    const placeholders = Array(placeholdersCount).fill({});
-    let allWells = wells.concat(placeholders);
-    return allWells.map((well, i) => this.initWellWithPositionByIndex(well, i));
-  }
-
-  initWellWithPositionByIndex(well, i) {
-    return {
-      ...well,
-      position: this.calculatePositionOfWellByIndex(i)
-    }
-  }
-
-  calculatePositionOfWellByIndex(i) {
-    const cols = 12;
-    let remainder = (i + 1) % cols;
-    return {
-      x: (remainder == 0) ? cols : remainder,
-      y: Math.floor(i / cols) + 1
-    };
-  }
-
-  title() {
-    return this.name;
-  }
-}
diff --git a/app/packs/src/components/nmr_sim/LineChart.js b/app/packs/src/components/nmr_sim/LineChart.js
deleted file mode 100644
index a9ff68d49..000000000
--- a/app/packs/src/components/nmr_sim/LineChart.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import d3 from 'd3';
-/* global $ */
-
-class D3LineChart {
-  constructor() {
-    this.margin = {
-      top: 50,
-      bottom: 50,
-      right: 10,
-      left: 90,
-    };
-    this.width = 1000 - this.margin.left - this.margin.right;
-    this.height = 500 - this.margin.top - this.margin.bottom;
-  }
-
-  create(input) {
-    this.drawChart(input);
-  }
-
-  update(input) {
-    this.destroy(input.el);
-    this.drawChart(input);
-  }
-
-  destroy(el) {
-    d3.select(el).selectAll('svg').remove();
-  }
-
-  drawChart(props) {
-    const { data, el, type } = props;
-    const width = this.width;
-    const height = this.height;
-    const margin = this.margin;
-
-    const xExtent = d3.extent(data, d => d.x);
-    const yExtent = d3.extent(data, d => d.y);
-
-    const xScale = d3.scale.linear()
-                      .domain(xExtent)
-                      .range([width, 0]);
-    const yScale = d3.scale.linear()
-                      .domain(yExtent)
-                      .range([height, 0]);
-
-    const linePath = d3.svg.line()
-                   .x(d => xScale(d.x))
-                   .y(d => yScale(d.y));
-
-    const yFormat = d3.format('.2n');
-
-    const zoomed = () => {
-      svg.select('.x.axis').call(xAxis);
-      svg.select('.y.axis').call(yAxis);
-      svg.select('.x.grid')
-          .call(makeXaxis
-                  .tickSize(-height, 0, 0)
-                  .tickFormat(''));
-      svg.select('.y.grid')
-          .call(makeYaxis
-                  .tickSize(-width, 0, 0)
-                  .tickFormat(''));
-      svg.select('.line')
-          .attr('class', 'line')
-          .attr('d', linePath);
-    };
-
-    const zoom = d3.behavior.zoom()
-                    .x(xScale) // omit y
-                    .on('zoom', zoomed);
-
-    const resetZoom = () => {
-      d3.transition().duration(200).tween('zoom', () => {
-        const ix = d3.interpolate(xScale.domain(), xExtent);
-        d3.interpolate(yScale.domain(), yExtent);
-        return t => {
-          zoom.x(xScale.domain(ix(t))); // omit y
-          zoomed();
-        };
-      });
-    };
-
-    const svg = d3.select(el)
-                  .append('svg:svg')
-                  .attr('id', 'line-chart')
-                  .attr('width', width + margin.left + margin.right)
-                  .attr('height', height + margin.top + margin.bottom)
-                  .attr('viewBox', `0 0  ${width + margin.left + margin.right}
-                                         ${height + margin.top + margin.bottom}`)
-                  .attr('perserveAspectRatio', 'xMinYMid')
-                  .append('svg:g')
-                  .attr('transform', `translate(${margin.left}, ${margin.top})`)
-                  .call(zoom).on('dblclick.zoom', resetZoom);
-
-    svg.append('svg:rect')
-        .attr('width', width)
-        .attr('height', height)
-        .attr('class', 'plot');
-
-    const xAxis = d3.svg.axis()
-                    .scale(xScale)
-                    .orient('bottom')
-                    .ticks(5);
-    const yAxis = d3.svg.axis()
-                    .scale(yScale)
-                    .orient('left')
-                    .ticks(5)
-                    .tickFormat(yFormat);
-    const makeXaxis = d3.svg.axis()
-                          .scale(xScale)
-                          .orient('bottom')
-                          .ticks(5);
-    const makeYaxis = d3.svg.axis()
-                          .scale(yScale)
-                          .orient('left')
-                          .ticks(5);
-
-    svg.append('svg:g')
-        .attr('class', 'x axis')
-        .attr('transform', `translate(0, ${height})`)
-        .call(xAxis);
-
-    svg.append('g')
-        .attr('class', 'y axis')
-        .call(yAxis);
-
-    svg.append('g')
-        .attr('class', 'x grid')
-        .attr('transform', `translate(0, ${height})`)
-        .call(makeXaxis
-                .tickSize(-height, 0, 0)
-                .tickFormat(''));
-
-    svg.append('g')
-        .attr('class', 'y grid')
-        .call(makeYaxis
-                .tickSize(-width, 0, 0)
-                .tickFormat(''));
-
-    svg.append('text')
-        .attr('text-anchor', 'middle')
-        .attr('transform', `translate(${0 - margin.left + 15}, ${height / 2})rotate(-90)`)
-        .text('Y(A.U)');
-    svg.append('text')
-        .attr('text-anchor', 'middle')  // this makes it easy to centre the text
-        .attr('transform', `translate(${width / 2}, ${height + margin.bottom})`)
-        .text('X(PPM)');
-
-    svg.append('svg:clipPath')
-        .attr('id', 'clip')
-        .append('svg:rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', width)
-        .attr('height', height);
-
-    const chartBody = svg.append('g')
-                          .attr('clip-path', 'url(#clip)');
-
-    chartBody.append('svg:path')
-              .datum(data)
-              .attr('class', 'line')
-              .attr('d', linePath);
-
-    // display type on the top-right corner
-    svg.append('text')
-        .attr('text-anchor', 'middle')
-        .attr('transform', `translate(${width - 50}, 30)`)
-        .text(`NMR ${type}`);
-    svg.append('rect')
-        .attr('transform', `translate(${width - 120}, 25)`)
-        .attr('width', 30)
-        .attr('height', 1)
-        .attr('class', 'line');
-
-    // responsive
-    const chart = $('#line-chart');
-    const aspect = chart.width() / chart.height();
-    const container = chart.parent();
-
-    $(window).on('resize', () => {
-      const targetWidth = container.width();
-      chart.attr('width', targetWidth);
-      chart.attr('height', Math.round(targetWidth / aspect));
-    }).trigger('resize');
-  }
-}
-
-const LineChart = new D3LineChart();
-
-export { LineChart };
diff --git a/app/packs/src/components/nmr_sim/LineChartWrapper.js b/app/packs/src/components/nmr_sim/LineChartWrapper.js
deleted file mode 100644
index 06949421d..000000000
--- a/app/packs/src/components/nmr_sim/LineChartWrapper.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { LineChart } from './LineChart';
-
-export default class LineChartWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.d3Ref = React.createRef();
-  }
-
-  componentDidMount() {
-    const node = this.d3Ref.current;
-
-    LineChart.create({
-      data: this.props.data,
-      type: this.props.type,
-      el: node,
-    });
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const node = this.d3Ref.current;
-
-    LineChart.update({
-      data: nextProps.data,
-      type: nextProps.type,
-      el: node,
-    });
-  }
-
-  componentWillUnmount() {
-    const node = this.d3Ref.current;
-
-    LineChart.destroy(node);
-  }
-
-  render() {
-    return (
-      <div
-        className="nmr-chart"
-        ref={this.d3Ref}
-      />
-    );
-  }
-}
-
-LineChartWrapper.propTypes = {
-  data: PropTypes.array,
-  type: PropTypes.string,
-};
diff --git a/app/packs/src/components/nmr_sim/NmrSimTab.js b/app/packs/src/components/nmr_sim/NmrSimTab.js
deleted file mode 100644
index 80d607203..000000000
--- a/app/packs/src/components/nmr_sim/NmrSimTab.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import { Button, ButtonToolbar, ListGroup, ListGroupItem } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-import NmrSimActions from '../actions/NmrSimActions';
-import NmrSimStore from '../stores/NmrSimStore';
-import LineChartWrapper from './LineChartWrapper';
-import { ViewAtNmrdb, LinkToNmrdb } from './NmrdbReference';
-
-export default class NmrSimTab extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      nmrSpectrum: { data13C: [], data1H: [] },
-      nmrType: '13C',
-      synced: false,
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    NmrSimStore.listen(this.onChange);
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const sample = this.props.sample;
-    if (sample.molecule.id !== nextProps.sample.molecule.id) {
-      NmrSimActions.resetNMR.defer();
-    }
-  }
-
-  componentWillUnmount() {
-    NmrSimStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState({
-      nmrSpectrum: state.currentNmr,
-      nmrType: state.currentType,
-      synced: state.synced,
-    });
-  }
-
-  updateNmrdb(type) {
-    const sample = this.props.sample;
-    const spectrum = this.state.nmrSpectrum;
-    const needToFetch = spectrum.data13C.length + spectrum.data1H.length === 0;
-    NmrSimActions.updateNmrdb(type, needToFetch, sample.molecule.id);
-  }
-
-  showChartNmrdb(spectrum) {
-    const synced = this.state.synced;
-    const is13C = this.state.nmrType === '13C';
-    const data = is13C ? spectrum.data13C : spectrum.data1H;
-    return (
-      synced ? this.chartOrWarning(data) : null
-    );
-  }
-
-  chartOrWarning(data) {
-    return (
-      data.length !== 0
-        ? <LineChartWrapper data={data}
-                            type={this.state.nmrType}
-                            className="line-chart-wrapper" />
-        : this.warning()
-    );
-  }
-
-  warning() {
-    const type = this.state.nmrType;
-    const style = type === '13C' ? 'danger' : 'warning';
-    return (
-      <div>
-        <br />
-        <ListGroup>
-          <ListGroupItem bsStyle={style}>
-            Sorry, the {type} simulation is not available now. Please check directly on
-            <a target="_blank" href="https://www.nmrdb.org/">
-              <img src="/images/nmrdb_logo.jpg" alt="" width="80" />
-            </a>
-          </ListGroupItem>
-        </ListGroup>
-      </div>
-    );
-  }
-
-  render() {
-    const sample = this.props.sample;
-    const spectrum = this.state.nmrSpectrum;
-    const type = this.state.nmrType;
-    const smile = sample.molecule_cano_smiles || 'c1ccccc1CC';
-
-    return (
-      <div style={{ width: '100%' }}>
-        <ButtonToolbar>
-          <Button bsStyle="primary"
-                  onClick={ this.updateNmrdb.bind(this, '1H') }>
-            predict 1H NMR
-          </Button>
-          <Button bsStyle="success"
-                  onClick={ this.updateNmrdb.bind(this, '13C') }>
-            predict 13C NMR
-          </Button>
-          <ViewAtNmrdb is13C={type === '13C'}
-                       smile={smile} />
-        </ButtonToolbar>
-
-        {this.showChartNmrdb(spectrum)}
-
-        <br />
-        <ListGroupItem>
-          <LinkToNmrdb />
-        </ListGroupItem>
-      </div>
-    );
-  }
-
-}
-
-NmrSimTab.propTypes = {
-  sample: PropTypes.object,
-};
diff --git a/app/packs/src/components/nmr_sim/NmrdbReference.js b/app/packs/src/components/nmr_sim/NmrdbReference.js
deleted file mode 100644
index 056dc60c8..000000000
--- a/app/packs/src/components/nmr_sim/NmrdbReference.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ViewAtNmrdb = ({ is13C, smile }) => {
-  const nmrdbLink = is13C
-    ? `http://www.nmrdb.org/service.php?name=nmr-13c-prediction&smiles=${smile}`
-    : `http://www.nmrdb.org/service.php?name=nmr-1h-prediction&smiles=${smile}`;
-  return (
-    <div className="nmr-icon">
-      <i>View directly on </i>
-      <a target="_blank" rel="noreferrer" href={nmrdbLink} className="nmr-icon-border">
-        <img src="/images/nmrdb_logo.jpg" alt="" width="80" />
-      </a>
-    </div>
-  );
-};
-
-const LinkToNmrdb = () => (
-  <div>
-    <i>Powered by <img src="/images/nmrdb_logo.jpg" alt="" width="80" /></i>
-    <br />
-    <h5>References</h5>
-    <p>Banfi, D.; Patiny, L. <a target="_blank" rel="noreferrer" href="https://doi.org/10.2533/chimia.2008.280">www.nmrdb.org: Resurrecting and processing NMR spectra on-line Chimia</a>, 2008, 62(4), 280-281.</p>
-    <p>Andrés M. Castillo, Luc Patiny and Julien Wist. <a target="_blank" rel="noreferrer" href="https://doi.org/10.1016/j.jmr.2010.12.008">Fast and Accurate Algorithm for the Simulation of NMR spectra of Large Spin Systems</a>. J of Magnetic Resonance 2011.</p>
-    <p>Aires-de-Sousa, M. Hemmer, J. Gasteiger, <a target="_blank" rel="noreferrer" href="https://doi.org/10.1021/ac010737m">Prediction of 1H NMR Chemical Shifts Using Neural Networks</a>, Analytical Chemistry, 2002, 74(1), 80-90.</p>
-    <p>Steinbeck, Christoph, Stefan Krause, and Stefan Kuhn, <a target="_blank" rel="noreferrer" href="https://doi.org/10.1021/ci0341363">NMRShiftDB Constructing a Free Chemical Information System with Open-Source Components</a>, J of chemical information and computer sciences, 2003, 43(6): 1733-1739.</p>
-  </div>
-);
-
-export { ViewAtNmrdb, LinkToNmrdb };
-
-ViewAtNmrdb.propTypes = {
-  is13C: PropTypes.bool,
-  smile: PropTypes.string,
-};
diff --git a/app/packs/src/components/nmr_sim/SampleDetailsTabName.js b/app/packs/src/components/nmr_sim/SampleDetailsTabName.js
deleted file mode 100644
index f74af51a7..000000000
--- a/app/packs/src/components/nmr_sim/SampleDetailsTabName.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default <div style={{ maxHeight: 25 }}>NMR</div>;
diff --git a/app/packs/src/components/prediction/Content.js b/app/packs/src/components/prediction/Content.js
deleted file mode 100644
index 680d042d7..000000000
--- a/app/packs/src/components/prediction/Content.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Select from 'react-select';
-import { Row, Col } from 'react-bootstrap';
-import UIActions from '../actions/UIActions';
-import PredictionActions from '../actions/PredictionActions';
-import ContentInputs from './ContentInputs';
-import ContentOutputs from './ContentOutputs';
-
-const styles = {
-  selectContainer: {
-    height: 50,
-  },
-};
-
-const templateOpts = () => (
-  [
-    { label: 'Predict Products', value: 'predictProducts' },
-    { label: 'Predict Starting Materials', value: 'predictReactants' },
-  ]
-);
-
-const onTemplateChange = (e) => {
-  PredictionActions.updateTemplate(e.value);
-  UIActions.uncheckWholeSelection.defer();
-};
-
-const ContentTemplate = template => (
-  <Row style={styles.selectContainer}>
-    <Col md={6} sm={12}>
-      <Select
-        options={templateOpts()}
-        value={template}
-        clearable={false}
-        onChange={onTemplateChange}
-      />
-    </Col>
-    <Col md={6} sm={12} />
-  </Row>
-);
-
-const Content = ({ template, els, outputEls }) => (
-  <div className="report-orders panel-workspace">
-    <br />
-    { ContentTemplate(template) }
-    { ContentInputs(template, els) }
-    <br />
-    { ContentOutputs(template, outputEls) }
-  </div>
-);
-
-Content.propTypes = {
-  template: PropTypes.string.isRequired,
-  els: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  outputEls: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default Content;
diff --git a/app/packs/src/components/prediction/ContentInputs.js b/app/packs/src/components/prediction/ContentInputs.js
deleted file mode 100644
index d0db2cf5b..000000000
--- a/app/packs/src/components/prediction/ContentInputs.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Panel } from 'react-bootstrap';
-
-const styles = {
-  svgContainer: {
-    height: 200,
-    overflowX: 'scroll',
-    overflowY: 'auto',
-    whiteSpace: 'nowrap',
-  },
-  svgBox: {
-    display: 'inline-block',
-    height: 100,
-    margin: 5,
-    width: 200,
-  },
-  svgTxt: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: 180,
-  },
-  emptyBox: {
-    marginTop: 60,
-  },
-};
-
-const contentBlock = (els) => {
-  if (!els || els.length === 0) {
-    return (
-      <div style={styles.emptyBox}>
-        <h3> Please select samples. </h3>
-      </div>
-    );
-  }
-
-  return (
-    els.map(el => (
-      <div key={el.svgPath} style={styles.svgBox}>
-        <SVG src={el.svgPath} />
-        <p style={styles.svgTxt}>{ el.molecule_iupac_name }</p>
-        <p style={styles.svgTxt}>{ el.molecule_cano_smiles }</p>
-      </div>
-    ))
-  );
-};
-
-const ContentInputs = (template, els) => {
-  const titleFromTemplate = (tpl) => ({
-    'predictProducts': 'Input: Starting Materials (accept max 10 molecules)',
-    'predictReactants': 'Input: Product (accept max 1 molecule)',
-  })[tpl]
-  const titleStr = titleFromTemplate(template) || 'TBD';
-
-  return (
-    <Panel bsStyle="default" defaultExpanded>
-      <Panel.Heading>
-        <Panel.Title toggle>
-          { titleStr }
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Collapse>
-        <Panel.Body>
-          <div className="svg" style={styles.svgContainer}>
-            { contentBlock(els) }
-          </div>
-        </Panel.Body>
-      </Panel.Collapse>
-    </Panel>
-  );
-};
-
-export default ContentInputs;
diff --git a/app/packs/src/components/prediction/ContentOutputs.js b/app/packs/src/components/prediction/ContentOutputs.js
deleted file mode 100644
index 075fdf3fb..000000000
--- a/app/packs/src/components/prediction/ContentOutputs.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan';
-import { Panel } from 'react-bootstrap';
-
-const styles = {
-  container: {
-  },
-};
-
-const stripBStyle = idx => (idx % 2 === 0 ? 'primary' : 'info');
-
-const contentBlock = els => (
-  els.map((el, idx) => (
-    <div key={`${idx}-${el.id}`}>
-      <Panel bsStyle={stripBStyle(idx)}>
-        <Panel.Heading>
-          <Panel.Title>
-            Rank { el.rank }: { el.smiles.join('.') }
-          </Panel.Title>
-        </Panel.Heading>
-        <SvgFileZoomPan
-          svg={el.svg}
-          duration={300}
-          resize
-        />
-      </Panel>
-    </div>
-  ))
-);
-
-const ContentOutputs = (template, outputEls) => {
-  const titleFromTemplate = (tpl) => ({
-    'predictProducts': 'Output: Products',
-    'predictReactants': 'Output: Starting Materials',
-  })[tpl]
-  const titleStr = titleFromTemplate(template) || 'TBD';
-
-  return (
-    <Panel bsStyle="default" defaultExpanded>
-      <Panel.Heading>
-        <Panel.Title toggle>
-          { titleStr }
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Collapse>
-        <Panel.Body>
-          <div style={styles.container}>
-            { contentBlock(outputEls) }
-          </div>
-        </Panel.Body>
-      </Panel.Collapse>
-    </Panel>
-  );
-};
-
-export default ContentOutputs;
diff --git a/app/packs/src/components/prediction/PredictionComponent.js b/app/packs/src/components/prediction/PredictionComponent.js
deleted file mode 100644
index 7e6b7462b..000000000
--- a/app/packs/src/components/prediction/PredictionComponent.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import PredictionActions from '../actions/PredictionActions';
-import UIActions from '../actions/UIActions';
-import DetailActions from '../actions/DetailActions';
-import LoadingActions from '../actions/LoadingActions';
-
-const clickToClose = (el) => {
-  DetailActions.close(el);
-};
-
-const CloseBtn = ({ el }) => {
-  const onClickToClose = () => clickToClose(el);
-
-  return (
-    <Button
-      bsStyle="danger"
-      bsSize="xsmall"
-      className="button-right"
-      onClick={onClickToClose}
-    >
-      <i className="fa fa-times" />
-    </Button>
-  );
-};
-
-const clickToReset = () => {
-  PredictionActions.reset();
-  UIActions.uncheckWholeSelection.defer();
-};
-
-const ResetBtn = () => (
-  <Button
-    bsStyle="info"
-    bsSize="xsmall"
-    className="button-right"
-    onClick={clickToReset}
-  >
-    <span><i className="fa fa-eraser" /> Reset</span>
-  </Button>
-);
-
-const PredictBtn = ({ inputEls, template }) => {
-  const onClick = () => {
-    LoadingActions.start.defer();
-    PredictionActions.infer.defer(inputEls, template);
-  };
-  const disableBtn = inputEls.length === 0;
-
-  return (
-    <Button
-      bsStyle="primary"
-      bsSize="xsmall"
-      className="button-right"
-      disabled={disableBtn}
-      onClick={onClick}
-    >
-      <span><i className="fa fa-file-text-o" /> Predict</span>
-    </Button>
-  );
-};
-
-PredictBtn.propTypes = {
-  inputEls: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export { CloseBtn, ResetBtn, PredictBtn };
diff --git a/app/packs/src/components/prediction/PredictionContainer.js b/app/packs/src/components/prediction/PredictionContainer.js
deleted file mode 100644
index 23db7625d..000000000
--- a/app/packs/src/components/prediction/PredictionContainer.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Tabs, Tab } from 'react-bootstrap';
-import PredictionActions from '../actions/PredictionActions';
-import PredictionStore from '../stores/PredictionStore';
-import UIStore from '../stores/UIStore';
-
-import Content from './Content';
-import PanelHeader from '../common/PanelHeader';
-import { CloseBtn, ResetBtn, PredictBtn } from './PredictionComponent';
-
-class PredictionContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...PredictionStore.getState(),
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onChangeUI = this.onChangeUI.bind(this);
-    this.panelHeader = this.panelHeader.bind(this);
-  }
-
-  componentDidMount() {
-    PredictionStore.listen(this.onChange);
-    UIStore.listen(this.onChangeUI);
-    const uiState = UIStore.getState();
-    this.onChangeUI(uiState);
-  }
-
-  componentWillUnmount() {
-    PredictionStore.unlisten(this.onChange);
-    UIStore.unlisten(this.onChangeUI);
-  }
-
-  onChange(state) {
-    this.setState({ ...state });
-  }
-
-  onChangeUI(uiState) {
-    const combState = { uiState, predictionState: this.state };
-    PredictionActions.updateUI.defer(combState);
-  }
-
-  panelHeader() {
-    const { prediction } = this.props;
-    const { inputEls, template } = this.state;
-    const btns = [
-      <CloseBtn key="closeBtn" el={prediction} />,
-      <PredictBtn
-        key="predictBtn"
-        inputEls={inputEls}
-        template={template}
-      />,
-      <ResetBtn key="resetBtn" />,
-    ];
-    return <PanelHeader title="Synthesis Prediction" btns={btns} />;
-  }
-
-  selectTab(key) { // eslint-disable-line class-methods-use-this
-    PredictionActions.updateActiveKey(key);
-  }
-
-  render() {
-    const {
-      activeKey, template, inputEls, defaultEls, outputEls,
-    } = this.state;
-
-    const els = (defaultEls && inputEls) ? [...defaultEls, ...inputEls] : [];
-
-    return (
-      <Panel
-        bsStyle="default"
-      >
-        <Panel.Heading>{this.panelHeader()}</Panel.Heading>
-        <Tabs
-          activeKey={activeKey}
-          onSelect={this.selectTab}
-          id="prediction-tabs"
-        >
-          <Tab eventKey={0} title="Content">
-            <Content
-              template={template}
-              els={els}
-              outputEls={outputEls}
-            />
-          </Tab>
-        </Tabs>
-      </Panel>
-    );
-  }
-}
-
-PredictionContainer.propTypes = {
-  prediction: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-};
-
-export default PredictionContainer;
diff --git a/app/packs/src/components/proxies/ElementPermissionProxy.js b/app/packs/src/components/proxies/ElementPermissionProxy.js
deleted file mode 100644
index 8378fee20..000000000
--- a/app/packs/src/components/proxies/ElementPermissionProxy.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import Element from '../models/Element';
-import _ from 'lodash';
-
-export default class ElementPermissionProxy {
-  constructor(element) {
-    let elementMethodNames = Object.getOwnPropertyNames(Object.getPrototypeOf(element)).concat(Object.getOwnPropertyNames(element));
-
-    elementMethodNames.forEach((m) => {
-      Object.defineProperty(this, m, {
-        get: () => { return this.methodOrRestrictionPattern(element, m) },
-        set: (arg) => { element[m] = arg }
-      })
-    });
-
-    this.isMethodDisabled = (methodName) => {
-      return this.methodOrRestrictionPattern(element, methodName) == this.restrictionPattern;
-    };
-
-    // get "superclass methods" and define them on proxy
-    let rootMethodNames = Object.getOwnPropertyNames(Object.getPrototypeOf(new Element));
-
-    _.difference(rootMethodNames, elementMethodNames).forEach((m) => {
-      Object.defineProperty(this, m, {
-        get: () => { return element[m] },
-        set: (arg) => { element[m] = arg }
-      })
-    });
-
-    this.unwrap = () => {
-      return element;
-    }
-  }
-
-  methodOrRestrictionPattern(element, m) {
-    if(element.isRestricted() == true && element[m] == undefined) {
-      return this.restrictionPattern;
-    } else {
-      return element[m];
-    }
-  }
-
-  get restrictionPattern() {
-    return '***';
-  }
-}
diff --git a/app/packs/src/components/qc/QcMain.js b/app/packs/src/components/qc/QcMain.js
deleted file mode 100644
index e635afd90..000000000
--- a/app/packs/src/components/qc/QcMain.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-
-import QcContent from 'src/apps/mydb/elements/details/samples/qcTab/components/QcContent';
-import QcActions from 'src/stores/alt/actions/QcActions';
-import QcStore from 'src/stores/alt/stores/QcStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-
-class QcMain extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...QcStore.getState(),
-      profile: UserStore.getState().profile,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.renderQcBtn = this.renderQcBtn.bind(this);
-    this.renderQcContent = this.renderQcContent.bind(this);
-  }
-
-  componentDidMount() {
-    QcStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    QcStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState({ ...state });
-  }
-
-  renderQcBtn() {
-    const { loading } = this.state;
-    const { sample } = this.props;
-    const handleOnClick = () => {
-      QcActions.setLoading();
-      QcActions.loadInfers.defer({ sample });
-    };
-    let iconClsName = 'fa fa-cog fa-1x';
-    if (loading) iconClsName += ' fa-spin fa-fw';
-    const bsStyle = loading ? 'warning' : 'primary';
-
-    return (
-      <Button
-        bsStyle={bsStyle}
-        bsSize="small"
-        onClick={handleOnClick}
-        disabled={loading}
-      >
-        <i className={iconClsName} />
-        <span className="g-marginLeft--10">Refresh</span>
-      </Button>
-    );
-  }
-
-  renderQcContent() {
-    const { infers, profile } = this.state;
-    const { sample } = this.props;
-    const infer = infers
-      .map(i => (i.sId === sample.id ? i : null))
-      .filter(r => r != null)[0];
-    if (!infer) return null;
-    let curation = profile ? profile.curation : 2;
-    if (curation === null) { curation = 2 }
-    return (
-      <QcContent
-        sample={sample}
-        infer={infer}
-        curation={curation}
-      />
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        {this.renderQcBtn()}
-        {this.renderQcContent()}
-      </div>
-    );
-  }
-}
-
-QcMain.propTypes = {
-  sample: PropTypes.object.isRequired,
-};
-
-export default QcMain;
diff --git a/app/packs/src/components/qc/components/QcContent.js b/app/packs/src/components/qc/components/QcContent.js
deleted file mode 100644
index 9450f182b..000000000
--- a/app/packs/src/components/qc/components/QcContent.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import AreaTitle from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/AreaTitle';
-import AreaSummary from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/AreaSummary';
-
-import BlockTitle from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockTitle';
-import BlockHnmr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockHnmr';
-import BlockCnmr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockCnmr';
-import BlockMS from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockMS';
-import BlockIr from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockIr';
-import BlockEa from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockEa';
-import BlockConclusion from 'src/apps/mydb/elements/details/samples/qcTab/components/substance/BlockConclusion';
-
-import { prismQcs } from 'src/apps/mydb/elements/details/samples/qcTab/utils/qcs';
-import { evaluateMs } from 'src/apps/mydb/elements/details/samples/qcTab/utils/ms';
-import { evaluateIr } from 'src/apps/mydb/elements/details/samples/qcTab/utils/ir';
-import { evaluateNmr } from 'src/apps/mydb/elements/details/samples/qcTab/utils/nmr';
-
-const QcContent = ({ sample, infer, curation }) => {
-  const {
-    irQc, msQc, hnmrQc, cnmrQc,
-  } = prismQcs(sample, infer);
-  const sumFormula = sample.molecule_formula;
-
-  const ansHnmr = evaluateNmr(hnmrQc, sumFormula);
-  const ansCnmr = evaluateNmr(cnmrQc, sumFormula);
-  const ansMs = evaluateMs(msQc, sample);
-  const ansIr = evaluateIr(irQc);
-
-  return (
-    <div>
-      <div>
-        <AreaTitle
-          curation={curation}
-        />
-        <AreaSummary
-          curation={curation}
-          ansHnmr={ansHnmr}
-          ansCnmr={ansCnmr}
-          ansMs={ansMs}
-          ansIr={ansIr}
-        />
-      </div>
-      <br />
-      <br />
-      <div>
-        <BlockTitle />
-        <BlockHnmr
-          ansHnmr={ansHnmr}
-        />
-        <BlockCnmr
-          ansCnmr={ansCnmr}
-        />
-        <BlockMS
-          ansMs={ansMs}
-        />
-        <BlockIr
-          ansIr={ansIr}
-        />
-        <BlockEa />
-        <BlockConclusion
-          ansHnmr={ansHnmr}
-          ansCnmr={ansCnmr}
-          ansMs={ansMs}
-          ansIr={ansIr}
-        />
-      </div>
-    </div>
-  );
-};
-
-QcContent.propTypes = {
-  sample: PropTypes.object.isRequired,
-  infer: PropTypes.object.isRequired,
-  curation: PropTypes.number.isRequired,
-};
-
-export default QcContent;
diff --git a/app/packs/src/components/qc/components/helper/icon.js b/app/packs/src/components/qc/components/helper/icon.js
deleted file mode 100644
index 1dd553540..000000000
--- a/app/packs/src/components/qc/components/helper/icon.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import { Label, Tooltip, OverlayTrigger } from 'react-bootstrap';
-
-const iconTp = margin => (
-  <Tooltip id="ans-tp">
-    max { margin } failure allowed.
-  </Tooltip>
-);
-
-const iconByBool = result => (
-  result
-    ? <Label bsStyle="success" className="label-qc">Pass</Label>
-    : <Label bsStyle="danger" className="label-qc">Fail</Label>
-);
-
-const iconByMargin = (result, margin = 0) => (
-  <OverlayTrigger placement="right" overlay={iconTp(margin)}>
-    { iconByBool(result) }
-  </OverlayTrigger>
-);
-
-const iconTpMs = (
-  <Tooltip id="ans-tp-ms">
-    Whether exact molecular mass is matched in the scan?
-  </Tooltip>
-);
-
-const iconMs = result => (
-  <OverlayTrigger placement="right" overlay={iconTpMs}>
-    { iconByBool(result) }
-  </OverlayTrigger>
-);
-
-const statusTp = txt => <Tooltip id="status-tp">{ txt }</Tooltip>;
-
-const iconStatus = (status) => {
-  switch (status) {
-    case 'accept':
-      return (
-        <OverlayTrigger placement="top" overlay={statusTp(status)}>
-          <i className="fa fa-check-circle-o" style={{ color: '#4caf50' }} />
-        </OverlayTrigger>
-      );
-    case 'warning':
-      return (
-        <OverlayTrigger placement="top" overlay={statusTp(status)}>
-          <i className="fa fa-exclamation-circle" style={{ color: '#ffc107' }} />
-        </OverlayTrigger>
-      );
-    case 'reject':
-      return (
-        <OverlayTrigger placement="top" overlay={statusTp(status)}>
-          <i className="fa fa-times-circle-o" style={{ color: '#e91e63' }} />
-        </OverlayTrigger>
-      );
-    case 'missing':
-      return (
-        <OverlayTrigger placement="top" overlay={statusTp(status)}>
-          <i className="fa fa-question-circle-o" style={{ color: '#5d4037' }} />
-        </OverlayTrigger>
-      );
-    case 'unknown':
-      return (
-        <OverlayTrigger placement="top" overlay={statusTp(status)}>
-          <i className="fa fa-question-circle-o" style={{ color: '#5d4037' }} />
-        </OverlayTrigger>
-      );
-    default:
-      return null;
-  }
-};
-
-export {
-  iconByMargin,
-  iconByBool,
-  iconMs,
-  iconStatus,
-};
diff --git a/app/packs/src/components/qc/components/helper/ir.js b/app/packs/src/components/qc/components/helper/ir.js
deleted file mode 100644
index 5ee78afa7..000000000
--- a/app/packs/src/components/qc/components/helper/ir.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Table } from 'react-bootstrap';
-
-import { iconStatus } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-
-const colorStyles = [
-  { backgroundColor: '#FFFF00' },
-  { backgroundColor: '#87CEFA' },
-  { backgroundColor: '#FFB6C1' },
-  { backgroundColor: '#00FF00' },
-  { backgroundColor: '#E6E6FA' },
-  { backgroundColor: '#FFD700' },
-  { backgroundColor: '#F0FFFF' },
-  { backgroundColor: '#F5F5DC' },
-];
-
-const colorLabel = (idx) => {
-  const style = Object.assign(
-    {},
-    colorStyles[idx % 8],
-    { width: 20, borderRadius: 20, textAlign: 'center' },
-  );
-
-  return (
-    <div
-      style={style}
-    >
-      <span
-        className="txt-label"
-      >
-        {idx + 1}
-      </span>
-    </div>
-  );
-};
-
-const tableIr = (fgs) => {
-  if (!fgs) return null;
-
-  return (
-    <Table responsive striped condensed hover>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>SMARTS</th>
-          <th>Machine Confidence</th>
-          <th>Machine</th>
-          <th>Owner</th>
-        </tr>
-      </thead>
-      <tbody>
-        {
-          fgs
-            .sort((a, b) => b.confidence - a.confidence)
-            .map((fg, idx) => (
-              <tr key={`${fg}${idx}`}>
-                <td>{colorLabel(idx)}</td>
-                <td>{fg.sma}</td>
-                <td>{fg.confidence} %</td>
-                <td>{iconStatus(fg.status)}</td>
-                <td>{iconStatus(fg.statusOwner)}</td>
-              </tr>
-            ))
-        }
-      </tbody>
-    </Table>
-  );
-};
-
-export { tableIr }; // eslint-disable-line
diff --git a/app/packs/src/components/qc/components/helper/nmr.js b/app/packs/src/components/qc/components/helper/nmr.js
deleted file mode 100644
index 48b5ab7cc..000000000
--- a/app/packs/src/components/qc/components/helper/nmr.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { Table } from 'react-bootstrap';
-
-import { iconStatus } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-import { numFormat, realFormat } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
-
-const tableNmr = (shifts = []) => (
-  <Table responsive striped condensed hover>
-    <thead>
-      <tr>
-        <th>Atom</th>
-        <th>Prediction (ppm)</th>
-        <th>Real (ppm)</th>
-        <th>Diff (ppm)</th>
-        <th>Machine</th>
-        <th>Owner</th>
-      </tr>
-    </thead>
-    <tbody>
-      {
-        shifts
-          .sort((a, b) => a.atom - b.atom)
-          .map((s, idx) => (
-            <tr key={`${s.atom}${idx}`}>
-              <td>{s.atom}</td>
-              <td>{numFormat(s.prediction)}</td>
-              <td>{realFormat(s.real, s.status)}</td>
-              <td>{realFormat(s.diff, s.status)}</td>
-              <td>{iconStatus(s.status)}</td>
-              <td>{iconStatus(s.statusOwner)}</td>
-            </tr>
-          ))
-      }
-    </tbody>
-  </Table>
-);
-
-const formatQV = (ops) => {
-  if (ops[0].insert === '\n') return ops.slice(1);
-  return ops;
-};
-
-export {
-  tableNmr,
-  formatQV,
-};
diff --git a/app/packs/src/components/qc/components/helper/qc_mol_view.js b/app/packs/src/components/qc/components/helper/qc_mol_view.js
deleted file mode 100644
index 1492fd499..000000000
--- a/app/packs/src/components/qc/components/helper/qc_mol_view.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
-
-const QcMolView = ({ svg }) => {
-  if (!svg) return null;
-  return (
-    <div className="grid-qc-mol-view">
-      <SvgFileZoomPan
-        svg={svg}
-        duration={300}
-        resize
-      />
-    </div>
-  );
-};
-
-QcMolView.propTypes = {
-  svg: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-};
-
-QcMolView.defaultProps = {
-  svg: false,
-};
-
-export default QcMolView;
diff --git a/app/packs/src/components/qc/components/substance/BlockCnmr.js b/app/packs/src/components/qc/components/substance/BlockCnmr.js
deleted file mode 100644
index ec2a4c4ab..000000000
--- a/app/packs/src/components/qc/components/substance/BlockCnmr.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Alert } from 'react-bootstrap';
-
-import QuillViewer from 'src/components/QuillViewer';
-import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
-import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-import {
-  tableNmr,
-  formatQV,
-} from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/nmr';
-
-const emptyBlock = () => (
-  <div className="card-qc">
-    <h5>
-      <span>2 Analysis of the provided digital NMR spectroscopy data: 13C NMR:</span>
-    </h5>
-    <div className="card-qc">
-      <Alert bsStyle="danger">
-        No Information. Please upload spectrum & make predictions in Spectra Editor.
-      </Alert>
-    </div>
-  </div>
-);
-
-const BlockCnmr = ({ ansCnmr }) => {
-  if (!ansCnmr.exist) return emptyBlock();
-  const { qck, qcp } = ansCnmr;
-  const {
-    shifts,
-    svg,
-    desc,
-    sigSent,
-    sigReal,
-    numAll,
-    numAcpMac,
-    numAcpOwn,
-    ansMac,
-    ansOwn,
-  } = qcp;
-  const {
-    countExpAtoms,
-    countIdnAtoms,
-    ansQck,
-  } = qck;
-
-  return (
-    <div className="card-qc">
-      <h5>
-        <span>2 Analysis of the provided digital NMR spectroscopy data: 13C NMR:</span>
-      </h5>
-      <div className="card-qc">
-        <div
-          style={{ display: 'inline' }}
-        >
-          <QuillViewer
-            value={formatQV(desc)}
-          />
-        </div>
-        <div>
-          <span>
-            Expected carbons: {countExpAtoms}.
-            Identified carbons: {countIdnAtoms}.
-          </span>
-          {iconByMargin(ansQck, 0)}
-        </div>
-        <div>
-          <span>
-            Signals detected: {sigSent}
-          </span>
-        </div>
-        <div>
-          <span>
-            Signals detected (NMRShiftDB): {sigReal}
-          </span>
-        </div>
-        <div>
-          <span>
-            Correctly assigned (machine):
-            ({numAcpMac}/{numAll})
-            {iconByMargin(ansMac, 1)}
-          </span>
-        </div>
-        <div>
-          <span>
-            Correctly assigned (owner):
-            ({numAcpOwn}/{numAll})
-            {iconByMargin(ansOwn, 0)}
-          </span>
-        </div>
-        <Panel
-          className="qc-detail-panel"
-          id="qc-detail-panel-cnmr"
-          defaultExpanded={false}
-        >
-          <Panel.Heading>
-            <Panel.Title className="qc-detail-panel-title" toggle>
-              13C NMR Prediction Detail
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              <QcMolView svg={svg} />
-              {tableNmr(shifts)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    </div>
-  );
-};
-
-BlockCnmr.propTypes = {
-  ansCnmr: PropTypes.object.isRequired,
-};
-
-export default BlockCnmr;
diff --git a/app/packs/src/components/qc/components/substance/BlockConclusion.js b/app/packs/src/components/qc/components/substance/BlockConclusion.js
deleted file mode 100644
index 36ce48432..000000000
--- a/app/packs/src/components/qc/components/substance/BlockConclusion.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
-
-import { iconByBool } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-
-const iconNmr = (ansNmr) => {
-  const { conclusion, conclusionOwn } = ansNmr;
-  if (!conclusion && conclusionOwn) {
-    return (
-      <Label bsStyle="success" className="label-qc">
-        Pass due to owner correction
-      </Label>
-    );
-  }
-  return iconByBool(conclusion);
-};
-
-const iconIr = (ansIr) => {
-  const { conclusion, conclusionOwn } = ansIr;
-  if (!conclusion && conclusionOwn) {
-    return (
-      <Label bsStyle="success" className="label-qc">
-        Pass due to owner correction
-      </Label>
-    );
-  }
-  return iconByBool(conclusion);
-};
-
-const BlockConclusion = ({
-  ansHnmr, ansCnmr, ansMs, ansIr,
-}) => (
-  <div>
-    <h4>
-      <span>Conclusion of the automated analysis check:</span>
-    </h4>
-    <div className="card-qc">
-      <p>
-        <span>1H NMR</span>
-        {iconNmr(ansHnmr)}
-      </p>
-      <p>
-        <span>13C NMR</span>
-        {iconNmr(ansCnmr)}
-      </p>
-      <p>
-        <span>MS</span>
-        {iconByBool(ansMs.conclusion)}
-      </p>
-      <p>
-        <span>IR</span>
-        {iconIr(ansIr)}
-      </p>
-    </div>
-    <br />
-  </div>
-);
-
-BlockConclusion.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-  ansCnmr: PropTypes.object.isRequired,
-  ansMs: PropTypes.object.isRequired,
-  ansIr: PropTypes.object.isRequired,
-};
-
-export default BlockConclusion;
diff --git a/app/packs/src/components/qc/components/substance/BlockEa.js b/app/packs/src/components/qc/components/substance/BlockEa.js
deleted file mode 100644
index 4779b02fa..000000000
--- a/app/packs/src/components/qc/components/substance/BlockEa.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-const BlockEa = () => (
-  <div className="card-qc">
-    <h5>
-      <span>5 Analysis of the provided EA analysis:</span>
-    </h5>
-    <div className="card-qc">
-      <p>TBD</p>
-    </div>
-    <br />
-  </div>
-);
-
-export default BlockEa;
diff --git a/app/packs/src/components/qc/components/substance/BlockHnmr.js b/app/packs/src/components/qc/components/substance/BlockHnmr.js
deleted file mode 100644
index 37c0ecaef..000000000
--- a/app/packs/src/components/qc/components/substance/BlockHnmr.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Alert } from 'react-bootstrap';
-
-import QuillViewer from 'src/components/QuillViewer';
-import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
-import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-import {
-  tableNmr,
-  formatQV,
-} from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/nmr';
-
-const emptyBlock = () => (
-  <div className="card-qc">
-    <h5>
-      <span>1. Analysis of the provided digital NMR spectroscopy data: 1H NMR:</span>
-    </h5>
-    <div className="card-qc">
-      <Alert bsStyle="danger">
-        No Information. Please upload spectrum & make predictions in Spectra Editor.
-      </Alert>
-    </div>
-  </div>
-);
-
-const BlockHnmr = ({ ansHnmr }) => {
-  if (!ansHnmr.exist) return emptyBlock();
-  const { qck, qcp } = ansHnmr;
-  const {
-    shifts,
-    svg,
-    desc,
-    sigSent,
-    sigReal,
-    numAll,
-    numAcpMac,
-    numAcpOwn,
-    ansMac,
-    ansOwn,
-  } = qcp;
-  const {
-    countExpAtoms,
-    countIdnAtoms,
-    ansQck,
-  } = qck;
-
-  return (
-    <div className="card-qc">
-      <h5>
-        <span>1. Analysis of the provided digital NMR spectroscopy data: 1H NMR:</span>
-      </h5>
-      <div className="card-qc">
-        <div
-          style={{ display: 'inline' }}
-        >
-          <QuillViewer
-            value={formatQV(desc)}
-          />
-        </div>
-        <div>
-          <span>
-            Expected protons: {countExpAtoms}.
-            Identified protons: {countIdnAtoms}.
-          </span>
-          {iconByMargin(ansQck, 0)}
-        </div>
-        <div>
-          <span>
-            Signals detected: {sigSent}
-          </span>
-        </div>
-        <div>
-          <span>
-            Signals detected (NMRShiftDB): {sigReal}
-          </span>
-        </div>
-        <div>
-          <span>
-            Correctly assigned (machine):
-            ({numAcpMac}/{numAll})
-            {iconByMargin(ansMac, 1)}
-          </span>
-        </div>
-        <div>
-          <span>
-            Correctly assigned (owner):
-            ({numAcpOwn}/{numAll})
-            {iconByMargin(ansOwn, 0)}
-          </span>
-        </div>
-        <Panel
-          className="qc-detail-panel"
-          id="qc-detail-panel-hnmr"
-          defaultExpanded={false}
-        >
-          <Panel.Heading>
-            <Panel.Title className="qc-detail-panel-title" toggle>
-              1H NMR Prediction Detail
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              <QcMolView svg={svg} />
-              {tableNmr(shifts)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    </div>
-  );
-};
-
-BlockHnmr.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-};
-
-export default BlockHnmr;
diff --git a/app/packs/src/components/qc/components/substance/BlockIr.js b/app/packs/src/components/qc/components/substance/BlockIr.js
deleted file mode 100644
index 11124654d..000000000
--- a/app/packs/src/components/qc/components/substance/BlockIr.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Panel, Alert } from 'react-bootstrap';
-
-import QcMolView from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/QcMolView';
-import { iconByMargin } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-import { tableIr } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/ir';
-
-const emptyBlock = () => (
-  <div className="card-qc">
-    <h5>
-      <span>4 Analysis of the provided digital IR data:</span>
-    </h5>
-    <div className="card-qc">
-      <Alert bsStyle="danger">
-        No Information. Please upload spectra to Spectra Editor.
-      </Alert>
-    </div>
-  </div>
-);
-
-const BlockIr = ({ ansIr }) => {
-  if (!ansIr.exist) return emptyBlock();
-  const { qcp } = ansIr;
-  const {
-    fgs, svg, numFg, numFg80, numFg90,
-    posMac80, posOwn80, posMac90, posOwn90,
-    negMac90, negOwn90,
-    numMac, numOwn,
-    ansMac80, ansOwn80, ansMacF90, ansOwnF90,
-  } = qcp;
-
-  return (
-    <div className="card-qc">
-      <h5>
-        <span>4 Analysis of the provided digital IR data:</span>
-      </h5>
-      <div className="card-qc">
-        <div>
-          <span>Amount of functional groups given: {numFg}</span>
-        </div>
-        <div>
-          <span>
-            Amount of functional groups that were part of the routine and
-            accurracy &gt;80%: {numFg80 + numFg90}
-          </span>
-        </div>
-        <div>
-          <span>Output true machine (&gt;80%): </span>
-          {`${(posMac80 + posMac90)}/${(numMac)}`}
-          {iconByMargin(ansMac80, 1)}
-        </div>
-        <div>
-          <span>Output true owner (&gt;80%): </span>
-          {`${(posOwn80 + posOwn90)}/${(numOwn)}`}
-          {iconByMargin(ansOwn80, 1)}
-        </div>
-        <div>
-          <span>Output false machine (&gt;90%): </span>
-          {`${(negMac90)}/${(posMac90 + negMac90)}`}
-          {iconByMargin(ansMacF90, 0)}
-        </div>
-        <div>
-          <span>Output false owner (&gt; 90%): </span>
-          {`${(negOwn90)}/${(posOwn90 + negOwn90)}`}
-          {iconByMargin(ansOwnF90, 0)}
-        </div>
-        <Panel
-          className="qc-detail-panel"
-          id="qc-detail-panel-ir"
-          defaultExpanded={false}
-        >
-          <Panel.Heading>
-            <Panel.Title className="qc-detail-panel-title" toggle>
-              IR Prediction Detail
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              <QcMolView svg={svg} />
-              {tableIr(fgs)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    </div>
-  );
-};
-
-BlockIr.propTypes = {
-  ansIr: PropTypes.object.isRequired,
-};
-
-export default BlockIr;
diff --git a/app/packs/src/components/qc/components/substance/BlockMS.js b/app/packs/src/components/qc/components/substance/BlockMS.js
deleted file mode 100644
index db31729b5..000000000
--- a/app/packs/src/components/qc/components/substance/BlockMS.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-
-import { iconMs } from 'src/apps/mydb/elements/details/samples/qcTab/components/helper/icon';
-
-const emptyBlock = () => (
-  <div className="card-qc">
-    <h5>
-      <span>3 Analysis of the provided digital mass spectrometry data:</span>
-    </h5>
-    <div className="card-qc">
-      <Alert bsStyle="danger">
-        No Information. Please upload spectra to Spectra Editor.
-      </Alert>
-    </div>
-  </div>
-);
-
-const BlockMS = ({ ansMs }) => {
-  if (!ansMs.exist) return emptyBlock();
-  const { qcp, conclusion } = ansMs;
-  const {
-    emMass,
-    scan,
-    desc,
-  } = qcp;
-
-  return (
-    <div className="card-qc">
-      <h5>
-        <span>3 Analysis of the provided digital mass spectrometry data:</span>
-      </h5>
-      <div className="card-qc">
-        <div>
-          <span>Identified Mass peaks (<i>m/z</i>) = </span>
-          {desc}
-        </div>
-        <div>
-          <span>Selected scan: {scan}.</span>
-        </div>
-        <div>
-          <span>Exact molecular mass = </span>
-          {emMass}
-        </div>
-        <div>
-          <span>Conclusion: </span>
-          {iconMs(conclusion)}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-BlockMS.propTypes = {
-  ansMs: PropTypes.object.isRequired,
-};
-
-export default BlockMS;
diff --git a/app/packs/src/components/qc/components/substance/BlockTitle.js b/app/packs/src/components/qc/components/substance/BlockTitle.js
deleted file mode 100644
index 38fdcf62d..000000000
--- a/app/packs/src/components/qc/components/substance/BlockTitle.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { Tooltip, OverlayTrigger } from 'react-bootstrap';
-
-const infoTp = (
-  <Tooltip id="tp-qc-info" className="card-qc">
-    <p>ChemSpectra (0.10)</p>
-    <p>NMRShiftDB (2.0)</p>
-    <p>ChemSpectraDeepIr (0.10)</p>
-  </Tooltip>
-);
-
-const BlockTitle = () => (
-  <div>
-    <h4>
-      <span className="underline-qc">
-        Analysis of digital research data for plausibility and Quality Control - QC
-      </span>
-    </h4>
-    <h4>
-      <span>Information </span>
-      <OverlayTrigger
-        placement="right"
-        overlay={infoTp}
-        style={{ marginLeft: '10px' }}
-      >
-        <i className="fa fa-info-circle" style={{ color: '#337ab7' }} />
-      </OverlayTrigger>
-    </h4>
-    <h4>
-      <span>Analysis</span>
-    </h4>
-  </div>
-);
-
-export default BlockTitle;
diff --git a/app/packs/src/components/qc/components/summary/AreaSummary.js b/app/packs/src/components/qc/components/summary/AreaSummary.js
deleted file mode 100644
index e906743b3..000000000
--- a/app/packs/src/components/qc/components/summary/AreaSummary.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import LineScore from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/LineScore';
-import {
-  LineTitle,
-  LineQcp,
-  LineQck,
-  LineDav,
-} from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/LineSummary';
-import { evalScore } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
-
-const AreaSummary = ({
-  ansHnmr, ansCnmr, ansMs, ansIr, curation,
-}) => {
-  const score = evalScore(ansHnmr, ansCnmr, ansMs, ansIr, curation);
-  return (
-    <div>
-      <div className="col-qcsum-l">
-        <LineTitle />
-        <LineDav
-          ansHnmr={ansHnmr}
-          ansCnmr={ansCnmr}
-          ansMs={ansMs}
-          ansIr={ansIr}
-        />
-        <LineQcp
-          ansHnmr={ansHnmr}
-          ansCnmr={ansCnmr}
-          ansMs={ansMs}
-          ansIr={ansIr}
-        />
-        <LineQck
-          ansHnmr={ansHnmr}
-          ansCnmr={ansCnmr}
-          ansMs={ansMs}
-        />
-      </div>
-      <div className="col-qcsum-r">
-        <LineScore score={score} />
-      </div>
-    </div>
-  );
-};
-
-AreaSummary.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-  ansCnmr: PropTypes.object.isRequired,
-  ansMs: PropTypes.object.isRequired,
-  ansIr: PropTypes.object.isRequired,
-  curation: PropTypes.number.isRequired,
-};
-
-export default AreaSummary;
diff --git a/app/packs/src/components/qc/components/summary/AreaTitle.js b/app/packs/src/components/qc/components/summary/AreaTitle.js
deleted file mode 100644
index ce4661d84..000000000
--- a/app/packs/src/components/qc/components/summary/AreaTitle.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { evalCurTitle } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
-
-const AreaTitle = ({ curation }) => (
-  <div>
-    <h4>
-      <span>
-        Curation aspects of available data
-      </span>
-    </h4>
-    <h4>
-      <span className="underline-qc">
-        {evalCurTitle(curation)}
-      </span>
-    </h4>
-  </div>
-);
-
-AreaTitle.propTypes = {
-  curation: PropTypes.number.isRequired,
-};
-
-export default AreaTitle;
diff --git a/app/packs/src/components/qc/components/summary/LineScore.js b/app/packs/src/components/qc/components/summary/LineScore.js
deleted file mode 100644
index da574a5bd..000000000
--- a/app/packs/src/components/qc/components/summary/LineScore.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-import { evalMsg, evalLabel, evalScoreTxt } from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/eval';
-
-const tpMsg = score => (
-  <Tooltip id="tp-msg">
-    {evalMsg(score)}
-  </Tooltip>
-);
-
-const LineScore = ({ score }) => {
-  const clsName = evalLabel(score);
-  const scoreTxt = evalScoreTxt(score);
-
-  return (
-    <OverlayTrigger placement="top" overlay={tpMsg(score)}>
-      <div className={clsName}>
-        <span className="txt-qcsum-score">{scoreTxt}</span>
-      </div>
-    </OverlayTrigger>
-  );
-};
-
-LineScore.propTypes = {
-  score: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]).isRequired,
-};
-
-export default LineScore;
diff --git a/app/packs/src/components/qc/components/summary/LineSummary.js b/app/packs/src/components/qc/components/summary/LineSummary.js
deleted file mode 100644
index 5653b5618..000000000
--- a/app/packs/src/components/qc/components/summary/LineSummary.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  BadgeSuccess,
-  BadgeFail,
-  BadgeDefault,
-} from 'src/apps/mydb/elements/details/samples/qcTab/components/summary/common';
-
-/*
-const tpUv = (
-  <Tooltip id="tpUv">
-    UV
-  </Tooltip>
-);
-
-const tpXr = (
-  <Tooltip id="tpXr">
-    X-ray
-  </Tooltip>
-);
-*/
-
-const LineTitle = () => (
-  <div className="card-qcsum">
-    <span className="qc-title qc-placeholder">.</span>
-    <span><strong>1H</strong></span>
-    <span><strong>13C</strong></span>
-    <span><strong>MS</strong></span>
-    <span><strong>IR</strong></span>
-    <span><strong>UV</strong></span>
-    <span><strong>X-ray</strong></span>
-    <span><strong>Rf</strong></span>
-  </div>
-);
-
-const statusLabel = status => status ? <BadgeSuccess /> : <BadgeFail />;
-
-const LineQcp = ({
-  ansHnmr, ansCnmr, ansMs, ansIr,
-}) => (
-  <div className="card-qcsum">
-    <span className="qc-title">Data Evaluation</span>
-    <span>{statusLabel(ansHnmr.qcp.ansMac && ansHnmr.qcp.ansOwn)}</span>
-    <span>{statusLabel(ansCnmr.qcp.ansMac && ansCnmr.qcp.ansOwn)}</span>
-    <span>{statusLabel(ansMs.qcp.matchMass)}</span>
-    <span>{statusLabel(ansIr.qcp.ansMac80 && ansIr.qcp.ansOwn80 && ansIr.qcp.ansMacF90 && ansIr.qcp.ansOwnF90)}</span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-  </div>
-);
-
-LineQcp.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-  ansCnmr: PropTypes.object.isRequired,
-  ansMs: PropTypes.object.isRequired,
-  ansIr: PropTypes.object.isRequired,
-};
-
-const LineQck = ({ ansHnmr, ansCnmr, ansMs }) => (
-  <div className="card-qcsum">
-    <span className="qc-title">Analysis Check</span>
-    <span>{statusLabel(ansHnmr.qck.ansQck)}</span>
-    <span>{statusLabel(ansCnmr.qck.ansQck)}</span>
-    <span>{statusLabel(ansMs.qck.ansQck)}</span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-  </div>
-);
-
-LineQck.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-  ansCnmr: PropTypes.object.isRequired,
-  ansMs: PropTypes.object.isRequired,
-};
-
-const LineDav = ({
-  ansHnmr, ansCnmr, ansMs, ansIr,
-}) => (
-  <div className="card-qcsum">
-    <span className="qc-title">Data Availability</span>
-    <span>{statusLabel(ansHnmr.dav)}</span>
-    <span>{statusLabel(ansCnmr.dav)}</span>
-    <span>{statusLabel(ansMs.dav)}</span>
-    <span>{statusLabel(ansIr.dav)}</span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-    <span><BadgeDefault /></span>
-  </div>
-);
-
-LineDav.propTypes = {
-  ansHnmr: PropTypes.object.isRequired,
-  ansCnmr: PropTypes.object.isRequired,
-  ansMs: PropTypes.object.isRequired,
-  ansIr: PropTypes.object.isRequired,
-};
-
-export { LineTitle, LineQcp, LineQck, LineDav };
diff --git a/app/packs/src/components/qc/components/summary/common.js b/app/packs/src/components/qc/components/summary/common.js
deleted file mode 100644
index 59810d412..000000000
--- a/app/packs/src/components/qc/components/summary/common.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-const tpBadge = txt => (
-  <Tooltip id={`tp${txt}`}>
-    { txt }
-  </Tooltip>
-);
-
-const BadgeNotAvailable = () => (
-  <OverlayTrigger placement="top" overlay={tpBadge('Not Available!')}>
-    <div className="qc-dark" />
-  </OverlayTrigger>
-);
-
-const BadgeSuccess = () => (
-  <OverlayTrigger placement="top" overlay={tpBadge('Pass')}>
-    <div className="qc-success" />
-  </OverlayTrigger>
-);
-
-const BadgeFail = () => (
-  <OverlayTrigger placement="top" overlay={tpBadge('Fail')}>
-    <div className="qc-failure" />
-  </OverlayTrigger>
-);
-
-const BadgeDefault = () => (
-  <div className="qc-default" />
-);
-
-export {
-  BadgeNotAvailable,
-  BadgeSuccess,
-  BadgeFail,
-  BadgeDefault,
-};
diff --git a/app/packs/src/components/qc/components/summary/eval.js b/app/packs/src/components/qc/components/summary/eval.js
deleted file mode 100644
index 725f4cb4b..000000000
--- a/app/packs/src/components/qc/components/summary/eval.js
+++ /dev/null
@@ -1,124 +0,0 @@
-const evalMsg = (score) => {
-  if (score === 'incomplete analysis') {
-    return 'MS, 13C NMR and 1H NMR must exist.';
-  } else if (score <= -4) {
-    return 'Your data seems to contain errors according to your analysis. Please check the description of the analysis’ content.';
-  } else if (score <= -3) {
-    return 'Your analysis might be right, but we are unable to approve it without data and additional information. Please add data or refer your data to already submitted samples with full analysis.';
-  } else if (score <= -1) {
-    return 'Your analysis might be right, please add data to approve it.';
-  } else if (score <= 0) {
-    return 'Data to your analyses is detected but a reliable automated evaluation is not possible.';
-  } else if (score <= 4) {
-    return 'Check your data, the data does not reflect your analysis.';
-  } else if (score <= 7) {
-    return 'Check your data, the data does not reflect your analysis in a comprehensive way.';
-  } else if (score <= 9) {
-    return 'Your data is almost complete, please check for further data available.';
-  } else if (score <= 10) {
-    return 'Your data is consistent with the theoretically expected ones, thank you!';
-  }
-  return 'Unknown status.';
-};
-
-const isDisabled = ({ dav, qck, conclusionOwn }) => {
-  const { ansQck } = qck;
-  return dav === undefined && ansQck === undefined && conclusionOwn === undefined;
-};
-
-const isIncompDf = ({ dav, qck }) => qck && dav === undefined; // no dav, yes qck
-
-const isDavGood = ({ dav }) => !!dav;
-
-const isQckGood = ({ qck }) => qck.ansQck;
-
-const isQcpGood = ({ conclusionOwn }) => conclusionOwn;
-
-const isOnlyPrc = ({ dav, conclusionOwn }) => dav !== undefined && conclusionOwn === undefined;
-const isMorePrc = ({ dav, conclusionOwn }) => dav !== undefined && conclusionOwn !== undefined;
-
-const evalScoreStd1 = (ansHnmr, ansCnmr, ansMs, ansIr) => {
-  const isOneDavFail = !isDavGood(ansHnmr) || !isDavGood(ansCnmr) || !isDavGood(ansMs);
-  const isAllQckGood = isQckGood(ansHnmr) && isQckGood(ansCnmr) && isQckGood(ansMs);
-  const isQcpGoodBothHnmrCnmr = isQcpGood(ansHnmr) && isQcpGood(ansCnmr);
-  const isQcpGoodBothMsIr = isQcpGood(ansMs) && isQcpGood(ansIr);
-  const isQcpGoodHnmrOrCnmr = isQcpGood(ansHnmr) || isQcpGood(ansCnmr);
-  const isQcpGoodMsOrIr = isQcpGood(ansMs) || isQcpGood(ansIr);
-
-  if (isOneDavFail) return 'nonZeroDisabled';
-  if (!isDavGood(ansIr)
-    && isAllQckGood
-  ) return -2;
-  if (!isDavGood(ansIr)) return -4;
-
-  if (isAllQckGood
-    && isQcpGoodBothHnmrCnmr && isQcpGoodBothMsIr
-  ) return 10;
-
-  if (isAllQckGood
-    && isQcpGoodBothHnmrCnmr && isQcpGoodMsOrIr
-  ) return 9;
-
-  if (isAllQckGood
-    && isQcpGoodBothHnmrCnmr
-  ) return 8;
-
-  if (isAllQckGood
-    && isQcpGoodHnmrOrCnmr && isQcpGoodBothMsIr
-  ) return 7;
-
-  if (isAllQckGood
-    && isQcpGoodHnmrOrCnmr && isQcpGoodMsOrIr
-  ) return 6;
-
-  if (isAllQckGood
-    && isQcpGoodHnmrOrCnmr
-  ) return 5;
-
-  if (isAllQckGood
-    && isQcpGoodBothMsIr
-  ) return 4;
-
-  if (isAllQckGood
-    && isQcpGoodMsOrIr
-  ) return 3;
-
-  if (isAllQckGood) return 2;
-
-  return 0;
-};
-
-const evalScore = (ansHnmr, ansCnmr, ansMs, ansIr, curation) => {
-  switch (curation) {
-    case 1:
-      return 'Unknow curation.';
-    case 2:
-    default:
-      return evalScoreStd1(ansHnmr, ansCnmr, ansMs, ansIr);
-  }
-};
-
-const evalCurTitle = (curation) => {
-  switch (curation) {
-    case 1:
-      return 'No curation standard';
-    case 2:
-    default:
-      return 'Standard: Curation standard I: experimental organic chemistry';
-  }
-};
-
-const evalLabel = (score) => {
-  if (typeof score === 'string') return 'box-qcsum-score bc-bs-dark';
-  if (score === 0) return 'box-qcsum-score bc-bs-warning';
-  return score > 0
-    ? 'box-qcsum-score bc-bs-success'
-    : 'box-qcsum-score bc-bs-danger';
-};
-
-const evalScoreTxt = (score) => {
-  if (typeof score === 'string') return '-';
-  return score;
-};
-
-export { evalMsg, evalScore, evalLabel, evalScoreTxt, evalCurTitle };
diff --git a/app/packs/src/components/qc/utils/common.js b/app/packs/src/components/qc/utils/common.js
deleted file mode 100644
index 25c122a9b..000000000
--- a/app/packs/src/components/qc/utils/common.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const numFormat = (input, digit = 2) => parseFloat(input).toFixed(digit);
-
-const realFormat = (val, status) => {
-  if (status === 'missing') {
-    return '- - -';
-  }
-  return numFormat(val);
-};
-
-const makeDav = (hasFiles, hasValidFiles) => {
-  if (hasFiles !== undefined) return hasValidFiles;
-  return undefined;
-};
-
-export { numFormat, realFormat, makeDav };
diff --git a/app/packs/src/components/qc/utils/ir.js b/app/packs/src/components/qc/utils/ir.js
deleted file mode 100644
index 76e1cf4b4..000000000
--- a/app/packs/src/components/qc/utils/ir.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
-
-const makeQck = () => ({});
-
-const makeQcp = (pred) => {
-  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
-    return {};
-  }
-
-  const { fgs, svgs } = pred.output.result[0];
-  const svg = svgs ? svgs[0] : false;
-  let numFg = 0;
-  let numFg80 = 0;
-  let numFg90 = 0;
-  let posMac80 = 0;
-  let posOwn80 = 0;
-  let posMac90 = 0;
-  let posOwn90 = 0;
-  let negMac80 = 0;
-  let negOwn80 = 0;
-  let negMac90 = 0;
-  let negOwn90 = 0;
-  fgs.forEach((fg) => {
-    numFg += 1;
-    if (fg.confidence >= 90.0) {
-      numFg90 += 1;
-      fg.status === 'accept' ? posMac90 += 1 : negMac90 += 1; // eslint-disable-line
-      const ownAccept = (fg.statusOwner && fg.statusOwner === 'accept') ||
-        (!fg.statusOwner && fg.status === 'accept');
-      ownAccept ? posOwn90 += 1 : negOwn90 += 1; // eslint-disable-line
-    } else if (fg.confidence >= 80.0) {
-      numFg80 += 1;
-      fg.status === 'accept' ? posMac80 += 1 : negMac80 += 1; // eslint-disable-line
-      const ownAccept = (fg.statusOwner && fg.statusOwner === 'accept') ||
-        (!fg.statusOwner && fg.status === 'accept');
-      ownAccept ? posOwn80 += 1 : negOwn80 += 1; // eslint-disable-line
-    }
-  });
-
-  const numMac = posMac80 + posMac90 + negMac80 + negMac90;
-  const numOwn = posOwn80 + posOwn90 + negOwn80 + negOwn90;
-  const ansMac80 = numMac - posMac80 - posMac90 <= 1;
-  const ansOwn80 = numOwn - posOwn80 - posOwn90 <= 1;
-  const ansMacF90 = negMac90 - 0 <= 0;
-  const ansOwnF90 = negOwn90 - 0 <= 0;
-  return {
-    fgs,
-    svg,
-    numFg,
-    numFg80,
-    numFg90,
-    numMac,
-    numOwn,
-    ansMac80,
-    ansOwn80,
-    ansMacF90,
-    ansOwnF90,
-    posMac80,
-    posOwn80,
-    posMac90,
-    posOwn90,
-    negMac80,
-    negOwn80,
-    negMac90,
-    negOwn90,
-  };
-};
-
-const evaluateIr = (irQc) => {
-  const {
-    exist, hasFiles, hasValidFiles, pred,
-  } = irQc;
-
-  const dav = makeDav(hasFiles, hasValidFiles);
-  const qck = makeQck();
-  const qcp = makeQcp(pred);
-  const {
-    ansMac80, ansOwn80, ansMacF90, ansOwnF90,
-  } = qcp;
-  const conclusion = ansMac80 && ansOwn80 && ansMacF90 && ansOwnF90;
-  const conclusionOwn = ansOwn80 && ansOwnF90;
-
-  return {
-    exist, dav, qck, qcp, conclusion, conclusionOwn,
-  };
-};
-
-export { evaluateIr } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/ms.js b/app/packs/src/components/qc/utils/ms.js
deleted file mode 100644
index bf8ac006e..000000000
--- a/app/packs/src/components/qc/utils/ms.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { FN } from '@complat/react-spectra-editor';
-
-import { makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
-import { contentToText } from 'src/utilities/quillFormat';
-import { emwInStr } from 'src/utilities/ElementUtils';
-
-const emm = s => s.molecule_exact_molecular_weight.toFixed(2);
-
-const isMatchMass = (xs, emMass) => {
-  const emw = parseFloat(emMass, 10);
-  const margin = 1.0;
-  let result = false;
-
-  xs.forEach((x) => {
-    if (Math.abs(x - (emw + 0.0)) <= margin) { result = true; }
-    if (Math.abs(x - (emw + 1.0)) <= margin) { result = true; } // eslint-disable-line
-    if (Math.abs(x - (emw + 23.0)) <= margin) { result = true; } // eslint-disable-line
-    if (Math.abs(x - (emw + 39.0)) <= margin) { result = true; } // eslint-disable-line
-  });
-
-  return result;
-};
-
-const getDesc = (xs, ys) => {
-  const maxY = Math.max(...ys);
-  const peaks = xs.map((x, idx) => ({ x, y: ys[idx] }));
-  const signal = FN.formatedMS(peaks, maxY);
-  return signal;
-};
-
-const makeQck = (ops, sample) => {
-  if (!ops) return {};
-  const emw = parseFloat(emm(sample), 10);
-  const opStr = contentToText({ ops });
-  const ansQck = emwInStr(emw, opStr);
-  return { ansQck };
-};
-
-const makeQcp = (pred, sample) => {
-  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
-    return {};
-  }
-
-  const { scan, xs, ys } = pred.output.result[0];
-
-  const emMass = emm(sample);
-  const matchMass = isMatchMass(xs, emMass);
-  const desc = getDesc(xs, ys); // TBD
-  return {
-    matchMass, emMass, scan, desc,
-  };
-};
-
-const evaluateMs = (msQc, sample) => {
-  const {
-    exist, hasFiles, hasValidFiles, ops, pred,
-  } = msQc;
-
-  const dav = makeDav(hasFiles, hasValidFiles);
-  const qck = makeQck(ops, sample);
-  const qcp = makeQcp(pred, sample);
-  const { matchMass } = qcp;
-  const conclusion = matchMass;
-  const conclusionOwn = matchMass;
-
-  return {
-    exist, dav, qck, qcp, conclusion, conclusionOwn,
-  };
-};
-
-export { evaluateMs } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/nmr.js b/app/packs/src/components/qc/utils/nmr.js
deleted file mode 100644
index 85f9bf278..000000000
--- a/app/packs/src/components/qc/utils/nmr.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { numFormat, makeDav } from 'src/apps/mydb/elements/details/samples/qcTab/utils/common';
-
-import { contentToText } from 'src/utilities/quillFormat';
-import {
-  atomCountInFormula,
-  atomCountInNMRDescription,
-  atomCountCInNMRDescription,
-} from 'src/utilities/ElementUtils';
-
-const countSignal = (shifts) => {
-  const numAll = shifts.length;
-  let numAcpMac = 0;
-  let numWarMac = 0;
-  let numRjtMac = 0;
-  let numMisMac = 0;
-  let numAcpOwn = 0;
-  shifts.forEach((s) => {
-    if (s.status === 'accept') {
-      numAcpMac += 1;
-    } else if (s.status === 'warning') {
-      numWarMac += 1;
-    } else if (s.status === 'reject') {
-      numRjtMac += 1;
-    } else if (s.status === 'missing') {
-      numMisMac += 1;
-    }
-    const ownAccept = (s.statusOwner && s.statusOwner === 'accept') ||
-      (!s.statusOwner && s.status === 'accept');
-    if (ownAccept) {
-      numAcpOwn += 1;
-    }
-  });
-  return {
-    numAll, numAcpMac, numWarMac, numRjtMac, numMisMac, numAcpOwn,
-  };
-};
-
-const extractSignal = (shifts) => {
-  const reals = shifts.map(s => s.real)
-    .filter(r => (r != null && r !== 0)).sort((a, b) => a - b);
-  const sents = Array.from(new Set(reals)).sort((a, b) => a - b);
-
-  const sigSent = sents.map(s => numFormat(s)).join(', ');
-  const sigReal = reals.map(r => numFormat(r)).join(', ');
-
-  return {
-    sigSent, sigReal,
-  };
-};
-
-const makeQck = (sumFormula, ops, type) => {
-  if (!ops) return {};
-  const is1H = type === '1H NMR';
-  const countExpAtoms = is1H
-    ? atomCountInFormula(sumFormula, 'H')
-    : atomCountInFormula(sumFormula, 'C');
-  const opStr = contentToText({ ops });
-  const countIdnAtoms = is1H
-    ? atomCountInNMRDescription(opStr)
-    : atomCountCInNMRDescription(opStr);
-  const ansQck = (countExpAtoms - countIdnAtoms) === 0;
-  return { countExpAtoms, countIdnAtoms, ansQck };
-};
-
-const makeQcp = (pred, ops = []) => {
-  const desc = [{ insert: 'According to user: ' }, ...ops];
-  if (!pred || !pred.output || !pred.output.result || !pred.output.result[0]) {
-    return { desc };
-  }
-  const { shifts, svgs } = pred.output.result[0];
-  const svg = svgs ? svgs[0] : false;
-  const {
-    sigSent, sigReal,
-  } = extractSignal(shifts);
-  const {
-    numAll, numAcpMac, numAcpOwn,
-  } = countSignal(shifts);
-  const ansMac = numAll - numAcpMac <= 1;
-  const ansOwn = numAll - numAcpOwn <= 0;
-  return {
-    shifts,
-    svg,
-    desc,
-    sigSent,
-    sigReal,
-    numAll,
-    numAcpMac,
-    numAcpOwn,
-    ansMac,
-    ansOwn,
-  };
-};
-
-const evaluateNmr = (nmrQc, sumFormula) => {
-  const {
-    exist, hasFiles, hasValidFiles, ops, type, pred,
-  } = nmrQc;
-
-  const dav = makeDav(hasFiles, hasValidFiles);
-  const qck = makeQck(sumFormula, ops, type);
-  const qcp = makeQcp(pred, ops);
-  const { ansQck } = qck;
-  const { ansMac, ansOwn } = qcp;
-  const conclusion = ansMac && ansOwn && ansQck;
-  const conclusionOwn = ansOwn && ansQck;
-
-  return {
-    exist, dav, qck, qcp, conclusion, conclusionOwn,
-  };
-};
-
-export { evaluateNmr } // eslint-disable-line
diff --git a/app/packs/src/components/qc/utils/qcs.js b/app/packs/src/components/qc/utils/qcs.js
deleted file mode 100644
index 948bae7b4..000000000
--- a/app/packs/src/components/qc/utils/qcs.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const extractInfer = (ai, files) => {
-  let targetPred = false;
-  let targetTyp = false;
-  let hasInfer = false;
-  let hasFiles = false;
-  let hasValidFiles = false;
-  const valids = ['json', 'peaked', 'edited'];
-  ai.children.forEach((dt) => {
-    hasFiles = dt.attachments.length > 0;
-    dt.attachments.forEach((att) => {
-      if (valids.indexOf(att.aasm_state) > -1) hasValidFiles = true;
-      if (att.aasm_state !== 'json') return;
-      if (!files) return;
-      const pred = files
-        .map(f => (f.id === att.id ? f : null))
-        .filter(r => r != null)[0];
-      if (!pred || pred.predictions.outline.code >= 300) return;
-      targetTyp = pred.predictions.output.result[0] &&
-        pred.predictions.output.result[0].type;
-      targetPred = pred.predictions;
-      hasInfer = true;
-    });
-  });
-  return {
-    pred: targetPred, type: targetTyp, hasInfer, hasFiles, hasValidFiles,
-  };
-};
-
-const buildQcs = (sample, infer) => {
-  const { files } = infer.result || {};
-  let irQc = {};
-  let msQc = {};
-  let hnmrQc = {};
-  let cnmrQc = {};
-  sample.container.children[0].children.forEach((ai) => {
-    const { content, kind } = ai.extended_metadata;
-    const { ops } = content;
-    const inferO = extractInfer(ai, files);
-    const { type } = inferO;
-    if ((!type || type === 'ms') && (kind && kind.includes('mass spectrometry'))) {
-      msQc = Object.assign({}, msQc, inferO, { ops, exist: true, type: 'Mass' });
-    } else if ((!type || type === 'nmr;13C;1d') && (kind && kind.includes('13C NMR'))) {
-      cnmrQc = Object.assign({}, cnmrQc, inferO, { ops, exist: true, type: '13C NMR' });
-    } else if ((!type || type === 'nmr;1H;1d') && (kind && kind.includes('1H NMR'))) {
-      hnmrQc = Object.assign({}, hnmrQc, inferO, { ops, exist: true, type: '1H NMR' });
-    } else if ((!type || type === 'ir') && (kind && kind.includes('IR'))) {
-      irQc = Object.assign({}, irQc, inferO, { ops, exist: true, type: 'IR' });
-    }
-  });
-  return {
-    irQc, msQc, hnmrQc, cnmrQc,
-  };
-};
-
-const prismQcs = (sample, infer) => {
-  const qcs = buildQcs(sample, infer);
-  return qcs;
-};
-
-export { prismQcs }; // eslint-disable-line
diff --git a/app/packs/src/components/react_quill/BaseToolbar.js b/app/packs/src/components/react_quill/BaseToolbar.js
deleted file mode 100644
index 4fbc6bd0f..000000000
--- a/app/packs/src/components/react_quill/BaseToolbar.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-const BaseToolbar = () => (
-  <React.Fragment>
-    <select className="ql-header" defaultValue="">
-      <option value="1" />
-      <option value="2" />
-      <option value="3" />
-      <option value="4" />
-      <option value="5" />
-      <option value="6" />
-      <option />
-    </select>
-    <button className="ql-bold" />
-    <button className="ql-italic" />
-    <button className="ql-underline" />
-    <button className="ql-list" value="ordered" />
-    <button className="ql-list" value="bullet" />
-    <button className="ql-script" value="sub" />
-    <button className="ql-script" value="super" />
-  </React.Fragment>
-);
-
-export default BaseToolbar;
diff --git a/app/packs/src/components/react_quill/DynamicToolbarEditor.js b/app/packs/src/components/react_quill/DynamicToolbarEditor.js
deleted file mode 100644
index 22a27ab47..000000000
--- a/app/packs/src/components/react_quill/DynamicToolbarEditor.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ReactQuill from './ReactQuill';
-
-class DynamicToolbarEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-
-    this.toolbarId = `_${Math.random().toString(36).substr(2, 9)}`;
-    this.modules = {
-      toolbar: { container: `#${this.toolbarId}` },
-    };
-  }
-
-  render() {
-    const { innerRef, children, ...otherProps } = this.props;
-
-    return (
-      <div>
-        <div id={this.toolbarId}>
-          {children}
-        </div>
-        <ReactQuill modules={this.modules} {...otherProps} ref={innerRef} />
-      </div>
-    );
-  }
-}
-
-DynamicToolbarEditor.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default React.forwardRef((props, ref) => (
-  <DynamicToolbarEditor innerRef={ref} {...props} />
-));
diff --git a/app/packs/src/components/react_quill/ReactQuill.js b/app/packs/src/components/react_quill/ReactQuill.js
deleted file mode 100644
index 7c7b12d37..000000000
--- a/app/packs/src/components/react_quill/ReactQuill.js
+++ /dev/null
@@ -1,497 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable react/sort-comp */
-/* eslint-disable react/forbid-prop-types */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-
-import Quill from 'quill';
-
-function postpone(fn) {
-  Promise.resolve().then(fn);
-}
-
-const isDelta = value => value && value.ops;
-
-const isEqualValue = (value, otherValue) => {
-  if (isDelta(value) && isDelta(otherValue)) {
-    return isEqual(value.ops, otherValue.ops);
-  }
-
-  return isEqual(value, otherValue);
-};
-
-const makeUnprivilegedEditor = (editor) => {
-  const e = editor;
-
-  return {
-    getHTML: () => e.root.innerHTML,
-    getLength: e.getLength.bind(e),
-    getText: e.getText.bind(e),
-    getContents: e.getContents.bind(e),
-    getSelection: e.getSelection.bind(e),
-    getBounds: e.getBounds.bind(e),
-  };
-};
-
-const setEditorTabIndex = (editor, tabIndex) => {
-  const check = (
-    editor == null || editor.scroll == null || editor.scroll.domNode == null
-  );
-  if (check) return;
-
-  // eslint-disable-next-line no-param-reassign
-  editor.scroll.domNode.tabIndex = tabIndex;
-};
-
-export default class ReactQuill extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      generation: 0,
-    };
-
-    this.dirtyProps = ['modules', 'formats', 'bounds', 'theme', 'children'];
-    this.cleanProps = [
-      'id', 'className', 'style', 'placeholder', 'tabIndex',
-      'onChange', 'onChangeSelection', 'onFocus', 'onBlur',
-      'onKeyPress', 'onKeyDown', 'onKeyUp'
-    ];
-    this.allProps = this.dirtyProps.concat(this.cleanProps);
-
-    this.isControlled = this.isControlled.bind(this);
-
-    this.value = this.isControlled() ? props.value : props.defaultValue;
-
-    this.shouldComponentRegenerate = this.shouldComponentRegenerate.bind(this);
-    this.validateProps = this.validateProps.bind(this);
-
-    this.getEditor = this.getEditor.bind(this);
-    this.getEditingArea = this.getEditingArea.bind(this);
-    this.getEditorConfig = this.getEditorConfig.bind(this);
-    this.getEditorContents = this.getEditorContents.bind(this);
-    this.getEditorSelection = this.getEditorSelection.bind(this);
-
-    this.setEditorContents = this.setEditorContents.bind(this);
-    this.setEditorReadOnly = this.setEditorReadOnly.bind(this);
-    this.setEditorSelection = this.setEditorSelection.bind(this);
-
-    this.createEditor = this.createEditor.bind(this);
-    this.destroyEditor = this.destroyEditor.bind(this);
-    this.hookEditor = this.hookEditor.bind(this);
-    this.instantiateEditor = this.instantiateEditor.bind(this);
-    this.unhookEditor = this.unhookEditor.bind(this);
-
-    this.renderEditingArea = this.renderEditingArea.bind(this);
-
-    this.focus = this.focus.bind(this);
-    this.blur = this.blur.bind(this);
-
-    this.onEditorChange = this.onEditorChange.bind(this);
-    this.onEditorChangeText = this.onEditorChangeText.bind(this);
-    this.onEditorChangeSelection = this.onEditorChangeSelection.bind(this);
-  }
-
-  componentDidMount() {
-    this.instantiateEditor();
-    this.setEditorContents(this.editor, this.getEditorContents());
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    this.validateProps(nextProps);
-
-    // If the editor hasn't been instantiated yet, or the component has been
-    // regenerated, we already know we should update.
-    if (!this.editor || this.state.generation !== nextState.generation) {
-      return true;
-    }
-
-    // Handle value changes in-place
-    if ('value' in nextProps) {
-      const prevContents = this.getEditorContents();
-      const nextContents = nextProps.value ? nextProps.value : '';
-
-      // NOTE: Seeing that Quill is missing a way to prevent edits, we have to
-      //       settle for a hybrid between controlled and uncontrolled mode. We
-      //       can't prevent the change, but we'll still override content
-      //       whenever `value` differs from current state.
-      // NOTE: Comparing an HTML string and a Quill Delta will always trigger a
-      //       change, regardless of whether they represent the same document.
-      if (!isEqualValue(nextContents, prevContents)) {
-        this.setEditorContents(this.editor, nextContents);
-      }
-    }
-
-    // Handle read-only changes in-place
-    if (nextProps.readOnly !== this.props.readOnly && nextProps.readOnly !== null) {
-      this.setEditorReadOnly(!nextProps.readOnly);
-    }
-
-    return Object.keys(this.props).some(propKey => (
-      !isEqual(nextProps[propKey], this.props[propKey])
-    ));
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    // If we're changing one of the `dirtyProps`, the entire Quill Editor needs
-    // to be re-instantiated. Regenerating the editor will cause the whole tree,
-    // including the container, to be cleaned up and re-rendered from scratch.
-    // Store the contents so they can be restored later.
-    if (this.editor && this.shouldComponentRegenerate(prevProps)) {
-      const delta = this.editor.getContents();
-      const selection = this.editor.getSelection();
-      this.regenerationSnapshot = { delta, selection };
-
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({ generation: this.state.generation + 1 });
-      this.destroyEditor();
-    }
-
-    // The component has been regenerated, so it must be re-instantiated, and
-    // its content must be restored to the previous values from the snapshot.
-    if (this.state.generation !== prevState.generation && this.regenerationSnapshot) {
-      const { delta, selection } = this.regenerationSnapshot;
-      delete this.regenerationSnapshot;
-
-      this.instantiateEditor();
-
-      const { editor } = this;
-      if (editor) {
-        editor.setContents(delta);
-        postpone(() => this.setEditorSelection(editor, selection));
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.destroyEditor();
-  }
-
-  validateProps(props) {
-    let error;
-    if (this.lastDeltaChangeSet && this.lastDeltaChangeSet === props.value) {
-      error = 'You are passing the `delta` object from the `onChange` event ' +
-              'back as `value`. You most probably ' +
-              'want `editor.getContents()` instead. ';
-      throw new Error(error);
-    }
-
-    const noChild = React.Children.count(props.children);
-    error = null;
-    if (noChild) {
-      if (noChild > 1) {
-        error = 'The Quill editing area can only be composed ' +
-                'of a single React element.';
-      }
-
-      const child = React.Children.only(props.children);
-      if (child && child.type === 'textarea') {
-        error = 'Quill does not support editing on a <textarea>. ' +
-                'Use a <div> instead.';
-      }
-
-      if (error) throw new Error(error);
-    }
-  }
-
-  shouldComponentRegenerate(nextProps) {
-    return this.dirtyProps.some(prop => (
-      !isEqual(nextProps[prop], this.props[prop])
-    ));
-  }
-
-  getEditorConfig() {
-    return {
-      bounds: this.props.bounds,
-      formats: this.props.formats,
-      modules: this.props.modules,
-      placeholder: this.props.placeholder,
-      readOnly: this.props.readOnly,
-      scrollingContainer: this.props.scrollingContainer,
-      tabIndex: this.props.tabIndex,
-      theme: this.props.theme,
-    };
-  }
-
-  getEditor() {
-    if (this.editor == null) {
-      throw new Error('Accessing non-instantiated editor');
-    }
-
-    return this.editor;
-  }
-
-  getEditorContents() {
-    return this.value;
-  }
-
-  getEditorSelection() {
-    return this.selection;
-  }
-
-  getEditingArea() {
-    if (!this.editingArea) {
-      throw new Error('Instantiating on missing editing area');
-    }
-
-    // eslint-disable-next-line react/no-find-dom-node
-    const element = ReactDOM.findDOMNode(this.editingArea);
-    if (!element) {
-      throw new Error('Cannot find element for editing area');
-    }
-
-    if (element.nodeType === 3) {
-      throw new Error('Editing area cannot be a text node');
-    }
-
-    return element;
-  }
-
-  /* eslint-disable class-methods-use-this */
-  setEditorContents(editor, value) {
-    if (!editor) return;
-
-    this.value = value;
-    const sel = this.getEditorSelection();
-
-    if (typeof value === 'string') {
-      editor.setContents(editor.clipboard.convert(value));
-    } else {
-      editor.setContents(value);
-    }
-
-    postpone(() => this.setEditorSelection(editor, sel));
-  }
-
-  setEditorSelection(editor, range) {
-    this.selection = range;
-
-    if (range) {
-      // Validate bounds before applying.
-      const length = editor.getLength();
-
-      /* eslint-disable no-param-reassign */
-      range.index = Math.max(0, Math.min(range.index, length - 1));
-      range.length = Math.max(0, Math.min(range.length, (length - 1) - range.index));
-      /* eslint-enable no-param-reassign */
-
-      editor.setSelection(range);
-    }
-  }
-
-  setEditorReadOnly(editor, value) {
-    if (value) {
-      editor.disable();
-    } else {
-      editor.enable();
-    }
-  }
-
-  hookEditor(editor) {
-    // Expose the editor on change events via a weaker, unprivileged proxy
-    // object that does not allow accidentally modifying editor state.
-    this.unprivilegedEditor = makeUnprivilegedEditor(editor);
-    // Using `editor-change` allows picking up silent updates, like selection
-    // changes on typing.
-    editor.on('editor-change', this.onEditorChange);
-  }
-
-  unhookEditor(editor) {
-    editor.off('editor-change', this.onEditorChange);
-  }
-
-  createEditor(element, config) {
-    const editor = new Quill(element, config);
-
-    if (config.tabIndex != null) {
-      setEditorTabIndex(editor, config.tabIndex);
-    }
-
-    this.hookEditor(editor);
-    return editor;
-  }
-
-  isControlled() {
-    const { value } = this.props;
-    return value && value !== '';
-  }
-
-  destroyEditor() {
-    if (!this.editor) return;
-
-    this.unhookEditor(this.editor);
-    delete this.editor;
-  }
-
-  instantiateEditor() {
-    if (this.editor) return;
-
-    this.editor = this.createEditor(
-      this.getEditingArea(),
-      this.getEditorConfig()
-    );
-  }
-
-  onEditorChange(eventName, rangeOrDelta, oldRangeOrDelta, source) {
-    if (eventName === 'text-change' && this.editor && this.unprivilegedEditor) {
-      this.onEditorChangeText(
-        this.editor.root.innerHTML,
-        rangeOrDelta,
-        source,
-        this.unprivilegedEditor
-      );
-    } else if (eventName === 'selection-change' && this.unprivilegedEditor) {
-      this.onEditorChangeSelection(
-        rangeOrDelta,
-        source,
-        this.unprivilegedEditor
-      );
-    }
-  }
-
-  onEditorChangeText(value, delta, source, editor) {
-    if (!this.editor) return;
-
-    // We keep storing the same type of value as what the user gives us,
-    // so that value comparisons will be more stable and predictable.
-    const nextContents = isDelta(this.value)
-      ? editor.getContents()
-      : editor.getHTML();
-
-    if (nextContents !== this.getEditorContents()) {
-      // Taint this `delta` object, so we can recognize whether the user
-      // is trying to send it back as `value`, preventing a likely loop.
-      this.lastDeltaChangeSet = delta;
-
-      this.value = nextContents;
-
-      const { onChange } = this.props;
-      if (onChange) onChange(value, delta, source, editor);
-    }
-  }
-
-  onEditorChangeSelection(nextSelection, source, editor) {
-    if (!this.editor) return;
-
-    const currentSelection = this.getEditorSelection();
-    const hasGainedFocus = !currentSelection && nextSelection;
-    const hasLostFocus = currentSelection && !nextSelection;
-
-    if (isEqual(nextSelection, currentSelection)) return;
-
-    this.selection = nextSelection;
-    const { onChangeSelection } = this.props;
-    if (onChangeSelection) onChangeSelection(nextSelection, source, editor);
-
-    const { onFocus, onBlur } = this.props;
-    if (hasGainedFocus && onFocus) {
-      onFocus(nextSelection, source, editor);
-    } else if (hasLostFocus && onBlur) {
-      onBlur(nextSelection, source, editor);
-    }
-  }
-
-  focus() {
-    if (!this.editor) return;
-
-    this.editor.focus();
-  }
-
-  blur() {
-    if (!this.editor) return;
-
-    this.selection = null;
-    this.editor.blur();
-  }
-
-  renderEditingArea() {
-    const { children, preserveWhitespace } = this.props;
-    const { generation } = this.state;
-
-    const properties = {
-      key: generation,
-      ref: (instance) => {
-        this.editingArea = instance;
-      }
-    };
-
-    if (React.Children.count(children)) {
-      return React.cloneElement(
-        React.Children.only(children),
-        properties
-      );
-    }
-
-    return preserveWhitespace
-      ? <pre {...properties} />
-      : <div {...properties} />;
-  }
-
-  render() {
-    const {
-      id, style, className, onKeyPress, onKeyDown, onKeyUp
-    } = this.props;
-
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div
-        id={id}
-        style={style}
-        key={this.state.generation}
-        className={`quill ${className || ''}`}
-        onKeyPress={onKeyPress}
-        onKeyDown={onKeyDown}
-        onKeyUp={onKeyUp}
-      >
-        {this.renderEditingArea()}
-      </div>
-    );
-  }
-}
-
-ReactQuill.propTypes = {
-  bounds: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  children: PropTypes.element,
-  className: PropTypes.string,
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-  formats: PropTypes.arrayOf(PropTypes.string),
-  id: PropTypes.string,
-  modules: PropTypes.object,
-  onChange: PropTypes.func,
-  onChangeSelection: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onKeyDown: PropTypes.instanceOf(React.EventHanlder),
-  onKeyPress: PropTypes.instanceOf(React.EventHanlder),
-  onKeyUp: PropTypes.instanceOf(React.EventHanlder),
-  placeholder: PropTypes.string,
-  preserveWhitespace: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  scrollingContainer: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  style: PropTypes.object,
-  tabIndex: PropTypes.number,
-  theme: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-};
-
-ReactQuill.defaultProps = {
-  modules: {},
-  theme: 'snow',
-};
-
diff --git a/app/packs/src/components/react_quill/ToolbarDropdown.js b/app/packs/src/components/react_quill/ToolbarDropdown.js
deleted file mode 100644
index a2b151447..000000000
--- a/app/packs/src/components/react_quill/ToolbarDropdown.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const dropdownSvg = (
-  <svg viewBox="0 0 18 18">
-    <polygon className="ql-stroke" points="7 11 9 13 11 11 7 11" />
-    <polygon className="ql-stroke" points="7 7 9 5 11 7 7 7" />
-  </svg>
-);
-
-export default class ToolbarDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { expanded: false };
-
-    this.pickerSpan = React.createRef();
-    this.pickerLabel = React.createRef();
-
-    const genId = Math.random().toString().substr(2, 10);
-    this.ddQuillId = `ql-dropdown-${genId}`;
-
-    const sheets = document.styleSheets;
-    this.sheet = sheets[sheets.length - 1];
-
-    this.getTextWidth = this.getTextWidth.bind(this);
-    this.toggleExpand = this.toggleExpand.bind(this);
-  }
-
-  componentDidMount() {
-    const cssRule = ".ql-snow .ql-picker."+this.ddQuillId+" .ql-picker-label::before, ."+this.ddQuillId+" .ql-picker.ql-size .ql-picker-item::before { content: attr(data-label); line-height: 25px; }";
-
-    try {
-      this.ruleId = this.sheet.insertRule(cssRule);
-    } catch (err) {
-      console.log(err);
-    }
-
-    const requiredWidth = this.getTextWidth() + 40;
-    this.pickerLabel.current.style.width = `${requiredWidth}px`;
-
-    window.addEventListener('click', (e) => {
-      if (!this.pickerSpan.current) return;
-
-      if (!this.pickerSpan.current.contains(e.target)) {
-        this.pickerSpan.current.classList.remove('ql-expanded');
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    try {
-      this.sheet.deleteRule(this.ruleId);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  getTextWidth(font = "500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") {
-    const canvas = this.canvas || (this.canvas = document.createElement('canvas'));
-    const context = canvas.getContext('2d');
-    context.font = font;
-    const metrics = context.measureText(this.props.label);
-    return metrics.width;
-  }
-
-  toggleExpand() {
-    this.setState({ expanded: !this.state.expanded });
-  }
-
-  render() {
-    const { items, onSelect } = this.props;
-    let ddLabel = this.props.label;
-    const itemValues = Object.values(items);
-    if (!ddLabel && itemValues.length > 0) {
-      [ddLabel] = itemValues;
-    }
-
-    const ddItems = Object.entries(items).map(([k, v]) => {
-      const onClick = () => onSelect(k, v);
-
-      return (
-        <span
-          className="ql-picker-item"
-          key={`mi_${v}`}
-          value={v}
-          onClick={onClick}
-        >
-          {k}
-        </span>
-      );
-    });
-
-    const { expanded } = this.state;
-    const expandedClass = expanded ? 'ql-expanded' : '';
-    const className = `${this.ddQuillId} ql-picker ${expandedClass}`;
-
-    return (
-      <span className="ql-formats">
-        <span
-          className={className}
-          ref={this.pickerSpan}
-          onClick={this.toggleExpand}
-        >
-          <span
-            className="ql-picker-label"
-            data-label={ddLabel}
-            ref={this.pickerLabel}
-          >
-            {dropdownSvg}
-          </span>
-          <span className="ql-picker-options">
-            {ddItems}
-          </span>
-        </span>
-      </span>
-    );
-  }
-}
-
-ToolbarDropdown.propTypes = {
-  label: PropTypes.string,
-  // eslint-disable-next-line react/forbid-prop-types
-  items: PropTypes.object,
-  onSelect: PropTypes.func,
-};
-
-ToolbarDropdown.defaultProps = {
-  label: '',
-  items: {},
-  onSelect: null,
-};
diff --git a/app/packs/src/components/react_quill/ToolbarIcon.js b/app/packs/src/components/react_quill/ToolbarIcon.js
deleted file mode 100644
index 3554301d2..000000000
--- a/app/packs/src/components/react_quill/ToolbarIcon.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class ToolbarIcon extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    const { onClick } = this.props;
-    if (onClick) onClick();
-  }
-
-  render() {
-    const { icon } = this.props;
-    if (React.isValidElement(icon)) {
-      return (
-        <button
-          style={{ width: 'auto' }}
-          onClick={this.onClick}
-        >
-          {icon}
-        </button>
-      );
-    }
-
-    return (
-      <button
-        className={`ql_${icon}`}
-        style={{ width: 'auto' }}
-        onClick={this.onClick}
-      >
-        <span>
-          {icon.toUpperCase()}
-        </span>
-      </button>
-    );
-  }
-}
-
-ToolbarIcon.propTypes = {
-  icon: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  onClick: PropTypes.func
-};
-
-ToolbarIcon.defaultProps = {
-  icon: <span />,
-  onClick: null
-};
diff --git a/app/packs/src/components/report/Archives.js b/app/packs/src/components/report/Archives.js
deleted file mode 100644
index 15c68c308..000000000
--- a/app/packs/src/components/report/Archives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Label,
-  PanelGroup,
-  Panel,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import UIActions from 'src/stores/alt/actions/UIActions';
-import { stopBubble } from 'src/utilities/DomHelper';
-
-const fileDescription = archive => (
-  archive.file_description
-    ? <p>{archive.file_description}</p>
-    : <p className="text-comment">No file description</p>
-);
-
-const clickDownloadReport = (e, archiveId, template) => {
-  e.stopPropagation();
-  ReportActions.downloadReport(archiveId, template);
-};
-
-const reportStatusBtn = (archive) => {
-  const { downloadable, id, template } = archive;
-  const onClickDownloadReport = e => clickDownloadReport(e, id, template);
-  const downloadTP = <Tooltip id="download-docx">Download</Tooltip>;
-  const processTP = (
-    <Tooltip id="wait-processing">
-      Processing the report. Please wait
-    </Tooltip>
-  );
-  const downloadBtn = (
-    <OverlayTrigger placement="top" overlay={downloadTP}>
-      <Button bsStyle="primary" bsSize="small" onClick={onClickDownloadReport}>
-        <i className="fa fa-download" />
-      </Button>
-    </OverlayTrigger>
-  );
-
-  const processBtn = (
-    <OverlayTrigger placement="top" overlay={processTP}>
-      <Button bsStyle="default" bsSize="small" onClick={stopBubble}>
-        <i className="fa fa-clock-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-
-  return downloadable ? downloadBtn : processBtn;
-};
-
-const clickToDelete = (e, archive) => {
-  e.stopPropagation();
-  if (confirm('Are you sure to delete this archive?')) {
-    ReportActions.delete(archive);
-  }
-};
-
-const deleteBtn = (archive) => {
-  const onClickToDelete = e => clickToDelete(e, archive);
-  const deleteTP = (
-    <Tooltip id="delete-tp">
-      Delete this archive.
-    </Tooltip>
-  );
-
-  const btn = (
-    <OverlayTrigger placement="top" overlay={deleteTP}>
-      <Button bsStyle="danger" bsSize="small" onClick={onClickToDelete}>
-        <i className="fa fa-times" />
-      </Button>
-    </OverlayTrigger>
-  );
-
-  return btn;
-};
-
-const clickToClone = (e, archive) => {
-  e.stopPropagation();
-  LoadingActions.start();
-  ReportActions.clone.defer(archive);
-  UIActions.uncheckWholeSelection.defer();
-};
-
-const cloneBtn = (archive) => {
-  const onClickToClone = e => clickToClone(e, archive);
-  const cloneTP = (
-    <Tooltip id="clone-tp">
-      Load data from this report.
-    </Tooltip>
-  );
-
-  const btn = (
-    <OverlayTrigger placement="top" overlay={cloneTP}>
-      <Button bsStyle="warning" bsSize="small" onClick={onClickToClone}>
-        <i className="fa fa-pencil" />
-      </Button>
-    </OverlayTrigger>
-  );
-
-  return btn;
-};
-
-const suiTooltip = () => (
-  <Tooltip id="sui-tp">Supporting Information</Tooltip>
-);
-
-const suiLabel = () => (
-  <OverlayTrigger placement="right" overlay={suiTooltip()}>
-    <Label bsStyle="info">SI</Label>
-  </OverlayTrigger>
-);
-
-const suiStdRxnLabelTooltip = () => (
-  <Tooltip id="sui-tp">Supporting Information - Standard Reaction</Tooltip>
-);
-
-const suiStdRxnLabel = () => (
-  <OverlayTrigger placement="right" overlay={suiStdRxnLabelTooltip()}>
-    <Label bsStyle="info">SI STD-RXN</Label>
-  </OverlayTrigger>
-);
-
-const spcTooltip = () => (
-  <Tooltip id="spc-tp">SI Spectrum</Tooltip>
-);
-
-const spcLabel = () => (
-  <OverlayTrigger placement="right" overlay={spcTooltip()}>
-    <Label bsStyle="info">SI-SPC</Label>
-  </OverlayTrigger>
-);
-
-const rxlTooltip = () => (
-  <Tooltip id="spc-tp">SI Reaction List Xlsx</Tooltip>
-);
-
-const rxlXlsxLabel = () => (
-  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
-    <Label bsStyle="info">SI-XLSX</Label>
-  </OverlayTrigger>
-);
-
-const rxlCsvLabel = () => (
-  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
-    <Label bsStyle="info">SI-CSV</Label>
-  </OverlayTrigger>
-);
-
-const rxlHtmlLabel = () => (
-  <OverlayTrigger placement="right" overlay={rxlTooltip()}>
-    <Label bsStyle="info">SI-HTML</Label>
-  </OverlayTrigger>
-);
-
-const templateLable = (archive) => {
-  switch (archive.template.value) {
-    case 'standard':
-      return null;
-    case 'spectrum':
-      return spcLabel();
-    case 'supporting_information':
-      return suiLabel();
-    case 'supporting_information_std_rxn':
-      return suiStdRxnLabel();
-    case 'rxn_list_xlsx':
-      return rxlXlsxLabel();
-    case 'rxn_list_csv':
-      return rxlCsvLabel();
-    case 'rxn_list_html':
-      return rxlHtmlLabel();
-    default:
-      return null;
-  }
-};
-
-const title = (archive) => {
-  const newLabel = archive.unread
-    ? <Label bsStyle="warning">new</Label>
-    : null;
-
-  return (
-    <div style={{ width: '100%', lineHeight: '30px' }}>
-      {archive.file_name} {newLabel} {templateLable(archive)}
-      <div className="button-right">
-        {cloneBtn(archive)}
-        <span>&nbsp;</span>
-        {reportStatusBtn(archive)}
-        <span>&nbsp;</span>
-        {deleteBtn(archive)}
-      </div>
-    </div>
-  );
-};
-
-const Archives = ({ archives }) => {
-  const content = archives.map((archive, index) => (
-    <Panel
-      eventKey={index}
-      key={index}
-    >
-      <Panel.Heading>{title(archive)}</Panel.Heading>
-      {fileDescription(archive)}
-    </Panel>
-  ));
-
-  return (
-    <PanelGroup accordion>
-      {content}
-    </PanelGroup>
-  );
-};
-
-export default Archives;
diff --git a/app/packs/src/components/report/Config.js b/app/packs/src/components/report/Config.js
deleted file mode 100644
index 0c8285fbe..000000000
--- a/app/packs/src/components/report/Config.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import {
-  FormGroup, OverlayTrigger, ControlLabel, FormControl, Tooltip,
-  Row, Col
-} from 'react-bootstrap';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import CheckBoxs from 'src/components/common/CheckBoxs';
-
-const imgFormatOpts = () => (
-  [
-    { label: 'PNG', value: 'png' },
-    { label: 'EPS', value: 'eps' },
-    { label: 'EMF', value: 'emf' },
-  ]
-);
-
-const EpsWarning = ({ imgFormat }) => (
-  imgFormat === 'eps'
-    ? <p className="text-danger" style={{ paddingTop: 12 }}>
-      WARNING: EPS format is not supported by Microsoft Office
-    </p>
-    : null
-);
-
-const onImgFormatChange = (e) => {
-  ReportActions.updateImgFormat(e.value);
-};
-
-const ImgFormat = ({ imgFormat }) => (
-  <Row style={{ paddingBottom: 100 }} >
-    <Col md={3} sm={8}>
-      <label>Images format</label>
-      <Select
-        options={imgFormatOpts()}
-        value={imgFormat}
-        clearable={false}
-        style={{ width: 100 }}
-        onChange={onImgFormatChange}
-      />
-    </Col>
-    <Col md={9} sm={16}>
-      <label />
-      <EpsWarning imgFormat={imgFormat} />
-    </Col>
-  </Row>
-);
-
-const FileDescription = ({ fileDescription }) => (
-  <FormGroup>
-    <ControlLabel>File description</ControlLabel>
-    <FormControl
-      componentClass="textarea"
-      onChange={ReportActions.updateFileDescription}
-      rows={2}
-      value={fileDescription}
-    />
-  </FormGroup>
-);
-
-const fileNameRule = () => (
-  <Tooltip id="file-name-rule" >
-    <p>Max 40 characters.</p>
-    <p>allowed: a to z, A to Z, 0 to 9, -, _</p>
-  </Tooltip>
-);
-
-const FileName = ({ fileName }) => (
-  <FormGroup>
-    <OverlayTrigger overlay={fileNameRule()}>
-      <ControlLabel>
-        File Name
-      </ControlLabel>
-    </OverlayTrigger>
-    <FormControl
-      type="text"
-      value={fileName}
-      onChange={ReportActions.updateFileName}
-    />
-  </FormGroup>
-);
-
-const onTemplateChange = (e) => {
-  ReportActions.updateTemplate(e);
-};
-
-function TemplateRender(template, options) {
-  const templateOpts = options.map(item => ({ id: item.id, label: item.name, value: item.report_type }));
-
-  return (
-    <Row>
-      <Col md={6} sm={12}>
-        <label>Template Selection</label>
-        <Select
-          options={templateOpts}
-          value={template}
-          clearable={false}
-          onChange={onTemplateChange}
-        />
-      </Col>
-      <Col md={6} sm={12} />
-    </Row>
-  );
-}
-
-const toggleConfigs = (text, checked) => {
-  ReportActions.updateConfigs({ text, checked });
-};
-
-const toggleConfigsAll = () => {
-  ReportActions.toggleConfigsCheckAll();
-};
-
-const suiConfig = ({ template, configs, fileName, checkedAllConfigs,
-  fileDescription, options }) => {
-
-  const filteredConfigs = configs.filter(c => c.text === 'Show all chemicals in schemes (unchecked to show products only)');
-  return (
-    <div>
-      <br />
-      {TemplateRender(template, options)}
-      <br />
-      <FileName fileName={fileName} />
-      <FileDescription fileDescription={fileDescription} />
-      <CheckBoxs
-        items={filteredConfigs}
-        toggleCheckbox={toggleConfigs}
-        toggleCheckAll={toggleConfigsAll}
-        checkedAll={checkedAllConfigs}
-      />
-    </div>
-  );
-};
-
-const suiStdRxnConfig = ({
-  template, configs, fileName, checkedAllConfigs, fileDescription, options
-}) => {
-  const filteredConfigs = configs.filter(c => c.text === 'Show all chemicals in schemes (unchecked to show products only)');
-  return (
-    <div>
-      <br />
-      {TemplateRender(template, options)}
-      <br />
-      <FileName fileName={fileName} />
-      <FileDescription fileDescription={fileDescription} />
-      <CheckBoxs
-        items={filteredConfigs}
-        toggleCheckbox={toggleConfigs}
-        toggleCheckAll={toggleConfigsAll}
-        checkedAll={checkedAllConfigs}
-      />
-    </div>
-  );
-};
-
-const stdConfig = ({
-  template,
-  configs,
-  fileName,
-  checkedAllConfigs,
-  imgFormat,
-  fileDescription,
-  options
-}) => (
-  <div>
-    <br />
-    {TemplateRender(template, options)}
-    <br />
-    <FileName fileName={fileName} />
-    <FileDescription fileDescription={fileDescription} />
-    <CheckBoxs
-      items={configs}
-      toggleCheckbox={toggleConfigs}
-      toggleCheckAll={toggleConfigsAll}
-      checkedAll={checkedAllConfigs}
-    />
-    <ImgFormat imgFormat={imgFormat} />
-  </div>
-);
-
-const spcConfig = ({
-  template,
-  fileName,
-  fileDescription,
-  options
-}) => (
-  <div>
-    <br />
-    {TemplateRender(template, options)}
-    <br />
-    <FileName fileName={fileName} />
-    <FileDescription fileDescription={fileDescription} />
-  </div>
-);
-
-const rxlConfig = props => spcConfig(props);
-
-const doiConfig = props => spcConfig(props);
-
-const Config = (props) => {
-  switch (props.template.value) {
-    case 'standard':
-      return stdConfig(props);
-    case 'spectrum':
-      return spcConfig(props);
-    case 'supporting_information':
-      return suiConfig(props);
-    case 'supporting_information_std_rxn':
-      return suiStdRxnConfig(props);
-    case 'rxn_list_xlsx':
-    case 'rxn_list_csv':
-    case 'rxn_list_html':
-      return rxlConfig(props);
-    case 'doi_list_xlsx':
-      return doiConfig(props);
-    default:
-      return stdConfig(props);
-  }
-};
-
-export default Config;
diff --git a/app/packs/src/components/report/Orders.js b/app/packs/src/components/report/Orders.js
deleted file mode 100644
index 03fc0cf6e..000000000
--- a/app/packs/src/components/report/Orders.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import ObjRow from 'src/apps/mydb/elements/details/reports/OrdersDnD';
-
-const allContent = ({ selectedObjs, template }) => (
-  selectedObjs.map(obj => (
-    <ObjRow
-      id={obj.id}
-      key={`${obj.type}${obj.id}`}
-      element={obj}
-      template={template}
-    />
-  ))
-);
-
-const suiContent = ({ selectedObjs, template }) => (
-  selectedObjs.map((obj) => {
-    if (obj.type === 'reaction') {
-      return (
-        <ObjRow
-          id={obj.id}
-          key={`${obj.type}${obj.id}`}
-          element={obj}
-          template={template}
-        />
-      );
-    }
-    return null;
-  }).filter(r => r != null)
-);
-
-const spcContent = props => suiContent(props);
-
-const rxlContent = props => suiContent(props);
-
-const doiContent = props => suiContent(props);
-
-const ordersContent = (props) => {
-  switch (props.template.value) {
-    case 'standard':
-      return allContent(props);
-    case 'spectrum':
-      return spcContent(props);
-    case 'supporting_information':
-    case 'supporting_information_std_rxn':
-      return suiContent(props);
-    case 'rxn_list_xlsx':
-    case 'rxn_list_csv':
-    case 'rxn_list_html':
-      return rxlContent(props);
-    case 'doi_list_xlsx':
-      return doiContent(props);
-    default:
-      return allContent(props);
-  }
-};
-
-const Orders = props => (
-  <div className="report-orders">
-    {ordersContent(props)}
-  </div>
-);
-
-export default Orders;
diff --git a/app/packs/src/components/report/OrdersDnD.js b/app/packs/src/components/report/OrdersDnD.js
deleted file mode 100644
index 2d45f6f7d..000000000
--- a/app/packs/src/components/report/OrdersDnD.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { DragSource, DropTarget } from 'react-dnd';
-import { compose } from 'redux';
-import { Panel, Button } from 'react-bootstrap';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import UIActions from 'src/stores/alt/actions/UIActions';
-
-const orderSource = {
-  beginDrag(props) {
-    return { id: props.id, type: props.element.type };
-  },
-};
-
-const orderTarget = {
-  drop(targetProps, monitor) {
-    const targetTag = { id: targetProps.id, type: targetProps.element.type };
-    const sourceProps = monitor.getItem();
-    const sourceTag = { id: sourceProps.id, type: sourceProps.type };
-    if (targetTag.type !== sourceTag.type || targetTag.id !== sourceTag.id) {
-      ReportActions.move({ sourceTag, targetTag });
-    }
-  },
-};
-
-const orderDragCollect = (connect, monitor) => (
-  {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }
-);
-
-const orderDropCollect = (connect, monitor) => (
-  {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    canDrop: monitor.canDrop(),
-  }
-);
-
-const headerTitle = (el, icon) => {
-  const clickToRm = () => {
-    ReportActions.remove({ type: el.type, id: el.id });
-    UIActions.uncheckWholeSelection.defer();
-  };
-
-  return (
-    <span>
-      {el.title()} {icon}
-      <Button
-        bsStyle="danger"
-        bsSize="xsmall"
-        className="button-right"
-        onClick={clickToRm}
-      >
-        <i className="fa fa-times" />
-      </Button>
-    </span>
-  );
-};
-
-const ObjRow = ({ element, template, connectDragSource, connectDropTarget,
-  isDragging, isOver, canDrop }) => {
-  const style = {};
-  if (canDrop) {
-    style.borderStyle = 'dashed';
-    style.borderWidth = 2;
-  }
-  if (isOver) {
-    style.borderColor = '#337ab7';
-  }
-  if (isDragging) {
-    style.opacity = 0.2;
-  }
-
-  let bsStyle = 'default';
-  let icon = null;
-  const isStdTemplate = template === 'standard';
-  const { type, role } = element;
-  if (type === 'sample') {
-    bsStyle = 'success';
-  } else if (!isStdTemplate && type === 'reaction' && role === 'gp') {
-    bsStyle = 'primary';
-    icon = <i className="fa fa-home c-bs-info" />;
-  } else if (!isStdTemplate && type === 'reaction' && role === 'single') {
-    bsStyle = 'default';
-    icon = <i className="fa fa-asterisk c-bs-danger" />;
-  } else if (!isStdTemplate && type === 'reaction' && role === 'parts') {
-    bsStyle = 'info';
-    icon = <i className="fa fa-bookmark c-bs-success" />;
-  } else if (type === 'reaction') {
-    bsStyle = 'info';
-  }
-
-  return compose(connectDragSource, connectDropTarget)(
-    <div>
-      <Panel
-        style={style}
-        bsStyle={bsStyle}
-      >
-        <Panel.Heading>{headerTitle(element, icon)}</Panel.Heading>
-        <div className="row">
-          <div className="svg">
-            <SVG src={element.svgPath} key={element.svgPath} />
-          </div>
-          <div className="dnd-btn">
-            <span
-              style={{ fontSize: '18pt', cursor: 'move' }}
-              className="text-info fa fa-arrows"
-            />
-          </div>
-        </div>
-      </Panel>
-    </div>,
-  );
-};
-
-export default compose(
-  DragSource(DragDropItemTypes.GENERAL, orderSource, orderDragCollect),
-  DropTarget(DragDropItemTypes.GENERAL, orderTarget, orderDropCollect),
-)(ObjRow);
diff --git a/app/packs/src/components/report/Paramize.js b/app/packs/src/components/report/Paramize.js
deleted file mode 100644
index 3cd7ca7ae..000000000
--- a/app/packs/src/components/report/Paramize.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const objTags = selectedObjs => (
-  selectedObjs.map(obj => ({ id: obj.id, type: obj.type }))
-);
-
-const abstractSettings = settings => (
-  settings.map(obj => (
-    { text: obj.text.replace(' ', '_'), checked: obj.checked }
-  ))
-);
-
-const abstractConfigs = configs => (
-  configs.map((obj) => {
-    switch (obj.text) {
-      case 'Page Break':
-        return { text: 'page_break', checked: obj.checked };
-      case 'Show all chemicals in schemes (unchecked to show products only)':
-        if (obj.checked) {
-          return { text: 'whole_diagram', checked: obj.checked };
-        }
-        return { text: 'product_diagram', checked: !obj.checked };
-      default:
-        return obj;
-    }
-  })
-);
-
-const paramize = (state) => {
-  const {
-    selectedObjs, splSettings, rxnSettings, configs, selMolSerials,
-    fileName, fileDescription, imgFormat, template, siRxnSettings,
-    prdAtts
-  } = state;
-
-  const params = {
-    objTags: objTags(selectedObjs),
-    splSettings: abstractSettings(splSettings),
-    rxnSettings: abstractSettings(rxnSettings),
-    siRxnSettings: siRxnSettings,
-    configs: abstractConfigs(configs),
-    prdAtts: prdAtts,
-    imgFormat: imgFormat?.value || imgFormat || 'png',
-    fileName,
-    fileDescription,
-    templateId: template.id || template,
-    templateType: template?.value,
-    molSerials: selMolSerials,
-  };
-  return params;
-};
-
-export default paramize;
diff --git a/app/packs/src/components/report/Previews.js b/app/packs/src/components/report/Previews.js
deleted file mode 100644
index f919cb924..000000000
--- a/app/packs/src/components/report/Previews.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import React from 'react';
-import { SectionReaction } from 'src/apps/mydb/elements/details/reports/SectionReaction';
-import SectionSample from 'src/apps/mydb/elements/details/reports/SectionSample';
-import SectionSiProcedures from 'src/apps/mydb/elements/details/reports/SectionSiProcedures';
-import SectionSiSynthesis from 'src/apps/mydb/elements/details/reports/SectionSiSynthesis';
-import SectionSpectrum from 'src/apps/mydb/elements/details/reports/SectionSpectrum';
-import SectionReactionList from 'src/apps/mydb/elements/details/reports/SectionReactionList';
-import SectionSiSynthesisStdRxn from 'src/apps/mydb/elements/details/reports/SectionSiSynthesisStdRxn';
-import SectionDoiList from 'src/components/report/SectionDoiList';
-
-const objToKeyValPairs = (obj = []) => (
-  obj.reduce((ob, { text, checked }) => {
-    const o = ob;
-    const oTitle = text.replace(/\s+/g, '').substring(0, 12);
-    o[oTitle] = checked;
-    return o;
-  }, {})
-);
-
-const stdPreviews = ({
-  previewObjs,
-  splSettings,
-  rxnSettings,
-  configs
-}) => {
-  const splSettingsPairs = objToKeyValPairs(splSettings);
-  const rxnSettingsPairs = objToKeyValPairs(rxnSettings);
-  const configsPairs = objToKeyValPairs(configs);
-
-  const objs = previewObjs.map((obj, i) => (
-    obj.type === 'sample'
-      ? <SectionSample
-        key={i}
-        sample={obj}
-        settings={splSettingsPairs}
-        configs={configsPairs}
-      />
-      : <SectionReaction
-        key={i}
-        reaction={obj}
-        settings={rxnSettingsPairs}
-        configs={configsPairs}
-      />
-  ));
-
-  return (
-    <div> {objs} </div>
-  );
-};
-
-const suiPreviews = ({ previewObjs, configs, molSerials, siRxnSettings }) => {
-  const configsPairs = objToKeyValPairs(configs);
-  const setPairs = objToKeyValPairs(siRxnSettings);
-
-  return (
-    <div>
-      <p>Experimental Part:</p>
-      <br />
-      <h4>1 Versions</h4>
-      <p>Version InChI (1.04), Version SMILES (Daylight)</p>
-      <br />
-      <h4>2 General remarks</h4>
-      <br />
-      <h4>3 General procedures</h4>
-      <SectionSiProcedures previewObjs={previewObjs} />
-      <br />
-      <h4>4 Synthesis</h4>
-      <SectionSiSynthesis
-        previewObjs={previewObjs}
-        configs={configsPairs}
-        molSerials={molSerials}
-        settings={setPairs}
-      />
-      <br />
-    </div>
-  );
-};
-
-const suiStdRxnPreviews = ({ previewObjs, configs, molSerials, siRxnSettings }) => {
-  const configsPairs = objToKeyValPairs(configs);
-  const setPairs = objToKeyValPairs(siRxnSettings);
-
-  return (
-    <div>
-      <p>Experimental Part:</p>
-      <br />
-      <h4>1 Versions</h4>
-      <p>Version InChI (1.04), Version SMILES (Daylight)</p>
-      <br />
-      <h4>2 General remarks</h4>
-      <br />
-      <h4>3 General procedures</h4>
-      <SectionSiProcedures previewObjs={previewObjs} />
-      <br />
-      <h4>4 Synthesis</h4>
-      <SectionSiSynthesisStdRxn
-        previewObjs={previewObjs}
-        configs={configsPairs}
-        molSerials={molSerials}
-        settings={setPairs}
-      />
-      <br />
-    </div>
-  );
-};
-
-const spcPreviews = ({ prdAtts, molSerials, attThumbNails }) => (
-  <div>
-    <SectionSpectrum
-      prdAtts={prdAtts}
-      molSerials={molSerials}
-      attThumbNails={attThumbNails}
-    />
-    <br />
-  </div>
-);
-
-const rxlPreviews = ({ previewObjs, molSerials }) => (
-  <SectionReactionList
-    objs={previewObjs}
-    molSerials={molSerials}
-  />
-);
-
-const doiPreviews = ({ selectedObjs, molSerials }) => (
-  <SectionDoiList
-    objs={selectedObjs}
-    molSerials={molSerials}
-  />
-);
-
-const previewsContent = (props) => {
-  switch (props.template.value) {
-    case 'standard':
-      return stdPreviews(props);
-    case 'spectrum':
-      return spcPreviews(props);
-    case 'supporting_information':
-      return suiPreviews(props);
-    case 'supporting_information_std_rxn':
-      return suiStdRxnPreviews(props);
-    case 'rxn_list_xlsx':
-    case 'rxn_list_csv':
-    case 'rxn_list_html':
-      return rxlPreviews(props);
-    case 'doi_list_xlsx':
-    return doiPreviews(props);
-    default:
-      return stdPreviews(props);
-  }
-};
-
-const Previews = props => (
-  <div className="report-preview">
-    {previewsContent(props)}
-  </div>
-);
-
-export default Previews;
diff --git a/app/packs/src/components/report/ReportComponent.js b/app/packs/src/components/report/ReportComponent.js
deleted file mode 100644
index 475d66d61..000000000
--- a/app/packs/src/components/report/ReportComponent.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import UIActions from 'src/stores/alt/actions/UIActions';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import paramize from 'src/apps/mydb/elements/details/reports/Paramize';
-
-const clickToClose = (report) => {
-  DetailActions.close(report);
-};
-
-const CloseBtn = ({ report }) => {
-  const onClickToClose = () => clickToClose(report);
-
-  return (
-    <Button
-      bsStyle="danger"
-      bsSize="xsmall"
-      className="button-right"
-      onClick={onClickToClose}
-    >
-      <i className="fa fa-times" />
-    </Button>
-  );
-};
-
-const clickToReset = () => {
-  ReportActions.reset();
-  UIActions.uncheckWholeSelection.defer();
-};
-
-const ResetBtn = () => (
-  <Button
-    bsStyle="info"
-    bsSize="xsmall"
-    className="button-right"
-    onClick={clickToReset}
-  >
-    <span><i className="fa fa-eraser" /> Reset</span>
-  </Button>
-);
-
-const generateReport = (allState, updateQueue) => {
-  const report = paramize(allState);
-  ReportActions.generateReport(report);
-};
-
-const GenerateReportBtn = ({ allState, updateQueue }) => {
-  const { selectedObjTags, defaultObjTags, splSettings, rxnSettings,
-    processingReport } = allState;
-
-  const hasObj = [...selectedObjTags.sampleIds,
-  ...selectedObjTags.reactionIds, ...defaultObjTags.sampleIds,
-  ...defaultObjTags.reactionIds].length !== 0;
-
-  const showGeneReportBtn = [...splSettings, ...rxnSettings].map((settting) => {
-    if (settting.checked) {
-      return true;
-    }
-    return null;
-  }).filter(r => r != null).length !== 0;
-
-  const onClick = () => generateReport(allState, updateQueue);
-
-  return (
-    !processingReport
-      ? <Button
-        bsStyle="primary"
-        bsSize="xsmall"
-        className="button-right"
-        disabled={!(showGeneReportBtn && hasObj)}
-        onClick={onClick}
-      >
-        <span><i className="fa fa-file-text-o" /> Generate</span>
-      </Button>
-      : <Button
-        bsStyle="danger"
-        bsSize="xsmall"
-        className="button-right"
-      >
-        <span><i className="fa fa-spinner fa-pulse fa-fw" /> Processing</span>
-      </Button>
-  );
-};
-
-export { CloseBtn, ResetBtn, GenerateReportBtn };
diff --git a/app/packs/src/components/report/ReportContainer.js b/app/packs/src/components/report/ReportContainer.js
deleted file mode 100644
index 234cb3561..000000000
--- a/app/packs/src/components/report/ReportContainer.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Panel, Tabs, Tab } from 'react-bootstrap';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import ReportStore from 'src/stores/alt/stores/ReportStore';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import Setting from 'src/apps/mydb/elements/details/reports/Setting';
-import Previews from 'src/apps/mydb/elements/details/reports/Previews';
-import Orders from 'src/apps/mydb/elements/details/reports/Orders';
-import Serials from 'src/apps/mydb/elements/details/reports/Serials';
-import Archives from 'src/apps/mydb/elements/details/reports/Archives';
-import Config from 'src/apps/mydb/elements/details/reports/Config';
-import PanelHeader from 'src/components/common/PanelHeader';
-import { CloseBtn, ResetBtn, GenerateReportBtn } from 'src/apps/mydb/elements/details/reports/ReportComponent';
-
-const fetchPreviewTabs = [3, 4];
-
-export default class ReportContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...ReportStore.getState(),
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onChangeUI = this.onChangeUI.bind(this);
-    this.panelHeader = this.panelHeader.bind(this);
-    this.updateQueue = this.updateQueue.bind(this);
-  }
-
-  componentDidMount() {
-    ReportStore.listen(this.onChange);
-    UIStore.listen(this.onChangeUI);
-    const uiState = UIStore.getState();
-    this.onChangeUI(uiState);
-    ReportActions.getArchives.defer();
-    ReportActions.fetchTemplates.defer();
-  }
-
-  componentWillUnmount() {
-    ReportStore.unlisten(this.onChange);
-    UIStore.unlisten(this.onChangeUI);
-  }
-
-  onChange(state) {
-    this.setState({ ...state });
-  }
-
-  onChangeUI(uiState) {
-    // jump to config when in the preview
-    const { activeKey } = this.state;
-    if (fetchPreviewTabs.indexOf(activeKey) >= 0) {
-      ReportActions.updateActiveKey.defer(2);
-    }
-    // load list data only
-    const state = { uiState, reportState: this.state };
-    ReportActions.updateCheckedTags.defer(state);
-  }
-
-  panelHeader() {
-    const { report } = this.props;
-    const allState = this.state;
-    const btns = [
-      <CloseBtn key="closeBtn" report={report} />,
-      <GenerateReportBtn
-        key="generateReportBtn"
-        allState={allState}
-        updateQueue={this.updateQueue}
-      />,
-      <ResetBtn key="resetBtn" />,
-    ];
-    return <PanelHeader title="Report Generation" btns={btns} />;
-  }
-
-  selectTab(key) {
-    ReportActions.updateActiveKey(key);
-    if (fetchPreviewTabs.indexOf(key) >= 0) { // preview
-      LoadingActions.start.defer();
-      const reportState = ReportStore.getState();
-      ReportActions.loadRreview.defer({ reportState });
-    }
-  }
-
-  archivesTitle() {
-    const unreadIds = this.unreadIds();
-    const unReadBadge = unreadIds.length > 0
-      ? <span className="badge-danger">{unreadIds.length}</span>
-      : null;
-
-    return (
-      <span>Archive {unReadBadge}</span>
-    );
-  }
-
-  unreadIds() {
-    let ids = [];
-    this.state.archives.forEach((a) => {
-      if (a.unread) {
-        ids = [...ids, a.id];
-      }
-    });
-    return ids;
-  }
-
-  updateQueue() {
-    const { processings } = this.state;
-    if (processings.length > 0) {
-      ReportActions.updateProcessQueue.defer(processings);
-    }
-  }
-
-  render() {
-    const {
-      splSettings, checkedAllSplSettings, archives, activeKey,
-      rxnSettings, checkedAllRxnSettings, imgFormat, fileName,
-      configs, checkedAllConfigs, selectedObjs, selMolSerials,
-      siRxnSettings, checkedAllSiRxnSettings, fileDescription,
-      prdAtts, attThumbNails, previewObjs, templateOpts
-    } = this.state;
-
-    let { template } = this.state;
-    let alertTemplateNotFound = false;
-
-    if (templateOpts.length > 0 && template && typeof template != 'object') {
-      let templateOpt = templateOpts.find(x => x.id == template || x.report_type == template);
-      if (!templateOpt) {
-        alertTemplateNotFound = true;
-        templateOpt = templateOpts.find(x => x.report_type === 'standard')
-      }
-      template = { id: templateOpt.id, label: templateOpt.name, value: templateOpt.report_type };
-    }
-
-    const archivesTitle = this.archivesTitle();
-    const tabStyle = {padding: "15px", border: "1px solid #ddd", borderRadius: "4px"}
-    return (
-      <Panel
-        bsStyle="default"
-      >
-        {alertTemplateNotFound && (
-          <Alert variant="warning">
-            Report Template not found. Set to Standard. Please check your config settings.
-          </Alert>
-        )}
-        <Panel.Heading>{this.panelHeader()}</Panel.Heading>
-        <Tabs
-          activeKey={activeKey}
-          onSelect={this.selectTab}
-          id="report-tabs"
-          style={{padding:"15px"}}
-        >
-          <Tab eventKey={0} title="Config" style={tabStyle}>
-            <Config
-              imgFormat={imgFormat}
-              fileName={fileName}
-              fileDescription={fileDescription}
-              configs={configs}
-              checkedAllConfigs={checkedAllConfigs}
-              template={template}
-              handleTemplateChanged={this.handleTemplateChanged}
-              options={templateOpts}
-            />
-          </Tab>
-          <Tab eventKey={1} title="Setting" style={tabStyle}>
-            <Setting
-              template={template}
-              splSettings={splSettings}
-              checkedAllSplSettings={checkedAllSplSettings}
-              rxnSettings={rxnSettings}
-              checkedAllRxnSettings={checkedAllRxnSettings}
-              siRxnSettings={siRxnSettings}
-              checkedAllSiRxnSettings={checkedAllSiRxnSettings}
-            />
-          </Tab>
-
-          <Tab eventKey={2} title="Order" style={tabStyle}>
-            <div className="panel-fit-screen">
-              <Orders selectedObjs={selectedObjs} template={template} />
-            </div>
-          </Tab>
-          <Tab eventKey={3} title="Label" style={tabStyle}>
-            <div className="panel-fit-screen">
-              <Serials selMolSerials={selMolSerials} template={template} />
-            </div>
-          </Tab>
-          <Tab eventKey={4} title="Preview" style={tabStyle}>
-            <div className="panel-fit-screen">
-              <Previews
-                previewObjs={previewObjs}
-                splSettings={splSettings}
-                rxnSettings={rxnSettings}
-                siRxnSettings={siRxnSettings}
-                configs={configs}
-                template={template}
-                molSerials={selMolSerials}
-                prdAtts={prdAtts}
-                attThumbNails={attThumbNails}
-              />
-            </div>
-          </Tab>
-          <Tab eventKey={5} title={archivesTitle} style={tabStyle}>
-            <div className="panel-fit-screen">
-              <Archives archives={archives} />
-            </div>
-          </Tab>
-        </Tabs>
-      </Panel>
-    );
-  }
-}
diff --git a/app/packs/src/components/report/SectionReaction.js b/app/packs/src/components/report/SectionReaction.js
deleted file mode 100644
index df27d8a36..000000000
--- a/app/packs/src/components/report/SectionReaction.js
+++ /dev/null
@@ -1,366 +0,0 @@
-import React, {Component} from 'react'
-import SVG from 'react-inlinesvg';
-import {Alert, Label, Table, Tooltip, OverlayTrigger} from 'react-bootstrap';
-import QuillViewer from 'src/components/QuillViewer';
-import { map } from 'lodash';
-
-const SectionReaction = ({reaction, settings, configs}) => {
-  const {description, literatures, starting_materials, reactants,
-         products, solvents, solvent, dangerous_products, purification,
-         observation, svgPath, tlc_description,
-         tlc_solvents, rf_value, status } = reaction;
-  const dangerousProducts = dangerous_products;
-
-  const has_analyses = !!(products.find((sample) => sample.analysesPresent()));
-
-  const showPuri = settings.purification
-    && purification
-    && purification.length !== 0;
-
-  const showDang = settings.dangerouspro
-    && dangerousProducts
-    && dangerousProducts.length !== 0;
-
-  return (
-    <div>
-      <Alert style={{ textAlign: 'center',
-                      backgroundColor: '#428bca',
-                      color:'white',
-                      border:'none'}}> {reaction.short_label}
-        <StatusContent status={status}/>
-      </Alert>
-
-      <SVGContent show={settings.diagram}
-                  svgPath={svgPath}
-                  isProductOnly={!configs.Showallchemi}
-                  products={products} />
-      <MaterialContent  show={settings.material}
-                        starting_materials={starting_materials}
-                        reactants={reactants}
-                        products={products} />
-      <SolventContent show={settings.material}
-                      solvents={solvents}
-                      solvent={solvent} />
-      <h4> Description </h4>
-      <DescriptionContent show={settings.description && description}
-                          description={description} />
-      <PurificationContent
-        show={showPuri}
-        puri={purification}
-      />
-      <br />
-      <DangerourProductsContent
-        show={showDang}
-        dang={dangerousProducts}
-      />
-      <br />
-      <TLCContent
-        show={settings.tlc && tlc_description}
-        tlcDescription={tlc_description}
-        tlcSolvents={tlc_solvents}
-        rfValue={rf_value}
-      />
-      <ObservationContent show={settings.observation && observation}
-                          observation={observation} />
-      <AnalysesContent show={settings.analysis && has_analyses}
-                       products={products} />
-      <LiteratureContent show={settings.literature && literatures && literatures.length != 0}
-                         literatures={literatures} />
-    </div>
-  )
-}
-
-const SVGContent = ({show, svgPath, products, isProductOnly}) => {
-  const productsSvg = products.map(s => {
-    const svg = s.svgPath;
-    return (<td key={s.id}><SVG src={svg}/></td>);
-  });
-
-  if(!show) {
-    return null;
-  }
-
-  return (
-    isProductOnly
-      ? <Table className='reaction-details'>
-          <tbody>
-            <tr>
-              { productsSvg }
-            </tr>
-          </tbody>
-        </Table>
-      : <SVG key={svgPath} src={svgPath} className='reaction-details'/>
-  )
-}
-
-const StatusContent = ({ status }) => {
-  let tooltip = null;
-  switch(status) {
-    case "Successful":
-      tooltip = (<Tooltip id="reaction_success">Successful Reaction</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <a style={{ marginLeft: '10px', padding: '3px', color: 'white' }} >
-            <i className="fa fa-check-circle" />
-          </a>
-        </OverlayTrigger>
-      );
-    case "Planned":
-      tooltip = (<Tooltip id="reaction_planned">Planned Reaction</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'orange' }} >
-            <i className="fa fa-clock-o" />
-          </a>
-        </OverlayTrigger>
-      );
-    case "Not Successful":
-      tooltip = (<Tooltip id="reaction_fail">Not Successful Reaction</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'red' }} >
-            <i className="fa fa-times-circle-o" />
-          </a>
-        </OverlayTrigger>
-      );
-    case "General Procedure":
-      tooltip = (<Tooltip id="general_procedure">General Procedure</Tooltip>);
-      return (
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <a style={{ marginLeft: '10px', padding: '3px', backgroundColor: 'white', color: 'blue' }} >
-            <i className="fa fa-home" />
-          </a>
-        </OverlayTrigger>
-      );
-    default:
-      return null;
-  }
-};
-
-const MaterialContent = ({show, starting_materials, reactants, products}) => {
-  const materialCalc = (target, multi, precision) => {
-    return (target ? (target*multi).toFixed(precision) : " - ")
-  }
-
-  const equiv_or_yield = (s, isProduct) => {
-    return (
-      isProduct
-        ? materialCalc(s.equivalent*100, 1, 0).toString() + "%"
-        : materialCalc(s.equivalent, 1, 3)
-    )
-  }
-
-  const rows = (material, isProduct) => {
-    return (
-      typeof material != 'undefined'
-        ? material.map((sample, i) => {
-          return (
-            <tbody key={i}>
-              <tr>
-                <td colSpan="5">
-                  <i className="fa fa-arrow-circle-right" aria-hidden="true" />&nbsp;
-                  {sample.molecule_iupac_name}&nbsp;
-                  ({sample.name || sample.external_label || sample.short_label || ''})
-                </td>
-              </tr>
-              <tr>
-                <td style={{width: '20%'}}>{sample.molecule_formula}</td>
-                <td style={{width: '20%'}}>{materialCalc(sample.amount_g, 1, 3)}</td>
-                <td style={{width: '20%'}}>{materialCalc(sample.amount_l, 1000, 3)}</td>
-                <td style={{width: '20%'}}>{materialCalc(sample.amount_mol, 1000, 3)}</td>
-                <td style={{width: '20%'}}>{equiv_or_yield(sample, isProduct)}</td>
-              </tr>
-            </tbody>
-          )})
-        : null
-    );
-  };
-  const table = dataRows => (
-    <Table striped condensed hover>
-      <thead>
-        <tr>
-          <th>Formula</th>
-          <th>Mass(g)</th>
-          <th>Vol(ml)</th>
-          <th>Amount(mmol)</th>
-          <th>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    show ?
-      <div>
-        <h4><Label bsStyle="success"> Starting Materials </Label></h4>
-        <div> {table(rows(starting_materials, false))} </div>
-        <h4><Label bsStyle="warning"> Reactants </Label></h4>
-        <div> {table(rows(reactants, false))} </div>
-        <h4><Label bsStyle="danger"> Products </Label></h4>
-        <div> {table(rows(products, true))} </div>
-      </div>
-      : null
-  );
-};
-
-const SolventContent = ({ show, solvents, solvent }) => {
-  const volume = (s) => {
-    if (s.amount_l) {
-      return `(${s.amount_l * 1000}ml)`;
-    }
-    return '(0.0ml)';
-  };
-
-  const separator = (idx, last) => (
-    idx === last ? '' : ', '
-  );
-
-  const solventsData = () => {
-    const last = solvents.length - 1;
-    return solvents.map((s, i) => (
-      <pre key={i} className="noBorder display-inline no-padding">
-        {s.preferred_label + volume(s) + separator(i, last)}
-      </pre>
-    ));
-  };
-
-  const solventData = () => (
-    <pre className="noBorder display-inline no-padding">{solvent}</pre>
-  );
-
-  const displayContent = () => (
-    solvents.length !== 0 ? solventsData() : solventData()
-  );
-
-  return (
-    show
-      ? <div>
-        <h4 className="display-inline"> Solvent(s): </h4>
-        {displayContent()}
-        </div>
-      : null
-  );
-};
-
-const DescriptionContent = ({show, description}) => {
-  return show ? <QuillViewer value={description} /> : null;
-}
-
-const PurificationContent = ({ show, puri }) => {
-  const puriText = typeof puri === 'object' ? puri.join(', ') : puri;
-  return (
-    show
-      ? <div>
-          <h4 className="display-inline"> Type of Purification: </h4>
-          <pre className="noBorder display-inline no-padding">
-            {puriText}
-          </pre>
-        </div>
-      : null
-  );
-};
-
-const DangerourProductsContent = ({ show, dang }) => {
-  const dangText = typeof dang === 'object' ? dang.join(', ') : dang;
-  return (
-    show
-      ? <div>
-          <h4 className="display-inline"> Dangerous Products: </h4>
-          <pre className="noBorder display-inline no-padding">{dangText}</pre>
-        </div>
-      : null
-  );
-};
-
-const TLCContent = ({show, tlcDescription, tlcSolvents, rfValue}) => (
-  show
-    ? <div>
-        <div>
-        <h4 className="display-inline"> TLC - Control </h4>
-          <pre className="noBorder display-inline no-padding">
-            Rf-value: {rfValue} (Solvent: {tlcSolvents})
-          </pre>
-        </div>
-        <div className="g-marginLeft--10">
-          {tlcDescription}
-        </div>
-      </div>
-    : null
-);
-
-const ObservationContent = ({show, observation}) => {
-  return (
-    show
-      ? <div>
-          <h4>Additional information for publication and purification details</h4>
-          <QuillViewer value={observation} />
-        </div>
-      : null
-  )
-}
-
-const AnalysesContent = ({ show, products }) => {
-  const analyses = products.map((product, i) => (
-    product.analyses.map((analysis, j) => {
-      const content = analysis && analysis.extended_metadata
-        ? analysis.extended_metadata.content
-        : {};
-      const kind = analysis.kind ? `(${analysis.kind})` : '';
-      return (
-        analysis
-          ? <div key={i * 100 + j}>
-              <div className="noBorder g-marginLeft--20">
-                <p><u>{product.molecule.sum_formular}</u> ({kind})</p>
-                <div className="noBorder g-marginLeft--20">
-                  <QuillViewer value={content} />
-                  <p className="g-marginLeft--20">{analysis.description}</p>
-                </div>
-              </div>
-              <br/>
-            </div>
-          : null
-      );
-    })
-  ));
-  return (
-    show
-      ? <div>
-          <h4> Analysis </h4>
-          <div className="noBorder">{analyses}</div>
-        </div>
-      : null
-  );
-};
-
-const LiteratureContent = ({show, literatures}) => {
-  const rows = map(literatures,(literature, i) => {
-    return (
-      <tr key={i}>
-        <td>{literature.title}</td>
-        <td>{literature.url}</td>
-      </tr>
-    )
-  })
-  const table = <Table striped condensed hover>
-                  <thead>
-                    <tr>
-                      <th>Title</th>
-                      <th>URL</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {rows}
-                  </tbody>
-                </Table>
-  return (
-    show
-      ? <div>
-          <h4> Literatures </h4>
-          <div> {table} </div>
-        </div>
-      : null
-  )
-}
-
-export { SectionReaction, SVGContent, DescriptionContent };
diff --git a/app/packs/src/components/report/SectionReactionList.js b/app/packs/src/components/report/SectionReactionList.js
deleted file mode 100644
index 71463fa0c..000000000
--- a/app/packs/src/components/report/SectionReactionList.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Table, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import { UserSerial } from 'src/utilities/ReportHelper';
-
-const rlRowTp = (content, rowId) => (
-  <Tooltip id={rowId}>
-    <p>{content}</p>
-  </Tooltip>
-);
-
-const rlRowCont = (content, rowId) => {
-  const overlay = rlRowTp(content, rowId);
-  return (
-    <OverlayTrigger placement="top" overlay={overlay}>
-      <p>{content ? content.substring(0, 15) : ''}</p>
-    </OverlayTrigger>
-  );
-};
-
-const tableHeader = () => (
-  <thead>
-    <tr>
-      <th>Label</th>
-      <th>Image*</th>
-      <th>Name</th>
-      <th>InChI</th>
-      <th>InChIKey</th>
-      <th>Long-RInChIKey</th>
-      <th>Web-RInChIKey</th>
-      <th>Short-RInChIKey</th>
-    </tr>
-  </thead>
-);
-
-const rowContent = (p, long, short, web, molSerials, idx) => (
-  <tr>
-    <td className="one-line" >{UserSerial(p.molecule, molSerials)}</td>
-    <td className="one-line" >{}</td>
-    <td className="one-line" >{rlRowCont(p.showedName())}</td>
-    <td className="one-line" >{rlRowCont(p.molecule.inchikey)}</td>
-    <td className="one-line" >{rlRowCont(p.molecule.inchistring)}</td>
-    <td className="one-line" >{rlRowCont(long, idx)}</td>
-    <td className="one-line" >{rlRowCont(short, idx)}</td>
-    <td className="one-line" >{rlRowCont(web, idx)}</td>
-  </tr>
-);
-
-const tableBody = (objs, molSerials) => {
-  const contents = objs.map((r, idx) => {
-    if (r.type === 'reaction' && r.role !== 'gp') {
-      const long = r.rinchi_long_key;
-      const short = r.rinchi_short_key;
-      const web = r.rinchi_web_key;
-      return (
-        r.products.map(p => rowContent(p, long, short, web, molSerials, idx))
-      );
-    }
-    return null;
-  }).filter(r => r !== null);
-
-  return (
-    <tbody>{contents}</tbody>
-  );
-};
-
-const SectionReactionList = ({ objs, molSerials }) => (
-  <div>
-    <p>* Images are hidden in the preview.</p>
-    <Table striped bordered condensed hover>
-      {tableHeader()}
-      {tableBody(objs, molSerials)}
-    </Table>
-  </div>
-);
-
-export default SectionReactionList;
diff --git a/app/packs/src/components/report/SectionSample.js b/app/packs/src/components/report/SectionSample.js
deleted file mode 100644
index f747c33a2..000000000
--- a/app/packs/src/components/report/SectionSample.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Alert } from 'react-bootstrap';
-import QuillViewer from 'src/components/QuillViewer'
-
-const SectionSample = ({ sample, settings, configs }) => {
-  const { short_label, molecule_iupac_name, svgPath, analyses,
-    reaction_description, name, external_label } = sample;
-
-  return (
-    <div>
-      <Alert style={{
-        textAlign: 'center',
-        backgroundColor: '#000000',
-        color: 'white',
-        border: 'none'
-      }}
-      > {`${molecule_iupac_name} (${name || external_label || short_label})`}
-      </Alert>
-
-      <SVGContent
-        show={settings.diagram}
-        svgPath={svgPath}
-      />
-
-      <AnalysesContent
-        show={settings.analyses && analyses}
-        showRecDes={settings.reactiondesc && reaction_description}
-        analyses={analyses}
-        reactionDescription={reaction_description}
-      />
-    </div>
-  );
-};
-
-const SVGContent = ({ show, svgPath }) => {
-  if (!show) { return null; }
-  return <SVG key={svgPath} src={svgPath} className='sample-details' />
-}
-
-const AnalysesContent = ({ show, showRecDes, analyses, reactionDescription }) => {
-  const isReDesObj = typeof reactionDescription === "object";
-  const init = showRecDes && isReDesObj ? reactionDescription.ops : [];
-  const analysesParagraph = () => {
-    const dataMerged = analyses.reduce((sum, a) => {
-      let defaultContent = "{\"ops\":[{\"insert\":\"\"}]}"
-
-      let contentJSON = a.extended_metadata.content || JSON.parse(defaultContent)
-      return [...sum, ...contentJSON.ops];
-    }, init);
-    const data = dataMerged.map(d => {
-      d.insert = d.insert.replace(/\n/g, ' ');
-      return d;
-    });
-    return { ops: data };
-  };
-
-  return (
-    show
-      ? <div>
-        {<QuillViewer value={analysesParagraph()} />}
-      </div>
-      : null
-  );
-}
-
-export default SectionSample;
diff --git a/app/packs/src/components/report/SectionSiProcedures.js b/app/packs/src/components/report/SectionSiProcedures.js
deleted file mode 100644
index e4f98b242..000000000
--- a/app/packs/src/components/report/SectionSiProcedures.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { SVGContent, DescriptionContent } from 'src/apps/mydb/elements/details/reports/SectionReaction';
-import { rmDeltaRedundantSpaceBreak } from 'src/utilities/quillFormat';
-
-const Title = ({ el, counter }) => {
-  return (
-    <h5>
-      3.{counter} {el.name} ({el.short_label})
-    </h5>
-  );
-}
-
-const ProcedureRow = ({ el, counter }) => {
-  const clean_desc = rmDeltaRedundantSpaceBreak(el.description);
-  return (
-    <div>
-      <Title el={el} counter={counter} />
-      <SVGContent
-        show={true}
-        svgPath={el.svgPath}
-        products={[]}
-        isProductOnly={false}
-      />
-      <DescriptionContent show={true} description={clean_desc} />
-    </div>
-  );
-}
-
-const SectionSiProcedures = ({ previewObjs }) => {
-  let counter = 0;
-  const contents = previewObjs.map(obj => {
-    if (obj.type === 'reaction' && obj.role === 'gp') {
-      counter += 1;
-      return (
-        <ProcedureRow id={obj.id} key={obj.id} el={obj} counter={counter} />
-      );
-    }
-  });
-
-  return (
-    <div>
-      {contents}
-    </div>
-  );
-}
-
-export default SectionSiProcedures;
diff --git a/app/packs/src/components/report/SectionSiSynthesis.js b/app/packs/src/components/report/SectionSiSynthesis.js
deleted file mode 100644
index cbfb363a2..000000000
--- a/app/packs/src/components/report/SectionSiSynthesis.js
+++ /dev/null
@@ -1,418 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { SVGContent } from 'src/apps/mydb/elements/details/reports/SectionReaction';
-import QuillViewer from 'src/components/QuillViewer';
-import { fixDigit, validDigit } from 'src/utilities/MathUtils';
-import { rmOpsRedundantSpaceBreak, frontBreak } from 'src/utilities/quillFormat';
-import ArrayUtils from 'src/utilities/ArrayUtils';
-import { Alphabet } from 'src/utilities/ElementUtils';
-import { UserSerial } from 'src/utilities/ReportHelper';
-
-const onlyBlank = (target) => {
-  if (target.length === 0) return true;
-  const content = target.map(t => t.insert).join('').replace(/\s+/, '');
-  return !content;
-};
-
-const deltaUserSerial = (molecule, molSerials) => {
-  const insert = UserSerial(molecule, molSerials);
-  return { insert, attributes: { bold: 'true' } };
-};
-
-const Title = ({ el, counter, molSerials }) => {
-  let title = [];
-  el.products.forEach((p, i) => {
-    const us = UserSerial(p.molecule, molSerials);
-    const key = `${i}-text`;
-    const comma = <span key={`${i}-comma`}>, </span>;
-    const smn = p.showedName();
-    title = smn
-      ? [...title, <span key={key}>{smn} (<b>{us}</b>)</span>, comma]
-      : [...title, <span key={key}>&quot;<b>NAME</b>&quot; (<b>{us}</b>)</span>, comma];
-  });
-  title = _.flatten(title).slice(0, -1);
-
-  return (
-    <h5>
-      <span>{title}</span>
-    </h5>
-  );
-};
-
-const deltaSampleMoleculeName = (s) => {
-  const smn = s.showedName();
-  if (smn) {
-    return { insert: smn };
-  }
-  return { attributes: { bold: 'true' }, insert: '"NAME"' };
-};
-
-const isDisableAll = (settings) => {
-  let status = false;
-  const settingKeys = Object.keys(settings);
-  settingKeys.forEach((key) => {
-    status = status || settings[key];
-  });
-  return !status;
-};
-
-const productEA = (p) => {
-  let ea = [];
-  p.elemental_compositions.forEach((ec) => {
-    if (ec.description === 'By molecule formula') {
-      for (let [k, v] of Object.entries(ec.data)) {
-        ea = [...ea, `${k}, ${v}`];
-      }
-    }
-    return null;
-  });
-  ea = ea.filter(r => r != null).join('; ');
-  return ea;
-};
-
-const prdIdentifier = (counter, mol, molSerials) => (
-  [
-    { insert: `{P${counter}|` },
-    deltaUserSerial(mol, molSerials),
-    { insert: '}' },
-  ]
-);
-
-const productContent = (products, settings, molSerials) => {
-  let content = [];
-  let counter = 0;
-
-  products.forEach((p) => {
-    const m = p.molecule;
-    const ea = productEA(p);
-    counter += 1;
-
-    const cas = p.xref && p.xref.cas ? p.xref.cas : '- ';
-    const deltaName = settings.Name ? [
-      { insert: 'Name ' },
-      ...prdIdentifier(counter, m, molSerials),
-      { insert: ': ' },
-      deltaSampleMoleculeName(p),
-      { insert: '; ' },
-    ] : [];
-
-    const pFormula = settings.Formula ? `Formula: ${m.sum_formular}; ` : '';
-    const pCAS = settings.CAS ? `CAS: ${cas}; ` : '';
-    const pMMass = settings.MolecularMas
-      ? `Molecular Mass: ${fixDigit(m.molecular_weight, 4)}; ` : '';
-    const pEMass = settings.ExactMass
-      ? `Exact Mass: ${fixDigit(m.exact_molecular_weight, 4)}; ` : '';
-    const pEA = settings.EA ? `EA: ${ea}.` : '';
-
-    const pSmiles = `Smiles: ${m.cano_smiles}`;
-    const pInChI = `InChIKey: ${m.inchikey}`;
-    const dSmiles = settings.Smiles
-      ? [{ insert: pSmiles }, { insert: '\n' }]
-      : [];
-    const dInChI = settings.InChI
-      ? [{ insert: pInChI }, { insert: '\n' }]
-      : [];
-
-    content = [...content, ...deltaName,
-    { insert: pFormula + pCAS + pMMass + pEMass + pEA },
-    { insert: '\n' },
-    ...dSmiles,
-    ...dInChI,
-    { insert: '\n' },
-    ];
-  });
-  return content;
-};
-
-const ProductsInfo = ({ products = [], settings, molSerials }) => {
-  const disableAll = isDisableAll(settings);
-  if (disableAll) return null;
-
-  const content = productContent(products, settings, molSerials);
-  return <QuillViewer value={{ ops: content }} />;
-};
-
-const stAndReContent = (el, prevContent, molSerials) => {
-  let counter = 0;
-  let content = prevContent;
-  [...el.starting_materials, ...el.reactants].forEach((elm) => {
-    counter += 1;
-    content = [...content,
-    { insert: `{${Alphabet(counter)}|` },
-    deltaUserSerial(elm.molecule, molSerials),
-    { insert: '} ' },
-    deltaSampleMoleculeName(elm),
-    { insert: ` (${validDigit(elm.amount_g, 3)} g, ${validDigit(elm.amount_mol * 1000, 3)} mmol, ${validDigit(elm.equivalent, 3)} equiv); ` }];
-  });
-  return { content };
-};
-
-const solventsContent = (el, prevContent) => {
-  let counter = 0;
-  let content = prevContent;
-  el.solvents.forEach((elm) => {
-    counter += 1;
-    content = [...content,
-    { insert: `{S${counter}` },
-    { insert: '} ' },
-    deltaSampleMoleculeName(elm),
-    { insert: ` (${validDigit(elm.amount_l * 1000, 2)} mL); ` }];
-  });
-  return { content };
-};
-
-const porductsContent = (el, prevContent, molSerials) => {
-  let counter = 0;
-  let content = prevContent;
-  content = [...content, { insert: 'Yield: ' }];
-  el.products.forEach((p) => {
-    const mol = p.molecule;
-    counter += 1;
-    content = [...content, ...prdIdentifier(counter, mol, molSerials),
-    { insert: ` = ${validDigit(p.equivalent * 100, 0)}%` },
-    { insert: ` (${validDigit(p.amount_g, 3)} g, ${validDigit(p.amount_mol * 1000, 3)} mmol)` },
-    { insert: '; ' }];
-  });
-  content = content.slice(0, -1);
-  content = [...content, { insert: '.' }];
-  return { content };
-};
-
-const materailsContent = (el, molSerials) => {
-  const content = [];
-  const stAndRe = stAndReContent(el, content, molSerials);
-  const solvCon = solventsContent(el, stAndRe.content);
-  const prodCon = porductsContent(el, solvCon.content, molSerials);
-
-  return prodCon.content;
-};
-
-const tlcContent = (el) => {
-  let content = [];
-  if (el.tlc_solvents) {
-    content = [{ attributes: { italic: 'true' }, insert: 'R' },
-    { attributes: { script: 'sub', italic: 'true' }, insert: 'f' },
-    { insert: ` = ${el.rf_value} (${el.tlc_solvents}).` }];
-  }
-  return content;
-};
-
-const obsvTlcContent = (el) => {
-  let content = [];
-  const ops = el.observation.ops || [];
-  content = [...ops, ...tlcContent(el)];
-  content = rmOpsRedundantSpaceBreak(content);
-  if (onlyBlank(content)) return [];
-  return frontBreak(content);
-};
-
-const rmHeadSpace = (content) => {
-  let els = content;
-  let head = null;
-  els.some((el) => {
-    head = el.insert.replace(/^\s+/, '');
-    if (!head) els = [...els.slice(1)];
-    return head;
-  });
-  if (onlyBlank(els) || !head) return [];
-  els[0].insert = head;
-
-  return els;
-};
-
-const rmTailSpace = (content) => {
-  let els = content;
-  let tail = null;
-  els.reverse().some((el) => {
-    tail = el.insert.replace(/\s*[,.;]*\s*$/, '');
-    if (!tail) els = [...els.slice(1)];
-    return tail;
-  });
-  if (onlyBlank(els) || !tail) return [];
-  els.reverse();
-  els[els.length - 1].insert = tail;
-
-  return els;
-};
-
-const opsTailWithSymbol = (els, symbol) => [...els, { insert: symbol }];
-
-const endingSymbol = (content, symbol) => {
-  if (onlyBlank(content)) return [];
-
-  let els = rmHeadSpace(content);
-  els = rmTailSpace(els);
-
-  if (onlyBlank(els)) return [];
-
-  return opsTailWithSymbol(els, symbol);
-};
-
-const analysesContent = (products) => {
-  let content = [];
-  products.forEach((p) => {
-    const sortAnalyses = ArrayUtils.sortArrByIndex(p.analyses);
-    sortAnalyses.forEach((a) => {
-      const data = a && a.extended_metadata
-        && a.extended_metadata.report
-        && a.extended_metadata.report === 'true'
-        ? a.extended_metadata.content
-        : { ops: [] };
-      content = [...content, ...endingSymbol(data.ops, '; ')];
-    });
-  });
-  if (onlyBlank(content)) return [];
-  content = rmOpsRedundantSpaceBreak(content);
-  content = [...content.slice(0, -1), { insert: '.' }];
-  return frontBreak(content);
-};
-
-const dangContent = (el) => {
-  if (el.dangerous_products.length === 0) return [];
-  let content = [{ attributes: { bold: 'true' }, insert: 'Attention! ' },
-  {
-    insert: 'The reaction includes the use of dangerous ' +
-      'chemicals, which have the following ' +
-      'classification: '
-  }];
-  el.dangerous_products.forEach((d) => {
-    content = [...content, { insert: d }, { insert: ', ' }];
-  });
-  content = content.slice(0, -1);
-  content = rmOpsRedundantSpaceBreak(content);
-  return content;
-};
-
-const DangerBlock = ({ el }) => {
-  const block = dangContent(el);
-  return block.length > 0 ? <QuillViewer value={{ ops: block }} /> : null;
-};
-
-const descContent = (el) => {
-  if (['gp', 'parts'].indexOf(el.role) >= 0) return [];
-  let block = rmOpsRedundantSpaceBreak(el.description.ops);
-  block = [{ insert: '\n' }, ...block, { insert: '\n' }];
-  return block;
-};
-
-const synNameContent = (el) => {
-  const title = el.name || el.short_label;
-  return [{ insert: `${title}: ` }];
-};
-
-const doiContent = (el) => {
-  let block = [];
-  const rdoi = el && el.tag && el.tag.taggable_data && el.tag.taggable_data.publication
-   && el.tag.taggable_data.publication.doi;
-   // prs = el.products || [];
-   // const pdois = prs.map {
-   //
-   // }
-  if (rdoi) {
-    block = [{
-      insert: `\n Additional information on the chemical synthesis is available via Chemotion repository: \n https://doi.org/${rdoi}\n`
-    }];
-  }
-  return block;
-};
-
-const ContentBlock = ({ el, molSerials }) => {
-  const synName = synNameContent(el);
-  const desc = descContent(el);
-  const materials = materailsContent(el, molSerials);
-  const obsvTlc = obsvTlcContent(el);
-  const analyses = analysesContent(el.products);
-  const dois = doiContent(el);
-  const block = [...synName, ...desc, ...materials, ...obsvTlc, ...analyses, ...dois];
-  return <QuillViewer value={{ ops: block }} />;
-};
-
-const docFragment = (input) => {
-  const t = document.createElement('template');
-  t.innerHTML = input;
-  try {
-    return t.content.childNodes[0].childNodes[1].childNodes[2].childNodes;
-  } catch (err) {
-    return null;
-  }
-};
-
-const bibContent = (bib, idx) => {
-  let delta = [{ insert: `[${idx + 1}] ` }];
-  const nodes = docFragment(bib);
-  if (!nodes) return [];
-  nodes.forEach((node) => {
-    const text = node.textContent;
-    let target = { insert: text };
-    if (node.nodeName === 'I') {
-      target = { attributes: { italic: 'true' }, insert: text };
-    } else if (node.nodeName === 'B') {
-      target = { attributes: { bold: 'true' }, insert: text };
-    }
-    delta = [...delta, target];
-  });
-  return [...delta, { insert: '\n' }];
-};
-
-const ZoteroBlock = ({ el }) => {
-  const refs = el.references || [];
-  let bibs = [];
-  refs.forEach((ref, idx) => {
-    bibs = [...bibs, ...bibContent(ref.bib, idx)];
-  });
-
-  return bibs.length > 0
-    ? <QuillViewer value={{ ops: bibs }} />
-    : null;
-};
-
-const SynthesisRow = ({ el, counter, configs, molSerials, settings }) => (
-  <div>
-    <Title el={el} counter={counter} molSerials={molSerials} />
-    <SVGContent
-      show
-      svgPath={el.svgPath}
-      products={el.products}
-      isProductOnly={!configs.Showallchemi}
-    />
-    <ProductsInfo
-      products={el.products}
-      settings={settings}
-      molSerials={molSerials}
-    />
-    <ContentBlock el={el} molSerials={molSerials} />
-    <DangerBlock el={el} />
-    <ZoteroBlock el={el} />
-  </div>
-);
-
-const SectionSiSynthesis = ({
-  previewObjs, configs, molSerials, settings,
-}) => {
-  let counter = 0;
-  const contents = previewObjs.map((obj) => {
-    if (obj.type === 'reaction' && obj.role !== 'gp') {
-      counter += 1;
-      return (
-        <SynthesisRow
-          id={obj.id}
-          key={obj.id}
-          el={obj}
-          counter={counter}
-          configs={configs}
-          molSerials={molSerials}
-          settings={settings}
-        />
-      );
-    }
-    return null;
-  }).filter(r => r !== null);
-
-  return (
-    <div>
-      {contents}
-    </div>
-  );
-};
-
-export default SectionSiSynthesis;
diff --git a/app/packs/src/components/report/SectionSiSynthesisStdRxn.js b/app/packs/src/components/report/SectionSiSynthesisStdRxn.js
deleted file mode 100644
index 66aa33299..000000000
--- a/app/packs/src/components/report/SectionSiSynthesisStdRxn.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { SVGContent } from './SectionReaction';
-import QuillViewer from '../QuillViewer';
-import { fixDigit, validDigit } from '../utils/MathUtils';
-import { rmOpsRedundantSpaceBreak, frontBreak } from '../utils/quillFormat';
-import ArrayUtils from '../utils/ArrayUtils';
-import { Alphabet } from '../utils/ElementUtils';
-import { UserSerial, CapitalizeFirstLetter } from '../utils/ReportHelper';
-
-const onlyBlank = (target) => {
-  if (target.length === 0) return true;
-  const content = target.map(t => t.insert).join('').replace(/\s+/, '');
-  return !content;
-};
-
-const deltaUserSerial = (molecule, molSerials) => {
-  const insert = UserSerial(molecule, molSerials);
-  return { insert, attributes: { bold: 'true' } };
-};
-
-const Title = ({ el, counter, molSerials }) => {
-  let title = [];
-  el.products.forEach((p, i) => {
-    const us = UserSerial(p.molecule, molSerials);
-    const key = `${i}-text`;
-    const comma = <span key={`${i}-comma`}>, </span>;
-    const smn = i == 0 ? CapitalizeFirstLetter(p.showedName()) : p.showedName();
-    title = smn
-      ? [...title, <span key={key}>{smn} (<b>{us}</b>)</span>, comma]
-      : [...title, <span key={key}>&quot;<b>NAME</b>&quot; (<b>{us}</b>)</span>, comma];
-  });
-  title = _.flatten(title).slice(0, -1);
-
-  return (
-    <h5>
-      <span>{title}</span>
-    </h5>
-  );
-};
-
-const deltaSampleMoleculeName = (s) => {
-  const smn = s.showedName();
-  if (smn) {
-    return { insert: smn };
-  }
-  return { attributes: { bold: 'true' }, insert: '"NAME"' };
-};
-
-const isDisableAll = (settings) => {
-  let status = false;
-  const settingKeys = Object.keys(settings);
-  settingKeys.forEach((key) => {
-    status = status || settings[key];
-  });
-  return !status;
-};
-
-const productEA = (p) => {
-  let ea = [];
-  p.elemental_compositions.forEach((ec) => {
-    if (ec.description === 'By molecule formula') {
-      for (let [k, v] of Object.entries(ec.data)) {
-        ea = [...ea, `${k}, ${v}`];
-      }
-    }
-    return null;
-  });
-  ea = ea.filter(r => r != null).join('; ');
-  return ea;
-};
-
-const prdIdentifier = (counter, mol, molSerials) => (
-  [
-    { insert: `{P${counter}|` },
-    deltaUserSerial(mol, molSerials),
-    { insert: '}' },
-  ]
-);
-
-const productContent = (products, settings, molSerials) => {
-  let content = [];
-  let counter = 0;
-
-  products.forEach((p) => {
-    const m = p.molecule;
-    const ea = productEA(p);
-    counter += 1;
-
-    const cas = p.xref && p.xref.cas ? p.xref.cas.value : '- ';
-    const deltaName = settings.Name ? [
-      { insert: 'Name ' },
-      ...prdIdentifier(counter, m, molSerials),
-      { insert: ': ' },
-      deltaSampleMoleculeName(p),
-      { insert: '; ' },
-    ] : [];
-
-    const pFormula = settings.Formula ? `Formula: ${m.sum_formular}; ` : '';
-    const pCAS = settings.CAS ? `CAS: ${cas}; ` : '';
-    const pMMass = settings.MolecularMas
-      ? `Molecular Mass: ${fixDigit(m.molecular_weight, 4)}; ` : '';
-    const pEMass = settings.ExactMass
-      ? `Exact Mass: ${fixDigit(m.exact_molecular_weight, 4)}; ` : '';
-    const pEA = settings.EA ? `EA: ${ea}.` : '';
-
-    const pSmiles = `Smiles: ${m.cano_smiles}`;
-    const pInChI = `InChIKey: ${m.inchikey}`;
-    const dSmiles = settings.Smiles
-      ? [{ insert: pSmiles }, { insert: '\n' }]
-      : [];
-    const dInChI = settings.InChI
-      ? [{ insert: pInChI }, { insert: '\n' }]
-      : [];
-
-    content = [...content, ...deltaName,
-      { insert: pFormula + pCAS + pMMass + pEMass + pEA },
-      { insert: '\n' },
-      ...dSmiles,
-      ...dInChI,
-      { insert: '\n' },
-    ];
-  });
-  return content;
-};
-
-const ProductsInfo = ({ products = [], settings, molSerials }) => {
-  const disableAll = isDisableAll(settings);
-  if (disableAll) return null;
-
-  const content = productContent(products, settings, molSerials);
-  return <QuillViewer value={{ ops: content }} />;
-};
-
-const stAndReContent = (el, prevContent, molSerials) => {
-  let counter = 0;
-  let content = prevContent;
-  [...el.starting_materials, ...el.reactants].forEach((elm) => {
-    counter += 1;
-    content = [...content,
-      { insert: `{${Alphabet(counter)}|` },
-      deltaUserSerial(elm.molecule, molSerials),
-      { insert: '} ' },
-      deltaSampleMoleculeName(elm),
-      { insert: ` (${validDigit(elm.amount_g, 3)} g, ${validDigit(elm.amount_mol * 1000, 3)} mmol, ${validDigit(elm.equivalent, 3)} equiv); ` }];
-  });
-  return { content };
-};
-
-const solventsContent = (el, prevContent) => {
-  let counter = 0;
-  let content = prevContent;
-  el.solvents.forEach((elm) => {
-    counter += 1;
-    content = [...content,
-      { insert: `{S${counter}` },
-      { insert: '} ' },
-      deltaSampleMoleculeName(elm),
-      { insert: ` (${validDigit(elm.amount_l * 1000, 2)} mL); ` }];
-  });
-  return { content };
-};
-
-const porductsContent = (el, prevContent, molSerials) => {
-  let counter = 0;
-  let content = prevContent;
-  content = [...content, { insert: 'Yield: ' }];
-  el.products.forEach((p) => {
-    const mol = p.molecule;
-    counter += 1;
-    content = [...content, ...prdIdentifier(counter, mol, molSerials),
-      { insert: ` = ${validDigit(p.equivalent * 100, 0)}%` },
-      { insert: ` (${validDigit(p.amount_g, 3)} g, ${validDigit(p.amount_mol * 1000, 3)} mmol)` },
-      { insert: '; ' }];
-  });
-  content = content.slice(0, -1);
-  content = [...content, { insert: '.' }];
-  return { content };
-};
-
-const materailsContent = (el, molSerials) => {
-  const content = [];
-  const stAndRe = stAndReContent(el, content, molSerials);
-  const solvCon = solventsContent(el, stAndRe.content);
-  const prodCon = porductsContent(el, solvCon.content, molSerials);
-
-  return prodCon.content;
-};
-
-const tlcContent = (el) => {
-  let content = [];
-  if (el.tlc_solvents) {
-    content = [{ attributes: { italic: 'true' }, insert: 'R' },
-      { attributes: { script: 'sub', italic: 'true' }, insert: 'f' },
-      { insert: ` = ${el.rf_value} (${el.tlc_solvents}).` }];
-  }
-  return content;
-};
-
-const obsvTlcContent = (el) => {
-  let content = [];
-  const ops = el.observation.ops || [];
-  content = [...ops, ...tlcContent(el)];
-  content = rmOpsRedundantSpaceBreak(content);
-  if (onlyBlank(content)) return [];
-  return frontBreak(content);
-};
-
-const rmHeadSpace = (content) => {
-  let els = content;
-  let head = null;
-  els.some((el) => {
-    head = el.insert.replace(/^\s+/, '');
-    if (!head) els = [...els.slice(1)];
-    return head;
-  });
-  if (onlyBlank(els) || !head) return [];
-  els[0].insert = head;
-
-  return els;
-};
-
-const rmTailSpace = (content) => {
-  let els = content;
-  let tail = null;
-  els.reverse().some((el) => {
-    tail = el.insert.replace(/\s*[,.;]*\s*$/, '');
-    if (!tail) els = [...els.slice(1)];
-    return tail;
-  });
-  if (onlyBlank(els) || !tail) return [];
-  els.reverse();
-  els[els.length - 1].insert = tail;
-
-  return els;
-};
-
-const opsTailWithSymbol = (els, symbol) => [...els, { insert: symbol }];
-
-const endingSymbol = (content, symbol) => {
-  if (onlyBlank(content)) return [];
-
-  let els = rmHeadSpace(content);
-  els = rmTailSpace(els);
-
-  if (onlyBlank(els)) return [];
-
-  return opsTailWithSymbol(els, symbol);
-};
-
-const analysesContent = (products) => {
-  let content = [];
-  products.forEach((p) => {
-    let current = [];
-    const sortAnalyses = ArrayUtils.sortArrByIndex(p.analyses);
-    sortAnalyses.forEach((a) => {
-      const data = a && a.extended_metadata
-        && a.extended_metadata.report
-        && a.extended_metadata.report === 'true'
-        ? JSON.parse(a.extended_metadata.content)
-        : { ops: [] };
-      current = [...current, ...endingSymbol(data.ops, '; ')];
-    });
-    if (!onlyBlank(current)) {
-      current = rmOpsRedundantSpaceBreak(current);
-      content = [... content, { insert: '\n\n' }, ...current.slice(0, -1), { insert: '.' }];
-    }
-  });
-  if (onlyBlank(content)) return [];
-  return frontBreak(content);
-};
-
-const dangContent = (el) => {
-  if (el.dangerous_products.length === 0) return [];
-  let content = [{ attributes: { bold: 'true' }, insert: 'Attention! ' },
-    { insert: 'The reaction includes the use of dangerous ' +
-      'chemicals, which have the following ' +
-      'classification: ' }];
-  el.dangerous_products.forEach((d) => {
-    content = [...content, { insert: d }, { insert: ', ' }];
-  });
-  content = content.slice(0, -1);
-  content = rmOpsRedundantSpaceBreak(content);
-  return content;
-};
-
-const DangerBlock = ({ el }) => {
-  const block = dangContent(el);
-  return block.length > 0 ? <QuillViewer value={{ ops: block }} /> : null;
-};
-
-const descContent = (el) => {
-  if (['gp', 'parts'].indexOf(el.role) >= 0) return [];
-  let block = rmOpsRedundantSpaceBreak(el.description.ops);
-  block = [{ insert: '\n' }, ...block];
-  return block;
-};
-
-const synNameContent = (el) => {
-  if (['gp', 'parts'].indexOf(el.role) < 0) return [];
-  const title = el.name || el.short_label;
-  return [{ insert: `${title}: ` }];
-};
-
-const doiContent = (el) => {
-  let block = [];
-  const rdoi = el && el.tag && el.tag.taggable_data && el.tag.taggable_data.publication
-   && el.tag.taggable_data.publication.doi;
-   // prs = el.products || [];
-   // const pdois = prs.map {
-   //
-   // }
-  if (rdoi) {
-    block = [{
-      insert: `\n Additional information on the chemical synthesis is available via Chemotion repository: \n https://doi.org/${rdoi}\n`
-    }];
-  }
-  return block;
-};
-
-const ContentBlock = ({ el, molSerials }) => {
-  const synName = synNameContent(el);
-  const desc = descContent(el);
-  // const materials = materailsContent(el, molSerials);
-  const obsvTlc = obsvTlcContent(el);
-  const analyses = analysesContent(el.products);
-  const dois = doiContent(el);
-  const block = [...synName, ...desc, ...obsvTlc, ...analyses, ...dois];
-  return <QuillViewer value={{ ops: block }} />;
-};
-
-const docFragment = (input) => {
-  const t = document.createElement('template');
-  t.innerHTML = input;
-  try {
-    return t.content.childNodes[0].childNodes[1].childNodes[2].childNodes;
-  } catch (err) {
-    return null;
-  }
-};
-
-const bibContent = (bib, idx) => {
-  let delta = [{ insert: `[${idx + 1}] ` }];
-  const nodes = docFragment(bib);
-  if (!nodes) return [];
-  nodes.forEach((node) => {
-    const text = node.textContent;
-    let target = { insert: text };
-    if (node.nodeName === 'I') {
-      target = { attributes: { italic: 'true' }, insert: text };
-    } else if (node.nodeName === 'B') {
-      target = { attributes: { bold: 'true' }, insert: text };
-    }
-    delta = [...delta, target];
-  });
-  return [...delta, { insert: '\n' }];
-};
-
-const ZoteroBlock = ({ el }) => {
-  const refs = el.references || [];
-  let bibs = [];
-  refs.forEach((ref, idx) => {
-    bibs = [...bibs, ...bibContent(ref.bib, idx)];
-  });
-
-  return bibs.length > 0
-    ? <QuillViewer value={{ ops: bibs }} />
-    : null;
-};
-
-const SynthesisRow = ({ el, counter, configs, molSerials, settings }) => (
-  <div>
-    <Title el={el} counter={counter} molSerials={molSerials} />
-    <SVGContent
-      show
-      svgPath={el.svgPath}
-      products={el.products}
-      isProductOnly={!configs.Showallchemi}
-    />
-    <ProductsInfo
-      products={el.products}
-      settings={settings}
-      molSerials={molSerials}
-    />
-    <ContentBlock el={el} molSerials={molSerials} />
-    <DangerBlock el={el} />
-    <ZoteroBlock el={el} />
-  </div>
-);
-
-const SectionSiSynthesis = ({
-  previewObjs, configs, molSerials, settings,
-}) => {
-  let counter = 0;
-  const contents = previewObjs.map((obj) => {
-    if (obj.type === 'reaction' && obj.role !== 'gp') {
-      counter += 1;
-      return (
-        <SynthesisRow
-          id={obj.id}
-          key={obj.id}
-          el={obj}
-          counter={counter}
-          configs={configs}
-          molSerials={molSerials}
-          settings={settings}
-        />
-      );
-    }
-    return null;
-  }).filter(r => r !== null);
-
-  return (
-    <div>
-      {contents}
-    </div>
-  );
-};
-
-export default SectionSiSynthesis;
diff --git a/app/packs/src/components/report/SectionSpectrum.js b/app/packs/src/components/report/SectionSpectrum.js
deleted file mode 100644
index 182ae9d79..000000000
--- a/app/packs/src/components/report/SectionSpectrum.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-
-const TitleProduct = ({ prd, molSerials }) => {
-  const molId = prd.molId;
-  const serial = molSerials.map((ms) => {
-    if (molId === ms.mol.id) {
-      return ms.value;
-    }
-    return null;
-  }).filter(r => r !== null)[0];
-  const serialContent = serial ? `${serial}` : 'xx';
-
-  return (
-    <h5>
-      [{serialContent}] { prd.showedName }
-    </h5>
-  );
-};
-
-const Thumbnail = ({ thumb }) => {
-  const noAvaSvg = '/images/wild_card/not_available.svg';
-  const thumbImg = `data:image/png;base64,${thumb}`;
-  const previewImg = thumb ? thumbImg : noAvaSvg;
-  return <img src={previewImg} alt="" className="spectrum-thumbnail" />;
-};
-
-const isImg = (att) => {
-  const imgExts = ['jpg', 'jpeg', 'png'];
-  const ext = att.filename.split('.').pop().toLowerCase();
-  const idx = imgExts.indexOf(ext);
-  return idx >= 0;
-};
-
-const ContentAtts = ({ prd, attThumbNails }) => {
-  const contents = prd.atts.map((att, idx) => {
-    if (!isImg(att)) {
-      return null;
-    }
-    const key = `${idx}-${att.identifier}`;
-    const thumb = attThumbNails.map(tn => (
-      tn.id === att.id ? tn.thumbnail : null
-    )).filter(r => r !== null)[0];
-    return (
-      <div key={key}>
-        <div>{att.kind}</div>
-        <Thumbnail thumb={thumb || att.thumbnail} />
-      </div>
-    );
-  });
-
-  return (
-    <div>
-      {contents}
-    </div>
-  );
-};
-
-const RowProduct = ({ prd, molSerials, attThumbNails }) => (
-  <div>
-    <TitleProduct prd={prd} molSerials={molSerials} />
-    <ContentAtts prd={prd} attThumbNails={attThumbNails} />
-  </div>
-);
-
-class SectionSpectrum extends Component {
-  componentDidMount() {
-    this.updateThumbNails();
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const prevProps = this.props;
-    const isChanged = !_.isEqual(prevProps, nextProps);
-    return isChanged;
-  }
-
-  UNSAFE_componentWillUpdate() {
-    this.updateThumbNails();
-  }
-
-  updateThumbNails() {
-    const { prdAtts } = this.props;
-    const attArrIds = prdAtts.map(prdAtt => (
-      prdAtt.atts.map(att => (
-        att.thumbnail ? null : att.id
-      ))
-    ));
-    const attIds = _.flattenDeep(attArrIds).filter(r => r !== null);
-    if (attIds.length > 0) {
-      ReportActions.updateThumbNails(attIds);
-    }
-  }
-
-  renderContents() {
-    const { molSerials, prdAtts, attThumbNails } = this.props;
-
-    const contents = prdAtts.map((prd, idx) => {
-      const key = `${idx}-${prd.sum_formular}`;
-      return (
-        <div key={key}>
-          <RowProduct
-            prd={prd}
-            molSerials={molSerials}
-            attThumbNails={attThumbNails}
-          />
-        </div>
-      );
-    });
-    return contents;
-  }
-
-  render() {
-    return (
-      <div>
-        { this.renderContents() }
-      </div>
-    );
-  }
-}
-
-export default SectionSpectrum;
diff --git a/app/packs/src/components/report/Serials.js b/app/packs/src/components/report/Serials.js
deleted file mode 100644
index ba803158d..000000000
--- a/app/packs/src/components/report/Serials.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Panel } from 'react-bootstrap';
-import Formula from 'src/components/common/Formula';
-import CommonInput from 'src/components/common/CommonInput';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-
-const Serial = ({ serial, counter }) => {
-  if (!serial) return null;
-  const mol = serial.mol;
-  const oddClass = counter % 2 === 1 ? 'order-even' : null;
-  const onCompleteEdit = val => ReportActions.updMSVal(mol.id, val);
-
-  return (
-    <Panel eventKey={counter} key={counter} >
-      <Panel.Body>
-        <div className="report-serial">
-          <div className={`order ${oddClass}`}>{counter + 1}</div>
-          <div className="svg">
-            <SVG src={mol.svgPath} key={mol.svgPath} />
-          </div>
-          <div className="info">
-            <p><Formula formula={mol.sumFormula} /></p>
-            <p>{mol.iupacName}</p>
-          </div>
-          <div className="input">
-            <CommonInput
-              value={serial.value}
-              key={mol.id}
-              placeholder="xx"
-              onCompleteEdit={onCompleteEdit}
-            />
-          </div>
-        </div>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const stdSerials = () => (<h5>Not applicable.</h5>);
-
-const suiSerials = (props) => {
-  const { selMolSerials, template } = props;
-  const contents = selMolSerials.map((molSer, i) => (
-    <Serial id={i} key={`ms-${molSer.mol.id}`} serial={molSer} counter={i} />
-  ));
-
-  return <div className="report-serials">{contents}</div>;
-};
-
-const spcSerials = props => suiSerials(props);
-
-const rxlSerials = props => suiSerials(props);
-
-const doiSerials = props => suiSerials(props);
-
-const Serials = (props) => {
-  switch (props.template.value) {
-    case 'standard':
-      return stdSerials();
-    case 'spectrum':
-      return spcSerials(props);
-    case 'supporting_information':
-    case 'supporting_information_std_rxn':
-      return suiSerials(props);
-    case 'rxn_list_xlsx':
-    case 'rxn_list_csv':
-    case 'rxn_list_html':
-      return rxlSerials(props);
-    case 'doi_list_xlsx':
-      return doiSerials(props);
-    default:
-      return stdSerials();
-  }
-};
-
-export default Serials;
diff --git a/app/packs/src/components/report/Setting.js b/app/packs/src/components/report/Setting.js
deleted file mode 100644
index 96f3b463f..000000000
--- a/app/packs/src/components/report/Setting.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import { Panel } from 'react-bootstrap';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import CheckBoxs from 'src/components/common/CheckBoxs';
-
-const toggleSplSettings = (text, checked) => {
-  ReportActions.updateSplSettings({ text, checked });
-};
-
-const toggleSplSettingsAll = () => {
-  ReportActions.toggleSplSettingsCheckAll();
-};
-
-const toggleRxnSettings = (text, checked) => {
-  ReportActions.updateRxnSettings({ text, checked });
-};
-
-const toggleRxnSettingsAll = () => {
-  ReportActions.toggleRxnSettingsCheckAll();
-};
-
-const stdSetting = ({ splSettings, checkedAllSplSettings, rxnSettings,
-  checkedAllRxnSettings }) => (
-  <div>
-    <Panel bsStyle="default">
-      <Panel.Heading>
-        <Panel.Title>
-          Sample
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
-        <CheckBoxs
-          items={splSettings}
-          toggleCheckbox={toggleSplSettings}
-          toggleCheckAll={toggleSplSettingsAll}
-          checkedAll={checkedAllSplSettings}
-        />
-      </Panel.Body>
-    </Panel>
-    <Panel bsStyle="default">
-      <Panel.Heading>
-        <Panel.Title>
-          Reaction
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
-        <CheckBoxs
-          items={rxnSettings}
-          checkedAll={checkedAllRxnSettings}
-          toggleCheckbox={toggleRxnSettings}
-          toggleCheckAll={toggleRxnSettingsAll}
-        />
-      </Panel.Body>
-    </Panel>
-  </div>
-);
-
-const toggleSiRxnSettings = (text, checked) => {
-  ReportActions.updateSiRxnSettings({ text, checked });
-};
-
-const toggleSiRxnSettingsAll = () => {
-  ReportActions.toggleSiRxnSettingsCheckAll();
-};
-
-const suiSetting = ({ siRxnSettings, checkedAllSiRxnSettings }) => (
-  <div>
-    <Panel bsStyle="default">
-      <Panel.Heading>
-        <Panel.Title>
-          Synthesis Products Information
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
-        <CheckBoxs
-          items={siRxnSettings}
-          checkedAll={checkedAllSiRxnSettings}
-          toggleCheckbox={toggleSiRxnSettings}
-          toggleCheckAll={toggleSiRxnSettingsAll}
-        />
-      </Panel.Body>
-    </Panel>
-  </div>
-);
-
-const spcSetting = () => (
-  <div>
-    <h5>Not applicable.</h5>
-  </div>
-);
-
-const rxlSetting = () => (
-  <div>
-    <h5>Not applicable.</h5>
-  </div>
-);
-
-const Setting = (props) => {
-  switch (props.template.value) {
-    case 'standard':
-      return stdSetting(props);
-    case 'spectrum':
-      return spcSetting();
-    case 'supporting_information':
-    case 'supporting_information_std_rxn':
-      return suiSetting(props);
-    case 'rxn_list_xlsx':
-    case 'rxn_list_csv':
-    case 'rxn_list_html':
-      return rxlSetting(props);
-    case 'doi_list_xlsx':
-      return rxlSetting(props);
-    default:
-      return stdSetting(props);
-  }
-};
-
-export default Setting;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetails.js b/app/packs/src/components/research_plan/ResearchPlanDetails.js
deleted file mode 100644
index a00cf489f..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetails.js
+++ /dev/null
@@ -1,502 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Panel, ListGroup, ListGroupItem, ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem } from 'react-bootstrap';
-import { findIndex } from 'lodash';
-import ElementCollectionLabels from '../ElementCollectionLabels';
-import UIActions from '../actions/UIActions';
-import ElementActions from '../actions/ElementActions';
-import DetailActions from '../actions/DetailActions';
-import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
-import ResearchPlansLiteratures from '../DetailsTabLiteratures';
-import ResearchPlansMetadata from '../DetailsTabMetadata';
-import Attachment from '../models/Attachment';
-import Utils from '../utils/Functions';
-import LoadingActions from '../actions/LoadingActions';
-import ConfirmClose from '../common/ConfirmClose';
-import ResearchPlanDetailsAttachments from './ResearchPlanDetailsAttachments';
-import ResearchPlanDetailsBody from './ResearchPlanDetailsBody';
-import ResearchPlanDetailsName from './ResearchPlanDetailsName';
-import ResearchPlanDetailsContainers from './ResearchPlanDetailsContainers';
-import Immutable from 'immutable';
-import ElementDetailSortTab from '../ElementDetailSortTab';
-import { addSegmentTabs } from '../generic/SegmentDetails';
-import PrivateNoteElement from '../PrivateNoteElement';
-
-export default class ResearchPlanDetails extends Component {
-  constructor(props) {
-    super(props);
-    const { researchPlan } = props;
-    this.state = {
-      researchPlan,
-      update: false,
-      visible: Immutable.List(),
-    };
-    this.handleSwitchMode = this.handleSwitchMode.bind(this);
-    this.handleResearchPlanChange = this.handleResearchPlanChange.bind(this);
-    this.toggleFullScreen = this.toggleFullScreen.bind(this);
-    this.handleNameChange = this.handleNameChange.bind(this);
-    this.handleBodyChange = this.handleBodyChange.bind(this);
-    this.handleBodyAdd = this.handleBodyAdd.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
-    this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { researchPlan } = nextProps;
-    this.setState({ researchPlan });
-  }
-
-  toggleFullScreen() {
-    this.props.toggleFullScreen();
-
-    // toogle update prop to notify react data grid for view change
-    this.setState({ update: !this.state.update });
-  }
-
-  handleResearchPlanChange(el) {
-    const researchPlan = el;
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  handleSegmentsChange(se) {
-    const { researchPlan } = this.state;
-    const { segments } = researchPlan;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
-    if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
-    researchPlan.segments = segments;
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  handleSwitchMode(mode) {
-    const { researchPlan } = this.state;
-    researchPlan.mode = mode;
-    this.setState({ researchPlan });
-  }
-
-  // handle functions
-
-  handleSubmit() {
-    const { researchPlan } = this.state;
-    LoadingActions.start();
-
-    if (researchPlan.isNew) {
-      ElementActions.createResearchPlan(researchPlan);
-    } else {
-      ElementActions.updateResearchPlan(researchPlan);
-    }
-
-    if (researchPlan.is_new) {
-      const force = true;
-      DetailActions.close(researchPlan, force);
-    }
-  }
-
-  handleSelect(eventKey) {
-    UIActions.selectTab({ tabKey: eventKey, type: 'research_plan' });
-    this.setState({
-      activeTab: eventKey
-    });
-  }
-
-  // handle name actions
-
-  handleNameChange(value) {
-    const { researchPlan } = this.state;
-    researchPlan.changed = true;
-    researchPlan.name = value;
-    this.setState({ researchPlan });
-  }
-
-  // handle body actions
-
-  handleBodyChange(value, id) {
-    const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
-    researchPlan.body[index].value = value;
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  handleBodyDrop(source, target) {
-    const { researchPlan } = this.state;
-    researchPlan.body.splice(target, 0, researchPlan.body.splice(source, 1)[0]);
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  handleBodyAdd(type) {
-    const { researchPlan } = this.state;
-    researchPlan.addBodyField(type);
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  handleBodyDelete(id) {
-    const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
-    researchPlan.body.splice(index, 1);
-    researchPlan.changed = true;
-    this.setState({ researchPlan });
-  }
-
-  // handle attachment actions
-
-  handleAttachmentDrop(files) {
-    const { researchPlan } = this.state;
-    researchPlan.changed = true;
-    files.map((file) => {
-      const attachment = Attachment.fromFile(file);
-      researchPlan.attachments.push(attachment);
-    });
-    this.setState({ researchPlan });
-  }
-
-  handleAttachmentDelete(attachment) {
-    const { researchPlan } = this.state;
-    const index = researchPlan.attachments.indexOf(attachment);
-    researchPlan.changed = true;
-    researchPlan.attachments[index].is_deleted = true;
-    this.setState({ researchPlan });
-  }
-
-  handleAttachmentUndoDelete(attachment) {
-    const { researchPlan } = this.state;
-    const index = researchPlan.attachments.indexOf(attachment);
-    researchPlan.attachments[index].is_deleted = false;
-    this.setState({ researchPlan });
-  }
-
-  handleAttachmentDownload(attachment) {
-    Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
-  }
-
-  handleAttachmentEdit(attachment) {
-    const { researchPlan } = this.state;
-
-    // update only this attachment
-    researchPlan.attachments.map((currentAttachment) => {
-      if (currentAttachment.id === attachment.id) return attachment;
-    });
-    this.setState({ researchPlan });
-    this.forceUpdate();
-  }
-
-  handleExport(exportFormat) {
-    const { researchPlan } = this.state;
-    ResearchPlansFetcher.export(researchPlan, exportFormat);
-  }
-
-  handleExportField(field) {
-    const { researchPlan } = this.props;
-    ResearchPlansFetcher.exportTable(researchPlan, field);
-  }
-
-  newItemByType(fieldName, value, type) {
-    switch (fieldName) {
-      case 'description':
-        return {
-          description: value,
-          descriptionType: type
-        }
-      case 'alternate_identifier':
-        return {
-          alternateIdentifier: value,
-          alternateIdentifierType: type
-        }
-      case 'related_identifier':
-        return {
-          relatedIdentifier: value,
-          relatedIdentifierType: type
-        }
-      }
-  }
-
-  handleCopyToMetadata(id, fieldName) {
-    const { researchPlan } = this.state;
-    const researchPlanMetadata = researchPlan.research_plan_metadata;
-    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
-    const index = researchPlan.body.findIndex(field => field.id === id);
-    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || ''
-    if (fieldName === 'name') {
-      researchPlanMetadata.title = researchPlan.name;
-      args.title = researchPlan.name.trim();
-    } else if (fieldName === 'subject') {
-      researchPlanMetadata.subject = value;
-      args.subject = value;
-    } else {
-      const type = researchPlan.body[index]?.title?.trim() || ''
-      const newItem = this.newItemByType(fieldName, value, type)
-
-      const currentCollection = researchPlanMetadata[fieldName] ? researchPlanMetadata[fieldName] : []
-      const newCollection = currentCollection.concat(newItem)
-      researchPlanMetadata[fieldName] = newCollection
-      args[`${fieldName}`] = researchPlanMetadata[fieldName]
-    }
-
-    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      }
-    });
-  }
-
-  // render functions
-
-  renderExportButton(disabled) {
-    return (
-      <Dropdown
-        id="research-plan-export-dropdown"
-        className="research-plan-export-dropdown dropdown-right pull-right"
-        disabled={disabled}
-      >
-        <Dropdown.Toggle>
-          Export
-        </Dropdown.Toggle>
-        <Dropdown.Menu>
-          <MenuItem onSelect={() => this.handleExport('docx')}>
-            as .docx
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('odt')}>
-            as .odt
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('html')}>
-            as HTML
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('markdown')}>
-            as Markdown
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('latex')}>
-            as LaTeX
-          </MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  }
-
-  renderResearchPlanMain(researchPlan, update) {
-    return researchPlan.mode === 'edit' ? this.renderPropertiesTab(researchPlan, update) :
-      this.renderResearchPlanTab(researchPlan, update);
-  }
-
-  renderResearchPlanTab(researchPlan, update) {
-    const { name, body, changed } = researchPlan;
-    return (
-      <ListGroup fill="true">
-        <ListGroupItem >
-          {this.renderExportButton(changed)}
-          <ResearchPlanDetailsName
-            value={name}
-            disabled={researchPlan.isMethodDisabled('name')}
-            onChange={this.handleNameChange}
-            edit={false}
-          />
-          <ResearchPlanDetailsBody
-            body={body}
-            disabled={researchPlan.isMethodDisabled('body')}
-            onChange={this.handleBodyChange}
-            onDrop={this.handleBodyDrop.bind(this)}
-            onAdd={this.handleBodyAdd}
-            onDelete={this.handleBodyDelete.bind(this)}
-            onExport={this.handleExportField.bind(this)}
-            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
-            update={update}
-            edit={false}
-          />
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-
-  renderPropertiesTab(researchPlan, update) {
-    const { name, body } = researchPlan;
-    return (
-      <ListGroup fill="true">
-        <ListGroupItem >
-          <ResearchPlanDetailsName
-            value={name}
-            isNew={researchPlan.isNew}
-            disabled={researchPlan.isMethodDisabled('name')}
-            onChange={this.handleNameChange}
-            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
-            edit
-          />
-          <ResearchPlanDetailsBody
-            body={body}
-            disabled={researchPlan.isMethodDisabled('body')}
-            onChange={this.handleBodyChange.bind(this)}
-            onDrop={this.handleBodyDrop.bind(this)}
-            onAdd={this.handleBodyAdd}
-            onDelete={this.handleBodyDelete.bind(this)}
-            onExport={this.handleExportField.bind(this)}
-            onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
-            isNew={researchPlan.isNew}
-            copyableFields={[
-              { title: 'Subject', fieldName: 'subject' },
-              { title: 'Alternate Identifier', fieldName: 'alternate_identifier' },
-              { title: 'Related Identifier', fieldName: 'related_identifier' },
-              { title: 'Description', fieldName: 'description' }
-            ]}
-            update={update}
-            edit
-          />
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-
-  renderAnalysesTab(researchPlan) {
-    return (
-      <ListGroup fill="true">
-        <ListGroupItem>
-          <ResearchPlanDetailsContainers
-            handleSubmit={this.handleSubmit}
-            researchPlan={researchPlan}
-            readOnly={false}
-            parent={this}
-          />
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-
-  renderAttachmentsTab(researchPlan) {
-    const { attachments } = researchPlan;
-    return (
-      <ListGroup fill="true">
-        <ListGroupItem >
-          <ResearchPlanDetailsAttachments
-            attachments={attachments}
-            onDrop={this.handleAttachmentDrop.bind(this)}
-            onDelete={this.handleAttachmentDelete.bind(this)}
-            onUndoDelete={this.handleAttachmentUndoDelete.bind(this)}
-            onDownload={this.handleAttachmentDownload.bind(this)}
-            onEdit={this.handleAttachmentEdit.bind(this)}
-            readOnly={false}
-          />
-        </ListGroupItem>
-      </ListGroup>
-    );
-  }
-
-  renderPanelHeading(researchPlan) {
-    const titleTooltip = `Created at: ${researchPlan.created_at} \n Updated at: ${researchPlan.updated_at}`;
-
-    return (
-      <Panel.Heading>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
-          <span>
-            <i className="fa fa-file-text-o" />
-            &nbsp; <span>{researchPlan.name}</span> &nbsp;
-          </span>
-        </OverlayTrigger>
-        <ElementCollectionLabels element={researchPlan} placement="right" />
-        <ConfirmClose el={researchPlan} />
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveresearch_plan">Save Research Plan</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: (researchPlan.changed || false) ? '' : 'none' }}>
-            <i className="fa fa-floppy-o" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">Fullresearch_plan</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={this.toggleFullScreen}>
-            <i className="fa fa-expand" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-      </Panel.Heading>
-    );
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
-  render() {
-    const { researchPlan, update, visible } = this.state;
-
-    let btnMode = <Button bsSize="xs" bsStyle="success" onClick={() => this.handleSwitchMode('edit')}>click to edit</Button>;
-    if (researchPlan.mode !== 'view') {
-      btnMode = <Button bsSize="xs" bsStyle="info" onClick={() => this.handleSwitchMode('view')}>click to view</Button>;
-    }
-
-    const tabContentsMap = {
-      research_plan: (
-        <Tab eventKey="research_plan" title="Research plan" key={`rp_${researchPlan.id}`}>
-          <div style={{ margin: '5px 0px 5px 5px' }}>
-            {btnMode}
-          </div>
-          {this.renderResearchPlanMain(researchPlan, update)}
-          <PrivateNoteElement element={researchPlan} disabled={researchPlan.can_update} />
-        </Tab>
-      ),
-      analyses: (
-        <Tab eventKey="analyses" title="Analyses" key={`analyses_${researchPlan.id}`}>
-          {this.renderAnalysesTab(researchPlan)}
-        </Tab>
-      ),
-      attachments: (
-        <Tab eventKey="attachments" title="Attachments" key={`attachments_${researchPlan.id}`}>
-          {this.renderAttachmentsTab(researchPlan)}
-        </Tab>
-      ),
-      references: (
-        <Tab eventKey="references" title="References" key={`lit_${researchPlan.id}`}>
-          <ResearchPlansLiteratures element={researchPlan} />
-        </Tab>
-      ),
-      metadata: (
-        <Tab eventKey={4} title="Metadata" disabled={researchPlan.isNew} key={`metadata_${researchPlan.id}`}>
-          <ResearchPlansMetadata
-            parentResearchPlan={researchPlan}
-            parentResearchPlanMetadata={researchPlan.research_plan_metadata}
-          />
-        </Tab>
-      ),
-    };
-
-    const tabTitlesMap = {
-      research_plan: 'Research Plan',
-      analyses: 'Analyses',
-      attachments: 'Attachments',
-      references: 'References',
-      metadata: 'Metadata',
-    };
-    addSegmentTabs(researchPlan, this.handleSegmentsChange, tabContentsMap);
-
-    const tabContents = [];
-    visible.forEach((value) => {
-      const tabContent = tabContentsMap[value];
-      if (tabContent) { tabContents.push(tabContent); }
-    });
-    const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
-
-    return (
-      <Panel bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail research-plan-details">
-        {this.renderPanelHeading(researchPlan)}
-        <Panel.Body>
-          <ElementDetailSortTab
-            type="research_plan"
-            availableTabs={Object.keys(tabContentsMap)}
-            tabTitles={tabTitlesMap}
-            onTabPositionChanged={this.onTabPositionChanged}
-          />
-          <Tabs activeKey={activeTab} onSelect={key => this.handleSelect(key)} id="screen-detail-tab">
-            {tabContents}
-          </Tabs>
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(researchPlan)}>Close</Button>
-            {
-              researchPlan.changed ? <Button bsStyle="warning" onClick={() => this.handleSubmit()}>{researchPlan.isNew ? 'Create' : 'Save'}</Button> : <div />
-            }
-          </ButtonToolbar>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-ResearchPlanDetails.propTypes = {
-  researchPlan: PropTypes.object.isRequired,
-  toggleFullScreen: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js b/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
deleted file mode 100644
index a028d8a0a..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsAddField.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
-
-const buttonObjects = [
-  { label: 'Add Text Editor', type: 'richtext', icon: 'fa fa-file-text-o' },
-  { label: 'Add Table Editor', type: 'table', icon: 'fa fa-table' },
-  { label: 'Add Ketcher Editor', type: 'ketcher', icon: 'fa fa-pencil-square-o' },
-  { label: 'Add Image', type: 'image', icon: 'fa fa-picture-o' },
-  { label: 'Add Sample', type: 'sample', icon: 'icon-sample' },
-  { label: 'Add Reaction', type: 'reaction', icon: 'icon-reaction' },
-];
-
-// eslint-disable-next-line react/prefer-stateless-function
-export default class ResearchPlanDetailsAddField extends Component {
-  render() {
-    const { onAdd } = this.props;
-    return (
-      <span className="research-plan-field-drop-add-field">
-        <ButtonGroup bsSize="xsmall">
-          {
-            buttonObjects.map(button => (
-              <OverlayTrigger key={uuid.v4()} placement="top" overlay={<Tooltip id={`rp_tooptip_${button.type}`}>{button.label}</Tooltip>}>
-                <Button onClick={() => onAdd(button.type)} data-cy={`btn_${button.type}`}>
-                  <i className={button.icon} aria-hidden="true" />&nbsp;<i className="fa fa-plus" aria-hidden="true" />
-                </Button>
-              </OverlayTrigger>
-            ))
-          }
-        </ButtonGroup>
-      </span>
-    );
-  }
-}
-
-ResearchPlanDetailsAddField.propTypes = {
-  onAdd: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js b/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
deleted file mode 100644
index 48ef0fc50..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsAttachments.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import { FormGroup, Button, Row, Col, Tooltip, ControlLabel, ListGroup, ListGroupItem, OverlayTrigger } from 'react-bootstrap';
-import { last, findKey, values } from 'lodash';
-import EditorFetcher from '../fetchers/EditorFetcher';
-import ImageModal from '../common/ImageModal';
-import SpinnerPencilIcon from '../common/SpinnerPencilIcon';
-import { previewAttachmentImage } from './../utils/imageHelper';
-
-const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
-const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
-const imageStyle = { position: 'absolute', width: 60, height: 60 };
-
-export default class ResearchPlanDetailsAttachments extends Component {
-  constructor(props) {
-    super(props);
-    const {
-      attachments, onDrop, onDelete, onUndoDelete, onDownload, onEdit
-    } = props;
-    this.state = {
-      onDrop,
-      onDelete,
-      onUndoDelete,
-      onDownload,
-      onEdit,
-      attachmentEditor: false,
-      extension: null,
-    };
-    this.editorInitial = this.editorInitial.bind(this);
-  }
-
-  componentDidMount() {
-    this.editorInitial();
-  }
-
-  editorInitial() {
-    EditorFetcher.initial()
-      .then((result) => {
-        this.setState({
-          attachmentEditor: result.installed,
-          extension: result.ext
-        });
-      });
-  }
-
-  documentType(filename) {
-    const { extension } = this.state;
-
-    const ext = last(filename.split('.'));
-    const docType = findKey(extension, o => o.includes(ext));
-
-    if (typeof (docType) === 'undefined' || !docType) {
-      return null;
-    }
-
-    return docType;
-  }
-
-  handleEdit(attachment) {
-    const { onEdit } = this.state;
-    const fileType = last(attachment.filename.split('.'));
-    const docType = this.documentType(attachment.filename);
-
-    EditorFetcher.startEditing({ attachment_id: attachment.id })
-      .then((result) => {
-        if (result.token) {
-          const url = `/editor?id=${attachment.id}&docType=${docType}&fileType=${fileType}&title=${attachment.filename}&key=${result.token}`;
-          window.open(url, '_blank');
-
-          attachment.aasm_state = 'oo_editing';
-          attachment.updated_at = new Date();
-
-          onEdit(attachment);
-        } else {
-          alert('Unauthorized to edit this file.');
-        }
-      });
-  }
-
-  renderRemoveAttachmentButton(attachment) {
-    const { onDelete } = this.state;
-
-    return (
-      <Button bsSize="xsmall" bsStyle="danger" className="button-right" onClick={() => onDelete(attachment)} disabled={this.props.readOnly}>
-        <i className="fa fa-trash-o" aria-hidden="true" />
-      </Button>
-    );
-  }
-
-  renderListGroupItem(attachment) {
-    const {
-      attachmentEditor, extension, onUndoDelete, onDownload
-    } = this.state;
-
-    const updateTime = new Date(attachment.updated_at);
-    updateTime.setTime(updateTime.getTime() + (15 * 60 * 1000));
-
-    const hasPop = false;
-    const fetchNeeded = false;
-    const fetchId = attachment.id;
-
-    const previewImg = previewAttachmentImage(attachment);
-    const isEditing = attachment.aasm_state === 'oo_editing' && new Date().getTime() < updateTime;
-
-    const docType = this.documentType(attachment.filename);
-    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
-    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
-
-    if (attachment.is_deleted) {
-      return (
-        <div>
-          <Row>
-            <Col md={1} />
-            <Col md={9}>
-              <strike>{attachment.filename}</strike>
-            </Col>
-            <Col md={2}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="danger"
-                className="button-right"
-                onClick={() => onUndoDelete(attachment)}
-              >
-                <i className="fa fa-undo" aria-hidden="true" />
-              </Button>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <Row>
-          <Col md={1}>
-            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
-              <div className="preview" style={{ width: '60px', height: '60px' }} >
-                <ImageModal
-                  imageStyle={imageStyle}
-                  hasPop={hasPop}
-                  previewObject={{
-                    src: previewImg
-                  }}
-                  popObject={{
-                    title: attachment.filename,
-                    src: previewImg,
-                    fetchNeeded,
-                    fetchId
-                  }}
-                />
-              </div>
-            </div>
-          </Col>
-          <Col md={9}>
-            {attachment.filename}
-          </Col>
-          <Col md={2}>
-            {this.renderRemoveAttachmentButton(attachment)}
-            <OverlayTrigger placement="top" overlay={downloadTooltip} >
-              <Button
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="primary"
-                onClick={() => onDownload(attachment)}
-              >
-                <i className="fa fa-download" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-            <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))} >
-              <Button
-                style={{ display: styleEditorBtn }}
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="success"
-                disabled={editDisable}
-                onClick={() => this.handleEdit(attachment)}
-              >
-                <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
-              </Button>
-            </OverlayTrigger>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-
-  renderAttachments() {
-    const { attachments } = this.props;
-    if (attachments && attachments.length > 0) {
-      return (
-        <ListGroup>
-          {attachments.map(attachment => (
-            <ListGroupItem key={attachment.id}>
-              {this.renderListGroupItem(attachment)}
-            </ListGroupItem>
-            ))}
-        </ListGroup>
-      );
-    }
-    return (
-      <div>
-        There are currently no Datasets.<br />
-      </div>
-    );
-  }
-
-  renderDropzone() {
-    const { onDrop } = this.state;
-
-    return (
-      <div className={`research-plan-dropzone-${this.props.readOnly ? 'disable' : 'enable'}`}>
-        <Dropzone
-          onDrop={files => onDrop(files)}
-          className="zone"
-        >
-          Drop Files, or Click to Select.
-        </Dropzone>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Files</ControlLabel>
-            {this.renderAttachments()}
-            {this.renderDropzone()}
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-ResearchPlanDetailsAttachments.propTypes = {
-  attachments: PropTypes.array,
-  onDrop: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onUndoDelete: PropTypes.func.isRequired,
-  onDownload: PropTypes.func.isRequired,
-  onEdit: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool.isRequired
-};
-
-ResearchPlanDetailsAttachments.defaultProps = {
-  attachments: []
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js b/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
deleted file mode 100644
index cc907166a..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsBody.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ControlLabel, Row, Col } from 'react-bootstrap';
-import ResearchPlanDetailsAddField from './ResearchPlanDetailsAddField';
-import ResearchPlanDetailsDropTarget from './ResearchPlanDetailsDropTarget';
-import Field from './ResearchPlanDetailsField';
-
-// eslint-disable-next-line react/prefer-stateless-function
-export default class ResearchPlanDetailsBody extends Component {
-  render() {
-    const {
-      body, disabled, onChange, onDrop, onAdd, onDelete, onExport, update, edit, isNew,
-      copyableFields, onCopyToMetadata
-    } = this.props;
-
-    let tableIndex = 0;
-    const fields = body.map((field, index) => {
-      const item = (<Field
-        key={field.id}
-        field={field}
-        index={index}
-        disabled={disabled}
-        onChange={onChange.bind(this)}
-        onDrop={onDrop.bind(this)}
-        onDelete={onDelete.bind(this)}
-        onExport={onExport.bind(this)}
-        onCopyToMetadata={onCopyToMetadata.bind(this)}
-        update={update}
-        edit={edit}
-        tableIndex={tableIndex}
-        isNew={isNew}
-        copyableFields={copyableFields}
-      />);
-
-      if (field.type === 'table') tableIndex++;
-
-      return item;
-    });
-
-    let className = 'research-plan-body';
-    let bodyFooter;
-    if (edit) {
-      bodyFooter = (
-        <Row>
-          <Col md={12}>
-            <ResearchPlanDetailsDropTarget index={fields.length} />
-            <div>
-              <ControlLabel>Add field</ControlLabel>
-              <div>
-                <ResearchPlanDetailsAddField onAdd={onAdd} />
-              </div>
-            </div>
-          </Col>
-        </Row>
-      );
-    } else {
-      className += ' static';
-    }
-
-    return (
-      <div className={className}>
-        {fields}
-        {bodyFooter}
-      </div>
-    );
-  }
-}
-
-ResearchPlanDetailsBody.propTypes = {
-  body: PropTypes.array,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  onDrop: PropTypes.func,
-  onDelete: PropTypes.func,
-  onExport: PropTypes.func,
-  onCopyToMetadata: PropTypes.func,
-  update: PropTypes.bool,
-  edit: PropTypes.bool,
-  isNew: PropTypes.bool,
-  copyableFields: PropTypes.arrayOf(PropTypes.object)
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js b/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
deleted file mode 100644
index 926760e31..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsContainers.js
+++ /dev/null
@@ -1,434 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { PanelGroup, Panel, Tooltip, Button, OverlayTrigger, SplitButton, ButtonGroup, MenuItem } from 'react-bootstrap';
-import Container from 'src/models/Container';
-import ContainerComponent from 'src/components/container/ContainerComponent';
-import QuillViewer from 'src/components/QuillViewer';
-import ImageModal from 'src/components/common/ImageModal';
-import { instrumentText } from 'src/utilities/ElementUtils';
-import { previewContainerImage } from 'src/utilities/imageHelper';
-import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import SpectraActions from 'src/stores/alt/actions/SpectraActions';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
-import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
-
-import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
-
-import TextTemplateActions from '../actions/TextTemplateActions';
-
-const SpectraEditorBtn = ({
-  element, spcInfos, hasJcamp, hasChemSpectra,
-  toggleSpectraModal, confirmRegenerate,
-  toggleNMRDisplayerModal, hasNMRium,
-}) => (
-  <span>
-  <OverlayTrigger
-    placement="bottom"
-    delayShow={500}
-    overlay={<Tooltip id="spectra">Spectra Editor {spcInfos.length > 0 ? '' : ': Reprocess'}</Tooltip>}
-  >{spcInfos.length > 0 ? (
-    <ButtonGroup className="button-right">
-      <SplitButton
-        id="spectra-editor-split-button"
-        pullRight
-        bsStyle="info"
-        bsSize="xsmall"
-        title={<i className="fa fa-area-chart" />}
-        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-        onClick={toggleSpectraModal}
-        disabled={!(spcInfos.length > 0) || !hasChemSpectra}
-      >
-        <MenuItem
-            id="regenerate-spectra"
-            key="regenerate-spectra"
-            onSelect={(eventKey, event) => {
-              event.stopPropagation();
-              confirmRegenerate(event);
-            }}
-            disabled={!hasJcamp || !element.can_update}
-          >
-            <i className="fa fa-refresh" /> Reprocess
-          </MenuItem>
-        </SplitButton>
-      </ButtonGroup>
-      ) : (
-        <Button
-          bsStyle="warning"
-          bsSize="xsmall"
-          className="button-right"
-          onClick={confirmRegenerate}
-          disabled={!hasJcamp || !element.can_update || !hasChemSpectra}
-        >
-          <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
-      </Button>
-    )}
-    </OverlayTrigger>
-    {
-      hasNMRium ? (
-        <OverlayTrigger
-          placement="top"
-          delayShow={500}
-          overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
-        >
-          <ButtonGroup className="button-right">
-            <Button
-              id="spectra-editor-split-button"
-              pullRight
-              bsStyle="info"
-              bsSize="xsmall"
-              onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-              onClick={toggleNMRDisplayerModal}
-              disabled={!hasJcamp}
-            >
-              <i className="fa fa-bar-chart"/>
-            </Button>
-          </ButtonGroup>
-        </OverlayTrigger>
-      ) : null
-    }
-  </span>
-);
-
-
-SpectraEditorBtn.propTypes = {
-  element: PropTypes.object,
-  hasJcamp: PropTypes.bool,
-  spcInfos: PropTypes.array,
-  hasChemSpectra: PropTypes.bool,
-  toggleSpectraModal: PropTypes.func.isRequired,
-  confirmRegenerate: PropTypes.func.isRequired,
-  toggleNMRDisplayerModal: PropTypes.func.isRequired,
-  hasNMRium: PropTypes.bool,
-};
-
-SpectraEditorBtn.defaultProps = {
-  hasJcamp: false,
-  spcInfos: PropTypes.array,
-  element: {},
-  hasChemSpectra: false,
-  hasNMRium: false,
-};
-
-export default class ResearchPlanDetailsContainers extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeContainer: 0
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSpChange = this.handleSpChange.bind(this);
-    this.handleAdd = this.handleAdd.bind(this);
-    this.handleRemove = this.handleRemove.bind(this);
-    this.handleUndo = this.handleUndo.bind(this);
-    this.handleAccordionOpen = this.handleAccordionOpen.bind(this);
-  }
-
-  componentDidMount() {
-    TextTemplateActions.fetchTextTemplates('researchPlan');
-  }
-
-  handleChange() {
-    const { researchPlan } = this.props;
-    this.props.parent.handleResearchPlanChange(researchPlan);
-  }
-
-  handleSpChange(researchPlan, cb) {
-    this.props.parent.handleResearchPlanChange(researchPlan);
-    cb();
-  }
-
-  handleAccordionOpen(key) {
-    this.setState({ activeContainer: key });
-  }
-
-  handleRemove(container) {
-    const { researchPlan } = this.props;
-    container.is_deleted = true;
-    this.props.parent.handleResearchPlanChange(researchPlan);
-  }
-
-  handleUndo(container) {
-    const { researchPlan } = this.props;
-    container.is_deleted = false;
-    this.props.parent.handleResearchPlanChange(researchPlan);
-  }
-
-  handleAdd() {
-    const { researchPlan } = this.props;
-    const container = Container.buildEmpty();
-    container.container_type = 'analysis';
-    container.extended_metadata.content = { ops: [{ insert: '' }] };
-
-    if (researchPlan.container.children.length === 0) {
-      const analyses = Container.buildEmpty();
-      analyses.container_type = 'analyses';
-      researchPlan.container.children.push(analyses);
-    }
-
-    researchPlan.container.children.filter(element => (
-      ~element.container_type.indexOf('analyses')
-    ))[0].children.push(container);
-
-    const newKey = researchPlan.container.children.filter(element => (
-      ~element.container_type.indexOf('analyses')
-    ))[0].children.length - 1;
-
-    this.handleAccordionOpen(newKey);
-    this.props.parent.handleResearchPlanChange(researchPlan);
-  }
-
-  headerBtnGroup(container, readOnly) {
-    const { researchPlan } = this.props;
-    const jcampIds = JcampIds(container);
-    const hasJcamp = jcampIds.orig.length > 0;
-    const confirmRegenerate = (e) => {
-      e.stopPropagation();
-      if (confirm('Regenerate spectra?')) {
-        LoadingActions.start();
-        SpectraActions.Regenerate(jcampIds, this.handleChange);
-      }
-    };
-    const spcInfos = BuildSpcInfos(researchPlan, container);
-    const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
-    const toggleSpectraModal = (e) => {
-      e.stopPropagation();
-      SpectraActions.ToggleModal();
-      SpectraActions.LoadSpectra.defer(spcInfos);
-    };
-
-    //process open NMRium
-    const toggleNMRDisplayerModal = (e) => {
-      const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(researchPlan, container);
-      e.stopPropagation();
-      SpectraActions.ToggleModalNMRDisplayer();
-      SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
-    }
-
-    const { chmos } = UserStore.getState();
-    const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
-
-    return (
-      <div className="upper-btn">
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          className="button-right"
-          disabled={readOnly}
-          onClick={() => this.handleRemove(container)}
-        >
-          <i className="fa fa-trash" />
-        </Button>
-        <SpectraEditorBtn
-          element={researchPlan}
-          hasJcamp={hasJcamp}
-          spcInfos={spcInfos}
-          hasChemSpectra={hasChemSpectra}
-          toggleSpectraModal={toggleSpectraModal}
-          confirmRegenerate={confirmRegenerate}
-          toggleNMRDisplayerModal={toggleNMRDisplayerModal}
-          hasNMRium={hasNMRium}
-        />
-      </div>
-    );
-  }
-
-  addButton() {
-    const { readOnly } = this.props;
-    if (!readOnly) {
-      return (
-        <Button
-          className="button-right"
-          bsSize="xsmall"
-          bsStyle="success"
-          onClick={this.handleAdd}
-        >
-          Add analysis
-        </Button>
-      );
-    }
-
-    return (<span />);
-  }
-
-  render() {
-    const { researchPlan, readOnly } = this.props;
-    const { activeContainer } = this.state;
-
-    const containerHeader = (container) => {
-      let kind = container.extended_metadata.kind || '';
-      kind = (kind.split('|')[1] || kind).trim();
-      const insText = instrumentText(container);
-      const previewImg = previewContainerImage(container);
-      const status = container.extended_metadata.status || '';
-      const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
-      const contentOneLine = {
-        ops: content.ops.map((x) => {
-          const c = Object.assign({}, x);
-          if (c.insert) c.insert = c.insert.replace(/\n/g, ' ');
-          return c;
-        }),
-      };
-      let hasPop = true;
-      let fetchNeeded = false;
-      let fetchId = 0;
-      if (previewImg.startsWith('data:image')) {
-        fetchNeeded = true;
-        fetchId = container.preview_img.id;
-      } else {
-        hasPop = false;
-      }
-
-      return (
-        <div className="analysis-header order" style={{ width: '100%' }}>
-          <div className="preview">
-            <ImageModal
-              hasPop={hasPop}
-              previewObject={{
-                src: previewImg
-              }}
-              popObject={{
-                title: container.name,
-                src: previewImg,
-                fetchNeeded,
-                fetchId
-              }}
-            />
-          </div>
-          <div className="abstract">
-            {
-              this.headerBtnGroup(container, readOnly)
-            }
-            <div className="lower-text">
-              <div className="main-title">{container.name}</div>
-              <div className="sub-title">Type: {kind}</div>
-              <div className="sub-title">Status: {status} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {insText}</div>
-
-              <div className="desc sub-title">
-                <span style={{ float: 'left', marginRight: '5px' }}>
-                  Content:
-                </span>
-                <QuillViewer value={contentOneLine} preview />
-              </div>
-
-            </div>
-          </div>
-        </div>
-      );
-    };
-
-    const containerHeaderDeleted = (container) => {
-      const kind = container.extended_metadata.kind && container.extended_metadata.kind !== '';
-      const titleKind = kind ? (` - Type: ${(container.extended_metadata.kind.split('|')[1] || container.extended_metadata.kind).trim()}`) : '';
-
-      const status = container.extended_metadata.status && container.extended_metadata.status !== '';
-      const titleStatus = status ? (` - Status: ${container.extended_metadata.status}`) : '';
-
-      return (
-        <div style={{ width: '100%' }}>
-          <strike>
-            {container.name}
-            {titleKind}
-            {titleStatus}
-          </strike>
-          <Button
-            className="pull-right"
-            bsSize="xsmall"
-            bsStyle="danger"
-            onClick={() => this.handleUndo(container)}
-          >
-            <i className="fa fa-undo" />
-          </Button>
-        </div>
-      );
-    };
-
-    if (researchPlan.container != null && researchPlan.container.children) {
-      const analysesContainer = researchPlan.container.children.filter(element => (
-        ~element.container_type.indexOf('analyses')
-      ));
-
-      if (analysesContainer.length === 1 && analysesContainer[0].children.length > 0) {
-        return (
-          <div>
-            <div style={{ marginBottom: '10px' }}>
-              &nbsp;{this.addButton()}
-            </div>
-            <PanelGroup id="research_plan-analyses-panel" defaultActiveKey={0} activeKey={activeContainer} onSelect={this.handleAccordionOpen} accordion>
-              {analysesContainer[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Panel
-                      eventKey={key}
-                      key={`research_plan_container_deleted_${container.id}`}
-                    >
-                      <Panel.Heading>{containerHeaderDeleted(container)}</Panel.Heading>
-                    </Panel>
-                  );
-                }
-
-                return (
-                  <Panel
-                    eventKey={key}
-                    key={`research_plan_container_${container.id}`}
-                  >
-                    <Panel.Heading>
-                      <Panel.Title toggle>
-                        {containerHeader(container)}
-                      </Panel.Title>
-                    </Panel.Heading>
-                    <Panel.Body collapsible>
-                      <ContainerComponent
-                        templateType="researchPlan"
-                        readOnly={readOnly}
-                        disabled={readOnly}
-                        container={container}
-                        onChange={this.handleChange}
-                      />
-                      <ViewSpectra
-                        sample={this.props.researchPlan}
-                        handleSampleChanged={this.handleSpChange}
-                        handleSubmit={this.props.handleSubmit}
-                      />
-                      <NMRiumDisplayer
-                        sample={this.props.researchPlan}
-                        handleSampleChanged={this.handleSpChange}
-                        handleSubmit={this.props.handleSubmit}
-                      />
-                    </Panel.Body>
-                  </Panel>
-                );
-              })}
-            </PanelGroup>
-          </div>
-        );
-      }
-
-      return (
-        <div
-          style={{ marginBottom: '10px' }}
-          className="noAnalyses-warning"
-        >
-          There are currently no Analyses.
-          {this.addButton()}
-        </div>
-      );
-    }
-
-    return (
-      <div className="noAnalyses-warning">
-        There are currently no Analyses.
-      </div>
-    );
-  }
-}
-
-ResearchPlanDetailsContainers.propTypes = {
-  researchPlan: PropTypes.object.isRequired,
-  readOnly: PropTypes.bool.isRequired,
-  parent: PropTypes.object.isRequired,
-  handleSubmit: PropTypes.func
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js b/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
deleted file mode 100644
index 8cb35055a..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsDragSource.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-
-const spec = {
-  beginDrag(props) {
-    return {
-      index: props.index
-    };
-  },
-  endDrag(props, monitor) {
-    const target = monitor.getDropResult();
-    if (target) {
-      props.onDrop(props.index, target.index);
-    }
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-class ResearchPlanDetailsDragSource extends Component {
-  render() {
-    const { connectDragSource, index } = this.props;
-
-    return connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
-  }
-}
-
-export default
-DragSource(DragDropItemTypes.RESEARCH_PLAN_FIELD, spec, collect)(ResearchPlanDetailsDragSource);
-
-ResearchPlanDetailsDragSource.propTypes = {
-  index: PropTypes.number,
-  onChange: PropTypes.func,
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js b/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
deleted file mode 100644
index 2c83e940b..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsDropTarget.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from 'src/components/DragDropItemTypes';
-
-const spec = {
-  drop(props) {
-    return {
-      index: props.index
-    };
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-
-class ResearchPlanDetailsDropTarget extends Component {
-  render() {
-    const {
-      index, connectDropTarget, isOver, canDrop
-    } = this.props;
-
-    let className = 'research-plan-field-drop-target';
-
-    if (isOver) {
-      className += ' is-over';
-    }
-    if (canDrop) {
-      className += ' can-drop';
-    }
-
-    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
-  }
-}
-
-export default
-DropTarget(DragDropItemTypes.RESEARCH_PLAN_FIELD, spec, collect)(ResearchPlanDetailsDropTarget);
-
-ResearchPlanDetailsDropTarget.propTypes = {
-  index: PropTypes.number
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsField.js b/app/packs/src/components/research_plan/ResearchPlanDetailsField.js
deleted file mode 100644
index f63bb6668..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsField.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Row, Col, ControlLabel, Tooltip, OverlayTrigger, DropdownButton, MenuItem } from 'react-bootstrap';
-import ResearchPlanDetailsDragSource from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsDragSource';
-import ResearchPlanDetailsDropTarget from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsDropTarget';
-import ResearchPlanDetailsFieldRichText from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldRichText';
-import ResearchPlanDetailsFieldKetcher from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldKetcher';
-import ResearchPlanDetailsFieldImage from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage';
-import ResearchPlanDetailsFieldTable from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTable';
-import ResearchPlanDetailsFieldSample from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldSample';
-import ResearchPlanDetailsFieldReaction from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldReaction';
-
-export default class ResearchPlanDetailsField extends Component {
-  render() {
-    const {
-      field, index, disabled, onChange, onDrop, onDelete, onExport, update, edit, tableIndex,
-      onCopyToMetadata, isNew, copyableFields
-    } = this.props;
-    let label;
-    let component;
-    const metadataTooltipText = 'Copy field content to Metadata';
-    switch (field.type) {
-      case 'richtext':
-        label = field?.title;
-        component =
-          (<ResearchPlanDetailsFieldRichText
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            edit={edit}
-          />);
-        break;
-      case 'ketcher':
-        label = 'Ketcher schema';
-        component =
-          (<ResearchPlanDetailsFieldKetcher
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            edit={edit}
-          />);
-        break;
-      case 'image':
-        label = 'Image';
-        component =
-          (<ResearchPlanDetailsFieldImage
-            attachments={this.props.attachments}
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            researchPlan={this.props.researchPlan}
-            edit={edit}/>);
-        break;
-      case 'table':
-        field.value.columns.forEach((item) => {
-          item.cellEditor = 'agTextCellEditor';
-          return item;
-        });
-        label = 'Table';
-        component =
-          (<ResearchPlanDetailsFieldTable
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            onExport={onExport}
-            update={update}
-            edit={edit}
-            tableIndex={tableIndex}
-          />);
-        break;
-      case 'sample':
-        label = 'Sample';
-        component =
-          (<ResearchPlanDetailsFieldSample
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            edit={edit}
-          />);
-        break;
-      case 'reaction':
-        label = 'Reaction';
-        component =
-          (<ResearchPlanDetailsFieldReaction
-            key={field.id}
-            field={field}
-            index={index}
-            disabled={disabled}
-            onChange={onChange.bind(this)}
-            edit={edit}
-          />);
-        break;
-      default:
-        label = '';
-        component = <div />;
-    }
-
-    let dropTarget;
-    let fieldHeader;
-    let copyToMetadataButton = '';
-    let className = 'research-plan-field';
-    if (edit) {
-      dropTarget = (
-        <Col md={12}>
-          <ResearchPlanDetailsDropTarget index={index} />
-        </Col>
-      );
-
-      if (field.type === 'richtext') {
-        copyToMetadataButton = (
-          <OverlayTrigger
-            placement="top"
-            delayShow={500}
-            overlay={<Tooltip id="metadataTooltip">{metadataTooltipText}</Tooltip>}
-          >
-            <ButtonGroup className="pull-right">
-              <DropdownButton
-                id="copyMetadataButton"
-                title=""
-                className="fa fa-laptop"
-                bsStyle="info"
-                bsSize="xsmall"
-                pullRight
-                disabled={isNew}
-              >
-                <li role="presentation" className="">Copy to Metadata field:</li>
-                <li role="separator" className="divider" />
-                {
-                  copyableFields.map(element => (
-                    <MenuItem
-                      key={element.fieldName}
-                      onClick={() => onCopyToMetadata(field.id, element.fieldName)}
-                    >
-                      {element.title}
-                    </MenuItem>
-                  ))
-                }
-              </DropdownButton>
-            </ButtonGroup>
-          </OverlayTrigger>
-        );
-      }
-
-      fieldHeader = (
-        <div className="research-plan-field-header">
-          {/* TODO: make label editable */}
-          <ControlLabel>{label}</ControlLabel>
-          <Button className="pull-right" bsStyle="danger" bsSize="xsmall" onClick={() => onDelete(field.id,this.props.attachments )} data-cy="researchplan-item-delete">
-            <i className="fa fa-times" />
-          </Button>
-          {copyToMetadataButton}
-          <ResearchPlanDetailsDragSource index={index} onDrop={onDrop.bind(this)} />
-        </div>
-      );
-    } else {
-      className += ' static';
-    }
-
-    return (
-      <Row>
-        {dropTarget}
-        <Col md={12}>
-          <div className={className}>
-            {fieldHeader}
-            {component}
-          </div>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-ResearchPlanDetailsField.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  onDrop: PropTypes.func,
-  onDelete: PropTypes.func,
-  onExport: PropTypes.func,
-  onCopyToMetadata: PropTypes.func,
-  isNew: PropTypes.bool,
-  copyableFields: PropTypes.arrayOf(PropTypes.object),
-  update: PropTypes.bool,
-  edit: PropTypes.bool,
-  attachments: PropTypes.array
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
deleted file mode 100644
index ce7cf9ab8..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldImage.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import { FormControl, FormGroup, InputGroup } from 'react-bootstrap';
-import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
-
-export default class ResearchPlanDetailsFieldImage extends Component {
-  handleDrop(files) {
-    const { field, onChange } = this.props;
-    const imageFile = files[0];
-    const replace = field.value.public_name;
-
-    // upload new image
-    ResearchPlansFetcher.updateImageFile(imageFile, replace).then((value) => {
-      // update research plan
-      onChange(value, field.id);
-    });
-  }
-
-  handleResizeChange(event) {
-    const { field, onChange } = this.props;
-    field.value.zoom = event.target.value;
-    onChange(field.value, field.id);
-  }
-
-  renderEdit() {
-    const { field } = this.props;
-    let content;
-    if (field.value.public_name) {
-      const src = `/images/research_plans/${field.value.public_name}`;
-      const style = (field.value.zoom == null || typeof field.value.zoom === 'undefined'
-      || field.value.width === '') ? { width: 'unset' } : { width: `${field.value.zoom}%` };
-      content = (
-        <div className="image-container">
-          <img style={style} src={src} alt={field.value.file_name} />
-        </div>
-      );
-    } else {
-      content = <p>Drop Files, or Click to Select.</p>;
-    }
-    return (
-      <div>
-        <FormGroup style={{ width: '30%' }}>
-          <InputGroup>
-            <InputGroup.Addon>Zoom</InputGroup.Addon>
-            <FormControl
-              type="number"
-              max="100"
-              min="1"
-              placeholder="image zoom"
-              defaultValue={field.value.zoom}
-              onChange={event => this.handleResizeChange(event)}
-            />
-            <InputGroup.Addon>%</InputGroup.Addon>
-          </InputGroup>
-        </FormGroup>
-        <Dropzone
-          accept="image/*"
-          multiple={false}
-          onDrop={files => this.handleDrop(files)}
-          className="dropzone"
-        >
-          {content}
-        </Dropzone>
-      </div>
-    );
-  }
-
-  renderStatic() {
-    const { field } = this.props;
-    if (typeof (field.value.public_name) === 'undefined'
-    || field.value.public_name === null) {
-      return (
-        <div />
-      );
-    }
-    const src = `/images/research_plans/${field.value.public_name}`;
-    const style = (field.value.zoom == null || typeof field.value.zoom === 'undefined'
-    || field.value.width === '') ? { width: 'unset' } : { width: `${field.value.zoom}%` };
-
-    return (
-      <div className="image-container">
-        <img style={style} src={src} alt={field.value.file_name} />
-      </div>
-    );
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldImage.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
deleted file mode 100644
index aaf335cbe..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldKetcher.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Glyphicon } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
-import StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';
-
-export default class ResearchPlanDetailsFieldKetcher extends Component {
-  constructor(props) {
-    super(props);
-    const {
-      field, index, disabled, onChange
-    } = props;
-    this.state = {
-      field,
-      index,
-      disabled,
-      onChange,
-      showStructureEditor: false,
-      loadingMolecule: false,
-    };
-  }
-
-  showStructureEditor() {
-    this.setState({
-      showStructureEditor: true
-    });
-  }
-
-  hideStructureEditor() {
-    this.setState({
-      showStructureEditor: false
-    });
-  }
-
-  handleStructureEditorSave(sdf_file, svg_file, config = null) {
-    let { field, onChange } = this.state;
-
-    field.value = {
-      sdf_file,
-      svg_file
-    };
-
-    const smiles = config ? config.smiles : null;
-
-    this.setState({ loadingMolecule: true });
-
-    const isChemdraw = !!smiles;
-
-    ResearchPlansFetcher.updateSVGFile(svg_file, isChemdraw).then((json) => {
-      field.value.svg_file = json.svg_path;
-      this.setState({
-        field,
-        loadingMolecule: false
-      });
-      onChange(field.value, field.id);
-      this.hideStructureEditor();
-    });
-  }
-
-  handleStructureEditorCancel() {
-    this.hideStructureEditor();
-  }
-
-  renderStructureEditorModal(field) {
-    const { showStructureEditor } = this.state;
-    const molfile = field.value.sdf_file;
-
-    return (
-      <StructureEditorModal
-        key={field.id}
-        showModal={showStructureEditor}
-        onSave={this.handleStructureEditorSave.bind(this)}
-        onCancel={this.handleStructureEditorCancel.bind(this)}
-        molfile={molfile}
-      />
-    );
-  }
-
-  renderEdit() {
-    const { field } = this.state;
-    let className;
-    let svgPath;
-    if (field.value.svg_file) {
-      className = 'svg-container';
-      svgPath = `/images/research_plans/${field.value.svg_file}`;
-    } else {
-      className = 'svg-container-empty';
-      svgPath = '/images/wild_card/no_image_180.svg';
-    }
-    return (
-      <div className={className} onClick={this.showStructureEditor.bind(this)}>
-        <Glyphicon className="pull-right" glyph="pencil" />
-        <SVG key={svgPath} src={svgPath} className="molecule-mid" />
-        {this.renderStructureEditorModal(field)}
-      </div>
-    );
-  }
-
-  renderStatic() {
-    const { field } = this.props;
-    if (typeof (field.value.svg_file) === 'undefined'
-      || field.value.svg_file === null) {
-      return (
-        <div />
-      );
-    }
-    const svgPath = `/images/research_plans/${field.value.svg_file}`;
-    return (
-      <div className="image-container">
-        <img src={svgPath} alt="" />
-      </div>
-    );
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldKetcher.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
deleted file mode 100644
index 50df42b92..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldReaction.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../DragDropItemTypes';
-import ElementActions from '../actions/ElementActions';
-import { UrlSilentNavigation } from '../utils/ElementUtils';
-import ReactionsFetcher from '../fetchers/ReactionsFetcher';
-
-const spec = {
-  drop(props, monitor) {
-    const { field, onChange } = props;
-    onChange({ reaction_id: monitor.getItem().element.id }, field.id);
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-const hasAuth = (id) => {
-  if (typeof id === 'string' && id.includes('error')) return false; return true;
-};
-
-const noAuth = el => (
-  <div className="research-plan-no-auth">
-    <h4>{el.id.split(':')[2]}&nbsp;<i className="fa fa-eye-slash" aria-hidden="true" /></h4>
-  </div>
-);
-
-class ResearchPlanDetailsFieldReaction extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      idle: true,
-      reaction: {
-        id: null
-      }
-    };
-  }
-
-  componentDidMount() {
-    const { field } = this.props;
-    if (field && field.value && field.value.reaction_id && hasAuth(field.value.reaction_id)) {
-      this.fetch();
-    }
-  }
-
-  componentDidUpdate() {
-    const { field } = this.props;
-    const { idle, reaction } = this.state;
-    if (idle && field.value.reaction_id !== reaction.id && hasAuth(reaction.id)) {
-      this.setState({ idle: false }, this.fetch);
-    }
-  }
-
-  fetch() {
-    const { field } = this.props;
-    ReactionsFetcher.fetchById(field.value.reaction_id).then((reaction) => {
-      this.setState({ idle: true, reaction });
-    });
-  }
-
-  showReaction() {
-    const { reaction } = this.state;
-    UrlSilentNavigation(reaction);
-    ElementActions.fetchReactionById(reaction.id);
-  }
-
-  renderReaction(reaction) {
-    if (!hasAuth(reaction.id)) {
-      return noAuth(reaction);
-    }
-    const { edit } = this.props;
-    const title = reaction.title();
-    let link;
-    if (edit) {
-      link = (
-        <p className="float-left">
-          Reaction:
-          <a role="link" tabIndex={0} onClick={() => this.showReaction()} style={{ cursor: 'pointer' }}>
-            {title}
-          </a>
-        </p>
-      );
-    }
-    return (
-      <div className="research-plan-field-reaction">
-        {link}
-        <div className="image-container">
-          <img src={reaction.svgPath} alt={title} />
-          <p>{reaction.name}</p>
-        </div>
-      </div>
-    );
-  }
-
-  renderEdit() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const { reaction } = this.state;
-    if (!hasAuth(reaction.id)) {
-      return noAuth(reaction);
-    }
-    let className = 'drop-target';
-    if (isOver) className += ' is-over';
-    if (canDrop) className += ' can-drop';
-    return connectDropTarget(<div className={className}>{reaction.id ? this.renderReaction(reaction) : 'Drop reaction here.'}</div>);
-  }
-
-  renderStatic() {
-    const { reaction } = this.state;
-    return reaction.id ? this.renderReaction(reaction) : '';
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldReaction.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-};
-
-export
-default DropTarget(DragDropItemTypes.REACTION, spec, collect)(ResearchPlanDetailsFieldReaction);
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
deleted file mode 100644
index 04a5c85e5..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldRichText.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import QuillEditor from 'src/components/QuillEditor';
-import QuillViewer from 'src/components/QuillViewer';
-
-export default class ResearchPlanDetailsFieldRichText extends Component {
-
-  renderEdit() {
-    const {
-      field, disabled, onChange
-    } = this.props;
-
-    return (
-      <div className="quill-resize">
-        <QuillEditor
-          value={field.value}
-          height="100%"
-          onChange={value => onChange(value, field.id)}
-          disabled={disabled}
-        />
-      </div>
-    );
-  }
-
-  renderStatic() {
-    const { field } = this.props;
-    return <QuillViewer value={field.value} />;
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldRichText.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-}
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
deleted file mode 100644
index 64ccc9be3..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldSample.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../DragDropItemTypes';
-import ElementActions from '../actions/ElementActions';
-import { UrlSilentNavigation } from '../utils/ElementUtils';
-import SampleName from '../common/SampleName';
-import SamplesFetcher from '../fetchers/SamplesFetcher';
-
-const spec = {
-  drop(props, monitor) {
-    const { field, onChange } = props;
-    onChange({ sample_id: monitor.getItem().element.id }, field.id);
-  }
-};
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-const hasAuth = (id) => {
-  if (typeof id === 'string' && id.includes('error')) return false; return true;
-};
-
-const noAuth = el => (
-  <div className="research-plan-no-auth">
-    <h4>{el.id.split(':')[2]}&nbsp;<i className="fa fa-eye-slash" aria-hidden="true" /></h4>
-  </div>
-);
-
-class ResearchPlanDetailsFieldSample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      idle: true,
-      sample: {
-        id: null
-      }
-    };
-  }
-
-  componentDidMount() {
-    const { field } = this.props;
-    if (field && field.value && field.value.sample_id && hasAuth(field.value.sample_id)) {
-      this.fetch();
-    }
-  }
-
-  componentDidUpdate() {
-    const { field } = this.props;
-    const { idle, sample } = this.state;
-    if (idle && field.value.sample_id !== sample.id && hasAuth(sample.id)) {
-      this.setState({ idle: false }, this.fetch);
-    }
-  }
-
-  fetch() {
-    const { field } = this.props;
-    SamplesFetcher.fetchById(field.value.sample_id).then((sample) => {
-      this.setState({ idle: true, sample });
-    });
-  }
-
-  showSample() {
-    const { sample } = this.state;
-    UrlSilentNavigation(sample);
-    ElementActions.fetchSampleById(sample.id);
-  }
-
-  // modified from sampleInfo in SampleDetails.js
-  renderSample(sample) {
-    if (!hasAuth(sample.id)) {
-      return noAuth(sample);
-    }
-    const { edit } = this.props;
-    const title = sample.title();
-    let link;
-    if (edit) {
-      link = (
-        <p>
-          Sample:
-          <a role="link" tabIndex={0} onClick={() => this.showSample()} style={{ cursor: 'pointer' }}>
-            {title}
-          </a>
-        </p>
-      );
-    }
-    return (
-      <div className="research-plan-field-image">
-        {link}
-        <div className="image-container">
-          <img src={sample.svgPath} alt={title} />
-          <SampleName sample={sample} />
-        </div>
-      </div>
-    );
-  }
-
-  renderEdit() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const { sample } = this.state;
-    if (!hasAuth(sample.id)) {
-      return noAuth(sample);
-    }
-    let className = 'drop-target';
-    if (isOver) className += ' is-over';
-    if (canDrop) className += ' can-drop';
-    return connectDropTarget(<div className={className}>{sample.id ? this.renderSample(sample) : 'Drop sample here.'}</div>);
-  }
-
-  renderStatic() {
-    const { sample } = this.state;
-    return sample.id ? this.renderSample(sample) : '';
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldSample.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-};
-
-export default DropTarget(DragDropItemTypes.SAMPLE, spec, collect)(ResearchPlanDetailsFieldSample);
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
deleted file mode 100644
index 2d3bda37d..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTable.js
+++ /dev/null
@@ -1,528 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Button } from 'react-bootstrap';
-import ResearchPlanDetailsFieldTableColumnNameModal from './ResearchPlanDetailsFieldTableColumnNameModal';
-import ResearchPlanDetailsFieldTableSchemasModal from './ResearchPlanDetailsFieldTableSchemasModal';
-import ResearchPlansFetcher from '../fetchers/ResearchPlansFetcher';
-import { AgGridReact } from 'ag-grid-react';
-import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
-import uniqueId from 'react-html-id';
-import CustomTextEditor from '../common/CustomTextEditor';
-
-// regexp to parse tap separated paste from the clipboard
-const defaultParsePaste = str => (
-  str.split(/\r\n|\n|\r/).map(row => row.split('\t'))
-);
-
-export default class ResearchPlanDetailsFieldTable extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      update: this.props.update,
-      columnNameModal: {
-        show: false,
-        colId: null
-      },
-      schemaModal: {
-        show: false
-      },
-      selection: {},
-      gridApi: {},
-      columnApi: {},
-      columnClicked: null,
-      rowClicked: null,
-      isDisable: true
-    };
-
-    uniqueId.enableUniqueIds(this)
-
-    this.ref = React.createRef();
-  }
-
-  componentDidUpdate() {
-    if (this.state.update !== this.props.update) {
-      this.setState({ update: this.props.update });
-    }
-  }
-
-  buildColumn(columnName) {
-    return {
-      key: columnName,
-      name: columnName,
-      editable: true,
-      resizable: true,
-      width: 200,
-      editor: CustomTextEditor
-    };
-  }
-
-  buildRow() {
-    return [];
-  }
-
-  handleColumnNameModalShow(action, colId) {
-    this.setState({
-      columnNameModal: {
-        show: true,
-        action,
-        colId
-      }
-    });
-  }
-
-  handleColumnNameModalSubmit(columnName) {
-    const { action, colId } = this.state.columnNameModal;
-
-    if (action === 'insert') {
-      this.handleColumnInsert(columnName);
-    } else if (action === 'rename') {
-      this.handleColumnRename(colId, columnName);
-    }
-
-    this.handleColumnNameModalHide();
-  }
-
-  handleColumnNameModalHide() {
-    this.setState({
-      columnNameModal: {
-        show: false,
-        action: null,
-        idx: null
-      }
-    });
-  }
-
-  handleColumnInsert(columnName) {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi } = this.state
-
-    let columnDefs = gridApi.getColumnDefs();
-    columnDefs.push({
-      headerName: columnName,
-      field: columnName,
-    });
-    gridApi.setColumnDefs(columnDefs);
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.columnStates = columnApi.getColumnState();
-
-    onChange(field.value, field.id);
-  }
-
-  handleColumnRename(colId, columnName) {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi } = this.state
-
-    let columnDefs = gridApi.getColumnDefs();
-    let columnChange = columnDefs.find(o => o.colId === colId);
-    columnChange.headerName = columnName;
-    gridApi.setColumnDefs(columnDefs);
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.columnStates = columnApi.getColumnState();
-
-    onChange(field.value, field.id);
-  }
-
-  handleColumnResize(columnIdx, width) {
-    const { field, onChange } = this.props;
-    field.value.columns[columnIdx]['width'] = width;
-    onChange(field.value, field.id);
-  }
-
-  handleColumnDelete(columnIdx) {
-    const { field, onChange } = this.props;
-    const columns = field.value.columns.slice();
-    columns.splice(columnIdx, 1);
-    field.value.columns = columns;
-    onChange(field.value, field.id);
-  }
-
-  handleRowInsert(rowIdx) {
-    const { field, onChange } = this.props;
-    field.value.rows.splice(rowIdx, 0, this.buildRow());
-    onChange(field.value, field.id);
-  }
-
-  handleRowDelete(rowIdx) {
-    const { field, onChange } = this.props;
-    field.value.rows.splice(rowIdx, 1);
-    onChange(field.value, field.id);
-  }
-
-  handleSchemaModalShow() {
-    ResearchPlansFetcher.fetchTableSchemas().then((json) => {
-      this.setState({
-        schemaModal: {
-          show: true,
-          schemas: json['table_schemas']
-        }
-      });
-    });
-  }
-
-  handleSchemasModalSubmit(schemaName) {
-    ResearchPlansFetcher.createTableSchema(schemaName, this.props.field.value).then(() => {
-      this.handleSchemaModalShow();
-    });
-  }
-
-  handleSchemasModalHide() {
-    this.setState({
-      schemaModal: {
-        show: false
-      }
-    });
-  }
-
-  handleSchemasModalUse(schema) {
-    const { field, onChange } = this.props;
-
-    onChange(schema.value, field.id);
-    this.handleSchemasModalHide();
-  }
-
-  handleSchemasModalDelete(schema) {
-    ResearchPlansFetcher.deleteTableSchema(schema.id).then(() => {
-      this.handleSchemaModalShow();
-    });
-  }
-
-  rowGetter(idx) {
-    return this.props.field.value.rows[idx];
-  }
-
-
-  cellValueChanged = () => {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi } = this.state
-
-    let rowData = [];
-    gridApi.forEachNode(node => rowData.push(node.data));
-    field.value.rows = rowData
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.columnStates = columnApi.getColumnState();
-
-    onChange(field.value, field.id);
-  }
-
-  onGridReady = (params) => {
-    this.setState({
-      gridApi: params.api,
-      columnApi: params.columnApi
-    });
-
-    const { field } = this.props;
-    params.columnApi.setColumnState(field.value.columnStates);
-  }
-
-  onSaveGridColumnState(params) {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi } = this.state
-
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.columnStates = columnApi.getColumnState();
-
-    onChange(field.value, field.id);
-  }
-
-  onSaveGridRow() {
-    const { field, onChange } = this.props;
-    const { gridApi } = this.state
-
-    let rowData = [];
-    gridApi.forEachNode(node => rowData.push(node.data));
-    field.value.rows = rowData
-
-    onChange(field.value, field.id);
-  }
-
-  addNewColumn() {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi } = this.state
-
-    let columnDefs = gridApi.getColumnDefs();
-    let columnName = this.nextUniqueId();
-    columnDefs.push({
-      headerName: columnName,
-      field: columnName,
-    });
-    gridApi.setColumnDefs(columnDefs);
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.columnStates = columnApi.getColumnState();
-
-    onChange(field.value, field.id);
-  }
-
-  addNewRow() {
-    const { field, onChange } = this.props;
-    const { gridApi } = this.state
-
-    gridApi.applyTransaction({
-      add: [{}],
-    });
-
-    let rowData = [];
-    gridApi.forEachNode(node => rowData.push(node.data));
-    field.value.columns = gridApi.getColumnDefs();
-    field.value.rows = rowData
-
-    onChange(field.value, field.id);
-  }
-
-  removeThisRow() {
-    const { field, onChange } = this.props;
-    const { gridApi, rowClicked } = this.state
-    let rowData = [];
-    gridApi.forEachNodeAfterFilterAndSort(node => {
-      rowData.push(node.data);
-    });
-    gridApi.applyTransaction({ remove: [rowData[rowClicked]] });
-
-    rowData = rowData.filter(function (value, index, arr) {
-      return index !== rowClicked;
-    });
-    field.value.rows = rowData
-
-    onChange(field.value, field.id);
-  }
-
-  removeThisColumn() {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi, columnClicked } = this.state
-    if (columnClicked) {
-      let columnDefs = gridApi.getColumnDefs();
-      columnDefs = columnDefs.filter(function (value, index, arr) {
-        return value.colId !== columnClicked;
-      });
-
-      gridApi.setColumnDefs(columnDefs);
-      field.value.columns = gridApi.getColumnDefs();
-      field.value.columnStates = columnApi.getColumnState();
-
-      onChange(field.value, field.id);
-    }
-  }
-
-  onCellContextMenu(params) {
-    this.setState({ columnClicked: params.column.colId, rowClicked: params.rowIndex });
-  }
-
-  handleRenameClick() {
-    const { columnClicked } = this.state;
-    if (columnClicked) {
-      this.handleColumnNameModalShow('rename', columnClicked);
-    }
-  }
-
-  handlePaste(event) {
-    const { field, onChange } = this.props;
-    const { gridApi, columnApi, columnClicked, rowClicked } = this.state;
-    onChange(field.value, field.id);
-
-    navigator.clipboard.readText()
-      .then(data => {
-        let lines = data.split(/\n/);
-        let cellData = [];
-        lines.forEach(element => {
-          cellData.push(element.split('\t'));
-        });
-
-
-        let columns = columnApi.getAllColumns();
-        let rowData = [];
-        gridApi.forEachNodeAfterFilterAndSort(node => {
-          rowData.push(node.data);
-        });
-
-        let rowIndex = 0;
-        for (let i = 0; i < rowData.length; i++) {
-          let row = [];
-          let startUpdate = false;
-          if (i >= rowClicked) {
-            let columnIndex = 0;
-            for (let j = 0; j < columns.length; j++) {
-              const element = columns[j];
-              if (startUpdate || element.colId === columnClicked) {
-                startUpdate = true;
-                rowData[i][element.colId] = cellData[rowIndex][columnIndex];
-                columnIndex++;
-              }
-            }
-            rowIndex++;
-          }
-        }
-
-        gridApi.applyTransaction({
-          update: rowData,
-        });
-
-        field.value.rows = rowData
-        onChange(field.value, field.id);
-      })
-      .catch(err => {
-        console.error('Failed to read clipboard contents: ', err);
-      });
-  }
-
-  handleInsertColumnClick() {
-    const { columnClicked } = this.state;
-    if (columnClicked) {
-      this.handleColumnNameModalShow('insert', columnClicked);
-    }
-  }
-
-  onCellMouseOver() {
-    this.setState({ isDisable: false });
-  }
-
-  onCellMouseOut() {
-    this.setState({ isDisable: true });
-  }
-
-  renderEdit() {
-    const { field, onExport } = this.props;
-    const { rows, columns } = field.value;
-    const { columnNameModal, schemaModal, isDisable } = this.state;
-
-    let contextMenuId = this.nextUniqueId();
-    const defaultColDef = {
-      resizable: true,
-      rowDrag: true,
-      sortable: true,
-      editable: true,
-      cellEditor: 'agTextCellEditor',
-      cellClass: 'cell-figure',
-    };
-
-    return (
-      <div>
-        <div className='research-plan-table-grid'>
-          <div id='myGrid' className='ag-theme-alpine'>
-            <ContextMenuTrigger id={contextMenuId} disable={isDisable}>
-              <AgGridReact
-                defaultColDef={defaultColDef}
-                columnDefs={columns}
-                rowData={rows}
-                domLayout='autoHeight'
-                onGridReady={this.onGridReady}
-                onCellEditingStopped={this.cellValueChanged}
-                rowDragManaged={true}
-                animateRows={true}
-                singleClickEdit={true}
-                stopEditingWhenGridLosesFocus={true}
-                rowHeight='37'
-                onSortChanged={this.onSaveGridColumnState.bind(this)}
-                onColumnResized={this.onSaveGridColumnState.bind(this)}
-                onColumnMoved={this.onSaveGridColumnState.bind(this)}
-                onCellMouseOver={this.onCellMouseOver.bind(this)}
-                onCellMouseOut={this.onCellMouseOut.bind(this)}
-                onRowDragEnd={this.onSaveGridRow.bind(this)}
-                onCellContextMenu={this.onCellContextMenu.bind(this)}
-                enableMultiRowDragging={true}
-                rowSelection='multiple'
-                suppressDragLeaveHidesColumns={true}
-              />
-            </ContextMenuTrigger>
-            <ContextMenu id={contextMenuId}>
-              <MenuItem onClick={this.handlePaste.bind(this)}>
-                Paste
-            </MenuItem>
-              <MenuItem onClick={this.handleRenameClick.bind(this)}>
-                Rename column
-            </MenuItem>
-              <MenuItem divider />
-              <MenuItem onClick={this.handleInsertColumnClick.bind(this)}>
-                Add new column
-            </MenuItem>
-              <MenuItem onClick={this.addNewRow.bind(this)}>
-                Add new row
-            </MenuItem>
-              <MenuItem divider />
-              <MenuItem onClick={this.removeThisColumn.bind(this)}>
-                Remove this column
-            </MenuItem>
-              <MenuItem onClick={this.removeThisRow.bind(this)}>
-                Remove this row
-            </MenuItem>
-            </ContextMenu>
-          </div>
-        </div>
-
-        <div className='research-plan-table-toolbar'>
-          <Row>
-            <Col xs={3}>
-              <Button bsSize='xsmall' onClick={this.handleSchemaModalShow.bind(this)}>
-                Table schemas
-              </Button>
-            </Col>
-            <Col xs={3} xsOffset={6}>
-              <Button bsSize='xsmall' onClick={() => onExport(field)}>
-                Export as Excel
-              </Button>
-            </Col>
-          </Row>
-        </div>
-        <ResearchPlanDetailsFieldTableColumnNameModal
-          modal={columnNameModal}
-          onSubmit={this.handleColumnNameModalSubmit.bind(this)}
-          onHide={this.handleColumnNameModalHide.bind(this)}
-          columns={columns} />
-        <ResearchPlanDetailsFieldTableSchemasModal
-          modal={schemaModal}
-          onSubmit={this.handleSchemasModalSubmit.bind(this)}
-          onHide={this.handleSchemasModalHide.bind(this)}
-          onUse={this.handleSchemasModalUse.bind(this)}
-          onDelete={this.handleSchemasModalDelete.bind(this)} />
-      </div>
-    );
-  }
-
-  renderStatic() {
-    const { field } = this.props;
-    const { columns, rows } = field.value;
-
-    const th = columns.map((column) => {
-      return <th key={column.colId}>{column.headerName}</th>;
-    });
-
-    const tr = rows.map((row, index) => {
-      const td = columns.map((column) => {
-        return <td style={{ 'height': '37px' }} key={column.colId}>{row[column.colId]}</td>;
-      });
-      return (
-        <tr key={index}>
-          {td}
-        </tr>
-      );
-    });
-
-    return (
-      <table className='table table-bordered'>
-        <thead>
-          <tr>
-            {th}
-          </tr>
-        </thead>
-        <tbody>
-          {tr}
-        </tbody>
-      </table>
-    );
-  }
-
-  render() {
-    if (this.props.edit) {
-      return this.renderEdit();
-    }
-    return this.renderStatic();
-  }
-}
-
-ResearchPlanDetailsFieldTable.propTypes = {
-  field: PropTypes.object,
-  index: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  update: PropTypes.bool,
-  edit: PropTypes.bool
-};
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
deleted file mode 100644
index aaae8de46..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableColumnNameModal.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ButtonToolbar, Button, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
-
-class ResearchPlanDetailsFieldTableColumnNameModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      columnNameValue: '',
-      columnNameError: ''
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props !== prevProps) {
-      const { modal, columns } = this.props;
-
-      let columnNameValue = '';
-      if (modal.action === 'rename') {
-        columnNameValue = columns.find(o => o.colId === modal.colId).headerName;
-      }
-
-      this.setState({
-        columnNameValue,
-        columnNameError: ''
-      });
-    }
-  }
-
-  handleColumnNameChange(event) {
-    this.setState({ columnNameValue: event.target.value });
-  }
-
-  handleSubmit() {
-    const { columns, onSubmit } = this.props;
-    const { columnNameValue } = this.state;
-    const keys = columns.map(column => column.headerName);
-
-    if (!columnNameValue) {
-      this.setState({ columnNameError: 'Please give a column name.' });
-    } else if (keys.indexOf(columnNameValue) > -1) {
-      this.setState({ columnNameError: 'A column with this title already exists.' });
-    } else {
-      this.setState({ columnNameError: '', columnNameValue: '' });
-      onSubmit(columnNameValue);
-    }
-  }
-
-  render() {
-    const { modal, onHide } = this.props;
-    const { columnNameValue, columnNameError } = this.state;
-
-    let title;
-    if (modal.action === 'insert') {
-      title = 'Insert column';
-    } else if (modal.action === 'rename') {
-      title = 'Rename column';
-    }
-
-    const validationState = columnNameError ? 'error' : null;
-
-    return (
-      <Modal animation show={modal.show} onHide={onHide}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            {title}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body >
-          <div>
-            <FormGroup validationState={validationState}>
-              <ControlLabel>Column name</ControlLabel>
-              <FormControl
-                type="text"
-                value={columnNameValue}
-                onChange={this.handleColumnNameChange.bind(this)}
-              />
-              <HelpBlock>{columnNameError}</HelpBlock>
-            </FormGroup>
-          </div>
-          <div>
-            <ButtonToolbar>
-              <Button bsStyle="warning" onClick={onHide}>
-                Cancel
-              </Button>
-              <Button bsStyle="primary" onClick={this.handleSubmit.bind(this)}>
-                {title}
-              </Button>
-            </ButtonToolbar>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-ResearchPlanDetailsFieldTableColumnNameModal.propTypes = {
-  modal: PropTypes.object,
-  columnName: PropTypes.string,
-  onSubmit: PropTypes.func,
-  onHide: PropTypes.func,
-  columns: PropTypes.array
-};
-
-export default ResearchPlanDetailsFieldTableColumnNameModal;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
deleted file mode 100644
index 1c0e41a22..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableContextMenu.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Menu } from 'react-data-grid-addons';
-
-const { ContextMenu, MenuItem } = Menu;
-
-class ResearchPlanDetailsFieldTableContextMenu extends Component {
-
-  render() {
-    const {
-      idx, id, rowIdx, onColumnInsertLeft, onColumnInsertRight, onColumnRename,
-      onColumnDelete, onRowInsertAbove, onRowInsertBelow, onRowDelete
-    } = this.props;
-
-    return (
-      <ContextMenu id={id}>
-        <MenuItem data={{ rowIdx, idx }} onClick={onColumnInsertLeft}>
-          Insert column left
-        </MenuItem>
-        <MenuItem data={{ rowIdx, idx }} onClick={onColumnInsertRight}>
-          Insert column right
-        </MenuItem>
-
-        <MenuItem divider />
-
-        <MenuItem data={{ rowIdx, idx }} onClick={onColumnRename}>
-          Rename column
-        </MenuItem>
-
-        <MenuItem divider />
-
-        <MenuItem data={{ rowIdx, idx }} onClick={onColumnDelete}>
-          Delete column
-        </MenuItem>
-
-        <MenuItem divider />
-
-        <MenuItem data={{ rowIdx, idx }} onClick={onRowInsertAbove}>
-          Insert row above
-        </MenuItem>
-        <MenuItem data={{ rowIdx, idx }} onClick={onRowInsertBelow}>
-          Insert row below
-        </MenuItem>
-
-        <MenuItem divider />
-
-        <MenuItem data={{ rowIdx, idx }} onClick={onRowDelete}>
-          Delete Row
-        </MenuItem>
-
-      </ContextMenu>
-    );
-  }
-}
-
-ResearchPlanDetailsFieldTableContextMenu.propTypes = {
-  idx: PropTypes.number,
-  id: PropTypes.string,
-  rowIdx: PropTypes.number,
-  onColumnInsertLeft: PropTypes.func,
-  onColumnInsertRight: PropTypes.func,
-  onColumnRename: PropTypes.func,
-  onColumnDelete: PropTypes.func,
-  onRowInsertAbove: PropTypes.func,
-  onRowInsertBelow: PropTypes.func,
-  onRowDelete: PropTypes.func
-};
-
-export default ResearchPlanDetailsFieldTableContextMenu;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js b/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
deleted file mode 100644
index 5a8cf7b9e..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsFieldTableSchemasModal.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Table, Modal, Button, FormGroup, ControlLabel, FormControl, HelpBlock, InputGroup } from 'react-bootstrap';
-
-class ResearchPlanDetailsFieldTableSchemasModal extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      schemaNameValue: '',
-      schemaNameError: ''
-    };
-  }
-
-  handleSchemaNameChange(event) {
-    this.setState({ schemaNameValue: event.target.value });
-  }
-
-  handleSubmit() {
-    const { onSubmit } = this.props;
-    const { schemaNameValue } = this.state;
-
-    if (!schemaNameValue) {
-      this.setState({ schemaNameError: 'Please give a schema name.' });
-    } else {
-      this.setState({ schemaNameError: '', schemaNameValue: '' });
-      onSubmit(schemaNameValue);
-    }
-  }
-
-  render() {
-    const {
-      modal, onHide, onUse, onDelete
-    } = this.props;
-    const { schemaNameValue, schemaNameError } = this.state;
-
-    let schemaTable = null;
-    if (modal.schemas) {
-      schemaTable = modal.schemas.map((schema, index) => {
-        return (
-          <tr key={index}>
-            <td>{schema.name}</td>
-            <td>
-              {schema.value.columns.map(column => column.headerName).join(', ')}
-            </td>
-            <td>
-              {schema.value.rows.length}
-            </td>
-            <td>
-              <Button bsStyle="danger" bsSize="xsmall" onClick={() => onDelete(schema)}>
-                Delete
-              </Button>
-              <Button bsStyle="warning" bsSize="xsmall" onClick={() => onUse(schema)}>
-                Use
-              </Button>
-            </td>
-          </tr>
-        );
-      });
-    }
-
-    return (
-      <Modal animation show={modal.show} onHide={onHide}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            Table schemas
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body >
-          <div className="research-plan-table-schema-modal-create">
-            <FormGroup validationState={schemaNameError ? 'error' : null}>
-              <ControlLabel>Save current schema</ControlLabel>
-              <InputGroup>
-                <FormControl
-                  type="text"
-                  value={schemaNameValue}
-                  onChange={this.handleSchemaNameChange.bind(this)}
-                />
-                <InputGroup.Button>
-                  <Button bsStyle="success" onClick={this.handleSubmit.bind(this)}>
-                    Save
-                  </Button>
-                </InputGroup.Button>
-              </InputGroup>
-              <HelpBlock>{schemaNameError}</HelpBlock>
-            </FormGroup>
-          </div>
-          <div className="research-plan-table-schema-modal-table">
-            <h4>Stored schemas</h4>
-            <Table>
-              <thead>
-                <tr>
-                  <th style={{ width: '20%' }}>Name</th>
-                  <th style={{ width: '40%' }}>Columns</th>
-                  <th style={{ width: '20%' }}># Rows</th>
-                  <th style={{ width: '20%' }} />
-                </tr>
-              </thead>
-              <tbody>
-                {schemaTable}
-              </tbody>
-            </Table>
-          </div>
-          <div>
-            <Button bsStyle="default" onClick={onHide}>
-              Close
-            </Button>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-ResearchPlanDetailsFieldTableSchemasModal.propTypes = {
-  modal: PropTypes.object,
-  onSubmit: PropTypes.func,
-  onHide: PropTypes.func,
-  onUse: PropTypes.func,
-  onDelete: PropTypes.func
-};
-
-export default ResearchPlanDetailsFieldTableSchemasModal;
diff --git a/app/packs/src/components/research_plan/ResearchPlanDetailsName.js b/app/packs/src/components/research_plan/ResearchPlanDetailsName.js
deleted file mode 100644
index c54a11dfd..000000000
--- a/app/packs/src/components/research_plan/ResearchPlanDetailsName.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ControlLabel, FormControl, FormGroup, Row, Col, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
-
-export default class ResearchPlanDetailsName extends Component {
-  renderCopyToMetadataButton() {
-    const { isNew, onCopyToMetadata } = this.props;
-    const metadataTooltipText = 'Copy Name to Metadata';
-    return (
-      <OverlayTrigger
-        placement="top"
-        delayShow={500}
-        overlay={<Tooltip id="metadataTooltip">{metadataTooltipText}</Tooltip>}
-      >
-        <Button
-          id="copyMetadataButton"
-          title=""
-          className="fa fa-laptop pull-right"
-          bsStyle="info"
-          bsSize="xsmall"
-          onClick={() => onCopyToMetadata(null, 'name')}
-          disabled={isNew}
-        />
-      </OverlayTrigger>
-    );
-  }
-
-  render() {
-    const {
-      value, disabled, onChange, edit
-    } = this.props;
-    if (edit) {
-      return (
-        <div className="research-plan-name">
-          <Row>
-            <Col lg={8}>
-              <FormGroup>
-                <ControlLabel>Name</ControlLabel>
-                { this.renderCopyToMetadataButton() }
-                <FormControl
-                  type="text"
-                  value={value || ''}
-                  onChange={event => onChange(event.target.value)}
-                  disabled={disabled}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
-    return (
-      <div className="research-plan-name static">
-        <h1>{value}</h1>
-      </div>
-    );
-  }
-}
-
-ResearchPlanDetailsName.propTypes = {
-  value: PropTypes.string,
-  disabled: PropTypes.bool,
-  isNew: PropTypes.bool,
-  onChange: PropTypes.func,
-  edit: PropTypes.bool,
-  onCopyToMetadata: PropTypes.func
-};
diff --git a/app/packs/src/components/routes.js b/app/packs/src/components/routes.js
deleted file mode 100644
index d5dab1471..000000000
--- a/app/packs/src/components/routes.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as routesUtils from 'src/utilities/routesUtils';
-import { elementNames } from 'src/apps/generic/Utils';
-
-const routes = {
-  '/': 'root',
-  target: {
-    root() { Aviator.navigate('/collection/all'); }
-  },
-
-  '/collection': {
-    target: {
-      show: routesUtils.collectionShow,
-      showCollectionManagement: routesUtils.collectionShowCollectionManagement
-    },
-    '/management': 'showCollectionManagement',
-    '/:collectionID': 'show'
-  },
-
-  '/scollection': {
-    target: {
-      show: routesUtils.scollectionShow,
-      showCollectionManagement: routesUtils.collectionShowCollectionManagement
-    },
-    '/management': 'showCollectionManagement',
-    '/:collectionID': 'show'
-  },
-
-  '/metadata': {
-    target: {
-      showMetadata: routesUtils.metadataShowOrNew
-    },
-    '/': 'showMetadata'
-  },
-
-  '/report': {
-    target: {
-      showReport: routesUtils.reportShowReport
-    },
-    '/': 'showReport'
-  },
-
-  '/sample': {
-    target: {
-      showOrNew: routesUtils.sampleShowOrNew
-    },
-    '/:sampleID': 'showOrNew'
-  },
-
-  '/reaction': {
-    target: {
-      show: routesUtils.reactionShow,
-      showSample: routesUtils.reactionShowSample
-    },
-    '/:reactionID': 'show',
-    '/sample/:sampleID': 'showSample',
-  },
-  '/wellplate': {
-    target: {
-      showOrNew: routesUtils.wellplateShowOrNew,
-      showSample: routesUtils.wellplateShowSample
-    },
-    '/:wellplateID': 'showOrNew',
-    '/sample/:sampleID': 'showSample',
-  },
-  '/screen': {
-    target: {
-      showOrNew: routesUtils.screenShowOrNew
-    },
-    '/:screenID': 'showOrNew'
-  },
-  '/devicesAnalysis': {
-    target: {
-      create: routesUtils.devicesAnalysisCreate,
-      show: routesUtils.devicesAnalysisShow
-    },
-    '/new/:deviceId/:analysisType': 'create',
-    '/:analysisId': 'show',
-  },
-  '/device': {
-    target: {
-      show: routesUtils.deviceShow,
-      showDeviceManagement: routesUtils.deviceShowDeviceManagement,
-    },
-    '/management': 'showDeviceManagement',
-    '/:deviceId': 'show',
-  },
-  '/research_plan': {
-    target: {
-      showOrNew: routesUtils.researchPlanShowOrNew
-    },
-    '/:research_planID': 'showOrNew'
-  },
-  '/fwdRxnPrediction': {
-    target: {
-      showFwdRxnPrediction: routesUtils.predictionShowFwdRxn
-    },
-    '/': 'showFwdRxnPrediction'
-  },
-  '/genericEl': {
-    target: {
-      showOrNew: routesUtils.genericElShowOrNew
-    },
-    '/:genericElID': 'showOrNew'
-  }
-};
-
-elementNames(false).forEach((klass) => {
-  const item = {};
-  item['target'] = { showOrNew: routesUtils.genericElShowOrNew };
-  item[`/:${klass}ID`] = 'showOrNew';
-  routes[`/${klass}`] = item;
-});
-
-export default function() {
-  Aviator.root = '/mydb';
-  Aviator.pushStateEnabled = true;
-  Aviator.setRoutes(routes);
-}
diff --git a/app/packs/src/components/routesUtils.js b/app/packs/src/components/routesUtils.js
deleted file mode 100644
index 813d37319..000000000
--- a/app/packs/src/components/routesUtils.js
+++ /dev/null
@@ -1,315 +0,0 @@
-import UIStore from 'src/stores/alt/stores/UIStore';
-import CollectionStore from 'src/stores/alt/stores/CollectionStore';
-import UIActions from 'src/stores/alt/actions/UIActions';
-import UserActions from 'src/stores/alt/actions/UserActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import { elementNames } from 'src/apps/generic/Utils';
-
-const collectionShow = (e) => {
-  UIActions.showElements.defer();
-  UserActions.fetchCurrentUser();
-  const { profile } = UserStore.getState();
-  if (!profile) {
-    UserActions.fetchProfile();
-  }
-  const uiState = UIStore.getState();
-  const currentSearchSelection = uiState.currentSearchSelection;
-  const collectionId = e.params['collectionID'];
-  let collectionPromise = null;
-  if (collectionId === 'all') {
-    collectionPromise = CollectionStore.findAllCollection();
-  } else {
-    collectionPromise = CollectionStore.findById(collectionId);
-  }
-
-  collectionPromise.then((result) => {
-    const collection = result && result.collection;
-
-    if (currentSearchSelection) {
-      UIActions.selectCollectionWithoutUpdating(collection);
-      ElementActions.fetchBasedOnSearchSelectionAndCollection({
-        selection: currentSearchSelection,
-        collectionId: collection.id,
-        isSync: !!collection.is_sync_to_me });
-    } else {
-      UIActions.selectCollection(collection);
-    }
-
-    // if (!e.params['sampleID'] && !e.params['reactionID'] &&
-        // !e.params['wellplateID'] && !e.params['screenID']) {
-    UIActions.uncheckAllElements({ type: 'sample', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'reaction', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'wellplate', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'screen', range: 'all' });
-    elementNames(false).forEach((klass) => { UIActions.uncheckAllElements({ type: klass, range: 'all' }); });
-    // }
-  });
-};
-
-const collectionShowCollectionManagement = () => {
-  UIActions.showCollectionManagement();
-};
-
-const scollectionShow = (e) => {
-  UIActions.showElements();
-  UserActions.fetchCurrentUser();
-  const { profile } = UserStore.getState();
-  if (!profile) {
-    UserActions.fetchProfile();
-  }
-  const uiState = UIStore.getState();
-  const currentSearchSelection = uiState.currentSearchSelection;
-  const collectionId = e.params['collectionID'];
-  let collectionPromise = null;
-  collectionPromise = CollectionStore.findBySId(collectionId);
-
-  collectionPromise.then((result) => {
-    const collection = result.sync_collections_user;
-
-    if (currentSearchSelection) {
-      UIActions.selectCollectionWithoutUpdating(collection);
-      ElementActions.fetchBasedOnSearchSelectionAndCollection({
-        selection: currentSearchSelection,
-        collectionId: collection.id,
-        isSync: !!collection.is_sync_to_me });
-    } else {
-      UIActions.selectSyncCollection(collection);
-    }
-
-    // if (!e.params['sampleID'] && !e.params['reactionID'] && !e.params['wellplateID'] && !e.params['screenID']) {
-    UIActions.uncheckAllElements({ type: 'sample', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'reaction', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'wellplate', range: 'all' });
-    UIActions.uncheckAllElements({ type: 'screen', range: 'all' });
-    elementNames(false).forEach((klass) => { UIActions.uncheckAllElements({ type: klass, range: 'all' }); });
-
-    // }
-  });
-};
-
-const reportShowReport = () => {
-  ElementActions.showReportContainer();
-};
-
-const predictionShowFwdRxn = () => {
-  ElementActions.showPredictionContainer();
-};
-
-const sampleShowOrNew = (e) => {
-  const { sampleID, collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState();
-  const index = selecteds.findIndex((el) => el.type === 'sample' && el.id === sampleID);
-
-  if (sampleID === 'new') {
-    ElementActions.generateEmptySample(collectionID);
-  } else if (sampleID === 'copy') {
-    ElementActions.copySampleFromClipboard.defer(collectionID);
-  } else if (index < 0) {
-    ElementActions.fetchSampleById(sampleID);
-  } else if (index !== activeKey) {
-    DetailActions.select(index);
-  }
-  // UIActions.selectTab(1);
-};
-
-const reactionShow = (e) => {
-  const { reactionID, collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState();
-  const index = selecteds.findIndex((el) => el.type === 'reaction' && el.id === reactionID);
-  // UIActions.selectTab(2);
-  if (reactionID === 'new') {
-    ElementActions.generateEmptyReaction(collectionID);
-  } else if (reactionID === 'copy') {
-    //ElementActions.copyReactionFromClipboard(collectionID);
-  } else if (index < 0) {
-    ElementActions.fetchReactionById(reactionID);
-  } else if (index !== activeKey) {
-    DetailActions.select(index);
-  }
-};
-
-const reactionShowSample = (e) => {
-  const { reactionID, sampleID } = e.params;
-  ElementActions.editReactionSample(reactionID, sampleID);
-};
-
-const wellplateShowOrNew = (e) => {
-  const { wellplateID, collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState();
-  const index = selecteds.findIndex((el) => el.type === 'wellplate' && el.id === wellplateID);
-
-  if (wellplateID === 'new') {
-    ElementActions.generateEmptyWellplate(collectionID);
-  } else if (wellplateID === 'template') {
-    ElementActions.generateWellplateFromClipboard.defer(collectionID);
-  } else if (index < 0) {
-    ElementActions.fetchWellplateById(wellplateID);
-  } else if (index !== activeKey) {
-    DetailActions.select(index);
-  }
-};
-
-const wellplateShowSample = (e) => {
-  const { wellplateID, sampleID } = e.params;
-  ElementActions.editWellplateSample(wellplateID, sampleID);
-};
-
-const screenShowOrNew = (e) => {
-  const { screenID, collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState();
-  const index = selecteds.findIndex((el) => el.type === 'screen' && el.id === screenID);
-
-  if (screenID === 'new') {
-    ElementActions.generateEmptyScreen(collectionID);
-  } else if (screenID === 'template') {
-    ElementActions.generateScreenFromClipboard.defer(collectionID);
-  } else if (index < 0) {
-    ElementActions.fetchScreenById(screenID);
-  } else if (index !== activeKey) {
-    DetailActions.select(index);
-  }
-};
-
-const devicesAnalysisCreate = (e) => {
-  const { deviceId, analysisType } = e.params;
-  ElementActions.createDeviceAnalysis(deviceId, analysisType);
-};
-
-const devicesAnalysisShow = (e) => {
-  const { analysisId } = e.params;
-  ElementActions.fetchDeviceAnalysisById(analysisId);
-};
-
-const deviceShow = (e) => {
-  const { deviceId } = e.params;
-  ElementActions.fetchDeviceById(deviceId);
-};
-
-const deviceShowDeviceManagement = () => {
-  UIActions.showDeviceManagement();
-};
-
-const researchPlanShowOrNew = (e) => {
-  const { research_planID, collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState();
-  const index = selecteds.findIndex(el => el.type === 'research_plan' && el.id === research_planID);
-
-  if (research_planID === 'new') {
-    ElementActions.generateEmptyResearchPlan(collectionID);
-  } else if (index < 0) {
-    ElementActions.fetchResearchPlanById(research_planID);
-  } else if (index !== activeKey) {
-    DetailActions.select(index);
-  }
-};
-
-const metadataShowOrNew = (e) => {
-  const { collectionID } = e.params;
-  const { selecteds, activeKey } = ElementStore.getState()
-
-  // check if the metadata detail tab is alredy open
-  const index = selecteds.findIndex(el => el.collection_id == collectionID)
-  if (index < 0) {
-    // not found, fetch the metadata from the server
-    ElementActions.fetchMetadata(collectionID);
-  } else if (index != activeKey) {
-    // not active, activate tab
-    DetailActions.select(index)
-  }
-};
-
-const genericElShowOrNew = (e, type) => {
-  const { collectionID } = e.params;
-  let itype = '';
-  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
-    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
-    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
-  } else {
-    itype = type;
-  }
-
-  const genericElID = e.params[`${itype}ID`];
-  if (genericElID === 'new') {
-    ElementActions.generateEmptyGenericEl(collectionID, itype);
-  } else if (genericElID === 'copy') {
-    //
-  } else {
-    ElementActions.fetchGenericElById(genericElID, itype);
-  }
-};
-
-const genericElShowOrNew = (e, type) => {
-  const { collectionID } = e.params;
-  let itype = '';
-  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
-    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
-    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
-  } else {
-    itype = type;
-  }
-
-  const genericElID = e.params[`${itype}ID`];
-  if (genericElID === 'new') {
-    ElementActions.generateEmptyGenericEl(collectionID, itype);
-  } else if (genericElID === 'copy') {
-    //
-  } else {
-    ElementActions.fetchGenericElById(genericElID, itype);
-  }
-};
-
-const elementShowOrNew = (e) => {
-  const type = e.type;
-  switch(type) {
-    case 'sample':
-      sampleShowOrNew(e);
-      break;
-    case 'reaction':
-      reactionShow(e);
-      break;
-    case 'wellplate':
-      wellplateShowOrNew(e);
-      break;
-    case 'screen':
-      screenShowOrNew(e);
-      break;
-    case 'research_plan':
-      researchPlanShowOrNew(e);
-      break;
-    case 'metadata':
-      metadataShowOrNew(e);
-      break;
-    default:
-      if (e && e.klassType == 'GenericEl') {
-        genericElShowOrNew(e, type);
-        break;
-      }
-      return null;
-  }
-  return null;
-};
-
-export {
-  collectionShow,
-  scollectionShow,
-  collectionShowCollectionManagement,
-  reportShowReport,
-  sampleShowOrNew,
-  reactionShow,
-  reactionShowSample,
-  wellplateShowOrNew,
-  wellplateShowSample,
-  screenShowOrNew,
-  devicesAnalysisCreate,
-  devicesAnalysisShow,
-  deviceShow,
-  deviceShowDeviceManagement,
-  researchPlanShowOrNew,
-  metadataShowOrNew,
-  elementShowOrNew,
-  predictionShowFwdRxn,
-  genericElShowOrNew
-};
diff --git a/app/packs/src/components/scifinder/ScifinderCredential.js b/app/packs/src/components/scifinder/ScifinderCredential.js
deleted file mode 100644
index 34d5bee7e..000000000
--- a/app/packs/src/components/scifinder/ScifinderCredential.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { Button, Panel, Row, Col } from 'react-bootstrap';
-import moment from 'moment';
-import uuid from 'uuid';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import NotificationActions from '../actions/NotificationActions';
-
-const ScifinderCredential = () => {
-  const [credential, setCredential] = useState({});
-  const notify = (_params) => {
-    NotificationActions.add({
-      title: _params.title, message: _params.msg, level: _params.lvl, position: 'tc', dismissible: 'button', uid: uuid.v4()
-    });
-  };
-
-  useEffect(() => {
-    UsersFetcher.scifinderCredential().then((json) => {
-      setCredential(json);
-    }).catch(err => notify({ title: 'SciFinder-n Error', lvl: 'error', msg: err }));
-  }, [credential.access_token]);
-
-  return (
-    <Panel>
-      <Panel.Heading><Panel.Title>SciFinder-n Credential</Panel.Title></Panel.Heading>
-      <Panel.Body>
-        <Row>
-          <Col sm={4}><b style={{ float: 'right' }}>Current token will expire at</b></Col>
-          <Col sm={4}>
-            { credential.expires_at ? `${moment(credential.expires_at).format('YYYY-MM-DD HH:mm:ss')} UTC` : '' }
-          </Col>
-          <Col sm={4}><Button bsStyle="primary" href={`${window.location.origin}/users/auth/oauth2`}>Get token</Button></Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-export default ScifinderCredential;
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('ScifinderCredential');
-  if (domElement) { ReactDOM.render(<ScifinderCredential />, domElement); }
-});
diff --git a/app/packs/src/components/search/AutoCompleteInput.js b/app/packs/src/components/search/AutoCompleteInput.js
deleted file mode 100644
index 931a64f61..000000000
--- a/app/packs/src/components/search/AutoCompleteInput.js
+++ /dev/null
@@ -1,426 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FormGroup, InputGroup, FormControl, Overlay, ListGroup, ListGroupItem, OverlayTrigger, Tooltip }
-  from 'react-bootstrap';
-import debounce from 'es6-promise-debounce';
-import { isString } from 'lodash';
-
-import KeyboardActions from 'src/stores/alt/actions/KeyboardActions';
-import KeyboardStore from 'src/stores/alt/stores/KeyboardStore';
-
-import UIActions from 'src/stores/alt/actions/UIActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-
-export default class AutoCompleteInput extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: '',
-      valueBeforeFocus: null,
-      showSuggestions: false,
-      suggestions: null,
-      suggestionFocus: null,
-      error: '',
-      inputWidth: 0,
-      inputDisabled: false,
-      timeoutReference: null,
-      keyboardContext: ''
-    }
-
-    this.onUIChange = this.onUIChange.bind(this)
-    this.overlayTarget = React.createRef();
-
-    this.timeout = 6e2 // 600ms timeout for input typing
-    this.doneTyping = this.doneTyping.bind(this)
-  }
-
-  componentDidMount() {
-    UIStore.listen(this.onUIChange)
-    this.initInputWidth()
-  }
-
-  componentWillUnmount() {
-    UIStore.unlisten(this.onUIChange);
-  }
-
-  onUIChange(state) {
-    let inputDisabled = false
-    let value = ''
-
-    if (state.currentSearchSelection) {
-      inputDisabled = true
-      let selection = state.currentSearchSelection
-
-      if (selection.search_by_method === "substring") {
-        value = selection.name
-      } else {
-        value = selection.search_by_method
-      }
-    }
-
-    this.setState({
-      value : value,
-      inputDisabled : inputDisabled
-    })
-  }
-
-  initInputWidth() {
-    const input = ReactDOM.findDOMNode(this.refs.input)
-    if (input) {
-      this.setState({ inputWidth: input.offsetWidth })
-    }
-  }
-
-  focusNewSuggestionIndex(direction=1) {
-    let {suggestions, suggestionFocus} = this.state
-    let length = suggestions.length
-    let sF = suggestionFocus == null ? length - 1 : suggestionFocus
-    let newSuggestionIndex = sF + direction
-    if (newSuggestionIndex >= length) {newSuggestionIndex = 0}
-    if (newSuggestionIndex < 0) {newSuggestionIndex = length - 1}
-    this.focusSuggestion(newSuggestionIndex)
-  }
-
-  focusSuggestion(newFocus) {
-    let {suggestions, suggestionFocus, value, valueBeforeFocus} = this.state
-    let newState = {}
-    let sF = !suggestionFocus ? 0 : suggestionFocus
-    if(!valueBeforeFocus) {
-      newState.valueBeforeFocus = value
-    }
-    newState.value = suggestions[newFocus].name
-
-    if (!isString(newState.value)) {
-      newState.value = suggestions[newFocus].name.name || suggestions[newFocus].name.value;
-    }
-
-    newState.suggestionFocus = newFocus
-    ReactDOM.findDOMNode(this.refs['suggestion_' + sF])
-            .classList.remove('active')
-    let newFocusDom = ReactDOM.findDOMNode(this.refs['suggestion_' + newFocus])
-    newFocusDom.classList.add('active')
-
-    this.setState(newState)
-
-    const listSuggestions = this.listSuggestions;
-
-    // Scroll to element
-    if (listSuggestions &&
-        (newFocusDom.offsetTop > (listSuggestions.scrollTop + listSuggestions.offsetHeight - 70) ||
-        (newFocusDom.offsetTop < listSuggestions.scrollTop))) {
-      listSuggestions.scrollTop = newFocusDom.offsetTop - (11 * listSuggestions.offsetTop);
-    }
-  }
-
-  resetComponent() {
-    this.setState({
-      value: '',
-      valueBeforeFocus: null,
-      showSuggestions: false,
-      suggestions: null,
-      suggestionFocus: null,
-      error: ''
-    })
-  }
-
-  // TODO implement continue fetching in the end of scroll
-  fetchSuggestions(value, show = true) {
-    let debounced = debounce(this.props.suggestions, 200)
-    debounced(value).then(result => {
-      let newState = {}
-      if(result?.length > 0) {
-        newState.suggestions = result
-        newState.showSuggestions = show
-      } else {
-        newState.suggestions = null
-        newState.error = "Nothing was found."
-        newState.suggestionFocus = null
-        newState.showSuggestions = false
-      }
-      this.setState(newState)
-    }).catch(error => console.log(error))
-  }
-
-  doneTyping() {
-    let {value} = this.state
-    if(!value) {
-      this.resetComponent()
-    } else {
-      // From https://gist.github.com/lsauer/1312860
-      // TODO Validate if the input is InChi, InChiKey or SMILES
-      this.fetchSuggestions(value)
-    }
-  }
-
-  // Keep chaging the input value until user finish typing
-  handleValueChange(event, doneTyping) {
-    let {value} = event.target
-    let {timeoutReference} = this.state
-
-    if(!value) {
-      this.resetComponent()
-    } else {
-      if (timeoutReference) {
-        clearTimeout(timeoutReference)
-      }
-
-      this.setState({
-        value: value,
-        timeoutReference: setTimeout(function(){
-                                      doneTyping()
-                                    }, this.timeout)
-      })
-    }
-  }
-
-  handleFocus() {
-    let keyboardState = KeyboardStore.getState()
-    this.setState({
-      keyboardContext: keyboardState.context
-    })
-
-    KeyboardActions.contextChange("search")
-  }
-
-  handleBlur() {
-    KeyboardActions.contextChange(this.state.keyboardContext)
-  }
-
-  handleKeyDown(event) {
-    let {value, valueBeforeFocus, showSuggestions, error, suggestions} =
-      this.state
-    let {onSelectionChange} = this.props
-    let newState = {}
-    switch(event.keyCode) {
-      case 13: // Enter
-        this.selectSuggestion()
-        event.preventDefault()
-        break
-      case 27: // ESC
-        this.abortAutoSelection()
-        event.preventDefault()
-        break
-      case 38: // Up
-        if(showSuggestions && !error) {
-          this.focusNewSuggestionIndex(-1)
-        }
-        event.preventDefault()
-        break
-      case 40: // Down
-        if(showSuggestions && !error) {
-          this.focusNewSuggestionIndex(+1)
-        } else if(suggestions) {
-          newState.showSuggestions = true
-        }
-        event.preventDefault()
-        break
-    }
-    this.setState(newState)
-  }
-
-  selectSuggestion() {
-    let {suggestions, suggestionFocus, timeoutReference, value} = this.state
-    let {onSelectionChange} = this.props
-    this.setState({
-      showSuggestions: false,
-      valueBeforeFocus: null
-    })
-    if (!isString(value) && value) {
-      value = value.name || value.value;
-      this.setState({ value })
-    }
-
-    if (!isString(value)) {
-      value = value.name;
-      this.setState({ value });
-    }
-
-    if (!value || value.trim() === '') {
-      this.setState({
-        value: ''
-      })
-      let {currentCollection, isSync} = UIStore.getState();
-      currentCollection['clearSearch'] = true
-      isSync ? UIActions.selectSyncCollection(currentCollection)
-        : UIActions.selectCollection(currentCollection);
-
-      return 0
-    }
-
-    let selection = {name: value, search_by_method: 'substring'}
-    if (suggestions && suggestionFocus != null && suggestions[suggestionFocus]) {
-      let selectedSuggestion = suggestions[suggestionFocus]
-      let selectedName = selectedSuggestion.name;
-
-      if (!isString(selectedName)) {
-        selectedName = selectedName.name;
-      }
-
-      if (selectedName && selectedName.trim() != '' && this.state.value == selectedName)
-        if (selectedSuggestion.search_by_method == 'element_short_label') {
-          selection = {name: selectedSuggestion.name.name, search_by_method: `element_short_label_${selectedSuggestion.name.klass}`}
-        } else {
-          selection = selectedSuggestion
-        }
-    }
-
-    clearTimeout(timeoutReference)
-    onSelectionChange(selection)
-  }
-
-  abortAutoSelection() {
-    let {valueBeforeFocus} = this.state
-    this.setState({
-      showSuggestions: false,
-      value: valueBeforeFocus,
-      valueBeforeFocus: null,
-      suggestionFocus: null
-    })
-  }
-
-  renderSuggestions() {
-    let {suggestions, error} = this.state
-    let types = {
-      chemotion_id: {icon: 'icon-sample', label: 'Chemotion Id'},
-      sample_name : {icon: 'icon-sample', label: 'Sample Name'},
-      sample_short_label : {icon: 'icon-sample', label: 'Sample Short Label'},
-      sample_external_label : {icon: 'icon-sample', label: 'Sample External Label'},
-      polymer_type : {icon: 'icon-polymer', label: 'Polymer'},
-      reaction_name : {icon: 'icon-reaction', label: 'Reaction name'},
-      reaction_status : {icon: 'icon-reaction', label: 'Reaction status'},
-      reaction_short_label : {icon: 'icon-reaction', label: 'Reaction label'},
-      reaction_rinchi_string: { icon: 'icon-reaction', label: 'Reaction RInChI' },
-      wellplate_name : {icon: 'icon-wellplate', label: 'Wellplate'},
-      screen_name : {icon: 'icon-screen', label: 'Screen'},
-      iupac_name : {icon: 'icon-sample', label: 'Molecule'},
-      inchistring : {icon: 'icon-sample', label: 'InChI'},
-      inchikey: { icon: 'icon-sample', label: 'InChIKey'},
-      cano_smiles : {icon: 'icon-sample', label: 'Canonical Smiles'},
-      sum_formula : {icon: 'icon-sample', label: 'Sum Formula'},
-      cas: { icon: 'icon-sample', label: 'cas' },
-      requirements : {icon: 'icon-screen', label: 'Requirement'},
-      conditions : {icon: 'icon-screen', label: 'Condition'},
-      element_short_label: {icon: 'icon-element', label: 'Element Short Label'},
-      embargo : {icon: 'fa fa-object-group', label: 'Embargo Bundle Number'}
-    }
-    if(suggestions) {
-      return (
-        <div>
-          { suggestions.map((suggestion, index) => {
-            let suggestionType = types[suggestion.search_by_method]
-            let icon = suggestionType ? suggestionType.icon : "";
-            if (suggestion.search_by_method == 'chemotion_id' && suggestion.name.startsWith('CRR-')) {
-              icon = 'icon-reaction';
-            }
-            let typeLabel = suggestionType ? suggestionType.label : ""
-            let name = '';
-
-            // Remove first "InchI" string in suggestion list
-            let inchiString = 'InChI=';
-            let inchiMatch = '';
-
-            if (suggestion.search_by_method === 'element_short_label') {
-              icon = suggestion.name.icon;
-              typeLabel = suggestion.name.label;
-              name = suggestion.name.name;
-            } else if (suggestion.search_by_method === 'cas') {
-              name = suggestion.name.value;
-            } else {
-              name = suggestion.name;
-              inchiMatch = suggestion.name.substring(0, inchiString.length)
-              if (inchiMatch === inchiString) {
-                suggestion.name = suggestion.name.replace(inchiString, "")
-              }
-            }
-
-
-            return (
-              <ListGroupItem
-                onClick={() => this.selectSuggestion()}
-                onMouseEnter={() => this.focusSuggestion(index)}
-                key={'suggestion_' + index}
-                ref={'suggestion_' + index}
-                header={name}
-                className="list-group-item-wrap"
-              >
-                <i className={icon} style={{marginRight: 2}}></i>
-                {typeLabel}
-              </ListGroupItem>
-            )
-          })}
-        </div>
-      )
-    } else if (error) {
-      return <ListGroupItem>{error}</ListGroupItem>
-    }
-    return <div />;
-  }
-
-  render() {
-    const {
-      value, showSuggestions, inputWidth, suggestions
-    } = this.state;
-    if (suggestions && suggestions.length > 6) { // show scroll after 6 results
-      this.props.suggestionsAttributes.className = 'scroll';
-    } else {
-      this.props.suggestionsAttributes.className = '';// hide scroll
-    }
-    const containerStyle = {
-      position: 'absolute',
-      width: inputWidth,
-      marginTop: -15,
-      marginLeft: -15,
-      zIndex: 2
-    };
-
-    const searchTooltip = <Tooltip id="search_tooltip">Search by IUPAC name, InChi, Smiles...</Tooltip>;
-
-    return (
-      <div style={{ position: 'relative' }} >
-        <FormGroup ref={this.overlayTarget}
-        >
-          <InputGroup >
-            <InputGroup.Button >
-              {this.props.buttonBefore}
-            </InputGroup.Button>
-              <OverlayTrigger placement="bottom" delayShow={1000} overlay={searchTooltip}>
-                <FormControl
-                  {...this.props.inputAttributes}
-                  disabled={this.state.inputDisabled || this.props.inputDisabled}
-                  type="text"
-                  value={this.props.defaultSearchValue || value || ''}
-                  autoComplete="off"
-                  ref="input"
-                  onFocus={() => this.handleFocus()}
-                  onBlur={() => this.handleBlur()}
-                  onChange={event => this.handleValueChange(event, this.doneTyping)}
-                  onKeyDown={event => this.handleKeyDown(event)}
-                />
-              </OverlayTrigger>
-            <InputGroup.Button>
-              {this.props.buttonAfter}
-            </InputGroup.Button>
-          </InputGroup>
-        </FormGroup>
-        <Overlay
-          show={showSuggestions}
-          onHide={() => this.abortAutoSelection()}
-          placement='bottom'
-          container={this}
-          rootClose={true}
-          target={this.overlayTarget.current}
-        >
-          <div style={{ ...containerStyle }} >
-            <ListGroup
-              {...this.props.suggestionsAttributes}
-              ref={(alist) => { this.listSuggestions = alist; }}
-            >
-              {this.renderSuggestions()}
-            </ListGroup>
-          </div>
-        </Overlay>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/search/Search.js b/app/packs/src/components/search/Search.js
deleted file mode 100644
index 6a06e00e8..000000000
--- a/app/packs/src/components/search/Search.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import React from 'react';
-import {
-  Glyphicon, ButtonGroup, Button, DropdownButton, MenuItem,
-  Form, FormControl, Radio, Grid, Row, Col
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import AutoCompleteInput from './AutoCompleteInput';
-import StructureEditorModal from '../structure_editor/StructureEditorModal';
-import SuggestionsFetcher from '../fetchers/SuggestionsFetcher';
-import ElementActions from '../actions/ElementActions';
-import UIStore from '../stores/UIStore';
-import UIActions from '../actions/UIActions';
-import UserStore from '../stores/UserStore';
-import GenericElCriteriaModal from '../generic/GenericElCriteriaModal';
-import GenericElCriteria from '../generic/GenericElCriteria';
-import { clsInputGroup } from '../../admin/generic/Utils';
-
-export default class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elementType: 'all',
-      showStructureEditor: false,
-      queryMolfile: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      showGenericElCriteria: false,
-      genericEl: null
-    };
-    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
-    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
-    this.hideGenericElCriteria = this.hideGenericElCriteria.bind(this);
-    this.genericElSearch = this.genericElSearch.bind(this);
-  }
-
-  handleSelectionChange(selection) {
-    const uiState = UIStore.getState();
-    const { currentCollection } = uiState;
-    const collectionId = currentCollection ? currentCollection.id : null;
-    const isPublic = this.props.isPublic;
-    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
-    selection.elementType = this.state.elementType;
-    UIActions.setSearchSelection(selection);
-    selection.page_size = uiState.number_of_results;
-    ElementActions.fetchBasedOnSearchSelectionAndCollection(
-      { selection, collectionId, isSync, isPublic });
-  }
-
-  search(query) {
-    const { currentCollection } = UIStore.getState();
-    const id = currentCollection ? currentCollection.id : null;
-    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
-    return SuggestionsFetcher.fetchSuggestionsForCurrentUser(
-      this.state.elementType.toLowerCase(), query, id, isSync
-    );
-  }
-
-  structureSearch(molfile) {
-    const uiState = UIStore.getState();
-    const { currentCollection } = uiState;
-    const collectionId = currentCollection ? currentCollection.id : null;
-    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
-    const isPublic = this.props.isPublic;
-    let tanimoto = this.state.tanimotoThreshold;
-    if (tanimoto <= 0 || tanimoto > 1) { tanimoto = 0.3; }
-    const selection = {
-      elementType: this.state.elementType,
-      molfile,
-      search_type: this.state.searchType,
-      tanimoto_threshold: tanimoto,
-      page_size: uiState.number_of_results,
-      search_by_method: 'structure',
-      structure_search: true
-    };
-    UIActions.setSearchSelection(selection);
-    ElementActions.fetchBasedOnSearchSelectionAndCollection(
-      {
-        selection, collectionId, isSync, isPublic
-      });
-  }
-
-  genericElSearch() {
-    const uiState = UIStore.getState();
-    const { currentCollection } = uiState;
-    const collectionId = currentCollection ? currentCollection.id : null;
-    const isSync = currentCollection ? currentCollection.is_sync_to_me : false;
-    const { genericEl } = this.state;
-
-
-    const selection = {
-      elementType: this.state.elementType,
-      searchName: genericEl.search_name,
-      searchShowLabel: genericEl.search_short_label,
-      genericElName: genericEl.name,
-      search_by_method: genericEl.name,
-      genericElProperties: genericEl.properties,
-      searchProperties: genericEl.search_properties,
-      page_size: uiState.number_of_results
-    };
-
-    UIActions.setSearchSelection(selection);
-    ElementActions.fetchBasedOnSearchSelectionAndCollection({
-      selection,
-      genericElName: genericEl.name,
-      collectionId,
-      isSync,
-    });
-    this.setState({ showGenericElCriteria: false });
-  }
-
-  handleClearSearchSelection() {
-    const { currentCollection, isSync } = UIStore.getState();
-    this.setState({ elementType: 'all' })
-    currentCollection['clearSearch'] = true;
-    isSync ? UIActions.selectSyncCollection(currentCollection)
-      : UIActions.selectCollection(currentCollection);
-  }
-
-  showStructureEditor() {
-    this.setState({ showStructureEditor: true });
-  }
-
-  showAdvancedSearch() {
-    UIActions.toggleAdvancedSearch(true);
-  }
-
-  hideStructureEditor() {
-    this.setState({ showStructureEditor: false });
-  }
-
-  showGenericElCriteria() {
-    this.setState({ showGenericElCriteria: true });
-  }
-
-  hideGenericElCriteria() {
-    this.setState({ showGenericElCriteria: false });
-    this.handleClearSearchSelection();
-  }
-
-  handleElementSelection(event, element = null) {
-    if (event.startsWith('elements-')) {
-      this.showGenericElCriteria();
-      this.setState({ elementType: 'elements', genericEl: element });
-    } else {
-      this.setState({ elementType: event });
-    }
-  }
-
-  handleStructureEditorSave(molfile) {
-    if (molfile) { this.setState({ queryMolfile: molfile }); }
-    // Check if blank molfile
-    const molfileLines = molfile.match(/[^\r\n]+/g);
-    // If the first character ~ num of atoms is 0, we will not search
-    if (molfileLines[1].trim()[0] !== 0) {
-      this.structureSearch(molfile);
-    }
-    this.hideStructureEditor();
-  }
-
-  handleStructureEditorCancel() {
-    this.hideStructureEditor();
-  }
-
-  handleTanimotoChange(e) {
-    const val = e.target && e.target.value;
-    if (!isNaN(val - val)) {
-      this.setState({ tanimotoThreshold: val });
-    }
-  }
-
-  handleSearchTypeChange(e) {
-    this.setState({ searchType: e.target && e.target.value });
-  }
-
-  renderMenuItems() {
-    const elements = [
-      "All",
-      "Samples", "Reactions",
-      // "Wellplates", "Screens"
-    ]
-
-    const menu = elements.map(element => (
-      <MenuItem key={element} onSelect={() => this.handleElementSelection(element.toLowerCase())}>
-        {element}
-      </MenuItem>
-    ));
-
-    menu.push(<MenuItem key="divider" divider />);
-    menu.push(
-      <MenuItem key="advanced" onSelect={this.showAdvancedSearch}>
-        Advanced Search
-      </MenuItem>
-    );
-    menu.push(<MenuItem key="divider" divider />);
-    menu.push(
-      <MenuItem key="embargo" onSelect={() => this.handleElementSelection('embargo')}>
-        Embargo Bundle#
-      </MenuItem>
-    );
-
-    menu.push(<MenuItem key="divider-generic" divider />);
-
-    const genericEls = UserStore.getState().genericEls || [];
-    const profile = UserStore.getState().profile || {};
-
-    genericEls.forEach((el) => {
-      const idx = profile.data && profile.data.layout && profile.data.layout[el.name];
-      if (idx >= 0) {
-        menu.push(<MenuItem key={`menu-el-${el.name}`} onSelect={() => this.handleElementSelection(`elements-${el.name}`, el)}>{el.label}</MenuItem>);
-      }
-    });
-
-    return menu;
-  }
-
-  render() {
-    const { profile } = UserStore.getState();
-    // const { customClass } = (profile && profile.data) || {};
-    const customClass = '.btn-unified'
-
-    const buttonAfter = (
-      <ButtonGroup>
-        <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
-          <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
-        </Button>
-        <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
-          <i className="fa fa-times" />
-        </Button>
-      </ButtonGroup>
-    );
-
-    const submitAddons = (
-      <Grid><Row>
-        <Col sm={6} md={4}>
-          <Form inline>
-            <Radio
-              ref={(input) => { this.searchSimilarRadio = input; }}
-              value="similar"
-              checked={this.state.searchType === 'similar'}
-              onChange={e => this.handleSearchTypeChange(e)}
-            >
-              &nbsp; Similarity Search &nbsp;
-            </Radio>
-            &nbsp;&nbsp;
-            <FormControl
-              style={{ width: '40%' }}
-              type="text"
-              value={this.state.tanimotoThreshold}
-              ref={(input) => { this.searchTanimotoInput = input; }}
-              onChange={e => this.handleTanimotoChange(e)}
-            />
-          </Form>
-        </Col>
-        <Col sm={4} md={2}>
-          <Radio
-            ref={(input) => { this.searchSubstructureRadio = input; }}
-            value="sub"
-            checked={this.state.searchType === 'sub'}
-            onChange={e => this.handleSearchTypeChange(e)}
-          >
-            Substructure Search
-          </Radio>
-        </Col>
-      </Row></Grid>
-    );
-
-    const inputAttributes = {
-      placeholder: 'IUPAC, InChI, SMILES, RInChI...',
-      style: { minWidth: 200, maxWidth: 300 }
-    };
-
-    const suggestionsAttributes = {
-      style: {
-        marginTop: 15,
-        width: 398,
-        maxHeight: 400
-      }
-    };
-
-    let title = (<i className={`icon-${this.state.elementType.toLowerCase().slice(0, -1)}`} />);
-    if (this.state.elementType === 'all') title = 'All';
-    if (this.state.elementType === 'embargo') title = (<i className="fa fa-object-group" />);
-
-    const innerDropdown = (
-      <DropdownButton
-        className={customClass}
-        id="search-inner-dropdown"
-        title={title}
-        style={{ width: '50px' }}
-      >
-        {this.renderMenuItems()}
-      </DropdownButton>
-    );
-
-    const mofProps = {
-      show: this.state.showGenericElCriteria,
-      type: this.state.elementType,
-      component: <GenericElCriteria genericEl={clsInputGroup(this.state.genericEl)} onHide={this.hideGenericElCriteria} onSearch={this.genericElSearch} />,
-      title: `Please input your search criteria for ${this.state.elementType}`,
-      onHide: this.hideGenericElCriteria
-    };
-
-    return (
-      <div className="chemotion-search">
-        <div className="search-structure-draw">
-          <StructureEditorModal
-            showModal={this.state.showStructureEditor}
-            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
-            onCancel={this.handleStructureEditorCancel}
-            molfile={this.state.queryMolfile}
-            submitBtnText="Search"
-            submitAddons={submitAddons}
-          />
-        </div>
-        <div className="search-autocomplete">
-          <AutoCompleteInput
-            inputAttributes={inputAttributes}
-            suggestionsAttributes={suggestionsAttributes}
-            suggestions={input => this.search(input)}
-            ref={(input) => { this.autoComplete = input; }}
-            onSelectionChange={selection => this.handleSelectionChange(selection)}
-            buttonBefore={innerDropdown}
-            buttonAfter={buttonAfter}
-          />
-        </div>
-        {
-          this.state.showGenericElCriteria ? <GenericElCriteriaModal {...mofProps} /> : <div />
-        }
-      </div>
-    );
-  }
-}
-
-Search.propTypes = {
-  noSubmit: PropTypes.bool
-};
-
-Search.defaultProps = {
-  noSubmit: false,
-};
diff --git a/app/packs/src/components/search/SearchFilter.js b/app/packs/src/components/search/SearchFilter.js
deleted file mode 100644
index 2944f71bb..000000000
--- a/app/packs/src/components/search/SearchFilter.js
+++ /dev/null
@@ -1,298 +0,0 @@
-import React from 'react'
-import {Button, FormControl, ButtonGroup, OverlayTrigger, Tooltip} from 'react-bootstrap'
-import Select from 'react-select'
-import UIActions from 'src/stores/alt/actions/UIActions';
-import PublicFetcher from 'src/repo/fetchers/PublicFetcher';
-
-export default class SearchFilter extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      showFilters: props.show,
-      advValue: null,
-      advType: 'Authors',
-      filters: [
-        {
-          link: '',
-          match: '=', // to set default search type for adv search, allows users to search better!
-          field: {
-            table: 'samples',
-            column: 'name',
-            label: 'Sample Name',
-          },
-          value: '',
-        },
-      ],
-    };
-
-    this.listOptions = [
-      {
-        value: {
-          table: 'samples',
-          column: 'name',
-          label: 'Sample Name'
-        },
-        label: 'Sample Name'
-      },
-      {
-        value: {
-          table: 'samples',
-          column: 'short_label',
-          label: 'Sample Short Label'
-        },
-        label: 'Sample Short Label'
-      },
-      {
-        value: {
-          table: 'samples',
-          column: 'external_label',
-          label: 'Sample External Label'
-        },
-        label: 'Sample External Label'
-      },
-      {
-        value: {
-          table: 'samples',
-          column: 'xref',
-          opt: 'cas',
-          label: 'CAS'
-        },
-        label: 'CAS'
-      }
-    ];
-
-
-
-    this.andOrOps = [
-      { value: "AND", label: "AND" },
-      { value: "OR", label: "OR" }
-    ]
-
-    this.matchOps = [
-      { value: "=", label: "EXACT" },
-      { value: "LIKE", label: "LIKE (substring)" },
-      { value: "ILIKE", label: "LIKE (case insensitive substring)" },
-      { value: "NOT LIKE", label: "NOT LIKE (substring)" },
-      { value: "NOT ILIKE", label: "NOT LIKE (case insensitive substring)" }
-    ]
-
-    this.search = this.search.bind(this)
-    this.showFilters = this.showFilters.bind(this)
-    this.renderField = this.renderField.bind(this)
-    this.handleUpdateFilters = this.handleUpdateFilters.bind(this)
-    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
-    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({showFilters: nextProps.show})
-  }
-
-  showFilters(bool) {
-    let show = !this.state.showFilters
-    if (typeof(bool) == "boolean") {
-      show = bool
-      UIActions.toggleAdvancedSearch(bool)
-    }
-
-    this.setState({ showFilters: show })
-  }
-
-  loadAdvValuesByName(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleSelectAdvType(val) {
-    if (val) { this.setState({ advType: val, advValue: null }); }
-  }
-
-  handleSelectAdvValue(val) {
-    if (val) {
-      this.setState({ advValue: val });
-    }
-  }
-
-  handleUpdateFilters(idx, field, val) {
-    const { filters } = this.state;
-
-    filters[idx][field] = val;
-
-    const filter = filters[filters.length - 1];
-    const check = (filter.field && filter.value && filter.link) ||
-                (idx == 0 && filter.field && filter.value);
-
-    if (check) {
-      filters.push({ link: 'OR', match: 'EXACT', field: '', value: '' });
-    }
-
-    this.setState(filters);
-  }
-
-  search() {
-    let { filters, advType, advValue } = this.state;
-
-    // Remove invalid filter
-    filters = filters.filter((f, id) => {
-      return (f.field && f.link && f.value) ||
-        (id == 0 && f.field && f.value)
-    })
-
-    const advValIds = (advValue && advValue.map(val => (val.value))) || null;
-    this.setState({
-      showFilters: false,
-    }, this.props.searchFunc(filters, { type: advType, value: advValIds }));
-  }
-
-  renderField(val) {
-    return (val.label)
-  }
-
-  renderDynamicRow() {
-    let {filters} = this.state
-
-    let dynamicRow = ( <span /> )
-
-    if (filters.length > 1) {
-      let addedFilters = filters.filter((val, idx) => idx > 0)
-
-      dynamicRow = addedFilters.map((filter, idx) => {
-        let id = idx + 1
-        return (
-          <div key={"filter_" + idx} className="adv-search-row">
-            <span className="link-select">
-              <Select simpleValue options={this.andOrOps}
-                value={filter.link} clearable={false}
-                onChange={(val) => this.handleUpdateFilters(id, "link", val)} />
-            </span>
-            <span className="match-select">
-              <Select simpleValue options={this.matchOps}
-                value={filter.match} clearable={false}
-                onChange={(val) => this.handleUpdateFilters(id, "match", val)} />
-            </span>
-            <span className="field-select">
-              <Select simpleValue options={this.listOptions} clearable={false}
-                placeholder="Select search field" value={filter.field}
-                onChange={(val) => this.handleUpdateFilters(id, "field", val)} />
-            </span>
-            <FormControl type="text" value={filters.value}
-              componentClass="textarea" rows={2}
-              className="value-select" placeholder="Search value"
-              onChange={(e) => this.handleUpdateFilters(id, "value", e.target.value)}
-            />
-          </div>
-        )
-      })
-
-    }
-
-    return dynamicRow
-  }
-
-
-  renderAdvancedSearch() {
-    const { showFilters, advType, advValue } = this.state;
-    if (showFilters === true) {
-      this.listAdvOptions = [
-        {
-          value: 'Authors',
-          label: 'by authors'
-        },
-        {
-          value: 'Contributors',
-          label: 'by contributors'
-        }
-      ];
-      return (
-        <div className="adv-search-row">
-          <span style={{ flex: '0 0 127px' }} />
-          <span className="match-select">
-            <Select
-              simpleValue
-              searchable={false}
-              options={this.listAdvOptions}
-              placeholder="Select search field"
-              clearable={false}
-              valueKey="value"
-              labelKey="label"
-              onChange={this.handleSelectAdvType}
-              defaultValue="Authors"
-              value={advType}
-              className="o-author"
-            />
-          </span>
-          <span className="field-select-full">
-            <Select.Async
-              multi
-              isLoading
-              backspaceRemoves
-              value={advValue}
-              valueKey="value"
-              labelKey="label"
-              loadOptions={this.loadAdvValuesByName}
-              onChange={this.handleSelectAdvValue}
-              className="o-name"
-            />
-          </span>
-        </div>
-      );
-    }
-    return (<div />);
-  }
-
-  render() {
-    let {showFilters, currentOption, filters} = this.state
-    if (!showFilters) return (<span />)
-
-    return (
-      <div className="advanced-search">
-        <div>
-          <div className="adv-search-row">
-            <span style={{flex: "0 0 127px"}} />
-            <span className="match-select">
-              <Select simpleValue searchable={false} options={this.matchOps}
-                placeholder="Select search type" clearable={false}
-                value={filters[0].match}
-                onChange={(val) => this.handleUpdateFilters(0, "match", val)} />
-            </span>
-            <span className="field-select">
-              <Select simpleValue searchable={false} options={this.listOptions}
-                placeholder="Select search field" clearable={false}
-                value={filters[0].field} valueRenderer={this.renderField}
-                onChange={(val) => this.handleUpdateFilters(0, "field", val)} />
-            </span>
-            <FormControl type="text" value={filters[0].value}
-              componentClass="textarea"
-              className="value-select" placeholder="Search value"
-              onChange={(e) => this.handleUpdateFilters(0, "value", e.target.value)}
-            />
-          </div>
-          {this.renderDynamicRow()}
-          {this.renderAdvancedSearch()}
-        </div>
-        <div className="footer">
-          <Button bsStyle="primary" onClick={this.search}>
-            Search
-          </Button>
-          <Button bsStyle="warning" onClick={() => this.showFilters(false)}>
-            Close
-          </Button>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/app/packs/src/components/sharing/SharingShortcuts.js b/app/packs/src/components/sharing/SharingShortcuts.js
deleted file mode 100644
index 02291dec8..000000000
--- a/app/packs/src/components/sharing/SharingShortcuts.js
+++ /dev/null
@@ -1,51 +0,0 @@
-export default class SharingShortcuts {
-  static user() {
-    return {
-      permissionLevel: 3,
-      sampleDetailLevel: 10,
-      reactionDetailLevel: 10,
-      wellplateDetailLevel: 10,
-      screenDetailLevel: 10
-    }
-  }
-
-  static partner() {
-    return {
-      permissionLevel: 1,
-      sampleDetailLevel: 10,
-      reactionDetailLevel: 0,
-      wellplateDetailLevel: 10,
-      screenDetailLevel: 1
-    }
-  }
-
-  static collaborator() {
-    return {
-      permissionLevel: 0,
-      sampleDetailLevel: 1,
-      reactionDetailLevel: 0,
-      wellplateDetailLevel: 0,
-      screenDetailLevel: 0
-    }
-  }
-
-  static reviewer() {
-    return {
-      permissionLevel: 0,
-      sampleDetailLevel: 2,
-      reactionDetailLevel: 10,
-      wellplateDetailLevel: 1,
-      screenDetailLevel: 0
-    }
-  }
-
-  static supervisor() {
-    return {
-      permissionLevel: 4,
-      sampleDetailLevel: 10,
-      reactionDetailLevel: 10,
-      wellplateDetailLevel: 10,
-      screenDetailLevel: 10
-    }
-  }
-}
diff --git a/app/packs/src/components/sso/LoginOptions.js b/app/packs/src/components/sso/LoginOptions.js
deleted file mode 100644
index 1f512866d..000000000
--- a/app/packs/src/components/sso/LoginOptions.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import {
-  Row,
-  Col,
-  Grid,
-  Button
-} from 'react-bootstrap';
-import uuid from 'uuid';
-import UserStore from '../stores/UserStore';
-import UserActions from '../actions/UserActions';
-
-export default class LoginOptions extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      omniauthProviders: []
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchOmniauthProviders();
-  }
-
-  onChange(state) {
-    const { omniauthProviders } = this.state;
-    if (state?.omniauthProviders !== omniauthProviders) {
-      this.setState({
-        omniauthProviders: state.omniauthProviders
-      });
-    }
-  }
-
-  render() {
-    const { omniauthProviders } = this.state;
-    const keys = Object.keys(omniauthProviders);
-    if (keys.length === 0) return (<span />);
-    const items = keys.map((key) => (
-      <Col key={uuid.v1()} md={12 / keys.length} className="login-options">
-        <Button href={`/users/auth/${key}`}>
-          Login with &nbsp;
-          <img src={`/images/providers/${omniauthProviders[key].icon}`} className="kit-logo" alt={key} title={key} />
-        </Button>
-      </Col>
-    ));
-
-    return (
-      <Grid>
-        <Row>
-          {items}
-        </Row>
-      </Grid>
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('LoginOptions');
-  if (domElement) { ReactDOM.render(<LoginOptions />, domElement); }
-});
diff --git a/app/packs/src/components/sso/OmniauthCredential.js b/app/packs/src/components/sso/OmniauthCredential.js
deleted file mode 100644
index f97332855..000000000
--- a/app/packs/src/components/sso/OmniauthCredential.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Button, Panel, Row, Col } from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import UsersFetcher from '../fetchers/UsersFetcher';
-import NotificationActions from '../actions/NotificationActions';
-
-function OmniauthCredential() {
-  const notify = (_params) => {
-    NotificationActions.add({
-      title: _params.title, message: _params.msg, level: _params.lvl, position: 'tc', dismissible: 'button', uid: uuid.v4()
-    });
-  };
-
-  const [providers, setProviders] = useState(() => {
-    UsersFetcher.fetchUserOmniauthProviders().then((json) => {
-      const userProviders = (json?.current_user?.providers) || {};
-
-      setProviders(userProviders);
-    }).catch((err) => notify({ title: 'Fetch User Providers Error', lvl: 'error', msg: err }));
-    return (providers);
-  });
-
-  let omniauthProviders = (<span />);
-
-  if (typeof omniauthProviders !== 'undefined' && omniauthProviders !== null) {
-    omniauthProviders = providers && Object.keys(providers).map((key) => (
-      <Row key={uuid.v1()}>
-        <Col key={uuid.v1()} md={2} />
-        <Col key={uuid.v1()} md={5}>{key}</Col>
-        <Col key={uuid.v1()} md={5}>{providers[key]}</Col>
-      </Row>
-    ));
-  }
-
-  return (
-    <Panel>
-      <Panel.Heading><Panel.Title>3rd-Party Credential</Panel.Title></Panel.Heading>
-      <Panel.Body>
-        {omniauthProviders}
-        <br />
-      </Panel.Body>
-    </Panel>
-  );
-}
-
-export default OmniauthCredential;
-
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('OmniauthCredential');
-  if (domElement) { ReactDOM.render(<OmniauthCredential />, domElement); }
-});
diff --git a/app/packs/src/components/staticDropdownOptions/options.js b/app/packs/src/components/staticDropdownOptions/options.js
index 3ebdf5aea..5b116d6ba 100644
--- a/app/packs/src/components/staticDropdownOptions/options.js
+++ b/app/packs/src/components/staticDropdownOptions/options.js
@@ -1,322 +1,424 @@
 export const solventOptions = [{
-    label: 'Acetic acid',
-    value: 'Acetic acid'
-  }, {
-    label: 'Acetone',
-    value: 'Acetone'
-  }, {
-    label: 'Acetonitrile',
-    value: 'Acetonitrile'
-  }, {
-    label: 'Benzene',
-    value: 'Benzene'
-  }, {
-    label: 'Butanol',
-    value: 'Butanol'
-  }, {
-    label: 'Carbon tetrachloride (CCl4)',
-    value: 'Carbon tetrachloride'
-  }, {
-    label: 'Chloroform',
-    value: 'Chloroform'
-  }, {
-    label: 'Cyclohexane',
-    value: 'Cyclohexane'
-  }, {
-    label: 'Diethyl ether',
-    value: 'Diethyl ether'
-  }, {
-    label: 'Dimethyl sulfoxide (DMSO)',
-    value: 'Dimethyl sulfoxide'
-  }, {
-    label: 'Dimethylformamide (DMF)',
-    value: 'Dimethylformamide'
-  }, {
-    label: '1,4-Dioxane',
-    value: '1,4-Dioxane'
-  }, {
-    label: 'Ethanol',
-    value: 'Ethanol'
-  }, {
-    label: 'Ethyl acetate',
-    value: 'Ethyl acetate'
-  }, {
-    label: 'Isopropanol',
-    value: 'Isopropanol'
-  }, {
-    label: 'Methanol',
-    value: 'Methanol'
-  }, {
-    label: 'Methylene chloride (DCM)',
-    value: 'Methylene chloride'
-  }, {
-    label: 'Methyl tert-butyl ether (MTBE)',
-    value: 'Methyl tert-butyl ether'
-  }, {
-    label: 'n-Hexane',
-    value: 'n-Hexane'
-  }, {
-    label: 'N-Methyl-2-pyrrolidone (NMP)',
-    value: 'N-Methyl-2-pyrrolidone'
-  }, {
-    label: 'Pentane',
-    value: 'Pentane'
-  }, {
-    label: 'Pyridine',
-    value: 'Pyridine'
-  }, {
-    label: 'Tetrahydrofuran (THF)',
-    value: 'Tetrahydrofuran'
-  }, {
-    label: 'Toluene',
-    value: 'Toluene'
-  }, {
-    label: 'Water',
-    value: 'Water'
-  }, {
-    label: 'CDCl3',
-    value: 'CDCl3'
-  }, {
-    label: 'MeOD-d4',
-    value: 'MeOD-d4'
-  }, {
-    label: 'C6D6',
-    value: 'C6D6'
-  }, {
-    label: 'D2O',
-    value: 'D2O'
-  }];
-
+  label: 'Acetic acid',
+  value: 'Acetic acid'
+}, {
+  label: 'Acetone',
+  value: 'Acetone'
+}, {
+  label: 'Acetonitrile',
+  value: 'Acetonitrile'
+}, {
+  label: 'Benzene',
+  value: 'Benzene'
+}, {
+  label: 'Butanol',
+  value: 'Butanol'
+}, {
+  label: 'Carbon tetrachloride (CCl4)',
+  value: 'Carbon tetrachloride'
+}, {
+  label: 'Chloroform',
+  value: 'Chloroform'
+}, {
+  label: 'Cyclohexane',
+  value: 'Cyclohexane'
+}, {
+  label: 'Diethyl ether',
+  value: 'Diethyl ether'
+}, {
+  label: 'Dimethyl sulfoxide (DMSO)',
+  value: 'Dimethyl sulfoxide'
+}, {
+  label: 'Dimethylformamide (DMF)',
+  value: 'Dimethylformamide'
+}, {
+  label: '1,4-Dioxane',
+  value: '1,4-Dioxane'
+}, {
+  label: 'Ethanol',
+  value: 'Ethanol'
+}, {
+  label: 'Ethyl acetate',
+  value: 'Ethyl acetate'
+}, {
+  label: 'Isopropanol',
+  value: 'Isopropanol'
+}, {
+  label: 'Methanol',
+  value: 'Methanol'
+}, {
+  label: 'Methylene chloride (DCM)',
+  value: 'Methylene chloride'
+}, {
+  label: 'Methyl tert-butyl ether (MTBE)',
+  value: 'Methyl tert-butyl ether'
+}, {
+  label: 'n-Hexane',
+  value: 'n-Hexane'
+}, {
+  label: 'N-Methyl-2-pyrrolidone (NMP)',
+  value: 'N-Methyl-2-pyrrolidone'
+}, {
+  label: 'Pentane',
+  value: 'Pentane'
+}, {
+  label: 'Pyridine',
+  value: 'Pyridine'
+}, {
+  label: 'Tetrahydrofuran (THF)',
+  value: 'Tetrahydrofuran'
+}, {
+  label: 'Toluene',
+  value: 'Toluene'
+}, {
+  label: 'Water',
+  value: 'Water'
+}, {
+  label: 'CDCl3',
+  value: 'CDCl3'
+}, {
+  label: 'MeOD-d4',
+  value: 'MeOD-d4'
+}, {
+  label: 'C6D6',
+  value: 'C6D6'
+}, {
+  label: 'D2O',
+  value: 'D2O'
+}];
 
 export const defaultMultiSolventsSmilesOptions = [{
   label: 'Acetic acid',
-  value: { external_label: 'Acetic acid',
-           smiles: 'CC(O)=O',
-           density: 1.05 }
-  }, {
+  value: {
+    external_label: 'Acetic acid',
+    smiles: 'CC(O)=O',
+    density: 1.05
+  }
+}, {
   label: 'Acetone',
-  value: { external_label: 'Acetone',
-           smiles: 'CC(C)=O',
-           density: 0.79 }
-  }, {
+  value: {
+    external_label: 'Acetone',
+    smiles: 'CC(C)=O',
+    density: 0.79
+  }
+}, {
   label: 'Acetonitrile',
-  value: { external_label: 'Acetonitrile',
-           smiles: 'CC#N',
-           density: 0.78 }
-  }, {
+  value: {
+    external_label: 'Acetonitrile',
+    smiles: 'CC#N',
+    density: 0.78
+  }
+}, {
   label: 'Argon',
-  value: { external_label: 'Ar',
-           smiles: '[Ar]',
-          density: 0.001633 }
-  }, {
+  value: {
+    external_label: 'Ar',
+    smiles: '[Ar]',
+    density: 0.001633
+  }
+}, {
   label: 'Benzene',
-  value: { external_label: 'Benzene',
-           smiles: 'C1=CC=CC=C1',
-           density: 0.88 }
-  }, {
+  value: {
+    external_label: 'Benzene',
+    smiles: 'C1=CC=CC=C1',
+    density: 0.88
+  }
+}, {
+  label: '2-Butanone',
+  value: {
+    external_label: '2-Butanone',
+    smiles: 'CCC(=O)C',
+    density: 0.805
+  }
+}, {
   label: 'n-Butanol',
-  value: { external_label: 'n-Butanol',
-           smiles: 'CCCCO',
-           density: 0.81 }
-  }, {
+  value: {
+    external_label: 'n-Butanol',
+    smiles: 'CCCCO',
+    density: 0.81
+  }
+}, {
   label: 'Carbon tetrachloride (CCl4)',
-  value: { external_label: 'CCl4',
-           smiles: 'ClC(Cl)(Cl)Cl',
-           density: 1.594 }
-  }, {
+  value: {
+    external_label: 'CCl4',
+    smiles: 'ClC(Cl)(Cl)Cl',
+    density: 1.594
+  }
+}, {
   label: 'Chloroform',
-  value: { external_label: 'Chloroform',
-           smiles: 'ClC(Cl)Cl',
-           density: 1.48 }
-  }, {
+  value: {
+    external_label: 'Chloroform',
+    smiles: 'ClC(Cl)Cl',
+    density: 1.48
+  }
+}, {
   label: 'Cyclohexane',
-  value: { external_label: 'Cyclohexane',
-           smiles: 'C1CCCCC1',
-           density: 0.78 }
-  }, {
+  value: {
+    external_label: 'Cyclohexane',
+    smiles: 'C1CCCCC1',
+    density: 0.78
+  }
+}, {
   label: 'Diethyl ether',
-  value: { external_label: 'Diethyl ether',
-           smiles: 'CCOCC',
-           density: 0.71 }
-  }, {
+  value: {
+    external_label: 'Diethyl ether',
+    smiles: 'CCOCC',
+    density: 0.71
+  }
+}, {
   label: 'Dimethyl sulfoxide (DMSO)',
-  value: { external_label: 'DMSO',
-           smiles: 'CS(C)=O',
-           density: 1.10 }
-  }, {
+  value: {
+    external_label: 'DMSO',
+    smiles: 'CS(C)=O',
+    density: 1.10
+  }
+}, {
   label: 'Dimethylformamide (DMF)',
-  value: { external_label: 'DMF',
-           smiles: 'CN(C)C=O',
-           density: 0.95 }
-  }, {
+  value: {
+    external_label: 'DMF',
+    smiles: 'CN(C)C=O',
+    density: 0.95
+  }
+}, {
   label: '1,4-Dioxane',
-  value: { external_label: '1,4-Dioxane',
-           smiles: 'C1COCCO1',
-           density: 1.03 }
-  }, {
+  value: {
+    external_label: '1,4-Dioxane',
+    smiles: 'C1COCCO1',
+    density: 1.03
+  }
+}, {
   label: 'Ethanol',
-  value: { external_label: 'Ethanol',
-           smiles: 'OCC',
-           density: 0.789 }
-  }, {
+  value: {
+    external_label: 'Ethanol',
+    smiles: 'OCC',
+    density: 0.789
+  }
+}, {
   label: 'Ethyl acetate',
-  value: { external_label: 'Ethyl acetate',
-           smiles: 'CC(OCC)=O',
-           density: 0.894 }
-  }, {
+  value: {
+    external_label: 'Ethyl acetate',
+    smiles: 'CC(OCC)=O',
+    density: 0.894
+  }
+}, {
   label: 'Isopropanol',
-  value: { external_label: 'Isopropanol',
-           smiles: 'CC(O)C',
-           density: 0.78 }
-  }, {
+  value: {
+    external_label: 'Isopropanol',
+    smiles: 'CC(O)C',
+    density: 0.78
+  }
+}, {
   label: 'Methanol',
-  value: { external_label: 'Methanol',
-           smiles: 'CO',
-           density: 0.79 }
-  }, {
+  value: {
+    external_label: 'Methanol',
+    smiles: 'CO',
+    density: 0.79
+  }
+}, {
   label: 'Methylene chloride (DCM)',
-  value: { external_label: 'DCM',
-           smiles: 'ClCCl',
-           density: 1.33 }
-  }, {
+  value: {
+    external_label: 'DCM',
+    smiles: 'ClCCl',
+    density: 1.33
+  }
+}, {
   label: 'Methyl tert-butyl ether (MTBE)',
-  value: { external_label: 'MTBE',
-           smiles: 'O(C(C)(C)C)C',
-           density: 0.74 }
-  }, {
+  value: {
+    external_label: 'MTBE',
+    smiles: 'O(C(C)(C)C)C',
+    density: 0.74
+  }
+}, {
   label: 'N2',
-  value: { external_label: 'N2',
-           smiles: 'N#N',
-           density: 0.00125 }
-  }, {
+  value: {
+    external_label: 'N2',
+    smiles: 'N#N',
+    density: 0.00125
+  }
+}, {
   label: 'n-Hexane',
-  value: { external_label: 'n-Hexane',
-           smiles: 'CCCCCC',
-           density: 0.66 }
-  }, {
+  value: {
+    external_label: 'n-Hexane',
+    smiles: 'CCCCCC',
+    density: 0.66
+  }
+}, {
   label: 'N-Methyl-2-pyrrolidone (NMP)',
-  value: { external_label: 'NMP',
-           smiles: 'O=C1CCCN1C',
-           density: 1.03 }
-  }, {
+  value: {
+    external_label: 'NMP',
+    smiles: 'O=C1CCCN1C',
+    density: 1.03
+  }
+}, {
   label: 'Pentane',
-  value: { external_label: 'Pentane',
-           smiles: 'CCCCC',
-           density: 0.63 }
-  }, {
+  value: {
+    external_label: 'Pentane',
+    smiles: 'CCCCC',
+    density: 0.63
+  }
+}, {
   label: 'Pyridine',
-  value: { external_label: 'Pyridine',
-           smiles: 'C1=CC=NC=C1',
-           density: 0.98 }
-  }, {
+  value: {
+    external_label: 'Pyridine',
+    smiles: 'C1=CC=NC=C1',
+    density: 0.98
+  }
+}, {
+  label: 'Tetramethylethylenediamine (TMEDA)',
+  value: {
+    external_label: 'TMEDA',
+    smiles: 'CN(C)CCN(C)C',
+    density: 0.775
+  }
+}, {
   label: 'Tetrahydrofuran (THF)',
-  value: { external_label: 'THF',
-           smiles: 'C1CCCO1',
-           density: 0.889 }
-  }, {
+  value: {
+    external_label: 'THF',
+    smiles: 'C1CCCO1',
+    density: 0.889
+  }
+}, {
   label: 'Toluene',
-  value: { external_label: 'Toluene',
-           smiles: 'CC1=CC=CC=C1',
-           density: 0.87 }
-  }, {
+  value: {
+    external_label: 'Toluene',
+    smiles: 'CC1=CC=CC=C1',
+    density: 0.87
+  }
+}, {
   label: 'Water',
-  value: { external_label: 'Water',
-           smiles: '[H]O[H]',
-           density: 1.00 }
-  }, {
+  value: {
+    external_label: 'Water',
+    smiles: '[H]O[H]',
+    density: 1.00
+  }
+}, {
   label: 'CDCl3',
-  value: { external_label: 'CDCl3',
-           smiles: '[2H]C(Cl)(Cl)Cl',
-           density: 1.500 }
-  }, {
+  value: {
+    external_label: 'CDCl3',
+    smiles: '[2H]C(Cl)(Cl)Cl',
+    density: 1.500
+  }
+}, {
   label: 'MeOD-d4',
-  value: { external_label: 'MeOD-d4',
-           smiles: '[2H]OC([2H])([2H])[2H]',
-           density: 0.888 }
-  }, {
+  value: {
+    external_label: 'MeOD-d4',
+    smiles: '[2H]OC([2H])([2H])[2H]',
+    density: 0.888
+  }
+}, {
   label: 'C6D6',
-  value: { external_label: 'C6D6',
-           smiles: '[2H]c1c([2H])c([2H])c([2H])c([2H])c1[2H]',
-           density: 0.950 }
-  }, {
+  value: {
+    external_label: 'C6D6',
+    smiles: '[2H]c1c([2H])c([2H])c([2H])c([2H])c1[2H]',
+    density: 0.950
+  }
+}, {
   label: 'D2O',
-  value: { external_label: 'D2O',
-           smiles: '[2H]O[2H]',
-           density: 1.107 }
-  }, {
-    label: 'Cyclopentane',
-    value: { external_label: 'Cyclopentane',
-             smiles: 'C1CCCC1',
-             density: 0.74 }
-  }, {
-    label: 'Nitromethane',
-    value: { external_label: 'Nitromethane',
-             smiles: 'C[N+]([O-])=O',
-             density: 1.14 }
-  }, {
-    label: 'Formic acid',
-    value: { external_label: 'Formic acid',
-             smiles: 'O=CO',
-             density: 1.22 }
-  }, {
-    label: 'n-octanol',
-    value: { external_label: 'n-octanol',
-             smiles: 'CCCCCCCCO',
-             density: 0.817 }
-  }, {
-    label: 'n-propanol',
-    value: { external_label: 'n-propanol',
-             smiles: 'CCCO	',
-             density: 0.8 }
-  }, {
-    label: 'Dimethylacetamide',
-    value: { external_label: 'Dimethylacetamide',
-             smiles: 'CC(N(C)C)=O',
-             density: 0.94 }
-  }, {
-    label: '1,2-xylene',
-    value: { external_label: '1,2-xylene',
-             smiles: 'CC1=CC=CC=C1C',
-             density: 0.8755 }
-  }, {
-    label: '1,3-xylene',
-    value: { external_label: '1,3-xylene',
-             smiles: 'CC1=CC=CC(C)=C1',
-             density: 0.8598 }
-  }, {
-    label: '1,4-xylene',
-    value: { external_label: '1,4-xylene',
-             smiles: 'CC1=CC=C(C)C=C1',
-             density: 0.8565 }
-  }, {
-    label: 'Sulfolane',
-    value: { external_label: 'Sulfolane',
-             smiles: 'O=S1(CCCC1)=O',
-             density: 1.261 }
-  }, {
-    label: '2-methoxy ethanol',
-    value: { external_label: '2-methoxy ethanol',
-             smiles: 'OCCOC',
-             density: 0.97 }
-  }, {
-    label: 'Carbon tribromide',
-    value: { external_label: 'Carbon tribromide',
-             smiles: 'BrC(Br)([H])Br',
-             density: 2.89 }
-  }, {
-    label: 'Cyclopentylmethylether',
-    value: { external_label: 'Cyclopentylmethylether',
-             smiles: 'COC1CCCC1',
-             density: 0.86 }
-  }, {
-    label: '1,2-Dichloroethane',
-    value: { external_label: '1,2-Dichloroethane',
-             smiles: 'ClCCCl',
-             density: 1.25 }
+  value: {
+    external_label: 'D2O',
+    smiles: '[2H]O[2H]',
+    density: 1.107
+  }
+}, {
+  label: 'Cyclopentane',
+  value: {
+    external_label: 'Cyclopentane',
+    smiles: 'C1CCCC1',
+    density: 0.74
+  }
+}, {
+  label: 'Nitromethane',
+  value: {
+    external_label: 'Nitromethane',
+    smiles: 'C[N+]([O-])=O',
+    density: 1.14
+  }
+}, {
+  label: 'Formic acid',
+  value: {
+    external_label: 'Formic acid',
+    smiles: 'O=CO',
+    density: 1.22
+  }
+}, {
+  label: 'n-octanol',
+  value: {
+    external_label: 'n-octanol',
+    smiles: 'CCCCCCCCO',
+    density: 0.817
+  }
+}, {
+  label: 'n-propanol',
+  value: {
+    external_label: 'n-propanol',
+    smiles: 'CCCO',
+    density: 0.8
+  }
+}, {
+  label: 'Dimethylacetamide',
+  value: {
+    external_label: 'Dimethylacetamide',
+    smiles: 'CC(N(C)C)=O',
+    density: 0.94
+  }
+}, {
+  label: '1,2-xylene',
+  value: {
+    external_label: '1,2-xylene',
+    smiles: 'CC1=CC=CC=C1C',
+    density: 0.8755
+  }
+}, {
+  label: '1,3-xylene',
+  value: {
+    external_label: '1,3-xylene',
+    smiles: 'CC1=CC=CC(C)=C1',
+    density: 0.8598
+  }
+}, {
+  label: '1,4-xylene',
+  value: {
+    external_label: '1,4-xylene',
+    smiles: 'CC1=CC=C(C)C=C1',
+    density: 0.8565
+  }
+}, {
+  label: 'Sulfolane',
+  value: {
+    external_label: 'Sulfolane',
+    smiles: 'O=S1(CCCC1)=O',
+    density: 1.261
+  }
+}, {
+  label: '2-methoxy ethanol',
+  value: {
+    external_label: '2-methoxy ethanol',
+    smiles: 'OCCOC',
+    density: 0.97
   }
+}, {
+  label: 'Carbon tribromide',
+  value: {
+    external_label: 'Carbon tribromide',
+    smiles: 'BrC(Br)([H])Br',
+    density: 2.89
+  }
+}, {
+  label: 'Cyclopentylmethylether',
+  value: {
+    external_label: 'Cyclopentylmethylether',
+    smiles: 'COC1CCCC1',
+    density: 0.86
+  }
+}, {
+  label: '1,2-Dichloroethane',
+  value: {
+    external_label: '1,2-Dichloroethane',
+    smiles: 'ClCCCl',
+    density: 1.25
+  }
+}
 ];
 
-
 export const purificationOptions = [{
   label: 'Flash-Chromatography',
   value: 'Flash-Chromatography'
@@ -332,12 +434,24 @@ export const purificationOptions = [{
 }, {
   label: 'Distillation',
   value: 'Distillation'
+}, {
+  label: 'Dialysis',
+  value: 'Dialysis'
+}, {
+  label: 'Filtration',
+  value: 'Filtration'
 }, {
   label: 'Sublimation',
   value: 'Sublimation'
 }, {
   label: 'Crystallisation',
   value: 'Crystallisation'
+}, {
+  label: 'Recrystallisation',
+  value: 'Recrystallisation'
+}, {
+  label: 'Precipitation',
+  value: 'Precipitation'
 }];
 
 export const statusOptions = [{
@@ -360,7 +474,6 @@ export const statusOptions = [{
   value: 'Not Successful',
 }];
 
-
 export const dangerousProductsOptions = [{
   label: 'Causes cancer',
   value: 'Causes cancer'
@@ -411,14 +524,12 @@ export const dangerousProductsOptions = [{
   value: 'Diverse (Class 9)'
 }];
 
-
-
 export const confirmOptions = [{
-  label: "Confirmed",
-  value: "Confirmed"
-},{
-  label: "Unconfirmed",
-  value: "Unconfirmed"
+  label: 'Confirmed',
+  value: 'Confirmed'
+}, {
+  label: 'Unconfirmed',
+  value: 'Unconfirmed'
 }];
 
 export const kindOptions = [{
@@ -565,4 +676,13 @@ export const conditionsOptions = [{
 }, {
   label: 'visible light',
   value: 'visible light'
-}];
\ No newline at end of file
+}, {
+  label: 'pH = value',
+  value: 'pH = value'
+}, {
+  label: 'pH < value',
+  value: 'pH &lt; value' /* &lt; renders < in HTML */
+}, {
+  label: 'pH > value',
+  value: 'pH &gt; value' /* &gt; renders > in HTML */
+}];
diff --git a/app/packs/src/components/staticDropdownOptions/reagents_kombi.js b/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
index 835a1b7c4..35a6b63ee 100644
--- a/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
+++ b/app/packs/src/components/staticDropdownOptions/reagents_kombi.js
@@ -1,546 +1,546 @@
 export const reagents_kombi = {
-  "ferrocene": '[CH-]1C=CC=C1.[CH-]1C=CC=C1.[Fe+2]',
+  ferrocene: '[CH-]1C=CC=C1.[CH-]1C=CC=C1.[Fe+2]',
   "1,1'-Bis(diphenylphosphino)ferrocene": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
-  "dppf": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
+  dppf: 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.[Fe+2]',
   "[1,1'-Bis(diphenylphosphino)ferrocene]palladium(II) dichloride": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
-  "Pd(dppf)Cl2": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
-  "[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II) complex with dichloromethane": 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.ClCCl.Cl[Pd]Cl.[Fe+2]',
-  "(-)-10,2-Camphorsultam": 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
-  "(-)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  'Pd(dppf)Cl2': 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.Cl[Pd]Cl.[Fe+2]',
+  '[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II) complex with dichloromethane': 'c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.c1ccc(cc1)P(c1ccccc1)C1=CC=C[CH-]1.ClCCl.Cl[Pd]Cl.[Fe+2]',
+  '(-)-10,2-Camphorsultam': 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
+  '(-)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
   "(-)-2,2'-Methylenebis[(3aS,8aR)-3a,8a-dihydro-8H-indeno[1,2-d]oxazole]": '[H][C@@]12N=C(CC3=N[C@]4([H])[C@](CC5=C4C=CC=C5)([H])O3)O[C@]1([H])CC6=C2C=CC=C6',
-  "(-)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane": 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
-  "(-)-B-Chlorodiisopinocampheylborane": 'CC1(C)C2CC(B(Cl)C3CC4CC(C3C)C4(C)C)C(C)C1C2',
-  "(-)-Benzotetramisole": 'C12=N[C@@H](C3=CC=CC=C3)CN1C4=CC=CC=C4S2',
-  "(-)-Isopinocampheylborane TMEDA Complex": 'B[C@H]1[C@H](C)C2C(C(C1)C2)(C)C.B[C@H]3[C@H](C)C4C(C(C3)C4)(C)C.CN(C)CCN(C)C',
-  "(-)-Sparteine": '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
-  "(+)-(5aR,10bS)-5a,10b-Dihydro-2-(2,4,6-trimethylphenyl)-4H,6H-indeno[2,1-b][1,2,4]triazolo[4,3-d][1,4]oxazinium Chloride Monohydrate": 'CC1=C(N2N=C3[N+]([C@]4([H])[C@](CC5=C4C=CC=C5)([H])OC3)=C2)C(C)=CC(C)=C1.[H]O[H].[Cl-]',
-  "(+)-10,2-Camphorsultam": 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
-  "(+)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  '(-)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane': 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
+  '(-)-B-Chlorodiisopinocampheylborane': 'CC1(C)C2CC(B(Cl)C3CC4CC(C3C)C4(C)C)C(C)C1C2',
+  '(-)-Benzotetramisole': 'C12=N[C@@H](C3=CC=CC=C3)CN1C4=CC=CC=C4S2',
+  '(-)-Isopinocampheylborane TMEDA Complex': 'B[C@H]1[C@H](C)C2C(C(C1)C2)(C)C.B[C@H]3[C@H](C)C4C(C(C3)C4)(C)C.CN(C)CCN(C)C',
+  '(-)-Sparteine': '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
+  '(+)-(5aR,10bS)-5a,10b-Dihydro-2-(2,4,6-trimethylphenyl)-4H,6H-indeno[2,1-b][1,2,4]triazolo[4,3-d][1,4]oxazinium Chloride Monohydrate': 'CC1=C(N2N=C3[N+]([C@]4([H])[C@](CC5=C4C=CC=C5)([H])OC3)=C2)C(C)=CC(C)=C1.[H]O[H].[Cl-]',
+  '(+)-10,2-Camphorsultam': 'CC1(C)C2(C3)CCC1CC2NS3(=O)=O',
+  '(+)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
   "(+)-2,2'-Methylenebis[(3aR,8aS)-3a,8a-dihydro-8H-indeno[1,2-d]oxazole]": '[H][C@]12N=C(CC3=N[C@@]4([H])[C@@](CC5=C4C=CC=C5)([H])O3)O[C@@]1([H])CC6=C2C=CC=C6',
-  "(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane": 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
-  "(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2-methyl-2-phenyl-1,3-dioxolane": 'CC1(C2=CC=CC=C2)OC(C(C3=CC=CC=C3)(O)C4=CC=CC=C4)C(C(C5=CC=CC=C5)(O)C6=CC=CC=C6)O1',
-  "(+)-B-Chlorodiisopinocampheylborane": 'CN(C)CCN(C)C.CC1(C)C2CC(BC3CC4CC(C3C)C4(C)C)C(C)C1C2',
-  "(+)-Sparteine": '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
+  '(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2,2-dimethyl-1,3-dioxolane': 'CC1(C)OC(C(C2=CC=CC=C2)(O)C3=CC=CC=C3)C(C(C4=CC=CC=C4)(O)C5=CC=CC=C5)O1',
+  '(+)-4,5-Bis[hydroxy(diphenyl)methyl]-2-methyl-2-phenyl-1,3-dioxolane': 'CC1(C2=CC=CC=C2)OC(C(C3=CC=CC=C3)(O)C4=CC=CC=C4)C(C(C5=CC=CC=C5)(O)C6=CC=CC=C6)O1',
+  '(+)-B-Chlorodiisopinocampheylborane': 'CN(C)CCN(C)C.CC1(C)C2CC(BC3CC4CC(C3C)C4(C)C)C(C)C1C2',
+  '(+)-Sparteine': '[H][C@]12CCCCN1C[C@H]3[C@]4([H])CCCCN4C[C@@H]2C3',
   "(±)-1,1'-Binaphthyl-2,2'-diyl Hydrogenphosphate": 'O=P1(OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)O',
-  "(±)-10-Camphorsulfonic Acid": 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
-  "(1,10-Phenanthroline)(trifluoromethyl)(triphenylphosphine)copper(I)": '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.C45=CC=C6C=CC=NC6=C4N=CC=C5',
-  "(1,5-Cyclooctadiene)(methoxy)iridium(I)": '[Ir]OC.C1=C\\CC/C=C\\CC/1',
-  "(1,5-Cyclooctadiene)(pyridine)(tricyclohexylphosphine)iridium(I) Hexafluorophosphate": 'F[P-](F)(F)(F)(F)F.P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.[Ir+].C4=C\\CC/C=C\\CC/4.C5=NC=CC=C5',
+  '(±)-10-Camphorsulfonic Acid': 'O=C(CC(C(C)1C)CC2)C21CS(=O)(O)=O',
+  '(1,10-Phenanthroline)(trifluoromethyl)(triphenylphosphine)copper(I)': '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.C45=CC=C6C=CC=NC6=C4N=CC=C5',
+  '(1,5-Cyclooctadiene)(methoxy)iridium(I)': '[Ir]OC.C1=C\\CC/C=C\\CC/1',
+  '(1,5-Cyclooctadiene)(pyridine)(tricyclohexylphosphine)iridium(I) Hexafluorophosphate': 'F[P-](F)(F)(F)(F)F.P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.[Ir+].C4=C\\CC/C=C\\CC/4.C5=NC=CC=C5',
   "(11bS)-2,6-Bis[bis[3,5-bis(trifluoromethyl)phenyl]hydroxymethyl]-3,5-dihydrospiro[4H-dinaphth[2,1-c:1',2'-e]azepine-4,4'-morpholinium] Bromide": 'OC(C1=C2C(C3=C4C=CC=CC4=CC(C(C5=CC(C(F)(F)F)=CC(C(F)(F)F)=C5)(C6=CC(C(F)(F)F)=CC(C(F)(F)F)=C6)O)=C3C(Br)[N]7(CCOCC7)C2)=C8C=CC=CC8=C1)(C9=CC(C(F)(F)F)=CC(C(F)(F)F)=C9)C%10=CC(C(F)(F)F)=CC(C(F)(F)F)=C%10',
-  "(11R,12R)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine": 'N[C@H]1[C@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
-  "(11S,12S)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine": 'N[C@@H]1[C@@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
-  "(1-Bromovinyl)trimethylsilane": 'C[Si](C)(C(Br)=C)C',
-  "(1E)-1-tert-Butoxy-1-(trimethylsilyloxy)propene": 'C/C=C(OC(C)(C)C)/O[Si](C)(C)C',
-  "(1R,2R)-(-)-1,2-Cyclohexanediamine": 'N[C@H]1[C@H](N)CCCC1',
+  '(11R,12R)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine': 'N[C@H]1[C@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
+  '(11S,12S)-9,10-Dihydro-9,10-ethanoanthracene-11,12-diamine': 'N[C@@H]1[C@@H](N)C2C3=C(C=CC=C3)C1C4=CC=CC=C24',
+  '(1-Bromovinyl)trimethylsilane': 'C[Si](C)(C(Br)=C)C',
+  '(1E)-1-tert-Butoxy-1-(trimethylsilyloxy)propene': 'C/C=C(OC(C)(C)C)/O[Si](C)(C)C',
+  '(1R,2R)-(-)-1,2-Cyclohexanediamine': 'N[C@H]1[C@H](N)CCCC1',
   "(1R,2R)-(-)-N,N'-Dimethylcyclohexane-1,2-diamine": 'CN[C@H]1[C@H](NC)CCCC1',
-  "(1R,2R)-(+)-1,2-Diphenylethylenediamine": 'N[C@H](C1=CC=CC=C1)[C@@H](C2=CC=CC=C2)N',
-  "(1R,2R)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine": 'N[C@H](C1=C(C)C=C(C)C=C1C)[C@@H](C2=C(C)C=C(C)C=C2C)N',
-  "(1R,2R)-1,2-Bis(2-hydroxyphenyl)ethylenediamine": 'N[C@H](C1=CC=CC=C1O)[C@@H](C2=CC=CC=C2O)N',
+  '(1R,2R)-(+)-1,2-Diphenylethylenediamine': 'N[C@H](C1=CC=CC=C1)[C@@H](C2=CC=CC=C2)N',
+  '(1R,2R)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine': 'N[C@H](C1=C(C)C=C(C)C=C1C)[C@@H](C2=C(C)C=C(C)C=C2C)N',
+  '(1R,2R)-1,2-Bis(2-hydroxyphenyl)ethylenediamine': 'N[C@H](C1=CC=CC=C1O)[C@@H](C2=CC=CC=C2O)N',
   "(1R,2R)-N,N'-Bis(2-acetyl-3-oxo-2-butenylidene)-1,2-dimesitylethylenediaminato Cobalt(II)": 'CC1=C(C(C)=CC(C)=C1)[C@@H](/N=C/C=C(C(C)=O)\\C[O-])[C@@H](C2=C(C)C=C(C)C=C2C)/N=C/C=C(C(C)=O)\\C[O-].[Co+2]',
   "(1R,2R)-N,N'-Bis[3-oxo-2-(2,4,6-trimethylbenzoyl)butylidene]-1,2-diphenylethylenediaminato Cobalt(II)": '[O-]/C(C)=C(C(C1=C(C)C=C(C)C=C1C)=O)\\C=N\\[C@@H]([C@@H](C2=CC=CC=C2)/N=C/C(C(C3=C(C)C=C(C)C=C3C)=O)=C(C)\\[O-])C4=CC=CC=C4.[Co+2]',
   "(1R,2R)-N,N'-Dihydroxy-N,N'-bis(diphenylacetyl)cyclohexane-1,2-diamine": 'O=C(N(O)[C@H]1[C@H](N(O)C(C(C2=CC=CC=C2)C3=CC=CC=C3)=O)CCCC1)C(C4=CC=CC=C4)C5=CC=CC=C5',
-  "(1R,2R,4R,5R)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@@]3([H])C[C@@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@@](C3)([H])C2',
-  "(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol": 'C[C@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@@H](C3=CC=CC=C3)O',
-  "(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate": 'CCC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  "(1R,3R)-5-(Bromomethylene)-1,3-bis(tert-butyldimethylsilyloxy)cyclohexane": 'C[Si](O[C@H](C1)C[C@H](O[Si](C)(C(C)(C)C)C)CC1=CBr)(C(C)(C)C)C',
-  "(1R,3S,5R,7R,8aS)-7-Ethylhexahydro-1-(6-hydroxy-4-quinolinyl)-3,7-methano-1H-pyrrolo[2,1-c][1,4]oxazine": 'OC1=CC=C2N=CC=C([C@H]3O[C@](C4)([H])C[N@@]5[C@@]3([H])C[C@@]4(CC)C5)C2=C1',
-  "(1R,4R,5R)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane": 'CC1(C)S[C@@]2([H])[C@H](C)CC[C@]1([H])C2',
+  '(1R,2R,4R,5R)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane': 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@@]3([H])C[C@@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@@](C3)([H])C2',
+  '(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol': 'C[C@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@@H](C3=CC=CC=C3)O',
+  '(1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate': 'CCC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  '(1R,3R)-5-(Bromomethylene)-1,3-bis(tert-butyldimethylsilyloxy)cyclohexane': 'C[Si](O[C@H](C1)C[C@H](O[Si](C)(C(C)(C)C)C)CC1=CBr)(C(C)(C)C)C',
+  '(1R,3S,5R,7R,8aS)-7-Ethylhexahydro-1-(6-hydroxy-4-quinolinyl)-3,7-methano-1H-pyrrolo[2,1-c][1,4]oxazine': 'OC1=CC=C2N=CC=C([C@H]3O[C@](C4)([H])C[N@@]5[C@@]3([H])C[C@@]4(CC)C5)C2=C1',
+  '(1R,4R,5R)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane': 'CC1(C)S[C@@]2([H])[C@H](C)CC[C@]1([H])C2',
   "(1S)-3-(1,10-Phenanthrolin-2-yl)-2'-phenyl-[1,1'-binaphthalen]-2-ol": 'OC1=C(C2=NC3=C4N=CC=CC4=CC=C3C=C2)C=C5C=CC=CC5=C1C6=C7C=CC=CC7=CC=C6C8=CC=CC=C8',
-  "(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol": 'C[C@@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@H](C3=CC=CC=C3)O',
-  "(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate": 'CCC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  "(1S,2S)-(-)-1,2-Diphenylethylenediamine": 'N[C@@H](C1=CC=CC=C1)[C@H](C2=CC=CC=C2)N',
-  "(1S,2S)-(+)-1,2-Cyclohexanediamine": 'N[C@@H]1[C@@H](N)CCCC1',
+  '(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenyl-1-propanol': 'C[C@@H](N(CC1=CC=CC=C1)S(=O)(C(C(C)=CC(C)=C2)=C2C)=O)[C@H](C3=CC=CC=C3)O',
+  '(1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Propionate': 'CCC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  '(1S,2S)-(-)-1,2-Diphenylethylenediamine': 'N[C@@H](C1=CC=CC=C1)[C@H](C2=CC=CC=C2)N',
+  '(1S,2S)-(+)-1,2-Cyclohexanediamine': 'N[C@@H]1[C@@H](N)CCCC1',
   "(1S,2S)-(+)-N,N'-Dimethylcyclohexane-1,2-diamine": 'CN[C@@H]1[C@@H](NC)CCCC1',
-  "(1S,2S)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine": 'N[C@@H](C1=C(C)C=C(C)C=C1C)[C@H](C2=C(C)C=C(C)C=C2C)N',
-  "(1S,2S)-1,2-Bis(2-hydroxyphenyl)ethylenediamine": 'N[C@@H](C1=CC=CC=C1O)[C@H](C2=CC=CC=C2O)N',
+  '(1S,2S)-1,2-Bis(2,4,6-trimethylphenyl)ethylenediamine': 'N[C@@H](C1=C(C)C=C(C)C=C1C)[C@H](C2=C(C)C=C(C)C=C2C)N',
+  '(1S,2S)-1,2-Bis(2-hydroxyphenyl)ethylenediamine': 'N[C@@H](C1=CC=CC=C1O)[C@H](C2=CC=CC=C2O)N',
   "(1S,2S)-N,N'-Bis(2-acetyl-3-oxo-2-butenylidene)-1,2-dimesitylethylenediaminato Cobalt(II)": 'CC1=C(C(C)=CC(C)=C1)[C@H](/N=C/C=C(C(C)=O)\\C[O-])[C@H](C2=C(C)C=C(C)C=C2C)/N=C/C=C(C(C)=O)\\C[O-].[Co+2]',
   "(1S,2S)-N,N'-Bis[(R)-2-hydroxy-2'-phenyl-1,1'-binaphthyl-3-ylmethylene]-1,2-diphenylethylenediaminato Manganese(III) Acetate": 'CC([O-])=O.OC1=C(C([Mn+]2)=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N=C2C5=C(O)C(C6=C7C=CC=CC7=CC=C6C8=CC=CC=C8)=C9C=CC=CC9=C5)C=C%10C=CC=CC%10=C1C%11=C%12C=CC=CC%12=CC=C%11C%13=CC=CC=C%13',
   "(1S,2S)-N,N'-Bis[3-oxo-2-(2,4,6-trimethylbenzoyl)butylidene]-1,2-diphenylethylenediaminato Cobalt(II)": '[O-]/C(C)=C(C(C1=C(C)C=C(C)C=C1C)=O)\\C=N\\[C@H]([C@H](C2=CC=CC=C2)/N=C/C(C(C3=C(C)C=C(C)C=C3C)=O)=C(C)\\[O-])C4=CC=CC=C4.[Co+2]',
   "(1S,2S)-N,N'-Dihydroxy-N,N'-bis(diphenylacetyl)cyclohexane-1,2-diamine": 'O=C(N(O)[C@@H]1[C@@H](N(O)C(C(C2=CC=CC=C2)C3=CC=CC=C3)=O)CCCC1)C(C4=CC=CC=C4)C5=CC=CC=C5',
-  "(1S,2S,4S,5S)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@@H]2[C@]3([H])C[C@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@](C3)([H])C2',
-  "(1S,4S,5S)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane": 'CC1(C)S[C@]2([H])[C@@H](C)CC[C@@]1([H])C2',
-  "(2,5-Dimethylphenyl)magnesium Bromide": 'Br[Mg]C1=CC(C)=CC=C1C',
-  "(2-Bromo-4,5-dimethoxyphenoxy)trimethylsilane": 'C[Si](C)(OC1=CC(OC)=C(OC)C=C1Br)C',
-  "(2-Bromoallyl)trimethylsilane": 'C[Si](C)(CC(Br)=C)C',
-  "(2-Bromophenyl)(2,4,6-trimethylphenyl)iodonium triflate": 'CC1=C([I+]C2=CC=CC=C2Br)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
-  "(2-Bromophenyl)diphenylphosphine": 'BrC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  "(2-Bromophenylethynyl)trimethylsilane": 'C[Si](C)(C#CC1=CC=CC=C1Br)C',
-  "(2R,3R)-(-)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol": 'CC1(O[C@H]([C@@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
-  "(2R,3R)-(-)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene": 'C1(C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
-  "(2R,5R)-2,5-Diphenylpyrrolidine": '[C@@H]1(C2=CC=CC=C2)N[C@@H](C3=CC=CC=C3)CC1',
-  "(2R,8aS)-(+)-(Camphorylsulfonyl)oxaziridine": 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
-  "(2S)-N-[(1S)-1-(Hydroxydiphenylmethyl)-3-methylbutyl]-2-pyrrolidinecarboxamide": 'O=C([C@H]1NCCC1)N[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CC(C)C',
-  "(2S,3aS,7aS)-Octahydro-1H-indole-2-carboxylic Acid": 'O=C([C@H]1N[C@@]2([H])CCCC[C@@]2([H])C1)O',
-  "(2S,3R)-3,4-Dihydro-3-isopropyl-2-phenyl-2H-pyrimido[2,1-b]benzothiazole": 'CC([C@H]1[C@@H](C2=CC=CC=C2)N=C3SC4=CC=CC=C4N3C1)C',
-  "(2S,3S)-(-)-Bis(diphenylphosphino)butane": 'C[C@H](P(C1=CC=CC=C1)C2=CC=CC=C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)C',
-  "(2S,3S)-(+)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol": 'CC1(O[C@@H]([C@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
-  "(2S,3S)-(+)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene": 'C1(C2)[C@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
-  "(2S,5S)-(-)-2-tert-Butyl-3-methyl-5-benzyl-4-imidazolidinone": 'O=C1N(C)[C@@H](C(C)(C)C)N[C@H]1CC2=CC=CC=C2',
-  "(2S,5S)-2,5-Diphenylpyrrolidine": '[C@H]1(C2=CC=CC=C2)N[C@H](C3=CC=CC=C3)CC1',
-  "(2S,8aR)-(-)-(Camphorylsulfonyl)oxaziridine": 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
-  "(3,5-Dibromophenyl)triphenylsilane": 'BrC1=CC(Br)=CC([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=C1',
-  "(3-Bromopropoxy)(tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(OCCCBr)C',
-  "(3-Bromopropyl)trimethoxysilane": 'CO[Si](OC)(CCCBr)OC',
-  "(3-Chloropropyl)tris(trimethylsilyloxy)silane": 'C[Si](O[Si](O[Si](C)(C)C)(CCCCl)O[Si](C)(C)C)(C)C',
-  "(3-Mercaptopropyl)triethoxysilane": 'CCO[Si](OCC)(CCCS)OCC',
-  "(3-Mercaptopropyl)trimethoxysilane": 'CO[Si](OC)(CCCS)OC',
-  "(3-Phenyl-1H-inden-1-ylidene)bis(tricyclohexylphosphine)ruthenium(II) Dichloride": '[Ru+2]=C1C=C(C2=CC=CC=C2)C3=C1C=CC=C3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.P(C7CCCCC7)(C8CCCCC8)C9CCCCC9.[Cl-].[Cl-]',
-  "(4-(Isopropoxycarbonyl)phenyl)boronic acid": 'B(C1=CC=C(C=C1)C(=O)OC(C)C)(O)O',
-  "(4-Dimethylaminophenyl)di-tert-butylphosphine": 'CC(P(C1=CC=C(N(C)C)C=C1)C(C)(C)C)(C)C',
-  "(4-Nitrophenyl)(2,4,6-trimethylphenyl)iodonium triflate": 'CC1=C([I+]C2=CC=C([N+]([O-])=O)C=C2)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
-  "(4-Nitrophenyl)phenyliodonium triflate": 'O=[N+](C1=CC=C([I+]C2=CC=CC=C2)C=C1)[O-].O=S([O-])(C(F)(F)F)=O',
-  "(4R)-(+)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone": 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@H](C(C)C)N1',
-  "(4R,5R)-1,3-Dimethyl-4,5-diphenyl-2-[(S)-1-benzyl-2-hydroxyethylimino]imidazolidine": 'OC[C@H](CC1=CC=CC=C1)N=C2N(C)[C@H](C3=CC=CC=C3)[C@@H](C4=CC=CC=C4)N2C',
-  "(4S)-(-)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone": 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@H](C(C)C)N1',
+  '(1S,2S,4S,5S)-2,5-Bis(3,5-di-tert-butyl-2-hydroxybenzylideneamino)bicyclo[2.2.1]heptane': 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@@H]2[C@]3([H])C[C@H](/N=C/C4=CC(C(C)(C)C)=CC(C(C)(C)C)=C4O)[C@](C3)([H])C2',
+  '(1S,4S,5S)-4,7,7-Trimethyl-6-thiabicyclo[3.2.1]octane': 'CC1(C)S[C@]2([H])[C@@H](C)CC[C@@]1([H])C2',
+  '(2,5-Dimethylphenyl)magnesium Bromide': 'Br[Mg]C1=CC(C)=CC=C1C',
+  '(2-Bromo-4,5-dimethoxyphenoxy)trimethylsilane': 'C[Si](C)(OC1=CC(OC)=C(OC)C=C1Br)C',
+  '(2-Bromoallyl)trimethylsilane': 'C[Si](C)(CC(Br)=C)C',
+  '(2-Bromophenyl)(2,4,6-trimethylphenyl)iodonium triflate': 'CC1=C([I+]C2=CC=CC=C2Br)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
+  '(2-Bromophenyl)diphenylphosphine': 'BrC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  '(2-Bromophenylethynyl)trimethylsilane': 'C[Si](C)(C#CC1=CC=CC=C1Br)C',
+  '(2R,3R)-(-)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol': 'CC1(O[C@H]([C@@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
+  '(2R,3R)-(-)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene': 'C1(C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
+  '(2R,5R)-2,5-Diphenylpyrrolidine': '[C@@H]1(C2=CC=CC=C2)N[C@@H](C3=CC=CC=C3)CC1',
+  '(2R,8aS)-(+)-(Camphorylsulfonyl)oxaziridine': 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
+  '(2S)-N-[(1S)-1-(Hydroxydiphenylmethyl)-3-methylbutyl]-2-pyrrolidinecarboxamide': 'O=C([C@H]1NCCC1)N[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CC(C)C',
+  '(2S,3aS,7aS)-Octahydro-1H-indole-2-carboxylic Acid': 'O=C([C@H]1N[C@@]2([H])CCCC[C@@]2([H])C1)O',
+  '(2S,3R)-3,4-Dihydro-3-isopropyl-2-phenyl-2H-pyrimido[2,1-b]benzothiazole': 'CC([C@H]1[C@@H](C2=CC=CC=C2)N=C3SC4=CC=CC=C4N3C1)C',
+  '(2S,3S)-(-)-Bis(diphenylphosphino)butane': 'C[C@H](P(C1=CC=CC=C1)C2=CC=CC=C2)[C@@H](P(C3=CC=CC=C3)C4=CC=CC=C4)C',
+  '(2S,3S)-(+)-1,4-Bis(diphenylphosphino)-2,3-O-isopropylidene-2,3-butanediol': 'CC1(O[C@@H]([C@H](O1)CP(C2=CC=CC=C2)C3=CC=CC=C3)CP(C4=CC=CC=C4)C5=CC=CC=C5)C',
+  '(2S,3S)-(+)-2,3-Bis(diphenylphosphino)bicyclo[2.2.1]hept-5-ene': 'C1(C2)[C@H](P(C3=CC=CC=C3)C4=CC=CC=C4)[C@@H](P(C5=CC=CC=C5)C6=CC=CC=C6)C2C=C1',
+  '(2S,5S)-(-)-2-tert-Butyl-3-methyl-5-benzyl-4-imidazolidinone': 'O=C1N(C)[C@@H](C(C)(C)C)N[C@H]1CC2=CC=CC=C2',
+  '(2S,5S)-2,5-Diphenylpyrrolidine': '[C@H]1(C2=CC=CC=C2)N[C@H](C3=CC=CC=C3)CC1',
+  '(2S,8aR)-(-)-(Camphorylsulfonyl)oxaziridine': 'O=S(N1OC1)(CC23C(CC(C(C)3C)CC2)=O)=O',
+  '(3,5-Dibromophenyl)triphenylsilane': 'BrC1=CC(Br)=CC([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=C1',
+  '(3-Bromopropoxy)(tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(OCCCBr)C',
+  '(3-Bromopropyl)trimethoxysilane': 'CO[Si](OC)(CCCBr)OC',
+  '(3-Chloropropyl)tris(trimethylsilyloxy)silane': 'C[Si](O[Si](O[Si](C)(C)C)(CCCCl)O[Si](C)(C)C)(C)C',
+  '(3-Mercaptopropyl)triethoxysilane': 'CCO[Si](OCC)(CCCS)OCC',
+  '(3-Mercaptopropyl)trimethoxysilane': 'CO[Si](OC)(CCCS)OC',
+  '(3-Phenyl-1H-inden-1-ylidene)bis(tricyclohexylphosphine)ruthenium(II) Dichloride': '[Ru+2]=C1C=C(C2=CC=CC=C2)C3=C1C=CC=C3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.P(C7CCCCC7)(C8CCCCC8)C9CCCCC9.[Cl-].[Cl-]',
+  '(4-(Isopropoxycarbonyl)phenyl)boronic acid': 'B(C1=CC=C(C=C1)C(=O)OC(C)C)(O)O',
+  '(4-Dimethylaminophenyl)di-tert-butylphosphine': 'CC(P(C1=CC=C(N(C)C)C=C1)C(C)(C)C)(C)C',
+  '(4-Nitrophenyl)(2,4,6-trimethylphenyl)iodonium triflate': 'CC1=C([I+]C2=CC=C([N+]([O-])=O)C=C2)C(C)=CC(C)=C1.O=S([O-])(C(F)(F)F)=O',
+  '(4-Nitrophenyl)phenyliodonium triflate': 'O=[N+](C1=CC=C([I+]C2=CC=CC=C2)C=C1)[O-].O=S([O-])(C(F)(F)F)=O',
+  '(4R)-(+)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone': 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@H](C(C)C)N1',
+  '(4R,5R)-1,3-Dimethyl-4,5-diphenyl-2-[(S)-1-benzyl-2-hydroxyethylimino]imidazolidine': 'OC[C@H](CC1=CC=CC=C1)N=C2N(C)[C@H](C3=CC=CC=C3)[C@@H](C4=CC=CC=C4)N2C',
+  '(4S)-(-)-4-Isopropyl-5,5-diphenyl-2-oxazolidinone': 'O=C1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@H](C(C)C)N1',
   "(4S,4'S)-2,2'-(Pentane-3,3'-diyl)bis(4-benzyl-4,5-dihydrooxazole)": 'CCC(C1=N[C@H](CO1)CC2=CC=CC=C2)(C3=N[C@H](CO3)CC4=CC=CC=C4)CC',
-  "(4S,5S)-1,3-Dimethyl-4,5-diphenyl-2-[(R)-1-benzyl-2-hydroxyethylimino]imidazolidine": 'OC[C@@H](CC1=CC=CC=C1)N=C2N(C)[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2C',
-  "(6-Chloro-1H-benzotriazol-1-yloxy)tripyrrolidinophosphonium Hexafluorophosphate": 'ClC1=CC=C2N=NN(O[P+](N3CCCC3)(N4CCCC4)N5CCCC5)C2=C1.F[P-](F)(F)(F)(F)F',
-  "(7-Azabenzotriazol-1-yloxy)tris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(ON1N=NC2=CC=CN=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  "(Bromodifluoromethyl)trimethylsilane": 'C[Si](C)(C(F)(Br)F)C',
-  "(Bromomethyl)trimethylsilane": 'C[Si](C)(CBr)C',
-  "(Chloromethyl)isopropoxydimethylsilane": 'C[Si](OC(C)C)(CCl)C',
-  "(Chloromethyl)trimethylsilane": 'C[Si](C)(CCl)C',
-  "(Diacetoxyiodo)benzene": 'O=C(OI(C1=CC=CC=C1)OC(C)=O)C',
-  "(Diethylamino)sulfur Trifluoride": 'CCN(S(F)(F)F)CC',
-  "(Difluoromethyl)trimethylsilane": 'C[Si](C)(C(F)F)C',
-  "(E)-Trimethyl(3,3,3-trifluoro-1-propenyl)silane": 'FC(F)(F)/C=C/[Si](C)(C)C',
-  "(Hexamethylbenzene)ruthenium(II) Dichloride": 'CC1=C(C)C(C)=C(C)C(C)=C1C.[Ru+2].[Cl-].[Cl-]',
-  "(Indenyl)titanium(IV) Trichloride": '[Ti+3]C1C=CC2=C1C=CC=C2.[Cl-].[Cl-].[Cl-]',
-  "(Iodomethyl)trimethylsilane": 'C[Si](C)(CI)C',
+  '(4S,5S)-1,3-Dimethyl-4,5-diphenyl-2-[(R)-1-benzyl-2-hydroxyethylimino]imidazolidine': 'OC[C@@H](CC1=CC=CC=C1)N=C2N(C)[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2C',
+  '(6-Chloro-1H-benzotriazol-1-yloxy)tripyrrolidinophosphonium Hexafluorophosphate': 'ClC1=CC=C2N=NN(O[P+](N3CCCC3)(N4CCCC4)N5CCCC5)C2=C1.F[P-](F)(F)(F)(F)F',
+  '(7-Azabenzotriazol-1-yloxy)tris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(ON1N=NC2=CC=CN=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  '(Bromodifluoromethyl)trimethylsilane': 'C[Si](C)(C(F)(Br)F)C',
+  '(Bromomethyl)trimethylsilane': 'C[Si](C)(CBr)C',
+  '(Chloromethyl)isopropoxydimethylsilane': 'C[Si](OC(C)C)(CCl)C',
+  '(Chloromethyl)trimethylsilane': 'C[Si](C)(CCl)C',
+  '(Diacetoxyiodo)benzene': 'O=C(OI(C1=CC=CC=C1)OC(C)=O)C',
+  '(Diethylamino)sulfur Trifluoride': 'CCN(S(F)(F)F)CC',
+  '(Difluoromethyl)trimethylsilane': 'C[Si](C)(C(F)F)C',
+  '(E)-Trimethyl(3,3,3-trifluoro-1-propenyl)silane': 'FC(F)(F)/C=C/[Si](C)(C)C',
+  '(Hexamethylbenzene)ruthenium(II) Dichloride': 'CC1=C(C)C(C)=C(C)C(C)=C1C.[Ru+2].[Cl-].[Cl-]',
+  '(Indenyl)titanium(IV) Trichloride': '[Ti+3]C1C=CC2=C1C=CC=C2.[Cl-].[Cl-].[Cl-]',
+  '(Iodomethyl)trimethylsilane': 'C[Si](C)(CI)C',
   "(m-Terphenyl-5'-yl)trimethylsilane": 'C[Si](C)(C1=CC(C2=CC=CC=C2)=CC(C3=CC=CC=C3)=C1)C',
-  "(Pentafluorophenyl)diphenylphosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  "(Pentamethylcyclopentadienyl)rhodium(III) Dichloride": '[Rh+2]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-]',
-  "(Pentamethylcyclopentadienyl)titanium(IV) Trichloride": '[Ti+3]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-].[Cl-]',
-  "(Perfluorohexyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  "(Perfluoro-n-octyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  "(Perfluoropropyl)phenyliodonium Trifluoromethanesulfonate": 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
-  "(Phenylthio)trimethylsilane": 'C[Si](C)(SC1=CC=CC=C1)C',
-  "(Phenylthiomethyl)trimethylsilane": 'C[Si](C)(CSC1=CC=CC=C1)C',
-  "(Piperidinium-1-ylmethyl)trifluoroborate": 'F[B-2](F)(C[NH+]1CCCCC1)F',
-  "(R)-(-)-1-(2-Pyrrolidinylmethyl)pyrrolidine": 'N1(C[C@@H]2NCCC2)CCCC1',
-  "(R)-(-)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine": 'CN1[C@@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
-  "(R)-(-)-4-Benzyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@@H](CC2=CC=CC=C2)N1C(CC)=O',
-  "(R)-(-)-4-Isopropyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@@H](C(C)C)N1C(CC)=O',
-  "(R)-(-)-4-Phenyl-2-oxazolidinone": 'O=C1OC[C@@H](C2=CC=CC=C2)N1',
-  "(R)-(-)-p-Toluenesulfinamide": 'CC1=CC=C([S@](N)=O)C=C1',
+  '(Pentafluorophenyl)diphenylphosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  '(Pentamethylcyclopentadienyl)rhodium(III) Dichloride': '[Rh+2]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-]',
+  '(Pentamethylcyclopentadienyl)titanium(IV) Trichloride': '[Ti+3]C1=C(C)C(C)=C(C)C1(C)C.[Cl-].[Cl-].[Cl-]',
+  '(Perfluorohexyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  '(Perfluoro-n-octyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  '(Perfluoropropyl)phenyliodonium Trifluoromethanesulfonate': 'FC([I+]C1=CC=CC=C1)(F)C(F)(F)C(F)(F)F.O=S(C(F)(F)F)([O-])=O',
+  '(Phenylthio)trimethylsilane': 'C[Si](C)(SC1=CC=CC=C1)C',
+  '(Phenylthiomethyl)trimethylsilane': 'C[Si](C)(CSC1=CC=CC=C1)C',
+  '(Piperidinium-1-ylmethyl)trifluoroborate': 'F[B-2](F)(C[NH+]1CCCCC1)F',
+  '(R)-(-)-1-(2-Pyrrolidinylmethyl)pyrrolidine': 'N1(C[C@@H]2NCCC2)CCCC1',
+  '(R)-(-)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine': 'CN1[C@@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
+  '(R)-(-)-4-Benzyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@@H](CC2=CC=CC=C2)N1C(CC)=O',
+  '(R)-(-)-4-Isopropyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@@H](C(C)C)N1C(CC)=O',
+  '(R)-(-)-4-Phenyl-2-oxazolidinone': 'O=C1OC[C@@H](C2=CC=CC=C2)N1',
+  '(R)-(-)-p-Toluenesulfinamide': 'CC1=CC=C([S@](N)=O)C=C1',
   "(R)-(+)-2,2'-bis(diphenylphosphino)-1,1'-binaphthyl": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8',
   "(R)-(+)-2-Diphenylphosphino-2'-methoxy-1,1'-binaphthyl": 'COC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3P(C5=CC=CC=C5)C6=CC=CC=C6',
-  "(R)-(+)-Indoline-2-carboxylic Acid": 'O=C([C@@H]1NC2=C(C=CC=C2)C1)O',
-  "(R)-(+)-N,N-Dimethyl-1-ferrocenylethylamine": 'C[C@H]([C]1[CH][CH][CH][CH]1)N(C)C.[Fe].[CH]2[CH][CH][CH][CH]2',
-  "(R)-(+)-tert-Butylsulfinamide": 'CC(C)([S@](N)=O)C',
-  "(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol": 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3',
-  "(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether": 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3)(C)C',
-  "(R)-2-(Methoxymethyl)pyrrolidine": 'COC[C@@H]1NCCC1',
+  '(R)-(+)-Indoline-2-carboxylic Acid': 'O=C([C@@H]1NC2=C(C=CC=C2)C1)O',
+  '(R)-(+)-N,N-Dimethyl-1-ferrocenylethylamine': 'C[C@H]([C]1[CH][CH][CH][CH]1)N(C)C.[Fe].[CH]2[CH][CH][CH][CH]2',
+  '(R)-(+)-tert-Butylsulfinamide': 'CC(C)([S@](N)=O)C',
+  '(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol': 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3',
+  '(R)-(+)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether': 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3NCCC3)(C)C',
+  '(R)-2-(Methoxymethyl)pyrrolidine': 'COC[C@@H]1NCCC1',
   "(R)-3,3'-Bis[[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]-1,1'-bi-2-naphthol": 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C6C=CC=CC6=C1C7=C8C=CC=CC8=CC(/C=N/[C@H](C9=CC=CC=C9)[C@H](N%10CC%11=C(C=CC=C%11)C%10)C%12=CC=CC=C%12)=C7O',
-  "(R)-4-Benzyl-2-oxazolidinone": 'O=C1OC[C@@H](CC2=CC=CC=C2)N1',
-  "(R)-4-Isopropyl-2-oxazolidinone": 'O=C1OC[C@@H](C(C)C)N1',
-  "(R)-4-Phenylthiazolidine-2-thione": 'S=C1SC[C@@H](C2=CC=CC=C2)N1',
-  "(R)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine": 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@]4([H])N1CCC4',
-  "(R)-N-(2-Benzoylphenyl)-1-benzylpyrrolidine-2-carboxamide": 'O=C([C@@H]1N(CC2=CC=CC=C2)CCC1)NC3=CC=CC=C3C(C4=CC=CC=C4)=O',
-  "(R,R)-(-)-2,3-Bis(tert-butylmethylphosphino)quinoxaline": 'C[P@@](C1=NC2=CC=CC=C2N=C1[P@@](C(C)(C)C)C)C(C)(C)C',
-  "(R,R)-(-)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane": 'CN(C[C@@H](OC)[C@H](OC)CN(C)C)C',
+  '(R)-4-Benzyl-2-oxazolidinone': 'O=C1OC[C@@H](CC2=CC=CC=C2)N1',
+  '(R)-4-Isopropyl-2-oxazolidinone': 'O=C1OC[C@@H](C(C)C)N1',
+  '(R)-4-Phenylthiazolidine-2-thione': 'S=C1SC[C@@H](C2=CC=CC=C2)N1',
+  '(R)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine': 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@]4([H])N1CCC4',
+  '(R)-N-(2-Benzoylphenyl)-1-benzylpyrrolidine-2-carboxamide': 'O=C([C@@H]1N(CC2=CC=CC=C2)CCC1)NC3=CC=CC=C3C(C4=CC=CC=C4)=O',
+  '(R,R)-(-)-2,3-Bis(tert-butylmethylphosphino)quinoxaline': 'C[P@@](C1=NC2=CC=CC=C2N=C1[P@@](C(C)(C)C)C)C(C)(C)C',
+  '(R,R)-(-)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane': 'CN(C[C@@H](OC)[C@H](OC)CN(C)C)C',
   "(R,R)-(-)-N,N'-Bis(3,5-di-tert-butylsalicylidene)-1,2-cyclohexanediamine": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=N/[C@H]2[C@H](/N=C/C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3O)CCCC2',
   "(R,R)-(-)-N,N'-Bis(3,5-di-tert-butylsalicylidene)-1,2-cyclohexanediaminomanganese(III) Chloride": 'OC1=C(C(C)(C)C)C=C(C(C)(C)C)C=C1/C=[N]([Mn+]/[N]2=C\\C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3O)\\[C@@]4([H])[C@@]2([H])CCCC4.[Cl-]',
   "(R,R)-(+)-2,2'-Isopropylidenebis(4-tert-butyl-2-oxazoline)": 'CC(C1=N[C@H](C(C)(C)C)CO1)(C2=N[C@H](C(C)(C)C)CO2)C',
-  "(R,R)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane": 'COC1=CC=CC=C1[P@](CC[P@@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
+  '(R,R)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane': 'COC1=CC=CC=C1[P@](CC[P@@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
   "(R,R)-2,2'-Isopropylidenebis(4-phenyl-2-oxazoline)": 'CC(C1=N[C@H](C2=CC=CC=C2)CO1)(C3=N[C@H](C4=CC=CC=C4)CO3)C',
-  "(R,R)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine": 'CC([C@H]1N=C(C2=CC=CC(C3=N[C@H](C(C)C)CO3)=N2)OC1)C',
-  "(R,R)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine": 'C1(C2=N[C@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@H](C5=CC=CC=C5)CO4)=CC=C1',
-  "(R,R)-2-Iodo-1,3-bis[1-(mesitylcarbamoyl)ethoxy]benzene": 'C[C@H](C(NC1=C(C)C=C(C)C=C1C)=O)OC2=C(I)C(O[C@@H](C(NC3=C(C)C=C(C)C=C3C)=O)C)=CC=C2',
-  "(R,R)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N[C@H](C2=CC=CC=C2)[C@H](N)C3=CC=CC=C3)=O)C=C1',
+  '(R,R)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine': 'CC([C@H]1N=C(C2=CC=CC(C3=N[C@H](C(C)C)CO3)=N2)OC1)C',
+  '(R,R)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine': 'C1(C2=N[C@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@H](C5=CC=CC=C5)CO4)=CC=C1',
+  '(R,R)-2-Iodo-1,3-bis[1-(mesitylcarbamoyl)ethoxy]benzene': 'C[C@H](C(NC1=C(C)C=C(C)C=C1C)=O)OC2=C(I)C(O[C@@H](C(NC3=C(C)C=C(C)C=C3C)=O)C)=CC=C2',
+  '(R,R)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N[C@H](C2=CC=CC=C2)[C@H](N)C3=CC=CC=C3)=O)C=C1',
   "(R,R,R)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a:3,4-a']dinaphthalen-4-yl)bis(1-phenylethyl)amine": 'C[C@@H](N(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)[C@@H](C6=CC=CC=C6)C)C7=CC=CC=C7',
   "(S)-(-)-1,1'-Binaphthyl-2,2'-diamine": 'NC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3N',
-  "(S)-(-)-1-Methyl-2-(1-piperidinomethyl)pyrrolidine": 'CN1[C@H](CN2CCCCC2)CCC1',
-  "(S)-(-)-2-(Diphenylmethyl)pyrrolidine": '[C@H]1(C(C2=CC=CC=C2)C3=CC=CC=C3)NCCC1',
+  '(S)-(-)-1-Methyl-2-(1-piperidinomethyl)pyrrolidine': 'CN1[C@H](CN2CCCCC2)CCC1',
+  '(S)-(-)-2-(Diphenylmethyl)pyrrolidine': '[C@H]1(C(C2=CC=CC=C2)C3=CC=CC=C3)NCCC1',
   "(S)-(-)-2-Amino-2'-hydroxy-1,1'-binaphthyl": 'OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3N',
-  "(S)-(-)-2-Aminomethyl-1-ethylpyrrolidine": 'CCN1[C@H](CN)CCC1',
-  "(S)-(-)-3-(tert-Butoxycarbonyl)-4-formyl-2,2-dimethyl-1,3-oxazolidine": 'CC1(C)OC[C@@H](C=O)N1C(OC(C)(C)C)=O',
+  '(S)-(-)-2-Aminomethyl-1-ethylpyrrolidine': 'CCN1[C@H](CN)CCC1',
+  '(S)-(-)-3-(tert-Butoxycarbonyl)-4-formyl-2,2-dimethyl-1,3-oxazolidine': 'CC1(C)OC[C@@H](C=O)N1C(OC(C)(C)C)=O',
   "(S)-(-)-3,3'-Dibromo-5,5',6,6',7,7',8,8'-octahydro-1,1'-bi-2-naphthol": 'OC1=C(Br)C=C2CCCCC2=C1C3=C4CCCCC4=CC(Br)=C3O',
-  "(S)-(-)-3-tert-Butoxycarbonyl-4-methoxycarbonyl-2,2-dimethyl-1,3-oxazolidine": 'CC1(C)OC[C@@H](C(OC)=O)N1C(OC(C)(C)C)=O',
+  '(S)-(-)-3-tert-Butoxycarbonyl-4-methoxycarbonyl-2,2-dimethyl-1,3-oxazolidine': 'CC1(C)OC[C@@H](C(OC)=O)N1C(OC(C)(C)C)=O',
   "(S)-(-)-5,5',6,6',7,7',8,8'-Octahydro-1,1'-bi-2-naphthol": 'OC1=CC=C2CCCCC2=C1C3=C4CCCCC4=CC=C3O',
-  "(S)-(-)-BINAP": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=C(C(C=CC=C4)=C4C=C3)C(C(C=CC=C5)=C5C=C6)=C6P(C7=CC=CC=C7)C8=CC=CC=C8',
-  "(S)-(-)-Indoline-2-carboxylic Acid": 'O=C([C@H]1NC2=C(C=CC=C2)C1)O',
-  "(S)-(-)-tert-Butylsulfinamide": 'CC(C)([S@@](N)=O)C',
-  "(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol": 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3CCCN3',
-  "(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether": 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@H]3NCCC3)(C)C',
-  "(S)-(+)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a": 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
+  '(S)-(-)-BINAP': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=C(C(C=CC=C4)=C4C=C3)C(C(C=CC=C5)=C5C=C6)=C6P(C7=CC=CC=C7)C8=CC=CC=C8',
+  '(S)-(-)-Indoline-2-carboxylic Acid': 'O=C([C@H]1NC2=C(C=CC=C2)C1)O',
+  '(S)-(-)-tert-Butylsulfinamide': 'CC(C)([S@@](N)=O)C',
+  '(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol': 'OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@@H]3CCCN3',
+  '(S)-(-)-α,α-Diphenyl-2-pyrrolidinemethanol Trimethylsilyl Ether': 'C[Si](OC(C1=CC=CC=C1)(C2=CC=CC=C2)[C@H]3NCCC3)(C)C',
+  '(S)-(+)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a': 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
   "3,4-a']dinaphthalen-4-yl)dimethylamine": 'CN(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)C',
-  "(S)-(+)-1-(2-Pyrrolidinylmethyl)pyrrolidine": 'N1(C[C@H]2NCCC2)CCCC1',
+  '(S)-(+)-1-(2-Pyrrolidinylmethyl)pyrrolidine': 'N1(C[C@H]2NCCC2)CCCC1',
   "(S)-(+)-1,1'-Binaphthyl-2,2'-diyl Bis(trifluoromethanesulfonate)": 'O=S(C(F)(F)F)(OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3OS(C(F)(F)F)(=O)=O)=O',
   "(S)-(+)-1,1'-Binaphthyl-2,2'-diyl Hydrogen Phosphate": 'O=P1(OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)O',
-  "(S)-(+)-2-(Anilinomethyl)pyrrolidine": '[C@H]1(CNC2=CC=CC=C2)NCCC1',
-  "(S)-(+)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine": 'CN1[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
-  "(S)-(+)-4-Benzyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=CC=C2)N1C(CC)=O',
-  "(S)-(+)-4-Isopropyl-3-propionyl-2-oxazolidinone": 'O=C1OC[C@H](C(C)C)N1C(CC)=O',
-  "(S)-(+)-4-Phenyl-2-oxazolidinone": 'O=C1OC[C@H](C2=CC=CC=C2)N1',
+  '(S)-(+)-2-(Anilinomethyl)pyrrolidine': '[C@H]1(CNC2=CC=CC=C2)NCCC1',
+  '(S)-(+)-2-[Hydroxy(diphenyl)methyl]-1-methylpyrrolidine': 'CN1[C@H](C(C2=CC=CC=C2)(O)C3=CC=CC=C3)CCC1',
+  '(S)-(+)-4-Benzyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=CC=C2)N1C(CC)=O',
+  '(S)-(+)-4-Isopropyl-3-propionyl-2-oxazolidinone': 'O=C1OC[C@H](C(C)C)N1C(CC)=O',
+  '(S)-(+)-4-Phenyl-2-oxazolidinone': 'O=C1OC[C@H](C2=CC=CC=C2)N1',
   "(S)-(+)-6,6'-Dibromo-1,1'-bi-2-naphthol": 'OC1=CC=C2C=C(Br)C=CC2=C1C3=C4C=CC(Br)=CC4=CC=C3O',
-  "(S)-(+)-p-Toluenesulfinamide": 'CC1=CC=C([S@@](N)=O)C=C1',
+  '(S)-(+)-p-Toluenesulfinamide': 'CC1=CC=C([S@@](N)=O)C=C1',
   "(S)-[4-(Pyridin-4-yl)-4,5-dihydro-3H-dinaphtho[2,1-c:1',2'-e]azepine-2,6-diyl]bis[bis[4-(tert-butyl)phenyl]methanol]": 'OC(C1=C2CN(C3=CC=NC=C3)CC4=C(C(C5=CC=C(C(C)(C)C)C=C5)(C6=CC=C(C(C)(C)C)C=C6)O)C=C7C=CC=CC7=C4C2=C8C=CC=CC8=C1)(C9=CC=C(C(C)(C)C)C=C9)C%10=CC=C(C(C)(C)C)C=C%10',
-  "(S)-2-(Aminomethyl)pyrrolidine": 'NC[C@H]1NCCC1',
-  "(S)-2-(Methoxymethyl)pyrrolidine": 'COC[C@H]1NCCC1',
+  '(S)-2-(Aminomethyl)pyrrolidine': 'NC[C@H]1NCCC1',
+  '(S)-2-(Methoxymethyl)pyrrolidine': 'COC[C@H]1NCCC1',
   "(S)-2,2'-Dimethoxy-1,1'-binaphthyl": 'COC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3OC',
-  "(S)-2,4-Diphenyl-4,5-dihydrooxazole": 'C1(C2=CC=CC=C2)=N[C@@H](C3=CC=CC=C3)CO1',
-  "(S)-2-[(1-Methyl-2-pyrrolidinyl)methyl]isoindoline Dihydrochloride": 'CN1[C@H](CN2CC3=C(C=CC=C3)C2)CCC1.[H]Cl.[H]Cl',
+  '(S)-2,4-Diphenyl-4,5-dihydrooxazole': 'C1(C2=CC=CC=C2)=N[C@@H](C3=CC=CC=C3)CO1',
+  '(S)-2-[(1-Methyl-2-pyrrolidinyl)methyl]isoindoline Dihydrochloride': 'CN1[C@H](CN2CC3=C(C=CC=C3)C2)CCC1.[H]Cl.[H]Cl',
   "(S)-3,3'-Dibromo-1,1'-bi-2-naphthol": 'OC1=C(Br)C=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC(Br)=C3O',
   "(S)-3,3'-Dibromo-2,2'-dimethoxy-1,1'-binaphthyl": 'COC1=C(Br)C=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC(Br)=C3OC',
   "(S)-3-[1-(4-Methoxybenzenesulfonyl)-(4S,5S)-4,5-diphenyl-4,5-dihydro-1H-imidazol-2-yl]-1,1'-binaphthalene-2,2'-diyl Hydrogen Phosphate": 'O=P1(OC2=C(C3=N[C@@H](C4=CC=CC=C4)[C@H](C5=CC=CC=C5)N3S(=O)(C6=CC=C(OC)C=C6)=O)C=C7C=CC=CC7=C2C8=C9C=CC=CC9=CC=C8O1)O',
-  "(S)-4-(4-Aminobenzyl)-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=C(N)C=C2)N1',
-  "(S)-4-Benzyl-2-oxazolidinone": 'O=C1OC[C@H](CC2=CC=CC=C2)N1',
-  "(S)-4-Isopropyl-2-oxazolidinone": 'O=C1OC[C@H](C(C)C)N1',
-  "(S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine": 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
-  "(S)-4-Isopropylthiazolidine-2-thione": 'S=C1SC[C@H](C(C)C)N1',
-  "(S)-4-Phenylthiazolidine-2-thione": 'S=C1SC[C@H](C2=CC=CC=C2)N1',
-  "(S)-4-tert-Butyl-2-(2-pyridyl)oxazoline": 'CC([C@@H]1N=C(C2=NC=CC=C2)OC1)(C)C',
-  "(S)-5-(Pyrrolidin-2-yl)-1H-tetrazole": 'C1([C@H]2NCCC2)=NN=NN1',
-  "(S)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine": 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@]4([H])N1CCC4',
-  "(S)-Benzyl-2-[4-(trifluoromethyl)phenyl]-6,7-dihydro-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate": 'FC(C1=CC=C([N+]2=C(CC3=CC=CC=C3)N4C(CCC4)=N2)C=C1)(F)F.F[B-](F)(F)F',
+  '(S)-4-(4-Aminobenzyl)-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=C(N)C=C2)N1',
+  '(S)-4-Benzyl-2-oxazolidinone': 'O=C1OC[C@H](CC2=CC=CC=C2)N1',
+  '(S)-4-Isopropyl-2-oxazolidinone': 'O=C1OC[C@H](C(C)C)N1',
+  '(S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine': 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
+  '(S)-4-Isopropylthiazolidine-2-thione': 'S=C1SC[C@H](C(C)C)N1',
+  '(S)-4-Phenylthiazolidine-2-thione': 'S=C1SC[C@H](C2=CC=CC=C2)N1',
+  '(S)-4-tert-Butyl-2-(2-pyridyl)oxazoline': 'CC([C@@H]1N=C(C2=NC=CC=C2)OC1)(C)C',
+  '(S)-5-(Pyrrolidin-2-yl)-1H-tetrazole': 'C1([C@H]2NCCC2)=NN=NN1',
+  '(S)-5,5-Diphenyl-2-methyl-3,4-propano-1,3,2-oxazaborolidine': 'CB1OC(C2=CC=CC=C2)(C3=CC=CC=C3)[C@@]4([H])N1CCC4',
+  '(S)-Benzyl-2-[4-(trifluoromethyl)phenyl]-6,7-dihydro-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate': 'FC(C1=CC=C([N+]2=C(CC3=CC=CC=C3)N4C(CCC4)=N2)C=C1)(F)F.F[B-](F)(F)F',
   "(S,S)-(-)-2,2'-Isopropylidenebis(4-tert-butyl-2-oxazoline)": 'CC(C1=N[C@@H](C(C)(C)C)CO1)(C2=N[C@@H](C(C)(C)C)CO2)C',
-  "(S,S)-(+)-2,3-Bis(tert-butylmethylphosphino)quinoxaline": 'C[P@](C1=NC2=CC=CC=C2N=C1[P@](C(C)(C)C)C)C(C)(C)C',
-  "(S,S)-(+)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane": 'CN(C[C@H](OC)[C@@H](OC)CN(C)C)C',
-  "(S,S)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane": 'COC1=CC=CC=C1[P@@](CC[P@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
-  "(S,S)-1,2-Bis[(tert-butyl)methylphosphino]ethane Bis(borane)": 'C[P@@](CC[P@@](C(C)(C)C)C)C(C)(C)C.B.B',
+  '(S,S)-(+)-2,3-Bis(tert-butylmethylphosphino)quinoxaline': 'C[P@](C1=NC2=CC=CC=C2N=C1[P@](C(C)(C)C)C)C(C)(C)C',
+  '(S,S)-(+)-2,3-Dimethoxy-1,4-bis(dimethylamino)butane': 'CN(C[C@H](OC)[C@@H](OC)CN(C)C)C',
+  '(S,S)-1,2-Bis[(2-methoxyphenyl)phenylphosphino]ethane': 'COC1=CC=CC=C1[P@@](CC[P@](C2=CC=CC=C2OC)C3=CC=CC=C3)C4=CC=CC=C4',
+  '(S,S)-1,2-Bis[(tert-butyl)methylphosphino]ethane Bis(borane)': 'C[P@@](CC[P@@](C(C)(C)C)C)C(C)(C)C.B.B',
   "(S,S)-2,2'-Isopropylidenebis(4-phenyl-2-oxazoline)": 'CC(C1=N[C@@H](C2=CC=CC=C2)CO1)(C3=N[C@@H](C4=CC=CC=C4)CO3)C',
-  "(S,S)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine": 'CC([C@@H]1N=C(C2=CC=CC(C3=N[C@@H](C(C)C)CO3)=N2)OC1)C',
-  "(S,S)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine": 'C1(C2=N[C@@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@@H](C5=CC=CC=C5)CO4)=CC=C1',
-  "(S,S)-4,6-Bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene": 'CC1=C(C2=N[C@@H](C(C)C)CO2)C=C(C3=N[C@@H](C(C)C)CO3)C(C)=C1',
-  "(S,S)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N[C@@H](C2=CC=CC=C2)[C@@H](N)C3=CC=CC=C3)=O)C=C1',
+  '(S,S)-2,6-Bis(4-isopropyl-2-oxazolin-2-yl)pyridine': 'CC([C@@H]1N=C(C2=CC=CC(C3=N[C@@H](C(C)C)CO3)=N2)OC1)C',
+  '(S,S)-2,6-Bis(4-phenyl-2-oxazolin-2-yl)pyridine': 'C1(C2=N[C@@H](C3=CC=CC=C3)CO2)=NC(C4=N[C@@H](C5=CC=CC=C5)CO4)=CC=C1',
+  '(S,S)-4,6-Bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene': 'CC1=C(C2=N[C@@H](C(C)C)CO2)C=C(C3=N[C@@H](C(C)C)CO3)C(C)=C1',
+  '(S,S)-N-(2-Amino-1,2-diphenylethyl)-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N[C@@H](C2=CC=CC=C2)[C@@H](N)C3=CC=CC=C3)=O)C=C1',
   "(S,S,S)-(3,5-Dioxa-4-phosphacyclohepta[2,1-a:3,4-a']dinaphthalen-4-yl)bis(1-phenylethyl)amine": 'C[C@H](N(P1OC2=CC=C3C=CC=CC3=C2C4=C5C=CC=CC5=CC=C4O1)[C@H](C6=CC=CC=C6)C)C7=CC=CC=C7',
-  "(tert-Butyldimethylsilyl)acetylene": 'C#C[Si](C)(C(C)(C)C)C',
-  "(tert-Butyldimethylsilyloxy)malononitrile": 'N#CC(O[Si](C)(C(C)(C)C)C)C#N',
-  "(Trifluoroacetyl)benzotriazole": 'O=C(C1=C2N=NNC2=CC=C1)C(F)(F)F',
-  "(Trifluoromethyl)trimethylsilane": 'C[Si](C)(C(F)(F)F)C',
-  "(Trifluoromethyl)tris(triphenylphosphine)copper(I)": '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  "(Triphenylphosphine)gold(I) Chloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[Au+].[Cl-]',
-  "[(4-Bromobenzyl)oxy](tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(OCC1=CC=C(Br)C=C1)C',
-  "[(4-Methoxyphenyl)ethynyl]trimethylsilane": 'C[Si](C)(C#CC1=CC=C(OC)C=C1)C',
+  '(tert-Butyldimethylsilyl)acetylene': 'C#C[Si](C)(C(C)(C)C)C',
+  '(tert-Butyldimethylsilyloxy)malononitrile': 'N#CC(O[Si](C)(C(C)(C)C)C)C#N',
+  '(Trifluoroacetyl)benzotriazole': 'O=C(C1=C2N=NNC2=CC=C1)C(F)(F)F',
+  '(Trifluoromethyl)trimethylsilane': 'C[Si](C)(C(F)(F)F)C',
+  '(Trifluoromethyl)tris(triphenylphosphine)copper(I)': '[Cu]C(F)(F)F.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  '(Triphenylphosphine)gold(I) Chloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[Au+].[Cl-]',
+  '[(4-Bromobenzyl)oxy](tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(OCC1=CC=C(Br)C=C1)C',
+  '[(4-Methoxyphenyl)ethynyl]trimethylsilane': 'C[Si](C)(C#CC1=CC=C(OC)C=C1)C',
   "[(R)-2,2'-Bis(diphenylphosphino)-1,1'-binaphthyl]ruthenium(II) Dichloride": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8.[Ru+2].[Cl-].[Cl-]',
   "[(S)-2,2'-Bis(diphenylphosphino)-1,1'-binaphthyl]ruthenium(II) Dichloride": 'C1(C2=C3C=CC=CC3=CC=C2P(C4=CC=CC=C4)C5=CC=CC=C5)=C6C=CC=CC6=CC=C1P(C7=CC=CC=C7)C8=CC=CC=C8.[Ru+2].[Cl-].[Cl-]',
-  "[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II)": 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
-  "PdCl2(dppf)": 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
-  "[1,2-Bis(diphenylphosphino)ethane]nickel(II) Dichloride": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
-  "[1,2-Bis(diphenylphosphino)ethane]palladium(II) Dichloride": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Pd+2].[Cl-].[Cl-]',
-  "[1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene]triphenylphosphine Nickel(II) Dichloride": 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)C(C(C)C)=CC=C1)C.[Ni+2].[Cl-].[Cl-]',
-  "[1,3-Bis(diphenylphosphino)propane]nickel(II) Dichloride": 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
-  "[3-(6-Aminohexylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCNCCCCCCN)OC',
-  "[3-(Diethylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCN(CC)CC)OC',
-  "[3-(N,N-Dimethylamino)propyl]trimethoxysilane": 'CO[Si](OC)(CCCN(C)C)OC',
-  "[3-(Trimethoxysilyl)propyl]succinic Anhydride": 'O=C(O1)C(CCC[Si](OC)(OC)OC)CC1=O',
-  "[Bis(trifluoroacetoxy)iodo]benzene": 'O=C(OI(C1=CC=CC=C1)OC(C(F)(F)F)=O)C(F)(F)F',
-  "[Bis(trifluoroacetoxy)iodo]pentafluorobenzene": 'FC1=C(I(OC(C(F)(F)F)=O)OC(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
-  "[Di-tert-butyl(chloro)phosphine]palladium(II) Dichloride": 'ClP(C(C)(C)C)C(C)(C)C.[Pd+2].[Cl-].[Cl-]',
-  "[Hydroxy(tosyloxy)iodo]benzene": 'O=S(OI(C1=CC=CC=C1)O)(C2=CC=C(C)C=C2)=O',
-  "1-(2,4,6-Triisopropylbenzenesulfonyl)-1,2,4-triazole": 'O=S(N1N=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
-  "1-(2,4,6-Triisopropylbenzenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
-  "1-(2-Hydroxyethyl)-3-methylimidazolium Chloride": 'C[N+]1=CN(CCO)C=C1.[Cl-]',
-  "1-(2-Hydroxyethyl)-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCO)C=C1.F[B-](F)(F)F',
-  "1-(2-Mesitylene)-1,3-butanedione": 'CC(CC(C1=C(C)C=C(C)C=C1C)=O)=O',
-  "1-(2-Mesitylenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C(C(C)=CC(C)=C2)=C2C)=O',
-  "1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide": 'CCN=C=NCCCN(C)C',
-  "EDC": 'CCN=C=NCCCN(C)C',
-  "1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide Hydrochloride": 'CCN=C=NCCCN(C)C.[H]Cl',
-  "EDC HCl": 'CCN=C=NCCCN(C)C.[H]Cl',
-  "1-(4-Bromophenyl)-1,3-butanedione": 'CC(CC(C1=CC=C(Br)C=C1)=O)=O',
-  "1-(4-Chlorophenyl)-4,4,4-trifluoro-1,3-butanedione": 'O=C(C1=CC=C(Cl)C=C1)CC(C(F)(F)F)=O',
-  "1-(4-Fluorophenyl)-1,3-butanedione": 'CC(CC(C1=CC=C(F)C=C1)=O)=O',
-  "1-(4-tert-Butylphenyl)-3-(4-methoxyphenyl)-1,3-propanedione": 'O=C(C1=CC=C(C(C)(C)C)C=C1)CC(C2=CC=C(OC)C=C2)=O',
-  "1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Hexafluorophosphate": 'ClC(N1CCCC1)=[N+]2CCCC2.F[P-](F)(F)(F)(F)F',
-  "1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Tetrafluoroborate": 'ClC(N1CCCC1)=[N+]2CCCC2.F[B-](F)(F)F',
-  "1-(Cyanomethyl)piperidinium Tetrafluoroborate": 'N#CC[NH+]1CCCCC1.F[B-](F)(F)F',
-  "1-(Heptafluorobutyryl)imidazole": 'O=C(N1C=CN=C1)C(F)(F)C(F)(F)C(F)(F)F',
-  "1-(p-Toluenesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C2=CC=C(C)C=C2)=O',
-  "1-(Trifluoroacetyl)-4-(dimethylamino)pyridinium Trifluoroacetate": 'CN(C1=CC=[N+](C(C(F)(F)F)=O)C=C1)C.O=C([O-])C(F)(F)F',
-  "1-(Trifluoroacetyl)imidazole": 'O=C(N1C=CN=C1)C(F)(F)F',
-  "1-(Trifluoroacetyl)piperidine": 'O=C(N1CCCCC1)C(F)(F)F',
-  "1-(Trifluoromethanesulfonyl)-1H-benzotriazole": 'O=S(N1N=NC2=CC=CC=C21)(C(F)(F)F)=O',
-  "1-(Trifluoromethanesulfonyl)imidazole": 'O=S(N1C=CN=C1)(C(F)(F)F)=O',
-  "1-(Triisopropylsilyl)-1-propyne": 'CC#C[Si](C(C)C)(C(C)C)C(C)C',
-  "1-(Trimethoxysilyl)naphthalene": 'CO[Si](C1=C2C=CC=CC2=CC=C1)(OC)OC',
-  "1-(Trimethylsilyl)-1-pentyne": 'CCCC#C[Si](C)(C)C',
-  "1-(Trimethylsilyl)-1-propyne": 'CC#C[Si](C)(C)C',
+  '[1,1′-Bis(diphenylphosphino)ferrocene]dichloropalladium(II)': 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
+  'PdCl2(dppf)': 'C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.C1=CC=C(C=C1)P(C2=CC=CC=C2)[C]3[CH][CH][CH][CH]3.Cl[Pd]Cl.[Fe]',
+  '[1,2-Bis(diphenylphosphino)ethane]nickel(II) Dichloride': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
+  '[1,2-Bis(diphenylphosphino)ethane]palladium(II) Dichloride': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Pd+2].[Cl-].[Cl-]',
+  '[1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene]triphenylphosphine Nickel(II) Dichloride': 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)C(C(C)C)=CC=C1)C.[Ni+2].[Cl-].[Cl-]',
+  '[1,3-Bis(diphenylphosphino)propane]nickel(II) Dichloride': 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.[Ni+2].[Cl-].[Cl-]',
+  '[3-(6-Aminohexylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCNCCCCCCN)OC',
+  '[3-(Diethylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCN(CC)CC)OC',
+  '[3-(N,N-Dimethylamino)propyl]trimethoxysilane': 'CO[Si](OC)(CCCN(C)C)OC',
+  '[3-(Trimethoxysilyl)propyl]succinic Anhydride': 'O=C(O1)C(CCC[Si](OC)(OC)OC)CC1=O',
+  '[Bis(trifluoroacetoxy)iodo]benzene': 'O=C(OI(C1=CC=CC=C1)OC(C(F)(F)F)=O)C(F)(F)F',
+  '[Bis(trifluoroacetoxy)iodo]pentafluorobenzene': 'FC1=C(I(OC(C(F)(F)F)=O)OC(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
+  '[Di-tert-butyl(chloro)phosphine]palladium(II) Dichloride': 'ClP(C(C)(C)C)C(C)(C)C.[Pd+2].[Cl-].[Cl-]',
+  '[Hydroxy(tosyloxy)iodo]benzene': 'O=S(OI(C1=CC=CC=C1)O)(C2=CC=C(C)C=C2)=O',
+  '1-(2,4,6-Triisopropylbenzenesulfonyl)-1,2,4-triazole': 'O=S(N1N=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
+  '1-(2,4,6-Triisopropylbenzenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C2=C(C(C)C)C=C(C(C)C)C=C2C(C)C)=O',
+  '1-(2-Hydroxyethyl)-3-methylimidazolium Chloride': 'C[N+]1=CN(CCO)C=C1.[Cl-]',
+  '1-(2-Hydroxyethyl)-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCO)C=C1.F[B-](F)(F)F',
+  '1-(2-Mesitylene)-1,3-butanedione': 'CC(CC(C1=C(C)C=C(C)C=C1C)=O)=O',
+  '1-(2-Mesitylenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C(C(C)=CC(C)=C2)=C2C)=O',
+  '1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide': 'CCN=C=NCCCN(C)C',
+  EDC: 'CCN=C=NCCCN(C)C',
+  '1-(3-Dimethylaminopropyl)-3-ethylcarbodiimide Hydrochloride': 'CCN=C=NCCCN(C)C.[H]Cl',
+  'EDC HCl': 'CCN=C=NCCCN(C)C.[H]Cl',
+  '1-(4-Bromophenyl)-1,3-butanedione': 'CC(CC(C1=CC=C(Br)C=C1)=O)=O',
+  '1-(4-Chlorophenyl)-4,4,4-trifluoro-1,3-butanedione': 'O=C(C1=CC=C(Cl)C=C1)CC(C(F)(F)F)=O',
+  '1-(4-Fluorophenyl)-1,3-butanedione': 'CC(CC(C1=CC=C(F)C=C1)=O)=O',
+  '1-(4-tert-Butylphenyl)-3-(4-methoxyphenyl)-1,3-propanedione': 'O=C(C1=CC=C(C(C)(C)C)C=C1)CC(C2=CC=C(OC)C=C2)=O',
+  '1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Hexafluorophosphate': 'ClC(N1CCCC1)=[N+]2CCCC2.F[P-](F)(F)(F)(F)F',
+  '1-(Chloro-1-pyrrolidinylmethylene)pyrrolidinium Tetrafluoroborate': 'ClC(N1CCCC1)=[N+]2CCCC2.F[B-](F)(F)F',
+  '1-(Cyanomethyl)piperidinium Tetrafluoroborate': 'N#CC[NH+]1CCCCC1.F[B-](F)(F)F',
+  '1-(Heptafluorobutyryl)imidazole': 'O=C(N1C=CN=C1)C(F)(F)C(F)(F)C(F)(F)F',
+  '1-(p-Toluenesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C2=CC=C(C)C=C2)=O',
+  '1-(Trifluoroacetyl)-4-(dimethylamino)pyridinium Trifluoroacetate': 'CN(C1=CC=[N+](C(C(F)(F)F)=O)C=C1)C.O=C([O-])C(F)(F)F',
+  '1-(Trifluoroacetyl)imidazole': 'O=C(N1C=CN=C1)C(F)(F)F',
+  '1-(Trifluoroacetyl)piperidine': 'O=C(N1CCCCC1)C(F)(F)F',
+  '1-(Trifluoromethanesulfonyl)-1H-benzotriazole': 'O=S(N1N=NC2=CC=CC=C21)(C(F)(F)F)=O',
+  '1-(Trifluoromethanesulfonyl)imidazole': 'O=S(N1C=CN=C1)(C(F)(F)F)=O',
+  '1-(Triisopropylsilyl)-1-propyne': 'CC#C[Si](C(C)C)(C(C)C)C(C)C',
+  '1-(Trimethoxysilyl)naphthalene': 'CO[Si](C1=C2C=CC=CC2=CC=C1)(OC)OC',
+  '1-(Trimethylsilyl)-1-pentyne': 'CCCC#C[Si](C)(C)C',
+  '1-(Trimethylsilyl)-1-propyne': 'CC#C[Si](C)(C)C',
   "1,1'-(2,6-Pyridinediyl)bis(3-methylimidazolium) Dibromide": 'C[N+]1=CN(C2=NC(N3C=C[N+](C)=C3)=CC=C2)C=C1.[Br-].[Br-]',
-  "1,1,1,3,3,3-Hexafluoroisopropyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OC(C(F)(F)F)C(F)(F)F)=O',
-  "1,1,1,3,3-Pentamethyldisiloxane": 'C[SiH](C)O[Si](C)(C)C',
-  "1,1,1,3,5,5,5-Heptamethyl-3-[(trimethylsilyl)oxy]trisiloxane": 'C[Si](O[Si](O[Si](C)(C)C)(C)O[Si](C)(C)C)(C)C',
-  "1,1,1,3,5,5,5-Heptamethyltrisiloxane": 'C[Si](C)(C)O[SiH](C)O[Si](C)(C)C',
-  "1,1,1,3,5,7,7,7-Octamethyltetrasiloxane": 'C[Si](C)(C)O[SiH](C)O[SiH](C)O[Si](C)(C)C',
-  "1,1,1,5,5,5-Hexamethyl-3-[(trimethylsilyl)oxy]-3-vinyltrisiloxane": 'C=C[Si](O[Si](C)(C)C)(O[Si](C)(C)C)O[Si](C)(C)C',
-  "1,1,1,5,5,5-Hexamethyl-3-phenyl-3-(trimethylsilyloxy)trisiloxane": 'C[Si](O[Si](O[Si](C)(C)C)(C1=CC=CC=C1)O[Si](C)(C)C)(C)C',
-  "1,1,2,2-Tetrachloro-1,2-dimethyldisilane": 'C[Si](Cl)(Cl)[Si](Cl)(Cl)C',
-  "1,1,2,2-Tetraphenyldisilane": '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)[SiH](C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,1,2,3,4,5-Hexaphenylsilole": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)[Si]1(C6=CC=CC=C6)C7=CC=CC=C7',
-  "1,1,3,3,5,5,7,7,9,9,11,11,13,13-Tetradecamethylheptasiloxane": 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
-  "1,1,3,3,5,5,7,7,9,9,11,11-Dodecamethylhexasiloxane": 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
-  "1,1,3,3,5,5-Hexaethoxy-1,3,5-trisilacyclohexane": 'CCO[Si]1(OCC)C[Si](OCC)(OCC)C[Si](OCC)(OCC)C1',
-  "1,1,3,3,5,5-Hexamethyltrisiloxane": 'C[SiH](C)O[Si](C)(C)O[SiH](C)C',
-  "1,1,3,3-Tetramethyl-1,3-diphenyldisiloxane": 'C[Si](C1=CC=CC=C1)(C)O[Si](C)(C)C2=CC=CC=C2',
-  "1,1,3,3-Tetramethyldisiloxane": 'C[SiH](C)O[SiH](C)C',
-  "1,1,3,3-Tetramethylguanidine": 'N=C(N(C)C)N(C)C',
-  "1,1,4,7,10,10-Hexamethyltriethylenetetramine": 'CN(CCN(C)C)CCN(C)CCN(C)C',
-  "1,1,5,5-Tetrafluoro-2,4-pentanedione": 'O=C(CC(C(F)F)=O)C(F)F',
-  "1,10-Phenanthroline Monohydrate": '[H]O[H].C12=CC=C3C=CC=NC3=C1N=CC=C2',
-  "1,10-Phenanthroline-5,6-dione": 'O=C1C2=C(N=CC=C2)C3=C(C=CC=N3)C1=O',
+  '1,1,1,3,3,3-Hexafluoroisopropyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OC(C(F)(F)F)C(F)(F)F)=O',
+  '1,1,1,3,3-Pentamethyldisiloxane': 'C[SiH](C)O[Si](C)(C)C',
+  '1,1,1,3,5,5,5-Heptamethyl-3-[(trimethylsilyl)oxy]trisiloxane': 'C[Si](O[Si](O[Si](C)(C)C)(C)O[Si](C)(C)C)(C)C',
+  '1,1,1,3,5,5,5-Heptamethyltrisiloxane': 'C[Si](C)(C)O[SiH](C)O[Si](C)(C)C',
+  '1,1,1,3,5,7,7,7-Octamethyltetrasiloxane': 'C[Si](C)(C)O[SiH](C)O[SiH](C)O[Si](C)(C)C',
+  '1,1,1,5,5,5-Hexamethyl-3-[(trimethylsilyl)oxy]-3-vinyltrisiloxane': 'C=C[Si](O[Si](C)(C)C)(O[Si](C)(C)C)O[Si](C)(C)C',
+  '1,1,1,5,5,5-Hexamethyl-3-phenyl-3-(trimethylsilyloxy)trisiloxane': 'C[Si](O[Si](O[Si](C)(C)C)(C1=CC=CC=C1)O[Si](C)(C)C)(C)C',
+  '1,1,2,2-Tetrachloro-1,2-dimethyldisilane': 'C[Si](Cl)(Cl)[Si](Cl)(Cl)C',
+  '1,1,2,2-Tetraphenyldisilane': '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)[SiH](C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,1,2,3,4,5-Hexaphenylsilole': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)[Si]1(C6=CC=CC=C6)C7=CC=CC=C7',
+  '1,1,3,3,5,5,7,7,9,9,11,11,13,13-Tetradecamethylheptasiloxane': 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
+  '1,1,3,3,5,5,7,7,9,9,11,11-Dodecamethylhexasiloxane': 'C[SiH](C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[SiH](C)C',
+  '1,1,3,3,5,5-Hexaethoxy-1,3,5-trisilacyclohexane': 'CCO[Si]1(OCC)C[Si](OCC)(OCC)C[Si](OCC)(OCC)C1',
+  '1,1,3,3,5,5-Hexamethyltrisiloxane': 'C[SiH](C)O[Si](C)(C)O[SiH](C)C',
+  '1,1,3,3-Tetramethyl-1,3-diphenyldisiloxane': 'C[Si](C1=CC=CC=C1)(C)O[Si](C)(C)C2=CC=CC=C2',
+  '1,1,3,3-Tetramethyldisiloxane': 'C[SiH](C)O[SiH](C)C',
+  '1,1,3,3-Tetramethylguanidine': 'N=C(N(C)C)N(C)C',
+  '1,1,4,7,10,10-Hexamethyltriethylenetetramine': 'CN(CCN(C)C)CCN(C)CCN(C)C',
+  '1,1,5,5-Tetrafluoro-2,4-pentanedione': 'O=C(CC(C(F)F)=O)C(F)F',
+  '1,10-Phenanthroline Monohydrate': '[H]O[H].C12=CC=C3C=CC=NC3=C1N=CC=C2',
+  '1,10-Phenanthroline-5,6-dione': 'O=C1C2=C(N=CC=C2)C3=C(C=CC=N3)C1=O',
   "1,1'-Bi-2-naphthol": 'OC1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3O',
   "1,1'-Carbonyldi(1,2,4-triazole)": 'O=C(N1N=CN=C1)N2N=CN=C2',
   "1,1'-Carbonyldiimidazole": 'O=C(N1C=CN=C1)N2C=CN=C2',
   "1,1'-Difluoro-2,2'-bipyridinium Bis(tetrafluoroborate)": 'F[N+]1=CC=CC=C1C2=CC=CC=[N+]2F.F[B-](F)(F)F.F[B-](F)(F)F',
-  "1,1-Dimethyl-1,3-dihydrobenzo[c][1,2]oxasilole": 'C[Si]1(C)OCC2=CC=CC=C12',
-  "1,1-Dimethylpropylmagnesium chloride": 'Cl[Mg]C(C)(C)CC',
+  '1,1-Dimethyl-1,3-dihydrobenzo[c][1,2]oxasilole': 'C[Si]1(C)OCC2=CC=CC=C12',
+  '1,1-Dimethylpropylmagnesium chloride': 'Cl[Mg]C(C)(C)CC',
   "1,1'-Oxalyldiimidazole": 'O=C(N1C=CN=C1)C(N2C=CN=C2)=O',
-  "1,2,3,4,5-Pentamethylcyclopentadiene": 'CC1C(C)=C(C)C(C)=C1C',
-  "1,2,3,4,5-Pentaphenyl-1,3-cyclopentadiene": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1C6=CC=CC=C6',
-  "1,2,3,4-Tetrahydroquinoline": 'C12=C(NCCC2)C=CC=C1',
-  "1,2,3,4-Tetraphenyl-1,3-cyclopentadiene": 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1',
-  "1,2,4-Triazole": 'N1N=CN=C1',
-  "1,2-Benzenedisulfonic Imide": 'O=S(C1=CC=CC=C1S2(=O)=O)(N2)=O',
-  "1,2-Bis(3-indenyl)ethane": 'C1(CCC2=CCC3=C2C=CC=C3)=CCC4=C1C=CC=C4',
+  '1,2,3,4,5-Pentamethylcyclopentadiene': 'CC1C(C)=C(C)C(C)=C1C',
+  '1,2,3,4,5-Pentaphenyl-1,3-cyclopentadiene': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1C6=CC=CC=C6',
+  '1,2,3,4-Tetrahydroquinoline': 'C12=C(NCCC2)C=CC=C1',
+  '1,2,3,4-Tetraphenyl-1,3-cyclopentadiene': 'C1(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C(C5=CC=CC=C5)C1',
+  '1,2,4-Triazole': 'N1N=CN=C1',
+  '1,2-Benzenedisulfonic Imide': 'O=S(C1=CC=CC=C1S2(=O)=O)(N2)=O',
+  '1,2-Bis(3-indenyl)ethane': 'C1(CCC2=CCC3=C2C=CC=C3)=CCC4=C1C=CC=C4',
   "1,2-Bis(4'-methyl-2,2'-bipyridin-4-yl)ethane": 'CC1=CC(C2=NC=CC(CCC3=CC(C4=NC=CC(C)=C4)=NC=C3)=C2)=NC=C1',
-  "1,2-Bis(dimethylphosphino)ethane": 'CP(CCP(C)C)C',
-  "1,2-Bis(diphenylphosphino)benzene": 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=CC=C1P(C4=CC=CC=C4)C5=CC=CC=C5',
-  "1,2-Bis(diphenylphosphino)ethane": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,2-Bis(phenylsulfinyl)ethane Palladium(II) Diacetate": 'O=S(CCS(C1=CC=CC=C1)=O)C2=CC=CC=C2.CC([O-])=O.CC([O-])=O.[Pd+2]',
-  "1,2-Bis(tert-butylthio)ethane Borane": 'CC(SCCSC(C)(C)C)(C)C.B',
-  "1,2-Bis(trichlorosilyl)ethane": 'Cl[Si](CC[Si](Cl)(Cl)Cl)(Cl)Cl',
-  "1,2-Bis(triethoxysilyl)ethane": 'CCO[Si](CC[Si](OCC)(OCC)OCC)(OCC)OCC',
-  "1,2-Bis(trimethylsilyl)benzene": 'C[Si](C1=CC=CC=C1[Si](C)(C)C)(C)C',
-  "1,2-Bis[bis(pentafluorophenyl)phosphino]ethane": 'FC1=C(F)C(F)=C(F)C(F)=C1P(CCP(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F)C4=C(F)C(F)=C(F)C(F)=C4F',
-  "1,2-Dibromo-1,1,2,2-tetrachloroethane": 'ClC(Cl)(Br)C(Cl)(Br)Cl',
-  "1,2-Dibromo-1,1,2,2-tetrafluoroethane": 'FC(F)(Br)C(F)(Br)F',
-  "1,2-Dichlorotetramethyldisilane": 'Cl[Si](C)(C)[Si](C)(C)Cl',
-  "1,2-Dimethyl-3-propylimidazolium Iodide": 'CCC[N+]1=C(C)N(C)C=C1.[I-]',
-  "1,2-Phenylenediamine": 'NC1=CC=CC=C1N',
-  "1,2-xylene": 'CC1=CC=CC=C1C',
-  "1,3,5,7-Cyclooctatetraene": 'C1=C\\C=C/C=C\\C=C/1',
-  "1,3,5-Cycloheptatriene": 'C1=CC=CC=CC1',
-  "1,3,5-Trimethylbenzene": 'CC1=CC(C)=CC(C)=C1',
-  "1,3,5-Tris(3,3,3-trifluoropropyl)-1,3,5-trimethylcyclotrisiloxane": 'C[Si]1(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O1',
-  "1,3-Bis(2,4,6-trimethylphenyl)imidazolinium Chloride": 'CC1=C([N+]2=CN(C3=C(C)C=C(C)C=C3C)CC2)C(C)=CC(C)=C1.[Cl-]',
-  "1,3-Bis(2,6-diisopropylphenyl)-1,3,2-diazaphospholidine 2-Oxide": 'CC(C1=C(N2P(N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)=O)C(C(C)C)=CC=C1)C',
-  "1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene": 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C',
-  "1,3-Bis(2,6-diisopropylphenyl)imidazolidin-2-ylidene": 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C',
-  "1,3-Bis(2,6-diisopropylphenyl)imidazolinium Chloride": 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C.[Cl-]',
-  "1,3-Bis(2,6-diisopropylphenyl)imidazolium Chloride": 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
-  "1,3-Bis(4-hydroxybutyl)tetramethyldisiloxane": 'OCCCC[Si](C)(C)O[Si](C)(C)CCCCO',
-  "1,3-Bis(4-methoxyphenyl)-1,3-propanedione": 'O=C(C1=CC=C(OC)C=C1)CC(C2=CC=C(OC)C=C2)=O',
-  "1,3-Bis(chloromethyl)tetramethyldisiloxane": 'ClC[Si](C)(C)O[Si](C)(C)CCl',
-  "1,3-Bis(diphenylphosphino)propane": 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,3-Bis[(di-tert-butylphosphino)oxy]benzene": 'CC(P(OC1=CC(OP(C(C)(C)C)C(C)(C)C)=CC=C1)C(C)(C)C)(C)C',
-  "1,3-Bis[(trimethylsilyl)ethynyl]benzene": 'C[Si](C#CC1=CC(C#C[Si](C)(C)C)=CC=C1)(C)C',
-  "1,3-Di(1-adamantyl)imidazolinium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)CC1',
-  "1,3-Di(1-adamantyl)imidazolium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)C=C1',
-  "1,3-Di(2-pyridyl)-1,3-propanedione": 'O=C(C1=NC=CC=C1)CC(C2=NC=CC=C2)=O',
-  "1,3-Dibromo-5,5-dimethylhydantoin": 'O=C(N1Br)N(Br)C(C)(C)C1=O',
-  "1,3-Dicyclohexylimidazolium Tetrafluoroborate": 'F[B-](F)(F)F.[N+]1(C2CCCCC2)=CN(C3CCCCC3)C=C1',
-  "1,3-Diiodo-5,5-dimethylhydantoin": 'O=C(N1I)N(I)C(C)(C)C1=O',
-  "1,3-Diisopropylimidazolinium Tetrafluoroborate": 'CC([N+]1=CN(C(C)C)CC1)C.F[B-](F)(F)F',
-  "1,3-Diisopropylimidazolium Tetrafluoroborate": 'CC([N+]1=CN(C(C)C)C=C1)C.F[B-](F)(F)F',
-  "1,3-Dimesitylimidazol-2-ylidene": 'CC1=CC(C)=CC(C)=C1N2[C]N(C3=C(C)C=C(C)C=C3C)C=C2',
-  "1,3-Dimesitylimidazolium Chloride": 'CC1=CC(C)=CC(C)=C1[N+]2=CN(C3=C(C)C=C(C)C=C3C)C=C2.[Cl-]',
-  "1,3-Dimethoxy-1,1,3,3-tetraphenyldisiloxane": 'CO[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O[Si](C3=CC=CC=C3)(OC)C4=CC=CC=C4',
-  "1,3-Dimethylimidazolium Chloride": 'C[N+]1=CN(C)C=C1.[Cl-]',
-  "1,3-Dimethylimidazolium Dimethyl Phosphate": 'C[N+]1=CN(C)C=C1.O=P(OC)([O-])OC',
-  "1,3-Dimethylimidazolium Iodide": 'C[N+]1=CN(C)C=C1.[I-]',
-  "1,3-Dimethylimidazolium Methyl Sulfate": 'C[N+]1=CN(C)C=C1.O=S(OC)([O-])=O',
-  "1,3-Diphenyl-1,3-propanedione": 'O=C(C1=CC=CC=C1)CC(C2=CC=CC=C2)=O',
-  "1,3-Di-tert-butylimidazol-2-ylidene": 'CC(N1[C]N(C(C)(C)C)C=C1)(C)C',
-  "1,3-Di-tert-butylimidazolium Tetrafluoroborate": 'CC([N+]1=CN(C(C)(C)C)C=C1)(C)C.F[B-](F)(F)F',
-  "1,3-Divinyltetramethyldisiloxane": 'C=C[Si](C)(C)O[Si](C)(C)C=C',
-  "1,3-xylene": 'CC1=CC=CC(C)=C1',
-  "1,4,7,10,13,16-Hexaazacyclooctadecane": 'N1CCNCCNCCNCCNCCNCC1',
-  "1,4,7,10,13,16-Hexaazacyclooctadecane Hexahydrochloride": '[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCCNCCNCC1',
-  "1,4,7,10-Tetraazacyclododecane": 'N1CCNCCNCCNCC1',
-  "1,4,7,10-Tetraazacyclododecane Tetrahydrochloride": '[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCC1',
-  "1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetic Acid": 'O=C(O)CN1CCN(CC(O)=O)CCN(CC(O)=O)CCN(CC(O)=O)CC1',
-  "1,4,7,10-Tetrabenzyl-1,4,7,10-tetraazacyclododecane": 'N1(CC2=CC=CC=C2)CCN(CC3=CC=CC=C3)CCN(CC4=CC=CC=C4)CCN(CC5=CC=CC=C5)CC1',
-  "1,4,7-Triazacyclononane": 'N1CCNCCNCC1',
-  "1,4,7-Trimethyl-1,4,7-triazacyclononane (stabilized with NaHCO3)": 'CN1CCN(C)CCN(C)CC1',
-  "1,4,8,11-Tetramethyl-1,4,8,11-tetraazacyclotetradecane": 'CN1CCN(C)CCCN(C)CCN(C)CCC1',
-  "1,4-Bis(dimethylsilyl)benzene": 'C[SiH](C1=CC=C([SiH](C)C)C=C1)C',
-  "1,4-Bis(diphenylphosphino)butane": 'P(CCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,4-Bis(trimethylsilyl)-1,3-butadiyne": 'C[Si](C#CC#C[Si](C)(C)C)(C)C',
-  "1,4-Cyclohexadiene": 'C1=CCC=CC1',
-  "1,4-Cyclohexadiene (stabilized with BHT)": 'C1=CCC=CC1',
+  '1,2-Bis(dimethylphosphino)ethane': 'CP(CCP(C)C)C',
+  '1,2-Bis(diphenylphosphino)benzene': 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=CC=C1P(C4=CC=CC=C4)C5=CC=CC=C5',
+  '1,2-Bis(diphenylphosphino)ethane': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,2-Bis(phenylsulfinyl)ethane Palladium(II) Diacetate': 'O=S(CCS(C1=CC=CC=C1)=O)C2=CC=CC=C2.CC([O-])=O.CC([O-])=O.[Pd+2]',
+  '1,2-Bis(tert-butylthio)ethane Borane': 'CC(SCCSC(C)(C)C)(C)C.B',
+  '1,2-Bis(trichlorosilyl)ethane': 'Cl[Si](CC[Si](Cl)(Cl)Cl)(Cl)Cl',
+  '1,2-Bis(triethoxysilyl)ethane': 'CCO[Si](CC[Si](OCC)(OCC)OCC)(OCC)OCC',
+  '1,2-Bis(trimethylsilyl)benzene': 'C[Si](C1=CC=CC=C1[Si](C)(C)C)(C)C',
+  '1,2-Bis[bis(pentafluorophenyl)phosphino]ethane': 'FC1=C(F)C(F)=C(F)C(F)=C1P(CCP(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F)C4=C(F)C(F)=C(F)C(F)=C4F',
+  '1,2-Dibromo-1,1,2,2-tetrachloroethane': 'ClC(Cl)(Br)C(Cl)(Br)Cl',
+  '1,2-Dibromo-1,1,2,2-tetrafluoroethane': 'FC(F)(Br)C(F)(Br)F',
+  '1,2-Dichlorotetramethyldisilane': 'Cl[Si](C)(C)[Si](C)(C)Cl',
+  '1,2-Dimethyl-3-propylimidazolium Iodide': 'CCC[N+]1=C(C)N(C)C=C1.[I-]',
+  '1,2-Phenylenediamine': 'NC1=CC=CC=C1N',
+  '1,2-xylene': 'CC1=CC=CC=C1C',
+  '1,3,5,7-Cyclooctatetraene': 'C1=C\\C=C/C=C\\C=C/1',
+  '1,3,5-Cycloheptatriene': 'C1=CC=CC=CC1',
+  '1,3,5-Trimethylbenzene': 'CC1=CC(C)=CC(C)=C1',
+  '1,3,5-Tris(3,3,3-trifluoropropyl)-1,3,5-trimethylcyclotrisiloxane': 'C[Si]1(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O[Si](C)(CCC(F)(F)F)O1',
+  '1,3-Bis(2,4,6-trimethylphenyl)imidazolinium Chloride': 'CC1=C([N+]2=CN(C3=C(C)C=C(C)C=C3C)CC2)C(C)=CC(C)=C1.[Cl-]',
+  '1,3-Bis(2,6-diisopropylphenyl)-1,3,2-diazaphospholidine 2-Oxide': 'CC(C1=C(N2P(N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)=O)C(C(C)C)=CC=C1)C',
+  '1,3-Bis(2,6-diisopropylphenyl)imidazol-2-ylidene': 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C',
+  '1,3-Bis(2,6-diisopropylphenyl)imidazolidin-2-ylidene': 'CC(C1=C(N2[C]N(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C',
+  '1,3-Bis(2,6-diisopropylphenyl)imidazolinium Chloride': 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)CC2)C(C(C)C)=CC=C1)C.[Cl-]',
+  '1,3-Bis(2,6-diisopropylphenyl)imidazolium Chloride': 'CC(C1=C([N+]2=CN(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
+  '1,3-Bis(4-hydroxybutyl)tetramethyldisiloxane': 'OCCCC[Si](C)(C)O[Si](C)(C)CCCCO',
+  '1,3-Bis(4-methoxyphenyl)-1,3-propanedione': 'O=C(C1=CC=C(OC)C=C1)CC(C2=CC=C(OC)C=C2)=O',
+  '1,3-Bis(chloromethyl)tetramethyldisiloxane': 'ClC[Si](C)(C)O[Si](C)(C)CCl',
+  '1,3-Bis(diphenylphosphino)propane': 'P(CCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,3-Bis[(di-tert-butylphosphino)oxy]benzene': 'CC(P(OC1=CC(OP(C(C)(C)C)C(C)(C)C)=CC=C1)C(C)(C)C)(C)C',
+  '1,3-Bis[(trimethylsilyl)ethynyl]benzene': 'C[Si](C#CC1=CC(C#C[Si](C)(C)C)=CC=C1)(C)C',
+  '1,3-Di(1-adamantyl)imidazolinium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)CC1',
+  '1,3-Di(1-adamantyl)imidazolium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C23CC4CC(C3)CC(C4)C2)=CN(C56CC7CC(C6)CC(C7)C5)C=C1',
+  '1,3-Di(2-pyridyl)-1,3-propanedione': 'O=C(C1=NC=CC=C1)CC(C2=NC=CC=C2)=O',
+  '1,3-Dibromo-5,5-dimethylhydantoin': 'O=C(N1Br)N(Br)C(C)(C)C1=O',
+  '1,3-Dicyclohexylimidazolium Tetrafluoroborate': 'F[B-](F)(F)F.[N+]1(C2CCCCC2)=CN(C3CCCCC3)C=C1',
+  '1,3-Diiodo-5,5-dimethylhydantoin': 'O=C(N1I)N(I)C(C)(C)C1=O',
+  '1,3-Diisopropylimidazolinium Tetrafluoroborate': 'CC([N+]1=CN(C(C)C)CC1)C.F[B-](F)(F)F',
+  '1,3-Diisopropylimidazolium Tetrafluoroborate': 'CC([N+]1=CN(C(C)C)C=C1)C.F[B-](F)(F)F',
+  '1,3-Dimesitylimidazol-2-ylidene': 'CC1=CC(C)=CC(C)=C1N2[C]N(C3=C(C)C=C(C)C=C3C)C=C2',
+  '1,3-Dimesitylimidazolium Chloride': 'CC1=CC(C)=CC(C)=C1[N+]2=CN(C3=C(C)C=C(C)C=C3C)C=C2.[Cl-]',
+  '1,3-Dimethoxy-1,1,3,3-tetraphenyldisiloxane': 'CO[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O[Si](C3=CC=CC=C3)(OC)C4=CC=CC=C4',
+  '1,3-Dimethylimidazolium Chloride': 'C[N+]1=CN(C)C=C1.[Cl-]',
+  '1,3-Dimethylimidazolium Dimethyl Phosphate': 'C[N+]1=CN(C)C=C1.O=P(OC)([O-])OC',
+  '1,3-Dimethylimidazolium Iodide': 'C[N+]1=CN(C)C=C1.[I-]',
+  '1,3-Dimethylimidazolium Methyl Sulfate': 'C[N+]1=CN(C)C=C1.O=S(OC)([O-])=O',
+  '1,3-Diphenyl-1,3-propanedione': 'O=C(C1=CC=CC=C1)CC(C2=CC=CC=C2)=O',
+  '1,3-Di-tert-butylimidazol-2-ylidene': 'CC(N1[C]N(C(C)(C)C)C=C1)(C)C',
+  '1,3-Di-tert-butylimidazolium Tetrafluoroborate': 'CC([N+]1=CN(C(C)(C)C)C=C1)(C)C.F[B-](F)(F)F',
+  '1,3-Divinyltetramethyldisiloxane': 'C=C[Si](C)(C)O[Si](C)(C)C=C',
+  '1,3-xylene': 'CC1=CC=CC(C)=C1',
+  '1,4,7,10,13,16-Hexaazacyclooctadecane': 'N1CCNCCNCCNCCNCCNCC1',
+  '1,4,7,10,13,16-Hexaazacyclooctadecane Hexahydrochloride': '[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCCNCCNCC1',
+  '1,4,7,10-Tetraazacyclododecane': 'N1CCNCCNCCNCC1',
+  '1,4,7,10-Tetraazacyclododecane Tetrahydrochloride': '[H]Cl.[H]Cl.[H]Cl.[H]Cl.N1CCNCCNCCNCC1',
+  '1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetic Acid': 'O=C(O)CN1CCN(CC(O)=O)CCN(CC(O)=O)CCN(CC(O)=O)CC1',
+  '1,4,7,10-Tetrabenzyl-1,4,7,10-tetraazacyclododecane': 'N1(CC2=CC=CC=C2)CCN(CC3=CC=CC=C3)CCN(CC4=CC=CC=C4)CCN(CC5=CC=CC=C5)CC1',
+  '1,4,7-Triazacyclononane': 'N1CCNCCNCC1',
+  '1,4,7-Trimethyl-1,4,7-triazacyclononane (stabilized with NaHCO3)': 'CN1CCN(C)CCN(C)CC1',
+  '1,4,8,11-Tetramethyl-1,4,8,11-tetraazacyclotetradecane': 'CN1CCN(C)CCCN(C)CCN(C)CCC1',
+  '1,4-Bis(dimethylsilyl)benzene': 'C[SiH](C1=CC=C([SiH](C)C)C=C1)C',
+  '1,4-Bis(diphenylphosphino)butane': 'P(CCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,4-Bis(trimethylsilyl)-1,3-butadiyne': 'C[Si](C#CC#C[Si](C)(C)C)(C)C',
+  '1,4-Cyclohexadiene': 'C1=CCC=CC1',
+  '1,4-Cyclohexadiene (stabilized with BHT)': 'C1=CCC=CC1',
   "1,4-Di[[2,2':6',2''-terpyridin]-4'-yl]benzene": 'C1(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)=CC=C(C5=CC(C6=NC=CC=C6)=NC(C7=NC=CC=C7)=C5)C=C1',
-  "1,4-Diazabicyclo[2.2.2]octane": 'N1(CC2)CCN2CC1',
-  "1,4-Dimethyl-1,2,4-triazolium Iodide": 'CN1C=N[N+](C)=C1.[I-]',
-  "1,4-dioxane": 'C1COCCO1',
-  "1,4-xylene": 'CC1=CC=C(C)C=C1',
-  "1,5,7-Triazabicyclo[4.4.0]dec-5-ene": 'N12CCCN=C1NCCC2',
-  "1,5,9-Triazacyclododecane": 'N1CCCNCCCNCCC1',
-  "1,5-Bis(diphenylphosphino)pentane": 'P(CCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,5-Cyclooctadiene": 'C1=C\\CC/C=C\\CC/1',
+  '1,4-Diazabicyclo[2.2.2]octane': 'N1(CC2)CCN2CC1',
+  '1,4-Dimethyl-1,2,4-triazolium Iodide': 'CN1C=N[N+](C)=C1.[I-]',
+  '1,4-dioxane': 'C1COCCO1',
+  '1,4-xylene': 'CC1=CC=C(C)C=C1',
+  '1,5,7-Triazabicyclo[4.4.0]dec-5-ene': 'N12CCCN=C1NCCC2',
+  '1,5,9-Triazacyclododecane': 'N1CCCNCCCNCCC1',
+  '1,5-Bis(diphenylphosphino)pentane': 'P(CCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,5-Cyclooctadiene': 'C1=C\\CC/C=C\\CC/1',
   "1,5-Cyclooctadiene [stabilized with Octadecyl 3-(3',5'-Di-tert-butyl-4'-hydroxyphenyl)propionate]": 'C1=C\\CC/C=C\\CC/1',
-  "1,5-Diazabicyclo[4.3.0]-5-nonene": 'N12CCCN=C1CCC2',
-  "1,5-Diazabicyclo[4.3.0]non-5-ene": 'N12CCCN=C1CCC2',
-  "1,5-Dichloro-1,1,3,3,5,5-hexamethyltrisiloxane": 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(Cl)C',
-  "1,5-Dimethyl-2,4-bis[2-(trimethylsilyl)ethynyl]benzene": 'C[Si](C#CC1=C(C)C=C(C)C(C#C[Si](C)(C)C)=C1)(C)C',
-  "1,5-Hexadiene": 'C=CCCC=C',
-  "1,6-Bis(diphenylphosphino)hexane": 'P(CCCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "1,7-Dichloro-1,1,3,3,5,5,7,7-octamethyltetrasiloxane": 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(C)O[Si](C)(Cl)C',
-  "1,8-Bis(dimethylamino)naphthalene": 'CN(C1=CC=CC2=CC=CC(N(C)C)=C12)C',
-  "1,8-Bis(diphenylphosphino)naphthalene": 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=C4C(P(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC4=CC=C1',
-  "1,8-Diazabicyclo[5.4.0]-7-undecene": 'N12CCCCCC1=NCCC2',
-  "1,8-Diazabicyclo[5.4.0]-7-undecene Hydrogen Tribromide": 'N12CCCCCC1=NCCC2.[H+].[Br-].[Br-].[Br-]',
-  "1,8-Diazabicyclo[5.4.0]undec-7-ene": 'N12CCCCCC1=NCCC2',
-  "1-[2-(Di-tert-butylphosphino)phenyl]-3,5-diphenyl-1H-pyrazole": 'CC(P(C1=CC=CC=C1N2N=C(C3=CC=CC=C3)C=C2C4=CC=CC=C4)C(C)(C)C)(C)C',
-  "1-[3-(Trimethoxysilyl)propyl]urea": 'O=C(N)NCCC[Si](OC)(OC)OC',
-  "1-[Bis(trifluoromethanesulfonyl)methyl]-2,3,4,5,6-pentafluorobenzene": 'FC1=C(C(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
-  "10-Methyl-9-phenylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  "10-Methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=CC3=C1C=CC=C3.O=Cl(=O)([O-])=O',
-  "1-Acetoxy-5-bromo-1,2-benziodoxol-3(1H)-one": 'O=C1OI(OC(C)=O)C2=CC=C(Br)C=C12',
-  "1-Allyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CC=C)C=C1.[Cl-]',
-  "1-Bromo-3-(trimethylsilyl)benzene": 'C[Si](C1=CC(Br)=CC=C1)(C)C',
-  "1-Bromo-4-(trimethylsilyl)benzene": 'C[Si](C1=CC=C(Br)C=C1)(C)C',
-  "1-Butyl-1-methylpiperidinium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1(CCCC)CCCCC1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  "1-Butyl-1-methylpiperidinium Bromide": 'C[N+]1(CCCC)CCCCC1.[Br-]',
-  "1-Butyl-1-methylpyrrolidinium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1(CCCC)CCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "1-Butyl-1-methylpyrrolidinium Bromide": 'C[N+]1(CCCC)CCCC1.[Br-]',
-  "1-Butyl-1-methylpyrrolidinium Chloride": 'C[N+]1(CCCC)CCCC1.[Cl-]',
-  "1-Butyl-1-methylpyrrolidinium Dicyanamide": 'C[N+]1(CCCC)CCCC1.N#C[N-]C#N',
-  "1-Butyl-1-methylpyrrolidinium Trifluoromethanesulfonate": 'C[N+]1(CCCC)CCCC1.O=S(C(F)(F)F)([O-])=O',
-  "1-Butyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CCCC',
-  "1-Butyl-2,3-dimethylimidazolium Chloride": 'C[N+]1=C(C)N(CCCC)C=C1.[Cl-]',
-  "1-Butyl-2,3-dimethylimidazolium Hexafluorophosphate": 'C[N+]1=C(C)N(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Butyl-2,3-dimethylimidazolium Tetrafluoroborate": 'C[N+]1=C(C)N(CCCC)C=C1.F[B-](F)(F)F',
-  "1-Butyl-2,3-dimethylimidazolium Trifluoromethanesulfonate": 'C[N+]1=C(C)N(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Butyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "1-Butyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCC)C=C1.[Br-]',
-  "1-Butyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCC)C=C1.[Cl-]',
-  "1-Butyl-3-methylimidazolium Dicyanamide": 'C[N+]1=CN(CCCC)C=C1.N#C[N-]C#N',
-  "1-Butyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Butyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CCCC)C=C1.[I-]',
-  "1-Butyl-3-methylimidazolium Methanesulfonate": 'C[N+]1=CN(CCCC)C=C1.CS(=O)([O-])=O',
-  "1-Butyl-3-methylimidazolium Methyl Sulfate": 'C[N+]1=CN(CCCC)C=C1.O=S(OC)([O-])=O',
-  "1-Butyl-3-methylimidazolium Tetrachloroferrate": 'C[N+]1=CN(CCCC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
-  "1-Butyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCCC)C=C1.F[B-](F)(F)F',
-  "1-Butyl-3-methylimidazolium Thiocyanate": 'C[N+]1=CN(CCCC)C=C1.[S-]C#N',
-  "1-Butyl-3-methylimidazolium Tribromide": 'C[N+]1=CN(CCCC)C=C1.[Br-].[Br-].[Br-]',
-  "1-Butyl-3-methylimidazolium Tricyanomethanide": 'C[N+]1=CN(CCCC)C=C1.N#C[C-](C#N)C#N',
-  "1-Butyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate": 'C[N+]1=CN(CCCC)C=C1.FC([B-](F)(F)F)(F)F',
-  "1-Butyl-3-methylimidazolium Trifluoroacetate": 'C[N+]1=CN(CCCC)C=C1.O=C([O-])C(F)(F)F',
-  "1-Butyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Butyl-3-methylpyridinium Bromide": 'CC1=C[N+](CCCC)=CC=C1.[Br-]',
-  "1-Butyl-3-methylpyridinium Chloride": 'CC1=C[N+](CCCC)=CC=C1.[Cl-]',
-  "1-Butyl-4-methylpyridinium Bromide": 'CC1=CC=[N+](CCCC)C=C1.[Br-]',
-  "1-Butyl-4-methylpyridinium Chloride": 'CC1=CC=[N+](CCCC)C=C1.[Cl-]',
-  "1-Butyl-4-methylpyridinium Hexafluorophosphate": 'CC1=CC=[N+](CCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Butylpyridinium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CCCC[N+]1=CC=CC=C1',
-  "1-Butylpyridinium Bromide": 'CCCC[N+]1=CC=CC=C1.[Br-]',
-  "1-Butylpyridinium Chloride": 'CCCC[N+]1=CC=CC=C1.[Cl-]',
-  "1-Butylpyridinium Hexafluorophosphate": 'CCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
-  "1-Butylpyridinium Tetrafluoroborate": 'CCCC[N+]1=CC=CC=C1.F[B-](F)(F)F',
-  "1-Chloro-2-iodoethane": 'ICCCl',
-  "1-Cyclohexyl-3-(2-morpholinoethyl)carbodiimide Metho-p-toluenesulfonate": 'C[N+]1(CCN=C=NC2CCCCC2)CCOCC1.O=S(C3=CC=C(C)C=C3)([O-])=O',
-  "1-Cyclopentenylboronic Acid": 'OB(C1=CCCC1)O',
-  "1-Decyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCCCCCCCC)C=C1.O=S(C(F)(F)F)([N-]S(C(F)(F)F)(=O)=O)=O',
-  "1-Decyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Br-]',
-  "1-Decyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Cl-]',
-  "1-Ethoxycarbonyl-2-ethoxy-1,2-dihydroquinoline": 'CCOC1N(C(OCC)=O)C2=C(C=CC=C2)C=C1',
-  "1-Ethyl-1-methylpyrrolidinium Bromide": 'C[N+]1(CC)CCCC1.[Br-]',
-  "1-Ethyl-1-methylpyrrolidinium Tetrafluoroborate": 'C[N+]1(CC)CCCC1.F[B-](F)(F)F',
-  "1-Ethyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CC',
-  "1-Ethyl-2-methylpyridinium Bromide": 'CC1=CC=CC=[N+]1CC.[Br-]',
-  "1-Ethyl-3-(hydroxymethyl)pyridinium Ethyl Sulfate": 'OCC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
-  "1-Ethyl-3-methylimidazolium Acetate": 'C[N+]1=CN(CC)C=C1.CC([O-])=O',
-  "1-Ethyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "1-Ethyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CC)C=C1.[Br-]',
-  "1-Ethyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CC)C=C1.[Cl-]',
-  "1-Ethyl-3-methylimidazolium Dicyanamide": 'CCN1C=[N+](C)C=C1.N#C[N-]C#N',
-  "1-Ethyl-3-methylimidazolium Diethyl Phosphate": 'C[N+]1=CN(CC)C=C1.O=P(OCC)([O-])OCC',
-  "1-Ethyl-3-methylimidazolium Ethyl Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(OCC)([O-])=O',
-  "1-Ethyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CC)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Ethyl-3-methylimidazolium Hydrogen Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(O)([O-])=O',
-  "1-Ethyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CC)C=C1.[I-]',
-  "1-Ethyl-3-methylimidazolium Methanesulfonate": 'C[N+]1=CN(CC)C=C1.CS(=O)([O-])=O',
-  "1-Ethyl-3-methylimidazolium Methyl Sulfate": 'C[N+]1=CN(CC)C=C1.O=S(OC)([O-])=O',
-  "1-Ethyl-3-methylimidazolium Nitrate": 'C[N+]1=CN(CC)C=C1.[O-][N+]([O-])=O',
-  "1-Ethyl-3-methylimidazolium Tetrachloroferrate": 'C[N+]1=CN(CC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
-  "1-Ethyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CC)C=C1.F[B-](F)(F)F',
-  "1-Ethyl-3-methylimidazolium Thiocyanate": 'C[N+]1=CN(CC)C=C1.[S-]C#N',
-  "1-Ethyl-3-methylimidazolium Tricyanomethanide": 'C[N+]1=CN(CC)C=C1.N#C[C-](C#N)C#N',
-  "1-Ethyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate": 'C[N+]1=CN(CC)C=C1.FC([B-](F)(F)F)(F)F',
-  "1-Ethyl-3-methylimidazolium Trifluoroacetate": 'C[N+]1=CN(CC)C=C1.O=C([O-])C(F)(F)F',
-  "1-Ethyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Ethyl-3-methylimidazolium p-Toluenesulfonate": 'C[N+]1=CN(CC)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  "1-Ethyl-3-methylpyridinium Bis(trifluoromethanesulfonyl)imide": 'CC1=CC=C[N+](CC)=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "1-Ethyl-3-methylpyridinium Ethyl Sulfate": 'CC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
-  "1-Ethyl-4-methylpyridinium Bromide": 'CC1=CC=[N+](CC)C=C1.[Br-]',
-  "1-Ethylpyridinium Bromide": 'CC[N+]1=CC=CC=C1.[Br-]',
-  "1-Ethylpyridinium Chloride": 'CC[N+]1=CC=CC=C1.[Cl-]',
-  "1-Fluoro-2,4,6-trimethylpyridinium Tetrafluoroborate": 'CC1=[N+](F)C(C)=CC(C)=C1.F[B-](F)(F)F',
-  "1-Fluoro-2,4,6-trimethylpyridinium Trifluoromethanesulfonate": 'CC1=[N+](F)C(C)=CC(C)=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Fluoro-2,6-dichloropyridinium Tetrafluoroborate": 'ClC1=[N+](F)C(Cl)=CC=C1.F[B-](F)(F)F',
-  "1-Fluoro-3,3-dimethyl-1,2-benziodoxole": 'CC1(C)OI(F)C2=CC=CC=C12',
-  "1-Fluoropyridinium Tetrafluoroborate": 'F[N+]1=CC=CC=C1.F[B-](F)(F)F',
-  "1-Fluoropyridinium Trifluoromethanesulfonate": 'F[N+]1=CC=CC=C1.O=S(C(F)(F)F)([O-])=O',
-  "1H-Benzotriazol-1-yloxytripyrrolidinophosphonium Hexafluorophosphate": 'F[P-](F)(F)(F)(F)F.N1([P+](N2CCCC2)(ON3N=NC4=CC=CC=C43)N5CCCC5)CCCC1',
-  "1H-Benzotriazol-1-yloxytris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(ON1N=NC2=CC=CC=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  "1H-Cyclopenta[l]phenanthrene": 'C12=CC=CC=C1C(CC=C3)=C3C4=C2C=CC=C4',
-  "1-Hexyl-2,3-dimethylimidazolium Iodide": 'C[N+]1=C(C)N(CCCCCC)C=C1.[I-]',
-  "1-Hexyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide": 'C[N+]1=CN(CCCCCC)C=C1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  "1-Hexyl-3-methylimidazolium Bromide": 'C[N+]1=CN(CCCCCC)C=C1.[Br-]',
-  "1-Hexyl-3-methylimidazolium Chloride": 'C[N+]1=CN(CCCCCC)C=C1.[Cl-]',
-  "1-Hexyl-3-methylimidazolium Hexafluorophosphate": 'C[N+]1=CN(CCCCCC)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Hexyl-3-methylimidazolium Iodide": 'C[N+]1=CN(CCCCCC)C=C1.[I-]',
-  "1-Hexyl-3-methylimidazolium Tetrafluoroborate": 'C[N+]1=CN(CCCCCC)C=C1.F[B-](F)(F)F',
-  "1-Hexyl-3-methylimidazolium Trifluoromethanesulfonate": 'C[N+]1=CN(CCCCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Hexylpyridinium Hexafluorophosphate": 'CCCCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
-  "1-Hydroxy-6-(trifluoromethyl)benzotriazole": 'FC(C1=CC=C2N=NN(O)C2=C1)(F)F',
-  "1-Methoxy-3-(trimethylsilyloxy)-1,3-butadiene": 'C=C(O[Si](C)(C)C)/C=C/OC',
-  "1-Methyl-1-[4-(diphenylphosphino)benzyl]pyrrolidinium Bromide": 'C[N+]1(CC2=CC=C(P(C3=CC=CC=C3)C4=CC=CC=C4)C=C2)CCCC1.[Br-]',
-  "1-Methyl-1-propylpiperidinium Bis(fluorosulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCCC1',
-  "1-Methyl-1-propylpiperidinium Bromide": 'CCC[N+]1(C)CCCCC1.[Br-]',
-  "1-Methyl-1-propylpyrrolidinium Bis(trifluoromethanesulfonyl)imide": 'O=S(NS(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCC1',
-  "1-Methyl-2-pyrrolidinone": 'O=C1CCCN1C',
-  "1-Methyl-3-n-octylimidazolium Bromide": 'CCCCCCCC[N+]1=CN(C)C=C1.[Br-]',
-  "1-Methyl-3-n-octylimidazolium Chloride": 'CCCCCCCC[N+]1=CN(C)C=C1.[Cl-]',
-  "1-Methyl-3-n-octylimidazolium Hexafluorophosphate": 'CCCCCCCC[N+]1=CN(C)C=C1.F[P-](F)(F)(F)(F)F',
-  "1-Methyl-3-n-octylimidazolium Tetrafluoroborate": 'CCCCCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  "1-Methyl-3-n-octylimidazolium Trifluoromethanesulfonate": 'CCCCCCCC[N+]1=CN(C)C=C1.O=S(C(F)(F)F)([O-])=O',
-  "1-Methyl-3-pentylimidazolium Bromide": 'CCCCC[N+]1=CN(C)C=C1.[Br-]',
-  "1-Methyl-3-pentylimidazolium Tetrafluoroborate": 'CCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  "1-Methyl-3-propylimidazolium Bromide": 'CCC[N+]1=CN(C)C=C1.[Br-]',
-  "1-Methyl-3-propylimidazolium Chloride": 'CCC[N+]1=CN(C)C=C1.[Cl-]',
-  "1-Methyl-3-propylimidazolium Iodide": 'CCC[N+]1=CN(C)C=C1.[I-]',
-  "1-Methyl-3-propylimidazolium Tetrafluoroborate": 'CCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
-  "1-Phenyl-1,3-butanedione": 'CC(CC(C1=CC=CC=C1)=O)=O',
-  "1-Phenyl-2-(trimethylsilyl)acetylene": 'C[Si](C#CC1=CC=CC=C1)(C)C',
-  "1-Propylpyridinium Chloride": 'CCC[N+]1=CC=CC=C1.[Cl-]',
-  "1-Trifluoromethyl-1,2-benziodoxol-3(1H)-one": 'O=C1OI(C(F)(F)F)C2=CC=CC=C12',
-  "1-Trifluoromethyl-3,3-dimethyl-1,2-benziodoxole": 'CC1(C)OI(C(F)(F)F)C2=CC=CC=C12',
-  "2-(1H-1,2,4-Triazol-3-yl)pyridine": 'C1(C2=NNC=N2)=NC=CC=C1',
-  "2-(2-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC(C=CC=C1)=C1B(N2)NC3=CC=CC4=C3C2=CC=C4',
-  "2-(2-Chloro-6-fluorophenyl)ethylamine hydrochloride": 'NCCC1=C(F)C=CC=C1Cl.[H]Cl',
-  "2-(2-Hydroxyphenyl)benzothiazole": 'OC1=CC=CC=C1C2=NC3=CC=CC=C3S2',
-  "2-(2-Hydroxyphenyl)benzoxazole": 'OC1=CC=CC=C1C2=NC3=CC=CC=C3O2',
-  "2-(2-Pyridyl)benzoxazole": 'C1(C2=NC=CC=C2)=NC3=CC=CC=C3O1',
-  "2-(2-Pyridyl)indole": 'C(N1)(C2=NC=CC=C2)=CC3=C1C=CC=C3',
-  "2-(3,4-Epoxycyclohexyl)ethyltrimethoxysilane": 'CO[Si](OC)(CCC1CC(O2)C2CC1)OC',
-  "2-(3-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC1=CC=CC(B(N2)NC3=CC=CC4=C3C2=CC=C4)=C1',
-  "2-(4-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine": 'BrC1=CC=C(C=C1)B(N2)NC3=CC=CC4=CC=CC2=C43',
-  "2-(4-Thiazolyl)benzimidazole": 'C1(C2=CSC=N2)=NC3=CC=CC=C3N1',
-  "2-(5-Norbornene-2,3-dicarboximido)-1,1,3,3-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N(C1=O)C(C2C1C3C=CC2C3)=O.F[B-](F)(F)F',
+  '1,5-Diazabicyclo[4.3.0]-5-nonene': 'N12CCCN=C1CCC2',
+  '1,5-Diazabicyclo[4.3.0]non-5-ene': 'N12CCCN=C1CCC2',
+  '1,5-Dichloro-1,1,3,3,5,5-hexamethyltrisiloxane': 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(Cl)C',
+  '1,5-Dimethyl-2,4-bis[2-(trimethylsilyl)ethynyl]benzene': 'C[Si](C#CC1=C(C)C=C(C)C(C#C[Si](C)(C)C)=C1)(C)C',
+  '1,5-Hexadiene': 'C=CCCC=C',
+  '1,6-Bis(diphenylphosphino)hexane': 'P(CCCCCCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  '1,7-Dichloro-1,1,3,3,5,5,7,7-octamethyltetrasiloxane': 'C[Si](C)(Cl)O[Si](C)(C)O[Si](C)(C)O[Si](C)(Cl)C',
+  '1,8-Bis(dimethylamino)naphthalene': 'CN(C1=CC=CC2=CC=CC(N(C)C)=C12)C',
+  '1,8-Bis(diphenylphosphino)naphthalene': 'C1(P(C2=CC=CC=C2)C3=CC=CC=C3)=C4C(P(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC4=CC=C1',
+  '1,8-Diazabicyclo[5.4.0]-7-undecene': 'N12CCCCCC1=NCCC2',
+  '1,8-Diazabicyclo[5.4.0]-7-undecene Hydrogen Tribromide': 'N12CCCCCC1=NCCC2.[H+].[Br-].[Br-].[Br-]',
+  '1,8-Diazabicyclo[5.4.0]undec-7-ene': 'N12CCCCCC1=NCCC2',
+  '1-[2-(Di-tert-butylphosphino)phenyl]-3,5-diphenyl-1H-pyrazole': 'CC(P(C1=CC=CC=C1N2N=C(C3=CC=CC=C3)C=C2C4=CC=CC=C4)C(C)(C)C)(C)C',
+  '1-[3-(Trimethoxysilyl)propyl]urea': 'O=C(N)NCCC[Si](OC)(OC)OC',
+  '1-[Bis(trifluoromethanesulfonyl)methyl]-2,3,4,5,6-pentafluorobenzene': 'FC1=C(C(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C(F)=C(F)C(F)=C1F',
+  '10-Methyl-9-phenylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  '10-Methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=CC3=C1C=CC=C3.O=Cl(=O)([O-])=O',
+  '1-Acetoxy-5-bromo-1,2-benziodoxol-3(1H)-one': 'O=C1OI(OC(C)=O)C2=CC=C(Br)C=C12',
+  '1-Allyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CC=C)C=C1.[Cl-]',
+  '1-Bromo-3-(trimethylsilyl)benzene': 'C[Si](C1=CC(Br)=CC=C1)(C)C',
+  '1-Bromo-4-(trimethylsilyl)benzene': 'C[Si](C1=CC=C(Br)C=C1)(C)C',
+  '1-Butyl-1-methylpiperidinium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1(CCCC)CCCCC1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  '1-Butyl-1-methylpiperidinium Bromide': 'C[N+]1(CCCC)CCCCC1.[Br-]',
+  '1-Butyl-1-methylpyrrolidinium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1(CCCC)CCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  '1-Butyl-1-methylpyrrolidinium Bromide': 'C[N+]1(CCCC)CCCC1.[Br-]',
+  '1-Butyl-1-methylpyrrolidinium Chloride': 'C[N+]1(CCCC)CCCC1.[Cl-]',
+  '1-Butyl-1-methylpyrrolidinium Dicyanamide': 'C[N+]1(CCCC)CCCC1.N#C[N-]C#N',
+  '1-Butyl-1-methylpyrrolidinium Trifluoromethanesulfonate': 'C[N+]1(CCCC)CCCC1.O=S(C(F)(F)F)([O-])=O',
+  '1-Butyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CCCC',
+  '1-Butyl-2,3-dimethylimidazolium Chloride': 'C[N+]1=C(C)N(CCCC)C=C1.[Cl-]',
+  '1-Butyl-2,3-dimethylimidazolium Hexafluorophosphate': 'C[N+]1=C(C)N(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Butyl-2,3-dimethylimidazolium Tetrafluoroborate': 'C[N+]1=C(C)N(CCCC)C=C1.F[B-](F)(F)F',
+  '1-Butyl-2,3-dimethylimidazolium Trifluoromethanesulfonate': 'C[N+]1=C(C)N(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Butyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  '1-Butyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCC)C=C1.[Br-]',
+  '1-Butyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCC)C=C1.[Cl-]',
+  '1-Butyl-3-methylimidazolium Dicyanamide': 'C[N+]1=CN(CCCC)C=C1.N#C[N-]C#N',
+  '1-Butyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Butyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CCCC)C=C1.[I-]',
+  '1-Butyl-3-methylimidazolium Methanesulfonate': 'C[N+]1=CN(CCCC)C=C1.CS(=O)([O-])=O',
+  '1-Butyl-3-methylimidazolium Methyl Sulfate': 'C[N+]1=CN(CCCC)C=C1.O=S(OC)([O-])=O',
+  '1-Butyl-3-methylimidazolium Tetrachloroferrate': 'C[N+]1=CN(CCCC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
+  '1-Butyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCCC)C=C1.F[B-](F)(F)F',
+  '1-Butyl-3-methylimidazolium Thiocyanate': 'C[N+]1=CN(CCCC)C=C1.[S-]C#N',
+  '1-Butyl-3-methylimidazolium Tribromide': 'C[N+]1=CN(CCCC)C=C1.[Br-].[Br-].[Br-]',
+  '1-Butyl-3-methylimidazolium Tricyanomethanide': 'C[N+]1=CN(CCCC)C=C1.N#C[C-](C#N)C#N',
+  '1-Butyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate': 'C[N+]1=CN(CCCC)C=C1.FC([B-](F)(F)F)(F)F',
+  '1-Butyl-3-methylimidazolium Trifluoroacetate': 'C[N+]1=CN(CCCC)C=C1.O=C([O-])C(F)(F)F',
+  '1-Butyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Butyl-3-methylpyridinium Bromide': 'CC1=C[N+](CCCC)=CC=C1.[Br-]',
+  '1-Butyl-3-methylpyridinium Chloride': 'CC1=C[N+](CCCC)=CC=C1.[Cl-]',
+  '1-Butyl-4-methylpyridinium Bromide': 'CC1=CC=[N+](CCCC)C=C1.[Br-]',
+  '1-Butyl-4-methylpyridinium Chloride': 'CC1=CC=[N+](CCCC)C=C1.[Cl-]',
+  '1-Butyl-4-methylpyridinium Hexafluorophosphate': 'CC1=CC=[N+](CCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Butylpyridinium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CCCC[N+]1=CC=CC=C1',
+  '1-Butylpyridinium Bromide': 'CCCC[N+]1=CC=CC=C1.[Br-]',
+  '1-Butylpyridinium Chloride': 'CCCC[N+]1=CC=CC=C1.[Cl-]',
+  '1-Butylpyridinium Hexafluorophosphate': 'CCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
+  '1-Butylpyridinium Tetrafluoroborate': 'CCCC[N+]1=CC=CC=C1.F[B-](F)(F)F',
+  '1-Chloro-2-iodoethane': 'ICCCl',
+  '1-Cyclohexyl-3-(2-morpholinoethyl)carbodiimide Metho-p-toluenesulfonate': 'C[N+]1(CCN=C=NC2CCCCC2)CCOCC1.O=S(C3=CC=C(C)C=C3)([O-])=O',
+  '1-Cyclopentenylboronic Acid': 'OB(C1=CCCC1)O',
+  '1-Decyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCCCCCCCC)C=C1.O=S(C(F)(F)F)([N-]S(C(F)(F)F)(=O)=O)=O',
+  '1-Decyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Br-]',
+  '1-Decyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCCCCCCCC)C=C1.[Cl-]',
+  '1-Ethoxycarbonyl-2-ethoxy-1,2-dihydroquinoline': 'CCOC1N(C(OCC)=O)C2=C(C=CC=C2)C=C1',
+  '1-Ethyl-1-methylpyrrolidinium Bromide': 'C[N+]1(CC)CCCC1.[Br-]',
+  '1-Ethyl-1-methylpyrrolidinium Tetrafluoroborate': 'C[N+]1(CC)CCCC1.F[B-](F)(F)F',
+  '1-Ethyl-2,3-dimethylimidazolium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC1=[N+](C)C=CN1CC',
+  '1-Ethyl-2-methylpyridinium Bromide': 'CC1=CC=CC=[N+]1CC.[Br-]',
+  '1-Ethyl-3-(hydroxymethyl)pyridinium Ethyl Sulfate': 'OCC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
+  '1-Ethyl-3-methylimidazolium Acetate': 'C[N+]1=CN(CC)C=C1.CC([O-])=O',
+  '1-Ethyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  '1-Ethyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CC)C=C1.[Br-]',
+  '1-Ethyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CC)C=C1.[Cl-]',
+  '1-Ethyl-3-methylimidazolium Dicyanamide': 'CCN1C=[N+](C)C=C1.N#C[N-]C#N',
+  '1-Ethyl-3-methylimidazolium Diethyl Phosphate': 'C[N+]1=CN(CC)C=C1.O=P(OCC)([O-])OCC',
+  '1-Ethyl-3-methylimidazolium Ethyl Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(OCC)([O-])=O',
+  '1-Ethyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CC)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Ethyl-3-methylimidazolium Hydrogen Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(O)([O-])=O',
+  '1-Ethyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CC)C=C1.[I-]',
+  '1-Ethyl-3-methylimidazolium Methanesulfonate': 'C[N+]1=CN(CC)C=C1.CS(=O)([O-])=O',
+  '1-Ethyl-3-methylimidazolium Methyl Sulfate': 'C[N+]1=CN(CC)C=C1.O=S(OC)([O-])=O',
+  '1-Ethyl-3-methylimidazolium Nitrate': 'C[N+]1=CN(CC)C=C1.[O-][N+]([O-])=O',
+  '1-Ethyl-3-methylimidazolium Tetrachloroferrate': 'C[N+]1=CN(CC)C=C1.Cl[Fe-](Cl)(Cl)Cl',
+  '1-Ethyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CC)C=C1.F[B-](F)(F)F',
+  '1-Ethyl-3-methylimidazolium Thiocyanate': 'C[N+]1=CN(CC)C=C1.[S-]C#N',
+  '1-Ethyl-3-methylimidazolium Tricyanomethanide': 'C[N+]1=CN(CC)C=C1.N#C[C-](C#N)C#N',
+  '1-Ethyl-3-methylimidazolium Trifluoro(trifluoromethyl)borate': 'C[N+]1=CN(CC)C=C1.FC([B-](F)(F)F)(F)F',
+  '1-Ethyl-3-methylimidazolium Trifluoroacetate': 'C[N+]1=CN(CC)C=C1.O=C([O-])C(F)(F)F',
+  '1-Ethyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Ethyl-3-methylimidazolium p-Toluenesulfonate': 'C[N+]1=CN(CC)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  '1-Ethyl-3-methylpyridinium Bis(trifluoromethanesulfonyl)imide': 'CC1=CC=C[N+](CC)=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  '1-Ethyl-3-methylpyridinium Ethyl Sulfate': 'CC1=C[N+](CC)=CC=C1.O=S(OCC)([O-])=O',
+  '1-Ethyl-4-methylpyridinium Bromide': 'CC1=CC=[N+](CC)C=C1.[Br-]',
+  '1-Ethylpyridinium Bromide': 'CC[N+]1=CC=CC=C1.[Br-]',
+  '1-Ethylpyridinium Chloride': 'CC[N+]1=CC=CC=C1.[Cl-]',
+  '1-Fluoro-2,4,6-trimethylpyridinium Tetrafluoroborate': 'CC1=[N+](F)C(C)=CC(C)=C1.F[B-](F)(F)F',
+  '1-Fluoro-2,4,6-trimethylpyridinium Trifluoromethanesulfonate': 'CC1=[N+](F)C(C)=CC(C)=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Fluoro-2,6-dichloropyridinium Tetrafluoroborate': 'ClC1=[N+](F)C(Cl)=CC=C1.F[B-](F)(F)F',
+  '1-Fluoro-3,3-dimethyl-1,2-benziodoxole': 'CC1(C)OI(F)C2=CC=CC=C12',
+  '1-Fluoropyridinium Tetrafluoroborate': 'F[N+]1=CC=CC=C1.F[B-](F)(F)F',
+  '1-Fluoropyridinium Trifluoromethanesulfonate': 'F[N+]1=CC=CC=C1.O=S(C(F)(F)F)([O-])=O',
+  '1H-Benzotriazol-1-yloxytripyrrolidinophosphonium Hexafluorophosphate': 'F[P-](F)(F)(F)(F)F.N1([P+](N2CCCC2)(ON3N=NC4=CC=CC=C43)N5CCCC5)CCCC1',
+  '1H-Benzotriazol-1-yloxytris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(ON1N=NC2=CC=CC=C21)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  '1H-Cyclopenta[l]phenanthrene': 'C12=CC=CC=C1C(CC=C3)=C3C4=C2C=CC=C4',
+  '1-Hexyl-2,3-dimethylimidazolium Iodide': 'C[N+]1=C(C)N(CCCCCC)C=C1.[I-]',
+  '1-Hexyl-3-methylimidazolium Bis(trifluoromethanesulfonyl)imide': 'C[N+]1=CN(CCCCCC)C=C1.O=S([N-]S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  '1-Hexyl-3-methylimidazolium Bromide': 'C[N+]1=CN(CCCCCC)C=C1.[Br-]',
+  '1-Hexyl-3-methylimidazolium Chloride': 'C[N+]1=CN(CCCCCC)C=C1.[Cl-]',
+  '1-Hexyl-3-methylimidazolium Hexafluorophosphate': 'C[N+]1=CN(CCCCCC)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Hexyl-3-methylimidazolium Iodide': 'C[N+]1=CN(CCCCCC)C=C1.[I-]',
+  '1-Hexyl-3-methylimidazolium Tetrafluoroborate': 'C[N+]1=CN(CCCCCC)C=C1.F[B-](F)(F)F',
+  '1-Hexyl-3-methylimidazolium Trifluoromethanesulfonate': 'C[N+]1=CN(CCCCCC)C=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Hexylpyridinium Hexafluorophosphate': 'CCCCCC[N+]1=CC=CC=C1.F[P-](F)(F)(F)(F)F',
+  '1-Hydroxy-6-(trifluoromethyl)benzotriazole': 'FC(C1=CC=C2N=NN(O)C2=C1)(F)F',
+  '1-Methoxy-3-(trimethylsilyloxy)-1,3-butadiene': 'C=C(O[Si](C)(C)C)/C=C/OC',
+  '1-Methyl-1-[4-(diphenylphosphino)benzyl]pyrrolidinium Bromide': 'C[N+]1(CC2=CC=C(P(C3=CC=CC=C3)C4=CC=CC=C4)C=C2)CCCC1.[Br-]',
+  '1-Methyl-1-propylpiperidinium Bis(fluorosulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCCC1',
+  '1-Methyl-1-propylpiperidinium Bromide': 'CCC[N+]1(C)CCCCC1.[Br-]',
+  '1-Methyl-1-propylpyrrolidinium Bis(trifluoromethanesulfonyl)imide': 'O=S(NS(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+]1(CCC)CCCC1',
+  '1-Methyl-2-pyrrolidinone': 'O=C1CCCN1C',
+  '1-Methyl-3-n-octylimidazolium Bromide': 'CCCCCCCC[N+]1=CN(C)C=C1.[Br-]',
+  '1-Methyl-3-n-octylimidazolium Chloride': 'CCCCCCCC[N+]1=CN(C)C=C1.[Cl-]',
+  '1-Methyl-3-n-octylimidazolium Hexafluorophosphate': 'CCCCCCCC[N+]1=CN(C)C=C1.F[P-](F)(F)(F)(F)F',
+  '1-Methyl-3-n-octylimidazolium Tetrafluoroborate': 'CCCCCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  '1-Methyl-3-n-octylimidazolium Trifluoromethanesulfonate': 'CCCCCCCC[N+]1=CN(C)C=C1.O=S(C(F)(F)F)([O-])=O',
+  '1-Methyl-3-pentylimidazolium Bromide': 'CCCCC[N+]1=CN(C)C=C1.[Br-]',
+  '1-Methyl-3-pentylimidazolium Tetrafluoroborate': 'CCCCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  '1-Methyl-3-propylimidazolium Bromide': 'CCC[N+]1=CN(C)C=C1.[Br-]',
+  '1-Methyl-3-propylimidazolium Chloride': 'CCC[N+]1=CN(C)C=C1.[Cl-]',
+  '1-Methyl-3-propylimidazolium Iodide': 'CCC[N+]1=CN(C)C=C1.[I-]',
+  '1-Methyl-3-propylimidazolium Tetrafluoroborate': 'CCC[N+]1=CN(C)C=C1.F[B-](F)(F)F',
+  '1-Phenyl-1,3-butanedione': 'CC(CC(C1=CC=CC=C1)=O)=O',
+  '1-Phenyl-2-(trimethylsilyl)acetylene': 'C[Si](C#CC1=CC=CC=C1)(C)C',
+  '1-Propylpyridinium Chloride': 'CCC[N+]1=CC=CC=C1.[Cl-]',
+  '1-Trifluoromethyl-1,2-benziodoxol-3(1H)-one': 'O=C1OI(C(F)(F)F)C2=CC=CC=C12',
+  '1-Trifluoromethyl-3,3-dimethyl-1,2-benziodoxole': 'CC1(C)OI(C(F)(F)F)C2=CC=CC=C12',
+  '2-(1H-1,2,4-Triazol-3-yl)pyridine': 'C1(C2=NNC=N2)=NC=CC=C1',
+  '2-(2-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC(C=CC=C1)=C1B(N2)NC3=CC=CC4=C3C2=CC=C4',
+  '2-(2-Chloro-6-fluorophenyl)ethylamine hydrochloride': 'NCCC1=C(F)C=CC=C1Cl.[H]Cl',
+  '2-(2-Hydroxyphenyl)benzothiazole': 'OC1=CC=CC=C1C2=NC3=CC=CC=C3S2',
+  '2-(2-Hydroxyphenyl)benzoxazole': 'OC1=CC=CC=C1C2=NC3=CC=CC=C3O2',
+  '2-(2-Pyridyl)benzoxazole': 'C1(C2=NC=CC=C2)=NC3=CC=CC=C3O1',
+  '2-(2-Pyridyl)indole': 'C(N1)(C2=NC=CC=C2)=CC3=C1C=CC=C3',
+  '2-(3,4-Epoxycyclohexyl)ethyltrimethoxysilane': 'CO[Si](OC)(CCC1CC(O2)C2CC1)OC',
+  '2-(3-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC1=CC=CC(B(N2)NC3=CC=CC4=C3C2=CC=C4)=C1',
+  '2-(4-Bromophenyl)-2,3-dihydro-1H-naphtho[1,8-de][1,3,2]diazaborine': 'BrC1=CC=C(C=C1)B(N2)NC3=CC=CC4=CC=CC2=C43',
+  '2-(4-Thiazolyl)benzimidazole': 'C1(C2=CSC=N2)=NC3=CC=CC=C3N1',
+  '2-(5-Norbornene-2,3-dicarboximido)-1,1,3,3-tetramethyluronium Tetrafluoroborate': 'CN(C)C(N(C)C)=[O+]N(C1=O)C(C2C1C3C=CC2C3)=O.F[B-](F)(F)F',
   "2-(Dicyclohexylphosphino)-2'-(dimethylamino)biphenyl": 'CN(C1=CC=CC=C1C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C',
-  "2-(Dicyclohexylphosphino)biphenyl": 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3CCCCC3)C4CCCCC4',
-  "2-(Dimethylvinylsilyl)pyridine": 'C=C[Si](C1=NC=CC=C1)(C)C',
-  "2-(Diphenylphosphino)benzaldehyde": 'O=CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  "2-(Diphenylphosphino)benzoic Acid": 'O=C(O)C1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  "2-(Diphenylphosphino)benzonitrile": 'N#CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
-  "2-(Diphenylphosphino)biphenyl": 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3=CC=CC=C3)C4=CC=CC=C4',
-  "2-(Di-tert-butylphosphino)biphenyl": 'CC(P(C1=CC=CC=C1C2=CC=CC=C2)C(C)(C)C)(C)C',
-  "2-(Trimethylsilylethynyl)thiophene": 'C[Si](C#CC1=CC=CS1)(C)C',
+  '2-(Dicyclohexylphosphino)biphenyl': 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3CCCCC3)C4CCCCC4',
+  '2-(Dimethylvinylsilyl)pyridine': 'C=C[Si](C1=NC=CC=C1)(C)C',
+  '2-(Diphenylphosphino)benzaldehyde': 'O=CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  '2-(Diphenylphosphino)benzoic Acid': 'O=C(O)C1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  '2-(Diphenylphosphino)benzonitrile': 'N#CC1=CC=CC=C1P(C2=CC=CC=C2)C3=CC=CC=C3',
+  '2-(Diphenylphosphino)biphenyl': 'C1(C2=CC=CC=C2)=CC=CC=C1P(C3=CC=CC=C3)C4=CC=CC=C4',
+  '2-(Di-tert-butylphosphino)biphenyl': 'CC(P(C1=CC=CC=C1C2=CC=CC=C2)C(C)(C)C)(C)C',
+  '2-(Trimethylsilylethynyl)thiophene': 'C[Si](C#CC1=CC=CS1)(C)C',
   "2,2'-(Methylimino)bis(N,N-di-n-octylacetamide)": 'CN(CC(N(CCCCCCCC)CCCCCCCC)=O)CC(N(CCCCCCCC)CCCCCCCC)=O',
-  "2,2,2-Trifluoro-1,1-ethanediol": 'OC(O)C(F)(F)F',
-  "2,2,2-Trifluoroethyl Methanesulfonate": 'CS(=O)(OCC(F)(F)F)=O',
-  "2,2,2-Trifluoroethyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OCC(F)(F)F)=O',
-  "2,2,2-Trifluoroethyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCC(F)(F)F)=O)C=C1',
-  "2,2,2-Trifluoro-N,N-dimethylacetamide": 'O=C(N(C)C)C(F)(F)F',
-  "2,2,3,3,3-Pentafluoropropyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCC(F)(F)C(F)(F)F)=O)C=C1',
-  "2,2,6,6-Tetramethylpiperidine": 'CC1(C)CCCC(C)(C)N1',
-  "2,2,6,6-Tetramethylpiperidine 1-Oxyl": 'CC1(C)CCCC(C)(C)N1[O]',
-  "2,2,6,6-Tetramethylpiperidine 1-Oxyl Free Radical": 'CC1(C)CCCC(C)(C)N1[O]',
+  '2,2,2-Trifluoro-1,1-ethanediol': 'OC(O)C(F)(F)F',
+  '2,2,2-Trifluoroethyl Methanesulfonate': 'CS(=O)(OCC(F)(F)F)=O',
+  '2,2,2-Trifluoroethyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OCC(F)(F)F)=O',
+  '2,2,2-Trifluoroethyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCC(F)(F)F)=O)C=C1',
+  '2,2,2-Trifluoro-N,N-dimethylacetamide': 'O=C(N(C)C)C(F)(F)F',
+  '2,2,3,3,3-Pentafluoropropyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCC(F)(F)C(F)(F)F)=O)C=C1',
+  '2,2,6,6-Tetramethylpiperidine': 'CC1(C)CCCC(C)(C)N1',
+  '2,2,6,6-Tetramethylpiperidine 1-Oxyl': 'CC1(C)CCCC(C)(C)N1[O]',
+  '2,2,6,6-Tetramethylpiperidine 1-Oxyl Free Radical': 'CC1(C)CCCC(C)(C)N1[O]',
   "2,2':6',2''-Terpyridine": 'C1(C2=NC(C3=NC=CC=C3)=CC=C2)=NC=CC=C1',
   "2,2':6',2''-Terpyridine-4'-carboxylic Acid": 'O=C(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)O',
-  "2,2′-Bipyridinium chlorochromate": '[O-][Cr](=O)(Cl)=O.[O-][Cr](=O)(Cl)=O.C1(C2=CC=CC=[NH+]2)=CC=CC=[NH+]1',
+  '2,2′-Bipyridinium chlorochromate': '[O-][Cr](=O)(Cl)=O.[O-][Cr](=O)(Cl)=O.C1(C2=CC=CC=[NH+]2)=CC=CC=[NH+]1',
   "2,2'-Bi(1,8-naphthyridine)": 'C1(C2=NC3=NC=CC=C3C=C2)=NC4=NC=CC=C4C=C1',
   "2,2'-Bi-4-lepidine": 'CC1=CC(C2=NC3=CC=CC=C3C(C)=C2)=NC4=C1C=CC=C4',
   "2,2'-Bicinchoninic Acid Dipotassium Salt Hydrate": 'O=C([O-])C1=CC(C2=NC3=CC=CC=C3C(C([O-])=O)=C2)=NC4=CC=CC=C14.[H]O[H].[K+].[K+]',
@@ -560,161 +560,161 @@ export const reagents_kombi = {
   "2,2'-Bis(diphenylphosphino)biphenyl": 'C1(C2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
   "2,2'-Carbonylbis(3,5-dioxo-4-methyl-1,2,4-oxadiazolidine)": 'O=C(N(C(N1C)=O)OC1=O)N(C(N2C)=O)OC2=O',
   "2,2'-Diamino-4,4'-bithiazole": 'NC1=NC(C2=CSC(N)=N2)=CS1',
-  "2,2-Difluoro-2-(fluorosulfonyl)acetic Acid": 'O=C(O)C(F)(F)S(=O)(F)=O',
-  "2,2-Difluoroethyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OCC(F)F)=O',
-  "2,2-Difluoroethylamine": 'NCC(F)F',
-  "2,2-Dimethyl-6,6,7,7,8,8,8-heptafluoro-3,5-octanedione": 'CC(C)(C)C(CC(C(F)(F)C(F)(F)C(F)(F)F)=O)=O',
-  "2,2-Dimethylpropylmagnesium chloride": 'Cl[Mg]CC(C)(C)C',
+  '2,2-Difluoro-2-(fluorosulfonyl)acetic Acid': 'O=C(O)C(F)(F)S(=O)(F)=O',
+  '2,2-Difluoroethyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OCC(F)F)=O',
+  '2,2-Difluoroethylamine': 'NCC(F)F',
+  '2,2-Dimethyl-6,6,7,7,8,8,8-heptafluoro-3,5-octanedione': 'CC(C)(C)C(CC(C(F)(F)C(F)(F)C(F)(F)F)=O)=O',
+  '2,2-Dimethylpropylmagnesium chloride': 'Cl[Mg]CC(C)(C)C',
   "2,2'-Dipyridyl Disulfide": 'C1(SSC2=NC=CC=C2)=NC=CC=C1',
   "2,2'-Methylenebisbenzothiazole": 'C1(CC2=NC3=CC=CC=C3S2)=NC4=CC=CC=C4S1',
-  "2,3,7,8,12,13,17,18-Octaethylporphyrin": 'CCC1=C(CC)C2=NC1=CC3=C(CC)C(CC)=C(N3)C=C4C(CC)=C(CC)C(C=C5C(CC)=C(CC)C(N5)=C2)=N4',
-  "2,3,7,8,12,13,17,18-Octafluoro-5,10,15,20-tetrakis(pentafluorophenyl)porphyrin": 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C(F)=C(F)C(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C(F)=C(F)C5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C(F)=C7F)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=C(F)C(F)=C2N9)=N3',
-  "2,3-Dimethyl-1-propylimidazolium Bis(trifluoromethanesulfonyl)imide": 'CN1C(C)=[N+](CCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "2,3-Lutidine": 'CC1=NC=CC=C1C',
-  "2,4,4,6-Tetrabromo-2,5-cyclohexadienone": 'BrC1=CC(Br)(Br)C=C(Br)C1=O',
-  "2,4,5-Trichlorophenol": 'OC1=CC(Cl)=C(Cl)C=C1Cl',
-  "2,4,6,8-Tetramethyl-2,4,6,8-tetravinylcyclotetrasiloxane": 'C=CO1(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]1',
-  "2,4,6,8-Tetramethylcyclotetrasiloxane": 'CO1[SiH2]O(C)[SiH2]O(C)[SiH2]O(C)[SiH2]1',
-  "2,4,6-Tri(2-pyridyl)-1,3,5-triazine": 'C1(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=N1',
-  "2,4,6-Tri(4-pyridyl)-1,3,5-triazine": 'C1(C2=CC=NC=C2)=NC(C3=CC=NC=C3)=NC(C4=CC=NC=C4)=N1',
-  "2,4,6-Trichlorobenzoyl Chloride": 'O=C(Cl)C1=C(Cl)C=C(Cl)C=C1Cl',
-  "2,4,6-Triisopropylbenzenesulfonyl Chloride": 'O=S(C1=C(C(C)C)C=C(C(C)C)C=C1C(C)C)(Cl)=O',
-  "2,4,6-Trimethylpyridinium p-Toluenesulfonate": 'CC1=[NH+]C(C)=CC(C)=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  "2,4,6-Tris(3,4,5-trifluorophenyl)boroxin": 'FC1=C(F)C(F)=CC(B2OB(C3=CC(F)=C(F)C(F)=C3)OB(C4=CC(F)=C(F)C(F)=C4)O2)=C1',
-  "2,4-Dibromo-6-[(E)-[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]phenol": 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C(Br)C=C1Br',
-  "2,4-Dibromo-6-[[[[(4S,5S)-4,5-dihydro-4,5-diphenyl-1-tosyl-1H-imidazol-2-yl]methyl][(S)-1-phenylethyl]amino]methyl]phenol": 'OC1=C(CN(CC2=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2S(=O)(C5=CC=C(C)C=C5)=O)[C@H](C6=CC=CC=C6)C)C=C(Br)C=C1Br',
-  "2,4-Lutidine": 'CC1=NC=CC(C)=C1',
-  "2,4-Mesitylenedisulfonyl Dichloride": 'CC1=C(S(=O)(Cl)=O)C(C)=CC(C)=C1S(=O)(Cl)=O',
-  "2,5-Bis(4-bromophenyl)-1,1-dimethyl-3,4-diphenylsilole": 'C[Si]1(C)C(C2=CC=C(Br)C=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=C(Br)C=C5',
-  "2,5-Bis[(trimethylsilyl)ethynyl]thiophene": 'C[Si](C#CC1=CC=C(C#C[Si](C)(C)C)S1)(C)C',
-  "2,5-Dibromo-1,1,3,4-tetraphenylsilole": 'BrC1=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C(Br)[Si]1(C4=CC=CC=C4)C5=CC=CC=C5',
-  "2,5-Dibromo-1,1-dimethyl-3,4-diphenylsilole": 'C[Si]1(C)C(Br)=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C1Br',
-  "2,5-Diphenylpyridine": 'C1(C2=CC=CC=C2)=NC=C(C3=CC=CC=C3)C=C1',
-  "2,5-Lutidine": 'CC1=NC=C(C)C=C1',
-  "2,5-Norbornadiene": 'C12C=CC(C2)C=C1',
-  "2,6-Bis(2-benzimidazolyl)pyridine": 'C1(C2=NC3=CC=CC=C3N2)=NC(C4=NC5=CC=CC=C5N4)=CC=C1',
-  "2,6-Bis(2-pyridyl)-4(1H)-pyridone": 'O=C1C=C(C2=NC=CC=C2)NC(C3=NC=CC=C3)=C1',
-  "2,6-Bis[(2,2,6,6-tetramethyl-1-piperidinyl)methyl]phenylboronic Acid": 'OB(C1=C(CN2C(C)(C)CCCC2(C)C)C=CC=C1CN3C(C)(C)CCCC3(C)C)O',
-  "2,6-Bis[(2R,4S,5S)-1-benzyl-4,5-diphenylimidazolidin-2-yl]pyridine": 'C1([C@@H]2N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2CC5=CC=CC=C5)=NC([C@@H]6N[C@@H](C7=CC=CC=C7)[C@H](C8=CC=CC=C8)N6CC9=CC=CC=C9)=CC=C1',
-  "2,6-Bis[(2S,4S)-4-methyl-5,5-diphenyloxazolidin-2-yl]pyridine": 'C[C@@H]1N[C@H](C2=CC=CC([C@@H]3OC(C4=CC=CC=C4)(C5=CC=CC=C5)[C@H](C)N3)=N2)OC1(C6=CC=CC=C6)C7=CC=CC=C7',
-  "2,6-Bis[(2S,5S)-4,4-diphenyl-1-aza-3-oxabicyclo[3.3.0]octan-2-yl]pyridine": '[H][C@]12C(C3=CC=CC=C3)(C4=CC=CC=C4)O[C@@H](C5=CC=CC([C@H]6N7CCC[C@@]7([H])C(C8=CC=CC=C8)(C9=CC=CC=C9)O6)=N5)N1CCC2',
-  "2,6-Di(1-pyrazolyl)pyridine": 'C1(N2N=CC=C2)=NC(N3N=CC=C3)=CC=C1',
-  "2,6-Di(2H-1,2,3-triazol-4-yl)pyridine": 'C1(C2=NNN=C2)=NC(C3=NNN=C3)=CC=C1',
-  "2,6-Dimethyl-3,5-heptanedione": 'CC(C)C(CC(C(C)C)=O)=O',
-  "2,6-Lutidine": 'CC1=NC(C)=CC=C1',
-  "2,8,9-Triisobutyl-2,5,8,9-tetraaza-1-phosphabicyclo[3.3.3]undecane": 'CC(C)CN1CCN2CCN(CC(C)C)P1N(CC(C)C)CC2',
-  "2,8,9-Triisopropyl-2,5,8,9-tetraaza-1-phosphabicyclo[3,3,3]undecane": 'CC(N1CCN2CCN(C(C)C)P1N(C(C)C)CC2)C',
-  "2,8-Difluoro-5-(trifluoromethyl)-5H-dibenzo[b,d]thiophen-5-ium Trifluoromethanesulfonate": 'FC([S+]1C2=CC=C(F)C=C2C3=CC(F)=CC=C31)(F)F.O=S(C(F)(F)F)([O-])=O',
-  "2,9-Dibutyl-1,10-phenanthroline": 'CCCCC1=NC2=C3N=C(CCCC)C=CC3=CC=C2C=C1',
-  "2,9-Dichloro-1,10-phenanthroline": 'ClC1=NC2=C3N=C(Cl)C=CC3=CC=C2C=C1',
-  "2,9-Diphenyl-1,10-phenanthroline": 'C1(C2=CC=CC=C2)=NC3=C4N=C(C5=CC=CC=C5)C=CC4=CC=C3C=C1',
-  "2-[(2,2,6,6-Tetramethyl-1-piperidyl)methyl]phenylboronic Acid": 'OB(C1=CC=CC=C1CN2C(C)(C)CCCC2(C)C)O',
-  "2-[N,N-Bis(trifluoromethanesulfonyl)amino]-5-chloropyridine": 'ClC1=CN=C(N(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C=C1',
-  "2-Acetylcyclohexanone": 'O=C1C(C(C)=O)CCCC1',
-  "2-Acetylcyclopentanone": 'O=C1C(C(C)=O)CCC1',
-  "2-Bromo-1,10-phenanthroline": 'BrC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  "2-Bromo-1-ethylpyridinium Tetrafluoroborate": 'CC[N+]1=CC=CC=C1Br.F[B-](F)(F)F',
-  "2-Bromo-2-cyano-N,N-dimethylacetamide": 'O=C(N(C)C)C(Br)C#N',
-  "2-Chloro-1,10-phenanthroline": 'ClC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  "2-Chloro-1,3,2-dioxaphospholane": 'ClP1OCCO1',
-  "2-Chloro-1,3-bis(2,6-diisopropylphenyl)-1H-imidazolium Chloride": 'CC(C1=C([N+]2=C(Cl)N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
-  "2-Chloro-1,3-dimethylimidazolinium Chloride": 'C[N+]1=C(Cl)N(C)CC1.[Cl-]',
-  "2-Chloro-1,3-dimethylimidazolinium Hexafluorophosphate": 'C[N+]1=C(Cl)N(C)CC1.F[P-](F)(F)(F)(F)F',
-  "2-Chloro-1,3-dimethylimidazolinium Tetrafluoroborate": 'C[N+]1=C(Cl)N(C)CC1.F[B-](F)(F)F',
-  "2-Chloro-1-methylpyridinium Iodide": 'C[N+]1=CC=CC=C1Cl.[I-]',
-  "2-Chloro-1-methylpyridinium p-Toluenesulfonate": 'C[N+]1=CC=CC=C1Cl.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  "2-Chloro-4H-1,3,2-benzodioxaphosphorin-4-one": 'O=C1OP(Cl)OC2=CC=CC=C12',
-  "2-Cyanoethyltriethoxysilane": 'CCO[Si](OCC)(CCC#N)OCC',
+  '2,3,7,8,12,13,17,18-Octaethylporphyrin': 'CCC1=C(CC)C2=NC1=CC3=C(CC)C(CC)=C(N3)C=C4C(CC)=C(CC)C(C=C5C(CC)=C(CC)C(N5)=C2)=N4',
+  '2,3,7,8,12,13,17,18-Octafluoro-5,10,15,20-tetrakis(pentafluorophenyl)porphyrin': 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C(F)=C(F)C(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C(F)=C(F)C5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C(F)=C7F)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=C(F)C(F)=C2N9)=N3',
+  '2,3-Dimethyl-1-propylimidazolium Bis(trifluoromethanesulfonyl)imide': 'CN1C(C)=[N+](CCC)C=C1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  '2,3-Lutidine': 'CC1=NC=CC=C1C',
+  '2,4,4,6-Tetrabromo-2,5-cyclohexadienone': 'BrC1=CC(Br)(Br)C=C(Br)C1=O',
+  '2,4,5-Trichlorophenol': 'OC1=CC(Cl)=C(Cl)C=C1Cl',
+  '2,4,6,8-Tetramethyl-2,4,6,8-tetravinylcyclotetrasiloxane': 'C=CO1(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]O(C=C)(C)[SiH2]1',
+  '2,4,6,8-Tetramethylcyclotetrasiloxane': 'CO1[SiH2]O(C)[SiH2]O(C)[SiH2]O(C)[SiH2]1',
+  '2,4,6-Tri(2-pyridyl)-1,3,5-triazine': 'C1(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=N1',
+  '2,4,6-Tri(4-pyridyl)-1,3,5-triazine': 'C1(C2=CC=NC=C2)=NC(C3=CC=NC=C3)=NC(C4=CC=NC=C4)=N1',
+  '2,4,6-Trichlorobenzoyl Chloride': 'O=C(Cl)C1=C(Cl)C=C(Cl)C=C1Cl',
+  '2,4,6-Triisopropylbenzenesulfonyl Chloride': 'O=S(C1=C(C(C)C)C=C(C(C)C)C=C1C(C)C)(Cl)=O',
+  '2,4,6-Trimethylpyridinium p-Toluenesulfonate': 'CC1=[NH+]C(C)=CC(C)=C1.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  '2,4,6-Tris(3,4,5-trifluorophenyl)boroxin': 'FC1=C(F)C(F)=CC(B2OB(C3=CC(F)=C(F)C(F)=C3)OB(C4=CC(F)=C(F)C(F)=C4)O2)=C1',
+  '2,4-Dibromo-6-[(E)-[[(1R,2R)-2-(isoindolin-2-yl)-1,2-diphenylethyl]imino]methyl]phenol': 'OC1=C(/C=N/[C@H](C2=CC=CC=C2)[C@H](N3CC4=C(C=CC=C4)C3)C5=CC=CC=C5)C=C(Br)C=C1Br',
+  '2,4-Dibromo-6-[[[[(4S,5S)-4,5-dihydro-4,5-diphenyl-1-tosyl-1H-imidazol-2-yl]methyl][(S)-1-phenylethyl]amino]methyl]phenol': 'OC1=C(CN(CC2=N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2S(=O)(C5=CC=C(C)C=C5)=O)[C@H](C6=CC=CC=C6)C)C=C(Br)C=C1Br',
+  '2,4-Lutidine': 'CC1=NC=CC(C)=C1',
+  '2,4-Mesitylenedisulfonyl Dichloride': 'CC1=C(S(=O)(Cl)=O)C(C)=CC(C)=C1S(=O)(Cl)=O',
+  '2,5-Bis(4-bromophenyl)-1,1-dimethyl-3,4-diphenylsilole': 'C[Si]1(C)C(C2=CC=C(Br)C=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=C(Br)C=C5',
+  '2,5-Bis[(trimethylsilyl)ethynyl]thiophene': 'C[Si](C#CC1=CC=C(C#C[Si](C)(C)C)S1)(C)C',
+  '2,5-Dibromo-1,1,3,4-tetraphenylsilole': 'BrC1=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C(Br)[Si]1(C4=CC=CC=C4)C5=CC=CC=C5',
+  '2,5-Dibromo-1,1-dimethyl-3,4-diphenylsilole': 'C[Si]1(C)C(Br)=C(C2=CC=CC=C2)C(C3=CC=CC=C3)=C1Br',
+  '2,5-Diphenylpyridine': 'C1(C2=CC=CC=C2)=NC=C(C3=CC=CC=C3)C=C1',
+  '2,5-Lutidine': 'CC1=NC=C(C)C=C1',
+  '2,5-Norbornadiene': 'C12C=CC(C2)C=C1',
+  '2,6-Bis(2-benzimidazolyl)pyridine': 'C1(C2=NC3=CC=CC=C3N2)=NC(C4=NC5=CC=CC=C5N4)=CC=C1',
+  '2,6-Bis(2-pyridyl)-4(1H)-pyridone': 'O=C1C=C(C2=NC=CC=C2)NC(C3=NC=CC=C3)=C1',
+  '2,6-Bis[(2,2,6,6-tetramethyl-1-piperidinyl)methyl]phenylboronic Acid': 'OB(C1=C(CN2C(C)(C)CCCC2(C)C)C=CC=C1CN3C(C)(C)CCCC3(C)C)O',
+  '2,6-Bis[(2R,4S,5S)-1-benzyl-4,5-diphenylimidazolidin-2-yl]pyridine': 'C1([C@@H]2N[C@@H](C3=CC=CC=C3)[C@H](C4=CC=CC=C4)N2CC5=CC=CC=C5)=NC([C@@H]6N[C@@H](C7=CC=CC=C7)[C@H](C8=CC=CC=C8)N6CC9=CC=CC=C9)=CC=C1',
+  '2,6-Bis[(2S,4S)-4-methyl-5,5-diphenyloxazolidin-2-yl]pyridine': 'C[C@@H]1N[C@H](C2=CC=CC([C@@H]3OC(C4=CC=CC=C4)(C5=CC=CC=C5)[C@H](C)N3)=N2)OC1(C6=CC=CC=C6)C7=CC=CC=C7',
+  '2,6-Bis[(2S,5S)-4,4-diphenyl-1-aza-3-oxabicyclo[3.3.0]octan-2-yl]pyridine': '[H][C@]12C(C3=CC=CC=C3)(C4=CC=CC=C4)O[C@@H](C5=CC=CC([C@H]6N7CCC[C@@]7([H])C(C8=CC=CC=C8)(C9=CC=CC=C9)O6)=N5)N1CCC2',
+  '2,6-Di(1-pyrazolyl)pyridine': 'C1(N2N=CC=C2)=NC(N3N=CC=C3)=CC=C1',
+  '2,6-Di(2H-1,2,3-triazol-4-yl)pyridine': 'C1(C2=NNN=C2)=NC(C3=NNN=C3)=CC=C1',
+  '2,6-Dimethyl-3,5-heptanedione': 'CC(C)C(CC(C(C)C)=O)=O',
+  '2,6-Lutidine': 'CC1=NC(C)=CC=C1',
+  '2,8,9-Triisobutyl-2,5,8,9-tetraaza-1-phosphabicyclo[3.3.3]undecane': 'CC(C)CN1CCN2CCN(CC(C)C)P1N(CC(C)C)CC2',
+  '2,8,9-Triisopropyl-2,5,8,9-tetraaza-1-phosphabicyclo[3,3,3]undecane': 'CC(N1CCN2CCN(C(C)C)P1N(C(C)C)CC2)C',
+  '2,8-Difluoro-5-(trifluoromethyl)-5H-dibenzo[b,d]thiophen-5-ium Trifluoromethanesulfonate': 'FC([S+]1C2=CC=C(F)C=C2C3=CC(F)=CC=C31)(F)F.O=S(C(F)(F)F)([O-])=O',
+  '2,9-Dibutyl-1,10-phenanthroline': 'CCCCC1=NC2=C3N=C(CCCC)C=CC3=CC=C2C=C1',
+  '2,9-Dichloro-1,10-phenanthroline': 'ClC1=NC2=C3N=C(Cl)C=CC3=CC=C2C=C1',
+  '2,9-Diphenyl-1,10-phenanthroline': 'C1(C2=CC=CC=C2)=NC3=C4N=C(C5=CC=CC=C5)C=CC4=CC=C3C=C1',
+  '2-[(2,2,6,6-Tetramethyl-1-piperidyl)methyl]phenylboronic Acid': 'OB(C1=CC=CC=C1CN2C(C)(C)CCCC2(C)C)O',
+  '2-[N,N-Bis(trifluoromethanesulfonyl)amino]-5-chloropyridine': 'ClC1=CN=C(N(S(=O)(C(F)(F)F)=O)S(=O)(C(F)(F)F)=O)C=C1',
+  '2-Acetylcyclohexanone': 'O=C1C(C(C)=O)CCCC1',
+  '2-Acetylcyclopentanone': 'O=C1C(C(C)=O)CCC1',
+  '2-Bromo-1,10-phenanthroline': 'BrC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  '2-Bromo-1-ethylpyridinium Tetrafluoroborate': 'CC[N+]1=CC=CC=C1Br.F[B-](F)(F)F',
+  '2-Bromo-2-cyano-N,N-dimethylacetamide': 'O=C(N(C)C)C(Br)C#N',
+  '2-Chloro-1,10-phenanthroline': 'ClC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  '2-Chloro-1,3,2-dioxaphospholane': 'ClP1OCCO1',
+  '2-Chloro-1,3-bis(2,6-diisopropylphenyl)-1H-imidazolium Chloride': 'CC(C1=C([N+]2=C(Cl)N(C3=C(C(C)C)C=CC=C3C(C)C)C=C2)C(C(C)C)=CC=C1)C.[Cl-]',
+  '2-Chloro-1,3-dimethylimidazolinium Chloride': 'C[N+]1=C(Cl)N(C)CC1.[Cl-]',
+  '2-Chloro-1,3-dimethylimidazolinium Hexafluorophosphate': 'C[N+]1=C(Cl)N(C)CC1.F[P-](F)(F)(F)(F)F',
+  '2-Chloro-1,3-dimethylimidazolinium Tetrafluoroborate': 'C[N+]1=C(Cl)N(C)CC1.F[B-](F)(F)F',
+  '2-Chloro-1-methylpyridinium Iodide': 'C[N+]1=CC=CC=C1Cl.[I-]',
+  '2-Chloro-1-methylpyridinium p-Toluenesulfonate': 'C[N+]1=CC=CC=C1Cl.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  '2-Chloro-4H-1,3,2-benzodioxaphosphorin-4-one': 'O=C1OP(Cl)OC2=CC=CC=C12',
+  '2-Cyanoethyltriethoxysilane': 'CCO[Si](OCC)(CCC#N)OCC',
   "2-Dicyclohexylphosphino-2',4',6'-triisopropylbiphenyl": 'CC(C1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(C(C)C)=CC(C(C)C)=C1)C',
   "2-Dicyclohexylphosphino-2',6'-diisopropoxybiphenyl": 'CC(OC1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(OC(C)C)=CC=C1)C',
   "2-Dicyclohexylphosphino-2',6'-dimethoxybiphenyl": 'COC1=C(C2=CC=CC=C2P(C3CCCCC3)C4CCCCC4)C(OC)=CC=C1',
   "2-Di-tert-butylphosphino-2',4',6'-triisopropylbiphenyl": 'CC(C1=C(C2=CC=CC=C2P(C(C)(C)C)C(C)(C)C)C(C(C)C)=CC(C(C)C)=C1)C',
-  "2-Fluoro-1-methylpyridinium p-Toluenesulfonate": 'C[N+]1=CC=CC=C1F.CC2=CC=C(S(=O)([O-])=O)C=C2',
-  "2-Furoyltrifluoroacetone": 'O=C(CC(C1=CC=CO1)=O)C(F)(F)F',
-  "2-Hydroxy-2-azaadamantane": 'ON1C2CC3CC(C2)CC1C3',
-  "2-Hydroxybenzaldehyde Phenylhydrazone": 'OC1=CC=CC=C1/C=N/NC2=CC=CC=C2',
-  "2-Hydroxybenzoic Acid": 'O=C(O)C1=CC=CC=C1O',
-  "2-Hydroxypyridine N-Oxide": 'OC1=CC=CC=[N+]1[O-]',
-  "2-Iodosobenzoic Acid": 'O=C(O)C1=CC=CC=C1I=O',
-  "2-Iodoxybenzoic acid": 'O=C(O)C1=CC=CC=C1I(=O)=O',
-  "2-methoxy ethanol": 'OCCOC',
-  "2-Methyl-1,10-phenanthroline": 'CC1=NC2=C3N=CC=CC3=CC=C2C=C1',
-  "2-Methyl-6-nitrobenzoic Anhydride": 'O=C(OC(C1=C([N+]([O-])=O)C=CC=C1C)=O)C2=C([N+]([O-])=O)C=CC=C2C',
-  "2-Methylbenzo[e]indene": 'N/A',
-  "2-Methylcyclopenta[l]phenanthrene": 'CC1=CC2=C3CC=CC=C3C4=C(C2=C1)C=CC=C4',
-  "2-Nitrophenylarsonic Acid": 'O=[As](C1=CC=CC=C1[N+]([O-])=O)(O)O',
-  "2-Norbornene": 'C12C=CC(C2)CC1',
-  "2-Phenylethylboronic Acid": 'OB(CCC1=CC=CC=C1)O',
-  "2-Salicylideneaminophenol": 'OC1=CC=CC=C1/N=C/C2=CC=CC=C2O',
-  "2-tert-Butyl-1,1,3,3-tetramethylguanidine": 'CN(C)C(N(C)C)=NC(C)(C)C',
-  "2-Trimethylsilyloxy-1,3-butadiene": 'C=C(O[Si](C)(C)C)C=C',
-  "2-Trimethylsilylthiophene": 'C[Si](C1=CC=CS1)(C)C',
-  "3-(2-Aminoethylamino)propyltrimethoxysilane": 'CO[Si](OC)(CCCNCCN)OC',
-  "3-(Diethoxyphosphoryloxy)-1,2,3-benzotriazin-4(3H)-one": 'O=C1N(OP(OCC)(OCC)=O)N=NC2=CC=CC=C12',
-  "3-(Dimethylsilyloxy)-1,1,5,5-tetramethyl-3-phenyltrisiloxane": 'C[SiH](C)O[Si](C1=CC=CC=C1)(O[SiH](C)C)O[SiH](C)C',
-  "3-(Diphenylphosphino)-1-propylamine": 'NCCCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "3-(Triallylsilyl)propyl Acrylate": 'C=CC(OCCC[Si](CC=C)(CC=C)CC=C)=O',
-  "3-(Triallylsilyl)propyl Methacrylate": 'CC(C(OCCC[Si](CC=C)(CC=C)CC=C)=O)=C',
-  "3-(Triethoxysilyl)propyl Isocyanate": 'CCO[Si](CCCN=C=O)(OCC)OCC',
-  "3-(Trimethoxysilyl)propyl Acrylate": 'C=CC(OCCC[Si](OC)(OC)OC)=O',
-  "3-(Trimethoxysilyl)propyl Methacrylate": 'CC(C(OCCC[Si](OC)(OC)OC)=O)=C',
-  "3-(Trimethylsilylethynyl)thiophene": 'C[Si](C#CC1=CSC=C1)(C)C',
+  '2-Fluoro-1-methylpyridinium p-Toluenesulfonate': 'C[N+]1=CC=CC=C1F.CC2=CC=C(S(=O)([O-])=O)C=C2',
+  '2-Furoyltrifluoroacetone': 'O=C(CC(C1=CC=CO1)=O)C(F)(F)F',
+  '2-Hydroxy-2-azaadamantane': 'ON1C2CC3CC(C2)CC1C3',
+  '2-Hydroxybenzaldehyde Phenylhydrazone': 'OC1=CC=CC=C1/C=N/NC2=CC=CC=C2',
+  '2-Hydroxybenzoic Acid': 'O=C(O)C1=CC=CC=C1O',
+  '2-Hydroxypyridine N-Oxide': 'OC1=CC=CC=[N+]1[O-]',
+  '2-Iodosobenzoic Acid': 'O=C(O)C1=CC=CC=C1I=O',
+  '2-Iodoxybenzoic acid': 'O=C(O)C1=CC=CC=C1I(=O)=O',
+  '2-methoxy ethanol': 'OCCOC',
+  '2-Methyl-1,10-phenanthroline': 'CC1=NC2=C3N=CC=CC3=CC=C2C=C1',
+  '2-Methyl-6-nitrobenzoic Anhydride': 'O=C(OC(C1=C([N+]([O-])=O)C=CC=C1C)=O)C2=C([N+]([O-])=O)C=CC=C2C',
+  '2-Methylbenzo[e]indene': 'N/A',
+  '2-Methylcyclopenta[l]phenanthrene': 'CC1=CC2=C3CC=CC=C3C4=C(C2=C1)C=CC=C4',
+  '2-Nitrophenylarsonic Acid': 'O=[As](C1=CC=CC=C1[N+]([O-])=O)(O)O',
+  '2-Norbornene': 'C12C=CC(C2)CC1',
+  '2-Phenylethylboronic Acid': 'OB(CCC1=CC=CC=C1)O',
+  '2-Salicylideneaminophenol': 'OC1=CC=CC=C1/N=C/C2=CC=CC=C2O',
+  '2-tert-Butyl-1,1,3,3-tetramethylguanidine': 'CN(C)C(N(C)C)=NC(C)(C)C',
+  '2-Trimethylsilyloxy-1,3-butadiene': 'C=C(O[Si](C)(C)C)C=C',
+  '2-Trimethylsilylthiophene': 'C[Si](C1=CC=CS1)(C)C',
+  '3-(2-Aminoethylamino)propyltrimethoxysilane': 'CO[Si](OC)(CCCNCCN)OC',
+  '3-(Diethoxyphosphoryloxy)-1,2,3-benzotriazin-4(3H)-one': 'O=C1N(OP(OCC)(OCC)=O)N=NC2=CC=CC=C12',
+  '3-(Dimethylsilyloxy)-1,1,5,5-tetramethyl-3-phenyltrisiloxane': 'C[SiH](C)O[Si](C1=CC=CC=C1)(O[SiH](C)C)O[SiH](C)C',
+  '3-(Diphenylphosphino)-1-propylamine': 'NCCCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  '3-(Triallylsilyl)propyl Acrylate': 'C=CC(OCCC[Si](CC=C)(CC=C)CC=C)=O',
+  '3-(Triallylsilyl)propyl Methacrylate': 'CC(C(OCCC[Si](CC=C)(CC=C)CC=C)=O)=C',
+  '3-(Triethoxysilyl)propyl Isocyanate': 'CCO[Si](CCCN=C=O)(OCC)OCC',
+  '3-(Trimethoxysilyl)propyl Acrylate': 'C=CC(OCCC[Si](OC)(OC)OC)=O',
+  '3-(Trimethoxysilyl)propyl Methacrylate': 'CC(C(OCCC[Si](OC)(OC)OC)=O)=C',
+  '3-(Trimethylsilylethynyl)thiophene': 'C[Si](C#CC1=CSC=C1)(C)C',
   "3,3'-Iminobis(N,N-dimethylpropylamine)": 'CN(C)CCCNCCCN(C)C',
   "3,3'-Methylenebis(1-tert-butyl-3-imidazolium Bromide)": 'CC(N1C=C[N+](C[N+]2=CN(C(C)(C)C)C=C2)=C1)(C)C.[Br-].[Br-]',
   "3,3'-Methylenebis[1-(2,6-diisopropylphenyl)-3-imidazolium Bromide]": 'CC(C1=C(N2C=C[N+](C[N+]3=CN(C4=C(C(C)C)C=CC=C4C(C)C)C=C3)=C2)C(C(C)C)=CC=C1)C.[Br-].[Br-]',
-  "3,4,7,8-Tetramethyl-1,10-phenanthroline": 'CC1=C(C)C2=CC=C3C(C)=C(C)C=NC3=C2N=C1',
-  "3,4-Diacetyl-2,5-hexanedione": 'CC(C(C(C)=O)C(C(C)=O)C(C)=O)=O',
-  "3,4-Dihydro-2H-pyrido[1,2-a]pyrimidin-2-one": 'O=C1N=C(C=CC=C2)N2CC1',
-  "3,4-Dihydro-3-hydroxy-4-oxo-1,2,3-benzotriazine": 'O=C1N(O)N=NC2=CC=CC=C12',
-  "3,4-Lutidine": 'CC1=C(C)C=CN=C1',
-  "3,5,6,8-Tetrabromo-1,10-phenanthroline": 'BrC1=CC2=C(Br)C(Br)=C3C=C(Br)C=NC3=C2N=C1',
-  "3,5-Bis(trifluoromethyl)phenylboronic Acid": 'OB(C1=CC(C(F)(F)F)=CC(C(F)(F)F)=C1)O',
-  "3,5-Di(2-pyridyl)pyrazole": 'C1(C2=NC=CC=C2)=NNC(C3=NC=CC=C3)=C1',
-  "3,5-Heptanedione": 'CCC(CC(CC)=O)=O',
-  "3,5-Lutidine": 'CC1=CC(C)=CN=C1',
-  "3,6-Di(2-pyridyl)-1,2,4,5-tetrazine": 'C1(C2=NC=CC=C2)=NN=C(C3=NC=CC=C3)N=N1',
-  "3,8-Dibromo-1,10-phenanthroline": 'BrC1=CC2=CC=C3C=C(Br)C=NC3=C2N=C1',
-  "3-[(Dimethylsilyl)oxy]-1,1,3,5,5-pentamethyltrisiloxane": 'C[SiH](C)O[Si](C)(O[SiH](C)C)O[SiH](C)C',
-  "3-[[Dimethyl(vinyl)silyl]oxy]-1,1,5,5-tetramethyl-3-phenyl-1,5-divinyltrisiloxane": 'C=C[Si](C)(C)O[Si](C1=CC=CC=C1)(O[Si](C)(C)C=C)O[Si](C)(C)C=C',
-  "3-[[tert-Butyl(dimethyl)silyl]oxy]-1-propanol": 'OCCCO[Si](C)(C(C)(C)C)C',
-  "3-Aminopropyltriethoxysilane": 'CCO[Si](OCC)(CCCN)OCC',
-  "3-Aminopropyltrimethoxysilane": 'CO[Si](OC)(CCCN)OC',
-  "3-Bromo-1-(trimethylsilyl)-1-propyne": 'C[Si](C#CCBr)(C)C',
-  "3-Bromo-1,10-phenanthroline": 'BrC1=CC2=CC=C3C=CC=NC3=C2N=C1',
-  "3-Chloroacetylacetone": 'CC(C(Cl)C(C)=O)=O',
-  "3-Chloroperoxybenzoic acid": 'C1=CC(=CC(=C1)Cl)C(=O)OO',
-  "3-Chloropropyltriethoxysilane": 'CCO[Si](OCC)(CCCCl)OCC',
-  "3-Ethyl-2,4-pentanedione": 'CC(C(CC)C(C)=O)=O',
-  "3-Glycidyloxypropyltrimethoxysilane": 'CO[Si](OC)(CCCOCC1CO1)OC',
-  "3-Mercaptopropyl(dimethoxy)methylsilane": 'C[Si](OC)(CCCS)OC',
-  "3-Methyl-1-phenyl-2-phospholene 1-Oxide": 'CC(CC1)=CP1(C2=CC=CC=C2)=O',
-  "3-Methyl-2,4-pentanedione": 'CC(C(C)C(C)=O)=O',
-  "3-Nitro-1,2,4-triazole": 'O=[N+](C1=NNC=N1)[O-]',
-  "3-Phenyl-2,4-pentanedione": 'CC(C(C1=CC=CC=C1)C(C)=O)=O',
-  "3-Pyridinecarboxylic Anhydride": 'O=C(OC(C1=CC=CN=C1)=O)C2=CC=CN=C2',
-  "3-Quinolineboronic acid": 'OB(C1=CC2=CC=CC=C2N=C1)O',
-  "3-Tolylboronic acid": 'CC1=CC=CC(B(O)O)=C1',
-  "3-Trimethoxysilylpropyl Chloride": 'CO[Si](CCCCl)(OC)OC',
-  "3-Trimethylsilyl-2-propyn-1-ol": 'OCC#C[Si](C)(C)C',
+  '3,4,7,8-Tetramethyl-1,10-phenanthroline': 'CC1=C(C)C2=CC=C3C(C)=C(C)C=NC3=C2N=C1',
+  '3,4-Diacetyl-2,5-hexanedione': 'CC(C(C(C)=O)C(C(C)=O)C(C)=O)=O',
+  '3,4-Dihydro-2H-pyrido[1,2-a]pyrimidin-2-one': 'O=C1N=C(C=CC=C2)N2CC1',
+  '3,4-Dihydro-3-hydroxy-4-oxo-1,2,3-benzotriazine': 'O=C1N(O)N=NC2=CC=CC=C12',
+  '3,4-Lutidine': 'CC1=C(C)C=CN=C1',
+  '3,5,6,8-Tetrabromo-1,10-phenanthroline': 'BrC1=CC2=C(Br)C(Br)=C3C=C(Br)C=NC3=C2N=C1',
+  '3,5-Bis(trifluoromethyl)phenylboronic Acid': 'OB(C1=CC(C(F)(F)F)=CC(C(F)(F)F)=C1)O',
+  '3,5-Di(2-pyridyl)pyrazole': 'C1(C2=NC=CC=C2)=NNC(C3=NC=CC=C3)=C1',
+  '3,5-Heptanedione': 'CCC(CC(CC)=O)=O',
+  '3,5-Lutidine': 'CC1=CC(C)=CN=C1',
+  '3,6-Di(2-pyridyl)-1,2,4,5-tetrazine': 'C1(C2=NC=CC=C2)=NN=C(C3=NC=CC=C3)N=N1',
+  '3,8-Dibromo-1,10-phenanthroline': 'BrC1=CC2=CC=C3C=C(Br)C=NC3=C2N=C1',
+  '3-[(Dimethylsilyl)oxy]-1,1,3,5,5-pentamethyltrisiloxane': 'C[SiH](C)O[Si](C)(O[SiH](C)C)O[SiH](C)C',
+  '3-[[Dimethyl(vinyl)silyl]oxy]-1,1,5,5-tetramethyl-3-phenyl-1,5-divinyltrisiloxane': 'C=C[Si](C)(C)O[Si](C1=CC=CC=C1)(O[Si](C)(C)C=C)O[Si](C)(C)C=C',
+  '3-[[tert-Butyl(dimethyl)silyl]oxy]-1-propanol': 'OCCCO[Si](C)(C(C)(C)C)C',
+  '3-Aminopropyltriethoxysilane': 'CCO[Si](OCC)(CCCN)OCC',
+  '3-Aminopropyltrimethoxysilane': 'CO[Si](OC)(CCCN)OC',
+  '3-Bromo-1-(trimethylsilyl)-1-propyne': 'C[Si](C#CCBr)(C)C',
+  '3-Bromo-1,10-phenanthroline': 'BrC1=CC2=CC=C3C=CC=NC3=C2N=C1',
+  '3-Chloroacetylacetone': 'CC(C(Cl)C(C)=O)=O',
+  '3-Chloroperoxybenzoic acid': 'C1=CC(=CC(=C1)Cl)C(=O)OO',
+  '3-Chloropropyltriethoxysilane': 'CCO[Si](OCC)(CCCCl)OCC',
+  '3-Ethyl-2,4-pentanedione': 'CC(C(CC)C(C)=O)=O',
+  '3-Glycidyloxypropyltrimethoxysilane': 'CO[Si](OC)(CCCOCC1CO1)OC',
+  '3-Mercaptopropyl(dimethoxy)methylsilane': 'C[Si](OC)(CCCS)OC',
+  '3-Methyl-1-phenyl-2-phospholene 1-Oxide': 'CC(CC1)=CP1(C2=CC=CC=C2)=O',
+  '3-Methyl-2,4-pentanedione': 'CC(C(C)C(C)=O)=O',
+  '3-Nitro-1,2,4-triazole': 'O=[N+](C1=NNC=N1)[O-]',
+  '3-Phenyl-2,4-pentanedione': 'CC(C(C1=CC=CC=C1)C(C)=O)=O',
+  '3-Pyridinecarboxylic Anhydride': 'O=C(OC(C1=CC=CN=C1)=O)C2=CC=CN=C2',
+  '3-Quinolineboronic acid': 'OB(C1=CC2=CC=CC=C2N=C1)O',
+  '3-Tolylboronic acid': 'CC1=CC=CC(B(O)O)=C1',
+  '3-Trimethoxysilylpropyl Chloride': 'CO[Si](CCCCl)(OC)OC',
+  '3-Trimethylsilyl-2-propyn-1-ol': 'OCC#C[Si](C)(C)C',
   "4-([2,2':6',2''-Terpyridin]-4'-yl)benzoic Acid": 'O=C(O)C1=CC=C(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)C=C1',
-  "4-(4,6-Dimethoxy-1,3,5-triazin-2-yl)-4-methylmorpholinium Chloride": 'C[N+]1(C2=NC(OC)=NC(OC)=N2)CCOCC1.[Cl-]',
+  '4-(4,6-Dimethoxy-1,3,5-triazin-2-yl)-4-methylmorpholinium Chloride': 'C[N+]1(C2=NC(OC)=NC(OC)=N2)CCOCC1.[Cl-]',
   "4'-(4-Bromophenyl)-2,2':6',2''-terpyridine": 'BrC1=CC=C(C2=CC(C3=NC=CC=C3)=NC(C4=NC=CC=C4)=C2)C=C1',
-  "4-(4-Dimethylaminophenylazo)phenylarsonic Acid Hydrochloride": 'O=[As](C1=CC=C(/N=N/C2=CC=C(N(C)C)C=C2)C=C1)(O)O.[H]Cl',
+  '4-(4-Dimethylaminophenylazo)phenylarsonic Acid Hydrochloride': 'O=[As](C1=CC=C(/N=N/C2=CC=C(N(C)C)C=C2)C=C1)(O)O.[H]Cl',
   "4'-(4-Pyridyl)-2,2':6',2''-terpyridine": 'C1(C2=NC(C3=NC=CC=C3)=CC(C4=CC=NC=C4)=C2)=NC=CC=C1',
   "4-(Bromomethyl)-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CBr)=C2)=NC=C1',
   "4-(Chloromethyl)-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CCl)=C2)=NC=C1',
-  "4-(Dimethylamino)phenyldiphenylphosphine": 'CN(C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1)C',
-  "4-(Dimethylamino)pyridine": 'CN(C1=CC=NC=C1)C',
-  "4-(Diphenylphosphino)benzoic Acid": 'O=C(O)C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1',
-  "4-(N,N-Dimethylamino)phenylboronic acid": 'CN(C)C1=CC=C(B(O)O)C=C1',
-  "4-(Trimethylsilyl)-3-butyn-2-one": 'CC(C#C[Si](C)(C)C)=O',
-  "4-(Trimethylsilyl)diphenylacetylene": 'C[Si](C1=CC=C(C#CC2=CC=CC=C2)C=C1)(C)C',
-  "4,4,4-Trifluoro-1-(2-naphthyl)-1,3-butanedione": 'O=C(C1=CC=C2C=CC=CC2=C1)CC(C(F)(F)F)=O',
-  "4,4,4-Trifluoro-1-(2-thienyl)-1,3-butanedione": 'O=C(C1=CC=CS1)CC(C(F)(F)F)=O',
-  "4,4,4-Trifluoro-1-(4-methoxyphenyl)-1,3-butanedione": 'O=C(C1=CC=C(OC)C=C1)CC(C(F)(F)F)=O',
-  "4,4,4-Trifluoro-1-(p-tolyl)-1,3-butanedione": 'O=C(C1=CC=C(C)C=C1)CC(C(F)(F)F)=O',
-  "4,4,4-Trifluoro-1-phenyl-1,3-butanedione": 'O=C(C1=CC=CC=C1)CC(C(F)(F)F)=O',
-  "4,4,5,5-Tetramethyl-1,3,2-dioxaphospholane 2-Oxide": 'CC1(C)C(C)(C)OP(O1)=O',
+  '4-(Dimethylamino)phenyldiphenylphosphine': 'CN(C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1)C',
+  '4-(Dimethylamino)pyridine': 'CN(C1=CC=NC=C1)C',
+  '4-(Diphenylphosphino)benzoic Acid': 'O=C(O)C1=CC=C(P(C2=CC=CC=C2)C3=CC=CC=C3)C=C1',
+  '4-(N,N-Dimethylamino)phenylboronic acid': 'CN(C)C1=CC=C(B(O)O)C=C1',
+  '4-(Trimethylsilyl)-3-butyn-2-one': 'CC(C#C[Si](C)(C)C)=O',
+  '4-(Trimethylsilyl)diphenylacetylene': 'C[Si](C1=CC=C(C#CC2=CC=CC=C2)C=C1)(C)C',
+  '4,4,4-Trifluoro-1-(2-naphthyl)-1,3-butanedione': 'O=C(C1=CC=C2C=CC=CC2=C1)CC(C(F)(F)F)=O',
+  '4,4,4-Trifluoro-1-(2-thienyl)-1,3-butanedione': 'O=C(C1=CC=CS1)CC(C(F)(F)F)=O',
+  '4,4,4-Trifluoro-1-(4-methoxyphenyl)-1,3-butanedione': 'O=C(C1=CC=C(OC)C=C1)CC(C(F)(F)F)=O',
+  '4,4,4-Trifluoro-1-(p-tolyl)-1,3-butanedione': 'O=C(C1=CC=C(C)C=C1)CC(C(F)(F)F)=O',
+  '4,4,4-Trifluoro-1-phenyl-1,3-butanedione': 'O=C(C1=CC=CC=C1)CC(C(F)(F)F)=O',
+  '4,4,5,5-Tetramethyl-1,3,2-dioxaphospholane 2-Oxide': 'CC1(C)C(C)(C)OP(O1)=O',
   "4,4'-Bis(5-hexyl-2-thienyl)-2,2'-bipyridyl": 'CCCCCCC1=CC=C(C2=CC(C3=NC=CC(C4=CC=C(CCCCCC)S4)=C3)=NC=C2)S1',
   "4,4'-Bis(chloromethyl)-2,2'-bipyridyl": 'ClCC1=CC(C2=NC=CC(CCl)=C2)=NC=C1',
   "4,4'-Bis(hydroxymethyl)-2,2'-bipyridine": 'OCC1=CC(C2=NC=CC(CO)=C2)=NC=C1',
@@ -725,65 +725,65 @@ export const reagents_kombi = {
   "4,4'-Dimethyl-2,2'-bipyridyl 1-Oxide": 'CC1=CC(C2=CC(C)=CC=[N+]2[O-])=NC=C1',
   "4,4'-Dinonyl-2,2'-bipyridyl": 'CCCCCCCCCC1=CC(C2=NC=CC(CCCCCCCCC)=C2)=NC=C1',
   "4,4'-Di-tert-butyl-2,2'-bipyridyl": 'CC(C1=CC(C2=NC=CC(C(C)(C)C)=C2)=NC=C1)(C)C',
-  "4,5-Bis(diphenylphosphino)-9,9-dimethylxanthene": 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2',
-  "4,5-Diazafluoren-9-one": 'O=C1C2=CC=CN=C2C3=C1C=CC=N3',
-  "4,5-Diazafluorene-9-one O-(p-Toluenesulfonyl)oxime": 'O=S(ON=C1C2=CC=CN=C2C3=C1C=CC=N3)(C4=CC=C(C)C=C4)=O',
-  "4,6-Bis(diphenylphosphino)phenoxazine": 'C(C=CC=C1N2)(P(C3=CC=CC=C3)C4=CC=CC=C4)=C1OC5=C2C=CC=C5P(C6=CC=CC=C6)C7=CC=CC=C7',
-  "4,6-Diphenylthieno[3,4-d]-1,3-dioxol-2-one 5,5-Dioxide": 'O=C(OC1=C2C3=CC=CC=C3)OC1=C(C4=CC=CC=C4)S2(=O)=O',
-  "4,7-Dibromo-1,10-phenanthroline Hydrate": 'BrC1=CC=NC2=C3N=CC=C(Br)C3=CC=C12.[H]O[H]',
-  "4,7-Dichloro-1,10-phenanthroline Hydrate": 'ClC1=CC=NC2=C3N=CC=C(Cl)C3=CC=C12.[H]O[H]',
-  "4,7-Dihydroxy-1,10-phenanthroline": 'OC1=CC=NC2=C3N=CC=C(O)C3=CC=C12',
-  "4,7-Dimethyl-1,10-phenanthroline": 'CC1=CC=NC2=C3N=CC=C(C)C3=CC=C12',
+  '4,5-Bis(diphenylphosphino)-9,9-dimethylxanthene': 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2',
+  '4,5-Diazafluoren-9-one': 'O=C1C2=CC=CN=C2C3=C1C=CC=N3',
+  '4,5-Diazafluorene-9-one O-(p-Toluenesulfonyl)oxime': 'O=S(ON=C1C2=CC=CN=C2C3=C1C=CC=N3)(C4=CC=C(C)C=C4)=O',
+  '4,6-Bis(diphenylphosphino)phenoxazine': 'C(C=CC=C1N2)(P(C3=CC=CC=C3)C4=CC=CC=C4)=C1OC5=C2C=CC=C5P(C6=CC=CC=C6)C7=CC=CC=C7',
+  '4,6-Diphenylthieno[3,4-d]-1,3-dioxol-2-one 5,5-Dioxide': 'O=C(OC1=C2C3=CC=CC=C3)OC1=C(C4=CC=CC=C4)S2(=O)=O',
+  '4,7-Dibromo-1,10-phenanthroline Hydrate': 'BrC1=CC=NC2=C3N=CC=C(Br)C3=CC=C12.[H]O[H]',
+  '4,7-Dichloro-1,10-phenanthroline Hydrate': 'ClC1=CC=NC2=C3N=CC=C(Cl)C3=CC=C12.[H]O[H]',
+  '4,7-Dihydroxy-1,10-phenanthroline': 'OC1=CC=NC2=C3N=CC=C(O)C3=CC=C12',
+  '4,7-Dimethyl-1,10-phenanthroline': 'CC1=CC=NC2=C3N=CC=C(C)C3=CC=C12',
   "4'-[(tert-Butyldimethylsilyloxy)methyl]-2,2,2-trifluoroacetophenone": 'O=C(C1=CC=C(CO[Si](C)(C(C)(C)C)C)C=C1)C(F)(F)F',
-  "4-[2,2,2-Trifluoro-1-[(trimethylsilyl)oxy]ethyl]morpholine": 'C[Si](OC(N1CCOCC1)C(F)(F)F)(C)C',
-  "4-[2-[2-(4-Iodophenoxy)ethoxy]carbonyl]benzoyloxy-2,2,6,6-tetramethylpiperidin-1-oxyl": '[O]N1C(C)(C)CC(OC(C2=CC=CC=C2C(OCCOC3=CC=C(I)C=C3)=O)=O)CC1(C)C',
-  "4-Acetamido-2,2,6,6-tetramethyl-1-oxopiperidinium Tetrafluoroborate": 'O=[N+]1C(C)(C)CC(NC(C)=O)CC1(C)C.F[B-](F)(F)F',
-  "4-Acetamido-2,2,6,6-tetramethylpiperidine 1-Oxyl": 'CC1(C)CC(NC(C)=O)CC(C)(C)N1[O]',
+  '4-[2,2,2-Trifluoro-1-[(trimethylsilyl)oxy]ethyl]morpholine': 'C[Si](OC(N1CCOCC1)C(F)(F)F)(C)C',
+  '4-[2-[2-(4-Iodophenoxy)ethoxy]carbonyl]benzoyloxy-2,2,6,6-tetramethylpiperidin-1-oxyl': '[O]N1C(C)(C)CC(OC(C2=CC=CC=C2C(OCCOC3=CC=C(I)C=C3)=O)=O)CC1(C)C',
+  '4-Acetamido-2,2,6,6-tetramethyl-1-oxopiperidinium Tetrafluoroborate': 'O=[N+]1C(C)(C)CC(NC(C)=O)CC1(C)C.F[B-](F)(F)F',
+  '4-Acetamido-2,2,6,6-tetramethylpiperidine 1-Oxyl': 'CC1(C)CC(NC(C)=O)CC(C)(C)N1[O]',
   "4'-Bromo-2,2':6',2''-terpyridine": 'BrC1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1',
-  "4-Bromotetraphenylsilane": 'BrC1=CC=C([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)C=C1',
+  '4-Bromotetraphenylsilane': 'BrC1=CC=C([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)C=C1',
   "4'-Chloro-2,2':6',2''-terpyridine": 'ClC1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1',
-  "4-Chlorophenyl Phosphorodichloridate": 'O=P(Cl)(Cl)OC1=CC=C(Cl)C=C1',
-  "4-Dimethylamino-1-neopentylpyridinium Chloride": 'CC(C)(C)C[N+]1=CC=C(N(C)C)C=C1.[Cl-]',
-  "4-Dimethylaminopyridine": 'CN(C1=CC=NC=C1)C',
-  "4-Dimethylaminopyridinium Bromide Perbromide": 'CN(C)C1=CC=[NH+]C=C1.Br[Br-]Br',
-  "4-Ethyl-4-methylmorpholinium Bromide": 'C[N+]1(CC)CCOCC1.[Br-]',
-  "4-Fluoro-N-salicylideneaniline": 'OC1=CC=CC=C1/C=N/C2=CC=C(F)C=C2',
-  "4-Fluorophenylmagnesium Bromide": 'Br[Mg]C1=CC=C(F)C=C1',
-  "4-Hydroxy-2,2,6,6-tetramethylpiperidine 1-Oxyl Benzoate": 'CC1(C)CC(OC(C2=CC=CC=C2)=O)CC(C)(C)N1[O]',
-  "4-Hydroxy-3-nitrophenylarsonic Acid": 'O=[As](C1=CC=C(O)C([N+]([O-])=O)=C1)(O)O',
+  '4-Chlorophenyl Phosphorodichloridate': 'O=P(Cl)(Cl)OC1=CC=C(Cl)C=C1',
+  '4-Dimethylamino-1-neopentylpyridinium Chloride': 'CC(C)(C)C[N+]1=CC=C(N(C)C)C=C1.[Cl-]',
+  '4-Dimethylaminopyridine': 'CN(C1=CC=NC=C1)C',
+  '4-Dimethylaminopyridinium Bromide Perbromide': 'CN(C)C1=CC=[NH+]C=C1.Br[Br-]Br',
+  '4-Ethyl-4-methylmorpholinium Bromide': 'C[N+]1(CC)CCOCC1.[Br-]',
+  '4-Fluoro-N-salicylideneaniline': 'OC1=CC=CC=C1/C=N/C2=CC=C(F)C=C2',
+  '4-Fluorophenylmagnesium Bromide': 'Br[Mg]C1=CC=C(F)C=C1',
+  '4-Hydroxy-2,2,6,6-tetramethylpiperidine 1-Oxyl Benzoate': 'CC1(C)CC(OC(C2=CC=CC=C2)=O)CC(C)(C)N1[O]',
+  '4-Hydroxy-3-nitrophenylarsonic Acid': 'O=[As](C1=CC=C(O)C([N+]([O-])=O)=C1)(O)O',
   "4-Hydroxymethyl-4'-methyl-2,2'-bipyridyl": 'CC1=CC(C2=NC=CC(CO)=C2)=NC=C1',
-  "4-Hydroxyphenylarsonic Acid": 'O=[As](C1=CC=C(O)C=C1)(O)O',
-  "4-Methoxy-2,2,6,6-tetramethylpiperidine 1-Oxyl": 'CC1(C)CC(OC)CC(C)(C)N1[O]',
-  "4-Methoxycarbonylphenylboronic acid": 'B(C1=CC=C(C=C1)C(=O)OC)(O)O',
-  "4-Methylmorpholine N-Oxide": 'C[N+]1([O-])CCOCC1',
-  "4-Nitrophenol": 'OC1=CC=C([N+]([O-])=O)C=C1',
-  "4-Nitrophenyl Trifluoromethanesulfonate": 'O=S(C(F)(F)F)(OC1=CC=C([N+]([O-])=O)C=C1)=O',
-  "4-Pyrrolidinopyridine": 'C1(N2CCCC2)=CC=NC=C1',
-  "4-tert-Butyl-2,6-dimethylphenylsulfur Trifluoride": 'CC1=C(S(F)(F)F)C(C)=CC(C(C)(C)C)=C1',
-  "4-Trifluoromethylbenzoic Anhydride": 'O=C(OC(C1=CC=C(C(F)(F)F)C=C1)=O)C2=CC=C(C(F)(F)F)C=C2',
-  "4-Trimethylsilyl-3-butyn-2-ol": 'CC(O)C#C[Si](C)(C)C',
-  "5-(Trimethylsilyl)-1,2,3,4,5-pentamethyl-1,3-cyclopentadiene": 'CC1([Si](C)(C)C)C(C)=C(C)C(C)=C1C',
-  "5,10,15,20-Tetra(4-pyridyl)porphyrin": 'C1(C2=CC=NC=C2)=C3C=CC(C(C4=CC=NC=C4)=C5C=CC(N5)=C(C6=CC=NC=C6)C(C=C7)=NC7=C(C8=CC=NC=C8)C9=CC=C1N9)=N3',
-  "5,10,15,20-Tetrakis(2,4,6-trimethylphenyl)porphyrin": 'CC1=C(C2=C3C=CC(C(C4=C(C)C=C(C)C=C4C)=C(N5)C=CC5=C(C6=C(C)C=C(C)C=C6C)C7=NC(C=C7)=C(C8=C(C)C=C(C)C=C8C)C9=CC=C2N9)=N3)C(C)=CC(C)=C1',
-  "5,10,15,20-Tetrakis(2,6-dichlorophenyl)porphyrin": 'ClC1=C(C2=C3C=CC(C(C4=C(Cl)C=CC=C4Cl)=C(N5)C=CC5=C(C6=C(Cl)C=CC=C6Cl)C7=NC(C=C7)=C(C8=C(Cl)C=CC=C8Cl)C9=CC=C2N9)=N3)C(Cl)=CC=C1',
-  "5,10,15,20-Tetrakis(3,5-dihydroxyphenyl)porphyrin": 'OC1=CC(O)=CC(C2=C3C=CC(C(C4=CC(O)=CC(O)=C4)=C(N5)C=CC5=C(C6=CC(O)=CC(O)=C6)C7=NC(C=C7)=C(C8=CC(O)=CC(O)=C8)C9=CC=C2N9)=N3)=C1',
-  "5,10,15,20-Tetrakis(3,5-dimethoxyphenyl)porphyrin": 'COC1=CC(OC)=CC(C2=C3C=CC(C(C4=CC(OC)=CC(OC)=C4)=C(N5)C=CC5=C(C6=CC(OC)=CC(OC)=C6)C7=NC(C=C7)=C(C8=CC(OC)=CC(OC)=C8)C9=CC=C2N9)=N3)=C1',
-  "5,10,15,20-Tetrakis(4-carboxymethyloxyphenyl)porphyrin": 'O=C(COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OCC(O)=O)C=C4)=C(N5)C=CC5=C(C6=CC=C(OCC(O)=O)C=C6)C7=NC(C=C7)=C(C8=CC=C(OCC(O)=O)C=C8)C9=CC=C2N9)=N3)C=C1)O',
-  "5,10,15,20-Tetrakis(4-hydroxyphenyl)porphyrin": 'OC1=CC=C(C2=C3C=CC(C(C4=CC=C(O)C=C4)=C(N5)C=CC5=C(C6=CC=C(O)C=C6)C7=NC(C=C7)=C(C8=CC=C(O)C=C8)C9=CC=C2N9)=N3)C=C1',
-  "5,10,15,20-Tetrakis(4-methoxyphenyl)porphyrin": 'COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OC)C=C4)=C(N5)C=CC5=C(C6=CC=C(OC)C=C6)C7=NC(C=C7)=C(C8=CC=C(OC)C=C8)C9=CC=C2N9)=N3)C=C1',
-  "5,10,15,20-Tetrakis(pentafluorophenyl)porphyrin": 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C=CC(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C=CC5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C=C7)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=CC=C2N9)=N3',
-  "5,10,15,20-Tetrakis(p-tolyl)porphyrin": 'CC1=CC=C(C2=C3C=CC(C(C4=CC=C(C)C=C4)=C(N5)C=CC5=C(C6=CC=C(C)C=C6)C7=NC(C=C7)=C(C8=CC=C(C)C=C8)C9=CC=C2N9)=N3)C=C1',
+  '4-Hydroxyphenylarsonic Acid': 'O=[As](C1=CC=C(O)C=C1)(O)O',
+  '4-Methoxy-2,2,6,6-tetramethylpiperidine 1-Oxyl': 'CC1(C)CC(OC)CC(C)(C)N1[O]',
+  '4-Methoxycarbonylphenylboronic acid': 'B(C1=CC=C(C=C1)C(=O)OC)(O)O',
+  '4-Methylmorpholine N-Oxide': 'C[N+]1([O-])CCOCC1',
+  '4-Nitrophenol': 'OC1=CC=C([N+]([O-])=O)C=C1',
+  '4-Nitrophenyl Trifluoromethanesulfonate': 'O=S(C(F)(F)F)(OC1=CC=C([N+]([O-])=O)C=C1)=O',
+  '4-Pyrrolidinopyridine': 'C1(N2CCCC2)=CC=NC=C1',
+  '4-tert-Butyl-2,6-dimethylphenylsulfur Trifluoride': 'CC1=C(S(F)(F)F)C(C)=CC(C(C)(C)C)=C1',
+  '4-Trifluoromethylbenzoic Anhydride': 'O=C(OC(C1=CC=C(C(F)(F)F)C=C1)=O)C2=CC=C(C(F)(F)F)C=C2',
+  '4-Trimethylsilyl-3-butyn-2-ol': 'CC(O)C#C[Si](C)(C)C',
+  '5-(Trimethylsilyl)-1,2,3,4,5-pentamethyl-1,3-cyclopentadiene': 'CC1([Si](C)(C)C)C(C)=C(C)C(C)=C1C',
+  '5,10,15,20-Tetra(4-pyridyl)porphyrin': 'C1(C2=CC=NC=C2)=C3C=CC(C(C4=CC=NC=C4)=C5C=CC(N5)=C(C6=CC=NC=C6)C(C=C7)=NC7=C(C8=CC=NC=C8)C9=CC=C1N9)=N3',
+  '5,10,15,20-Tetrakis(2,4,6-trimethylphenyl)porphyrin': 'CC1=C(C2=C3C=CC(C(C4=C(C)C=C(C)C=C4C)=C(N5)C=CC5=C(C6=C(C)C=C(C)C=C6C)C7=NC(C=C7)=C(C8=C(C)C=C(C)C=C8C)C9=CC=C2N9)=N3)C(C)=CC(C)=C1',
+  '5,10,15,20-Tetrakis(2,6-dichlorophenyl)porphyrin': 'ClC1=C(C2=C3C=CC(C(C4=C(Cl)C=CC=C4Cl)=C(N5)C=CC5=C(C6=C(Cl)C=CC=C6Cl)C7=NC(C=C7)=C(C8=C(Cl)C=CC=C8Cl)C9=CC=C2N9)=N3)C(Cl)=CC=C1',
+  '5,10,15,20-Tetrakis(3,5-dihydroxyphenyl)porphyrin': 'OC1=CC(O)=CC(C2=C3C=CC(C(C4=CC(O)=CC(O)=C4)=C(N5)C=CC5=C(C6=CC(O)=CC(O)=C6)C7=NC(C=C7)=C(C8=CC(O)=CC(O)=C8)C9=CC=C2N9)=N3)=C1',
+  '5,10,15,20-Tetrakis(3,5-dimethoxyphenyl)porphyrin': 'COC1=CC(OC)=CC(C2=C3C=CC(C(C4=CC(OC)=CC(OC)=C4)=C(N5)C=CC5=C(C6=CC(OC)=CC(OC)=C6)C7=NC(C=C7)=C(C8=CC(OC)=CC(OC)=C8)C9=CC=C2N9)=N3)=C1',
+  '5,10,15,20-Tetrakis(4-carboxymethyloxyphenyl)porphyrin': 'O=C(COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OCC(O)=O)C=C4)=C(N5)C=CC5=C(C6=CC=C(OCC(O)=O)C=C6)C7=NC(C=C7)=C(C8=CC=C(OCC(O)=O)C=C8)C9=CC=C2N9)=N3)C=C1)O',
+  '5,10,15,20-Tetrakis(4-hydroxyphenyl)porphyrin': 'OC1=CC=C(C2=C3C=CC(C(C4=CC=C(O)C=C4)=C(N5)C=CC5=C(C6=CC=C(O)C=C6)C7=NC(C=C7)=C(C8=CC=C(O)C=C8)C9=CC=C2N9)=N3)C=C1',
+  '5,10,15,20-Tetrakis(4-methoxyphenyl)porphyrin': 'COC1=CC=C(C2=C3C=CC(C(C4=CC=C(OC)C=C4)=C(N5)C=CC5=C(C6=CC=C(OC)C=C6)C7=NC(C=C7)=C(C8=CC=C(OC)C=C8)C9=CC=C2N9)=N3)C=C1',
+  '5,10,15,20-Tetrakis(pentafluorophenyl)porphyrin': 'FC1=C(F)C(F)=C(F)C(F)=C1C2=C3C=CC(C(C4=C(F)C(F)=C(F)C(F)=C4F)=C(N5)C=CC5=C(C6=C(F)C(F)=C(F)C(F)=C6F)C7=NC(C=C7)=C(C8=C(F)C(F)=C(F)C(F)=C8F)C9=CC=C2N9)=N3',
+  '5,10,15,20-Tetrakis(p-tolyl)porphyrin': 'CC1=CC=C(C2=C3C=CC(C(C4=CC=C(C)C=C4)=C(N5)C=CC5=C(C6=CC=C(C)C=C6)C7=NC(C=C7)=C(C8=CC=C(C)C=C8)C9=CC=C2N9)=N3)C=C1',
   "5,5'-Bis(trifluoromethyl)-2,2'-bipyridyl": 'FC(C1=CN=C(C2=NC=C(C(F)(F)F)C=C2)C=C1)(F)F',
   "5,5''-Bis(trimethylstannyl)-2,2':5',2''-terthiophene": 'C[Sn](C1=CC=C(C2=CC=C(C3=CC=C([Sn](C)(C)C)S3)S2)S1)(C)C',
   "5,5'-Dibromo-2,2'-bipyridyl": 'BrC1=CN=C(C2=NC=C(Br)C=C2)C=C1',
   "5,5-Dibromomeldrum's Acid": 'O=C(OC(C)(C)O1)C(Br)(Br)C1=O',
   "5,5'-Dimethyl-2,2'-bipyridyl": 'CC1=CN=C(C2=NC=C(C)C=C2)C=C1',
-  "5,6-Dimethyl-1,10-phenanthroline": 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1C',
-  "5-Bromo-1,10-phenanthroline": 'BrC1=C2C=CC=NC2=C3N=CC=CC3=C1',
-  "5-Chloro-1,10-phenanthroline": 'ClC1=C2C=CC=NC2=C3N=CC=CC3=C1',
-  "5-Methyl-1,10-phenanthroline Hydrate": 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1.[H]O[H]',
-  "5-Nitro-1,10-phenanthroline": 'O=[N+](C1=C2C=CC=NC2=C3N=CC=CC3=C1)[O-]',
-  "5-Sulfosalicylic Acid Dihydrate": 'OC1=CC=C(S(=O)(O)=O)C=C1C(O)=O.[H]O[H].[H]O[H]',
+  '5,6-Dimethyl-1,10-phenanthroline': 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1C',
+  '5-Bromo-1,10-phenanthroline': 'BrC1=C2C=CC=NC2=C3N=CC=CC3=C1',
+  '5-Chloro-1,10-phenanthroline': 'ClC1=C2C=CC=NC2=C3N=CC=CC3=C1',
+  '5-Methyl-1,10-phenanthroline Hydrate': 'CC1=C2C=CC=NC2=C3N=CC=CC3=C1.[H]O[H]',
+  '5-Nitro-1,10-phenanthroline': 'O=[N+](C1=C2C=CC=NC2=C3N=CC=CC3=C1)[O-]',
+  '5-Sulfosalicylic Acid Dihydrate': 'OC1=CC=C(S(=O)(O)=O)C=C1C(O)=O.[H]O[H].[H]O[H]',
   "6,10-Dibenzyl-N,N'-dimethyl-N,N,N',N'-tetrakis(4-methylbenzyl)-1,4-dioxaspiro[4.5]decane-(2R,3R)-diylbis(methylammonium) Bis(tetrafluoroborate)": 'C[N+](CC1=CC=C(C)C=C1)(CC2=CC=C(C)C=C2)(C)[C@@H]3OC4(C(CC5=CC=CC=C5)CCCC4(CC6=CC=CC=C6)[N+](CC7=CC=C(C)C=C7)(CC8=CC=C(C)C=C8)(C)C)OC3.F[B-](F)(F)F.F[B-](F)(F)F',
   "6,10-Dibenzyl-N,N'-dimethyl-N,N,N',N'-tetrakis(4-methylbenzyl)-1,4-dioxaspiro[4.5]decane-(2S,3S)-diylbis(methylammonium) Tetrafluoroborate": 'C[N+](CC1=CC=C(C)C=C1)(CC2=CC=C(C)C=C2)(C)[C@H]3OC4(C(CC5=CC=CC=C5)CCCC4(CC6=CC=CC=C6)[N+](CC7=CC=C(C)C=C7)(CC8=CC=C(C)C=C8)(C)C)OC3.F[B-](F)(F)F.F[B-](F)(F)F',
   "6,6'-Bis(chloromethyl)-2,2'-bipyridyl": 'ClCC1=CC=CC(C2=NC(CCl)=CC=C2)=N1',
@@ -791,712 +791,712 @@ export const reagents_kombi = {
   "6,6'-Dibromo-2,2'-bipyridyl": 'BrC1=CC=CC(C2=NC(Br)=CC=C2)=N1',
   "6,6'-Dicyano-2,2'-bipyridyl": 'N#CC1=CC=CC(C2=NC(C#N)=CC=C2)=N1',
   "6,6'-Dimethyl-2,2'-bipyridyl": 'CC1=CC=CC(C2=NC(C)=CC=C2)=N1',
-  "6,7-Dihydro-2-(2,4,6-trimethylphenyl)-5H-pyrrolo[2,1-c]-1,2,4-triazolium Perchlorate": 'CC1=C([N+]2=CN3C(CCC3)=N2)C(C)=CC(C)=C1.O=Cl(=O)([O-])=O',
-  "6,7-Dihydro-2-pentafluorophenyl-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate": 'FC1=C(F)C(F)=C(F)C(F)=C1[N+]2=CN3C(CCC3)=N2.F[B-](F)(F)F',
-  "6,8-Bis(benzylthio)octanoic Acid": 'O=C(O)CCCCC(SCC1=CC=CC=C1)CCSCC2=CC=CC=C2',
+  '6,7-Dihydro-2-(2,4,6-trimethylphenyl)-5H-pyrrolo[2,1-c]-1,2,4-triazolium Perchlorate': 'CC1=C([N+]2=CN3C(CCC3)=N2)C(C)=CC(C)=C1.O=Cl(=O)([O-])=O',
+  '6,7-Dihydro-2-pentafluorophenyl-5H-pyrrolo[2,1-c][1,2,4]triazolium Tetrafluoroborate': 'FC1=C(F)C(F)=C(F)C(F)=C1[N+]2=CN3C(CCC3)=N2.F[B-](F)(F)F',
+  '6,8-Bis(benzylthio)octanoic Acid': 'O=C(O)CCCCC(SCC1=CC=CC=C1)CCSCC2=CC=CC=C2',
   "6-Bromo-2,2'-bipyridyl": 'BrC1=CC=CC(C2=NC=CC=C2)=N1',
   "6-Bromo-4,4'-dimethyl-2,2'-bipyridyl": 'CC1=CC(C2=NC(Br)=CC(C)=C2)=NC=C1',
-  "6-Methyl-2,4-heptanedione": 'CC(CC(CC(C)C)=O)=O',
-  "7-Methyl-1,5,7-triazabicyclo[4.4.0]dec-5-ene": 'CN1C2=NCCCN2CCC1',
-  "8-Ethylquinoline N-oxide": 'CCC1=CC=CC2=CC=C[N+]([O-])=C12',
-  "8-Quinolineboronic acid": 'OB(C1=C(N=CC=C2)C2=CC=C1)O',
-  "9-(2,5-Dimethylphenyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC(C)=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  "9-(2,6-Dimethylphenyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  "9-(2-Biphenylyl)-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3C4=CC=CC=C4)C5=C1C=CC=C5.O=Cl(=O)([O-])=O',
-  "9-Azajulolidine": 'N1(CCC2)CCCC3=CN=CC2=C31',
-  "9H,9H-Triacontafluoro-8,10-heptadecanedione": 'O=C(CC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  "9-Mesityl-10-methylacridinium Perchlorate": 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
-  "9-Mesityl-2,7,10-trimethylacridinium Perchlorate": 'C[N+]1=C2C=CC(C)=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC(C)=C4.O=Cl(=O)([O-])=O',
-  "9-Methyl-3,4-dihydro-2H-pyrido[1,2-a]pyrimidin-2-one": 'O=C1N=C(C(C)=CC=C2)N2CC1',
-  "Acenaphthylene": 'C12=CC=CC3=C1C(C=C2)=CC=C3',
-  "acetic acid": 'CC(O)=O',
-  "Acetic Acid (1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester": 'CC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  "Acetic Acid (1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester": 'CC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
-  "acetone": 'CC(C)=O',
-  "acetonitrile": 'CC#N',
-  "Acetylacetone": 'CC(CC(C)=O)=O',
-  "AlkylFluor": 'FC(N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N+]1C(C(C(C)C)=CC=C3)=C3C(C)C.F[B-](F)(F)F',
-  "Allyl(chloromethyl)dimethylsilane": 'C[Si](CCl)(CC=C)C',
-  "Allyl(tert-butyl)dimethylsilane": 'C[Si](C(C)(C)C)(CC=C)C',
-  "Allylchlorodimethylsilane": 'C[Si](Cl)(CC=C)C',
-  "Allylmagnesium Bromide": 'Br[Mg]CC=C',
-  "Allylmagnesium Chloride": 'Cl[Mg]CC=C',
-  "Allyloxytrimethylsilane": 'C[Si](C)(OCC=C)C',
-  "Allylpalladium(II) Chloride": '[Pd+]CC=C.[Cl-]',
-  "Allyltriethoxysilane": 'CCO[Si](OCC)(CC=C)OCC',
-  "Allyltriethylsilane": 'CC[Si](CC)(CC=C)CC',
-  "Allyltriisopropylsilane": 'CC([Si](C(C)C)(CC=C)C(C)C)C',
-  "Allyltrimethoxysilane": 'CO[Si](OC)(CC=C)OC',
-  "Allyltrimethylsilane": 'C[Si](C)(CC=C)C',
-  "Allyltriphenyltin": 'C=CC[Sn](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Allyltris(trimethylsilyloxy)silane": 'C[Si](O[Si](O[Si](C)(C)C)(CC=C)O[Si](C)(C)C)(C)C',
-  "aluminium bromide": '[Al+3].[Br-].[Br-].[Br-]',
-  "Aluminium chloride": 'Cl[Al](Cl)Cl',
-  "Aluminium hydroxide": '[OH-].[Al+3].[OH-].[OH-]',
-  "aluminium iodide": '[Al+3].[I-].[I-].[I-]',
-  "Aluminum Bromide Anhydrous": '[Al+3].[Br-].[Br-].[Br-]',
-  "Aluminum Glycinate": 'NCC([O-])=O.NCC([O-])=O.NCC([O-])=O.[Al+3]',
-  "Aluminum Isopropoxide": 'CC([O-])C.CC([O-])C.CC([O-])C.[Al+3]',
-  "Aluminum(III) Bromide": '[Al+3].[Br-].[Br-].[Br-]',
-  "Aluminum(III) Chloride": '[Al+3].[Cl-].[Cl-].[Cl-]',
-  "Aminomethanesulfonic Acid": 'O=S(CN)(O)=O',
-  "Ammonia": 'N',
-  "ammonium actetate": 'CC([O-])=O.[NH4+]',
-  "ammonium bromide": '[NH4+].[Br-]',
-  "ammonium carbamate": 'NC([O-])=O.[NH4+]',
-  "Ammonium Cerium(IV) Nitrate": '[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[NH4+].[Ce+4]',
-  "ammonium chloride": '[NH4+].[Cl-]',
-  "Ammonium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[NH4+].[NH4+]',
-  "ammonium fluoride": '[NH4+].[F-]',
-  "ammonium formate": 'O=C[O-].[NH4+]',
-  "ammonium hydrogensulfate": '[O-]S(=O)(O)=O.[NH4+]',
-  "Ammonium hydroxide": '[NH4+].[OH-]',
-  "Ammonium phosphomolybdate hydrate": 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[NH4+]',
-  "Ammonium sulfate": 'O=S([O-])([O-])=O.[NH4+].[NH4+]',
-  "ammonium tetrafluoroborate": 'F[B-](F)(F)F.[NH4+]',
-  "ammoniumthiosulfate": 'O=S([O-])([O-])=S.[NH4+].[NH4+]',
-  "Amyltriethylammonium Bis(trifluoromethanesulfonyl)imide": 'CCC[N+](CCC)(CCC)CCC.FC(F)(F)S([N-]S(C(F)(F)F)(=O)=O)(=O)=O',
-  "B(CH3)3": 'CB(C)C',
-  "B(OH)3": 'OB(O)O',
-  "Barium hydroxide": '[Ba+2].[OH-].[OH-]',
-  "Barium hydroxide octahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ba+2].[OH-].[OH-]',
-  "Barium tert-butoxide": 'CC(C)([O-])C.CC(C)([O-])C.[Ba+2]',
-  "Bathophenanthroline": 'C1(C2=CC=CC=C2)=CC=NC3=C4N=CC=C(C5=CC=CC=C5)C4=CC=C13',
-  "Bathophenanthrolinedisulfonic Acid Disodium Salt Hydrate": 'O=S(C1=NC2=C3N=CC=C(C4=CC=CC=C4)C3=CC=C2C(C5=CC=CC=C5)=C1S(=O)([O-])=O)([O-])=O.[H]O[H].[Na+].[Na+]',
-  "benzene": 'C1=CC=CC=C1',
-  "Benzeneruthenium(II) Chloride": '[Ru+2].C1=CC=CC=C1.[Cl-].[Cl-]',
-  "Benzenesulfonic Acid Anhydrous": 'O=S(C1=CC=CC=C1)(O)=O',
-  "Benzenesulfonic Acid Monohydrate": 'O=S(C1=CC=CC=C1)(O)=O.[H]O[H]',
-  "Benzoic Acid": 'O=C(O)C1=CC=CC=C1',
-  "Benzoyl peroxide": 'O=C(OOC(C1=CC=CC=C1)=O)C2=CC=CC=C2',
-  "Benzoyl(phenyliodonio)(trifluoromethanesulfonyl)methanide": 'O=S([C-](C(C1=CC=CC=C1)=O)[I+]C2=CC=CC=C2)(C(F)(F)F)=O',
-  "Benzylcetyldimethylammonium Chloride Hydrate": 'C[N+](CCCCCCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
-  "Benzyldimethyltetradecylammonium Chloride Hydrate": 'CCCCCCCCCCCCCC[N+](C)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
-  "Benzyldodecyldimethylammonium Bromide": 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[Br-]',
-  "Benzyldodecyldimethylammonium Chloride Dihydrate": 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[H]O[H].[Cl-]',
-  "Benzylmagnesium Bromide": 'Br[Mg]CC1=CC=CC=C1',
-  "Benzylmagnesium Chloride": 'Cl[Mg]CC1=CC=CC=C1',
-  "Benzyltributylammonium Bromide": 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Br-]',
-  "Benzyltributylammonium Chloride": 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Cl-]',
-  "Benzyltriethylammonium Borohydride": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[BH4-]',
-  "Benzyltriethylammonium Bromide": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Br-]',
-  "Benzyltriethylammonium Chloride": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Cl-]',
-  "Benzyltriethylammonium Iodide": 'CC[N+](CC)(CC1=CC=CC=C1)CC.[I-]',
-  "Benzyltrimethylammonium Bromide": 'C[N+](C)(CC1=CC=CC=C1)C.[Br-]',
-  "Benzyltrimethylammonium Chloride": 'C[N+](C)(CC1=CC=CC=C1)C.[Cl-]',
-  "Benzyltrimethylammonium Dichloroiodate": 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-]Cl',
-  "Benzyltrimethylammonium Hydroxide": 'C[N+](C)(CC1=CC=CC=C1)C.[OH-]',
-  "Benzyltrimethylammonium Tetrachloroiodate": 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-](Cl)(Cl)Cl',
-  "Benzyltrimethylammonium Tribromide": 'C[N+](C)(CC1=CC=CC=C1)C.[Br-].[Br-].[Br-]',
-  "Benzyltrimethylsilane": 'C[Si](C)(CC1=CC=CC=C1)C',
-  "BERYLLIUM": '[Be]',
-  "BERYLLIUM HYDROXIDE": '[Be+2].[OH-].[OH-]',
-  "BF3": 'FB(F)F',
-  "Bicinchoninic Acid Disodium Salt Hydrate": 'O=C([O-])C1=C(C2=C(C([O-])=O)C3=CC=CC=C3N=C2)C=NC4=CC=CC=C14.[H]O[H].[Na+].[Na+]',
-  "Bis(1,3-propanediamine) Copper(II) Dichloride": 'NCCCN.NCCCN.[Cu+2].[Cl-].[Cl-]',
-  "Bis(1,5-cyclooctadiene)nickel(0)": '[Ni].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
-  "Bis(1,5-cyclooctadiene)rhodium(I) Tetrafluoroborate": 'F[B-](F)(F)F.[Rh+].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
-  "Bis(2,4,6-trimethylpyridine)bromonium Hexafluorophosphate": 'CC1=CC(C)=C([BrH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
-  "Bis(2,4,6-trimethylpyridine)iodonium Hexafluorophosphate": 'CC1=CC(C)=C([IH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
-  "Bis(2,4-pentanedionato)bis(2-propanolato)titanium(IV)": 'CC(/C=C(C)\\[O-])=O.CC(/C=C(C)\\[O-])=O.[O-]C(C)C.[O-]C(C)C.[Ti+4]',
-  "Bis(2,4-pentanedionato)cobalt(II)": 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O',
-  "Bis(2,4-pentanedionato)cobalt(II) Dihydrate": 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O.O',
-  "Bis(2,4-pentanedionato)manganese(II) Dihydrate": 'CC(/C=C([O-])/C)=O.CC(/C=C([O-])/C)=O.[Mn+2].O.O',
-  "Bis(2,4-pentanedionato)molybdenum(VI) Dioxide": 'CC(/C=C([O-])/C)=O.C/C([O-])=C/C(C)=O.[Mo+6].[O-2].[O-2]',
-  "Bis(2,4-pentanedionato)nickel(II) Hydrate": 'O=C(/C=C([O-])/C)C.O=C(/C=C([O-])/C)C.[Ni+2].O',
-  "Bis(2,4-pentanedionato)vanadium(IV) Oxide": 'CC(/C=C([O-])/C)=O.[O-]/C(C)=C\\C(C)=O.[V+4].[O-2]',
-  "Bis(2-hydroxyethyl)dimethylammonium Chloride": 'C[N+](CCO)(CCO)C.[Cl-]',
-  "Bis(4-bromophenyl)iodonium triflate": 'BrC1=CC=C([I+]C2=CC=C(Br)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  "Bis(4-fluorophenyl)iodonium triflate": 'FC1=CC=C([I+]C2=CC=C(F)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  "Bis(4-methoxyphenyl) Selenoxide": 'O=[Se](C1=CC=C(OC)C=C1)C2=CC=C(OC)C=C2',
-  "Bis(4-methylphenyl)iodonium triflate": 'CC1=CC=C([I+]C2=CC=C(C)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
-  "Bis(4-nitrophenyl) Carbonate": 'O=C(OC1=CC=C([N+]([O-])=O)C=C1)OC2=CC=C([N+]([O-])=O)C=C2',
-  "Bis(acetato)aqua[(S,S)-4,6-bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene]rhodium": 'CC1=CC(C)=C(C2=N[C@H](CO2)C(C)C)C=C1C3=N[C@@H](C(C)C)CO3.CC([O-])=O.[O-]C(C)=O.[Rh+2].O',
-  "Bis(acetonitrile)palladium(II) Dichloride": 'CC#N.CC#N.[Pd+2].[Cl-].[Cl-]',
-  "Bis(benzonitrile)palladium(II) Dichloride": 'N#CC1=CC=CC=C1.N#CC2=CC=CC=C2.[Pd+2].[Cl-].[Cl-]',
-  "Bis(chloromethyl)dimethylsilane": 'C[Si](CCl)(CCl)C',
-  "Bis(dibenzylideneacetone)palladium(0)": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
-  "Pd(dba)2": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
-  "Bis(diphenylphosphino)methane": 'P(CP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "Bis(hexafluoroacetylacetonato)nickel(II) Hydrate": 'O=C(/C=C(C(F)(F)F)\\[O-])C(F)(F)F.[O-]/C(C(F)(F)F)=C\\C(C(F)(F)F)=O.[Ni+2]',
-  "Bis(pentafluorophenyl) Carbonate": 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)OC2=C(F)C(F)=C(F)C(F)=C2F',
-  "Bis(pentafluorophenyl)dimethylsilane": 'C[Si](C1=C(F)C(F)=C(F)C(F)=C1F)(C2=C(F)C(F)=C(F)C(F)=C2F)C',
-  "Bis(pentafluorophenyl)phenylphosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=CC=CC=C3',
-  "Bis(pinacolato)diboron": 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
-  "BPin": 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
-  "Bis(pyridine)iodonium tetrafluoroborate": '[IH+]C1=NC=CC=C1.F[B-](F)(F)F.C2=NC=CC=C2',
-  "Bis(tert-butylcarbonyloxy)iodobenzene": 'IC1=CC=CC(OC(C(C)(C)C)=O)=C1OC(C(C)(C)C)=O',
-  "Bis(tetrabutylammonium) Dichromate": 'CCCC[N+](CCCC)(CCCC)CCCC.CCCC[N+](CCCC)(CCCC)CCCC.O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O',
-  "Bis(trichlorosilyl)acetylene": 'Cl[Si](C#C[Si](Cl)(Cl)Cl)(Cl)Cl',
-  "Bis(tricyclohexylphosphine)nickel(II) Dichloride": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Ni+2].[Cl-].[Cl-]',
-  "Bis(tricyclohexylphosphine)palladium(II) Dichloride": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Pd+2].[Cl-].[Cl-]',
-  "Bis(trifluoro-2,4-pentanedionato)cobalt(II) Hydrate": 'C/C([O-])=C/C(C(F)(F)F)=O.C/C([O-])=C/C(C(F)(F)F)=O.[Co+2]',
-  "Bis(trifluoromethanesulfonyl)imide": 'O=S(C(F)(F)F)(NS(=O)(C(F)(F)F)=O)=O',
-  "Bis(trimethylsilyl) Sulfide": 'C[Si](S[Si](C)(C)C)(C)C',
-  "Bis(trimethylsilyl)acetylene": 'C[Si](C#C[Si](C)(C)C)(C)C',
-  "Bis(trimethylsilyl)bromomethane": 'BrC([Si](C)(C)C)[Si](C)(C)C',
-  "Bis(trimethylsilyl)methane": 'C[Si](C[Si](C)(C)C)(C)C',
-  "Bis(trimethylsilyl)methylamine": 'CN([Si](C)(C)C)[Si](C)(C)C',
-  "Bis(tri-o-tolylphosphine)palladium(II) Dichloride": 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C.CC4=CC=CC=C4P(C5=CC=CC=C5C)C6=CC=CC=C6C.[Pd+2].[Cl-].[Cl-]',
-  "Bis(triphenylphosphine)nickel(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Ni+2].[Cl-].[Cl-]',
-  "Bis(triphenylphosphine)palladium(II) Diacetate": 'CC([O-])=O.CC([O-])=O.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2]',
-  "Bis(triphenylphosphine)palladium(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2].[Cl-].[Cl-]',
-  "Bis(triphenylsilyl) chromate": 'O=[Cr](O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3)(O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=O',
-  "Bis(tri-tert-butylphosphine)palladium(0)": 'CC(P(C(C)(C)C)C(C)(C)C)(C)C.CC(P(C(C)(C)C)C(C)(C)C)(C)C.[Pd]',
-  "Bis[1,2-bis(diphenylphosphino)ethane]palladium(0)": 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(CCP(C5=CC=CC=C5)C6=CC=CC=C6)(C7=CC=CC=C7)C8=CC=CC=C8.[Pd]',
-  "Bis[2-(diphenylphosphino)phenyl] Ether": 'C1(OC2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
-  "Bis[2-(trimethylsilyloxy)ethyl] Ether": 'C[Si](OCCOCCO[Si](C)(C)C)(C)C',
-  "Bis[2-carboxyethylgermanium(IV)] Sesquioxide": 'O=[Ge](CCC(O)=O)O[Ge](CCC(O)=O)=O',
-  "Bis[3-(trimethoxysilyl)propyl]amine": 'CO[Si](CCCNCCC[Si](OC)(OC)OC)(OC)OC',
-  "Bis[di-tert-butyl(4-dimethylaminophenyl)phosphine]palladium(0)": 'CN(C1=CC=C(P(C(C)(C)C)C(C)(C)C)C=C1)C.CN(C2=CC=C(P(C(C)(C)C)C(C)(C)C)C=C2)C.[Pd]',
-  "Bis[tris(2,4-pentanedionato)titanium(IV)] Hexachlorotitanate(IV)": 'Cl[Ti-2](Cl)(Cl)(Cl)(Cl)Cl.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.[Ti+4].[Ti+4]',
-  "BISMUTH HYDROXIDE": '[Bi+3].[OH-].[OH-].[OH-]',
-  "Bismuth Tripotassium Dicitrate": 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[Bi+5].[K+].[K+].[K+]',
-  "Bistrifluoroacetamide": 'O=C(C(F)(F)F)NC(C(F)(F)F)=O',
-  "Borane - 2-Methylpyridine Complex": 'CC1=NC=CC=C1.B',
-  "Borane - 5-Ethyl-2-methylpyridine Complex": 'CC1=NC=C(CC)C=C1.B',
-  "Borane - Ammonia Complex": 'B.N',
-  "Borane - Diisopropylamine Complex": 'CC(C)NC(C)C.B',
-  "Borane - Morpholine Complex": 'O1CCNCC1.B',
-  "Borane - Pyridine Complex": 'C1=CN=CC=C1.B',
-  "Borane - Tetrahydrofuran Complex": 'B.C1COCC1',
-  "Borane - tert-Butylamine Complex": 'NC(C)(C)C.B',
-  "Boron Trichloride": 'ClB(Cl)Cl',
-  "Boron Trifluoride": 'FB(F)F',
-  "Boron Trifluoride - Methanol Reagent": 'FB(F)F.CO',
-  "Boron Trifluoride - Propanol Reagent": 'FB(F)F.CCCO',
-  "Bromine": 'BrBr',
-  "Bromine - 1,4-Dioxane Complex": 'BrBr.O1CCOCC1',
-  "Bromo[(2,6-pyridinediyl)bis(3-methyl-1-imidazolyl-2-ylidene)]nickel Bromide": 'CN(C=CN12)C1=[Ni-3](Br)=C3N(C)C=CN3C4=CC=CC2=N4.[Br-]',
-  "Bromo[[1,3-bis[(4S,5S)-1-benzoyl-4,5-diphenyl-2-imidazolin-2-yl]benzene]palladium(II)]": 'O=C(N1[C@@H](C2=CC=CC=C2)[C@H](C3=CC=CC=C3)N=C1C4=CC(C5=N[C@@H](C6=CC=CC=C6)[C@H](C7=CC=CC=C7)N5C(C8=CC=CC=C8)=O)=CC=C4)C9=CC=CC=C9.[Pd+]Br',
-  "Bromoacetic Acid": 'O=C(O)CBr',
-  "Bromocholine Bromide": 'BrCC[N+](C)(C)C.[Br-]',
-  "Bromodicarbonyl[bis[2-(diisopropylphosphino)ethyl]amine]manganese(I)": '[C]=O.[C]=O.CC(P(CCNCCP(C(C)C)C(C)C)C(C)C)C.[Mn]Br',
-  "Bromodimethylsulfonium Bromide": 'C[S+](Br)C.[Br-]',
-  "Bromotrichloromethane": 'ClC(Cl)(Br)Cl',
-  "Bromotrimethylsilane": 'Br[Si](C)(C)C',
-  "Bromotripyrrolidinophosphonium Hexafluorophosphate": 'Br[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
-  "Bromotris(dimethylamino)phosphonium Hexafluorophosphate": 'CN([P+](N(C)C)(Br)N(C)C)C.F[P-](F)(F)(F)(F)F',
-  "Butylboronic Acid": 'CCCCB(O)O',
-  "Butyllithium": 'CCCC[Li]',
-  "Butylmagnesium Bromide": 'Br[Mg]CCCC',
-  "Butylmagnesium Chloride": 'Cl[Mg]CCCC',
-  "Butyltin Trichloride": 'CCCC[Sn](Cl)(Cl)Cl',
-  "Cacodylic Acid": 'O=[As](C)(C)O',
-  "CADMIUM HYDROXIDE": '[Cd+2].[OH-].[OH-]',
-  "CALCIUM BROMIDE HYDRATE": '[H]O[H].[Ca+2].[Br-].[Br-]',
-  "calcium carbonate": '[O-]C([O-])=O.[Ca+2]',
-  "calcium chloride": '[Ca+2].[Cl-].[Cl-]',
-  "calcium hydride": '[Ca+2].[H-].[H-]',
-  "Calcium peroxide": '[O-][O-].[Ca+2]',
-  "calcium sulfate": 'O=S([O-])([O-])=O.[Ca+2]',
-  "Calcium L-Threonate": 'O[C@H]([C@H](CO)O)C([O-])=O.O[C@H]([C@H](CO)O)C([O-])=O.[Ca+2]',
-  "Carbamylcholine Chloride": 'C[N+](C)(C)CCOC(N)=O.[Cl-]',
-  "Carbon Tetrabromide": 'BrC(Br)(Br)Br',
-  "carbon tetrachloride": 'ClC(Cl)(Cl)Cl',
-  "Carbon Tetraiodide": 'IC(I)(I)I',
-  "carbon tribromide": 'BrC(Br)([H])Br',
-  "Carbonyl(dihydrido)tris(triphenylphosphine)ruthenium(II)": '[C]=O.[H][Ru][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  "Carbonylchlorobis(triphenylphosphine)iridium(I)": '[C]=O.[Ir]Cl.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6',
-  "Carbonylhydridotris(triphenylphosphine)iridium(I)": '[C]=O.[Ir][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
-  "Cerium": '[Ce]',
-  "Cerium tetrahydroxide": '[Ce+4].[OH-].[OH-].[OH-].[OH-]',
-  "cerium trihydroxide": '[Ce+3].[OH-].[OH-].[OH-]',
-  "Cerium(III) Acetate Hydrate": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.[H]O[H].[Ce+3]',
-  "CERIUM(III) CHLORIDE HEPTAHYDRATE": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ce+3].[Cl-].[Cl-].[Cl-]',
-  "Cerium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ce+3]',
-  "Cesium Acetate": 'CC([O-])=O.[Cs+]',
-  "cesium bromide": '[Cs+].[Br-]',
-  "Cesium Carbonate": '[O-]C([O-])=O.[Cs+].[Cs+]',
-  "Cesium Fluoride": '[Cs+].[F-]',
-  "Cesium hydroxide": '[Cs+].[OH-]',
-  "Cesium Pivalate": 'CC(C)(C)C([O-])=O.[Cs+]',
-  "cesium sulfate": 'O=S([O-])([O-])=O.[Cs+].[Cs+]',
-  "Chloramine B Hydrate": 'O=S([N-]Cl)(C1=CC=CC=C1)=O.O.[Na+]',
-  "Chloramine T Trihydrate": 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[H]O[H].[H]O[H].[H]O[H].[Na+]',
-  "Chloranil": 'O=C(C(Cl)=C1Cl)C(Cl)=C(Cl)C1=O',
-  "Chloro(1,5-cyclooctadiene)iridium(I)": '[Ir]Cl.C1=C\\CC/C=C\\CC/1',
-  "Chloro(1,5-cyclooctadiene)rhodium(I)": '[Rh]Cl.C1=C\\CC/C=C\\CC/1',
-  "Chloro(1,5-hexadiene)rhodium(I)": 'C=CCCC=C.[Rh]Cl',
-  "Chloro(2-dicyclohexylphosphino-2′,4′,6′-triisopropyl-1,1′-biphenyl)[2-(2′-amino-1,1′-biphenyl)]palladium(II)": 'Cl[Pd]1(C2=CC=CC=C2C3=CC=CC=C3N1)P(C4CCCCC4)(C5=CC=CC=C5C6=C(C(C)C)C=C(C(C)C)C=C6C(C)C)C7CCCCC7',
-  "Chloro(3-chloropropyl)dimethylsilane": 'C[Si](CCCCl)(Cl)C',
-  "Chloro(hexyl)dimethylsilane": 'C[Si](CCCCCC)(Cl)C',
-  "Chloro(methyl)(phenyl)(vinyl)silane": 'C=C[Si](C)(Cl)C1=CC=CC=C1',
-  "Chloro(pentamethylcyclopentadienyl)ruthenium(II)": 'CC1=C([Ru]Cl)C(C)(C)C(C)=C1C',
-  "Chloro[(tri-tert-butylphosphine)-2-(2-aminobiphenyl)]palladium(II)": 'NC1([Pd+2])=CC=CC=C1C2=CC=CC=C2.CC(P(C(C)(C)C)(Cl)C(C)(C)C)(C)C',
-  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](acetanilide)palladium(II)]": 'CC(NC1=CC=CC=C1)=O.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethyl-3,5-dimethoxybenzylamine)palladium(II)]": 'COC1=CC(OC)=CC(CN(C)C)=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  "Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethylbenzylamine)palladium(II)]": 'CN(C)CC1=CC=CC=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
-  "Chloro[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene]copper(I)": 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=[Cu-2]Cl)C(C(C)C)=CC=C1)C',
-  "Chloroacetic Acid": 'O=C(O)CCl',
-  "Chlorobis(cyclooctene)iridium(I)": '[Ir]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
-  "Chlorobis(cyclooctene)rhodium(I)": '[Rh]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
-  "Chlorobis(ethylene)iridium(I)": 'Cl[Ir-4]12(CC2)CC1',
-  "Chlorobis(ethylene)rhodium(I)": 'Cl[Rh-4]12(CC2)CC1',
-  "Chlorobis[dicyclohexyl(phenyl)phosphino](o-tolyl)nickel(II)": 'CC1=CC=CC=C1[Ni-2](P(C2CCCCC2)(C3CCCCC3)C4=CC=CC=C4)(Cl)P(C5CCCCC5)(C6CCCCC6)C7=CC=CC=C7',
-  "Chlorocholine Chloride": 'ClCC[N+](C)(C)C.[Cl-]',
-  "Chlorodicyclohexylphosphine": 'ClP(C1CCCCC1)C2CCCCC2',
-  "Chlorodifluoroacetic Acid": 'O=C(O)C(F)(Cl)F',
-  "Chlorodiisopropylphosphine": 'CC(P(Cl)C(C)C)C',
-  "Chlorodimethylvinylsilane": 'C=C[Si](C)(Cl)C',
-  "Chlorodiphenylphosphine": 'ClP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Chloroform": 'ClC(Cl)Cl',
-  "Chloromethyldimethylphenylsilane": 'C[Si](C)(CCl)C1=CC=CC=C1',
+  '6-Methyl-2,4-heptanedione': 'CC(CC(CC(C)C)=O)=O',
+  '7-Methyl-1,5,7-triazabicyclo[4.4.0]dec-5-ene': 'CN1C2=NCCCN2CCC1',
+  '8-Ethylquinoline N-oxide': 'CCC1=CC=CC2=CC=C[N+]([O-])=C12',
+  '8-Quinolineboronic acid': 'OB(C1=C(N=CC=C2)C2=CC=C1)O',
+  '9-(2,5-Dimethylphenyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC(C)=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  '9-(2,6-Dimethylphenyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=CC=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  '9-(2-Biphenylyl)-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=CC=CC=C3C4=CC=CC=C4)C5=C1C=CC=C5.O=Cl(=O)([O-])=O',
+  '9-Azajulolidine': 'N1(CCC2)CCCC3=CN=CC2=C31',
+  '9H,9H-Triacontafluoro-8,10-heptadecanedione': 'O=C(CC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  '9-Mesityl-10-methylacridinium Perchlorate': 'C[N+]1=C2C=CC=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC=C4.O=Cl(=O)([O-])=O',
+  '9-Mesityl-2,7,10-trimethylacridinium Perchlorate': 'C[N+]1=C2C=CC(C)=CC2=C(C3=C(C)C=C(C)C=C3C)C4=C1C=CC(C)=C4.O=Cl(=O)([O-])=O',
+  '9-Methyl-3,4-dihydro-2H-pyrido[1,2-a]pyrimidin-2-one': 'O=C1N=C(C(C)=CC=C2)N2CC1',
+  Acenaphthylene: 'C12=CC=CC3=C1C(C=C2)=CC=C3',
+  'acetic acid': 'CC(O)=O',
+  'Acetic Acid (1R,2S)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester': 'CC(O[C@H](C1=CC=CC=C1)[C@@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  'Acetic Acid (1S,2R)-2-[N-Benzyl-N-(mesitylenesulfonyl)amino]-1-phenylpropyl Ester': 'CC(O[C@@H](C1=CC=CC=C1)[C@H](N(CC2=CC=CC=C2)S(=O)(C(C(C)=CC(C)=C3)=C3C)=O)C)=O',
+  acetone: 'CC(C)=O',
+  acetonitrile: 'CC#N',
+  Acetylacetone: 'CC(CC(C)=O)=O',
+  AlkylFluor: 'FC(N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N+]1C(C(C(C)C)=CC=C3)=C3C(C)C.F[B-](F)(F)F',
+  'Allyl(chloromethyl)dimethylsilane': 'C[Si](CCl)(CC=C)C',
+  'Allyl(tert-butyl)dimethylsilane': 'C[Si](C(C)(C)C)(CC=C)C',
+  Allylchlorodimethylsilane: 'C[Si](Cl)(CC=C)C',
+  'Allylmagnesium Bromide': 'Br[Mg]CC=C',
+  'Allylmagnesium Chloride': 'Cl[Mg]CC=C',
+  Allyloxytrimethylsilane: 'C[Si](C)(OCC=C)C',
+  'Allylpalladium(II) Chloride': '[Pd+]CC=C.[Cl-]',
+  Allyltriethoxysilane: 'CCO[Si](OCC)(CC=C)OCC',
+  Allyltriethylsilane: 'CC[Si](CC)(CC=C)CC',
+  Allyltriisopropylsilane: 'CC([Si](C(C)C)(CC=C)C(C)C)C',
+  Allyltrimethoxysilane: 'CO[Si](OC)(CC=C)OC',
+  Allyltrimethylsilane: 'C[Si](C)(CC=C)C',
+  Allyltriphenyltin: 'C=CC[Sn](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  'Allyltris(trimethylsilyloxy)silane': 'C[Si](O[Si](O[Si](C)(C)C)(CC=C)O[Si](C)(C)C)(C)C',
+  'aluminium bromide': '[Al+3].[Br-].[Br-].[Br-]',
+  'Aluminium chloride': 'Cl[Al](Cl)Cl',
+  'Aluminium hydroxide': '[OH-].[Al+3].[OH-].[OH-]',
+  'aluminium iodide': '[Al+3].[I-].[I-].[I-]',
+  'Aluminum Bromide Anhydrous': '[Al+3].[Br-].[Br-].[Br-]',
+  'Aluminum Glycinate': 'NCC([O-])=O.NCC([O-])=O.NCC([O-])=O.[Al+3]',
+  'Aluminum Isopropoxide': 'CC([O-])C.CC([O-])C.CC([O-])C.[Al+3]',
+  'Aluminum(III) Bromide': '[Al+3].[Br-].[Br-].[Br-]',
+  'Aluminum(III) Chloride': '[Al+3].[Cl-].[Cl-].[Cl-]',
+  'Aminomethanesulfonic Acid': 'O=S(CN)(O)=O',
+  Ammonia: 'N',
+  'ammonium actetate': 'CC([O-])=O.[NH4+]',
+  'ammonium bromide': '[NH4+].[Br-]',
+  'ammonium carbamate': 'NC([O-])=O.[NH4+]',
+  'Ammonium Cerium(IV) Nitrate': '[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[O-][N+]([O-])=O.[NH4+].[Ce+4]',
+  'ammonium chloride': '[NH4+].[Cl-]',
+  'Ammonium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[NH4+].[NH4+]',
+  'ammonium fluoride': '[NH4+].[F-]',
+  'ammonium formate': 'O=C[O-].[NH4+]',
+  'ammonium hydrogensulfate': '[O-]S(=O)(O)=O.[NH4+]',
+  'Ammonium hydroxide': '[NH4+].[OH-]',
+  'Ammonium phosphomolybdate hydrate': 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[NH4+]',
+  'Ammonium sulfate': 'O=S([O-])([O-])=O.[NH4+].[NH4+]',
+  'ammonium tetrafluoroborate': 'F[B-](F)(F)F.[NH4+]',
+  ammoniumthiosulfate: 'O=S([O-])([O-])=S.[NH4+].[NH4+]',
+  'Amyltriethylammonium Bis(trifluoromethanesulfonyl)imide': 'CCC[N+](CCC)(CCC)CCC.FC(F)(F)S([N-]S(C(F)(F)F)(=O)=O)(=O)=O',
+  'B(CH3)3': 'CB(C)C',
+  'B(OH)3': 'OB(O)O',
+  'Barium hydroxide': '[Ba+2].[OH-].[OH-]',
+  'Barium hydroxide octahydrate': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ba+2].[OH-].[OH-]',
+  'Barium tert-butoxide': 'CC(C)([O-])C.CC(C)([O-])C.[Ba+2]',
+  Bathophenanthroline: 'C1(C2=CC=CC=C2)=CC=NC3=C4N=CC=C(C5=CC=CC=C5)C4=CC=C13',
+  'Bathophenanthrolinedisulfonic Acid Disodium Salt Hydrate': 'O=S(C1=NC2=C3N=CC=C(C4=CC=CC=C4)C3=CC=C2C(C5=CC=CC=C5)=C1S(=O)([O-])=O)([O-])=O.[H]O[H].[Na+].[Na+]',
+  benzene: 'C1=CC=CC=C1',
+  'Benzeneruthenium(II) Chloride': '[Ru+2].C1=CC=CC=C1.[Cl-].[Cl-]',
+  'Benzenesulfonic Acid Anhydrous': 'O=S(C1=CC=CC=C1)(O)=O',
+  'Benzenesulfonic Acid Monohydrate': 'O=S(C1=CC=CC=C1)(O)=O.[H]O[H]',
+  'Benzoic Acid': 'O=C(O)C1=CC=CC=C1',
+  'Benzoyl peroxide': 'O=C(OOC(C1=CC=CC=C1)=O)C2=CC=CC=C2',
+  'Benzoyl(phenyliodonio)(trifluoromethanesulfonyl)methanide': 'O=S([C-](C(C1=CC=CC=C1)=O)[I+]C2=CC=CC=C2)(C(F)(F)F)=O',
+  'Benzylcetyldimethylammonium Chloride Hydrate': 'C[N+](CCCCCCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
+  'Benzyldimethyltetradecylammonium Chloride Hydrate': 'CCCCCCCCCCCCCC[N+](C)(CC1=CC=CC=C1)C.[H]O[H].[Cl-]',
+  'Benzyldodecyldimethylammonium Bromide': 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[Br-]',
+  'Benzyldodecyldimethylammonium Chloride Dihydrate': 'C[N+](CCCCCCCCCCCC)(CC1=CC=CC=C1)C.[H]O[H].[H]O[H].[Cl-]',
+  'Benzylmagnesium Bromide': 'Br[Mg]CC1=CC=CC=C1',
+  'Benzylmagnesium Chloride': 'Cl[Mg]CC1=CC=CC=C1',
+  'Benzyltributylammonium Bromide': 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Br-]',
+  'Benzyltributylammonium Chloride': 'CCCC[N+](CCCC)(CC1=CC=CC=C1)CCCC.[Cl-]',
+  'Benzyltriethylammonium Borohydride': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[BH4-]',
+  'Benzyltriethylammonium Bromide': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Br-]',
+  'Benzyltriethylammonium Chloride': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[Cl-]',
+  'Benzyltriethylammonium Iodide': 'CC[N+](CC)(CC1=CC=CC=C1)CC.[I-]',
+  'Benzyltrimethylammonium Bromide': 'C[N+](C)(CC1=CC=CC=C1)C.[Br-]',
+  'Benzyltrimethylammonium Chloride': 'C[N+](C)(CC1=CC=CC=C1)C.[Cl-]',
+  'Benzyltrimethylammonium Dichloroiodate': 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-]Cl',
+  'Benzyltrimethylammonium Hydroxide': 'C[N+](C)(CC1=CC=CC=C1)C.[OH-]',
+  'Benzyltrimethylammonium Tetrachloroiodate': 'C[N+](C)(CC1=CC=CC=C1)C.Cl[I-](Cl)(Cl)Cl',
+  'Benzyltrimethylammonium Tribromide': 'C[N+](C)(CC1=CC=CC=C1)C.[Br-].[Br-].[Br-]',
+  Benzyltrimethylsilane: 'C[Si](C)(CC1=CC=CC=C1)C',
+  BERYLLIUM: '[Be]',
+  'BERYLLIUM HYDROXIDE': '[Be+2].[OH-].[OH-]',
+  BF3: 'FB(F)F',
+  'Bicinchoninic Acid Disodium Salt Hydrate': 'O=C([O-])C1=C(C2=C(C([O-])=O)C3=CC=CC=C3N=C2)C=NC4=CC=CC=C14.[H]O[H].[Na+].[Na+]',
+  'Bis(1,3-propanediamine) Copper(II) Dichloride': 'NCCCN.NCCCN.[Cu+2].[Cl-].[Cl-]',
+  'Bis(1,5-cyclooctadiene)nickel(0)': '[Ni].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
+  'Bis(1,5-cyclooctadiene)rhodium(I) Tetrafluoroborate': 'F[B-](F)(F)F.[Rh+].C1=C\\CC/C=C\\CC/1.C2=C\\CC/C=C\\CC/2',
+  'Bis(2,4,6-trimethylpyridine)bromonium Hexafluorophosphate': 'CC1=CC(C)=C([BrH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
+  'Bis(2,4,6-trimethylpyridine)iodonium Hexafluorophosphate': 'CC1=CC(C)=C([IH+])C(C)=N1.CC2=CC(C)=CC(C)=N2.F[P-](F)(F)(F)(F)F',
+  'Bis(2,4-pentanedionato)bis(2-propanolato)titanium(IV)': 'CC(/C=C(C)\\[O-])=O.CC(/C=C(C)\\[O-])=O.[O-]C(C)C.[O-]C(C)C.[Ti+4]',
+  'Bis(2,4-pentanedionato)cobalt(II)': 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O',
+  'Bis(2,4-pentanedionato)cobalt(II) Dihydrate': 'C/C([O-])=C/C(C)=O.C/C([O-])=C/C(C)=O.[Co+2].O.O',
+  'Bis(2,4-pentanedionato)manganese(II) Dihydrate': 'CC(/C=C([O-])/C)=O.CC(/C=C([O-])/C)=O.[Mn+2].O.O',
+  'Bis(2,4-pentanedionato)molybdenum(VI) Dioxide': 'CC(/C=C([O-])/C)=O.C/C([O-])=C/C(C)=O.[Mo+6].[O-2].[O-2]',
+  'Bis(2,4-pentanedionato)nickel(II) Hydrate': 'O=C(/C=C([O-])/C)C.O=C(/C=C([O-])/C)C.[Ni+2].O',
+  'Bis(2,4-pentanedionato)vanadium(IV) Oxide': 'CC(/C=C([O-])/C)=O.[O-]/C(C)=C\\C(C)=O.[V+4].[O-2]',
+  'Bis(2-hydroxyethyl)dimethylammonium Chloride': 'C[N+](CCO)(CCO)C.[Cl-]',
+  'Bis(4-bromophenyl)iodonium triflate': 'BrC1=CC=C([I+]C2=CC=C(Br)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  'Bis(4-fluorophenyl)iodonium triflate': 'FC1=CC=C([I+]C2=CC=C(F)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  'Bis(4-methoxyphenyl) Selenoxide': 'O=[Se](C1=CC=C(OC)C=C1)C2=CC=C(OC)C=C2',
+  'Bis(4-methylphenyl)iodonium triflate': 'CC1=CC=C([I+]C2=CC=C(C)C=C2)C=C1.O=S([O-])(C(F)(F)F)=O',
+  'Bis(4-nitrophenyl) Carbonate': 'O=C(OC1=CC=C([N+]([O-])=O)C=C1)OC2=CC=C([N+]([O-])=O)C=C2',
+  'Bis(acetato)aqua[(S,S)-4,6-bis(4-isopropyl-2-oxazolin-2-yl)-m-xylene]rhodium': 'CC1=CC(C)=C(C2=N[C@H](CO2)C(C)C)C=C1C3=N[C@@H](C(C)C)CO3.CC([O-])=O.[O-]C(C)=O.[Rh+2].O',
+  'Bis(acetonitrile)palladium(II) Dichloride': 'CC#N.CC#N.[Pd+2].[Cl-].[Cl-]',
+  'Bis(benzonitrile)palladium(II) Dichloride': 'N#CC1=CC=CC=C1.N#CC2=CC=CC=C2.[Pd+2].[Cl-].[Cl-]',
+  'Bis(chloromethyl)dimethylsilane': 'C[Si](CCl)(CCl)C',
+  'Bis(dibenzylideneacetone)palladium(0)': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
+  'Pd(dba)2': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.[Pd]',
+  'Bis(diphenylphosphino)methane': 'P(CP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  'Bis(hexafluoroacetylacetonato)nickel(II) Hydrate': 'O=C(/C=C(C(F)(F)F)\\[O-])C(F)(F)F.[O-]/C(C(F)(F)F)=C\\C(C(F)(F)F)=O.[Ni+2]',
+  'Bis(pentafluorophenyl) Carbonate': 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)OC2=C(F)C(F)=C(F)C(F)=C2F',
+  'Bis(pentafluorophenyl)dimethylsilane': 'C[Si](C1=C(F)C(F)=C(F)C(F)=C1F)(C2=C(F)C(F)=C(F)C(F)=C2F)C',
+  'Bis(pentafluorophenyl)phenylphosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=CC=CC=C3',
+  'Bis(pinacolato)diboron': 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
+  BPin: 'B1(OC(C(O1)(C)C)(C)C)B2OC(C(O2)(C)C)(C)C',
+  'Bis(pyridine)iodonium tetrafluoroborate': '[IH+]C1=NC=CC=C1.F[B-](F)(F)F.C2=NC=CC=C2',
+  'Bis(tert-butylcarbonyloxy)iodobenzene': 'IC1=CC=CC(OC(C(C)(C)C)=O)=C1OC(C(C)(C)C)=O',
+  'Bis(tetrabutylammonium) Dichromate': 'CCCC[N+](CCCC)(CCCC)CCCC.CCCC[N+](CCCC)(CCCC)CCCC.O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O',
+  'Bis(trichlorosilyl)acetylene': 'Cl[Si](C#C[Si](Cl)(Cl)Cl)(Cl)Cl',
+  'Bis(tricyclohexylphosphine)nickel(II) Dichloride': 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Ni+2].[Cl-].[Cl-]',
+  'Bis(tricyclohexylphosphine)palladium(II) Dichloride': 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3.P(C4CCCCC4)(C5CCCCC5)C6CCCCC6.[Pd+2].[Cl-].[Cl-]',
+  'Bis(trifluoro-2,4-pentanedionato)cobalt(II) Hydrate': 'C/C([O-])=C/C(C(F)(F)F)=O.C/C([O-])=C/C(C(F)(F)F)=O.[Co+2]',
+  'Bis(trifluoromethanesulfonyl)imide': 'O=S(C(F)(F)F)(NS(=O)(C(F)(F)F)=O)=O',
+  'Bis(trimethylsilyl) Sulfide': 'C[Si](S[Si](C)(C)C)(C)C',
+  'Bis(trimethylsilyl)acetylene': 'C[Si](C#C[Si](C)(C)C)(C)C',
+  'Bis(trimethylsilyl)bromomethane': 'BrC([Si](C)(C)C)[Si](C)(C)C',
+  'Bis(trimethylsilyl)methane': 'C[Si](C[Si](C)(C)C)(C)C',
+  'Bis(trimethylsilyl)methylamine': 'CN([Si](C)(C)C)[Si](C)(C)C',
+  'Bis(tri-o-tolylphosphine)palladium(II) Dichloride': 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C.CC4=CC=CC=C4P(C5=CC=CC=C5C)C6=CC=CC=C6C.[Pd+2].[Cl-].[Cl-]',
+  'Bis(triphenylphosphine)nickel(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Ni+2].[Cl-].[Cl-]',
+  'Bis(triphenylphosphine)palladium(II) Diacetate': 'CC([O-])=O.CC([O-])=O.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2]',
+  'Bis(triphenylphosphine)palladium(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.[Pd+2].[Cl-].[Cl-]',
+  'Bis(triphenylsilyl) chromate': 'O=[Cr](O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3)(O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=O',
+  'Bis(tri-tert-butylphosphine)palladium(0)': 'CC(P(C(C)(C)C)C(C)(C)C)(C)C.CC(P(C(C)(C)C)C(C)(C)C)(C)C.[Pd]',
+  'Bis[1,2-bis(diphenylphosphino)ethane]palladium(0)': 'P(CCP(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(CCP(C5=CC=CC=C5)C6=CC=CC=C6)(C7=CC=CC=C7)C8=CC=CC=C8.[Pd]',
+  'Bis[2-(diphenylphosphino)phenyl] Ether': 'C1(OC2=CC=CC=C2P(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1P(C5=CC=CC=C5)C6=CC=CC=C6',
+  'Bis[2-(trimethylsilyloxy)ethyl] Ether': 'C[Si](OCCOCCO[Si](C)(C)C)(C)C',
+  'Bis[2-carboxyethylgermanium(IV)] Sesquioxide': 'O=[Ge](CCC(O)=O)O[Ge](CCC(O)=O)=O',
+  'Bis[3-(trimethoxysilyl)propyl]amine': 'CO[Si](CCCNCCC[Si](OC)(OC)OC)(OC)OC',
+  'Bis[di-tert-butyl(4-dimethylaminophenyl)phosphine]palladium(0)': 'CN(C1=CC=C(P(C(C)(C)C)C(C)(C)C)C=C1)C.CN(C2=CC=C(P(C(C)(C)C)C(C)(C)C)C=C2)C.[Pd]',
+  'Bis[tris(2,4-pentanedionato)titanium(IV)] Hexachlorotitanate(IV)': 'Cl[Ti-2](Cl)(Cl)(Cl)(Cl)Cl.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.C/C([O-])=C\\C(C)=O.[Ti+4].[Ti+4]',
+  'BISMUTH HYDROXIDE': '[Bi+3].[OH-].[OH-].[OH-]',
+  'Bismuth Tripotassium Dicitrate': 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[Bi+5].[K+].[K+].[K+]',
+  Bistrifluoroacetamide: 'O=C(C(F)(F)F)NC(C(F)(F)F)=O',
+  'Borane - 2-Methylpyridine Complex': 'CC1=NC=CC=C1.B',
+  'Borane - 5-Ethyl-2-methylpyridine Complex': 'CC1=NC=C(CC)C=C1.B',
+  'Borane - Ammonia Complex': 'B.N',
+  'Borane - Diisopropylamine Complex': 'CC(C)NC(C)C.B',
+  'Borane - Morpholine Complex': 'O1CCNCC1.B',
+  'Borane - Pyridine Complex': 'C1=CN=CC=C1.B',
+  'Borane - Tetrahydrofuran Complex': 'B.C1COCC1',
+  'Borane - tert-Butylamine Complex': 'NC(C)(C)C.B',
+  'Boron Trichloride': 'ClB(Cl)Cl',
+  'Boron Trifluoride': 'FB(F)F',
+  'Boron Trifluoride - Methanol Reagent': 'FB(F)F.CO',
+  'Boron Trifluoride - Propanol Reagent': 'FB(F)F.CCCO',
+  Bromine: 'BrBr',
+  'Bromine - 1,4-Dioxane Complex': 'BrBr.O1CCOCC1',
+  'Bromo[(2,6-pyridinediyl)bis(3-methyl-1-imidazolyl-2-ylidene)]nickel Bromide': 'CN(C=CN12)C1=[Ni-3](Br)=C3N(C)C=CN3C4=CC=CC2=N4.[Br-]',
+  'Bromo[[1,3-bis[(4S,5S)-1-benzoyl-4,5-diphenyl-2-imidazolin-2-yl]benzene]palladium(II)]': 'O=C(N1[C@@H](C2=CC=CC=C2)[C@H](C3=CC=CC=C3)N=C1C4=CC(C5=N[C@@H](C6=CC=CC=C6)[C@H](C7=CC=CC=C7)N5C(C8=CC=CC=C8)=O)=CC=C4)C9=CC=CC=C9.[Pd+]Br',
+  'Bromoacetic Acid': 'O=C(O)CBr',
+  'Bromocholine Bromide': 'BrCC[N+](C)(C)C.[Br-]',
+  'Bromodicarbonyl[bis[2-(diisopropylphosphino)ethyl]amine]manganese(I)': '[C]=O.[C]=O.CC(P(CCNCCP(C(C)C)C(C)C)C(C)C)C.[Mn]Br',
+  'Bromodimethylsulfonium Bromide': 'C[S+](Br)C.[Br-]',
+  Bromotrichloromethane: 'ClC(Cl)(Br)Cl',
+  Bromotrimethylsilane: 'Br[Si](C)(C)C',
+  'Bromotripyrrolidinophosphonium Hexafluorophosphate': 'Br[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
+  'Bromotris(dimethylamino)phosphonium Hexafluorophosphate': 'CN([P+](N(C)C)(Br)N(C)C)C.F[P-](F)(F)(F)(F)F',
+  'Butylboronic Acid': 'CCCCB(O)O',
+  Butyllithium: 'CCCC[Li]',
+  'Butylmagnesium Bromide': 'Br[Mg]CCCC',
+  'Butylmagnesium Chloride': 'Cl[Mg]CCCC',
+  'Butyltin Trichloride': 'CCCC[Sn](Cl)(Cl)Cl',
+  'Cacodylic Acid': 'O=[As](C)(C)O',
+  'CADMIUM HYDROXIDE': '[Cd+2].[OH-].[OH-]',
+  'CALCIUM BROMIDE HYDRATE': '[H]O[H].[Ca+2].[Br-].[Br-]',
+  'calcium carbonate': '[O-]C([O-])=O.[Ca+2]',
+  'calcium chloride': '[Ca+2].[Cl-].[Cl-]',
+  'calcium hydride': '[Ca+2].[H-].[H-]',
+  'Calcium peroxide': '[O-][O-].[Ca+2]',
+  'calcium sulfate': 'O=S([O-])([O-])=O.[Ca+2]',
+  'Calcium L-Threonate': 'O[C@H]([C@H](CO)O)C([O-])=O.O[C@H]([C@H](CO)O)C([O-])=O.[Ca+2]',
+  'Carbamylcholine Chloride': 'C[N+](C)(C)CCOC(N)=O.[Cl-]',
+  'Carbon Tetrabromide': 'BrC(Br)(Br)Br',
+  'carbon tetrachloride': 'ClC(Cl)(Cl)Cl',
+  'Carbon Tetraiodide': 'IC(I)(I)I',
+  'carbon tribromide': 'BrC(Br)([H])Br',
+  'Carbonyl(dihydrido)tris(triphenylphosphine)ruthenium(II)': '[C]=O.[H][Ru][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  'Carbonylchlorobis(triphenylphosphine)iridium(I)': '[C]=O.[Ir]Cl.P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6',
+  'Carbonylhydridotris(triphenylphosphine)iridium(I)': '[C]=O.[Ir][H].P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9',
+  Cerium: '[Ce]',
+  'Cerium tetrahydroxide': '[Ce+4].[OH-].[OH-].[OH-].[OH-]',
+  'cerium trihydroxide': '[Ce+3].[OH-].[OH-].[OH-]',
+  'Cerium(III) Acetate Hydrate': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.[H]O[H].[Ce+3]',
+  'CERIUM(III) CHLORIDE HEPTAHYDRATE': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ce+3].[Cl-].[Cl-].[Cl-]',
+  'Cerium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ce+3]',
+  'Cesium Acetate': 'CC([O-])=O.[Cs+]',
+  'cesium bromide': '[Cs+].[Br-]',
+  'Cesium Carbonate': '[O-]C([O-])=O.[Cs+].[Cs+]',
+  'Cesium Fluoride': '[Cs+].[F-]',
+  'Cesium hydroxide': '[Cs+].[OH-]',
+  'Cesium Pivalate': 'CC(C)(C)C([O-])=O.[Cs+]',
+  'cesium sulfate': 'O=S([O-])([O-])=O.[Cs+].[Cs+]',
+  'Chloramine B Hydrate': 'O=S([N-]Cl)(C1=CC=CC=C1)=O.O.[Na+]',
+  'Chloramine T Trihydrate': 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[H]O[H].[H]O[H].[H]O[H].[Na+]',
+  Chloranil: 'O=C(C(Cl)=C1Cl)C(Cl)=C(Cl)C1=O',
+  'Chloro(1,5-cyclooctadiene)iridium(I)': '[Ir]Cl.C1=C\\CC/C=C\\CC/1',
+  'Chloro(1,5-cyclooctadiene)rhodium(I)': '[Rh]Cl.C1=C\\CC/C=C\\CC/1',
+  'Chloro(1,5-hexadiene)rhodium(I)': 'C=CCCC=C.[Rh]Cl',
+  'Chloro(2-dicyclohexylphosphino-2′,4′,6′-triisopropyl-1,1′-biphenyl)[2-(2′-amino-1,1′-biphenyl)]palladium(II)': 'Cl[Pd]1(C2=CC=CC=C2C3=CC=CC=C3N1)P(C4CCCCC4)(C5=CC=CC=C5C6=C(C(C)C)C=C(C(C)C)C=C6C(C)C)C7CCCCC7',
+  'Chloro(3-chloropropyl)dimethylsilane': 'C[Si](CCCCl)(Cl)C',
+  'Chloro(hexyl)dimethylsilane': 'C[Si](CCCCCC)(Cl)C',
+  'Chloro(methyl)(phenyl)(vinyl)silane': 'C=C[Si](C)(Cl)C1=CC=CC=C1',
+  'Chloro(pentamethylcyclopentadienyl)ruthenium(II)': 'CC1=C([Ru]Cl)C(C)(C)C(C)=C1C',
+  'Chloro[(tri-tert-butylphosphine)-2-(2-aminobiphenyl)]palladium(II)': 'NC1([Pd+2])=CC=CC=C1C2=CC=CC=C2.CC(P(C(C)(C)C)(Cl)C(C)(C)C)(C)C',
+  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](acetanilide)palladium(II)]': 'CC(NC1=CC=CC=C1)=O.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethyl-3,5-dimethoxybenzylamine)palladium(II)]': 'COC1=CC(OC)=CC(CN(C)C)=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  'Chloro[[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene](N,N-dimethylbenzylamine)palladium(II)]': 'CN(C)CC1=CC=CC=C1.CC(C2=C(N(C=CN3C4=C(C(C)C)C=CC=C4C(C)C)C3=[Pd-]Cl)C(C(C)C)=CC=C2)C',
+  'Chloro[1,3-bis(2,6-diisopropylphenyl)imidazol-2-ylidene]copper(I)': 'CC(C1=C(N(C=CN2C3=C(C(C)C)C=CC=C3C(C)C)C2=[Cu-2]Cl)C(C(C)C)=CC=C1)C',
+  'Chloroacetic Acid': 'O=C(O)CCl',
+  'Chlorobis(cyclooctene)iridium(I)': '[Ir]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
+  'Chlorobis(cyclooctene)rhodium(I)': '[Rh]Cl.C1=C\\CCCCCC/1.C2=C\\CCCCCC/2',
+  'Chlorobis(ethylene)iridium(I)': 'Cl[Ir-4]12(CC2)CC1',
+  'Chlorobis(ethylene)rhodium(I)': 'Cl[Rh-4]12(CC2)CC1',
+  'Chlorobis[dicyclohexyl(phenyl)phosphino](o-tolyl)nickel(II)': 'CC1=CC=CC=C1[Ni-2](P(C2CCCCC2)(C3CCCCC3)C4=CC=CC=C4)(Cl)P(C5CCCCC5)(C6CCCCC6)C7=CC=CC=C7',
+  'Chlorocholine Chloride': 'ClCC[N+](C)(C)C.[Cl-]',
+  Chlorodicyclohexylphosphine: 'ClP(C1CCCCC1)C2CCCCC2',
+  'Chlorodifluoroacetic Acid': 'O=C(O)C(F)(Cl)F',
+  Chlorodiisopropylphosphine: 'CC(P(Cl)C(C)C)C',
+  Chlorodimethylvinylsilane: 'C=C[Si](C)(Cl)C',
+  Chlorodiphenylphosphine: 'ClP(C1=CC=CC=C1)C2=CC=CC=C2',
+  Chloroform: 'ClC(Cl)Cl',
+  Chloromethyldimethylphenylsilane: 'C[Si](C)(CCl)C1=CC=CC=C1',
   "Chloro-N,N,N',N'-tetramethylformamidinium Hexafluorophosphate": 'C[N+](C)=C(Cl)N(C)C.F[P-](F)(F)(F)(F)F',
   "Chloronitrosyl[N,N'-bis(3,5-di-tert-butylsalicylidene)-1,1,2,2-tetramethylethylenediaminato]ruthenium(IV)": '[O-]C1=C(/C=N/C(C)(C)C(C)(C)/N=C/C2=C([O-])C(C(C)(C)C)=CC(C(C)(C)C)=C2)C=C(C(C)(C)C)C=C1C(C)(C)C.[N-]=O.[Ru+4].[Cl-]',
-  "Chloropentamethyldisilane": 'C[Si](C)(C)[Si](C)(Cl)C',
-  "Chlorotriethoxysilane": 'CCO[Si](OCC)(Cl)OCC',
-  "Chlorotripyrrolidinophosphonium Hexafluorophosphate": 'Cl[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
-  "Choline": 'OCC[N+](C)(C)C',
-  "Choline Chloride": 'OCC[N+](C)(C)C.[Cl-]',
-  "Choline hydroxide": 'OCC[N+](C)(C)C.[OH-]',
-  "Chromium": '[Cr]',
-  "CHROMIUM (III) HYDROXIDE N-HYDRATE": '[OH-].[Cr+3].[OH-].[OH-]',
-  "Chromium(VI) oxide": '[Cr+6].[O-2].[O-2].[O-2]',
-  "Cinchonidine": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
-  "Cinchonidine Dihydrochloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]Cl',
-  "Cinchonidine Sulfate Dihydrate": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
-  "Cinchonine": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
-  "Cinchonine Hydrochloride Hydrate": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]O[H]',
-  "Citric Acid": 'OC(C(O)=O)(CC(O)=O)CC(O)=O',
-  "Cobalt": '[Co]',
-  "Cobalt hydroxide": '[Co+2].[OH-].[OH-]',
-  "cobalt trihydroxide": '[Co+3].[OH-].[OH-].[OH-]',
-  "Copper": '[Cu]',
-  "copper (I) bromide": '[Cu+].[Br-]',
-  "copper (I) chloride": '[Cu+].[Cl-]',
-  "copper (II) bromide": '[Cu+2].[Br-].[Br-]',
-  "copper (II) chloride": '[Cu+2].[Cl-].[Cl-]',
-  "copper (II) iodide": '[Cu+2].[I-].[I-]',
-  "copper fluoride": '[Cu+2].[F-].[F-]',
-  "Copper sulfate": 'O=S([O-])([O-])=O.[Cu+2]',
-  "Copper(I) 2-Thiophenecarboxylate": 'O=C(C1=CC=CS1)[O-].[Cu+]',
-  "Copper(I) Acetate": 'CC([O-])=O.[Cu+]',
-  "Copper(I) Cyanide": '[C-]#N.[Cu+]',
-  "Copper(I) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.[Cu+]',
-  "Copper(I) Trifluoromethanethiolate": '[S-]C(F)(F)F.[Cu+]',
-  "copper(I)bromide DMS-complex": 'CSC.[Cu+].[Br-]',
-  "Copper(I)iodide": '[Cu+].[I-]',
-  "Copper(II) Acetate Monohydrate": 'CC([O-])=O.CC([O-])=O.[H]O[H].[Cu+2]',
-  "Copper(II) Tetrafluoroborate": 'F[B-](F)(F)F.F[B-](F)(F)F.[Cu+2]',
-  "Copper(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Cu+2]',
-  "Croconic Acid": 'OC1=C(C(C(C1=O)=O)=O)O',
-  "Cumene Hydroperoxide": 'CC(C1=CC=C(OO)C=C1)C',
-  "Cupric hydroxide": '[Cu+2].[OH-].[OH-]',
-  "Cyanomethylenetributylphosphorane": 'CCCCP(CCCC)(CCCC)=CC#N',
-  "Cyanuric Chloride": 'ClC1=NC(Cl)=NC(Cl)=N1',
-  "cyclohexane": 'C1CCCCC1',
-  "Cyclohexyl(dimethoxy)methylsilane": 'C[Si](OC)(C1CCCCC1)OC',
-  "Cyclohexylboronic Acid": 'OB(C1CCCCC1)O',
-  "Cyclohexyldiphenylphosphine": 'P(C1=CC=CC=C1)(C2CCCCC2)C3=CC=CC=C3',
-  "Cyclohexylmagnesium Bromide": 'Br[Mg]C1CCCCC1',
-  "Cyclohexyltrimethylammonium Bis(trifluoromethanesulfonyl)imide": 'C[N+](C)(C)C1CCCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "Cyclooctene": 'C1=C\\CCCCCC/1',
-  "Cyclopentadienyl Thallium": '[Tl]C1=CC=CC1',
-  "Cyclopentadienylbis(triphenylphosphine)ruthenium(II) Chloride": '[Ru+]C1=CC=CC1.P(C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(C5=CC=CC=C5)(C6=CC=CC=C6)C7=CC=CC=C7.[Cl-]',
-  "Cyclopentadienyliron Dicarbonyl Dimer": '[C]=O.[C]=O.[Fe]C1=CC=CC1',
-  "Cyclopentadienyltitanium(IV) Trichloride": '[Ti+3]C1=CC=CC1.[Cl-].[Cl-].[Cl-]',
-  "cyclopentane": 'C1CCCC1',
-  "Cyclopentylboronic Acid": 'OB(C1CCCC1)O',
-  "Cyclopentylmagnesium Bromide": 'Br[Mg]C1CCCC1',
-  "Cyclopentylmethylether": 'COC1CCCC1',
-  "Cyclopropylmagnesium Bromide": 'Br[Mg]C1CC1',
-  "D-(-)-Leucinol": 'N[C@H](CC(C)C)CO',
-  "D-(+)-Threonine": 'N[C@H]([C@@H](O)C)C(O)=O',
-  "D-Alanine": 'N[C@H](C)C(O)=O',
-  "Decamethylcyclopentasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Decamethyltetrasiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  "Decyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCC)OCC',
-  "Decyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCC)OC',
-  "Decyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCC)C.[Br-]',
-  "Decyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCC)C.[Cl-]',
-  "Dehydroacetic Acid": 'CC(C(C(C=C(O1)C)=O)C1=O)=O',
-  "Dess-Martin periodinane (DMP)": 'O=C(O1)C2=CC=CC=C2I1(OC(C)=O)(OC(C)=O)OC(C)=O',
-  "Di(N-succinimidyl) Carbonate": 'O=C(ON1C(CCC1=O)=O)ON2C(CCC2=O)=O',
-  "Di-1-adamantylphosphine": 'C12CC3(PC45CC6CC(C5)CC(C6)C4)CC(C2)CC(C3)C1',
-  "Di-2-pyridyl Carbonate": 'O=C(OC1=NC=CC=C1)OC2=NC=CC=C2',
-  "Diacetoxydimethylsilane": 'C[Si](OC(C)=O)(OC(C)=O)C',
-  "Diallyldimethylammonium Chloride": 'C[N+](CC=C)(CC=C)C.[Cl-]',
-  "Diallyldimethylsilane": 'C[Si](CC=C)(CC=C)C',
-  "Dibenzo[a,e]cyclooctene": 'C12=CC=CC=C1/C=C\\C3=CC=CC=C3/C=C\\2',
-  "Dibenzyl L-Tartrate": 'O[C@H]([C@H](C(OCC1=CC=CC=C1)=O)O)C(OCC2=CC=CC=C2)=O',
-  "Dibromoisocyanuric Acid": 'O=C(N(Br)C(N1)=O)N(Br)C1=O',
-  "Dibutyltin Bis(trifluoromethanesulfonate)": 'CCCC[Sn+2]CCCC.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O',
-  "Dibutyltin Diacetate": 'CCCC[Sn+2]CCCC.CC([O-])=O.CC([O-])=O',
-  "Dibutyltin Dichloride": 'CCCC[Sn](Cl)(Cl)CCCC',
-  "Dibutyltin Dilaurate": 'CCCC[Sn+2]CCCC.CCCCCCCCCCCC([O-])=O.CCCCCCCCCCCC([O-])=O',
-  "Dibutyltin Oxide": 'CCCC[Sn](CCCC)=O',
-  "Dichloramine B": 'O=S(N(Cl)Cl)(C1=CC=CC=C1)=O',
-  "Dichloramine T": 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[Na+]',
-  "Dichloro(1,10-phenanthroline)copper(II)": 'Cl[Cu]Cl.C12=CC=C3C=CC=NC3=C1N=CC=C2',
-  "Dichloro(diethylamino)phosphine": 'CCN(P(Cl)Cl)CC',
-  "Dichloro(methyl)(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](Cl)(Cl)C',
-  "Dichloro(methyl)-n-octylsilane": 'CCCCCCCC[Si](Cl)(Cl)C',
+  Chloropentamethyldisilane: 'C[Si](C)(C)[Si](C)(Cl)C',
+  Chlorotriethoxysilane: 'CCO[Si](OCC)(Cl)OCC',
+  'Chlorotripyrrolidinophosphonium Hexafluorophosphate': 'Cl[P+](N1CCCC1)(N2CCCC2)N3CCCC3.F[P-](F)(F)(F)(F)F',
+  Choline: 'OCC[N+](C)(C)C',
+  'Choline Chloride': 'OCC[N+](C)(C)C.[Cl-]',
+  'Choline hydroxide': 'OCC[N+](C)(C)C.[OH-]',
+  Chromium: '[Cr]',
+  'CHROMIUM (III) HYDROXIDE N-HYDRATE': '[OH-].[Cr+3].[OH-].[OH-]',
+  'Chromium(VI) oxide': '[Cr+6].[O-2].[O-2].[O-2]',
+  Cinchonidine: 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
+  'Cinchonidine Dihydrochloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]Cl',
+  'Cinchonidine Sulfate Dihydrate': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
+  Cinchonine: 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34',
+  'Cinchonine Hydrochloride Hydrate': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=CC=C34.[H]Cl.[H]O[H]',
+  'Citric Acid': 'OC(C(O)=O)(CC(O)=O)CC(O)=O',
+  Cobalt: '[Co]',
+  'Cobalt hydroxide': '[Co+2].[OH-].[OH-]',
+  'cobalt trihydroxide': '[Co+3].[OH-].[OH-].[OH-]',
+  Copper: '[Cu]',
+  'copper (I) bromide': '[Cu+].[Br-]',
+  'copper (I) chloride': '[Cu+].[Cl-]',
+  'copper (II) bromide': '[Cu+2].[Br-].[Br-]',
+  'copper (II) chloride': '[Cu+2].[Cl-].[Cl-]',
+  'copper (II) iodide': '[Cu+2].[I-].[I-]',
+  'copper fluoride': '[Cu+2].[F-].[F-]',
+  'Copper sulfate': 'O=S([O-])([O-])=O.[Cu+2]',
+  'Copper(I) 2-Thiophenecarboxylate': 'O=C(C1=CC=CS1)[O-].[Cu+]',
+  'Copper(I) Acetate': 'CC([O-])=O.[Cu+]',
+  'Copper(I) Cyanide': '[C-]#N.[Cu+]',
+  'Copper(I) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.[Cu+]',
+  'Copper(I) Trifluoromethanethiolate': '[S-]C(F)(F)F.[Cu+]',
+  'copper(I)bromide DMS-complex': 'CSC.[Cu+].[Br-]',
+  'Copper(I)iodide': '[Cu+].[I-]',
+  'Copper(II) Acetate Monohydrate': 'CC([O-])=O.CC([O-])=O.[H]O[H].[Cu+2]',
+  'Copper(II) Tetrafluoroborate': 'F[B-](F)(F)F.F[B-](F)(F)F.[Cu+2]',
+  'Copper(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Cu+2]',
+  'Croconic Acid': 'OC1=C(C(C(C1=O)=O)=O)O',
+  'Cumene Hydroperoxide': 'CC(C1=CC=C(OO)C=C1)C',
+  'Cupric hydroxide': '[Cu+2].[OH-].[OH-]',
+  Cyanomethylenetributylphosphorane: 'CCCCP(CCCC)(CCCC)=CC#N',
+  'Cyanuric Chloride': 'ClC1=NC(Cl)=NC(Cl)=N1',
+  cyclohexane: 'C1CCCCC1',
+  'Cyclohexyl(dimethoxy)methylsilane': 'C[Si](OC)(C1CCCCC1)OC',
+  'Cyclohexylboronic Acid': 'OB(C1CCCCC1)O',
+  Cyclohexyldiphenylphosphine: 'P(C1=CC=CC=C1)(C2CCCCC2)C3=CC=CC=C3',
+  'Cyclohexylmagnesium Bromide': 'Br[Mg]C1CCCCC1',
+  'Cyclohexyltrimethylammonium Bis(trifluoromethanesulfonyl)imide': 'C[N+](C)(C)C1CCCCC1.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  Cyclooctene: 'C1=C\\CCCCCC/1',
+  'Cyclopentadienyl Thallium': '[Tl]C1=CC=CC1',
+  'Cyclopentadienylbis(triphenylphosphine)ruthenium(II) Chloride': '[Ru+]C1=CC=CC1.P(C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4.P(C5=CC=CC=C5)(C6=CC=CC=C6)C7=CC=CC=C7.[Cl-]',
+  'Cyclopentadienyliron Dicarbonyl Dimer': '[C]=O.[C]=O.[Fe]C1=CC=CC1',
+  'Cyclopentadienyltitanium(IV) Trichloride': '[Ti+3]C1=CC=CC1.[Cl-].[Cl-].[Cl-]',
+  cyclopentane: 'C1CCCC1',
+  'Cyclopentylboronic Acid': 'OB(C1CCCC1)O',
+  'Cyclopentylmagnesium Bromide': 'Br[Mg]C1CCCC1',
+  Cyclopentylmethylether: 'COC1CCCC1',
+  'Cyclopropylmagnesium Bromide': 'Br[Mg]C1CC1',
+  'D-(-)-Leucinol': 'N[C@H](CC(C)C)CO',
+  'D-(+)-Threonine': 'N[C@H]([C@@H](O)C)C(O)=O',
+  'D-Alanine': 'N[C@H](C)C(O)=O',
+  Decamethylcyclopentasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Decamethyltetrasiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  Decyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCC)OCC',
+  Decyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCC)OC',
+  'Decyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCC)C.[Br-]',
+  'Decyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCC)C.[Cl-]',
+  'Dehydroacetic Acid': 'CC(C(C(C=C(O1)C)=O)C1=O)=O',
+  'Dess-Martin periodinane (DMP)': 'O=C(O1)C2=CC=CC=C2I1(OC(C)=O)(OC(C)=O)OC(C)=O',
+  'Di(N-succinimidyl) Carbonate': 'O=C(ON1C(CCC1=O)=O)ON2C(CCC2=O)=O',
+  'Di-1-adamantylphosphine': 'C12CC3(PC45CC6CC(C5)CC(C6)C4)CC(C2)CC(C3)C1',
+  'Di-2-pyridyl Carbonate': 'O=C(OC1=NC=CC=C1)OC2=NC=CC=C2',
+  Diacetoxydimethylsilane: 'C[Si](OC(C)=O)(OC(C)=O)C',
+  'Diallyldimethylammonium Chloride': 'C[N+](CC=C)(CC=C)C.[Cl-]',
+  Diallyldimethylsilane: 'C[Si](CC=C)(CC=C)C',
+  'Dibenzo[a,e]cyclooctene': 'C12=CC=CC=C1/C=C\\C3=CC=CC=C3/C=C\\2',
+  'Dibenzyl L-Tartrate': 'O[C@H]([C@H](C(OCC1=CC=CC=C1)=O)O)C(OCC2=CC=CC=C2)=O',
+  'Dibromoisocyanuric Acid': 'O=C(N(Br)C(N1)=O)N(Br)C1=O',
+  'Dibutyltin Bis(trifluoromethanesulfonate)': 'CCCC[Sn+2]CCCC.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O',
+  'Dibutyltin Diacetate': 'CCCC[Sn+2]CCCC.CC([O-])=O.CC([O-])=O',
+  'Dibutyltin Dichloride': 'CCCC[Sn](Cl)(Cl)CCCC',
+  'Dibutyltin Dilaurate': 'CCCC[Sn+2]CCCC.CCCCCCCCCCCC([O-])=O.CCCCCCCCCCCC([O-])=O',
+  'Dibutyltin Oxide': 'CCCC[Sn](CCCC)=O',
+  'Dichloramine B': 'O=S(N(Cl)Cl)(C1=CC=CC=C1)=O',
+  'Dichloramine T': 'CC1=CC=C(S(=O)([N-]Cl)=O)C=C1.[Na+]',
+  'Dichloro(1,10-phenanthroline)copper(II)': 'Cl[Cu]Cl.C12=CC=C3C=CC=NC3=C1N=CC=C2',
+  'Dichloro(diethylamino)phosphine': 'CCN(P(Cl)Cl)CC',
+  'Dichloro(methyl)(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](Cl)(Cl)C',
+  'Dichloro(methyl)-n-octylsilane': 'CCCCCCCC[Si](Cl)(Cl)C',
   "Dichloro(N,N,N',N'-tetramethylethylenediamine)zinc(II)": 'CN(C)CCN(C)C.Cl[Zn]Cl',
-  "Dichloro(p-cymene)ruthenium(II)": 'CC1=CC=C(C(C)C)C=C1.Cl[Ru]Cl',
-  "Dichloro[9,9-dimethyl-4,5-bis(diphenylphosphino)xanthene]palladium(II)": 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2.Cl[Pd]Cl',
-  "Dichloroacetic Acid": 'O=C(O)C(Cl)Cl',
-  "Dichlorocyclohexylmethylsilane": 'C[Si](Cl)(Cl)C1CCCCC1',
-  "Dichlorodecylmethylsilane": 'C[Si](Cl)(Cl)CCCCCCCCCC',
-  "Dichlorododecylmethylsilane": 'C[Si](Cl)(Cl)CCCCCCCCCCCC',
-  "Dichlorohexylmethylsilane": 'C[Si](Cl)(Cl)CCCCCC',
-  "dichloromethane": 'ClCCl',
-  "Dichloromethylvinylsilane": 'C=C[Si](Cl)(Cl)C',
-  "Dichlorophenylphosphine": 'ClP(Cl)C1=CC=CC=C1',
-  "Dichlorotitanium Diisopropoxide": 'Cl[Ti+2]Cl.CC([O-])C.CC([O-])C',
-  "Dicobalt Octacarbonyl": '[CH-]=O.[CH-]=O.[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[Co].[Co+2]',
-  "Dicumyl peroxide": 'CC(OOC(C)(C1=CC=CC=C1)C)(C2=CC=CC=C2)C',
-  "Dicyclohexyl(2,4,6-triisopropylphenyl)phosphine": 'CC(C1=C(P(C2CCCCC2)C3CCCCC3)C(C(C)C)=CC(C(C)C)=C1)C',
-  "Dicyclohexyl(trifluoromethanesulfonyloxy)borane": 'O=S(OB(C1CCCCC1)C2CCCCC2)(C(F)(F)F)=O',
-  "Dicyclohexylamine Borane": 'C1(NC2CCCCC2)CCCCC1.B',
-  "Dicyclohexylphenylphosphine": 'P(C1CCCCC1)(C2CCCCC2)C3=CC=CC=C3',
-  "Dicyclopentadiene": 'C12C=CCC1C3C=CC2C3',
-  "Dicyclopentyl(dimethoxy)silane": 'CO[Si](C1CCCC1)(C2CCCC2)OC',
-  "Didecyldimethylammonium Bromide": 'C[N+](CCCCCCCCCC)(CCCCCCCCCC)C.[Br-]',
-  "Didodecyldimethylammonium Chloride": 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Cl-]',
-  "Diethoxy(methyl)phenylsilane": 'C[Si](OCC)(OCC)C1=CC=CC=C1',
-  "Diethoxydimethylsilane": 'C[Si](OCC)(OCC)C',
-  "Diethoxydiphenylsilane": 'CCO[Si](C1=CC=CC=C1)(OCC)C2=CC=CC=C2',
-  "Diethoxymethylsilane": 'C[SiH](OCC)OCC',
-  "Diethoxymethylvinylsilane": 'C=C[Si](OCC)(OCC)C',
-  "Diethyl (Bromodifluoromethyl)phosphonate": 'FC(Br)(P(OCC)(OCC)=O)F',
-  "Diethyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate": 'O=C(C1=C(C)NC(C)=C(C(OCC)=O)C1)OCC',
+  'Dichloro(p-cymene)ruthenium(II)': 'CC1=CC=C(C(C)C)C=C1.Cl[Ru]Cl',
+  'Dichloro[9,9-dimethyl-4,5-bis(diphenylphosphino)xanthene]palladium(II)': 'CC1(C)C2=C(OC3=C1C=CC=C3P(C4=CC=CC=C4)C5=CC=CC=C5)C(P(C6=CC=CC=C6)C7=CC=CC=C7)=CC=C2.Cl[Pd]Cl',
+  'Dichloroacetic Acid': 'O=C(O)C(Cl)Cl',
+  Dichlorocyclohexylmethylsilane: 'C[Si](Cl)(Cl)C1CCCCC1',
+  Dichlorodecylmethylsilane: 'C[Si](Cl)(Cl)CCCCCCCCCC',
+  Dichlorododecylmethylsilane: 'C[Si](Cl)(Cl)CCCCCCCCCCCC',
+  Dichlorohexylmethylsilane: 'C[Si](Cl)(Cl)CCCCCC',
+  dichloromethane: 'ClCCl',
+  Dichloromethylvinylsilane: 'C=C[Si](Cl)(Cl)C',
+  Dichlorophenylphosphine: 'ClP(Cl)C1=CC=CC=C1',
+  'Dichlorotitanium Diisopropoxide': 'Cl[Ti+2]Cl.CC([O-])C.CC([O-])C',
+  'Dicobalt Octacarbonyl': '[CH-]=O.[CH-]=O.[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[C-]#[O+].[Co].[Co+2]',
+  'Dicumyl peroxide': 'CC(OOC(C)(C1=CC=CC=C1)C)(C2=CC=CC=C2)C',
+  'Dicyclohexyl(2,4,6-triisopropylphenyl)phosphine': 'CC(C1=C(P(C2CCCCC2)C3CCCCC3)C(C(C)C)=CC(C(C)C)=C1)C',
+  'Dicyclohexyl(trifluoromethanesulfonyloxy)borane': 'O=S(OB(C1CCCCC1)C2CCCCC2)(C(F)(F)F)=O',
+  'Dicyclohexylamine Borane': 'C1(NC2CCCCC2)CCCCC1.B',
+  Dicyclohexylphenylphosphine: 'P(C1CCCCC1)(C2CCCCC2)C3=CC=CC=C3',
+  Dicyclopentadiene: 'C12C=CCC1C3C=CC2C3',
+  'Dicyclopentyl(dimethoxy)silane': 'CO[Si](C1CCCC1)(C2CCCC2)OC',
+  'Didecyldimethylammonium Bromide': 'C[N+](CCCCCCCCCC)(CCCCCCCCCC)C.[Br-]',
+  'Didodecyldimethylammonium Chloride': 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Cl-]',
+  'Diethoxy(methyl)phenylsilane': 'C[Si](OCC)(OCC)C1=CC=CC=C1',
+  Diethoxydimethylsilane: 'C[Si](OCC)(OCC)C',
+  Diethoxydiphenylsilane: 'CCO[Si](C1=CC=CC=C1)(OCC)C2=CC=CC=C2',
+  Diethoxymethylsilane: 'C[SiH](OCC)OCC',
+  Diethoxymethylvinylsilane: 'C=C[Si](OCC)(OCC)C',
+  'Diethyl (Bromodifluoromethyl)phosphonate': 'FC(Br)(P(OCC)(OCC)=O)F',
+  'Diethyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate': 'O=C(C1=C(C)NC(C)=C(C(OCC)=O)C1)OCC',
   "Diethyl 2,2':6',2''-Terpyridine-4'-phosphonate": 'O=P(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)(OCC)OCC',
-  "Diethyl Cyanophosphonate": 'N#CP(OCC)(OCC)=O',
-  "diethyl ether": 'CCOCC',
-  "Et2O": 'CCOCC',
-  "Diethyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OCC)=O)O)C(OCC)=O',
-  "Diethyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OCC)=O)O)C(OCC)=O',
-  "Diethyl(2-methoxyethyl)methylammonium Bis(fluorosulfonyl)imide": 'FC(F)(F)S(=O)([N-]S(=O)(C(F)(F)F)=O)=O.C[N+](CC)(CC)CCOC',
-  "Diethyl(isopropyl)silanol": 'O[Si](CC)(CC)C(C)C',
-  "Diethylamine": 'CCNCC',
-  "NEt2": 'CCNCC',
-  "Diethyldimethylammonium hydroxide": 'C[N+](CC)(CC)C.[OH-]',
-  "Diethylenetriamine": 'NCCNCCN',
-  "Diethylphenylphosphine": 'CCP(CC)C1=CC=CC=C1',
-  "Difluoroacetic Acid": 'O=C(O)C(F)F',
-  "Difluoroacetic Anhydride": 'O=C(OC(C(F)F)=O)C(F)F',
-  "Difluoromethyl 2-Pyridyl Sulfone": 'O=S(C1=NC=CC=C1)(C(F)F)=O',
-  "Difluoromethyl Phenyl Sulfide": 'FC(SC1=CC=CC=C1)F',
-  "Difluoromethyl Phenyl Sulfone": 'O=S(C1=CC=CC=C1)(C(F)F)=O',
-  "Dihydrogen hexahydroxyplatinate": 'O[Pt-2](O)(O)(O)(O)O.[H+].[H+]',
-  "Diisobutyldimethoxysilane": 'CO[Si](CC(C)C)(CC(C)C)OC',
-  "Diisopropyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
-  "Diisopropyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
-  "Diisopropylamine": 'CC(NC(C)C)C',
-  "DIPA": 'CC(NC(C)C)C',
-  "Dilauryldimethylammonium Bromide": 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Br-]',
-  "Dilithium Tetrachlorocopper(II)": 'Cl[Cu-](Cl)(Cl)Cl.Cl[Cu-](Cl)(Cl)Cl.[Li+].[Li+]',
-  "Dimesitylammonium Pentafluorobenzenesulfonate": 'CC1=CC(C)=CC(C)=C1[NH2+]C2=C(C)C=C(C)C=C2C.O=S(C3=C(F)C(F)=C(F)C(F)=C3F)([O-])=O',
-  "Dimesitylfluoroborane": 'CC1=CC(C)=CC(C)=C1B(F)C2=C(C)C=C(C)C=C2C',
-  "Dimethoxy(methyl)(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](OC)(OC)C',
-  "Dimethoxy(methyl)silane": 'C[SiH](OC)OC',
-  "Dimethoxydimethylsilane": 'C[Si](OC)(OC)C',
-  "Dimethoxydiphenylsilane": 'CO[Si](C1=CC=CC=C1)(OC)C2=CC=CC=C2',
-  "Dimethoxydi-p-tolylsilane": 'CC1=CC=C([Si](OC)(OC)C2=CC=C(C)C=C2)C=C1',
-  "Dimethoxymethylvinylsilane": 'C=C[Si](OC)(OC)C',
+  'Diethyl Cyanophosphonate': 'N#CP(OCC)(OCC)=O',
+  'diethyl ether': 'CCOCC',
+  Et2O: 'CCOCC',
+  'Diethyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OCC)=O)O)C(OCC)=O',
+  'Diethyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OCC)=O)O)C(OCC)=O',
+  'Diethyl(2-methoxyethyl)methylammonium Bis(fluorosulfonyl)imide': 'FC(F)(F)S(=O)([N-]S(=O)(C(F)(F)F)=O)=O.C[N+](CC)(CC)CCOC',
+  'Diethyl(isopropyl)silanol': 'O[Si](CC)(CC)C(C)C',
+  Diethylamine: 'CCNCC',
+  NEt2: 'CCNCC',
+  'Diethyldimethylammonium hydroxide': 'C[N+](CC)(CC)C.[OH-]',
+  Diethylenetriamine: 'NCCNCCN',
+  Diethylphenylphosphine: 'CCP(CC)C1=CC=CC=C1',
+  'Difluoroacetic Acid': 'O=C(O)C(F)F',
+  'Difluoroacetic Anhydride': 'O=C(OC(C(F)F)=O)C(F)F',
+  'Difluoromethyl 2-Pyridyl Sulfone': 'O=S(C1=NC=CC=C1)(C(F)F)=O',
+  'Difluoromethyl Phenyl Sulfide': 'FC(SC1=CC=CC=C1)F',
+  'Difluoromethyl Phenyl Sulfone': 'O=S(C1=CC=CC=C1)(C(F)F)=O',
+  'Dihydrogen hexahydroxyplatinate': 'O[Pt-2](O)(O)(O)(O)O.[H+].[H+]',
+  Diisobutyldimethoxysilane: 'CO[Si](CC(C)C)(CC(C)C)OC',
+  'Diisopropyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
+  'Diisopropyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC(C)C)=O)O)C(OC(C)C)=O',
+  Diisopropylamine: 'CC(NC(C)C)C',
+  DIPA: 'CC(NC(C)C)C',
+  'Dilauryldimethylammonium Bromide': 'C[N+](CCCCCCCCCCCC)(CCCCCCCCCCCC)C.[Br-]',
+  'Dilithium Tetrachlorocopper(II)': 'Cl[Cu-](Cl)(Cl)Cl.Cl[Cu-](Cl)(Cl)Cl.[Li+].[Li+]',
+  'Dimesitylammonium Pentafluorobenzenesulfonate': 'CC1=CC(C)=CC(C)=C1[NH2+]C2=C(C)C=C(C)C=C2C.O=S(C3=C(F)C(F)=C(F)C(F)=C3F)([O-])=O',
+  Dimesitylfluoroborane: 'CC1=CC(C)=CC(C)=C1B(F)C2=C(C)C=C(C)C=C2C',
+  'Dimethoxy(methyl)(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](OC)(OC)C',
+  'Dimethoxy(methyl)silane': 'C[SiH](OC)OC',
+  Dimethoxydimethylsilane: 'C[Si](OC)(OC)C',
+  Dimethoxydiphenylsilane: 'CO[Si](C1=CC=CC=C1)(OC)C2=CC=CC=C2',
+  'Dimethoxydi-p-tolylsilane': 'CC1=CC=C([Si](OC)(OC)C2=CC=C(C)C=C2)C=C1',
+  Dimethoxymethylvinylsilane: 'C=C[Si](OC)(OC)C',
   "Dimethyl 2,2'-Bipyridine-4,4'-dicarboxylate": 'O=C(C1=CC(C2=NC=CC(C(OC)=O)=C2)=NC=C1)OC',
   "Dimethyl 2,2'-Bipyridine-6,6'-dicarboxylate": 'O=C(C1=CC=CC(C2=NC(C(OC)=O)=CC=C2)=N1)OC',
-  "Dimethyl Sulfide Borane": 'CSC.B',
-  "Dimethyl D-(-)-Tartrate": 'O[C@@H]([C@@H](C(OC)=O)O)C(OC)=O',
-  "Dimethyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC)=O)O)C(OC)=O',
-  "Dimethylamin": 'CNC',
-  "NMe2": 'CNC',
-  "Dimethylamine Borane": 'CNC.B',
-  "Dimethylbis(phenylethynyl)silane": 'C[Si](C#CC1=CC=CC=C1)(C)C#CC2=CC=CC=C2',
-  "Dimethyldimyristylammonium Bromide": 'CCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCC.[Br-]',
-  "Dimethyldioctadecylammonium Bromide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[Br-]',
-  "Dimethyldioctadecylammonium Iodide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[I-]',
-  "Dimethyldioctylammonium Bromide": 'CCCCCCCC[N+](C)(C)CCCCCCCC.[Br-]',
-  "Dimethyldipalmitylammonium Bromide": 'CCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCC.[Br-]',
-  "Dimethyldiphenylsilane": 'C[Si](C1=CC=CC=C1)(C)C2=CC=CC=C2',
-  "Dimethyldivinylsilane": 'C=C[Si](C)(C)C=C',
-  "Dimethylformamide": 'CN(C)C=O',
-  "DMF": 'CN(C)C=O',
-  "Dimethylphenylphosphine Borane": 'CP(C)C1=CC=CC=C1.B',
-  "Dimethylphenylsilane": 'C[SiH](C)C1=CC=CC=C1',
-  "Dimethylthiophosphinoyl Chloride": 'ClP(C)(C)=S',
-  "Dimethyltin Dichloride": 'C[Sn](Cl)(Cl)C',
-  "Dimethyltin Oxide": 'C[Sn](C)=O',
-  "Dimethyltitanocene": 'C[Ti]C.c1cccc1.c2cccc2',
-  "Di-n-octyltin Oxide": 'CCCCCCCC[Sn](CCCCCCCC)=O',
-  "Diphenyl-2-pyridylphosphine": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=NC=CC=C3',
-  "Diphenylammonium Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.C1([NH2+]C2=CC=CC=C2)=CC=CC=C1',
-  "Diphenylbis(phenylethynyl)silane": 'C1(C#C[Si](C2=CC=CC=C2)(C3=CC=CC=C3)C#CC4=CC=CC=C4)=CC=CC=C1',
-  "Diphenyldichlorogermane": 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
-  "Diphenyliodonium chloride": 'C1([I+]C2=CC=CC=C2)=CC=CC=C1.[Cl-]',
-  "Diphenylphosphine Oxide": 'O=P(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Diphenylphosphinic Chloride": 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
-  "Diphenylphosphoryl Azide": 'O=P(C1=CC=CC=C1)(N=[N+]=[N-])C2=CC=CC=C2',
-  "Diphenylpropylphosphine": 'CCCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Diphenylsilane": 'C1([SiH2]C2=CC=CC=C2)=CC=CC=C1',
-  "Diphenylsilanediol": 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O',
-  "Diphosphoryl Chloride": 'O=P(OP(O)(O)=O)(Cl)O',
-  "Dipivaloylmethane": 'CC(C)(C)C(CC(C(C)(C)C)=O)=O',
+  'Dimethyl Sulfide Borane': 'CSC.B',
+  'Dimethyl D-(-)-Tartrate': 'O[C@@H]([C@@H](C(OC)=O)O)C(OC)=O',
+  'Dimethyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC)=O)O)C(OC)=O',
+  Dimethylamin: 'CNC',
+  NMe2: 'CNC',
+  'Dimethylamine Borane': 'CNC.B',
+  'Dimethylbis(phenylethynyl)silane': 'C[Si](C#CC1=CC=CC=C1)(C)C#CC2=CC=CC=C2',
+  'Dimethyldimyristylammonium Bromide': 'CCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCC.[Br-]',
+  'Dimethyldioctadecylammonium Bromide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[Br-]',
+  'Dimethyldioctadecylammonium Iodide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCCCC.[I-]',
+  'Dimethyldioctylammonium Bromide': 'CCCCCCCC[N+](C)(C)CCCCCCCC.[Br-]',
+  'Dimethyldipalmitylammonium Bromide': 'CCCCCCCCCCCCCCCC[N+](C)(C)CCCCCCCCCCCCCCCC.[Br-]',
+  Dimethyldiphenylsilane: 'C[Si](C1=CC=CC=C1)(C)C2=CC=CC=C2',
+  Dimethyldivinylsilane: 'C=C[Si](C)(C)C=C',
+  Dimethylformamide: 'CN(C)C=O',
+  DMF: 'CN(C)C=O',
+  'Dimethylphenylphosphine Borane': 'CP(C)C1=CC=CC=C1.B',
+  Dimethylphenylsilane: 'C[SiH](C)C1=CC=CC=C1',
+  'Dimethylthiophosphinoyl Chloride': 'ClP(C)(C)=S',
+  'Dimethyltin Dichloride': 'C[Sn](Cl)(Cl)C',
+  'Dimethyltin Oxide': 'C[Sn](C)=O',
+  Dimethyltitanocene: 'C[Ti]C.c1cccc1.c2cccc2',
+  'Di-n-octyltin Oxide': 'CCCCCCCC[Sn](CCCCCCCC)=O',
+  'Diphenyl-2-pyridylphosphine': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=NC=CC=C3',
+  'Diphenylammonium Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.C1([NH2+]C2=CC=CC=C2)=CC=CC=C1',
+  'Diphenylbis(phenylethynyl)silane': 'C1(C#C[Si](C2=CC=CC=C2)(C3=CC=CC=C3)C#CC4=CC=CC=C4)=CC=CC=C1',
+  Diphenyldichlorogermane: 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
+  'Diphenyliodonium chloride': 'C1([I+]C2=CC=CC=C2)=CC=CC=C1.[Cl-]',
+  'Diphenylphosphine Oxide': 'O=P(C1=CC=CC=C1)C2=CC=CC=C2',
+  'Diphenylphosphinic Chloride': 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)Cl',
+  'Diphenylphosphoryl Azide': 'O=P(C1=CC=CC=C1)(N=[N+]=[N-])C2=CC=CC=C2',
+  Diphenylpropylphosphine: 'CCCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  Diphenylsilane: 'C1([SiH2]C2=CC=CC=C2)=CC=CC=C1',
+  Diphenylsilanediol: 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)O',
+  'Diphosphoryl Chloride': 'O=P(OP(O)(O)=O)(Cl)O',
+  Dipivaloylmethane: 'CC(C)(C)C(CC(C(C)(C)C)=O)=O',
   "Dipotassium (R)-1,1'-Binaphthyl-2,2'-disulfonate": 'O=S(C1=CC=C2C=CC=CC2=C1C3=C4C=CC=CC4=CC=C3S(=O)([O-])=O)([O-])=O.[K+].[K+]',
   "Dipyrido[3,2-a:2',3'-c]phenazine": 'C12=CC=CN=C1C3=NC=CC=C3C4=NC5=CC=CC=C5N=C42',
-  "Di-sec-butylmagnesium - Lithium Chloride": 'CCC([Mg]C(C)CC)C.[Li+].[Cl-]',
-  "Di-tert-butyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate": 'O=C(C1=C(C)NC(C)=C(C(OC(C)(C)C)=O)C1)OC(C)(C)C',
-  "Di-tert-butyl Peroxide": 'CC(OOC(C)(C)C)(C)C',
-  "DTBP": 'CC(OOC(C)(C)C)(C)C',
-  "Di-tert-butyl L-(+)-Tartrate": 'O[C@H]([C@H](C(OC(C)(C)C)=O)O)C(OC(C)(C)C)=O',
-  "Di-tert-butylchlorophosphine": 'ClP(C(C)(C)C)C(C)(C)C',
-  "Di-tert-butylmethylphosphonium Tetraphenylborate": 'C[PH+](C(C)(C)C)C(C)(C)C.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Di-tert-butylphenylphosphine": 'CC(P(C(C)(C)C)C1=CC=CC=C1)(C)C',
-  "Di-tert-Butylsilane": 'CC([SiH2]C(C)(C)C)(C)C',
-  "DL-Dithiothreitol": 'SC[C@H]([C@@H](CO)O)S',
-  "DL-Lactic Acid": 'OC(C)C(O)=O',
-  "DL-Malic Acid": 'OC(CC(O)=O)C(O)=O',
-  "DL-α-Lipoic Acid": 'O=C(CCCCC1SSCC1)O',
-  "D-Methionine": 'N[C@H](CCSC)C(O)=O',
-  "DMSO": 'CS(C)=O',
-  "Dodecamethylcyclohexasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Dodecamethylpentasiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  "Dodecyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCCCC)OCC',
-  "Dodecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCC)OC',
-  "Dodecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCC)C.[Br-]',
-  "Dodecyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCCCC)C.[Cl-]',
-  "D-Phenylalanine": 'N[C@H](CC1=CC=CC=C1)C(O)=O',
-  "D-Pipecolic Acid": 'O=C(O)C1CCCCN1',
-  "D-Proline": 'O=C(O)[C@@H]1NCCC1',
-  "D-Tryptophan": 'N[C@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
-  "ethanol": 'OCC',
-  "EtOH": 'OCC',
-  "Ethoxydiphenylphosphine": 'CCOP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Ethoxytriethylsilane": 'CC[Si](CC)(OCC)CC',
+  'Di-sec-butylmagnesium - Lithium Chloride': 'CCC([Mg]C(C)CC)C.[Li+].[Cl-]',
+  'Di-tert-butyl 1,4-Dihydro-2,6-dimethyl-3,5-pyridinedicarboxylate': 'O=C(C1=C(C)NC(C)=C(C(OC(C)(C)C)=O)C1)OC(C)(C)C',
+  'Di-tert-butyl Peroxide': 'CC(OOC(C)(C)C)(C)C',
+  DTBP: 'CC(OOC(C)(C)C)(C)C',
+  'Di-tert-butyl L-(+)-Tartrate': 'O[C@H]([C@H](C(OC(C)(C)C)=O)O)C(OC(C)(C)C)=O',
+  'Di-tert-butylchlorophosphine': 'ClP(C(C)(C)C)C(C)(C)C',
+  'Di-tert-butylmethylphosphonium Tetraphenylborate': 'C[PH+](C(C)(C)C)C(C)(C)C.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  'Di-tert-butylphenylphosphine': 'CC(P(C(C)(C)C)C1=CC=CC=C1)(C)C',
+  'Di-tert-Butylsilane': 'CC([SiH2]C(C)(C)C)(C)C',
+  'DL-Dithiothreitol': 'SC[C@H]([C@@H](CO)O)S',
+  'DL-Lactic Acid': 'OC(C)C(O)=O',
+  'DL-Malic Acid': 'OC(CC(O)=O)C(O)=O',
+  'DL-α-Lipoic Acid': 'O=C(CCCCC1SSCC1)O',
+  'D-Methionine': 'N[C@H](CCSC)C(O)=O',
+  DMSO: 'CS(C)=O',
+  Dodecamethylcyclohexasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Dodecamethylpentasiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  Dodecyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCCCC)OCC',
+  Dodecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCC)OC',
+  'Dodecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCC)C.[Br-]',
+  'Dodecyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCCCC)C.[Cl-]',
+  'D-Phenylalanine': 'N[C@H](CC1=CC=CC=C1)C(O)=O',
+  'D-Pipecolic Acid': 'O=C(O)C1CCCCN1',
+  'D-Proline': 'O=C(O)[C@@H]1NCCC1',
+  'D-Tryptophan': 'N[C@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
+  ethanol: 'OCC',
+  EtOH: 'OCC',
+  Ethoxydiphenylphosphine: 'CCOP(C1=CC=CC=C1)C2=CC=CC=C2',
+  Ethoxytriethylsilane: 'CC[Si](CC)(OCC)CC',
   "Ethyl (11bR)-4-Amino-2,6-bis(3,5-di-tert-butylphenyl)-4,5-dihydro-3H-cyclohepta[1,2-a:7,6-a']dinaphthalene-4-carboxylate": 'O=C(C1(N)CC2=C(C3=CC(C(C)(C)C)=CC(C(C)(C)C)=C3)C=C4C=CC=CC4=C2C5=C6C=CC=CC6=CC(C7=CC(C(C)(C)C)=CC(C(C)(C)C)=C7)=C5C1)OCC',
-  "Ethyl 1-Hydroxy-1H-1,2,3-triazole-4-carboxylate": 'O=C(C1=CN(O)N=N1)OCC',
-  "ethyl acetate": 'CC(OCC)=O',
-  "Ethyl Chloroglyoxylate": 'O=C(Cl)C(OCC)=O',
-  "Ethyl chlorooxoacetate": 'O=C(OCC)C(Cl)=O',
-  "Ethyl Cyano(hydroxyimino)acetate": 'O=C(OCC)/C(C#N)=N/O',
-  "Ethylamine": 'NCC',
-  "Ethylamine Hydrochloride": 'NCC.[H]Cl',
-  "Ethylboronic Acid": 'CCB(O)O',
-  "Ethyldiphenylphosphine": 'CCP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Ethylene diamine": 'NCCN',
-  "Ethylenediaminetetraacetic Acid": 'O=C(CN(CCN(CC(O)=O)CC(O)=O)CC(O)=O)O',
-  "Ethylenedithiobis(trimethylsilane)": 'C[Si](C)(C)SCCS[Si](C)(C)C',
-  "Ethyllithium": '[Li]CC',
-  "Ethylmagnesium Bromide": 'Br[Mg]CC',
-  "Ethylmagnesium Chloride": 'Cl[Mg]CC',
-  "Ethyltrimethylammonium Iodide": 'C[N+](C)(CC)C.[I-]',
-  "Europium": '[Eu]',
+  'Ethyl 1-Hydroxy-1H-1,2,3-triazole-4-carboxylate': 'O=C(C1=CN(O)N=N1)OCC',
+  'ethyl acetate': 'CC(OCC)=O',
+  'Ethyl Chloroglyoxylate': 'O=C(Cl)C(OCC)=O',
+  'Ethyl chlorooxoacetate': 'O=C(OCC)C(Cl)=O',
+  'Ethyl Cyano(hydroxyimino)acetate': 'O=C(OCC)/C(C#N)=N/O',
+  Ethylamine: 'NCC',
+  'Ethylamine Hydrochloride': 'NCC.[H]Cl',
+  'Ethylboronic Acid': 'CCB(O)O',
+  Ethyldiphenylphosphine: 'CCP(C1=CC=CC=C1)C2=CC=CC=C2',
+  'Ethylene diamine': 'NCCN',
+  'Ethylenediaminetetraacetic Acid': 'O=C(CN(CCN(CC(O)=O)CC(O)=O)CC(O)=O)O',
+  'Ethylenedithiobis(trimethylsilane)': 'C[Si](C)(C)SCCS[Si](C)(C)C',
+  Ethyllithium: '[Li]CC',
+  'Ethylmagnesium Bromide': 'Br[Mg]CC',
+  'Ethylmagnesium Chloride': 'Cl[Mg]CC',
+  'Ethyltrimethylammonium Iodide': 'C[N+](C)(CC)C.[I-]',
+  Europium: '[Eu]',
   "Fluoro-N,N,N',N'-tetramethylformamidinium Hexafluorophosphate": 'C[N+](C)=C(F)N(C)C.F[P-](F)(F)(F)(F)F',
-  "Folic Acid Hydrate": 'O=C(O)C(NC(C1=CC=C(NCC2=NC3=C(N=C2)N=C(N)NC3=O)C=C1)=O)CCC(O)=O.[H]O[H]',
-  "Formic acid": 'O=CO',
-  "Fumaric Acid": 'O=C(O)/C=C/C(O)=O',
-  "Gallic Acid Hydrate": 'OC1=CC(C(O)=O)=CC(O)=C1O.[H]O[H]',
-  "Glycolic Acid": 'OCC(O)=O',
-  "Gold": '[Au]',
-  "Gold hydroxide": '[Au+3].[OH-].[OH-].[OH-]',
-  "Hafnium": '[Hf]',
-  "Hafnium(IV) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Hf+4]',
-  "Heptafluorobutyric Anhydride": 'O=C(OC(C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)F',
-  "Heptafluorobutyryl Chloride": 'O=C(Cl)C(F)(F)C(F)(F)C(F)(F)F',
-  "Heptylmagnesium Bromide": 'Br[Mg]CCCCCCC',
-  "Hexachlorodisilane": 'Cl[Si](Cl)(Cl)[Si](Cl)(Cl)Cl',
-  "Hexadecamethylcyclooctasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Hexadecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCCCCCC)OC',
-  "Hexadecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Br-]',
-  "Hexadecyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Cl-]',
-  "Hexadecyltrimethylammonium hydroxide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
-  "Hexadecyltrimethylammonium Hydroxide": 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
-  "Hexafluoroacetylacetone": 'O=C(C(F)(F)C(CF)=O)C(F)(F)F',
-  "Hexamethonium hydroxide": 'C[N+](CCCCCC[N+](C)(C)C)(C)C.[OH-].[OH-]',
-  "Hexamethylbenzene": 'CC1=C(C)C(C)=C(C)C(C)=C1C',
-  "Hexamethylcyclotrisiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Hexamethyldisilane": 'C[Si](C)(C)[Si](C)(C)C',
-  "Hexamethyldisiloxane": 'C[Si](C)(C)O[Si](C)(C)C',
-  "Hexamethylditin": 'C[Sn](C)(C)[Sn](C)(C)C',
-  "Hexamethylenetetramine": 'N12CN3CN(C2)CN(C3)C1',
-  "Hexaphenylcyclotrisiloxane": 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O2)=CC=CC=C1',
-  "Hexaphenyldisilane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
-  "Hexaphenyldisiloxane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
-  "Hexylboronic Acid": 'CCCCCCB(O)O',
-  "Hexyllithium": '[Li]CCCCCC',
-  "Hexylmagnesium Bromide": 'Br[Mg]CCCCCC',
-  "Hexyltriethoxysilane": 'CCO[Si](OCC)(CCCCCC)OCC',
-  "Hexyltrimethoxysilane": 'CO[Si](OC)(CCCCCC)OC',
-  "Hexyltrimethylammonium Bromide": 'C[N+](C)(CCCCCC)C.[Br-]',
-  "Hydriodic Acid": '[H]I',
-  "HI": '[H]I',
-  "Hydrochloric Acid": '[H]Cl',
-  "HCl": '[H]Cl',
-  "Hydrogen Bromide": '[H]Br',
-  "Hydrogen Chloride": '[H]Cl',
-  "Hydrogen peroxide": '[H]OO[H]',
-  "H2O2": '[H]OO[H]',
-  "Hydroquinidine Hydrochloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)CC)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl',
-  "Hydroxylamine-O-sulfonic Acid": 'NOS(O)(=O)=O',
-  "I0801 (S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine (ca. 6% in Toluene, ca. 0.1mol/L)": 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
-  "IF5-Pyridine-HF": '[H]F.FI(F)(F)(F)F.C1=CN=CC=C1',
-  "Imidazole": 'C1=NC=CN1',
-  "Imidazolium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=[NH+]C=CN1.C2=[NH+]C=CN2',
-  "Indan": 'C12=C(CCC2)C=CC=C1',
-  "Indene": 'C12=C(CC=C2)C=CC=C1',
-  "INDIUM HYDROXIDE": '[In+3].[OH-].[OH-].[OH-]',
-  "Indoline": 'C12=C(NCC2)C=CC=C1',
-  "Iodine": 'II',
-  "Iodobenzene Diacetate": 'IC1=CC=CC=C1.CC(O)=O.CC(O)=O',
-  "Iodomesitylene Diacetate": 'CC1=C(I)C(C)=CC(C)=C1.CC(O)=O.CC(O)=O',
-  "Iodosodilactone": 'O=C1OI2C3=C1C=CC=C3C(O2)=O',
-  "Iridium": '[Ir]',
-  "Iridium(III) Chloride Hydrate": '[H]O[H].[Ir+3].[Cl-].[Cl-].[Cl-]',
-  "Iron": '[Fe]',
-  "Fe": '[Fe]',
-  "Iron hydroxide": '[Fe+3].[OH-].[OH-].[OH-]',
-  "FeOH": '[Fe+3].[OH-].[OH-].[OH-]',
-  "Iron(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Fe+2]',
-  "Iron(III) Chloride": '[Fe+3].[Cl-].[Cl-].[Cl-]',
-  "FeCl3": '[Fe+3].[Cl-].[Cl-].[Cl-]',
+  'Folic Acid Hydrate': 'O=C(O)C(NC(C1=CC=C(NCC2=NC3=C(N=C2)N=C(N)NC3=O)C=C1)=O)CCC(O)=O.[H]O[H]',
+  'Formic acid': 'O=CO',
+  'Fumaric Acid': 'O=C(O)/C=C/C(O)=O',
+  'Gallic Acid Hydrate': 'OC1=CC(C(O)=O)=CC(O)=C1O.[H]O[H]',
+  'Glycolic Acid': 'OCC(O)=O',
+  Gold: '[Au]',
+  'Gold hydroxide': '[Au+3].[OH-].[OH-].[OH-]',
+  Hafnium: '[Hf]',
+  'Hafnium(IV) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Hf+4]',
+  'Heptafluorobutyric Anhydride': 'O=C(OC(C(F)(F)C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)C(F)(F)F',
+  'Heptafluorobutyryl Chloride': 'O=C(Cl)C(F)(F)C(F)(F)C(F)(F)F',
+  'Heptylmagnesium Bromide': 'Br[Mg]CCCCCCC',
+  Hexachlorodisilane: 'Cl[Si](Cl)(Cl)[Si](Cl)(Cl)Cl',
+  Hexadecamethylcyclooctasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Hexadecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCCCCCC)OC',
+  'Hexadecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Br-]',
+  'Hexadecyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[Cl-]',
+  'Hexadecyltrimethylammonium hydroxide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
+  'Hexadecyltrimethylammonium Hydroxide': 'C[N+](C)(CCCCCCCCCCCCCCCC)C.[OH-]',
+  Hexafluoroacetylacetone: 'O=C(C(F)(F)C(CF)=O)C(F)(F)F',
+  'Hexamethonium hydroxide': 'C[N+](CCCCCC[N+](C)(C)C)(C)C.[OH-].[OH-]',
+  Hexamethylbenzene: 'CC1=C(C)C(C)=C(C)C(C)=C1C',
+  Hexamethylcyclotrisiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Hexamethyldisilane: 'C[Si](C)(C)[Si](C)(C)C',
+  Hexamethyldisiloxane: 'C[Si](C)(C)O[Si](C)(C)C',
+  Hexamethylditin: 'C[Sn](C)(C)[Sn](C)(C)C',
+  Hexamethylenetetramine: 'N12CN3CN(C2)CN(C3)C1',
+  Hexaphenylcyclotrisiloxane: 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O2)=CC=CC=C1',
+  Hexaphenyldisilane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
+  Hexaphenyldisiloxane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1',
+  'Hexylboronic Acid': 'CCCCCCB(O)O',
+  Hexyllithium: '[Li]CCCCCC',
+  'Hexylmagnesium Bromide': 'Br[Mg]CCCCCC',
+  Hexyltriethoxysilane: 'CCO[Si](OCC)(CCCCCC)OCC',
+  Hexyltrimethoxysilane: 'CO[Si](OC)(CCCCCC)OC',
+  'Hexyltrimethylammonium Bromide': 'C[N+](C)(CCCCCC)C.[Br-]',
+  'Hydriodic Acid': '[H]I',
+  HI: '[H]I',
+  'Hydrochloric Acid': '[H]Cl',
+  HCl: '[H]Cl',
+  'Hydrogen Bromide': '[H]Br',
+  'Hydrogen Chloride': '[H]Cl',
+  'Hydrogen peroxide': '[H]OO[H]',
+  H2O2: '[H]OO[H]',
+  'Hydroquinidine Hydrochloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)CC)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl',
+  'Hydroxylamine-O-sulfonic Acid': 'NOS(O)(=O)=O',
+  'I0801 (S)-4-Isopropyl-3-(1-naphthylmethyl)-2,5,5-triphenyl-1,3,2-oxazaborolidine (ca. 6% in Toluene, ca. 0.1mol/L)': 'CC([C@@H]1N(CC2=C3C=CC=CC3=CC=C2)B(C4=CC=CC=C4)OC1(C5=CC=CC=C5)C6=CC=CC=C6)C',
+  'IF5-Pyridine-HF': '[H]F.FI(F)(F)(F)F.C1=CN=CC=C1',
+  Imidazole: 'C1=NC=CN1',
+  'Imidazolium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=[NH+]C=CN1.C2=[NH+]C=CN2',
+  Indan: 'C12=C(CCC2)C=CC=C1',
+  Indene: 'C12=C(CC=C2)C=CC=C1',
+  'INDIUM HYDROXIDE': '[In+3].[OH-].[OH-].[OH-]',
+  Indoline: 'C12=C(NCC2)C=CC=C1',
+  Iodine: 'II',
+  'Iodobenzene Diacetate': 'IC1=CC=CC=C1.CC(O)=O.CC(O)=O',
+  'Iodomesitylene Diacetate': 'CC1=C(I)C(C)=CC(C)=C1.CC(O)=O.CC(O)=O',
+  Iodosodilactone: 'O=C1OI2C3=C1C=CC=C3C(O2)=O',
+  Iridium: '[Ir]',
+  'Iridium(III) Chloride Hydrate': '[H]O[H].[Ir+3].[Cl-].[Cl-].[Cl-]',
+  Iron: '[Fe]',
+  Fe: '[Fe]',
+  'Iron hydroxide': '[Fe+3].[OH-].[OH-].[OH-]',
+  FeOH: '[Fe+3].[OH-].[OH-].[OH-]',
+  'Iron(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Fe+2]',
+  'Iron(III) Chloride': '[Fe+3].[Cl-].[Cl-].[Cl-]',
+  FeCl3: '[Fe+3].[Cl-].[Cl-].[Cl-]',
   "Ishikawa's Reagent": 'FC(N(CC)CC)(C(C(F)(F)F)F)F',
-  "Isobutylboronic Acid": 'CC(C)CB(O)O',
-  "Isobutyllithium": '[Li]CC(C)C',
-  "Isobutylmagnesium Bromide": 'Br[Mg]CC(C)C',
-  "isopropanpol": 'CC(O)C',
-  "iPr": 'CC(O)C',
-  "Isopropenyloxytris(trimethylsilyl)silane": 'C[Si]([Si]([Si](C)(C)C)(OC(C)=C)[Si](C)(C)C)(C)C',
-  "isopropyl alcohol": 'CC(O)C',
-  "Isopropylboronic Acid": 'CC(B(O)O)C',
-  "Isopropyldiphenylphosphine": 'CC(P(C1=CC=CC=C1)C2=CC=CC=C2)C',
-  "Isopropyllithium": '[Li]C(C)C',
-  "Isopropylmagnesium Bromide": 'Br[Mg]C(C)C',
-  "Isopropylmagnesium Chloride": 'Cl[Mg]C(C)C',
-  "Isopropylmagnesium Chloride - Lithium Chloride": 'Cl[Mg]C(C)C.[Li+].[Cl-]',
-  "Isopropylmagnesium chloride lithium chloride complex": '[Mg+]C(C)C.[Li+].[Cl-].[Cl-]',
-  "L-(-)-Threonine": 'N[C@@H]([C@H](O)C)C(O)=O',
-  "L-(+)-Leucinol": 'N[C@@H](CC(C)C)CO',
-  "L-(+)-Tartaric Acid": 'O[C@H]([C@H](C(O)=O)O)C(O)=O',
-  "L-Alanine": 'N[C@@H](C)C(O)=O',
-  "Lanthanum": '[La]',
-  "LANTHANUM HYDROXIDE": '[La+3].[OH-].[OH-].[OH-]',
-  "Lanthanum(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[La+3]',
-  "L-Ascorbic Acid": 'OC([C@H](O1)[C@H](CO)O)=C(O)C1=O',
-  "L-Azetidine-2-carboxylic Acid": 'O=C(C1NCC1)O',
-  "LEAD HYDROXIDE": '[Pb+2].[OH-].[OH-]',
-  "Lead Tetraacetate": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
-  "Pb(OAc)4": 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
-  "Lead(II) Iodide": '[Pb+2].[I-].[I-]',
-  "Lithium (E)-4-oxopent-2-en-2-olate": 'C/C([O-])=C\\C(C)=O.[Li+]',
-  "Lithium 2,2,6,6-tetramethylpiperidide": 'CC1(C)CCCC(C)(C)[N-]1.[Li+]',
-  "Lithium Acetylide Ethylenediamine Complex": 'NCCN.[C-]#[C-].[Li+].[Li+]',
-  "Lithium Aluminium Hydride": '[Li+].[AlH4-]',
-  "Lithium Amide": '[Li+].[NH2-]',
-  "Lithium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[Li+]',
-  "Lithium Borohydride": '[Li+].[BH4-]',
-  "LiBH4": '[Li+].[BH4-]',
-  "lithium bromid": '[Li+].[Br-]',
-  "LiBr": '[Li+].[Br-]',
-  "lithium chloride": '[Li+].[Cl-]',
-  "LiCl": '[Li+].[Cl-]',
-  "Lithium dicyclohexylamide": 'C1([N-]C2CCCCC2)CCCCC1.[Li+]',
-  "Lithium diethylamide": 'CC[N-]CC.[Li+]',
-  "Lithium Diisopropylamide": 'CC([N-]C(C)C)C.[Li+]',
-  "LDA": 'CC([N-]C(C)C)C.[Li+]',
-  "Lithium dimethylamide": 'C[N-]C.[Li+]',
-  "Lithium Diphenylphosphide (ca. 0.5mol/L in Tetrahydrofuran)": 'C1([P-]C2=CC=CC=C2)=CC=CC=C1.[Li+]',
-  "Lithium ethoxide": 'CC[O-].[Li+]',
-  "Lithium hydroxide": '[Li+].[OH-]',
-  "LiOH": '[Li+].[OH-]',
-  "Lithium isopropoxide": 'CC([O-])C.[Li+]',
-  "Lithium methoxide": 'C[O-].[Li+]',
-  "LiOMe": 'C[O-].[Li+]',
-  "Lithium peroxide": '[O-][O-].[Li+].[Li+]',
-  "lithium tetrafluoroborate": 'F[B-](F)(F)F.[Li+]',
-  "LiBF4": 'F[B-](F)(F)F.[Li+]',
-  "Lithium Triethylborohydride": 'CC[BH-](CC)CC.[Li+]',
-  "Lithium triisobutyl(2,2,6,6 tetramethylpiperdino)aluminate": 'CC1(C)CCCC(C)(C)N1[Al-](CC(C)C)(CC(C)C)CC(C)C.[Li+]',
-  "Lithium trimethylsilanolate": '[O-][Si](C)(C)C.[Li+]',
-  "Lithium Tri-tert-butoxyaluminum Hydride": 'CC(O[Al](OC(C)(C)C)OC(C)(C)C)(C)C.[Li+].[H-]',
-  "Lithium tert-butoxide": 'CC(C)([O-])C.[Li+]',
-  "Lithium tert-Butoxide": 'CC(C)([O-])C.[Li+]',
-  "L-Lactic Acid": 'OC(C)C(O)=O',
-  "L-Methionine": 'N[C@@H](CCSC)C(O)=O',
-  "L-Phenylalanine": 'N[C@@H](CC1=CC=CC=C1)C(O)=O',
-  "L-Pipecolic Acid": 'O=C(O)C1CCCCN1',
-  "L-Prolinamide": 'O=C(N)[C@H]1NCCC1',
-  "L-Prolinanilide": 'O=C(NC1=CC=CC=C1)[C@H]2NCCC2',
-  "L-Proline": 'O=C(O)[C@H]1NCCC1',
-  "L-Thioproline": 'O=C(O)[C@H]1NCCC1=S',
-  "L-Tryptophan": 'N[C@@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
-  "Magnesium bis(diisopropyl)amide": 'CC([N-]C(C)C)C.CC([N-]C(C)C)C.[Mg+2]',
-  "Magnesium bis(hexamethyldisilazide)": 'C[Si](C)(C)[N-][Si](C)(C)C.C[Si](C)(C)[N-][Si](C)(C)C.[Mg+2]',
-  "magnesium bromide": '[Mg+2].[Br-].[Br-]',
-  "MgBr2": '[Mg+2].[Br-].[Br-]',
-  "magnesium carbonate": '[O-]C([O-])=O.[Mg+2]',
-  "MgCO3": '[O-]C([O-])=O.[Mg+2]',
-  "magnesium chloride": '[Mg+2].[Cl-].[Cl-]',
-  "MgCl2": '[Mg+2].[Cl-].[Cl-]',
-  "Magnesium di-tert-butoxide": 'CC(C)([O-])C.CC(C)([O-])C.[Mg+2]',
-  "Magnesium ethoxide": 'CC[O-].CC[O-].[Mg+2]',
-  "Mg(OEt)2": 'CC[O-].CC[O-].[Mg+2]',
-  "MAGNESIUM HYDROXIDE": '[Mg+2].[OH-].[OH-]',
-  "Mg(OH)2": '[Mg+2].[OH-].[OH-]',
-  "magnesium iodide": '[Mg+2].[I-].[I-]',
-  "MgI2": '[Mg+2].[I-].[I-]',
-  "Magnesium methoxide": 'C[O-].C[O-].[Mg+2]',
-  "Mg(OMe)2": 'C[O-].C[O-].[Mg+2]',
-  "magnesium permanganate": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
-  "Mg(MnO4)2": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
-  "Magnesium permanganate hydrate": 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[H]O[H].[Mg+2]',
-  "Magnesium peroxide": '[O-][O-].[Mg+2]',
-  "magnesium sulfate": 'O=S([O-])([O-])=O.[Mg+2]',
-  "MgSO4": 'O=S([O-])([O-])=O.[Mg+2]',
-  "Maleic Acid": 'O=C(O)/C=C\\C(O)=O',
-  "Malonic Acid": 'O=C(O)CC(O)=O',
-  "Manganese": '[Mn]',
-  "manganese molybdate": 'O=[Mo]([O-])([O-])=O.[Mn+2]',
-  "manganese perchlorate": 'O=Cl(=O)([O-])=O.O=Cl(=O)([O-])=O.[Mn+2]',
-  "manganese sulfate": 'O=S([O-])([O-])=O.[Mn+2]',
-  "MnSO4": 'O=S([O-])([O-])=O.[Mn+2]',
-  "Manganese(II) Bis(trifluoromethanesulfonyl)imide": 'FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.[Mn+2]',
-  "Manganese(II) Chloride Tetrahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mn+2].[Cl-].[Cl-]',
-  "meso-Tetraphenylchlorin": 'C1(C2=CC=CC=C2)=C(N3)CCC3=C(C4=CC=CC=C4)C5=NC(C=C5)=C(C6=CC=CC=C6)C(N7)=CC=C7C(C8=CC=CC=C8)=C9CCC1=N9',
-  "Methallyltrimethylsilane": 'C[Si](C)(CC(C)=C)C',
-  "Methanesulfonic Acid": 'CS(=O)(O)=O',
-  "methanol": 'CO',
-  "MeOH": 'CO',
-  "Methoxydimethyl(phenyl)silane": 'C[Si](C)(OC)C1=CC=CC=C1',
-  "Methoxydiphenylphosphine": 'COP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Methoxymethyl(diphenyl)phosphine Oxide": 'COCP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
-  "Methoxymethyltrimethylsilane": 'C[Si](C)(COC)C',
-  "Methoxytrimethylsilane": 'C[Si](C)(OC)C',
+  'Isobutylboronic Acid': 'CC(C)CB(O)O',
+  Isobutyllithium: '[Li]CC(C)C',
+  'Isobutylmagnesium Bromide': 'Br[Mg]CC(C)C',
+  isopropanpol: 'CC(O)C',
+  iPr: 'CC(O)C',
+  'Isopropenyloxytris(trimethylsilyl)silane': 'C[Si]([Si]([Si](C)(C)C)(OC(C)=C)[Si](C)(C)C)(C)C',
+  'isopropyl alcohol': 'CC(O)C',
+  'Isopropylboronic Acid': 'CC(B(O)O)C',
+  Isopropyldiphenylphosphine: 'CC(P(C1=CC=CC=C1)C2=CC=CC=C2)C',
+  Isopropyllithium: '[Li]C(C)C',
+  'Isopropylmagnesium Bromide': 'Br[Mg]C(C)C',
+  'Isopropylmagnesium Chloride': 'Cl[Mg]C(C)C',
+  'Isopropylmagnesium Chloride - Lithium Chloride': 'Cl[Mg]C(C)C.[Li+].[Cl-]',
+  'Isopropylmagnesium chloride lithium chloride complex': '[Mg+]C(C)C.[Li+].[Cl-].[Cl-]',
+  'L-(-)-Threonine': 'N[C@@H]([C@H](O)C)C(O)=O',
+  'L-(+)-Leucinol': 'N[C@@H](CC(C)C)CO',
+  'L-(+)-Tartaric Acid': 'O[C@H]([C@H](C(O)=O)O)C(O)=O',
+  'L-Alanine': 'N[C@@H](C)C(O)=O',
+  Lanthanum: '[La]',
+  'LANTHANUM HYDROXIDE': '[La+3].[OH-].[OH-].[OH-]',
+  'Lanthanum(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[La+3]',
+  'L-Ascorbic Acid': 'OC([C@H](O1)[C@H](CO)O)=C(O)C1=O',
+  'L-Azetidine-2-carboxylic Acid': 'O=C(C1NCC1)O',
+  'LEAD HYDROXIDE': '[Pb+2].[OH-].[OH-]',
+  'Lead Tetraacetate': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
+  'Pb(OAc)4': 'CC([O-])=O.CC([O-])=O.CC([O-])=O.CC([O-])=O.[Pb+4]',
+  'Lead(II) Iodide': '[Pb+2].[I-].[I-]',
+  'Lithium (E)-4-oxopent-2-en-2-olate': 'C/C([O-])=C\\C(C)=O.[Li+]',
+  'Lithium 2,2,6,6-tetramethylpiperidide': 'CC1(C)CCCC(C)(C)[N-]1.[Li+]',
+  'Lithium Acetylide Ethylenediamine Complex': 'NCCN.[C-]#[C-].[Li+].[Li+]',
+  'Lithium Aluminum Hydride': '[Li+].[Al+3].[H-].[H-].[H-].[H-]',
+  'Lithium amide': '[Li+].[NH2-]',
+  'Lithium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[Li+]',
+  'Lithium Borohydride': '[Li+].[BH4-]',
+  LiBH4: '[Li+].[BH4-]',
+  'lithium bromid': '[Li+].[Br-]',
+  LiBr: '[Li+].[Br-]',
+  'lithium chloride': '[Li+].[Cl-]',
+  LiCl: '[Li+].[Cl-]',
+  'Lithium dicyclohexylamide': 'C1([N-]C2CCCCC2)CCCCC1.[Li+]',
+  'Lithium diethylamide': 'CC[N-]CC.[Li+]',
+  'Lithium Diisopropylamide': 'CC([N-]C(C)C)C.[Li+]',
+  LDA: 'CC([N-]C(C)C)C.[Li+]',
+  'Lithium dimethylamide': 'C[N-]C.[Li+]',
+  'Lithium Diphenylphosphide (ca. 0.5mol/L in Tetrahydrofuran)': 'C1([P-]C2=CC=CC=C2)=CC=CC=C1.[Li+]',
+  'Lithium ethoxide': 'CC[O-].[Li+]',
+  'Lithium hydroxide': '[Li+].[OH-]',
+  LiOH: '[Li+].[OH-]',
+  'Lithium isopropoxide': 'CC([O-])C.[Li+]',
+  'Lithium methoxide': 'C[O-].[Li+]',
+  LiOMe: 'C[O-].[Li+]',
+  'Lithium peroxide': '[O-][O-].[Li+].[Li+]',
+  'lithium tetrafluoroborate': 'F[B-](F)(F)F.[Li+]',
+  LiBF4: 'F[B-](F)(F)F.[Li+]',
+  'Lithium Triethylborohydride': 'CC[BH-](CC)CC.[Li+]',
+  'Lithium triisobutyl(2,2,6,6 tetramethylpiperdino)aluminate': 'CC1(C)CCCC(C)(C)N1[Al-](CC(C)C)(CC(C)C)CC(C)C.[Li+]',
+  'Lithium trimethylsilanolate': '[O-][Si](C)(C)C.[Li+]',
+  'Lithium Tri-tert-butoxyaluminum Hydride': 'CC(O[Al](OC(C)(C)C)OC(C)(C)C)(C)C.[Li+].[H-]',
+  'Lithium tert-butoxide': 'CC(C)([O-])C.[Li+]',
+  'Lithium tert-Butoxide': 'CC(C)([O-])C.[Li+]',
+  'L-Lactic Acid': 'OC(C)C(O)=O',
+  'L-Methionine': 'N[C@@H](CCSC)C(O)=O',
+  'L-Phenylalanine': 'N[C@@H](CC1=CC=CC=C1)C(O)=O',
+  'L-Pipecolic Acid': 'O=C(O)C1CCCCN1',
+  'L-Prolinamide': 'O=C(N)[C@H]1NCCC1',
+  'L-Prolinanilide': 'O=C(NC1=CC=CC=C1)[C@H]2NCCC2',
+  'L-Proline': 'O=C(O)[C@H]1NCCC1',
+  'L-Thioproline': 'O=C(O)[C@H]1NCCC1=S',
+  'L-Tryptophan': 'N[C@@H](CC1=CNC2=C1C=CC=C2)C(O)=O',
+  'Magnesium bis(diisopropyl)amide': 'CC([N-]C(C)C)C.CC([N-]C(C)C)C.[Mg+2]',
+  'Magnesium bis(hexamethyldisilazide)': 'C[Si](C)(C)[N-][Si](C)(C)C.C[Si](C)(C)[N-][Si](C)(C)C.[Mg+2]',
+  'magnesium bromide': '[Mg+2].[Br-].[Br-]',
+  MgBr2: '[Mg+2].[Br-].[Br-]',
+  'magnesium carbonate': '[O-]C([O-])=O.[Mg+2]',
+  MgCO3: '[O-]C([O-])=O.[Mg+2]',
+  'magnesium chloride': '[Mg+2].[Cl-].[Cl-]',
+  MgCl2: '[Mg+2].[Cl-].[Cl-]',
+  'Magnesium di-tert-butoxide': 'CC(C)([O-])C.CC(C)([O-])C.[Mg+2]',
+  'Magnesium ethoxide': 'CC[O-].CC[O-].[Mg+2]',
+  'Mg(OEt)2': 'CC[O-].CC[O-].[Mg+2]',
+  'MAGNESIUM HYDROXIDE': '[Mg+2].[OH-].[OH-]',
+  'Mg(OH)2': '[Mg+2].[OH-].[OH-]',
+  'magnesium iodide': '[Mg+2].[I-].[I-]',
+  MgI2: '[Mg+2].[I-].[I-]',
+  'Magnesium methoxide': 'C[O-].C[O-].[Mg+2]',
+  'Mg(OMe)2': 'C[O-].C[O-].[Mg+2]',
+  'magnesium permanganate': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
+  'Mg(MnO4)2': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[Mg+2]',
+  'Magnesium permanganate hydrate': 'O=[Mn](=O)([O-])=O.O=[Mn](=O)([O-])=O.[H]O[H].[Mg+2]',
+  'Magnesium peroxide': '[O-][O-].[Mg+2]',
+  'magnesium sulfate': 'O=S([O-])([O-])=O.[Mg+2]',
+  MgSO4: 'O=S([O-])([O-])=O.[Mg+2]',
+  'Maleic Acid': 'O=C(O)/C=C\\C(O)=O',
+  'Malonic Acid': 'O=C(O)CC(O)=O',
+  Manganese: '[Mn]',
+  'manganese molybdate': 'O=[Mo]([O-])([O-])=O.[Mn+2]',
+  'manganese perchlorate': 'O=Cl(=O)([O-])=O.O=Cl(=O)([O-])=O.[Mn+2]',
+  'manganese sulfate': 'O=S([O-])([O-])=O.[Mn+2]',
+  MnSO4: 'O=S([O-])([O-])=O.[Mn+2]',
+  'Manganese(II) Bis(trifluoromethanesulfonyl)imide': 'FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.FC(F)(S(=O)([N-]S(=O)(C(F)(F)F)=O)=O)F.[Mn+2]',
+  'Manganese(II) Chloride Tetrahydrate': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mn+2].[Cl-].[Cl-]',
+  'meso-Tetraphenylchlorin': 'C1(C2=CC=CC=C2)=C(N3)CCC3=C(C4=CC=CC=C4)C5=NC(C=C5)=C(C6=CC=CC=C6)C(N7)=CC=C7C(C8=CC=CC=C8)=C9CCC1=N9',
+  Methallyltrimethylsilane: 'C[Si](C)(CC(C)=C)C',
+  'Methanesulfonic Acid': 'CS(=O)(O)=O',
+  methanol: 'CO',
+  MeOH: 'CO',
+  'Methoxydimethyl(phenyl)silane': 'C[Si](C)(OC)C1=CC=CC=C1',
+  Methoxydiphenylphosphine: 'COP(C1=CC=CC=C1)C2=CC=CC=C2',
+  'Methoxymethyl(diphenyl)phosphine Oxide': 'COCP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
+  Methoxymethyltrimethylsilane: 'C[Si](C)(COC)C',
+  Methoxytrimethylsilane: 'C[Si](C)(OC)C',
   "Methyl 2,2':6',2''-Terpyridine-4'-carboxylate": 'O=C(C1=CC(C2=NC=CC=C2)=NC(C3=NC=CC=C3)=C1)OC',
-  "Methyl 3-(Trimethylsilyloxy)crotonate": 'C/C(O[Si](C)(C)C)=C/C(OC)=O',
-  "Methyl Chlorodifluoroacetate": 'O=C(OC)C(F)(Cl)F',
-  "Methyl Chloroglyoxylate": 'O=C(Cl)C(OC)=O',
-  "Methyl chlorooxoacetate": 'O=C(OC)C(Cl)=O',
-  "Methyl Difluoro(fluorosulfonyl)acetate": 'O=C(OC)C(F)(F)S(=O)(F)=O',
-  "Methyl(diphenyl)phosphine Oxide": 'CP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
-  "Methylamine": 'NC',
-  "Methylboronic Acid": 'CB(O)O',
-  "Methyl-d3-magnesium iodide": '[2H]C([Mg]I)([2H])[2H]',
-  "Methyldiphenylphosphine": 'CP(C1=CC=CC=C1)C2=CC=CC=C2',
-  "Methyldiphenylsilane": 'C[SiH](C1=CC=CC=C1)C2=CC=CC=C2',
-  "methylene chloride": 'ClCCl',
-  "Methyllithium lithium bromide": '[Li]C.[Li+].[Br-]',
-  "Methylmagnesium Bromide": 'Br[Mg]C',
-  "MeMgBr": 'Br[Mg]C',
-  "Methylmagnesium chloride": 'Cl[Mg]C',
-  "MeMgCl": 'Cl[Mg]C',
-  "Methylmagnesium Iodide": 'I[Mg]C',
-  "MeMgI": 'I[Mg]C',
-  "Methyltri-n-octylammonium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC',
-  "Methyltri-n-octylammonium Chloride": 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.[Cl-]',
-  "Methyltri-n-octylammonium Hydrogen Sulfate": 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.O=S(O)([O-])=O',
-  "Methyltriphenylarsonium Iodide": 'C[As+](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[I-]',
-  "Molybdenum": '[Mo]',
-  "Monobutyltin Oxide": 'CCCC[SnH]=O',
-  "Monosodium Bromoisocyanurate Hydrate": 'BrC([N-]C(N1)=O)=NC1=O.[Na+]',
-  "Morpholine": 'C1CNCCO1',
-  "Morpholinosulfur Trifluoride": 'FS(F)(F)N1CCOCC1',
-  "m-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=CC(C)=C1',
-  "N-(2-Pyridyl)bis(trifluoromethanesulfonimide)": 'O=S(N(C1=NC=CC=C1)S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
-  "N-(2-Thiophenesulfonyl)-L-prolinamide": 'O=C(NS(=O)(C1=CC=CS1)=O)[C@H]2NCCC2',
-  "N-(9-Deoxy-epi-cinchonidin-9-yl)picolinamide": 'O=C(N[C@H]([C@H]1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
-  "N-(9-Deoxy-epi-cinchonin-9-yl)picolinamide": 'O=C(N[C@@H](C1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
-  "N-(Trifluoromethylthio)phthalimide": 'O=C(N1SC(F)(F)F)C2=CC=CC=C2C1=O',
+  'Methyl 3-(Trimethylsilyloxy)crotonate': 'C/C(O[Si](C)(C)C)=C/C(OC)=O',
+  'Methyl Chlorodifluoroacetate': 'O=C(OC)C(F)(Cl)F',
+  'Methyl Chloroglyoxylate': 'O=C(Cl)C(OC)=O',
+  'Methyl chlorooxoacetate': 'O=C(OC)C(Cl)=O',
+  'Methyl Difluoro(fluorosulfonyl)acetate': 'O=C(OC)C(F)(F)S(=O)(F)=O',
+  'Methyl(diphenyl)phosphine Oxide': 'CP(C1=CC=CC=C1)(C2=CC=CC=C2)=O',
+  Methylamine: 'NC',
+  'Methylboronic Acid': 'CB(O)O',
+  'Methyl-d3-magnesium iodide': '[2H]C([Mg]I)([2H])[2H]',
+  Methyldiphenylphosphine: 'CP(C1=CC=CC=C1)C2=CC=CC=C2',
+  Methyldiphenylsilane: 'C[SiH](C1=CC=CC=C1)C2=CC=CC=C2',
+  'methylene chloride': 'ClCCl',
+  'Methyllithium lithium bromide': '[Li]C.[Li+].[Br-]',
+  'Methylmagnesium Bromide': 'Br[Mg]C',
+  MeMgBr: 'Br[Mg]C',
+  'Methylmagnesium chloride': 'Cl[Mg]C',
+  MeMgCl: 'Cl[Mg]C',
+  'Methylmagnesium Iodide': 'I[Mg]C',
+  MeMgI: 'I[Mg]C',
+  'Methyltri-n-octylammonium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC',
+  'Methyltri-n-octylammonium Chloride': 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.[Cl-]',
+  'Methyltri-n-octylammonium Hydrogen Sulfate': 'CCCCCCCC[N+](CCCCCCCC)(C)CCCCCCCC.O=S(O)([O-])=O',
+  'Methyltriphenylarsonium Iodide': 'C[As+](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.[I-]',
+  Molybdenum: '[Mo]',
+  'Monobutyltin Oxide': 'CCCC[SnH]=O',
+  'Monosodium Bromoisocyanurate Hydrate': 'BrC([N-]C(N1)=O)=NC1=O.[Na+]',
+  Morpholine: 'C1CNCCO1',
+  'Morpholinosulfur Trifluoride': 'FS(F)(F)N1CCOCC1',
+  'm-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=CC(C)=C1',
+  'N-(2-Pyridyl)bis(trifluoromethanesulfonimide)': 'O=S(N(C1=NC=CC=C1)S(=O)(C(F)(F)F)=O)(C(F)(F)F)=O',
+  'N-(2-Thiophenesulfonyl)-L-prolinamide': 'O=C(NS(=O)(C1=CC=CS1)=O)[C@H]2NCCC2',
+  'N-(9-Deoxy-epi-cinchonidin-9-yl)picolinamide': 'O=C(N[C@H]([C@H]1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
+  'N-(9-Deoxy-epi-cinchonin-9-yl)picolinamide': 'O=C(N[C@@H](C1N2CCC(C1)C(C=C)C2)C3=CC=NC4=CC=CC=C34)C5=NC=CC=C5',
+  'N-(Trifluoromethylthio)phthalimide': 'O=C(N1SC(F)(F)F)C2=CC=CC=C2C1=O',
   "N,N,N',N'-Tetraethylethylenediamine": 'CCN(CC)CCN(CC)CC',
   "N,N,N',N'-Tetrakis(2-pyridylmethyl)ethylenediamine": 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CCN(CC3=NC=CC=C3)CC4=NC=CC=C4',
   "N,N,N',N'-Tetramethyl-1,3-diaminopropane": 'CN(C)CCCN(C)C',
@@ -1516,86 +1516,86 @@ export const reagents_kombi = {
   "N,N'-Bis(salicylidene)-1,2-propanediamine": 'CC(/N=C/C1=CC=CC=C1O)C/N=C/C2=CC=CC=C2O',
   "N,N'-Bis(salicylidene)-1,3-propanediamine": 'OC1=CC=CC=C1/C=N/CCC/N=C/C2=CC=CC=C2O',
   "N,N'-Bis(salicylidene)ethylenediamine": 'OC1=CC=CC=C1/C=N/CC/N=C/C2=CC=CC=C2O',
-  "N,N-Dichloro-p-toluenesulfonamide": 'CC1=CC=C(S(=O)(N(Cl)Cl)=O)C=C1',
+  'N,N-Dichloro-p-toluenesulfonamide': 'CC1=CC=C(S(=O)(N(Cl)Cl)=O)C=C1',
   "N,N'-Dicyclohexyl-1,2-ethanediamine Hydrate": '[H]O[H].C1(NCCNC2CCCCC2)CCCCC1',
   "N,N'-Dicyclohexylcarbodiimide": 'C1(N=C=NC2CCCCC2)CCCCC1',
-  "DCC": 'C1(N=C=NC2CCCCC2)CCCCC1',
-  "N,N-Diethylaniline Borane": 'CCN(CC)C1=CC=CC=C1.B',
+  DCC: 'C1(N=C=NC2CCCCC2)CCCCC1',
+  'N,N-Diethylaniline Borane': 'CCN(CC)C1=CC=CC=C1.B',
   "N,N'-Diisopropylcarbodiimide": 'CC(N=C=NC(C)C)C',
-  "DIC": 'CC(N=C=NC(C)C)C',
-  "N,N-Diisopropylethylamine": 'CCN(C(C)C)C(C)C',
-  "DIPEA": 'CCN(C(C)C)C(C)C',
-  "N,N-Diisopropylmethylamine": 'CN(C(C)C)C(C)C',
+  DIC: 'CC(N=C=NC(C)C)C',
+  'N,N-Diisopropylethylamine': 'CCN(C(C)C)C(C)C',
+  DIPEA: 'CCN(C(C)C)C(C)C',
+  'N,N-Diisopropylmethylamine': 'CN(C(C)C)C(C)C',
   "N,N'-Dimethylethylenediamine": 'CNCCNC',
-  "N,N-Dimethyl-N-(methylsulfanylmethylene)ammonium Iodide": 'CSC=[N+](C)C.[I-]',
+  'N,N-Dimethyl-N-(methylsulfanylmethylene)ammonium Iodide': 'CSC=[N+](C)C.[I-]',
   "N,N'-Diphenylethylenediamine": 'C1(NCCNC2=CC=CC=C2)=CC=CC=C1',
   "N,N'-Di-tert-butylcarbodiimide": 'CC(N=C=NC(C)(C)C)(C)C',
   "N,N'-Di-tert-butylethylenediamine": 'CC(NCCNC(C)(C)C)(C)C',
   "N-[(11bS)-4,5-Dihydro-3H-dinaphtho[2,1-c:1',2'-e]azepin-2-yl]trifluoromethanesulfonamide": 'O=S(C(F)(F)F)(NC1=C2CNCC3=CC=C4C=CC=CC4=C3C2=C5C=CC=CC5=C1)=O',
-  "N-[(9S)-8α-Cinchonan-9-yl]quinoline-8-sulfonamide": 'O=S(C1=C2N=CC=CC2=CC=C1)(N[C@H]([C@@H]3C[C@H]4[C@H](C[N@@]3CC4)C=C)C5=CC=NC6=CC=CC=C56)=O',
-  "N-[2-(Trimethylsilyl)ethoxycarbonyloxy]succinimide": 'O=C(N1OC(OCC[Si](C)(C)C)=O)CCC1=O',
-  "N-Benzylcinchonidinium Chloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
-  "N-Benzylcinchoninium Chloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
-  "N-Benzylquinidinium Chloride": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
-  "N-Benzylquininium Chloride": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
-  "N-Bromoacetamide": 'CC(NBr)=O',
-  "N-Bromophthalimide": 'O=C(N1Br)C2=CC=CC=C2C1=O',
-  "N-Bromosaccharin": 'O=C1N(Br)S(=O)(C2=C1C=CC=C2)=O',
-  "N-Bromosuccinimide": 'O=C(N1Br)CCC1=O',
-  "NBS": 'O=C(N1Br)CCC1=O',
-  "n-Butanol": 'CCCCO',
-  "n-Butyllithium solution": '[Li]CCCC',
-  "BuLi": '[Li]CCCC',
-  "N-Chlorobenzenesulfonamide sodium salt": 'O=S(C1=CC=CC=C1)([N-]Cl)=O.[Na+]',
-  "N-Chlorophthalimide": 'O=C(N1Cl)C2=CC=CC=C2C1=O',
-  "N-Chlorosaccharin": 'O=C1N(Cl)S(=O)(C2=C1C=CC=C2)=O',
-  "N-Chlorosuccinimide": 'O=C(N1Cl)CCC1=O',
-  "NCS": 'O=C(N1Cl)CCC1=O',
-  "Neodymium": '[Nd]',
-  "NEODYMIUM HYDRATE": '[H]O[H].[Nd]',
-  "Neodymium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Nd+3]',
-  "N-Ethyldiisopropylamine": 'CC(N(CC)C(C)C)C',
-  "N-Fluorobenzenesulfonimide": 'FN(S(=O)(C1=CC=CC=C1)=O)S(=O)(C2=CC=CC=C2)=O',
+  'N-[(9S)-8α-Cinchonan-9-yl]quinoline-8-sulfonamide': 'O=S(C1=C2N=CC=CC2=CC=C1)(N[C@H]([C@@H]3C[C@H]4[C@H](C[N@@]3CC4)C=C)C5=CC=NC6=CC=CC=C56)=O',
+  'N-[2-(Trimethylsilyl)ethoxycarbonyloxy]succinimide': 'O=C(N1OC(OCC[Si](C)(C)C)=O)CCC1=O',
+  'N-Benzylcinchonidinium Chloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
+  'N-Benzylcinchoninium Chloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=CC=C35.[Cl-]',
+  'N-Benzylquinidinium Chloride': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
+  'N-Benzylquininium Chloride': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=[N+](CC4=CC=CC=C4)C5=CC=C(OC)C=C35.[Cl-]',
+  'N-Bromoacetamide': 'CC(NBr)=O',
+  'N-Bromophthalimide': 'O=C(N1Br)C2=CC=CC=C2C1=O',
+  'N-Bromosaccharin': 'O=C1N(Br)S(=O)(C2=C1C=CC=C2)=O',
+  'N-Bromosuccinimide': 'O=C(N1Br)CCC1=O',
+  NBS: 'O=C(N1Br)CCC1=O',
+  'n-Butanol': 'CCCCO',
+  'n-Butyllithium solution': '[Li]CCCC',
+  BuLi: '[Li]CCCC',
+  'N-Chlorobenzenesulfonamide sodium salt': 'O=S(C1=CC=CC=C1)([N-]Cl)=O.[Na+]',
+  'N-Chlorophthalimide': 'O=C(N1Cl)C2=CC=CC=C2C1=O',
+  'N-Chlorosaccharin': 'O=C1N(Cl)S(=O)(C2=C1C=CC=C2)=O',
+  'N-Chlorosuccinimide': 'O=C(N1Cl)CCC1=O',
+  NCS: 'O=C(N1Cl)CCC1=O',
+  Neodymium: '[Nd]',
+  'NEODYMIUM HYDRATE': '[H]O[H].[Nd]',
+  'Neodymium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Nd+3]',
+  'N-Ethyldiisopropylamine': 'CC(N(CC)C(C)C)C',
+  'N-Fluorobenzenesulfonimide': 'FN(S(=O)(C1=CC=CC=C1)=O)S(=O)(C2=CC=CC=C2)=O',
   "N-Fluoro-N'-(chloromethyl)triethylenediamine Bis(tetrafluoroborate)": 'F[N+]1(CC2)CC[N+]2(CCl)CC1.F[B-](F)(F)F.F[B-](F)(F)F',
-  "n-hexane": 'CCCCCC',
-  "N-Hydroxy-5-norbornene-2,3-dicarboximide": 'O=C(C1C2C3C=CC1C3)N(O)C2=O',
-  "N-Hydroxyphthalimide": 'O=C(N1O)C2=CC=CC=C2C1=O',
-  "N-Hydroxysuccinimide": 'O=C(N1O)CCC1=O',
-  "N-Hydroxysulfosuccinimide Sodium": 'O=C(N1O)C(S(=O)([O-])=O)CC1=O.[Na+]',
-  "N-Hydroxytetrachlorophthalimide": 'O=C(N1O)C2=C(Cl)C(Cl)=C(Cl)C(Cl)=C2C1=O',
-  "Nickel": '[Ni]',
-  "Nickel peroxide": '[O-][O-].[Ni+2]',
-  "Nickel(II) Benzenesulfonate Hexahydrate": 'O=S(C1=CC=CC=C1)([O-])=O.O=S(C2=CC=CC=C2)([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
-  "NICKEL(II) HYDROXIDE": '[Ni+2].[OH-].[OH-]',
-  "Nickel(II) peroxide hydrate ": '[O-][O-].[H]O[H].[Ni+2]',
-  "Nickel(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ni+2]',
-  "Nickel(II) p-Toluenesulfonate Hexahydrate": 'CC1=CC=C(S(=O)([O-])=O)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
-  "Niobium hydroxide oxide": '[Nb+5].[Nb+5].[Nb+5].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2]',
-  "N-Iodosaccharin": 'O=C1N(I)S(=O)(C2=C1C=CC=C2)=O',
-  "N-Iodosuccinimide": 'O=C(N1I)CCC1=O',
+  'n-hexane': 'CCCCCC',
+  'N-Hydroxy-5-norbornene-2,3-dicarboximide': 'O=C(C1C2C3C=CC1C3)N(O)C2=O',
+  'N-Hydroxyphthalimide': 'O=C(N1O)C2=CC=CC=C2C1=O',
+  'N-Hydroxysuccinimide': 'O=C(N1O)CCC1=O',
+  'N-Hydroxysulfosuccinimide Sodium': 'O=C(N1O)C(S(=O)([O-])=O)CC1=O.[Na+]',
+  'N-Hydroxytetrachlorophthalimide': 'O=C(N1O)C2=C(Cl)C(Cl)=C(Cl)C(Cl)=C2C1=O',
+  Nickel: '[Ni]',
+  'Nickel peroxide': '[O-][O-].[Ni+2]',
+  'Nickel(II) Benzenesulfonate Hexahydrate': 'O=S(C1=CC=CC=C1)([O-])=O.O=S(C2=CC=CC=C2)([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
+  'NICKEL(II) HYDROXIDE': '[Ni+2].[OH-].[OH-]',
+  'Nickel(II) peroxide hydrate ': '[O-][O-].[H]O[H].[Ni+2]',
+  'Nickel(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Ni+2]',
+  'Nickel(II) p-Toluenesulfonate Hexahydrate': 'CC1=CC=C(S(=O)([O-])=O)C=C1.CC2=CC=C(S(=O)([O-])=O)C=C2.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Ni+2]',
+  'Niobium hydroxide oxide': '[Nb+5].[Nb+5].[Nb+5].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2].[OH-].[O-2]',
+  'N-Iodosaccharin': 'O=C1N(I)S(=O)(C2=C1C=CC=C2)=O',
+  'N-Iodosuccinimide': 'O=C(N1I)CCC1=O',
   "N'-Isopropylidene-2-nitrobenzenesulfonohydrazide": 'O=S(C1=CC=CC=C1[N+]([O-])=O)(NN=C(C)C)=O',
-  "Nitric acid": 'O[N+]([O-])=O',
-  "HNO3": 'O[N+]([O-])=O',
-  "Nitrilotriacetic Acid": 'O=C(O)CN(CC(O)=O)CC(O)=O',
-  "nitromethane": 'C[N+]([O-])=O',
-  "MeNO2": 'C[N+]([O-])=O',
-  "Nitrosyl tetrafluoroborate": 'F[B-](F)(F)(N=O)F',
-  "N-Methylbis(trifluoroacetamide)": 'O=C(C(F)(F)F)N(C)C(C(F)(F)F)=O',
-  "N-Methyl-N-(trifluoromethylthio)aniline": 'FC(F)(F)SN(C)C1=CC=CC=C1',
-  "n-octanol": 'CCCCCCCCO',
-  "n-Octyl p-Toluenesulfonate": 'CC1=CC=C(S(=O)(OCCCCCCCC)=O)C=C1',
-  "n-Octylboronic Acid": 'CCCCCCCCB(O)O',
-  "n-Octylmagnesium Bromide": 'Br[Mg]CCCCCCCC',
-  "n-Octyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCC)C.[Br-]',
-  "n-Octyltrimethylammonium Chloride": 'C[N+](C)(CCCCCCCC)C.[Cl-]',
-  "Norbornadiene Rhodium(I) Chloride": 'C12C=CC(C2)C=C1.[Rh+].[Cl-]',
-  "N-Phenylbis(trifluoromethanesulfonimide)": 'O=S(N(S(=O)(C(F)(F)F)=O)C1=CC=CC=C1)(C(F)(F)F)=O',
-  "n-propanol": 'CCCO',
-  "N-Salicylideneaniline": 'OC1=CC=CC=C1/C=N/C2=CC=CC=C2',
-  "N-tert-Butyl-5-methylisoxazolium Perchlorate": 'CC1=CC=[N+](C(C)(C)C)O1.O=Cl(=O)([O-])=O',
-  "N-tert-Butylbenzenesulfenamide": 'CC(NSC1=CC=CC=C1)(C)C',
-  "N-tert-Butylbenzenesulfinimidoyl Chloride": 'CC(/N=S(Cl)/C1=CC=CC=C1)(C)C',
-  "N-Trimethylsilylimidazole": 'C[Si](N1C=NC=C1)(C)C',
+  'Nitric acid': 'O[N+]([O-])=O',
+  HNO3: 'O[N+]([O-])=O',
+  'Nitrilotriacetic Acid': 'O=C(O)CN(CC(O)=O)CC(O)=O',
+  nitromethane: 'C[N+]([O-])=O',
+  MeNO2: 'C[N+]([O-])=O',
+  'Nitrosyl tetrafluoroborate': 'F[B-](F)(F)(N=O)F',
+  'N-Methylbis(trifluoroacetamide)': 'O=C(C(F)(F)F)N(C)C(C(F)(F)F)=O',
+  'N-Methyl-N-(trifluoromethylthio)aniline': 'FC(F)(F)SN(C)C1=CC=CC=C1',
+  'n-octanol': 'CCCCCCCCO',
+  'n-Octyl p-Toluenesulfonate': 'CC1=CC=C(S(=O)(OCCCCCCCC)=O)C=C1',
+  'n-Octylboronic Acid': 'CCCCCCCCB(O)O',
+  'n-Octylmagnesium Bromide': 'Br[Mg]CCCCCCCC',
+  'n-Octyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCC)C.[Br-]',
+  'n-Octyltrimethylammonium Chloride': 'C[N+](C)(CCCCCCCC)C.[Cl-]',
+  'Norbornadiene Rhodium(I) Chloride': 'C12C=CC(C2)C=C1.[Rh+].[Cl-]',
+  'N-Phenylbis(trifluoromethanesulfonimide)': 'O=S(N(S(=O)(C(F)(F)F)=O)C1=CC=CC=C1)(C(F)(F)F)=O',
+  'n-propanol': 'CCCO',
+  'N-Salicylideneaniline': 'OC1=CC=CC=C1/C=N/C2=CC=CC=C2',
+  'N-tert-Butyl-5-methylisoxazolium Perchlorate': 'CC1=CC=[N+](C(C)(C)C)O1.O=Cl(=O)([O-])=O',
+  'N-tert-Butylbenzenesulfenamide': 'CC(NSC1=CC=CC=C1)(C)C',
+  'N-tert-Butylbenzenesulfinimidoyl Chloride': 'CC(/N=S(Cl)/C1=CC=CC=C1)(C)C',
+  'N-Trimethylsilylimidazole': 'C[Si](N1C=NC=C1)(C)C',
   "O-(3,4-Dihydro-4-oxo-1,2,3-benzotriazin-3-yl)-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=CC=C2C1=O.F[B-](F)(F)F',
   "O-(6-Chlorobenzotriazol-1-yl)-N,N,N',N'-tetramethyluronium Hexafluorophosphate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=C(Cl)C=C21.F[P-](F)(F)(F)(F)F',
   "O-(6-Chlorobenzotriazol-1-yl)-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1N=NC2=CC=C(Cl)C=C21.F[B-](F)(F)F',
@@ -1608,652 +1608,654 @@ export const reagents_kombi = {
   "O-[(Ethoxycarbonyl)cyanomethylenamino]-N,N,N',N'-tetramethyluronium Hexafluorophosphate": 'CN(C)C(N(C)C)=[O+]/N=C(C(OCC)=O)\\C#N.F[P-](F)(F)(F)(F)F',
   "O-[(Ethoxycarbonyl)cyanomethylenamino]-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]/N=C(C(OCC)=O)\\C#N.F[B-](F)(F)F',
   "O-[2-Oxo-1(2H)-pyridyl]-N,N,N',N'-tetramethyluronium Tetrafluoroborate": 'CN(C)C(N(C)C)=[O+]N1C=CC=CC1=O.F[B-](F)(F)F',
-  "o-Chloramine T": 'CC1=CC=CC=C1S([N-]Cl)(=O)=O.[Na+]',
-  "Octadecamethylcyclononasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Octadecyltriethoxysilane": 'CCO[Si](OCC)(CCCCCCCCCCCCCCCCCC)OCC',
-  "Octadecyltrimethoxysilane": 'CO[Si](OC)(CCCCCCCCCCCCCCCCCC)OC',
-  "Octakis(dimethylsilyloxy)octasilsesquioxane": 'C[SiH](C)O[Si]1(O[Si]2(O[SiH](C)C)O[Si](O3)(O[SiH](C)C)O[Si](O4)(O[SiH](C)C)O[Si]5(O[SiH](C)C)O2)O[Si]3(O[SiH](C)C)O[Si]4(O[SiH](C)C)O[Si](O5)(O[SiH](C)C)O1',
-  "Octamethylcyclotetrasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Octamethyltrisiloxane": 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
-  "Octaphenylcyclotetrasiloxane": 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O[Si](C8=CC=CC=C8)(C9=CC=CC=C9)O2)=CC=CC=C1',
-  "Octaphenyloctasilsesquioxane": 'C1([Si]2(O3)O[Si](O[Si](O4)(C5=CC=CC=C5)O[Si](O6)(C7=CC=CC=C7)O8)(C9=CC=CC=C9)O[Si]8(C%10=CC=CC=C%10)O[Si]3(C%11=CC=CC=C%11)O[Si]6(C%12=CC=CC=C%12)O[Si]4(C%13=CC=CC=C%13)O2)=CC=CC=C1',
-  "Osmium": '[Os]',
-  "Osmium Tetroxide": '[Os+8].[O-2].[O-2].[O-2].[O-2]',
-  "OsO4": '[Os+8].[O-2].[O-2].[O-2].[O-2]',
-  "O-TBDPS-D-Thr-N-Boc-L-tert-Leu-Diphenylphosphine": 'O=C(OC(C)(C)C)N[C@@H](C(C)(C)C)C(N[C@H]([C@@H](O[Si](C1=CC=CC=C1)(C(C)(C)C)C2=CC=CC=C2)C)CP(C3=CC=CC=C3)C4=CC=CC=C4)=O',
-  "O-tert-Butyl-L-threonine": 'N[C@@H]([C@H](OC(C)(C)C)C)C(O)=O',
-  "o-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=CC=C1C',
-  "Oxalyl bromide": 'O=C(Br)C(Br)=O',
-  "Oxalyl Chloride": 'O=C(Cl)C(Cl)=O',
-  "Oxone": '[O-]S(=O)(=O)[O-].[O-]S(=O)(=O)O.[O-]OS(=O)(=O)O.[O-]OS(=O)(=O)O.[K+].[K+].[K+].[K+].[K+]',
-  "Oxygen": 'OO',
-  "O2": 'OO',
-  "Ozone": 'O=[O+][O-]',
-  "O3": 'O=[O+][O-]',
-  "Palladium Carbon": '[Pd]',
-  "Pd-C": '[Pd]',
-  "PdC": '[Pd]',
-  "Pd/C": '[Pd]',
-  "Palladium hydroxide": '[Pd+2].[OH-].[OH-]',
-  "Pd(OH)2": '[Pd+2].[OH-].[OH-]',
-  "Palladium(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Pd+2]',
-  "Pd(OAc)2": 'CC([O-])=O.CC([O-])=O.[Pd+2]',
-  "Palladium(II) Chloride": '[Pd+2].[Cl-].[Cl-]',
-  "PdCl2": '[Pd+2].[Cl-].[Cl-]',
-  "Palladium(II) Trifluoroacetate": 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Pd+2]',
-  "Palmitic Acid": 'CCCCCCCCCCCCCCCC(O)=O',
-  "p-Cymene": 'CC1=CC=C(C(C)C)C=C1',
-  "Pentadecylmagnesium Bromide": 'Br[Mg]CCCCCCCCCCCCCCC',
-  "Pentafluoroanilinium Trifluoromethanesulfonate": 'F[N+](F)(F)C1=CC=CC(F)=C1F.O=S(C(F)(F)F)([O-])=O',
-  "Pentafluorobenzoyl Chloride": 'O=C(Cl)C1=C(F)C(F)=C(F)C(F)=C1F',
-  "Pentafluorophenol": 'OC1=C(F)C(F)=C(F)C(F)=C1F',
-  "Pentafluorophenyl 4-Nitrobenzenesulfonate": 'O=S(C1=CC=C([N+]([O-])=O)C=C1)(OC2=C(F)C(F)=C(F)C(F)=C2F)=O',
-  "Pentafluorophenyl Trifluoroacetate": 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)C(F)(F)F',
-  "Pentafluoropropionic Anhydride": 'O=C(OC(C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)F',
-  "pentane": 'CCCCC',
-  "Pentylboronic Acid": 'CCCCCB(O)O',
-  "Pentylmagnesium Bromide": 'Br[Mg]CCCCC',
-  "Pentylmagnesium chloride": 'Cl[Mg]CCCCC',
-  "Pentyltriethoxysilane": 'CCO[Si](OCC)(CCCCC)OCC',
-  "Periodic acid": 'O=I(=O)(O)=O',
-  "HIO4": 'O=I(=O)(O)=O',
-  "Perylene": 'C12=CC=CC(C3=CC=CC4=C3C5=CC=C4)=C1C5=CC=C2',
-  "PhenoFluor™ Mix": '[Cs]F.Cl[C+](N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N]1C(C(C(C)C)=CC=C3)=C3C(C)C.[Cl-]',
-  "Phenol nitroprusside solution": 'O=N[Fe-2](C#N)(C#N)(C#N)(C#N)C#N.OC1=CC=CC=C1',
-  "Phenyl Trifluoromethyl Sulfone": 'O=S(C(F)(F)F)(C1=CC=CC=C1)=O',
-  "Phenyl Trifluoromethyl Sulfoxide": 'O=S(C1=CC=CC=C1)C(F)(F)F',
-  "Phenyl[3-(trifluoromethyl)phenyl]iodonium triflate": 'FC(C1=CC([I+]C2=CC=CC=C2)=CC=C1)(F)F.O=S([O-])(C(F)(F)F)=O',
-  "Phenylarsine Oxide": 'O=[As]C1=CC=CC=C1',
-  "Phenylarsonic Acid": 'O=[As](C1=CC=CC=C1)(O)O',
-  "Phenylgermanium Trichloride": 'Cl[Ge](Cl)(Cl)C1=CC=CC=C1',
-  "Phenylmagnesium Bromide": 'Br[Mg]C1=CC=CC=C1',
-  "Phenylmagnesium Chloride": 'Cl[Mg]C1=CC=CC=C1',
-  "Phenylmagnesium Iodide": 'I[Mg]C1=CC=CC=C1',
-  "Phenylphosphonic Dichloride": 'O=P(C1=CC=CC=C1)(Cl)Cl',
-  "Phenylsilane": '[SiH3]C1=CC=CC=C1',
-  "Phenyltin Trichloride": 'Cl[Sn](Cl)(Cl)C1=CC=CC=C1',
-  "Phosphomolybdic acid": 'O=[Mo](OP(O)(O)=O)(O)=O',
-  "Phosphomolybdic Acid Ethanol Solution": 'O=[Mo](OP(O)(O)=O)(O)=O.CCO',
-  "Phosphomolybdic Acid Hydrate": 'O=[Mo](OP(O)(O)=O)(O)=O.[H]O[H]',
-  "Phosphorus(V) oxychloride": 'ClP(Cl)(Cl)=O',
-  "Phosphoryl chloride": 'O=P(Cl)(Cl)Cl',
-  "Phthalic Acid": 'O=C(O)C1=CC=CC=C1C(O)=O',
-  "Phthalocyanine": 'C1(C2=N3)=C(C=CC=C1)C(N2)=NC4=NC(C5=C4C=CC=C5)=NC(N6)=C7C=CC=CC7=C6N=C8C9=C(C=CC=C9)C3=N8',
-  "Piperidine": 'N1CCCCC1',
-  "Platinum": '[Pt]',
-  "Platinum(IV) Oxide": '[Pt+4].[O-2].[O-2]',
-  "Potassium (2-Formylphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC=C1C=O)F.[K+]',
-  "Potassium (2-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC=C1OC)F.[K+]',
-  "Potassium (3-Cyanophenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC(C#N)=C1)F.[K+]',
-  "Potassium (3-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC(OC)=C1)F.[K+]',
-  "Potassium (3-Nitrophenyl)trifluoroborate": 'F[B-](F)(C1=CC=CC([N+]([O-])=O)=C1)F.[K+]',
-  "Potassium (4-Cyanophenyl)trifluoroborate": 'F[B-](F)(C1=CC=C(C#N)C=C1)F.[K+]',
-  "Potassium (4-Methoxyphenyl)trifluoroborate": 'F[B-](F)(C1=CC=C(OC)C=C1)F.[K+]',
-  "Potassium (Acetoxymethyl)trifluoroborate": 'F[B-](F)(COC(C)=O)F.[K+]',
-  "Potassium (Bromomethyl)trifluoroborate": 'F[B-](F)(CBr)F.[K+]',
-  "Potassium (Iodomethyl)trifluoroborate": 'F[B-](F)(CI)F.[K+]',
-  "Potassium (Methoxymethyl)trifluoroborate": 'F[B-](F)(COC)F.[K+]',
-  "Potassium [[(tert-Butoxycarbonyl)amino]methyl]trifluoroborate": 'F[B-](F)(CNC(OC(C)(C)C)=O)F.[K+]',
-  "Potassium 2-iodo-5-methylbenzenesulfonate": 'O=S(C1=CC(C)=CC=C1I)([O-])=O.[K+]',
-  "Potassium 2-Thienyltrifluoroborate": 'F[B-](F)(C1=CC=CS1)F.[K+]',
-  "Potassium 3-Pyridyltrifluoroborate": 'F[B-](F)(C1=CC=CN=C1)F.[K+]',
-  "Potassium 4-Pyridyltrifluoroborate": 'F[B-](F)(C1=CC=NC=C1)F.[K+]',
-  "potassium acetate": 'CC([O-])=O.[K+]',
-  "KOAc": 'CC([O-])=O.[K+]',
-  "Potassium Allyltrifluoroborate": 'F[B-](F)(CC=C)F.[K+]',
-  "Potassium Bis(1-pyrazolyl)borohydride": 'N1([BH2-]N2N=CC=C2)N=CC=C1.[K+]',
-  "Potassium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[K+]',
-  "Potassium Borohydride": '[K+].[BH4-]',
-  "KBH4": '[K+].[BH4-]',
-  "Potassium butanolate": 'CC([O-])(C)C.[K+]',
-  "potassium carbonate": '[O-]C([O-])=O.[K+].[K+]',
-  "K2CO3": '[O-]C([O-])=O.[K+].[K+]',
-  "potassium chloride": '[K+].[Cl-]',
-  "KCl": '[K+].[Cl-]',
-  "Potassium cyanide": '[C-]#N.[K+]',
-  "KCN": '[C-]#N.[K+]',
-  "Potassium Cyclopropyltrifluoroborate": 'F[B-](F)(C1CC1)F.[K+]',
-  "Potassium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[K+].[K+]',
-  "Potassium ethoxide": 'CC[O-].[K+]',
-  "potassium fluoride": '[K+].[F-]',
-  "KF": '[K+].[F-]',
-  "Potassium Hexafluoroarsenate": 'F[As-](F)(F)(F)(F)F.[K+]',
-  "Potassium hydroxide": '[K+].[OH-]',
-  "Potassium hydroxide solution": '[K+].[OH-]',
-  "KOH": '[K+].[OH-]',
-  "potassium iodide": '[K+].[I-]',
-  "KI": '[K+].[I-]',
-  "Potassium methoxide": 'C[O-].[K+]',
-  "KOMe": 'C[O-].[K+]',
-  "Potassium monopersulfate triple salt": 'OS(=O)(=O)[O-].OS(=O)(=O)O[O-].OS(=O)(=O)O[O-].[O-]S(=O)(=O)[O-].[K+].[K+].[K+].[K+].[K+]',
-  "Potassium nitrate": '[N+](=O)([O-])[O-].[K+]',
-  "KNO3": '[N+](=O)([O-])[O-].[K+]',
-  "Potassium permanganate": 'O=[Mn](=O)(=O)([K])=O',
-  "KMnO4": 'O=[Mn](=O)(=O)([K])=O',
-  "Potassium Perrhenate": 'O=[Re](=O)([O-])=O.[K+]',
-  "Potassium perruthenate": 'O=[Ru](=O)([O-])=O.[K+]',
-  "potassium persulfate": '[O-]S(=O)(OOS(=O)([O-])=O)=O.[K+].[K+]',
-  "Potassium Phenyltrifluoroborate": 'F[B-](F)(C1=CC=CC=C1)F.[K+]',
-  "Potassium Trifluoro(trifluoromethyl)borate": 'FC([B-](F)(F)F)(F)F.[K+]',
-  "Potassium Trifluoroacetate": 'O=C([O-])C(F)(F)F.[K+]',
-  "Potassium Trimethoxy(trifluoromethyl)borate": 'FC([B-](OC)(OC)OC)(F)F.[K+]',
-  "Potassium trimethylsilanolate": '[O-][Si](C)(C)C.[K+]',
-  "Potassium Tris(1-pyrazolyl)borohydride": '[BH-](N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3.[K+]',
-  "Potassium Vinyltrifluoroborate": 'F[B-](F)(C=C)F.[K+]',
-  "Potassium o-Tolyltrifluoroborate": 'F[B-](F)(C1=CC=CC=C1C)F.[K+]',
-  "Potassium p-Tolyltrifluoroborate": 'F[B-](F)(C1=CC=C(C)C=C1)F.[K+]',
-  "Potassium tert-Butoxide": 'CC(C)([O-])C.[K+]',
-  "Potassium tert-Pentoxide": 'CCC(C)([O-])C.[K+]',
-  "Propionic Acid": 'CCC(O)=O',
-  "Propylboronic Acid": 'CCCB(O)O',
-  "Propylmagnesium Bromide": 'Br[Mg]CCC',
-  "Propylmagnesium chloride": 'Cl[Mg]CCC',
-  "p-Toluenesulfonic Acid Monohydrate": 'CC1=CC=C(S(=O)(O)=O)C=C1.[H]O[H]',
-  "p-Tolylmagnesium Bromide": 'Br[Mg]C1=CC=C(C)C=C1',
-  "Pyridine": 'C1=CN=CC=C1',
-  "Pyridine - Sulfur Trioxide Complex": 'O=S(=O)=O.C1=CC=NC=C1',
-  "Pyridine Iodine Monochloride": 'IC1=NC=CC=C1Cl',
-  "Pyridine-2-sulfonyl Fluoride": 'O=S(C1=NC=CC=C1)(F)=O',
-  "Pyridinium 3-Nitrobenzenesulfonate": 'O=S(C1=CC=CC([N+]([O-])=O)=C1)([O-])=O.C2=CC=CC=[NH+]2',
-  "Pyridinium Bromide Perbromide": 'BrBr.C1=[NH+]C=CC=C1.[Br-]',
-  "Pyridinium chlorochromate": '[O-][Cr](=O)(Cl)=O.C1=CC=CC=[NH+]1',
-  "Pyridinium dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=CC=CC=[NH+]1.C2=CC=CC=[NH+]2',
-  "Pyridinium Fluorochromate": '[O-][Cr](=O)(F)=O.C1=CC=CC=[NH+]1',
-  "Pyridinium p-Toluenesulfonate": 'CC1=CC=C(S(=O)([O-])=O)C=C1.C2=CC=CC=[NH+]2',
-  "Pyrimidine-2-sulfonyl Fluoride": 'O=S(C1=NC=CC=N1)(F)=O',
-  "Quincoridine": 'OC[C@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
-  "Quincorine": 'OC[C@@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
-  "Quinidine": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
-  "Quinidine Sulfate Dihydrate": 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
-  "Quinine": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
-  "Quinine Hydrochloride Dihydrate": 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl.[H]O[H].[H]O[H]',
-  "Quinolinium Dichromate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C12=CC=C[NH+]=C1C=CC=C2.C34=CC=C[NH+]=C3C=CC=C4',
-  "Quinuclidine": 'N12CCC(CC2)CC1',
-  "Rhenium": '[Re]',
-  "Rhodium": '[Rh]',
-  "rhodium trihydroxide": '[Rh+3].[OH-].[OH-].[OH-]',
-  "Rhodium(II) Acetate": 'CC([O-])=O.CC([O-])=O.[Rh+2]',
-  "Rhodium(II) Octanoate": 'CCCCCCCC([O-])=O.CCCCCCCC([O-])=O.[Rh+2]',
-  "RHODIUM(III) OXIDE HYDRATE": '[H]O[H].[Rh+3].[Rh+3].[O-2].[O-2].[O-2]',
-  "Rubidium hydroxide": '[Rb+].[OH-]',
-  "Ruthenium": '[Ru]',
-  "Ruthenium(III) Chloride": '[Ru+3].[Cl-].[Cl-].[Cl-]',
-  "RuCl3": '[Ru+3].[Cl-].[Cl-].[Cl-]',
+  'o-Chloramine T': 'CC1=CC=CC=C1S([N-]Cl)(=O)=O.[Na+]',
+  Octadecamethylcyclononasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Octadecyltriethoxysilane: 'CCO[Si](OCC)(CCCCCCCCCCCCCCCCCC)OCC',
+  Octadecyltrimethoxysilane: 'CO[Si](OC)(CCCCCCCCCCCCCCCCCC)OC',
+  'Octakis(dimethylsilyloxy)octasilsesquioxane': 'C[SiH](C)O[Si]1(O[Si]2(O[SiH](C)C)O[Si](O3)(O[SiH](C)C)O[Si](O4)(O[SiH](C)C)O[Si]5(O[SiH](C)C)O2)O[Si]3(O[SiH](C)C)O[Si]4(O[SiH](C)C)O[Si](O5)(O[SiH](C)C)O1',
+  Octamethylcyclotetrasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  Octamethyltrisiloxane: 'C[Si](C)(C)O[Si](C)(C)O[Si](C)(C)C',
+  Octaphenylcyclotetrasiloxane: 'C1([Si]2(C3=CC=CC=C3)O[Si](C4=CC=CC=C4)(C5=CC=CC=C5)O[Si](C6=CC=CC=C6)(C7=CC=CC=C7)O[Si](C8=CC=CC=C8)(C9=CC=CC=C9)O2)=CC=CC=C1',
+  Octaphenyloctasilsesquioxane: 'C1([Si]2(O3)O[Si](O[Si](O4)(C5=CC=CC=C5)O[Si](O6)(C7=CC=CC=C7)O8)(C9=CC=CC=C9)O[Si]8(C%10=CC=CC=C%10)O[Si]3(C%11=CC=CC=C%11)O[Si]6(C%12=CC=CC=C%12)O[Si]4(C%13=CC=CC=C%13)O2)=CC=CC=C1',
+  Osmium: '[Os]',
+  'Osmium Tetroxide': '[Os+8].[O-2].[O-2].[O-2].[O-2]',
+  OsO4: '[Os+8].[O-2].[O-2].[O-2].[O-2]',
+  'O-TBDPS-D-Thr-N-Boc-L-tert-Leu-Diphenylphosphine': 'O=C(OC(C)(C)C)N[C@@H](C(C)(C)C)C(N[C@H]([C@@H](O[Si](C1=CC=CC=C1)(C(C)(C)C)C2=CC=CC=C2)C)CP(C3=CC=CC=C3)C4=CC=CC=C4)=O',
+  'O-tert-Butyl-L-threonine': 'N[C@@H]([C@H](OC(C)(C)C)C)C(O)=O',
+  'o-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=CC=C1C',
+  'Oxalyl bromide': 'O=C(Br)C(Br)=O',
+  'Oxalyl Chloride': 'O=C(Cl)C(Cl)=O',
+  Oxone: '[O-]S(=O)(=O)[O-].[O-]S(=O)(=O)O.[O-]OS(=O)(=O)O.[O-]OS(=O)(=O)O.[K+].[K+].[K+].[K+].[K+]',
+  Oxygen: 'OO',
+  O2: 'OO',
+  Ozone: 'O=[O+][O-]',
+  O3: 'O=[O+][O-]',
+  'Palladium Carbon': '[Pd]',
+  'Pd-C': '[Pd]',
+  PdC: '[Pd]',
+  'Pd/C': '[Pd]',
+  'Palladium hydroxide': '[Pd+2].[OH-].[OH-]',
+  'Pd(OH)2': '[Pd+2].[OH-].[OH-]',
+  'Palladium(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Pd+2]',
+  'Pd(OAc)2': 'CC([O-])=O.CC([O-])=O.[Pd+2]',
+  'Palladium(II) Chloride': '[Pd+2].[Cl-].[Cl-]',
+  PdCl2: '[Pd+2].[Cl-].[Cl-]',
+  'Palladium(II) Trifluoroacetate': 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Pd+2]',
+  'Palmitic Acid': 'CCCCCCCCCCCCCCCC(O)=O',
+  'p-Cymene': 'CC1=CC=C(C(C)C)C=C1',
+  'Pentadecylmagnesium Bromide': 'Br[Mg]CCCCCCCCCCCCCCC',
+  'Pentafluoroanilinium Trifluoromethanesulfonate': 'F[N+](F)(F)C1=CC=CC(F)=C1F.O=S(C(F)(F)F)([O-])=O',
+  'Pentafluorobenzoyl Chloride': 'O=C(Cl)C1=C(F)C(F)=C(F)C(F)=C1F',
+  Pentafluorophenol: 'OC1=C(F)C(F)=C(F)C(F)=C1F',
+  'Pentafluorophenyl 4-Nitrobenzenesulfonate': 'O=S(C1=CC=C([N+]([O-])=O)C=C1)(OC2=C(F)C(F)=C(F)C(F)=C2F)=O',
+  'Pentafluorophenyl Trifluoroacetate': 'O=C(OC1=C(F)C(F)=C(F)C(F)=C1F)C(F)(F)F',
+  'Pentafluoropropionic Anhydride': 'O=C(OC(C(F)(F)C(F)(F)F)=O)C(F)(F)C(F)(F)F',
+  pentane: 'CCCCC',
+  'Pentylboronic Acid': 'CCCCCB(O)O',
+  'Pentylmagnesium Bromide': 'Br[Mg]CCCCC',
+  'Pentylmagnesium chloride': 'Cl[Mg]CCCCC',
+  Pentyltriethoxysilane: 'CCO[Si](OCC)(CCCCC)OCC',
+  'Periodic acid': 'O=I(=O)(O)=O',
+  HIO4: 'O=I(=O)(O)=O',
+  Perylene: 'C12=CC=CC(C3=CC=CC4=C3C5=CC=C4)=C1C5=CC=C2',
+  'PhenoFluor™ Mix': '[Cs]F.Cl[C+](N(C=C1)C2=C(C(C)C)C=CC=C2C(C)C)=[N]1C(C(C(C)C)=CC=C3)=C3C(C)C.[Cl-]',
+  'Phenol nitroprusside solution': 'O=N[Fe-2](C#N)(C#N)(C#N)(C#N)C#N.OC1=CC=CC=C1',
+  'Phenyl Trifluoromethyl Sulfone': 'O=S(C(F)(F)F)(C1=CC=CC=C1)=O',
+  'Phenyl Trifluoromethyl Sulfoxide': 'O=S(C1=CC=CC=C1)C(F)(F)F',
+  'Phenyl[3-(trifluoromethyl)phenyl]iodonium triflate': 'FC(C1=CC([I+]C2=CC=CC=C2)=CC=C1)(F)F.O=S([O-])(C(F)(F)F)=O',
+  'Phenylarsine Oxide': 'O=[As]C1=CC=CC=C1',
+  'Phenylarsonic Acid': 'O=[As](C1=CC=CC=C1)(O)O',
+  'Phenylgermanium Trichloride': 'Cl[Ge](Cl)(Cl)C1=CC=CC=C1',
+  'Phenylmagnesium Bromide': 'Br[Mg]C1=CC=CC=C1',
+  'Phenylmagnesium Chloride': 'Cl[Mg]C1=CC=CC=C1',
+  'Phenylmagnesium Iodide': 'I[Mg]C1=CC=CC=C1',
+  'Phenylphosphonic Dichloride': 'O=P(C1=CC=CC=C1)(Cl)Cl',
+  Phenylsilane: '[SiH3]C1=CC=CC=C1',
+  'Phenyltin Trichloride': 'Cl[Sn](Cl)(Cl)C1=CC=CC=C1',
+  'Phosphomolybdic acid': 'O=[Mo](OP(O)(O)=O)(O)=O',
+  'Phosphomolybdic Acid Ethanol Solution': 'O=[Mo](OP(O)(O)=O)(O)=O.CCO',
+  'Phosphomolybdic Acid Hydrate': 'O=[Mo](OP(O)(O)=O)(O)=O.[H]O[H]',
+  'Phosphorus(V) oxychloride': 'ClP(Cl)(Cl)=O',
+  'Phosphoryl chloride': 'O=P(Cl)(Cl)Cl',
+  'Phthalic Acid': 'O=C(O)C1=CC=CC=C1C(O)=O',
+  Phthalocyanine: 'C1(C2=N3)=C(C=CC=C1)C(N2)=NC4=NC(C5=C4C=CC=C5)=NC(N6)=C7C=CC=CC7=C6N=C8C9=C(C=CC=C9)C3=N8',
+  Piperidine: 'N1CCCCC1',
+  Platinum: '[Pt]',
+  'Platinum(IV) Oxide': '[Pt+4].[O-2].[O-2]',
+  'Potassium (2-Formylphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC=C1C=O)F.[K+]',
+  'Potassium (2-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC=C1OC)F.[K+]',
+  'Potassium (3-Cyanophenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC(C#N)=C1)F.[K+]',
+  'Potassium (3-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC(OC)=C1)F.[K+]',
+  'Potassium (3-Nitrophenyl)trifluoroborate': 'F[B-](F)(C1=CC=CC([N+]([O-])=O)=C1)F.[K+]',
+  'Potassium (4-Cyanophenyl)trifluoroborate': 'F[B-](F)(C1=CC=C(C#N)C=C1)F.[K+]',
+  'Potassium (4-Methoxyphenyl)trifluoroborate': 'F[B-](F)(C1=CC=C(OC)C=C1)F.[K+]',
+  'Potassium (Acetoxymethyl)trifluoroborate': 'F[B-](F)(COC(C)=O)F.[K+]',
+  'Potassium (Bromomethyl)trifluoroborate': 'F[B-](F)(CBr)F.[K+]',
+  'Potassium (Iodomethyl)trifluoroborate': 'F[B-](F)(CI)F.[K+]',
+  'Potassium (Methoxymethyl)trifluoroborate': 'F[B-](F)(COC)F.[K+]',
+  'Potassium [[(tert-Butoxycarbonyl)amino]methyl]trifluoroborate': 'F[B-](F)(CNC(OC(C)(C)C)=O)F.[K+]',
+  'Potassium 2-iodo-5-methylbenzenesulfonate': 'O=S(C1=CC(C)=CC=C1I)([O-])=O.[K+]',
+  'Potassium 2-Thienyltrifluoroborate': 'F[B-](F)(C1=CC=CS1)F.[K+]',
+  'Potassium 3-Pyridyltrifluoroborate': 'F[B-](F)(C1=CC=CN=C1)F.[K+]',
+  'Potassium 4-Pyridyltrifluoroborate': 'F[B-](F)(C1=CC=NC=C1)F.[K+]',
+  'potassium acetate': 'CC([O-])=O.[K+]',
+  KOAc: 'CC([O-])=O.[K+]',
+  'Potassium Allyltrifluoroborate': 'F[B-](F)(CC=C)F.[K+]',
+  'Potassium Bis(1-pyrazolyl)borohydride': 'N1([BH2-]N2N=CC=C2)N=CC=C1.[K+]',
+  'Potassium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[K+]',
+  'Potassium Borohydride': '[K+].[BH4-]',
+  KBH4: '[K+].[BH4-]',
+  'Potassium butanolate': 'CC([O-])(C)C.[K+]',
+  'potassium carbonate': '[O-]C([O-])=O.[K+].[K+]',
+  K2CO3: '[O-]C([O-])=O.[K+].[K+]',
+  'potassium chloride': '[K+].[Cl-]',
+  KCl: '[K+].[Cl-]',
+  'Potassium cyanide': '[C-]#N.[K+]',
+  KCN: '[C-]#N.[K+]',
+  'Potassium Cyclopropyltrifluoroborate': 'F[B-](F)(C1CC1)F.[K+]',
+  'Potassium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[K+].[K+]',
+  'Potassium ethoxide': 'CC[O-].[K+]',
+  'potassium fluoride': '[K+].[F-]',
+  KF: '[K+].[F-]',
+  'Potassium Hexafluoroarsenate': 'F[As-](F)(F)(F)(F)F.[K+]',
+  'Potassium hydroxide': '[K+].[OH-]',
+  'Potassium hydroxide solution': '[K+].[OH-]',
+  KOH: '[K+].[OH-]',
+  'potassium iodide': '[K+].[I-]',
+  KI: '[K+].[I-]',
+  'Potassium methoxide': 'C[O-].[K+]',
+  KOMe: 'C[O-].[K+]',
+  'Potassium monopersulfate triple salt': 'OS(=O)(=O)[O-].OS(=O)(=O)O[O-].OS(=O)(=O)O[O-].[O-]S(=O)(=O)[O-].[K+].[K+].[K+].[K+].[K+]',
+  'Potassium nitrate': '[N+](=O)([O-])[O-].[K+]',
+  KNO3: '[N+](=O)([O-])[O-].[K+]',
+  'Potassium permanganate': 'O=[Mn](=O)(=O)([K])=O',
+  KMnO4: 'O=[Mn](=O)(=O)([K])=O',
+  'Potassium Perrhenate': 'O=[Re](=O)([O-])=O.[K+]',
+  'Potassium perruthenate': 'O=[Ru](=O)([O-])=O.[K+]',
+  'potassium persulfate': '[O-]S(=O)(OOS(=O)([O-])=O)=O.[K+].[K+]',
+  'Potassium Phenyltrifluoroborate': 'F[B-](F)(C1=CC=CC=C1)F.[K+]',
+  'Potassium Trifluoro(trifluoromethyl)borate': 'FC([B-](F)(F)F)(F)F.[K+]',
+  'Potassium Trifluoroacetate': 'O=C([O-])C(F)(F)F.[K+]',
+  'Potassium Trimethoxy(trifluoromethyl)borate': 'FC([B-](OC)(OC)OC)(F)F.[K+]',
+  'Potassium trimethylsilanolate': '[O-][Si](C)(C)C.[K+]',
+  'Potassium Tris(1-pyrazolyl)borohydride': '[BH-](N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3.[K+]',
+  'Potassium Vinyltrifluoroborate': 'F[B-](F)(C=C)F.[K+]',
+  'Potassium o-Tolyltrifluoroborate': 'F[B-](F)(C1=CC=CC=C1C)F.[K+]',
+  'Potassium p-Tolyltrifluoroborate': 'F[B-](F)(C1=CC=C(C)C=C1)F.[K+]',
+  'Potassium tert-Butoxide': 'CC(C)([O-])C.[K+]',
+  'Potassium tert-Pentoxide': 'CCC(C)([O-])C.[K+]',
+  'Propionic Acid': 'CCC(O)=O',
+  'Propylboronic Acid': 'CCCB(O)O',
+  'Propylmagnesium Bromide': 'Br[Mg]CCC',
+  'Propylmagnesium chloride': 'Cl[Mg]CCC',
+  'p-Toluenesulfonic Acid Monohydrate': 'CC1=CC=C(S(=O)(O)=O)C=C1.[H]O[H]',
+  'p-Tolylmagnesium Bromide': 'Br[Mg]C1=CC=C(C)C=C1',
+  Pyridine: 'C1=CN=CC=C1',
+  'Pyridine - Sulfur Trioxide Complex': 'O=S(=O)=O.C1=CC=NC=C1',
+  'Pyridine Iodine Monochloride': 'IC1=NC=CC=C1Cl',
+  'Pyridine-2-sulfonyl Fluoride': 'O=S(C1=NC=CC=C1)(F)=O',
+  'Pyridinium 3-Nitrobenzenesulfonate': 'O=S(C1=CC=CC([N+]([O-])=O)=C1)([O-])=O.C2=CC=CC=[NH+]2',
+  'Pyridinium Bromide Perbromide': 'BrBr.C1=[NH+]C=CC=C1.[Br-]',
+  'Pyridinium chlorochromate': '[O-][Cr](=O)(Cl)=O.C1=CC=CC=[NH+]1',
+  'Pyridinium dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C1=CC=CC=[NH+]1.C2=CC=CC=[NH+]2',
+  'Pyridinium Fluorochromate': '[O-][Cr](=O)(F)=O.C1=CC=CC=[NH+]1',
+  'Pyridinium p-Toluenesulfonate': 'CC1=CC=C(S(=O)([O-])=O)C=C1.C2=CC=CC=[NH+]2',
+  'Pyrimidine-2-sulfonyl Fluoride': 'O=S(C1=NC=CC=N1)(F)=O',
+  Quincoridine: 'OC[C@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
+  Quincorine: 'OC[C@@H]1C[C@@H]2CC[N@]1C[C@@H]2C=C',
+  Quinidine: 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
+  'Quinidine Sulfate Dihydrate': 'O[C@H]([C@@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.O=S(O)(O)=O.[H]O[H].[H]O[H]',
+  Quinine: 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34',
+  'Quinine Hydrochloride Dihydrate': 'O[C@@H]([C@H]1C[C@H]2[C@H](C[N@@]1CC2)C=C)C3=CC=NC4=CC=C(OC)C=C34.[H]Cl.[H]O[H].[H]O[H]',
+  'Quinolinium Dichromate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.C12=CC=C[NH+]=C1C=CC=C2.C34=CC=C[NH+]=C3C=CC=C4',
+  Quinuclidine: 'N12CCC(CC2)CC1',
+  Rhenium: '[Re]',
+  Rhodium: '[Rh]',
+  'rhodium trihydroxide': '[Rh+3].[OH-].[OH-].[OH-]',
+  'Rhodium(II) Acetate': 'CC([O-])=O.CC([O-])=O.[Rh+2]',
+  'Rhodium(II) Octanoate': 'CCCCCCCC([O-])=O.CCCCCCCC([O-])=O.[Rh+2]',
+  'RHODIUM(III) OXIDE HYDRATE': '[H]O[H].[Rh+3].[Rh+3].[O-2].[O-2].[O-2]',
+  'Rubidium hydroxide': '[Rb+].[OH-]',
+  Ruthenium: '[Ru]',
+  'Ruthenium(III) Chloride': '[Ru+3].[Cl-].[Cl-].[Cl-]',
+  RuCl3: '[Ru+3].[Cl-].[Cl-].[Cl-]',
   "Salcomine [=N,N'-Bis(salicylidene)ethylenediiminocobalt(II)]": '[O-]C(C=CC=C1)=C1/C=N/CC/N=C/C2=CC=CC=C2[O-].[Co+2]',
-  "Samarium": '[Sm]',
-  "Samarium(II) Iodide": '[Sm+2].[I-].[I-]',
-  "Scandium": '[Sc]',
-  "Scandium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sc+3]',
-  "sec-Butyllithium": '[Li]C(C)CC',
-  "sec-Butylmagnesium Bromide": 'Br[Mg]C(C)CC',
-  "sec-Butylmagnesium chloride": 'Cl[Mg]C(C)CC',
-  "sec-Butylmagnesium Chloride - Lithium Chloride": 'Cl[Mg]C(C)CC.[Li+].[Cl-]',
-  "Selenium dioxide": 'O=[Se]=O',
-  "SeO2": 'O=[Se]=O',
-  "S-Ethyl Trifluorothioacetate": 'O=C(SCC)C(F)(F)F',
-  "Silver": '[Ag]',
-  "Silver Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.[Ag+]',
-  "Silver(I) Trifluoromethanethiolate": '[S-]C(F)(F)F.[Ag+]',
-  "Silver(II) picolinate": 'O=C([O-])C1=NC=CC=C1.O=C([O-])C2=NC=CC=C2.[Ag+2]',
-  "Silver(II) Pyridine-2-carboxylate": 'O=C(C1=NC=CC=C1)[O-].O=C(C2=NC=CC=C2)[O-].[Ag+2]',
-  "Sodium (Trihydroxy)phenylborate": 'O[B-](O)(O)C1=CC=CC=C1.[Na+]',
-  "Sodium amide": '[Na+].[NH2-]',
-  "NaNH2": '[Na+].[NH2-]',
-  "Sodium ascorbate": '[O-]C([C@H](O1)[C@H](CO)O)=C(O)C1=O.[Na+]',
-  "sodium azide": '[N-]=[N+]=[N-].[Na+]',
-  "NaN3": '[N-]=[N+]=[N-].[Na+]',
-  "Sodium Bis(2-methoxyethoxy)aluminum Dihydride": 'COCCO[Al+]OCCOC.[Na+].[H-].[H-]',
-  "Sodium Bis(trimethylsilyl)amide": 'C[Si]([N-][Si](C)(C)C)(C)C.[Na+]',
-  "Sodium Borohydride": '[Na+].[BH4-]',
-  "NaBH4": '[Na+].[BH4-]',
-  "sodium bromate": 'O=Br([O-])=O.[Na+]',
-  "sodium bromide": '[Na+].[Br-]',
-  "NaBr": '[Na+].[Br-]',
-  "Sodium Bromodifluoroacetate": 'O=C([O-])C(F)(Br)F.[Na+]',
-  "sodium carbonate": '[O-]C([O-])=O.[Na+].[Na+]',
-  "Na2CO3": '[O-]C([O-])=O.[Na+].[Na+]',
-  "Sodium carbonate decahydrate": '[O-]C([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
-  "sodium chloride": '[Na+].[Cl-]',
-  "NaCl": '[Na+].[Cl-]',
-  "Sodium Chlorodifluoroacetate": 'O=C([O-])C(F)(Cl)F.[Na+]',
-  "Sodium Cyanoborohydride": '[BH3-]C#N.[Na+]',
-  "sodium cycanide": '[C-]#N.[Na+]',
-  "NaCN": '[C-]#N.[Na+]',
-  "sodium D,L lactate": 'OC(C)C([O-])=O.[Na+]',
-  "Sodium Dichloroisocyanurate": 'ClN1C([N-]C(N(C1=O)Cl)=O)=O.[Na+]',
-  "Sodium dichloroisocyanurate dihydrate": 'O=C1N=C([O-])N(Cl)C(N1Cl)=O.O.O.[Na+]',
-  "Sodium dichromate dihydrate": 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[H]O[H].[H]O[H].[Na+].[Na+]',
-  "Sodium Diphenylphosphinobenzene-3-sulfonate": 'O=S(C1=CC(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=C1)([O-])=O.[Na+]',
-  "Sodium Ethoxide": 'CC[O-].[Na+]',
-  "NaOEt": 'CC[O-].[Na+]',
-  "sodium fluoride": '[Na+].[F-]',
-  "NaF": '[Na+].[F-]',
-  "Sodium hydride": '[NaH]',
-  "NaH": '[NaH]',
-  "sodium hydrogen difluoride": '[Na+].[H+].[F-].[F-]',
-  "Sodium hydrogen periodate": 'O=I(=O)([O-])=O.O=I(=O)([O-])=O.[Na+].[H+]',
-  "Sodium Hydroxide": '[Na+].[OH-]',
-  "NaOH": '[Na+].[OH-]',
-  "Sodium Hypochlorite Pentahydrate": 'Cl[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+]',
-  "Sodium iodide": '[Na+].[I-]',
-  "NaI": '[Na+].[I-]',
-  "sodium L-tartrate": 'O[C@H]([C@H](C([O-])=O)O)C([O-])=O.[Na+].[Na+]',
-  "Sodium Methoxide": 'C[O-].[Na+]',
-  "NaOMe": 'C[O-].[Na+]',
-  "Sodium nitrate": '[N+](=O)([O-])[O-].[Na+]',
-  "NaNO3": '[N+](=O)([O-])[O-].[Na+]',
-  "Sodium percarbonate": 'O=C(O[O-])[O-].[Na+].[Na+]',
-  "sodium perchlorate": 'O=Cl(=O)([O-])=O.[Na+]',
-  "Sodium permanganate": 'O=[Mn](=O)([O-])=O.[Na+]',
-  "NaMnO4": 'O=[Mn](=O)([O-])=O.[Na+]',
-  "Sodium peroxide": '[O-][O-].[Na+].[Na+]',
-  "Na2O2": '[O-][O-].[Na+].[Na+]',
-  "sodium persulfate": '[O-]S(=O)(OOS(=O)([O-])=O)=O.[Na+].[Na+]',
-  "Sodium phosphomolybdate hydrate": 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[Na+]',
-  "sodium sulfite": 'O=S([O-])[O-].[Na+].[Na+]',
-  "Sodium Tellurite Pentahydrate": 'O=[Te]([O-])[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
-  "sodium tetraborate": 'O[B-]12OBO[B-](OBO2)(O)O1.[Na+].[Na+]',
-  "Sodium Tetrachloropalladate(II)": 'Cl[Pd-2](Cl)(Cl)Cl.[Na+].[Na+]',
-  "Sodium Tetrafluoroborate": 'F[B-](F)(F)F.[Na+]',
-  "Sodium Triacetoxyborohydride": 'O=C(O[BH-](OC(C)=O)OC(C)=O)C.[Na+]',
-  "Sodium Trifluoroacetate": 'O=C([O-])C(F)(F)F.[Na+]',
-  "Sodium Trifluoromethanesulfinate": 'O=S(C(F)(F)F)[O-].[Na+]',
-  "Sodium trimethylsilanolate": '[O-][Si](C)(C)C.[Na+]',
-  "Sodium Tris(1,1,1,3,3,3-hexafluoroisopropoxy)borohydride": 'FC(F)(C(C(F)(F)F)O[BH-](OC(C(F)(F)F)C(F)(F)F)OC(C(F)(F)F)C(F)(F)F)F.[Na+]',
-  "Sodium tert-Butoxide": 'CC(C)([O-])C.[Na+]',
-  "Sodium tert-Pentoxide": 'CCC(C)([O-])C.[Na+]',
-  "Sorbic Acid": 'C/C=C/C=C/C(O)=O',
-  "Strontium hydroxide": '[Sr+2].[OH-].[OH-]',
-  "STRONTIUM HYDROXIDE OCTAHYDRATE": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Sr+2].[OH-].[OH-]',
-  "Strontium peroxide": '[O-][O-].[Sr+2]',
-  "Succinic Acid": 'O=C(O)CCC(O)=O',
-  "Sulfanilic Acid": 'O=S(O)(C1=CC=C(N)C=C1)=O',
-  "sulfolane": 'O=S1(CCCC1)=O',
-  "Sulfur Trioxide": 'O=S(=O)=O',
-  "SO3": 'O=S(=O)=O',
-  "Sulfur Trioxide - Triethylamine Complex": 'O=S(=O)=O.CCN(CC)CC',
-  "Sulfuric acid": 'O=S(O)(O)=O',
-  "H2SO4": 'O=S(O)(O)=O',
-  "Sulfuryl chloride": 'O=S(Cl)(Cl)=O',
-  "SO2Cl2": 'O=S(Cl)(Cl)=O',
-  "Tebbe reagent": 'C[Al-]1(C[Ti+2][Cl+]1)C.[cH-]1cccc1.[cH-]1cccc1',
-  "Telluric Acid": 'O=[Te](O)(O)=O',
-  "Tellurium(IV) Oxide": '[Te+4].[O-2].[O-2]',
-  "Terbium": '[Tb]',
-  "tert-Butyl hydroperoxide": 'CC(C)(OO)C',
-  "TBHP": 'CC(C)(OO)C',
-  "tert-Butyl Hydroperoxide": 'CC(C)(OO)C',
-  "tert-Butyldimethylsilane": 'C[SiH](C(C)(C)C)C',
-  "tert-Butyldimethylsilanol": 'O[Si](C)(C(C)(C)C)C',
-  "tert-Butyldiphenylsilane": 'CC([SiH](C1=CC=CC=C1)C2=CC=CC=C2)(C)C',
-  "tert-Butyllithium": '[Li]C(C)(C)C',
-  "tBuLi": '[Li]C(C)(C)C',
-  "tert-Butylmagnesium Chloride": 'Cl[Mg]C(C)(C)C',
-  "tert-Butylmethoxyphenylsilyl Bromide": 'CO[Si](C(C)(C)C)(Br)C1=CC=CC=C1',
-  "Tetra(decyl)ammonium Bromide": 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[Br-]',
-  "Tetraallyltin": 'C=CC[Sn](CC=C)(CC=C)CC=C',
-  "Tetraamylammonium Bromide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Br-]',
-  "Tetraamylammonium Chloride": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Cl-]',
-  "Tetraamylammonium Iodide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[I-]',
-  "Tetrabromofluorescein": 'O=C1OC2(C3=C(OC4=C2C=CC(O)=C4)C=C(O)C=C3)C5=C1C(Br)=C(Br)C(Br)=C5Br',
-  "Tetrabutyl Orthosilicate": 'CCCCO[Si](OCCCC)(OCCCC)OCCCC',
-  "Tetrabutyl Orthotitanate": 'CCCCO[Ti](OCCCC)(OCCCC)OCCCC',
-  "Tetrabutyl Orthotitanate Tetramer": '[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[Ti+4].[Ti+4].[O-2].[O-2].[Ti+4].[O-2].[Ti+4]',
-  "Tetrabutylammonium (meta)periodate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=I(=O)([O-])=O',
-  "Tetrabutylammonium Acetate": 'CCCC[N+](CCCC)(CCCC)CCCC.CC([O-])=O',
-  "Tetrabutylammonium Bifluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[H]F.[F-]',
-  "Tetrabutylammonium Borohydride": 'CCCC[N+](CCCC)(CCCC)CCCC.[BH4-]',
-  "Tetrabutylammonium Bromide": 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-]',
-  "Tetrabutylammonium Chloride": 'CCCC[N+](CCCC)(CCCC)CCCC.[Cl-]',
-  "Tetrabutylammonium chlorochromate": 'CCCC[N+](CCCC)(CCCC)CCCC.[O-][Cr](=O)(Cl)=O',
-  "Tetrabutylammonium Difluorotriphenylstannate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[Sn-](C1=CC=CC=C1)(C2=CC=CC=C2)(F)C3=CC=CC=C3',
-  "Tetrabutylammonium Dihydrogen Trifluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[H+].[H+].[F-].[F-].[F-]',
-  "Tetrabutylammonium ethoxide": 'CCCC[N+](CCCC)(CCCC)CCCC.CC[O-]',
-  "Tetrabutylammonium Fluoride": 'CCCC[N+](CCCC)(CCCC)CCCC.[F-]',
-  "Tetrabutylammonium Fluoride Hydrate": 'CCCC[N+](CCCC)(CCCC)CCCC.[H]O[H].[F-]',
-  "Tetrabutylammonium Hexafluorophosphate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
-  "Tetrabutylammonium Hydrogen Sulfate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(O)([O-])=O',
-  "Tetrabutylammonium hydroxide": 'CCCC[N+](CCCC)(CCCC)CCCC.[OH-]',
-  "Tetrabutylammonium Iodide": 'CCCC[N+](CCCC)(CCCC)CCCC.[I-]',
-  "Tetrabutylammonium methoxide": 'CCCC[N+](CCCC)(CCCC)CCCC.C[O-]',
-  "Tetrabutylammonium Perchlorate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=Cl(=O)([O-])=O',
-  "Tetrabutylammonium Perrhenate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=[Re](=O)([O-])=O',
-  "Tetrabutylammonium Tetrafluoroborate": 'CCCC[N+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
-  "Tetrabutylammonium Tetraphenylborate": 'CCCC[N+](CCCC)(CCCC)CCCC.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Tetrabutylammonium Thiocyanate": 'CCCC[N+](CCCC)(CCCC)CCCC.[S-]C#N',
-  "Tetrabutylammonium Tribromide": 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-].[Br-].[Br-]',
-  "Tetrabutylammonium Trifluoromethanesulfonate": 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(C(F)(F)F)([O-])=O',
-  "Tetrabutylammonium Triiodide": 'CCCC[N+](CCCC)(CCCC)CCCC.[I-].[I-].[I-]',
-  "Tetrabutylgermane": 'CCCC[Ge](CCCC)(CCCC)CCCC',
-  "Tetrabutylphosphonium Bromide": 'CCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  "Tetrabutylphosphonium Chloride": 'CCCC[P+](CCCC)(CCCC)CCCC.[Cl-]',
-  "Tetrabutylphosphonium Hexafluorophosphate": 'CCCC[P+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
-  "Tetrabutylphosphonium Hydroxide": 'CCCC[P+](CCCC)(CCCC)CCCC.[OH-]',
-  "Tetrabutylphosphonium malonate": 'CCCC[P+](CCCC)(CCCC)CCCC.CCCC[P+](CCCC)(CCCC)CCCC.O=C([O-])CC([O-])=O',
-  "Tetrabutylphosphonium Tetrafluoroborate": 'CCCC[P+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
-  "Tetrabutyltin": 'CCCC[Sn](CCCC)(CCCC)CCCC',
-  "Tetracyanoethylene": 'N#CC(C#N)=C(C#N)C#N',
-  "Tetradecamethylcycloheptasiloxane": 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
-  "Tetradecyltrimethylammonium Bromide": 'C[N+](C)(CCCCCCCCCCCCCC)C.[Br-]',
-  "Tetraethyl 1,4,8,11-Tetraazacyclotetradecane-1,4,8,11-tetraacetate": 'O=C(OCC)CN1CCN(CC(OCC)=O)CCCN(CC(OCC)=O)CCN(CC(OCC)=O)CCC1',
-  "Tetraethyl Orthosilicate": 'CCO[Si](OCC)(OCC)OCC',
-  "Tetraethylammonium Borohydride": 'CC[N+](CC)(CC)CC.[BH4-]',
-  "Tetraethylammonium Bromide": 'CC[N+](CC)(CC)CC.[Br-]',
-  "Tetraethylammonium Chloride": 'CC[N+](CC)(CC)CC.[Cl-]',
-  "Tetraethylammonium Fluoride Tetrahydrofluoride": 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[H]F.[F-]',
-  "Tetraethylammonium Fluoride Trihydrofluoride": 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[F-]',
-  "Tetraethylammonium Hydroxide": 'CC[N+](CC)(CC)CC.[OH-]',
-  "Tetraethylammonium Iodide": 'CC[N+](CC)(CC)CC.[I-]',
-  "Tetraethylammonium Nitrate": 'CC[N+](CC)(CC)CC.[O-][N+]([O-])=O',
-  "Tetraethylammonium Tetrafluoroborate": 'CC[N+](CC)(CC)CC.F[B-](F)(F)F',
-  "Tetraethylammonium Trifluoromethanesulfonate": 'CC[N+](CC)(CC)CC.O=S(C(F)(F)F)([O-])=O',
-  "Tetraethylammonium p-Toluenesulfonate": 'CC[N+](CC)(CC)CC.CC1=CC=C(S(=O)([O-])=O)C=C1',
-  "Tetraethylgermane": 'CC[Ge](CC)(CC)CC',
-  "Tetraethylphosphonium Bromide": 'CC[P+](CC)(CC)CC.[Br-]',
-  "Tetraethylphosphonium Hexafluorophosphate": 'CC[P+](CC)(CC)CC.F[P-](F)(F)(F)(F)F',
-  "Tetraethylphosphonium Tetrafluoroborate": 'CC[P+](CC)(CC)CC.F[B-](F)(F)F',
-  "Tetraethylsilane": 'CC[Si](CC)(CC)CC',
-  "Tetrafluoroboronic acid diethylether complex": 'F[B-](F)(F)F.CCOCC.[H+]',
-  "Tetraheptylammonium Bromide": 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[Br-]',
-  "Tetraheptylammonium Iodide": 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[I-]',
-  "Tetrahexylammonium Bromide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[Br-]',
-  "Tetrahexylammonium Hydrogen Sulfate": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.O=S(O)([O-])=O',
-  "Tetrahexylammonium Hydroxide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[OH-]',
-  "Tetrahexylammonium Iodide": 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[I-]',
-  "Tetrahydroxydiboron": 'OB(O)B(O)O',
-  "tetrahydroxytitanium": 'O[Ti](O)(O)O',
-  "Tetraisobutyl Orthotitanate": 'CC(C)CO[Ti](OCC(C)C)(OCC(C)C)OCC(C)C',
-  "Tetraisopropyl Orthosilicate": 'CC(O[Si](OC(C)C)(OC(C)C)OC(C)C)C',
-  "Tetraisopropyl Orthotitanate": 'CC(O[Ti](OC(C)C)(OC(C)C)OC(C)C)C',
-  "Tetrakis(2,4-pentanedionato)titanium(IV)": '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]CCC.[O-]CCC.[Ti+4]',
-  "Tetrakis(acetonitrile)copper(I) Hexafluorophosphate": 'CC#N.CC#N.CC#N.CC#N.F[P-](F)(F)(F)(F)F.[Cu+]',
-  "Tetrakis(acetonitrile)copper(I) Tetrafluoroborate": 'CC#N.CC#N.CC#N.CC#N.F[B-](F)(F)F.[Cu+]',
-  "Tetrakis(acetonitrile)palladium(II) Bis(trifluoromethanesulfonate)": 'CC#N.CC#N.CC#N.CC#N.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Pd+2]',
-  "Tetrakis(decyl)ammonium hydroxide": 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[OH-]',
-  "Tetrakis(dimethylamino)titanium(IV)": 'CN([Ti](N(C)C)(N(C)C)N(C)C)C',
-  "Tetrakis(dimethylsilyl)silane": 'C[SiH]([Si]([SiH](C)C)([SiH](C)C)[SiH](C)C)C',
-  "Tetrakis(dimethylsilyloxy)silane": 'C[SiH](O[Si](O[SiH](C)C)(O[SiH](C)C)O[SiH](C)C)C',
-  "Tetrakis(hydroxymethyl)phosphonium Chloride": 'OC[P+](CO)(CO)CO.[Cl-]',
-  "Tetrakis(hydroxymethyl)phosphonium Sulfate": 'OC[P+](CO)(CO)CO.OC[P+](CO)(CO)CO.O=S([O-])([O-])=O',
-  "Tetrakis(trimethylsilyl)silane": 'C[Si]([Si]([Si](C)(C)C)([Si](C)(C)C)[Si](C)(C)C)(C)C',
-  "Tetrakis(triphenylphosphine)palladium(0)": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  "Tetrakis": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  "Pd(Ph3)4": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
-  "Tetrakis[dimethyl(vinyl)silyl] Orthosilicate": 'C=C[Si](O[Si](O[Si](C)(C)C=C)(O[Si](C)(C)C=C)O[Si](C)(C)C=C)(C)C',
-  "Tetramethylammonium Acetate": 'C[N+](C)(C)C.CC([O-])=O',
-  "Tetramethylammonium Borohydride": 'C[N+](C)(C)C.[BH4-]',
-  "Tetramethylammonium Bromide": 'C[N+](C)(C)C.[Br-]',
-  "Tetramethylammonium Chloride": 'C[N+](C)(C)C.[Cl-]',
-  "Tetramethylammonium Dichloroiodate": 'C[N+](C)(C)C.Cl[I-]Cl',
-  "Tetramethylammonium Fluoride Tetrahydrate": 'C[N+](C)(C)C.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[F-]',
-  "Tetramethylammonium Hexafluorophosphate": 'C[N+](C)(C)C.F[P-](F)(F)(F)(F)F',
-  "Tetramethylammonium Hydroxide": 'C[N+](C)(C)C.[OH-]',
-  "Tetramethylammonium Iodide": 'C[N+](C)(C)C.[I-]',
-  "Tetramethylammonium Sulfate": 'C[N+](C)(C)C.C[N+](C)(C)C.O=S([O-])([O-])=O',
-  "Tetramethylammonium Tetrafluoroborate": 'C[N+](C)(C)C.F[B-](F)(F)F',
-  "Tetramethylammonium Triacetoxyborohydride": 'C[N+](C)(C)C.O=C(O[BH-](OC(C)=O)OC(C)=O)C',
-  "Tetramethylgermane": 'C[Ge](C)(C)C',
-  "Tetramethylsilane": 'C[Si](C)(C)C',
-  "TMS": 'C[Si](C)(C)C',
-  "Tetra-n-octylammonium Bromide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
-  "Tetra-n-octylammonium Iodide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[I-]',
-  "Tetra-n-octylphosphonium Bromide": 'CCCCCCCC[P+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
-  "Tetraoctylammonium hydroxide": 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[OH-]',
-  "Tetrapentylammonium hydroxide": 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[OH-]',
-  "Tetraphenyl Lead": 'C1([Pb](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Tetraphenylarsonium Chloride Hydrochloride Hydrate": '[H]O[H].[H]Cl.C1([As+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
-  "Tetraphenylcyclopentadienone": 'O=C1C(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=CC=C5',
-  "Tetraphenylgermane": 'C1([Ge](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Tetraphenylphosphonium Bromide": 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Br-]',
-  "Tetraphenylphosphonium Chloride": 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
-  "Tetraphenylporphyrin": 'C1(C2=CC=CC=C2)=C3C=CC(C(C4=CC=CC=C4)=C5C=CC(N5)=C(C6=CC=CC=C6)C(C=C7)=NC7=C(C8=CC=CC=C8)C9=CC=C1N9)=N3',
-  "Tetraphenylsilane": 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Tetraphenyltin": 'C1([Sn](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
-  "Tetrapropyl Orthosilicate": 'CCCO[Si](OCCC)(OCCC)OCCC',
-  "Tetrapropylammonium Bromide": 'CCC[N+](CCC)(CCC)CCC.[Br-]',
-  "Tetrapropylammonium Chloride": 'CCC[N+](CCC)(CCC)CCC.[Cl-]',
-  "Tetrapropylammonium Hydroxide": 'CCC[N+](CCC)(CCC)CCC.[OH-]',
-  "Tetrapropylammonium Iodide": 'CCC[N+](CCC)(CCC)CCC.[I-]',
-  "Tetrapropylammonium Perruthenate": 'CCC[N+](CCC)(CCC)CCC.O=[Ru](=O)([O-])=O',
-  "Thallium(III) Trifluoroacetate": 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Tl+3]',
-  "THF": 'C1CCCO1',
-  "Thioacetic Acid": 'CC(O)=S',
-  "Thioglycolic Acid": 'SCC(O)=O',
-  "Thionyl Chloride": 'O=S(Cl)Cl',
-  "Thiophosphoryl Chloride": 'OP(O)(Cl)=S',
-  "Thulium": '[Tm]',
-  "Thulium(III) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Tm+3]',
-  "tin hydroxide": '[Sn+4].[OH-].[OH-].[OH-].[OH-]',
-  "Tin(II) 2-Ethylhexanoate": 'CCCCC(CC)C([O-])=O.CCCCC(CC)C([O-])=O.[Sn+2]',
-  "Tin(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sn+2]',
-  "Tin(IV) Chloride": '[Sn+4].[Cl-].[Cl-].[Cl-].[Cl-]',
-  "Titanium": '[Ti]',
-  "titanium hydroxide": '[Ti+4].[OH-].[OH-].[OH-].[OH-]',
-  "Titanium(IV) Chloride": '[Ti+4].[Cl-].[Cl-].[Cl-].[Cl-]',
-  "TMS-Imidazole (=N-Trimethylsilylimidazole)": 'C[Si](N1C=NC=C1)(C)C',
-  "toluene": 'CC1=CC=CC=C1',
-  "trans,trans-1,5-Bis(4-fluorophenyl)-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(F)C=C1)/C=C/C2=CC=C(F)C=C2',
-  "trans,trans-1,5-Bis(4-methoxyphenyl)-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(OC)C=C1)/C=C/C2=CC=C(OC)C=C2',
-  "trans,trans-1,5-Bis[4-(trifluoromethyl)phenyl]-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=C(C(F)(F)F)C=C1)/C=C/C2=CC=C(C(F)(F)F)C=C2',
-  "trans,trans-1,5-Diphenyl-1,4-pentadien-3-one": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2',
-  "trans-1,2-Bis(diphenylphosphino)ethylene": 'P(/C=C/P(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
-  "trans-2,6-Diisopropyl-N-(2-pyridylmethylene)aniline": 'CC(C1=C(C(C(C)C)=CC=C1)/N=C/C2=NC=CC=C2)C',
-  "trans-2-Butene-1,4-bis(triphenylphosphonium Chloride)": 'C1([P+](C/C=C/C[P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1.[Cl-].[Cl-]',
-  "trans-4-(tert-Butyldiphenylsilyloxy)-L-proline": 'O=C(O)[C@H]1NC[C@H](O[Si](C2=CC=CC=C2)(C(C)(C)C)C3=CC=CC=C3)C1',
-  "trans-4-Fluoro-L-proline": 'O=C(O)[C@H]1NC[C@H](F)C1',
-  "Tri(2-furyl)phosphine": 'P(C1=CC=CO1)(C2=CC=CO2)C3=CC=CO3',
-  "Tri(2-thienyl)phosphine": 'P(C1=CC=CS1)(C2=CC=CS2)C3=CC=CS3',
-  "Tri(cyclohexa-2,5-dien-1-yl)silane": '[SiH](C1C=CCC=C1)(C2C=CCC=C2)C3C=CCC=C3',
-  "Tri(m-tolyl)phosphine": 'CC1=CC(P(C2=CC=CC(C)=C2)C3=CC=CC(C)=C3)=CC=C1',
-  "Tri(o-tolyl)phosphine": 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C',
-  "Tri(p-tolyl)phosphine": 'CC1=CC=C(P(C2=CC=C(C)C=C2)C3=CC=C(C)C=C3)C=C1',
-  "Triacetoxyborohydride": 'O=C(O[BH-](OC(C)=O)OC(C)=O)C',
-  "Triacetoxyethylsilane": 'CC[Si](OC(C)=O)(OC(C)=O)OC(C)=O',
-  "Triallyl(methyl)silane": 'C[Si](CC=C)(CC=C)CC=C',
-  "Triallyl(phenyl)silane": 'C=CC[Si](CC=C)(CC=C)C1=CC=CC=C1',
-  "Tribenzylsilane": '[SiH](CC1=CC=CC=C1)(CC2=CC=CC=C2)CC3=CC=CC=C3',
-  "Tribromoacetic Acid": 'O=C(O)C(Br)(Br)Br',
-  "Tributyl borate": 'B(OCCCC)(OCCCC)OCCCC',
-  "Tributyl(2-methoxyethyl)phosphonium Bis(trifluoromethanesulfonyl)imide": 'CCCC[P+](CCCC)(CCCC)CCOC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
-  "Tributyl(cyanomethyl)phosphonium Chloride": 'N#CC[P+](CCCC)(CCCC)CCCC.[Cl-]',
-  "Tributyl(ethyl)phosphonium Diethyl Phosphate": 'CC[P+](CCCC)(CCCC)CCCC.O=P(OCC)([O-])OCC',
-  "Tributyl(methyl)ammonium Dicyanamide": '[H]C(C([H])([H])C([H])([H])C([H])([H])[H])([H])[N+](C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H])(C([H])([H])[H])C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H].[N-]=C=NC#N',
-  "Tributylamine": 'CCCCN(CCCC)CCCC',
-  "Tributylchlorosilane": 'Cl[Si](CCCC)(CCCC)CCCC',
-  "Tributyldodecylphosphonium Bromide": 'CCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  "Tributylhexadecylphosphonium Bromide": 'CCCCCCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  "Tributylmethylammonium Bis(trifluoromethanesulfonyl)imide": 'FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F.C[N+](CCCC)(CCCC)CCCC',
-  "Tributylmethylammonium Chloride": 'C[N+](CCCC)(CCCC)CCCC.[Cl-]',
-  "Tributylmethylphosphonium Bis(trifluoromethanesulfonyl)imide": 'C[P+](CCCC)(CCCC)CCCC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
-  "Tributylmethylphosphonium Iodide": 'C[P+](CCCC)(CCCC)CCCC.[I-]',
-  "Tributyl-n-octylphosphonium Bromide": 'CCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
-  "Tributylphosphine Oxide": 'CCCCP(CCCC)(CCCC)=O',
-  "Tributylsilane": 'CCCC[SiH](CCCC)CCCC',
-  "Tributylsulfonium Iodide": 'CCCC[S+](CCCC)CCCC.[I-]',
-  "Tricarbonyl(cyclooctatetraene)iron": '[C]=O.[C]=O.[C]=O.[Fe].C1=C\\C=C/C=C\\C=C/1',
-  "Trichloro(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](Cl)(Cl)Cl',
-  "Trichloro-2-cyanoethylsilane": 'N#CCC[Si](Cl)(Cl)Cl',
-  "Trichloroacetic Acid": 'O=C(O)C(Cl)(Cl)Cl',
-  "Trichlorocyclopentylsilane": 'Cl[Si](Cl)(Cl)C1CCCC1',
-  "Trichloroisocyanuric Acid": 'O=C(N(Cl)C(N1Cl)=O)N(Cl)C1=O',
-  "Trichloromethanesulfonyl Chloride": 'O=S(C(Cl)(Cl)Cl)(Cl)=O',
-  "Tricyclohexylphosphine": 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3',
-  "Tricyclohexylphosphonium Tetrafluoroborate": 'F[B-](F)(F)F.[PH+](C1CCCCC1)(C2CCCCC2)C3CCCCC3',
-  "Triethoxy(3-glycidyloxypropyl)silane": 'CCO[Si](OCC)(OCC)CCCOCC1CO1',
-  "Triethoxy(pentafluorophenyl)silane": 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](OCC)(OCC)OCC',
-  "Triethoxy(propyl)silane": 'CCC[Si](OCC)(OCC)OCC',
-  "Triethoxy[2-(7-oxabicyclo[4.1.0]heptan-3-yl)ethyl]silane": 'CCO[Si](OCC)(OCC)CCC1CC2OC2CC1',
-  "Triethoxy-1H,1H,2H,2H-tridecafluoro-n-octylsilane": 'F[SiH2]C(F)(F)CC(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(OCC)(OCC)OCC',
-  "Triethoxyethylsilane": 'CC[Si](OCC)(OCC)OCC',
-  "Triethoxyfluorosilane": 'F[Si](OCC)(OCC)OCC',
-  "Triethoxymethylsilane": 'C[Si](OCC)(OCC)OCC',
-  "Triethoxy-n-octylsilane": 'CCCCCCCC[Si](OCC)(OCC)OCC',
-  "Triethoxyphenylsilane": 'CCO[Si](OCC)(OCC)C1=CC=CC=C1',
-  "Triethoxyvinylsilane": 'C=C[Si](OCC)(OCC)OCC',
-  "Triethyl 2-Fluoro-2-phosphonoacetate": 'O=C(OCC)C(F)P(OCC)(OCC)=O',
-  "Triethyl(trifluoromethyl)silane": 'FC([Si](CC)(CC)CC)(F)F',
-  "Triethylamine": 'CCN(CC)CC',
-  "Triethylamine Borane": 'CCN(CC)CC.B',
-  "Triethylamine Trihydrofluoride": 'CCN(CC)CC.[H]F.[H]F.[H]F',
-  "Triethylchlorogermane": 'Cl[Ge](CC)(CC)CC',
-  "Triethylenetetramine": 'NCCNCCNCCN',
-  "Triethylmethylammonium Chloride": 'C[N+](CC)(CC)CC.[Cl-]',
-  "Triethylmethylammonium hydroxide": 'C[N+](CC)(CC)CC.[OH-]',
-  "Triethylphenylammonium Chloride": 'CC[N+](CC)(CC)C1=CC=CC=C1.[Cl-]',
-  "Triethylsilane": 'CC[SiH](CC)CC',
-  "TES": 'CC[SiH](CC)CC',
-  "Triethylsilanol": 'O[Si](CC)(CC)CC',
-  "Triethylsilylacetylene": 'C#C[Si](CC)(CC)CC',
-  "Triethylsulfonium Bis(trifluoromethanesulfonyl)imide": 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC[S+](CC)CC',
-  "Triethylvinylsilane": 'C=C[Si](CC)(CC)CC',
-  "Trifluoroacetic Acid": 'O=C(O)C(F)(F)F',
-  "TFA": 'O=C(O)C(F)(F)F',
-  "Trifluoroacetic Anhydride": 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
-  "TFAA": 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
-  "Trifluoroacetyl Triflate": 'O=S(OC(C(F)(F)F)=O)(C(F)(F)F)=O',
-  "Trifluoroacetylacetone": 'O=C(CC(C)=O)C(F)(F)F',
-  "Trifluoroboronic acid diethyletherate": 'FB(F)F.CCOCC',
-  "Trifluoromethanesulfonanilide": 'O=S(C(F)(F)F)(NC1=CC=CC=C1)=O',
-  "Trifluoromethanesulfonic Acid": 'O=S(C(F)(F)F)(O)=O',
-  "Trifluoromethanesulfonic Anhydride": 'O=S(C(F)(F)F)(OS(C(F)(F)F)(=O)=O)=O',
-  "Trifluoromethanesulfonyl Chloride": 'O=S(C(F)(F)F)(Cl)=O',
-  "Trihexyl(tetradecyl)phosphonium Chloride": 'CCCCCCCCCCCCCC[P+](CCCCCC)(CCCCCC)CCCCCC.[Cl-]',
-  "Trihexyl(tetradecyl)phosphonium Dicyanamide": 'CCCCCC[P+](CCCCCC)(CCCCCC)CCCCCCCCCCCCCC.N#C[N-]C#N',
-  "Trihexylphosphine": 'CCCCCCP(CCCCCC)CCCCCC',
-  "Trihexylsilane": 'CCCCCC[SiH](CCCCCC)CCCCCC',
-  "Triisopropyl[(trimethylsilyl)ethynyl]silane": 'C[Si](C#C[Si](C(C)C)(C(C)C)C(C)C)(C)C',
-  "Triisopropylsilane": 'CC([SiH](C(C)C)C(C)C)C',
-  "Triisopropylsilylacetylene": 'C#C[Si](C(C)C)(C(C)C)C(C)C',
-  "Trimagnesium Dicitrate Nonahydrate": 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mg+2].[Mg+2].[Mg+2]',
-  "Trimethoxy(1H,1H,2H,2H-tridecafluoro-n-octyl)silane": 'FC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)(F)CC[Si](OC)(OC)OC',
-  "Trimethoxy(2-phenylethyl)silane": 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
-  "Trimethoxy(3,3,3-trifluoropropyl)silane": 'FC(F)(F)CC[Si](OC)(OC)OC',
-  "Trimethoxy(4-methoxyphenyl)silane": 'COC1=CC=C([Si](OC)(OC)OC)C=C1',
-  "Trimethoxy(methyl)silane": 'C[Si](OC)(OC)OC',
-  "Trimethoxy(phenylethyl)silane": 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
-  "Trimethoxy(propyl)silane": 'CCC[Si](OC)(OC)OC',
-  "Trimethoxy[3-(methylamino)propyl]silane": 'CNCCC[Si](OC)(OC)OC',
-  "Trimethoxy[3-(phenylamino)propyl]silane": 'CO[Si](OC)(OC)CCCNC1=CC=CC=C1',
-  "Trimethoxy-n-octylsilane": 'CCCCCCCC[Si](OC)(OC)OC',
-  "Trimethoxyphenylsilane": 'CO[Si](OC)(OC)C1=CC=CC=C1',
+  Samarium: '[Sm]',
+  'Samarium(II) Iodide': '[Sm+2].[I-].[I-]',
+  Scandium: '[Sc]',
+  'Scandium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sc+3]',
+  'sec-Butyllithium': '[Li]C(C)CC',
+  'sec-Butylmagnesium Bromide': 'Br[Mg]C(C)CC',
+  'sec-Butylmagnesium chloride': 'Cl[Mg]C(C)CC',
+  'sec-Butylmagnesium Chloride - Lithium Chloride': 'Cl[Mg]C(C)CC.[Li+].[Cl-]',
+  'Selenium dioxide': 'O=[Se]=O',
+  SeO2: 'O=[Se]=O',
+  'S-Ethyl Trifluorothioacetate': 'O=C(SCC)C(F)(F)F',
+  Silver: '[Ag]',
+  'Silver Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.[Ag+]',
+  'Silver(I) Trifluoromethanethiolate': '[S-]C(F)(F)F.[Ag+]',
+  'Silver(II) picolinate': 'O=C([O-])C1=NC=CC=C1.O=C([O-])C2=NC=CC=C2.[Ag+2]',
+  'Silver(II) Pyridine-2-carboxylate': 'O=C(C1=NC=CC=C1)[O-].O=C(C2=NC=CC=C2)[O-].[Ag+2]',
+  'Sodium bicarbonate': 'C(=O)(O)[O-].[Na+]',
+  'Sodium (Trihydroxy)phenylborate': 'O[B-](O)(O)C1=CC=CC=C1.[Na+]',
+  'Sodium amide': '[Na+].[NH2-]',
+  NaNH2: '[Na+].[NH2-]',
+  'Sodium ascorbate': '[O-]C([C@H](O1)[C@H](CO)O)=C(O)C1=O.[Na+]',
+  'sodium azide': '[N-]=[N+]=[N-].[Na+]',
+  NaN3: '[N-]=[N+]=[N-].[Na+]',
+  'Sodium Bis(2-methoxyethoxy)aluminum Dihydride': 'COCCO[Al+]OCCOC.[Na+].[H-].[H-]',
+  'Sodium Bis(trimethylsilyl)amide': 'C[Si]([N-][Si](C)(C)C)(C)C.[Na+]',
+  'Sodium Borohydride': '[Na+].[BH4-]',
+  NaBH4: '[Na+].[BH4-]',
+  'sodium bromate': 'O=Br([O-])=O.[Na+]',
+  'sodium bromide': '[Na+].[Br-]',
+  NaBr: '[Na+].[Br-]',
+  'Sodium Bromodifluoroacetate': 'O=C([O-])C(F)(Br)F.[Na+]',
+  'sodium carbonate': '[O-]C([O-])=O.[Na+].[Na+]',
+  Na2CO3: '[O-]C([O-])=O.[Na+].[Na+]',
+  'Sodium carbonate decahydrate': '[O-]C([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
+  'sodium chloride': '[Na+].[Cl-]',
+  NaCl: '[Na+].[Cl-]',
+  'Sodium Chlorodifluoroacetate': 'O=C([O-])C(F)(Cl)F.[Na+]',
+  'Sodium Cyanoborohydride': '[BH3-]C#N.[Na+]',
+  'sodium cycanide': '[C-]#N.[Na+]',
+  NaCN: '[C-]#N.[Na+]',
+  'sodium D,L lactate': 'OC(C)C([O-])=O.[Na+]',
+  'Sodium Dichloroisocyanurate': 'ClN1C([N-]C(N(C1=O)Cl)=O)=O.[Na+]',
+  'Sodium dichloroisocyanurate dihydrate': 'O=C1N=C([O-])N(Cl)C(N1Cl)=O.O.O.[Na+]',
+  'Sodium dichromate dihydrate': 'O=[Cr]([O-])(O[Cr](=O)([O-])=O)=O.[H]O[H].[H]O[H].[Na+].[Na+]',
+  'Sodium Diphenylphosphinobenzene-3-sulfonate': 'O=S(C1=CC(P(C2=CC=CC=C2)C3=CC=CC=C3)=CC=C1)([O-])=O.[Na+]',
+  'Sodium Ethoxide': 'CC[O-].[Na+]',
+  NaOEt: 'CC[O-].[Na+]',
+  'sodium fluoride': '[Na+].[F-]',
+  NaF: '[Na+].[F-]',
+  'Sodium hydride': '[NaH]',
+  NaH: '[NaH]',
+  'sodium hydrogen difluoride': '[Na+].[H+].[F-].[F-]',
+  'Sodium hydrogen periodate': 'O=I(=O)([O-])=O.O=I(=O)([O-])=O.[Na+].[H+]',
+  'Sodium Hydroxide': '[Na+].[OH-]',
+  NaOH: '[Na+].[OH-]',
+  'Sodium Hypochlorite Pentahydrate': 'Cl[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+]',
+  'Sodium iodide': '[Na+].[I-]',
+  NaI: '[Na+].[I-]',
+  'sodium L-tartrate': 'O[C@H]([C@H](C([O-])=O)O)C([O-])=O.[Na+].[Na+]',
+  'Sodium Methoxide': 'C[O-].[Na+]',
+  NaOMe: 'C[O-].[Na+]',
+  'Sodium nitrate': '[N+](=O)([O-])[O-].[Na+]',
+  NaNO3: '[N+](=O)([O-])[O-].[Na+]',
+  'Sodium percarbonate': 'O=C(O[O-])[O-].[Na+].[Na+]',
+  'sodium perchlorate': 'O=Cl(=O)([O-])=O.[Na+]',
+  'Sodium permanganate': 'O=[Mn](=O)([O-])=O.[Na+]',
+  NaMnO4: 'O=[Mn](=O)([O-])=O.[Na+]',
+  'Sodium peroxide': '[O-][O-].[Na+].[Na+]',
+  Na2O2: '[O-][O-].[Na+].[Na+]',
+  'sodium persulfate': '[O-]S(=O)(OOS(=O)([O-])=O)=O.[Na+].[Na+]',
+  'Sodium phosphomolybdate hydrate': 'O=[Mo](OP(O)(O)=O)([O-])=O.[H]O[H].[Na+]',
+  'sodium sulfite': 'O=S([O-])[O-].[Na+].[Na+]',
+  'Sodium Tellurite Pentahydrate': 'O=[Te]([O-])[O-].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Na+].[Na+]',
+  'sodium tetraborate': 'O[B-]12OBO[B-](OBO2)(O)O1.[Na+].[Na+]',
+  'Sodium Tetrachloropalladate(II)': 'Cl[Pd-2](Cl)(Cl)Cl.[Na+].[Na+]',
+  'Sodium Tetrafluoroborate': 'F[B-](F)(F)F.[Na+]',
+  'Sodium Triacetoxyborohydride': 'O=C(O[BH-](OC(C)=O)OC(C)=O)C.[Na+]',
+  'Sodium Trifluoroacetate': 'O=C([O-])C(F)(F)F.[Na+]',
+  'Sodium Trifluoromethanesulfinate': 'O=S(C(F)(F)F)[O-].[Na+]',
+  'Sodium trimethylsilanolate': '[O-][Si](C)(C)C.[Na+]',
+  'Sodium Tris(1,1,1,3,3,3-hexafluoroisopropoxy)borohydride': 'FC(F)(C(C(F)(F)F)O[BH-](OC(C(F)(F)F)C(F)(F)F)OC(C(F)(F)F)C(F)(F)F)F.[Na+]',
+  'Sodium tert-Butoxide': 'CC(C)([O-])C.[Na+]',
+  'Sodium tert-Pentoxide': 'CCC(C)([O-])C.[Na+]',
+  'Sorbic Acid': 'C/C=C/C=C/C(O)=O',
+  'Strontium hydroxide': '[Sr+2].[OH-].[OH-]',
+  'STRONTIUM HYDROXIDE OCTAHYDRATE': '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Sr+2].[OH-].[OH-]',
+  'Strontium peroxide': '[O-][O-].[Sr+2]',
+  'Succinic Acid': 'O=C(O)CCC(O)=O',
+  'Sulfanilic Acid': 'O=S(O)(C1=CC=C(N)C=C1)=O',
+  sulfolane: 'O=S1(CCCC1)=O',
+  'Sulfur Trioxide': 'O=S(=O)=O',
+  SO3: 'O=S(=O)=O',
+  'Sulfur Trioxide - Triethylamine Complex': 'O=S(=O)=O.CCN(CC)CC',
+  'Sulfuric acid': 'O=S(O)(O)=O',
+  H2SO4: 'O=S(O)(O)=O',
+  'Sulfuryl chloride': 'O=S(Cl)(Cl)=O',
+  SO2Cl2: 'O=S(Cl)(Cl)=O',
+  'Tebbe reagent': 'C[Al-]1(C[Ti+2][Cl+]1)C.[cH-]1cccc1.[cH-]1cccc1',
+  'Telluric Acid': 'O=[Te](O)(O)=O',
+  'Tellurium(IV) Oxide': '[Te+4].[O-2].[O-2]',
+  Terbium: '[Tb]',
+  'tert-Butyl hydroperoxide': 'CC(C)(OO)C',
+  TBHP: 'CC(C)(OO)C',
+  'tert-Butyl Hydroperoxide': 'CC(C)(OO)C',
+  'tert-Butyldimethylsilane': 'C[SiH](C(C)(C)C)C',
+  'tert-Butyldimethylsilanol': 'O[Si](C)(C(C)(C)C)C',
+  'tert-Butyldiphenylsilane': 'CC([SiH](C1=CC=CC=C1)C2=CC=CC=C2)(C)C',
+  'tert-Butyllithium': '[Li]C(C)(C)C',
+  tBuLi: '[Li]C(C)(C)C',
+  'tert-Butylmagnesium Chloride': 'Cl[Mg]C(C)(C)C',
+  'tert-Butylmethoxyphenylsilyl Bromide': 'CO[Si](C(C)(C)C)(Br)C1=CC=CC=C1',
+  'Tetra(decyl)ammonium Bromide': 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[Br-]',
+  Tetraallyltin: 'C=CC[Sn](CC=C)(CC=C)CC=C',
+  'Tetraamylammonium Bromide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Br-]',
+  'Tetraamylammonium Chloride': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[Cl-]',
+  'Tetraamylammonium Iodide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[I-]',
+  Tetrabromofluorescein: 'O=C1OC2(C3=C(OC4=C2C=CC(O)=C4)C=C(O)C=C3)C5=C1C(Br)=C(Br)C(Br)=C5Br',
+  'Tetrabutyl Orthosilicate': 'CCCCO[Si](OCCCC)(OCCCC)OCCCC',
+  'Tetrabutyl Orthotitanate': 'CCCCO[Ti](OCCCC)(OCCCC)OCCCC',
+  'Tetrabutyl Orthotitanate Tetramer': '[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[O-]CCCC.[Ti+4].[Ti+4].[O-2].[O-2].[Ti+4].[O-2].[Ti+4]',
+  'Tetrabutylammonium (meta)periodate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=I(=O)([O-])=O',
+  'Tetrabutylammonium Acetate': 'CCCC[N+](CCCC)(CCCC)CCCC.CC([O-])=O',
+  'Tetrabutylammonium Bifluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[H]F.[F-]',
+  'Tetrabutylammonium Borohydride': 'CCCC[N+](CCCC)(CCCC)CCCC.[BH4-]',
+  'Tetrabutylammonium Bromide': 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-]',
+  'Tetrabutylammonium Chloride': 'CCCC[N+](CCCC)(CCCC)CCCC.[Cl-]',
+  'Tetrabutylammonium chlorochromate': 'CCCC[N+](CCCC)(CCCC)CCCC.[O-][Cr](=O)(Cl)=O',
+  'Tetrabutylammonium Difluorotriphenylstannate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[Sn-](C1=CC=CC=C1)(C2=CC=CC=C2)(F)C3=CC=CC=C3',
+  'Tetrabutylammonium Dihydrogen Trifluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[H+].[H+].[F-].[F-].[F-]',
+  'Tetrabutylammonium ethoxide': 'CCCC[N+](CCCC)(CCCC)CCCC.CC[O-]',
+  'Tetrabutylammonium Fluoride': 'CCCC[N+](CCCC)(CCCC)CCCC.[F-]',
+  'Tetrabutylammonium Fluoride Hydrate': 'CCCC[N+](CCCC)(CCCC)CCCC.[H]O[H].[F-]',
+  'Tetrabutylammonium Hexafluorophosphate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
+  'Tetrabutylammonium Hydrogen Sulfate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(O)([O-])=O',
+  'Tetrabutylammonium hydroxide': 'CCCC[N+](CCCC)(CCCC)CCCC.[OH-]',
+  'Tetrabutylammonium Iodide': 'CCCC[N+](CCCC)(CCCC)CCCC.[I-]',
+  'Tetrabutylammonium methoxide': 'CCCC[N+](CCCC)(CCCC)CCCC.C[O-]',
+  'Tetrabutylammonium Perchlorate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=Cl(=O)([O-])=O',
+  'Tetrabutylammonium Perrhenate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=[Re](=O)([O-])=O',
+  'Tetrabutylammonium Tetrafluoroborate': 'CCCC[N+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
+  'Tetrabutylammonium Tetraphenylborate': 'CCCC[N+](CCCC)(CCCC)CCCC.C1([B-](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  'Tetrabutylammonium Thiocyanate': 'CCCC[N+](CCCC)(CCCC)CCCC.[S-]C#N',
+  'Tetrabutylammonium Tribromide': 'CCCC[N+](CCCC)(CCCC)CCCC.[Br-].[Br-].[Br-]',
+  'Tetrabutylammonium Trifluoromethanesulfonate': 'CCCC[N+](CCCC)(CCCC)CCCC.O=S(C(F)(F)F)([O-])=O',
+  'Tetrabutylammonium Triiodide': 'CCCC[N+](CCCC)(CCCC)CCCC.[I-].[I-].[I-]',
+  Tetrabutylgermane: 'CCCC[Ge](CCCC)(CCCC)CCCC',
+  'Tetrabutylphosphonium Bromide': 'CCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  'Tetrabutylphosphonium Chloride': 'CCCC[P+](CCCC)(CCCC)CCCC.[Cl-]',
+  'Tetrabutylphosphonium Hexafluorophosphate': 'CCCC[P+](CCCC)(CCCC)CCCC.F[P-](F)(F)(F)(F)F',
+  'Tetrabutylphosphonium Hydroxide': 'CCCC[P+](CCCC)(CCCC)CCCC.[OH-]',
+  'Tetrabutylphosphonium malonate': 'CCCC[P+](CCCC)(CCCC)CCCC.CCCC[P+](CCCC)(CCCC)CCCC.O=C([O-])CC([O-])=O',
+  'Tetrabutylphosphonium Tetrafluoroborate': 'CCCC[P+](CCCC)(CCCC)CCCC.F[B-](F)(F)F',
+  Tetrabutyltin: 'CCCC[Sn](CCCC)(CCCC)CCCC',
+  Tetracyanoethylene: 'N#CC(C#N)=C(C#N)C#N',
+  Tetradecamethylcycloheptasiloxane: 'C[Si]1(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O[Si](C)(C)O1',
+  'Tetradecyltrimethylammonium Bromide': 'C[N+](C)(CCCCCCCCCCCCCC)C.[Br-]',
+  'Tetraethyl 1,4,8,11-Tetraazacyclotetradecane-1,4,8,11-tetraacetate': 'O=C(OCC)CN1CCN(CC(OCC)=O)CCCN(CC(OCC)=O)CCN(CC(OCC)=O)CCC1',
+  'Tetraethyl Orthosilicate': 'CCO[Si](OCC)(OCC)OCC',
+  'Tetraethylammonium Borohydride': 'CC[N+](CC)(CC)CC.[BH4-]',
+  'Tetraethylammonium Bromide': 'CC[N+](CC)(CC)CC.[Br-]',
+  'Tetraethylammonium Chloride': 'CC[N+](CC)(CC)CC.[Cl-]',
+  'Tetraethylammonium Fluoride Tetrahydrofluoride': 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[H]F.[F-]',
+  'Tetraethylammonium Fluoride Trihydrofluoride': 'CC[N+](CC)(CC)CC.[H]F.[H]F.[H]F.[F-]',
+  'Tetraethylammonium Hydroxide': 'CC[N+](CC)(CC)CC.[OH-]',
+  'Tetraethylammonium Iodide': 'CC[N+](CC)(CC)CC.[I-]',
+  'Tetraethylammonium Nitrate': 'CC[N+](CC)(CC)CC.[O-][N+]([O-])=O',
+  'Tetraethylammonium Tetrafluoroborate': 'CC[N+](CC)(CC)CC.F[B-](F)(F)F',
+  'Tetraethylammonium Trifluoromethanesulfonate': 'CC[N+](CC)(CC)CC.O=S(C(F)(F)F)([O-])=O',
+  'Tetraethylammonium p-Toluenesulfonate': 'CC[N+](CC)(CC)CC.CC1=CC=C(S(=O)([O-])=O)C=C1',
+  Tetraethylgermane: 'CC[Ge](CC)(CC)CC',
+  'Tetraethylphosphonium Bromide': 'CC[P+](CC)(CC)CC.[Br-]',
+  'Tetraethylphosphonium Hexafluorophosphate': 'CC[P+](CC)(CC)CC.F[P-](F)(F)(F)(F)F',
+  'Tetraethylphosphonium Tetrafluoroborate': 'CC[P+](CC)(CC)CC.F[B-](F)(F)F',
+  Tetraethylsilane: 'CC[Si](CC)(CC)CC',
+  'Tetrafluoroboronic acid diethylether complex': 'F[B-](F)(F)F.CCOCC.[H+]',
+  'Tetraheptylammonium Bromide': 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[Br-]',
+  'Tetraheptylammonium Iodide': 'CCCCCCC[N+](CCCCCCC)(CCCCCCC)CCCCCCC.[I-]',
+  'Tetrahexylammonium Bromide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[Br-]',
+  'Tetrahexylammonium Hydrogen Sulfate': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.O=S(O)([O-])=O',
+  'Tetrahexylammonium Hydroxide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[OH-]',
+  'Tetrahexylammonium Iodide': 'CCCCCC[N+](CCCCCC)(CCCCCC)CCCCCC.[I-]',
+  Tetrahydroxydiboron: 'OB(O)B(O)O',
+  tetrahydroxytitanium: 'O[Ti](O)(O)O',
+  'Tetraisobutyl Orthotitanate': 'CC(C)CO[Ti](OCC(C)C)(OCC(C)C)OCC(C)C',
+  'Tetraisopropyl Orthosilicate': 'CC(O[Si](OC(C)C)(OC(C)C)OC(C)C)C',
+  'Tetraisopropyl Orthotitanate': 'CC(O[Ti](OC(C)C)(OC(C)C)OC(C)C)C',
+  'Tetrakis(2,4-pentanedionato)titanium(IV)': '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]CCC.[O-]CCC.[Ti+4]',
+  'Tetrakis(acetonitrile)copper(I) Hexafluorophosphate': 'CC#N.CC#N.CC#N.CC#N.F[P-](F)(F)(F)(F)F.[Cu+]',
+  'Tetrakis(acetonitrile)copper(I) Tetrafluoroborate': 'CC#N.CC#N.CC#N.CC#N.F[B-](F)(F)F.[Cu+]',
+  'Tetrakis(acetonitrile)palladium(II) Bis(trifluoromethanesulfonate)': 'CC#N.CC#N.CC#N.CC#N.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Pd+2]',
+  'Tetrakis(decyl)ammonium hydroxide': 'CCCCCCCCCC[N+](CCCCCCCCCC)(CCCCCCCCCC)CCCCCCCCCC.[OH-]',
+  'Tetrakis(dimethylamino)titanium(IV)': 'CN([Ti](N(C)C)(N(C)C)N(C)C)C',
+  'Tetrakis(dimethylsilyl)silane': 'C[SiH]([Si]([SiH](C)C)([SiH](C)C)[SiH](C)C)C',
+  'Tetrakis(dimethylsilyloxy)silane': 'C[SiH](O[Si](O[SiH](C)C)(O[SiH](C)C)O[SiH](C)C)C',
+  'Tetrakis(hydroxymethyl)phosphonium Chloride': 'OC[P+](CO)(CO)CO.[Cl-]',
+  'Tetrakis(hydroxymethyl)phosphonium Sulfate': 'OC[P+](CO)(CO)CO.OC[P+](CO)(CO)CO.O=S([O-])([O-])=O',
+  'Tetrakis(trimethylsilyl)silane': 'C[Si]([Si]([Si](C)(C)C)([Si](C)(C)C)[Si](C)(C)C)(C)C',
+  'Tetrakis(triphenylphosphine)palladium(0)': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  Tetrakis: 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  'Pd(Ph3)4': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.P(C%10=CC=CC=C%10)(C%11=CC=CC=C%11)C%12=CC=CC=C%12.[Pd]',
+  'Tetrakis[dimethyl(vinyl)silyl] Orthosilicate': 'C=C[Si](O[Si](O[Si](C)(C)C=C)(O[Si](C)(C)C=C)O[Si](C)(C)C=C)(C)C',
+  'Tetramethylammonium Acetate': 'C[N+](C)(C)C.CC([O-])=O',
+  'Tetramethylammonium Borohydride': 'C[N+](C)(C)C.[BH4-]',
+  'Tetramethylammonium Bromide': 'C[N+](C)(C)C.[Br-]',
+  'Tetramethylammonium Chloride': 'C[N+](C)(C)C.[Cl-]',
+  'Tetramethylammonium Dichloroiodate': 'C[N+](C)(C)C.Cl[I-]Cl',
+  'Tetramethylammonium Fluoride Tetrahydrate': 'C[N+](C)(C)C.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[F-]',
+  'Tetramethylammonium Hexafluorophosphate': 'C[N+](C)(C)C.F[P-](F)(F)(F)(F)F',
+  'Tetramethylammonium Hydroxide': 'C[N+](C)(C)C.[OH-]',
+  'Tetramethylammonium Iodide': 'C[N+](C)(C)C.[I-]',
+  'Tetramethylammonium Sulfate': 'C[N+](C)(C)C.C[N+](C)(C)C.O=S([O-])([O-])=O',
+  'Tetramethylammonium Tetrafluoroborate': 'C[N+](C)(C)C.F[B-](F)(F)F',
+  'Tetramethylammonium Triacetoxyborohydride': 'C[N+](C)(C)C.O=C(O[BH-](OC(C)=O)OC(C)=O)C',
+  'Tetramethylethylenediamine (TMEDA)': 'CN(C)CCN(C)C',
+  Tetramethylgermane: 'C[Ge](C)(C)C',
+  Tetramethylsilane: 'C[Si](C)(C)C',
+  TMS: 'C[Si](C)(C)C',
+  'Tetra-n-octylammonium Bromide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
+  'Tetra-n-octylammonium Iodide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[I-]',
+  'Tetra-n-octylphosphonium Bromide': 'CCCCCCCC[P+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Br-]',
+  'Tetraoctylammonium hydroxide': 'CCCCCCCC[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[OH-]',
+  'Tetrapentylammonium hydroxide': 'CCCCC[N+](CCCCC)(CCCCC)CCCCC.[OH-]',
+  'Tetraphenyl Lead': 'C1([Pb](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  'Tetraphenylarsonium Chloride Hydrochloride Hydrate': '[H]O[H].[H]Cl.C1([As+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
+  Tetraphenylcyclopentadienone: 'O=C1C(C2=CC=CC=C2)=C(C3=CC=CC=C3)C(C4=CC=CC=C4)=C1C5=CC=CC=C5',
+  Tetraphenylgermane: 'C1([Ge](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  'Tetraphenylphosphonium Bromide': 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Br-]',
+  'Tetraphenylphosphonium Chloride': 'C1([P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1.[Cl-]',
+  Tetraphenylporphyrin: 'C1(C2=CC=CC=C2)=C3C=CC(C(C4=CC=CC=C4)=C5C=CC(N5)=C(C6=CC=CC=C6)C(C=C7)=NC7=C(C8=CC=CC=C8)C9=CC=C1N9)=N3',
+  Tetraphenylsilane: 'C1([Si](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  Tetraphenyltin: 'C1([Sn](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)=CC=CC=C1',
+  'Tetrapropyl Orthosilicate': 'CCCO[Si](OCCC)(OCCC)OCCC',
+  'Tetrapropylammonium Bromide': 'CCC[N+](CCC)(CCC)CCC.[Br-]',
+  'Tetrapropylammonium Chloride': 'CCC[N+](CCC)(CCC)CCC.[Cl-]',
+  'Tetrapropylammonium Hydroxide': 'CCC[N+](CCC)(CCC)CCC.[OH-]',
+  'Tetrapropylammonium Iodide': 'CCC[N+](CCC)(CCC)CCC.[I-]',
+  'Tetrapropylammonium Perruthenate': 'CCC[N+](CCC)(CCC)CCC.O=[Ru](=O)([O-])=O',
+  'Thallium(III) Trifluoroacetate': 'O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.O=C([O-])C(F)(F)F.[Tl+3]',
+  THF: 'C1CCCO1',
+  'Thioacetic Acid': 'CC(O)=S',
+  'Thioglycolic Acid': 'SCC(O)=O',
+  'Thionyl Chloride': 'O=S(Cl)Cl',
+  'Thiophosphoryl Chloride': 'OP(O)(Cl)=S',
+  Thulium: '[Tm]',
+  'Thulium(III) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Tm+3]',
+  'tin hydroxide': '[Sn+4].[OH-].[OH-].[OH-].[OH-]',
+  'Tin(II) 2-Ethylhexanoate': 'CCCCC(CC)C([O-])=O.CCCCC(CC)C([O-])=O.[Sn+2]',
+  'Tin(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Sn+2]',
+  'Tin(IV) Chloride': '[Sn+4].[Cl-].[Cl-].[Cl-].[Cl-]',
+  Titanium: '[Ti]',
+  'titanium hydroxide': '[Ti+4].[OH-].[OH-].[OH-].[OH-]',
+  'Titanium(IV) Chloride': '[Ti+4].[Cl-].[Cl-].[Cl-].[Cl-]',
+  'TMS-Imidazole (=N-Trimethylsilylimidazole)': 'C[Si](N1C=NC=C1)(C)C',
+  toluene: 'CC1=CC=CC=C1',
+  'trans,trans-1,5-Bis(4-fluorophenyl)-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(F)C=C1)/C=C/C2=CC=C(F)C=C2',
+  'trans,trans-1,5-Bis(4-methoxyphenyl)-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(OC)C=C1)/C=C/C2=CC=C(OC)C=C2',
+  'trans,trans-1,5-Bis[4-(trifluoromethyl)phenyl]-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=C(C(F)(F)F)C=C1)/C=C/C2=CC=C(C(F)(F)F)C=C2',
+  'trans,trans-1,5-Diphenyl-1,4-pentadien-3-one': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2',
+  'trans-1,2-Bis(diphenylphosphino)ethylene': 'P(/C=C/P(C1=CC=CC=C1)C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4',
+  'trans-2,6-Diisopropyl-N-(2-pyridylmethylene)aniline': 'CC(C1=C(C(C(C)C)=CC=C1)/N=C/C2=NC=CC=C2)C',
+  'trans-2-Butene-1,4-bis(triphenylphosphonium Chloride)': 'C1([P+](C/C=C/C[P+](C2=CC=CC=C2)(C3=CC=CC=C3)C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6)=CC=CC=C1.[Cl-].[Cl-]',
+  'trans-4-(tert-Butyldiphenylsilyloxy)-L-proline': 'O=C(O)[C@H]1NC[C@H](O[Si](C2=CC=CC=C2)(C(C)(C)C)C3=CC=CC=C3)C1',
+  'trans-4-Fluoro-L-proline': 'O=C(O)[C@H]1NC[C@H](F)C1',
+  'Tri(2-furyl)phosphine': 'P(C1=CC=CO1)(C2=CC=CO2)C3=CC=CO3',
+  'Tri(2-thienyl)phosphine': 'P(C1=CC=CS1)(C2=CC=CS2)C3=CC=CS3',
+  'Tri(cyclohexa-2,5-dien-1-yl)silane': '[SiH](C1C=CCC=C1)(C2C=CCC=C2)C3C=CCC=C3',
+  'Tri(m-tolyl)phosphine': 'CC1=CC(P(C2=CC=CC(C)=C2)C3=CC=CC(C)=C3)=CC=C1',
+  'Tri(o-tolyl)phosphine': 'CC1=CC=CC=C1P(C2=CC=CC=C2C)C3=CC=CC=C3C',
+  'Tri(p-tolyl)phosphine': 'CC1=CC=C(P(C2=CC=C(C)C=C2)C3=CC=C(C)C=C3)C=C1',
+  Triacetoxyborohydride: 'O=C(O[BH-](OC(C)=O)OC(C)=O)C',
+  Triacetoxyethylsilane: 'CC[Si](OC(C)=O)(OC(C)=O)OC(C)=O',
+  'Triallyl(methyl)silane': 'C[Si](CC=C)(CC=C)CC=C',
+  'Triallyl(phenyl)silane': 'C=CC[Si](CC=C)(CC=C)C1=CC=CC=C1',
+  Tribenzylsilane: '[SiH](CC1=CC=CC=C1)(CC2=CC=CC=C2)CC3=CC=CC=C3',
+  'Tribromoacetic Acid': 'O=C(O)C(Br)(Br)Br',
+  'Tributyl borate': 'B(OCCCC)(OCCCC)OCCCC',
+  'Tributyl(2-methoxyethyl)phosphonium Bis(trifluoromethanesulfonyl)imide': 'CCCC[P+](CCCC)(CCCC)CCOC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
+  'Tributyl(cyanomethyl)phosphonium Chloride': 'N#CC[P+](CCCC)(CCCC)CCCC.[Cl-]',
+  'Tributyl(ethyl)phosphonium Diethyl Phosphate': 'CC[P+](CCCC)(CCCC)CCCC.O=P(OCC)([O-])OCC',
+  'Tributyl(methyl)ammonium Dicyanamide': '[H]C(C([H])([H])C([H])([H])C([H])([H])[H])([H])[N+](C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H])(C([H])([H])[H])C([H])([H])C([H])([H])C([H])([H])C([H])([H])[H].[N-]=C=NC#N',
+  Tributylamine: 'CCCCN(CCCC)CCCC',
+  Tributylchlorosilane: 'Cl[Si](CCCC)(CCCC)CCCC',
+  'Tributyldodecylphosphonium Bromide': 'CCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  'Tributylhexadecylphosphonium Bromide': 'CCCCCCCCCCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  'Tributylmethylammonium Bis(trifluoromethanesulfonyl)imide': 'FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F.C[N+](CCCC)(CCCC)CCCC',
+  'Tributylmethylammonium Chloride': 'C[N+](CCCC)(CCCC)CCCC.[Cl-]',
+  'Tributylmethylphosphonium Bis(trifluoromethanesulfonyl)imide': 'C[P+](CCCC)(CCCC)CCCC.FC(F)(S([N-]S(C(F)(F)F)(=O)=O)(=O)=O)F',
+  'Tributylmethylphosphonium Iodide': 'C[P+](CCCC)(CCCC)CCCC.[I-]',
+  'Tributyl-n-octylphosphonium Bromide': 'CCCCCCCC[P+](CCCC)(CCCC)CCCC.[Br-]',
+  'Tributylphosphine Oxide': 'CCCCP(CCCC)(CCCC)=O',
+  Tributylsilane: 'CCCC[SiH](CCCC)CCCC',
+  'Tributylsulfonium Iodide': 'CCCC[S+](CCCC)CCCC.[I-]',
+  'Tricarbonyl(cyclooctatetraene)iron': '[C]=O.[C]=O.[C]=O.[Fe].C1=C\\C=C/C=C\\C=C/1',
+  'Trichloro(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](Cl)(Cl)Cl',
+  'Trichloro-2-cyanoethylsilane': 'N#CCC[Si](Cl)(Cl)Cl',
+  'Trichloroacetic Acid': 'O=C(O)C(Cl)(Cl)Cl',
+  Trichlorocyclopentylsilane: 'Cl[Si](Cl)(Cl)C1CCCC1',
+  'Trichloroisocyanuric Acid': 'O=C(N(Cl)C(N1Cl)=O)N(Cl)C1=O',
+  'Trichloromethanesulfonyl Chloride': 'O=S(C(Cl)(Cl)Cl)(Cl)=O',
+  Tricyclohexylphosphine: 'P(C1CCCCC1)(C2CCCCC2)C3CCCCC3',
+  'Tricyclohexylphosphonium Tetrafluoroborate': 'F[B-](F)(F)F.[PH+](C1CCCCC1)(C2CCCCC2)C3CCCCC3',
+  'Triethoxy(3-glycidyloxypropyl)silane': 'CCO[Si](OCC)(OCC)CCCOCC1CO1',
+  'Triethoxy(pentafluorophenyl)silane': 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](OCC)(OCC)OCC',
+  'Triethoxy(propyl)silane': 'CCC[Si](OCC)(OCC)OCC',
+  'Triethoxy[2-(7-oxabicyclo[4.1.0]heptan-3-yl)ethyl]silane': 'CCO[Si](OCC)(OCC)CCC1CC2OC2CC1',
+  'Triethoxy-1H,1H,2H,2H-tridecafluoro-n-octylsilane': 'F[SiH2]C(F)(F)CC(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(OCC)(OCC)OCC',
+  Triethoxyethylsilane: 'CC[Si](OCC)(OCC)OCC',
+  Triethoxyfluorosilane: 'F[Si](OCC)(OCC)OCC',
+  Triethoxymethylsilane: 'C[Si](OCC)(OCC)OCC',
+  'Triethoxy-n-octylsilane': 'CCCCCCCC[Si](OCC)(OCC)OCC',
+  Triethoxyphenylsilane: 'CCO[Si](OCC)(OCC)C1=CC=CC=C1',
+  Triethoxyvinylsilane: 'C=C[Si](OCC)(OCC)OCC',
+  'Triethyl 2-Fluoro-2-phosphonoacetate': 'O=C(OCC)C(F)P(OCC)(OCC)=O',
+  'Triethyl(trifluoromethyl)silane': 'FC([Si](CC)(CC)CC)(F)F',
+  Triethylamine: 'CCN(CC)CC',
+  'Triethylamine Borane': 'CCN(CC)CC.B',
+  'Triethylamine Trihydrofluoride': 'CCN(CC)CC.[H]F.[H]F.[H]F',
+  Triethylchlorogermane: 'Cl[Ge](CC)(CC)CC',
+  Triethylenetetramine: 'NCCNCCNCCN',
+  'Triethylmethylammonium Chloride': 'C[N+](CC)(CC)CC.[Cl-]',
+  'Triethylmethylammonium hydroxide': 'C[N+](CC)(CC)CC.[OH-]',
+  'Triethylphenylammonium Chloride': 'CC[N+](CC)(CC)C1=CC=CC=C1.[Cl-]',
+  Triethylsilane: 'CC[SiH](CC)CC',
+  TES: 'CC[SiH](CC)CC',
+  Triethylsilanol: 'O[Si](CC)(CC)CC',
+  Triethylsilylacetylene: 'C#C[Si](CC)(CC)CC',
+  'Triethylsulfonium Bis(trifluoromethanesulfonyl)imide': 'O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O.CC[S+](CC)CC',
+  Triethylvinylsilane: 'C=C[Si](CC)(CC)CC',
+  'Trifluoroacetic Acid': 'O=C(O)C(F)(F)F',
+  TFA: 'O=C(O)C(F)(F)F',
+  'Trifluoroacetic Anhydride': 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
+  TFAA: 'O=C(OC(C(F)(F)F)=O)C(F)(F)F',
+  'Trifluoroacetyl Triflate': 'O=S(OC(C(F)(F)F)=O)(C(F)(F)F)=O',
+  Trifluoroacetylacetone: 'O=C(CC(C)=O)C(F)(F)F',
+  'Trifluoroboronic acid diethyletherate': 'FB(F)F.CCOCC',
+  Trifluoromethanesulfonanilide: 'O=S(C(F)(F)F)(NC1=CC=CC=C1)=O',
+  'Trifluoromethanesulfonic Acid': 'O=S(C(F)(F)F)(O)=O',
+  'Trifluoromethanesulfonic Anhydride': 'O=S(C(F)(F)F)(OS(C(F)(F)F)(=O)=O)=O',
+  'Trifluoromethanesulfonyl Chloride': 'O=S(C(F)(F)F)(Cl)=O',
+  'Trihexyl(tetradecyl)phosphonium Chloride': 'CCCCCCCCCCCCCC[P+](CCCCCC)(CCCCCC)CCCCCC.[Cl-]',
+  'Trihexyl(tetradecyl)phosphonium Dicyanamide': 'CCCCCC[P+](CCCCCC)(CCCCCC)CCCCCCCCCCCCCC.N#C[N-]C#N',
+  Trihexylphosphine: 'CCCCCCP(CCCCCC)CCCCCC',
+  Trihexylsilane: 'CCCCCC[SiH](CCCCCC)CCCCCC',
+  'Triisopropyl[(trimethylsilyl)ethynyl]silane': 'C[Si](C#C[Si](C(C)C)(C(C)C)C(C)C)(C)C',
+  Triisopropylsilane: 'CC([SiH](C(C)C)C(C)C)C',
+  Triisopropylsilylacetylene: 'C#C[Si](C(C)C)(C(C)C)C(C)C',
+  'Trimagnesium Dicitrate Nonahydrate': 'OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.OC(C([O-])=O)(CC([O-])=O)CC([O-])=O.[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[Mg+2].[Mg+2].[Mg+2]',
+  'Trimethoxy(1H,1H,2H,2H-tridecafluoro-n-octyl)silane': 'FC(C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F)(F)CC[Si](OC)(OC)OC',
+  'Trimethoxy(2-phenylethyl)silane': 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
+  'Trimethoxy(3,3,3-trifluoropropyl)silane': 'FC(F)(F)CC[Si](OC)(OC)OC',
+  'Trimethoxy(4-methoxyphenyl)silane': 'COC1=CC=C([Si](OC)(OC)OC)C=C1',
+  'Trimethoxy(methyl)silane': 'C[Si](OC)(OC)OC',
+  'Trimethoxy(phenylethyl)silane': 'CO[Si](OC)(OC)CCC1=CC=CC=C1',
+  'Trimethoxy(propyl)silane': 'CCC[Si](OC)(OC)OC',
+  'Trimethoxy[3-(methylamino)propyl]silane': 'CNCCC[Si](OC)(OC)OC',
+  'Trimethoxy[3-(phenylamino)propyl]silane': 'CO[Si](OC)(OC)CCCNC1=CC=CC=C1',
+  'Trimethoxy-n-octylsilane': 'CCCCCCCC[Si](OC)(OC)OC',
+  Trimethoxyphenylsilane: 'CO[Si](OC)(OC)C1=CC=CC=C1',
   "Trimethyl 2,2':6',2''-Terpyridine-4,4',4''-tricarboxylate": 'O=C(C1=CC(C2=NC(C3=NC=CC(C(OC)=O)=C3)=CC(C(OC)=O)=C2)=NC=C1)OC',
-  "Trimethyl(2-pyridyl)tin": 'C[Sn](C)(C)C1=NC=CC=C1',
-  "Trimethyl(4-pyridyl)tin": 'C[Sn](C)(C)C1=CC=NC=C1',
-  "Trimethyl(heptafluoropropyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)F',
-  "Trimethyl(nonafluorobutyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  "Trimethyl(pentafluoroethyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)F',
-  "Trimethyl(pentafluorophenyl)silane": 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](C)(C)C',
-  "Trimethyl(tridecafluorohexyl)silane": 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
-  "Trimethyl[2-[(trimethylsilyl)methyl]benzyl]ammonium Iodide": 'C[Si](CC1=CC=CC=C1C[N+](C)(C)C)(C)C.[I-]',
-  "Trimethyl[3-(trimethoxysilyl)propyl]ammonium Chloride": 'CO[Si](CCC[N+](C)(C)C)(OC)OC.[Cl-]',
-  "Trimethylamine Borane": 'CN(C)C.B',
-  "Trimethylamine N-Oxide": 'C[N+](C)([O-])C',
-  "Trimethylamine N-Oxide Dihydrate": 'C[N+](C)([O-])C.[H]O[H].[H]O[H]',
-  "Trimethylchlorogermane": 'Cl[Ge](C)(C)C',
-  "Trimethylethoxysilane": 'CCO[Si](C)(C)C',
-  "Trimethylnonylammonium Bromide": 'CCCCCCCCC[N+](C)(C)C.[Br-]',
-  "Trimethylphenylammonium Bromide": 'C[N+](C)(C)C1=CC=CC=C1.[Br-]',
-  "Trimethylphenylammonium Chloride": 'C[N+](C)(C)C1=CC=CC=C1.[Cl-]',
-  "Trimethylphenylammonium Hydroxide": 'C[N+](C)(C)C1=CC=CC=C1.[OH-]',
-  "Trimethylphenylammonium Tribromide": 'C[N+](C)(C)C1=CC=CC=C1.[Br-].[Br-].[Br-]',
-  "Trimethylphenylsilane": 'C[Si](C)(C)C1=CC=CC=C1',
-  "Trimethylphosphine": 'CP(C)C',
-  "Trimethylpropylammonium Bis(trifluoromethanesulfonyl)imide": 'CCC[N+](C)(C)C.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
-  "Trimethylpropylammonium Bromide": 'CCC[N+](C)(C)C.[Br-]',
-  "Trimethylsilyl Chloride": 'C[Si](C)(Cl)C',
-  "TMSCl": 'C[Si](C)(Cl)C',
-  "TMS-chloride": 'C[Si](C)(Cl)C',
-  "Trimethylsilyl Azide": 'C[Si](C)(N=[N+]=[N-])C',
-  "TMS-Azide": 'C[Si](C)(N=[N+]=[N-])C',
-  "TMSA": 'C[Si](C)(N=[N+]=[N-])C',
-  "TMSN3": 'C[Si](C)(N=[N+]=[N-])C',
-  "Trimethylsilyl Acetate": 'CC(O[Si](C)(C)C)=O',
-  "Trimethylsilyl Difluoro(fluorosulfonyl)acetate": 'O=C(O[Si](C)(C)C)C(F)(F)S(=O)(F)=O',
-  "Trimethylsilyl Propionate": 'CCC(O[Si](C)(C)C)=O',
-  "Trimethylsilyl Trifluoroacetate": 'O=C(O[Si](C)(C)C)C(F)(F)F',
-  "Trimethylsilylacetylene": 'C#C[Si](C)(C)C',
-  "Trimethylsilylcyclopentadiene": 'C[Si](C1=CC=CC1)(C)C',
-  "Trimethylsilylketene Ethyl Trimethylsilyl Acetal": 'C[Si](/C=C(OCC)/O[Si](C)(C)C)(C)C',
-  "Trimethylsilylmethylmagnesium Chloride": 'Cl[Mg]C[Si](C)(C)C',
-  "Trimethylstearylammonium Bromide": 'CCCCCCCCCCCCCCCCCC[N+](C)(C)C.[Br-]',
-  "Trimethylsulfonium Iodide": 'C[S+](C)C.[I-]',
-  "Trimethyltetradecylammonium Chloride": 'CCCCCCCCCCCCCC[N+](C)(C)C.[Cl-]',
-  "Trimethyltin Chloride": 'C[Sn](C)(Cl)C',
-  "Tri-n-octylphosphine": 'CCCCCCCCP(CCCCCCCC)CCCCCCCC',
-  "Tri-n-octylphosphine Oxide": 'CCCCCCCCP(CCCCCCCC)(CCCCCCCC)=O',
-  "Trioctylmethylammonium Chloride": 'C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Cl-]',
-  "Triphenyl Phosphite": 'P(OC1=CC=CC=C1)(OC2=CC=CC=C2)OC3=CC=CC=C3',
-  "Triphenylantimony": '[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylantimony Diacetate": 'CC(O)=O.CC(O)=O.[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylantimony Dichloride": 'Cl[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)(Cl)C3=CC=CC=C3',
-  "Triphenylantimony Oxide": 'O=[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylarsine": '[As](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylchlorogermane": 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylphosphine": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylphosphine Borane": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.B',
-  "Triphenylphosphine Oxide": 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylphosphine Selenide": '[Se]=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylsilane": '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylsilanol": 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphenylvinylsilane": 'C=C[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
-  "Triphosgene": 'ClC(Cl)(OC(OC(Cl)(Cl)Cl)=O)Cl',
-  "Tris(1-pyrazolyl)methane": 'C(N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3',
+  'Trimethyl(2-pyridyl)tin': 'C[Sn](C)(C)C1=NC=CC=C1',
+  'Trimethyl(4-pyridyl)tin': 'C[Sn](C)(C)C1=CC=NC=C1',
+  'Trimethyl(heptafluoropropyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)F',
+  'Trimethyl(nonafluorobutyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  'Trimethyl(pentafluoroethyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)F',
+  'Trimethyl(pentafluorophenyl)silane': 'FC1=C(F)C(F)=C(F)C(F)=C1[Si](C)(C)C',
+  'Trimethyl(tridecafluorohexyl)silane': 'FC([Si](C)(C)C)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)C(F)(F)F',
+  'Trimethyl[2-[(trimethylsilyl)methyl]benzyl]ammonium Iodide': 'C[Si](CC1=CC=CC=C1C[N+](C)(C)C)(C)C.[I-]',
+  'Trimethyl[3-(trimethoxysilyl)propyl]ammonium Chloride': 'CO[Si](CCC[N+](C)(C)C)(OC)OC.[Cl-]',
+  'Trimethylamine Borane': 'CN(C)C.B',
+  'Trimethylamine N-Oxide': 'C[N+](C)([O-])C',
+  'Trimethylamine N-Oxide Dihydrate': 'C[N+](C)([O-])C.[H]O[H].[H]O[H]',
+  Trimethylchlorogermane: 'Cl[Ge](C)(C)C',
+  Trimethylethoxysilane: 'CCO[Si](C)(C)C',
+  'Trimethylnonylammonium Bromide': 'CCCCCCCCC[N+](C)(C)C.[Br-]',
+  'Trimethylphenylammonium Bromide': 'C[N+](C)(C)C1=CC=CC=C1.[Br-]',
+  'Trimethylphenylammonium Chloride': 'C[N+](C)(C)C1=CC=CC=C1.[Cl-]',
+  'Trimethylphenylammonium Hydroxide': 'C[N+](C)(C)C1=CC=CC=C1.[OH-]',
+  'Trimethylphenylammonium Tribromide': 'C[N+](C)(C)C1=CC=CC=C1.[Br-].[Br-].[Br-]',
+  Trimethylphenylsilane: 'C[Si](C)(C)C1=CC=CC=C1',
+  Trimethylphosphine: 'CP(C)C',
+  'Trimethylpropylammonium Bis(trifluoromethanesulfonyl)imide': 'CCC[N+](C)(C)C.O=S([N-]S(C(F)(F)F)(=O)=O)(C(F)(F)F)=O',
+  'Trimethylpropylammonium Bromide': 'CCC[N+](C)(C)C.[Br-]',
+  'Trimethylsilyl Chloride': 'C[Si](C)(Cl)C',
+  TMSCl: 'C[Si](C)(Cl)C',
+  'TMS-chloride': 'C[Si](C)(Cl)C',
+  'Trimethylsilyl Azide': 'C[Si](C)(N=[N+]=[N-])C',
+  'TMS-Azide': 'C[Si](C)(N=[N+]=[N-])C',
+  TMSA: 'C[Si](C)(N=[N+]=[N-])C',
+  TMSN3: 'C[Si](C)(N=[N+]=[N-])C',
+  'Trimethylsilyl Acetate': 'CC(O[Si](C)(C)C)=O',
+  'Trimethylsilyl Difluoro(fluorosulfonyl)acetate': 'O=C(O[Si](C)(C)C)C(F)(F)S(=O)(F)=O',
+  'Trimethylsilyl Propionate': 'CCC(O[Si](C)(C)C)=O',
+  'Trimethylsilyl Trifluoroacetate': 'O=C(O[Si](C)(C)C)C(F)(F)F',
+  Trimethylsilylacetylene: 'C#C[Si](C)(C)C',
+  Trimethylsilylcyclopentadiene: 'C[Si](C1=CC=CC1)(C)C',
+  'Trimethylsilylketene Ethyl Trimethylsilyl Acetal': 'C[Si](/C=C(OCC)/O[Si](C)(C)C)(C)C',
+  'Trimethylsilylmethylmagnesium Chloride': 'Cl[Mg]C[Si](C)(C)C',
+  'Trimethylstearylammonium Bromide': 'CCCCCCCCCCCCCCCCCC[N+](C)(C)C.[Br-]',
+  'Trimethylsulfonium Iodide': 'C[S+](C)C.[I-]',
+  'Trimethyltetradecylammonium Chloride': 'CCCCCCCCCCCCCC[N+](C)(C)C.[Cl-]',
+  'Trimethyltin Chloride': 'C[Sn](C)(Cl)C',
+  'Tri-n-octylphosphine': 'CCCCCCCCP(CCCCCCCC)CCCCCCCC',
+  'Tri-n-octylphosphine Oxide': 'CCCCCCCCP(CCCCCCCC)(CCCCCCCC)=O',
+  'Trioctylmethylammonium Chloride': 'C[N+](CCCCCCCC)(CCCCCCCC)CCCCCCCC.[Cl-]',
+  'Triphenyl Phosphite': 'P(OC1=CC=CC=C1)(OC2=CC=CC=C2)OC3=CC=CC=C3',
+  Triphenylantimony: '[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  'Triphenylantimony Diacetate': 'CC(O)=O.CC(O)=O.[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  'Triphenylantimony Dichloride': 'Cl[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)(Cl)C3=CC=CC=C3',
+  'Triphenylantimony Oxide': 'O=[Sb](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylarsine: '[As](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylchlorogermane: 'Cl[Ge](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylphosphine: 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  'Triphenylphosphine Borane': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.B',
+  'Triphenylphosphine Oxide': 'O=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  'Triphenylphosphine Selenide': '[Se]=P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylsilane: '[SiH](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylsilanol: 'O[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphenylvinylsilane: 'C=C[Si](C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3',
+  Triphosgene: 'ClC(Cl)(OC(OC(Cl)(Cl)Cl)=O)Cl',
+  'Tris(1-pyrazolyl)methane': 'C(N1N=CC=C1)(N2N=CC=C2)N3N=CC=C3',
   "Tris(2,2'-bipyridyl)ruthenium(II) Chloride Hexahydrate": '[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].[H]O[H].C1(C2=NC=CC=C2)=NC=CC=C1.C3(C4=NC=CC=C4)=NC=CC=C3.C5(C6=NC=CC=C6)=NC=CC=C5.[Ru+2].[Cl-].[Cl-]',
-  "Tris(2,4-di-tert-butylphenyl) Phosphite": 'CC(C1=CC=C(OP(OC2=CC=C(C(C)(C)C)C=C2C(C)(C)C)OC3=CC=C(C(C)(C)C)C=C3C(C)(C)C)C(C(C)(C)C)=C1)(C)C',
-  "Tris(2,4-pentanedionato)cobalt(III)": 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Co+3]',
-  "Tris(2,4-pentanedionato)iron(III)": '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Fe+3]',
-  "Tris(2,4-pentanedionato)manganese(III)": 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Mn+3]',
-  "Tris(2,6-dimethoxyphenyl)phosphine": 'COC1=C(P(C2=C(OC)C=CC=C2OC)C3=C(OC)C=CC=C3OC)C(OC)=CC=C1',
-  "Tris(2-aminoethyl)amine": 'NCCN(CCN)CCN',
-  "Tris(2-benzimidazolylmethyl)amine": 'N(CC1=NC2=CC=CC=C2N1)(CC3=NC4=CC=CC=C4N3)CC5=NC6=CC=CC=C6N5',
-  "Tris(2-carboxyethyl)phosphine Hydrochloride": 'O=C(CCP(CCC(O)=O)CCC(O)=O)O.[H]Cl',
-  "Tris(2-methoxyphenyl)phosphine": 'COC1=CC=CC=C1P(C2=CC=CC=C2OC)C3=CC=CC=C3OC',
-  "Tris(2-phenylpyridinato)iridium(III)": 'C1(C2=CC=CC=C2)=NC=CC=C1.C3(C4=CC=CC=C4)=NC=CC=C3.C5(C6=CC=CC=C6)=NC=CC=C5.[Ir]',
-  "Tris(2-pyridylmethyl)amine": 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CC3=NC=CC=C3',
-  "Tris(3,5-dimethyl-1-pyrazolyl)methane": 'CC1=CC(C)=NN1C(N2N=C(C)C=C2C)N3N=C(C)C=C3C',
-  "Tris(3-hydroxypropyltriazolylmethyl)amine": 'OCCCC(N(C(CCCO)C1=CNN=N1)C(CCCO)C2=CNN=N2)C3=CNN=N3',
-  "Tris(4-fluorophenyl)phosphine": 'FC1=CC=C(P(C2=CC=C(F)C=C2)C3=CC=C(F)C=C3)C=C1',
-  "Tris(4-methoxyphenyl)phosphine": 'COC1=CC=C(P(C2=CC=C(OC)C=C2)C3=CC=C(OC)C=C3)C=C1',
-  "Tris(dibenzoylmethanato) Iron": '[O-]/C(C1=CC=CC=C1)=C\\C(C2=CC=CC=C2)=O.[O-]/C(C3=CC=CC=C3)=C\\C(C4=CC=CC=C4)=O.[O-]/C(C5=CC=CC=C5)=C\\C(C6=CC=CC=C6)=O.[Fe+3]',
-  "Tris(dibenzylideneacetone)dipalladium(0)": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
-  "Pd2(dba)3": 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
-  "Tris(diethylamino)phosphine": 'CCN(P(N(CC)CC)N(CC)CC)CC',
-  "Tris(hydroxymethyl)aminomethane": 'NC(CO)(CO)CO',
-  "Tris(pentafluorophenyl)phosphine": 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F',
-  "Tris(trimethylsilyloxy)silane": 'C[Si](O[SiH](O[Si](C)(C)C)O[Si](C)(C)C)(C)C',
-  "Tris(triphenylphosphine)rhodium(I) Chloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Rh+].[Cl-]',
-  "Tris(triphenylphosphine)ruthenium(II) Dichloride": 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Ru+2].[Cl-].[Cl-]',
-  "Tris[(1-benzyl-1H-1,2,3-triazol-4-yl)methyl]amine": 'N(CC1=CN(CC2=CC=CC=C2)N=N1)(CC3=CN(CC4=CC=CC=C4)N=N3)CC5=CN(CC6=CC=CC=C6)N=N5',
-  "Tris[2-(dimethylamino)ethyl]amine": 'CN(CCN(CCN(C)C)CCN(C)C)C',
-  "Tris[3,5-bis(trifluoromethyl)phenyl]phosphine": 'FC(C1=CC(C(F)(F)F)=CC(P(C2=CC(C(F)(F)F)=CC(C(F)(F)F)=C2)C3=CC(C(F)(F)F)=CC(C(F)(F)F)=C3)=C1)(F)F',
-  "Trisodium Paraperiodate": 'O=I([O-])([O-])(O)(O)[O-].[Na+].[Na+].[Na+]',
-  "Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetate": 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCN(CC([O-])=O)CC1',
-  "Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7-triacetate": 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCNCC1',
-  "Tri-tert-butylphosphonium Tetrafluoroborate": 'CC([PH+](C(C)(C)C)C(C)(C)C)(C)C.F[B-](F)(F)F',
-  "Tungsten": '[W]',
-  "Urea hydrogen peroxide": 'NC(N)=O.OO',
-  "Vanadium": '[V]',
-  "Vinylmagnesium Bromide": 'Br[Mg]C=C',
-  "Vinyltrimethoxysilane": 'CO[Si](OC)(C=C)OC',
-  "Vinyltrimethylsilane": 'C[Si](C)(C=C)C',
-  "Vinyltris(2-methoxyethoxy)silane": 'COCCO[Si](OCCOC)(C=C)OCCOC',
-  "water": '[H]O[H]',
-  "Ytterbium": '[Yb]',
-  "Ytterbium(III) Trifluoromethanesulfonate Hydrate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[H]O[H].[Yb+3]',
-  "Yttrium": '[Y]',
-  "Zinc Bromide": '[Zn+2].[Br-].[Br-]',
-  "Zinc Chloride": '[Zn+2].[Cl-].[Cl-]',
-  "Zinc peroxide": '[O-][O-].[Zn+2]',
-  "Zinc(II) Bis(trifluoromethanesulfinate) Dihydrate": 'O=S(C(F)(F)F)[O-].O=S(C(F)(F)F)[O-].[H]O[H].[H]O[H].[Zn+2]',
-  "Zinc(II) Trifluoromethanesulfonate": 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Zn+2]',
-  "zink hydroxide": '[Zn+2].[OH-].[OH-]',
-  "zink stannate": 'O=[Sn]([O-])[O-].[Zn+2]',
-  "Zirconium": '[Zr]',
-  "Zirconium hydroxide": '[Zr+4].[OH-].[OH-].[OH-].[OH-]',
-  "α-Methyl-L-proline": 'O=C(O)[C@@]1(C)NCCC1',
-  "β-Isocupreidine": '[H][C@@](C1([H])[H])(C([H])([H])C2([H])[H])[C@@]3(C([H])([H])C([H])([H])[H])O[C@](C4=C(C([H])=C5O[H])C(C([H])=C5[H])=NC([H])=C4[H])([H])[C@]1([H])[N@@]2C3([H])[H]',
-  "Di-tert-butyl dicarbonate": 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
-  "Boc2O": 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
-  "N-(9H-Fluoren-9-ylmethoxycarbonyloxy)succinimide": 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
-  "Fmoc-Osu": 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
+  'Tris(2,4-di-tert-butylphenyl) Phosphite': 'CC(C1=CC=C(OP(OC2=CC=C(C(C)(C)C)C=C2C(C)(C)C)OC3=CC=C(C(C)(C)C)C=C3C(C)(C)C)C(C(C)(C)C)=C1)(C)C',
+  'Tris(2,4-pentanedionato)cobalt(III)': 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Co+3]',
+  'Tris(2,4-pentanedionato)iron(III)': '[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Fe+3]',
+  'Tris(2,4-pentanedionato)manganese(III)': 'CC(/C=C(C)\\[O-])=O.[O-]/C(C)=C\\C(C)=O.[O-]/C(C)=C\\C(C)=O.[Mn+3]',
+  'Tris(2,6-dimethoxyphenyl)phosphine': 'COC1=C(P(C2=C(OC)C=CC=C2OC)C3=C(OC)C=CC=C3OC)C(OC)=CC=C1',
+  'Tris(2-aminoethyl)amine': 'NCCN(CCN)CCN',
+  'Tris(2-benzimidazolylmethyl)amine': 'N(CC1=NC2=CC=CC=C2N1)(CC3=NC4=CC=CC=C4N3)CC5=NC6=CC=CC=C6N5',
+  'Tris(2-carboxyethyl)phosphine Hydrochloride': 'O=C(CCP(CCC(O)=O)CCC(O)=O)O.[H]Cl',
+  'Tris(2-methoxyphenyl)phosphine': 'COC1=CC=CC=C1P(C2=CC=CC=C2OC)C3=CC=CC=C3OC',
+  'Tris(2-phenylpyridinato)iridium(III)': 'C1(C2=CC=CC=C2)=NC=CC=C1.C3(C4=CC=CC=C4)=NC=CC=C3.C5(C6=CC=CC=C6)=NC=CC=C5.[Ir]',
+  'Tris(2-pyridylmethyl)amine': 'N(CC1=NC=CC=C1)(CC2=NC=CC=C2)CC3=NC=CC=C3',
+  'Tris(3,5-dimethyl-1-pyrazolyl)methane': 'CC1=CC(C)=NN1C(N2N=C(C)C=C2C)N3N=C(C)C=C3C',
+  'Tris(3-hydroxypropyltriazolylmethyl)amine': 'OCCCC(N(C(CCCO)C1=CNN=N1)C(CCCO)C2=CNN=N2)C3=CNN=N3',
+  'Tris(4-fluorophenyl)phosphine': 'FC1=CC=C(P(C2=CC=C(F)C=C2)C3=CC=C(F)C=C3)C=C1',
+  'Tris(4-methoxyphenyl)phosphine': 'COC1=CC=C(P(C2=CC=C(OC)C=C2)C3=CC=C(OC)C=C3)C=C1',
+  'Tris(dibenzoylmethanato) Iron': '[O-]/C(C1=CC=CC=C1)=C\\C(C2=CC=CC=C2)=O.[O-]/C(C3=CC=CC=C3)=C\\C(C4=CC=CC=C4)=O.[O-]/C(C5=CC=CC=C5)=C\\C(C6=CC=CC=C6)=O.[Fe+3]',
+  'Tris(dibenzylideneacetone)dipalladium(0)': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
+  'Pd2(dba)3': 'O=C(/C=C/C1=CC=CC=C1)/C=C/C2=CC=CC=C2.O=C(/C=C/C3=CC=CC=C3)/C=C/C4=CC=CC=C4.O=C(/C=C/C5=CC=CC=C5)/C=C/C6=CC=CC=C6.[Pd].[Pd]',
+  'Tris(diethylamino)phosphine': 'CCN(P(N(CC)CC)N(CC)CC)CC',
+  'Tris(hydroxymethyl)aminomethane': 'NC(CO)(CO)CO',
+  'Tris(pentafluorophenyl)phosphine': 'FC1=C(F)C(F)=C(F)C(F)=C1P(C2=C(F)C(F)=C(F)C(F)=C2F)C3=C(F)C(F)=C(F)C(F)=C3F',
+  'Tris(trimethylsilyloxy)silane': 'C[Si](O[SiH](O[Si](C)(C)C)O[Si](C)(C)C)(C)C',
+  'Tris(triphenylphosphine)rhodium(I) Chloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Rh+].[Cl-]',
+  'Tris(triphenylphosphine)ruthenium(II) Dichloride': 'P(C1=CC=CC=C1)(C2=CC=CC=C2)C3=CC=CC=C3.P(C4=CC=CC=C4)(C5=CC=CC=C5)C6=CC=CC=C6.P(C7=CC=CC=C7)(C8=CC=CC=C8)C9=CC=CC=C9.[Ru+2].[Cl-].[Cl-]',
+  'Tris[(1-benzyl-1H-1,2,3-triazol-4-yl)methyl]amine': 'N(CC1=CN(CC2=CC=CC=C2)N=N1)(CC3=CN(CC4=CC=CC=C4)N=N3)CC5=CN(CC6=CC=CC=C6)N=N5',
+  'Tris[2-(dimethylamino)ethyl]amine': 'CN(CCN(CCN(C)C)CCN(C)C)C',
+  'Tris[3,5-bis(trifluoromethyl)phenyl]phosphine': 'FC(C1=CC(C(F)(F)F)=CC(P(C2=CC(C(F)(F)F)=CC(C(F)(F)F)=C2)C3=CC(C(F)(F)F)=CC(C(F)(F)F)=C3)=C1)(F)F',
+  'Trisodium Paraperiodate': 'O=I([O-])([O-])(O)(O)[O-].[Na+].[Na+].[Na+]',
+  'Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7,10-tetraacetate': 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCN(CC([O-])=O)CC1',
+  'Tri-tert-butyl 1,4,7,10-Tetraazacyclododecane-1,4,7-triacetate': 'O=C(OC(C)(C)C)CN1CCN(CC(OC(C)(C)C)=O)CCN(CC(OC(C)(C)C)=O)CCNCC1',
+  'Tri-tert-butylphosphonium Tetrafluoroborate': 'CC([PH+](C(C)(C)C)C(C)(C)C)(C)C.F[B-](F)(F)F',
+  Tungsten: '[W]',
+  'Urea hydrogen peroxide': 'NC(N)=O.OO',
+  Vanadium: '[V]',
+  'Vinylmagnesium Bromide': 'Br[Mg]C=C',
+  Vinyltrimethoxysilane: 'CO[Si](OC)(C=C)OC',
+  Vinyltrimethylsilane: 'C[Si](C)(C=C)C',
+  'Vinyltris(2-methoxyethoxy)silane': 'COCCO[Si](OCCOC)(C=C)OCCOC',
+  water: '[H]O[H]',
+  Ytterbium: '[Yb]',
+  'Ytterbium(III) Trifluoromethanesulfonate Hydrate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[H]O[H].[Yb+3]',
+  Yttrium: '[Y]',
+  'Zinc Bromide': '[Zn+2].[Br-].[Br-]',
+  'Zinc Chloride': '[Zn+2].[Cl-].[Cl-]',
+  'Zinc peroxide': '[O-][O-].[Zn+2]',
+  'Zinc(II) Bis(trifluoromethanesulfinate) Dihydrate': 'O=S(C(F)(F)F)[O-].O=S(C(F)(F)F)[O-].[H]O[H].[H]O[H].[Zn+2]',
+  'Zinc(II) Trifluoromethanesulfonate': 'O=S(C(F)(F)F)([O-])=O.O=S(C(F)(F)F)([O-])=O.[Zn+2]',
+  'zink hydroxide': '[Zn+2].[OH-].[OH-]',
+  'zink stannate': 'O=[Sn]([O-])[O-].[Zn+2]',
+  Zirconium: '[Zr]',
+  'Zirconium hydroxide': '[Zr+4].[OH-].[OH-].[OH-].[OH-]',
+  'α-Methyl-L-proline': 'O=C(O)[C@@]1(C)NCCC1',
+  'β-Isocupreidine': '[H][C@@](C1([H])[H])(C([H])([H])C2([H])[H])[C@@]3(C([H])([H])C([H])([H])[H])O[C@](C4=C(C([H])=C5O[H])C(C([H])=C5[H])=NC([H])=C4[H])([H])[C@]1([H])[N@@]2C3([H])[H]',
+  'Di-tert-butyl dicarbonate': 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
+  Boc2O: 'O=C(OC(OC(C)(C)C)=O)OC(C)(C)C',
+  'N-(9H-Fluoren-9-ylmethoxycarbonyloxy)succinimide': 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
+  'Fmoc-Osu': 'O=C(ON(C1=O)C(CC1)=O)OCC2C(C=CC=C3)=C3C4=C2C=CC=C4',
 };
diff --git a/app/packs/src/components/stores/ClipboardStore.js b/app/packs/src/components/stores/ClipboardStore.js
deleted file mode 100644
index b31835723..000000000
--- a/app/packs/src/components/stores/ClipboardStore.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import ClipboardActions from 'src/stores/alt/actions/ClipboardActions';
-import Aviator from 'aviator';
-
-class ClipboardStore {
-  constructor() {
-    this.state = {
-      samples: [],
-      wellplates: []
-    };
-
-    this.bindListeners({
-      handleFetchSamplesByUIStateAndLimit: [ClipboardActions.fetchSamplesByUIStateAndLimit, ClipboardActions.fetchElementAndBuildCopy],
-      handleFetchWellplatesByUIState: ClipboardActions.fetchWellplatesByUIState
-    })
-  }
-
-  handleFetchSamplesByUIStateAndLimit(result) {
-    this.state.samples = result.samples;
-
-    switch(result.action) {
-      case 'template_wellplate':
-        Aviator.navigate(result.isSync
-          ? `/scollection/${result.collection_id}/wellplate/template`
-          : `/collection/${result.collection_id}/wellplate/template`);
-        break;
-      case 'copy_sample':
-        Aviator.navigate(result.isSync
-          ? `/scollection/${result.collection_id}/sample/copy`
-          : `/collection/${result.collection_id}/sample/copy`);
-    }
-  }
-
-  handleFetchWellplatesByUIState(result) {
-    this.state.wellplates = result.wellplates;
-    switch(result.action) {
-      case 'template_screen':
-        Aviator.navigate(result.isSync
-          ? `/scollection/${result.collection_id}/screen/template`
-          : `/collection/${result.collection_id}/screen/template`);
-    }
-  }
-}
-
-export default alt.createStore(ClipboardStore, 'ClipboardStore');
diff --git a/app/packs/src/components/stores/CollectionStore.js b/app/packs/src/components/stores/CollectionStore.js
deleted file mode 100644
index cb6d78574..000000000
--- a/app/packs/src/components/stores/CollectionStore.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-
-
-class CollectionStore {
-  constructor() {
-    this.state = {
-      genericEls: [],
-      unsharedRoots: [],
-      sharedRoots: [],
-      remoteRoots: [],
-      lockedRoots: [],
-      syncInRoots: [],
-      visibleRootsIds: [],
-    };
-
-
-    this.bindListeners({
-      handleTakeOwnership: CollectionActions.takeOwnership,
-      //handleFetchGenericEls: CollectionActions.fetchGenericEls,
-      handleFetchLockedCollectionRoots: CollectionActions.fetchLockedCollectionRoots,
-      handleFetchUnsharedCollectionRoots: CollectionActions.fetchUnsharedCollectionRoots,
-      handleFetchSharedCollectionRoots: CollectionActions.fetchSharedCollectionRoots,
-      handleFetchRemoteCollectionRoots: CollectionActions.fetchRemoteCollectionRoots,
-      handleFetchSyncInCollectionRoots: CollectionActions.fetchSyncInCollectionRoots,
-      handleCreateSharedCollections: CollectionActions.createSharedCollections,
-      handleBulkUpdateUnsharedCollections: CollectionActions.bulkUpdateUnsharedCollections,
-      handleUpdateSharedCollection: CollectionActions.updateSharedCollection,
-      handleCreateUnsharedCollection: [
-        CollectionActions.createUnsharedCollection,
-        CollectionActions.createSync,
-        CollectionActions.editSync,
-        CollectionActions.deleteSync
-      ],
-      handleRejectSharedCollection: CollectionActions.rejectShared,
-      handleRejectSyncdCollection: CollectionActions.rejectSync,
-      handleUpdateCollectrionTree: CollectionActions.updateCollectrionTree
-    })
-  }
-
-  handleTakeOwnership() {
-    CollectionActions.fetchUnsharedCollectionRoots();
-    CollectionActions.fetchSharedCollectionRoots();
-    CollectionActions.fetchRemoteCollectionRoots();
-    CollectionActions.fetchSyncInCollectionRoots();
-  }
-
-  //handleFetchGenericEls(result) {
-  //  console.log(result);
-  //  this.state.genericEls = result.genericEls;
-  //}
-
-  handleFetchLockedCollectionRoots(results) {
-    this.state.lockedRoots = results.collections;
-  }
-
-  handleFetchUnsharedCollectionRoots(results) {
-    this.state.unsharedRoots = results.collections;
-  }
-
-  handleFetchSharedCollectionRoots(results) {
-    this.state.sharedRoots = results?.collections;
-  }
-
-  handleFetchRemoteCollectionRoots(results) {
-    this.state.remoteRoots = results.collections;
-  }
-
-  handleFetchSyncInCollectionRoots(results) {
-    this.state.syncInRoots = results.syncCollections;
-  }
-  handleCreateSharedCollections() {
-    CollectionActions.fetchUnsharedCollectionRoots();
-    CollectionActions.fetchSharedCollectionRoots();
-    CollectionActions.fetchRemoteCollectionRoots();
-  }
-
-  handleBulkUpdateUnsharedCollections() {
-    CollectionActions.fetchUnsharedCollectionRoots();
-    CollectionActions.fetchSharedCollectionRoots();
-    CollectionActions.fetchRemoteCollectionRoots();
-  }
-
-  handleUpdateSharedCollection() {
-    CollectionActions.fetchSharedCollectionRoots();
-  }
-
-  handleCreateUnsharedCollection(results) {
-    CollectionActions.fetchUnsharedCollectionRoots();
-  }
-
-  handleUpdateCollectrionTree(visibleRootsIds) {
-    this.state.visibleRootsIds = visibleRootsIds
-  }
-
-  handleRejectSharedCollection(results) {
-    CollectionActions.fetchRemoteCollectionRoots();
-  }
-  handleRejectSyncdCollection(results) {
-    CollectionActions.fetchSyncInCollectionRoots();
-  }
-
-  // 'repository' methods; returns a promise
-  static findById(collectionId) {
-    let state = this.state;
-    let roots = state.unsharedRoots.concat(state.sharedRoots).concat(state.remoteRoots).concat(state.lockedRoots);
-
-    let foundCollection = roots.filter((root) => {
-      return root.id == collectionId;
-    }).pop();
-
-    let promise;
-
-    // if not loaded already fetch collection from backend
-    if (!foundCollection) {
-      // TODO maybe move to CollectionsFetcher
-      promise = fetch('/api/v1/collections/' + collectionId, {
-        credentials: 'same-origin',
-        method: 'GET'
-      }).then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    } else {
-      promise = new Promise((resolve) => {
-        resolve({ collection: foundCollection });
-      });
-    }
-    return promise;
-  }
-  static findBySId(collectionId) {
-    let roots = this.state.syncInRoots;
-    let foundCollection = roots.filter((root) => {
-      return root.id == collectionId;
-    }).pop();
-    let promise;
-    if (!foundCollection) {
-      promise = fetch('/api/v1/syncCollections/' + collectionId, {
-        credentials: 'same-origin',
-        method: 'GET'
-      }).then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    } else {
-      promise = new Promise((resolve) => {
-        resolve({ collection: foundCollection });
-      });
-    }
-    return promise;
-  }
-
-
-  static findAllCollection() {
-    let state = this.state;
-    let roots = state.lockedRoots;
-
-    let foundCollection = roots.filter((root) => {
-      return root.label == 'All';
-    }).pop();
-
-    let promise;
-
-    // if not loaded already fetch collection from backend
-    if (!foundCollection) {
-      promise = fetch('/api/v1/collections/all/', {
-        credentials: 'same-origin',
-        method: 'GET'
-      }).then((response) => {
-        return response.json()
-      }).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    } else {
-      promise = new Promise((resolve) => {
-        resolve({ collection: foundCollection });
-      });
-    }
-    return promise;
-  }
-}
-
-export default alt.createStore(CollectionStore, 'CollectionStore');
diff --git a/app/packs/src/components/stores/ComputeTaskStore.js b/app/packs/src/components/stores/ComputeTaskStore.js
deleted file mode 100644
index 9bf10374f..000000000
--- a/app/packs/src/components/stores/ComputeTaskStore.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import alt from '../alt';
-
-import ComputeTaskActions from '../actions/ComputeTaskActions';
-
-class ComputeTaskStore {
-  constructor() {
-    this.state = {
-      tasks: [],
-    };
-
-    this.bindListeners({
-      handleFetchAll: ComputeTaskActions.fetchAll,
-      handleUpdateTask: [
-        ComputeTaskActions.checkState,
-        ComputeTaskActions.revokeTask,
-      ],
-      handleDeleteTask: ComputeTaskActions.deleteTask
-    });
-  }
-
-  handleFetchAll(tasks) {
-    this.state.tasks = tasks;
-  }
-
-  handleUpdateTask(newTask) {
-    const { tasks } = this.state;
-    this.state.tasks = tasks.map(task => (
-      task.id === newTask.id ? { ...newTask } : task
-    ));
-  }
-
-  handleDeleteTask(deletedTask) {
-    const { tasks } = this.state;
-    this.state.tasks = tasks.filter(task => task.id !== deletedTask.id);
-  }
-}
-
-export default alt.createStore(ComputeTaskStore, 'ComputeTaskStore');
diff --git a/app/packs/src/components/stores/ElementStore.js b/app/packs/src/components/stores/ElementStore.js
deleted file mode 100644
index 5975d98d4..000000000
--- a/app/packs/src/components/stores/ElementStore.js
+++ /dev/null
@@ -1,1461 +0,0 @@
-import {
-  last,
-  slice,
-  intersectionWith,
-  findIndex
-} from 'lodash';
-import Aviator from 'aviator';
-import alt from 'src/stores/alt/alt';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import CollectionActions from 'src/stores/alt/actions/CollectionActions';
-import UIActions from 'src/stores/alt/actions/UIActions';
-import UserActions from 'src/stores/alt/actions/UserActions';
-import UIStore from 'src/stores/alt/stores/UIStore';
-import ClipboardStore from 'src/stores/alt/stores/ClipboardStore';
-import Sample from 'src/models/Sample';
-import Reaction from 'src/models/Reaction';
-import Wellplate from 'src/models/Wellplate';
-import Screen from 'src/models/Screen';
-
-import Device from 'src/models/Device';
-import Container from 'src/models/Container';
-import AnalysesExperiment from 'src/models/AnalysesExperiment';
-import DeviceAnalysis from 'src/models/DeviceAnalysis';
-import DeviceSample from 'src/models/DeviceSample';
-import SamplesFetcher from 'src/fetchers/SamplesFetcher';
-import DeviceFetcher from 'src/fetchers/DeviceFetcher';
-import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
-import WellplatesFetcher from 'src/fetchers/WellplatesFetcher';
-import ScreensFetcher from 'src/fetchers/ScreensFetcher';
-import ModalImportConfirm from 'src/components/contextActions/ModalImportConfirm';
-
-import { elementShowOrNew } from 'src/utilities/routesUtils';
-
-import DetailActions from 'src/stores/alt/actions/DetailActions';
-import { SameEleTypId, UrlSilentNavigation } from 'src/utilities/ElementUtils';
-import { chmoConversions } from 'src/components/OlsComponent';
-import MatrixCheck from 'src/components/common/MatrixCheck';
-import GenericEl from 'src/models/GenericEl';
-
-import MessagesFetcher from 'src/fetchers/MessagesFetcher';
-
-import RepositoryActions from 'src/stores/alt/repo/actions/RepositoryActions';
-
-
-const fetchOls = (elementType) => {
-  switch (elementType) {
-    case 'reaction':
-      UserActions.fetchOlsRxno();
-      UserActions.fetchOlsChmo();
-      break;
-    default:
-      UserActions.fetchOlsChmo();
-      break;
-  }
-};
-
-class ElementStore {
-  constructor() {
-    const elements = {
-      samples: {
-        elements: [],
-        totalElements: 0,
-        page: null,
-        pages: null,
-        perPage: null
-      },
-      reactions: {
-        elements: [],
-        totalElements: 0,
-        page: null,
-        pages: null,
-        perPage: null
-      },
-      wellplates: {
-        elements: [],
-        totalElements: 0,
-        page: null,
-        pages: null,
-        perPage: null
-      },
-      screens: {
-        elements: [],
-        totalElements: 0,
-        page: null,
-        pages: null,
-        perPage: null
-      },
-      devices: {
-        devices: [],
-        activeAccordionDevice: 0,
-        selectedDeviceId: -1
-      },
-      research_plans: {
-        elements: [],
-        totalElements: 0,
-        page: null,
-        pages: null,
-        perPage: null
-      },
-    };
-
-    this.state = {
-      elements,
-      currentElement: null,
-      elementWarning: false,
-      moleculeSort: false,
-      // formerly from DetailStore
-      selecteds: [],
-      refreshCoefficient: [],
-      activeKey: 0,
-      deletingElement: null,
-    };
-
-    this.bindListeners({
-      handleFetchAllDevices: ElementActions.fetchAllDevices,
-      handleFetchDeviceById: ElementActions.fetchDeviceById,
-      handleCreateDevice: ElementActions.createDevice,
-      handleSaveDevice: ElementActions.saveDevice,
-      handleDeleteDevice: ElementActions.deleteDevice,
-      handleToggleDeviceType: ElementActions.toggleDeviceType,
-      handleChangeActiveAccordionDevice: ElementActions.changeActiveAccordionDevice,
-      handleChangeSelectedDeviceId: ElementActions.changeSelectedDeviceId,
-      handleSetSelectedDeviceId: ElementActions.setSelectedDeviceId,
-      handleSetRefreshCoefficient: ElementActions.setRefreshCoefficient,
-      handleAddSampleToDevice: ElementActions.addSampleToDevice,
-      handleAddSampleWithAnalysisToDevice: ElementActions.addSampleWithAnalysisToDevice,
-      handleRemoveSampleFromDevice: ElementActions.removeSampleFromDevice,
-      handleToggleTypeOfDeviceSample: ElementActions.toggleTypeOfDeviceSample,
-      handleChangeDeviceProp: ElementActions.changeDeviceProp,
-      handleFetchDeviceAnalysisById: ElementActions.fetchDeviceAnalysisById,
-      handleSaveDeviceAnalysis: ElementActions.saveDeviceAnalysis,
-      handleOpenDeviceAnalysis: ElementActions.openDeviceAnalysis,
-      handleCreateDeviceAnalysis: ElementActions.createDeviceAnalysis,
-      handleChangeAnalysisExperimentProp: ElementActions.changeAnalysisExperimentProp,
-      handleDeleteAnalysisExperiment: ElementActions.deleteAnalysisExperiment,
-      handleDuplicateAnalysisExperiment: ElementActions.duplicateAnalysisExperiment,
-
-      handleFetchBasedOnSearchSelection: ElementActions.fetchBasedOnSearchSelectionAndCollection,
-
-      handleFetchGenericElsByCollectionId: ElementActions.fetchGenericElsByCollectionId,
-      handleFetchGenericElById: ElementActions.fetchGenericElById,
-      handleCreateGenericEl: ElementActions.createGenericEl,
-
-      handleFetchSamplesByCollectionId: ElementActions.fetchSamplesByCollectionId,
-      handleFetchReactionsByCollectionId: ElementActions.fetchReactionsByCollectionId,
-      handleFetchWellplatesByCollectionId: ElementActions.fetchWellplatesByCollectionId,
-      handleFetchScreensByCollectionId: ElementActions.fetchScreensByCollectionId,
-      handlefetchResearchPlansByCollectionId: ElementActions.fetchResearchPlansByCollectionId,
-
-      handleFetchSampleById: ElementActions.fetchSampleById,
-      handleCreateSample: ElementActions.createSample,
-      handleCreateSampleForReaction: ElementActions.createSampleForReaction,
-      handleEditReactionSample: ElementActions.editReactionSample,
-      handleEditWellplateSample: ElementActions.editWellplateSample,
-      handleUpdateSampleForReaction: ElementActions.updateSampleForReaction,
-      handleUpdateSampleForWellplate: ElementActions.updateSampleForWellplate,
-      handleCopySampleFromClipboard: ElementActions.copySampleFromClipboard,
-      handleAddSampleToMaterialGroup: ElementActions.addSampleToMaterialGroup,
-      handleShowReactionMaterial: ElementActions.showReactionMaterial,
-      handleImportSamplesFromFile: ElementActions.importSamplesFromFile,
-      handleImportSamplesFromFileConfirm: ElementActions.importSamplesFromFileConfirm,
-
-      handleSetCurrentElement: ElementActions.setCurrentElement,
-      handleDeselectCurrentElement: ElementActions.deselectCurrentElement,
-      handleChangeSorting: ElementActions.changeSorting,
-      handleChangeElementsFilter: ElementActions.changeElementsFilter,
-
-      handleFetchReactionById: ElementActions.fetchReactionById,
-      handleTryFetchById: [
-        ElementActions.tryFetchReactionById,
-        ElementActions.tryFetchWellplateById,
-        ElementActions.tryFetchGenericElById
-      ],
-      handleCloseWarning: ElementActions.closeWarning,
-      handleCreateReaction: ElementActions.createReaction,
-      handleCopyReactionFromId: ElementActions.copyReactionFromId,
-      handleCopyReaction: ElementActions.copyReaction,
-      handleCopyElement: ElementActions.copyElement,
-      handleOpenReactionDetails: ElementActions.openReactionDetails,
-
-      handleBulkCreateWellplatesFromSamples:
-        ElementActions.bulkCreateWellplatesFromSamples,
-      handleFetchWellplateById: ElementActions.fetchWellplateById,
-      handleImportWellplateSpreadsheet: ElementActions.importWellplateSpreadsheet,
-      handleCreateWellplate: ElementActions.createWellplate,
-      handleGenerateWellplateFromClipboard:
-        ElementActions.generateWellplateFromClipboard,
-      handleGenerateScreenFromClipboard:
-        ElementActions.generateScreenFromClipboard,
-
-      handleAddResearchPlanToScreen: ElementActions.addResearchPlanToScreen,
-      handleFetchScreenById: ElementActions.fetchScreenById,
-      handleCreateScreen: ElementActions.createScreen,
-
-      handlefetchResearchPlanById: ElementActions.fetchResearchPlanById,
-      handleCreateResearchPlan: ElementActions.createResearchPlan,
-      handleImportWellplateIntoResearchPlan: ElementActions.importWellplateIntoResearchPlan,
-      handleImportTableFromSpreadsheet: ElementActions.importTableFromSpreadsheet,
-
-      handleCreatePrivateNote: ElementActions.createPrivateNote,
-      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
-
-      handleCreatePrivateNote: ElementActions.createPrivateNote,
-      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
-
-      // FIXME ElementStore listens to UIActions?
-      handleUnselectCurrentElement: UIActions.deselectAllElements,
-      handleSetPagination: UIActions.setPagination,
-
-      handleRefreshElements: ElementActions.refreshElements,
-      handleGenerateEmptyElement:
-        [
-          ElementActions.generateEmptyGenericEl,
-          ElementActions.generateEmptyWellplate,
-          ElementActions.generateEmptyScreen,
-          ElementActions.generateEmptyResearchPlan,
-          ElementActions.generateEmptySample,
-          ElementActions.generateEmptyReaction,
-          ElementActions.showReportContainer,
-          ElementActions.showFormatContainer,
-          ElementActions.showComputedPropsGraph,
-          ElementActions.showComputedPropsTasks,
-          ElementActions.showDeviceControl,
-          ElementActions.showLiteratureDetail,
-          ElementActions.showPredictionContainer,
-        ],
-      handleFetchMoleculeByMolfile: ElementActions.fetchMoleculeByMolfile,
-      handleFetchMetadata: ElementActions.fetchMetadata,
-      handleDeleteElements: ElementActions.deleteElements,
-
-      handleUpdateElementsCollection: ElementActions.updateElementsCollection,
-      handleAssignElementsCollection: ElementActions.assignElementsCollection,
-      handleRemoveElementsCollection: ElementActions.removeElementsCollection,
-      handleSplitAsSubsamples: ElementActions.splitAsSubsamples,
-      handleSplitAsSubwellplates: ElementActions.splitAsSubwellplates,
-      // formerly from DetailStore
-      handleSelect: DetailActions.select,
-      handleClose: DetailActions.close,
-      handleDeletingElements: ElementActions.deleteElementsByUIState,
-      handleConfirmDelete: DetailActions.confirmDelete,
-      handleChangeCurrentElement: DetailActions.changeCurrentElement,
-      handleGetMoleculeCas: DetailActions.getMoleculeCas,
-      handleUpdateMoleculeNames: DetailActions.updateMoleculeNames,
-      handleUpdateMoleculeCas: DetailActions.updateMoleculeCas,
-      handleUpdateLinkedElement: [
-        ElementActions.updateReaction,
-        ElementActions.updateSample,
-        RepositoryActions.publishSample,
-        RepositoryActions.publishReaction,
-        RepositoryActions.publishSampleReserveDois,
-        RepositoryActions.publishReactionReserveDois,
-        RepositoryActions.reviewPublish,
-      ],
-      handleRefreshSyncCollections: [
-        RepositoryActions.reviewPublish,
-        RepositoryActions.publishSample,
-        RepositoryActions.publishReaction,
-      ],
-      handleUpdateElement: [
-        // ElementActions.updateReaction,
-        // ElementActions.updateSample,
-        ElementActions.updateWellplate,
-        ElementActions.updateScreen,
-        ElementActions.updateResearchPlan,
-        ElementActions.updateGenericEl,
-      ],
-      handleUpdateEmbeddedResearchPlan: ElementActions.updateEmbeddedResearchPlan,
-      handleRefreshComputedProp: ElementActions.refreshComputedProp,
-    });
-  }
-
-  handleFetchAllDevices(devices) {
-    this.state.elements['devices'].devices = devices
-  }
-
-  handleFetchDeviceById(device) {
-    this.state.currentElement = device
-  }
-
-  findDeviceIndexById(deviceId) {
-    const { devices } = this.state.elements['devices']
-    return devices.findIndex((e) => e.id === deviceId)
-  }
-
-  handleSaveDevice(device) {
-    const { devices } = this.state.elements['devices']
-    const deviceKey = devices.findIndex((e) => e._checksum === device._checksum)
-    if (deviceKey === -1) {
-      this.state.elements['devices'].devices.push(device)
-    } else {
-      this.state.elements['devices'].devices[deviceKey] = device
-    }
-  }
-
-  handleToggleDeviceType({ device, type }) {
-    if (device.types.includes(type)) {
-      device.types = device.types.filter((e) => e !== type)
-    } else {
-      device.types.push(type)
-    }
-    const deviceKey = this.findDeviceIndexById(device.id)
-    this.state.elements['devices'].devices[deviceKey] = device
-  }
-
-  handleCreateDevice() {
-    const { devices } = this.state.elements['devices']
-    const newDevice = Device.buildEmpty()
-    const newKey = devices.length
-    this.state.elements['devices'].activeAccordionDevice = newKey
-    this.state.elements['devices'].devices.push(newDevice)
-  }
-
-  handleDeleteDevice(device) {
-    const { devices, activeAccordionDevice } = this.state.elements['devices']
-    this.state.elements['devices'].devices = devices.filter((e) => e.id !== device.id)
-  }
-
-  handleAddSampleToDevice({ sample, device, options = { save: false } }) {
-    const deviceSample = DeviceSample.buildEmpty(device.id, sample)
-    device.samples.push(deviceSample)
-    if (options.save) {
-      ElementActions.saveDevice(device)
-      ElementActions.fetchDeviceById.defer(device.id)
-    }
-  }
-
-  handleAddSampleWithAnalysisToDevice({ sample, analysis, device }) {
-    // Note: #735
-    // this handleAddSampleWithAnalysisToDevice is unused so far but we still update '1H NMR' to the new type from OLS-chmo
-    // and 'NMR'(type) of DeviceSample as well
-    const kind = (analysis.kind || '').split('|')[0].trim();
-    switch (kind) {
-      case chmoConversions.nmr_1h.termId:
-        // add sample to device
-        const deviceSample = DeviceSample.buildEmpty(device.id, { id: sample.id, short_label: sample.short_label })
-        deviceSample.types = [chmoConversions.nmr_1h.value]
-        device.samples.push(deviceSample)
-        DeviceFetcher.update(device)
-          .then(device => {
-            const savedDeviceSample = last(device.samples)
-            // add sampleAnalysis to experiments
-            let deviceAnalysis = device.devicesAnalyses.find(a => a.analysisType === chmoConversions.nmr_1h.value)
-            if (!deviceAnalysis) {
-              deviceAnalysis = DeviceAnalysis.buildEmpty(device.id, chmoConversions.nmr_1h.value)
-            }
-            const newExperiment = AnalysesExperiment.buildEmpty(sample.id, sample.short_label, analysis.id, savedDeviceSample.id)
-            deviceAnalysis.experiments.push(newExperiment)
-            ElementActions.saveDeviceAnalysis.defer(deviceAnalysis)
-          })
-        break
-    }
-  }
-
-  handleToggleTypeOfDeviceSample({ device, sample, type }) {
-    const sampleKey = device.samples.findIndex(s => s.id === sample.id)
-    if (sample.types.includes(type)) {
-      sample.types = sample.types.filter(t => t !== type)
-    } else {
-      sample.types.push(type)
-    }
-    device.samples[sampleKey] = sample
-  }
-
-  handleOpenDeviceAnalysis({ device, type }) {
-    switch (type) {
-      case "NMR":
-        const { currentCollection, isSync } = UIStore.getState();
-        const deviceAnalysis = device.devicesAnalyses.find((a) => a.analysisType === "NMR")
-
-        // update Device in case of sample was added by dnd and device was not saved
-        device.updateChecksum()
-        ElementActions.saveDevice(device)
-
-        if (deviceAnalysis) {
-          Aviator.navigate(isSync
-            ? `/scollection/${currentCollection.id}/devicesAnalysis/${deviceAnalysis.id}`
-            : `/collection/${currentCollection.id}/devicesAnalysis/${deviceAnalysis.id}`
-          )
-        } else {
-          Aviator.navigate(isSync
-            ? `/scollection/${currentCollection.id}/devicesAnalysis/new/${device.id}/${type}`
-            : `/collection/${currentCollection.id}/devicesAnalysis/new/${device.id}/${type}`
-          )
-        }
-        break
-    }
-  }
-
-  handleRemoveSampleFromDevice({ sample, device }) {
-    device.samples = device.samples.filter((e) => e.id !== sample.id)
-    const deviceKey = this.findDeviceIndexById(device.id)
-    this.state.elements['devices'].devices[deviceKey] = device
-  }
-
-  handleChangeDeviceProp({ device, prop, value }) {
-    device[prop] = value
-    const deviceKey = this.findDeviceIndexById(device.id)
-    this.state.elements['devices'].devices[deviceKey] = device
-  }
-
-  handleChangeActiveAccordionDevice(key) {
-    this.state.elements['devices'].activeAccordionDevice = key
-  }
-
-  handleChangeSelectedDeviceId(deviceId) {
-    this.state.elements['devices'].selectedDeviceId = deviceId
-  }
-
-  handleSetSelectedDeviceId(deviceId) {
-    this.state.elements['devices'].selectedDeviceId = deviceId
-  }
-
-  handleSetRefreshCoefficient(obj) {
-    this.setState({ refreshCoefficient: [obj] });
-  }
-
-  //TODO move these in Element Action ??
-  createSampleAnalysis(sampleId, type) {
-    return new Promise((resolve, reject) => {
-      SamplesFetcher.fetchById(sampleId)
-        .then(sample => {
-          let analysis = Container.buildAnalysis(chmoConversions.others.value);
-          switch (type) {
-            case chmoConversions.nmr_1h.termId:
-              analysis = Container.buildAnalysis(chmoConversions.nmr_1h.value)
-              break
-          }
-          sample.addAnalysis(analysis)
-          SamplesFetcher.update(sample)
-          resolve(analysis)
-        })
-    })
-  }
-
-  createAnalysisExperiment(deviceSample, deviceAnalysis) {
-    return new Promise((resolve, reject) => {
-      this.createSampleAnalysis(deviceSample.sampleId, deviceAnalysis.analysisType)
-        .then(sampleAnalysis => {
-          const experiment = AnalysesExperiment.buildEmpty(
-            deviceSample.sampleId,
-            deviceSample.shortLabel,
-            sampleAnalysis.id,
-            deviceSample.id
-          )
-          resolve(experiment)
-        })
-    })
-  }
-
-  handleCreateDeviceAnalysis({ device, analysisType }) {
-    const analysis = DeviceAnalysis.buildEmpty(device.id, analysisType)
-    const samplesOfAnalysisType = device.samples.filter(s => s.types.includes(analysisType))
-    const promises = samplesOfAnalysisType.map(s => this.createAnalysisExperiment(s, analysis))
-    Promise.all(promises)
-      .then(experiments => {
-        experiments.map(experiment => analysis.experiments.push(experiment))
-        ElementActions.saveDeviceAnalysis(analysis)
-      })
-  }
-
-  handleFetchDeviceAnalysisById({ analysis, device }) {
-    const { experiments } = analysis
-    const samplesOfAnalysisType = device.samples.filter(s => s.types.includes(analysis.analysisType))
-    const samplesWithoutOld = slice(samplesOfAnalysisType, experiments.length)
-    const promises = samplesWithoutOld.map(s => this.createAnalysisExperiment(s, analysis))
-    Promise.all(promises)
-      .then(experiments => {
-        experiments.map(experiment => analysis.experiments.push(experiment))
-        ElementActions.saveDeviceAnalysis(analysis)
-      })
-  }
-
-  handleSaveDeviceAnalysis(analysis) {
-    const { currentCollection, isSync } = UIStore.getState();
-    this.state.currentElement = analysis
-
-    Aviator.navigate(isSync
-      ? `/scollection/${currentCollection.id}/devicesAnalysis/${analysis.id}`
-      : `/collection/${currentCollection.id}/devicesAnalysis/${analysis.id}`
-    )
-  }
-
-  handleChangeAnalysisExperimentProp({ analysis, experiment, prop, value }) {
-    const experimentKey = analysis.experiments.findIndex((e) => e.id === experiment.id)
-    analysis.experiments[experimentKey][prop] = value
-    this.state.currentElement = analysis
-  }
-
-  handleDeleteAnalysisExperiment({ device, analysis, experiment }) {
-    const sample = device.samples.find(s => s.id === experiment.deviceSampleId)
-    const sampleKey = device.samples.findIndex(s => s.id === experiment.deviceSampleId)
-    device.samples[sampleKey].types = sample.types.filter(t => t !== analysis.analysisType)
-    ElementActions.saveDevice(device)
-    ElementActions.fetchDeviceAnalysisById.defer(analysis.id)
-  }
-
-  handleDuplicateAnalysisExperiment({ device, analysis, experiment }) {
-    const sample = device.samples.find(s => s.id === experiment.deviceSampleId)
-    const newSample = DeviceSample.buildEmpty(analysis.deviceId, { id: sample.sampleId, short_label: sample.shortLabel })
-    newSample.types = [analysis.analysisType]
-    device.samples.push(newSample)
-    ElementActions.saveDevice(device)
-    ElementActions.fetchDeviceAnalysisById.defer(analysis.id)
-  }
-
-  // SEARCH
-
-  handleFetchBasedOnSearchSelection(result) {
-    Object.keys(result).forEach((key) => {
-      this.state.elements[key] = result[key];
-    });
-  }
-
-  handlefetchBasedOnStructureAndCollection(result) {
-    Object.keys(result).forEach((key) => {
-      this.state.elements[key] = result[key];
-    });
-  }
-
-  // -- Elements --
-  handleDeleteElements(options) {
-    this.waitFor(UIStore.dispatchToken);
-    const ui_state = UIStore.getState();
-    const { sample, reaction, wellplate, screen, research_plan, currentCollection } = ui_state;
-    const selecteds = this.state.selecteds.map(s => ({ id: s.id, type: s.type }));
-    const params = {
-      options,
-      sample,
-      reaction,
-      wellplate,
-      screen,
-      research_plan,
-      currentCollection,
-      selecteds
-    };
-
-    const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-    if (MatrixCheck(currentUser.matrix, 'genericElement')) {
-      const { klasses } = UIStore.getState();
-
-      // eslint-disable-next-line no-unused-expressions
-      klasses && klasses.forEach((klass) => {
-        params[`${klass}`] = ui_state[`${klass}`];
-      });
-    }
-
-    ElementActions.deleteElementsByUIState(params);
-  }
-
-  handleUpdateElementsCollection() {
-    CollectionActions.fetchUnsharedCollectionRoots();
-    UIActions.uncheckWholeSelection.defer();
-    this.fetchElementsByCollectionIdandLayout();
-  }
-
-  handleAssignElementsCollection() {
-    CollectionActions.fetchUnsharedCollectionRoots();
-    UIActions.uncheckWholeSelection.defer();
-    this.fetchElementsByCollectionIdandLayout();
-  }
-
-  handleRemoveElementsCollection() {
-    // CollectionActions.fetchUnsharedCollectionRoots();
-    // UIActions.clearSearchSelection.defer()
-    UIActions.uncheckWholeSelection.defer();
-    this.waitFor(UIStore.dispatchToken)
-
-    this.fetchElementsByCollectionIdandLayout();
-  }
-
-  fetchElementsByCollectionIdandLayout() {
-    const { currentSearchSelection, currentCollection } = UIStore.getState();
-    const isSync = !!(currentCollection && currentCollection.is_sync_to_me);
-    if (currentSearchSelection != null) {
-      const { currentType } = UserStore.getState();
-      this.handleRefreshElements(currentType);
-    } else {
-      const { profile } = UserStore.getState();
-      if (profile && profile.data && profile.data.layout) {
-        const { layout } = profile.data;
-        if (layout.sample && layout.sample > 0) { this.handleRefreshElements('sample'); }
-        if (layout.reaction && layout.reaction > 0) { this.handleRefreshElements('reaction'); }
-        if (layout.wellplate && layout.wellplate > 0) { this.handleRefreshElements('wellplate'); }
-        if (layout.screen && layout.screen > 0) { this.handleRefreshElements('screen'); }
-        if (!isSync && layout.research_plan && layout.research_plan > 0) { this.handleRefreshElements('research_plan'); }
-
-
-        const { currentUser, genericEls } = UserStore.getState();
-        if (MatrixCheck(currentUser.matrix, 'genericElement')) {
-          // eslint-disable-next-line no-unused-expressions
-          const genericNames = (genericEls.map(el => el.name)) || [];
-          genericNames.forEach((klass) => {
-            if (layout[`${klass}`] && layout[`${klass}`] > 0) { this.handleRefreshElements(klass); }
-          });
-        }
-      }
-    }
-  }
-
-  handleFetchGenericElsByCollectionId(result) {
-    //const klassName = result.element_klass && result.element_klass.name;
-    let type = result.type;
-    if (typeof type === 'undefined' || type == null) {
-      type = (result.result.elements && result.result.elements.length > 0 && result.result.elements[0].type) || result.result.type;
-    }
-    this.state.elements[`${type}s`] = result.result;
-  }
-
-  handleFetchGenericElById(result) {
-    this.changeCurrentElement(result);
-  }
-
-  handleCreateGenericEl(genericEl) {
-    UserActions.fetchCurrentUser();
-    this.handleRefreshElements((genericEl.element_klass && genericEl.element_klass.name) || 'genericEl');
-    //this.handleRefreshElements('genericEl');
-    this.navigateToNewElement(genericEl, 'GenericEl');
-  }
-
-  handleFetchSamplesByCollectionId(result) {
-    this.state.elements.samples = result;
-  }
-
-  handleFetchReactionsByCollectionId(result) {
-    this.state.elements.reactions = result;
-  }
-
-  handleFetchWellplatesByCollectionId(result) {
-    this.state.elements.wellplates = result;
-  }
-
-  handleFetchScreensByCollectionId(result) {
-    this.state.elements.screens = result;
-  }
-
-  handlefetchResearchPlansByCollectionId(result) {
-    this.state.elements.research_plans = result;
-  }
-
-  // -- Samples --
-
-  handleFetchSampleById(result) {
-    if (!this.state.currentElement || this.state.currentElement._checksum != result._checksum) {
-      this.changeCurrentElement(result);
-    }
-  }
-
-  handleCreateSample({ element, closeView }) {
-    UserActions.fetchCurrentUser();
-    fetchOls('sample');
-    this.handleRefreshElements('sample');
-    if (!closeView) {
-      this.navigateToNewElement(element);
-    }
-  }
-
-  handleCreateSampleForReaction({ newSample, reaction, materialGroup }) {
-    UserActions.fetchCurrentUser();
-    reaction.addMaterial(newSample, materialGroup);
-    this.handleRefreshElements('sample');
-    ElementActions.handleSvgReactionChange(reaction);
-    this.changeCurrentElement(reaction);
-  }
-
-  handleEditReactionSample(result) {
-    const sample = result.sample;
-    sample.belongTo = result.reaction;
-    this.changeCurrentElement(sample);
-  }
-
-  handleEditWellplateSample(result) {
-    const sample = result.sample;
-    sample.belongTo = result.wellplate;
-    this.changeCurrentElement(sample);
-  }
-
-  handleUpdateSampleForReaction({ reaction, sample, closeView }) {
-    // UserActions.fetchCurrentUser();
-    ElementActions.handleSvgReactionChange(reaction);
-    if (closeView) {
-      this.changeCurrentElement(reaction);
-    } else {
-      this.changeCurrentElement(sample);
-    }
-
-    // TODO: check if this is needed with the new handling of changing CE
-    // maybe this.handleRefreshElements is enough
-    this.handleUpdateElement(sample);
-  }
-
-  handleUpdateLinkedElement({ element, closeView }) {
-    if (closeView) {
-      this.deleteCurrentElement(element);
-    } else {
-      this.changeCurrentElement(element);
-    }
-    this.handleUpdateElement(element);
-  }
-
-  handleRefreshSyncCollections() {
-    CollectionActions.fetchSyncInCollectionRoots();
-  }
-
-  handleUpdateSampleForWellplate(wellplate) {
-    // UserActions.fetchCurrentUser()
-    this.state.currentElement = null;
-    this.handleRefreshElements('sample');
-
-    const wellplateID = wellplate.id;
-    ElementActions.fetchWellplateById(wellplateID);
-  }
-
-  handleSplitAsSubsamples(ui_state) {
-    ElementActions.fetchSamplesByCollectionId(
-      ui_state.currentCollection.id, {},
-      ui_state.isSync, this.state.moleculeSort
-    );
-  }
-
-  handleSplitAsSubwellplates(ui_state) {
-    ElementActions.fetchWellplatesByCollectionId(ui_state.currentCollection.id);
-    ElementActions.fetchSamplesByCollectionId(
-      ui_state.currentCollection.id, {},
-      ui_state.isSync, this.state.moleculeSort
-    );
-  }
-
-  // Molecules
-  handleFetchMoleculeByMolfile(result) {
-    // Attention: This is intended to update SampleDetails
-    this.state.currentElement.molecule = result;
-    // this.state.currentElement.molfile = result.molfile;
-    this.state.currentElement.molecule_id = result.id;
-    this.handleRefreshElements('sample');
-  }
-
-  // Samples with residues
-  handleFetchResidueByMolfile(result) {
-    // Attention: This is intended to update SampleDetails
-    //this.state.currentElement.molecule = result;
-    this.state.currentElement.sample = result;
-    this.handleRefreshElements('sample');
-  }
-
-  handleCopySampleFromClipboard(collection_id) {
-    const clipboardSamples = ClipboardStore.getState().samples;
-    if (clipboardSamples && clipboardSamples.length > 0) {
-      this.changeCurrentElement(Sample.copyFromSampleAndCollectionId(clipboardSamples[0], collection_id, true));
-    }
-  }
-
-  /**
-   * @param {Object} params = { reaction, materialGroup }
-   */
-  handleAddSampleToMaterialGroup(params) {
-    const { materialGroup } = params
-    let { reaction } = params
-
-    let sample = Sample.buildEmpty(reaction.collection_id)
-    sample.molfile = sample.molfile || ''
-    sample.molecule = sample.molecule == undefined ? sample : sample.molecule
-    sample.sample_svg_file = sample.sample_svg_file
-    sample.belongTo = reaction;
-    sample.matGroup = materialGroup;
-    reaction.changed = true;
-    this.changeCurrentElement(sample);
-  }
-
-  handleShowReactionMaterial(params) {
-    const { reaction, sample, coefficient } = params;
-    const { selecteds } = this.state;
-    sample.belongTo = reaction;
-    const obj = {
-      sId: sample.id,
-      rId: reaction.id,
-      coefficient
-    };
-    this.setState((prevState) => {
-      const updatedCoefficient = [...prevState.refreshCoefficient];
-      let found = false;
-      selecteds.forEach((element) => {
-        if (element.type === 'reaction' && element.id === obj.rid) {
-          found = true;
-        }
-      });
-      if (!found) {
-        updatedCoefficient.push(obj);
-      }
-      return { refreshCoefficient: updatedCoefficient };
-    });
-    this.changeCurrentElement(sample);
-  }
-
-  handleImportSamplesFromFile(data) {
-    if (data.sdf) {
-      UIActions.updateModalProps.defer({
-        show: true,
-        component: ModalImportConfirm,
-        title: "Sample Import Confirmation",
-        action: null,
-        listSharedCollections: false,
-        customModal: "custom-modal",
-        data: data.data,
-        //raw_data: data.raw_data,
-        custom_data_keys: data.custom_data_keys,
-        mapped_keys: data.mapped_keys,
-        collection_id: data.collection_id,
-      })
-    } else {
-      this.handleRefreshElements('sample');
-    }
-
-    this.handleRefreshElements('sample');
-  }
-
-  handleImportSamplesFromFileConfirm(data) {
-    if (data.sdf) {
-      this.handleRefreshElements('sample');
-    }
-  }
-
-  // -- Wellplates --
-
-  handleBulkCreateWellplatesFromSamples() {
-    this.handleRefreshElements('wellplate');
-    this.handleRefreshElements('sample');
-  }
-
-  handleFetchWellplateById(result) {
-    this.changeCurrentElement(result);
-    // this.state.currentElement = result;
-    // this.navigateToNewElement(result)
-  }
-
-  handleImportWellplateSpreadsheet(result) {
-    if (result.error) { return; }
-
-    const { selecteds } = this.state;
-
-    const index = this.elementIndex(selecteds, result);
-    const newSelecteds = this.updateElement(result, index);
-    this.setState({ selecteds: newSelecteds });
-  }
-
-  handleCreateWellplate(wellplate) {
-    fetchOls('wellplate');
-    this.handleRefreshElements('wellplate');
-    this.navigateToNewElement(wellplate);
-  }
-
-  handleGenerateWellplateFromClipboard(collection_id) {
-    let clipboardSamples = ClipboardStore.getState().samples;
-
-    this.changeCurrentElement(Wellplate.buildFromSamplesAndCollectionId(clipboardSamples, collection_id));
-    //this.state.currentElement = Wellplate.buildFromSamplesAndCollectionId(clipboardSamples, collection_id);
-  }
-  // -- Screens --
-
-  handleAddResearchPlanToScreen(screen) {
-    fetchOls('screen');
-    this.handleRefreshElements('screen');
-    this.navigateToNewElement(screen);
-  }
-
-  handleFetchScreenById(result) {
-    if (!this.state.currentElement || this.state.currentElement._checksum != result._checksum) {
-      this.changeCurrentElement(result);
-      //this.state.currentElement = result;
-    }
-  }
-
-  handleCreateScreen(screen) {
-    fetchOls('screen');
-    this.handleRefreshElements('screen');
-    this.navigateToNewElement(screen);
-  }
-
-  handleGenerateScreenFromClipboard(collection_id) {
-    let clipboardWellplates = ClipboardStore.getState().wellplates;
-    this.changeCurrentElement(Screen.buildFromWellplatesAndCollectionId(clipboardWellplates, collection_id));
-  }
-
-  // -- ResearchPlans --
-
-  handlefetchResearchPlanById(result) {
-    this.changeCurrentElement(result);
-    //this.state.currentElement = result;
-  }
-
-  handleCreateResearchPlan(research_plan) {
-    this.handleRefreshElements('research_plan');
-    this.navigateToNewElement(research_plan);
-  }
-
-  handleImportWellplateIntoResearchPlan(result) {
-    if (result.error) { return; }
-
-    const { selecteds } = this.state;
-
-    const index = this.elementIndex(selecteds, result);
-    const newSelecteds = this.updateElement(result, index);
-    this.setState({ selecteds: newSelecteds });
-  }
-
-  handleImportTableFromSpreadsheet(result) {
-    if (result.error) { return; }
-
-    const { selecteds } = this.state;
-
-    const index = this.elementIndex(selecteds, result);
-    const newSelecteds = this.updateElement(result, index);
-    this.setState({ selecteds: newSelecteds });
-  }
-
-  // -- Reactions --
-
-  handleFetchReactionById(result) {
-    if (!this.state.currentElement || (this.state.currentElement && this.state.currentElement._checksum) != result._checksum) {
-      this.changeCurrentElement(result);
-      this.state.elements.reactions.elements = this.refreshReactionsListForSpecificReaction(result);
-      //  this.navigateToNewElement(result);
-    }
-  }
-
-  refreshReactionsListForSpecificReaction(newReaction) {
-    return this.state.elements.reactions.elements.map(reaction => {
-      return reaction.id === newReaction.id
-        ? newReaction
-        : reaction
-    });
-  }
-
-  handleTryFetchById(result) {
-    if (result.hasOwnProperty("error")) {
-      this.state.elementWarning = true
-    } else {
-      this.changeCurrentElement(result);
-      // this.state.currentElement = result
-      this.navigateToNewElement(result)
-    }
-  }
-
-  handleCloseWarning() {
-    this.state.elementWarning = false
-  }
-
-
-  handleCreateReaction(reaction) {
-    UserActions.fetchCurrentUser();
-    fetchOls('reaction');
-    this.handleRefreshElements('reaction');
-    this.navigateToNewElement(reaction);
-  }
-
-  handleCopyReactionFromId(reaction) {
-    this.waitFor(UIStore.dispatchToken);
-    const uiState = UIStore.getState();
-    this.changeCurrentElement(Reaction.copyFromReactionAndCollectionId(reaction, uiState.currentCollection.id));
-  }
-
-  handleCopyReaction(result) {
-    this.changeCurrentElement(Reaction.copyFromReactionAndCollectionId(result.reaction, result.colId));
-    Aviator.navigate(`/collection/${result.colId}/reaction/copy`);
-  }
-
-  handleCopyElement(result) {
-    this.changeCurrentElement(GenericEl.copyFromCollectionId(result.element, result.colId));
-    Aviator.navigate(`/collection/${result.colId}/${result.element.type}/copy`);
-  }
-
-  handleOpenReactionDetails(reaction) {
-    this.changeCurrentElement(reaction);
-    this.handleRefreshElements('sample')
-  }
-
-  // -- Reactions Literatures --
-
-  handleCreateReactionLiterature(result) {
-    this.state.currentElement.literatures.push(result);
-  }
-
-  handleDeleteReactionLiterature(reactionId) {
-    ElementActions.fetchLiteraturesByReactionId(reactionId);
-    this.handleRefreshElements('reaction');
-  }
-
-  handleFetchLiteraturesByReactionId(result) {
-    this.state.currentElement.literatures = result.literatures;
-  }
-
-  // -- Generic --
-
-  navigateToNewElement(element = {}, klassType = '') {
-    this.waitFor(UIStore.dispatchToken);
-    const { type, id } = element;
-    const { uri, namedParams } = Aviator.getCurrentRequest();
-    const uriArray = uri.split(/\//);
-    if (!type) {
-      Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}`, { silent: true });
-      return null;
-    }
-    namedParams[`${type}ID`] = id;
-    Aviator.navigate(`/${uriArray[1]}/${uriArray[2]}/${type}/${id}`, { silent: true });
-    elementShowOrNew({ type, klassType, params: namedParams });
-    return null;
-  }
-
-  handleGenerateEmptyElement(element) {
-    const { currentElement } = this.state;
-
-    const newElementOfSameTypeIsPresent =
-      currentElement && currentElement.isNew && currentElement.type ==
-      element.type;
-    if (!newElementOfSameTypeIsPresent) {
-      this.changeCurrentElement(element);
-    }
-  }
-
-  handleUnselectCurrentElement() {
-    this.state.currentElement = null;
-  }
-
-  handleSetPagination(pagination) {
-    this.waitFor(UIStore.dispatchToken);
-    this.handleRefreshElements(pagination.type);
-  }
-
-  handleRefreshElements(type) {
-    this.waitFor(UIStore.dispatchToken);
-    const uiState = UIStore.getState();
-    if (!uiState.currentCollection || !uiState.currentCollection.id) return;
-    if (typeof uiState[type] === 'undefined') return;
-
-    const { page } = uiState[type];
-    const { moleculeSort } = this.state;
-    if (this.state.elements[`${type}s`]) {
-      this.state.elements[`${type}s`].page = page;
-    }
-
-    // TODO if page changed -> fetch
-    // if there is a currentSearchSelection
-    //    we have to execute the respective action
-    const { currentSearchSelection } = uiState;
-
-    if (currentSearchSelection != null) {
-      currentSearchSelection.page_size = uiState.number_of_results;
-      ElementActions.fetchBasedOnSearchSelectionAndCollection.defer({
-        selection: currentSearchSelection,
-        collectionId: uiState.currentCollection.id,
-        page,
-        isSync: uiState.isSync,
-        moleculeSort
-      });
-    } else {
-      const per_page = uiState.number_of_results;
-      const { fromDate, toDate, productOnly } = uiState;
-      const params = { page, per_page, fromDate, toDate, productOnly, name: type };
-      const fnName = type.split('_').map(x => x[0].toUpperCase() + x.slice(1)).join("") + 's';
-      let fn = `fetch${fnName}ByCollectionId`;
-      const allowedActions = [
-        'fetchSamplesByCollectionId',
-        'fetchReactionsByCollectionId',
-        'fetchWellplatesByCollectionId',
-        'fetchScreensByCollectionId',
-        'fetchResearchPlansByCollectionId'
-      ];
-      if (allowedActions.includes(fn)) {
-        ElementActions[fn](uiState.currentCollection.id, params, uiState.isSync, moleculeSort);
-      } else {
-        ElementActions.fetchGenericElsByCollectionId(uiState.currentCollection.id, params, uiState.isSync, type);
-        ElementActions.fetchSamplesByCollectionId(uiState.currentCollection.id, params, uiState.isSync, moleculeSort);
-      }
-    }
-
-    MessagesFetcher.fetchSpectraMessages(0).then((result) => {
-      result.messages.sort((a, b) => (a.id - b.id));
-      const messages = result.messages;
-      if (messages && messages.length > 0) {
-        const lastMsg = messages[0]
-        this.setState({ spectraMsg: lastMsg })
-      }
-    })
-  }
-
-
-  // CurrentElement
-  handleSetCurrentElement(result) {
-    this.changeCurrentElement(result);
-  }
-
-  handleDeselectCurrentElement() {
-    this.changeCurrentElement(null);
-  }
-
-  handleChangeSorting(sort) {
-    this.state.moleculeSort = sort;
-    this.waitFor(UIStore.dispatchToken);
-    this.handleRefreshElements('sample');
-  }
-
-  handleChangeElementsFilter(filter) {
-    const userState = UserStore.getState();
-    if (!userState.profile.filters) {
-      userState.profile.data.filters = {};
-    }
-    userState.profile.data.filters[filter.name] = {
-      sort: filter.sort,
-      group: filter.group,
-      direction: filter.direction,
-    };
-
-    this.handleRefreshElements(filter.name);
-  }
-
-  // //////////////////////
-  // formerly DetailStore
-  // TODO: clean this section
-  handleSelect(index) {
-    this.resetCurrentElement(index, this.state.selecteds);
-  }
-
-  handleClose({ deleteEl, force }) {
-    // Currently ignore report "isPendingToSave"
-    const deletableTyps = ['report', 'prediction'];
-    const isDeletableTyps = deletableTyps.indexOf(deleteEl.type) >= 0;
-    if (force || isDeletableTyps || this.isDeletable(deleteEl)) {
-      this.deleteCurrentElement(deleteEl);
-    } else {
-      this.setState({ deletingElement: deleteEl });
-    }
-  }
-
-  handleConfirmDelete(confirm) {
-    const deleteEl = this.state.deletingElement
-    if (confirm) {
-      this.deleteCurrentElement(deleteEl)
-    }
-    this.setState({ deletingElement: null })
-  }
-
-  handleChangeCurrentElement({ oriEl, nextEl }) {
-    const { selecteds } = this.state;
-    const index = this.elementIndex(selecteds, nextEl);
-    this.synchronizeElements(oriEl);
-
-    if (index === -1) {
-      this.state.activeKey = selecteds.length;
-      this.state.selecteds = this.addElement(nextEl);
-    } else {
-      this.state.activeKey = index;
-      this.state.selecteds = this.updateElement(nextEl, index);
-    }
-
-    return true
-  }
-
-  changeCurrentElement(nextEl) {
-    const { selecteds } = this.state;
-    const index = this.elementIndex(selecteds, nextEl);
-    this.synchronizeElements(this.state.currentElement);
-
-    if (index === -1) {
-      this.state.activeKey = selecteds.length;
-      if (nextEl) this.state.selecteds = this.addElement(nextEl);
-    } else {
-      this.state.activeKey = index;
-      this.state.selecteds = this.updateElement(nextEl, index);
-    }
-    // this.synchronizeElements(this.state.currentElement);
-    this.state.currentElement = nextEl;
-  }
-
-
-  handleGetMoleculeCas(updatedSample) {
-    const selecteds = this.state.selecteds;
-    const index = this.elementIndex(selecteds, updatedSample)
-    const newSelecteds = this.updateElement(updatedSample, index)
-    this.setState({ selecteds: newSelecteds })
-  }
-
-  UpdateMolecule(updatedSample) {
-    if (updatedSample) {
-      const selecteds = this.state.selecteds;
-      const index = this.elementIndex(selecteds, updatedSample);
-      const newSelecteds = this.updateElement(updatedSample, index);
-      this.setState({ selecteds: newSelecteds });
-    }
-  }
-
-  UpdateResearchPlanAttaches(updatedResearchPlan) {
-    const { selecteds } = this.state;
-    ResearchPlansFetcher.fetchById(updatedResearchPlan.id)
-      .then((result) => {
-        result.mode = 'edit';
-        this.changeCurrentElement(result);
-        const index = this.elementIndex(selecteds, result);
-        const newSelecteds = this.updateElement(result, index);
-        this.setState({ selecteds: newSelecteds });
-      });
-  }
-
-  handleUpdateResearchPlanAttaches(updatedResearchPlan) {
-    this.UpdateResearchPlanAttaches(updatedResearchPlan);
-  }
-
-  UpdateWellplateAttaches(updatedWellplate) {
-    const { selecteds } = this.state;
-    WellplatesFetcher.fetchById(updatedWellplate.id)
-      .then((result) => {
-        this.changeCurrentElement(result);
-        const index = this.elementIndex(selecteds, result);
-        const newSelecteds = this.updateElement(result, index);
-        this.setState({ selecteds: newSelecteds });
-      });
-  }
-
-  handleUpdateWellplateAttaches(updatedWellplate) {
-    this.UpdateWellplateAttaches(updatedWellplate);
-  }
-
-  UpdateScreen(updatedScreen) {
-    const { selecteds } = this.state;
-    ScreensFetcher.fetchById(updatedScreen.id)
-      .then((result) => {
-        this.changeCurrentElement(result);
-        const index = this.elementIndex(selecteds, result);
-        const newSelecteds = this.updateElement(result, index);
-        this.setState({ selecteds: newSelecteds });
-      });
-  }
-
-  handleUpdateScreen(updatedScreen) {
-    this.UpdateScreen(updatedScreen);
-  }
-
-  handleUpdateMoleculeNames(updatedSample) {
-    this.UpdateMolecule(updatedSample);
-  }
-
-  handleUpdateMoleculeCas(updatedSample) {
-    this.UpdateMolecule(updatedSample);
-  }
-
-  handleUpdateElement(updatedElement) {
-    switch (updatedElement.type) {
-      case 'sample':
-        fetchOls('sample');
-        this.handleRefreshElements('sample');
-        break;
-      case 'reaction':
-        fetchOls('reaction');
-        this.handleRefreshElements('reaction');
-        this.handleRefreshElements('sample');
-        break;
-      case 'screen':
-        fetchOls('screen');
-        this.handleRefreshElements('screen');
-        this.handleUpdateScreen(updatedElement);
-        break;
-      case 'research_plan':
-        this.handleRefreshElements('research_plan');
-        this.handleUpdateResearchPlanAttaches(updatedElement);
-        break;
-      case 'wellplate':
-        fetchOls('wellplate');
-        this.handleRefreshElements('wellplate');
-        this.handleUpdateWellplateAttaches(updatedElement);
-        this.handleRefreshElements('sample');
-        break;
-      case 'genericEl':
-        this.handleRefreshElements('genericEl');
-        break;
-      default:
-        this.changeCurrentElement(updatedElement);
-        this.handleRefreshElements(updatedElement.type);
-        break;
-    }
-
-    return true;
-  }
-
-  handleUpdateEmbeddedResearchPlan() {
-    this.handleRefreshElements('research_plan');
-  }
-
-  synchronizeElements(previous) {
-    const { selecteds, refreshCoefficient } = this.state;
-
-    if (previous instanceof Sample) {
-      const rId = previous.tag && previous.tag.taggable_data
-        && previous.tag.taggable_data.reaction_id;
-      const openedReaction = selecteds.find(el => SameEleTypId(el, { type: 'reaction', id: rId }));
-      if (openedReaction) {
-        if (refreshCoefficient && refreshCoefficient.length > 0) {
-          refreshCoefficient.forEach((element) => {
-            if (element.sId === previous.id) {
-              openedReaction.updateMaterial(previous, element);
-            }
-          });
-
-          // For REPO
-          const freeze = (openedReaction && openedReaction.publication && openedReaction.publication.taggable_data &&
-            openedReaction.publication.taggable_data.scheme_only === true && (openedReaction.publication.state !== 'declined' || openedReaction.publication.state !== 'withdrawn')) || false;
-          if (freeze === false) {
-            openedReaction.updateMaterial(previous);
-          }
-
-        } else {
-          openedReaction.updateMaterial(previous);
-        }
-        if (previous.isPendingToSave) {
-          openedReaction.changed = previous.isPendingToSave;
-        }
-      }
-    }
-
-    if (previous instanceof Reaction) {
-      const samples = previous.samples;
-      selecteds.map((nextSample) => {
-        const previousSample = samples.find(s => SameEleTypId(nextSample, s));
-        if (previousSample) {
-          nextSample.amount_value = previousSample.amount_value;
-          nextSample.amount_unit = previousSample.amount_unit;
-          nextSample.container = previousSample.container;
-          nextSample.density = previousSample.density;
-          nextSample._molarity_unit = previousSample._molarity_unit;
-          nextSample._molarity_value = previousSample._molarity_value;
-        }
-        return nextSample;
-      });
-    }
-
-    return previous;
-  }
-
-  addElement(addEl) {
-    const selecteds = this.state.selecteds
-    return [...selecteds, addEl]
-  }
-
-  updateElement(updateEl, index) {
-    const { selecteds } = this.state;
-    return [
-      ...selecteds.slice(0, index),
-      updateEl,
-      ...selecteds.slice(index + 1)
-    ];
-  }
-
-  deleteElement(deleteEl) {
-    return this.state.selecteds.filter(el => !SameEleTypId(el, deleteEl));
-  }
-
-  elementIndex(selecteds, newSelected) {
-    let index = -1;
-    if (newSelected) {
-      selecteds.forEach((s, i) => {
-        if (SameEleTypId(s, newSelected)) { index = i; }
-      });
-    }
-    return index;
-  }
-
-  resetCurrentElement(newKey, newSelecteds) {
-    const newCurrentElement = newKey < 0 ? newSelecteds[0] : newSelecteds[newKey]
-
-    if (newSelecteds.length === 0) {
-      this.changeCurrentElement(null);
-    } else {
-      this.changeCurrentElement(newCurrentElement);
-    }
-
-    UrlSilentNavigation(newCurrentElement)
-    return true
-  }
-
-  deleteCurrentElement(deleteEl) {
-    const newSelecteds = this.deleteElement(deleteEl)
-    let left = this.state.activeKey - 1
-    if (left < 0) left = 0;
-    this.setState({ selecteds: newSelecteds });
-    this.resetCurrentElement(left, newSelecteds);
-  }
-
-  isDeletable(deleteEl) {
-    return deleteEl && deleteEl.isPendingToSave ? false : true
-  }
-
-  handleDeletingElements(response) {
-    const elements = response && response.selecteds;
-    const { currentElement } = this.state;
-    const currentNotDeleted = intersectionWith([currentElement], elements, SameEleTypId)[0];
-    const newSelecteds = intersectionWith(this.state.selecteds, elements, SameEleTypId);
-    const ui_state = UIStore.getState();
-
-    if (currentNotDeleted) {
-      const currentIdx = findIndex(newSelecteds, o => o.id === currentElement.id) || 0;
-      this.setState({ selecteds: newSelecteds, activeKey: currentIdx });
-    } else {
-      this.setState({ selecteds: newSelecteds }, this.resetCurrentElement(-1, newSelecteds));
-    }
-
-    this.fetchElementsByCollectionIdandLayout();
-  }
-
-  handleRefreshComputedProp(cprop) {
-    const { selecteds, currentElement } = this.state;
-    const samples = selecteds.concat([currentElement]).filter(x => (
-      x instanceof Sample && x.id == cprop.sample_id
-    ));
-    if (samples.length === 0) return this.handleRefreshElements('sample');
-
-    samples.forEach(el => {
-      const found = el.molecule_computed_props && el.molecule_computed_props.find(x => x.id == cprop.id);
-      if (!found) {
-        el.molecule_computed_props && el.molecule_computed_props.push(cprop);
-        return;
-      }
-
-      const foundDate = Date.parse(found.updated_at);
-      const propDate = Date.parse(cprop.updated_at);
-      if (propDate > foundDate) {
-        found.max_potential = cprop.max_potential;
-        found.min_potential = cprop.min_potential;
-        found.mean_potential = cprop.mean_potential;
-        found.lumo = cprop.lumo;
-        found.homo = cprop.homo;
-        found.ip = cprop.ip;
-        found.ea = cprop.ea;
-        found.dipol_debye = cprop.dipol_debye;
-        found.mean_abs_potential = cprop.mean_abs_potential;
-        found.status = cprop.status;
-      }
-    });
-
-    this.handleRefreshElements('sample');
-  }
-
-  // End of DetailStore
-  /////////////////////
-
-  // -- Private Note --
-  handleCreatePrivateNote(note) {
-    this.state.currentElement.private_note = note
-    this.changeCurrentElement(this.state.currentElement)
-  }
-
-  handleUpdatePrivateNote(note) {
-    this.state.currentElement.private_note = note
-    this.changeCurrentElement(this.state.currentElement)
-  }
-
-  // -- Metadata --
-
-  handleFetchMetadata(metadata) {
-    this.changeCurrentElement(metadata);
-  }
-}
-
-export default alt.createStore(ElementStore, 'ElementStore');
diff --git a/app/packs/src/components/stores/EmbargoStore.js b/app/packs/src/components/stores/EmbargoStore.js
deleted file mode 100644
index 3a9c3490e..000000000
--- a/app/packs/src/components/stores/EmbargoStore.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import EmbargoActions from '../actions/EmbargoActions';
-import PublicActions from '../actions/PublicActions';
-
-class EmbargoStore {
-  constructor() {
-    this.selectEmbargoId;
-    this.bundles = [];
-    this.selectType;
-    this.selectState;
-    this.searchType;
-    this.searchValue;
-    this.review_info == {};
-    this.element = null;
-    // this.elements = [];
-
-    this.bindListeners({
-      handleEmbargoMove: EmbargoActions.moveEmbargo,
-      handleEmbargoAssign: EmbargoActions.assignEmbargo,
-      handleEmbargoRelease: [EmbargoActions.releaseEmbargo, EmbargoActions.deleteEmbargo],
-      handleFetchBundles: EmbargoActions.fetchEmbargoBundle,
-      handleDisplayEmbargoElement: EmbargoActions.displayReviewEmbargo,
-      handleGetEmbargoElements: EmbargoActions.getEmbargoElements,
-      handleGetEmbargoElement: EmbargoActions.getEmbargoElement,
-      handleClose: PublicActions.close,
-    });
-  }
-
-  handleClose({ deleteEl }) {
-    this.setState({ currentElement: null });
-  }
-
-  handleDisplayEmbargoElement(result) {
-    const publication = result?.element?.publication || {};
-    if (result?.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home/');
-    } else {
-      const elementType = (result.element.sample ? 'sample' : 'reaction');
-      this.setState({
-        selectEmbargo: result.element.selectEmbargo,
-        guestPage: 'embargo',
-        elementType,
-        queryId: result.id,
-        currentElement: result.element,
-        review: publication?.review || {},
-        review_info: result.element?.review_info
-      });
-      Aviator.navigate(`/embargo/${elementType}/${result.id}`, { silent: true });
-    }
-  }
-
-  handleGetEmbargoElement(results) {
-    this.setState({ element: results })
-  }
-
-
-  handleEmbargoRelease(result) {
-    EmbargoActions.fetchEmbargoBundle();
-  }
-
-  handleEmbargoAssign(result) {
-    if (result.error) {
-      alert(result.error);
-    } else {
-      alert(result.message);
-      // refresh embargo list
-      EmbargoActions.getEmbargoBundle();
-      // refresh element list
-      PublicActions.getElements(
-        this.selectType, this.selectState, this.searchType,
-        this.searchValue, this.page, this.perPage
-      );
-    }
-  }
-
-  handleEmbargoMove(results) {
-    const { col_id, is_new_embargo, new_embargo, message } = results.result;
-    if (is_new_embargo === true) {
-      this.bundles.push(new_embargo);
-    }
-    alert(message);
-    EmbargoActions.getEmbargoElements(col_id);
-  }
-
-
-  handleRefreshEmbargoBundles(result) {
-    const cols = result.repository;
-    const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push(col);
-      });
-    }
-    this.setState({ bundles, current_user });
-  }
-  handleFetchBundles(result) {
-    const bundles = result.repository || [];
-    // eslint-disable-next-line camelcase
-    const { current_user } = result;
-    this.setState({
-      guestPage: 'embargo', bundles, current_user, elements: [], element: null
-    });
-  }
-
-  handleGetEmbargoElements(results) {
-    const { elements, current_user, embargo_id, embargo } = results;
-    this.setState({
-      selectEmbargoId: embargo_id,
-      selectEmbargo: embargo,
-      elements,
-      element: null,
-      currentUser: current_user
-    });
-  }
-}
-
-export default alt.createStore(EmbargoStore, 'EmbargoStore');
diff --git a/app/packs/src/components/stores/InboxStore.js b/app/packs/src/components/stores/InboxStore.js
deleted file mode 100644
index 57fdae3cb..000000000
--- a/app/packs/src/components/stores/InboxStore.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import _ from 'lodash';
-import alt from '../alt';
-import InboxActions from '../actions/InboxActions';
-import ElementActions from '../actions/ElementActions';
-import DetailActions from '../actions/DetailActions';
-import ElementStore from './ElementStore';
-
-class InboxStore {
-  constructor() {
-    this.state = {
-      inbox: {},
-      cache: [],
-      deleteEl: null,
-      numberOfAttachments: 0,
-      inboxModalVisible: false
-    };
-
-    this.bindListeners({
-      handleToggleInboxModal: InboxActions.toggleInboxModal,
-      handleFetchInbox: InboxActions.fetchInbox,
-      handleFetchInboxCount: InboxActions.fetchInboxCount,
-      handleRemoveAttachmentFromList: InboxActions.removeAttachmentFromList,
-      handleRemoveUnlinkedAttachmentFromList: InboxActions.removeUnlinkedAttachmentFromList,
-      handleRemoveDatasetFromList: InboxActions.removeDatasetFromList,
-      handleDeleteAttachment: InboxActions.deleteAttachment,
-      handleDeleteContainer: InboxActions.deleteContainer,
-      handleBackToInbox: InboxActions.backToInbox,
-      handleDeleteContainerLink: InboxActions.deleteContainerLink,
-
-      handleUpdateCreateElementDict: [
-        ElementActions.createSample,
-        ElementActions.updateSample,
-        ElementActions.createReaction,
-      ],
-      handleUpdateCreateElement: [
-        ElementActions.updateReaction,
-        ElementActions.createWellplate,
-        ElementActions.updateWellplate,
-        ElementActions.createScreen,
-        ElementActions.updateScreen,
-      ],
-      handleClose: DetailActions.close,
-      handleConfirmDelete: DetailActions.confirmDelete,
-      handleDeleteElement: ElementActions.deleteElementsByUIState
-    });
-  }
-
-  handleToggleInboxModal() {
-    const { inboxModalVisible } = this.state;
-    this.setState({ inboxModalVisible: !inboxModalVisible });
-    this.emitChange();
-  }
-
-  handleFetchInbox(result) {
-    this.state.inbox = result;
-    this.sync();
-    this.countAttachments();
-  }
-
-  handleFetchInboxCount(result) {
-    this.state.numberOfAttachments = result.inbox_count;
-  }
-
-  handleRemoveAttachmentFromList(attachment) {
-    const { inbox } = this.state;
-
-    inbox.children.forEach((deviceBox) => {
-      deviceBox.children.forEach((dataset) => {
-        const index = dataset.attachments.indexOf(attachment);
-        if (index !== -1) {
-          dataset.attachments.splice(index, 1);
-          this.state.cache.push(attachment);
-        }
-      });
-    });
-    this.setState(inbox);
-    this.countAttachments();
-  }
-
-  handleRemoveUnlinkedAttachmentFromList(attachment) {
-    const { inbox } = this.state;
-
-    const index = inbox.unlinked_attachments.indexOf(attachment);
-    if (index !== -1) {
-      inbox.unlinked_attachments.splice(index, 1);
-      this.state.cache.push(attachment);
-    }
-
-    this.setState(inbox);
-    this.countAttachments();
-  }
-
-  handleRemoveDatasetFromList(dataset) {
-    let inbox = this.state.inbox;
-
-    inbox.children.forEach(device_box => {
-      var index = device_box.children.indexOf(dataset)
-      if(index != -1){
-        device_box.children[index].attachments.forEach(attachment => {
-          this.state.cache.push(attachment)
-        })
-        device_box.children[index].attachments = []
-      }
-    })
-
-    this.setState(inbox)
-    this.countAttachments();
-  }
-
-  handleDeleteAttachment(result) {
-    InboxActions.fetchInbox();
-  }
-
-  handleDeleteContainerLink(result) {
-    InboxActions.fetchInbox();
-  }
-
-  handleDeleteContainer(result) {
-    InboxActions.fetchInbox();
-  }
-
-  handleBackToInbox(attachment) {
-    var attachments = this.state.cache.filter(function(item) {
-      if (item.id == attachment.id){
-        return item
-      }
-    })
-
-    if (attachments.length == 1) {
-      var index = this.state.cache.indexOf(attachments[0])
-      this.state.cache.splice(index, 1)
-      InboxActions.fetchInbox()
-    }else{
-      InboxActions.deleteContainerLink(attachment)
-    }
-  }
-
-  getAttachments(containers, all_attachments) {
-    if (containers) {
-      containers.forEach(container => {
-        all_attachments.push.apply(all_attachments, container.attachments)
-        this.getAttachments(container.children, all_attachments)
-      })
-    }
-    return all_attachments
-  }
-
-  updateCache(attachments) {
-    this.state.cache = _.differenceBy(this.state.cache, attachments, 'id')
-  }
-
-  handleUpdateCreateElementDict({ element, closeView }) {
-    this.handleUpdateCreateElement(element);
-  }
-
-  handleUpdateCreateElement(element) {
-    if (element && element.isEdited && element.container) {
-      const all_attachments = this.getAttachments(element.container.children, [])
-      this.updateCache(all_attachments);
-      InboxActions.fetchInbox();
-    }
-  }
-
-  handleClose({deleteEl, force}) {
-    this.state.deleteEl = deleteEl
-  }
-
-  handleConfirmDelete(confirm) {
-    if(confirm){
-      this.handleUpdateCreateElement(this.state.deleteEl)
-    }
-    this.state.deleteEl = null
-  }
-
-  handleDeleteElement(result) {
-    // if (!result || !result.selecteds) { return null; }
-    this.waitFor(ElementStore.dispatchToken);
-    const { selecteds } = ElementStore.getState();
-    selecteds.forEach(element => this.handleUpdateCreateElement(element));
-  }
-
-  sync() {
-    let inbox = this.state.inbox
-
-    inbox.children.forEach(device_box => {
-      device_box.children.forEach(dataset => {
-        dataset.attachments = _.differenceBy(dataset.attachments, this.state.cache, 'id')
-      })
-    })
-    inbox.unlinked_attachments = _.differenceBy(inbox.unlinked_attachments, this.state.cache, 'id')
-
-    this.setState(inbox)
-  }
-
-  countAttachments() {
-    let count = 0;
-    const inbox = this.state.inbox
-    inbox.children.forEach(device_box => {
-      device_box.children.forEach(dataset => {
-        count += dataset.attachments.length
-      })
-    });
-    count += inbox.unlinked_attachments.length
-    this.state.numberOfAttachments = count;
-  }
-}
-
-export default alt.createStore(InboxStore, 'InboxStore');
diff --git a/app/packs/src/components/stores/KeyboardStore.js b/app/packs/src/components/stores/KeyboardStore.js
deleted file mode 100644
index 3c4107768..000000000
--- a/app/packs/src/components/stores/KeyboardStore.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import KeyboardActions from 'src/stores/alt/actions/KeyboardActions';
-
-class KeyboardStore {
-  constructor() {
-    this.state = {
-      context: "sample",
-      documentKeyDownCode: null
-    };
-
-    this.bindListeners({
-      handleDocumentKeyDown: KeyboardActions.documentKeyDown,
-      handleContextChange: KeyboardActions.contextChange
-    })
-  }
-
-  handleDocumentKeyDown(keyCode) {
-    this.state.documentKeyDownCode = keyCode
-  }
-
-  handleContextChange(context) {
-    this.state.context = context
-  }
-}
-
-export default alt.createStore(KeyboardStore, 'KeyboardStore');
diff --git a/app/packs/src/components/stores/LoadingStore.js b/app/packs/src/components/stores/LoadingStore.js
deleted file mode 100644
index df82da44f..000000000
--- a/app/packs/src/components/stores/LoadingStore.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import alt from '../alt';
-import LoadingActions from '../actions/LoadingActions';
-import ReportActions from '../actions/ReportActions';
-import ElementActions from '../actions/ElementActions';
-import InboxActions from '../actions/InboxActions';
-import PredictionActions from '../actions/PredictionActions';
-import RepositoryActions from '../actions/RepositoryActions';
-import PublicActions from '../actions/PublicActions';
-import ReviewActions from '../actions/ReviewActions';
-
-class LoadingStore {
-  constructor() {
-    this.loading = false;
-    this.state = { filePool: [] };
-
-    this.bindListeners({
-      handleStart: LoadingActions.start,
-      handleStop:
-        [
-          LoadingActions.stop,
-          ReportActions.clone,
-          ReportActions.updateCheckedTags,
-          ReportActions.loadRreview,
-          ElementActions.createGenericEl,
-          ElementActions.updateGenericEl,
-          ElementActions.createSampleForReaction,
-          ElementActions.updateSampleForReaction,
-          ElementActions.updateSampleForWellplate,
-          ElementActions.createSample,
-          ElementActions.updateSample,
-          ElementActions.createReaction,
-          ElementActions.updateReaction,
-          ElementActions.createResearchPlan,
-          ElementActions.updateResearchPlan,
-          ElementActions.createWellplate,
-          ElementActions.updateWellplate,
-          InboxActions.fetchInbox,
-          PredictionActions.infer,
-          RepositoryActions.reviewPublish,
-          ReviewActions.updateComment,
-          ReviewActions.reviewPublish,
-          ReviewActions.fetchSample,
-          ReviewActions.displayReviewReaction,
-          PublicActions.getSearchReactions,
-          PublicActions.getSearchMolecules,
-          PublicActions.getReactions,
-          PublicActions.getMolecules,
-        ],
-      handleStartLoadingWithProgress: LoadingActions.startLoadingWithProgress,
-      handleStopLoadingWithProgress: LoadingActions.stopLoadingWithProgress,
-      handleUpdateLoadingProgress: LoadingActions.updateLoadingProgress,
-    });
-  }
-
-  handleStart() {
-    this.setState({ loading: true });
-  }
-
-  handleStop() {
-    this.setState({ loading: false });
-  }
-
-  handleStartLoadingWithProgress(filename) {
-    let { filePool } = this.state;
-    if (!filePool) {
-      filePool = [{ filename: filename, progress: 0 }];
-    }
-    else {
-      const filter = filePool.filter(value => value.filename === filename);
-      if (filter.length === 0) {
-        const value = { filename: filename, progress: 0 };
-        filePool.push(value);
-      }
-    }
-
-    if (filePool.length > 0) {
-      this.setState({ loadingWithProgress: true, filePool: filePool });
-    }
-  }
-
-  handleStopLoadingWithProgress(filename) {
-    const { filePool } = this.state;
-    if (filePool) {
-      filePool.forEach((file, index, object) => {
-        if (file.filename === filename) {
-          object.splice(index, 1);
-        }
-      });
-
-      if (filePool.length === 0) {
-        this.setState({ loadingWithProgress: false, filePool: [] });
-      }
-      else {
-        this.setState({ filePool: filePool });
-      }
-    }
-  }
-
-  handleUpdateLoadingProgress(value) {
-    const { filePool } = this.state;
-    if (filePool) {
-      filePool.forEach(file => {
-        if (file.filename === value.filename) {
-          file.progress = value.progress;
-        }
-      });
-      this.setState({ filePool: filePool });
-    }
-  }
-}
-
-export default alt.createStore(LoadingStore, 'LoadingStore');
diff --git a/app/packs/src/components/stores/NmrSimStore.js b/app/packs/src/components/stores/NmrSimStore.js
deleted file mode 100644
index fb3131059..000000000
--- a/app/packs/src/components/stores/NmrSimStore.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import alt from '../alt';
-import NmrSimActions from '../actions/NmrSimActions';
-
-import Jcampconverter from 'jcampconverter';
-
-class NmrSimStore {
-  constructor() {
-    this.state = {
-      currentNmr: { data13C: [], data1H: [] },
-      currentType: '13C',
-      synced: false,
-    };
-
-    this.bindListeners({
-      handleUpdateNmrdb: NmrSimActions.updateNmrdb,
-      handleResetNMR: NmrSimActions.resetNMR,
-    });
-  }
-
-  handleUpdateNmrdb({ type, spectrum }) {
-    this.state.currentType = type;
-    this.state.synced = true;
-    if (spectrum) {
-      if (spectrum.response_1h) {
-        const data1h = this.decodeNmrdb1H(JSON.parse(spectrum.response_1h));
-        this.assignNmrdb(data1h, '1H');
-      }
-      if (spectrum.response_13c) {
-        const data13C = this.decodeNmrdb13C(JSON.parse(spectrum.response_13c));
-        this.assignNmrdb(data13C, '13C');
-      }
-    }
-  }
-
-  decodeNmrdb13C(response) {
-    const jcamp = response.result.spectrum13C.jcamp.value;
-    return Jcampconverter.convert(jcamp, { xy: true }).spectra[0].data[0];
-  }
-
-  decodeNmrdb1H(response) {
-    const jcamp = response.jcamp.value;
-    return Jcampconverter.convert(jcamp, { xy: true }).spectra[0].data[0];
-  }
-
-  assignNmrdb(spectrum, type) {
-    const data = [];
-    for (let i = 0; i < spectrum.y.length; i++) {
-      data.push({ x: spectrum.x[i], y: spectrum.y[i] });
-    }
-    if (type === '13C') {
-      this.state.currentNmr.data13C = data;
-    } else {
-      this.state.currentNmr.data1H = data;
-    }
-  }
-
-  handleResetNMR() {
-    this.state.currentNmr = { data13C: [], data1H: [] };
-    this.state.synced = false;
-  }
-}
-
-export default alt.createStore(NmrSimStore, 'NmrSimStore');
diff --git a/app/packs/src/components/stores/NotificationStore.js b/app/packs/src/components/stores/NotificationStore.js
deleted file mode 100644
index 785d7c1b6..000000000
--- a/app/packs/src/components/stores/NotificationStore.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import alt from '../alt';
-import NotificationActions from '../actions/NotificationActions';
-import ElementActions from '../actions/ElementActions';
-
-
-class NotificationStore {
-  constructor() {
-    this.state = {
-      notificationSystem: null
-    }
-
-    this.bindListeners({
-      handleAdd: NotificationActions.add,
-      handleRemove: NotificationActions.remove,
-      handleRemoveByUid: NotificationActions.removeByUid,
-      handleNotificationImportSamplesFromFile: ElementActions.importSamplesFromFile,
-      handleUploadErrorNotify: NotificationActions.uploadErrorNotify,
-      handleSetComponentReference: NotificationActions.setComponentReference
-    })
-  }
-
-  handleAdd(notification) {
-    this.state.notificationSystem.addNotification(notification)
-  }
-
-  handleRemove(notification) {
-    this.state.notificationSystem.removeNotification(notification)
-  }
-
-  handleRemoveByUid(uid) {
-    this.state.notificationSystem.removeNotification(uid)
-  }
-
-  handleClearNotifications() {
-    this.state.notificationSystem.clearNotifications();
-  }
-
-  handleNotificationImportSamplesFromFile(result) {
-    let num = result.data.length;
-    let status = result.status;
-    let sdf = result.sdf
-    let message = result.message;
-    this.handleRemoveByUid("import_samples_upload");
-    let notification = {
-      title: "Oops!",
-      message: message + "\n Please check the file and try again.",
-      level: "error",
-      position: "bl",
-      autoDismiss: 0
-    }
-    if (sdf) {
-      if (status == "ok") {
-        notification = {
-          title: "Success",
-          message: message,
-          level: "success",
-          position: "bl",
-          autoDismiss: 10
-        }
-      } else if (status == "failed"){
-      } else if (status == "error"){
-      } else if (status == "invalid"){
-        notification.message = message;
-      }
-    } else {
-      if (status == "ok") {
-        notification = {
-          title: "Success",
-          message: "The "+num+" samples have been imported successfully",
-          level: "success",
-          position: "bl",
-          autoDismiss: 10
-        }
-      } else if (status == "failed"){
-      } else if (status == "error"){
-      } else if (status == "invalid"){
-        notification.message = message;
-      }
-    }
-
-    this.handleAdd(notification);
-  }
-
-  handleSetComponentReference(ref) {
-    this.state.notificationSystem = ref;
-  }
-
-  handleUploadErrorNotify(message) {
-    // this.handleRemoveByUid('import_samples_upload');
-    this.handleClearNotifications();
-
-    const notification = {
-      title: 'Error',
-      message,
-      level: 'error',
-      uid: 'import_reactions_upload',
-      position: 'bl'
-    };
-    this.handleAdd(notification);
-  }
-}
-
-export default alt.createStore(NotificationStore, 'NotificationStore');
diff --git a/app/packs/src/components/stores/PermissionStore.js b/app/packs/src/components/stores/PermissionStore.js
deleted file mode 100644
index 58d20dd84..000000000
--- a/app/packs/src/components/stores/PermissionStore.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import PermissionActions from 'src/stores/alt/actions/PermissionActions';
-
-class PermissionStore {
-  constructor() {
-    this.state = {
-      is_top_secret: false,
-      sharing_allowed: false,
-      deletion_allowed: false,
-      remove_allowed: false,
-    };
-
-    this.bindListeners({
-      handleFetchPermissionStatus: PermissionActions.fetchPermissionStatus
-    })
-  }
-
-
-  handleFetchPermissionStatus(result) {
-    if (result.is_top_secret != null) {this.state.is_top_secret = result.is_top_secret}
-    if (result.sharing_allowed !=null) {this.state.sharing_allowed = result.sharing_allowed}
-    if (result.deletion_allowed !=null) {this.state.deletion_allowed = result.deletion_allowed}
-    if (result.remove_allowed !=null) {this.state.remove_allowed = result.remove_allowed}
-  }
-}
-
-export default alt.createStore(PermissionStore, 'PermissionStore');
diff --git a/app/packs/src/components/stores/PredictionStore.js b/app/packs/src/components/stores/PredictionStore.js
deleted file mode 100644
index 2ac052838..000000000
--- a/app/packs/src/components/stores/PredictionStore.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { difference, uniq } from 'lodash';
-
-import alt from '../alt';
-import PredictionActions from '../actions/PredictionActions';
-
-class PredictionStore {
-  constructor() {
-    this.activeKey = 0;
-    this.template = 'predictProducts';
-    this.inputEls = [];
-    this.defaultEls = [];
-    this.outputEls = [];
-
-    this.bindListeners({
-      handleInfer: PredictionActions.infer,
-      handleUpdateActiveKey: PredictionActions.updateActiveKey,
-      handleUpdateTemplate: PredictionActions.updateTemplate,
-      handleUpdateUI: PredictionActions.updateUI,
-      handleRemove: PredictionActions.remove,
-      handleReset: PredictionActions.reset,
-    });
-  }
-
-  handleInfer(results) {
-    if (results.error) {
-      this.setState({ outputEls: [] });
-    }
-
-    const outputEls = results.products || results.reactants || [];
-    this.setState({ outputEls });
-  }
-
-  handleUpdateActiveKey(activeKey) {
-    this.setState({ activeKey });
-  }
-
-  handleUpdateTemplate(template) {
-    this.setState({
-      activeKey: 0,
-      template,
-      inputEls: [],
-      defaultEls: [],
-      outputEls: [],
-    });
-  }
-
-  handleUpdateUI(result) {
-    if (!result) return null;
-    const { samples } = result;
-    if (!samples) return null;
-    const defaultSmis = this.defaultEls.map(x => x.molecule.cano_smiles);
-    const rspSmis = samples.map(x => x.molecule.cano_smiles);
-    let uniqLoadSmis = difference(rspSmis, defaultSmis);
-    uniqLoadSmis = uniq(uniqLoadSmis);
-
-    let inputEls = samples.filter((x, idx) => ( // avoid 2 samples with the same smiles
-      rspSmis.indexOf(x.molecule.cano_smiles) === idx
-    ));
-    const maxNumEls = this.template === 'predictProducts' ? 10 : 1;
-    inputEls = inputEls.map(x => ( // avoid including defaultSmis
-      uniqLoadSmis.indexOf(x.molecule.cano_smiles) >= 0 ? x : null
-    )).filter(r => r != null).filter((val, idx) => idx < maxNumEls);
-
-    this.setState({ inputEls });
-    return null;
-  }
-
-  handleRemove(el) {
-    const inputEls = this.inputEls.filter(x => x.id !== el.id);
-    this.setState({ inputEls });
-  }
-
-  handleReset() {
-    this.setState({
-      activeKey: 0,
-      template: 'predictProducts',
-      inputEls: [],
-      defaultEls: [],
-      outputEls: [],
-    });
-  }
-}
-
-export default alt.createStore(PredictionStore, 'PredictionStore');
diff --git a/app/packs/src/components/stores/PublicStore.js b/app/packs/src/components/stores/PublicStore.js
deleted file mode 100644
index 0291e8aba..000000000
--- a/app/packs/src/components/stores/PublicStore.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import PublicActions from '../actions/PublicActions';
-import UIActions from '../actions/UIActions';
-import RepoNavListTypes from '../../libHome/RepoNavListTypes';
-
-class PublicStore {
-  constructor() {
-    this.molecules = [];
-    this.reactions = [];
-    this.page = 1;
-    this.pages = 1;
-    this.perPage = 10;
-    this.selectType;
-    this.selectState;
-    this.searchType;
-    this.searchValue;
-    this.publishedStatics = [];
-    this.lastPublished;
-    this.lastPublishedSample;
-    this.guestPage = "";
-    this.currentElement = null;
-    this.queryId = -1;
-    this.news = {};
-    this.articles = [];
-    this.howto = {};
-    this.howtos = [];
-    // this.bundles = [];
-    this.showReviewModal = false;
-    this.reviewData = {};
-
-    this.bindListeners({
-      handleGetMolecules: PublicActions.getMolecules,
-      handleGetReactions: PublicActions.getReactions,
-      handleSearchMolecules: PublicActions.getSearchMolecules,
-      handleSearchReactions: PublicActions.getSearchReactions,
-      handlePublishedStatics: PublicActions.publishedStatics,
-      handleLastPublished: PublicActions.lastPublished,
-      handleLastPublishedSample: PublicActions.lastPublishedSample,
-      handleOpenRepositoryPage: PublicActions.openRepositoryPage,
-      handleDisplayDataset: PublicActions.displayDataset,
-      handleDisplayMolecule: PublicActions.displayMolecule,
-      handleDisplayReaction: PublicActions.displayReaction,
-      handleReceiveSearchresult: PublicActions.fetchBasedOnSearchSelectionAndCollection,
-      handleClearSearchSelection: [UIActions.selectCollection, UIActions.selectSyncCollection],
-      handleClose: PublicActions.close,
-      handleArticles: PublicActions.articles,
-      handleEditArticle: PublicActions.editArticle,
-      handleDisplayArticle: PublicActions.displayArticle,
-      handleHowTos: PublicActions.howtos,
-      handleEditHowTo: PublicActions.editHowTo,
-      handleDisplayHowTo: PublicActions.displayHowTo,
-      handleGetElements: PublicActions.getElements,
-      handleRefreshPubElements: PublicActions.refreshPubElements,
-      handleDisplayCollection: PublicActions.displayCollection,
-
-    });
-  }
-
-  handleRefreshPubElements(type) {
-    const pageType = type.split('=');
-    PublicActions[`get${pageType[0]}`]({ page: this.page, perPage: this.perPage, listType: pageType[1] });
-  }
-
-  handleClose({ deleteEl }) {
-    this.setState({
-      currentElement: null
-    });
-    if (this.guestPage === 'embargo') {
-      Aviator.navigate('/embargo', { silent: true });
-    } else if (this.guestPage === 'review') {
-      Aviator.navigate('/review', { silent: true });
-    } else {
-      console.log('else..........');
-      Aviator.navigate('/publications', { silent: true });
-    }
-  }
-
-  handleClearSearchSelection() {
-    PublicActions.getMolecules.defer();
-  }
-
-  handleGetMolecules(results) {
-    const {
-      molecules, page, pages, perPage, listType
-    } = results;
-    this.setState({
-      molecules, page, pages, perPage, listType, guestPage: 'publications'
-    });
-  }
-
-  handleGetReactions(results) {
-    const {
-      reactions, page, pages, perPage
-    } = results;
-    const listType = (reactions && reactions[0] && reactions[0].taggable_data.scheme_only ? 'scheme' : 'reaction') || 'reaction';
-    this.setState({
-      reactions, page, pages, perPage, listType, guestPage: 'publications'
-    });
-  }
-
-  handleSearchMolecules(results) {
-    const {
-      molecules, page, perPage, totalElements, listType
-    } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      molecules, page, pages, perPage, listType
-    });
-  }
-
-  handleSearchReactions(results) {
-    const {
-      reactions, page, perPage, totalElements, listType
-    } = results;
-    let { pages } = results;
-    if (totalElements && perPage) {
-      pages = Math.ceil(totalElements / perPage);
-    }
-    this.setState({
-      reactions, page, pages, perPage, listType
-    });
-  }
-
-  handlePublishedStatics(publishedStatics) {
-    if (publishedStatics) {
-      this.setState({ publishedStatics });
-    }
-  }
-
-  handleLastPublished(lastPublished) {
-    if (lastPublished) {
-      this.setState({ lastPublished });
-    }
-  }
-
-  handleLastPublishedSample(lastPublishedSample) {
-    if (lastPublishedSample) {
-      this.setState({ lastPublishedSample });
-    }
-  }
-
-  handleOpenRepositoryPage(page) {
-    const pageType = page.split('=');
-    this.setState({
-      guestPage: pageType[0], currentElement: null, listType: pageType[1], elementType: null
-    });
-  }
-
-  handleDisplayDataset(result) {
-    this.setState({
-      guestPage: 'dataset',
-      elementType: 'dataset',
-      queryId: result.id,
-      currentElement: result.dataset
-    });
-    Aviator.navigate(`/publications/datasets/${result.id}`, { silent: true });
-  }
-
-  handleDisplayMolecule(moleculeList) {
-    let cb = () => PublicActions.getMolecules({ listType: moleculeList.listType });
-
-    if (this.molecules.length > 0) {
-      cb = () => {};
-      this.setState({ molecules: this.molecules });
-    }
-
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'molecule',
-      queryId: moleculeList.id,
-      currentElement: moleculeList.moleculeData,
-      listType: moleculeList.listType
-    }, cb());
-    const suf = (moleculeList.anchor && moleculeList.anchor !== 'undefined') ? `#${moleculeList.anchor}` : '';
-    Aviator.navigate(`/publications/molecules/${moleculeList.id}${suf}`, { silent: true });
-  }
-
-  handleDisplayReaction(reactionList) {
-    const listType = reactionList.reactionData.publication.taggable_data.scheme_only ?
-      RepoNavListTypes.SCHEME : RepoNavListTypes.REACTION;
-    let cb = () => PublicActions.getReactions();
-
-    if (this.reactions.length > 0) {
-      cb = () => {};
-      this.setState({ reactions: this.reactions });
-    }
-    this.setState({
-      guestPage: 'publications',
-      elementType: 'reaction',
-      queryId: reactionList.id,
-      currentElement: reactionList.reactionData,
-      listType
-    }, cb());
-    Aviator.navigate(`/publications/reactions/${reactionList.id}`, { silent: true });
-  }
-
-
-
-  handleReceiveSearchresult(result) {
-    this.setState({ ...result.publicMolecules });
-  }
-
-  handleArticles(result) {
-    this.setState({
-      guestPage: 'newsroom',
-      articles: result.data
-    });
-  }
-
-  handleEditArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    news.article = news.article ? news.article : [];
-    this.setState({
-      guestPage: 'newseditor',
-      news,
-    });
-  }
-
-  handleDisplayArticle(result) {
-    const news = result.data;
-    news.key = result.key;
-    this.setState({
-      guestPage: 'newsreader',
-      news,
-    });
-  }
-
-  handleHowTos(result) {
-    this.setState({
-      guestPage: 'howto',
-      howtos: result.data
-    });
-  }
-
-  handleEditHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    howto.article = howto.article ? howto.article : [];
-    this.setState({
-      guestPage: 'howtoeditor',
-      howto,
-    });
-  }
-
-  handleDisplayHowTo(result) {
-    const howto = result.data;
-    howto.key = result.key;
-    this.setState({
-      guestPage: 'howtoreader',
-      howto,
-    });
-  }
-
-
-  handleDisplayCollection(collectionList) {
-    this.setState({
-      guestPage: 'collection',
-      elementType: 'collection',
-      queryId: collectionList.id,
-      selectEmbargo: collectionList.colData && collectionList.colData.col
-    });
-    Aviator.navigate(`/publications/collections/${collectionList.id}`, { silent: true });
-  }
-
-
-  handleGetElements(results) {
-    const {
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
-    } = results;
-    this.setState({
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
-    });
-  }
-
-
-  handleUnitsSystem(result) {
-    this.setState({ unitsSystem: result });
-  }
-
-  handleUnitsSystem(result) {
-    this.setState({ unitsSystem: result });
-  }
-}
-
-export default alt.createStore(PublicStore, 'PublicStore');
diff --git a/app/packs/src/components/stores/QcStore.js b/app/packs/src/components/stores/QcStore.js
deleted file mode 100644
index 82de276c0..000000000
--- a/app/packs/src/components/stores/QcStore.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import QcActions from 'src/stores/alt/actions/QcActions';
-
-class QcStore {
-  constructor() {
-    this.infers = [];
-    this.loading = false;
-
-    this.bindListeners({
-      handleLoadInfers: QcActions.loadInfers,
-      handleSetLoading: QcActions.setLoading,
-    });
-  }
-
-  handleSetLoading() {
-    this.setState({ loading: true });
-  }
-
-  handleLoadInfers({ result, sId }) {
-    const infer = { sId, result };
-    const prevInfers = this.infers
-      .map(i => ((i.sId !== sId) ? i : null))
-      .filter(r => r != null);
-    const nextInfers = [...prevInfers, infer];
-
-    this.setState({
-      loading: false,
-      infers: nextInfers,
-    });
-  }
-}
-
-export default alt.createStore(QcStore, 'QcStore');
diff --git a/app/packs/src/components/stores/RStore.js b/app/packs/src/components/stores/RStore.js
deleted file mode 100644
index 976eedd00..000000000
--- a/app/packs/src/components/stores/RStore.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import ReviewActions from '../actions/ReviewActions';
-import EmbargoActions from '../actions/EmbargoActions';
-
-class RStore {
-  constructor() {
-    this.bindListeners({
-      navigateReview: [ReviewActions.displayReviewSample, ReviewActions.displayReviewReaction],
-      navigateEmbargoReview: [EmbargoActions.displayReviewEmbargo],
-    });
-  }
-
-  navigate(page, result) {
-    const elementType = (result.element.sample ? 'sample' : 'reaction');
-    const subPage = page === 'embargo' ? elementType : `review_${elementType}`;
-    if (result.element && result.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({ guestPage: page });
-      Aviator.navigate(`/${page}/${subPage}/${result.id}`, { silent: true });
-    }
-  }
-
-  navigateEmbargoReview(result) {
-    this.navigate('embargo', result);
-  }
-
-  navigateReview(result) {
-    this.navigate('review', result);
-  }
-}
-
-export default alt.createStore(RStore, 'RStore');
diff --git a/app/packs/src/components/stores/ReportStore.js b/app/packs/src/components/stores/ReportStore.js
deleted file mode 100644
index e09c64496..000000000
--- a/app/packs/src/components/stores/ReportStore.js
+++ /dev/null
@@ -1,733 +0,0 @@
-import moment from 'moment';
-import _ from 'lodash';
-import alt from 'src/stores/alt/alt';
-import ReportActions from 'src/stores/alt/actions/ReportActions';
-import Utils from 'src/utilities/Functions';
-import ArrayUtils from 'src/utilities/ArrayUtils';
-import UserActions from 'src/stores/alt/actions/UserActions';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import { reOrderArr } from 'src/utilities/DndControl';
-import { UpdateSelectedObjs, OrderPreviewObjs } from 'src/utilities/ReportHelper';
-
-class ReportStore {
-  constructor() {
-    this.splSettings = [
-      { checked: true, text: 'diagram' },
-      { checked: true, text: 'collection' },
-      { checked: true, text: 'analyses' },
-      { checked: true, text: 'reaction description' },
-      { checked: true, text: 'literature' },
-    ];
-    this.rxnSettings = [
-      { checked: true, text: 'diagram' },
-      { checked: true, text: 'material' },
-      { checked: true, text: 'description' },
-      { checked: true, text: 'purification' },
-      { checked: true, text: 'dangerous products' },
-      { checked: true, text: 'tlc' },
-      { checked: true, text: 'observation' },
-      { checked: true, text: 'analysis' },
-      { checked: true, text: 'literature' },
-      { checked: true, text: 'variations' },
-    ];
-    this.siRxnSettings = [
-      { checked: true, text: 'Name' },
-      { checked: true, text: 'CAS' },
-      { checked: true, text: 'Formula' },
-      { checked: true, text: 'Smiles' },
-      { checked: true, text: 'InChI' },
-      { checked: true, text: 'Molecular Mass' },
-      { checked: true, text: 'Exact Mass' },
-      { checked: true, text: 'EA' },
-    ];
-    this.configs = [
-      { checked: true, text: 'Page Break' },
-      { checked: true, text: 'Show all chemicals in schemes (unchecked to show products only)' },
-    ];
-    this.checkedAllSplSettings = true;
-    this.checkedAllRxnSettings = true;
-    this.checkedAllSiRxnSettings = true;
-    this.checkedAllConfigs = true;
-    this.processingReport = false;
-    this.defaultObjTags = { sampleIds: [], reactionIds: [] };
-    this.selectedObjTags = { sampleIds: [], reactionIds: [] };
-    this.selectedObjs = [];
-    this.previewObjs = [];
-    this.selMolSerials = [];
-    this.imgFormat = 'png';
-    this.archives = [];
-    this.fileDescription = '';
-    this.activeKey = 0;
-    this.processings = [];
-    this.template = {};
-    this.prdAtts = [];
-    this.attThumbNails = [];
-    this.fileName = '';
-    this.templateOpts = [];
-    this.dois = [];
-
-    this.bindListeners({
-      handleUpdateSplSettings: ReportActions.updateSplSettings,
-      handleToggleSplSettingsCheckAll: ReportActions.toggleSplSettingsCheckAll,
-      handleUpdateRxnSettings: ReportActions.updateRxnSettings,
-      handleToggleRxnSettingsCheckAll: ReportActions.toggleRxnSettingsCheckAll,
-      handleUpdateSiRxnSettings: ReportActions.updateSiRxnSettings,
-      handleToggleSiRxnSettingsCheckAll: ReportActions.toggleSiRxnSettingsCheckAll,
-      handleUpdateConfigs: ReportActions.updateConfigs,
-      handleToggleConfigsCheckAll: ReportActions.toggleConfigsCheckAll,
-      handleGenerateReport: ReportActions.generateReport,
-      handleUpdateCheckedTags: ReportActions.updateCheckedTags,
-      handleMove: ReportActions.move,
-      handleUpdateImgFormat: ReportActions.updateImgFormat,
-      handleGetArchives: ReportActions.getArchives,
-      handleUpdateFileName: ReportActions.updateFileName,
-      handleUpdateFileDescription: ReportActions.updateFileDescription,
-      handleUpdateActiveKey: ReportActions.updateActiveKey,
-      handleDownloadReport: ReportActions.downloadReport,
-      handleUpdateProcessQueue: ReportActions.updateProcessQueue,
-      handleUpdateTemplate: ReportActions.updateTemplate,
-      handleClone: ReportActions.clone,
-      handleDelete: ReportActions.delete,
-      hadnleRemove: ReportActions.remove,
-      hadnleReset: [ReportActions.reset, UserActions.fetchCurrentUser],
-      handleUpdMSVal: ReportActions.updMSVal,
-      handleUpdateThumbNails: ReportActions.updateThumbNails,
-      handleUpdateDefaultTags: ReportActions.updateDefaultTags,
-      handleLoadRreview: ReportActions.loadRreview,
-      handleFetchTemplate: ReportActions.fetchTemplates
-    });
-  }
-
-  handleUpdateImgFormat(value) {
-    this.setState({ imgFormat: value });
-  }
-
-  handleUpdateTemplate(value) {
-    const newSelectedObjs = this.orderObjsForTemplate(value);
-    // const molSerials = this.updMolSerials(newSelectedObjs, value);
-    const newPrdAtts = this.extractPrdAtts(newSelectedObjs);
-    this.setState({
-      template: value,
-      fileName: this.initFileName(value),
-      selectedObjs: newSelectedObjs,
-      prdAtts: newPrdAtts,
-    });
-  }
-
-  orderObjsForTemplate(template, oldObjs = null) {
-    const oldSelectedObjs = oldObjs || this.selectedObjs;
-    if (template !== 'standard') {
-      let frontObjs = [];
-      let rearObjs = [];
-      oldSelectedObjs.forEach((obj) => {
-        if (obj.type === 'reaction' && obj.role === 'gp') {
-          frontObjs = [...frontObjs, obj];
-        } else {
-          rearObjs = [...rearObjs, obj];
-        }
-      });
-      return [...frontObjs, ...rearObjs];
-    }
-    return oldSelectedObjs;
-  }
-
-  handleUpdateSplSettings(target) {
-    this.setState({
-      splSettings: this.splSettings.map((s) => {
-        if (s.text === target.text) {
-          return Object.assign({}, s, { checked: !target.checked });
-        }
-        return s;
-      }),
-    });
-  }
-
-  handleToggleSplSettingsCheckAll() {
-    const newCheckValue = !this.checkedAllSplSettings;
-    this.setState({
-      splSettings: this.splSettings.map(s => (
-        Object.assign({}, s, { checked: newCheckValue })
-      )),
-      checkedAllSplSettings: newCheckValue,
-    });
-  }
-
-  handleUpdateRxnSettings(target) {
-    this.setState({
-      rxnSettings: this.rxnSettings.map((s) => {
-        if (s.text === target.text) {
-          return Object.assign({}, s, { checked: !target.checked });
-        }
-        return s;
-      }),
-    });
-  }
-
-  handleToggleRxnSettingsCheckAll() {
-    const newCheckValue = !this.checkedAllRxnSettings;
-    this.setState({
-      rxnSettings: this.rxnSettings.map(s => (
-        Object.assign({}, s, { checked: newCheckValue })
-      )),
-      checkedAllRxnSettings: newCheckValue,
-    });
-  }
-
-  handleUpdateSiRxnSettings(target) {
-    this.setState({
-      siRxnSettings: this.siRxnSettings.map((s) => {
-        if (s.text === target.text) {
-          return Object.assign({}, s, { checked: !target.checked });
-        }
-        return s;
-      }),
-    });
-  }
-
-  handleToggleSiRxnSettingsCheckAll() {
-    const newCheckValue = !this.checkedAllSiRxnSettings;
-    this.setState({
-      siRxnSettings: this.siRxnSettings.map(s => (
-        Object.assign({}, s, { checked: newCheckValue })
-      )),
-      checkedAllSiRxnSettings: newCheckValue,
-    });
-  }
-
-  handleUpdateConfigs(target) {
-    this.setState({
-      configs: this.configs.map((s) => {
-        if (s.text === target.text) {
-          return Object.assign({}, s, { checked: !target.checked });
-        }
-        return s;
-      }),
-    });
-  }
-
-  handleToggleConfigsCheckAll() {
-    const newCheckValue = !this.checkedAllConfigs;
-    this.setState({
-      configs: this.configs.map(s => (
-        Object.assign({}, s, { checked: newCheckValue })
-      )),
-      checkedAllConfigs: newCheckValue,
-    });
-  }
-
-  handleGenerateReport(result) {
-    const newArchives = [result.report, ...this.archives];
-    this.setState({
-      processingReport: !this.processingReport,
-      activeKey: 5,
-      archives: newArchives,
-      processings: this.getProcessings(newArchives),
-      fileName: this.initFileName(this.template),
-    });
-    this.loadingIcon();
-  }
-
-  getProcessings(archives) {
-    let ids = [];
-    archives.forEach((a) => {
-      if (!a.downloadable) {
-        ids = [...ids, a.id];
-      }
-    });
-    return ids;
-  }
-
-  loadingIcon() {
-    setTimeout(() => this.setState({
-      processingReport: false,
-    }), 2500);
-  }
-
-  mergeMemoryFetchObjs(newObjs) {
-    const fetchSpls = newObjs.samples.filter(x => !x.in_browser_memory);
-    const fetchRxns = newObjs.reactions.filter(x => !x.in_browser_memory);
-    let memSpls = [];
-    let memRxns = [];
-    this.selectedObjs.forEach((x) => {
-      x.type === 'sample'
-        ? memSpls = [...memSpls, x]
-        : memRxns = [...memRxns, x]
-    });
-    return {
-      samples: [...fetchSpls, ...memSpls],
-      reactions: [...fetchRxns, ...memRxns],
-    };
-  }
-
-  handleUpdateCheckedTags({ newTags, newObjs }) {
-    if (!newTags && !newObjs) return null;
-    const targetObjs = this.mergeMemoryFetchObjs(newObjs);
-    const newSelectedObjs = UpdateSelectedObjs(
-      newTags,
-      targetObjs,
-      this.defaultObjTags,
-      this.selectedObjs,
-    );
-    const finalObjs = this.orderObjsForTemplate(this.template, newSelectedObjs);
-    const molSerials = this.updMolSerials(finalObjs);
-    const newPrdAtts = this.extractPrdAtts(finalObjs);
-    this.setState({
-      selectedObjTags: newTags,
-      selectedObjs: finalObjs,
-      prdAtts: newPrdAtts,
-      selMolSerials: molSerials,
-    });
-  }
-
-  isEqTypeId(a, b) {
-    return a.type === b.type && a.id === b.id;
-  }
-
-  handleMove({ sourceTag, targetTag }) {
-    const oldObjs = this.selectedObjs || [];
-    const newObjs = reOrderArr(sourceTag, targetTag, this.isEqTypeId, oldObjs);
-    const finalObjs = this.orderObjsForTemplate(this.template, newObjs);
-    // const molSerials = this.updMolSerials(finalObjs);
-    const newPrdAtts = this.extractPrdAtts(finalObjs);
-    this.setState({
-      selectedObjs: finalObjs,
-      prdAtts: newPrdAtts,
-    });
-  }
-
-  stdReportPrefix(initial) {
-    if (initial) return initial;
-    const { currentUser } = UserStore.getState();
-    if (!currentUser) return '';
-    return currentUser.initials || '';
-  }
-
-  initFileName(template, initial) {
-    let prefix = 'Supporting_Information_';
-    let datetime = moment().format('YYYY-MM-DD[H]HH[M]mm[S]ss');
-
-    switch (template.value) {
-      case 'standard':
-        prefix = this.stdReportPrefix(initial);
-        datetime = moment().format('YYYYMMDD');
-        break;
-      case 'spectrum':
-        prefix = 'Spectra_';
-        break;
-      case 'supporting_information':
-        prefix = 'Supporting_Information_';
-        break;
-      case 'supporting_information_std_rxn':
-        prefix = 'Supporting_Information_Standard_Reaction_';
-        break;
-      case 'rxn_list_xlsx':
-      case 'rxn_list_csv':
-      case 'rxn_list_html':
-        prefix = 'Reaction_List_';
-        break;
-      case 'doi_list_xlsx':
-        prefix = 'DOI_List_';
-        break;
-      default:
-        prefix = '';
-        break;
-    }
-
-    return prefix + datetime;
-  }
-
-  handleGetArchives({ archives }) {
-    this.setState({ archives });
-  }
-
-  handleUpdateFileName(value) {
-    const validValue = this.validName(value);
-    this.setState({ fileName: validValue });
-  }
-
-  validName(text) {
-    let name = text.substring(0, 40);
-    name = name.replace(/[^a-zA-Z0-9\-_]/g, '');
-    return name;
-  }
-
-  handleUpdateFileDescription(value) {
-    this.setState({ fileDescription: value });
-  }
-
-  handleUpdateActiveKey(key) {
-    this.setState({ activeKey: key });
-  }
-
-  handleDownloadReport({ id, template }) {
-    let ext = 'docx';
-    switch (template) {
-      case 'rxn_list_xlsx':
-      case 'doi_list_xlsx':
-        ext = 'xlsx';
-        break;
-      case 'rxn_list_csv':
-        ext = 'csv';
-        break;
-      case 'rxn_list_html':
-        ext = 'html';
-        break;
-      case 'standard':
-      case 'spectrum':
-      case 'supporting_information':
-      case 'supporting_information_std_rxn':
-      default:
-        ext = 'docx';
-        break;
-    }
-
-    const target = `id=${JSON.stringify(id)}&ext=${ext}`;
-    this.markReaded(id);
-    Utils.downloadFile({
-      contents: `/api/v1/download_report/file?${target}`,
-    });
-  }
-
-  markReaded(id) {
-    const newArchives = this.archives.map((archive) => {
-      const a = Object.assign({}, archive);
-      if (archive.id === id) a.unread = false;
-      return a;
-    });
-    this.setState({ archives: newArchives });
-  }
-
-  handleUpdateProcessQueue(result) {
-    const updatedArchives = result.archives;
-    const updatedIds = updatedArchives.map(a => a.id);
-    const newProcessings = this.processings.filter(x => updatedIds.indexOf(x) === -1);
-    const newArchives = this.archives.map((a) => {
-      const index = updatedIds.indexOf(a.id);
-      return index === -1 ? a : updatedArchives[index];
-    });
-    this.setState({
-      archives: newArchives,
-      processings: newProcessings,
-    });
-  }
-
-  orderObjsForArchive(objs, order) {
-    return order.map(od => objs.find(obj => this.isEqTypeId(obj, od)))
-      .filter(r => r != null);
-  }
-
-  handleClone(result) {
-    const { objs, archive, defaultObjTags } = result;
-    const { template, file_description, img_format, configs } = archive;
-    const ss = archive.sample_settings;
-    const rs = archive.reaction_settings;
-    const siRs = archive.si_reaction_settings;
-    const newObjs = UpdateSelectedObjs(defaultObjTags, objs, defaultObjTags);
-    const orderedArObjs = this.orderObjsForArchive(newObjs, archive.objects);
-    const orderedArTpObjs = this.orderObjsForTemplate(template, orderedArObjs);
-    const molSerials = archive.mol_serials ||
-      this.updMolSerials(orderedArTpObjs);
-    const newPrdAtts = this.extractPrdAtts(orderedArTpObjs);
-
-    this.setState({
-      activeKey: 0,
-      template,
-      fileDescription: file_description,
-      fileName: this.initFileName(template),
-      imgFormat: img_format,
-      checkedAllSplSettings: false,
-      checkedAllRxnSettings: false,
-      checkedAllSiRxnSettings: false,
-      checkedAllConfigs: false,
-      splSettings:
-        [
-          { text: 'diagram', checked: ss.diagram },
-          { text: 'collection', checked: ss.collection },
-          { text: 'analyses', checked: ss.analyses },
-          { text: 'reaction description', checked: ss.reaction_description },
-          { text: 'literature', checked: ss.literature },
-        ],
-      rxnSettings:
-        [
-          { text: 'diagram', checked: rs.diagram },
-          { text: 'material', checked: rs.material },
-          { text: 'description', checked: rs.description },
-          { text: 'purification', checked: rs.purification },
-          { text: 'dangerous products', checked: this.boolOrUdfTrue(rs.dangerous_products) },
-          { text: 'tlc', checked: rs.tlc },
-          { text: 'observation', checked: rs.observation },
-          { text: 'analysis', checked: rs.analysis },
-          { text: 'literature', checked: rs.literature },
-        ],
-      siRxnSettings:
-        [
-          { checked: siRs.Name, text: 'Name' },
-          { checked: siRs.CAS, text: 'CAS' },
-          { checked: siRs.Formula, text: 'Formula' },
-          { checked: siRs.Smiles, text: 'Smiles' },
-          { checked: siRs.InChI, text: 'InChI' },
-          { checked: siRs['Molecular Mass'], text: 'Molecular Mass' },
-          { checked: siRs['Exact Mass'], text: 'Exact Mass' },
-          { checked: siRs.EA, text: 'EA' },
-        ],
-      configs:
-        [
-          { text: 'Page Break', checked: configs.page_break },
-          { text: 'Show all chemicals in schemes (unchecked to show products only)', checked: configs.page_break },
-        ],
-      defaultObjTags,
-      selectedObjTags: { sampleIds: [], reactionIds: [] },
-      selectedObjs: orderedArTpObjs,
-      prdAtts: newPrdAtts,
-      selMolSerials: molSerials,
-    });
-  }
-
-  boolOrUdfTrue(inp) {
-    if (inp === undefined) {
-      return true;
-    }
-    return inp;
-  }
-
-  hadnleRemove(target) {
-    let dTags = this.defaultObjTags;
-    let sTags = this.selectedObjTags;
-    const currentObjs = this.selectedObjs;
-    if (target.type === 'sample') {
-      const tmpSDTags = dTags.sampleIds.filter(e => e !== target.id);
-      const tmpSSTags = sTags.sampleIds.filter(e => e !== target.id);
-      dTags = {
-        sampleIds: [...tmpSDTags, ...tmpSSTags],
-        reactionIds: [...dTags.reactionIds, ...sTags.reactionIds]
-      };
-    } else if (target.type === 'reaction') {
-      const tmpRDTags = dTags.reactionIds.filter(e => e !== target.id);
-      const tmpRSTags = sTags.reactionIds.filter(e => e !== target.id);
-      dTags = {
-        sampleIds: [...dTags.sampleIds, ...sTags.sampleIds],
-        reactionIds: [...tmpRDTags, ...tmpRSTags]
-      };
-    }
-    dTags = { sampleIds: Array.from(new Set(dTags.sampleIds)), reactionIds: Array.from(new Set(dTags.reactionIds)) };
-    sTags = { sampleIds: [], reactionIds: [] };
-    const newObjs = UpdateSelectedObjs(sTags, currentObjs, dTags, currentObjs);
-    const finalObjs = this.orderObjsForTemplate(this.template, newObjs);
-    // const molSerials = this.updMolSerials(finalObjs);
-    const newPrdAtts = this.extractPrdAtts(finalObjs);
-
-    this.setState({
-      defaultObjTags: dTags,
-      selectedObjTags: sTags,
-      selectedObjs: finalObjs,
-      prdAtts: newPrdAtts,
-    });
-  }
-
-  hadnleReset(user) {
-    const { initials } = user || {};
-    this.setState({
-      activeKey: 0,
-      template: 'standard',
-      fileDescription: '',
-      fileName: this.initFileName('standard', initials),
-      imgFormat: 'png',
-      checkedAllSplSettings: true,
-      checkedAllRxnSettings: true,
-      checkedAllSiRxnSettings: true,
-      checkedAllConfigs: true,
-      splSettings:
-        [
-          { text: 'diagram', checked: true },
-          { text: 'collection', checked: true },
-          { text: 'analyses', checked: true },
-          { text: 'reaction description', checked: true },
-          { text: 'literature', checked: true },
-        ],
-      rxnSettings:
-        [
-          { text: 'diagram', checked: true },
-          { text: 'material', checked: true },
-          { text: 'description', checked: true },
-          { text: 'purification', checked: true },
-          { text: 'dangerous products', checked: true },
-          { text: 'tlc', checked: true },
-          { text: 'observation', checked: true },
-          { text: 'analysis', checked: true },
-          { text: 'literature', checked: true },
-        ],
-      siRxnSettings:
-        [
-          { checked: true, text: 'Name' },
-          { checked: true, text: 'CAS' },
-          { checked: true, text: 'Formula' },
-          { checked: true, text: 'Smiles' },
-          { checked: true, text: 'InChI' },
-          { checked: true, text: 'Molecular Mass' },
-          { checked: true, text: 'Exact Mass' },
-          { checked: true, text: 'EA' },
-        ],
-      configs:
-        [
-          { text: 'Page Break', checked: true },
-          { text: 'Show all chemicals in schemes (unchecked to show products only)', checked: true },
-        ],
-      defaultObjTags: { sampleIds: [], reactionIds: [] },
-      selectedObjTags: { sampleIds: [], reactionIds: [] },
-      selectedObjs: [],
-      selMolSerials: [],
-      prdAtts: [],
-      attThumbNails: [],
-    });
-  }
-
-  handleDelete(deletedId) {
-    const newArchives = this.archives.map(a => (
-      a.id !== deletedId ? a : null
-    )).filter(r => r != null);
-
-    this.setState({ archives: newArchives });
-  }
-
-  updMolSerials(objs, template) {
-    const currentTemplate = template || this.template;
-    if (currentTemplate === 'standard') return [];
-    if (objs.length === 0) return this.selMolSerials;
-
-    return this.extractMolSerials(objs);
-  }
-
-  extractMolSerials(objs) {
-    const oldSelMolSerials = this.selMolSerials;
-    const newSelMols = this.msMolFromSelected(objs);
-
-    const newSelMolSerials = newSelMols.map((newMol) => {
-      const unchangedMolSerial = oldSelMolSerials.find(osm => (
-        osm && osm.mol.id === newMol.id
-      ));
-      return unchangedMolSerial || { mol: newMol, value: null };
-    });
-
-    if (newSelMolSerials.length === 0) return this.selMolSerials;
-
-    return newSelMolSerials;
-  }
-
-  nonGpRxns(objs) {
-    return objs.map((obj) => {
-      if (obj.type === 'reaction' && obj.role !== 'gp') {
-        return obj;
-      }
-      return null;
-    }).filter(r => r !== null);
-  }
-
-  msMolFromSelected(objs) {
-    const rxns = this.nonGpRxns(objs);
-    let msMols = [];
-
-    rxns.forEach((o) => {
-      const samples = [...o.starting_materials, ...o.reactants, ...o.products];
-      samples.forEach((s) => {
-        msMols = [...msMols, this.createMSMol(s.molecule)];
-      });
-    });
-    msMols = ArrayUtils.uniqSortById(msMols);
-    return msMols;
-  }
-
-  createMSMol(molecule) {
-    return {
-      id: molecule.id,
-      svgPath: molecule.svgPath,
-      sumFormula: molecule.sum_formular,
-      iupacName: molecule.iupac_name,
-    };
-  }
-
-  handleUpdMSVal({ moleculeId, value }) {
-    const newSelMolSerials = this.selMolSerials.map((ms) => {
-      if (ms.mol.id === moleculeId) {
-        return Object.assign({}, ms, { value });
-      }
-      return ms;
-    });
-    this.setState({ selMolSerials: newSelMolSerials });
-  }
-
-  extractPrdAtts(selectedObjs) {
-    if (selectedObjs.length > 0) {
-      const prdAtts = selectedObjs.map((obj) => {
-        if (obj.role !== 'gp') {
-          return this.extractPrdsAtts(obj);
-        }
-        return null;
-      }).filter(r => r !== null);
-      return [].concat(...prdAtts).filter(r => r.atts.length !== 0);
-    }
-    return [];
-  }
-
-  extractPrdsAtts(obj) {
-    if (obj.type === 'reaction') {
-      return obj.products.map((prd) => {
-        const prdId = prd.id;
-        const { iupac_name, sum_formular, id } = prd.molecule;
-        const atts = this.extractAtts(prd);
-        const showedName = prd.showedName();
-        return Object.assign(
-          {}, { atts, prdId, iupac_name, sum_formular, molId: id, showedName },
-        );
-      });
-    }
-    return null;
-  }
-
-  extractAtts(prd) {
-    const atts = prd.container.children[0].children.map((container) => {
-      const isReport = container.extended_metadata.report;
-      if (!isReport) return null;
-      const kind = container.extended_metadata.kind;
-      return container.children.map(analysis => (
-        analysis.attachments.map(att => (
-          Object.assign({}, att, { kind })
-        ))
-      ));
-    });
-    return _.flattenDeep(atts).filter(r => r !== null);
-  }
-
-  handleUpdateThumbNails(result) {
-    const thumbs = result.thumbnails;
-    this.setState({ attThumbNails: thumbs });
-  }
-
-  handleUpdateDefaultTags(defaultTags) {
-    this.setState({ defaultTags });
-    // TODO: update selectedObjs?
-  }
-
-  handleLoadRreview({ objs }) {
-    if (!objs) return null;
-    const { samples, reactions } = objs;
-    let previewObjs = OrderPreviewObjs(
-      this.previewObjs, this.selectedObjs, [...samples, ...reactions],
-    );
-    previewObjs = this.orderObjsForTemplate(this.template, previewObjs);
-    const molSerials = this.updMolSerials(previewObjs);
-    const newPrdAtts = this.extractPrdAtts(previewObjs);
-    this.setState({
-      previewObjs,
-      prdAtts: newPrdAtts,
-      selMolSerials: molSerials,
-    });
-    return null;
-  }
-
-  handleFetchTemplate(result) {
-    const templates = result.templates;
-    this.setState({ templateOpts: templates, template: templates[0] });
-  }
-}
-
-export default alt.createStore(ReportStore, 'ReportStore');
diff --git a/app/packs/src/components/stores/ReviewStore.js b/app/packs/src/components/stores/ReviewStore.js
deleted file mode 100644
index 6ceb589b1..000000000
--- a/app/packs/src/components/stores/ReviewStore.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import Aviator from 'aviator';
-import alt from '../alt';
-import ReviewActions from '../actions/ReviewActions';
-import PublicActions from '../actions/PublicActions';
-import EmbargoActions from '../actions/EmbargoActions';
-
-class ReviewStore {
-  constructor() {
-    this.showReviewModal = false;
-    this.reviewData = {};
-    this.btnAction = '';
-    //this.bundles = [];
-    this.selectType;
-    this.selectState;
-    this.searchType;
-    this.searchValue;
-    this.currentElement = null;
-    this.review = {};
-    this.review_info = {}
-
-    this.bindListeners({
-      handleReviewModal: ReviewActions.handleReviewModal,
-      handleDisplayReviewReaction: ReviewActions.displayReviewReaction,
-      handleDisplayReviewSample: ReviewActions.displayReviewSample,
-      handelReviewPublish: ReviewActions.reviewPublish,
-      handleGetElements: ReviewActions.getElements,
-      handelUpdateComment: ReviewActions.updateComment,
-      handleUnitsSystem: ReviewActions.fetchUnitsSystem,
-      handleReviewUpdate: ReviewActions.updateReview,
-      handleFetchSample: ReviewActions.fetchSample,
-      handleClose: PublicActions.close,
-      handleRefreshEmbargoBundles: EmbargoActions.getEmbargoBundle,
-      handleEmbargoAssign: EmbargoActions.assignEmbargo,
-    });
-  }
-
-  handleClose({ deleteEl }) {
-    this.setState({
-      currentElement: null
-    });
-  }
-
-  handleEmbargoAssign(result) {
-    if (result.error) {
-      alert(result.error);
-    } else {
-      alert(result.message);
-      // refresh embargo list
-      EmbargoActions.getEmbargoBundle();
-      // refresh element list
-      ReviewActions.getElements(
-        this.selectType, this.selectState, this.searchType,
-        this.searchValue, this.page, this.perPage
-      );
-    }
-  }
-
-  handleRefreshEmbargoBundles(result) {
-    const cols = result.repository;
-    const { current_user } = result;
-    const bundles = [];
-    if (cols && cols.length > 0) {
-      cols.forEach((col) => {
-        bundles.push(col);
-      });
-    }
-    this.setState({ bundles, current_user });
-  }
-
-  handleUnitsSystem(result) {
-    this.setState({ unitsSystem: result });
-  }
-
-
-  handleReviewUpdate(review) {
-    this.setState({ review: review });
-  }
-
-  handleFetchSample(data) {
-    if (data.sample && data?.review_info?.review_level === 0) {
-    } else {
-      this.setState({
-        currentElement: data || {},
-        element: data || {},
-        elementType: 'sample',
-        review_info: data?.review_info || {},
-        review: data?.publication?.review || {},
-      });
-    }
-  }
-
-
-  handleGetElements(results) {
-    const {
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue
-    } = results;
-    this.setState({
-      elements, page, perPage, pages, selectType, selectState, searchType, searchValue, showReviewModal: false
-    });
-  }
-
-  handleReviewModal(result) {
-    this.setState({ showReviewModal: result.show, btnAction: result.action });
-  }
-
-  handelUpdateComment(result) {
-    this.setState({ review: result.review, showReviewModal: false });
-  }
-
-  handelReviewPublish(results) {
-    // const { history, checklist, reviewComments } = results.review;
-    this.setState({ review: results.review, showReviewModal: false, review_info: results.review_info });
-    ReviewActions.getElements(this.selectType || 'All', this.selectState || 'pending', this.searchType || 'All', this.searchValue || '', this.page, this.perPage);
-  }
-
-  handleDisplayReviewReaction(result) {
-    const publication = (result.element && result.element.reaction && result.element.reaction.publication) || {};
-    if (result.element && result.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({
-        guestPage: 'review',
-        elementType: 'reaction',
-        queryId: result?.id || 0,
-        reaction: result?.element?.reaction || {},
-        currentElement: result?.element || {},
-        showReviewModal: false,
-        review: publication?.review || {},
-        review_info: result?.element?.review_info || {},
-      });
-      Aviator.navigate(`/review/review_reaction/${result.id}`, { silent: true });
-    }
-  }
-
-  handleDisplayReviewSample(result) {
-    const publication = (result.element && result.element.publication) || {};
-
-    if (result.element && result.element?.review_info?.review_level === 0) {
-      Aviator.navigate('/home');
-    } else {
-      this.setState({
-        guestPage: 'review',
-        elementType: 'sample',
-        queryId: result.id || 0,
-        currentElement: result?.element || {},
-        showReviewModal: false,
-        review: publication?.review || {},
-        review_info: result?.element?.review_info || {},
-      });
-      Aviator.navigate(`/review/review_sample/${result.id}`, { silent: true });
-    }
-  }
-
-
-};
-
-
-export default alt.createStore(ReviewStore, 'ReviewStore');
diff --git a/app/packs/src/components/stores/SpectraStore.js b/app/packs/src/components/stores/SpectraStore.js
deleted file mode 100644
index f8e2e6130..000000000
--- a/app/packs/src/components/stores/SpectraStore.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import base64 from 'base-64';
-import { FN } from '@complat/react-spectra-editor';
-
-import alt from '../alt';
-import SpectraActions from '../actions/SpectraActions';
-
-const defaultPred = {
-  outline: {},
-  output: { result: [] },
-};
-
-class SpectraStore {
-  constructor() {
-    this.spcMetas = [];
-    this.spcInfos = [];
-    this.spcIdx = 0;
-    this.arrSpcIdx = [];
-    this.showModal = false;
-    this.fetched = false;
-    this.writing = false;
-    this.others = [];
-    this.showModalNMRDisplayer = false;
-
-    this.bindListeners({
-      handleToggleModal: SpectraActions.ToggleModal,
-      handleLoadSpectra: SpectraActions.LoadSpectra,
-      handleSaveToFile: SpectraActions.SaveToFile,
-      handleRegenerate: SpectraActions.Regenerate,
-      handleInferSpectrum: SpectraActions.InferSpectrum,
-      handleInferRunning: SpectraActions.InferRunning,
-      handleWriteStart: SpectraActions.WriteStart,
-      handleWriteStop: SpectraActions.WriteStop,
-      handleSelectIdx: SpectraActions.SelectIdx,
-      handleAddOthers: SpectraActions.AddOthers,
-      handleRegenerateEdited: SpectraActions.RegenerateEdited,
-      handleToggleModalNMRDisplayer: SpectraActions.ToggleModalNMRDisplayer,
-      handleLoadSpectraForNMRDisplayer: SpectraActions.LoadSpectraForNMRDisplayer,
-    });
-  }
-
-  decodeSpectrum(target) { // eslint-disable-line class-methods-use-this
-    const { file, predictions, id } = target;
-    if (!file) return null;
-    let spectrum = { predictions: defaultPred, idx: id };
-    if (predictions.outline && predictions.outline.code) {
-      spectrum = Object.assign({}, spectrum, { predictions });
-    }
-
-    try {
-      const raw = base64.decode(file);
-      const jcamp = FN.ExtractJcamp(raw);
-      if (!jcamp.spectra) return null;
-      spectrum = Object.assign({}, spectrum, { jcamp });
-    } catch (err) {
-      console.log('stores/SpectraStore.js: decodeSpectrum error!');
-      return null;
-    }
-
-    return spectrum; // spectrum = { predictions: {…}, jcamp: {…} }
-  }
-
-  decodeSpectra(fetchedFiles = {}) {
-    const { files } = fetchedFiles;
-    if (!files) return [];
-    const returnFiles = files.map(f => this.decodeSpectrum(f)).filter(r => r !== null);
-    if (returnFiles === null || returnFiles === undefined) {
-      return [];
-    }
-    return returnFiles.sort(function(a, b) {
-      return b.idx - a.idx;
-    });
-  }
-
-  handleToggleModal() {
-    this.setState({
-      spcMetas: [],
-      spcInfos: [],
-      showModal: !this.showModal,
-      fetched: false,
-      others: [],
-    });
-  }
-
-  handleLoadSpectra({ fetchedFiles, spcInfos }) {
-    const spcMetas = this.decodeSpectra(fetchedFiles);
-    let newArrSpcIdx = spcMetas.map(spci => (
-      spci.idx
-    )).filter(r => r !== null);
-    if (newArrSpcIdx.length <= 1) {
-      newArrSpcIdx = [];
-    }
-    this.setState({
-      spcInfos,
-      spcMetas,
-      fetched: true,
-      spcIdx: (spcMetas[0].idx || 0),
-      others: [],
-      arrSpcIdx: newArrSpcIdx,
-    });
-  }
-
-  handleSaveToFile({ fetchedFiles, spcInfo = defaultPred }) {
-    const fetchedSpcMetas = this.decodeSpectra(fetchedFiles);
-    const fsm = fetchedSpcMetas.length > 0 ? fetchedSpcMetas[0] : null;
-    if (!fsm) return;
-    const fetchedIdx = fsm.idx;
-    const prevIdx = spcInfo.idx;
-    const fsi = Object.assign({}, spcInfo, { idx: fetchedIdx }); //  shortcut
-    const { spcInfos, spcMetas, arrSpcIdx } = this;
-    const newSpcInfos = spcInfos.map(si => (
-      si.idx === prevIdx ? fsi : si
-    )).filter(r => r !== null);
-    const newSpcMetas = spcMetas.map(sm => (
-      sm.idx === prevIdx ? fsm : sm
-    )).filter(r => r !== null);
-    const newArrSpcIdx = arrSpcIdx.map(spci => (
-      spci === prevIdx ? fetchedIdx : spci
-    )).filter(r => r !== null);
-    this.setState({
-      spcInfos: newSpcInfos,
-      spcMetas: newSpcMetas,
-      fetched: true,
-      spcIdx: fetchedIdx,
-      others: [],
-      arrSpcIdx: newArrSpcIdx,
-    });
-  }
-
-  handleRegenerate() {
-    // no further process needed.
-  }
-
-  handleRegenerateEdited() {
-    // no further process needed.
-  }
-
-  handleWriteStart(payload) {
-    this.replacePredictions(defaultPred);
-    this.setState({
-      writing: payload,
-      others: [],
-    });
-  }
-
-  handleWriteStop() {
-    this.setState({
-      writing: false,
-      others: [],
-    });
-  }
-
-  handleInferRunning() {
-    const targetPreds = Object.assign({}, defaultPred, { running: true });
-    this.replacePredictions(targetPreds);
-  }
-
-  handleInferSpectrum(props) {
-    this.handleSaveToFile(props);
-    const preds = props.fetchedFiles.predict || defaultPred;
-    const targetPreds = Object.assign({}, preds, { refreshed: true });
-    this.replacePredictions(targetPreds);
-  }
-
-  handleSelectIdx(payload) {
-    const { spcIdx, arrSpcIdx } = payload;
-    this.setState({ spcIdx, arrSpcIdx, others: [] });
-  }
-
-  replacePredictions(predictions) {
-    const { spcIdx } = this;
-    const spcMetas = this.spcMetas.map(x => (
-      x.idx === spcIdx
-        ? Object.assign({}, x, { predictions })
-        : x
-    ));
-    this.setState({ spcMetas, others: [] });
-  }
-
-  handleAddOthers(rsp) {
-    const origData = base64.decode(rsp.jcamp);
-    const jcampData = FN.ExtractJcamp(origData);
-    this.setState({ others: [jcampData] });
-  }
-
-  handleToggleModalNMRDisplayer() {
-    this.setState({
-      spcMetas: [],
-      spcInfos: [],
-      showModalNMRDisplayer: !this.showModalNMRDisplayer,
-      fetched: false,
-      others: [],
-    })
-  }
-
-  handleLoadSpectraForNMRDisplayer({ fetchedFiles, spcInfos }) {
-    this.setState({
-      spcInfos,
-      fetchedFiles,
-      fetched: true,
-    });
-  }
-
-
-}
-
-export default alt.createStore(SpectraStore, 'SpectraStore');
diff --git a/app/packs/src/components/stores/SuggestionStore.js b/app/packs/src/components/stores/SuggestionStore.js
deleted file mode 100644
index bd0dec25e..000000000
--- a/app/packs/src/components/stores/SuggestionStore.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import SuggestionActions from 'src/stores/alt/actions/SuggestionActions';
-
-class SuggestionStore {
-  constructor() {
-    this.state = {
-      suggestions: []
-    };
-
-    this.bindListeners({
-      handleFetchSuggestions: SuggestionActions.fetchSuggestions
-    })
-  }
-
-  handleFetchSuggestions(suggestions) {
-    this.state.suggestions = suggestions;
-  }
-}
-
-export default alt.createStore(SuggestionStore, 'SuggestionStore');
diff --git a/app/packs/src/components/stores/TextTemplateStore.js b/app/packs/src/components/stores/TextTemplateStore.js
deleted file mode 100644
index 82f87e5b3..000000000
--- a/app/packs/src/components/stores/TextTemplateStore.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Map, OrderedSet, fromJS } from 'immutable';
-
-import alt from '../alt';
-
-import TextTemplateActions from '../actions/TextTemplateActions';
-
-class TextTemplateStore {
-  constructor() {
-    this.state = {
-      sample: Map(),
-      reaction: Map(),
-      screen: Map(),
-      wellplate: Map(),
-      researchPlan: Map(),
-      reactionDescription: Map(),
-      predefinedTemplateNames: OrderedSet(),
-      fetchedPredefinedTemplates: Map()
-    };
-
-    this.bindListeners({
-      handleFetchTextTemplates: TextTemplateActions.fetchTextTemplates,
-      handleFetchPredefinedTemplateNames: TextTemplateActions.fetchPredefinedTemplateNames,
-      handleUpdateTextTemplates: TextTemplateActions.updateTextTemplates,
-      handleFetchTemplateByNames: TextTemplateActions.fetchPredefinedTemplateByNames,
-    });
-  }
-
-  handleFetchTextTemplates(templates) {
-    Object.keys(templates).forEach((templateType) => {
-      const templateVal = templates[templateType];
-      this.state[templateType] = fromJS(templateVal);
-    });
-  }
-
-  handleUpdateTextTemplates(templates) {
-    Object.keys(templates).forEach((templateType) => {
-      const templateVal = templates[templateType];
-      this.state[templateType] = fromJS(templateVal);
-    });
-  }
-
-  handleFetchPredefinedTemplateNames(names) {
-    const { predefinedTemplateNames } = this.state;
-    this.state.predefinedTemplateNames = predefinedTemplateNames.concat(OrderedSet(names));
-  }
-
-  handleFetchTemplateByNames(templates) {
-    let fetchedTemplates = this.state.fetchedPredefinedTemplates;
-    templates.forEach((template) => {
-      fetchedTemplates = fetchedTemplates.set(template.name, fromJS(template));
-    });
-
-    this.state.fetchedPredefinedTemplates = fetchedTemplates;
-  }
-}
-
-export default alt.createStore(TextTemplateStore, 'TextTemplateStore');
diff --git a/app/packs/src/components/stores/UIStore.js b/app/packs/src/components/stores/UIStore.js
deleted file mode 100644
index fd25308b4..000000000
--- a/app/packs/src/components/stores/UIStore.js
+++ /dev/null
@@ -1,428 +0,0 @@
-import { List, fromJS } from 'immutable';
-import alt from 'src/stores/alt/alt';
-
-import UIActions from 'src/stores/alt/actions/UIActions';
-import ElementActions from 'src/stores/alt/actions/ElementActions';
-import ElementStore from 'src/stores/alt/stores/ElementStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import ArrayUtils from 'src/utilities/ArrayUtils';
-import PublicActions from 'src/stores/alt/repo/actions/PublicActions';
-
-class UIStore {
-  constructor() {
-    this.state = {
-      sample: {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-        activeTab: 0,
-        activeAnalysis: 0,
-      },
-      reaction: {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-        activeTab: 0,
-        activeAnalysis: 0,
-      },
-      wellplate: {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-        activeTab: 0,
-      },
-      screen: {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-        activeTab: 0,
-      },
-      research_plan: {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-      },
-      showPreviews: true,
-      showAdvancedSearch: false,
-      filterCreatedAt: true,
-      fromDate: null,
-      toDate: null,
-      productOnly: false,
-      number_of_results: 15,
-      currentCollection: null,
-      currentSearchSelection: null,
-      showCollectionManagement: false,
-      showDeviceManagement: false,
-      isSync: false,
-      showModal: false,
-      modalParams: {},
-      hasChemSpectra: false,
-      hasNmriumWrapper: false,
-      matrices: {}
-    };
-
-    this.bindListeners({
-      handleInitialize: UIActions.initialize,
-      handleSelectTab: UIActions.selectTab,
-      handleSelectActiveAnalysis: UIActions.selectActiveAnalysis,
-
-      handleSelectCollection: UIActions.selectCollection,
-      handleSelectSyncCollection: UIActions.selectSyncCollection,
-      handleCheckAllElements: UIActions.checkAllElements,
-      handleToggleShowPreviews: UIActions.toggleShowPreviews,
-      handleToggleAdvancedSearch: UIActions.toggleAdvancedSearch,
-      handleCheckElement: UIActions.checkElement,
-      handleUncheckElement: UIActions.uncheckElement,
-      handleUncheckAllElements: UIActions.uncheckAllElements,
-      handleDeselectAllElementsOfType: UIActions.deselectAllElementsOfType,
-      handleSelectElement: UIActions.selectElement,
-      handleSetPagination: UIActions.setPagination,
-      handleDeselectAllElements: UIActions.deselectAllElements,
-      handleSetSearchSelection: UIActions.setSearchSelection,
-      handleSelectCollectionWithoutUpdating:
-        UIActions.selectCollectionWithoutUpdating,
-      handleClearSearchSelection: UIActions.clearSearchSelection,
-      handleShowCollectionManagement: UIActions.showCollectionManagement,
-      handleShowElements: UIActions.showElements,
-      handleToggleCollectionManagement: UIActions.toggleCollectionManagement,
-      handleUncheckWholeSelection: UIActions.uncheckWholeSelection,
-      handleChangeNumberOfResultsShown: UIActions.changeNumberOfResultsShown,
-      handleShowDeviceManagement: UIActions.showDeviceManagement,
-      handleCloseDeviceManagement: UIActions.closeDeviceManagement,
-      handleShowModalChange: UIActions.updateModalProps,
-      handleHideModal: UIActions.hideModal,
-      handleSetFilterCreatedAt: UIActions.setFilterCreatedAt,
-      handleSetFromDate: UIActions.setFromDate,
-      handleSetToDate: UIActions.setToDate,
-      handleSetProductOnly: UIActions.setProductOnly,
-      handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
-      handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
-      handleSelectPublicCollection: PublicActions.selectPublicCollection,
-      handleRerenderGenericWorkflow: UIActions.rerenderGenericWorkflow,
-      handleShowGenericWorkflowModal: UIActions.showGenericWorkflowModal,
-
-    });
-  }
-
-  handleInitialize(result) {
-    this.setState(result);
-    const { klasses } = result;
-    klasses?.forEach((klass) => {
-      this.state[`${klass}`] = {
-        checkedAll: false,
-        checkedIds: List(),
-        uncheckedIds: List(),
-        currentId: null,
-        page: 1,
-        activeTab: 0,
-      };
-    });
-  }
-
-  handleRerenderGenericWorkflow(params) {
-    this.state.propGenericWorkflow = params;
-    if (params.toggle) { this.state.showGenericWorkflow = !this.state.showGenericWorkflow; }
-  }
-
-  handleShowGenericWorkflowModal(show) {
-    this.state.showGenericWorkflow = show;
-  }
-
-  handleToggleCollectionManagement() {
-    this.state.showCollectionManagement = !this.state.showCollectionManagement;
-  }
-
-  handleShowCollectionManagement() {
-    this.state.showCollectionManagement = true;
-  }
-
-  handleShowDeviceManagement() {
-    this.state.showDeviceManagement = true
-  }
-
-  handleCloseDeviceManagement() {
-    this.state.showDeviceManagement = false
-  }
-
-  handleShowElements() {
-    this.state.showCollectionManagement = false;
-  }
-
-  handleSelectTab(params = {}) {
-    let type = params.type || "sample"
-    let tabKey = params.tabKey || 0
-    this.state[type].activeTab = tabKey;
-  }
-
-  handleSelectActiveAnalysis(index) {
-    this.state.sample.activeAnalysis = index;
-  }
-
-  handleCheckAllElements(params) {
-    this.waitFor(ElementStore.dispatchToken);
-
-    let { type, range } = params;
-    let { elements } = ElementStore.getState();
-
-    if (range == 'all') {
-      if (this.state.currentSearchSelection && elements[type + "s"].ids) {
-        let ids = elements[type + "s"].ids
-        this.state[type].checkedAll = false
-        this.state[type].checkedIds = List(ids)
-        this.state[type].uncheckedIds = List()
-      } else {
-        this.state[type].checkedAll = true;
-        this.state[type].checkedIds = List();
-        this.state[type].uncheckedIds = List();
-      }
-    } else if (range == 'current') {
-      let curPageIds = elements[type + "s"].elements.reduce(
-        function (a, b) { return a.concat(b); }, []
-      ).map((e) => { return e.id });
-      this.state[type].checkedAll = false;
-      this.state[type].uncheckedIds = List();
-      let checked = this.state[type].checkedIds
-      // Remove duplicates, conserve sorting
-      if (checked.size > 0) {
-        let checkedMap = checked.reduce(function (mp, e) { mp[e] = 1; return mp }, {})
-        for (var i = 0; i < curPageIds.length; i++) {
-          if (!checkedMap[curPageIds[i]]) {
-            checked = checked.push(curPageIds[i]);
-          }
-        }
-        this.state[type].checkedIds = checked;
-      } else {
-        this.state[type].checkedIds = List(curPageIds);
-      }
-    } else {
-      this.handleUncheckAllElements(params)
-    }
-  }
-
-  handleToggleShowPreviews(show) {
-    if (show == null) show = !this.state.showPreviews;
-    this.state.showPreviews = show;
-  }
-
-  handleToggleAdvancedSearch(show) {
-    if (show == null) show = !this.state.showAdvancedSearch
-    this.state.showAdvancedSearch = show;
-  }
-
-  handleUncheckAllElements(params) {
-    let { type, range } = params;
-
-    if (this.state[type]) {
-      this.state[type].checkedAll = false;
-      this.state[type].checkedIds = List();
-      this.state[type].uncheckedIds = List();
-    }
-  }
-
-  handleUncheckWholeSelection() {
-    this.handleUncheckAllElements({ type: 'sample', range: 'all' });
-    this.handleUncheckAllElements({ type: 'screen', range: 'all' });
-    this.handleUncheckAllElements({ type: 'reaction', range: 'all' });
-    this.handleUncheckAllElements({ type: 'wellplate', range: 'all' });
-    this.handleUncheckAllElements({ type: 'research_plan', range: 'all' });
-    this.state.klasses?.forEach((klass) => { this.handleUncheckAllElements({ type: klass, range: 'all' }); });
-  }
-
-  handleCheckElement(element) {
-    let type = element.type;
-
-    if (this.state[type].checkedAll) {
-      this.state[type].uncheckedIds =
-        ArrayUtils.removeFromListByValue(this.state[type].uncheckedIds,
-          element.id);
-    }
-    else {
-      this.state[type].checkedIds =
-        ArrayUtils.pushUniq(this.state[type].checkedIds, element.id);
-    }
-
-  }
-
-  handleUncheckElement(element) {
-    let type = element.type;
-
-    if (this.state[type].checkedAll) {
-      this.state[type].uncheckedIds =
-        ArrayUtils.pushUniq(this.state[type].uncheckedIds, element.id);
-    }
-    else {
-      this.state[type].checkedIds =
-        ArrayUtils.removeFromListByValue(this.state[type].checkedIds,
-          element.id);
-    }
-  }
-
-  handleDeselectAllElementsOfType(type) {
-    this.state[type].currentId = null;
-  }
-
-  handleDeselectAllElements() {
-    this.state.sample.currentId = null;
-    this.state.reaction.currentId = null;
-    this.state.wellplate.currentId = null;
-    this.state.research_plan.currentId = null;
-  }
-
-  handleSelectElement(element) {
-    this.state[element.type].currentId = element.id;
-  }
-
-  handleSelectCollection(collection, hasChanged = false) {
-    const state = this.state;
-    const isSync = collection && collection.is_sync_to_me ? true : false;
-    const { filterCreatedAt, fromDate, toDate, productOnly } = state;
-
-    if (!hasChanged) {
-      hasChanged = !state.currentCollection;
-      hasChanged = hasChanged || state.currentCollection.id != collection.id;
-      hasChanged = hasChanged || isSync != state.isSync;
-      hasChanged = hasChanged || state.currentSearchSelection != null;
-    }
-
-    if (collection && collection['clearSearch']){
-      this.handleClearSearchSelection();
-      hasChanged = true;
-      collection['clearSearch'] = undefined;
-    }
-
-    if(hasChanged && collection && !collection.noFetch) {
-      this.state.isSync = isSync;
-      this.state.currentCollection = collection;
-      const per_page = state.number_of_results;
-      const params = { per_page, filterCreatedAt, fromDate, toDate, productOnly };
-
-      const { profile } = UserStore.getState();
-      if (profile && profile.data && profile.data.layout) {
-        const { layout } = profile.data;
-        if (layout.sample && layout.sample > 0) {
-          ElementActions.fetchSamplesByCollectionId(
-            collection.id, Object.assign(params, { page: state.sample.page }),
-            isSync, ElementStore.getState().moleculeSort
-          );
-        }
-        if (layout.reaction && layout.reaction > 0) {
-          ElementActions.fetchReactionsByCollectionId(
-            collection.id, Object.assign(params, { page: state.reaction.page }),
-            isSync
-          );
-        }
-        if (layout.wellplate && layout.wellplate > 0) {
-          ElementActions.fetchWellplatesByCollectionId(
-            collection.id, Object.assign(params, { page: state.wellplate.page }),
-            isSync
-          );
-        }
-        if (layout.screen && layout.screen > 0) {
-          ElementActions.fetchScreensByCollectionId(
-            collection.id, Object.assign(params, { page: state.screen.page }),
-            isSync
-          );
-        }
-        if (!isSync && layout.research_plan && layout.research_plan > 0) {
-          ElementActions.fetchResearchPlansByCollectionId(
-            collection.id,
-            Object.assign(params, { page: state.research_plan.page }),
-          );
-        }
-
-        Object.keys(layout).filter(l => !['sample', 'reaction', 'screen', 'wellplate', 'research_plan'].includes(l)).forEach((key) => {
-          if (typeof layout[key] !== 'undefined' && layout[key] > 0) {
-            const page = state[key] ? state[key].page : 1;
-            ElementActions.fetchGenericElsByCollectionId(
-              collection.id,
-              Object.assign(params, { page, name: key }),
-              isSync,
-              key
-            );
-          }
-        });
-      }
-    }
-  }
-
-  handleSelectSyncCollection(collection) {
-    this.handleSelectCollection(collection)
-  }
-
-  // FIXME this method is also defined in ElementStore
-  handleSetPagination(pagination) {
-    let { type, page } = pagination;
-    this.state[type].page = page;
-  }
-
-  handleSetSearchSelection(selection) {
-    this.state.currentSearchSelection = selection;
-  }
-
-  handleSelectCollectionWithoutUpdating(collection) {
-    this.state.currentCollection = collection;
-    this.state.isSync = collection.is_sync_to_me ? true : false;
-  }
-
-  handleClearSearchSelection() {
-    this.state.currentSearchSelection = null;
-    this.state.showAdvancedSearch = false;
-  }
-
-  handleChangeNumberOfResultsShown(value) {
-    this.state.number_of_results = value;
-  }
-  handleShowModalChange(params) {
-    this.state.showModal = params.show ? true : false
-    this.state.modalParams = params
-  }
-
-  handleHideModal() {
-    this.state.showModal = false
-    this.state.modalParams = {
-      show: false,
-      title: "",
-      component: "",
-      action: null
-    }
-  }
-
-  handleSetFilterCreatedAt(filterCreatedAt) {
-    this.state.filterCreatedAt = filterCreatedAt;
-    if (this.state.fromDate != null || this.state.toDate != null) {
-      this.handleSelectCollection(this.state.currentCollection, true);
-    }
-  }
-
-  handleSetFromDate(fromDate) {
-    this.state.fromDate = fromDate;
-    this.handleSelectCollection(this.state.currentCollection, true);
-  }
-
-  handleSetToDate(toDate) {
-    this.state.toDate = toDate;
-    this.handleSelectCollection(this.state.currentCollection, true);
-  }
-
-  handleSetProductOnly(productOnly) {
-    this.state.productOnly = productOnly;
-    this.handleSelectCollection(this.state.currentCollection, true);
-  }
-
-  handleSelectPublicCollection(result) {
-    this.state.currentCollection = result;
-    this.state.isSync = result.is_sync;
-  }
-}
-
-export default alt.createStore(UIStore, 'UIStore');
diff --git a/app/packs/src/components/stores/UserStore.js b/app/packs/src/components/stores/UserStore.js
deleted file mode 100644
index efb3c317b..000000000
--- a/app/packs/src/components/stores/UserStore.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import alt from 'src/stores/alt/alt';
-import _ from 'lodash';
-import UserActions from 'src/stores/alt/actions/UserActions';
-
-class UserStore {
-  constructor() {
-    this.state = {
-      currentUser: null,
-      profile: null,
-      // TODO: currentTab and currentType should be in UIStore
-      currentTab: 0,
-      currentType: '',
-      devices: [],
-      rxnos: [],
-      chmos: [],
-      labels: [],
-      genericEls: [],
-      segmentKlasses: [],
-      dsKlasses: [],
-      matriceConfigs: [],
-      omniauthProviders: []
-    };
-
-    this.bindListeners({
-      handleFetchOlsRxno: UserActions.fetchOlsRxno,
-      handleFetchOlsChmo: UserActions.fetchOlsChmo,
-      handleFetchGenericEls: UserActions.fetchGenericEls,
-      handleFetchCurrentUser: UserActions.fetchCurrentUser,
-      handleFetchUserLabels: UserActions.fetchUserLabels,
-      handleFetchProfile: UserActions.fetchProfile,
-      handleFetchEditors: UserActions.fetchEditors,
-      handleSelectTab: UserActions.selectTab,
-      handleUpdateUserProfile: UserActions.updateUserProfile,
-      handleFetchNoVNCDevices: UserActions.fetchNoVNCDevices,
-      handleSegementKlasses: UserActions.fetchSegmentKlasses,
-      handleDatasetKlasses: UserActions.fetchDatasetKlasses,
-      handleOmniauthProviders: UserActions.fetchOmniauthProviders
-    });
-  }
-
-  handleFetchUserLabels(result) {
-    this.state.labels = result.labels;
-  }
-
-  handleFetchEditors(result) {
-    this.state.matriceConfigs = result.matrices;
-  }
-
-  handleFetchOlsRxno(result) {
-    this.state.rxnos = result.ols_terms;
-  }
-
-  handleFetchOlsChmo(result) {
-    this.state.chmos = result.ols_terms;
-  }
-
-  handleFetchGenericEls(result) {
-    this.state.genericEls = result.klass;
-  }
-
-  handleFetchCurrentUser(result) {
-    this.state.currentUser = result
- }
-
-  handleFetchProfile(result) {
-    this.state.profile = result;
-    const { layout } = this.state.profile.data;
-    if (this.state.currentType === '') {
-      const { currentTab } = this.state
-      const type = Object.keys(layout).filter((e) => {
-        return layout[e] === currentTab + 1
-      })[0]
-      this.state.currentType = type
-    }
-  }
-
-  handleUpdateUserProfile(result) {
-    if (this.state.profile && result) {
-      this.state.profile = result
-    }
-  }
-
-  handleSelectTab(tab) {
-    const { layout } = this.state.profile.data;
-    const type = Object.keys(layout).filter((e) => {
-      return layout[e] === tab + 1
-    })[0]
-
-    this.state.currentTab = tab
-    this.state.currentType = type
-  }
-
-  handleFetchNoVNCDevices(devices) {
-    if (devices) { this.state.devices = devices; }
-  }
-
-  handleSegementKlasses(result) {
-    this.state.segmentKlasses = result.klass;
-  }
-
-  handleDatasetKlasses(result) {
-    this.state.dsKlasses = result.klass;
-  }
-
-  handleOmniauthProviders(result) {
-    this.state.omniauthProviders = result.omniauth_providers;
-    this.state.extraRules = result.extra_rules;
-  }
-}
-
-export default alt.createStore(UserStore, 'UserStore');
diff --git a/app/packs/src/components/structure_editor/ChemDrawEditor.js b/app/packs/src/components/structure_editor/ChemDrawEditor.js
deleted file mode 100644
index 4a653c8ce..000000000
--- a/app/packs/src/components/structure_editor/ChemDrawEditor.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-undef */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import StructureEditor from '../models/StructureEditor';
-import loadScripts from './loadScripts';
-
-const LoadingModal = (props) => {
-  const { loading } = props;
-  return (
-    <Modal className="chemdraw-loading" animation show={loading}>
-      <img src="/images/chemdraw.png" alt="ChemDraw" title="ChemDraw" />
-      <div>Initializing...</div>
-      <i className="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true" />
-    </Modal>
-  );
-};
-
-LoadingModal.propTypes = { loading: PropTypes.bool };
-LoadingModal.defaultProps = { loading: false };
-
-class ChemDrawEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { loading: true };
-    this.cdAttached = this.cdAttached.bind(this);
-    this.cdFailed = this.cdFailed.bind(this);
-    this.loaded = this.loaded.bind(this);
-  }
-
-  componentDidMount() {
-    const { editor } = this.props;
-    const { extJs, id } = editor;
-    loadScripts({
-      es: extJs, id, cbError: () => loadError(id), cbLoaded: () => this.loaded()
-    });
-  }
-
-  cdAttached(cd) {
-    const { editor, molfile } = this.props;
-    editor.structureDef.getEditorFunction = () => cd;
-    if (molfile) {
-      editor.structureDef.molfile = molfile;
-    }
-    this.setState({ loading: false }, this.props.parent.setState({ editor }));
-  }
-
-  cdFailed() {
-    this.setState({ loading: false });
-  }
-
-  loaded() {
-    const { editor } = this.props;
-    const { id } = editor;
-    const extConf = editor.extConf || { };
-    if (!extConf.properties) extConf.properties = { StyleSheet: 'ACS Document 1996', chemservice: 'https://chemdrawdirect.perkinelmer.cloud/rest' };
-    const licenseUrl = editor.license || '';
-    perkinelmer.ChemdrawWebManager.attach({
-      id,
-      config: extConf,
-      callback: e => this.cdAttached(e),
-      errorCallback: this.cdFailed,
-      licenseUrl
-    });
-  }
-
-  render() {
-    const { iH, editor } = this.props;
-    return (
-      <div id={editor.id} style={{ height: iH }}>
-        <LoadingModal loading={this.state.loading} />
-      </div>
-    );
-  }
-}
-
-ChemDrawEditor.propTypes = {
-  editor: PropTypes.instanceOf(StructureEditor).isRequired,
-  parent: PropTypes.object.isRequired,
-  molfile: PropTypes.string,
-  iH: PropTypes.string.isRequired
-};
-
-ChemDrawEditor.defaultProps = { molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n' };
-export default ChemDrawEditor;
diff --git a/app/packs/src/components/structure_editor/KetcherEditor.js b/app/packs/src/components/structure_editor/KetcherEditor.js
deleted file mode 100644
index b17ebad79..000000000
--- a/app/packs/src/components/structure_editor/KetcherEditor.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const KetcherEditor = (props) => {
-  const {
-    editor, fh, fs, molfile
-  } = props;
-  const initMol = molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n';
-  if (editor && editor.structureDef && editor.structureDef.editor) {
-    editor.structureDef.editor.setMolecule(initMol);
-  }
-  return (
-    <div>
-      <iframe id={editor.id} src={editor.extSrc} title={editor.label} height={fh} width="100%" style={fs} />
-    </div>
-  );
-};
-
-KetcherEditor.propTypes = {
-  molfile: PropTypes.string,
-  editor: PropTypes.object.isRequired,
-  fh: PropTypes.string.isRequired,
-  fs: PropTypes.object.isRequired
-};
-
-export default KetcherEditor;
diff --git a/app/packs/src/components/structure_editor/MarvinjsEditor.js b/app/packs/src/components/structure_editor/MarvinjsEditor.js
deleted file mode 100644
index c8662dc74..000000000
--- a/app/packs/src/components/structure_editor/MarvinjsEditor.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import StructureEditor from '../models/StructureEditor';
-import loadScripts from './loadScripts';
-
-const LoadingModal = (props) => {
-  const { loading } = props;
-  return (
-    <Modal className="chemdraw-loading" animation show={loading}>
-      <i className="fa fa-spinner fa-pulse fa-3x fa-fw" />
-      <span className="sr-only">Initializing...</span>
-    </Modal>
-  );
-};
-
-LoadingModal.propTypes = { loading: PropTypes.bool };
-LoadingModal.defaultProps = { loading: false };
-
-class MarvinjsEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { loading: true };
-    this.attachEditor = this.attachEditor.bind(this);
-    this.loadError = this.loadError.bind(this);
-    this.attachError = this.attachError.bind(this);
-  }
-
-  componentDidMount() {
-    const { editor } = this.props;
-    const { extJs, id } = editor;
-    loadScripts({
-      es: extJs, id, cbError: () => this.loadError(), cbLoaded: () => this.attachEditor()
-    });
-  }
-
-  loadError() {
-    this.attachError('Internal Server Error!');
-  }
-
-  attached(mv) {
-    this.setState({ loading: false });
-    const { editor } = this.props;
-    const molfile = this.props.molfile || '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n';
-    mv.sketcherInstance.setDisplaySettings({ toolbars: 'reporting' });
-    mv.sketcherInstance.importStructure('mol', molfile).then(() => {}, (error) => { alert(error); }).catch((error) => { alert(error); });
-    editor.structureDef.getEditorFunction = () => mv;
-    this.props.parent.setState({ editor });
-  }
-
-  attachError(e) {
-    this.setState({ loading: false });
-    alert(`Marvin JS is failed to load or attach! Error: ${e}`);
-  }
-
-  attachEditor() {
-    // eslint-disable-next-line no-undef
-    MarvinJSUtil.getPackage('#mvs').then((mv) => {
-      mv.onReady(() => { this.attached(mv); });
-    }, (error) => { this.attachError(error); });
-  }
-
-  render() {
-    const { iH, editor } = this.props;
-    return (
-      <div>
-        <iframe title="Marvin JS" id="mvs" src={editor.extSrc} className="sketcher-frame" height={iH} width="100%" />
-        <LoadingModal loading={this.state.loading} />
-      </div>
-    );
-  }
-}
-
-MarvinjsEditor.propTypes = {
-  editor: PropTypes.instanceOf(StructureEditor).isRequired,
-  parent: PropTypes.object.isRequired,
-  molfile: PropTypes.string,
-  iH: PropTypes.string.isRequired
-};
-
-MarvinjsEditor.defaultProps = { molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n' };
-export default MarvinjsEditor;
diff --git a/app/packs/src/components/structure_editor/StructureEditorContent.js b/app/packs/src/components/structure_editor/StructureEditorContent.js
deleted file mode 100644
index 33f4d287e..000000000
--- a/app/packs/src/components/structure_editor/StructureEditorContent.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import scriptLoader from 'react-async-script-loader';
-
-
-class StructureEditorContent extends React.Component {
-  constructor(props) {
-    super(props);
-    const { completionCallback, errorCallback } = this.props;
-    this.state = {
-      completionCallback, errorCallback
-    }
-   this.attachEditor = this.attachEditor.bind(this)
-  }
-
-  UNSAFE_componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
-    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
-      if (isScriptLoadSucceed) {
-        setTimeout(this.attachEditor, 3000);
-      }
-    }
-  }
-
-  componentDidMount() {
-    const { isScriptLoaded, isScriptLoadSucceed } = this.props
-    if (isScriptLoaded && isScriptLoadSucceed) {
-      this.attachEditor();
-      this.attachEditor();
-    }
-  }
-
-  attachEditor() {
-    const { completionCallback, errorCallback } = this.props;
-
-    perkinelmer.ChemdrawWebManager.attach({
-        id: 'chemdrawjs-container',
-        config: window.userConfiguration,
-        element: this.chemdrawcont,
-        callback: ()=> alert('done'),
-        errorCallback: ()=> alert('de'),
-        licenseUrl: 'license.xml',
-        // loadConfigFromUrl: 'cdjs/chemdrawweb/configuration.json',
-        // preservePageInfo: false,
-        // viewonly: true,
-      });
-  }
-
-
-  render() {
-    return (
-      <div
-        ref={(input) => {this.chemdrawcont = input }}
-        // id="chemdrawjs-container"
-        style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '70vh' }}
-      />
-    );
-  }
-}
-export default scriptLoader(
-  [
-    "cdjs/chemdrawweb/chemdrawweb.js",
-  ]
-)(StructureEditorContent)
-
-
-// export default StructureEditorContent;
diff --git a/app/packs/src/components/structure_editor/StructureEditorMap.js b/app/packs/src/components/structure_editor/StructureEditorMap.js
deleted file mode 100644
index f93e7c2ee..000000000
--- a/app/packs/src/components/structure_editor/StructureEditorMap.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import StructureEditor from 'src/models/StructureEditor';
-
-const EditorListParams = [
-  {
-    id: 'ifkecther', // iframe id attribute
-    value: 'ketcher', // editor dropdown value
-    label: 'ketcher-rails', // displayed name in editor dropdown selector
-    src: '/ketcher', // iframe src attribute
-    title: 'ketcher-rails structure editor', // iframe title attribute
-    path: 'ketcher', // path to editor in frame.contentWindow
-    setMolfileInFrame: false, // false or var name: molfile can be saved in a document var until the edito is loaded
-    setMfFuncName: 'setMolecule',
-    getMfFuncName: 'getMolfile',
-    getMfWithCallback: false,
-    // getSmiFuncName: 'getSmiles',
-    // getSmiWithCallback: false,
-    getSVGFuncName: 'getSVG',
-    getSVGWithCallback: false,
-  },
-  // TODO mv additional editor configs to user profile
-  // {
-  //   id: 'ifChemDraw',
-  //   value: 'chemdraw',
-  //   label: 'ChemDrawJS',
-  //   src: 'cdjs/sample/index0.html',
-  //   title: 'ChemDrawJS editor',
-  //   path: 'cddInstance',
-  //   setMolfileInFrame: 'molfileInput',
-  //   // setMfFuncName: 'loadMOL',
-  //   getMfFuncName: 'getMOL',
-  //   getMfWithCallback: true,
-  //   getSmiFuncName: 'getSMILES',
-  //   getSmiWithCallback: true,
-  //   getSVGFuncName: 'getSVG',
-  //   getSVGWithCallback: true,
-  // }
-];
-
-const EditorList = EditorListParams.reduce((acc, args) => {
-  acc[args.value] = new StructureEditor(args);
-  return acc;
-}, new Map());
-
-export { EditorListParams, EditorList };
diff --git a/app/packs/src/components/structure_editor/StructureEditorModal.js b/app/packs/src/components/structure_editor/StructureEditorModal.js
deleted file mode 100644
index 5d2a6c006..000000000
--- a/app/packs/src/components/structure_editor/StructureEditorModal.js
+++ /dev/null
@@ -1,292 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button,
-  ButtonToolbar,
-  Modal,
-  Panel,
-  FormGroup,
-  ControlLabel
-} from 'react-bootstrap';
-import Select from 'react-select';
-import UserStore from '../stores/UserStore';
-import UIStore from '../stores/UIStore';
-import StructureEditor from '../models/StructureEditor';
-import EditorAttrs from './StructureEditorSet';
-import ChemDrawEditor from './ChemDrawEditor';
-import MarvinjsEditor from './MarvinjsEditor';
-import KetcherEditor from './KetcherEditor';
-import loadScripts from './loadScripts';
-
-const EditorList = (props) => {
-  const { options, fnChange, value } = props;
-  return (
-    <FormGroup>
-      <div className="col-lg-2 col-md-2"><ControlLabel>Structure Editor</ControlLabel></div>
-      <div className="col-lg-6 col-md-8">
-        <Select
-          className="status-select"
-          name="editor selection"
-          clearable={false}
-          options={options}
-          onChange={fnChange}
-          value={value}
-        />
-      </div>
-      <div className="col-lg-4 col-md-2">{' '}</div>
-    </FormGroup>
-  );
-};
-
-EditorList.propTypes = {
-  value: PropTypes.string.isRequired,
-  fnChange: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-const WarningBox = ({ handleCancelBtn, hideWarning, show }) => (show ?
-  (
-    <Panel bsStyle="info">
-      <Panel.Heading>
-        <Panel.Title>
-          Parents/Descendants will not be changed!
-        </Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
-        <p>This sample has parents or descendants, and they will not be changed.</p>
-        <p>Are you sure?</p>
-        <br />
-        <Button bsStyle="danger" onClick={handleCancelBtn} className="g-marginLeft--10">
-          Cancel
-        </Button>
-        <Button bsStyle="warning" onClick={hideWarning} className="g-marginLeft--10">
-          Continue Editing
-        </Button>
-      </Panel.Body>
-    </Panel>
-  ) : null
-);
-
-WarningBox.propTypes = {
-  handleCancelBtn: PropTypes.func.isRequired,
-  hideWarning: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
-export default class StructureEditorModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showModal: props.showModal,
-      showWarning: props.hasChildren || props.hasParent,
-      molfile: props.molfile,
-      matriceConfigs: [],
-      editor: new StructureEditor({ ...EditorAttrs.ketcher, id: 'ketcher' })
-    };
-    this.editors = { ketcher: this.state.editor };
-    this.handleEditorSelection = this.handleEditorSelection.bind(this);
-    this.onChangeUser = this.onChangeUser.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChangeUser);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      showModal: nextProps.showModal,
-      molfile: nextProps.molfile
-    });
-  }
-
-  onChangeUser(state) {
-    let grantEditors = (state.matriceConfigs || []).map(u => u.configs) || [];
-    const availableEditors = UIStore.getState().structureEditors || {};
-    if (Object.keys(availableEditors.editors || {}).length > 0) {
-      grantEditors = grantEditors.map((g) => {
-        const available = availableEditors.editors[g.editor];
-        if (available) {
-          if (available.extJs && available.extJs.length > 0) {
-            loadScripts({
-              es: available.extJs,
-              id: g.editor,
-              cbError: () => alert(`${g.editor} failed to load!`),
-              cbLoaded: () => {}
-            });
-          }
-          return Object.assign({}, {
-            [g.editor]: new StructureEditor({
-              ...EditorAttrs[g.editor], ...available, ...g, id: g.editor
-            })
-          });
-        }
-        return null;
-      });
-      this.editors = [{ ketcher: new StructureEditor({ ...EditorAttrs.ketcher, id: 'ketcher' }) }].concat(grantEditors).reduce((acc, args) => {
-        return Object.assign({}, acc, args);
-      }, {});
-    }
-  }
-
-  initializeEditor() {
-    const { editor, molfile } = this.state;
-    if (editor) { editor.structureDef.molfile = molfile; }
-  }
-
-  handleEditorSelection(e) {
-    this.setState(prevState => ({ ...prevState, editor: this.editors[e.value] }));
-  }
-
-  handleCancelBtn() {
-    this.hideModal();
-    if (this.props.onCancel) { this.props.onCancel(); }
-  }
-
-  handleSaveBtn() {
-    const { editor } = this.state;
-    const structure = editor.structureDef;
-    if (editor.id === 'marvinjs') {
-      structure.editor.sketcherInstance.exportStructure('mol').then((mMol) => {
-        const editorImg = new structure.editor.ImageExporter({ imageType: 'image/svg' });
-        editorImg.render(mMol).then((svg) => {
-          this.setState({ showModal: false, showWarning: this.props.hasChildren || this.props.hasParent }, () => { if (this.props.onSave) { this.props.onSave(mMol, svg, null, editor.id); } });
-        }, (error) => { alert(`MarvinJS image generated fail: ${error}`); });
-      }, (error) => { alert(`MarvinJS molfile generated fail: ${error}`); });
-    } else if (editor.id === 'ketcher2') {
-      structure.editor.getMolfile().then((molfile) => {
-        structure.editor.generateImage(molfile, { outputFormat: 'svg' }).then((imgfile) => {
-          imgfile.text().then((text) => {
-            this.setState({ showModal: false, showWarning: this.props.hasChildren || this.props.hasParent }, () => { if (this.props.onSave) { this.props.onSave(molfile, text, { smiles: '' }, editor.id); } });
-          });
-        });
-      });
-    } else {
-      const { molfile, info } = structure;
-      structure.fetchSVG().then((svg) => {
-        this.setState({
-          showModal: false,
-          showWarning: this.props.hasChildren || this.props.hasParent
-        }, () => { if (this.props.onSave) { this.props.onSave(molfile, svg, info, editor.id); } });
-      });
-    }
-  }
-
-  hideModal() {
-    this.setState({
-      showModal: false,
-      showWarning: this.props.hasChildren || this.props.hasParent
-    });
-  }
-
-  hideWarning() {
-    this.setState({ showWarning: false });
-  }
-
-  render() {
-    const handleSaveBtn = !this.props.onSave ? null : this.handleSaveBtn.bind(this);
-    const { cancelBtnText, submitBtnText } = this.props;
-    const submitAddons = this.props.submitAddons ? this.props.submitAddons : '';
-    const { editor, showWarning, molfile } = this.state;
-    const iframeHeight = showWarning ? '0px' : '730px';
-    const iframeStyle = showWarning ? { border: 'none' } : {};
-    const buttonToolStyle = showWarning ? { marginTop: '20px', display: 'none' } : { marginTop: '20px' };
-
-    let useEditor = (
-      <div>
-        <iframe
-          id={editor.id}
-          src={editor.src}
-          title={`${editor.title}`}
-          height={iframeHeight}
-          width="100%"
-          style={iframeStyle}
-          ref={(f) => { this.ifr = f; }}
-        />
-      </div>
-    );
-    if (!showWarning && editor.id === 'ketcher2') {
-      useEditor =
-        <KetcherEditor editor={this.editors.ketcher2} fh={iframeHeight} fs={iframeStyle} molfile={molfile} />;
-    }
-    if (!showWarning && editor.id === 'chemdraw') {
-      useEditor =
-        <ChemDrawEditor editor={this.editors.chemdraw} molfile={molfile} parent={this} iH={iframeHeight} />;
-    }
-    let citeMarvin = null;
-    if (!showWarning && editor.id === 'marvinjs') {
-      useEditor =
-        <MarvinjsEditor editor={this.editors.marvinjs} molfile={molfile} parent={this} iH={iframeHeight} />;
-      citeMarvin = (
-        <a href="https://chemaxon.com/" target="_blank" rel="noreferrer">
-          <img alt="Marvin JS" src="/marvinjs/powered_by_chemaxon.png" style={{ width: '256px', cursor: 'pointer' }} />
-        </a>
-      );
-    }
-    const editorOptions = Object.keys(this.editors).map(e => ({ value: e, name: this.editors[e].label, label: this.editors[e].label }));
-    return (
-      <div>
-        <Modal
-          dialogClassName={this.state.showWarning ? '' : 'structure-editor-modal'}
-          animation
-          show={this.state.showModal}
-          onLoad={this.initializeEditor.bind(this)}
-          onHide={this.handleCancelBtn.bind(this)}
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>
-              <EditorList
-                value={editor.id}
-                fnChange={this.handleEditorSelection}
-                options={editorOptions}
-              />
-              {citeMarvin}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body >
-            <WarningBox
-              handleCancelBtn={this.handleCancelBtn.bind(this)}
-              hideWarning={this.hideWarning.bind(this)}
-              show={!!showWarning}
-            />
-            {useEditor}
-            <div style={buttonToolStyle}>
-              <ButtonToolbar>
-                <Button bsStyle="warning" onClick={this.handleCancelBtn.bind(this)}>
-                  {cancelBtnText}
-                </Button>
-                {!handleSaveBtn ? null : (
-                  <Button bsStyle="primary" onClick={handleSaveBtn} style={{ marginRight: '20px' }} >
-                    {submitBtnText}
-                  </Button>
-                )}
-                {!handleSaveBtn ? null : submitAddons}
-              </ButtonToolbar>
-            </div>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-StructureEditorModal.propTypes = {
-  molfile: PropTypes.string,
-  showModal: PropTypes.bool,
-  hasChildren: PropTypes.bool,
-  hasParent: PropTypes.bool,
-  onCancel: PropTypes.func,
-  onSave: PropTypes.func,
-  submitBtnText: PropTypes.string,
-  cancelBtnText: PropTypes.string,
-};
-
-StructureEditorModal.defaultProps = {
-  molfile: '\n  noname\n\n  0  0  0  0  0  0  0  0  0  0999 V2000\nM  END\n',
-  showModal: false,
-  hasChildren: false,
-  hasParent: false,
-  onCancel: () => {},
-  onSave: () => {},
-  submitBtnText: 'Save',
-  cancelBtnText: 'Cancel',
-};
diff --git a/app/packs/src/components/structure_editor/StructureEditorSet.js b/app/packs/src/components/structure_editor/StructureEditorSet.js
deleted file mode 100644
index 9194343ef..000000000
--- a/app/packs/src/components/structure_editor/StructureEditorSet.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const EditorAttrs =
-{
-  ketcher:
-  {
-    label: 'ketcher-rails',
-    src: '/ketcher',
-    structure:
-    {
-      path: 'ketcher',
-      setMolfileInFrame: false,
-      setMfFuncName: 'setMolecule',
-      getMfFuncName: 'getMolfile',
-      getMfWithCallback: false,
-      getSVGFuncName: 'getSVG',
-      getSVGWithCallback: false
-    }
-  },
-  ketcher2:
-  {
-    structure:
-    {
-      path: 'ketcher',
-      setMolfileInFrame: false,
-      setMfFuncName: 'setMolecule',
-      getMfFuncName: 'getMolfile',
-      getMfWithCallback: false,
-    }
-  },
-  chemdraw:
-  {
-    structure:
-    {
-      getMfFuncName: 'getMOL',
-      setMfFuncName: 'loadMOL',
-      getSVGFuncName: 'getSVG',
-      getMfWithCallback: true,
-      setMolfileInFrame: false,
-      getMolfileFunction: 'getMOL',
-      getSVGWithCallback: true,
-    }
-  },
-  marvinjs:
-  {
-    structure:
-    {
-      getMfWithCallback: true,
-      getSVGFuncName: 'render',
-      getSVGWithCallback: true
-    }
-  }
-};
-
-export default EditorAttrs;
diff --git a/app/packs/src/components/structure_editor/loadScripts.js b/app/packs/src/components/structure_editor/loadScripts.js
deleted file mode 100644
index 9e4aa16d6..000000000
--- a/app/packs/src/components/structure_editor/loadScripts.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const loadScript = (props) => {
-  const scriptId = `_sdjs_${props.id}`;
-  const obScript = document.getElementById(scriptId);
-  if (!obScript) {
-    const script = document.createElement('script');
-    script.src = props.src;
-    script.id = scriptId;
-    document.head.appendChild(script);
-    script.onload = () => {
-      if (props.loaded) props.loaded();
-    };
-    script.onerror = () => {
-      const rmScript = document.getElementById(scriptId);
-      rmScript.parentNode.removeChild(rmScript);
-      if (props.error) props.error();
-    };
-  }
-  if (obScript) {
-    if (obScript && props.loaded) props.loaded();
-  }
-};
-
-const loadScripts = (props) => {
-  const {
-    es, id, cbError, cbLoaded
-  } = props;
-  const idx = props.idx || 0;
-  const loadId = `${id}_${idx}`;
-  const src = es[idx];
-  if (es.length === (idx + 1)) {
-    loadScript({
-      error: cbError, loaded: cbLoaded, src, id: loadId
-    });
-  } else {
-    const params = {
-      es, id, cbError, cbLoaded, idx: idx + 1
-    };
-    loadScript({
-      error: cbError, loaded: loadScripts(params), src, id: loadId
-    });
-  }
-};
-
-export default loadScripts;
diff --git a/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js b/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
deleted file mode 100644
index bf3e88871..000000000
--- a/app/packs/src/components/text_template_toolbar/TextTemplateToolbar.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ToolbarIcon from '../react_quill/ToolbarIcon';
-import TextTemplateIcon from '../../admin/text_templates/TextTemplateIcon';
-import ToolbarDropdown from '../react_quill/ToolbarDropdown';
-
-const getNamesFromTemplate = (template) => {
-  if (!template) return [];
-
-  // eslint-disable-next-line no-underscore-dangle
-  const iconNames = template._toolbar || [];
-  const dropdownNames = {};
-  Object.keys(template).filter(k => k !== '_toolbar').forEach((k) => {
-    dropdownNames[k] = template[k];
-  });
-
-  return [iconNames, dropdownNames];
-};
-
-const TextTemplateToolbar = ({
-  template, predefinedTemplates, applyTemplate
-}) => {
-  const [iconNames, dropdownNames] = getNamesFromTemplate(template);
-
-  return (
-    <React.Fragment>
-      {iconNames.map((name) => {
-        const predefinedTemplate = predefinedTemplates[name];
-        if (!predefinedTemplate) return <span key={name} />;
-
-        const onClick = () => applyTemplate(predefinedTemplate.data || {});
-        const icon = <TextTemplateIcon template={predefinedTemplate} />;
-
-        return (
-          <ToolbarIcon
-            key={`icon_${name}`}
-            icon={icon}
-            template={predefinedTemplate}
-            onClick={onClick}
-          />
-        );
-      })}
-      {Object.keys(dropdownNames).map((label) => {
-        const items = {};
-        dropdownNames[label].forEach((k) => {
-          items[k.toUpperCase()] = k;
-        });
-        const onSelect = (_k, v) => {
-          const predefinedTemplate = predefinedTemplates[v];
-          if (predefinedTemplate) {
-            applyTemplate(predefinedTemplate.data || {});
-          }
-        };
-        const dropdownLabel = dropdownNames[label];
-        return (
-          <ToolbarDropdown
-            key={`dd_${label}`}
-            label={label !== '' ? label : `${dropdownLabel[0]} `}
-            items={items}
-            onSelect={onSelect}
-          />
-        );
-      })}
-    </React.Fragment>
-  );
-};
-
-TextTemplateToolbar.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  template: PropTypes.object,
-  predefinedTemplates: PropTypes.object,
-  applyTemplate: PropTypes.func,
-};
-
-TextTemplateToolbar.defaultProps = {
-  template: {},
-  predefinedTemplates: [],
-  applyTemplate: null
-};
-
-export default TextTemplateToolbar;
diff --git a/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js b/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
deleted file mode 100644
index 7b9fe6285..000000000
--- a/app/packs/src/components/text_template_toolbar/ToolbarTemplateCreator.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, FormControl } from 'react-bootstrap';
-import Select from 'react-select3';
-// import { template } from 'lodash';
-
-const customStyles = {
-  container: ({ marginLeft, ...css }) => ({
-    marginLeft: '100px',
-    marginRight: '35px',
-    ...css
-  }),
-  menu: ({ width, ...css }) => ({ width: '465px', ...css })
-};
-
-const getIconAndDropdown = (template) => {
-  const dropdownTemplates = Object.keys(template).filter(k => (
-    k !== '_toolbar'
-  )).map((k, idx) => (
-    { id: idx + 1, name: k, data: template[k] }
-  ));
-
-  // eslint-disable-next-line no-underscore-dangle
-  const toolbarTemplate = template._toolbar || [];
-  return [toolbarTemplate, dropdownTemplates];
-};
-
-export default class ToolbarTemplateCreator extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toolbarSelectRef = React.createRef();
-
-    const [iconTemplates, dropdownTemplates] = getIconAndDropdown(props.template);
-    this.state = { iconTemplates, dropdownTemplates };
-
-    this.toolbarDdSelectRefs = dropdownTemplates.map(dd => ({
-      id: dd.id,
-      ref: React.createRef()
-    }));
-    this.toolbarTitleRefs = dropdownTemplates.map(dd => ({
-      id: dd.id,
-      ref: React.createRef()
-    }));
-    this.id = dropdownTemplates.length + 1;
-
-    this.setTitleRef = this.setTitleRef.bind(this);
-    this.onChangeDropdown = this.onChangeDropdown.bind(this);
-
-    this.createDropdownTemplate = this.createDropdownTemplate.bind(this);
-    this.removeDropdownTemplate = this.removeDropdownTemplate.bind(this);
-    this.saveUserTemplates = this.saveUserTemplates.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    const [iconTemplates, dropdownTemplates] = getIconAndDropdown(newProps.template);
-    this.toolbarDdSelectRefs = dropdownTemplates.map(dd => ({
-      id: dd.id,
-      ref: React.createRef()
-    }));
-    this.toolbarTitleRefs = dropdownTemplates.map(dd => ({
-      id: dd.id,
-      ref: React.createRef()
-    }));
-    this.id = dropdownTemplates.length + 1;
-
-    this.setState({ iconTemplates, dropdownTemplates });
-  }
-
-  onChangeDropdown(type, e, id) {
-    const { dropdownTemplates } = this.state;
-
-    const tempOnChange = dropdownTemplates.filter(template => template.id === id);
-    if (type === 'DropdownName') {
-      tempOnChange[0].name = e.target.value;
-    } else {
-      const dataValues = [];
-      if (e !== null) {
-        e.forEach((object) => {
-          const tabContent = object.value;
-          if (tabContent) { dataValues.push(tabContent); }
-        });
-        tempOnChange[0].data = dataValues;
-      }
-    }
-  }
-
-  setTitleRef(id, ref) {
-    const refIdx = this.toolbarTitleRefs.findIndex(r => r.id === id);
-    if (refIdx < 0) return;
-
-    const titleRef = this.toolbarTitleRefs[refIdx];
-    titleRef.ref = ref;
-    this.toolbarTitleRefs[refIdx] = titleRef;
-  }
-
-  createDropdownTemplate() {
-    const { dropdownTemplates } = this.state;
-
-    this.toolbarDdSelectRefs.push({ id: this.id, ref: React.createRef() });
-    this.toolbarTitleRefs.push({ id: this.id, ref: React.createRef() });
-
-    const newDd = { id: this.id, name: '', data: [] };
-    this.setState({
-      dropdownTemplates: dropdownTemplates.concat([newDd])
-    });
-    this.id += 1;
-  }
-
-  removeDropdownTemplate(template) {
-    const { dropdownTemplates } = this.state;
-    const newDropdowTemplates = dropdownTemplates.filter(dd => (
-      dd.id !== template.id
-    ));
-
-    this.setState({ dropdownTemplates: newDropdowTemplates }, () => {
-      this.toolbarDdSelectRefs = this.toolbarDdSelectRefs.filter(ref => (
-        ref.id !== template.id
-      ));
-      this.toolbarTitleRefs = this.toolbarTitleRefs.filter(ref => (
-        ref.id !== template.id
-      ));
-    });
-  }
-
-  saveUserTemplates() {
-    const { updateTextTemplates } = this.props;
-    if (!updateTextTemplates) return;
-
-    const iconTemplates = this.toolbarSelectRef.current.state.value;
-    const userTemplate = { _toolbar: iconTemplates.map(n => n.value) };
-
-    const { dropdownTemplates } = this.state;
-    dropdownTemplates.forEach((template) => {
-      const selectRefs = this.toolbarDdSelectRefs.filter(r => r.id === template.id);
-      const titleRefs = this.toolbarTitleRefs.filter(r => r.id === template.id);
-      if (selectRefs.length === 0 || titleRefs.length === 0) return;
-
-      const selectRef = selectRefs[0].ref;
-      const selectedValue = selectRef.current.state.value;
-
-      const tempName = template.name;
-      userTemplate[tempName] = selectedValue.map(v => v.value);
-    });
-    this.setState({ dropdownTemplates });
-    updateTextTemplates(userTemplate);
-  }
-
-  render() {
-    const { templateOptions } = this.props;
-    const options = templateOptions.map(n => ({ label: n, value: n }));
-
-    const { iconTemplates, dropdownTemplates } = this.state;
-    const iconSelected = iconTemplates.map(n => ({ label: n, value: n }));
-
-    const dropdownTemplateSelector = dropdownTemplates.map((template) => {
-      const { name, id } = template;
-      const selectRef = this.toolbarDdSelectRefs.filter(r => (
-        r.id === template.id
-      ))[0];
-      const titleRef = this.toolbarTitleRefs.filter(r => (
-        r.id === template.id
-      ))[0];
-      if (!selectRef || !titleRef) return <span />;
-
-      const ddSelected = template.data.map(n => ({ label: n, value: n }));
-      const removeDropdown = () => this.removeDropdownTemplate(template);
-
-      return (
-        <div
-          key={`ttc_dd_${name}_${id}`}
-          style={{ marginTop: '10px' }}
-        >
-          <hr />
-          <FormControl
-            style={{ float: 'left', width: '90px', marginRight: '10px' }}
-            // inputRef={(ref) => { this.setTitleRef(id, ref); }}
-            onChange={e => this.onChangeDropdown('DropdownName', e, id)}
-            ref={titleRef.ref}
-            type="text"
-            defaultValue={name}
-          />
-          <Button
-            bsStyle="danger"
-            bsSize="xs"
-            onClick={removeDropdown}
-            style={{ float: 'right', width: '25px', marginLeft: '10px' }}
-          >
-            <i className="fa fa-trash" />
-          </Button>
-          <Select
-            styles={customStyles}
-            ref={selectRef.ref}
-            options={options}
-            defaultValue={ddSelected}
-            onChange={e => this.onChangeDropdown('DropdownData', e, id)}
-            isMulti
-            isSearchable
-            closeMenuOnSelect={false}
-          />
-        </div>
-      );
-    });
-
-    return (
-      <div style={{ width: '600px' }}>
-        <div>
-          <Button
-            bsStyle="success"
-            onClick={this.saveUserTemplates}
-          >
-            Save
-          </Button>
-          &nbsp;&nbsp;
-          <Button
-            bsStyle="info"
-            onClick={this.createDropdownTemplate}
-          >
-            New dropdown
-          </Button>
-        </div>
-        <hr />
-        <div style={{ marginTop: '10px' }}>
-          <FormControl
-            style={{ float: 'left', marginRight: '10px', width: '90px' }}
-            type="text"
-            disabled
-            defaultValue="Toolbar"
-          />
-          <div style={{ marginRight: '35px' }}>
-            <Select
-              ref={this.toolbarSelectRef}
-              styles={customStyles}
-              defaultValue={iconSelected}
-              options={options}
-              isMulti
-              isSearchable
-              closeMenuOnSelect={false}
-            />
-          </div>
-        </div>
-        {dropdownTemplateSelector}
-      </div>
-    );
-  }
-}
-
-ToolbarTemplateCreator.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  template: PropTypes.object,
-  templateOptions: PropTypes.arrayOf(PropTypes.string),
-  /* eslint-enable react/forbid-prop-types */
-  updateTextTemplates: PropTypes.func
-};
-
-ToolbarTemplateCreator.defaultProps = {
-  template: {},
-  templateOptions: [],
-  updateTextTemplates: null
-};
diff --git a/app/packs/src/components/utils/ArrayUtils.js b/app/packs/src/components/utils/ArrayUtils.js
deleted file mode 100644
index abcb42897..000000000
--- a/app/packs/src/components/utils/ArrayUtils.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { uniq } from 'lodash';
-
-export default class ArrayUtils {
-  static pushUniq(list, value) {
-    if (!list.includes(value)) {
-      return list.push(value);
-    }
-  }
-
-  static removeFromListByValue(list, value) {
-    let index = list.indexOf(value);
-
-    return this.removeFromListByIndex(list, index);
-  }
-
-  static removeFromListByIndex(list, index) {
-    if (index != -1) {
-      return list.splice(index, 1);
-    }else {
-      return list;
-    }
-  }
-
-  static isValInArray(array, value) {
-    let index = array.indexOf(value);
-
-    if(index != -1) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  static isValNotInArray(array, value) {
-    return !ArrayUtils.isValInArray(array, value)
-  }
-
-  static flatten2D(array_2d) {
-    return array_2d.reduce((a, b) => a.concat(b), []);
-  }
-
-  static sortArrByIndex(arr) {
-    return arr.concat().sort((a, b) => {
-      const aIndex = parseInt(a.extended_metadata.index, 10);
-      const bIndex = parseInt(b.extended_metadata.index, 10);
-      if (isNaN(aIndex)) return false;
-      if (isNaN(bIndex)) return true;
-      return aIndex - bIndex;
-    });
-  }
-
-  static uniqSortById(items) {
-    let ids = items.map(a => a.id);
-    ids = uniq(ids).sort((a, b) => a - b);
-    const output = ids.map(id => (
-      items.find(item => item.id === id)
-    )).filter(r => r);
-    return output;
-  }
-}
diff --git a/app/packs/src/components/utils/DndControl.js b/app/packs/src/components/utils/DndControl.js
deleted file mode 100644
index 16a0a6c6a..000000000
--- a/app/packs/src/components/utils/DndControl.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const isEqId = (a, b) => {
-  return a.id === b.id;
-}
-
-const findArrIndex = (tagEl, criteria, arr = []) => {
-  let elIndex;
-  arr.forEach( (el, i) => {
-    if(criteria(el, tagEl)) {
-      elIndex = i;
-    }
-  });
-  return elIndex;
-}
-
-const reOrderArr = (sourceTagEl, targetTagEl, criteria, arr = []) => {
-  const sourceIndex = findArrIndex(sourceTagEl, criteria, arr);
-  const targetIndex = findArrIndex(targetTagEl, criteria, arr);
-  const arrWoSource = [...arr.slice(0, sourceIndex),
-                        ...arr.slice(sourceIndex + 1)];
-  const newArr = [ ...arrWoSource.slice(0, targetIndex),
-                    arr[sourceIndex],
-                    ...arrWoSource.slice(targetIndex)]
-                      .filter(o => o != null) || [];
-  return newArr;
-}
-
-export { reOrderArr, isEqId };
diff --git a/app/packs/src/components/utils/DocumentHelper.js b/app/packs/src/components/utils/DocumentHelper.js
deleted file mode 100644
index 59e1cab21..000000000
--- a/app/packs/src/components/utils/DocumentHelper.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var DocumentHelper = {
-  getMetaContent: function(name) {
-    var metas = document.getElementsByTagName('meta');
- 
-    for (var i=0; i<metas.length; i++) {
-      if (metas[i].getAttribute("name") == name) {
-        return metas[i].getAttribute("content");
-      }
-    }
- 
-    return "";
-  }
-}
- 
-module.exports = DocumentHelper;
\ No newline at end of file
diff --git a/app/packs/src/components/utils/DomHelper.js b/app/packs/src/components/utils/DomHelper.js
deleted file mode 100644
index efb7475a9..000000000
--- a/app/packs/src/components/utils/DomHelper.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const stopBubble = (e) => {
-  e.stopPropagation();
-};
-
-const stopEvent = (e) => {
-  if (!e) return;
-  e.stopPropagation();
-  e.preventDefault();
-};
-
-export { stopBubble, stopEvent };
diff --git a/app/packs/src/components/utils/ElementUtils.js b/app/packs/src/components/utils/ElementUtils.js
deleted file mode 100644
index 07f1c72b2..000000000
--- a/app/packs/src/components/utils/ElementUtils.js
+++ /dev/null
@@ -1,559 +0,0 @@
-import Aviator from 'aviator';
-import _ from 'lodash';
-import { deltaToMarkdown, markdownToDelta } from 'src/utilities/deltaMarkdownConverter';
-import { searchAndReplace } from 'src/utilities/markdownUtils';
-import MatrixCheck from 'src/components/common/MatrixCheck';
-
-import UIStore from 'src/stores/alt/stores/UIStore';
-import UserStore from 'src/stores/alt/stores/UserStore';
-
-import { contentToText } from 'src/utilities/quillFormat';
-import { chmoConversions } from 'src/components/OlsComponent';
-
-
-const rfValueFormat = (input) => {
-  if (typeof input !== 'string') { return input; }
-  let result = input;
-  (input.match(/[0]+[,]\d+/mg) || []).forEach((rf) => {
-    result = result.replace(rf, rf.replace(',', '.'));
-  });
-  return result;
-};
-
-const atomCountInFormula = (formula, e = 'H') => {
-  if (typeof formula !== 'string') { return 0; }
-  const regStr = `${e}\\d*`;
-  const re = new RegExp(regStr);
-  const hForm = re.exec(formula);
-  if (!hForm) { return 0; }
-  const count = hForm[0].slice(1);
-  if (count.length === 0) { return 1; }
-  return parseInt(count, 10);
-};
-
-const reduceByPeak = (splitData) => {
-  let within = 0;
-  return splitData.split(/(\(|\)|,)/).reduce(
-    (acc, cv) => {
-      if (within === 0) {
-        if (cv === ',') {
-          acc.push('');
-          return acc;
-        } else if (cv && cv.match(/[^\d]?\.[^\d]/)) {
-          acc.push('.');
-          return acc;
-        }
-      }
-      if (cv === '(') {
-        within += 1;
-      } else if (cv === ')') {
-        within -= 1;
-      }
-      acc[acc.length - 1] += cv;
-      return acc;
-    },
-    ['']
-  );
-};
-
-const splitDotPhrase = (phrases) => {
-  let within = 0;
-  return phrases.split(/(\(|\[\]|\)|\d\.\d|\.)/).reduce(
-    (acc, cv) => {
-      if (within === 0) {
-        if (cv && cv.match(/\d\.\d/)) {
-          //
-        } else if (cv === '.') {
-          acc.push('');
-          return acc;
-        }
-      }
-      if (cv === '(' || cv === '[') {
-        within += 1;
-      } else if (cv === ')' || cv === ']') {
-        within -= 1;
-      }
-      acc[acc.length - 1] += cv;
-      return acc;
-    },
-    ['']
-  );
-};
-
-const countHWithinBracket = (peakContent) => {
-  const bracketContent = peakContent && peakContent.match(/\((.*\d+[^C]*H.*)\)/);
-  if (!bracketContent) { return false; }
-
-  const simpleCount = bracketContent[1].match(/(^|[^\w])(\d+(\.\d+)?)\s*H\b/);
-  if (simpleCount) { return parseFloat(simpleCount[2], 10); }
-
-  return false;
-};
-
-const countCWithinBracket = (peakContent) => {
-  const bracketContent = peakContent && peakContent.match(/\((.*\d+[^C]*C.*)\)/);
-  if (!bracketContent) { return false; }
-
-  const simpleCount = bracketContent[1].match(/(^|[^\w])(\d+(\.\d+)?)\s*C/);
-  if (simpleCount) { return parseFloat(simpleCount[2], 10); }
-
-  const xCount = bracketContent[1].match(/(\d+(\.\d+)?)\s*(×|x)\s*./);
-  if (xCount) { return parseFloat(xCount[1], 10); }
-
-  return false;
-};
-
-const atomCountInNMRDescription = (nmrStr) => {
-  const phraseArr = splitDotPhrase(nmrStr);
-  const count = reduceByPeak(phraseArr[0]).reduce((acc, peak) => {
-    const hs = countHWithinBracket(peak);
-    if (hs) { return acc + hs; }
-    return acc;
-  }, 0);
-  const missed = countHWithinBracket(phraseArr[1]);
-  if (missed) { return parseFloat((missed + count).toFixed(5)); }
-
-  return parseFloat(count.toFixed(5));
-};
-
-const atomCountCInNMRDescription = (cNmrStr) => {
-  const m = cNmrStr.match(/\s*(=|:|δ)(.*)\S/);
-  if (!m) { return 0; }
-
-  const phraseArr = splitDotPhrase(m[2]);
-  const count = reduceByPeak(phraseArr[0]).reduce((acc, peak) => {
-    if (!peak.match(/\d/)) { return acc; }
-    const cwb = countCWithinBracket(peak);
-    if (cwb) { return acc + cwb; }
-    return acc + 1;
-  }, 0);
-  const missed = countCWithinBracket(phraseArr[1]);
-  if (missed) { return count + missed; }
-
-  return count;
-};
-
-
-const hNmrCount = (nmrStr) => {
-  if (typeof (nmrStr) !== 'string') {
-    return '';
-  }
-  return atomCountInNMRDescription(nmrStr);
-};
-
-const cNmrCount = (nmrStr) => {
-  if (typeof (nmrStr) !== 'string') {
-    return '';
-  }
-  return atomCountCInNMRDescription(nmrStr);
-};
-
-const hNmrCheckMsg = (formula, nmrStr) => {
-  if (typeof (formula) !== 'string' || typeof (nmrStr) !== 'string') {
-    return '';
-  }
-  const countInFormula = atomCountInFormula(formula, 'H');
-  const countInDesc = atomCountInNMRDescription(nmrStr);
-
-  if (countInFormula !== countInDesc) {
-    return ` count: ${countInDesc}/${countInFormula}`;
-  }
-  return '';
-};
-
-const cNmrCheckMsg = (formula, nmrStr) => {
-  if (typeof (formula) !== 'string' || typeof (nmrStr) !== 'string') {
-    return '';
-  }
-  const countInFormula = atomCountInFormula(formula, 'C');
-  const countInDesc = atomCountCInNMRDescription(nmrStr);
-  if (countInFormula !== countInDesc) {
-    return ` count: ${countInDesc}/${countInFormula}`;
-  }
-  return '';
-};
-
-const isEmwInMargin = (diff) => {
-  const margin = 1.0;
-  return diff <= margin
-    || Math.abs(diff - 1) <= margin
-    || Math.abs(diff - 23) <= margin
-    || Math.abs(diff - 39) <= margin;
-};
-
-const emwInStr = (emw, msStr) => {
-  const peaks = msStr.split(/,|:|;|=/).map((s) => {
-    const t = s.replace('found', '')
-      .replace(/[\(\[\{](.*?)[\)\]\}]/g, '')
-      .replace(/\s/g, '');
-    return t.match(/[a-zA-Z]/) ? 0 : parseFloat(t);
-  });
-
-  let detected = false;
-
-  peaks.forEach((p) => {
-    const diff = Math.abs(p - emw);
-    if (isEmwInMargin(diff)) detected = true;
-  });
-  return detected;
-};
-
-const msCheckMsg = (exactMolWeight, msStr) => {
-  if (typeof (exactMolWeight) !== 'number' || typeof (msStr) !== 'string') {
-    return '';
-  }
-
-  const detected = emwInStr(exactMolWeight, msStr);
-  return detected ? '' : ' exact weight not found';
-};
-
-const SameEleTypId = (orig, next) => {
-  if (orig && next && orig.type === next.type && orig.id === next.id) {
-    return true;
-  }
-  return false;
-};
-
-const UrlSilentNavigation = (element) => {
-  const { currentCollection, isSync } = UIStore.getState();
-  if (element) {
-    let elementString = `${element.type}`;
-    if (!isNaN(element.id)) elementString += `/${element.id}`;
-
-    const collectionUrl = `${currentCollection.id}/${elementString}`;
-    Aviator.navigate(
-      isSync ? `/scollection/${collectionUrl}` : `/collection/${collectionUrl}`,
-      { silent: true },
-    );
-  } else {
-    const cId = currentCollection.id;
-    Aviator.navigate(
-      isSync ? `/scollection/${cId}/` : `/collection/${cId}/`,
-      { silent: true },
-    );
-  }
-};
-
-const markdownChemicalFormular = (text) => {
-  text = text.replace(/(C|H|O|N|S)(\d+)/g, '$1<sub>$2</sub>');
-  return text;
-};
-
-const commonFormatPattern = [
-  {
-    pattern: '(,{0,1})( {0,1})(\\d+\\.){0,1}(\\d+) {0,1}H([^\\d\\w])',
-    replace: '$1 $3$4H$5'
-  },
-  {
-    pattern: ' CDC(l|L)3,',
-    replace: ' CDCl<sub>3</sub>,'
-  },
-  {
-    pattern: 'J {0,1}= {0,1}(\\d+)',
-    replace: '*J* = $1'
-  },
-  {
-    pattern: '(\\d+),(\\d+)',
-    replace: '$1.$2'
-  },
-  {
-    pattern: '\\) {0,1}, {0,1}',
-    replace: '), '
-  },
-  {
-    pattern: '\\) (\\d+)',
-    replace: '), $1'
-  },
-  {
-    pattern: '(\\d+) - (\\d+)',
-    replace: '$1–$2'
-  },
-  {
-    pattern: '(\\d+) ([\\u2013-\\u2015]) (\\d+)',
-    replace: '$1$2$3'
-  },
-];
-
-const sampleAnalysesFormatPattern = {
-  '_chmo:0000595': [
-    {
-      pattern: '(\\W|^)13 {0,1}C( |-)NMR',
-      replace: '$1<sup>13</sup>C NMR'
-    },
-    {
-      pattern: '<sup>13</sup>C-NMR',
-      replace: '<sup>13</sup>C NMR'
-    },
-    {
-      pattern: '(\\d+) C',
-      replace: '$1C'
-    },
-  ],
-  _13cnmr: [
-    {
-      pattern: '(\\W|^)13 {0,1}C( |-)NMR',
-      replace: '$1<sup>13</sup>C NMR'
-    },
-    {
-      pattern: '<sup>13</sup>C-NMR',
-      replace: '<sup>13</sup>C NMR'
-    },
-    {
-      pattern: '(\\d+) C',
-      replace: '$1C'
-    },
-  ],
-  '_chmo:0000593': [
-    {
-      pattern: '(\\W|^)1 {0,1}H( |-)NMR',
-      replace: '$1<sup>1</sup>H NMR'
-    },
-    {
-      pattern: '<sup>1</sup>H-NMR',
-      replace: '<sup>1</sup>H NMR'
-    },
-  ],
-  _1hnmr: [
-    {
-      pattern: '(\\W|^)1 {0,1}H( |-)NMR',
-      replace: '$1<sup>1</sup>H NMR'
-    },
-    {
-      pattern: '<sup>1</sup>H-NMR',
-      replace: '<sup>1</sup>H NMR'
-    },
-  ],
-  '_chmo:0001075': [
-    {
-      pattern: '(\\W|^)(C|H|O|N|S) (\\d{2})',
-      replace: '$1$2, $3'
-    },
-    {
-      pattern: '(\\d\\.\\d\\d) {0,1},',
-      replace: '$1;'
-    },
-  ],
-  _ea: [
-    {
-      pattern: '(\\W|^)(C|H|O|N|S) (\\d{2})',
-      replace: '$1$2, $3'
-    },
-    {
-      pattern: '(\\d\\.\\d\\d) {0,1},',
-      replace: '$1;'
-    },
-  ],
-  '_chmo:0000630': [
-    {
-      pattern: '(\\W|^)cm-1',
-      replace: '$1cm<sup>–1</sup>'
-    },
-    {
-      pattern: '(\\W|^)cm<sup>-1</sup>',
-      replace: '$1cm<sup>–1</sup>'
-    },
-  ],
-  _ir: [
-    {
-      pattern: '(\\W|^)cm-1',
-      replace: '$1cm<sup>–1</sup>'
-    },
-    {
-      pattern: '(\\W|^)cm<sup>-1</sup>',
-      replace: '$1cm<sup>–1</sup>'
-    },
-  ],
-  'chmo:0000470': [
-    {
-      pattern: '(\\W)m/z(\\W|$)',
-      replace: '$1*m/z*$2'
-    },
-    {
-      pattern: '(\\W)calc\\.(\\W|$)',
-      replace: '$1calcd$2'
-    },
-    {
-      pattern: '(\\W)calcd(\\W|$)',
-      replace: '$1Calcd$2'
-    },
-    {
-      pattern: '\\. HRMS(\\W)',
-      replace: '; HRMS$1'
-    },
-    {
-      pattern: ', found',
-      replace: '. Found'
-    },
-    {
-      pattern: 'HRMS \\(((C|H|O|N|S)(\\d{1,2}))+\\)',
-      replace: markdownChemicalFormular
-    },
-  ],
-  _mass: [
-    {
-      pattern: '(\\W)m/z(\\W|$)',
-      replace: '$1*m/z*$2'
-    },
-    {
-      pattern: '(\\W)calc\\.(\\W|$)',
-      replace: '$1calcd$2'
-    },
-    {
-      pattern: '(\\W)calcd(\\W|$)',
-      replace: '$1Calcd$2'
-    },
-    {
-      pattern: '\\. HRMS(\\W)',
-      replace: '; HRMS$1'
-    },
-    {
-      pattern: ', found',
-      replace: '. Found'
-    },
-    {
-      pattern: 'HRMS \\(((C|H|O|N|S)(\\d{1,2}))+\\)',
-      replace: markdownChemicalFormular
-    },
-  ]
-};
-
-const formatAnalysisContent = function autoFormatAnalysisContentByPattern(analysis) {
-  const content = _.cloneDeep(analysis.extended_metadata.content);
-  let kind = analysis.extended_metadata.kind || '';
-  kind = kind.split('|')[0] || kind;
-  const type = `_${kind.toLowerCase().replace(/ /g, '')}`;
-  let md = deltaToMarkdown(content);
-  let formatPattern = (sampleAnalysesFormatPattern[type] || []);
-  formatPattern = formatPattern.concat(commonFormatPattern);
-  formatPattern.forEach((patt) => {
-    md = searchAndReplace(md, patt.pattern, patt.replace);
-  });
-
-  return markdownToDelta(md);
-};
-
-const Alphabet = (input = 1) => {
-  const num = parseInt(input, 10);
-  const index = num >= 1 && num <= 26 ? num - 1 : 25;
-  const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-  return alphabets[index];
-};
-
-const SampleCode = (index, materialGp) => {
-  switch (materialGp) {
-    case 'solvents':
-      return `S${index}`;
-    case 'purification_solvents':
-      return `PS${index}`;
-    case 'products':
-      return `P${index}`;
-    default:
-      return Alphabet(index);
-  }
-};
-
-const instrumentText = (analysis) => {
-  if (typeof analysis === 'undefined' || analysis == null ||
-    typeof analysis.children === 'undefined' || analysis.children == null || analysis.children.length === 0) {
-    return '';
-  }
-  let ttlIns = [];
-  if (analysis.children && analysis.children.length > 0) {
-    ttlIns = _.filter(analysis.children, o => o.extended_metadata &&
-      o.extended_metadata.instrument && o.extended_metadata.instrument.trim().length > 0);
-  }
-  return ` Instrument: ${ttlIns.length}/${analysis.children.length}`;
-};
-
-const getElementSegments = (elementName, tabs) => {
-  let segmentKlasses = (UserStore.getState() && UserStore.getState().segmentKlasses) || [];
-  const currentUser = (UserStore.getState() && UserStore.getState().currentUser) || {};
-  let labels = segmentKlasses.filter(s => s.element_klass.name == elementName).map(s => s.label);
-  if (!MatrixCheck(currentUser.matrix, 'segment')) {
-    return tabs.filter((key) => !labels.includes(key));
-  }
-  return _.uniq(tabs.concat(labels));
-}
-
-// the requirements for file types as given
-const isFileTypePass = (analysisType, attachments) => {
-  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
-  const nmrType = ['jcamp', 'dx', 'jdx'];
-  let files = [];
-  switch (analysisType) {
-    case '1H NMR':
-    case chmoConversions.nmr_1h.termId:
-    case '13C NMR':
-    case chmoConversions.nmr_13c.termId:
-    case '15N NMR':
-    case 'NMR':
-    case 'IR':
-    case chmoConversions.ir.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    case 'EA':
-    case chmoConversions.ea.termId:
-    case 'X-Ray':
-    case 'Crystall-Structure':
-    case chmoConversions.crystal_structure.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    default:
-      break;
-  }
-  return true;
-};
-
-// at least one dataset has to be attached
-// in dataset: instrument has to be given
-const isDatasetPass = (analysis) => {
-  const dataset = analysis.children;
-  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
-  if (attachments.length < 1) return false;
-  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
-  if (instruments.length < 1) return false;
-  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
-  if (files.length < 1) return false;
-  return true;
-};
-
-const isNmrPass = (analysis, sample) => {
-  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
-  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h.termId && nmrType !== chmoConversions.nmr_13c.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h.termId) {
-    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c.termId) {
-    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  }
-  return true;
-};
-
-export {
-  rfValueFormat,
-  hNmrCheckMsg,
-  cNmrCheckMsg,
-  hNmrCount,
-  cNmrCount,
-  msCheckMsg,
-  SameEleTypId,
-  UrlSilentNavigation,
-  sampleAnalysesFormatPattern,
-  commonFormatPattern,
-  Alphabet,
-  SampleCode,
-  formatAnalysisContent,
-  atomCountInFormula,
-  atomCountInNMRDescription,
-  atomCountCInNMRDescription,
-  emwInStr,
-  instrumentText,
-  getElementSegments,
-  isNmrPass,
-  isDatasetPass,
-};
diff --git a/app/packs/src/components/utils/FetcherHelper.js b/app/packs/src/components/utils/FetcherHelper.js
deleted file mode 100644
index 895099497..000000000
--- a/app/packs/src/components/utils/FetcherHelper.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import base64 from 'base-64';
-
-const getFileName = (response) => {
-  const disposition = response.headers.get('Content-Disposition');
-
-  if (disposition && disposition.indexOf('attachment') !== -1) {
-    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-    const matches = filenameRegex.exec(disposition);
-    if (matches != null && matches[1]) {
-      return matches[1].replace(/['"]/g, '');
-    }
-  }
-}
-
-const downloadBlob = (file_name, blob) => {
-  const url = window.URL.createObjectURL(blob);
-
-  const a = document.createElement('a');
-  a.style = 'display: none';
-  a.href = url;
-  a.download = file_name;
-
-  document.body.appendChild(a);
-  a.click();
-  window.URL.revokeObjectURL(url);
-};
-
-const parseBase64ToArrayBuffer = (encodedData) => {
-  const decodedData = base64.decode(encodedData);
-  const bufferLength = decodedData.length;
-  let bytesArray = new Uint8Array(bufferLength);
-  for (let i = 0; i < bufferLength; i++) {
-    bytesArray[i] = decodedData.charCodeAt(i);
-  }
-  return bytesArray.buffer;
-};
-
-export { getFileName, downloadBlob, parseBase64ToArrayBuffer };
diff --git a/app/packs/src/components/utils/Functions.js b/app/packs/src/components/utils/Functions.js
deleted file mode 100644
index 21bf45ca5..000000000
--- a/app/packs/src/components/utils/Functions.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const Functions = {
-  getMetaContent(name) {
-    const metas = document.getElementsByTagName('meta');
-
-    for (var i = 0; i<metas.length; i++) {
-      if (metas[i].getAttribute("name") == name) {
-        return metas[i].getAttribute("content");
-      }
-    }
-
-    return '';
-  },
-
-  downloadFile(file) {
-    const { contents, name } = file;
-    const link = document.createElement('a');
-    link.download = name;
-    link.href = contents;
-    const event = new window.MouseEvent('click', {
-      'view': window,
-      'bubbles': true,
-      'cancelable': true
-    });
-    link.dispatchEvent(event);
-  },
-
-
-};
-
-module.exports = Functions;
diff --git a/app/packs/src/components/utils/MathUtils.js b/app/packs/src/components/utils/MathUtils.js
deleted file mode 100644
index 6cbbbc875..000000000
--- a/app/packs/src/components/utils/MathUtils.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const fixDigit = (input, precision) => {
-  const output = input || 0.0;
-  return output.toFixed(precision);
-};
-
-const precLimit = (precision) => {
-  if (precision > 20) {
-    return 20;
-  } else if (precision < 0) {
-    return 0;
-  }
-  return precision;
-};
-
-const largerThanOne = (num, headLen, tailLen, precision) => {
-  if ((precision - headLen) < 0) {
-    return num.toFixed(0);
-  }
-  return num.toFixed(precLimit(precision - headLen));
-};
-
-const smallerThanOne = (num, tailLen, precision) => {
-  if (num === 0.0) {
-    return num.toFixed(precLimit(precision - 1));
-  }
-  return num.toFixed(precLimit(precision + tailLen));
-};
-
-const validDigit = (input, precision) => {
-  const num = input || 0.0;
-  const numStr = num.toFixed(10).toString().split('.');
-  const headLen = numStr[0].replace(/^[0]+/g, '').length;
-  const tailLen = numStr[1].replace(/[1-9]+\d*/g, '').length;
-  if (num >= 1.0) {
-    return largerThanOne(num, headLen, tailLen, precision);
-  }
-  return smallerThanOne(num, tailLen, precision);
-};
-
-const correctPrefix = (input, precision) => {
-  if (input === 0.0) { return false; }
-  if (input >= 1.0) { return `${validDigit(input, precision)} `; }
-  if (input >= 0.001) { return `${validDigit(input * 1000, precision)} m`; }
-  return `${validDigit(input * 1000000, precision)} \u03BC`;
-};
-
-const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0 || bytes == null) return '0 Bytes';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / (k ** i)).toFixed(dm))} ${sizes[i]}`;
-};
-
-export {
-  fixDigit,
-  validDigit,
-  correctPrefix,
-  formatBytes,
-};
diff --git a/app/packs/src/components/utils/PermissionConst.js b/app/packs/src/components/utils/PermissionConst.js
deleted file mode 100644
index dc00b946b..000000000
--- a/app/packs/src/components/utils/PermissionConst.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const PermissionConst = {
-    Read: 0,
-    Write: 1,
-    Share: 2,
-    Delete: 3,
-    ImportElements: 4,
-    PassOwnerShip: 5
-}
\ No newline at end of file
diff --git a/app/packs/src/components/utils/ReportHelper.js b/app/packs/src/components/utils/ReportHelper.js
deleted file mode 100644
index 69ffe383c..000000000
--- a/app/packs/src/components/utils/ReportHelper.js
+++ /dev/null
@@ -1,106 +0,0 @@
-const keepObjsAsIds = (oriSelectedObjs, newElems, ids, type, defaultTags) => {
-  const allObjs = oriSelectedObjs.concat(newElems)
-    .filter(obj => obj != null) || [];
-  const allObjIds = allObjs.map(obj => `${obj.id}_${obj.type}`);
-  return allObjs.map((obj, pos) => {
-    const identifier = `${obj.id}_${obj.type}`;
-    if (allObjIds.indexOf(identifier) !== pos) { // rm duplicate
-      return null;
-    }
-    if (obj.type !== type) {
-      return obj;
-    }
-    if (obj.type === type && ids.indexOf(obj.id) !== -1) {
-      return obj;
-    }
-    if (defaultTags[`${obj.type}Ids`].indexOf(obj.id) !== -1) {
-      return obj;
-    }
-    return null;
-  }).filter(obj => obj != null) || [];
-};
-
-const UpdateSelectedObjs = (newTags, newObjs, defaultTags, oriObjs = []) => {
-  const { sampleIds, reactionIds } = newTags;
-  const { samples, reactions } = newObjs;
-  let selectedObjs = keepObjsAsIds(oriObjs,
-    samples, sampleIds, 'sample', defaultTags);
-  selectedObjs = keepObjsAsIds(selectedObjs,
-    reactions, reactionIds, 'reaction', defaultTags);
-  return selectedObjs;
-};
-
-const GetTypeIds = (objs, type) => {
-  return objs.map((obj) => {
-    if (obj.type === type) {
-      return obj.id;
-    }
-    return null;
-  }).filter(r => r !== null);
-};
-
-const UserSerial = (molecule, molSerials = []) => {
-  let output = 'xx';
-  molSerials.forEach((ms) => {
-    if (ms.mol.id === molecule.id && ms.value) output = ms.value;
-  });
-  return output;
-};
-
-const OrderPreviewObjs = (oriPreviewObjs, selectedObjs, newPreviewObjs) => {
-  const previewObjs = [...oriPreviewObjs, ...newPreviewObjs];
-  return (
-    selectedObjs.map(o => (
-      previewObjs.map(
-        p => ((p.id === o.id && p.type === o.type) ? p : null)
-      ).filter(r => r !== null)[0]
-    )).filter(r => r !== null)
-  );
-};
-
-const LoadPreviewIds = (reportState) => {
-  const { selectedObjTags, defaultObjTags, previewObjs } = reportState;
-  const sids = [...selectedObjTags.sampleIds, ...defaultObjTags.sampleIds];
-  const rids = [...selectedObjTags.reactionIds, ...defaultObjTags.reactionIds];
-  let psids = [];
-  let prids = [];
-  previewObjs.forEach((o) => {
-    if (o.type === 'sample') {
-      psids = [...psids, o.id];
-    } else {
-      prids = [...prids, o.id];
-    }
-  });
-  const lsids = sids.filter(x => !psids.includes(x));
-  const lrids = rids.filter(x => !prids.includes(x));
-  const targets = {
-    sample: { checkedIds: lsids },
-    reaction: { checkedIds: lrids },
-  };
-  return targets;
-};
-
-const CapitalizeFirstLetter = (str) => {
-  if (str && str.length > 0) {
-    let charIdxs = [];
-    [...str].forEach((t, idx) => {
-      if (/^[a-zA-Z]$/.test(t)) {
-        charIdxs = [...charIdxs, idx];
-      }
-    });
-    const charIdx = charIdxs[0];
-    if (charIdx >= 0) {
-      return (
-        str.slice(0, charIdx) +
-        str.charAt(charIdx).toUpperCase() +
-        str.slice(charIdx + 1)
-      );
-    }
-  }
-  return str
-};
-
-export {
-  UpdateSelectedObjs, GetTypeIds, UserSerial, OrderPreviewObjs, LoadPreviewIds,
-  CapitalizeFirstLetter,
-};
diff --git a/app/packs/src/components/utils/SpectraHelper.js b/app/packs/src/components/utils/SpectraHelper.js
deleted file mode 100644
index 3b3aa1cb9..000000000
--- a/app/packs/src/components/utils/SpectraHelper.js
+++ /dev/null
@@ -1,160 +0,0 @@
-const acceptables = ['jdx', 'dx', 'jcamp', 'mzml', 'mzxml', 'raw', 'cdf', 'zip'];
-
-const JcampIds = (container) => {
-  let origJcampIds = [];
-  let geneJcampIds = [];
-  let editedJcampsIds = [];
-
-  container.children.forEach((dt) => {
-    dt.attachments.forEach((att) => {
-      try {
-        const fns = att.filename.split('.');
-        const ext = fns[fns.length - 1];
-        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
-        const typ = fns.length > 1 ? fns[fns.length - 2] : false;
-        const notOrig = typ === 'peak' || typ === 'edit';
-        if (isJcamp) {
-          if (notOrig) {
-            geneJcampIds = [...geneJcampIds, att.id];
-            editedJcampsIds = [...editedJcampsIds, att.id];
-          } else {
-            origJcampIds = [...origJcampIds, att.id];
-          }
-        }
-      } catch (err) {
-        // just ignore
-      }
-    });
-  });
-  return { orig: origJcampIds, gene: geneJcampIds, edited: editedJcampsIds };
-};
-
-const extractJcampFiles = (container) => {
-  let files = [];
-  container.children.forEach((dt) => {
-    dt.attachments.forEach((att) => {
-      try {
-        const fns = att.filename.split('.');
-        const ext = fns[fns.length - 1];
-        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
-        const isApp = [
-          'idle', 'queueing', 'done',
-          'backup', 'image',
-          'failure', 'non_jcamp',
-        ].indexOf(att.aasm_state) < 0;
-        if (isJcamp && isApp) {
-          const file = Object.assign({}, att, {
-            idDt: dt.id,
-          });
-          files = [...files, file];
-        }
-      } catch (err) {
-        // just ignore
-      }
-    });
-  });
-  return files;
-};
-
-const extractJcampWithFailedFiles = (container) => {
-  let files = [];
-  container.children.forEach((dt) => {
-    dt.attachments.forEach((att) => {
-      try {
-        const fns = att.filename.split('.');
-        const ext = fns[fns.length - 1];
-        const isJcamp = acceptables.indexOf(ext.toLowerCase()) >= 0;
-        const isApp = [
-          'idle', 'queueing', 'done',
-          'backup', 'image','non_jcamp',
-        ].indexOf(att.aasm_state) < 0;
-        if (isJcamp && isApp) {
-          const file = Object.assign({}, att, {
-            idDt: dt.id,
-          });
-          files = [...files, file];
-        }
-      } catch (err) {
-        // just ignore
-      }
-    });
-  });
-  return files;
-};
-
-const extractNMRiumFiles = (container) => {
-  let files = [];
-  container.children.forEach((dt) => {
-    dt.attachments.forEach((att) => {
-      try {
-        const fns = att.filename.split('.');
-        const ext = fns[fns.length - 1];
-        const isNMRium = ext.toLowerCase() === 'nmrium';
-
-        if (isNMRium) {
-          const file = Object.assign({}, att, {
-            idDt: dt.id,
-          });
-          files = [...files, file];
-        }
-      } catch (err) {
-        // just ignore
-      }
-    });
-  });
-  return files;
-};
-
-const extractAnalysesId = (sample, container) => {
-  let idAe = null;
-  sample && sample.analysesContainers().forEach((ae) => {
-    ae.children.forEach((ai) => {
-      if (container.id === ai.id) {
-        idAe = ae.id;
-      }
-    });
-  });
-  return idAe;
-};
-
-const BuildSpcInfos = (sample, container) => {
-  if (!sample || !container) return [];
-  const files = extractJcampFiles(container);
-  if (files.length < 1) return [];
-  const idAe = extractAnalysesId(sample, container);
-  return files.map(file => (
-    {
-      value: null,
-      label: file.filename,
-      title: sample.short_label,
-      idSp: sample.id,
-      idAe,
-      idAi: container.id,
-      idDt: file.idDt,
-      idx: file.id,
-    }
-  ));
-};
-
-const BuildSpcInfosForNMRDisplayer = (sample, container) => {
-  if (!sample || !container) return [];
-  let files = extractJcampWithFailedFiles(container);
-  const nmriumFiles = extractNMRiumFiles(container);
-  files.push(...nmriumFiles);
-  if (files.length < 1) return [];
-  const idAe = extractAnalysesId(sample, container);
-  return files.map(file => (
-    {
-      value: null,
-      label: file.filename,
-      title: sample.short_label,
-      idSp: sample.id,
-      idAe,
-      idAi: container.id,
-      idDt: file.idDt,
-      idx: file.id,
-    }
-  ));
-};
-
-export { BuildSpcInfos, BuildSpcInfosForNMRDisplayer, JcampIds }; // eslint-disable-line
diff --git a/app/packs/src/components/utils/deltaMarkdownConverter.js b/app/packs/src/components/utils/deltaMarkdownConverter.js
deleted file mode 100644
index b62914aa7..000000000
--- a/app/packs/src/components/utils/deltaMarkdownConverter.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/*eslint-disable no-param-reassign*/
-
-import _ from 'lodash';
-import Delta from 'quill-delta';
-import commonmark from 'commonmark';
-
-const dtConverter = {
-  inline: {
-    bold: ['**', '**'],
-    italic: ['*', '*'],
-    underline: ['<u>', '</u>']
-  },
-  script: {
-    super: ['<sup>', '</sup>'],
-    sub: ['<sub>', '</sub>']
-  },
-  block: {
-    header: {
-      1() { return '# '; },
-      2() { return '## '; },
-      3() { return '### '; },
-      4() { return '#### '; },
-      5() { return '##### '; },
-      6() { return '###### '; }
-    },
-    list: {
-      bullet() { return '* '; },
-      ordered(count) {
-        return `${count}. `;
-      }
-    }
-  }
-};
-
-const deltaToMarkdown = (delta) => {
-  let mdString = '';
-
-  _.cloneDeep(delta).ops.forEach((op) => {
-    let text = op.insert;
-
-    Object.keys(op.attributes || {}).sort().forEach((attr) => {
-      const attrVal = op.attributes[attr];
-      if (dtConverter.inline[attr]) {
-        const open = dtConverter.inline[attr][0];
-        const close = dtConverter.inline[attr][1];
-        const replaceText = `$1${open}$2${close}$3`;
-        text = text.replace(/(\s*)(.*)(\s*)/, replaceText);
-      } else if (dtConverter.script[attrVal]) {
-        const open = dtConverter.script[attrVal][0];
-        const close = dtConverter.script[attrVal][1];
-        text = `${open}${text}${close}`;
-      } else if (dtConverter.block[attr]) {
-        let groupCount;
-        if (attrVal === 'ordered') {
-          const reg = /((?=\d+\. )(?:[^\n]*\n[^\n]*$)|(?!\d+\. )[^\n]*$)/g;
-          const lastLine = mdString.match(reg)[0];
-          const lastOrder = lastLine.match(/^(\d+)\. .*\n/) || 0;
-          if (lastOrder) {
-            groupCount = parseInt(lastOrder[1], 10);
-            groupCount += 1;
-          } else {
-            groupCount = 1;
-          }
-        }
-        const md = dtConverter.block[attr][attrVal](groupCount);
-        const regex = /(^|\n)([^\n]*)$/g;
-        const repText = `$1${md}$2`;
-        mdString = mdString.replace(regex, repText);
-      }
-    });
-
-    mdString += text;
-  });
-
-  // \n is considered as a soft-break in markdown, use \n\n to indicate new line
-  mdString = mdString.replace(/\n/g, '\n\n');
-  // However in list group, only \n is used
-  mdString = mdString.replace(/(\d+\. [^\n]*)\n{2}(?=\d+\. )/g, '$1\n');
-  mdString = mdString.replace(/(\* [^\n]*)\n{2}(?=\* )/g, '$1\n');
-
-  return mdString;
-};
-
-const changeAttribute = (attributes, event, attribute, value) => {
-  if (event.entering) {
-    attributes[attribute] = value;
-  } else {
-    attributes = _.unset(attributes, attribute);
-  }
-};
-
-const applyAttribute = (node, event, attributes, attribute) => {
-  if (typeof attribute === 'string') {
-    changeAttribute(attributes, event, attribute, true);
-  } else if (typeof attribute === 'function') {
-    attribute(node, event, attributes);
-  }
-};
-
-const mdConverter = [
-  { filter: 'emph', attribute: 'italic' },
-  { filter: 'strong', attribute: 'bold' },
-  {
-    filter: 'html_inline',
-    makeDelta: (event, attributes) => {
-      const { node } = event;
-      const tag = (node.literal.match(/<(\/)?([^>/]*)>/g) || [])[0];
-
-      switch (tag) {
-        case '<u>':
-          changeAttribute(attributes, event, 'underline', true);
-          break;
-        case '<sub>':
-          changeAttribute(attributes, event, 'script', 'sub');
-          break;
-        case '<sup>':
-          changeAttribute(attributes, event, 'script', 'super');
-          break;
-        case '</u>':
-          attributes = _.unset(attributes, 'underline');
-          break;
-        case '</sub>':
-          attributes = _.unset(attributes, 'script');
-          break;
-        case '</sup>':
-          attributes = _.unset(attributes, 'script');
-          break;
-        default:
-          break;
-      }
-    }
-  },
-  {
-    filter: 'text',
-    makeDelta: (event, attributes) => {
-      if (_.isEmpty(attributes)) {
-        return { insert: event.node.literal };
-      }
-      return { insert: event.node.literal, attributes: { ...attributes } };
-    }
-  },
-  {
-    filter: 'softbreak',
-    makeDelta: (event, attributes) => {
-      if (_.isEmpty(attributes)) {
-        return { insert: ' ' };
-      }
-      return { insert: ' ', attributes: { ...attributes } };
-    }
-  },
-  // block
-  {
-    filter: 'heading',
-    lineAttribute: true,
-    makeDelta: (event, attributes) => {
-      if (event.entering) {
-        return null;
-      }
-      return {
-        insert: '\n',
-        attributes: { ...attributes, header: event.node.level }
-      };
-    }
-  },
-  {
-    filter: 'list',
-    lineAttribute: true,
-    attribute: (node, event, attributes) => {
-      changeAttribute(attributes, event, 'list', node.listType);
-    }
-  },
-  {
-    filter: 'paragraph',
-    lineAttribute: true,
-    makeDelta: (event, attributes) => {
-      if (event.entering) {
-        return null;
-      }
-
-      if (_.isEmpty(attributes)) {
-        return { insert: '\n' };
-      }
-      return { insert: '\n', attributes: { ...attributes } };
-    }
-  },
-];
-
-const markdownToDelta = (md) => {
-  const parsed = new commonmark.Parser().parse(md);
-  const walker = parsed.walker();
-  let event;
-  const deltas = [];
-  const attributes = {};
-  const lineAttributes = {};
-
-  event = walker.next();
-  while (event !== null) {
-    const { node } = event;
-    const mdConv = mdConverter.filter(x => x.filter === node.type);
-    for (let i = 0; i < mdConv.length; i += 1) {
-      const converter = mdConv[i];
-      const attr = converter.lineAttribute ? lineAttributes : attributes;
-      applyAttribute(node, event, attr, converter.attribute);
-      if (converter.makeDelta) {
-        const delta = converter.makeDelta(event, attr);
-        if (delta) deltas.push(delta);
-      }
-    }
-    event = walker.next();
-  }
-
-  const endNewLine = deltas[deltas.length - 1].insert.indexOf('\n') === -1;
-  if (_.isEmpty(deltas) || endNewLine) {
-    deltas.push({ insert: '\n' });
-  }
-  const delta = new Delta().compose(new Delta(deltas));
-
-  return delta;
-};
-
-export {
-  deltaToMarkdown,
-  markdownToDelta
-};
-
-/* eslint-enable no-param-reassign */
diff --git a/app/packs/src/components/utils/imageHelper.js b/app/packs/src/components/utils/imageHelper.js
deleted file mode 100644
index 1c486d795..000000000
--- a/app/packs/src/components/utils/imageHelper.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const previewContainerImage = (
-  container,
-  noAttSvg = '/images/wild_card/no_attachment.svg',
-  noAvaSvg = '/images/wild_card/not_available.svg'
-) => {
-  const rawImg = (container.preview_img || {}).preview;
-  switch (rawImg) {
-    case null:
-    case undefined:
-      return noAttSvg;
-    case 'not available':
-      return noAvaSvg;
-    default:
-      return `data:image/png;base64,${rawImg}`;
-  }
-};
-
-const previewAttachmentImage = (
-  attachment,
-  noAvaSvg = '/images/wild_card/not_available.svg'
-) => {
-  if (attachment.thumb) {
-    return `/images/thumbnail/${attachment.identifier}`;
-  }
-  return noAvaSvg;
-};
-
-export { previewContainerImage, previewAttachmentImage };
diff --git a/app/packs/src/components/utils/markdownUtils.js b/app/packs/src/components/utils/markdownUtils.js
deleted file mode 100644
index b23f0532f..000000000
--- a/app/packs/src/components/utils/markdownUtils.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const searchAndReplace = (md, pattern, regexReplace) => {
-  const regexMatch = new RegExp(pattern, 'g');
-
-  const match = md.match(regexMatch);
-  if (typeof regexReplace === 'function' && match != null) {
-    const funcOutput = regexReplace(match[0]);
-    md = md.replace(match, funcOutput);
-  } else {
-    md = md.replace(regexMatch, regexReplace);
-  }
-
-  return md;
-};
-
-export {
-  searchAndReplace,
-};
-
diff --git a/app/packs/src/components/utils/metricPrefix.js b/app/packs/src/components/utils/metricPrefix.js
deleted file mode 100644
index e84a912fb..000000000
--- a/app/packs/src/components/utils/metricPrefix.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const metPrefSymbols = {
-  u: '\u03BC', // micro
-  m: 'm',      // milli
-  c: 'c',      // centi
-  d: 'd',      // deci
-  n: '',       // none
-  k: 'k'       // kilo
-};
-
-const metPref = {
-  u:    0.000001,
-  m:    0.001,
-  c:    0.01,
-  d:     0.1,
-  n:     1.0,
-  k:  1000.0,
-};
-
-const metPreConv = (value, fromMP, toMP) => (metPref[fromMP] / metPref[toMP]) * value;
-
-export { metPreConv, metPrefSymbols };
diff --git a/app/packs/src/components/utils/quillFormat.js b/app/packs/src/components/utils/quillFormat.js
deleted file mode 100644
index b1f1acd50..000000000
--- a/app/packs/src/components/utils/quillFormat.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import _ from 'lodash';
-
-const contentToText = (content) => {
-  if (typeof (content) === 'undefined' || !content ||
-    typeof (content.ops) === 'undefined' || !content.ops) {
-    return '';
-  }
-  return (content.ops || []).reduce((txt, operation) => {
-    if (typeof operation.insert !== 'string') { return txt + ' ' };
-    return txt + operation.insert;
-  }, '');
-};
-
-const keepSupSub = (value) => {
-  const content = [];
-  value.ops.forEach((op) => {
-    if (typeof op.insert === 'string' && op.insert !== '\n') {
-      if (op.attributes
-            && op.attributes.script
-            && (op.attributes.script === 'super'
-                || op.attributes.script === 'sub')) {
-        content.push({
-          insert: op.insert,
-          attributes: { script: op.attributes.script }
-        });
-      } else {
-        content.push({ insert: op.insert });
-      }
-    }
-  });
-  content.filter(op => op).push({ insert: '\n' });
-  // NB: what is this for?
-  // if (content.length === 1) {
-  //   content.unshift({ insert: '-' });
-  // }
-  return content;
-};
-
-const rmRedundantSpaceBreak = (target) => {
-  return target.replace(/\n/g, '').replace(/\s\s+/g, ' ');
-};
-
-const rmOpsRedundantSpaceBreak = (ops) => {
-  const clearOps = ops.map((op) => {
-    op.insert = rmRedundantSpaceBreak(op.insert);
-    return op;
-  });
-  return clearOps;
-};
-
-const rmDeltaRedundantSpaceBreak = (delta) => {
-  const clearOps = rmOpsRedundantSpaceBreak(delta.ops);
-  return { ops: clearOps };
-};
-
-const frontBreak = (content) => {
-  const res = [{ insert: '\n' }, ...content];
-  return res;
-};
-
-const mapValueToGroupRegex = (content, matchedGroup) => {
-  let newContent = _.cloneDeep(content);
-  matchedGroup.forEach((m, idx) => {
-    newContent = newContent.map((d) => {
-      const patt = `#{${idx + 1}}`;
-      const insertString = d.insert;
-      const dd = { ...d };
-      dd.insert = insertString.replace(patt, m || '');
-      return dd;
-    });
-  });
-
-  return newContent;
-};
-
-export {
-  contentToText,
-  keepSupSub,
-  rmDeltaRedundantSpaceBreak,
-  rmOpsRedundantSpaceBreak,
-  rmRedundantSpaceBreak,
-  frontBreak,
-};
diff --git a/app/packs/src/components/utils/quillToolbarSymbol.js b/app/packs/src/components/utils/quillToolbarSymbol.js
deleted file mode 100644
index 432e6f87e..000000000
--- a/app/packs/src/components/utils/quillToolbarSymbol.js
+++ /dev/null
@@ -1,682 +0,0 @@
-import React from 'react';
-
-const minusRender = name => (
-  <span key={`${name}_key`} id={`${name}_id`} style={{ marginRight: '10px', cursor: 'pointer' }}>
-    <i className="fa fa-minus" />
-  </span>
-);
-
-const reactionToolbarSymbol = [
-  {
-    name: 'ndash',
-    ops: [
-      { insert: '–' },
-    ],
-    render: minusRender,
-  },
-  {
-    name: 'water-free',
-    ops: [
-      { insert: 'The reaction has been conducted in dry glass ware under inert atmosphere.' },
-    ],
-  },
-  {
-    name: 'resin-solvent',
-    ops: [
-      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was swollen in xx mL of SOLVENT for xx min at room temperature.' },
-    ],
-  },
-  {
-    name: 'resin-solvent-reagent',
-    ops: [
-      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was filled into a 10 mL crimp cap vial and was swollen in xx mL of SOLVENT. After xx min, xxx.x mg of REAGENT (XX.X mmol, XX.X equiv.) and XX.X mg of REAGENT (XX.X mg, XX.X mmol, X.XX equiv.) were added. The reaction mixture was shaken at XX °C for XX h.' },
-    ],
-  },
-  {
-    name: 'hand-stop',
-    ops: [
-      { insert: 'After complete conversion of the starting material, the reaction was quenched ' },
-      {
-        insert: 'via',
-        attributes: { italic: true },
-      },
-      { insert: ' careful addition of saturated NaHCO' },
-      {
-        insert: '3',
-        attributes: { script: 'sub' },
-      },
-      { insert: '-solution.' },
-    ],
-  },
-  {
-    name: 'reaction-procedure',
-    ops: [
-      { insert: 'The reaction mixture was poured into a glass funnel with filter paper and the polymer beads were washed XX times according to the following procedure: (1) SOLVENT [x repetitions] (2)  SOLVENT [x repetitions] (3)  SOLVENT [x repetitions] (4)  SOLVENT [x repetitions] (5)  SOLVENT [x repetitions].' },
-    ],
-  },
-  {
-    name: 'gpx-a',
-    ops: [
-      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
-    ],
-  },
-  {
-    name: 'gpx-b',
-    ops: [
-      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
-    ],
-  },
-  {
-    name: 'washed-nahco3',
-    ops: [
-      { insert: 'The reaction mixture was poured into a separation funnel and the organic layer was washed successively with xx mL of NaHCO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '3',
-      },
-      { insert: '-solution, xx mL of brine and xx mL of water. The aqueous layers were recombined and reextracted with ethyl acetate.\nThe organic layers were collected and were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  {
-    name: 'acidified-hcl',
-    ops: [
-      { insert: 'The reaction mixture was poured into a separation funnel and was acidified by the addition of 1 M HCl. The aqueous layer was collected and adjusted to pH 8-9 by addition of saturated NaHCO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '3',
-      },
-      { insert: '-solution. xx mL of SOLVENT were added and the aqueous phase was extracted three times. After washing with brine and water, the organic layers were collected and were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  {
-    name: 'tlc-control',
-    ops: [
-      { insert: 'The progress of the reaction was observed via TLC control (cyclohexane:ethyl acetate; xx:xx; R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX).' },
-    ],
-  },
-  {
-    name: 'dried',
-    ops: [
-      { insert: 'The combined organic layers were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  {
-    name: 'isolated',
-    ops: [
-      { insert: 'The target compound was isolated by filtering of the resulting mixture through a glass funnel and was washed AMOUNT times with SOLVENT.' },
-    ],
-  },
-  {
-    name: 'residue-purified',
-    ops: [
-      { insert: 'The crude residue was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-  {
-    name: 'residue-adsorbed',
-    ops: [
-      { insert: 'The crude residue was adsorbed on a small amount of silica gel/Celite and was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-  {
-    name: 'residue-dissolved',
-    ops: [
-      { insert: 'The crude residue was dissolved in a small amount of SOLVENT and was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless STATE in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-];
-
-const ops1HHead = (freqStr = '', solvent = '') => (
-  [
-    { attributes: { script: 'super' }, insert: '1' },
-    { insert: `H NMR (${freqStr}${solvent}ppm) δ = ` },
-  ]
-);
-
-const ops13CHead = (freqStr = '', solvent = '') => (
-  [
-    { attributes: { script: 'super' }, insert: '13' },
-    { insert: `C NMR (${freqStr}${solvent}ppm) δ = ` },
-  ]
-);
-
-const ops19FHead = (freqStr = '', solvent = '') => (
-  [
-    { attributes: { script: 'super' }, insert: '19' },
-    { insert: `F NMR (${freqStr}${solvent}ppm) δ = ` },
-  ]
-);
-
-const opsCommonTail = () => (
-  [
-    { insert: '. ' },
-  ]
-);
-
-const opsIRHead = () => (
-  [
-    { insert: 'IR (ATR, ṽ) = ' },
-  ]
-);
-
-const opsIRTail = () => (
-  [
-    { insert: ' cm' },
-    { attributes: { script: 'super' }, insert: '–1' },
-    { insert: '. ' },
-  ]
-);
-
-const opsRAMANHead = () => (
-  [
-    { insert: 'RAMAN (ṽ) = ' },
-  ]
-);
-
-const opsRAMANTail = () => (
-  [
-    { insert: ' cm' },
-    { attributes: { script: 'super' }, insert: '–1' },
-    { insert: '. ' },
-  ]
-);
-
-const opsUVVISHead = () => (
-  [
-    { insert: 'UV-VIS (absorption, solvent), λmax = ' },
-  ]
-);
-
-const opsHPLCUVVISHead = () => (
-  [
-    { insert: 'HPLC UV/VIS (λmax) = ' },
-  ]
-);
-
-const opsUVVISTail = () => (
-  [
-    { insert: ' nm' },
-    { insert: '. ' },
-  ]
-);
-
-const opsHPLCUVVISTail = () => (
-  [
-    { insert: ' ' },
-    { insert: '. ' },
-  ]
-);
-
-const sampleAnalysesContentSymbol = [
-  {
-    name: 'ndash',
-    render: minusRender,
-    ops: [
-      { insert: '–' },
-    ],
-  },
-  {
-    name: 'h-nmr',
-    ops: ops1HHead([]),
-  },
-  {
-    name: 'c-nmr',
-    ops: ops13CHead([]),
-  },
-  {
-    name: 'ir',
-    ops: [...opsIRHead(), ...opsIRTail()],
-  },
-  {
-    name: 'uv',
-    ops: [
-      { insert: 'UV-VIS (CH' },
-      { attributes: { script: 'sub' }, insert: '2' },
-      { insert: 'Cl' },
-      { attributes: { script: 'sub' }, insert: '2' },
-      { insert: '), λ' },
-      { attributes: { script: 'sub' }, insert: 'max' },
-      { insert: '(log ε) = .' },
-    ],
-  },
-  {
-    name: 'ea',
-    ops: [
-      { insert: 'EA (): Calcd C ; H ; N ; O . Found C ; H ; N ; O .' },
-    ],
-  },
-];
-
-const opsMSHead = (solventOps = []) => ( // eslint-disable-line
-  []
-);
-
-const opsMSTail = () => (
-  []
-);
-
-const SpectraOps = {
-  PLAIN: { head: [], tail: [] },
-  '1H': { head: ops1HHead, tail: opsCommonTail },
-  '13C': { head: ops13CHead, tail: opsCommonTail },
-  '19F': { head: ops19FHead, tail: opsCommonTail },
-  IR: { head: opsIRHead, tail: opsIRTail },
-  RAMAN: { head: opsRAMANHead, tail: opsRAMANTail },
-  'UV/VIS': { head: opsUVVISHead, tail: opsUVVISTail },
-  'HPLC UV/VIS': { head: opsHPLCUVVISHead, tail: opsHPLCUVVISTail },
-  MS: { head: opsMSHead, tail: opsMSTail },
-};
-
-const reactionAnalysesMacros = {
-  ndash: {
-    ops: [
-      { insert: '–' },
-    ],
-  },
-  'water-free': {
-    ops: [
-      { insert: 'The reaction has been conducted in dry glass ware under inert atmosphere.' },
-    ],
-  },
-  'resin-solvent': {
-    ops: [
-      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was swollen in xx mL of SOLVENT for xx min at room temperature.' },
-    ],
-  },
-  'resin-solvent-reagent': {
-    ops: [
-      { insert: 'The resin (xxx mg, loading = X.XX g/mol, XX.X mmol) was filled into a 10 mL crimp cap vial and was swollen in xx mL of SOLVENT. After xx min, xxx.x mg of REAGENT (XX.X mmol, XX.X equiv.) and XX.X mg of REAGENT (XX.X mg, XX.X mmol, X.XX equiv.) were added. The reaction mixture was shaken at XX °C for XX h.' },
-    ],
-  },
-  'hand-stop': {
-    ops: [
-      { insert: 'After complete conversion of the starting material, the reaction was quenched ' },
-      {
-        insert: 'via',
-        attributes: { italic: true },
-      },
-      { insert: ' careful addition of saturated NaHCO' },
-      {
-        insert: '3',
-        attributes: { script: 'sub' },
-      },
-      { insert: '-solution.' },
-    ],
-  },
-  'reaction-procedure': {
-    ops: [
-      { insert: 'The reaction mixture was poured into a glass funnel with filter paper and the polymer beads were washed XX times according to the following procedure: (1) SOLVENT [x repetitions] (2)  SOLVENT [x repetitions] (3)  SOLVENT [x repetitions] (4)  SOLVENT [x repetitions] (5)  SOLVENT [x repetitions].' },
-    ],
-  },
-  'gpx-a': {
-    ops: [
-      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
-    ],
-  },
-  'gpx-b': {
-    ops: [
-      { insert: 'According to GPX, AMOUNT g (XXX mmol, XX equiv.) of STARTING MATERIAL were reacted with XX.X mL (XX.X mg, XX.X mmol, X.XX equiv.) of REAGENT und X.XX mg (24.0 mmol, 5.00 equiv.) of REAGENT in XX mL of SOLVENT at XX °C for XX h.' },
-    ],
-  },
-  'washed-nahco3': {
-    ops: [
-      { insert: 'The reaction mixture was poured into a separation funnel and the organic layer was washed successively with xx mL of NaHCO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '3',
-      },
-      { insert: '-solution, xx mL of brine and xx mL of water. The aqueous layers were recombined and reextracted with ethyl acetate.\nThe organic layers were collected and were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  'acidified-hcl': {
-    ops: [
-      { insert: 'The reaction mixture was poured into a separation funnel and was acidified by the addition of 1 M HCl. The aqueous layer was collected and adjusted to pH 8-9 by addition of saturated NaHCO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '3',
-      },
-      { insert: '-solution. xx mL of SOLVENT were added and the aqueous phase was extracted three times. After washing with brine and water, the organic layers were collected and were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  'tlc-control': {
-    ops: [
-      { insert: 'The progress of the reaction was observed via TLC control (cyclohexane:ethyl acetate; xx:xx; R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX).' },
-    ],
-  },
-  dried: {
-    ops: [
-      { insert: 'The combined organic layers were dried by the addition of Na' },
-      {
-        attributes: { script: 'sub' },
-        insert: '2',
-      },
-      { insert: 'SO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '/MgSO' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '. The mixture was filtered through a glass funnel and the solvent was evaporated under reduced pressure.' },
-    ],
-  },
-  isolated: {
-    ops: [
-      { insert: 'The target compound was isolated by filtering of the resulting mixture through a glass funnel and was washed AMOUNT times with SOLVENT.' },
-    ],
-  },
-  'residue-purified': {
-    ops: [
-      { insert: 'The crude residue was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-  'residue-adsorbed': {
-    ops: [
-      { insert: 'The crude residue was adsorbed on a small amount of silica gel/Celite and was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless solid in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-  'residue-dissolved': {
-    ops: [
-      { insert: 'The crude residue was dissolved in a small amount of SOLVENT and was purified ' },
-      {
-        attributes: { italic: true },
-        insert: 'via',
-      },
-      { insert: ' column chromatography (cyclohexane:ethyl acetate; xx:xx → cyclohexane:ethyl acetate; xx:xx). The target compound was isolated as a colorless STATE in xx% yield (xx mg, xx mmol). R' },
-      {
-        attributes: {
-          italic: true,
-          script: 'sub',
-        },
-        insert: 'f = ',
-      },
-      { insert: '0.XX (cyclohexane:ethyl acetate).' },
-    ],
-  },
-};
-
-const sampleAnalysesMacros = {
-  ndash: {
-    ops: [
-      { insert: '–' },
-    ],
-  },
-  'h-nmr': {
-    ops: ops1HHead([]),
-  },
-  'c-nmr': {
-    ops: ops13CHead([]),
-  },
-  ir: {
-    ops: [...opsIRHead(), ...opsIRTail()],
-  },
-  uv: {
-    ops: [
-      { insert: 'UV-VIS (CH' },
-      { attributes: { script: 'sub' }, insert: '2' },
-      { insert: 'Cl' },
-      { attributes: { script: 'sub' }, insert: '2' },
-      { insert: '), λ' },
-      { attributes: { script: 'sub' }, insert: 'max' },
-      { insert: '(log ε) = .' },
-    ],
-  },
-  ea: {
-    ops: [
-      { insert: 'EA (): Calcd C ; H ; N ; O . Found C ; H ; N ; O .' },
-    ],
-  },
-  ei: {
-    ops: [
-      { insert: 'MS (EI, 70 eV, XX °C), m/z (%):' },
-    ],
-  },
-  fab: {
-    ops: [
-      { insert: 'MS (FAB, 3-NBA), m/z (%):' },
-    ],
-  },
-  esi: {
-    ops: [
-      { insert: 'MS (ESI), m/z (%):' },
-    ],
-  },
-  apci: {
-    ops: [
-      { insert: 'MS (APCI, CH' },
-      {
-        attributes: { script: 'sub' },
-        insert: '3',
-      },
-      { insert: 'COONH' },
-      {
-        attributes: { script: 'sub' },
-        insert: '4',
-      },
-      { insert: '), m/z (%): ' },
-    ],
-  },
-  asap: {
-    ops: [
-      { insert: 'MS (ASAP), m/z (%):' },
-    ],
-  },
-  maldi: {
-    ops: [
-      { insert: 'MS (MALDI-TOF), m/z (%):' },
-    ],
-  },
-  'm+': {
-    ops: [
-      { insert: '[M]' },
-      { insert: '+', attributes: { script: 'super' } },
-    ],
-  },
-  hr: {
-    ops: [
-      { insert: 'HRMS (): calcd , found .' },
-    ],
-  },
-  'hr-ei': {
-    ops: [
-      { insert: 'HRMS–EI ' },
-      { insert: '(m/z)', attributes: { italic: true } },
-      { insert: ': [M]' },
-      { insert: '+', attributes: { script: 'super' } },
-      { insert: ' calcd for ' },
-      { insert: 'MASS', attributes: { bold: true } },
-      { insert: '; found ' },
-      { insert: 'MASS', attributes: { bold: true } },
-      { insert: '.' },
-    ],
-  },
-  'hr-fab': {
-    ops: [
-      { insert: 'HRMS–FAB ' },
-      { insert: '(m/z)', attributes: { italic: true } },
-      { insert: ': [M + H]' },
-      { insert: '+', attributes: { script: 'super' } },
-      { insert: ' calcd for ' },
-      { insert: 'MASS', attributes: { bold: true } },
-      { insert: '; found ' },
-      { insert: 'MASS', attributes: { bold: true } },
-      { insert: '.' },
-    ],
-  },
-};
-
-const defaultMacroToolbar = ['ndash', 'h-nmr', 'c-nmr', 'ir', 'uv', 'ea'];
-const defaultMacroDropdown = {
-  MS: [
-    'ei', 'fab', 'esi', 'apci', 'asap', 'maldi', 'm+', 'hr', 'hr-ei', 'hr-fab'
-  ]
-};
-
-export {
-  reactionToolbarSymbol,
-  sampleAnalysesContentSymbol,
-  SpectraOps,
-  sampleAnalysesMacros,
-  reactionAnalysesMacros,
-  defaultMacroDropdown,
-  defaultMacroToolbar
-};
diff --git a/app/packs/src/components/utils/reactionPredefined.js b/app/packs/src/components/utils/reactionPredefined.js
deleted file mode 100644
index e99949f4a..000000000
--- a/app/packs/src/components/utils/reactionPredefined.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const observationPurification = [
-  { 'flash-chromatography': 'The obtained crude product was purified via flash-chromatography on silica gel using cyclohexane/ethyl acetate 20:1 to 4:1.' },
-  { hplc: 'The obtained crude product was purified via HPLC using MeCN/H₂O 10:1.' },
-];
-
-const solventsTL = [
-  { cyclohexane: 'cyclohexane/ethyl acetate 20:1' },
-  { 'CH<sub>2</sub>Cl<sub>2</sub>': 'CH₂Cl₂/MeOH 20:1' },
-  { 'NEt<sub>3</sub>': 'cyclohexane/ethyl acetate 20:1 + 1% NEt₃' },
-];
-
-export { solventsTL, observationPurification };
diff --git a/app/packs/src/fetchers/CollectionsFetcher.js b/app/packs/src/fetchers/CollectionsFetcher.js
index 7a1ee3d0d..6c54a61f7 100644
--- a/app/packs/src/fetchers/CollectionsFetcher.js
+++ b/app/packs/src/fetchers/CollectionsFetcher.js
@@ -14,18 +14,6 @@ export default class CollectionsFetcher {
     return promise;
   }
 
-  static fetchGenericEls() {
-    const promise = fetch('/api/v1/collections/locked.json', {
-      credentials: 'same-origin'
-    })
-      .then(response => response.json()).then((json) => {
-        return json;
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    return promise;
-  }
-
   static fetchLockedRoots() {
     return BaseFetcher.withoutBodyData({
       apiEndpoint: '/api/v1/collections/locked.json',
diff --git a/app/packs/src/fetchers/GenericBaseFetcher.js b/app/packs/src/fetchers/GenericBaseFetcher.js
index 9a682bab0..e641cbe29 100644
--- a/app/packs/src/fetchers/GenericBaseFetcher.js
+++ b/app/packs/src/fetchers/GenericBaseFetcher.js
@@ -90,19 +90,6 @@ export default class GenericBaseFetcher {
       });
   }
 
-  static fetchUnitsSystem() {
-    return fetch('/units_system/units_system.json', {
-      credentials: 'same-origin',
-      cache: 'no-store',
-      headers: { 'cache-control': 'no-cache' },
-    })
-      .then((response) => response.json())
-      .then((json) => json)
-      .catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
   static updateTemplate(params) {
     return fetch('/api/v1/generic_elements/update_template', {
       credentials: 'same-origin',
diff --git a/app/packs/src/libCnC/CnC.js b/app/packs/src/libCnC/CnC.js
deleted file mode 100644
index 144d59638..000000000
--- a/app/packs/src/libCnC/CnC.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React from 'react';
-import RFB from '@novnc/novnc/lib/rfb';
-import { Grid, Row, Col } from 'react-bootstrap';
-import { uniq } from 'lodash';
-
-import DeviceActions from 'src/stores/alt/actions/UserActions';
-import DeviceStore from 'src/stores/alt/stores/UserStore';
-import FocusNovnc from 'src/apps/commandAndControl/FocusNovnc';
-import Navigation from 'src/apps/commandAndControl/Navigation';
-import UsersFetcher from 'src/fetchers/UsersFetcher';
-import { ConnectedBtn, DisconnectedBtn } from 'src/apps/commandAndControl/NovncStatus';
-
-// Timeout before disconnection when not focused
-const TIME_DISCO = 180000;
-// Timeout before bluring when focused and mouse has left the canvas
-const TIME_BLUR = 55000;
-// Interval to query connection counter
-const TIME_CONN = 4000;
-
-class CnC extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      devices: [],
-      selected: {},
-      showDeviceList: true,
-      connected: false,
-      rfb: null,
-      isNotFocused: true,
-      show: false,
-      watching: 0,
-      using: 0,
-      autoBlur: null,
-      autoDisconnect: null,
-      forceCursor: false,
-      connections: null,
-    };
-    this.UserStoreChange = this.UserStoreChange.bind(this);
-    this.toggleDeviceList = this.toggleDeviceList.bind(this);
-
-    this.connect = this.connect.bind(this);
-    this.connected = this.connected.bind(this);
-    this.disconnected = this.disconnected.bind(this);
-    this.autoDisconnect = this.autoDisconnect.bind(this);
-
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleCursor = this.handleCursor.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.clearTimers = this.clearTimers.bind(this);
-
-    this.fetchConnections = this.fetchConnections.bind(this);
-  }
-
-  componentDidMount() {
-    DeviceStore.listen(this.UserStoreChange);
-    DeviceActions.fetchNoVNCDevices();
-  }
-
-  shouldComponentUpdate(nextState) {
-    return this.state.connected !== nextState.connected
-      || this.state.rfb !== nextState.rfb
-      || this.state.selected.id !== nextState.selected.id
-      || this.state.isNotFocused !== nextState.isNotFocused;
-  }
-
-  componentWillUnmount() {
-    DeviceStore.unlisten(this.UserStoreChange);
-    this.disconnect();
-  }
-
-  UserStoreChange(UserStoreState) {
-    this.setState(prevState => ({ ...prevState, devices: UserStoreState.devices }));
-  }
-
-  connected() {
-    this.setState({ connected: true });
-  }
-
-  disconnected() {
-    this.setState({ connected: false });
-  }
-
-  clearTimers() {
-    clearTimeout(this.state.autoBlur);
-    clearTimeout(this.state.autoDisconnect);
-  }
-
-  handleFocus() {
-    if (!this.state.rfb) { return; }
-    const tempRFB = this.state.rfb;
-    tempRFB.viewOnly = false;
-    this.clearTimers();
-    this.setState({ rfb: tempRFB, isNotFocused: false });
-  }
-
-  handleBlur() {
-    if (!this.state.rfb) { return; }
-    const tempRFB = this.state.rfb;
-    tempRFB.viewOnly = true;
-    this.clearTimers();
-    const disconnectTime = setTimeout(this.autoDisconnect, TIME_DISCO);
-    this.setState({ rfb: tempRFB, isNotFocused: true, autoDisconnect: disconnectTime });
-  }
-
-  handleCursor() {
-    this.setState({ forceCursor: !this.state.forceCursor });
-  }
-
-  handleMouseEnter() {
-    if (!this.state.rfb || this.state.isNotFocused) { return; }
-    this.clearTimers();
-  }
-
-  handleMouseLeave() {
-    if (this.state.isNotFocused) { return; }
-    this.clearTimers();
-    const blurTime = setTimeout(this.handleBlur, TIME_BLUR);
-    this.setState({ autoBlur: blurTime });
-  }
-
-  connect() {
-    this.disconnect();
-    const { id, novnc } = this.state.selected;
-    if (!this.canvas || !id || !novnc) { return; }
-
-    const rfb = new RFB(
-      this.canvas,
-      novnc.target,
-      {
-        repeaterID: '',
-        shared: true,
-        credentials: { password: novnc.password },
-      }
-    );
-    rfb.viewOnly = true;
-    rfb.reconnect = true;
-    rfb.show_dot = true;
-    rfb.addEventListener('connect', () => this.connected());
-    rfb.addEventListener('disconnect', () => this.disconnected());
-    this.setState(prevState => ({
-      ...prevState,
-      rfb,
-      isNotFocused: true,
-      connections: setInterval(this.fetchConnections, TIME_CONN)
-    }));
-  }
-
-  fetchConnections() {
-    const {
-      selected, isNotFocused
-    } = this.state;
-    fetch(`/api/v1/devices/current_connection?id=${selected.id}&status=${isNotFocused}`, {
-      credentials: 'same-origin'
-    }).then(response => response.json())
-      .then((json) => {
-        let using = 0;
-        let watching = 0;
-        const data = uniq(json.result).map(line => line.split(','));
-        const conn = Object.fromEntries(data);
-
-        Object.keys(conn).forEach((k) => {
-          if (conn[k] === '0') { using += 1; }
-          if (conn[k] === '1') { watching += 1; }
-        });
-        this.setState({ using, watching });
-      });
-  }
-
-  autoDisconnect() {
-    clearInterval(this.state.connections);
-    this.state.rfb.disconnect();
-  }
-
-  disconnect() {
-    clearInterval(this.state.connections);
-    if (!this.state.rfb) {
-      return;
-    }
-    this.state.rfb.disconnect();
-    this.setState(prevState => ({ ...prevState, rfb: null }));
-  }
-
-  toggleDeviceList() {
-    const { showDeviceList } = this.state;
-    this.setState({
-      showDeviceList: !showDeviceList,
-      indicatorClassName: showDeviceList ? 'fa fa-chevron-circle-right' : 'fa fa-chevron-circle-left',
-      mainContentClassName: showDeviceList ? 'small-col full-main' : 'small-col main-content'
-    });
-  }
-
-  deviceClick(device) {
-    UsersFetcher.fetchNoVNCDevices(device.id)
-      .then(devices => this.setState(
-        prevState => ({ ...prevState, selected: devices[0] }),
-        this.connect
-      ));
-  }
-
-  tree(dev, selectedId) {
-    return (
-      <Col className="small-col collec-tree">
-        <div className="tree-view">
-          <div className="title" style={{ backgroundColor: 'white' }}>
-            <i className="fa fa-list" /> &nbsp;&nbsp; Devices
-          </div>
-        </div>
-        <div className="tree-wrapper">
-          {dev.map((device, index) => (
-            <div
-              className="tree-view"
-              key={`device${device.id}`}
-              onClick={() => this.deviceClick(device)}
-              role="button"
-              tabIndex={index === 0 ? 0 : -1}
-            >
-              <div
-                className={`title ${selectedId === device.id ? 'selected' : null}`}
-
-              >
-                {device.name}
-                {selectedId === device.id && this.state.connected ? <ConnectedBtn /> : null}
-                {selectedId === device.id && !this.state.connected ? <DisconnectedBtn /> : null}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Col>
-    );
-  }
-
-  render() {
-    const {
-      devices, selected, showDeviceList,
-      isNotFocused, connected, watching, using, forceCursor
-    } = this.state;
-
-    return (
-      <div>
-        <Grid fluid>
-          <Row className="card-navigation">
-            <Navigation toggleDeviceList={this.toggleDeviceList} />
-          </Row>
-          <Row className="card-content container-fluid" >
-            {showDeviceList ? this.tree(devices, selected.id) : null}
-            <Col className="small-col main-content" >
-              <FocusNovnc
-                isNotFocused={isNotFocused}
-                handleFocus={this.handleFocus}
-                handleBlur={this.handleBlur}
-                connected={connected}
-                watching={watching}
-                using={using}
-                forceCursor={forceCursor}
-                handleCursor={this.handleCursor}
-              />
-              <div
-                className={forceCursor ? 'force-mouse-pointer' : ''}
-                ref={(ref) => { this.canvas = ref; }}
-                onMouseEnter={this.handleMouseEnter}
-                onMouseLeave={this.handleMouseLeave}
-              />
-            </Col>
-          </Row>
-        </Grid>
-      </div>
-    );
-  }
-}
-
-export default CnC;
diff --git a/app/packs/src/libCnC/Navigation.js b/app/packs/src/libCnC/Navigation.js
deleted file mode 100644
index 34bd9a259..000000000
--- a/app/packs/src/libCnC/Navigation.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import { Nav, Navbar, MenuItem, NavDropdown } from 'react-bootstrap';
-
-import UserAuth from 'src/components/navigation/UserAuth';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import UserActions from 'src/stores/alt/actions/UserActions';
-
-import NavNewSession from 'src/components/navigation/NavNewSession';
-import DocumentHelper from 'src/utilities/DocumentHelper';
-
-const NavHead = () => (
-  <Navbar.Brand>
-    <NavDropdown title="Chemotion" className="navig-brand" id="bg-nested-dropdown-brand">
-      <MenuItem eventKey="11" href="http://www.chemotion-repository.net" target="_blank">Chemotion Repository</MenuItem>
-      <MenuItem eventKey="13" href="https://www.complat.kit.edu/26.php" target="_blank">Complat</MenuItem>
-      <MenuItem eventKey="14" href="https://github.com/ComPlat" target="_blank">Complat on Github</MenuItem>
-      <MenuItem divider />
-      <MenuItem eventKey="15" href="/" target="_self">Chemotion</MenuItem>
-    </NavDropdown>
-  </Navbar.Brand>
-);
-
-export default class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentUser: null,
-    };
-    this.onChange = this.onChange.bind(this);
-    this.toggleDeviceList = this.toggleDeviceList.bind(this);
-  }
-
-  componentDidMount() {
-    UserStore.listen(this.onChange);
-    UserActions.fetchCurrentUser();
-  }
-
-  componentWillUnmount() {
-    UserStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    const newId = state.currentUser ? state.currentUser.id : null;
-    const oldId = this.state.currentUser ? this.state.currentUser.id : null;
-    if (newId !== oldId) { this.setState({ currentUser: state.currentUser }); }
-  }
-
-  toggleDeviceList() {
-    this.props.toggleDeviceList();
-  }
-
-  navHeader() {
-    return (
-      <Navbar.Header className="collec-tree">
-        <Navbar.Text style={{ cursor: "pointer" }}>
-          <i
-            className="fa fa-list"
-            style={{ fontStyle: "normal" }}
-            onClick={this.toggleDeviceList}
-          />
-        </Navbar.Text>
-        <Navbar.Text />
-        <NavHead />
-      </Navbar.Header>
-    );
-  }
-
-  render() {
-    const { modalProps } = this.state;
-
-    return this.state.currentUser ? (
-      <Navbar fluid className="navbar-custom">
-        {this.navHeader()}
-        <Nav navbar className="navbar-form">
-        </Nav>
-        <UserAuth />
-        <div style={{ clear: 'both' }} />
-      </Navbar>
-    ) : (
-      <Navbar fluid className="navbar-custom" >
-        {this.navHeader()}
-        <Nav navbar className="navbar-form" />
-        <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />
-        <div style={{ clear: 'both' }} />
-      </Navbar>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/Home.js b/app/packs/src/libHome/Home.js
deleted file mode 100644
index dd6285870..000000000
--- a/app/packs/src/libHome/Home.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Grid, Row } from 'react-bootstrap';
-import Aviator from 'aviator';
-
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import WelcomeMessage from '../components/WelcomeMessage';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-
-import initPublicRoutes from './homeRoutes';
-
-import Navigation from './Navigation';
-import XHome from '../components/extra/HomeXHome';
-import Notifications from '../components/Notifications';
-import RepoEmbargo from './RepoEmbargo';
-import RepoCollection from './RepoCollection';
-import RepoHome from './RepoHome';
-import RepoPubl from './RepoPubl';
-import RepoReview from './RepoReview';
-import RepoAbout from './RepoAbout';
-import RepoContact from './RepoContact';
-import RepoDirective from './RepoDirective';
-import RepoNewsroom from './RepoNewsroom';
-import RepoNewsReader from './RepoNewsReader';
-import RepoNewsEditor from './RepoNewsEditor';
-import RepoHowTo from './RepoHowTo';
-import RepoHowToReader from './RepoHowToReader';
-import RepoHowToEditor from './RepoHowToEditor';
-
-import PublicStore from '../components/stores/PublicStore';
-import RepoElementDetails from './RepoElementDetails';
-import NavFooter from './NavFooter';
-
-import initPublicRoutes from './homeRoutes';
-
-import Navigation from './Navigation';
-import XHome from '../components/extra/HomeXHome';
-import Notifications from '../components/Notifications';
-import RepoEmbargo from './RepoEmbargo';
-import RepoCollection from './RepoCollection';
-import RepoHome from './RepoHome';
-import RepoPubl from './RepoPubl';
-import RepoReview from './RepoReview';
-import RepoAbout from './RepoAbout';
-import RepoContact from './RepoContact';
-import RepoDirective from './RepoDirective';
-import RepoNewsroom from './RepoNewsroom';
-import RepoNewsReader from './RepoNewsReader';
-import RepoNewsEditor from './RepoNewsEditor';
-import RepoHowTo from './RepoHowTo';
-import RepoHowToReader from './RepoHowToReader';
-import RepoHowToEditor from './RepoHowToEditor';
-
-import PublicStore from '../components/stores/PublicStore';
-import RStore from '../components/stores/RStore';
-import RepoElementDetails from './RepoElementDetails';
-import NavFooter from './NavFooter';
-import LoadingModal from '../components/common/LoadingModal';
-
-const extraHomes = () => {
-  const homes = [];
-  const count = XHome.count || 0;
-  for (let j = 0; j < count; j += 1) {
-    homes.push(XHome[`content${j}`]);
-  }
-  return homes;
-};
-
-class Home extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-      guestPage: null
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    RStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-    RStore.unlisten(this.onChange);
-  }
-
-  onChange(publicState) {
-    if ((publicState.guestPage && publicState.guestPage !== this.state.guestPage)
-    || (publicState.listType && publicState.listType !== this.state.listType)) {
-      this.setState(prevState => ({ ...prevState, guestPage: publicState.guestPage, listType: publicState.listType }));
-    }
-  }
-
-  renderGuestPage() {
-    switch (this.state.guestPage) {
-      case 'moleculeArchive':
-        return <RepoPubl listType="moleculeArchive" />;
-      case 'newseditor':
-        return <RepoNewsEditor />;
-      case 'newsreader':
-        return <RepoNewsReader />;
-      case 'newsroom':
-        return <RepoNewsroom />;
-      case 'howtoeditor':
-        return <RepoHowToEditor />;
-      case 'howtoreader':
-        return <RepoHowToReader />;
-      case 'howto':
-        return <RepoHowTo />;
-      case 'about':
-        return <RepoAbout />;
-      case 'contact':
-        return <RepoContact />;
-      case 'publications':
-        return <RepoPubl listType={this.state.listType || ''} />;
-      case 'review':
-        return <RepoReview />;
-      case 'collection':
-        return <RepoCollection />;
-      case 'embargo':
-        return <RepoEmbargo />;
-      case 'dataset':
-      case 'molecule':
-        return <RepoElementDetails />;
-      case 'home':
-        return <RepoHome />;
-      case 'welcome':
-        return <RepoHome />;
-      case 'directive':
-        return <RepoDirective />;
-      default:
-        return <RepoHome />;
-    }
-  }
-
-  renderNavFooter() {
-    switch (this.state.guestPage) {
-      case 'publications':
-      case 'review':
-      case 'embargo':
-      case 'newseditor':
-      case 'newsreader':
-      case 'newsroom':
-      case 'howtoeditor':
-      case 'howtoreader':
-      case 'howto':
-        return <span />;
-      default:
-        return <NavFooter />;
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        { XHome.count && XHome.count > 0
-          ? extraHomes().map((Annex, i) => <Annex key={`Annex_${i}`} />)
-          : (
-            <div>
-              <Grid fluid>
-                <Row className="card-navigation">
-                  <Navigation />
-                  <Notifications />
-                </Row>
-                <Row style={{ margin: '10px' }}>
-                  {this.renderGuestPage()}
-                </Row>
-              </Grid>
-              {this.renderNavFooter()}
-            </div>
-          )
-        }
-        <LoadingModal />
-      </div>
-    );
-  }
-}
-
-const HomeWithDnD = DragDropContext(HTML5Backend)(Home);
-document.addEventListener('DOMContentLoaded', () => {
-  const domElement = document.getElementById('Home');
-  if (domElement) {
-    ReactDOM.render(<HomeWithDnD />, domElement);
-    initPublicRoutes();
-    Aviator.dispatch();
-  }
-});
diff --git a/app/packs/src/libHome/NavNewSession.js b/app/packs/src/libHome/NavNewSession.js
deleted file mode 100644
index d89fbb267..000000000
--- a/app/packs/src/libHome/NavNewSession.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import uuid from 'uuid';
-import {
-  Button,
-  FormGroup,
-  FormControl,
-  Glyphicon,
-  Navbar,
-  NavItem,
-  Nav,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-
-function NewSession({ authenticityToken, omniauthProviders }) {
-  const items = omniauthProviders && Object.keys(omniauthProviders).map((key) => (
-    <Button key={uuid.v4()} className="omniauth-btn" style={{ textAlign: 'left', marginRight: '10px' }} href={`/users/auth/${key}`}>
-      Login with &nbsp;
-      <img src={`/images/providers/${omniauthProviders[key].icon}`} alt={key} title={key} />
-    </Button>
-
-  ));
-
-  return (
-    <div>
-      <Nav pullRight><NavItem href="/users/sign_up"> or Sign Up </NavItem></Nav>
-      <Navbar.Form pullRight>
-        <form id="new_user" className="new_user" action="/users/sign_in" acceptCharset="UTF-8" method="post">
-          <input name="utf8" value="✓" type="hidden" />
-          <input name="authenticity_token" value={authenticityToken} type="hidden" />
-          <OverlayTrigger placement="left" overlay={<Tooltip id="login_tooltip">Log in with email or name abbreviation(case-senstive)</Tooltip>}>
-            <FormGroup>
-              <FormControl id="user_login" type="text" placeholder="Email or name abbreviation" name="user[login]" />
-            </FormGroup>
-          </OverlayTrigger>
-          <FormGroup>
-            <FormControl id="user_password" type="password" name="user[password]" placeholder="password" />
-          </FormGroup>
-          <Button type="submit" bsStyle="primary">
-            <Glyphicon glyph="log-in" />
-          </Button>
-        </form>
-      </Navbar.Form>
-      <Navbar.Form pullRight>{items}</Navbar.Form>
-    </div>
-  );
-}
-
-NewSession.propTypes = {
-  authenticityToken: PropTypes.string.isRequired,
-};
-
-export default NewSession;
\ No newline at end of file
diff --git a/app/packs/src/libHome/RepoAbout.js b/app/packs/src/libHome/RepoAbout.js
deleted file mode 100644
index 3c0b7c04c..000000000
--- a/app/packs/src/libHome/RepoAbout.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-
-const RepoAbout = () => {
-  const bodyStyle = {
-    maxHeight: 'calc(100vh - 262px)',
-    overflowY: 'auto',
-    backgroundColor: '#f5f5f5',
-    borderRadius: '6px',
-    padding: '30px',
-    textAlign: 'center'
-  };
-
-  return (
-    <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-      <Col md={3} />
-      <Col md={6}>
-        <Panel style={{ border: 'none' }}>
-          <Panel.Heading style={{ backgroundColor: 'white', border: 'none' }}>
-            <CardIcons />
-          </Panel.Heading>
-          <Panel.Body style={bodyStyle}>
-            <CardAbout />
-          </Panel.Body>
-        </Panel>
-      </Col>
-      <Col md={3} />
-    </Row>
-  );
-};
-
-const CardIcons = () =>
-  (
-    <div className="card-icons">
-      <Col md={4}>
-        <img src="/images/repo/KIT.png" alt="Karlsruhe Institute of Technology" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/chemotion_full.svg" alt="" />
-      </Col>
-      <Col md={4}>
-        <img src="/images/repo/dfg_logo.png" alt="" />
-      </Col>
-    </div>
-  );
-
-const CardAbout = () =>
-  (
-    <div>
-      <p>This development is part of the work of the Stefan Bräse group at the KIT.</p>
-      <br />
-      <h2>Project description and mission</h2>
-      <div style={{ textAlign: 'justify' }}>
-        <p>
-          The repository Chemotion was developed as a freely available infrastructure for the
-          publication of research data in order to increase the amount of available data and
-          to improve the quality of the information obtained and published.
-        </p>
-        <p>
-          The aim of Chemotion repository is to make a substantial contribution to securing
-          research results in a cost-efficient and simple manner, to support scientists, in
-          particular chemists, in their efforts to generate FAIR data and to increase the
-          visibility of research data in the domain of chemistry.
-        </p>
-        <p>
-          Free access to and free use of scientific data is one principle of this project
-          allowing and promoting collaborative work and scientific exchange among scientists.
-          We think that openly available data is the prerequisite for better science in terms
-          of more efficient and sustainable work but also with respect to a faster progress of
-          science in general.
-        </p>
-        <p>
-          To date, a lot of research data in chemistry is not made available due to technical
-          limitations and missing infrastructure. Chemotion repository can be used to overcome
-          these limitations - providing an option for the chemistry community to collect and
-          share data on chemical reactions and analytical data of chemical compounds. The
-          repository can be used to build data collections as an alternative to commercial
-          databases.
-        </p>
-        <p>
-          The mission of Chemotion repository is supported by its host institution KIT and
-          the science data center MoMaF as well as the National Research Data Infrastructure
-          NFDI4Chem.
-        </p>
-      </div>
-      <br />
-      <h2>Chemotion repository and related projects</h2>
-      <div style={{ textAlign: 'justify' }}>
-        <p>
-          Chemotion repository is one of several projects that are built to support research
-          data management in chemistry.
-          It can be used as stand alone software for the publication of research data or it
-          can be used in combination with chemotion ELN (electronic lab notebook), an open source
-          software for the documentation of research data. Both system are being developed on the
-          same technological level which allows a combination of recording and documentation as
-          well as publication and storage of data sets. The ELN enables a fast and easy transfer
-          of selected research data to the repository as a requirement for efficient strategies
-          for the publication of research data.
-        </p>
-      </div>
-      <br />
-      <h3>Imprint</h3>
-      <h4>Karlsruhe Institute of Technology</h4>
-      <h4>Leader of the research group</h4>
-      <p>Prof. Stefan Bräse </p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Fritz-Haber-Weg 6, Geb. 30.42</p>
-      <p>76131 Karlsruhe </p>
-      <p>Germany</p>
-      <br />
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)</p>
-      <p>Hermann-von-Helmholtz-Platz 1, Geb. 341</p>
-      <p>76344 Eggenstein-Leopoldshafen</p>
-      <p>Phone: +49 721 608 42903</p>
-      <p>Fax: +49 721 608 48581</p>
-      <br />
-      <p />
-      <a href="http://www.ioc.kit.edu/braese/" target="_blank" rel="noopener noreferrer">Homepage Prof. Bräse</a>
-      <br />
-      <h4>Office Campus North (KIT)</h4>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <p>Institute of Organic Chemistry</p>
-      <p>Institute of Biological and Chemical Systems – Functional Molecular Systems</p>
-      <p>Hermann-von-Helmholtz-Platz 1</p>
-      <p>76344 Eggenstein-Leopoldshafen </p>
-      <p>Germany</p>
-      <p>Phone: +49 721 608 24697 </p>
-      <br />
-      <h4>Authors</h4>
-      <p>Prof. Stefan Braese</p>
-      <p>Dr. Nicole Jung, Dr. Pierre Tremouilhac</p>
-      <br />
-      <h3>Copyright Notices</h3>
-      <div style={{ textAlign: 'justify' }}>
-        <p>
-          Unless otherwise stated, <i>chemotion-repository</i> and/or its contributors own
-          the intellectual property rights in the website and material on the website.
-          Subject to the license below, all these intellectual property rights are reserved.
-          <br />
-          Each content contributed and published by a user can be made available under one of
-          the following licenses that the contributing user has chosen during the publication
-          process:
-        </p>
-        <ul>
-          <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg" style={{ borderStyle: 'none' }} alt="CC BY SA" />{' '}
-              Creative Commons Attribution-ShareAlike 4.0 International License
-            </a>
-          </li>
-          <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="https://creativecommons.org/licenses/by/4.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg" style={{ borderStyle: 'none' }} alt="CC BY" />{' '}
-              Creative Commons Attribution 4.0
-            </a>
-          </li>
-          <li>
-            <a rel="license noopener noreferrer external" target="_blank" href="http://creativecommons.org/publicdomain/zero/1.0/" >
-              <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/cc-zero.svg" style={{ borderStyle: 'none' }} alt="CC0" />{' '}
-              CC0 1.0 Universal
-            </a>
-          </li>
-        </ul>
-        <p>
-          The contributing user may select the type of license during the publication process or
-          choose not to apply any license.
-          Contributors should be aware that some research data is not suitable for a licensing
-          option as it may be in the public domain. Public domain data should be added without a
-          license if this is apparent.
-        </p>
-        <p>
-          The source code of the chemotion REPOSITORY web server and client is currently licensed under the <a rel="license" href="https://github.com/ComPlat/chemotion_REPO/blob/chemotion_REPO/LICENSE" > GNU Affero General Public License v3.0</a>.
-          The code can be found on <a href="https://github.com/complat/chemotion_REPO" target="_blank" rel="noopener noreferrer">github</a>.
-        </p>
-        <p>DOI®, DOI.ORG®, and shortDOI® are trademarks of the International DOI Foundation.</p>
-        <br />
-      </div>
-
-      <h3>Content</h3>
-      <div style={{ textAlign: 'justify' }} >
-        <p>
-          All texts, pictures and other information published here are subject to
-          copyright. The logo may not be used without the prior consent
-          of the working group.
-          A change of the logo is not permitted. The contents of our website are
-          created with the utmost care. Nevertheless, no guarantee for topicality
-          and completeness can be taken over. The Compound Platform does not
-          assume any responsibility for any web content connected by a link,
-          as this is not its own content.
-        </p>
-      </div>
-    </div>
-  );
-
-export default RepoAbout;
diff --git a/app/packs/src/libHome/RepoCardIntro.js b/app/packs/src/libHome/RepoCardIntro.js
deleted file mode 100644
index 53a81cd3f..000000000
--- a/app/packs/src/libHome/RepoCardIntro.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Col, Row } from 'react-bootstrap';
-import RepoCardLatestPublish from './RepoCardLatestPublish';
-
-const RepoCardIntro = ({ lastPublished }) => (
-  <div className="repo-intro">
-    <Row>
-      <Col lg={12} md={12} sm={12}>
-        <h1>Repository for samples, reactions and related research data</h1>
-      </Col>
-    </Row>
-    <Row className="row-bottom">
-      <Col lg={4} md={4} sm={12}>
-        <div className="card-well-competition card-nfdi4chem">
-          <h4>
-            this repository is part of the strategy of
-          </h4>
-          <img
-            className="icon-nfdi4chem"
-            src="/images/repo/NFDI4Chem_logo.svg"
-            key="NFDI4Chem"
-            alt="NFDI4Chem"
-          />
-        </div>
-      </Col>
-      <Col lg={8} md={8} sm={12}>
-        <RepoCardLatestPublish lastPublished={lastPublished} />
-      </Col>
-    </Row>
-  </div>
-);
-
-export default RepoCardIntro;
diff --git a/app/packs/src/libHome/RepoCardIntro1.js b/app/packs/src/libHome/RepoCardIntro1.js
deleted file mode 100644
index 489b1f186..000000000
--- a/app/packs/src/libHome/RepoCardIntro1.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoCardLatestPublish from './RepoCardLatestPublish';
-
-const RepoCardIntro1 = ({ lastPublished }) => (
-  <div className="repo-intro" style={{ flexDirection: 'column' }}>
-    <Row style={{ display: 'flex', alignItems: 'center' }}>
-      <Col lg={6} md={6} sm={12}>
-        <img
-          className="icon-chemotion"
-          src="/images/repo/Chemotion-V1.png"
-          key="chemotion_full"
-          alt="Chemotion Repository"
-        />
-      </Col>
-      <Col lg={6} md={6} sm={12}>
-        <RepoCardLatestPublish lastPublished={lastPublished} />
-      </Col>
-    </Row>
-    <Row style={{ fontSize: '120%' }}>
-      <Col lg={12} md={12} sm={12}>
-        <ul className="list">
-          <li>
-            Publish your <b>structures</b> and <b>reactions</b>, attach your characterization data, and make them citable via <b>DOI</b>
-          </li>
-          <li>
-            Automated registration at various scientific data providers
-          </li>
-          <li>
-            <h4 style={{ display: 'inline' }}><Label style={{ backgroundColor: '#ff5555', textShadow: '2px 2px #555' }}>NEW</Label></h4>
-            <i>&nbsp;Find chemical compounds from <b>Molecular Archive</b></i>
-          </li>
-        </ul>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default RepoCardIntro1;
diff --git a/app/packs/src/libHome/RepoCardLatestPublish.js b/app/packs/src/libHome/RepoCardLatestPublish.js
deleted file mode 100644
index 486606373..000000000
--- a/app/packs/src/libHome/RepoCardLatestPublish.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { Carousel } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import PublicActions from '../components/actions/PublicActions';
-
-const timeInterval = (_date) => {
-  let date = _date;
-  if (!date) { return null; }
-  switch (typeof date) {
-    case 'number':
-      break;
-    case 'string':
-      date = +new Date(date);
-      break;
-    case 'object':
-      if (date.constructor === Date) date = date.getTime();
-      break;
-    default:
-      date = +new Date();
-  }
-  const seconds = Math.floor((new Date() - date) / 1000);
-  const intrvlTypes = [
-    [31536000, 'year', 'a'],
-    [2592000, 'month', 'a'],
-    [604800, 'week', 'a'],
-    [86400, 'day', 'a'],
-    [3600, 'hour', 'an'],
-    [60, 'minute', 'a'],
-    [1, 'second', 'a'],
-  ];
-  let intrvlCount = 0;
-  const intrvlType = intrvlTypes.find((e) => {
-    intrvlCount = Math.floor(seconds / e[0]);
-    return intrvlCount >= 1;
-  });
-  return `${intrvlCount === 1 ? intrvlType[2] : intrvlCount} ${intrvlType[1]}${intrvlCount > 1 ? 's' : ''} ago`;
-};
-
-const RepoCardLatestPublish = ({ lastPublished }) => {
-  if (lastPublished) {
-    const { sample, reaction } = lastPublished;
-    const svgPathSample = sample.sample_svg_file
-      ? `/images/samples/${sample.sample_svg_file}`
-      : `/images/molecules/${sample.molecule.molecule_svg_file}`;
-    const pubTagSample = sample.tag || {};
-    const svgPathReaction = reaction
-      ? `/images/reactions/${reaction.reaction_svg_file}`
-      : '/images/no_image_180.svg';
-    const pubTagReaction = reaction.tag || {};
-    return (
-      <div className="card-well-competition card-latest">
-        <Carousel className="carl-spt" indicators={false} interval={6000}>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayMolecule(sample.molecule.id)}>
-                <SVG src={svgPathSample} key={svgPathSample} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagSample.published_at || pubTagSample.doi_reg_at || pubTagSample.queued_at)} by {sample.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-          <Carousel.Item className="carl-spt-item">
-            <div className="img">
-              <a title="Click to view details" onClick={() => PublicActions.displayReaction(reaction.id)}>
-                <SVG src={svgPathReaction} key={svgPathReaction} className="carl-sample" />
-              </a>
-              <Carousel.Caption className="caption">
-                Published {timeInterval(pubTagReaction.published_at || pubTagReaction.doi_reg_at || pubTagReaction.queued_at)} by {reaction.contributor}
-              </Carousel.Caption>
-            </div>
-          </Carousel.Item>
-        </Carousel>
-      </div>
-    );
-  }
-  return <div />;
-};
-
-export default RepoCardLatestPublish;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive.js b/app/packs/src/libHome/RepoCardMoleculeArchive.js
deleted file mode 100644
index 4c9be0e6e..000000000
--- a/app/packs/src/libHome/RepoCardMoleculeArchive.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import CountUp from 'react-countup';
-import Aviator from 'aviator';
-
-const RepoCardMoleculeArchive = (params) => {
-  const { publishedStatics } = params;
-  let count = 0;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    count = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'xvial'))?.e_cnt || 0;
-  }
-  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
-  return (
-    <Row className="repo-statistic">
-      <Col lg={12} md={12} sm={12}>
-        <h3>archive for materials</h3>
-      </Col>
-      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <Row className="rl">
-            <OverlayTrigger placement="top" overlay={tooltipView}>
-              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
-                <i className="icon-sample" />
-              </Button>
-            </OverlayTrigger>
-            <div className="tit">Samples</div>
-          </Row>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <div className="rr">
-            <div className="cnt">
-              <CountUp end={count} />{' '}
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
-                  published
-                </Button>
-              </OverlayTrigger>
-            </div>
-            <div className="italic-desc">Compounds</div>
-          </div>
-        </Col>
-      </Col>
-      <Col lg={12} md={12} sm={12}>
-        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
-          <img
-            className="icon-molecule-archive2"
-            src="/images/repo/molecule-archive-logo-weiss.svg"
-            key="chemotion_full"
-            alt="Molecule Archive"
-          />
-        </Col>
-        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
-          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
-        </Col>
-      </Col>
-    </Row>
-  );
-};
-
-export default RepoCardMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoCardMoleculeArchive1.js b/app/packs/src/libHome/RepoCardMoleculeArchive1.js
deleted file mode 100644
index db37aea03..000000000
--- a/app/packs/src/libHome/RepoCardMoleculeArchive1.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-// import Aviator from 'aviator';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-
-const RepoCardMoleculeArchive1 = () => {
-  const tooltipView = <Tooltip id="id_icon_tip">Click to view chemical compounds</Tooltip>;
-  return (
-    <Row className="repo-statistic">
-      <Col lg={12} md={12} sm={12}>
-        <h3>archive for materials</h3>
-      </Col>
-      <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <Row className="rl">
-            <OverlayTrigger placement="top" overlay={tooltipView}>
-              <Button className="animation-ring" bsStyle="link" onClick={() => Aviator.navigate('/home/moleculeArchive')}>
-                <i className="icon-sample" />
-              </Button>
-            </OverlayTrigger>
-            <div className="tit">Samples</div>
-          </Row>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-          <div className="rr">
-            <div className="cnt">
-              <CountUp end={1680} />
-            </div>
-            <div className="italic-desc">Compounds</div>
-          </div>
-        </Col>
-      </Col>
-      <Col lg={12} md={12} sm={12}>
-        <Col lg={4} md={4} sm={4} className="panel-heading dtl">
-          <img
-            className="icon-molecule-archive2"
-            src="/images/repo/molecule-archive-logo-weiss.svg"
-            key="chemotion_full"
-            alt="Molecule Archive"
-          />
-        </Col>
-        <Col lg={8} md={8} sm={8} className="panel-heading dtl">
-          find chemical compounds provided as reference compounds from <b>Molecule Archive</b>
-        </Col>
-      </Col>
-    </Row>
-  );
-};
-
-export default RepoCardMoleculeArchive1;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard.js b/app/packs/src/libHome/RepoCardStaticsBoard.js
deleted file mode 100644
index 708d97d56..000000000
--- a/app/packs/src/libHome/RepoCardStaticsBoard.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { Button, Col, Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import RepoNavListTypes from './RepoNavListTypes';
-
-const RepoCardStaticsBoard = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = {
-      sample: `publications=${RepoNavListTypes.SAMPLE}`,
-      reaction: `publications=${RepoNavListTypes.REACTION}`
-    };
-    return (
-      <Row className="repo-statistic">
-        <Col lg={12} md={12} sm={12}>
-          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                  <i className="icon-sample" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Samples</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                  <i className="icon-reaction" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="fa fa-area-chart i-ext" aria-hidden />
-              <div className="tit">Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
-              <div style={{ display: 'flex' }}>
-                <div>Top 3:&nbsp;&nbsp;</div>
-                <div className="italic-desc">
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
-                  <br />
-                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
-                  <br />
-                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
-                </div>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
-export default RepoCardStaticsBoard;
diff --git a/app/packs/src/libHome/RepoCardStaticsBoard1.js b/app/packs/src/libHome/RepoCardStaticsBoard1.js
deleted file mode 100644
index 75dabf684..000000000
--- a/app/packs/src/libHome/RepoCardStaticsBoard1.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Label, Col, Row, Carousel, Thumbnail, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import CountUp from 'react-countup';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoNavListTypes from './RepoNavListTypes';
-
-const RepoCardStaticsBoard1 = (params) => {
-  const { publishedStatics } = params;
-  if (publishedStatics && publishedStatics.length !== 0) {
-    const stsSample = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample'));
-    const stsSampleReview = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-review'));
-    const stsSampleEmbargo = publishedStatics.find(p => (p.el_type === 'sample' && p.ex_type === 'sample-embargo'));
-    const stsReaction = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction'));
-    const stsReactionReview = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-review'));
-    const stsReactionEmbargo = publishedStatics.find(p => (p.el_type === 'reaction' && p.ex_type === 'reaction-embargo'));
-    const stsAnalysis = publishedStatics.filter(p => p.el_type === 'analysis');
-    const stsAnalysisSort = stsAnalysis.sort((a, b) => a.e_cnt - b.e_cnt).reverse();
-    const stsAnalysisCnt = stsAnalysisSort
-      .map(e => Number(e.e_cnt)).reduce((accumulator, currentValue) => accumulator + currentValue);
-    const tooltipView = <Tooltip id="id_icon_tip">Click to view publications</Tooltip>;
-    const pubPage = { sample: `publications=${RepoNavListTypes.SAMPLE}`, reaction: `publications=${RepoNavListTypes.REACTION}` };
-    return (
-      <Row className="repo-statistic">
-        <Col lg={12} md={12} sm={12}>
-          <h3 style={{ textAlign: 'center' }}>research data repository</h3>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                  <i className="icon-sample" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Samples</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsSample.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.sample); PublicActions.getMolecules({ listType: 'sample' }); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsSampleReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsSampleEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <OverlayTrigger placement="top" overlay={tooltipView}>
-                <Button className="animation-ring" bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                  <i className="icon-reaction" />
-                </Button>
-              </OverlayTrigger>
-              <div className="tit">Reactions</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt">
-                <CountUp end={stsReaction.e_cnt} />{' '}
-                <OverlayTrigger placement="top" overlay={tooltipView}>
-                  <Button bsStyle="link" onClick={() => { PublicActions.openRepositoryPage(pubPage.reaction); PublicActions.getReactions(); }}>
-                    published
-                  </Button>
-                </OverlayTrigger>
-              </div>
-              <div className="italic-desc">{stsReactionReview.e_cnt} under review</div>
-              <div className="italic-desc">{stsReactionEmbargo.e_cnt} under embargo</div>
-            </Row>
-          </Col>
-        </Col>
-        <Col lg={12} md={12} sm={12} className="panel panel-info elem-info">
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rl">
-              <i className="fa fa-area-chart i-ext" aria-hidden />
-              <div className="tit">Analyses</div>
-            </Row>
-          </Col>
-          <Col lg={12} md={12} sm={12} className="panel-heading dtl">
-            <Row className="rr">
-              <div className="cnt"><CountUp end={stsAnalysisCnt} />&nbsp;<span className="tit">published</span></div>
-              <div style={{ display: 'flex' }}>
-                <div>Top 3:&nbsp;&nbsp;</div>
-                <div className="italic-desc">
-                  {stsAnalysisSort[0].e_cnt}&nbsp;{stsAnalysisSort[0].ex_type}
-                  <br />
-                  {stsAnalysisSort[1].e_cnt}&nbsp;{stsAnalysisSort[1].ex_type}
-                  <br />
-                  {stsAnalysisSort[2].e_cnt}&nbsp;{stsAnalysisSort[2].ex_type}
-                </div>
-              </div>
-            </Row>
-          </Col>
-        </Col>
-      </Row>
-    );
-  }
-  return <div />;
-};
-
-export default RepoCardStaticsBoard1;
diff --git a/app/packs/src/libHome/RepoCollection.js b/app/packs/src/libHome/RepoCollection.js
deleted file mode 100644
index 4c210b6e7..000000000
--- a/app/packs/src/libHome/RepoCollection.js
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import uuid from 'uuid';
-import RepoCollectionDetails from './RepoCollectionDetails';
-import PublicStore from '../components/stores/PublicStore';
-import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-
-const SvgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-const infoTag = (el, la) => {
-  let authorInfo = '';
-  authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{el.published_by}</div></div>);
-  return (
-    <Row key={`list-reaction-info-${el.id}`} className="home_wrapper">
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>ID</div><div className="item_xvial">{`${el.type === 'Reaction' ? 'CRR' : 'CRS'}-${el.pub_id}`}</div>
-        </div>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>Embargo</div><div className="item_xvial">{la}</div>
-        </div>
-      </OverlayTrigger>
-      {authorInfo}
-      <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{el.published_at}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Analyses</div><div className="item_xvial">{el.ana_cnt || 0}</div>
-      </div>
-    </Row>
-  );
-};
-
-const Elist = (cid, la, el, selectEmbargo = null, user = null, element = null, fetchEmbargoElement = () => {}) => {
-  if (!el) {
-    return '';
-  }
-  let listClass;
-  if (el.type === 'Reaction') {
-    listClass = (element?.publication && element.publication.element_id === el.id) ? 'list_focus_on' : 'list_focus_off';
-  } else {
-    listClass = (element?.published_samples && element.published_samples[0] && element.published_samples[0].sample_id === el.id) ? 'list_focus_on' : 'list_focus_off';
-  }
-  return (
-    <Col md={element ? 12 : 6} key={`list-embargo-${el.id}`} onClick={() => fetchEmbargoElement(cid, el)}>
-      <div className={`home_reaction ${listClass}`}>
-        <Row key={`list-reaction-svg-${el.id}`}>
-          <Col md={12}>
-            <SVG src={SvgPath(el.svg, el.type)} className="layout_svg_reaction" key={el.svg} height={300} />
-          </Col>
-        </Row>
-        {infoTag(el, la)}
-      </div>
-    </Col>
-  );
-};
-
-export default class RepoCollection extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      element: null,
-      selectEmbargo: null,
-      showInfoModal: false,
-      showMetadataModal: false,
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleInfoShow = this.handleInfoShow.bind(this);
-    this.handleInfoClose = this.handleInfoClose.bind(this);
-    this.handleMetadataShow = this.handleMetadataShow.bind(this);
-    this.handleMetadataClose = this.handleMetadataClose.bind(this);
-    this.fetchEmbargoElement = this.fetchEmbargoElement.bind(this);
-    this.fetchEmbargoElements = this.fetchEmbargoElements.bind(this);
-  }
-
-  componentDidMount() {
-    EmbargoStore.listen(this.onChange);
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    EmbargoStore.unlisten(this.onChange);
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.elements && state.elements != this.state.elements) {
-      this.setState({ elements: state.elements });
-    }
-    if (state.selectEmbargo && state.selectEmbargo != this.state.selectEmbargo) {
-      this.setState({ selectEmbargo: state.selectEmbargo });
-      this.fetchEmbargoElements(state.selectEmbargo.element_id);
-    }
-
-    if (state.element !== this.state.element) {
-      this.setState({ element: state.element });
-    }
-  }
-
-  fetchEmbargoElements(embargoId) {
-    EmbargoFetcher.fetchEmbargoElements(embargoId)
-      .then((result) => {
-        if (!result.error) {
-          const {
-            elements, current_user, embargo
-          } = result;
-          this.setState({
-            selectEmbargo: embargo,
-            elements,
-            currentUser: current_user
-          });
-        }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  fetchEmbargoElement(cid, el) {
-    EmbargoFetcher.fetchEmbargoElement(cid, el)
-      .then((result) => {
-        if (!result.error) { this.setState({ element: result }); }
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  handleInfoShow() {
-    this.setState({ showInfoModal: true });
-  }
-
-  handleInfoClose() {
-    this.setState({ showInfoModal: false });
-  }
-
-  handleMetadataShow() {
-    this.setState({ showMetadataModal: true });
-  }
-
-  handleMetadataClose() {
-    this.setState({ showMetadataModal: false });
-  }
-
-  renderSearch() {
-    const { selectEmbargo, elements } = this.state;
-    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
-
-    const actionButtons =
-      (
-        <span style={{ float: 'right' }}>
-          <ButtonToolbar>
-            <Button
-              id="all-info-button"
-              disabled={selectEmbargo === null || (elements && elements.length === 0)}
-              onClick={() => this.handleMetadataShow()}
-            >
-              <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
-            </Button>
-            <Button
-              id="all-info-button"
-              disabled={selectEmbargo === null || (elements && elements.length === 0)}
-              onClick={() => this.handleInfoShow()}
-            >
-              <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
-            </Button>
-            <Button href="/home/publications" target="_blank">
-              back to all publications
-            </Button>
-          </ButtonToolbar>
-        </span>
-      );
-    const filterDropdown = (
-      <ButtonGroup>
-        {actionButtons}
-      </ButtonGroup>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        <span><b>The data on this page refers to the data collection: &nbsp;{la}&nbsp;</b></span>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      elements, element, currentUser, showInfoModal, selectEmbargo, showMetadataModal
-    } = this.state;
-    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
-    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
-    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={element ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch()}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div className="public-list" style={{ backgroundColor: '#efefef' }}>
-            <Table className="sample-entries">
-              <tbody>
-                {((typeof (elements) !== 'undefined' && elements) || []).map(r => Elist(id, la, r, selectEmbargo, currentUser, element, this.fetchEmbargoElement)) }
-              </tbody>
-            </Table>
-          </div>
-        </Col>
-        <Col md={element ? 8 : 0}>
-          <div className="public-element">
-            <RepoCollectionDetails element={element} />
-          </div>
-          <InfoModal
-            key="info-modal"
-            showModal={showInfoModal}
-            selectEmbargo={selectEmbargo}
-            onCloseFn={this.handleInfoClose}
-            editable
-          />
-          <MetadataModal
-            key="metadata-modal"
-            showModal={showMetadataModal}
-            label={la}
-            metadata={metadata}
-            onCloseFn={this.handleMetadataClose}
-            elementId={id}
-            elementType="Collection"
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoCollectionDetails.js b/app/packs/src/libHome/RepoCollectionDetails.js
deleted file mode 100644
index 85eeb1168..000000000
--- a/app/packs/src/libHome/RepoCollectionDetails.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoCollectionDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    };
-    this.loadSVG = this.loadSVG.bind(this);
-  }
-
-  componentDidMount() {
-    const { element } = this.state;
-    if (element) {
-      this.loadSVG(element);
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.props.element !== prevProps.element) {
-      this.loadSVG(this.props.element);
-    }
-  }
-
-  loadSVG(element) {
-    this.setState({ element });
-  }
-
-  switchTypeRender() {
-    const { element } = this.props;
-    if (typeof (element) === 'undefined' || !element) {
-      return <span />;
-    }
-    const elementType = element && element.elementType;
-
-    switch (elementType) {
-      case 'reaction': return <RepoReactionDetails isPublished reaction={element} />;
-      case 'molecule': return <RepoSampleDetails isPublished element={element} />;
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>);
-  }
-}
diff --git a/app/packs/src/libHome/RepoCommon.js b/app/packs/src/libHome/RepoCommon.js
deleted file mode 100644
index 2490ac609..000000000
--- a/app/packs/src/libHome/RepoCommon.js
+++ /dev/null
@@ -1,2372 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { replace } from 'lodash';
-import {
-  Button,
-  Checkbox,
-  Col,
-  ControlLabel,
-  Form,
-  FormControl,
-  FormGroup,
-  Grid,
-  InputGroup,
-  Label,
-  OverlayTrigger,
-  Panel,
-  Row,
-  Table,
-  Tooltip
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import Clipboard from 'clipboard';
-import moment from 'moment';
-import Select from 'react-select';
-import uuid from 'uuid';
-import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
-import { RepoCommentBtn } from 'repo-review-ui';
-import ContainerComponent from './ContainerComponent';
-import Formula from '../components/common/Formula';
-import HelpInfo from '../components/common/HelpInfo';
-import PubchemLabels from '../components/PubchemLabels';
-import QuillViewer from '../components/QuillViewer';
-import { ChemotionTag } from '../components/PublishCommon';
-import Sample from '../components/models/Sample';
-import Reaction from '../components/models/Reaction';
-import PrintCodeButton from '../components/common/PrintCodeButton';
-import { stopBubble } from '../components/utils/DomHelper';
-import RepoContainerDatasets from './RepoContainerDatasets';
-import ImageModal from '../components/common/ImageModal';
-import Utils from '../components/utils/Functions';
-import { hNmrCheckMsg, cNmrCheckMsg, instrumentText } from '../components/utils/ElementUtils';
-import { contentToText } from '../components/utils/quillFormat';
-import { chmoConversions } from '../components/OlsComponent';
-import DropdownButtonSelection from '../components/common/DropdownButtonSelection';
-import InputButtonField from '../components/common/InputButtonField';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import PublicActions from '../components/actions/PublicActions';
-import RepoUserComment from '../components/common/RepoUserComment';
-import RepoPublicComment from '../components/common/RepoPublicComment';
-import { previewContainerImage } from '../components/utils/imageHelper';
-import RepoXvialButton from '../components/common/RepoXvialButton';
-import RepoPreviewImage from '../components/common/RepoPreviewImage';
-import { Citation, RefByUserInfo } from '../components/LiteratureCommon';
-import RepoSegment from './RepoSegment';
-import RepoMolViewerBtn from './RepoMolViewerBtn';
-import RepoMolViewerListBtn from './RepoMolViewerListBtn';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-
-const hideInfo = _molecule => ((_molecule?.inchikey === 'DUMMY') ? { display: 'none' } : {});
-
-const CollectionDesc = (props) => {
-  let { label } = props;
-  if (typeof label !== 'string') return null;
-  if (label.match(/Reviewing/)) {
-    label = 'Reviewing';
-  } else if (label.match(/Element To Review/)) {
-    label = 'Element To Review';
-  } else if (label.match(/Reviewed/)) {
-    label = 'Reviewed';
-  }
-  const descs = {
-    Chemotion: 'Collection of all the samples and reactions, with analytical datasets, published on the Chemotion-Repository.',
-    'Scheme-only reactions': 'Collections of published scheme-only reactions (no associated analytical data).',
-    'My Published Elements': 'Collection of the published samples and reactions you submitted. The samples/reactions that were embargoed are placed in sub-folders.',
-    'Pending Publications': 'Collection of the samples and reactions you have submitted and are currently being reviewed.',
-    Reviewing: 'Collection of the samples and reactions that have been reviewed by a reviewer and needs revision from your side.',
-    'Element To Review': 'Collection of the samples and reactions that currently have to be reviewed.',
-    Reviewed: 'Collection of the samples and reactions that were reviewed and sent back to the submitters for revision/corrections (Read-Only). Waiting for resubmission.',
-    'Embargoed Publications': 'Collection under an embargo: the collection can only be released and its elements made public after all its elements have been accepted by a reviewer.'
-  };
-  const desc = descs[label];
-  if (desc === undefined) return null;
-  return (
-    <div style={{ float: 'right' }}>
-      <OverlayTrigger placement="right" overlay={<Tooltip id={uuid.v4()}>{desc}</Tooltip>}>
-        <i className="fa fa-info-circle" />
-      </OverlayTrigger>
-    </div>
-  );
-};
-
-const resizableSvg = (path, extra = null) => (
-  <div className="preview-table" style={{ cursor: 'row-resize' }}>
-    {extra}
-    <SvgFileZoomPan svgPath={path} duration={300} resize />
-  </div>
-);
-
-const ChemotionId = props => (
-  <h5>
-    <b>{props.type?.replace(/^\w/, c => c.toUpperCase())} ID:&nbsp;</b>
-    <Button key={`reaction-jumbtn-${props.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${props.id}`; }}>
-      {props.type === 'reaction' ? 'CRR' : 'CRS'}-{props.id}
-    </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${props.id}`} />
-  </h5>
-);
-ChemotionId.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.oneOf(['sample', 'reaction']).isRequired
-};
-
-const SchemeWord = () => <span className="reaction-scheme-word">(scheme)</span>;
-
-
-const NewsroomTemplate = {
-  title: '', content: {}, article: []
-};
-
-const HomeFeature = props => (
-  <div className="feature-block">
-    <h3><div><i className={`${props.fa}`} aria-hidden="true" /></div>&nbsp;{props.title}</h3>
-    <p>
-      {props.intro}
-    </p>
-  </div>
-);
-
-HomeFeature.propTypes = {
-  fa: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  intro: PropTypes.string.isRequired
-};
-
-const LicenseLegalCode = (cp) => {
-  let presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-  let presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-  switch (cp) {
-    case 'CC BY-SA':
-      presentLicense = 'Creative Commons Attribution-ShareAlike 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by-sa/4.0/legalcode';
-      break;
-    case 'CC BY':
-      presentLicense = 'Creative Commons Attribution 4.0 International License';
-      presentHref = 'https://creativecommons.org/licenses/by/4.0/legalcode';
-      break;
-    case 'CC0':
-      presentLicense = 'CC0 1.0 Universal';
-      presentHref = 'https://creativecommons.org/publicdomain/zero/1.0/legalcode';
-      break;
-    case 'No License':
-      presentLicense = 'No License';
-      presentHref = '';
-      break;
-    default:
-      break;
-  }
-  return <span><b>{presentLicense}</b>&nbsp;{presentHref === '' ? null : <a rel="noreferrer noopener" target="_blank" href={presentHref}>View Legal Code</a>}</span>;
-};
-
-const nmrMsg = (sample, container) => {
-  if (sample.molecule && container.extended_metadata &&
-    (typeof container.extended_metadata?.kind === 'undefined' ||
-      (container.extended_metadata?.kind?.split('|')[0].trim() !== chmoConversions.nmr_1h?.termId && container.extended_metadata.kind?.split('|')[0].trim() !== chmoConversions.nmr_13c?.termId)
-    )) {
-    return '';
-  }
-  const nmrStr = container.extended_metadata && contentToText(container.extended_metadata.content);
-
-  if (container.extended_metadata.kind?.split('|')[0].trim() === chmoConversions.nmr_1h?.termId) {
-    const msg = hNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>1</sup>H {msg})</div>);
-  } else if (container.extended_metadata?.kind?.split('|')[0].trim() === chmoConversions.nmr_13c?.termId) {
-    const msg = cNmrCheckMsg(sample.molecule.sum_formular, nmrStr);
-    return msg === '' ? (<div style={{ display: 'inline', color: 'green' }}>&nbsp;<i className="fa fa-check" /></div>) : (<div style={{ display: 'inline', color: 'red' }}>&nbsp;(<sup>13</sup>C {msg})</div>);
-  }
-  return '';
-};
-
-// the requirements for file types as given
-const isFileTypePass = (analysisType, attachments) => {
-  const baseType = ['jpg', 'jpeg', 'png', 'tiff'];
-  const nmrType = ['jcamp', 'dx', 'jdx'];
-  let files = [];
-  switch (analysisType) {
-    case '1H NMR':
-    case chmoConversions.nmr_1h?.termId:
-    case '13C NMR':
-    case chmoConversions.nmr_13c?.termId:
-    case '15N NMR':
-    case 'NMR':
-    case 'IR':
-    case chmoConversions.ir.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      files = attachments.filter(f => nmrType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    case 'EA':
-    case chmoConversions.ea.termId:
-    case 'X-Ray':
-    case 'Crystall-Structure':
-    case chmoConversions.crystal_structure.termId:
-      files = attachments.filter(f => baseType.includes(f.filename.split('.').pop().toLowerCase()) && !f.is_deleted);
-      if (files.length < 1) return false;
-      break;
-    default:
-      break;
-  }
-  return true;
-};
-
-// at least one dataset has to be attached
-// in dataset: instrument has to be given
-const isDatasetPass = (analysis) => {
-  const dataset = analysis.children;
-  const attachments = dataset.filter(d => d.attachments.length > 0 && !d.is_deleted);
-  if (attachments.length < 1) return false;
-  const instruments = dataset.filter(d => d.extended_metadata && (d.extended_metadata.instrument || '').trim() !== '' && !d.is_deleted);
-  if (instruments.length < 1) return false;
-  const analysisType = (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  const files = attachments.filter(d => isFileTypePass(analysisType, d.attachments));
-  if (files.length < 1) return false;
-  return true;
-};
-
-const isNmrPass = (analysis, sample) => {
-  const nmrStr = analysis.extended_metadata && contentToText(analysis.extended_metadata.content);
-  const nmrType = analysis.extended_metadata && (analysis.extended_metadata.kind || '').split('|').shift().trim();
-  if (nmrType !== '1H NMR' && nmrType !== '13C NMR' && nmrType !== chmoConversions.nmr_1h?.termId && nmrType !== chmoConversions.nmr_13c?.termId) return true;
-  if (nmrType === '1H NMR' || nmrType === chmoConversions.nmr_1h?.termId) {
-    return hNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  } else if (nmrType === '13C NMR' || nmrType === chmoConversions.nmr_13c?.termId) {
-    return cNmrCheckMsg(sample.molecule.sum_formular, nmrStr) === '';
-  }
-  return true;
-};
-
-const DownloadMetadataBtn = (l) => {
-  const contentUrl = `/api/v1/public/metadata/download?type=${l.type.toLowerCase()}&id=${l.id}`;
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download published metadata</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        onClick={() => Utils.downloadFile({
-          contents: contentUrl
-        })}
-      >
-        <i className="fa fa-file-code-o" />
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-
-const DownloadJsonBtn = (l) => {
-  const contentUrl = `/api/v1/public/metadata/download_json?type=${l.type.toLowerCase()}&id=${l.id}`;
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={`tt_metadata__${uuid.v4()}`}>download JSON-LD</Tooltip>}
-    >
-      <Button
-        style={{ backgroundColor: 'grey', color:'white', marginLeft: '5px' }}
-        bsSize="xsmall"
-        onClick={() => Utils.downloadFile({
-          contents: contentUrl
-        })}
-      >
-        JSON-LD
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const DownloadDOICsv = (e, a) => {
-  const dataToCsvURI = data => encodeURI(`data:text/csv;charset=utf-8,${data.map(row => row.join(',')).join('\n')}`);
-  const dois = [];
-  dois.push(['Reserved DOIs', '']);
-  dois.push(['', '']);
-
-  if (e.tag.taggable_data.reserved_doi) dois.push([e.type.charAt(0).toUpperCase() + e.type.slice(1), `DOI: ${e.tag.taggable_data.reserved_doi}`]);
-  a.forEach((an) => {
-    if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-  });
-
-  if (e.type === 'reaction') {
-    // product(sample)
-    if (e.products !== null && e.products.length > 0) {
-      e.products.forEach((p) => {
-        if (p.tag.taggable_data.reserved_doi) dois.push([`Product ${p.name}`, `DOI: ${p.tag.taggable_data.reserved_doi}`]);
-        p.analysisArray().forEach((an) => {
-          if (an.extended_metadata.reserved_doi) dois.push([`${an.name} - ${an.extended_metadata.kind}`, `DOI: ${an.extended_metadata.reserved_doi}`]);
-        });
-      });
-    }
-  }
-  Utils.downloadFile({ contents: dataToCsvURI(dois), name: 'export_dois.csv' });
-};
-
-class EmbargoCom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShow: false
-    };
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  handleEmbargoChange(e) {
-    this.props.onEmbargoChange(e.value);
-  }
-
-  handleLicenseChange(e) {
-    this.props.onLicenseChange(e.value);
-  }
-
-  handleCC0ConsentChange(e, type) {
-    this.props.onCC0ConsentChange(e.target.checked, type);
-  }
-
-  render() {
-    const defaultBundles = [
-      { value: '-1', name: 'no', label: 'No embargo' },
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-    const licenses = [
-      { name: 'CC BY-SA', value: 'CC BY-SA', label: 'CC BY-SA' },
-      { name: 'CC BY', value: 'CC BY', label: 'CC BY' },
-      { name: 'CC0', value: 'CC0', label: 'CC0' },
-      { name: 'No License', value: 'No License', label: 'No License' }
-    ];
-
-    const bundles = defaultBundles.concat(this.props.opts);
-    const description = [
-      'Please use the embargo if you do not wish your data to be published as soon as they are  processed but want to release them yourself at a later stage.',
-      'Please use one bundle for data that belongs to the same publication.',
-      'If you create data for more than one publication, please take care that you assign the data to the right bundle.'
-    ].join(' ');
-    const { isShow } = this.state;
-    const embargoDesc = isShow ? (
-      <div style={{
-        padding: '10px', backgroundColor: '#dfdfdf', borderRadius: '3px', width: '100%'
-      }}
-      >
-        <b>Embargo Bundle</b>&#58;&nbsp;{description}
-      </div>
-    ) : (null);
-
-    const cc0Consent1 = 'I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.';
-    const cc0Consent2 = 'I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.';
-    const deed = (
-      <div style={{
-        padding: '10px', borderRadius: '3px', borderColor: 'darkred', borderStyle: 'solid', borderWidth: 'thin', width: '100%'
-      }}
-      >
-        {LicenseLegalCode(this.props.selectedLicense)}
-        {
-        this.props.selectedLicense === 'CC0' ?
-          (
-            <div stye={{ width: '100%' }}>
-              <Checkbox checked={this.props.cc0Deed.consent1} onChange={e => this.handleCC0ConsentChange(e, 'consent1')}>
-                {cc0Consent1}
-              </Checkbox>
-              <Checkbox checked={this.props.cc0Deed.consent2} onChange={e => this.handleCC0ConsentChange(e, 'consent2')}>
-                {cc0Consent2}
-              </Checkbox>
-            </div>
-          )
-          :
-          (null)
-      }
-      </div>
-    );
-
-    return (
-      <div>
-        <Form horizontal style={{ display: 'flex' }}>
-          <div style={{ width: '20%', textAlign: 'right' }}>
-            <ControlLabel>Choose license&nbsp;</ControlLabel>
-          </div>
-          <div style={{ width: '20%' }}>
-            <Select
-              value={this.props.selectedLicense}
-              onChange={e => this.handleLicenseChange(e)}
-              options={licenses}
-              className="select-assign-collection"
-            />
-          </div>
-          <div style={{ width: '40%', textAlign: 'right' }}>
-            <ControlLabel>Publish with Embargo Bundle</ControlLabel>&nbsp;
-            <div role="button" style={{ display: 'inline' }} onClick={() => this.setState({ isShow: !isShow })}>
-              <i className="fa fa-question-circle" aria-hidden="true" />
-            </div>&nbsp;
-          </div>
-          <div style={{ width: '40%' }}>
-            <Select
-              value={this.props.selectedValue}
-              onChange={e => this.handleEmbargoChange(e)}
-              options={bundles}
-              className="select-assign-collection"
-            />
-          </div>
-        </Form>
-        {embargoDesc}
-        {deed}
-      </div >
-    );
-  }
-}
-
-EmbargoCom.propTypes = {
-  opts: PropTypes.array,
-  selectedValue: PropTypes.string.isRequired,
-  onEmbargoChange: PropTypes.func.isRequired,
-  selectedLicense: PropTypes.string,
-  onLicenseChange: PropTypes.func.isRequired,
-  onCC0ConsentChange: PropTypes.func.isRequired,
-  cc0Deed: PropTypes.shape({
-    consent1: PropTypes.bool.isRequired,
-    consent2: PropTypes.bool.isRequired
-  })
-};
-
-EmbargoCom.defaultProps = {
-  opts: [],
-  selectedLicense: 'CC BY-SA',
-  cc0Deed: { consent1: false, consent2: false }
-};
-
-const PublishTypeAs = props => (
-  <div style={{ display: 'inline' }}>
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_publish_as">Choose the publication type as Full or Scheme-Only</Tooltip>}>
-      <i className="fa fa-question-circle" aria-hidden="true" />
-    </OverlayTrigger>&nbsp;
-    <DropdownButtonSelection
-      options={props.options}
-      selected={props.selected}
-      placeholder="Select publication type..."
-      onSelect={e => props.onChange(e)}
-    />
-  </div>
-);
-
-PublishTypeAs.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string),
-  selected: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-};
-
-PublishTypeAs.defaultProps = {
-  options: [],
-  selected: 'full',
-};
-
-
-const ElStateLabel = (state) => {
-  let stateStyle;
-  switch (state) {
-    case 'reviewed':
-      stateStyle = 'info';
-      break;
-    case 'pending':
-      stateStyle = 'warning';
-      break;
-    case 'accepted':
-      stateStyle = 'success';
-      break;
-    default:
-      stateStyle = 'default';
-  }
-  return <Label bsStyle={stateStyle}>{state}</Label>;
-};
-
-
-const MoveEmbargoedBundle = (element, onMoveClick) => {
-  return (
-    <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to another embargoed bundle</Tooltip>}>
-      <Button bsSize="xsmall" onClick={() => onMoveClick(element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
-    </OverlayTrigger>
-  );
-};
-
-const ElSubmitTime = (submitAt) => {
-  const time = new Date(submitAt);
-  return `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} ${time.getHours()}:${time.getMinutes()} `;
-};
-
-const SvgPath = (svg, type) => {
-  if (svg && svg !== '***') {
-    if (type === 'Reaction') {
-      return `/images/reactions/${svg}`;
-    }
-    return `/images/samples/${svg}`;
-  }
-  return 'images/wild_card/no_image_180.svg';
-};
-
-const ElAspect = (e, onClick, user = null, owner, currentElement = null, onMoveClick) => {
-  if (!e) {
-    return '';
-  }
-  let listClass;
-  if (e.type === 'Reaction') {
-    listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  } else {
-    listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  }
-  const schemeOnly = (e && e.scheme_only === true) || false;
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => onClick(e.type.toLowerCase(), e.id)}
-    >
-      <td style={{ position: 'relative' }} >
-        <span className="review_element_label">
-          <i className={`icon-${e.type.toLowerCase()}`} />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{user !== null && user.type === 'Anonymous' ? '' : ElStateLabel(e.state)}
-        &nbsp;{user !== null && user.id != owner ? '' : MoveEmbargoedBundle(e, onMoveClick)}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const SampleExactMW = (em) => {
-  if (em) {
-    return (<span>{em.toFixed(6)} g&sdot;mol<sup>-1</sup></span>);
-  }
-  return '';
-};
-
-const DateFormatYMDLong = (params) => {
-  const dateTime = new Date(params);
-  const options = {
-    year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
-  };
-  return dateTime.toLocaleDateString('en-GB', options);
-};
-
-const DateFormatDMYTime = (dt) => {
-  if (dt == null || typeof dt === 'undefined') return '';
-  try {
-    const m = moment(dt, 'DD/MM/YYYY HH:mm:ss');
-    if (m.isValid()) {
-      return dt;
-    }
-    const dtJSON = new Date(dt).toJSON();
-    const dtISO = new Date(Date.parse(dt)).toISOString();
-    if (dtISO === dtJSON) {
-      return moment.parseZone(new Date(Date.parse(dt))).utc().format('DD/MM/YYYY HH:mm:ss').toString();
-    }
-    return '';
-  } catch (e) {
-    return '';
-  }
-};
-
-const EditorTips = () => (
-  <ol>
-    {/* <li>Use <b>Preview</b> to see how your work will look like.</li> */}
-    <li>Use&nbsp;&nbsp;<i className="fa fa-file-text-o" aria-hidden="true" />&nbsp;&nbsp;to open a text editor and add into the content.</li>
-    <li>Use&nbsp;&nbsp;<i className="fa fa-picture-o" aria-hidden="true" />&nbsp;&nbsp;to open a image editor and add into the content.</li>
-    <li>Use&nbsp;&nbsp;<i className="fa fa-arrows" aria-hidden="true" />&nbsp;&nbsp;to change the section order.</li>
-    <li>Use&nbsp;&nbsp;<i className="fa fa-trash-o" aria-hidden="true" />&nbsp;&nbsp;to remove the section from the content.</li>
-    <li>In text editor, use&nbsp;&nbsp;<i className="fa fa-link" aria-hidden="true" />&nbsp;&nbsp;to link to the url.</li>
-  </ol>
-);
-
-const BackSoonPage = () => {
-  return (
-    <div>
-      <h1>We&rsquo;ll be back soon!</h1>
-      <h3><i className="fa fa-cog fa-spin fa-5x" /></h3>
-      <h3>
-        Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
-      </h3>
-      <h3>
-        If you need to you can always <a href="mailto:chemotion@ioc.kit.edu">contact us</a>, otherwise we&rsquo;ll be back online shortly!
-      </h3>
-      <h4>&mdash; ComPlat Team</h4>
-    </div>
-  );
-};
-
-const IconToMyDB = ({
-  id, type, tooltipTitle = 'Link to My DB', isLogin = false, isPublished = true
-}) => {
-  const dt = isPublished ? 'publication' : 'review';
-  if (isLogin) {
-    return (
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">{tooltipTitle}</Tooltip>}>
-        <Button className="animation-ring" bsStyle="link" href={`/mydb/scollection/${dt}/${type}/${id}`} target="_blank">
-          <i className={`icon-${type}`} />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-  return (<span className="wrap-ring"><i className={`icon-${type}`} /></span>);
-};
-
-IconToMyDB.propTypes = {
-  id: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-  tooltipTitle: PropTypes.string,
-  isLogin: PropTypes.bool,
-  isPublished: PropTypes.bool,
-};
-
-IconToMyDB.defaultProps = {
-  tooltipTitle: 'Link to My DB',
-  isLogin: false,
-  isPublished: true,
-};
-
-
-const ChecklistPanel = ({
-  checklist, isReviewer, review_info
-}) => {
-  const dglr = checklist?.glr?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'brown' }} />) : (<i className="fa fa-square-o" style={{ color: 'brown' }} />);
-  const dtbl = checklist?.tbl?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'blue' }} />) : (<i className="fa fa-square-o" style={{ color: 'blue' }} />);
-  const ddes = checklist?.des?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'orange' }} />) : (<i className="fa fa-square-o" style={{ color: 'orange' }} />);
-  const dafm = checklist?.afm?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'green' }} />) : (<i className="fa fa-square-o" style={{ color: 'green' }} />);
-  const dact = checklist?.act?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'purple' }} />) : (<i className="fa fa-square-o" style={{ color: 'purple' }} />);
-  const dohd = checklist?.ohd?.status === true ? (<i className="fa fa-check-square-o" style={{ color: 'red' }} />) : (<i className="fa fa-square-o" style={{ color: 'red' }} />);
-
-
-  if (isReviewer === true || review_info?.groupleader == true) {
-    const leaders = review_info?.leaders?.length > 0 ? `additional reviewer(s): ${review_info?.leaders?.join(', ')}` : '';
-    const isGL = review_info?.leaders?.length > 0 ? (<OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">group leader review</Tooltip>}>{dglr}</OverlayTrigger>) : '';
-    return (
-      <div>
-        {isGL}&nbsp;
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">table values</Tooltip>}>{dtbl}</OverlayTrigger>&nbsp;
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">description</Tooltip>}>{ddes}</OverlayTrigger>&nbsp;
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis format</Tooltip>}>{dafm}</OverlayTrigger>&nbsp;
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">analysis content</Tooltip>}>{dact}</OverlayTrigger>&nbsp;
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="id_icon_tip">on hold</Tooltip>}>{dohd}</OverlayTrigger>&nbsp;
-        &nbsp;{leaders}
-      </div>
-    );
-  }
-  return (<div />);
-};
-
-ChecklistPanel.propTypes = {
-  checklist: PropTypes.object,
-  isReviewer: PropTypes.bool,
-};
-
-ChecklistPanel.defaultProps = {
-  checklist: {},
-  isReviewer: false
-};
-
-const SidToPubChem = ({ sid }) => {
-  let labelStyle = {
-    // display: 'inline-block',
-    marginLeft: '2px',
-    marginRight: '2px',
-    //position: 'absolute',
-  };
-  if (!sid || isNaN(sid)) {
-    labelStyle.WebkitFilter = "grayscale(100%)"
-  }
-  const handleOnClick = (e) => {
-    if (sid && !isNaN(sid)){
-      window.open("https://pubchem.ncbi.nlm.nih.gov/substance/" + sid, '_blank')
-    }
-    e.stopPropagation()
-  }
-
-  if (sid && !isNaN(sid)){
-    return (
-      <span style={labelStyle} onClick={handleOnClick}>
-        <img src="/images/wild_card/pubchem_sid.svg" className="pubchem-logo" />
-      </span>
-    )
-    }else {
-      return <span />
-  }
-}
-
-SidToPubChem.propTypes = {
-  sid: PropTypes.string
-};
-
-
-const OrcidIcon = ({ orcid }) => {
-  if (typeof orcid === 'undefined' || orcid === null) {
-    return (<span />);
-  }
-  const handleOnClick = (e) => {
-    e.stopPropagation();
-  };
-
-  return (
-    <a href={`https://orcid.org/${orcid}`} target="_blank" rel="noopener noreferrer" onClick={handleOnClick}>
-      <img src="/images/wild_card/ORCIDiD_iconvector.svg" className="orcid-logo" alt="ORCID" title="ORCID" />
-    </a>
-  );
-};
-
-OrcidIcon.propTypes = {
-  orcid: PropTypes.string
-};
-
-OrcidIcon.defaultProps = {
-  orcid: null
-};
-
-const ElementIcon = (elementType) => {
-  switch (elementType) {
-    case 'Reaction':
-      return <i className="icon-reaction" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    case 'Sample':
-      return <i className="icon-sample" style={{ fontSize: '1.5em', verticalAlign: 'middle' }} />;
-    default:
-      return <div />;
-  }
-};
-
-const AnalysesTypeJoinLabel = (analyses, type) => {
-  const regExp = /\(([^)]+)\)/;
-  const analysesTypeJoin = analyses.map((analysis) => {
-    let kind = (regExp.exec(analysis.extended_metadata['kind'] || '') || ['']).pop().trim();
-    if (kind === '') {
-      kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    }
-    return kind;
-  }).join(', ');
-
-  return analysesTypeJoin === '' ? analysesTypeJoin :
-    (
-      <div style={{ display: 'inline-block', whiteSpace: 'pre-line', textAlign: 'left', verticalAlign: 'middle' }}>
-        <small><b>{ElementIcon(type)}</b></small>{' '}{analysesTypeJoin}
-      </div>
-    );
-};
-
-const CalcDuration = (reaction) => {
-  let duration = null;
-
-  if (reaction.duration && !!reaction.duration.match(/\d+/)) {
-    return reaction.duration;
-  }
-
-  if (reaction.timestamp_start && reaction.timestamp_stop) {
-    const start = moment(reaction.timestamp_start, 'DD-MM-YYYY HH:mm:ss');
-    const stop = moment(reaction.timestamp_stop, 'DD-MM-YYYY HH:mm:ss');
-    if (start < stop) {
-      duration = moment.preciseDiff(start, stop);
-    }
-  }
-  if (duration == null) {
-    return '';
-  }
-  return duration;
-};
-
-const AuthorList = ({ creators, affiliationMap }) => {
-  return (
-    <span>
-      {creators.map(
-        (creator, i) => (
-          <span key={`auth_${creator.id}_${uuid.v4()}`}>
-            {i === 0 ? null : ' - '}<OrcidIcon orcid={creator.ORCID} />{creator.name}
-            <sup>
-              {creator.affiliationIds && creator.affiliationIds.map(e => affiliationMap[e]).sort().join()}
-            </sup>
-          </span>
-        )
-      )}
-    </span>
-  );
-};
-
-AuthorList.propTypes = {
-  creators: PropTypes.array,
-  affiliationMap: PropTypes.object,
-};
-
-AuthorList.defaultProps = {
-  creators: [],
-  affiliationMap: {},
-};
-
-const ContributorInfo = ({ contributor, showHelp }) => {
-  if (!contributor.name) {
-    return <div />;
-  }
-  const contributorBlock = !showHelp ? (
-    <h5><b>Contributor: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}</h5>
-  ) : (
-    <h5>
-      <b>Contributor&nbsp;<HelpInfo source="contributor" place="right" />: </b><OrcidIcon orcid={contributor.ORCID} />{contributor.name}
-    </h5>
-  );
-  return (
-    <div>
-      {contributorBlock}
-      <div>
-        {contributor.affiliations && contributor.affiliations.map((e, i) => <p style={{ fontSize: 'small' }} key={uuid.v4()}>{i + 1}. {e}</p>)}
-      </div>
-    </div>
-  );
-};
-
-ContributorInfo.propTypes = {
-  contributor: PropTypes.object,
-  showHelp: PropTypes.bool
-};
-
-ContributorInfo.defaultProps = {
-  contributor: {},
-  showHelp: false
-};
-
-const AffiliationList = ({ affiliations, affiliationMap }) => {
-  const names = [];
-  Object.keys(affiliationMap).map((affiliationId) => {
-    const ind = affiliationMap[affiliationId];
-    names[ind] = affiliations[affiliationId];
-    return null;
-  });
-  return (
-    <div>
-      {names.map(
-        (e, i) => (i === 0 ? null : <p style={{ fontSize: 'small' }} key={'affil_'+i}>{i}. {e}</p>)
-      )}
-    </div>
-  );
-}
-AffiliationList.propTypes = {
-  affiliations: PropTypes.object,
-  affiliationMap: PropTypes.object,
-};
-
-AffiliationList.defaultProps = {
-  affiliations: {},
-  affiliationIds: {},
-};
-
-class ClipboardCopyLink extends Component {
-  constructor(props) {
-    super(props)
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">copy to clipboard</Tooltip>}
-      >
-        <div role="button" data-clipboard-text={this.props.text || ' '} className="clipboardBtn clip-copy" >{this.props.text}</div>
-      </OverlayTrigger>
-    );
-  }
-}
-
-class ClipboardCopyBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.clipboard = new Clipboard('.clipboardBtn');
-  }
-
-  componentWillUnmount() {
-    this.clipboard.destroy();
-  }
-
-  render() {
-    return (
-      <OverlayTrigger
-        placement="bottom"
-        overlay={<Tooltip id="copy_clipboard">{this.props.tooltip || 'copy to clipboard'}</Tooltip>}
-      >
-        <Button className="clipboardBtn" data-clipboard-text={this.props.text || ' '} bsSize="xsmall" >
-          <i className="fa fa-clipboard" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-}
-
-const MoleculeInfo = ({ molecule, sample_svg_file = '', hasXvial = false }) => {
-  let svgPath = `/images/molecules/${molecule.molecule_svg_file}`;
-  if (sample_svg_file && sample_svg_file != '') {
-    svgPath = `/images/samples/${sample_svg_file}`;
-  }
-  const tagData = molecule.tag && molecule.tag.taggable_data;
-  const pubchemInfo = {
-    pubchem_tag: { pubchem_cid: tagData && tagData.pubchem_cid }
-  };
-  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-    ? <h4><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</h4>
-    : <h4><b>Formula: </b> <Formula formula={molecule.sum_formular} /></h4>;
-  const registedCompoundTooltip = (
-    <div>
-      For availability please contact the Compound Platform team with the blue button given below. An explanation can be accessed via our Youtube channel&nbsp;
-      <a rel="noopener noreferrer" target="_blank" href="https://www.youtube.com/channel/UCWBwk4ZSXwmDzFo_ZieBcAw?"><i className="fa fa-youtube-play" style={{ color: 'red', fontSize: '150%' }} /></a>&nbsp;
-      or on our how-to pages
-      <a rel="noopener noreferrer" target="_blank" href="https://www.chemotion-repository.net/home/howto/cf3ede44-b09a-400a-b0d4-b067735e4262"><img alt="chemotion_first" src="/favicon.ico" className="pubchem-logo" /></a>
-    </div>
-  );
-  return (
-    <Row>
-      <Col sm={4} md={4} lg={4}>
-        {resizableSvg(svgPath)}
-      </Col>
-      <Col sm={8} md={8} lg={8}>
-        {nameOrFormula}
-        <br />
-        <span style={hideInfo(molecule)}>
-          <h5><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h5>
-          <h5><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h5>
-          <h5><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h5>
-          <h5><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h5>
-        </span>
-        {
-          hasXvial ?
-            <div className="repo-registed-compound-desc">
-              A physical sample of this molecule was registered to the Molecule Archive of the
-              Compound Platform&nbsp;
-              <OverlayTrigger trigger="click" rootClose placement="top" overlay={<Tooltip id="registed_compound_tooltip" className="left_tooltip bs_tooltip">{registedCompoundTooltip}</Tooltip>}>
-                <i className="fa fa-info-circle" aria-hidden="true" />
-              </OverlayTrigger>
-            </div> : null
-        }
-        <h5>
-          <b>Crosslinks: </b>
-          &nbsp;&nbsp;
-          <PubchemLabels element={pubchemInfo} />
-          <ChemotionTag tagData={tagData} />
-        </h5>
-      </Col>
-    </Row>
-  );
-};
-
-const RenderAnalysisHeader = (props) => {
-  const {
-    element, isPublic, isLogin, isReviewer, updateRepoXvial, xvialCom, userInfo, reactionId, literatures
-  } = props;
-  const svgPath = `/images/samples/${element.sample_svg_file}`;
-  let doiLink = '';
-  const molecule = element.molecule || {};
-  if (isPublic) {
-    doiLink = element.tag && element.tag.taggable_data && element.tag.taggable_data.publication && element.tag.taggable_data.publication.doi;
-  } else {
-    doiLink = (element.doi && element.doi.full_doi) || '';
-  }
-  const nameOrFormula = molecule.iupac_name && molecule.iupac_name !== ''
-    ? <span><b>IUPAC Name: </b> {molecule.iupac_name} (<Formula formula={molecule.sum_formular} />)</span>
-    : <span><b>Formula: </b> <Formula formula={molecule.sum_formular} /></span>;
-
-  const iupacUserDefined = element.showed_name == (molecule.iupac_name)
-    ? <span />
-    : <h5><b>Name: </b> {element.showed_name} </h5>;
-
-  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none' };
-  const crsId = (element.publication && element.publication.id) || '';
-  const xvial = (element.tag && element.tag.taggable_data && element.tag.taggable_data.xvial && element.tag.taggable_data.xvial.num) || '';
-  const references = literatures ? literatures.map(lit => (
-    <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-      <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />&nbsp;
-      <Citation key={lit.id} literature={lit} />
-    </li>
-  )) : [];
-  return (
-    <div>
-      <br />
-      <Row style={rinchiStyle}>
-        <Col sm={6} md={6} lg={6}>
-          {resizableSvg(svgPath)}
-        </Col>
-        <Col sm={6} md={6} lg={6}>
-          <span className="repo-pub-sample-header">
-            <span className="repo-pub-title"><IconToMyDB isLogin={isLogin} id={element.id} type="sample" /></span>&nbsp;
-            <span className="repo-pub-title"><b>Product</b></span>&nbsp;
-            <RepoXvialButton isEditable={isReviewer} isLogin={isLogin} allowRequest elementId={element.id} data={xvial} saveCallback={updateRepoXvial} xvialCom={xvialCom} />
-            <RepoPublicComment isReviewer={isReviewer} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} userInfo={userInfo} pageType="reactions" pageId={reactionId} />&nbsp;
-            <RepoUserComment isLogin={isLogin} id={element.id} type="Sample" title={`Product CRS-${crsId}, ${element.showed_name}`} pageType="reactions" pageId={reactionId} />
-            <br /><br />
-          </span>
-          <span style={hideInfo(molecule)}>
-            {nameOrFormula}
-            {iupacUserDefined}
-            <h6><b>Canonical SMILES: </b> <ClipboardCopyLink text={molecule.cano_smiles} /></h6>
-            <h6><b>InChI: </b> <ClipboardCopyLink text={molecule.inchistring} /></h6>
-            <h6><b>InChIKey: </b> <ClipboardCopyLink text={molecule.inchikey} /></h6>
-            <h6><b>Exact Mass: </b> {SampleExactMW(molecule.exact_molecular_weight)}</h6>
-          </span>
-          <h6><b>Sample DOI: </b>
-            {
-              isPublic ?
-              (
-                <span className="sub-title" inline="true">
-                  <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-                    {doiLink}
-                  </Button>
-                  <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                  <DownloadMetadataBtn type="sample" id={element.id} />
-                  <DownloadJsonBtn type="sample" id={element.id} />
-                </span>
-              )
-              :
-              (
-                <span className="sub-title" inline="true">
-                  {doiLink}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-                </span>
-              )
-            }
-          </h6>
-          <h6>
-            <b>Sample ID: </b>
-            <Button key={`reaction-jumbtn-${element.id}`} bsStyle="link" onClick={() => { window.location = `/pid/${crsId}`; }}>
-              CRS-{crsId}
-            </Button><ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${crsId}`} />
-          </h6>
-        </Col>
-      </Row>
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          <h5><b>Reference{references.length > 1 ? 's' : null} in the Literature: </b></h5>
-          <ul style={{ listStyle: 'none' }}>{references}</ul>
-          <RepoSegment segments={element.segments} />
-        </Col>
-      </Row>
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          <h5><b>Physical Properties:</b></h5>
-          <div>Melting point: {getFormattedRange(element.melting_point)}</div>
-          <div>Boiling point: {getFormattedRange(element.boiling_point)}</div>
-        </Col>
-      </Row>
-      < br/>
-    </div>
-  );
-};
-
-const ToggleIndicator = ({ onClick, name, indicatorStyle }) => (
-  <span
-    role="presentation"
-    className="label label-default"
-    style={{
-      backgroundColor: '#777777',
-      color: 'white',
-      fontSize: 'smaller',
-      fontWeight: 'bold',
-      cursor: 'pointer',
-      borderRadius: 'unset'
-    }}
-    onClick={onClick}
-  >
-    {name} &nbsp;<i className={`fa fa-caret-${indicatorStyle}`} aria-hidden="true" />
-  </span>
-);
-
-ToggleIndicator.propTypes = {
-  indicatorStyle: PropTypes.string,
-  name: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-};
-
-ToggleIndicator.defaultProps = {
-  indicatorStyle: '',
-  name: '',
-};
-
-
-const ReactionTable = ({
-  reaction, toggle, show, bodyAttrs, canComment, isPublic = true, isReview = false
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-  const showIndicator = (show) ? 'down' : 'right';
-
-  const schemeOnly = (reaction && reaction.publication && reaction.publication.taggable_data &&
-    reaction.publication.taggable_data.scheme_only === true) || false;
-
-  if (isPublic) {
-    ({ schemes } = reaction);
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s);
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s);
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s);
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s);
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => {
-    return (target ? (target * multi).toFixed(precision) : ' - ')
-  }
-
-  const equivYield = (s, sumSolvents=1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        if (schemeOnly === true) {
-          val = `${materialCalc(s.scheme_yield * 100, 1, 0).toString()}%`;
-        } else {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
-        }
-        break;
-      case 'solvents':
-        if (isPublic) {
-          val = `${materialCalc(s.equivalent * 100, 1, 0).toString()}%`;
-        } else {
-          val = `${materialCalc((s.amount_l / sumSolvents) * 100, 1, 1).toString()}%`;
-        }
-        break;
-      default:
-        val = materialCalc(s.equivalent, 1, 3)
-    }
-    return (
-      val
-    );
-  };
-
-  const rows = (samples, isReview = false) => {
-    let currentType = '';
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          const rLabel = (sample.short_label || '').concat('   ', sample.name || '');
-          const useName = isPublic ? (sample.molecule_iupac_name || sample.iupac_name || sample.sum_formular) : (sample.molecule_iupac_name);
-          let label = isReview ? (<span>{rLabel}<br />{useName}</span>) : useName;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (currentType === 'products') ? (<tr><td colSpan="6"><b>{matType}</b></td><td style={{ fontWeight: 'bold', textAlign: 'center' }}>Yield</td></tr>) : (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' ' : isPublic ? sample.dmv: !sample.has_molarity && !sample.has_density ? '- / -' : sample.has_density ? + sample.density + ' / - ' : ' - / ' + sample.molarity_value + sample.molarity_unit}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_g, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{materialCalc(sample.amount_l, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{sample.mat_group === 'solvents' ? ' - ' : materialCalc(sample.amount_mol, 1000, 3)}</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    );
-  };
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount [mg]</th>
-          <th style={{ textAlign: 'center' }}>Volume [mL]</th>
-          <th style={{ textAlign: 'center' }}>Amount [mmol]</th>
-          <th style={{ textAlign: 'center' }}>Equiv</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Reaction Table" indicatorStyle={showIndicator} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes, isReview))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionRinChiKey = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorRinchi = (show) ? 'down' : 'right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="RInChiKey Table" indicatorStyle={showIndicatorRinchi} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-rinchis" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>RInChI</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_string, 'RInChI=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Long-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_long_key, 'Long-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Short-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_short_key, 'Short-RInChIKey=', '')} /></Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Web-RInChIKey</b></Col>
-              <Col sm={10} md={10} lg={10}><ClipboardCopyLink text={replace(reaction.rinchi_web_key, 'Web-RInChIKey=', '')} /></Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionProperties = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorProp = (show) ? 'down' : 'right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="Properties" indicatorStyle={showIndicatorProp} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status: </b>{reaction.status}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Temperature: </b>{reaction.temperature && reaction.temperature.userText !== '' ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}` : ''}
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <b>Duration: </b>{CalcDuration(reaction)}
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionTlc = ({
-  reaction, toggle, show, bodyAttrs
-}) => {
-  const showIndicatorTlc = (show) ? 'down' : 'right';
-  return (
-    <span>
-      <ToggleIndicator onClick={toggle} name="TLC-Control" indicatorStyle={showIndicatorTlc} />
-      <Panel style={{ border: 'none' }} id="collapsible-panel-tlc" expanded={show} defaultExpanded={show} onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Solvents (parts)</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.tlc_solvents || ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>Rf-Value</b></Col>
-              <Col sm={10} md={10} lg={10}>{reaction.rf_value && reaction.rf_value !== '0' ? reaction.rf_value : ''}</Col>
-            </Row>
-            <Row style={{ paddingBottom: '8px' }}>
-              <Col sm={2} md={2} lg={2}><b>TLC-Description</b></Col>
-              <Col sm={10} md={10} lg={10}>
-                <div style={{ whiteSpace: 'pre' }}>
-                  {reaction.tlc_description || ''}
-                </div>
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const InputFieldYield = (props) => {
-  return (
-    <FormGroup>
-      <InputGroup>
-        <FormControl
-          type="text"
-          bsClass="bs-form--compact form-control"
-          bsSize="small"
-          value={props.value || 0}
-          placeholder="Input Yield..."
-          onChange={event => props.onInputChange(props.product, event)}
-        />
-        <InputGroup.Addon>%</InputGroup.Addon>
-      </InputGroup>
-    </FormGroup>
-  );
-};
-
-const InputFieldDuration = props =>
-  (
-    <InputButtonField
-      label="Duration"
-      value={props.durationValue || ''}
-      field="duration"
-      btnValue={props.durationUnit || ''}
-      btnField="durationUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch duration unit"
-    />
-  );
-
-const InputFieldTemperture = props =>
-  (
-    <InputButtonField
-      label="Temperature"
-      value={props.temperatureDisplay || ''}
-      field="temperature"
-      btnValue={props.temperatureUnit || ''}
-      btnField="temperatureUnit"
-      onInputChange={props.onInputChange}
-      onBtnClick={props.onUnitChange}
-      btnTip="switch temperature unit"
-    />
-  );
-
-const ReactionTableEdit = ({
-  reaction, bodyAttrs, isPublic = true,
-  onInputChange
-}) => {
-  let schemes = [];
-  let sumSolvents = 0.0;
-
-  if (isPublic) {
-    schemes = reaction.schemes;
-  } else {
-    reaction.starting_materials.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'starting_materials';
-      schemes.push(ns);
-    });
-    reaction.reactants.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'reactants';
-      schemes.push(ns);
-    });
-    reaction.products.map((s) => {
-      const ns = new Sample(s)
-      ns.mat_group = 'products';
-      schemes.push(ns);
-    });
-    reaction.solvents.map((s) => {
-      const ns = new Sample(s)
-      sumSolvents += ns.amount_l;
-      ns.mat_group = 'solvents';
-      schemes.push(ns);
-    });
-  }
-
-  const materialCalc = (target, multi, precision) => (target ? (target * multi).toFixed(precision) : '0');
-  const equivYield = (s, sumSolvents = 1.0, isPublic = true) => {
-    let val = 0;
-    switch (s.mat_group) {
-      case 'products':
-        val = materialCalc(s.equivalent * 100, 1, 0);
-        break;
-      default:
-        return <div />;
-    }
-    return (
-      <Form inline>
-        <InputFieldYield
-          value={val}
-          product={s}
-          onInputChange={onInputChange}
-        />
-      </Form>
-    );
-  };
-
-  const rows = (samples) => {
-    let currentType = '';
-
-    return (
-      typeof samples !== 'undefined'
-        ? samples.map((sample, i) => {
-          const matType = sample.mat_group && sample.mat_group[0].toUpperCase() + sample.mat_group.replace('_', ' ').slice(1);
-          let label = isPublic ? sample.iupac_name : sample.molecule_iupac_name;
-          if (sample.mat_group === 'solvents') label = sample.external_label;
-          let title = null;
-          if (currentType !== sample.mat_group) {
-            currentType = sample.mat_group;
-            title = (<tr><td colSpan="7"><b>{matType}</b></td></tr>);
-          }
-          return (
-            <tbody key={i}>
-              {title}
-              <tr>
-                <td style={{ width: '26%' }}>{label}</td>
-                <td style={{ width: '12%' }}>{isPublic ? sample.sum_formular : sample.molecule.sum_formular}</td>
-                <td style={{ width: '14%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>&nbsp;</td>
-                <td style={{ width: '12%', textAlign: 'center' }}>{equivYield(sample, sumSolvents, isPublic)}</td>
-              </tr>
-            </tbody>
-          );
-        })
-        : null
-    )
-  };
-
-  const table = dataRows => (
-    <Table responsive>
-      <thead>
-        <tr>
-          <th>IUPAC</th>
-          <th>Formula</th>
-          <th style={{ textAlign: 'center' }}>Density/Molarity</th>
-          <th style={{ textAlign: 'center' }}>Amount(g)</th>
-          <th style={{ textAlign: 'center' }}>Volume(ml)</th>
-          <th style={{ textAlign: 'center' }}>Amount(mmol)</th>
-          <th style={{ textAlign: 'center' }}>Equiv/Yield</th>
-        </tr>
-      </thead>
-      {dataRows}
-    </Table>
-  );
-
-  return (
-    <span>
-      <Label>Reaction Table</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-scheme" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs} >
-            <div>
-              {table(rows(schemes))}
-            </div>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-};
-
-const ReactionPropertiesEdit = ({
-  reaction, bodyAttrs,
-  onInputChange, onUnitChange
-}) =>
-  (
-    <span>
-      <Label>Properties</Label>
-      <Panel style={{ border: 'none' }} id="collapsible-panel-properties" defaultExpanded onToggle={() => { }}>
-        <Panel.Collapse>
-          <Panel.Body {...bodyAttrs}>
-            <Row >
-              <Col sm={4} md={4} lg={4}>
-                <b>Status</b><div>{reaction.status}</div>
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldTemperture
-                  temperatureDisplay={reaction.temperature_display}
-                  temperatureUnit={reaction.temperature && reaction.temperature.valueUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-              <Col sm={4} md={4} lg={4}>
-                <InputFieldDuration
-                  durationValue={(reaction.durationDisplay && reaction.durationDisplay.dispValue) || ''}
-                  durationUnit={reaction.durationUnit}
-                  onInputChange={onInputChange}
-                  onUnitChange={onUnitChange}
-                />
-              </Col>
-            </Row>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    </span>
-  );
-
-const ReactionSchemeOnlyInfo = ({
-  reaction, isPublic = true, schemeDesc,
-  onYieldChange, onPropertiesChange, onUnitChange
-}) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTableEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              isPublic={isPublic}
-              onInputChange={onYieldChange}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <Checkbox
-              checked={schemeDesc}
-              onChange={() => { onPropertiesChange('schemeDesc'); }}
-            >
-              <span>add the description field?</span>
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionPropertiesEdit
-              reaction={reaction}
-              bodyAttrs={bodyAttrs}
-              onInputChange={onPropertiesChange}
-              onUnitChange={onUnitChange}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const ReactionInfo = ({ reaction, toggleScheme, showScheme, isPublic = true,
-  toggleRinchi, showRinchi,
-  toggleProp, showProp,
-  toggleTlc, showTlc,
-  schemeOnly = false, onToggle = () => {}
- }) => {
-  const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-  const content = reaction.description;
-  const additionInfo = reaction.observation;
-
-  const contentlength = (content && content.ops && content.ops.length > 0 && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const additionlength = (additionInfo && additionInfo.ops && additionInfo.ops.length > 0 && additionInfo.ops[0].insert) ? additionInfo.ops[0].insert.trim().length : 0;
-
-  const descQV = contentlength > 0 ?
-  (<span><b>Description:</b><QuillViewer value={content}  /></span>) : null;
-  const addQV = additionlength > 0 ?
-  (<span><b>Additional information for publication and purification details:</b> <QuillViewer value={additionInfo}  /></span>) : null;
-
-
-  const bodyAttrs = {
-    style: {
-      fontSize: '90%',
-      paddingBottom: 'unset'
-    }
-  };
-
-  if (schemeOnly) {
-    return (
-      <RepoReactionSchemeInfo
-        reaction={reaction}
-        svgPath={svgPath}
-        showScheme={showScheme}
-        showRinchi={showRinchi}
-        showProp={showProp}
-        bodyAttrs={bodyAttrs}
-        onToggle={onToggle}
-      />
-    );
-  }
-
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <SVG key={svgPath} src={svgPath} className="reaction-details" />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTable
-              reaction={reaction}
-              toggle={toggleScheme}
-              show={showScheme}
-              isPublic={isPublic}
-              isReview={false}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-            <div className="desc small-p">
-              {addQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={reaction}
-              toggle={toggleRinchi}
-              show={showRinchi}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionProperties
-              reaction={reaction}
-              toggle={toggleProp}
-              show={showProp}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionTlc
-              reaction={reaction}
-              toggle={toggleTlc}
-              show={showTlc}
-              bodyAttrs={bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-const AnalysisHeaderSample = ({ sample, sampleType }) => {
-  const svgPath = `/images/samples/${sample.sample_svg_file}`;
-  const doiLink = sample.pubchem_tag.chemotion ? sample.pubchem_tag.chemotion.doi : '';
-  const rinchiStyle = { borderStyle: 'none', boxShadow: 'none', textAlign: 'left' };
-  return (
-    <div className="svg-container">
-      <Row style={rinchiStyle}>
-        <Col sm={4} md={4} lg={4}>
-          <SVG key={svgPath} src={svgPath} className="sample-details" />
-        </Col>
-        <Col sm={8} md={8} lg={8}>
-          <h5><i className="icon-sample" style={{ fontSize: '1.5em' }} /> <b>{sampleType} </b></h5>
-          <b> Sample DOI: </b>
-          <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doiLink}`; }}>
-            {doiLink}
-          </Button>
-          <ClipboardCopyBtn text={`https://dx.doi.org/${doiLink}`} />
-          <DownloadMetadataBtn type="sample" id={sample.id} />
-          <DownloadJsonBtn type="sample" id={sample.id} />
-        </Col>
-      </Row>
-    </div>
-  );
-};
-AnalysisHeaderSample.propTypes = {
-  sample: PropTypes.instanceOf(Sample).isRequired,
-  sampleType: PropTypes.string,
-};
-
-AnalysisHeaderSample.defaultProps = {
-  sample: {},
-  sampleType: '',
-};
-
-class RenderPublishAnalysesPanel extends Component {
-  header() {
-    const {
-      analysis, isPublic, userInfo, isLogin, isReviewer, pageId, type, pageType, element
-    } = this.props;
-    const content = analysis.extended_metadata['content'];
-    const previewImg = previewContainerImage(analysis);
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    const doiLink = (isPublic === false) ? (
-      <div className="sub-title" inline="true">
-        <b>Analysis DOI: </b>
-        {analysis.dataset_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-      </div>
-    ) : (
-      <div className="sub-title" inline="true">
-        <b>Analysis DOI: </b>
-        <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-          {analysis.dataset_doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-        <DownloadMetadataBtn type="container" id={analysis.id} />
-        <DownloadJsonBtn type="container" id={analysis.id} />
-      </div>
-    );
-
-    const insText = instrumentText(analysis);
-    const crdLink = (isPublic === false) ? (
-      <div className="sub-title" inline="true">
-        <b>Reaction ID: </b>
-        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-          CRD-{analysis.pub_id}
-        </Button>
-        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{insText}
-
-      </div >
-    ) : (
-      <div className="sub-title" inline="true">
-        <b>Reaction ID: </b>
-        <Button bsStyle="link" bsSize="small" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-          CRD-{analysis.pub_id}
-        </Button>
-        <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-      </div >
-    );
-
-    return (
-      <div className="repo-analysis-header">
-        <RepoPreviewImage
-          element={element}
-          analysis={analysis}
-          isLogin={isLogin}
-          previewImg={previewImg}
-          title={kind}
-        />
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title">
-              <b>{kind}</b>&nbsp;<RepoMolViewerListBtn el={element} container={analysis} isPublic={isPublic} />
-              <RepoPublicComment isReviewer={isReviewer} id={analysis.id} type={type} pageId={pageId} pageType={pageType} userInfo={userInfo} title={kind} />&nbsp;
-              <RepoUserComment isLogin={isLogin} id={analysis.id} type={type} pageId={pageId} pageType={pageType} />
-            </div>
-            {doiLink}
-            {crdLink}
-          </div>
-          <div className="desc small-p expand-p">
-            <OverlayTrigger placement="bottom" overlay={<Tooltip id="_tip_dataset_quill_viewer">copy to clipboard</Tooltip>}>
-              <div className="repo-quill-viewer" tabIndex={0} role="button" onClick={() => { navigator.clipboard.writeText(contentToText(content)); }}>
-                <QuillViewer value={content} />
-              </div>
-            </OverlayTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {this.header()}
-        <div>
-          <b>Datasets</b>
-          <RepoContainerDatasets
-            container={this.props.analysis}
-            isPublic={this.props.isPublic}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-class RenderPublishAnalyses extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  header() {
-    const { analysis } = this.props;
-    const content = analysis.extended_metadata['content'];
-    const previewImg = previewContainerImage(analysis);
-
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-
-    let hasPop = true;
-    let fetchNeeded = false;
-    let fetchId = 0;
-    let fetchFilename = '';
-    if (previewImg.startsWith('data:image')) {
-      fetchNeeded = true;
-      fetchId = analysis.preview_img.id;
-      fetchFilename = analysis.preview_img.filename;
-    } else {
-      hasPop = false;
-    }
-
-    return (
-      <div
-        className="analysis-header"
-      >
-        <div className="preview">
-          <ImageModal
-            hasPop={hasPop}
-            previewObject={{
-              src: previewImg
-            }}
-            popObject={{
-              title: kind,
-              src: previewImg,
-              fetchNeeded,
-              fetchId,
-              fetchFilename
-            }}
-          />
-        </div>
-        <div className="abstract">
-          <div className="lower-text">
-            <div className="sub-title" inline="true">
-              <b>Analysis DOI: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${analysis.dataset_doi}`; }}>
-                {analysis.dataset_doi}
-              </Button>
-              <ClipboardCopyBtn text={`https://dx.doi.org/${analysis.dataset_doi}`} />
-              <DownloadMetadataBtn type="container" id={analysis.id} />
-              <DownloadJsonBtn type="container" id={analysis.id} />
-            </div>
-            <div className="sub-title" inline="true">
-              <b>Reaction ID: </b>
-              <Button bsStyle="link" onClick={() => { window.location = `/pid/${analysis.pub_id}`; }}>
-                CRD-{ analysis.pub_id }
-              </Button>
-              <ClipboardCopyBtn text={`https://www.chemotion-repository.net/pid/${analysis.pub_id}`} />
-            </div>
-            <div className="desc small-p">
-              <b>Content: </b> &nbsp;&nbsp;
-              <ClipboardCopyLink text={contentToText(content)}>
-              <QuillViewer value={content}  />
-            </ClipboardCopyLink>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { analysis, expanded, elementType } = this.props;
-    const kind = (analysis.extended_metadata['kind'] || '').split('|').pop().trim();
-    const AffiliationMap = (affiliationIds) => {
-      const aId = affiliationIds.length > 0 ? ([].concat.apply(...affiliationIds)) : [];
-      const affiliationMap = {};
-      let aCount = 0;
-      aId.map((e) => {
-        if (!affiliationMap[e]) {
-          aCount += 1;
-          affiliationMap[e] = aCount;
-        }
-      });
-      return affiliationMap;
-    };
-    const affiliationMap = AffiliationMap(this.props.publication.affiliation_ids || []);
-    const time = new Date(this.props.publication && this.props.publication.published_at);
-    const formattedTime = `${time.getDate()}-${time.getMonth() + 1}-${time.getFullYear()} `;
-    return (
-      <Panel key={`analysis-${analysis.id}`} expanded={expanded} className="panel-analyses-public" onToggle={() => { }}>
-        <Panel.Heading style={{ border: 'unset' }}>
-          <h4><i className="fa fa-area-chart" aria-hidden="true" style={{ fontSize: '1.5em' }} /><b> Published on </b> <i>{formattedTime}</i>
-            <LicenseIcon
-              license={this.props.license}
-              hasCoAuthors={(this.props.publication.author_ids.length > 1)}
-            />
-          </h4>
-          <p>&nbsp;</p>
-          <b>{kind}</b>&nbsp;
-          <div style={{ textAlign: 'right', display: 'inline-block', float: 'right' }}>
-            <small><b>{ElementIcon(elementType)}</b></small>
-          </div>
-          <h5>
-            <b>Author{this.props.publication.author_ids && (this.props.publication.author_ids.length > 1) ? 's' : ''}: </b>
-            <AuthorList
-              creators={this.props.publication.creators}
-              affiliationMap={affiliationMap}
-            />
-          </h5>
-          <AffiliationList
-            affiliations={this.props.publication.affiliations}
-            affiliationMap={affiliationMap}
-          />
-        </Panel.Heading>
-        <Panel.Collapse>
-          <Panel.Body style={{ backgroundColor: '#f5f5f5' }}>
-            {this.header()}
-            <Col md={12}>
-              <b>Datasets</b>
-              <RepoContainerDatasets
-                container={this.props.analysis}
-                isPublic={this.props.isPublic}
-              />
-            </Col>
-          </Panel.Body>
-        </Panel.Collapse>
-      </Panel>
-    );
-  }
-}
-
-RenderPublishAnalyses.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  elementType: PropTypes.string.isRequired,
-  license: PropTypes.string.isRequired,
-  publication: PropTypes.shape({
-    author_ids: PropTypes.arrayOf(PropTypes.number),
-    creators: PropTypes.arrayOf(PropTypes.object),
-    affiliation_ids: PropTypes.arrayOf(PropTypes.array),
-    affiliations: PropTypes.object,
-    published_at: PropTypes.string,
-  }).isRequired,
-  isPublic: PropTypes.bool.isRequired
-};
-
-class PublishAnalysesTag extends Component {
-  constructor(props) {
-    super(props);
-    const { reaction, analysis, analysesType, product } = props;
-    this.state = {
-      reaction,
-      analysis,
-      analysesType,
-      product
-    };
-    this.handleCheck = this.handleCheck.bind(this);
-  }
-
-  handleCheck(e, elementType) {
-    if (e.extended_metadata.publish && (e.extended_metadata.publish === true || e.extended_metadata.publish === 'true')) {
-      e.extended_metadata.publish = false;
-    } else {
-      e.extended_metadata.publish = true;
-    }
-    this.props.handleAnalysesChecked(e, elementType);
-  }
-
-  generateTitle() {
-    const {
-      reaction, analysis, analysesType, product
-    } = this.state;
-    const kind = (analysis.extended_metadata.kind || '').split('|').pop().trim();
-    const { content } = analysis.extended_metadata;
-    const status = analysis.extended_metadata.status || '';
-    const previewImg = previewContainerImage(analysis);
-    const typeMissing = !analysis.extended_metadata.kind || ((analysis.extended_metadata.kind || '').split('|').length < 2);
-
-    let statusMissing = false;
-    let nmrMissing = false;
-    let datasetMissing = false;
-    if (analysesType === 'Product') {
-      statusMissing = (analysis.extended_metadata.status || '') !== 'Confirmed';
-      nmrMissing = !isNmrPass(analysis, product);
-      datasetMissing = !isDatasetPass(analysis);
-    }
-    const constructBtnTip = () => {
-      const tip = [];
-      if (typeMissing || statusMissing || nmrMissing || datasetMissing) {
-        if (typeMissing) tip.push('Type is invalid.');
-        if (statusMissing) tip.push('Status must be Confirmed.');
-        if (nmrMissing) tip.push('Content is invalid, NMR Check fails.');
-        if (datasetMissing) {
-          tip.push('Dataset is incomplete. Please check that: ');
-          tip.push('1. for NMR, Mass, or IR analyses, at least one dataset has been attached with an image and a jcamp files.');
-          tip.push('2. the instrument field is not empty.');
-        }
-        return tip.join('\r\n');
-      }
-      return 'publish this analysis';
-    };
-    const btnTip = constructBtnTip();
-
-    let statusChk = false;
-    let statusMsg = '';
-    let typeChk = false;
-    if (analysesType === 'Product') {
-      statusChk = (status !== 'Confirmed' || nmrMissing);
-      statusMsg = nmrMsg(product, analysis);
-      typeChk = (kind === '');
-    }
-
-    if (!analysis.extended_metadata.kind) {
-      analysis.extended_metadata.publish = false;
-    }
-    const isPublish = (analysis.extended_metadata.publish && (analysis.extended_metadata.publish === true || analysis.extended_metadata.publish === 'true')
-      && !statusMissing && !nmrMissing && !datasetMissing) || false;
-    let analysesIcon = '';
-    switch (analysesType) {
-      case 'Reaction':
-        analysesIcon = <i className="icon-reaction" />;
-        break;
-      case 'Product':
-        analysesIcon = <i className="icon-sample" />;
-        break;
-      default:
-        analysesIcon = '';
-    }
-
-    return (
-      <div
-        className="analysis-header order"
-      >
-        <div className="preview">
-          <img src={previewImg} alt="preview" />
-        </div>
-        <div className="abstract">
-          <div className="upper-btn">
-            <div
-              className="button-right"
-            >
-              &nbsp;{analysesIcon}
-            </div>
-            <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
-            <span
-              className="button-right add-to-report"
-              onClick={stopBubble}
-            >
-              <OverlayTrigger
-                placement="left"
-                overlay={<Tooltip id="checkAnalysis" className="publish_tooltip">{btnTip}</Tooltip>}
-              >
-                <div>
-                  <Checkbox
-                    onChange={() => { this.handleCheck(analysis, analysesType); }}
-                    disabled={typeMissing || statusMissing || nmrMissing || datasetMissing}
-                    defaultChecked={isPublish}
-                  >
-                    {
-                      (typeMissing || statusMissing || nmrMissing || datasetMissing) ?
-                        <span style={{ color: 'red' }}>Add to publication</span>
-                      :
-                        <span>Add to publication</span>
-                    }
-                  </Checkbox>
-                </div>
-              </OverlayTrigger>
-            </span>
-          </div>
-          <div className="lower-text">
-            <div className="main-title">
-              {analysis.name}
-            </div>
-            {
-              typeChk ?
-                <div className="sub-title" style={{ color: 'red' }}>Type: {kind}</div>
-                :
-                <div className="sub-title">Type: {kind}</div>
-            }
-            {
-              statusChk ?
-                <div className="sub-title"><span style={{ color: 'red' }}>Status:</span> {status} {statusMsg}</div>
-                :
-                <div className="sub-title"><span>Status:</span> {status} {statusMsg}</div>
-            }
-            <div className="desc sub-title">
-              <span style={{ float: 'left', marginRight: '5px' }}>
-                Content:
-              </span>
-              <QuillViewer value={content} />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Panel key={`analysis-${this.props.analysis.id}`} eventKey={this.props.analysis.id}>
-        <Panel.Heading>
-          <Panel.Title toggle>
-            {this.generateTitle()}
-          </Panel.Title>
-        </Panel.Heading>
-        <Panel.Body collapsible>
-          <ContainerComponent readOnly container={this.props.analysis} />
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-PublishAnalysesTag.propTypes = {
-  reaction: PropTypes.instanceOf(Reaction).isRequired,
-  analysis: PropTypes.object.isRequired,
-  analysesType: PropTypes.string,
-  handleAnalysesChecked: PropTypes.func.isRequired,
-  product: PropTypes.object
-};
-PublishAnalysesTag.defaultProps = {
-  analysesType: '',
-  product: null
-};
-
-RenderPublishAnalysesPanel.propTypes = {
-  analysis: PropTypes.object.isRequired,
-  type: PropTypes.string.isRequired,
-  userInfo: PropTypes.string,
-  isPublic: PropTypes.bool,
-  isLogin: PropTypes.bool,
-  isReviewer: PropTypes.bool,
-  pageId: PropTypes.number,
-  pageType: PropTypes.string
-};
-
-RenderPublishAnalysesPanel.defaultProps = {
-  userInfo: '',
-  isPublic: true,
-  isLogin: false,
-  isReviewer: false,
-  pageId: null,
-  pageType: 'reactions'
-};
-
-ReactionTable.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object,
-  isPublic: PropTypes.bool.isRequired
-};
-
-ReactionTable.defaultProps = {
-  isPublic: true,
-  showScheme: false
-};
-
-ReactionRinChiKey.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionProperties.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-ReactionTlc.propTypes = {
-  reaction: PropTypes.any.isRequired,
-  toggle: PropTypes.func,
-  show: PropTypes.bool,
-  bodyAttrs: PropTypes.object
-};
-
-const DatasetDetail = ({ isPublished, element }) => {
-  const { molecule } = element;
-  molecule.tag = {
-    taggable_data: { pubchem_cid: molecule.pubchem_cid }
-  };
-
-  const moleculeView = molecule.inchikey === null ? (<span />) : (<MoleculeInfo molecule={molecule} sample_svg_file={element.sample_svg_file} />);
-  const datasetView = !element ? (
-    <span>There is no published dataset</span>
-  ) : (
-    <RenderPublishAnalyses
-      key={`${element.id}-${element.updated_at}`}
-      analysis={element.dataset}
-      expanded
-      elementType="Sample"
-      license={element.license}
-      publication={element.publication}
-      isPublic={isPublished}
-    />
-  );
-
-  return (
-    <Grid>
-      {moleculeView}
-      <br /><br />
-      <Row>
-        <Col sm={12} md={12} lg={12}>
-          {datasetView}
-        </Col>
-      </Row>
-    </Grid>
-  );
-};
-
-DatasetDetail.propTypes = {
-  element: PropTypes.object.isRequired, isPublished: PropTypes.bool.isRequired
-};
-
-const ClosePanel = ({ element }) => (
-  <div>
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id="closeReaction">Close</Tooltip>}
-    >
-      <Button
-        bsSize="xsmall"
-        className="button-right"
-        onClick={() => PublicActions.close(element, true)}
-      >
-        <i className="fa fa-times" />
-      </Button>
-    </OverlayTrigger>
-  </div>
-);
-
-ClosePanel.propTypes = {
-  element: PropTypes.object.isRequired,
-};
-
-const CommentBtn = (props) => {
-  const {
-    canComment,
-    review_info,
-    onShow,
-    field,
-    review,
-    orgInfo
-  } = props;
-
-  if (!canComment) return '';
-  return (
-    <span>
-      <RepoCommentBtn
-        field={field}
-        review={review}
-        review_info={review_info}
-        orgInfo={orgInfo}
-        onShow={() => onShow(true, field, orgInfo)}
-      />&nbsp;
-    </span>
-  );
-};
-
-CommentBtn.propTypes = {
-  canComment: PropTypes.bool.isRequired,
-  review: PropTypes.object.isRequired,
-  review_info: PropTypes.object,
-  onShow: PropTypes.func.isRequired,
-  field: PropTypes.string.isRequired,
-  orgInfo: PropTypes.string.isRequired
-};
-
-CommentBtn.defaultProps = {
-  review_info: {}
-};
-
-
-const Doi = (props) => {
-  const {
-    type, id, doi, isPublished
-  } = props;
-  let data = '';
-  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
-  if (isPublished) {
-    data = (
-      <span>
-        <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
-          {doi}
-        </Button>
-        <ClipboardCopyBtn text={`https://dx.doi.org/${doi}`} />
-        <DownloadMetadataBtn type={type} id={id} />
-        <DownloadJsonBtn type={type} id={id} />
-      </span>
-    );
-  } else {
-    data = (
-      <span>
-        {doi?.full_doi}&nbsp;<ClipboardCopyBtn text={`https://dx.doi.org/${doi?.full_doi}`} />
-      </span>
-    );
-  }
-
-  return (
-    <h5>
-      <b>{title}&nbsp;</b>
-      {data}
-    </h5>
-  );
-};
-
-Doi.propTypes = {
-  type: PropTypes.string.isRequired,
-  id: PropTypes.number.isRequired,
-  doi: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]).isRequired,
-  isPublished: PropTypes.bool.isRequired,
-};
-
-export {
-  AnalysisHeaderSample,
-  AnalysesTypeJoinLabel,
-  AffiliationList,
-  AuthorList,
-  BackSoonPage,
-  CalcDuration,
-  ChemotionId,
-  ClipboardCopyLink,
-  ClipboardCopyBtn,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  DateFormatYMDLong,
-  DateFormatDMYTime,
-  DatasetDetail,
-  Doi,
-  DownloadDOICsv,
-  DownloadMetadataBtn,
-  DownloadJsonBtn,
-  EditorTips,
-  ElementIcon,
-  ElStateLabel,
-  ElSubmitTime,
-  ElAspect,
-  EmbargoCom,
-  IconToMyDB,
-  ChecklistPanel,
-  isNmrPass,
-  isDatasetPass,
-  HomeFeature,
-  MoleculeInfo,
-  NewsroomTemplate,
-  PublishAnalysesTag,
-  PublishTypeAs,
-  ReactionSchemeOnlyInfo,
-  ReactionInfo,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalyses,
-  RenderPublishAnalysesPanel,
-  resizableSvg,
-  SchemeWord,
-  SidToPubChem,
-  OrcidIcon,
-  SvgPath,
-  ToggleIndicator,
-  CollectionDesc
-};
diff --git a/app/packs/src/libHome/RepoContact.js b/app/packs/src/libHome/RepoContact.js
deleted file mode 100644
index 1c44e4b30..000000000
--- a/app/packs/src/libHome/RepoContact.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Well, Col, Row } from 'react-bootstrap';
-
-const RepoContact = () => {
-  const cpmail = <span>nicole.jung<i className="fa fa-at" aria-hidden="true" />kit.edu</span>;
-  const institute = 'Institute of Biological and Chemical Systems – Functional Molecular Systems (IBCS-FMS)';
-  return (
-    <div >
-      <br /><br /><br />
-      <Well style={{ width: '90%', margin: 'auto' }}>
-        <Row>
-          <Col md={6}>
-            <table style={{ width: '80%', height: 400, margin: 'auto' }}>
-              <tbody>
-                <tr><td><h3>Complat</h3><br /><br /></td></tr>
-                <tr><td>{institute}</td></tr>
-                <tr><td>Hermann-von-Helmholtz-Platz 1</td></tr>
-                <tr><td>Building 341</td></tr>
-                <tr><td>76344 Eggenstein-Leopoldshafen</td></tr>
-                <tr><td>Germany<br /><br /></td></tr>
-                <tr><td><i className="fa fa-user" aria-hidden="true" /> Dr. Nicole Jung</td></tr>
-                <tr><td><i className="fa fa-phone" aria-hidden="true" /> +49 721 608 24697</td></tr>
-                <tr><td><i className="fa fa-envelope" aria-hidden="true" /> {cpmail}</td></tr>
-              </tbody>
-            </table>
-          </Col>
-          <Col md={6}>
-            <iframe
-              title="Complat location"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2612.4795306481205!2d8.428392315993667!3d49.09652997931155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDA1JzQ3LjUiTiA4wrAyNSc1MC4xIkU!5e0!3m2!1sde!2sde!4v1473947291352"
-              style={{
-                width: '80%', height: 400, frameborder: '0', margin: 'auto'
-              }}
-            />
-          </Col>
-        </Row>
-      </Well>
-      <br /><br /><br />
-    </div>
-  );
-};
-
-export default RepoContact;
diff --git a/app/packs/src/libHome/RepoContainerDatasets.js b/app/packs/src/libHome/RepoContainerDatasets.js
deleted file mode 100644
index 09d3a3149..000000000
--- a/app/packs/src/libHome/RepoContainerDatasets.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import { ListGroup, ListGroupItem, Well } from 'react-bootstrap';
-import ContainerDatasetModal from '../components/ContainerDatasetModal';
-import ContainerDatasetField from '../components/ContainerDatasetField';
-
-export default class RepoContainerDatasets extends Component {
-  constructor(props) {
-    super(props);
-    const { container } = props;
-    this.state = {
-      container,
-      modal: {
-        show: false,
-        dataset_container: null
-      }
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    });
-  }
-
-  handleModalOpen(datasetContainer) {
-    const { modal } = this.state;
-    modal.dataset_container = datasetContainer;
-    modal.show = true;
-    this.setState({ modal });
-  }
-
-  handleModalHide() {
-    const { modal } = this.state;
-    modal.show = false;
-    modal.dataset_container = null;
-    this.setState({ modal });
-    // https://github.com/react-bootstrap/react-bootstrap/issues/1137
-    document.body.className = document.body.className.replace('modal-open', '');
-  }
-
-  render() {
-    const { container, modal } = this.state;
-
-    if (container.children.length > 0) {
-      return (
-        <div>
-          <ListGroup style={{ marginBottom: 20 }}>
-            {container.children.map((datasetContainer) => {
-              return (
-                <ListGroupItem key={`datasetContainer-${datasetContainer.id}`} className="repo-analysis-listgroup">
-                  <ContainerDatasetField
-                    dataset_container={datasetContainer}
-                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
-                    disabled
-                    isPublic={this.props.isPublic}
-                  />
-                </ListGroupItem>
-              );
-            })}
-          </ListGroup>
-          <hr style={{ borderColor: '#ddd' }} />
-          <ContainerDatasetModal
-            onHide={() => this.handleModalHide()}
-            show={modal.show}
-            readOnly
-            dataset_container={modal.dataset_container}
-            disabled
-          />
-        </div>
-      );
-    }
-    return (
-      <div>
-        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
-          <h5>There are currently no Datasets.</h5>
-        </Well>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoDirective.js b/app/packs/src/libHome/RepoDirective.js
deleted file mode 100644
index de44abfb5..000000000
--- a/app/packs/src/libHome/RepoDirective.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
-import { Parser } from 'html-to-react';
-
-export default class RepoDirective extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      content: <div />
-    };
-  }
-
-  componentDidMount() {
-    fetch('/directives/directives.html', { credentials: 'same-origin' })
-      .then(res => res.text())
-      .then((html) => {
-        // const parser = new HtmlToReactParser();
-        this.setState({ content: Parser().parse(html) });
-      })
-      .catch((errorMessage) => { console.log(errorMessage); });
-  }
-
-  render() {
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={3} />
-        <Col md={6}>
-          <Panel>
-            <Panel.Heading>
-              <Panel.Title>Directive to use the service</Panel.Title>
-            </Panel.Heading>
-            <Panel.Body style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
-              {this.state.content}
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={3} />
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoElementDetails.js b/app/packs/src/libHome/RepoElementDetails.js
deleted file mode 100644
index 63b7d16d8..000000000
--- a/app/packs/src/libHome/RepoElementDetails.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import PublicStore from '../components/stores/PublicStore';
-import { DatasetDetail } from './RepoCommon';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoElementDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentElement: PublicStore.getState().currentElement,
-      elementType: PublicStore.getState().elementType
-    };
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType, listType } = this.state;
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'dataset': return <DatasetDetail isPublished element={currentElement} />;
-      case 'molecule': return (
-        <RepoSampleDetails
-          isPublished
-          element={currentElement}
-          review_info={this.state.review_info}
-          review={this.state.review || {}}
-          listType={listType}
-        />);
-      case 'reaction': return (
-        <RepoReactionDetails
-          isPublished
-          reaction={currentElement}
-          review_info={this.state.review_info}
-          review={this.state.review || {}}
-        />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none', maxHeight: '80%' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoEmbargo.js b/app/packs/src/libHome/RepoEmbargo.js
deleted file mode 100644
index 56af4c12e..000000000
--- a/app/packs/src/libHome/RepoEmbargo.js
+++ /dev/null
@@ -1,386 +0,0 @@
-import React, { Component } from 'react';
-import { Table, Col, Row, Navbar, ButtonGroup, Button, ButtonToolbar, Modal, Panel } from 'react-bootstrap';
-import Select from 'react-select';
-import { filter } from 'lodash';
-import RepoEmbargoDetails from './RepoEmbargoDetails';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import EmbargoStore from '../components/stores/EmbargoStore';
-import { ElAspect } from './RepoCommon';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import { MetadataModal, InfoModal } from './RepoEmbargoModal';
-import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
-import EmbargoFetcher from '../components/fetchers/EmbargoFetcher';
-
-export default class RepoEmbargo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      elements: [],
-      current_user: {},
-      currentElement: null,
-      moveElement: {},
-      newEmbargo: null,
-      selectEmbargo: null,
-      bundles: [],
-      showConfirmModal: false,
-      showMoveModal: false,
-      showInfoModal: false,
-      showAuthorModal: false,
-      showMetadataModal: false,
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleEmbargoAccount = this.handleEmbargoAccount.bind(this);
-    this.handleEmbargoRelease = this.handleEmbargoRelease.bind(this);
-    this.handleEmbargoDelete = this.handleEmbargoDelete.bind(this);
-    this.handleMoveEmbargo = this.handleMoveEmbargo.bind(this);
-    this.handleMoveShow = this.handleMoveShow.bind(this);
-    this.handleMoveClose = this.handleMoveClose.bind(this);
-    this.handleInfoShow = this.handleInfoShow.bind(this);
-    this.handleInfoClose = this.handleInfoClose.bind(this);
-    this.handleAuthorShow = this.handleAuthorShow.bind(this);
-    this.handleAuthorClose = this.handleAuthorClose.bind(this);
-    this.handleMetadataShow = this.handleMetadataShow.bind(this);
-    this.handleMetadataClose = this.handleMetadataClose.bind(this);
-    this.handleEmbargoChange = this.handleEmbargoChange.bind(this);
-  }
-
-  componentDidMount() {
-    EmbargoStore.listen(this.onChange);
-    EmbargoActions.fetchEmbargoBundle();
-  }
-
-  componentWillUnmount() {
-    EmbargoStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    let { selectEmbargo, elements, current_user, currentElement, bundles } = this.state;
-    if (state.selectEmbargo && state.selectEmbargo?.id !== this.state.selectEmbargo?.id) {
-      ({ selectEmbargo } = state);
-    }
-    if (state.elements) { ({ elements } = state); }
-    if (state.current_user) { ({ current_user } = state); }
-    if (!state.currentElement && !this.state.currentElement) {
-      currentElement = null;
-    } else {
-      ({ currentElement } = state);
-    }
-    if (state.bundles) { ({ bundles } = state); }
-    if ((selectEmbargo?.id !== this.state.selectEmbargo?.id)
-      || (JSON.stringify(elements) !== JSON.stringify(this.state.elements))
-      || (current_user?.id !== this.state.current_user?.id)
-      || (currentElement !== this.state.currentElement)
-      || (bundles !== this.state.bundles)) {
-      const validSelect = bundles?.find(b => b.element_id === selectEmbargo?.element_id);
-      if (typeof (validSelect) === 'undefined') {
-        this.setState(prevState => ({ ...prevState, selectEmbargo: null, elements, current_user, currentElement, bundles }));
-      } else {
-        EmbargoFetcher.refreshEmbargo(selectEmbargo || {})
-          .then((result) => {
-            if (!result.error) this.setState(prevState => ({ ...prevState, selectEmbargo: result, elements, current_user, currentElement, bundles }), EmbargoActions.getEmbargoElements(selectEmbargo.element_id));
-          }).catch((errorMessage) => {
-            console.log(errorMessage);
-          });
-      }
-    }
-  }
-
-  onClickDelete() {
-    this.setState({ showConfirmModal: true });
-  }
-
-  handleMoveShow(element) {
-    this.setState({ showMoveModal: true, moveElement: element });
-  }
-
-  handleMoveClose() {
-    this.setState({ showMoveModal: false, moveElement: {} });
-  }
-
-  handleInfoShow() {
-    this.setState({ showInfoModal: true });
-  }
-
-  handleInfoClose() {
-    this.setState({ showInfoModal: false });
-  }
-
-  handleAuthorShow() {
-    this.setState({ showAuthorModal: true });
-  }
-
-  handleAuthorClose() {
-    this.setState({ showAuthorModal: false });
-  }
-
-  handleMetadataShow() {
-    this.setState({ showMetadataModal: true });
-  }
-
-  handleMetadataClose() {
-    this.setState({ showMetadataModal: false });
-  }
-
-  handleEmbargoChange(selectedValue) {
-    if (selectedValue) {
-      this.setState({ newEmbargo: selectedValue });
-    }
-  }
-
-  handleElementSelection(eventKey, event) {
-    if (eventKey) {
-      const { bundles } = this.state;
-      const selectEmbargo = bundles.find(b => b.element_id === eventKey.value);
-      this.setState({ selectEmbargo }, EmbargoActions.getEmbargoElements(eventKey.value));
-    }
-  }
-
-  handleEmbargoAccount() {
-    const { selectEmbargo, current_user } = this.state;
-
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else if (current_user.id !== selectEmbargo.published_by) {
-      alert('only the submitter can generate a temporary account!');
-    } else {
-      EmbargoActions.generateEmbargoAccount(selectEmbargo.element_id);
-      alert(`A temporary account for [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been created. The details have been sent to you by e-mail.`);
-    }
-  }
-
-  handleEmbargoRelease() {
-    const { selectEmbargo, current_user } = this.state;
-    if (selectEmbargo === null) {
-      alert('Please select an embargo first!');
-    } else if (current_user.id !== selectEmbargo.published_by) {
-      alert('only the submitter can perform the release!');
-    } else {
-      EmbargoActions.releaseEmbargo(selectEmbargo.element_id);
-      alert(`The embargo on [${selectEmbargo.taggable_data && selectEmbargo.taggable_data.label}] has been released!`);
-    }
-  }
-
-  handleEmbargoDelete(shouldPerform) {
-    if (shouldPerform) {
-      const { selectEmbargo, current_user } = this.state;
-      if (selectEmbargo === null) {
-        alert('Please select an embargo first!');
-      } else if (current_user.id !== selectEmbargo.published_by) {
-        alert('only the submitter can delete the release!');
-      } else {
-        EmbargoActions.deleteEmbargo(selectEmbargo.element_id);
-      }
-    }
-    this.setState({ showConfirmModal: false });
-  }
-
-  handleMoveEmbargo() {
-    const { selectEmbargo, moveElement, newEmbargo } = this.state;
-    EmbargoActions.moveEmbargo(selectEmbargo.element_id, newEmbargo, moveElement);
-    this.setState({ showMoveModal: false });
-  }
-
-  rendeActionBtn(bundles) {
-    const { selectEmbargo, elements, current_user } = this.state;
-    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const actionButtons = (!selectEmbargo || !current_user || (current_user.id !== selectEmbargo.published_by)) ? <span /> :
-      (
-        <span>
-          <ButtonToolbar>
-            <Button
-              bsStyle="primary"
-              id="all-inner-button"
-              disabled={selectEmbargo === null || elements.length === 0}
-              onClick={() => this.handleEmbargoAccount()}
-            >
-              <i className="fa fa-envelope-o" aria-hidden="true" />&nbsp;Anonymous
-            </Button>
-            <Button
-              bsStyle="warning"
-              id="all-inner-button"
-              disabled={selectEmbargo === null || acceptedEl.length === 0 || acceptedEl.length !== elements.length}
-              onClick={() => this.handleEmbargoRelease()}
-            >
-              <i className="fa fa-telegram" aria-hidden="true" />&nbsp;Release
-            </Button>
-            <Button
-              bsStyle="danger"
-              id="all-inner-button"
-              disabled={selectEmbargo === null || elements.length !== 0}
-              onClick={() => this.onClickDelete()}
-            >
-              <i className="fa fa-trash-o" aria-hidden="true" />&nbsp;Delete
-            </Button>
-          </ButtonToolbar>
-        </span>
-      );
-    const filterDropdown = (
-      <ButtonGroup>
-        {actionButtons}
-      </ButtonGroup>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-  renderSearch(bundles) {
-    const { selectEmbargo, elements, current_user } = this.state;
-    const acceptedEl = ((typeof (elements) !== 'undefined' && elements) || []).filter(e => e.state === 'accepted');
-    const options = [];
-    bundles?.forEach((col) => {
-      const tag = col.taggable_data || {};
-      options.push({ value: col.element_id, name: tag.label, label: tag.label });
-    });
-
-    const filterDropdown = (
-      <div className="home-adv-search">
-        <Select
-          value={selectEmbargo && selectEmbargo.element_id}
-          onChange={e => this.handleElementSelection(e)}
-          options={options}
-          style={{ width: '180px' }}
-          clearable={false}
-        />
-        <ButtonGroup>
-          <Button
-            id="all-info-button"
-            disabled={selectEmbargo === null || elements?.length === 0}
-            onClick={() => this.handleMetadataShow()}
-          >
-            <i className="fa fa-file-code-o" aria-hidden="true" />&nbsp;Metadata
-          </Button>
-          <Button
-            id="all-info-button"
-            disabled={selectEmbargo === null || elements?.length === 0}
-            onClick={() => this.handleInfoShow()}
-          >
-            <i className="fa fa-users" aria-hidden="true" />&nbsp;Info and DOI
-          </Button>
-          <RepoReviewAuthorsModal
-            element={selectEmbargo}
-            disabled={selectEmbargo === null || elements?.length === 0}
-            schemeOnly={false}
-            taggData={selectEmbargo?.taggable_data}
-          />
-
-        </ButtonGroup>
-      </div>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {filterDropdown}
-      </div>
-    );
-  }
-
-  renderMoveModal() {
-    const { showMoveModal, selectEmbargo, moveElement, bundles } = this.state;
-    const options = [
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-
-    bundles?.forEach((col) => {
-      const tag = col.taggable_data || {};
-      options.push({ value: col.element_id, name: tag.label, label: tag.label });
-    });
-
-    const allBundles = filter(options, b => b.value !== (selectEmbargo == null ? '' : selectEmbargo.element_id));
-
-    return (
-      <Modal
-        show={showMoveModal}
-        dialogClassName="move-embargo-dialog"
-        onHide={this.handleMoveClose}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{moveElement.type}: [{moveElement.title}]</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div>
-            <Panel bsStyle="success">
-              <Panel.Heading>
-                <Panel.Title>
-                  Move {moveElement.type} [{moveElement.title}] from Embargo Bundle [{selectEmbargo && selectEmbargo.taggable_data.label}] to :
-                </Panel.Title>
-              </Panel.Heading>
-              <Panel.Body>
-                <div>
-                  <Select
-                    value={this.state.newEmbargo}
-                    onChange={e => this.handleEmbargoChange(e)}
-                    options={allBundles}
-                    className="select-assign-collection"
-                  />
-                  <br />
-                  <ButtonToolbar>
-                    <Button bsStyle="primary" onClick={() => this.handleMoveEmbargo()}>Move Embargoed Bundle</Button>
-                  </ButtonToolbar>
-                </div>
-              </Panel.Body>
-            </Panel>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-  render() {
-    const {
-      elements, bundles, currentElement, currentUser, showConfirmModal, showInfoModal, selectEmbargo, showMetadataModal
-    } = this.state;
-    const id = (selectEmbargo && selectEmbargo.element_id) || 0;
-    const la = selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
-    const metadata = (selectEmbargo && selectEmbargo.metadata_xml) || '';
-    const owner = (selectEmbargo && selectEmbargo.published_by) || 0;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={currentElement ? 4 : 12} >
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-            {this.renderSearch(bundles)}
-            <div style={{ clear: 'both' }} />
-          </Navbar>
-          <div>
-            <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-              <Table striped className="review-entries">
-                <tbody striped="true" bordered="true" hover="true">
-                  {((typeof (elements) !== 'undefined' && elements) || []).map(r => ElAspect(r, EmbargoActions.displayReviewEmbargo, currentUser, owner, currentElement, this.handleMoveShow)) }
-                </tbody>
-              </Table>
-            </div>
-            {this.rendeActionBtn(bundles)}
-          </div>
-          <ConfirmModal
-            showModal={showConfirmModal}
-            title="Warning"
-            content="Are you sure that you want to delete this ?"
-            onClick={this.handleEmbargoDelete}
-          />
-        </Col>
-        <Col className="review-element" md={currentElement ? 8 : 0}>
-          <RepoEmbargoDetails currentElement={currentElement} />
-          { this.renderMoveModal() }
-
-          <InfoModal
-            showModal={showInfoModal}
-            selectEmbargo={selectEmbargo}
-            onCloseFn={this.handleInfoClose}
-          />
-          <MetadataModal
-            showModal={showMetadataModal}
-            label={la}
-            metadata={metadata}
-            onCloseFn={this.handleMetadataClose}
-            elementId={id}
-            elementType="Collection"
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoEmbargoDetails.js b/app/packs/src/libHome/RepoEmbargoDetails.js
deleted file mode 100644
index f5205fce2..000000000
--- a/app/packs/src/libHome/RepoEmbargoDetails.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react';
-import EmbargoStore from '../components/stores/EmbargoStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoEmbargoDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    EmbargoStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    EmbargoStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { elementType } = this.state;
-    const { currentElement } = this.props;
-
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction':
-        return (
-          <RepoReactionDetails
-            reaction={currentElement.reaction}
-            canComment
-            review_info={this.state.review_info}
-            showComment={false}
-            btnAction={this.state.btnAction}
-            isReview={false}
-            review={this.state.review}
-          />);
-      case 'sample':
-        return (
-          <RepoSampleDetails
-            element={currentElement}
-            canComment
-            btnAction={this.state.btnAction}
-            review_info={this.state.review_info}
-            showComment={false}
-            review={this.state.review}
-          />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>);
-  }
-}
diff --git a/app/packs/src/libHome/RepoEmbargoModal.js b/app/packs/src/libHome/RepoEmbargoModal.js
deleted file mode 100644
index f5e415153..000000000
--- a/app/packs/src/libHome/RepoEmbargoModal.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Label, Modal, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { AffiliationMap } from 'repo-review-ui';
-import Utils from '../components/utils/Functions';
-import {
-  AffiliationList,
-  AuthorList,
-  ContributorInfo,
-  DownloadMetadataBtn
-} from './RepoCommon';
-
-const Doi = (props) => {
-  const { type, id, doi } = props;
-  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
-  const data = (
-    <span>
-      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>{doi}</Button>
-      <DownloadMetadataBtn type={type} id={id} />
-      <OverlayTrigger placement="bottom" overlay={<Tooltip id="tip_clipboard">copy to clipboard</Tooltip>}>
-        <Button onClick={() => { navigator.clipboard.writeText(`https://dx.doi.org/${doi}`); }} bsSize="xsmall" >
-          <i className="fa fa-clipboard" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    </span>
-  );
-  return (
-    <h5>
-      <b>{title} </b>
-      {data}
-    </h5>
-  );
-};
-
-const Doi = (props) => {
-  const {
-    type, id, doi
-  } = props;
-
-  const title = `${type} DOI:`.replace(/(^\w)/g, m => m.toUpperCase());
-  const data = (
-    <span>
-      <Button key={`${type}-jumbtn-${id}`} bsStyle="link" onClick={() => { window.location = `https://dx.doi.org/${doi}`; }}>
-        {doi}
-      </Button>
-      <DownloadMetadataBtn type={type} id={id} />
-    </span>
-  );
-  return (
-    <h5>
-      <b>{title} </b>
-      {data}
-    </h5>
-  );
-};
-
-const MetadataModal = ({ showModal, label, metadata, onCloseFn, elementId, elementType }) => {
-  const contentUrl = `/api/v1/public/metadata/download?type=${elementType.toLowerCase()}&id=${elementId}`;
-  return (
-    <div>
-      <Modal
-        show={showModal}
-        onHide={onCloseFn}
-        dialogClassName="news-preview-dialog"
-      >
-        <Modal.Body style={{ overflow: 'auto' }}>
-          <div><h4><Label>{label}</Label></h4></div>
-          <div style={{ maxHeight: '50vh', overflow: 'auto', whiteSpace: 'pre', backgroundColor: 'black', color: 'white', fontFamily: 'monospace' }}>
-            {metadata}
-          </div>
-          <br />
-          <ButtonToolbar>
-            <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
-            <Button bsStyle="primary" onClick={() => Utils.downloadFile({ contents: contentUrl })}> Download</Button>
-          </ButtonToolbar>
-        </Modal.Body>
-      </Modal>
-    </div>
-  );
-};
-
-MetadataModal.propTypes = {
-  elementId: PropTypes.number.isRequired,
-  elementType: PropTypes.string.isRequired
-};
-
-const ElementDoi = (edois, isPublished) => {
-  if (edois == null || typeof edois === 'undefined' || edois.length === 0) { return (<div />); }
-  const dois = edois.map(edoi => (<div key={`${edoi.element_type}_${edoi.element_id}`}><Doi type={edoi.element_type} id={edoi.element_id} doi={edoi.doi || ''} isPublished={isPublished} /></div>));
-  return (<div>{dois}</div>);
-};
-
-const InfoModal = ({ showModal, selectEmbargo, onCloseFn, editable=false }) => {
-  const tag = (selectEmbargo && selectEmbargo.taggable_data) || {};
-  const affiliationMap = AffiliationMap(tag.affiliation_ids);
-  const doi = tag.col_doi || '';
-  const la =  selectEmbargo && selectEmbargo.taggable_data && selectEmbargo.taggable_data.label;
-  const isPublished = true;
-  const author_ids = tag.author_ids || [];
-  const id = (selectEmbargo && selectEmbargo.element_id) || 0;
-  return (
-    <Modal show={showModal} onHide={onCloseFn} bsSize="large">
-      <Modal.Header closeButton>
-        <Modal.Title>
-          <h4><Label>{la}</Label></h4>
-          <ContributorInfo contributor={tag.contributors} />
-          <h5>
-            <b>Author{author_ids.length > 1 ? 's' : ''}: </b>
-            <AuthorList creators={tag.creators} affiliationMap={affiliationMap} />
-          </h5>
-          <AffiliationList
-            affiliations={tag.affiliations}
-            affiliationMap={affiliationMap}
-          />
-          <Doi type="collection" id={id} doi={doi} isPublished={isPublished} />
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body style={{ height: '50vh', overflow: 'auto' }}>
-        <div>
-          {ElementDoi(tag.element_dois, isPublished)}
-        </div>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonToolbar>
-          <Button bsStyle="warning" onClick={onCloseFn}> Close</Button>
-        </ButtonToolbar>
-      </Modal.Footer>
-    </Modal>
-  );
-};
-
-export { MetadataModal, InfoModal };
diff --git a/app/packs/src/libHome/RepoHome.js b/app/packs/src/libHome/RepoHome.js
deleted file mode 100644
index db15c8c37..000000000
--- a/app/packs/src/libHome/RepoHome.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row, Thumbnail } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import { HomeFeature } from './RepoCommon';
-import RepoCardStaticsBoard from './RepoCardStaticsBoard';
-import RepoCardIntro from './RepoCardIntro';
-import RepoCardMoleculeArchive from './RepoCardMoleculeArchive';
-
-const PartnersInfo = (info) => {
-  const { header, img, content } = info;
-  const imgSrc = `/images/repo/${img}`;
-
-  return (
-    <Thumbnail alt={header} src={imgSrc} className="partners-info" key={img}>
-      <div className="info">
-        <h4>{header}</h4>
-        <p>{content}</p>
-      </div>
-    </Thumbnail>
-  );
-};
-
-const Infos = [
-  {
-    header: 'Database API',
-    img: 'OAI.png',
-    content: 'The molecule and dataset metadata are available via a low-barrier mechanism for repository interopability.',
-  }, {
-    header: 'KIT Stiftung',
-    img: 'KITStiftung.png',
-    content: 'The KIT foundation honors excellent contributions to chemistry research with the Chemotion Award.',
-  }, {
-    header: 're3data',
-    img: 're3data.png',
-    content: 'Karlsruhe Institute of Technology Registry of Research Data Repositories',
-  }, {
-    header: 'Inchitrust',
-    img: 'InChITRUST.png',
-    content: 'The KIT has a Supporter Membership.',
-  }, {
-    header: 'Datacite',
-    img: 'DataCite.png',
-    content: 'Helping you to find, access, and reuse data.',
-  }, {
-    header: 'Pubmed',
-    img: 'pubchem.jpg',
-    content: 'All compounds are automatically registered with PubChem.',
-  }, {
-    header: 'Thomson Reuters',
-    img: 'DCIbadge.png',
-    content: 'Datasets are automatically registered at the Data Citation Index.',
-  }, {
-    header: 'DFG',
-    img: 'ri_logo.png',
-    content: 'Listed in the DFG catalogue for Research Infrastructures.',
-  }
-];
-
-class RepoHome extends Component {
-  constructor(props) {
-    super();
-    this.state = {
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-    PublicActions.lastPublished();
-    PublicActions.publishedStatics();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(PublicState) {
-    if (PublicState.lastPublished || PublicState.publishedStatics) {
-      this.setState(prevState => ({
-        ...prevState,
-        lastPublished: PublicState.lastPublished,
-        publishedStatics: PublicState.publishedStatics
-      }));
-    }
-  }
-
-  render() {
-    const features = {
-      metadata: {
-        fa: 'fa fa-file-code-o',
-        title: 'Metadata',
-        intro: 'Keep your research data findable and accessible and collect descriptions about the data. Based on DataCite Metadata Scheme.'
-      },
-      doi: {
-        fa: 'fa fa-id-card-o',
-        title: 'DOI',
-        intro: 'Tie Digital Object Identifier (DOI) to your research data. This registers your data in DataCite and makes it identifiable, searchable and citable.'
-      },
-      license: {
-        fa: 'fa fa-creative-commons',
-        title: 'Licenses',
-        intro: 'Choose which license is suitable for your research data to allow others to re-use your data.'
-      },
-      embargo: {
-        fa: 'fa fa-ban',
-        title: 'Embargo',
-        intro: 'Put an embargo on your data. This allows you to delay the publication of your research data. You can release to make your research data visible to the public whenever you are ready.'
-      },
-      // usage: {
-      //   fa: 'fa fa-bar-chart',
-      //   title: 'Usage',
-      //   intro: 'Assess your research data and track the published research data......'
-      // },
-      oai: {
-        fa: 'fa fa-tasks',
-        title: 'OAI Provider',
-        intro: 'Exposes your research data using the Open Archives Initative Protocol for Metadata Harvesting (OAI-PMH). OAI-PMH is a protocol developed for harvesting metadata and we support representing the metadata of your published research data.'
-      },
-      dataQuality: {
-        fa: 'fa fa-diamond',
-        title: 'Data Quality',
-        intro: 'Release your research data and pass an internal review that ensures data quality.'
-      },
-      peer: {
-        fa: 'fa fa-external-link',
-        title: 'Peer review',
-        intro: 'Before publication, you can share your data with external reviewers or the publishers.'
-      },
-      store: {
-        fa: 'fa fa-database',
-        title: 'Storage',
-        intro: 'Hosted by an experienced data center, Chemotion repository can store your research data reliably and securely.'
-      },
-      api: {
-        fa: 'fa fa-connectdevelop',
-        title: 'APIs',
-        intro: 'With Chemotion APIs, transfer data easily from your ELN to the repository.'
-      }
-    };
-
-    return (
-      <Row className="repo-welcome">
-        <Col lg={12} md={12} sm={12} style={{ display: 'flex', justifyContent: 'center' }}>
-          <img
-            className="icon-chemotion"
-            src="/images/repo/Chemotion-V1.png"
-            key="chemotion_full"
-            alt="Chemotion Repository"
-          />
-        </Col>
-        <Col md={12} sm={12}>
-          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-            <Col md={3} sm={12}>
-              <RepoCardMoleculeArchive publishedStatics={this.state.publishedStatics} />
-            </Col>
-            <Col md={6} sm={12}>
-              <RepoCardIntro lastPublished={this.state.lastPublished} />
-            </Col>
-            <Col md={3} sm={12}>
-              <RepoCardStaticsBoard publishedStatics={this.state.publishedStatics} />
-            </Col>
-          </div>
-        </Col>
-        <Col md={12} sm={12}>
-          <Row>
-            <Col md={2} sm={12}>&nbsp;</Col>
-            <Col md={8} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Features
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.store.fa} title={features.store.title} intro={features.store.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.metadata.fa} title={features.metadata.title} intro={features.metadata.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.doi.fa} title={features.doi.title} intro={features.doi.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.license.fa} title={features.license.title} intro={features.license.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.dataQuality.fa} title={features.dataQuality.title} intro={features.dataQuality.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.embargo.fa} title={features.embargo.title} intro={features.embargo.intro} />
-                </Col>
-              </Row>
-              <Row className="feature">
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.peer.fa} title={features.peer.title} intro={features.peer.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.oai.fa} title={features.oai.title} intro={features.oai.intro} />
-                </Col>
-                <Col md={4} sm={12}>
-                  <HomeFeature fa={features.api.fa} title={features.api.title} intro={features.api.intro} />
-                </Col>
-              </Row>
-            </Col>
-            <Col md={2} sm={12}>&nbsp;</Col>
-          </Row>
-          <Row className="card-partners">
-            <Col md={12} sm={12}>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="home-title">
-                    <span>
-                      Partners, Affiliations, APIs
-                    </span>
-                  </div>
-                </Col>
-              </Row>
-              <Row>
-                <Col md={12} sm={12}>
-                  <div className="partner-row" >
-                    { Infos.map((info, index) => PartnersInfo(info, index)) }
-                  </div>
-                </Col>
-              </Row>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-export default RepoHome;
diff --git a/app/packs/src/libHome/RepoHowTo.js b/app/packs/src/libHome/RepoHowTo.js
deleted file mode 100644
index 00c109964..000000000
--- a/app/packs/src/libHome/RepoHowTo.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div style={{ position: 'relative' }}>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howtoeditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`) }><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/howto/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (howto) => {
-  let imageUrl = '';
-  if (typeof (howto) !== 'undefined' && howto
-    && typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-    imageUrl = `/howto/${howto.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      {
-        imageUrl === '' ?
-          <div style={{ textAlign: 'center', width: '100%', height: 'auto', whiteSpace: 'nowrap' }}>
-            <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-            <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-            <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-          </div>
-          :
-          <img
-            src={imageUrl}
-            style={{
-              display: 'block',
-              width: '100%',
-              height: 'auto'
-            }}
-            alt=""
-          />
-      }
-    </div>
-  );
-};
-
-export default class RepoHowTo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howtos: PublicStore.getState().howtos || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.howtos();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howtos) {
-      this.setState(prevState => ({
-        ...prevState, howtos: state.howtos
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initialHowTo()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_howto_editor
-        });
-      });
-  }
-
-  render() {
-    let { howtos } = this.state;
-    const { isEditor } = this.state;
-    howtos = isEditor ? howtos : howtos.filter(d => new Date() > new Date(d.published_at));
-    howtos = orderBy(
-      howtos,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return howtos.length > 0 ? (
-      <Row className="howto_page">
-        <Col lg={12} md={12}>
-          <NewsList howtos={howtos} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) :
-      <Row className="howto_page" style={{ textAlign: 'center' }}>
-        <Col md={12}>
-          <BackSoonPage />
-        </Col>
-      </Row>;
-  }
-}
-
-const NewsColSmall = (param) => {
-  const { howto, isEditor } = param;
-  return (
-    <Col lg={12} md={12} sm={12} className="news_column">
-      <div className="news_card_content">
-        <div className="news_card_s">
-          <Col md={4} sm={12}>{mainImage(howto)}</Col>
-          <Col md={8} sm={12}>
-            <div className="card_info">
-              <div className="info">
-                <h1 style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxHeight: '50px' }}>{howto.title}</h1>
-                <div className="news_content_card_s">
-                  <p />
-                  {howto.firstParagraph}
-                  <p />
-                </div>
-              </div>
-            </div>
-            <div className="read">
-              {renderEditRead(howto, isEditor)}
-            </div>
-          </Col>
-        </div>
-        <div className="news_card_badge_s">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>{howto.creator_name}</span>&nbsp;
-          <i className="fa fa-calendar" aria-hidden="true" />&nbsp;<span>Published on {DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)}</span>
-          <span>, updated on {DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}</span>
-        </div>
-      </div>
-    </Col>
-  );
-};
-
-const NewsList = (param) => {
-  const { howtos } = param;
-  return howtos.length > 0 ? (
-    <Row>
-      <Col md={1} />
-      <Col md={10} sm={12} style={{ display: 'flex', flexDirection: 'column' }}>
-        <Row>
-          {
-            howtos.map(a => (<NewsColSmall isEditor={param.isEditor} key={`news_col_${a.key}`} howto={a} />))
-          }
-        </Row>
-      </Col>
-      <Col md={1} />
-    </Row>
-  ) : <div />;
-};
-
diff --git a/app/packs/src/libHome/RepoHowToDragSource.js b/app/packs/src/libHome/RepoHowToDragSource.js
deleted file mode 100644
index 0873b66a2..000000000
--- a/app/packs/src/libHome/RepoHowToDragSource.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const listSource = {
-  beginDrag(props) { return { sid: props.sid, stelle: props.stelle }; },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-const RepoHowToDragSource = ({ connectDragSource }) => connectDragSource(<span className="fa fa-lg fa-arrows text-info drag-source" />);
-
-export default DragSource(DragDropItemTypes.HOWTO, listSource, collectSource)(RepoHowToDragSource);
-
-RepoHowToDragSource.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoHowToDropTarget.js b/app/packs/src/libHome/RepoHowToDropTarget.js
deleted file mode 100644
index 09efb95a6..000000000
--- a/app/packs/src/libHome/RepoHowToDropTarget.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import DragDropItemTypes from '../components/DragDropItemTypes';
-
-const stelleTarget = {
-  drop(targetProps, monitor) {
-    const targetTag = { sid: targetProps.sid, stelle: targetProps.stelle };
-    const sourceProps = monitor.getItem();
-    const sourceTag = { sid: sourceProps.sid, stelle: sourceProps.stelle };
-    if (targetTag.sid !== sourceTag.sid) {
-      targetProps.onDrop({ sourceTag, targetTag });
-    }
-  }
-};
-
-const stelleDropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-});
-
-
-class RepoHowToDropTarget extends Component {
-  render() {
-    const { connectDropTarget, isOver, canDrop } = this.props;
-    const className = `editor-field-drop-target${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}`;
-    return connectDropTarget(<div className={className}><div className="indicator" /></div>);
-  }
-}
-
-export default DropTarget(
-  DragDropItemTypes.HOWTO,
-  stelleTarget, stelleDropCollect
-)(RepoHowToDropTarget);
-
-RepoHowToDropTarget.propTypes = {
-  connectDropTarget: PropTypes.func.isRequired,
-  isOver: PropTypes.bool.isRequired,
-  canDrop: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoHowToEditor.js b/app/packs/src/libHome/RepoHowToEditor.js
deleted file mode 100644
index 7feca87b5..000000000
--- a/app/packs/src/libHome/RepoHowToEditor.js
+++ /dev/null
@@ -1,435 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoHowToEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto && PublicStore.getState().howto.key ? { ...PublicStore.getState().howto } : { title: '', content: {}, article: [] },
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { howto } = this.state;
-    howto.article.push(stelle({ art: e }));
-    this.setState(howto);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { howto } = this.state;
-    const { article } = howto;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    howto.article = article;
-    this.setState(howto);
-  }
-
-  onStelleRemove(e) {
-    const { howto } = this.state;
-    howto.article.splice(e, 1);
-    this.setState(howto);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { howto } = this.state;
-    switch (art) {
-      case 'quill':
-        howto.article[sid].quill = e;
-        this.setState(howto);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.howto && state.howto.key) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, howto: { title: '', content: {}, article: [] }
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { howto } = this.state;
-    switch (type) {
-      case 'title':
-        howto.title = event.currentTarget.value;
-        break;
-      case 'content':
-        howto.content = event;
-        break;
-      case 'published_at':
-        howto.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        howto.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ howto });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { howto } = this.state;
-    let m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      howto.published_at = DateFormatDMYTime(howto.published_at);
-    }
-    m = moment(howto.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof howto.title === 'undefined') || !howto.title || howto.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (howto.published_at && howto.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      howto.firstParagraph = extractIntro(howto.article);
-      ArticleFetcher.createOrUpdateHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              howto: { title: '', content: {}, article: [] },
-              message: { type: 'success', content: 'Send to How-To successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { howto } = this.state;
-      ArticleFetcher.deleteHowTo(howto)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ howto: { title: '', content: {}, article: [] }, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { howto } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'howto')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          howto.article[sid].pfad = result.pfad_image;
-          this.setState(howto);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { howto } = this.state;
-    if (typeof (howto.key) === 'undefined' || !howto.key || howto.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>How-To Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            {
-              imageUrl === '' ?
-                <div style={{ textAlign: 'center' }}>
-                  <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-                  <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-                  <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-                </div>
-              :
-                <img
-                  src={imageUrl}
-                  style={{
-                    display: 'block',
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                  }}
-                  alt=""
-                />
-            }
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { howto } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'howto')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            howto.cover_image = result.cover_image;
-            this.setState({ howto, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      howto,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = howto.published_at == null ? '' : DateFormatDMYTime(howto.published_at);
-    const tUpdated = howto.updated_at == null ? '' : DateFormatDMYTime(howto.updated_at);
-    const stelles = howto.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="howto"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={howto}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>How-To Editor</b></h2>
-              <p>
-                Give Chemotion readers some advice
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {howto.created_at ? <div className="required">This howto was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={howto.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoHowToReader.js b/app/packs/src/libHome/RepoHowToReader.js
deleted file mode 100644
index 4728c4c69..000000000
--- a/app/packs/src/libHome/RepoHowToReader.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoHowToReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      howto: PublicStore.getState().howto || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.howto) {
-      this.setState(prevState => ({
-        ...prevState, howto: state.howto
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '';
-    const { howto } = this.state;
-    if (typeof (howto) !== 'undefined' && howto &&
-      typeof (howto.cover_image) !== 'undefined' && howto.cover_image) {
-      imageUrl = `/howto/${howto.cover_image}`;
-    } else {
-      return (
-        <div style={{ textAlign: 'center', height: 'auto' }}>
-          <i className="fa fa-quote-left fa-2x" aria-hidden="true" />
-          <span style={{ fontSize: '3em', fontWeight: 'bold' }}>&nbsp;HOW TO&nbsp;</span>
-          <i className="fa fa-quote-right fa-2x" aria-hidden="true" style={{ position: 'absolute' }} />
-        </div>
-      );
-    }
-
-    return (
-      <span>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { howto } = this.state;
-    return (
-      <Row className="howto_page">
-        <Col md={2} />
-        <Col md={8} sm={12}>
-          <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-            <Panel.Heading>
-              <Row>
-                <Col md={6} sm={12}>
-                  <div style={{ fontSize: '3rem', fontWeight: 'bold', wordBreak: 'break-word' }}>{howto.title}</div>
-                  <div className="news_author">
-                    <i className="fa fa-user-circle" aria-hidden="true" />
-                    &nbsp;{howto.creator_name}
-                    <p />
-                    <i className="fa fa-calendar" aria-hidden="true" />&nbsp;Published on&nbsp;{DateFormatYMDLong(howto.published_at ? howto.published_at : howto.created_at)},&nbsp;
-                    updated on&nbsp;{DateFormatYMDLong(howto.updated_at ? howto.updated_at : howto.published_at)}
-                  </div>
-                </Col>
-                <Col md={6} sm={12}>
-                  {this.coverImage()}
-                </Col>
-                <Col md={12} sm={12}>
-                  <div style={{ position: 'relative', marginTop: '10px' }}>
-                    <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate('/home/howto')}>Back to How-To</a>
-                  </div>
-                </Col>
-              </Row>
-              <div className="heading_separator" style={{ borderWidth: '0.5px' }} />
-            </Panel.Heading>
-            <Panel.Body>
-              <Col lg={1} md={2}><div /></Col>
-              <Col lg={10} md={8} sm={12}>
-                <div className="news_quillviewer">
-                  {
-                    howto.article ?
-                    howto.article.map((s) => {
-                      if (s.art === 'txt') {
-                        return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                      }
-                      if (s.art === 'img') {
-                        return (
-                          <div key={uuid.v4()}>
-                            <img src={`/howto/${s.pfad}`} alt="" />
-                            <br />
-                          </div>
-                        );
-                      }
-                    }) : <div />
-                  }
-                </div>
-              </Col>
-              <Col lg={1} md={2}><div /></Col>
-            </Panel.Body>
-          </Panel>
-        </Col>
-        <Col md={2} />
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoMolViewerBtn.js b/app/packs/src/libHome/RepoMolViewerBtn.js
deleted file mode 100644
index e4654361b..000000000
--- a/app/packs/src/libHome/RepoMolViewerBtn.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import uuid from 'uuid';
-import RepoMolViewerModal from './RepoMolViewerModal';
-
-const viewButtonTip = _short => <Tooltip id={uuid.v4()}>{_short}</Tooltip>;
-
-export default class RepoMolViewerBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { show: false };
-    this.handleModalOpen = this.handleModalOpen.bind(this);
-  }
-
-  handleModalOpen(e) {
-    if (e) { e.stopPropagation(); }
-    const { show } = this.state;
-    this.setState({ show: !show });
-  }
-
-  render() {
-    const { fileContent, isPublic } = this.props;
-    const { show } = this.state;
-
-    const tooltip = viewButtonTip('Click to see structure in Viewer');
-
-    return (
-      <>
-        <OverlayTrigger placement="top" overlay={tooltip}>
-          <Button className="button-right" bsSize="xsmall" bsStyle="info" onClick={e => this.handleModalOpen(e, true)}>
-            <i className="fa fa-cube" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
-        {
-          show ?
-            <RepoMolViewerModal
-              fileContent={fileContent}
-              handleModalOpen={e => this.handleModalOpen(e, false)}
-              show={show}
-              isPublic={isPublic}
-            /> : null
-        }
-      </>
-    );
-  }
-}
-
-RepoMolViewerBtn.propTypes = {
-  fileContent: PropTypes.string.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerListBtn.js b/app/packs/src/libHome/RepoMolViewerListBtn.js
deleted file mode 100644
index bc36b689a..000000000
--- a/app/packs/src/libHome/RepoMolViewerListBtn.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { filter } from 'lodash';
-import RepoMolViewerListModal from './RepoMolViewerListModal';
-import ArrayUtils from '../components/utils/ArrayUtils';
-
-export default class RepoMolViewerListBtn extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { openModal: false };
-    this.handleModalOpen = this.handleModalOpen.bind(this);
-    this.renderBtn = this.renderBtn.bind(this);
-  }
-
-  handleModalOpen(e) {
-    if (e) { e.stopPropagation(); }
-    const { openModal } = this.state;
-    this.setState({ openModal: !openModal });
-  }
-
-  renderBtn(disabled) {
-    const btnStyle = disabled ? 'default' : 'info';
-    const tipDesc = disabled ? ' (Nothing to view)' : '';
-    const onClick = disabled ? e => e.stopPropagation() : e => this.handleModalOpen(e);
-    const className = this.props.isPublic ? '' : '';
-    return (
-      <OverlayTrigger
-        placement="top"
-        delayShow={500}
-        overlay={<Tooltip id="_fast_create_btn">Click to view structure file in Viewer{tipDesc}</Tooltip>}
-      >
-        <Button bsSize="xs" bsStyle={btnStyle} className={className} onClick={onClick}>
-          <i className="fa fa-cube" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  render() {
-    const { el, container, isPublic } = this.props;
-    const { openModal } = this.state;
-    if (!el) return null;
-
-    if (container?.children?.length < 1) { return this.renderBtn(true); }
-
-    let datasetContainer = ArrayUtils.sortArrByIndex(filter(container.children, o => o.container_type === 'dataset' && o.attachments.length > 0));
-    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
-
-    datasetContainer = datasetContainer?.map((dc) => {
-      const ds = Object.assign({}, dc);
-      const { attachments } = ds;
-      ds.attachments = attachments?.filter(attachment => ['cif', 'mmcif', 'mol', 'sdf', 'pdb', 'mol2'].includes(attachment?.filename?.match(/\.([^.]+)$/) && attachment?.filename?.match(/\.([^.]+)$/)[1]?.toLowerCase()));
-      if (ds.attachments.length > 0) return ds;
-      return null;
-    });
-
-    datasetContainer = datasetContainer.filter(dc => dc !== null);
-    if (datasetContainer?.length < 1) { return this.renderBtn(true); }
-
-    return (
-      <>
-        {this.renderBtn(false)}
-        <RepoMolViewerListModal
-          handleModalOpen={this.handleModalOpen}
-          show={openModal}
-          title={el.short_label}
-          datasetContainer={datasetContainer}
-          isPublic={isPublic}
-        />
-      </>
-    );
-  }
-}
-
-RepoMolViewerListBtn.propTypes = {
-  el: PropTypes.object.isRequired,
-  container: PropTypes.object.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerListModal.js b/app/packs/src/libHome/RepoMolViewerListModal.js
deleted file mode 100644
index 62680753b..000000000
--- a/app/packs/src/libHome/RepoMolViewerListModal.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Col, Modal, PanelGroup, Panel, Nav, NavItem } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
-
-export default class RepoMolViewerListModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: null,
-      activeKey: 1
-    };
-
-    this.list = this.list.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleFile = this.handleFile.bind(this);
-  }
-
-  handleSelect(e, activeKey) {
-    e.stopPropagation();
-    this.setState({ activeKey });
-  }
-
-  handleFile(e, attachment, ds) {
-    e.stopPropagation();
-    this.setState({ selected: { ...attachment, dsName: ds.name } });
-  }
-
-  list() {
-    const { datasetContainer } = this.props;
-    const { selected, activeKey } = this.state;
-    const defaultActiveKey = datasetContainer[0].id;
-    return (
-      <PanelGroup
-        accordion
-        id="accordion-controlled-example"
-        defaultActiveKey={defaultActiveKey}
-        style={{ width: '100%', height: 'calc(100vh - 200px)', overflow: 'auto' }}
-      >
-        {
-          datasetContainer.map((ds) => {
-            const { attachments } = ds;
-            return (
-              <Panel key={ds.id} eventKey={ds.id} onClick={e => this.handleSelect(e, ds.id)}>
-                <Panel.Heading>
-                  <Panel.Title toggle>{`Dataset: ${ds.name}`}</Panel.Title>
-                </Panel.Heading>
-                <Panel.Body style={{ padding: '0px' }} collapsible>
-                  <Nav bsStyle="pills" stacked activeKey={activeKey}>
-                    {
-                      attachments.map(attachment => (
-                        <NavItem key={attachment.id} eventKey={attachment.id} active={attachment.id === selected?.id} onClick={e => this.handleFile(e, attachment, ds)}>
-                          <i className="fa fa-file" aria-hidden="true" />&nbsp;{attachment.filename}
-                        </NavItem>
-                      ))
-                    }
-                  </Nav>
-                </Panel.Body>
-              </Panel>
-            );
-          })
-        }
-      </PanelGroup>
-    );
-  }
-
-  handleModal(e) {
-    if (e) e.stopPropagation();
-    const { handleModalOpen } = this.props;
-    handleModalOpen();
-  }
-
-  render() {
-    const {
-      show, isPublic, datasetContainer
-    } = this.props;
-    let { selected } = this.state;
-    if (!selected) {
-      const ds = datasetContainer[0];
-      const file = (ds?.attachments?.length > 0 && ds?.attachments[0]) || {};
-      selected = { ...file, dsName: ds.name };
-    }
-
-    const filePath = isPublic ?
-      `${window.location.origin}/api/v1/public/download/attachment?id=${selected?.id}`
-      : `${window.location.origin}/api/v1/attachments/${selected?.id}`;
-
-    if (show) {
-      return (
-        <Modal backdrop="static" animation dialogClassName="file-viewer-modal" show={show} onHide={e => this.handleModal(e)}>
-          <Modal.Header onClick={e => e.stopPropagation()} closeButton>
-            <Modal.Title>Dataset: {selected.dsName} / File: {selected?.filename}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body onClick={e => e.stopPropagation()}>
-            <Col md={2} sm={2} lg={2}>
-              {this.list()}
-            </Col>
-            <Col md={10} sm={10} lg={10}>
-              <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
-                <ReactNglViewer fileName={selected?.filename} filePath={filePath} />
-              </div>
-            </Col>
-          </Modal.Body>
-        </Modal>
-      );
-    }
-    return <span />;
-  }
-}
-
-RepoMolViewerListModal.propTypes = {
-  datasetContainer: PropTypes.array.isRequired,
-  isPublic: PropTypes.bool.isRequired,
-  show: PropTypes.bool.isRequired,
-  handleModalOpen: PropTypes.func.isRequired,
-};
diff --git a/app/packs/src/libHome/RepoMolViewerModal.js b/app/packs/src/libHome/RepoMolViewerModal.js
deleted file mode 100644
index 165c3d2eb..000000000
--- a/app/packs/src/libHome/RepoMolViewerModal.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
-import { ReactNglViewer } from 'react-nglviewer';
-
-const RepoMolViewerModal = (props) => {
-  const {
-    fileContent, show, title, handleModalOpen
-  } = props;
-  const filePath = new Blob([fileContent], { type: 'text/plain' });
-  if (show) {
-    return (
-      <Modal animation dialogClassName="structure-viewer-modal" show={show} onHide={() => handleModalOpen(false)}>
-        <Modal.Header closeButton>
-          <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div style={{ width: '100%', height: 'calc(100vh - 260px)' }}>
-            <ReactNglViewer fileName={`${title}.mol`} filePath={filePath} />
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-  return <span />;
-};
-
-RepoMolViewerModal.propTypes = {
-  fileContent: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-  handleModalOpen: PropTypes.func.isRequired,
-  title: PropTypes.string,
-};
-
-RepoMolViewerModal.defaultProps = { title: 'Structure Viewer' };
-
-export default RepoMolViewerModal;
diff --git a/app/packs/src/libHome/RepoMoleculeArchive.js b/app/packs/src/libHome/RepoMoleculeArchive.js
deleted file mode 100644
index 4feba19f4..000000000
--- a/app/packs/src/libHome/RepoMoleculeArchive.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import uuid from 'uuid';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import SVG from 'react-inlinesvg';
-import PublicActions from '../components/actions/PublicActions';
-import Formula from '../components/common/Formula';
-import PubchemLabels from '../components/PubchemLabels';
-import RepoNavListTypes from './RepoNavListTypes';
-
-const pubchemTag = (molecule) => {
-  if (molecule && molecule.tag &&
-    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
-    return {
-      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
-    };
-  }
-  return false;
-};
-
-const infoTag = (molecule) => {
-  const pubData = (molecule && molecule.pub_id) || '';
-  return (
-    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
-        </div>
-      </OverlayTrigger>
-      <div className="home_wrapper_item">
-        <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
-      </div>
-    </Row>
-  );
-};
-
-const RepoMoleculeArchive = (props) => {
-  const {
-    molecule, currentElement, isPubElement, advFlag, advType, advValue
-  } = props;
-  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
-  const svgPathSample = molecule.sample_svg_file
-    ? `/images/samples/${molecule.sample_svg_file}`
-    : `/images/molecules/${molecule.molecule_svg_file}`;
-  const pubchemInfo = pubchemTag(molecule);
-  return (
-    <Col xs={12} sm={12} md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue, RepoNavListTypes.MOLECULE_ARCHIVE)}>
-      <div className={`home_archive ${listClass}`}>
-        <div className="svg_border">
-          <SVG src={svgPathSample} className="archive_svg_molecule" key={svgPathSample} />
-        </div>
-        <div className="content">
-          <div className="info">
-            <div className="border">
-              <div className="dl">
-                Formula
-              </div>
-              <div className="dr"><Formula formula={molecule.sum_formular} />
-                {' '}
-                <span className="repo-pub-list-icons">
-                  {pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }
-                </span>
-              </div>
-            </div>
-            <div className="border">
-              <div className="dl">Provided by</div>
-              <div className="dr">{molecule.xvial_archive[0]?.provided_by}</div>
-            </div>
-            <div className="border">
-              <div className="dl">Group</div>
-              <div className="dr">{molecule.xvial_archive[0]?.group || 'Stefan Bräse Group'}</div>
-            </div>
-          </div>
-          <div>
-            {infoTag(molecule)}
-          </div>
-        </div>
-      </div>
-    </Col>
-  );
-};
-
-RepoMoleculeArchive.propTypes = {
-  molecule: PropTypes.object.isRequired,
-  currentElement: PropTypes.object,
-  isPubElement: PropTypes.bool,
-};
-
-RepoMoleculeArchive.defaultProps = {
-  isPubElement: false,
-  currentElement: null
-};
-
-export default RepoMoleculeArchive;
diff --git a/app/packs/src/libHome/RepoMoleculeList.js b/app/packs/src/libHome/RepoMoleculeList.js
deleted file mode 100644
index 2d83219f9..000000000
--- a/app/packs/src/libHome/RepoMoleculeList.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import uuid from 'uuid';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-import Formula from '../components/common/Formula';
-import PubchemLabels from '../components/PubchemLabels';
-import { xvialTag, svgTag } from './RepoPubCommon';
-
-const pubchemTag = (molecule) => {
-  if (molecule && molecule.tag &&
-    molecule.tag.taggable_data && molecule.tag.taggable_data.pubchem_cid) {
-    return {
-      pubchem_tag: { pubchem_cid: molecule.tag.taggable_data.pubchem_cid }
-    };
-  }
-  return false;
-};
-
-const infoTag = (molecule) => {
-  const pubData = (molecule && molecule.pub_id) || '';
-  return (
-    <Row key={`list-reaction-info-${molecule.id}`} className="home_wrapper">
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>ID</div><div className="item_xvial">{`CRS-${pubData}`}</div>
-        </div>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>Embargo</div><div className="item_xvial">{molecule.embargo}</div>
-        </div>
-      </OverlayTrigger>
-      <div className="home_wrapper_item">
-        <div>Author</div><div className="item_xvial">{molecule.author_name}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{molecule.published_at}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Analyses</div><div className="item_xvial">{molecule.ana_cnt || 0}</div>
-      </div>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>X-Vial</div><div className="item_xvial">{xvialTag(molecule)}</div>
-        </div>
-      </OverlayTrigger>
-    </Row>
-  );
-};
-
-const RepoMoleculeList = (props) => {
-  const {
-    molecule, currentElement, isPubElement, advFlag, advType, advValue
-  } = props;
-  const listClass = (currentElement && currentElement.molecule && currentElement.molecule.id === molecule.id) ? 'list_focus_on' : 'list_focus_off';
-  const svgPathSample = molecule.sample_svg_file
-    ? `/images/samples/${molecule.sample_svg_file}`
-    : `/images/molecules/${molecule.molecule_svg_file}`;
-  const pubchemInfo = pubchemTag(molecule);
-  return (
-    <Col md={isPubElement === true ? 12 : 6} key={`list-molecule-${molecule.id}`} onClick={() => PublicActions.displayMolecule(molecule.id, '', advFlag, advType, advValue)}>
-      <div className={`home_reaction ${listClass}`}>
-        <Row key={`list-reaction-svg-${molecule.id}`}>
-          <Col md={2}>
-            {svgTag(svgPathSample, 'molecule', true)}
-          </Col>
-          <Col md={10}>
-            <Row><Formula formula={molecule.sum_formular} /></Row>
-            <Row>
-              {molecule.iupac_name}
-              <span className="repo-pub-list-icons">{pubchemInfo ? <PubchemLabels element={pubchemTag(molecule)} /> : null }</span>
-            </Row>
-          </Col>
-        </Row>
-        {infoTag(molecule)}
-      </div>
-    </Col>
-  );
-};
-
-RepoMoleculeList.propTypes = {
-  molecule: PropTypes.object.isRequired,
-  currentElement: PropTypes.object,
-  isPubElement: PropTypes.bool,
-};
-
-RepoMoleculeList.defaultProps = {
-  isPubElement: false,
-  currentElement: null
-};
-
-export default RepoMoleculeList;
diff --git a/app/packs/src/libHome/RepoNavListTypes.js b/app/packs/src/libHome/RepoNavListTypes.js
deleted file mode 100644
index 9e766f5e7..000000000
--- a/app/packs/src/libHome/RepoNavListTypes.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default Object.freeze({
-  MOLECULE_ARCHIVE: 'moleculeArchive',
-  REACTION: 'reaction',
-  SAMPLE: 'sample',
-  SCHEME: 'scheme'
-});
diff --git a/app/packs/src/libHome/RepoNewsEditor.js b/app/packs/src/libHome/RepoNewsEditor.js
deleted file mode 100644
index 99218a3f8..000000000
--- a/app/packs/src/libHome/RepoNewsEditor.js
+++ /dev/null
@@ -1,427 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Jumbotron, Row, Col, Form, FormGroup, FormControl, ControlLabel, Button, InputGroup } from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import moment from 'moment';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import NewsPreviewModal from '../components/common/NewsPreviewModal';
-import PublicStore from '../components/stores/PublicStore';
-import { ConfirmModal } from '../components/common/ConfirmModal';
-import Attachment from '../components/models/Attachment';
-import { EditorTips, DateFormatDMYTime, NewsroomTemplate } from '../libHome/RepoCommon';
-import { contentToText } from '../components/utils/quillFormat';
-import { EditorBtn, EditorBaseBtn } from './RepoHowTo/EditorBtn';
-import EditorStelle from './RepoHowTo/EditorStelle';
-
-const extractIntro = (article) => {
-  const result = article.filter(a => a.art === 'txt');
-  if (result.length < 1) {
-    return '';
-  }
-  return (contentToText(result[0].quill) || '').slice(0, 1500);
-};
-
-const confirmText = (
-  <ControlLabel>Are you sure that you want to delete this ?</ControlLabel>
-);
-
-const stelle = props => ({ art: props.art || '', quill: props.quill || null, pfad: props.pfad || '' });
-
-export default class RepoNewsEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news && PublicStore.getState().news.key ? { ...PublicStore.getState().news } : NewsroomTemplate,
-      message: { type: '', content: '' },
-      showPreview: false,
-      showDeleteModal: false
-    };
-
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onClickPreview = this.onClickPreview.bind(this);
-    this.onClickCurrentTime = this.onClickCurrentTime.bind(this);
-    this.onClickClose = this.onClickClose.bind(this);
-    this.onClickSave = this.onClickSave.bind(this);
-    this.onClickDelete = this.onClickDelete.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onShowDeleteModal = this.onShowDeleteModal.bind(this);
-    this.onEditorBtnClick = this.onEditorBtnClick.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onEditorBtnClick(e) {
-    const { news } = this.state;
-    news.article.push(stelle({ art: e }));
-    this.setState(news);
-  }
-
-  onEditorBaseBtnClick(e) {
-    switch (e) {
-      case 'save':
-        this.onClickSave();
-        break;
-      case 'delete':
-        this.onShowDeleteModal();
-        break;
-      default:
-    }
-  }
-
-  onStelleDrop(e) {
-    const { news } = this.state;
-    const { article } = news;
-
-    article[e.sourceTag.sid] = e.targetTag.stelle;
-    article[e.targetTag.sid] = e.sourceTag.stelle;
-
-    news.article = article;
-    this.setState(news);
-  }
-
-  onStelleRemove(e) {
-    const { news } = this.state;
-    news.article.splice(e, 1);
-    this.setState(news);
-  }
-
-  onStelleInputChange(art, e, sid) {
-    const { news } = this.state;
-    switch (art) {
-      case 'quill':
-        news.article[sid].quill = e;
-        this.setState(news);
-        break;
-      case 'pfad':
-        this.handleImage(e, sid);
-        break;
-      default:
-        break;
-    }
-  }
-
-  onChange(state) {
-    if (state.news && state.news.key) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    } else {
-      this.setState(prevState => ({
-        ...prevState, news: NewsroomTemplate
-      }));
-    }
-  }
-
-  onInputChange(type, event) {
-    const { news } = this.state;
-    switch (type) {
-      case 'title':
-        news.title = event.currentTarget.value;
-        break;
-      case 'content':
-        news.content = event;
-        break;
-      case 'published_at':
-        news.published_at = event.currentTarget.value.trim();
-        break;
-      case 'updated_at':
-        news.updated_at = event.currentTarget.value.trim();
-        break;
-      default:
-        break;
-    }
-    this.setState({ news });
-  }
-
-  onClickCurrentTime(type) {
-    const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
-    const wrappedEvent = { currentTarget: { value: currentTime } };
-    this.onInputChange(type, wrappedEvent);
-  }
-
-  onClickPreview() {
-    this.setState({ showPreview: true });
-  }
-
-  onClickClose() {
-    this.setState({ showPreview: false });
-  }
-
-  onClickSave() {
-    const { news } = this.state;
-    let m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-    if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      news.published_at = DateFormatDMYTime(news.published_at);
-    }
-    m = moment(news.published_at, 'DD/MM/YYYY HH:mm:ss');
-
-    if ((typeof news.title === 'undefined') || !news.title || news.title.trim() === '') {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Title can not be empty!' } });
-    } else if (news.published_at && news.published_at !== '' && !m.isValid()) {
-      this.setState({ message: { type: 'danger', content: 'Ooops! Published On is invalid !' } });
-    } else {
-      news.firstParagraph = extractIntro(news.article);
-      ArticleFetcher.createOrUpdate(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({
-              news: NewsroomTemplate,
-              message: { type: 'success', content: 'Send to Newsroom successfully!' }
-            });
-          }
-        });
-    }
-  }
-
-  onShowDeleteModal() {
-    this.setState({ showDeleteModal: true });
-  }
-
-  onClickDelete(isDelete) {
-    if (isDelete) {
-      const { news } = this.state;
-      ArticleFetcher.delete(news)
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            this.setState({ news: NewsroomTemplate, message: { type: 'success', content: 'Deleted successfully!' } });
-          }
-        });
-    }
-    this.setState({ showDeleteModal: false });
-  }
-
-  handleImage(files, sid) {
-    const { news } = this.state;
-    const image = Attachment.fromFile(files[0]);
-    ArticleFetcher.updateEditorImage(image, 'newsroom')
-      .then((result) => {
-        if (result.error) {
-          this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-        } else {
-          news.article[sid].pfad = result.pfad_image;
-          this.setState(news);
-        }
-      });
-  }
-
-  handleDismiss() {
-    this.setState({ message: { type: '', content: '' } });
-  }
-
-  deleteNewButton() {
-    const { news } = this.state;
-    if (typeof (news.key) === 'undefined' || !news.key || news.key === 'new') {
-      return (
-        <span />
-      );
-    }
-    return (
-      <Button bsStyle="danger" onClick={() => this.onShowDeleteModal()} className="button-right">
-        Delete
-      </Button>
-    );
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-
-    return (
-      <div>
-        <h4><b>News Cover</b></h4>
-        <h5>Click on the image to change the cover</h5>
-        <span style={{ width: '400px', height: '268px' }}>
-          <Dropzone
-            onDrop={files => this.handleFileDrop(files)}
-            style={{ height: '100%', width: '100%', border: '3px dashed lightgray' }}
-          >
-            <img
-              src={imageUrl}
-              style={{
-                display: 'block',
-                maxHeight: '100%',
-                maxWidth: '100%',
-              }}
-              alt=""
-            />
-          </Dropzone>
-        </span>
-      </div>
-    );
-  }
-
-  handleFileDrop(files) {
-    const { news } = this.state;
-    if (files && files.length > 0) {
-      const image = Attachment.fromFile(files[0]);
-      ArticleFetcher.updateEditorImage(image, 'newsroom')
-        .then((result) => {
-          if (result.error) {
-            this.setState({ message: { type: 'danger', content: `Ooops! You got an error! ${result.error}` } });
-          } else {
-            news.cover_image = result.cover_image;
-            this.setState({ news, message: { type: 'success', content: 'Cover image added successfully!' } });
-          }
-        });
-    }
-  }
-
-  render() {
-    const {
-      news,
-      message,
-      showPreview,
-      showDeleteModal
-    } = this.state;
-    const renderAlert = (m) => {
-      return (
-        m.type !== '' ?
-          <Alert bsStyle={m.type} onDismiss={this.handleDismiss}>
-            <p>
-              {m.content}
-            </p>
-          </Alert>
-          :
-          <div />
-      );
-    };
-
-    const tPublished = news.published_at == null ? '' : DateFormatDMYTime(news.published_at);
-    const tUpdated = news.updated_at == null ? '' : DateFormatDMYTime(news.updated_at);
-
-    const stelles = news.article.map((s, i) => {
-      return (
-        <EditorStelle
-          key={i}
-          sid={i}
-          stelle={s}
-          onDrop={e => this.onStelleDrop(e)}
-          onRemove={e => this.onStelleRemove(e)}
-          onChange={(art, e, sid) => this.onStelleInputChange(art, e, sid)}
-          editor_type="newsroom"
-        />
-      );
-    });
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#eeeeee' }}>
-        <NewsPreviewModal
-          showModal={showPreview}
-          article={news}
-          onClick={this.onClickClose}
-        />
-        <ConfirmModal
-          showModal={showDeleteModal}
-          title="Are you sure ?"
-          content={confirmText}
-          onClick={this.onClickDelete}
-        />
-        <Jumbotron style={{
-          minHeight: 'calc(85vh)', width: 'calc(96vw)', padding: '24px 60px', marginBottom: 'unset'
-        }}
-        >
-          <Row>
-            <Col lg={1} />
-            <Col lg={8} md={8}>
-              {renderAlert(message)}
-              <h2><b>Newsroom Editor</b></h2>
-              <p>
-                Chemotion NEWS
-              </p>
-              <br />
-              <Form>
-                <FormGroup controlId="frmNewsTitile">
-                  <ControlLabel>
-                    <div className="newseditor">
-                      <div className="required">*&nbsp;</div>
-                      <div className="article_title">Title</div>
-                      <div className="article_content"><i className="fa fa-exclamation-circle" aria-hidden="true" />&nbsp;100 characters limitation.</div>
-                      {news.created_at ? <div className="required">This news was published on {tPublished}</div> : <div />}
-                    </div>
-                  </ControlLabel>
-                  <FormControl
-                    placeholder="Title"
-                    value={news.title || ''}
-                    onChange={event => this.onInputChange('title', event)}
-                    maxLength={100}
-                  />
-                </FormGroup>
-                <ControlLabel>
-                  <div className="newseditor">
-                    <div className="required">*&nbsp;</div>
-                    <div className="article_title">Content</div>
-                  </div>
-                </ControlLabel>
-                <div className="editor-field">
-                  {stelles}
-                  <EditorBtn onClick={e => this.onEditorBtnClick(e)} />
-                </div>
-                <EditorBaseBtn onClick={e => this.onEditorBaseBtnClick(e)} />
-              </Form>
-            </Col>
-            <Col lg={3} md={4}>
-              <div>
-                {this.coverImage()}
-                <br />
-                <FormGroup>
-                  <ControlLabel><h4><b>Published on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tPublished}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('published_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'published_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                  <ControlLabel><h4><b>Updated on</b></h4></ControlLabel>
-                  <InputGroup>
-                    <FormControl
-                      type="text"
-                      value={tUpdated}
-                      placeholder="DD/MM/YYYY hh:mm:ss"
-                      onChange={event => this.onInputChange('updated_at', event)}
-                    />
-                    <InputGroup.Button>
-                      <Button
-                        active
-                        style={{ padding: '6px' }}
-                        onClick={this.onClickCurrentTime.bind(this, 'updated_at')}
-                      >
-                        <i className="fa fa-clock-o" />
-                      </Button>
-                    </InputGroup.Button>
-                  </InputGroup>
-                </FormGroup>
-                <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;Tips:<br />
-                <EditorTips />
-              </div>
-            </Col>
-          </Row>
-        </Jumbotron>
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoNewsReader.js b/app/packs/src/libHome/RepoNewsReader.js
deleted file mode 100644
index 0e83e02d7..000000000
--- a/app/packs/src/libHome/RepoNewsReader.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col } from 'react-bootstrap';
-import uuid from 'uuid';
-import PublicStore from '../components/stores/PublicStore';
-import QuillViewer from '../components/QuillViewer';
-import { DateFormatYMDLong } from '../libHome/RepoCommon';
-
-export default class RepoNewsReader extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      news: PublicStore.getState().news || { title: '', content: {}, article: [] }
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    PublicStore.listen(this.onChange);
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.news) {
-      this.setState(prevState => ({
-        ...prevState, news: state.news
-      }));
-    }
-  }
-
-  coverImage() {
-    let imageUrl = '/images/chemnews.png';
-    const { news } = this.state;
-    if (typeof (news) !== 'undefined' && news &&
-      typeof (news.cover_image) !== 'undefined' && news.cover_image) {
-      imageUrl = `/newsroom/${news.cover_image}`;
-    }
-    return (
-      <span style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
-        <img
-          src={imageUrl}
-          style={{
-            display: 'block',
-            maxHeight: '100%',
-            maxWidth: '100%',
-          }}
-          alt=""
-        />
-      </span>
-    );
-  }
-
-  render() {
-    const { news } = this.state;
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: '85vh' }}>
-        <Col md={12} >
-          <Col md={2} />
-          <Col md={8} sm={12}>
-            <div className="chemotion_news">
-              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
-              &nbsp;Chemotion&nbsp;News
-            </div>
-          </Col>
-          <Col md={2} />
-        </Col>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <Panel className="newsreader_panel" style={{ border: 'unset' }}>
-                <Panel.Heading>
-                  <Row>
-                    <Col md={6} sm={12}>
-                      <h2 style={{ fontWeight: 'bold' }}>{news.title}</h2>
-                      <div className="news_author">
-                        <i className="fa fa-user-circle" aria-hidden="true" />
-                        &nbsp;{news.creator_name}
-                        &nbsp;&nbsp;&nbsp;<i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(news.published_at ? news.published_at : news.created_at)}
-                      </div>
-                    </Col>
-                    <Col md={6} sm={12}>
-                      {this.coverImage()}
-                    </Col>
-                  </Row>
-                  <br />
-                  <div className="heading_separator" />
-                </Panel.Heading>
-                <Panel.Body>
-                  <Col lg={1} md={2}><div /></Col>
-                  <Col lg={10} md={8} sm={12}>
-                    <div className="news_quillviewer">
-                      {
-                        news.article ?
-                          news.article.map((s) => {
-                            if (s.art === 'txt') {
-                              return <QuillViewer key={uuid.v4()} value={s.quill} />;
-                            }
-                            if (s.art === 'img') {
-                              return (
-                                <div key={uuid.v4()}>
-                                  <img src={`/newsroom/${s.pfad}`} alt="" />
-                                  <br />
-                                </div>
-                              );
-                            }
-                          }) : <div />
-                      }
-                    </div>
-                  </Col>
-                  <Col lg={1} md={2}><div /></Col>
-                </Panel.Body>
-              </Panel>
-            </Col>
-            <Col md={2} />
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoNewsroom.js b/app/packs/src/libHome/RepoNewsroom.js
deleted file mode 100644
index 19e9f6020..000000000
--- a/app/packs/src/libHome/RepoNewsroom.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { Component } from 'react';
-import { Col, Row } from 'react-bootstrap';
-import { orderBy, slice } from 'lodash';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import ArticleFetcher from '../components/fetchers/ArticleFetcher';
-import { BackSoonPage, DateFormatYMDLong } from '../libHome/RepoCommon';
-
-const renderEditRead = (article, isEditor) => {
-  if (isEditor === true) {
-    return (
-      <div className="readedit">
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newseditor/${article.key}`)}><i className="fa fa-pencil" />&nbsp;Edit&nbsp;</a>
-        <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-      </div>
-    );
-  }
-
-  return (
-    <div className="readedit">
-      <a style={{ cursor: 'pointer' }} onClick={() => Aviator.navigate(`/home/newsroom/${article.key}`)}><i className="fa fa-wpexplorer" />&nbsp;Read more</a>
-    </div>
-  );
-};
-
-
-const mainImage = (article) => {
-  let imageUrl = '/images/chemnews.png';
-  if (typeof (article) !== 'undefined' && article
-   && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
-    imageUrl = `/newsroom/${article.cover_image}`;
-  }
-  return (
-    <div style={{ maxWidth: '100%', height: 'auto' }}>
-      <img
-        src={imageUrl}
-        style={{
-          display: 'block',
-          width: '100%',
-          height: 'auto',
-        }}
-        alt=""
-      />
-    </div>
-  );
-};
-
-export default class RepoNewsroom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      articles: PublicStore.getState().articles || [],
-      isEditor: false
-    };
-    this.onChange = this.onChange.bind(this);
-    this.initial = this.initial.bind(this);
-  }
-
-  componentDidMount() {
-    this.initial();
-    PublicStore.listen(this.onChange);
-    PublicActions.articles();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    if (state.articles) {
-      this.setState(prevState => ({
-        ...prevState, articles: state.articles
-      }));
-    }
-    if (state.isEditor) {
-      this.setState(prevState => ({
-        ...prevState, isEditor: state.isEditor
-      }));
-    }
-  }
-
-  initial() {
-    ArticleFetcher.initial()
-      .then((result) => {
-        this.setState({
-          isEditor: result.is_article_editor
-        });
-      });
-  }
-
-  render() {
-    let { articles } = this.state;
-    const { isEditor } = this.state;
-    articles = isEditor ? articles : articles.filter(d => new Date() > new Date(d.published_at));
-    articles = orderBy(
-      articles,
-      (o) => {
-        if (!o.published_at || o.published_at === '') return o.created_at;
-        return o.published_at;
-      },
-      'desc'
-    );
-
-    return articles.length > 0 ? (
-      <Row style={{ maxWidth: '2000px', margin: 'auto', minHeight: 'calc(80vh)' }}>
-        <Col md={12}>
-          <Row>
-            <Col md={2} />
-            <Col md={8} sm={12}>
-              <LatestNews article={articles[0]} isEditor={isEditor} />
-            </Col>
-            <Col md={2} />
-          </Row>
-          <NewsList articles={slice(articles, 1)} isEditor={isEditor} />
-        </Col>
-      </Row>
-    ) : <Row style={{ maxWidth: '2000px', margin: 'auto', textAlign: 'center', height: 'calc(80vh)' }}><Col md={12}><BackSoonPage /></Col></Row>;
-  }
-}
-
-const LatestNews = ({ article, isEditor }) => {
-  return (
-    <div className="news_latest_block">
-      <div className="ribbon ribbon-top-right" style={{ right: '5px' }}><span>Latest</span></div>
-      <Col md={4} sm={12}>{mainImage(article)}</Col>
-      <Col md={8} sm={12}>
-        <Col md={12} sm={12}>
-          <span className="news_title">{article.title}</span>
-          <div className="news_content">
-            <p />
-            {article.firstParagraph}
-            <p />
-          </div>
-          <div>
-            {renderEditRead(article, isEditor)}
-          </div>
-        </Col>
-        <Col md={12} sm={12}>
-          <div className="heading_separator" />
-          <div className="news_author">
-            <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;{article.creator_name}&nbsp;&nbsp;&nbsp;
-            <i className="fa fa-calendar" aria-hidden="true" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}
-          </div>
-        </Col>
-      </Col>
-    </div>
-  );
-};
-
-const NewsList = ({ articles, isEditor }) => {
-  return articles.length > 0 ? (
-    <Row>
-      <Col md={2} />
-      <Col md={8} sm={12}>
-        <Row>
-          <div className="news_time_box">
-            {
-              articles.map(a => (<NewsTBox isEditor={isEditor} key={`news_col_${a.key}`} article={a} />))
-            }
-          </div>
-        </Row>
-      </Col>
-      <Col md={2} />
-    </Row>
-  ) : <div />;
-};
-
-const NewsTBox = ({ article, isEditor }) => {
-  return (
-    <ul>
-      <li>
-        <span />
-        <div className="title">{article.title}</div>
-        <div className="content">{article.firstParagraph}</div>
-
-        <div className="author">
-          <i className="fa fa-user-circle" aria-hidden="true" />&nbsp;<span>&nbsp;{article.creator_name}</span>
-          {renderEditRead(article, isEditor)}
-        </div>
-        <div className="created_at">
-          <span><i className="fa fa-calendar" />&nbsp;{DateFormatYMDLong(article.published_at ? article.published_at : article.created_at)}</span><span />
-        </div>
-      </li>
-    </ul>
-  );
-};
diff --git a/app/packs/src/libHome/RepoPubCommon.js b/app/packs/src/libHome/RepoPubCommon.js
deleted file mode 100644
index b92f9a1e0..000000000
--- a/app/packs/src/libHome/RepoPubCommon.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import SVG from 'react-inlinesvg';
-import { Popover, OverlayTrigger } from 'react-bootstrap';
-
-const xvialTag = (element, hasXvial = null) => {
-  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
-  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
-  if (element.xvial_com === -1 || element.xvial_com === -2) {
-    hasXCom = hasX;
-  } else {
-    hasXCom = (element.xvial_com > 0);
-  }
-  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
-  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
-};
-
-const svgTag = (path, klassName, isPop, popW = '26vw') => {
-  const popHover = (
-    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
-      <img src={path} alt="" style={{ height: '26vh', width: `${popW}` }} />
-    </Popover>
-  );
-  return isPop ? (
-    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} /></div>
-    </OverlayTrigger>
-  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
-};
-
-export { xvialTag, svgTag };
diff --git a/app/packs/src/libHome/RepoPubl.js b/app/packs/src/libHome/RepoPubl.js
deleted file mode 100644
index f88bfa304..000000000
--- a/app/packs/src/libHome/RepoPubl.js
+++ /dev/null
@@ -1,709 +0,0 @@
-import React, { Component } from 'react';
-import {
-  Pagination, Table, Form, Col, Row, InputGroup, ButtonGroup, Button,
-  Glyphicon, Grid, Radio, DropdownButton, MenuItem,
-  FormGroup, FormControl, Navbar, Tooltip, OverlayTrigger,
-  Tabs, Tab
-} from 'react-bootstrap';
-import Select from 'react-select';
-import uuid from 'uuid';
-import UIActions from '../components/actions/UIActions';
-import PublicActions from '../components/actions/PublicActions';
-import PublicStore from '../components/stores/PublicStore';
-import RepoElementDetails from './RepoElementDetails';
-import SuggestionsFetcher from '../components/fetchers/SuggestionsFetcher';
-import PublicFetcher from '../components/fetchers/PublicFetcher';
-import AutoCompleteInput from '../components/search/AutoCompleteInput';
-import StructureEditorModal from '../components/structure_editor/StructureEditorModal';
-import LoadingActions from '../components/actions/LoadingActions';
-import RepoReactionList from './RepoReactionList';
-import RepoMoleculeList from './RepoMoleculeList';
-import RepoMoleculeArchive from './RepoMoleculeArchive';
-import RepoNavListTypes from './RepoNavListTypes';
-
-const renderMoleculeArchive =
-  (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
-    <RepoMoleculeArchive
-      key={molecule.id}
-      molecule={molecule}
-      currentElement={currentElement}
-      isPubElement={isPubElement}
-      advFlag={advFlag}
-      advValue={advValue}
-      advType={advType}
-    />
-  );
-
-const renderMolecule = (molecule, currentElement, isPubElement, advFlag, advType, advValue) => (
-  <RepoMoleculeList
-    molecule={molecule}
-    currentElement={currentElement}
-    isPubElement={isPubElement}
-    advFlag={advFlag}
-    advValue={advValue}
-    advType={advType}
-  />
-);
-
-const renderReaction = (element, currentElement, isPubElement, schemeOnly = false) => (
-  <RepoReactionList
-    element={element}
-    currentElement={currentElement}
-    isPubElement={isPubElement}
-    schemeOnly={schemeOnly}
-  />
-);
-
-const hints = {
-  reaction: {
-    title: 'Reactions',
-    content: 'Reaction entries contain information on the reaction details, the reagents, reactants and products of a reaction and a description of the protocols. Successful reactions are proven by the characterization of the obtained target compounds.'
-  },
-  sample: {
-    title: 'Samples',
-    content: 'Sample entries contain information and properties of the provided sample as well as the characterization of the sample by analytical measurements.'
-  },
-  scheme: {
-    title: 'Scheme-only reactions',
-    content: 'Scheme-only reactions contain the schematic representation of the reaction and its reagents, reactants and products including the most relevant reaction conditions. Scheme-only entries are generated if analytical data are missing.'
-  },
-  moleculeArchive: {
-    title: 'Physical samples',
-    content: 'A physical sample was registered to the Molecule Archive of the Compound Platform and can be requested from there.'
-  }
-};
-
-const overTip = tab => (
-  <Tooltip id="t_tip" className="left_tooltip bs_tooltip">
-    <i className="fa fa-lightbulb-o" aria-hidden="true" />&nbsp;{hints[tab].content}
-  </Tooltip>
-);
-
-const TabTip = props => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={overTip(props.tab)}
-  >
-    <div>{hints[props.tab].title}</div>
-  </OverlayTrigger>
-);
-
-export default class RepoPubl extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // ...PublicStore.getState(),
-      page: 1,
-      perPage: 10,
-      showStructureEditor: false,
-      isSearch: false,
-      defaultSearchValue: null,
-      selectType: 'all',
-      inputDisabled: false,
-      queryMolfile: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      listType: props.listType || RepoNavListTypes.REACTION,
-      advFlag: false,
-      advType: 'Authors',
-      advValue: [],
-      selectUsers: [],
-      key: uuid.v4(),
-      showSearch: false
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.changeSort = this.changeSort.bind(this);
-    this.handleClearSearchSelection = this.handleClearSearchSelection.bind(this);
-    this.handleStructureEditorCancel = this.handleStructureEditorCancel.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-    this.showAdvancedSearch = this.showAdvancedSearch.bind(this);
-    this.closeAdvancedSearch = this.closeAdvancedSearch.bind(this);
-    this.renderAdvancedSearch = this.renderAdvancedSearch.bind(this);
-    this.advSearchClick = this.advSearchClick.bind(this);
-    this.handleSelectAdvType = this.handleSelectAdvType.bind(this);
-    this.loadAdvValuesByName = this.loadAdvValuesByName.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleShowSearch = this.handleShowSearch.bind(this);
-  }
-
-  componentDidMount() {
-    PublicActions.selectPublicCollection.defer();
-    PublicStore.listen(this.onChange);
-    // PublicActions.getReactions.defer();
-    PublicActions.fetchUnitsSystem.defer();
-  }
-
-  componentWillUnmount() {
-    PublicStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleSearchTypeChange(e) {
-    this.setState({ searchType: e.target && e.target.value });
-  }
-
-  handleStructureEditorCancel() {
-    this.setState({ isSearch: false });
-    this.hideStructureEditor();
-  }
-
-  showStructureEditor() {
-    this.setState({ showStructureEditor: true });
-  }
-
-  hideStructureEditor() {
-    this.setState({ showStructureEditor: false });
-  }
-
-  showAdvancedSearch() {
-    this.setState({ advFlag: true });
-  }
-
-  handleSelectAdvType(val) {
-    if (val) { this.setState({ advType: val, advValue: null }); }
-  }
-
-  onPerPageChange(e) {
-    this.setState({ perPage: e.target.value }, () => this.getList());
-  }
-
-  getList(ps = {}) {
-    const {
-      advFlag, advType, advValue,
-      isSearch,
-      selectType, selection,
-      page, perPage, listType
-    } = this.state;
-    let params = {
-      advFlag,
-      advType,
-      advValue,
-      elementType: selectType,
-      page,
-      perPage,
-      selection,
-      listType,
-      ...ps
-    };
-    LoadingActions.start();
-    if (isSearch) {
-      switch (listType) {
-        case RepoNavListTypes.REACTION:
-          PublicActions.getSearchReactions(params);
-          break;
-        case RepoNavListTypes.MOLECULE_ARCHIVE:
-        case RepoNavListTypes.SAMPLE:
-          PublicActions.getSearchMolecules(params);
-          break;
-        case RepoNavListTypes.SCHEME:
-          params = { ...params, collectionId: 'schemeOnly' };
-          PublicActions.getSearchReactions(params);
-          break;
-        default:
-      }
-      return;
-    }
-    switch (listType) {
-      case RepoNavListTypes.REACTION:
-        params = { ...params, schemeOnly: false };
-        PublicActions.getReactions(params);
-        break;
-      case RepoNavListTypes.MOLECULE_ARCHIVE:
-      case RepoNavListTypes.SAMPLE:
-        PublicActions.getMolecules(params);
-        break;
-      case RepoNavListTypes.SCHEME:
-        params = { ...params, schemeOnly: true };
-        PublicActions.getReactions(params);
-        break;
-      default:
-        PublicActions.getReactions(params);
-    }
-    UIActions.clearSearchSelection();
-  }
-
-  handleClearSearchSelection() {
-    this.setState({
-      defaultSearchValue: null,
-      searchType: 'similar',
-      tanimotoThreshold: 0.7,
-      queryMolfile: null,
-      isSearch: false,
-      key: uuid.v4(),
-      page: 1
-    }, () => this.getList());
-  }
-
-  handleElementSelection(event) {
-    this.setState({ selectType: event.toLowerCase() });
-  }
-
-  handleShowSearch() {
-    const { showSearch, advFlag } = this.state;
-    this.setState({ showSearch: !showSearch, advFlag: !advFlag });
-  }
-
-  closeAdvancedSearch() {
-    this.setState({ advType: 'Authors', advValue: null, page: 1 }, () => this.getList());
-  }
-
-
-  loadAdvValuesByName(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return PublicFetcher.fetchAdvancedValues(this.state.advType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-
-  changeSort(e) {
-    this.setState({
-      page: 1,
-      listType: e
-    }, () => this.getList());
-  }
-
-  renderMenuItems() {
-    const elements = [
-      'All', 'Samples', 'Reactions'
-    ];
-
-    const menu = elements.map(element => (
-      <MenuItem key={element} eventKey={element} onSelect={this.handleElementSelection}>
-        {element}
-      </MenuItem>
-    ));
-
-    return menu;
-  }
-
-  handleTanimotoChange(e) {
-    const val = e.target && e.target.value;
-    if (!isNaN(val - val)) {
-      this.setState({ tanimotoThreshold: val });
-    }
-  }
-
-  handleSelectionChange(selection) {
-    this.setState({
-      isSearch: true,
-      selection,
-      page: 1
-    }, () => this.getList());
-  }
-
-  structureSearch(molfile) {
-    const { searchType, tanimotoThreshold } = this.state;
-
-    const tanimoto = (tanimotoThreshold <= 0 || tanimotoThreshold > 1) ? 0.3 : tanimotoThreshold;
-    const selection = {
-      molfile,
-      search_type: searchType,
-      tanimoto_threshold: tanimoto,
-      search_by_method: 'structure',
-      structure_search: true
-    };
-
-    this.setState(
-      {
-        isSearch: true,
-        selection,
-        page: 1,
-        defaultSearchValue: 'structure',
-        queryMolfile: molfile
-      },
-      () => this.getList()
-    );
-  }
-
-  handleStructureEditorSave(molfile) {
-    this.hideStructureEditor();
-    if (molfile) {
-      const molfileLines = molfile.match(/[^\r\n]+/g);
-      if (molfileLines && molfileLines[1].trim()[0] !== 0) {
-        this.structureSearch(molfile);
-      } else {
-        // TODO: clear search?
-      }
-    }
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  onPaginationSelect(eventKey) {
-    const { pages } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      this.setState({ page: eventKey }, () => this.getList());
-    }
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-
-  renderSwitch() {
-    const { listType } = this.state;
-    if (listType === RepoNavListTypes.MOLECULE_ARCHIVE) {
-      return (
-        <Tabs
-          activeKey={listType}
-          onSelect={this.changeSort}
-          id="element-list-type"
-        >
-          <Tab eventKey={RepoNavListTypes.MOLECULE_ARCHIVE} title={<TabTip tab="moleculeArchive" />} />
-        </Tabs>
-      );
-    }
-    return (
-      <Tabs
-        activeKey={listType}
-        onSelect={this.changeSort}
-        id="element-list-type"
-      >
-        <Tab eventKey={RepoNavListTypes.REACTION} title={<TabTip tab={RepoNavListTypes.REACTION} />} />
-        <Tab eventKey={RepoNavListTypes.SAMPLE} title={<TabTip tab={RepoNavListTypes.SAMPLE} />} />
-        <Tab eventKey={RepoNavListTypes.SCHEME} title={<TabTip tab={RepoNavListTypes.SCHEME} />} />
-      </Tabs>
-    );
-  }
-
-  renderSelectValues() {
-    const { advValue } = this.state;
-    return (
-      <Select.Async
-        multi
-        isLoading
-        backspaceRemoves
-        value={advValue}
-        valueKey="value"
-        labelKey="label"
-        loadOptions={this.loadAdvValuesByName}
-        onChange={this.handleSelectAdvValue}
-      />
-    );
-  }
-
-  handleSelectAdvValue(val) {
-    if (val) {
-      this.setState({ advValue: val });
-    }
-  }
-
-  advSearchClick() {
-    this.setState({ page: 1 }, () => this.getList());
-  }
-
-  renderAdvancedSearch() {
-    const { advFlag, advType, advValue } = this.state;
-    if (advFlag === true) {
-      this.listOptions = [
-        { value: 'Authors', label: 'by authors' },
-        { value: 'Ontologies', label: 'by analysis type' },
-        { value: 'Embargo', label: 'by Embargo Bundle#' }
-      ];
-      return (
-        <div className="home-adv-search">
-          <div>
-            <Select
-              simpleValue
-              searchable={false}
-              options={this.listOptions}
-              placeholder="Select search field"
-              clearable={false}
-              valueKey="value"
-              labelKey="label"
-              onChange={this.handleSelectAdvType}
-              defaultValue="Authors"
-              value={advType}
-              className="o-author"
-            />
-          </div>
-          <div>
-            <Select.Async
-              multi
-              isLoading
-              backspaceRemoves
-              value={advValue}
-              valueKey="value"
-              labelKey="label"
-              loadOptions={this.loadAdvValuesByName}
-              onChange={this.handleSelectAdvValue}
-              className="o-name"
-            />
-          </div>
-          <div className="btns-grp">
-            <ButtonGroup>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="advSearch">Advanced Search</Tooltip>}>
-                <Button onClick={this.advSearchClick}>
-                  <i className="fa fa-search" />
-                </Button>
-              </OverlayTrigger>
-              <OverlayTrigger placement="bottom" overlay={<Tooltip id="closeAdvSearch">Reset Advanced Search</Tooltip>}>
-                <Button onClick={this.closeAdvancedSearch}>
-                  <i className="fa fa-times" />
-                </Button>
-              </OverlayTrigger>
-            </ButtonGroup>
-          </div>
-        </div>
-      );
-    }
-    return (<div />);
-  }
-
-  renderSearch() {
-    const { isSearch, defaultSearchValue } = this.state;
-    const customClass = '.btn-unified';
-
-    const stSearchTooltip = <Tooltip id="search_tooltip">Draw Molecule Structure to query</Tooltip>;
-    const clearTooltip = <Tooltip id="search_tooltip">Clear search</Tooltip>;
-
-    const buttonAfter = (
-      <ButtonGroup className="home-search">
-        <OverlayTrigger placement="bottom" delayShow={1000} overlay={stSearchTooltip}>
-          <Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
-            <Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
-          </Button>
-        </OverlayTrigger>
-        <OverlayTrigger placement="right" delayShow={1000} overlay={clearTooltip}>
-          <Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
-            <i className="fa fa-times" />
-          </Button>
-        </OverlayTrigger>
-      </ButtonGroup>
-    );
-
-    const submitAddons = (
-      <Grid>
-        <Row>
-          <Col sm={6} md={4}>
-            <Form inline>
-              <Radio
-                ref={(input) => { this.searchSimilarRadio = input; }}
-                value="similar"
-                checked={this.state.searchType === 'similar'}
-                onChange={e => this.handleSearchTypeChange(e)}
-              >
-                &nbsp; Similarity Search &nbsp;
-              </Radio>
-              &nbsp;&nbsp;
-              <FormControl
-                style={{ width: '40%' }}
-                type="text"
-                value={this.state.tanimotoThreshold}
-                ref={(input) => { this.searchTanimotoInput = input; }}
-                onChange={e => this.handleTanimotoChange(e)}
-              />
-            </Form>
-          </Col>
-          <Col sm={4} md={2}>
-            <Radio
-              ref={(input) => { this.searchSubstructureRadio = input; }}
-              value="sub"
-              checked={this.state.searchType === 'sub'}
-              onChange={e => this.handleSearchTypeChange(e)}
-            >
-              Substructure Search
-            </Radio>
-          </Col>
-        </Row>
-      </Grid>
-    );
-
-    const inputAttributes = {
-      placeholder: 'IUPAC, InChI, SMILES, ...',
-      style: { minWidth: 168, maxWidth: 268 }
-    };
-
-    const suggestionsAttributes = {
-      style: {
-        marginTop: 15,
-        width: 398,
-        maxHeight: 400
-      }
-    };
-
-    const searchTooltip = <Tooltip id="search_tooltip">Select search type</Tooltip>;
-
-    const innerDropdown = (
-      <OverlayTrigger placement="top" delayShow={1000} overlay={searchTooltip}>
-        <DropdownButton
-          style={{ borderRadius: 'unset' }}
-          id="search-inner-dropdown"
-          title={this.state.selectType === 'all' ? 'All' :
-          <span><i className={`icon-${this.state.selectType.toLowerCase().slice(0, -1)}`} aria-hidden="true" /></span>}
-        >
-          {this.renderMenuItems()}
-        </DropdownButton>
-      </OverlayTrigger>
-    );
-
-    return (
-      <div className="chemotion-search">
-        <div className="search-structure-draw">
-          <StructureEditorModal
-            showModal={this.state.showStructureEditor}
-            onSave={this.props.noSubmit ? null : this.handleStructureEditorSave.bind(this)}
-            onCancel={this.handleStructureEditorCancel}
-            molfile={this.state.queryMolfile}
-            submitBtnText="Search"
-            submitAddons={submitAddons}
-          />
-        </div>
-        {
-          this.state.showSearch ?
-          (
-            <span>
-              <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-                <i className="fa fa-caret-left" aria-hidden="true" />&nbsp;<i className="fa fa-search" aria-hidden="true" />
-              </Button>
-              <div className="search-autocomplete">
-                <AutoCompleteInput
-                  key={this.state.key}
-                  inputAttributes={inputAttributes}
-                  inputDisabled={isSearch}
-                  defaultSearchValue={defaultSearchValue}
-                  suggestionsAttributes={suggestionsAttributes}
-                  suggestions={input => SuggestionsFetcher.fetchSuggestionsForCurrentUser(
-                    this.state.selectType.toLowerCase(), input, 'public', false)}
-                  ref={(input) => { this.autoComplete = input; }}
-                  onSelectionChange={selection => this.handleSelectionChange(selection)}
-                  buttonBefore={innerDropdown}
-                  buttonAfter={buttonAfter}
-                />
-              </div>
-            </span>
-          ) :
-          (
-            <Button bsStyle="primary" className="button-caret" onClick={this.handleShowSearch}>
-              <i className="fa fa-search" aria-hidden="true" />&nbsp;<i className="fa fa-caret-right" aria-hidden="true" />
-            </Button>
-          )
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      molecules, listType, reactions, currentElement, showSearch, advFlag, advType, advValue
-    } = this.state;
-    const isPubElement = !!(((currentElement && this.state.currentElement.publication &&
-      this.state.currentElement.publication.published_at) || (
-      this.state.currentElement && this.state.currentElement.published_samples
-      && this.state.currentElement.published_samples.length > 0 &&
-      this.state.currentElement.published_samples[0].published_at
-    )));
-    const listClass = (showSearch && isPubElement) ? 'public-list-adv' : 'public-list';
-    const elementList = () => {
-      switch (listType) {
-        case RepoNavListTypes.MOLECULE_ARCHIVE:
-          return (molecules || []).map(m => renderMoleculeArchive(m, currentElement, isPubElement, advFlag, advType, advValue));
-        case RepoNavListTypes.REACTION:
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-        case RepoNavListTypes.SAMPLE:
-          return (molecules || []).map(m => renderMolecule(m, currentElement, isPubElement, advFlag, advType, advValue));
-        case RepoNavListTypes.SCHEME:
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement, true));
-        default:
-          return (reactions || []).map(r => renderReaction(r, currentElement, isPubElement));
-      }
-    };
-
-    return (
-      <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-        <Col md={isPubElement === true ? 4 : 12}>
-          <Navbar fluid className="navbar-custom" style={{ marginBottom: '0px' }}>
-            <Navbar.Form pullLeft>
-              {this.renderSearch()}
-            </Navbar.Form>
-            <Navbar.Form pullLeft>
-              {this.renderAdvancedSearch()}
-            </Navbar.Form>
-            <Navbar.Form style={{ marginBottom: 'unset' }} pullRight>
-              {this.renderSwitch()}
-            </Navbar.Form>
-          </Navbar>
-
-          <div className={listClass} style={{ backgroundColor: '#efefef' }}>
-            <Table className="sample-entries">
-              <tbody>
-                {elementList()}
-              </tbody>
-            </Table>
-          </div>
-          <div className="list-container-bottom">
-            <Row>
-              <Col sm={8}>{this.pagination()}</Col>
-              <Col sm={4}>{this.perPageInput()}</Col>
-            </Row>
-          </div>
-        </Col>
-        <Col md={isPubElement === true ? 8 : 0}>
-          <div className="public-element">
-            <RepoElementDetails />
-          </div>
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoReactionDetails.js b/app/packs/src/libHome/RepoReactionDetails.js
deleted file mode 100644
index f471669d8..000000000
--- a/app/packs/src/libHome/RepoReactionDetails.js
+++ /dev/null
@@ -1,792 +0,0 @@
-import React, { Component } from 'react';
-import { Panel, Row, Col, Button, Jumbotron } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { head, filter } from 'lodash';
-import { RepoCommentModal } from 'repo-review-ui';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AuthorList,
-  AffiliationList,
-  CalcDuration,
-  ChemotionId,
-  ClosePanel,
-  CommentBtn,
-  ContributorInfo,
-  ClipboardCopyBtn,
-  Doi,
-  ReactionTable,
-  ReactionRinChiKey,
-  ReactionProperties,
-  ReactionTlc,
-  RenderAnalysisHeader,
-  RenderPublishAnalysesPanel,
-  IconToMyDB,
-  AnalysesTypeJoinLabel,
-  SchemeWord,
-  resizableSvg,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import PublicActions from '../components/actions/PublicActions';
-import ReviewActions from '../components/actions/ReviewActions';
-import DateInfo from '../components/chemrepo/DateInfo';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-import PublicAnchor from '../components/chemrepo/PublicAnchor';
-import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
-import UserCommentModal from '../components/chemrepo/UserCommentModal';
-import QuillViewer from '../components/QuillViewer';
-import {
-  Citation,
-  literatureContent,
-  RefByUserInfo,
-} from '../components/LiteratureCommon';
-import RepoReactionSchemeInfo from './RepoReactionSchemeInfo';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import Sample from '../components/models/Sample';
-import RepoSegment from './RepoSegment';
-import { getAuthorLabel } from '../components/chemrepo/publication-utils';
-
-export default class RepoReactionDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showScheme: true,
-      showRinchi: false,
-      showProp: true,
-      showTlc: true,
-      showSA: true,
-      showRA: {},
-      // showReviewModal: false,
-      // btnAction: '',
-      showCommentModal: false,
-      commentField: '',
-      originInfo: '',
-    };
-
-    this.toggleScheme = this.toggleScheme.bind(this);
-    this.toggleRinchi = this.toggleRinchi.bind(this);
-    this.toggleProp = this.toggleProp.bind(this);
-    this.toggleTlc = this.toggleTlc.bind(this);
-    this.toggleSA = this.toggleSA.bind(this);
-    this.toggleRA = this.toggleRA.bind(this);
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  toggleScheme() {
-    const { showScheme } = this.state;
-    this.setState({ showScheme: !showScheme });
-  }
-
-  toggleRinchi() {
-    const { showRinchi } = this.state;
-    this.setState({ showRinchi: !showRinchi });
-  }
-
-  toggleProp() {
-    const { showProp } = this.state;
-    this.setState({ showProp: !showProp });
-  }
-
-  toggleTlc() {
-    const { showTlc } = this.state;
-    this.setState({ showTlc: !showTlc });
-  }
-
-  toggleSA() {
-    const { showSA } = this.state;
-    this.setState({ showSA: !showSA });
-  }
-
-  toggleRA(idx = -1) {
-    const { showRA } = this.state;
-    if (idx in showRA && showRA[idx] === false) {
-      showRA[idx] = true;
-    } else {
-      showRA[idx] = false;
-    }
-    this.setState({ showRA });
-  }
-
-  handleToggle(type) {
-    switch (type) {
-      case 'Scheme':
-        this.toggleScheme();
-        break;
-      case 'Rinchi':
-        this.toggleRinchi();
-        break;
-      case 'Prop':
-        this.toggleProp();
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    ReviewActions.handleReviewModal(showReviewModal, btnAction);
-  }
-
-  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
-    LoadingActions.start();
-    ReviewActions.reviewPublish(
-      elementId,
-      'reaction',
-      comment,
-      action,
-      checklist,
-      reviewComments
-    );
-    // this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo,
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof cinfo[field] === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-
-    ReviewActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  updateRepoXvial() {
-    PublicActions.displayReaction(this.props.reaction.id);
-    PublicActions.refreshPubElements('Reactions');
-  }
-
-  reactionInfo(reaction) {
-    const { showScheme, showRinchi, showProp, showTlc } = this.state;
-    const { canComment, review_info, review } = this.props;
-
-    const svgPath = `/images/reactions/${reaction.reaction_svg_file}`;
-    const content = reaction.description;
-    const additionInfo = reaction.observation;
-
-    const descContent =
-      content && content.ops && content.ops.length > 0 && content.ops[0].insert
-        ? content.ops[0].insert.trim()
-        : '';
-    let descQV = (
-      <span>
-        <b>Description:</b>
-        <QuillViewer value={content} preview />
-      </span>
-    );
-    if (descContent === '') descQV = '';
-
-    const addinfoContent =
-      additionInfo &&
-      additionInfo.ops &&
-      additionInfo.ops.length > 0 &&
-      additionInfo.ops[0].insert
-        ? additionInfo.ops[0].insert.trim()
-        : '';
-    let addQV = (
-      <span>
-        <b>Additional information for publication and purification details:</b>
-        <QuillViewer value={additionInfo} preview />
-      </span>
-    );
-    if (addinfoContent === '') addQV = '';
-
-    const temperature = reaction.temperature
-      ? `${reaction.temperature.userText} ${reaction.temperature.valueUnit}`
-      : '';
-    const duration = CalcDuration(reaction);
-    const properties = `Status:[${reaction.status}]; Temperature:[${temperature}]; Duration: [${duration}]`;
-    const tlc = `Solvents (parts):[${reaction.tlc_solvents || ''}]; Rf-Value:[${
-      reaction.rf_value || ''
-    }]; TLC-Description: [${reaction.tlc_description || ''}]`;
-
-    const bodyAttrs = {
-      style: {
-        fontSize: '90%',
-        paddingBottom: 'unset',
-      },
-    };
-    const schemeOnly =
-      (reaction &&
-        reaction.publication &&
-        reaction.publication.taggable_data &&
-        reaction.publication.taggable_data.scheme_only === true) ||
-      false;
-    if (schemeOnly) {
-      if (canComment) {
-        return (
-          <RepoReactionSchemeInfo
-            reaction={reaction}
-            svgPath={svgPath}
-            showScheme={showScheme}
-            showRinchi={showRinchi}
-            showProp={showProp}
-            bodyAttrs={bodyAttrs}
-            onToggle={this.handleToggle}
-            review_info={review_info}
-            onComment={this.handleCommentBtn}
-            propInfo={properties}
-            canComment={canComment}
-          />
-        );
-      }
-      return (
-        <RepoReactionSchemeInfo
-          reaction={reaction}
-          svgPath={svgPath}
-          showScheme={showScheme}
-          showRinchi={showRinchi}
-          showProp={showProp}
-          bodyAttrs={bodyAttrs}
-          onToggle={this.handleToggle}
-          canComment={canComment}
-        />
-      );
-    }
-    return (
-      <Panel style={{ marginBottom: '4px' }}>
-        <Panel.Body style={{ paddingBottom: '1px' }}>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              {resizableSvg(svgPath)}
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn
-                {...this.props}
-                field="Reaction Table"
-                orgInfo="<Reaction Table>"
-                onShow={this.handleCommentBtn}
-              />
-              <ReactionTable
-                reaction={reaction}
-                toggle={this.toggleScheme}
-                show={showScheme}
-                isPublic
-                isReview={this.props.isReview}
-                bodyAttrs={bodyAttrs}
-                canComment={canComment}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <div className="desc small-p">
-                <CommentBtn
-                  {...this.props}
-                  field="Description"
-                  orgInfo={descContent}
-                  onShow={this.handleCommentBtn}
-                />
-                {descQV}
-              </div>
-              <div className="desc small-p">
-                <CommentBtn
-                  {...this.props}
-                  field="Additional information"
-                  orgInfo={addinfoContent}
-                  onShow={this.handleCommentBtn}
-                />
-                {addQV}
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <ReactionRinChiKey
-                reaction={reaction}
-                toggle={this.toggleRinchi}
-                show={showRinchi}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn
-                {...this.props}
-                field="Properties"
-                orgInfo={properties}
-                onShow={this.handleCommentBtn}
-              />
-              <ReactionProperties
-                reaction={reaction}
-                toggle={this.toggleProp}
-                show={showProp}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={12} md={12} lg={12}>
-              <CommentBtn
-                {...this.props}
-                field="TLC-Control"
-                orgInfo={tlc}
-                onShow={this.handleCommentBtn}
-              />
-              <ReactionTlc
-                reaction={reaction}
-                toggle={this.toggleTlc}
-                show={showTlc}
-                bodyAttrs={bodyAttrs}
-              />
-            </Col>
-          </Row>
-        </Panel.Body>
-      </Panel>
-    );
-  }
-
-  renderAnalysisView(
-    container,
-    type,
-    product = null,
-    idx = -1,
-    isLogin = false,
-    isReviewer = false,
-    references = []
-  ) {
-    if (typeof container === 'undefined' || !container) return <span />;
-
-    const analyses = ArrayUtils.sortArrByIndex(
-      head(filter(container.children, (o) => o.container_type === 'analyses'))
-        .children
-    );
-    const show = this.state.showRA[idx] || true;
-    if (typeof analyses === 'undefined' || !analyses || analyses.length === 0) {
-      return <div />;
-    }
-    const pdInfos =
-      (this.props.reaction.infos &&
-        this.props.reaction.infos.pd_infos &&
-        this.props.reaction.infos.pd_infos[product && product.id]) ||
-      '';
-    const productHeader =
-      typeof product !== 'undefined' && product ? (
-        <RenderAnalysisHeader
-          key={`reaction-product-header-${product.id}`}
-          reactionId={this.props.reaction.id}
-          element={product}
-          isPublic={this.props.isPublished}
-          isLogin={isLogin}
-          isReviewer={isReviewer}
-          userInfo={pdInfos}
-          updateRepoXvial={() => this.updateRepoXvial()}
-          xvialCom={product.xvialCom}
-          literatures={references}
-        />
-      ) : (
-        <span />
-      );
-    const specSample =
-      type === 'Sample' && typeof product !== 'undefined' && product
-        ? new Sample(product)
-        : null;
-    const analysesView = analyses.map((analysis) => {
-      const kind =
-        analysis.extended_metadata &&
-        analysis.extended_metadata.kind &&
-        analysis.extended_metadata['kind'].split('|').pop().trim();
-      const anaInfo =
-        (this.props.reaction.infos &&
-          this.props.reaction.infos.ana_infos &&
-          this.props.reaction.infos.ana_infos[analysis.id]) ||
-        '';
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn
-            {...this.props}
-            field={`Analysis_${analysis.id}`}
-            orgInfo={kind}
-            onShow={this.handleCommentBtn}
-          />
-          <RenderPublishAnalysesPanel
-            key={`${type}_${analysis.id}`}
-            userInfo={anaInfo}
-            analysis={analysis}
-            type="Container"
-            pageType="reactions"
-            pageId={this.props.reaction.id}
-            isPublic={this.props.isPublished}
-            isLogin={isLogin}
-            isReviewer={isReviewer}
-            element={specSample}
-          />
-        </span>
-      );
-    });
-
-    return (
-      <div>
-        <span
-          role="presentation"
-          className="label label-default"
-          style={{
-            backgroundColor: '#777777',
-            color: 'white',
-            fontSize: 'smaller',
-            fontWeight: 'bold',
-            cursor: 'pointer',
-          }}
-          onClick={() => this.toggleRA(idx)}
-        >
-          Analyses &nbsp;
-          <i className={`glyphicon ${show}`} />
-          <i className={`fa fa-caret-${show ? 'down' : 'right'}`} />
-        </span>
-        <span
-          className="label"
-          style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
-        >
-          {AnalysesTypeJoinLabel(analyses, type)}
-        </span>
-        <Panel
-          style={{ border: 'none' }}
-          id={`collapsible_${type}_analyses`}
-          expanded={show}
-          defaultExpanded
-          onToggle={() => {}}
-        >
-          <Panel.Collapse>
-            <Panel.Body
-              style={{
-                fontSize: '90%',
-                backgroundColor: '#f5f5f5',
-                padding: '4',
-              }}
-            >
-              {productHeader}
-              {analysesView}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </div>
-    );
-  }
-
-  renderProductAnalysisView(
-    products,
-    isLogin = false,
-    isReviewer = false,
-    references = []
-  ) {
-    if (typeof products === 'undefined' || !products || products.length === 0) {
-      return <span />;
-    }
-    const prdReferences = (_sid, _references) =>
-      _references
-        ? _references.filter(
-            (r) => r.element_type === 'Sample' && r.element_id === _sid
-          )
-        : [];
-    return products.map((product, idx) => (
-      <div key={`product-${product.id}`}>
-        {this.renderAnalysisView(
-          product.container,
-          'Sample',
-          product,
-          idx,
-          isLogin,
-          isReviewer,
-          prdReferences(product.id, references)
-        )}
-      </div>
-    ));
-  }
-
-  render() {
-    const {
-      reaction,
-      isPublished,
-      canComment,
-      review_info,
-      showComment,
-      review,
-      canClose,
-    } = this.props;
-    let { buttons } = this.props;
-    if (typeof reaction === 'undefined' || !reaction) {
-      return <div />;
-    }
-
-    const taggData =
-      (reaction &&
-        reaction.publication &&
-        reaction.publication.taggable_data) ||
-      {};
-    const pubData = (reaction && reaction.publication) || {};
-    const doi = (reaction && reaction.doi) || {};
-
-    const aId = [].concat.apply([], taggData.affiliation_ids);
-    const affiliationMap = {};
-    const { literatures } = reaction;
-    const references = literatures
-      ? literatures.map((lit) => (
-          <li key={`product_${lit.id}`} style={{ display: 'flex' }}>
-            <RefByUserInfo info={lit.ref_added_by} litype={lit.litype} />
-            &nbsp;
-            <i className={`icon-${lit.element_type.toLowerCase()}`} />
-            &nbsp;
-            <Citation key={lit.id} literature={lit} />
-          </li>
-        ))
-      : [];
-    const refArray = [];
-    let referencesText = '';
-    if (literatures) {
-      literatures.forEach((lit) => {
-        const content = literatureContent(lit, true);
-        refArray.push(content);
-      });
-      referencesText = refArray.join('');
-    }
-
-    let aCount = 0;
-    aId.map((e) => {
-      if (!affiliationMap[e]) {
-        aCount += 1;
-        affiliationMap[e] = aCount;
-      }
-    });
-    const license = taggData.license || 'CC BY-SA';
-
-    const schemeOnly =
-      (reaction &&
-        reaction.publication &&
-        reaction.publication.taggable_data &&
-        reaction.publication.taggable_data.scheme_only === true) ||
-      false;
-
-    let showDOI = (
-      <Doi
-        type="reaction"
-        id={reaction.id}
-        doi={isPublished ? taggData.doi : doi}
-        isPublished={isPublished}
-      />
-    );
-    if (schemeOnly) {
-      buttons = ['Decline', 'Comments', 'Accept'];
-      showDOI = '';
-    }
-
-    if (
-      review_info?.groupleader === true &&
-      review_info?.preapproved !== true
-    ) {
-      buttons = ['Comments', 'Review', 'Approve'];
-    }
-
-    const idyLogin =
-      typeof reaction.isLogin === 'undefined' ? true : reaction.isLogin;
-    const idyReview =
-      typeof reaction.isReviewer === 'undefined' ? false : reaction.isReviewer;
-    const userInfo = (reaction.infos && reaction.infos.pub_info) || '';
-
-    let embargo = <span />;
-    const colDoiPrefix = isPublished
-      ? taggData.doi?.split('/')[0]
-      : doi?.full_doi?.split('/')[0];
-    if (reaction.embargo) {
-      const embargoLink = isPublished
-        ? `/inchikey/collection/${reaction.embargo}`
-        : `/embargo/reaction/${reaction.id}`;
-      embargo = (
-        <span>
-          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
-          &nbsp;
-          <Button
-            key="embargo-link-btn"
-            bsStyle="link"
-            href={embargoLink}
-            target="_blank"
-            style={{ padding: '0px 0px' }}
-          >
-            <i className="fa fa-database" />
-            &nbsp;&nbsp;{reaction.embargo}
-          </Button>
-          <ClipboardCopyBtn
-            text={`https://dx.doi.org/${colDoiPrefix}/collection/${reaction.embargo}`}
-            tooltip="retrieve and copy collection DOI"
-          />
-        </span>
-      );
-    }
-    return (
-      <div style={{ border: 'none' }}>
-        <div>
-          <Jumbotron key={`reaction-${reaction.id}`}>
-            <PublicAnchor doi={taggData.doi} isPublished={isPublished} />
-            {canComment ? (
-              <RepoReviewButtonBar
-                element={{ id: reaction.id, elementType: 'Reaction' }}
-                buttons={buttons}
-                buttonFunc={this.handleReviewBtn}
-                review_info={review_info}
-                showComment={showComment}
-                taggData={taggData}
-                schemeOnly={schemeOnly}
-                currComment={
-                  (review?.history &&
-                    review?.history.length > 0 &&
-                    review?.history.slice(-1).pop()) ||
-                  {}
-                }
-              />
-            ) : (
-              ''
-            )}
-            {canClose ? <ClosePanel element={reaction} /> : ''}
-            <h4>
-              <IconToMyDB
-                isLogin={idyLogin}
-                isPublished={isPublished}
-                id={reaction.id}
-                type="reaction"
-              />
-              {schemeOnly ? <SchemeWord /> : ''}&nbsp;
-              <DateInfo
-                isPublished={isPublished}
-                preText="Reaction"
-                pubData={pubData}
-                tagData={taggData}
-              />
-              &nbsp;
-              <LicenseIcon
-                license={license}
-                hasCoAuthors={
-                  taggData.author_ids && taggData.author_ids.length > 1
-                }
-              />
-              <PublicCommentModal
-                isReviewer={idyReview}
-                id={reaction.id}
-                type="Reaction"
-                title={`Reaction, CRR-${pubData.id}`}
-                userInfo={userInfo}
-              />
-              &nbsp;
-              <UserCommentModal
-                isLogin={idyLogin}
-                id={reaction.id}
-                type="Reaction"
-                title={`Reaction, CRR-${pubData.id}`}
-              />
-            </h4>
-            <br />
-            <ContributorInfo
-              contributor={taggData.contributors}
-              showHelp={schemeOnly}
-            />
-            <h5>
-              <b>{getAuthorLabel(taggData.author_ids)} </b>
-              <AuthorList
-                creators={taggData.creators}
-                affiliationMap={affiliationMap}
-              />
-            </h5>
-            <AffiliationList
-              affiliations={taggData.affiliations}
-              affiliationMap={affiliationMap}
-            />
-            {showDOI}
-            <ChemotionId id={pubData.id} type="reaction" />
-            {embargo}
-            <h5>
-              <CommentBtn
-                {...this.props}
-                field="Reference"
-                orgInfo={referencesText}
-                onShow={this.handleCommentBtn}
-              />
-              <b>
-                Reference{references.length > 1 ? 's' : null} in the Literature:{' '}
-              </b>
-              <ul style={{ listStyle: 'none' }}>{references}</ul>
-            </h5>
-            <br />
-            <h5>{this.reactionInfo(reaction)}</h5>
-            <RepoSegment segments={reaction.segments} />
-            {schemeOnly
-              ? ''
-              : this.renderAnalysisView(
-                  reaction.container,
-                  'Reaction',
-                  null,
-                  -1,
-                  idyLogin,
-                  idyReview
-                )}
-            {schemeOnly
-              ? ''
-              : this.renderProductAnalysisView(
-                  reaction.products,
-                  idyLogin,
-                  idyReview,
-                  literatures
-                )}
-          </Jumbotron>
-        </div>
-        {canComment ? (
-          <div>
-            <RepoCommentModal
-              show={this.state.showCommentModal}
-              elementId={reaction.id}
-              elementType="reaction"
-              field={this.state.commentField}
-              orgInfo={this.state.originInfo}
-              review={this.props.review}
-              review_info={review_info}
-              onUpdate={this.handleSubmitComment}
-              onHide={() => this.setState({ showCommentModal: false })}
-            />
-          </div>
-        ) : (
-          ''
-        )}
-      </div>
-    );
-  }
-}
-
-RepoReactionDetails.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  btnAction: PropTypes.string,
-  review_info: PropTypes.object,
-  showComment: PropTypes.bool,
-  isReview: PropTypes.bool,
-  review: PropTypes.object,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-  onReviewUpdate: PropTypes.func,
-};
-
-RepoReactionDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  review_info: {},
-  showComment: true,
-  btnAction: '',
-  isReview: false,
-  review: {},
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-  onReviewUpdate: () => {},
-};
diff --git a/app/packs/src/libHome/RepoReactionList.js b/app/packs/src/libHome/RepoReactionList.js
deleted file mode 100644
index e9ecd2856..000000000
--- a/app/packs/src/libHome/RepoReactionList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import uuid from 'uuid';
-import SVG from 'react-inlinesvg';
-import PropTypes from 'prop-types';
-import { Popover, OverlayTrigger, Row, Col, Tooltip } from 'react-bootstrap';
-import PublicActions from '../components/actions/PublicActions';
-
-const xvialTag = (element, hasXvial = null) => {
-  const hasX = hasXvial || (element.xvial_count && element.xvial_count > 0);
-  let hasXCom = hasX && (element.xvial_com && element.xvial_com !== 0);
-  if (element.xvial_com === -1 || element.xvial_com === -2) {
-    hasXCom = hasX;
-  } else {
-    hasXCom = (element.xvial_com > 0);
-  }
-  if (!hasX && !hasXCom) return (<span className="xvial-span xvial" style={{ border: 'unset', backgroundColor: 'unset' }}>-</span>);
-  return (<span className={`xvial-span ${hasX ? 'xvial' : ''} ${hasXCom ? 'xvial-com' : ''}`}><i className="icon-xvial" /></span>);
-};
-
-const svgTag = (path, klassName, isPubElement) => {
-  const popHover = (
-    <Popover id="repo-pub-popover-svg" style={{ maxWidth: 'none', maxHeight: 'none' }}>
-      <img src={path} alt="" style={{ height: '26vh', width: '52vw' }} />
-    </Popover>
-  );
-  return isPubElement ? (
-    <OverlayTrigger trigger={['hover', 'focus']} placement="right" rootClose onHide={null} overlay={popHover}>
-      <div><SVG src={path} className={`layout_svg_${klassName}`} key={path} height={300} /></div>
-    </OverlayTrigger>
-  ) : <SVG src={path} className={`layout_svg_${klassName}`} key={path} />;
-};
-
-const infoTag = (reaction, schemeOnly) => {
-  const pubData = (reaction && reaction.pub_id) || '';
-  const taggData = (reaction && reaction.taggable_data) || {};
-
-  let authorInfo = '';
-  if (taggData && taggData.creators && taggData.creators.length > 0) {
-    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div className="item_xvial">{taggData.creators[0] && taggData.creators[0].name}</div></div>);
-  } else if (taggData && taggData.contributors) {
-    authorInfo = (<div className="home_wrapper_item"><div>Contributor</div><div className="item_xvial">{taggData.contributors.name}</div></div>);
-  } else {
-    authorInfo = (<div className="home_wrapper_item"><div>Author</div><div /></div>);
-  }
-
-  return (
-    <Row key={`list-reaction-info-${reaction.id}`} className="home_wrapper">
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">Chemotion-Repository unique ID</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>ID</div><div className="item_xvial">{`CRR-${pubData}`}</div>
-        </div>
-      </OverlayTrigger>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">an embargo bundle contains publications which have been published at the same time</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>Embargo</div><div className="item_xvial">{reaction.embargo}</div>
-        </div>
-      </OverlayTrigger>
-      {authorInfo}
-      <div className="home_wrapper_item">
-        <div>Published on</div><div className="item_xvial">{reaction.published_at}</div>
-      </div>
-      <div className="home_wrapper_item">
-        <div>Analyses</div><div className="item_xvial">{reaction.ana_cnt || 0}</div>
-      </div>
-      <OverlayTrigger placement="top" overlay={<Tooltip id={uuid.v4()} className="left_tooltip bs_tooltip">When the X-Vial icon available, a physical sample of this molecule was registered to the Molecule Archive of the Compound Platform and can be requested from there</Tooltip>}>
-        <div className="home_wrapper_item">
-          <div>X-Vial</div><div className="item_xvial">{xvialTag(reaction)}</div>
-        </div>
-      </OverlayTrigger>
-    </Row>
-  );
-};
-const RepoReactionList = (props) => {
-  const {
-    element, currentElement, isPubElement, schemeOnly
-  } = props;
-  const listClass = (currentElement !== null && currentElement && currentElement.id === element.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <Col md={isPubElement === true ? 12 : 6} key={`list-reaction-${element.id}`} onClick={() => PublicActions.displayReaction(element.id)}>
-      <div className={`home_reaction ${listClass}`}>
-        <Row key={`list-reaction-svg-${element.id}`}>
-          <Col md={12}>
-            {svgTag(element.svgPath, 'reaction', isPubElement)}
-          </Col>
-        </Row>
-        {infoTag(element, schemeOnly, listClass)}
-      </div>
-    </Col>
-  );
-};
-
-RepoReactionList.propTypes = {
-  element: PropTypes.object.isRequired,
-  currentElement: PropTypes.object,
-  isPubElement: PropTypes.bool,
-  schemeOnly: PropTypes.bool
-};
-
-RepoReactionList.defaultProps = {
-  isPubElement: false,
-  schemeOnly: false,
-  currentElement: null
-};
-
-export default RepoReactionList;
diff --git a/app/packs/src/libHome/RepoReactionSchemeInfo.js b/app/packs/src/libHome/RepoReactionSchemeInfo.js
deleted file mode 100644
index 1cd458041..000000000
--- a/app/packs/src/libHome/RepoReactionSchemeInfo.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import {
-  Panel,
-  Row,
-  Col
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { CommentBtn, ReactionTable, ReactionRinChiKey, resizableSvg } from './RepoCommon';
-import QuillViewer from '../components/QuillViewer';
-
-const RepoReactionSchemeInfo = (props) => {
-  const content = props.reaction.description;
-  const contentlength = (content && content.ops && content.ops.length > 0
-    && content.ops[0].insert) ? content.ops[0].insert.trim().length : 0;
-  const descQV = contentlength > 0 ?
-    (<span><b>Description:</b><QuillViewer value={content} /></span>) : null;
-  return (
-    <Panel style={{ marginBottom: '4px' }}>
-      <Panel.Body style={{ paddingBottom: '1px' }}>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            {resizableSvg(props.svgPath)}
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <CommentBtn {...props} field="Reaction Table" orgInfo="<Reaction Table>" onShow={props.onComment} />
-            <ReactionTable
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Scheme')}
-              show={props.showScheme}
-              isPublic
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <div className="desc small-p">
-              {descQV}
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} md={12} lg={12}>
-            <ReactionRinChiKey
-              reaction={props.reaction}
-              toggle={() => props.onToggle('Rinchi')}
-              show={props.showRinchi}
-              bodyAttrs={props.bodyAttrs}
-            />
-          </Col>
-        </Row>
-      </Panel.Body>
-    </Panel>
-  );
-};
-
-RepoReactionSchemeInfo.propTypes = {
-  reaction: PropTypes.object.isRequired,
-  svgPath: PropTypes.string.isRequired,
-  showScheme: PropTypes.bool.isRequired,
-  showRinchi: PropTypes.bool.isRequired,
-  showProp: PropTypes.bool.isRequired,
-  bodyAttrs: PropTypes.object.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  review_info: PropTypes.object,
-  propInfo: PropTypes.string,
-  onComment: PropTypes.func,
-  canComment: PropTypes.bool,
-};
-
-RepoReactionSchemeInfo.defaultProps = {
-  review_info: 0,
-  propInfo: '',
-  onComment: () => {},
-  canComment: false
-};
-
-export default RepoReactionSchemeInfo;
diff --git a/app/packs/src/libHome/RepoReview.js b/app/packs/src/libHome/RepoReview.js
deleted file mode 100644
index 9a16010c0..000000000
--- a/app/packs/src/libHome/RepoReview.js
+++ /dev/null
@@ -1,514 +0,0 @@
-import React, { Component } from 'react';
-import SVG from 'react-inlinesvg';
-import { Table, Col, Row, Navbar, DropdownButton, MenuItem, ButtonGroup, Pagination, Form, FormGroup, InputGroup, FormControl, Modal, Panel, ButtonToolbar, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import Select from 'react-select';
-import { filter } from 'lodash';
-import { RepoReviewModal } from 'repo-review-ui';
-import RepoReviewDetails from './RepoReviewDetails';
-import ReviewActions from '../components/actions/ReviewActions';
-import EmbargoActions from '../components/actions/EmbargoActions';
-import ReviewStore from '../components/stores/ReviewStore';
-import UserStore from '../components/stores/UserStore';
-import RepositoryFetcher from '../components/fetchers/RepositoryFetcher';
-import LoadingActions from '../components/actions/LoadingActions';
-
-import { SvgPath, ElStateLabel, ElSubmitTime, SchemeWord, ChecklistPanel } from './RepoCommon';
-// import RepoReviewModal from '../components/common/RepoReviewModal';
-
-const renderElement = (e, currentElement, embargoBtn) => {
-  if (e.type === 'Reaction') {
-    const listClass = (currentElement !== null && currentElement.reaction && currentElement.reaction.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-    const schemeOnly = (e && e.scheme_only === true) || false;
-    return (
-      <tr
-        key={e.id}
-        className={listClass}
-        onClick={() => ReviewActions.displayReviewReaction(e.id)}
-      >
-        <td style={{ position: 'relative' }} >
-          <span className="review_element_label">
-            <i className="icon-reaction" />{schemeOnly ? <SchemeWord /> : ''}&nbsp;{e.title}
-          </span>
-          &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-          {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-          &nbsp;{embargoBtn}
-          <div>
-            <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-            <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}}  />
-          </div>
-        </td>
-      </tr>
-    );
-  }
-  const listClass = (currentElement !== null && currentElement.sample && currentElement.sample.id === e.id) ? 'list_focus_on' : 'list_focus_off';
-  return (
-    <tr
-      key={e.id}
-      className={listClass}
-      onClick={() => ReviewActions.displayReviewSample(e.id)}
-    >
-      <td style={{ position: 'relative' }}>
-        <span className="review_element_label">
-          <i className="icon-sample" />&nbsp;{e.title}
-        </span>
-        &nbsp;By&nbsp;{e.published_by}&nbsp;at&nbsp;
-        {ElSubmitTime(e.submit_at)}&nbsp;{ElStateLabel(e.state)}&nbsp;{ElStateLabel(e.embargo)}
-        &nbsp;{embargoBtn}
-        <div>
-          <SVG src={SvgPath(e.svg, e.type)} className="molecule-mid" key={e.svg} />
-          <ChecklistPanel isReviewer={e.isReviewer} checklist={e.checklist} review_info={e?.review_info || {}} />
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-const defaultState = 'pending';
-
-export default class RepoReview extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 10,
-      elements: [],
-      currentElement: null,
-      showReviewModal: false,
-      reviewData: {},
-      selectType: 'All',
-      searchType: 'All',
-      searchValue: '',
-      listTypeOptions: [],
-      selectState: defaultState,
-      bundles: [],
-      btnAction: '',
-      showEmbargoModal: false,
-      selectedElement: null,
-      selectedEmbargo: null
-    };
-    this.onChange = this.onChange.bind(this);
-    this.handleElementSelection = this.handleElementSelection.bind(this);
-    this.handleSelectType = this.handleSelectType.bind(this);
-    this.handleSelectAdvValue = this.handleSelectAdvValue.bind(this);
-    this.handleSearchNameInput = this.handleSearchNameInput.bind(this);
-    this.onEmbargoBtnClick = this.onEmbargoBtnClick.bind(this);
-    this.onEmbargoBtnSave = this.onEmbargoBtnSave.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleReviewUpdate = this.handleReviewUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    ReviewStore.listen(this.onChange);
-    ReviewActions.getElements.defer();
-    EmbargoActions.getEmbargoBundle(); // added to ReviewStore
-    ReviewActions.fetchUnitsSystem.defer();
-  }
-
-  componentWillUnmount() {
-    ReviewStore.unlisten(this.onChange);
-  }
-
-  onChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  handleSubmitReview(elementId, elementType, comment, btnAction, checklist, reviewComments){
-    LoadingActions.start();
-    ReviewActions.reviewPublish(elementId, elementType, comment, btnAction, checklist, reviewComments);
-    // this.props.onHide(false);
-  }
-
-  handleReviewUpdate(e, col, rr) {
-    const { review } = this.state;
-    const checklist = rr.checklist || {};
-    if (typeof (checklist[col]) === 'undefined') checklist[col] = {};
-    checklist[col].status = e.target.checked;
-    review.checklist = checklist;
-    ReviewActions.updateReview(review);
-  }
-
-  onPerPageChange(e) {
-    const {
-      page, selectType, selectState, searchType, searchValue
-    } = this.state;
-    const perPage = e.target.value;
-    this.setState({ perPage });
-    ReviewActions.getElements(selectType, selectState, searchType, searchValue, page, perPage);
-  }
-
-  onPaginationSelect(eventKey) {
-    const {
-      pages, perPage, selectType, selectState, searchType, searchValue
-    } = this.state;
-    if (eventKey > 0 && eventKey <= pages) {
-      ReviewActions.getElements(
-        selectType, selectState, searchType, searchValue,
-        eventKey, perPage
-      );
-    }
-  }
-
-  onEmbargoBtnClick(e, element) {
-    e.preventDefault();
-    e.stopPropagation();
-    const selectedElement = !this.state.showEmbargoModal ? element : null;
-    this.setState({ showEmbargoModal: !this.state.showEmbargoModal, selectedElement });
-  }
-
-  onEmbargoBtnSave(e, element) {
-    const { selectedEmbargo, selectedElement } = this.state;
-    if (selectedEmbargo === null) {
-      return alert('Please select an embargo first!');
-    }
-    EmbargoActions.assignEmbargo(selectedEmbargo.value, selectedElement);
-    this.onEmbargoBtnClick(e, element);
-    return true;
-  }
-
-  perPageInput() {
-    const { perPage } = this.state;
-    return (
-      <Form horizontal className="list-show-count" >
-        <FormGroup>
-          <InputGroup>
-            <InputGroup.Addon>Show</InputGroup.Addon>
-            <FormControl
-              type="text"
-              style={{ textAlign: 'center' }}
-              onChange={e => this.onPerPageChange(e)}
-              value={perPage || 0}
-            />
-          </InputGroup>
-        </FormGroup>
-      </Form>
-    );
-  }
-
-  pagination() {
-    const { page, pages } = this.state;
-    const items = [];
-    const minPage = Math.max(page - 2, 1);
-    const maxPage = Math.min(minPage + 4, pages);
-    items.push(<Pagination.First key="first-page" onClick={() => this.onPaginationSelect(1)} />);
-    if (page > 1) {
-      items.push(<Pagination.Prev key="previous-page" onClick={() => this.onPaginationSelect(page - 1)} />);
-    }
-    for (let tpage = minPage; tpage <= maxPage; tpage += 1) {
-      items.push((
-        <Pagination.Item
-          key={`${tpage}-page`}
-          active={tpage === page}
-          onClick={() => this.onPaginationSelect(tpage)}
-        >
-          {tpage}
-        </Pagination.Item>
-      ));
-    }
-
-    if (pages > maxPage) {
-      items.push(<Pagination.Ellipsis key="ellipsis-page" />);
-    }
-    if (page !== pages) {
-      items.push(<Pagination.Next key="next-page" onClick={() => this.onPaginationSelect(page + 1)} />);
-    }
-    items.push(<Pagination.Last key="last-page" onClick={() => this.onPaginationSelect(pages)} />);
-
-    return <div className="list-pagination"><Pagination>{items}</Pagination></div>;
-  }
-
-  handleSelectType(val) {
-    const { selectType, selectState, perPage } = this.state;
-    if (val && (val === 'Submitter' || val === 'Embargo')) {
-      RepositoryFetcher.fetchReviewSearchOptions(val, selectType, selectState).then((res) => {
-        const options = res && res.result && res.result
-          .map(u => ({ value: u.key, name: u.name, label: u.label }));
-        this.setState({ listTypeOptions: options });
-        ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
-      }).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    } else {
-      ReviewActions.getElements(selectType, selectState, val, '', 1, perPage);
-    }
-  }
-
-  handleSearchNameInput(event) {
-    const { value } = event.target;
-    if (value) {
-      this.setState({ searchValue: value });
-    }
-  }
-
-  handleSelectAdvValue(val) {
-    const {
-      perPage, selectType, selectState, searchType
-    } = this.state;
-    if (val) {
-      this.setState({ page: 1, searchValue: val });
-      ReviewActions.getElements(selectType, selectState, searchType, val, 1, perPage);
-    }
-  }
-
-  handleElementSelection(t, event) {
-    const { perPage, searchType, searchValue } = this.state;
-    if (t === 'type') {
-      this.setState({ selectType: event });
-      ReviewActions.getElements(event, this.state.selectState, searchType, searchValue, 1, perPage);
-    } else if (t === 'state') {
-      this.setState({ selectState: event });
-      ReviewActions.getElements(this.state.selectType, event, searchType, searchValue, 1, perPage);
-    }
-  }
-
-  handleKeyDown(event) {
-    const {
-      perPage, selectType, selectState, searchType, searchValue
-    } = this.state;
-    switch (event.keyCode) {
-      case 13: // Enter
-        ReviewActions.getElements(selectType, selectState, searchType, searchValue, 1, perPage);
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  }
-
-  loadValuesByType(input) {
-    if (!input || input.length < 3) {
-      return Promise.resolve({ options: [] });
-    }
-    return RepositoryFetcher.fetchReviewSearchValues(this.state.searchType, input)
-      .then(res => ({
-        options: res.result
-          .map(u => ({
-            value: u.key,
-            name: u.name,
-            label: u.label
-          }))
-      })).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-  }
-  renderMenuItems(t, elements) {
-    const menu = elements.map(element => (
-      <MenuItem key={element} onSelect={() => this.handleElementSelection(t, element)}>
-        {element}
-      </MenuItem>
-    ));
-    return menu;
-  }
-
-  renderSearch() {
-    const { searchType, searchValue, listTypeOptions } = this.state;
-
-    const customClass = '.btn-unified';
-    const optSearchType = ['All', 'Samples', 'Reactions'];
-    const optSearchState = ['All', 'pending', 'reviewed', 'accepted'];
-
-    this.listOptions = [
-      { value: 'All', label: 'filter by' },
-      { value: 'Name', label: 'name' },
-      { value: 'Embargo', label: 'embargo' },
-      { value: 'Submitter', label: 'submitter' },
-    ];
-
-    const filterDropdown = (
-      <ButtonGroup className="home-search" style={{ display: 'flex' }}>
-        <DropdownButton
-          className={customClass}
-          id="type-inner-dropdown"
-          title={this.state.selectType === 'All' ? 'Type' : this.state.selectType}
-        >
-          {this.renderMenuItems('type', optSearchType)}
-        </DropdownButton>
-        <DropdownButton
-          className={customClass}
-          id="state-inner-dropdown"
-          title={this.state.selectState}
-        >
-          {this.renderMenuItems('state', optSearchState)}
-        </DropdownButton>
-      </ButtonGroup>
-    );
-
-    const searchTypeTbl = (
-      <Select
-        simpleValue
-        searchable={false}
-        options={this.listOptions}
-        placeholder="Select search field"
-        clearable={false}
-        valueKey="value"
-        labelKey="label"
-        onChange={this.handleSelectType}
-        defaultValue="All"
-        value={searchType}
-        className="o-author"
-      />
-    );
-
-    let searchValueTbl = (<div />);
-    switch (searchType) {
-      case 'Embargo':
-      case 'Submitter':
-        searchValueTbl = (
-          <Select
-            simpleValue
-            searchable
-            options={listTypeOptions}
-            placeholder="Select..."
-            valueKey="value"
-            labelKey="label"
-            onChange={this.handleSelectAdvValue}
-            value={searchValue}
-            className="o-name"
-          />
-        );
-        break;
-      case 'Name':
-        searchValueTbl = (
-          <FormControl
-            type="text"
-            placeholder="Name..."
-            value={this.state.searchValue || ''}
-            onChange={event => this.handleSearchNameInput(event)}
-            onKeyDown={event => this.handleKeyDown(event)}
-          />
-        );
-        break;
-      default:
-        searchValueTbl = (<div />);
-    }
-
-    const searchTbl = (
-      <div className="home-adv-search">
-        <div style={{ display: 'flex' }}>
-          { filterDropdown }
-          { searchTypeTbl }
-          { searchValueTbl }
-        </div>
-      </div>
-    );
-
-    return (
-      <div style={{ paddingLeft: '15px', marginTop: '8px', marginBottom: '8px' }}>
-        {searchTbl}
-      </div>
-    );
-  }
-
-  renderEmabrgoModal() {
-    const { showEmbargoModal, bundles, selectedElement, selectedEmbargo } = this.state;
-
-    const options = [
-      { value: '0', name: 'new', label: '--Create a new Embargo Bundle--' },
-    ];
-
-    bundles.forEach((col) => {
-      const tag = col.taggable_data || {};
-      options.push({ value: col.element_id, name: tag.label, label: tag.label });
-    });
-
-    const allBundles = filter(options, b => b.value !== (selectedEmbargo == null ? '' : selectedEmbargo.element_id));
-
-    const element = selectedElement || {};
-    return (
-      <Modal backdrop="static" show={showEmbargoModal}>
-        <Modal.Header><Modal.Title>{element.type}: [{element.title}]</Modal.Title></Modal.Header>
-        <Modal.Body>
-          <Panel bsStyle="success">
-            <Panel.Heading>
-              <Panel.Title>Movee {element.type} [{element.title}] to :</Panel.Title>
-            </Panel.Heading>
-            <Panel.Body>
-              <Select
-                value={this.state.selectedEmbargo}
-                onChange={e => this.setState({ selectedEmbargo: e })}
-                options={allBundles}
-                className="select-assign-collection"
-              />
-              <br />
-              <ButtonToolbar>
-                <Button bsStyle="warning" onClick={e => this.onEmbargoBtnClick(e, element)}>Cancel</Button>
-                <Button bsStyle="primary" onClick={e => this.onEmbargoBtnSave(e, element)}>Move Embargoed Bundle</Button>
-              </ButtonToolbar>
-            </Panel.Body>
-          </Panel>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-
-
-  renderReviewModal() {
-    const { showReviewModal, reviewData, review_info, review, currentElement, elementType, btnAction } = this.state;
-    const rrr = {};
-    rrr['review_info'] = review_info;
-    rrr['review'] = review;
-    rrr['btnAction'] = btnAction;
-    rrr['elementType'] = elementType;
-    if (elementType === 'sample') {
-      rrr['elementId'] = currentElement?.sample?.id;
-    } else {
-      rrr['elementId'] = currentElement?.reaction?.id;
-    }
-
-    return (
-      <RepoReviewModal
-        show={showReviewModal}
-        data={rrr}
-        onSubmit={this.handleSubmitReview}
-        onUpdate={this.handleReviewUpdate}
-        onHide={() => this.setState({ showReviewModal: false })}
-      />
-    );
-  }
-
-  render() {
-    const { elements, currentElement } = this.state;
-    const { currentUser } = UserStore.getState();
-    const embargoBtn = (element) => {
-      if (element.state === 'reviewed' && element.embargo === '' && element.submitter_id === currentUser.id) {
-        return (
-          <OverlayTrigger placement="bottom" overlay={<Tooltip id="moveEmbargo">Move to an embargoed bundle</Tooltip>}>
-            <Button bsSize="xsmall" onClick={e => this.onEmbargoBtnClick(e, element)}><i className="fa fa-exchange" aria-hidden="true" /></Button>
-          </OverlayTrigger>
-        );
-      }
-      return null;
-    };
-    return (
-      <div>
-        <Row style={{ maxWidth: '2000px', margin: 'auto' }}>
-          <Col md={currentElement ? 4 : 12} >
-            <Navbar fluid className="navbar-custom" style={{ marginBottom: '5px' }}>
-              {this.renderSearch()}
-              <div style={{ clear: 'both' }} />
-            </Navbar>
-            <div>
-              <div className="review-list" style={{ backgroundColor: '#f5f5f5' }} >
-                <Table striped className="review-entries">
-                  <tbody striped="true" bordered="true" hover="true">
-                    {((typeof (elements) !== 'undefined' && elements) || []).map(r => renderElement(r, currentElement, embargoBtn(r))) }
-                  </tbody>
-                </Table>
-              </div>
-              <div className="list-container-bottom">
-                <Row>
-                  <Col sm={8}>{this.pagination()}</Col>
-                  <Col sm={4}>{this.perPageInput()}</Col>
-                </Row>
-              </div>
-            </div>
-          </Col>
-          <Col className="review-element" md={currentElement ? 8 : 0}>
-            <RepoReviewDetails />
-            {this.renderEmabrgoModal()}
-          </Col>
-        </Row>
-        {this.renderReviewModal()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoReviewButtonBar.js b/app/packs/src/libHome/RepoReviewButtonBar.js
deleted file mode 100644
index 136bb8b59..000000000
--- a/app/packs/src/libHome/RepoReviewButtonBar.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonToolbar,
-  OverlayTrigger,
-  Tooltip
-} from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import RepoMetadataModal from '../components/common/RepoMetadataModal';
-import RepoReviewAuthorsModal from '../components/common/RepoReviewAuthorsModal';
-
-const showButton = (btn, func, pubState, review_info) => {
-  let title = btn;
-  let btnBsStyle = '';
-  let btnIcon = '';
-  let btnTooltip = '';
-
-  switch (btn) {
-    case 'Accept':
-      btnBsStyle = 'primary';
-      btnIcon = 'fa fa-paper-plane';
-      btnTooltip = 'Accept publication';
-      break;
-    case 'Approve':
-      btnBsStyle = 'primary';
-      btnIcon = 'fa fa-paper-plane';
-      btnTooltip = 'Accept publication by group leader';
-      break;
-    case 'Review':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-exchange';
-      btnTooltip = 'Review publication, modification required for submitter';
-      break;
-    case 'Submit':
-      btnBsStyle = 'info';
-      btnIcon = 'fa fa-play';
-      btnTooltip = 'Submit for publication';
-      break;
-    case 'Decline':
-      btnBsStyle = 'default';
-      btnIcon = 'fa fa-eject';
-      if (review_info?.review_level === 2) {
-        btnTooltip = 'Withdraw publication';
-        title = 'Withdraw';
-      } else if (review_info?.review_level === 3) {
-        btnTooltip = 'Reject publication';
-        title = 'Reject';
-      }
-      break;
-    default:
-      break;
-  }
-  return ((review_info?.review_level === 3 && pubState === 'pending' && btn !== 'Submit') ||
-  (pubState === 'pending' && btn !== 'Submit' && review_info?.preapproved !== true && btn !== 'Accept' && btn !== 'Decline' && review_info?.groupleader === true) ||
-  (review_info?.submitter === true && pubState === 'reviewed' && (btn === 'Submit' || btn === 'Decline'))) ? (
-    <OverlayTrigger
-      key={`ot_${title}`}
-      placement="top"
-      overlay={<Tooltip id={btn}>{btnTooltip}</Tooltip>}
-    >
-      <Button
-        bsStyle={btnBsStyle}
-        onClick={() => func(true, btn)}
-      >
-        <i className={btnIcon} />&nbsp;{title}
-      </Button>
-    </OverlayTrigger>
-  ) : <span key={`span_${title}`} />;
-};
-
-const showCommentButton = (btn, func, currComment) => {
-  const hasComments = (currComment && currComment.comment && currComment.comment.length > 0) || false;
-  return (
-    <OverlayTrigger
-      key="ot_comments"
-      placement="top"
-      overlay={<Tooltip id="showComments">Show/Add Comments</Tooltip>}
-    >
-      <Button
-        bsStyle={hasComments ? 'success' : 'default'}
-        onClick={() => func(true, btn)}
-      >
-        <i className="fa fa-comments" />&nbsp;
-        Comments
-      </Button>
-    </OverlayTrigger>
-  );
-};
-
-const RepoReviewButtonBar = props =>
-  (
-    <ButtonToolbar>
-      {
-        props.showComment === true && props.buttons.filter(b => b === 'Comments').map(b =>
-          showCommentButton(b, props.buttonFunc, (props.currComment)))
-      }
-      {
-        props.showComment === true && props.buttons.filter(b => b !== 'Comments').map(b =>
-          showButton(b, props.buttonFunc, props.currComment.state, props.review_info))
-      }
-      <RepoMetadataModal
-        elementId={props.element.id}
-        elementType={props.element.elementType.toLowerCase()}
-      />
-      <RepoReviewAuthorsModal element={props.element} review_info={props.review_info} schemeOnly={props.schemeOnly} taggData={props.taggData} />
-    </ButtonToolbar>
-  );
-
-RepoReviewButtonBar.propTypes = {
-  element: PropTypes.shape({
-    id: PropTypes.number,
-    elementType: PropTypes.string
-  }).isRequired,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-  buttonFunc: PropTypes.func,
-  review_info: PropTypes.object,
-  showComment: PropTypes.bool,
-  schemeOnly: PropTypes.bool,
-  currComment: PropTypes.object,
-  taggData: PropTypes.object
-};
-
-
-RepoReviewButtonBar.defaultProps = {
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-  buttonFunc: () => { },
-  review_info: {},
-  showComment: true,
-  schemeOnly: false,
-  currComment: {},
-  taggData: {}
-};
-
-export default RepoReviewButtonBar;
diff --git a/app/packs/src/libHome/RepoReviewCommon.js b/app/packs/src/libHome/RepoReviewCommon.js
deleted file mode 100644
index 34f6e5e81..000000000
--- a/app/packs/src/libHome/RepoReviewCommon.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-import { startsWith } from 'lodash';
-import moment from 'moment';
-import { RepoReviewTimeFormat } from 'repo-review-ui';
-
-const AffiliationMap = (affiliationIds) => {
-  const aId = [].concat.apply([], affiliationIds);
-  const affiliationMap = {};
-  let aCount = 0;
-  aId.map((e) => {
-    if (!affiliationMap[e]) {
-      aCount += 1;
-      affiliationMap[e] = aCount;
-    }
-  });
-  return affiliationMap;
-};
-
-const CommentComponent = (field, history) => {
-  const submitHis = history.filter(h => h.type === 'submit' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-  const reviewHis = history.filter(h => h.type === 'reviewed' && h.comments && h.comments[`${field}`] && h.comments[`${field}`].comment !== '');
-
-  const current = (submitHis.length > 0) ? submitHis.pop() : null;
-  const previous = (reviewHis.length > 0) ? reviewHis.pop() : null;
-  const submitField = (current && current.comments && current.comments[`${field}`]) || {};
-  const reviewField = (previous && previous.comments && previous.comments[`${field}`]) || {};
-
-  let keep = true;
-  let submitFieldTime = null;
-  let reviewFieldTime = null;
-  if (current && previous) {
-    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-      submitFieldTime = moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss');
-    } else {
-      submitFieldTime = new Date(submitField.timestamp);
-    }
-
-    if (moment(submitField.timestamp, 'DD-MM-YYYY HH:mm:ss').isValid()) {
-      reviewFieldTime = moment(reviewField.timestamp, 'DD-MM-YYYY HH:mm:ss');
-    } else {
-      reviewFieldTime = new Date(reviewField.timestamp);
-    }
-    keep = reviewFieldTime > submitFieldTime;
-  }
-
-  const submitTbl = (current ?
-    (
-      <Alert bsStyle="danger" style={{ marginBottom: 'unset' }}>
-        <strong>{submitField.username} ({RepoReviewTimeFormat(submitField.timestamp)})</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{submitField.comment}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-  const reviewTbl = (previous ?
-    (
-      <Alert bsStyle="warning" style={{ marginBottom: 'unset' }}>
-        <strong>{reviewField.username} ({RepoReviewTimeFormat(reviewField.timestamp)})</strong>
-        <br />
-        <div style={{ whiteSpace: 'pre-wrap' }}>{reviewField.comment}</div>
-      </Alert>
-    )
-    :
-      <div />
-  );
-
-  const tbl = keep ? (<span>{reviewTbl}{submitTbl}</span>) : (<span>{submitTbl}{reviewTbl}</span>);
-  return tbl;
-};
-
-const CommentDisplay = ({ elReview, commentKey, history }) => {
-  let objectKey = commentKey;
-  if (startsWith(commentKey, 'Reaction_Analysis_')) {
-    objectKey = 'Reaction Analysis';
-  } else if (startsWith(commentKey, 'Product_Analysis_')) {
-    objectKey = 'Product Analysis';
-  } else if (startsWith(commentKey, 'Analysis_')) {
-    objectKey = 'Analysis';
-  }
-
-  if (elReview) {
-    switch (objectKey) {
-      case 'Summary':
-        return CommentComponent(elReview.comment, 'Review Summary', null);
-      case 'Reference':
-      case 'Reaction Table':
-      case 'Description':
-      case 'Additional information':
-      case 'Properties':
-      case 'TLC-Control':
-      case 'Reaction Analysis':
-      case 'Product Analysis':
-      case 'Analysis':
-        return (elReview.comments && elReview.comments[commentKey]) ?
-          CommentComponent(objectKey, history) : <div />;
-      default:
-        return <div />;
-    }
-  }
-  return <div />;
-};
-
-CommentDisplay.propTypes = {
-  elReview: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  commentKey: PropTypes.string.isRequired,
-  history: PropTypes.array
-};
-
-CommentDisplay.defaultProps = {
-  elReview: null,
-  history: []
-};
-
-export {
-  AffiliationMap,
-  CommentComponent,
-  CommentDisplay
-};
diff --git a/app/packs/src/libHome/RepoReviewDetails.js b/app/packs/src/libHome/RepoReviewDetails.js
deleted file mode 100644
index ee9b02cfd..000000000
--- a/app/packs/src/libHome/RepoReviewDetails.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react';
-import ReviewStore from '../components/stores/ReviewStore';
-import RepoReactionDetails from './RepoReactionDetails';
-import RepoSampleDetails from './RepoSampleDetails';
-
-export default class RepoReviewDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      element: props.element,
-      review: {},
-      btnAction: '',
-      review_info: {},
-    };
-
-    this.onStoreChange = this.onStoreChange.bind(this);
-  }
-
-  componentDidMount() {
-    ReviewStore.listen(this.onStoreChange);
-  }
-
-  componentWillUnmount() {
-    ReviewStore.unlisten(this.onStoreChange);
-  }
-
-  onStoreChange(state) {
-    this.setState(prevState => ({ ...prevState, ...state }));
-  }
-
-  switchTypeRender() {
-    const { currentElement, elementType } = this.state;
-    if (typeof (currentElement) === 'undefined' || !currentElement) {
-      return <span />;
-    }
-    switch (elementType) {
-      case 'reaction':
-        return (
-          <RepoReactionDetails
-            reaction={currentElement.reaction}
-            canComment
-            review_info={this.state.review_info}
-            btnAction={this.state.btnAction}
-            isReview={true}
-            review={this.state.review}
-          />);
-      case 'sample':
-        return (
-          <RepoSampleDetails
-            element={currentElement}
-            canComment
-            btnAction={this.state.btnAction}
-            review_info={this.state.review_info}
-            review={this.state.review}
-          />);
-      default: return <span />;
-    }
-  }
-
-  render() {
-    return (
-      <div style={{ border: 'none' }}>
-        {this.switchTypeRender()}
-      </div>
-    );
-  }
-}
diff --git a/app/packs/src/libHome/RepoSample.js b/app/packs/src/libHome/RepoSample.js
deleted file mode 100644
index 6bfd74e1d..000000000
--- a/app/packs/src/libHome/RepoSample.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Jumbotron, Panel } from 'react-bootstrap';
-import { AffiliationMap } from 'repo-review-ui';
-import ArrayUtils from '../components/utils/ArrayUtils';
-import {
-  AffiliationList,
-  AnalysesTypeJoinLabel,
-  AuthorList,
-  CommentBtn,
-  ContributorInfo,
-  ClipboardCopyBtn,
-  IconToMyDB,
-  RenderPublishAnalysesPanel,
-  SidToPubChem,
-  ToggleIndicator,
-  ElStateLabel,
-} from './RepoCommon';
-import DateInfo from '../components/chemrepo/DateInfo';
-import LicenseIcon from '../components/chemrepo/LicenseIcon';
-import MAPanel from '../components/chemrepo/MoleculeArchive';
-import PublicActions from '../components/actions/PublicActions';
-import PublicAnchor from '../components/chemrepo/PublicAnchor';
-import PublicSample from '../components/chemrepo/PublicSample';
-import PublicCommentModal from '../components/chemrepo/PublicCommentModal';
-import RepoSegment from './RepoSegment';
-import Sample from '../components/models/Sample';
-import UserCommentModal from '../components/chemrepo/UserCommentModal';
-
-const scrollView = () => {
-  const anchor = window.location.hash.split('#')[1];
-  if (anchor) {
-    const anchorElement = document.getElementById(anchor);
-    if (anchorElement) {
-      anchorElement.scrollIntoView({ block: 'start', behavior: 'auto' });
-    }
-  }
-};
-export default class RepoSample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expandSA: true,
-      expandSG: '',
-    };
-    this.panelRef = React.createRef();
-    this.materialRef = React.createRef();
-    this.handleAnalysesLink = this.handleAnalysesLink.bind(this);
-    this.handleMaterialLink = this.handleMaterialLink.bind(this);
-    this.toggleSA = this.toggleSA.bind(this);
-    this.toggleSG = this.toggleSG.bind(this);
-    this.renderAnalyses = this.renderAnalyses.bind(this);
-  }
-
-  componentDidMount() {
-    scrollView();
-  }
-
-  componentDidUpdate() {
-    scrollView();
-  }
-
-  handleAnalysesLink() {
-    this.panelRef.current.scrollIntoView({ behavior: 'smooth' });
-  }
-
-  handleMaterialLink() {
-    this.materialRef.current.scrollIntoView({ behavior: 'smooth' });
-  }
-
-  toggleSA() {
-    const { expandSA } = this.state;
-    this.setState({ expandSA: !expandSA });
-  }
-
-  toggleSG(sg) {
-    this.setState({ expandSG: sg.uuid });
-  }
-
-  updateRepoXvial(elementId) {
-    const { listType } = this.props;
-    PublicActions.displayMolecule(elementId, '', false, '', '', listType);
-    PublicActions.refreshPubElements(`Molecules=${listType}`);
-  }
-
-  renderAnalyses(analyses) {
-    const { sample } = this.props;
-    const specSample = new Sample(sample);
-    specSample.container = sample.analyses;
-    const orderAnalyses = ArrayUtils.sortArrByIndex(analyses);
-    return orderAnalyses.map((analysis) => {
-      const userInfo =
-        (sample.ana_infos && sample.ana_infos[analysis.id]) || '';
-      const kind = (analysis.extended_metadata['kind'] || '')
-        .split('|')
-        .pop()
-        .trim();
-      return (
-        <span key={`analysis_${analysis.id}`}>
-          <CommentBtn
-            {...this.props}
-            field={`Analysis_${analysis.id}`}
-            orgInfo={kind}
-            onShow={this.props.handleCommentBtn}
-          />
-          <RenderPublishAnalysesPanel
-            key={analysis.id}
-            userInfo={userInfo}
-            analysis={analysis}
-            isPublic={this.props.isPublished}
-            isLogin={this.props.isLogin}
-            isReviewer={this.props.isReviewer}
-            type="Container"
-            pageType="molecules"
-            pageId={sample.molecule_id}
-            element={specSample}
-          />
-        </span>
-      );
-    });
-  }
-
-  render() {
-    const {
-      sample,
-      pubData,
-      tagData,
-      isPublished,
-      isLogin,
-      isReviewer,
-      element,
-    } = this.props;
-    const { xvialCom } = element;
-    const { expandSA } = this.state;
-    const affiliationMap = AffiliationMap(sample.affiliation_ids);
-
-    const iupacUserDefined =
-      sample.showed_name == sample.molecule_iupac ||
-      sample.showed_name == null ? (
-        <span />
-      ) : (
-        <h5>
-          <b>Name: </b> {sample.showed_name}{' '}
-        </h5>
-      );
-    const userInfo = sample.pub_info || '';
-    const analyses =
-      (sample.analyses &&
-        sample.analyses.children &&
-        sample.analyses.children.length > 0 &&
-        sample.analyses.children[0].children) ||
-      [];
-    let embargo = null;
-    let colDoiPrefix = sample?.doi || '';
-    colDoiPrefix =
-      typeof colDoiPrefix === 'object' ? sample.doi?.full_doi : colDoiPrefix;
-    colDoiPrefix = colDoiPrefix.split('/')[0];
-    if (sample.embargo) {
-      const embargoLink = isPublished
-        ? `/inchikey/collection/${sample.embargo}`
-        : `/embargo/sample/${sample.id}`;
-      embargo = (
-        <span>
-          <b>Access to the DOI and metadata for the whole data collection: </b>{' '}
-          &nbsp;
-          <Button
-            key="embargo-link-btn"
-            bsStyle="link"
-            href={embargoLink}
-            target="_blank"
-            style={{ padding: '0px 0px' }}
-          >
-            <i className="fa fa-database" />
-            &nbsp;&nbsp;{sample.embargo}
-          </Button>
-          <ClipboardCopyBtn
-            text={`https://dx.doi.org/${colDoiPrefix}/collection/${sample.embargo}`}
-            tooltip="retrieve and copy collection DOI"
-          />
-        </span>
-      );
-    }
-
-    return (
-      <Jumbotron key={`sample-${sample.id}`}>
-        <PublicAnchor doi={sample.doi} isPublished={isPublished} />
-        <span className="repo-pub-sample-header">
-          <span className="repo-pub-title">
-            <IconToMyDB
-              isLogin={isLogin}
-              isPublished={isPublished}
-              id={sample.id}
-              type="sample"
-            />
-          </span>
-          &nbsp;
-          <span className="repo-pub-title">
-            <DateInfo
-              isPublished={isPublished}
-              preText="Sample"
-              pubData={pubData}
-              tagData={tagData}
-            />
-          </span>
-          &nbsp;
-          <SidToPubChem sid={sample.sid} />
-          &nbsp;
-          <span className="repo-public-user-comment">
-            <PublicCommentModal
-              isReviewer={isReviewer}
-              id={sample.id}
-              type="Sample"
-              title={sample.showed_name}
-              userInfo={userInfo}
-              pageType="molecules"
-              pageId={sample.molecule_id}
-            />
-            &nbsp;
-            <UserCommentModal
-              isLogin={isLogin}
-              id={sample.id}
-              type="Sample"
-              title={sample.showed_name}
-              pageType="molecules"
-              pageId={sample.molecule_id}
-            />
-            &nbsp;
-          </span>
-          {ElStateLabel(sample.embargo)}
-        </span>
-        <br />
-        {iupacUserDefined}
-        <ContributorInfo contributor={sample.contributors} />
-        <h5>
-          <b>Author{sample.author_ids.length > 1 ? 's' : ''}: </b>
-          <AuthorList
-            creators={sample.creators}
-            affiliationMap={affiliationMap}
-          />
-        </h5>
-        <AffiliationList
-          affiliations={sample.affiliations}
-          affiliationMap={affiliationMap}
-        />
-        <br />
-        <PublicSample
-          {...this.props}
-          embargo={embargo}
-          handleAnalysesLink={this.handleAnalysesLink}
-          handleMaterialLink={this.handleMaterialLink}
-        />
-        <br />
-        <div ref={this.materialRef}>
-          <MAPanel
-            isEditable={isReviewer}
-            isLogin={isLogin}
-            allowRequest
-            elementId={sample.id}
-            data={sample.xvial}
-            saveCallback={() => this.updateRepoXvial(sample.molecule_id)}
-            xvialCom={xvialCom}
-          />
-          &nbsp;
-        </div>
-        <RepoSegment segments={sample.segments} />
-        <span className="repo-pub-sample-header">
-          <div ref={this.panelRef}>
-            <ToggleIndicator
-              onClick={this.toggleSA}
-              name="Analyses"
-              indicatorStyle={expandSA ? 'down' : 'right'}
-            />
-          </div>
-          <span
-            className="label"
-            style={{ color: 'black', fontSize: 'smaller', fontWeight: 'bold' }}
-          >
-            {AnalysesTypeJoinLabel(
-              ArrayUtils.sortArrByIndex(analyses),
-              'Sample'
-            )}
-          </span>
-          <LicenseIcon
-            license={sample.license}
-            hasCoAuthors={sample.author_ids.length > 1}
-          />
-        </span>
-        <Panel
-          style={{ border: 'none' }}
-          id="collapsible-panel-sample-analyses"
-          expanded={expandSA}
-          defaultExpanded={expandSA}
-          onToggle={() => {}}
-        >
-          <Panel.Collapse>
-            <Panel.Body
-              style={{
-                fontSize: '90%',
-                backgroundColor: '#f5f5f5',
-                padding: '4',
-              }}
-            >
-              {this.renderAnalyses(analyses)}
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      </Jumbotron>
-    );
-  }
-}
-
-RepoSample.propTypes = {
-  sample: PropTypes.object.isRequired,
-  pubData: PropTypes.object.isRequired,
-  tagData: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool.isRequired,
-  canComment: PropTypes.bool,
-  handleCommentBtn: PropTypes.func,
-  isLogin: PropTypes.bool,
-  isReviewer: PropTypes.bool,
-};
-
-RepoSample.defaultProps = {
-  canComment: false,
-  isLogin: false,
-  isReviewer: false,
-  handleCommentBtn: () => {},
-};
diff --git a/app/packs/src/libHome/RepoSampleDetails.js b/app/packs/src/libHome/RepoSampleDetails.js
deleted file mode 100644
index ecc036a22..000000000
--- a/app/packs/src/libHome/RepoSampleDetails.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { Component } from 'react';
-import { Panel } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { RepoCommentModal } from 'repo-review-ui';
-import {
-  ClosePanel,
-  MoleculeInfo,
-} from './RepoCommon';
-import LoadingActions from '../components/actions/LoadingActions';
-import ReviewActions from '../components/actions/ReviewActions';
-import RepoReviewButtonBar from './RepoReviewButtonBar';
-import RepoSample from './RepoSample';
-
-export default class RepoSampleDetails extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showReviewModal: false,
-      showCommentModal: false,
-      commentField: '',
-      originInfo: '',
-    };
-    this.handleReviewBtn = this.handleReviewBtn.bind(this);
-    this.handleSubmitReview = this.handleSubmitReview.bind(this);
-    this.handleCommentBtn = this.handleCommentBtn.bind(this);
-    this.handleSubmitComment = this.handleSubmitComment.bind(this);
-  }
-
-  handleReviewBtn(showReviewModal, btnAction) {
-    ReviewActions.handleReviewModal(showReviewModal, btnAction);
-  }
-
-  handleSubmitReview(elementId, comment, action, checklist, reviewComments) {
-    LoadingActions.start();
-    ReviewActions.reviewPublish(elementId, 'sample', comment, action, checklist, reviewComments);
-    // this.setState({ showReviewModal: false });
-  }
-
-  handleCommentBtn(show, field, orgInfo) {
-    this.setState({
-      showCommentModal: show,
-      commentField: field,
-      originInfo: orgInfo
-    });
-  }
-
-  handleSubmitComment(elementId, elementType, field, comment, origInfo) {
-    LoadingActions.start();
-    const cinfo = {};
-    if (typeof (cinfo[field]) === 'undefined') {
-      cinfo[field] = {};
-    }
-    cinfo[field].comment = comment;
-    cinfo[field].origInfo = origInfo;
-    ReviewActions.updateComment(elementId, elementType, cinfo);
-    this.setState({ showCommentModal: false });
-  }
-
-  render() {
-    const {
-      element,
-      isPublished,
-      canComment,
-      review_info,
-      showComment,
-      review,
-      canClose,
-    } = this.props;
-
-    let { buttons } = this.props;
-
-
-    const history = review?.history || [];
-    if (typeof (element) === 'undefined' || !element) {
-      return <div />;
-    }
-    if (review_info?.groupleader === true && review_info?.preapproved !== true) {
-      buttons = ['Comments', 'Review', 'Approve'];
-    }
-
-    const {
-      molecule, isLogin, isReviewer, xvialCom
-    } = element;
-
-    const idyLogin = typeof isLogin === 'undefined' ? true : isLogin;
-    const idyReview = typeof isReviewer === 'undefined' ? false : isReviewer;
-    let samples = [];
-    let pubData = {};
-    let tagData = {};
-    let { sample } = element;
-    let hasXvial = false;
-    if (isPublished) {
-      samples = element.published_samples;
-      sample = samples.find(x => x !== undefined) || {};
-      sample.id = sample.sample_id;
-      hasXvial = samples.filter(s => s !== undefined && s.xvial && s.xvial !== '').length > 0;
-    } else {
-      samples.push(element.sample);
-      pubData = element.publication;
-    }
-
-    tagData = (pubData?.taggable_data) || {};
-    const details = (samples || []).map((s) => {
-      if (isPublished) {
-        pubData = {
-          id: s.pub_id
-        };
-        tagData = {
-          published_at: s.published_at,
-          doi_reg_at: s.doi_reg_at
-        };
-      }
-      const el = {
-        id: s.id || s.sample_id,
-        decoupled: s.decoupled,
-        sid: s.sid,
-        short_label: s.short_label || '',
-        xvial: s.xvial,
-        embargo: s.embargo,
-        pub_info: s.pub_info,
-        ana_infos: s.ana_infos,
-        affiliation_ids: s.affiliation_ids || tagData.affiliation_ids,
-        affiliations: s.affiliations || tagData.affiliations,
-        literatures: s.literatures || element.literatures,
-        license: s.license || tagData.license || 'CC BY-SA',
-        author_ids: s.author_ids || tagData.author_ids || [],
-        contributors: s.contributors || tagData.contributors,
-        creators: s.creators || tagData.creators,
-        doi: s.doi || element.doi,
-        reaction_ids: s.reaction_ids || [],
-        showed_name: s.showed_name,
-        molecule_iupac: molecule.iupac_name || [],
-        molecule_id: molecule.id,
-        analyses: s.analyses || element.analyses || [],
-        segments: s.segments || [],
-        boiling_point: s.boiling_point || '',
-        melting_point: s.melting_point || '',
-      };
-
-      return (
-        <RepoSample
-          key={el.id}
-          sample={el}
-          pubData={pubData}
-          tagData={tagData}
-          handleCommentBtn={this.handleCommentBtn}
-          isLogin={idyLogin}
-          isReviewer={idyReview}
-          {...this.props}
-        />
-      );
-    });
-
-    return (
-      <Panel style={{ border: 'none' }} >
-        <Panel.Body>
-          {
-            canComment ?
-              <RepoReviewButtonBar
-                element={{ id: sample.id, elementType: 'Sample' }}
-                buttonFunc={this.handleReviewBtn}
-                review_info={review_info}
-                showComment={showComment}
-                currComment={(history && history.slice(-1).pop()) || {}}
-                buttons={buttons}
-                taggData={tagData}
-              /> : ''
-          }
-          {canClose ? <ClosePanel element={sample} /> : ''}
-          <MoleculeInfo molecule={molecule} sample_svg_file={sample.sample_svg_file} hasXvial={hasXvial} xvialCom={xvialCom} />
-          <div>
-            {details}
-          </div>
-          {
-            canComment ?
-              <div>
-                <RepoCommentModal
-                  show={this.state.showCommentModal}
-                  elementId={sample.id}
-                  elementType="Sample"
-                  field={this.state.commentField}
-                  orgInfo={this.state.originInfo}
-                  review_info={review_info}
-                  review={review || {}}
-                  onUpdate={this.handleSubmitComment}
-                  onHide={() => this.setState({ showCommentModal: false })}
-                />
-              </div> : ''
-          }
-
-        </Panel.Body>
-      </Panel>
-    );
-  }
-}
-
-RepoSampleDetails.propTypes = {
-  element: PropTypes.object.isRequired,
-  isPublished: PropTypes.bool,
-  canComment: PropTypes.bool,
-  btnAction: PropTypes.string,
-  review_info: PropTypes.object,
-  showComment: PropTypes.bool,
-  review: PropTypes.object,
-  canClose: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.string),
-  onReviewUpdate: PropTypes.func,
-};
-
-RepoSampleDetails.defaultProps = {
-  isPublished: false,
-  canComment: false,
-  btnAction: '',
-  review_info: {},
-  showComment: true,
-  review: {},
-  canClose: true,
-  buttons: ['Decline', 'Comments', 'Review', 'Submit', 'Accept'],
-  onReviewUpdate: () => {},
-};
diff --git a/app/packs/src/libHome/RepoSegment.js b/app/packs/src/libHome/RepoSegment.js
deleted file mode 100644
index 6842f7aec..000000000
--- a/app/packs/src/libHome/RepoSegment.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { LayerPlain } from 'chem-generic-ui-viewer';
-import { ToggleIndicator } from './RepoCommon';
-
-const listSegment = (props) => {
-  const [toggle, setToggle] = useState(true);
-  return (
-    <span key={`_repo_sample_sg.id_${props.id}`}>
-      <ToggleIndicator onClick={() => setToggle(!toggle)} name={props.klass_label} indicatorStyle={toggle ? 'down' : 'right'} />
-      {
-        toggle ?
-          <LayerPlain
-            layers={props.properties.layers}
-            options={props.properties.select_options || {}}
-            id={props.idx}
-          /> : <div />
-      }
-    </span>
-  );
-};
-
-const RepoSegment = (props) => {
-  const { segments } = props;
-  if (segments.length < 1) return null;
-  return <div className="generic_segments_repo">{segments.map((s, idx) => listSegment({ ...s, idx }))}</div>;
-};
-
-RepoSegment.propTypes = { segments: PropTypes.oneOfType([PropTypes.array]) };
-RepoSegment.defaultProps = { segments: [] };
-
-export default RepoSegment;
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index 72638cffa..f9c70d807 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -927,10 +927,6 @@ export default class Sample extends Element {
     return this.name || this.molecule_formula || this.molecule.iupac_name;
   }
 
-  get labelText() {
-    return this.name || this.molecule_formula || this.molecule.iupac_name;
-  }
-
   set equivalent(equivalent) {
     this._equivalent = equivalent;
   }
@@ -1073,82 +1069,6 @@ export default class Sample extends Element {
     const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
     return analyses ? analyses.children : [];
   }
-
-  get solvent() {
-    try {
-      //handle the old solvent data
-      const jsonSolvent = JSON.parse(this._solvent)
-      let solv = []
-      if (jsonSolvent) {
-        solv.push(jsonSolvent)
-      }
-      return solv
-    }
-    catch (e) {}
-    return this._solvent
-  }
-
-  set solvent(solvent) {
-    this._solvent = solvent
-  }
-
-  addSolvent(newSolvent) {
-    const molecule = newSolvent.molecule
-    if (molecule) {
-      let tmpSolvents = []
-      if (this.solvent) {
-        Object.assign(tmpSolvents, this.solvent)
-      }
-      const solventData = { label: molecule.iupac_name, smiles: molecule.cano_smiles, inchikey: molecule.inchikey, ratio: 1 }
-      const filtered = tmpSolvents.find((solv) => {
-        return (solv && solv.label === solventData.label &&
-          solv.smiles === solventData.smiles &&
-          solv.inchikey && solventData.inchikey)
-      })
-      if (!filtered) {
-        tmpSolvents.push(solventData)
-      }
-      this.solvent = tmpSolvents
-    }
-  }
-
-  deleteSolvent(solventToDelete) {
-    let tmpSolvents = []
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.label === solventToDelete.label &&
-        solv.smiles === solventToDelete.smiles &&
-        solv.inchikey === solventToDelete.inchikey)
-    })
-    if (filteredIndex >= 0) {
-      tmpSolvents.splice(filteredIndex, 1);
-    }
-    this.solvent = tmpSolvents
-  }
-
-  updateSolvent(solventToUpdate) {
-    let tmpSolvents = []
-    if (this.solvent) {
-      Object.assign(tmpSolvents, this.solvent)
-    }
-
-    const filteredIndex = tmpSolvents.findIndex((solv) => {
-      return (solv.smiles === solventToUpdate.smiles &&
-        solv.inchikey && solventToUpdate.inchikey)
-    })
-    if (filteredIndex >= 0) {
-      tmpSolvents[filteredIndex] = solventToUpdate
-    }
-    this.solvent = tmpSolvents
-  }
-
-  analysisArray() {
-    const analyses = this.container.children.find(c => (c && c.container_type === 'analyses'));
-    return analyses ? analyses.children : [];
-  }
 }
 
 Sample.counter = 0;
diff --git a/app/packs/src/repo/fetchers/CollaboratorFetcher.js b/app/packs/src/repo/fetchers/CollaboratorFetcher.js
index da41f3afa..a3a417960 100644
--- a/app/packs/src/repo/fetchers/CollaboratorFetcher.js
+++ b/app/packs/src/repo/fetchers/CollaboratorFetcher.js
@@ -56,33 +56,43 @@ export default class CollaboratorFetcher {
   static deleteCollaboration(params) {
     return fetch('/api/v1/collaborators/delete', {
       credentials: 'same-origin',
-      method: 'PUT',
+      method: 'POST',
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(params)
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
   }
 
   static deleteCollaboratorAff(params) {
     return fetch('/api/v1/collaborators/delete_aff', {
       credentials: 'same-origin',
-      method: 'PUT',
-    });
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
   }
 
   static refreshOrcidAff(params) {
     return fetch('/api/v1/collaborators/refresh_orcid_aff', {
       credentials: 'same-origin',
-      headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
-    }).then(response => response.json()).then(json => json).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
-    return promise;
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    }).then(response => response.json())
+      .then(json => json)
+      .catch((errorMessage) => { console.log(errorMessage); });
   }
 
 
diff --git a/app/packs/src/repoHome/RepoNewsEditor.js b/app/packs/src/repoHome/RepoNewsEditor.js
index 77f83ea6f..cb9c3331e 100644
--- a/app/packs/src/repoHome/RepoNewsEditor.js
+++ b/app/packs/src/repoHome/RepoNewsEditor.js
@@ -233,7 +233,7 @@ export default class RepoNewsEditor extends Component {
   }
 
   coverImage() {
-    let imageUrl = '/images/chemnews.png';
+    let imageUrl = '/images/repo/news_cover.png';
     const { news } = this.state;
     if (typeof (news) !== 'undefined' && news &&
       typeof (news.cover_image) !== 'undefined' && news.cover_image) {
diff --git a/app/packs/src/repoHome/RepoNewsReader.js b/app/packs/src/repoHome/RepoNewsReader.js
index 894c44272..16ef2764d 100644
--- a/app/packs/src/repoHome/RepoNewsReader.js
+++ b/app/packs/src/repoHome/RepoNewsReader.js
@@ -31,7 +31,7 @@ export default class RepoNewsReader extends Component {
   }
 
   coverImage() {
-    let imageUrl = '/images/chemnews.png';
+    let imageUrl = '/images/repo/news_cover.png';
     const { news } = this.state;
     if (typeof (news) !== 'undefined' && news &&
       typeof (news.cover_image) !== 'undefined' && news.cover_image) {
@@ -60,7 +60,7 @@ export default class RepoNewsReader extends Component {
           <Col md={2} />
           <Col md={8} sm={12}>
             <div className="chemotion_news">
-              <img alt="Chemotion-Repository" src="/images/logo.png" style={{ width: '50px', height: 'auto', marginTop: '-10px' }} />
+              <img alt="Chemotion-Repository" src="/images/repo/Chemotion-V1.png" style={{ width: '180px', height: 'auto', marginTop: '-10px' }} />
               &nbsp;Chemotion&nbsp;News
             </div>
           </Col>
diff --git a/app/packs/src/repoHome/RepoNewsroom.js b/app/packs/src/repoHome/RepoNewsroom.js
index 69318df50..a9b69a4df 100644
--- a/app/packs/src/repoHome/RepoNewsroom.js
+++ b/app/packs/src/repoHome/RepoNewsroom.js
@@ -26,7 +26,7 @@ const renderEditRead = (article, isEditor) => {
 
 
 const mainImage = (article) => {
-  let imageUrl = '/images/chemnews.png';
+  let imageUrl = '/images/repo/news_cover.png';
   if (typeof (article) !== 'undefined' && article
    && typeof (article.cover_image) !== 'undefined' && article.cover_image) {
     imageUrl = `/newsroom/${article.cover_image}`;
diff --git a/app/packs/src/stores/alt/actions/UserActions.js b/app/packs/src/stores/alt/actions/UserActions.js
index d6caae929..a91e4709a 100644
--- a/app/packs/src/stores/alt/actions/UserActions.js
+++ b/app/packs/src/stores/alt/actions/UserActions.js
@@ -140,18 +140,6 @@ class UserActions {
     };
   }
 
-  fetchUnitsSystem() {
-    return (dispatch) => {
-      fetch('/units_system/units_system.json', {
-        credentials: 'same-origin',
-        cache: 'no-store',
-        headers: { 'cache-control': 'no-cache' }
-      }).then(response => response.json()).then(json => dispatch(json)).catch((errorMessage) => {
-        console.log(errorMessage);
-      });
-    }
-  }
-
   fetchOmniauthProviders() {
     return (dispatch) => {
       UsersFetcher.fetchOmniauthProviders()
diff --git a/app/packs/src/stores/alt/stores/ElementStore.js b/app/packs/src/stores/alt/stores/ElementStore.js
index 5975d98d4..13d977210 100644
--- a/app/packs/src/stores/alt/stores/ElementStore.js
+++ b/app/packs/src/stores/alt/stores/ElementStore.js
@@ -201,9 +201,6 @@ class ElementStore {
       handleCreatePrivateNote: ElementActions.createPrivateNote,
       handleUpdatePrivateNote: ElementActions.updatePrivateNote,
 
-      handleCreatePrivateNote: ElementActions.createPrivateNote,
-      handleUpdatePrivateNote: ElementActions.updatePrivateNote,
-
       // FIXME ElementStore listens to UIActions?
       handleUnselectCurrentElement: UIActions.deselectAllElements,
       handleSetPagination: UIActions.setPagination,
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
index ff56483de..fd25308b4 100644
--- a/app/packs/src/stores/alt/stores/UIStore.js
+++ b/app/packs/src/stores/alt/stores/UIStore.js
@@ -71,19 +71,6 @@ class UIStore {
       matrices: {}
     };
 
-    // console.log(this.state.klasses);
-    // // eslint-disable-next-line no-unused-expressions
-    // this.state.klasses && this.state.klasses.forEach((klass) => {
-    //   this.state[`${klass}`] = {
-    //     checkedAll: false,
-    //     checkedIds: List(),
-    //     uncheckedIds: List(),
-    //     currentId: null,
-    //     page: 1,
-    //     activeTab: 0,
-    //   };
-    // });
-
     this.bindListeners({
       handleInitialize: UIActions.initialize,
       handleSelectTab: UIActions.selectTab,
diff --git a/app/packs/src/utilities/routesUtils.js b/app/packs/src/utilities/routesUtils.js
index 813d37319..7df91e801 100644
--- a/app/packs/src/utilities/routesUtils.js
+++ b/app/packs/src/utilities/routesUtils.js
@@ -241,26 +241,6 @@ const genericElShowOrNew = (e, type) => {
   }
 };
 
-const genericElShowOrNew = (e, type) => {
-  const { collectionID } = e.params;
-  let itype = '';
-  if (typeof type === 'undefined' || typeof type === 'object' || type == null || type == '') {
-    const keystr = e.params && Object.keys(e.params).filter(k => k != 'collectionID' && k.includes('ID'));
-    itype = keystr && keystr[0] && keystr[0].slice(0,-2);
-  } else {
-    itype = type;
-  }
-
-  const genericElID = e.params[`${itype}ID`];
-  if (genericElID === 'new') {
-    ElementActions.generateEmptyGenericEl(collectionID, itype);
-  } else if (genericElID === 'copy') {
-    //
-  } else {
-    ElementActions.fetchGenericElById(genericElID, itype);
-  }
-};
-
 const elementShowOrNew = (e) => {
   const type = e.type;
   switch(type) {
diff --git a/app/serializers/computed_props_serializer.rb b/app/serializers/computed_props_serializer.rb
deleted file mode 100644
index 81ffc4937..000000000
--- a/app/serializers/computed_props_serializer.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class ComputedPropsSerializer < ActiveModel::Serializer
-  attributes :id, :sample_id, :status, :updated_at
-
-  def updated_at
-    object.updated_at.strftime("%m/%d/%Y %H:%M")
-  end
-end
diff --git a/app/serializers/detail_levels/element.rb b/app/serializers/detail_levels/element.rb
deleted file mode 100644
index a0150d117..000000000
--- a/app/serializers/detail_levels/element.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-class DetailLevels::Element
-    def base_attributes
-      [
-        :id, :type, :name, :properties, :created_by, :created_at, :updated_at, :container, :short_label, :can_copy, :uuid, :klass_uuid
-      ]
-    end
-
-    def level0_attributes
-      base_attributes
-    end
-
-    def level1_attributes
-      level0_attributes
-    end
-
-    def list_removed_attributes
-      [
-      ]
-    end
-  end
diff --git a/app/serializers/element_level_list_serializable.rb b/app/serializers/element_level_list_serializable.rb
deleted file mode 100644
index 00c01f401..000000000
--- a/app/serializers/element_level_list_serializable.rb
+++ /dev/null
@@ -1,17 +0,0 @@
-module ElementLevelListSerializable
-  extend ActiveSupport::Concern
-
-  included do
-    has_one :element_klass
-  end
-
-  class_methods do
-    def list_restricted_methods
-      DetailLevels::Element.new.list_removed_attributes.each do |attr|
-        define_method(attr) do
-          nil
-        end
-      end
-    end
-  end
-end
diff --git a/app/serializers/element_level_serializable.rb b/app/serializers/element_level_serializable.rb
deleted file mode 100644
index fdac2aa58..000000000
--- a/app/serializers/element_level_serializable.rb
+++ /dev/null
@@ -1,29 +0,0 @@
-module ElementLevelSerializable
-  extend ActiveSupport::Concern
-
-  included do
-    attributes *DetailLevels::Element.new.base_attributes
-    def initialize(element, nested_detail_levels)
-      original_initialize(element)
-      @nested_dl = nested_detail_levels
-    end
-
-    def type
-      'element'
-    end
-
-    def is_restricted
-      true
-    end
-  end
-
-  class_methods do
-    def define_restricted_methods_for_level(level)
-      (DetailLevels::Element.new.base_attributes - DetailLevels::Element.new.public_send("level#{level}_attributes")).each do |attr|
-        define_method(attr) do
-          '***'
-        end
-      end
-    end
-  end
-end
diff --git a/app/serializers/element_list_serializer.rb b/app/serializers/element_list_serializer.rb
deleted file mode 100644
index 3272ec250..000000000
--- a/app/serializers/element_list_serializer.rb
+++ /dev/null
@@ -1,12 +0,0 @@
-class ElementListSerializer
-end
-
-class ElementListSerializer::Level10 < ElementSerializer::Level10
-  include ElementLevelListSerializable
-  list_restricted_methods
-end
-
-class ElementListSerializer::Level0 < ElementSerializer::Level0
-  include ElementLevelListSerializable
-  list_restricted_methods
-end
diff --git a/app/serializers/element_serializer.rb b/app/serializers/element_serializer.rb
deleted file mode 100644
index 44e08e8e2..000000000
--- a/app/serializers/element_serializer.rb
+++ /dev/null
@@ -1,110 +0,0 @@
-# frozen_string_literal: true
-
-# Element Serializer
-class ElementSerializer < ActiveModel::Serializer
-  attributes *DetailLevels::Element.new.base_attributes
-
-  has_one :container, serializer: ContainerSerializer
-  has_one :element_klass
-  has_one :tag
-  has_many :segments
-
-  def created_at
-    object.created_at.strftime('%d.%m.%Y, %H:%M')
-  end
-
-  def updated_at
-    object.updated_at.strftime('%d.%m.%Y, %H:%M')
-  end
-
-  def el_type
-    object.element_klass.name
-  end
-
-  def set_table(field, field_table_objs, obj)
-    col_ids = field_table_objs.map { |x| x.values[0] }
-    col_ids.each do |col_id|
-      field['sub_values'].each do |sub_value|
-        next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-        find_obj = obj.constantize.find_by(id: sub_value[col_id]['value']['el_id'])
-        next unless find_obj.present?
-
-        case obj
-        when 'Molecule'
-          sub_value[col_id]['value']['el_svg'] = File.join('/images', 'molecules', find_obj.molecule_svg_file)
-          sub_value[col_id]['value']['el_inchikey'] = find_obj.inchikey
-          sub_value[col_id]['value']['el_smiles'] = find_obj.cano_smiles
-          sub_value[col_id]['value']['el_iupac'] = find_obj.iupac_name
-          sub_value[col_id]['value']['el_molecular_weight'] = find_obj.molecular_weight
-        when 'Sample'
-          sub_value[col_id]['value']['el_svg'] = find_obj.get_svg_path
-          sub_value[col_id]['value']['el_label'] = find_obj.short_label
-          sub_value[col_id]['value']['el_short_label'] = find_obj.short_label
-          sub_value[col_id]['value']['el_name'] = find_obj.name
-          sub_value[col_id]['value']['el_external_label'] = find_obj.external_label
-          sub_value[col_id]['value']['el_molecular_weight'] = find_obj.decoupled ? find_obj.molecular_mass : find_obj.molecule.molecular_weight
-        end
-      end
-    end
-    field
-  end
-
-  def properties
-    object.properties['layers']&.keys.each do |key|
-      # layer = object.properties[key]
-      field_sample_molecules = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'drag_sample' || ss['type'] == 'drag_molecule' }
-      field_sample_molecules.each do |field|
-        idx = object.properties['layers'][key]['fields'].index(field)
-        sid = field.dig('value', 'el_id')
-        next unless sid.present?
-
-        el = field['type'] == 'drag_sample' ? Sample.find_by(id: sid) : Molecule.find_by(id: sid)
-        next unless el.present?
-        next unless object.properties.dig('layers', key, 'fields', idx, 'value').present?
-
-        object.properties['layers'][key]['fields'][idx]['value']['el_label'] = el.short_label if field['type'] == 'drag_sample'
-        object.properties['layers'][key]['fields'][idx]['value']['el_tip'] = el.short_label if field['type'] == 'drag_sample'
-        object.properties['layers'][key]['fields'][idx]['value']['el_svg'] = field['type'] == 'drag_sample' ? el.get_svg_path : File.join('/images', 'molecules', el.molecule_svg_file)
-      end
-
-      field_tables = object.properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-      field_tables.each do |field|
-        idx = object.properties['layers'][key]['fields'].index(field)
-        next unless field['sub_values'].present? && field['sub_fields'].present?
-
-        field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-        object.properties['layers'][key]['fields'][idx] = set_table(field, field_table_molecules, 'Molecule') if field_table_molecules.present?
-
-        field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }
-        object.properties['layers'][key]['fields'][idx] = set_table(field, field_table_samples, 'Sample') if field_table_samples.present?
-      end
-    end
-    object.properties
-  end
-
-  def can_copy
-    true
-  end
-
-  def type
-    object.element_klass.name # 'genericEl' #object.type
-  end
-
-  def is_restricted
-    false
-  end
-
-  class Level0 < ActiveModel::Serializer
-    include ElementLevelSerializable
-    define_restricted_methods_for_level(0)
-  end
-end
-
-class ElementSerializer::Level10 < ElementSerializer
-  alias_method :original_initialize, :initialize
-  def initialize(element, nested_detail_levels)
-    original_initialize(element)
-    @nested_dl = nested_detail_levels
-  end
-end
diff --git a/app/serializers/molecule_guest_serializer.rb b/app/serializers/molecule_guest_serializer.rb
index 981e8430c..e847a219e 100644
--- a/app/serializers/molecule_guest_serializer.rb
+++ b/app/serializers/molecule_guest_serializer.rb
@@ -1,4 +1,4 @@
 class MoleculeGuestSerializer < ActiveModel::Serializer
   attributes :id, :iupac_name, :inchikey, :inchistring, :sum_formular,
-    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight
+    :molecule_svg_file, :molecular_weight, :cano_smiles, :tag, :exact_molecular_weight, :molfile
 end
diff --git a/db/migrate/20190211180200_add_published_at_publications.rb b/db/migrate/20190211180200_add_published_at_publications.rb
index 28cdabfba..c46517208 100644
--- a/db/migrate/20190211180200_add_published_at_publications.rb
+++ b/db/migrate/20190211180200_add_published_at_publications.rb
@@ -1,11 +1,11 @@
 class AddPublishedAtPublications < ActiveRecord::Migration[4.2]
-def change
-  add_column :publications, :published_by, :integer
-  add_column :publications, :published_at, :datetime
-  Publication.find_each do |p|
-    p.published_at = p.taggable_data['published_at'] unless p.taggable_data['published_at'].nil?
-    p.published_by = p.taggable_data['published_by']
-    p.save!
+  def change
+    add_column :publications, :published_by, :integer
+    add_column :publications, :published_at, :datetime
+    Publication.find_each do |p|
+      p.published_at = p.taggable_data['published_at'] unless p.taggable_data['published_at'].nil?
+      p.published_by = p.taggable_data['published_by']
+      p.save!
+    end
   end
 end
-end
diff --git a/db/migrate/20220920000006_embargo_accepted_collection.rb b/db/migrate/20220920000006_embargo_accepted_collection.rb
deleted file mode 100644
index f0cb33200..000000000
--- a/db/migrate/20220920000006_embargo_accepted_collection.rb
+++ /dev/null
@@ -1,27 +0,0 @@
-class EmbargoAcceptedCollection < ActiveRecord::Migration[5.2]
-  def change
-    chemotion_user = User.chemotion_user
-    reviewer_ids = User.reviewer_ids
-    embargo_accepted_collection = Collection.create(user_id: chemotion_user.id, label: 'Embargo Accepted', is_synchronized: true)
-
-    reviewer_ids.each do |uid|
-      SyncCollectionsUser.find_or_create_by(user_id: uid, shared_by_id: chemotion_user.id, collection_id: embargo_accepted_collection.id,
-        permission_level: 0, sample_detail_level: 10, reaction_detail_level: 10)
-    end
-
-    list = Publication.where(state: ['accepted'], element_type: ['Sample', 'Reaction'])
-
-    list.each do |pub|
-      element = pub.element
-      case pub.element_type
-      when 'Sample'
-        CollectionsSample
-      when 'Reaction'
-        CollectionsReaction
-      end.insert_in_collection(
-        element.id,
-        [embargo_accepted_collection.id]
-      )
-    end
-  end
-end
diff --git a/lib/analyses/converter.rb b/lib/analyses/converter.rb
deleted file mode 100644
index bcda1a419..000000000
--- a/lib/analyses/converter.rb
+++ /dev/null
@@ -1,272 +0,0 @@
-require 'net/http'
-require 'uri'
-require 'json'
-require 'date'
-
-module Analyses
-  class Converter
-    def self.logger
-      @@converter_logger ||= Logger.new(File.join(Rails.root, 'log', 'converter.log'))
-    end
-
-    def self.uri(api_name)
-      url = Rails.configuration.converter.url
-      "#{url}#{api_name}"
-    end
-
-    def self.timeout
-      Rails.configuration.try(:converter).try(:timeout) || 30
-    end
-
-    def self.extname
-      '.jdx'
-    end
-
-    def self.client_id
-      Rails.configuration.converter.profile || ''
-    end
-
-    def self.secret_key
-      Rails.configuration.converter.secret_key || ''
-    end
-
-    def self.auth
-      { username: client_id, password: secret_key }
-    end
-
-    def self.date_time
-      DateTime.now.strftime('%Q')
-    end
-
-    def self.signature(jbody)
-      md5 = Digest::MD5.new
-      md5.update jbody
-      mdhex = md5.hexdigest
-      mdall = mdhex << secret_key
-      @signature = Digest::SHA1.hexdigest mdall
-    end
-
-    def self.header(opt={})
-      opt || {}
-    end
-
-    def self.vor_conv(id)
-      conf = Rails.configuration.try(:converter).try(:url)
-      oa = Attachment.find(id)
-      folder = Rails.root.join('tmp', 'uploads', 'converter')
-      Dir.mkdir(folder) unless File.exist?(folder)
-      return nil if conf.nil? || oa.nil? || folder.nil?
-
-      {a: oa, f: folder }
-    end
-
-    def self.collect_metadata(zip_file)
-      dsr = []
-      ols = nil
-      zip_file.each do |entry|
-        next unless entry.name == 'metadata/converter.json'
-
-        metadata = entry.get_input_stream.read.force_encoding('UTF-8')
-        jdata = JSON.parse(metadata)
-
-        ols = jdata['ols']
-        matches = jdata['matches']
-        matches&.each do |match|
-          idf = match['identifier']
-          idr = match['result']
-          dsr.push(layer: idf['outputLayer'], field: idf['outputKey'], value: idr['value']) if idf&.class == Hash && idr&.class == Hash && !idf['outputLayer'].nil? && !idf['outputKey'].nil? && !idr['value'].nil?
-        end
-      end
-      { d: dsr, o: ols }
-    end
-
-    def self.handle_response(oat, response)
-      dsr = []
-      ols = nil
-      begin
-        tmp_file = Tempfile.new(encoding: 'ascii-8bit')
-        tmp_file.write(response.parsed_response)
-        tmp_file.rewind
-        name = response&.headers['content-disposition']&.split('=')&.last
-        att = Attachment.new(
-          filename: name,
-          file_path: tmp_file.path,
-          attachable_id: oat.attachable_id,
-          attachable_type: 'Container',
-          created_by: oat.created_by,
-          created_for: oat.created_for
-        )
-        att.save!
-        primary_store = Rails.configuration.storage.primary_store
-        att.update!(storage: primary_store)
-
-        Zip::File.open(tmp_file.path) do |zip_file|
-          res = Analyses::Converter.collect_metadata(zip_file) if name.split('.')&.last == 'zip'
-          ols = res[:o] unless res&.dig(:o).nil?
-          dsr.push(res[:d]) unless res&.dig(:d).nil?
-        end
-        dsr.flatten!
-        Analyses::Converter.ts('write', att.attachable_id, ols: ols, info: dsr) if dsr.length.positive? && name.split('.')&.last == 'zip'
-      rescue StandardError => e
-        raise e
-      ensure
-        tmp_file&.close
-      end
-    end
-
-    def self.process(data)
-      response = nil
-      begin
-        ofile = Rails.root.join(data[:f], data[:a].filename)
-        FileUtils.cp(data[:a].store.path, ofile)
-        File.open(ofile, 'r') do |f|
-          body = { file: f }
-
-          response = HTTParty.post(
-            uri('conversions'),
-            basic_auth: auth,
-            body: body,
-            timeout: timeout
-          )
-        end
-
-        if response.ok?
-          Analyses::Converter.handle_response(data[:a], response)
-        else
-          Analyses::Converter.logger.error ["Converter Response Error: id: [#{data[:a]&.id}], filename: [#{data[:a]&.filename}], response: #{response}"].join($INPUT_RECORD_SEPARATOR)
-        end
-        response
-      rescue StandardError => e
-        raise e
-      ensure
-        FileUtils.rm_f(ofile)
-      end
-    end
-
-    def self.jcamp_converter(id)
-      resp = nil
-      begin
-        data = Analyses::Converter.vor_conv(id)
-        return if data.nil?
-
-        resp = Analyses::Converter.process(data)
-
-        resp&.success? ? 'done' : 'failure'
-      rescue StandardError => e
-        Analyses::Converter.logger.error ["jcamp_converter fail: #{id}", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
-      ensure
-        resp&.success? ? 'done' : 'failure'
-      end
-    end
-
-    def self.generate_ds(att_id)
-      dsr_info = Analyses::Converter.fetch_dsr(att_id)
-      begin
-        return unless dsr_info && dsr_info[:info]&.length.positive?
-
-        dataset = Analyses::Converter.build_ds(att_id, dsr_info[:ols])
-        Analyses::Converter.update_ds(dataset, dsr_info[:info])
-      rescue StandardError => e
-        Analyses::Converter.logger.error ["Att ID: #{att_id}, OLS: #{dsr_info[:ols]}", "DSR: #{dsr_info[:info]}", e.message, *e.backtrace].join($INPUT_RECORD_SEPARATOR)
-      ensure
-        Analyses::Converter.clean_dsr(att_id)
-      end
-    end
-
-    def self.build_ds(att_id, ols)
-      cds = Container.find_by(id: att_id)
-      dataset = Dataset.find_by(element_type: 'Container', element_id: cds.id)
-      return dataset unless dataset.nil?
-
-      klass = DatasetKlass.find_by(ols_term_id: ols)
-      return if klass.nil?
-
-      uuid = SecureRandom.uuid
-      props = klass.properties_release
-      props['uuid'] = uuid
-      props['eln'] = Chemotion::Application.config.version
-      props['klass'] = 'Dataset'
-      Dataset.create!(
-        uuid: uuid,
-        dataset_klass_id: klass.id,
-        element_type: 'Container',
-        element_id: cds.id,
-        properties: props,
-        properties_release: klass.properties_release,
-        klass_uuid: klass.uuid
-      )
-    end
-
-    def self.update_ds(dataset, dsr)
-      layers = dataset.properties['layers'] || {}
-      new_prop = dataset.properties
-      dsr.each do |ds|
-        layer = layers[ds[:layer]]
-        fields = layer['fields'].select{ |f| f['field'] == ds[:field] }
-        fi = fields&.first
-        idx = layer['fields'].find_index(fi)
-        fi['value'] = ds[:value]
-        new_prop['layers'][ds[:layer]]['fields'][idx] = fi
-      end
-      dataset.properties = new_prop
-      dataset.save!
-    end
-
-    def self.ts(method, identifier, params = nil)
-      Rails.cache.send(method, "#{Analyses::Converter.new.class.name}#{identifier}", params)
-    end
-
-    def self.fetch_dsr(att_id)
-      Analyses::Converter.ts('read', att_id)
-    end
-
-    def self.clean_dsr(att_id)
-      Analyses::Converter.ts('delete', att_id)
-    end
-
-    def self.fetch_options
-      options = { basic_auth: auth, timeout: timeout }
-      response = HTTParty.get(uri('options'), options)
-      response.parsed_response if response.code == 200
-    end
-
-    def self.delete_profile(id)
-      options = { basic_auth: auth, timeout: timeout }
-      response = HTTParty.delete(uri('profiles') + '/' + id, options)
-      response.parsed_response if response.code == 200
-    end
-
-    def self.create_profile(data)
-      options = { basic_auth: auth, timeout: timeout, body: data.to_json, headers: { 'Content-Type' => 'application/json' } }
-      response = HTTParty.post(uri('profiles'), options)
-      response.parsed_response if response.code == 201
-    end
-
-    def self.update_profile(data)
-      options = { basic_auth: auth, timeout: timeout, body: data.to_json, headers: { 'Content-Type' => 'application/json' } }
-      response = HTTParty.put(uri('profiles') + '/' + data[:id], options)
-      response.parsed_response if response.code == 200
-    end
-
-    def self.fetch_profiles
-      options = { basic_auth: auth, timeout: timeout }
-      response = HTTParty.get(uri('profiles'), options)
-      response.parsed_response if response.code == 200
-    end
-
-    def self.create_tables(tmpfile)
-      res = {}
-      File.open(tmpfile.path, 'r') do |file|
-        body = { file: file }
-        response = HTTParty.post(
-          uri('tables'),
-          basic_auth: auth,
-          body: body,
-          timeout: timeout
-        )
-        res = response.parsed_response
-      end
-      res
-    end
-  end
-end
diff --git a/lib/export/export_collections.rb b/lib/export/export_collections.rb
index aed183057..9721dfbbe 100644
--- a/lib/export/export_collections.rb
+++ b/lib/export/export_collections.rb
@@ -175,8 +175,6 @@ def fetch_samples(collection)
         segment, @attachments = Labimotion::Export.fetch_segments(sample, @attachments, &method(:fetch_one))
         @segments += segment if segment.present?
 
-        @segments += fetch_segments(sample)
-
         # fetch containers, attachments and literature
         fetch_containers(sample)
         fetch_literals(sample)
@@ -367,33 +365,6 @@ def fetch_containers(containable)
     end
     # rubocop:enable Metrics/MethodLength
 
-    def fetch_element_klasses
-      klasses = ElementKlass.where(is_active: true, is_generic: false)
-      fetch_many(klasses, {'created_by' => 'User'})
-    end
-
-    def fetch_segment_klasses
-      klasses = SegmentKlass.where(is_active: true)
-      fetch_many(klasses, {'created_by' => 'User'})
-    end
-
-    def fetch_segments(element)
-      element_type = element.class.name
-      segments = Segment.where("element_id = ? AND element_type = ?", element.id, element_type)
-      segments.each do |segment|
-        segment = fetch_properties(segment)
-        fetch_one(segment.segment_klass.element_klass)
-        fetch_one(segment.segment_klass, {
-          'element_klass_id' => 'ElementKlass'
-        })
-        fetch_one(segment, {
-          'element_id' => segment.element_type,
-          'segment_klass_id' => 'SegmentKlass',
-          'created_by' => 'User'
-        })
-      end
-    end
-
     def fetch_literals(element)
       element_type = element.class.name
 
@@ -409,60 +380,6 @@ def fetch_literals(element)
       end
     end
 
-    def fetch_properties(instance)
-      properties = instance.properties
-      properties['layers'].keys.each do |key|
-        layer = properties['layers'][key]
-
-        # field_samples = layer['fields'].select { |ss| ss['type'] == 'drag_sample' }  -- TODO for elements
-        # field_elements = layer['fields'].select { |ss| ss['type'] == 'drag_element' }  -- TODO for elements
-
-        field_molecules = layer['fields'].select { |ss| ss['type'] == 'drag_molecule' }
-        field_molecules.each do |field|
-          idx = properties['layers'][key]['fields'].index(field)
-          id = field["value"] && field["value"]["el_id"] unless idx.nil?
-          mol = Molecule.find(id) unless id.nil?
-          properties['layers'][key]['fields'][idx]['value']['el_id'] = fetch_one(mol) unless mol.nil?
-        end
-
-        field_uploads = layer['fields'].select { |ss| ss['type'] == 'upload' }
-        field_uploads.each do |upload|
-          idx = properties['layers'][key]['fields'].index(upload)
-          files = upload["value"] && upload["value"]["files"]
-          files&.each_with_index do |fi, fdx|
-            att = Attachment.find(fi['aid'])
-            @attachments += [att]
-            properties['layers'][key]['fields'][idx]['value']['files'][fdx]['aid'] = fetch_one(att, {'attachable_id' => 'Segment'}) unless att.nil?
-          end
-        end
-
-        field_tables = properties['layers'][key]['fields'].select { |ss| ss['type'] == 'table' }
-        field_tables&.each do |field|
-          next unless field['sub_values'].present? && field['sub_fields'].present?
-          # field_table_samples = field['sub_fields'].select { |ss| ss['type'] == 'drag_sample' }  -- not available yet
-          # field_table_uploads = field['sub_fields'].select { |ss| ss['type'] == 'upload' }       -- not available yet
-          field_table_molecules = field['sub_fields'].select { |ss| ss['type'] == 'drag_molecule' }
-          if field_table_molecules.present?
-            col_ids = field_table_molecules.map { |x| x.values[0] }
-            col_ids.each do |col_id|
-              field['sub_values'].each do |sub_value|
-                next unless sub_value[col_id].present? && sub_value[col_id]['value'].present? && sub_value[col_id]['value']['el_id'].present?
-
-                svalue = sub_value[col_id]['value']
-                next unless svalue['el_id'].present? && svalue['el_inchikey'].present?
-
-                tmol = Molecule.find_by(id: svalue['el_id'])
-                sub_value[col_id]['value']['el_id'] = fetch_one(tmol) unless tmol.nil?
-              end
-            end
-          end
-        end
-
-      end
-      instance.properties = properties
-      instance
-    end
-
     def fetch_many(instances, foreign_keys = {})
       instances.each do |instance|
         fetch_one(instance, foreign_keys)
diff --git a/lib/export/export_excel.rb b/lib/export/export_excel.rb
index bf5fda771..e766e88e7 100644
--- a/lib/export/export_excel.rb
+++ b/lib/export/export_excel.rb
@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 require 'export_table'
 
 module Export
@@ -114,6 +112,7 @@ def literatures_info(ids)
       output = output.join("\n")
       output
     end
+
     def filter_with_permission_and_detail_level(sample)
       # return all data if sample/chemical in own collection
       if sample['shared_sync'] == 'f' || sample['shared_sync'] == false
diff --git a/public/images/repo/Chemotion-V1.png b/public/images/repo/Chemotion-V1.png
new file mode 100755
index 0000000000000000000000000000000000000000..16bcb88787798b8700d5197ec6d4d02aa7285d43
GIT binary patch
literal 77446
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

literal 0
HcmV?d00001

diff --git a/public/images/repo/DCIbadge.png b/public/images/repo/DCIbadge.png
new file mode 100644
index 0000000000000000000000000000000000000000..a25deb1e80ee75f2f9a4566d31db4c4771ff87cd
GIT binary patch
literal 129923
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
M07*qoM6N<$f-k}#?EnA(

literal 0
HcmV?d00001

diff --git a/public/images/repo/DataCite.png b/public/images/repo/DataCite.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5014b1fbadcc4760ccecfba1a2631d756b8af01
GIT binary patch
literal 5940
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

literal 0
HcmV?d00001

diff --git a/public/images/repo/InChITRUST.png b/public/images/repo/InChITRUST.png
new file mode 100644
index 0000000000000000000000000000000000000000..1452634272d7bd7caa5a490d37d84fb3eca25533
GIT binary patch
literal 13122
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
O08--eVs#=0LH`3W52(lh

literal 0
HcmV?d00001

diff --git a/public/images/repo/KIT.png b/public/images/repo/KIT.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe8a39d111114c351f0014a8eace9f186d4eb495
GIT binary patch
literal 5763
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
ZA<$0N;~mtgDt>Sb&`{M?sa3KL{}1md2QvTw

literal 0
HcmV?d00001

diff --git a/public/images/repo/KITStiftung.png b/public/images/repo/KITStiftung.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fb24578ffc506e45f760bf16eda3a8131ccfd5a
GIT binary patch
literal 4668
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
RW&ADTK<^o9m1#Ic{1;-FOcMYA

literal 0
HcmV?d00001

diff --git a/public/images/repo/NFDI4Chem_logo.svg b/public/images/repo/NFDI4Chem_logo.svg
new file mode 100755
index 000000000..068841a4b
--- /dev/null
+++ b/public/images/repo/NFDI4Chem_logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="381.525" height="76.434" viewBox="0 0 381.525 76.434">
+  <g id="Gruppe_469" data-name="Gruppe 469" transform="translate(12287 23417.692)">
+    <path id="Pfad_2157" data-name="Pfad 2157" d="M11,25.4l15.465-8.931V-1.387L11-10.314-4.466-1.387V16.471Z" transform="translate(-12264.942 -23386.99)" fill="#009cbd"/>
+    <path id="Pfad_2158" data-name="Pfad 2158" d="M23.51,12.22V-4.962L-9.546,14.122l0,38.243L1.414,58.7a3.716,3.716,0,0,0-.024.395,3.5,3.5,0,1,0,1.416-2.8l-9.571-5.534,0-35.04,27.5-15.88V13.824Z" transform="translate(-12277.454 -23412.73)" fill="#2b2e34"/>
+    <path id="Pfad_2159" data-name="Pfad 2159" d="M23.508,7.268,12.551.934a3.783,3.783,0,0,0,.024-.4,3.478,3.478,0,0,0-1.022-2.466,3.486,3.486,0,0,0-4.931,0A3.493,3.493,0,0,0,5.6.536,3.493,3.493,0,0,0,6.623,3,3.478,3.478,0,0,0,9.088,4.023a3.5,3.5,0,0,0,2.071-.686l9.571,5.53,0,35.04-27.5,15.88V45.809l-2.777,1.6V64.595L23.511,45.511Z" transform="translate(-12244.399 -23405.854)" fill="#2b2e34"/>
+    <path id="Pfad_2161" data-name="Pfad 2161" d="M16.823,19.68h-.166L12.7,11.7,1.144-7.991H-6.831v38.4H.046V2.737H.209L4.17,10.712l11.552,19.7H23.7v-38.4H16.823Z" transform="translate(-12190.414 -23390.686)" fill="#2b2e34"/>
+    <path id="Pfad_2162" data-name="Pfad 2162" d="M0,27.31H7.262V11.3H22.446V4.864H7.262V-4.652H24.7v-6.437H0Z" transform="translate(-12157.692 -23387.586)" fill="#2b2e34"/>
+    <path id="Pfad_2163" data-name="Pfad 2163" d="M18.488,3.423a13.834,13.834,0,0,0-5.225-3.6A18.367,18.367,0,0,0,6.469-1.39H-7.507v38.4H6.469A18.3,18.3,0,0,0,13.263,35.8a13.864,13.864,0,0,0,5.225-3.6,16.416,16.416,0,0,0,3.355-6,26.9,26.9,0,0,0,1.184-8.39,26.879,26.879,0,0,0-1.184-8.387,16.416,16.416,0,0,0-3.355-6M15.327,20.834q0,4.95-2.4,7.345a8.725,8.725,0,0,1-6.462,2.393H-.242V5.047H6.469A8.725,8.725,0,0,1,12.931,7.44q2.395,2.389,2.4,7.345Z" transform="translate(-12118.445 -23397.285)" fill="#2b2e34"/>
+    <path id="Pfad_2165" data-name="Pfad 2165" d="M12.4,4.147V-1.684H-5.036V4.147H.023V30.884H-5.036v5.831H12.4V30.884H7.288V4.147Z" transform="translate(-12084.606 -23396.992)" fill="#2b2e34"/>
+    <path id="Pfad_2166" data-name="Pfad 2166" d="M7,15.922v-4.3H-2.843V7.518L5.88-6.465h5.707V7.906h2.826v3.719H11.587v4.3ZM1,7.906H7v-9.4H6.68Z" transform="translate(-12061.081 -23371.914)" fill="#009cbd"/>
+    <path id="Pfad_2167" data-name="Pfad 2167" d="M15.22,24.786a10.373,10.373,0,0,1-6.437,1.953A10.2,10.2,0,0,1,.368,22.985q-3.028-3.75-3.026-10.873V7.752Q-2.658.579.368-3.284A10.081,10.081,0,0,1,8.783-7.148a10.312,10.312,0,0,1,6.192,1.842A11.113,11.113,0,0,1,18.8-.327l2.694-1.6a14.427,14.427,0,0,0-4.924-5.97,13.427,13.427,0,0,0-7.784-2.171q-7.152,0-11.057,5.115T-6.18,9.906q0,9.791,3.906,14.769t11.057,4.98a13.7,13.7,0,0,0,7.978-2.282,14.289,14.289,0,0,0,5.007-6.243l-2.7-1.6a11.634,11.634,0,0,1-3.851,5.253" transform="translate(-12034.075 -23389.27)" fill="#2b2e34"/>
+    <path id="Pfad_2168" data-name="Pfad 2168" d="M8.255,8.452A8.9,8.9,0,0,0,2.864,9.91,8.729,8.729,0,0,0-.052,13.567H-.215v-17H-3.352V37.28H-.215V17.473a5.679,5.679,0,0,1,.63-2.722A5.628,5.628,0,0,1,2.123,12.8a7.793,7.793,0,0,1,2.448-1.157,10.56,10.56,0,0,1,2.86-.384A6.771,6.771,0,0,1,12.8,13.349q1.839,2.093,1.842,6.382V37.28h3.134V19.18q0-5.173-2.5-7.951A8.977,8.977,0,0,0,8.255,8.452" transform="translate(-12001.311 -23397.557)" fill="#2b2e34"/>
+    <path id="Pfad_2169" data-name="Pfad 2169" d="M14.868,2.749a10.77,10.77,0,0,0-3.74-2.843,11.476,11.476,0,0,0-4.9-1.022A12.174,12.174,0,0,0,1.169-.1,10.969,10.969,0,0,0-2.709,2.818,12.982,12.982,0,0,0-5.185,7.437a20.732,20.732,0,0,0-.852,6.192,21,21,0,0,0,.852,6.216,12.965,12.965,0,0,0,2.476,4.647A10.608,10.608,0,0,0,1.2,27.38a12.642,12.642,0,0,0,5.09.99,12.239,12.239,0,0,0,6.849-1.856,10.928,10.928,0,0,0,4.152-4.976l-2.31-1.531A8.543,8.543,0,0,1,6.45,25.676,9.548,9.548,0,0,1,2.6,24.931,8.221,8.221,0,0,1-.289,22.867,9.081,9.081,0,0,1-2.1,19.706a12.369,12.369,0,0,1-.634-4.045V14.287h20.85V12.8a17.864,17.864,0,0,0-.852-5.658,13.13,13.13,0,0,0-2.393-4.391M14.7,11.866H-2.737v-.274A12.369,12.369,0,0,1-2.1,7.548,9.081,9.081,0,0,1-.289,4.386,8.365,8.365,0,0,1,2.544,2.323a8.894,8.894,0,0,1,3.688-.745,8.175,8.175,0,0,1,3.439.717,8.017,8.017,0,0,1,2.694,1.981A8.726,8.726,0,0,1,14.1,7.382a12.971,12.971,0,0,1,.6,4.045Z" transform="translate(-11969.909 -23387.988)" fill="#2b2e34"/>
+    <path id="Pfad_2170" data-name="Pfad 2170" d="M25.549,1.975A8.7,8.7,0,0,0,18.617-.8,9.25,9.25,0,0,0,12.7.929a8.573,8.573,0,0,0-2.94,4.207H9.6A8.117,8.117,0,0,0,6.241.628,9.915,9.915,0,0,0,.9-.8,10.028,10.028,0,0,0-2.15-.39,7.2,7.2,0,0,0-4.376.739a7.688,7.688,0,0,0-1.6,1.621,9.836,9.836,0,0,0-1.1,1.953h-.163V-.144h-3.137V28.022h3.137V8.219a5.921,5.921,0,0,1,.6-2.722A5.514,5.514,0,0,1-4.982,3.544,7.423,7.423,0,0,1-2.59,2.387,10.071,10.071,0,0,1,.188,2q7.043,0,7.043,8.47v17.55h3.134V8.274a5.772,5.772,0,0,1,2.23-4.7,6.835,6.835,0,0,1,2.337-1.184A9.981,9.981,0,0,1,17.737,2q7.1,0,7.1,8.47v17.55H27.97V9.926q0-5.173-2.421-7.951" transform="translate(-11933.445 -23388.301)" fill="#2b2e34"/>
+  </g>
+</svg>
diff --git a/public/images/repo/OAI.png b/public/images/repo/OAI.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f1547ede62731f0877920cf4c40f14feae3f91d
GIT binary patch
literal 4315
zcmV<15G3!3P)<h;3K|Lk000e1NJLTq0077U004{#0{{R34o?==0002MP)t-so12@+
z$jEwndpkQk(b3V1i;Ka*!GeN<dU}a#Yind=WKmI4w6wIKprCVebj8KRkdTnMxw)8_
zrb9zRTwGkfzP?OMX|S-d000xMt*uH*O9%)!q@<*mmzbxgr>Uv4l$4c+hnA|Us%2$(
zR#tQX04XCQMa<02H#b<ly~47xx<o`@9UV0l6+&8CWHmKJEG$r?qpompfx*GXhK7e<
zUueq8$`BAGJw0GnR#(o>&$zh1LPAQ^)YPb`r~m*nu2*Wp00009a7bBm000XU000XU
z0RWnu7ytkO2XskIMF-sq6$$|gyIM!o000lJNkl<Zc-rlp3wNTr7Jwra5fsGwmPe^p
zv{gszpcOm8|NpP<-U(_|tijfvxwFhV(^`tB`P`2r`vF=1BZJ&PZXh?1D}hAcGhBN%
z{ue-8H`0gy1c)6)&hj4tiOfOo{~pBFk;a_%djIbrgvmwzGRfZo61jo@MUuY+<m)7V
z3rOTDUnBX?L7eD&Nd6v>$dyK4Ah{T%_w68&EsZZHxfsOyeh?tJTqYNSSkvwmKq6c5
zt=><9OlPmPZv%06BO=Bx|K~vb?!#)4`!4sZ6VH?b7_w}7fn+{D`9A~VKfU&8_WM9&
zNh?(DCX>nCU8SID3h9_n<LiT1_4^E^!XU0~+q$m9SN9Z%DXC$*atEW*F3hWj8I_;C
zp><`D!Q*dA1wr7$Rt!~}SF2S`QzgaJ?L-j8(82;6VO0y&KriO{&-v*!LB`z|N`*jN
z5*S*cU16Uz`?M?VcBo3Gezc8uWC?KjP>q7BkVY-D%08sjuM{BG@P0vsKy+CRD;t21
z19V3+?S0)NjvOcwABqyHiqk<5n(>y`0rB(Cl!|~5san}Uv|$uB1AhP(P@az<I&nO6
zJ3wkqR4(<i@JC+Kge8cuk%O-i0U;6>27@SsVF)HtozKxys$s}z3fd0Eb<rD;?EnzZ
zE$0{rUEB}98^q85rc?mL4yqdpfT+$v?O_-=@P(!U4Zsvs)7_GwXWI_6BfA)bQ2Hz^
z6fuzc!-|T4IBI2!QPq$D^*&%jQNR)mv}<GuB|Y(z2sH+>h(T!oe(-%D<JrDAPJ!4;
zfn&rJk`l<K={a0!954l01{!q9fTEfrAT;~(WPKCJ^uA9;Ky;(RS2e@{3fOTFSPP?0
zr-h@_;f9Sq3RtRPHE;z$Kq!y?w}8}NvQz|wXbhvxF#^*ey4z_Ki)9=&{8B77S{)bm
zR&szSVO6n3Kxp=L`E`)-Y(c3Ah*OQl!7+#)wE&`4%jHU?QYMpuuen^URxUPx#W4|O
zUOhIHBoIn}pI5IlApRqzLLgq1Sw~pq7<Q)tV!&yGN}+NA6T<-*WML?vUq>X#Aas=<
ze+gvpK*c~%9$Xx-rveO^H_Z27l8th1u|Sww8By3yOtOVQD7~Lv4r0~csTc^_2XIt1
zLy|omqybY+^scat$}BjFOPEj;R}6$c3@!z+x(g}>qN^JYMJ6^V)d`FkWx-I2Exuor
zT`>^)T(>R)8RxT948%4#2ivNnRuwy+>?k{p97kb70rfInF%X*RjxPZ5O-jW;+@KwE
z1fJdkt!kY)sC3Gu1)zXXIy#U@L=c2#KQVc7auuYaAYkY*hXZQ$xj6QP5|aeBAPA+W
z*Txed%Lgh7q8s}hLPy|6t;GCSxdkMWDGWmI{WKuf@STc+xH2df_+2CLkfR|ObZC`x
z;J;!LMHdF4uLE(APu%V?h^~P^fJ5=b<q?yV78{xD?ENeVeOQWuSWnMX7z8XGIOYcU
zD_HM}DFQ*A4M~T{yMxww5c)C{1F`DoId&krTB)Fc$l$MFPH93~u}naUj_kSOAoL|^
zK{*BykjD<hHA7S^DIlF<uGUHwn{ye-0!VC6)>D8aE{#VZBJ$XQ*b*ED=V&0sTB#VN
z8#Y=ztS9A$Zjv-0^!e#5h#1Ef#L?PY#j15ug1C$%lR-1_>@*-ClQSUa{nZ|bD~HVU
zI-ppkMwE8g;OKw^mCMmnfgF?UgAB#wu?4ZE5KbTxc&u6}wLmZ)=@xNi1RqR@n+oKJ
zWDjKcLeqf|wOVBYfe$vlK)~mb4pS}=39-|G9Flwl83=R4Ag-s*H7<}$E?FRYU}(si
z9Q<)TSba)pC9OEZT~$Rv==<;li2q8{g2)(mR+vD_i5N<OM^D?Kl8EAXpj=!esX^$=
zG7)6#(X=3TpsMJya0{5ES&p_10$189Nep)r=DEOe>26vO`Z7oWvGS|bAiAQeYz@g}
zN(q|fY{RE)XbB{4fGZF>t_Dv9&C`I;SN{man)PXV5Xpc;IvVUEAvdbWfi4!whJOVk
zLAzuW2|BK#%RsbLAlconegpE9iX#Rgl7XjNJccKjh*H^vPqjFHEg#=xDvk>RU4U*~
z07A3gcpqf>OfLeFq=0Ewf{ExM4|HL`4u_#?2_o^hiGgml7>Jq<gk~SdA3^F3dJ%{s
zDO|G_$NNROU8(Ru7e=y8Q&uFyJ5Hw<0qPd|Ee>L&1KFPAImkV|1jKa|B`|f=@x`&N
z8x?lol4OtQHpZ_#Svd~C>#Bl@9rRlf2T{_2(9H4!$Sb`}B7q{q!4OO&bFBR;KRC+7
zZZ(P+zqW~d4B|3XLchfiGwDIH^$#H3=Zhplf<Sg~MN0yS_r)YCmTNf{@{Nd-aGS9)
z5(a|aBOS<t{{h6RmoAcsESq?u$}CC=62Su(a=<JXJopnG8@oG?jbsPnr2=^$9J$}@
zB_N*8Y&~J8CBeR!9k??6RW_Sl^*8psZzENeZ*el0f%NO&vLGS|v-O09U533PTkZN;
zoK-g4FD0Dmofu>hgGlK>`ZMcWwkWdcaFARp!5?XSU%cXz%C0gAAab0K&RhhN&07hZ
z#>Z@G5Yu$*Qy`Ifuq0%Yjw})bDP9P2KTh1n-)AoYX)usRQj%A}DfYJ@NoPnE6YFe~
zQjS3aagc{;^1&(vNxY5swh}2O?$JNaDVroUySkCc1t1@H@%u;J>3up7*W21i^0~^{
z*~lu1BQo1t8{r>C3f0;>R~-Z&rVr^r$OfcTJ`wQgU|k6~-%N70L27TkRwE_I^YF89
z(DETANW6}e;$3)BE~JdBdh&_ht`;^RvA~4ak;53>VSsMgNCAS@jw?HYwCoF_C^CjA
z`N|%90#T6X!^}HLo8sAzYk4L?ONCXtp}XnhS{m*vaj&&85z)O?>8OH$tS=(jL>e90
z;k(~j(bg{zNIQ&ozopm}7(%<>OxF^~kBE?LV!yDq>#Z7dTP{f}5?jNJ1Uru`HfxN~
zHvV_l63SRDUxYzyG!ky@EkaU)C~%_JViVcyCq+((iIpjdImG3wC<y8nTh7o(ymZRt
z6e_4$%tW?}i~vY-g-vo+cls&_f_@7p(#Lp?W2W(3n0#c;7e9#YGITzQa-sl&T$E=2
zkVABMV2bJ1E`uiEu_Sh;m)P5LEmsue{X`+hse%Dtv|vCtJ??;WMcWHJaRX^{fv{Xx
zIT8hVSz0MeI6mLif5@{tJVLj?B!{eslCZK5v=EH_?gVl!_ItWS=(D1ll~Cn_?Qy?_
zR^shdF`SVH&(342Ck~gM2l=FE>$5Var;Jc7itgZwhUwXcZc2NVC8rh;V^fC1a$P&c
zIs@`qmFA~~XHUO{s)NWzB$)e`RO#G$LNMFFv-9{)P%KxZgkv?ktX@mJ6woFck$?*h
z4E3OvEU7xU!pm1MD28!(5s>H43pCFaXL=$PbT;ngGyO%b*04Rr(5mWbOOfZ5xcrfo
zuhd{~^MT_u$jk7H<+8~pe^AqC+nBUs=~*nm(%=A_C>1x*;v#1(8#Gzj#~#N?kaM+}
z=L?vVOKc9SOl=l8-IA!)uuwg6V5U)sQ&?D48*_AQ0g(RrT7Q9(^5yI5eBCdeX*VPu
zR*!~-cAHgk!8yf+ONQ3owDz!M11lSZqy9ceawWD%dAv}Of4+ad65DO<NLck~6;XD*
zNq4(;3@mb%9ajE$$dLrH@<jTrgxW5w?tAuZZM@6Ogw@Dk2N>2_v%Z&)ok?xh5XOs~
z8)zSg90?$TEhK`CFoXNm`L>G<3D#VCGN2#}Z{p!CN+D~<kQ5Ak7i*YXch7;W9_ruQ
znl#>T=}B&c!EJCKNwB0BQD9BM_PsD<ElP9VR3dxCZIo-^s*gDiL4H4qwuy>2iw!?E
zS)J(U;dZiMb=EfFts<-^N#z|%*c#&zy9MF^cXgy!hajuhx^QD<iuOG}|9-Z|s)HNh
zJ}Xr$wp`wZt0-}6Ucg#oT<lyZCyL_$Bvn^ss)owpwzubW*INq@Cuk`-?73h~JdWp?
zp65826m2!Isif$h;P?QtxUZ+_b4}Oc>d#)z_aUNw_4~Xhfi>}TSc`Y3gGo`Ks1>7A
z7(0;F%Pd_Jb=s!mxLNn}&d?TH=6O>>+?2#Rlxj8R2N=eQePs+%d>o{lSn4+L@e}G-
zHj_J3{mwgh7I9A!9~c9+PfKG9(s{gk_cZUzf6a<?Pj}E9a;02}GnBDY%y!++Fc^re
z)PJC#oj>ql))4DwccV@`whu%&^Nvu{h8I1-;<9HxSc80Yo$+S^7(WMsDAxgbYc_ut
z<hvg5ayXhdkQ>Mi<OXsBxq;k3ZXh?18^{gh267(6xxyg-0SJudRmMdeUwD@3wMcqD
z1L9A|Ujli169TcO{#8NhSjgmI5HL?XS^70<Hd!WT)Ewa#m}jN3ohe-M@%sdGJQKY9
z=Htt^Cck%5nXvmSl{>ucu2N}E3RO-0)$0v)H`41@1F;@s*V0802eVS6CT4O9e$y`$
z+A!C*LSYMn51(T*<PV^GYrgTv(Y-bC4S4;I-9KUPfmf5}A53S>djo>Ke8a1OJVnvt
zaEekHtn>P;=POdXr)hVi(OYw(X<FE8jx=o)bNKkYLY#10YvZpc%}~?+j7EP(P5gmh
z$NS&dk9V5()@-Z4M*gVR)op)WznW@Upj8->^?`?h^kn5%Pcnu8(wpF8<_f)$VXy!j
zjDn%fjXAssjj-n%#$<#yz_5A-zGpOt>+Jr}P<xgNKlOe|T^~SZx}7>|ngV1RMf_9B
zN6|WO%fqf`)_eGDIc3lrz!&(>SMY(*INlUx2v^>Ey}4oxC3rR1{!WR<yvOdJD9Qx>
zP2pC|1<lq=d}3(czaj{)etu*iwoXW3_1M!DhrOX`_PX%GG~>y_tI^m5QoL-M#<aKl
zooVK~-ELrZdp^6CH@k+JhhM1p#JbsfJ<NlR=+?DtMCbo+0Gh4yu34`S;73B3Q4R@N
zTLC^aFHV=i>)8xY*XtR{n>f1xAzh}T@q1=)amwx=;`=t2Vm$`2Pp<`12P5IeJ_V3`
zOs99Ju(s579jr%(!T<a~kH=sw>C#e1XDZ{pgV}V=e!}bPDZ76R_c{0(<@I0+E68*<
zUeBUv{3Gsn1Hv8`Szp&}8|4D8IY`&G2h-`mwn2Dy9yM{W_6d8Y<aCX1ShMR>em~sJ
zgq6p{Lw^0pk`MXoEr=Fh5Qog*<G;hm>L@KX|5za`R6o>}D6;U@F{r%19^-?w;XC&l
zczw$6hi`uDMgYL7d+gf}ZBZ^8f?E%NYF*F${@vpSas#>2_#Y30@7-N>Y@+}G002ov
JPDHLkV1lSj_T~Tp

literal 0
HcmV?d00001

diff --git a/public/images/repo/Repository_logo.png b/public/images/repo/Repository_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1a0dc52e2ee17e2892f6dbd1ea97646ab533894
GIT binary patch
literal 4527
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
N002ovPDHLkV1lt<ohJYQ

literal 0
HcmV?d00001

diff --git a/public/images/repo/chemotion_full.svg b/public/images/repo/chemotion_full.svg
new file mode 100644
index 000000000..f3688acb4
--- /dev/null
+++ b/public/images/repo/chemotion_full.svg
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="104.2972"
+   height="60.946018"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   inkscape:export-filename="C:\Users\domin_000.ACL-LUETJOHANN\Desktop\bitmap.png"
+   inkscape:export-xdpi="45"
+   inkscape:export-ydpi="45"
+   sodipodi:docname="chemotion.svg">
+  <defs
+     id="defs2987">
+    <linearGradient
+       id="linearGradient4131"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#8d00ab;stop-opacity:1;"
+         offset="0"
+         id="stop4133" />
+    </linearGradient>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3391">
+      <path
+         d="m 400.937,355.84 33.154,0 0,-38.933 -33.154,0 0,38.933 z"
+         id="path3393"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3375">
+      <path
+         d="m 377.1,379.684 73.072,0 0,-86.619 -73.072,0 0,86.619 z"
+         id="path3377"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.71"
+     inkscape:cx="-3.5834737"
+     inkscape:cy="35.81165"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="990"
+     inkscape:window-x="1909"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(-1.8302984,-1.6011797)">
+    <path
+       sodipodi:type="arc"
+       style="fill:#ffffff;fill-opacity:1"
+       id="path3907"
+       sodipodi:cx="32.166019"
+       sodipodi:cy="31.963684"
+       sodipodi:rx="30.479897"
+       sodipodi:ry="30.479897"
+       d="m 62.645916,31.963684 c 0,16.833582 -13.646315,30.479897 -30.479897,30.479897 -16.833582,0 -30.4798961,-13.646315 -30.4798961,-30.479897 0,-16.833582 13.6463141,-30.4798965 30.4798961,-30.4798965 16.833582,0 30.479897,13.6463145 30.479897,30.4798965 z"
+       transform="matrix(0.99361702,0,0,0.99361702,0.39986754,0.39857604)" />
+    <g
+       transform="matrix(0.48708105,0,0,-0.48708105,-172.38274,195.91579)"
+       style="display:inline"
+       id="g3371">
+      <g
+         id="g3373" />
+      <g
+         id="g3379">
+        <g
+           style="opacity:0.89999402"
+           id="g3381"
+           clip-path="url(#clipPath3375)">
+          <g
+             id="g3383"
+             transform="translate(420.3984,300.5264)">
+            <path
+               inkscape:connector-curvature="0"
+               id="path3385"
+               style="fill:#2495cf;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 0,0 c -19.759,0 -35.843,16.083 -35.843,35.852 0,19.77 16.084,35.854 35.843,35.854 9.178,0 17.826,-3.427 24.499,-9.669 l 5.274,5.272 C 21.699,74.957 11.174,79.157 0,79.157 c -23.874,0 -43.299,-19.426 -43.299,-43.307 0,-23.881 19.425,-43.311 43.299,-43.311 11.178,0 21.699,4.197 29.768,11.847 L 24.486,9.659 C 17.83,3.422 9.18,0 0,0" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g
+       transform="matrix(0.48708105,0,0,-0.48708105,-172.38274,195.91579)"
+       style="display:inline"
+       id="g3387">
+      <g
+         id="g3389" />
+      <g
+         id="g3395">
+        <g
+           style="opacity:0.89999402"
+           id="g3397"
+           clip-path="url(#clipPath3391)">
+          <g
+             id="g3399"
+             transform="translate(431.0391,325.5942)">
+            <path
+               inkscape:connector-curvature="0"
+               id="path3401"
+               style="fill:#ee474e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 0,0 c -2.73,-2.697 -6.49,-4.375 -10.641,-4.375 -8.363,0 -15.142,6.785 -15.142,15.157 0,8.367 6.779,15.151 15.142,15.151 4.151,0 7.911,-1.671 10.641,-4.375 l 3.052,3.053 c -3.525,3.483 -8.36,5.635 -13.693,5.635 -10.742,0 -19.462,-8.717 -19.462,-19.464 0,-10.751 8.72,-19.47 19.462,-19.47 5.333,0 10.168,2.159 13.693,5.645 L 0,0 z" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g
+       style="display:inline"
+       transform="matrix(0.48708105,0,0,-0.48708105,32.385366,17.032881)"
+       id="g3403">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3405"
+         style="fill:#d8e037;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 0,0 c -8.555,0 -16.306,-3.486 -21.896,-9.117 l 4.843,-4.839 c 4.348,4.386 10.384,7.114 17.053,7.114 13.288,0 24.046,-10.757 24.046,-24.036 0,-13.276 -10.758,-24.041 -24.046,-24.041 -6.669,0 -12.705,2.726 -17.053,7.121 l -4.843,-4.838 c 5.594,-5.633 13.341,-9.121 21.896,-9.121 17.064,0 30.885,13.825 30.885,30.879 C 30.885,-13.821 17.064,0 0,0" />
+    </g>
+    <path
+       d="m 32.303585,58.476661 c -14.582232,0 -26.4027147,-11.821458 -26.4027147,-26.402716 0,-14.581745 11.8204827,-26.4022287 26.4027147,-26.4022287 14.582234,0 26.403204,11.8204837 26.403204,26.4022287 0,14.581258 -11.82097,26.402716 -26.403204,26.402716 m 9.39e-4,-56.8754813 c -16.830111,0 -30.4742256,13.6431413 -30.4742256,30.4727653 0,16.830599 13.6441146,30.473252 30.4742256,30.473252 16.829625,0 30.472279,-13.642653 30.472279,-30.473252 0,-16.829624 -13.642654,-30.4727653 -30.472279,-30.4727653"
+       style="fill:#4f5659;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"
+       id="path3449"
+       inkscape:connector-curvature="0" />
+    <text
+       xml:space="preserve"
+       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ff5555;fill-opacity:1;stroke:none;font-family:Arial;-inkscape-font-specification:Arial Bold"
+       x="41.36187"
+       y="37.003342"
+       id="text3039"
+       sodipodi:linespacing="100%"><tspan
+         sodipodi:role="line"
+         id="tspan3041"
+         x="41.36187"
+         y="37.003342">hemotion</tspan></text>
+  </g>
+</svg>
diff --git a/public/images/repo/dfg_logo.png b/public/images/repo/dfg_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c76cd0967ad16a87617e62afafde5e82df854dca
GIT binary patch
literal 6100
zcmV;_7c1zAP)<h;3K|Lk000e1NJLTq00B(^001ip1^@s6{3_Zv00009a7bBm000XU
z000XU0RWnu7ytkYPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z000dCNkl<Zc-rh;?RDZh6MlBj{$Jk;;#3e)K}-d)D~O>1paP%*NCO5cFsT5if;bhd
zw}RKVg8TlM5td~c@CU>YJ?C&X3$moq$D^6iSo#5j^TP{z0D1sy0KfTf9by3g^54n+
z6Aly8h>hCc0kA_j{9ziypecUA3;sKE84-XKz$btR;V`N-;J*TOCz%)609*i1{O_r7
zO7cs&9X}BcXJ;T4-55x?%=tx0+Y4;7NEmdRG|vw~1TKIn6TtT3lksvI&8Q+#o&t;W
zbOFrHRQol6jnrok0DJ&0ykLTGxV}L9jR7nG7>&^2Ta%`a0DJ&GykN=XnO-?r+5lFi
zn&NffuVe*8l3QU1U;!_PF0ja1W=a|u(maeY00&;szgprX?Pz+F6FwZq@B)vCa|&Rf
zSuFgVwki{=7g!+wZCvPIB4km9NOvb`?ASj?zxz@fr(9O5l;wi_#`^kXc{_U-M41Nd
z1-_J5auH42;41L519c#6h6eq$5$1}`$=lVCNc)TnS~QW~2fHJl_}@S90=Lk&`i-vz
zf8=z6fOq@nXk6?#?Gt|%xjeJFtN=Vq_3<_Rwd3EP0j%H!VM)J=yhOSWLl*{JAx$x9
z!Yd?9|C@}Hx10u-5m^G@9^tSL;GW5KQHz*q({0ZG|G}S#wZ|TSKEh$2%le1QlIvn|
znnzCe56Dj|!v!FIf8_F9)|iECGw#;`=k>@Mc8|4B14Ejffy1V*A<XW|-IK`20x;Q|
z$n@_VfGwHVZ6Gs|Gm=du(_EPCULi80=!1PlIE-`Vd$wo`ynv!S)>1xeCg~SL83sQ)
zR-b9-&2%F6@2YVKqI!@_cNx)s0c;O~ygo`ay=MUFiJ@%U5>o9+TB{A<UGr>&>)z-y
zXbHan^jp&u$&ufLP%PGB)-BX$vNz${BTO5#A<`BiWC86llah^m5PTOV>Rk!R{CD<}
z!(jq1=!1NWD|o?_O=p=T;}i2bmaZo)-cv&l271!08f<=;001wTgZz`dn)!@cBF(r(
z*)mPI`KC|8X6*LlhymJMc|rT}pH&vbSfh1%2V`uMI3ob}tZ6Pl8;2gk;r2}OE<t`=
z0|Tw5c`nUhSCcqt$Fyr9NX77)I+)jbqld_0o7=FstUJPn*rdrcI|sT@qALAd)e;DY
zYk0vHz#m>jwoK4|OJgQhh}yuQfb;k?Y4A=OYBpU%Q!Q`M_!Y=Yzd@C~p%b(AB_Mo$
z;}bMQfc%bfzD{k8oyJxoJ^v<I0d0)icu&Fx1{cvZ<q6{j3G%_lRkV<8$J(mN&gtX|
zf}@`}+y)?js>^*Bfp(_ToaXBVG067^WbPCPfUPVJ5tGn6Kj(t{ljUYTnc<PLfJW>R
z81wj;OLd6=jJYnaoX)}N8$@|)fZR(vc)^_WcbND$C-_AT3~4q(RMVt=>X>P6p}vnc
zLO5Jr!B}u0zbQj~w>dyMeI}QwqUEg%3kIbNnbg2qtFAq_tl6$40!vYh{oE>=ug7V|
ziuOB~$oF(th!+evKe^5+vUl?hzA=8BnQUe?&8CQhn46q()Njo%)$F9D{!RPG$j>UQ
ziE<xj7Q1=)s5^Oq677~>w922)r%M}ag;||bqhT6kq?wsyRY@&6anRKx8*waK{XEtH
z{x)<m%(xC?)Opi|CiuM>W(EegWuDh{pm$w+@>|G5EGX8EwvmB>K}GyDO>kEHHBDe(
zU`W%Tig|8eU~qHhxj`35v-+l4-vnSA7#L0S*3dIeU|?WK^E)D~`J82%&cMK!=a<m5
zl8&`gT=Tg*GsIeihzT`riSIrRh*#Q<oy}jX5|<qab8gbCOB%OAn$DFBLZ`GJx^-iy
z5Ayq(+bX|yyvzVhzwjP;5i{LyIp2`yYy^6h_)AE$E@`weQQJFDlP>p4Q2jl68(z@6
zg11S^ULKg^d{+h=7<A2waX{xpEHxUaBQ(!nXRJi8fqDMfigwtp8Mno;Q+@OpLA}MX
zn^>dxZgpa2lYvHwnBCxFY9FvFLx}^<s%b77JR5beQ8zV7(}x#quD}oX*Z2wz436VG
zq)8W#)i=$%XwK68+)+)rLcZHQzUt9JN47m9f0m_s|G2|#wB&`;W|Jr8-(HkeeXe<4
zPLn`AZHdgKsbtB#X-q1g`)#c;!+gkhqEp%g6eS^_&cD$f=~t}dJ8L0s?pVBI@@5+k
z;=Iw67iX(b_hQ-@bWvQQ$gIkda=M7?Gb((q@8=h({qq;ni9XKGX0TYHSaaW(KU+4A
z^!+EN(aGCmdF*}Lshc;{-)^CeMY?P}i2aurmQToH@B5E@xk=rSqdRzkqxsC>1%J@&
zz3(m`zx7)4ISX_?<Lqh=x6SSXw~-w}EUuoAWpa4J?vNeaY)J>NIQ)D9^<Zb3C?ZV)
z-F@o>k#|-PFHkL;7wFGGwYh$_l6HjbD&TkieO0*3jm`rV<;Pr4@$6I~mc#Or*|(60
z*OtC}(a5~uNgwkZ`%q5v*U8c2MSHCIeka{9s`fLa_E*z6Iaz5DnDTQAsqb8V)|T?0
zaXL|t6vacT<*_E(*jF|sZI;JY<a7&`9@Q<$wQ<(37U(ESAzzRGZ-Fil6n~3!4|O$7
zALqM~aou5G&bEQJDYT<0=ON#C_<*n9X}{C#qQ|@mCi;7ca5zy&ZpB*0Oe62Tq*cv$
zf;?)EkE60ztg#KGG?Nl*#8W2O7|m`AaFM@`L?{4LWlRd<l4W}Z@S)`Q%oDXtUZ4AX
zjc_=S$}C<FO>NiXc3Jax8!nSBn#;?PZDx4E5_CPtBG-S}_nFU~`oPb%1Ks&0o<Fu*
z?XbMDQb%7JA5V~vek``jtWXESK(qMCn>M1qM#%4aZ&~hCO1Fc!i;U{pmlnB+q<srH
zc0B+4K=*>%=N$`i(P4o4!S3oxEj}*3J`i4LdGbfBz9S~8iL!{SLH_4aNngtC^!rHp
zBW~Bh33vU>wbn_q`_@y<btIddMoQY2&1PbnbKMjdd+SJ_K9?*C^OCgcUF`ARB~X-O
zsc3;Qe?QTDZ!3L}<l2GKk*RvzN?PYkar!$({!nr2gmDm^a5YS-Iox|wP(H$;?u^%W
zG<aLDOYfd1$e+gDRc$ljlf6US7S<ZqNGzEwWqtF`6UtT=Jk?kB#@gT?*36d5V0L)2
zq$l)2d<OYX$<r>84Je*ywc&-ROkPVXFO4r%ap(b9YZir6Lqc%_`Fa2nO*#Kczefk2
z|Endp;y9SHRybGuwmp{Tt)>2w{hE%{e~oU2=!&M9LcNEk+r+uWb%YUB0qvgWKdENo
zlnq|HF!}TUj{rP!`YDr%tB}ZN$J^+Tb`n*T_m~24iY3sti%gJ<TF$h^xidp{_45i|
z@FDq2t;&RWoG=&cURbfl{)Bq>mUW6WQ_zV$@l{a_t&q1yoOLJKscjasU#QRh9x7T*
z*Izr0kGNc_%3GyP*PM^;(<Y(=<-{$`oh{#JFoD?6$(#OmE9H>ic+75$dxXPB?vF;B
z&0lSvC#+${S4kIi4|mL~SP!?0gjeaA=C=n)vpTiiB6vZcH2{YvY6SAnwY3nXC6mu-
z*bZf8>O)0&6X@=1&+c4G3TF8E<7gvX^4<P$xP%v^`}srd1RiVa7D^Ci_@JVHy_1?|
z3UYWqUVZE$X%mmgZce;KYyk8M<|Ua`e$4@%YRa%`-dUx?C)e4Q>T99NRm?P269A)}
zW<>4a){qw{zA&MCDP#-4ErbWP4+_aq!>rEF1*%5vHr&)x`z=+*fZHUyOKX}j50>@S
z_%EyYYAB3jjC?@zIk3fLUvXTrOe>za5zDub7Qkbs(gNfcjgW<3VXv`~);<Dl5<DP_
ziLHCz_?pWIIcx^V2d>w}0OaTU;E<Z%yl_N0E%vy)5r>{l;RSb~O%xF?sLDD=7V|hq
zw(I?jvH<n^{XF7+wxxc40{Og~FKAv6GC9Y}7>Y||747#dg=SS*1bi;@RqBVTV?bC1
zE&%Hn&il$@$}4^hiup@w<`LC=?$X4WvI#q5a(Us2)I>uN+RZ0Uy#=(MS(Y4>i_FUf
z^7ou?Q4AAH4)oVZdRDk*<g}s;SJDPjWV@+ld5bZUN_9?h_m^jKdR&K8Y2&iV5|x<R
zBgy=m^F(wi$r}#)tXYfAiIm%51v!qFWD#w%(2R{^a-8-(_4A{qpA+OmqjddHHip!)
zEk%Y16dRc;vQ7(i$Xpqx^%pI~Hur-oEv6F`H@AvoD8nm19|Goxt;-=ZH=Gj)j0QmW
zV^$6Fnx&6$_)o)pECByQF}T~HBQSRaT}}&)6jC&}9m2HOMBlcMn=fhc28J{Z46dFa
z$Dq(C;W7~BpM|Pt6VU5<Z<4v`u-Ul1`VCS;ng#|25?thWy<^mmHJ1H*DQGihZko8e
a`2PSvc!@1Oe;%j+0000<MNUMnLSTZ5F0Uv6

literal 0
HcmV?d00001

diff --git a/public/images/repo/dfg_logo_schriftzug_blau_foerderung_en.jpg b/public/images/repo/dfg_logo_schriftzug_blau_foerderung_en.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..42c516f1f80dfb3168c31e1d4ab419bac7ebad86
GIT binary patch
literal 76589
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
PpK-__+mTfNeE<IdM9Qds

literal 0
HcmV?d00001

diff --git a/public/images/repo/github-mark.svg b/public/images/repo/github-mark.svg
new file mode 100644
index 000000000..37fa923df
--- /dev/null
+++ b/public/images/repo/github-mark.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/public/images/repo/molecule-archive-logo-weiss.svg b/public/images/repo/molecule-archive-logo-weiss.svg
new file mode 100755
index 000000000..e04a15804
--- /dev/null
+++ b/public/images/repo/molecule-archive-logo-weiss.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Ebene_1" data-name="Ebene 1" viewBox="0 0 273.97 267.48"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M86.87,85A33.4,33.4,0,0,1,99.29,76.2a41.71,41.71,0,0,1,16.13-3,39.12,39.12,0,0,1,17.4,3.8A30.81,30.81,0,0,1,145.31,88a37.4,37.4,0,0,1,14.11-11,44.47,44.47,0,0,1,18.66-3.88q17.05,0,27.11,10t10.05,30.15v52H188.89v-48q0-10.8-4.47-16.13T171.66,96q-9.28,0-14.69,6t-5.41,17.82v45.6H125.21v-48Q125.21,96,108,96q-9.12,0-14.53,6c-3.6,4-6.59,7.24-6.59,7.24"></path><circle class="cls-1" cx="63.43" cy="108.31" r="4.47"></circle><circle class="cls-1" cx="77.4" cy="108.31" r="4.47"></circle><circle class="cls-1" cx="63.43" cy="121.49" r="4.47"></circle><circle class="cls-1" cx="77.4" cy="121.49" r="4.47"></circle><circle class="cls-1" cx="63.64" cy="134.66" r="4.47"></circle><circle class="cls-1" cx="77.61" cy="134.66" r="4.47"></circle><circle class="cls-1" cx="63.43" cy="147.83" r="4.47"></circle><circle class="cls-1" cx="77.4" cy="147.83" r="4.47"></circle><circle class="cls-1" cx="63.43" cy="161.01" r="4.47"></circle><circle class="cls-1" cx="77.4" cy="161.01" r="4.47"></circle><circle class="cls-1" cx="63.19" cy="95.31" r="4.47"></circle><circle class="cls-1" cx="77.17" cy="95.31" r="4.47"></circle><circle class="cls-1" cx="63.33" cy="82.17" r="4.47"></circle><circle class="cls-1" cx="77.3" cy="82.17" r="4.47"></circle><path class="cls-1" d="M61.22,183.14l.07,1.14a3.94,3.94,0,0,1,3.16-1.35,3,3,0,0,1,3,1.69,3.91,3.91,0,0,1,3.37-1.69,3.41,3.41,0,0,1,2.7,1,4.36,4.36,0,0,1,.91,3v7.22H72V187a2.22,2.22,0,0,0-.46-1.53A2,2,0,0,0,70,185a2.09,2.09,0,0,0-1.38.46,2.37,2.37,0,0,0-.74,1.18v7.53H65.44v-7.23a1.77,1.77,0,0,0-2-1.94,2.18,2.18,0,0,0-2.1,1.21v8H58.89v-11Z"></path><path class="cls-1" d="M76.52,188.53a6.55,6.55,0,0,1,.64-2.91,4.71,4.71,0,0,1,1.8-2,5.1,5.1,0,0,1,2.66-.7,4.78,4.78,0,0,1,3.61,1.44,5.66,5.66,0,0,1,1.5,3.79v.58a6.47,6.47,0,0,1-.63,2.9,4.51,4.51,0,0,1-1.78,2,5.09,5.09,0,0,1-2.69.7,4.76,4.76,0,0,1-3.72-1.54,6,6,0,0,1-1.4-4.13Zm2.47.21a4.42,4.42,0,0,0,.7,2.66,2.3,2.3,0,0,0,2,.95,2.24,2.24,0,0,0,1.94-1,4.83,4.83,0,0,0,.7-2.85,4.35,4.35,0,0,0-.72-2.64,2.41,2.41,0,0,0-3.86,0A4.84,4.84,0,0,0,79,188.74Z"></path><path class="cls-1" d="M91.45,194.12H89V178.53h2.47Z"></path><path class="cls-1" d="M99,194.32a5.12,5.12,0,0,1-3.8-1.47,5.38,5.38,0,0,1-1.46-3.94v-.3a6.62,6.62,0,0,1,.63-2.94,4.86,4.86,0,0,1,1.79-2,4.6,4.6,0,0,1,2.55-.73,4.29,4.29,0,0,1,3.47,1.44,6,6,0,0,1,1.22,4v1H96.2a3.23,3.23,0,0,0,.91,2.15,2.71,2.71,0,0,0,2,.79,3.32,3.32,0,0,0,2.76-1.37l1.33,1.27a4.43,4.43,0,0,1-1.76,1.53A5.53,5.53,0,0,1,99,194.32Zm-.3-9.41a2.11,2.11,0,0,0-1.64.71,3.73,3.73,0,0,0-.79,2h4.7v-.18a3.07,3.07,0,0,0-.66-1.87A2.05,2.05,0,0,0,98.67,184.91Z"></path><path class="cls-1" d="M109.8,192.35a2.19,2.19,0,0,0,1.53-.53,1.82,1.82,0,0,0,.65-1.33h2.33a3.64,3.64,0,0,1-.64,1.91,4.24,4.24,0,0,1-1.63,1.41,4.88,4.88,0,0,1-2.21.51,4.65,4.65,0,0,1-3.65-1.49,5.91,5.91,0,0,1-1.35-4.12v-.25a5.8,5.8,0,0,1,1.34-4,4.65,4.65,0,0,1,3.65-1.51,4.51,4.51,0,0,1,3.19,1.15,4.06,4.06,0,0,1,1.3,3H112a2.26,2.26,0,0,0-.64-1.56,2.1,2.1,0,0,0-1.54-.61,2.18,2.18,0,0,0-1.85.87,4.49,4.49,0,0,0-.66,2.64v.39a4.53,4.53,0,0,0,.65,2.67A2.17,2.17,0,0,0,109.8,192.35Z"></path><path class="cls-1" d="M122.82,193a3.79,3.79,0,0,1-3.08,1.28,3.42,3.42,0,0,1-2.71-1,4.48,4.48,0,0,1-.92-3v-7.11h2.47v7.08c0,1.4.58,2.09,1.74,2.09a2.45,2.45,0,0,0,2.42-1.28v-7.89h2.47v11h-2.33Z"></path><path class="cls-1" d="M130.35,194.12h-2.47V178.53h2.47Z"></path><path class="cls-1" d="M137.87,194.32a5.12,5.12,0,0,1-3.8-1.47,5.38,5.38,0,0,1-1.46-3.94v-.3a6.62,6.62,0,0,1,.63-2.94,4.86,4.86,0,0,1,1.79-2,4.6,4.6,0,0,1,2.55-.73,4.31,4.31,0,0,1,3.47,1.44,6,6,0,0,1,1.22,4v1H135.1a3.23,3.23,0,0,0,.91,2.15,2.7,2.7,0,0,0,2,.79,3.32,3.32,0,0,0,2.76-1.37l1.33,1.27a4.43,4.43,0,0,1-1.76,1.53A5.53,5.53,0,0,1,137.87,194.32Zm-.3-9.41a2.11,2.11,0,0,0-1.64.71,3.73,3.73,0,0,0-.79,2h4.7v-.18a3.07,3.07,0,0,0-.66-1.87A2.05,2.05,0,0,0,137.57,184.91Z"></path><path class="cls-1" d="M155.93,194.12a4,4,0,0,1-.29-1,4.16,4.16,0,0,1-5.58.28,3,3,0,0,1-1-2.34,3.11,3.11,0,0,1,1.3-2.69,6.29,6.29,0,0,1,3.73-.94h1.51v-.72a1.94,1.94,0,0,0-.47-1.36,1.89,1.89,0,0,0-1.46-.52,2.18,2.18,0,0,0-1.38.42,1.29,1.29,0,0,0-.53,1.07h-2.47a2.75,2.75,0,0,1,.6-1.69,4,4,0,0,1,1.63-1.23,5.65,5.65,0,0,1,2.3-.45,4.63,4.63,0,0,1,3.07,1,3.46,3.46,0,0,1,1.18,2.73v5a5.77,5.77,0,0,0,.41,2.37v.17Zm-2.71-1.78a2.77,2.77,0,0,0,1.37-.35,2.36,2.36,0,0,0,1-1V189h-1.33a3.62,3.62,0,0,0-2.06.48,1.55,1.55,0,0,0-.69,1.35,1.44,1.44,0,0,0,.47,1.13A1.85,1.85,0,0,0,153.22,192.34Z"></path><path class="cls-1" d="M166.36,185.39a6.53,6.53,0,0,0-1-.08,2.27,2.27,0,0,0-2.29,1.3v7.51h-2.46v-11H163l.06,1.23a2.78,2.78,0,0,1,2.48-1.44,2.19,2.19,0,0,1,.87.15Z"></path><path class="cls-1" d="M172.24,192.35a2.19,2.19,0,0,0,1.53-.53,1.82,1.82,0,0,0,.65-1.33h2.33a3.64,3.64,0,0,1-.64,1.91,4.24,4.24,0,0,1-1.63,1.41,4.88,4.88,0,0,1-2.21.51,4.65,4.65,0,0,1-3.65-1.49,5.91,5.91,0,0,1-1.35-4.12v-.25a5.8,5.8,0,0,1,1.34-4,4.65,4.65,0,0,1,3.65-1.51,4.51,4.51,0,0,1,3.19,1.15,4.06,4.06,0,0,1,1.3,3h-2.33a2.26,2.26,0,0,0-.64-1.56,2.1,2.1,0,0,0-1.54-.61,2.18,2.18,0,0,0-1.85.87,4.49,4.49,0,0,0-.66,2.64v.39a4.53,4.53,0,0,0,.65,2.67A2.17,2.17,0,0,0,172.24,192.35Z"></path><path class="cls-1" d="M181,184.33a3.88,3.88,0,0,1,3.06-1.4q3.51,0,3.56,4v7.18h-2.47V187a2.14,2.14,0,0,0-.49-1.6,2,2,0,0,0-1.45-.48,2.38,2.38,0,0,0-2.21,1.32v7.85h-2.47V178.53H181Z"></path><path class="cls-1" d="M190.16,180.28a1.31,1.31,0,0,1,.36-.94,1.36,1.36,0,0,1,1-.38,1.37,1.37,0,0,1,1,.38,1.28,1.28,0,0,1,.37.94,1.23,1.23,0,0,1-.37.93,1.37,1.37,0,0,1-1,.37,1.35,1.35,0,0,1-1-.37A1.26,1.26,0,0,1,190.16,180.28Zm2.62,13.84h-2.47v-11h2.47Z"></path><path class="cls-1" d="M199.33,191l2.33-7.85h2.55l-3.81,11h-2.14l-3.84-11H197Z"></path><path class="cls-1" d="M210.45,194.32a5.12,5.12,0,0,1-3.8-1.47,5.38,5.38,0,0,1-1.46-3.94v-.3a6.48,6.48,0,0,1,.64-2.94,4.77,4.77,0,0,1,1.78-2,4.63,4.63,0,0,1,2.56-.73,4.28,4.28,0,0,1,3.46,1.44,6,6,0,0,1,1.23,4v1h-7.18a3.28,3.28,0,0,0,.91,2.15,2.71,2.71,0,0,0,2,.79,3.32,3.32,0,0,0,2.76-1.37l1.33,1.27a4.36,4.36,0,0,1-1.76,1.53A5.53,5.53,0,0,1,210.45,194.32Zm-.29-9.41a2.08,2.08,0,0,0-1.64.71,3.66,3.66,0,0,0-.8,2h4.7v-.18a3,3,0,0,0-.66-1.87A2,2,0,0,0,210.16,184.91Z"></path></svg>
\ No newline at end of file
diff --git a/public/images/repo/news_cover.png b/public/images/repo/news_cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae20d6e91edc82958dd3a020a16d64ce3f1d22c3
GIT binary patch
literal 153477
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

literal 0
HcmV?d00001

diff --git a/public/images/repo/pubchem.jpg b/public/images/repo/pubchem.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..97d6330247c4a4e5f9da75848424403d48acaa64
GIT binary patch
literal 7495
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

literal 0
HcmV?d00001

diff --git a/public/images/repo/re3data.png b/public/images/repo/re3data.png
new file mode 100644
index 0000000000000000000000000000000000000000..d473fce1cc3831681fab11867d87dd5d94759f76
GIT binary patch
literal 20099
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
KMNUMnLSTYTNuHMg

literal 0
HcmV?d00001

diff --git a/public/images/repo/ri_logo.png b/public/images/repo/ri_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbbedb5de71c6dde3e30861c7eca5286c1a94088
GIT binary patch
literal 14079
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
Js$W}#{tw7+JvjgX

literal 0
HcmV?d00001

diff --git a/public/welcome-message-sample.md b/public/welcome-message-sample.md
index 770234f1f..4ef9c48f4 100644
--- a/public/welcome-message-sample.md
+++ b/public/welcome-message-sample.md
@@ -8,10 +8,6 @@
 ##### Chemotion-ELN is an electronic lab notebook that allows you to document your research. To help you get started with the ELN, we have summarised important links and information here.
 
 * Subscribe to our [Mailing List](#link goes here) to receive all updates on the Chemotion-ELN instance.
-<<<<<<< HEAD
 * Visit our documentation and user manual [Chemotion Docs](https://chemotion.net/docs) to inform yourself about ELN functions and features.
-=======
-* Visit our documentation and user manual [Chemotionsaurus](https://eln.chemotion.net/chemotionsaurus/docs/eln/videos_eln) to inform yourself about ELN functions and features.
->>>>>>> Repo update (#45)
 * If you face any issue with the ELN or have any queries, please contact our [Helpdesk](https://helpdesk.nfdi4chem.de/).
 * You can report bugs or raise wishes for new features by adding a new issue to our [Github Repository](https://github.com/ComPlat/chemotion_ELN).
diff --git a/spec/api/collection_api_spec.rb b/spec/api/collection_api_spec.rb
index e6c58f380..da480131f 100644
--- a/spec/api/collection_api_spec.rb
+++ b/spec/api/collection_api_spec.rb
@@ -761,7 +761,6 @@
 
         it 'responds with 401 status code' do
           status = post '/api/v1/collections/imports', params: file_upload
-<<<<<<< HEAD
           expect(response.status).to eq(401)
         end
       end
@@ -802,8 +801,6 @@
 
         it 'with a valid collection id, but without existing metadata' do
           post '/api/v1/collections/%s/metadata' % c1.id, params: post_params
-=======
->>>>>>> Repo update (#45)
           expect(response.status).to eq(401)
         end
       end
diff --git a/spec/api/inbox_api_spec.rb b/spec/api/inbox_api_spec.rb
index e162e5706..a9c202371 100644
--- a/spec/api/inbox_api_spec.rb
+++ b/spec/api/inbox_api_spec.rb
@@ -27,11 +27,7 @@
 
         before { get "/api/v1/inbox/samples?search_string=#{search_string}" }
 
-<<<<<<< HEAD
         it 'return fitting samples' do
-=======
-        it 'return fitting samples' do 
->>>>>>> Repo update (#45)
           expect(JSON.parse(response.body)['samples'].size).to eq(2)
         end
       end
@@ -50,17 +46,12 @@
           before { post "/api/v1/inbox/samples/#{sample_2.id}", params: params, as: :json }
 
           it 'return moved samples' do
-<<<<<<< HEAD
-=======
-            puts response.body
->>>>>>> Repo update (#45)
             expect(JSON.parse(response.body)['container']['container_type']).to eq('dataset')
             expect(JSON.parse(response.body)['container']['attachments'].count).to eq(1)
           end
         end
       end
     end
-<<<<<<< HEAD
 
     describe 'GET /api/v1/inbox' do
       context 'when fetching the inbox' do
@@ -106,7 +97,5 @@
         end
       end
     end
-=======
->>>>>>> Repo update (#45)
   end
 end
diff --git a/spec/api/literature_api_spec.rb b/spec/api/literature_api_spec.rb
index 44976dcd4..bc9336374 100644
--- a/spec/api/literature_api_spec.rb
+++ b/spec/api/literature_api_spec.rb
@@ -52,17 +52,9 @@
     end
   end
 
-<<<<<<< HEAD
   describe 'POST /api/v1/literatures' do
     context 'with valid parameters' do
       before { post '/api/v1/literatures', params: params }
-=======
-    describe 'GET /api/v1/literatures' do
-      context 'with valid parameters' do
-        before do
-          get '/api/v1/literatures', params: { element_id: r1.id, element_type: 'reaction' }
-        end
->>>>>>> Repo update (#45)
 
       it 'responds 201' do
         expect(response).to have_http_status :created
@@ -79,7 +71,6 @@
     end
   end
 
-<<<<<<< HEAD
   describe 'DELETE /api/v1/literatures' do
     let!(:element_id) { -1 }
     let(:params) do
@@ -89,11 +80,6 @@
         id: literal.id,
       }
     end
-=======
-    describe 'POST /api/v1/literatures' do
-      context 'with valid parameters' do
-        before { post '/api/v1/literatures', params: params }
->>>>>>> Repo update (#45)
 
     context 'with valid parameter' do
       let!(:literal)    { create(:literal, literature: l1, element: r1, user: user) }
diff --git a/spec/api/private_note_api.spec.rb b/spec/api/private_note_api.spec.rb
index 4bcda516f..1e9a62f23 100644
--- a/spec/api/private_note_api.spec.rb
+++ b/spec/api/private_note_api.spec.rb
@@ -2,7 +2,6 @@
 
 require 'rails_helper'
 
-<<<<<<< HEAD
 RSpec.shared_examples 'an unauthorized response' do
   it 'returns 401 status code' do
     expect(response).to have_http_status(:unauthorized)
@@ -21,26 +20,11 @@
   let!(:research_plan) { create(:research_plan, collections: [unauthorized_user_collection]) }
 
   context 'unauthorized user, ' do
-=======
-describe Chemotion::PrivateNoteAPI do
-  let!(:unauthorized_user) { create(:person) }
-  let!(:author_user) { create(:person) }
-  let!(:c) { create(:collection, user: unauthorized_user, is_shared: false) }
-  let!(:c2) { create(:collection, user: author_user, is_shared: false) }
-  let!(:r) { create(:reaction, collections: [c]) }
-  let!(:s) { create(:sample, collections: [c]) }
-  let!(:sc) { create(:screen, collections: [c]) }
-  let!(:w) { create(:wellplate, collections: [c]) }
-  let!(:rp) { create(:research_plan, collections: [c]) }
-
-  context "unauthorized user, " do
->>>>>>> Repo update (#45)
     before do
       allow_any_instance_of(WardenAuthentication).to receive(:current_user).and_return(unauthorized_user)
     end
 
     describe 'GET /api/v1/private_notes/:id' do
-<<<<<<< HEAD
       let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
 
       before do
@@ -48,37 +32,18 @@
       end
 
       it_behaves_like 'an unauthorized response'
-=======
-      let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-
-      before do
-        get "/api/v1/private_notes/#{note_1.id}"
-      end
-
-      it 'returns 401 status code' do
-        expect(response.status).to eq 401
-      end
->>>>>>> Repo update (#45)
     end
 
     describe 'PUT /api/v1/private_notes/:id' do
       context 'update with only content' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'test note',
-=======
-        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -92,28 +57,10 @@
             content: 'test note',
             noteable_id: sample.id,
             noteable_type: 'Sample',
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-
-      context 'with sample' do
-        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note',
-            noteable_id: s.id,
-            noteable_type: 'Sample'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -127,28 +74,10 @@
             content: 'test note reaction',
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-
-      context 'with reaction' do
-        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note q',
-            noteable_id: r.id,
-            noteable_type: 'Reaction'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -162,28 +91,10 @@
             content: 'test note screen',
             noteable_id: screen.id,
             noteable_type: 'Screen',
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-
-      context 'with screen' do
-        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note screen',
-            noteable_id: sc.id,
-            noteable_type: 'Screen'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -197,28 +108,10 @@
             content: 'test note wellplate',
             noteable_id: wellplate.id,
             noteable_type: 'Wellplate',
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-  
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-
-      context 'with wellplate' do
-        let(:note_1) { create(:private_note, noteable: sc, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note wellplate',
-            noteable_id: w.id,
-            noteable_type: 'Wellplate'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -232,28 +125,10 @@
             content: 'test note research plan',
             noteable_id: research_plan.id,
             noteable_type: 'ResearchPlan',
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-    
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-
-      context 'with research plan' do
-        let(:note_1) { create(:private_note, noteable: w, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'test note research plan',
-            noteable_id: rp.id,
-            noteable_type: 'ResearchPlan'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -269,27 +144,6 @@
       end
 
       it_behaves_like 'an unauthorized response'
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-      
-        it 'returns 401 status code' do
-          expect(response.status).to eq 401
-        end
-      end
-    end
-    
-    describe 'DELETE /api/v1/private_notes/:id' do
-      let(:note_1) { create(:private_note, content: 'test', noteable: r, user_id: author_user.id) }
-
-      before do
-        delete "/api/v1/private_notes/#{note_1.id}"
-      end
-
-      it 'returns 401 status code' do
-        expect(response.status).to eq 401
-      end
->>>>>>> Repo update (#45)
     end
   end
 
@@ -299,17 +153,10 @@
     end
 
     describe 'GET /api/v1/private_notes/:id' do
-<<<<<<< HEAD
       let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
 
       before do
         get "/api/v1/private_notes/#{note1.id}"
-=======
-      let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-
-      before do
-        get "/api/v1/private_notes/#{note_1.id}"
->>>>>>> Repo update (#45)
       end
 
       it 'api run success' do
@@ -318,7 +165,6 @@
 
       it 'returned data' do
         n = JSON.parse(response.body)['note'].symbolize_keys
-<<<<<<< HEAD
         expect(n[:id]).to eq(note1.id)
       end
     end
@@ -329,18 +175,6 @@
 
         before do
           post '/api/v1/private_notes', params: params
-=======
-        expect(n[:id]).to eq(note_1.id)
-      end
-    end
-
-    describe 'POST /api/v1/private_notes/create' do
-      context 'with content' do
-        let(:params) { { content: 'test note', noteable_id: r.id, noteable_type: 'Reaction' } }
-
-        before do
-          post "/api/v1/private_notes/create", params: params
->>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note (on unaccessible element)' do
@@ -353,22 +187,13 @@
         let(:params) do
           {
             content: 'test note sample',
-<<<<<<< HEAD
             noteable_id: sample.id,
             noteable_type: 'Sample',
-=======
-            noteable_id: s.id,
-            noteable_type: 'Sample'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
-=======
-          post "/api/v1/private_notes/create", params: params
->>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -379,11 +204,7 @@
         it 'is valid in sample' do
           note = PrivateNote.find_by(content: 'test note sample')
           s1 = Sample.find_by(id: note.noteable_id)
-<<<<<<< HEAD
           expect(s1.id).to eq(sample.id)
-=======
-          expect(s1.id).to eq(s.id)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -391,22 +212,13 @@
         let(:params) do
           {
             content: 'test note reaction',
-<<<<<<< HEAD
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
-=======
-            noteable_id: r.id,
-            noteable_type: 'Reaction'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
-=======
-          post "/api/v1/private_notes/create", params: params
->>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -417,11 +229,7 @@
         it 'is valid in reaction' do
           note = PrivateNote.find_by(content: 'test note reaction')
           r1 = Reaction.find(note.noteable_id)
-<<<<<<< HEAD
           expect(r1.id).to eq(reaction.id)
-=======
-          expect(r1.id).to eq(r.id)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -429,22 +237,13 @@
         let(:params) do
           {
             content: 'test note screen',
-<<<<<<< HEAD
             noteable_id: screen.id,
             noteable_type: 'Screen',
-=======
-            noteable_id: sc.id,
-            noteable_type: 'Screen'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
-=======
-          post "/api/v1/private_notes/create", params: params
->>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -455,11 +254,7 @@
         it 'is valid in screen' do
           note = PrivateNote.find_by(content: 'test note screen')
           sc1 = Screen.find(note.noteable_id)
-<<<<<<< HEAD
           expect(sc1.id).to eq(screen.id)
-=======
-          expect(sc1.id).to eq(sc.id)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -467,22 +262,13 @@
         let(:params) do
           {
             content: 'test note wellplate',
-<<<<<<< HEAD
             noteable_id: wellplate.id,
             noteable_type: 'Wellplate',
-=======
-            noteable_id: w.id,
-            noteable_type: 'Wellplate'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
-=======
-          post "/api/v1/private_notes/create", params: params
->>>>>>> Repo update (#45)
         end
 
         it 'is able to create a new note' do
@@ -493,11 +279,7 @@
         it 'is valid in wellplate' do
           note = PrivateNote.find_by(content: 'test note wellplate')
           w1 = Wellplate.find(note.noteable_id)
-<<<<<<< HEAD
           expect(w1.id).to eq(wellplate.id)
-=======
-          expect(w1.id).to eq(w.id)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -505,26 +287,15 @@
         let(:params) do
           {
             content: 'test note research plan',
-<<<<<<< HEAD
             noteable_id: research_plan.id,
             noteable_type: 'ResearchPlan',
-=======
-            noteable_id: rp.id,
-            noteable_type: 'ResearchPlan'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           post '/api/v1/private_notes', params: params
         end
 
-=======
-          post "/api/v1/private_notes/create", params: params
-        end
-  
->>>>>>> Repo update (#45)
         it 'is able to create a new note' do
           note = PrivateNote.find_by(content: 'test note research plan')
           expect(note).not_to be_nil
@@ -533,71 +304,41 @@
         it 'is valid in research plan' do
           note = PrivateNote.find_by(content: 'test note research plan')
           rp1 = ResearchPlan.find(note.noteable_id)
-<<<<<<< HEAD
           expect(rp1.id).to eq(research_plan.id)
-=======
-          expect(rp1.id).to eq(rp.id)
->>>>>>> Repo update (#45)
         end
       end
     end
 
     describe 'PUT /api/v1/private_notes/:id' do
       context 'with only content' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note',
-=======
-        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
         it "is able to update note's content" do
           note = PrivateNote.find(note1.id)
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
->>>>>>> Repo update (#45)
           expect(note.content).to eq('update test note')
         end
       end
 
       context 'with sample' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: reaction, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note sample',
             noteable_id: sample.id,
             noteable_type: 'Sample',
-=======
-        let(:note_1) { create(:private_note, noteable: r, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note sample',
-            # noteable: s
-            noteable_id: s.id,
-            noteable_type: 'Sample'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -605,38 +346,20 @@
           note = PrivateNote.find(note1.id)
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note sample', sample.id, 'Sample'])
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
-          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note sample', s.id, 'Sample'])
->>>>>>> Repo update (#45)
         end
       end
 
       context 'with reaction' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: sample, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note reaction',
             noteable_id: reaction.id,
             noteable_type: 'Reaction',
-=======
-        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note reaction',
-            noteable_id: r.id,
-            noteable_type: 'Reaction'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -645,39 +368,20 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note reaction', reaction.id, 'Reaction'])
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
-          puts "note:: #{note}"
-          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note reaction', r.id, 'Reaction'])
->>>>>>> Repo update (#45)
         end
       end
 
       context 'with screen' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: sample, user_id: author_user.id) }
         let(:params) do
           {
             content: 'update test note screen',
             noteable_id: screen.id,
             noteable_type: 'Screen',
-=======
-        let(:note_1) { create(:private_note, noteable: s, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note screen',
-            noteable_id: sc.id,
-            noteable_type: 'Screen'
->>>>>>> Repo update (#45)
           }
         end
 
         before do
-<<<<<<< HEAD
           put "/api/v1/private_notes/#{note1.id}", params: params
         end
 
@@ -686,20 +390,10 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note screen', screen.id, 'Screen'])
-=======
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
-          puts "note:: #{note}"
-          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note screen', sc.id, 'Screen'])
->>>>>>> Repo update (#45)
         end
       end
 
       context 'with wellplate' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: screen, user_id: author_user.id) }
         let(:params) do
           {
@@ -718,30 +412,10 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note wellplate', wellplate.id, 'Wellplate'])
-=======
-        let(:note_1) { create(:private_note, noteable: sc, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note wellplate',
-            noteable_id: w.id,
-            noteable_type: 'Wellplate'
-          }
-        end
-  
-        before do
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-  
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
-          puts "note:: #{note}"
-          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note wellplate', w.id, 'Wellplate'])
->>>>>>> Repo update (#45)
         end
       end
 
       context 'with research plan' do
-<<<<<<< HEAD
         let(:note1) { create(:private_note, noteable: wellplate, user_id: author_user.id) }
         let(:params) do
           {
@@ -760,31 +434,11 @@
           puts "note:: #{note}"
           expect([note.content, note.noteable_id,
                   note.noteable_type]).to eq(['update test note research plan', research_plan.id, 'ResearchPlan'])
-=======
-        let(:note_1) { create(:private_note, noteable: w, user_id: author_user.id) }
-        let(:params) do
-          {
-            content: 'update test note research plan',
-            noteable_id: rp.id,
-            noteable_type: 'ResearchPlan'
-          }
-        end
-  
-        before do
-          put "/api/v1/private_notes/#{note_1.id}", params: params
-        end
-  
-        it "is able to update note's content" do
-          note = PrivateNote.find(note_1.id)
-          puts "note:: #{note}"
-          expect([note.content, note.noteable_id, note.noteable_type]).to eq(['update test note research plan', rp.id, 'ResearchPlan'])
->>>>>>> Repo update (#45)
         end
       end
     end
 
     describe 'DELETE /api/v1/private_notes/:id' do
-<<<<<<< HEAD
       let(:note1) do
         create(:private_note, content: 'test', noteable: reaction, user_id: author_user.id)
       end
@@ -794,17 +448,6 @@
       end
 
       it 'is able to delete private note' do
-=======
-      let(:note_1) do
-        create(:private_note, content: 'test', noteable: r, user_id: author_user.id)
-      end
-
-      before do
-        delete "/api/v1/private_notes/#{note_1.id}"
-      end
-
-      it "is able to delete private note" do
->>>>>>> Repo update (#45)
         note = PrivateNote.find_by(content: 'test')
         expect(note).to be_nil
       end
diff --git a/spec/api/report_api_spec.rb b/spec/api/report_api_spec.rb
index fe06a1999..c82c00732 100644
--- a/spec/api/report_api_spec.rb
+++ b/spec/api/report_api_spec.rb
@@ -48,10 +48,7 @@
     describe 'GET /api/v1/reports/docx' do
       before do
         params = { id: r1.id.to_s }
-<<<<<<< HEAD
 
-=======
->>>>>>> Repo update (#45)
         get '/api/v1/reports/docx', params: params
       end
 
@@ -78,10 +75,7 @@
           checkedAll: false
         }
       end
-<<<<<<< HEAD
 
-=======
->>>>>>> Repo update (#45)
       let(:params) do
         {
           exportType: 2,
@@ -100,13 +94,9 @@
             analyses: [],
             molecule: %w[cano_smiles],
             reaction: %w[name short_label],
-<<<<<<< HEAD
             sample: %w[name external_label real_amount_value real_amount_unit created_at],
             sample_analyses: [],
             wellplate: []
-=======
-            sample: %w[name external_label real_amount_value real_amount_unit created_at]
->>>>>>> Repo update (#45)
           }
         }
       end
@@ -124,30 +114,19 @@
           post(
             '/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
-<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
-=======
-            headers: { 'CONTENT_TYPE' => 'application/json' }
->>>>>>> Repo update (#45)
           )
         end
 
         it 'returns correct sdf' do
-<<<<<<< HEAD
 
-=======
->>>>>>> Repo update (#45)
           expect(response['Content-Type']).to eq('chemical/x-mdl-sdfile')
           expect(response['Content-Disposition']).to include('.sdf')
           msdf = IO.read(Rails.root.join('spec', 'fixtures', 'mof_v2000_1.sdf'))
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
-<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
-=======
-          expect(sdf).to eq(msdf)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -157,11 +136,7 @@
           post(
             '/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
-<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
-=======
-            headers: { 'CONTENT_TYPE' => 'application/json' }
->>>>>>> Repo update (#45)
           )
         end
 
@@ -172,11 +147,7 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
-<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
-=======
-          expect(sdf).to eq(msdf)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -185,11 +156,7 @@
           params[:uiState][:sample][:checkedIds] = [sample_3.id]
           post('/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
-<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
-=======
-            headers: { 'CONTENT_TYPE' => 'application/json' }
->>>>>>> Repo update (#45)
           )
         end
 
@@ -200,11 +167,7 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
-<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
-=======
-          expect(sdf).to eq(msdf)
->>>>>>> Repo update (#45)
         end
       end
 
@@ -213,11 +176,7 @@
           params[:uiState][:sample][:checkedIds] = [sample_4.id]
           post('/api/v1/reports/export_samples_from_selections',
             params: params.to_json,
-<<<<<<< HEAD
             headers: { 'CONTENT-TYPE' => 'application/json' }
-=======
-            headers: { 'CONTENT_TYPE' => 'application/json' }
->>>>>>> Repo update (#45)
           )
         end
 
@@ -228,11 +187,7 @@
           sdf = response.body
           sdf = sdf.gsub(/<CREATED_AT>.+?</ms, '<')
           msdf = msdf.gsub(/<CREATED_AT>.+?</ms, '<')
-<<<<<<< HEAD
           expect(sdf.squish).to eq(msdf.squish)
-=======
-          expect(sdf).to eq(msdf)
->>>>>>> Repo update (#45)
         end
       end
     end
@@ -281,17 +236,10 @@
         }
         post(
            '/api/v1/reports/export_samples_from_selections',
-<<<<<<< HEAD
            params: params, as: :json,
            headers: {
              'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
              'CONTENT-TYPE' => 'application/json'
-=======
-           params: params.to_json, 
-           headers: {
-             'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-             'CONTENT_TYPE' => 'application/json'
->>>>>>> Repo update (#45)
            }
         )
       end
@@ -398,11 +346,7 @@
           params: params.to_json,
           headers: {
             'HTTP_ACCEPT' => 'text/plain, text/csv',
-<<<<<<< HEAD
             'CONTENT-TYPE' => 'application/json'
-=======
-            'CONTENT_TYPE' => 'application/json'
->>>>>>> Repo update (#45)
           }
         )
         expect(response['Content-Type']).to eq('text/csv')
@@ -545,7 +489,6 @@
           ],
           imgFormat: 'png',
           fileName: fileName,
-<<<<<<< HEAD
           molSerials: [
             { mol: { id: 1, svgPath: "1a.svg", sumFormula: "C6H6", iupacName: "benzene" }, value: "1a" }
           ],
@@ -571,57 +514,20 @@
               kind: "GCMS"
             }
           ],
-=======
-          molSerials: "[{\"mol\":{\"id\":1, \"svgPath\":\"1a.svg\", \
-            \"sumFormula\":\"C6H6\", \"iupacName\":\"benzene\"}, \
-            \"value\":\"1a\"}]",
-          prdAtts: "{\"atts\": \
-                      [ \
-                        { \
-                          \"id\":2, \
-                          \"attachable_id\":121, \
-                          \"attachable_type\":\"Report\", \
-                          \"filename\":\"kit_logo.png\", \
-                          \"identifier\":\"123\", \
-                          \"checksum\":\"456\", \
-                          \"storage\":\"local\", \
-                          \"created_by\":1, \
-                          \"created_for\":1, \
-                          \"version\":0, \
-                          \"created_at\":\"2018-01-03T15:24:19.751Z\", \
-                          \"updated_at\":\"2018-01-03T15:24:28.686Z\", \
-                          \"content_type\":\"image/png\", \
-                          \"bucket\":\"1\", \
-                          \"key\":\"987\", \
-                          \"thumb\":true, \
-                          \"folder\":\"\", \
-                          \"kind\":\"GCMS\" \
-                        } \
-                      ] \
-                    }",
->>>>>>> Repo update (#45)
           templateId: 1
         }
       end
 
       it 'returns a created -standard- report' do
         params[:template] = 'standard'
-<<<<<<< HEAD
         post '/api/v1/reports', params: params, as: :json
-=======
-        post '/api/v1/reports', params: params
->>>>>>> Repo update (#45)
 
         expect(response.body).to include(fileName)
       end
 
       it 'returns a created -supporting_information- report' do
         params[:template] = 'supporting_information'
-<<<<<<< HEAD
         post '/api/v1/reports', params: params, as: :json
-=======
-        post '/api/v1/reports', params: params
->>>>>>> Repo update (#45)
         expect(response.body).to include(fileName)
       end
     end
diff --git a/spec/api/report_template_api_spec.rb b/spec/api/report_template_api_spec.rb
index ec21ae607..558cebb93 100644
--- a/spec/api/report_template_api_spec.rb
+++ b/spec/api/report_template_api_spec.rb
@@ -10,11 +10,7 @@
 
     before do
       allow_any_instance_of(WardenAuthentication).to(
-<<<<<<< HEAD
         receive(:current_user).and_return(user),
-=======
-        receive(:current_user).and_return(user)
->>>>>>> Repo update (#45)
       )
     end
 
@@ -25,25 +21,15 @@
 
       it 'returns a list report template' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['templates'].count,
-=======
-          JSON.parse(response.body)['templates'].count
->>>>>>> Repo update (#45)
         ).to eq 2
 
         expect(
           JSON.parse(response.body)['templates'].collect do |e|
             [e['id'], e['name']]
-<<<<<<< HEAD
           end,
         ).to match_array(
           ReportTemplate.pluck(:id, :name),
-=======
-          end
-        ).to match_array(
-          ReportTemplate.pluck(:id, :name)
->>>>>>> Repo update (#45)
         )
       end
     end
@@ -53,35 +39,21 @@
         params = {
           name: 'Report template',
           report_type: 'Report template type',
-<<<<<<< HEAD
           file: :template_upload,
-=======
-          file: :template_upload
->>>>>>> Repo update (#45)
         }
         post(
           '/api/v1/report_templates',
           params: params.to_json,
           headers: {
-<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['error'],
-=======
-          JSON.parse(response.body)['error']
->>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -90,23 +62,12 @@
       before do
         delete(
           "/api/v1/report_templates/#{report_template1.id}",
-<<<<<<< HEAD
-=======
-          headers: {
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['error'],
-=======
-          JSON.parse(response.body)['error']
->>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -116,25 +77,15 @@
         get(
           "/api/v1/report_templates/#{report_template1.id}",
           headers: {
-<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['error'],
-=======
-          JSON.parse(response.body)['error']
->>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
@@ -149,46 +100,27 @@
           "/api/v1/report_templates/#{report_template1.id}",
           params: params.to_json,
           headers: {
-<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error 401' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['error'],
-=======
-          JSON.parse(response.body)['error']
->>>>>>> Repo update (#45)
         ).to eq '401 Unauthorized'
       end
     end
   end
 
   context 'with Admin user logged in' do
-<<<<<<< HEAD
     let(:admin) { create(:admin) }
     let!(:report_template1) { create(:report_template) }
 
     before do
       allow_any_instance_of(WardenAuthentication).to(
         receive(:current_user).and_return(admin),
-=======
-    let(:admin) { create(:admin, type: Admin) }
-    let!(:report_template1) { create(:report_template) }
-   
-    before do
-      allow_any_instance_of(WardenAuthentication).to(
-        receive(:current_user).and_return(admin)
->>>>>>> Repo update (#45)
       )
     end
 
@@ -196,39 +128,23 @@
       before do
         params = {
           name: 'Report template',
-<<<<<<< HEAD
           report_type: 'Report template type',
           file: fixture_file_upload(Rails.root.join('spec/fixtures/upload.png')),
-=======
-          report_type: 'Report template type'
->>>>>>> Repo update (#45)
         }
         post(
           '/api/v1/report_templates',
           params: params,
           headers: {
-<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns true' do
-<<<<<<< HEAD
         expect(admin.is_a?(Admin)).to be true
         expect(
           JSON.parse(response.body),
-=======
-        expect(admin.is_a?(Admin)). to be true
-        expect(
-          JSON.parse(response.body)
->>>>>>> Repo update (#45)
         ).to be true
       end
     end
@@ -237,23 +153,12 @@
       before do
         delete(
           "/api/v1/report_templates/#{report_template1.id}",
-<<<<<<< HEAD
-=======
-          headers: {
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns error true' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body),
-=======
-          JSON.parse(response.body)
->>>>>>> Repo update (#45)
         ).to be true
       end
     end
@@ -263,25 +168,15 @@
         get(
           "/api/v1/report_templates/#{report_template1.id}",
           headers: {
-<<<<<<< HEAD
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns report template' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body)['template']['id'],
-=======
-          JSON.parse(response.body)['template']['id']
->>>>>>> Repo update (#45)
         ).to eq report_template1.id
       end
     end
@@ -290,7 +185,6 @@
       before do
         params = {
           name: 'Report template',
-<<<<<<< HEAD
           report_type: 'Report template type',
           file: fixture_file_upload(Rails.root.join('spec/fixtures/upload.png')),
         }
@@ -301,33 +195,17 @@
             'HTTP-ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
             'CONTENT-TYPE' => 'multipart/form-data',
           },
-=======
-          report_type: 'Report template type'
-        }
-        put(
-          "/api/v1/report_templates/#{report_template1.id}", 
-          params: params,
-          headers: {
-            'HTTP_ACCEPT' => 'application/vnd.ms-excel, chemical/x-mdl-sdfile',
-            'CONTENT_TYPE' => 'multipart/form-data'
-          }
->>>>>>> Repo update (#45)
         )
       end
 
       it 'returns true' do
         expect(
-<<<<<<< HEAD
           JSON.parse(response.body),
         ).to be true
       end
 
       it 'file was saved as attachment' do
         expect(Attachment.find(ReportTemplate.find(report_template1.id).attachment_id).filename).to eq('upload.png')
-=======
-          JSON.parse(response.body)
-        ).to eq true
->>>>>>> Repo update (#45)
       end
     end
   end
diff --git a/spec/api/research_plan_api_spec.rb b/spec/api/research_plan_api_spec.rb
index 123c0c0f7..936187035 100644
--- a/spec/api/research_plan_api_spec.rb
+++ b/spec/api/research_plan_api_spec.rb
@@ -31,34 +31,6 @@
       end
     end
 
-<<<<<<< HEAD
-=======
-    describe 'GET /api/v1/research_plans' do
-      let!(:c) { create(:collection, label: 'C1', user: user, is_shared: false) }
-      let(:rp) { create(:research_plan) }
-      let!(:research_plan_metadata) { create(:research_plan_metadata) }
-
-   before do
-        rp.research_plan_metadata = research_plan_metadata
-        CollectionsResearchPlan.create!(research_plan: rp, collection: c)
-      end
-
-      it 'returns serialized research_plans of logged in user' do
-        get '/api/v1/research_plans'
-        first_rp = JSON.parse(response.body)['research_plans'].first
-        expect(response.status).to eq 200
-        expect(first_rp).to include(
-          'type' => 'research_plan',
-          'name' => rp.name
-        )
-        expect(first_rp['research_plan_metadata']).to include(
-            'id' => research_plan_metadata.id,
-            'doi' => research_plan_metadata.doi
-        )
-      end
-    end
-
->>>>>>> Repo update (#45)
     describe 'POST /api/v1/research_plans' do
       context 'with valid parameters' do
         let(:params) do
@@ -74,11 +46,7 @@
           }
         end
 
-<<<<<<< HEAD
         before { post '/api/v1/research_plans', params: params, as: :json}
-=======
-        before { post '/api/v1/research_plans', params: params,  as: :json}
->>>>>>> Repo update (#45)
 
         it 'is able to create a new research plan' do
           rp = ResearchPlan.find_by(name: 'test')
diff --git a/spec/api/research_plan_metadata_api_spec.rb b/spec/api/research_plan_metadata_api_spec.rb
index 6a284ff37..adf29263a 100644
--- a/spec/api/research_plan_metadata_api_spec.rb
+++ b/spec/api/research_plan_metadata_api_spec.rb
@@ -49,13 +49,8 @@
           },
           geo_location: {
             geoLocationPoint: {
-<<<<<<< HEAD
               pointLongitude: Faker::Address.longitude.to_s,
               pointLatitude: Faker::Address.latitude.to_s
-=======
-              pointLongitude: Faker::Address.longitude,
-              pointLatitude: Faker::Address.latitude
->>>>>>> Repo update (#45)
             }
           },
           funding_reference: {
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index f1ac3fb5c..66648dfce 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -6,21 +6,12 @@
 require 'webmock/rspec'
 
 require 'factory_bot_rails'
-<<<<<<< HEAD
 require 'faker'
-=======
->>>>>>> Repo update (#45)
 require 'capybara'
 require 'webdrivers'
 # require 'capybara/rspec'
 require 'rails_helper'
 
-<<<<<<< HEAD
-=======
-
-Webdrivers.logger.level = :DEBUG
-
->>>>>>> Repo update (#45)
 Capybara.register_driver :selenium do |app|
   http_client = Selenium::WebDriver::Remote::Http::Default.new(
     open_timeout: nil,
@@ -58,7 +49,6 @@
 inchi_path = '/rest/pug/compound/inchikey/'
 
 RSpec.configure do |config|
-<<<<<<< HEAD
   config.after do |example|
     if example.metadata[:type] == :feature && example.exception.present?
       metadata = example.metadata
@@ -66,9 +56,6 @@
       save_screenshot(filename)
     end
   end
-=======
-  config.example_status_persistence_file_path = "spec/examples.txt"
->>>>>>> Repo update (#45)
 
   config.include FactoryBot::Syntax::Methods
 
@@ -104,19 +91,11 @@
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/YMWUJEATGCHHMB-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})
-<<<<<<< HEAD
 
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/UHOVQNZJYSORNB-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})
 
-=======
-    
-    stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/UHOVQNZJYSORNB-UHFFFAOYSA-N/record/JSON')
-      .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
-      .to_return(status: 200, body: '', headers: {})
-      
->>>>>>> Repo update (#45)
     stub_request(:get, 'http://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/inchikey/PNNRZXFUPQQZSO-UHFFFAOYSA-N/record/JSON')
       .with(headers: { 'Accept' => '*/*', 'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type' => 'text/json' })
       .to_return(status: 200, body: '', headers: {})
diff --git a/yarn.lock b/yarn.lock
index 7a409331e..35b7a24a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -714,13 +714,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-syntax-jsx@^7.17.12":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -1586,42 +1579,6 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/babel-plugin@^11.10.0":
-  version "11.10.2"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
-  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.0"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.0.13"
-
-"@emotion/babel-plugin@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
-  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.1"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.1.3"
-
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
@@ -2784,6 +2741,23 @@
   dependencies:
     dequal "^2.0.2"
 
+"@rollup/plugin-babel@^6.0.2":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz#bd698e351fa9aa9619fcae780aea2a603d98e4c4"
+  integrity sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@rollup/pluginutils" "^5.0.1"
+
+"@rollup/pluginutils@^5.0.1":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@sentry-internal/tracing@7.73.0":
   version "7.73.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.73.0.tgz#4838f31e41d23a6041ef4520519b80f788bf1cac"
@@ -3213,6 +3187,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/estree@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.28"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz#c47def9f34ec81dc6328d0b1b5303d1ec98d86b8"
@@ -3428,16 +3407,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.25"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
-  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-slick@^0.23.4":
   version "0.23.8"
   resolved "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.8.tgz"
@@ -3856,18 +3825,6 @@ agent-base@5:
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
-ag-grid-react@^27.3.0:
-  version "27.3.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
-  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
-  dependencies:
-    prop-types "^15.8.1"
-
-agent-base@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
-  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
-
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -4319,20 +4276,6 @@ babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-check-es2015-constants@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
-  integrity sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -4398,22 +4341,7 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-syntax-async-functions@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
-  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
-
-babel-plugin-syntax-exponentiation-operator@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
-  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
-
-babel-plugin-syntax-flow@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
-  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
-
-babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
@@ -4423,227 +4351,6 @@ babel-plugin-syntax-object-rest-spread@^6.8.0:
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
-babel-plugin-syntax-trailing-function-commas@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
-  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
-
-babel-plugin-transform-async-to-generator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
-  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
-  dependencies:
-    babel-helper-remap-async-to-generator "^6.24.1"
-    babel-plugin-syntax-async-functions "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-arrow-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
-  integrity sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
-  integrity sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-block-scoping@^6.23.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
-  integrity sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    lodash "^4.17.4"
-
-babel-plugin-transform-es2015-classes@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
-  integrity sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
-  dependencies:
-    babel-helper-define-map "^6.24.1"
-    babel-helper-function-name "^6.24.1"
-    babel-helper-optimise-call-expression "^6.24.1"
-    babel-helper-replace-supers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-computed-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
-  integrity sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-destructuring@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
-  integrity sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
-  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-for-of@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
-  integrity sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-function-name@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
-  integrity sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
-  dependencies:
-    babel-helper-function-name "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
-  integrity sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
-  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
-  dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
-  version "6.26.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
-  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
-babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
-  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
-  dependencies:
-    babel-helper-hoist-variables "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-modules-umd@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
-  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
-  dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-
-babel-plugin-transform-es2015-object-super@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
-  integrity sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
-  dependencies:
-    babel-helper-replace-supers "^6.24.1"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-parameters@^6.23.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
-  integrity sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
-  dependencies:
-    babel-helper-call-delegate "^6.24.1"
-    babel-helper-get-function-arity "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
-  integrity sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-spread@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
-  integrity sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-sticky-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
-  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-plugin-transform-es2015-template-literals@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
-  integrity sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
-  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-es2015-unicode-regex@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
-  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
-  dependencies:
-    babel-helper-regex "^6.24.1"
-    babel-runtime "^6.22.0"
-    regexpu-core "^2.0.0"
-
-babel-plugin-transform-exponentiation-operator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
-  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
-  dependencies:
-    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
-    babel-plugin-syntax-exponentiation-operator "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-flow-strip-types@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
-  integrity sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
-  dependencies:
-    babel-plugin-syntax-flow "^6.18.0"
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz"
@@ -4652,109 +4359,7 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-plugin-transform-react-display-name@^6.23.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
-  integrity sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-self@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
-  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx-source@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
-  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-react-jsx@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
-  integrity sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
-  dependencies:
-    babel-helper-builder-react-jsx "^6.24.1"
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
-babel-plugin-transform-regenerator@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
-  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
-  dependencies:
-    regenerator-transform "^0.10.0"
-
-babel-plugin-transform-strict-mode@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
-  integrity sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-preset-env@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
-  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.22.0"
-    babel-plugin-syntax-trailing-function-commas "^6.22.0"
-    babel-plugin-transform-async-to-generator "^6.22.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.23.0"
-    babel-plugin-transform-es2015-classes "^6.23.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
-    babel-plugin-transform-es2015-destructuring "^6.23.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
-    babel-plugin-transform-es2015-for-of "^6.23.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
-    babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.22.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
-    babel-plugin-transform-es2015-modules-umd "^6.23.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.23.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
-    babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
-    babel-plugin-transform-es2015-template-literals "^6.22.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-exponentiation-operator "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
-    browserslist "^3.2.6"
-    invariant "^2.2.2"
-    semver "^5.3.0"
-
-babel-preset-flow@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
-  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
-  dependencies:
-    babel-plugin-transform-flow-strip-types "^6.22.0"
-
-babel-preset-react@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
-  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
-  dependencies:
-    babel-plugin-syntax-jsx "^6.3.13"
-    babel-plugin-transform-react-display-name "^6.23.0"
-    babel-plugin-transform-react-jsx "^6.24.1"
-    babel-plugin-transform-react-jsx-self "^6.22.0"
-    babel-plugin-transform-react-jsx-source "^6.22.0"
-    babel-preset-flow "^6.23.0"
-
-babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
+babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -4762,47 +4367,6 @@ babel-runtime@6.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.24.1, babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.24.1, babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -5340,11 +4904,6 @@ chownr@^2.0.0:
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chroma-js@^1.3.7:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
-  integrity sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==
-
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz"
@@ -6061,7 +5620,7 @@ d3-brush@1:
     d3-selection "1"
     d3-transition "1"
 
-d3-brush@2, d3-brush@2.1.0:
+d3-brush@2:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
   integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
@@ -6676,7 +6235,7 @@ dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -6829,11 +6388,6 @@ delaunator@4:
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
   integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -9136,13 +8690,6 @@ is-core-module@^2.9.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
-  dependencies:
-    has "^1.0.3"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz"
@@ -9631,11 +9178,6 @@ jquery@^3.4.0:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
 
-jquery@^3.4.0:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
-  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -10574,13 +10116,6 @@ mime-types@^2.1.31, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
-mime-types@^2.1.25:
-  version "2.1.34"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
-  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
-  dependencies:
-    mime-db "1.51.0"
-
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
@@ -11747,11 +11282,6 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
-
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz"
@@ -11940,11 +11470,6 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-promise-polyfill@^8.0.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
-  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
-
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz"
@@ -12759,6 +12284,14 @@ react-copy-to-clipboard@^5.1.0:
     copy-to-clipboard "^3.3.1"
     prop-types "^15.8.1"
 
+react-countup@^6.3.2:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.4.0.tgz#f18d24e40c37c465b29353172cc8b3b5e82f3241"
+  integrity sha512-7vvz0IIcDwWdd1JDzDB3z+9wSWL5Cf7pqwMPUXnIe66M3UXZyMWrvTp1p96wpPgg8/v4Gvf8YLvJoO+34G0GMA==
+  dependencies:
+    "@rollup/plugin-babel" "^6.0.2"
+    countup.js "^2.3.2"
+
 react-date-picker@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-9.2.0.tgz#ee194a694fa9891d93e4d40e76fbcdae7eafbe86"
@@ -12786,14 +12319,6 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.2"
     react-popper "^2.3.0"
 
-react-countup@^6.3.2:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.4.0.tgz#f18d24e40c37c465b29353172cc8b3b5e82f3241"
-  integrity sha512-7vvz0IIcDwWdd1JDzDB3z+9wSWL5Cf7pqwMPUXnIe66M3UXZyMWrvTp1p96wpPgg8/v4Gvf8YLvJoO+34G0GMA==
-  dependencies:
-    "@rollup/plugin-babel" "^6.0.2"
-    countup.js "^2.3.2"
-
 react-datepicker@~1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.4.1.tgz"
@@ -13058,13 +12583,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-nglviewer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/react-nglviewer/-/react-nglviewer-0.5.0.tgz#920f3332d56aa4ed002978fefc83974d6fe232ec"
-  integrity sha512-6zAJY2uJ6TcyFICdaLkKC0Q+2vq/nlsuNFF4yEJosIt1qz8FF8b+GLmQcEvYRHGK7mhMO91rBX2j8qA0rrTz/w==
-  dependencies:
-    ngl "^2.1.0"
-
 react-notification-system@^0.2.17, react-notification-system@^0.2.7:
   version "0.2.17"
   resolved "https://registry.npmjs.org/react-notification-system/-/react-notification-system-0.2.17.tgz"
@@ -13175,31 +12693,7 @@ react-quill@^2.0.0:
     lodash "^4.17.4"
     quill "^1.3.7"
 
-react-redux@7.2.9:
-  version "7.2.9"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
-  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
-    hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
-react-redux@^7.2.0:
-  version "7.2.8"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
-  integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
-    hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
-react-redux@^7.2.0:
+react-redux@7.2.9, react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
   integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
@@ -13417,16 +12911,6 @@ react-transition-group@^4.4.0, react-transition-group@^4.4.1, react-transition-g
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-transition-group@^4.4.0, react-transition-group@^4.4.1:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-treeview@0.4.7:
   version "0.4.7"
   resolved "https://registry.npmjs.org/react-treeview/-/react-treeview-0.4.7.tgz"
@@ -13682,11 +13166,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -13697,15 +13176,6 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
-regenerator-transform@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
-  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
-  dependencies:
-    babel-runtime "^6.18.0"
-    babel-types "^6.19.0"
-    private "^0.1.6"
-
 regenerator-transform@^0.13.3:
   version "0.13.4"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz"
@@ -13750,15 +13220,6 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
-  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
-
 regexpu-core@^4.7.1:
   version "4.8.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz"
@@ -13948,15 +13409,6 @@ resolve@^1.19.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.19.0:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -14570,11 +14022,6 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-sprintf-js@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
-  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
@@ -14990,11 +14437,6 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -16085,14 +15527,6 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yauzl@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
-  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
-  dependencies:
-    buffer-crc32 "~0.2.3"
-    fd-slicer "~1.1.0"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From c0cdea42f6484bae4895571f1ef27a305553a70f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 16 Jan 2024 15:59:35 +0000
Subject: [PATCH 253/258] chore: Bump follow-redirects from 1.14.9 to 1.15.5

Dependabot couldn't find the original pull request head commit, 445e9937d36592bb3508cdaf7799dad6622032c1.
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 35b7a24a0..0c9cdb777 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7636,9 +7636,9 @@ flux@2.1.1:
     immutable "^3.7.4"
 
 follow-redirects@^1.0.0:
-  version "1.14.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
-  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 font-family-papandreou@^0.2.0-patch1:
   version "0.2.0-patch2"

From 9d58f397e7758fababe7116a10a1be2725cd833c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 16 Jan 2024 14:14:18 +0000
Subject: [PATCH 254/258] chore: Bump puma from 5.6.7 to 5.6.8

Bumps [puma](https://github.com/puma/puma) from 5.6.7 to 5.6.8.
- [Release notes](https://github.com/puma/puma/releases)
- [Changelog](https://github.com/puma/puma/blob/master/History.md)
- [Commits](https://github.com/puma/puma/compare/v5.6.7...v5.6.8)

---
updated-dependencies:
- dependency-name: puma
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Gemfile.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 8175551e3..aec1e2235 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -503,7 +503,7 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     net-ssh (6.1.0)
-    nio4r (2.5.9)
+    nio4r (2.7.0)
     nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
@@ -576,7 +576,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (5.0.0)
-    puma (5.6.7)
+    puma (5.6.8)
       nio4r (~> 2.0)
     pundit (2.2.0)
       activesupport (>= 3.0.0)

From 12220c321a5dc5b18dd3ecb64cc74771dfcacd95 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Thu, 18 Jan 2024 15:16:35 +0100
Subject: [PATCH 255/258] chore: semver vulnerable

---
 yarn.lock | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0c9cdb777..f869719a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13596,11 +13596,6 @@ selfsigned@^2.0.1:
   dependencies:
     node-forge "^1"
 
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
 semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
@@ -14648,9 +14643,9 @@ typescript@^5.0.4:
   integrity sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==
 
 ua-parser-js@^0.7.30:
-  version "0.7.33"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
-  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
+  version "0.7.35"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
+  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
 
 uglify-js@~3.10.3:
   version "3.10.4"

From d0b9b97b9d826c14e5d0d62993371b2d3509cc23 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Thu, 18 Jan 2024 15:38:34 +0100
Subject: [PATCH 256/258] chore: upgrade lodash 4.17.21

---
 package.json | 2 +-
 yarn.lock    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2f6b61e77..842744da1 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "jcampconverter": "^2.11.0",
     "js-yaml": "^3.13.1",
     "jsdom": "^22.1.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
     "mobx-state-tree": "^5.1.5",
diff --git a/yarn.lock b/yarn.lock
index f869719a8..836dcd2c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9835,7 +9835,7 @@ lodash.throttle@^4.0.0:
   resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4.0.1, lodash@^4.16.5, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5:
+lodash@^4.0.1, lodash@^4.16.5, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -13596,6 +13596,11 @@ selfsigned@^2.0.1:
   dependencies:
     node-forge "^1"
 
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
 semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"

From ff4715479ca4729e1fb32e0ee4c2f10ecc6a6c24 Mon Sep 17 00:00:00 2001
From: Chia-Lin Lin <chia-lin.lin@kit.edu>
Date: Thu, 18 Jan 2024 19:07:53 +0100
Subject: [PATCH 257/258] chore: github ci

---
 Dockerfile.github-ci | 12 ++++++------
 yarn.lock            | 11 +++--------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/Dockerfile.github-ci b/Dockerfile.github-ci
index 614e7edaf..2dfbd1b72 100644
--- a/Dockerfile.github-ci
+++ b/Dockerfile.github-ci
@@ -1,5 +1,5 @@
 FROM ptrxyz/internal:eln-1.8.0-rc4
-ARG BRANCH=main
+ARG BRANCH=master
 RUN apt-get install -y --no-install-recommends --autoremove --fix-missing \
   build-essential\
   openssh-server\
@@ -8,12 +8,12 @@ RUN apt-get install -y --no-install-recommends --autoremove --fix-missing \
 WORKDIR "/chemotion/app"
 
 # avoid caching if newer commits are present
-ADD "https://api.github.com/repos/ComPlat/chemotion_ELN/commits/${BRANCH}?per_page=1" latest_commit.json
+ADD "https://api.github.com/repos/ComPlat/chemotion_REPO/commits/${BRANCH}?per_page=1" latest_commit.json
 
-RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_ELN/${BRANCH}/Gemfile 
-RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_ELN/${BRANCH}/Gemfile.lock
-RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_ELN/${BRANCH}/package.json
-RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_ELN/${BRANCH}/yarn.lock
+RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_REPO/${BRANCH}/Gemfile
+RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_REPO/${BRANCH}/Gemfile.lock
+RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_REPO/${BRANCH}/package.json
+RUN curl -LJO https://raw.githubusercontent.com/ComPlat/chemotion_REPO/${BRANCH}/yarn.lock
 
 # COPY Gemfile .
 # COPY Gemfile.lock .
diff --git a/yarn.lock b/yarn.lock
index 836dcd2c6..2a2c298a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13596,11 +13596,6 @@ selfsigned@^2.0.1:
   dependencies:
     node-forge "^1"
 
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
 semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
@@ -14648,9 +14643,9 @@ typescript@^5.0.4:
   integrity sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==
 
 ua-parser-js@^0.7.30:
-  version "0.7.35"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
-  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
+  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
 
 uglify-js@~3.10.3:
   version "3.10.4"

From 829e6923a9f386396c02d56e2dbb6c899e7a213f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 28 Feb 2024 01:41:09 +0000
Subject: [PATCH 258/258] chore: Bump rails from 6.1.7.3 to 6.1.7.7

Bumps [rails](https://github.com/rails/rails) from 6.1.7.3 to 6.1.7.7.
- [Release notes](https://github.com/rails/rails/releases)
- [Commits](https://github.com/rails/rails/compare/v6.1.7.3...v6.1.7.7)

---
updated-dependencies:
- dependency-name: rails
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Gemfile      |   2 +-
 Gemfile.lock | 140 +++++++++++++++++++++++++--------------------------
 2 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/Gemfile b/Gemfile
index fec0996c0..4f44f27d7 100644
--- a/Gemfile
+++ b/Gemfile
@@ -89,7 +89,7 @@ gem 'pundit'
 
 gem 'rack'
 gem 'rack-cors', require: 'rack/cors'
-gem 'rails', '~> 6.1.7.3'
+gem 'rails', '~> 6.1.7.7'
 gem 'rdkit_chem', git: 'https://github.com/ptrxyz/rdkit_chem.git', branch: 'pk01'
 gem 'rinchi-gem', '1.0.1', git: 'https://git.scc.kit.edu/ComPlat/rinchi-gem.git'
 gem 'rmagick'
diff --git a/Gemfile.lock b/Gemfile.lock
index aec1e2235..32d4e36cf 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -106,40 +106,40 @@ GEM
   specs:
     aasm (5.4.0)
       concurrent-ruby (~> 1.0)
-    actioncable (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actioncable (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      activejob (= 6.1.7.3)
-      activerecord (= 6.1.7.3)
-      activestorage (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actionmailbox (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       mail (>= 2.7.1)
-    actionmailer (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      actionview (= 6.1.7.3)
-      activejob (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actionmailer (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      actionview (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.7.3)
-      actionview (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actionpack (6.1.7.7)
+      actionview (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      activerecord (= 6.1.7.3)
-      activestorage (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actiontext (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       nokogiri (>= 1.8.5)
-    actionview (6.1.7.3)
-      activesupport (= 6.1.7.3)
+    actionview (6.1.7.7)
+      activesupport (= 6.1.7.7)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
@@ -147,8 +147,8 @@ GEM
     active_model_serializers (0.9.8)
       activemodel (>= 3.2)
       concurrent-ruby (~> 1.0)
-    activejob (6.1.7.3)
-      activesupport (= 6.1.7.3)
+    activejob (6.1.7.7)
+      activesupport (= 6.1.7.7)
       globalid (>= 0.3.6)
     activejob-status (0.2.2)
       activejob (>= 4.2)
@@ -156,21 +156,21 @@ GEM
     activejob_dj_overrides (0.2.0)
       delayed_job
       rails (>= 4.2)
-    activemodel (6.1.7.3)
-      activesupport (= 6.1.7.3)
-    activerecord (6.1.7.3)
-      activemodel (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    activemodel (6.1.7.7)
+      activesupport (= 6.1.7.7)
+    activerecord (6.1.7.7)
+      activemodel (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
     activerecord-nulldb-adapter (0.9.0)
       activerecord (>= 5.2.0, < 7.1)
-    activestorage (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      activejob (= 6.1.7.3)
-      activerecord (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    activestorage (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.7.3)
+    activesupport (6.1.7.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -267,7 +267,7 @@ GEM
     cocaine (0.5.8)
       climate_control (>= 0.0.3, < 1.0)
     coderay (1.1.3)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     content_disposition (1.0.0)
     countries (5.1.2)
       sixarm_ruby_unaccent (~> 1.1)
@@ -285,7 +285,7 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.3.3)
+    date (3.3.4)
     debase (0.2.4.1)
       debase-ruby_core_source (>= 0.10.2)
     debase-ruby_core_source (0.10.17)
@@ -360,8 +360,8 @@ GEM
     fx (0.7.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
-    globalid (1.1.0)
-      activesupport (>= 5.0)
+    globalid (1.2.1)
+      activesupport (>= 6.1)
     grape (1.6.2)
       activesupport
       builder
@@ -454,7 +454,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.21.3)
+    loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -477,9 +477,9 @@ GEM
       nokogiri (~> 1)
       rake
     mini_magick (4.11.0)
-    mini_mime (1.1.2)
-    mini_portile2 (2.8.4)
-    minitest (5.20.0)
+    mini_mime (1.1.5)
+    mini_portile2 (2.8.5)
+    minitest (5.22.2)
     moneta (1.4.2)
     msgpack (1.6.0)
     multi_json (1.15.0)
@@ -489,18 +489,18 @@ GEM
       ruby2_keywords (~> 0.0.1)
     mustermann-grape (1.0.2)
       mustermann (>= 1.0.0)
-    net-imap (0.3.4)
+    net-imap (0.4.10)
       date
       net-protocol
     net-pop (0.1.2)
       net-protocol
-    net-protocol (0.2.1)
+    net-protocol (0.2.2)
       timeout
     net-scp (3.0.0)
       net-ssh (>= 2.6.5, < 7.0.0)
     net-sftp (3.0.0)
       net-ssh (>= 5.0.0, < 7.0.0)
-    net-smtp (0.3.3)
+    net-smtp (0.4.0.1)
       net-protocol
     net-ssh (6.1.0)
     nio4r (2.7.0)
@@ -581,7 +581,7 @@ GEM
     pundit (2.2.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.7.1)
+    racc (1.7.3)
     rack (2.2.8)
     rack-accept (0.4.5)
       rack (>= 0.4)
@@ -599,20 +599,20 @@ GEM
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
-    rails (6.1.7.3)
-      actioncable (= 6.1.7.3)
-      actionmailbox (= 6.1.7.3)
-      actionmailer (= 6.1.7.3)
-      actionpack (= 6.1.7.3)
-      actiontext (= 6.1.7.3)
-      actionview (= 6.1.7.3)
-      activejob (= 6.1.7.3)
-      activemodel (= 6.1.7.3)
-      activerecord (= 6.1.7.3)
-      activestorage (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    rails (6.1.7.7)
+      actioncable (= 6.1.7.7)
+      actionmailbox (= 6.1.7.7)
+      actionmailer (= 6.1.7.7)
+      actionpack (= 6.1.7.7)
+      actiontext (= 6.1.7.7)
+      actionview (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activemodel (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       bundler (>= 1.15.0)
-      railties (= 6.1.7.3)
+      railties (= 6.1.7.7)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
@@ -621,14 +621,14 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (6.1.7.3)
-      actionpack (= 6.1.7.3)
-      activesupport (= 6.1.7.3)
+    railties (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
     rainbow (3.1.1)
-    rake (13.0.6)
+    rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -788,7 +788,7 @@ GEM
     temple (0.9.1)
     thor (1.2.2)
     tilt (2.0.11)
-    timeout (0.3.2)
+    timeout (0.4.1)
     ttfunk (1.7.0)
     tty-screen (0.8.1)
     turbo-sprockets-rails4 (1.2.5)
@@ -828,7 +828,7 @@ GEM
       hashdiff (>= 0.4.0, < 2.0.0)
     webrick (1.7.0)
     websocket (1.2.9)
-    websocket-driver (0.7.5)
+    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     whenever (1.0.0)
@@ -842,7 +842,7 @@ GEM
       rake (>= 0.8.7)
     yard (0.9.28)
       webrick (~> 1.7.0)
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   ruby
@@ -946,7 +946,7 @@ DEPENDENCIES
   pundit
   rack
   rack-cors
-  rails (~> 6.1.7.3)
+  rails (~> 6.1.7.7)
   rdkit_chem!
   rinchi-gem (= 1.0.1)!
   rmagick